/*
 * 경인청과 ERP 공통 스타일
 *
 * PRD 5장 태블릿 UI 원칙
 * - 기준 기기: 태블릿(가로 1024px 이상) → 모바일 360px → 데스크탑 1280px
 * - 터치 대상 최소 48px
 * - 야외 시장 밝은 환경: 고대비 글자, 색만으로 상태를 구분하지 않음(글자·기호를 함께 표시)
 */

:root {
  --bg: #f4f5f2;
  --surface: #ffffff;
  --text: #111611;
  --muted: #4a524a;
  --line: #c9cec6;
  --primary: #1d5c2e;
  --primary-text: #ffffff;
  --danger: #a3160f;
  --ok-bg: #e3f1e5;
  --err-bg: #fbe5e3;
  --focus: #0b57d0;
  --touch: 48px;
  --radius: 8px;
  font-size: 17px;
}

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", sans-serif;
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
}

h1 { font-size: 1.5rem; margin: 0 0 .5rem; }
h2 { font-size: 1.2rem; margin: 1.5rem 0 .5rem; }
a { color: var(--primary); }
code { font-size: 1.1em; padding: 0 .25em; background: var(--bg); border: 1px solid var(--line); border-radius: 4px; }

:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

/* ---------- 버튼 ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .25rem;
  min-height: var(--touch); min-width: var(--touch); padding: 0 1rem;
  border: 2px solid var(--text); border-radius: var(--radius);
  background: var(--surface); color: var(--text);
  font: inherit; font-weight: 600; text-decoration: none; cursor: pointer;
}
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn-primary { background: var(--primary); border-color: var(--primary); color: var(--primary-text); }
/* 보조 버튼(닫기·로그아웃 등): 테두리를 옅게 보여 버튼인 것을 알 수 있게 */
.btn-ghost { border-color: var(--line); background: transparent; color: var(--muted); }
.btn-ghost:hover { border-color: var(--muted); color: var(--text); background: var(--bg); }
.btn-sm { min-height: 40px; padding: 0 .75rem; }
.btn-block { width: 100%; }

/* ---------- 상단 바·메뉴 ---------- */

.topbar {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; gap: .75rem;
  min-height: 56px; padding: 0 1rem;
  background: var(--surface); border-bottom: 2px solid var(--line);
}
.brand { font-weight: 700; font-size: 1.1rem; color: var(--text); text-decoration: none; }
.who { margin-left: auto; display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.badge { padding: .1rem .5rem; border: 1px solid var(--line); border-radius: 999px; font-size: .85rem; color: var(--muted); }
.menu-toggle { display: none; }

.layout { display: flex; min-height: calc(100vh - 56px); }
.layout.no-nav { display: block; }

.sidenav {
  flex: 0 0 200px; padding: 1rem .5rem;
  background: var(--surface); border-right: 2px solid var(--line);
  display: flex; flex-direction: column; gap: .25rem;
}
.nav-item {
  min-height: var(--touch); padding: 0 1rem; text-align: left;
  border: 0; border-radius: var(--radius); background: transparent;
  font: inherit; color: var(--text); cursor: pointer;
}
.nav-item.active { background: var(--primary); color: var(--primary-text); font-weight: 700; }
.nav-item.active::before { content: "▸ "; }

.content { flex: 1; min-width: 0; padding: 1.25rem; }

/* ---------- 알림 ---------- */

.toast {
  position: fixed; top: 64px; left: 50%; transform: translateX(-50%); z-index: 20;
  display: flex; align-items: center; gap: .75rem;
  max-width: calc(100% - 32px); padding: .5rem .75rem .5rem 1rem;
  border: 2px solid var(--text); border-radius: var(--radius);
  font-weight: 700; box-shadow: 0 4px 16px rgba(0, 0, 0, .15);
}
.toast-ok { background: var(--ok-bg); }
.toast-error { background: var(--err-bg); border-color: var(--danger); }
.toast-icon { font-size: 1.2rem; }

.msg-error { color: var(--danger); font-weight: 600; }
.msg-error::before { content: "! "; }
.notice { padding: .75rem 1rem; background: var(--ok-bg); border-left: 4px solid var(--primary); }
.muted { color: var(--muted); }
p.muted { margin: 0 0 1rem; }

.temp-password {
  margin: 1rem 0; padding: 1rem; background: #fff7d6; border: 2px solid #8a6d00; border-radius: var(--radius);
}
.temp-password p { margin: .5rem 0; }

/* ---------- 폼 ---------- */

.field { display: flex; flex-direction: column; gap: .4rem; margin-bottom: 1.25rem; }
.field > span { font-weight: 600; }
/* 체크박스·라디오를 뺀 모든 입력칸을 같은 모양으로 (tel·date 가 빠지지 않도록 type 을 나열하지 않는다) */
.field input:not([type=checkbox]):not([type=radio]):not([type=file]), .field select, .field textarea {
  min-height: var(--touch); padding: 0 .75rem;
  border: 2px solid var(--line); border-radius: var(--radius);
  background: var(--surface); color: var(--text); font: inherit; width: 100%;
}
.field textarea { min-height: 6rem; padding: .5rem .75rem; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--focus); outline: none; }
.field.invalid input, .field.invalid select, .field.invalid textarea { border-color: var(--danger); }
.field input[readonly]:not([type=checkbox]):not([type=radio]) { background: var(--bg); }
.field-check { flex-direction: row; align-items: center; gap: .75rem; }
.field-check input { width: 28px; height: 28px; }
.field .help { color: var(--muted); }
.req { color: var(--danger); }

.panel {
  background: var(--surface); border: 2px solid var(--line); border-radius: var(--radius);
  padding: 1.25rem; margin: 1rem 0 1.5rem;
}
.panel.narrow { max-width: 480px; }
.panel h2 { margin-top: 0; }
.panel > .page-head h2 { margin-bottom: 0; }
.panel > :last-child { margin-bottom: 0; }
/* 폼·패널 끝의 저장 버튼 줄은 위 입력과 띄운다 */
form > .actions, .panel > .actions { margin-top: 1.25rem; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0 1rem; }
.actions { display: flex; gap: .5rem; flex-wrap: wrap; justify-content: flex-end; }

.login { max-width: 400px; margin: 10vh auto 0; padding: 2rem 1.5rem; background: var(--surface); border: 2px solid var(--line); border-radius: var(--radius); }
.login h1 { text-align: center; margin-bottom: 1.5rem; }

/* ---------- 목록 ---------- */

.page-head { display: flex; align-items: center; gap: .75rem 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.page-head h1 { margin: 0; }
.page-head .actions { margin-left: auto; }

.filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .75rem 1rem; margin: 1.25rem 0 1rem; }
.field.inline { margin: 0; min-width: 160px; }

.table-wrap { overflow-x: auto; background: var(--surface); border: 2px solid var(--line); border-radius: var(--radius); }
.list { width: 100%; border-collapse: collapse; }
.list th, .list td { padding: .75rem; text-align: left; border-bottom: 1px solid var(--line); white-space: nowrap; }
.list th { background: var(--bg); font-weight: 700; }
.list tbody tr { cursor: pointer; }
.list tbody tr:hover, .list tbody tr:focus { background: #eef4ec; }
.list tr.inactive td { color: var(--muted); text-decoration: line-through; }
/* 제목과 값의 정렬을 열 종류별로 맞춘다: 금액은 오른쪽, 체크(사용·즐겨찾기)는 가운데·좁게 */
.list .col-money { text-align: right; font-variant-numeric: tabular-nums; }
.list .col-check { text-align: center; width: 1%; }
.list td.empty { text-align: center; color: var(--muted); cursor: default; }

.pager { display: flex; align-items: center; justify-content: center; gap: 1rem; margin: 1rem 0; }

/* 읽기 전용 표(행 클릭 없음), 줄바꿈 허용 칸, 표 안 입력칸 */
.list.static tbody tr { cursor: default; }
.list.static tbody tr:hover { background: transparent; }
.list td.wrap { white-space: normal; min-width: 160px; }
.list .col-input { white-space: nowrap; }
.list .col-input input, .input-inline {
  width: 110px; min-height: 44px; padding: 0 .5rem; margin-right: .25rem;
  border: 2px solid var(--line); border-radius: var(--radius); font: inherit; text-align: right;
}
.input-inline { width: 180px; text-align: left; }
.list tr.picked td { background: #eef4ec; }
.list tr.changed td { background: #fff7d6; }
.list tr.invalid td { background: var(--err-bg); }
.list tr.aged td { background: #fff1e0; }
.aged-flag { color: #8a3b00; }
.diff { color: var(--danger); }
.row-actions { white-space: nowrap; text-align: right; }
.row-actions .btn { margin-left: .25rem; }

/* ---------- 업무 화면 공통 ---------- */

.btn-danger { border-color: var(--danger); color: var(--danger); }
.btn-wide { min-width: 200px; }
.lot-no { font-family: ui-monospace, Consolas, monospace; font-weight: 700; letter-spacing: .02em; }

.status { display: inline-block; padding: .05rem .5rem; border: 1px solid var(--line); border-radius: 999px; font-size: .9rem; white-space: nowrap; }
.status-sent, .status-pending, .status-partial { border-color: #8a6d00; background: #fff7d6; }
.status-received, .status-confirmed { border-color: var(--primary); background: var(--ok-bg); }
.status-canceled { color: var(--muted); text-decoration: line-through; }

.facts { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; margin: .75rem 0 1.25rem; }
.facts div { display: flex; gap: .5rem; }
.facts dt { color: var(--muted); }
.facts dd { margin: 0; font-weight: 600; }

/* 빠른 선택 버튼(최근 매입처·품목, 사유) */
.chips { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: 0 0 1.25rem; }
.chips-label { color: var(--muted); font-weight: 600; margin-right: .25rem; }
.chip {
  min-height: 44px; padding: 0 .9rem; border: 2px solid var(--line); border-radius: 999px;
  background: var(--surface); color: var(--text); font: inherit; cursor: pointer;
}
.chip.selected { border-color: var(--primary); background: var(--primary); color: var(--primary-text); font-weight: 700; }
.chip.selected::before { content: "✓ "; }
/* 휴대폰: 줄바꿈 없이 한 줄 가로 스크롤 (택배 접수 시장 목록) */
@media (max-width: 760px) {
  .chips-scroll {
    flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity; scrollbar-width: none; margin-left: -1rem; margin-right: -1rem; padding: 0 1rem .25rem;
  }
  .chips-scroll::-webkit-scrollbar { display: none; }
  .chips-scroll .chip { flex: 0 0 auto; white-space: nowrap; scroll-snap-align: start; }
  .chips-scroll .chips-label { flex: 0 0 auto; white-space: nowrap; }
}

/* 라디오를 큰 버튼처럼 (결제 방식) */
.segmented { border: 0; padding: 0; margin: 0 0 1.25rem; }
.segmented legend { font-weight: 600; margin-bottom: .5rem; padding: 0; }
.segmented label {
  display: inline-flex; align-items: center; gap: .25rem; min-height: var(--touch); padding: 0 1rem; margin: 0 .5rem .5rem 0;
  border: 2px solid var(--line); border-radius: var(--radius); background: var(--surface); cursor: pointer; font-weight: 600;
}
.segmented label.selected { border-color: var(--primary); background: var(--ok-bg); }
.segmented input[type=radio] { width: 22px; height: 22px; margin: 0; }
.segmented.compact > div { display: flex; gap: .25rem; }

/* 여러 줄 입력 카드 (매입 줄, 입고·수령 줄) */
.line-card {
  display: grid; grid-template-columns: 2.5rem minmax(200px, 2fr) repeat(auto-fit, minmax(130px, 1fr)) auto;
  align-items: end; gap: 0 .75rem; padding: .75rem; margin-bottom: .75rem;
  border: 2px solid var(--line); border-radius: var(--radius); background: var(--surface);
}
.line-card .field { margin-bottom: 0; }
.line-no { align-self: center; font-weight: 700; font-size: 1.2rem; text-align: center; }
.line-amount strong { display: flex; align-items: center; min-height: var(--touch); }
.line-remove { align-self: end; }
.line-msg { grid-column: 1 / -1; }
.receive-card { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.receive-head { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: .25rem 1rem; align-items: baseline; margin-bottom: .5rem; font-size: 1.05rem; }
.line-tools { grid-column: 1 / -1; margin-top: .5rem; }

.total-bar { display: flex; justify-content: flex-end; align-items: baseline; gap: 1rem; margin: 1rem 0; font-size: 1.3rem; }
.total-bar strong { font-size: 1.6rem; }
.memo { margin-top: 1.25rem; }

.saved-result { border-color: var(--primary); background: var(--ok-bg); }
.lot-list { padding-left: 1.2rem; }
.lot-list li { margin: .25rem 0; font-size: 1.05rem; }

/* 카드 목록 (입고 대기) */
.card-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1rem; margin-bottom: 1.5rem; }
.card {
  display: flex; flex-direction: column; align-items: flex-start; gap: .4rem; padding: 1rem 1.1rem; text-align: left;
  border: 2px solid var(--text); border-radius: var(--radius); background: var(--surface); color: var(--text);
  font: inherit; cursor: pointer;
}
.card-title { font-weight: 700; font-size: 1.15rem; }
.card-sub { color: var(--muted); }
.empty-note { color: var(--muted); }

/* ---------- 시장 출고·택배 ---------- */

/* 품목별 수량 줄 (시장 출고·재입고) */
.qty-rows { display: flex; flex-direction: column; gap: .6rem; margin: .5rem 0 1.25rem; }
.qty-row { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; padding: .5rem .75rem; border: 2px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.qty-name { flex: 1 1 160px; font-weight: 600; }
.qty-row input { width: 120px; min-height: var(--touch); padding: 0 .5rem; border: 2px solid var(--line); border-radius: var(--radius); font: inherit; text-align: right; }

/* 상품 개수 고르기 (택배 접수: 고객 QR·판매자 직접 입력 공용) */
.product {
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  padding: .9rem; margin-bottom: .75rem; background: var(--surface); border: 2px solid var(--line); border-radius: var(--radius);
}
.product-info { display: flex; flex-direction: column; gap: .15rem; }
.product-price { font-weight: 700; font-size: 1.1rem; }
.stepper { display: flex; align-items: center; gap: .5rem; }
.stepper .btn { min-width: 48px; font-size: 1.4rem; padding: 0; }
.stepper-qty { min-width: 2ch; text-align: center; font-size: 1.3rem; font-weight: 700; }

.address-row { display: flex; gap: .5rem; margin-bottom: .5rem; }
.address-row .zip { max-width: 140px; }

/* 택배 직접 입력·전화 주문 폼: 폭을 제한하고 2열로 고정해 입력칸 폭을 맞춘다
   (공통 .grid 는 auto-fill 이라 넓은 화면에서 칸이 좁게 3~4열로 나뉘고, 주소 칸만 전체 폭이 된다) */
.intake-form { max-width: 760px; }
.intake-form .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 600px) {
  .intake-form .grid { grid-template-columns: 1fr; }
}
.field input + input { margin-top: .5rem; }
.postcode-box { height: 420px; margin: .5rem 0; border: 2px solid var(--line); border-radius: var(--radius); overflow: hidden; }

.confirm-list { padding-left: 1.2rem; }
.confirm-list span { float: right; }
.order-total { text-align: right; font-size: 1.2rem; }

.qr-box { text-align: center; }
.qr-box img { width: 280px; max-width: 100%; height: auto; image-rendering: pixelated; border: 8px solid #fff; }
.qr-url { word-break: break-all; }
.status-canceled-plain { color: var(--muted); }
.pay-box { margin-top: 1rem; padding-top: 1rem; border-top: 2px solid var(--line); }
.status-intake-submitted, .status-trip-open { border-color: #8a6d00; background: #fff7d6; }
.status-intake-confirmed, .status-trip-closed { border-color: var(--primary); background: var(--ok-bg); }
.status-intake-canceled, .status-intake-expired, .status-trip-canceled { color: var(--muted); text-decoration: line-through; }
.card-new { border-color: #b35c00; background: #fff1e0; box-shadow: 0 0 0 3px #ffd29e; }

/* 배송 준비 큐 */
.tabs { display: flex; gap: .5rem; margin: 1.25rem 0 1rem; }
.tab {
  flex: 1; min-height: var(--touch); border: 2px solid var(--line); border-radius: var(--radius);
  background: var(--surface); font: inherit; font-weight: 700; cursor: pointer;
}
.tab.on { border-color: var(--primary); background: var(--primary); color: var(--primary-text); }
.pack-totals { display: flex; flex-wrap: wrap; gap: .25rem .5rem; align-items: baseline; }
.order-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: .75rem; }
.order-card { padding: 1rem; background: var(--surface); border: 2px solid var(--text); border-radius: var(--radius); }
.order-card header { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .75rem; margin-bottom: .5rem; }
.order-card p { margin: .4rem 0; }
.order-card-no { font-size: 1.4rem; }
.order-lines { margin: 0; padding-left: 1.2rem; font-size: 1.1rem; }
.order-memo { font-weight: 700; color: #8a3b00; }
.badge-new { padding: 0 .5rem; border-radius: 999px; background: #b35c00; color: #fff; font-weight: 700; }

/* 전화 주문 */
.overdue-bar {
  display: flex; flex-direction: column; gap: .2rem; width: 100%; margin: 0 0 1rem; padding: .75rem 1rem; text-align: left;
  border: 2px solid var(--danger); border-radius: var(--radius); background: var(--err-bg); color: var(--text); font: inherit; cursor: pointer;
}
.overdue-bar strong { color: var(--danger); font-size: 1.15rem; }
.phone-card { cursor: default; }
.phone-card-open {
  display: flex; flex-direction: column; align-items: flex-start; gap: .25rem; width: 100%; padding: 0;
  border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer;
}
.card-overdue { border-color: var(--danger); background: var(--err-bg); }
.overdue-tag { color: var(--danger); }
.stepper-input {
  width: 4.5rem; min-height: var(--touch); padding: 0 .25rem; border: 2px solid var(--line); border-radius: var(--radius);
  font: inherit; font-size: 1.2rem; font-weight: 700; text-align: center;
}
.inline-check { margin: 0; }

/* 결제 확인 (판매자 휴대폰) */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pay-page { max-width: 640px; margin: 0 auto; padding-bottom: 2rem; }
.pay-head { display: flex; gap: .5rem; align-items: center; }
.pay-market { flex: 1; }
.pay-market select, .pay-search {
  width: 100%; min-height: 56px; padding: 0 .75rem; border: 2px solid var(--line); border-radius: var(--radius);
  background: var(--surface); color: var(--text); font: inherit; font-size: 1.15rem; font-weight: 700;
}
.pay-search { font-weight: 400; }
.pay-market select:focus, .pay-search:focus { border-color: var(--focus); outline: none; }
.pay-count { margin: .75rem 0 .5rem; font-size: 1.1rem; }
.pay-count strong { font-size: 1.6rem; }
.pay-list { display: flex; flex-direction: column; gap: .75rem; margin-top: .75rem; }
.pay-card {
  display: flex; flex-direction: column; gap: .3rem; width: 100%; padding: 1rem; text-align: left;
  background: #fff7d6; border: 2px solid #8a6d00; border-radius: var(--radius); color: var(--text); font: inherit; cursor: pointer;
}
.pay-card:active { transform: scale(.99); }
.pay-card-top { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; }
.pay-no { font-family: ui-monospace, Consolas, monospace; font-size: 1.7rem; font-weight: 800; letter-spacing: .03em; }
.pay-amount { font-size: 1.5rem; font-weight: 800; }
.pay-who { font-size: 1.15rem; font-weight: 700; }
.pay-items { font-size: 1.05rem; }
.pay-meta, .pay-foot { color: var(--muted); font-size: .9rem; }

.sheet-backdrop { position: fixed; inset: 0; z-index: 30; background: rgba(0, 0, 0, .45); }
.sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 31; max-height: 92vh; overflow-y: auto;
  max-width: 640px; margin: 0 auto; padding: 1rem 1rem calc(1rem + env(safe-area-inset-bottom));
  background: var(--surface); border-radius: 16px 16px 0 0; box-shadow: 0 -8px 24px rgba(0, 0, 0, .25);
}
.sheet-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: .25rem .75rem; }
.sheet-close { margin-left: auto; font-size: 1.3rem; }
.pay-due { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem 1rem; margin: 1rem 0 .25rem; }
.pay-due > span { font-weight: 700; }
.pay-due strong { font-size: 2rem; }
.pay-due input {
  flex: 1; min-width: 140px; min-height: 56px; padding: 0 .75rem; border: 2px solid var(--focus); border-radius: var(--radius);
  font: inherit; font-size: 1.6rem; font-weight: 700; text-align: right;
}
.pay-methods { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; margin: 1rem 0; }
.pay-method {
  min-height: 72px; border: 3px solid var(--line); border-radius: var(--radius); background: var(--surface);
  color: var(--text); font: inherit; font-size: 1.35rem; font-weight: 800; cursor: pointer;
}
.pay-method.selected { border-color: var(--primary); background: var(--primary); color: var(--primary-text); }
.pay-submit { min-height: 64px; font-size: 1.2rem; font-weight: 800; }
.pay-done {
  position: fixed; inset: 0; z-index: 40; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .5rem; background: var(--primary); color: var(--primary-text); font-size: 1.3rem; font-weight: 700; text-align: center;
}
.pay-done-check { font-size: 5rem; line-height: 1; }
/* 결제 창 품목: 고객 화면과 한 줄씩 맞춰 보도록 크게 */
.pay-lines { margin: .75rem 0 .5rem; padding: .25rem .75rem; list-style: none; background: var(--bg); border-radius: var(--radius); }
.pay-lines li {
  display: flex; justify-content: space-between; align-items: baseline; gap: .75rem;
  padding: .5rem 0; border-bottom: 1px solid var(--line); font-size: 1.35rem; font-weight: 700;
}
.pay-lines li:last-child { border-bottom: 0; }
.pay-lines strong { white-space: nowrap; }
/* 재고 부족(마이너스 처리) 알림 */
.pay-done-short {
  max-width: 90%; margin-top: 1rem; padding: .75rem 1rem; border-radius: var(--radius);
  background: #fff7d6; color: #1b1600; font-size: 1.05rem; font-weight: 600;
}
.pay-done-short strong { display: block; margin-bottom: .25rem; color: #8a3b00; }
.qty-negative { color: var(--danger); }
.pay-done-no { font-family: ui-monospace, Consolas, monospace; font-size: 3rem; font-weight: 800; }

@media print {
  .topbar, .sidenav, .toast, .no-print { display: none !important; }
  .content { padding: 0; }
  .order-cards { grid-template-columns: 1fr 1fr; }
  .order-card { break-inside: avoid; border-width: 1px; }
}

.sidenav > div { display: flex; flex-direction: column; }
/* 사이드 메뉴 대분류 제목: 위 구분선 + 왼쪽 색 막대 + 옅은 바탕으로 메뉴 항목과 구분 */
.nav-group {
  display: flex; align-items: center; gap: .4rem;
  margin: .9rem 0 .2rem; padding: .35rem .75rem;
  border-top: 1px solid var(--line); border-left: 4px solid var(--primary);
  background: var(--ok-bg); border-radius: 0 var(--radius) var(--radius) 0;
  font-size: .82rem; font-weight: 800; letter-spacing: .04em; color: var(--primary);
}
.sidenav > div:first-child .nav-group { margin-top: 0; }
/* 대분류 아래 메뉴는 살짝 들여 써서 소속을 보이게 한다 */
.nav-item.nav-sub { padding-left: 1.5rem; min-height: 44px; }

/* ---------- 홈 ---------- */

.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: .75rem; margin: 1rem 0; }
.tile {
  display: flex; align-items: center; justify-content: center; min-height: 88px; padding: 1rem;
  background: var(--surface); border: 2px solid var(--text); border-radius: var(--radius);
  font-weight: 700; font-size: 1.1rem; color: var(--text); text-decoration: none; text-align: center;
}
.upcoming { color: var(--muted); }
.tile-primary { border-color: var(--primary); background: var(--ok-bg); }

/* ---------- 태블릿 세로·모바일 ---------- */

@media (max-width: 1023px) {
  .menu-toggle { display: inline-flex; }
  .sidenav {
    display: none; position: fixed; top: 56px; left: 0; bottom: 0; z-index: 15; width: 240px;
    box-shadow: 4px 0 16px rgba(0, 0, 0, .15);
  }
  .sidenav.open { display: flex; }
}

@media (max-width: 600px) {
  :root { font-size: 16px; }
  .content { padding: 1rem; }
  .who .badge { display: none; }
  .page-head .actions { margin-left: 0; width: 100%; }
  .page-head .actions .btn { flex: 1; }
  .line-card { grid-template-columns: 1fr 1fr; }
  .line-card .line-no { grid-column: 1 / -1; text-align: left; }
  .line-card .line-item { grid-column: 1 / -1; }
  .btn-wide { width: 100%; }
}

/* 택배 매출 (2026-10-24) */
.quick-range { display: flex; gap: .4rem; align-self: flex-end; }
.sales-summary {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .5rem 1.5rem;
  margin: 0 0 1rem; padding: .75rem 1rem; background: var(--surface); border: 2px solid var(--primary); border-radius: var(--radius);
}
.sales-summary-main { display: flex; gap: 1.5rem; font-size: 1.15rem; }
.sales-summary-main strong { font-size: 1.6rem; color: var(--primary); }
.sales-summary-pay { display: flex; flex-wrap: wrap; gap: .25rem 1rem; color: var(--muted); }
.sales-list td { vertical-align: top; }
.tracking-form { display: flex; gap: .35rem; align-items: center; }
.tracking-form select, .tracking-form input {
  min-height: 40px; padding: 0 .4rem; border: 2px solid var(--line); border-radius: var(--radius); font: inherit; background: var(--surface);
}
.tracking-form input { width: 11rem; }

/* 수기 접수 (2026-10-24) */
.memo-bar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .5rem 1.5rem; margin: 0 0 1rem; }
.memo-count { padding-bottom: .5rem; font-size: 1.1rem; }
.memo-count strong { font-size: 1.4rem; color: var(--primary); }
.memo-form { max-width: 960px; }
.memo-recipient-head { display: flex; align-items: center; gap: .75rem; }
.memo-dup {
  margin: .5rem 0 1rem; padding: .75rem 1rem; border: 2px solid #d97706; border-radius: var(--radius);
  background: #fff7e6; color: #7a4a00;
}
.memo-dup ul { margin: .5rem 0; padding-left: 1.2rem; }
.memo-dup .field-check { display: flex; gap: .5rem; align-items: center; font-weight: 600; }
.memo-pay { display: grid; grid-template-columns: auto minmax(12rem, 18rem); gap: .5rem 1.5rem; align-items: end; margin: 1rem 0; }
.memo-pay .segmented.invalid { outline: 2px solid var(--danger); outline-offset: 2px; }
tr.row-new td { background: #eef8ee; }
@media (max-width: 640px) {
  .memo-pay { grid-template-columns: 1fr; }
}

/* 택배 접수 › 결제 확인 바로가기 (메뉴 대신) */
.pay-link { display: inline-flex; align-items: center; gap: .4rem; text-decoration: none; }
.pay-link-waiting { border-color: var(--danger); color: var(--danger); font-weight: 700; }
.pay-link-count { padding: 0 .5rem; border-radius: 999px; background: var(--danger); color: #fff; font-size: .85rem; }

/* 주문 상세 (전화 주문) */
.order-detail .pay-box { margin-top: 1.25rem; }
.detail-head { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; padding-bottom: .75rem; border-bottom: 2px solid var(--line); }
.detail-title { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.detail-title .lot-no { font-size: 1.3rem; font-weight: 800; }
.detail-head .actions { margin-left: auto; display: flex; gap: .4rem; }
.detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 1.5rem; margin: 1rem 0; }
.detail-sec h3 { margin: 0 0 .5rem; font-size: 1rem; color: var(--muted); }
.detail-lines { width: 100%; border-collapse: collapse; }
.detail-lines td, .detail-lines th { padding: .4rem 0; border-bottom: 1px solid var(--line); text-align: left; }
.detail-lines .num { width: 4rem; text-align: right; padding-right: 1rem; white-space: nowrap; }
.detail-lines .col-money { text-align: right; white-space: nowrap; }
.detail-lines tfoot th, .detail-lines tfoot td { border-bottom: 0; padding-top: .6rem; font-size: 1.1rem; }
.detail-dl { display: grid; grid-template-columns: 6.5rem 1fr; gap: .35rem .75rem; margin: 0; }
.detail-dl dt { color: var(--muted); }
.detail-dl dd { margin: 0; }
.detail-history { padding: .6rem .8rem; border-radius: var(--radius); background: var(--bg); font-size: .92rem; }
@media (max-width: 760px) {
  .detail-grid { grid-template-columns: 1fr; }
  .detail-head .actions { margin-left: 0; width: 100%; }
}

/* 택배 접수 QR 인쇄 (A4 세로 한 장, 거점명 표시) */
.qr-sheet { display: none; }
@media print {
  @page { size: A4 portrait; margin: 12mm; }
  body.printing-qr { background: #fff; }
  body.printing-qr erp-parcel-intakes section > *:not(.qr-sheet) { display: none !important; }
  body.printing-qr .qr-sheet {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    height: 270mm; text-align: center; color: #000; break-inside: avoid; overflow: hidden;
  }
  .qr-sheet-brand { font-size: 16pt; font-weight: 700; letter-spacing: .2em; }
  .qr-sheet-market { margin-top: 6mm; font-size: 46pt; font-weight: 800; line-height: 1.15; }
  .qr-sheet-title { margin-top: 3mm; font-size: 26pt; font-weight: 700; }
  .qr-sheet-code { width: 125mm; height: 125mm; margin: 10mm 0 8mm; }
  .qr-sheet-steps { margin: 0; padding-left: 1.4em; font-size: 16pt; line-height: 1.7; text-align: left; }
  .qr-sheet-url { margin-top: 8mm; font-size: 10pt; color: #444; word-break: break-all; }
}

/* 택배 접수 단계 표시: 할 일(결제 대기)만 노랑, 창고로 넘어간 건은 진행 단계를 옅게 */
.status-stage-submitted { border-color: #8a6d00; background: #fff7d6; font-weight: 700; }
.status-stage-received, .status-stage-packed { border-color: #3b6ea8; background: #e8f0fa; color: #1d3f66; }
.status-stage-shipped, .status-stage-done { border-color: var(--primary); background: var(--ok-bg); }
.status-stage-canceled, .status-stage-expired { color: var(--muted); text-decoration: line-through; }