/* dashboard/po.css — 발주서 빌더(po-builder.js) 모달 스타일.
 *
 * admin.html · index.html 양쪽이 같은 빌더를 쓰므로 admin.css 에서 분리했다.
 * **admin.css 보다 먼저** 로드해야 한다 — admin.css 의 CI/PL 이 이 파일의
 * .po-modal / .po-field / .po-field textarea 를 재사용하면서 .cipl-modal 로
 * 폭을 덮어쓰기 때문(같은 specificity → 나중에 로드된 쪽이 이긴다).
 *
 * 인쇄물(문서 자체)의 스타일은 여기가 아니라 po-doc.js 의 PODoc.printCss 다. */

.po-modal-backdrop { position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:200; }
.po-modal { position:fixed; z-index:201; top:3vh; left:50%; transform:translateX(-50%);
  width:min(920px,94vw); max-height:94vh; display:flex; flex-direction:column;
  background:var(--c-bg); border-radius:var(--r-lg,10px); box-shadow:var(--shadow-lg,0 10px 40px rgba(0,0,0,.3)); overflow:hidden; }
.po-modal-head { display:flex; align-items:center; gap:10px; padding:14px 18px; border-bottom:1px solid var(--c-border); }
.po-modal-head h3 { margin:0; font-size:16px; }
.po-modal-spacer { flex:1; }
.po-status-edit { font-size:12px; color:var(--c-text-secondary); }
.po-modal-body { padding:16px 18px; overflow-y:auto; }
.po-modal-foot { display:flex; gap:8px; padding:12px 18px; border-top:1px solid var(--c-border); }
.po-grid2 { display:grid; grid-template-columns:1fr 1fr; gap:10px 16px; }
.po-field { display:flex; flex-direction:column; gap:3px; }
.po-field.po-col2 { grid-column:1 / -1; }
.po-field label { font-size:11.5px; color:var(--c-text-secondary); font-weight:600; }
.po-field input, .po-field select, .po-items input {
  font:inherit; padding:6px 8px; border:1px solid var(--c-border); border-radius:var(--r-sm,4px);
  background:var(--c-bg); color:var(--c-text); width:100%; box-sizing:border-box; }
/* CI/PL 모달도 이 규칙을 재사용한다 (admin.css 의 CI/PL 섹션에서 이동해 옴) */
.po-field textarea {
  font:inherit; padding:6px 8px; border:1px solid var(--c-border); border-radius:var(--r-sm,4px);
  background:var(--c-bg); color:var(--c-text); width:100%; box-sizing:border-box; resize:vertical; line-height:1.45; }
/* 통화 아래 환율 안내 (외화일 때만 채워진다) */
.po-fx-note { font-size:11px; color:var(--c-text-secondary); line-height:1.4; min-height:14px; }
.po-fx-warn { color:var(--c-danger,#cf222e); }

.po-items-head { display:flex; align-items:center; gap:10px; margin:18px 0 6px; font-weight:600; font-size:13px; }
table.po-items { width:100%; border-collapse:collapse; }
table.po-items th { text-align:left; font-size:11px; color:var(--c-text-secondary); padding:4px 6px; border-bottom:1px solid var(--c-border); }
table.po-items td { padding:3px 6px; vertical-align:middle; }
table.po-items td.po-amount { text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }
.po-row-del { background:none; border:none; color:var(--c-danger,#cf222e); font-size:18px; cursor:pointer; line-height:1; padding:0 4px; }
.po-totals { margin-top:14px; margin-left:auto; width:360px; display:flex; flex-direction:column; gap:6px; }
.po-totals > div { display:flex; justify-content:space-between; align-items:center; }
.po-totals .po-total-row { border-top:2px solid var(--c-border); margin-top:4px; padding-top:8px; font-size:16px; font-weight:800; }

/* VAT 행 — 라벨 · 자동 토글 · 세율(%) · 금액이 한 줄에서 어긋나지 않게 정렬.
   금액 입력만 우측으로 밀고(margin-left:auto) 나머지는 좌측에 붙인다. */
.po-totals .po-vat-row { gap:8px; }
.po-vat-label { flex:none; }
.po-vat-auto { display:inline-flex; align-items:center; gap:4px; flex:none;
  font-size:11px; color:var(--c-text-secondary); font-weight:400; white-space:nowrap; }
.po-vat-auto input { width:14px; height:14px; margin:0; }
.po-vat-rate { display:inline-flex; align-items:center; gap:2px; flex:none; }
/* 합계 영역의 입력들은 .po-field 밖이라 폼 스타일을 따로 준다(폼 입력과 같은 모양) */
.po-totals input { font:inherit; padding:6px 8px; border:1px solid var(--c-border);
  border-radius:var(--r-sm,4px); background:var(--c-bg); color:var(--c-text); box-sizing:border-box; }
.po-vat-rate input { width:56px; text-align:right; }
.po-vat-rate i { font-style:normal; font-size:11px; color:var(--c-text-secondary); }
.po-vat-rate input:disabled { opacity:.5; }
.po-totals input.po-vat-amount { width:130px; text-align:right; margin-left:auto; flex:none; }

/* 작성 중이던 발주서 배너 — "이어서 작성 / 새로 시작" (CI/PL 위저드와 같은 모양) */
.po-draft-banner { display:flex; justify-content:space-between; align-items:center; gap:10px;
  padding:10px 12px; margin-bottom:12px; font-size:12.5px;
  color:#92400e; background:#fffbeb; border:1px solid #fde68a; border-radius:6px; }

/* 원본 견적 배너 (admin 에서 견적 → 발주서 생성 시) */
.po-source-quote { display:flex; justify-content:space-between; align-items:center; padding:10px 12px;
  margin-bottom:12px; border:1px solid var(--c-border); border-left:3px solid var(--c-primary); border-radius:6px; }

/* ── 신규 발주서 위저드 (4단계) ──
   단계 인디케이터·전환 애니메이션·오류 표시는 공용 .spw-* (design-system.css) 를 쓴다
   — CI/PL 생성 위저드와 같은 primitives. 여기엔 발주서 전용 레이아웃만 둔다. */
.po-modal-wiz { min-height:min(88vh, 900px); }
.po-modal-wiz .po-modal-body { flex:1; display:flex; flex-direction:column; }
/* 패널이 남는 높이를 먹어야 Preview iframe 이 세로로 늘어난다 */
.po-wiz-panel[data-panel="4"] { flex:1; min-height:0; }
.po-wiz-hint { font-size:11px; color:var(--c-text-muted); margin-bottom:6px; }
#po-wiz-preview { width:100%; flex:1; min-height:52vh; border:1px solid var(--c-border);
  border-radius:var(--r-sm,4px); background:#fff; }
/* 위저드 footer — [취소] 는 좌측, 나머지는 우측 묶음 */
.po-modal-wiz .po-modal-foot #po-wiz-save { display:flex; gap:8px; }