/* ===================================================================
   Marketing OS — 디자인 토큰

   대표님이 주신 CleanPay 화면을 기준으로 다시 잡았다.
   네이비 상단 바 + 파랑 강조 + 밝은 회색 배경 + 흰 카드.
   이전 팔레트(페트롤 그린 + 골드)는 화면이 무겁고 강조가 약했다.

   명도 대비 (WCAG AA) — bg #F4F6FA 또는 surface #FFFFFF 기준 실측:
     ink      #172B4D   13.6:1  ✓ 본문·제목
     ink-2    #42526E    7.2:1  ✓ 본문
     mute     #6B7A90    4.6:1  ✓ 본문 (여유 없음 → 12px 미만 금지)
     primary  #1B62D4    5.6:1  ✓ 본문·링크·버튼 배경(흰 글자 5.6:1)
     danger   #C0392B    5.3:1  ✓
     ok       #1E7F4F    4.7:1  ✓
     warn     #B26A00    4.5:1  ✓ (경계선)

   navy(#152744)는 상단 바 배경 전용이다. 흰 글자와 15.1:1.
   =================================================================== */

:root {
  /* ── 색 ───────────────────────────────────────────────────────── */
  --navy:      #152744;   /* 상단 바 */
  --navy-2:    #1E3557;   /* 상단 바 위 활성 탭 */

  --ink:       #172B4D;   /* 제목·본문 */
  --ink-2:     #42526E;   /* 보조 본문 */
  --mute:      #6B7A90;   /* 라벨·설명 */

  --bg:        #F4F6FA;   /* 페이지 바탕 */
  --surface:   #FFFFFF;   /* 카드 */
  --surface-2: #F7F9FC;   /* 표 머리·줄무늬 */
  --surface-3: #EDF1F7;   /* 눌린 면 */

  --line:      #DCE3ED;   /* 테두리 */
  --line-2:    #EAEEF4;   /* 옅은 구분선 */

  --primary:   #1B62D4;   /* 강조 — 버튼·링크·활성 */
  --primary-d: #1550B3;   /* 눌렀을 때 */
  --primary-l: #E8F0FD;   /* 옅은 파랑 면 */

  --ok:        #1E7F4F;
  --warn:      #B26A00;
  --danger:    #C0392B;

  /* 옅은 배경판. 새 색이 아니라 같은 색의 농도다. */
  --ok-wash:     #E9F5EF;
  --warn-wash:   #FDF4E3;
  --danger-wash: #FCECEA;

  /* ── 간격 — 4px 배수 ──────────────────────────────────────────── */
  --s1:  4px;
  --s2:  8px;
  --s3:  12px;
  --s4:  16px;
  --s5:  20px;
  --s6:  24px;
  --s8:  32px;
  --s10: 40px;
  --s12: 48px;
  --s16: 64px;

  /* ── 타이포 ───────────────────────────────────────────────────── */
  /* Pretendard. 한글·라틴의 높이와 무게가 맞춰져 있어 표가 흔들리지 않는다.
     숫자는 tabular-nums 로 자릿수를 맞춘다 — mono 를 안 써도 표가 정렬된다. */
  --font-sans: Pretendard, -apple-system, BlinkMacSystemFont, "Segoe UI",
               "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, "Cascadia Mono",
               Consolas, "D2Coding", monospace;

  --fs-xs: 12px;
  --fs-sm: 13px;
  --fs-md: 14px;   /* 본문 기준. 대시보드는 16px 이면 정보가 덜 들어간다 */
  --fs-lg: 16px;
  --fs-xl: 18px;
  --fs-2x: 22px;
  --fs-3x: 26px;
  --fs-4x: 32px;

  --lh-body:  1.65;
  --lh-title: 1.35;

  /* ── 형태 ─────────────────────────────────────────────────────── */
  --radius:    6px;
  --radius-sm: 4px;
  --radius-lg: 10px;
  --border:      1px solid var(--line);
  --border-soft: 1px solid var(--line-2);
  --shadow-sm: 0 1px 2px rgba(23, 43, 77, 0.05);
  --shadow-md: 0 4px 16px rgba(23, 43, 77, 0.10);

  /* ── 레이아웃 ─────────────────────────────────────────────────── */
  --topbar-h:   64px;
  --rail-w:     64px;    /* 아이콘만 있는 좁은 레일 */
  --content-max: 1440px;
  --tabbar-h:   60px;

  --t-fast: 0.15s ease;
  --t-base: 0.25s ease;
}

/* ===================================================================
   폰트 — 로컬 번들 (§4.2: CDN 의존 금지, 오프라인에서도 동일 렌더)

   scripts/fetch_fonts.py 로 받는다. 파일이 없으면 위 폴백 스택으로
   자연스럽게 내려가므로 화면이 깨지지 않는다.

   Pretendard 는 서브셋을 쓰지 않는다. 828개로 쪼갠 동적 서브셋이
   있지만 가중치마다 @font-face 828개가 필요해 CSS 가 1.6MB 가 된다.
   전체 파일은 가중치당 약 760KB 이고, 내부 도구라 한 번 캐시되면 그만이다.
   =================================================================== */

@font-face {
  font-family: "Pretendard";
  src: url("../fonts/Pretendard-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Pretendard";
  src: url("../fonts/Pretendard-500.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Pretendard";
  src: url("../fonts/Pretendard-600.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Pretendard";
  src: url("../fonts/Pretendard-700.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}

/* Mono 는 한글 글립이 없다. 코드·경로처럼 진짜 고정폭이 필요한 곳에만 쓴다. */
@font-face {
  font-family: "IBM Plex Mono";
  src: url("../fonts/IBMPlexMono-400-latin.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("../fonts/IBMPlexMono-500-latin.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}