/* PV-09 배송 관할지역(sub03-01) 전용. .s0301 접두사와 이 페이지 변수만 정의한다.
   지도 도형 색·이름 글자는 workspace.css의 .app-region-map 규칙을 그대로 쓰고, 여기서는 공개 페이지 크기만 맞춘다.
   이 파일은 페이지 모듈이 불러와 공통 CSS보다 앞에 놓일 수 있으므로, 공통 규칙을 덮는 곳은 .s0301 아래로 한정해 우선순위로 이긴다. */
.s0301 {
  --s0301-radius: 10px;
  --s0301-title-gap: clamp(16px, calc(14.471px + .3922vw), 22px);
  --s0301-head-gap: clamp(36px, calc(29.882px + 1.5686vw), 60px);
  --s0301-columns-gap: clamp(32px, calc(19.765px + 3.1373vw), 80px);
  --s0301-block-gap: clamp(20px, calc(16.941px + .7843vw), 32px);
  --s0301-group-title: clamp(18px, calc(16.98px + .2614vw), 22px);
  /* 시·도 지도 폭: 넓은 화면에서도 지도 전체가 한 화면 높이에 들어오게 한다(지도 가로:세로 = 456.5:606.8). */
  --s0301-map-width: min(720px, 46vw, max(400px, calc((100svh - 140px) * .752)));
  padding-block: var(--space-section);
  font-family: var(--font-brand);
}
:where(.s0301) :where(h2, h3, h4, p, ul) { margin: 0; }
:where(.s0301) :where(ul) { padding: 0; list-style: none; }
.s0301-title { font-size: var(--fs-h2); font-weight: 700; line-height: 1.32; letter-spacing: -.01em; }
.s0301-lead { margin-top: var(--s0301-title-gap); color: var(--text-muted); font-size: var(--fs-lead); font-weight: 500; line-height: 1.6; }

/* 불러오는 중·오류·0건 */
.s0301-state { display: grid; justify-items: center; gap: 16px; margin-top: var(--s0301-head-gap); padding: clamp(48px, calc(32.706px + 3.9216vw), 96px) 24px; border-radius: var(--s0301-radius); background: var(--surface); color: var(--text-soft); font-size: var(--fs-lead); font-weight: 500; line-height: 1.5; text-align: center; }
.s0301-state--error { background: var(--primary-soft); }
.s0301-state__title { color: var(--text); font-weight: 700; }
.s0301-state__detail { color: var(--text-muted); font-size: var(--fs-body); }
.s0301 .s0301-button { display: inline-flex; align-items: center; justify-content: center; min-height: var(--hit-min); padding: 0 32px; border-radius: 50px; background: var(--primary); color: #fff; font-size: var(--fs-body); font-weight: 700; line-height: 1.2; }

/* 지도(왼쪽)와 지역 패널(오른쪽). 1200px 미만은 지도 위·패널 아래로 쌓는다. */
.s0301-map { display: grid; gap: var(--s0301-columns-gap); margin-top: var(--s0301-head-gap); }
.s0301-map__country { width: min(100%, 560px); min-width: 0; margin-inline: auto; }
@media (min-width: 1200px) {
  .s0301-map { grid-template-columns: auto minmax(0, 1fr); align-items: start; }
  .s0301-map__country { width: var(--s0301-map-width); margin-inline: 0; }
}
.s0301 .app-region-map__figure { max-width: none; }
.s0301-legend { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-bottom: 16px; color: var(--text-soft); font-size: var(--fs-small); line-height: 1.4; }
.s0301-legend li { display: inline-flex; align-items: center; gap: 8px; }
.s0301 .app-region-map__swatch { width: 16px; height: 16px; border-radius: 4px; }
.s0301 .app-region-map__swatch.is-selected { background: var(--primary); }

.s0301-panel { min-width: 0; padding-top: var(--s0301-block-gap); border-top: 2px solid var(--text); }
.s0301-panel__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 16px; }
.s0301-panel__title { font-size: var(--fs-h3); font-weight: 700; line-height: 1.35; }
.s0301 .s0301-panel__back { min-height: var(--hit-min); padding: 0 22px; border: 1px solid var(--line); border-radius: 50px; color: var(--text-soft); font-size: var(--fs-body); font-weight: 600; line-height: 1.2; }
.s0301 .s0301-panel__back:hover { border-color: var(--primary); color: var(--primary); }
.s0301-panel__summary { margin-top: 8px; color: var(--text-muted); font-size: var(--fs-body); line-height: 1.6; }
.s0301-panel__note { margin-top: var(--s0301-block-gap); color: var(--text-soft); font-size: var(--fs-body); }
.s0301-panel__status { margin-top: 12px; padding: 10px 14px; border-left: 3px solid var(--primary); background: var(--warm); font-size: var(--fs-body); }
.s0301 .s0301-panel .app-region-map__figure { width: min(100%, 520px); margin-top: var(--s0301-block-gap); }
.s0301 .s0301-panel .app-region-map__svg--district { margin: 0; }
.s0301-groups { display: grid; margin-top: var(--s0301-block-gap); border-top: 1px solid var(--line); }
.s0301-group { padding-block: var(--s0301-block-gap); border-bottom: 1px solid var(--line); }
.s0301-group__title { font-size: var(--s0301-group-title); font-weight: 700; line-height: 1.4; }
.s0301-areas { display: flex; flex-wrap: wrap; gap: 8px 10px; margin-top: 12px; }
.s0301-panel > .s0301-areas { margin-top: var(--s0301-block-gap); }
.s0301-areas li { min-width: 0; padding: 8px 16px; border-radius: 50px; background: var(--primary-soft); color: var(--primary); font-size: var(--fs-body); font-weight: 600; line-height: 1.4; overflow-wrap: anywhere; }
/* ============================================================
   base.css — 토큰 · 리셋 · 유틸
   컨벤션(convention 스킬)의 구현체다. 페이지는 여기 정의된
   토큰·유틸을 쓰고 생값(하드코딩 px·생 clamp)을 쓰지 않는다.

   사이트마다 바꾸는 것: 토큰 값 (:root 블록)
   건드리지 않는 것:     유틸 클래스 정의, 리셋
   ============================================================ */

/* ── 웹폰트 로딩 ─────────────────────────────────────────────
   ⚠ 선언만 하고 로딩하지 않으면 전 페이지가 시스템 폰트로 렌더된다.
      실제로 있었던 가장 비싼 사고이고, 눈으로는 잘 안 보인다.
      → `node .claude/skills/measure/check.mjs <파일>` 로 반드시 확인할 것.

   woff2 파일을 `_shared/fonts/` 에 넣는다. 시안이 쓰는 굵기만 넣으면 된다.
   빠른 시작이 필요하면 아래 대신 각 페이지 <head> 에 CDN link 를 써도 되지만,
   납품물은 셀프호스트를 권장한다(오프라인·재현성).
   ─────────────────────────────────────────────────────────── */
/* 원본: site/tokens.md. 모든 폰트는 로컬 웹폰트로 제공. */
@font-face { font-family: "Pretendard"; src: url("/_shared/fonts/Pretendard-Regular.woff2") format("woff2"); font-style: normal; font-weight: 400; font-display: swap; }
@font-face { font-family: "Pretendard"; src: url("/_shared/fonts/Pretendard-Medium.woff2") format("woff2"); font-style: normal; font-weight: 500; font-display: swap; }
@font-face { font-family: "Pretendard"; src: url("/_shared/fonts/Pretendard-SemiBold.woff2") format("woff2"); font-style: normal; font-weight: 600; font-display: swap; }
@font-face { font-family: "Pretendard"; src: url("/_shared/fonts/Pretendard-Bold.woff2") format("woff2"); font-style: normal; font-weight: 700; font-display: swap; }
@font-face { font-family: "Noto Sans KR"; src: url("/_shared/fonts/NotoSansKR-Variable.woff2") format("woff2"); font-style: normal; font-weight: 400; font-display: swap; }
@font-face { font-family: "Noto Sans KR"; src: url("/_shared/fonts/NotoSansKR-Variable.woff2") format("woff2"); font-style: normal; font-weight: 500; font-display: swap; }
@font-face { font-family: "Noto Sans KR"; src: url("/_shared/fonts/NotoSansKR-Variable.woff2") format("woff2"); font-style: normal; font-weight: 600; font-display: swap; }
@font-face { font-family: "Noto Sans KR"; src: url("/_shared/fonts/NotoSansKR-Variable.woff2") format("woff2"); font-style: normal; font-weight: 700; font-display: swap; }
@font-face { font-family: "xeicon"; src: url("/_shared/fonts/xeicon.woff2") format("woff2"); font-style: normal; font-weight: 400; font-display: block; }

:root {
  --font-ko: "Noto Sans KR", sans-serif;
  --font-latin: "Noto Sans KR", sans-serif;
  --font-brand: "Pretendard", sans-serif;
  --font-num: var(--font-brand);
  --font-icon: "xeicon";
  --fs-body: clamp(15px, calc(14.235px + .1961vw), 18px);
  --fs-small: clamp(13px, calc(11.725px + .3268vw), 18px);
  --fs-lead: clamp(17px, calc(15.725px + .3268vw), 22px);
  --fs-h3: clamp(20px, calc(18.471px + .3922vw), 26px);
  --fs-h2: clamp(28px, calc(22.902px + 1.3072vw), 48px);
  --fs-h1: clamp(32px, calc(23.843px + 2.0915vw), 64px);
  --fs-stat: clamp(36px, calc(27.333px + 2.2222vw), 70px);
  --page: #ffffff;
  --surface: #f5f3ef;
  --warm: #faf8f5;
  --beige: #f1ede6;
  --text: #1a1a1a;
  --text-soft: #3a3a3a;
  --text-muted: #6b6b6b;
  --line: #e8e4dd;
  --primary: #961a2f;
  --primary-soft: #f6e8ea;
  --dark: #000000;
  --cream: #fbf0da;
  --cream-dim: #b9b1a0;
  --gold: #a29864;
  --gutter: 160px;
  --rail: 1600px;
  --space-section: clamp(64px, calc(42.078px + 5.6209vw), 150px);
  --space-grid: clamp(20px, calc(16.941px + .7843vw), 32px);
  --ease: cubic-bezier(.2, .7, .2, 1);
  --dur: .32s;
  --hit-min: 44px;
}
@media (max-width: 1600px) { :root { --gutter: 5vw; } }

/* ── 리셋 ─────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  line-height: 1.65;
  min-width: 320px;
  margin: 0;
  background: var(--page);
  color: var(--text);
  font-family: var(--font-ko);
  font-size: var(--fs-body);
  -webkit-font-smoothing: antialiased;
  word-break: keep-all;          /* 한글 단어 중간 개행 방지 */
}

img, svg, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
button { color: inherit; background: none; border: 0; cursor: pointer; }

/* ── 컨테이너 — 좌우 여백은 여기서만 소비한다 ────────────────
   페이지가 px 패딩을 직접 박지 않는다. */
.container,
.container--narrow,
.container--wide {
  margin-inline: auto;
}
.container         { width: min(var(--rail), calc(100% - var(--gutter) * 2)); }
.container--narrow { width: min(1200px,     calc(100% - var(--gutter) * 2)); }
.container--wide   { width: min(1800px,     calc(100% - var(--gutter) * 2)); }

/* ── 이미지 · 배경 · 썸네일 ──────────────────────────────────
   화면이 바뀌어도 찌그러지지 않게 항상 cover (비율 유지, 잘림 허용) */
.img-cover {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.bg-cover {
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}
.thumb {
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  aspect-ratio: 4 / 3;           /* 페이지에서 override 가능 */
}

/* ── 타이포 유틸 ─────────────────────────────────────────── */
.lead        { font-family: var(--font-latin); font-size: var(--fs-lead); }
.num,
[data-num]   { font-family: var(--font-num); font-variant-numeric: tabular-nums; }

/* ── 시안 줄바꿈 보존 — 본문 단락용 ──────────────────────────
   시안(1920)의 <br> 을 본문 <p> 에 그대로 두면 다른 폭에서 고아 줄이 생긴다 (실제: 배치 5페이지 중 3페이지).
   본문 단락의 시안 줄바꿈은 <br class="br-wide"> 로 — 시안 폭 등급(xlarge ≥1600)에서만 살아난다.
   제목의 <br> 은 의미 있는 행 분리이므로 페이지가 따로 다룬다. */
.br-wide { display: none; }
@media (min-width: 1600px) { .br-wide { display: inline; } }

/* ── 접근성 ──────────────────────────────────────────────── */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
:where(a, button, [tabindex]):focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* ── 콘텐츠 높이 원칙 ─────────────────────────────────────────
   흐르는 텍스트 영역에 고정 height 를 박지 않는다.
   내용이 높이를 결정하고, 여백은 padding/margin 으로 만든다.
   고정 height 는 '내용이 흐르지 않는' 곳에만 —
   이미지 박스, 썸네일, 장식 요소.
   ─────────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}
/* 희성 공유 UI. 출처: site/tokens.md. 상태·레이어·클릭 규칙은 seed 계약 유지.
   공통 마크업/치수/변형은 이 파일과 chrome.js만 소유한다. */
:root {
  --bp-nav: 1360px;
  --chrome-z: 100;
  --chrome-h-top: 120px;
  --chrome-h-scrolled: 80px;
  --chrome-h-mobile: 72px;
  --chrome-h-mobile-scrolled: 64px;
  --chrome-account-h: 0px;
  --chrome-logo-w: 102.095px;
  --chrome-logo-h: 96px;
  --chrome-nav-gap: 40px;
  --chrome-fs: 18px;
  --chrome-utility-gap: 24px;
  --chrome-bg-top: var(--page);
  --chrome-fg-top: var(--text);
  --chrome-footer-top: 90px;
  --chrome-footer-bottom: 56px;
  --chrome-footer-company-w: 360px;
  --chrome-footer-menu-gap: 120px;
  --chrome-footer-divider-gap: 70px;
  --chrome-footer-bottom-gap: 30px;
  --footer-line-body: 25px;
  --footer-line-heading: 23px;
  --footer-line-phone: 31px;
  --footer-line-details: 30px;
}
body[data-chrome="dark"] {
  --chrome-h-top: 96px;
  --chrome-h-scrolled: 72px;
  --chrome-logo-w: 68.0635px;
  --chrome-logo-h: 64px;
  --chrome-bg-top: var(--dark);
  --chrome-fg-top: #fff;
}
body[data-audience="member"] {
  --chrome-account-h: 47px;
  --chrome-logo-w: 99.9683px;
  --chrome-logo-h: 94px;
}
body[data-nav-mode="compact"] {
  --chrome-h-top: var(--chrome-h-mobile);
  --chrome-h-scrolled: var(--chrome-h-mobile-scrolled);
  --chrome-logo-w: 59.555px;
  --chrome-logo-h: 56px;
}
body[data-chrome-offset="true"] { padding-top: calc(var(--chrome-h-top) + var(--chrome-account-h)); }
[data-shared-header] {
  --chrome-main-h: var(--chrome-h-top);
  position: fixed;
  inset: 0 0 auto;
  z-index: var(--chrome-z);
  height: calc(var(--chrome-main-h) + var(--chrome-account-h));
  background: var(--chrome-bg-top);
  color: var(--chrome-fg-top);
  transition: height var(--dur) var(--ease), background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
[data-shared-header][data-scroll-state="scrolled"] {
  --chrome-main-h: var(--chrome-h-scrolled);
  background: rgb(255 255 255 / .96);
  color: var(--text);
  box-shadow: 0 1px 0 var(--line);
  backdrop-filter: blur(10px);
}
body[data-chrome="dark"] [data-shared-header][data-scroll-state="scrolled"] {
  background: rgb(0 0 0 / .96);
  color: #fff;
}
body[data-menu-open="true"] [data-shared-header] { background: var(--page); color: var(--text); }
.chrome-header__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--chrome-logo-w) minmax(0, 1fr);
  align-items: center;
  width: min(var(--rail), calc(100% - var(--gutter) * 2));
  height: var(--chrome-main-h);
  margin-inline: auto;
}
.chrome-nav { display: flex; align-items: center; gap: var(--chrome-nav-gap); min-width: 0; }
.chrome-nav__item { position: relative; flex: 0 0 auto; }
.chrome-nav__link {
  display: inline-flex;
  align-items: center;
  min-height: var(--hit-min);
  font-size: var(--chrome-fs);
  font-weight: 400;
  line-height: 1.2;
  white-space: nowrap;
}
.chrome-nav__link[aria-current] { font-weight: 500; }
.chrome-subnav {
  position: absolute;
  top: 100%; left: -20px;
  min-width: 176px;
  padding: 10px 20px 14px;
  background: var(--page);
  color: var(--text);
  box-shadow: 0 10px 24px rgb(0 0 0 / .08);
  visibility: hidden; opacity: 0; pointer-events: none;
}
.chrome-nav__item:hover .chrome-subnav,
.chrome-nav__item:focus-within .chrome-subnav { visibility: visible; opacity: 1; pointer-events: auto; }
.chrome-subnav__link { display: flex; align-items: center; min-height: var(--hit-min); white-space: nowrap; font-size: 16px; }
.chrome-subnav__link:hover { color: var(--primary); }
.chrome-logo { display: inline-flex; align-items: center; justify-content: center; min-height: var(--hit-min); }
.chrome-logo__image { width: var(--chrome-logo-w); height: var(--chrome-logo-h); object-fit: contain; }
[data-scroll-state="scrolled"] .chrome-logo__image { width: 59.555px; height: 56px; }
.chrome-actions { display: flex; align-items: center; justify-content: flex-end; gap: var(--chrome-utility-gap); font-family: var(--font-brand); }
.chrome-gift { display: inline-flex; align-items: center; gap: 8px; min-height: var(--hit-min); font-size: var(--chrome-fs); font-weight: 500; line-height: 1.2; color: var(--text-muted); white-space: nowrap; }
body[data-chrome="dark"] .chrome-gift { color: inherit; }
.chrome-login { display: inline-flex; align-items: center; justify-content: center; height: 52px; padding-inline: 34px; border-radius: 26px; background: var(--primary); color: #fff; font-size: var(--chrome-fs); font-weight: 500; line-height: 1.72; white-space: nowrap; }
.chrome-btn { display: inline-flex; align-items: center; justify-content: center; min-width: var(--hit-min); min-height: var(--hit-min); padding: 0; font-size: 14px; font-weight: 600; }
.chrome-toggle { display: none; }
.chrome-account { height: var(--chrome-account-h); background: var(--surface); color: var(--text-soft); border-bottom: 1px solid var(--line); font-size: var(--chrome-fs); line-height: 1.4; }
.chrome-account__inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: min(var(--rail), calc(100% - var(--gutter) * 2)); height: 100%; margin-inline: auto; }
.chrome-account__name { display: flex; gap: 8px; white-space: nowrap; }
.chrome-account__name strong { font-weight: 500; color: var(--text); }
.chrome-account__name span { color: var(--text-muted); }
.chrome-account__links { display: flex; gap: 28px; font-family: var(--font-brand); }
.chrome-account__links > * { display: inline-flex; align-items: center; min-height: var(--hit-min); white-space: nowrap; }
.chrome-deadline { display: flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 10px; background: var(--primary-soft); color: var(--text-soft); font-size: var(--chrome-fs); line-height: 1.4; white-space: nowrap; }
.chrome-deadline strong { color: var(--primary); font-weight: 600; }
body[data-nav-mode="compact"] .chrome-header__inner { grid-template-columns: var(--chrome-logo-w) minmax(0, 1fr); column-gap: 16px; }
body[data-nav-mode="compact"] .chrome-nav { display: none; }
body[data-nav-mode="compact"] .chrome-toggle { display: inline-flex; }
body[data-nav-mode="compact"] .chrome-login { height: var(--hit-min); padding-inline: 22px; font-size: 16px; }
.chrome-menu {
  position: fixed; inset: 0;
  z-index: calc(var(--chrome-z) - 1);
  display: flex; flex-direction: column; gap: 12px;
  padding: calc(var(--chrome-h-top) + var(--chrome-account-h) + 24px) var(--gutter) 40px;
  background: var(--page); color: var(--text);
  overflow-y: auto;
  visibility: hidden; opacity: 0; pointer-events: none;
  transition: opacity var(--dur) var(--ease), visibility var(--dur);
}
.chrome-menu[data-open="true"] { visibility: visible; opacity: 1; pointer-events: auto; }
.chrome-menu__link { display: flex; align-items: center; gap: 8px; min-height: var(--hit-min); padding-block: 8px; font-size: var(--fs-lead); font-weight: 500; }
.chrome-menu__group { border-bottom: 1px solid var(--line); }
.chrome-menu__children { display: flex; flex-wrap: wrap; gap: 0 24px; padding-bottom: 8px; }
.chrome-menu__child { display: inline-flex; align-items: center; min-height: var(--hit-min); font-size: 15px; color: var(--text-muted); }
.chrome-menu__utility { display: flex; flex-wrap: wrap; gap: 0 32px; }
/* PV-05: 로그인 상태의 로그아웃 단추는 로그인 링크와 같은 자리·같은 틀이다. 버튼 기본 여백만 지운다. */
button.chrome-login, button.chrome-menu__link { margin: 0; }
button.chrome-login { padding-block: 0; }
button.chrome-menu__link { padding-inline: 0; }
button:is(.chrome-login, .chrome-menu__link)[aria-disabled="true"] { cursor: progress; opacity: .7; }
/* 로그아웃 실패 안내: 고정 머리글 바로 아래, 머리글 오른쪽 끝에 맞춘다. */
.chrome-logout-alert {
  position: absolute;
  top: 100%;
  right: max(var(--gutter), (100% - var(--rail)) / 2);
  width: min(420px, calc(100% - var(--gutter) * 2));
  box-shadow: 0 10px 24px rgb(0 0 0 / .08);
}
[aria-disabled="true"] { cursor: default; }
/* PV-08 F1: 로그아웃 옆 역할별 업무 홈. 선물세트와 같은 글자 틀이며 좁은 머리글에서는 전체 메뉴에만 둔다. */
.chrome-home { display: inline-flex; align-items: center; min-height: var(--hit-min); font-size: var(--chrome-fs); font-weight: 500; line-height: 1.2; color: var(--primary); white-space: nowrap; }
.chrome-home:hover { text-decoration: underline; text-underline-offset: 4px; }
body[data-nav-mode="compact"] .chrome-home { display: none; }
/* PV-08 F6: 비로그인 공개 콘텐츠의 회원가입 플로팅 링크. 로그인 단추와 같은 주색 둥근 틀이며 머리글·전체 메뉴보다 아래 층이다.
   바닥글이 화면에 들어오면 숨겨 바닥글·하단 링크를 가리지 않는다(data-hidden). 이 숨김은 투명·클릭 통과만이라 Tab 순서에 남고,
   키보드 포커스를 받으면 전환 없이 바로 보인다(바닥글 뒤 마지막 순서여도 도달·표시). 전체 메뉴가 열리면 메뉴가 포커스를 가두므로 완전히 숨긴다. */
.chrome-signup-float {
  position: fixed;
  right: max(24px, env(safe-area-inset-right));
  bottom: calc(24px + env(safe-area-inset-bottom));
  z-index: calc(var(--chrome-z) - 2);
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 120px; min-height: 52px; padding-inline: 28px; border-radius: 26px;
  background: var(--primary); color: #fff; box-shadow: 0 8px 24px rgb(0 0 0 / .18);
  font-family: var(--font-brand); font-size: var(--chrome-fs); font-weight: 500; line-height: 1.2; white-space: nowrap;
  transition: opacity var(--dur) var(--ease), visibility var(--dur), background-color var(--dur) var(--ease);
}
.chrome-signup-float:hover { background: #7c1527; }
.chrome-signup-float[data-hidden="true"] { opacity: 0; pointer-events: none; }
.chrome-signup-float:focus-visible { opacity: 1; pointer-events: auto; outline: 3px solid var(--text); outline-offset: 3px; transition: background-color var(--dur) var(--ease); }
body[data-menu-open="true"] .chrome-signup-float { visibility: hidden; opacity: 0; pointer-events: none; }
[data-shared-footer] {
  --footer-bg: var(--page);
  --footer-fg: var(--text);
  --footer-muted: var(--text-muted);
  --footer-line: var(--line);
  --footer-accent: var(--primary);
  padding-block: var(--chrome-footer-top) var(--chrome-footer-bottom);
  background: var(--footer-bg); color: var(--footer-fg);
  box-shadow: inset 0 1px 0 var(--footer-line);
  font-size: var(--chrome-fs); line-height: var(--footer-line-body);
}
body[data-chrome="dark"] [data-shared-footer] { --footer-bg: var(--dark); --footer-fg: var(--cream); --footer-muted: var(--cream-dim); --footer-line: #2a2a2a; --footer-accent: var(--gold); }
.chrome-footer__inner { width: min(var(--rail), calc(100% - var(--gutter) * 2)); margin-inline: auto; }
.chrome-footer__top { display: flex; align-items: flex-start; }
.chrome-footer__company { flex: 0 0 var(--chrome-footer-company-w); min-width: 0; }
.chrome-footer__logo { display: flex; width: fit-content; align-items: center; min-height: var(--hit-min); }
.chrome-footer__logo img { width: 89.518px; height: 112.244px; object-fit: contain; }
.chrome-footer__phone { margin-top: 30px; }
.chrome-footer__phone p { margin: 0 0 8px; color: var(--footer-muted); opacity: .6; }
.chrome-footer__phone-link { display: inline-flex; align-items: center; font-size: 22px; font-weight: 500; line-height: var(--footer-line-phone); }
.chrome-footer__details { margin: 26px 0 0; color: var(--footer-muted); opacity: .5; line-height: var(--footer-line-details); }
.chrome-footer__menu { display: flex; justify-content: space-between; flex: 1 1 auto; gap: 24px; padding-left: var(--chrome-footer-menu-gap); }
.chrome-footer__group { min-width: 0; }
.chrome-footer__heading { display: inline-block; font-weight: 500; line-height: var(--footer-line-heading); white-space: nowrap; }
.chrome-footer__links { display: flex; flex-direction: column; gap: 13px; margin-top: 20px; }
.chrome-footer__link { display: inline-block; color: var(--footer-muted); opacity: .75; white-space: nowrap; }
.chrome-footer__bottom { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: var(--chrome-footer-divider-gap); padding-top: var(--chrome-footer-bottom-gap); box-shadow: inset 0 1px 0 var(--footer-line); }
.chrome-footer__copyright { margin: 0; color: var(--footer-muted); opacity: .5; }
.chrome-footer__copyright b { font-weight: 700; }
.chrome-footer__policies { display: flex; align-items: center; gap: 28px; }
.chrome-footer__gift { display: inline-flex; gap: 8px; color: var(--footer-accent); white-space: nowrap; }
.chrome-footer__privacy { color: var(--footer-muted); opacity: .75; white-space: nowrap; }
@media (max-width: 1599.98px) {
  :root { --chrome-footer-company-w: 280px; --chrome-footer-menu-gap: 56px; }
  .chrome-footer__menu { flex-wrap: wrap; justify-content: flex-start; gap: 32px; }
  .chrome-footer__group { flex: 1 1 105px; }
}
@media (max-width: 1199.98px) {
  :root { --chrome-footer-company-w: 240px; --chrome-footer-menu-gap: 40px; --chrome-footer-top: 64px; --chrome-footer-bottom: 40px; }
  .chrome-footer__bottom { flex-wrap: wrap; }
}
@media (max-width: 899.98px) {
  .chrome-footer__heading, .chrome-footer__link, .chrome-footer__phone-link, .chrome-footer__policies > * { display: inline-flex; align-items: center; min-height: var(--hit-min); }
}
@media (max-width: 839.98px) {
  :root { --chrome-utility-gap: 16px; }
  .chrome-footer__top { flex-direction: column; }
  .chrome-footer__company { flex-basis: auto; }
  .chrome-footer__menu { display: none; }
  .chrome-footer__bottom { flex-direction: column; align-items: flex-start; gap: 20px; }
  .chrome-footer__copyright { order: 99; }
}
@media (max-width: 599.98px) {
  :root { --chrome-fs: 16px; --chrome-utility-gap: 12px; --chrome-footer-divider-gap: 40px; }
  .chrome-gift { display: none; }
  .chrome-account { font-size: 13px; }
  .chrome-account__inner { gap: 8px; }
  .chrome-account__links { gap: 12px; }
  .chrome-deadline { flex-direction: column; align-items: flex-start; gap: 0; padding: 7px 10px; font-size: 12px; }
  .chrome-footer__policies { gap: 20px; }
  .chrome-signup-float { right: max(16px, env(safe-area-inset-right)); bottom: calc(16px + env(safe-area-inset-bottom)); min-width: 104px; min-height: 48px; padding-inline: 22px; }
}

/* ── 메인(첫 화면) — 완성 시안 index01.php의 mainGate 값을 그대로 옮긴다. MainGatePage.tsx ── */
.main-gate { position: relative; width: 100%; height: 100vh; min-height: 700px; overflow: hidden; background: #111; font-family: "Noto Sans KR", sans-serif; }
.main-gate__bg-wrap { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.main-gate__bg {
  position: absolute; inset: 0;
  background-repeat: no-repeat; background-position: center center; background-size: cover;
  opacity: 0; transform: scale(1.001);
  transition: opacity 1s ease, transform 0.8s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.main-gate__bg.is-active { opacity: 1; }
.main-gate__item { position: absolute; top: 0; z-index: 2; width: 50%; height: 100%; overflow: hidden; color: #fff; text-decoration: none; }
.main-gate__item--left { left: 0; }
.main-gate__item--right { right: 0; }
.main-gate__dim { position: absolute; inset: 0; z-index: 1; background: rgba(0, 0, 0, 0.48); transition: background 0.45s ease, opacity 0.45s ease; }
.main-gate__circle {
  position: absolute; top: 50%; left: 50%; z-index: 3;
  width: clamp(190px, 14vw, 270px); aspect-ratio: 1 / 1; border-radius: 50%;
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  background: rgba(255, 255, 255, 0.28); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px);
  transform: translate(-50%, -50%);
  transition: background 0.45s ease, transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.main-gate__small { display: block; margin: 0 0 7px; font-size: 13px; line-height: 1.4; font-weight: 400; color: rgba(255, 255, 255, 0.72); }
.main-gate__circle strong { display: block; font-size: clamp(20px, 1.35vw, 27px); line-height: 1.3; font-weight: 600; letter-spacing: -0.04em; color: #fff; }
.main-gate__arrow {
  display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; margin-top: 18px; border-radius: 50%;
  background: #b51f38; color: #fff; font-size: 17px; line-height: 1;
  transition: background 0.4s ease, transform 0.4s ease;
}
/* hover한 쪽만 밝게. 키보드 초점도 같은 상태를 보여 준다(시안에 없는 접근성 보강). */
.main-gate__item:hover .main-gate__dim, .main-gate__item:focus-visible .main-gate__dim { background: rgba(0, 0, 0, 0.06); }
.main-gate__item:hover .main-gate__circle, .main-gate__item:focus-visible .main-gate__circle { background: #9f2033; transform: translate(-50%, -50%) scale(1.04); }
.main-gate__item:hover .main-gate__small, .main-gate__item:focus-visible .main-gate__small { color: rgba(255, 255, 255, 0.85); }
.main-gate__item:hover .main-gate__arrow, .main-gate__item:focus-visible .main-gate__arrow { background: rgba(255, 255, 255, 0.14); transform: translateX(4px); }
.main-gate__item:focus-visible { outline: 3px solid #fff; outline-offset: -6px; }
.main-gate:has(.main-gate__item--left:hover) .main-gate__bg, .main-gate:has(.main-gate__item--left:focus-visible) .main-gate__bg { transform: scale(1.025) translateX(0.2%); }
.main-gate:has(.main-gate__item--right:hover) .main-gate__bg, .main-gate:has(.main-gate__item--right:focus-visible) .main-gate__bg { transform: scale(1.025) translateX(-0.2%); }
.main-gate__copy { position: absolute; right: 4.5%; bottom: 9%; z-index: 5; text-align: right; color: #fff; pointer-events: none; }
.main-gate__copy strong { display: block; font-size: 40px; line-height: 1.35; font-weight: 600; letter-spacing: -0.04em; }
.main-gate__copy p { margin: 12px 0 0; font-size: 18px; line-height: 1.65; font-weight: 400; color: rgba(255, 255, 255, 0.7); letter-spacing: -0.03em; }
.main-gate__indicator { position: absolute; left: 50%; bottom: 4%; z-index: 6; display: flex; align-items: center; gap: 5px; transform: translateX(-50%); pointer-events: none; }
.main-gate__indicator span { display: block; width: 34px; height: 2px; background: rgba(255, 255, 255, 0.25); }
.main-gate__indicator span.is-active { background: #fff; }
@media (max-width: 1024px) {
  .main-gate { min-height: 650px; }
  .main-gate__circle { width: 190px; }
  .main-gate__copy { right: 30px; bottom: 70px; }
  .main-gate__copy strong { font-size: 30px; }
  .main-gate__copy p { font-size: 14px; }
}
/* 모바일은 위(브랜드스토리)·아래(로그인) 50:50 */
@media (max-width: 767px) {
  .main-gate { min-height: 100svh; }
  .main-gate__item { width: 100%; height: 50%; }
  .main-gate__item--left { top: 0; left: 0; }
  .main-gate__item--right { top: 50%; right: 0; }
  .main-gate__circle { width: 160px; }
  .main-gate__small { font-size: 11px; }
  .main-gate__circle strong { font-size: 18px; }
  .main-gate__arrow { width: 36px; height: 36px; margin-top: 13px; font-size: 15px; }
  .main-gate__copy, .main-gate__indicator { display: none; }
}
@media (hover: none) {
  .main-gate__dim { background: rgba(0, 0, 0, 0.32); }
}
/* 공유 배너 7페이지 + 한돈/한우 카드. 페이지는 이 훅에 데이터만 공급한다. */
:root {
  --banner-pad-top: clamp(80px, calc(49.412px + 7.8431vw), 200px);
  --banner-pad-bottom: clamp(48px, calc(39.843px + 2.0915vw), 80px);
  --banner-gap: clamp(18px, calc(15.196px + .719vw), 29px);
  --banner-copy-w: 920px;
  --banner-breadcrumb: clamp(15px, calc(13.725px + .3268vw), 20px);
  --banner-crumb-gap: 10px;
  --banner-shade: rgb(0 0 0 / .39);
  --card-min: 290px;
  --card-radius: 10px;
  --card-title-gap: 22px;
  --card-copy-gap: 8px;
  --product-search-width: 300px;
  --product-search-top: clamp(40px, calc(29.804px + 2.6144vw), 80px);
  --product-search-rule: 2px;
  --product-search-line: 4px;
  --product-search-icon: 26px;
  --product-list-top: clamp(48px, calc(34.745px + 3.3987vw), 100px);
  --product-border: 1px;
  --product-focus-ring: 2px;
  --product-focus-offset: 4px;
}
.site-banner { position: relative; padding-block: var(--banner-pad-top) var(--banner-pad-bottom); color: #fff; isolation: isolate; overflow: hidden; }
.site-banner__image, .site-banner::after { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; }
.site-banner__image { object-fit: cover; object-position: var(--banner-image-position, center); max-width: none; inset: auto; width: var(--banner-image-width, 100%); height: var(--banner-image-height, 100%); left: var(--banner-image-left, 0%); top: var(--banner-image-top, 0%); }
.site-banner::after { content: ''; background: var(--banner-shade); }
.site-banner__content { display: flex; flex-direction: column; align-items: flex-start; gap: var(--banner-gap); }
.site-banner__breadcrumbs { display: flex; flex-wrap: wrap; align-items: center; column-gap: var(--banner-crumb-gap); margin: 0; font-size: var(--banner-breadcrumb); line-height: 1.65; }
.site-banner[data-breadcrumb-size="small"] .site-banner__breadcrumbs { font-size: var(--fs-body); }
.site-banner__separator { font-size: var(--fs-body); }
.site-banner__breadcrumbs b { font-weight: var(--banner-crumb-weight, 500); }
.site-banner__title { margin: 0; font-size: var(--fs-h1); font-weight: 700; line-height: 1.3; }
.site-banner__copy { max-width: var(--banner-copy-w); margin: 0; font-size: var(--fs-lead); line-height: 1.65; }
.site-product-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(var(--card-min), 100%), 1fr)); gap: var(--space-grid); }
.site-product-card { display: flex; flex-direction: column; align-items: stretch; min-width: 0; font-family: var(--font-brand); }
.site-product-card__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--card-radius); background: var(--beige); }
.site-product-card__media::after { content: ""; position: absolute; inset: 0; border: var(--product-border) solid var(--line); border-radius: inherit; pointer-events: none; }
.site-product-card__image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.site-product-card__image[data-crop] { inset: auto; max-width: none; width: var(--product-image-width, 100%); height: var(--product-image-height, 100%); left: var(--product-image-left, 0%); top: var(--product-image-top, 0%); transform-origin: 0 0; transform: rotate(var(--product-image-rotation, 0deg)); }
.site-product-card__title { margin: var(--card-title-gap) 0 0; font-size: var(--fs-h3); font-weight: 700; line-height: 1.4; }
.site-product-card__copy { margin: var(--card-copy-gap) 0 0; font-size: var(--fs-body); color: var(--text-soft); line-height: 1.65; }
/* 4→2→1, 마지막 행 카드가 화면 전체로 늘어나지 않음. */
@media (min-width: 1200px) { .site-product-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 600px) and (max-width: 1199.98px) { .site-product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 599.98px) { .site-product-grid { grid-template-columns: minmax(0, 1fr); } }

/* Frame25: 시안의 원본 선 + 빈 검색 입력. 한글 조합/NFC 처리는 components.js 소유. */
.site-product-search { position: relative; padding-top: var(--product-search-top); }
.site-product-search::after { content: ""; position: absolute; inset-inline: 0; bottom: 0; height: var(--product-search-rule); transform: translateY(50%); background: url("/_shared/assets/product-search-rule.svg") center / 100% 100% no-repeat; pointer-events: none; }
.site-product-search__form { position: relative; z-index: 1; display: flex; width: min(var(--product-search-width), 100%); min-height: var(--hit-min); margin-left: auto; background: var(--page); }
.site-product-search__input { flex: 1 1 auto; width: 0; min-width: 0; min-height: var(--hit-min); border: 0; border-radius: 0; padding: 0; background: transparent; color: var(--text); font-family: var(--font-brand); font-size: var(--fs-body); }
.site-product-search__submit { display: flex; align-items: center; justify-content: flex-end; flex: 0 0 var(--hit-min); width: var(--hit-min); min-height: var(--hit-min); padding: 0; }
.site-product-search__icon { width: var(--product-search-icon); font-family: var(--font-icon); font-size: var(--product-search-icon); font-weight: 400; line-height: 1.4; }
.site-product-search__line { position: absolute; inset-inline: 0; bottom: 0; width: 100%; height: var(--product-search-line); transform: translateY(50%); pointer-events: none; }
.site-product-search__input:focus-visible, .site-product-search__submit:focus-visible { outline: var(--product-focus-ring) solid var(--primary); outline-offset: var(--product-focus-offset); }
.site-product-list { padding-block: var(--product-list-top) var(--space-section); }
.site-product-list__empty { margin: 0; color: var(--text-muted); font-family: var(--font-brand); }
@media (max-width: 839.98px) {
  .site-banner__image { width: 100%; height: 100%; left: 0; top: 0; object-position: var(--banner-image-mobile-position, center); }
}
/* Figma 136:2799. 공유 chrome의 스타일은 이 페이지에서 재정의하지 않는다. */
:root {
  --login-card-width: 600px;
  --login-card-padding: clamp(24px, calc(-35.429px + 15.2381vw), 56px);
  --login-section-top: clamp(48px, calc(27.098px + 5.3595vw), 130px);
  --login-section-bottom: clamp(56px, calc(34.588px + 5.4902vw), 140px);
  --login-title: clamp(28px, calc(17.6px + 2.6667vw), 40px);
  --login-copy: clamp(16px, calc(14.267px + .4445vw), 18px);
  --login-action: clamp(18px, calc(16.267px + .4445vw), 20px);
  --login-control-height: clamp(56px, calc(52.533px + .8889vw), 60px);
  --login-radius: 20px;
  --login-control-radius: 10px;
  --login-input-line: #d8d3cb;
  --login-placeholder: #8e8a85;
  --login-overlay: .63;
  --login-line-width: 1px;
  --login-logo-width: 73.492px;
  --login-heading-gap: 10px;
  --login-form-gap: clamp(32px, calc(21.6px + 2.6667vw), 44px);
  --login-label-gap: 12px;
  --login-field-gap: 26px;
  --login-input-padding: 20px;
  --login-check-size: 16px;
  --login-check-gap: 14px;
  --login-remember-before: 24px;
  --login-remember-after: 36px;
  --login-recovery-before: 22px;
  --login-recovery-gap: 20px;
  --login-signup-space: 40px;
  --login-signup-copy-gap: 10px;
  --login-signup-button-gap: 24px;
  --login-feedback-gap: 12px;
}
.login-section {
  position: relative;
  isolation: isolate;
  padding-block: var(--login-section-top) var(--login-section-bottom);
  background: var(--warm);
}
.login-background, .login-section::after { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.login-section::after { content: ""; background: var(--dark); opacity: var(--login-overlay); }
.login-container { display: flex; justify-content: center; }
.login-card {
  width: min(100%, var(--login-card-width));
  min-width: 0;
  padding: calc(var(--login-card-padding) - var(--login-line-width));
  border: var(--login-line-width) solid var(--line);
  border-radius: var(--login-radius);
  background: var(--page);
  font-size: var(--login-copy);
  line-height: 1.5;
}
.login-heading { display: grid; justify-items: center; gap: var(--login-heading-gap); }
.login-logo { width: var(--login-logo-width); height: auto; }
.login-heading h1 { margin: 0; font-size: var(--login-title); font-weight: 700; line-height: 1.3; text-align: center; }
.login-form { margin-top: var(--login-form-gap); }
.login-field + .login-field { margin-top: var(--login-field-gap); }
.login-field > label { display: block; margin-bottom: var(--login-label-gap); color: var(--text-soft); font-weight: 500; line-height: 1.4; }
.login-field > input {
  display: block;
  width: 100%;
  min-width: 0;
  min-height: var(--login-control-height);
  padding: var(--login-label-gap) var(--login-input-padding);
  border: var(--login-line-width) solid var(--login-input-line);
  border-radius: var(--login-control-radius);
  background: var(--page);
  color: var(--text);
  font-size: var(--login-copy);
  line-height: 1.5;
}
.login-field > input::placeholder { color: var(--login-placeholder); opacity: 1; }
.login-field > input:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.login-field > input[aria-invalid="true"] { border-color: var(--primary); }
.login-remember {
  display: flex;
  align-items: center;
  gap: var(--login-check-gap);
  width: fit-content;
  min-height: var(--hit-min);
  margin-top: calc(var(--login-remember-before) - (var(--hit-min) - var(--login-check-size)) / 2);
  margin-bottom: calc(var(--login-remember-after) - (var(--hit-min) - var(--login-check-size)) / 2);
  cursor: pointer;
}
.login-remember > input { flex: 0 0 var(--login-check-size); width: var(--login-check-size); height: var(--login-check-size); margin: 0; accent-color: var(--primary); cursor: pointer; }
.login-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: var(--login-control-height);
  padding: var(--login-label-gap) var(--login-input-padding);
  border: var(--login-line-width) solid transparent;
  border-radius: var(--login-control-radius);
  font-size: var(--login-action);
  font-weight: 500;
  line-height: 1.3;
}
.login-button--primary { background: var(--primary); color: var(--page); }
.login-button--secondary { border-color: var(--text); background: var(--page); color: var(--text); }
.login-recovery {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 var(--login-recovery-gap);
  margin-top: calc(var(--login-recovery-before) - (var(--hit-min) - var(--login-copy) * 1.5) / 2);
}
.login-recovery > button { min-height: var(--hit-min); padding: 0; color: var(--text-muted); font-size: inherit; line-height: 1.5; }
.login-card button:disabled { opacity: 1; cursor: not-allowed; }
.login-signup {
  margin-top: calc(var(--login-signup-space) - (var(--hit-min) - var(--login-copy) * 1.5) / 2);
  padding-top: var(--login-signup-space);
  border-top: var(--login-line-width) solid var(--line);
}
.login-signup h2 { margin: 0; font-size: var(--login-action); font-weight: 500; line-height: 1.45; }
.login-signup > p { margin: var(--login-signup-copy-gap) 0 0; color: var(--text-muted); overflow-wrap: anywhere; }
.login-signup > .login-button { margin-top: var(--login-signup-button-gap); }
.login-error, .login-notice { margin: var(--login-feedback-gap) 0 0; color: var(--primary); font-size: var(--login-copy); }
.login-card [hidden] { display: none; }
/* Figma 53:2. Only this page owns these tokens and selectors. */
.s0101 {
  --s-section: clamp(68px, calc(42px + 6.6667vw), 170px);
  --s-section-bottom: var(--space-section);
  --s-copy: clamp(16px, calc(14.98px + .2614vw), 20px);
  --s-kicker: clamp(15px, calc(13.725px + .3268vw), 20px);
  --s-hero-label: clamp(17px, calc(15.216px + .4575vw), 24px);
  --s-value-title: clamp(24px, calc(20.941px + .7843vw), 36px);
  --s-value-num: clamp(30px, calc(27.451px + .6536vw), 40px);
  --s-cta-title: clamp(26px, calc(22.431px + .915vw), 40px);
  --s-gap-16: clamp(12px, calc(10.98px + .2614vw), 16px);
  --s-gap-18: clamp(14px, calc(12.98px + .2614vw), 18px);
  --s-gap-20: clamp(16px, calc(14.98px + .2614vw), 20px);
  --s-gap-22: clamp(16px, calc(14.471px + .3922vw), 22px);
  --s-gap-24: clamp(18px, calc(16.471px + .3922vw), 24px);
  --s-gap-33: clamp(22px, calc(19.196px + .719vw), 33px);
  --s-gap-34: clamp(20px, calc(16.431px + .915vw), 34px);
  --s-gap-40: clamp(24px, calc(19.922px + 1.0458vw), 40px);
  --s-gap-52: clamp(30px, calc(24.392px + 1.438vw), 52px);
  --s-gap-56: clamp(32px, calc(25.882px + 1.5686vw), 56px);
  --s-gap-60: clamp(36px, calc(29.882px + 1.5686vw), 60px);
  --s-gap-76: clamp(40px, calc(30.824px + 2.3529vw), 76px);
  --s-gap-100: clamp(32px, calc(14.667px + 4.4444vw), 100px);
  --s-radius: clamp(16px, calc(14.98px + .2614vw), 20px);
  --s-hero-radius: clamp(24px, calc(17.373px + 1.6993vw), 50px);
  --s-cta-radius: clamp(24px, calc(19.922px + 1.0458vw), 40px);
  --s-button-h: clamp(56px, calc(51.922px + 1.0458vw), 72px);
  --s-button-w: 300px;
  --s-button-radius: 50px;
  --s-cta-max: 1720px;
  --s-stat-min: 310px;
  --s-value-min: 270px;
  --s-partner-min: 230px;
  --s-partner-height: clamp(110px, calc(102.353px + 1.9608vw), 140px);
  --s-stat-bg: #f1f1f1;
  --s-partner-bg: #f6f6f6;
  --s-partner-text: #5c5c5c;
  --s-arrow-color: #8e8a85;
  font-family: var(--font-brand);
}
.s0101 :where(h1, h2, h3, p, ul) { margin: 0; }
.s0101-hero { --hero-opening: 57.5%; --hero-travel: 125svh; height: calc(100svh + var(--hero-travel)); }
.s0101-hero__stage { position: sticky; top: 0; height: 100vh; height: 100svh; isolation: isolate; overflow: clip; }
.s0101-hero__intro { position: absolute; inset: 0 0 auto; height: var(--hero-opening); display: flex; align-items: flex-end; padding-bottom: var(--s-gap-40); text-align: center; }
.s0101-hero__eyebrow { color: var(--primary); font-size: var(--s-hero-label); font-weight: 700; line-height: 1.3; letter-spacing: -.02em; }
.s0101-hero h1 { margin-top: var(--s-gap-34); font-size: var(--fs-h1); font-weight: 700; line-height: 1.3; letter-spacing: -.02em; }
.s0101-hero h1 span { display: inline-block; }
.s0101-hero__scroll { display: flex; justify-content: center; align-items: center; width: var(--hit-min); height: var(--hit-min); margin: calc(var(--s-gap-40) - 5.5px) auto -5.5px; padding: 0; color: var(--s-arrow-color); }
.s0101-hero__scroll span { font-family: var(--font-icon); font-size: 24px; font-weight: 400; line-height: .45; }
.s0101-hero__visual { position: absolute; top: var(--hero-opening); left: 4.166667%; right: 4.166667%; bottom: 0; border-radius: var(--s-hero-radius) var(--s-hero-radius) 0 0; overflow: clip; z-index: 1; pointer-events: none; will-change: top, left, right, border-radius; }
.s0101-hero__photo { object-position: 50% 43.2%; }
.s0101-hero__shade { position: absolute; inset: 0; background: #000; opacity: 0; pointer-events: none; }
.s0101-hero__message { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: var(--s-gap-33); z-index: 2; text-align: center; color: #fff; opacity: 0; pointer-events: none; }
.s0101-hero__mark { width: clamp(72px, calc(62.314px + 2.4837vw), 110px); height: auto; opacity: .5; }
.s0101-hero__headline { font-size: var(--fs-h1); font-weight: 700; line-height: 1.3; letter-spacing: -.02em; }
.s0101-hero__description { max-width: 760px; font-size: var(--s-copy); font-weight: 600; line-height: 1.53; letter-spacing: -.02em; text-wrap: balance; }
.s0101-section { padding-block: var(--s-section); }
.s0101-kicker { color: var(--primary); font-size: var(--s-kicker); font-weight: 700; line-height: 1.3; letter-spacing: .04em; }
.s0101-title { margin-top: var(--s-gap-22) !important; font-size: var(--fs-h2); font-weight: 700; line-height: 1.32; letter-spacing: -.01em; }
.s0101-overview__copy { margin-top: var(--s-gap-24) !important; color: var(--text-muted); font-size: var(--s-copy); font-weight: 500; line-height: 1.72; }
.s0101-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(var(--s-stat-min), 100%), 1fr)); gap: var(--s-gap-20); margin-top: var(--s-gap-60); }
.s0101-stat { position: relative; container-type: inline-size; aspect-ratio: 520 / 480; min-width: 0; background: var(--s-stat-bg); border-radius: var(--s-radius); overflow: clip; }
.s0101-stat--history { background: var(--primary); color: #fff; }
.s0101-stat--locations { border-radius: calc(var(--s-radius) * 1.5); }
.s0101-stat__copy { position: relative; z-index: 1; padding: 13.461538% 10.766807% 0; }
.s0101-stat__number { color: var(--primary); font-size: 13.461538cqw; line-height: 1.2; font-weight: 700; letter-spacing: -.02em; }
.s0101-stat--history .s0101-stat__number { color: inherit; }
.s0101-stat__copy p { margin-top: 1.730769cqw; color: var(--text-muted); font-size: max(15px, 3.846154cqw); font-weight: 500; line-height: 1.5; }
.s0101-stat--history .s0101-stat__copy p { color: inherit; }
.s0101-stat__art { position: absolute; overflow: clip; pointer-events: none; }
.s0101-stat__art img { position: absolute; max-width: none; }
/* Original Figma image-fill crop transforms; three windows of one transparent artwork. */
.s0101-stat__art--meat { left: 41.153846%; top: 36.041667%; width: 58.846154%; height: 63.958333%; }
.s0101-stat__art--meat img { width: 311.44%; height: 174.69%; left: 0; top: -29.33%; }
.s0101-stat__art--delivery { left: 37.115385%; top: 24.375%; width: 62.884615%; height: 75.625%; }
.s0101-stat__art--delivery img { width: 321.23%; height: 163.02%; left: -106.31%; top: -23.5%; }
.s0101-stat__art--quality { left: 46.538462%; top: 27.916667%; width: 53.461538%; height: 72.083333%; }
.s0101-stat__art--quality img { width: 337.5%; height: 152.91%; left: -223.84%; top: -18.44%; }
.s0101-section-head { text-align: center; }
.s0101-section-head .s0101-kicker { font-weight: 600; }
.s0101-values { background: var(--warm); }
.s0101-values__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(var(--s-value-min), 100%), 1fr)); gap: var(--space-grid); margin-top: var(--s-gap-76); }
.s0101-value { border-top: 2px solid var(--text); padding-top: var(--space-grid); }
.s0101-value__number { color: var(--primary); font-size: var(--s-value-num); line-height: 1.3; font-weight: 500; letter-spacing: .02em; }
.s0101-value h3 { margin-top: var(--s-gap-16); font-size: var(--s-value-title); font-weight: 700; line-height: 1.4; letter-spacing: -.005em; }
.s0101-value__copy { max-width: 480px; margin-top: var(--s-gap-18) !important; color: var(--text-muted); font-size: var(--fs-body); font-weight: 400; line-height: 1.49; }
.s0101-partners { padding-bottom: var(--s-section-bottom); }
.s0101-partners .s0101-title { margin-top: var(--s-gap-20) !important; }
.s0101-partners__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(var(--s-partner-min), 100%), 1fr)); gap: var(--s-gap-24); list-style: none; padding: 0; margin-top: var(--s-gap-56) !important; }
.s0101-partners__grid li { display: flex; align-items: center; justify-content: center; min-height: var(--s-partner-height); border-radius: var(--s-radius); background: var(--s-partner-bg); }
.s0101-partners__grid img { object-fit: contain; }
.s0101-partners__grid span { font-size: var(--s-hero-label); font-weight: 700; line-height: 1.4; color: var(--s-partner-text); }
.s0101-inquiry { padding-block: var(--s-gap-100); }
.s0101-inquiry__panel { position: relative; width: min(var(--s-cta-max), calc(100% - var(--gutter) * 1.25)); overflow: clip; border-radius: var(--s-cta-radius); color: #fff; isolation: isolate; }
.s0101-inquiry__image, .s0101-inquiry__panel::after { position: absolute; inset: 0; z-index: -1; }
.s0101-inquiry__panel::after { content: ''; background: rgb(0 0 0 / .75); }
.s0101-inquiry__content { padding: var(--space-section) var(--s-gap-24); text-align: center; }
.s0101-inquiry h2 { font-size: var(--s-cta-title); font-weight: 700; line-height: 1.32; letter-spacing: -.01em; }
.s0101-inquiry__content > p { margin-top: var(--s-gap-24); font-size: var(--fs-lead); line-height: 1.72; }
.s0101-inquiry__actions { display: flex; justify-content: center; flex-wrap: wrap; gap: var(--s-gap-24); margin-top: var(--s-gap-52); }
.s0101-button { display: inline-flex; align-items: center; justify-content: center; gap: var(--s-gap-16); min-height: var(--s-button-h); width: min(100%, var(--s-button-w)); border-radius: var(--s-button-radius); background: var(--primary); color: #fff; font-size: var(--s-copy); font-weight: 700; line-height: 1.2; }
.s0101-button > span { font-size: var(--fs-body); }
.s0101-icon { font-family: var(--font-icon); font-weight: 400; }
@media (max-width: 599.98px) {
  .s0101-hero h1 span { display: block; }
  .s0101-hero__description { max-width: 320px; }
  .s0101-partners__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .s0101-partners__grid img { max-width: 80%; }
}
@media (prefers-reduced-motion: reduce) {
  .s0101-hero { height: auto; }
  .s0101-hero__stage { position: relative; height: auto; overflow: visible; }
  .s0101-hero__intro { position: relative; height: auto; min-height: 57.5svh; padding-top: calc(var(--chrome-h-top) + var(--s-gap-40)); }
  .s0101-hero__visual { top: auto; height: 100svh; left: 0; right: 0; border-radius: 0; }
  .s0101-hero__shade { opacity: .45; }
  .s0101-hero__message { position: relative; min-height: 100svh; opacity: 1; }
}
/* 82:2 전용. 공유 컴포넌트와 chrome은 이 파일에서 재정의하지 않는다. */
:root {
  --s0102-grid-gap: clamp(32px, calc(23.843px + 2.0915vw), 64px);
  --s0102-card-min: 300px;
  --s0102-radius: 10px;
  --s0102-paper-line: #d8d3cb;
  --s0102-muted: #8e8a85;
  --s0102-title: clamp(25px, calc(22.196px + .719vw), 36px);
  --s0102-list-title: clamp(23px, calc(21.725px + .3268vw), 28px);
  --s0102-badge-gap: clamp(24px, calc(21.961px + .5229vw), 32px);
  --s0102-title-gap: 20px;
  --s0102-copy-gap: 12px;
  --s0102-card-bottom: 17px;
  --s0102-badge-inline: 14px;
  --s0102-badge-block: 7px;
  --s0102-columns-gap: clamp(32px, calc(19.765px + 3.1373vw), 80px);
  --s0102-list-gap: clamp(32px, calc(25.627px + 1.634vw), 57px);
  --s0102-row-h: 81px;
  --s0102-row-pad: 18px;
  --s0102-row-gap: clamp(8px, calc(-.157px + 2.0915vw), 40px);
  --s0102-status-inline: 12px;
  --s0102-status-block: 6px;
  --s0102-arrow-gap: 8px;
}
.s0102-certifications, .s0102-disinfection { padding-block: var(--space-section); }
.s0102-certificate-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(var(--s0102-card-min), 100%), 1fr)); gap: var(--s0102-grid-gap); }
.s0102-certificate { min-width: 0; padding-bottom: var(--s0102-card-bottom); }
.s0102-certificate-panel { display: grid; place-items: center; aspect-ratio: 490.667 / 406; background: var(--beige); border-radius: var(--s0102-radius); }
.s0102-certificate-paper { position: relative; width: 50.1358%; aspect-ratio: 246 / 326; overflow: hidden; border: 1px solid var(--s0102-paper-line); background: var(--page); }
.s0102-certificate-paper > img, .s0102-disinfection-paper > img { position: absolute; inset: 0; max-width: none; }
.s0102-certificate-paper--pork > img { inset: .43% auto auto -90.74%; width: 185.85%; height: 99.17%; }
.s0102-certificate-paper--beef > img { inset: .28% auto auto -96.37%; width: 192%; height: 102.46%; }
.s0102-badge { display: inline-flex; margin-top: var(--s0102-badge-gap); padding: var(--s0102-badge-block) var(--s0102-badge-inline); background: var(--primary-soft); color: var(--primary); border-radius: var(--s0102-radius); font-weight: 500; font-size: var(--fs-body); line-height: 1.3; }
.s0102-certificate-title { margin: var(--s0102-title-gap) 0 0; font-family: var(--font-brand); font-weight: 700; font-size: var(--s0102-title); line-height: 1.35; }
.s0102-certificate-copy { margin: var(--s0102-copy-gap) 0 0; color: var(--text-muted); font-family: var(--font-brand); font-size: var(--fs-body); line-height: 1.65; }
.s0102-disinfection { background: var(--surface); }
.s0102-disinfection-layout { display: grid; grid-template-columns: minmax(0, 660fr) minmax(0, 860fr); align-items: start; gap: var(--s0102-columns-gap); }
.s0102-disinfection-panel { display: grid; place-items: center; aspect-ratio: 660 / 581; background: var(--beige); border-radius: var(--s0102-radius); }
.s0102-disinfection-paper { position: relative; width: 44.8485%; aspect-ratio: 296 / 423; border: 1px solid var(--s0102-paper-line); background: var(--page); overflow: hidden; }
.s0102-disinfection-paper > img { inset: 3.7% auto auto 3.33%; width: 93.51%; height: 92.71%; }
.s0102-monthly { min-width: 0; }
.s0102-monthly-title { margin: 0; font-size: var(--s0102-list-title); font-weight: 700; line-height: 1.35; }
.s0102-document-list { list-style: none; margin: var(--s0102-list-gap) 0 0; padding: 0; border-top: 2px solid var(--text); }
.s0102-document-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; min-height: var(--s0102-row-h); gap: var(--s0102-row-gap); padding-block: var(--s0102-row-pad); border-bottom: 1px solid var(--line); font-size: var(--fs-body); font-weight: 500; line-height: 1.4; }
.s0102-document-month { white-space: nowrap; }
.s0102-document-status { padding: var(--s0102-status-block) var(--s0102-status-inline); background: var(--beige); color: var(--s0102-muted); white-space: nowrap; }
.s0102-document-status--current { background: var(--primary-soft); color: var(--primary); }
.s0102-download { display: inline-flex; align-items: center; justify-content: flex-end; gap: var(--s0102-arrow-gap); min-height: var(--hit-min); padding: 0; color: var(--text-soft); white-space: nowrap; line-height: 1.4; }
.s0102-download:disabled { opacity: 1; cursor: not-allowed; }
@media (max-width: 839.98px) { .s0102-disinfection-layout { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 599.98px) { :root { --s0102-status-inline: 8px; --s0102-row-pad: 12px; --s0102-row-h: 69px; --s0102-arrow-gap: 4px; } }
/* 업무 화면 공통(.app- 영역 전용). 공개 페이지 CSS(base → chrome → components → 페이지) 뒤에 불러오고,
   기존 토큰(--primary, --line, --gutter, --hit-min …)만 사용한다. 기존 선택자를 덮지 않는다. */

.app-layout {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background: var(--warm);
  color: var(--text);
}

.app-skip-link {
  position: absolute;
  top: -100px;
  left: 8px;
  z-index: 10;
  padding: 10px 16px;
  border-radius: 4px;
  background: var(--dark);
  color: #fff;
}
.app-skip-link:focus { top: 8px; }

.app-layout__header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 24px;
  padding: 12px var(--gutter);
  border-bottom: 1px solid var(--line);
  background: var(--page);
}
.app-layout__brand {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-family: var(--font-brand);
  font-size: var(--fs-lead);
  font-weight: 700;
}
.app-layout__role {
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--primary-soft);
  color: var(--primary);
  font-size: var(--fs-small);
  font-weight: 500;
}
.app-layout--driver .app-layout__role { background: var(--beige); color: var(--text-soft); }
.app-layout--admin .app-layout__role { background: var(--dark); color: var(--cream); }

.app-layout__nav {
  display: flex;
  gap: 4px;
  max-width: 100%;
  overflow-x: auto;
}
.app-layout__nav a {
  display: inline-flex;
  align-items: center;
  min-height: var(--hit-min);
  padding: 0 12px;
  border-radius: 4px;
  color: var(--text-soft);
  white-space: nowrap;
}
.app-layout__nav a:hover { background: var(--surface); color: var(--text); }

.app-layout__main {
  flex: 1;
  width: min(var(--rail), calc(100% - var(--gutter) * 2));
  margin-inline: auto;
  padding-block: 32px 64px;
}
.app-layout__title { margin: 0 0 24px; font-size: var(--fs-h3); }

.app-section {
  margin-block: 24px;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--page);
}
.app-section > h2 { margin: 0 0 16px; font-size: var(--fs-lead); }

.app-status {
  margin: 12px 0;
  padding: 12px 16px;
  border-radius: 6px;
  background: var(--surface);
  color: var(--text-soft);
}
.app-status--empty { border: 1px dashed var(--line); background: var(--page); }
.app-status--error {
  border-left: 4px solid var(--primary);
  background: var(--primary-soft);
  color: var(--text);
}
.app-status--error p { margin: 0 0 8px; }
.app-status__meta { color: var(--text-muted); font-family: var(--font-num); font-size: var(--fs-small); }

.app-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--hit-min);
  padding: 0 18px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--page);
  color: var(--text);
  font-weight: 500;
}
.app-button:hover { border-color: var(--text-muted); }
.app-button--primary { border-color: var(--primary); background: var(--primary); color: #fff; }
.app-button--primary:hover { border-color: var(--primary); }

.app-form { display: grid; gap: 16px; max-width: 560px; }
.app-form[aria-busy="true"] .app-button--primary { cursor: progress; opacity: .7; }
.app-field { display: grid; gap: 6px; }
.app-field__label { font-weight: 500; }
.app-field__input {
  min-height: var(--hit-min);
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--page);
}
.app-field__input[aria-invalid="true"] { border-color: var(--primary); }
.app-field__error { margin: 0; color: var(--primary); font-size: var(--fs-small); }
.app-actions { display: flex; flex-wrap: wrap; gap: 8px; }

.app-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--page);
}
.app-table { width: 100%; border-collapse: collapse; font-size: var(--fs-small); }
.app-table caption { padding: 10px 12px; color: var(--text-muted); text-align: left; }
.app-table th,
.app-table td {
  padding: 10px 12px;
  border-top: 1px solid var(--line);
  text-align: left;
  white-space: nowrap;
}
.app-table th { background: var(--surface); font-weight: 500; }

@media (max-width: 767px) {
  .app-layout__header { padding: 10px 16px; }
  .app-layout__main { width: calc(100% - 32px); padding-block: 20px 48px; }
  .app-section { padding: 16px; }
  .app-actions .app-button { flex: 1 1 auto; }
}
/* HS-03 인증 화면(.auth- 영역 전용). app.css 뒤에 불러오며 기존 토큰만 사용한다. 기존 선택자를 덮지 않는다. */

.auth-frame { display: grid; align-content: start; gap: 12px; }

.auth-logout {
  display: inline-flex;
  align-items: center;
  min-height: var(--hit-min);
  padding: 0 12px;
  border: 0;
  border-radius: 4px;
  background: none;
  color: var(--text-soft);
  font: inherit;
  white-space: nowrap;
  cursor: pointer;
}
.auth-logout:hover { background: var(--surface); color: var(--text); }
.auth-logout[aria-disabled="true"] { cursor: progress; opacity: .7; }

.auth-account { margin: 0 0 12px; color: var(--text-soft); }
.auth-account strong { color: var(--text); font-weight: 500; overflow-wrap: anywhere; }

.auth-hint { margin: 0; color: var(--text-muted); font-size: var(--fs-small); }
/* 업무 전용 보정. 공개 chrome/토큰 원본에는 영향을 주지 않는다. */
.app-layout {
  --app-xs: 13px;
  --app-sm: 14px;
  --app-body: 15px;
  --app-md: 16px;
  --app-lg: 18px;
  --app-xl: 22px;
  --app-control-line: #91877d;
  --app-sidebar: 232px;
  --fs-small: var(--app-sm);
  --fs-body: var(--app-body);
  --fs-lead: var(--app-lg);
  --fs-h3: var(--app-lg);
  --fs-h2: var(--app-xl);
  --fs-h1: var(--app-xl);
  font-size: var(--app-sm);
  line-height: 1.6;
  overflow-wrap: anywhere;
}
.app-layout :is(h1, h2, h3, h4) {
  font-family: var(--font-brand);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: -.02em;
}
.app-layout :is(h2, h3, h4) { font-size: var(--app-lg); }
.app-layout h3 { margin: 24px 0 12px; font-size: var(--app-md); }
.app-layout p { margin-block: 8px; }
.app-layout :is(time, input[type="number"], input[inputmode="decimal"], input[type="time"], input[type="date"]),
.app-number {
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
}
.app-layout :is(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 3px;
}
.app-skip-link { position: fixed; z-index: 40; }
.app-layout__header {
  gap: 12px 32px;
  padding: 16px 32px;
  border-top: 3px solid var(--primary);
}
.app-layout__brand { flex-shrink: 0; gap: 10px; }
.app-layout__brand img { width: 38px; height: 36px; object-fit: contain; }
.app-layout__role {
  padding: 3px 9px;
  border: 1px solid var(--line);
  border-radius: 4px;
  font-size: var(--app-xs);
}
.app-layout--admin .app-layout__role { background: var(--surface); color: var(--text-soft); }
.app-layout__navigation { display: flex; flex: 1; align-items: center; justify-content: space-between; gap: 16px; min-width: 0; }
.app-layout__nav { flex-wrap: wrap; gap: 4px; overflow: visible; }
.app-layout__nav a {
  position: relative;
  min-height: 40px;
  padding: 9px 14px;
  font-size: var(--app-sm);
  font-weight: 500;
}
.app-layout__nav a[aria-current="page"] { background: var(--primary-soft); color: var(--primary); font-weight: 700; }
.app-layout__nav a[aria-current="page"]::before {
  position: absolute; left: 0; top: 12px; bottom: 12px; width: 3px;
  border-radius: 2px; background: var(--primary); content: "";
}
.app-layout__account { flex-shrink: 0; }
.app-account-id { display: flex; flex-wrap: wrap; gap: 4px 8px; font-size: var(--app-xs); color: var(--text-muted); }
.app-account-id strong { color: var(--text-soft); font-family: var(--font-brand); font-weight: 600; }
.app-account-actions { display: flex; flex-wrap: wrap; gap: 4px; }
.app-layout .app-account-actions :is(a, button) {
  display: inline-flex; align-items: center; justify-content: center; min-height: 40px;
  padding: 8px 10px; border-radius: 4px; font-size: var(--app-xs); color: var(--text-soft);
}
.app-layout .app-account-actions a:visited { color: var(--text-soft); }
.app-layout .app-account-actions :is(a, button):hover { color: var(--text); background: var(--surface); }
.app-layout .app-account-actions a[aria-current="page"] { color: var(--primary); background: var(--primary-soft); }
.app-layout--admin {
  padding-left: var(--app-sidebar);
  background: linear-gradient(to right,
    var(--page) 0 calc(var(--app-sidebar) - 1px),
    var(--line) calc(var(--app-sidebar) - 1px) var(--app-sidebar),
    var(--warm) var(--app-sidebar) 100%);
}
.app-layout--admin .app-layout__header {
  position: fixed; inset: 0 auto 0 0; z-index: 20;
  display: flex; flex-direction: column; flex-wrap: nowrap; align-items: stretch;
  width: var(--app-sidebar); padding: 24px 16px 16px; gap: 28px;
  border-right: 1px solid var(--line); border-bottom: 0;
  overflow-y: auto;
}
.app-layout--admin .app-layout__brand { padding-inline: 8px; }
.app-layout--admin .app-layout__navigation { flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 28px; }
.app-layout--admin .app-layout__nav { flex-direction: column; flex-wrap: nowrap; gap: 16px; }
.app-nav-group { display: flex; flex-direction: column; gap: 4px; }
.app-nav-group__label { padding: 0 14px; color: var(--text-muted); font-size: var(--app-xs); }
.app-layout--admin .app-layout__account { margin-top: auto; padding: 16px 4px 0; border-top: 1px solid var(--line); }
.app-layout--admin .app-account-id { flex-direction: column; padding-inline: 8px; }
.app-menu-toggle { display: none; }
.app-layout__main {
  position: relative;
  width: min(1200px, calc(100% - 64px));
  min-width: 0;
  padding-block: 32px 64px;
}
.app-layout--admin .app-layout__main { width: calc(100% - 64px); max-width: 1440px; }
.app-page-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 40px; margin-bottom: 24px; }
.app-layout__title { margin: 0; font-size: var(--app-xl); }
.app-layout__main > .app-layout__title { margin-bottom: 24px; }
.app-page-heading__description { color: var(--text-muted); font-size: var(--app-sm); }
/* 관리자 상세 화면 제목 왼쪽 ← (2026-10-29 사용자 지시). 점주 주문 상세 ←(.app-order-back)와 같은 모양. */
.app-page-heading__title { display: flex; align-items: center; gap: 6px; }
.app-layout .app-page-back {
  display: inline-grid; place-items: center; flex: 0 0 auto; width: 44px; height: 44px; margin-left: -10px;
  border-radius: 100px; color: var(--text); font-size: 24px; line-height: 1; text-decoration: none;
}
.app-layout .app-page-back:hover { background: var(--surface); color: var(--primary); }
.app-layout .app-page-back:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.app-page-actions { display: flex; flex-wrap: wrap; gap: 8px; position: absolute; top: 32px; right: 0; }
.app-layout__main:has(.app-page-actions) > .app-page-heading { padding-right: 200px; }
.app-section { min-width: 0; margin-block: 20px; padding: 24px; border-radius: 8px; box-shadow: 0 1px 2px #1a1a1a04; }
.app-section > h2 { margin: 0 0 20px; padding-bottom: 14px; border-bottom: 1px solid var(--line); font-size: var(--app-lg, 18px); }
.app-section .app-section { box-shadow: none; }
.app-section > .app-form + h2,
.app-section > .app-actions + h2 { margin-top: 32px; }
.app-layout__main > .app-section:first-of-type { margin-top: 0; }
.app-page-sections { min-width: 0; }
.app-page-sections > .app-section:first-child { margin-top: 0; }
.app-page-sections > .app-section.app-dialog { margin: auto; } /* 창이 첫 자식이어도 위아래 가운데(CD) */
.app-layout__main > .app-section.app-dialog { margin: auto; } /* main 바로 아래 창도 :first-of-type 규칙에 위가 0으로 붙지 않게(PM) */
.app-page-subheading { margin: 0 0 16px; color: var(--text-soft); }
.app-section-heading {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 12px 24px; margin-bottom: 20px; padding-bottom: 16px; border-bottom: 1px solid var(--line);
}
.app-section-heading h2 { margin: 0; font-size: var(--app-lg); }
.app-section-heading p { margin: 6px 0 0; color: var(--text-muted); font-size: var(--app-xs); }
.app-section-heading > .app-button { flex-shrink: 0; }

/* 입력은 공통 class가 누락된 기존 업무 폼도 같은 범위에서 정돈한다. */
.app-layout :is(input:not([type="checkbox"], [type="radio"], [type="file"]), select, textarea) {
  width: 100%; min-width: 0; min-height: 40px; max-width: 100%;
  padding: 8px 12px; border: 1px solid var(--app-control-line); border-radius: 5px;
  background: var(--page); color: var(--text); font-size: var(--app-sm); line-height: 1.5;
}
/* 기본 화살표는 오른쪽 테두리에 붙어 보여서(2026-10-22 버드 지적) 같은 모양의 화살표를 오른쪽 14px 안쪽에 그린다.
   위 공통 입력 규칙(:is 안의 input:not(...) 때문에 우선순위가 높다)에 padding·background가 덮이지 않도록 :not([multiple])로 같은 우선순위를 맞춘다. */
.app-layout select:not([multiple]) {
  padding-right: 40px; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%233a3a3a' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; background-size: 12px 8px;
}
.app-layout textarea { min-height: 96px; resize: vertical; }
.app-layout :is(input, select, textarea):disabled { color: var(--text-muted); background: var(--surface); cursor: not-allowed; }
.app-layout select:not([multiple]):disabled {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%236b6b6b' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; background-size: 12px 8px;
}
.app-layout :is(input, select, textarea)[aria-invalid="true"] { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary); }
.app-layout :is(input[type="checkbox"], input[type="radio"]) {
  flex: 0 0 auto; width: 18px; height: 18px; min-height: 0; margin: 0 8px 0 0;
  accent-color: var(--primary); vertical-align: middle; cursor: pointer;
}
.app-layout :is(input[type="checkbox"], input[type="radio"]):disabled { cursor: not-allowed; }
.app-layout fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.app-layout legend { margin: 0 0 12px; padding: 0; font-family: var(--font-brand); font-size: var(--app-md); font-weight: 600; }
.app-form { width: 100%; max-width: 800px; gap: 16px; margin-block: 16px; }
.app-form > fieldset { display: grid; gap: 16px; }
.app-form .app-form { margin-block: 0; }
.app-form :is(h2, h3) { margin-block: 0; }
.app-form p { margin-block: 0; }
.app-field { min-width: 0; gap: 6px; }
.app-field > label, .app-field__label { color: var(--text-soft); font-size: var(--app-sm); font-weight: 500; }
.app-field > :is(input[type="checkbox"], input[type="radio"]) { justify-self: start; align-self: center; }
.app-field > p:not(.app-field__error) { color: var(--text-muted); font-size: var(--app-xs); }
.app-field__error { color: var(--primary); font-size: var(--app-xs); }
.app-required { color: var(--primary); margin-left: 4px; }
.app-field:has(> [required]) > label::after {
  display: inline-block; content: ""; width: 7px; height: 7px; margin: 0 0 2px 5px;
  background: var(--primary);
  clip-path: polygon(40% 0, 60% 0, 60% 33%, 88% 17%, 100% 36%, 70% 50%, 100% 64%, 88% 83%, 60% 67%, 60% 100%, 40% 100%, 40% 67%, 12% 83%, 0 64%, 30% 50%, 0 36%, 12% 17%, 40% 33%);
}
.app-actions { align-items: center; gap: 8px; margin-block: 12px; }
.app-form > .app-actions, .app-form > .app-form-actions, .app-form > fieldset > .app-form-actions {
  margin: 4px 0 0; padding-top: 16px; border-top: 1px solid var(--line);
}
.app-form > .app-button, .app-form > fieldset > .app-button { justify-self: start; }
.app-form-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.app-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 20px; }
.app-layout .app-toolbar select { width: 220px; min-width: 140px; }
.app-toolbar > .app-field { display: flex; flex-wrap: wrap; align-items: center; width: auto; gap: 10px; }
.app-form--option { padding: 16px; border: 1px solid var(--line); border-radius: 6px; background: var(--warm); }
.app-check-list { display: grid; gap: 4px; margin-bottom: 12px !important; }
.app-check-list label { display: flex; align-items: center; min-height: 44px; padding: 8px 12px; border-radius: 4px; background: var(--surface); }
.app-check-list label:has(input:checked) { background: var(--primary-soft); }
.app-check-list--regions { grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 4px 24px; }
.app-check-list--regions label { padding: 8px 0; background: transparent; }
.app-check-list--regions label:has(input:checked) { color: var(--primary); background: transparent; }
.app-check-list--regions label > span { display: flex; align-items: center; }
.app-weekday-choices { display: flex; flex-wrap: wrap; gap: 10px; }
.app-weekday-choices label {
  display: inline-flex; align-items: center; min-height: 44px; padding: 8px 12px;
  border: 1px solid var(--line); border-radius: 5px; background: var(--page); cursor: pointer;
}
.app-weekday-choices label:has(input:checked) { border-color: var(--primary); background: var(--primary-soft); }
.app-weekday-choices label:has(input:disabled) { color: var(--text-muted); background: var(--surface); cursor: not-allowed; }
.app-state-panel {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px;
  margin-block: 24px 32px; padding: 16px; border: 1px solid var(--line); border-radius: 6px; background: var(--warm);
}
.app-state-panel > :is(h3, p, .app-actions) { margin: 0; }
.app-state-panel > h3 { font-size: var(--app-sm); }
.app-state-panel > .app-actions { margin-left: auto; }

.app-button {
  min-height: 40px; padding: 8px 16px; border-color: var(--app-control-line, #91877d);
  border-radius: 5px; font-size: var(--app-sm, 14px); font-weight: 500; line-height: 1.4;
}
.app-button:hover { background: var(--surface); border-color: var(--text-soft); }
.app-button--primary { border-color: var(--primary); background: var(--primary); color: var(--page); }
.app-button--primary:hover { background: #7c1527; border-color: #7c1527; }
.app-button--danger { color: var(--primary); border-color: var(--primary); }
.app-button--danger:hover { background: var(--primary-soft); border-color: var(--primary); }
.app-button:is(:disabled, [aria-disabled="true"]),
.app-layout .app-account-actions [aria-disabled="true"] {
  background: var(--surface); border-color: var(--line); color: var(--text-muted); opacity: 1; cursor: not-allowed;
}
.app-form[aria-busy="true"] .app-button--primary { opacity: 1; cursor: progress; }
.app-button[aria-pressed="true"] { color: var(--primary); border-color: var(--primary); background: var(--primary-soft); }

.app-file-picker { display: flex; position: relative; align-items: center; flex-wrap: wrap; gap: 8px 12px; min-width: 0; margin-block: 12px; }
.app-file-picker__label { cursor: pointer; flex-shrink: 0; }
.app-file-picker__input { position: absolute; width: 1px; height: 1px; padding: 0; border: 0; clip-path: inset(50%); overflow: hidden; white-space: nowrap; }
.app-file-picker:has(.app-file-picker__input:focus-visible) .app-file-picker__label { outline: 2px solid var(--primary); outline-offset: 3px; }
.app-file-picker:has(.app-file-picker__input:disabled) .app-file-picker__label { color: var(--text-muted); background: var(--surface); border-color: var(--line); cursor: not-allowed; }
.app-file-picker__name { min-width: 0; color: var(--text-muted); font-size: var(--app-xs, 13px); overflow-wrap: anywhere; }
.app-file-field { margin-block: 16px; }
.app-file-field > :is(p, .app-actions, .app-status) { flex-basis: 100%; }
.app-file-field > .app-actions { margin-block: 4px; }
.app-unit-choices { display: flex; flex-wrap: wrap; gap: 8px; }
.app-unit-choices label { display: flex; align-items: center; min-height: 44px; padding: 8px 16px; border: 1px solid var(--line); border-radius: 5px; }
.app-unit-choices label:has(input:checked) { border-color: var(--primary); background: var(--primary-soft); }
.app-image-section > img { max-width: 100%; height: auto; border-radius: 6px; border: 1px solid var(--line); }

.app-table-wrap { max-width: 100%; min-width: 0; margin-block: 16px; border-radius: 6px; }
.app-table { font-size: var(--app-sm, 14px); }
.app-table caption { padding: 12px 16px; color: var(--text-soft); font-weight: 600; }
.app-sr-only, .app-table caption.app-sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
  overflow: hidden; white-space: nowrap; clip-path: inset(50%);
}
.app-table :is(th, td) { height: 44px; padding: 10px 16px; line-height: 1.5; }
.app-table th { background: var(--surface); color: var(--text-soft); font-size: var(--app-xs, 13px); font-weight: 500; }
.app-table tbody tr:hover td { background: var(--warm); }
.app-table td a { color: var(--primary); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: transparent; }
.app-table td a:hover { text-decoration-color: currentColor; }
.app-table td p { margin-block: 4px 0; color: var(--text-muted); font-size: var(--app-xs, 13px); }
.app-table .app-number { text-align: right; }
/* 표의 열 머리(thead·scope=col)는 가운데 정렬(사용자 지시 2026-10-29, 관리자·점주·기사 공통). 행 머리(scope=row, 라벨|값 표)와 본문 칸 정렬은 그대로 둔다. */
.app-layout :is(.app-table, .app-promo-history__table) :is(thead th, th[scope="col"]) { text-align: center; }
.app-table .app-button { padding-inline: 10px; font-size: var(--app-xs, 13px); }
.app-table input:not([type="checkbox"], [type="radio"]) { min-width: 130px; }
.app-layout .app-table input.app-map-key { width: 220px; }
.app-table--details { table-layout: fixed; min-width: 0; }
.app-table--details th { width: 208px; }
.app-table--details :is(th, td) { white-space: normal; overflow-wrap: anywhere; vertical-align: top; }
.app-pagination { display: flex; justify-content: flex-end; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.app-pagination > span { order: -1; padding-inline: 8px; color: var(--text-muted); font-family: var(--font-num); font-size: var(--app-xs, 13px); font-variant-numeric: tabular-nums; }
.app-chip { display: inline-flex; align-items: center; width: fit-content; padding: 3px 9px; border-radius: 4px; font-size: var(--app-xs, 13px); line-height: 1.5; background: var(--surface); color: var(--text-soft); font-weight: 500; }
.app-chip--active { background: var(--primary-soft); color: var(--primary); }

/* 관리자 상품 목록 카드 보기(기본) — 2026-10-22 버드 지시 */
.app-view-toggle { display: inline-flex; }
.app-view-toggle .app-button { min-width: 64px; }
.app-view-toggle .app-button:first-child { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.app-view-toggle .app-button:last-child { margin-left: -1px; border-top-left-radius: 0; border-bottom-left-radius: 0; }
.app-view-toggle .app-button[aria-pressed="true"] { position: relative; z-index: 1; }
.app-product-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); gap: 20px; margin: 16px 0 0; padding: 0; list-style: none; }
.app-product-card { position: relative; display: flex; flex-direction: column; min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 8px; background: var(--page); transition: border-color .15s ease, box-shadow .15s ease; }
.app-product-card:hover { border-color: var(--app-control-line, #91877d); box-shadow: 0 4px 14px rgb(26 26 26 / 7%); }
.app-product-card:focus-within { border-color: var(--primary); outline: 2px solid var(--primary); outline-offset: 2px; }
.app-product-card__media { display: grid; place-items: center; aspect-ratio: 4 / 3; background: var(--surface); }
.app-product-card__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.app-product-card__empty { color: var(--text-muted); font-size: var(--app-xs, 13px); }
.app-product-card__body { display: grid; gap: 6px; padding: 14px 16px 16px; }
.app-product-card__meta { margin: 0; color: var(--text-muted); font-size: var(--app-xs, 13px); }
.app-layout .app-product-card__title { margin: 0; font-size: var(--app-md, 16px); line-height: 1.4; }
.app-product-card__title a { color: var(--text); font-weight: 600; text-decoration: none; }
.app-product-card__title a::after { content: ""; position: absolute; inset: 0; }
.app-product-card__title a:focus-visible { outline: none; }
.app-product-card:hover .app-product-card__title a { color: var(--primary); }
.app-product-card__spec { margin: 0; color: var(--text-soft); font-size: var(--app-sm, 14px); font-variant-numeric: tabular-nums; }
.app-product-card__chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
/* 관리자 배송 지역 지도: 시·도 실제 경계(단순화), 배송 지역 있는 곳만 연한 강조, 선택은 진한 강조. */
.app-region-map { display: grid; grid-template-columns: minmax(0, 460px) minmax(0, 1fr); gap: 24px 40px; align-items: start; }
.app-region-map__figure { margin: 0; }
.app-region-map__svg { display: block; width: 100%; height: auto; }
.app-region-map__shape { fill: #ece8e2; fill-rule: evenodd; stroke: #fff; stroke-width: 1; stroke-linejoin: round; cursor: pointer; transition: fill .15s ease; }
.app-region-map__shape:hover { fill: #ddd6cc; }
.app-region-map__shape.is-covered { fill: #e8bcc3; }
.app-region-map__shape.is-covered:hover { fill: #dc9fa9; }
.app-region-map__shape.is-selected, .app-region-map__shape.is-selected:hover { fill: var(--primary); }
.app-region-map__shape:focus { outline: none; }
.app-region-map__shape:focus-visible { stroke: var(--text); stroke-width: 2; }
.app-region-map__label { font-size: 11.5px; font-weight: 600; fill: #3a3a3a; text-anchor: middle; dominant-baseline: middle; cursor: pointer; user-select: none; paint-order: stroke; stroke: rgba(255, 255, 255, .75); stroke-width: 2.5px; stroke-linejoin: round; }
.app-region-map__label.is-selected { fill: #fff; stroke: var(--primary); stroke-width: 3px; }
.app-region-map__label--island { font-size: 8.5px; font-weight: 500; fill: var(--text-muted); pointer-events: none; }
.app-region-map__inset { fill: none; stroke: #cfc8be; stroke-width: .8; stroke-dasharray: 3 3; }
.app-region-map__source { margin-top: 8px; color: var(--text-muted); font-size: 12px; line-height: 1.5; }
.app-region-map__side { display: grid; gap: 16px; align-content: start; }
.app-region-map__legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 0; color: var(--text-soft); font-size: var(--app-sm, 14px); }
.app-region-map__swatch { display: inline-block; width: 14px; height: 14px; border-radius: 3px; background: #ece8e2; }
.app-region-map__swatch.is-covered { background: #e8bcc3; }
.app-region-map__swatch + .app-region-map__swatch, .app-region-map__legend .app-region-map__swatch:not(:first-child) { margin-left: 10px; }
.app-region-map__hint { margin: 0; color: var(--text-soft); font-size: var(--app-sm, 14px); line-height: 1.7; }
.app-region-map__detail { padding: 18px 20px; border: 1px solid var(--line); border-radius: 6px; background: #fff; }
.app-region-map__detail h3 { margin: 0 0 6px; font-size: var(--app-lg, 18px); }
.app-region-map__count { margin: 0 0 12px; color: var(--text-soft); font-size: var(--app-sm, 14px); }
.app-region-map__list { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 6px; margin: 0; padding: 0; list-style: none; }
.app-region-map__list li { display: flex; justify-content: space-between; gap: 12px; padding: 8px 12px; border-radius: 4px; background: var(--surface, #f5f3ef); font-size: var(--app-sm, 14px); }
.app-region-map__list li.is-current { background: var(--primary-soft, #f6e8ea); box-shadow: inset 3px 0 0 var(--primary); }
/* 구·군 지도: 긴 쪽이 486단위로 맞춰져 있다. 세로로 긴 시·도(대구·대전·경북 등)는 높이를 520px로 묶어 카드가 너무 길어지지 않게 한다. */
.app-region-map__svg--district { max-width: 520px; max-height: 520px; margin: 4px 0 12px; }
.app-region-map__label--district { font-size: 13px; }
.app-region-map__label--district.is-small { font-size: 10.5px; }
.app-region-map__status { margin: 0 0 12px; padding: 8px 12px; border-left: 3px solid var(--primary); background: var(--warm, #faf8f5); color: var(--text); font-size: var(--app-sm, 14px); }
.app-region-map__state { color: var(--text-muted); white-space: nowrap; }
.app-region-map__state.is-active { color: var(--primary); font-weight: 600; }
@media (max-width: 899px) { .app-region-map { grid-template-columns: 1fr; } .app-region-map__figure { max-width: 460px; } }
/* 휴대폰 폭: 구·군 지도를 카드 폭에 꽉 채우고 이름 글자를 키운다(지도 단위 기준이라 화면에서 약 11px).
   이름 위치는 이 크기(16/12)에서 겹치지 않게 계산했다(layout_labels.mjs). */
@media (max-width: 599px) {
  .app-region-map__detail { padding: 16px 12px; }
  .app-region-map__label--district { font-size: 16px; }
  .app-region-map__label--district.is-small { font-size: 12px; }
}
/* 주문 관리 상품별 합계 표(PT): 숫자 열은 한 줄로 두고 글자 열(구분·상품·세부·보관·생산일자·이력번호)만 단어 단위로 줄바꿈해 PC 폭 안에 들어오게 한다.
   글자 단위로는 끊지 않는다(좁은 화면은 다른 표처럼 가로 스크롤). */
.app-table--totals :is(th, td):nth-child(-n+5) { white-space: normal; word-break: keep-all; overflow-wrap: break-word; }
.app-table--totals tfoot th { white-space: nowrap; }
/* 이벤트 판매항목 카드의 업무 정보(생산일자·이력번호·재고·가격) */
.app-product-card__facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 12px; margin: 4px 0 0; }
.app-product-card__facts > div { min-width: 0; }
.app-product-card__facts dt { color: var(--text-muted); font-size: var(--app-xs, 13px); }
.app-product-card__facts dd { margin: 0; overflow-wrap: anywhere; color: var(--text); font-size: var(--app-sm, 14px); font-variant-numeric: tabular-nums; }
@media (max-width: 767px) {
  .app-product-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .app-product-card__body { padding: 10px 12px 12px; }
  /* 2열 카드 폭에서는 날짜·12자리 이력번호·가격이 반 칸에 들어가지 않아 한 칸씩 쌓는다. */
  .app-product-card__facts { grid-template-columns: minmax(0, 1fr); gap: 4px; }
}
.app-status { padding: 12px 16px; border: 1px solid var(--line); border-radius: 6px; font-size: var(--app-sm, 14px); }
.app-status p:first-child { margin-top: 0; }
.app-status p:last-child { margin-bottom: 0; }
.app-status--empty { padding-block: 24px; border-style: dashed; text-align: center; color: var(--text-muted); }
.app-status--error { border-color: var(--primary); border-left-width: 3px; }
.app-status--loading { color: var(--text-muted); }
.app-status__meta { overflow-wrap: anywhere; font-size: var(--app-xs, 13px); }
.app-dialog {
  position: fixed; inset: 0; z-index: 30; width: min(560px, calc(100vw - 32px));
  max-height: calc(100dvh - 48px); overflow-y: auto; margin: auto; padding: 24px;
  border: 1px solid var(--line); border-top: 3px solid var(--primary); border-radius: 10px;
  box-shadow: 0 16px 64px #0003; background: var(--page);
}
.app-dialog::backdrop { background: #1a161780; }
.app-dialog > h2 { font-family: var(--font-brand); }
.app-dialog .app-form { margin-bottom: 0; }
.app-secret { padding: 16px; border: 1px solid var(--line); background: var(--surface); border-radius: 5px; font-family: var(--font-num); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }

.app-home { padding: 28px; }
.app-home-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 24px; }
.app-home-link {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 88px; padding: 20px; border: 1px solid var(--line); border-radius: 6px;
  background: var(--warm); color: var(--text); font-family: var(--font-brand); font-size: var(--app-md); font-weight: 600;
}
.app-home-link::after { content: ""; flex: 0 0 auto; width: 8px; height: 8px; border-top: 2px solid var(--primary); border-right: 2px solid var(--primary); transform: rotate(45deg); }
.app-home-link:hover { border-color: var(--primary); color: var(--primary); background: var(--primary-soft); }
.app-layout--driver .app-layout__header { padding: 12px 20px; gap: 8px 24px; }
.app-layout--driver .app-layout__main { max-width: 640px; }
.app-layout--driver .app-layout__navigation { justify-content: flex-end; }
.app-layout--driver .app-home { border-top: 3px solid var(--primary); }
.app-layout--driver .app-button,
.app-layout--driver .app-layout__nav a,
.app-layout--driver .app-account-actions :is(a, button) { min-height: 44px; }
.app-reception { margin-bottom: 24px; padding: 20px; border: 1px solid var(--line); border-radius: 8px; background: var(--page); }
.app-reception > .app-actions { float: right; margin: 0 0 12px 16px; }
.app-reception > .app-status { margin-top: 0; }
.app-reception > p { color: var(--text-muted); font-size: var(--app-xs); margin-block: 4px; }
/* PV-08 F4: 배송 협의 안내의 대표전화. 문장 안 링크이며 세로 여백으로 누르는 영역만 넓힌다. */
.app-reception__phone { padding-block: 6px; color: var(--primary); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.app-reception-settings { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; clear: both; }
.app-reception-settings > .app-section { margin: 12px 0 0; padding: 16px; background: var(--warm); border: 0; }
.app-section.app-reception > .app-reception-settings > .app-section { margin-top: 0; }
.app-reception-settings > .app-section h2 { font-size: var(--app-md); margin-bottom: 8px; padding-bottom: 8px; }
.app-reception-settings p { font-size: var(--app-xs); margin-block: 4px; font-variant-numeric: tabular-nums; }
/* PV-11 F3 점주 기사 선택(버튼식 유지): 머리 오른쪽 다시 조회 → 베이지 패널 안 섹션 라벨·지역 알약 한 줄·흰 기사 칩 → 아래 오른쪽 확인.
   칩은 PV-10 고르기 칩 톤(테두리 자리 2px 투명, 선택 때 ink 2px)이고 진짜 radio가 칩 전체를 덮는다. 지역 강조는 바탕색만 바꾼다. */
.app-driver-picker { --ink-400: #8e8a85; --line-300: #d8d3cb; }
.app-driver-picker .app-section-heading > div { min-width: 0; }
/* 다시 조회·지역 알약은 모든 폭에서 터치 44px(PV-11 브라우저 검수 1920 40px 지적). */
.app-driver-picker .app-section-heading > .app-button { min-height: 44px; padding-inline: 20px; border-radius: 100px; }
.app-driver-picker__panel { display: grid; gap: 28px; min-width: 0; padding: 28px 32px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.app-driver-picker__group { display: grid; gap: 14px; min-width: 0; }
.app-layout .app-driver-picker :is(.app-driver-picker__label, .app-driver-choices > legend) {
  margin: 0; padding: 0; color: var(--text-muted); font-family: inherit; font-size: var(--app-md); font-weight: 500; line-height: 1.4;
}
.app-layout .app-driver-picker .app-driver-choices > legend { margin-bottom: 14px; }
.app-region-filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.app-region-filters .app-button { min-height: 44px; padding: 4px 16px; border-color: var(--line-300); border-radius: 100px; background: var(--page); color: var(--text-soft); font-size: var(--app-sm); }
.app-region-filters .app-button:hover { border-color: var(--ink-400); background: var(--page); }
.app-region-filters .app-button[aria-pressed="true"] { border-color: var(--primary); background: var(--primary-soft); color: var(--primary); font-weight: 700; }
.app-driver-choices { min-width: 0; }
.app-driver-choices__options { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr)); gap: 10px; }
.app-driver-choice {
  position: relative; display: grid; align-content: center; gap: 2px; min-width: 0; min-height: 64px; padding: 10px 20px;
  border: 2px solid transparent; border-radius: 10px; background: var(--page); cursor: pointer;
}
.app-layout .app-driver-choice > input[type="radio"] { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: inherit; }
.app-driver-choice__name { color: var(--text-soft); font-size: var(--app-md); font-weight: 500; line-height: 1.4; overflow-wrap: anywhere; }
.app-driver-choice__regions { color: var(--text-muted); font-size: var(--app-xs); line-height: 1.5; overflow-wrap: anywhere; }
.app-driver-choice:hover { border-color: var(--line-300); }
.app-driver-choice:has(input:checked) { border-color: var(--text); }
.app-driver-choice:has(input:checked) > .app-driver-choice__name { color: var(--text); font-weight: 700; }
.app-driver-choice--highlight { background: var(--primary-soft); }
.app-driver-choice--highlight > .app-driver-choice__regions { color: var(--primary); }
.app-driver-choice:has(input:focus-visible) { outline: 2px solid var(--primary); outline-offset: 3px; }
.app-driver-choice:has(input:disabled) { cursor: progress; }
.app-driver-picker__actions { justify-content: flex-end; margin: 20px 0 0; }
.app-driver-picker__actions > .app-button { min-width: 148px; min-height: 52px; padding: 8px 28px; border-radius: 100px; font-size: var(--app-md); }
.app-review-actions { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px; margin-block: 16px; padding-block: 12px; border-block: 1px solid var(--line); }
.app-review-actions > .app-actions,
.app-review-actions > div > .app-actions { margin: 0; }
.app-review-actions > :is(form, .app-status) { flex-basis: 100%; }
.app-layout--signup .app-layout__main { max-width: 800px; }
.app-layout--signup .app-section .app-section { margin-block: 24px; }

@media (min-width: 1024px) {
  .app-layout--admin .app-form .app-field:not(.app-file-field) {
    display: grid; grid-template-columns: 160px minmax(0, 1fr); align-items: start; gap: 6px 20px;
  }
  .app-layout--admin .app-form .app-field > :is(label, .app-field__label) { grid-column: 1; padding-top: 9px; }
  .app-layout--admin .app-form .app-field > :is(input, select, textarea) { grid-column: 2; grid-row: 1; }
  .app-layout--admin .app-form .app-field > :is(input[type="checkbox"], input[type="radio"]) { margin-top: 11px; align-self: start; }
  .app-layout--admin .app-form .app-field > :is(p, .app-status) { grid-column: 2; }
  .app-layout--admin .app-form input:is([type="time"], [type="date"]) { width: 220px; }
  .app-layout--admin .app-form > .app-button { margin-left: 180px; }
  .app-layout--admin .app-form > .app-form-actions,
  .app-layout--admin .app-form > .app-actions,
  .app-layout--admin .app-form > fieldset > .app-form-actions { padding-left: 180px; }
}
@media (max-width: 1200px) {
  .app-layout--member .app-layout__navigation { flex-wrap: wrap; }
}
@media (max-width: 1023px) {
  .app-layout--admin { padding-left: 0; background: var(--warm); }
  .app-layout--admin .app-layout__header {
    position: sticky; inset: 0 0 auto; width: 100%; max-height: 100dvh;
    flex-direction: row; flex-wrap: wrap; align-items: center; gap: 12px;
    padding: 12px 20px; border-right: 0; border-bottom: 1px solid var(--line);
  }
  .app-layout--admin .app-layout__brand { padding: 0; }
  .app-menu-toggle { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 12px; margin-left: auto; border: 1px solid var(--app-control-line); border-radius: 5px; font-size: var(--app-xs); }
  .app-menu-toggle__icon { width: 16px; height: 12px; border-block: 1px solid currentColor; position: relative; }
  .app-menu-toggle__icon::after { position: absolute; inset: 4px 0 auto; border-top: 1px solid currentColor; content: ""; }
  .app-layout--admin .app-layout__navigation { display: none; flex: 0 0 100%; padding-top: 12px; border-top: 1px solid var(--line); }
  .app-layout--admin .app-layout__navigation--open { display: flex; }
  .app-layout--admin .app-layout__nav { gap: 12px; }
  .app-layout--admin .app-layout__account { padding-top: 12px; }
  .app-layout__header { padding: 16px 24px; flex-wrap: wrap; }
  .app-layout--member .app-layout__navigation { flex-basis: 100%; align-items: flex-start; }
  .app-home-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .app-layout__header, .app-layout--admin .app-layout__header { padding-inline: 16px; }
  .app-layout__main, .app-layout--admin .app-layout__main { width: calc(100% - 32px); padding-block: 24px 40px; }
  .app-page-heading { margin-bottom: 20px; }
  .app-layout__main:has(.app-page-actions) > .app-page-heading { padding-right: 0; }
  .app-page-actions { position: static; margin: -4px 0 16px; }
  .app-section { padding: 20px 16px; margin-block: 16px; }
  .app-section > h2 { padding-bottom: 12px; margin-bottom: 16px; }
  .app-layout .app-toolbar select { width: 100%; }
  .app-toolbar > .app-field { display: grid; width: 100%; gap: 6px; }
  .app-state-panel { gap: 12px; }
  .app-state-panel > .app-actions { flex-basis: 100%; margin-left: 0; }
  .app-button, .app-layout__nav a, .app-account-actions :is(a, button) { min-height: 44px; }
  .app-layout :is(input:not([type="checkbox"], [type="radio"], [type="file"]), select, textarea) { min-height: 44px; font-size: var(--app-md); }
  .app-layout label:has(> input:is([type="checkbox"], [type="radio"])) { min-height: 44px; align-content: center; }
  .app-layout__navigation { flex-wrap: wrap; }
  .app-layout__nav { width: 100%; gap: 4px; }
  .app-layout--member .app-layout__nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .app-layout--member .app-layout__nav a { padding-inline: 10px; }
  .app-layout__account { width: 100%; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 4px; padding-top: 8px; border-top: 1px solid var(--line); }
  .app-account-id { flex-direction: column; gap: 0; max-width: 100%; }
  .app-account-actions { flex-shrink: 0; }
  .app-layout .app-account-actions :is(a, button) { min-height: 44px; padding-inline: 8px; }
  .app-layout--driver .app-layout__navigation { flex-basis: 100%; gap: 4px; }
  .app-layout--driver .app-layout__nav { width: auto; }
  .app-layout--driver .app-layout__account { width: auto; flex: 1; border: 0; padding: 0; }
  .app-layout--driver .app-account-id { display: none; }
  .app-table :is(th, td) { padding: 10px 12px; }
  .app-table--details th { width: 120px; }
  .app-table--details { font-size: var(--app-xs); }
  .app-pagination { gap: 6px; }
  .app-pagination > span { flex-basis: 100%; text-align: right; padding: 0 0 4px; }
  .app-pagination .app-button { flex: 0 1 auto; }
  .app-home-grid { grid-template-columns: 1fr; gap: 10px; margin-top: 20px; }
  .app-home-link { min-height: 64px; padding: 16px; }
  .app-reception { padding: 16px; }
  .app-reception > .app-actions { float: none; margin: 0 0 12px; }
  .app-reception-settings { grid-template-columns: 1fr; gap: 0; }
  .app-reception-settings > .app-section { padding: 12px; }
  .app-region-filters .app-button { flex: 0 1 auto; }
  .app-driver-picker__panel { gap: 24px; padding: 20px 16px; }
  .app-dialog { padding: 20px; }
}

/* DA 기사 담당지역 지도 선택기·담당 현황(contract-01 C4). 지도 도형 색은 기존 .app-region-map 규칙을 같이 쓴다. */
.app-area-picker { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 360px); gap: 24px 32px; align-items: start; margin-top: 12px; }
.app-area-picker__browse { display: grid; gap: 12px; min-width: 0; align-content: start; }
.app-area-picker__path { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; color: var(--text-soft); font-size: var(--app-sm); }
.app-area-picker__path [aria-current] { color: var(--text); font-weight: 600; }
.app-area-picker__crumb { min-height: 40px; padding: 4px 8px; border: 0; border-radius: 4px; background: transparent; color: var(--primary); font: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.app-area-picker__crumb:hover { background: var(--primary-soft); }
.app-area-picker__sep { color: var(--text-muted); }
.app-area-picker__hint, .app-area-picker__note { margin: 0; color: var(--text-soft); font-size: var(--app-sm); }
.app-area-picker__note { padding: 8px 12px; border-left: 3px solid var(--app-control-line); background: var(--warm); }
.app-area-picker__whole { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.app-area-picker__meta { color: var(--text-muted); font-size: var(--app-xs); font-weight: 400; }
.app-area-map { max-width: 460px; }
.app-area-map .app-region-map__shape.is-disabled { cursor: not-allowed; }
.app-area-picker__choices { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 6px; margin: 0; padding: 0; list-style: none; }
.app-area-picker__choice {
  display: flex; flex-direction: column; align-items: flex-start; justify-content: center; width: 100%; min-height: 40px; padding: 6px 10px;
  border: 1px solid var(--line); border-radius: 5px; background: var(--page); color: var(--text); font: inherit; font-size: var(--app-sm); text-align: left; cursor: pointer;
}
.app-area-picker__choice:hover { border-color: var(--text-soft); }
.app-area-picker__choice[aria-pressed="true"] { border-color: var(--primary); background: var(--primary-soft); color: var(--primary); font-weight: 600; }
.app-area-picker__choice:disabled { border-color: var(--line); background: var(--surface); color: var(--text-muted); cursor: not-allowed; }
.app-area-picker__choice .app-area-picker__meta { display: block; }
.app-area-picker__name { overflow-wrap: anywhere; }
.app-area-picker__selected { min-width: 0; padding: 16px; border: 1px solid var(--line); border-radius: 6px; background: var(--page); }
.app-area-picker__selected > h4 { margin: 0 0 4px; font-size: var(--app-md); }
.app-area-picker__count { margin: 0 0 12px; color: var(--text-soft); font-size: var(--app-sm); }
.app-area-picker__empty { margin: 0; color: var(--text-muted); font-size: var(--app-sm); }
.app-area-picker__picked { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.app-area-picker__picked li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 6px 6px 12px; border-radius: 4px; background: var(--surface); font-size: var(--app-sm); }
.app-area-picker__picked-text { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; min-width: 0; overflow-wrap: anywhere; }
.app-area-picker__picked-text .app-area-picker__meta { flex-basis: 100%; }
.app-area-picker__remove { flex-shrink: 0; padding-inline: 12px; }
.app-area-overview__intro { margin: -8px 0 16px; color: var(--text-muted); font-size: var(--app-xs); }
/* 기사 관리 상단 탭과 담당 현황 새 배치(사용자 지시 2026-10-29).
   위 [소개 | 색 안내] 한 줄 → 좌 전체 지도·우 상세 지도 같은 높이 카드(지도 가운데) → 고른 지역의 "지역 — 기사" 태그(글자 길이만큼, 왼쪽부터 줄바꿈). */
/* 입력 두세 개짜리 폼을 한 줄로(기사 등록, 사용자 지시 2026-10-29). 폭이 모자라면 줄바꿈하고, 767px 이하에서는 입력마다 한 줄씩 쌓는다. */
.app-form.app-form--inline { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; max-width: none; }
.app-layout .app-form.app-form--inline > .app-field:not(.app-file-field) { display: flex; align-items: center; gap: 10px; flex: 1 1 260px; max-width: 380px; white-space: nowrap; }
.app-form.app-form--inline > .app-field > input { flex: 1 1 auto; width: auto; min-width: 0; }
.app-layout .app-form.app-form--inline > .app-button { flex: none; margin-left: 0; }
@media (max-width: 767px) {
  .app-layout .app-form.app-form--inline > .app-field:not(.app-file-field) { display: grid; flex-basis: 100%; max-width: none; gap: 6px; }
}
/* 주문 검색(입력 다섯 + 검색 버튼)을 3열 2줄로(사용자 지시 2026-10-29). 라벨 열 폭을 같게 둬 오와 열을 맞추고, 검색 버튼은 입력 열에 맞춘다. 1199px 이하 2열, 767px 이하 1열(라벨은 왼쪽 유지). */
.app-layout .app-form.app-form--search { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: center; gap: 12px 28px; max-width: none; }
.app-layout .app-form.app-form--search > .app-field:not(.app-file-field) { display: grid; grid-template-columns: 80px minmax(0, 1fr); align-items: center; gap: 10px; white-space: nowrap; }
.app-layout .app-form.app-form--search > .app-field > :is(input, select) { grid-column: 2; grid-row: 1; width: 100%; }
.app-layout .app-form.app-form--search > .app-actions { margin: 0; padding: 0 0 0 90px; border-top: 0; }
.app-layout .app-form.app-form--search > .app-field__error { grid-column: 1 / -1; order: 1; }
@media (max-width: 1199px) { .app-layout .app-form.app-form--search { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px) {
  .app-layout .app-form.app-form--search { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .app-layout .app-form.app-form--search > .app-field:not(.app-file-field) { grid-template-columns: 76px minmax(0, 1fr); }
  .app-layout .app-form.app-form--search > .app-actions { padding-left: 86px; }
}
.app-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); }
.app-tabs__tab {
  min-height: 44px; margin-bottom: -1px; padding: 10px 20px; border: 0; border-bottom: 3px solid transparent; background: none;
  color: var(--text-soft); font: inherit; font-size: var(--app-md, 16px); font-weight: 600; cursor: pointer;
}
.app-tabs__tab:hover { color: var(--text); }
.app-tabs__tab[aria-selected="true"] { border-bottom-color: var(--primary); color: var(--primary); }
.app-tabs__tab:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; border-radius: 4px 4px 0 0; }
.app-tabs__panel[hidden] { display: none; }
.app-coverage { display: grid; gap: 16px; min-width: 0; }
.app-coverage__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 24px; }
.app-coverage__intro { margin: 0; color: var(--text-muted); font-size: var(--app-xs); }
.app-coverage__maps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: stretch; }
.app-coverage__card { display: grid; align-content: start; gap: 12px; min-width: 0; padding: 18px 20px; border: 1px solid var(--line); border-radius: 6px; background: #fff; }
.app-coverage__country { align-content: center; }
.app-coverage__card .app-area-map { width: 100%; max-width: 460px; margin-inline: auto; }
.app-coverage__detail-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; min-height: 40px; }
.app-layout .app-coverage__detail-head h3 { margin: 0; font-size: var(--app-lg, 18px); }
.app-coverage__all { min-height: 40px; padding: 6px 16px; }
.app-coverage__detail { grid-template-rows: auto 1fr; }
.app-coverage__detail .app-region-map__svg--district { margin: 0 auto; }
.app-coverage__detail > .app-area-map, .app-coverage__detail > .app-region-map__hint { align-self: center; }
.app-coverage__detail > .app-region-map__hint { text-align: center; }
.app-coverage__drivers { display: grid; gap: 10px; min-width: 0; }
.app-layout .app-coverage__drivers-title { margin: 0; font-size: var(--app-md); }
.app-coverage__drivers-title > span { color: var(--primary); }
.app-coverage__tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.app-coverage__tag {
  display: inline-flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; max-width: 100%; padding: 7px 12px;
  border: 1px solid var(--line); border-radius: 100px; background: var(--surface); color: var(--text-muted); font-size: var(--app-sm); overflow-wrap: anywhere;
}
.app-coverage__area { color: var(--text-soft); }
.app-coverage__names { color: var(--text); font-weight: 600; }
.app-coverage__tag .app-chip { font-size: var(--app-xs); }
.app-coverage__empty { margin: 0; color: var(--text-muted); font-size: var(--app-sm); }
@media (max-width: 899px) { .app-coverage__maps { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 767px) {
  .app-coverage__card { padding: 14px 12px; }
  .app-coverage__all { min-height: 44px; }
  .app-tabs__tab { flex: 1; padding-inline: 8px; }
}
.app-area-overview .app-area-overview__title { margin: 8px 0 0; font-size: var(--app-md); }
.app-area-overview__list { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.app-area-overview__list li { padding: 8px 12px; border-radius: 4px; background: var(--surface); font-size: var(--app-sm); overflow-wrap: anywhere; }
.app-area-overview__list li.is-current { background: var(--primary-soft); box-shadow: inset 3px 0 0 var(--primary); }
.app-table .app-area-overview__cell { min-width: 200px; white-space: normal; word-break: keep-all; overflow-wrap: break-word; } /* DA FW01: 휴대폰에서 지역 이름이 글자 중간에서 끊기지 않게 */
@media (max-width: 899px) { .app-area-picker { grid-template-columns: 1fr; } }
@media (max-width: 767px) {
  .app-area-picker__choices { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .app-area-picker__choice, .app-area-picker__crumb { min-height: 44px; }
}

/* 소독증명서 화면 현대화 (CD, 2026-10-23 버드 지시: 희성 테마 유지 + 현대 스타일). 연월 한 줄, 끌어다 놓기 파일 영역, 카드 목록. */
.app-cert-period { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.app-layout .app-cert-period select { width: auto; min-width: 132px; }
.app-cert-period__more { display: inline-flex; flex-wrap: wrap; gap: 4px 14px; margin-left: 4px; }
.app-link-button {
  min-height: 32px; padding: 0; border: 0; background: none; color: var(--text-muted); font: inherit; font-size: var(--app-xs, 13px);
  text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 4px; cursor: pointer;
}
.app-link-button:hover:not(:disabled) { color: var(--primary); text-decoration-color: currentColor; }
.app-link-button:disabled { opacity: .45; cursor: not-allowed; }
.app-cert-file { display: grid; gap: 8px; min-width: 0; max-width: 560px; }
.app-file-drop {
  position: relative; display: flex; align-items: center; gap: 16px; min-height: 92px; padding: 16px 20px;
  border: 1.5px dashed #c9bfb4; border-radius: 10px; background: var(--warm); transition: border-color .15s, background-color .15s;
}
.app-file-drop:hover, .app-file-drop.is-dragging { border-color: var(--primary); background: var(--primary-soft); }
.app-file-drop:focus-within { outline: 2px solid var(--primary); outline-offset: 2px; }
.app-file-drop.has-file { border-style: solid; border-color: var(--line); background: var(--page); }
.app-file-drop.has-file:hover { border-color: var(--app-control-line); }
.app-file-drop.is-invalid { border-color: var(--primary); }
.app-file-drop__input { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.app-file-drop__input:disabled { cursor: not-allowed; }
.app-file-drop__text { display: grid; gap: 3px; min-width: 0; }
.app-file-drop__text strong { color: var(--text); font-size: var(--app-sm, 14px); font-weight: 600; overflow-wrap: anywhere; }
.app-file-drop__text span { color: var(--text-muted); font-size: var(--app-xs, 13px); }
.app-cert-file__clear { justify-self: start; }
.app-cert-file__help { margin: 0; color: var(--text-muted); font-size: var(--app-xs, 13px); }
.app-file-current {
  display: flex; align-items: center; gap: 10px; margin: 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px;
  background: var(--warm); color: var(--text); font-size: var(--app-sm, 14px);
}
.app-file-current__label { color: var(--text-muted); font-size: var(--app-xs, 13px); white-space: nowrap; }
.app-file-current__name { min-width: 0; overflow-wrap: anywhere; font-weight: 500; }
/* 문서 모양(오른쪽 위 접힌 귀퉁이) PDF 표시. 글자는 장식이고 읽히지 않는다(aria-hidden). */
.app-pdf-icon {
  position: relative; flex: none; display: grid; place-items: end center; width: 38px; height: 46px; padding-bottom: 7px;
  border-radius: 5px; background: var(--primary); color: #fff; font-size: 10.5px; font-weight: 700; letter-spacing: .04em; line-height: 1;
  clip-path: polygon(0 0, 68% 0, 100% 26%, 100% 100%, 0 100%);
}
.app-pdf-icon::before { content: ""; position: absolute; top: 0; right: 0; width: 32%; height: 26%; border-bottom-left-radius: 4px; background: rgb(255 255 255 / 38%); }
.app-pdf-icon--small { width: 24px; height: 30px; padding-bottom: 5px; font-size: 7.5px; }
.app-cert-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); gap: 16px; margin: 4px 0 0; padding: 0; list-style: none; }
.app-cert-card {
  display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 18px; border: 1px solid var(--line); border-radius: 10px;
  background: var(--page); transition: border-color .15s, box-shadow .15s;
}
.app-cert-card:hover { border-color: var(--app-control-line); box-shadow: 0 4px 14px rgb(26 26 26 / 7%); }
.app-cert-card__head { display: flex; align-items: center; gap: 12px; }
.app-layout .app-cert-card__title { margin: 0; color: var(--text); font-size: 18px; font-weight: 700; line-height: 1.3; }
.app-cert-card__file { margin: 0; color: var(--text-soft); font-size: var(--app-sm, 14px); overflow-wrap: anywhere; }
.app-cert-card__meta { display: flex; flex-wrap: wrap; gap: 2px 12px; margin: 0; color: var(--text-muted); font-size: var(--app-xs, 13px); font-variant-numeric: tabular-nums; }
.app-cert-card__actions { display: flex; gap: 8px; margin-top: auto; padding-top: 12px; border-top: 1px solid var(--line); }
.app-cert-card__actions .app-button { flex: 1; }
@media (max-width: 599px) {
  .app-cert-cards { grid-template-columns: 1fr; gap: 10px; }
  .app-cert-card { padding: 14px; }
  .app-file-drop { min-height: 84px; padding: 14px; gap: 12px; }
  .app-cert-period__more { margin-left: 0; }
}
.app-cert-card.is-editing { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary); }
.app-cert-card__state { margin-left: auto; }
/* 소독증명서 등록·수정 창(CD 2차, 2026-10-23 버드 지시: 목록만 보이고 등록·수정은 창 안에서). 창 안에서는 이름표를 입력 위에 둔다. */
.app-cert-dialog__status { display: grid; gap: 8px; margin-bottom: 16px; }
.app-cert-dialog__status .app-status { margin: 0; }
@media (min-width: 1024px) {
  .app-layout--admin .app-form.app-cert-form .app-field:not(.app-file-field) { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .app-layout--admin .app-form.app-cert-form .app-field > :is(label, .app-field__label) { padding-top: 0; }
  .app-layout--admin .app-form.app-cert-form > .app-actions { padding-left: 0; }
}

/* PM 상품 관리: 목록만 보이고 등록·수정은 큰 창(contract-01 C4, 2026-10-23 사용자 지시 "창이 떠서 거기서 하는방식으로 바꾸자. 깔끔하게").
   창은 제목·안내와 아래 단추 줄을 고정하고 본문만 세로로 스크롤한다. 넓은 화면은 2단, 767px 이하는 1단. 창 안 이름표는 입력 위에 둔다. */
.app-product-card__actions { display: flex; gap: 8px; margin-top: auto; padding: 0 16px 16px; }
.app-product-card__actions .app-button { flex: 1; }
/* 관리자 상품 카드 압축(2026-10-29): 분류와 판매·활성 칩을 한 줄에, 그 아래 상품명. 점주 카드(.app-shop-card)는 그대로다. */
.app-product-card__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 8px; min-width: 0; }
/* 점주 상품 선택 카드(.app-product-cards--shop)도 같은 압축을 쓴다(2026-10-29). */
.app-product-cards--admin .app-product-card__body, .app-product-cards--shop .app-product-card__body { gap: 6px; padding: 12px 14px 10px; }
.app-product-cards--admin .app-product-card__chips, .app-product-cards--shop .app-product-card__chips { margin-top: 0; gap: 4px; }
.app-product-cards--admin .app-product-card__actions, .app-product-cards--shop .app-product-card__actions { padding: 0 14px 14px; }
.app-product-notice { margin: 0 0 16px; }
.app-dialog.app-product-dialog { width: min(960px, calc(100vw - 32px)); padding: 0; overflow: hidden; }
.app-dialog.app-product-dialog[open] { display: flex; flex-direction: column; }
.app-product-dialog > h2 { flex: none; margin: 0; padding: 20px 24px 14px; }
.app-product-dialog__status { flex: none; display: grid; gap: 8px; max-height: 30vh; overflow-y: auto; padding: 16px 24px 0; }
.app-product-dialog__status:focus { outline: none; }
.app-product-dialog__status .app-status { margin: 0; }
.app-product-dialog__actions { flex: none; margin: 0; padding: 16px 24px 20px; }
.app-dialog .app-form.app-product-form { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; max-width: none; margin: 0; gap: 0; }
.app-product-form__body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 16px 24px 24px; }
.app-product-form__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: start; gap: 28px 32px; }
.app-product-form__col { display: grid; align-content: start; gap: 28px; min-width: 0; }
.app-dialog .app-form.app-product-form > .app-product-form__actions { flex: none; margin: 0; padding: 14px 24px 18px; border-top: 1px solid var(--line); background: var(--page); }
.app-product-zone { display: grid; gap: 14px; min-width: 0; }
.app-layout .app-product-zone > h3 { margin: 0; padding-bottom: 8px; border-bottom: 1px solid var(--line); color: var(--text); font-size: var(--app-md, 16px); }
.app-product-form__pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; }
.app-product-check { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 0; min-height: 40px; }
.app-product-check > label { color: var(--text); font-size: var(--app-sm); font-weight: 500; cursor: pointer; }
.app-product-check > .app-chip { margin-left: 12px; }
.app-option-rows { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.app-option-row {
  display: grid; grid-template-columns: minmax(0, 1fr) 96px 88px; align-items: start; gap: 8px 12px;
  padding: 12px; border: 1px solid var(--line); border-radius: 6px; background: var(--warm);
}
.app-option-row.is-inactive { background: var(--surface); }
.app-option-row.is-inactive .app-option-row__name input { color: var(--text-muted); }
.app-option-row__end { display: grid; gap: 4px; padding-top: calc(var(--app-sm) * 1.5 + 6px); }
.app-option-row__active { display: inline-flex; align-items: center; min-height: 40px; color: var(--text); font-size: var(--app-sm); cursor: pointer; }
.app-option-row__remove { width: 100%; }
.app-option-empty { margin: 0; padding: 14px 16px; border: 1px dashed var(--line); border-radius: 6px; color: var(--text-muted); font-size: var(--app-sm); text-align: center; }
.app-option-add { justify-self: start; }
.app-product-choice { display: grid; gap: 8px; }
.app-layout .app-product-choice > legend { margin: 0 0 8px; color: var(--text-soft); font-family: inherit; font-size: var(--app-sm); font-weight: 500; }
.app-product-choice__options { display: flex; flex-wrap: wrap; gap: 8px; }
.app-product-choice__options label {
  display: inline-flex; align-items: center; min-height: 40px; padding: 8px 14px; border: 1px solid var(--line); border-radius: 5px;
  background: var(--page); color: var(--text); font-size: var(--app-sm); cursor: pointer;
}
.app-product-choice__options label:has(input:checked) { border-color: var(--primary); background: var(--primary-soft); }
.app-product-zone__note { margin: 0; padding: 8px 12px; border-left: 3px solid var(--app-control-line); background: var(--warm); color: var(--text-soft); font-size: var(--app-xs); }
.app-product-photo { display: flex; flex-wrap: wrap; gap: 12px; }
.app-product-photo__item { display: grid; gap: 6px; width: 160px; margin: 0; }
.app-product-photo__item > :is(img, .app-product-photo__empty) {
  display: grid; place-items: center; width: 160px; height: 120px; object-fit: cover;
  border: 1px solid var(--line); border-radius: 6px; background: var(--surface);
}
.app-product-photo__empty { color: var(--text-muted); font-size: var(--app-xs); }
.app-product-photo__item figcaption { color: var(--text-muted); font-size: var(--app-xs); }
.app-product-photo__item.is-replaced > img { opacity: .55; }
.app-product-photo__item.is-new > img { border-color: var(--primary); }
.app-product-zone .app-file-field { display: grid; gap: 6px; margin: 0; }
.app-product-photo__help { margin: 0; color: var(--text-muted); font-size: var(--app-xs); }
.app-product-zone > .app-actions { margin: 0; }
@media (min-width: 1024px) {
  .app-layout--admin .app-form.app-product-form .app-field:not(.app-file-field) { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .app-layout--admin .app-form.app-product-form .app-field > :is(label, .app-field__label, input, select, textarea, p, .app-status) { grid-column: auto; grid-row: auto; }
  .app-layout--admin .app-form.app-product-form .app-field > :is(label, .app-field__label) { padding-top: 0; }
}
@media (max-width: 767px) {
  .app-product-form__grid { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .app-product-dialog > h2 { padding: 16px 16px 12px; }
  .app-product-dialog__status { padding: 12px 16px 0; }
  .app-product-form__body { padding: 12px 16px 20px; }
  .app-dialog .app-form.app-product-form > .app-product-form__actions, .app-product-dialog__actions { padding: 12px 16px 16px; }
  .app-product-form__actions .app-button { flex: 1; }
}
@media (max-width: 599px) {
  .app-option-row { grid-template-columns: minmax(0, 1fr) 84px; }
  .app-option-row__end { grid-column: 1 / -1; padding-top: 0; }
  .app-option-row__remove { width: auto; justify-self: start; }
  .app-product-photo__item, .app-product-photo__item > :is(img, .app-product-photo__empty) { width: 132px; }
  .app-product-photo__item > :is(img, .app-product-photo__empty) { height: 99px; }
}

/* PM2 점주 상품 화면 + 관리자 옵션 그룹(contract-01 C5·C6, 2026-10-23 사용자 지시 "관리자모드의 상품관리 스타일로 변경하자 … 네이버 스마트스토어처럼").
   점주 카드는 관리자 .app-product-card 모양을 그대로 쓰고, 창은 .app-product-dialog 틀(제목·아래 단추 줄 고정, 본문만 스크롤)에
   왼쪽 사진·설명, 오른쪽 고르기·선택한 상품을 둔다. 767px 이하는 한 열. 고르기·수량 단추는 높이 44px 이상. */
.app-shop__guide { margin: 16px 0 0; color: var(--text-soft); font-size: var(--app-sm); }
.app-shop-card.is-stopped .app-product-card__media { opacity: .6; }
.app-shop-card__groups { margin: 0; color: var(--text-soft); font-size: var(--app-xs); overflow-wrap: anywhere; }
.app-dialog.app-shop-dialog { width: min(1200px, calc(100vw - 32px)); }
.app-shop-dialog__body {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; gap: 24px 32px; padding: 16px 24px 24px;
}
.app-shop-dialog__state .app-status { margin: 0; }
.app-shop-dialog__media { position: sticky; top: 0; display: grid; gap: 12px; min-width: 0; }
.app-shop-dialog__photo { display: grid; place-items: center; aspect-ratio: 4 / 3; overflow: hidden; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.app-shop-dialog__photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.app-shop-dialog__description { margin: 0; color: var(--text-soft); font-size: var(--app-md); line-height: 1.56; white-space: pre-line; overflow-wrap: anywhere; }
.app-shop-dialog__choices { display: grid; align-content: start; gap: 20px; min-width: 0; }
.app-shop-dialog__choices.is-state { grid-column: 1 / -1; }
.app-layout .app-shop-dialog__spec {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0;
  color: var(--text-soft); font-size: var(--app-lg); font-weight: 500; font-variant-numeric: tabular-nums;
}
.app-shop-dialog__tag { padding: 4px 12px; border-radius: 10px; background: var(--primary-soft); color: var(--primary); font-size: var(--app-md); font-weight: 500; }
.app-shop-dialog__picks { display: grid; gap: 32px; }

/* PV-10 선택 패널(일반·이벤트 창 공통, Figma 186:3975 스타일만): 바탕 패널·섹션 라벨·칩·입력·선택 카드·합계·알약 단추.
   시안에만 있는 두 색은 이 패널 범위 지역 변수다. 글자색 대비를 위해 도움말은 ink/500(--text-muted)을 쓴다. */
.app-shop-panel {
  --ink-400: #8e8a85;
  --line-300: #d8d3cb;
  display: grid; align-content: start; gap: 32px; min-width: 0;
  padding: 40px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface);
}
.app-shop-panel p { margin: 0; }
.app-shop-panel .app-status { margin: 0; background: var(--page); }
.app-shop-panel .app-status:not(.app-status--error, .app-status--loading, [role]) { padding: 0; border: 0; background: transparent; color: var(--text-muted); font-size: var(--app-body); line-height: 1.5; }
.app-shop-panel .app-status--error { display: grid; gap: 6px; justify-items: start; }
.app-layout .app-shop-choice > legend { margin: 0 0 14px; padding: 0; color: var(--text-muted); font-family: inherit; font-size: var(--app-lg); font-weight: 500; line-height: 1.4; }
.app-shop-choice__options { display: flex; flex-wrap: wrap; gap: 10px; }
/* 칩: 테두리 자리는 늘 2px로 두고(투명) 선택 때 색만 바꿔 글자가 밀리지 않는다. */
.app-shop-choice__option {
  position: relative; display: inline-flex; align-items: center; justify-content: center; max-width: 100%; min-height: 50px; padding: 4px 26px;
  border: 2px solid transparent; border-radius: 10px; background: var(--page); color: var(--text-soft);
  font-size: var(--app-lg); font-weight: 400; line-height: 1.3; text-align: center; overflow-wrap: anywhere; cursor: pointer;
}
/* 진짜 radio가 칩 전체를 덮는다(누르는 곳 = 칩, 키보드 화살표 이동은 radio 그대로). */
.app-layout .app-shop-choice__option > input[type="radio"] { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: inherit; }
.app-shop-choice__option:hover { border-color: var(--line-300); }
.app-shop-choice__option:has(input:checked) { border-color: var(--text); color: var(--text); font-weight: 700; }
.app-shop-choice__option:has(input:focus-visible) { outline: 2px solid var(--primary); outline-offset: 3px; }
.app-shop-choice__option:has(input:disabled) { border-color: var(--line-300); border-style: dashed; background: transparent; color: var(--ink-400); cursor: not-allowed; }
.app-shop-choice__option:has(input:checked:disabled) { border-style: solid; border-color: var(--ink-400); }
.app-shop-help { margin: 10px 0 0; color: var(--text-muted); font-size: var(--app-body); line-height: 1.5; }
.app-shop-panel .app-shop-help { margin-top: 10px; }
.app-shop-help.is-error { color: var(--primary); }
/* 보조 단추(선택 추가): 전체 폭, 앞에 + 기호(읽기 이름에서 뺀다). */
.app-layout .app-shop-add {
  display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 54px; margin-top: 24px;
  border: 1px solid var(--text); border-radius: 10px; background: var(--page); color: var(--text); font-size: 17px; font-weight: 700;
}
.app-layout .app-shop-add:hover:not(:disabled) { background: var(--surface); }
.app-layout .app-shop-add:disabled { border-color: var(--line-300); background: var(--page); color: var(--ink-400); }
.app-shop-add__icon { font-size: 20px; font-weight: 400; line-height: 1; }
.app-shop-lines { display: grid; gap: 14px; min-width: 0; padding-top: 28px; border-top: 1px solid var(--line-300); }
.app-layout .app-shop-lines > h3 { margin: 0; color: var(--text-muted); font-family: inherit; font-size: var(--app-lg); font-weight: 500; line-height: 1.4; letter-spacing: 0; }
.app-shop-lines__count { margin-left: 4px; color: var(--primary); font-weight: 700; font-variant-numeric: tabular-nums; }
.app-shop-lines__list { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.app-shop-panel .app-shop-lines__empty { padding: 18px 16px; border: 1px dashed var(--line-300); border-radius: 10px; color: var(--text-muted); font-size: var(--app-body); text-align: center; }
/* 선택 항목 카드: 위 제목·분류·설명, 오른쪽 위 ×(누르는 곳 44px), 아래 수량과 값. */
.app-shop-line { position: relative; display: grid; gap: 16px; min-width: 0; padding: 20px 20px 20px 24px; border: 1px solid var(--line); border-radius: 10px; background: var(--page); }
.app-shop-line.is-invalid { border-color: var(--primary); }
.app-shop-line__head { display: grid; gap: 4px; min-width: 0; padding-right: 32px; }
.app-shop-line__title { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; color: var(--text); font-size: var(--app-lg); line-height: 1.4; overflow-wrap: anywhere; }
.app-shop-line__title > strong { font-weight: 700; }
.app-shop-line__date { white-space: nowrap; }
.app-shop-line__tag { color: var(--primary); font-size: var(--app-sm); font-weight: 500; }
.app-shop-line__label { color: var(--text-muted); font-size: var(--app-body); line-height: 1.5; overflow-wrap: anywhere; }
.app-shop-line__remove {
  position: absolute; top: 10px; right: 10px; display: grid; place-items: center; width: 44px; height: 44px; padding: 0;
  border: 0; border-radius: 8px; background: transparent; color: var(--ink-400); cursor: pointer;
}
.app-shop-line__remove:hover:not(:disabled) { background: var(--surface); color: var(--text); }
.app-shop-line__remove:disabled { color: var(--line-300); cursor: not-allowed; }
.app-shop-line__controls { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; min-width: 0; }
.app-shop-line__value { display: grid; justify-items: end; margin-left: auto; color: var(--text); font-size: 20px; font-weight: 700; line-height: 1.3; font-variant-numeric: tabular-nums; text-align: right; }
.app-shop-line__weight { color: var(--text-muted); font-size: var(--app-sm); font-weight: 500; }
.app-shop-line > :is(.app-field__error, .app-shop-help) { margin: -6px 0 0; }
/* 수량 스테퍼: 1px line/300 한 덩어리, 칸은 터치 44px. */
.app-shop-qty { display: inline-flex; align-items: stretch; border: 1px solid var(--line-300); border-radius: 8px; background: var(--page); }
.app-shop-qty__step {
  min-width: 44px; min-height: 44px; padding: 0; border: 0; border-radius: 7px; background: transparent;
  color: var(--text-soft); font-size: var(--app-md); font-weight: 500; line-height: 1; cursor: pointer;
}
.app-shop-qty__step:hover:not(:disabled) { background: var(--surface); }
.app-shop-qty__step:disabled { color: var(--line-300); cursor: not-allowed; }
.app-layout .app-shop-qty .app-shop-qty__input {
  width: 56px; min-height: 44px; padding: 0 2px; border: 0; border-radius: 0; background: transparent;
  color: var(--text); font-size: var(--app-md); font-weight: 700; text-align: center; appearance: textfield;
}
.app-shop-qty__input::-webkit-inner-spin-button, .app-shop-qty__input::-webkit-outer-spin-button { margin: 0; appearance: none; }
.app-layout .app-shop-qty .app-shop-qty__input:disabled { color: var(--text-muted); }
.app-layout .app-shop-qty .app-shop-qty__input[aria-invalid="true"] { box-shadow: inset 0 0 0 2px var(--primary); }
/* 합계 줄과 행동 단추(알약 60px, 같은 폭). 주 행동만 #961a2f. */
.app-shop-panel__summary { display: grid; gap: 16px; min-width: 0; }
.app-shop-panel .app-shop-total { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; margin-bottom: 24px; }
.app-shop-total__label { color: var(--text-soft); font-size: var(--app-lg); font-weight: 500; }
.app-shop-total__sub { margin-left: 4px; color: var(--text-muted); font-size: var(--app-md); font-weight: 400; }
.app-shop-total__value { margin-left: auto; color: var(--primary); font-size: var(--app-xl); font-weight: 400; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.app-shop-total__value strong { font-size: 30px; font-weight: 700; }
.app-dialog .app-actions.app-shop-panel__actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 0; padding: 0; border: 0; }
.app-shop-panel__actions > .app-button {
  flex: 1 1 0; min-width: 0; min-height: 60px; padding: 8px 24px; border-color: var(--page); border-radius: 100px;
  background: var(--page); color: var(--text); font-size: var(--app-lg); font-weight: 500;
}
.app-shop-panel__actions > .app-button:hover:not(:disabled) { border-color: var(--ink-400); }
.app-shop-panel__actions > .app-button--primary { border-color: var(--primary); background: var(--primary); color: var(--page); }
.app-shop-panel__actions > .app-button--primary:hover:not(:disabled) { border-color: #7c1527; background: #7c1527; }
.app-shop-panel__actions > .app-button:disabled { border-color: var(--line); background: var(--line); color: var(--text-muted); }
/* 관리자 창의 옵션 그룹 묶음: 그룹명·정렬·사용(또는 그룹 빼기) 아래 옵션 줄과 [옵션 추가]. */
.app-option-groups { display: grid; gap: 12px; }
.app-layout .app-option-group { display: grid; gap: 12px; padding: 14px; border: 1px solid var(--line); border-radius: 8px; background: var(--page); }
.app-layout .app-option-group > legend { float: left; width: 100%; margin: 0; padding: 0; color: var(--text); font-family: inherit; font-size: var(--app-sm); font-weight: 600; }
.app-layout .app-option-group.is-inactive { background: var(--surface); }
.app-option-group__head { display: grid; grid-template-columns: minmax(0, 1fr) 96px 88px; align-items: start; gap: 8px 12px; }
.app-option-group__end { display: grid; gap: 4px; padding-top: calc(var(--app-sm) * 1.5 + 6px); }
.app-option-group > :is(.app-option-add, .app-field__error) { justify-self: start; margin: 0; }
@media (max-width: 1023px) {
  .app-shop-panel { padding: 32px; }
}
@media (max-width: 767px) {
  .app-shop-dialog__body { grid-template-columns: minmax(0, 1fr); gap: 20px; padding: 12px 16px 20px; }
  .app-shop-dialog__media { position: static; }
  .app-shop-dialog__photo { aspect-ratio: 16 / 9; }
}
/* 모바일(≤ 640): 패널 20, 칩 글자 16, 행동 단추는 세로로 쌓는다. */
@media (max-width: 640px) {
  .app-shop-panel { gap: 28px; padding: 20px; }
  .app-shop-choice__option { padding-inline: 18px; font-size: var(--app-md); }
  .app-shop-line { padding: 16px 16px 16px 18px; }
  .app-shop-line__remove { top: 6px; right: 6px; }
  .app-shop-panel__actions > .app-button { flex-basis: 100%; }
  .app-shop-total__value strong { font-size: 26px; }
}

/* PV-11 점주 장바구니·최종 확인(2026-10-28 사용자 지시 "전체를 싹바꾸라는게 아니라 … 틀어지는거와 오와열이 안맞는거"):
   표 대신 PV-10 선택 카드 톤의 카드 목록. 넓은 화면은 사진 | 이름·요약 | 수량 묶음·값 | × 한 줄이라 카드끼리 열이 맞고,
   1023px 이하는 수량·값을 아래 줄로, 640px 이하는 ×를 오른쪽 위로 옮긴다. 합계와 전체 검증·최종 확인은 한 행동 영역(오른쪽 정렬, 휴대폰은 세로). */
.app-cart-list, .app-cart-summary { --ink-400: #8e8a85; --line-300: #d8d3cb; }
.app-cart-list { display: grid; gap: 14px; min-width: 0; }
.app-layout .app-cart-list > h3 { margin: 0; color: var(--text-muted); font-family: inherit; font-size: var(--app-md); font-weight: 500; line-height: 1.4; letter-spacing: 0; }
.app-cart-list__items { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.app-cart-item {
  position: relative; display: grid; grid-template-columns: 80px minmax(0, 1fr) auto; align-items: center; gap: 12px 24px;
  min-width: 0; padding: 20px 24px; border: 1px solid var(--line); border-radius: 10px; background: var(--page);
}
.app-cart-item:has(> .app-cart-item__remove) { grid-template-columns: 80px minmax(0, 1fr) auto 44px; padding-right: 12px; }
.app-cart-item.is-invalid { border-color: var(--primary); }
.app-cart-item__photo { display: grid; place-items: center; width: 80px; height: 80px; overflow: hidden; border-radius: 8px; background: var(--surface); text-align: center; }
.app-cart-item__photo > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.app-cart-item__photo > .app-product-card__empty { padding: 4px; line-height: 1.3; }
.app-cart-item__head { display: grid; gap: 4px; min-width: 0; }
.app-layout .app-cart-item__head > p { margin: 0; }
.app-cart-item__title { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; color: var(--text); font-size: var(--app-lg); line-height: 1.4; }
.app-cart-item__title > strong { font-weight: 700; }
.app-cart-item__tag { color: var(--primary); font-size: var(--app-sm); font-weight: 500; }
.app-cart-item__label { color: var(--text-muted); font-size: var(--app-body); line-height: 1.5; }
.app-cart-item__nowrap { white-space: nowrap; }
.app-cart-item__controls { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 12px 24px; min-width: 0; }
/* 수량 입력과 [수량 저장]은 한 덩어리(1px line/300)이고 각 칸은 터치 44px. */
.app-cart-item__qty { display: inline-flex; align-items: stretch; border: 1px solid var(--line-300); border-radius: 8px; background: var(--page); }
.app-layout .app-cart-item__qty > input {
  width: 72px; min-height: 44px; padding: 0 6px; border: 0; border-radius: 7px 0 0 7px; background: transparent;
  color: var(--text); font-size: var(--app-md); font-weight: 700; text-align: center;
}
.app-layout .app-cart-item__qty > input:disabled { background: var(--surface); color: var(--text-muted); }
.app-cart-item__qty > .app-button {
  min-height: 44px; padding: 0 16px; border: 0; border-left: 1px solid var(--line-300); border-radius: 0 7px 7px 0;
  background: var(--surface); color: var(--text); font-size: var(--app-sm);
}
.app-cart-item__qty > .app-button:hover:not(:disabled) { background: var(--line); }
.app-cart-item__qty > .app-button:disabled { color: var(--ink-400); }
.app-layout .app-cart-item__count { margin: 0; color: var(--text-soft); font-size: var(--app-md); font-weight: 500; font-variant-numeric: tabular-nums; }
.app-layout .app-cart-item__value { display: grid; justify-items: end; min-width: 140px; margin: 0; color: var(--text); line-height: 1.4; font-variant-numeric: tabular-nums; text-align: right; }
.app-cart-item__value > strong { font-size: 20px; font-weight: 700; line-height: 1.3; }
.app-cart-item__weight { color: var(--text-muted); font-size: var(--app-sm); font-weight: 500; }
.app-cart-item__remove {
  display: grid; place-items: center; width: 44px; height: 44px; padding: 0;
  border: 0; border-radius: 8px; background: transparent; color: var(--ink-400); cursor: pointer;
}
.app-cart-item__remove:hover:not(:disabled) { background: var(--surface); color: var(--text); }
.app-cart-item__remove:disabled { color: var(--line-300); cursor: not-allowed; }
.app-cart-item__notes { display: grid; grid-column: 2 / -1; gap: 6px; min-width: 0; }
.app-layout .app-cart-item__notes > p { margin: 0; }
.app-cart-item__notes > p:not(.app-status) { color: var(--primary); font-size: var(--app-sm); font-weight: 500; }
/* 행동 영역(장바구니)·요약 패널(최종 확인): 업무 구역과 같은 흰 패널. 합계 줄은 PV-10 합계 톤, 단추는 알약(보조 흰색·주 #961a2f). */
.app-cart-summary {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 16px 32px;
  min-width: 0; margin-block: 20px; padding: 24px; border: 1px solid var(--line); border-radius: 8px; background: var(--page);
}
.app-layout .app-cart-summary > .app-cart-summary__driver { margin: 0 auto 0 0; color: var(--text-soft); font-size: var(--app-md); font-weight: 500; }
.app-cart-summary__driver > span { color: var(--text); font-weight: 700; }
.app-cart-totals { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: flex-end; gap: 4px 24px; min-width: 0; }
.app-layout .app-cart-totals > p { margin: 0; }
.app-cart-totals__weight { color: var(--text-muted); font-size: var(--app-md); }
.app-cart-totals__weight > output { color: var(--text-soft); font-weight: 600; font-variant-numeric: tabular-nums; }
.app-cart-totals__amount { color: var(--text-soft); font-size: var(--app-lg); font-weight: 500; }
.app-cart-totals__amount > output { margin-left: 8px; color: var(--primary); font-size: 26px; font-weight: 700; font-variant-numeric: tabular-nums; }
.app-cart-totals__note { color: var(--text-muted); font-size: var(--app-body); }
.app-actions.app-cart-actions { justify-content: flex-end; gap: 12px; margin-block: 20px 0; }
.app-cart-summary > .app-actions.app-cart-actions { margin: 0; }
.app-cart-actions > .app-button { min-width: 148px; min-height: 52px; padding: 8px 28px; border-radius: 100px; font-size: var(--app-md); }
.app-cart-actions > .app-button:not(.app-button--primary) { border-color: var(--app-control-line); background: var(--page); color: var(--text); }
.app-cart-actions > .app-button:not(.app-button--primary):hover:not(:disabled) { background: var(--surface); }
.app-cart-actions > .app-button:disabled { border-color: var(--line); background: var(--line); color: var(--text-muted); }
.app-cart-back { display: inline-flex; align-items: center; min-height: 44px; margin-top: 12px; color: var(--text-soft); text-decoration: underline; text-underline-offset: 3px; }
.app-cart-consent {
  display: flex; align-items: center; min-height: 44px; margin-block: 16px 0; padding: 12px 16px;
  border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--text); font-size: var(--app-body); font-weight: 500; cursor: pointer;
}
@media (max-width: 1023px) {
  .app-cart-item, .app-cart-item:has(> .app-cart-item__remove) { grid-template-columns: 80px minmax(0, 1fr); align-items: start; padding-right: 24px; }
  .app-cart-item:has(> .app-cart-item__remove) > .app-cart-item__head { padding-right: 36px; }
  .app-cart-item__controls { grid-column: 2 / -1; justify-content: space-between; }
  .app-cart-item__remove { position: absolute; top: 10px; right: 10px; }
}
@media (max-width: 640px) {
  .app-cart-item, .app-cart-item:has(> .app-cart-item__remove) { grid-template-columns: 72px minmax(0, 1fr); gap: 14px; padding: 16px; }
  .app-cart-item__photo { width: 72px; height: 72px; }
  .app-cart-item__photo > .app-product-card__empty { padding: 2px; font-size: 12px; }
  .app-cart-item__controls, .app-cart-item__notes { grid-column: 1 / -1; }
  .app-cart-item__controls { column-gap: 12px; }
  .app-layout .app-cart-item__value { min-width: 0; margin-left: auto; }
  .app-cart-item__remove { top: 6px; right: 6px; }
  .app-cart-summary { flex-direction: column; align-items: stretch; gap: 16px; padding: 20px 16px; }
  .app-cart-totals { justify-content: space-between; }
  .app-actions.app-cart-actions { flex-direction: column; align-items: stretch; }
  .app-driver-picker__actions > .app-button { flex: 1 1 100%; }
}

/* PV-12 F1 장바구니 간소화(2026-10-28 사용자 지시): 상단은 접수 시간 한 줄, 배송 협의·대표전화는 최종 확인 위 작은 한 줄.
   행동 영역은 [안내 한 줄] → [합계 · 최종 확인] 순이고 넓은 화면은 오른쪽 정렬, 휴대폰은 세로로 쌓는다. */
.app-layout .app-cart-reception { margin: 0 0 20px; padding: 14px 20px; border-color: var(--line); border-radius: 8px; background: var(--page); color: var(--text); font-size: var(--app-md); font-weight: 600; }
.app-cart-summary__note { flex: 1 0 100%; min-width: 0; color: var(--text-muted); font-size: var(--app-sm); text-align: right; }
.app-layout .app-cart-summary__note > p { margin: 0; }
/* 문장 안 대표전화도 터치 44px(PV-12 F5). 세로 가운데로 맞춰 한 줄 높이만 늘린다. */
.app-cart-summary__note .app-reception__phone { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding-block: 0; vertical-align: middle; }

/* PV-12 F2 점주 주문 상세: 제목 왼쪽 ← 복귀, 라벨 | 값 두 열 정보 표(dl), PV-11 장바구니 카드 톤의 읽기 전용 항목 목록. */
.app-order-heading { display: flex; align-items: center; gap: 6px; margin: 0 0 20px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.app-layout .app-order-heading > h2 { margin: 0; padding: 0; border: 0; }
.app-layout .app-order-back {
  display: inline-grid; place-items: center; flex: 0 0 auto; width: 44px; height: 44px; margin-left: -8px;
  border-radius: 100px; color: var(--text); font-size: 22px; line-height: 1; text-decoration: none;
}
.app-layout .app-order-back:hover { background: var(--surface); color: var(--primary); }
.app-order-info {
  display: grid; grid-template-columns: minmax(96px, 168px) minmax(0, 1fr); margin: 0 0 28px;
  overflow: hidden; border: 1px solid var(--line); border-radius: 8px; background: var(--page);
}
.app-order-info > :is(dt, dd) { margin: 0; padding: 12px 16px; border-top: 1px solid var(--line); line-height: 1.5; }
.app-order-info > :is(dt, dd):nth-child(-n + 2) { border-top: 0; }
.app-order-info > dt { background: var(--surface); color: var(--text-soft); font-size: var(--app-xs); font-weight: 500; }
.app-order-info > dd { min-width: 0; color: var(--text); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.app-order-item.is-voided .app-cart-item__title > strong { color: var(--text-muted); text-decoration: line-through; text-decoration-thickness: 1px; }
.app-order-item.is-voided .app-cart-item__value > strong { color: var(--text-muted); }
.app-order-summary { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: flex-end; gap: 4px 24px; margin-top: 20px; }
.app-layout .app-order-summary > p { margin: 0; color: var(--text-muted); font-size: var(--app-md); }
.app-layout .app-order-summary > .app-order-summary__total { color: var(--text-soft); font-size: var(--app-lg); font-weight: 500; }
.app-order-summary__total > output { margin-left: 8px; color: var(--primary); font-size: 24px; font-weight: 700; font-variant-numeric: tabular-nums; }
.app-actions.app-order-actions { justify-content: flex-end; margin-top: 20px; }
.app-order-actions > .app-button { min-width: 120px; min-height: 44px; padding: 8px 24px; border-color: var(--primary); border-radius: 100px; color: var(--primary); }
.app-order-actions > .app-button:hover { background: var(--primary-soft); border-color: var(--primary); }
@media (max-width: 640px) {
  .app-cart-summary__note { text-align: left; }
  .app-order-info { grid-template-columns: minmax(88px, 34%) minmax(0, 1fr); }
  .app-order-info > :is(dt, dd) { padding: 10px 12px; }
  .app-order-summary { justify-content: space-between; }
  .app-order-actions > .app-button { flex: 1 1 100%; }
}

/* PV-12 F3 주문내역 행의 다시 담기(상세 화면에서 옮김): 보조 알약 단추, 모든 폭에서 터치 44px. */
.app-order-row-actions { text-align: right; white-space: nowrap; }
.app-layout .app-order-readd { min-height: 44px; padding: 8px 18px; border-radius: 100px; background: var(--page); color: var(--text); }
.app-layout .app-order-readd:hover { background: var(--surface); }

/* PV-12 D1 주문내역 목록 390 가로 넘침: 감싸개를 기준 상자로 두어 sr-only 머리글(position: absolute)이 표 밖 문서 폭을 늘리지 않게 한다(모든 폭).
   640px 이하는 같은 table을 PV-11 카드 톤의 세로 카드로 쌓는다. 열 머리글은 화면에서만 숨기고 칸마다 data-label 라벨(읽기 중복 없게 대체 텍스트 "")을 붙인다.
   카드 머리 줄은 주문번호 | 다시 담기, 그 아래는 라벨 | 값 줄. 이벤트 합계가 없는 빈 칸은 칸은 남기고(열 대응 유지) 높이만 0으로 접는다. */
.app-order-list { position: relative; }
@media (max-width: 640px) {
  .app-order-list { overflow: visible; border: 0; border-radius: 0; background: none; }
  .app-order-list > .app-table, .app-order-list caption, .app-order-list tbody { display: block; }
  .app-order-list caption { padding: 0 0 10px; }
  .app-order-list thead { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; white-space: nowrap; clip-path: inset(50%); }
  .app-order-list tbody { display: grid; gap: 10px; }
  .app-order-list tbody tr {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 12px;
    min-width: 0; padding: 8px 16px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--page);
  }
  .app-order-list tbody td { grid-column: 1 / -1; min-width: 0; height: auto; padding: 4px 0; border: 0; white-space: normal; overflow-wrap: break-word; }
  .app-order-list tbody tr:hover td { background: none; }
  .app-order-list td:first-child { grid-column: 1; }
  .app-order-list td:first-child > a { display: inline-flex; align-items: center; min-height: 44px; font-size: var(--app-md); }
  .app-order-list .app-order-row-actions { grid-area: 1 / 2; }
  .app-order-list td[data-label] { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: baseline; gap: 12px; text-align: right; }
  .app-order-list td[data-label]::before { color: var(--text-muted); font-size: var(--app-xs); text-align: left; content: attr(data-label) / ""; }
  .app-order-list td[data-label]:nth-child(2) { margin-top: 4px; padding-top: 12px; border-top: 1px solid var(--line); }
  .app-order-list td[data-label]:empty { padding: 0; }
  .app-order-list td[data-label]:empty::before { content: none; }
}

/* PV-12 F4 플로팅 장바구니(읽기 전용 미리보기): 1280px 이상은 본문 오른쪽 열을 따라 내려오는 베이지 패널,
   1279px 이하는 우측 하단 알약 버튼 → 베이지 시트(휴대폰은 아래에서 올라옴). 본문은 패널 폭만큼 오른쪽을 비우고
   (넓은 화면은 main을 그만큼 넓혀 본문 1200px 유지), 버튼 아래 여백을 두어 겹치지 않는다. 항목 카드는 흰색, 목록만 세로 스크롤. */
.app-layout { --floating-cart-w: 300px; --floating-cart-gap: 24px; }
.app-layout__main:has(> .app-floating-cart-rail) {
  width: min(calc(1200px + var(--floating-cart-w) + var(--floating-cart-gap)), calc(100% - 64px));
  padding-right: calc(var(--floating-cart-w) + var(--floating-cart-gap));
}
.app-layout__main:has(> .app-floating-cart-toggle) { padding-bottom: 112px; }
.app-floating-cart-rail { position: absolute; top: 32px; right: 0; bottom: 64px; width: var(--floating-cart-w); }
.app-floating-cart, .app-floating-cart-sheet {
  flex-direction: column; gap: 14px; min-width: 0;
  border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--text);
}
/* 높이는 첫 화면(열 시작 위치 --floating-cart-start, FloatingCart가 잼)부터 아래 24px까지로 제한한다. 그래야 처음에도,
   sticky로 붙은 뒤 문서 끝(열 아래 64px)에서도 제목·목록·장바구니로 가기가 모두 뷰포트 안에 남는다. 목록만 줄어 스크롤한다. */
.app-floating-cart {
  position: sticky; top: 24px; display: flex; padding: 20px;
  max-height: min(100%, calc(100vh - var(--floating-cart-start, 24px) - 24px));
}
.app-floating-cart-sheet {
  position: fixed; inset: auto 16px 16px auto; z-index: 30; width: min(420px, calc(100% - 32px)); max-width: none;
  max-height: min(640px, calc(100dvh - 32px)); margin: 0; padding: 20px; overflow: hidden; box-shadow: 0 16px 64px #0003;
}
.app-floating-cart-sheet[open] { display: flex; }
.app-floating-cart-sheet::backdrop { background: #1a161766; }
.app-floating-cart__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.app-layout .app-floating-cart__title { display: flex; align-items: center; gap: 8px; margin: 0; font-size: var(--app-lg); }
.app-floating-cart__count {
  display: inline-grid; place-items: center; min-width: 26px; height: 26px; padding: 0 8px; border-radius: 100px;
  background: var(--primary); color: var(--page); font-family: var(--font-num); font-size: var(--app-xs); font-weight: 700; line-height: 1;
}
.app-floating-cart__list {
  display: grid; align-content: start; gap: 8px; flex: 1 1 auto; min-height: 0; margin: 0; padding: 0;
  overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; list-style: none;
}
.app-floating-cart__item {
  display: grid; grid-template-columns: 56px minmax(0, 1fr); align-items: center; gap: 12px; min-width: 0;
  padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--page);
}
.app-floating-cart__photo { display: grid; place-items: center; width: 56px; height: 56px; overflow: hidden; border-radius: 6px; background: var(--surface); text-align: center; }
.app-floating-cart__photo > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.app-floating-cart__photo > .app-product-card__empty { padding: 2px; font-size: 11px; line-height: 1.25; word-break: keep-all; text-wrap: balance; }
.app-floating-cart__body { display: grid; gap: 2px; min-width: 0; }
.app-layout .app-floating-cart__body > p { margin: 0; line-height: 1.4; }
.app-floating-cart__name { color: var(--text); font-size: var(--app-body); font-weight: 700; }
.app-floating-cart__meta { color: var(--text-muted); font-size: var(--app-xs); }
.app-floating-cart__qty { color: var(--text-soft); font-size: var(--app-xs); font-weight: 500; font-variant-numeric: tabular-nums; }
.app-floating-cart__go {
  display: flex; flex: none; align-items: center; justify-content: center; min-height: 48px; padding: 8px 20px;
  border-radius: 100px; background: var(--primary); color: var(--page); font-size: var(--app-md); font-weight: 600;
}
.app-floating-cart__go:hover { background: #7c1527; }
.app-floating-cart__close {
  min-width: 44px; min-height: 44px; padding: 8px 16px; border: 1px solid var(--app-control-line); border-radius: 100px;
  background: var(--page); color: var(--text); font-size: var(--app-sm); font-weight: 500; cursor: pointer;
}
.app-floating-cart__close:hover { background: var(--line); }
.app-floating-cart-toggle {
  position: fixed; right: 16px; bottom: 16px; z-index: 25; display: inline-flex; align-items: center; gap: 8px;
  min-height: 52px; padding: 8px 14px 8px 22px; border: 0; border-radius: 100px; background: var(--primary); color: var(--page);
  box-shadow: 0 8px 24px #1a161733; font-size: var(--app-md); font-weight: 700; cursor: pointer;
}
.app-floating-cart-toggle:hover { background: #7c1527; }
.app-floating-cart-toggle > .app-floating-cart__count { background: var(--page); color: var(--primary); }
@media (max-width: 640px) {
  .app-floating-cart-sheet {
    inset: auto 0 0; width: 100%; max-height: 85dvh; padding: 20px 16px calc(16px + env(safe-area-inset-bottom));
    border-width: 1px 0 0; border-radius: 16px 16px 0 0;
  }
}
@media (max-width: 599px) {
  .app-option-group__head { grid-template-columns: minmax(0, 1fr) 84px; }
  .app-option-group__end { grid-column: 1 / -1; padding-top: 0; }
}

/* PV-13 관리자 홈 대시보드(2026-10-29 사용자 지시): 흰 구역 안 PV-10~12 톤 베이지 패널·흰 카드. 막대는 span(CSS)이며
   일반 = primary, 이벤트 = gold. 카드·패널 묶음은 폭에 맞춰 열 수가 바뀌고(넓은 화면 여러 열, 휴대폰 1열),
   14일 막대는 1280px 미만에서 7열 두 줄, 640px 이하는 두 막대 모두 가로 막대 줄로 바꿔 날짜 링크가 44px 아래로 줄지 않게 한다. */
.app-dashboard { --line-300: #d8d3cb; }
.app-dashboard__head {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px;
  margin: 0 0 20px; padding-bottom: 14px; border-bottom: 1px solid var(--line);
}
.app-layout .app-dashboard__head > h2 { margin: 0; font-size: var(--app-lg); }
.app-layout .app-dashboard__head > p { margin: 0; color: var(--text-muted); font-size: var(--app-xs); font-variant-numeric: tabular-nums; }
.app-dashboard .app-status--error .app-button { min-height: 44px; }
.app-dashboard__body { display: grid; gap: 16px; min-width: 0; }
.app-dashboard-grid { display: grid; gap: 16px; min-width: 0; }
.app-dashboard-grid--pair { grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); }
.app-dashboard-grid--cards { grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 12px; }
.app-dashboard-panel {
  display: grid; align-content: start; gap: 14px; min-width: 0; padding: 20px 24px 24px;
  border: 1px solid var(--line); border-radius: 10px; background: var(--surface);
}
.app-dashboard-panel__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 12px; min-width: 0; }
.app-layout .app-dashboard-panel__head > h3 { margin: 0; font-size: var(--app-md); }
.app-layout .app-dashboard-panel__head > p { margin: 0; color: var(--text-muted); font-size: var(--app-xs); }
.app-layout .app-dashboard-panel > .app-status { margin: 0; }
.app-layout .app-dashboard-panel > .app-dashboard-note {
  margin: 0; padding: 10px 14px; border: 1px dashed var(--line-300); border-radius: 8px;
  background: var(--page); color: var(--text-soft); font-size: var(--app-sm); font-variant-numeric: tabular-nums;
}
/* 카드: 제목(작게) → 건수(크게)·kg → 세부 → 전월 대비(구분선 아래). */
.app-dashboard-card {
  display: grid; align-content: start; gap: 6px; min-width: 0; padding: 18px 20px;
  border: 1px solid var(--line); border-radius: 8px; background: var(--page);
}
.app-layout .app-dashboard-card > h4 { margin: 0; color: var(--text-muted); font-family: inherit; font-size: var(--app-sm); font-weight: 500; letter-spacing: 0; }
.app-layout .app-dashboard-card > p { margin: 0; }
.app-dashboard-card__value {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px;
  color: var(--text-soft); font-size: var(--app-md); font-weight: 500; font-variant-numeric: tabular-nums;
}
.app-dashboard-card__value > strong { color: var(--text); font-size: 26px; font-weight: 700; line-height: 1.3; }
.app-dashboard-card__detail { color: var(--text-muted); font-size: var(--app-sm); font-variant-numeric: tabular-nums; }
/* 값 묶음(한돈 X kg 등)은 숫자와 단위가 갈라지지 않게 묶음 사이에서만 줄바꿈한다. */
:is(.app-dashboard-card__detail, .app-dashboard-stock__values) > span { white-space: nowrap; }
.app-dashboard-change { color: var(--text-soft); font-size: var(--app-xs); font-weight: 500; font-variant-numeric: tabular-nums; }
.app-layout .app-dashboard-card > .app-dashboard-card__detail + .app-dashboard-change { margin-top: 4px; padding-top: 10px; border-top: 1px solid var(--line); }
/* 막대 범례(읽기 이름은 각 날짜·월 이름에 있어 장식으로 둔다). */
.app-layout .app-dashboard-legend { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 0; color: var(--text-muted); font-size: var(--app-xs); }
.app-dashboard-legend__item { display: inline-flex; align-items: center; gap: 6px; }
.app-dashboard-legend__item::before { content: ""; width: 10px; height: 10px; border-radius: 2px; background: var(--primary); }
.app-dashboard-legend__item--event::before { background: var(--gold); }
/* 막대 차트: 날짜(링크)·월 칸마다 일반·이벤트 막대 한 쌍. 높이는 --bar(%)이며 0은 높이 0으로 칸·이름만 남는다. */
.app-dashboard-chart { --chart-h: 140px; display: grid; gap: 6px; min-width: 0; margin: 0; padding: 0; list-style: none; }
.app-dashboard-chart--daily { grid-template-columns: repeat(14, minmax(0, 1fr)); }
.app-dashboard-chart--monthly { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 4px; }
.app-dashboard-chart > li { min-width: 0; }
.app-dashboard-chart__item {
  display: grid; grid-template-rows: auto auto; gap: 6px; min-width: 0; height: 100%;
  padding: 8px 2px 6px; border-radius: 6px; color: var(--text-muted);
}
a.app-dashboard-chart__item:hover { background: var(--page); }
a.app-dashboard-chart__item:hover > .app-dashboard-chart__label { color: var(--primary); }
.app-dashboard-chart__item.is-today > .app-dashboard-chart__label { color: var(--primary); font-weight: 700; }
.app-dashboard-bars {
  display: flex; align-items: flex-end; justify-content: center; gap: 3px; min-width: 0;
  height: var(--chart-h); border-bottom: 1px solid var(--line-300);
}
.app-dashboard-bar { flex: 0 1 14px; min-width: 0; height: var(--bar, 0%); border-radius: 3px 3px 0 0; background: var(--primary); }
.app-dashboard-bar--event { background: var(--gold); }
.app-dashboard-chart__label {
  overflow: hidden; font-size: var(--app-xs); font-variant-numeric: tabular-nums; line-height: 1.3;
  text-align: center; white-space: nowrap;
}
/* 처리 대기·기사별: 흰 줄 링크(이름 | 값). 이벤트 잔여: 흰 카드 링크(이름·소진 임박 → 분류·부위·생산일자 → 잔여 비율 → 잔여·주문 kg). */
.app-dashboard-list { display: grid; gap: 8px; min-width: 0; margin: 0; padding: 0; list-style: none; }
/* 이벤트 잔여 물량·기사별 오늘 배정: 항목이 많아도 패널이 아래로 길어지지 않게 높이를 묶고 목록 안에서 스크롤한다(사용자 지시 2026-10-29).
   음수 여백과 같은 크기의 안쪽 여백은 링크 초점 테두리가 스크롤 상자에 잘리지 않게 한다. */
.app-dashboard-list--scroll {
  max-height: 360px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin;
  margin: -4px; padding: 4px;
}
.app-dashboard-link {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 12px; min-height: 52px;
  padding: 10px 16px; border: 1px solid var(--line); border-radius: 8px; background: var(--page); color: var(--text); font-size: var(--app-body);
}
.app-dashboard-link > strong { font-variant-numeric: tabular-nums; }
.app-dashboard-link:hover, .app-dashboard-stock:hover { border-color: var(--primary); color: var(--primary); }
.app-dashboard-stock {
  display: grid; gap: 6px; min-width: 0; padding: 14px 16px;
  border: 1px solid var(--line); border-radius: 8px; background: var(--page); color: var(--text);
}
.app-dashboard-stock.is-low { border-color: var(--primary); }
.app-dashboard-stock__head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: var(--app-body); }
.app-dashboard-badge { padding: 2px 8px; border-radius: 100px; background: var(--primary-soft); color: var(--primary); font-size: var(--app-xs); font-weight: 700; }
.app-dashboard-stock__meta { color: var(--text-muted); font-size: var(--app-xs); font-variant-numeric: tabular-nums; }
.app-dashboard-meter { display: block; height: 6px; overflow: hidden; border-radius: 100px; background: var(--line); }
.app-dashboard-meter > span { display: block; width: var(--bar, 0%); height: 100%; border-radius: inherit; background: var(--gold); }
.app-dashboard-stock.is-low .app-dashboard-meter > span { background: var(--primary); }
.app-dashboard-stock__values { color: var(--text-soft); font-size: var(--app-sm); font-variant-numeric: tabular-nums; }
/* 접수 상태: 흰 상자(상태 점·문구, 마감/다음 접수 시각) 아래 설정 보기 알약. */
.app-dashboard-reception { display: grid; gap: 4px; min-width: 0; padding: 14px 16px; border: 1px solid var(--line); border-radius: 8px; background: var(--page); }
.app-layout .app-dashboard-reception > p { margin: 0; color: var(--text-soft); font-size: var(--app-sm); font-variant-numeric: tabular-nums; }
.app-layout .app-dashboard-reception > .app-dashboard-reception__state { display: flex; align-items: center; gap: 8px; color: var(--text); font-size: var(--app-lg); font-weight: 700; }
.app-dashboard-reception__state::before { content: ""; flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--text-muted); }
.app-dashboard-reception.is-open > .app-dashboard-reception__state::before { background: var(--primary); }
.app-dashboard-action {
  display: inline-flex; align-items: center; justify-content: center; justify-self: start; min-height: 44px; padding: 8px 20px;
  border: 1px solid var(--app-control-line); border-radius: 100px; background: var(--page); color: var(--text); font-size: var(--app-sm); font-weight: 500;
}
.app-dashboard-action:hover { border-color: var(--primary); color: var(--primary); }
@media (max-width: 1279px) {
  .app-dashboard-chart--daily { grid-template-columns: repeat(7, minmax(0, 1fr)); row-gap: 12px; }
}
@media (max-width: 767px) {
  .app-dashboard-panel { padding: 16px; }
  .app-dashboard-card { padding: 14px 16px; }
  .app-dashboard-card__value > strong { font-size: 22px; }
}
@media (max-width: 640px) {
  .app-dashboard-chart--daily, .app-dashboard-chart--monthly { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .app-dashboard-chart__item { grid-template-columns: 52px minmax(0, 1fr); grid-template-rows: none; align-items: center; gap: 12px; padding: 4px 8px; }
  a.app-dashboard-chart__item { min-height: 44px; }
  .app-dashboard-chart__label { grid-area: 1 / 1; text-align: left; }
  .app-dashboard-bars {
    grid-area: 1 / 2; flex-direction: column; align-items: flex-start; justify-content: center;
    height: auto; border-bottom: 0; border-left: 1px solid var(--line-300);
  }
  .app-dashboard-bar { flex: none; width: var(--bar, 0%); height: 8px; border-radius: 0 3px 3px 0; }
}

/* PV-14 오늘 제품별 주문(2026-10-29 사용자 지시): 오늘 주문 아래 베이지 패널, 한돈·한우 줄마다 흰 순위 카드 가로 목록.
   가로 넘침은 목록(scroller) 안에서만 스크롤로 받고 패널·페이지는 넘치지 않는다. 카드 폭은 목록 폭의 72% 이하라
   휴대폰에서도 다음 카드 일부가 오른쪽 경계에 잘려 보여 더 있음을 알린다. 이전·다음은 44px 원형 버튼이다. */
.app-dashboard-products { grid-template-columns: minmax(0, 1fr); }
.app-dashboard-products > .app-dashboard-panel__head { align-items: center; }
.app-dashboard-products__row { display: grid; gap: 10px; min-width: 0; }
.app-dashboard-products__row + .app-dashboard-products__row { padding-top: 14px; border-top: 1px solid var(--line); }
.app-dashboard-products__row-head { display: flex; align-items: center; justify-content: space-between; gap: 8px 12px; min-width: 0; min-height: 44px; }
.app-layout .app-dashboard-products__row-head > h4 { margin: 0; color: var(--text-soft); font-size: var(--app-body); font-variant-numeric: tabular-nums; }
.app-layout .app-dashboard-products__row > .app-status { margin: 0; }
.app-dashboard-products__nav { display: flex; flex: none; gap: 8px; }
.app-dashboard-products__button {
  display: inline-grid; place-items: center; width: 44px; height: 44px; padding: 0;
  border: 1px solid var(--app-control-line); border-radius: 50%; background: var(--page); color: var(--text); cursor: pointer;
}
.app-dashboard-products__button::before { content: ""; width: 9px; height: 9px; border: solid currentColor; border-width: 0 2px 2px 0; }
.app-dashboard-products__button--previous::before { margin-left: 4px; transform: rotate(135deg); }
.app-dashboard-products__button--next::before { margin-right: 4px; transform: rotate(-45deg); }
.app-dashboard-products__button:hover:not(:disabled) { border-color: var(--primary); color: var(--primary); }
.app-dashboard-products__button:disabled { border-color: var(--line); background: var(--surface); color: var(--text-muted); cursor: not-allowed; }
.app-dashboard-products__scroller {
  display: flex; gap: 12px; min-width: 0; padding-bottom: 6px; overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scrollbar-width: thin; scrollbar-color: var(--line-300) transparent;
}
@media (prefers-reduced-motion: no-preference) {
  .app-dashboard-products__scroller { scroll-behavior: smooth; }
}
/* 카드: 순위·이벤트 → 상품명 → 총 kg(크게) → 박스·주문 건수. 숨김 "위"가 카드 밖으로 넘치지 않게 카드를 기준 상자로 둔다. */
.app-dashboard-product { position: relative; flex: 0 0 min(216px, 72%); gap: 4px; padding: 14px 16px; scroll-snap-align: start; }
.app-dashboard-product__top { display: flex; align-items: center; gap: 8px; min-height: 26px; }
.app-dashboard-product__rank {
  display: inline-grid; place-items: center; min-width: 26px; height: 26px; padding: 0 6px; border-radius: 100px;
  background: var(--primary-soft); color: var(--primary); font-family: var(--font-num); font-size: var(--app-xs); font-weight: 700; font-variant-numeric: tabular-nums;
}
.app-dashboard-badge--event { background: var(--page); color: var(--text-soft); box-shadow: inset 0 0 0 1px var(--gold); }
.app-layout .app-dashboard-product > .app-dashboard-product__name { margin-top: 4px; color: var(--text); font-size: var(--app-body); font-weight: 600; line-height: 1.45; }
.app-layout .app-dashboard-product > .app-dashboard-product__kg {
  color: var(--text); font-family: var(--font-num); font-size: 22px; font-weight: 700; line-height: 1.3; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.app-dashboard-product__meta { color: var(--text-muted); font-size: var(--app-sm); font-variant-numeric: tabular-nums; }
.app-dashboard-product__quantity { white-space: nowrap; }
@media (max-width: 767px) {
  .app-dashboard-product { padding: 12px 14px; }
  .app-layout .app-dashboard-product > .app-dashboard-product__kg { font-size: 20px; }
}

/* 관리자 이벤트 홍보(EP, 2026-10-24 버드 지시 "희성 테마 유지하면서 정갈하게"):
   맨 위 판매 상태 한 줄 + 배너·팝업 두 카드. 카드는 제목·상태 → 닫힌 사정 → 미리보기 → 노출 → 이미지 순. */
/* EP2 history workspace and modal: existing burgundy/off-white tokens only. */
.app-promo-history__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; }
.app-promo-history__head h2 { margin: 0; }
.app-promo-history__head p { margin: 6px 0 0; color: var(--text-muted); }
.app-promo-history__current { padding: 20px; border: 1px solid var(--line); border-radius: 8px; background: var(--page); }
.app-promo-history__current h3 { margin: 0 0 14px; }
.app-promo-history__current-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.app-promo-history__current-grid > div { padding: 16px; border-left: 3px solid var(--primary); background: var(--warm); overflow-wrap: anywhere; }
.app-promo-history__current-grid h4 { margin: 0 0 10px; }
.app-promo-history__current-grid .app-chip { margin-left: 8px; }
.app-promo-history__current-grid p { margin: 8px 0 0; color: var(--text-soft); font-size: var(--app-xs); }
.app-promo-history__current-grid .app-button { margin-top: 12px; }
.app-promo-history__filters { display: flex; flex-wrap: wrap; align-items: end; gap: 12px 20px; }
.app-promo-history__filters label { display: grid; gap: 6px; font-size: var(--app-xs); }
.app-promo-history__filters > span { margin-left: auto; color: var(--text-muted); font-size: var(--app-xs); }
.app-promo-history__table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 8px; background: var(--page); }
.app-promo-history__table { width: 100%; min-width: 680px; border-collapse: collapse; font-size: var(--app-sm); }
.app-promo-history__table th { padding: 12px 16px; background: var(--surface); color: var(--text-soft); font-weight: 500; text-align: left; }
.app-promo-history__table td { padding: 14px 16px; border-top: 1px solid var(--line); vertical-align: middle; }
.app-promo-history__table th, .app-promo-history__table td:nth-child(2), .app-promo-history__table td:nth-child(3) { white-space: nowrap; }
.app-promo-history__table td:first-child { min-width: 180px; max-width: 360px; overflow-wrap: anywhere; }
.app-promo-history__table small { display: block; margin-top: 4px; color: var(--text-muted); }
.app-promo-history__title { min-height: 44px; padding: 0; border: 0; background: transparent; color: var(--primary); font: inherit; font-weight: 600; text-align: left; cursor: pointer; }
.app-promo-history__title:hover { text-decoration: underline; text-underline-offset: 4px; }
.app-promo-history__state--live, .app-promo-history__state--scheduled { background: var(--primary-soft); color: var(--primary); }
.app-promo-history__empty { padding: 24px; text-align: center; color: var(--text-muted); }
.app-promo-history__pagination { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px; }
.app-promo-history__pagination span { font-size: var(--app-xs); font-variant-numeric: tabular-nums; }
.app-promo-history__legacy { padding-top: 20px; border-top: 1px solid var(--line); }
.app-promo-history__legacy > p { font-size: var(--app-xs); color: var(--text-muted); }
.app-promo-dialog { width: min(760px, calc(100vw - 32px)); max-height: calc(100dvh - 40px); overflow-y: auto; background: var(--page); }
.app-promo-dialog__meta { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-bottom: 16px; }
.app-promo-dialog__meta p { margin: 0; color: var(--text-soft); }
.app-promo-dialog__preview { display: grid; place-items: center; max-height: 260px; margin-bottom: 20px; overflow: hidden; border: 1px solid var(--line); border-radius: 6px; background: var(--warm); }
.app-promo-dialog__preview img { display: block; width: 100%; max-height: 260px; height: auto; object-fit: contain; }
.app-promo-dialog__form fieldset { display: grid; gap: 16px; min-width: 0; }
.app-promo-dialog__period { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.app-promo-dialog__replacement { margin-bottom: 16px; padding: 16px; border-left: 3px solid var(--primary); background: var(--primary-soft); overflow-wrap: anywhere; }
.app-promo-dialog__replacement p { margin: 0; line-height: 1.7; }
.app-promo-dialog__replacement p + p { margin-top: 6px; }
.app-promo-dialog__period input { min-width: 0; width: 100%; }
.app-promo-dialog__form .app-promo__note { padding-left: 0; line-height: 1.7; }
.app-promo-dialog__actions, .app-promo-dialog__operations { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line); }
.app-promo-dialog__actions { justify-content: flex-end; }
.app-promo-dialog__operations p { flex-basis: 100%; margin: 0; color: var(--text-soft); font-size: var(--app-xs); }
.app-promo-dialog__detail { overflow-wrap: anywhere; }
.app-promo-dialog__detail dl { display: grid; gap: 12px; padding: 16px; background: var(--warm); }
.app-promo-dialog__detail dt { color: var(--text-muted); font-size: var(--app-xs); }
.app-promo-dialog__detail dd { margin: 4px 0 0; }
.app-promo-dialog__error { margin-top: 16px; padding: 16px; border-left: 3px solid var(--primary); background: var(--primary-soft); }
@media (max-width: 767px) {
  .app-promo-history__current-grid, .app-promo-dialog__period { grid-template-columns: minmax(0, 1fr); }
  .app-promo-history__current { padding: 16px; }
  .app-promo-history__filters > span { flex-basis: 100%; margin-left: 0; }
  .app-promo-dialog .app-button, .app-promo-history .app-button { min-height: 44px; }
  .app-promo-dialog__actions .app-button { flex: 1; }
}
.app-promo { display: grid; gap: 20px; }
.app-promo__summary {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px;
  padding: 16px 20px; border: 1px solid var(--line); border-radius: 8px; background: var(--page);
}
.app-promo__sellable { display: inline-flex; align-items: center; gap: 10px; margin: 0; color: var(--text-soft); font-size: var(--app-sm); font-weight: 600; }
.app-promo__sellable::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--cream-dim); }
.app-promo__sellable.is-on { color: var(--text); }
.app-promo__sellable.is-on::before { background: var(--primary); box-shadow: 0 0 0 4px var(--primary-soft); }
.app-promo__link {
  margin-left: auto; color: var(--primary); font-size: var(--app-sm); font-weight: 600;
  text-decoration: underline; text-underline-offset: 3px; text-decoration-color: transparent;
}
.app-promo__link:hover, .app-promo__link:focus-visible { text-decoration-color: currentColor; }
.app-promo__note { flex-basis: 100%; margin: 0; padding-left: 18px; color: var(--text-muted); font-size: var(--app-xs); }
.app-promo__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: start; }
.app-layout .app-promo-card { display: grid; gap: 0; margin: 0; padding: 0; overflow: hidden; }
.app-promo-card > :is(.app-promo-card__head, .app-promo-card__block, .app-promo-card__messages) { padding-inline: 24px; }
.app-promo-card__head {
  display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 12px 20px;
  padding-block: 20px 18px; border-bottom: 1px solid var(--line);
}
.app-promo-card__title { min-width: 0; flex: 1 1 220px; }
.app-layout .app-promo-card__title h2 { margin: 0; padding: 0; border: 0; font-size: var(--app-lg); }
.app-promo-card__title p { margin: 6px 0 0; color: var(--text-muted); font-size: var(--app-xs); line-height: 1.6; }
.app-promo-card__state { display: flex; flex-wrap: wrap; gap: 8px 16px; margin: 0; }
.app-promo-card__state > div { display: grid; gap: 4px; justify-items: start; }
.app-promo-card__state dt { color: var(--text-muted); font-size: 12px; }
.app-promo-card__state dd { margin: 0; }
.app-chip--on { background: var(--page); color: var(--text); box-shadow: inset 0 0 0 1px var(--app-control-line); }
.app-promo-card__open::before { content: ""; width: 6px; height: 6px; margin-right: 6px; border-radius: 50%; background: var(--cream-dim); }
.app-promo-card__open.is-open::before { background: var(--primary); }
.app-promo-card__closed {
  display: flex; flex-wrap: wrap; gap: 2px 16px; margin: 16px 24px 0; padding: 10px 14px;
  border-radius: 6px; background: var(--warm); color: var(--text-soft); font-size: var(--app-xs);
}
.app-promo-card__closed p { margin: 0; }
.app-promo-card__closed .app-promo-card__closed-note { flex-basis: 100%; color: var(--text-muted); }
.app-promo-card__preview {
  display: grid; place-items: center; aspect-ratio: 16 / 9; margin: 16px 24px 0; overflow: hidden;
  border: 1px solid var(--line); border-radius: 6px; background: var(--warm);
}
.app-promo-card__preview img { display: block; width: 100%; height: 100%; object-fit: contain; }
.app-promo-card__empty { color: var(--text-muted); font-size: var(--app-xs); }
.app-promo-card__block { display: grid; gap: 12px; padding-block: 20px; }
.app-promo-card__block + .app-promo-card__block { border-top: 1px solid var(--line); }
.app-layout .app-promo-card__block > h3 { margin: 0; color: var(--text-muted); font-size: 12px; font-weight: 600; letter-spacing: .04em; }
.app-promo-card__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin: 0; }
.app-promo-card__row > fieldset { display: flex; flex: 1; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; }
.app-promo-card__row--file > .app-file-picker { flex: 1 1 240px; margin: 0; }
.app-promo-card__buttons { display: flex; flex-wrap: wrap; gap: 8px; }
.app-promo-card__hint { margin: 0; color: var(--text-muted); font-size: var(--app-sm); }
.app-promo-card__hint.is-ready { color: var(--primary); font-weight: 500; }
.app-promo-card__help { margin: 0; color: var(--text-muted); font-size: 12px; }
.app-promo-card__messages { display: grid; gap: 8px; padding-block: 0 20px; }
.app-promo-card__messages > p { margin: 0; }
/* 체크박스를 켜기·끄기 스위치 모양으로. 실제 요소는 그대로 checkbox라 키보드·읽어 주기는 같다. */
.app-promo-switch { display: inline-flex; align-items: center; gap: 10px; min-height: 40px; }
.app-promo-switch > label { color: var(--text); font-size: var(--app-sm); font-weight: 500; cursor: pointer; }
.app-layout .app-promo-switch > input[type="checkbox"] {
  position: relative; width: 40px; height: 22px; margin: 0; border-radius: 999px; appearance: none;
  background: #d9d3ca; transition: background-color .15s ease; cursor: pointer;
}
.app-layout .app-promo-switch > input[type="checkbox"]::before {
  content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%;
  background: var(--page); box-shadow: 0 1px 2px rgb(26 26 26 / 25%); transition: transform .15s ease;
}
.app-layout .app-promo-switch > input[type="checkbox"]:checked { background: var(--primary); }
.app-layout .app-promo-switch > input[type="checkbox"]:checked::before { transform: translateX(18px); }
.app-layout .app-promo-switch > input[type="checkbox"]:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }
.app-layout .app-promo-switch > input[type="checkbox"]:disabled { background: var(--line); }
.app-layout .app-promo-switch > input[type="checkbox"]:disabled:checked { background: #cf9aa3; }
@media (max-width: 1100px) {
  .app-promo__grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 767px) {
  .app-promo__summary { padding: 14px 16px; }
  .app-promo__link { margin-left: 18px; }
  .app-promo-card > :is(.app-promo-card__head, .app-promo-card__block, .app-promo-card__messages) { padding-inline: 16px; }
  .app-promo-card__closed, .app-promo-card__preview { margin-inline: 16px; }
  .app-promo-card__row > .app-button, .app-promo-card__row > fieldset > .app-button { flex: 1 1 100%; min-height: 44px; }
  .app-promo-card__buttons { flex: 1 1 100%; }
  .app-promo-card__buttons > .app-button { flex: 1; min-height: 44px; }
  .app-promo-switch { min-height: 44px; }
}
/* EO: event-only dialog and selection; existing product and public rules stay unchanged. */
ul.app-product-cards[aria-label="이벤트 판매항목 목록"] .app-product-card__body > .app-button { position: relative; z-index: 1; min-height: 44px; }
.eo-sale-dialog.app-dialog { width: min(960px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); padding: 0; overflow: hidden; }
.eo-sale-dialog[open] { display: flex; flex-direction: column; }
.eo-sale-dialog > h2 { flex: none; margin: 0; padding: 20px 180px 14px 24px; }
.eo-sale-scroll { min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 16px 24px 24px; }
.eo-sale-dialog .eo-sale-form { max-width: none; margin: 0; }
.eo-sale-dialog .eo-sale-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 28px; align-items: start; }
.app-layout--admin .eo-sale-dialog .app-form .app-field { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; }
.app-layout--admin .eo-sale-dialog .app-form .app-field > :is(label, .app-field__label, input, select, textarea, p, .app-status) { grid-column: auto; grid-row: auto; min-width: 0; padding-top: 0; }
.app-layout--admin .eo-sale-dialog .app-form .app-field > :is(input:not([type="checkbox"], [type="radio"], [type="file"]), select, textarea) { box-sizing: border-box; width: 100%; min-height: 44px; padding: 10px 12px; }
.eo-sale-dialog :is(.app-option-groups, .app-option-group, .app-option-group__head, .app-option-row) { min-width: 0; }
.eo-sale-dialog :is(.app-option-group__head, .app-option-row) { grid-template-columns: minmax(0, 1fr) 96px; }
.eo-sale-dialog .app-option-row__name { grid-column: 1 / -1; }
.eo-sale-dialog .app-option-row__end { grid-column: 2; padding-top: calc(var(--app-sm) * 1.5 + 6px); }
.eo-sale-dialog .app-button { min-width: 44px; min-height: 44px; }
.eo-sale-dialog :is(.app-option-row__end, .app-file-field) > label { display: flex; align-items: center; min-height: 44px; }
.eo-sale-dialog :is(legend, dd, .app-file-drop__text) { overflow-wrap: anywhere; }
.app-layout--admin .eo-sale-dialog .app-form > .eo-sale-actions { position: absolute; top: 10px; right: 24px; z-index: 1; margin: 0; padding: 0; background: transparent; border: 0; }
.eo-sale-identity { display: grid; gap: 8px; margin: 0; }
.eo-sale-identity > div { display: grid; grid-template-columns: 90px minmax(0, 1fr); gap: 8px; }
.eo-sale-identity dd { margin: 0; }
.eo-selected-options { display: block; overflow-wrap: anywhere; }
@media (max-width: 767px) {
  .eo-sale-dialog .eo-sale-grid { grid-template-columns: minmax(0, 1fr); }
  .eo-sale-dialog > h2 { padding: 16px 156px 16px 16px; }
  .eo-sale-scroll { padding: 12px 16px 20px; }
  .app-layout--admin .eo-sale-dialog .app-form > .eo-sale-actions { top: 8px; right: 16px; }
  .eo-sale-dialog .eo-sale-actions .app-button { flex: 1; }
}

/* EC: member event cards and selection modal only; EO/admin rules above are preserved. */
.ec-event-cards .app-button { min-height: 44px; }
.ec-event-cards :is(.app-product-card__meta, .app-product-card__spec) { overflow-wrap: anywhere; }
.ec-event-card__image { width: 100%; padding: 0; border: 0; cursor: pointer; }
.ec-event-card__title { min-height: 44px; padding: 0; border: 0; background: transparent; color: var(--text); font: inherit; font-weight: 600; text-align: left; cursor: pointer; overflow-wrap: anywhere; }
.ec-event-card__title:hover { color: var(--primary); }
.ec-event-photo { position: relative; overflow: hidden; }
.ec-event-photo > .ec-event-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ec-event-photo:has(img) > .app-product-card__empty { display: none; }
.ec-event-dialog.app-dialog { width: min(1120px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); padding: 0; overflow: hidden; }
.ec-event-dialog[open] { display: flex; flex-direction: column; }
.ec-event-dialog > h2 { flex: none; margin: 0; padding: 20px 110px 18px 24px; border-bottom: 1px solid var(--line); overflow-wrap: anywhere; }
.ec-event-dialog > .ec-event-dialog__close { position: absolute; top: 12px; right: 24px; min-height: 44px; }
.ec-event-dialog__scroll { min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 20px 24px 24px; }
.ec-event-dialog__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); align-items: start; gap: 28px; }
.ec-event-dialog__media { min-width: 0; }
.ec-event-dialog__media > .ec-event-photo { border: 1px solid var(--line); border-radius: 8px; }
.ec-event-dialog__media > :is(h3, p) { overflow-wrap: anywhere; white-space: pre-line; }
.ec-event-dialog .ec-event-selection { min-width: 0; margin: 0; padding: 0; border: 0; box-shadow: none; }
/* 창 제목(이벤트 상품 선택)과 겹치는 구역 제목은 읽기 순서에만 남긴다. */
.ec-event-dialog .ec-event-selection > h2 {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
  overflow: hidden; white-space: nowrap; clip-path: inset(50%);
}
/* 단추 44px 하한은 :where로 낮춰 패널의 54·60px 단추 규칙이 덮을 수 있게 한다. */
.ec-event-dialog :where(.app-button) { min-height: 44px; }
.ec-event-dialog input[type="number"] { min-height: 44px; }
.ec-event-dialog .app-status { overflow-wrap: anywhere; }
/* PV10-S7 상품 정보(패널 밖 위쪽): 분류 태그 → 상품명(제목) → 라벨-값 정의 목록 → 설명. */
.ec-event-head { display: grid; justify-items: start; gap: 16px; min-width: 0; margin-bottom: 32px; padding-bottom: 32px; border-bottom: 1px solid var(--line); }
.app-layout .ec-event-head__tag { margin: 0; padding: 4px 12px; border-radius: 10px; background: var(--primary-soft); color: var(--primary); font-size: var(--app-md); font-weight: 500; }
.ec-event-selection .ek-event-info { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 24px; width: 100%; min-width: 0; margin: 0; }
.ek-event-info > div { display: grid; grid-template-columns: 84px minmax(0, 1fr); align-items: baseline; gap: 8px; min-width: 0; }
.ek-event-info dt { color: var(--text-muted); font-size: var(--app-sm); }
.ek-event-info dd { min-width: 0; margin: 0; color: var(--text); font-size: var(--app-body); font-weight: 500; white-space: pre-line; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.ek-event-info > :is(.ek-event-info__name, .ek-event-info__description) { grid-column: 1 / -1; grid-template-columns: minmax(0, 1fr); gap: 4px; }
.ek-event-info__name { margin-bottom: 8px; }
.ek-event-info > .ek-event-info__name dd { font-family: var(--font-brand); font-size: 28px; font-weight: 700; line-height: 1.3; letter-spacing: -.02em; }
.ek-event-info__description { margin-top: 8px; }
.ek-event-info > .ek-event-info__description dd { color: var(--text-soft); font-size: var(--app-md); font-weight: 400; line-height: 1.56; }
/* 이벤트 패널 안: 안내 묶음, 고르기 폼, 수량 입력(60px, 오른쪽 단위), 카드 수량 칸. */
.ec-event-notes { display: grid; gap: 6px; min-width: 0; }
.ec-event-form { display: grid; gap: 32px; min-width: 0; margin: 0; }
.ec-event-quantity { display: grid; gap: 0; min-width: 0; margin-top: 24px; }
.ec-event-quantity > label { margin-bottom: 10px; color: var(--text-muted); font-size: var(--app-md); font-weight: 500; }
.ec-event-quantity > .app-status--error { margin-top: 10px; }
.ec-event-quantity__box { position: relative; min-width: 0; }
.ec-event-quantity__box::after {
  position: absolute; top: 50%; right: 24px; transform: translateY(-50%);
  color: var(--text-muted); font-size: var(--app-lg); pointer-events: none; content: attr(data-unit) / "";
}
.app-layout .ec-event-quantity__box > input {
  min-height: 60px; padding: 0 72px 0 24px; border: 1px solid var(--text); border-radius: 10px; background: var(--page);
  color: var(--text); font-size: var(--app-lg); font-weight: 500;
}
.app-layout .ec-event-quantity__box > input[aria-invalid="true"] { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary); }
.app-layout .ec-event-quantity__box > input:disabled { border-color: var(--line-300); color: var(--text-muted); background: var(--page); }
.app-layout input.ec-event-line-qty {
  width: 104px; min-height: 44px; padding: 0 8px 0 14px; border: 1px solid var(--line-300); border-radius: 8px; background: var(--page);
  color: var(--text); font-size: var(--app-md); font-weight: 700; text-align: center;
}
.app-layout input.ec-event-line-qty[aria-invalid="true"] { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary); }
.app-layout input.ec-event-line-qty:disabled { color: var(--text-muted); background: var(--surface); }
.app-shop-panel__summary > a:not(.app-button) { justify-self: start; min-height: 44px; align-content: center; color: var(--primary); }
@media (max-width: 767px) {
  .ec-event-cards.app-product-cards { grid-template-columns: minmax(0, 1fr); }
  .ec-event-dialog__grid { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .ec-event-dialog > h2 { padding: 16px 96px 16px 16px; }
  .ec-event-dialog > .ec-event-dialog__close { top: 8px; right: 16px; }
  .ec-event-dialog__scroll { padding: 16px; }
  .ec-event-dialog__media > .ec-event-photo { aspect-ratio: 16 / 9; }
  .ec-event-head { margin-bottom: 24px; padding-bottom: 24px; }
  .ec-event-selection .ek-event-info { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .ek-event-info > .ek-event-info__name dd { font-size: 24px; }
}

/* Reception editor: paired cards, independent save actions. */
.app-reception-editor { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.app-reception-editor > :not(form) { grid-column: 1 / -1; }
.app-reception-editor > h2 { margin-bottom: 0; }
.app-reception-editor > .app-form {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto auto 1fr auto;
  gap: 20px 16px; max-width: none; margin: 0; padding: 24px;
  border: 1px solid var(--line); border-radius: 12px; background: var(--warm);
}
.app-reception-editor > .app-form > :is(h3, p, fieldset, .app-actions) { grid-column: 1 / -1; }
.app-reception-editor .app-form > h3 { font-size: var(--app-md, 17px); line-height: 1.5; color: var(--text); }
.app-reception-editor .app-form > p { color: var(--text-muted); font-size: var(--app-xs, 13px); line-height: 1.7; }
.app-layout--admin .app-reception-editor .app-form .app-field { display: flex; flex-direction: column; gap: 8px; }
.app-layout--admin .app-reception-editor .app-form .app-field > label { padding-top: 0; }
.app-layout--admin .app-reception-editor .app-field__input { width: 100%; min-width: 0; min-height: 44px; }
.app-reception-editor .app-form > fieldset { position: relative; display: block; }
.app-reception-editor fieldset > legend { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.app-reception-editor .app-weekday-choices { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.app-reception-editor .app-weekday-choices label { flex-direction: column; justify-content: center; gap: 6px; min-height: 68px; padding: 8px 2px; border-radius: 8px; font-size: var(--app-xs, 13px); white-space: nowrap; }
.app-reception-editor .app-weekday-choices input { margin: 0; }
.app-reception-editor .app-form > .app-actions { display: flex; justify-content: flex-end; align-self: end; margin: 0; padding-top: 18px; }
.app-reception-editor .app-actions .app-button { width: auto; min-width: 128px; min-height: 44px; padding: 10px 20px; border-radius: 8px; }
@media (max-width: 1199px) {
  .app-reception-editor { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 767px) {
  .app-reception-editor > .app-form { padding: 16px; gap: 18px 12px; }
  .app-reception-editor .app-weekday-choices { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
}




/* UQ: 확인창에서 명시적으로 선택한 action 행만 정돈한다. RS/상품/이벤트 전용 배치 불변. */
.app-dialog .app-actions.uq-dialog-actions {
  display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-end;
  align-items: center; gap: 8px; width: 100%; padding-left: 0; margin-bottom: 0;
}
.app-dialog .app-actions.uq-dialog-actions > .app-button {
  flex: 0 1 auto; min-width: 44px; min-height: 44px; margin: 0;
}
/* 관리자 데스크톱 폼의 180px label 들여쓰기보다 좁은 확인창 action이 우선한다. */
.app-layout--admin .app-dialog .app-form > .app-actions.uq-dialog-actions { padding-left: 0; }

/* UQ-C01: B의 workspace.css 후보에 통합할 별도 snippet. 실제 CSS 미수정. */
.app-dialog > .uq-member-order-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}
.app-dialog > .uq-member-order-actions > .app-button {
  min-height: 44px;
}

/* UQ-B2: 긴 결과불명 복구 action은 주/보조 쌍과 분리하고 작은 화면에서는 문구만 줄바꿈한다. */
.app-dialog .app-actions.uq-admin-order-recovery > .app-button {
  max-width: 100%; white-space: normal; overflow-wrap: anywhere;
}

/* SG: 가입 페이지 안에서만 카드·직접 자식 입력·서명 영역을 정돈한다. */
.app-layout--signup .signup-steps {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px;
  margin: 0 0 28px; padding: 0; list-style: none; counter-reset: signup-step;
}
.app-layout--signup .signup-steps > li {
  display: flex; align-items: center; gap: 8px; min-width: 0; padding: 12px;
  border: 1px solid var(--line); border-radius: 6px; background: var(--page);
  color: var(--text-soft); counter-increment: signup-step;
}
.app-layout--signup .signup-steps > li::before {
  content: counter(signup-step); display: inline-flex; align-items: center; justify-content: center;
  flex: 0 0 26px; height: 26px; border-radius: 50%; background: var(--primary-soft);
  color: var(--primary); font-family: var(--font-num); font-weight: 700;
}
.app-layout--signup .signup-flow {
  padding: 0; border: 0; background: transparent; box-shadow: none;
}
.app-layout--signup .signup-flow > h2 { margin-bottom: 12px; }
.app-layout--signup .signup-flow > .app-section { margin-block: 24px; }
.app-layout--signup .app-form { max-width: none; }
.app-layout--signup .signup-business-form {
  grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 20px 24px;
  padding: 24px; border: 1px solid var(--line); border-radius: 8px; background: var(--page);
}
.app-layout--signup .signup-business-form > .app-field { align-content: start; }
.app-layout--signup .signup-business-form > .app-field > p:not(.app-field__error) { min-height: 3.2em; }
.app-layout--signup .signup-business-form > :is(.app-status, .app-actions),
.app-layout--signup .signup-business-form > .app-field:has(> input[name="address"]) { grid-column: 1 / -1; }
.app-layout--signup fieldset.signup-controls { margin-block: 24px; }
.app-layout--signup .signup-controls > .app-section { margin-block: 0; }
.app-layout--signup .signup-controls .app-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.app-layout--signup .signup-controls .app-form > :not(.app-field) { grid-column: 1 / -1; }
.app-layout--signup .app-actions { justify-content: flex-end; }
.app-layout--signup .app-actions > .app-status { flex-basis: 100%; }
.app-layout--signup .app-button { min-height: 44px; max-width: 100%; white-space: normal; }
.app-layout--signup :is(input:not([type="checkbox"], [type="radio"], [type="file"]), select, textarea) { min-height: 44px; }
.app-layout--signup .signup-dev-identity > .app-field { max-width: 460px; }
.app-layout--signup .signup-dev-identity > .app-actions { padding-top: 16px; border-top: 1px solid var(--line); }
.app-layout--signup .signup-agreement .app-table { table-layout: fixed; }
.app-layout--signup .signup-agreement .app-table :is(th, td) { white-space: normal; overflow-wrap: anywhere; vertical-align: top; }
.app-layout--signup .signup-agreement .app-table th { width: 30%; }
.app-layout--signup .signup-agreement > .app-field { max-width: 280px; margin-block: 20px; }
.app-layout--signup .signup-agreement-consent { display: flex; align-items: center; min-height: 44px; }
.app-layout--signup .signup-signature { margin-block: 20px; }
.app-layout--signup .signup-signature > h3 { margin: 0 0 8px; }
.app-layout--signup .signup-signature > p { color: var(--text-muted); }
.app-layout--signup .signup-signature > .app-status {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 20px; padding: 16px;
  border: 1px solid var(--line); background: var(--warm);
}
.app-layout--signup .signup-signature canvas {
  display: block; flex: 0 1 auto; max-width: 100%; height: auto !important; aspect-ratio: 2 / 1;
  outline: 1px solid var(--app-control-line); border-radius: 3px; background: #fff;
}
.app-layout--signup .signup-signature canvas[aria-disabled="true"] { opacity: .6; }
.app-layout--signup .signup-signature .app-field__error { flex-basis: 100%; }
@media (max-width: 767px) {
  .app-layout--signup .signup-steps { grid-template-columns: minmax(0, 1fr); gap: 6px; margin-bottom: 20px; }
  .app-layout--signup .signup-steps > li { padding: 8px 12px; }
  .app-layout--signup .signup-business-form,
  .app-layout--signup .signup-controls .app-form { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .app-layout--signup .signup-business-form { padding: 16px; }
  .app-layout--signup .signup-business-form > .app-field > p:not(.app-field__error) { min-height: 0; }
  .app-layout--signup .signup-flow .app-section { padding: 16px; }
  .app-layout--signup .signup-signature > .app-status { padding: 12px; }
  .app-layout--signup .signup-signature > .app-status > .app-button { margin-left: auto; }
  .app-layout--signup .app-actions > .app-button { flex: 1 1 auto; }
  .app-layout--signup .signup-agreement .app-table :is(th, td) { padding: 10px; }
}

/* SG2: one active view, compact progress, stable previous/next actions. */
.app-layout--signup .signup-wizard-steps { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.app-layout--signup .signup-wizard-steps > li { flex-wrap: wrap; padding: 10px; }
.app-layout--signup .signup-wizard-steps > [aria-current="step"] { border-color: var(--primary); color: var(--primary); font-weight: 700; }
.app-layout--signup .signup-step-complete { font-size: .75rem; }
.app-layout--signup .signup-step-summary { margin: 0 0 16px; color: var(--text-soft); text-align: center; }
.app-layout--signup :is(.signup-wizard, .signup-complete) { padding: clamp(16px, 4vw, 40px); border-radius: 16px; }
.app-layout--signup .signup-wizard > h2 { width: fit-content; max-width: 100%; margin-bottom: 24px; padding-bottom: 0; border-bottom: 0; }
/* PV-02: the step title only receives programmatic focus for screen-reader announcement; it is not a control, so no ring. */
.app-layout--signup .signup-wizard > h2[tabindex="-1"]:focus { outline: none; }
.app-layout--signup .app-field > p:not(.app-field__error) { font-size: var(--app-sm); line-height: 1.6; }
/* PV-02: the active step box already names the step on wide screens; keep the summary for assistive tech only. */
@media (min-width: 768px) {
  .app-layout--signup .signup-step-summary {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
    overflow: hidden; white-space: nowrap; clip-path: inset(50%);
  }
}
/* PV-02: the card is the single column; step content shares its left edge instead of nested centered boxes. */
.app-layout--signup .signup-wizard .signup-business-form { padding: 0; border: 0; }
.app-layout--signup .signup-wizard .signup-agreement { margin-block: 0; padding: 0; border: 0; background: transparent; box-shadow: none; }
.app-layout--signup .signup-wizard-actions { border-top: 1px solid var(--line); margin-top: 24px; padding-top: 20px; align-items: flex-start; }
.app-layout--signup .signup-wizard-actions > .app-button:first-child:not(.app-button--primary) { margin-right: auto; }
.app-layout--signup .signup-wizard-actions > .app-section { margin: 0; padding: 0; border: 0; background: transparent; box-shadow: none; }
.app-layout--signup .signup-wizard-actions .app-actions { margin: 0; }
.app-layout--signup .signup-review { overflow-wrap: anywhere; }
.app-layout--signup .signup-review > section { border-bottom: 1px solid var(--line); padding-block: 20px; }
.app-layout--signup .signup-review dl > div { display: grid; grid-template-columns: minmax(100px, 1fr) 2fr; gap: 12px; padding-block: 6px; }
.app-layout--signup .signup-review dd { margin: 0; }
.app-layout--signup .signup-complete { max-width: 620px; margin-inline: auto; text-align: center; }
.app-layout--signup .signup-complete-actions { justify-content: center; margin-top: 24px; }

/* PV-02: focused signup chrome — the login page's white bar and centered Heesung logo, without menu/login links. */
.app-layout--signup .signup-brand {
  display: flex; align-items: center; justify-content: center;
  padding: 12px 16px; border-bottom: 1px solid var(--line); background: var(--page);
}
.app-layout--signup .signup-brand__home {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: var(--hit-min); min-height: var(--hit-min); border-radius: 4px;
}
.app-layout--signup .signup-brand__logo { display: block; width: 68.0635px; height: 64px; object-fit: contain; }
.app-layout--signup .app-layout__main > .app-layout__title { text-align: center; }
@media (max-width: 767px) {
  .app-layout--signup .signup-brand { padding-block: 8px; }
  .app-layout--signup .signup-brand__logo { width: 59.555px; height: 56px; }
  /* Small screens: a slim five-segment bar; the visible summary line names the current step once. */
  .app-layout--signup .signup-wizard-steps { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; margin-bottom: 10px; }
  .app-layout--signup .signup-wizard-steps > li { position: relative; height: 4px; padding: 0; border: 0; border-radius: 2px; background: var(--line); }
  .app-layout--signup .signup-wizard-steps > li::before { content: none; }
  .app-layout--signup .signup-wizard-steps > li > span {
    position: absolute; width: 1px; height: 1px; overflow: hidden; white-space: nowrap; clip-path: inset(50%);
  }
  .app-layout--signup .signup-wizard-steps > :is([aria-current="step"], :has(> .signup-step-complete)) { background: var(--primary); }
  .app-layout--signup .signup-step-summary { margin-bottom: 12px; }
  .app-layout--signup .signup-wizard { padding: 16px; }
  .app-layout--signup .signup-wizard > h2 { margin-bottom: 16px; }
  .app-layout--signup .signup-wizard-actions { gap: 12px; }
  .app-layout--signup .signup-wizard-actions > .app-button { flex: 1 1 calc((100% - 12px) / 3); min-width: 0; }
  .app-layout--signup .signup-wizard-actions > .app-section,
  .app-layout--signup .signup-wizard-actions > .app-button--primary { flex: 2 1 calc((100% - 12px) * 2 / 3); min-width: 0; }
}

/* PV-03: wide step boxes stay one line — a finished step shows a check in its circle; 완료 stays for assistive tech only. */
@media (min-width: 768px) {
  .app-layout--signup .signup-wizard-steps > li { flex-wrap: nowrap; }
  .app-layout--signup .signup-wizard-steps > li:has(> .signup-step-complete)::before {
    content: "";
    background: var(--primary) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath d='M3 7.4l2.8 2.8L11 4.2' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px 14px no-repeat;
  }
  .app-layout--signup .signup-wizard-steps .signup-step-complete {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
    overflow: hidden; white-space: nowrap; clip-path: inset(50%);
  }
}
/* PV-03: in the wizard the step title already names this view; the region title stays for assistive tech only. */
.app-layout--signup .signup-wizard .signup-agreement > h2 {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
  overflow: hidden; white-space: nowrap; clip-path: inset(50%);
}
/* PV-03: the agreement title, its status/test notices, body and field table read as one paper sheet in DOM order.
   The siblings share side borders without a wrapper, so margins become padding to keep the edges unbroken. */
.app-layout--signup .signup-wizard .signup-agreement > :where(.signup-agreement-doc, .signup-agreement-doc__title ~ [role="status"], .signup-agreement-doc__title ~ [role="note"]) {
  margin: 0; padding-inline: clamp(16px, 5%, 40px); border: 0 solid var(--line); border-inline-width: 1px; border-radius: 0;
}
.app-layout--signup .signup-wizard .signup-agreement > .signup-agreement-doc { background: var(--page); }
.app-layout--signup .signup-wizard .signup-agreement > .signup-agreement-doc__title {
  margin-top: 16px; padding-block: 32px 20px; border-top-width: 1px; border-radius: 8px 8px 0 0;
  font-size: var(--app-lg, 18px); text-align: center;
}
.app-layout--signup .signup-wizard .signup-agreement > [role="status"] + [role="note"] { border-top-width: 1px; }
.app-layout--signup .signup-wizard .signup-agreement > h4.signup-agreement-doc { padding-block: 16px 4px; }
.app-layout--signup .signup-wizard .signup-agreement > p.signup-agreement-doc { padding-block: 4px; }
.app-layout--signup .signup-wizard .signup-agreement > :is([role="status"], [role="note"]) + .signup-agreement-doc { padding-top: 24px; }
.app-layout--signup .signup-wizard .signup-agreement > .signup-agreement-doc__fields {
  padding-block: 20px 32px; border-bottom-width: 1px; border-radius: 0 0 8px 8px;
}
.app-layout--signup .signup-wizard .signup-agreement > .signup-agreement-doc__fields > .app-table { border: 1px solid var(--line); }
/* PV-07: the form's buyer/supplier tables sit side by side where both fit and stack on narrow screens.
   With a fields block there is no trailing field table, so the last body block closes the sheet. */
.app-layout--signup .signup-wizard .signup-agreement > .signup-agreement-parties {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); align-items: start; gap: 16px 24px; padding-block: 16px;
}
.app-layout--signup .signup-wizard .signup-agreement > .signup-agreement-parties > .app-table-wrap { margin: 0; border: 0; border-radius: 0; }
.app-layout--signup .signup-wizard .signup-agreement > .signup-agreement-parties .app-table { border: 1px solid var(--line); }
.app-layout--signup .signup-wizard .signup-agreement > .signup-agreement-parties caption {
  padding: 0 0 8px; color: var(--text); font-family: var(--font-brand); font-size: var(--app-md); font-weight: 700;
}
.app-layout--signup .signup-wizard .signup-agreement > .signup-agreement-parties th { width: 42%; word-break: keep-all; }
.app-layout--signup .signup-wizard .signup-agreement > .signup-agreement-doc.signup-agreement-doc__end {
  padding-bottom: 32px; border-bottom-width: 1px; border-radius: 0 0 8px 8px;
}