/* ==========================================================================
   토큰 — 이 사이트의 모든 크기·색·간격은 여기서만 정합니다.

   화면마다 크기가 제각각이던 원인은 각 화면이 자기 마음대로 px 를 썼기
   때문입니다. 앞으로 CSS 에 날 px 를 쓰지 않고 아래 값만 씁니다.
   값을 하나 바꾸면 사이트 전체가 같이 움직입니다.
   ========================================================================== */

:root {
  /* ------------------------------------------------------------------ 색
     CI 가 흑백이라 화면의 바탕은 무채색으로 두고,
     파랑은 "누를 수 있는 것"에만 씁니다.                                 */
  --bg:        #f4f5f7;   /* 페이지 바탕 */
  --surface:   #ffffff;   /* 카드 · 표 · 사이드 */
  --surface-2: #f7f8fa;   /* 표 머리줄 · 옅은 블록 */
  --surface-3: #eef0f3;   /* 눌린 상태 */
  --border:    #dfe3e8;
  --border-2:  #ebedf0;   /* 표 안쪽 줄 */

  --text:      #1b1f24;   /* 본문 */
  --text-2:    #5c6670;   /* 보조 */
  --text-3:    #8b949e;   /* 메타 · 비활성 */

  --accent:    #1f5eff;
  --accent-bg: #eaf0ff;
  --accent-br: #c3d4ff;
  --focus:     #1f5eff;

  --danger:    #c02626;   --danger-bg: #fdeaea;
  --ok:        #0f7b46;   --ok-bg:     #e4f5ec;
  --warn:      #9a6400;   --warn-bg:   #fdf3e0;

  --tone-blue-fg:  #1d4ed8;  --tone-blue-bg:  #e7eeff;
  --tone-teal-fg:  #0f766e;  --tone-teal-bg:  #ddf4f1;
  --tone-slate-fg: #475569;  --tone-slate-bg: #eceff3;
  --tone-amber-fg: #92600b;  --tone-amber-bg: #fdf1dc;
  --tone-rose-fg:  #a8324a;  --tone-rose-bg:  #fdeaef;

  --shadow:    0 1px 2px rgba(16, 24, 40, .05);
  --shadow-h:  0 4px 12px rgba(16, 24, 40, .10);
  --shadow-xl: 0 12px 32px rgba(16, 24, 40, .16);

  /* ---------------------------------------------------------------- 글자
     다섯 단계만 씁니다. 그 사이 크기는 만들지 않습니다.                  */
  --fs-xs: 11px;   /* 배지 · 표 보조줄 · 메타 */
  --fs-sm: 12px;   /* 부가 설명 */
  --fs-md: 13px;   /* 본문 기본 — 표 셀 · 버튼 · 입력창 */
  --fs-lg: 15px;   /* 구역 제목 */
  --fs-xl: 19px;   /* 페이지 제목 */

  --lh-tight: 1.3;
  --lh-body:  1.5;

  --fw-normal: 400;
  --fw-mid:    550;
  --fw-bold:   680;

  --font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
          'Apple SD Gothic Neo', 'Malgun Gothic', 'Noto Sans KR', sans-serif;
  --font-num: var(--font);

  /* ---------------------------------------------------------------- 간격
     8단계. 이 밖의 값은 쓰지 않습니다.                                   */
  --sp-1:  2px;
  --sp-2:  4px;
  --sp-3:  6px;
  --sp-4:  8px;
  --sp-5: 12px;
  --sp-6: 16px;
  --sp-7: 24px;
  --sp-8: 32px;

  /* -------------------------------------------------------------- 모서리 */
  /* 창 너비 — 폼은 좁게, 표가 들어가면 넓게 */
  --modal-w:      640px;
  --modal-w-wide: 880px;

  --radius-s: 4px;
  --radius:   6px;
  --radius-l: 8px;
  --radius-pill: 999px;

  /* -------------------------------------------------------- 조작 요소 치수
     버튼 · 입력창 · 표 한 줄의 높이를 한 자리에서 정합니다.               */
  --ctl-h:     32px;   /* 버튼 · 입력창 · 셀렉트 기본 */
  --ctl-h-sm:  26px;   /* 표 안, 도구줄의 작은 버튼 */

  --z-thead:   10;     /* 표 머리줄 — 스크롤할 때 행 위에 떠 있어야 합니다 */

  /* 건수 알약 — 두 단계만 씁니다.
     같은 뜻인데 크기가 다르면 나란히 놓였을 때 어긋나 보입니다. */
  --pill-h:    20px;   /* 목록 건수 · 사이드바 · 구역 제목 */
  --pill-h-sm: 16px;   /* 종 위의 알림 점 — 아이콘에 겹치므로 작아야 합니다 */
  --ctl-px:    var(--sp-5);
  --ctl-px-sm: var(--sp-4);

  --row-h:  38px;      /* 표 한 줄 */
  --th-h:   34px;      /* 표 머리줄 */
  --row-px: var(--sp-5);

  --icon:    16px;     /* 아이콘 기본 */
  --icon-sm: 14px;

  /* ------------------------------------------------------------ 화면 골격 */
  --topbar-h:    52px;
  --sitetabs-h:  38px;
  /* 상단에 고정된 것 전체의 높이 — 상단바 + (롤플레이 띠) + (사이트 탭).
     app.js 가 실제로 재서 덮어씁니다. 아래는 그전까지 쓰는 값입니다. */
  --top-h:       52px;
  --side-w:      232px;
  --side-sub-w:  180px;  /* 하위 메뉴 칸 — 주 메뉴 오른쪽에 따로 섭니다 */
  --rail-w:      300px;
  --content-max: 1180px;   /* 본문은 어느 화면이든 이 폭 안에서 */
  --content-px:  var(--sp-7);
  --content-py:  var(--sp-6);

  --card-p:  var(--sp-6);
  --block-p: var(--sp-5);

  --z-topbar:  50;
  --z-panel:   60;
  --z-overlay: 80;
  --z-toast:   90;
}

/* 좁은 화면에서도 값만 바뀌고 규칙은 그대로입니다 */
@media (max-width: 1500px) {
  :root { --rail-w: 260px; --content-px: var(--sp-6); }
}
@media (max-width: 1100px) {
  :root { --content-px: var(--sp-5); }
}

/* 숫자는 어디서나 자릿수가 흔들리지 않게 */
.num, .table td, .stat__n, .countpill, .navitem__n, .row__amount, .task__amt {
  font-variant-numeric: tabular-nums;
}