/* ============================================================================
   셀러 콘솔 크롬·폴리시 — storefront.css 뒤에 로드(오버라이드 우위).
   [C0 재편] 크롬 골격(.console-*)을 storefront.css에서 이곳으로 이동 — 소유 분리:
   storefront.css=구매자 전용, console.css=콘솔 전용. 이후 콘솔 리스타일(장부 책상 이관)은
   이 파일과 [data-surface="platform"] 스코프 오버라이드에서만 진행해 스토어프론트 회귀를
   구조적으로 차단한다. 구 노코드 에디터 고아 스타일(.design-editor·.de-*·.ai-*·.guide-* 등
   224줄)은 S8 컷오버로 사망 — C0에서 삭제 완료(전 템플릿 사용처 0 확인).
   토큰만 인용(매직넘버 없음), transform/opacity·색 트랜지션만(레이아웃 애니메이트 금지).
   ============================================================================ */

/* ── G마켓 산스 — 장부 책상 크롬 글꼴(C1에서 font-family 적용 예정, C0은 선언만 —
   참조 전엔 브라우저가 다운로드하지 않으므로 렌더 파리티에 무영향). 오프라인 폴백 Pretendard. ── */
@font-face{ font-family:'GmarketSans'; font-weight:300; font-display:swap;
  src:url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansLight.woff') format('woff'); }
@font-face{ font-family:'GmarketSans'; font-weight:500; font-display:swap;
  src:url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansMedium.woff') format('woff'); }
@font-face{ font-family:'GmarketSans'; font-weight:700; font-display:swap;
  src:url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansBold.woff') format('woff'); }

/* ============================================================================
   §1 크롬 골격 — storefront.css 149~171행에서 무수정 이동(#4a).
   데스크톱 좌측 sticky, 모바일 오프캔버스 드로어.
   ============================================================================ */
.console-toggle { display: inline-flex; align-items: center; justify-content: center; min-width: var(--tap-min); min-height: var(--tap-min); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); color: var(--color-ink); cursor: pointer; }
.console-toggle:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.console-shell { max-width: var(--container-max); margin-inline: auto; padding: var(--space-6) var(--gutter); display: grid; gap: var(--space-6); }
.console-main { min-width: 0; }
.console-main .container { max-width: none; padding-inline: 0; }  /* 페이지 자체 .container 중첩 무력화 */
.console-sidebar nav { display: flex; flex-direction: column; gap: 2px; }
.console-nav__group { margin: var(--space-4) 0 var(--space-1); padding-inline: var(--space-3); font-size: var(--fs-xs); font-weight: var(--fw-bold); letter-spacing: 0.08em; color: var(--color-ink-subtle); }
.console-nav__group:first-child { margin-top: 0; }
.console-nav__link { display: flex; align-items: center; min-height: var(--tap-min); padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); color: var(--color-ink-muted); font-size: var(--fs-sm); font-weight: var(--fw-medium); }
.console-nav__link:hover { background: var(--color-surface-2); color: var(--color-ink); }
.console-nav__link.is-current { background: var(--color-surface-2); color: var(--color-ink); font-weight: var(--fw-semibold); box-shadow: inset 3px 0 0 var(--color-primary-strong); }
@media (min-width: 60rem) {
  .console-toggle { display: none; }
  .console-shell { grid-template-columns: 14rem minmax(0, 1fr); }
  .console-sidebar { position: sticky; top: calc(4rem + var(--space-4)); align-self: start; max-height: calc(100vh - 5rem); overflow-y: auto; }
  .console-backdrop { display: none; }
}
@media (max-width: 59.9375rem) { /* 60rem이면 min-width:60rem 블록과 정확히 960px에서 중첩 —
  토글 숨김+오프캔버스가 동시 적용돼 내비 도달 불가(코드리뷰 확정) */
  .console-sidebar { position: fixed; top: 0; left: 0; bottom: 0; width: 16rem; z-index: var(--z-modal); padding: var(--space-5) var(--space-4); background: var(--color-surface); border-right: 1px solid var(--color-border); transform: translateX(-100%); transition: transform var(--dur-enter) var(--ease-out); overflow-y: auto; }
  .console-sidebar--open { transform: none; }
  .console-backdrop { position: fixed; inset: 0; z-index: var(--z-overlay); background: color-mix(in oklch, var(--color-ink) 45%, transparent); }
}

/* ============================================================================
   §2 폴리시 — 관리자 UI 깊이·피드백·리듬 보강(기존 유지).
   ============================================================================ */

/* 폼 카드 깊이 — 정적 테두리만 있던 카드에 미세 그림자 + hover 상승감. */
.console-main .form-card {
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--dur-enter) var(--ease-out),
              border-color var(--dur-enter) var(--ease-out);
}
.console-main .form-card:hover {
  box-shadow: var(--shadow-md);
  border-color: color-mix(in oklab, var(--color-border) 60%, var(--color-primary));
}

/* 사이드바 링크 — 상태 전환을 부드럽게(즉시 점프 제거). */
.console-nav__link {
  transition: background var(--dur-fast) var(--ease-standard),
              color var(--dur-fast) var(--ease-standard),
              box-shadow var(--dur-fast) var(--ease-standard);
}

/* 버튼 — 상호작용 트랜지션 + 누름 피드백(비활성 제외). */
.console-main .btn {
  transition: background var(--dur-fast) var(--ease-standard),
              color var(--dur-fast) var(--ease-standard),
              box-shadow var(--dur-fast) var(--ease-standard),
              transform var(--dur-fast) var(--ease-out);
}
.console-main .btn:not(:disabled):active { transform: translateY(1px); }

/* 섹션 제목 리듬 — 큰 헤딩 자간 정돈. */
.console-main .section__title { letter-spacing: var(--tracking-tight); }

/* 빈 상태 — 관리자 톤으로 살짝 정돈(테두리 점선 유지, 여백 안정). */
.console-main .empty { background: var(--color-surface); }

@media (prefers-reduced-motion: reduce) {
  .console-main .form-card,
  .console-nav__link,
  .console-main .btn { transition-duration: 0.01ms; }
  .console-main .btn:not(:disabled):active { transform: none; }
}

/* ============================================================================
   §3 조밀화 — 콘솔 전역 밀도(기존 유지).
   --tap-min(44px)은 스토어프론트 고객 터치 타겟과 공유되는 전역 토큰이라 그대로 두고,
   .console-shell 스코프에서만 재정의해 하위 .btn/.console-nav__link 등에 캐스케이드시킨다
   — 스토어프론트·랜딩·체크아웃은 무영향(포인터가 아닌 실제 고객 터치 필요).
   ============================================================================ */
.console-shell { --tap-min: 2.125rem; /* 44px → 34px: 포인터 기반 콘솔은 터치 타겟 불필요 */ }
.console-shell .btn { padding: 0 var(--space-4); }
.console-shell .btn--lg { padding-inline: var(--space-5); }
.console-shell .console-nav__link { padding: var(--space-1) var(--space-3); font-size: var(--fs-sm); }
/* 사이드바 세로 압축 — 그룹 간격을 좁혀 전체 메뉴가 스크롤 없이 한 화면에 들어오게(사용자 요청). */
.console-shell .console-nav__group { margin: var(--space-2) 0 2px; }
.console-shell .console-nav__group:first-child { margin-top: 0; }
.console-main .form-card { padding: var(--space-4); margin-bottom: var(--space-3); }
.console-main .form-card__title { margin-bottom: var(--space-3); }
.console-main .field { gap: 3px; margin-bottom: var(--space-3); }
.console-main .field__input { padding: var(--space-2) var(--space-3); font-size: var(--fs-sm); }
.console-main .admin-table th, .console-main .admin-table td { padding: var(--space-2) var(--space-3); }
.console-main .summary-card, .console-main .checkout .form-card { padding: var(--space-4); }

/* ============================================================================
   §4 장부 책상 크롬(C1) — 랜딩과 동일한 남보라 다크 고정(사용자 확정 1).
   공유 셀렉터(.site-header/.brand/.header-link — storefront.css 소유)의 콘솔 변형은
   반드시 html[data-surface="platform"] 스코프로만 건다(소유 계약 §머리말). 콘솔 신규
   클래스(.logo-word/.shop-sign)는 스코프 불요(구매자 미사용)지만 일관성 위해 동일 스코프.
   색은 --pf-*(랜딩 확정 hex) 직접 인용. 대비(계산 검증): 본문 20.48 · dim on panel 5.99 ·
   nav 그룹 dim 6.28 · 시안 강조 11.56 · 활성 흰 글자 on 퍼플소프트 배경 ≥ 본문 기준 충족.
   ============================================================================ */

/* 접근성 유틸 — 콘솔 전용(스튜디오와 동일 정의) */
html[data-surface="platform"] .sr-only { position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* 글꼴·책상면 — 전 콘솔 G마켓 산스(시안 v3 확정: "한눈에 보기" 글꼴로 단일화).
   G마켓 산스는 400 웨이트가 없어 500을 본문 기본으로 명시(폴백 Pretendard도 자연). */
html[data-surface="platform"] body {
  font-family: "GmarketSans", "Pretendard Variable", Pretendard, "Apple SD Gothic Neo",
               "Malgun Gothic", "맑은 고딕", system-ui, sans-serif;
  font-weight: 500; letter-spacing: -0.01em;
  /* 랜딩 히어로의 퍼플 글로우를 책상 상단광으로 + 미세 도트 결(시안 v3 책상면) */
  background:
    radial-gradient(120% 60% at 50% -10%, rgba(112, 0, 255, 0.14), transparent 60%),
    radial-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1.5px) 0 0 / 26px 26px,
    var(--pf-bg);
  background-attachment: fixed;
}

/* 상단바 — 최심부 다크, 헤어라인 구분 */
html[data-surface="platform"] .site-header {
  background: var(--pf-bg);
  border-bottom: 1px solid #1d1d40;
}
html[data-surface="platform"] .brand { display: inline-flex; align-items: center; text-decoration: none; }
html[data-surface="platform"] .logo-word {
  font-size: var(--fs-sm); font-weight: 700; letter-spacing: 0.1em;
  color: var(--pf-dim); user-select: none; white-space: nowrap;
}
html[data-surface="platform"] .logo-word b {
  font-weight: 700; margin-left: 2px;
  background: var(--pf-gradient);
  -webkit-background-clip: text; background-clip: text; color: transparent; /* 랜딩 로고 그라데이션(장식) */
}
html[data-surface="platform"] .shop-sign {
  display: inline-flex; align-items: baseline; gap: var(--space-2);
  min-width: 0; padding-left: var(--space-4); margin-left: var(--space-2);
  border-left: 1px solid #1d1d40;
}
html[data-surface="platform"] .shop-label {
  font-size: 11px; font-weight: 700; letter-spacing: 0.18em; color: var(--pf-dim); flex: none;
}
html[data-surface="platform"] .shop-name {
  font-weight: 700; font-size: var(--fs-base); color: var(--pf-text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 15rem;
}
html[data-surface="platform"] .header-link {
  color: var(--pf-dim);
  transition: color var(--dur-fast) var(--ease-standard), background var(--dur-fast) var(--ease-standard);
}
html[data-surface="platform"] .header-link:hover {
  color: var(--pf-text); background: var(--pf-glass);
}
html[data-surface="platform"] .header-link--studio {
  border: 1px solid var(--pf-border); border-radius: var(--radius-md);
}
html[data-surface="platform"] .header-link--studio:hover { border-color: var(--pf-cyan); }

/* 좌 서랍(내비) — 패널 다크 + 퍼플 활성 */
.console-sidebar { background: var(--pf-panel); border-right: 1px solid var(--pf-bg);
  border-radius: 0; padding-block: var(--space-4); }
.console-nav__group { color: var(--pf-dim); letter-spacing: 0.14em; font-size: 11px; }
.console-nav__link { color: var(--pf-dim); font-weight: 600; }
.console-nav__link:hover { background: var(--pf-glass); color: var(--pf-text); }
.console-nav__link.is-current {
  background: rgba(112, 0, 255, 0.16); color: var(--pf-text);
  box-shadow: inset 3px 0 0 var(--pf-purple);
}

/* 데스크톱에서 서랍을 책상과 분리된 패널 카드로 */
@media (min-width: 60rem) {
  .console-sidebar { border: 1px solid #1d1d40; border-radius: var(--radius-lg); padding: var(--space-4) var(--space-3); }
}

/* 푸터 — 책상 아래 잔잔하게 */
html[data-surface="platform"] .site-footer { border-top: 1px solid #1d1d40; background: transparent; }

/* ============================================================================
   §5 종이(데이터 카드) 계층(C2) — "다크 책상 위 흰 종이".
   핵심 기법: 종이 컨테이너에서 --color-* 별칭을 --paper-* 값으로 **지역 재정의**해
   내부의 기존 컴포넌트(버튼·필드·테이블·배지)가 무수정으로 종이 잉크를 상속하게 한다.
   전 쌍 AA는 tokens-platform.css --paper-* 주석·test_console_css_ownership.py 게이트 참조.
   ============================================================================ */
.console-main :is(.form-card, .stat-card, .summary-card, .store-url-card, .empty, .paper),
.modal,
.console-main .admin-table {
  --color-bg: var(--paper);
  --color-surface: var(--paper);
  --color-surface-2: var(--paper-2);
  --color-border: var(--paper-line);
  --color-ink: var(--paper-ink);
  --color-ink-muted: var(--paper-dim);
  --color-ink-subtle: var(--paper-faint);
  --color-primary: var(--paper-link);
  --color-primary-strong: var(--paper-link);
  --color-on-primary: #ffffff;
  --color-accent: var(--paper-accent);
  --color-on-accent: #ffffff;
  --color-focus: var(--paper-link);
  background: var(--paper);
  color: var(--paper-ink);
}
.console-main :is(.form-card, .stat-card, .summary-card, .store-url-card, .paper),
.modal {
  border-color: transparent; border-radius: 16px;
  box-shadow: 0 1px 2px rgba(3, 3, 18, 0.35), 0 18px 44px -18px rgba(3, 3, 18, 0.5);
}
.console-main .admin-table { border-radius: 16px; overflow: hidden; }
html[data-surface="platform"] .modal-overlay { background: rgba(3, 3, 18, 0.62); }

/* ── 화면 머리(시안 sc-head) — 책상 위 흰 제목 + 보조문 ── */
.sc-head { display: flex; align-items: baseline; gap: var(--space-4); flex-wrap: wrap;
  margin-bottom: var(--space-5); }
.sc-head h1 { font-size: var(--fs-2xl); font-weight: 700; letter-spacing: var(--tracking-tight);
  color: var(--pf-text); margin: 0; }
.sc-sub { font-size: var(--fs-sm); color: var(--pf-dim); }
.sc-act { margin-left: auto; display: flex; gap: var(--space-2); }

/* ── 붙임 노트(시안 note) — 테이프 붙은 요약 종이 ── */
.notes { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4);
  margin-bottom: var(--space-5); }
@media (max-width: 70rem) { .notes { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 40rem) { .notes { grid-template-columns: 1fr; } }
.note { position: relative; padding: var(--space-4) var(--space-4) var(--space-4);
  transition: transform 0.12s ease, box-shadow 0.12s ease; }
/* 붙임 노트 전체를 클릭 가능하게 — 카드 위 stretched 링크(내부 텍스트 요소보다 아래 z-index라 셀렉션 방해 없음). */
.note-link { position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.note:has(.note-link):hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(13, 13, 36, 0.12); cursor: pointer; }
.note-link:focus-visible { outline: 2px solid var(--accent, #7c5cff); outline-offset: 2px; }
.note::before { content: ""; position: absolute; top: -7px; left: 50%; z-index: 2;
  transform: translateX(-50%) rotate(-1.5deg); width: 52px; height: 14px; border-radius: 2px;
  background: rgba(150, 122, 224, 0.30); box-shadow: 0 1px 2px rgba(13, 13, 36, 0.15); }
.note .n-k { font-size: var(--fs-xs); font-weight: 700; color: var(--paper-dim); }
.note .n-v { font-size: var(--fs-3xl); font-weight: 700; margin-top: var(--space-1);
  font-variant-numeric: tabular-nums; letter-spacing: var(--tracking-tight); }
.note .n-v small { font-size: var(--fs-base); color: var(--paper-dim); margin-left: 2px; font-weight: 500; }
.n-d { display: inline-flex; align-items: center; gap: 4px; margin-top: var(--space-2);
  font-size: var(--fs-xs); font-weight: 700; padding: 3px 9px; border-radius: var(--radius-full); }
.n-d.up { color: var(--paper-ok); background: color-mix(in oklab, var(--paper-ok) 12%, var(--paper)); }
.n-d.down { color: var(--paper-danger); background: color-mix(in oklab, var(--paper-danger) 10%, var(--paper)); }
.n-d.flat { color: var(--paper-dim); background: var(--paper-2); }

/* ── 오늘의 할 일 스트립(W1) — 상태별 대기 건수 가로 스트립 + 딥링크. 종이/다크 토큰만(카페24 블루 금지). */
.todo-strip { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2);
  margin-bottom: var(--space-5); padding: var(--space-3) var(--space-4);
  background: var(--paper); border: 1px solid var(--paper-line); border-radius: var(--radius-lg); }
.todo-strip__title { font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.06em;
  color: var(--paper-dim); margin-right: var(--space-2); }
.todo-strip__item { display: inline-flex; align-items: baseline; gap: 6px;
  padding: 6px var(--space-3); border-radius: var(--radius-full);
  background: var(--paper-2); color: var(--paper-ink);
  font-size: var(--fs-sm); font-weight: 600; text-decoration: none;
  transition: background var(--dur-fast) var(--ease-standard), transform 0.12s ease; }
.todo-strip__item:hover { background: color-mix(in oklab, var(--paper-accent) 12%, var(--paper));
  transform: translateY(-1px); }
.todo-strip__item:focus-visible { outline: 2px solid var(--paper-accent); outline-offset: 2px; }
.todo-strip__count { font-weight: 800; font-variant-numeric: tabular-nums; color: var(--paper-accent); }
.todo-strip__label { color: var(--paper-dim); }
.todo-strip__item.is-empty { background: transparent; cursor: default; }
.todo-strip__item.is-empty .todo-strip__count,
.todo-strip__item.is-empty .todo-strip__label { color: var(--paper-faint); font-weight: 600; }

/* ── 주문 칩 옆 건수(W1) + 셀러 라벨 칩 ── */
.chip__n { margin-left: 4px; font-weight: 700; font-variant-numeric: tabular-nums; opacity: 0.72; }
.label-chips { display: inline-flex; flex-wrap: wrap; gap: 4px; margin-left: 4px; vertical-align: middle; }
.label-chip { display: inline-block; padding: 1px 8px; border-radius: var(--radius-full);
  font-size: var(--fs-xs); font-weight: 600; background: var(--paper-2); color: var(--paper-dim);
  border: 1px solid var(--paper-line); }

/* ── 쪽지(시안 slip) — 할 일 목록 종이 ── */
.slip { padding: var(--space-4) var(--space-4); }
.slip h3 { font-size: var(--fs-sm); font-weight: 700; margin: 0 0 var(--space-2);
  padding-bottom: var(--space-2); border-bottom: 2px solid var(--paper-ink); }
.slip ul { list-style: none; margin: 0; padding: 0; }
.slip li { display: flex; gap: var(--space-2); align-items: baseline;
  padding: var(--space-2) 0; font-size: var(--fs-sm);
  border-bottom: 1px dashed var(--paper-line); }
.slip li:last-child { border-bottom: 0; }
.slip li a { color: inherit; font-weight: 600; }
.slip li a:hover { color: var(--paper-accent); }
.slip .when { margin-left: auto; color: var(--paper-faint); font-size: var(--fs-xs); flex: none; }
.slip .badge-n { flex: none; min-width: 22px; height: 22px; padding: 0 6px; border-radius: var(--radius-full);
  background: var(--paper-accent); color: #fff; font-size: var(--fs-xs); font-weight: 700;
  display: inline-grid; place-items: center; transform: translateY(3px); }

/* ── 2열 책상 배치(시안 duo) ── */
.duo { display: grid; grid-template-columns: minmax(0, 1fr) 19rem; gap: var(--space-4);
  align-items: start; margin-bottom: var(--space-5); }
@media (max-width: 70rem) { .duo { grid-template-columns: 1fr; } }
.stack { display: flex; flex-direction: column; gap: var(--space-4); }

/* ── 원장 표머리(시안 ledger) — 종이 카드 안 표 ── */
.ledger { overflow: hidden; }
.ledger .lg-head { display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-4) var(--space-4) var(--space-3);
  border-bottom: 2px solid var(--paper-ink); }
.ledger .lg-head h2 { font-size: var(--fs-base); font-weight: 700; margin: 0; }
.ledger .lg-more { margin-left: auto; font-size: var(--fs-sm); font-weight: 700;
  color: var(--paper-accent); }
.ledger table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.ledger thead th { text-align: left; padding: var(--space-2) var(--space-4);
  font-size: 11px; font-weight: 700; letter-spacing: 0.1em; color: var(--paper-dim);
  border-bottom: 1px solid var(--paper-line); }
.ledger tbody td { padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--paper-line); vertical-align: middle; }
.ledger tbody tr:last-child td { border-bottom: 0; }
.ledger tbody tr { transition: background var(--dur-fast) var(--ease-standard); }
.ledger tbody tr:hover { background: var(--paper-2); }
.ledger td.r, .ledger th.r { text-align: right; }
.ledger .t-strong { font-weight: 700; }
.ledger .t-dim { color: var(--paper-dim); }
.ledger .num { font-variant-numeric: tabular-nums; }

/* ── 온보딩 체크리스트 접기(전 단계 완료 시 기본 접힘) ── */
.onboard-fold > summary { cursor: pointer; list-style: none; display: flex; align-items: center;
  gap: var(--space-2); color: var(--pf-dim); font-weight: 700; font-size: var(--fs-base);
  padding: var(--space-2) 0; }
.onboard-fold > summary::-webkit-details-marker { display: none; }
.onboard-fold > summary::before { content: "▸"; transition: transform var(--dur-fast) var(--ease-out); }
.onboard-fold[open] > summary::before { transform: rotate(90deg); }
.onboard-fold > summary:hover { color: var(--pf-text); }

/* ============================================================================
   §6 주문 서랍·재고 스테퍼·일괄 바(C3) — 상호작용 부품. 동작은 /static/js/console.js.
   ============================================================================ */

/* 주문 서랍 — 행 클릭 시 우측에서 등장(페이지 이동 없음). 종이 면(--paper-* 지역 재정의). */
.drawer-veil { position: fixed; inset: 0; background: rgba(3, 3, 18, 0.62);
  z-index: calc(var(--z-modal, 700) - 1); opacity: 0; pointer-events: none;
  transition: opacity var(--dur-enter) var(--ease-out); }
body.drawer-open .drawer-veil { opacity: 1; pointer-events: auto; }
.drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(28rem, 94vw);
  z-index: var(--z-modal, 700); display: flex; flex-direction: column;
  background: var(--paper); color: var(--paper-ink);
  --color-bg: var(--paper); --color-surface: var(--paper); --color-surface-2: var(--paper-2);
  --color-border: var(--paper-line); --color-ink: var(--paper-ink);
  --color-ink-muted: var(--paper-dim); --color-ink-subtle: var(--paper-faint);
  --color-primary: var(--paper-link); --color-primary-strong: var(--paper-link);
  --color-on-primary: #ffffff; --color-accent: var(--paper-accent); --color-on-accent: #ffffff;
  --color-focus: var(--paper-link);
  box-shadow: -20px 0 60px rgba(0, 0, 12, 0.5);
  transform: translateX(103%); transition: transform var(--dur-enter) var(--ease-out); }
body.drawer-open .drawer { transform: none; }
@media (prefers-reduced-motion: reduce) { .drawer, .drawer-veil { transition-duration: 0.01ms; } }
.dw-head { display: flex; align-items: center; gap: var(--space-2);
  padding: var(--space-4) var(--space-4) var(--space-3);
  border-bottom: 2px solid var(--paper-ink); }
.dw-head h2 { font-size: var(--fs-base); font-weight: 700; margin: 0; font-variant-numeric: tabular-nums; }
.dw-x { margin-left: auto; width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center; color: var(--paper-dim); border: 0; background: none; cursor: pointer; }
.dw-x:hover { background: var(--paper-2); color: var(--paper-ink); }
.dw-body { flex: 1; overflow: auto; padding: var(--space-4);
  display: flex; flex-direction: column; gap: var(--space-4); }
.dw-sec h4 { font-size: 11px; font-weight: 700; letter-spacing: 0.1em;
  color: var(--paper-dim); margin: 0 0 var(--space-2); }
.dw-line { display: flex; justify-content: space-between; gap: var(--space-3);
  padding: var(--space-2) 0; font-size: var(--fs-sm);
  border-bottom: 1px dashed var(--paper-line); }
.dw-line:last-child { border-bottom: 0; }
.dw-foot { padding: var(--space-3) var(--space-4) var(--space-4);
  border-top: 1px solid var(--paper-line); display: flex; gap: var(--space-2); }
.dw-foot form { flex: 1; display: flex; }
.dw-foot .btn { flex: 1; }
.dw-empty { padding: var(--space-6); text-align: center; color: var(--paper-dim); }
tr.rowlink { cursor: pointer; }

/* 재고 스테퍼 — 상품 목록 인라인 ± */
.stepper { display: inline-flex; align-items: center; border: 1.5px solid var(--paper-line);
  border-radius: var(--radius-full); overflow: hidden; vertical-align: middle; }
.stepper button { width: 26px; height: 24px; font-weight: 700; color: var(--paper-dim);
  border: 0; background: none; cursor: pointer; font-size: var(--fs-sm); line-height: 1; }
.stepper button:hover:not(:disabled) { background: var(--paper-2); color: var(--paper-ink); }
.stepper button:disabled { opacity: 0.35; cursor: default; }
.stepper .st-v { min-width: 34px; text-align: center; font-size: var(--fs-xs); font-weight: 700;
  font-variant-numeric: tabular-nums; }
.stock-low { color: var(--paper-danger); font-weight: 700; }

/* 일괄 바 — 체크 선택 시 표 위에 나타나는 액션 줄 */
.bulk-bar { display: none; align-items: center; gap: var(--space-3);
  margin-bottom: var(--space-3); padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-full); background: var(--pf-panel);
  border: 1px solid var(--pf-border); color: var(--pf-text); font-size: var(--fs-sm); }
.bulk-bar.is-on { display: flex; }
.bulk-bar .bb-count { font-weight: 700; color: var(--pf-cyan); font-variant-numeric: tabular-nums; }
.bulk-bar .btn { margin-left: auto; }

/* 콘솔 토스트(다크 크롬 위) */
.console-toasts { position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: var(--space-2);
  z-index: var(--z-toast, 800); }
.console-toast { display: flex; align-items: center; gap: var(--space-2);
  padding: 11px 18px; border-radius: var(--radius-full);
  background: var(--pf-panel); color: var(--pf-text); border: 1px solid var(--pf-border);
  font-size: var(--fs-sm); font-weight: 600;
  box-shadow: 0 10px 30px -8px rgba(0, 0, 6, 0.6); }
@media (prefers-reduced-motion: no-preference) {
  .console-toast { animation: ctIn 0.18s var(--ease-out); }
  @keyframes ctIn { from { opacity: 0; transform: translateY(8px); } }
}

/* ============================================================================
   §7 손님 소리(통합)·FAQ 꾸러미(C4) — 탭 스트립(다크 책상 위 --pf-*) + 종이 소리 카드(.paper 재사용,
   내부는 §5 지역 재정의로 --paper-* 잉크 상속) + 1:1 대화 스레드·회신. 색/투명도 트랜지션만.
   ============================================================================ */

/* 탭 스트립 — 다크 크롬(--pf-*). 서버 렌더 링크, 활성 탭 밑줄 강조. */
.tabs { display: flex; gap: var(--space-1); flex-wrap: wrap;
  margin-bottom: var(--space-5); border-bottom: 1px solid var(--pf-border); }
.tab { display: inline-flex; align-items: center; gap: var(--space-2);
  padding: var(--space-3) var(--space-4); font-size: var(--fs-sm); font-weight: var(--fw-medium);
  color: var(--pf-dim); border-bottom: 2px solid transparent; margin-bottom: -1px;
  transition: color var(--dur-fast) var(--ease-standard),
              border-color var(--dur-fast) var(--ease-standard); }
.tab:hover { color: var(--pf-text); }
.tab.is-current { color: var(--pf-text); border-bottom-color: var(--pf-cyan); font-weight: var(--fw-bold); }
.tab__badge { min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--radius-full);
  display: inline-grid; place-items: center; background: var(--pf-purple); color: #fff;
  font-size: var(--fs-xs); font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; }

/* 소리 카드 — .paper 위(종이 잉크 상속). 리뷰·문의·1:1 공통 골격. */
.voice-list { list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: var(--space-4); }
.voice { padding: var(--space-4) var(--space-5); }
/* 미답 강조 — §5 .paper 그림자(특이도 0,2,0)를 이기려 .console-main 스코프로 동률+후순위 승. */
.console-main .voice--pending { box-shadow: inset 3px 0 0 var(--paper-gold),
  0 1px 2px rgba(3, 3, 18, 0.35), 0 18px 44px -18px rgba(3, 3, 18, 0.5); }
.voice__head { display: flex; align-items: baseline; gap: var(--space-2);
  flex-wrap: wrap; margin-bottom: var(--space-2); }
.voice__head strong { font-weight: var(--fw-bold); }
.voice__product { font-weight: var(--fw-bold); color: var(--paper-link); }
.voice__meta { margin-left: auto; color: var(--paper-dim); font-size: var(--fs-xs); }
.voice__stars { color: var(--paper-gold); letter-spacing: 0.08em; }
.voice__body, .voice__q { margin: 0 0 var(--space-3); color: var(--paper-ink);
  white-space: pre-wrap; word-break: break-word; }
.voice__reply { border-left: 3px solid var(--paper-line);
  padding: 2px 0 2px var(--space-3); margin: 0 0 var(--space-3); }
.voice__reply-label { display: block; font-size: var(--fs-xs); font-weight: var(--fw-bold);
  color: var(--paper-accent); margin-bottom: 2px; }
.voice__reply p { margin: 0; color: var(--paper-dim);
  white-space: pre-wrap; word-break: break-word; }

/* 답변/답글 폼 + FAQ 틀 버튼 줄. */
.voice__form { display: flex; flex-direction: column; gap: var(--space-2); align-items: flex-start; }
.voice__form-wrap > summary { cursor: pointer; list-style: none; padding: var(--space-1) 0;
  font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--paper-link); }
.voice__form-wrap > summary::-webkit-details-marker { display: none; }
.voice__form-wrap[open] > summary { margin-bottom: var(--space-2); }
.voice__frames { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-2); }
.voice__frame { font-size: var(--fs-xs); padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full); border: 1px solid var(--paper-line);
  background: var(--paper-2); color: var(--paper-ink); cursor: pointer;
  transition: background var(--dur-fast) var(--ease-standard),
              border-color var(--dur-fast) var(--ease-standard); }
.voice__frame:hover { background: var(--paper); border-color: var(--paper-link); }
.voice__actions { display: flex; gap: var(--space-2); flex-wrap: wrap; align-items: center; }

/* 1:1 대화 스레드 — 종이 위 말풍선(손님 왼쪽/사장님 오른쪽). */
.voice-thread { display: flex; flex-direction: column; gap: var(--space-2);
  margin: 0 0 var(--space-3); }
.voice-bubble { max-width: 85%; padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md); font-size: var(--fs-sm); line-height: var(--lh-body); }
.voice-bubble p { margin: 0; white-space: pre-wrap; word-break: break-word; }
.voice-bubble__who { display: block; font-size: var(--fs-xs); color: var(--paper-faint); margin-top: 2px; }
.voice-bubble--buyer { align-self: flex-start; background: var(--paper-2); color: var(--paper-ink); }
.voice-bubble--ai { align-self: flex-start; background: var(--paper-2); color: var(--paper-dim); }
.voice-bubble--seller { align-self: flex-end; background: var(--paper-link); color: #fff; }
.voice-bubble--seller .voice-bubble__who { color: rgba(255, 255, 255, 0.82); }

/* 1:1 회신 폼 + 고지(푸시 채널 없음 — 손님이 문의 창 재개 시 열람). */
.voice-reply-form { display: flex; flex-direction: column; gap: var(--space-2);
  margin-top: var(--space-2); padding-top: var(--space-3); border-top: 1px dashed var(--paper-line); }
.voice-note { margin: var(--space-2) 0 0; font-size: var(--fs-xs); color: var(--paper-dim); }

@media (prefers-reduced-motion: reduce) {
  .tab, .voice__frame { transition: none; }
}

/* ============================================================================
   §8 알리기 채널 허브(C5) — 상태 노트 3열 + 종이 허브 카드(.paper 재사용, §5 지역 재정의로
   --paper-* 잉크 상속) + 발송 폼·최근 캠페인 원장·채널 링크·UTM 도구. 색/투명도 트랜지션만.
   ============================================================================ */

/* 상태 노트 3열(대시보드 .notes는 4열 → 허브는 전용 3열 그리드로 분리). */
.hub-notes { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4);
  margin-bottom: var(--space-5); }
@media (max-width: 60rem) { .hub-notes { grid-template-columns: 1fr; } }
/* 텍스트 상태 값(켜짐/미설정/유료 혜택)은 숫자 노트(.n-v=3xl)보다 한 단 낮춰 균형. */
.hub-note__v { font-size: var(--fs-xl); }

/* 종이 허브 카드 — .paper 위(§5 잉크 상속). 섹션 간 여백만 추가. */
.console-main .hub-card { padding: var(--space-5); margin-bottom: var(--space-5); }
.hub-card__head { margin-bottom: var(--space-4); }
.hub-card__title { font-size: var(--fs-base); font-weight: 700; margin: 0 0 var(--space-1);
  color: var(--paper-ink); }
.hub-card__sub { display: block; font-size: var(--fs-sm); line-height: var(--lh-body); }

/* 발송 폼 + 대상/잔여 메타. */
.hub-form { display: flex; flex-direction: column; gap: var(--space-3); }
.hub-form__foot { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap;
  font-size: var(--fs-sm); }
.hub-meta { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap;
  margin: 0 0 var(--space-4); font-size: var(--fs-sm); color: var(--paper-dim); }
.hub-meta strong { color: var(--paper-ink); font-variant-numeric: tabular-nums; }
.hub-meta__dot { color: var(--paper-faint); }

/* 유료 잠금 안내. */
.hub-locked { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3);
  padding: var(--space-4); border-radius: var(--radius-md); background: var(--paper-2);
  font-size: var(--fs-sm); line-height: var(--lh-body); color: var(--paper-ink); }

/* 최근 캠페인 원장 — §5 .ledger와 동일 톤(종이 표). */
.hub-history { margin-top: var(--space-5); padding-top: var(--space-4);
  border-top: 1px dashed var(--paper-line); }
.hub-history__title { font-size: var(--fs-sm); font-weight: 700; margin: 0 0 var(--space-3);
  color: var(--paper-dim); }
.hub-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.hub-table thead th { text-align: left; padding: var(--space-2) var(--space-2);
  font-size: 11px; font-weight: 700; letter-spacing: 0.08em; color: var(--paper-dim);
  border-bottom: 1px solid var(--paper-line); }
.hub-table th.r, .hub-table td.r { text-align: right; }
.hub-table tbody td { padding: var(--space-2) var(--space-2);
  border-bottom: 1px solid var(--paper-line); vertical-align: middle; }
.hub-table tbody tr:last-child td { border-bottom: 0; }
.hub-table__subj { font-weight: 600; color: var(--paper-ink);
  max-width: 22rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hub-table .num { font-variant-numeric: tabular-nums; }

/* 채널 도우미 링크 카드. */
.hub-links { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); }
@media (max-width: 60rem) { .hub-links { grid-template-columns: 1fr; } }
.hub-link { display: flex; flex-direction: column; gap: 4px;
  padding: var(--space-3) var(--space-4); border-radius: var(--radius-md);
  border: 1px solid var(--paper-line); background: var(--paper-2); text-decoration: none;
  transition: border-color var(--dur-fast) var(--ease-standard),
              background var(--dur-fast) var(--ease-standard); }
a.hub-link:hover { border-color: var(--paper-link); background: var(--paper); }
.hub-link--soon { opacity: 0.62; cursor: default; }
.hub-link__t { font-size: var(--fs-sm); font-weight: 700; color: var(--paper-ink); }
.hub-link__d { font-size: var(--fs-xs); line-height: 1.5; }
.hub-badge { display: inline-block; margin-left: 4px; padding: 1px 7px; border-radius: var(--radius-full);
  background: var(--paper-line); color: var(--paper-dim); font-size: 10px; font-weight: 700;
  vertical-align: middle; }

/* UTM 도구 입력 2열. */
.utm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3);
  margin-bottom: var(--space-3); }
@media (max-width: 40rem) { .utm-grid { grid-template-columns: 1fr; } }

@media (prefers-reduced-motion: reduce) {
  .hub-link { transition: none; }
}

/* AI 광고 소재 결과 — 홍보 문구 3안 카드(종이 톤, 복사 버튼). */
.ai-copy-results { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3);
  margin-top: var(--space-4); }
@media (max-width: 60rem) { .ai-copy-results { grid-template-columns: 1fr; } }
.ai-copy-card { display: flex; flex-direction: column; gap: var(--space-2);
  padding: var(--space-4); border-radius: var(--radius-md);
  border: 1px solid var(--paper-line); background: var(--paper-2); }
.ai-copy-card__h { margin: 0; font-size: var(--fs-base); font-weight: 700; color: var(--paper-ink);
  line-height: var(--lh-tight); }
.ai-copy-card__b { margin: 0; font-size: var(--fs-sm); line-height: var(--lh-body);
  color: var(--paper-ink); }
.ai-copy-card__t { margin: 0; font-size: var(--fs-xs); line-height: 1.6; word-break: break-all; }
.ai-copy-card__copy { align-self: flex-start; margin-top: auto; }

/* ============================================================================
   §11 모바일 폴리시(사용자 보고: 모바일 로드 깨짐 — 2026-07-16) — 표 가로 스크롤 격리,
   상단바 축약, iOS 배경 고정 jank 회피, 터치 타겟 보정. 페이지 본문 가로 스크롤 금지 원칙:
   넓은 콘텐츠(원장 표)는 자신의 스크롤 컨테이너 안에서만 흐른다.
   ============================================================================ */
.ledger { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.ledger .lg-head { position: sticky; left: 0; }  /* 가로 스크롤 시 표머리 제자리 */
.ledger table { min-width: 30rem; }
.bulk-bar { flex-wrap: wrap; }
.dw-foot { flex-wrap: wrap; }

@media (max-width: 48rem) {
  /* iOS는 background-attachment: fixed를 무시·오동작(배경 확대·jank) — 모바일은 scroll */
  html[data-surface="platform"] body { background-attachment: scroll; }
  /* 상단바 축약 — 로고를 걷고 간판이 정체성(스튜디오 ≤1060px 선례), 링크는 아이콘만 */
  html[data-surface="platform"] .brand { display: none; }
  html[data-surface="platform"] .shop-label { display: none; }
  html[data-surface="platform"] .shop-sign { flex: 1; min-width: 0;
    border-left: 0; padding-left: 0; margin-left: 0; }
  html[data-surface="platform"] .shop-name { max-width: none; }
  html[data-surface="platform"] .hl-txt { display: none; }
  html[data-surface="platform"] .header-actions { gap: 2px; flex: none; }
  /* 터치 타겟 — 포인터 전제(34px)를 모바일에서 44px 계열로 복원 */
  .stepper button { width: 34px; height: 32px; }
  .dw-x { width: 40px; height: 40px; }
  .drawer { width: 100vw; }
  .console-shell { padding: var(--space-4) var(--space-3); }
  .sc-head h1 { font-size: var(--fs-xl); }
  .notes { gap: var(--space-3); }
  .note .n-v { font-size: var(--fs-2xl); }
}

/* ============================================================================
   §12 전폭 셸(사용자 피드백 2026-07-17: "화면 가운데 중심 느낌") — 서랍을 화면 왼쪽에
   붙이고(셸 80rem 캡 해제), 본문 읽기 폭만 캡(시안 데스크 1080px ≈ 68rem)해 책상 위에
   종이가 놓인 구도로. §1의 .console-main .container{max-width:none}을 뒤에서 덮는다.
   ============================================================================ */
.console-shell { max-width: none; }
.console-main .container { max-width: 68rem; margin-inline: auto; }

/* ============================================================================
   §13 공용 매크로 표면 (seller/partials/_macros.html)
   화면마다 복붙되던 마크업을 매크로로 승격하면서 필요한 최소 스타일.
   토큰만 인용 — 매직넘버 없음. .paper 위에 얹히는 요소는 --paper-* 잉크를 상속하므로
   색을 재지정하지 않는다.
   ============================================================================ */

/* 접이식 섹션 카드 — 상품 폼 13섹션·설정 화면의 기본 단위 */
.pf-sec {
  border: 1px solid var(--pf-border);
  border-radius: var(--radius-lg);
  background: var(--pf-surface);
  margin-top: var(--space-3);
  overflow: hidden;
}
.pf-sec__head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  padding: var(--space-3) var(--space-4);
  cursor: pointer;
  list-style: none;
  min-height: var(--tap-min);
}
.pf-sec__head::-webkit-details-marker { display: none; }
.pf-sec__head::before {
  content: "›";
  font-size: var(--fs-lg);
  color: var(--pf-dim);
  transition: transform var(--dur-fast) var(--ease-standard);
}
.pf-sec[open] > .pf-sec__head::before { transform: rotate(90deg); }
.pf-sec__title { font-weight: var(--fw-semibold); font-size: var(--fs-base); }
.pf-sec__sub { color: var(--pf-dim); font-size: var(--fs-sm); }
.pf-sec__always {
  margin-inline-start: auto;
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  color: var(--pf-dim);
  font-size: var(--fs-xs);
  cursor: pointer;
}
.pf-sec__body {
  padding: 0 var(--space-4) var(--space-4);
  border-top: 1px solid var(--pf-border);
  padding-top: var(--space-4);
}

/* 배지 — 필수 미입력 / 법적고지 / 안전 기본값 */
.pf-badge {
  display: inline-block;
  padding: 0 var(--space-2);
  border-radius: var(--radius-full);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  line-height: 1.7;
  white-space: nowrap;
}
.pf-badge--req { background: color-mix(in oklab, var(--color-danger) 18%, transparent); color: var(--color-danger); }
.pf-badge--legal { background: color-mix(in oklab, var(--color-warning) 20%, transparent); color: var(--color-warning); }
.pf-badge--safe { background: color-mix(in oklab, var(--color-success) 18%, transparent); color: var(--color-success); }
.pf-badge--default { background: var(--pf-glass); color: var(--pf-dim); }

/* 준비 중 탭 — tab_strip 의 ready=false */
.tab.is-soon { color: var(--pf-dim); cursor: not-allowed; }

/* 종이 카드 위에서는 종이 잉크를 따른다 */
.paper .pf-sec { background: transparent; border-color: var(--paper-line); }
.paper .pf-sec__body { border-top-color: var(--paper-line); }
.paper .pf-sec__sub,
.paper .pf-sec__always { color: var(--paper-dim); }
.paper .pf-sec__head::before { color: var(--paper-faint); }

/* ── §14 상품 폼 depth 섹션 (0071/W4) ─────────────────────────────────────
   카페24 13탭을 progressive disclosure 로 흡수한다. 첫 등록에서 보이는 것은
   상단 필수 필드뿐이고, 법정 표기·SEO·분류 진열은 접힌 채로 둔다. */
.form-section {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  margin-top: var(--space-4);
  background: var(--color-surface);
}
.form-section__head {
  padding: var(--space-3) var(--space-4);
  font-weight: 600;
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
}
/* 기본 삼각형 마커를 지우고 직접 그린다(브라우저별 위치·색이 제각각이라 정렬이 깨진다). */
.form-section__head::-webkit-details-marker { display: none; }
.form-section__head::before {
  content: "▸";
  color: var(--color-text-muted);
  transition: transform 0.15s ease;
}
.form-section[open] > .form-section__head::before { transform: rotate(90deg); }
.form-section__head:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: -2px;
}
.form-section__body {
  padding: 0 var(--space-4) var(--space-4);
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-4);
}

/* 분류 배정 행 — 분류명 · 고정 · 진열영역 체크박스가 한 줄에 놓인다. */
.assign-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--color-border-subtle, var(--color-border));
}
.assign-row:last-child { border-bottom: none; }
.assign-row__areas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-left: auto;
}
.check {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  cursor: pointer;
}

@media (max-width: 640px) {
  .assign-row__areas { margin-left: 0; width: 100%; }
}

/* ── §15 주문 워크벤치 (0063/W4) ──────────────────────────────────────────
   품목 단위 처리. 체크박스 + 액션 바 + 분할 출고 + 클레임이 한 카드에 모인다. */
.wb-items { margin: 0; padding: 0; list-style: none; }
.wb-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-border);
}
.wb-item:last-child { border-bottom: none; }
.wb-item__pick { flex: 0 0 auto; padding-top: 0.15rem; }
.wb-item__main { flex: 1 1 auto; min-width: 0; }
.wb-item__price { flex: 0 0 auto; font-variant-numeric: tabular-nums; }

.wb-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border);
}
.wb-actions__spacer { flex: 1 1 auto; }

.wb-ship .field-row { margin-bottom: var(--space-3); }

.wb-claim {
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-border);
}
.wb-claim:last-child { border-bottom: none; }
.wb-claim--new { border-top: 1px dashed var(--color-border); border-bottom: none; }
.wb-claim__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}
.wb-claim__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}
.wb-claim__row .field__input { flex: 1 1 8rem; min-width: 0; }

@media (max-width: 640px) {
  /* 좁은 화면에서 액션 버튼이 한 줄에 몰리면 오탭이 난다 — 취소 처리가 섞여 있어 위험하다. */
  .wb-actions__spacer { display: none; }
  .wb-actions .btn { flex: 1 1 45%; }
}

/* ── §20 예약 관리 (0068 / W4 예약 화면 트랙 R1~) ─────────────────────────
   유형 게이트는 설정 카드(.set-grid/.set-card)를 그대로 재사용한다 — 여기는 예약
   전용 최소분: Alpine 반복 행(유닛·옵션 값)과 폼 보조. 토큰만 인용(매직넘버 금지). */
.resv-rows { display: flex; flex-direction: column; gap: var(--space-2); }
.resv-row { display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; }
.resv-row .field__input { flex: 1; min-inline-size: 8rem; }
.resv-row .field { margin: 0; }
.resv-row__num { flex: 0 1 9rem; }
.resv-row__add { align-self: flex-start; margin-top: var(--space-1); }

/* 월간 격자(재고달력 R2 · 캘린더형 R4 공용 — _resv_macros.month_grid) */
.resv-monthnav { display: flex; align-items: center; gap: var(--space-3); margin-block: var(--space-3); }
.resv-monthnav__label { font-size: var(--fs-lg); }
.resv-cal { table-layout: fixed; }
.resv-cal__sun { color: var(--paper-danger); }
.resv-cal__sat { color: var(--paper-link); }
.resv-cell { vertical-align: top; min-block-size: 4.5rem; padding: var(--space-1); }
.resv-cell.is-out { opacity: 0.35; }
.resv-cell.is-today .resv-cell__day {
  outline: 2px solid var(--paper-accent); outline-offset: 2px; border-radius: var(--radius-sm);
}
.resv-cell__day { font-size: var(--fs-xs); color: var(--paper-dim); display: inline-block; }
.resv-cell__btn {
  display: flex; flex-direction: column; align-items: flex-start; gap: 0;
  inline-size: 100%; margin-top: var(--space-1); padding: var(--space-1);
  background: transparent; border: 0; border-radius: var(--radius-sm);
  cursor: pointer; color: inherit; text-align: left;
  transition: background-color var(--dur-fast) var(--ease-standard);
}
.resv-cell__btn:hover { background: var(--paper-2); }
.resv-cell__num { font-weight: 700; font-variant-numeric: tabular-nums; }
.resv-cell__num.is-zero { color: var(--paper-danger); }
.resv-cell__num.is-past { color: var(--paper-faint); font-weight: 400; }
.resv-cell__cap { font-size: var(--fs-xs); color: var(--paper-faint); }
.resv-cell__flag--blocked { font-size: var(--fs-xs); font-weight: 700; color: var(--paper-danger); }
.resv-cell__dot {
  inline-size: var(--space-1); block-size: var(--space-1); border-radius: var(--radius-full);
  background: var(--paper-gold); margin-top: var(--space-1);
}
.resv-occ { color: var(--paper-accent); }
.resv-occ.is-unassigned { color: var(--paper-dim); }

/* 리스트형(R3) — 요약 스트립·상세의 전이 버튼 군·타임라인 */
.resv-summary {
  display: flex; flex-wrap: wrap; gap: var(--space-4);
  padding: var(--space-3) var(--space-4); margin-block: var(--space-3);
  background: var(--paper-2); border-radius: var(--radius-md);
  font-size: var(--fs-sm); color: var(--paper-dim);
}
.resv-summary strong { color: var(--paper-ink); font-variant-numeric: tabular-nums; }
.resv-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.resv-timeline { list-style: none; display: flex; flex-direction: column; gap: var(--space-2); }
.resv-timeline__item {
  display: flex; flex-direction: column; gap: 0;
  padding-block-end: var(--space-2); border-block-end: 1px dashed var(--paper-line);
  font-size: var(--fs-sm);
}
.resv-timeline__item:last-child { border-block-end: 0; }
.resv-timeline__when { font-size: var(--fs-xs); color: var(--paper-faint); }

/* 캘린더형(R4) — 상태 약칭 뱃지·범례 + 허브 클레임 칸 액센트 */
.resv-abbr {
  display: inline-block; padding: 0 var(--space-1);
  border: 1px solid var(--paper-line); border-radius: var(--radius-sm);
  font-size: var(--fs-xs); font-weight: 700; font-variant-numeric: tabular-nums;
  color: var(--paper-dim); background: var(--paper);
}
.resv-legend {
  display: flex; flex-wrap: wrap; gap: var(--space-3);
  margin-top: var(--space-3); font-size: var(--fs-xs); color: var(--paper-dim);
}
.resv-legend__item { display: inline-flex; align-items: center; gap: var(--space-1); }
a.kpi { text-decoration: none; color: inherit; }
.kpi--claim { border-inline-start: 3px solid var(--paper-danger); }

/* ── §16 설정 허브 (W2 IA / W4 화면) ─────────────────────────────────────
   85 leaf → 12화면. 카드 격자는 "무엇을 바꿀 수 있는가"를 한 화면에 담는 게 목적이라
   최소 폭을 넉넉히 잡아 설명이 잘리지 않게 한다. */
.set-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
  gap: var(--space-3);
  margin-top: var(--space-3);
}
.set-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  text-decoration: none;
  color: inherit;
  transition: border-color var(--dur-fast) var(--ease-standard), transform 0.12s ease;
}
a.set-card:hover { border-color: var(--color-accent); transform: translateY(-1px); }
a.set-card:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.set-card__title { font-weight: 600; }
.set-card__sub { color: var(--color-text-muted); font-size: var(--fs-sm); }
.set-card__hint { color: var(--color-text-muted); font-size: var(--fs-xs); }
/* 준비 중 카드는 링크가 아니다 — 눌러도 아무 일이 없으면 고장으로 읽힌다.
   대신 "지금 갈 곳" 버튼을 안에 둔다. */
.set-card--soon { background: transparent; border-style: dashed; }
.set-card--soon .btn { align-self: flex-start; margin-top: var(--space-2); }

/* ── §17 분석 허브 (0070/W4) ──────────────────────────────────────────────
   요약 카드 + 퍼널. 그래프 라이브러리를 들이지 않는다 — 숫자를 못 읽는 그래프는
   장식이고, 표는 스크린리더로도 읽힌다. */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  gap: var(--space-3);
  margin-top: var(--space-4);
}
.kpi {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}
.kpi__label { color: var(--color-text-muted); font-size: var(--fs-sm); }
.kpi__value { font-size: var(--fs-lg); font-weight: 700; font-variant-numeric: tabular-nums; }
.kpi__value--muted { color: var(--color-text-muted); }
.kpi__hint { color: var(--color-text-muted); font-size: var(--fs-xs); }
.kpi__delta { font-size: var(--fs-xs); font-weight: 600; font-variant-numeric: tabular-nums; }
/* 색만으로 방향을 전하지 않는다 — ▲▼ 글리프를 함께 쓴다(색각 이상 대응). */
.kpi__delta--up { color: var(--color-success, #1a7f4b); }
.kpi__delta--down { color: var(--color-danger); }
.kpi__delta--flat { color: var(--color-text-muted); }

.funnel {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-3);
}
.funnel__step {
  flex: 1 1 8rem;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}
.funnel__label { color: var(--color-text-muted); font-size: var(--fs-sm); }
.funnel__value { font-size: var(--fs-md); font-weight: 700; font-variant-numeric: tabular-nums; }
.funnel__keep { font-size: var(--fs-xs); color: var(--color-text-muted); }

/* ── §18 메시지 트리거 매트릭스 (0067/W4) ────────────────────────────────
   셀은 버튼이다 — 체크박스로 만들면 폼 제출 시점이 모호해지고, 자동 저장은
   실수로 끈 것을 되돌릴 수 없다. 한 번에 하나씩 명시적으로 토글한다. */
.msg-cell {
  min-width: 3.6rem;
  padding: 2px 10px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--color-text-muted);
  font-size: var(--fs-xs);
  font-weight: 600;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard);
}
.msg-cell:hover { border-color: var(--color-accent); }
.msg-cell:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.msg-cell--on {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-on-primary, #fff);
}

.var-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--space-3); }
.var-chip { cursor: pointer; border: 1px dashed var(--color-border); background: transparent; }
.var-chip:hover { border-style: solid; border-color: var(--color-accent); }

/* ── §19 진열 보드 (0071/W4) ──────────────────────────────────────────────
   순서 입력과 진열영역 체크박스가 한 행에 들어간다. 순서 칸은 좁게 — 넓으면
   상품명이 밀려 비교가 안 된다(진열은 비교하며 정하는 일이다). */
.disp-order { width: 4.5rem; text-align: right; font-variant-numeric: tabular-nums; }
.disp-areas { display: inline-flex; flex-wrap: wrap; gap: var(--space-2); }

@media (max-width: 900px) {
  /* 좁은 화면에서는 진열영역이 줄바꿈되며 행이 커진다 — 표 자체를 가로 스크롤에 맡긴다. */
  .disp-areas { flex-wrap: nowrap; }
}

/* ── §21 혜택 빌더 (0064/W4 T1) ────────────────────────────────────────────
   빌더는 "고르는 화면"이 아니라 "읽고 판단하는 화면"이다. 한 줄에 두 칸까지만 두고
   좁아지면 곧장 한 칸으로 접는다 — 조건 세 개가 옆으로 늘어서면 무엇이 AND인지 안 보인다. */
.section__sub { margin: var(--space-1) 0 0; color: var(--color-ink-muted); font-size: var(--fs-sm); }
.section__actions { display: flex; gap: var(--space-2); margin: 0; }

/* 필드 단위 오류 — 배너 하나로 뭉치면 어느 칸이 틀렸는지 찾아 헤맨다. */
.field__err {
  display: block;
  margin-top: var(--space-1);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  color: var(--color-danger);
}
/* 한 줄에 라벨과 입력을 나란히 — 진단 패널·상태 줄처럼 문장 안에 끼는 칸에만 쓴다. */
.field--inline { flex-direction: row; align-items: center; gap: var(--space-2); margin-bottom: 0; }
.field--inline .field__input { width: auto; min-width: 5rem; }

.bnf-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
.bnf-form .bnf-grid + .bnf-grid { margin-top: var(--space-4); }
.bnf-actions {
  display: flex; gap: var(--space-3); align-items: center;
  margin-top: var(--space-5); padding-top: var(--space-4);
  border-top: 1px solid var(--color-border-subtle);
}

/* 유형·프리셋 카드 — 잠긴 카드는 눌리지 않되 존재는 보인다(무엇이 곧 오는지 알리는 게 목적). */
.bnf-kinds, .bnf-presets {
  display: grid; gap: var(--space-3);
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  margin-top: var(--space-4);
}
.bnf-kind, .bnf-preset {
  display: flex; flex-direction: column; gap: var(--space-1);
  padding: var(--space-4); border: 1px solid var(--color-border);
  border-radius: var(--radius-md); background: var(--color-surface);
  text-decoration: none; color: inherit;
  transition: border-color var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard);
}
a.bnf-kind:hover, a.bnf-preset:hover { border-color: var(--color-accent); box-shadow: var(--shadow-sm); }
.bnf-kind__label, .bnf-preset__label { font-weight: var(--fw-semibold); }
.bnf-kind__hint, .bnf-preset__hint { font-size: var(--fs-sm); color: var(--color-ink-muted); }
.bnf-kind.is-soon { opacity: 0.55; cursor: not-allowed; }
.bnf-preset--blank { border-style: dashed; }

.bnf-statusbar {
  display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap;
  padding: var(--space-3) var(--space-4); margin-bottom: var(--space-4);
  border: 1px solid var(--color-border-subtle); border-radius: var(--radius-md);
  background: var(--color-surface-2);
}

.bnf-scope { margin-top: var(--space-3); }
.bnf-scope__list { max-height: 18rem; overflow-y: auto; margin-top: var(--space-2);
  border: 1px solid var(--color-border-subtle); border-radius: var(--radius-sm); }

.bnf-tiers { margin-top: var(--space-4); }
.bnf-tier { display: flex; align-items: center; gap: var(--space-2); margin-top: var(--space-2); }
.bnf-tier .field__input { width: 5rem; text-align: right; font-variant-numeric: tabular-nums; }

.bnf-radios { display: flex; flex-wrap: wrap; gap: var(--space-4); }
.bnf-radio { display: inline-flex; align-items: center; gap: var(--space-2); cursor: pointer; }

/* 중첩 매트릭스 — 상삼각만 채우고 좌하단은 빈 칸으로 둔다(같은 쌍을 두 번 묻지 않는다).
   기본값과 다른 칸에만 테두리를 줘서 "내가 손댄 곳"이 한눈에 보이게 한다. */
.bnf-matrix__blank { background: var(--color-surface-2); }
.bnf-matrix__cell { min-width: 7rem; }
.bnf-matrix__cell.is-custom { border-color: var(--color-accent); }

/* 진단 패널 — 폼과 시각적으로 분리한다. 여기 숫자는 입력이 아니라 결과다. */
.bnf-diag {
  margin-top: var(--space-6); padding: var(--space-5);
  border: 1px solid var(--color-border); border-radius: var(--radius-lg);
  background: var(--color-surface-2);
}
.bnf-diag__form { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: flex-end; margin: var(--space-4) 0; }
.bnf-diag__out { margin-top: var(--space-4); }
.bnf-diag__head { font-size: var(--fs-lg); margin: 0 0 var(--space-3); }

@media (max-width: 720px) {
  /* 두 칸 격자는 조건을 나란히 비교할 때만 값이 있다. 좁으면 한 칸이 정확하다. */
  .bnf-grid { grid-template-columns: 1fr; }
  .bnf-tier { flex-wrap: wrap; }
}