/* 생성물 — 손으로 고치지 말 것. tokens.json(2026-10-03 Figma 내보내기) → python3 tokens/build.py */
:root {
  /* 글꼴 */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans KR", "Apple SD Gothic Neo", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, "Roboto Mono", Consolas, monospace;
  --font-note: 제품은 시스템 글꼴 스택을 쓴다. Figma 는 그중 Noto Sans KR · Roboto Mono 로 그린다(가장 가까운 대체). 따라서 순서는 시스템 글꼴이 먼저;
  /* 색 · 프리미티브 (Figma Primitives) */
  --white: #ffffff;
  --slate-50: #f8fafc;
  --slate-100: #f1f5f9;
  --slate-200: #e2e8f0;
  --slate-300: #cbd5e1;
  --slate-400: #94a3b8;
  --slate-500: #64748b;
  --slate-600: #475569;
  --slate-700: #334155;
  --slate-800: #1e293b;
  --slate-900: #0f172a;
  --blue-50: #eff6ff;
  --blue-100: #dbeafe;
  --blue-200: #bfdbfe;
  --blue-300: #93c5fd;
  --blue-400: #60a5fa;
  --blue-500: #2563eb;
  --blue-700: #1d4ed8;
  --blue-900: #1e3a8a;
  --blue-soft: #93b4f5;
  --green-50: #f0fdf4;
  --green-100: #dcfce7;
  --green-200: #bbf7d0;
  --green-600: #16a34a;
  --green-700: #15803d;
  --amber-50: #fffbeb;
  --amber-100: #fef3c7;
  --amber-200: #fde68a;
  --amber-600: #a16207;
  --amber-700: #b45309;
  --red-50: #fef2f2;
  --red-200: #fecaca;
  --red-400: #f87171;
  --red-500: #ef4444;
  --red-600: #dc2626;
  --red-700: #b91c1c;
  --platform-gpt: #10a37f;
  --platform-gemini: #6366f1;
  --platform-perplexity: #0d9488;
  --platform-copilot: #0ea5e9;
  /* 색 · 의미 (Figma Color) — 프리미티브를 가리킨다 */
  --surface-0: var(--white);
  --surface-1: var(--slate-50);
  --surface-2: var(--slate-100);
  --border-base: var(--slate-200);
  --border-strong: var(--slate-300);
  --border-inner: var(--slate-100);
  --text-primary: var(--slate-900);
  --text-body: var(--slate-700);
  --text-tertiary: var(--slate-600);
  --text-secondary: var(--slate-500);
  --text-muted: var(--slate-400);
  --text-inverse: var(--white);
  --brand-50: var(--blue-50);
  --brand-100: var(--blue-100);
  --brand-300: var(--blue-300);
  --brand-400: var(--blue-400);
  --brand-500: var(--blue-500);
  --brand-600: var(--blue-700);
  --brand-900: var(--blue-900);
  --brand-disabled: var(--blue-soft);
  --sidebar-bg: var(--slate-900);
  --sidebar-raised: var(--slate-800);
  --sidebar-text: var(--slate-200);
  --sidebar-link: var(--slate-300);
  --sidebar-active: var(--blue-900);
  --status-success-bg: var(--green-100);
  --status-success-fg: var(--green-700);
  --status-success-icon: var(--green-600);
  --status-success-surface: var(--green-50);
  --status-success-border: var(--green-200);
  --status-warning-bg: var(--amber-100);
  --status-warning-fg: var(--amber-700);
  --status-warning-border: var(--amber-200);
  --status-danger-bg: var(--red-50);
  --status-danger-fg: var(--red-600);
  --status-danger-icon: var(--red-600);
  --status-danger-border: var(--red-200);
  --status-danger-strong: var(--red-700);
  --status-info-bg: var(--amber-50);
  --status-info-fg: var(--amber-600);
  --status-info-border: var(--amber-200);
  --state-error-border: var(--red-400);
  --state-selected-border: var(--blue-200);
  --platform-gpt: var(--platform-gpt);
  --platform-gemini: var(--platform-gemini);
  --platform-perplexity: var(--platform-perplexity);
  --platform-copilot: var(--platform-copilot);
  /* 간격 (Figma Spacing) */
  --spacing-1: 1px;
  --spacing-2: 2px;
  --spacing-3: 3px;
  --spacing-4: 4px;
  --spacing-5: 5px;
  --spacing-6: 6px;
  --spacing-7: 7px;
  --spacing-8: 8px;
  --spacing-9: 9px;
  --spacing-10: 10px;
  --spacing-11: 11px;
  --spacing-12: 12px;
  --spacing-13: 13px;
  --spacing-14: 14px;
  --spacing-15: 15px;
  --spacing-16: 16px;
  --spacing-18: 18px;
  --spacing-20: 20px;
  --spacing-22: 22px;
  --spacing-24: 24px;
  --spacing-26: 26px;
  --spacing-28: 28px;
  --spacing-32: 32px;
  --spacing-36: 36px;
  --spacing-40: 40px;
  --spacing-44: 44px;
  --spacing-46: 46px;
  --spacing-48: 48px;
  --spacing-52: 52px;
  --spacing-56: 56px;
  --spacing-64: 64px;
  --spacing-72: 72px;
  --spacing-80: 80px;
  /* 라운드 (Figma Radius) */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 10px;
  --radius-card: 12px;
  --radius-modal: 14px;
  --radius-xl: 16px;
  --radius-full: 999px;
  /* 글자 크기 단계 — 같은 크기의 스타일이 공유한다 (인라인 font-size 치환용) */
  --fs-12: 12px; --lh-12: 18px;
  --fs-13: 13px; --lh-13: 19px;
  --fs-14: 14px; --lh-14: 20px;
  --fs-15: 15px; --lh-15: 22px;
  --fs-16: 16px; --lh-16: 24px;
  --fs-18: 18px; --lh-18: 27px;
  --fs-21: 21px; --lh-21: 31px;
  --fs-22: 22px; --lh-22: 28px;
  --fs-26: 26px; --lh-26: 34px;
  --fs-34: 34px; --lh-34: 50px;
  --fs-40: 40px; --lh-40: 48px;
  /* 글자 스타일 (Figma 텍스트 스타일) */
  --text-display-font: var(--font-sans); --text-display-weight: 900; --text-display-size: 34px; --text-display-lh: 50px;
  --text-display-sm-font: var(--font-sans); --text-display-sm-weight: 900; --text-display-sm-size: 26px; --text-display-sm-lh: 34px;
  --text-metric-lg-font: var(--font-sans); --text-metric-lg-weight: 700; --text-metric-lg-size: 40px; --text-metric-lg-lh: 48px;
  --text-metric-font: var(--font-sans); --text-metric-weight: 700; --text-metric-size: 34px; --text-metric-lh: 34px;
  --text-title-lg-font: var(--font-sans); --text-title-lg-weight: 700; --text-title-lg-size: 21px; --text-title-lg-lh: 31px;
  --text-title-md-font: var(--font-sans); --text-title-md-weight: 700; --text-title-md-size: 18px; --text-title-md-lh: 27px;
  --text-title-sm-font: var(--font-sans); --text-title-sm-weight: 700; --text-title-sm-size: 16px; --text-title-sm-lh: 24px;
  --text-body-lg-font: var(--font-sans); --text-body-lg-weight: 400; --text-body-lg-size: 16px; --text-body-lg-lh: 24px;
  --text-body-lg-strong-font: var(--font-sans); --text-body-lg-strong-weight: 500; --text-body-lg-strong-size: 16px; --text-body-lg-strong-lh: 24px;
  --text-body-bold-font: var(--font-sans); --text-body-bold-weight: 700; --text-body-bold-size: 15px; --text-body-bold-lh: 22px;
  --text-body-strong-font: var(--font-sans); --text-body-strong-weight: 500; --text-body-strong-size: 15px; --text-body-strong-lh: 22px;
  --text-body-font: var(--font-sans); --text-body-weight: 400; --text-body-size: 15px; --text-body-lh: 22px;
  --text-body-sm-bold-font: var(--font-sans); --text-body-sm-bold-weight: 700; --text-body-sm-bold-size: 14px; --text-body-sm-bold-lh: 20px;
  --text-body-sm-strong-font: var(--font-sans); --text-body-sm-strong-weight: 500; --text-body-sm-strong-size: 14px; --text-body-sm-strong-lh: 20px;
  --text-body-sm-font: var(--font-sans); --text-body-sm-weight: 400; --text-body-sm-size: 14px; --text-body-sm-lh: 20px;
  --text-label-strong-font: var(--font-sans); --text-label-strong-weight: 700; --text-label-strong-size: 13px; --text-label-strong-lh: 19px;
  --text-label-font: var(--font-sans); --text-label-weight: 500; --text-label-size: 13px; --text-label-lh: 19px;
  --text-label-regular-font: var(--font-sans); --text-label-regular-weight: 400; --text-label-regular-size: 13px; --text-label-regular-lh: 19px;
  --text-caption-strong-font: var(--font-sans); --text-caption-strong-weight: 700; --text-caption-strong-size: 12px; --text-caption-strong-lh: 18px;
  --text-caption-medium-font: var(--font-sans); --text-caption-medium-weight: 500; --text-caption-medium-size: 12px; --text-caption-medium-lh: 18px;
  --text-caption-font: var(--font-sans); --text-caption-weight: 400; --text-caption-size: 12px; --text-caption-lh: 18px;
  --text-mono-title-font: var(--font-mono); --text-mono-title-weight: 700; --text-mono-title-size: 22px; --text-mono-title-lh: 28px;
  --text-mono-body-strong-font: var(--font-mono); --text-mono-body-strong-weight: 700; --text-mono-body-strong-size: 14px; --text-mono-body-strong-lh: 20px;
  --text-mono-body-font: var(--font-mono); --text-mono-body-weight: 400; --text-mono-body-size: 14px; --text-mono-body-lh: 20px;
  --text-mono-label-strong-font: var(--font-mono); --text-mono-label-strong-weight: 700; --text-mono-label-strong-size: 13px; --text-mono-label-strong-lh: 19px;
  --text-mono-label-font: var(--font-mono); --text-mono-label-weight: 400; --text-mono-label-size: 13px; --text-mono-label-lh: 19px;
  --text-mono-caption-font: var(--font-mono); --text-mono-caption-weight: 400; --text-mono-caption-size: 12px; --text-mono-caption-lh: 14px;
  /* 효과 (Figma 효과 스타일) */
  --focus-ring: 0px 0px 0px 3px rgba(37,99,235,0.15);
  --shadow-modal: 0px 24px 60px 0px rgba(0,0,0,0.35);
  --shadow-auth-card: 0px 24px 60px 0px rgba(15,23,42,0.08);
}

/* 글자 스타일 클래스 — 새 화면은 인라인 font-size 대신 이 클래스를 쓴다 */
.t-display { font: 900 34px/50px var(--font-sans); }
.t-display-sm { font: 900 26px/34px var(--font-sans); }
.t-metric-lg { font: 700 40px/48px var(--font-sans); }
.t-metric { font: 700 34px/34px var(--font-sans); }
.t-title-lg { font: 700 21px/31px var(--font-sans); }
.t-title-md { font: 700 18px/27px var(--font-sans); }
.t-title-sm { font: 700 16px/24px var(--font-sans); }
.t-body-lg { font: 400 16px/24px var(--font-sans); }
.t-body-lg-strong { font: 500 16px/24px var(--font-sans); }
.t-body-bold { font: 700 15px/22px var(--font-sans); }
.t-body-strong { font: 500 15px/22px var(--font-sans); }
.t-body { font: 400 15px/22px var(--font-sans); }
.t-body-sm-bold { font: 700 14px/20px var(--font-sans); }
.t-body-sm-strong { font: 500 14px/20px var(--font-sans); }
.t-body-sm { font: 400 14px/20px var(--font-sans); }
.t-label-strong { font: 700 13px/19px var(--font-sans); }
.t-label { font: 500 13px/19px var(--font-sans); }
.t-label-regular { font: 400 13px/19px var(--font-sans); }
.t-caption-strong { font: 700 12px/18px var(--font-sans); }
.t-caption-medium { font: 500 12px/18px var(--font-sans); }
.t-caption { font: 400 12px/18px var(--font-sans); }
.t-mono-title { font: 700 22px/28px var(--font-mono); }
.t-mono-body-strong { font: 700 14px/20px var(--font-mono); }
.t-mono-body { font: 400 14px/20px var(--font-mono); }
.t-mono-label-strong { font: 700 13px/19px var(--font-mono); }
.t-mono-label { font: 400 13px/19px var(--font-mono); }
.t-mono-caption { font: 400 12px/14px var(--font-mono); }