/* ===== 제품 허브 · 제품 상세 · 가격 페이지 (2026-10-04) — tools/build_products.py 생성 페이지 전용 =====
   공용 style.css 토큰(--ink/--paper/--accent…) 위에 얹는다. 원칙:
   한 컨테이너(.wrap) · 섹션 머리(.ps-head) 한 벌 · 간격 8의 배수 · 본문 14px 이상 · 글자 대비 4.5:1 이상
   (accent #4C8567 은 글자색으로 3.8:1 이라 글자에는 --accent-dark, 어두운 바탕에는 --accent-l 을 쓴다) */

.prp{--r:12px;--card-bd:rgba(46,125,91,.24);--shadow:0 18px 36px -28px rgba(24,33,27,.45)}
.prp section:not(.hero)+section{border-top:0}
.prp section:not(.hero){padding:clamp(56px,7vw,104px) 0}
.prp section:nth-of-type(even):not(.ph-custom):not(.ps-cta){background:var(--paper2)}
.prp .faq{margin:0;max-width:880px}

/* 버튼 — 면 색은 style.css '버튼 계약'(--btn-bg)이 정한다. 여기서 다시 칠하지 않는다(예전 .prp .btn = --accent-l 이 밝은 바탕에서 1.58:1) */
.prp .btn-ghost{color:var(--ink)}
.prp .btn-ghost.on-dark{color:var(--cream)}
.prp .btn-ghost.on-dark:hover{background:rgba(244,245,241,.08)}

/* 섹션 머리 */
.ps-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:clamp(24px,3vw,40px)}
.ps-head .idxlabel{display:block;margin-bottom:10px;font-size:12px}
.ps-head h2{font-family:var(--serif);font-weight:700;font-size:clamp(26px,3.2vw,42px);line-height:1.2;letter-spacing:-.015em}
.ps-head h2 i{font-style:normal;color:var(--accent-dark)}
.ps-head p{margin-top:12px;color:var(--muted);max-width:62ch;font-size:15.5px;line-height:1.75}
.ps-link{flex-shrink:0;display:inline-flex;align-items:center;min-height:44px;font-weight:600;font-size:14.5px;color:var(--accent-dark);border-bottom:1px solid currentColor}
.ps-link:hover{color:var(--ink)}
.muted{color:var(--muted);font-size:14.5px;line-height:1.7;margin-top:12px}

/* 배지 · 칩 */
.badge{display:inline-flex;align-items:center;gap:4px;font-size:12.5px;font-weight:700;line-height:1;letter-spacing:.02em;padding:6px 10px;border-radius:20px;white-space:nowrap}
.badge-main{background:var(--ink);color:var(--cream)}
.badge-recommend{background:var(--gold);color:var(--ink)}
.badge-ha{background:rgba(30,90,64,.1);color:var(--accent-dark);border:1px solid rgba(30,90,64,.35)}
.badge-line{border:1px solid rgba(24,33,27,.22);color:var(--ink2)}
.amt{font-weight:700;color:var(--ink);white-space:nowrap}
.vat{font-size:12.5px;font-weight:500;color:var(--muted);white-space:nowrap}
.ask{font-weight:600;color:var(--ink2)}

/* 페이지 머리 공통(허브·가격) */
.prp .page-head .idxlabel{color:var(--accent-dark)}
.prp .page-head h1{font-size:clamp(32px,3.7vw,54px)}
.prp .page-head p{font-size:clamp(15px,1.25vw,17.5px)}
.jump{display:flex;flex-wrap:wrap;gap:8px;margin-top:26px}
.jump a{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border:1px solid var(--field);border-radius:24px;font-size:14px;font-weight:600;color:var(--ink2);background:rgba(244,245,241,.6);transition:border-color .2s,background .2s}
.jump a:hover{border-color:var(--accent-dark);background:var(--paper2)}
.legacy-anchor{display:block;height:0;overflow:hidden}
/* 허브: 첫 화면(1440×900)에 주력 모델 사진이 들어오도록 머리를 줄인다 */
.prp section.ph-head{padding-bottom:28px}
.prp .ph-head h1{font-size:clamp(32px,3.5vw,50px)}
.ph-head .jump{margin-top:20px}
.prp section.ph-featured{padding-top:28px}
.ph-featured .ps-head{margin-bottom:20px}
.legacy-note{display:none}
.legacy-gone .legacy-note{display:block;margin-top:16px;padding:12px 16px;border-left:3px solid var(--gold);background:rgba(201,164,92,.14);color:var(--ink);font-size:15px}
.legacy-note a{color:var(--accent-dark);text-decoration:underline}

/* ── 허브: 주력 모델 ── */
.fc-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.fc{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1fr);background:var(--paper);border:1px solid var(--card-bd);border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow)}
.fc:first-child{border-color:var(--ink)}
.fc-im{position:relative;display:block;background:var(--tile);min-height:100%}
.fc-im img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.fc-body{display:flex;flex-direction:column;gap:10px;padding:clamp(20px,2.4vw,32px)}
.fc-no{font-family:var(--serif);font-size:13.5px;color:var(--muted);margin-left:auto}
.fc h3{font-family:var(--serif);font-weight:700;font-size:clamp(24px,2.4vw,32px);line-height:1.15;margin-top:2px}
.fc h3 a:hover{color:var(--accent-dark)}
.fc-tag{font-size:15px;line-height:1.6;color:var(--ink2)}
.fc-hl-t{font-size:13px;font-weight:700;letter-spacing:.06em;color:var(--accent-dark);margin-top:4px}
.fc-hl{list-style:none;display:flex;flex-wrap:wrap;gap:6px}
.fc-hl li{font-size:14px;padding:6px 10px;border-radius:4px;background:var(--paper2);color:var(--ink)}
.fc-price{margin-top:6px}
.fc-cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:auto;padding-top:8px}
.fc-cta .btn,.fc-cta .btn-ghost{min-height:48px;padding:0 22px;justify-content:center}

/* 가격 상자(허브 주력·상세 히어로 공용) */
.pricebox{border:1px solid var(--card-bd);border-radius:var(--r);background:rgba(242,241,238,.45);padding:6px 16px}
.pb-row{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:10px 0}
.pb-row+.pb-row{border-top:1px solid var(--line)}
.pb-k{font-size:14px;font-weight:700;color:var(--accent-dark);flex-shrink:0}
.pb-v{text-align:right;font-size:16px}
.pb-v .amt{font-size:19px}
.pb-note{font-size:14px;color:var(--muted);padding:2px 0 10px;border-top:1px solid var(--line);padding-top:10px}
.pb-note a{color:var(--accent-dark);text-decoration:underline;text-underline-offset:3px}

/* ── 허브: 제품 그리드 ── */
.filters{display:flex;flex-wrap:wrap;gap:8px;margin:-8px 0 0}
.fchip{font:inherit;display:inline-flex;align-items:center;gap:7px;min-height:44px;padding:0 16px;border-radius:24px;border:1px solid var(--field);background:transparent;color:var(--ink2);font-size:14px;font-weight:600;cursor:pointer;transition:background .2s,border-color .2s,color .2s}
.fchip b{font-family:var(--serif);font-weight:700;color:var(--accent-dark)}
.fchip:hover{border-color:var(--accent-dark)}
.fchip[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--cream)}
.fchip[aria-pressed="true"] b{color:var(--accent-l)}
.fchip:focus-visible{outline:2px solid var(--accent-dark);outline-offset:3px}
.fcount{min-height:1.5em;margin:12px 0 18px;font-size:14px;color:var(--muted)}
.pc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px 20px}
.pc{background:var(--paper);border:1px solid var(--card-bd);border-radius:var(--r);overflow:hidden;transition:border-color .25s,transform .25s,box-shadow .25s}
.pc[hidden]{display:none}
.pc>a{display:flex;flex-direction:column;height:100%}
.pc:hover{border-color:var(--accent-dark);transform:translateY(-3px);box-shadow:var(--shadow)}
.pc-im{position:relative;margin:0;aspect-ratio:4/5;overflow:hidden;background:var(--tile)}
.pc-im img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.16,1,.3,1)}
.pc:hover .pc-im img{transform:scale(1.03)}
.pc-no{position:absolute;left:10px;top:10px;font-family:var(--serif);font-size:14px;line-height:1;color:var(--cream);background:rgba(24,33,27,.78);padding:6px 9px;border-radius:3px}
.pc-badge{position:absolute;right:10px;top:10px}
.pc-body{display:flex;flex-direction:column;gap:8px;padding:16px 18px 18px;flex:1}
.pc-chips{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.pc-body h3{font-family:var(--serif);font-weight:700;font-size:21px;line-height:1.25;color:var(--ink)}
.pc:hover h3{color:var(--accent-dark)}
.pc-tag{font-size:14px;line-height:1.6;color:var(--muted)}
.pc-price{display:grid;gap:4px;margin-top:auto;padding-top:12px;border-top:1px solid var(--line)}
.pc-price div{display:flex;justify-content:space-between;align-items:baseline;gap:8px;font-size:14px}
.pc-price dt{font-weight:700;color:var(--accent-dark);flex-shrink:0}
.pc-price dd{text-align:right}
.pc-more{font-size:14px;font-weight:700;color:var(--accent-dark);margin-top:4px}

/* ── 허브: 커스텀 ── */
.ph-custom{background:var(--ink);color:var(--cream)}
.cu-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(28px,5vw,72px);align-items:center}
.cu-txt .idxlabel{color:var(--accent-l);font-size:12px}
.cu-txt h2{font-family:var(--serif);font-weight:700;font-size:clamp(28px,3.4vw,46px);line-height:1.18;margin-top:10px}
.cu-txt h2 i{font-style:normal;color:var(--accent-l)}
.cu-txt>p{color:#D4D8D1;font-size:15.5px;line-height:1.8;margin-top:16px;max-width:52ch}
.cu-list{list-style:none;display:grid;gap:12px;margin-top:22px}
.cu-list li{display:grid;gap:4px;padding-left:16px;border-left:2px solid var(--accent-l)}
.cu-list b{font-size:15.5px;color:var(--cream)}
.cu-list span{font-size:14px;line-height:1.65;color:#C8CCC6}
.cu-price{margin-top:22px;font-size:15px}
.cu-price .pb-k{color:var(--accent-l);margin-right:8px}
.cu-price .ask{color:var(--cream)}
.cu-txt .fc-cta{margin-top:22px}
.cu-mosaic{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.cu-mosaic .pg-item{aspect-ratio:1/1}
.cu-mosaic .pg-item:nth-child(even){transform:translateY(24px)}

/* ── 허브: 신규 컨셉 ── */
.cc-group+.cc-group{margin-top:clamp(40px,5vw,64px)}
.cc-gh{display:flex;align-items:baseline;gap:8px 20px;flex-wrap:wrap;margin-bottom:18px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.cc-gh h3{font-family:var(--serif);font-weight:700;font-size:clamp(20px,2vw,24px);line-height:1.3}
.cc-gh h3 span{font-family:inherit;font-size:.7em;font-weight:600;color:var(--muted);margin-left:4px}
.cc-gh p{font-size:15px;line-height:1.6;color:var(--ink2);flex:1 1 320px}
.cc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.cc{display:flex;flex-direction:column;background:var(--paper);border:1px dashed rgba(24,33,27,.3);border-radius:var(--r);overflow:hidden}
.cc-im{position:relative;margin:0;aspect-ratio:4/5;background:var(--tile);overflow:hidden}  /* 표지가 4:5 라 4:3 cover 는 부스 지붕·바닥을 잘랐다 */
.cc-im img{width:100%;height:100%;object-fit:cover}
.cc-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;text-align:center;padding:16px;
  background:repeating-linear-gradient(135deg,#E9E8E5 0 14px,#E3E2DF 14px 28px)}
.cc-mark{font-family:var(--serif);font-size:20px;font-weight:700;color:var(--ink2);letter-spacing:.01em}
.cc-pending{font-size:13px;font-weight:600;color:var(--ink2);background:rgba(244,245,241,.85);padding:5px 10px;border-radius:3px}
.cc-body{display:flex;flex-direction:column;gap:8px;padding:16px 18px 18px;flex:1}
.cc h4{font-family:var(--serif);font-weight:700;font-size:20px;line-height:1.25}
.cc-pts{list-style:none;display:grid;gap:4px}
.cc-pts li{font-size:14px;line-height:1.55;color:var(--ink2);padding-left:14px;position:relative}
.cc-pts li::before{content:"";position:absolute;left:0;top:.62em;width:6px;height:6px;border-radius:50%;background:var(--accent-dark)}
.cc-fit{font-size:14px;line-height:1.6;color:var(--muted)}
.cc-fit b{color:var(--ink2);margin-right:4px}
.cc-price{margin-top:auto;padding-top:10px;border-top:1px solid var(--line);font-size:14.5px}

/* ── 상세: 히어로 ── */
section.pd-hero{padding:clamp(128px,15vh,150px) 0 clamp(48px,6vw,80px)}
.crumb{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:14px;color:var(--muted);margin-bottom:22px}
.crumb a{color:var(--accent-dark);text-decoration:underline;text-underline-offset:3px;display:inline-flex;min-height:32px;align-items:center}
@media(max-width:880px){.crumb a{min-height:44px}.crumb{margin-bottom:16px}.ptable tbody th a:not(.pt-q){display:inline-flex;align-items:center;min-height:44px}}
.crumb [aria-current]{color:var(--ink2);font-weight:600}
.pd-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.04fr);gap:clamp(28px,4.5vw,64px);align-items:start}
.pd-cover{position:relative;margin:0;aspect-ratio:5/6;border-radius:var(--r);overflow:hidden;background:var(--tile);box-shadow:0 40px 70px -40px rgba(24,33,27,.55)}
.pd-cover img{width:100%;height:100%;object-fit:cover}
.pd-info{display:flex;flex-direction:column;gap:14px;padding-top:4px}
.pd-info .idxlabel{font-size:12px}
.pd-info h1{font-family:var(--serif);font-weight:700;font-size:clamp(32px,3.5vw,50px);line-height:1.18;letter-spacing:-.02em}
.pd-tagline{font-family:var(--serif);font-size:clamp(18px,1.6vw,22px);line-height:1.5;color:var(--ink2)}
.pd-chips{display:flex;flex-wrap:wrap;gap:6px}
.pd-lead{font-size:16px;line-height:1.85;color:var(--ink2);max-width:58ch}
.pd-info .pricebox{margin-top:6px}
.pd-jump{display:flex;flex-wrap:wrap;gap:6px 16px}
.pd-jump a{display:inline-flex;align-items:center;min-height:40px;font-size:14.5px;font-weight:600;color:var(--accent-dark);text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(30,90,64,.4)}
.pd-jump a:hover{color:var(--ink)}
.pd-cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:4px}
.pd-cta .btn,.pd-cta .btn-ghost{min-height:52px;padding:0 26px;justify-content:center}
/* 상세 첫 화면(880px 이하): h1 부제 아래 가격 한 줄 + 이 제품 견적 링크(D07) */
.pd-sum{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:2px 16px;padding:6px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.pd-sum-p{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 10px;font-size:16px;padding:6px 0}
.pd-sum-k{font-size:14px;font-weight:700;color:var(--accent-dark)}
.pd-sum .amt{font-size:19px;font-weight:700;color:var(--ink)}
.pd-sum .ask{font-size:17px;font-weight:700;color:var(--ink)}
.pd-sum-q{display:inline-flex;align-items:center;gap:6px;min-height:44px;font-size:15px;font-weight:700;color:var(--accent-dark);text-decoration:underline;text-underline-offset:4px;text-decoration-color:rgba(30,90,64,.45)}
.pd-sum-q:hover{color:var(--ink)}
/* 넓은 화면은 아래 가격 상자가 이미 첫 화면에 있다 — 한 줄 요약은 표지가 위에 쌓이는 880px 이하에서만 */
@media(min-width:881px){.pd-sum{display:none}}
/* 가격표 구매 행: 이 제품 견적 링크(D01) */
.ptable tbody th .pt-q{display:flex;align-items:center;width:max-content;min-height:44px;margin-bottom:-12px;font-size:14px;font-weight:600;color:var(--accent-dark);text-decoration:none}
.ptable tbody th .pt-q:hover{text-decoration:underline;text-underline-offset:3px}

/* ── 상세: 포인트 ── */
.pts{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;counter-reset:pt}
.pts li{counter-increment:pt;display:flex;flex-direction:column;gap:8px;padding:22px 20px;background:rgba(244,245,241,.6);border-top:2px solid var(--accent-dark);border-radius:0 0 var(--r) var(--r)}
.pts li::before{content:"0" counter(pt);font-family:var(--serif);font-size:15px;color:var(--accent-dark)}
.pts b{font-family:var(--serif);font-weight:700;font-size:19px;line-height:1.35}
.pts span{font-size:15px;line-height:1.7;color:var(--muted)}

/* ── 상세: 하이앵글 개념도 ── */
.ha-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,5vw,72px);align-items:center}
.ha-grid h2{font-family:var(--serif);font-weight:700;font-size:clamp(26px,3vw,40px);line-height:1.2;margin-top:10px}
.ha-grid p{font-size:15.5px;line-height:1.8;color:var(--ink2);margin-top:14px;max-width:52ch}
.ha-grid .ha-note{font-size:14px;color:var(--muted)}
.ha-fig{margin:0;padding:clamp(16px,2vw,28px);background:var(--paper);border:1px solid var(--card-bd);border-radius:var(--r)}
.ha-svg{display:block;width:100%;height:auto;color:var(--ink)}
.ha-svg .cone{fill:rgba(46,125,91,.2)}
.ha-svg .ray{stroke:var(--accent-dark);stroke-width:1.6;stroke-dasharray:5 5;fill:none}
.ha-svg .cam{fill:var(--ink)}
.ha-svg .lens{fill:var(--gold);stroke:var(--ink);stroke-width:1.5}
.ha-svg .ppl{fill:rgba(24,33,27,.55)}
.ha-svg .lbl{font-family:var(--sans);font-size:13px;font-weight:600;fill:var(--ink)}

/* ── 갤러리 + 라이트박스 ── */
/* 행 높이 = 열 너비(정사각 칸). 2×2·가로 2칸 칸이 섞여도 줄이 맞도록 aspect-ratio 대신 grid-auto-rows 로 잡는다 */
.pg-grid{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:calc((min(100vw,var(--maxw)) - 56px - 30px)/4);gap:10px}
.pg-item{position:relative;display:block;overflow:hidden;border-radius:10px;background:var(--tile);cursor:zoom-in}
.pg-w2{grid-column:span 2}
.cu-mosaic .pg-item,.pg-mini .pg-item{aspect-ratio:1/1}
.ba-row .pg-item{aspect-ratio:4/5}
.pg-item img{width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.16,1,.3,1)}
.pg-item:hover img{transform:scale(1.04)}
.pg-item:focus-visible{outline:3px solid var(--accent-dark);outline-offset:2px}
.pg-wide{grid-column:span 2;grid-row:span 2}
.pg-cap{position:absolute;left:0;right:0;bottom:0;padding:22px 10px 8px;font-size:13.5px;font-weight:600;line-height:1.35;color:var(--cream);
  background:linear-gradient(180deg,rgba(24,33,27,0),rgba(24,33,27,.78));opacity:0;transition:opacity .25s}
.pg-item:hover .pg-cap,.pg-item:focus-visible .pg-cap{opacity:1}
.pg-item .render-tag{bottom:auto;top:8px}
.ba-item .render-tag{top:auto;bottom:8px}
.pg-mini{grid-template-columns:repeat(3,1fr);grid-auto-rows:auto}

html.lb-open,html.lb-open body{overflow:hidden}
.lb{position:fixed;inset:0;z-index:400;display:grid;grid-template-columns:64px 1fr 64px;grid-template-rows:56px 1fr;background:rgba(12,17,14,.94);color:var(--cream);touch-action:pinch-zoom}
.lb[hidden]{display:none}
.lb-top{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;padding:0 8px 0 18px}
.lb-count{font-family:var(--serif);font-size:15px;letter-spacing:.08em;color:#D4D8D1}
.lb button{font:inherit;background:transparent;border:0;color:var(--cream);cursor:pointer;min-width:48px;min-height:48px;border-radius:50%;display:flex;align-items:center;justify-content:center}
.lb button:hover{background:rgba(244,245,241,.1)}
.lb button:focus-visible{outline:2px solid var(--accent-l);outline-offset:2px}
.lb-close{font-size:22px}
.lb-prev,.lb-next{align-self:center;justify-self:center;font-size:34px;line-height:1}
.lb-fig{margin:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;min-width:0;min-height:0;padding:0 0 18px}
.lb-fig img{max-width:100%;max-height:calc(100vh - 140px);max-height:calc(100dvh - 140px);width:auto;height:auto;object-fit:contain;border-radius:2px;user-select:none;-webkit-user-drag:none;transition:opacity .2s}
.lb-fig img.loading{opacity:.35}
.lb-cap{font-size:15px;line-height:1.5;color:#E0E3DD;text-align:center;max-width:70ch;padding:0 8px}

/* ── 상세: 이런 곳 · 진행 · 사양 ── */
.fit-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,72px)}
.fit-grid h2{font-family:var(--serif);font-weight:700;font-size:clamp(24px,2.6vw,34px);line-height:1.25;margin:10px 0 18px}
.fit-list{list-style:none;display:flex;flex-wrap:wrap;gap:8px}
.fit-list li{font-size:15px;padding:9px 14px;border-radius:24px;background:var(--paper);border:1px solid var(--card-bd)}
.spec-note{margin-top:24px;padding:18px 20px;border-radius:var(--r);background:var(--paper);border:1px solid var(--card-bd)}
.spec-note b{display:block;font-size:14px;letter-spacing:.04em;color:var(--accent-dark);margin-bottom:6px}
.spec-note p{font-size:15px;line-height:1.75;color:var(--ink2)}
.how{list-style:none;counter-reset:hw;display:grid;gap:0}
.how li{counter-increment:hw;display:grid;grid-template-columns:40px 1fr;column-gap:12px;padding:14px 0;border-bottom:1px solid var(--line)}
.how li::before{content:counter(hw,decimal-leading-zero);grid-row:1/3;font-family:var(--serif);font-size:16px;color:var(--accent-dark);padding-top:1px}
.how b{font-size:16px;color:var(--ink)}
.how span{font-size:15px;line-height:1.7;color:var(--muted)}

/* ── 상세: 이야기·사례 카드 ── */
.st-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.st-card{display:flex;flex-direction:column;gap:8px;padding:20px;background:var(--paper);border:1px solid var(--card-bd);border-radius:var(--r);transition:border-color .2s,transform .2s,box-shadow .2s}
.st-card:hover{border-color:var(--accent-dark);transform:translateY(-2px);box-shadow:var(--shadow)}
.st-type{align-self:flex-start;font-size:12.5px;font-weight:700;letter-spacing:.06em;color:var(--accent-dark);border:1px solid rgba(30,90,64,.35);border-radius:20px;padding:4px 10px}
.st-card b{font-family:var(--serif);font-weight:700;font-size:18px;line-height:1.4;color:var(--ink)}
.st-desc{font-size:14px;line-height:1.65;color:var(--muted)}
.st-more{margin-top:16px}
.st-more summary{display:inline-flex;align-items:center;min-height:44px;cursor:pointer;font-weight:700;font-size:15px;color:var(--accent-dark);list-style:none}
.st-more summary::-webkit-details-marker{display:none}
.st-more summary::after{content:"+";margin-left:8px;font-size:18px}
.st-more[open] summary::after{content:"−"}
.st-more .st-grid{margin-top:12px}

/* ── 가격 표 ── */
.price-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:clamp(20px,3.5vw,48px);align-items:start}
.ptable{width:100%;border-collapse:collapse;background:var(--paper);border:1px solid var(--card-bd);border-radius:var(--r);overflow:hidden}
.ptable th,.ptable td{padding:16px 18px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line)}
.ptable tr:last-child th,.ptable tr:last-child td{border-bottom:0}
.ptable thead th{font-size:13.5px;font-weight:700;letter-spacing:.06em;color:var(--accent-dark);background:rgba(242,241,238,.5)}
.ptable tbody th{font-weight:700;font-size:16px;color:var(--ink);width:62%}
.ptable tbody th a{color:var(--ink);text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(24,33,27,.3)}
.ptable td{text-align:right;font-size:16px;white-space:nowrap}
.ptable td .amt{font-size:19px}
.ptable td .vat{display:block;margin-top:4px}
.pt-unit{display:block;font-weight:500;font-size:14px;color:var(--muted);margin-top:3px}
.pt-note{display:block;font-weight:500;font-size:14px;color:var(--ink2);margin-top:6px}
.inc{list-style:none;display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.inc li{font-size:14px;font-weight:600;padding:5px 9px;border-radius:4px;background:rgba(30,90,64,.1);color:var(--accent-dark)}
.ex-table td.calc{text-align:left;white-space:normal;color:var(--ink2);font-size:15px}
.ex-table tbody th{width:auto}
.ex-table thead th:last-child{text-align:right}
.ex-box{padding:20px 22px;border-radius:var(--r);background:var(--paper);border:1px solid var(--card-bd)}
.ex-box+.ex-box{margin-top:16px}
.ex-box>b{display:block;font-family:var(--serif);font-weight:700;font-size:18px;margin-bottom:10px}
.ex-box p{font-size:15px;line-height:1.75;color:var(--ink2)}
.ex-box p+p{margin-top:8px}
.ex-box a{color:var(--accent-dark);text-decoration:underline;text-underline-offset:3px}
.ex-list,.ask-list{list-style:none;display:grid;gap:0;margin-bottom:10px}
.ex-list li{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px solid var(--line);font-size:15px}
.ex-list b{font-weight:700;white-space:nowrap}
.ask-list li{font-size:15px;line-height:1.6;padding:8px 0 8px 18px;border-bottom:1px solid var(--line);position:relative}
.ask-list li::before{content:"";position:absolute;left:2px;top:1.05em;width:7px;height:7px;border-radius:50%;background:var(--accent-dark)}
.ask-box{background:var(--paper);border:1px solid var(--card-bd);border-radius:var(--r);padding:6px 18px}
.ask-box .pb-v{font-size:17px}

/* ── 가격 페이지 ── */
.sum-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:30px}
.sum{display:flex;flex-direction:column;gap:6px;padding:20px 22px;background:var(--paper);border:1px solid var(--card-bd);border-radius:var(--r);transition:border-color .2s,box-shadow .2s}
.sum:first-child{border-color:var(--ink);box-shadow:var(--shadow)}
.sum:hover{border-color:var(--accent-dark)}
.sum-k{font-size:14px;font-weight:700;color:var(--accent-dark)}
.sum-v{font-size:16px}
.sum-v .amt{font-family:var(--serif);font-size:clamp(28px,3vw,38px);font-weight:700;letter-spacing:-.01em}
.sum-d{font-size:14px;color:var(--muted);line-height:1.55}
.pp-fig{margin:0}
.pp-fig a{position:relative;display:block;aspect-ratio:4/5;max-height:520px;border-radius:var(--r);overflow:hidden;background:var(--tile)}
.pp-fig-sm a{max-width:340px;aspect-ratio:4/5}
.pp-fig img{width:100%;height:100%;object-fit:cover}
.pp-fig figcaption{font-size:14px;color:var(--muted);margin-top:10px}
.year{padding:22px 24px;border-radius:var(--r);background:var(--ink);color:var(--cream)}
.year-t{display:block;font-family:var(--serif);font-weight:700;font-size:20px}
.year p{font-size:15px;line-height:1.7;color:#D4D8D1;margin-top:10px}
.year .muted{color:#B6BBB4;font-size:14px}
.year-cmp{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}
.yc{display:flex;flex-direction:column;gap:4px;padding:14px;border-radius:4px;background:rgba(244,245,241,.07);border:1px solid rgba(244,245,241,.16)}
.yc span{font-size:14px;color:#C8CCC6}
.yc b{font-size:15px}
.yc .amt{font-family:var(--serif);font-size:26px;font-weight:700;color:var(--cream)}
.yc .vat{color:#B6BBB4;display:block}
.yc small{font-size:13px;color:#B6BBB4}
.yc-buy{border-color:var(--accent-l)}
.yc-buy .amt{color:var(--accent-l)}
.neg-list{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:8px}
.neg-list a{display:flex;align-items:center;justify-content:space-between;min-height:52px;padding:0 16px;background:var(--paper);border:1px solid var(--card-bd);border-radius:var(--r);font-weight:600;font-size:15px}
.neg-list a::after{content:"→";color:var(--accent-dark)}
.neg-list a:hover{border-color:var(--accent-dark)}
.notes-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.notes-grid .ex-box+.ex-box{margin-top:0}

/* 4면 랩핑 전·후 */
.ba{margin-bottom:22px}
.ba-head b{font-family:var(--serif);font-weight:700;font-size:19px}
.ba-head p{font-size:15px;line-height:1.7;color:var(--muted);margin-top:4px;max-width:70ch}
.ba-row{display:flex;align-items:center;gap:10px;margin-top:12px}
.ba-item{flex:1;aspect-ratio:4/5;min-width:0}
.ba-arrow{flex:0 0 auto;font-size:26px;color:var(--accent-dark);font-weight:700}
.ba-tag{position:absolute;left:8px;top:8px;font-size:13px;font-weight:700;color:var(--ink);background:var(--paper);border-radius:3px;padding:4px 8px}
.wrap-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,56px);margin-top:28px;align-items:start}
.wrap-txt>p{font-size:15.5px;line-height:1.85;color:var(--ink2)}
.wrap-steps{margin-top:14px}
.wrap-steps li{grid-template-columns:40px 1fr}
.wrap-steps li::before{grid-row:auto}
.wrap-ex-note{margin-top:12px}
.link-list{list-style:none;display:grid;gap:0;margin-top:8px}
.link-list a{display:flex;align-items:center;min-height:46px;border-bottom:1px solid var(--line);font-size:15px;color:var(--ink)}
.link-list a::after{content:"→";margin-left:auto;color:var(--accent-dark)}
.link-list a:hover{color:var(--accent-dark)}

/* CTA 밴드 · 이전/다음 */
.ps-cta .band h2 i{color:var(--accent-l)}
.ps-cta .contacts a:not(.kakao){color:var(--cream)}
.pd-pn{padding:0 0 clamp(40px,6vw,72px)}
.pn-in{display:grid;grid-template-columns:1fr auto 1fr;gap:12px;align-items:stretch}
.pn-in a{display:flex;flex-direction:column;justify-content:center;gap:4px;min-height:72px;padding:12px 18px;border:1px solid var(--card-bd);border-radius:var(--r);background:var(--paper)}
.pn-in a:hover{border-color:var(--accent-dark)}
.pn-in span{font-size:13px;font-weight:700;letter-spacing:.06em;color:var(--accent-dark)}
.pn-in b{font-family:var(--serif);font-weight:700;font-size:17px}
.pn-next{text-align:right}
.pn-all{align-items:center;font-weight:700;font-size:14px;color:var(--ink2)}

/* ── 태블릿 ── */
@media(max-width:1080px){
  .pc-grid{grid-template-columns:repeat(3,1fr)}
  .cc-grid{grid-template-columns:repeat(2,1fr)}
  .fc{grid-template-columns:1fr}
  .fc-im{aspect-ratio:4/3;min-height:0;background:var(--fc-bg,var(--tile))}
  .fc-im img.is-render{object-fit:contain}  /* 16:10 cover 는 세로로 긴 렌더의 머리·발을 잘랐다(V1 #6) — 통째로 + 렌더 가장자리 색 바탕 */
  .st-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:880px){
  .prp section:not(.hero){padding:clamp(44px,10vw,64px) 0}
  .prp section.page-head{padding:112px 0 28px}
  /* .prp section:not(.hero)(0,2,1) 가 section.pd-hero(0,1,1)를 덮어 44px 이 되며 로고와 경로가 겹쳤다(390 실측 1,400px²) — 특이도를 올림 */
  body.prp section.pd-hero{padding:72px 0 40px}
  .ps-head{flex-direction:column;align-items:flex-start;gap:8px}
  .fc-grid,.pd-grid,.ha-grid,.fit-grid,.price-grid,.cu-grid,.wrap-grid,.notes-grid{grid-template-columns:1fr}
  .pc-grid{grid-template-columns:repeat(2,1fr);gap:14px}
  .pd-cover{aspect-ratio:4/5;max-height:62vh}
  .pg-grid{grid-template-columns:repeat(2,1fr);grid-auto-rows:calc((100vw - 44px - 8px)/2);gap:8px}
  .cu-mosaic .pg-item:nth-child(even){transform:none}
  .sum-grid{grid-template-columns:1fr}
  .pp-fig a{max-height:420px}
  .lb{grid-template-columns:1fr;grid-template-rows:56px 1fr 64px}
  .lb-fig{grid-row:2;grid-column:1;padding:0 8px 8px}
  .lb-prev,.lb-next{grid-row:3;align-self:center}
  .lb-prev{grid-column:1;justify-self:start;margin-left:12px}
  .lb-next{grid-column:1;justify-self:end;margin-right:12px}
  .lb-fig img{max-height:calc(100vh - 150px);max-height:calc(100dvh - 150px)}
  .prp .stickybar{--navfg:var(--ink)}
}
/* ── 모바일 ── */
@media(max-width:640px){
  .pc-grid{grid-template-columns:1fr;gap:12px}
  .pc>a{flex-direction:row}
  .pc-im{width:40%;flex-shrink:0;aspect-ratio:auto;min-height:100%}
  .pc-im img{position:absolute;inset:0}
  .pc-body{padding:12px 14px 14px;gap:6px;min-width:0}
  .pc-body h3{font-size:18px}
  .pc-tag{font-size:14px;line-height:1.5}
  .pc-price div{flex-direction:column;align-items:flex-start;gap:0}
  .pc-price dd{text-align:left}
  .pc-no{font-size:13px;padding:5px 7px;left:8px;top:8px}
  .pc-badge{right:auto;left:8px;top:auto;bottom:8px}
  .pc .render-tag{font-size:12px;left:6px;bottom:6px;padding:3px 6px}
  .pc:has(.pc-badge) .render-tag{bottom:auto;top:36px;left:8px}
  /* 신규 컨셉 = 묶음마다 옆으로 넘기는 한 줄(14장을 세로로 쌓으면 11,000px 넘게 길어졌다) — 다음 카드가 18% 보여 넘길 수 있음을 알린다 */
  .cc-grid{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin:0 -22px;padding:0 22px 4px;scroll-padding:0 22px}
  .cc-grid::-webkit-scrollbar{display:none}
  .cc-grid>.cc{flex:0 0 82%;scroll-snap-align:start}
  .st-grid{grid-template-columns:1fr}
  .pg-mini{grid-template-columns:repeat(2,1fr);grid-auto-rows:auto}
  .pg-cap{opacity:1;font-size:13px;padding:18px 8px 6px}
  .ptable th,.ptable td{padding:14px 12px}
  .ptable tbody th{font-size:15px;width:auto}
  .ptable td .amt{font-size:17px}
  .ex-table thead{display:none}
  .ex-table tr{display:grid;grid-template-columns:1fr auto;border-bottom:1px solid var(--line)}
  .ex-table tr:last-child{border-bottom:0}
  .ex-table th,.ex-table td{border:0}
  .ex-table td.calc{grid-column:1/-1;grid-row:2;padding-top:0;font-size:14px}
  .year-cmp{grid-template-columns:1fr}
  .neg-list{grid-template-columns:1fr}
  .ba-row{display:grid;grid-template-columns:1fr 1fr;gap:6px}
  .ba-arrow{display:none}
  .pn-in{grid-template-columns:1fr 1fr}
  .pn-all{grid-column:1/-1;grid-row:2;min-height:48px!important}
  .pd-cta .btn,.pd-cta .btn-ghost,.fc-cta .btn,.fc-cta .btn-ghost{flex:1 1 140px}
  .jump{flex-wrap:nowrap;overflow-x:auto;margin:22px -22px 0;padding:0 22px 4px;scrollbar-width:none}
  .jump::-webkit-scrollbar{display:none}
  .jump a{flex:0 0 auto}
  .filters{flex-wrap:nowrap;overflow-x:auto;margin:-8px -22px 0;padding:0 22px 4px;scrollbar-width:none}
  .filters::-webkit-scrollbar{display:none}
  .fchip{flex:0 0 auto}
}
@media(prefers-reduced-motion:reduce){.pc,.pc-im img,.pg-item img,.st-card{transition:none!important}.pc:hover,.st-card:hover{transform:none}}

/* ===== r4 step 6 — 가격 카드(포함/별도 2열) · 협의 요인 카드 · 설치 조건 표 (BRIEF 2-2 #2·#4·#6, 2-3 #2·#3·#5) =====
   포함과 별도는 서로 다른 목록(data-list="included" / "separate") — 한 목록에 섞지 않는다(03 R5). site-gate 가 대조한다. */
.pkg{background:var(--paper);border:1px solid var(--card-bd);border-radius:var(--r);padding:24px;box-shadow:var(--shadow)}
.pkg-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;padding-bottom:16px;border-bottom:1px solid var(--line)}
.pkg-name{display:flex;flex-direction:column;gap:4px}
.pkg-k{font-size:16px;font-weight:700;color:var(--ink)}
.pkg-u{font-size:14px;color:var(--muted)}
.pkg-v{text-align:right}
.pkg-v .amt{font-size:clamp(30px,3.4vw,40px);letter-spacing:-.02em;line-height:1.1}
.pkg-v .vat{display:block;margin-top:4px}
.ie-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;padding-top:16px}
.ie-t{display:block;font-size:14px;font-weight:700;letter-spacing:.02em;color:var(--accent-dark);margin-bottom:8px}
.ie-out .ie-t{color:var(--ink2)}
.ie-list{list-style:none;display:grid;gap:0}
.ie-list li{font-size:15px;line-height:1.5;padding:8px 0;border-bottom:1px solid var(--line)}
.ie-list li:last-child{border-bottom:0}
.ie-in li{display:flex;gap:10px;align-items:flex-start;font-weight:600;color:var(--ink)}
.ie-ck{flex:0 0 18px;height:18px;margin-top:2px;border-radius:50%;background:var(--accent-dark);position:relative}
.ie-ck::after{content:"";position:absolute;left:6px;top:3px;width:5px;height:9px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.ie-out li{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;color:var(--ink2)}
.ie-l{display:flex;flex-direction:column;gap:2px;font-weight:600;color:var(--ink)}
.ie-l small{font-size:14px;font-weight:500;color:var(--muted)}
.ie-n{font-size:14px;font-weight:500;color:var(--ink2)}
.ie-r{text-align:right;flex-shrink:0}
.ie-r .amt{font-size:16px}
.ie-r .vat{display:block}
.ie-ask{font-size:14px;color:var(--ink2);font-weight:500;max-width:11em;display:inline-block}
.pkg-ask{margin-top:14px;font-size:14.5px;line-height:1.6;color:var(--ink2)}.pkg-ask b{color:var(--ink);margin-right:8px}
.pkg-opt{margin-top:10px;text-align:right;font-size:15px;color:var(--ink2)}.pkg-opt .amt{font-weight:700;color:var(--ink)}
.wrap-4side{display:inline-block;margin-left:4px;font-weight:600;color:var(--ink)}
.pkg-calc{margin-top:16px;padding:14px 16px;border-radius:8px;background:var(--paper2);font-size:15px;line-height:1.7;color:var(--ink2)}
.pt-buy{margin-top:16px}
/* 상세 첫 화면 가격 상자 — 포함 / 별도 두 줄 */
.pb-ie{display:flex;gap:12px;align-items:flex-start;padding:10px 0;border-top:1px solid var(--line)}
.pb-ie .pb-k{min-width:2.6em;padding-top:2px}
.pb-inc{list-style:none;display:flex;flex-wrap:wrap;gap:6px}
.pb-inc li{font-size:14px;font-weight:600;padding:4px 9px;border-radius:6px;background:rgba(30,90,64,.1);color:var(--accent-dark)}
.pb-sep{font-size:14px;line-height:1.6;color:var(--ink2)}
.pb-sep a{color:var(--accent-dark);text-decoration:underline;text-underline-offset:3px}
.fc-sep{font-size:14px;color:var(--ink2);margin-top:-2px}
.fc-sep b{color:var(--ink);margin-right:6px}
/* 협의 제품 — 가격에 영향을 주는 요소 */
.fx-wrap{margin-top:clamp(32px,4vw,48px)}
.fx-t{display:block;font-family:var(--serif);font-weight:700;font-size:clamp(20px,2.2vw,24px);margin-bottom:8px}
.fx-lead{font-size:15px;line-height:1.7;color:var(--ink2);max-width:46em;margin-bottom:16px}
.fx-grid{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.fx{background:var(--paper);border:1px solid var(--card-bd);border-radius:var(--r);padding:18px 20px;display:flex;flex-direction:column;gap:6px}
.fx-no{font-size:13px;font-weight:700;color:var(--accent-dark);letter-spacing:.04em}
.fx b{font-size:17px;color:var(--ink)}
.fx p{font-size:15px;line-height:1.65;color:var(--ink2)}
/* 설치 조건 표 — 아는 값만, 빈 행 없음 */
.ins{margin-top:24px}
.ins-t{display:block;font-size:14px;font-weight:700;letter-spacing:.04em;color:var(--accent-dark);margin-bottom:8px}
.ins-table{width:100%;border-collapse:collapse;background:var(--paper);border:1px solid var(--card-bd);border-radius:var(--r);overflow:hidden}
.ins-table th,.ins-table td{padding:12px 16px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line);font-size:15px;line-height:1.6}
.ins-table tr:last-child th,.ins-table tr:last-child td{border-bottom:0}
.ins-table th{width:9.5em;font-weight:700;color:var(--ink);background:rgba(242,241,238,.6)}
.ins-table td{color:var(--ink2)}
.ins-note{font-size:14px;line-height:1.6;color:var(--muted);margin-top:8px}
@media(max-width:880px){.fx-grid{grid-template-columns:1fr 1fr}}
@media(max-width:640px){
  .pkg{padding:18px 16px}
  .pkg-head{flex-direction:column;align-items:flex-start}
  .pkg-v{text-align:left}
  .pkg-opt{text-align:left}
  .ie-grid{grid-template-columns:1fr;gap:16px}
  .fx-grid{grid-template-columns:1fr}
  .ins-table th{width:7em}
  .ins-table th,.ins-table td{padding:10px 12px}
}
/* 좁은 화면: 상세 표지를 화면 높이의 40%로 묶어(비율 그대로, 가운데) 제품 이름·가격·견적 링크가 첫 화면에 들어오게(D07) */
@media(max-width:560px){.pd-cover{max-height:40vh;margin-inline:auto}.pd-info{gap:10px}}
/* 주요 버튼 글자가 두 줄로 꺾이지 않게(D06) — 글자 폭보다 좁아지면 다음 줄로, 380px 이하 상세 버튼은 한 줄에 하나씩 */
.pd-cta .btn,.pd-cta .btn-ghost,.fc-cta .btn,.fc-cta .btn-ghost{white-space:nowrap;text-align:center;justify-content:center}
@media(max-width:380px){.pd-cta .btn,.pd-cta .btn-ghost{flex:1 1 100%}}

/* ── 2026-10-20 포토키오스크: 놓는 방식(삼각대형·선반형) · 매장 설치 예시(연출 렌더) ── */
.cf-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.cf-item{margin:0;display:flex;flex-direction:column;background:var(--paper);border:1px solid var(--card-bd);border-radius:var(--r);overflow:hidden}
.cf-img{position:relative;aspect-ratio:4/5;background:var(--tile)}
.cf-img img{width:100%;height:100%;object-fit:cover;display:block}
.cf-img .render-tag{top:auto;bottom:10px;left:10px}
.cf-item figcaption{display:flex;flex-direction:column;gap:8px;padding:20px 22px 24px}
.cf-item figcaption b{font-family:var(--serif);font-weight:700;font-size:20px;line-height:1.35;color:var(--ink)}
.cf-item figcaption span{font-size:15px;line-height:1.7;color:var(--muted)}
.stg-grid{grid-template-columns:repeat(3,1fr);grid-auto-rows:auto}
.stg-grid .pg-item{aspect-ratio:4/3}
.stg-grid .pg-cap{opacity:1}          /* 연출 렌더 표기는 마우스를 올리지 않아도 늘 보여야 한다(실사례 오인 방지) */
@media (max-width:880px){.stg-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.cf-grid{grid-template-columns:1fr;gap:16px}.stg-grid{grid-template-columns:1fr}}