/* ============================================================
   제품 상세 — 요청사항 8단 구조
   ============================================================ */

/* 브레드크럼 */
.crumb{padding-top:96px;padding-bottom:18px;font-size:12px;color:var(--tx-mute);background:var(--bg-soft)}
.crumb .wrap{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.crumb a:hover{color:var(--gold-deep)}
.crumb span{opacity:.4}
.crumb b{color:var(--tx);font-weight:500}

/* ── 1단: 히어로 ─────────────────── */
.pd-hero{background:var(--bg-soft);padding-bottom:clamp(46px,7vw,90px)}
.pd-hero-in{display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(28px,4.4vw,64px);align-items:start}

/* 갤러리 (최대 5장 — 요청사항 11) */
.pd-gal{position:sticky;top:98px}
.gsl-wrap{position:relative;aspect-ratio:1;background:#fff;overflow:hidden;border:1px solid var(--line)}
.gsl{position:absolute;inset:0;opacity:0;transition:opacity .5s cubic-bezier(.2,.8,.2,1)}
.gsl.on{opacity:1}
.gsl img{width:100%;height:100%;object-fit:contain;padding:9%}
.gth-wrap{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-top:8px}
.gth{aspect-ratio:1;border:1px solid var(--line);background:#fff;padding:0;overflow:hidden;transition:.3s}
.gth.on{border-color:var(--gold);border-width:1.5px}
.gth:hover{border-color:var(--gold)}
.gth img{width:100%;height:100%;object-fit:contain;padding:12%}

/* 구매영역 */
.pd-buy{padding-top:6px}
.pdp-cat{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-deep);font-weight:700}
.pd-buy h1{font-size:clamp(24px,3.1vw,36px);margin:12px 0 6px;line-height:1.3}
.pdp-en{font-family:var(--fd);font-size:14.5px;letter-spacing:.08em;color:var(--tx-mute);font-style:italic}
.pdp-catch{margin-top:16px;font-size:15px;color:var(--tx-sub);line-height:1.85}

.pdp-price{display:flex;align-items:baseline;gap:11px;flex-wrap:wrap;
  margin:24px 0 22px;padding-bottom:22px;border-bottom:1px solid var(--line)}
.pdp-was{font-size:15px;color:var(--tx-mute);text-decoration:line-through}
.pdp-now{font-size:clamp(26px,3.2vw,34px);font-weight:700;letter-spacing:-.03em}
.pdp-off{font-size:12.5px;font-weight:700;color:#fff;background:var(--c-retino);padding:4px 9px}

.pdp-info{border-top:1px solid var(--line)}
.pdp-row{display:flex;justify-content:space-between;gap:16px;padding:12px 2px;
  border-bottom:1px solid var(--line);font-size:13.5px}
.pdp-row span{color:var(--tx-sub)}
.pdp-row b{font-weight:600;text-align:right}
.pdp-row em{font-style:normal;color:var(--tx-mute);font-weight:400;font-size:12.5px}

/* 구매 옵션 (구독/1회) */
.pdp-opt{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:24px}
.opt{display:block;cursor:pointer;position:relative}
.opt input{position:absolute;opacity:0;pointer-events:none}
.opt-b{display:block;border:1px solid var(--line);padding:15px 16px;background:#fff;transition:.3s}
.opt-b b{display:block;font-size:14px;margin-bottom:4px}
.opt-b em{display:block;font-style:normal;font-size:12px;color:var(--tx-sub)}
.opt input:checked + .opt-b{border-color:var(--gold);box-shadow:inset 0 0 0 1px var(--gold)}
.opt input:disabled + .opt-b{opacity:.42;cursor:not-allowed}

/* 수량 */
.pdp-qty{display:flex;align-items:center;gap:14px;margin-top:22px;
  padding-top:22px;border-top:1px solid var(--line)}
.pdp-qty > span{font-size:13.5px;color:var(--tx-sub)}
.qty{display:flex;align-items:center;border:1px solid var(--line);background:#fff}
.qty button{width:38px;height:40px;font-size:16px;color:var(--tx-sub);transition:.2s}
.qty button:hover{background:var(--bg-soft);color:var(--tx)}
.qty input{width:44px;height:40px;border:0;text-align:center;font-family:inherit;
  font-size:14px;font-weight:600;background:transparent;color:var(--tx)}
.pdp-total{margin-left:auto;font-size:19px;font-weight:700;letter-spacing:-.02em}

.pdp-cta{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:20px}
.pdp-cta .btn{justify-content:center;padding:17px 20px}
.ai-note{margin-top:16px;font-size:11.5px;color:var(--tx-mute);line-height:1.7}

/* ── 섹션 내비 ───────────────────── */
.pd-nav{position:sticky;top:78px;z-index:80;background:rgba(255,255,255,.94);
  backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.pd-nav .wrap{display:flex;gap:clamp(14px,2.2vw,32px);overflow-x:auto;
  scrollbar-width:none;padding-block:0}
.pd-nav .wrap::-webkit-scrollbar{display:none}
.pd-nav a{font-size:13px;font-weight:500;color:var(--tx-sub);padding:17px 0;
  white-space:nowrap;border-bottom:2px solid transparent;transition:.25s}
.pd-nav a:hover{color:var(--tx);border-bottom-color:var(--gold)}

/* ── 2~6단 본문 ─────────────────── */
.pd-body{padding-block:clamp(48px,7vw,96px)}
.pd-sec{padding-block:clamp(34px,5vw,64px);border-bottom:1px solid var(--line)}
.pd-sec:last-child{border-bottom:0}
.pd-sec-h{margin-bottom:26px}
.pd-sec-h h2{font-size:clamp(20px,2.5vw,29px);line-height:1.4}
.pd-sec-b{max-width:74ch}
.pd-sec-b p{font-size:15px;color:var(--tx-sub);line-height:2;margin-bottom:14px}
.pd-sec-b p.note{font-size:12.5px;color:var(--tx-mute);line-height:1.85}
.pd-sec-b .dl{margin-top:18px;border-top:1px solid var(--line)}
.pd-sec-b .dl li{font-size:14px;color:var(--tx-sub);padding:12px 0 12px 18px;
  border-bottom:1px solid var(--line);position:relative;line-height:1.75}
.pd-sec-b .dl li::before{content:"";position:absolute;left:0;top:20px;
  width:5px;height:5px;background:var(--gold)}

/* 주의사항 강조 */
.pd-caution .pd-sec-b{background:var(--bg-soft);padding:clamp(22px,3vw,34px);
  border-left:2px solid var(--c-retino);max-width:none}
.pd-caution .pd-sec-b p{margin-bottom:11px}

/* ── 7단 리뷰 ───────────────────── */
.pd-review{background:var(--bg-soft);padding-block:clamp(48px,7vw,90px)}
.rv-sum{display:flex;align-items:center;gap:28px;flex-wrap:wrap;
  background:#fff;border:1px solid var(--line);padding:clamp(24px,3.4vw,40px)}
.rv-score{display:flex;align-items:baseline;gap:12px}
.rv-score b{font-family:var(--fd);font-size:44px;line-height:1;color:var(--tx);font-weight:400}
.rv-score span{color:var(--gold);letter-spacing:.1em;font-size:15px}
.rv-score em{font-style:normal;font-size:13px;color:var(--tx-mute)}

/* ── 8단 하단 고정 구매바 ───────── */
.buybar{position:fixed;left:0;right:0;bottom:0;z-index:95;display:none;
  gap:8px;padding:11px var(--pad) calc(11px + env(safe-area-inset-bottom));
  background:rgba(255,255,255,.96);backdrop-filter:blur(16px);
  border-top:1px solid var(--line);align-items:center}
.buybar-p{display:flex;align-items:baseline;gap:7px;margin-right:auto}
.buybar .pdp-now{font-size:17px}
.buybar .pdp-was{font-size:12px}
.buybar .pdp-off{font-size:10.5px;padding:2px 6px}
.buybar .btn{padding:13px 18px;font-size:13px;white-space:nowrap}

/* ── 반응형 ─────────────────────── */
@media(max-width:960px){
  .pd-hero-in{grid-template-columns:1fr;gap:30px}
  .pd-gal{position:static}
  .gsl-wrap{max-width:520px;margin-inline:auto}
  .gth-wrap{max-width:520px;margin-inline:auto}
}
@media(max-width:860px){
  .pd-nav{top:0}
  .buybar{display:flex}
  body{padding-bottom:74px}
  .top{bottom:88px}
  .pdp-cta{display:none}
}
@media(max-width:560px){
  .crumb{padding-top:92px}
  .pdp-opt{grid-template-columns:1fr}
  .pdp-qty{flex-wrap:wrap}
  .pdp-total{width:100%;margin-left:0;text-align:right}
  .buybar .btn-ghost{display:none}
  .gth-wrap{gap:6px}
}

/* 본문 소제목 */
.pd-h3{font-size:16px;font-weight:600;margin:26px 0 12px;padding-top:6px;
  color:var(--tx);letter-spacing:-.02em}
.pd-sec-b > .pd-h3:first-child{margin-top:0;padding-top:0}

/* Grade 비교표 (요청사항 12: 비교 테이블) */
.cmp-wrap{overflow-x:auto;margin:6px 0 18px;-webkit-overflow-scrolling:touch}
.cmp{width:100%;border-collapse:collapse;min-width:600px;font-size:13.5px}
.cmp th,.cmp td{border:1px solid var(--line);padding:13px 14px;text-align:left;
  vertical-align:top;line-height:1.7}
.cmp thead th{background:var(--bg-beige);font-size:13px;font-weight:700;
  letter-spacing:.02em;color:var(--tx);white-space:nowrap}
.cmp thead th:first-child{background:transparent;border-top:0;border-left:0}
.cmp .cmp-lab{background:var(--bg-soft);font-weight:600;font-size:12.5px;
  color:var(--tx-sub);white-space:nowrap;width:1%}
.cmp td{color:var(--tx-sub)}
.cmp .cmp-desc td{font-size:13px;color:var(--tx);background:#fff}