@charset "utf-8";
/* ============================================================
   준디자인 친환경인쇄 — 주문 페이지 (친환경 무선책자)
   style.css 를 먼저 로드한 뒤 이 파일을 덧입힌다.
   ============================================================ */

/* ---------- 상품 탭 (형제 상품 LNB) ---------- */
.lnb{background:var(--bg-2);border-bottom:1px solid var(--line)}
.lnb .wrap{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none}
.lnb .wrap::-webkit-scrollbar{display:none}
.lnb a{
  flex:none;padding:15px 20px;font-size:14px;font-weight:600;color:var(--tx-45);
  border-bottom:3px solid transparent;transition:.25s;white-space:nowrap;
}
.lnb a:hover{color:var(--tx)}
.lnb a.on{color:var(--pri);border-bottom-color:var(--pri)}

/* ---------- 페이지 헤드 ---------- */
.ph-head{padding:30px 0 22px}
.crumb{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--tx-45);margin-bottom:14px}
.crumb i{font-style:normal;color:var(--tx-25)}
.ph-head .row{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap}
.ph-head h1{font-size:32px;font-weight:800;letter-spacing:-.045em}
.ph-head h1 span{
  display:inline-block;vertical-align:5px;margin-left:10px;padding:5px 11px;border-radius:99px;
  background:var(--pri-l);color:var(--pri);font-size:11.5px;font-weight:700;letter-spacing:.02em;
}
.ph-head .sub{margin-top:8px;font-size:14.5px;color:var(--tx-45)}
.ph-head .acts{display:flex;gap:8px}

/* 상품 소개 2단 — 좌: 대표 이미지 / 우: 소개 문구 (고객 원고 좌측 소개 영역) */
.ph-intro{display:grid;grid-template-columns:300px minmax(0,1fr);gap:34px;align-items:center}
.ph-visual{position:relative;border-radius:var(--r-l);overflow:hidden;box-shadow:var(--sh-s)}
.ph-visual .eco-mark{
  position:absolute;left:14px;top:14px;padding:5px 11px;border-radius:99px;
  background:rgba(255,255,255,.92);color:var(--pri);font-size:11px;font-weight:800;letter-spacing:.04em;
}
.ph-info .eyebrow{font-size:13px;font-weight:700;color:var(--pri);margin-bottom:8px}
.ph-info .tagline{margin-top:4px;font-size:17px;font-weight:700;color:var(--tx-70);letter-spacing:-.03em}
.ph-info .sub{max-width:680px;line-height:1.75;word-break:keep-all}

/* 요약 배지 */
.kv{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.kv span{
  display:inline-flex;align-items:center;gap:7px;padding:8px 14px;border-radius:99px;
  background:#fff;border:1px solid var(--line);font-size:12.5px;font-weight:600;color:var(--tx-70);
}
.kv span svg{flex:none;color:var(--pri);opacity:.9}
.kv span b{font-weight:800;color:var(--tx)}
.kv span{transition:.25s var(--ease)}
.kv span:hover{border-color:var(--pri);box-shadow:0 4px 14px -6px rgba(var(--pri-rgb),.4)}
.kv span:hover svg{opacity:1}

/* ============================================================
   본문 2단 — 좌: 옵션 폼 / 우: 견적 패널(sticky)
   ============================================================ */
.od{padding:8px 0 76px}
.od-body{display:grid;grid-template-columns:minmax(0,1fr) 372px;gap:34px;align-items:start}

/* ---------- 옵션 블록 ---------- */
.blk{
  background:#fff;border:1px solid var(--line);border-radius:var(--r-l);
  padding:22px 26px 20px;margin-bottom:14px;scroll-margin-top:160px;
}
.blk > h2{
  display:flex;align-items:center;gap:10px;font-size:18px;font-weight:800;letter-spacing:-.035em;
  padding-bottom:15px;margin-bottom:0;border-bottom:1px solid var(--line-2);
}
.blk > h2 .n{
  width:26px;height:26px;border-radius:9px;background:var(--pri-l);color:var(--pri);
  font-size:12px;font-weight:800;display:grid;place-items:center;flex:none;
}
.blk > h2 .opt{
  margin-left:auto;font-size:11.5px;font-weight:700;color:var(--tx-45);
  background:var(--bg-2);padding:4px 10px;border-radius:99px;letter-spacing:0;
}

/* ---------- 행 ---------- */
.row{display:grid;grid-template-columns:104px minmax(0,1fr);gap:10px 18px;align-items:start;padding:14px 0;border-bottom:1px solid var(--line-2)}
.row:first-of-type{padding-top:18px}
.row:last-child{border-bottom:0;padding-bottom:2px}
.row > label,.row > .lb{padding-top:11px;font-size:13.5px;font-weight:700;color:var(--tx-70)}
.row > .lb .req{color:var(--coral);margin-left:3px}
.row .fld{display:flex;flex-wrap:wrap;gap:8px;align-items:center;min-width:0}
/* [중요] .fld 의 flex-wrap:wrap 을 반드시 해제해야 한다.
   column + wrap 조합은 교차축(가로) 폭을 불확정으로 만들고,
   그 안의 repeat(auto-fill,...) 그리드가 1열로 접혀 높이가 폭발한다. */
.row .fld.col{flex-direction:column;flex-wrap:nowrap;align-items:stretch;gap:8px}
.row .fld.col > *{width:100%;max-width:100%}
.hint{grid-column:2;margin-top:-2px;font-size:12px;color:var(--tx-45);line-height:1.6}
.hint.warn{color:var(--coral);font-weight:600}
.hint.ok{color:var(--mint);font-weight:600}

/* 입력 요소 */
.sel,.txt{
  height:44px;border-radius:var(--r-s);border:1.5px solid var(--line);background:#fff;
  padding:0 13px;font-size:13.5px;transition:.22s;min-width:0;
}
.sel{padding-right:30px}
.sel:focus,.txt:focus{outline:0;border-color:var(--pri);box-shadow:0 0 0 3px rgba(var(--pri-rgb),.1)}
.sel:disabled,.txt:disabled{background:var(--bg-2);color:var(--tx-25);cursor:not-allowed}
.txt.w-num{width:96px;text-align:right}
.unit{font-size:13px;color:var(--tx-45);font-weight:600}
/* 한 줄에 두 정보 — 재단 · 작업 사이즈 */
.fld.pair{column-gap:6px}
.fld.pair .pk{font-size:12.5px;font-weight:700;color:var(--tx-70);margin-right:2px}
.fld.pair .pk + input{margin-left:0}
.fld.pair .pk:not(:first-child){margin-left:16px;padding-left:16px;border-left:1px solid var(--line)}
.grow{flex:1}

/* 수량 스테퍼 */
.stepper{display:flex;align-items:center;border:1.5px solid var(--line);border-radius:var(--r-s);overflow:hidden;height:44px}
.stepper button{width:40px;height:100%;font-size:17px;font-weight:700;color:var(--tx-70);transition:.2s}
.stepper button:hover{background:var(--bg-2);color:var(--pri)}
.stepper input{width:74px;height:100%;border:0;text-align:center;font-size:14px;font-weight:700}
.stepper input:focus{outline:0}

/* 칩 (라디오/체크) */
.chips{display:flex;flex-wrap:wrap;gap:7px}
.chips label{cursor:pointer;position:relative}
.chips input{position:absolute;opacity:0;pointer-events:none}
.chips span{
  display:block;padding:10px 16px;border-radius:99px;border:1.5px solid var(--line);
  font-size:13px;font-weight:600;color:var(--tx-70);background:#fff;transition:.22s;
}
.chips label:hover span{border-color:var(--pri);color:var(--pri)}
.chips input:checked + span{background:var(--pri);border-color:var(--pri);color:#fff}
.chips input:disabled + span{
  opacity:.45;cursor:not-allowed;background:var(--bg-2);border-color:var(--line-2);
  color:var(--tx-25);text-decoration:line-through;
}
.chips label:hover input:disabled + span{border-color:var(--line-2);color:var(--tx-25)}

/* 용지 종류 (친환경 / 일반) + 샘플 보기 */
.kind-bar{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.kind-bar .chips span{padding:8px 14px;font-size:12.5px}
.paper-link{
  display:inline-flex;align-items:center;gap:5px;font-size:12.5px;font-weight:700;color:var(--pri);
  text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;
}
.paper-link:hover{color:var(--pri-d)}

/* 아이콘 카드 선택 (사이즈 / 제본) */
.cards{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:10px;
  align-content:start;grid-auto-rows:min-content;width:100%;
}
.cards label{cursor:pointer;position:relative;align-self:start}
.cards input{position:absolute;opacity:0;pointer-events:none}
.cards .card{
  display:block;border:1.5px solid var(--line);border-radius:var(--r);padding:12px 10px 11px;
  text-align:center;background:#fff;transition:.25s var(--ease);
}
.cards label:hover .card{border-color:var(--pri);transform:translateY(-2px)}
.cards input:checked + .card{
  border-color:var(--pri);background:var(--pri-l);
  box-shadow:0 0 0 3px rgba(var(--pri-rgb),.12);
}
.cards input:disabled + .card{opacity:.4;cursor:not-allowed;background:var(--bg-2)}
.cards .fig{
  height:38px;margin:0 auto 8px;display:grid;place-items:center;color:var(--tx-45);transition:.25s;
}
.cards input:checked + .card .fig{color:var(--pri)}
.cards .nm{display:block;font-size:12.5px;font-weight:700;letter-spacing:-.03em;line-height:1.3}
.cards .ds{display:block;font-size:10.5px;color:var(--tx-45);margin-top:3px}
.cards input:checked + .card .nm{color:var(--pri)}

/* 메모 */
.memo{
  width:100%;min-height:96px;border-radius:var(--r-s);border:1.5px solid var(--line);
  padding:13px;font-size:13.5px;line-height:1.6;resize:vertical;font-family:inherit;
}
.memo:focus{outline:0;border-color:var(--pri);box-shadow:0 0 0 3px rgba(var(--pri-rgb),.1)}

/* ============================================================
   견적 패널 (우측 sticky)
   ============================================================ */
/* top = 스크롤 시 고정 헤더(.hd, 축소 122px · 기본 138px) 아래. 92px 이던 시절엔 제목이 gnb-bar 에 가려졌다 */
.est-panel{position:sticky;top:146px}
.est-box{background:#fff;border:1px solid var(--line);border-radius:var(--r-l);overflow:hidden;box-shadow:var(--sh)}
.est-box .hd{
  padding:13px 20px;border-bottom:1px solid var(--line-2);
  display:flex;align-items:center;justify-content:space-between;
}
.est-box .hd strong{font-size:15px;font-weight:800;letter-spacing:-.035em}
.est-box .hd-print{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:700;color:var(--tx-45);transition:.2s}
.est-box .hd-print:hover{color:var(--pri)}

/* 항목 내역 — 한 줄에 두 항목 */
.est-list{padding:12px 20px 13px;display:grid;grid-template-columns:1fr 1fr;column-gap:22px}
.est-list dl{display:flex;align-items:baseline;justify-content:space-between;gap:8px;padding:4px 0;font-size:12.5px;min-width:0}
.est-list dt{color:var(--tx-45);font-weight:500;white-space:nowrap}
.est-list dd{font-weight:700;letter-spacing:-.02em;white-space:nowrap}
.est-list .line{grid-column:1/-1;height:1px;background:var(--line-2);margin:6px 0}
.est-list dl.vat dt,.est-list dl.vat dd{color:var(--tx-45);font-weight:500;font-size:12px}

.est-sum{padding:13px 20px;background:var(--pri-l);display:flex;align-items:center;justify-content:space-between}
.est-sum .lb{font-size:13px;font-weight:800;color:var(--tx)}
.est-sum .lb small{display:block;font-size:11px;font-weight:500;color:var(--tx-45);margin-top:2px}
.est-sum .pr{font-size:24px;font-weight:800;letter-spacing:-.05em;color:var(--pri);line-height:1}
.est-sum .pr i{font-style:normal;font-size:14px;margin-left:2px}

.est-act{padding:12px 20px 12px;display:grid;gap:7px}
.est-act .btn{width:100%}
.est-act .mini{display:flex;gap:7px}
.est-act .mini .btn{flex:1}
.est-act .btn-sm{height:42px}
.est-note{padding:0 20px 13px;font-size:10.8px;color:var(--tx-45);line-height:1.55}
.est-note b{color:var(--coral)}
/* style.css 메인 견적 카드의 .est-note(flex·코랄) 상속 차단 */
.est-box .est-note{display:block;margin-top:0;font-weight:400;color:var(--tx-45)}

/* 유의사항 아코디언 (폼 맨 아래) */
.acc{margin-top:0;background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.acc-item + .acc-item{border-top:1px solid var(--line-2)}
.acc-item > button{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:11px 17px;font-size:12.8px;font-weight:700;text-align:left;transition:.2s;
}
.acc-item > button:hover{background:var(--bg-2)}
.acc-item > button .ar{color:var(--tx-25);transition:.3s}
.acc-item.on > button{color:var(--pri)}
.acc-item.on > button .ar{transform:rotate(180deg);color:var(--pri)}
.acc-body{max-height:0;overflow:hidden;transition:max-height .35s var(--ease)}
.acc-body ul{padding:0 17px 14px}
.acc-body li{position:relative;padding-left:12px;font-size:12px;color:var(--tx-45);line-height:1.75}
.acc-body li::before{content:'';position:absolute;left:0;top:10px;width:3px;height:3px;border-radius:50%;background:var(--tx-25)}

/* ============================================================
   상품 상세 설명
   ============================================================ */
.detail{background:var(--bg-2);padding:84px 0}
.detail-tabs{
  display:flex;gap:6px;justify-content:center;margin-bottom:46px;
  background:#fff;border:1px solid var(--line);border-radius:99px;padding:6px;width:max-content;margin-inline:auto;
}
.detail-tabs button{padding:11px 22px;border-radius:99px;font-size:13.5px;font-weight:700;color:var(--tx-45);transition:.25s}
.detail-tabs button:hover{color:var(--tx)}
.detail-tabs button.on{background:var(--pri);color:#fff}
.dt-panel{display:none}
.dt-panel.on{display:block}
.swatch{display:grid;grid-template-columns:repeat(5,1fr);gap:18px}
.swatch figure{text-align:center}
.swatch .ph{border-radius:var(--r);margin-bottom:11px;box-shadow:var(--sh-s)}
.swatch figcaption{font-size:13px;font-weight:700;letter-spacing:-.03em}
.swatch .gsm{display:block;font-size:11.5px;color:var(--tx-45);font-weight:500;margin-top:2px}
.sw-tit{display:flex;align-items:center;gap:8px;font-size:15px;font-weight:800;letter-spacing:-.03em;margin:0 0 14px}
.sw-tit i{width:8px;height:8px;border-radius:50%;background:var(--tx-25)}
.sw-tit i.eco{background:var(--pri)}
.sw-tit small{font-size:12px;font-weight:600;color:var(--tx-45)}
.swatch + .sw-tit{margin-top:36px}

/* 제품 Guide! — 고객 원고 (책자 12종 + 후가공 8종) */
.gd-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap;padding-bottom:16px;margin-bottom:24px;border-bottom:1.5px solid var(--tx)}
.gd-head h3{font-size:24px;font-weight:800;letter-spacing:-.04em}
.gd-head h3 em{font-style:normal;color:var(--pri)}
.gd-head p{font-size:13.5px;color:var(--tx-45)}
.gd-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:28px 22px}
.gd-grid + .gd-head{margin-top:64px}
.gd-item .ph{border-radius:var(--r);box-shadow:var(--sh-s);margin-bottom:14px}
.gd-item strong{
  display:block;position:relative;padding-left:11px;font-size:15px;font-weight:800;letter-spacing:-.035em;margin-bottom:6px;
}
.gd-item strong::before{content:'';position:absolute;left:0;top:4px;bottom:4px;width:3px;border-radius:2px;background:var(--pri)}
.gd-item p{font-size:13px;color:var(--tx-45);line-height:1.7;word-break:keep-all}

.info-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.info-card{background:#fff;border-radius:var(--r-l);padding:28px 30px}
.info-card h4{display:flex;align-items:center;gap:9px;font-size:16px;font-weight:800;margin-bottom:14px}
.info-card h4 i{width:24px;height:24px;border-radius:8px;background:var(--pri-l);color:var(--pri);display:grid;place-items:center;font-size:11px;font-style:normal}
.info-card li{position:relative;padding-left:13px;font-size:13px;color:var(--tx-45);line-height:1.9}
.info-card li::before{content:'';position:absolute;left:0;top:12px;width:4px;height:4px;border-radius:50%;background:var(--pri);opacity:.5}

/* ---------- 모바일 하단 고정 견적바 ---------- */
.mbar{
  position:fixed;left:0;right:0;bottom:0;z-index:700;display:none;
  background:rgba(255,255,255,.96);backdrop-filter:blur(14px);border-top:1px solid var(--line);
  padding:12px 16px;box-shadow:0 -6px 24px -12px rgba(20,22,28,.3);
}
.mbar .in{display:flex;align-items:center;gap:12px}
.mbar .pr{font-size:20px;font-weight:800;letter-spacing:-.045em;color:var(--pri);line-height:1.1}
.mbar .pr small{display:block;font-size:10.5px;font-weight:600;color:var(--tx-45);letter-spacing:0}
.mbar .btn{flex:1}

/* ============================================================
   낮은 화면 높이 대응 (1920×970 등 북마크바 포함 환경) — 패널을 조금 더 조인다
   ============================================================ */
@media (min-width:1181px) and (max-height:820px){
  .est-list{padding:9px 20px 10px}
  .est-list dl{padding:3px 0;font-size:12px}
  .est-sum{padding:11px 20px}
  .est-sum .pr{font-size:22px}
  .est-act .btn-sm{height:38px;font-size:12.5px}
  .est-note{display:none}
}

/* ---------- Responsive ---------- */
@media (max-width:1180px){
  .od-body{grid-template-columns:1fr}
  .est-panel{position:static}
  .est-box{max-width:520px}
  .swatch{grid-template-columns:repeat(4,1fr)}
}
@media (max-width:1024px){
  .ph-head h1{font-size:26px}
  .ph-intro{grid-template-columns:220px minmax(0,1fr);gap:24px}
  .swatch{grid-template-columns:repeat(3,1fr)}
  .gd-grid{grid-template-columns:repeat(3,1fr)}
  .info-grid{grid-template-columns:1fr}
}
@media (max-width:640px){
  .od{padding-bottom:110px}
  .blk{padding:20px 18px 22px;border-radius:var(--r)}
  .row{grid-template-columns:1fr;gap:9px;padding:15px 0}
  .row > label,.row > .lb{padding-top:0}
  .hint{grid-column:1}
  .cards{grid-template-columns:repeat(3,1fr)}
  .fld.pair .pk:not(:first-child){margin-left:0;padding-left:0;border-left:0;flex-basis:100%;margin-top:4px}
  .swatch{grid-template-columns:repeat(2,1fr)}
  .ph-intro{grid-template-columns:1fr;gap:18px}
  .gd-grid{grid-template-columns:repeat(2,1fr);gap:22px 14px}
  .gd-head h3{font-size:20px}
  .detail{padding:56px 0}
  .detail-tabs{width:100%;overflow-x:auto;border-radius:var(--r);justify-content:flex-start;scrollbar-width:none}
  .est-act{display:none}
  .mbar{display:block}
  .quickbar,.totop{display:none}
}

/* ---------- 견적서 인쇄 — 견적 패널만 출력 ---------- */
@media print{
  body *{visibility:hidden}
  .est-box,.est-box *{visibility:visible}
  .est-box{position:absolute;left:0;top:0;width:100%;max-width:none;box-shadow:none;border-color:#999}
  .est-box .hd-print,.est-act,.est-note{display:none}
  .progress,.quickbar,.totop,.mbar,.demo-legend{display:none !important}
}

/* ============================================================
   [4단계] 주문페이지 3단 레이아웃 — 2026.11 클라이언트 원고(카테고리별 주문.pdf)
   좌: 세부선택별 이미지 고정 / 중: 옵션폼 / 우: 견적서 고정
   ============================================================ */
.od{padding:26px 0 76px}
.od3{display:grid;grid-template-columns:236px minmax(0,1fr) 316px;gap:26px;align-items:start}

/* ---------- 좌측 고정 이미지 ---------- */
.od-side{position:sticky;top:146px}
.side-ph{position:relative;margin:0;border-radius:var(--r-l);overflow:hidden;background:var(--bg-3);aspect-ratio:4/3;box-shadow:var(--sh-s)}
/* 세로형 제품 이미지가 등록되면 .side-ph.tall 로 3:4 */
.side-ph.tall{aspect-ratio:3/4}
.side-ph img{width:100%;height:100%;object-fit:cover;display:block}
.side-ph .eco-mark{
  position:absolute;left:12px;top:12px;padding:5px 10px;border-radius:99px;
  background:rgba(255,255,255,.92);color:var(--pri);font-size:10.5px;font-weight:800;letter-spacing:.04em;
}
.od-side .eyebrow{margin-top:18px;font-size:12px;font-weight:700;color:var(--pri)}
.od-side h2{margin-top:3px;font-size:20px;font-weight:800;letter-spacing:-.04em}
.od-side .desc{margin-top:8px;font-size:12.8px;line-height:1.7;color:var(--tx-45);word-break:keep-all}
.side-badges{display:flex;flex-wrap:wrap;gap:5px;margin-top:12px}
.side-badges li{padding:5px 10px;border-radius:99px;background:var(--pri-l);color:var(--pri);font-size:11.5px;font-weight:700}
.side-guide{width:100%;margin-top:14px}

/* ---------- 가운데 폼 ---------- */
.od-head{margin-bottom:14px}
.od-head .crumb{margin-bottom:6px}
.od-head h1{font-size:28px;font-weight:800;letter-spacing:-.045em}
.blk > h2 .paper-links{margin-left:auto;display:flex;gap:12px}
.paper-links a{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:700;color:var(--sky)}
.paper-links a::before{content:'';width:11px;height:11px;border:1.6px solid currentColor;border-radius:50%;box-shadow:3px 3px 0 -1.3px currentColor}
.paper-links a:hover{text-decoration:underline;text-underline-offset:3px}
.fld-line{display:flex;gap:8px}
.sel.w-gsm{width:112px;flex:none}
.od3 .txt.w-num{width:76px;padding:0 9px}
/* 가운데 폭이 좁아 재단·작업을 두 줄로 */
.od3 .fld.pair .pk{width:30px}
.od3 .fld.pair .pk:not(:first-child){margin-left:0;padding-left:0;border-left:0}
.od3 .fld.pair .unit:nth-of-type(2){margin-right:100%}
.txt.w-sm{width:68px;height:38px;text-align:right;padding:0 9px}
.chips.sm span{padding:7px 14px;font-size:12.5px}
/* 양면/단면 세그먼트 */
.chips.seg{gap:0;border:1.5px solid var(--line);border-radius:var(--r-s);overflow:hidden;height:44px}
.chips.seg span{border:0;border-radius:0;height:100%;display:grid;place-items:center;padding:0 14px}
.chips.seg label + label span{border-left:1.5px solid var(--line)}
.cards.sizes{grid-template-columns:repeat(auto-fill,minmax(74px,1fr));gap:8px}
.cards.sizes .card{padding:10px 6px 9px}
.cards.sizes .fig{height:34px;margin-bottom:6px}
.cards.sizes .ds{font-size:10px}

/* 내지 추가 */
.inner-blk > h2 .rm-inner{
  margin-left:4px;padding:5px 11px;border-radius:99px;border:1.5px solid var(--line);
  font-size:11.5px;font-weight:700;color:var(--tx-45);transition:.2s;
}
.inner-blk > h2 .rm-inner:hover{border-color:var(--coral);color:var(--coral)}
.inner-blk:first-child > h2 .rm-inner{display:none}
.add-inner{
  display:flex;align-items:center;justify-content:center;gap:6px;width:100%;margin:-4px 0 14px;
  padding:12px;border:1.5px dashed var(--line);border-radius:var(--r);background:#fff;
  font-size:13px;font-weight:700;color:var(--pri);transition:.2s;
}
.add-inner small{font-weight:500;color:var(--tx-45)}
.add-inner:hover{border-color:var(--pri);background:var(--pri-l)}
.add-inner[hidden]{display:none}

/* 후가공 — 체크하면 세부옵션 생김 */
.fin-opts{display:grid;gap:8px}
.fin-opts:not(:has(.fin-opt:not([hidden]))){display:none}
.fin-opt{
  display:grid;grid-template-columns:88px minmax(0,1fr);gap:10px;align-items:center;
  padding:10px 14px;border-radius:var(--r-s);background:var(--bg-2);border:1px solid var(--line-2);
  animation:foIn .25s var(--ease);
}
@keyframes foIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.fo-lb{font-size:12.5px;font-weight:800;color:var(--tx-70)}
.fo-ctl{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;font-size:12.5px;color:var(--tx-70);min-width:0}
.fo-ctl .sel{height:38px;font-size:13px}
.fo-size{display:inline-flex;align-items:center;gap:5px}
.fo-corner{display:inline-flex;gap:10px}
.fo-corner label{display:inline-flex;align-items:center;gap:4px;cursor:pointer}
.fo-corner input{accent-color:var(--pri)}

/* 긴급요청 */
.rush{display:grid;grid-template-columns:20px minmax(0,1fr) auto;gap:4px 10px;align-items:start;padding-top:9px;cursor:pointer}
.rush input{position:absolute;opacity:0;pointer-events:none}
.rush .box{width:20px;height:20px;border-radius:6px;border:1.5px solid var(--line);background:#fff;transition:.2s;margin-top:1px}
.rush input:checked + .box{background:var(--coral);border-color:var(--coral);box-shadow:inset 0 0 0 4px #fff}
.rush input:focus-visible + .box{outline:2px solid var(--pri);outline-offset:2px}
.rush .rt{font-size:12.8px;line-height:1.6;color:var(--tx-70);word-break:keep-all}
.rush .rr{font-size:12.5px;color:var(--coral);white-space:nowrap}

/* ---------- 우측 견적서 ---------- */
.est-panel{top:146px}
.est-box .hd .tmp{font-size:10.5px;font-weight:800;color:var(--coral);background:#fff1ee;padding:3px 8px;border-radius:99px}
.est-lines{padding:12px 20px 4px}
.est-lines dl,.est-tot dl{display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding:4px 0;font-size:12.8px}
.est-lines dt,.est-tot dt{color:var(--tx-45)}
.est-lines dd,.est-tot dd{font-weight:700;white-space:nowrap;font-variant-numeric:tabular-nums}
.est-lines dl.sub dt{padding-left:10px;font-size:12px}
.est-lines dl.sub dt::before{content:'· '}
.est-lines dl.rush dt,.est-lines dl.rush dd{color:var(--coral)}
.est-lines dl.new{animation:foIn .3s var(--ease)}
.est-tot{margin:6px 20px 0;padding:8px 0 10px;border-top:1px dashed var(--line)}
.est-tot dl.vat dt,.est-tot dl.vat dd{font-weight:500;color:var(--tx-45);font-size:12px}
.est-sum .pr{color:var(--coral)}
.est-print{
  width:100%;display:flex;align-items:center;justify-content:center;gap:6px;
  padding:12px;background:var(--tx);color:#fff;font-size:13px;font-weight:700;transition:.2s;
}
.est-print:hover{background:var(--pri)}
.est-ask{display:block;margin-top:10px;text-align:center;font-size:12.5px;color:var(--tx-45)}
.est-ask b{color:var(--pri);text-decoration:underline;text-underline-offset:3px}

/* ---------- 견적서 모달 (클라이언트 견적서 양식) ---------- */
.qm{position:fixed;inset:0;z-index:1200;display:grid;place-items:center;padding:24px}
.qm[hidden]{display:none}
.qm-dim{position:absolute;inset:0;background:rgba(14,18,24,.55);backdrop-filter:blur(3px)}
.qm-panel{position:relative;width:min(820px,100%);max-height:calc(100vh - 48px);display:flex;flex-direction:column;background:#fff;border-radius:var(--r-l);overflow:hidden;box-shadow:var(--sh-l)}
.qm-bar{display:flex;align-items:center;justify-content:space-between;padding:14px 20px;border-bottom:1px solid var(--line-2)}
.qm-bar strong{font-size:15px;font-weight:800}
.qm-acts{display:flex;align-items:center;gap:8px}
.qm-x{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;color:var(--tx-45)}
.qm-x:hover{background:var(--bg-2);color:var(--tx)}
.qm-doc{overflow:auto;padding:30px 36px;font-size:12.5px;color:#222}
.qd-title{text-align:center;font-size:26px;font-weight:800;letter-spacing:.6em;margin:0 0 22px}
.qd-top{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:14px}
.qd-tbl{width:100%;border-collapse:collapse}
.qd-tbl th,.qd-tbl td{border:1px solid #bbb;padding:6px 8px;text-align:left;vertical-align:top}
.qd-tbl th{background:#f3f5f4;font-weight:700;white-space:nowrap;width:1%}
.qd-sum{margin:6px 0 12px;padding:10px 12px;border:2px solid #222;font-size:14px;font-weight:700}
.qd-sum b{font-size:16px}
.qd-items th{text-align:center;background:#e8f3ec}
.qd-items td.n{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.qd-items tr.grp td{background:#f7f9f8;font-weight:700}
.qd-items tr.tot td{font-weight:800;background:#f3f5f4}
.qd-note{margin-top:12px}
.qd-note td{line-height:1.7}
.qd-warn{margin-top:10px;color:var(--coral);font-size:11.5px}

/* ---------- 준비 중 ---------- */
.od-ready{padding:120px 0;text-align:center}
.od-ready h1{font-size:24px;font-weight:800}
.od-ready p{margin-top:14px}
.od-ready a{color:var(--pri);font-weight:700}

/* ---------- 반응형 ---------- */
@media (max-width:1280px){
  .od3{grid-template-columns:200px minmax(0,1fr) 300px;gap:20px}
}
@media (max-width:1180px){
  .od3{grid-template-columns:minmax(0,1fr) 300px}
  .od-side{grid-column:1/-1;position:static}
  .side-in{display:grid;grid-template-columns:160px minmax(0,1fr);column-gap:22px;align-items:start}
  .side-ph{grid-row:span 5;aspect-ratio:1}
  .od-side .eyebrow{margin-top:0}
  .side-guide{width:auto;justify-self:start}
  .est-panel{position:sticky}
  .est-box{max-width:none}
}
@media (max-width:900px){
  .od3{grid-template-columns:1fr}
  .est-panel{position:static}
}
@media (max-width:640px){
  .side-in{grid-template-columns:96px minmax(0,1fr);column-gap:14px}
  .od-side .desc,.side-guide,.od-side .eyebrow,.od-side h2,.side-ph .eco-mark{display:none}
  .side-in{align-items:center}
  .od-head h1{font-size:23px}
  .blk > h2{flex-wrap:wrap}
  .blk > h2 .paper-links{width:100%;margin-left:0;order:3;padding-top:4px}
  .fin-opt{grid-template-columns:1fr}
  .rush{grid-template-columns:20px minmax(0,1fr)}
  .rush .rr{grid-column:2}
  .qm{padding:0}
  .qm-panel{max-height:100vh;border-radius:0;height:100%}
  .qm-doc{padding:20px 16px}
  .qd-top{grid-template-columns:1fr}
}

/* 견적서 인쇄 — 모달 문서만 출력 (기존 est-box 인쇄 규칙을 덮어씀) */
@media print{
  body *{visibility:hidden !important}
  .qm,.qm *{visibility:visible !important}
  .qm{position:absolute;inset:0;display:block;padding:0}
  .qm-dim,.qm-bar{display:none !important}
  .qm-panel{box-shadow:none;border-radius:0;max-height:none;width:100%}
  .qm-doc{overflow:visible;padding:0}
  .est-box{position:static}
}

/* 안내 토스트 (DB 단계에서 연결될 버튼) */
.od-toast{
  position:fixed;left:50%;bottom:32px;z-index:1300;transform:translate(-50%,16px);opacity:0;pointer-events:none;
  padding:12px 20px;border-radius:99px;background:var(--tx);color:#fff;font-size:13px;font-weight:600;
  box-shadow:var(--sh-l);transition:.3s var(--ease);
}
.od-toast.on{opacity:1;transform:translate(-50%,0)}
@media (max-width:640px){.od-toast{bottom:92px}}