/* JEDA Classic 공통 부품 (UI 개편 2단계)
 *
 * tokens.css 다음에 읽는다. 여기서는 색·크기 값을 직접 쓰지 않고 토큰만 쓴다
 * (예외: 1px 선 두께, 아이콘 크기처럼 토큰으로 만들 이유가 없는 값).
 * 서버가 /assets/components.css 로 내준다 (5단계부터).
 *
 * 이름 규칙: 부품 .c-이름, 변형 .c-이름--변형, 부품 안 조각 .c-이름__조각, 상태 .is-상태
 */

/* ── 바탕 ─────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-family);
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  -webkit-font-smoothing: antialiased;
  word-break: keep-all;
  overflow-wrap: anywhere;
}
:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.num { font-variant-numeric: tabular-nums; }
.sub { color: var(--color-text-sub); }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ── 아이콘 ───────────────────────────────────────────────────────────── */
.icon { width: 20px; height: 20px; flex: none; vertical-align: -4px; }
.icon--s { width: 16px; height: 16px; vertical-align: -3px; }
.icon--l { width: 24px; height: 24px; }
.icon--spin { animation: c-spin 900ms linear infinite; }
@keyframes c-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .icon--spin { animation-duration: 2.4s; } }

/* ── 버튼 ─────────────────────────────────────────────────────────────── */
/* 버튼 글자는 동작을 적는다: "가격 저장", "12개 상품 저장" (문구 규칙 2) */
.c-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  height: var(--control-m); padding: 0 var(--space-4);
  border: 1px solid var(--color-line-strong); border-radius: var(--radius-m);
  background: var(--color-surface); color: var(--color-text);
  font: inherit; font-weight: var(--font-weight-strong); white-space: nowrap;
  cursor: pointer; text-decoration: none;
  transition: background var(--transition-fast), border-color var(--transition-fast);
}
.c-btn:hover:not(:disabled) { background: var(--color-surface-sunken); }
.c-btn:disabled, .c-btn.is-busy { cursor: not-allowed; opacity: .55; }
.c-btn.is-busy { opacity: 1; cursor: progress; }
.c-btn--primary { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-text-inverse); }
.c-btn--primary:hover:not(:disabled) { background: var(--color-primary-hover); border-color: var(--color-primary-hover); }
.c-btn--danger { background: var(--color-bad-solid); border-color: var(--color-bad-solid); color: var(--color-text-inverse); }
.c-btn--danger:hover:not(:disabled) { background: var(--color-bad-solid); filter: brightness(.92); }
.c-btn--text { border-color: transparent; background: transparent; color: var(--color-link); padding: 0 var(--space-2); }
.c-btn--text:hover:not(:disabled) { background: var(--color-selected); }
.c-btn--s { height: var(--control-s); padding: 0 var(--space-3); font-size: var(--font-size-small); }
.c-btn--l { height: var(--control-l); padding: 0 var(--space-5); }
.c-btn--icon { width: var(--control-m); padding: 0; }
.c-btn--icon.c-btn--s { width: var(--control-s); }
.c-btn-row { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }

/* ── 배지·상태 ────────────────────────────────────────────────────────── */
.c-badge {
  display: inline-flex; align-items: center; gap: var(--space-1);
  height: 24px; padding: 0 var(--space-2); border-radius: var(--radius-pill);
  font-size: var(--font-size-small); font-weight: var(--font-weight-strong); white-space: nowrap;
  background: var(--color-surface-sunken); color: var(--color-text-sub);
}
.c-badge--ok { background: var(--color-ok-bg); color: var(--color-ok); }
.c-badge--warn { background: var(--color-warn-bg); color: var(--color-warn); }
.c-badge--bad { background: var(--color-bad-bg); color: var(--color-bad); }
.c-badge--unknown { background: var(--color-unknown-bg); color: var(--color-unknown); }
.c-badge--primary { background: var(--color-selected-strong); color: var(--color-primary-text); }

/* 상태 표시: 아이콘 + 글자 (+ 보조 글자). 색만으로 말하지 않는다 (원칙 1) */
.c-status { display: inline-flex; align-items: center; gap: var(--space-1); font-weight: var(--font-weight-strong); white-space: nowrap; }
.c-status__sub { font-weight: var(--font-weight-regular); color: var(--color-text-sub); font-size: var(--font-size-small); margin-left: var(--space-1); }
.c-status--ok { color: var(--color-ok); }
.c-status--busy { color: var(--color-primary-text); }
.c-status--warn { color: var(--color-warn); }
.c-status--bad { color: var(--color-bad); }
.c-status--unknown { color: var(--color-unknown); }

/* ── 입력 ─────────────────────────────────────────────────────────────── */
.c-field { display: grid; gap: var(--space-1); margin-bottom: var(--space-4); }
.c-field__label { font-size: var(--font-size-small); font-weight: var(--font-weight-strong); color: var(--color-text); }
.c-field__help { font-size: var(--font-size-caption); color: var(--color-text-sub); }
.c-field__row { display: flex; justify-content: space-between; gap: var(--space-2); align-items: baseline; }
.c-field__error { display: flex; gap: var(--space-1); align-items: center; font-size: var(--font-size-small); color: var(--color-bad); }
.c-input, .c-select {
  width: 100%; height: var(--control-m); padding: 0 var(--space-3);
  border: 1px solid var(--color-line-strong); border-radius: var(--radius-s);
  background: var(--color-surface); color: var(--color-text);
  font: inherit;
}
.c-input::placeholder { color: var(--color-text-sub); }
.c-input:hover, .c-select:hover { border-color: var(--color-text-sub); }
.c-input:focus, .c-select:focus { outline: 2px solid var(--color-focus); outline-offset: -1px; border-color: var(--color-focus); }
.c-input--num { text-align: right; font-variant-numeric: tabular-nums; }
.c-input[readonly] { background: var(--color-surface-sunken); color: var(--color-text-sub); }
.c-input:disabled, .c-select:disabled { background: var(--color-surface-sunken); color: var(--color-text-sub); cursor: not-allowed; }
.c-field.is-dirty .c-input { background: var(--color-selected); border-color: var(--color-primary); }
.c-field.is-error .c-input { border-color: var(--color-bad); border-width: 2px; padding: 0 calc(var(--space-3) - 1px); }
textarea.c-input { height: auto; min-height: 96px; padding: var(--space-2) var(--space-3); resize: vertical; }

/* 바이트 카운터 — 저울 한도. 판정은 서버(plu.validate)가 하고 화면은 결과만 그린다 */
.c-counter { font-size: var(--font-size-caption); color: var(--color-text-sub); font-variant-numeric: tabular-nums; white-space: nowrap; }
.c-counter.is-near { color: var(--color-warn); font-weight: var(--font-weight-strong); }
.c-counter.is-over { color: var(--color-bad); font-weight: var(--font-weight-strong); }

.c-check { display: inline-flex; align-items: center; gap: var(--space-2); cursor: pointer; min-height: var(--control-s); }
.c-check input { width: 18px; height: 18px; margin: 0; accent-color: var(--color-primary); }

/* 세그먼트 — 보기 전환 (오늘/누적, 매출/건수) */
.c-seg { display: inline-flex; padding: 2px; gap: 2px; border-radius: var(--radius-m); background: var(--color-surface-sunken); border: 1px solid var(--color-line); }
.c-seg button {
  height: calc(var(--control-s) - 6px); padding: 0 var(--space-3); border: 0; border-radius: var(--radius-s);
  background: transparent; color: var(--color-text-sub); font: inherit; font-size: var(--font-size-small); font-weight: var(--font-weight-strong); cursor: pointer;
}
.c-seg button[aria-pressed="true"] { background: var(--color-surface); color: var(--color-primary-text); box-shadow: var(--shadow-card); }

/* ── 패널·카드 ────────────────────────────────────────────────────────── */
.c-panel { background: var(--color-surface); border-radius: var(--radius-m); box-shadow: var(--shadow-card); }
.c-panel__head {
  display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap;
  min-height: 52px; padding: var(--space-2) var(--space-4); border-bottom: 1px solid var(--color-line);
}
.c-panel__title { margin: 0; font-size: var(--font-size-section); font-weight: var(--font-weight-strong); }
.c-panel__note { font-size: var(--font-size-small); color: var(--color-text-sub); }
.c-panel__tools { margin-left: auto; display: flex; gap: var(--space-2); align-items: center; }
.c-panel__body { padding: var(--space-4); }
.c-panel__foot { padding: var(--space-3) var(--space-4); border-top: 1px solid var(--color-line); display: flex; gap: var(--space-2); justify-content: flex-end; }

/* KPI */
.c-kpi { padding: var(--space-4); }
.c-kpi__label { font-size: var(--font-size-small); font-weight: var(--font-weight-strong); color: var(--color-text-sub); }
.c-kpi__value { font-size: var(--font-size-display); font-weight: var(--font-weight-heavy); line-height: var(--line-height-tight); font-variant-numeric: tabular-nums; margin: var(--space-1) 0; }
.c-kpi__unit { font-size: var(--font-size-body); font-weight: var(--font-weight-light); color: var(--color-text-sub); margin-left: 2px; }
.c-kpi__sub { font-size: var(--font-size-caption); color: var(--color-text-sub); display: flex; flex-wrap: wrap; gap: 0 var(--space-1); align-items: center; }
.c-kpi__sub .up, .c-kpi__sub .down { display: inline-flex; align-items: center; gap: 2px; white-space: nowrap; }
.c-kpi__sub .up { color: var(--color-ok); font-weight: var(--font-weight-strong); }
.c-kpi__sub .down { color: var(--color-bad); font-weight: var(--font-weight-strong); }

/* ── 표 ───────────────────────────────────────────────────────────────── */
/* 작업형: 상품 목록·일괄 수정. 연한 머리줄, 줄무늬 없음, 고를 수 있다 */
/* 보고형: 순위·대조·전체 매장. Navy 머리줄, 줄무늬 (BluStoneDXT 표 규칙, D-5) */
.c-table-wrap { overflow-x: auto; }
.c-table { width: 100%; border-collapse: collapse; font-size: var(--font-size-body); }
.c-table th, .c-table td { padding: var(--space-2) var(--space-3); text-align: left; border-bottom: 1px solid var(--color-line); vertical-align: middle; }
.c-table th { font-size: var(--font-size-small); font-weight: var(--font-weight-strong); white-space: nowrap; }
.c-table .is-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.c-table .is-key { color: var(--color-text-sub); font-variant-numeric: tabular-nums; width: 1%; white-space: nowrap; }
.c-table .is-name { font-weight: var(--font-weight-strong); }
.c-table--work th { color: var(--color-text-sub); background: var(--color-surface); position: sticky; top: 0; z-index: 1; }
.c-table--work tbody tr { cursor: pointer; }
.c-table--work tbody tr:hover td { background: var(--color-surface-sunken); }
.c-table--work tbody tr.is-selected td { background: var(--color-selected); }
.c-table--work tbody tr.is-selected td:first-child { box-shadow: inset 3px 0 0 var(--color-primary); }
.c-table--work td.is-dirty { background: var(--color-selected-strong); }
.c-table--work td.is-error { box-shadow: inset 0 0 0 2px var(--color-bad); }
.c-table--report th { background: var(--color-table-head); color: var(--color-table-head-text); }
.c-table--report tbody tr:nth-child(even) td { background: var(--color-surface-sunken); }
.c-table--report tfoot td { font-weight: var(--font-weight-heavy); border-top: 2px solid var(--color-line-strong); border-bottom: 0; }
/* 휴대폰: 작업형 표는 줄마다 카드로 (감사 2.1 — 글자가 한 자씩 세로로 서던 문제) */
@media (max-width: 640px) {
  .c-table--stack thead { display: none; }
  .c-table--stack tr { display: grid; grid-template-columns: auto 1fr auto; gap: 0 var(--space-3); padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--color-line); }
  .c-table--stack td { border: 0; padding: 0; background: transparent !important; }
  .c-table--stack tr.is-selected { background: var(--color-selected); }
  .c-table--stack td.is-key { grid-column: 1; grid-row: 1; }
  .c-table--stack td.is-name { grid-column: 2; grid-row: 1; }
  .c-table--stack td.is-num { grid-column: 3; grid-row: 1; }
  .c-table--stack td[data-label]:not(.is-key):not(.is-name):not(.is-num) { grid-column: 2 / 4; grid-row: 2; font-size: var(--font-size-small); color: var(--color-text-sub); }
}

/* ── 메시지·알림 ──────────────────────────────────────────────────────── */
/* 인라인 메시지: 그 자리 결과 (저장 결과 등). 무슨 일 → 왜 → 어떻게 (문구 규칙 3) */
.c-msg { display: flex; gap: var(--space-2); align-items: flex-start; padding: var(--space-3); border-radius: var(--radius-m); font-size: var(--font-size-small); background: var(--color-surface-sunken); color: var(--color-text); }
.c-msg .icon { margin-top: 1px; }
.c-msg__title { font-weight: var(--font-weight-strong); }
.c-msg--ok { background: var(--color-ok-bg); } .c-msg--ok > .icon { color: var(--color-ok); }
.c-msg--warn { background: var(--color-warn-bg); } .c-msg--warn > .icon { color: var(--color-warn); }
.c-msg--bad { background: var(--color-bad-bg); } .c-msg--bad > .icon { color: var(--color-bad); }
.c-msg--info > .icon { color: var(--color-link); }

/* 배너: 화면 전체에 걸리는 상태 (서버 연결 끊김, 저울 확인 필요). 머리글 바로 아래 */
.c-banner { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-3); align-items: center; padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--color-line); background: var(--color-warn-bg); color: var(--color-text); }
.c-banner > .icon { color: var(--color-warn); }
.c-banner--bad { background: var(--color-bad-bg); } .c-banner--bad > .icon { color: var(--color-bad); }
.c-banner > div:not(.c-banner__actions) { flex: 1 1 240px; min-width: 0; }
.c-banner__actions { margin-left: auto; display: flex; gap: var(--space-2); }

/* 토스트: 저울에 쓰지 않는 가벼운 일의 결과 (복사됨, 내려받기 시작). 4초 뒤 사라진다. 쓰기 결과는 토스트로 알리지 않는다 */
.c-toast-stack { position: fixed; right: var(--space-4); bottom: var(--space-4); display: grid; gap: var(--space-2); z-index: 50; }
.c-toast { display: flex; gap: var(--space-2); align-items: center; padding: var(--space-3) var(--space-4); border-radius: var(--radius-m); background: var(--color-text); color: var(--color-surface); box-shadow: var(--shadow-raised); font-size: var(--font-size-small); }

/* ── 데이터 영역의 다섯 가지 상태 (계획서 6.3) ────────────────────────── */
.c-state { display: grid; justify-items: center; gap: var(--space-2); padding: var(--space-6) var(--space-4); text-align: center; color: var(--color-text-sub); }
.c-state > .icon { width: 32px; height: 32px; }
.c-state__title { color: var(--color-text); font-weight: var(--font-weight-strong); }
.c-state--error > .icon { color: var(--color-bad); }
.c-state--partial > .icon { color: var(--color-warn); }
.c-skeleton { display: block; height: 14px; border-radius: var(--radius-s); background: var(--color-surface-sunken); position: relative; overflow: hidden; }
.c-skeleton + .c-skeleton { margin-top: var(--space-2); }
.c-skeleton::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, var(--color-line), transparent); animation: c-shimmer 1.4s infinite; }
@keyframes c-shimmer { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) { .c-skeleton::after { animation: none; } }

/* ── 진행 ─────────────────────────────────────────────────────────────── */
.c-progress { height: 8px; border-radius: var(--radius-pill); background: var(--color-surface-sunken); overflow: hidden; }
.c-progress__bar { height: 100%; background: var(--color-primary); border-radius: inherit; transition: width var(--transition-fast); }
.c-progress--bad .c-progress__bar { background: var(--color-bad-fill); }

/* ── 대화상자 (<dialog>) — 브라우저 confirm()/prompt() 대신 ──────────── */
.c-dialog { width: min(520px, calc(100vw - 2 * var(--space-4))); padding: 0; border: 0; border-radius: var(--radius-l); background: var(--color-surface); color: var(--color-text); box-shadow: var(--shadow-raised); }
.c-dialog::backdrop { background: rgba(22, 24, 28, .45); }
.c-dialog__head { display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-5) var(--space-5) var(--space-3); }
.c-dialog__head > .icon { width: 24px; height: 24px; margin-top: 2px; }
.c-dialog__title { margin: 0; font-size: var(--font-size-section); font-weight: var(--font-weight-heavy); }
.c-dialog__body { padding: 0 var(--space-5) var(--space-4); }
.c-dialog__foot { display: flex; gap: var(--space-2); justify-content: flex-end; padding: var(--space-3) var(--space-5) var(--space-5); }
.c-dialog--danger .c-dialog__head > .icon { color: var(--color-bad); }
.c-dialog--warn .c-dialog__head > .icon { color: var(--color-warn); }

/* 전/후 비교 — 저울에 쓰기 전 (원칙 2) */
.c-target { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-3); }
.c-diff { width: 100%; border-collapse: collapse; font-size: var(--font-size-small); }
.c-diff th, .c-diff td { padding: var(--space-2); border-bottom: 1px solid var(--color-line); text-align: left; }
.c-diff th { color: var(--color-text-sub); font-weight: var(--font-weight-strong); }
.c-diff .before { color: var(--color-text-sub); text-decoration: line-through; text-decoration-color: var(--color-text-sub); }
.c-diff .after { font-weight: var(--font-weight-strong); }
.c-diff .arrow { color: var(--color-text-sub); width: 1%; }

/* ── 구조: 머리글·메뉴·탭·저울 선택 ──────────────────────────────────── */
/* 머리글은 흰 바탕(--color-surface) — 회사 심볼을 Navy 위에 두지 않는다 (계획서 5.4) */
.c-header { display: flex; align-items: center; gap: var(--space-3); height: var(--header-height); padding: 0 var(--space-4); background: var(--color-surface); border-bottom: 1px solid var(--color-line); }
.c-header__brand { display: flex; align-items: center; gap: var(--space-2); color: var(--color-primary-text); font-weight: var(--font-weight-heavy); font-size: var(--font-size-section); text-decoration: none; white-space: nowrap; }
.c-header__brand img { width: 28px; height: 28px; }
.c-header__spacer { flex: 1; }
.c-header__store { display: flex; gap: var(--space-3); align-items: center; min-width: 0; }
.c-header__store .c-select { font-weight: var(--font-weight-strong); }
.c-header .c-select { width: auto; min-width: 0; flex: 0 1 200px; }
@media (max-width: 640px) { .c-header { gap: var(--space-2); padding: 0 var(--space-3); } .c-header__hide-s { display: none; } }

.c-nav { display: grid; gap: var(--space-4); padding: var(--space-4) var(--space-2); background: var(--color-surface); border-right: 1px solid var(--color-line); align-content: start; }
.c-nav__group { display: grid; gap: 2px; }
.c-nav__title { padding: 0 var(--space-3) var(--space-1); font-size: var(--font-size-caption); font-weight: var(--font-weight-strong); color: var(--color-text-sub); }
.c-nav__item { display: flex; align-items: center; gap: var(--space-3); height: var(--control-m); padding: 0 var(--space-3); border-radius: var(--radius-m); color: var(--color-text); text-decoration: none; font-weight: var(--font-weight-regular); }
.c-nav__item:hover { background: var(--color-surface-sunken); }
.c-nav__item .icon { color: var(--color-text-sub); }
.c-nav__item[aria-current="page"] { background: var(--color-selected); color: var(--color-primary-text); font-weight: var(--font-weight-strong); }
.c-nav__item[aria-current="page"] .icon { color: var(--color-primary-text); }

.c-tabs { display: flex; gap: var(--space-1); border-bottom: 1px solid var(--color-line); overflow-x: auto; }
.c-tabs button { height: var(--control-m); padding: 0 var(--space-3); border: 0; background: none; color: var(--color-text-sub); font: inherit; font-weight: var(--font-weight-strong); cursor: pointer; box-shadow: inset 0 -2px 0 transparent; white-space: nowrap; }
.c-tabs button[aria-selected="true"] { color: var(--color-primary-text); box-shadow: inset 0 -2px 0 var(--color-primary); } /* 활성 탭 밑줄 — BluStoneDXT 가 허락한 유일한 밑줄 */

/* 저울 선택 — 저울 편집 화면이 함께 쓴다 (계획서 8.1). 고친 내용이 어느 저울로 가는지 늘 보인다 */
.c-scale-pick { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; padding: var(--space-2) var(--space-4); background: var(--color-surface); border-bottom: 1px solid var(--color-line); font-size: var(--font-size-small); }
.c-scale-pick .c-select { width: auto; height: var(--control-s); font-size: var(--font-size-small); }

/* ── 캘린더 칸 ────────────────────────────────────────────────────────── */
.c-cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; }
.c-cal__day { min-height: 64px; padding: var(--space-1) var(--space-2); border-radius: var(--radius-s); background: var(--color-surface); border: 1px solid var(--color-line); font-size: var(--font-size-caption); display: grid; align-content: space-between; text-align: left; color: var(--color-text); font-family: inherit; cursor: pointer; }
.c-cal__day b { font-size: var(--font-size-small); font-variant-numeric: tabular-nums; white-space: nowrap; }
/* 휴대폰: 칸이 좁아 금액을 줄여 쓴다 (data-short="8천", "15만") — 정확한 값은 날짜를 누르면 */
@media (max-width: 640px) {
  .c-cal__day { min-height: 52px; padding: 2px var(--space-1); }
  .c-cal__day b[data-short] { font-size: 0; }
  .c-cal__day b[data-short]::after { content: attr(data-short); font-size: var(--font-size-caption); }
}
.c-cal__day.is-unknown { background: var(--color-unknown-bg); border-style: dashed; border-color: var(--color-unknown-fill); color: var(--color-unknown); cursor: default; }
.c-cal__day.is-today { box-shadow: inset 0 0 0 2px var(--color-primary); }
.c-cal__day.is-selected { outline: 2px solid var(--color-focus); outline-offset: 1px; }
.c-cal__day.is-future { background: transparent; color: var(--color-text-sub); cursor: default; }
.c-cal__day.lv-1 { background: var(--cal-1); color: var(--cal-on-1); border-color: transparent; }
.c-cal__day.lv-2 { background: var(--cal-2); color: var(--cal-on-2); border-color: transparent; }
.c-cal__day.lv-3 { background: var(--cal-3); color: var(--cal-on-3); border-color: transparent; }
.c-cal__day.lv-4 { background: var(--cal-4); color: var(--cal-on-4); border-color: transparent; }
.c-cal__day.lv-5 { background: var(--cal-5); color: var(--cal-on-5); border-color: transparent; }

/* ── 앱 틀 (3단계 정보 구조) ──────────────────────────────────────────── */
/* 넓은 화면: 머리글 + 왼쪽 메뉴(240px) + 본문. ≤1024px: 메뉴는 아이콘만(64px). ≤640px: 메뉴는 서랍(☰)으로 */
.c-app { display: grid; grid-template-columns: 240px minmax(0, 1fr); grid-template-rows: var(--header-height) auto minmax(0, 1fr); min-height: 100vh; background: var(--color-bg); }
.c-app > .c-header { grid-column: 1 / -1; position: sticky; top: 0; z-index: 30; }
.c-app > .c-banner-area { grid-column: 1 / -1; }
.c-app > .c-nav { grid-row: 3; position: sticky; top: var(--header-height); height: calc(100vh - var(--header-height)); overflow-y: auto; }
.c-app > .c-main { grid-row: 3; min-width: 0; }
.c-header__menu { display: none; }
/* 메뉴 안 매장 선택은 휴대폰 서랍에서만 (넓은 화면은 머리글에 있다) */
.c-app > .c-nav .c-nav__store { display: none; }
.c-nav__store { display: grid; gap: var(--space-1); padding: var(--space-2) var(--space-3) var(--space-3); border-bottom: 1px solid var(--color-line); margin: 0 calc(-1 * var(--space-2)) 0; }
.c-nav__store .c-select { height: var(--control-m); font-weight: var(--font-weight-strong); }
.c-nav__divider { height: 1px; background: var(--color-line); margin: 0 var(--space-1); }
.c-nav__item .c-badge { margin-left: auto; height: 20px; }
@media (max-width: 1024px) {
  .c-app { grid-template-columns: 64px minmax(0, 1fr); }
  .c-app > .c-nav { padding: var(--space-3) var(--space-1); }
  .c-app > .c-nav .c-nav__title, .c-app > .c-nav .c-nav__label, .c-app > .c-nav .c-nav__item .c-badge { display: none; }
  .c-app > .c-nav .c-nav__item { justify-content: center; padding: 0; }
}
@media (max-width: 640px) {
  .c-app { grid-template-columns: minmax(0, 1fr); }
  .c-header__menu { display: inline-flex; }
  .c-app > .c-nav { position: fixed; z-index: 40; top: var(--header-height); left: 0; bottom: 0; height: auto; width: min(300px, 86vw); padding: var(--space-3) var(--space-2);
                    transform: translateX(-100%); visibility: hidden; transition: transform var(--transition-fast), visibility 0s linear var(--transition-fast); box-shadow: var(--shadow-raised); }
  .c-app > .c-nav .c-nav__title, .c-app > .c-nav .c-nav__label, .c-app > .c-nav .c-nav__item .c-badge { display: revert; }
  .c-app > .c-nav .c-nav__item { justify-content: flex-start; padding: 0 var(--space-3); }
  .c-app > .c-nav .c-nav__store { display: grid; }
  .c-app.is-nav-open > .c-nav { transform: none; visibility: visible; transition: transform var(--transition-fast); }  /* 닫힌 서랍의 링크는 Tab 으로도 가지 않게 */
  .c-app.is-nav-open::after { content: ""; position: fixed; inset: var(--header-height) 0 0 0; background: rgba(22, 24, 28, .45); z-index: 35; }
  .c-app > .c-main { grid-row: 3; }
}

/* 화면 머리: 제목 + 범위(어느 매장·저울) + 도구. 화면마다 맨 위 한 줄 */
.c-page-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); padding: var(--space-4) var(--space-5) var(--space-3); }
.c-page-head__title { margin: 0; font-size: var(--font-size-title); font-weight: var(--font-weight-heavy); }
.c-page-head__scope { display: flex; gap: var(--space-1); align-items: center; color: var(--color-text-sub); font-size: var(--font-size-small); }
.c-page-head__tools { margin-left: auto; display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
/* 필터 줄: 기간·저울·보기 전환. 차트·표 위에 한 줄 (dataviz: 필터는 차트 위 한 줄) */
.c-filters { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); padding: 0 var(--space-5) var(--space-3); }
.c-filters .c-select, .c-filters .c-input { width: auto; height: var(--control-s); font-size: var(--font-size-small); }
.c-page { padding: 0 var(--space-5) var(--space-6); display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); align-content: start; }
@media (max-width: 640px) {
  .c-page-head { padding: var(--space-3) var(--space-3) var(--space-2); }
  .c-filters { padding: 0 var(--space-3) var(--space-2); }
  .c-page { padding: 0 var(--space-3) var(--space-5); gap: var(--space-3); }
}

/* 계정 메뉴 (머리글 오른쪽) — <details> 로 연다 */
.c-menu { position: relative; }
.c-menu > summary { list-style: none; cursor: pointer; }
.c-menu > summary::-webkit-details-marker { display: none; }
.c-menu__list { position: absolute; right: 0; top: calc(100% + var(--space-1)); min-width: 220px; padding: var(--space-1); background: var(--color-surface); border: 1px solid var(--color-line); border-radius: var(--radius-m); box-shadow: var(--shadow-raised); z-index: 45; display: grid; }
.c-menu__list a, .c-menu__list button { display: flex; gap: var(--space-2); align-items: center; height: var(--control-m); padding: 0 var(--space-3); border: 0; border-radius: var(--radius-s); background: none; color: var(--color-text); font: inherit; text-decoration: none; cursor: pointer; text-align: left; }
.c-menu__list a:hover, .c-menu__list button:hover { background: var(--color-surface-sunken); }
.c-menu__head { padding: var(--space-2) var(--space-3); font-size: var(--font-size-small); color: var(--color-text-sub); border-bottom: 1px solid var(--color-line); margin-bottom: var(--space-1); }

/* 자리 표시 — 와이어프레임에서 아직 그리지 않은 영역 */
.c-wire { display: grid; place-items: center; min-height: 120px; border: 1px dashed var(--color-line-strong); border-radius: var(--radius-m); color: var(--color-text-sub); font-size: var(--font-size-small); text-align: center; padding: var(--space-3); background: var(--color-surface); }