/* ===== Layout base ===== */
a {
  color: inherit;           /* 글자색 부모 따라감 */
  text-decoration: none;    /* 밑줄 제거 */
}

body { background:#fafafa; }
.pdp { max-width:1240px; margin:40px auto 80px; padding:0 24px; }

/* Breadcrumb */
.pdp-breadcrumb{ font-size:13px; color:#888; margin:14px 0 22px; }
.pdp-breadcrumb a{ color:#555; text-decoration:none; }
.pdp-breadcrumb a:hover{ text-decoration:underline; }
.pdp-breadcrumb span{ margin:0 6px; color:#bbb; }

/* Top section */
.pdp-top{ display:grid; grid-template-columns: 1.3fr 0.9fr; gap:40px; align-items:start; }

/* Gallery */
.pdp-hero img{
width:100%; display:block; aspect-ratio:3/2; object-fit:cover;
border-radius:16px; box-shadow:0 12px 30px rgba(0,0,0,.06); background:#eee;
}
.pdp-thumbs{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-top:14px; }
.pdp-thumbs img{
width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:12px;
border:1px solid rgba(0,0,0,.08); cursor:pointer;
transition: transform .15s ease, border-color .15s ease, opacity .15s ease;
}
.pdp-thumbs img:hover{ transform:translateY(-2px); opacity:.95; }
.pdp-thumbs img.is-active{ border-color:#111; }

/* Info (sticky card) */
.pdp-info{
position:sticky; top:84px; align-self:start;
background:#fff; border:1px solid rgba(0,0,0,.08);
border-radius:16px; padding:22px 20px; box-shadow:0 10px 24px rgba(0,0,0,.05);
}
.pdp-title{ font-size:26px; font-weight:800; letter-spacing:.2px; margin-bottom:6px; }
.pdp-price{ font-size:22px; font-weight:800; margin-bottom:18px; }

/* Options */
.pdp-options{ display:grid; grid-template-columns:1fr; gap:14px; }
.pdp-field{ display:flex; flex-direction:column; gap:8px; font-size:14px; }
.pdp-field span{ font-weight:600; color:#222; }

/* === 옵션 선택 박스 (드롭다운) === */
#sizeSelect {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;

  padding: 14px 40px 14px 16px; /* 오른쪽 여백 확보 */
  border: 1px solid #ccc;
  border-radius: 10px;
  font-size: 16px;
  font-weight: 500;
  background: #fff;
  cursor: pointer;
}

#sizeSelect:hover {
  border-color: #666;
  box-shadow: 0 6px 16px rgba(0,0,0,.08);
}

#sizeSelect:focus {
  border-color: #111;
  box-shadow: 0 0 0 3px rgba(0,0,0,.08);
  outline: none;
}

/* 화살표 커스텀 (여기 하나만) */
.pdp-field {
  position: relative;
}
.pdp-field::after {
  content: "▾";
  font-size: 30px;
  color: #444;
  position: absolute;
  right: 16px;
  top: 60%;                   /* 세로 중앙 */
  transform: translateY(-50%); /* 정확히 중앙 맞춤 */
  pointer-events: none;
}

/* === 애플스러운 옵션 블록 === */
.selected-block {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  margin-top: 10px;
  background: #fff;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.06);
  transition: box-shadow .2s ease, transform .2s ease;
}
.selected-block:hover {
  box-shadow: 0 6px 18px rgba(0,0,0,0.08);
  transform: translateY(-1px);
}

.selected-block span {
  font-weight: 600;
  color: #111;
  font-size: 15px;
}

/* === 수량 조절 버튼 === */
.qty-box {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto; /* 오른쪽 정렬 */
}

.qty-btn {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid rgba(0,0,0,0.1);
  background: #f9f9f9;
  cursor: pointer;
  font-size: 16px;
  font-weight: 600;
  transition: background .2s ease, transform .1s ease;
}
.qty-btn:hover {
  background: #eee;
  transform: scale(1.05);
}

.qty-input {
  width: 42px;
  text-align: center;
  border: none;
  font-size: 15px;
  font-weight: 600;
  background: transparent;
  color: #333;
}

/* === 삭제 버튼 === */
.remove-btn {
  border: none;
  background: none;
  font-size: 18px;
  cursor: pointer;
  color: #aaa;
  margin-left: 10px;
  transition: color .2s ease, transform .2s ease;
}
.remove-btn:hover {
  color: #000;
  transform: rotate(90deg);
}

/* CTA */
.pdp-actions{ display:flex; gap:12px; margin:16px 0 10px; }
.pdp-btn{
flex:1; padding:14px 18px; border-radius:12px; border:1px solid #111;
font-weight:800; letter-spacing:.2px; cursor:pointer; transition:transform .15s ease, background .15s ease, color .15s ease;
}
.pdp-buy{ background:#111; color:#fff; }
.pdp-cart{ background:#fff; color:#111; }
.pdp-btn:hover{ transform:translateY(-1px); }

/* Bullets */
.pdp-bullets{ margin:10px 0 0; padding-left:18px; color:#444; font-size:14px; line-height:1.6; }
.pdp-bullets li{ margin:2px 0; }

/* Long story images */
.pdp-immersion{ max-width:1240px; margin:70px auto 0; }
.pdp-immersion figure{ margin:0 0 28px; }
.pdp-immersion img{ width:100%; display:block; border-radius:18px; box-shadow:0 12px 28px rgba(0,0,0,.06); }

/* Accordion */
.pdp-detail{ max-width:800px; margin:40px auto 0; padding:0 20px; }
.pdp-detail details{ border-top:1px solid rgba(0,0,0,.08); padding:14px 0; }
.pdp-detail details:last-child{ border-bottom:1px solid rgba(0,0,0,.08); }
.pdp-detail summary{ cursor:pointer; font-weight:700; }
.pdp-detail p, .pdp-detail ul{ margin-top:8px; color:#555; font-size:14px; line-height:1.7; }

/* Related */
.pdp-related{ max-width:1240px; margin:60px auto 0; }
.pdp-rel-title{ font-size:18px; font-weight:800; margin-bottom:14px; padding:0 2px; }
.pdp-rel-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.pdp-rel-card{
display:block; text-decoration:none; background:#fff; border:1px solid rgba(0,0,0,.08);
border-radius:14px; overflow:hidden; padding:10px; text-align:center; transition:transform .15s, box-shadow .15s;
}
.pdp-rel-card:hover{ transform:translateY(-3px); box-shadow:0 8px 20px rgba(0,0,0,.08); }
.pdp-rel-card img{ width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:10px; margin-bottom:8px; }
.pdp-rel-card p{ color:#222; font-size:14px; font-weight:600; }
.pdp-rel-card span{ display:block; color:#222; font-size:14px; font-weight:800; }

/* Responsive */
@media (max-width: 992px){
.pdp-top{ grid-template-columns:1fr; gap:24px; }
.pdp-info{ position:static; }
.pdp-rel-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width: 480px){
.pdp-rel-grid{ grid-template-columns:1fr; }
}

.cart-modal {
position: fixed;
inset: 0;
background: rgba(0,0,0,0.4);
display: flex;
justify-content: center;
align-items: center;
z-index: 999;
}

.cart-modal-content {
background: #fff;
padding: 30px 40px;
border-radius: 8px;
font-size: 16px;
font-weight: 600;
text-align: center;
box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}

.hidden { display: none; }

/* 섹션 전체 구조 */
.pdp-story {
  max-width: 850px;
  margin: 80px auto 60px;
  text-align: center;
  padding: 0 20px;
  line-height: 1.9;
}

/* 제목 */
.pdp-subtitle {
  font-family: "Montserrat", "Noto Sans KR", sans-serif;
  font-size: 1.7rem;
  font-weight: 600;
  color: #111;
  margin-bottom: 24px;
  letter-spacing: -0.02em;
}

/* 본문 설명 */
.pdp-desc {
  font-size: 1.05rem;
  color: #444;
  white-space: pre-line;
  letter-spacing: -0.01em;
  text-align: center;
}

/* 섹션 간 간격 자연스럽게 */
.pdp-story + .pdp-immersion {
  margin-top: -10px;
}

/* 반응형 (모바일 최적화) */
@media (max-width: 768px) {
  .pdp-story {
    margin: 60px auto 40px;
    padding: 0 16px;
  }

  .pdp-subtitle {
    font-size: 1.4rem;
  }

  .pdp-desc {
    font-size: 0.95rem;
    line-height: 1.7;
  }

  .pdp-immersion figure {
    border-radius: 8px;
  }
}
/* 페이지 마무리 섹션 - 감정적 여운 */
.pdp-story:last-of-type {
  border-top: 1px solid #eee;
  padding-top: 60px;
  opacity: 0.95;
  transition: opacity 0.5s ease;
}

.pdp-story:last-of-type:hover {
  opacity: 1;
}

.pdp-story:last-of-type .pdp-subtitle {
  font-size: 1.4rem;
  color: #222;
  margin-bottom: 20px;
}

.pdp-story:last-of-type .pdp-desc {
  font-size: 1.05rem;
  color: #555;
  line-height: 1.9;
  white-space: pre-line;
}

.pdp-watermark {
  display: flex;
  justify-content: center;
  margin-top: 40px;
  opacity: 1; /* ✨ 살짝 투명하지만 확실히 보이게 */
  transition: opacity 0.8s ease;
}

.pdp-watermark img {
  width: 80px;
  height: auto;
  filter: brightness(0.2); /* ✨ 약간 어둡게 (배경과 조화) */
  transition: transform 0.4s ease, filter 0.4s ease;
}

.pdp-watermark img:hover {
  transform: scale(1.08);
  filter: brightness(0.5); /* 살짝 밝아짐 */
}
.pdp-figure {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 18px;
  margin: 30px 0 60px;
}

.pdp-figure img {
  width: 340px;         /* ✅ 모든 이미지 가로 크기 동일 */
  height: 340px;        /* ✅ 세로 크기도 동일 (정사각형) */
  border-radius: 10px;
  object-fit: cover;    /* ✅ 비율 유지하면서 박스 꽉 채움 */
  transition: transform 0.3s ease;
}

.pdp-figure img:hover {
  transform: scale(1.04);
}
.hidden { display: none; }