:root {
  /* 빌렉 색 체계 — 색 값은 여기에만. 화면에서는 var(--…)로 쓴다 (기준: 빌렉/빌렉_색상_컴포넌트.html).
     템플릿에 남은 옛 색 코드는 theme.js가 그릴 때 이 토큰으로 바꾼다. */
  /* 메인: 빌렉 로고 초록 (#2B4542 = 700) */
  --brand-50: #F1F6F5; --brand-100: #E2ECEA; --brand-200: #C4D7D3; --brand-300: #9DBAB4;
  --brand-400: #71968F; --brand-500: #4E7770; --brand-600: #3A5E58; --brand-700: #2B4542;
  --brand-800: #223734; --brand-900: #172725;
  /* 보조: 따뜻한 모래 · 황동 (초록과 짝, 강조 · '새로' 표시에만 조금) */
  --sand-50: #FBF6EE; --sand-100: #F4E8D4; --sand-300: #DDBB8A; --sand-500: #B8873F; --sand-700: #7C5821;
  /* 회색: 초록 기운이 살짝 도는 회색 */
  --gray-0: #FFFFFF; --gray-25: #F8FAF9; --gray-50: #F2F5F4; --gray-100: #E6EBEA; --gray-200: #D6DEDC;
  --gray-300: #BCC7C4; --gray-500: #85928F; --gray-600: #5E6C69; --gray-700: #3E4B48; --gray-900: #17211F;
  /* 상태 */
  --ok-50: #EAF5EE; --ok-200: #B5DCC3; --ok-600: #2E7D4F; --ok-700: #216240;
  --info-50: #EBF1F8; --info-200: #BCD0E8; --info-600: #3767A6; --info-700: #284F82;
  --warn-50: #FDF3E1; --warn-200: #EDCF95; --warn-500: #C88A12; --warn-700: #7A4A00;
  --bad-50: #FDEDEB; --bad-200: #F2B8B2; --bad-600: #B42318; --bad-700: #8E1B12;

  /* 쓰임 이름 (화면 코드는 이것만 씀) */
  --bg: var(--gray-50); --surface: var(--gray-0); --surface-soft: var(--gray-25);
  --line: var(--gray-200); --line-strong: var(--gray-300);
  --text: var(--gray-900); --text-2: var(--gray-700); --text-3: var(--gray-600); --text-mute: var(--gray-500);
  --primary: var(--brand-700); --primary-hover: var(--brand-800); --primary-soft: var(--brand-50); --primary-line: var(--brand-200);
  --link: var(--brand-600); --focus: var(--brand-400);
  --nav-bg: var(--brand-700); --nav-text: #D3E0DD; --nav-label: #93AAA5; --nav-active: rgba(255, 255, 255, 0.13);
  --accent: var(--sand-500); --accent-soft: var(--sand-50); --accent-text: var(--sand-700);
  --nav-line: rgba(255, 255, 255, 0.22); --nav-hover: rgba(255, 255, 255, 0.08);
  /* 예전 이름 (이 파일의 부품들이 씀) → 색 체계 */
  --ink: var(--text); --ink2: var(--text-2); --mute: var(--text-3); --faint: var(--text-mute);
  --line2: var(--line-strong); --card: var(--surface); --soft: var(--gray-100); --sel: var(--brand-50);
  --nav: var(--nav-bg); --nav2: var(--nav-active); --navtx: var(--nav-text);
  --blue: var(--primary); --blue2: var(--brand-800); --bluebg: var(--brand-50);
  --red: var(--bad-600); --redbg: var(--bad-50); --redln: var(--bad-200);
  --green: var(--ok-600); --green2: var(--ok-700); --greenbg: var(--ok-50);
  --amber: var(--warn-500); --amber2: var(--warn-700); --amberbg: var(--warn-50);
}
* { box-sizing: border-box; }
html { scrollbar-gutter: stable; overflow-y: scroll; }
html, body { margin: 0; background: var(--bg); color: var(--ink); }
body { font-family: 'Pretendard Variable', Pretendard, 'Malgun Gothic', system-ui, sans-serif; font-size: 14px; line-height: 1.55; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--link); }
code, .mono { font-family: inherit; font-variant-numeric: tabular-nums; }
.boot { padding: 40px; color: var(--mute); }
.num { font-variant-numeric: tabular-nums; }
.sr { position: absolute; left: -9999px; }
.muted { color: var(--mute); }
.faint { color: var(--faint); }
.grow { flex: 1; }
.row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.stack { display: grid; gap: 8px; }

/* 틀 */
.shell { min-height: 100vh; display: flex; flex-wrap: wrap; }
.nav { flex: 1 0 220px; max-width: 100%; background: var(--nav); color: var(--navtx); padding: 22px 14px; display: flex; flex-direction: column; gap: 22px; }
.nav .brand { padding: 0 8px; display: grid; }
.nav .brand b { color: #FFF; font-size: 17px; }
.nav .brand span { font-size: 12px; color: var(--nav-label); }
.nav h6 { margin: 0 0 4px; padding: 0 8px; font-size: 11px; letter-spacing: .08em; color: var(--nav-label); font-weight: 400; }
.nav a { display: block; padding: 8px 10px; border-radius: 6px; color: var(--navtx); text-decoration: none; }
.nav a:hover { background: var(--nav-hover); }
.nav a.on { background: var(--nav2); color: #FFF; font-weight: 600; }
.nav .who { margin-top: auto; padding: 10px 8px 0; border-top: 1px solid var(--nav-line); font-size: 13px; display: grid; gap: 4px; }
.nav .who button { justify-self: start; background: none; border: 1px solid var(--nav-line); color: var(--navtx); border-radius: 6px; padding: 3px 10px; cursor: pointer; }
.main { flex: 999 1 560px; min-width: 0; padding: 20px 28px 48px; display: flex; flex-direction: column; gap: 14px; }

/* 공통 부품 */
.btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 6px; border: 1px solid var(--line2); background: #FFF; cursor: pointer; text-decoration: none; color: var(--ink); white-space: nowrap; }
.btn:hover { background: var(--soft); }
.btn.pri { background: var(--primary); border-color: var(--primary); color: #FFF; font-weight: 600; }
.btn.pri:hover { background: var(--primary-hover); border-color: var(--primary-hover); }
.btn.blue { background: var(--blue); border-color: var(--blue); color: #FFF; font-weight: 600; }
.btn.danger { color: var(--red); border-color: var(--redln); }
.btn.sm { padding: 3px 10px; font-size: 12.5px; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.link { background: none; border: 0; padding: 0; color: var(--link); cursor: pointer; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 8px; }
.pill { display: inline-block; font-size: 11.5px; font-weight: 600; padding: 1px 8px; border-radius: 999px; white-space: nowrap; }
.p-red { background: var(--redbg); color: var(--red); } .p-amber { background: var(--amberbg); color: var(--amber2); }
.p-blue { background: var(--bluebg); color: var(--blue2); } .p-green { background: var(--greenbg); color: var(--green2); }
.p-mute { background: var(--soft); color: var(--mute); }
.dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex: none; }
.chip { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line2); border-radius: 999px; padding: 4px 12px; background: #FFF; cursor: pointer; font-size: 13px; }
.chip.on { background: var(--primary); border-color: var(--primary); color: #FFF; }
.input { border: 1px solid var(--line2); border-radius: 6px; padding: 6px 10px; background: #FFF; min-width: 0; }
.input:focus { outline: none; border-color: var(--brand-500); box-shadow: 0 0 0 3px var(--brand-100); }
.btn:focus-visible, .chip:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.field { display: grid; gap: 4px; font-size: 13px; }
.field > span { color: var(--mute); font-size: 12px; }
.err { color: var(--red); font-size: 12.5px; margin: 0; }
.empty { padding: 40px 20px; text-align: center; color: var(--mute); }
h1 { margin: 0; font-size: 20px; }
h2 { margin: 0; font-size: 16px; }
h3 { margin: 0; font-size: 13px; font-weight: 600; }
.head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.head .t { display: grid; flex: 1 1 280px; min-width: 0; }
.head .t small { font-size: 12px; color: var(--mute); }

/* 단계 */
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.steps a { display: flex; gap: 10px; align-items: center; padding: 10px 14px; border-radius: 8px; text-decoration: none; background: #FFF; border: 1px solid var(--line); color: var(--ink2); }
.steps a.done { background: var(--bluebg); border-color: var(--bluebg); color: var(--blue2); }
.steps a.on { background: var(--blue); border-color: var(--blue); color: #FFF; font-weight: 600; }
.steps b { font-weight: 700; }

/* 진행 막대 */
.progress { display: flex; align-items: center; gap: 10px; flex: 1 1 320px; min-width: 0; font-size: 13px; color: var(--mute); }
.progress .bar { flex: 1; height: 6px; background: var(--line); border-radius: 3px; overflow: hidden; min-width: 60px; }
.progress .bar span { display: block; height: 6px; background: var(--green); }

/* 목록 + 상세 */
.md { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 16px; align-items: start; }
.list { max-height: calc(100vh - 260px); min-height: 300px; overflow-y: auto; }
.list .it { display: grid; grid-template-columns: 8px minmax(0, 1fr) auto; gap: 10px; align-items: center; width: 100%; text-align: left; padding: 9px 12px; border: 0; border-bottom: 1px solid var(--line); background: #FFF; cursor: pointer; }
.list .it:hover { background: var(--surface-soft); }
.list .it.on { background: var(--sel); box-shadow: inset 3px 0 0 var(--blue); }
.list .it .nm { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.list .it .sub { font-size: 12px; color: var(--faint); }
.bulk { padding: 12px; border-bottom: 1px solid var(--line); background: var(--soft); display: grid; gap: 8px; font-size: 13px; }
.detail { min-width: 0; }
.detail .top { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px 16px; padding: 16px 18px 8px; }
.detail .top h2 { font-size: 19px; font-weight: 600; }
.detail .big { font-size: 20px; font-weight: 600; }
.strip { margin: 0 18px 10px; padding: 8px 12px; border-radius: 6px; font-size: 13px; background: var(--bluebg); color: var(--blue2); }
.sec { border-top: 1px solid var(--line); }
.sec-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 18px 4px; }
.issue { margin: 0 18px 12px; border: 1px solid var(--redln); background: var(--redbg); border-radius: 8px; padding: 12px 14px; display: grid; gap: 8px; }
.sugg { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; background: #FFF; border: 1px solid var(--line); border-radius: 6px; padding: 6px 6px 6px 10px; font-size: 13px; }
.grp { padding: 10px 18px; border-top: 1px solid var(--line); display: grid; gap: 6px; }
.grp.edited { box-shadow: inset 3px 0 0 var(--green); }
.grp.carried { box-shadow: inset 3px 0 0 var(--blue); }
.grp-h { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.cols { display: grid; grid-template-columns: 14px minmax(0, 1fr) 72px 112px; gap: 4px 10px; align-items: center; }
.cols.h { padding: 6px 18px; font-size: 11.5px; color: var(--faint); letter-spacing: .04em; }
.ln { min-height: 30px; padding: 2px 0; }
.sku { font-family: inherit; font-size: 11.5px; color: var(--brand-600); background: var(--brand-50); padding: 0 5px; border-radius: 3px; white-space: nowrap; }
.sku.none { color: var(--red); background: var(--redbg); }
.carryed { margin: 2px 0 6px 24px; padding: 8px 10px; border-radius: 6px; background: var(--bluebg); display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 13px; }
.editor { display: grid; gap: 6px; background: #FFF; border: 1px solid var(--line2); border-radius: 6px; padding: 10px; }
.editor .er { display: grid; grid-template-columns: minmax(0, 1fr) 72px 32px; gap: 6px; align-items: center; }
.editor .skuhint { grid-column: 1 / -1; font-size: 12px; color: var(--mute); margin-top: -2px; }
.foot { position: sticky; bottom: 0; background: #FFF; border-top: 1px solid var(--line); padding: 12px 18px; border-radius: 0 0 8px 8px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.more { display: block; width: 100%; text-align: left; border: 0; border-top: 1px solid var(--line); background: none; padding: 10px 18px; color: var(--link); cursor: pointer; }

/* 업로드 */
.drop { border: 1.5px dashed var(--gray-500); border-radius: 10px; background: #FFF; padding: 28px; display: grid; justify-items: center; gap: 8px; text-align: center; cursor: pointer; }
.drop.over { border-color: var(--blue); background: var(--bluebg); }
.table { width: 100%; border-collapse: collapse; font-size: 13px; }
.table th { text-align: left; font-weight: 600; color: var(--mute); background: var(--surface-soft); padding: 8px 12px; font-size: 12.5px; }
.table td { padding: 8px 12px; border-top: 1px solid var(--line); vertical-align: top; }
.table tr.click { cursor: pointer; }
.table tr.click:hover td { background: var(--surface-soft); }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.kpis div { background: #FFF; padding: 10px 14px; display: grid; }
.kpis span { font-size: 12px; color: var(--mute); }
.kpis b { font-size: 20px; font-variant-numeric: tabular-nums; }
.days { display: flex; flex-wrap: wrap; gap: 6px; }

/* 정리 결과 표 */
.rt-h, .rt-r { display: grid; gap: 4px 12px; padding: 8px 14px; }
.rt-h { font-size: 11.5px; color: var(--faint); border-bottom: 1px solid var(--line2); position: sticky; top: 0; background: #FFF; z-index: 1; }
.rt-r { border-bottom: 1px solid var(--line); align-items: start; }
.rt-r.exc { background: var(--warn-50); }
.rt-lines { display: grid; gap: 1px; font-size: 12.5px; min-width: 0; }
.rt-lines > div { display: grid; grid-template-columns: minmax(0, 1fr) auto 36px; gap: 8px; align-items: baseline; }
.side { flex: 1 1 280px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.side .scroll { max-height: 640px; overflow-y: auto; }
.side .r { display: grid; grid-template-columns: minmax(0, 1fr) 40px; gap: 2px 8px; padding: 6px 14px; border-bottom: 1px solid var(--gray-100); font-size: 12.5px; }

/* 팝업 공통 틀은 popup.css (재고 화면 Shadow DOM도 같은 파일을 씀) */
.x { width: 32px; height: 32px; border-radius: 6px; border: 1px solid var(--line2); background: #FFF; cursor: pointer; }
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); }
.tabs button { border: 0; background: none; padding: 8px 12px; border-bottom: 2px solid transparent; cursor: pointer; color: var(--mute); }
.tabs button.on { border-color: var(--blue); color: var(--ink); font-weight: 600; }

/* 알림 */
#toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 60; display: grid; gap: 8px; }
#toast .t { background: var(--ink); color: #FFF; border-radius: 8px; padding: 10px 14px; font-size: 13px; display: flex; gap: 12px; align-items: center; box-shadow: 0 6px 18px rgba(0, 0, 0, .2); max-width: 90vw; }
#toast .t.bad { background: var(--red); }
#toast .t button { background: none; border: 1px solid rgba(255, 255, 255, .5); color: #FFF; border-radius: 6px; padding: 2px 10px; cursor: pointer; }

/* 로그인 */
.login { min-height: 100vh; display: grid; place-items: center; padding: 16px; }
.login .card { width: min(360px, 100%); padding: 28px; display: grid; gap: 14px; }

/* 배송일 작업 공통 머리 (업로드 · 검토 · 결과 · 매장 연결 · 다음 단계) — 탭을 옮겨도 그대로, 아래 내용만 바뀐다 */
.daywrap { flex: 999 1 560px; min-width: 0; display: flex; flex-direction: column; }
.daywrap.fit { height: 100vh; overflow: hidden; }
.daywrap.fit > main { flex: 1 1 auto !important; min-height: 0; height: auto; }
.dayhead { position: sticky; top: 0; z-index: 20; flex: none; background: #FFF; border-bottom: 1px solid var(--line); display: flex; flex-direction: column; }
.dayhead > .ph { border-bottom-color: var(--gray-100); }
/* 공통 머리 아래 보조 줄: 이번 주 배송일 · 범례 · 접기 → 단계 6칸 */
.dh-sub { padding: 10px 28px 12px; display: flex; flex-direction: column; gap: 10px; }
/* 단계 탭 줄 = 단계 6칸 │ 초기화 · 긴급 추가 │ 확인 → (6단계 모두 같은 버튼 · 같은 이름 · 같은 크기 → 단계 칸 크기가 안 바뀜) */
.dh-stepline { display: flex; align-items: center; gap: 14px; }
.dh-stepline .dh-steps { flex: 1 1 auto; min-width: 0; }
.dh-acts { flex: none; display: flex; align-items: center; gap: 8px; }
.dayhead .dh-act { flex: none; }
.dayhead .dh-go { width: 96px; justify-content: center; padding: 0; }
.dh-stepline .dh-wipe, .dh-stepline .dh-urgent, .dh-stepline .dh-go { height: 40px; }
.dh-stepline .dh-go { font-size: 13.5px; }
.dh-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.dh-sp { flex: 1; }
.dh-vsep { width: 1px; height: 22px; background: var(--line); flex: none; }
.dh-go.off, .dh-go.off:hover { background: var(--gray-50); border-color: var(--line); color: var(--text-mute); cursor: default; }
.dh-act { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 0 1 auto; }
.dh-act-t { font-size: 12.5px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.dh-act-t .w { color: var(--warn-700); font-weight: 600; }
.dh-go { flex: none; font: inherit; font-size: 13px; font-weight: 700; padding: 0 14px; border-radius: 7px; border: 1px solid var(--primary); background: #FFF; color: var(--primary); cursor: pointer; white-space: nowrap; text-decoration: none; height: 32px; box-sizing: border-box; display: inline-flex; align-items: center; }
.dh-go.pri { background: var(--primary); color: #FFF; }
.dh-go:hover { border-color: var(--primary-hover); }
.dh-go.pri:hover { background: var(--primary-hover); }
@media (max-width: 1100px) { .dh-act-t { display: none; } }
.dh-date { position: relative; display: flex; gap: 6px; align-items: center; flex: none; }
.dh-ibtn { width: 32px; height: 32px; border: 1px solid var(--line-strong); border-radius: 6px; background: #FFF; cursor: pointer; }
.dh-date input { height: 32px; box-sizing: border-box; padding: 0 8px; border: 1px solid var(--line-strong); border-radius: 6px; background: #FFF; }
.dh-late { width: 7px; height: 7px; border-radius: 50%; background: var(--warn-500); }
.dayhead.fold .dh-date { flex: none; }
.dh-wipe { border: 1px solid var(--line); background: #FFF; color: var(--text-3); font: inherit; font-size: 12.5px; cursor: pointer; padding: 0 12px; border-radius: 7px; white-space: nowrap; height: 32px; box-sizing: border-box; display: inline-flex; align-items: center; }
.dh-wipe:hover { border-color: var(--bad-600); color: var(--bad-600); background: var(--bad-50); }
.dh-urgent { border: 1px solid var(--bad-600); background: #FFF; color: var(--bad-600); font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; padding: 0 12px; border-radius: 7px; white-space: nowrap; height: 32px; box-sizing: border-box; display: inline-flex; align-items: center; }
.dh-urgent:hover { background: var(--bad-50); }
/* 긴급 추가 창 */
.ug-steps { display: flex; gap: 6px; } .ug-steps span { flex: 1; text-align: center; font-size: 12px; padding: 4px 0; border-radius: 6px; background: var(--gray-100); color: var(--text-3); }
.ug-steps span.on { background: var(--text); color: #FFF; font-weight: 700; } .ug-steps span.ok { background: var(--ok-50); color: var(--ok-700); }
.ug-note { border-radius: 8px; padding: 9px 12px; font-size: 12.5px; background: var(--info-50); color: var(--info-700); }
.ug-f { display: grid; gap: 4px; min-width: 0; } .ug-f > span { font-size: 12px; font-weight: 600; color: var(--text-3); }
.ug-f input, .ug-f select { font: inherit; font-size: 13px; padding: 7px 10px; border: 1px solid var(--line-strong); border-radius: 6px; background: #FFF; color: var(--text); width: 100%; box-sizing: border-box; }
.ug-f input:disabled, .ug-f select:disabled { background: var(--gray-50); border-color: var(--line); color: var(--text-3); cursor: not-allowed; }
.ug-row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
.ug-srch { position: relative; }
.ug-dd { display: none; position: absolute; left: 0; right: 0; top: calc(100% + 2px); z-index: 5; background: #FFF; border: 1px solid var(--line-strong); border-radius: 8px; box-shadow: 0 6px 18px rgba(0,0,0,.12); max-height: 280px; overflow: auto; }
.ug-dd.open { display: block; }
.ug-dd button { display: flex; justify-content: space-between; gap: 10px; width: 100%; text-align: left; border: 0; border-top: 1px solid var(--gray-100); background: #FFF; padding: 7px 10px; cursor: pointer; color: var(--text); font: inherit; font-size: 12.5px; }
.ug-dd button:first-child { border-top: 0; } .ug-dd button:hover, .ug-dd button.on { background: var(--brand-50); }
.ug-dd small, .ug-opt small { color: var(--text-3); font-size: 11.5px; font-weight: 400; } .ug-dd .none { padding: 9px 10px; color: var(--text-3); font-size: 12.5px; }
.ug-opts { display: grid; gap: 6px; }
.ug-opt { display: flex; gap: 10px; align-items: center; border: 1px solid var(--line); border-radius: 8px; padding: 9px 12px; cursor: pointer; background: #FFF; text-align: left; color: var(--text); font: inherit; font-size: 13px; }
.ug-opt[aria-pressed="true"] { border-color: var(--text); box-shadow: 0 0 0 1px var(--text); background: var(--surface-soft); }
.ug-opt .tx { display: grid; gap: 1px; flex: 1; } .ug-opt em { font-style: normal; font-size: 11px; font-weight: 700; margin-left: 6px; padding: 1px 7px; border-radius: 999px; background: var(--info-50); color: var(--info-700); }
.ug-opt .ld { font-size: 12px; color: var(--text-3); white-space: nowrap; }
.dh-fold { border: 0; background: none; color: var(--text-3); font-size: 12px; cursor: pointer; padding: 4px 6px; white-space: nowrap; }
.dh-steps { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.dh-step { display: flex; gap: 8px; align-items: center; padding: 8px 12px; border-radius: 8px; border: 1px solid var(--line); background: #FFF; color: var(--text-2); font-weight: 600; text-decoration: none; white-space: nowrap; min-width: 0; }
.dh-step em { flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 12px; font-weight: 700; background: var(--gray-100); }
.dh-step .sub { margin-left: auto; font-size: 12px; font-weight: 500; color: var(--text-3); font-variant-numeric: tabular-nums; }
/* 단계 머리 「이력」 (owners.py): 이 배송일 담당 · 확정 · 풀기 팝업 · 단계 칸 · 다음 단계 버튼과 같은 높이 40 · 시계 아이콘 */
.dh-hist { flex: none; height: 40px; box-sizing: border-box; display: inline-flex; align-items: center; gap: 6px; padding: 0 14px; border-radius: 8px; border: 1px solid var(--line-strong); background: #FFF; color: var(--text-2); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.dh-hist::before { content: ""; width: 16px; height: 16px; background: currentColor; -webkit-mask: var(--ic-hist) center / 16px no-repeat; mask: var(--ic-hist) center / 16px no-repeat;
  --ic-hist: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12a9 9 0 1 0 3-6.7L3 8'/%3E%3Cpath d='M3 3v5h5'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E"); }
.dh-hist:hover { background: var(--gray-50); }
/* 끝난 단계: 옅은 초록 바탕 + 초록 체크 */
.dh-step.done { background: var(--ok-50); border-color: var(--ok-200); color: var(--ok-700); }
.dh-step.done em { background: var(--ok-600); color: #FFF; }
.dh-step.done .sub { color: var(--ok-700); }
.dh-step.done.cur { border: 2px solid var(--primary); background: var(--ok-50); color: var(--brand-800); }
.dh-step.done.cur em { background: var(--primary); }
.dh-step.off { background: var(--bg); border-style: dashed; border-color: var(--line-strong); color: var(--text-mute); }
.dh-step.cur { border: 2px solid var(--primary); padding: 7px 11px; color: var(--brand-800); background: #FFF; box-shadow: 0 2px 8px rgba(43, 69, 66, .14); }
.dh-step.cur em { background: var(--primary); color: #FFF; }
.dh-step.soon { background: var(--bg); border-style: dashed; border-color: var(--line-strong); color: var(--text-mute); }
.dh-step.soon em { background: transparent; border: 1px dashed var(--line-strong); }
.dh-step.soon .sub { font-size: 10.5px; padding: 0 5px; border-radius: 10px; border: 1px solid var(--line-strong); }
.dh-step.soon.cur { border: 2px dashed var(--primary); color: var(--brand-800); }
.dh-step.soon.cur em { background: var(--primary); border: 0; color: #FFF; }
/* 접힌 머리: 날짜 · 단계 탭을 한 줄로 (창 높이가 낮으면 저절로) */
.dayhead.fold > .ph { min-height: 0; padding: 8px 28px; }
.dayhead.fold .dh-sub { padding: 6px 28px 8px; }
.dayhead.fold .ph-cr, .dayhead.fold .ph-desc { display: none; }
.dayhead.fold .ph-t h1 { font-size: 16px; }
.dayhead.fold .dh-row { flex-wrap: nowrap; }
.dayhead.fold .dh-steps { display: flex; gap: 6px; min-width: 0; }
.dayhead.fold .dh-step { flex: none; padding: 5px 10px; font-size: 12.5px; }
.dayhead.fold .dh-step.cur { padding: 4px 9px; }
.dayhead.fold .dh-step .sub { display: none; }
.dayhead.fold .dh-step.cur .sub { display: inline; margin-left: 6px; }
@media (max-width: 1320px) { .dh-step.soon .sub { display: none; } }
/* 좁은 화면: 단계 칸 글자가 옆 칸으로 넘치지 않게 (넘치면 …) · 이력은 아이콘만 · 1600 아래는 작은 글씨(원본 5 / 6 · 확정 v1 등) 빼기 — ✓가 끝난 단계를, 오른쪽 칸이 숫자를 보여 줌 */
.dh-step { overflow: hidden; }
.dh-step .lbl { flex: none; }
.dh-step .sub { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 1500px) { .dh-hist .t { display: none; } .dh-hist { padding: 0 11px; } }
@media (max-width: 1600px) { .dh-step .sub { display: none; } }
@media (max-width: 1200px) { .dh-step em { display: none; } .dh-step { justify-content: center; padding: 8px 6px; } .dh-step.cur { padding: 7px 5px; } }  /* 칸이 70px 남짓 — 동그라미를 빼고 이름만 (끝난 단계는 초록 바탕) */
@media (max-width: 1280px) { .dayhead.fold .dh-step.cur .sub, .dayhead.fold .dh-fold .t { display: none; } }
@media (max-width: 1080px) { .dayhead.fold .dh-step.soon .lbl { display: none; } }
.soonbox { flex: 1; display: grid; place-items: center; text-align: center; color: var(--text-3); border: 1.5px dashed var(--line-strong); border-radius: 10px; background: #FFF; padding: 48px 20px; }
.soonbox b { display: block; font-size: 16px; color: var(--text); margin: 10px 0 4px; }

/* 검토 화면: 창 높이에 맞추고 목록 · 상세만 따로 스크롤 */
.rv-main { height: 100vh; overflow: hidden; }
.rv-body { flex: 1; min-height: 0; grid-template-columns: 320px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); }
.rv-pane { min-height: 0; overflow-y: auto; }
/* 오른쪽 재고 패널이 있을 때 세 칸 (목록 · 매장 · 재고) */
.rv-body.rv-body3 { grid-template-columns: 300px minmax(0, 1fr) 300px; }
@media (max-width: 1280px) { .rv-body.rv-body3 { grid-template-columns: 250px minmax(0, 1fr) 260px; } }
.kbd { display: inline-grid; place-items: center; min-width: 20px; height: 19px; padding: 0 5px; border-radius: 4px; border: 1px solid var(--line-strong); border-bottom-width: 2px; background: #FFF; font-family: inherit; font-size: 11px; font-weight: 600; line-height: 1; color: var(--text-2); }
.kbd-on { background: rgba(255, 255, 255, .15); border-color: rgba(255, 255, 255, .4); color: #FFF; }

@media (max-width: 900px) {
  .daywrap.fit { height: auto; overflow: visible; }
  .dh-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .rv-main { height: auto; overflow: visible; }
  .rv-body, .rv-body.rv-body3 { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
  .rv-pane { overflow: visible; }
  .md { grid-template-columns: minmax(0, 1fr); }
  .list { max-height: 360px; }
  .steps { grid-template-columns: minmax(0, 1fr); }
  .main { padding: 16px; }
}

/* 출고 품목 (SKU) · 쓰이는 매칭: 줄에 마우스를 올리면 업체 · 주문 자리에 [매칭표에서 고치기] */
.sk-use .sk-fix { display: none; }
.sk-use:hover { background: var(--surface-soft); }
.sk-use:hover .sk-fix { display: inline-flex; }
.sk-use:hover .sk-meta { visibility: hidden; }

/* 왼쪽 메뉴 (스케치_메뉴_레퍼런스.html 진녹 · 아래 카드 포함): 화면을 내려도 그 자리에 고정 (메뉴가 창보다 길 때만 메뉴 안에서 스크롤)
   로고 아래 구분선 · 묶음 3개 · 메뉴마다 아이콘 · 지금 보는 메뉴 = 흰 바탕 + 진녹 굵은 글자
   오른쪽 숫자 배지는 빨강(바로 챙길 것) · 주황(확인할 것) · 회색(참고) · 아래: 이번 달 진행 카드 → 사용자 (⋮ 안에 로그아웃) */
.sidenav { position: sticky; top: 0; align-self: flex-start; height: 100vh; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
  padding: 18px 14px 14px; display: flex; flex-direction: column; }
.sn-logo { display: block; padding: 2px 6px 16px; border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
.sn-logo img { display: block; width: 116px; height: auto; }
/* 묶음 구분 (11/6 · 스케치_메뉴이름분류.html B 구분선): 묶음 사이에 가는 선 + 간격 · 묶음 이름은 조금 크고 밝게 · 이름 없는 묶음(월별 현황)은 이름 칸 없음 */
/* 11/6 간격: 처음(묶음 12px · 줄 36px)은 「너무 길다」, 다음(6px · 32px)은 「너무 붙었다」 → 중간 (묶음 8px · 줄 34px) */
.sn-groups { flex: 1 0 auto; display: flex; flex-direction: column; gap: 0; padding-top: 4px; }
.sidenav .ngrp { display: flex; flex-direction: column; gap: 2px; padding: 8px 0; }
.sidenav .ngrp + .ngrp { border-top: 1px solid rgba(255, 255, 255, 0.14); }
.sn-lbl { font-size: 11.5px; font-weight: 700; letter-spacing: 0.04em; color: #C4D7D3; padding: 0 8px 4px; }
.sn-groups .sn-item { min-height: 34px; padding: 5px 8px; }
.sn-lbl:empty { display: none; }
.sn-item { position: relative; display: flex; align-items: center; gap: 12px; min-height: 36px; padding: 6px 8px; border-radius: 8px; color: var(--nav-text); text-decoration: none; font-size: 13.5px; }
.sn-item:hover { background: var(--nav-hover); }
.sn-item .t { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sn-item[aria-current], .sn-item[aria-current]:hover { background: #FFF; color: var(--primary); font-weight: 700; }
.sn-st { flex: none; display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; font-size: 11.5px; font-weight: 700; color: #FFF; font-variant-numeric: tabular-nums; }
.sn-st.bad { background: var(--bad-600); }
.sn-st.warn { background: var(--warn-500); }
.sn-st.mute { background: rgba(255, 255, 255, 0.16); color: var(--nav-text); }
.sn-st.info { background: var(--info-600); } /* 확인 기다리는 보고서 */
.sn-st.hol { background: var(--sand-300); color: #3B2A0E; margin-right: 4px; } /* 연휴용 최소 재고 적용 중 */
/* 메뉴 아이콘: 선 아이콘(SVG)을 마스크로 써서 글자색을 그대로 따름 · 안 고른 메뉴는 흐리게 */
.sn-ic { flex: none; width: 18px; height: 18px; background: currentColor; opacity: 0.7; -webkit-mask: var(--ic) center / 18px no-repeat; mask: var(--ic) center / 18px no-repeat; }
.sn-item[aria-current] .sn-ic { opacity: 1; }
.ic-upload { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='4' width='14' height='17' rx='2'/%3E%3Cpath d='M9 3h6v3H9zM9 11h6M9 15h4'/%3E%3C/svg%3E"); }
.ic-online { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 4h2.6l2.3 11h10.4L20.5 7.5H6.2'/%3E%3Ccircle cx='9' cy='19' r='1.5'/%3E%3Ccircle cx='17' cy='19' r='1.5'/%3E%3C/svg%3E"); }  /* 온라인 · 기타 주문: 장바구니 */
.ic-monthly { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20h16M7 16v-5M12 16V7M17 16v-8'/%3E%3C/svg%3E"); }
.ic-report { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 3h7l4 4v14H7z'/%3E%3Cpath d='M14 3v4h4M10 17v-3M13 17v-5M16 17v-2'/%3E%3C/svg%3E"); }
.ic-donelog { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l1.5 1.5L8 5M4 12l1.5 1.5L8 11M4 18l1.5 1.5L8 17M11 6h9M11 12h9M11 18h9'/%3E%3C/svg%3E"); }
.ic-returns { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 14L4 9l5-5'/%3E%3Cpath d='M4 9h10.5a5.5 5.5 0 0 1 0 11H11'/%3E%3C/svg%3E"); }  /* 반품 관리: 되돌아오는 화살표 */
.ic-stock { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7.5 12 3l9 4.5v9L12 21l-9-4.5z'/%3E%3Cpath d='M3 7.5 12 12l9-4.5M12 12v9'/%3E%3C/svg%3E"); }
.ic-matching { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 14a4 4 0 0 0 5.7 0l3-3a4 4 0 0 0-5.7-5.7l-1 1'/%3E%3Cpath d='M14 10a4 4 0 0 0-5.7 0l-3 3a4 4 0 0 0 5.7 5.7l1-1'/%3E%3C/svg%3E"); }
.ic-sku { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12V4h8l9 9-8 8z'/%3E%3Ccircle cx='7.5' cy='8.5' r='1.3'/%3E%3C/svg%3E"); }
.ic-stores { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 9 5.5 4h13L20 9M4 9h16M4 9v11h16V9M9 20v-6h6v6'/%3E%3C/svg%3E"); }
.ic-storelink { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-7-6.2-7-11.5a7 7 0 0 1 14 0C19 14.8 12 21 12 21z'/%3E%3Cpath d='M10 8.5a2 2 0 1 1 2.8 1.8c-.5.3-.8.7-.8 1.2M12 14h.01'/%3E%3C/svg%3E"); }
.ic-drivers { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h11v10H3zM14 10h4l3 3v3h-7'/%3E%3Ccircle cx='7' cy='17.5' r='1.8'/%3E%3Ccircle cx='17' cy='17.5' r='1.8'/%3E%3C/svg%3E"); }
.ic-sources { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 21V5l8-2v18M12 8l8 2v11M3 21h18M7.5 8h1M7.5 12h1M7.5 16h1M15.5 13h1M15.5 17h1'/%3E%3C/svg%3E"); }
.ic-users { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3 5 6v5c0 4.5 3 8 7 10 4-2 7-5.5 7-10V6z'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E"); }
.ic-dayclose { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='10' width='14' height='11' rx='2'/%3E%3Cpath d='M8 10V7a4 4 0 0 1 8 0v3M12 14v3'/%3E%3C/svg%3E"); }  /* 일별 마감: 자물쇠 */
.ic-holidays { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='5' width='17' height='15.5' rx='2'/%3E%3Cpath d='M3.5 10h17M8 3v4M16 3v4M8.5 14.5h2M13.5 14.5h2'/%3E%3C/svg%3E"); }
.ic-freight { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 9h7v7H4zM13 9h7v7h-7zM8.5 3h7v6h-7zM3 16h18M3 20h18M5 16v4M12 16v4M19 16v4'/%3E%3C/svg%3E"); }  /* 화물 납품: 파렛트 위 박스 (11/9) */
/* 이번 달 진행 카드 (누르면 월별 현황) */
.sn-card { display: block; margin: 16px 0 14px; padding: 12px 14px; border-radius: 12px; background: rgba(0, 0, 0, 0.2); color: #FFF; text-decoration: none; }
.sn-card:hover { background: rgba(0, 0, 0, 0.28); }
.sn-card b { display: block; font-size: 13px; }
.sn-card-sub { display: block; margin: 2px 0 10px; font-size: 12px; opacity: 0.85; word-break: keep-all; }
.sn-card-pr { display: flex; align-items: center; gap: 8px; font-size: 11.5px; font-variant-numeric: tabular-nums; }
.sn-card-tr { flex: 1; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, 0.22); overflow: hidden; }
.sn-card-tr i { display: block; height: 100%; border-radius: 2px; background: #FFF; }
/* 사용자: 이름 첫 글자 · 이름 · 권한 · ⋮ 안에 로그아웃 */
.sn-who { position: relative; display: flex; align-items: center; gap: 10px; padding: 12px 4px 0; border-top: 1px solid rgba(255, 255, 255, 0.1); }
.sn-ava { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, 0.16); color: #FFF; font-weight: 700; font-size: 14px; }
.sn-nm { flex: 1; min-width: 0; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sn-nm b { display: block; color: #FFF; font-size: 13px; overflow: hidden; text-overflow: ellipsis; }
.sn-nm small { font-size: 11.5px; color: var(--nav-label); }
.sn-more { flex: none; width: 28px; height: 28px; border: 0; border-radius: 6px; background: none; color: var(--nav-text); cursor: pointer; font-size: 16px; font-weight: 700; line-height: 1; }
.sn-more:hover, .sn-more[aria-expanded="true"] { background: var(--nav-hover); color: #FFF; }
.sn-pop { position: absolute; right: 0; bottom: calc(100% + 6px); z-index: 5; width: 150px; background: #FFF; color: var(--text-2); border-radius: 8px; box-shadow: 0 10px 24px rgba(0, 0, 0, 0.25); padding: 4px; }
.sn-pop button { display: block; width: 100%; text-align: left; border: 0; background: none; padding: 7px 10px; border-radius: 6px; font-size: 12.5px; color: var(--text-2); cursor: pointer; }
.sn-pop button:hover { background: var(--gray-50); }
/* 좁은 화면에서는 메뉴가 위로 올라가므로 고정하지 않음 */
@media (max-width: 820px) { .sidenav { position: static; height: auto; overflow: visible; } }

/* 보고서 PDF: 보고서 화면에서 인쇄하면 종이(.paper)만 (머리 · 버튼은 report.css @media print가 숨김) */
@media print {
  @page { size: A4; margin: 0; }
  body.print-report { background: #FFF; }
  body.print-report .sidenav, body.print-report #toast { display: none !important; }
  body.print-report .shell > main, body.print-report main { padding: 0 !important; }
}
/* 사용자 · 권한 (빌렉/스케치_사용자_권한.html 가안 · pages.js US): 탭 4개 · 배송 담당 이력 = 필터 띠 → 날짜 목록 → 오른쪽 고른 날 이력 */
.us-main { flex: 999 1 560px; min-width: 0; padding: 16px 28px 48px; box-sizing: border-box; display: flex; flex-direction: column; gap: 14px; }
.us-tabs { display: flex; align-items: center; border-bottom: 1px solid var(--line); margin-top: -4px; }
.us-tab { display: flex; align-items: center; gap: 6px; height: 38px; padding: 0 2px; margin-right: 24px; border: 0; background: none; cursor: pointer; position: relative; font: inherit; font-size: 14px; font-weight: 600; color: var(--text-3); }
.us-tab small { font-size: 11px; font-weight: 600; padding: 0 6px; border-radius: 999px; background: var(--gray-100); color: var(--text-3); }
.us-tab[aria-selected="true"] { color: var(--text); font-weight: 700; }
.us-tab[aria-selected="true"]::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--primary); }
.us-split { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 20px; align-items: start; }
.us-split.us-users { grid-template-columns: minmax(0, 1fr) 320px; }
.us-split.us-perm { grid-template-columns: minmax(0, 1fr) 360px; }
.us-card { background: #FFF; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; min-width: 0; }
.us-ch { display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-bottom: 1px solid var(--line); min-height: 52px; box-sizing: border-box; }
.us-ch h3 { margin: 0; font-size: 14px; }
.us-ch .sub { font-size: 12px; color: var(--text-3); }
.us-sp { flex: 1; }
.us-link { border: 0; background: none; padding: 0; font: inherit; font-size: 12.5px; font-weight: 600; color: var(--link); cursor: pointer; text-decoration: none; white-space: nowrap; }
.us-link:hover { text-decoration: underline; }
/* 표 (가로줄 · 회색 머리 줄) */
.us-t { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 13px; }
.us-t th, .us-t td { padding: 0 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: left; }
.us-t th:first-child, .us-t td:first-child { padding-left: 16px; }
.us-t th:last-child, .us-t td:last-child { padding-right: 16px; }
.us-t th { height: 34px; font-size: 12px; font-weight: 600; color: var(--text-3); background: var(--gray-25); border-bottom: 1px solid var(--line); }
.us-t td { height: 42px; border-top: 1px solid var(--gray-100); }
.us-t tbody tr:first-child td { border-top: 0; }
.us-t .num { text-align: right; font-variant-numeric: tabular-nums; }
.us-t th.w1 { width: 120px; } .us-t th.w2 { width: 140px; } .us-t th.w3 { width: 96px; } .us-t th.w4 { width: 130px; }
.us-t tr.click { cursor: pointer; }
.us-t tr.click:hover td { background: var(--gray-25); }
.us-t tr.on td { background: var(--brand-50); }
.us-t tr.on td:first-child { box-shadow: inset 3px 0 0 var(--brand-600); }
.us-t tr.off td { color: var(--text-mute); }
.us-empty td { height: 80px !important; text-align: center !important; color: var(--text-3); }
.us-role, .us-st { display: inline-block; font-size: 11.5px; font-weight: 700; padding: 1px 8px; border-radius: 999px; white-space: nowrap; }
.us-role.admin { background: var(--brand-100); color: var(--brand-800); }
.us-role.staff { background: var(--info-50); color: var(--info-700); }
.us-role.viewer { background: var(--gray-100); color: var(--text-2); }
.us-role.logi { background: var(--warn-50); color: var(--warn-700); }
.us-role.driver { background: var(--ok-50); color: var(--ok-700); }
.us-st.ok { background: var(--ok-50); color: var(--ok-700); }
.us-st.stop { background: var(--gray-100); color: var(--text-3); }
.us-st.lock { background: var(--bad-50); color: var(--bad-700); }
/* 필터 띠: ‹ 달 › │ 사람 · 칩 ……… 보이는 날 수 */
.us-band { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 16px; border-bottom: 1px solid var(--line); background: var(--gray-25); }
.us-band select, .us-q { height: 30px; border: 1px solid var(--line-strong); border-radius: 7px; padding: 0 8px; background: #FFF; font: inherit; font-size: 12.5px; color: var(--text); }
.us-q { width: 240px; padding: 0 10px; }
.us-vsep { width: 1px; height: 20px; background: var(--line); margin: 0 4px; }
.us-cnt { font-size: 12.5px; color: var(--text-3); }
.us-cnt b { color: var(--text); }
.us-mnav { display: inline-flex; align-items: center; border: 1px solid var(--primary-line); border-radius: 8px; overflow: hidden; background: var(--primary-soft); }
.us-mnav button { border: 0; background: transparent; width: 30px; height: 30px; cursor: pointer; color: var(--primary); font-size: 17px; font-weight: 700; line-height: 1; }
.us-mnav button:disabled { color: var(--brand-200); cursor: default; }
.us-mnav b { padding: 0 12px; font-size: 14px; color: var(--brand-800); line-height: 30px; background: #FFF; border-left: 1px solid var(--primary-line); border-right: 1px solid var(--primary-line); white-space: nowrap; }
.us-chip { height: 30px; display: inline-flex; align-items: center; gap: 6px; padding: 0 11px; border-radius: 999px; border: 1px solid var(--line-strong); background: #FFF; font: inherit; font-size: 12.5px; font-weight: 600; color: var(--text-2); cursor: pointer; }
.us-chip em { font-style: normal; font-size: 11.5px; color: var(--text-mute); }
.us-chip.bad em { color: var(--bad-600); }
.us-chip.warn em { color: var(--warn-700); }
.us-chip[aria-pressed="true"] { background: var(--brand-700); border-color: var(--brand-700); color: #FFF; }
.us-chip[aria-pressed="true"] em { color: var(--brand-200); }
/* 날짜 목록 칸: 이름(안 잘림) + 시각 · v2 · 안 함 */
.us-days th.d { width: 112px; }
.us-days td.d { font-weight: 600; font-variant-numeric: tabular-nums; }
.us-who { display: inline-flex; align-items: baseline; gap: 6px; min-width: 0; max-width: 100%; }
.us-who b { font-weight: 600; flex: none; }
.us-who small { font-size: 11.5px; color: var(--text-mute); font-variant-numeric: tabular-nums; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.us-who i { flex: none; font-style: normal; font-size: 10.5px; font-weight: 700; padding: 0 5px; border-radius: 4px; background: var(--bad-50); color: var(--bad-700); }
.us-who.me b { color: var(--ok-700); }
.us-who.me b::before { content: '✓ '; }
.us-who.dim b { color: var(--text-mute); font-weight: 400; }
.us-miss { font-size: 12px; font-weight: 700; color: var(--warn-700); background: var(--warn-50); padding: 1px 8px; border-radius: 999px; }
.us-none { color: var(--gray-300); }
/* 오른쪽: 고른 날 단계 4칸 + 시간순 이력 */
.us-side { position: sticky; top: 16px; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.us-dhead { padding: 14px 16px 12px; border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: 10px; }
.us-dhead .t { display: flex; align-items: baseline; gap: 8px; }
.us-dhead h3 { margin: 0; font-size: 17px; }
.us-stages { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; }
.us-stages > div { border: 1px solid var(--line); border-radius: 8px; padding: 6px 7px; display: grid; gap: 1px; min-width: 0; }
.us-stages span { font-size: 11px; color: var(--text-3); }
.us-stages b { font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.us-stages .ok { background: var(--ok-50); border-color: var(--ok-200); }
.us-stages .ok b { color: var(--ok-700); }
.us-stages .miss { background: var(--warn-50); border-color: var(--warn-200); }
.us-stages .miss b { color: var(--warn-700); }
.us-stages .no b { color: var(--gray-300); }
.us-tl { list-style: none; margin: 0; padding: 8px 16px 14px; max-height: calc(100vh - 260px); overflow: auto; }
.us-tl li { display: grid; grid-template-columns: 78px 14px minmax(0, 1fr); gap: 0 8px; padding: 7px 0; position: relative; }
.us-tl li + li::before { content: ''; position: absolute; left: 91px; top: -9px; height: 16px; border-left: 1px solid var(--line); }
.us-tl time { font-size: 12px; color: var(--text-3); font-variant-numeric: tabular-nums; line-height: 20px; }
.us-tl .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--gray-300); margin-top: 6px; }
.us-tl .key .dot { background: var(--brand-600); }
.us-tl .undo .dot { background: var(--bad-600); }
.us-tl p { margin: 0; font-size: 13px; line-height: 20px; }
.us-tl .key p span { font-weight: 700; }
.us-tl .undo p span { color: var(--bad-700); font-weight: 700; }
.us-tl small { grid-column: 3; font-size: 12px; color: var(--text-mute); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.us-old { border-top: 1px solid var(--line); }
.us-old summary { padding: 10px 16px; font-size: 12.5px; color: var(--text-3); cursor: pointer; }
.us-nil { margin: 0; padding: 20px 16px; font-size: 13px; color: var(--text-3); text-align: center; }
/* 사용자: 목록 + 오른쪽 편집 */
.us-invite { display: flex; flex-wrap: wrap; gap: 10px 12px; align-items: flex-end; padding: 14px 16px; border-bottom: 1px solid var(--line); background: var(--gray-25); }
.us-invite label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; font-weight: 600; color: var(--text-2); flex: 1 1 150px; }
.us-invite input, .us-invite select { height: 34px; border: 1px solid var(--line-strong); border-radius: 7px; padding: 0 10px; background: #FFF; font: inherit; font-size: 13px; font-weight: 400; color: var(--text); }
.us-err { flex: 1 1 100%; font-size: 12.5px; color: var(--bad-600); }
.us-edit .in { padding: 14px 16px; display: flex; flex-direction: column; gap: 12px; }
.us-edit .lab { font-size: 12px; font-weight: 600; color: var(--text-2); }
.us-roles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.us-roles button { text-align: left; padding: 7px 10px; min-height: 44px; border-radius: 7px; border: 1px solid var(--line-strong); background: #FFF; cursor: pointer; display: flex; flex-direction: column; font: inherit; color: var(--text); }
.us-roles button b { font-size: 13px; }
.us-roles button span { font-size: 11px; color: var(--text-3); }
.us-roles button[aria-checked="true"] { border: 2px solid var(--brand-600); background: var(--brand-50); padding: 6px 9px; }
.us-roles button:disabled { background: var(--gray-50); cursor: not-allowed; opacity: .7; }
.us-checks { display: flex; flex-wrap: wrap; gap: 14px; font-size: 13px; color: var(--text-2); }
.us-checks label { display: inline-flex; gap: 5px; align-items: center; }
/* 물류 · 기사님 계정: 사용자 추가 줄의 맡은 창고 · 기사님 연결, 오른쪽 패널의 기사님 고르기 */
.us-invite .us-inl { display: flex; flex-direction: column; gap: 4px; font-size: 12px; font-weight: 600; color: var(--text-2); }
.us-invite .us-inl .us-checks { height: 34px; align-items: center; }
.us-invite .us-checks label { flex: none; flex-direction: row; font-size: 13px; font-weight: 400; }
.us-invite .us-checks input { height: auto; }
.us-drv { height: 34px; border: 1px solid var(--line-strong); border-radius: 7px; padding: 0 8px; background: #FFF; font: inherit; font-size: 13px; color: var(--text); }
.us-temp { font-size: 12px; color: var(--warn-700); }
.us-rh { display: flex; justify-content: space-between; align-items: baseline; }
.us-recent { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; color: var(--text-2); }
.us-efoot { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--line); background: var(--gray-25); }
.btn.us-bad { color: var(--bad-600); border-color: var(--bad-200); }
/* 작업 기록 */
.us-logs td.t { color: var(--text-3); font-variant-numeric: tabular-nums; }
.us-logs td.u { font-weight: 600; }
.us-more { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 10px 16px; border-top: 1px solid var(--line); font-size: 12.5px; color: var(--text-3); }
/* 역할 · 권한 */
.us-mx th.c, .us-mx td.c { width: 96px; text-align: center; }
.us-mx td.c { font-weight: 700; }
.us-mx td.c.y { color: var(--brand-700); }
.us-mx td.c.n { color: var(--gray-300); }
.us-mx td small { color: var(--text-mute); font-size: 11.5px; margin-left: 6px; }
.us-rules { margin: 0; padding: 12px 16px 14px 32px; display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--text-2); }
@media (max-width: 1100px) { .us-split, .us-split.us-users, .us-split.us-perm { grid-template-columns: minmax(0, 1fr); } .us-side { position: static; } }
@media (max-width: 720px) { .us-main { padding: 16px 16px 48px; } .us-q { width: 100%; } }
/* 좌측 메뉴 접기 (스케치_메뉴접기.html · app.js navRail): 「«」 버튼 · 아이콘만 메뉴(.sidenav.rail) · 진행 동그라미 · 이름 말풍선(#navTip) */
.sn-toggle { position: absolute; top: 18px; right: 10px; width: 26px; height: 26px; border-radius: 7px; border: 1px solid rgba(255, 255, 255, 0.18); background: transparent; color: var(--nav-text); cursor: pointer; font-size: 13px; line-height: 1; display: grid; place-items: center; padding: 0; }
.sn-toggle:hover { background: var(--nav-hover); color: #FFF; }
.sn-ring { display: none; }
.sidenav.rail { flex: 0 0 64px !important; width: 64px; padding: 14px 8px 12px; scrollbar-width: none; }
.sidenav.rail::-webkit-scrollbar { display: none; }
.sidenav.rail .sn-logo { padding: 2px 0 12px; display: grid; place-items: center; }
.sidenav.rail .sn-logo img { width: 26px; height: 26px; object-fit: cover; object-position: left center; }
.sidenav.rail .sn-toggle { position: static; margin: 10px auto 0; flex: none; }
.sidenav.rail .sn-groups { gap: 10px; padding-top: 10px; }
.sidenav.rail .ngrp { padding: 0; }
.sidenav.rail .ngrp + .ngrp { border-top: 0; }  /* 아이콘만일 때는 묶음 이름 자리(sn-lbl)가 구분선 */
.sidenav.rail .sn-lbl { font-size: 0; padding: 0; height: 1px; margin: 0 10px 6px; background: rgba(255, 255, 255, 0.14); }
.sidenav.rail .sn-item { justify-content: center; padding: 8px 0; gap: 0; }
.sidenav.rail .sn-item .t { display: none; }
.sidenav.rail .sn-st { position: absolute; top: 2px; right: 4px; min-width: 16px; height: 16px; padding: 0 4px; font-size: 10px; box-shadow: 0 0 0 2px var(--nav-bg); }
.sidenav.rail .sn-st.hol { display: none; }
.sidenav.rail .sn-item[aria-current] .sn-st { box-shadow: 0 0 0 2px #FFF; }
.sidenav.rail .sn-card { margin: 10px 0; padding: 6px 0; display: grid; place-items: center; background: none; }
.sidenav.rail .sn-card:hover { background: var(--nav-hover); }
.sidenav.rail .sn-card > :not(.sn-ring) { display: none; }
.sidenav.rail .sn-ring { position: relative; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: conic-gradient(#FFF 0 var(--p, 0%), rgba(255, 255, 255, 0.2) 0); font-size: 9.5px; font-weight: 700; color: #FFF; font-variant-numeric: tabular-nums; }
.sidenav.rail .sn-ring::before { content: ''; position: absolute; inset: 4px; border-radius: 50%; background: var(--nav-bg); }
.sidenav.rail .sn-ring span { position: relative; }
.sidenav.rail .sn-who { justify-content: center; padding: 10px 0 0; }
.sidenav.rail .sn-nm, .sidenav.rail .sn-more, .sidenav.rail .sn-pop { display: none; }
#navTip { position: fixed; z-index: 60; padding: 6px 10px; border-radius: 7px; background: var(--brand-900); color: #FFF; font-size: 12.5px; font-weight: 600; white-space: nowrap; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3); pointer-events: none; }
#navTip small { display: block; font-weight: 400; color: var(--brand-200); font-size: 11.5px; }
#navTip::before { content: ''; position: absolute; left: -5px; top: 50%; margin-top: -5px; border: 5px solid transparent; border-left: 0; border-right-color: var(--brand-900); }
@media (max-width: 820px) { .sn-toggle { display: none; } }  /* 위아래로 쌓는 좁은 화면은 접기 없음 */
.ic-system { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M12 2.8v2.4M12 18.8v2.4M2.8 12h2.4M18.8 12h2.4M5.5 5.5l1.7 1.7M16.8 16.8l1.7 1.7M5.5 18.5l1.7-1.7M16.8 7.2l1.7-1.7'/%3E%3C/svg%3E"); }
/* 원본 업체 목록: 줄을 누르면 상세 팝업 (sources.js open) */
.src-row:hover { background: var(--gray-25); }
/* 휴대폰 화면 (물류 · 기사님 계정) — 스케치_지시서_모바일체크.html · 색은 프로그램 토큰 그대로 */
.mob { min-height: 100vh; display: flex; flex-direction: column; background: var(--bg); }
.mob-top { background: var(--nav-bg); color: #FFF; padding: 14px 16px 12px; }
.mob-k { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 12px; color: var(--nav-text); }
.mob-who { position: relative; }
.mob-me { border: 0; background: rgba(255, 255, 255, 0.14); color: #FFF; border-radius: 999px; padding: 2px 10px; font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; }
.mob-menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 5; background: #FFF; border-radius: 8px; box-shadow: 0 10px 24px rgba(0, 0, 0, 0.25); padding: 4px; min-width: 120px; }
.mob-menu button { display: block; width: 100%; text-align: left; border: 0; background: none; padding: 10px 12px; border-radius: 6px; font: inherit; font-size: 14px; color: var(--text-2); cursor: pointer; }
.mob-top h1 { margin: 4px 0 6px; font-size: 18px; }
.mob-chips { display: flex; flex-wrap: wrap; gap: 6px; font-size: 12px; }
.mob-chips span { background: rgba(255, 255, 255, 0.14); border-radius: 999px; padding: 2px 9px; }
.mob-empty { background: #FFF; border: 1px solid var(--line); border-radius: 14px; padding: 28px 16px; display: grid; gap: 4px; justify-items: center; text-align: center; color: var(--text-3); font-size: 13.5px; }
.mob-empty b { color: var(--text); font-size: 15px; }
.mob-empty { margin: 12px; }
.mb-ghost { margin-top: 8px; height: 36px; padding: 0 14px; border-radius: 9px; border: 1px solid var(--line-strong); background: #FFF; font: inherit; font-size: 13px; color: var(--text-2); cursor: pointer; }
.mb-days { display: flex; gap: 6px; margin-top: 8px; }
.mb-days button { height: 30px; padding: 0 12px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.3); background: transparent; color: var(--nav-text); font: inherit; font-size: 12.5px; cursor: pointer; }
.mb-days button[aria-pressed="true"] { background: #FFF; color: var(--nav-bg); font-weight: 700; }
/* 탭 · 진행 · 보기 */
.mb-blks { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 8px 12px; background: #FFF; border-bottom: 1px solid var(--line); }
.mb-blks::-webkit-scrollbar { display: none; }
.mb-blks button { flex: none; height: 36px; padding: 0 13px; border-radius: 999px; border: 1px solid var(--line-strong); background: #FFF; font: inherit; font-size: 13.5px; font-weight: 700; color: var(--text-2); cursor: pointer; }
.mb-blks button small { font-weight: 500; color: var(--text-mute); }
.mb-blks button[aria-pressed="true"] { background: var(--primary); border-color: var(--primary); color: #FFF; }
.mb-blks button[aria-pressed="true"] small { color: var(--nav-text); }
.mb-tabs { display: grid; grid-template-columns: 1fr 1fr; background: #FFF; border-bottom: 1px solid var(--line); }
.mb-tabs button { height: 50px; border: 0; border-bottom: 3px solid transparent; background: #FFF; font: inherit; font-weight: 700; font-size: 15px; color: var(--text-3); cursor: pointer; }
.mb-tabs button[aria-selected="true"] { color: var(--text); border-bottom-color: var(--primary); }
.mb-tabs button small { display: block; font-size: 12px; font-weight: 500; color: var(--text-mute); margin-top: -2px; }
.mb-prog { background: #FFF; border-bottom: 1px solid var(--line); padding: 10px 16px; display: grid; gap: 6px; }
.mb-prog .l { display: flex; justify-content: space-between; align-items: baseline; font-size: 13px; color: var(--text-3); }
.mb-prog .l b { font-size: 17px; color: var(--text); }
.mb-prog .tr { height: 7px; border-radius: 4px; background: var(--gray-100); overflow: hidden; }
.mb-prog .tr i { display: block; height: 100%; background: var(--ok-600); border-radius: 4px; }
.mb-vt { display: flex; align-items: center; gap: 10px; padding: 8px 14px; background: #FFF; border-bottom: 1px solid var(--line); font-size: 12.5px; color: var(--text-3); }
.mb-seg { display: inline-flex; border: 1px solid var(--line-strong); border-radius: 9px; overflow: hidden; }
.mb-seg button { border: 0; border-left: 1px solid var(--gray-100); background: #FFF; padding: 7px 18px; font: inherit; font-size: 13.5px; font-weight: 600; color: var(--text-2); cursor: pointer; }
.mb-seg button:first-child { border-left: 0; }
.mb-seg button[aria-pressed="true"] { background: var(--primary); color: #FFF; }
/* 카드 · 품목 줄 */
.mb-list { flex: 1; padding: 10px 12px 96px; display: flex; flex-direction: column; gap: 10px; }
.mb-bsec { margin: 4px 2px -2px; font-size: 13px; font-weight: 800; color: var(--text-2); }
.mb-card { flex: none; background: #FFF; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.mb-card.cur { border: 2px solid var(--primary); }
.mb-card.done { background: var(--gray-25); }
.mb-ch { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px 8px; }
.mb-no { flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--gray-100); color: var(--text-2); display: grid; place-items: center; font-weight: 800; font-size: 14px; }
.mb-card.cur .mb-no { background: var(--primary); color: #FFF; }
.mb-card.done .mb-no { background: var(--ok-600); color: #FFF; }
.mb-ch .nm { flex: 1; min-width: 0; }
.mb-ch .nm b { display: block; font-size: 16px; }
.mb-ch .nm small { color: var(--text-3); font-size: 12.5px; }
.mb-ch .bx { flex: none; text-align: right; font-size: 12px; color: var(--text-3); }
.mb-ch .bx b { display: block; font-size: 18px; color: var(--text); }
.mb-items { border-top: 1px solid var(--gray-100); }
.mb-it { width: 100%; display: flex; align-items: center; gap: 10px; padding: 11px 14px; border: 0; border-top: 1px solid var(--gray-100); background: #FFF; text-align: left; cursor: pointer; min-height: 54px; font: inherit; color: inherit; }
.mb-it:first-child { border-top: 0; }
/* 이월 「이미 처리됨」 (11/9): 싣지 마세요 줄 · 확정 뒤 바뀜 띠 */
.mb-it.gone { background: var(--gray-25); cursor: default; }
.mb-it.gone .t b, .mb-it.gone .q { color: var(--text-mute); text-decoration: line-through; }
.mb-it.gone .ck { border-style: dashed; color: var(--text-mute); }
.mb-it.gone.bad { background: var(--bad-50); }
.mb-it .q s.was { font-size: 12px; font-weight: 500; color: var(--text-mute); margin-right: 3px; }
.mb-gtag { display: inline-block; margin-top: 3px; font-size: 11.5px; font-weight: 800; padding: 1px 8px; border-radius: 6px; background: var(--warn-50); color: var(--warn-700); border: 1px solid var(--warn-200); }
.mb-gtag.bad { background: var(--bad-600); color: #FFF; border-color: var(--bad-600); }
.mb-unck { flex: none; height: 32px; padding: 0 10px; border-radius: 8px; border: 1px solid var(--bad-600); background: #FFF; color: var(--bad-600); font: inherit; font-size: 13px; font-weight: 800; cursor: pointer; }
.mb-card.chg { border: 2px solid var(--warn-500); }
.mb-chg { display: flex; align-items: flex-start; gap: 10px; width: 100%; padding: 10px 14px; border: 0; border-bottom: 2px solid var(--warn-500); background: var(--warn-50); color: var(--warn-700); font: inherit; font-size: 13px; text-align: left; cursor: pointer; }
.mb-chg.bad { background: var(--bad-50); border-bottom-color: var(--bad-600); color: var(--bad-700); }
.mb-chg .ic { flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--warn-500); color: #FFF; display: grid; place-items: center; font-weight: 900; }
.mb-chg.bad .ic { background: var(--bad-600); }
.mb-chg .t { flex: 1; min-width: 0; } .mb-chg .t b { display: block; font-size: 14px; }
.mb-chg .go { flex: none; font-weight: 700; text-decoration: underline; }
.mb-gonebox { margin: 0 14px 8px; padding: 7px 10px; border-radius: 8px; background: var(--warn-50); border: 1px solid var(--warn-200); color: var(--warn-700); font-size: 13px; }
.mb-gonebox b { display: block; font-size: 12.5px; }
.mb-it .t { flex: 1; min-width: 0; }
.mb-it .t b { display: block; font-size: 14px; font-weight: 600; }
.mb-it .t small { color: var(--brand-600); font-size: 12px; }
.mb-it .q { flex: none; font-size: 17px; font-weight: 800; font-variant-numeric: tabular-nums; min-width: 34px; text-align: right; }
.mb-it .q small { font-size: 11px; font-weight: 500; color: var(--text-mute); margin-left: 1px; }
.mb-it .ck { flex: none; width: 30px; height: 30px; border-radius: 50%; border: 2px solid var(--gray-300); display: grid; place-items: center; color: transparent; font-weight: 900; }
.mb-it.on { background: var(--ok-50); }
.mb-it.on .t b { color: var(--text-3); text-decoration: line-through; }
.mb-it.on .ck { background: var(--ok-600); border-color: var(--ok-600); color: #FFF; }
.mb-it.part .ck { border-color: var(--ok-600); background: linear-gradient(90deg, var(--ok-200) 50%, #FFF 50%); }
.mb-it.lock .ck { border-color: var(--gray-200); background: var(--gray-100); }
.mb-it.lock .t b, .mb-it.lock .q { color: var(--text-mute); }
.mb-lg { flex: none; font-size: 11px; font-weight: 700; padding: 1px 6px; border-radius: 5px; white-space: nowrap; border: 1px solid; }
.mb-lg.ok { color: var(--ok-700); background: var(--ok-50); border-color: var(--ok-200); }
.mb-lg.wait { color: var(--warn-700); background: var(--warn-50); border-color: var(--warn-200); }
.mb-fold { display: flex; align-items: center; justify-content: space-between; padding: 0 14px 12px; color: var(--ok-700); font-size: 13px; font-weight: 700; }
.mb-fold button { border: 0; background: none; color: var(--text-3); font: inherit; font-size: 12.5px; cursor: pointer; }
.mb-allrow { padding: 0 14px 10px; }
.mb-allrow button { width: 100%; height: 40px; border-radius: 10px; border: 1px dashed var(--brand-200); background: var(--brand-50); color: var(--brand-700); font: inherit; font-weight: 800; font-size: 14px; cursor: pointer; }
.mb-allrow button.off { border-style: solid; border-color: var(--line); background: #FFF; color: var(--text-3); font-weight: 600; }
.mb-allrow button.lock { border-style: solid; border-color: var(--gray-200); background: var(--gray-50); color: var(--text-mute); }
.mb-foot { position: fixed; left: 0; right: 0; bottom: 0; padding: 10px 12px 14px; background: linear-gradient(to top, var(--bg) 70%, rgba(242, 245, 244, 0)); }
.mb-left { height: 48px; border-radius: 12px; background: var(--gray-200); color: var(--text-2); display: grid; place-items: center; font-weight: 800; font-size: 15px; }
.mb-left.ok { background: var(--ok-600); color: #FFF; }
.mb-big { height: 48px; border-radius: 12px; border: 1px solid var(--line-strong); background: #FFF; font: inherit; font-weight: 800; font-size: 15px; cursor: pointer; width: 100%; color: var(--text); }
.mb-big.pri { background: var(--primary); border-color: var(--primary); color: #FFF; }
.mb-big.warn { color: var(--warn-700); border-color: var(--warn-200); background: var(--warn-50); }
.mb-big.warn2 { background: var(--warn-700); border-color: var(--warn-700); color: #FFF; }
.mb-big:disabled { opacity: .5; cursor: default; }
/* 배송 카드 */
.mb-warn { padding: 10px 12px; border-radius: 10px; background: var(--warn-50); border: 1px solid var(--warn-200); color: var(--warn-700); font-size: 13px; font-weight: 600; display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.mb-warn button { border: 0; background: none; color: var(--warn-700); text-decoration: underline; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.mb-info { display: grid; gap: 6px; padding: 0 14px 12px; }
.mb-info .ln { display: flex; align-items: flex-start; gap: 8px; font-size: 14px; line-height: 1.45; }
.mb-info .li { flex: none; width: 18px; text-align: center; font-size: 13px; }
.mb-info .lt { flex: 1; min-width: 0; color: var(--text); text-decoration: underline; text-decoration-color: var(--gray-300); text-underline-offset: 3px; }
.mb-info span.lt { text-decoration: none; }
.mb-info .lt a { color: inherit; text-decoration: underline; text-decoration-color: var(--gray-300); text-underline-offset: 3px; }
.mb-info .ln.mm { font-size: 13px; color: var(--text-3); }
.mb-pw { flex: none; font-size: 12.5px; font-weight: 700; color: var(--warn-700); }
.mb-cpi { flex: none; width: 30px; height: 26px; margin-left: 4px; border: 0; border-radius: 6px; background: var(--gray-50); color: var(--text-3); font-size: 14px; cursor: pointer; vertical-align: 1px; }
/* 품목 보기: 카드 안에서 눈에 띄게 (단추 모양 · 펼치면 표처럼) */
.mb-sumbtn { display: flex; justify-content: space-between; align-items: center; gap: 8px; width: calc(100% - 28px); margin: 0 14px 10px; height: 44px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--line-strong); background: var(--gray-25); font: inherit; font-size: 14px; color: var(--text-2); cursor: pointer; }
.mb-sumbtn b { color: var(--text); }
.mb-sumbtn .go { color: var(--brand-700); font-weight: 800; font-size: 13.5px; }
.mb-sumbtn.on { border-color: var(--brand-600); background: var(--brand-50); border-bottom-left-radius: 0; border-bottom-right-radius: 0; margin-bottom: 0; }
.mb-sm { margin: 0 14px 12px; border: 1px solid var(--brand-600); border-top: 0; border-radius: 0 0 10px 10px; background: #FFF; }
.mb-sm div { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 9px 12px; border-top: 1px solid var(--gray-100); font-size: 14px; color: var(--text); }
.mb-sm div:first-child { border-top: 0; }
.mb-sm small { display: block; font-size: 11.5px; color: var(--brand-600); }
.mb-sm b { flex: none; font-size: 16px; font-variant-numeric: tabular-nums; }
.mb-sm b small { display: inline; margin-left: 1px; color: var(--text-mute); font-weight: 500; }
.mb-acts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 0 14px 14px; }
.mb-donebar { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 10px 14px; border-top: 1px solid var(--ok-200); background: var(--ok-50); color: var(--ok-700); font-weight: 700; font-size: 13.5px; }
.mb-donebar.w { background: var(--warn-50); border-top-color: var(--warn-200); color: var(--warn-700); }
.mb-donebar small { display: block; font-weight: 500; font-size: 12px; color: var(--text-3); }
.mb-donebar > span:last-child { display: flex; gap: 12px; flex: none; }
.mb-donebar button { border: 0; background: none; color: var(--text-3); font: inherit; font-size: 12.5px; cursor: pointer; }
/* 미출 */
.mb-miss { margin: 0 14px 14px; border: 1px solid var(--warn-200); background: var(--warn-50); border-radius: 12px; padding: 12px; display: grid; gap: 10px; }
.mb-miss .mh { display: flex; align-items: center; font-size: 13px; font-weight: 800; color: var(--warn-700); }
.mb-miss .mh .sp { flex: 1; }
.mb-miss .lnk { border: 0; background: none; color: var(--warn-700); text-decoration: underline; font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; }
.mb-whysel { height: 46px; border-radius: 10px; border: 1px solid var(--warn-200); background: #FFF; padding: 0 10px; font: inherit; font-size: 15px; font-weight: 600; color: var(--text-3); }
.mb-whysel.on { color: var(--text); border-color: var(--warn-500); }
.mb-memo { min-height: 64px; border-radius: 10px; border: 1px solid var(--warn-200); background: #FFF; padding: 10px 12px; font: inherit; font-size: 15px; resize: vertical; }
.mb-miss .mh .req { color: var(--bad-600); margin-left: 3px; }
.mb-donebar small.memo { color: var(--text-2); }
.mb-mrs { display: grid; gap: 6px; }
.mb-mr { display: flex; align-items: center; gap: 8px; background: #FFF; border: 1px solid var(--line); border-radius: 10px; padding: 6px 8px 6px 6px; }
.mb-mr.on { border-color: var(--warn-500); }
.mb-mr .mn { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; border: 0; background: none; text-align: left; cursor: pointer; padding: 4px; font: inherit; color: inherit; }
.mb-mr .mn .t { min-width: 0; }
.mb-mr .mn b { display: block; font-size: 13.5px; }
.mb-mr .mn small { font-size: 12px; color: var(--text-3); }
.mb-mr.on .mn small { color: var(--warn-700); font-weight: 700; }
.mb-mr .ck2 { flex: none; width: 26px; height: 26px; border-radius: 7px; border: 2px solid var(--gray-300); display: grid; place-items: center; font-weight: 900; font-size: 13px; color: #FFF; }
.mb-mr.on .ck2 { background: var(--warn-500); border-color: var(--warn-500); }
.mb-step { flex: none; display: inline-flex; align-items: center; border: 1px solid var(--line-strong); border-radius: 9px; background: #FFF; overflow: hidden; }
.mb-step button { width: 36px; height: 34px; border: 0; background: #FFF; font: inherit; font-size: 18px; font-weight: 800; cursor: pointer; }
.mb-step button:disabled { color: var(--gray-300); cursor: default; }
.mb-step b { min-width: 30px; text-align: center; font-variant-numeric: tabular-nums; }
.mb-mfoot { display: grid; grid-template-columns: 1fr 2fr; gap: 8px; }
/* 관리 묶음 (보고서 · 시스템 설정): 메뉴 맨 아래 계정 바로 위 · 묶음 이름 없이 (스케치_메뉴정리.html C안) */
.sn-foot { display: flex; flex-direction: column; gap: 2px; padding: 8px 0 10px; border-top: 1px solid rgba(255, 255, 255, 0.1); }
.sn-foot .sn-item { min-height: 32px; font-size: 13px; }
.sn-groups + .sn-foot { margin-top: 14px; }
.sidenav.rail .sn-foot { padding: 8px 0; }
/* 휴대폰: 아이폰은 글자가 16px 보다 작은 입력칸을 누르면 화면을 확대하고, 로그인 뒤에도 확대가 남아 화면이 오른쪽으로 잘려 보인다.
   손가락으로 쓰는 좁은 화면에서만 입력칸 글자를 16px 로 맞춘다 (사무실 PC 화면은 그대로). */
@media (max-width: 820px) and (pointer: coarse) {
  input, select, textarea { font-size: 16px !important; }
}