/* ══════════════════════════════════════════
   증빙서식 발행기 · 공통 스타일
   ══════════════════════════════════════════ */
:root{
  --bg:#f4f5f7;
  --panel:#ffffff;
  --ink:#1a1d21;
  --ink-2:#5b6470;
  --line:#dfe3e8;
  --brand:#1f6feb;
  --brand-ink:#fff;
  --danger:#c0392b;
  --radius:10px;
  --shadow:0 1px 2px rgba(16,24,40,.06), 0 8px 24px rgba(16,24,40,.06);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--ink);
  font-family:"Pretendard","Malgun Gothic","맑은 고딕",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:15px; line-height:1.6; -webkit-text-size-adjust:100%;
}
h1,h2,h3{line-height:1.35; margin:0}
a{color:var(--brand)}

/* ── 헤더 / 네비 ─────────────────────── */
.site-header{background:var(--panel); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:50}
.site-header .inner{max-width:1240px; margin:0 auto; padding:11px 20px; display:flex; align-items:center; gap:14px; flex-wrap:wrap}
.logo{font-size:17px; font-weight:800; letter-spacing:-.4px; text-decoration:none; color:var(--ink); display:flex; align-items:center; gap:7px; white-space:nowrap}
.doc-picker{
  font:inherit; font-size:13.5px; font-weight:600; color:var(--ink);
  background:#eef1f5 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%235b6470' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 11px center/11px;
  border:1px solid transparent; border-radius:8px; padding:7px 32px 7px 12px;
  appearance:none; -webkit-appearance:none; cursor:pointer; max-width:230px;
}
.doc-picker:hover{background-color:#e6eaf0}
.doc-picker:focus{border-color:var(--brand); box-shadow:0 0 0 3px rgba(31,111,235,.14); outline:0}
.header-actions{margin-left:auto; display:flex; gap:8px}
@media (max-width:720px){
  .site-header .inner{gap:10px}
  .header-actions{margin-left:0; width:100%}
  .header-actions .btn{flex:1}
}

/* ── 레이아웃 ───────────────────────── */
.wrap{max-width:1320px; margin:0 auto; padding:20px}
.app{display:grid; grid-template-columns:minmax(0,460px) minmax(0,1fr); gap:20px; align-items:start}
/* minmax(0,1fr) 필수 — 그냥 1fr 이면 최소값이 min-content 라서
   고정 폭 740px 용지가 컬럼을 밀어내 페이지 전체에 가로 스크롤이 생긴다 */
@media (max-width:1060px){ .app{grid-template-columns:minmax(0,1fr)} }

.panel{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow)}
.panel > .panel-head{padding:14px 16px; border-bottom:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; gap:8px}
.panel-head h2{font-size:15px; font-weight:700}
.panel-body{padding:16px}

/* ── 폼 ─────────────────────────────── */
/* min-width:0 필수 — fieldset 기본값이 min-content 라서, 없으면 넓은 자식(품목 표)이
   패널을 강제로 늘려 입력칸이 화면 밖으로 튀어나간다 */
fieldset{border:0; margin:0 0 22px; padding:0; min-width:0}
fieldset:last-of-type{margin-bottom:0}
legend{
  font-size:12px; font-weight:700; color:var(--ink-2); letter-spacing:.06em;
  padding:0 0 8px; margin-bottom:10px; border-bottom:1px solid var(--line); width:100%;
}
.field{margin-bottom:10px}
.grid-2{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.grid-3{display:grid; grid-template-columns:1fr 1fr 1fr; gap:10px}
label{display:block; font-size:12.5px; font-weight:600; color:var(--ink-2); margin-bottom:4px}
input[type=text],input[type=date],input[type=email],select,textarea{
  width:100%; padding:9px 10px; font:inherit; font-size:14px; color:var(--ink);
  background:#fff; border:1px solid var(--line); border-radius:7px; outline:0;
}
input:focus,select:focus,textarea:focus{border-color:var(--brand); box-shadow:0 0 0 3px rgba(31,111,235,.14)}
.hint{font-size:12px; color:var(--ink-2); margin-top:5px}
.check{display:flex; align-items:center; gap:8px; font-size:13.5px; color:var(--ink); font-weight:500}
.check input{width:16px; height:16px; accent-color:var(--brand); flex:none}

.btn{
  appearance:none; border:1px solid var(--line); background:#fff; color:var(--ink);
  font:inherit; font-size:13.5px; font-weight:600; padding:8px 14px;
  border-radius:7px; cursor:pointer; white-space:nowrap; text-decoration:none; display:inline-block;
}
.btn:hover{background:#f7f8fa}
.btn-primary{background:var(--brand); border-color:var(--brand); color:var(--brand-ink)}
.btn-primary:hover{background:#1a5fd0}
.btn-sm{padding:6px 10px; font-size:12.5px}
.btn-ghost-danger{color:var(--danger); border-color:transparent; background:transparent; padding:4px 6px}
.btn-ghost-danger:hover{background:#fdecea}

/* ── 품목 입력 ───────────────────────── */
.items-scroll{overflow-x:auto; padding-bottom:2px}
.items-head,.item-row{display:grid; gap:5px; align-items:center}
.items-head{font-size:11.5px; font-weight:700; color:var(--ink-2); margin-bottom:6px; padding:0 2px}
.items-head span.ta-r{text-align:right}
.item-row{margin-bottom:5px}
.item-row input{padding:7px 7px; font-size:13.5px; min-width:0}
.item-row input.num{text-align:right}
.item-amt{font-size:13px; text-align:right; font-variant-numeric:tabular-nums; color:var(--ink-2); padding-right:2px; overflow:hidden; text-overflow:ellipsis}

.sum-box{margin-top:12px; padding:12px; background:#f7f8fa; border-radius:8px}
.sum-line{display:flex; justify-content:space-between; font-size:13.5px; padding:3px 0; color:var(--ink-2)}
.sum-line.total{font-size:16px; font-weight:800; color:var(--ink); border-top:1px solid var(--line); margin-top:6px; padding-top:8px}
.sum-line b{font-variant-numeric:tabular-nums}
.sum-ko{font-size:13px; color:var(--ink-2); padding-top:6px}

/* ── 용지 (공통) ────────────────────── */
.paper-scroll{overflow-x:auto; padding-bottom:4px}
/* 미리보기용 폭. 인쇄 시에는 width:100% 로 바뀌므로 출력물에는 영향 없음.
   700px 로 둬야 1280 화면에서도 미리보기가 가로 스크롤 없이 들어간다 */
#paper{
  width:700px; margin:0 auto; background:#fff; color:#000;
  border:2px solid #000; padding:22px 24px 18px;
  box-shadow:var(--shadow);
  font-family:"Batang","바탕","Malgun Gothic","맑은 고딕",serif;
}
.doc-title{text-align:center; font-size:29px; font-weight:800; letter-spacing:20px; text-indent:20px; margin:2px 0 4px; white-space:nowrap}
.doc-title.wide{letter-spacing:10px; text-indent:10px; font-size:25px}
.doc-sub{text-align:center; font-size:13px; margin-bottom:14px}
.doc-no{font-size:12.5px; margin-bottom:6px}

table.rc{width:100%; border-collapse:collapse; table-layout:fixed}
table.rc th,table.rc td{border:1px solid #000; padding:6px 8px; font-size:13px; vertical-align:middle; word-break:break-all}
table.rc th{background:#f2f2f2; font-weight:600; text-align:center}
table.rc.dense th,table.rc.dense td{padding:4px 6px; font-size:12px}
/* 세로 라벨(공급자·인계자 등). 가로로 두면 좁은 칸을 넘쳐 옆칸을 침범하므로 세로쓰기.
   선택자를 table.rc td.lbl-v 로 둔 이유: `table.rc td` 규칙이 padding 을 덮어써 칸이 넘쳤음 */
table.rc td.lbl-v{
  width:26px; background:#f2f2f2; text-align:center; font-weight:600; padding:6px 2px;
  writing-mode:vertical-rl; text-orientation:upright;
  letter-spacing:2px; white-space:nowrap; line-height:1.2;
}
.cell-key{width:88px; background:#f2f2f2; text-align:center; font-weight:600}
.num-cell{text-align:right; font-variant-numeric:tabular-nums}
.ctr{text-align:center}
table.rc.parties .cell-key{width:auto; font-size:11.5px; padding:4px 3px}
table.rc.parties td.lbl-v{width:20px; font-size:11px; letter-spacing:1px; line-height:1.15}

.to-line{font-size:15px; margin:14px 0 10px; padding-bottom:6px; border-bottom:1px solid #000}
.to-line .who{font-weight:700; display:inline-block; min-width:140px}
.amount-band{margin:12px 0; padding:11px 12px; border:1px solid #000; background:#fafafa; display:flex; align-items:baseline; gap:10px; flex-wrap:wrap}
.amount-band .ko{font-size:19px; font-weight:800; letter-spacing:1px}
.amount-band .num{margin-left:auto; font-size:17px; font-weight:700; font-variant-numeric:tabular-nums}
.statement{text-align:center; font-size:15px; font-weight:700; margin:16px 0 12px; letter-spacing:1px}
.sign-row{display:flex; justify-content:flex-end; align-items:center; gap:10px; margin-top:14px; font-size:13.5px}
.stamp{width:52px; height:52px; object-fit:contain; mix-blend-mode:multiply}
.stamp-ph{width:46px; height:46px; border:1px dashed #999; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:10px; color:#999; flex:none}
.paper-note{font-size:11px; color:#555; margin-top:12px; border-top:1px dashed #bbb; padding-top:8px}
.party-grid{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.field-line{font-size:13.5px; margin:0 0 7px; display:flex; gap:8px}
.field-line .k{font-weight:700; min-width:74px; flex:none}
.body-box{border:1px solid #000; padding:10px 12px; min-height:150px; font-size:13.5px; white-space:pre-wrap; word-break:break-word; line-height:1.75}
.body-box.sm{min-height:88px}
.sec-title{font-size:13.5px; font-weight:700; margin:14px 0 6px; padding-left:4px; border-left:3px solid #000}

/* 결재란 — 제목은 남는 폭 안에서 가운데, 결재란은 항상 오른쪽 끝. 절대 겹치지 않는다 */
.paper-top{display:flex; align-items:flex-start; gap:14px; margin-bottom:4px}
.paper-top .doc-title{flex:1 1 auto; min-width:0}
.paper-top .ap-cell{flex:none; margin-left:auto; display:flex; justify-content:flex-end}
table.approval{border-collapse:collapse; table-layout:fixed; flex:none}
table.approval td{border:1px solid #000; font-size:11px; text-align:center; padding:2px}
table.approval .ap-label{width:20px; background:#f2f2f2; font-weight:600; letter-spacing:1px; line-height:1.1; word-break:keep-all}
table.approval .ap-role{width:58px; height:19px; background:#f2f2f2; font-weight:600}
table.approval .ap-sign{height:46px}

/* ── 광고 슬롯 ──────────────────────── */
.ad-slot{margin:20px auto; max-width:1240px; padding:0 20px}
.ad-inner{min-height:100px; border:1px dashed var(--line); border-radius:var(--radius); display:flex; align-items:center; justify-content:center; color:#aab1ba; font-size:12px; background:#fff}

/* ── 안내 ───────────────────────────── */
.notice{background:#fff8e6; border:1px solid #f0dca6; color:#6b5314; border-radius:8px; padding:11px 13px; font-size:12.5px; line-height:1.55; margin-bottom:16px}
.notice b{color:#4d3b0a}

/* ── 본문 / 법적 페이지 ──────────────── */
.article{max-width:860px; margin:34px auto 0; background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:28px 30px; box-shadow:var(--shadow)}
.article h1{font-size:24px; margin-bottom:8px}
.article h2{font-size:20px; margin:30px 0 10px}
.article h2:first-child{margin-top:0}
.article h3{font-size:16px; margin:20px 0 6px}
.article p,.article li{color:#3a4149; font-size:14.5px}
.article ul,.article ol{padding-left:20px}
.article li{margin-bottom:5px}
.article table{width:100%; border-collapse:collapse; margin:12px 0; font-size:14px}
.article table th,.article table td{border:1px solid var(--line); padding:8px 10px; text-align:left}
.article table th{background:#f7f8fa; font-weight:600}
.updated{font-size:13px; color:var(--ink-2); margin-bottom:20px}

.faq-item{border-top:1px solid var(--line); padding:14px 0}
.faq-item:last-child{border-bottom:1px solid var(--line)}
.faq-item h3{margin:0 0 5px; font-size:15px}
.faq-item p{margin:0}

.card-row{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:14px; margin:18px 0 4px}
.card{display:block; text-decoration:none; color:inherit; border:1px solid var(--line); border-radius:var(--radius); padding:16px 18px; background:#fff}
.card:hover{border-color:var(--brand); box-shadow:var(--shadow)}
.card strong{display:block; font-size:15.5px; margin-bottom:4px}
.card span{font-size:13px; color:var(--ink-2)}

/* ── 푸터 ───────────────────────────── */
.site-footer{max-width:1240px; margin:0 auto; padding:34px 20px 50px; color:var(--ink-2); font-size:12.5px; text-align:center}
.site-footer nav{margin-bottom:12px; display:flex; gap:8px; justify-content:center; flex-wrap:wrap}
.site-footer nav a{color:var(--ink-2); text-decoration:none}
.site-footer nav a:hover{text-decoration:underline}
.site-footer nav span{opacity:.4}
.site-footer p{margin:6px 0}

/* ── 인쇄 ───────────────────────────── */
@media print{
  @page{ size:A4 portrait; margin:13mm; }
  body{background:#fff}
  .no-print{display:none !important}
  .wrap{padding:0; max-width:none}
  .app{display:block}
  .panel{border:0; box-shadow:none; background:none}
  .panel-body{padding:0}
  .paper-scroll{overflow:visible}
  #paper{width:100%; margin:0; box-shadow:none; border:2px solid #000; page-break-inside:avoid}
  table.rc th,.lbl-v,.cell-key,table.approval .ap-label,table.approval .ap-role{background:#f2f2f2 !important; -webkit-print-color-adjust:exact; print-color-adjust:exact}
  .amount-band{background:#fafafa !important; -webkit-print-color-adjust:exact; print-color-adjust:exact}
}