/* ==========================================================
   혁신시대 — 상품 상세 (DAECHIPREP 구조: 갤러리 + 구매 패널,
   구매 후기 스트립, 고정 탭, 상세 이미지, 리뷰, 구매안내)
   ========================================================== */
.pdp-page { padding-bottom: 40px; }
.crumbs { display: flex; flex-wrap: wrap; gap: 8px; font-size: 13px; color: var(--pencil); padding-block: 24px 28px; }
.crumbs a:hover { color: var(--ink); }
.crumbs [aria-hidden] { color: var(--rule); }

.pdp-hero { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 5vw, 72px); align-items: start; }

/* Gallery */
.gallery-stage { position: relative; }
.gallery-track {
  display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
  aspect-ratio: 1; background: var(--wash);
}
.gallery-track::-webkit-scrollbar { display: none; }
.gallery-track img { flex: 0 0 100%; width: 100%; height: 100%; object-fit: cover; scroll-snap-align: start; }
.gallery-count {
  position: absolute; right: 16px; bottom: 16px;
  background: rgba(12, 12, 11, .72); color: #fff;
  font: 500 12px var(--f-mono); padding: 5px 10px;
}
.gallery-thumbs { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; margin-top: 12px; }
.thumb { aspect-ratio: 1; background: var(--wash); border: 1px solid transparent; opacity: .5; transition: opacity .2s, border-color .2s; }
.thumb:hover { opacity: .85; }
.thumb[aria-current="true"] { opacity: 1; border-color: var(--ink); }
.thumb img { width: 100%; height: 100%; object-fit: cover; }

/* Purchase panel */
.pdp-info { position: sticky; top: calc(var(--header-h) + 32px); display: grid; gap: 24px; }
.pdp-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
.pdp-title { font: 600 clamp(26px, 2.6vw, 34px)/1.32 var(--f-display); letter-spacing: -0.035em; }
.pdp-short { margin-top: 8px; color: var(--graphite); }
.pdp-rating { display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; font-size: 14px; color: var(--graphite); }
.pdp-rating:hover { color: var(--ink); }
.stars { display: inline-flex; gap: 2px; }
.stars svg { width: 14px; height: 14px; }
.star-on { fill: var(--ink); }
.star-off { fill: var(--rule); }

.pdp-points { display: grid; gap: 10px; padding-top: 22px; border-top: 1px solid var(--rule); }
.pdp-points li { display: grid; grid-template-columns: 18px 1fr; gap: 10px; font-size: 15px; }
.pdp-points svg { width: 18px; height: 18px; margin-top: 4px; fill: none; stroke: var(--ink); stroke-width: 1.8; }

.pdp-price { display: flex; justify-content: space-between; align-items: baseline; padding-top: 22px; border-top: 1px solid var(--rule); }
.pdp-price dt { font-size: 14px; color: var(--graphite); }
.pdp-price dd { font-size: 30px; font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.pdp-price dd.soon { font-size: 20px; color: var(--pencil); }

.payback-box {
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 6px 16px;
  background: var(--ink); color: var(--paper); padding: 20px 22px;
}
.payback-box .pb-label { font-size: 13px; color: #B9B8B2; }
.payback-box .pb-fig { font: 600 20px/1.3 var(--f-display); letter-spacing: -0.02em; }
.payback-box .pb-fig s { color: #8F8E88; font-weight: 400; margin-right: 6px; font-variant-numeric: tabular-nums; }
.payback-box a { grid-column: 2; grid-row: 1 / span 2; font-size: 13px; border-bottom: 1px solid currentColor; padding-bottom: 1px; }

.opt-block { display: grid; gap: 16px; }
.opt-form { display: grid; gap: 16px; }
.field label { display: block; font-size: 14px; font-weight: 600; margin-bottom: 8px; }
.select { position: relative; }
.select select {
  appearance: none; -webkit-appearance: none; width: 100%; height: 52px;
  padding: 0 44px 0 16px; border: 1px solid var(--rule); border-radius: 0;
  background: var(--paper); font-size: 15px; cursor: pointer;
}
.select select:hover { border-color: var(--graphite); }
.select select:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }
.select select.is-empty { color: var(--pencil); }
.select::after {
  content: ""; position: absolute; right: 19px; top: 50%; width: 7px; height: 7px; pointer-events: none;
  border-right: 1.5px solid var(--ink); border-bottom: 1.5px solid var(--ink); transform: translateY(-70%) rotate(45deg);
}
.pick { display: flex; justify-content: space-between; gap: 12px; padding: 16px; background: var(--wash); font-size: 14px; }
.total { display: flex; justify-content: space-between; align-items: baseline; padding-top: 16px; border-top: 1px solid var(--ink); font-size: 14px; }
.total b { font-size: 24px; letter-spacing: -0.02em; }
.actions { display: flex; gap: 8px; }
.actions .btn-ink { flex: 1; }

/* Review strip — 사진 후기 */
.strip { padding-top: clamp(72px, 9vw, 120px); }
.strip-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 28px; }
.strip-title { display: flex; align-items: baseline; gap: 8px; font: 600 24px var(--f-display); letter-spacing: -0.03em; }
.strip-title .num { font: 400 17px var(--f-body); color: var(--pencil); }
.strip-tools { display: flex; align-items: center; gap: 20px; }
.strip-nav { display: flex; gap: 6px; }
.strip-nav button { width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid var(--rule); }
.strip-nav button:hover:not([disabled]) { border-color: var(--ink); }
.strip-nav button[disabled] { color: var(--rule); cursor: default; }
.strip-nav svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.strip-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px clamp(32px, 5vw, 72px); }
.photo-rv { display: grid; grid-template-columns: minmax(0, 1fr) 132px; gap: 20px; align-items: start; }
.photo-rv.no-photo { grid-template-columns: minmax(0, 1fr); }
.photo-rv-body .stars svg { width: 15px; height: 15px; }
.photo-rv-text {
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
  margin-top: 12px; font-size: 15px; line-height: 1.75;
}
.photo-rv-body:hover .photo-rv-text { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.photo-rv-who { display: block; margin-top: 10px; font-size: 13px; color: var(--pencil); }
.photo-rv-img { margin: 0; aspect-ratio: 1; background: var(--wash); overflow: hidden; }
.photo-rv-img img { width: 100%; height: 100%; object-fit: cover; }

/* Sticky tabs */
.pdp-tabs { position: sticky; top: var(--header-h); z-index: 20; margin-top: clamp(64px, 8vw, 104px); background: var(--paper); border-bottom: 1px solid var(--rule); }
.pdp-tabs .wrap { display: flex; align-items: center; }
.tab-link { position: relative; padding: 20px 0; margin-right: 40px; font-size: 16px; font-weight: 500; color: var(--pencil); }
.tab-link:hover { color: var(--graphite); }
.tab-link[aria-current="true"] { color: var(--ink); }
.tab-link[aria-current="true"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--ink); }
.tab-link .count { margin-left: 4px; font: 400 12px var(--f-mono); }
.tabs-buy { margin-left: auto; display: flex; align-items: center; gap: 20px; font-size: 14px; }
.tabs-buy b { font-size: 18px; font-variant-numeric: tabular-nums; }
.tabs-buy .btn { height: 44px; padding: 0 22px; }

/* Detail images (Figma frames, stacked without gaps) */
.detail { padding-top: 56px; }
.detail-imgs { max-width: 860px; margin-inline: auto; background: var(--wash); }
.detail-imgs img { width: 100%; }

/* Reviews */
.reviews, .guide { padding-top: clamp(88px, 10vw, 128px); }
.block-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-bottom: 20px; border-bottom: 2px solid var(--ink); }
.block-title { display: flex; align-items: center; gap: 10px; font: 600 26px var(--f-display); letter-spacing: -0.03em; }
.block-title .num { font-family: var(--f-mono); font-size: 18px; font-weight: 400; color: var(--pencil); }
.rv-summary { display: grid; grid-template-columns: 240px minmax(0, 420px); gap: 56px; align-items: center; padding: 40px 0; border-bottom: 1px solid var(--rule); }
.rv-score { display: grid; justify-items: center; gap: 10px; }
.rv-score b { font: 600 60px/1 var(--f-display); letter-spacing: -0.03em; }
.rv-score .stars svg { width: 18px; height: 18px; }
.rv-score span:last-child { font-size: 13px; color: var(--pencil); }
.rv-bars { display: grid; gap: 8px; }
.rv-bars li { display: grid; grid-template-columns: 32px 1fr 28px; align-items: center; gap: 12px; font-size: 13px; color: var(--graphite); }
.rv-bars li span:last-child { text-align: right; }
.bar { height: 6px; background: var(--wash); }
.bar i { display: block; height: 100%; background: var(--ink); }
.rv-sort { display: flex; flex-wrap: wrap; gap: 20px; padding: 18px 0; border-bottom: 1px solid var(--rule); font-size: 14px; color: var(--pencil); }
.rv-sort button:hover { color: var(--ink); }
.rv-sort button[aria-pressed="true"] { color: var(--ink); font-weight: 600; }
.rv-item { display: grid; gap: 10px; padding: 28px 0; border-bottom: 1px solid var(--rule); }
.rv-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13px; color: var(--pencil); }
.rv-meta .who { color: var(--ink); font-weight: 600; }
.rv-opt { font-size: 13px; color: var(--pencil); }
.rv-text { max-width: 68ch; font-size: 15px; }
.helpful { justify-self: start; display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border: 1px solid var(--rule); font-size: 13px; }
.helpful:hover { border-color: var(--ink); }
.helpful[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }

.pay-note { font-size: 13px; color: var(--pencil); }
.rv-actions { display: flex; align-items: center; gap: 12px; }
.rv-del { font-size: 13px; color: var(--pencil); text-decoration: underline; text-underline-offset: 3px; }
.rv-del:hover { color: var(--ink); }

/* Review form */
.rv-form { display: grid; gap: 20px; max-width: 720px; padding: 32px 0; border-bottom: 1px solid var(--rule); }
.rating-input { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; border: 0; }
.rating-input legend { width: 100%; margin-bottom: 8px; font-size: 14px; font-weight: 600; }
.rating-input label { cursor: pointer; }
.rating-input input { position: absolute; opacity: 0; pointer-events: none; }
.rating-input span { display: inline-grid; place-items: center; height: 40px; padding: 0 16px; border: 1px solid var(--rule); font-size: 14px; }
.rating-input input:checked + span { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.rating-input input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: 2px; }
.field textarea {
  display: block; width: 100%; min-height: 140px; padding: 14px 16px; resize: vertical;
  border: 1px solid var(--rule); border-radius: 0; background: var(--paper); font-size: 15px; line-height: 1.7;
}
.field textarea:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }
.rv-count { margin-top: 6px; text-align: right; font-size: 12px; color: var(--pencil); }
.rv-form-actions { display: flex; justify-content: flex-end; gap: 8px; }
.rv-form-actions .btn { height: 48px; }

/* Purchase guide */
.guide-row { display: grid; grid-template-columns: 200px 1fr; gap: 32px; padding: 28px 0; border-bottom: 1px solid var(--rule); }
.guide-row dt { font-weight: 600; }
.guide-row dd { display: grid; gap: 6px; font-size: 14px; color: var(--graphite); }
.guide-row dd p { position: relative; padding-left: 14px; }
.guide-row dd p::before { content: ""; position: absolute; left: 0; top: .85em; width: 5px; height: 1px; background: var(--graphite); }
.guide-row dd a { color: var(--ink); border-bottom: 1px solid currentColor; }

/* Mobile buy bar + option sheet */
.buybar { display: none; }
.sheet-backdrop { position: fixed; inset: 0; z-index: 60; background: rgba(12, 12, 11, .5); }
.sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 61; max-height: 85vh; overflow-y: auto;
  display: grid; gap: 18px; background: var(--paper);
  padding: 12px var(--gutter) calc(20px + env(safe-area-inset-bottom));
}
.sheet::before { content: ""; justify-self: center; width: 40px; height: 4px; background: var(--rule); }
.sheet-head { display: flex; justify-content: space-between; align-items: center; }
.sheet-head h2 { font-size: 17px; }
.sheet-head button { width: 36px; height: 36px; display: grid; place-items: center; }
.sheet-head svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; }

@media (max-width: 1023px) {
  .pdp-hero { grid-template-columns: 1fr; gap: 28px; }
  .pdp-info { position: static; }
  .gallery { margin-inline: calc(var(--gutter) * -1); }
  .gallery-thumbs, .pdp-info .opt-block, .tabs-buy { display: none; }
  .strip-grid { grid-template-columns: 1fr; gap: 28px; }
  .photo-rv { grid-template-columns: minmax(0, 1fr) 96px; gap: 16px; }
  .buybar {
    display: flex; gap: 8px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom));
    background: var(--paper); border-top: 1px solid var(--rule);
  }
  .buybar .btn-ink { flex: 1; height: 52px; }
  .buybar .icon-btn { width: 52px; height: 52px; }
  .pdp-page { padding-bottom: 96px; }
  .tab-link { flex: 1; margin-right: 0; text-align: center; }
  .rv-summary { grid-template-columns: 1fr; gap: 28px; }
  .guide-row { grid-template-columns: 1fr; gap: 12px; }
}