/* 견적S 문서 양식 — 화면 미리보기와 A4 인쇄(PDF)에 함께 쓰입니다.
   1. 디자인 선택 버튼  2. 문서 공통  3. 기본형·간단형·상세형
   4. 프리미엄  5. 클래식  6. 미니멀  7. 모바일·인쇄 */

/* 1. 디자인 선택 버튼 (미리보기 위) ---------------------------------------- */
.template-chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}
.template-chips button{min-height:40px;padding:7px 14px;font-size:14px;color:var(--muted)}
.template-chips button[aria-pressed=true]{border-color:var(--blue);background:#f1f6ff;color:var(--blue);font-weight:600}

/* 2. 문서 공통 ---------------------------------------------------------- */
.paper-wrap{container-type:inline-size}
.paper{
  --ink:#1c2531;      /* 본문 글자 */
  --sub:#5d6877;      /* 보조 글자·항목 이름 */
  --hair:#dfe3e9;     /* 가는 구분선 */
  --rule:#1c2531;     /* 굵은 구분선 */
  --accent:#163e91;   /* 강조색 */
  --tint:#f5f7fa;     /* 옅은 바탕 */
  --display:'Noto Sans KR',sans-serif; /* 제목 글꼴 */
  display:flex;flex-direction:column;
  padding:44px 40px 40px;
  min-height:max(690px,calc((100cqw - 50px)*1.414));
  color:var(--ink);font-size:12px;line-height:1.6;word-break:keep-all;
}

.doc-head{display:flex;flex-direction:column;align-items:center;gap:14px;padding-bottom:18px;margin-bottom:14px;border-bottom:2px solid var(--accent)}
.doc-brand{display:flex;align-items:center;gap:12px;align-self:flex-start;min-width:0}
.doc-brand strong{display:block;font-size:15px;font-weight:700;line-height:1.4}
.doc-brand span{display:block;font-size:11px;color:var(--sub)}
.doc-logo{height:40px;width:auto;max-width:120px;object-fit:contain;flex-shrink:0}
.doc-title{text-align:center}
.paper .doc-title h2{margin:0;font:700 28px/1.3 var(--display);letter-spacing:.3em;text-indent:.3em;text-align:inherit}
.doc-title-en{display:none}

.doc-meta{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 24px;margin:0 0 22px;font-size:11.5px}
.doc-meta div{display:flex;gap:8px}
.doc-meta dt{color:var(--sub)}
.doc-meta dd{margin:0;font-weight:500;font-variant-numeric:tabular-nums}

.doc-parties{display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:start;margin-bottom:22px}
.doc-party{min-width:0}
.doc-party h3{margin:0 0 9px;padding-bottom:6px;border-bottom:1px solid var(--rule);font-size:11px;font-weight:600;letter-spacing:.08em;color:var(--sub)}
.doc-party-name{margin:0 0 8px;font-size:16px;font-weight:700;line-height:1.45}
.doc-party-name>span:not(.doc-seal){margin-left:5px;font-size:12px;font-weight:400}
.doc-party dl{display:grid;gap:3px;margin:0}
.doc-party dl:empty{display:none}
.doc-party dl div{display:grid;grid-template-columns:64px minmax(0,1fr);gap:8px}
.doc-party dt{color:var(--sub);white-space:nowrap}
.doc-party dd{margin:0;white-space:pre-wrap}
.doc-seal{position:relative;margin-left:8px;font-size:12px;font-weight:400;color:#8b95a3;white-space:nowrap}
.doc-seal img{position:absolute;left:64%;top:50%;width:42px;height:42px;max-width:none;transform:translate(-50%,-50%);object-fit:contain;mix-blend-mode:multiply}

.project-info{display:grid;gap:3px;margin:0 0 20px;padding:10px 0;border-block:1px solid var(--hair);font-size:12px}
.project-info p{display:grid;grid-template-columns:68px minmax(0,1fr);gap:8px;margin:0;white-space:pre-wrap}
.project-info b{font-weight:500;color:var(--sub)}

.doc-total{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:20px;padding:14px 16px;background:var(--tint)}
.doc-total-label span{display:block;font-size:12px;font-weight:600}
.doc-total-label small{font-size:10.5px;color:var(--sub)}
.doc-total-value{text-align:right;min-width:0}
.doc-total-hangul{display:block;font-size:11.5px;color:var(--sub)}
.doc-total b{font-size:23px;line-height:1.25;letter-spacing:-.01em;color:var(--accent);font-variant-numeric:tabular-nums}

.paper .doc-items{width:100%;border-collapse:collapse;table-layout:fixed;font-variant-numeric:tabular-nums}
.paper .doc-items th{padding:8px 6px;border-top:1.5px solid var(--rule);border-bottom:1px solid var(--rule);background:none;font-size:11px;font-weight:600;color:var(--sub);text-align:left}
.paper .doc-items td{padding:9px 6px;border-bottom:1px solid var(--hair);font-size:12px;vertical-align:top;white-space:pre-wrap}
.paper .doc-items .numeric{text-align:right}
.paper .doc-items .col-no{padding-inline:0;text-align:center;white-space:nowrap}
.paper .doc-items td.col-no{color:var(--sub)}
.doc-items th.col-no{width:7%}
.doc-items th.col-date{width:14%}
.doc-items th.col-qty{width:12%}
.doc-items th.col-price{width:18%}
.doc-items th.col-amount{width:19%}
.doc-items.construction th.col-no{width:5%}
.doc-items.construction th.col-date{width:12%}
.doc-items.construction th.col-qty{width:9%}
.doc-items.construction th.col-cost{width:11.5%}
.doc-items.construction th.col-amount{width:15%}
.paper .doc-secondary{font-size:11px;color:var(--sub)}

.doc-close{display:grid;grid-template-columns:minmax(0,1fr) minmax(210px,44%);gap:28px;align-items:start}
.doc-remarks{padding-top:16px;font-size:11.5px;min-width:0}
.doc-remarks h3{margin:0 0 6px;font-size:11px;font-weight:600;letter-spacing:.08em;color:var(--sub)}
.doc-remarks p{margin:0;white-space:pre-wrap}
.doc-remarks .calculation-note{margin-top:8px;font-size:11px;color:var(--sub)}
.doc-remarks .calculation-note:first-child{margin-top:0}
.doc-sums{margin:0;font-variant-numeric:tabular-nums}
.doc-sums div{display:flex;justify-content:space-between;gap:12px;padding:7px 6px;border-bottom:1px solid var(--hair)}
.doc-sums dt{color:var(--sub)}
.doc-sums dd{margin:0;font-weight:500}
.doc-sums .grand{padding-block:10px;border-bottom:0;border-top:1.5px solid var(--rule);margin-top:-1px;font-size:14px}
.doc-sums .grand dt{color:var(--ink);font-weight:700}
.doc-sums .grand dd{font-weight:700}
.doc-pay{margin-top:10px;border-top:1px solid var(--hair)}
.doc-pay div:last-child{border-bottom:0}
.doc-pay div:last-child dt{color:var(--ink);font-weight:600}
.doc-pay div:last-child dd{font-weight:700}

.paper .signatures{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;margin-top:30px;padding:18px 6px;border-top:0;border-block:1px solid var(--hair);font-size:12px}
.doc-closing{margin-top:auto;padding-top:38px;text-align:center}
.doc-closing p{margin:0 0 5px;font-size:13px;font-weight:500}
.doc-closing time{font-size:12px;color:var(--sub)}

/* 3. 기본형 · 간단형 · 상세형 -------------------------------------------- */
.simple .doc-head{align-items:flex-start;border-bottom:1px solid var(--rule)}
.paper.simple .doc-title h2{letter-spacing:.08em;text-indent:0}
.simple .doc-title{text-align:left}
.simple .doc-total{background:none;border-block:1px solid var(--rule);padding-inline:6px}
.simple .doc-total b{color:var(--ink)}
.detail .doc-total{background:var(--accent);color:white}
.detail .doc-total-label small,.detail .doc-total-hangul{color:#d3defa}
.detail .doc-total b{color:white}

/* 4. 프리미엄 — 네이비와 금빛 선, 명조 제목 -------------------------------- */
.paper.premium{--ink:#14233a;--sub:#566173;--hair:#e7e2d7;--rule:#14233a;--accent:#14233a;--tint:#f8f5ee;--gold:#a8884f;--gold-ink:#7a5f30;--display:'Noto Serif KR',serif}
.premium .doc-head{position:relative;flex-direction:row;justify-content:space-between;align-items:flex-end;gap:20px;margin-bottom:22px;padding:28px 26px 22px;background:#14233a;border-bottom:2px solid var(--gold);color:white}
.premium .doc-head::after{content:'';position:absolute;left:0;right:0;bottom:-6px;height:1px;background:var(--gold)}
.premium .doc-brand{align-self:auto}
.premium .doc-brand strong{font:600 18px/1.4 var(--display)}
.premium .doc-brand span{margin-top:3px;color:#dccba6}
.premium .doc-logo{padding:5px 7px;background:white;border-radius:2px}
.premium .doc-title{text-align:right;flex-shrink:0}
.paper.premium .doc-title h2{font-weight:500;font-size:25px;letter-spacing:.34em;text-indent:0;margin-right:-.34em;color:white}
.premium .doc-title-en{display:block;margin:5px -.3em 0 0;font-size:9px;letter-spacing:.3em;color:#dccba6}
.premium .doc-meta dt{color:var(--gold-ink)}
.premium .doc-party h3{border-bottom-color:var(--gold);color:var(--gold-ink)}
.premium .doc-party-name{font-family:var(--display);font-weight:600}
.premium .doc-total{padding:16px 18px;border-block:1px solid var(--gold)}
.premium .doc-total-label small{color:var(--gold-ink)}
.premium .doc-total-hangul{font-family:var(--display);color:var(--ink)}
.premium .doc-total b{font-family:var(--display);font-size:25px;font-weight:700}
.paper.premium .doc-items th{background:var(--tint);border-bottom-color:var(--gold);color:var(--ink)}
.premium .doc-remarks h3{color:var(--gold-ink)}
.premium .doc-sums .grand{margin-top:0;padding-inline:10px;border-top:0;background:#14233a;color:white}
.premium .doc-sums .grand dt{color:white}
.premium .doc-closing::before{content:'';display:block;width:36px;height:1px;margin:0 auto 16px;background:var(--gold)}
.premium .doc-closing p{font-family:var(--display);font-size:14px;letter-spacing:.04em}

/* 5. 클래식 — 괘선과 명조로 짠 정통 서식 ---------------------------------- */
.paper.classic{--ink:#1f1f1f;--sub:#474747;--hair:#8a8a8a;--rule:#1f1f1f;--accent:#1f1f1f;--tint:#f3f2ef;--display:'Noto Serif KR',serif}
.classic .doc-head{gap:12px;margin-bottom:12px;padding-bottom:0;border-bottom:0}
.classic .doc-title{align-self:stretch;padding:14px 0 12px;border-top:2px solid var(--rule);border-bottom:4px double var(--rule)}
.paper.classic .doc-title h2{font-size:31px;letter-spacing:.6em;text-indent:.6em}
.classic .doc-parties{gap:14px;align-items:stretch}
.classic .doc-party{border:1px solid var(--rule)}
.classic .doc-party h3{margin:0;padding:6px 10px;background:var(--tint);border-bottom:1px solid var(--rule);color:var(--ink);text-align:center;letter-spacing:.4em;text-indent:.4em}
.classic .doc-party-name{margin:0;padding:8px 10px;font-family:var(--display)}
.classic .doc-party dl{gap:0;border-top:1px solid var(--hair)}
.classic .doc-party dl div{grid-template-columns:86px minmax(0,1fr);gap:0;border-bottom:1px solid var(--hair)}
.classic .doc-party dl div:last-child{border-bottom:0}
.classic .doc-party dt{padding:5px 8px;background:var(--tint);border-right:1px solid var(--hair);color:var(--ink)}
.classic .doc-party dd{padding:5px 8px}
.classic .project-info{gap:0;padding:0;border:1px solid var(--rule)}
.classic .project-info p{grid-template-columns:86px minmax(0,1fr);gap:0;border-bottom:1px solid var(--hair)}
.classic .project-info p:last-child{border-bottom:0}
.classic .project-info span{padding:5px 8px}
.classic .project-info b{padding:5px 8px;background:var(--tint);border-right:1px solid var(--hair);color:var(--ink)}
.classic .doc-total{align-items:stretch;gap:0;padding:0;background:none;border:1.5px solid var(--rule)}
.classic .doc-total-label{display:flex;flex-direction:column;justify-content:center;min-width:112px;padding:11px 14px;background:var(--tint);border-right:1px solid var(--rule);text-align:center}
.classic .doc-total-label span{letter-spacing:.2em;text-indent:.2em}
.classic .doc-total-value{flex:1;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:2px 14px;padding:11px 16px}
.classic .doc-total-hangul{font:600 15px/1.5 var(--display);color:var(--ink)}
.classic .doc-total b{margin-left:auto;font-size:18px}
.paper.classic .doc-items{border:1.5px solid var(--rule)}
.paper.classic .doc-items th{border:1px solid var(--hair);border-bottom-color:var(--rule);background:var(--tint);color:var(--ink);text-align:center}
.paper.classic .doc-items td{border:1px solid var(--hair)}
.classic .doc-sums{border:1.5px solid var(--rule);border-top:0}
.classic .doc-sums div{padding:0;gap:0;border-bottom:0}
.classic .doc-sums dt{flex:0 0 44%;padding:6px 8px;background:var(--tint);border-right:1px solid var(--hair);border-bottom:1px solid var(--hair);color:var(--ink)}
.classic .doc-sums dd{flex:1;padding:6px 8px;border-bottom:1px solid var(--hair);text-align:right}
.classic .doc-sums div:nth-last-child(2) :is(dt,dd),.classic .doc-sums .grand :is(dt,dd){border-bottom:0}
.classic .doc-sums .grand{margin-top:0;padding:0;border-top:1.5px solid var(--rule)}
.classic .doc-pay{border-top:1.5px solid var(--rule)}
.classic .doc-pay div:first-child :is(dt,dd){border-bottom:1px solid var(--hair)}
.classic .doc-pay div:last-child :is(dt,dd){border-bottom:0}
.classic .doc-sums .grand dt,.classic .doc-sums .grand dd{padding-block:8px}
.classic .doc-remarks h3{color:var(--ink)}
.classic .signatures{border:1px solid var(--rule);padding-inline:14px}
.classic .doc-closing p{font:600 15px/1.6 var(--display);letter-spacing:.12em}

/* 6. 미니멀 — 여백과 큰 글자, 가는 선만 ----------------------------------- */
.paper.minimal{--ink:#111418;--sub:#646c7a;--hair:#e6e8ec;--rule:#111418;--accent:#111418;--tint:transparent;padding:52px 46px 44px}
.minimal .doc-head{align-items:flex-start;gap:34px;margin-bottom:20px;padding-bottom:0;border-bottom:0}
.minimal .doc-brand strong{font-size:13px;font-weight:600}
.minimal .doc-title{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px;text-align:left}
.paper.minimal .doc-title h2{font-size:38px;line-height:1.1;letter-spacing:-.03em;text-indent:0}
.minimal .doc-title-en{display:block;font-size:10px;letter-spacing:.22em;color:var(--sub)}
.minimal .doc-meta{justify-content:flex-start;gap:8px 38px;margin-bottom:36px}
.minimal .doc-meta div{flex-direction:column;gap:1px}
.minimal .doc-meta dt{font-size:10.5px}
.minimal .doc-parties{gap:40px;margin-bottom:36px}
.minimal .doc-party h3{margin-bottom:6px;padding-bottom:0;border-bottom:0;font-weight:500;letter-spacing:0}
.minimal .doc-party-name{font-size:17px;font-weight:600}
.minimal .doc-total{align-items:flex-end;margin-bottom:28px;padding:18px 0 0;border-top:1px solid var(--rule)}
.minimal .doc-total-label span{font-weight:500}
.minimal .doc-total b{font-size:34px;font-weight:300;letter-spacing:-.02em}
.paper.minimal .doc-items th{padding-inline:0;border-top:0;font-weight:500}
.paper.minimal .doc-items td{padding:11px 0}
.minimal .doc-sums div{padding-inline:0}
.minimal .doc-sums .grand{font-size:15px}
.minimal .doc-remarks h3{font-weight:500;letter-spacing:0}
.minimal .doc-closing{text-align:left}
.minimal .doc-closing p{font-weight:400;color:var(--sub)}

/* 7. 모바일 · 인쇄 ------------------------------------------------------ */
@media(max-width:600px){
  .template-chips button{flex:1 1 30%}
  .paper,.paper.minimal{padding:32px 26px}
}
@media print{
  .paper,.paper.minimal{display:block;min-height:0;padding:0}
  .doc-head,.doc-meta,.doc-parties,.project-info,.doc-total,.doc-close,.signatures,.doc-closing{break-inside:avoid}
  .doc-items thead{display:table-header-group}
  .doc-items tr{break-inside:avoid}
  .doc-closing{margin-top:0;padding-top:44px}
  .template-chips{display:none!important}
}