/**
 * X-NEO Accessibility Stylesheet (WCAG 2.1 AA)
 *
 * 적용 항목:
 *   - 1.4.3 색상 대비 (4.5:1 이상)
 *   - 1.4.4 텍스트 크기 조절 (200%)
 *   - 1.4.10 리플로우 (320px 너비)
 *   - 1.4.11 비텍스트 대비 (3:1)
 *   - 2.1.1 키보드 접근
 *   - 2.4.7 포커스 가시성
 *   - 2.5.5 터치 타깃 (44×44 px)
 *   - 1.3.4 방향 (가로·세로 모두)
 *   - 1.4.12 텍스트 간격
 *
 * 적용 방법:
 *   <link rel="stylesheet" href="/css/accessibility.css">
 *   (모든 페이지 head에 포함 권장)
 */

/* ════════════════════════════════════════════════════════════════
 * 1. 색상 대비 토큰 (대비 4.5:1 이상 보장)
 * ════════════════════════════════════════════════════════════════ */
:root {
    /* 본문 — 대비 16.3:1 (white 기준) */
    --x-a11y-text:         #1a1a2e;
    --x-a11y-text-muted:   #595a6e;  /* 7.5:1 */

    /* 링크 — 대비 8.6:1 */
    --x-a11y-link:         #0049a1;
    --x-a11y-link-visited: #6a2f8a;
    --x-a11y-link-hover:   #002f6c;

    /* 위험·에러 — 대비 5.9:1 */
    --x-a11y-error:        #a50e1d;
    --x-a11y-error-bg:     #fef0f1;

    /* 성공 — 대비 4.8:1 */
    --x-a11y-success:      #056635;
    --x-a11y-success-bg:   #ebf8f0;

    /* 경고 — 대비 4.7:1 */
    --x-a11y-warning:      #856100;
    --x-a11y-warning-bg:   #fff6d6;

    /* 포커스 링 (3:1 비텍스트 대비) */
    --x-a11y-focus:        #00599c;
    --x-a11y-focus-shadow: 0 0 0 3px #00599c, 0 0 0 5px white;

    /* 최소 터치 영역 */
    --x-a11y-touch-min:    44px;

    /* 최소 글자 크기 */
    --x-a11y-text-min:     16px;
}

/* 다크 모드 (선호 사용자에게만) */
@media (prefers-color-scheme: dark) {
    :root {
        --x-a11y-text:         #f0f3f8;
        --x-a11y-text-muted:   #b1b6c2;
        --x-a11y-link:         #4db8ff;
        --x-a11y-link-visited: #c79eff;
        --x-a11y-link-hover:   #80d0ff;
    }
}


/* ════════════════════════════════════════════════════════════════
 * 2. 기본 본문 (WCAG 1.4.4 200% 줌)
 * ════════════════════════════════════════════════════════════════ */
html {
    font-size: var(--x-a11y-text-min);  /* 16px 기준 */
    -webkit-text-size-adjust: 100%;
}

body {
    color: var(--x-a11y-text);
    line-height: 1.6;                    /* WCAG 1.4.12 */
    letter-spacing: 0.01em;
    font-family: 'Pretendard','Apple SD Gothic Neo',
                 'Noto Sans KR','Malgun Gothic',sans-serif;
}

p, li {
    margin-bottom: 1em;                  /* 문단 간격 */
    max-width: 70ch;                     /* 가독성: 한 줄 70자 */
}

/* 단어 간격 (WCAG 1.4.12) */
* {
    word-spacing: 0.16em;
}


/* ════════════════════════════════════════════════════════════════
 * 3. 링크 (WCAG 1.4.3 대비 + 시각적 구분)
 * ════════════════════════════════════════════════════════════════ */
a:not([class]) {
    color: var(--x-a11y-link);
    text-decoration: underline;
    text-underline-offset: 0.15em;
    text-decoration-thickness: 0.08em;
}

a:not([class]):visited {
    color: var(--x-a11y-link-visited);
}

a:not([class]):hover,
a:not([class]):focus {
    color: var(--x-a11y-link-hover);
    background-color: rgba(0, 73, 161, 0.08);
    text-decoration-thickness: 0.12em;
}


/* ════════════════════════════════════════════════════════════════
 * 4. 키보드 포커스 (WCAG 2.4.7)
 * ════════════════════════════════════════════════════════════════ */
*:focus {
    outline: none;  /* 기본 outline 끄고 아래 :focus-visible로 대체 */
}

*:focus-visible {
    outline: 3px solid var(--x-a11y-focus);
    outline-offset: 3px;
    border-radius: 4px;
}

/* 입력 필드 — 더 명확한 포커스 */
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    box-shadow: var(--x-a11y-focus-shadow);
    border-color: var(--x-a11y-focus);
}


/* ════════════════════════════════════════════════════════════════
 * 5. 터치 타깃 (WCAG 2.5.5)
 * ════════════════════════════════════════════════════════════════ */
button,
a.btn,
input[type="submit"],
input[type="button"],
[role="button"],
[role="link"],
.nav-item,
.cta-btn {
    min-height: var(--x-a11y-touch-min);
    min-width: var(--x-a11y-touch-min);
    padding: 10px 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* 인접 터치 타깃 간격 */
button + button,
a.btn + a.btn {
    margin-left: 8px;
}


/* ════════════════════════════════════════════════════════════════
 * 6. 폼 (WCAG 3.3.2 레이블 + 1.3.5 자동완성)
 * ════════════════════════════════════════════════════════════════ */
label {
    display: block;
    margin-bottom: 6px;
    font-weight: 600;
    color: var(--x-a11y-text);
}

input,
textarea,
select {
    width: 100%;
    min-height: var(--x-a11y-touch-min);
    padding: 10px 14px;
    border: 2px solid #b0b8c4;
    border-radius: 6px;
    font-size: var(--x-a11y-text-min);
    background: white;
    color: var(--x-a11y-text);
    box-sizing: border-box;
}

input::placeholder,
textarea::placeholder {
    color: #6a7281;  /* 4.5:1 대비 */
}

input:invalid:not(:focus):not(:placeholder-shown) {
    border-color: var(--x-a11y-error);
    background-color: var(--x-a11y-error-bg);
}

.form-error {
    color: var(--x-a11y-error);
    font-size: 0.875rem;
    margin-top: 4px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.form-error::before {
    content: '⚠';
    font-size: 1.1em;
}

/* 필수 표시 */
.required::after {
    content: ' *';
    color: var(--x-a11y-error);
    font-weight: 700;
}


/* ════════════════════════════════════════════════════════════════
 * 7. 화면 리더 전용 텍스트 (WCAG 1.3.1)
 * ════════════════════════════════════════════════════════════════ */
.sr-only,
.x-sr-only,
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* 포커스 시 다시 보이게 (Skip 링크 등) */
.sr-only.focusable:focus,
.x-sr-only.focusable:focus {
    position: static;
    width: auto;
    height: auto;
    clip: auto;
    overflow: visible;
    white-space: normal;
}


/* ════════════════════════════════════════════════════════════════
 * 8. 모션·애니메이션 (WCAG 2.3.3)
 * ════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}


/* ════════════════════════════════════════════════════════════════
 * 9. 고대비 모드 (WCAG 1.4.11)
 * ════════════════════════════════════════════════════════════════ */
@media (prefers-contrast: more) {
    :root {
        --x-a11y-text:       #000000;
        --x-a11y-text-muted: #333333;
        --x-a11y-link:       #003366;
    }

    button, .btn {
        border: 2px solid currentColor;
    }
}

/* Windows 고대비 모드 */
@media (-ms-high-contrast: active),
       (forced-colors: active) {
    *:focus-visible {
        outline: 3px solid CanvasText !important;
    }

    .cta-btn, .btn-primary {
        border: 2px solid CanvasText !important;
    }
}


/* ════════════════════════════════════════════════════════════════
 * 10. 반응형 (WCAG 1.4.10 — 320px 리플로우)
 * ════════════════════════════════════════════════════════════════ */
@media (max-width: 320px) {
    body { font-size: 14px; }
    .container { padding: 0 12px; }
}

/* 가로·세로 모두 지원 (WCAG 1.3.4) */
@media (orientation: portrait), (orientation: landscape) {
    html { writing-mode: horizontal-tb; }
}


/* ════════════════════════════════════════════════════════════════
 * 11. 표 (table) 접근성
 * ════════════════════════════════════════════════════════════════ */
table {
    border-collapse: collapse;
    width: 100%;
    margin: 16px 0;
}

caption {
    text-align: left;
    font-weight: 600;
    padding: 8px 0;
}

th, td {
    padding: 12px;
    text-align: left;
    border-bottom: 1px solid #cbd2dc;
}

th[scope="col"] {
    background: #f0f4fa;
    border-bottom: 2px solid var(--x-a11y-focus);
}

th[scope="row"] {
    background: #fafbfd;
    font-weight: 600;
}

/* 작은 화면 — 표 카드형 변환 */
@media (max-width: 600px) {
    table.responsive-table thead { display: none; }
    table.responsive-table tr {
        display: block;
        border: 1px solid #cbd2dc;
        border-radius: 8px;
        margin-bottom: 12px;
        padding: 12px;
    }
    table.responsive-table td {
        display: block;
        border: 0;
        padding: 6px 0;
    }
    table.responsive-table td::before {
        content: attr(data-label) ': ';
        font-weight: 600;
        color: var(--x-a11y-text-muted);
    }
}


/* ════════════════════════════════════════════════════════════════
 * 12. TWA / 네이티브 앱 모드 (Android 앱 진입 시)
 * ════════════════════════════════════════════════════════════════ */
html.x-app-mode .header {
    /* Status bar 영역 회피 */
    padding-top: env(safe-area-inset-top);
}

html.x-app-mode .footer {
    padding-bottom: env(safe-area-inset-bottom);
}

html.x-app-mode .top-banner,
html.x-app-mode .install-cta {
    display: none;
}

html.x-app-mode body {
    overscroll-behavior-y: none;
}

/* iOS 사파리 안전 영역 */
html.x-ios .header {
    padding-top: env(safe-area-inset-top, 20px);
}

html.x-ios body {
    -webkit-tap-highlight-color: transparent;
}


/* ════════════════════════════════════════════════════════════════
 * 13. 로딩·진행률 (스크린리더 친화적)
 * ════════════════════════════════════════════════════════════════ */
[role="progressbar"] {
    display: flex;
    align-items: center;
    gap: 8px;
}

[role="progressbar"]::after {
    content: attr(aria-valuenow) '%';
    font-size: 0.875rem;
    color: var(--x-a11y-text-muted);
}

.x-spinner[role="status"] {
    width: 32px;
    height: 32px;
    border: 3px solid #e3e8ef;
    border-top-color: var(--x-a11y-focus);
    border-radius: 50%;
    animation: x-spin 0.8s linear infinite;
}

@keyframes x-spin {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .x-spinner[role="status"] {
        animation: none;
        border-top-color: var(--x-a11y-text);
    }
}


/* ════════════════════════════════════════════════════════════════
 * 14. 페이지 인쇄 (WCAG 1.4.8 본문 텍스트)
 * ════════════════════════════════════════════════════════════════ */
@media print {
    *, *::before, *::after {
        background: transparent !important;
        color: black !important;
        box-shadow: none !important;
        text-shadow: none !important;
    }

    a, a:visited {
        text-decoration: underline;
    }

    a[href^="http"]::after {
        content: ' (' attr(href) ')';
        font-size: 0.85em;
    }

    .no-print { display: none !important; }
}