/* ColorXperts Admin theme — 크림 · 코랄 + 페인트 칩. Copied 1:1 from design/board-mockup.html <style> (SPEC §8).
   Rule order is the mockup's; later blocks override earlier ones on purpose. Demo-only rules (page frame, phone bezel,
   TV, history, role switch) are left out. The orders page (A2) still uses styles.css for its own content. */
@font-face { font-family: "Pretendard Variable"; font-weight: 45 920; font-style: normal; font-display: swap; src: url(/fonts/PretendardVariable-subset.woff2) format("woff2"); }
:root {
  --font-sans: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  --font-mono: var(--font-sans); /* numbers use Pretendard tabular figures */
  --x-order-exit-ink: #0f1e3d;
  /* app (store) palette — from the ColorXperts Admin design system, light */
  --x-bg: #fbf6ef; --x-surface: #ffffff; --x-line: #efe4d6; --x-line-strong: #d8c8b4; --x-ink: #2b2522; --x-muted: #7a6f66; --x-on-ink: #ffffff;
  --x-accent: #e2552f; --x-accent-bg: #ffece4; --x-mix: #b4650a; --x-mix-bg: #ffefd2; --x-done: #1f7f51; --x-done-bg: #ddf4e6;
  --x-late: #c8333a; --x-late-bg: #ffe6e3; --x-warn: #9a6200; --x-check: #f2b705; /* the label button's 확인 필요 dot (Eric 10/29: bright yellow) */ --x-cancel: #9a8f86; --x-scrim: rgba(var(--x-shadow-ink),0.40); --x-shadow: 0 12px 32px rgba(var(--x-shadow-ink),0.14);
  --x-toast-ok: #3fbf82; --x-toast-err: #ff6b6b; --x-toast-cancel: #9a8f86; /* 작업판 toast result dot (board.css .toast-host); cancel = --x-cancel */
  --x-todo: #5543c0; --x-todo-bg: #e7e2ff; /* 할 일 purple — the values .todo-badge already used (작업판 C buttons and the detail's todo box) */
  /* deep variants for running text on white or on the tinted backgrounds (AA 4.5:1); the base mix/done/late are for pills, dots and
     buttons. board.css carries its own copy of mix/done. */
  --x-mix-deep: #7e4607; --x-done-deep: #145a38; --x-late-deep: #9e2a30;
  /* 매칭 등급 chip (작업판 C card · detail): 스탠다드 = --x-ink / --x-on-ink, 패널 바탕 = --x-mix-bg (same values); the rest are new */
  --x-grade-blend-bg: #e7f0ff; --x-grade-blend-ink: #24508f; --x-grade-panel-ink: #8a4d06;
  /* 주문 입력 KCC 컬러코드 확인: ok = 칸 안의 ✓ KCC, warn = KCC에 없는 코드의 칸 테두리, warn-ink = 그 아래 안내 글자 */
  --x-code-ok: #2f7a4d; --x-code-warn: #c7791a; --x-code-warn-ink: #94550a;
  /* 주문 입력 컬러코드 아래 줄의 분류 칩 (솔리드, 메탈릭, 3코트): .chip-sq 모양, 이 바탕과 글자 */
  --x-finish-bg: #f1e8dc; --x-finish-ink: #4a413a;
  /* 동선 지도: one colour per route, by route number (#7 = #1's colour again). The only colours the map adds. */
  /* Tokens for colours that used to be written straight into the page CSS (design system step 1). Values = what was written
     there, so nothing moved; public/ds.css (DESIGN_SYSTEM) gives each its new value. Grouped by what they mean. */
  --x-shadow-ink: 43,37,34; /* rgba(var(--x-shadow-ink), a): every shadow and scrim */
  --x-ink-deep: #000000; --x-todo-deep: #3d2f92; /* the darker shade under a filled ink / todo button (was board.css .board-c) */
  --x-accent-press: #b8401f; /* under the main (accent) button (was also admin-pages.css .adm) */
  --x-mix-press: #8a4c06; /* under the 작업판 B step button */
  --x-late-press: #8f2328; /* under 팀원's red main button */
  /* neutral fills */
  --x-track: #f4ece1; /* 팀원 · 거래처 · 가격표 neutral fill (was admin-pages.css .adm) */
  --x-wash: #f8f1e7; /* table heads, the detail's facts box */
  --x-seg-bg: #f3ebe0; /* the segmented toggle's back */
  --x-pick-bg: #f3ebe0; /* the chosen row in a menu / suggestion list / calendar range */
  --x-off-bg: #efe9e3; /* the grey "off" pill, 휴무 tag */
  --x-row-hover: #fffaf4; /* a table row under the pointer */
  --x-opt-hover: #f8f2ea; /* a menu option under the pointer */
  --x-nav-hover: #fbf6ef; /* a sidebar row under the pointer (SIDE_NAV) */
  --x-disabled: #cfc6bc; /* a disabled button's fill, a disabled date */
  --x-paper: #fffdf8; /* the receipt box */
  --x-memo-bg: #fffdf6; /* the memo field inside a yellow box */
  --x-route-bg: #fdf7ef; --x-route-line: #e2d6c6; --x-route-out-bg: #f4f1ec; --x-route-dash: #c9b8a3; /* Ready to Go route groups */
  --x-th-ink: #5f554d; /* 가격표 table head words */
  --x-box-line: #b9ab9b; /* 조색 check box line */
  --x-on-dark-soft: #f3ebe0; /* words on the photo viewer's dark back */
  --x-av-bg: #f3ebe0; --x-av-ink: #2b2522; /* person avatars (was board.css .board-c, map.css .rmap) */
  --x-side-av-bg: var(--x-ink); --x-side-av-ink: var(--x-on-ink); /* the collapsed sidebar's name circle */
  --x-area-bg: #ffe2d6; --x-area-ink: #b4431f; /* area tag (was also admin-pages.css .adm) */
  /* toasts (dark back) */
  --x-toast-sub: #cfc6bd; --x-toast-link: #8da6ff; --x-toast-x: #a6adb8; --x-toast-action: #ffd9c9;
  /* 조색 amber (the 조색 step button, the 조색 room's current round) */
  --x-amber: #c26f0e; --x-amber-deep: #8a4d06; --x-hot-line: #e9c48f; --x-hot-bg: #fffaf1;
  /* 할 일 purple, lighter and darker steps */
  --x-todo-tint: #f1eeff; --x-todo-wash: #f6f4ff; --x-todo-line: #cdc4f3; --x-todo-line-soft: #ddd6fa; --x-todo-mid: #6a58d6; --x-todo-press: #4a3aa8; --x-todo-tag-line: #8e80e0;
  --x-link-bg: #efeafd; --x-link-ink: #5b3fd1; --x-link-box-ink: #3d2b9a; /* invoice link chip, the link box */
  /* yellow (다시 갈 곳, 이월, 확인) and the 가격표 flags */
  --x-yel-bg: #fff4dc; --x-yel-ink: #6b4300;
  --x-warn-bg: #fff3d6; /* (was admin-pages.css .adm) */
  --x-flag-line: #c9a24a; --x-flag-row: #fffaf0; --x-flag-ink: #8a5800; --x-note-bg: #fff6e0; --x-note-ink: #4d3500;
  --x-c7-wait: #e6b25c; /* 작업판 C: the line under the 대기 column head (board.css --c7-wait) */
  /* red */
  --x-late-foot: #f2b8b4; /* the late card's foot */
  --x-late-ink: #a1262c; /* words on a red chip / box */
  --x-danger: #b3262e; --x-danger-deep: #9c1f27; --x-danger-press: #7d1a20; /* 가격표 delete */
  --route-1: #D4520C; --route-2: #2350B8; --route-3: #7A3BD6; --route-4: #0B7F68; --route-5: #B8336A; --route-6: #8A5A00;
}

* { box-sizing: border-box; }
button, input, select { font-family: inherit; }
button { cursor: pointer; }

.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; }

/* ===== app (store UI) ===== */
/* Shell links: ".pc-side nav a", ".tabbar a", ".sheet .rows a" are added to the mockup's button selectors (same values). */
.app { font-family: var(--font-sans); color: var(--x-ink); font-size: 16px; line-height: 24px; letter-spacing: -0.005em; font-variant-numeric: tabular-nums; } /* letter-spacing + tabular-nums: the mockup sets them on <body>; here .app carries them */
.app button { font-family: inherit; }
.a-top { flex: 0 0 auto; height: 56px; padding: 0 16px; background: var(--x-surface); border-bottom: 1px solid var(--x-line); display: flex; align-items: center; gap: 8px; }
.a-top h3 { margin: 0; font-size: 20px; line-height: 28px; font-weight: 600; flex: 1 1 auto; }
.a-clock { font-family: var(--font-mono); font-size: 14px; font-weight: 500; color: var(--x-muted); font-variant-numeric: tabular-nums; }
.a-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 16px 16px 24px; display: flex; flex-direction: column; gap: 12px; }
.a-label { font-size: 13px; line-height: 18px; font-weight: 500; letter-spacing: 0.02em; color: var(--x-muted); }
.a-cap { font-size: 13px; line-height: 18px; color: var(--x-muted); }
.a-err { font-size: 13px; line-height: 18px; color: var(--x-late); }

.pill { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; line-height: 1; border-radius: 999px; font-size: 13px; font-weight: 500; white-space: nowrap; }
.pill::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.pill.late { background: var(--x-late-bg); color: var(--x-late); }
.pill.mix { background: var(--x-mix-bg); color: var(--x-mix); }
.pill.done { background: var(--x-done-bg); color: var(--x-done); }
.pill.cancel { background: var(--x-line); color: var(--x-cancel); }
.pill.late.on-late { background: var(--x-surface); }

.b-main { flex: 1 1 auto; height: 56px; border-radius: 6px; border: 0; background: var(--x-ink); color: var(--x-on-ink); font-size: 18px; font-weight: 600; }
.b-more { flex: 0 0 56px; height: 56px; border-radius: 6px; border: 1px solid var(--x-line-strong); background: var(--x-surface); color: var(--x-ink); font-size: 22px; line-height: 1; }
.b-more.on { border-color: var(--x-accent); background: var(--x-accent-bg); color: var(--x-accent); }
.b-sec { height: 48px; padding: 0 16px; border-radius: 6px; border: 2px solid var(--x-line-strong); background: var(--x-surface); color: var(--x-ink); font-size: 16px; font-weight: 600; }
.b-sec.dim { border-color: var(--x-line); color: var(--x-muted); }
.b-text { height: 44px; padding: 0 6px; border: 0; background: transparent; color: var(--x-ink); font-size: 15px; font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }
.b-danger { height: 56px; border-radius: 6px; border: 2px solid var(--x-late); background: var(--x-surface); color: var(--x-late); font-size: 17px; font-weight: 600; }
.b-cancel { height: 56px; border-radius: 6px; border: 2px solid var(--x-line-strong); background: var(--x-surface); color: var(--x-ink); font-size: 17px; font-weight: 600; }
.chip { height: 48px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--x-line); background: var(--x-surface); color: var(--x-ink); font-size: 15px; font-weight: 500; white-space: nowrap; }
.chip.on { border-color: var(--x-accent); background: var(--x-accent-bg); color: var(--x-accent); }
.chip.rush { font-weight: 600; } /* 주문 입력 Rush: off = a plain chip, on = red fill + white words (Eric 11/13) */
.chip.rush.on { border-color: var(--x-late); background: var(--x-late); color: var(--x-on-ink); }
.input { width: 100%; height: 48px; padding: 0 12px; border: 1px solid var(--x-line); border-radius: 6px; background: var(--x-surface); color: var(--x-ink); font-size: 16px; min-width: 0; }
.input.err { border-color: var(--x-late); }
.input.big { height: 56px; font-size: 20px; font-weight: 600; letter-spacing: 0.02em; }

/* ticket */
.tk { position: relative; background: var(--x-surface); border: 1px solid var(--x-line); border-radius: 12px; padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.tk.mixing { padding-top: 20px; }
.tk.mixing::before { content: ""; position: absolute; left: -1px; right: -1px; top: -1px; height: 5px; background: var(--x-mix); border-radius: 12px 12px 0 0; }
.tk.late { background: var(--x-late-bg); border-color: var(--x-late); }
.tk.closed { color: var(--x-muted); }
.tk.cancelled { color: var(--x-cancel); }
.tk.cancelled .tk-name { text-decoration: line-through; }
.tk.fresh { animation: fresh 1.6s ease-out; }
@keyframes fresh { from { box-shadow: 0 0 0 3px var(--x-accent); } to { box-shadow: 0 0 0 0 transparent; } }
@media (prefers-reduced-motion: reduce) { .tk.fresh { animation: none; } }
.tk-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; min-height: 42px; }
.tk-meta { font-size: 13px; line-height: 18px; color: var(--x-muted); display: flex; flex-wrap: wrap; gap: 0 6px; align-items: center; }
.tk-flag { color: var(--x-late); font-weight: 600; }
.tk-time { text-align: right; }
.tk-timer { font-family: var(--font-mono); font-size: 18px; line-height: 24px; font-weight: 500; font-variant-numeric: tabular-nums; color: var(--x-muted); white-space: nowrap; }
.tk-timer.warn { color: var(--x-warn); }
.tk-timer.late { color: var(--x-late); font-weight: 600; }
.tk-timer.done { color: var(--x-done); }
.tk-name { margin: 0; font-size: 20px; line-height: 26px; font-weight: 600; }
.tk-lines { display: flex; flex-direction: column; gap: 4px; }
.tk-line { display: flex; justify-content: space-between; gap: 8px; }
.tk-line span:last-child { white-space: nowrap; }
.tk-line .unit, .freq .unit { color: var(--x-muted); font-size: 14px; }
.tag { display: inline-block; font-size: 12px; line-height: 18px; padding: 0 6px; border-radius: 4px; border: 1px solid var(--x-line-strong); color: var(--x-muted); font-weight: 500; vertical-align: 1px; }
.pill.pick { background: var(--x-bg); color: var(--x-ink); border: 1px solid var(--x-line-strong); }
.pill.pick::before { background: var(--x-muted); }
.plist { display: flex; flex-direction: column; gap: 6px; max-height: 260px; overflow-y: auto; }
.picked { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.tk-memo { background: var(--x-bg); border-radius: 6px; padding: 6px 10px; font-size: 14px; line-height: 20px; color: var(--x-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tk-pills { display: flex; gap: 6px; flex-wrap: wrap; }
.tk-act { display: flex; gap: 8px; position: relative; }
.tk-closed { display: flex; align-items: center; gap: 8px; }
.tk-closed .grow { flex: 1 1 auto; }
.empty { padding: 32px 16px; border: 1px dashed var(--x-line); border-radius: 12px; color: var(--x-muted); text-align: center; }

.toast { display: flex; align-items: center; gap: 6px; padding: 6px 6px 6px 12px; background: var(--x-ink); color: var(--x-on-ink); border-radius: 12px; font-size: 14px; line-height: 20px; }
.toast span { flex: 1 1 auto; min-width: 0; }
.toast button { height: 40px; padding: 0 10px; border: 0; background: transparent; color: var(--x-toast-link); font-size: 15px; font-weight: 600; white-space: nowrap; }
.toast button.x { color: var(--x-toast-x); font-weight: 400; font-size: 18px; }

/* phone parts */
.tabs3 { flex: 0 0 auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); background: var(--x-surface); border-bottom: 1px solid var(--x-line); }
.tabs3 button { height: 52px; border: 0; border-bottom: 3px solid transparent; background: transparent; color: var(--x-muted); font-size: 15px; font-weight: 500; display: flex; align-items: center; justify-content: center; gap: 6px; }
.tabs3 button.on { border-bottom-color: var(--x-ink); color: var(--x-ink); font-weight: 600; }
.tabs3 .n { font-family: var(--font-mono); font-weight: 600; }
.tabs3 .lt { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--x-late); color: var(--x-on-ink); font-size: 12px; line-height: 20px; font-weight: 600; }
.tabbar { flex: 0 0 auto; height: 58px; padding-bottom: 0; background: var(--x-surface); border-top: 1px solid var(--x-line); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tabbar button, .tabbar a { position: relative; border: 0; background: transparent; color: var(--x-muted); font-size: 13px; font-weight: 500; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; }
.tabbar button.on, .tabbar a.on { color: var(--x-accent); font-weight: 600; }
.tabbar svg { width: 24px; height: 24px; }
.tabbar .bd { position: absolute; top: 8px; left: 50%; margin-left: 8px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--x-late); color: var(--x-on-ink); font-size: 11px; line-height: 18px; font-weight: 600; }
.sticky-submit { flex: 0 0 auto; padding: 12px 16px; background: var(--x-surface); border-top: 1px solid var(--x-line); }
.sticky-submit .b-main { width: 100%; }
.sheet-wrap { position: absolute; inset: 0; z-index: 10; background: var(--x-scrim); display: flex; flex-direction: column; justify-content: flex-end; }
.sheet-wrap .scrim { flex: 1 1 auto; border: 0; background: transparent; }
.sheet { background: var(--x-surface); border-radius: 16px 16px 0 0; padding: 12px 16px 28px; display: flex; flex-direction: column; gap: 14px; }
.sheet .grab { align-self: center; width: 40px; height: 4px; border-radius: 999px; background: var(--x-line); }
.sheet h4 { margin: 0; font-size: 20px; line-height: 28px; font-weight: 600; }
.sheet .rows { display: flex; flex-direction: column; }
.sheet .rows button, .sheet .rows a { height: 56px; padding: 0 4px; border: 0; border-bottom: 1px solid var(--x-line); background: transparent; color: var(--x-ink); font-size: 16px; font-weight: 500; text-align: left; }
.sheet .rows button:last-child, .sheet .rows a:last-child { border-bottom: 0; }
.sheet .rows button.danger, .sheet .rows a.danger { color: var(--x-late); font-weight: 600; }
.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.grid4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.hscroll { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 2px; }
.line-card { background: var(--x-surface); border: 1px solid var(--x-line); border-radius: 12px; padding: 12px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.line-card .full { grid-column: 1 / -1; }
.line-card .field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.line-top { display: flex; align-items: center; justify-content: space-between; }
.x-btn { width: 40px; height: 40px; border: 0; border-radius: 6px; background: transparent; color: var(--x-muted); font-size: 18px; }
.vol { height: 48px; border-radius: 6px; border: 1px solid var(--x-line); background: var(--x-surface); color: var(--x-ink); font-size: 15px; font-weight: 500; }
.vol.on { border-color: var(--x-accent); background: var(--x-accent-bg); color: var(--x-accent); font-weight: 600; }
.qty { display: flex; align-items: center; gap: 8px; }
.qty .grow { flex: 1 1 auto; }
.qty button { width: 48px; height: 48px; border-radius: 6px; border: 1px solid var(--x-line-strong); background: var(--x-surface); color: var(--x-ink); font-size: 22px; }
.qty b { width: 36px; text-align: center; font-family: var(--font-mono); font-size: 20px; font-weight: 600; }
.freq { height: 48px; padding: 0 12px; border-radius: 6px; border: 1px solid var(--x-line); background: var(--x-surface); color: var(--x-ink); font-size: 16px; text-align: left; display: flex; justify-content: space-between; align-items: center; width: 100%; }
.freq em { font-style: normal; color: var(--x-accent); font-size: 22px; font-weight: 600; }

/* PC */
.pc { min-width: 1040px; height: 760px; display: flex; background: var(--x-bg); position: relative; overflow: hidden; }
.pc-side { width: var(--side-w, 196px); flex: 0 0 var(--side-w, 196px); background: var(--x-surface); border-right: 1px solid var(--x-line); padding: 20px 12px; display: flex; flex-direction: column; gap: 28px; }
.pc-side .brand { font-weight: 600; padding: 0 12px; }
.pc-side nav { display: flex; flex-direction: column; gap: 2px; }
.pc-side nav button, .pc-side nav a { height: 44px; padding: 0 12px; border: 0; border-radius: 6px; background: transparent; color: var(--x-ink); font-size: 15px; font-weight: 500; text-align: left; }
.pc-side nav button.on, .pc-side nav a.on { background: var(--x-accent-bg); color: var(--x-accent); font-weight: 600; }
.pc-main { flex: 1 1 auto; min-width: 0; padding: 24px; display: flex; flex-direction: column; gap: 16px; overflow-y: auto; }
.pc-head { display: flex; align-items: center; gap: 12px; }
.pc-head h3 { margin: 0; font-size: 26px; line-height: 32px; font-weight: 600; }
.pc-head .grow { flex: 1 1 auto; }
.pc-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: start; }
.col { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.col-h { display: flex; align-items: baseline; gap: 8px; padding: 0 4px; }
.col-h .n { font-family: var(--font-mono); font-size: 20px; font-weight: 600; }
.menu { position: absolute; right: 0; bottom: 64px; width: 200px; background: var(--x-surface); border: 1px solid var(--x-line); border-radius: 12px; box-shadow: var(--x-shadow); padding: 6px; display: flex; flex-direction: column; z-index: 5; }
.menu button { height: 46px; padding: 0 12px; border: 0; border-radius: 6px; background: transparent; color: var(--x-ink); font-size: 15px; font-weight: 500; text-align: left; }
.menu button:hover { background: var(--x-bg); }
.menu button.danger { color: var(--x-late); font-weight: 600; }
.modal-wrap { position: absolute; inset: 0; z-index: 10; background: var(--x-scrim); display: flex; align-items: center; justify-content: center; padding: 16px; }
.modal { width: 480px; max-width: 100%; background: var(--x-surface); border-radius: 12px; box-shadow: var(--x-shadow); padding: 22px; display: flex; flex-direction: column; gap: 18px; }
.modal h4 { margin: 0; font-size: 22px; line-height: 28px; font-weight: 600; }
.modal-wrap.inv-wrap { position: fixed; z-index: 30; }
/* 승인 확인 팝업: 4px inside a group, 20px between groups, one label column shared by the facts */
.modal.inv-confirm { width: 540px; max-height: calc(100% - 32px); gap: 20px; padding: 24px; }
.inv-confirm header h4 { margin: 0; }
.inv-confirm header p { margin: 4px 0 0; font-size: 14px; line-height: 20px; color: var(--x-muted); }
.inv-confirm .inv-body { overflow-y: auto; display: flex; flex-direction: column; gap: 20px; min-height: 0; margin: 0 -4px; padding: 0 4px; }
.inv-confirm .muted { color: var(--x-muted); }
.inv-facts { display: grid; grid-template-columns: 56px 1fr; gap: 8px 12px; margin: 0; font-size: 15px; line-height: 22px; }
.inv-facts dt { color: var(--x-muted); }
.inv-facts dd { margin: 0; overflow-wrap: anywhere; }
.inv-lines { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--x-line); }
.inv-lines li { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--x-line); }
.inv-lines .d { display: flex; flex-direction: column; gap: 4px; min-width: 0; overflow-wrap: anywhere; }
.inv-lines .d b { font-weight: 600; font-size: 15px; line-height: 22px; }
.inv-lines .sub { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; font-size: 13px; line-height: 18px; color: var(--x-muted); }
.inv-lines .ro-add { height: auto; font-size: 13px; line-height: 18px; min-height: 0; padding: 0; color: var(--x-ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--x-line-strong); }
.inv-lines .ro-field { display: inline-flex; align-items: center; gap: 8px; }
.inv-lines .ro-field .input { height: 32px; width: 128px; font-size: 14px; padding: 0 10px; border-radius: 10px; }
.inv-lines .ro-field .b-text { height: 32px; font-size: 13px; padding: 0 4px; }
.inv-lines .ro-err { flex-basis: 100%; font-size: 13px; }
.inv-lines .n { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.inv-lines .n span { font-size: 13px; line-height: 18px; color: var(--x-muted); }
.inv-lines .n b { font-size: 15px; line-height: 22px; font-weight: 600; }
.inv-total { display: flex; justify-content: space-between; align-items: baseline; margin-top: -8px; font-size: 14px; color: var(--x-muted); font-variant-numeric: tabular-nums; }
.inv-total b { color: var(--x-ink); font-size: 22px; line-height: 28px; font-weight: 700; margin-left: 12px; }
.inv-note { display: flex; flex-direction: column; gap: 8px; }
.inv-check { display: inline-flex; align-items: center; gap: 10px; min-height: 40px; align-self: flex-start; cursor: pointer; font-size: 15px; }
.inv-check input { width: 18px; height: 18px; margin: 0; accent-color: var(--x-ink); }
.inv-note textarea { min-height: 64px; resize: vertical; padding: 10px 12px; font: inherit; font-size: 15px; line-height: 22px; }
.inv-confirm .grid2 button { white-space: nowrap; padding: 0 8px; }
/* D 인보이스 (INVOICE_D): look-alike box at the top of the approval popup. The yellow is the Pending / 접수 대기 amber (--x-mix, --x-mix-bg);
   no new colour. Rows wrap on a phone (the link button drops under its row); 3 rows + "더 보기" keep the popup inside the screen. */
.look-box { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border-radius: 10px; background: var(--x-mix-bg); border: 1.5px solid var(--x-mix); color: var(--x-ink); }
.look-box > strong { color: var(--x-mix); font-size: 15px; line-height: 22px; font-weight: 600; }
.look-rows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.look-rows li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; font-size: 14px; line-height: 20px; font-variant-numeric: tabular-nums; }
.look-rows .look-row { min-width: 0; overflow-wrap: anywhere; }
.look-rows .look-row > span { white-space: nowrap; }
.look-box .look-link { flex: 0 0 auto; height: 36px; padding: 0 12px; font-size: 14px; }
.look-more, .look-day > .b-text { align-self: flex-start; height: auto; min-height: 32px; padding: 0; font-size: 13px; line-height: 18px; }
.look-day { display: flex; flex-direction: column; gap: 4px; }
.look-day > .b-text, .look-day .look-rows li { color: var(--x-muted); font-size: 13px; line-height: 18px; text-decoration-color: var(--x-line-strong); }
.look-live { margin-top: -14px; font-size: 12px; line-height: 16px; color: var(--x-muted); }
.look-box + .look-live, .look-day + .look-live { margin-top: -12px; }
.inv-body > .look-live:first-child { margin-top: 0; }
.look-note { margin-bottom: -8px; }
.look-confirm > span { font-size: 14px; line-height: 20px; }
.look-confirm .a-label { margin-top: 2px; }
.look-confirm .input { height: 40px; font-size: 15px; }
.look-confirm .grid2 button { height: 44px; font-size: 15px; }
.inv-confirm .look-acts .look-new { font-size: 15px; line-height: 20px; white-space: normal; padding: 0 10px; }
/* invoice marks: no DocNumber yet = red (late tokens), linked from QuickBooks = neutral */
.mini.nonum { background: var(--x-late-bg); color: var(--x-late); }
.mini.linked { background: var(--x-surface); color: var(--x-muted); border: 1px solid var(--x-line-strong); }
.mini.nf { background: var(--x-surface); color: var(--x-muted); border: 1px solid var(--x-line-strong); } /* 배합 없음: a standard without toner lines */
.band strong .mini { vertical-align: 2px; margin-left: 4px; }
.tk-icons .mini.inv + .mini.nonum { margin-left: -2px; }
@media (pointer: coarse) { .look-confirm .input { font-size: 16px; } }
@media (max-width: 420px) { .inv-confirm .look-acts { grid-template-columns: 1fr; gap: 8px; } .inv-confirm .look-acts .look-new { order: -1; } .look-box .look-link { height: 34px; } }
@media (max-width: 420px) { .modal.inv-confirm { padding: 20px; } .inv-confirm .grid2 [data-act=approve] { font-size: 15px !important; } }
@media (pointer: coarse) { .inv-lines .ro-field .input, .inv-note textarea { font-size: 16px; } .inv-lines .ro-add { min-height: 32px; } }
.modal .what { background: var(--x-bg); border-radius: 6px; padding: 10px 14px; display: flex; flex-direction: column; gap: 4px; }

.tk.ready { border-color: var(--x-done); }
.search-box input { padding-left: 40px; height: 48px; }
.search-box svg { top: 0; bottom: 0; margin: auto 0; transform: none; }
.eta { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border-radius: 10px; background: var(--x-surface); border: 1px solid var(--x-line); }
.eta b { font-size: 22px; line-height: 28px; font-variant-numeric: tabular-nums; }
.eta .warn { color: var(--x-warn); font-weight: 500; }
.eta .late { color: var(--x-late); font-weight: 600; }
.tk-meta .wish { color: var(--x-warn); font-weight: 500; }
.area { display: inline-flex; align-items: center; justify-content: center; min-width: 28px; height: 20px; padding: 0 5px; border-radius: 4px; background: var(--x-ink); color: var(--x-on-ink); font-size: 11px; font-weight: 700; letter-spacing: 0.04em; }
.tk.follow { background: var(--x-todo-tint); border-color: var(--x-todo-line); }
.tag.fu { border-color: var(--x-todo-tag-line); color: var(--x-todo); }
.pill.fu { background: var(--x-todo-tint); color: var(--x-todo); border: 1px solid var(--x-todo-line); }
.pill.fu::before { background: var(--x-todo-mid); }
.pill.chk { background: var(--x-mix-bg); color: var(--x-mix); }
.contact { font-weight: 500; color: var(--x-muted); }
.chip.mini-chip { height: 36px; padding: 0 10px; font-size: 13px; }
.src-link { all: unset; cursor: pointer; color: var(--x-accent); font-size: 14px; text-decoration: underline; text-underline-offset: 3px; }
.seg.small button { height: 40px; font-size: 14px; }
.note { font-size: 13px; line-height: 18px; color: var(--x-muted); padding: 8px 10px; border-radius: 6px; background: var(--x-bg); }
.tk-meta .via { color: var(--x-ink); font-weight: 500; }
.tk-line.sub { color: var(--x-muted); font-size: 14px; line-height: 20px; padding-left: 4px; }
.tk-name-btn { all: unset; cursor: pointer; font-size: 20px; line-height: 26px; font-weight: 600; text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 4px; }
.tk-name-btn:hover { text-decoration-color: var(--x-line-strong); }
.tk-name-btn:focus-visible { outline: 2px solid var(--x-accent); outline-offset: 2px; border-radius: 4px; }
.tk.cancelled .tk-name-btn { text-decoration: line-through; }
.tk-money { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; font-size: 14px; color: var(--x-muted); }
.tk-money b { color: var(--x-ink); font-weight: 600; }
.mini { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.mini.check { background: var(--x-mix-bg); color: var(--x-mix); }
.mini.unknown { background: var(--x-late-bg); color: var(--x-late); }
.mini.ok { background: var(--x-done-bg); color: var(--x-done); }
.mini.inv { background: var(--x-accent-bg); color: var(--x-accent); }
.mini.sys { background: var(--x-bg); color: var(--x-ink); border: 1px solid var(--x-line-strong); }
.out-toggle { width: 100%; height: 48px; border: 1px dashed var(--x-line-strong); border-radius: 12px; background: transparent; color: var(--x-muted); font-size: 15px; font-weight: 500; }
.out-list { display: flex; flex-direction: column; gap: 10px; }
.search-box { position: relative; }
.search-box input { padding-left: 38px; }
.search-box svg { position: absolute; left: 12px; top: 50%; width: 18px; height: 18px; transform: translateY(-50%); color: var(--x-muted); pointer-events: none; }
.seg { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); border: 1px solid var(--x-line-strong); border-radius: 8px; overflow: hidden; }
.seg button { height: 46px; border: 0; border-left: 1px solid var(--x-line); background: var(--x-surface); color: var(--x-ink); font-size: 15px; font-weight: 500; padding: 0 6px; }
.seg button:first-child { border-left: 0; }
.seg button.on { background: var(--x-ink); color: var(--x-on-ink); font-weight: 600; }
.cust-card { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--x-accent); background: var(--x-accent-bg); border-radius: 8px; }
.cust-card div { flex: 1 1 auto; min-width: 0; }
.cust-card b { display: block; font-size: 17px; }
.cust-list { display: flex; flex-direction: column; border: 1px solid var(--x-line); border-radius: 8px; overflow: hidden; background: var(--x-surface); max-height: 260px; overflow-y: auto; }
.cust-list button { min-height: 52px; padding: 6px 12px; border: 0; border-bottom: 1px solid var(--x-line); background: transparent; text-align: left; display: flex; flex-direction: column; justify-content: center; color: var(--x-ink); font-size: 15px; font-weight: 600; }
.cust-list button span { font-size: 13px; font-weight: 400; color: var(--x-muted); }
.cust-list button:disabled { color: var(--x-cancel); cursor: not-allowed; }
.cust-list .none { padding: 12px; color: var(--x-muted); font-size: 14px; }
.grid5 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.vol-custom { display: grid; grid-template-columns: minmax(0, 1fr) 110px; gap: 6px; }
.help { font-size: 13px; line-height: 18px; color: var(--x-muted); }
.help.warn { color: var(--x-warn); }
.vol-hint:empty { display: none; }
textarea.input { height: auto; min-height: 84px; padding: 10px 12px; line-height: 22px; resize: vertical; }
.photos { display: flex; gap: 8px; flex-wrap: wrap; }
.thumb { position: relative; width: 72px; height: 72px; border-radius: 8px; overflow: hidden; border: 1px solid var(--x-line); background: var(--x-bg); display: flex; align-items: center; justify-content: center; font-size: 11px; color: var(--x-muted); text-align: center; padding: 4px; }
.thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.thumb button { position: absolute; top: 2px; right: 2px; width: 24px; height: 24px; border-radius: 50%; border: 0; background: rgba(20,24,31,0.7); color: var(--x-on-ink); font-size: 12px; }
.edit-band { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 8px; background: var(--x-accent-bg); color: var(--x-accent); font-weight: 600; font-size: 15px; }
.edit-band span { flex: 1 1 auto; }
.sticky-submit .row { display: grid; grid-template-columns: 1fr 2fr; gap: 8px; }
.sticky-submit .row .b-cancel { height: 56px; }
.sheet.tall { max-height: 88%; overflow-y: auto; }
.dt { display: flex; flex-direction: column; gap: 14px; }
.dt-name { margin: 0; font-size: 22px; line-height: 28px; font-weight: 700; }
.dt h5 { margin: 0; font-size: 13px; line-height: 18px; font-weight: 600; letter-spacing: 0.02em; color: var(--x-muted); display: flex; justify-content: space-between; gap: 8px; }
.dt-lines { display: flex; flex-direction: column; border-top: 1px solid var(--x-line); }
.dt-line { padding: 10px 0; border-bottom: 1px solid var(--x-line); display: flex; flex-direction: column; gap: 4px; }
.dt-line .top { display: flex; justify-content: space-between; gap: 8px; }
.dt-line .calc { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 14px; color: var(--x-muted); font-variant-numeric: tabular-nums; }
.dt-line .calc b { color: var(--x-ink); font-weight: 600; }
.dt-line .trace { font-size: 13px; color: var(--x-muted); }
.dt-line .flags { font-size: 13px; color: var(--x-mix); }
.dt-line .acts { display: flex; gap: 4px; flex-wrap: wrap; }
.dt-line.override { background: var(--x-accent-bg); margin: 0 -8px; padding-left: 8px; padding-right: 8px; }
.small-btn { height: 36px; padding: 0 10px; border-radius: 6px; border: 1px solid var(--x-line-strong); background: var(--x-surface); color: var(--x-ink); font-size: 14px; font-weight: 600; }
.small-btn.ok { border-color: var(--x-done); color: var(--x-done); }
.totals { display: flex; flex-direction: column; gap: 4px; font-size: 15px; }
.totals div { display: flex; justify-content: space-between; }
.totals b { font-size: 18px; font-variant-numeric: tabular-nums; }
.pe { display: flex; flex-direction: column; gap: 8px; padding: 10px; border: 1px solid var(--x-accent); border-radius: 8px; background: var(--x-surface); }
.pe .two { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 8px; }
.band { padding: 12px 14px; border-radius: 10px; display: flex; flex-direction: column; gap: 8px; }
.band.creating { background: var(--x-mix-bg); color: var(--x-mix); }
.band.invoiced { background: var(--x-done-bg); color: var(--x-done); }
.band strong { font-size: 16px; }
.band .links { display: flex; gap: 8px; flex-wrap: wrap; }
.band .links button { height: 40px; padding: 0 12px; border-radius: 6px; border: 1px solid currentColor; background: var(--x-surface); color: inherit; font-size: 14px; font-weight: 600; }
.blockers { margin: 0; padding-left: 18px; color: var(--x-mix); font-size: 14px; }
.lock { font-size: 13px; line-height: 18px; color: var(--x-muted); background: var(--x-bg); padding: 8px 10px; border-radius: 6px; }
.dt-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.dt-actions .b-main { grid-column: 1 / -1; }
.dt-actions .b-cancel, .dt-actions .b-danger { height: 48px; font-size: 15px; }
.pc-panel { position: absolute; top: 0; right: 0; bottom: 0; width: 440px; background: var(--x-surface); border-left: 1px solid var(--x-line); box-shadow: var(--x-shadow); z-index: 8; display: flex; flex-direction: column; }
.pc-panel .head { flex: 0 0 auto; height: 56px; padding: 0 12px 0 20px; border-bottom: 1px solid var(--x-line); display: flex; align-items: center; justify-content: space-between; }
.pc-panel .body { flex: 1 1 auto; overflow-y: auto; padding: 18px 20px 24px; }
.pc-search { width: 260px; }
.pc-search .input { height: 42px; }
.later-h { padding: 6px 4px 0; font-size: 13px; color: var(--x-muted); font-weight: 600; }

/* ---------- 04 지난 주문 (mockup lines 232–262 copied 1:1, in the mockup's order so the theme overrides below still win; .search-box is above) ---------- */
.hist { min-width: 1040px; height: 760px; display: flex; background: var(--x-bg); position: relative; overflow: hidden; }
.hist-main { flex: 1 1 auto; min-width: 0; padding: 24px; display: flex; flex-direction: column; gap: 16px; overflow-y: auto; }
.hist-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.hist-head h3 { margin: 0; font-size: 26px; line-height: 32px; font-weight: 600; }
.days { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.days .chip { height: 40px; }
.days input[type=date] { height: 40px; width: 150px; }
.hsum { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--x-line); border: 1px solid var(--x-line); border-radius: 12px; overflow: hidden; }
.hsum div { background: var(--x-surface); padding: 12px 16px; display: flex; flex-direction: column; gap: 2px; }
.hsum b { font-size: 22px; line-height: 28px; font-weight: 700; font-variant-numeric: tabular-nums; }
.hsum span { font-size: 13px; color: var(--x-muted); }
.hsum .alert b { color: var(--x-mix); }
.hbar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.hbar .seg { width: auto; }
.hbar .seg button { padding: 0 14px; height: 40px; font-size: 14px; }
.htable { background: var(--x-surface); border: 1px solid var(--x-line); border-radius: 12px; overflow: hidden; }
.hrow { display: grid; grid-template-columns: 64px 44px minmax(170px, 1.1fr) minmax(220px, 2fr) 150px 120px 92px; gap: 12px; align-items: center; padding: 12px 16px; border-top: 1px solid var(--x-line); font-size: 14px; line-height: 20px; }
.hrow:first-child { border-top: 0; }
.hrow.head { background: var(--x-bg); color: var(--x-muted); font-size: 13px; font-weight: 600; padding-top: 10px; padding-bottom: 10px; }
.hrow.cancelled { color: var(--x-cancel); }
.hrow.cancelled .hname { text-decoration: line-through; }
.hrow .time { font-variant-numeric: tabular-nums; color: var(--x-muted); }
.hrow .hname { font-weight: 600; color: var(--x-ink); }
.hrow .hname button { all: unset; cursor: pointer; }
.hrow .hname button:hover { text-decoration: underline; text-underline-offset: 3px; }
.hrow .hname button:focus-visible { outline: 2px solid var(--x-accent); outline-offset: 2px; border-radius: 4px; }
.hrow .what { color: var(--x-ink); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.hrow .dur { font-variant-numeric: tabular-nums; color: var(--x-muted); }
.hrow .num { font-variant-numeric: tabular-nums; }
.hempty { padding: 40px 16px; text-align: center; color: var(--x-muted); }
.again { height: 36px; padding: 0 10px; border-radius: 6px; border: 1px solid var(--x-line-strong); background: var(--x-surface); color: var(--x-ink); font-size: 13px; font-weight: 600; white-space: nowrap; }
.hrow.head { background: var(--x-wash); }

/* ---- ticket v2 (A형) ---- */
.tk { flex: 0 0 auto; padding: 0; gap: 0; overflow: hidden; cursor: pointer; transition: border-color .12s, background-color .12s, transform .08s; -webkit-tap-highlight-color: transparent; }
.tk:hover { border-color: var(--x-line-strong); }
.tk:active { transform: scale(0.99); }
.tk.sel { border-color: var(--x-ink); box-shadow: 0 0 0 1px var(--x-ink); }
.tk:focus-visible { outline: 2px solid var(--x-accent); outline-offset: 2px; }
.tk.mixing { padding-top: 0; }
.tk.mixing::before { display: none; }
.tk.late { background: var(--x-surface); border-color: var(--x-late); }
.tk-hd { display: flex; align-items: flex-start; gap: 8px; padding: 12px 12px 10px 14px; border-bottom: 1px solid var(--x-line); }
.tk.late .tk-hd { background: var(--x-late-bg); border-bottom-color: var(--x-late); }
.tk.follow .tk-hd { border-bottom-color: var(--x-todo-line); }
.tk-who { flex: 1 1 auto; min-width: 0; font-size: 17px; line-height: 23px; }
.tk-who .area { vertical-align: 2px; margin-right: 6px; }
.tk-who .contact { margin-left: 4px; }
.tk-rush { vertical-align: -2px; margin-left: 4px; }
.tk-who b { font-weight: 600; }
.tk-who .contact { font-size: 14px; white-space: nowrap; }
.tk.cancelled .tk-who b { text-decoration: line-through; }
.tk-rush { display: inline-flex; color: var(--x-late); }
.tk-eta { flex: 0 0 auto; text-align: right; font-size: 14px; line-height: 18px; font-weight: 500; color: var(--x-muted); white-space: nowrap; }
.tk-eta small { display: block; font-size: 12px; font-weight: 400; }
.tk-eta.late { color: var(--x-late); font-weight: 600; }
.tk-eta.done { color: var(--x-done); }
.tk-eta.wish small { color: var(--x-warn); }
.tk-chev { align-self: center; flex: 0 0 auto; display: inline-flex; color: var(--x-line-strong); margin-right: -4px; }
.tk:hover .tk-chev { color: var(--x-ink); }
.tk-bd { padding: 10px 14px 4px; display: flex; flex-direction: column; gap: 6px; }
.tk-bd .tk-line { font-size: 16px; line-height: 22px; }
.tk-bd .tk-line b { font-weight: 600; }
.tk-bd .tk-line.chk b { color: var(--x-warn); }
.tk-bd .tk-line.sub { font-size: 14px; }
.tk .lm { color: var(--x-muted); font-size: 13px; font-weight: 400; }
.tk-ft { display: flex; align-items: center; gap: 8px; padding: 8px 12px 12px 14px; min-height: 60px; }
.tk-icons { flex: 1 1 auto; display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; color: var(--x-muted); font-size: 13px; }
.tk-icons span { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.tk-icons .warn { color: var(--x-warn); font-weight: 500; }
.tk-ft .b-main { flex: 0 0 auto; width: auto; height: 44px; padding: 0 18px; font-size: 15px; }
.tk-ft .b-text { flex: 0 0 auto; }
.ic { width: 16px; height: 16px; flex: 0 0 auto; }
.ic-lg { width: 20px; height: 20px; }
.samp { display: flex; flex-wrap: wrap; gap: 6px; }
.samp .chip { display: inline-flex; align-items: center; gap: 6px; }

/* ---- tooltips ---- */
.tip { position: relative; }
.tip:hover::after { content: attr(data-tip); position: absolute; left: 50%; bottom: calc(100% + 6px); transform: translateX(-50%); background: var(--x-ink); color: var(--x-on-ink); font-size: 12px; line-height: 16px; font-weight: 500; padding: 4px 8px; border-radius: 6px; white-space: nowrap; pointer-events: none; z-index: 20; }
.tk-hd .tip:hover::after { bottom: auto; top: calc(100% + 6px); }
.tk { overflow: visible; }
.tk-hd { border-radius: 11px 11px 0 0; }
/* ---- detail v2 ---- */
.dt { gap: 18px; }
.dt-hd { display: flex; flex-direction: column; gap: 4px; }
.dt-name { font-size: 22px; line-height: 28px; font-weight: 700; }
.dt-name .area { vertical-align: 3px; margin-right: 8px; }
.dt-name .tk-rush { margin-left: 6px; vertical-align: -2px; }
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.steps li { display: flex; flex-direction: column; gap: 4px; font-size: 13px; line-height: 18px; color: var(--x-muted); }
.steps li::before { content: ""; height: 6px; border-radius: 3px; background: var(--x-line); margin-bottom: 2px; }
.steps li.done::before { background: var(--x-ink); }
.steps li.cur { color: var(--x-ink); font-weight: 600; }
.steps li.cur::before { background: var(--x-mix); }
.steps.late li.cur::before { background: var(--x-late); }
.steps small { font-size: 12px; font-weight: 400; color: var(--x-muted); min-height: 16px; font-variant-numeric: tabular-nums; }
/* 0029 처리자: same size and grey as the time, never bold; name on its own line under the time (no ellipsis). */
.steps small { display: flex; flex-direction: column; min-width: 0; }
.steps .st-t { white-space: nowrap; }
.steps .st-by { min-width: 0; overflow-wrap: anywhere; }
.dt-facts { display: grid; grid-template-columns: max-content 1fr; gap: 10px 20px; margin: 0; padding: 14px 16px; background: var(--x-bg); border-radius: 10px; font-size: 15px; line-height: 20px; }
.dt-facts dt { color: var(--x-muted); font-size: 14px; }
.dt-facts dd { margin: 0; font-weight: 500; }
.dt-facts .late { color: var(--x-late); font-weight: 600; }
.dt-facts .warn { color: var(--x-warn); }
.dt-facts .inl { display: inline-flex; align-items: center; gap: 6px; }
.band.cancelled { background: var(--x-bg); color: var(--x-cancel); }
.dt-actions { position: sticky; bottom: -24px; display: flex; flex-direction: column; gap: 8px; margin: 4px -20px -24px; padding: 12px 20px 20px; background: var(--x-surface); border-top: 1px solid var(--x-line); z-index: 2; }
.sheet .dt-actions { bottom: -28px; margin: 4px -16px -28px; padding: 12px 16px 24px; }
.dt-actions .b-main { width: 100%; }
.dt-sub { display: flex; flex-wrap: wrap; gap: 6px; }
.b-sub { flex: 1 1 auto; height: 40px; padding: 0 12px; border-radius: 8px; border: 1px solid var(--x-line-strong); background: var(--x-surface); color: var(--x-ink); font: inherit; font-size: 14px; font-weight: 500; cursor: pointer; }
.b-sub:hover { background: var(--x-bg); }
.b-sub.danger { color: var(--x-late); }
/* ---- placed bar ---- */
.placed { display: flex; flex-direction: column; gap: 10px; }
.placed-msg { display: flex; flex-direction: column; gap: 2px; }
.placed-msg b { font-size: 16px; color: var(--x-done); }
.placed-msg span { font-size: 13px; color: var(--x-muted); }
.placed .row { display: grid; grid-template-columns: 1fr 1.4fr; gap: 8px; }
.placed .row button, .placed .row a { height: 48px; font-size: 15px; } /* a: the bar's board links */
.placed-new { align-self: center; }
.add3 { display: flex; flex-direction: column; gap: 8px; }
.add3.empty { padding: 16px; border: 1.5px dashed var(--x-line-strong); border-radius: 12px; background: var(--x-surface); align-items: stretch; }
.add3.err { border-color: var(--x-late); }
.add3-h { font-size: 16px; font-weight: 600; }
.add3-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.add3-row .b-sec { padding: 0 6px; }
.fu-btn { border-color: var(--x-todo-line); color: var(--x-todo); }
.chip.mini-chip.on { background: var(--x-ink); border-color: var(--x-ink); color: var(--x-on-ink); font-weight: 600; }
.chip.mini-chip { min-height: 40px; }

/* ===== theme: 크림 · 코랄 + 페인트 칩 ===== */
.b-main { background: var(--x-accent); border-radius: 16px; font-weight: 600; box-shadow: 0 3px 0 var(--x-accent-press); }
.b-main:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--x-accent-press); }
.b-cancel, .b-danger, .b-sec, .b-more, .b-sub { border-radius: 16px; border-width: 1.5px; }
.b-sec { border-color: var(--x-line-strong); }
.input, .vol, .freq, .qty button, .x-btn, .again { border-radius: 14px; }
.input { border-width: 1.5px; }
.input:focus { outline: none; border-color: var(--x-accent); box-shadow: 0 0 0 3px var(--x-accent-bg); }
.vol.on { border-color: var(--x-accent); background: var(--x-accent-bg); color: var(--x-accent); }
.seg { background: var(--x-seg-bg); border: 0; border-radius: 16px; padding: 4px; gap: 4px; }
.seg button { border-radius: 12px; background: transparent; color: var(--x-muted); }
/* every pill switch keeps no border; an underlined-tab row (.tabs-u, 작업판 C 주문 히스토리 filters) draws its own line (QA BUG-011) */
.seg:not(.tabs-u) button { border: 0 !important; }
.seg button.on { background: var(--x-surface); color: var(--x-ink); box-shadow: 0 2px 6px rgba(var(--x-shadow-ink),0.12); }
.chip { border-width: 1.5px; }
.chip.on { border-color: var(--x-accent); background: var(--x-accent-bg); color: var(--x-accent); }
.tk, .line-card, .modal, .menu, .empty, .eta, .htable, .hsum, .dt-facts, .add3.empty, .toast { border-radius: 22px; }
.tk { border: 1.5px solid var(--x-line); box-shadow: 0 3px 0 var(--x-line); }
.tk:hover { border-color: var(--x-line-strong); box-shadow: 0 3px 0 var(--x-line-strong); }
.tk-hd { border-radius: 20px 20px 0 0; border-bottom: 1.5px dashed var(--x-line); }
.tk.late { box-shadow: 0 3px 0 var(--x-late-foot); }
.tk.sel { border-color: var(--x-accent); box-shadow: 0 0 0 2px var(--x-accent); }
.line-card { border: 1.5px solid var(--x-line); }
.area { background: var(--x-area-bg); color: var(--x-area-ink); border-radius: 8px; font-weight: 700; }
.a-top { background: var(--x-bg); border-bottom-color: transparent; }
.tabs3 { background: var(--x-bg); border-bottom: 0; padding: 0 12px 8px; gap: 4px; }
.tabs3 button { height: 44px; border: 0; border-radius: 14px; }
.tabs3 button.on { background: var(--x-surface); box-shadow: 0 2px 6px rgba(var(--x-shadow-ink),0.10); }
.tabbar { border-top: 0; box-shadow: 0 -4px 16px rgba(var(--x-shadow-ink),0.06); }
.tabbar button.on, .tabbar a.on { color: var(--x-accent); }
.sheet { border-radius: 28px 28px 0 0; }
.pc-side { background: var(--x-bg); border-right: 0; }
.pc-side nav button, .pc-side nav a { border-radius: 14px; }
.pc-side nav button.on, .pc-side nav a.on { background: var(--x-surface); color: var(--x-accent); box-shadow: 0 2px 6px rgba(var(--x-shadow-ink),0.08); }
.pc-side .brand { color: var(--x-accent); }
.pc-panel { border-left: 0; border-radius: 24px 0 0 24px; }
.pill { height: 26px; }
.steps li::before { height: 8px; border-radius: 4px; }
.steps li.cur::before { background: var(--x-accent); }
.dt-facts { background: var(--x-wash); }
.placed-msg b { color: var(--x-accent); }
.fresh { animation: fresh 1.6s ease-out; }
/* 페인트 칩 */
.sw { display: inline-block; width: 14px; height: 14px; border-radius: 50%; margin-right: 8px; vertical-align: -2px; box-shadow: inset 0 0 0 1px rgba(var(--x-shadow-ink),0.14), 0 1px 2px rgba(var(--x-shadow-ink),0.10); flex: 0 0 auto; }
.sw.none { background: transparent; box-shadow: none; border: 1.5px dashed var(--x-line-strong); width: 13px; height: 13px; }
.sw.pearl { background-image: linear-gradient(135deg, rgba(255,255,255,0.65), rgba(255,255,255,0) 60%); }
.sw.in { animation: sw-in 0.25s ease-out; }
@keyframes sw-in { from { opacity: 0; transform: scale(0.6); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .sw.in { animation: none; } }

/* 할 일 = 라벤더 (주문과 구분) */
.tk.follow { background: var(--x-todo-wash); border-color: var(--x-todo-line); box-shadow: 0 3px 0 var(--x-todo-line-soft); }
.tk.follow .tk-hd { border-bottom-color: var(--x-todo-line-soft); }
.tk.follow .b-main { background: var(--x-todo-mid); box-shadow: 0 3px 0 var(--x-todo-press); }
.todo-badge { display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 8px 0 6px; margin-right: 8px; border-radius: 8px; background: var(--x-todo-bg); color: var(--x-todo); font-size: 13px; font-weight: 600; vertical-align: 1px; }
.todo-badge .ic { width: 14px; height: 14px; }

/* 카드 여백 통일 */
.tk-hd { padding: 14px 12px 12px 16px; align-items: flex-start; }
.tk-bd { padding: 12px 16px 4px; }
.tk-ft { padding: 8px 14px 14px 16px; min-height: 64px; }
.tk-eta { padding-top: 1px; }
.tk-chev { align-self: flex-start; margin-top: 1px; }
.tk.ready { border-color: var(--x-line); }
/* 다음 단계 버튼 = 가는 곳의 색 */
.b-main[class*="nx-"] { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.b-main[class*="nx-"] .ic { width: 16px; height: 16px; }
.b-main.nx-mix { background: var(--x-amber); box-shadow: 0 3px 0 var(--x-amber-deep); }
.b-main.nx-ready { background: var(--x-done); box-shadow: 0 3px 0 var(--x-done-deep); }
.b-main.nx-out { background: var(--x-ink); box-shadow: 0 3px 0 var(--x-ink-deep); }
.b-main.nx-todo { background: var(--x-todo-mid); box-shadow: 0 3px 0 var(--x-todo-press); }

/* 가운데 점(·) 정리: words that used to be glued with ' · ' are split into lines, chips and places. Tokens only, no new colors.
   .chip-sq = the square status / source chip that sits between words (늦음, 부재중, 미수금, 취소됨, Pending, 번호 없음, 자동, Pearl,
   확인 필요, 내부용, DM 보냄, ✓ 완료, 출력함, 선택, 직접 입력, 초대함, 비활성, 4건). Picking chips stay .chip pills; count badges and avatars stay round. */
.chip-sq { display: inline-flex; align-items: center; gap: 4px; flex: none; height: 20px; padding: 0 6px; border-radius: 4px; background: var(--x-line); color: var(--x-ink); font-size: 12.5px; font-weight: 600; line-height: 1; white-space: nowrap; vertical-align: middle; font-variant-numeric: tabular-nums; }
.chip-sq.y { background: var(--x-mix-bg); color: var(--x-mix-deep); }
.chip-sq.r { background: var(--x-late-bg); color: var(--x-late-deep); }
.chip-sq.g { background: var(--x-done-bg); color: var(--x-done-deep); }
.chip-sq.p { background: var(--x-todo-bg); color: var(--x-todo); }
.chip-sq.o { background: var(--x-surface); color: var(--x-ink); box-shadow: inset 0 0 0 1px var(--x-line-strong); }
.chip-sq .ic { width: 13px; height: 13px; }
/* 매칭 등급 (MATCH_GRADE): same size and weight for the three, only the background differs */
.chip-sq.grade-std { background: var(--x-ink); color: var(--x-on-ink); }
.chip-sq.grade-blend { background: var(--x-grade-blend-bg); color: var(--x-grade-blend-ink); }
.chip-sq.grade-panel { background: var(--x-mix-bg); color: var(--x-grade-panel-ink); }
/* a grey line under a title (R1 · R6), right-aligned times and people (R5) */
.sub-ln { display: flex; align-items: center; gap: 5px; min-width: 0; font-size: 13px; line-height: 18px; color: var(--x-muted); }
.sub-ln .ic { flex: none; width: 13px; height: 13px; }
.t-right { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; flex: none; color: var(--x-muted); font-size: 13px; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* icon + number (R4: 메모 2, 사진 2) */
.ic-n { display: inline-flex; align-items: center; gap: 4px; flex: none; color: var(--x-muted); font-size: 12.5px; font-weight: 600; font-variant-numeric: tabular-nums; }
.ic-n .ic { width: 13px; height: 13px; }
/* progress bar cells (R4: 조색 1/2, 루트 1/3) */
.pbar { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--x-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pbar i { display: block; width: 14px; height: 4px; border-radius: 2px; background: var(--x-line-strong); }
.pbar i.on { background: var(--x-done); }
/* small grey tag after a label (R9: 선택) */
.opt-tag { display: inline-flex; align-items: center; height: 18px; padding: 0 5px; border-radius: 4px; background: var(--x-line); color: var(--x-muted); font-size: 12px; font-weight: 600; vertical-align: 1px; margin-left: 6px; }
/* name tag + value cells (R3 · R10 · R13) */
.flds { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px 10px; margin: 0; }
.flds.c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.flds > div { min-width: 0; }
.flds dt { margin: 0; font-size: 12px; font-weight: 600; color: var(--x-muted); line-height: 16px; }
.flds dd { margin: 2px 0 0; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 15px; font-weight: 700; color: var(--x-ink); line-height: 20px; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
@media (max-width: 1023.98px) { .flds { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* number + name tag groups (R13: 바뀐 가격 12, 5명 사용 중) */
.stat-g { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.stat-g > span { display: inline-flex; flex-direction: column; min-width: 0; }
.stat-g b { font-size: 18px; font-weight: 700; line-height: 22px; color: var(--x-ink); font-variant-numeric: tabular-nums; }
.stat-g small { font-size: 12px; font-weight: 600; line-height: 16px; color: var(--x-muted); }
.mono-n { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; }
.strike { text-decoration: line-through; color: var(--x-muted); font-variant-numeric: tabular-nums; }
/* R9 툴팁 "샘플 · 주유구" → small "샘플" over "주유구" (data-tip-k = the small top word) */
.tip[data-tip-k]:hover::after { padding-top: 20px; }
.tip[data-tip-k]:hover::before { content: attr(data-tip-k); position: absolute; left: 50%; bottom: calc(100% + 26px); transform: translateX(-50%); color: var(--x-toast-sub); font-size: 11px; line-height: 14px; font-weight: 500; white-space: nowrap; pointer-events: none; z-index: 21; }
.tk-hd .tip[data-tip-k]:hover::before { bottom: auto; top: calc(100% + 10px); }
.pbar .pbar-c { display: inline-flex; gap: 2px; }
/* R10 가격 근거: reasons as a list, the old value struck through, totals as 소계 / 세금 / 합계 */
.tr-ls { margin: 2px 0 0; padding-left: 18px; display: flex; flex-direction: column; gap: 3px; }
.tr-ls li { line-height: 20px; }
.totals .tot-tax { color: var(--x-muted); font-size: 14px; }
.totals .tot-sum { border-top: 1px solid var(--x-line); padding-top: 4px; font-weight: 700; }
.ov-vals { display: flex; align-items: baseline; gap: 6px; }
.pe-cells{margin:2px 0 4px}.pe-cells dd{font-size:14px}
.stat-g.sm { gap: 4px 12px; } .stat-g.sm b { font-size: 15px; line-height: 18px; }

/* 가운데 점(·) 정리 — shared by the board (B and C) */
.toast-host .t-sub { display: block; font-size: 12.5px; line-height: 17px; color: var(--x-toast-sub); font-weight: 400; }
.tk-asg .chip-sq.auto { font-size: 12.5px; color: var(--x-ink); }
.t-push { margin-left: auto; }
.av.q { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; border: 1.5px dashed var(--x-line-strong); background: transparent; color: var(--x-muted); font-size: 11px; font-weight: 700; box-sizing: border-box; }
.voc .voc-tags { display: inline-flex; gap: 4px; flex-wrap: wrap; margin-left: auto; }
.voc .voc-ck { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.voc .voc-why { font-size: 13px; color: var(--x-ink); }

/* Toast (board.js and map.js #toast-host, 작업판 · 지난 주문 · 동선 지도): one ink pill at the bottom centre with a result dot, outside the layout.
   PC: centred on the content beside the sidebar (--side-w, shell.css: 196px, 64px collapsed). Phone: above the tab bar (admin-pages.css .adm .toast, same values). */
.toast-host{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:70;width:max-content;max-width:calc(100vw - 32px);font-family:var(--font-sans);pointer-events:none}
.toast-host .toast{pointer-events:auto;position:relative;overflow:hidden;display:flex;align-items:center;gap:2px;min-height:44px;padding:4px 4px 4px 18px;border-radius:999px;background:var(--x-ink);color:var(--x-on-ink);font-size:14px;line-height:20px;box-shadow:var(--x-shadow);animation:toast-in .22s cubic-bezier(.2,.8,.2,1) both}
.toast-host .toast.out{animation:toast-out .18s ease-in both;pointer-events:none}
.toast-host .t-dot{flex:0 0 8px;width:8px;height:8px;border-radius:50%;margin-right:8px}
.toast-host .t-ok .t-dot{background:var(--x-toast-ok)}
.toast-host .t-err .t-dot{background:var(--x-toast-err)}
.toast-host .t-cancel .t-dot{background:var(--x-toast-cancel)}
.toast-host .t-text{flex:1 1 auto;min-width:0;padding:8px 6px 8px 0;overflow-wrap:anywhere}
.toast-host .toast button{flex:0 0 auto;height:36px;padding:0 10px;border:0;border-radius:999px;background:transparent;color:var(--x-toast-action);font-size:14px;font-weight:500;white-space:nowrap;cursor:pointer}
.toast-host .toast button.x{width:36px;padding:0;color:var(--x-toast-sub);font-size:16px;font-weight:400}
.toast-host .toast button:hover{background:rgba(255,255,255,.08)}
.toast-host .toast button:focus-visible{outline:2px solid var(--x-toast-action);outline-offset:-2px}
.toast-host .t-bar{position:absolute;left:0;bottom:0;width:100%;height:2px;background:rgba(255,255,255,.35);transform-origin:left center;animation:toast-bar var(--toast-ms,4500ms) linear forwards}
.toast-host.paused .t-bar{animation-play-state:paused}
@keyframes toast-in{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes toast-out{from{opacity:1}to{opacity:0}}
@keyframes toast-bar{from{transform:scaleX(1)}to{transform:scaleX(0)}}
@media(min-width:1024px){.toast-host{margin-left:calc(var(--side-w, 196px) / 2);max-width:calc(100vw - var(--side-w, 196px) - 32px)}}
@media(max-width:1023.98px){
  .toast-host{bottom:calc(58px + 16px + env(safe-area-inset-bottom,0px))}
  html.kb-open .toast-host{bottom:16px} /* keyboard open: the tab bar is hidden (shell.css) */
}
@media(prefers-reduced-motion:reduce){.toast-host .toast,.toast-host .toast.out{animation:none}}