/* 공용 디자인 토큰 — v3·v4·v5 공유
   정부 남색 단일 액센트 + 무채색 잉크. 대비는 흰 배경 기준 4.5:1 이상 확보. */
:root {
  /* 남색 9단계 */
  --navy-900: #071f3d;
  --navy-800: #0a2c56;
  --navy-700: #123f77;
  --navy-600: #1d5599;
  --navy-500: #2f6cb5;
  --navy-300: #8ba7c9;
  --navy-100: #dde6f2;
  --navy-50:  #f1f5fa;

  /* 잉크 (본문/메타) */
  --ink-900: #14181d;   /* 15.8:1 */
  --ink-700: #343a43;   /* 11.2:1 */
  --ink-500: #5b636e;   /*  6.0:1 */
  --ink-400: #7a828d;   /*  4.6:1 */

  --line-100: #eef0f3;
  --line-200: #e1e5ea;
  --line-300: #cbd1d8;

  --bg:        #ffffff;
  --bg-sunken: #f7f8fa;
  --bg-rail:   #fbfcfd;

  /* NEW 표시 전용 — 유일한 비남색 유채색 (6.3:1) */
  --hot: #a4262c;
  --hot-bg: #fdf3f3;

  --focus: #1d5599;

  /* 타이포 */
  --ff: 'Pretendard', 'Malgun Gothic', -apple-system, 'Segoe UI', system-ui, sans-serif;
  --fs-11: 11px; --fs-12: 12px; --fs-13: 13px; --fs-135: 13.5px;
  --fs-14: 14px; --fs-15: 15px; --fs-17: 17px; --fs-19: 19px; --fs-22: 22px;
  --lh-tight: 1.34; --lh-snug: 1.45; --lh-base: 1.6; --lh-loose: 1.72;
  --ls-tight: -.012em; --ls-wide: .02em;

  /* 간격 4px 그리드 */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 20px; --s6: 24px; --s8: 32px;

  /* 치수 */
  --h-topbar: 52px;
  --h-filterbar: 40px;
  --w-list: 384px;
  --w-aside: 296px;
  --r-2: 2px; --r-3: 3px; --r-999: 999px;

  --dur-fast: 90ms; --dur: 140ms;
  --ease: cubic-bezier(.2,.6,.3,1);

  color-scheme: light only;
}

@media (max-width: 1439px) {
  :root { --w-list: 340px; --w-aside: 264px; }
}
@media (max-width: 1023px) {
  :root { --w-list: 288px; }
}

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