@charset "utf-8";
/* =====================================================================
   BABY SCENE STUDIO · product.css  (타입별 상세페이지) — 클래식/가독성
   ===================================================================== */
html{ scroll-behavior:smooth; }
.product{ --accent:#2f9e6e; max-width:1100px; margin:0 auto; padding:50px 24px 90px; }

/* ---------- 상단: 갤러리(위) → 구성(아래) 세로 배치 (PC 포함) ---------- */
.prod-top{ display:block; }
.gal{ max-width:1100px; margin:0 auto 46px; }

/* 갤러리 : 앨범 느낌 — 크림 매트 여백 + 안쪽 사진 + 부드러운 그림자
   이미지는 자르지 않고 원본 비율 그대로(박스 높이는 사진에 맞춰 자동) */
.gal-main{
  width:100%; background:#F7F3EC; border:1px solid #E7E0D3; border-radius:12px;
  padding:22px; box-shadow:0 16px 44px rgba(60,45,25,.12); overflow:hidden;
}
.gal-main img{ width:100%; height:auto; display:block; border-radius:4px; box-shadow:0 3px 16px rgba(0,0,0,.13); }
.gal-ph{ min-height:320px; display:flex; align-items:center; justify-content:center; color:#b9bec6; font-size:18px; font-weight:700; background:#fff; border-radius:4px; }

/* 사진 아래 컨트롤 바 : 좌우 화살표 + 도트 (사진 안 가림 · 여러 장일 때만 JS가 표시) */
.gal-ctrl{ display:flex; align-items:center; justify-content:center; gap:16px; margin-top:16px; }
.gal-nav{
  width:40px; height:40px; border-radius:50%; border:1px solid #E3E5EA; background:#fff;
  color:#22262e; font-size:20px; line-height:1; cursor:pointer;
  display:flex; align-items:center; justify-content:center; transition:.18s;
}
.gal-nav:hover{ border-color:var(--accent); color:var(--accent); }
.gal-dots{ display:flex; align-items:center; gap:8px; }
.gal-dot{ width:9px; height:9px; padding:0; border:0; border-radius:50%; background:#D6D9DE; cursor:pointer; transition:width .2s, background .2s; }
.gal-dot:hover{ background:#b7bcc4; }
.gal-dot.on{ width:24px; border-radius:999px; background:var(--accent); }

/* 구성 영역도 갤러리와 같은 폭으로 중앙 정렬 */
.prod-config{ max-width:1100px; margin:0 auto; }
/* 썸네일 : 개수(9 또는 10)에 맞춰 자동 배치 */
.gal-thumbs{ display:grid; grid-template-columns:repeat(auto-fit,minmax(64px,1fr)); gap:8px; margin-top:10px; }
.gal-thumb{
  aspect-ratio:1/1; border:1px solid #E3E5EA; border-radius:4px; background:#fff;
  color:#9aa0a8; font-size:11px; font-weight:700; cursor:pointer; overflow:hidden; padding:0;
}
.gal-thumb img{ width:100%; height:100%; object-fit:cover; }
.gal-thumb.is-active{ border-color:var(--accent); box-shadow:0 0 0 1px var(--accent) inset; color:var(--accent); }

/* 구성 (오른쪽) */
.prod-name{ font-size:25px; font-weight:800; color:#22262e; letter-spacing:-.5px; }
.prod-price{ margin:12px 0 22px; display:flex; align-items:baseline; gap:10px; }
.prod-price .was{ font-size:16px; color:#aab0b8; text-decoration:line-through; }
.prod-price .now{ font-size:30px; font-weight:800; color:var(--accent); }
.prod-feat{ display:flex; align-items:center; gap:9px; font-size:15px; color:#3a3f47; margin:13px 0; }
.prod-feat .chk{ flex:0 0 20px; width:20px; height:20px; border-radius:50%; background:var(--accent); color:#fff; font-size:12px; font-weight:800; display:flex; align-items:center; justify-content:center; }
.prod-feat b{ font-weight:800; color:#22262e; }
.prod-table{ display:grid; grid-template-columns:auto 1fr auto 1fr; gap:11px 16px; background:#F4FAF7; border-radius:10px; padding:18px 20px; margin:6px 0 14px; }
.prod-table .t-k{ color:#9aa0a8; font-size:14px; }
.prod-table .t-v{ color:#22262e; font-size:14px; font-weight:800; }

/* ---------- 주기별 컨셉 분배기 ---------- */
.distrib{ margin-top:42px; background:#FAFBFC; border:1px solid #E7E9ED; border-radius:14px; padding:24px 24px 26px; }
.distrib-head{ display:flex; justify-content:space-between; align-items:flex-start; gap:16px; flex-wrap:wrap; }
.distrib-head h3{ font-size:17px; font-weight:800; color:#22262e; margin:0 0 8px; }
.distrib-head p{ font-size:13px; color:#8a909a; line-height:1.6; margin:0; }
.distrib-remain{ flex:0 0 auto; background:#fff; border:1px solid #DDE3EC; border-radius:999px; padding:9px 16px; font-size:14px; font-weight:700; color:#4a4f57; white-space:nowrap; }
.distrib-remain b{ color:var(--accent); margin-left:4px; font-size:16px; }
.distrib-row{ display:grid; grid-template-columns:repeat(7,1fr); gap:12px; margin-top:20px; }
.dcell{ background:#fff; border:1px solid #E7E9ED; border-radius:12px; padding:14px 10px; text-align:center; }
.dcell .dc-label{ display:block; font-size:13px; color:#6b7280; margin-bottom:12px; font-weight:600; }
.stepper{ display:flex; align-items:center; justify-content:center; gap:10px; }
.stepper button{
  width:30px; height:30px; border-radius:50%; border:1px solid #DDE3EC; background:#fff;
  color:#4a4f57; font-size:17px; font-weight:700; cursor:pointer; line-height:1; display:flex; align-items:center; justify-content:center;
}
.stepper button:hover:not(:disabled){ border-color:var(--accent); color:var(--accent); }
.stepper button:disabled{ opacity:.35; cursor:not-allowed; }
.stepper .st-val{ min-width:22px; font-size:17px; font-weight:800; color:var(--accent); }

/* 결제하기 */
.prod-pay{
  display:block; width:100%; margin-top:30px; height:64px; line-height:64px;
  text-align:center; text-decoration:none; background:#1c2230; color:#fff;
  border:0; border-radius:10px; font-size:18px; font-weight:700; letter-spacing:1px; cursor:pointer; transition:.18s;
}
.prod-pay:hover{ background:#11151f; }

/* ---------- 탭 ---------- */
.prod-tabs{
  position:sticky; top:var(--header-h); z-index:30; display:flex; gap:6px;
  background:#fff; border-bottom:1px solid #E3E5EA; margin-top:48px; padding-top:6px;
}
.prod-tabs a{
  padding:15px 26px; font-size:16px; font-weight:700; color:#9aa0a8; text-decoration:none;
  border-bottom:3px solid transparent; margin-bottom:-1px;
}
.prod-tabs a.active{ color:#22262e; border-bottom-color:#22262e; }

/* ---------- 섹션 ---------- */
.prod-sec{ scroll-margin-top:calc(var(--header-h) + 58px); padding:46px 0 10px; }
.prod-sec h2{ font-size:21px; font-weight:800; color:#22262e; margin:0 0 22px; }

/* 상품소개: 상세 이미지 */
.detail-imgs{ display:flex; flex-direction:column; align-items:center; gap:14px; }
.detail-ph{ width:100%; max-width:860px; border-radius:8px; overflow:hidden; }
.detail-ph img{ display:block; width:100%; height:auto; }

/* 사이즈 표 */
.size-table{ width:100%; border-collapse:collapse; border-top:2px solid #2b2f37; }
.size-table th, .size-table td{ border-bottom:1px solid #ECECEC; padding:15px 18px; font-size:14px; text-align:left; }
.size-table th{ background:#FAFBFC; color:#4a4f57; font-weight:700; width:160px; }
.size-table td{ color:#5a6068; }

/* 유의사항 */
.notice-list{ margin:0; padding:0; list-style:none; }
.notice-list li{ position:relative; padding:8px 0 8px 16px; font-size:14px; color:#5a6068; line-height:1.7; }
.notice-list li::before{ content:""; position:absolute; left:0; top:16px; width:4px; height:4px; border-radius:50%; background:#c4c8cf; }

/* ---------- 반응형 ---------- */
@media (max-width:860px){
  .prod-top{ grid-template-columns:1fr; gap:30px; }
  .distrib-row{ grid-template-columns:repeat(3,1fr); }
}
@media (max-width:560px){
  .product{ padding:34px 16px 70px; }
  .gal-main{ padding:12px; border-radius:10px; }
  .distrib-row{ grid-template-columns:repeat(2,1fr); }
  /* 컨셉표는 모바일에서도 2열(2쌍/행) 유지 → 세로로 안 길어짐 */
  .prod-table{ gap:10px 12px; padding:16px 16px; }
  .prod-tabs a{ padding:13px 16px; font-size:15px; }
  .gal-thumbs{ grid-template-columns:repeat(5,1fr); }
}