/* public/css/tokens.css — 색·글자·치수 토큰과 루트 글자 크기(크기 체계). 화면 CSS는 이 토큰과 rem만 쓴다(어드민 제외).
   1rem = 기준 캔버스의 10px. 보통 비율(가로:세로 < 1.9)은 1920×1080, 가로로 긴 비율(≥ 1.9, TV 월 결과 창 ≈ 2.27:1)은
   1860×816 캔버스에 맞춰 루트 글자 크기를 바꾼다 → 같은 배치가 화면 크기만큼 커지고 작아진다(스펙 7장). */

:root {
  /* 색 — 스펙 8장 */
  --bg: #f4f7fb;
  --surface: #ffffff;
  --line: #d9e2ec;
  --ink: #0a1f3c;
  --text: #1f3550;
  --text-2: #4a5f78;
  --muted: #66788e;
  --blue: #0b63f3;
  --blue-strong: #004dcc;
  --blue-soft: #e8f1ff;
  --navy: #071b33;
  --navy-2: #0b2748;
  --hub: #ff7a1a;
  --up: #098b68;
  --down: #c94141;
  --method-s: #0b63f3;
  --method-f: #0b9d7a;
  --method-d: #e1650a; /* 스펙 #f57a1f를 같은 색상(주황)으로 어둡게 — 흰 글자 대비 2.7:1 → 3.5:1(R38) */
  --method-e: #7257d8;

  /* 색 — 위 색에서 고른 보조 톤 */
  --line-strong: #c4d1df; /* 누르는 컨트롤(분할 버튼·도구 버튼)의 1px 테두리 */
  --on-fill: #ffffff; /* 채운 바탕(파랑·남색 무대·방식 색) 위의 흰 글자·선·점 — 면 색(--surface)과 뜻이 다르다 */
  --warn: #a8500d; /* "업데이트 지연" 글자(흰 바탕 대비 5:1 이상). 점은 --hub */
  --warn-soft: #fff4ea;
  --warn-line: #f5c7a1;

  /* 색 — 남색 무대(금융기관 Main 히어로·세계 지도) 위 */
  --sky: #6aaeff; /* 하늘색: 국내(파랑)와 나란히 놓는 글로벌 몫, 남색 위 강조 글자(7:1 이상). 지도 진하기의 가장 진한 칸과 같은 색 */
  --navy-text: #a9bfd8; /* 남색 위 보조 글자·윤곽 버튼 테두리(9:1) */
  --navy-line: #2b4a6b; /* 남색 위 1px 구분선 */

  /* 글꼴 */
  --font: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Malgun Gothic', 'Noto Sans KR', system-ui, sans-serif;

  /* 글자 크기(기준 캔버스 px = rem × 10) — Global Constraints의 단계. 화면 CSS의 font-size는 모두 이 토큰만 쓴다(rem 숫자를 직접 쓰지 않는다) */
  --fs-hero: 11rem;
  --fs-kpi: 6.4rem;
  --fs-title: 4.8rem;
  --fs-section: 2.6rem;
  --fs-tab: 2.1rem; /* 승인된 추가 단계(R19): 헤더 업무 탭 전용 — 메뉴보다 한 단계 위 */
  --fs-menu: 1.9rem;
  --fs-body: 1.7rem;
  --fs-table: 1.6rem;
  --fs-small: 1.4rem;
  --fs-eyebrow: 1.3rem;
  --fs-control: var(--fs-table); /* 별칭(새 단계 아님): 버튼·분할 버튼 글자 = 표 단계 */

  /* 치수 */
  --header-h: 8.6rem;
  --sidebar-w: 27rem;
  --pad-y: 3.6rem; /* 본문 위아래 여백 */
  --pad-x: 4.4rem; /* 본문 좌우 여백 */
  --side-pad: 1.6rem; /* 사이드바 좌우 안쪽 여백 */
  --item-pad: 1.4rem; /* 메뉴 줄 좌우 안쪽 여백 */
  --heading-gap: 2.8rem; /* 제목 줄과 본문 사이 */
  --tap: 4.4rem; /* 누르는 대상의 최소 높이 */
  --table-row: 5.6rem; /* 데이터 표의 행 높이 — js/app/components/table.js TABLE_ROW_REM과 같은 값(쪽 크기 계산) */
  --table-head: 4.8rem; /* 데이터 표의 머리글 높이 — TABLE_HEAD_REM과 같은 값 */
  --radius-sm: 0.8rem;
  --radius: 1rem;
  --radius-lg: 1.2rem;

  /* 움직임 */
  --enter: 0.25s;
}

html {
  font-size: min(calc(100vw / 192), calc(100vh / 108));
}

@media (min-aspect-ratio: 19/10) {
  html {
    font-size: min(calc(100vw / 186), calc(100vh / 81.6));
  }

  :root {
    --sidebar-w: 24rem;
    --pad-y: 2.6rem;
    --pad-x: 3.2rem;
    --side-pad: 1.2rem;
    --item-pad: 1.2rem;
    --heading-gap: 2.2rem; /* 세로가 짧은 캔버스(81.6rem)라 본문에 높이를 더 준다 */
  }
}