/* ==========================================================================
   ui-tokens.css — 화면디자인개선 v1 §4 디자인 토큰 원본(SSOT)
   --------------------------------------------------------------------------
   실앱(public/static)과 HTML Storybook(storybook-html)이 **이 파일 하나**를 공유한다.
   같은 값의 CSS를 두 곳에 복사해 두지 않는다.

   접두어는 `--nb-*`. 기존 storybook의 `--color-*` 토큰과 이름이 겹치지 않으므로
   충돌 없이 공존하고, storybook 쪽 매핑 레이어가 `--color-*` → `--nb-*` 를 참조한다.
   ========================================================================== */

:root {
  /* ---- 색 (§4.1) ---- */
  --nb-bg: #f6f7fb;
  --nb-surface: #ffffff;
  --nb-text: #172033;
  --nb-muted: #526079;
  --nb-border: #dce2ec;          /* 카드·구획선 */
  --nb-control-border: #7b879a;  /* 입력 경계 — 배경과 3:1 이상 구분 */
  --nb-primary: #4338ca;
  --nb-primary-hover: #3730a3;
  --nb-primary-soft: #eef2ff;
  --nb-success: #166534;
  --nb-warning: #92400e;
  --nb-danger: #b91c1c;

  /* ---- 모서리 (§4.1) ---- */
  --nb-radius-control: 8px;
  --nb-radius-card: 12px;
  --nb-radius-dialog: 16px;

  /* ---- 레이아웃 ---- */
  --nb-container: 1280px;
  --nb-header-h: 64px;           /* 데스크톱 헤더 (§4.3) */
  --nb-header-h-sm: 56px;        /* 모바일 헤더 */
  --nb-gutter: 32px;             /* 1024px 이상 바깥 여백 */

  /* ---- 여백 단계 4/8/12/16/24/32/48 (§4.2) ---- */
  --nb-space-1: 4px;
  --nb-space-2: 8px;
  --nb-space-3: 12px;
  --nb-space-4: 16px;
  --nb-space-5: 24px;
  --nb-space-6: 32px;
  --nb-space-7: 48px;

  /* ---- 타이포 (§4.2) ---- */
  --nb-font: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI',
             'Noto Sans KR', 'Noto Sans CJK KR', sans-serif;
  --nb-fs-page: 32px;      --nb-lh-page: 40px;
  --nb-fs-page-sm: 24px;   --nb-lh-page-sm: 32px;
  --nb-fs-section: 24px;   --nb-lh-section: 32px;
  --nb-fs-section-sm: 20px;--nb-lh-section-sm: 28px;
  --nb-fs-card: 18px;      --nb-lh-card: 26px;
  --nb-fs-body: 16px;      --nb-lh-body: 26px;
  --nb-fs-help: 14px;      --nb-lh-help: 22px;
  --nb-fs-meta: 12px;      --nb-lh-meta: 18px;

  /* ---- 클릭 면적 (§4.2 — 아이콘 버튼도 동일) ---- */
  --nb-tap: 44px;

  /* ---- 그림자 — 펼침 메뉴·모달 중심, 카드 기본은 테두리 ---- */
  --nb-shadow-menu: 0 4px 16px -4px rgba(16, 24, 40, .18), 0 2px 6px rgba(16, 24, 40, .08);
  --nb-shadow-dialog: 0 24px 48px -12px rgba(16, 24, 40, .28);
  --nb-shadow-card-hover: 0 2px 8px -2px rgba(16, 24, 40, .12);

  /* ---- 전환 (§4.2 — 120~180ms) ---- */
  --nb-transition: 150ms ease;

  /* ---- z 레이어 (§12 T1 — 의미를 문서화한다) ----
     0   페이지 본문
     20  sticky 헤더·폼 저장 바
     40  펼침 메뉴(계정·언어·알림·클래스 바로가기)
     80  작품 상세 모달·QR 라이트박스
     100 상세 위에 겹치는 확인창(이동/복사)
     120 토스트 */
  --nb-z-sticky: 20;
  --nb-z-menu: 40;
  --nb-z-dialog: 80;
  --nb-z-dialog-top: 100;
  --nb-z-toast: 120;
}