@charset "utf-8";

/* ─── Accessibility Utilities ───────────────────────────
   WCAG 2.1 AA 기준으로 디자인 톤은 최대한 유지하면서
   대비·포커스·타겟사이즈·가독성을 보정한다.
   (tailwind.css 뒤에 로드되므로 토큰 재선언으로 오버라이드 가능) */

/**
 * .sound_only
 * 그누보드 전반에서 스크린리더 전용 텍스트로 사용되는 클래스.
 * 시각적으로는 숨기되 스크린리더는 읽을 수 있는 표준 패턴(visually-hidden).
 */
.sound_only,
.sr-only,
.visually-hidden {
    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;
}

/* .sound_only 지만 focus 시 화면에 보여야 하는 경우 (키보드 탐색용 skip link 등) */
.sound_only:focus,
.sr-only:focus,
.visually-hidden:focus {
    position: static !important;
    width: auto !important;
    height: auto !important;
    padding: 8px 12px !important;
    margin: 0 !important;
    overflow: visible !important;
    clip: auto !important;
    white-space: normal !important;
}

/* ─── WCAG 1.4.3 Contrast (Minimum) ─────────────────────
   muted-foreground / border / input 을 같은 계열에서 살짝 더
   어둡게(라이트) / 밝게(다크) 조정하여 4.5:1 이상을 확보. */
:root {
    --muted-foreground: oklch(0.38 0 0); /* was 0.45 — #737373 → ~#5e5e5e */
    --border:           oklch(0.82 0 0); /* was 0.90 — 경계 가시성 */
    --input:            oklch(0.78 0 0); /* was 0.90 */
}
html.dark {
    --muted-foreground: oklch(0.78 0 0); /* was 0.708 */
    --border:           oklch(0.35 0 0); /* was 0.269 */
    --input:            oklch(0.35 0 0);
}

/* ─── WCAG 1.4.4 / 1.4.12 기본 크기·줄간격 ──────────────
   html 기본 16px, 문단 line-height 1.6~1.65, 자간 정상화. */
html { font-size: 16px; }
body { line-height: 1.6; }
p    { line-height: 1.65; }

/* ─── WCAG 2.4.7 Focus Visible ─────────────────────────
   Tailwind base reset에서 outline:none 되어 있으므로
   키보드 사용자에게만 보이는 포커스 링을 복원. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
    border-radius: 2px;
}

/* ─── WCAG 2.5.5 Target Size ────────────────────────────
   헤더의 아이콘 전용 버튼을 최소 44×44로 확장. */
#theme-toggle,
#translate-btn,
#mobile-menu-btn {
    min-width: 44px;
    min-height: 44px;
}

/* ─── 링크 식별 보조 (WCAG 1.4.1) ───────────────────────
   본문 흐름 안의 링크는 색상 외에 밑줄로도 구분. */
main p a,
article p a,
section p a {
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* ─── WCAG 2.3.3 Animation from Interactions ───────────
   감속 선호 사용자에게는 전역 transition/animation 을 거의 제거. */
@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;
    }
}