/* 회계·허브·로그인이 함께 읽는 색·글자·간격의 원본(UR-133).
   여기에는 변수 선언만 둔다 — 규칙을 넣기 시작하면 다시 한 덩어리가 된다.
   색은 이 업무의 물건에서 왔다: 로고의 남색, 들어온 돈의 초록, 결재 도장 인주의 붉은색.
   그 붉은색을 '증빙 없음'에도 함께 쓴다. */
:root {
  --c-navy: #2b3a72;
  --c-action: #2b57e0;
  --c-income: #0b7a57;
  --c-seal: #c63a2f;
  --c-seal-soft: #fdf0ee;
  /* 고른 것의 바탕 — 남색 8%. 그 위에 남색 글자 9.4:1, 흐린 글자 5.1:1. */
  --c-navy-soft: #eeeff4;
  --c-ground: #ffffff;
  --c-sunken: #f4f6fb;
  --c-ink: #131a2a;
  --c-muted: #5c6577;
  --c-faint: #8a93a6;
  --c-line: #e2e7f1;
  /* 레일 바탕. --c-sunken 보다 한 단계 진해 본문 앞에서 물러난다(데스크탑 개편 §4). */
  --c-rail: #eef1f7;

  /* 차트의 항별 색 다섯 + '그 밖에'. 순서를 바꾸지 않는다 — 색약 시뮬레이션 인접 쌍 검사를
     이 순서로 통과했다(dataviz validate_palette, 2026-09-08). 회색은 묶음이라 검사 밖이다. */
  --chart-1: #2a78d6;
  --chart-2: #eb6834;
  --chart-3: #1baf7a;
  --chart-4: #eda100;
  --chart-5: #e87ba4;
  --chart-other: #8a93a6;

  /* 글자 단계. 폰 화면이 쓰는 것은 다섯(amount·title·row·body·aux)이고, 컴퓨터 화면의
     촘촘한 표시(--t-micro)와 큰 숫자(--t-figure)가 설 자리로 둘을 더했다 — 일곱 밖으로는
     나가지 않는다. 18px 자리는 따로 두지 않고 --t-title 로 올린다. */
  --t-amount: 34px;
  --t-figure: 26px;
  --t-title: 21px;
  --t-row: 16px;
  --t-body: 15px;
  --t-aux: 13px;
  --t-micro: 12px;

  /* 손가락. 하단 탭은 56px, 그 밖에 누를 수 있는 것은 48px 아래로 내려가지 않는다. */
  --tap-min: 48px;
  --tab-h: 56px;

  --r-pill: 999px;
  --r-card: 14px;
  --r-sheet: 22px;
  /* 느낌 ②(2026-09-16 사용자 결정): 카드는 테두리 대신 얕은 그림자, 누르는 것은 10px.
     껍데기(platform-shell.css)와 세 모듈이 이 값을 함께 읽는다. */
  --r-control: 10px;
  --shadow-card: 0 1px 2px rgb(19 26 42 / 5%), 0 8px 24px rgb(19 26 42 / 6%);

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;

  --motion-sheet: 300ms cubic-bezier(0.32, 0.72, 0, 1);
  --shadow-sheet: 0 -10px 34px rgb(19 26 42 / 16%);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-sheet: 1ms linear;
  }
}