/* css/pages/fragrance.css — FRAGRANCE 페이지 전용 (3단계 G2, 2026-09-30)
   · site.css 다음에 로드. 범위 = main.fragrancepage 아래로 한정 (접두사 fr2- : site.css 의 기존 .fr-* 와 충돌 방지)
   · 목적: 독립 컬렉션 "One Forest, Multiple States" — 기원 → 세 가지 향 → 두 형태 → 출시 준비(COMING SOON)·B2B
   · 패턴 순서: 분할 히어로 → 2단 글 → 3단 목록 → 2단 사양 → 어두운 최종 CTA
   · 이미지: 기존 EDP 3컷(web/wide)만, 자르기는 object-fit/object-position 만. Solid Perfume 이미지 미사용(용기 정본 미확정) */

.fragrancepage h2,.fragrancepage h3{font-size:inherit;font-weight:inherit}
.fragrancepage .ds-h2{font-size:var(--ds-fs-h2);font-weight:500}
.fragrancepage .ds-h2.en-d,.fragrancepage .ds-h3.en-d{font-weight:400}
.fragrancepage .ds-h3{font-size:var(--ds-fs-h3);font-weight:500}
.fragrancepage .ds-body+.ds-body{margin-top:16px}

/* ---------- 01 HERO ---------- */
.fragrancepage .fr2-hero{padding:0;background:var(--ds-paper-2);border-bottom:1px solid var(--ds-line)}
.fragrancepage .fr2-hero-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);height:440px;
  padding-right:max(0px,calc((100% - var(--ds-max)) / 2))}
.fragrancepage .fr2-hero-tx{align-self:center;padding:48px var(--ds-gutter) 48px clamp(24px,3.5vw,64px)}
.fragrancepage .fr2-h1{font-family:var(--serif);font-size:var(--ds-fs-h1);font-weight:400;letter-spacing:.04em;line-height:1.3;color:var(--ds-ink);text-wrap:balance}
.fragrancepage .fr2-hero-p{margin-top:22px;font-family:var(--serif);font-size:var(--ds-fs-small);letter-spacing:.08em;color:var(--ds-text-2)}
.fragrancepage .fr2-hero-fig{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2px;height:100%;overflow:hidden;background:#fff}
.fragrancepage .fr2-hero-fig picture{display:block;height:100%;min-width:0}
.fragrancepage .fr2-hero-fig img{width:100%;height:100%;object-fit:cover;object-position:50% 50%}
@media(max-width:860px){
  .fragrancepage .fr2-hero-in{grid-template-columns:1fr;height:auto;padding-right:0}
  .fragrancepage .fr2-hero-fig{order:-1;height:320px}
  .fragrancepage .fr2-hero-tx{padding:32px var(--ds-gutter) 36px}
}
@media(max-width:640px){
  .fragrancepage .fr2-hero-fig{height:240px}
  .fragrancepage .fr2-hero-fig img{object-position:50% 60%}
  .fragrancepage .fr2-hero-tx{padding:26px var(--ds-gutter) 30px}
  .fragrancepage .fr2-hero-p{margin-top:14px;font-size:15px} /* step4: 모바일 본문성 글자 15px */
}

/* ---------- 02 ORIGIN · 04 FORMATS · 05 CLOSE : 2단(제목 | 내용) ---------- */
.fragrancepage .fr2-origin-in,.fragrancepage .fr2-fmt-in,.fragrancepage .fr2-close-in{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--ds-gap) clamp(32px,5vw,80px);align-items:start}
.fragrancepage .fr2-geo{margin-top:28px;padding-top:16px;border-top:1px solid var(--ds-line);font-family:var(--serif);font-size:12px;letter-spacing:.14em;color:var(--ds-text-2)}
@media(max-width:860px){.fragrancepage .fr2-origin-in,.fragrancepage .fr2-fmt-in,.fragrancepage .fr2-close-in{grid-template-columns:1fr}}

/* ---------- 03 THE COLLECTION : 3단 ---------- */
.fragrancepage .fr2-scent{display:flex;flex-direction:column}
.fragrancepage .fr2-fig{aspect-ratio:4/5;margin-bottom:22px;background:#fff}
.fragrancepage .fr2-fig img{object-position:50% 55%}
.fragrancepage .fr2-no{font-family:var(--serif);font-size:var(--ds-fs-label);letter-spacing:var(--ds-ls-label);color:var(--ds-text-2);margin-bottom:8px}
.fragrancepage .fr2-nm{font-size:clamp(19px,1.6vw,23px);color:var(--ds-ink)}
.fragrancepage .fr2-sig{margin-right:12px;padding-right:12px;border-right:1px solid #cfcfcf;color:var(--ds-ink-2)}
.fragrancepage .fr2-lead{margin:14px 0 18px;font-size:var(--ds-fs-body);line-height:1.75;color:var(--ds-ink-2)}
.fragrancepage .fr2-notes{width:100%;border-collapse:collapse}
.fragrancepage .fr2-notes th,.fragrancepage .fr2-notes td{border-top:1px solid var(--ds-line);padding:10px 0;vertical-align:top;text-align:right}
.fragrancepage .fr2-notes th{width:78px;font-family:var(--serif);font-weight:400;font-size:10.5px;letter-spacing:.14em;color:var(--ds-text-2);padding-top:13px}
.fragrancepage .fr2-notes td{font-size:14.5px;line-height:1.6;color:var(--ds-ink)}
@media(max-width:860px){
  .fragrancepage .fr2-list{gap:48px}
  .fragrancepage .fr2-fig{aspect-ratio:auto;height:420px}
}
@media(max-width:640px){.fragrancepage .fr2-fig{height:360px}}

/* ---------- 04 TWO FORMATS ---------- */
.fragrancepage .fr2-fmt{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--ds-ink)}
.fragrancepage .fr2-fmt .f{padding:26px 0 8px 24px}
.fragrancepage .fr2-fmt .f+.f{border-right:1px solid var(--ds-line);padding-right:24px}
.fragrancepage .fr2-fmt .n{font-family:var(--serif);font-size:12px;letter-spacing:.14em;color:var(--ds-text-2);margin-bottom:10px}
.fragrancepage .fr2-fmt h3{font-family:var(--serif);font-size:var(--ds-fs-h3);font-weight:400;letter-spacing:.08em;color:var(--ds-ink);margin-bottom:18px}
.fragrancepage .fr2-fmt .v{font-family:var(--serif);font-size:clamp(26px,2.4vw,34px);color:var(--ds-ink);line-height:1.2}
.fragrancepage .fr2-fmt .b{margin-top:8px;font-size:15px;color:var(--ds-ink-2)}
@media(max-width:400px){.fragrancepage .fr2-fmt .f{padding-left:12px}.fragrancepage .fr2-fmt .f+.f{padding-right:14px}.fragrancepage .fr2-fmt h3{font-size:15px}}

/* ---------- 05 COMING SOON (어두운 최종 CTA) ---------- */
.fragrancepage .fr2-cta .btn{min-width:220px}
@media(max-width:640px){.fragrancepage .fr2-cta{grid-template-columns:1fr}.fragrancepage .fr2-cta .btn{width:100%}}

/* 앵커 이동 시 고정 헤더(80px)에 가리지 않도록 */
.fragrancepage [id]{scroll-margin-top:88px}

/* =====================================================================
   모바일 제품 이미지 전체 표시 (2026-09-30 최종) — FRAGRANCE · 한·영 공통
   대상: 860px 이하(승인 디자인이 이미 1열 세로 배치로 바뀌는 구간)에만 적용.
   문제: EDP 원본 389×649(0.60). 승인 배치의 히어로 칸 320px(≤860)·240px(≤640)과
         제품컷 높이 420px(≤860)·360px(≤640) 에서 비율이 어긋나 cover 로 잘렸다 —
         제품컷은 1열이 되며 상자가 넓어져 잘림이 가장 컸다.
   조치: 히어로 3컷과 제품 3컷을 원본 비율(389/649)로 표시한다.
         제품컷은 1열에서 상자가 본문 폭 전체로 커지므로 최대 폭 360px 을 둔다.
   유지: 861px 이상 PC 배치(3열 히어로 · 4/5 제품컷 · cover)는 승인 디자인 그대로.
   ===================================================================== */
@media(max-width:860px){
  .fragrancepage .fr2-hero-fig{height:auto}
  .fragrancepage .fr2-hero-fig picture{height:auto}
  .fragrancepage .fr2-hero-fig img{height:auto;aspect-ratio:389/649;object-fit:contain;background:#fff}
  .fragrancepage .fr2-fig{aspect-ratio:389/649;height:auto;max-width:360px}
  .fragrancepage .fr2-fig>img{object-fit:contain;background:#fff}
}

/* FINAL REVIEW 2026-09-30: consistent hero alignment */
@media (min-width:861px){
  .fragrancepage .fr2-hero-in{padding-right:0;grid-template-columns:minmax(430px,40%) minmax(0,1fr);height:440px}
  .fragrancepage .fr2-hero-tx{padding:32px clamp(32px,5.42vw,104px) 32px clamp(24px,3vw,56px);min-width:0}
  .fragrancepage .fr2-hero-tx h1{white-space:normal;overflow-wrap:break-word}
}

/* Three portrait bottles require a stacked layout before they become narrow crops. */
@media (min-width:861px) and (max-width:1024px){
 .fragrancepage .fr2-hero-in{grid-template-columns:1fr;height:auto}
 .fragrancepage .fr2-hero-fig{order:-1;height:auto}
 .fragrancepage .fr2-hero-fig picture{height:auto}
 .fragrancepage .fr2-hero-fig img{height:auto;object-fit:contain}
 .fragrancepage .fr2-hero-tx{padding:32px var(--ds-gutter) 36px}
}