/* ══════════════════════════════════════════════════════════════
   해외 발주 — po.css (v560 · 디자인 인계 overseas-po.css 포팅 · 클래스 접두사 po-*)
   shipdoc.css(hd-* 공용 패널 · 표 · 탭 · 카드) 다음에 불러온다 — 시안 handoff.css 에만 있던 hd-* 몇 개를 여기서 보충
   ══════════════════════════════════════════════════════════════ */

/* 보충 hd-* (시안 handoff.css) */
.hd-tab--main { padding-right:14px; }
.hd-tabs__sep { flex:none; width:1px; height:18px; background:var(--line); margin:0 10px 0 8px; }
.hd-tabs__grp { flex:none; display:flex; align-items:center; gap:4px; padding:0 6px 0 0; font-size:10.5px; font-weight:700; color:var(--faint); white-space:nowrap; }
.hd-tabs__grp b { color:var(--sub); font-weight:800; }
.hd-tab.is-lock { opacity:.42; cursor:default; }
.hd-tab.is-lock:hover { color:var(--muted); }
.hd-tab__n.is-warn { color:var(--warn-fg); }
.hd-resume { display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:9px 14px; margin-bottom:11px;
             border:1px solid var(--accent-line); background:var(--accent-bg-2); font-size:12px; color:var(--sub); }
.hd-resume b { color:var(--text); }
.hd-kpis--hist { grid-template-columns:repeat(5, minmax(0,1fr)); }
.hd-kpi--btn { display:block; width:100%; font:inherit; color:inherit; text-align:left; cursor:pointer; }
.hd-kpi--btn:hover { border-color:var(--accent); }
.hd-kpi--btn.is-on { border-color:var(--accent); box-shadow:inset 0 -3px 0 0 var(--accent); background:var(--accent-bg-2); }
#po .hd-tabs { display:flex; align-items:center; gap:2px; overflow-x:auto; }

/* 운영자 / 에이전시 화면 전환 */
.po-role { display:inline-flex; border:1px solid var(--line); background:var(--panel); }
.po-role button { border:0; background:none; font:inherit; font-size:11.5px; font-weight:700; color:var(--muted); padding:6px 11px; cursor:pointer; white-space:nowrap; }
.po-role button + button { border-left:1px solid var(--line); }
.po-role button:hover { color:var(--text); }
.po-role button.is-on { background:var(--accent); color:#f2eeda; font-weight:800; }
.po-fxdot { display:inline-block; width:6px; height:6px; flex:none; background:var(--ok-fg); margin-right:5px; vertical-align:1px; }

/* 표 안 입력 */
.po-in { border:1px solid var(--line-soft); background:var(--panel); font:inherit; font-size:11.5px; color:var(--text); padding:4px 6px; outline:none; box-sizing:border-box; min-width:0; }
.po-in:focus { border-color:var(--accent); }
.po-in:disabled { background:transparent; border-color:transparent; color:var(--text-mid); padding-left:0; }
.po-in--num { width:66px; text-align:right; font-variant-numeric:tabular-nums; }
.po-in--hot { border-color:var(--accent-line); background:var(--accent-bg-2); }

/* 행 표시 — 이력 없음(빨강) · 회신 차이(앰버) · 제외 */
#po .hd-tb tr.is-none td:first-child { box-shadow:inset 3px 0 0 0 var(--danger-fg); }
#po .hd-tb tr.is-diff td:first-child { box-shadow:inset 3px 0 0 0 var(--warn-fg); }
#po .hd-tb tr.is-off td { color:var(--faint); }
#po .hd-tb tr.is-off .hd-mono { text-decoration:line-through; }

/* 근거 문서 — 입고서류(올리브) · 펜딩서류(앰버) · 지난 발주(회색) */
.po-src { font-size:10px; font-weight:800; padding:2px 7px; white-space:nowrap; }
.po-src--in   { background:var(--accent-bg); color:var(--accent-fg); }
.po-src--pend { background:var(--warn-bg); color:var(--warn-fg); }
.po-src--po   { background:var(--neutral-bg); color:var(--slate); }

.po-link { color:var(--accent-fg); font-size:11px; font-weight:700; text-decoration:none; white-space:nowrap; }
.po-link:hover { text-decoration:underline; }
.po-dim { color:var(--faint); }
.po-up { color:var(--warn-fg); font-weight:800; }
.po-dn { color:var(--danger-fg); font-weight:800; }

/* 사진 — 이력 없는 코드는 칸을 누르고 Ctrl+V */
.po-photo { width:28px; height:28px; flex:none; padding:0; border:1px dashed var(--line); background:var(--panel-sub); color:var(--muted); font:inherit; font-size:12px; cursor:pointer; overflow:hidden;
            display:inline-flex; align-items:center; justify-content:center; vertical-align:middle; }
.po-photo:hover { border-color:var(--accent-line); color:var(--accent-fg); }
.po-photo.is-arm { border-style:solid; border-color:var(--accent); background:var(--accent-bg-2); }
.po-photo img { width:100%; height:100%; object-fit:cover; display:block; }

.po-x { border:0; background:none; color:var(--faint); font-size:12px; cursor:pointer; padding:2px 5px; }
.po-x:hover { color:var(--danger-fg); }

/* 맨 아래 입력 줄 */
#po .po-add td { background:var(--accent-bg-2) !important; border-bottom:0 !important; }
.po-addrow { display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.po-addrow small { font-size:10.5px; color:var(--muted); margin-left:4px; }

/* 입력 방법 2칸 */
.po-ways { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:9px; padding:11px 12px; }
.po-way { border:1px solid var(--line-soft); background:var(--panel-sub); padding:10px 11px; min-width:0; }
.po-way b { display:block; font-size:12px; }
.po-way span { display:block; font-size:10.5px; color:var(--muted); line-height:1.55; margin-top:3px; text-wrap:pretty; }

/* 빈 상태 · 완료 안내 */
.po-empty { padding:30px 16px; text-align:center; font-size:12px; line-height:1.65; color:var(--muted); }
.po-done { display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:10px 14px; margin-bottom:11px; border:1px solid var(--ok-fg); background:var(--ok-bg); font-size:12px; color:var(--ok-fg); font-weight:700; }

/* 담당 표시 — 사용자 · 에이전시 */
.po-actor { font-style:normal; font-size:9.5px; font-weight:800; padding:1px 5px; margin-left:3px; vertical-align:1px; white-space:nowrap; }
.po-actor--user { background:var(--accent-bg); color:var(--accent-fg); }
.po-actor--ag   { background:var(--warn-bg); color:var(--warn-fg); }
.po-actor--sys  { background:var(--neutral-bg); color:var(--slate); }
#po .hd-step.is-on .po-actor { background:rgba(255,255,255,.22); color:#fff; }

/* 발주 이력 — 흐름 타일 (화살표로 연결) */
.po-flow { display:grid; gap:14px; margin-bottom:11px; }
.po-flow .hd-kpi--btn { position:relative; }
.po-flow__st + .po-flow__st::before { content:'›'; position:absolute; left:-12px; top:50%; transform:translateY(-50%); font-size:15px; font-weight:800; color:var(--faint); pointer-events:none; }
.po-flow .hd-kpi__l { display:flex; align-items:center; flex-wrap:wrap; gap:2px 3px; white-space:normal; overflow:visible; line-height:1.35; }
@media (max-width:980px) { .po-flow { grid-template-columns:repeat(auto-fit,minmax(150px,1fr)) !important; } .po-flow__st + .po-flow__st::before { display:none; } }

/* 주문 정보 */
.po-kvs { display:flex; align-items:flex-start; gap:18px; flex-wrap:wrap; padding:11px 12px; border-bottom:1px solid var(--line-faint); }
.po-kv { display:flex; flex-direction:column; gap:3px; min-width:0; }
.po-kv > b { font-size:10.5px; font-weight:800; color:var(--muted); }
.po-kv > span { font-size:12.5px; font-weight:700; color:var(--text); }

/* 펜딩 양식 추가 열 */
#po .hd-tb th.po-newcol { background:var(--warn-bg); color:var(--warn-fg); }
#po .hd-tb td.po-newcol { background:#fdf8ea; }

/* 에이전시 비고 */
.po-note { display:inline-block; font-size:11px; line-height:1.5; font-weight:700; color:var(--warn-fg); text-wrap:pretty; }

/* 문의 · 답변 */
.po-notes { display:flex; flex-direction:column; gap:6px; padding:10px 14px; max-height:240px; overflow:auto; }
.po-note-row { display:grid; grid-template-columns:150px minmax(0,1fr) 80px; gap:10px; align-items:start; font-size:12px; padding:6px 8px; background:var(--panel-sub); }
.po-note-row.is-ag { background:var(--warn-bg); }
.po-note-row b { font-size:11px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.po-note-row span { white-space:pre-wrap; word-break:break-word; }
.po-note-row small { font-size:10px; color:var(--muted); text-align:right; }
@media (max-width:700px) { .po-note-row { grid-template-columns:1fr; gap:3px; } }

/* ══ v562 — 펜딩 · 출고 (디자인 인계 overseas-po.css 추가분 포팅) — 최신 펜딩 · 모드 전환 · 파일 카드 버튼 · 확인 파일 선택 · 결과 칩 · 수량 선택 · 채운 칸 · 미정 · 펜딩에 없음 · 규칙 · 발행 이력 ══ */

/* ══ 펜딩 · 출고 — 최신 펜딩 · 펜딩 매칭 · 출고서류 발행 ══ */
.po-pcur { display:flex; align-items:center; gap:9px; padding:10px 12px; flex-wrap:wrap; }
.po-pcur__m { font-size:11px; color:var(--muted); }
.po-pseg { display:inline-flex; margin-left:8px; border:1px solid var(--line); }
.po-pseg button { display:inline-flex; align-items:center; gap:5px; height:28px; padding:0 12px; border:0; background:var(--panel); font:inherit; font-size:12px; font-weight:800; color:var(--muted); cursor:pointer; }
.po-pseg button + button { border-left:1px solid var(--line); }
.po-pseg button:hover { color:var(--text); }
.po-pseg button.is-on { background:var(--accent); color:#fff; }
.po-pseg em { font-style:normal; font-size:10px; font-weight:800; padding:0 5px; background:var(--warn-bg); color:var(--warn-fg); }
.po-pseg button.is-on em { background:rgba(255,255,255,.22); color:#fff; }
.po-filebtn { display:block; width:100%; text-align:left; font:inherit; color:inherit; }
.po-cf { display:flex; flex-direction:column; padding:4px 8px; }
.po-cf__row { display:flex; align-items:center; gap:10px; padding:8px; border:0; background:transparent; font:inherit; text-align:left; color:inherit; cursor:pointer; }
.po-cf__row + .po-cf__row { border-top:1px solid var(--line-faint, #eceadb); }
.po-cf__row:hover:not(:disabled) { background:var(--accent-bg-2); }
.po-cf__row.is-on { background:var(--accent-bg-2); }
.po-cf__row.is-dis { opacity:.55; cursor:default; }
.po-cf__ck { flex:none; width:16px; height:16px; border:1.5px solid var(--accent-line); display:inline-flex; align-items:center; justify-content:center; font-size:11px; font-weight:800; color:#fff; }
.po-cf__row.is-on .po-cf__ck { background:var(--accent); border-color:var(--accent); }
.po-cf__m { flex:1; min-width:0; display:flex; flex-direction:column; gap:1px; }
.po-cf__m b { font-size:12px; }
.po-cf__m small { font-size:10.5px; color:var(--muted); }
.po-chips { display:inline-flex; gap:2px; flex-wrap:wrap; }
.po-chip { display:inline-flex; align-items:center; gap:5px; height:24px; padding:0 8px; border:0; background:transparent; font:inherit; font-size:11px; font-weight:700; color:var(--muted); cursor:pointer; }
.po-chip b { font-size:10.5px; color:var(--faint); font-variant-numeric:tabular-nums; }
.po-chip:hover { background:var(--panel-sub); color:var(--text); }
.po-chip.is-on { background:var(--accent-bg); color:var(--accent-fg); }
.po-chip.is-on b { color:var(--accent-fg); }
.po-qpick { display:inline-flex; border:1px solid var(--warn-line); }
.po-qpick button { height:24px; padding:0 7px; border:0; background:var(--panel); font:inherit; font-size:11px; font-weight:700; color:var(--muted); cursor:pointer; white-space:nowrap; font-variant-numeric:tabular-nums; }
.po-qpick button + button { border-left:1px solid var(--warn-line); }
.po-qpick button.is-on { background:var(--warn-bg); color:var(--warn-fg); font-weight:800; }
.po-fill { background:rgba(90,102,54,.07); }
.po-fillkey { display:inline-block; width:10px; height:10px; background:rgba(90,102,54,.18); margin-right:5px; vertical-align:-1px; }
.po-need { font-size:10.5px; font-weight:800; color:var(--warn-fg); background:var(--warn-bg); padding:1px 6px; white-space:nowrap; }
.po-miss { margin:0 12px 10px; padding:9px 11px; background:var(--danger-bg); color:var(--danger-fg); font-size:11.5px; line-height:1.6; }
.po-rules { margin:0; padding:8px 14px 12px 28px; display:flex; flex-direction:column; gap:6px; font-size:11.5px; line-height:1.55; color:var(--sub); }
.po-rules b { color:var(--text); }
.po-tl { display:flex; flex-direction:column; padding:4px 8px 8px; }
.po-tl__r { display:flex; align-items:center; gap:9px; padding:7px 6px; }
.po-tl__r + .po-tl__r { border-top:1px solid var(--line-faint, #eceadb); }
.po-tl__r.is-cur { background:var(--accent-bg-2); }
.po-tl__k { flex:none; font-size:10px; font-weight:800; padding:2px 6px; }
.po-tl__k--pend { background:var(--accent-bg); color:var(--accent-fg); }
.po-tl__k--ship { background:var(--warn-bg); color:var(--warn-fg); }
.po-tl__b { flex:1; min-width:0; display:flex; flex-direction:column; gap:1px; }
.po-tl__b b { font-size:12px; display:flex; align-items:center; gap:6px; }
.po-tl__b small { font-size:10.5px; color:var(--muted); line-height:1.45; }