/*
  [생성일] 2026-08-24
  [경위] 해맑은목장 상품 상세 - 사장님 요청 "IWA처럼" (에디토리얼 구조로 전면 개편)
  [변경이력]
    - 2026-08-24: 최초 생성. page.css의 탭 구조를 대체한다.

  [IWA에서 가져온 설계 원칙]
    1. 카드(박스)를 쓰지 않는다. 선(hairline)과 여백으로만 나눈다.
    2. 섹션 제목은 왼쪽, 영문 라벨은 오른쪽, 그 아래 진한 밑줄 한 줄.
    3. 그리드를 반으로 나누지 않는다 (3:2, 5:7, 2:3 같은 비대칭).
    4. 사진은 비율을 강제하지 않고 원본 그대로 흐르게 둔다.
    5. 큰 숫자와 큰 제품명으로 리듬을 만든다.
  [해맑은목장에 맞게 바꾼 것]
    · 서체를 세리프에서 SUIT(산세리프)로. 홈과 같은 브랜드로 보여야 한다.
    · 색은 Forest 팔레트 그대로.
*/

.dt{
  --sec:clamp(64px,8vw,120px);   /* 섹션 사이 간격 */
  --gut:24px;                    /* 좌우 여백 */
  --dt-max:1320px;
}
.dt .wrapd{max-width:var(--dt-max); margin:0 auto; padding:0 var(--gut)}

/* ===== 공통 : 작은 라벨 ===== */
.kick{
  font-size:11.5px; letter-spacing:.3em; color:var(--muted);
  text-transform:uppercase; font-weight:600;
}
.shead{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:16px; border-bottom:1px solid var(--ink);
  padding-bottom:14px; margin-top:var(--sec);
}
.shead h2{font-size:clamp(20px,2.4vw,27px); font-weight:800; letter-spacing:-.035em}
.shead .lab{
  font-size:12px; letter-spacing:.2em; color:var(--muted);
  text-transform:uppercase; font-weight:700; white-space:nowrap;
}

/* ===== 1. 상단 : 갤러리 + 구매 ===== */
.top{display:grid; grid-template-columns:1.08fr .92fr; gap:clamp(28px,4.5vw,72px); align-items:start}
.gal{position:sticky; top:calc(var(--nav-h) + 18px)}
.gal-main{overflow:hidden; background:var(--bone-2)}
.gal-main img{width:100%; aspect-ratio:1/1; object-fit:cover}
.gal-th{display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-top:8px}
.gal-th button{
  overflow:hidden; background:var(--bone-2);
  border:1px solid transparent; transition:border-color .2s var(--ease);
}
.gal-th button.on{border-color:var(--ink)}
.gal-th img{width:100%; aspect-ratio:1/1; object-fit:cover}

.buy-kick{font-size:11.5px; letter-spacing:.28em; color:var(--muted); font-weight:600; text-transform:uppercase}
.buy h1{margin-top:14px; font-size:clamp(23px,2.7vw,31px); font-weight:800; letter-spacing:-.04em; line-height:1.34}
.buy-desc{margin-top:9px; font-size:13px; color:var(--muted); letter-spacing:.02em}
.buy-price{
  margin-top:22px; padding-bottom:20px; border-bottom:1px solid var(--line);
  font-family:SUIT,Pretendard,sans-serif; font-size:clamp(24px,2.7vw,30px);
  font-weight:800; letter-spacing:-.045em;
}
.buy-price em{font-style:normal; font-size:13px; font-weight:600; color:var(--muted); margin-left:12px; letter-spacing:-.01em}

.buy-notes{padding:20px 0; border-bottom:1px solid var(--line)}
.buy-notes .nt-key{font-size:12px; letter-spacing:.16em; color:var(--muted); font-weight:700; text-transform:uppercase}
.buy-notes .nt-line{margin-top:11px; font-size:14.5px; line-height:1.9; color:var(--ink-2)}
.buy-notes .nt-line b{color:var(--ink); font-weight:700}

.buy-opt{padding:18px 0; border-bottom:1px solid var(--line); font-size:13.5px; color:var(--ink-2)}
.buy-opt b{color:var(--ink)}

.buy-qty{display:flex; align-items:center; justify-content:space-between; gap:14px; padding:20px 0}
.buy-qty > span{font-size:13.5px; font-weight:700}
.qbox{display:flex; align-items:center; border:1px solid var(--line-strong)}
.qbox button{width:38px; height:38px; display:grid; place-items:center; color:var(--ink-2); font-size:17px; line-height:1}
.qbox button:hover{color:var(--forest)}
.qbox span{min-width:40px; text-align:center; font-weight:700; font-family:SUIT,sans-serif}

.buy-sum{
  display:flex; align-items:baseline; justify-content:space-between;
  padding-top:18px; border-top:1px solid var(--ink);
}
.buy-sum > span{font-size:13.5px; font-weight:700}
.buy-sum b{font-family:SUIT,sans-serif; font-size:clamp(22px,2.4vw,27px); font-weight:800; letter-spacing:-.045em}
.buy-ship{margin-top:8px; font-size:12px; color:var(--muted); text-align:right}
.buy-act{display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:22px}
.buy-act .btn{border-radius:0; padding:17px 20px}

/* 정기구독 유도 : 현행 상세에는 이 길이 없다 */
.buy-sub{
  margin-top:14px; padding:16px 18px;
  border:1px solid rgba(30,64,52,.22); background:var(--forest-soft);
  display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap;
}
.buy-sub b{display:block; font-size:13.5px; color:var(--forest); letter-spacing:-.02em}
.buy-sub span{font-size:12px; color:var(--ink-2)}
.buy-sub a{
  font-size:12.5px; font-weight:700; color:var(--forest);
  border-bottom:1px solid var(--forest); padding-bottom:2px; white-space:nowrap;
}

/* ===== 2. 워드마크 ===== */
.mark{text-align:center; padding-top:var(--sec)}
.mark-kicker{font-size:11.5px; letter-spacing:.32em; color:var(--muted); font-weight:600}
.mark-nm{
  font-family:SUIT,Pretendard,sans-serif; font-weight:800;
  font-size:clamp(30px,5vw,54px); letter-spacing:-.05em; line-height:1.18; margin-top:16px;
}
.mark-sub{margin-top:13px; color:var(--muted); font-size:13.5px}

/* ===== 3. 밴드 (큰 숫자) ===== */
.band{
  margin-top:var(--sec); background:var(--bone-2);
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
}
.band-in{
  display:grid; grid-template-columns:3fr 2fr; gap:clamp(28px,5vw,80px);
  align-items:center; max-width:var(--dt-max); margin:0 auto;
  padding:clamp(48px,6.5vw,88px) var(--gut);
}
.band-in img{width:100%; height:auto}
.band-num{
  font-family:SUIT,sans-serif; font-size:clamp(40px,4.6vw,58px);
  font-weight:800; margin-top:14px; line-height:1; letter-spacing:-.05em; color:var(--forest);
}
.band-num small{font-size:.34em; color:var(--muted); letter-spacing:-.02em; margin-left:9px; font-weight:700}
.band-h{margin-top:18px; font-size:clamp(19px,2.3vw,25px); font-weight:800; line-height:1.5; letter-spacing:-.035em}
.band-p{margin-top:16px; color:var(--ink-2); font-size:14.5px; line-height:1.95}

/* ===== 4. 인용 (좌측 세로선) ===== */
.quote{max-width:var(--dt-max); margin:var(--sec) auto 0; padding:0 var(--gut)}
.quote-in{border-left:1px solid var(--ink); padding-left:clamp(20px,3vw,40px); max-width:660px}
.quote-p{margin-top:18px; font-size:clamp(17px,2.1vw,21px); line-height:2; font-weight:500; letter-spacing:-.025em}

/* ===== 5. 시그니처 (글이 사진 위로 겹침) ===== */
.sig{position:relative; padding-top:var(--sec)}
.sig-grid{display:grid; grid-template-columns:5fr 7fr; align-items:center; gap:0}
.sig-ph{grid-column:2; grid-row:1}
.sig-ph img{width:100%; height:auto}
.sig-tx{grid-column:1; grid-row:1; position:relative; z-index:2}
/* 두 줄짜리 한글 문장이 들어가므로 IWA의 한 단어짜리보다 작게 잡는다 */
.sig-nm{
  font-family:SUIT,sans-serif; font-weight:800;
  font-size:clamp(38px,7vw,92px); letter-spacing:-.055em; line-height:1.06;
  margin-right:clamp(-110px,-7vw,-50px);   /* 사진 쪽으로 살짝 넘어간다 */
  color:var(--forest);
}
.sig-key{margin-top:24px; font-size:15.5px; font-weight:700; letter-spacing:-.025em}
.sig-p{margin-top:16px; color:var(--ink-2); font-size:14.5px; line-height:1.95; max-width:36ch}

/* ===== 6. 3단 (시간 순서) ===== */
.cols{display:grid; grid-template-columns:repeat(3,1fr); border-bottom:1px solid var(--line)}
.col-c{padding:26px 22px 30px}
.col-c + .col-c{border-left:1px solid var(--line)}
.col-t{font-size:13px; letter-spacing:.22em; text-transform:uppercase; font-weight:800; color:var(--forest)}
.col-when{font-size:12.5px; color:var(--muted); margin-top:4px}
.col-ls{margin-top:14px; font-size:14.5px; color:var(--ink-2); line-height:1.95}
.col-ls b{color:var(--ink); font-weight:700}

/* ===== 7. 먹는 법 ===== */
.use{
  display:grid; grid-template-columns:1fr 1.15fr;
  gap:clamp(28px,5vw,72px); align-items:center; padding-top:var(--sec);
}
.use img{width:100%; height:auto}
.use-h{margin-top:16px; font-size:clamp(19px,2.3vw,25px); font-weight:800; letter-spacing:-.035em; line-height:1.5}
.use-ls{margin-top:20px; font-size:14.5px; color:var(--ink-2); line-height:1.95}
.use-ls li{padding-left:14px; position:relative}
.use-ls li::before{content:"·"; position:absolute; left:2px; color:var(--muted)}
.use-ls b{color:var(--ink); font-weight:700}

/* ===== 8. 포장 밴드 ===== */
.pack{
  margin-top:var(--sec); background:var(--bone-2);
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
}
.pack-in{
  display:grid; grid-template-columns:2fr 3fr; gap:clamp(28px,5vw,80px);
  align-items:center; max-width:var(--dt-max); margin:0 auto;
  padding:clamp(48px,6vw,80px) var(--gut);
}
.pack-in img{width:100%; height:auto}
.pack-p{margin-top:18px; font-size:clamp(16px,2vw,19px); line-height:2.1; max-width:34ch; letter-spacing:-.025em}

/* ===== 9. 구매 후기 (카드 반복 금지) ===== */
.rev-best{margin-top:34px}
.rev-best .qm{font-family:SUIT,sans-serif; font-size:40px; line-height:0; color:var(--muted); display:block; height:22px}
.rev-best .tx{font-size:clamp(17px,2.2vw,22px); line-height:1.8; font-weight:600; margin-top:18px; max-width:32ch; letter-spacing:-.03em}
.rev-best .by{margin-top:18px; font-size:12.5px; color:var(--muted); display:flex; align-items:center; gap:9px; flex-wrap:wrap}
.rev-best .by b{color:var(--ink-2); font-weight:700}
.rev-ls{margin-top:38px; border-top:1px solid var(--line)}
.rev-ls li{
  display:grid; grid-template-columns:1fr auto; gap:18px; align-items:baseline;
  padding:19px 0; border-bottom:1px solid var(--line); font-size:14.5px; color:var(--ink-2);
}
.rev-ls .meta{font-size:11.5px; color:var(--muted); white-space:nowrap}
.chip-ex{
  background:var(--bone-2); color:var(--muted);
  padding:3px 9px; font-weight:700; font-size:11px; letter-spacing:-.01em;
}

/* ===== 10. 정보 아코디언 ===== */
.info{margin-top:34px; border-top:1px solid var(--line)}
.info-q{
  width:100%; text-align:left; padding:20px 44px 20px 0;
  font-size:15px; font-weight:700; letter-spacing:-.025em;
  position:relative; color:var(--ink); border-bottom:1px solid var(--line);
}
.info-q::after{
  content:""; position:absolute; right:6px; top:50%;
  width:10px; height:10px; margin-top:-6px;
  border-right:1.5px solid var(--muted); border-bottom:1.5px solid var(--muted);
  transform:rotate(45deg); transition:transform .28s var(--ease);
}
.info-q.on::after{transform:rotate(-135deg)}
.info-a{padding:20px 0 26px; border-bottom:1px solid var(--line); font-size:14px; color:var(--ink-2); line-height:1.95}
.info-a p + p{margin-top:12px}
.info-a dl{display:grid; grid-template-columns:130px 1fr; gap:10px 18px}
.info-a dt{color:var(--muted); font-weight:600}
.info-a dd{margin:0}

/* ===== 11. 함께 좋은 제품 ===== */
.also{display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(16px,2.4vw,32px); margin-top:34px}
.also a{display:block; border-top:1px solid var(--ink); padding-top:16px}
.also .nm{font-size:14.5px; font-weight:700; letter-spacing:-.025em; line-height:1.5}
.also .sub{margin-top:5px; font-size:12px; color:var(--muted)}
.also .pr{margin-top:12px; font-family:SUIT,sans-serif; font-weight:800; font-size:15px; letter-spacing:-.04em}
.also a:hover .nm{color:var(--forest)}

/* ===== 모바일 하단 구매바 (현행 사이트에 없는 것) ===== */
.buybar{
  position:fixed; left:0; right:0; bottom:0; z-index:65;
  background:rgba(255,255,255,.97); backdrop-filter:blur(10px);
  border-top:1px solid var(--line); padding:11px 15px;
  display:none; align-items:center; gap:12px;
  transform:translateY(100%); transition:transform .3s var(--ease);
  padding-bottom:calc(11px + env(safe-area-inset-bottom));
}
.buybar.show{transform:translateY(0)}
.buybar-price{flex:0 0 auto}
.buybar-price small{display:block; font-size:11px; color:var(--muted)}
.buybar-price b{font-family:SUIT,sans-serif; font-size:17px; font-weight:800; letter-spacing:-.04em}
.buybar .btn{flex:1 1 auto; border-radius:0}

/* ===== 반응형 ===== */
@media (max-width:1024px){
  .top{grid-template-columns:1fr; gap:var(--gap-7)}
  .gal{position:static}
  .also{grid-template-columns:repeat(2,1fr); gap:var(--gap-5)}
}
@media (max-width:860px){
  .band-in{grid-template-columns:1fr}
  .pack-in{grid-template-columns:1fr}
  .use{grid-template-columns:1fr}
  .sig-grid{grid-template-columns:1fr}
  .sig-ph{grid-column:1; grid-row:1}
  .sig-tx{
    grid-column:1; grid-row:2; margin-top:-30px;
    background:var(--bone); padding:22px 18px 0 0; width:fit-content;
  }
  .sig-nm{margin-right:0}
}
@media (max-width:767px){
  .cols{grid-template-columns:1fr}
  .col-c + .col-c{border-left:none; border-top:1px solid var(--line)}
  .buybar{display:flex}
  body.has-buybar{padding-bottom:78px}
  .info-a dl{grid-template-columns:96px 1fr; gap:8px 12px}
  .rev-ls li{grid-template-columns:1fr; gap:8px}
}
@media (max-width:420px){
  .dt{--gut:15px}
  .buy-act{grid-template-columns:1fr; gap:8px}
}