: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;
  /* 일시정지 톤 — 러닝 트래커 vendor/track-f5/mockup.css --pause 미러(사장님 2026-07-29 지시) */
  --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 차용 */
  --sp-1: 1px;
  --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;
  /* 정확값 네임스페이스 --sp-N (= N px). 스케일에 없는 실측값을 스냅하지 않고 보존 */
  --sp-2: 2px;
  --sp-3: 3px;
  --sp-4: 4px;
  --sp-5: 5px;
  --sp-6: 6px;
  --sp-7: 7px;
  --sp-9: 9px;
  --sp-10: 10px;
  --sp-11: 11px;
  --sp-13: 13px;
  --sp-14: 14px;
  --sp-15: 15px;
  --sp-18: 18px;
  --sp-22: 22px;
  --sp-26: 26px;
  --sp-28: 28px;
  --sp-36: 36px;
  --sp-38: 38px;
  --sp-40: 40px;
  --sp-44: 44px;
  --sp-48: 48px;
  --sp-56: 56px;
  --sp-60: 60px;
  --sp-72: 72px;
  --sp-96: 96px;
  --sp-116: 116px;
  --sp-148: 148px;
  --sp-160: 160px;
  --sp-420: 420px;
  --sp-560: 560px;
  --sp-64: 64px;
  --sp-84: 84px;
  --sp-88: 88px;
  --sp-92: 92px;
  --sp-112: 112px;
  --sp-132: 132px;
  --sp-144: 144px;
  --sp-200: 200px;
  --sp-220: 220px;
  --sp-240: 240px;
  --sp-260: 260px;
  --sp-320: 320px;
  --sp-620: 620px;
  --sp-760: 760px;
  --sp-1040: 1040px;
  --sp-17: 17px;
  --sp-19: 19px;
  --sp-30: 30px;
  --sp-32: 32px;
  --sp-42: 42px;
  --sp-52: 52px;
  --sp-76: 76px;
  --sp-140: 140px;
  --sp-400: 400px;

  /* 달력 셀 메인 수치 — 사장님 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-48: 48px;
  --fs-64: 64px;
  --fs-body: 16px;

  --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);
  --btn-h: var(--sp-48);
  --btn-h-lg: var(--sp-56);
  --btn-h-sm: var(--sp-44);
  /* xs = 범위 이동·창 크기 같은 밀집 조작부 전용(사장님 2026-07-28 확정: 32px · 반경 10px) */
  --btn-h-xs: var(--sp-32);
  --btn-radius-xs: var(--radius-10);
  --btn-font-size-xs: var(--fs-12);
  --btn-pad-x-xs: var(--space-2);
  --btn-pad-y: var(--sp-9);
  --btn-pad-x: var(--space-4);
  --btn-pad-x-sm: var(--space-3);
  --btn-icon-size: var(--sp-15);
  --btn-icon-size-sm: var(--sp-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(--sp-96) * 3);
  /* 펼침 팝오버 최대 폭 — 위와 값이 같지만 역할이 다르므로 별도 토큰(한쪽만 바꿔도 안전하게) */
  --popover-max-w: calc(var(--sp-96) * 3);

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

  --appbar-h: var(--sp-56);
  --tabbar-h: var(--sp-60);
  --tap-main: var(--sp-48);
  --tap-icon: var(--sp-44);
  --content-max: 768px;
  --form-max: 640px;
  --tab-cluster-max: var(--sp-560);
  --sheet-max: var(--sp-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열 1500) */
  --desk-content-max: 1460px;
  --desk-col: 720px;
  --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;
}