/* Leaders SYS v1.0 — Styles */
/* FHD(1920×1080) 최소 고정, 이상이면 자동 확장 */

:root {
  --bg:       #f7f7f6;
  --panel:    #ffffff;
  --ink:      #1a1a1a;
  --ink-2:    #3d3d3d;
  --muted:    #888;
  --muted-2:  #bbb;
  --line:     #e8e8e6;
  --line-2:   #f0f0ee;
  --hover:    #f2f2f0;
  --accent:   #1d6fd1;
  --accent-h: #155baf;
  --ok:       #16803c;
  --ok-bg:    #ecfdf5;
  --warn:     #b45309;
  --warn-bg:  #fffbeb;
  --danger:   #b91c1c;
  --danger-bg:#fef2f2;
  --info:     #0369a1;
  --info-bg:  #eff6ff;
  --radius:   8px;
  --radius-lg:12px;
  --side-w:   280px;
  --topbar-h: 52px;
  --shadow:   0 1px 4px rgba(0,0,0,.08);
  --shadow-md:0 4px 16px rgba(0,0,0,.12);
}
html[data-theme="dark"] {
  --bg:       #131416;
  --panel:    #1c1e22;
  --ink:      #eaeaea;
  --ink-2:    #cccccc;
  --muted:    #888;
  --muted-2:  #555;
  --line:     #2a2c31;
  --line-2:   #222428;
  --hover:    #222428;
  --accent:   #4a9eed;
  --accent-h: #3a8ee0;
  --ok:       #34d399;
  --ok-bg:    #052e16;
  --warn:     #fbbf24;
  --warn-bg:  #1c1a0a;
  --danger:   #f87171;
  --danger-bg:#2a0d0d;
  --info:     #60a5fa;
  --info-bg:  #0c1a2e;
}

/* ── Reset ──────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html {
  font-size: 14px;
  min-width: 1920px;   /* FHD 최소 너비 고정 */
  scroll-behavior: smooth;
}
body {
  margin: 0; padding: 0;
  min-width: 1920px;   /* FHD 최소 너비 고정 */
  min-height: 100vh;
  background: var(--bg);
  color: var(--ink);
  font-family: 'Pretendard Variable', 'Pretendard', -apple-system, system-ui, sans-serif;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
button { font-family: inherit; }
[hidden] { display: none !important; }
input, select, textarea { font-family: inherit; }

/* ── 로그인 ─────────────────────────────────── */
.login-screen {
  position: fixed; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg); z-index: 200;
}
.login-card {
  width: 420px; padding: 40px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  display: flex; flex-direction: column; gap: 18px;
}
.login-logo { display: flex; align-items: center; gap: 14px; margin-bottom: 6px; }
.login-mark {
  width: 44px; height: 44px; border-radius: 12px;
  background: var(--accent); color: #fff;
  display: grid; place-items: center;
  font-weight: 800; font-size: 20px;
}
.login-brand { font-size: 20px; font-weight: 700; }
.login-sub { font-size: 12px; color: var(--muted); margin-top: 2px; }
.setup-banner {
  background: var(--info-bg); color: var(--info);
  border: 1px solid #bfdbfe; border-radius: 6px;
  padding: 10px 14px; font-size: 13px;
}
.error-msg {
  color: var(--danger); font-size: 13px;
  background: var(--danger-bg); border-radius: 6px;
  padding: 8px 12px;
}

/* ── Shell Layout ───────────────────────────── */
.shell {
  display: flex;
  min-width: 1920px;
  min-height: 100vh;
}
.shell.mini .side {
  width: 56px; padding: 12px 6px;
  overflow: visible;
  z-index: 100;            /* topbar(20)/본문보다 위 — 툴팁이 본문에 가리지 않도록 */
}
.shell.mini .nav { overflow: visible; }
.shell.mini .nav-item[data-tip] { position: relative; z-index: 101; }
.shell.mini .brand-texts,
.shell.mini .nav-label,
.shell.mini .nav-section-label,
.shell.mini .side-footer { display: none; }
.shell.mini .nav-item { padding: 8px; justify-content: center; position: relative; }
.shell.mini .nav-item .ico { margin: 0; }

/* 축소 모드 hover 툴팁 — 사이트 카드 톤(흰 패널 + accent 강조)에 맞춤 */
.shell.mini .nav-item[data-tip]::after {
  content: attr(data-tip);
  position: absolute;
  left: 100%;
  top: 50%;
  margin-left: 14px;
  transform: translateY(-50%);
  background: var(--panel);
  color: var(--ink);
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1;
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  white-space: nowrap;
  box-shadow: 0 6px 20px rgba(0,0,0,.12), 0 2px 6px rgba(0,0,0,.06);
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity .12s ease, margin-left .12s ease, visibility 0s linear .12s;
  z-index: 1000;
}
.shell.mini .nav-item:hover::after {
  opacity: 1;
  visibility: visible;
  margin-left: 10px;
  transition-delay: 0s;
}
.shell.mini .nav-item.active[data-tip]::after {
  border-left-color: var(--accent);
  color: var(--accent);
}
html[data-theme="dark"] .shell.mini .nav-item[data-tip]::after {
  box-shadow: 0 6px 20px rgba(0,0,0,.45), 0 2px 6px rgba(0,0,0,.25);
}

/* ── Sidebar ─────────────────────────────────── */
.side {
  width: var(--side-w);
  background: var(--panel);
  border-right: 1px solid var(--line);
  display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh;
  overflow-y: auto; overflow-x: hidden;
  transition: width .18s ease;
  flex-shrink: 0;
  padding: 16px 10px;
  gap: 4px;
}
.brand {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 8px 14px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 8px;
}
.brand-mark {
  width: 32px; height: 32px; border-radius: 9px;
  background: var(--accent); color: #fff;
  display: grid; place-items: center;
  font-weight: 800; font-size: 15px; flex-shrink: 0;
}
.brand-title { font-weight: 700; font-size: 14.5px; }
.brand-sub { font-size: 11px; color: var(--muted); }

.nav { display: flex; flex-direction: column; gap: 1px; flex: 1; }
.nav-section-label {
  font-size: 10px; font-weight: 700; color: var(--muted);
  letter-spacing: .07em; text-transform: uppercase;
  padding: 10px 10px 4px;
}
.nav-item {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 10px; border-radius: 6px;
  cursor: pointer; user-select: none;
  color: var(--ink-2); font-size: 13.5px; font-weight: 500;
  transition: background .12s;
}
.nav-item:hover { background: var(--hover); }
.nav-item.active {
  background: var(--accent);
  color: #fff;
}
.nav-item .ico {
  width: 18px; text-align: center; flex-shrink: 0;
  font-size: 13px; opacity: .7;
}
.nav-item.active .ico { opacity: 1; }

.side-footer {
  border-top: 1px solid var(--line);
  padding: 10px 4px 2px;
  display: flex; align-items: center; gap: 8px;
}
.user-chip {
  flex: 1; font-size: 12.5px; color: var(--ink-2);
  font-weight: 600; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Main wrapper ────────────────────────────── */
.main-wrapper {
  flex: 1;
  display: flex; flex-direction: column;
  min-width: 0;
  min-height: 100vh;
}

/* ── Topbar ─────────────────────────────────── */
.topbar {
  position: sticky; top: 0; z-index: 20;
  height: var(--topbar-h);
  background: var(--panel);
  border-bottom: 1px solid var(--line);
  display: flex; align-items: center; gap: 10px;
  padding: 0 24px 0 16px;
}
.sidebar-toggle {
  background: none; border: none;
  color: var(--muted); font-size: 17px; cursor: pointer;
  padding: 5px 7px; border-radius: 6px; line-height: 1;
}
.sidebar-toggle:hover { background: var(--hover); color: var(--ink); }
.crumb {
  display: flex; align-items: center; gap: 6px;
  color: var(--muted); font-size: 13px;
}
.crumb b { color: var(--ink); font-weight: 600; }
.crumb .sep { color: var(--muted-2); }
.topbar-right { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.tb-search {
  display: flex; align-items: center; gap: 6px;
  background: var(--bg); border: 1px solid var(--line);
  border-radius: 7px; padding: 6px 10px; width: 220px;
}
.tb-search .search-ico { color: var(--muted); font-size: 14px; flex-shrink: 0; }
.tb-search input {
  border: 0; outline: 0; background: transparent;
  font-size: 13px; color: var(--ink); width: 100%;
}
.tb-search input::placeholder { color: var(--muted-2); }

/* 본문 영역에 떠 있는 검색창 — view-area 배경과 색이 같아 묻히지 않도록 강조 */
.view-area .tb-search {
  background: var(--panel);
  border-color: var(--muted-2);
  box-shadow: 0 1px 2px rgba(0,0,0,.05);
  transition: border-color .15s, box-shadow .15s;
}
.view-area .tb-search:hover {
  border-color: var(--muted);
}
.view-area .tb-search:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(59,130,246,.18);
}
.view-area .tb-search .search-ico { color: var(--accent); }
.view-area .tb-search input::placeholder { color: var(--muted); }
html[data-theme="dark"] .view-area .tb-search {
  background: var(--panel);
  border-color: rgba(255,255,255,.18);
  box-shadow: 0 1px 2px rgba(0,0,0,.3);
}

/* ── View area ───────────────────────────────── */
.view-area {
  flex: 1;
  padding: 28px 32px 60px;
}
.view-wide { padding: 20px 24px 60px; }

/* ── Buttons ─────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: 6px;
  border: none; border-radius: 7px; cursor: pointer;
  font-family: inherit; font-weight: 600; font-size: 13.5px;
  padding: 8px 16px; line-height: 1; transition: filter .1s;
  white-space: nowrap;
}
.btn:hover { filter: brightness(.93); }
.btn-primary { background: var(--accent); color: #fff; }
.btn-ghost { background: transparent; color: var(--ink-2); border: 1px solid var(--line); }
.btn-danger { background: var(--danger); color: #fff; }
.btn-ok { background: var(--ok); color: #fff; }
.btn-sm { padding: 5px 10px; font-size: 12.5px; }
.btn-xs { padding: 3px 8px; font-size: 11.5px; border-radius: 5px; }
.w-full { width: 100%; justify-content: center; }
.logout-btn { font-size: 12px !important; padding: 4px 10px !important; }

/* ── Forms ───────────────────────────────────── */
.form-group { display: flex; flex-direction: column; gap: 5px; }
.form-group label { font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
.form-row { display: grid; gap: 12px; }
.form-row.col-2 { grid-template-columns: 1fr 1fr; }
.form-row.col-3 { grid-template-columns: 1fr 1fr 1fr; }
.form-row.col-4 { grid-template-columns: 1fr 1fr 1fr 1fr; }
.input, input.input, select.input, textarea.input {
  width: 100%; box-sizing: border-box;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--bg);
  color: var(--ink);
  font-size: 13.5px;
  outline: none;
  transition: border-color .15s;
}
.input:focus { border-color: var(--accent); background: var(--panel); }
.input::placeholder { color: var(--muted-2); }
textarea.input { resize: vertical; min-height: 80px; }
select.input { cursor: pointer; }
.required-star { color: var(--danger); margin-left: 2px; }

/* ── Page Header ─────────────────────────────── */
.page-head {
  display: flex; align-items: flex-start;
  justify-content: space-between;
  gap: 16px; margin-bottom: 20px;
}
.page-head-left h1 {
  margin: 0 0 4px; font-size: 22px;
  font-weight: 700; letter-spacing: -.3px;
}
.page-head-left p { margin: 0; color: var(--muted); font-size: 13px; }
.page-head-right { display: flex; align-items: center; gap: 8px; }

/* ── Toolbar ─────────────────────────────────── */
.toolbar {
  display: flex; align-items: center; gap: 8px;
  flex-wrap: wrap; margin-bottom: 12px;
}
.toolbar-search {
  display: flex; align-items: center; gap: 6px;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 7px; padding: 6px 10px; min-width: 240px;
}
.toolbar-search input {
  border: 0; outline: 0; background: transparent;
  font-size: 13px; color: var(--ink); flex: 1;
}
.toolbar-search input::placeholder { color: var(--muted-2); }
.toolbar .spacer { flex: 1; }

/* ── 상태 요약 바 ─────────────────────────────── */
.my-stat-bar {
  display: flex; align-items: stretch;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  margin-bottom: 10px;
  overflow: hidden;
}
.stat-card {
  flex: 1; display: flex; flex-direction: column; align-items: flex-start;
  padding: 14px 20px; cursor: pointer; transition: background .15s;
  min-width: 0;
}
.stat-card:hover { background: var(--hover); }
.stat-card.stat-active { background: #eff6ff; }
html[data-theme="dark"] .stat-card.stat-active { background: rgba(59,130,246,0.1); }
.stat-div {
  width: 1px; background: var(--line); flex-shrink: 0; margin: 10px 0;
}
.stat-lbl {
  font-size: 12px; font-weight: 600; color: var(--muted);
  margin-bottom: 4px; white-space: nowrap;
}
.stat-card.stat-active .stat-lbl { color: #2563eb; }
.stat-num {
  font-size: 28px; font-weight: 800; color: var(--ink);
  line-height: 1.1; letter-spacing: -1px;
}
.stat-num-warn { color: #ea580c; }
.stat-num-ok   { color: #16a34a; }
html[data-theme="dark"] .stat-num-warn { color: #fb923c; }
html[data-theme="dark"] .stat-num-ok   { color: #4ade80; }
.stat-sub {
  font-size: 11px; color: var(--muted); margin-top: 3px; white-space: nowrap;
}
.stat-sub-warn { color: #ea580c; }
.stat-sub-ok   { color: #16a34a; }
html[data-theme="dark"] .stat-sub-warn { color: #fb923c; }
html[data-theme="dark"] .stat-sub-ok   { color: #4ade80; }

/* ── 날짜 필터 바 ─────────────────────────────── */
.date-filter-bar {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 8px 12px;
  margin-bottom: 8px;
}
.filter-label {
  font-size: 12px; font-weight: 600; color: var(--muted);
  white-space: nowrap; margin-right: 2px;
}
/* 날짜 버튼 — 기본 ghost, active = 오렌지 */
.btn-date {
  border-radius: 99px; font-size: 12px; font-weight: 600;
  padding: 3px 12px; height: 28px;
  background: transparent; border: 1px solid var(--line); color: var(--ink-2);
  cursor: pointer; white-space: nowrap; transition: all .15s;
}
.btn-date:hover { border-color: var(--accent); color: var(--accent); }
.btn-date.active {
  background: #ea580c; border-color: #ea580c; color: #fff;
}
html[data-theme="dark"] .btn-date.active { background: #c2410c; border-color: #c2410c; }

/* ── 커스텀 날짜범위 피커 ──────────────────────── */
.dr-input-row {
  display: flex; align-items: center; gap: 3px;
}
.dr-sel {
  border: 1px solid var(--line); border-radius: 5px;
  background: var(--panel); color: var(--ink);
  font-size: 12px; height: 28px; padding: 0 4px; cursor: pointer;
  outline: none;
}
.dr-sel:focus { border-color: var(--accent); }
.dr-sel-y { width: 66px; }
.dr-sel-m { width: 46px; }
.dr-sel-d { width: 46px; }
.dr-sep   { color: var(--muted); font-size: 13px; }
.dr-tilde { color: var(--ink-2); font-size: 14px; margin: 0 4px; }
.dr-cal-btn {
  width: 28px; height: 28px; border: 1px solid var(--line); border-radius: 5px;
  background: var(--panel); cursor: pointer; font-size: 15px;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.dr-cal-btn:hover { border-color: var(--accent); }

/* 달력 팝업 */
.dr-popup {
  display: none; position: absolute; top: calc(100% + 6px); left: 0; z-index: 2000;
  flex-direction: row;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 12px; box-shadow: 0 8px 32px rgba(0,0,0,.18);
  overflow: hidden;
}
.dr-cal {
  width: 238px; padding: 14px 12px;
}
.dr-cal + .dr-cal { border-left: 1px solid var(--line); }
.dr-cal-hdr {
  display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px;
}
.dr-cal-ttl { font-size: 13px; font-weight: 700; color: var(--ink); }
.dr-nav {
  width: 24px; height: 24px; border: none; background: transparent;
  cursor: pointer; font-size: 17px; color: var(--ink-2); border-radius: 4px;
  line-height: 1; padding: 0; display: flex; align-items: center; justify-content: center;
}
.dr-nav:hover { background: var(--hover); }
.dr-cal-days-hd {
  display: grid; grid-template-columns: repeat(7,1fr); margin-bottom: 4px;
}
.dr-hd {
  text-align: center; font-size: 10px; font-weight: 700;
  color: var(--muted); padding: 2px 0;
}
.dr-hd.sun { color: #ef4444; }
.dr-hd.sat { color: #3b82f6; }
.dr-cal-days {
  display: grid; grid-template-columns: repeat(7,1fr); gap: 1px;
}
.dr-day {
  text-align: center; padding: 5px 0; font-size: 12px;
  border-radius: 4px; cursor: pointer; color: var(--ink); transition: background .1s;
}
.dr-day:hover:not(.other) { background: var(--hover); }
.dr-day.other  { color: var(--muted-2); cursor: default; }
.dr-day.sun:not(.other) { color: #ef4444; }
.dr-day.sat:not(.other) { color: #3b82f6; }
.dr-day.selected {
  background: var(--accent) !important; color: #fff !important;
  border-radius: 4px; font-weight: 700;
}
.dr-day.in-range {
  background: rgba(59,130,246,0.12); border-radius: 0;
}
.dr-day.today:not(.selected) { font-weight: 700; }
.dr-day.today:not(.selected)::after {
  content: ''; display: block; width: 4px; height: 4px;
  border-radius: 50%; background: #ea580c; margin: -2px auto 0;
}
.dr-cal-ft { margin-top: 8px; text-align: center; }
.dr-today-btn {
  font-size: 11px; color: var(--accent); background: none; border: none;
  cursor: pointer; font-weight: 600; padding: 3px 10px; border-radius: 4px;
}
.dr-today-btn:hover { background: var(--hover); }
html[data-theme="dark"] .dr-popup { box-shadow: 0 8px 32px rgba(0,0,0,.5); }
html[data-theme="dark"] .dr-day.in-range { background: rgba(96,165,250,0.15); }

/* ── Status chips ────────────────────────────── */
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip {
  font-size: 12px; padding: 4px 11px; border-radius: 99px;
  cursor: pointer; border: 1px solid var(--line);
  background: var(--panel); color: var(--ink-2); font-weight: 500;
  transition: all .1s;
}
.chip:hover { background: var(--hover); }
.chip.active { background: var(--ink); color: var(--panel); border-color: var(--ink); }
html[data-theme="dark"] .chip.active { background: #fff; color: #131416; border-color: #fff; }

/* ── Table ───────────────────────────────────── */
.table-wrap {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--panel);
}
.table-scroll { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; min-width: 1200px; }
/* 발송요청내역 주소 컬럼 말줄임 */
#sr-tbody td[title] { max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
thead { position: sticky; top: 0; z-index: 2; background: var(--panel); }
th, td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--line-2);
  font-size: 13px; text-align: left; vertical-align: middle;
}
th {
  color: var(--muted); font-weight: 600; font-size: 11.5px;
  letter-spacing: .04em; text-transform: uppercase;
  background: var(--line-2); white-space: nowrap;
}
th.sortable { cursor: pointer; user-select: none; }
th.sortable:hover { color: var(--ink); }
th .sort-ico { margin-left: 4px; opacity: .4; font-size: 10px; }
th.sorted .sort-ico { opacity: 1; color: var(--accent); }
tr:last-child td { border-bottom: 0; }
tr:hover td { background: var(--hover); }
td.mono { font-family: ui-monospace, Menlo, monospace; font-size: 12px; color: var(--ink-2); }
td.right { text-align: right; font-variant-numeric: tabular-nums; }
td.center { text-align: center; }
td .row-actions { display: flex; gap: 4px; opacity: 1; }
tr:hover td .row-actions { opacity: 1; }
.table-empty { padding: 48px; text-align: center; color: var(--muted); font-size: 13.5px; }

/* ── 발송요청내역: 상단(제목·KPI·날짜필터·툴바·테이블헤더) 전체 고정 ──
   윈도우 스크롤(브라우저 오른쪽 끝 스크롤바)을 그대로 쓰면서, 상단 블록 묶음
   (.sr-sticky-head)과 테이블 헤더(thead)를 각각 sticky 로 고정한다.
   thead.top = topbar 높이 + 상단묶음 높이(--sr-head-h, JS가 측정) → 서로 겹치지 않음. */
.sr-sticky-head {
  position: sticky;
  top: var(--topbar-h);
  z-index: 15;
  background: var(--bg);
  display: flow-root;   /* 자식 margin 까지 배경으로 덮어 스크롤 시 빈틈 방지 */
  padding-top: 20px;    /* topbar 아래 여백을 고정묶음 안에 둬 스크롤 시작 시 점프 방지 */
  padding-bottom: 10px; /* 필터와 헤더 사이 일정한 bg 여백 */
}
.sr-sticky-head > .toolbar:last-child { margin-bottom: 0; }  /* 여백 중복 방지(padding-bottom 사용) */
/* 상단 여백을 고정묶음 안으로 옮긴다 — view 의 top 패딩이 정지/고정 위치를 어긋나게
   해서 스크롤 시작 시 고정묶음이 위로 점프하던 원인. 이 화면에서만 top 패딩 제거. */
.view-area:has(> .sr-frozen) { padding-top: 0; }
.view-wide.sr-frozen { padding-top: 0; }
.view-wide.sr-frozen thead {
  /* 고정묶음 바로 아래에 정확히 붙임 — 정지 위치 = 고정 위치 → 스크롤 시 헤더가 움직이지 않음 */
  top: calc(var(--topbar-h) + var(--sr-head-h, 0px));
}
/* thead 가 윈도우 기준으로 sticky 되려면 조상에 스크롤 컨테이너가 없어야 한다.
   .table-scroll 의 overflow-x:auto 는 overflow-y 도 auto 로 계산되어 내부 세로
   스크롤 컨테이너가 되고, 그 안에서 top 오프셋만큼 헤더가 본문 중간으로 밀린다.
   .table-wrap 의 overflow:hidden 도 동일. 이 화면은 min-width:1920 로 표가 항상
   들어맞아 가로 내부 스크롤이 불필요하므로 overflow 를 풀어 윈도우 스크롤에 맡긴다. */
.view-wide.sr-frozen .table-scroll { overflow: visible; }   /* 가로 스크롤 컨테이너화 방지 */
/* table-wrap 은 overflow:clip — 둥근 모서리로 클리핑하되 스크롤 컨테이너는 만들지 않는다.
   (clip 은 hidden 과 달리 스크롤 컨테이너가 아니어서 thead 가 윈도우 기준 sticky 를 유지)
   → 정지 상태: 헤더가 둥근 모서리로 보임 / 스크롤 시: 불투명 사각 헤더가 행을 완전히 덮어
     좌측 보라 마커가 비치지 않음. table-wrap 기본 border-radius(var(--radius)) 그대로 사용. */
.view-wide.sr-frozen .table-wrap { overflow: clip; }

/* ── 일반사용자 테이블 — 작업버튼 ───────────────── */
.btn-action-edit {
  background: #eff6ff;
  color: #1d6fd1;
  border: 1px solid #bfdbfe;
  font-weight: 600;
  white-space: nowrap;
}
.btn-action-edit:hover {
  background: #dbeafe;
  border-color: #93c5fd;
  color: #1558b0;
}
.btn-action-detail {
  background: #f0fdf4;
  color: #16803c;
  border: 1px solid #bbf7d0;
  font-weight: 600;
  white-space: nowrap;
}
.btn-action-detail:hover {
  background: #dcfce7;
  border-color: #86efac;
  color: #145f2f;
}
html[data-theme="dark"] .btn-action-edit   { background:#0f2441; color:#60a5fa; border-color:#1e3a5f; }
html[data-theme="dark"] .btn-action-edit:hover { background:#1e3a5f; }
html[data-theme="dark"] .btn-action-detail { background:#052e16; color:#34d399; border-color:#064e22; }
html[data-theme="dark"] .btn-action-detail:hover { background:#064e22; }

/* ── 발송요청 리스트 — 품목코드·수량 강조 ──────── */
.td-item-code,
td.mono.td-item-code {
  font-size: 13px;
  font-weight: 600;
  color: var(--accent) !important;  /* 관리번호 link-case와 동일, td.mono 오버라이드 */
}
.td-item-qty {
  text-align: right;
  font-size: 13px;
  font-weight: 700;
  color: #ea580c;        /* 주황 */
  font-variant-numeric: tabular-nums;
}
html[data-theme="dark"] .td-item-code { color: var(--accent); }
html[data-theme="dark"] .td-item-qty  { color: #fb923c; }     /* 다크모드 주황 */

/* ── 등록일/시간 줄바꿈 셀 ─────────────────────── */
.dt-cell { font-size: 13px; white-space: nowrap; color: var(--muted); line-height: 1.6; }
.dt-cell .dt-date { display: block; color: var(--ink-2); font-weight: 500; font-size: 13px; }
.dt-cell .dt-time { display: block; color: var(--muted); font-size: 12px; }

/* ── 주소 우편번호 강조 ─────────────────────────── */
.addr-cell { font-size: 13px; color: var(--ink-2); }
.addr-cell .addr-zip {
  display: inline-block;
  font-family: ui-monospace, Menlo, monospace;
  font-size: 12px;
  font-weight: 700;
  color: #1d6fd1;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: 4px;
  padding: 1px 5px;
  margin-right: 3px;
  vertical-align: middle;
  letter-spacing: .03em;
}
html[data-theme="dark"] .addr-cell .addr-zip {
  color: #60a5fa;
  background: #0f2441;
  border-color: #1e3a5f;
}

/* ── 품목 탭 바 ─────────────────────────────── */
.items-tabs-bar {
  display: flex; gap: 4px;
  padding: 0 0 0 0; margin-bottom: 0;
  border-bottom: 2px solid var(--line);
}
.tab-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 10px 20px; border: none; background: none;
  font-size: 13.5px; font-weight: 500; color: var(--muted);
  cursor: pointer; border-bottom: 2px solid transparent;
  margin-bottom: -2px; transition: color .15s;
}
.tab-btn:hover { color: var(--ink); }
.tab-btn.active { color: var(--primary); border-bottom-color: var(--primary); font-weight: 600; }
.tab-badge {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--bg-2,#f0f1f5); color: var(--muted);
  border-radius: 10px; font-size: 11px; font-weight: 600;
  padding: 0 7px; min-width: 20px; height: 18px;
}
.tab-btn.active .tab-badge { background: var(--primary); color: #fff; }
html[data-theme="dark"] .tab-badge { background: #2a2d3a; }
.table-footer {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 16px; border-top: 1px solid var(--line);
  font-size: 12.5px; color: var(--muted); background: var(--line-2);
}

/* ── Status Pills ────────────────────────────── */
.pill {
  display: inline-flex; align-items: center;
  font-size: 11.5px; padding: 2px 9px;
  border-radius: 99px; font-weight: 600;
  white-space: nowrap;
}
/* 출고방법 채널 pill */
.ch-pill { display:inline-flex; align-items:center; font-size:11.5px; padding:2px 9px; border-radius:99px; font-weight:600; white-space:nowrap; background:var(--hover); color:var(--ink-2); }
.ch-quick  { background:#fdf4ff; color:#7c3aed; }
.ch-parcel { background:#eff6ff; color:#1d4ed8; }
.ch-visit  { background:#ecfdf5; color:#15803d; }
.ch-direct { background:#fff7ed; color:#c2410c; }
.ch-support{ background:#f0fdf4; color:#166534; }
html[data-theme="dark"] .ch-quick  { background:#1e0a3c; color:#c084fc; }
html[data-theme="dark"] .ch-parcel { background:#0c1a2e; color:#60a5fa; }
html[data-theme="dark"] .ch-visit  { background:#052e16; color:#4ade80; }
html[data-theme="dark"] .ch-direct { background:#2a1000; color:#fb923c; }
/* 긴급 행 강조 — 핑크/연빨강 */
tr.row-urgent { background:#fef2f2 !important; }
html[data-theme="dark"] tr.row-urgent { background:rgba(220,38,38,0.09) !important; }

/* 긴급 관리번호 — 빨간 굵은 링크 */
tr.row-urgent .link-case { color:#dc2626 !important; font-weight:700; }
html[data-theme="dark"] tr.row-urgent .link-case { color:#f87171 !important; }

/* 긴급 배지 (오렌지 pill) */
.badge-urgent {
  display:inline-flex; align-items:center; gap:2px;
  background:#fff7ed; color:#c2410c; border:1px solid #fdba74;
  border-radius:4px; padding:1px 7px; font-size:11px; font-weight:700;
  white-space:nowrap;
}
html[data-theme="dark"] .badge-urgent { background:#2a1000; color:#fb923c; border-color:#c2410c; }

/* 납품확인서 동봉 배지 (솔리드 보라 pill — 시인성 강화) */
.badge-confirm-doc {
  display:inline-flex; align-items:center; gap:3px;
  background:#7c3aed; color:#fff; border:1px solid #6d28d9;
  border-radius:5px; padding:2px 10px; font-size:11.5px; font-weight:700;
  white-space:nowrap;
  box-shadow: 0 1px 3px rgba(124,58,237,.30);
  letter-spacing: -0.01em;
}
html[data-theme="dark"] .badge-confirm-doc { background:#6d28d9; color:#fff; border-color:#a78bfa; box-shadow: 0 1px 3px rgba(167,139,250,.35); }

/* 납품확인서 동봉 행 — 좌측에 보라 마커 */
tr.row-confirm-doc td:first-child {
  box-shadow: inset 3px 0 0 #7c3aed;
}
html[data-theme="dark"] tr.row-confirm-doc td:first-child {
  box-shadow: inset 3px 0 0 #a78bfa;
}

/* 지연 배지 (빨간 아웃라인) */
.badge-delay {
  display:inline-flex; align-items:center;
  background:#fff; color:#dc2626; border:1px solid #fca5a5;
  border-radius:4px; padding:1px 7px; font-size:11px; font-weight:600;
  white-space:nowrap;
}
html[data-theme="dark"] .badge-delay { background:transparent; color:#f87171; border-color:#dc2626; }

/* 긴급처리 상태 pill — 다른 상태 pill과 동일한 filled 스타일 (빨강) */
.pill-urgent-status {
  display:inline-flex; align-items:center;
  font-size:11.5px; padding:2px 9px;
  border-radius:99px; font-weight:600;
  white-space:nowrap;
  background:#fef2f2; color:#b91c1c;
}
html[data-theme="dark"] .pill-urgent-status { background:#2a0d0d; color:#f87171; }

/* 처리지연 행 강조 — 주황/앰버 */
tr.row-delayed { background:#fffbeb !important; }
html[data-theme="dark"] tr.row-delayed { background:rgba(234,88,12,0.09) !important; }

/* 긴급 + 지연 동시 → 긴급 우선(핑크) */
tr.row-urgent.row-delayed { background:#fef2f2 !important; }
html[data-theme="dark"] tr.row-urgent.row-delayed { background:rgba(220,38,38,0.12) !important; }

/* 처리지연 관리번호 — 주황 굵은 링크 */
tr.row-delayed:not(.row-urgent) .link-case { color:#ea580c !important; font-weight:700; }
html[data-theme="dark"] tr.row-delayed:not(.row-urgent) .link-case { color:#fb923c !important; }

/* 지연 배지 — ⚠ 아이콘 포함 주황 스타일 */
.badge-delay {
  display:inline-flex; align-items:center; gap:2px;
  background:#fff7ed; color:#c2410c; border:1px solid #fdba74;
  border-radius:4px; padding:1px 7px; font-size:11px; font-weight:700;
  white-space:nowrap;
}
html[data-theme="dark"] .badge-delay { background:#2a1000; color:#fb923c; border-color:#c2410c; }

/* 처리지연 상태 pill — 다른 상태 pill과 동일한 filled 스타일 (주황) */
.pill-delay-status {
  display:inline-flex; align-items:center;
  font-size:11.5px; padding:2px 9px;
  border-radius:99px; font-weight:600;
  white-space:nowrap;
  background:#fff7ed; color:#c2410c;
}
html[data-theme="dark"] .pill-delay-status { background:#2a1000; color:#fb923c; }

/* ── 발송요청 상세 — di (detail-info) 컴포넌트 ───── */
.di-table {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: 20px;
}
.di-row {
  display: flex;
  border-bottom: 1px solid var(--line);
}
.di-row:last-child { border-bottom: none; }
.di-cell {
  flex: 1;
  display: flex;
  align-items: stretch;
  border-right: 1px solid var(--line);
  min-width: 0;
}
.di-cell:last-child { border-right: none; }
.di-cell.di-full   { flex: 2; }
.di-lbl {
  flex-shrink: 0;
  width: 88px;
  padding: 10px 12px;
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
  background: var(--line-2);
  border-right: 1px solid var(--line);
  display: flex;
  align-items: center;
}
.di-val {
  flex: 1;
  padding: 10px 14px;
  font-size: 13px;
  color: var(--ink);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  word-break: break-word;
  overflow-wrap: break-word;
}
.di-zip {
  display: inline-block;
  font-family: ui-monospace, Menlo, monospace;
  font-size: 11.5px;
  font-weight: 700;
  color: #1d6fd1;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: 4px;
  padding: 1px 6px;
  flex-shrink: 0;
}
html[data-theme="dark"] .di-zip { color:#60a5fa; background:#0f2441; border-color:#1e3a5f; }
.di-tracking {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 13px;
  font-weight: 700;
  color: var(--accent);
  text-decoration: none;
  letter-spacing: .03em;
}
.di-tracking:hover { text-decoration: underline; }
.di-section-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 8px;
}
.di-items-wrap {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow-y: auto;         /* 품목 많을 때 자체 스크롤 */
  max-height: 280px;        /* 최대 높이 제한 */
  margin-bottom: 4px;
}
.di-items-wrap table { min-width: 0 !important; width: 100%; }
/* 품목 테이블 헤더 고정 */
.di-items-wrap thead {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--line-2);
}
.di-extra-box {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px 14px;
  margin-bottom: 12px;
  background: var(--surface);
}
.di-section-title { margin-top: 14px; }
/* 품목 테이블 셀 */
td.di-item-no   { text-align:center; font-size:12px; color:var(--muted); vertical-align:middle; padding:10px 4px; width:36px; }
td.di-item-code { font-family:ui-monospace,Menlo,monospace; font-size:12px; color:var(--ink-2); vertical-align:middle; padding:10px 8px; word-break:break-all; }
td.di-item-name { font-size:13px; vertical-align:middle; padding:10px 8px; word-break:break-word; overflow-wrap:break-word; }
td.di-item-qty  { text-align:right; font-size:14px; font-weight:700; color:var(--accent); padding:10px 12px; vertical-align:middle; font-variant-numeric:tabular-nums; }
/* chip-urgent — legacy (badge-urgent 사용 권장) */
.chip-urgent { background:#fff7ed !important; color:#c2410c !important; border-color:#fdba74 !important; }
/* 관리번호 링크 */
.link-case { color:var(--accent); text-decoration:none; font-weight:600; }
.link-case:hover { text-decoration:underline; }
/* 상태 pill */
.pill-new      { background:#eff6ff; color:#1d6fd1; }
.pill-prepared { background:#fdf6ec; color:#b45309; }
.pill-sent     { background:#ecfdf5; color:#16803c; }
.pill-done     { background:#f0fdf4; color:#15803d; }
.pill-hold     { background:#f5f3ff; color:#7c3aed; }
.pill-delayed  { background:#fff7ed; color:#c2410c; }
.pill-cancelled{ background:#fef2f2; color:#b91c1c; }
.pill-active   { background:#ecfdf5; color:#16803c; }
.pill-inactive { background:#fef2f2; color:#b91c1c; }
html[data-theme="dark"] .pill-new      { background:#0c1a2e; color:#60a5fa; }
html[data-theme="dark"] .pill-prepared { background:#1c1a0a; color:#fbbf24; }
html[data-theme="dark"] .pill-sent     { background:#052e16; color:#34d399; }
html[data-theme="dark"] .pill-done     { background:#052e16; color:#34d399; }
html[data-theme="dark"] .pill-hold     { background:#1e0a3c; color:#a78bfa; }
html[data-theme="dark"] .pill-delayed  { background:#2a1000; color:#fb923c; }
html[data-theme="dark"] .pill-cancelled{ background:#2a0d0d; color:#f87171; }

/* 입고 상태 pill 추가 (sn_check, item_sticker, finishing) */
.pill-sn_check     { background:#eef2ff; color:#4338ca; }
.pill-item_sticker { background:#fdf6ec; color:#b45309; }
.pill-finishing    { background:#fff7ed; color:#c2410c; }
html[data-theme="dark"] .pill-sn_check     { background:#1a1a3c; color:#a5b4fc; }
html[data-theme="dark"] .pill-item_sticker { background:#1c1a0a; color:#fbbf24; }
html[data-theme="dark"] .pill-finishing    { background:#2a1000; color:#fb923c; }

/* ── 업무게시판 업무상태 pill ── */
.wb-pill-new         { background:#eff6ff; color:#1d6fd1; }
.wb-pill-in_progress { background:#fff7ed; color:#c2410c; }
.wb-pill-done        { background:#f0fdf4; color:#15803d; }
.wb-pill-hold        { background:#f3f4f6; color:#6b7280; }
.wb-pill-ignored     { background:#f3f4f6; color:#9ca3af; }
html[data-theme="dark"] .wb-pill-new         { background:#0c1a2e; color:#60a5fa; }
html[data-theme="dark"] .wb-pill-in_progress { background:#2a1000; color:#fb923c; }
html[data-theme="dark"] .wb-pill-done        { background:#052e16; color:#4ade80; }
html[data-theme="dark"] .wb-pill-hold        { background:#1f2430; color:#9ca3af; }
html[data-theme="dark"] .wb-pill-ignored     { background:#1f2430; color:#6b7280; }

/* ── 입고내역 단계 표시 ─────────────────────── */
.ib-steps { display:flex; align-items:center; gap:3px; }
.ib-step {
  display:inline-flex; align-items:center; justify-content:center;
  width:24px; height:24px; border-radius:50%;
  background:#f1f5f9; color:#64748b;
  font-size:13px; opacity:0.45;
  transition:all 0.15s ease;
}
.ib-step-cur  { background:#dbeafe; color:#1d4ed8; opacity:1; box-shadow:0 0 0 2px rgba(37,99,235,0.25); transform:scale(1.1); }
.ib-step-done { background:#dcfce7; color:#15803d; opacity:1; }
.ib-step-sep  { color:#cbd5e1; font-size:11px; user-select:none; }

.ib-flag { opacity:0.3; filter:grayscale(1); }
.ib-flag-on { opacity:1; filter:none; }

.ib-step-list { display:flex; flex-direction:column; gap:6px; }
.ib-step-row {
  display:flex; align-items:center; gap:10px;
  padding:8px 10px; border-radius:6px; border:1px solid var(--line);
  background:var(--panel); opacity:0.55;
}
.ib-step-row .ib-step-ico { font-size:18px; }
.ib-step-row .ib-step-num {
  display:inline-flex; align-items:center; justify-content:center;
  width:20px; height:20px; border-radius:50%;
  background:#e2e8f0; color:#475569; font-size:11px; font-weight:700;
}
.ib-step-row.ib-step-cur  { opacity:1; border-color:#3b82f6; background:#eff6ff; }
.ib-step-row.ib-step-cur  .ib-step-num { background:#3b82f6; color:#fff; }
.ib-step-row.ib-step-done { opacity:1; border-color:#86efac; background:#f0fdf4; }
.ib-step-row.ib-step-done .ib-step-num { background:#22c55e; color:#fff; }
html[data-theme="dark"] .ib-step { background:#1e293b; color:#94a3b8; }
html[data-theme="dark"] .ib-step-cur  { background:#1e3a8a; color:#93c5fd; }
html[data-theme="dark"] .ib-step-done { background:#14532d; color:#86efac; }
html[data-theme="dark"] .ib-step-row.ib-step-cur  { background:#0c1a2e; border-color:#3b82f6; }
html[data-theme="dark"] .ib-step-row.ib-step-done { background:#052e16; border-color:#15803d; }

/* ── Cards / Panels ──────────────────────────── */
.card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.card-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px; border-bottom: 1px solid var(--line);
}
.card-head h3 { margin: 0; font-size: 14px; font-weight: 600; }
.card-body { padding: 18px; }

/* ── KPI Grid ────────────────────────────────── */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--panel);
  margin-bottom: 24px;
}
.kpi {
  padding: 20px 22px;
  border-right: 1px solid var(--line);
}
.kpi:last-child { border-right: 0; }
.kpi-label {
  color: var(--muted); font-size: 11px; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase; margin-bottom: 8px;
}
.kpi-value {
  font-size: 30px; font-weight: 700;
  font-variant-numeric: tabular-nums; letter-spacing: -.5px;
  color: var(--ink);
}
.kpi-sub { font-size: 12px; color: var(--muted); margin-top: 4px; }

/* ── Modal ───────────────────────────────────── */
.modal-root {
  position: fixed; inset: 0; z-index: 100;
  display: flex; align-items: center; justify-content: center;
}
.modal-backdrop {
  position: absolute; inset: 0;
}
.modal-card {
  position: relative; z-index: 1;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  width: 720px; max-width: 95vw;
  /* 헤더/푸터 고정, 본문만 스크롤되도록 flex column + max-height */
  max-height: 92vh;
  display: flex; flex-direction: column;
  overflow: hidden; /* 둥근 모서리 유지 */
}
.modal-card.modal-lg { width: 1000px; }
.modal-card.modal-sm { width: 480px; }
.modal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px; border-bottom: 1px solid var(--line);
  flex-shrink: 0; /* 헤더 고정 */
}
.modal-header h3 { margin: 0; font-size: 15px; font-weight: 700; }
.modal-body {
  padding: 20px;
  overflow-y: auto;    /* 본문만 수직 스크롤 */
  overflow-x: hidden;  /* 수평 오버플로 차단 */
  flex: 1 1 auto;
  min-height: 0;
  display: flex; flex-direction: column; gap: 14px;
}
.modal-footer {
  display: flex; justify-content: flex-end; gap: 8px;
  padding: 14px 20px; border-top: 1px solid var(--line);
  flex-shrink: 0;
}
.icon-btn {
  background: none; border: none; cursor: pointer;
  color: var(--muted); font-size: 18px; padding: 4px 8px;
  border-radius: 5px; line-height: 1;
}
.icon-btn:hover { background: var(--hover); color: var(--ink); }

/* ── Toast ───────────────────────────────────── */
.toast-container {
  position: fixed; bottom: 24px; right: 24px;
  z-index: 300; display: flex; flex-direction: column;
  gap: 8px; pointer-events: none;
}
.toast {
  background: var(--ink); color: var(--panel);
  padding: 12px 18px; border-radius: 8px;
  font-size: 13.5px; font-weight: 500;
  box-shadow: 0 4px 16px rgba(0,0,0,.25);
  animation: toastIn .2s ease;
  pointer-events: auto;
  max-width: 360px;
}
.toast.toast-ok { background: var(--ok); }
.toast.toast-err { background: var(--danger); }
.toast.toast-warn { background: var(--warn); }
@keyframes toastIn { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:none; } }

/* ── Misc ─────────────────────────────────────── */
.conn-ok { color: var(--ok); font-size: 12px; }
.conn-err { color: var(--danger); font-size: 12px; }
.footer {
  margin-top: auto; padding: 12px 28px;
  border-top: 1px solid var(--line);
  color: var(--muted); font-size: 12px;
  display: flex; justify-content: space-between;
  background: var(--panel);
}
.section-divider {
  border: none; border-top: 1px solid var(--line);
  margin: 4px 0;
}
.badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 5px;
  background: var(--danger); color: #fff;
  border-radius: 99px; font-size: 10.5px; font-weight: 700;
}
.text-muted { color: var(--muted); }
.text-sm { font-size: 12px; }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.gap-8 { gap: 8px; }

/* ── Detail View ─────────────────────────────── */
.detail-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px; margin-bottom: 16px;
}
.detail-field label {
  font-size: 11px; font-weight: 700; color: var(--muted);
  text-transform: uppercase; letter-spacing: .05em; display: block;
  margin-bottom: 4px;
}
.detail-field .val {
  font-size: 13.5px; color: var(--ink); word-break: break-word;
}

/* ── 발송요청 워크플로 상태 표시줄 ─────────────── */
.workflow-bar {
  display: flex; gap: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: 16px;
}
.wf-step {
  flex: 1; padding: 10px 14px; text-align: center;
  font-size: 12px; font-weight: 600; color: var(--muted);
  background: var(--line-2); border-right: 1px solid var(--line);
}
.wf-step:last-child { border-right: 0; }
.wf-step.active { background: var(--accent); color: #fff; }
.wf-step.done { background: var(--ok-bg); color: var(--ok); }

/* ── Items 행 편집기 ─────────────────────────── */
.items-editor { display: flex; flex-direction: column; gap: 6px; }
.item-row {
  display: grid; grid-template-columns: 1fr 120px 60px auto;
  gap: 8px; align-items: center;
}
.item-row input { padding: 6px 10px; border: 1px solid var(--line); border-radius: 6px;
  background: var(--bg); color: var(--ink); font-size: 13px; outline: none; }
.item-row input:focus { border-color: var(--accent); }

/* ── 발송요청서 아코디언 섹션 ───────────────── */
.acc-section { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.acc-hdr {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px; cursor: pointer; background: var(--panel);
  font-size: 13.5px; font-weight: 600; color: var(--ink); user-select: none; transition: .1s;
}
.acc-hdr:hover { background: var(--hover); }
.acc-body { padding: 14px; border-top: 1px solid var(--line); background: var(--panel); }
.acc-arr { font-size: 11px; color: var(--muted); transition: transform .2s; display: inline-block; }
.acc-hdr.collapsed .acc-arr { transform: rotate(-90deg); }
.acc-body.acc-hidden { display: none; }

/* ── 발송요청서 상세정보 아코디언 ─────────────── */
.sr-detail-acc .acc-hdr { background: var(--info-bg,#eff6ff); border-bottom: 1px solid var(--line); }
.sr-detail-acc .acc-hdr:hover { background: #dbeafe; }
.sr-detail-acc .acc-body { background: var(--surface,#fafafa); }
.sr-detail-grid {
  display: grid;
  grid-template-columns: 76px 1fr 76px 1fr;
  gap: 0;
  border: 1px solid var(--line);
  border-radius: 6px;
  overflow: hidden;
  font-size: 13px;
}
.sr-dl {
  padding: 8px 10px; font-size: 11.5px; font-weight: 600;
  color: var(--muted); background: var(--line-2,#f3f4f6);
  border-right: 1px solid var(--line); border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.sr-dl:last-of-type, .sr-dl:nth-last-child(-n+2) { border-bottom: none; }
.sr-dv {
  padding: 8px 12px; font-size: 13px; color: var(--ink);
  border-right: 1px solid var(--line); border-bottom: 1px solid var(--line);
  word-break: break-word; overflow-wrap: break-word;
}
.sr-dv:last-child, .sr-dv:nth-last-child(-n+2) { border-bottom: none; }
.sr-dv-span { grid-column: 2 / 5; border-right: none; }

/* ── 발송요청 상세 모달 (openMyDetail) ──────── */
.myd-wrap { display: flex; flex-direction: column; gap: 12px; }

/* 상태 배너 */
.myd-banner {
  display: flex; align-items: flex-start; justify-content: space-between;
  padding: 12px 16px;
  background: var(--panel); border: 1px solid var(--line);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius);
  gap: 12px;
}
.myd-banner-left { display: flex; flex-direction: column; gap: 6px; min-width: 0; flex: 1; }
.myd-banner-right { flex-shrink: 0; padding-top: 2px; }
.myd-banner-title {
  font-size: 14px; font-weight: 700; color: var(--ink);
  word-break: break-word; line-height: 1.4;
}
.myd-banner-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  font-size: 12px;
}
.myd-meta-item { color: var(--muted); white-space: nowrap; }
.myd-meta-ch { font-size: 11px; }

/* 정보 테이블 (table 방식 — nth-child 충돌 없음) */
.myd-table {
  width: 100%; border-collapse: collapse; font-size: 13px;
}
.myd-lbl {
  padding: 9px 12px; font-size: 12px; font-weight: 600;
  color: var(--muted); background: var(--line-2,#f3f4f6);
  border-right: 1px solid var(--line); border-bottom: 1px solid var(--line);
  white-space: nowrap; vertical-align: middle; width: 90px;
}
.myd-val {
  padding: 9px 14px; font-size: 13px; color: var(--ink);
  border-right: 1px solid var(--line); border-bottom: 1px solid var(--line);
  word-break: break-word; overflow-wrap: break-word; vertical-align: middle;
}
.myd-val:last-child { border-right: none; }
.myd-table tr:last-child .myd-lbl,
.myd-table tr:last-child .myd-val { border-bottom: none; }

/* 섹션 공통 */
.myd-section {
  border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; background: var(--panel);
}
.myd-sec-title {
  padding: 9px 14px; font-size: 13px; font-weight: 700; color: var(--ink);
  background: var(--hover); border-bottom: 1px solid var(--line);
}
.myd-section .di-items-wrap { border-radius: 0; border: none; margin: 0; }
.myd-section .sd-photo-grid { padding: 10px 14px; }
.myd-section .sd-sn-block { margin: 10px 14px; }
.myd-section .sd-sn-block:last-child { margin-bottom: 10px; }

/* ── 발송요청서 품목 행 ──────────────────────── */
.sr-item-row {
  display: grid; grid-template-columns: 1fr 150px 80px auto auto;
  gap: 8px; align-items: center; margin-bottom: 6px;
}
.sr-item-row input {
  padding: 7px 10px; border: 1px solid var(--line); border-radius: 6px;
  background: var(--bg); color: var(--ink); font-size: 13px; outline: none; font-family: var(--font);
}
.sr-item-row input:focus { border-color: var(--accent); }
.btn-add-item {
  padding: 6px 12px; border: 1px solid var(--warn); border-radius: 6px;
  background: transparent; color: var(--warn); font-size: 12px; font-weight: 600;
  cursor: pointer; font-family: var(--font); white-space: nowrap; transition: .12s;
}
.btn-add-item:hover { background: var(--warn-bg); }
.btn-del-item {
  width: 28px; height: 28px; border: 1px solid var(--danger); border-radius: 6px;
  background: transparent; color: var(--danger); font-size: 15px; font-weight: 700;
  cursor: pointer; font-family: var(--font); display: flex; align-items: center; justify-content: center;
  transition: .12s; flex-shrink: 0;
}
.btn-del-item:hover { background: var(--danger-bg); }

/* ── 입고 품목 Account(고객 할당) 배분 ───────────────── */
.ib-item-wrap {
  border: 1px solid var(--line); border-radius: 8px; padding: 8px 8px 6px;
  margin-bottom: 10px; background: var(--panel);
}
.ib-item-wrap .sr-item-row { margin-bottom: 0; }
.ib-acc-block { margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--line); }
.ib-acc-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.ib-acc-title { font-size: 12px; font-weight: 700; color: var(--muted); }
.ib-acc-sum { margin-left: 6px; font-size: 12px; }
.ib-acc-add {
  padding: 4px 10px; border: 1px solid var(--accent); border-radius: 6px;
  background: transparent; color: var(--accent); font-size: 11px; font-weight: 600;
  cursor: pointer; font-family: var(--font); white-space: nowrap; transition: .12s;
}
.ib-acc-add:hover { background: var(--accent-bg, rgba(59,130,246,.1)); }
.ib-acc-rows { display: flex; flex-direction: column; gap: 6px; }
.ib-acc-row { display: grid; grid-template-columns: 200px 1fr 70px 28px; gap: 6px; align-items: center; }
.ib-acc-row input {
  padding: 6px 9px; border: 1px solid var(--line); border-radius: 6px;
  background: var(--bg); color: var(--ink); font-size: 13px; outline: none; font-family: var(--font);
}
.ib-acc-row input:focus { border-color: var(--accent); }
.ib-acc-del {
  width: 26px; height: 26px; border: 1px solid var(--danger); border-radius: 6px;
  background: transparent; color: var(--danger); font-size: 14px; font-weight: 700;
  cursor: pointer; font-family: var(--font); display: flex; align-items: center; justify-content: center;
  transition: .12s;
}
.ib-acc-del:hover { background: var(--danger-bg); }

/* 입고 상세 — Account 배분 표시 */
.di-acc-tr .di-acc-cell { padding: 4px 8px 10px; }
.di-acc-label { font-size: 11px; font-weight: 700; color: var(--muted); margin-right: 6px; }
.di-acc-chip {
  display: inline-block; margin: 2px 4px 2px 0; padding: 2px 8px;
  border: 1px solid var(--line); border-radius: 999px; background: var(--bg);
  font-size: 12px; color: var(--ink);
}
.di-acc-code { font-size: 11px; color: var(--muted); }
.di-acc-qty { color: var(--accent); }

/* ── 발송요청서 하단 2컬럼 ───────────────────── */
.sr-bottom-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

/* ── 출고방법 버튼 ───────────────────────────── */
.sr-method-btns { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.method-btn {
  padding: 7px 16px; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--panel); cursor: pointer; font-size: 13px; font-weight: 500;
  font-family: var(--font); color: var(--ink-2); transition: .12s;
}
.method-btn:hover { border-color: var(--accent); color: var(--accent); }

/* 출고방법 active — ch-pill과 동일한 채널 색상 */
.method-btn.active                          { color: #fff; }
.method-btn[data-ch="quick"].active         { background: #7c3aed; border-color: #7c3aed; }
.method-btn[data-ch="parcel"].active        { background: #1d4ed8; border-color: #1d4ed8; }
.method-btn[data-ch="visit"].active         { background: #15803d; border-color: #15803d; }
.method-btn[data-ch="direct"].active        { background: #c2410c; border-color: #c2410c; }
html[data-theme="dark"] .method-btn[data-ch="quick"].active  { background: #6d28d9; border-color: #6d28d9; }
html[data-theme="dark"] .method-btn[data-ch="parcel"].active { background: #1e40af; border-color: #1e40af; }
html[data-theme="dark"] .method-btn[data-ch="visit"].active  { background: #166534; border-color: #166534; }
html[data-theme="dark"] .method-btn[data-ch="direct"].active { background: #9a3412; border-color: #9a3412; }
.sr-channel-note {
  font-size: 12px; color: var(--info); background: var(--info-bg);
  border: 1px solid #bfdbfe; border-radius: 6px; padding: 8px 12px;
}

/* ── 발송요청서 푸터 ─────────────────────────── */
.modal-footer.sr-footer { justify-content: space-between; }
.sr-footer-left { display: flex; gap: 6px; }
.sr-footer-right { display: flex; gap: 6px; }

/* 우편번호 주소 검색 링크 버튼 */
.addr-search-link {
  background: none; border: none; cursor: pointer;
  color: var(--accent); font-size: 13px; font-weight: 600;
  font-family: var(--font); padding: 4px 10px;
  display: inline-flex; align-items: center; gap: 5px;
  border-radius: 6px; transition: .12s;
  text-decoration: none;
}
.addr-search-link:hover { background: var(--hover); }

/* 주소 적용 버튼 */
.btn-apply-addr {
  padding: 8px 16px; background: var(--ok); border: 1px solid var(--ok);
  color: #fff; font-size: 13px; font-weight: 600; border-radius: 6px;
  cursor: pointer; font-family: var(--font); white-space: nowrap; transition: .12s; flex-shrink: 0;
}
.btn-apply-addr:hover { background: #15803d; border-color: #15803d; }

/* 우체국 우편번호 검색 결과 */
.pc-search-bar { display:flex; gap:8px; padding:14px 18px; border-bottom:1px solid var(--line); flex-shrink:0; }
.pc-search-bar .input { flex:1; }
.pc-search-btn {
  padding:8px 18px; background:var(--accent); color:#fff; border:1px solid var(--accent);
  border-radius:6px; cursor:pointer; font-size:13px; font-weight:600;
  font-family:var(--font); white-space:nowrap; transition:.12s; flex-shrink:0;
}
.pc-search-btn:hover { opacity:.88; }
.pc-results-wrap { flex:1; overflow-y:auto; }
.pc-result-item {
  display:flex; gap:12px; align-items:flex-start;
  padding:11px 18px; cursor:pointer; border-bottom:1px solid var(--line);
  transition:background .1s;
}
.pc-result-item:hover  { background:var(--hover); }
.pc-result-item.active { background:color-mix(in srgb,var(--accent) 8%,transparent); }
.pc-result-item:last-child { border-bottom:none; }
.pc-zone {
  flex-shrink:0; min-width:54px; padding:2px 8px;
  background:var(--hover); border:1px solid var(--line); border-radius:6px;
  font-family:monospace; font-size:12px; font-weight:700; color:var(--ink);
  text-align:center; margin-top:1px;
}
.pc-addr-texts { flex:1; min-width:0; }
.pc-road  { font-size:13px; color:var(--ink); font-weight:500; line-height:1.4; }
.pc-jibun { font-size:11.5px; color:var(--muted); margin-top:2px; line-height:1.3; }
.pc-detail-bar {
  flex-shrink:0; padding:14px 18px; border-top:1px solid var(--line);
  background:var(--bg); display:flex; flex-direction:column; gap:8px;
}
.pc-selected-addr {
  display:flex; gap:8px; align-items:baseline; flex-wrap:wrap;
}
.pc-selected-zone {
  flex-shrink:0; padding:2px 10px;
  background:var(--hover); border:1px solid var(--line); border-radius:6px;
  font-family:monospace; font-size:12px; font-weight:700; color:var(--ink);
}
.pc-selected-road { font-size:13px; font-weight:600; color:var(--ink); }
.pc-selected-jibun { font-size:11px; color:var(--muted); margin-top:2px; }
.pc-detail-row { display:flex; gap:8px; align-items:center; }
.pc-detail-row .input { flex:1; }

/* 거래처 자동완성 드롭다운 */
#_sr_company_dd .ac-item:last-child { border-bottom: none; }
#_sr_company_dd .ac-item:first-child { border-radius: 8px 8px 0 0; }
#_sr_company_dd .ac-item:last-child  { border-radius: 0 0 8px 8px; }

/* 납품확인서 동봉 토글 버튼 — 행 배지(.badge-confirm-doc)와 동일 톤 */
.btn-confirm-doc {
  padding: 5px 11px;
  border: 1.5px solid #c4b5fd;
  border-radius: 5px;
  background: transparent;
  color: #7c3aed;
  font-size: 12px; font-weight: 700;
  cursor: pointer; font-family: var(--font);
  white-space: nowrap; flex-shrink: 0;
  transition: all .12s;
  letter-spacing: -0.01em;
}
.btn-confirm-doc:hover {
  background: #f5f3ff;
  border-color: #a78bfa;
}
.btn-confirm-doc.on {
  background: #7c3aed;
  border-color: #6d28d9;
  color: #fff;
  box-shadow: 0 1px 3px rgba(124,58,237,.30);
}
.btn-confirm-doc.on:hover {
  background: #6d28d9;
  border-color: #5b21b6;
}
html[data-theme="dark"] .btn-confirm-doc { border-color: #6d28d9; color: #a78bfa; }
html[data-theme="dark"] .btn-confirm-doc:hover { background: #1e0a3c; }
html[data-theme="dark"] .btn-confirm-doc.on { background: #6d28d9; border-color: #a78bfa; color: #fff; }

/* 긴급처리 amber 버튼 */
.btn-urgent { background: #f59e0b; border: 1px solid #f59e0b; color: #fff; font-family: var(--font); cursor: pointer; border-radius: var(--radius); transition: .12s; }
.btn-urgent:hover { background: #d97706; border-color: #d97706; }

/* 삭제 solid red (disabled도 색상 유지) */
.btn-del-solid { background: var(--danger); border: 1px solid var(--danger); color: #fff; font-family: var(--font); cursor: pointer; border-radius: var(--radius); transition: .12s; }
.btn-del-solid:hover { background: #991b1b; border-color: #991b1b; }
.btn-del-solid:disabled { opacity: 1; cursor: not-allowed; background: var(--danger); }

/* 저장 다크 네이비 */
.btn-save-dark { background: #1e2a3a; border: 1px solid #1e2a3a; color: #fff; font-family: var(--font); cursor: pointer; border-radius: var(--radius); transition: .12s; }
.btn-save-dark:hover { background: #0f1927; border-color: #0f1927; }

/* 출고보류 활성 */
.btn-hold-active { background: #7c3aed !important; border-color: #7c3aed !important; color: #fff !important; }
.btn-hold-active:hover { background: #6d28d9 !important; border-color: #6d28d9 !important; }

/* ── 수정이력 패널 ───────────────────────────── */
.sr-hist-panel {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: 300px; background: var(--panel);
  border-left: 1px solid var(--line);
  border-radius: 0 var(--radius) var(--radius) 0;
  display: flex; flex-direction: column; z-index: 10;
  box-shadow: -4px 0 16px rgba(0,0,0,.1);
}
.sr-hist-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px; border-bottom: 1px solid var(--line);
  font-size: 14px; font-weight: 700; color: var(--ink); flex-shrink: 0;
}
.sr-hist-body {
  flex: 1; overflow-y: auto; padding: 12px 16px;
  display: flex; flex-direction: column; gap: 0;
}
.hist-row {
  display: flex; gap: 12px; padding: 10px 0;
  border-bottom: 1px solid var(--line);
}
.hist-row:last-child { border-bottom: none; }
.hist-dot {
  width: 10px; height: 10px; border-radius: 50%;
  flex-shrink: 0; margin-top: 4px;
}
.hist-body { flex: 1; min-width: 0; }
.hist-action { font-size: 12px; font-weight: 700; margin-bottom: 2px; }
.hist-detail { font-size: 12px; color: var(--ink-2); margin-bottom: 3px; word-break: break-all; }
.hist-meta   { font-size: 11px; color: var(--muted); }

/* ── 체크박스 ────────────────────────────────── */
.cb-wrap { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.cb-wrap input[type=checkbox] { width: 16px; height: 16px; cursor: pointer; accent-color: var(--accent); }

/* ── 사진 미리보기 ───────────────────────────── */
.photo-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.photo-thumb {
  width: 80px; height: 80px; object-fit: cover;
  border-radius: 6px; border: 1px solid var(--line);
  cursor: pointer;
}

/* ── 스크롤바 ────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--muted-2); border-radius: 3px; }

/* ── 예약설정 토글 스위치 ────────────────────── */
.rsv-toggle {
  position: relative; display: inline-flex;
  width: 44px; height: 24px; cursor: pointer; flex-shrink: 0;
}
.rsv-toggle input { opacity: 0; width: 0; height: 0; position: absolute; }
.rsv-slider {
  position: absolute; inset: 0;
  background: var(--line); border-radius: 24px;
  transition: background .2s;
}
.rsv-slider::before {
  content: '';
  position: absolute; left: 3px; top: 3px;
  width: 18px; height: 18px; border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,.25);
  transition: transform .2s;
}
.rsv-toggle input:checked + .rsv-slider { background: var(--accent); }
.rsv-toggle input:checked + .rsv-slider::before { transform: translateX(20px); }

/* ── 예약 프리뷰 박스 ────────────────────────── */
.rsv-preview {
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: 6px;
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 600;
  color: #1d4ed8;
}

/* ── 예약 배지 (리스트 행) ──────────────────── */
.badge-rsv {
  display: inline-flex; align-items: center; gap: 2px;
  background: #eff6ff; border: 1px solid #bfdbfe;
  color: #1e40af;
  border-radius: 4px; padding: 1px 6px;
  font-size: 11px; font-weight: 600; white-space: nowrap;
}
html[data-theme="dark"] .badge-rsv { background:#0f172a; color:#93c5fd; border-color:#1d4ed8; }

/* 예약출고 행 배경 강조 */
tr.row-rsv { background: linear-gradient(90deg, #eff6ff 0%, transparent 40%) !important; }
html[data-theme="dark"] tr.row-rsv { background: linear-gradient(90deg, #0f172a 0%, transparent 40%) !important; }

/* ── A/S 발송 등록 버튼 ─────────────────────── */
.btn-as {
  background: #fff7ed;
  color: #c2410c;
  border: 1.5px solid #fed7aa;
  font-weight: 700;
  border-radius: var(--radius);
  padding: 0 16px;
  height: 36px;
  font-size: 13px;
  cursor: pointer;
  transition: background .15s;
}
.btn-as:hover { background: #ffedd5; }

/* ── A/S 배지 (리스트 행) ──────────────────── */
.badge-as {
  display: inline-flex; align-items: center;
  background: #f5f3ff; border: 1px solid #c4b5fd;
  color: #6d28d9;
  border-radius: 4px; padding: 1px 7px;
  font-size: 11px; font-weight: 800; white-space: nowrap;
}

/* ── A/S 상태 pill ─────────────────────────── */
.pill-as-status {
  display: inline-block;
  background: #fff7ed;
  border: 1.5px solid #fed7aa;
  color: #c2410c;
  border-radius: 20px;
  padding: 3px 12px;
  font-size: 12px;
  font-weight: 700;
}

/* ── A/S 요청사항 버튼 ─────────────────────── */
.as-type-btn {
  padding: 6px 18px;
  border-radius: 20px;
  border: 2px solid var(--line);
  background: var(--panel);
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color .15s, background .15s, color .15s, box-shadow .15s;
  outline: none;
  position: relative;
}
.as-type-btn.active {
  background: #fff7ed;
  border-color: #f97316;
  color: #c2410c;
  box-shadow: 0 0 0 3px rgba(249,115,22,.15);
}
.as-type-btn:hover:not(.active) {
  border-color: var(--accent);
  color: var(--accent);
  background: #eff6ff;
}
/* A/S 타입 배지 (리스트용) */
.badge-as-type {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 10px;
  line-height: 1.5;
  white-space: nowrap;
}
.badge-as-type-registered {
  background: #f0f9ff;
  color: #0369a1;
  border: 1px solid #bae6fd;
}
.badge-as-type-cod {
  background: #fff7ed;
  color: #c2410c;
  border: 1px solid #fed7aa;
}

/* ── 인쇄 ────────────────────────────────────── */
@media print {
  .side, .topbar, .footer, .modal-root { display: none !important; }
  .main-wrapper { padding: 0; }
}

/* ═══════════════════════════════════════════════════════
   텍스트 자동추출 모달 (auto-extract.js)
   ─────────────────────────────────────────────────────── */

/* 모달 wrapper */
#ae-modal {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: center;
}
.ae-backdrop {
  position: absolute; inset: 0;
}
.ae-panel {
  position: relative;
  width: min(1100px, 96vw);
  max-height: 92vh;
  background: var(--panel);
  border-radius: 14px;
  box-shadow: 0 20px 60px rgba(0,0,0,.25);
  display: flex; flex-direction: column;
  overflow: hidden;
}
.ae-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 16px 22px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, #fffbeb 0%, var(--panel) 100%);
}
html[data-theme="dark"] .ae-head {
  background: linear-gradient(180deg, #1e1a0a 0%, var(--panel) 100%);
}
.ae-head h2 { margin: 0; font-size: 16px; font-weight: 700; }
.ae-head .ae-i { color: var(--amber, #f59e0b); margin-right: 4px; }
.ae-close {
  background: none; border: none; cursor: pointer;
  font-size: 18px; color: var(--muted); padding: 4px 8px;
}
.ae-close:hover { color: var(--text); }

.ae-body {
  padding: 16px 22px;
  overflow-y: auto;
  flex: 1;
}
.ae-hint {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 12px;
  color: var(--muted);
  font-size: 13px;
  margin-bottom: 12px;
}
.ae-hint code {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 1px 6px;
  font-size: 12px;
  color: var(--text);
}
#ae-input {
  width: 100%;
  min-height: 160px;
  max-height: 220px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  font-family: 'D2Coding', 'Consolas', monospace;
  font-size: 13px;
  resize: vertical;
  outline: none;
  background: var(--panel);
  color: var(--text);
}
#ae-input:focus { border-color: var(--amber, #f59e0b); box-shadow: 0 0 0 3px rgba(245,158,11,.18); }

.ae-empty {
  padding: 32px;
  text-align: center;
  color: var(--muted);
  font-size: 13px;
}
.ae-results { margin-top: 14px; overflow-x: auto; }

.ae-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.ae-table th, .ae-table td {
  border-bottom: 1px solid var(--line);
  padding: 8px 6px;
  text-align: left;
  vertical-align: top;
}
.ae-table th {
  background: var(--bg);
  font-weight: 600;
  position: sticky; top: 0;
  white-space: nowrap;
}
.ae-tag {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 3px;
  font-size: 11px;
  font-weight: 600;
}
.ae-tag-new { background: #fef3c7; color: #92400e; }
html[data-theme="dark"] .ae-tag-new { background: #3d2a00; color: #fbbf24; }
.ae-qty { color: var(--muted); font-size: 12px; }

.ae-foot {
  border-top: 1px solid var(--line);
  padding: 12px 22px;
  display: flex; justify-content: space-between; align-items: center;
}
.ae-status { color: var(--muted); font-size: 13px; }
.ae-btn {
  border: 1px solid var(--line);
  background: var(--panel);
  padding: 8px 16px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
}
.ae-btn:disabled { opacity: .5; cursor: not-allowed; }
.ae-btn-primary {
  background: var(--amber, #f59e0b);
  border-color: #d97706;
  color: #fff;
}
.ae-btn-primary:hover:not(:disabled) { background: #d97706; }

/* AE 전용 토스트 */
#ae-toast {
  position: fixed;
  bottom: 24px; left: 50%; transform: translateX(-50%) translateY(20px);
  background: rgba(17, 24, 39, .95); color: #fff;
  padding: 10px 18px; border-radius: 8px;
  font-size: 13px;
  opacity: 0; pointer-events: none;
  transition: opacity .25s, transform .25s;
  z-index: 10000;
}
#ae-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* AE 출고방법 select */
.ae-ship-sel {
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 3px 6px;
  font-size: 12px;
  color: var(--text, var(--ink));
  background: var(--panel);
  cursor: pointer;
  min-width: 90px;
}
.ae-ship-sel:focus { outline: none; border-color: var(--accent); }
html[data-theme="dark"] .ae-ship-sel { background: var(--panel); color: var(--ink); border-color: var(--line); }

/* 다품목 스택 표시 (il = item line) */
.il-code {
  font-size: 11.5px;
  color: var(--muted);
  line-height: 1.6;
  white-space: nowrap;
}
.il-name {
  font-size: 12px;
  line-height: 1.6;
  white-space: normal;
  word-break: break-word;
  overflow-wrap: break-word;
}
.il-qty {
  font-size: 12px;
  font-weight: 700;
  text-align: right;
  line-height: 1.6;
  color: #d97706;
}
/* 택배출고정보 — 운송장번호별 줄 / 배송비 입력 (행 높이 정렬) */
.cs-tn-line {
  height: 32px;
  display: flex;
  align-items: center;
  white-space: nowrap;
}
.cs-tn-line + .cs-tn-line,
.cs-fee-line + .cs-fee-line { border-top: 1px dashed var(--border); }
.cs-fee-line {
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  font-size: 12px;
  color: var(--muted);
}
.cs-fee-inp {
  width: 76px;
  height: 24px;
  text-align: right;
  font-size: 12px;
  padding: 0 6px;
  border: 1px solid var(--border);
  border-radius: 5px;
  background: #fff;
}
.cs-fee-inp:focus { outline: none; border-color: var(--accent); }
.cs-fee-inp:disabled { background: #f9fafb; color: var(--muted); }
.il-qty-hi { /* 하위 호환 유지 */ }

/* ── 관리번호 자동추출 표시 ── */
.input-auto {
  background: #fffbeb !important;
  border-color: #fbbf24 !important;
  box-shadow: 0 0 0 2px rgba(251,191,36,.2) !important;
}
.input-auto::placeholder { color: transparent; }

/* ── 계정관리 접근 권한 박스 ── */
.perm-box {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px 14px;
  max-height: 280px;
  overflow-y: auto;
  background: var(--panel);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.perm-group-label {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--muted);
  letter-spacing: .03em;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--line-2);
}
.perm-group-items {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
}
.perm-chk-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  cursor: pointer;
  white-space: nowrap;
  color: var(--ink);
}
.perm-chk-label input[type="checkbox"] {
  width: 15px;
  height: 15px;
  accent-color: var(--accent);
  cursor: pointer;
}
.perm-chk-label input:disabled {
  cursor: not-allowed;
}

/* ── 상태변경 출고정보 모달 ── */
.sc-wrap {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.sc-section {
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}
.sc-section:last-child { border-bottom: none; }
.sc-section-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.sc-sn-item {
  margin-bottom: 10px;
}
.sc-sn-item:last-child { margin-bottom: 0; }
.sc-sn-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  background: var(--row-hover, #f9fafb);
  border: 1px solid var(--line);
  border-radius: 6px 6px 0 0;
  padding: 6px 10px;
  border-bottom: none;
}
.sc-sn-ta {
  border-radius: 0 0 6px 6px !important;
  font-family: 'D2Coding', 'Consolas', monospace;
  font-size: 12.5px;
  resize: vertical;
  min-height: 64px;
}
.sc-photo-drop {
  border: 2px dashed var(--line);
  border-radius: 8px;
  padding: 18px;
  text-align: center;
  cursor: pointer;
  transition: border-color .15s, background .15s;
  background: var(--panel, #fafafa);
  user-select: none;
}
.sc-photo-drop:hover, .sc-dragover { border-color: var(--accent) !important; background: #eff6ff !important; }
.sc-uploading { opacity: .6; pointer-events: none; }
.sc-photo-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}
.sc-photo-thumb {
  position: relative;
  width: 80px;
  height: 80px;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid var(--line);
}
.sc-photo-thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.sc-photo-del {
  position: absolute;
  top: 2px; right: 2px;
  background: rgba(0,0,0,.55);
  color: #fff;
  border: none;
  border-radius: 50%;
  width: 18px; height: 18px;
  font-size: 10px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  line-height: 1;
}
.sc-photo-del:hover { background: var(--danger); }
/* 텍스트 파일 썸네일 */
.sc-photo-thumb.sc-file-item { background: var(--bg); }
.sc-file-link {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  width: 100%; height: 100%;
  gap: 4px; text-decoration: none; color: inherit;
  padding: 4px;
}
.sc-file-link:hover { background: var(--row-hover); }
.sc-file-icon { font-size: 26px; line-height: 1; }
.sc-file-name {
  font-size: 9px; color: var(--muted); text-align: center;
  word-break: break-all; line-height: 1.3;
  max-width: 72px;
  overflow: hidden; display: -webkit-box;
  -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.sc-tracking-row {
  display: flex;
  gap: 6px;
  align-items: center;
  margin-bottom: 6px;
}
.sc-tracking-row .input { flex: 1; }
.sc-tracking-del {
  background: none;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 6px 10px;
  cursor: pointer;
  color: var(--danger);
  font-size: 13px;
  white-space: nowrap;
}
.sc-tracking-del:hover { background: #fee2e2; }
.sc-add-btn {
  background: none;
  border: 1px dashed var(--line);
  border-radius: 6px;
  padding: 6px 14px;
  cursor: pointer;
  font-size: 12px;
  color: var(--muted);
  width: 100%;
  margin-top: 4px;
  transition: border-color .15s;
}
.sc-add-btn:hover { border-color: var(--accent); color: var(--accent); }
.sc-status-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}
.sc-status-btn {
  padding: 7px 16px;
  border: 1.5px solid var(--line);
  border-radius: 20px;
  background: var(--bg);
  color: var(--muted);
  font-size: 13px;
  cursor: pointer;
  transition: border-color .15s, background .15s, color .15s;
}
.sc-status-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.sc-status-btn.active {
  border-color: var(--accent);
  background: var(--accent);
  color: #fff;
  font-weight: 600;
}

/* ── 미출고 선발행 상태 선택 버튼 (bp-status-btn) ── */
.bp-status-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}
.bp-status-btn {
  padding: 7px 16px;
  border: 1.5px solid var(--line);
  border-radius: 20px;
  background: var(--bg);
  color: var(--muted);
  font-size: 13px;
  cursor: pointer;
  transition: border-color .15s, background .15s, color .15s;
}
.bp-status-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.bp-status-btn.active {
  color: #fff;
  font-weight: 600;
}
/* 상태별 선택 색상 (등록리스트 pill 색상과 통일) */
.bp-status-btn.active[data-status="new"]       { background:#2563eb; border-color:#2563eb; }
.bp-status-btn.active[data-status="paid"]      { background:#d97706; border-color:#d97706; }
.bp-status-btn.active[data-status="ready"]     { background:#7c3aed; border-color:#7c3aed; }
.bp-status-btn.active[data-status="requested"] { background:#16a34a; border-color:#16a34a; }
.bp-status-btn.active[data-status="cancelled"] { background:#dc2626; border-color:#dc2626; }

/* 통계 카드 숫자 색상 강조 */
#bp-stat-bar [data-bpstat="requested"] .stat-num { color:#16a34a; }
#bp-stat-bar [data-bpstat="cancelled"] .stat-num { color:#dc2626; }

/* ── 발송요청 상세보기 (sd-*) ── */
.sd-section {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px 16px;
  margin-bottom: 12px;
  background: var(--surface);
}
.sd-section-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: 10px;
}
.sd-sn-block { margin-bottom: 10px; }
.sd-sn-block:last-child { margin-bottom: 0; }
.sd-sn-label {
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 6px;
}
.sd-sn-qty {
  font-weight: 600;
  color: var(--fg);
  background: var(--tag-bg, #f1f5f9);
  border-radius: 4px;
  padding: 0 5px;
  font-size: 11px;
  margin-left: 2px;
}
.sd-sn-list, .sd-tracking-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.sd-sn-tag {
  display: inline-block;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  color: #1e40af;
  border-radius: 4px;
  padding: 3px 8px;
  font-size: 12px;
}
.sd-sn-tag.mono { font-family: monospace; letter-spacing: .02em; }
.sd-photo-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.sd-photo-thumb {
  width: 90px;
  height: 90px;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid var(--line);
  display: block;
  cursor: zoom-in;
}
.sd-photo-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity .15s;
}
.sd-photo-thumb:hover img { opacity: .85; }
.sd-photo-thumb.sc-file-item { background: var(--bg); cursor: default; }
.sd-empty { font-size: 13px; color: var(--muted); }

/* ── 발송요청 상세 정보 테이블 (sdt-*) ── */
.sdt-wrap {
  display: block;
  min-width: 0;       /* flex 자식이 부모 폭을 초과하지 않도록 */
  max-width: 100%;    /* 컨테이너 폭 초과 금지 */
  overflow: hidden;   /* 테이블이 wrap을 넘어가는 경우 차단 */
}
.sdt-table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  margin-bottom: 4px;
  table-layout: fixed;   /* colgroup 기준 컬럼 폭 고정 */
  overflow: hidden;      /* border-radius 클리핑 + 셀 오버플로 차단 */
}
/* 모서리 둥글게 — overflow:hidden 없이 각 모서리 셀에 직접 적용 */
.sdt-table tr:first-child th:first-child,
.sdt-table tr:first-child td:first-child { border-top-left-radius: var(--radius); }
.sdt-table tr:first-child th:last-child,
.sdt-table tr:first-child td:last-child  { border-top-right-radius: var(--radius); }
.sdt-table tr:last-child  th:first-child,
.sdt-table tr:last-child  td:first-child { border-bottom-left-radius: var(--radius); }
.sdt-table tr:last-child  th:last-child,
.sdt-table tr:last-child  td:last-child  { border-bottom-right-radius: var(--radius); }

/* 헤더 행 (회색) — 품목목록 thead 방식과 동일 */
.sdt-hdr { background: var(--line-2); border-bottom: 1px solid var(--line); }
.sdt-hdr th {
  padding: 7px 12px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--muted);
  text-align: left;
  border-right: 1px solid var(--line);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sdt-hdr th:last-child { border-right: none; }

/* 값 행 (흰색) */
.sdt-vtr { border-bottom: 1px solid var(--line); }
.sdt-vtr:last-child { border-bottom: none; }
.sdt-vtr td {
  padding: 10px 14px;
  font-size: 13px;
  color: var(--ink);
  vertical-align: top;
  border-right: 1px solid var(--line);
  word-break: break-word;
  overflow-wrap: break-word;
  white-space: normal;
}
.sdt-vtr td:last-child { border-right: none; }

/* 하위 호환 — 기존 sdt-lbl/sdt-val 유지 */
.sdt-lbl {
  padding: 10px 12px; font-size: 12px; font-weight: 600;
  color: var(--muted); background: var(--line-2);
  border-right: 1px solid var(--line); vertical-align: top; white-space: nowrap;
}
.sdt-val {
  padding: 10px 14px; font-size: 13px; color: var(--ink);
  vertical-align: top; border-right: 1px solid var(--line);
  word-break: break-word; overflow-wrap: break-word; white-space: normal;
}
.sdt-val:last-child { border-right: none; }

/* 운송장번호 행 */
.sd-track-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 0;
  border-bottom: 1px solid var(--line);
}
.sd-track-row:last-child { border-bottom: none; }
.sd-track-label {
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
  min-width: 90px;
  flex-shrink: 0;
}
.sd-track-link {
  font-size: 14px;
  font-weight: 700;
  color: var(--accent);
  text-decoration: none;
  letter-spacing: .03em;
}
.sd-track-link:hover {
  text-decoration: underline;
  color: #1d4ed8;
}

/* ══════════════════════════════════════════════════
   출고정보 Split-Panel Overlay (시안 3)
══════════════════════════════════════════════════ */
#sc-overlay,
#ib-overlay,
#dp-overlay {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center;
}
#sc-overlay[hidden],
#ib-overlay[hidden],
#dp-overlay[hidden] { display: none !important; }
/* 발송요청·입고내역 overlay: 콘텐츠 높이에 맞게 자동 축소 */
#sc-overlay .sc-ov-panel,
#ib-overlay .sc-ov-panel,
#dp-overlay .sc-ov-panel {
  height: auto;
  max-height: 92vh;
}
#sc-overlay .sc-ov-left,
#sc-overlay .sc-ov-right,
#ib-overlay .sc-ov-left,
#ib-overlay .sc-ov-right,
#dp-overlay .sc-ov-left,
#dp-overlay .sc-ov-right {
  max-height: calc(92vh - 110px); /* 110px ≈ 헤더+푸터 */
}
.sc-ov-backdrop {
  position: absolute; inset: 0;
  background: rgba(0,0,0,.48);
}
.sc-ov-panel {
  position: relative; z-index: 1;
  width: min(1480px, 96vw);
  height: 92vh;
  background: var(--panel);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  display: flex; flex-direction: column;
  overflow: hidden;
}
.sc-ov-header {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
}
.sc-ov-header-title { font-size: 15px; font-weight: 700; }
.sc-ov-body {
  flex: 1; min-height: 0;
  display: grid;
  grid-template-columns: 260px 1fr;
}
.sc-ov-left {
  border-right: 1px solid var(--line);
  background: var(--bg);
  overflow-x: hidden;
  overflow-y: auto;
  padding: 18px 16px;
  display: flex; flex-direction: column; gap: 0;
  min-width: 0;
}
.sc-ov-right {
  overflow-y: auto;
  padding: 20px 28px 28px;
}
.sc-ov-footer {
  display: flex; align-items: center; justify-content: space-between;
  padding: 11px 20px;
  border-top: 1px solid var(--line);
  flex-shrink: 0;
  background: var(--panel);
}

/* ── Left: 요청 정보 ── */
.sc-ov-block { margin-bottom: 18px; min-width: 0; }
.sc-ov-block-title {
  font-size: 10px; font-weight: 700; color: var(--muted);
  text-transform: uppercase; letter-spacing: .07em;
  margin-bottom: 8px;
}
/* flex-row 기반 정보 목록 (구 table 대체 — word-break 보장) */
.sc-ov-info-rows { width: 100%; }
.sc-ov-info-row {
  display: flex; gap: 8px;
  padding: 5px 0; font-size: 12px;
  border-bottom: 1px solid var(--line-2);
  align-items: flex-start;
}
.sc-ov-info-row:last-child { border-bottom: none; }
.sc-ov-info-k {
  color: var(--muted);
  width: 62px; min-width: 62px; flex-shrink: 0;
  padding-top: 1px;
}
.sc-ov-info-v {
  font-weight: 500;
  min-width: 0; flex: 1;          /* min-width:0 이 핵심 — 줄바꿈 허용 */
  word-break: break-all;
  overflow-wrap: anywhere;
}

/* ── Left: 체크리스트 ── */
.sc-ov-checklist { display: flex; flex-direction: column; gap: 5px; }
.sc-ov-chk {
  display: flex; align-items: center; gap: 7px;
  font-size: 12px; padding: 5px 7px; border-radius: 6px;
  transition: background .15s;
}
.sc-ov-chk.done { background: var(--ok-bg); }
.sc-ov-chk.current { background: var(--warn-bg); }
.sc-ov-chk-icon {
  width: 18px; height: 18px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 10px; flex-shrink: 0;
  border: 1.5px solid var(--muted-2);
  color: var(--muted);
}
.sc-ov-chk.done .sc-ov-chk-icon { background: var(--ok); border-color: var(--ok); color: #fff; }
.sc-ov-chk.current .sc-ov-chk-icon { border-color: var(--warn); color: var(--warn); }
.sc-ov-chk-lbl { flex: 1; color: var(--ink-2); }
.sc-ov-chk.done .sc-ov-chk-lbl { color: var(--muted); }
.sc-ov-chk-tag {
  font-size: 10px; padding: 1px 7px; border-radius: 20px; font-weight: 600;
}
.sc-ov-chk-tag.ok   { background: var(--ok-bg); color: var(--ok); }
.sc-ov-chk-tag.pend { background: var(--warn-bg); color: var(--warn); }
.sc-ov-chk-tag.todo { background: var(--line); color: var(--muted); }

/* ── 진행 바 ── */
.sc-ov-prog { margin-top: 12px; }
.sc-ov-prog-bar { height: 4px; background: var(--line); border-radius: 4px; overflow: hidden; }
.sc-ov-prog-fill { height: 4px; background: var(--accent); border-radius: 4px; transition: width .4s; }
.sc-ov-prog-text { font-size: 11px; color: var(--muted); margin-top: 3px; }

/* ── 자동저장 뱃지 ── */
.sc-ov-autosave {
  font-size: 11px; color: var(--ok);
  display: flex; align-items: center; gap: 4px;
  margin-left: auto;
}
.sc-ov-autosave-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--ok); flex-shrink: 0;
  animation: sc-pulse 2s infinite;
}
@keyframes sc-pulse { 0%,100%{opacity:1} 50%{opacity:.3} }

/* ── OCR 힌트 ── */
.sc-ov-ocr-hint {
  display: flex; align-items: flex-start; gap: 8px;
  background: #f0effe; border: 1px solid #c4b5fd;
  border-radius: var(--radius); padding: 8px 12px;
  font-size: 12px; color: #5b21b6; margin-top: 8px;
  animation: sc-fadein .3s ease;
}
@keyframes sc-fadein { from{opacity:0;transform:translateY(-4px)} to{opacity:1;transform:none} }

/* ── 드래프트 복원 알림 ── */
.sc-ov-draft-alert {
  display: flex; align-items: center; gap: 8px;
  background: var(--warn-bg); border: 1px solid #fed7aa;
  border-radius: var(--radius); padding: 8px 12px;
  font-size: 12px; color: var(--warn); margin-bottom: 16px;
}

/* ── 완료 배너 ── */
.sc-ov-done-banner {
  display: flex; align-items: center; gap: 10px;
  background: var(--ok-bg); border: 1px solid #bbf7d0;
  border-radius: var(--radius); padding: 10px 14px;
  font-size: 13px; color: var(--ok); font-weight: 600;
  margin-bottom: 16px;
}

/* ── 섹션 타이틀 (오른쪽 패널) ── */
.sc-ov-sec-title {
  font-size: 13px; font-weight: 700; color: var(--ink);
  margin: 0 0 10px;
  padding-bottom: 7px; border-bottom: 1px solid var(--line);
  display: flex; align-items: center; gap: 5px;
}

/* ════════════════════════════════════════════════════
   납품확인서 편집 모달
════════════════════════════════════════════════════ */
.dc-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.45);
  z-index: 1200;
  animation: dcFadeIn .15s ease;
}
.dc-modal {
  position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1201;
  background: var(--panel);
  border-radius: 14px;
  box-shadow: 0 8px 40px rgba(0,0,0,.22);
  width: 540px; max-width: calc(100vw - 32px);
  display: flex; flex-direction: column;
  animation: dcSlideUp .18s ease;
  overflow: hidden;
}
@keyframes dcFadeIn  { from { opacity:0 } to { opacity:1 } }
@keyframes dcSlideUp { from { opacity:0; transform:translate(-50%,-46%) } to { opacity:1; transform:translate(-50%,-50%) } }

.dc-modal-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px 14px;
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
}
.dc-modal-title {
  font-size: 15px; font-weight: 700; color: var(--ink);
}
.dc-close-btn {
  background: none; border: none; cursor: pointer;
  font-size: 16px; color: var(--muted); padding: 2px 6px;
  border-radius: 6px; line-height: 1;
  transition: background .1s, color .1s;
}
.dc-close-btn:hover { background: var(--hover); color: var(--ink); }

.dc-modal-body {
  padding: 20px 22px;
  overflow-y: auto;
  flex: 1;
}
.dc-field-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 16px;
}
.dc-field-full { grid-column: 1 / -1; }
.dc-field {
  display: flex; flex-direction: column; gap: 5px;
  min-width: 0;
}
.dc-label {
  font-size: 12px; font-weight: 600; color: var(--ink);
}
.dc-hint {
  font-weight: 400; color: var(--muted); font-size: 11px;
}
.dc-input {
  width: 100%; padding: 7px 10px;
  font-size: 13px;
}

.dc-modal-foot {
  display: flex; align-items: center; justify-content: flex-end; gap: 8px;
  padding: 13px 20px;
  border-top: 1px solid var(--line);
  flex-shrink: 0;
  background: var(--panel);
}

/* btn-pdf-dl 버튼 크기 조정 */
.btn-pdf-dl { white-space: nowrap; }

html[data-theme="dark"] .dc-modal {
  box-shadow: 0 8px 40px rgba(0,0,0,.5);
}

/* ── 업무게시판 좌측 트리 + 테이블 레이아웃 ── */
.wb-layout { display: flex; gap: 12px; align-items: flex-start; }
.wb-tree {
  width: 248px; flex: 0 0 248px;
  position: sticky; top: calc(var(--sr-head-h, 0px) + 8px);
  background: var(--card, #fff); border: 1px solid var(--line);
  border-radius: 12px; padding: 8px 6px;
  max-height: calc(100vh - var(--sr-head-h, 0px) - 40px); overflow-y: auto;
}
.wb-table-wrap { flex: 1; min-width: 0; }
.wbt-node {
  display: flex; align-items: center; gap: 5px;
  padding: 6px 8px; border-radius: 8px;
  cursor: pointer; user-select: none; font-size: 13px;
}
.wbt-node:hover { background: rgba(0,0,0,.045); }
.wbt-node.sel { background: #eef2ff; color: #4338ca; }
.wbt-all { font-weight: 700; margin-bottom: 4px; border-bottom: 1px solid var(--line); border-radius: 8px 8px 0 0; }
.wbt-folder { font-weight: 600; margin-top: 2px; }
.wbt-board { padding-left: 34px; color: var(--muted); }
.wbt-board.sel { color: #4338ca; font-weight: 600; }
.wbt-arrow { width: 14px; flex: 0 0 14px; text-align: center; color: var(--muted); font-size: 11px; }
.wbt-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wbt-cnt { font-size: 11px; color: var(--muted); background: rgba(0,0,0,.05); border-radius: 10px; padding: 1px 7px; font-variant-numeric: tabular-nums; }
.wbt-node.sel .wbt-cnt { background: #e0e7ff; color: #4338ca; }
.wbt-dot { width: 7px; height: 7px; flex: 0 0 7px; border-radius: 50%; background: #dc2626; }
@media (max-width: 980px) {
  .wb-layout { flex-direction: column; }
  .wb-tree { width: 100%; flex: none; position: static; max-height: 280px; }
}
html[data-theme="dark"] .wb-tree { background: var(--card, #161d29); }
html[data-theme="dark"] .wbt-node:hover { background: rgba(255,255,255,.06); }
html[data-theme="dark"] .wbt-node.sel { background: #2a3158; color: #c7d2fe; }
html[data-theme="dark"] .wbt-board.sel { color: #c7d2fe; }
html[data-theme="dark"] .wbt-cnt { background: rgba(255,255,255,.08); }
html[data-theme="dark"] .wbt-node.sel .wbt-cnt { background: #3b4280; color: #c7d2fe; }

/* ── 업무게시판 수집 내용 정리 모달 (출고정보입력 스플릿 패널 방식) ── */
.wbd-overlay {
  position: fixed; inset: 0; z-index: 1200;
  background: rgba(15,23,42,.45);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
.wbd-panel {
  width: 920px; max-width: 96vw; max-height: 92vh;
  background: var(--card, #fff); border-radius: 14px;
  box-shadow: 0 16px 60px rgba(0,0,0,.25);
  display: flex; flex-direction: column; overflow: hidden;
}
.wbd-head {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 18px; border-bottom: 1px solid var(--line);
}
.wbd-head-t { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; }
.wbd-caseno {
  font-family: ui-monospace, monospace; font-weight: 700; font-size: 13.5px;
  color: var(--accent); background: rgba(59,130,246,.08);
  border-radius: 6px; padding: 3px 8px; white-space: nowrap;
}
.wbd-title { font-weight: 700; font-size: 14.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wbd-head-r { display: flex; align-items: center; gap: 8px; }
.wbd-body { flex: 1; display: flex; min-height: 0; }
.wbd-left {
  width: 235px; flex: 0 0 235px; overflow-y: auto;
  background: #f8fafc; border-right: 1px solid var(--line);
  padding: 14px;
}
.wbd-left-h { font-size: 11.5px; font-weight: 700; color: var(--muted); margin-bottom: 10px; letter-spacing: .04em; }
.wbd-info-row { display: flex; flex-direction: column; gap: 2px; padding: 7px 0; border-bottom: 1px dashed var(--line); }
.wbd-info-row:last-child { border-bottom: none; }
.wbd-info-k { font-size: 11px; color: var(--muted); }
.wbd-info-v { font-size: 13px; font-weight: 600; word-break: break-all; }
.wbd-right { flex: 1; min-width: 0; overflow-y: auto; padding: 16px 18px; }
.wbd-card { border: 1px solid var(--line); border-radius: 10px; margin-bottom: 12px; overflow: hidden; }
.wbd-card-h {
  padding: 8px 12px; font-size: 12.5px; font-weight: 700;
  background: #f1f5f9; border-bottom: 1px solid var(--line);
}
.wbd-card-b { padding: 6px 12px; }
.wbd-kv { display: grid; grid-template-columns: 110px 1fr; gap: 10px; padding: 6px 0; border-bottom: 1px dashed var(--line); font-size: 13px; }
.wbd-kv:last-child { border-bottom: none; }
.wbd-k { color: var(--muted); font-size: 12px; padding-top: 1px; }
.wbd-v { font-weight: 500; word-break: break-all; line-height: 1.55; }
.wbd-raw { font-size: 12.5px; color: var(--muted); line-height: 1.7; padding: 4px 0; word-break: break-all; }
.wbd-raw-note { font-size: 11px; color: var(--muted-2); padding: 6px 0 4px; }
.wbd-foot {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 18px; border-top: 1px solid var(--line); background: var(--card, #fff);
}
@media (max-width: 760px) {
  .wbd-body { flex-direction: column; overflow-y: auto; }
  .wbd-left { width: 100%; flex: none; border-right: none; border-bottom: 1px solid var(--line); }
}
html[data-theme="dark"] .wbd-left { background: #161d29; }
html[data-theme="dark"] .wbd-card-h { background: #1c2533; }
html[data-theme="dark"] .wbd-caseno { background: rgba(96,165,250,.12); }

/* ── 업무게시판 상세 모달: 댓글 카드 ───────────────────────── */
.wbd-cmt { padding: 8px 0; border-bottom: 1px dashed var(--line); }
.wbd-cmt:last-child { border-bottom: none; }
.wbd-cmt-h { display: flex; align-items: baseline; gap: 8px; margin-bottom: 3px; }
.wbd-cmt-user { font-size: 12.5px; font-weight: 700; }
.wbd-cmt-date { font-size: 11px; color: var(--muted-2); }
.wbd-cmt-t { font-size: 13px; line-height: 1.6; word-break: break-all; white-space: pre-line; }
html[data-theme="dark"] .wbd-cmt-t { color: var(--text); }

/* ── 납품확인서: 저장된 편집본 있는 버튼 강조 ───────────────── */
.btn-pdf-dl.btn-dc-saved {
  background: #059669 !important;
  border-color: #059669 !important;
  color: #fff !important;
  font-weight: 700;
  box-shadow: 0 0 0 2px rgba(5, 150, 105, .22);
}
.btn-pdf-dl.btn-dc-saved:hover {
  background: #047857 !important;
  border-color: #047857 !important;
}
html[data-theme="dark"] .btn-pdf-dl.btn-dc-saved {
  background: #10b981 !important;
  border-color: #10b981 !important;
  color: #052e22 !important;
  box-shadow: 0 0 0 2px rgba(16, 185, 129, .3);
}