/* ────────────────────────────────────────────────────────────
   tokens.css — Storyboard 디자인 토큰 (CSS 변수, 빌드툴 없음)
   정본: design-kit/tokens.css(@tailwind 버전)을 평문 :root 변수로 변환.
   색·타이포·간격·반경은 변수만 참조 — 임의 값 금지.
   ──────────────────────────────────────────────────────────── */
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.css");

:root {
  /* atomic blue */
  --blue-50: #0066ff; --blue-45: #005eeb; --blue-40: #0052cc;
  --blue-90: #eaf2fe; --blue-80: #c3d9fe; --blue-95: #f3f8ff;

  /* label / text */
  --label-normal: #171719;
  --label-strong: #000000;
  --label-neutral: #37383c;
  --label-alt: #70737c;
  --label-assist: #aeb0b6;
  --label-disable: #c2c4c8;

  /* background */
  --bg-normal: #ffffff;
  --bg-neutral: #f7f7f8;
  --bg-alt: #f4f4f5;
  --bg-canvas: #eef0f2;

  /* line */
  --line-normal: #dbdcdf;
  --line-neutral: #e8e9eb;
  --line-alt: #f1f2f3;
  --line-strong: #37383c;
  --border: rgba(112,115,124,0.22);

  /* primary #0066ff */
  --primary: #0066ff;
  --primary-strong: #005eeb;
  --primary-heavy: #0052cc;
  --primary-light: #eaf2fe;
  --primary-assist: #c3d9fe;

  /* status */
  --positive: #00bf40; --positive-bg: #e6f9ee;
  --negative: #ff4242; --negative-bg: #ffecec;
  --caution:  #ff9b00; --caution-bg: #fff4e0;
  --info: #0066ff;     --info-bg: #eaf2fe;

  /* accent */
  --violet: #9747ff; --violet-bg: #f3ecff;
  --cyan: #0098b2;   --cyan-bg: #e2f6f9;

  /* radii (4/8/12/16/24/full) */
  --r-xs: 4px; --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 24px; --r-full: 9999px;

  /* spacing (4pt grid) */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-6: 24px; --sp-8: 32px;

  /* shadow (저투명 흑색, 모달/팝오버 위주) */
  --sh-1: 0 1px 2px rgba(0,0,0,0.04);
  --sh-2: 0 4px 16px rgba(0,0,0,0.08);
  --sh-3: 0 12px 40px rgba(0,0,0,0.14);

  --font: "Pretendard Variable","Pretendard",-apple-system,BlinkMacSystemFont,"Noto Sans KR",sans-serif;
  --mono: "SF Mono","Fira Code","Consolas",monospace;

  /* transition */
  --t-fast: 150ms; --t-base: 200ms;
}

/* ── Dark mode (Cool Neutral) ───────────────── */
.dark {
  --label-normal: #f5f7f9;
  --label-strong: #ffffff;
  --label-neutral: #d2d8df;
  --label-alt: #a5adb8;
  --label-assist: #6e7889;
  --label-disable: #535c6a;

  --bg-normal: #14191e;
  --bg-neutral: #1e252c;
  --bg-alt: #232a31;
  --bg-canvas: #0e1318;

  --line-normal: #3d4551;
  --line-neutral: #2e353c;
  --line-alt: #232a31;
  --line-strong: #c0c7d0;
  --border: rgba(165,173,184,0.20);

  --primary-light: #0a2a55;
  --primary-assist: #0c3a78;

  --blue-90: #0a2a55; --blue-95: #0c1d33;
  --positive-bg: #0c2a18; --negative-bg: #321416; --caution-bg: #33260c;
  --violet-bg: #221833; --cyan-bg: #0c2a30; --info-bg: #0a2a55;
}

* { box-sizing: border-box; border-color: var(--line-normal); }
html, body { margin: 0; height: 100%; }
body {
  font-family: var(--font);
  background: var(--bg-canvas);
  color: var(--label-normal);
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
}
a { color: inherit; text-decoration: none; }
button { font-family: inherit; }

/* ── Typography scale (7 levels) ────────────── */
.t-display-1 { font-weight: 700; font-size: 44px; line-height: 1.318; letter-spacing: -0.03em; }
.t-display-2 { font-weight: 700; font-size: 40px; line-height: 1.3; letter-spacing: -0.0282em; }
.t-display-3 { font-weight: 700; font-size: 36px; line-height: 1.334; letter-spacing: -0.027em; }
.t-title-1 { font-weight: 700; font-size: 32px; line-height: 1.375; letter-spacing: -0.0253em; }
.t-title-2 { font-weight: 700; font-size: 28px; line-height: 1.358; letter-spacing: -0.0236em; }
.t-title-3 { font-weight: 700; font-size: 24px; line-height: 1.334; letter-spacing: -0.023em; }
.t-heading-1 { font-weight: 700; font-size: 22px; line-height: 1.364; letter-spacing: -0.0194em; }
.t-heading-2 { font-weight: 700; font-size: 20px; line-height: 1.4; letter-spacing: -0.012em; }
.t-headline-1 { font-weight: 600; font-size: 18px; line-height: 1.444; letter-spacing: -0.002em; }
.t-headline-2 { font-weight: 600; font-size: 17px; line-height: 1.412; }
.t-body-1 { font-weight: 500; font-size: 16px; line-height: 1.5; }
.t-body-2 { font-weight: 400; font-size: 15px; line-height: 1.6; }
.t-label-1 { font-weight: 600; font-size: 14px; line-height: 1.429; }
.t-label-2 { font-weight: 500; font-size: 13px; line-height: 1.385; }
.t-caption-1 { font-weight: 500; font-size: 12px; line-height: 1.334; letter-spacing: 0.002em; }
.t-caption-2 { font-weight: 400; font-size: 11px; line-height: 1.273; letter-spacing: 0.003em; }

/* numeric tabular */
.tnum { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }

/* spinner */
@keyframes sb-spin { to { transform: rotate(360deg); } }
.sb-spin { animation: sb-spin .8s linear infinite; }