/* ═══════════════════════════════════════════════════════════════════════
   base.css 에서 옮겨온 부품 — 2026-08-28.

   base 는 리셋·타이포·레이아웃만 남기고 **부품 정의는 여기가 정본**이다
   (사장님 2026-08-28: <q>없애야 할 성격 — base.css 안의 컴포넌트 정의</q>).

   ⚠️ **파일 맨 앞이라는 자리가 중요하다.** 로드 순서가 tokens→base→shell→core 라
   이 선언들은 원래 core 의 모든 선언보다 **먼저**였다. 뒤에 붙이면 캐스케이드가
   뒤집힌다 — 실제로 한 번 뒤집혔다(.page-title 의 padding-left:12px 가 사라졌다).
   ⛔ 아래 블록을 파일 뒤로 옮기지 마라.

   ⚠️ `.filter-bar`(배경·테두리 있는 박스)와 `.toolbar`(배경 없는 가로 배치)는
      역할이 달라 아직 두 벌이다. 합치면 화면이 바뀌므로 사장님 판단이 필요하다.
   ═══════════════════════════════════════════════════════════════════════ */
.page-title {
  font-size: var(--fs-page-title);
  font-weight: var(--fw-bold);
  color: var(--fg-strong);
  border-left: 4px solid var(--accent-500);
  padding-left: 12px;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 16px;
}
.page-title .subtitle {
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  color: var(--fg-muted);
}
.content-box {
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  margin-bottom: 16px;
  overflow-x: auto;
}
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  background: var(--bg-app);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  margin-bottom: 16px;
}
.filter-bar select,
.filter-bar input[type="text"],
.filter-bar input[type="date"],
.filter-bar input[type="number"] {
  padding: 5px 8px;
  font-size: var(--fs-control);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  outline: none; box-shadow: var(--ring-focus); }
.filter-bar select:focus,
.filter-bar input:focus {
  border-color: var(--border-focus);
}
.filter-bar label {
  font-size: var(--fs-control);
  font-weight: var(--fw-medium);
  color: var(--fg-muted);
  white-space: nowrap;
}
.admin-body .content-box {
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-sm);
}

@media (max-width: 768px) {
    .filter-bar { flex-direction: column; align-items: stretch; }
    .content-box { overflow-x: auto; -webkit-overflow-scrolling: touch; position: relative; }
    .filter-bar { flex-wrap: wrap; }
    .filter-bar select, .filter-bar input { font-size: var(--fs-body) !important; }
}

/* ── Page header ────────────────────────────────────────────── */
.page-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--space-5);
  margin-bottom: var(--space-6);
  flex-wrap: wrap;
}
.page-title {
  font-size: var(--fs-page-title);
  font-weight: var(--fw-semibold);
  color: var(--fg-strong);
  letter-spacing: -0.015em;
  line-height: var(--lh-tight);
  display: flex; align-items: center; gap: var(--space-4);
}
/* 🚨 제목이 `page-head` **안**에 있으면 자기 아래 여백을 갖지 않는다 — 감싸개가
   그 일을 한다. 2026-09-08 까지 둘이 더해져 제목 아래가 32px 였다(16 + 16).

   원인은 이 파일에 `.page-title` 이 **두 번** 선언돼 있는 것이다(파일 앞·뒤).
   앞엣것의 `margin-bottom:16px` 는 **감싸개 없이 홀로 쓰이던 시절**의 것이고,
   그 화면이 아직 남아 있어(2026-09-08 기준 24개) 통째로 걷으면 그쪽 제목이
   본문에 달라붙는다. 그래서 «문맥에 따라» 가른다.
   ⛔ 앞쪽 선언의 `margin-bottom` 을 지우지 마라 — 감싸개 없는 화면이 깨진다. */
.page-head .page-title { margin-bottom: 0; }

.page-title .count {
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
  color: var(--fg-muted);
  background: var(--bg-subtle);
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  font-variant-numeric: tabular-nums;
}
.page-sub {
  margin-top: 4px;
  font-size: var(--fs-control);
  color: var(--fg-muted);
}
.page-actions { display: flex; gap: var(--space-3); align-items: center; flex-wrap: wrap; }
/* 제목 옆에 「← 목록」·이전/다음처럼 «제목에 딸린» 것을 놓는 자리. `page-actions` 와
   짝이다 — 이쪽은 왼쪽, 저쪽은 오른쪽. 2026-09-08 에 주문 상세·반품 상세가 각자
   같은 것을 만들어 쓰고 있었고(값도 똑같았다) 세 번째 화면이 나와서 공용으로 올렸다. */
.page-head-left { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; }

/* 🚨 폰 — 손가락은 마우스가 아니다. mini 밀도(28px)는 **하루 종일 한 화면을 보는
   전담자**용이라(사방넷 §11-6 「다 따라하면 안 된다」) 좁은 화면에서는 터치 타깃을 키운다.

   ⭐ 토큰만 다시 정의한다 — `var(--ctl-h)` 를 쓰는 버튼·입력·셀렉트가 **한 곳에서** 같이
   커진다. 셀렉터를 다시 나열하면 하나 빠뜨렸을 때 그 컨트롤만 조용히 작게 남는다.
   ⚠️ 전엔 `base.css` 의 `@media` 가 `.btn { padding: 10px 18px }` 로 이 일을 하려 했는데
   두 겹으로 죽어 있었다: ① 이 파일이 «나중»이라 평범한 선언이 그 미디어쿼리를 덮었고
   ② `.btn` 에 `height` 가 있어서 애초에 padding 만 키워선 높이가 안 변한다. */
@media (max-width: 768px) {
  :root {
    --ctl-h:    var(--ctl-h-touch);
    --ctl-h-sm: var(--ctl-h-touch-sm);
    --ctl-h-xs: var(--ctl-h-touch-xs);
    --ctl-pad-x: var(--ctl-pad-x-lg);
  }
}

/* ── Button ─────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--space-2);
  height: var(--ctl-h);
  padding: 0 var(--ctl-pad-x);
  border-radius: var(--radius);
  border: 1px solid var(--border-default);
  background: var(--bg-surface);
  color: var(--fg-default);
  font-size: var(--fs-ctl);
  font-weight: var(--fw-medium);
  cursor: pointer;
  transition: background var(--dur-fast), border-color var(--dur-fast), color var(--dur-fast), box-shadow var(--dur-fast);
  white-space: nowrap;
  letter-spacing: -0.005em;
}
.btn:hover { background: var(--bg-subtle); border-color: var(--border-strong); }
.btn:focus-visible { outline: none; box-shadow: var(--ring-focus); }
/* 비활성 — 2026-09-09 실측: 부품에 규칙이 «아예 없어서» 활성과 픽셀 하나 안 달랐다.
   `cursor: pointer` 까지 그대로라 눌러도 되는 것처럼 보였다(`.btn` 과 `disabled` 를 같이
   쓰는 화면이 55개다).
   ⭐ 색을 바꾸지 않고 «흐리게 + 커서» 로만 알린다 — 그래야 `.btn-primary`·`.btn-green`
   같은 색 변종을 전부 다시 나열하지 않아도 된다.
   ⚠️ `pointer-events: none` 은 «안» 쓴다. 「왜 비활성인지」를 `title` 로 알리는 자리가
   있어서(실측 6곳이 `disabled` 옆에 `title` 을 둔다) 툴팁이 죽으면 안 된다. */
.btn:disabled, .btn[disabled] { opacity: 0.45; cursor: not-allowed; }

.btn-primary {
  background: var(--accent-500);
  color: var(--accent-fg);
  border-color: var(--accent-500);
}
.btn-primary:hover { background: var(--accent-600); border-color: var(--accent-600); }
.btn-primary:active { background: var(--accent-700); }

.btn-ghost { background: transparent; border-color: transparent; color: var(--fg-muted); }
.btn-ghost:hover { background: var(--bg-subtle); color: var(--fg-strong); }

.btn-danger { background: var(--bg-surface); border-color: var(--border-default); color: var(--danger-fg); }
.btn-danger:hover { background: var(--danger-bg); border-color: var(--danger-500); }

.btn-soft { background: var(--accent-soft-bg); color: var(--accent-soft-fg); border-color: transparent; }
.btn-soft:hover { background: var(--accent-100); }

.btn-sm { height: var(--ctl-h-sm); padding: 0 var(--ctl-pad-x-sm); font-size: var(--fs-ctl); border-radius: var(--radius-sm); }
.btn-xs { height: var(--ctl-h-xs); padding: 0 var(--space-3); font-size: var(--fs-ctl); border-radius: var(--radius-sm); }
/* 아이콘 버튼 — 정사각 히트영역. 테두리 없는 것은 `.btn-ghost` 와 같이 쓴다.
   ⭐ 안에 든 글리프(`×` · `✎` · `↗` · `★`)는 **글자가 아니라 그림**이라 같은 등급의
   글자보다 한 단 크다. 2026-09-09 에 손으로 그려져 있던 15곳을 세어 보니 본문(14~15px)
   이나 그 위를 썼지 라벨(12px)을 쓴 곳이 하나도 없었다 — 그 실측을 등급으로 옮겼다.
   ⚠️ 이 부품은 2026-09-09 까지 **쓰는 화면이 0개**였다. 화면들이 매번 손으로 그렸다. */
/* 선택 항목 카드 — 후보 목록에서 한 줄씩 고르는 자리. 내용이 길면 접히므로 **높이를
   내용이 정한다**. `.btn` 의 `nowrap`·가운데 정렬·고정 높이 셋을 되돌리는 변종이다. */
.btn-card {
  height: auto; padding: var(--space-3) var(--ctl-pad-x);
  justify-content: flex-start; text-align: left; white-space: normal;
}

/* ⚠️ `height` 를 «같이» 준다. width 만 주면 `.btn` 의 height 가 그대로 남아 정사각이
   깨진다 — 간편주문처럼 `.btn` 이 40px 인 곳에서 40×22 가 됐다(2026-09-09 실측). */
/* ⚠️ `.btn.btn-icon` 으로 «특이도를 올려» 쓴다. `.btn-icon` 만으로는 (0,1,0) 이라
   나중에 실리는 `simple.css` 의 `.btn` 이 padding 을 되살려 정사각이 깨졌다(실측 48×22). */
.btn.btn-icon { width: var(--ctl-h); height: var(--ctl-h); padding: 0; font-size: var(--fs-heading-sm); }
.btn.btn-icon.btn-sm { width: var(--ctl-h-sm); height: var(--ctl-h-sm); font-size: var(--fs-body); }
.btn.btn-icon.btn-xs { width: var(--ctl-h-xs); height: var(--ctl-h-xs); font-size: var(--fs-control); }

/* 링크처럼 쓰는 버튼 — `<button>` 이어야 하지만(폼 제출 · JS 동작) 보이기는 링크다.
   ⛔ `.btn` 과 «같이 쓰지 마라». 높이 `--ctl-h` 가 문장 흐름을 깬다 — 이것만 단독으로 붙인다.
   ⭐ `font: inherit` 은 일부러다. 링크는 문장 속에 있으므로 크기를 주변이 정한다.
   2026-09-09 까지 이런 자리 8곳이 크기를 손으로 적어 micro(11)~body(14) 로 갈려 있었다. */
.btn-link {
  display: inline; height: auto; padding: 0;
  border: none; background: none; color: var(--accent-600);
  font: inherit; cursor: pointer;
}
.btn-link:hover { text-decoration: underline; }
.btn-link.muted { color: var(--fg-muted); }
.btn-link.danger { color: var(--danger-fg); }

/* Button group */
.btn-group {
  display: inline-flex;
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius);
  padding: 2px;
  gap: 1px;
}
.btn-group > button {
  background: transparent;
  border: none;
  color: var(--fg-muted);
  font-size: var(--fs-control);
  font-weight: var(--fw-medium);
  padding: 3px 10px;
  border-radius: var(--radius-xs);
  cursor: pointer;
  transition: background var(--dur-fast), color var(--dur-fast);
}
.btn-group > button:hover { color: var(--fg-strong); background: var(--bg-subtle); }
.btn-group > button.active {
  background: var(--bg-surface);
  color: var(--fg-strong);
  box-shadow: var(--shadow-xs), 0 0 0 1px var(--border-default);
}

/* ── Form controls ──────────────────────────────────────────── */
/* ⭐ 전역 바닥 — 부품(`.input`)을 «안 쓰는» 컨트롤이 브라우저 기본으로 떨어지지 않게 한다.
   2026-09-09 실측: 입력칸이 있는 화면 136개 중 `.input` 을 쓰는 것은 14개(10%)뿐이었고
   전역 `input`/`select` 규칙은 **하나도 없었다.** 나머지는 OS 마다 다른 브라우저 기본이거나
   화면이 손으로 적은 값(여백만 227가지)이었다. 사방넷이 Element UI 로 거저 얻는 자리다.

   ⛔ `:where()` 를 빼지 마라. `:not()` 은 인자를 특이도에 «더해서»
   `input:not([type=checkbox])…` 가 클래스 다섯 개급(0,5,1)이 된다 — 화면별 클래스 규칙을
   전부 이겨 커스텀이 죽는다. `:where()` 는 특이도 0 이라 **누구에게나 진다.** 바닥은 바닥이다.
   ⚠️ 체크박스·라디오·파일·범위·색상은 뺀다 — 높이를 주면 위젯이 깨진다. */
input:where(:not([type="checkbox"], [type="radio"], [type="file"], [type="range"], [type="color"], [type="hidden"], [type="submit"], [type="button"])),
select:where(:not([multiple])),
textarea {
  font-family: inherit;
  font-size: var(--fs-ctl);
  color: var(--fg-default);
  /* ⭐ 2026-09-09 추가 — 테두리까지가 바닥이다. 그전엔 글자·높이만 줘서, 클래스가 없는
     입력칸 199곳이 **브라우저 기본 `inset` 회색 테두리에 모서리 0** 으로 남아 있었다
     (실측: `rgb(118,118,118)` · `radius 0`). 화면마다·OS마다 다르게 보이던 자리다.
     ⚠️ 여기까지가 바닥이고 그 이상(포커스 링·hover)은 `.input` 부품이 한다. */
  border: 1px solid var(--border-default);
  border-radius: var(--radius);
  background: var(--bg-surface);
}
input:where(:not([type="checkbox"], [type="radio"], [type="file"], [type="range"], [type="color"], [type="hidden"], [type="submit"], [type="button"])),
select:where(:not([multiple])) {
  height: var(--ctl-h);
  /* ⚠️ 높이가 고정이라 «세로» 여백은 0 이 맞다 — 주면 글자가 아래로 밀린다.
     이 한 줄이 없으면 화면이 인라인 `padding` 을 뗐을 때 브라우저 기본(1px 2px)으로
     떨어져 글자가 테두리에 붙는다. 사방넷 정본이 `4px 8px` 이고 높이 축은 `--ctl-h` 가
     이미 갖고 있으므로, 남는 것은 가로 `--ctl-pad-x` 뿐이다. */
  padding: 0 var(--ctl-pad-x);
}
/* `textarea` 는 높이가 «몇 줄 보일까» 라 `--ctl-h` 를 안 받는다 — 세로 여백을 직접 준다. */
textarea { padding: var(--space-2) var(--ctl-pad-x); }

.input, .select, .textarea {
  height: var(--ctl-h);
  padding: 0 var(--ctl-pad-x);
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius);
  font-size: var(--fs-ctl);
  color: var(--fg-default);
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
  width: 100%;
  min-width: 0;
}
.input::placeholder { color: var(--fg-faint); }
.input:hover, .select:hover, .textarea:hover { border-color: var(--border-strong); }
.input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--border-focus); box-shadow: var(--ring-focus); }
.textarea { height: auto; padding: var(--space-3) var(--space-4); line-height: var(--lh-normal); }
.select {
  appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg width='10' height='6' viewBox='0 0 10 6' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M1 1l4 4 4-4' fill='none' stroke='%2364748b' stroke-width='1.5' stroke-linecap='round'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 28px;
}
.input-sm, .select-sm { height: 26px; font-size: var(--fs-control); padding: 0 var(--space-3); padding-right: 24px; }
.input-sm.input { padding-right: var(--space-3); }
.input-num { text-align: right; font-variant-numeric: tabular-nums; }

/* Input with leading icon */
.input-search {
  position: relative;
  display: inline-flex; align-items: center;
}
.input-search > svg { position: absolute; left: 10px; color: var(--fg-faint); pointer-events: none; }
.input-search > input { padding-left: 32px; }
/* 오른쪽에 아이콘(스캔·지우기)이 겹쳐 앉는 입력칸 — 글자가 아이콘 밑으로 들어가지 않게
   그만큼 비운다. 밀도 조정이 아니라 «자리 비우기»다. */
.input-icon-right { padding-right: 28px; }


.field { display: flex; flex-direction: column; gap: var(--space-2); }
.field-label {
  font-size: var(--fs-control);
  font-weight: var(--fw-medium);
  color: var(--fg-default);
}
.field-hint { font-size: var(--fs-label); color: var(--fg-faint); }

/* ── Card / Panel ───────────────────────────────────────────── */
.card {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xs);
}
.card-pad { padding: var(--space-6) var(--space-7); }
.card-head {
  padding: var(--space-5) var(--space-6);
  border-bottom: 1px solid var(--border-subtle);
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-4);
}
.card-title { font-size: var(--fs-body-lg); font-weight: var(--fw-semibold); color: var(--fg-strong); letter-spacing: -0.005em; }
.card-sub { font-size: var(--fs-label); color: var(--fg-muted); }

/* ── Stat / KPI card ────────────────────────────────────────── */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}
.stat {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-5) var(--space-6);
  cursor: pointer;
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast), transform var(--dur-fast);
  display: flex; flex-direction: column; gap: 4px;
}
.stat:hover { border-color: var(--border-strong); box-shadow: var(--shadow-sm); }
.stat.active {
  border-color: var(--accent-500);
  box-shadow: 0 0 0 1px var(--accent-500), var(--shadow-sm);
}
/* 눌림 피드백은 클릭 가능한(링크) stat 카드에만 — 비링크 div.stat엔 영향 없음 */
a.stat:active { transform: scale(0.99); }
.stat-label {
  display: flex; align-items: center; gap: var(--space-2);
  font-size: var(--fs-control); font-weight: var(--fw-medium);
  color: var(--fg-muted);
}
.stat-label .dot {
  width: 6px; height: 6px; border-radius: var(--radius-pill);
  --dot: var(--accent-500); /* 기본. 틀(components/ui/_stat.html)이 style="--dot:…" 로 덮는다 — 같은 요소의 inline 이 이긴다 */
  background: var(--dot);
}
a.stat { text-decoration: none; color: inherit; }
.stat-value {
  font-size: var(--fs-metric);
  font-weight: var(--fw-semibold);
  color: var(--fg-strong);
  letter-spacing: -0.025em;
  line-height: var(--lh-tight);
  font-variant-numeric: tabular-nums;
}
.stat-sub {
  font-size: var(--fs-label);
  color: var(--fg-faint);
  display: flex; align-items: center; gap: var(--space-2);
}
.stat-delta-up { color: var(--success-500); font-weight: var(--fw-semibold); }
.stat-delta-down { color: var(--danger-500); font-weight: var(--fw-semibold); }

/* ── Badge / chip ───────────────────────────────────────────── */
.badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 1px 8px;
  border-radius: var(--radius-pill);
  font-size: var(--fs-label);
  font-weight: var(--fw-medium);
  background: var(--bg-subtle);
  color: var(--fg-muted);
  border: 1px solid var(--border-subtle);
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.badge .dot { width: 6px; height: 6px; border-radius: var(--radius-pill); background: currentColor; flex-shrink: 0; }
.badge-warning { background: var(--warning-bg); color: var(--warning-fg); border-color: transparent; }
.badge-danger  { background: var(--danger-bg);  color: var(--danger-fg);  border-color: transparent; }
.badge-info    { background: var(--info-bg);    color: var(--info-fg);    border-color: transparent; }
.badge-accent  { background: var(--accent-soft-bg); color: var(--accent-soft-fg); border-color: transparent; }
.badge-neutral { background: var(--bg-subtle); color: var(--fg-muted); }
/* 완료·성공 — 2026-08-28 에 추가했다. `.badge-green`(옛 벌)이 14곳에서 쓰이는데
   core 에 갈 자리가 없었다. 목업은 이 색을 `.badge-ok` 라 부르지만 값은 같고,
   여기 이름은 토큰 이름(--success-*)을 따르는 것이 나머지와 일관된다. */
.badge-success { background: var(--success-bg); color: var(--success-fg); border-color: transparent; }

.badge-outline { background: transparent; }
.badge-square  { border-radius: var(--radius-xs); padding: 1px 5px; font-size: var(--fs-micro); }

/* Status dot inline */
.status-dot {
  display: inline-block;
  width: 7px; height: 7px; border-radius: var(--radius-pill);
  margin-right: 6px;
  vertical-align: middle;   /* 글자 옆에 인라인으로 놓이는 자리가 있다 (_status_badge.html) */
  flex-shrink: 0;
}
.dot-pending    { background: var(--info-500); }
.dot-preparing  { background: var(--warning-500); }
.dot-shipping   { background: var(--accent-500); }
.dot-delivered  { background: var(--success-500); }
.dot-cancelled  { background: var(--fg-faint); }
.dot-backorder  { background: var(--danger-500); }

/* ── Tabs ───────────────────────────────────────────────────── */
.tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--border-subtle);
  margin-bottom: var(--space-6);
}
.tab {
  padding: var(--space-3) var(--space-5);
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
  color: var(--fg-muted);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  cursor: pointer;
  display: inline-flex; align-items: center; gap: var(--space-3);
  transition: color var(--dur-fast), border-color var(--dur-fast);
  background: transparent;
  border-left: none;
  border-right: none;
  border-top: none;
}
.tab:hover { color: var(--fg-strong); }
.tab.active { color: var(--accent-soft-fg); border-bottom-color: var(--accent-500); font-weight: var(--fw-semibold); }
.tab .count {
  font-size: var(--fs-label);
  font-variant-numeric: tabular-nums;
  padding: 1px 6px;
  background: var(--bg-subtle);
  border-radius: var(--radius-pill);
  color: var(--fg-muted);
}
.tab.active .count { background: var(--accent-100); color: var(--accent-soft-fg); }

/* Segmented (filter pills row) */
.seg {
  display: inline-flex;
  background: var(--bg-subtle);
  border-radius: var(--radius);
  padding: 2px;
  gap: 1px;
  flex-wrap: wrap;
}
.seg > button, .seg > a, .seg > .seg-item {
  background: transparent;
  border: none;
  padding: 4px 10px;
  font-size: var(--fs-control);
  font-weight: var(--fw-medium);
  color: var(--fg-muted);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background var(--dur-fast), color var(--dur-fast);
  text-decoration: none;
  display: inline-flex; align-items: center;
}
.seg > button:hover, .seg > a:hover, .seg > .seg-item:hover { color: var(--fg-strong); }
.seg > button.active, .seg > a.active, .seg > .seg-item.active {
  background: var(--bg-surface);
  color: var(--fg-strong);
  box-shadow: var(--shadow-xs);
}

/* ── Flow steps (order pipeline) ────────────────────────────── */
.flow {
  display: flex; align-items: stretch; gap: 0;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-2);
  margin-bottom: var(--space-5);
  overflow-x: auto;
}
.flow-step {
  display: flex; flex-direction: column; align-items: flex-start;
  gap: 2px;
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius);
  cursor: pointer;
  position: relative;
  flex: 1;
  min-width: 0;
  transition: background var(--dur-fast);
}
.flow-step:hover { background: var(--bg-subtle); }
.flow-step.active { background: var(--accent-soft-bg); color: var(--accent-soft-fg); }
.flow-step.active .flow-step-count,
.flow-step.active .flow-step-label { color: var(--accent-soft-fg); }
.flow-step-count {
  font-size: var(--fs-page-title);
  font-weight: var(--fw-semibold);
  color: var(--fg-strong);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  letter-spacing: -0.015em;
}
.flow-step-label {
  font-size: var(--fs-control);
  color: var(--fg-muted);
  font-weight: var(--fw-medium);
}
/* 지선 구분선 — 본 흐름에서 갈라지는 칸(입고대기·취소) 앞에 선다.
   전엔 화면이 `.flow-arrow` 에 `style="opacity:0.4"` 를 붙여 `|` 를 찍었다. */
.flow-sep { width: 1px; align-self: stretch; margin: 8px 6px;
            background: var(--border-subtle); flex-shrink: 0; }
.flow-arrow {
  align-self: center;
  color: var(--border-strong);
  font-size: var(--fs-body);
  padding: 0 2px;
  flex: 0 0 auto;
}
/* 흐름 밖 칸(취소·거절) — 눈이 먼저 가면 안 된다.
   🚨 2026-09-09 에 자식 이름을 `.flow-lbl` → `.flow-step-label` 로 통일하면서 `.muted`
   쪽 짝을 안 고쳐, 주문현황 「취소 44건」이 배송완료와 같은 굵기로 나오고 있었다.
   CSS 는 짝이 어긋나도 조용히 안 먹는다 — 콘솔에도 안 뜬다. */
.flow-step.muted .flow-step-count,
.flow-step.muted .flow-step-label { color: var(--fg-faint); }

/* 폰 — 칸을 좁히고 숫자를 줄인다. 2026-09-09 에 `base.css` 에서 옮겨 왔다(그쪽은
   `.admin-flow-steps` 컨테이너 시절 것이라 자식 이름도 달랐다). ⛔ 여기가 유일한 자리다. */
@media (max-width: 768px) {
  .flow { padding: 4px; }
  .flow-step { padding: 8px; }
  .flow-step-count { font-size: var(--fs-glyph); }
  .flow-step-label { font-size: var(--fs-label); }
  .flow-arrow { font-size: var(--fs-body-lg); padding: 0 2px; }
  .flow-sep { margin: 8px 4px; }
}

/* ── Toolbar / filter bar ───────────────────────────────────── */
.toolbar {
  display: flex; align-items: center; gap: var(--space-3);
  margin-bottom: var(--space-4);
  flex-wrap: wrap;
}
.toolbar .input, .toolbar .select { height: 30px; font-size: var(--fs-control); }
.toolbar > .spacer { flex: 1; }
.toolbar .filter-count {
  font-size: var(--fs-label);
  color: var(--fg-muted);
  font-variant-numeric: tabular-nums;
}

/* Bulk action bar */
.bulk-bar {
  display: flex; align-items: center; gap: var(--space-3);
  /* 목록 위에 붙어 따라온다 — base.css 에 있던 세 줄을 2026-08-28 에 여기로 합쳤다.
     ⚠️ base 에는 `color: var(--fg-inverse)`(흰 글자)도 있었다. 그건 짙은 배경 시절의
     값이고 지금 배경은 옅은 파랑이라 안 가져왔다. 지금까지 안 들킨 것은 마크업이
     자식마다 인라인 color 를 박아 뒀기 때문이다. */
  /* ⚠️ 56px 은 `--topbar-h`(48px)가 아니다. base.css 에 있던 값을 그대로 옮겼다 —
     토큰으로 바꾸면 8px 올라가 탑바에 겹칠 수 있어 렌더로 재기 전엔 안 건드린다. */
  position: sticky; top: 56px; z-index: var(--z-sticky);
  padding: var(--space-3) var(--space-5);
  background: var(--accent-soft-bg);
  border: 1px solid var(--accent-200);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-4);
  font-size: var(--fs-control);
}
.bulk-bar .count {
  font-weight: var(--fw-semibold);
  color: var(--accent-soft-fg);
}
.bulk-bar .sep { width: 1px; height: 18px; background: var(--accent-200); }
/* base.css 에서 같이 온 줄 — `.bulk-bar .btn`(0,2,0)이 `.btn-sm`(0,1,0)을 이겨서
   이 바 안의 버튼만 더 납작하다. 지우면 버튼이 커진다. */
.bulk-bar .btn { font-size: var(--fs-label); padding: 4px 12px; }

/* ── Data table ─────────────────────────────────────────────── */
.table-wrap {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  overflow: auto;
  max-width: 100%;
}
/* 목록 표 = 「C 회색 미니멀」 — 2026-10-30 사장님(#1953). Tabulator 표(`tabulator_theme.css`)와 같은 값.
   머리 회색 바탕 · 12px 600 --fg-muted · 가로줄만(세로줄 없음) · 칸 9px 14px · 바깥 테두리 + 둥근 모서리 · 행 hover 파랑 옅게.
   ⚠️ 입력표(엑셀형)·상세 화면 안 작은 표는 `.table.table-grid` 로 뺀다 — 아래. 인쇄 양식은 `.table` 을 안 쓴다.
   (그 전 2026-08-28~10-30 은 파란 머리 + 칸 구분선이었다. 그 모양은 `.table-grid` 가 그대로 들고 있다.) */
.table {
  width: 100%;
  font-size: var(--fs-body);
  color: var(--fg-default);
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
}
.table-wrap > .table { border: 0; border-radius: 0; }  /* 껍데기가 이미 테두리를 그린다 */
/* --fg-muted 는 회색 머리(--bg-subtle) 위에서 AA 를 넘는다 — 파란 머리였을 때만 4.2:1 로 모자랐다. */
.table thead th {
  position: sticky; top: 0;
  background: var(--bg-subtle);
  color: var(--fg-muted);
  font-weight: var(--fw-semibold);
  text-align: left;
  font-size: var(--fs-label);
  padding: 9px 14px;
  border-bottom: 1px solid var(--border-subtle);
  white-space: nowrap;
  z-index: 1;
}
/* 둥근 모서리 밖으로 머리·마지막 줄 바탕이 삐져나오지 않게(separate 표라 셀이 모서리를 안 따른다) */
.table:not(.table-grid) thead tr:first-child th:first-child { border-top-left-radius: calc(var(--radius-lg) - 1px); }
.table:not(.table-grid) thead tr:first-child th:last-child { border-top-right-radius: calc(var(--radius-lg) - 1px); }
.table:not(.table-grid) tbody:last-of-type tr:last-child td:first-child { border-bottom-left-radius: calc(var(--radius-lg) - 1px); }
.table:not(.table-grid) tbody:last-of-type tr:last-child td:last-child { border-bottom-right-radius: calc(var(--radius-lg) - 1px); }
.table thead th.sortable { cursor: pointer; user-select: none; }
.table thead th.sortable:hover { color: var(--fg-strong); }

/* 헤더 클릭 클라이언트 정렬 (static/js/common/client_sort.js) — 페이지네이션 없는 표 전용.
   화살표는 aria-sort 로 그린다: 상태를 클래스와 속성 두 곳에 두지 않는다. */
table[data-client-sort] thead th[data-sort] { cursor: pointer; user-select: none; }
table[data-client-sort] thead th[data-sort]:hover { color: var(--fg-strong); }
table[data-client-sort] thead th[data-sort]::after { content: ''; }
table[data-client-sort] thead th[aria-sort='ascending']::after { content: ' \25B2'; }
table[data-client-sort] thead th[aria-sort='descending']::after { content: ' \25BC'; }
.table thead th.num { text-align: right; }
.table thead th.center { text-align: center; }
.table tbody td {
  padding: 9px 14px;
  border-bottom: 1px solid var(--border-subtle);
  vertical-align: middle;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.table tbody:last-of-type tr:last-child td { border-bottom: none; }  /* 줄마다 tbody 인 표(펼침행)도 줄 선이 남게 마지막 tbody 만 */
.table tbody tr { transition: background var(--dur-fast); }
.table tbody tr:hover td { background: var(--accent-50); }
.table tbody tr.is-inactive td { color: var(--fg-faint); background: var(--bg-app); }
.table tbody td.num { text-align: right; font-variant-numeric: tabular-nums; }
.table tbody td.center { text-align: center; }
.table tbody td.fg-strong { color: var(--fg-strong); font-weight: var(--fw-medium); }
.table tbody td.fg-muted { color: var(--fg-muted); }
.table tbody td.mono { font-family: var(--font-mono); font-size: var(--fs-micro); }
/* 합계 줄(tfoot) — 목록 표만. 상세 표(.table-grid)는 화면이 직접 정한다 */
.table:not(.table-grid) tfoot td,
.table:not(.table-grid) tfoot th { padding: 9px 14px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.table:not(.table-grid) tfoot .num { text-align: right; }
.table tbody tr.row-summary td {
  background: var(--bg-subtle);
  font-weight: var(--fw-semibold);
  color: var(--fg-strong);
}
.table tbody tr.row-group td {
  background: var(--accent-soft-bg);
  font-weight: var(--fw-semibold);
  color: var(--accent-soft-fg);
  font-size: var(--fs-control);
  cursor: pointer;
}

/* .table.compact — 열이 많아 한 화면에 다 넣어야 하는 대시보드용 표.
   2026-08-29 정본화: agency_dashboard 와 quarterly_dashboard 가 같은 것을 각자 정의하고
   있었고 좌우 여백만 10px vs 12px 로 갈려 있었다. 10px 로 모은다.
   2026-10-30 C(#1953): 모양은 공용 .table 그대로(회색 머리·가로줄만), 칸 여백만 좁다.
   collapse 라 둥근 모서리는 안 먹는다 — 대시보드 칸 테두리(.ad-*)가 collapse 에 기대고 있어 그대로 둔다.
   ⛔ 화면 CSS 에서 이 값을 다시 적지 마라. 필요하면 여기를 고친다. */
.table.compact { border-collapse: collapse; }
.table.compact thead th { padding: 8px 10px; }
.table.compact tbody td { padding: 6px 10px; }
@media (max-width: 768px) {
  .table.compact thead th,
  .table.compact tbody td { padding: 6px 8px; font-size: var(--fs-label); }
}

/* Inline-edit cell */
.cell-input {
  width: 100%;
  height: 24px;
  padding: 0 6px;
  font-size: var(--fs-control);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-xs);
  color: var(--fg-default);
  font-variant-numeric: tabular-nums;
  transition: border-color var(--dur-fast), background var(--dur-fast);
}
.cell-input:hover { border-color: var(--border-default); background: var(--bg-surface); }
.cell-input:focus {
  outline: none;
  border-color: var(--accent-500);
  background: var(--bg-surface);
  box-shadow: var(--ring-focus);
}
.cell-input.num { text-align: right; }
.cell-select {
  width: 100%;
  height: 24px;
  padding: 0 22px 0 6px;
  font-size: var(--fs-control);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-xs);
  color: var(--fg-default);
  appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg width='8' height='5' viewBox='0 0 10 6' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M1 1l4 4 4-4' fill='none' stroke='%2394a3b8' stroke-width='1.5' stroke-linecap='round'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 6px center;
  cursor: pointer;
}
.cell-select:hover { border-color: var(--border-default); background-color: var(--bg-surface); }
.cell-select:focus { outline: none; border-color: var(--accent-500); background-color: var(--bg-surface); box-shadow: var(--ring-focus); }

/* Cat dots (book categories) */
.cat-pill {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: var(--fs-label);
  color: var(--fg-default);
}
.cat-pill .dot { width: 6px; height: 6px; border-radius: var(--radius-pill); flex-shrink: 0; }
.cat-pill.computer    .dot { background: var(--cat-computer); }
.cat-pill.afterschool .dot { background: var(--cat-afterschool); }
.cat-pill.english     .dot { background: var(--cat-english); }
.cat-pill.general     .dot { background: var(--cat-general); }

/* Checkbox styled (column) */
.col-chk { width: 32px; text-align: center; }
.col-chk input { width: 13px; height: 13px; }

/* Frozen first col */
.table.frozen-first thead th:first-child,
.table.frozen-first tbody td:first-child {
  position: sticky; left: 0;
  background: var(--bg-surface);
  z-index: 2;
}
.table.frozen-first thead th:first-child { background: var(--bg-subtle); z-index: 3; }
.table.frozen-first tbody tr:hover td:first-child { background: var(--accent-50); }

/* .table.table-grid — 목록이 아닌 표: 입력표(엑셀형 줄 입력·설정 줄 편집) · 상세 화면/서랍/모달 안 작은 표.
   2026-10-30 사장님 <q>입력표 = B 파란 격자 — 이번엔 손대지 않음 · 상세 안 작은 표 = 그대로</q>(#1953).
   그래서 C 전의 공용 .table 모양(파란 머리 --psim-head · 머리 칸 구분선 · 7px 10px)을 그대로 들고 있다.
   입력표를 B(전 칸 격자)로 바꿀 때는 여기 한 곳을 고친다. */
.table.table-grid { background: none; border: 0; border-radius: 0; }
.table.table-grid thead th {
  background: var(--psim-head);
  color: var(--fg-default);
  font-size: var(--fs-control);
  padding: 8px 10px;
  letter-spacing: 0.01em;
  border-bottom: 1px solid var(--psim-line);
  border-right: 1px solid var(--psim-line);  /* 칸 구분선 — 2026-08-29 사장님. 마지막 칸만 뺀다 */
}
.table.table-grid thead th:last-child { border-right: none; }
.table.table-grid tbody td { padding: 7px 10px; }
.table.table-grid tbody tr:hover td { background: var(--bg-subtle); }

/* Numeric strong (price) */
.amt { font-variant-numeric: tabular-nums; }
.amt-strong { font-weight: var(--fw-semibold); color: var(--fg-strong); }
.amt-positive { color: var(--success-500); }
.amt-negative { color: var(--danger-500); }
.amt-neutral { color: var(--fg-muted); }

/* Pagination */
.pagination {
  display: flex; align-items: center; justify-content: center;
  gap: var(--space-3);
  margin-top: var(--space-5);
  font-size: var(--fs-control);
  color: var(--fg-muted);
}
.pagination .pg {
  min-width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--border-default);
  background: var(--bg-surface);
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: var(--fs-control);
  color: var(--fg-muted);
  padding: 0 8px;
}
.pagination .pg:hover { border-color: var(--border-strong); color: var(--fg-strong); }
.pagination .pg.current { background: var(--accent-500); border-color: var(--accent-500); color: var(--accent-fg); font-weight: var(--fw-semibold); }
.pagination .pg.disabled { color: var(--fg-faint); cursor: default; background: var(--bg-subtle); }
/* components/ui/_pagination.html 감싸개 — 옛 인라인 style 을 같은 값으로 옮겼다 */
.pagination-row { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 16px 0; }
.pagination-row .pg-summary { font-size: var(--fs-label); color: var(--fg-faint); }
/* components/ui/_sort_link.html */
.sort-link { color: inherit; text-decoration: none; cursor: pointer; white-space: nowrap; }

/* ── Alert / message ────────────────────────────────────────── */
.alert {
  display: flex; align-items: flex-start; gap: var(--space-3);
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius);
  font-size: var(--fs-control);
  border: 1px solid transparent;
  margin-bottom: var(--space-4);
}
.alert-info    { background: var(--info-bg);    color: var(--info-fg); }
.alert-warning { background: var(--warning-bg); color: var(--warning-fg); }
.alert-danger  { background: var(--danger-bg);  color: var(--danger-fg); }
.alert-success { background: var(--success-bg); color: var(--success-fg); } /* 2026-10-29 — 전엔 .msg-success · .badge-success 에만 있었다 */
.alert .alert-action { margin-left: auto; }

/* ── Empty state ───────────────────────────────────────────── */
.empty {
  padding: 60px 20px;
  text-align: center;
  color: var(--fg-faint);
}
.empty .empty-icon {
  font-size: 32px; opacity: 0.4; margin-bottom: var(--space-3);
}
.empty .empty-title { font-size: var(--fs-body); color: var(--fg-muted); }
/* 표 안 0건 행 — components/ui/_empty_state.html (옛 인라인 style 과 같은 값) */
.table-empty > td { text-align: center; padding: var(--space-10) var(--space-7); color: var(--fg-faint); }
.table-empty .empty-hint { margin-top: var(--space-2); font-size: var(--fs-label); }

/* ── Disclosure / accordion row in tables ──────────────────── */
.chev {
  display: inline-block;
  transition: transform var(--dur) var(--ease-out);
  color: var(--fg-faint);
  font-size: var(--fs-pico);
  width: 10px;
}
.chev.open { transform: rotate(90deg); }

/* ── Section header (between rows of cards) ─────────────────── */
.section-label {
  font-size: var(--fs-label);
  font-weight: var(--fw-semibold);
  color: var(--fg-faint);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: var(--space-7) 0 var(--space-3);
  display: flex; align-items: center; gap: var(--space-3);
}
.section-label .line { flex: 1; height: 1px; background: var(--border-subtle); }

/* ── Form grid ──────────────────────────────────────────────── */
.form-grid {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 10px 14px;
  align-items: center;
}
.form-grid .field-label { color: var(--fg-default); }

/* ── Util ────────────────────────────────────────────────────── */
.hstack { display: flex; align-items: center; gap: var(--space-3); }
.vstack { display: flex; flex-direction: column; gap: var(--space-3); }
.muted  { color: var(--fg-muted); }
.faint  { color: var(--fg-faint); }
/* 표 위 결과 건수 — 필터가 걸린 표에서 이게 없으면 "데이터가 없다"고 오판한다(UI_GUIDE §5).
   월별확인 콘솔의 .mc-filterstate 를 표 일반용으로 줄인 것. */
.list-count   { margin-bottom: 6px; font-size: var(--fs-control); color: var(--fg-muted); }
.list-count b { color: var(--fg-default); font-variant-numeric: tabular-nums; }
.strong { color: var(--fg-strong); }
.right  { text-align: right; }
.center { text-align: center; }
.spacer { flex: 1; }
.divider-v { width: 1px; height: 16px; background: var(--border-subtle); }
.nowrap { white-space: nowrap; }
.truncate { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ──────────────────────────────────────────────────────────────
   v1 호환 alias (base.css 의 .btn-* 변형을 v2 톤으로 매핑)
   ────────────────────────────────────────────────────────────── */
.btn-outline { background: var(--bg-surface); border-color: var(--border-default); color: var(--fg-default); }
.btn-outline:hover { background: var(--bg-subtle); border-color: var(--border-strong); }
.btn-dark { background: oklch(0.32 0.02 250); border-color: oklch(0.32 0.02 250); color: var(--bg-surface); }
.btn-dark:hover { background: oklch(0.25 0.02 250); border-color: oklch(0.25 0.02 250); }
.btn-blue { background: var(--accent-500); border-color: var(--accent-500); color: var(--accent-fg); }
.btn-blue:hover { background: var(--accent-600); border-color: var(--accent-600); }
.btn-red { background: var(--danger-500); border-color: var(--danger-500); color: var(--bg-surface); }
.btn-red:hover { background: oklch(0.55 0.18 25); border-color: oklch(0.55 0.18 25); }
.btn-gray { background: var(--fg-muted); border-color: var(--fg-muted); color: var(--bg-surface); }
.btn-gray:hover { background: var(--fg-default); border-color: var(--fg-default); }
.btn-green { background: var(--success-500); border-color: var(--success-500); color: var(--bg-surface); }
.btn-green:hover { background: oklch(0.55 0.16 150); border-color: oklch(0.55 0.16 150); }
.btn-purple { background: oklch(0.58 0.17 300); border-color: oklch(0.58 0.17 300); color: var(--bg-surface); }
.btn-purple:hover { background: oklch(0.50 0.17 300); border-color: oklch(0.50 0.17 300); }
.btn-teal { background: oklch(0.48 0.09 190); border-color: oklch(0.48 0.09 190); color: var(--bg-surface); }
.btn-teal:hover { background: oklch(0.42 0.09 190); border-color: oklch(0.42 0.09 190); }

/* base.css 의 .page-title 단순 호환 (v2 .page-title 우선이지만 fallback) */
.subtitle { font-size: var(--fs-control); color: var(--fg-muted); font-weight: var(--fw-regular); margin-left: 6px; }

/* base.css 의 .data-table 호환 — 엑셀 헤더 */
.data-table { width: 100%; font-size: var(--fs-control); border-collapse: separate; border-spacing: 0; }
.data-table th { background: var(--psim-head); color: var(--fg-strong); font-weight: var(--fw-semibold); padding: 6px 8px; text-align: left; border: 1px solid var(--psim-line); }
.data-table td { padding: 5px 8px; border-bottom: 1px solid var(--border-subtle); font-variant-numeric: tabular-nums; }
.data-table td.num, .data-table th.num { text-align: right; }
.data-table tr:hover td { background: var(--bg-subtle); }

/* 표 인라인 셀 편집 — `static/js/common/cell_edit.js` 가 붙이는 상태 3종 (2026-07-31).
   전에는 화면마다 배경색을 직접 조작하거나(복구를 잊어 초록이 영구히 남기도 했다)
   아무 표시가 없었다. 여기가 SSOT — 개별 화면에서 다시 칠하지 말 것. */
.cell-edit { transition: border-color 0.15s, opacity 0.15s; }
.cell-edit.is-saving { opacity: 0.5; }
.cell-edit.is-saved { border-color: var(--success-500); box-shadow: 0 0 0 2px var(--success-bg); }
.cell-edit.is-error { border-color: var(--danger-500); box-shadow: 0 0 0 2px var(--danger-bg); }

/* 아코디언 행 펼침 미니표 (반품·주문 상세 공용) */
/* ── 아코디언 펼침 패널 (.acc-*) ──────────────────────────────
   주문 목록(order-list.js)·반품 목록(_return_expand_card.html)·업체 대시보드가
   **한 벌**을 쓴다. 원래 order_list_admin.css 에만 있어서 반품은 표(.expand-table)로
   따로 그려졌고, 같은 「펼치면 나오는 교재 목록」이 화면마다 달라 보였다
   (사장님 2026-08-30 <q>주문에서는 이쁘게 나오는데 왜 반품에서는 이딴 표로 나오냐, 통일시켜야지</q>).
   ⛔ 한쪽 화면만 보고 고치지 마라 — 세 화면이 같이 바뀐다. */
@keyframes accSlide { from{opacity:0;transform:translateY(-6px)} to{opacity:1;transform:translateY(0)} }
/* 아코디언 패널 */
.acc-panel { padding:16px 18px; border-top:2px solid var(--accent-500); animation:accSlide .2s ease; }
.acc-header { margin-bottom:12px; }
.acc-info-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:6px 16px; }
/* 긴 주소가 grid 칸(minmax 200px)을 넘쳐 옆 칸 글자 위에 겹쳐 그려지던 것을 막는다(2026-08-20).
   범인은 base.css 의 `table.data-table td { white-space:nowrap }` — 아코디언 패널이 td 안에
   있어 상속받는다. 그 전역 규약은 표 전체가 쓰므로 건드리지 말고 여기서만 되돌린다.
   min-width:0 도 함께 필요하다 — grid·flex 아이템의 기본값 auto 는 안 줄어든다.
   같은 규칙이 order_list.css 에도 있다(두 파일이 화면마다 따로 실린다). */
.acc-info-item { display:flex; align-items:baseline; gap:6px; font-size:var(--fs-label); min-width:0; }
.acc-info-label { color:var(--fg-faint); flex-shrink:0; min-width:40px; }
.acc-info-val { color:var(--fg-default); min-width:0; white-space:normal; overflow-wrap:anywhere; }
/* 메모처럼 긴 문장은 200px 칸 하나에 갇히면 7줄로 접힌다(사장님 2026-09-03 <q>왜 이렇게 잘려서
   나오는 거야</q>). 격자는 「반품번호·거래월」 같은 짧은 값용이므로, 긴 값만 한 줄을 통째로 쓴다.
   반품 펼침(_return_expand_card.html)·주문 펼침(order-list.js) 둘 다 이 클래스를 쓴다. */
.acc-info-item-wide { grid-column:1 / -1; }

.acc-items { background:var(--bg-surface); border:1px solid var(--border-subtle); border-radius:8px; overflow:hidden; margin-bottom:12px; }
.acc-item-row { display:grid; grid-template-columns:1fr auto 50px 80px; align-items:center; padding:8px 14px; border-bottom:1px solid var(--border-subtle); font-size:var(--fs-control); }
.acc-item-row:last-of-type { border-bottom:none; }
.acc-item-name { font-weight:500; color:var(--fg-default); }
.acc-teacher-tag { color:var(--teacher-copy-500); font-size:var(--fs-nano); font-weight:700; }
/* 과목(시리즈) 배지 — 주문 펼침(order-list.js)과 주문 상세 교재표가 같이 쓴다.
   펼침에서는 교재명 칸 안에 넣는다: .acc-item-row 의 grid 열을 늘리면 반품 펼침 등
   같은 클래스를 쓰는 화면이 같이 깨진다(2026-09-03). */
.series-tag {
  display:inline-block; margin-right:6px; padding:1px 6px;
  background:var(--bg-subtle); color:var(--fg-muted);
  border:1px solid var(--border-subtle); border-radius:var(--radius-sm);
  font-size:var(--fs-nano); font-weight:var(--fw-semibold); white-space:nowrap;
}
.acc-item-pub { color:var(--fg-faint); font-size:var(--fs-micro); text-align:right; padding-right:12px; }
.acc-item-qty { text-align:center; color:var(--fg-muted); font-size:var(--fs-label); }
.acc-item-amt { text-align:right; font-weight:600; color:var(--fg-default); }
.acc-total-row { display:flex; justify-content:space-between; padding:10px 14px; background:var(--bg-app); border-top:1px solid var(--border-subtle); font-size:var(--fs-control); font-weight:600; color:var(--fg-muted); }
.acc-total-val { font-size:var(--fs-body-lg); font-weight:700; color:var(--accent-600); }

.acc-actions { display:flex; gap:6px; align-items:center; flex-wrap:wrap; }

/* 반품 변형 — 마지막 칸이 금액이 아니라 「확정 권수」다. 80px 는 금액용이라 좁힌다. */
.acc-item-row-return { grid-template-columns:1fr auto 56px 64px; }
.acc-item-row-return .acc-item-amt { font-weight:600; color:var(--fg-default); }
/* 머리글 행 — 신청/확정 두 숫자를 라벨 없이는 못 읽는다. */
.acc-item-head { background:var(--bg-app); font-size:var(--fs-micro); color:var(--fg-faint); }
.acc-item-head .acc-item-name,
.acc-item-head .acc-item-pub,
.acc-item-head .acc-item-qty,
.acc-item-head .acc-item-amt { font-weight:600; color:var(--fg-faint); font-size:var(--fs-micro); }
.acc-btn-muted { color:var(--fg-faint)!important; font-size:var(--fs-micro)!important; }
.acc-tracking-input { padding:5px 10px; border:1px solid var(--border-default); border-radius:5px; font-size:var(--fs-label); width:140px; outline:none; transition:border-color .15s; }
.acc-tracking-input:focus { border-color:var(--border-focus); box-shadow:var(--ring-focus); }

@media (max-width:768px) {
  .acc-info-grid { grid-template-columns:1fr; }
  .acc-item-row { grid-template-columns:1fr 50px 70px; }
  .acc-item-pub { display:none; }
  .acc-actions { gap:4px; }
  .acc-tracking-input { width:120px; }
}

.expand-cell { padding: 0; background: var(--bg-subtle); }
/* .expand-card/-meta/-table/-more 는 2026-08-30 에 걷었다 — 반품 펼침이 위 .acc-* 로
   통일되면서 마지막 사용처가 사라졌다(사장님 「이거 통일시켜야지」).
   .expand-cell·.expand-caret 는 남는다 — _return_expand_row.html 의 td 와 여닫이 화살표가 쓴다. */

/* 행 클릭으로 안 펼쳐지는 칸(체크박스·운송장·액션 — stopPropagation 이 걸린 자리).
   행 전체에 cursor:pointer 가 걸려 있어, 이걸 안 붙이면 "손가락 커서인데 눌러도 안 열리는"
   칸이 생긴다. 2026-08-14 사장님: "이거 왜 계속 되었다 안 되었다 해?" 의 정체가 이것. */
.data-table tr .no-expand { cursor: default; }

/* 펼침 화살표 — 회색 점 하나라 클릭해서 펴는 것인 줄 몰랐다(같은 날 지적). */
.expand-caret { display: inline-block; width: 12px; color: var(--fg-muted); font-weight: 700; }

/* base.css 의 .content-box */
.content-box { background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); padding: var(--space-4); }

/* base.css 의 메시지 박스 */
.msg-box { padding: 10px 14px; border: none; border-radius: var(--radius-md); margin-bottom: var(--space-3); font-size: var(--fs-body); }
.msg-info { background: var(--accent-soft-bg); color: var(--accent-soft-fg); border-left: 3px solid var(--accent-500); }
.msg-success { background: var(--success-bg); color: var(--success-fg); border-left: 3px solid var(--success-500); }
.msg-warning { background: var(--warning-bg); color: var(--warning-fg); border-left: 3px solid var(--warning-500); }
.msg-error { background: var(--danger-bg); color: var(--danger-fg); border-left: 3px solid var(--danger-500); }

/* ──────────────────────────────────────────────────────────────
   Summary strip — 5카드 grid (회계 보드·매출거래내역 공용)
   ────────────────────────────────────────────────────────────── */
.summary-strip {
  display: flex; flex-wrap: wrap;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  overflow: hidden; margin-bottom: var(--space-5);
}
.summary-strip .summary-cell { flex: 1; min-width: 120px; }
.summary-cell { padding: 14px 18px; border-right: 1px solid var(--border-subtle); }
.summary-cell:last-child { border-right: none; }
.summary-cell .lbl { font-size: var(--fs-label); color: var(--fg-muted); font-weight: var(--fw-semibold); }
.summary-cell .val {
  font-size: var(--fs-page-title); font-weight: var(--fw-bold); color: var(--fg-strong);
  margin-top: 4px; letter-spacing: -0.02em; line-height: 1.2;
  font-variant-numeric: tabular-nums;
}
.summary-cell .sub { font-size: var(--fs-micro); color: var(--fg-faint); margin-top: 2px; }
.summary-cell.accent .val { color: var(--accent-soft-fg); }
.summary-cell.positive .val { color: var(--success-500); }
.summary-cell.negative .val { color: var(--danger-500); }

/* ──────────────────────────────────────────────────────────────
   Price chips — 거래내역 시리즈 단가·공급률 인라인 칩
   ────────────────────────────────────────────────────────────── */
/* ⚠️ gap·margin-bottom 은 components_sian.css 에서 온 값이다 — sian 이 core 보다
   **나중에** 로드돼서 실제 화면은 sian 의 8px/12px 를 받고 있었다. 값을 여기로 합쳤다. */
.price-chips { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 12px; }
.price-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px;
  background: var(--success-bg);
  border: 1px solid var(--border-success);
  border-radius: var(--radius, 6px);
  font-size: var(--fs-control); white-space: nowrap; color: var(--fg-default);
}
.price-chip b { color: var(--success-500); font-weight: var(--fw-bold); }
.price-chip.rate-chip { background: var(--bg-subtle); border-color: var(--border-default); }
.price-chip.rate-chip b { color: var(--accent-600); }
.price-chip-sep { width: 1px; height: 18px; background: var(--border-default); margin: 0 2px; }

/* 규칙표에서 「이 줄은 지금 아무 일도 안 한다」 — 위 순위의 절대값 규칙이 최종값을 정한 줄.
   가산(+%p)이 조용히 증발하는 것을 화면이 말해주지 않으면 사장님은 버그로 읽는다. */
.rate-rule-shadowed {
  display: inline-block; margin-left: 5px;
  padding: 1px 6px; border-radius: var(--radius-sm);
  background: var(--warning-bg); color: var(--warning-fg);
  font-size: var(--fs-label); font-weight: var(--fw-medium); white-space: nowrap;
}
/* 규칙 줄 지우기 — 인라인 확인. confirm() 을 안 쓰는 이유는 ledger_rate_rules.js 주석. */
.rate-rule-confirm {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: var(--fs-label); color: var(--fg-muted); white-space: nowrap;
}
/* 전체 업체 규칙을 건드렸다 — 저장하면 남의 업체 가격도 함께 바뀐다는 경고. */
.rate-rule-warn {
  padding: 1px 6px; border-radius: var(--radius-sm);
  background: var(--warning-bg); color: var(--warning-fg);
  font-size: var(--fs-label); font-weight: var(--fw-medium);
}

/* ── Modal field (label + input vertical pair) ──────────────── */
.modal-field-label { font-size: var(--fs-control); color: var(--fg-muted); }
.modal-field-label .req { color: var(--danger-500); }
.modal-shell {
  position: fixed;
  inset: 0;
  background: var(--bg-overlay);
  z-index: var(--z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
}
.modal-shell[hidden] { display: none; }
/* 중첩 모달의 앞층 — 기본층 바로 위. `components_shell.css` 가 쓰는
   `calc(var(--z-topbar) + 1)` 과 같은 관례다. */
.modal-shell-front { z-index: calc(var(--z-modal) + 1); }
.modal-panel {
  background: var(--bg-surface);
  border-radius: var(--radius-lg);
  padding: 22px 26px;
  width: min(400px, 92vw);
  box-shadow: var(--shadow-lg);
}
.modal-panel-sm { width: min(380px, 92vw); padding: 20px 24px; }
.modal-panel-wide { width: min(900px, 94vw); padding: 14px 16px; }
.modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}
.modal-title {
  margin: 0;
  font-size: var(--fs-heading-sm);
  font-weight: var(--fw-bold);
  color: var(--fg-strong);
}
.modal-title-success { color: var(--success-500); }
.modal-close {
  width: 28px;
  height: 28px;
  border: 0;
  background: transparent;
  color: var(--fg-faint);
  font-size: var(--fs-glyph);
  line-height: 1;
  cursor: pointer;
}
.modal-close:hover { color: var(--fg-strong); }
.modal-form,
.modal-fields {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.modal-fields { gap: 12px; }
.modal-title + .modal-form,
.modal-title + .modal-fields { margin-top: var(--space-4); }
.modal-panel > .field + .field,
.modal-panel form > .field + .field { margin-top: 10px; }
.modal-actions {
  display: flex;
  gap: var(--space-3);
  justify-content: flex-end;
  margin-top: var(--space-2);
}
.modal-err {
  font-size: var(--fs-control);
  color: var(--danger-500);
  min-height: 16px;
}
.modal-note {
  margin-bottom: var(--space-4);
  padding: 10px;
  background: var(--bg-subtle);
  border-radius: var(--radius-md);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
}
.modal-note-success {
  background: var(--success-bg);
  border: 1px solid var(--border-success);
  color: var(--success-fg);
}
.modal-check-card {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  margin-bottom: var(--space-4);
  padding: 9px 11px;
  background: var(--bg-subtle);
  border: 1px solid var(--border-default);
  border-radius: var(--radius);
  cursor: pointer;
}
.modal-check-card input { margin-top: 2px; }
.modal-check-card span { font-size: var(--fs-control); color: var(--fg-default); line-height: var(--lh-normal); }
.modal-panel-wide .embed-form {
  width: 100%;
  height: min(640px, 76vh);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--bg-surface);
}
.modal-file-input {
  width: 100%;
  height: auto;
  padding: var(--space-3);
}

/* ── Purchase ledger inline edit input (online_payment, memo) ── */
.pm-pay-input {
  padding: 2px 4px;
  font-size: var(--fs-label);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-xs);
  background: var(--bg-surface);
  color: var(--fg-default);
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
}
.pm-pay-input:focus { outline: none; border-color: var(--border-focus); box-shadow: var(--ring-focus); }

/* ── Ledger cell inline input (pivot row edit) ─────────────── */
.lg-cell-input {
  width: 100%;
  padding: 2px 4px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-xs);
  font-size: var(--fs-label);
  background: var(--bg-surface);
  color: var(--fg-default);
  font-family: inherit;
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
}
.lg-cell-input.tiny { font-size: var(--fs-micro); }
.lg-cell-input:focus { outline: none; border-color: var(--border-focus); box-shadow: var(--ring-focus); }

/* ── Day toggle button (월~금 인라인) ──────────────────────── */
.lg-day-btn {
  padding: 2px 5px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-xs);
  background: var(--bg-surface);
  color: var(--fg-faint);
  font-size: var(--fs-micro);
  cursor: pointer;
  font-family: inherit;
}
.lg-day-btn.active {
  border-color: var(--accent-500);
  background: var(--accent-soft-bg);
  color: var(--accent-500);
  font-weight: var(--fw-semibold);
}

/* ── Ledger modal form (label + input/select) ──────────────── */
.lg-form-label {
  font-size: var(--fs-control);
  font-weight: var(--fw-semibold);
  color: var(--fg-default);
  display: block;
  margin-bottom: 4px;
}
.lg-form-input {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius);
  font-size: var(--fs-body);
  background: var(--bg-surface);
  color: var(--fg-default);
  font-family: inherit;
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
}
.lg-form-input:focus {
  outline: none;
  border-color: var(--border-focus);
  box-shadow: var(--ring-focus);
}

/* ── Ledger meta text (보조 정보 — 전화/출판사/소계 라벨/메모) ── */
.lg-meta-11 { font-size: var(--fs-label); color: var(--fg-muted); }
.lg-meta-12 { font-size: var(--fs-control); color: var(--fg-muted); }

/* ── Ledger emphasis row + status-bold text (소계 행 / 반품·수금 강조) ── */
.lg-row-em { background: var(--bg-subtle); }
.lg-danger-em { color: var(--danger-500); font-weight: var(--fw-semibold); }
.lg-success-em { color: var(--success-fg); font-weight: var(--fw-bold); }

/* ── Ledger 숫자 셀 (분기 인라인 입력) ──────────────────────── */
.lg-num-80 { width: 80px; text-align: right; font-variant-numeric: tabular-nums; }

/* ── Preset chip (date range, filter etc.) ──────────────────── */
.pm-chip {
  display: inline-flex; align-items: center; justify-content: center;
  font-size: var(--fs-label);
  padding: 3px 10px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-pill);
  background: var(--bg-surface);
  color: var(--fg-muted);
  cursor: pointer;
  font-family: inherit;
  transition: background var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast);
}
.pm-chip:hover { background: var(--bg-subtle); color: var(--fg-strong); border-color: var(--border-strong); }
.pm-chip.active { background: var(--accent-soft-bg); color: var(--accent-soft-fg); border-color: transparent; }
.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0 0 var(--space-4) 0;
}
.chip-separator {
  width: 1px;
  height: 18px;
  background: var(--border-default);
  margin: 0 var(--space-2);
}

/* ── 접근성: 모션 감소 선호 시 이동/변형 애니 제거 (Apple §14) ── */
/* ponytail: 표준 a11y 리셋 — opacity/color 트랜지션까지 함께 죽는다.
   색·투명도 페이드를 살리려면 30개 CSS를 프로퍼티별로 손봐야 해 과함. 필요해지면 그때. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* 조치 변경 이력 — 덮인 조치까지 시간순. 부품: orders/_resolution_history.html (2026-08-18) */
.reso-history {
  margin-top:6px;
  font-size:var(--fs-control);
}
.reso-history > summary {
  cursor:pointer;
  color:var(--fg-muted);
}
.reso-history ol {
  margin:6px 0 0;
  padding-left:18px;
  display:grid;
  gap:5px;
}
.reso-history li {
  color:var(--fg-default);
}
.reso-history-when,
.reso-history-who {
  color:var(--fg-muted);
  margin-right:6px;
}
.reso-history-what {
  font-weight:var(--fw-semibold);
  margin-right:6px;
}
.reso-history-diff {
  color:var(--warning-fg);
}
.reso-history-note {
  color:var(--fg-muted);
  margin-top:2px;
  white-space:pre-wrap;
}

/* 긴 메모 접기 — 업체 화면이 요약 뒤에 붙이는 「자세히」 (2026-08-18) */
.reso-more {
  margin-top:3px;
}
.reso-more > summary {
  cursor:pointer;
  color:var(--fg-muted);
  font-size:var(--fs-control);
}

/* 버튼 로딩 상태 — base.css 에 혼자 있던 것을 정본으로 옮겼다(2026-08-28). */
.btn.loading { pointer-events: none; opacity: 0.7; position: relative; }
.btn.loading::after {
  content: ''; display: inline-block; width: 14px; height: 14px;
  border: 2px solid oklch(1 0 0 / 0.3); border-top-color: var(--fg-inverse);
  border-radius: 50%; animation: spin .6s linear infinite;
  margin-left: 6px; vertical-align: middle;
}

/* ── orders/_partials 조각 전용 ──
   2026-10-29: 여러 화면이 부르는 조각의 옛 인라인 style 을 같은 값으로 옮겼다 — 화면 모양은 그대로다.
   인라인은 어떤 선택자보다 셌으므로 조각의 뿌리 클래스 아래 두 단 이상으로 건다. */

/* 표 안 작은 체크박스 — quarterly_school_detail_*(처리일자 · 거래처 전체) · _school_pick_checkbox */
.inline-cb { margin-right: 4px; vertical-align: middle; }
.inline-cb.is-clickable { cursor: pointer; }

/* _transaction_summary_cards.html — 매출·매입 거래내역 요약 띠(ledger · purchasing/main) */
.summary-strip.txn-summary { margin-bottom: 14px; }
.summary-strip.txn-summary .summary-cell .val.is-danger { color: var(--danger-500); }
.summary-strip.txn-summary .summary-cell .val.is-accent { color: var(--accent-500); }
.summary-strip.txn-summary .summary-cell.txn-balance { flex: 2; }
.summary-strip.txn-summary .summary-cell.txn-balance.is-due { background: var(--danger-bg); }
.summary-strip.txn-summary .summary-cell.txn-balance.is-settled { background: var(--success-bg); }
.summary-strip.txn-summary .summary-cell.txn-balance.is-credit { background: var(--warning-bg); }
.summary-strip.txn-summary .txn-note { font-size: var(--fs-micro); font-weight: 400; color: var(--fg-faint); margin-left: 4px; }
.summary-strip.txn-summary .summary-cell .val.txn-balance-val { font-size: var(--fs-page-title); font-weight: var(--fw-bold); }
.summary-strip.txn-summary .summary-cell .val.txn-balance-val.is-due { color: var(--danger-500); }
.summary-strip.txn-summary .summary-cell .val.txn-balance-val.is-credit { color: var(--warning-500); }
.summary-strip.txn-summary .summary-cell .val.txn-balance-val.is-settled { color: var(--success-500); }
.summary-strip.txn-summary .txn-actions { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; align-items: center; }
.summary-strip.txn-summary .txn-hint { font-size: var(--fs-micro); color: var(--fg-faint); }
.summary-strip.txn-summary .txn-upload-form { display: none; }
.summary-strip.txn-summary .summary-cell.txn-memo { flex: 2; min-width: 180px; }
.summary-strip.txn-summary .txn-memo-input {
  width: 100%; min-height: 42px; border: 1px solid var(--border-default); border-radius: var(--radius-sm);
  padding: 6px; font-size: var(--fs-control); font-family: inherit; resize: vertical;
}
.summary-strip.txn-summary .txn-memo-input.is-busy { background: var(--bg-subtle); }

/* _ledger_agency_grid.html — 거래내역 분류 · 업체 칩(월 · 분기 정산). 옛 `.agency-grid`(ledger.css, grid) 와 다른 것 */
.agency-chip-grid { margin-bottom: var(--space-3); }
.agency-chip-grid .toolbar.agency-chip-grid-bar { margin-bottom: 6px; }
.agency-chip-grid .agency-chip-grid-switch { color: var(--fg-faint); font-weight: 400; margin-left: 2px; }
.agency-chip-grid .agency-chip-grid-count { font-size: var(--fs-pico); color: var(--fg-faint); }
.agency-chip-grid .agency-chip-grid-group { display: flex; gap: 6px; align-items: flex-start; margin-bottom: 6px; }
.agency-chip-grid .agency-chip-grid-label {
  min-width: 80px; flex-shrink: 0; font-size: var(--fs-label); font-weight: var(--fw-bold); color: var(--fg-muted);
  padding: 4px 8px; background: var(--bg-subtle); border-radius: var(--radius-sm); text-align: center;
}
.agency-chip-grid .ledger-cat-chips { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; flex: 1; min-width: 0; }
/* `.agency-btn.active`·`:hover` 의 테두리색도 이 값이 덮는다(옛 인라인과 같다) */
.agency-chip-grid .ledger-cat-chips .agency-btn.agency-chip-grid-chip { white-space: nowrap; border: 1px solid var(--border-subtle); border-radius: 5px; }

/* _agency_picker.html — 업체 검색형 콤보박스(주문내역 · 반품 필터) */
.agency-picker { position: relative; min-width: 160px; }
.agency-picker input[type="text"].agency-picker-input { width: 100%; border: 1px solid var(--border-default); border-radius: var(--radius-sm); }
.agency-picker .agency-picker-menu {
  position: absolute; z-index: 20; top: 100%; left: 0; right: 0; max-height: 260px; overflow-y: auto;
  background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: var(--radius-sm);
  box-shadow: 0 4px 12px rgba(0,0,0,.12); margin-top: 2px;
}
.agency-picker .agency-picker-opt { padding: 6px 10px; font-size: var(--fs-control); cursor: pointer; }
.agency-picker .agency-picker-opt.is-all { color: var(--fg-muted); }
.agency-picker .agency-picker-opt.is-item { border-top: 1px solid var(--border-subtle); }
.agency-picker .agency-picker-empty { padding: 6px 10px; font-size: var(--fs-control); color: var(--fg-faint); }

/* _assign_teacher_modal.html — 담당자 배정 iframe 모달(여닫기는 JS 가 style.display 로) */
.assign-modal {
  display: none; position: fixed; inset: 0; z-index: var(--z-modal); background: var(--bg-overlay);
  align-items: center; justify-content: center;
}
.assign-modal .assign-modal-panel {
  background: var(--bg-surface); border-radius: 12px; width: 94%; max-width: 960px; height: 86vh;
  display: flex; flex-direction: column; box-shadow: 0 20px 60px rgba(0,0,0,.25);
}
.assign-modal .assign-modal-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 18px; border-bottom: 1px solid var(--border-default);
}
.assign-modal h3.assign-modal-title { font-size: var(--fs-body-lg); font-weight: 700; margin: 0; }
.assign-modal .btn.assign-modal-close { color: var(--fg-faint); }
.assign-modal .assign-modal-frame { flex: 1; width: 100%; border: none; border-radius: 0 0 12px 12px; }

/* _school_search_box.html — 거래내역 머리 학교 검색 */
.school-search { position: relative; font-weight: 400; }
.school-search .input.school-search-input { width: 220px; border-color: var(--accent-500); }
.school-search .school-search-menu {
  position: absolute; top: calc(100% + 4px); right: 0; z-index: 50;
  background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: 6px;
  box-shadow: 0 4px 16px rgba(0,0,0,.12); min-width: 280px; max-height: 320px; overflow-y: auto;
}
.school-search .school-search-status { padding: 10px 12px; font-size: var(--fs-label); color: var(--fg-faint); }
.school-search a.school-search-item {
  display: block; padding: 8px 12px; font-size: var(--fs-control); text-decoration: none;
  color: var(--fg-strong); border-bottom: 1px solid var(--border-default);
}
.school-search .school-search-meta { color: var(--fg-muted); font-size: var(--fs-label); }

/* _period_preset_chips.html — 분기 칩 아랫줄 기간 */
.sub-btn .preset-period { font-size: var(--fs-nano); opacity: .75; }
/* order_tabbar.html · return_tabbar.html — 1단 탭 아래 화면 구분 seg */
.seg.tabbar-seg { margin-bottom: 14px; }
/* order_workflow_tabs.html — 주문 업무 1단 탭 */
.tabs.workflow-tabs { margin-bottom: 10px; }
/* components/layout/_demo_banner.html — 시연 인스턴스(DEMO_MODE) 띠. 운영에선 마크업이 없다 */
.demo-banner {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px;
  padding: 6px 16px; background: var(--warning-bg); color: var(--warning-fg);
  border-bottom: 1px solid var(--border-warning); font-size: var(--fs-label); line-height: 1.5;
}
.demo-banner__reset { margin-left: auto; }
.demo-banner__reset summary { cursor: pointer; font-weight: var(--fw-semibold); text-decoration: underline; }
.demo-banner__reset form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 4px; }
.demo-banner__reset button {
  padding: 2px 10px; border: 1px solid var(--danger-500); border-radius: var(--radius-sm);
  background: var(--danger-500); color: var(--fg-inverse); font: inherit; font-weight: var(--fw-bold); cursor: pointer;
}
html.is-embedded .demo-banner, html.in-frame .demo-banner { display: none; }
/* 폰에서 base.html 햄버거(#menu-toggle, 48px fixed)가 띠 왼쪽을 덮지 않게 */
@media (max-width: 768px) { body:has(#menu-toggle) .demo-banner { padding-left: 56px; } }