/* =========================================================
   product.php (상품 상세페이지) 전용 스타일
   style.css :root 변수 + style4.css 헤더/드로어 스타일 이어받아 사용
   ========================================================= */

.pd-page{ padding:32px 0 90px; }

.pd-notfound{ text-align:center; padding:120px 0; color:var(--ink-mute); font-size:14px; }
.pd-notfound p{ margin-bottom:24px; }

/* ---------- Breadcrumb ---------- */
.pd-breadcrumb{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; font-size:12px; color:var(--ink-mute); margin-bottom:28px; }
.pd-breadcrumb a{ color:var(--ink-mute); }
.pd-breadcrumb a:hover{ color:var(--gold-dark); }
.pd-breadcrumb span{ color:var(--ink-mute); }
.pd-breadcrumb .cur{ color:var(--ink); }

/* ---------- 상단: 갤러리 + 정보 2단 ---------- */
.pd-main-wrap{ display:grid; grid-template-columns:1fr; gap:40px; margin-bottom:88px; }
@media(min-width:900px){ .pd-main-wrap{ grid-template-columns:minmax(0,1.05fr) minmax(0,.85fr); gap:64px; } }

/* 갤러리 */
.pd-gallery{ min-width:0; }
.pd-main-frame{
  position:relative; width:100%; aspect-ratio:9/10; overflow:hidden;
  background:var(--bg-alt); border-radius:4px;
}
.pd-main-track{
  display:flex; width:100%; height:100%; overflow-x:auto; scroll-snap-type:x mandatory;
  scrollbar-width:none;
}
.pd-main-track::-webkit-scrollbar{ display:none; }
.pd-slide{ flex:0 0 100%; height:100%; scroll-snap-align:start; }
.pd-slide img{ width:100%; height:100%; object-fit:cover; }

.pd-badge{
  position:absolute; top:14px; left:14px; font-size:10.5px; letter-spacing:.08em;
  padding:6px 11px; border-radius:20px; color:#fff; background:var(--ink); z-index:3;
}
.pd-badge.special{ background:var(--gold-dark); }
.pd-soldout-veil{
  position:absolute; inset:0; background:rgba(255,255,255,.6); display:flex; align-items:center; justify-content:center;
  font-family:'Playfair Display',serif; font-size:22px; letter-spacing:.1em; color:var(--ink); z-index:4;
}

.pd-nav{
  position:absolute; top:50%; transform:translateY(-50%); width:40px; height:40px; border-radius:50%;
  background:rgba(255,255,255,.9); border:1px solid var(--line); display:flex; align-items:center; justify-content:center;
  color:var(--ink-soft); z-index:3; transition:.2s;
}
.pd-nav:hover{ background:#fff; color:var(--ink); }
.pd-nav svg{ width:17px; height:17px; }
.pd-nav.prev{ left:14px; }
.pd-nav.next{ right:14px; }

.pd-thumbs{ display:flex; gap:10px; margin-top:14px; overflow-x:auto; scrollbar-width:none; }
.pd-thumbs::-webkit-scrollbar{ display:none; }
.pd-thumb{
  flex:0 0 auto; width:68px; height:76px; border-radius:3px; overflow:hidden;
  border:1.5px solid transparent; opacity:.6; transition:.2s; padding:0;
}
.pd-thumb img{ width:100%; height:100%; object-fit:cover; }
.pd-thumb:hover{ opacity:.9; }
.pd-thumb.active{ border-color:var(--ink); opacity:1; }

/* 정보 패널 */
.pd-info{ min-width:0; padding-top:4px; }
.pd-brand{ font-size:11.5px; letter-spacing:.14em; color:var(--gold-dark); margin-bottom:10px; }
.pd-name{ font-size:clamp(21px,2.6vw,28px); font-weight:500; line-height:1.35; margin-bottom:10px; }
.pd-code{ font-size:12px; color:var(--ink-mute); margin-bottom:20px; }

.pd-price{ display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; font-size:22px; margin-bottom:12px; }
.pd-price .now{ font-weight:700; color:var(--ink); }
.pd-price .now.sale{ color:var(--gold-dark); }
.pd-price .old{ font-size:15px; color:var(--ink-mute); text-decoration:line-through; font-weight:400; }
.pd-price .pct{ font-size:15px; font-weight:700; color:var(--gold-dark); }
.pd-ship-tag{
  display:inline-block; font-size:11px; letter-spacing:.04em; color:var(--ink-soft);
  border:1px solid var(--line); border-radius:20px; padding:4px 12px; margin-bottom:24px;
}

.pd-divider{ height:1px; background:var(--line); margin:24px 0; }

.pd-opt-group{ margin-bottom:22px; }
.pd-opt-label{ font-size:12px; color:var(--ink-mute); margin-bottom:10px; letter-spacing:.03em; }
.pd-opt-list{ display:flex; flex-wrap:wrap; gap:9px; }
.pd-opt-chip{
  min-width:44px; padding:9px 16px; border:1px solid var(--line); border-radius:4px;
  font-size:13px; color:var(--ink-soft); background:#fff; transition:.15s;
}
.pd-opt-chip:hover{ border-color:var(--ink); color:var(--ink); }
.pd-opt-chip.active{ background:var(--ink); border-color:var(--ink); color:#fff; }

.pd-qty-stepper{
  display:inline-flex; align-items:center; border:1px solid var(--line); border-radius:4px; overflow:hidden;
}
.pd-qty-stepper button{ width:38px; height:40px; font-size:16px; color:var(--ink-soft); }
.pd-qty-stepper button:hover{ background:var(--bg-alt); color:var(--ink); }
.pd-qty-stepper input{
  width:52px; height:40px; text-align:center; border:none; border-left:1px solid var(--line); border-right:1px solid var(--line);
  font-family:inherit; font-size:13.5px; color:var(--ink); -moz-appearance:textfield;
}
.pd-qty-stepper input::-webkit-outer-spin-button,
.pd-qty-stepper input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }

.pd-total{ display:flex; align-items:center; justify-content:space-between; font-size:13.5px; color:var(--ink-soft); margin-bottom:22px; }
.pd-total strong{ font-size:19px; color:var(--ink); font-weight:700; }

.pd-actions{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:26px; }
.pd-btn{
  font-family:inherit; font-size:13.5px; letter-spacing:.04em; padding:16px 10px; border-radius:4px;
  border:1px solid var(--ink); cursor:pointer; transition:.2s; text-align:center;
}
.pd-btn.cart{ background:#fff; color:var(--ink); }
.pd-btn.cart:hover{ background:var(--bg-alt); }
.pd-btn.buy{ background:var(--ink); color:#fff; }
.pd-btn.buy:hover{ background:var(--gold-dark); border-color:var(--gold-dark); }
.pd-btn.soldout{ grid-column:1/-1; background:var(--bg-alt); color:var(--ink-mute); border-color:var(--line); cursor:not-allowed; }

.pd-notice{ list-style:none; display:flex; flex-direction:column; gap:6px; }
.pd-notice li{ font-size:11.5px; color:var(--ink-mute); padding-left:12px; position:relative; line-height:1.6; }
.pd-notice li::before{ content:'—'; position:absolute; left:0; }

/* ---------- 상세정보 ---------- */
.pd-detail{ max-width:860px; margin:0 auto; }
.pd-detail-head{ text-align:center; margin-bottom:36px; }
.pd-detail-head h2{ font-size:clamp(20px,2.6vw,26px); font-weight:500; letter-spacing:.02em; }
.pd-desc-text{
  font-size:14px; line-height:1.9; color:var(--ink-soft); white-space:pre-line;
  padding-bottom:44px; margin-bottom:44px; border-bottom:1px solid var(--line);
}
.pd-detail-images{ display:flex; flex-direction:column; }
.pd-detail-images img{ width:100%; display:block; }

@media(max-width:560px){
  .pd-actions{ grid-template-columns:1fr; }
  .pd-total{ font-size:13px; }
}

/* ---------- 담기 완료 토스트 ---------- */
.pd-toast{
  position:fixed; left:50%; bottom:36px; transform:translateX(-50%) translateY(12px);
  background:var(--ink); color:#fff; font-size:13px; letter-spacing:.02em;
  padding:14px 26px; border-radius:30px; opacity:0; pointer-events:none;
  transition:opacity .25s, transform .25s; z-index:500; white-space:nowrap;
}
.pd-toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }