/* ══════════════════════════════════════════════════════════════
   물류 전달서류 발행 — shipdoc.css  (시안 「38 물류 전달서류 발행」 handoff.css 포팅 · 접두사 hd-)
   ══════════════════════════════════════════════════════════════ */

.hd-wrap { max-width:1560px; margin:0 auto; padding:2px 0 34px; color:var(--text);
  --panel:#ffffff; --panel-sub:#fbfaf2; --panel-alt:#f6f5ec;
  --accent:#5a6636; --accent-hover:#4d5434; --accent-fg:#4d5434;
  --accent-bg:#ecead7; --accent-bg-2:#f5f4e7; --accent-line:#c9c5a1;
  --line:#dcd8c0; --line-soft:#e8e5d1; --line-faint:#edebdb; --line-strong:#cbd5e1;
  --text:#1c2430; --text-mid:#33415c; --sub:#6b7686; --muted:#98a2b3; --faint:#cbd5e1; --slate:#475467;
  --ok-bg:#e7f6ec; --ok-fg:#15803d;
  --warn-bg:#fef3e2; --warn-fg:#b4530a; --warn-line:#f2d3ae;
  --danger-bg:#fdecec; --danger-fg:#b0413e; --danger-line:#f0c7c7;
  --neutral-bg:#eef2f7;
}

/* ── 상단 머리 ── */
.hd-top { display:flex; align-items:flex-start; gap:9px; flex-wrap:wrap; margin-bottom:8px; }
.hd-top__t { min-width:0; flex:1; display:flex; align-items:baseline; gap:9px; flex-wrap:wrap; }
.hd-top__t h2 { margin:0; font-size:17px; letter-spacing:-.3px; }
.hd-chip { font-size:10.5px; font-weight:800; padding:3px 9px; background:var(--accent-bg); color:var(--accent-fg); white-space:nowrap; }
.hd-top__d { flex:1 1 340px; min-width:0; padding-left:11px; border-left:1px solid var(--line-soft);
  font-size:11.5px; line-height:1.5; color:var(--sub); text-wrap:pretty; }
.hd-top__b { display:flex; align-items:center; gap:7px; flex-wrap:wrap; }

/* ── 3단계 진행 ── */
.hd-steps { display:flex; margin-bottom:11px; }
.hd-step { flex:1; min-width:0; display:flex; align-items:center; gap:9px; padding:9px 12px;
           border:1px solid var(--line); border-left:0; background:var(--panel);
           text-align:left; font:inherit; color:var(--text); cursor:pointer; border-radius:0; }
.hd-step:hover:not(.is-on):not(.is-lock) { background:var(--panel-sub); }
.hd-step.is-lock { cursor:default; opacity:.6; }
.hd-step__go { flex:none; font-size:10px; font-weight:800; color:var(--accent-fg);
               background:var(--accent-bg); padding:2px 6px; white-space:nowrap; margin-left:auto; }
.hd-step.is-on .hd-step__go { background:rgba(255,255,255,.22); color:#fff; }
.hd-step:first-child { border-left:1px solid var(--line); }
.hd-step__n { flex:none; width:21px; height:21px; display:flex; align-items:center; justify-content:center;
              font-size:10.5px; font-weight:800; background:var(--panel-alt); color:var(--muted); }
.hd-step__t { min-width:0; }
.hd-step__t b { display:block; font-size:12px; white-space:nowrap; }
.hd-step__t span { display:block; font-size:10.5px; color:var(--muted); margin-top:1px;
                   white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.hd-step.is-done { background:var(--accent-bg-2); }
.hd-step.is-done .hd-step__n { background:var(--accent); color:#fff; }
.hd-step.is-on { background:var(--accent); border-color:var(--accent-hover); }
.hd-step.is-on .hd-step__n { background:rgba(255,255,255,.22); color:#fff; }
.hd-step.is-on .hd-step__t b { color:#fff; }
.hd-step.is-on .hd-step__t span { color:rgba(255,255,255,.8); }

/* ── KPI ── */
.hd-kpis { display:grid; grid-template-columns:repeat(auto-fit,minmax(118px,1fr)); gap:8px; margin-bottom:11px; }
.hd-kpi { border:1px solid var(--line); background:var(--panel); padding:8px 11px 9px; min-width:0; }
.hd-kpi__l { font-size:10.5px; font-weight:800; color:var(--muted);
             white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.hd-kpi__v { font-size:20px; font-weight:800; letter-spacing:-.5px; line-height:1.15; margin-top:2px;
             font-variant-numeric:tabular-nums; }
.hd-kpi__u { font-size:11px; font-weight:700; color:var(--sub); margin-left:2px; }
.hd-kpi__d { display:block; font-size:10px; color:var(--muted); margin-top:1px;
             white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* ── 패널 ── */
.hd-panel { border:1px solid var(--line); background:var(--panel); min-width:0; }
.hd-panel + .hd-panel { margin-top:11px; }
.hd-panel__h { display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding:9px 12px;
               border-bottom:1px solid var(--line-soft); background:var(--panel-sub); }
.hd-panel__h b { font-size:12.5px; }
.hd-panel__h span { font-size:10.5px; color:var(--muted); }
.hd-panel__f { display:flex; align-items:center; gap:7px; flex-wrap:wrap; padding:9px 12px;
               border-top:1px solid var(--line-soft); background:var(--panel-sub); }
.hd-panel__f > span:first-child { flex:1 1 200px; min-width:0; font-size:10.5px; color:var(--sub);
                                  line-height:1.55; text-wrap:pretty; }
.hd-cols { display:grid; grid-template-columns:minmax(0,1fr) 352px; gap:11px; align-items:start; }
@media (max-width:1140px) { .hd-cols { grid-template-columns:minmax(0,1fr); } }
.hd-side { position:sticky; top:60px; }

/* ── 파일 투입 ── */
.hd-drop { display:grid; grid-template-columns:repeat(auto-fit,minmax(232px,1fr)); gap:9px; padding:11px 12px; }
.hd-file { border:1px dashed var(--line-strong); background:var(--panel-sub);
           padding:10px 11px; min-width:0; cursor:pointer; }
.hd-file:hover { border-color:var(--accent-line); background:var(--accent-bg-2); }
.hd-file.is-set { border-style:solid; border-color:var(--accent-line); background:var(--accent-bg-2); }
.hd-file.is-req { border-color:var(--warn-line); background:var(--warn-bg); }
.hd-file__l { display:flex; align-items:center; gap:6px; font-size:10.5px; font-weight:800; color:var(--muted); }
.hd-file__n { display:block; font-size:12px; font-weight:800; margin-top:5px;
              white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.hd-file__m { display:block; font-size:10.5px; color:var(--muted); margin-top:2px;
              white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* ── 탭 ── */
.hd-tabs { display:flex; gap:2px; padding:0 2px; margin-bottom:10px; border-bottom:1px solid var(--line-soft);
           overflow-x:auto; }
.hd-tab { padding:9px 12px 10px; border:0; background:none; font:inherit; font-size:12.5px; font-weight:800;
          color:var(--muted); cursor:pointer; box-shadow:inset 0 -2px 0 0 transparent;
          display:flex; align-items:center; gap:6px; white-space:nowrap; }
.hd-tab:hover { color:var(--text); }
.hd-tab.is-on { color:var(--text); box-shadow:inset 0 -2px 0 0 var(--accent); }
.hd-tab__n { font-size:10.5px; font-weight:800; color:var(--muted); }
.hd-tab.is-on .hd-tab__n { color:var(--accent-fg); }

/* ── 표 ── */
.hd-tb { width:100%; border-collapse:collapse; background:var(--panel); }
.hd-tb th { text-align:left; font-size:10.5px; font-weight:800; color:var(--sub); white-space:nowrap;
            background:var(--panel-alt); border-bottom:1px solid var(--line-soft); padding:7px 10px; }
.hd-tb td { font-size:12px; color:var(--text-mid); border-bottom:1px solid var(--line-faint);
            padding:7px 10px; vertical-align:middle; }
.hd-tb tr:hover td { background:var(--panel-sub); }
.hd-tb tr.is-pal td { background:#fdf6de; }
.hd-tb tr.is-pal:hover td { background:#f9efcb; }
.hd-tb tfoot td { background:var(--panel-sub); font-weight:800; color:var(--text); }
.hd-num { text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }
.hd-tb th.hd-num { text-align:right; }   /* v616 — 숫자 열 머리글을 값과 같은 오른쪽에 (대표 2026-10-18 «열이랑 헤더 안 맞는 부분») */
.hd-mono { font-family:'SFMono-Regular',Menlo,monospace; font-weight:700; white-space:nowrap; }
.hd-thumb { width:28px; height:28px; flex:none; border:1px solid var(--line-soft); background:var(--panel-alt);
            color:var(--faint); font-size:8.5px; display:flex; align-items:center; justify-content:center; }
.hd-scroll { max-height:calc(100vh - 300px); overflow:auto; }

/* ── 태그 ── */
.hd-tag { font-size:10px; font-weight:800; padding:2px 7px; white-space:nowrap; }
.hd-tag--ok { background:var(--ok-bg); color:var(--ok-fg); }
.hd-tag--warn { background:var(--warn-bg); color:var(--warn-fg); }
.hd-tag--no { background:var(--danger-bg); color:var(--danger-fg); }
.hd-tag--mute { background:var(--neutral-bg); color:var(--slate); }
.hd-tag--pal { background:#fbe9a8; color:#7a5a12; }

/* ── 점검 목록 ── */
.hd-chk { display:flex; align-items:flex-start; gap:8px; padding:8px 12px;
          border-bottom:1px solid var(--line-faint); }
.hd-chk:last-child { border-bottom:0; }
.hd-chk__i { flex:none; width:17px; height:17px; margin-top:1px; display:flex; align-items:center;
             justify-content:center; font-size:9.5px; font-weight:800; }
.hd-chk__t { flex:1; min-width:0; font-size:11.5px; line-height:1.55; text-wrap:pretty; }
.hd-chk__t small { display:block; font-size:10.5px; color:var(--muted); margin-top:1px; }

/* ── 시트 구성 ── */
.hd-sheet { display:flex; align-items:center; gap:9px; padding:8px 12px; border-bottom:1px solid var(--line-faint); }
.hd-sheet:last-child { border-bottom:0; }
.hd-sheet__n { flex:none; width:20px; height:20px; display:flex; align-items:center; justify-content:center;
               font-size:10px; font-weight:800; background:var(--accent-bg); color:var(--accent-fg); }
.hd-sheet__t { flex:1; min-width:0; font-size:11.5px; }
.hd-sheet__t b { font-size:12px; }
.hd-sheet__t small { display:block; font-size:10.5px; color:var(--muted); margin-top:1px;
                     white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* ── 입력 · 버튼 ── */
.hd-in { border:1px solid var(--line); background:var(--panel); font:inherit; font-size:12px;
         padding:7px 9px; outline:none; color:var(--text); width:100%; box-sizing:border-box; border-radius:0; }
.hd-in:focus { border-color:var(--accent); }
.hd-lbl { display:block; font-size:10.5px; font-weight:800; color:var(--muted); margin-bottom:4px; }
.hd-btn { border:1px solid var(--line); background:var(--panel); color:var(--text-mid);
          font:inherit; font-size:11.5px; font-weight:700; padding:6px 11px; cursor:pointer;
          display:inline-flex; align-items:center; gap:6px; white-space:nowrap; border-radius:0; text-decoration:none; }
.hd-btn:hover { background:var(--panel-alt); }
.hd-btn--pri { border-color:var(--accent-hover); background:var(--accent); color:#f2eeda; font-weight:800; }
.hd-btn--pri:hover { background:var(--accent-hover); }
.hd-btn--sm { font-size:11px; padding:4px 9px; }
.hd-btn:disabled { color:var(--muted); background:var(--panel-alt); border-color:var(--line); cursor:default; }
.hd-ck { width:14px; height:14px; padding:0; accent-color:var(--accent); }

.hd-spin { display:inline-block; width:10px; height:10px; border:2px solid rgba(242,238,218,.35);
           border-top-color:#f2eeda; animation:hd-rot .7s linear infinite; }
.hd-spin--d { border-color:rgba(90,102,54,.25); border-top-color:#5a6636; }
@keyframes hd-rot { to { transform:rotate(360deg); } }

/* ── 발행 이력 카드 (시안 v2) ── */
.hd-cards { display:grid; grid-template-columns:repeat(auto-fill,minmax(330px,1fr)); gap:8px; padding:9px 10px; }
.hd-card { border:1px solid var(--line-soft); background:var(--panel); display:flex; flex-direction:column; min-width:0; padding-bottom:0; }
.hd-card.is-cur { border-color:var(--accent-hover); box-shadow:inset 3px 0 0 0 var(--accent); }
.hd-card__h { display:flex; align-items:center; gap:6px; flex-wrap:wrap; padding:7px 10px 0; }
.hd-card__h b { font-size:12px; }
.hd-card__steps { display:flex; align-items:center; gap:3px; padding:6px 10px 0; flex-wrap:wrap; }
.hd-card__st { width:15px; height:15px; flex:none; display:flex; align-items:center; justify-content:center;
               font-size:9px; font-weight:800; background:var(--panel-alt); color:var(--muted); }
.hd-card__st.is-done { background:var(--accent-bg); color:var(--accent-fg); }
.hd-card__st.is-on { background:var(--accent); color:#fff; }
.hd-card__stt { font-size:10.5px; color:var(--muted); margin-left:4px; }
.hd-card__g { display:flex; flex-wrap:wrap; gap:0 14px; padding:7px 10px 0; }
.hd-card__kv { min-width:0; display:flex; align-items:baseline; gap:5px; }
.hd-card__kv b { font-size:9.5px; font-weight:800; color:var(--muted); white-space:nowrap; }
.hd-card__kv > span { font-size:13px; font-weight:800; letter-spacing:-.3px;
                      font-variant-numeric:tabular-nums; white-space:nowrap; }
.hd-card__sale { display:flex; align-items:baseline; gap:6px; flex-wrap:wrap; padding:6px 10px 0; }
.hd-card__sale > span:last-child { flex:1; min-width:0; font-size:10.5px; color:var(--muted);
                                   line-height:1.5; text-wrap:pretty; }
.hd-card__files { display:flex; flex-direction:column; gap:1px; padding:6px 10px 0; }
.hd-card__files span { font-size:9.5px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.hd-card__files b { font-weight:700; color:var(--text-mid); }
.hd-card__memo { display:flex; align-items:center; gap:7px; flex-wrap:wrap; padding:7px 10px 0; }
.hd-card__memo > input { flex:1 1 100%; }
.hd-card__mt { flex:1; min-width:0; font-size:11px; line-height:1.5; color:var(--text-mid); text-wrap:pretty; }
.hd-card__f { display:flex; gap:4px; flex-wrap:wrap; padding:8px 10px; margin-top:auto; border-top:1px solid var(--line-faint); }

/* ── 판매입력 수량 기준 택일 ── */
.hd-basis { display:flex; align-items:center; gap:7px; flex-wrap:wrap; padding:9px 12px;
            border-bottom:1px solid var(--line-faint); background:var(--panel-sub); }
.hd-basis > b { flex:none; font-size:10.5px; font-weight:800; color:var(--muted); }
.hd-basis__b { flex:1 1 210px; min-width:0; display:flex; align-items:flex-start; gap:7px;
               border:1px solid var(--line); background:var(--panel); font:inherit; color:var(--text);
               padding:7px 10px; cursor:pointer; text-align:left; border-radius:0; }
.hd-basis__b:hover:not(:disabled) { background:var(--panel-alt); }
.hd-basis__b.is-on { border-color:var(--accent-hover); background:var(--accent-bg-2); }
.hd-basis__b:disabled { opacity:.55; cursor:default; }
.hd-basis__r { flex:none; font-size:11px; color:var(--accent-fg); line-height:1.4; }
.hd-basis__b b { display:block; font-size:11.5px; }
.hd-basis__b span span { display:block; font-size:10px; color:var(--muted); margin-top:1px; line-height:1.5; }

/* v559 — 서류 보관함: 건별 한 행 · 파일 이름 = 내려받기 · 사진 연동 패널 */
.hd-flink { display:inline-block; max-width:100%; font-size:12px; font-weight:700; color:var(--accent-fg); text-decoration:none; word-break:break-all; }
.hd-flink:hover { text-decoration:underline; }
.hd-flink.is-gone { color:var(--muted); text-decoration:line-through; }
.hd-fmeta { display:block; font-size:10.5px; color:var(--muted); margin-top:2px; white-space:nowrap; }
.hd-fmeta a { color:var(--accent-fg); }
.hd-tb--files td { vertical-align:top; }
.hd-photo { display:flex; align-items:center; gap:14px; flex-wrap:wrap; padding:10px 14px; font-size:12px; color:var(--sub); }
.hd-photo__kv b { color:var(--text); margin-right:4px; }
.hd-photo__run { color:var(--accent-fg); font-weight:700; }