/* ══════════════════════════════════════════
   NONÜR · passage — 향 상세 페이지
   크기는 base.css의 5단만 쓴다. 새 크기를 만들지 않는다.
   ══════════════════════════════════════════ */

/* 세리프는 이 페이지에만 건다 — body.pg 스코프. 크기는 base.css의 5단 그대로.
   영문 Prata / 국문 Noto Serif KR. Apple Myungjo 폴백은 쓰지 않는다(궁서체처럼 보인다). */
.pg{background:var(--charcoal);color:var(--white);font-family:var(--sans)}

/* ── 서체 역할 ──
   주제문(제목·라벨·노트명)만 세리프. 본문은 프리텐다드.
   mono는 좌표 한 줄에만 남긴다 — 셋을 본문에서 섞으면 어지럽다. */
.pg h1,.pg h2,
.pg .pg-read__label,.pg .pg-notes__label,.pg .pg-notes__list b,
.pg .pg-mv__no,.pg .pg-hero__kicker,
.pg .pg-line__head p:first-child,.pg .pg-line__shot figcaption,
.pg .pg-spec dt,.pg .pg-pick__name{
  font-family:'Prata','Noto Serif KR',Georgia,serif;font-weight:400}
.pg .pg-hero__coord{font-family:var(--mono)}

/* 줄바꿈 — 마지막 줄에 한 단어만 남지 않게 */
.pg p,.pg li{text-wrap:pretty}
.pg h1,.pg h2{text-wrap:balance}

/* ── 히어로 ───────────────────────────────── */
.pg-hero{position:relative;height:100svh;min-height:34rem;overflow:hidden;display:flex;align-items:flex-end}
.pg-hero__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transform:scale(1.06);will-change:transform}
.pg-hero::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(14,16,14,.62) 0%,rgba(14,16,14,.12) 34%,rgba(14,16,14,.86) 100%)}
.pg-hero__copy{position:relative;z-index:2;padding:0 8vw 12svh;max-width:56rem}
.pg-hero__kicker{font-size:var(--fs-cap);letter-spacing:.22em;color:rgba(250,248,243,.7)}
.pg-hero h1{margin-top:1.6rem;font-size:var(--fs-display);line-height:1.06;letter-spacing:-.015em}
.pg-hero__kr{margin-top:1rem;font-size:var(--fs-lead);font-weight:300;color:rgba(250,248,243,.82)}
.pg-hero__coord{margin-top:2.8rem;font-family:var(--mono);font-size:var(--fs-cap);
  letter-spacing:.06em;color:rgba(250,248,243,.5)}

/* 스크롤 유도 — 조용하게 */
.pg-cue{position:absolute;right:8vw;bottom:12svh;z-index:2;display:flex;align-items:center;gap:.9rem;
  font-size:var(--fs-cap);letter-spacing:.2em;color:rgba(250,248,243,.5)}
.pg-cue i{display:block;width:1px;height:3.4rem;background:linear-gradient(180deg,rgba(250,248,243,.5),transparent)}

/* ── 읽는 구간 ─────────────────────────────── */
/* 읽는 단은 가운데로 — 왼쪽에 붙이면 오른쪽이 통째로 비어 균형이 깨진다 */
.pg-read{padding:11svh 8vw;max-width:60rem;margin:0 auto}
.pg-read__label{font-family:var(--mono);font-size:var(--fs-cap);letter-spacing:.22em;color:var(--stone)}
/* 읽는 문단 규칙은 pg-read와 씬 텍스트에 똑같이 적용된다 —
   한쪽에만 걸면 씬 안에서 국문이 영문과 같은 크기로 올라와 위계가 무너진다. */
/* 본문을 살짝 낮춰야 강조가 '밝아지는' 것으로 읽힌다.
   본문이 순백이면 강조가 올라갈 자리가 없다. */
.pg-read p,.pg-scene__text p{margin-top:2.2rem;font-size:calc(var(--fs-body) * 1.15);font-weight:300;
  line-height:1.6;letter-spacing:-.012em;color:rgba(250,248,243,.82)}
.pg-read p.kr,.pg-scene__text p.kr{font-size:calc(var(--fs-body) * 1.08);font-weight:400;color:rgba(250,248,243,.78);
  line-height:1.8;margin-top:1.1rem;word-break:keep-all}
.pg-read__gap{margin-top:3.6rem!important}

/* 스크롤로 들어올 때 무게가 붙는 문장 */
/* 강조 전 상태도 '읽히는' 밝기여야 한다 — .42는 어두워서 빈 줄처럼 보였다 */
.em{color:rgba(250,248,243,.64);font-weight:400;
  transition:color .9s var(--ease),font-weight .9s var(--ease)}
.em.on{color:#fffdf7;font-weight:700}
.em--moss.on{color:#bcd3b3}
.em--warm.on{color:#e6c79a}

/* 문단 자체의 등장 */
.rise{opacity:0;transform:translateY(26px);
  transition:opacity 1s var(--ease),transform 1s var(--ease)}
.rise.on{opacity:1;transform:none}

/* ── 고정 이미지 + 흐르는 텍스트 (애플식) ───── */
.pg-scene{position:relative;border-top:1px solid rgba(250,248,243,.12);display:grid;grid-template-columns:1fr 1fr;gap:0;align-items:start}
.pg-scene__media{position:sticky;top:0;height:100svh;overflow:hidden}
.pg-scene__media img{width:100%;height:100%;object-fit:cover}
.pg-scene__media::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,transparent 60%,rgba(28,27,24,.5) 100%)}
.pg-scene__text{padding:17svh 8vw 17svh 6vw}
.pg-scene--flip .pg-scene__media{order:2}
.pg-scene--flip .pg-scene__media::after{background:linear-gradient(270deg,transparent 60%,rgba(28,27,24,.5) 100%)}
.pg-scene--flip .pg-scene__text{order:1;padding:17svh 6vw 17svh 8vw}

/* ── 향의 세 시간 ──────────────────────────── */
.pg-mv__head{display:flex;align-items:baseline;gap:1.2rem 1.6rem;flex-wrap:wrap}
.pg-mv__no{font-family:var(--mono);font-size:var(--fs-cap);letter-spacing:.2em;color:var(--stone)}
.pg-mv__head h2{font-size:var(--fs-title);letter-spacing:-.01em;line-height:1.16}
.pg-mv__head em{font-style:normal;font-size:var(--fs-body);color:rgba(250,248,243,.76)}

/* 노트 — 좌표가 아니므로 sans. 숫자는 tabular */
/* ── 노트 ──
   이 페이지의 결론이다. 본문(프리텐다드)과 다른 서체·다른 크기 단을 써서
   읽는 흐름에서 분리시킨다. 이름은 display 단, 국문은 캡션 단. */
.pg-notes{margin-top:4rem;padding-top:2.4rem;border-top:1px solid rgba(250,248,243,.28)}
.pg-notes__label{font-size:var(--fs-cap);letter-spacing:.22em;color:var(--stone)}
.pg-notes__list{margin-top:1.8rem;display:flex;flex-direction:column}
.pg-notes__list li{display:grid;grid-template-columns:2.6rem 1fr;align-items:baseline;
  gap:0 1.2rem;list-style:none;padding:1.15rem 0;border-bottom:1px solid rgba(250,248,243,.1)}
.pg-notes__list li:last-child{border-bottom:0}
.pg-notes__list li::before{content:counter(note,decimal-leading-zero);counter-increment:note;
  font-family:var(--sans);font-size:var(--fs-cap);font-variant-numeric:tabular-nums;
  color:rgba(250,248,243,.4);letter-spacing:.08em}
.pg-notes__list{counter-reset:note}
.pg-notes__list b{display:block;font-size:var(--fs-lead);line-height:1.1;
  letter-spacing:-.01em;color:var(--white)}
/* b와 i는 형제라 그리드가 i를 번호 칸(1열)으로 보낸다 — 2열로 못 박는다 */
.pg-notes__list i{grid-column:2;display:block;margin-top:.45rem;font-style:normal;
  font-family:var(--sans);font-size:var(--fs-body);font-weight:400;letter-spacing:.06em;
  color:rgba(250,248,243,.6)}
.pg-notes__list::marker{content:none}

/* ── 가운데 정렬 구간(머무름) ── */
.pg-read--center{text-align:center;max-width:52rem}
.pg-read--center .pg-read__label{letter-spacing:.2em;font-size:var(--fs-cap)}
.pg-read--center p{margin-left:auto;margin-right:auto}

/* ── 스펙 ─────────────────────────────────── */
.pg-spec{padding:14svh 8vw;border-top:1px solid rgba(250,248,243,.12)}
.pg-spec__grid{margin-top:3.4rem;display:grid;gap:0;
  grid-template-columns:repeat(auto-fit,minmax(15rem,1fr))}
.pg-spec__grid>div{padding:2rem 0;border-top:1px solid rgba(250,248,243,.1);padding-right:2rem}
.pg-spec dt{font-family:var(--mono);font-size:var(--fs-cap);letter-spacing:.18em;color:var(--stone)}
.pg-spec dd{margin-top:.9rem;font-size:var(--fs-body);line-height:1.6}
.pg-spec dd small{display:block;font-size:var(--fs-cap);color:rgba(250,248,243,.72);margin-top:.35rem}

/* ── 라인업 선택 ───────────────────────────── */
.pg-line{background:var(--ivory);color:var(--charcoal);padding:16svh 8vw}
.pg-line__head{max-width:38rem}
.pg-line__head p:first-child{font-family:var(--mono);font-size:var(--fs-cap);letter-spacing:.22em;color:#57534b}
.pg-line__head h2{margin-top:1.6rem;font-size:var(--fs-title);letter-spacing:-.012em}
.pg-line__head span{display:block;margin-top:.9rem;font-size:var(--fs-body);color:#57534b}

.pg-line__body{margin-top:7svh;display:grid;grid-template-columns:1.05fr .95fr;gap:6vw;align-items:center}
.pg-line__shot{position:relative;border-radius:6px;overflow:hidden;background:var(--charcoal)}
.pg-line__shot img{display:block;width:100%;height:auto}
.pg-line__shot figcaption{position:absolute;left:1.4rem;bottom:1.2rem;
  font-family:var(--mono);font-size:var(--fs-cap);letter-spacing:.16em;color:rgba(250,248,243,.62)}

/* 선택 카드 */
.pg-pick{display:grid;gap:1rem}
.pg-pick__opt{position:relative;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:1.4rem;
  width:100%;text-align:left;padding:1.9rem 1.8rem;border-radius:5px;cursor:pointer;
  background:transparent;border:1px solid rgba(28,27,24,.2);color:inherit;font:inherit;
  transition:border-color .35s var(--ease),background .35s var(--ease),transform .35s var(--ease)}
.pg-pick__opt:hover{border-color:rgba(28,27,24,.44);transform:translateY(-2px)}
.pg-pick__opt[aria-pressed="true"]{border-color:var(--moss);background:rgba(58,74,59,.06)}
.pg-pick__mark{width:16px;height:16px;border-radius:50%;border:1px solid rgba(28,27,24,.35);position:relative}
.pg-pick__opt[aria-pressed="true"] .pg-pick__mark{border-color:var(--moss)}
.pg-pick__mark::after{content:"";position:absolute;inset:3px;border-radius:50%;background:var(--moss);
  transform:scale(0);transition:transform .3s var(--ease)}
.pg-pick__opt[aria-pressed="true"] .pg-pick__mark::after{transform:scale(1)}
.pg-pick__name{display:block;font-size:var(--fs-body);font-weight:500}
.pg-pick__desc{display:block;margin-top:.3rem;font-size:var(--fs-cap);color:#57534b}
.pg-pick__price{font-size:var(--fs-body);font-variant-numeric:tabular-nums;white-space:nowrap}

.pg-pick__cta{margin-top:1.4rem;display:flex;align-items:center;justify-content:space-between;gap:1.4rem;
  padding:1.5rem 1.8rem;border-radius:5px;background:var(--charcoal);color:var(--white);
  font-size:var(--fs-body);min-height:44px;transition:background .35s var(--ease)}
.pg-pick__cta:hover{background:#000}
.pg-pick__cta b{font-weight:500}
.pg-pick__cta span{font-variant-numeric:tabular-nums}
.pg-pick__note{margin-top:1.6rem;font-size:var(--fs-cap);color:#57534b;line-height:1.75}

/* ── 반응형 ───────────────────────────────── */
@media (max-width:991px){
  .pg-scene{grid-template-columns:1fr}
  .pg-scene__media{height:62svh}
  .pg-scene__media::after{background:linear-gradient(180deg,transparent 62%,rgba(28,27,24,.62) 100%)}
  .pg-scene--flip .pg-scene__media{order:0}
  .pg-scene--flip .pg-scene__media::after{background:linear-gradient(180deg,transparent 62%,rgba(28,27,24,.62) 100%)}
  .pg-scene__text,.pg-scene--flip .pg-scene__text{order:0;padding:9svh 8vw 12svh}
  .pg-line__body{grid-template-columns:1fr;gap:4rem}
}
@media (max-width:767px){
  .pg-hero__copy{padding:0 6vw 14svh}
  .pg-cue{display:none}
  .pg-read{padding:13svh 6vw 9svh}   /* 상단은 고정 내비를 피할 만큼 */
  .pg-spec,.pg-line{padding-left:6vw;padding-right:6vw}
  .pg-scene__text{padding:8svh 6vw 10svh}
  .pg-pick__opt{grid-template-columns:auto 1fr;row-gap:.8rem;padding:1.6rem 1.4rem}
  .pg-pick__price{grid-column:2;justify-self:start}
}

/* ── 모션 축소 · no-JS 안전판 ───────────────── */
html.rm .pg-hero__img{transform:none}
html.rm .pg-scene__media{position:static;height:62svh}
html.rm .rise,html:not(.js) .rise{opacity:1;transform:none}
html.rm .em,html:not(.js) .em{color:var(--white);font-weight:600}

/* ── 라인업: 상품 4종 · 이미지 교체 ───────── */
.pg-line__shot{aspect-ratio:4/5}
.pg-line__shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity .55s var(--ease)}
.pg-line__shot img.is-on{opacity:1}
html:not(.js) .pg-line__shot img{opacity:1}

.pg-pick__opt{grid-template-columns:auto 1fr auto}
.pg-pick__sub{display:block;margin-top:.45rem;font-size:var(--fs-cap);color:#57534b}

/* ── 라벨 크기 확정 ──
   `.pg-read p` 같은 문단 규칙이 <p> 라벨을 잡아 26px로 키우므로(특이도 0,2,1 > 0,1,0)
   여기서 못을 박는다. 섹션 주제문은 리드, 노트 라벨은 캡션. */
.pg .pg-read__label{
  font-size:var(--fs-lead);letter-spacing:.04em;line-height:1.3;
  color:rgba(250,248,243,.62);margin:0}
.pg .pg-notes__label{
  font-size:var(--fs-cap);letter-spacing:.22em;line-height:1.4;
  color:var(--stone);margin:0}
.pg .pg-line__head p:first-child{
  font-size:var(--fs-cap);letter-spacing:.22em;color:#57534b}
.pg .pg-hero__kicker{letter-spacing:.18em}
.pg .pg-mv__no{font-size:var(--fs-cap);letter-spacing:.2em}