/* 결재문서 서식 — 화면과 인쇄(PDF)가 같은 레이아웃을 쓴다 */

.doc-sheet {
  background: #fff;
  width: 210mm;
  min-height: 297mm;
  margin: 0 auto 20px;
  padding: 15mm 15mm 18mm;
  border: 1px solid #d5d9de;
  box-sizing: border-box;
  font-family: "맑은 고딕", "Malgun Gothic", sans-serif;
  font-size: 11px;
  color: #000;
}

/* ── 문서 머리 (결재란은 우측 상단, 제목은 그 아래 전체 폭) ── */
.doc-head { margin-bottom: 10px; }
.doc-head .appr-wrap { display: flex; justify-content: flex-end; }
.doc-title {
  font-size: 20px; font-weight: 700; letter-spacing: 5px;
  text-align: center; padding: 16px 0 12px;
}
.doc-meta { font-size: 10.5px; color: #333; }
.doc-meta span { margin-right: 14px; }

/* 결재란 — U+웍스식 세로 도장 표 */
.appr-box { border-collapse: collapse; font-size: 10px; }
.appr-box th, .appr-box td { border: 1px solid #333; text-align: center; }
.appr-box th.side {
  width: 18px; padding: 4px 2px; background: #f4f5f7; font-weight: 600;
  writing-mode: vertical-rl; letter-spacing: 3px;
}
.appr-box th.role { height: 18px; padding: 2px 6px; background: #f4f5f7; font-weight: 600; min-width: 62px; }
.appr-box td.stamp { height: 52px; vertical-align: middle; position: relative; padding: 2px; }
.appr-box td.stamp .nm { font-size: 11px; font-weight: 600; }
.appr-box td.stamp .dt { font-size: 8.5px; color: #555; margin-top: 2px; }
.appr-box td.stamp.ok   .nm { color: #b3261e; }
.appr-box td.stamp.ok::after {
  content: ""; position: absolute; inset: 6px 8px;
  border: 1.6px solid #b3261e; border-radius: 50%; opacity: .55;
}
.appr-box td.stamp.no   .nm { color: #555; text-decoration: line-through; }
.appr-box td.stamp.cur  { background: #fffbe6; }
.appr-box td.stamp.wait { color: #999; }

/* 문서번호·보존연한 줄 */
.doc-bar {
  display: flex; gap: 18px; font-size: 10px; color: #333;
  border-top: 1px solid #000; border-bottom: 1px solid #000;
  padding: 4px 6px; margin-bottom: 10px;
}
.doc-bar b { font-weight: 600; }

/* ── 본문 표 ────────────────────────────────── */
.sec-title { font-weight: 700; font-size: 12px; margin: 12px 0 5px; }

table.doc-grid, table.doc-table { width: 100%; border-collapse: collapse; margin-bottom: 8px; }
table.doc-grid th, table.doc-grid td,
table.doc-table th, table.doc-table td { border: 1px solid #888; padding: 4px 6px; vertical-align: middle; }
table.doc-grid th.lbl {
  background: #f4f5f7; font-weight: 600; text-align: center;
  width: 110px; white-space: nowrap; font-size: 10.5px;
}
table.doc-grid th.lbl i { color: #d1242f; font-style: normal; margin-left: 2px; }
table.doc-table thead th { background: #f4f5f7; font-weight: 600; text-align: center; font-size: 10.5px; }
table.doc-table td.ctr, .ctr { text-align: center; }
table.doc-table td.num, .num { text-align: right; font-variant-numeric: tabular-nums; }
table.doc-table tfoot .sum td { background: #fafafa; font-weight: 700; }

/* 입력 컨트롤은 칸 안에 딱 맞게 — 화면/출력 레이아웃이 안 틀어지게 */
.doc-sheet input, .doc-sheet select, .doc-sheet textarea {
  width: 100%; border: 0; padding: 2px 3px; font: inherit; background: transparent;
  outline: none; box-sizing: border-box;
}
.doc-sheet input:focus, .doc-sheet select:focus, .doc-sheet textarea:focus { background: #eef5ff; }
.doc-sheet textarea { resize: vertical; line-height: 1.5; }
.doc-sheet input.money { text-align: right; }
.doc-sheet .opt { display: inline-block; margin-right: 10px; white-space: nowrap; }
.doc-sheet .opt input { width: auto; }
.doc-sheet .opt input.etc { width: 90px; border-bottom: 1px solid #aaa; }
.doc-static { color: #333; }
.doc-auto { color: #111; }

.doc-body { width: 100%; border: 1px solid #888; padding: 8px; min-height: 300px; line-height: 1.7; }
.doc-body.view { white-space: normal; }

.doc-notice { border: 1px solid #bbb; background: #fbfbfc; padding: 8px 10px; margin: 10px 0; font-size: 10px; }
.doc-notice b { display: block; margin-bottom: 4px; }
.doc-notice ul { margin: 0; padding-left: 16px; }
.doc-notice li { margin: 2px 0; line-height: 1.5; }

.doc-sign { margin-top: 22px; text-align: right; font-size: 12px; }
.doc-sign .line { margin-bottom: 6px; }
.doc-sign .who { display: inline-block; min-width: 70px; border-bottom: 1px solid #333; text-align: center; }
.doc-sign .corp { font-size: 14px; font-weight: 700; letter-spacing: 2px; margin-top: 8px; }

.addrow { margin: 0 0 10px; font-size: 11px; padding: 3px 10px; }

/* 첨부 목록 */
.doc-attach { margin-top: 14px; font-size: 10.5px; }
.doc-attach b { display: block; margin-bottom: 4px; }
.doc-attach a { color: #1f6feb; }

/* 의견/결재 이력 (인쇄 시 함께 남긴다 — 감사 대응) */
.doc-history { margin-top: 16px; font-size: 10px; border-top: 1px dashed #999; padding-top: 8px; }
.doc-history .h { font-weight: 700; margin-bottom: 4px; }
.doc-history p { margin: 2px 0; }

/* ── 인쇄 / PDF ─────────────────────────────── */
@page { size: A4; margin: 10mm; }

@media print {
  html, body { background: #fff !important; }
  header, #nav, .no-print, button, .card:not(.doc-wrap) { display: none !important; }
  main { max-width: none !important; margin: 0 !important; padding: 0 !important; }
  .doc-sheet {
    width: auto; min-height: auto; margin: 0; padding: 0;
    border: 0; box-shadow: none; font-size: 10.5px;
  }
  .doc-sheet input, .doc-sheet select, .doc-sheet textarea {
    border: 0 !important; background: transparent !important; -webkit-appearance: none; appearance: none;
  }
  table.doc-grid, table.doc-table { page-break-inside: auto; }
  tr { page-break-inside: avoid; }
  thead { display: table-header-group; }
  .doc-notice, .doc-sign { page-break-inside: avoid; }
  .appr-box td.stamp.ok::after { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .appr-box th.side, .appr-box th.role, table.doc-grid th.lbl, table.doc-table thead th {
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
}