/* 20261023-alalshow-sf5-ui-kit — 디자인 값 (쇼츠팩토리 자체 디자인)
   20261026-alalshow-sf5-viewfinder-tone — 값을 뷰트랩 영상 분석기(viewfinder) 측정값으로 (research/viewfinder-tone/youtube-1440.json).
   모든 화면 CSS는 색·간격·글자 크기·둥글기를 여기 값(var(--…))으로 쓴다. 이 파일은 components.css·app.css보다 먼저 읽는다.
   - 색조 5가지: info · good · warn · danger · muted × bg(배경) · ink(글자) · line(테두리). 화면에는 data-tone="…" 하나로.
   - 간격 6단계(--space-1~6) · 글자 6단계(--text-xs~2xl = 12·13·14·16·18·20) · 둥글기(입력 5 · 버튼 6 · 칸 8).
   - 화면 폭 기준 2개: 640px(휴대폰, --bp-sm) · 1024px(태블릿, --bp-lg). CSS 변수는 @media 안에서 못 쓰므로
     @media (max-width: 640px) · @media (max-width: 1023.98px) 두 가지 글자만 쓴다 (값은 아래 주석과 같게).
   - 누름 칸 최소 44px (--tap) — 휴대폰에서 버튼·링크·입력칸 높이. 데스크톱 버튼은 35px (--btn-h). */

/* 자체 글꼴 Noto Sans KR (SIL OFL 1.1 — static/fonts/NotoSansKR-OFL.txt). 한국어 2,350자 + 영숫자 부분 글꼴, 외부 주소 없음 */
@font-face { font-family: "Noto Sans KR"; font-style: normal; font-weight: 400; font-display: swap; src: url("/static/fonts/NotoSansKR-400.woff2") format("woff2"); }
@font-face { font-family: "Noto Sans KR"; font-style: normal; font-weight: 500; font-display: swap; src: url("/static/fonts/NotoSansKR-500.woff2") format("woff2"); }
@font-face { font-family: "Noto Sans KR"; font-style: normal; font-weight: 700; font-display: swap; src: url("/static/fonts/NotoSansKR-700.woff2") format("woff2"); }

:root {
  /* 글꼴 */
  --font-body: "Noto Sans KR", -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;

  /* 바탕 (app.css :root 의 --bg·--surface·--ink·--muted·--line·--accent 와 같은 값) */
  --paper: #ffffff;
  --paper-2: #fafafa;
  --paper-3: #fcfcfc;
  --ground: #f8f8f8;
  --text: #404040;
  /* 흐린 글자: 설명은 #6B6B6B(흰 바탕 대비 5.3:1), 분석기 #929292는 작은 주석(--text-faint)에만 */
  --text-muted: #6b6b6b;
  --text-faint: #929292;
  --rule: #ededed;
  /* 입력칸 선: 흰 칸 위에서도 보이게 --rule보다 한 단계 진하게 (초점이면 --brand) */
  --input-line: #dcdcdc;
  --brand: #2375e8;
  --brand-ink: #1d4ed8;
  --brand-bg: #eff6ff;
  --brand-bg-soft: #f5f9ff;
  --brand-line: #bfdbfe;
  /* 어두운 바탕(안내 창·갤러리 덮개) 위 강조 글자 */
  --brand-on-dark: #9cc3ff;
  --table-head: #efefef;

  /* 색조 5가지 × 배경·글자·테두리 (info = 분석기 알림 칸, 글자색은 분석기 등급 색 Great·Bad·Worst) */
  --info-bg: #eff6ff;
  --info-ink: #1e40af;
  --info-line: #bfdbfe;
  --good-bg: #eefaf0;
  --good-ink: #007f0f;
  --good-line: #bfe6c5;
  --warn-bg: #fef5ec;
  --warn-ink: #a85700;
  --warn-line: #f7d3ae;
  --danger-bg: #fdeeee;
  --danger-ink: #d61f1f;
  --danger-line: #f5c2c2;
  --muted-bg: #f3f3f3;
  --muted-ink: #6b6b6b;
  --muted-line: #e2e2e2;
  /* 분석기 등급 원래 색 (Great #009711 · Bad #E97D13 · Worst #FF1111 · Normal #929292) — 흰 바탕 글자 대비 4.5:1이 안 되므로
     점·테두리·아이콘 같은 꾸밈에만. 글자는 위 *-ink (같은 계열을 진하게, 4.5:1 이상) */
  --good-dot: #009711;
  --warn-dot: #e97d13;
  --danger-dot: #ff1111;
  --muted-dot: #929292;

  /* 간격 6단계 */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;

  /* 글자 크기 6단계 (분석기: 본문 14 · 위쪽 메뉴 16 · 로고 18 · 화면 제목 20) */
  --text-xs: 12px;
  --text-sm: 13px;
  --text-md: 14px;
  --text-lg: 16px;
  --text-xl: 18px;
  --text-2xl: 20px;

  /* 둥글기: 입력칸 5 · 칸(카드·알림·대화창) 8 · 버튼·꼬리표 6 (알약 999px는 쓰지 않는다 — 동그라미만 50%) */
  --radius-sm: 5px;
  --radius-md: 8px;
  --radius-lg: 6px;
  --radius-btn: 6px;

  /* 버튼·그림자 (분석기 작업 줄: 35px · 안쪽 7px 12px · 그림자 0 1px 8px) */
  --btn-h: 35px;
  --shadow-1: 0 1px 8px rgba(0, 0, 0, 0.043);
  --shadow-2: 0 8px 24px rgba(0, 0, 0, 0.12);

  /* 화면 폭 기준 2개 (문서용 — @media에는 같은 숫자를 글자로) */
  --bp-sm: 640px;
  --bp-lg: 1024px;

  /* 누름 칸 · 위쪽 바 · 위쪽 메뉴 첫 항목 x · 작업 줄 y (분석기 1440 측정값) */
  --tap: 44px;
  --topbar-h: 60px;
  --topnav-x: 146px;
  --taskrow-y: 90px;

  /* 겹치는 순서 */
  --z-topnav: 20;
  --z-topbar: 30;
  --z-backdrop: 40;
  --z-drawer: 45;
  --z-panel: 50;
}