/*
 * Korean Equation commercial design foundation.
 * Page migrations should consume these tokens instead of introducing new
 * one-off colours, radii, shadows or control dimensions.
 */
:root {
    --ui-font-sans: "Pretendard", "Noto Sans KR", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --ui-ink-strong: #101828;
    --ui-ink: #263548;
    --ui-ink-muted: #667085;
    --ui-ink-subtle: #98a2b3;
    --ui-brand-950: #0b1f45;
    --ui-brand-900: #102d62;
    --ui-brand-800: #17438f;
    --ui-brand-700: #1d56b3;
    --ui-brand-600: #2563d8;
    --ui-brand-500: #3478ea;
    --ui-brand-100: #e8f1ff;
    --ui-brand-50: #f4f8ff;
    --ui-surface: #ffffff;
    --ui-surface-soft: #f7f9fc;
    --ui-surface-muted: #f1f4f8;
    --ui-border: #d8e0eb;
    --ui-border-soft: #e8edf4;
    --ui-success: #087a55;
    --ui-success-soft: #e9f8f2;
    --ui-warning: #a15c00;
    --ui-warning-soft: #fff6df;
    --ui-danger: #c52b3f;
    --ui-danger-soft: #fff0f2;
    --ui-feedback-info-border: #bfdbfe;
    --ui-feedback-info-bg: #eff6ff;
    --ui-feedback-info-text: #1d4ed8;
    --ui-feedback-success-border: #86efac;
    --ui-feedback-success-bg: #f0fdf4;
    --ui-feedback-success-text: #15803d;
    --ui-feedback-danger-border: #fca5a5;
    --ui-feedback-danger-bg: #fef2f2;
    --ui-feedback-danger-text: #b91c1c;
    --ui-tab-active-bg: #ffffff;
    --ui-tab-active-text: #0f3f8f;
    --ui-tab-active-shadow: 0 8px 18px rgba(37, 99, 235, 0.12);
    --ui-radius-sm: 8px;
    --ui-radius-md: 12px;
    --ui-radius-lg: 18px;
    --ui-radius-xl: 24px;
    --ui-shadow-xs: 0 1px 2px rgba(16, 24, 40, 0.04);
    --ui-shadow-sm: 0 8px 24px rgba(16, 36, 72, 0.07);
    --ui-shadow-md: 0 18px 48px rgba(16, 36, 72, 0.12);
    --ui-focus: 0 0 0 4px rgba(52, 120, 234, 0.16);
    --ui-control-xs: 32px;
    --ui-control-sm: 36px;
    --ui-control-md: 44px;
    --ui-control-lg: 50px;
    --ui-touch-target: 44px;
    --ui-page-gutter: 24px;
    --ui-page-gutter-mobile: 16px;
    --ui-content: 1200px;
    --ui-content-wide: 1480px;
    --ui-transition: 160ms cubic-bezier(0.2, 0, 0, 1);
}

html {
    color-scheme: light;
    min-width: 320px;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -webkit-text-size-adjust: 100%;
}

body {
    color: var(--ui-ink);
    font-family: var(--ui-font-sans);
}

:where(img, video, canvas, svg) {
    max-width: 100%;
}

:where(button, input, select, textarea) {
    font: inherit;
}

:where(summary) {
    min-height: var(--ui-control-xs);
    cursor: pointer;
}

:where([hidden]) {
    display: none !important;
}

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
    outline: 2px solid var(--ui-brand-500);
    outline-offset: 3px;
}

::selection {
    background: #cfe1ff;
    color: var(--ui-brand-950);
}

.sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.ui-container {
    width: min(var(--ui-content), calc(100% - 48px));
    margin-inline: auto;
}

.ui-card {
    border: 1px solid var(--ui-border-soft);
    border-radius: var(--ui-radius-lg);
    background: var(--ui-surface);
    box-shadow: var(--ui-shadow-sm);
}

/* Shared accessible hit area for compact radio/checkbox rows. */
.ui-choice-target {
    box-sizing: border-box;
    min-height: var(--ui-touch-target);
    cursor: pointer;
}

.ui-choice-target:has(:disabled) {
    cursor: not-allowed;
}

.ui-button {
    display: inline-flex;
    min-height: var(--ui-control-md);
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 18px;
    border: 1px solid transparent;
    border-radius: var(--ui-radius-md);
    font: 800 14px/1 var(--ui-font-sans);
    cursor: pointer;
    transition: background-color var(--ui-transition), border-color var(--ui-transition), color var(--ui-transition), box-shadow var(--ui-transition), transform var(--ui-transition);
}

.ui-button:hover {
    transform: translateY(-1px);
}

.ui-button--primary {
    background: var(--ui-brand-600);
    color: #fff;
    box-shadow: 0 8px 20px rgba(37, 99, 216, 0.2);
}

.ui-button--primary:hover {
    background: var(--ui-brand-700);
}

.ui-button--secondary {
    border-color: var(--ui-border);
    background: #fff;
    color: var(--ui-ink-strong);
    box-shadow: var(--ui-shadow-xs);
}

.ui-button--ghost {
    background: transparent;
    color: var(--ui-brand-700);
}

.ui-button--danger {
    background: var(--ui-danger);
    color: #fff;
}

.ui-button:disabled,
.ui-button[aria-disabled="true"] {
    opacity: 0.46;
    cursor: not-allowed;
    pointer-events: none;
    transform: none;
}

.ui-field {
    width: 100%;
    min-height: var(--ui-control-md);
    padding: 0 13px;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-md);
    background: #fff;
    color: var(--ui-ink-strong);
    font: 600 14px/1.4 var(--ui-font-sans);
    transition: border-color var(--ui-transition), box-shadow var(--ui-transition);
}

.ui-field:focus {
    border-color: var(--ui-brand-500);
    box-shadow: var(--ui-focus);
    outline: 0;
}

/* Stable composition contracts for new toolbars, modal surfaces and data regions. */
[data-ui-control-group] {
    display: flex;
    align-items: stretch;
    gap: 8px;
}

[data-ui-control-group] > :where(button, input, select, textarea, a[role="button"]) {
    min-height: var(--ui-control-md);
}

[data-ui-scroll-region] {
    min-width: 0;
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
}

[data-ui-modal-surface] {
    width: min(100% - (var(--ui-page-gutter) * 2), 720px);
    max-height: min(90dvh, 900px);
    overflow: auto;
}

.ui-badge {
    display: inline-flex;
    min-height: 25px;
    align-items: center;
    padding: 0 9px;
    border-radius: 999px;
    background: var(--ui-brand-50);
    color: var(--ui-brand-700);
    font-size: 12px;
    font-weight: 800;
}

/* Shared semantic feedback states. Page-level classes keep their own spacing,
 * while every service consumes one status palette and state API. */
:where(
    .ui-feedback,
    .referrer-check-status,
    .phone-verification-status,
    .cash-refund-feedback,
    .sms-test-result,
    .popup-notice-form-message,
    .payment-sms-result,
    .korean-sync-alert
) {
    border-radius: var(--ui-radius-sm);
}

:is(
    .ui-feedback--info,
    .ui-feedback.is-info,
    .ui-feedback.is-sent,
    .phone-verification-status.is-sent,
    .cash-refund-feedback.is-info
) {
    border-color: var(--ui-feedback-info-border);
    background: var(--ui-feedback-info-bg);
    color: var(--ui-feedback-info-text);
}

:is(
    .ui-feedback--success,
    .ui-feedback.is-success,
    .ui-feedback.success,
    .referrer-check-status.is-success,
    .phone-verification-status.is-success,
    .cash-refund-feedback.is-success,
    .sms-test-result.is-success,
    .popup-notice-form-message.success,
    .payment-sms-result.is-success,
    .korean-sync-alert.is-success
) {
    border-color: var(--ui-feedback-success-border);
    background: var(--ui-feedback-success-bg);
    color: var(--ui-feedback-success-text);
}

:is(
    .ui-feedback--danger,
    .ui-feedback.is-error,
    .ui-feedback.error,
    .referrer-check-status.is-error,
    .phone-verification-status.is-error,
    .cash-refund-feedback.is-error,
    .sms-test-result.is-error,
    .popup-notice-form-message.error,
    .payment-sms-result.is-error,
    .korean-sync-alert.is-error
) {
    border-color: var(--ui-feedback-danger-border);
    background: var(--ui-feedback-danger-bg);
    color: var(--ui-feedback-danger-text);
}

/* One selected-tab treatment across support, learning-library and admin
 * navigation. Existing feature class names remain valid during migration. */
:is(
    .ui-tab,
    .notice-work-tabs a,
    .payment-status-tabs a,
    .notice-tabs a,
    .qna-tab,
    .materials-subject-tabs .materials-tab
):is(:hover, .active, [aria-current="page"], [aria-selected="true"]) {
    background: var(--ui-tab-active-bg);
    color: var(--ui-tab-active-text);
    box-shadow: var(--ui-tab-active-shadow);
}

@media (max-width: 640px) {
    .ui-container {
        width: min(100% - 32px, var(--ui-content));
    }

    [data-ui-control-group] {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    [data-ui-modal-surface] {
        width: calc(100% - (var(--ui-page-gutter-mobile) * 2));
        max-height: calc(100dvh - (var(--ui-page-gutter-mobile) * 2));
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}