:root {
  color-scheme: dark;
  /* ★BI 정본(주의점1 · 2026.07.29) — PACELOG 워드마크는 Bebas Neue 가 진본이다(본앱 --font-display 와 같은 값).
     본문(Pretendard)은 body 에서 이미 잡고 있고, 여기는 디스플레이 폰트만 추가한다. */
  --font-display: 'Bebas Neue', sans-serif;
  /* 다크 배경 — 1포인트 방사형(색이 상단 구석에만)에서 다중 그라데이션으로 전환(2026.07.26 사장님 지적).
     ①색 영역을 화면 전체(상단·우중단·좌하단)로 넓히고 ②베이스를 카드(--bg2 #111)보다 확실히 어둡게 해
     카드가 배경 위로 떠 보이게 한다(기존 --bg #0e110b는 카드와 명도가 거의 같아 구분감이 없었음). */
  --bg: #0b0f0a;
  --bg-gradient:
    radial-gradient(115% 78% at 50% -8%, color-mix(in srgb, #00d992 20%, transparent) 0%, transparent 62%),
    radial-gradient(88% 66% at 108% 40%, color-mix(in srgb, #16a37b 16%, transparent) 0%, transparent 70%),
    radial-gradient(96% 72% at -10% 88%, color-mix(in srgb, #0e7c66 17%, transparent) 0%, transparent 72%),
    linear-gradient(180deg, #0b0f0a 0%, #080b08 100%);
  --bg2: #111111;
  --bg3: #1a1a1a;
  --bg4: #222222;
  --border: #2a2a2a;
  --border2: #3a3a3a;
  --text: #f0f0f0;
  --text2: #b8b8b8;
  --text3: #8f8f8f;
  --accent: #00d992;
  --accent2: #2fd6a1;
  --accent-soft: color-mix(in srgb, var(--accent) 14%, transparent);
  --accent-line: color-mix(in srgb, var(--accent) 42%, var(--border));
  --btn-fg: #0a0a0a;
  --danger: #ff6b6b;
  /* 일시정지 톤 — 트래커 원본 자산의 --pause 미러(임의 변경 금지) */
  --pause: #ffc247;
  --danger-soft: color-mix(in srgb, var(--danger) 13%, transparent);
  --info: #5fd9e6;
  --shadow: 0 16px 48px color-mix(in srgb, #000000 64%, transparent);
  --shadow-control: 0 8px 20px color-mix(in srgb, #000000 34%, transparent);
  --shadow-sticky: 0 8px 18px color-mix(in srgb, #000000 24%, transparent);
  --overlay: color-mix(in srgb, #000000 66%, transparent);

  /* 간격 스케일 — 서수(하프스텝 포함). 본앱 src/index.css 차용 */
  --space-1: 4px;
  --space-1h: 6px;
  --space-2: 8px;
  --space-2h: 10px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;

  /* 정확값 네임스페이스 — 작업 5(2026-08-20). 뒷문 --sp-N(55종·371곳) 을 용도별로 쪼갠다.
     간격으로 쓰이던 값은 위 --space-* 눈금으로 흡수했고(100곳, 값이 실제로 움직인 자리는
     오너 보고 목록 참조), 나머지 271곳은 값을 그대로 두고 용도 이름만 붙였다 —
     --sp-22 를 24 로 바꾸면 브랜드 글자까지 커지던 사고를, 네 갈래로 나눠 막는다.
     --dim-2·3·9 는 record-card-v2.css 전용 — 이 파일은 격리 영역(오너 결정)이라 간격도
     눈금으로 스냅하지 않고 원래 값을 그대로 크기로 보존했다. */
  --dim-1: 1px;
  --dim-2: 2px;
  --dim-3: 3px;
  --dim-5: 5px;
  --dim-7: 7px;
  --dim-9: 9px;
  --dim-13: 13px;
  --dim-14: 14px;
  --dim-15: 15px;
  --dim-17: 17px;
  --dim-18: 18px;
  --dim-19: 19px;
  --dim-20: 20px;
  --dim-22: 22px;
  --dim-24: 24px;
  --dim-26: 26px;
  --dim-28: 28px;
  --dim-30: 30px;
  --dim-32: 32px;
  --dim-36: 36px;
  --dim-38: 38px;
  --dim-40: 40px;
  --dim-44: 44px;
  --dim-48: 48px;
  --dim-52: 52px;
  --dim-56: 56px;
  --dim-60: 60px;
  --dim-64: 64px;
  --dim-72: 72px;
  --dim-76: 76px;
  --dim-84: 84px;
  --dim-96: 96px;
  --dim-112: 112px;
  --dim-116: 116px;
  --dim-132: 132px;
  --dim-144: 144px;
  --dim-160: 160px;
  --dim-200: 200px;
  --dim-220: 220px;
  --dim-240: 240px;
  --dim-260: 260px;
  --dim-320: 320px;
  --dim-400: 400px;
  --dim-420: 420px;
  --dim-560: 560px;
  --dim-620: 620px;
  --dim-720: 720px;
  --dim-760: 760px;
  --dim-1040: 1040px;
  /* 위치(top/right/bottom/left/inset) */
  --pos-2: 2px;
  --pos-3: 3px;
  --pos-6: 6px;
  --pos-56: 56px;
  --pos-92: 92px;
  /* 배치(flex/grid) */
  --layout-38: 38px;
  --layout-44: 44px;
  --layout-52: 52px;
  --layout-56: 56px;
  --layout-60: 60px;
  --layout-64: 64px;
  --layout-72: 72px;
  --layout-96: 96px;
  --layout-132: 132px;
  --layout-140: 140px;
  --layout-160: 160px;
  --layout-200: 200px;
  --layout-260: 260px;
  /* 시각효과(outline/border/box-shadow/backdrop-filter) */
  --fx-1: 1px;
  --fx-2: 2px;
  --fx-3: 3px;
  --fx-5: 5px;
  --fx-18: 18px;

  /* 달력 셀 메인 수치 — 사장님 2026-07-28 지시 "11~14px 범위 내 반응형".
     부품(CalendarMonth)이 셀 폭·글자수를 재서 이 범위 안에서 --cal-num-fs를 셀마다 정한다. */
  --cal-num-fs-min: 11px;
  --cal-num-fs-max: 14px;

  --fs-09: 9px;
  --fs-10: 9.5px;
  --fs-11: 10.5px;
  --fs-12: 11.5px;
  --fs-13: 12.5px;
  --fs-14: 13.2px;
  --fs-14b: 13.5px;
  --fs-page-copy: 14px;
  --fs-15: 14.5px;
  --fs-15b: 15px;
  --fs-16: 15.5px;
  --fs-17: 17px;
  --fs-19: 19px;
  --fs-20: 20px;
  --fs-24: 24px;
  --fs-28: 28px;
  --fs-32: 32px;
  --fs-40: 40px;
  --fs-42: 42px;
  --fs-48: 48px;
  --fs-52: 52px;
  --fs-64: 64px;
  --fs-96: 96px;
  --fs-140: 140px;
  --fs-body: 16px;
  /* 워드마크 전용 — 옛 --sp-22 통로가 브랜드 글자까지 겸하고 있었다(작업 3-B 유보분 · 작업 5에서 처리).
     값·굵기·색은 그대로(22px/800/--accent), 이름만 용도에 맞게 붙인다. */
  --fs-brand: 22px;

  /* 굵기 스케일 — 작업 4(2026-08-20). CSS·JS 에 22종 직접 박힌 font-weight 를 6단계로 흡수.
     780→700(4곳)·690→600(1곳)은 이동폭이 커 화면 확인 대상(지시서 기록). */
  --fw-normal: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-heavy: 800;
  --fw-black: 900;

  /* 역할 토큰 — "누가 이 값을 고르나"를 부품이 아니라 역할이 정한다(작업 3-B, 2026-08-20).
     1단계 라벨·값, 2단계 단위·보조에 이어 3단계 제목(큰것·작은것)·대표 수치를 더해 일곱 역할을 마감한다. */
  --role-label-fs: var(--fs-14);
  --role-label-fw: var(--fw-semibold);
  --role-label-color: var(--text3);
  --role-value-fs: var(--fs-body);
  --role-value-fw: var(--fw-bold);
  --role-value-color: var(--text);
  --role-unit-fs: var(--fs-13);
  --role-unit-fw: var(--fw-medium);
  --role-unit-color: var(--text3);
  --role-assist-fs: var(--fs-13);
  --role-assist-fw: var(--fw-normal);
  --role-assist-color: var(--text2);
  --role-title-lg-fs: var(--fs-17);
  --role-title-lg-fw: var(--fw-heavy);
  --role-title-lg-color: var(--text);
  --role-title-sm-fs: var(--fs-16);
  --role-title-sm-fw: var(--fw-heavy);
  --role-title-sm-color: var(--text);
  --role-metric-fs: var(--fs-28);
  --role-metric-fw: var(--fw-heavy);
  --role-metric-color: var(--text);

  --radius-6: 6px;
  --radius-10: 10px;
  --radius-11: 11px;
  --radius-14: 14px;
  --radius-pill: 999px;

  /* 버튼 토큰 간접층 — 본앱 구조(--btn-*) 차용, 값은 목업 언어(pill 기본) */
  --btn-radius: var(--radius-pill);
  --btn-radius-square: var(--radius-6);
  --btn-font-size: var(--fs-14);
  --btn-font-size-sm: var(--fs-12);
  --btn-tracking: -0.005em;
  --btn-gap: var(--space-1h);
  /* ★버튼 높이 기준선 — 오너 결정 2026-08-24 「안3 최소」.
     옛 값(lg56/기본48/sm44/xs32)은 "터치영역 44px"이라는 일반규칙을 시각 크기에까지 그대로
     들이민 결과였다 — 오너가 정한 적 없는 규칙이고, §9-9(행 높이는 컨텐츠에 맞춘다)와도 어긋났다.
     실측: 보조 버튼은 내용물 13.5px 를 44px 로 부풀리고 있었다(공기 30.5px).
     이제 시각 크기는 내용물이 정하고, 터치는 --tap-min 이 따로 책임진다. */
  --btn-h: var(--dim-30);
  --btn-h-lg: var(--dim-36);
  --btn-h-sm: var(--dim-24);
  /* xs = 범위 이동·창 크기 같은 밀집 조작부 전용(2026-07-28 확정 32px → 2026-08-24 20px, 반경 10px 유지).
     실제 터치영역은 .btn--xs::after 가 --tap-min 까지 넓힌다. */
  --btn-h-xs: var(--dim-20);
  --btn-radius-xs: var(--radius-10);
  --btn-font-size-xs: var(--fs-12);
  --btn-pad-x-xs: var(--space-2);
  --btn-pad-y: var(--space-1h);
  --btn-pad-x: var(--space-4);
  --btn-pad-x-sm: var(--space-3);
  --btn-icon-size: var(--dim-15);
  --btn-icon-size-sm: var(--dim-13);
  --btn-icon-size-only: var(--space-4);
  --btn-disabled-opacity: 0.42;

  /* 헤더 구분선 — .appbar::after 전용 토큰(§9-6 부품 소유). 다크는 기존 --border 유지 */
  --appbar-line: var(--border);

  /* 스크롤 목록 최대 높이 — 같은 역할(내부 스크롤 목록)은 같은 수치(§9-7). 값이 같아도 역할이 다르면 토큰을 나눈다. */
  --list-scroll-max: calc(var(--dim-96) * 3);
  /* 펼침 팝오버 최대 폭 — 위와 값이 같지만 역할이 다르므로 별도 토큰(한쪽만 바꿔도 안전하게) */
  --popover-max-w: calc(var(--dim-96) * 3);

  /* 뷰포트 안전 높이 — 세 곳에 손으로 복제돼 있던 계약을 토큰이 소유한다(§9-6 · patch-guard R2) */
  --viewport-h: calc(100dvh - var(--safe-top) - var(--safe-bottom));

  --appbar-h: var(--dim-56);
  --tabbar-h: var(--dim-60);
  /* ★터치 계약 — 오너 결정 2026-08-24. 하한은 44 가 아니라 32 다.
     --tap-main  일반 조작 행·컨트롤의 최소 높이 = 터치 하한과 같다(그 자체가 터치영역이라 확장이 필요 없다)
     --tap-icon  아이콘 버튼의 시각 크기
     --tap-min   ★터치영역 하한. 시각 크기가 이보다 작은 부품은 ::after 로 여기까지만 넓힌다.
                 시각 크기를 이 값으로 끌어올리는 데 쓰지 않는다 — 그것이 옛 44px 사고의 원인이었다. */
  --tap-min: var(--dim-32);
  --tap-main: var(--tap-min);
  --tap-icon: var(--dim-24);
  /* 히트영역 넘침 — 시각 높이와 터치 하한(--tap-min)의 차를 위아래로 나눈 값(음수 = 바깥으로 넓힘).
     여기 값은 밀집 조작부(--btn-h-xs) 기준이고, 시각 높이가 다른 부품은 app.css 에서 자기 값으로 덮는다.
     ★자손에서 기준 높이만 바꾸는 방식은 쓸 수 없다 — 커스텀 속성은 정의된 자리에서 값이 치환되므로
       :root 의 산식은 :root 의 높이로 굳는다(2026-08-24 실측: 24px 부품이 20px 기준으로 계산됐다).
     ★세로만 넓힌다. 좌우로 넓히면 이웃 조작부의 히트영역과 겹쳐 엉뚱한 버튼이 눌린다
       (실측: 페이지 버튼 간격 4px 에 좌우 4px 확장 → 10건 겹침). 가로는 부품 폭과 간격이 갖는다. */
  --tap-bleed: calc((var(--btn-h-xs) - var(--tap-min)) / 2);
  --content-max: 768px;
  --form-max: 640px;
  --tab-cluster-max: var(--dim-560);
  --sheet-max: var(--dim-560);
  --chart-h: 176px;
  --page-gutter: var(--space-4);
  --card-pad: var(--space-4);
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);

  /* 데스크탑 확장(오너 지시 2026-07-30 · 설계 desktop_260730 §1) — 발동폭 규칙은 css/desktop.css 가 소유(셸 1100·2열 1340) */
  --desk-content-max: 1300px;
  --desk-col: 640px;
  --desk-col-gap: 20px;
}

/* 데스크탑 폰트 하한 — 오너 수정지시 V1(2026-07-31): 컨텐츠 본문 최소 12px·보조/캡션 최소 10px.
   토큰 레벨로만 집행(화면별 재정의 금지). 보조 계열(09·10)=11px 유지(≥10)·본문 계열(11·12)=12px. 모바일 값 불변. */
@media (min-width: 1100px) {
  :root {
    --fs-09: 11px;
    --fs-10: 11px;
    --fs-11: 12px;
    --fs-12: 12px;
  }
}

:root[data-theme="light"] {
  color-scheme: light;
  /* 라이트 배경 — 다크와 동일 구조(다중 그라데이션). 기존은 색이 상단에만 있고 전체가 너무 밝아
     흰 카드(--bg2 #fff)와 구분이 안 됐다 → 베이스 명도를 낮추고 채도를 올려 카드가 떠 보이게 한다. */
  --bg: #e4edeb;
  --bg-gradient:
    radial-gradient(115% 78% at 50% -8%, color-mix(in srgb, #047857 15%, transparent) 0%, transparent 62%),
    radial-gradient(88% 66% at 108% 40%, color-mix(in srgb, #0d9488 12%, transparent) 0%, transparent 70%),
    radial-gradient(96% 72% at -10% 88%, color-mix(in srgb, #047857 11%, transparent) 0%, transparent 72%),
    linear-gradient(180deg, #e6efed 0%, #dfeae8 100%);
  --bg2: #ffffff;
  --bg3: #f7f8fa;
  --bg4: #eef0f3;
  --border: #e6e8ec;
  --border2: #d4d7dc;
  --text: #14181f;
  --text2: #4a505a;
  --text3: #5c626b;
  --accent: #047857;
  --accent2: #065f46;
  --accent-soft: color-mix(in srgb, var(--accent) 11%, transparent);
  --accent-line: color-mix(in srgb, var(--accent) 36%, var(--border));
  --btn-fg: #ffffff;
  --danger: #b93646;
  /* 일시정지 톤 라이트 = 진오렌지(오너 결정4 · 2026-07-30) — 흰 글자 대비 5.18:1 실측. 트래커 vendor 값과 미러 유지 */
  --pause: #C2410C;
  --danger-soft: color-mix(in srgb, var(--danger) 9%, transparent);
  --info: #087785;
  --shadow: 0 16px 44px color-mix(in srgb, #1f2937 18%, transparent);
  --shadow-control: 0 8px 20px color-mix(in srgb, #1f2937 15%, transparent);
  --shadow-sticky: 0 8px 18px color-mix(in srgb, #1f2937 12%, transparent);
  --overlay: color-mix(in srgb, #14181f 38%, transparent);
  /* 라이트에서만 헤더 구분선을 진하게 — --border(#e6e8ec)는 라이트 배경 대비 1.03으로 사실상 보이지 않아
     스크롤되는 본문이 근거 없이 사라지는 것처럼 보였다. 다크의 구분선 대비(≈1.31)와 같은 층으로 올린다. */
  --appbar-line: #c3cad3;
}