/* =============================================================================
   tokens.css — 디자인 토큰 (justhink 실사용 값을 추출·정리한 표준, 2026-10-03)

   규칙 3가지
   1) 컴포넌트는 이 파일의 변수만 읽는다. 색·글자 크기·컨트롤 높이 리터럴 금지.
   2) 글자 크기는 '역할 토큰'(--fs-body, --fs-table …)을 쓴다. 눈금(--fs-sm …)을 직접 쓰지 않는다.
   3) 모바일은 아래 @media 블록에서 '역할 토큰'만 바꾼다. 개별 규칙의 미디어쿼리에 크기를 다시 쓰지 않는다.
      (justhink 에서 브레이크포인트마다 같은 크기를 또 적어 한쪽만 고쳐지는 사고가 반복됐다)

   테마: <html data-theme="dark"> 로 전환. 첫 페인트 깜빡임 방지 스크립트는 docs/guide/02-design-tokens.md
   ============================================================================= */

:root{
  /* ── 화면 크기(EGS 2026-10-05 오너: '크롬 110% 로 볼 때가 딱 좋다' → 100% 에서 그 크기) ──────────────
     html 글자 크기 = 모든 rem 의 기준. 길이(글자·높이·여백·반경)는 전부 rem 이라 이 값 하나가 화면 전체를 키운다.
     아래 주석의 'NNpx' 는 100% 기준 값(화면에서는 ×1.1). 휴대폰(≤640)은 100% — 좁은 화면에서 키우면 넘친다.
     ⚠️ 새 CSS 도 3px 이상 길이는 rem 으로(÷16). 1·2px 선만 px. 미디어쿼리 폭은 px(640 위는 ×1.1 값 — 860→946, 1100→1210). */
  --root-fs:110%;

  /* ── 글꼴 ─────────────────────────────────────────────────────────────── */
  --font-sans:'Pretendard Variable','Pretendard','Inter',-apple-system,BlinkMacSystemFont,
              'Apple SD Gothic Neo','Segoe UI','Malgun Gothic',sans-serif;
  --font-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  /* ── 글자 크기 ① 눈금 9단계 (html 16px 기준, 사용자 브라우저 글자 설정을 존중하려고 rem) ── */
  --fs-2xs:.6875rem;   /* 11px  배지·태그 */
  --fs-xs:.75rem;      /* 12px  캡션·각주·보조 설명 */
  --fs-sm:.8125rem;    /* 13px  라벨·작은 버튼 */
  --fs-md:.875rem;     /* 14px  표·탭·내비·버튼 */
  --fs-base:.9375rem;  /* 15px  본문 */
  --fs-lg:1.0625rem;   /* 17px  카드·섹션 제목 */
  --fs-xl:1.25rem;     /* 20px  보조 지표 숫자 */
  --fs-2xl:1.5rem;     /* 24px  페이지 제목·KPI 숫자 */
  --fs-3xl:2rem;       /* 32px  히어로 숫자 */

  /* ── 글자 크기 ② 역할 토큰 — 컴포넌트는 이것만 쓴다 ─────────────────── */
  --fs-body:var(--fs-base);
  --fs-hint:var(--fs-xs);          /* 각주·도움말·빈 상태 안내 */
  --fs-badge:var(--fs-2xs);        /* 상태 칩·태그 */
  --fs-label:var(--fs-sm);         /* 폼 라벨·KPI 라벨·컨트롤 위 라벨 */
  --fs-table:var(--fs-md);         /* 표 본문·머리행 공통(머리행은 굵기·색으로 구분) */
  --fs-tab:var(--fs-md);
  --fs-nav:var(--fs-md);
  --fs-btn:var(--fs-md);           /* .btn      (40px 단) */
  --fs-btn-sm:var(--fs-sm);        /* .btn.sm   (34px 단) */
  --fs-btn-xs:var(--fs-xs);        /* .btn.xs   (30px 단) */
  --fs-input:var(--fs-base);       /* 모바일은 16px로 올린다(iOS 포커스 확대 방지) */
  --fs-title:var(--fs-lg);         /* 카드·섹션·모달 제목 */
  --fs-page-title:var(--fs-2xl);   /* h1 */
  --fs-metric:var(--fs-xl);
  --fs-kpi:var(--fs-2xl);
  --fs-hero:var(--fs-3xl);

  /* ── 줄 간격·굵기·자간 ─────────────────────────────────────────────────── */
  --lh-none:1;          /* 아이콘·컨트롤 안 한 줄 */
  --lh-num:1.05;        /* 큰 숫자 */
  --lh-tight:1.2;       /* 작은 회색 캡션 */
  --lh-snug:1.35;       /* 촘촘한 목록·카드 부제 */
  --lh-base:1.55;       /* 본문 */
  --lh-prose:1.7;       /* 긴 설명문 */

  --fw-regular:400;
  --fw-medium:500;      /* 버튼·탭·내비 */
  --fw-semibold:600;    /* 표 머리행·제목·강조 */
  --fw-bold:700;        /* 숫자(KPI·히어로)·브랜드 */

  --ls-title:-.02em;    /* h1·브랜드 */
  --ls-num:-.015em;     /* 24px 이상 숫자 */
  --ls-hero:-.025em;    /* 32px 히어로 */

  /* ── 색 (라이트) ───────────────────────────────────────────────────────── */
  --bg:#f5f5f7;
  --surface:#fff;
  --surface2:#fbfbfd;        /* 행 hover·약한 면 */
  --text:#1d1d1f;
  --text-sub:#6e6e73;
  --line:#e3e3e6;
  --line2:#ededf0;
  --th-bg:#eff0f4;           /* 표 머리행 전용 — 공용 --surface2 를 어둡게 하지 말고 새 역할 변수로 */
  --tbl-edge:#c8c9d0;        /* 표 바깥선 전용 */
  --accent:#0071e3;
  --accent-soft:#e8f1fe;
  --green:#34c759;
  --yellow:#ff9f0a;          /* 주의 = 노랑. 금융 화면에선 빨강이 '상승'이라 경고에 빨강을 쓰지 않는다 */
  --red:#ff3b30;
  --nav-bg:rgba(255,255,255,.8);
  --nav-bg-solid:#fdfdfd;    /* 반투명 내비를 미리 합성한 색 — 스크롤 중 깜빡임 방지(반드시 정의) */
  --frzbg:var(--surface);    /* 틀 고정 셀 배경(불투명) */

  /* 상승/하락 색 — 기본은 서양식, body.kr-pnl 에서 한국식(상승 빨강·하락 파랑) */
  --pnl-up:#1a7f37;
  --pnl-down:var(--red);

  /* ── 모양 ──────────────────────────────────────────────────────────────── */
  --radius:.75rem;             /* 카드 */
  --radius-sm:.5rem;           /* 버튼·입력칸 */
  --radius-modal:.875rem;
  --radius-pill:999px;
  --shadow:0 1px .1875rem rgba(0,0,0,.06),0 .5rem 1.5rem rgba(0,0,0,.04);
  --shadow-sm:0 1px 2px rgba(0,0,0,.06);

  /* ── 컨트롤 높이 3단 (PC·모바일 동일 — @media 에서 재정의 금지) ───────── */
  --ctl-h-sm:1.875rem;           /* 표 안 버튼·칩·작은 세그먼트·모달 '닫기'·아이콘 버튼 */
  --ctl-h:2.125rem;              /* 기본: 툴바·카드 머리 버튼·세그먼트 토글·좁은 입력칸 */
  --ctl-h-lg:2.5rem;           /* 폼: 모든 입력칸·주 버튼·드롭다운 메뉴 행 */
  --hit-min:2.75rem;            /* 터치 히트영역(보이는 크기가 아니라 ::after 로) */

  /* ── 레이아웃 ──────────────────────────────────────────────────────────── */
  --page-max:97.5rem;
  --page-pad:1.5rem;
  --card-px:1.25rem;
  --card-py:1.125rem;
  --gap:1.125rem;                /* 카드 사이 */
  --gap-sm:.875rem;             /* KPI 사이 */
  --nav-h:3.25rem;

  /* ── 안전 영역(노치·홈 인디케이터) — env() 는 여기 한 곳에서만 ─────────── */
  --sat:env(safe-area-inset-top,0px);
  --sab:env(safe-area-inset-bottom,0px);
  --mask-pad:.75rem;

  /* ── 겹침 순서 (DOM 순서에 기대지 않는다) ─────────────────────────────── */
  --z-sticky-cell:2;
  --z-sticky-head:4;
  --z-toolbar:20;
  --z-subbar:40;
  --z-toast:45;
  --z-nav:50;
  --z-menu:1000;
  --z-modal:1100;
  --z-modal-child:1200;      /* 모달 위 모달 */
  --z-dialog:9800;           /* 확인 대화상자는 늘 맨 위 */

  /* ── EGS 공용 역할(업무포털·실적관리 두 앱 — 2026-10-05 표준화). 흑백 위주(Autoway 참고): 주 단추 검정 ── */
  --ink:#1d1d1f;              /* 주 단추(검정) — 전자결재 테마(body.ea-theme-*)가 바꾼다 */
  --ink-hover:#3a3a3c;
  --on-ink:#fff;              /* 검정 위 글자 */
  --red-soft:#fdecea;
  --green-soft:#e8f7ed;
  --yellow-soft:#fff4e0;
  --red-ink:#c1271d;          /* 연한 빨강 바탕 위 글자(대비 4.5:1↑) */
  --green-ink:#1c7c36;        /* 연한 초록 바탕 위 글자 */
  --yellow-ink:#9a5b00;       /* 연한 노랑 바탕 위 글자 · 흰 바탕 '주의' 글자 */
  --header-h:3.5rem;          /* 머리말(두 앱 같은 높이) */
  --logo-h:1.5rem;
  --chip-h:1.375rem;          /* 상태 칩(누르는 칩이 아니다 — 누르는 것은 --ctl-h-sm) */
  --badge-h:1.125rem;         /* 숫자 배지 */
}

/* ── 다크 테마 ─────────────────────────────────────────────────────────── */
html[data-theme="dark"]{
  color-scheme:dark;
  --bg:#131316;
  --surface:#1c1d22;
  --surface2:#24252b;
  --text:#e9e9ec;
  --text-sub:#9d9da6;
  --line:#32333c;
  --line2:#2a2b33;
  --th-bg:#2c2e36;
  --tbl-edge:#474956;
  --accent:#3d9bff;
  --accent-soft:#17304f;
  --nav-bg:rgba(22,23,27,.82);
  --nav-bg-solid:#15161a;
  --shadow:0 1px .1875rem rgba(0,0,0,.45),0 .5rem 1.5rem rgba(0,0,0,.35);
  --shadow-sm:0 1px 2px rgba(0,0,0,.4);
}
html[data-theme="dark"] body{background:var(--bg)}

/* ── 한국식 상승/하락 색 (금융 화면만: 상승·이익 = 빨강, 하락·손실 = 파랑) ── */
body.kr-pnl{--pnl-up:#e0322c;--pnl-down:#1565d8}
html[data-theme="dark"] body.kr-pnl{--pnl-up:#ff6b64;--pnl-down:#5aa2ff}

/* ── 모바일: 역할 토큰과 여백만 바꾼다 ───────────────────────────────────── */
@media (max-width:640px){
  :root{
    --root-fs:100%;            /* 휴대폰은 100%(EGS 2026-10-05 — 110% 는 PC·태블릿) */
    --fs-input:1rem;           /* 16px 미만이면 iOS가 포커스 때 확대 → 모달 안에서 갇힌다 */
    --fs-kpi:var(--fs-xl);
    --fs-hero:var(--fs-2xl);
    --page-pad:.875rem;
    --card-px:.875rem;
    --mask-pad:0px;
  }
}