/* Root semantic tokens — design-system.md §7.2.3 1차 점진 승격.
   hex 값은 §7.2.1과 동일해야 하며, head.sub.php first-paint inline style(§2.10.1)이
   사용하는 raw hex(--bg / --surface)와 함께 동기 갱신. */

:root {
  /* Surface (§7.2.1, light) */
  --bg: #ECEEF1;
  --surface: #F7F8FA;
  --surface-2: #EFF1F4;
  --surface-elev: #FFFFFF;
  --surface-strong: #0F172A;
  --line: #E8EBF0;
  --line-2: #E5E7EB;
  --ink: #0F172A;
  --text: #1F2937;
  --text-2: #4B5563;
  --text-3: #6B7280;
  --text-4: #9CA3AF;
  --on-primary: #FFFFFF;
  --on-surface-strong: #FFFFFF;
  --overlay: rgba(15,23,42,.32);

  /* Motion — exam/note 문제 전환 모션 (§2.6) */
  --dur-exam-question: 50ms;

  /* Easing (§2.6 표). raw 키워드 직접 사용 금지 — animation/transition은 토큰 참조. */
  --ease: ease;
  --ease-out: cubic-bezier(.22,.61,.36,1);
  --ease-sheet: cubic-bezier(.2,.75,.25,1);
  --ease-spring: cubic-bezier(.34,1.4,.64,1);
  --ease-linear: linear;

  /* Ad slot flow-protected 사전 영역 (§4.12.E). 후속에서 widget.css raw 280px를 var() 참조로 통일. */
  --h-ad-slot-flow-protected: 280px;

  /* 라운드 결과 슬롯 최소 높이 (§3.8.8) — 로더 단계부터 결과 카드 최소 높이만큼 자리를 확보해 카드 등장 시
     슬롯 성장폭(=묶음 재중앙정렬에 따른 광고 이동폭)을 최소화. 220 = 측정된 최소 결과 카드 ≈224보다 보수적. */
  --h-round-result-slot-floor: 220px;

  /* Typography family (§2.2.1) — 글로벌 단일 출처. fonts.css가 @font-face로 등록한 'Pretendard'·'Pretendard Variable'을 우선,
     이후 -apple-system → BlinkMacSystemFont → system-ui → sans-serif 폴백. 스킨·페이지에서 raw stack 직접 사용 금지. */
  --rl-font-family: 'Pretendard', 'Pretendard Variable', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
}

/* Dark — OS 자동 (사용자 명시 light 토글 제외) */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0B1220;
    --surface: #131A2B;
    --surface-2: #1A2236;
    --surface-elev: #1F2940;
    --surface-strong: #1F2940;
    --line: #1F2940;
    --line-2: #2A3450;
    --ink: #F8FAFC;
    --text: #E2E8F0;
    --text-2: #A8B3C7;
    --text-3: #7E8AA0;
    --text-4: #5A6478;
    --overlay: rgba(0,0,0,.6);
  }
}

/* Dark — 사용자 명시 토글 */
:root[data-theme="dark"] {
  --bg: #0B1220;
  --surface: #131A2B;
  --surface-2: #1A2236;
  --surface-elev: #1F2940;
  --surface-strong: #1F2940;
  --line: #1F2940;
  --line-2: #2A3450;
  --ink: #F8FAFC;
  --text: #E2E8F0;
  --text-2: #A8B3C7;
  --text-3: #7E8AA0;
  --text-4: #5A6478;
  --overlay: rgba(0,0,0,.6);
}