/*
  [생성일] 2026-08-02
  [경위] 예담 상품 상세 공통 스타일 — 상세 템플릿 1종을 4개 상품에 그대로 적용하기 위한 파일
  [변경이력]
    - 2026-08-02: 최초 생성
  [아임웹 이식 메모]
    - 아임웹 상품 상세는 "상품 설명" 영역에 HTML 위젯을 넣는 구조.
      구매 박스(.yd-buy)는 아임웹 기본 구매 UI로 대체되므로, 이식 시 .yd-buy 블록만 걷어내면 됩니다.
    - 나머지(정보표·과정·FAQ)는 상품마다 문구만 바꿔 그대로 재사용합니다.
*/

/* 빵부스러기 */
.yd-crumb{ font-size:12.5px; color:var(--yd-ink-soft); padding:22px 0 0; display:flex; gap:8px; flex-wrap:wrap; }
.yd-crumb a:hover{ color:var(--yd-ink); text-decoration:underline; }

/* 상단 : 사진 / 구매 정보 */
.yd-pd-top{ display:grid; grid-template-columns:6fr 5fr; gap:clamp(28px,4vw,64px); padding:clamp(24px,3vw,40px) 0 clamp(72px,9vw,112px); align-items:start; }
.yd-pd-gallery .yd-frame-inner{ aspect-ratio:4/5; }
.yd-pd-thumbs{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:12px; }
.yd-pd-thumbs .yd-frame{ padding:5px; }
.yd-pd-thumbs .yd-frame-inner{ aspect-ratio:1/1; }

.yd-pd-no{ font-family:var(--yd-serif); font-size:12px; color:var(--yd-amber); letter-spacing:.3em; }
.yd-pd-title{ font-family:var(--yd-serif); font-weight:400; font-size:clamp(28px,3.4vw,44px); line-height:1.34; letter-spacing:.02em; margin-top:10px; }
.yd-pd-lead{ font-size:15.5px; color:var(--yd-ink-soft); margin-top:16px; line-height:1.8; max-width:46ch; }

/* 규격 표 — 상품마다 같은 자리, 같은 순서 */
.yd-spec{ margin-top:28px; border-top:1px solid var(--yd-ink); }
.yd-spec div{ display:grid; grid-template-columns:96px 1fr; gap:16px; padding:13px 0; border-bottom:1px solid var(--yd-line); font-size:14px; }
.yd-spec dt, .yd-spec .yd-spec-k{ color:var(--yd-ink-soft); font-weight:700; }
.yd-spec .yd-spec-v{ color:var(--yd-ink); }

/* 구매 박스 — 아임웹 이식 시 이 블록만 제거 */
.yd-buy{ margin-top:26px; border:1px solid var(--yd-frame); padding:8px; }
.yd-buy-in{ border:1px solid var(--yd-line); padding:clamp(20px,2.4vw,28px); }
.yd-buy-price{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.yd-buy-price b{ font-family:var(--yd-serif); font-size:26px; font-weight:400; }
.yd-buy-ctas{ display:flex; gap:10px; margin-top:18px; flex-wrap:wrap; }
.yd-buy-ctas .yd-btn{ flex:1; justify-content:center; min-width:150px; }
.yd-buy-note{ font-size:12.5px; color:var(--yd-ink-soft); margin-top:14px; line-height:1.7; }

/* 본문 섹션 공통 */
.yd-pd-sec{ padding:clamp(60px,7vw,96px) 0; border-top:1px solid var(--yd-line); }
.yd-pd-sec--hanji{ background:var(--yd-hanji); }
.yd-pd-sec--dark{ background:var(--yd-deep); color:var(--yd-paper); }
.yd-pd-sec--dark .yd-h2{ color:var(--yd-paper); }
.yd-pd-sec--dark .yd-section-note{ color:rgba(251,247,239,.6); }
.yd-pd-sec .yd-section-head{ padding-top:0; }

/* 이런 분께 */
.yd-for-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(18px,2.4vw,34px); }
.yd-for{ border-top:2px solid var(--yd-ink); padding-top:18px; }
.yd-for span{ font-family:var(--yd-serif); font-size:12px; letter-spacing:.3em; color:var(--yd-amber); }
.yd-for h3{ font-family:var(--yd-serif); font-size:clamp(18px,1.6vw,21px); font-weight:400; margin:9px 0 9px; line-height:1.5; }
.yd-for p{ font-size:13.5px; color:var(--yd-ink-soft); line-height:1.72; }

/* 표시사항 표 */
.yd-label-table{ border-top:1px solid var(--yd-ink); }
.yd-label-table div{ display:grid; grid-template-columns:150px 1fr; gap:20px; padding:15px 0; border-bottom:1px solid var(--yd-line); font-size:14px; align-items:start; }
.yd-label-table .yd-lk{ font-weight:700; color:var(--yd-ink); }
.yd-label-table .yd-lv{ color:var(--yd-ink-soft); line-height:1.7; }
.yd-legal{ margin-top:22px; padding:18px 20px; background:var(--yd-paper); border-left:3px solid var(--yd-amber); font-size:13px; color:var(--yd-ink-soft); line-height:1.75; }
.yd-pd-sec--hanji .yd-legal{ background:var(--yd-paper); }

/* 섭취·보관 2단 */
.yd-howto{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(20px,3vw,44px); }
.yd-howto section{ border-top:1px solid rgba(251,247,239,.2); padding-top:20px; }
.yd-howto h3{ font-family:var(--yd-serif); font-size:20px; font-weight:400; }
.yd-howto ul{ list-style:none; margin-top:14px; }
.yd-howto li{ font-size:14px; color:rgba(251,247,239,.7); line-height:1.75; padding:7px 0 7px 16px; position:relative; }
.yd-howto li::before{ content:""; position:absolute; left:0; top:15px; width:5px; height:5px; border-radius:50%; background:var(--yd-amber); }

/* 과정 요약 (가로) */
.yd-mini-steps{ display:grid; grid-template-columns:repeat(5,1fr); gap:clamp(12px,1.8vw,24px); }
.yd-mini-step{ border-top:1px solid var(--yd-line); padding-top:16px; }
.yd-mini-step span{ font-family:var(--yd-serif); font-size:18px; color:var(--yd-amber); }
.yd-mini-step h4{ font-size:14.5px; font-weight:700; margin:8px 0 6px; }
.yd-mini-step p{ font-size:12.5px; color:var(--yd-ink-soft); line-height:1.65; }

/* FAQ */
.yd-faq{ border-top:1px solid var(--yd-ink); }
.yd-faq details{ border-bottom:1px solid var(--yd-line); }
.yd-faq summary{ cursor:pointer; padding:19px 0; font-size:15.5px; font-weight:700; list-style:none; display:flex; justify-content:space-between; gap:16px; align-items:center; }
.yd-faq summary::-webkit-details-marker{ display:none; }
.yd-faq summary::after{ content:"+"; color:var(--yd-amber); font-size:20px; font-weight:400; flex:none; transition:transform .2s var(--ease-out); }
.yd-faq details[open] summary::after{ transform:rotate(45deg); }
.yd-faq p{ padding:0 0 20px; font-size:14px; color:var(--yd-ink-soft); line-height:1.8; max-width:62ch; }

/* 다른 상품 */
.yd-also{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,2.2vw,28px); }
.yd-also .yd-frame-inner{ aspect-ratio:3/2; }
.yd-also h3{ font-family:var(--yd-serif); font-size:18px; font-weight:400; margin-top:14px; }
.yd-also p{ font-size:13px; color:var(--yd-ink-soft); margin-top:4px; }

/* 반응형 */
@media (max-width: 1023px){
  .yd-pd-top{ grid-template-columns:1fr; }
  .yd-for-grid{ grid-template-columns:1fr; gap:22px; }
  .yd-mini-steps{ grid-template-columns:repeat(2,1fr); gap:20px; }
  .yd-also{ grid-template-columns:1fr; }
}
@media (max-width: 767px){
  .yd-howto{ grid-template-columns:1fr; }
  .yd-label-table div{ grid-template-columns:1fr; gap:5px; }
  .yd-spec div{ grid-template-columns:80px 1fr; gap:12px; }
  .yd-mini-steps{ grid-template-columns:1fr; }
  .yd-buy-ctas .yd-btn{ min-width:100%; }
}