/* 2026-09 홈 리프레시: 숫자 Archivo · 한글 Pretendard · 코드 JetBrains Mono */
@import url("https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;700&display=swap");

@font-face {
  font-family: "Pretendard Variable";
  font-style: normal;
  font-weight: 45 920;
  font-display: swap;
  src: url("./assets/fonts/PretendardVariable.woff2") format("woff2-variations");
}

@font-face {
  font-family: "Wanted Sans Variable";
  font-style: normal;
  font-weight: 400 1000;
  font-display: swap;
  src: url("./assets/fonts/WantedSansVariable.woff2") format("woff2-variations");
}

:root {
  --font-ui: "Pretendard Variable", Pretendard, "Apple SD Gothic Neo", "Malgun Gothic", -apple-system, system-ui, sans-serif;
  --font-numeric: "Archivo", "Pretendard Variable", Pretendard, system-ui, sans-serif;
  --font-amount: "Archivo", "Pretendard Variable", Pretendard, system-ui, sans-serif;
  --font-code: "JetBrains Mono", "Pretendard Variable", Pretendard, ui-monospace, monospace;
  --shell-bg: #ECECEC;
  --bg: #F5F5F5;
  --panel: #FFFFFF;
  --panel2: #F7F7F8;
  --panel3: #F4F4F5;
  --line: rgba(112,115,124,.18);
  --line-strong: #DBDCDF;
  --text: #171719;
  --text-sub: rgba(46,47,51,.88);
  --muted: #70737C;
  --soft: #70737C;
  --gold: #1B62D6;
  --gold-ink: #FFFFFF;
  --gold2: #3B82E8;
  --primary-bg: rgba(26,115,232,.10);
  --primary-dark: #1558B0;
  --primary-border: rgba(26,115,232,.28);
  --red: #DC3545;
  --red-bg: rgba(220,53,69,.10);
  --red-border: rgba(220,53,69,.20);
  --blue: #1A73E8;
  --green: #28A745;
  --green-bg: rgba(40,167,69,.10);
  /* 경고는 강조(--gold)와 분리한다. Android stateWarn과 같은 값. */
  --warn: #8E5100;
  --warn-bg: rgba(142,81,0,.10);
  --warn-border: rgba(142,81,0,.32);
  --button-secondary: var(--panel2);
  --button-secondary-text: var(--text);
  --button-secondary-border: var(--line);
  --button-danger-text: #FFFFFF;
  --button-success-text: #102116;
  /* 모서리 단계. Android PaceDimens와 같은 값. */
  --r-xs: 4px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 18px;
  --r-xl: 28px;
  --r-full: 999px;
  --radius: var(--r-lg);
  /* 글자 단계. Android 24/18/15/13/12/11에 웹 전용 14/16/20을 더했다. 11px 미만은 쓰지 않는다. */
  --fs-caption: 11px;
  /* 달력 칸 안의 구역 표시만 쓰는 예외 크기. 칸이 좁아 작게 두는 편이 읽기 쉽다. */
  --fs-cell: 9px;
  --fs-label: 12px;
  --fs-body: 13px;
  --fs-body-l: 14px;
  --fs-title: 15px;
  --fs-title-m: 16px;
  --fs-title-l: 18px;
  --fs-display-s: 20px;
  --fs-headline: 24px;
  --nav-h: 68px;
  --safe-b: env(safe-area-inset-bottom, 0px);
  --shadow-card: 0 1px 2px rgba(16,24,40,.05), 0 10px 28px -14px rgba(16,24,40,.16);
  --shadow-raise: 0 1px 2px rgba(16,24,40,.05), 0 18px 40px -20px rgba(16,24,40,.22);
  --shadow-cta: 0 4px 12px rgba(26,115,232,.20);
  --shadow-total: 0 6px 20px rgba(26,115,232,.16);
  color-scheme: light;
}

html[data-theme="dark"], body[data-theme="dark"] {
  --shell-bg: #101010;
  --bg: #141414;
  --panel: #1C1C1C;
  --panel2: #242424;
  --panel3: #2C2C2C;
  --line: rgba(255,255,255,.075);
  --line-strong: rgba(255,255,255,.40);
  --text: #ECEEF2;
  --text-sub: rgba(244,246,251,.78);
  --muted: #8A9099;
  --soft: #929292;
  --gold: #E8B85C;
  --gold-ink: #1A1405;
  --green: #58D184;
  --green-bg: rgba(88,209,132,.14);
  --warn: #F29E4C;
  --warn-bg: rgba(242,158,76,.14);
  --warn-border: rgba(242,158,76,.35);
  --gold2: #C99A4A;
  --primary-bg: rgba(255,210,74,.13);
  --primary-dark: #11151F;
  --primary-border: rgba(255,210,74,.35);
  --blue: #7EA7F7;
  --red: #FF7B85;
  --red-bg: rgba(255,123,133,.14);
  --red-border: rgba(255,123,133,.40);
  --button-secondary: var(--panel2);
  --button-secondary-text: var(--text);
  --button-secondary-border: var(--line-strong);
  --button-danger-text: #FFFFFF;
  --button-success-text: #102116;
  --shadow-card: 0 1px 2px rgba(16,24,40,.05), 0 10px 28px -14px rgba(16,24,40,.16);
  --shadow-raise: 0 1px 2px rgba(16,24,40,.05), 0 18px 40px -20px rgba(16,24,40,.22);
  --shadow-cta: 0 4px 14px rgba(255,210,74,.22);
  --shadow-total: 0 6px 22px rgba(255,210,74,.18);
  color-scheme: dark;
}
html[data-theme="dark"] .primary-pill,
html[data-theme="dark"] .full-btn,
html[data-theme="dark"] .rate-editor button,
html[data-theme="dark"] .stats-range-custom > button,
html[data-theme="dark"] .goal-save-btn,
html[data-theme="dark"] .total-card,
body[data-theme="dark"] .primary-pill,
body[data-theme="dark"] .full-btn,
body[data-theme="dark"] .rate-editor button,
body[data-theme="dark"] .stats-range-custom > button,
body[data-theme="dark"] .goal-save-btn,
body[data-theme="dark"] .total-card {
  color: var(--primary-dark);
}

html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea,
body[data-theme="dark"] input,
body[data-theme="dark"] select,
body[data-theme="dark"] textarea {
  border-color: var(--line-strong);
}
html[data-theme="dark"] input:focus,
html[data-theme="dark"] select:focus,
html[data-theme="dark"] textarea:focus,
body[data-theme="dark"] input:focus,
body[data-theme="dark"] select:focus,
body[data-theme="dark"] textarea:focus {
  border-color: var(--gold);
}


* { box-sizing: border-box; }
html {
  background: var(--shell-bg);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body {
  margin: 0;
  background: var(--shell-bg);
  color: var(--text);
  font-family: var(--font-ui);
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
  min-height: 100dvh;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
}
button, input, select, textarea { font: inherit; }
button { border: 0; cursor: pointer; }
/* Pointer focus stays quiet; keyboard focus follows the current theme. */
:where(button, a[href], summary, [tabindex]:not(input, select, textarea)):focus:not(:focus-visible) {
  outline: none;
}
:where(button, a[href], summary, [tabindex]:not(input, select, textarea)):focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}
/* These focus targets announce a screen or message; their controls keep the ring. */
:where([tabindex="-1"]:is([role="dialog"], [role="status"], h1, h2, h3, h4, h5, h6)):focus {
  outline: none;
}
input, select, textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--panel2);
  color: var(--text);
  padding: 12px;
  outline: none;
  transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}
input:focus, select:focus, textarea:focus { border-color: var(--gold); box-shadow: 0 0 0 3px var(--primary-bg); }
textarea { min-height: 96px; resize: vertical; }
label { display: block; margin: 8px 0 4px; color: var(--muted); font-size: var(--fs-body); font-weight: 500; }
.settings-field label, .admin-route-field label { margin: 0; }

.app {
  width: min(100%, 480px);
  min-height: 100dvh;
  margin: 0 auto;
  background: var(--panel);
  position: relative;
  box-shadow: 0 0 0 1px var(--line);
}
.view {
  display: none;
  min-height: 100dvh;
  background: var(--bg);
  padding-bottom: calc(var(--nav-h) + var(--safe-b));
}
.save-feedback { padding: 12px 16px; border-bottom: 1px solid var(--line); background: var(--panel); }
.save-feedback[hidden] { display: none; }
.save-feedback p { margin: 0 0 8px; font-size: var(--fs-body-l); line-height: 1.5; }
.save-feedback button { min-height: 44px; margin: 0 8px 8px 0; }
.save-feedback textarea { width: 100%; min-height: 120px; margin-top: 8px; }
.app[data-view="home"] .view-home,
.app[data-view="record"] .view-record,
.app[data-view="inspection"] .view-inspection,
.app[data-view="measurement"] .view-measurement,
.app[data-view="stats"] .view-stats,
.app[data-view="settings"] .view-settings,
.app[data-view="expenses"] .view-expenses,
.app[data-view="routes"] .view-routes,
.app[data-view="schedule"] .view-schedule { display: block; }
.app[data-view="record"] .bottom-nav,
.app[data-view="inspection"] .bottom-nav { display: none; }
.app[data-view="record"] .view-record,
.app[data-view="inspection"] .view-inspection { padding-bottom: 16px; }
.app[data-driver-type="fixed"] .backup-only { display: none !important; }
.app:not([data-driver-type="fixed"]) .fixed-only { display: none !important; }
.app:not([data-role="admin"]) .admin-only { display: none !important; }
.hidden { display: none !important; }
.home-route-notes { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 16px; }
.home-route-notes[hidden] { display: none; }
.home-route-notes button { min-height: 44px; }
/* 화면에는 숨기고 스크린리더에만 읽히는 이름표 */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.view-home {
  background: var(--bg);
}
html:not([data-theme="dark"]) .view-home,
body:not([data-theme="dark"]) .view-home {
  background: var(--bg);
}

.home-header {
  padding: 48px 18px 0;
  background: transparent;
  border-bottom: 0;
}
html:not([data-theme="dark"]) .home-header,
body:not([data-theme="dark"]) .home-header {
  background: transparent;
}
.home-top, .summary-row, .calendar-toolbar, .day-dock, .sub-header, .entry-actions, .two-buttons, .upload-row, .ocr-adjust-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.home-top { justify-content: space-between; margin-bottom: 18px; }
h1 { margin: 0; font-size: 22px; font-weight: 700; letter-spacing: -.022em; line-height: 1.18; }
.muted, .hint { color: var(--muted); font-size: var(--fs-label); line-height: 1.45; }
.center { text-align: center; }
.icon-btn, .round-btn {
  width: 44px;
  height: 44px;
  border-radius: var(--r-full);
  background: var(--panel);
  color: var(--muted);
  border: 1px solid var(--line);
  display: grid;
  place-items: center;
  font-size: var(--fs-display-s);
  flex: 0 0 auto;
}
.icon-btn svg, .round-btn svg { display: block; }
.summary-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-bottom: 0;
  border-radius: var(--r-lg);
  padding: 18px;
  box-shadow: var(--shadow-card);
  display: grid;
}
.summary-card.compact { border-radius: var(--radius); border-bottom: 0; }
.summary-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: start;
  gap: 6px 10px;
  order: 1;
}
.summary-row span:not([data-mo-digit]), .summary-card > span:not([data-mo-digit]) { color: var(--muted); font-weight: 500; font-size: var(--fs-label); }
.summary-period-badge {
  justify-self: end;
  padding: 5px 9px;
  border-radius: var(--r-full);
  background: var(--primary-bg);
  color: var(--gold) !important;
  border: 1px solid var(--primary-border);
  font-size: var(--fs-caption) !important;
  font-weight: 700 !important;
  letter-spacing: 0;
  line-height: 1;
}
.summary-row strong, .summary-card.compact strong {
  display: inline-block;
  grid-column: 1 / -1;
  color: var(--gold);
  font-family: var(--font-amount);
  font-size: 32px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
  line-height: 1.04;
}
.meter-wrap { display: flex; align-items: center; gap: 10px; margin: 14px 0 6px; order: 2; }
.meter-wrap .summary-meter { flex: 1; margin: 0; }
.summary-meter { height: 6px; background: var(--panel3); border-radius: var(--r-full); overflow: hidden; }
.summary-meter span { display: block; width: 100%; height: 100%; transform-origin: left center; background: linear-gradient(90deg, var(--gold), var(--gold2)); }
.meter-pct { font-family: var(--font-numeric); font-size: var(--fs-label); font-weight: 700; color: var(--gold); white-space: nowrap; min-width: 38px; text-align: right; flex-shrink: 0; letter-spacing: -.015em; }
.goal-chip {
  display: inline-flex;
  align-items: center;
  opacity: 0;
  transform: scale(0.7);
  margin-left: 6px;
  padding: 2px 8px;
  border-radius: var(--r-full);
  background: var(--gold);
  color: var(--gold-ink);
  font-size: var(--fs-caption);
  font-weight: 700;
  white-space: nowrap;
  flex-shrink: 0;
}
.goal-chip[hidden] { display: none; }
.meter-label { font-size: var(--fs-caption); color: var(--soft); text-align: center; margin: 0 0 14px; order: 3; }
.summary-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); text-align: center; order: 4; }
.summary-grid div + div { border-left: 1px solid var(--line); }
.summary-grid div { min-width: 0; padding: 11px 4px 6px; }
.summary-grid span:not([data-mo-digit]) { display: block; color: var(--soft); font-size: var(--fs-caption); font-weight: 500; margin-bottom: 2px; white-space: nowrap; }
.summary-grid strong { display: block; font-family: var(--font-numeric); font-size: var(--fs-body-l); font-weight: 700; letter-spacing: -.022em; white-space: nowrap; }

.inspection-entry-card {
  margin: 8px 14px 0;
  padding: 7px 8px 7px 12px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--panel);
  box-shadow: none;
}
.inspection-entry-copy { min-width: 0; overflow: hidden; display: flex; align-items: center; gap: 7px; }
.inspection-entry-copy span,
.inspection-entry-copy strong,
.inspection-entry-copy small { display: block; }
.inspection-entry-copy span { color: var(--text); font-size: var(--fs-label); font-weight: 700; white-space: nowrap; }
.inspection-entry-copy strong,
.inspection-entry-copy #inspectionEntryStatus { display: none; }
.inspection-entry-copy .inspection-duty-label { margin: 0; color: var(--gold); font-size: var(--fs-caption); font-weight: 700; white-space: nowrap; }
.inspection-entry-button {
  position: relative;
  z-index: 1;
  min-width: 64px;
  min-height: 44px;
  padding: 0 11px;
  border: 0;
  border-radius: var(--r-full);
  background: var(--gold);
  color: var(--gold-ink);
  font-size: var(--fs-caption);
  font-weight: 700;
}
.inspection-entry-button:disabled { opacity: .45; cursor: not-allowed; }
.inspection-entry-card.complete { border-color: rgba(69, 190, 108, .36); }
.inspection-entry-card.complete .inspection-entry-copy span { color: var(--green); }
.inspection-entry-card.complete .inspection-entry-button { background: var(--green-bg); color: var(--green); border: 1px solid color-mix(in srgb, var(--green) 34%, transparent); }

.inspection-header .sub-title { min-width: 0; flex: 1; text-align: left; }
.inspection-header-actions { display: flex; gap: 6px; }
.inspection-history-button { min-height: 44px; padding: 0 13px; font-size: var(--fs-caption); white-space: nowrap; }
.inspection-save-pdf-button { border-color: var(--primary-border); background: var(--primary-bg); color: var(--gold); }
.inspection-history-button:disabled { opacity: .58; cursor: wait; }
.inspection-body { padding: 18px; }
.inspection-date-field {
  margin: 0;
  padding: 12px 14px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--panel);
}
.inspection-date-field span { color: var(--muted); font-size: var(--fs-label); font-weight: 500; }
.inspection-date-field input { min-height: 44px; padding: 0 10px; }
.inspection-legal-notice {
  margin-top: 10px;
  padding: 10px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid var(--primary-border);
  border-radius: var(--r-md);
  background: var(--primary-bg);
  color: var(--text);
  font-size: var(--fs-caption);
  line-height: 1.4;
}
.inspection-legal-notice strong { flex: 0 0 auto; color: var(--gold); font-size: var(--fs-caption); }
.inspection-legal-notice span { text-align: right; }
.inspection-sign-info { display: flex; justify-content: space-between; gap: 12px; margin: 10px 2px 16px; color: var(--muted); font-size: var(--fs-caption); }
.inspection-legacy-badge { margin: -4px 0 14px; padding: 8px 12px; border-radius: var(--r-sm); color: var(--gold); background: var(--primary-bg); border: 1px solid var(--primary-border); font-size: var(--fs-caption); font-weight: 600; text-align: center; }
.inspection-group { margin-top: 14px; overflow: hidden; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--panel); }
.inspection-group:first-child { margin-top: 0; }
.inspection-group-title { margin: 0; padding: 11px 13px; color: var(--gold); background: var(--primary-bg); font-size: var(--fs-body); font-weight: 700; }
.inspection-row { display: grid; grid-template-columns: minmax(0, 1fr) 44px 44px; align-items: center; gap: 8px; min-height: 66px; padding: 10px 10px 10px 13px; border-top: 1px solid var(--line); }
.inspection-row:first-of-type { border-top: 0; }
.inspection-row p { margin: 0; color: var(--text); font-size: var(--fs-label); line-height: 1.45; word-break: keep-all; }
.inspection-choice { width: 44px; height: 44px; border-radius: var(--r-full); border: 1px solid var(--line); background: var(--panel2); color: var(--muted); font-size: var(--fs-title-l); font-weight: 600; }
.inspection-choice.active[data-result="good"] { border-color: var(--green); background: var(--green-bg); color: var(--green); }
.inspection-choice.active[data-result="bad"] { border-color: var(--red); background: var(--red-bg); color: var(--red); }
.inspection-defect-fields { margin-top: 14px; padding: 12px; border: 1px solid rgba(230, 94, 105, .32); border-radius: var(--r-md); background: rgba(230, 94, 105, .06); }
.inspection-defect-fields label { margin: 0 0 10px; }
.inspection-defect-fields label:last-child { margin-bottom: 0; }
.inspection-defect-fields textarea { margin-top: 5px; min-height: 72px; }
.inspection-quick-actions { margin-top: 14px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.inspection-good-button { min-height: 44px; border: 0; border-radius: var(--r-full); background: var(--green); color: var(--button-success-text); font-weight: 700; }
.inspection-signature-confirm {
  margin-top: 14px;
  padding: 12px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--panel);
}
.inspection-signature-confirm > div { display: grid; gap: 3px; }
.inspection-signature-confirm strong { font-size: var(--fs-label); color: var(--text); }
.inspection-signature-confirm span { font-size: var(--fs-caption); color: var(--muted); }
.inspection-signature-confirm img { width: 96px; height: 36px; object-fit: contain; background: #fff; border-radius: var(--r-sm); }
.inspection-signature-confirm button { grid-column: 1 / -1; min-height: 44px; }
.inspection-confirm-row { margin: 14px 2px 0; display: flex; align-items: flex-start; gap: 9px; color: var(--muted); font-size: var(--fs-caption); line-height: 1.45; }
.inspection-confirm-row input { width: 18px; height: 18px; flex: 0 0 auto; accent-color: var(--gold); }
.inspection-save-button { margin-top: 14px; background: var(--gold); color: var(--gold-ink); }
.inspection-no-operation { width: 100%; margin-top: 9px; padding: 8px; border: 0; background: transparent; color: var(--muted); font-size: var(--fs-caption); text-decoration: underline; }
.inspection-print-sheet {
  display: none;
  color: #111;
  background: #fff;
  font-family: "Pretendard Variable", sans-serif;
}
.inspection-print-sheet h1 { margin: 0 0 8px; text-align: center; font-size: var(--fs-title-l); }
.inspection-print-meta { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid #222; border-bottom: 0; font-size: var(--fs-caption); }
.inspection-print-meta span { padding: 5px 7px; border-right: 1px solid #222; }
.inspection-print-meta span:last-child { border-right: 0; }
.inspection-print-table { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: var(--fs-caption); }
.inspection-print-table th,
.inspection-print-table td { border: 1px solid #222; padding: 3px 2px; text-align: center; vertical-align: middle; }
.inspection-print-table th:first-child { width: 22px; }
.inspection-print-table th:nth-child(2) { width: 260px; text-align: left; }
.inspection-print-table td:nth-child(2) { text-align: left; }
.inspection-print-signature { padding: 1px !important; }
.inspection-print-signature img { display: block; width: 100%; height: 15px; object-fit: contain; }
.inspection-print-legend { margin: 5px 0 0; font-size: var(--fs-caption); }
.inspection-print-sheet.pdf-capture {
  display: block;
  position: fixed;
  top: 0;
  left: -12000px;
  width: 1120px;
  padding: 20px;
  box-sizing: border-box;
}

.calendar-panel {
  background: transparent;
  border: 0;
  border-radius: 0;
  margin-top: 2px;
  overflow: visible;
  position: static;
  isolation: auto;
  background-clip: border-box;
  box-shadow: none;
}
html:not([data-theme="dark"]) .calendar-panel,
body:not([data-theme="dark"]) .calendar-panel {
  background: transparent;
}
.calendar-toolbar {
  padding: 18px 14px 10px;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 44px auto;
  background: transparent;
}
.calendar-toolbar strong { display: block; font-size: var(--fs-title-l); font-weight: 700; letter-spacing: -.025em; text-align: center; }
.meter-label { font-size: var(--fs-caption); color: var(--soft); text-align: center; margin: 0 0 14px; order: 3; }
.today-btn, .ghost-pill, .primary-pill, .secondary-btn, .full-btn {
  border-radius: var(--r-full);
  font-weight: 700;
  min-height: 44px;
}
.today-btn {
  min-height: 44px;
  padding: 0 12px;
  background: var(--primary-bg);
  color: var(--gold);
  border: 1px solid var(--primary-border);
  font-size: var(--fs-label);
  font-weight: 700;
}
html:not([data-theme="dark"]) .round-btn,
body:not([data-theme="dark"]) .round-btn,
html:not([data-theme="dark"]) .ghost-pill,
body:not([data-theme="dark"]) .ghost-pill,
html:not([data-theme="dark"]) .secondary-btn,
body:not([data-theme="dark"]) .secondary-btn,
html:not([data-theme="dark"]) .upload-row .upload-btn,
body:not([data-theme="dark"]) .upload-row .upload-btn,
html:not([data-theme="dark"]) .settings-row,
body:not([data-theme="dark"]) .settings-row,
html:not([data-theme="dark"]) .mode-btn:not(.active),
body:not([data-theme="dark"]) .mode-btn:not(.active),
html:not([data-theme="dark"]) .stats-tab:not(.active),
body:not([data-theme="dark"]) .stats-tab:not(.active),
html:not([data-theme="dark"]) .stats-range-tabs > button:not(.active),
body:not([data-theme="dark"]) .stats-range-tabs > button:not(.active),
html:not([data-theme="dark"]) .theme-toggle button:not(.active),
body:not([data-theme="dark"]) .theme-toggle button:not(.active) {
  background: var(--button-secondary);
  border-color: var(--button-secondary-border);
  color: var(--button-secondary-text);
}
html:not([data-theme="dark"]) .calendar-toolbar .round-btn,
body:not([data-theme="dark"]) .calendar-toolbar .round-btn {
  background: #FFFFFF;
  border-color: var(--line-strong);
  color: var(--gold);
}
html:not([data-theme="dark"]) .mode-btn:not(.active),
body:not([data-theme="dark"]) .mode-btn:not(.active),
html:not([data-theme="dark"]) .stats-tab:not(.active),
body:not([data-theme="dark"]) .stats-tab:not(.active),
html:not([data-theme="dark"]) .stats-range-tabs > button:not(.active),
body:not([data-theme="dark"]) .stats-range-tabs > button:not(.active),
html:not([data-theme="dark"]) .theme-toggle button:not(.active),
body:not([data-theme="dark"]) .theme-toggle button:not(.active) {
  background: transparent;
  border-color: var(--line);
  color: var(--muted);
}
.mode-toggle {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 0 14px 12px;
  background: transparent;
}
/* The selected pill slides between segments (motion.createTabIndicator sets
   top/height/width/transform). Buttons in a control that has one drop their
   own active surface so there is exactly one pill. */
.tab-indicator {
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  border-radius: var(--r-full);
  background: var(--panel3);
  box-shadow: inset 0 0 0 1px var(--line-strong), 0 1px 3px rgba(0,0,0,.22);
  opacity: 0;
  pointer-events: none;
  z-index: 0;
}
html:not([data-theme="dark"]) .tab-indicator {
  background: #FFFFFF;
  box-shadow: inset 0 0 0 1px var(--line-strong), 0 1px 3px rgba(16,24,40,.12);
}
.stats-range-tabs, .ledger-switch { position: relative; }
.stats-range-tabs:has(> .tab-indicator) > button,
.ledger-switch:has(> .tab-indicator) > button,
.mode-toggle:has(> .tab-indicator) > .mode-btn { position: relative; z-index: 1; }
html .stats-range-tabs:has(> .tab-indicator) > button.active,
html .mode-toggle:has(> .tab-indicator) > .mode-btn.active,
html .ledger-switch:has(> .tab-indicator) > button.is-on,
html:not([data-theme="dark"]) .ledger-switch:has(> .tab-indicator) > button.is-on {
  background: transparent;
  box-shadow: none;
}
.mode-btn {
  height: 44px;
  border-radius: var(--r-full);
  background: transparent;
  border: 1px solid var(--line);
  color: var(--muted);
  font-size: var(--fs-body);
  font-weight: 700;
}
html:not([data-theme="dark"]) .primary-pill,
body:not([data-theme="dark"]) .primary-pill,
html:not([data-theme="dark"]) .full-btn,
body:not([data-theme="dark"]) .full-btn,
html:not([data-theme="dark"]) .stats-range-custom > button,
body:not([data-theme="dark"]) .stats-range-custom > button {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--gold-ink);
}
.week-head, .calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); }
.week-head {
  background: transparent;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  overflow: visible;
}
.week-head span {
  text-align: center;
  padding: 8px 0 9px;
  line-height: 1;
  color: var(--muted);
  font-weight: 600;
  font-family: var(--font-code);
  font-size: var(--fs-caption);
}
.sun { color: var(--red) !important; }
.sat { color: var(--blue) !important; }
.calendar-grid {
  position: relative;
  grid-auto-rows: 76px;
  min-height: 0;
  background: transparent;
  overflow: visible;
}
.day-selection-ring {
  position: absolute;
  top: 0;
  left: 0;
  box-shadow: inset 0 0 0 2px var(--gold);
  border-radius: 0;
  opacity: 0;
  pointer-events: none;
  z-index: 1;
  will-change: transform;
}
.day-cell {
  position: relative;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  display: grid;
  grid-template-rows: 28px 20px minmax(0, 1fr);
  align-content: start;
  gap: 2px;
  min-width: 0;
  padding: 6px 3px 5px;
  text-align: center;
  overflow: hidden;
  background: var(--panel);
}
.day-cell:nth-child(7n) { border-right: 0; }
/* 야간 기사의 다음 업무일: 칸에 줄을 더하지 않고 날짜 숫자에 링만 두른다. 구역 줄이 눌리지 않게. */
.day-cell.work-date-cell .day-number { box-shadow: 0 0 0 1.5px var(--blue); }
.day-cell.work-date-cell.today-cell .day-number { box-shadow: 0 0 0 2px var(--panel), 0 0 0 3.5px var(--blue); }
#measurementScheduleMeta { font-size: 22px; font-weight: 700; color: var(--text); }
.day-cell.outside { opacity: .28; background: var(--panel2); }
.day-cell.outside .day-value,
.day-cell.outside .day-routes {
  color: var(--soft);
}
/* The ring itself is drawn by the persistent .day-selection-ring overlay
   (springs between cells instead of jumping); this class keeps the panel
   background correct and stays the accessible/no-JS-fallback signal via
   aria-pressed, without a second static box-shadow doubling the ring during
   its slide. */
.day-cell.selected { background: var(--panel); }
.day-cell.selected.today-cell { background: var(--panel); }
.day-cell.selected.today-cell.off { background: var(--panel2); }
.day-cell.selected.off { background: var(--panel2); }
.day-cell.off { background: var(--panel2); }
.day-cell.off .day-value {
  color: var(--red);
  font-size: var(--fs-caption);
  line-height: 18px;
}
.day-number {
  font-family: var(--font-numeric);
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  margin: 0 auto;
  border-radius: var(--r-full);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--muted);
}
.inspection-day-dot {
  position: absolute;
  top: 7px;
  left: calc(50% + 8px);
  width: 4px;
  height: 4px;
  border-radius: var(--r-full);
  background: var(--muted);
  box-shadow: 0 0 0 2px var(--panel);
  pointer-events: none;
}
.day-cell.off .inspection-day-dot { box-shadow: 0 0 0 2px var(--panel2); }
.calendar-grid .day-cell:nth-child(7n + 1) .day-number { color: var(--red); }
.calendar-grid .day-cell:nth-child(7n):not(.today-cell):not(.holiday) .day-number { color: var(--blue); }
.today-cell .day-number { background: var(--gold); color: var(--gold-ink); }
.day-cell.holiday .day-number { color: var(--red); }
.today-cell.holiday .day-number { color: var(--gold-ink); }
html[data-theme="dark"] .today-cell .day-number,
body[data-theme="dark"] .today-cell .day-number,
html[data-theme="dark"] .today-cell.holiday .day-number,
body[data-theme="dark"] .today-cell.holiday .day-number {
  color: var(--primary-dark);
}
.day-cell.selected .day-number {
  background: transparent;
  color: var(--gold);
}
.day-cell.selected.today-cell .day-number,
.day-cell.selected.today-cell.holiday .day-number {
  background: var(--gold);
  color: var(--gold-ink);
}
html[data-theme="dark"] .day-cell.selected.today-cell .day-number,
body[data-theme="dark"] .day-cell.selected.today-cell .day-number,
html[data-theme="dark"] .day-cell.selected.today-cell.holiday .day-number,
body[data-theme="dark"] .day-cell.selected.today-cell.holiday .day-number {
  color: var(--primary-dark);
}
.day-holiday {
  display: none;
  position: absolute;
  top: 5px;
  right: 4px;
  max-width: 34px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--red);
  font-size: var(--fs-caption);
  font-weight: 700;
  line-height: 1;
}
.day-value {
  font-family: var(--font-numeric);
  display: block;
  min-width: 0;
  color: var(--gold);
  font-weight: 700;
  font-size: clamp(10px, 2.8vw, 11px);
  line-height: 18px;
  letter-spacing: -.028em;
  white-space: nowrap;
  overflow: visible;
  text-overflow: clip;
}
.day-routes {
  display: block;
  min-width: 0;
  color: var(--muted);
  font-size: var(--fs-cell);
  font-weight: 700;
  line-height: 12px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.day-dock {
  position: sticky;
  bottom: calc(var(--nav-h) + var(--safe-b));
  background: var(--panel);
  border-top: 1px solid var(--line);
  padding: 12px 16px;
  z-index: 5;
  box-shadow: 0 -4px 16px rgba(0,0,0,.05);
}
.day-dock div { flex: 1; min-width: 0; }
.day-dock span:not([data-mo-digit]):not(.home-off-wide-label):not(.number-unit) { display: block; color: var(--muted); font-size: var(--fs-caption); }
.day-dock strong {
  display: inline-block;
  color: var(--gold);
  font-family: var(--font-amount);
  font-size: var(--fs-title-l);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
  line-height: 1.08;
}
.selected-date-breakdown {
  margin: 12px 14px 0;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--panel);
}
.selected-breakdown-head,
.selected-breakdown-row > div:first-child {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.selected-breakdown-head > div { min-width: 0; }
.selected-breakdown-head span,
.selected-breakdown-head strong { display: block; }
.selected-breakdown-head span { color: var(--muted); font-size: var(--fs-caption); font-weight: 500; }
.selected-breakdown-head strong { margin-top: 2px; font-size: var(--fs-title-m); }
.selected-breakdown-head .secondary-btn { flex: 0 0 auto; min-height: 44px; }
.selected-breakdown-rows { display: grid; gap: 8px; margin-top: 12px; }
.selected-breakdown-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 7px 12px;
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--panel2);
}
.selected-breakdown-row > div:first-child strong { color: var(--gold); }
.selected-breakdown-row > div:first-child span { color: var(--text); font-weight: 500; }
.selected-breakdown-row > strong { align-self: center; color: var(--text); }
.selected-detail-routes,
.selected-detail-empty { grid-column: 1 / -1; }
.selected-detail-routes { display: flex; flex-wrap: wrap; gap: 5px 10px; color: var(--muted); font-size: var(--fs-label); }
.selected-detail-empty { color: var(--soft); font-size: var(--fs-label); }
.selected-breakdown-note { margin: 10px 2px 0; color: var(--muted); font-size: var(--fs-caption); line-height: 1.5; }
.ghost-pill { background: transparent; border: 1px solid var(--line); color: var(--muted); padding: 0 18px; }
.ghost-pill.active { color: var(--red); border-color: var(--red); background: var(--red-bg); }
.primary-pill, .full-btn { background: var(--gold); color: var(--gold-ink); box-shadow: var(--shadow-cta); }
.primary-pill { min-height: 44px; padding: 0 20px; font-size: var(--fs-body); font-weight: 700; }
.day-dock .ghost-pill {
  min-height: 44px;
  padding: 0 16px;
  font-size: var(--fs-label);
  font-weight: 600;
}
html[data-theme="dark"] .day-dock #homeOffToggle,
body[data-theme="dark"] .day-dock #homeOffToggle {
  min-height: 44px;
  height: 44px;
  padding: 0 16px;
  font-size: var(--fs-label);
  font-weight: 600;
}
html:not([data-theme="dark"]) .ghost-pill.active,
body:not([data-theme="dark"]) .ghost-pill.active,
html:not([data-theme="dark"]) .off-toggle input:checked + span,
body:not([data-theme="dark"]) .off-toggle input:checked + span {
  background: var(--red);
  border-color: var(--red);
  color: var(--button-danger-text);
}
html:not([data-theme="dark"]) .day-dock .ghost-pill,
body:not([data-theme="dark"]) .day-dock .ghost-pill {
  min-height: 44px;
  padding: 0 16px;
  background: #FFFFFF;
  border-color: var(--line-strong);
  color: var(--muted);
  box-shadow: none;
  font-size: var(--fs-label);
  font-weight: 600;
}
html:not([data-theme="dark"]) .day-dock .ghost-pill.active,
body:not([data-theme="dark"]) .day-dock .ghost-pill.active {
  background: #FFFFFF;
  border-color: var(--line-strong);
  color: var(--muted);
}

.sub-header {
  position: sticky;
  top: 0;
  z-index: 10;
  padding: 48px 16px 14px;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
}
.sub-title { flex: 1; text-align: center; min-width: 0; }
.sub-title.left { text-align: left; }
.sub-title span, .sub-title em { display: block; color: var(--muted); font-size: var(--fs-label); font-style: normal; }
.sub-title strong { display: block; font-size: var(--fs-title-l); }
.view-record .sub-title strong {
  font-size: var(--fs-display-s);
  letter-spacing: 0;
  white-space: nowrap;
}
/* 날짜 이동 버튼은 날짜 문구 옆에 붙여 뒤로가기와 구분한다. 이동 버튼은 보조다. */
.sub-title.date-nav { display: flex; align-items: center; justify-content: center; gap: 6px; }
.date-nav-btn {
  width: 30px;
  height: 30px;
  background: transparent;
  border-color: transparent;
  color: var(--muted);
}
.date-nav-btn svg { width: 13px; height: 13px; }
.off-toggle { position: relative; }
.off-toggle input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
  opacity: 0;
}
.off-toggle input:focus-visible + span {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}
.off-toggle span {
  display: grid;
  place-items: center;
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-full);
  color: var(--muted);
  font-weight: 600;
  font-size: var(--fs-body);
}
.off-toggle input:checked + span { color: var(--red); border-color: var(--red); background: var(--red-bg); }
.off-toggle.is-locked span,
.off-toggle input:disabled + span,
#homeOffToggle:disabled {
  opacity: .5;
  cursor: not-allowed;
}

.record-body, .settings-body { padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.secondary-btn {
  background: var(--panel2);
  border: 1px solid var(--line);
  color: var(--text);
  padding: 0 14px;
  font-size: var(--fs-body-l);
  font-weight: 600;
}
.entry-actions .secondary-btn,
html:not([data-theme="dark"]) .entry-actions .secondary-btn,
body:not([data-theme="dark"]) .entry-actions .secondary-btn {
  flex: 1;
  min-height: 36px;
  background: var(--panel2);
  border: 1px solid var(--line);
  color: var(--muted);
  box-shadow: none;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.entry-actions .secondary-btn svg { display: block; }
.entry-actions .secondary-btn:disabled {
  opacity: .5;
  cursor: not-allowed;
  border-style: solid;
}
.entry-card, .calc-row, .settings-section, .total-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.entry-card { overflow: hidden; }
.entry-head, .entry-row {
  display: grid;
  grid-template-columns: 1.1fr .9fr .9fr 1fr 32px;
  gap: 8px;
  align-items: center;
}
.entry-head { padding: 10px 12px; color: var(--muted); font-size: var(--fs-caption); font-weight: 700; border-bottom: 1px solid var(--line); background: var(--panel2); }
.entry-row { padding: 8px 12px; border-bottom: 1px solid var(--line); }
.household-field {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  color: var(--muted);
  font-size: var(--fs-label);
  font-weight: 500;
}
.entry-row .household-field input { min-height: 44px; }
.entry-row:last-child { border-bottom: 0; }
.entry-row input, .entry-row select, .calc-row input { min-height: 44px; padding: 8px 10px; border-radius: var(--r-sm); font-size: var(--fs-body); font-weight: 600; }
.entry-row select:disabled { opacity: 1; }
.entry-row input[readonly] { color: var(--muted); border-style: dashed; }
.entry-row input[type="number"][readonly] { appearance: textfield; }
.entry-row input[type="number"][readonly]::-webkit-inner-spin-button,
.entry-row input[type="number"][readonly]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.entry-row output, .calc-row output {
  min-height: 42px;
  display: grid;
  place-items: center;
  border-radius: var(--r-md);
  background: var(--panel2);
  color: var(--text);
  font-family: var(--font-numeric);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: var(--fs-body);
  letter-spacing: 0;
  white-space: nowrap;
}
.del-btn { position: relative; width: 30px; height: 30px; border-radius: var(--r-full); background: var(--panel2); color: var(--muted); border: 1px solid var(--line); font-size: var(--fs-display-s); }
.del-btn::before {
  content: "";
  position: absolute;
  inset: -7px;
}
.calc-row {
  display: grid;
  grid-template-columns: auto 1fr auto 1fr 1fr;
  gap: 8px;
  align-items: center;
  padding: 10px 12px;
}
.calc-row > span:first-child { color: var(--text); font-weight: 700; white-space: nowrap; }
.multiply { color: var(--muted); }
.total-card { display: flex; justify-content: space-between; align-items: center; padding: 16px 18px; background: var(--primary-bg); color: var(--text); box-shadow: none; border: 1px solid var(--primary-border); }
.total-card span:not([data-mo-digit]) { font-size: var(--fs-body-l); font-weight: 700; color: var(--gold); }
.total-card strong { font-size: 26px; font-weight: 700; letter-spacing: 0; color: var(--gold); font-family: var(--font-amount); font-variant-numeric: tabular-nums; line-height: 1.05; }
.full-btn { width: 100%; min-height: 44px; border-radius: var(--r-full); font-size: var(--fs-body-l); font-weight: 700; }
.save-morph { position: relative; display: grid; place-items: center; }
.save-morph > * { grid-area: 1 / 1; }
.save-morph-label { transition: opacity .12s ease; }
.save-morph-spin,
.save-morph-check {
  width: 22px;
  height: 22px;
  opacity: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.save-morph.is-busy .save-morph-spin { animation: mo-save-spin .7s linear infinite; }
@keyframes mo-save-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .save-morph.is-busy .save-morph-spin { animation: none; }
}
html:not([data-theme="dark"]) #saveRecord,
body:not([data-theme="dark"]) #saveRecord,
html:not([data-theme="dark"]) #saveProfile,
body:not([data-theme="dark"]) #saveProfile,
html:not([data-theme="dark"]) #parseSchedule,
body:not([data-theme="dark"]) #parseSchedule,
html:not([data-theme="dark"]) #parseCsv,
body:not([data-theme="dark"]) #parseCsv,
html:not([data-theme="dark"]) #saveAdminBundle,
body:not([data-theme="dark"]) #saveAdminBundle,
html:not([data-theme="dark"]) #saveDbConfig,
body:not([data-theme="dark"]) #saveDbConfig,
html:not([data-theme="dark"]) .goal-save-btn,
body:not([data-theme="dark"]) .goal-save-btn,
html:not([data-theme="dark"]) .rate-editor button,
body:not([data-theme="dark"]) .rate-editor button {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--gold-ink);
  box-shadow: var(--shadow-cta);
}

.settings-section { padding: 16px; display: grid; gap: 12px; }
.signature-editor canvas {
  width: 100%;
  max-width: min(100%, 60dvh);
  height: auto;
  aspect-ratio: 3 / 2;
  justify-self: center;
  display: block;
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-md);
  background: #fff;
  touch-action: none;
  cursor: crosshair;
}
html[data-theme="dark"] .inspection-signature-confirm img,
body[data-theme="dark"] .inspection-signature-confirm img {
  filter: invert(.9) hue-rotate(180deg);
}
.signature-actions { display: grid; grid-template-columns: 1fr 1.4fr; gap: 8px; }
.signature-actions .full-btn { min-height: 44px; }
.signature-settings-section { grid-template-columns: 1fr auto; align-items: center; }
.signature-settings-section .hint { margin: 4px 0 0; }
.signature-settings-section .secondary-btn { min-height: 36px; }
#profileSignatureOverlay { padding: 16px; }
.signature-editor.modal-card { width: min(100%, 560px); max-height: calc(100dvh - 32px); overflow-y: auto; display: grid; gap: 14px; padding: 22px; border-radius: var(--r-lg); background: var(--panel); }
.signature-editor-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.signature-editor-heading h2 { margin: 0; font-size: var(--fs-display-s); font-weight: 700; }
.signature-editor .hint { margin: 0; }
#profileSignatureOverlay .secondary-btn,
#openProfileSignature { min-height: 36px; background: var(--panel2); color: var(--text); border: 1px solid var(--line-strong); box-shadow: none; }
.signature-editor .signature-actions { align-items: center; }
#profileSignatureOverlay .signature-actions > button { height: 44px; min-height: 44px; font-size: var(--fs-body-l); }
body:has(#profileSignatureOverlay.visible) { overflow: hidden; }
#profileSignatureOverlay[aria-busy="true"] canvas { pointer-events: none; }
#profileSignatureStatus:empty { display: none; }
@media (max-width: 600px) {
  #profileSignatureOverlay { padding: 0; align-items: flex-end; }
  .signature-editor.modal-card { width: 100%; height: auto; max-height: 85dvh; border-radius: var(--r-xl) var(--r-xl) 0 0; padding: 12px 18px max(20px, env(safe-area-inset-bottom)); }
  .signature-editor::before { content: ""; width: 36px; height: 4px; border-radius: var(--r-full); background: var(--line-strong); justify-self: center; }
  .signature-editor canvas { max-width: min(100%, 60dvh); }
}
.settings-section--slim { padding: 10px 16px; }
.settings-section h2 { margin: 0; font-size: var(--fs-body-l); color: var(--muted); font-weight: 700; letter-spacing: 0; }
.settings-section details summary {
  color: var(--text);
  font-size: var(--fs-body-l);
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.3;
}
.settings-section details { display: grid; gap: 10px; }
.settings-section details summary::marker { color: var(--muted); font-size: .85em; }
.settings-section #ocrStatus + .image-preview + details,
.settings-section #ocrStatus + .image-preview + .hidden + details {
  margin-top: -6px;
}
.settings-section #schedulePreview:empty {
  display: none;
}
.settings-field { display: grid; gap: 8px; }
.settings-field-label,
.settings-field label,
.settings-field > span,
.admin-route-field span {
  color: var(--muted);
  font-size: var(--fs-label);
  font-weight: 500;
}
.settings-field .hint,
.admin-card .hint { margin: 0; }
.readonly-value {
  min-height: 46px;
  display: flex;
  align-items: center;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--panel2);
  color: var(--text);
  font-weight: 700;
}
.profile-settings-section .full-btn { margin-top: 2px; min-height: 44px; font-size: var(--fs-body); font-weight: 700; }

/* freshbag-toggle: 프레시백 방식 선택 */
.freshbag-toggle,
.calendar-route-toggle {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.mode-option {
  position: relative;
  cursor: pointer;
}
.mode-option input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0; height: 0;
}
.mode-option span {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 12px 8px;
  border-radius: var(--r-md);
  border: 1.5px solid var(--line);
  background: var(--panel2);
  font-size: var(--fs-body);
  font-weight: 600;
  color: var(--text);
  text-align: center;
  transition: border-color .15s, background .15s;
  line-height: 1.2;
}
.mode-option small {
  font-size: var(--fs-caption);
  font-weight: 500;
  color: var(--muted);
}
.mode-option input[type="radio"]:checked + span {
  border-color: var(--gold);
  background: var(--primary-bg);
  color: var(--gold);
  font-weight: 700;
}
.mode-option input[type="radio"]:checked + span small {
  color: var(--text);
}

html:not([data-theme="dark"]) .mode-option input[type="radio"]:checked + span small,
body:not([data-theme="dark"]) .mode-option input[type="radio"]:checked + span small {
  color: var(--muted);
}


.rate-editor { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 74px; gap: 8px; }
.rate-editor input {
  min-width: 0;
  font-size: var(--fs-label);
  line-height: 1.2;
  font-weight: 600;
}
.rate-editor button {
  min-height: 44px;
  border-radius: var(--r-sm);
  background: var(--gold);
  color: var(--gold-ink);
  font-size: var(--fs-label);
  font-weight: 700;
}
.rate-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); gap: 8px; }
.rate-list > .daily-card { grid-column: 1 / -1; }
.rate-chip {
  position: relative;
  border-radius: var(--r-md);
  background: var(--panel2);
  border: 1px solid var(--line);
  min-height: 54px;
  padding: 5px 4px 5px 10px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 44px;
  align-content: center;
  align-items: center;
  gap: 0;
  text-align: left;
  color: var(--text);
  cursor: default;
  min-width: 0;
  overflow: hidden;
}
.rate-chip-select {
  width: 100%;
  min-width: 0;
  min-height: 44px;
  display: grid;
  align-content: center;
  gap: 4px;
  padding: 0;
  border-radius: var(--r-sm);
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
  grid-column: 1;
  grid-row: 1;
}
.rate-chip-select:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}
.rate-chip strong {
  display: block;
  font-size: var(--fs-label);
  line-height: 1.2;
  letter-spacing: 0;
  font-family: var(--font-code);
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rate-chip span {
  display: block;
  color: var(--muted);
  font-family: var(--font-numeric);
  font-size: var(--fs-caption);
  line-height: 1.2;
  letter-spacing: 0;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rate-delete {
  position: relative;
  width: 44px;
  height: 44px;
  border-radius: var(--r-full);
  background: transparent;
  border: 0;
  color: var(--muted);
  font-size: var(--fs-body-l);
  font-weight: 600;
  line-height: 1;
  display: grid;
  place-items: center;
  opacity: .78;
  z-index: 1;
  grid-column: 2;
  grid-row: 1;
}
@media (max-width: 430px) {
  .inspection-entry-card { margin: 7px 12px 0; }
  .inspection-body { padding: 14px; }
  .inspection-row { grid-template-columns: minmax(0, 1fr) 44px 44px; padding-left: 11px; }
  .calendar-panel {
    border-radius: 0;
    margin-top: 0;
    background: transparent;
  }
  html:not([data-theme="dark"]) .calendar-panel,
  body:not([data-theme="dark"]) .calendar-panel {
    background: transparent;
  }
  .week-head span {
    font-size: var(--fs-caption);
    padding: 7px 0 8px;
  }
  .calendar-grid {
    grid-auto-rows: 74px;
  }
  .rate-list {
    gap: 6px;
  }
  .rate-editor input {
    font-size: var(--fs-label);
  }
  .rate-chip {
    border-radius: 11px;
    min-height: 54px;
    padding: 5px 4px 5px 8px;
  }
  .rate-delete {
    font-size: var(--fs-body);
  }
}
.settings-row {
  width: 100%;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: var(--r-md);
  background: var(--panel2);
  border: 1px solid var(--line);
  color: var(--text);
  padding: 0 14px;
  font-size: var(--fs-body);
  font-weight: 700;
}
.settings-row + .settings-row { margin-top: 8px; }
.settings-row-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.settings-row-pair .settings-row {
  justify-content: center;
  text-align: center;
}
.settings-row-pair .settings-row + .settings-row { margin-top: 0; }
.settings-row em { font-style: normal; color: var(--muted); font-size: var(--fs-label); }
.danger { color: var(--red); background: var(--red-bg); border-color: var(--red-border); }
.subtle-danger { color: var(--red); background: transparent; border-color: var(--red-border); }
.wide { width: 100%; margin-top: 8px; }
.image-preview img { width: 76px; height: 46px; object-fit: cover; border-radius: var(--r-sm); border: 1px solid var(--line); }
.upload-row .upload-btn {
  position: relative;
  flex: 1 1 auto;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-full);
  background: var(--panel2);
  border: 1px solid var(--line);
  color: var(--text);
  font-weight: 700;
  padding: 0 16px;
  overflow: hidden;
  cursor: pointer;
}
.upload-row .upload-btn input[type="file"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}
.upload-row .secondary-btn { flex: 0 0 auto; min-width: 96px; white-space: nowrap; }
.settings-section .upload-row .upload-btn,
.settings-section .upload-row .secondary-btn {
  background: var(--panel2);
  border-color: var(--line);
  color: var(--text);
  box-shadow: none;
  font-size: var(--fs-body);
  font-weight: 600;
}
.text-example {
  margin: 10px 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--panel2);
  line-height: 1.55;
}
.draft-list { display: grid; gap: 8px; margin: 10px 0; }
.schedule-rule-interview { margin-block: 16px; padding: 14px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--panel2); overflow-wrap: anywhere; }
.schedule-rule-interview > * + * { margin-block-start: 12px; }
.schedule-rule-interview fieldset { min-width: 0; margin: 12px 0; padding: 12px; border: 1px solid var(--line); border-radius: var(--r-md); }
.schedule-rule-interview legend { max-width: 100%; padding-inline: 4px; font-weight: 600; }
.schedule-rule-interview label { display: flex; align-items: flex-start; gap: 10px; min-height: 44px; line-height: 1.5; }
.schedule-rule-interview .settings-field { display: grid; }
.schedule-rule-interview input[type="checkbox"], .schedule-rule-interview input[type="radio"] { flex: 0 0 22px; width: 22px; height: 22px; margin: 2px 0; }
.schedule-rule-interview button, .schedule-rule-interview select, .schedule-rule-interview input:not([type="checkbox"]):not([type="radio"]) { min-height: 44px; max-width: 100%; }
.schedule-rule-interview select { width: 100%; }
.schedule-rule-interview summary { min-height: 44px; padding-block: 10px; cursor: pointer; }
.schedule-rule-interview.schedule-tutorial-active:not([hidden]) {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  justify-content: center;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: rgba(0,0,0,.4);
  overscroll-behavior: contain;
}
.schedule-tutorial-panel {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 480px;
  height: 100%;
  height: 100dvh;
  min-height: 0;
  overflow: hidden;
  background: var(--panel);
  color: var(--text);
  padding-top: env(safe-area-inset-top, 0px);
}
.schedule-tutorial-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex: 0 0 auto;
  min-height: 64px;
  padding: 8px 16px;
}
.schedule-tutorial-toolbar button {
  width: auto;
  min-width: 48px;
  margin: 0;
  padding: 10px;
  border: 0;
  background: transparent;
  box-shadow: none;
  color: var(--text-sub);
  font-size: 15px;
  font-weight: 500;
}
.schedule-tutorial-progress { margin: 0; color: var(--muted); font-size: 13px; font-weight: 600; }
.schedule-tutorial-body {
  flex: 1 1 auto;
  min-height: 0;
  padding: 24px 24px 16px;
  overflow: auto;
  overscroll-behavior: contain;
  scroll-padding-block: 16px;
}
.schedule-tutorial-title {
  margin: 0 0 16px;
  max-width: 15em;
  color: var(--text);
  font-size: 28px;
  font-weight: 750;
  line-height: 1.35;
  letter-spacing: -.04em;
  word-break: keep-all;
  overflow-wrap: anywhere;
  text-wrap: balance;
}
.schedule-tutorial-body > p { margin: 0 0 24px; color: var(--text-sub); font-size: 15px; line-height: 1.6; }
.schedule-tutorial-body .hint { color: var(--text-sub); font-size: 14px; line-height: 1.55; }
.schedule-rule-interview .schedule-tutorial-choice {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  width: 100%;
  min-height: 76px;
  margin: 12px 0 0;
  padding: 20px;
  border: 2px solid transparent;
  border-radius: 18px;
  background: var(--panel2);
  box-shadow: none;
  color: var(--text);
  text-align: start;
  font-size: 18px;
  font-weight: 650;
  line-height: 1.5;
  transition: border-color .16s, background-color .16s;
}
.schedule-rule-interview .schedule-tutorial-choice.is-selected {
  border-color: var(--gold);
  background: var(--primary-bg);
}
.schedule-rule-interview .schedule-tutorial-choice.is-selected::after { content: "✓"; flex: 0 0 auto; color: var(--gold); font-size: 22px; }
.schedule-tutorial-choice small { display: block; margin-top: 4px; color: var(--text-sub); font-size: 14px; font-weight: 400; }
.schedule-tutorial-summary { margin-block: 20px; padding: 18px; border-radius: 18px; background: var(--panel2); }
.schedule-tutorial-summary p { margin: 0; font-size: 15px; line-height: 1.55; }
.schedule-tutorial-summary p + p { margin-top: 12px; }
.schedule-tutorial-body .schedule-tutorial-meaning { margin: 12px 0; color: var(--text-sub); font-size: 14px; line-height: 1.7; white-space: pre-line; }
.schedule-tutorial-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 15px; line-height: 1.5; }
.schedule-rule-interview .schedule-tutorial-inline { flex: 0 0 auto; width: auto; min-height: 44px; margin: 0; padding: 10px 4px; border: 0; background: transparent; box-shadow: none; color: var(--gold); font-size: 14px; font-weight: 600; }
.schedule-tutorial-body details { margin-block: 12px; color: var(--text-sub); font-size: 14px; }
.schedule-tutorial-body details p { font-size: 14px; line-height: 1.6; }
.schedule-tutorial-body summary { font-size: 14px; font-weight: 600; }
.schedule-tutorial-options { margin-top: 20px; }
.schedule-tutorial-options label { align-items: center; min-height: 52px; margin: 4px 0; font-size: 15px; }
.schedule-tutorial-body > label { align-items: center; color: var(--text-sub); font-size: 15px; }
.schedule-tutorial-options input[type="checkbox"] { accent-color: var(--gold); }
.schedule-tutorial-feedback { margin: 0; color: var(--text-sub); font-size: 14px; line-height: 1.5; }
.schedule-tutorial-feedback:empty { display: none; }
.schedule-tutorial-actions {
  flex: 0 0 auto;
  display: grid;
  gap: 8px;
  padding: 16px 24px calc(12px + env(safe-area-inset-bottom, 0px));
  background: var(--panel);
}
.schedule-rule-interview .schedule-tutorial-actions button {
  width: 100%;
  min-height: 52px;
  margin: 0;
  border: 0;
  border-radius: 14px;
  box-shadow: none;
  background: transparent;
  color: var(--text-sub);
  font-size: 16px;
  font-weight: 600;
}
.schedule-rule-interview .schedule-tutorial-actions button:first-child { min-height: 56px; background: var(--gold); color: var(--gold-ink); }
.schedule-rule-interview .schedule-tutorial-actions button:first-child:disabled { background: var(--panel3); color: var(--muted); }
.schedule-tutorial-panel :is(button, input, summary):focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  .schedule-rule-interview .schedule-tutorial-choice { transition: none; }
}
.draft-card { background: var(--panel2); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 10px; }
.draft-card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.draft-chip { display: inline-flex; gap: 6px; align-items: center; margin: 3px; padding: 5px 9px; border-radius: var(--r-full); background: var(--panel3); font-size: var(--fs-label); font-weight: 700; letter-spacing: 0; }
.draft-chip button, .draft-add-btn { color: var(--muted); background: transparent; font-weight: 600; }
.draft-chip button { position: relative; }
.draft-chip button::before {
  content: "";
  position: absolute;
  width: 44px;
  height: 44px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.draft-add-row { display: inline-flex; align-items: center; gap: 6px; margin: 3px; }
.draft-add-input { width: 78px; min-height: 44px; padding: 5px 8px; border-radius: var(--r-full); font-size: var(--fs-label); font-weight: 600; text-transform: uppercase; }
.draft-add-btn { min-width: 44px; min-height: 44px; padding: 5px 10px; border: 1px solid var(--line); border-radius: var(--r-full); }
.draft-off-btn { min-width: 44px; min-height: 44px; border-radius: var(--r-full); background: transparent; border: 1px solid var(--line); color: var(--muted); padding: 5px 12px; font-weight: 600; letter-spacing: 0; }
.draft-off-btn.active { color: var(--red); border-color: var(--red); }
.admin-list { display: grid; gap: 8px; }
.admin-card { background: var(--panel2); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 12px; display: grid; gap: 10px; }
.admin-card.is-delete-request {
  border-color: rgba(220,53,69,.34);
  background: rgba(220,53,69,.07);
}
.admin-profile-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
}
.admin-profile-head > div {
  display: grid;
  gap: 3px;
  min-width: 0;
}
.admin-profile-head strong {
  color: var(--text);
  font-size: var(--fs-title-m);
  font-weight: 700;
}
.admin-status-pill {
  flex-shrink: 0;
  padding: 4px 9px;
  border-radius: var(--r-full);
  background: var(--primary-bg);
  border: 1px solid var(--primary-border);
  color: var(--gold);
  font-size: var(--fs-caption);
  font-weight: 700;
}
.admin-card.is-delete-request .admin-status-pill {
  background: rgba(220,53,69,.12);
  border-color: rgba(220,53,69,.35);
  color: var(--red);
}
.admin-card-row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
.admin-route-field { display: grid; gap: 6px; }
.admin-beta-option { display: flex; align-items: center; gap: 10px; min-height: 44px; cursor: pointer; }
.admin-beta-option input { width: 20px; height: 20px; min-height: 20px; flex: none; accent-color: var(--gold); }
.admin-beta-option span { font-size: var(--fs-body-l); }
.admin-beta-option small { display: block; color: var(--muted); font-size: var(--fs-label); }
.inline-check { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; color: var(--muted); font-size: var(--fs-label); font-weight: 700; }
.rs-detail-routes { display: flex; flex-wrap: wrap; gap: 5px 10px; color: var(--muted); font-size: var(--fs-label); }

/* Admin-only per-screen usage summary card (화면별 사용 현황). */
.usage-summary-window { display: flex; gap: 8px; margin: 0 0 10px; }
.usage-window-btn {
  flex: 1;
  min-height: 40px;
  border: 1px solid var(--line);
  border-radius: var(--r-full);
  background: var(--panel2);
  color: var(--muted);
  font-size: var(--fs-label);
  font-weight: 700;
}
.usage-window-btn.is-on { background: var(--primary-bg); border-color: var(--primary-border); color: var(--gold); }
.admin-usage-summary { display: grid; gap: 6px; }
.usage-summary-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--panel2);
}
.usage-summary-label { color: var(--text); font-size: var(--fs-body-l); font-weight: 600; }
.usage-summary-counts { color: var(--muted); font-size: var(--fs-label); font-weight: 600; }
.admin-usage-error { color: var(--red); }

.stats-tabs { display: grid; grid-template-columns: repeat(auto-fit, minmax(62px, 1fr)); gap: 7px; }
.stats-tab { min-height: 44px; border-radius: var(--r-full); background: var(--panel2); border: 1px solid var(--line); color: var(--muted); font-weight: 700; }
.stats-panel { display: none; }
.stats-panel.active { display: block; }
/* Monthly goal settings: one labelled amount field and save action. */
.goal-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 8px;
}
.goal-label {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--muted);
  font-size: var(--fs-label);
  font-weight: 500;
}
.goal-input {
  width: 100%;
  min-width: 0;
  height: 44px;
  padding: 0 11px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--panel2);
  color: var(--text);
  font-family: var(--font-numeric);
  font-size: var(--fs-body-l);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.goal-unit { color: var(--muted); font-size: var(--fs-label); font-weight: 500; }
.goal-save-btn {
  min-height: 44px;
  padding: 0 18px;
  border-radius: var(--r-full);
  background: var(--gold);
  color: var(--primary-dark);
  font-size: var(--fs-body-l);
  font-weight: 700;
  white-space: nowrap;
}
.stats-list, .daily-list { display: grid; gap: 8px; }
.stats-list > div, .daily-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 14px;
}
.stats-list > div { display: flex; justify-content: space-between; align-items: center; }
.stats-list span, .daily-card span { color: var(--muted); font-size: var(--fs-body-l); font-weight: 500; }
.stats-list strong { font-family: var(--font-numeric); font-size: var(--fs-title); font-weight: 700; color: var(--text); }
.daily-card button { width: 100%; text-align: left; background: transparent; color: var(--text); padding: 0; }
.stat-day-card {
  padding: 0;
  overflow: hidden;
}
.stat-day-card button {
  padding: 12px;
  display: grid;
  gap: 10px;
}
.daily-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.daily-top > div {
  display: grid;
  gap: 3px;
  min-width: 0;
}
.daily-top strong:first-child { font-size: var(--fs-title); }
.daily-top > strong:last-child {
  color: var(--gold);
  font-family: var(--font-amount);
  font-size: var(--fs-title-l);
  font-weight: 700;
  white-space: nowrap;
}
.daily-top span {
  font-size: var(--fs-label);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.daily-metrics {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.daily-metrics span {
  padding: 4px 8px;
  border: 1px solid var(--line);
  border-radius: var(--r-full);
  background: var(--panel2);
  color: var(--muted);
  font-size: var(--fs-caption);
  font-weight: 800;
}
.daily-metrics span:first-child {
  background: var(--primary-bg);
  border-color: var(--primary-border);
  color: var(--gold);
}
.daily-detail { margin: 0 14px 14px; padding-top: 10px; border-top: 1px dashed var(--line); color: var(--muted); font-size: var(--fs-body); display: grid; gap: 6px; }
.daily-detail .dd-row span { font-size: var(--fs-label); }
.daily-detail .dd-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.daily-detail .dd-row strong { color: var(--text); font-weight: 800; }
.daily-detail .dd-row.dd-total { margin-top: 4px; padding-top: 8px; border-top: 1px solid var(--line); }
.daily-detail .dd-row.dd-total strong { color: var(--gold); font-family: var(--font-amount); font-size: var(--fs-title); font-weight: 700; line-height: 1.08; }

/* === stats summary === */
.stats-summary-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px;
  display: grid;
  gap: 12px;
  box-shadow: var(--shadow-card);
}
.stats-summary-card .ssc-label {
  color: var(--muted);
  font-size: var(--fs-label);
  font-weight: 700;
}
.stats-summary-card .ssc-range {
  color: var(--muted);
  font-size: var(--fs-label);
  font-weight: 500;
}
.stats-summary-card .ssc-rows { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.stats-summary-card .ssc-rows > div {
  background: var(--panel2);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 10px 11px;
  display: grid;
  gap: 6px;
  min-width: 0;
}
.stats-summary-card .ssc-rows > div.ssc-main {
  grid-column: 1 / -1;
  background: var(--primary-bg);
  border-color: var(--primary-border);
}
.stats-summary-card .ssc-rows span {
  color: var(--muted);
  font-size: var(--fs-label);
  font-weight: 700;
  white-space: nowrap;
}
.stats-summary-card .ssc-rows strong {
  color: var(--gold);
  font-family: var(--font-amount);
  font-size: var(--fs-display-s);
  font-weight: 720;
  letter-spacing: 0;
  line-height: 1.05;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.stats-summary-card .ssc-rows > div.ssc-main strong {
  font-size: 27px;
}
.ssc-meter { display: grid; gap: 7px; }
.ssc-meter-bar {
  height: 6px;
  background: var(--panel3);
  border-radius: var(--r-full);
  overflow: hidden;
}
.ssc-meter-bar > span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--gold), var(--gold2));
  border-radius: var(--r-full);
  transition: width .25s ease;
}
.ssc-meter-foot {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  color: var(--muted);
  font-size: var(--fs-caption);
  font-weight: 600;
}
.ssc-meter-foot span:first-child { color: var(--gold); }

/* === stats-range-tabs === */
.stats-range-tabs {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 7px;
}
.stats-range-tabs > button {
  min-height: 44px;
  padding: 0 4px;
  border-radius: var(--r-full);
  background: transparent;
  border: 1px solid var(--line);
  color: var(--muted);
  font-size: var(--fs-label);
  font-weight: 600;
  white-space: nowrap;
}
.stats-tabs .stats-tab { font-size: var(--fs-body); font-weight: 600; }
.stats-range-custom[hidden] { display: none; }
.stats-range-custom {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 8px 10px;
}
.stats-range-custom input[type="date"] {
  flex: 1 1 130px;
  min-width: 0;
  background: var(--panel2);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 6px 8px;
  color: var(--text);
  font-size: var(--fs-body);
}
.stats-sub .sub-title span,
.stats-sub .sub-title em {
  color: var(--muted);
  font-size: var(--fs-label);
  font-weight: 500;
}
.stats-sub .sub-title strong {
  font-size: var(--fs-title-l);
  font-weight: 700;
  letter-spacing: 0;
}
html:not([data-theme="dark"]) .summary-card,
body:not([data-theme="dark"]) .summary-card {
  border-bottom: 0;
}
html:not([data-theme="dark"]) .stats-sub .round-btn,
body:not([data-theme="dark"]) .stats-sub .round-btn,
html:not([data-theme="dark"]) .view-record .round-btn,
body:not([data-theme="dark"]) .view-record .round-btn {
  background: #FFFFFF;
  border-color: var(--line-strong);
  color: var(--gold);
  box-shadow: none;
}
html:not([data-theme="dark"]) .view-record .date-nav-btn,
body:not([data-theme="dark"]) .view-record .date-nav-btn {
  background: transparent;
  border-color: transparent;
  color: var(--muted);
  box-shadow: none;
}
html:not([data-theme="dark"]) #logoutBtn,
body:not([data-theme="dark"]) #logoutBtn {
  background: var(--panel3);
  border-color: var(--line-strong);
  color: var(--muted);
  box-shadow: none;
}
.sub-title.left .sync-ok {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--green);
  font-size: var(--fs-label);
  font-weight: 600;
}
.sub-title.left .sync-ok::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: var(--r-full);
  background: currentColor;
  flex-shrink: 0;
}
html:not([data-theme="dark"]) .settings-section .upload-row .upload-btn,
body:not([data-theme="dark"]) .settings-section .upload-row .upload-btn,
html:not([data-theme="dark"]) .settings-section .upload-row .secondary-btn,
body:not([data-theme="dark"]) .settings-section .upload-row .secondary-btn {
  background: #F7F7F8;
  border-color: var(--line-strong);
  color: var(--muted);
  box-shadow: none;
}
.stats-range-custom span { color: var(--muted); font-size: var(--fs-label); }
.stats-range-custom > button {
  flex-shrink: 0;
  min-height: 44px;
  padding: 7px 14px;
  border-radius: var(--r-full);
  background: var(--gold);
  color: var(--primary-dark);
  font-weight: 700;
  font-size: var(--fs-label);
}

/* === chart card === */
.stats-chart-card {
  position: relative;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 12px 10px 8px;
  box-shadow: var(--shadow-card);
}
.stats-chart-card canvas { display: block; width: 100%; }
.stats-chart-toggle {
  display: inline-flex;
  gap: 4px;
  margin: 0 0 8px;
  padding: 3px;
  background: var(--panel2);
  border: 1px solid var(--line);
  border-radius: var(--r-full);
}
.stats-chart-toggle button {
  min-height: 44px;
  padding: 5px 16px;
  border: 0;
  border-radius: var(--r-full);
  background: transparent;
  color: var(--muted);
  font-size: var(--fs-label);
  font-weight: 700;
  cursor: pointer;
}
/* === stat cards (월간 통계 그리드) === */
.stat-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.stat-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 12px 13px;
  display: grid;
  gap: 6px;
  min-width: 0;
}
.stat-card span { color: var(--muted); font-size: var(--fs-label); font-weight: 600; white-space: nowrap; }
.stat-card strong {
  font-family: var(--font-numeric);
  font-size: var(--fs-title-l);
  font-weight: 800;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.stat-card.wide { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.stat-card.wide strong { font-size: var(--fs-body-l); }
/* === route stats (구역별 통계) === */
.route-stats { display: grid; gap: 8px; }
.route-stat-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 11px 13px;
  display: grid;
  gap: 8px;
}
.route-stat-card .rs-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.route-stat-card .rs-name { font-size: var(--fs-body-l); font-weight: 700; color: var(--text); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.route-stat-card .rs-amount { font-family: var(--font-amount); font-size: var(--fs-title); font-weight: 800; color: var(--gold); white-space: nowrap; }
.route-stat-card .rs-meta { display: flex; flex-wrap: wrap; gap: 4px 12px; color: var(--muted); font-size: var(--fs-label); font-weight: 600; }
.route-stat-card .rs-bar { height: 6px; border-radius: var(--r-full); background: var(--panel3); overflow: hidden; }
.route-stat-card .rs-bar > span { display: block; height: 100%; border-radius: var(--r-full); background: linear-gradient(90deg, var(--gold), var(--gold2)); }
.route-stats .rs-empty {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 18px;
  text-align: center;
  color: var(--muted);
  font-size: var(--fs-body);
}
.stats-chart-hint {
  margin: 6px 0 0;
  text-align: center;
  font-size: var(--fs-caption);
  color: var(--muted);
}
.stats-chart-tooltip {
  position: absolute;
  pointer-events: none;
  background: var(--panel);
  border: 1px solid var(--line-strong);
  color: var(--text);
  border-radius: var(--r-sm);
  padding: 8px 10px;
  font-size: var(--fs-label);
  display: grid;
  gap: 2px;
  min-width: 130px;
  box-shadow: 0 6px 16px rgba(0,0,0,.18);
}
.stats-chart-tooltip[hidden] { display: none; }
.stats-chart-tooltip strong { color: var(--gold); font-size: var(--fs-label); }
.stats-chart-tooltip > span { display: block; margin: 2px 0 5px; color: var(--muted); font-size: var(--fs-caption); }
.stats-chart-tooltip b { color: var(--text); font-weight: 700; }

/* === revenue list (체크박스 매출 항목) === */
.revenue-list { display: grid; gap: 10px; }
.revenue-list .rev-section {
  display: grid;
  gap: 7px;
}
.revenue-list .rev-section-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 4px 8px;
  padding: 0 2px;
}
.revenue-list .rev-section-head span {
  color: var(--text);
  font-size: var(--fs-body);
  font-weight: 700;
}
.revenue-list .rev-section-head em {
  grid-column: 1;
  color: var(--muted);
  font-size: var(--fs-caption);
  font-style: normal;
  font-weight: 600;
}
.revenue-list .rev-section-head strong {
  grid-row: 1 / span 2;
  grid-column: 2;
  color: var(--gold);
  font-size: var(--fs-body-l);
  font-weight: 700;
  white-space: nowrap;
}
.revenue-list .rev-section-rows {
  display: grid;
  gap: 6px;
}
.revenue-list .rev-row {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--panel2);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 10px 11px;
  cursor: pointer;
}
.revenue-list .rev-row.is-off {
  opacity: .55;
}
.revenue-list .rev-row input[type="checkbox"] {
  width: 17px;
  height: 17px;
  accent-color: var(--gold);
  flex-shrink: 0;
}
.revenue-list .rev-label { flex: 1; min-width: 0; font-weight: 700; color: var(--text); font-size: var(--fs-body); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.revenue-list .rev-meta { color: var(--muted); font-size: var(--fs-caption); flex-shrink: 0; }
.revenue-list .rev-amount { color: var(--gold); font-weight: 700; font-size: var(--fs-body-l); flex-shrink: 0; white-space: nowrap; }
.revenue-list .rev-sum {
  background: var(--primary-bg);
  border-color: var(--primary-border);
  margin-top: 4px;
  cursor: default;
}
.revenue-list .rev-empty {
  color: var(--muted);
  font-size: var(--fs-body);
  text-align: center;
  padding: 16px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}

.round-btn.is-disabled { opacity: .4; pointer-events: none; }

@media (max-width: 480px) {
  #selectedDateTitle { font-size: var(--fs-body-l); font-weight: 600; white-space: nowrap; }
  .stats-summary-card { padding: 14px; }
  .stats-summary-card .ssc-rows { gap: 7px; }
  .stats-summary-card .ssc-rows > div { padding: 9px 10px; }
  .stats-summary-card .ssc-rows strong { font-size: var(--fs-title-l); }
  .stats-summary-card .ssc-rows > div.ssc-main strong { font-size: var(--fs-headline); }
  .stats-range-tabs { gap: 5px; }
  .stats-range-tabs > button { min-height: 44px; font-size: var(--fs-caption); }
  .revenue-list .rev-label { font-size: var(--fs-body); }
  .revenue-list .rev-amount { font-size: var(--fs-body-l); }
}

/* === settlement report === */
.stats-report-body {
  gap: 16px;
  padding: 14px;
}
.stats-sub .sub-title {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: baseline;
  column-gap: 8px;
}
.stats-sub .sub-title strong { grid-column: 1 / -1; }
.stats-sub .sub-title span,
.stats-sub .sub-title em {
  display: inline;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.stats-sub .sub-title em { text-align: right; }

.stats-report-hero {
  position: relative;
  overflow: hidden;
  gap: 14px;
  padding: 18px;
  border-radius: var(--r-lg);
  background:
    radial-gradient(circle at 100% 0, var(--primary-bg), transparent 48%),
    var(--panel);
}
.stats-hero-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.stats-report-hero .ssc-label {
  color: var(--text-sub);
  font-size: var(--fs-body);
  font-weight: 800;
}
.stats-report-hero .ssc-range {
  min-width: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: var(--fs-caption);
  font-weight: 600;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.stats-report-total {
  color: var(--text);
  font-family: var(--font-amount);
  font-size: clamp(31px, 9vw, 40px);
  font-weight: 820;
  letter-spacing: -.035em;
  line-height: 1;
}
.stats-compare {
  display: grid;
  gap: 5px;
  padding: 13px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--panel2);
}
.stats-compare > span {
  color: var(--muted);
  font-size: var(--fs-caption);
  font-weight: 700;
}
.stats-compare > strong {
  color: var(--text);
  font-size: var(--fs-title-m);
  font-weight: 700;
  line-height: 1.3;
}
.stats-compare > small {
  color: var(--muted);
  font-size: var(--fs-caption);
  line-height: 1.45;
}
.stats-compare.is-positive > strong { color: var(--green); }
.stats-compare.is-negative > strong { color: var(--red); }
.stats-compare.is-neutral > strong { color: var(--text-sub); }
.stats-compare[hidden],
.stats-chart-toggle[hidden],
.stats-chart-card canvas[hidden],
.daily-detail[hidden],
.stats-sub #statsPrevMonth[hidden],
.stats-sub #statsNextMonth[hidden] { display: none !important; }
.stats-hero-support {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
}
.stats-hero-support > div {
  min-width: 0;
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: var(--panel2);
}
.stats-hero-support dt {
  color: var(--muted);
  font-size: var(--fs-caption);
  font-weight: 700;
}
.stats-hero-support dd {
  margin: 5px 0 0;
  overflow: hidden;
  color: var(--text);
  font-family: var(--font-amount);
  font-size: var(--fs-title-l);
  font-weight: 780;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.stats-report-hero .ssc-meter[hidden] { display: none; }

.stats-range-control {
  display: grid;
  gap: 9px;
}
.stats-range-heading,
.stats-report-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.stats-range-heading { min-height: 44px; }
.stats-range-heading h2,
.stats-report-section-head h2 {
  margin: 0;
  color: var(--text);
  font-size: var(--fs-title-l);
  font-weight: 700;
  letter-spacing: -.015em;
}
.stats-custom-toggle {
  min-height: 44px;
  padding: 0 13px;
  border: 1px solid var(--line);
  border-radius: var(--r-full);
  background: transparent;
  color: var(--muted);
  font-size: var(--fs-label);
  font-weight: 700;
}
.stats-custom-toggle[aria-expanded="true"] {
  border-color: var(--primary-border);
  background: var(--primary-bg);
  color: var(--gold);
}
.stats-range-tabs {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
}
.stats-range-tabs > button {
  min-width: 0;
  min-height: 44px;
  padding: 0 6px;
  font-size: var(--fs-label);
  font-weight: 700;
}
.stats-range-custom {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto;
  align-items: end;
  gap: 8px;
  padding: 12px;
  border-radius: var(--r-md);
}
.stats-range-custom label {
  display: grid;
  gap: 5px;
  min-width: 0;
}
.stats-range-custom label > span {
  color: var(--muted);
  font-size: var(--fs-caption);
  font-weight: 700;
}
.stats-range-custom input[type="date"] {
  width: 100%;
  min-height: 44px;
  padding: 0 9px;
  box-sizing: border-box;
}
.stats-range-separator {
  align-self: center;
  margin-top: 18px;
}
.stats-range-custom > button {
  min-height: 44px;
  padding-inline: 14px;
}

.stats-report-section {
  display: grid;
  gap: 13px;
  padding: 15px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--panel);
  box-shadow: var(--shadow-card);
}
.stats-chart-card { position: relative; }
.stats-report-section-head > div:first-child {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.stats-report-section-head > div:first-child > span {
  color: var(--muted);
  font-size: var(--fs-caption);
  font-weight: 700;
}
.stats-section-total {
  color: var(--gold);
  font-family: var(--font-amount);
  font-size: var(--fs-title);
  font-weight: 800;
  white-space: nowrap;
}
.stats-chart-toggle {
  flex-shrink: 0;
  margin: 0;
}
.stats-chart-toggle button {
  min-width: 52px;
  min-height: 44px;
  padding-inline: 12px;
}
.stats-chart-card canvas {
  max-width: 100%;
  border-radius: var(--r-sm);
}
.stats-chart-card canvas:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 3px;
}
.stats-empty-state {
  display: grid;
  justify-items: center;
  gap: 7px;
  padding: 24px 16px;
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-md);
  background: var(--panel2);
  text-align: center;
}
.stats-empty-state[hidden] { display: none; }
.stats-empty-state strong { color: var(--text); font-size: var(--fs-title); }
.stats-empty-state p {
  margin: 0;
  color: var(--muted);
  font-size: var(--fs-label);
  line-height: 1.5;
}
.stats-empty-state .secondary-btn {
  min-height: 44px;
  margin-top: 5px;
  padding-inline: 16px;
}

.stats-report-section .route-stat-card,
.stats-report-section .daily-card,
.stats-report-section .revenue-list .rev-row {
  background: var(--panel2);
}
.stats-report-section .revenue-list .rev-row {
  cursor: default;
}
.stats-report-section .revenue-list .rev-row.is-off { opacity: 1; }
.stats-report-section .revenue-list .rev-row input[type="checkbox"] { display: none; }
.stats-report-section .revenue-list .rev-sum {
  border-color: var(--primary-border);
  background: var(--primary-bg);
}
.stats-report-section .revenue-list .rev-section-head strong {
  color: var(--gold);
  font-family: var(--font-amount);
}
.stats-report-section .route-stats,
.stats-report-section .daily-list,
.stats-report-section .revenue-list {
  gap: 9px;
}
.stats-report-section .rs-empty,
.stats-report-section .rev-empty {
  border-style: dashed;
  background: var(--panel2);
}
.stats-legacy-fields[hidden] { display: none; }

@media (max-width: 390px) {
  .stats-report-body { padding-inline: 12px; }
  .stats-report-hero { padding: 16px; }
  .stats-report-total { font-size: 31px; }
  .stats-hero-support dd { font-size: var(--fs-title-m); }
  .stats-range-tabs { gap: 5px; }
  .stats-range-tabs > button { padding-inline: 3px; font-size: var(--fs-caption); }
  .stats-range-custom { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stats-range-custom .stats-range-separator { display: none; }
  .stats-range-custom > button { grid-column: 1 / -1; }
  .stats-report-section { padding: 14px 12px; }
  .stats-chart-toggle button { min-width: 48px; padding-inline: 9px; }
}

.bottom-nav {
  position: fixed;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: min(100%, 480px);
  height: calc(var(--nav-h) + var(--safe-b));
  padding-bottom: var(--safe-b);
  display: flex;
  background: var(--panel);
  border-top: 1px solid var(--line);
  z-index: 20;
}
.nav-tab {
  flex: 1 1 0;
  min-width: 0;
  background: transparent;
  color: var(--muted);
  font-weight: 500;
  font-size: var(--fs-caption);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 0;
}
.nav-tab[hidden] { display: none; }
.nav-tab span { white-space: nowrap; }
.nav-tab svg { width: 22px; height: 22px; display: block; }
.nav-tab.active { color: var(--gold); font-weight: 700; }

.measurement-bridge-body { max-width: 680px; margin-inline: auto; }
.measurement-workday-card { gap: 16px; }
.measurement-route-summary { display: grid; gap: 5px; }
.measurement-route-summary > span,
.measurement-route-summary > small { color: var(--muted); font-size: var(--fs-label); }
.measurement-route-summary > strong { color: var(--gold); font-family: var(--font-code); font-size: var(--fs-headline); font-weight: 700; letter-spacing: -.3px; }
.measurement-route-summary > strong[data-empty] { color: var(--text); font-family: var(--font-ui); font-size: var(--fs-title-l); letter-spacing: 0; }
.measurement-app-hint { min-height: 18px; margin: -7px 0 0; color: var(--muted); font-size: var(--fs-label); line-height: 1.45; }
.measurement-app-fallback { display: grid; min-height: 44px; place-items: center; font-size: var(--fs-body-l); font-weight: 600; text-decoration: none; }
.measurement-app-fallback[hidden] { display: none; }
.measurement-app-fallback:active { background: var(--button-secondary); }
.measurement-guide-trigger {
  width: 100%;
  min-height: 44px;
  margin-top: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-full);
  background: var(--panel2);
  color: var(--text);
  font-size: var(--fs-body-l);
  font-weight: 600;
}
.measurement-guide-trigger svg { width: 19px; height: 19px; color: var(--gold); }
.measurement-guide-trigger:active { opacity: .72; }
.measurement-guide-actions { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.measurement-guide-actions > * { min-width: 0; }
.measurement-guide-actions .measurement-guide-trigger { margin-top: 10px; }
.measurement-guide-link {
  min-height: 44px;
  margin-top: 10px;
  padding: 8px 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-full);
  background: var(--panel2);
  color: var(--text);
  font-size: var(--fs-body-l);
  font-weight: 600;
  text-decoration: none;
}
.measurement-guide-link small { color: var(--muted); font-size: var(--fs-caption); font-weight: 600; }
.measurement-guide-link svg { width: 17px; height: 17px; color: var(--gold); flex: 0 0 auto; }
.measurement-guide-link:active { opacity: .72; }
.settings-guide-row { text-decoration: none; }
.settings-guide-row em { font-style: normal; font-size: var(--fs-label); white-space: nowrap; }
.settings-guide-row strong { display: block; color: var(--text); font-size: var(--fs-body-l); }
.settings-guide-row small { display: block; margin-top: 3px; color: var(--muted); font-size: var(--fs-label); font-weight: 500; }
.measurement-guide-card {
  width: min(100%, 520px);
  max-height: calc(100dvh - 36px);
  overflow-y: auto;
  overscroll-behavior: contain;
  display: grid;
  gap: 18px;
  padding: 22px;
}
.measurement-guide-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.measurement-guide-heading h2 { margin: 6px 0 0; font-size: 22px; font-weight: 700; letter-spacing: -.02em; }
.measurement-guide-badge { color: var(--gold); font-size: var(--fs-label); font-weight: 600; }
.measurement-guide-close {
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  margin: -10px -10px 0 0;
  border: 0;
  border-radius: var(--r-full);
  background: transparent;
  color: var(--muted);
}
.measurement-guide-close svg { width: 22px; height: 22px; }
.measurement-guide-close:active { background: var(--panel2); }
.measurement-guide-intro { margin: -10px 0 0; color: var(--muted); font-size: var(--fs-body); line-height: 1.5; }
.measurement-guide-section { display: grid; gap: 10px; padding-top: 16px; border-top: 1px solid var(--line); }
.measurement-guide-section h3 { margin: 0; display: flex; align-items: center; gap: 9px; font-size: var(--fs-title); font-weight: 700; }
.measurement-guide-section h3 > span {
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: var(--r-full);
  background: var(--primary-bg);
  color: var(--gold);
  font-family: var(--font-code);
  font-size: var(--fs-label);
  font-weight: 700;
}
.measurement-guide-section ol { margin: 0; padding-left: 24px; color: var(--muted); font-size: var(--fs-body); font-weight: 500; line-height: 1.55; }
.measurement-guide-section li { padding-left: 2px; }
.measurement-guide-section li + li { margin-top: 7px; }
.measurement-guide-section strong { color: var(--text); font-weight: 600; }
.measurement-download { display: inline-grid; place-items: center; text-decoration: none; }
.measurement-release-link { justify-self: center; color: var(--muted); font-size: var(--fs-label); font-weight: 500; text-underline-offset: 3px; }
body:has(#measurementGuideOverlay.visible) { overflow: hidden; }
@media (max-width: 600px) {
  .measurement-guide-overlay { padding: 0; align-items: flex-end; }
  .measurement-guide-card { width: 100%; max-height: 88dvh; border-radius: var(--r-xl) var(--r-xl) 0 0; padding: 14px 18px max(20px, env(safe-area-inset-bottom)); }
  .measurement-guide-card::before { content: ""; width: 36px; height: 4px; margin-bottom: -4px; border-radius: var(--r-full); background: var(--line-strong); justify-self: center; }
}

/* === theme toggle === */
.theme-toggle { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.theme-toggle button {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  height: 44px; border-radius: var(--r-md);
  background: var(--panel2);
  border: 1px solid var(--line);
  color: var(--muted);
  font-weight: 700;
  font-size: var(--fs-body);
}
.theme-toggle svg { width: 18px; height: 18px; display: block; }
.app-version {
  margin: 4px 0 18px;
  color: var(--soft);
  font-size: var(--fs-label);
  font-weight: 600;
  text-align: center;
}

.overlay {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: rgba(15,18,25,.45);
  z-index: 50;
}
.overlay.visible { display: flex; }
.modal-card {
  width: min(100%, 420px);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 20px;
}
.modal-card h2 { margin: 0 0 6px; }
.sales-override-card {
  width: min(100%, 560px);
  max-height: calc(100dvh - 36px);
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
}
.sales-override-card .hint { margin: 0 0 14px; line-height: 1.5; }
.sales-override-rows { display: grid; gap: 10px; }
.sales-override-row {
  display: grid;
  grid-template-columns: 1.05fr .9fr .9fr 44px;
  gap: 8px;
  align-items: end;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--panel2);
}
.sales-override-row label { min-width: 0; margin: 0; }
.sales-override-row label span { display: block; margin: 0 0 5px; color: var(--muted); font-size: var(--fs-caption); }
.sales-override-row input { width: 100%; min-height: 44px; padding: 8px; }
.sales-override-row output {
  grid-column: 1 / 4;
  min-height: 44px;
  display: grid;
  place-items: center;
  border-radius: var(--r-sm);
  background: var(--primary-bg);
  color: var(--gold);
  font-weight: 800;
}
.sales-override-delete {
  grid-column: 4;
  grid-row: 1 / 3;
  align-self: stretch;
  min-width: 44px;
  min-height: 44px;
  border: 1px solid var(--red);
  border-radius: var(--r-md);
  background: var(--red-bg);
  color: var(--red);
  font-size: 22px;
}
.sales-override-card > .secondary-btn.wide { min-height: 44px; margin-top: 10px; }
.sales-override-reason { margin-top: 14px; }
.sales-override-reason span { display: block; margin-bottom: 6px; }
.sales-override-reason small { color: var(--soft); font-weight: 600; }
.sales-override-reason textarea { width: 100%; min-height: 72px; }
.sales-override-status { min-height: 20px; margin: 10px 0 0; color: var(--muted); font-size: var(--fs-label); line-height: 1.45; }
.sales-override-status.warning { color: var(--warn); }
.sales-override-status.error { color: var(--red); font-weight: 700; }
.sales-override-card .two-buttons { margin-top: 12px; }
.sales-override-card .two-buttons button { min-height: 48px; }
.sales-override-empty { margin: 0; padding: 18px; border: 1px dashed var(--line-strong); border-radius: var(--r-md); color: var(--muted); text-align: center; }
.auth-card, .setup-card, .pending-card {
  width: min(calc(100% - 18px), 390px);
  border-radius: var(--r-xl);
  padding: 24px 20px 22px;
  box-shadow: 0 18px 58px rgba(0,0,0,.18);
}
.auth-card h2, .setup-card h2, .pending-card h2 {
  font-size: var(--fs-headline);
  line-height: 1.15;
  letter-spacing: 0;
  margin-bottom: 10px;
}
.auth-card .hint, .setup-card .hint, .pending-card .hint {
  margin: 0 0 20px;
  line-height: 1.45;
}
.auth-fields {
  display: grid;
  gap: 9px;
}
.auth-signup-fields {
  display: grid;
  gap: 9px;
}
.auth-fields label,
.setup-card label {
  margin: 0;
  font-size: var(--fs-label);
  line-height: 1;
}
.auth-fields input,
.auth-fields select,
.setup-card input {
  height: 48px;
  border-radius: var(--r-md);
  padding: 0 14px;
  font-size: var(--fs-title);
}
.auth-card .two-buttons {
  display: grid;
  grid-template-columns: 1.35fr .9fr;
  gap: 10px;
  margin-top: 18px;
}
.auth-card .full-btn,
.auth-card .secondary-btn,
.setup-card .full-btn {
  min-height: 50px;
}
.auth-card .secondary-btn {
  padding: 0 12px;
  white-space: nowrap;
}
/* Provider buttons follow each provider's sign-in guidelines, so they keep their brand colors in both themes. */
.auth-providers { display: grid; gap: 10px; margin-top: 18px; }
.auth-provider {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; min-height: 50px; padding: 0 16px;
  border-radius: var(--r-md); font: 700 var(--fs-title) var(--font-ui); cursor: pointer;
}
.auth-provider svg { width: 20px; height: 20px; flex: none; }
.auth-provider--google { border: 1px solid #747775; background: #fff; color: #1f1f1f; }
.auth-provider--kakao { border: 0; background: #FEE500; color: rgba(0, 0, 0, .85); }
.auth-provider--kakao svg { fill: #000; }
.auth-provider:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.auth-provider:disabled { opacity: .6; cursor: progress; }
.auth-intro-link {
  margin: 14px 0 0;
  text-align: center;
  font-size: var(--fs-body);
  font-weight: 700;
}
.auth-intro-link a {
  color: var(--muted);
  text-decoration: none;
}
.auth-intro-link a:hover { color: var(--gold); }
.link-btn {
  min-height: 44px;
  margin: 10px auto 0;
  display: block;
  background: transparent;
  color: var(--muted);
  font-size: var(--fs-body);
  font-weight: 700;
}
.link-btn:hover { color: var(--gold); }
.auth-card .error-text,
.setup-card .error-text {
  margin: 10px 0 0;
}
.error-text { color: var(--red); font-size: var(--fs-body); min-height: 18px; }
.sheet-overlay { position: fixed; inset: 0; display: none; background: rgba(0,0,0,.55); z-index: 40; }
.sheet-overlay.open { display: block; }
.bottom-sheet {
  position: fixed;
  left: 50%;
  bottom: 0;
  transform: translate(-50%, 105%);
  width: min(100%, 480px);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  padding: 18px;
  z-index: 41;
  /* transform is spring-driven from JS (openSheet/closeSheet in main.js),
     not a CSS transition, so it can't fight an in-flight animation. */
}
.bottom-sheet.open { transform: translate(-50%, 0); }
#openDbSettings[hidden], #dbSheet[hidden], #dbOverlay[hidden], #setupOverlay[hidden] { display: none; }
.sheet-handle { width: 38px; height: 4px; border-radius: var(--r-full); background: var(--line); margin: 0 auto 14px; }
.toast {
  position: fixed;
  left: 50%;
  bottom: max(calc(var(--nav-h) + var(--safe-b) + 18px), var(--toast-obstacle-bottom, 0px));
  transform: translateX(-50%) translateY(20px);
  width: min(calc(100% - 32px), 430px);
  background: #111827;
  color: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-full);
  padding: 12px 16px;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  /* rise/pop-in and fade-out are spring-driven from JS (toast() in
     main.js), not a CSS transition, so a rapid retrigger can't fight it. */
  z-index: 80;
  font-size: var(--fs-body);
  font-weight: 700;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast.error { border-color: var(--red); color: var(--red); }
.toast.success { border-color: var(--green); color: var(--green); }

@media (max-width: 380px) {
  .sales-override-card { padding: 16px; }
  .sales-override-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 44px; }
  .sales-override-route-field { grid-column: 1 / 3; }
  .sales-override-count-field { grid-column: 1; }
  .sales-override-unit-field { grid-column: 2; }
  .sales-override-row output { grid-column: 1 / 3; }
  .sales-override-delete { grid-column: 3; grid-row: 1 / 4; }
  .entry-head, .entry-row { grid-template-columns: 1fr .75fr .78fr .9fr 28px; gap: 6px; }
  .entry-row input, .entry-row select { font-size: var(--fs-body); padding: 8px 6px; }
  .calc-row { grid-template-columns: auto .8fr auto .8fr 1fr; gap: 8px; }
  .admin-card-row { grid-template-columns: 1fr 1fr; }
  .admin-card-row [data-action="save-admin"] { grid-column: 1 / -1; }
}

@media print {
  @page { size: A4 landscape; margin: 8mm; }
  body * { visibility: hidden !important; }
  .inspection-print-sheet,
  .inspection-print-sheet * { visibility: visible !important; }
  .inspection-print-sheet {
    display: block !important;
    position: absolute;
    inset: 0;
    width: 100%;
  }
}

@media (max-width: 390px) {
  .inspection-header { padding-inline: 10px; gap: 8px; }
  .inspection-header .sub-title span { display: none; }
  .inspection-header-actions { gap: 4px; }
  .inspection-history-button { min-height: 44px; padding-inline: 9px; font-size: var(--fs-caption); }
}
.update-notice-card {
  width: min(calc(100% - 18px), 410px);
  border-radius: var(--r-xl);
  padding: 24px 20px 22px;
  box-shadow: 0 18px 58px rgba(0,0,0,.24);
}
.update-notice-card h2 { margin: 10px 0 8px; font-size: 25px; line-height: 1.3; word-break: keep-all; }
.update-notice-card .hint { margin: 0; line-height: 1.5; }
.update-notice-badge {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 11px;
  border-radius: var(--r-full);
  background: var(--primary-bg);
  color: var(--text);
  font-size: var(--fs-label);
  font-weight: 700;
}
.update-notice-items {
  display: grid;
  gap: 10px;
  margin: 18px 0 22px;
  padding: 16px 16px 16px 34px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--panel2);
  color: var(--text);
  font-size: var(--fs-body-l);
  line-height: 1.5;
}
.update-notice-items li::marker { color: var(--gold); }
.update-notice-card .full-btn { min-height: 50px; }
.update-notice-actions { display: grid; gap: 10px; }
.update-notice-actions .secondary-btn { min-height: 44px; }
.update-notice-card { max-height: calc(100dvh - 32px); overflow-y: auto; }

/* Fold portrait / compact tablet: keep the mobile flow, but use the full viewport. */
@media (min-width: 481px) and (max-width: 767px) {
  html,
  body {
    background: var(--bg);
  }

  .app,
  .bottom-nav {
    width: 100%;
  }
}

/* 숫자 스타일 - Archivo(--font-numeric/--font-amount)로 통일 */
#periodRevenue,
#homeSelectedTotal,
#selectedDayTotal,
#statsSummaryTotal,
#dailyAverage,
#periodCount,
#workDaysHome,
.day-value,
.day-dock strong,
.summary-row strong,
.summary-grid strong,
.total-card strong,
.entry-row output,
.calc-row output {
  font-family: var(--font-ui) !important;
  font-variant-numeric: tabular-nums !important;
  font-feature-settings: "tnum" !important;
  letter-spacing: -0.02em !important;
  transform: none !important;
}

/* 홈 핵심 금액은 Archivo tabular + 허용 굵기 */
#periodRevenue,
#homeSelectedTotal {
  font-family: var(--font-numeric) !important;
  font-variant-numeric: tabular-nums !important;
  font-feature-settings: "tnum" !important;
  letter-spacing: -0.01em !important;
  transform: none !important;
  font-weight: 700 !important;
}

/* 기록 합계도 숫자 폭과 허용 굵기를 맞춤 */
#selectedDayTotal {
  font-family: var(--font-numeric) !important;
  font-variant-numeric: tabular-nums !important;
  font-feature-settings: "tnum" !important;
  letter-spacing: -0.01em !important;
  transform: none !important;
  font-weight: 700 !important;
}

/* 기존 통계 금액은 현재 표시를 유지 */
#statsSummaryTotal {
  font-family: var(--font-amount) !important;
  font-variant-numeric: proportional-nums !important;
  font-feature-settings: "pnum" !important;
  letter-spacing: -0.01em !important;
  transform: none !important;
  font-weight: 600 !important;
}

#periodRevenue {
  letter-spacing: -0.02em !important;
}

/* 홈 요약 네 수치는 Archivo tabular */
#dailyAverage,
#periodCount,
#workDaysHome,
.summary-grid strong {
  font-family: var(--font-numeric) !important;
  font-variant-numeric: tabular-nums !important;
  font-feature-settings: "tnum" !important;
  letter-spacing: -0.01em !important;
  transform: none !important;
}

.entry-row output,
.calc-row output {
  font-family: var(--font-numeric) !important;
  font-variant-numeric: tabular-nums !important;
  font-feature-settings: "tnum" !important;
  letter-spacing: -0.01em !important;
  transform: none !important;
}

.total-card strong {
  font-family: var(--font-amount) !important;
  font-variant-numeric: proportional-nums !important;
  font-feature-settings: "pnum" !important;
  letter-spacing: -0.01em !important;
  transform: none !important;
}

.day-value,
.day-number,
.meter-pct,
.day-dock strong,
.summary-row strong {
  font-family: var(--font-ui) !important;
  font-variant-numeric: proportional-nums !important;
  font-feature-settings: "pnum" !important;
  transform: none !important;
}

/* 홈 핵심 수치의 단위는 한 단계 작고 흐리게 */
.summary-row strong .number-unit,
.summary-grid strong .number-unit,
.day-dock strong .number-unit,
#selectedDayTotal .number-unit {
  display: inline;
  margin-left: .12em;
  color: var(--muted);
  font-family: var(--font-ui);
  font-weight: 600;
  letter-spacing: 0;
}

#periodRevenue .number-unit { font-size: var(--fs-title-m); }
.summary-grid .number-unit { font-size: var(--fs-caption); }
#homeSelectedTotal .number-unit { font-size: var(--fs-label); }
#selectedDayTotal .number-unit { font-size: var(--fs-body-l); }

/* ═══════════════════════════════════════════════════════════════════
   2026-09 홈 리프레시
   진단: 촌스러움의 원인은 자간이 아니라 (1) 과한 글자 굵기,
   (2) 모든 요소를 두른 1px 테두리, (3) 쨍한 강조색이었다.
   되돌리기: git checkout ba54242 -- styles.css index.html
   ═══════════════════════════════════════════════════════════════════ */

/* 숫자는 전부 Archivo + tabular */
.summary-row strong, .summary-grid strong, .meter-pct, .day-number, .day-value,
.day-dock strong, .selected-breakdown-row > strong, .total-card strong {
  font-family: var(--font-numeric);
  font-variant-numeric: tabular-nums;
}
/* 자릿수가 고정된 문자열은 모노가 흔들리지 않는다 */

/* ── 2. 테두리를 표면으로 ────────────────────────────────────────
   1px 선으로 모든 걸 나누면 평평해진다. 카드는 선을 빼고 그림자로 띄운다.
   달력 괘선은 표의 구조라 남긴다. */
.summary-card {
  border: 0;
  border-radius: var(--r-lg);
  padding: 20px 18px 0;
  box-shadow: var(--shadow-raise);
}
.summary-row strong, .summary-card.compact strong {
  font-size: 34px;
  font-weight: 800;
  letter-spacing: -.035em;
  line-height: 1.05;
  margin-top: 8px;
}
.summary-row { align-items: center; gap: 0 10px; }
.meter-wrap { margin: 18px 0 8px; }
.summary-meter { height: 6px; }
.meter-label { margin: 0 0 16px; font-size: var(--fs-caption); }
.summary-grid { border-top: 1px solid var(--line); }
.summary-grid div { padding: 13px 4px 14px; }
.summary-grid span:not([data-mo-digit]) { font-size: var(--fs-caption); margin-bottom: 4px; }
.summary-grid strong { font-size: var(--fs-title); }

/* ── 4. 홈 바탕 ──────────────────────────────────────────────────
   헤더의 색조를 없애고 화면 바탕으로 연결한다. 강조색은 값과 행동에 남긴다. */
.view-home,
html:not([data-theme="dark"]) .view-home,
body:not([data-theme="dark"]) .view-home {
  background: var(--bg);
}

/* ── 5. 달력 ─────────────────────────────────────────────────────
   괘선은 남기되 한 단계 연하게. 행을 2px 키워 라우트 줄에 숨통을. */
.calendar-toolbar { padding: 20px 14px 11px; }
.mode-toggle { gap: 6px; padding: 0 14px 13px; }
.mode-btn { min-height: 38px; font-size: var(--fs-label); }
.week-head span { padding: 9px 0; }
.calendar-grid { grid-auto-rows: 78px; }
.day-cell { gap: 3px; padding: 7px 3px 6px; }
.day-value { font-size: var(--fs-label); }
.day-routes {
  font-family: var(--font-code);
  font-size: var(--fs-cell);
  letter-spacing: -.04em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── 6. 구역별 매출 ──────────────────────────────────────────────
   행마다 테두리 친 상자였다. 상자를 없애고 괘선 한 줄로 나눈다.
   구역은 모노, 개수는 근거, 금액은 우측 정렬 — 세 열이 눈에 잡힌다. */
.selected-date-breakdown {
  border: 0;
  border-radius: var(--r-lg);
  padding: 16px;
  box-shadow: var(--shadow-card);
}
.selected-breakdown-head strong { font-size: var(--fs-title); letter-spacing: -.012em; }
.selected-breakdown-head .secondary-btn { min-height: 36px; font-size: var(--fs-label); }
.selected-breakdown-rows { gap: 0; margin-top: 6px; }
.selected-breakdown-row {
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 11px 0;
  gap: 4px 12px;
}
.selected-breakdown-row + .selected-breakdown-row { border-top: 1px solid var(--line); }
.selected-breakdown-row > div:first-child { justify-content: flex-start; gap: 10px; }
.selected-breakdown-row > div:first-child strong {
  font-family: var(--font-code);
  font-weight: 700;
  font-size: var(--fs-body);
  color: var(--text);
}
.selected-breakdown-row > div:first-child span {
  font-family: var(--font-code);
  font-size: var(--fs-caption);
  color: var(--muted);
}
.selected-breakdown-row > strong {
  font-size: var(--fs-body-l);
  font-weight: 700;
  letter-spacing: -.025em;
  text-align: right;
}
.selected-detail-routes { font-size: var(--fs-caption); color: var(--muted); }

/* ── 7. 하단 독과 버튼 ───────────────────────────────────────────
   부 버튼까지 전부 44px이라 무엇이 주된 행동인지 크기로 드러나지 않았다. */
.day-dock { padding: 12px 16px 13px; }
.day-dock strong { font-size: var(--fs-display-s); letter-spacing: -.028em; }
.day-dock span:not([data-mo-digit]):not(.number-unit) { font-family: var(--font-code); font-size: var(--fs-caption); }
.day-dock .ghost-pill { min-height: 40px; font-size: var(--fs-label); color: var(--muted); }
.day-dock .primary-pill { min-height: 44px; box-shadow: none; }

/* ── 8. 매출/건수 토글 ───────────────────────────────────────────
   가로 꽉 찬 알약 두 개는 화면에서 가장 큰 덩어리가 된다.
   보조 컨트롤이므로 세그먼트로 줄여 달력에 자리를 내준다. */
.mode-toggle {
  width: fit-content;
  margin: 0 auto;
  gap: 3px;
  padding: 3px;
  border-radius: var(--r-full);
  background: var(--panel2);
}
.mode-btn {
  min-height: 32px;
  padding: 0 20px;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: var(--fs-label);
  font-weight: 600;
}
.calendar-toolbar { padding: 18px 14px 12px; }
.mode-toggle { margin-bottom: 14px; }

/* 달 이동 버튼은 보조다. 주 버튼(오늘)만 채운다. */
.calendar-toolbar .round-btn { width: 38px; height: 38px; background: transparent; border-color: var(--line); }
.today-btn { min-height: 36px; padding: 0 14px; font-size: var(--fs-label); }

/* 하단 독의 금액은 본문색으로. 강조색은 버튼 하나에만 남긴다. */
.day-dock strong { color: var(--text); }

/* 달력 매출/건수 전환의 크기. 선택 상태는 파일 끝의 공통 규칙을 따른다. */
.calendar-panel .mode-toggle .mode-btn { height: 32px; min-height: 32px; }
html:not([data-theme="dark"]) .mode-toggle,
body:not([data-theme="dark"]) .mode-toggle { background: var(--panel3); }

/* 오늘 배지: 강조색 위 글자는 항상 대비를 확보한다 */
.day-cell.today-cell .day-number { background: var(--gold); color: var(--gold-ink); }
html:not([data-theme="dark"]) .day-cell.today-cell .day-number,
body:not([data-theme="dark"]) .day-cell.today-cell .day-number { color: var(--gold-ink); }
html[data-theme="dark"] .day-cell.today-cell .day-number,
body[data-theme="dark"] .day-cell.today-cell .day-number { color: #1A1405; }
.day-cell.today-cell .day-number.sun,
.day-cell.today-cell .day-number.sat { color: inherit; }

/* ── 10. 날짜 상세: 카드를 벗는다 ────────────────────────────────
   달력 바로 아래에서 또 하나의 상자가 뜨면 화면이 조각난다.
   상자 대신 구분선 하나로 구획하고 본문 폭을 그대로 쓴다. */
.selected-date-breakdown {
  margin: 0;
  padding: 18px 18px 4px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.selected-breakdown-head {
  align-items: baseline;
  margin-bottom: 4px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}
.selected-breakdown-head span {
  font-size: var(--fs-caption);
  letter-spacing: .12em;
  color: var(--muted);
  font-weight: 500;
}
.selected-breakdown-head strong { margin-top: 3px; font-size: var(--fs-title); letter-spacing: -.012em; }
/* '기록 수정'은 보조 동작이다. 알약 버튼을 없애고 글자 링크로 낮춘다. */
.selected-breakdown-head .secondary-btn {
  min-height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: var(--fs-label);
  font-weight: 600;
}
.selected-breakdown-head .secondary-btn::after { content: " ›"; }

.selected-breakdown-rows { gap: 0; margin-top: 0; }
.selected-breakdown-row {
  padding: 12px 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  gap: 4px 12px;
}
.selected-breakdown-row + .selected-breakdown-row { border-top: 1px solid var(--line); }
.selected-breakdown-note {
  margin-top: 0;
  padding: 12px 0 0;
  border-top: 1px solid var(--line);
  font-size: var(--fs-caption);
  line-height: 1.55;
  color: var(--muted);
}

/* ── 11. 매출/건수 토글을 달력 툴바 한 줄 안으로 ─────────────────
   토글이 한 행을 통째로 먹으면 달력이 그만큼 밀린다.
   달 이동·오늘·표시기준은 모두 달력을 조작하는 컨트롤이므로 한 줄에 모은다.
   [‹ 2026년 9월 ›]  [오늘]  [매출|건수] */
.calendar-panel .calendar-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 16px 14px 12px;
}
.calendar-panel .calendar-toolbar .round-btn {
  width: 32px;
  height: 32px;
  flex: 0 0 auto;
  font-size: var(--fs-title);
}
.calendar-panel .calendar-toolbar .round-btn svg { width: 14px; height: 14px; }
.calendar-panel .calendar-toolbar strong {
  flex: 1 1 auto;
  min-width: 0;
  text-align: left;
  font-size: var(--fs-title-m);
  letter-spacing: -.025em;
  white-space: nowrap;
}
.calendar-panel .calendar-toolbar .today-btn {
  flex: 0 0 auto;
  min-height: 30px;
  padding: 0 11px;
  font-size: var(--fs-caption);
}
.calendar-panel .calendar-toolbar .mode-toggle {
  flex: 0 0 auto;
  width: auto;
  margin: 0;
  padding: 2px;
  gap: 2px;
}
.calendar-panel .calendar-toolbar .mode-btn {
  height: 26px;
  min-height: 26px;
  padding: 0 11px;
  font-size: var(--fs-caption);
}
/* 화면이 좁으면 달 이름을 가운데로 두고 오늘 버튼만 접는다 */
@media (max-width: 360px) {
  .calendar-panel .calendar-toolbar .today-btn { display: none; }
}

/* ── 12. 날짜 상세 행 높이 통일 ──────────────────────────────────
   세부구역 줄이 있는 행과 없는 행(프레시백·반품·취소)이 섞여 높이가 들쭉날쭉했다.
   행 높이를 고정하고 내용을 세로 가운데로 맞춘다. */
.selected-breakdown-row {
  min-height: 56px;
  align-content: center;
  align-items: center;
}
.selected-breakdown-row > div:first-child { align-self: center; }
.selected-detail-routes,
.selected-detail-empty {
  grid-column: 1 / -1;
  min-height: 15px;
  line-height: 15px;
  font-size: var(--fs-caption);
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.selected-detail-routes { display: block; }
.selected-detail-routes span + span::before { content: " · "; opacity: .5; }

/* min-height 만으로는 세부구역 줄이 있는 행이 더 커진다. 높이를 고정한다. */
.selected-breakdown-rows .selected-breakdown-row {
  height: 62px;
  min-height: 62px;
  align-content: center;
  overflow: hidden;
}

/* ── 13. 목표 진행 바 ────────────────────────────────────────────
   이 화면에서 유일하게 '성취'를 말하는 요소다. 단색 대신 다층 그라데이션에
   빛 번짐과 훑고 지나가는 광택을 얹어 시선을 잡는다. */
.summary-meter {
  position: relative;
  height: 9px;
  border-radius: var(--r-full);
  overflow: hidden;
  background: var(--panel3);
  box-shadow: inset 0 1px 2px rgba(0,0,0,.16);
}
.summary-meter span {
  position: relative;
  border-radius: var(--r-full);
  overflow: hidden;
  background:
    linear-gradient(90deg,
      color-mix(in srgb, var(--gold2) 88%, #000) 0%,
      var(--gold2) 18%,
      var(--gold) 46%,
      color-mix(in srgb, #FFFFFF 46%, var(--gold)) 72%,
      var(--gold) 88%,
      color-mix(in srgb, #FFFFFF 30%, var(--gold)) 100%);
  box-shadow:
    0 0 10px -1px color-mix(in srgb, var(--gold) 65%, transparent),
    inset 0 1px 0 rgba(255,255,255,.34);
}
/* The sheen used to loop forever via ::after + @keyframes meterSheen; the
   motion system runs nothing on a timer except a loader mid-save, so it was
   removed. The gradient + box-shadow above stay static (never animated). */

/* ── 14. 달 이름 가운데 정렬 ─────────────────────────────────────
   달 이동은 왼쪽에 짝지어 두고, 오늘·표시기준은 오른쪽에 모은다.
   달 이름은 흐름에서 빼내 화면 정중앙에 고정한다. */
.calendar-panel .calendar-toolbar { position: relative; }
.calendar-panel .calendar-toolbar strong {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  flex: 0 0 auto;
  width: auto;
  text-align: center;
  pointer-events: none;
}
.calendar-panel .calendar-toolbar #prevMonth { order: 1; }
.calendar-panel .calendar-toolbar #nextMonth { order: 2; }
.calendar-panel .calendar-toolbar .today-btn { order: 3; margin-left: auto; }
.calendar-panel .calendar-toolbar .mode-toggle { order: 4; }
.calendar-panel .calendar-toolbar .mode-btn { padding: 0 9px; }

/* ── 15. 하단 내비 아이콘 ────────────────────────────────────────
   달력 탭에 집 아이콘, 측정 탭에 막대그래프가 붙어 있어 통계와 구분되지 않았다.
   달력은 달력으로, 측정은 계기로 바꿨다 (index.html). */
.bottom-nav .nav-tab svg { width: 21px; height: 21px; }

/* ── 16. 정산 예상액 카드에 존재감 ───────────────────────────────
   테두리를 없애니 다크에서 그림자가 안 보여 카드가 배경에 묻혔다.
   테두리를 되살리되 회색 선이 아니라 '빛을 받은 면'으로 만든다:
   위쪽 밝은 하이라이트 + 아래로 깊어지는 그림자 + 표면을 한 단계 올림. */
.summary-card {
  border: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background:
    linear-gradient(180deg,
      color-mix(in srgb, #FFFFFF 4%, var(--panel)) 0%,
      var(--panel) 42%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.07),
    0 2px 6px -2px rgba(0,0,0,.30),
    0 22px 44px -22px rgba(0,0,0,.55);
}
html:not([data-theme="dark"]) .summary-card,
body:not([data-theme="dark"]) .summary-card {
  border-color: rgba(16,24,40,.07);
  background: linear-gradient(180deg, #FFFFFF 0%, #FDFDFE 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    0 1px 3px rgba(16,24,40,.07),
    0 20px 40px -24px rgba(16,24,40,.28);
}

/* ── 17. 달 이동 화살표를 달 이름 양옆으로 ───────────────────────
   [오늘]      ‹  2026년 9월  ›      [매출|건수]
   화살표를 이름 좌우에 고정해 한 덩어리로 읽히게 한다. */
.calendar-panel .calendar-toolbar { --month-gap: 82px; }
.calendar-panel .calendar-toolbar #prevMonth,
.calendar-panel .calendar-toolbar #nextMonth {
  position: absolute;
  top: 50%;
  left: 50%;
}
.calendar-panel .calendar-toolbar #prevMonth {
  transform: translate(-50%, -50%) translateX(calc(var(--month-gap) * -1));
}
.calendar-panel .calendar-toolbar #nextMonth {
  transform: translate(-50%, -50%) translateX(var(--month-gap));
}
/* 오늘은 왼쪽 끝, 표시기준은 오른쪽 끝 */
.calendar-panel .calendar-toolbar .today-btn { order: 1; margin: 0; }
.calendar-panel .calendar-toolbar .mode-toggle { order: 4; margin-left: auto; }
.calendar-panel .calendar-toolbar .mode-btn { padding: 0 8px; }
@media (max-width: 372px) {
  .calendar-panel .calendar-toolbar { --month-gap: 74px; }
  .calendar-panel .calendar-toolbar .today-btn { display: none; }
}

/* ── 18. 요일별 매출 ─────────────────────────────────────────────
   합계로 비교하면 근무일이 많은 요일이 무조건 이긴다.
   근무일당 평균으로 세우고, 표본(근무일수)을 함께 적어 과신을 막는다. */
.weekday-stats { display: flex; flex-direction: column; gap: 12px; }
.wd-bars {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
  align-items: end;
}
.wd-col {
  display: grid;
  grid-template-rows: 16px 96px 16px 13px;
  justify-items: center;
  gap: 5px;
  min-width: 0;
}
.wd-avg {
  font-family: var(--font-numeric);
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-caption);
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--muted);
  white-space: nowrap;
}
.wd-track {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: flex-end;
  background: var(--panel3);
  border-radius: var(--r-sm);
  overflow: hidden;
}
.wd-track > span {
  display: block;
  width: 100%;
  height: 100%;
  transform-origin: bottom center;
  border-radius: var(--r-sm) var(--r-sm) 0 0;
  background: color-mix(in srgb, var(--gold) 34%, var(--panel3));
}
.wd-label {
  font-family: var(--font-code);
  font-size: var(--fs-caption);
  font-weight: 600;
  color: var(--muted);
}
.wd-days {
  font-family: var(--font-code);
  font-size: var(--fs-caption);
  color: var(--muted);
  opacity: .7;
}
.wd-col.is-sun .wd-label { color: var(--red); }
.wd-col.is-sat .wd-label { color: var(--blue); }
/* 근무일당 평균이 가장 높은 요일만 강조한다 */
.wd-col.is-best .wd-track > span {
  background: linear-gradient(180deg,
    color-mix(in srgb, #FFFFFF 26%, var(--gold)) 0%,
    var(--gold) 58%,
    color-mix(in srgb, var(--gold2) 88%, var(--gold)) 100%);
  box-shadow: 0 0 10px -2px color-mix(in srgb, var(--gold) 60%, transparent);
}
.wd-col.is-best .wd-avg { color: var(--text); }
.wd-note {
  margin: 0;
  padding-top: 11px;
  border-top: 1px solid var(--line);
  font-size: var(--fs-caption);
  line-height: 1.5;
  color: var(--muted);
}

/* ═══════════════════════════════════════════════════════════════════
   20. 가로 태블릿 · 데스크톱 홈
   세로 1099px 이하는 모바일 흐름을 유지하고, 가로 화면은
   요약 / 달력 / 선택 날짜 패널의 한 가지 구조만 사용한다.
   ═══════════════════════════════════════════════════════════════════ */
.home-day-panel { display: contents; }
.home-day-overview { display: none; }
.day-dock .home-off-mobile-label,
.day-dock .home-off-wide-label { font: inherit; }
.day-dock .home-off-wide-label { display: none; }

@media (min-width: 600px) and (max-width: 767px) {
  .app { width: min(100%, 560px); }
}

@media (min-width: 768px) and (orientation: landscape), (min-width: 1100px) {
  .app { width: min(100%, 1440px); }

  .view {
    padding-left: 76px;
    padding-bottom: 0;
  }

  .app[data-view="home"] .view-home {
    display: grid;
    grid-template-columns: minmax(0, 1fr) clamp(240px, 31vw, 350px);
    grid-template-rows: auto auto;
    grid-template-areas:
      "summary summary"
      "calendar day-panel";
    align-content: start;
    gap: 14px 16px;
    min-height: 100dvh;
    padding: 0 16px 20px 92px;
    background: var(--bg);
  }

  .app[data-view="home"] .home-header,
  html:not([data-theme="dark"]) .home-header,
  body:not([data-theme="dark"]) .home-header,
  html[data-theme="dark"] .app[data-view="home"] .home-header,
  body[data-theme="dark"] .app[data-view="home"] .home-header {
    grid-area: summary;
    min-width: 0;
    padding: 14px 0 0;
    background: transparent;
    border: 0;
  }

  .home-top { margin-bottom: 10px; }

  .home-header .summary-card {
    grid-template-columns: minmax(210px, .9fr) minmax(0, 1.1fr);
    grid-template-rows: auto auto auto;
    grid-template-areas:
      "amount meter"
      "amount mlabel"
      "stats  stats";
    align-items: center;
    column-gap: 22px;
    padding: 14px 16px 0;
  }

  .home-header .summary-row {
    grid-area: amount;
    grid-template-columns: auto 1fr;
    align-self: center;
    align-items: baseline;
  }
  .home-header .summary-row strong {
    font-size: clamp(27px, 3.4vw, 34px);
    margin-top: 5px;
  }
  .home-header .summary-period-badge {
    justify-self: start;
    margin-left: 8px;
  }
  .home-header .meter-wrap {
    grid-area: meter;
    align-self: end;
    margin: 0;
  }
  .home-header .meter-label {
    grid-area: mlabel;
    align-self: start;
    margin: 7px 0 0;
    text-align: left;
  }
  .home-header .summary-grid {
    grid-area: stats;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-top: 11px;
    border-top: 1px solid var(--line);
  }
  .home-header .summary-grid div { padding: 9px 6px 10px; }
  .home-header .summary-grid div + div { border-left: 1px solid var(--line); }
  .home-header .summary-grid strong { font-size: var(--fs-title); }

  .calendar-panel {
    grid-area: calendar;
    min-width: 0;
    margin: 0;
    align-self: start;
    overflow: hidden;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
  }
  html:not([data-theme="dark"]) .calendar-panel,
  body:not([data-theme="dark"]) .calendar-panel { background: var(--panel); }
  .calendar-panel .calendar-toolbar {
    --month-gap: 64px;
    min-height: 54px;
    padding: 10px 12px;
  }
  .calendar-panel .calendar-toolbar .mode-btn { padding-inline: 6px; }
  .week-head { border-top: 0; }
  .week-head span { padding: 8px 0 9px; }
  .calendar-grid { grid-auto-rows: minmax(84px, auto); }
  .day-cell {
    grid-template-rows: 26px 20px minmax(14px, auto);
    gap: 2px;
    padding: 7px 4px 6px;
  }
  .day-number {
    width: 26px;
    height: 26px;
    font-size: var(--fs-label);
  }
  .inspection-day-dot {
    top: 8px;
    left: calc(50% + 9px);
  }
  .day-value {
    font-size: var(--fs-label);
    line-height: 20px;
  }
  .day-routes {
    font-size: var(--fs-cell);
    line-height: 14px;
  }

  .home-day-panel {
    grid-area: day-panel;
    display: flex;
    min-width: 0;
    min-height: 0;
    align-self: start;
    flex-direction: column;
    overflow: hidden;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
  }
  .home-day-overview {
    display: flex;
    flex-direction: column;
    padding: 18px 18px 16px;
  }
  .home-day-eyebrow {
    margin: 0 0 7px;
    color: var(--muted);
    font-size: var(--fs-caption);
    font-weight: 500;
    letter-spacing: .12em;
  }
  .home-day-heading {
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .home-day-heading h2 {
    min-width: 0;
    margin: 0;
    font-size: var(--fs-title-l);
    font-weight: 700;
    letter-spacing: -.022em;
    line-height: 1.35;
  }
  #homeDayToday {
    flex: 0 0 auto;
    padding: 4px 7px;
    border-radius: var(--r-full);
    background: var(--primary-bg);
    color: var(--gold);
    font-size: var(--fs-caption);
    font-weight: 700;
    line-height: 1;
  }
  .home-day-status {
    display: grid;
    justify-items: start;
    gap: 6px;
    padding: 22px 0 18px;
  }
  .home-day-panel[data-day-state="off"] .home-day-status {
    justify-items: center;
    padding: 32px 0;
    text-align: center;
  }
  .home-day-icon {
    width: 38px;
    height: 38px;
    margin-bottom: 2px;
    color: var(--muted);
  }
  .home-day-icon[hidden] { display: none; }
  .home-day-status strong {
    color: var(--text);
    font-family: var(--font-numeric);
    font-size: 27px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: -.028em;
    line-height: 1.15;
  }
  .home-day-status strong .number-unit {
    margin-left: 3px;
    color: var(--muted);
    font-size: var(--fs-body-l);
    font-weight: 500;
  }
  .home-day-status p {
    margin: 0;
    color: var(--muted);
    font-size: var(--fs-label);
    line-height: 1.55;
  }
  .home-day-meta {
    margin: 0;
    padding-top: 13px;
    border-top: 1px solid var(--line);
  }
  .home-day-meta > div {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
  }
  .home-day-meta dt {
    color: var(--muted);
    font-size: var(--fs-caption);
    font-weight: 500;
  }
  .home-day-meta dd {
    margin: 0;
    color: var(--text);
    font-size: var(--fs-label);
    font-weight: 600;
  }

  .home-day-panel .selected-date-breakdown {
    margin: 0;
    padding: 16px 18px 6px;
    background: transparent;
    border: 0;
    border-top: 1px solid var(--line);
    border-radius: 0;
    box-shadow: none;
  }
  .home-day-panel #openSalesOverride { display: none; }
  .home-day-panel .selected-breakdown-rows { max-width: none; }
  .home-day-panel .selected-breakdown-rows .selected-breakdown-row {
    height: auto;
    min-height: 54px;
  }

  .home-day-panel .day-dock {
    position: static;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 8px;
    margin-top: 0;
    padding: 14px 18px 16px;
    background: transparent;
    border-top: 1px solid var(--line);
    box-shadow: none;
  }
  .home-day-panel .day-dock > div { display: none; }
  .home-day-panel .day-dock button {
    width: 100%;
    min-width: 0;
    min-height: 44px;
    font-size: var(--fs-body);
    font-weight: 600;
    padding-inline: 10px;
  }
  #homeDayPanel #homeOffToggle {
    background: var(--panel2);
    border-color: transparent;
    color: var(--text);
    font-size: var(--fs-body);
    padding-inline: 10px;
  }
  .home-day-panel .day-dock .home-off-mobile-label { display: none; }
  .home-day-panel .day-dock .home-off-wide-label { display: inline; color: inherit; }

  .bottom-nav {
    left: max(0px, calc(50% - 720px));
    top: 0;
    bottom: auto;
    transform: none;
    width: 76px;
    height: 100dvh;
    padding: 20px 7px;
    flex-direction: column;
    justify-content: center;
    gap: 8px;
    border-top: 0;
    border-right: 1px solid var(--line);
  }
      .nav-tab {
    flex: 0 0 68px;
    width: 100%;
    border-radius: var(--r-md);
    gap: 6px;
  }
  .nav-tab:hover { background: var(--panel2); }
  .nav-tab.active { background: var(--primary-bg); }
  .nav-tab svg {
    width: 23px;
    height: 23px;
  }

  .settings-body,
  .record-body,
  .view-stats > .settings-body,
  .view-admin > .settings-body {
    width: min(100%, 960px);
    margin-inline: auto;
  }
  .sub-header {
    max-width: 960px;
    margin-inline: auto;
  }
}

@media (min-width: 1001px) and (orientation: landscape), (min-width: 1100px) {
  .home-header .summary-card {
    grid-template-columns: minmax(220px, auto) minmax(180px, 1fr) minmax(330px, auto);
    grid-template-rows: auto auto;
    grid-template-areas:
      "amount meter  stats"
      "amount mlabel stats";
  }
  .home-header .summary-grid {
    margin-top: 0;
    border-top: 0;
  }
  .home-header .summary-grid div { padding: 6px 9px; }
  .calendar-panel .calendar-toolbar { --month-gap: 74px; }
  .day-value { font-size: var(--fs-label); }
  .day-routes { font-size: var(--fs-cell); }
}

/* 23. 기사 통계: 매출 중심 요약, 선택해서 펼치는 근거 */
.stats-driver-report { gap: 16px; padding: 16px 18px 24px; }
.stats-driver-report [hidden] { display: none !important; }
.stats-driver-report :is(strong, dd, .stats-numeric, .wd-avg, .wd-days) {
  font-variant-numeric: tabular-nums;
}
.stats-driver-report :is(.stats-numeric, .stats-outlook-value, .stats-hero-support dd) {
  font-family: var(--font-numeric);
}
.stats-driver-report .stats-unit {
  margin-left: 3px;
  color: var(--muted);
  font-family: var(--font-ui);
  font-size: .7em;
  font-weight: 500;
  letter-spacing: 0;
}
.stats-driver-report :is(.stats-report-hero, .stats-report-section) {
  min-width: 0;
  border: 0;
  border-radius: var(--r-lg);
  background: var(--panel);
  box-shadow: var(--shadow-card);
  padding: 20px;
}
.stats-driver-report .stats-report-hero { gap: 14px; }
.stats-driver-report .ssc-label { font-size: var(--fs-body); font-weight: 600; }
.stats-driver-report .ssc-range { font-size: var(--fs-caption); font-weight: 500; }
.stats-driver-report .stats-outlook-value {
  color: var(--text);
  font-size: clamp(34px, 8vw, 44px);
  font-weight: 800;
  letter-spacing: -.035em;
  line-height: 1.15;
}
.stats-driver-report .stats-outlook-value .stats-unit { font-size: var(--fs-title-m); margin-left: 6px; }
.stats-outlook-message { margin: -3px 0 0; color: var(--muted); font-size: var(--fs-body); line-height: 1.6; }
.stats-driver-report .stats-outlook-plan:empty { display: none; }
.stats-driver-report .stats-outlook-plan { order: 5; }
.stats-driver-report .stats-hero-support { gap: 0; padding-top: 14px; border-top: 1px solid var(--line); }
.stats-driver-report .stats-hero-support > div { padding: 0; border: 0; border-radius: 0; background: transparent; }
.stats-driver-report .stats-hero-support > div + div { border-left: 1px solid var(--line); padding-left: 20px; }
.stats-driver-report .stats-hero-support dt { font-size: var(--fs-label); font-weight: 500; }
.stats-driver-report .stats-hero-support dd { font-size: var(--fs-headline); font-weight: 700; }
.stats-driver-report .ssc-meter-foot { font-weight: 500; }
.stats-driver-report .ssc-meter-bar > span { background: var(--gold); box-shadow: none; }
.stats-driver-report .stats-range-heading { min-height: 34px; }
.stats-driver-report .stats-range-heading h2 { font-size: var(--fs-body); font-weight: 600; color: var(--muted); }
.stats-driver-report .stats-custom-toggle { height: 34px; min-height: 34px; border: 0; background: var(--panel); font-size: var(--fs-label); font-weight: 600; }
.stats-driver-report .stats-range-tabs { padding: 3px; gap: 3px; border: 0; background: var(--panel2); border-radius: var(--r-full); }
.stats-driver-report .stats-range-tabs > button { height: 34px; min-height: 34px; padding: 0 3px; border: 0; border-radius: var(--r-full); background: transparent; font-size: var(--fs-label); font-weight: 600; color: var(--muted); }
.stats-driver-report .stats-report-section-head h2 { font-size: var(--fs-title-l); font-weight: 700; line-height: 1.4; }
.stats-driver-report .stats-report-section-head > div:first-child > span { font-size: var(--fs-caption); font-weight: 500; }
.stats-driver-report .stats-compare { padding: 2px 0 5px; border: 0; border-radius: 0; background: transparent; gap: 7px; }
.stats-driver-report .stats-compare > span { font-size: var(--fs-label); font-weight: 500; }
.stats-driver-report .stats-compare > strong { font-family: var(--font-numeric); font-size: 28px; font-weight: 700; }
.stats-compare.is-empty > strong,
.stats-driver-report .stats-compare.is-empty > strong { font-family: var(--font-ui); font-size: var(--fs-title-l); font-weight: 700; letter-spacing: 0; color: var(--text); }
.stats-driver-report .stats-compare > small { font-size: var(--fs-label); font-weight: 500; }
.stats-driver-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 4px 0 14px; }
.stats-driver-grid:has(> div:only-child) { grid-template-columns: 1fr; }
.stats-driver-grid > div { display: grid; align-content: start; gap: 7px; padding: 13px 8px; background: var(--panel2); border-radius: var(--r-md); min-width: 0; }
.stats-driver-grid > div > span { font-size: var(--fs-caption); color: var(--muted); font-weight: 500; }
.stats-driver-grid > div > strong { font-size: var(--fs-title-l); font-weight: 700; white-space: nowrap; }
.stats-driver-grid > div > small { font-size: var(--fs-caption); color: var(--muted); }
.stats-driver-grid .stats-previous { display: grid; gap: 3px; }
.stats-driver-grid .stats-previous > span:last-child { white-space: nowrap; }
.stats-driver-grid em { color: var(--text); font-size: var(--fs-body); font-weight: 600; font-style: normal; }
.stats-reading-note { margin: 0; color: var(--muted); font-size: var(--fs-label); font-weight: 500; line-height: 1.65; overflow-wrap: anywhere; }
.stats-typical { padding: 15px; background: var(--panel2); border-radius: var(--r-md); }
.stats-typical > div { display: grid; gap: 7px; }
.stats-typical > div > span { color: var(--muted); font-size: var(--fs-label); }
.stats-typical strong { font-size: 26px; font-weight: 700; }
.stats-typical p { margin: 8px 0 0; color: var(--muted); font-size: var(--fs-label); line-height: 1.6; }
.stats-pattern-title { margin: 5px 0 14px; font-size: var(--fs-body); font-weight: 600; }
.stats-driver-report .wd-col { grid-template-rows: 18px 96px 18px 16px; gap: 6px; }
.stats-driver-report .wd-track { width: min(18px, 55%); height: 96px; border-radius: var(--r-sm); background: color-mix(in srgb, var(--panel3) 45%, transparent); }
.stats-driver-report .wd-track > span { border-radius: var(--r-sm) var(--r-sm) 0 0; background: linear-gradient(180deg, color-mix(in srgb, var(--gold) 54%, var(--panel3)), color-mix(in srgb, var(--gold) 42%, var(--panel3))); }
.stats-driver-report .wd-col.is-best .wd-track > span { background: linear-gradient(180deg, var(--gold), color-mix(in srgb, var(--gold) 80%, var(--gold2))); box-shadow: none; }
.stats-driver-report .wd-avg { font-size: var(--fs-label); font-weight: 700; line-height: 18px; }
.stats-driver-report .wd-label { font-size: var(--fs-label); font-weight: 600; line-height: 18px; }
.stats-driver-report .wd-days { font-size: var(--fs-caption); font-weight: 500; line-height: 16px; opacity: 1; }
.stats-driver-report .wd-note { font-size: var(--fs-label); font-weight: 500; line-height: 1.6; }
.stats-driver-report .stats-disclosure { min-width: 0; border-top: 1px solid var(--line); }
.stats-driver-report .stats-disclosure > summary {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 44px; padding: 10px 0; line-height: 24px; list-style: none; cursor: pointer;
  color: var(--text-sub); font-size: var(--fs-body); font-weight: 600;
}
.stats-driver-report .stats-disclosure > summary::-webkit-details-marker { display: none; }
.stats-driver-report .stats-disclosure > summary::after { content: "+"; color: var(--muted); font-family: var(--font-numeric); font-size: var(--fs-title-l); font-weight: 500; }
.stats-driver-report .stats-disclosure[open] > summary::after { content: "−"; }
.stats-driver-report .stats-disclosure > .stats-reading-note { margin-bottom: 12px; }
.stats-driver-report summary:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: var(--r-xs); }
.stats-plan-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 5px 0 12px; }
.stats-plan-pair > div { display: grid; gap: 6px; }
.stats-plan-pair span:not(.stats-numeric) { color: var(--muted); font-size: var(--fs-caption); }
.stats-plan-pair strong { font-size: var(--fs-display-s); font-weight: 700; }
.stats-projection { display: grid; gap: 6px; font-size: var(--fs-body); line-height: 1.6; }
.stats-projection strong { font-size: 22px; font-weight: 700; }
.stats-projection > small { color: var(--muted); font-size: var(--fs-caption); }
.stats-review:empty { display: none; }
.stats-driver-report .revenue-list { gap: 0; }
.stats-driver-report .revenue-list .rev-row { height: 44px; min-height: 44px; padding: 0; line-height: 24px; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.stats-driver-report .revenue-list .rev-label { font-size: var(--fs-body); font-weight: 500; }
.stats-driver-report .revenue-list .rev-amount { font-size: var(--fs-title-m); font-weight: 700; color: var(--text); }
.stats-driver-report .revenue-list .stats-unit { font-size: var(--fs-label); }
.stats-driver-report .revenue-list .rev-sum { border-top: 1px solid var(--line); }
.stats-driver-report .revenue-list .rev-sum .rev-amount { color: var(--gold); }
.stats-driver-report .daily-card { border: 0; border-radius: var(--r-md); }
.stats-driver-report .stat-day-card button { padding: 12px; gap: 8px; }
.stats-driver-report .daily-top > div > strong { font-family: var(--font-code); font-size: var(--fs-body); font-weight: 600; line-height: 24px; }
.stats-driver-report .daily-top > strong:last-child { font-size: var(--fs-title-m); font-weight: 700; line-height: 24px; }
.stats-driver-report .daily-top span { font-size: var(--fs-label); line-height: 18px; }
.stats-driver-report .daily-metrics span { padding: 2px 6px; border: 0; font-size: var(--fs-caption); font-weight: 500; line-height: 18px; }
.stats-driver-report .daily-detail .dd-row { min-height: 32px; line-height: 20px; align-items: baseline; }
.stats-driver-report .daily-detail .dd-row strong { font-size: var(--fs-body-l); font-weight: 700; white-space: nowrap; }
.stats-driver-report .daily-detail .dd-total { min-height: 36px; }
.stats-driver-report .route-stat-card { padding: 14px 0; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; }
.stats-driver-report .rs-name { font-weight: 700; }
.stats-driver-report .rs-amount { font-size: var(--fs-title-l); font-weight: 700; }
.stats-driver-report .rs-amount small { font-size: var(--fs-caption); font-weight: 500; color: var(--muted); }
.stats-driver-report .rs-meta { flex-wrap: wrap; font-weight: 500; }
.stats-route-detail > summary { margin-top: 10px; color: var(--muted); font-size: var(--fs-label); font-weight: 500; cursor: pointer; }
.stats-driver-report .stats-chart-card { padding: 8px 0 0; box-shadow: none; border-radius: 0; }
.stats-driver-report .stats-chart-toggle button { min-height: 32px; height: 32px; font-size: var(--fs-label); font-weight: 600; }
.stats-driver-report .stats-chart-hint { font-size: var(--fs-label); font-weight: 500; line-height: 1.6; }
@media (max-width: 390px) {
  .stats-driver-report { padding: 12px; gap: 12px; }
  .stats-driver-report :is(.stats-report-hero, .stats-report-section) { padding: 16px; }
  .stats-driver-report .ssc-range { font-size: var(--fs-caption); }
  .stats-driver-report .stats-report-section-head h2 { font-size: var(--fs-title-l); }
  .stats-driver-report .stats-hero-support dd { font-size: 22px; }
  .stats-driver-report .stats-chart-card { padding: 6px 0 0; }
}

/* 24. Compact revenue flow: a quiet graphic above the daily patterns. */
.stats-sparkline-card { min-width: 0; padding: 4px 4px 0; }
.stats-sparkline-head { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 4px 12px; margin-bottom: 4px; }
.stats-sparkline-card h2 { margin: 0; color: var(--text-sub); font-size: var(--fs-body); font-weight: 600; line-height: 20px; }
.stats-sparkline-change { display: flex; align-items: baseline; flex-wrap: wrap; gap: 5px; color: var(--muted); font-size: var(--fs-label); line-height: 20px; }
.stats-sparkline-change strong { color: var(--text-sub); font-size: var(--fs-label); font-weight: 600; }
.stats-sparkline-change .stats-unit { margin-left: 1px; font-size: var(--fs-caption); }
.stats-sparkline-endpoints { display: flex; justify-content: space-between; gap: 12px; padding: 2px 4px 0; }
.stats-sparkline-endpoints > div { display: grid; gap: 2px; min-width: 0; }
.stats-sparkline-endpoints > div + div { text-align: right; }
.stats-sparkline-endpoints > div > span { color: var(--muted); font-family: var(--font-numeric), var(--font-ui); font-variant-numeric: tabular-nums; font-size: var(--fs-caption); line-height: 18px; }
.stats-sparkline-endpoints strong { color: var(--text-sub); font-size: var(--fs-title); font-weight: 600; line-height: 22px; }
.stats-sparkline-endpoints .stats-unit { margin-left: 2px; color: var(--muted); font-size: var(--fs-label); font-weight: 500; }
.stats-sparkline-card canvas { display: block; width: 100%; height: 112px; }
.stats-sparkline-description { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.stats-sparkline-empty { margin: 0; min-height: 80px; align-content: center; color: var(--muted); font-size: var(--fs-label); text-align: center; }
.stats-sparkline-card [hidden] { display: none; }

/* 2026-09 지출 · 설정: 기존 표면과 서체를 사용하는 접힌 목록 */
.settings-index { display: grid; gap: 10px; }

/* ── 설정 상태 배너 ───────────────────────────────────────────
   연결이 끊기면 아무것도 저장되지 않는다. 헤더 보조 텍스트로 두지 않고
   목록 맨 위에 세운다. 상태 전환은 :has()로 처리해 JS를 늘리지 않는다. */
.settings-status {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px; border-radius: var(--r-md);
  background: var(--panel); box-shadow: 0 3px 12px rgb(0 0 0 / .035);
}
.settings-status-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); flex: none; }
.settings-status #syncStatus { font-size: var(--fs-body); font-weight: 600; color: var(--text); }
.settings-status:has(.sync-ok) .settings-status-dot { background: var(--gold); }
.settings-status:not(:has(.sync-ok)) { background: color-mix(in srgb, var(--red) 10%, var(--panel)); }
.settings-status:not(:has(.sync-ok)) .settings-status-dot { background: var(--red); }
.settings-status:not(:has(.sync-ok)) #syncStatus { color: var(--red); }

/* ── 한 판 목록 ──────────────────────────────────────────────
   카드를 그룹마다 쌓지 않는다. 판 하나 안에서 행 사이 1px 선으로 나눈다.
   표의 구조를 나타내는 선은 장식이 아니라 정보다 (DESIGN-RULES 3장). */
.settings-panel {
  background: var(--panel); border-radius: var(--r-lg); overflow: hidden;
  box-shadow: 0 3px 12px rgb(0 0 0 / .035);
}
.settings-panel > * + * { border-top: 1px solid var(--line); }
.settings-panel > .settings-group,
.settings-panel > .settings-export-row { margin: 0; border-radius: 0; box-shadow: none; background: transparent; }

.settings-group { margin: 0; background: var(--panel); border: 0; border-radius: var(--r-lg); box-shadow: 0 3px 12px rgb(0 0 0 / .035); }
.settings-group > summary, .settings-export-row {
  display: flex; align-items: center; justify-content: space-between;
  min-height: 52px; padding: 13px 16px; cursor: pointer; list-style: none; gap: 12px;
}
.settings-group > summary::-webkit-details-marker { display: none; }
.settings-group > summary::after { content: '›'; color: var(--muted); font-size: var(--fs-display-s); font-weight: 500; flex: none; transition: transform .16s ease; }
.settings-group[open] > summary::after { transform: rotate(90deg); }

/* 행: 이름은 왼쪽에 고정, 지금 설정값은 오른쪽에 */
.settings-row-name { flex: none; color: var(--text); font-size: var(--fs-body-l); font-weight: 600; }
.settings-group[open] > summary .settings-row-name { font-weight: 700; }
.settings-row-value {
  flex: 1; min-width: 0; text-align: right; font-style: normal;
  color: var(--muted); font-size: var(--fs-body); font-weight: 500;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.settings-row-value b { color: var(--text); font-family: var(--font-numeric); font-weight: 700; font-variant-numeric: tabular-nums; }
.settings-row-value code { color: var(--text); font-family: var(--font-code); font-weight: 700; letter-spacing: .01em; }
.settings-row-value .value-accent { color: var(--gold); font-family: var(--font-numeric); font-weight: 700; font-variant-numeric: tabular-nums; }
/* 열린 행은 아래에서 값을 편집하므로 요약을 반복하지 않는다 */
.settings-group[open] > summary .settings-row-value { display: none; }

/* 펼침 영역은 표면을 한 단계 낮춰 열린 행의 경계를 만든다 */
.settings-group[open] > .settings-group-content { background: var(--panel2); }
.settings-group-content { padding: 2px 16px 16px; min-width: 0; }
.settings-group-content .settings-section { padding: 14px 0; margin: 0; border: 0; background: transparent; box-shadow: none; }
.settings-group-content .settings-section h2 { font-size: var(--fs-body-l); font-weight: 600; }
.settings-group-content > .settings-group { background: var(--panel); margin-top: 8px; }
.settings-group-content > .settings-group > summary strong { display: block; color: var(--text); font-size: var(--fs-body-l); font-weight: 600; }
.settings-group-content > .settings-group > summary small { display: block; color: var(--muted); font-size: var(--fs-label); font-weight: 500; margin-top: 4px; }
.settings-group-content .settings-field input:not([type="checkbox"]):not([type="radio"]) {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}
.settings-group-content .signature-settings-section { display: flex; flex-wrap: wrap; gap: 12px; }
.settings-export-row { width: 100%; text-align: left; color: var(--muted); font-family: inherit; }

/* ── 위험 구역 ───────────────────────────────────────────────
   접어서 숨기지 않는다. 숨긴다고 안전해지지 않고 찾기만 어려워진다.
   대신 영역을 색으로 분리해 실수로 눌리지 않게 한다. */
.settings-danger {
  display: grid; gap: 8px; margin-top: 14px; padding: 12px 14px 14px; border-radius: var(--r-md);
  background: color-mix(in srgb, var(--red) 7%, transparent);
  border: 1px solid color-mix(in srgb, var(--red) 26%, transparent);
}
.settings-danger-title { margin: 0; color: var(--red); font-size: var(--fs-label); font-weight: 700; }
.settings-danger .settings-row + .settings-row { margin-top: 0; }
.settings-index .admin-card { background: var(--panel2); border: 0; }
@media (prefers-reduced-motion: reduce) { .settings-group > summary::after { transition: none; } }

/* ── 목표 진행바: 라이트는 평평하게 ──────────────────────────────
   광택과 글로우는 황동을 금속처럼 보이게 하려고 만든 것이다.
   라이트의 파란 강조색 위에서는 흰빛 혼합이 바랜 띠로, 글로우는 번짐으로
   읽힌다. 라이트에서는 같은 색조의 2스톱만 쓰고 광택은 끈다. */
html:not([data-theme="dark"]) .summary-meter,
body:not([data-theme="dark"]) .summary-meter {
  /* 흰 카드 위에서 트랙이 거의 안 보여 남은 거리가 읽히지 않았다 */
  background: #E7E8EA;
  box-shadow: inset 0 1px 2px rgba(16,24,40,.08);
}
html:not([data-theme="dark"]) .summary-meter span,
body:not([data-theme="dark"]) .summary-meter span {
  background: linear-gradient(90deg, var(--gold2) 0%, var(--gold) 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.26);
}
html:not([data-theme="dark"]) .summary-meter span::after,
body:not([data-theme="dark"]) .summary-meter span::after {
  display: none;
}


/* 달 이동 화살표: 좁은 폰(A34 = CSS 384px)에서 오른쪽 화살표가 매출/건수 토글과
   12px 겹쳤다. 기존 보정은 372px 이하에만 걸려 있었다. 400px 이하로 넓히고
   간격과 토글 여백을 함께 줄여 양쪽에 여유를 둔다. */
@media (max-width: 400px) {
  .calendar-panel .calendar-toolbar { --month-gap: 70px; }
  .calendar-panel .calendar-toolbar .mode-btn { padding: 0 7px; }
}
@media (min-width: 420px) {
  .measurement-guide-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* 누르는 영역은 44px 이상. 보이는 크기가 작은 버튼은 가상 요소로 영역만 넓힌다. */
.calendar-toolbar .round-btn,
.today-btn,
.mode-btn,
.inspection-entry-button,
.entry-actions .secondary-btn,
.signature-settings-section .secondary-btn,
#openProfileSignature { position: relative; }
.calendar-toolbar .round-btn::after { content: ""; position: absolute; inset: -6px; }
.today-btn::after { content: ""; position: absolute; inset: -7px -1px; }
.entry-actions .secondary-btn::after,
.signature-settings-section .secondary-btn::after,
#openProfileSignature::after { content: ""; position: absolute; inset: -4px 0; }
.inspection-entry-button::after { content: ""; position: absolute; inset: -5px 0; }
.mode-btn::after { content: ""; position: absolute; inset: -9px 0; }

/* 선택 상태는 한 가지: 트랙 위로 올라온 표면 + 얇은 윤곽선.
   노란 채움(--gold)은 화면의 실행 버튼에만 쓴다. */
html .mode-btn.active,
html .stats-tab.active,
html .stats-range-tabs > button.active,
html .theme-toggle button.active,
html .stats-chart-toggle button.active {
  background: var(--panel3);
  color: var(--text);
  border-color: transparent;
  box-shadow: inset 0 0 0 1px var(--line-strong), 0 1px 3px rgba(0,0,0,.22);
  font-weight: 700;
}
html:not([data-theme="dark"]) .mode-btn.active,
html:not([data-theme="dark"]) .stats-tab.active,
html:not([data-theme="dark"]) .stats-range-tabs > button.active,
html:not([data-theme="dark"]) .theme-toggle button.active,
html:not([data-theme="dark"]) .stats-chart-toggle button.active {
  background: #FFFFFF;
  box-shadow: inset 0 0 0 1px var(--line-strong), 0 1px 3px rgba(16,24,40,.12);
}

/* ═══════════════════════════════════════════════════════════════════
   25. 탭 첫 화면 공통 틀 (2026-09-23)
   매출노트·배송노트·정산노트가 같은 제목줄로 시작한다:
   제목 22px + 부제 한 줄, 오른쪽에는 그 화면에서 쓰는 버튼을 둔다.
   ═══════════════════════════════════════════════════════════════════ */
.tab-header { padding: 48px 18px 12px; background: var(--bg); }
.tab-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.tab-head-copy { min-width: 0; }
.tab-head h1 { margin: 0; font-size: 22px; font-weight: 700; letter-spacing: -.024em; line-height: 1.2; }
.tab-head-sub { margin: 3px 0 0; overflow: hidden; color: var(--muted); font-size: var(--fs-label); font-weight: 500; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.tab-head-actions { display: flex; flex: 0 0 auto; align-items: center; gap: 8px; }
.tab-action {
  position: relative;
  display: inline-grid;
  place-items: center;
  height: 36px;
  border: 0;
  border-radius: var(--r-full);
  background: var(--panel2);
  color: var(--muted);
}
.tab-action::after { content: ""; position: absolute; inset: -4px; }
.tab-action { padding: 0 14px; color: var(--text); font-size: var(--fs-label); font-weight: 600; }

/* 매출노트 홈: 공통 제목줄 + 일상점검 알약 */
.home-header { padding: 48px 18px 0; }
/* 가입 승인 대기 배너: 관리자에게만 보이는, 매출노트 상단의 탭 가능한 안내. */
.pending-signups-banner {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  margin: 12px 0 0;
  padding: 10px 14px;
  border: 1px solid var(--warn-border);
  border-radius: var(--r-md);
  background: var(--warn-bg);
  color: var(--warn);
  font-size: var(--fs-body);
  font-weight: 600;
  line-height: 1.4;
  text-align: left;
}
.pending-signups-banner::after {
  content: "\203A";
  margin-left: auto;
  flex-shrink: 0;
  font-size: var(--fs-title);
  opacity: .7;
}
.home-header .inspection-entry-card { display: block; margin: 0; padding: 0; border: 0; background: transparent; box-shadow: none; }
.home-header .inspection-entry-button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  height: 36px;
  min-height: 36px;
  padding: 0 13px;
  border: 1px solid var(--line-strong);
  background: transparent;
  color: var(--text);
  font-size: var(--fs-label);
  font-weight: 600;
  white-space: nowrap;
}
.home-header .inspection-entry-card:not(.complete) .inspection-entry-button:not(:disabled)::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: var(--r-full);
  background: var(--gold);
}
.home-header .inspection-entry-card.complete .inspection-entry-button { border-color: var(--line); background: transparent; color: var(--muted); }

/* 매출 | 지출: 같은 노트의 두 면 */
.ledger-switch {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3px;
  height: 38px;
  margin: 14px 0 12px;
  padding: 3px;
  border-radius: var(--r-full);
  background: var(--panel2);
}
.ledger-switch button { position: relative; border: 0; border-radius: var(--r-full); background: transparent; color: var(--muted); font-size: var(--fs-body); font-weight: 600; }
.ledger-switch button::after { content: ""; position: absolute; inset: -3px 0; }
.ledger-switch button.is-on { background: var(--panel3); color: var(--text); font-weight: 700; }
html:not([data-theme="dark"]) .ledger-switch button.is-on { background: var(--panel); box-shadow: 0 1px 3px rgba(16,24,40,.12); }
.view-expenses .tab-header .ledger-switch { margin-bottom: 0; }

/* 정산 카드 맨 아래: 지출과 남는 돈 */
.summary-ledger {
  display: flex;
  order: 5;
  justify-content: space-between;
  gap: 12px;
  margin: 0 -18px;
  padding: 11px 18px 13px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: var(--fs-label);
}
.summary-ledger[hidden] { display: none; }
.summary-ledger b { color: var(--text); font-family: var(--font-numeric); font-size: var(--fs-body); font-variant-numeric: tabular-nums; }
.summary-ledger b .number-unit { margin-left: 1px; color: var(--muted); font-family: var(--font-ui); font-size: var(--fs-caption); font-weight: 600; }

/* 새 정산기간 시작 직후, 헤드라인이 지난 정산으로 대체됐을 때의 안내 한 줄 */
.summary-period-note {
  order: 6;
  margin: 0 -18px;
  padding: 11px 18px 13px;
  border-top: 1px solid var(--line);
  color: var(--soft);
  font-size: var(--fs-caption);
  font-weight: 500;
  line-height: 1.5;
  text-align: center;
}
.summary-period-note[hidden] { display: none; }

/* 구역노트: 공간 선택은 제목 옆에, 선택한 구역은 지도와 접힌 팁 시트로 구분한다.
   기능별 스타일이 뒤에 로드되므로 공개 앱 화면 범위에서 위계를 명시한다. */
.view-routes:has(.route-notes-workspace) > .tab-header { display: none; }
.view-routes .route-notes-workspace {
  --route-note-peek: 76px;
  background: var(--bg);
}
.view-routes .route-notes-page-head {
  position: relative;
  z-index: 5;
  align-items: center;
  min-width: 0;
  padding: 48px 18px 16px;
  background: var(--bg);
}
.view-routes .route-notes-page-head .tab-head-copy { flex: 1 1 0; }
.view-routes .route-notes-space-switch {
  display: inline-flex;
  flex: 0 1 auto;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  min-width: 0;
  max-width: 50%;
  min-height: 44px;
  padding: 8px 10px;
  border: 0;
  border-radius: var(--r-full);
  background: var(--panel2);
  color: var(--text);
  font: 600 var(--fs-label) var(--font-ui);
  cursor: pointer;
}
.view-routes .route-notes-space-switch > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.view-routes .route-notes-space-switch > .route-notes-icon { flex: 0 0 auto; width: 16px; height: 16px; }
.view-routes .route-notes-space-switch:focus-visible,
.view-routes .route-notes-space-options .route-notes-button:focus-visible,
.view-routes .route-notes-space-actions .route-notes-button:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--gold) 36%, transparent);
  outline-offset: 2px;
}
.view-routes .route-notes-workspace[data-selected="false"][data-panel="false"] {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
}
.view-routes .route-notes-workspace[data-selected="false"][data-panel="false"] .route-notes-topbar {
  position: relative;
  inset: auto;
  width: auto;
  min-width: 0;
  margin: 0 18px 8px;
  gap: 10px;
}
.view-routes .route-notes-workspace[data-selected="false"][data-panel="false"] .route-notes-sheet {
  position: relative;
  inset: auto;
  width: auto;
  height: auto;
  min-height: 0;
  max-height: none;
  grid-template-rows: minmax(0, 1fr);
  border: 0;
  border-radius: 0;
  background: var(--bg);
  box-shadow: none;
}
.view-routes .route-notes-workspace[data-selected="false"][data-panel="false"] .route-notes-sheet-head { display: none; }
.view-routes .route-notes-workspace[data-selected="false"][data-panel="false"] .route-notes-sheet-body {
  min-width: 0;
  padding: 8px 18px calc(18px + env(safe-area-inset-bottom));
}
.view-routes .route-notes-tabs {
  gap: 6px;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.view-routes .route-notes-tabs .route-notes-button { min-height: 44px; padding-inline: 16px; }
.view-routes .route-notes-tabs .route-notes-button.active {
  background: var(--panel2);
  color: var(--text);
  box-shadow: none;
}
.view-routes .route-notes-zone-copy strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.view-routes .route-notes-empty-actions { display: grid; gap: 10px; margin: 4px 0 18px; }
.view-routes .route-notes-empty-actions .route-notes-button { width: 100%; min-height: 54px; margin: 0; font-size: var(--fs-body); }
.view-routes .route-notes-trash-button {
  display: flex;
  justify-content: center;
  width: 100%;
  min-height: 48px;
  margin-top: 16px;
  padding: 8px 12px;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: var(--fs-label);
  font-weight: 500;
}
.view-routes .route-notes-space-options,
.view-routes .route-notes-space-actions { display: grid; gap: 8px; min-width: 0; }
.view-routes .route-notes-space-options .route-notes-button,
.view-routes .route-notes-space-actions .route-notes-button {
  justify-content: flex-start;
  width: 100%;
  min-width: 0;
  min-height: 54px;
  padding: 12px 14px;
  border: 0;
  border-radius: var(--r-md);
  text-align: left;
  white-space: normal;
  overflow-wrap: anywhere;
}
.view-routes .route-notes-space-options .route-notes-button > span { min-width: 0; }
.view-routes .route-notes-space-options .route-notes-button[aria-pressed="true"] {
  background: var(--primary-bg);
  color: var(--gold);
  font-weight: 700;
}
.view-routes .route-notes-space-actions { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); }
.view-routes .route-notes-space-actions .route-notes-button { background: transparent; }
.view-routes .route-notes-zone-actions-menu { display: grid; gap: 8px; margin-top: 12px; }
.view-routes .route-notes-zone-actions-menu .route-notes-icon-button {
  justify-content: flex-start;
  gap: 12px;
  width: 100%;
  height: auto;
  min-height: 52px;
  padding: 12px 14px;
  background: var(--panel2);
  color: var(--text);
  font: 600 var(--fs-label) var(--font-ui);
  text-align: left;
}
.view-routes .route-notes-zone-menu { font-size: var(--fs-title-l); }
.view-routes .route-notes-workspace:not([data-panel="false"]) .route-notes-sheet {
  top: auto;
  right: 0;
  bottom: 0;
  left: 0;
  width: auto;
  height: var(--route-note-sheet-h);
  max-height: calc(100% - 24px);
  grid-template-rows: auto minmax(0, 1fr);
  border: 1px solid var(--line);
  border-bottom: 0;
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  background: var(--panel);
  box-shadow: var(--shadow-raise);
}
.view-routes .route-notes-workspace:not([data-panel="false"]) .route-notes-sheet-head {
  grid-template-columns: minmax(0, 1fr) auto;
  padding: 14px 16px;
}
.view-routes .route-notes-workspace:not([data-panel="false"]) .route-notes-sheet-heading { grid-column: 1; }
.view-routes .route-notes-workspace:not([data-panel="false"]) .route-notes-sheet-back { grid-column: 2; grid-row: 1; }
.view-routes .route-notes-workspace[data-selected="true"] .route-notes-topbar { min-width: 0; }
.view-routes .route-notes-selected-bar .route-notes-icon-button { flex-basis: 44px; width: 44px; height: 44px; }
.view-routes .route-notes-zone-change { min-height: 44px; }
.view-routes .route-notes-sheet-grip { display: flex; height: 44px; }
.view-routes .route-notes-sheet:not([data-snap="peek"]):has(.route-notes-sheet-grip:not([hidden])) {
  grid-template-rows: 44px auto minmax(0, 1fr);
}
.view-routes .route-notes-peek-summary { display: none; }
.view-routes .route-notes-workspace[data-collapsed="true"] .route-notes-sheet {
  height: var(--route-note-sheet-h, var(--route-note-peek));
  grid-template-rows: minmax(0, 1fr);
}
.view-routes .route-notes-workspace[data-collapsed="true"] .route-notes-sheet-grip {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 10px;
  height: 100%;
  min-width: 0;
  padding: 10px 18px 14px;
  color: var(--text);
}
.view-routes .route-notes-workspace[data-collapsed="true"] .route-notes-peek-summary {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-width: 0;
}
.view-routes .route-notes-peek-name {
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
  color: var(--text);
  font: 700 var(--fs-body) var(--font-ui);
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.view-routes .route-notes-peek-count { flex: 0 0 auto; color: var(--muted); font: 500 var(--fs-label) var(--font-ui); }
.view-routes .route-notes-workspace[data-collapsed="true"] .route-notes-sheet-head,
.view-routes .route-notes-workspace[data-collapsed="true"] .route-notes-sheet-body { display: none; }
.view-routes .route-notes-workspace[data-selected="true"][data-panel="false"] .route-notes-fabs {
  bottom: calc(var(--route-note-sheet-h, var(--route-note-peek)) + 12px);
}
@media (min-width: 768px) and (orientation: landscape), (min-width: 1100px) {
  .view-routes .route-notes-workspace[data-selected="false"][data-panel="false"] .route-notes-topbar,
  .view-routes .route-notes-workspace[data-selected="false"][data-panel="false"] .route-notes-sheet { width: min(520px, calc(100% - 36px)); }
  .view-routes .route-notes-workspace[data-selected="false"][data-panel="false"] .route-notes-sheet { margin-inline: 18px; }
  .view-routes .route-notes-workspace[data-selected="false"][data-panel="false"] .route-notes-sheet-body { padding-inline: 0; }
  .view-routes .route-notes-workspace:not([data-panel="false"]) .route-notes-sheet {
    right: 16px;
    bottom: 16px;
    left: auto;
    width: var(--route-note-panel-w);
    border-bottom: 1px solid var(--line);
    border-radius: var(--r-xl);
  }
  .view-routes .route-notes-workspace[data-selected="true"][data-panel="false"] .route-notes-fabs { bottom: 24px; }
}

/* 팁 작성은 한 화면에서: 위치는 보조 정보, 종류는 펼친 선택지, 저장만 주 행동. */
.view-routes .route-notes-tip-location {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  min-width: 0;
  padding: 0 0 12px;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
}
.view-routes .route-notes-tip-location > p {
  flex: 1 1 100%;
  min-width: 0;
  margin: 0 0 2px;
  overflow: hidden;
  color: var(--muted);
  font-size: var(--fs-label);
  line-height: 1.5;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.view-routes .route-notes-tip-location > .route-notes-button {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 44px;
  padding: 8px 10px;
  border: 1px solid transparent;
  background: var(--panel2);
  color: var(--text);
  font-size: var(--fs-label);
  font-weight: 600;
}
.view-routes .route-notes-tip-location .route-notes-location-common[aria-pressed="true"] {
  border-color: var(--text);
  background: var(--panel3);
  font-weight: 700;
}
.view-routes .route-notes-marker-field { display: grid; gap: 8px; }
.view-routes .route-notes-marker-field legend {
  margin-bottom: 8px;
  color: var(--muted);
  font-size: var(--fs-label);
  font-weight: 500;
}
.view-routes .route-notes-marker-grid,
.view-routes .route-notes-marker-more-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  min-width: 0;
}
.view-routes .route-notes-marker-grid .route-notes-button,
.view-routes .route-notes-marker-more-grid .route-notes-button {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  min-width: 0;
  min-height: 64px;
  padding: 8px 2px;
  border: 1px solid transparent;
  border-radius: var(--r-md);
  background: var(--panel2);
  color: var(--text);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.3;
  text-align: center;
  overflow-wrap: anywhere;
}
.view-routes .route-notes-marker-grid .route-notes-button > span,
.view-routes .route-notes-marker-more-grid .route-notes-button > span { min-width: 0; }
.view-routes .route-notes-marker-grid .route-notes-button[aria-pressed="true"],
.view-routes .route-notes-marker-more-grid .route-notes-button[aria-pressed="true"] {
  border-color: var(--text);
  background: var(--panel3);
  color: var(--text);
  font-weight: 700;
}
.view-routes .route-notes-marker-field .route-notes-marker-more {
  width: 100%;
  min-height: 44px;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: var(--fs-label);
  font-weight: 600;
}
.view-routes .route-notes-tip-description { display: grid; gap: 10px; min-width: 0; }
.view-routes .route-notes-tip-description .route-notes-coordinate-help {
  color: var(--muted);
  font-size: var(--fs-caption);
  line-height: 1.5;
}
.view-routes .route-notes-workspace[data-editing="true"] .route-notes-sheet-heading {
  grid-column: 1 / -1;
}
.view-routes .route-notes-workspace[data-editing="true"][data-placing="true"] .route-notes-location-menu {
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  padding-block: 8px;
}
.view-routes .route-notes-workspace[data-editing="true"][data-placing="true"] .route-notes-map-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  padding: 0;
}
.view-routes .route-notes-workspace[data-editing="true"][data-placing="true"] .route-notes-map-actions .route-notes-button {
  min-width: 0;
  min-height: 44px;
  padding-inline: 10px;
}
.view-routes .route-notes-form .route-notes-field,
.view-routes .route-notes-form .route-notes-field > input,
.view-routes .route-notes-form .route-notes-field > textarea { min-width: 0; }

/* 위치 유무와 관계없이 한 목록을 읽고, 실제로 있는 종류로만 좁힌다. */
.view-routes .route-notes-tip-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0;
  margin: 0 0 12px;
  padding: 0;
  background: transparent;
}
.view-routes .route-notes-tip-filters .route-notes-button {
  min-width: 0;
  min-height: 44px;
  padding: 8px 12px;
  border: 1px solid transparent;
  background: var(--panel2);
  color: var(--muted);
  font-size: var(--fs-label);
  font-weight: 600;
}
.view-routes .route-notes-tip-filters .route-notes-button[aria-pressed="true"] {
  border-color: var(--text);
  background: var(--panel3);
  color: var(--text);
  font-weight: 700;
}
.view-routes .route-notes-tip-location-badge {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  margin-top: 6px;
  padding: 3px 7px;
  border-radius: var(--r-full);
  background: var(--panel);
  color: var(--muted);
  font-size: var(--fs-caption);
  font-weight: 500;
  line-height: 1.4;
}
.view-routes .route-notes-tip-open {
  display: block;
  width: 100%;
  min-width: 0;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  line-height: 1.45;
  letter-spacing: inherit;
  text-align: left;
  overflow-wrap: anywhere;
  cursor: pointer;
}
.view-routes .route-notes-tip-open:active { opacity: .72; }
.view-routes .route-notes-marker-field .route-notes-button:focus-visible,
.view-routes .route-notes-tip-location .route-notes-button:focus-visible,
.view-routes .route-notes-tip-filters .route-notes-button:focus-visible,
.view-routes .route-notes-tip-open:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--gold) 36%, transparent);
  outline-offset: 2px;
}