/* ============================================================================
   윈윈프로 웹 — 디자인 토큰
   ----------------------------------------------------------------------------
   이 파일이 하는 일: 색·글자크기·간격·모서리 값을 여기 한 곳에만 둡니다.
   화면 파일에서 #333, 12px 같은 값을 직접 쓰지 말고 var(--...) 를 쓰세요.

   설치:  <link rel="stylesheet" href="/home/css/tokens.css">
         (reset.css 다음, 나머지 css 보다 먼저)

   기존 reset.css 의 --theme, --color0 같은 변수는 그대로 둡니다.
   충돌하지 않습니다 — 이 파일은 ws- 접두어 없이 새 이름만 씁니다.
   ============================================================================ */

:root{
  /* ---- 바탕 ---------------------------------------------------------- */
  --bg:#eef0ef;          /* 화면 가장 바깥 */
  --surface:#ffffff;     /* 카드·패널·표 */
  --surface-2:#f7f8f8;   /* 한 단계 눌린 면 */
  --surface-3:#eff1f1;   /* 표 머리·툴바 */

  /* ---- 선 ------------------------------------------------------------ */
  --line:#d7dcdb;        /* 기본 테두리 */
  --line-soft:#e8ebeb;   /* 표 안쪽 가로선 */
  --line-strong:#b9c1c0; /* 축·키캡 */

  /* ---- 글자 ---------------------------------------------------------- */
  --ink:#16201f;         /* 본문 */
  --ink-2:#4c5857;       /* 보조 */
  --ink-3:#7c8887;       /* 흐린 글자·라벨 */
  --ink-inv:#ffffff;     /* 진한 바탕 위 글자 */

  /* ---- 브랜드 (기존 --theme #08a1bc 계열을 명도 조정) ----------------- */
  --brand:#0e8ba3;
  --brand-deep:#0c6f83;  /* 주 버튼 바탕 */
  --brand-ink:#08505f;   /* 브랜드색 글자 */
  --brand-wash:#e3f1f4;  /* 선택된 행 */
  --brand-line:#9ad2de;

  /* ---- 의미 색 — 장식이 아니라 상태 신호로만 -------------------------- */
  --ok:#14713f;      --ok-wash:#e4f1ea;      --ok-line:#9ccfb4;
  --warn:#8d5304;    --warn-wash:#fbf0dd;    --warn-line:#e2bf85;
  --danger:#a32419;  --danger-wash:#fbe9e7;  --danger-line:#e3a49d;
  --info:#1f5f86;    --info-wash:#e5eef5;    --info-line:#9dc0d8;

  /* ---- 차트 2계열 (색맹 구분 ΔE 22, 명암비 3:1 이상 검증 통과) -------- */
  --chart-1:#0596b3;   /* 올해·주계열 */
  --chart-2:#b8792f;   /* 작년·비교계열 */
  --grid:#e4e8e7;

  /* ---- 글자 크기 — 6단계만 씁니다 ------------------------------------ */
  /* 보기 배율(--zoom)은 여기서만 곱합니다. body 글자크기는 건드리지 않습니다 */
  --fs-1:calc(11px * var(--zoom));   /* 배지·범례. 이보다 작게 쓰지 않습니다 */
  --fs-2:calc(13px * var(--zoom));   /* 보조 라벨·툴바 버튼 */
  --fs-3:calc(14px * var(--zoom));   /* 본문·표 기본 */
  --fs-4:calc(16px * var(--zoom));   /* 입력 필드·강조 숫자 */
  --fs-5:calc(19px * var(--zoom));   /* 화면 제목 */
  --fs-6:calc(24px * var(--zoom));   /* 금액 요약 */

  /* ---- 간격 ---------------------------------------------------------- */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px;

  /* ---- 모서리·그림자 -------------------------------------------------- */
  --r-1:3px; --r-2:5px; --r-3:8px;
  --shadow-1:0 1px 2px rgba(22,32,31,.07);
  --shadow-2:0 2px 4px rgba(22,32,31,.06), 0 12px 28px -14px rgba(22,32,31,.28);
  --focus:0 0 0 2px var(--surface), 0 0 0 4px var(--brand);

  /* ---- 글꼴 ---------------------------------------------------------- */
  --f-ui:'Pretendard','Noto Sans KR',system-ui,-apple-system,sans-serif;
  --f-num:'IBM Plex Mono',ui-monospace,'D2Coding',monospace;  /* 숫자·코드 */

  /* ---- 보기 배율 — 노안 대응. --fs-* 토큰에만 곱해집니다 ------------- */
  --zoom:1;
}

/* ============================================================================
   어두운 화면 — 나중에 켜기 위해 미리 넣어둡니다.
   지금 당장 필요 없으면 이 블록은 손대지 않아도 됩니다.
   ============================================================================ */
/* 자동 다크(prefers-color-scheme) 블록 제거 — 테마 기능 붙일 때 data-theme 로만 전환 */
:root[data-theme="dark"]{
  --bg:#101414; --surface:#1a2020; --surface-2:#212828; --surface-3:#283030;
  --line:#39423f; --line-soft:#2c3433; --line-strong:#4d5754;
  --ink:#e7ebea; --ink-2:#aab4b2; --ink-3:#7f8a88; --ink-inv:#0d1110;
  --brand:#3bb4cc; --brand-deep:#63c9dd; --brand-ink:#a6e0ea;
  --brand-wash:#15343b; --brand-line:#2d6572;
  --ok:#6ec294;     --ok-wash:#152c21;     --ok-line:#2f5d45;
  --warn:#dfae61;   --warn-wash:#322415;   --warn-line:#634924;
  --danger:#e8867b; --danger-wash:#331d1a; --danger-line:#6a3730;
  --info:#7fb3d4;   --info-wash:#17252e;   --info-line:#35586e;
  --grid:#2e3735;
  --shadow-1:0 1px 2px rgba(0,0,0,.4);
  --shadow-2:0 2px 4px rgba(0,0,0,.4), 0 12px 28px -14px rgba(0,0,0,.8);
}

/* ============================================================================
   보기 배율 3단 — 상단 "보통 / 크게 / 아주 크게" 버튼이 이 값만 바꿉니다.
   ui.js 의 WS.zoom(1.15) 로 설정. .ws-app 을 <body> 에 붙이지 마세요(아래 설명).
   ============================================================================ */
/* 2026-10-01 수정 — 전에는 여기서 .ws-app 의 font-size 를 14px 로 덮어썼습니다.
   .ws-app 을 <body> 에 붙이면 기존 화면 기준(16px)이 전부 14px 로 줄어 레이아웃이 깨집니다.
   이제 배율은 위 --fs-* 토큰에만 곱해지므로, ws- 컴포넌트만 커지고 기존 화면은 그대로입니다. */
/* .ws-app{ font-size:calc(var(--fs-3) * var(--zoom)); }  ← 삭제됨 */