/* Aria-Muse — 시안 3 (미니멀 워크스페이스) 운영 스타일 */

:root{
  --bg:#fbfbfa; --panel:#ffffff;
  --ink:#1f1f1f; --ink-2:#3a3a3a; --muted:#8a8a8a; --muted-2:#b8b8b8;
  --line:#ececea; --line-2:#f3f3f1; --hover:#f4f4f2;
  --accent:#d97706;
  --ok:#15803d; --warn:#b45309; --danger:#b91c1c;
  --radius:8px;
  --side-w:248px;
}
html[data-theme="dark"]{
  --bg:#15161a; --panel:#1c1d22;
  --ink:#ececec; --ink-2:#cfcfcf; --muted:#8a8d96; --muted-2:#5b5e67;
  --line:#2a2c33; --line-2:#23252b; --hover:#23252b;
  --accent:#fbbf24;
  --ok:#34d399; --warn:#fbbf24; --danger:#f87171;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);
  font-family:'Pretendard Variable','Pretendard',-apple-system,system-ui,sans-serif;
  font-size:14px; line-height:1.55; -webkit-font-smoothing:antialiased}
a{color:inherit; text-decoration:none}
button{font-family:inherit}
[hidden]{display:none !important}

.shell{display:grid; grid-template-columns:var(--side-w) 1fr; min-height:100vh}
.shell.sidebar-mini{grid-template-columns:48px 1fr}

.side{background:var(--panel); border-right:1px solid var(--line); padding:14px 8px;
  position:sticky; top:0; height:100vh; display:flex; flex-direction:column; gap:6px;
  overflow:hidden; width:var(--side-w); transition:width .2s ease}
.shell.sidebar-mini .side{width:48px; padding:10px 4px; align-items:center}

.brand{display:flex; gap:10px; align-items:center; padding:8px 10px 12px;
  border-bottom:1px solid var(--line-2); margin-bottom:6px; white-space:nowrap}
.brand-mark{width:30px;height:30px;border-radius:8px;background:#1f1f1f; color:#fff;
  display:grid; place-items:center; font-weight:800; letter-spacing:-.5px; font-size:14px;
  flex-shrink:0}
html[data-theme="dark"] .brand-mark{background:#fff; color:#15161a}
.brand-title{font-weight:700; font-size:14px}
.brand-sub{font-size:11px; color:var(--muted)}
.shell.sidebar-mini .brand{justify-content:center; padding:8px 0 12px; border-bottom-color:var(--line-2)}
.shell.sidebar-mini .brand-texts{display:none}

kbd{font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:10.5px; color:var(--muted);
  background:var(--line-2); padding:1px 5px; border-radius:4px}

.nav{display:flex; flex-direction:column; gap:1px; overflow:auto; padding:0 4px; flex:1;
  width:100%}
.nav-section{font-size:10.5px; font-weight:700; color:var(--muted); letter-spacing:.06em;
  text-transform:uppercase; margin:10px 10px 4px; white-space:nowrap}
.nav-item{display:flex; align-items:center; gap:8px; padding:6px 10px; border-radius:6px;
  color:var(--ink-2); cursor:pointer; font-weight:500; font-size:13.5px; user-select:none;
  white-space:nowrap; position:relative}
.nav-item:hover{background:var(--hover)}
.nav-item.active{background:var(--line-2); color:var(--ink); font-weight:600}
html[data-theme="dark"] .nav-item.active{background:#2a2c33}
.nav-item .ico{width:16px; display:inline-grid; place-items:center; color:var(--muted-2);
  font-size:11px; flex-shrink:0}
.nav-item.active .ico{color:var(--accent)}

/* 미니 사이드바 nav */
.shell.sidebar-mini .nav{overflow:visible; padding:0 2px}
.shell.sidebar-mini .nav-section{display:none}
.shell.sidebar-mini .sys-card{display:none}
.shell.sidebar-mini .nav-item{padding:8px; justify-content:center; width:40px}
.shell.sidebar-mini .nav-item > span.nav-label{display:none}
.shell.sidebar-mini .nav-item::after{
  content:attr(data-tooltip);
  position:fixed;
  left:58px;
  background:var(--ink);
  color:var(--panel);
  padding:4px 10px;
  border-radius:5px;
  font-size:12px;
  white-space:nowrap;
  z-index:9999;
  font-weight:500;
  pointer-events:none;
  opacity:0;
  transition:opacity .12s;
  top:var(--tooltip-y,50%);
}
.shell.sidebar-mini .nav-item:hover::after{opacity:1}

.sys-card{padding:10px 12px; font-size:11.5px; color:var(--muted); border-top:1px solid var(--line)}
.sys-row{display:flex; justify-content:space-between; padding:2px 0}
.sys-row b{color:var(--ink-2); font-weight:600}
.sys-row .ok{color:var(--ok); font-weight:700}
.sys-row .err{color:var(--danger); font-weight:700}

.main{display:flex; flex-direction:column; min-width:0; background:var(--panel)}
.topbar{position:sticky; top:0; z-index:10; display:flex; align-items:center; gap:10px;
  padding:10px 20px 10px 16px; background:var(--panel); border-bottom:1px solid var(--line); min-height:44px}
.sidebar-toggle{background:none; border:none; color:var(--muted); font-size:16px; cursor:pointer;
  padding:4px 6px; border-radius:5px; line-height:1; flex-shrink:0}
.sidebar-toggle:hover{background:var(--hover); color:var(--ink)}
.crumb{display:flex; align-items:center; gap:8px; color:var(--muted); font-size:12.5px}
.crumb b{color:var(--ink); font-weight:600}
.crumb .sep{color:var(--muted-2)}
.topbar-right{display:flex; align-items:center; gap:8px; margin-left:auto}
.tb-search{display:flex; align-items:center; gap:5px; background:var(--bg);
  border:1px solid var(--line); border-radius:6px; padding:5px 8px; width:180px}
.tb-search .search-ico{color:var(--muted-2); font-size:13px; flex-shrink:0}
.tb-search input{flex:1; border:0; outline:0; background:transparent; font-size:12.5px;
  color:var(--ink-2); min-width:0}
.tb-search input::placeholder{color:var(--muted-2)}
.btn{background:#1f1f1f; color:#fff; border:0; border-radius:6px; padding:7px 12px; font-weight:600;
  cursor:pointer; font-size:13px}
html[data-theme="dark"] .btn{background:#fff; color:#15161a}
.btn.ghost{background:transparent; color:var(--ink-2); border:1px solid var(--line)}
.btn.link{background:transparent; color:var(--ink-2); border:0; padding:7px 8px}
.btn.danger{background:var(--danger); color:#fff}
.btn:hover{filter:brightness(1.05)}
.logout-btn{font-size:12px !important; padding:4px 10px !important;
  border:0.5px solid var(--line) !important; border-radius:var(--radius) !important;
  font-weight:500 !important}
.avatar{width:28px;height:28px;border-radius:99px; background:var(--line-2); color:var(--ink);
  font-weight:700; display:grid; place-items:center; font-size:11.5px; border:1px solid var(--line)}

.view{padding:28px 36px 60px; display:flex; flex-direction:column; gap:24px; max-width:1280px; width:100%}
/* 와이드 페이지 (발송요청내역 등) — max-width 제약 해제, 브라우저 폭에 자동 맞춤 */
.view.view-wide{max-width:none; padding:20px 24px 40px}

.doc-head h1{margin:0 0 6px; font-size:28px; letter-spacing:-.5px; font-weight:700}
.doc-head p{margin:0; color:var(--muted); font-size:13.5px}
.meta-row{display:flex; gap:18px; flex-wrap:wrap; padding:10px 0; border-bottom:1px solid var(--line-2); margin-top:8px}
.meta-row .item{display:flex; gap:6px; align-items:center; font-size:12.5px; color:var(--muted)}
.meta-row .item b{color:var(--ink-2); font-weight:600}

.kpi-grid{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:0;
  border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; background:var(--panel)}
.kpi{padding:18px 20px; border-right:1px solid var(--line)}
.kpi:last-child{border-right:0}
.kpi-label{color:var(--muted); font-size:11.5px; font-weight:600; letter-spacing:.04em; text-transform:uppercase}
.kpi-value{font-size:28px; font-weight:700; margin:6px 0 4px; letter-spacing:-.5px; font-variant-numeric:tabular-nums}
.kpi-delta{font-size:12px; color:var(--muted)}
.kpi-delta.up{color:var(--ok)} .kpi-delta.down{color:var(--danger)}

.h2{margin:6px 0 8px; font-size:18px; font-weight:700; letter-spacing:-.2px}
.grid-2{display:grid; grid-template-columns:1.4fr 1fr; gap:24px}
.grid-3{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px}
@media(max-width:1100px){.grid-2{grid-template-columns:1fr} .grid-3{grid-template-columns:1fr 1fr}}
@media(max-width:780px){.kpi-grid{grid-template-columns:1fr 1fr} .grid-3{grid-template-columns:1fr}
  .shell{grid-template-columns:1fr} .side{position:static; height:auto}}

.panel{border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; background:var(--panel)}
.panel-head{display:flex; align-items:center; justify-content:space-between; padding:12px 16px; border-bottom:1px solid var(--line-2)}
.panel-head h3{margin:0; font-size:14px; font-weight:600}
.panel-head .more{font-size:12.5px; color:var(--muted); cursor:pointer}

table{width:100%; border-collapse:collapse}
th,td{padding:10px 14px; border-bottom:1px solid var(--line-2); font-size:13px; text-align:left; vertical-align:top}
th{color:var(--muted); font-weight:600; font-size:11.5px; letter-spacing:.04em; text-transform:uppercase; background:transparent}
tr:hover td{background:var(--hover)}
td.code{font-family:ui-monospace,Menlo,monospace; font-size:12.5px; color:var(--ink-2)}
td.right{text-align:right; font-variant-numeric:tabular-nums}
td.ellip{white-space:normal; word-break:break-word; max-width:260px}

.pill{display:inline-flex; align-items:center; gap:6px; font-size:11.5px; padding:2px 8px;
  border-radius:99px; background:var(--line-2); color:var(--ink-2); border:1px solid var(--line)}
.pill.ok{color:var(--ok); background:#f1faf2; border-color:#dcefe0}
.pill.warn{color:var(--warn); background:#fdf7ed; border-color:#f1e4c8}
.pill.brand{color:var(--accent); background:#fdf6ec; border-color:#f4e3c4}
.pill.danger{color:var(--danger); background:#fbf1f1; border-color:#f0d6d6}
html[data-theme="dark"] .pill.ok{background:#16291f; border-color:#1f3a2c}
html[data-theme="dark"] .pill.warn{background:#2a1f0a; border-color:#3d2d10}
html[data-theme="dark"] .pill.brand{background:#2a200a; border-color:#3d3010}
html[data-theme="dark"] .pill.danger{background:#2a1213; border-color:#3d191a}

.timeline{display:flex; flex-direction:column}
.ti{display:flex; gap:12px; padding:12px 16px; border-bottom:1px solid var(--line-2); font-size:13px}
.ti:last-child{border-bottom:0}
.ti .ts{color:var(--muted); font-size:12px; min-width:64px; font-variant-numeric:tabular-nums}
.ti b{font-weight:600}

.toolbar{display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.toolbar .input{flex:1; max-width:360px; display:flex; align-items:center; gap:6px;
  background:var(--bg); border:1px solid var(--line); border-radius:6px; padding:6px 8px}
.toolbar .input input{flex:1; border:0; outline:0; background:transparent; font-size:13px; color:var(--ink)}
.toolbar .spacer{flex:1}

.chips{display:flex; gap:6px; flex-wrap:wrap}
.chip{font-size:12px; padding:3px 9px; border-radius:99px; background:var(--line-2); color:var(--ink-2); border:1px solid var(--line); cursor:pointer}
.chip.active{background:var(--ink); color:var(--panel); border-color:var(--ink)}
html[data-theme="dark"] .chip.active{background:#fff; color:#15161a; border-color:#fff}

.empty{padding:30px 16px; text-align:center; color:var(--muted)}
.skeleton{background:linear-gradient(90deg,var(--line-2),var(--line),var(--line-2));
  background-size:200% 100%; animation:sk 1.4s linear infinite; border-radius:6px}
@keyframes sk{from{background-position:0 0}to{background-position:-200% 0}}

.footer{margin-top:auto; padding:14px 28px; border-top:1px solid var(--line);
  color:var(--muted); font-size:12px; display:flex; justify-content:space-between; background:var(--panel)}

.modal-root{position:fixed; inset:0; z-index:90; display:grid; place-items:center}
.modal-backdrop{position:absolute; inset:0; background:rgba(15,15,20,.32)}
html[data-theme="dark"] .modal-backdrop{background:rgba(0,0,0,.55)}
.modal-card{position:relative; width:min(640px,92vw); background:var(--panel);
  border:1px solid var(--line); border-radius:12px; box-shadow:0 20px 60px rgba(0,0,0,.18); overflow:hidden}
.modal-card header{display:flex; align-items:center; justify-content:space-between; padding:14px 18px; border-bottom:1px solid var(--line-2)}
.modal-card header h3{margin:0; font-size:15px}
.modal-card .icon-btn{background:transparent; border:0; font-size:20px; color:var(--muted); cursor:pointer}
.modal-card #modalBody{padding:16px 18px}

.form-row{display:grid; grid-template-columns:120px 1fr; gap:10px; align-items:center; padding:6px 0}
.form-row label{color:var(--muted); font-size:12.5px}
.form-row input, .form-row select, .form-row textarea{
  width:100%; padding:7px 10px; border:1px solid var(--line); border-radius:6px;
  background:var(--bg); color:var(--ink); font-size:13px; font-family:inherit
}
.form-row textarea{min-height:88px; resize:vertical}

/* ── 발송요청 — 스마트 입력 ──────────────────────────────── */
.smart-section{border:1px solid var(--line); border-radius:var(--radius); background:var(--panel)}
.smart-head{display:flex; align-items:center; gap:8px; padding:10px 14px; border-bottom:1px solid var(--line-2)}
.smart-head h3{margin:0; font-size:14px; font-weight:600}
.smart-head .accent-tag{font-size:10.5px; padding:2px 8px; border-radius:99px;
  background:#fdf6ec; color:var(--accent); border:1px solid #f4e3c4; font-weight:700}
html[data-theme="dark"] .smart-head .accent-tag{background:#2a200a; border-color:#3d3010}
.smart-body{padding:12px 14px}
.smart-textarea{width:100%; min-height:110px; padding:10px 12px;
  border:1px solid var(--line); border-radius:6px; font-size:12.5px;
  font-family:ui-monospace,Menlo,monospace; resize:vertical; background:var(--bg);
  color:var(--ink); line-height:1.6}
.smart-textarea:focus{outline:none; border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(217,119,6,.10)}
.smart-status{margin-top:8px; display:flex; flex-wrap:wrap; gap:5px; min-height:22px; align-items:center}
.sm-chip{font-size:11px; padding:3px 9px; border-radius:99px;
  background:var(--line-2); color:var(--ink-2); border:1px solid var(--line); font-weight:600}
.sm-chip.brand{background:#fdf6ec; color:var(--accent); border-color:#f4e3c4}
html[data-theme="dark"] .sm-chip.brand{background:#2a200a; border-color:#3d3010}
.sm-empty{color:var(--muted); font-size:12px}
.smart-actions{margin-top:10px; display:flex; gap:6px}
.smart-actions .btn{padding:7px 12px; font-size:12px}

/* 다건 미리보기 */
.multi-preview{margin-top:10px; border:1px solid var(--line); border-radius:6px;
  background:var(--bg); padding:8px 10px; display:none}
.multi-preview.open{display:block}
.mp-title{font-size:11.5px; font-weight:700; color:var(--ink-2); margin-bottom:6px}
.mp-item{display:flex; align-items:center; gap:8px; padding:6px 4px;
  border-bottom:1px dashed var(--line-2); font-size:12px}
.mp-item:last-child{border-bottom:0}
.mp-item input[type=checkbox]{accent-color:var(--accent)}
.mp-item .num{color:var(--muted); font-weight:700; width:18px}
.mp-item .preview-text{flex:1; min-width:0}
.mp-item .preview-text b{display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.mp-item .preview-text small{color:var(--muted); font-size:11px}

/* 추출 깜빡임 */
.field-flash{animation:field-flash 0.9s ease-out}
@keyframes field-flash{
  0%   { background:#fdf6ec; }
  100% { background:var(--bg); }
}

/* 출고방법 pill 버튼 그룹 (폼 선택) — 디자인 시스템 변수 사용 */
.method-pill-group{display:flex; flex-wrap:wrap; gap:6px; margin-top:2px}
.method-pill{
  padding:3px 13px; border-radius:99px; font-size:12px; font-weight:600;
  cursor:pointer; user-select:none; border:1px solid transparent;
  background:none; transition:all .13s; line-height:1.6;
}
/* 미선택 — 기존 .pill 계열과 동일한 톤 */
.method-pill.parcel{color:var(--accent); background:#fdf6ec; border-color:#f4e3c4}
.method-pill.direct{color:var(--warn);   background:#fdf7ed; border-color:#f1e4c8}
.method-pill.quick {color:var(--ok);     background:#f1faf2; border-color:#dcefe0}
.method-pill.visit {color:var(--muted);  background:var(--line-2); border-color:var(--line)}
/* hover */
.method-pill.parcel:hover{background:#faebd2}
.method-pill.direct:hover{background:#fae4cc}
.method-pill.quick:hover {background:#dff0e3}
.method-pill.visit:hover {background:var(--hover)}
/* 선택됨 — 테두리 강조 + 배경 한 단계 더 진하게 */
.method-pill.parcel.sel{background:#fde8b4; border-color:var(--accent); color:var(--accent)}
.method-pill.direct.sel{background:#fdd9a4; border-color:var(--warn);   color:var(--warn)}
.method-pill.quick.sel {background:#c6e8cd; border-color:var(--ok);     color:var(--ok)}
.method-pill.visit.sel {background:var(--line); border-color:var(--muted-2); color:var(--ink-2)}
/* 다크모드 */
html[data-theme="dark"] .method-pill.parcel{background:#2a200a; border-color:#3d3010}
html[data-theme="dark"] .method-pill.direct{background:#2a1f0a; border-color:#3d2d10}
html[data-theme="dark"] .method-pill.quick {background:#16291f; border-color:#1f3a2c}
html[data-theme="dark"] .method-pill.visit {background:var(--line-2); border-color:var(--line)}
html[data-theme="dark"] .method-pill.parcel.sel{background:#3a2d0e; border-color:var(--accent)}
html[data-theme="dark"] .method-pill.direct.sel{background:#3a2410; border-color:var(--warn)}
html[data-theme="dark"] .method-pill.quick.sel {background:#1f3a28; border-color:var(--ok)}
html[data-theme="dark"] .method-pill.visit.sel {background:var(--line); border-color:var(--muted-2)}

/* ── 요청사항 플래그 버튼 ─────────────────────────────────── */
.req-flag-group{display:flex; flex-wrap:wrap; gap:5px; margin-top:2px}
.req-flag-btn{padding:4px 10px; border-radius:14px; border:1.5px solid var(--line);
  background:var(--bg); font-size:11.5px; font-weight:600; cursor:pointer;
  transition:all .15s; color:var(--ink-2); white-space:nowrap}
.req-flag-btn:not([style*="pointer-events:none"]):hover{filter:brightness(.93)}
.req-flag-btn.rf-urgent.sel{background:#fee2e2; border-color:#f87171; color:#b91c1c}
.req-flag-btn.rf-modify.sel {background:#dbeafe; border-color:#60a5fa; color:#1d4ed8}
.req-flag-btn.rf-hold.sel   {background:#ffedd5; border-color:#fb923c; color:#c2410c}
.req-flag-btn.rf-cancel.sel {background:var(--line); border-color:var(--muted-2); color:var(--ink-2)}
html[data-theme="dark"] .req-flag-btn.rf-urgent.sel{background:#2d0a0a; border-color:#ef4444; color:#f87171}
html[data-theme="dark"] .req-flag-btn.rf-modify.sel{background:#0c1a3d; border-color:#3b82f6; color:#60a5fa}
html[data-theme="dark"] .req-flag-btn.rf-hold.sel  {background:#2d1500; border-color:#f97316; color:#fb923c}
html[data-theme="dark"] .req-flag-btn.rf-cancel.sel{background:var(--line-2); border-color:var(--muted-2); color:var(--muted-2)}
/* A/S 요청사항 버튼 */
.req-flag-btn.rf-as-reg.sel{background:#F3E5F5; border-color:#9C27B0; color:#6A1B9A}
.req-flag-btn.rf-as-cod.sel{background:#ffedd5; border-color:#fb923c; color:#c2410c}
html[data-theme="dark"] .req-flag-btn.rf-as-reg.sel{background:#1e0a2e; border-color:#9C27B0; color:#ce93d8}
html[data-theme="dark"] .req-flag-btn.rf-as-cod.sel{background:#2d1500; border-color:#f97316; color:#fb923c}
/* A/S 뱃지 */
.badge-as{display:inline-block; background:#6A1B9A; color:#fff; font-size:11px;
  font-weight:700; padding:2px 6px; border-radius:12px; line-height:1.4; flex-shrink:0}
/* 필터 바 활성 상태 */
.req-flag-filter.active.rf-urgent{background:#FFEBEE; border-color:#C62828; color:#C62828}
.req-flag-filter.active.rf-modify {background:#E3F2FD; border-color:#1565C0; color:#1565C0}
.req-flag-filter.active.rf-hold   {background:#FFF8E1; border-color:#F57F17; color:#F57F17}
.req-flag-filter.active.rf-cancel {background:#ECEFF1; border-color:#37474F; color:#37474F}

/* ── 상태 선택 버튼 ──────────────────────────────────────── */
.status-pill-group{display:flex; flex-wrap:wrap; gap:5px; margin-top:2px}
.status-pill{padding:5px 11px; border-radius:16px; border:1.5px solid var(--line);
  background:var(--bg); font-size:11.5px; font-weight:500; cursor:pointer;
  transition:all .15s; color:var(--ink-2)}
.status-pill:hover{background:var(--hover); color:var(--ink)}
.status-pill.sp-new.sel             {background:#f0f9ff; border-color:#7dd3fc; color:#0369a1}
.status-pill.sp-item_ready.sel      {background:#dbeafe; border-color:#93c5fd; color:#1d4ed8}
.status-pill.sp-pickup_requested.sel{background:#ffedd5; border-color:#fb923c; color:#c2410c}
.status-pill.sp-pending_ship.sel    {background:#fef9c3; border-color:#fde047; color:#a16207}
.status-pill.sp-delivered.sel       {background:#d1fae5; border-color:#34d399; color:#065f46}
.status-pill.sp-sent.sel            {background:#064e3b; border-color:#059669; color:#6ee7b7}
html[data-theme="dark"] .status-pill.sp-new.sel             {background:#0c2233; border-color:#38bdf8; color:#7dd3fc}
html[data-theme="dark"] .status-pill.sp-item_ready.sel      {background:#1e3a5f; border-color:#60a5fa; color:#93c5fd}
html[data-theme="dark"] .status-pill.sp-pickup_requested.sel{background:#431407; border-color:#f97316; color:#fdba74}
html[data-theme="dark"] .status-pill.sp-pending_ship.sel    {background:#3a2e00; border-color:#ca8a04; color:#fbbf24}
html[data-theme="dark"] .status-pill.sp-delivered.sel       {background:#052e16; border-color:#22c55e; color:#4ade80}
html[data-theme="dark"] .status-pill.sp-sent.sel            {background:#022c22; border-color:#059669; color:#34d399}
.status-pill.sp-delayed.sel         {background:#fef2f2; border-color:#f87171; color:#b91c1c}
html[data-theme="dark"] .status-pill.sp-delayed.sel         {background:#2d0a0a; border-color:#ef4444; color:#f87171}

/* ── 통합 뱃지 시스템 (.badge + .bm-/.bs-/.bf-) ────────────── */
.badge{
  display:inline-block; font-size:11px; font-weight:600;
  padding:3px 8px; border-radius:12px; letter-spacing:0.3px;
  white-space:nowrap; line-height:1.4; cursor:default;
}
/* 출고방법 */
.bm-parcel{background:#E3F2FD; color:#1565C0}
.bm-quick {background:#FFF3E0; color:#E65100}
.bm-visit {background:#F3E5F5; color:#6A1B9A}
.bm-direct{background:#E8F5E9; color:#2E7D32}
.bm-unknown{background:var(--line-2); color:var(--muted)}
html[data-theme="dark"] .bm-parcel{background:#0d1e35; color:#90CAF9}
html[data-theme="dark"] .bm-quick {background:#2a1000; color:#FFAB76}
html[data-theme="dark"] .bm-visit {background:#1a0a22; color:#CE93D8}
html[data-theme="dark"] .bm-direct{background:#0a1f0a; color:#A5D6A7}
html[data-theme="dark"] .bm-unknown{background:var(--line-2); color:var(--muted)}
/* 상태 */
.bs-new              {background:#ECEFF1; color:#607D8B}
.bs-item_ready       {background:#E3F2FD; color:#1976D2}
.bs-pickup_requested {background:#FFF8E1; color:#F57F17}
.bs-pending_ship     {background:#FFF3E0; color:#E65100}
.bs-delivered        {background:#E0F7FA; color:#00838F}
.bs-sent             {background:#E8F5E9; color:#388E3C}
.bs-delayed          {background:#C62828; color:#fff}
html[data-theme="dark"] .bs-new              {background:#1c2530; color:#90A4AE}
html[data-theme="dark"] .bs-item_ready       {background:#0d1e35; color:#64B5F6}
html[data-theme="dark"] .bs-pickup_requested {background:#2a1f00; color:#FFD54F}
html[data-theme="dark"] .bs-pending_ship     {background:#2a1000; color:#FFAB76}
html[data-theme="dark"] .bs-delivered        {background:#003035; color:#4DD0E1}
html[data-theme="dark"] .bs-sent             {background:#0a1f0a; color:#81C784}
html[data-theme="dark"] .bs-delayed          {background:#B71C1C; color:#fff}
/* 요청사항 플래그 */
.bf-urgent{background:#D32F2F; color:#fff; box-shadow:0 0 0 2px #D32F2F40}
.bf-modify{background:#1565C0; color:#fff}
.bf-hold  {background:#F57F17; color:#fff}
.bf-cancel{background:#37474F; color:#fff}
html[data-theme="dark"] .bf-urgent{background:#B71C1C; color:#fff; box-shadow:0 0 0 2px #B71C1C50}
html[data-theme="dark"] .bf-modify{background:#0D47A1; color:#fff}
html[data-theme="dark"] .bf-hold  {background:#E65100; color:#fff}
html[data-theme="dark"] .bf-cancel{background:#263238; color:#CFD8DC}
/* 플래그·지연 뱃지는 기본 .badge보다 크고 굵게 */
.bf-urgent,.bf-modify,.bf-hold,.bf-cancel,.bs-delayed{
  font-size:12px; font-weight:700; padding:4px 10px; border-radius:20px;
}

/* 품목 행 (스마트 입력 폼용) */
.items-rows{display:flex; flex-direction:column; gap:6px}
.item-row{display:grid; grid-template-columns:1.6fr .8fr .5fr auto; gap:6px;
  padding:6px; background:var(--bg); border:1px solid var(--line); border-radius:6px; align-items:end}
.item-row .rm{background:transparent; border:1px solid var(--line); color:var(--muted);
  border-radius:5px; width:30px; height:30px; padding:0; font-size:14px; cursor:pointer}
.item-row .rm:hover{color:var(--danger); border-color:var(--danger)}
.add-row{align-self:flex-start; background:transparent; color:var(--accent);
  border:1px dashed var(--accent); border-radius:5px; padding:6px 12px;
  font-size:11.5px; font-weight:600; cursor:pointer; font-family:inherit}

/* 자동완성 */
.ac-wrap{position:relative}
.ac-list{position:absolute; top:100%; left:0; right:0; z-index:50;
  background:var(--panel); border:1px solid var(--line); border-radius:6px;
  max-height:240px; overflow:auto; box-shadow:0 8px 24px rgba(0,0,0,.08);
  display:none; margin-top:3px}
.ac-list.open{display:block}
.ac-item{padding:7px 10px; cursor:pointer; font-size:12.5px; border-bottom:1px solid var(--line-2)}
.ac-item:hover, .ac-item.active{background:var(--hover)}
.ac-item .code{color:var(--accent); font-family:ui-monospace,Menlo,monospace; font-size:11px; margin-right:6px}
.ac-item .sub{color:var(--muted); font-size:10.5px; display:block; margin-top:2px}

/* 발송요청 폼 — 컬랩시블 섹션 */
.sr-section{border:1px solid var(--line); border-radius:var(--radius);
  margin-top:10px; background:var(--panel); overflow:hidden}
.sr-sec-head{display:flex; align-items:center; gap:8px; padding:10px 14px;
  background:var(--line-2); color:var(--ink); font-weight:600; font-size:13px;
  cursor:pointer; user-select:none}
.sr-sec-head .arr{margin-left:auto; transition:transform .2s; font-size:10px; color:var(--muted)}
.sr-section.collapsed .arr{transform:rotate(-90deg)}
.sr-section.collapsed .sr-sec-body{display:none}
.sr-sec-body{padding:14px; display:grid; grid-template-columns:1fr 1fr; gap:12px}
.sr-sec-body.one{grid-template-columns:1fr}
.sr-field{display:flex; flex-direction:column; gap:4px}
.sr-field.full{grid-column:1/-1}
.sr-field label{font-size:11.5px; color:var(--muted); font-weight:600}
.sr-field input, .sr-field select, .sr-field textarea{
  width:100%; padding:7px 10px; border:1px solid var(--line); border-radius:6px;
  background:var(--bg); color:var(--ink); font-size:12.5px; font-family:inherit
}
.sr-field input:focus, .sr-field select:focus, .sr-field textarea:focus{
  outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(217,119,6,.10)
}
.sr-field textarea{min-height:60px; resize:vertical}
.sr-field .with-btn{display:flex; gap:5px}
.sr-field .with-btn input{flex:1}
.sr-field .with-btn button{padding:7px 11px; font-size:11.5px; font-weight:600;
  background:var(--bg); color:var(--ink-2); border:1px solid var(--line);
  border-radius:6px; cursor:pointer; white-space:nowrap}
.sr-field .with-btn button:hover{background:var(--hover)}

/* 발송요청 — 마스터/상세 2열 레이아웃 (이전 빌드 — 호환용으로 남김) */
.sr-shell{display:grid; grid-template-columns:1fr; gap:18px}
@media(min-width:1280px){.sr-shell{grid-template-columns:1.3fr 1fr}}

/* ── 발송요청 (v2) — 엑셀형 + 우측 슬라이딩 패널 ────────── */
.sr-page{display:flex; flex-direction:column; gap:12px}
.sr-toolbar{display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  padding:8px 18px; border-bottom:1px solid var(--line)}
.sr-toolbar .sr-search{max-width:280px; padding:7px 10px; border:1px solid var(--line);
  border-radius:6px; background:var(--bg); font-size:13px; color:var(--ink)}
.sr-toolbar .sr-search-wide{min-width:250px; max-width:340px}
.sr-toolbar .btn{padding:7px 12px; font-size:12.5px; font-weight:600}
.flex-1{flex:1; min-width:0}

/* ── 발송요청 KPI 카드 행 ─────────────────────────────────── */
.kpi-row{display:flex; gap:6px; padding:10px 18px 0; flex-wrap:wrap}
.kpi-card{flex:1; min-width:88px; padding:8px 12px; border-radius:var(--radius);
  border:1px solid var(--line); background:var(--panel);
  cursor:pointer; transition:border-color .15s, background .15s}
.kpi-card:hover{border-color:var(--accent); background:var(--hover)}
.kpi-card.active{border-color:var(--accent); background:#fdf6ec}
.kpi-lbl{font-size:10.5px; color:var(--muted); font-weight:600; margin-bottom:2px}
.kpi-num{font-size:18px; font-weight:700; display:block; line-height:1.25}
.kpi-sub{font-size:9.5px; color:var(--muted-2); display:block; margin-top:2px}
.kpi-blue  .kpi-num{color:#3b82f6}
.kpi-orange .kpi-num{color:#f59e0b}
.kpi-yellow .kpi-num{color:#d97706}
.kpi-purple .kpi-num{color:#8b5cf6}
.kpi-gray  .kpi-num{color:var(--muted)}
.kpi-green .kpi-num{color:#10b981}
.kpi-teal  .kpi-num{color:#059669}
.kpi-red   .kpi-num{color:var(--danger)}
.kpi-warn-active .kpi-lbl{color:var(--danger); font-weight:700}
html[data-theme="dark"] .kpi-card.active{background:rgba(217,119,6,.12)}

/* ── 발송요청 필터 바 ─────────────────────────────────────── */
.sr-filter-bar{display:flex; align-items:center; gap:6px; flex-wrap:wrap;
  padding:7px 18px; border-bottom:1px solid var(--line)}
.filter-lbl{font-size:11px; font-weight:700; color:var(--muted); white-space:nowrap; margin-right:2px}
.result-cnt{font-size:12px; font-weight:700; color:var(--accent); white-space:nowrap}
.btn.sm{padding:4px 10px; font-size:12px; line-height:1.4; height:auto}
.btn.ghost.sm{padding:4px 10px; font-size:12px; line-height:1.4; height:auto;
  border:1px solid var(--line); border-radius:6px; background:transparent; color:var(--ink-2); cursor:pointer}
.btn.ghost.sm:hover{border-color:var(--accent); color:var(--accent)}
.btn.ghost.sm.active{background:var(--accent); color:#fff; border-color:var(--accent)}
.date-pick,.rep-sel{height:28px; border:1px solid var(--line); border-radius:6px;
  padding:0 8px; font-size:12px; background:var(--bg-2); color:var(--ink-2); cursor:pointer}

.sr-shell-v2{display:grid; grid-template-columns:minmax(0,1fr) 0; gap:0; min-height:600px;
  border:1px solid var(--line); border-radius:var(--radius); overflow:hidden;
  background:var(--panel); transition:grid-template-columns .25s}
/* 우측 패널 폭은 화면 폭에 따라 360~460px 사이에서 자동 — clamp 로 부드럽게 */
.sr-shell-v2.with-detail{grid-template-columns:minmax(0,1fr) clamp(360px, 28vw, 460px)}
/* 좁은 뷰 — 패널이 아예 화면을 덮어 본문이 망가지지 않게 */
@media(max-width:900px){
  .sr-shell-v2.with-detail{grid-template-columns:minmax(0,1fr); min-height:auto}
  .sr-shell-v2.with-detail .sr-right-v2{position:fixed; top:0; right:0; bottom:0;
    width:min(420px, 100vw); z-index:80; box-shadow:-12px 0 24px rgba(0,0,0,.12)}
}
@media(max-width:520px){
  .sr-shell-v2.with-detail .sr-right-v2{width:100vw}
}

.sr-left-v2{overflow:auto; min-width:0}
.sr-right-v2{border-left:1px solid var(--line); display:flex; flex-direction:column;
  background:var(--panel); overflow:hidden}

/* 엑셀형 와이드 테이블 */
table.xl{width:max-content; min-width:100%; border-collapse:separate; border-spacing:0; font-size:12.5px}
table.xl thead th{position:sticky; top:0; z-index:3; background:var(--line-2); color:var(--ink);
  padding:10px 12px; font-weight:700; font-size:11px; letter-spacing:.04em;
  border-right:1px solid var(--line); border-bottom:1.5px solid var(--line);
  white-space:nowrap; text-align:left; text-transform:uppercase}
table.xl thead th.num{text-align:right}
table.xl thead th:first-child{position:sticky; left:0; z-index:4; box-shadow:1px 0 0 var(--line)}
table.xl tbody td{padding:9px 12px; border-bottom:1px solid var(--line-2); border-right:1px solid var(--line-2);
  vertical-align:top; line-height:1.5}
table.xl tbody td.ellip{white-space:normal; word-break:break-word; max-width:260px}
table.xl tbody td:first-child{position:sticky; left:0; z-index:2;
  border-right:0; border-left:3px solid var(--line); padding-left:13px;
  font-weight:700; color:var(--accent); background:var(--panel);
  box-shadow:1px 0 0 var(--line-2); font-family:ui-monospace,Menlo,monospace; font-size:12px}
table.xl tbody tr.r-blue td{background:#f5f9ff}
table.xl tbody tr.r-orange td{background:#fff7ed}
table.xl tbody tr.r-green td{background:#f4fbf6}
table.xl tbody tr.r-teal td{background:#f0fdf8}
table.xl tbody tr.r-yellow td{background:#fdf9ed}
table.xl tbody tr.r-red td{background:#fdf3f3}
table.xl tbody tr.r-gray td{background:#fafafa}
html[data-theme="dark"] table.xl tbody tr.r-blue td{background:#1a2640}
html[data-theme="dark"] table.xl tbody tr.r-orange td{background:#2a1500}
html[data-theme="dark"] table.xl tbody tr.r-green td{background:#15291f}
html[data-theme="dark"] table.xl tbody tr.r-teal td{background:#0a2420}
html[data-theme="dark"] table.xl tbody tr.r-yellow td{background:#2a200a}
html[data-theme="dark"] table.xl tbody tr.r-red td{background:#2a1213}
html[data-theme="dark"] table.xl tbody tr.r-gray td{background:#1c1d22}
table.xl tbody tr.r-blue td:first-child{border-left-color:#3b82f6}
table.xl tbody tr.r-orange td:first-child{border-left-color:#f97316}
table.xl tbody tr.r-green td:first-child{border-left-color:#16a34a}
table.xl tbody tr.r-teal td:first-child{border-left-color:#059669}
table.xl tbody tr.r-yellow td:first-child{border-left-color:var(--accent)}
table.xl tbody tr.r-red td:first-child{border-left-color:var(--danger)}
table.xl tbody tr{cursor:pointer}
table.xl tbody tr:hover td{filter:brightness(.97)}
html[data-theme="dark"] table.xl tbody tr:hover td{filter:brightness(1.15)}
table.xl tbody tr.selected td{background:#fff8d8}
html[data-theme="dark"] table.xl tbody tr.selected td{background:#2a2810}
table.xl tbody tr.selected td:first-child{border-left-color:var(--accent)}

/* 우측 패널 헤더/푸터 */
.sr-right-head{display:flex; align-items:center; gap:8px;
  padding:12px 16px; border-bottom:1px solid var(--line); background:var(--panel)}
.sr-right-head .ttl{font-weight:700; font-size:14px; flex:1; min-width:0;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.sr-right-head .x{margin-left:auto; background:transparent; border:0; font-size:20px;
  color:var(--muted); width:30px; height:30px; border-radius:6px; cursor:pointer}
.sr-right-head .x:hover{background:var(--hover); color:var(--ink)}

.sr-right-body{flex:1; overflow:auto}
.sr-right-foot{padding:10px 14px; border-top:1px solid var(--line);
  background:var(--bg); display:flex; gap:8px}
.sr-right-foot .btn{flex:1; padding:9px 12px; font-size:12.5px; font-weight:700}

/* ── 출고완료 상세 블록 (우측 패널 내 소형) ────────────── */
.completion-block{padding:10px 12px; background:var(--bg); border:1px solid var(--line);
  border-radius:var(--radius); margin-bottom:4px}
.completion-block-head{display:flex; align-items:center; margin-bottom:8px}
.completion-row{display:flex; gap:8px; align-items:baseline; margin-bottom:5px; font-size:12.5px}
.completion-label{font-size:10.5px; font-weight:700; color:var(--muted); min-width:56px; white-space:nowrap; flex-shrink:0}

/* ── 출고완료 상세 모달 ──────────────────────────────────── */
.det-modal-body{display:flex; flex-direction:column; gap:18px}

/* 정보 그리드 */
.det-grid{border:1px solid var(--line); border-radius:var(--radius); overflow:hidden}
.det-row{display:grid; border-bottom:1px solid var(--line-2); align-items:stretch}
.det-row:last-child{border-bottom:0}
.det-row2{grid-template-columns:100px 1fr 100px 1fr}
.det-row1{grid-template-columns:100px 1fr}
.det-label{padding:10px 14px; font-size:11.5px; font-weight:600; color:var(--muted);
  background:var(--bg); border-right:1px solid var(--line-2); white-space:nowrap; display:flex; align-items:center}
.det-row2 .det-label:nth-child(3){border-left:1px solid var(--line-2)}
.det-val{padding:10px 14px; font-size:13px; color:var(--ink); display:flex; align-items:center; word-break:break-word}
.det-link{color:#3b82f6; font-weight:700; text-decoration:none}
.det-link:hover{text-decoration:underline}

/* 섹션 헤더 */
.det-section-head{font-size:13px; font-weight:700; color:var(--ink-2); margin-bottom:10px;
  display:flex; align-items:center; gap:6px}

/* 품목 테이블 */
.det-item-table{width:100%; border-collapse:collapse; font-size:12.5px}
.det-item-table th{padding:8px 10px; background:var(--bg); border-bottom:2px solid var(--line);
  font-size:11px; font-weight:700; color:var(--muted); text-align:left; white-space:nowrap}
.det-item-table td{padding:9px 10px; border-bottom:1px solid var(--line-2)}
.det-item-table tbody tr:last-child td{border-bottom:0}
.det-item-table tbody tr:hover{background:var(--hover)}

/* SN 뱃지 */
.sn-pills{display:flex; flex-wrap:wrap; gap:6px}
.sn-pill{padding:5px 12px; background:var(--line-2); border:1px solid var(--line);
  border-radius:6px; font-family:ui-monospace,Menlo,monospace; font-size:12px; color:var(--ink-2);
  display:inline-flex; align-items:center}
.sn-code{color:var(--muted); font-size:10.5px; margin-left:4px}

/* 사진 그리드 */
.det-photo-grid{display:flex; flex-wrap:wrap; gap:8px}
.det-photo-thumb{width:130px; height:130px; border:1px solid var(--line); border-radius:8px;
  overflow:hidden; background:var(--bg); flex-shrink:0}
.det-photo-thumb img{width:100%; height:100%; object-fit:cover; cursor:zoom-in; display:block}
.det-photo-thumb a{display:block; width:100%; height:100%}
.det-photo-thumb .pdf-link{display:flex; flex-direction:column; align-items:center;
  justify-content:center; height:100%; color:var(--accent); text-decoration:none;
  font-size:11px; font-weight:700; gap:4px}
html[data-theme="dark"] .det-grid{border-color:var(--line)}
html[data-theme="dark"] .det-label{background:var(--bg)}

/* 컬랩시블 섹션 (우측 패널 내부) */
.sr-sec{border-bottom:1px solid var(--line-2)}
.sr-sec-h{padding:10px 16px; background:var(--line-2); color:var(--ink);
  font-weight:600; font-size:12.5px; cursor:pointer; display:flex; align-items:center; gap:6px;
  user-select:none}
.sr-sec-h .arr{margin-left:auto; transition:transform .2s; font-size:10px; color:var(--muted)}
.sr-sec.collapsed .arr{transform:rotate(-90deg)}
.sr-sec.collapsed .sr-sec-b{display:none}
.sr-sec-b{padding:12px 14px; display:grid; grid-template-columns:1fr 1fr; gap:10px; background:var(--panel)}
.sr-sec-b.one{grid-template-columns:1fr}
.sr-fld{display:flex; flex-direction:column; gap:5px; position:relative; min-width:0}
.sr-fld.full{grid-column:1/-1}
.sr-fld label{font-size:11px; color:var(--muted); font-weight:600; display:flex; align-items:center; gap:5px}
.sr-fld input, .sr-fld select, .sr-fld textarea{
  width:100%; padding:7px 10px; border:1px solid var(--line); border-radius:6px;
  background:var(--bg); color:var(--ink); font-size:12.5px; font-family:inherit
}
.sr-fld input:focus, .sr-fld select:focus, .sr-fld textarea:focus{
  outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(217,119,6,.10)
}
.sr-fld textarea{min-height:60px; resize:vertical}
.sr-fld .with-btn{display:flex; gap:5px}
.sr-fld .with-btn input{flex:1}
.sr-fld .with-btn button{padding:7px 11px; font-size:11.5px; font-weight:600;
  background:var(--bg); color:var(--ink-2); border:1px solid var(--line);
  border-radius:6px; cursor:pointer; white-space:nowrap}
.sr-fld .with-btn button:hover{background:var(--hover)}

/* 태그 (자동/수동/마스터/댓글) */
.sr-tag{font-size:9px; padding:1px 6px; border-radius:99px; font-weight:700; color:#fff}
.sr-tag.auto{background:var(--ok)}
.sr-tag.master{background:#0ea5e9}
.sr-tag.comment{background:#eab308; color:#422006}
.sr-tag.manual{background:var(--danger)}

/* 거래처 유형 배지 */
.cust-badge{display:inline-flex; align-items:center; gap:3px; padding:1px 7px;
  border-radius:99px; font-size:10.5px; font-weight:700; line-height:1.5; white-space:nowrap;
  background:var(--line-2); color:var(--ink-2); border:1px solid var(--line)}
.cust-badge.brand{background:#fdf6ec; color:var(--accent); border-color:#f4e3c4}
.cust-badge.ok{background:#f1faf2; color:var(--ok); border-color:#dcefe0}
html[data-theme="dark"] .cust-badge.brand{background:#2a200a; border-color:#3d3010}
html[data-theme="dark"] .cust-badge.ok{background:#16291f; border-color:#1f3a2c}

/* 모달 (자동추출 + 이력) */
.sr-modal-bg{position:fixed; inset:0; background:rgba(15,23,42,.45); z-index:200;
  display:none; align-items:center; justify-content:center; padding:20px}
.sr-modal-bg.open{display:flex}
.sr-modal{background:var(--panel); border-radius:12px; max-width:880px; width:100%;
  max-height:88vh; display:flex; flex-direction:column;
  box-shadow:0 20px 60px rgba(0,0,0,.18); overflow:hidden;
  border:1px solid var(--line)}
.sr-modal-h{display:flex; align-items:center; padding:14px 20px; border-bottom:1px solid var(--line)}
.sr-modal-h h3{margin:0; font-size:15px; font-weight:700; flex:1}
.sr-modal-h .x{background:transparent; border:0; font-size:20px; color:var(--muted);
  width:30px; height:30px; border-radius:6px; cursor:pointer}
.sr-modal-body{padding:16px 20px; overflow:auto; flex:1}
.sr-modal-foot{padding:10px 20px; border-top:1px solid var(--line); display:flex; gap:8px;
  justify-content:flex-end; background:var(--bg)}

/* 이력 행 */
.history-row{display:grid; grid-template-columns:120px 60px 1fr 200px 120px; gap:10px;
  padding:10px 12px; border-bottom:1px solid var(--line-2); align-items:center; font-size:12.5px}
.history-row.head{background:var(--bg); font-weight:700; color:var(--muted); font-size:11px}
.h-action{font-weight:700; padding:2px 8px; border-radius:99px; font-size:10px}
.h-action.delete{background:#fdf3f3; color:var(--danger)}

/* 토스트 */
.am-toast{position:fixed; bottom:24px; left:50%; transform:translateX(-50%);
  background:var(--ink); color:var(--panel); padding:10px 16px; border-radius:8px;
  font-size:12.5px; opacity:0; pointer-events:none; transition:opacity .25s; z-index:9999;
  box-shadow:0 8px 24px rgba(0,0,0,.18)}
.am-toast.show{opacity:1}
.am-toast.ok{background:var(--ok); color:#fff}
.am-toast.err{background:var(--danger); color:#fff}

/* ── 발송요청 잠금 표시 (시간/소유 권한 만료) ────────── */
table.xl tbody tr.sr-locked td:first-child{
  background:repeating-linear-gradient(45deg, var(--panel), var(--panel) 6px, var(--line-2) 6px, var(--line-2) 8px) !important;
  border-left-color:var(--muted-2) !important;
}
.sr-fld input:disabled, .sr-fld select:disabled, .sr-fld textarea:disabled,
.item-row input:disabled{
  background:var(--line-2); color:var(--muted); cursor:not-allowed;
}

/* ── 로그인 화면 ──────────────────────────────────────── */
.login-shell{position:fixed; inset:0; display:grid; place-items:center;
  background:var(--bg); z-index:9999; padding:20px}
.login-card{width:min(400px, 92vw); padding:28px;
  background:var(--panel); border:1px solid var(--line);
  border-radius:12px; box-shadow:0 4px 32px rgba(0,0,0,.06)}
.login-brand{display:flex; align-items:center; gap:10px; justify-content:center;
  margin-bottom:20px; padding-bottom:16px; border-bottom:1px solid var(--line-2)}
.login-brand-mark{width:32px; height:32px; border-radius:8px; background:var(--ink);
  color:var(--bg); display:grid; place-items:center; font-weight:800; font-size:14px; flex-shrink:0}
.login-brand-info{display:flex; flex-direction:column; gap:1px}
.login-brand-name{font-size:14px; font-weight:700; color:var(--ink); line-height:1.2}
.login-brand-sub{font-size:10.5px; color:var(--muted)}
.login-card h2{margin:0 0 16px; font-size:14px; font-weight:600; text-align:center; color:var(--muted)}
.login-fld{margin-bottom:12px}
.login-fld label{display:block; font-size:11.5px; font-weight:600; color:var(--muted); margin-bottom:5px}
.login-fld input{width:100%; padding:10px 12px; border:1px solid var(--line);
  border-radius:8px; background:var(--bg); color:var(--ink); font-size:13.5px;
  font-family:inherit; transition:border-color .15s, box-shadow .15s}
.login-fld input:focus{outline:none; border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(217,119,6,.12)}
.login-fld input::placeholder{color:var(--muted-2)}
.login-err{min-height:16px; color:var(--danger); font-size:12px;
  margin:4px 0 8px; text-align:center; font-weight:600}
.login-btn{width:100%; padding:11px; border:0; border-radius:8px;
  background:var(--accent); color:#fff; font-size:13.5px;
  font-weight:700; cursor:pointer; font-family:inherit; transition:filter .15s, opacity .15s}
.login-btn:hover{filter:brightness(1.08)}
.login-btn:disabled{opacity:.55; cursor:not-allowed}
.login-foot{margin-top:14px; text-align:center; color:var(--muted-2); font-size:11px}

/* ── 계정관리 ──────────────────────────────────────────── */
.am-stats{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:14px; margin-bottom:18px}
.am-stat{padding:18px 22px; background:var(--panel); border:1px solid var(--line);
  border-radius:var(--radius); display:flex; align-items:center; gap:14px}
.am-stat .ic{width:40px; height:40px; border-radius:10px; display:grid; place-items:center; font-size:22px}
.am-stat .ic.admin{background:#fef3c7; color:#854d0e}
.am-stat .ic.user{background:var(--line-2)}
.am-stat .ic.active{background:#dcfce7; color:#15803d}
.am-stat .num{font-size:24px; font-weight:800; line-height:1}
.am-stat .lbl{font-size:11.5px; color:var(--muted); margin-top:4px}

.am-self{padding:18px 22px; background:var(--panel); border:1px solid var(--line);
  border-radius:var(--radius); margin-bottom:18px; display:flex; align-items:flex-start; gap:14px}
.am-self .av{width:48px; height:48px; border-radius:50%; background:#3b82f6; color:#fff;
  display:grid; place-items:center; font-weight:800; font-size:18px; flex-shrink:0}
.am-self .body{flex:1}
.am-self .body .name{font-size:18px; font-weight:700}
.am-self .body .role{color:var(--muted); font-size:12.5px}
.am-self .meta{display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:14px; margin-top:14px;
  padding-top:14px; border-top:1px solid var(--line-2)}
.am-self .meta .item{font-size:11.5px; color:var(--muted)}
.am-self .meta .item b{display:block; color:var(--ink); font-size:13px; margin-top:2px; font-weight:700}
.am-self .meta .item b.ok{color:var(--ok)}

.perm-chip{display:inline-block; padding:2px 8px; margin:2px; border-radius:99px;
  background:var(--info-soft, #eef6fc); color:var(--info, #0369a1); border:1px solid #bcdbef;
  font-size:11px; font-weight:600}
.perm-chip.all{background:var(--accent-soft); color:var(--accent); border-color:#f4e3c4; font-weight:700}
.perm-chip.more{background:var(--line-2); color:var(--muted); border-color:var(--line)}

.am-row .self-tag{margin-left:8px; font-size:10.5px; padding:2px 7px; border-radius:99px;
  background:var(--line-2); color:var(--muted); border:1px solid var(--line); font-weight:600}

/* 권한 체크박스 그리드 (모달 안) */
.perm-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr));
  gap:6px; padding:10px; background:var(--bg); border:1px solid var(--line); border-radius:8px;
  max-height:340px; overflow:auto}
.perm-grid .perm-section{grid-column:1/-1; font-size:11px; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; color:var(--muted); margin:6px 0 2px; padding:4px 8px}
.perm-item{display:flex; align-items:center; gap:8px; padding:6px 8px; border-radius:6px; cursor:pointer; font-size:12.5px}
.perm-item:hover{background:var(--hover)}
.perm-item input[type=checkbox]{accent-color:var(--accent); cursor:pointer}
.perm-item.checked{background:var(--accent-soft); color:var(--accent); font-weight:600}
html[data-theme="dark"] .perm-item.checked{background:#2a200a}

/* ── 드래그앤드롭 업로드 존 ─────────────────────────────── */
.drop-zone{
  border:2px dashed var(--line); border-radius:6px;
  padding:12px; text-align:center; cursor:pointer;
  color:var(--muted); font-size:12px; margin-bottom:6px;
  transition:border-color .15s, background .15s, color .15s;
  user-select:none;
}
.drop-zone:hover{border-color:var(--accent); background:#fdf6ec; color:var(--accent)}
.drop-zone.drag-over{border-color:var(--accent); background:#fef3c7; color:var(--accent); border-style:solid}
html[data-theme="dark"] .drop-zone:hover,
html[data-theme="dark"] .drop-zone.drag-over{background:#2a200a}
.drop-zone-sm{padding:5px 10px; font-size:11px; margin-bottom:0; white-space:nowrap}

/* ── 출고 정보 폼 ────────────────────────────────────────── */
.so-panel{padding:0; border-top:1px solid var(--line-2); margin-top:6px}
.so-header{display:flex; align-items:center; gap:4px; padding:10px 14px; border-bottom:1px solid var(--line-2); margin-bottom:4px}
.so-field{padding:0 14px; margin-bottom:12px}
.so-label{display:block; font-size:11px; font-weight:600; color:var(--muted); margin-bottom:5px; letter-spacing:.04em}
.so-sn-ta{width:100%; min-height:60px; padding:8px 10px; border:1px solid var(--line);
  border-radius:6px; background:var(--bg); color:var(--ink);
  font-family:ui-monospace,Menlo,monospace; font-size:12px; resize:vertical; outline:none; box-sizing:border-box}
.so-sn-ta:focus{border-color:var(--accent); box-shadow:0 0 0 3px rgba(217,119,6,.1)}
.so-input{padding:6px 10px; border:1px solid var(--line); border-radius:6px;
  background:var(--bg); color:var(--ink); font-size:13px; font-family:inherit; outline:none; box-sizing:border-box}
.so-input:focus{border-color:var(--accent); box-shadow:0 0 0 3px rgba(217,119,6,.1)}
.so-divider{border:none; border-top:1px solid var(--line-2); margin:2px 14px 12px}
.so-photo-box{display:flex; flex-wrap:wrap; gap:4px; margin-top:4px}
.so-track-list{display:flex; flex-direction:column; gap:4px}
.so-track-row{padding:7px 8px; background:var(--bg); border:1px solid var(--line); border-radius:6px}
.so-track-top{display:flex; align-items:center; gap:6px}
.so-save-btn{display:block; width:calc(100% - 28px); margin:8px 14px 14px;
  padding:9px 0; font-size:13px; font-weight:700; border:none; border-radius:6px;
  cursor:pointer; transition:opacity .15s; color:#fff}
.so-save-btn:hover{opacity:.88}
.so-save-btn:disabled{opacity:.5; cursor:not-allowed}

/* ── 사진 갤러리 썸네일 ───────────────────────────────────── */
.ph-gallery{display:flex; flex-wrap:wrap; gap:4px; margin:4px 0 8px}
.ph-thumb{position:relative; width:72px; height:72px; border-radius:6px;
  overflow:hidden; border:1px solid var(--line); background:var(--bg);
  cursor:pointer; flex-shrink:0; transition:opacity .15s}
.ph-thumb:hover{opacity:.82}
.ph-thumb img{width:100%; height:100%; object-fit:cover; display:block; pointer-events:none}
.ph-thumb-more{position:absolute; inset:0; background:rgba(0,0,0,.55);
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:15px; font-weight:800; border-radius:6px; pointer-events:none}

/* ── 사진 뷰어 모달 ──────────────────────────────────────── */
.lb-root{position:fixed; inset:0; z-index:9999; display:flex;
  align-items:center; justify-content:center;
  background:rgba(0,0,0,.55); opacity:0; transition:opacity .18s; pointer-events:none}
.lb-root.lb-open{opacity:1; pointer-events:auto}
.lb-modal{width:min(800px,90vw); height:min(600px,80vh);
  background:var(--panel); border-radius:12px;
  box-shadow:0 24px 64px rgba(0,0,0,.35);
  display:flex; flex-direction:column; overflow:hidden;
  transition:width .22s ease, height .22s ease, border-radius .22s ease, background .22s ease}
.lb-root.lb-fullscreen .lb-modal{width:100vw; height:100vh; border-radius:0; background:#111}
.lb-topbar{display:flex; align-items:center; gap:8px;
  padding:8px 12px; flex-shrink:0;
  border-bottom:1px solid var(--line); background:inherit}
.lb-root.lb-fullscreen .lb-topbar{border-bottom-color:rgba(255,255,255,.12)}
.lb-counter{flex:1; text-align:center; font-size:13px;
  color:var(--ink-2); pointer-events:none}
.lb-root.lb-fullscreen .lb-counter{color:rgba(255,255,255,.7)}
.lb-img-wrap{flex:1; display:flex; align-items:center; justify-content:center;
  min-height:0; overflow:hidden; position:relative;
  background:var(--line-2); cursor:zoom-in}
.lb-root.lb-fullscreen .lb-img-wrap{background:#000; cursor:zoom-out}
.lb-img-wrap img{max-width:100%; max-height:100%; object-fit:contain;
  display:block; user-select:none; pointer-events:none}
.lb-nav{position:absolute; top:50%; transform:translateY(-50%);
  background:rgba(0,0,0,.1); border:none; color:var(--ink);
  font-size:22px; width:40px; height:40px; border-radius:50%; cursor:pointer;
  display:grid; place-items:center; transition:background .15s; z-index:2}
.lb-root.lb-fullscreen .lb-nav{background:rgba(255,255,255,.12); color:#fff}
.lb-nav:hover{background:rgba(0,0,0,.2)}
.lb-root.lb-fullscreen .lb-nav:hover{background:rgba(255,255,255,.25)}
.lb-nav:disabled{opacity:0; pointer-events:none}
.lb-nav.lb-prev{left:8px}
.lb-nav.lb-next{right:8px}
.lb-btn{background:var(--line-2); border:1px solid var(--line); color:var(--ink);
  font-size:12px; padding:5px 12px; border-radius:6px;
  cursor:pointer; white-space:nowrap; transition:background .15s}
.lb-root.lb-fullscreen .lb-btn{background:rgba(255,255,255,.12);
  border-color:transparent; color:#fff}
.lb-btn:hover{background:var(--line)}
.lb-root.lb-fullscreen .lb-btn:hover{background:rgba(255,255,255,.25)}
.lb-close{font-size:18px; padding:4px 9px; line-height:1}
html[data-theme="dark"] .lb-modal{box-shadow:0 24px 64px rgba(0,0,0,.65)}
html[data-theme="dark"] .lb-nav{background:rgba(255,255,255,.08)}
html[data-theme="dark"] .lb-nav:hover{background:rgba(255,255,255,.18)}

/* ── 자동추출 미리보기 테이블 ──────────────────────────────── */
.ep-wrap{overflow-x:auto; max-height:52vh; overflow-y:auto;
  border:1px solid var(--line); border-radius:8px}
.ep-head,.ep-row{display:grid;
  grid-template-columns:32px 1fr 1fr 80px 1.5fr 80px;
  gap:0; align-items:center}
.ep-head{background:var(--line-2); position:sticky; top:0; z-index:1;
  font-size:11px; font-weight:600; color:var(--muted); padding:7px 10px}
.ep-row{font-size:12.5px; padding:8px 10px; border-top:1px solid var(--line-2)}
.ep-row:hover{background:var(--line-2)}
.ep-num{color:var(--muted); font-size:11px}
.ep-mono{font-family:monospace; font-size:11.5px}
.ep-ellip{white-space:normal; word-break:break-word}

@media print{
  .side, .topbar, .footer{display:none}
  .main{background:#fff}
  .view{padding:0}
}