/* ============================================================================
   hannastudy — 디자인 토큰 (단일 진실원천 코드 구현)
   SoT 문서: docs/디자인UX.md  (수치 근거·게이트는 그 문서)
   근거 계승: docs/최종_계획안.md 8장 + docs/계획_하네스설계.md 18장 A·C·F·G·6장·6.1
   상태: 단계1 토대 · 확정 계승값(임의 변경 금지·재발명 금지)

   규칙(엄수):
   - 본 파일이 색·간격·타이포·모션·반경·터치타깃·오디오·햅틱 토큰의 코드 단일 출처.
   - 컴포넌트 CSS는 리터럴 색(#/rgb/hsl)·px 폰트크기를 직접 쓰지 말고 var(--토큰) 참조.
     (이 파일 밖 리터럴 = grep 린트 G-TOKEN-2 실패)
   - 본 파일 수치 ↔ docs/디자인UX.md 표 불일치 = G-TOKEN-1 실패.
   - 색 토큰은 전부 WCAG 대비 자동검사(G-COLOR-1) 통과값(본문 ≥4.5:1·UI/큰글씨 ≥3:1).
     선택 근거 비율은 docs/디자인UX.md §3.4 + 계산 로그.
   ============================================================================ */

:root {

  /* ── 2. 타이포그래피 (본문 ≥16 · 아동 24+ · 문제 28~48 — 확정 계승) ────────── */
  --font-sans: "Pretendard", "Noto Sans KR", "Apple SD Gothic Neo",
               "Malgun Gothic", system-ui, -apple-system, sans-serif;
  --font-numeric: "Pretendard", ui-monospace, "Noto Sans KR", system-ui, sans-serif;

  --fs-caption: 14px;     /* 보조 캡션(보호자 영역만; 아동 학습화면 사용 금지) */
  --fs-body: 18px;        /* 본문 — 하한 16px 초과 안전 마진 */
  --fs-child: 24px;       /* 아동 화면 기본 본문·버튼 라벨 (하한) */
  --fs-child-lg: 28px;    /* 강조 안내·요정 대사 */
  --fs-problem: 36px;     /* 문제 본문 — 28~48 대역 중앙 */
  --fs-problem-lg: 44px;  /* 큰 숫자·핵심 식 */
  --fs-display: 48px;     /* 단원 타이틀·축하 수치 (상한 48px) */

  --lh-tight: 1.25;       /* 숫자/단일 라벨 */
  --lh-body: 1.5;         /* 본문 (확정) */
  --lh-loose: 1.7;        /* 난독 배려 본문 */
  --measure: 40ch;        /* 본문 줄길이 상한 (난독 30~40자) */
  --ls-normal: 0;         /* 한글 본문 자간(임의 음수 금지) */

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-bold: 700;

  /* ── 3. 색 (저채도 표면 + 의미 강조 · 대비 AA — 확정 계승) ─────────────────── */
  /* 표면(저채도·따뜻한 중간~높은 명도) */
  --c-bg: #FFFBF5;             /* 앱 배경(따뜻한 오프화이트) */
  --c-surface: #FFFFFF;        /* 카드/패널 */
  --c-surface-sunken: #F2EFE9; /* 입력칸·교구판 바닥 */

  /* 글자 (순흑 아님=눈피로↓) */
  --c-ink: #1F2933;            /* 본문 — on surface 14.76:1 / on bg 14.31:1 (AA본문) */
  --c-ink-soft: #4A5568;       /* 보조 — on surface 7.53:1 / on bg 7.30:1 (AA본문) */

  /* 1차 행동 */
  --c-primary: #2563B8;        /* 차분한 파랑 */
  --c-on-primary: #FFFFFF;     /* white on primary 5.91:1 (AA본문) */
  --c-primary-press: #1E4E94;  /* 눌림 상태(더 진한) */

  /* 강조 포인트(절제) */
  --c-accent: #1E7A6B;         /* 청록 — as text on surface 5.18:1 (AA본문) */

  /* 채점 표식 — 형태(⭕/△)·위치·소리가 1차, 색은 2차 강화 */
  --c-correct: #1E7A3D;        /* 정답(밝은 긍정 초록) — as text 5.38:1 */
  --c-correct-soft: #E3F3E8;   /* 정답 배경 틴트 */
  --c-gentle: #9C5E0C;         /* 오답(부드러운 호박) — as text on surface 5.22:1 / on bg 5.07:1 */
  --c-gentle-soft: #FBF0DC;    /* 오답 배경 틴트 */

  /* 상태·보조 */
  /* 포커스 링 = 2중(흰 외곽 halo + 짙은 내곽) — 한 색만으로는 밝은 표면(흰/오프화이트)과
     짙은 컨트롤(primary 등)을 동시에 ≥3:1로 못 만든다(1A56C4 vs primary=1.12:1로 미달).
     그래서 두 톤의 자기 경계(내곽↔halo)=6.62:1로 배경 무관 항상 보이게 하고,
     포커스가 그려지는 모든 '포커스 가능' 인접면에 대해 두 톤 중 적어도 하나가 ≥3:1이 되게 한다.
       내곽(--c-focus #1A56C4) 인접 대비: surface 6.62 · bg 6.42 · surface-sunken 5.77 (밝은 표면 담당)
       halo(--c-focus-halo #FFFFFF) 인접 대비: primary 5.91 · primary-press 8.16 · accent 5.18 · correct 5.38 · gentle 5.22 (짙은 컨트롤 담당)
     → 모든 포커스 가능 인접면에서 ring ≥3:1 (G-FOCUS-1). 비활성(--c-disabled)은 포커스 불가라
       대상에서 제외(이 색 위엔 포커스 링이 그려지지 않음). 검사=scripts/check_contrast.py. */
  --c-focus: #1A56C4;          /* 포커스 링 내곽(짙은 파랑) — 밝은 표면 담당 */
  --c-focus-halo: #FFFFFF;     /* 포커스 링 외곽 halo(흰색) — 짙은 컨트롤 위에서 ring 가시성 담당 */
  --c-disabled: #A0A8B0;       /* 비활성(의미는 아이콘 동반·포커스 불가→포커스 링 대상 아님) */
  --c-border: #E2DDD4;         /* 은은한 경계(비대비 허용) */
  --c-track: #ECE7DE;          /* 진행바 트랙 */

  /* ⚠️ 강한 빨강 실패색·빗금색은 의도적으로 정의하지 않음(존재 금지·G-COLOR-3).
        오답은 --c-gentle(부드러움)만 사용. ✗·빗금 금지. */

  /* ── 4. 간격 (8pt 그리드) ─────────────────────────────────────────────── */
  --sp-1: 4px;
  --sp-2: 8px;    /* 최소 분리(WCAG 간격 하한) */
  --sp-3: 12px;
  --sp-4: 16px;   /* 기본 */
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;   /* 터치타깃 간 안전 간격(~64) · 슬롯 거리 */

  /* ── 5. 터치타깃 (단일 수치표 SoT — 확정 계승) ───────────────────────────── */
  --tap-primary: 64px;     /* 1차 행동 (하한; <64 실패) */
  --tap-control: 60px;     /* 일반 컨트롤 PASS 하한 (<60 실패; 44~60=warn) */
  --tap-min: 44px;         /* WCAG 하한 경보선 — 일반 컨트롤 사용 금지 */
  /* 조작형 학습교구(십틀칸·100판셀 등) 별도 규칙: 시각 코어 ≥44 + 투명 히트영역 ≥60 */
  --tap-manip-core: 44px;  /* 보이는 셀 코어 최소 */
  --tap-manip-hit: 60px;   /* 탭 판정(히트)영역 최소 — 패딩/hitSlop로 확대 */

  /* ── 6. 반경·표면(친근 둥근) ──────────────────────────────────────────── */
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --radius-pill: 999px;
  --radius-full: 50%;

  --elev-1: 0 1px 3px rgba(31, 41, 51, 0.10);  /* 은은한 카드 */
  --elev-2: 0 4px 12px rgba(31, 41, 51, 0.14); /* 떠있는 primary/모달 */
  /* 강한 드롭섀도·네온 글로우 금지 */

  /* ── 7. 모션 (150 / 250 / 400ms — 확정 계승) ────────────────────────────── */
  --dur-fast: 150ms;   /* 마이크로(탭 리플·토글) */
  --dur-base: 250ms;   /* 표준 전환 */
  --dur-slow: 400ms;   /* 큰 전환(화면 이동) */
  --dur-mark: 600ms;   /* 채점 마크 드로잉 상한(탭 시 즉시 완성) */

  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-emphasized: cubic-bezier(0.2, 0, 0.1, 1);
  --ease-decelerate: cubic-bezier(0, 0, 0, 1);

  /* ── 8. 오디오 토큰 (earcon · 믹스 — 확정 계승) ──────────────────────────── */
  /* earcon 토큰 = 디자인UX.md §8.1 표와 이름 1:1(G-TOKEN-1 기계 대조). 값 = earcon
     길이 상한(ms) — 자산은 정적 음원(opus), 본 변수는 재생/스케줄 계약값.
     형제 SoT(입력 §137·온보딩 §129/§177·오류예외 §173/§341)가 var(--snd-tap) 등
     이 이름 그대로 소비하므로 이름에 -len- 삽입 금지(소비 계약 유지). */
  --snd-tap: 150ms;        /* 탭 확인(가장 짧게) */
  --snd-correct: 200ms;    /* 정답(밝은 상행) */
  --snd-partial: 200ms;    /* 부분/근접 */
  --snd-gentle: 200ms;     /* 오답(부드러운 하행·경고음 금지) */
  --snd-hint: 200ms;       /* 힌트 등장 */
  --snd-transition: 200ms; /* 화면 전환 */
  --snd-levelup: 300ms;    /* 레벨업/이정표(드물게=L2/L3) */
  --audio-roundrobin-min: 2;   /* 반복음 라운드로빈 변형 수 하한 */
  --audio-roundrobin-max: 4;   /* 라운드로빈 변형 수 상한 */
  --audio-pitch-jitter: 3%;    /* 반복음 피치 변주 ±2~3% */
  --audio-target-lufs: -16;    /* 통합 라우드니스 (LUFS) */
  --audio-peak-dbtp: -1;       /* 트루피크 상한 (dBTP) */
  --audio-duck-db: -9;         /* 음성 중 BGM 더킹 (-9dB = 범위 -6~-12dB 중 채택값·단일 확정; 디자인UX.md §8.2와 1:1) */
  /* 채널 우선: 음성 > 효과음 > 음악. BGM=홈/축하만(집중·문제 화면 OFF). */
  /* 모든 소리는 시각 등가 100%(음소거 회귀 G-AUDIO-4). TTS=온디바이스 보이스만. */

  /* ── 9. 햅틱 토큰 (탭 10~20ms · 정답 더블 · 강부정 금지 — 확정 계승) ───────── */
  /* navigator.vibrate 패턴(ms). JS에서 토큰을 읽어 배열로 변환해 사용. */
  --haptic-tap: 15;                 /* 탭 확인(15ms = 범위 10~20ms 중 채택값·단일 확정; 디자인UX.md §9와 1:1) */
  --haptic-correct: 20, 40, 20;     /* 정답(짧은 더블) */
  --haptic-gentle: 15;              /* 오답(절제·강부정 금지) */
  --haptic-levelup: 20, 40, 20, 40, 30; /* 이정표(드물게) */
  /* 햅틱=보조 채널. 미지원 시 graceful. 햅틱 단독 의미 전달 금지. */

  /* ── 11. 일관 스타일(친근 플랫 · 선 굵기) ───────────────────────────────── */
  --stroke-1: 2px;   /* 아이콘/교구 가는 선 */
  --stroke-2: 3px;   /* 표준 선(채점 마크·교구 외곽) */
  --stroke-3: 4px;   /* 강조 외곽 */
  --icon-sz: 24px;   /* 기본 아이콘(터치타깃은 §5 별도) */
  --icon-sz-lg: 32px;

  /* ── 12. 자산 예산(상한 — 참고용 변수, 강제는 CI size-budget 린트 G-BUDGET-1) ── */
  /* JS≤300KB · CSS≤50KB · 폰트≤150KB · 숫자CNN≤1MB
     SVG(단원당)≤500KB · Lottie(합)≤300KB · 오디오(opus,합)≤2MB · 영상=별도정책 */

  /* ── 3.5 포커스 링 토큰(2중 링 실현값) ──────────────────────────────────────
     box-shadow 2겹으로 [컨트롤 ─ 흰 halo ─ 짙은 내곽] 순서를 그린다.
     halo가 짙은 컨트롤(primary 등) 위에서 ring을 ≥3:1로, 내곽이 밝은 표면 위에서 ≥3:1로.
     컴포넌트는 :focus-visible에 var(--focus-ring)만 얹으면 됨(리터럴 색 직박이 금지=G-TOKEN-2). */
  --focus-ring-halo-w: 2px;    /* 흰 외곽(분리띠) 두께 */
  --focus-ring-w: 3px;         /* 짙은 내곽 두께 */
  --focus-ring: 0 0 0 var(--focus-ring-halo-w) var(--c-focus-halo),
                0 0 0 calc(var(--focus-ring-halo-w) + var(--focus-ring-w)) var(--c-focus);
}

/* 키보드/스위치 포커스 = 2중 링(흰 halo + 짙은 내곽). 마우스 클릭엔 안 뜸(:focus-visible). */
:where(a, button, input, select, textarea, [tabindex], [role="button"]):focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

/* ── 7.3 모션 안전 — prefers-reduced-motion 등가(필수) ───────────────────────
   모든 전환/애니메이션 제거, 정적 최종 표식+라벨로 의미 100% 유지(⭕/△ 즉시 표시). */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 1ms;
    --dur-base: 1ms;
    --dur-slow: 1ms;
    --dur-mark: 1ms;
  }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── 3.3 고대비 선호 — 경계·글자 대비 상향 변형 ────────────────────────────── */
@media (prefers-contrast: more) {
  :root {
    --c-ink: #000000;
    --c-ink-soft: #2A2F36;
    --c-border: #9AA0A6;
  }
}