/* =====================================================================
SY ON AIR — Design tokens v3 · 2026-11-03 "Control room"
---------------------------------------------------------------------
방향: Refero "Linear" (midnight precision instrument) + "Raycast"
(midnight command center, coral neon). 다크 단일 테마, 세리프 없음,
글자 굵기 600 이하, 강조색은 ON AIR 탈리 램프의 coral 하나.
공개 랜딩과 내부 작업 화면이 함께 씁니다.
- 이 파일은 "값"만. 컴포넌트는 style.css(공개) / workspace.css(내부).
- 컴포넌트에서는 역할 토큰(--surface-2, --text-muted …)만 쓰고
--palette-* 를 직접 쓰지 않습니다.
- coral(--accent)은 그래픽 전용: 탈리 램프, ON AIR 간판과 빛, 파형과 미터,
앱 화면의 "선택된 행". 버튼·링크 색으로 쓰지 않습니다. 다른 색의 빛은 쓰지 않습니다.
- 주 버튼은 무채색 Mist(밝은 회색 면 + 어두운 글자), 보조는 hairline ghost.
- 깊이는 그림자보다 "면 단계 + 1px hairline"으로 만듭니다.
폰트(각 HTML , 한 줄. 오프라인이면 아래 시스템 폰트로 대체):
Breakpoints (@media 안에서는 숫자 그대로; 모바일 우선 min-width)
480px 큰 휴대폰 768px 태블릿(2단 시작)
1024px 데스크톱 내비·앱 사이드바 1280px 넓은 데스크톱(앱 상세 패널)
===================================================================== */
:root {
color-scheme: dark;
/* ---------- 1. Raw palette ---------- */
--palette-void: #08090a; /* 캔버스 */
--palette-carbon: #0f1011; /* 카드·내비·앱 창 */
--palette-obsidian: #161718; /* 올라온 패널·입력 우물 */
--palette-graphite: #1c1d1f; /* 3단 면·hover 면 */
--palette-slate: #23252a; /* hairline */
--palette-smoke: #383b3f; /* 강한 hairline */
--palette-mist: #e6e6e6; /* 주 버튼 면 */
--palette-iron: #454647;
--palette-coral: #ff6363; /* 탈리 램프 — 유일한 색 */
--palette-coral-soft: #ff8a8a;
/* ---------- 2. Surfaces (4단계, 아래→위) ---------- */
--bg: var(--palette-void); /* 0 페이지 */
--surface-1: var(--palette-carbon); /* 1 카드, 앱 창, 내비 */
--surface-2: var(--palette-obsidian); /* 2 패널, 입력 우물, 툴바 */
--surface-3: var(--palette-graphite); /* 3 팝오버, 선택 칩, 강조 면 */
--surface-glass: rgba(15,16,17,.72); /* 유리 내비(backdrop-filter와 함께) */
--surface-tint: rgba(255,255,255,.03); /* 아주 옅은 면 구분 */
/* ---------- 3. Hairlines (2단계) ---------- */
--line: var(--palette-slate); /* 기본 1px 구분선 */
--line-strong: var(--palette-smoke); /* 입력 테두리, 강조 구분선 */
--line-alpha: rgba(255,255,255,.08); /* 반투명 면 위 hairline */
/* ---------- 4. Text (4단계, 대비는 --surface-1 #0f1011 기준) ---------- */
--text: #ffffff; /* 제목 19.6:1 */
--text-2: #d0d6e0; /* 본문·내비 13.0:1 */
--text-muted: #8a8f98; /* 보조·메타 5.9:1 */
--text-faint: #62666d; /* 장식·비활성 전용 3.3:1 — 정보 전달 금지 */
--text-on-light: var(--palette-void); /* Mist 버튼 위 글자 16:1 */
/* ---------- 5. Accent (coral = ON AIR 램프) ---------- */
--accent: var(--palette-coral); /* 램프·빛·선택 막대 */
--accent-text: #ff7a7a; /* coral 글자 필요 시 7.5:1 */
--accent-glow: rgba(255,99,99,.45);
--accent-wash: rgba(255,99,99,.10); /* 선택 행 배경(불투명 환산 #271819) */
/* ---------- 6. Status badges (다크, 글자 대비 7:1 이상) ----------
항상 글자와 함께. 배경은 해당 색 12%를 carbon 위에 얹은 값. */
--badge-neutral-bg: rgba(255,255,255,.05); --badge-neutral-fg: #a3a8b0; --badge-neutral-border: rgba(255,255,255,.08);
--badge-unverified-bg: rgba(245,185,74,.12); --badge-unverified-fg: #f5c46b; --badge-unverified-border: rgba(245,185,74,.28); /* 미확인 9.5:1 */
--badge-estimated-bg: rgba(123,147,255,.12); --badge-estimated-fg: #a3b4ff; --badge-estimated-border: rgba(123,147,255,.28); /* 추정 8.1:1 */
--badge-verified-bg: rgba(76,195,138,.12); --badge-verified-fg: #7fd8a6; --badge-verified-border: rgba(76,195,138,.28); /* 확인됨 9.3:1 */
--badge-blocked-bg: rgba(255,99,99,.12); --badge-blocked-fg: #ff8a8a; --badge-blocked-border: rgba(255,99,99,.30); /* 공개 금지 7.3:1 */
--badge-pending-bg: transparent; --badge-pending-fg: #a3a8b0; --badge-pending-border: #383b3f; /* 대기(점선) 7:1 */
/* 주의: 공개금지 배지는 coral 계열이지만 "선택 행"과 혼동되지 않게 반드시 글자 배지로만. */
/* ---------- 7. Dense data UI ---------- */
--table-row-h: 40px;
--table-row-h-compact: 32px;
--table-head-h: 32px;
--table-cell-px: 12px;
--table-head-fg: var(--text-muted);
--table-head-bg: transparent;
--table-border: var(--line);
--table-zebra: rgba(255,255,255,.015);
--table-row-hover: rgba(255,255,255,.03);
--table-row-selected: var(--accent-wash); /* + 왼쪽 2px 막대 */
--table-row-selected-bar: var(--accent);
--table-row-selected-bar-w: 2px;
--input-h: 36px;
--input-h-sm: 28px;
--input-bg: rgba(255,255,255,.02);
--input-border: rgba(255,255,255,.08);
--input-border-hover: rgba(255,255,255,.16);
--input-border-focus: var(--text-2);
--input-placeholder: var(--text-muted);
--kbd-bg: var(--surface-3);
--kbd-border: var(--line-strong);
/* ---------- 8. Typography ---------- */
--font-sans: "Inter", "Noto Sans KR", "Pretendard Variable", "Pretendard", "Apple SD Gothic Neo", "Malgun Gothic", system-ui, -apple-system, "Segoe UI", sans-serif;
--font-mono: "JetBrains Mono", "Berkeley Mono", ui-monospace, "SF Mono", Menlo, Consolas, "Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", monospace; /* 한글은 고딕으로 떨어지게 */
--font-features: "cv01", "ss03"; /* Inter 대체 글리프(지원 안 되면 무시) */
/* 세리프 금지. 굵기 600 초과 금지. */
--fs-display: clamp(2.5rem, 1.55rem + 4vw, 4.5rem); /* 40 → 72 h1 */
--fs-h2: clamp(1.875rem, 1.35rem + 2.2vw, 3rem); /* 30 → 48 섹션 제목 */
--fs-h3: clamp(1.25rem, 1.1rem + .6vw, 1.5rem); /* 20 → 24 블록 제목 */
--fs-title: 1.0625rem; /* 17 카드 제목 */
--fs-lead: clamp(1.0625rem, 1rem + .3vw, 1.25rem); /* 17 → 20 */
--fs-body: 1rem; /* 16 */
--fs-sm: .9375rem; /* 15 */
--fs-ui: .875rem; /* 14 버튼·내비·표 */
--fs-caption: .8125rem; /* 13 */
--fs-label: .75rem; /* 12 배지·라벨 */
--fs-micro: .6875rem; /* 11 모노 메타(대문자 영문·숫자 전용) */
--fw-regular: 400;
--fw-medium: 510; /* Inter 가변 굵기. Noto Sans KR은 500으로 근사 */
--fw-semibold:590;
--lh-display: 1.08; /* 한글 때문에 Linear의 1.0보다 약간 넉넉하게 */
--lh-heading: 1.18;
--lh-body: 1.6;
--lh-ui: 1.4;
--tracking-display: -0.03em; /* 48–72px (한글 포함이라 -0.022보다 조금 더) */
--tracking-heading: -0.016em; /* 20–32px */
--tracking-body: -0.008em;
--tracking-mono: 0.06em; /* 모노 대문자 라벨 */
--measure: 36em;
/* ---------- 9. Spacing (4px 기반) ---------- */
--sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px;
--sp-6: 24px; --sp-7: 32px; --sp-8: 40px; --sp-9: 48px; --sp-10: 64px;
--sp-11: 80px; --sp-12: 96px; --sp-13: 128px;
--space-section: clamp(72px, 3rem + 5vw, 128px); /* 섹션 리듬(데스크톱 ~96–128) */
--card-pad: 24px;
/* ---------- 10. Layout ---------- */
--container-max: 1200px;
--gutter-page: clamp(16px, 4vw, 32px);
--grid-gap: clamp(16px, 2vw, 24px);
--nav-h: 56px;
--nav-top: 12px; /* 떠 있는 유리 내비의 위 여백 */
--sidebar-w: 232px; /* 앱 좌측 패널 */
--inspector-w: 300px; /* 앱 우측 상세 패널(1280 이상) */
/* ---------- 11. Radius ---------- */
--r-2: 2px; /* 체크박스 */
--r-4: 4px; /* 배지 */
--r-6: 6px; /* 버튼·입력·칩 */
--r-8: 8px; /* 목록 행, 유리 내비 */
--r-12: 12px; /* 카드, 앱 창 */
--r-16: 16px; /* 기능 카드, 커맨드 팔레트 */
--r-pill: 9999px;
/* ---------- 12. Elevation (그림자는 최소) ---------- */
--shadow-subtle: inset 0 0 0 1px var(--palette-slate);
--shadow-key: inset 0 1px 0 rgba(255,255,255,.05), 0 0 0 1px rgba(255,255,255,.10), inset 0 -1px 0 rgba(0,0,0,.2); /* 키보드 키 카드 */
--shadow-key-hover: inset 0 1px 0 rgba(255,255,255,.07), 0 0 0 1px rgba(255,255,255,.22), inset 0 -1px 0 rgba(0,0,0,.2);
--shadow-xl: 0 4px 32px rgba(8,9,10,.6);
--shadow-window: 0 0 0 1px rgba(255,255,255,.06), 0 24px 80px -12px rgba(0,0,0,.7);
/* ---------- 13. Focus ---------- */
--focus-color: var(--text-2); /* #d0d6e0, 캔버스 대비 13:1 */
--focus-width: 2px;
--focus-offset: 2px;
/* ---------- 14. Motion ---------- */
--ease-out: cubic-bezier(.2,.7,.2,1);
--dur-1: 120ms; /* hover */
--dur-2: 200ms; /* 열림/닫힘 */
--dur-3: 400ms;
--tally-pulse: 2.8s;
/* ---------- 15. Z-index ---------- */
--z-base: 1; --z-nav: 50; --z-menu: 60; --z-toast: 80; --z-skip: 100;
}
@media (prefers-reduced-motion: reduce) {
:root { --dur-1: 0ms; --dur-2: 0ms; --dur-3: 0ms; }
}