/* ══════════════════════════════════════════
   nonür · PASSAGE 002 · In Her Hands — v10 인터랙티브 (passage-02 전용)

   원본: passage-002-reading-motion-v10 의 base.css + review.css
   이 파일은 스크립트로 옮겨졌다. 원본에서 바꾼 것은 세 가지뿐이다.
   · 범위 — 모든 선택자 앞에 .ihh 를 붙여 사이트 공통 화면·장바구니·다른 향 페이지에 닿지 않게 했다.
           원본의 html/body/:root 규칙은 .ihh 자신에게, body에 붙던 커서 상태 클래스도 .ihh 에 붙는다.
   · 서체 이름 — 사이트의 Pretendard 등과 겹치지 않도록 ihh- 접두어를 붙였다. 파일은 원본 그대로다.
   · 캔버스 높이 — v10은 화면 전체를 캔버스로 설계했다. 사이트에서는 공통 상단 내비 아래가 캔버스다.
           그래서 제목 크기·이미지 크기의 svh 는 '내비 아래 높이'(--ihh-u)로, 낮은 화면 기준(max-height)은
           내비 높이만큼 올렸다(760→832, 740→808). 스크롤 길이(장면 높이 300·400svh)는 원본 그대로다.
   그 밖의 값·순서는 원본과 같다. 사이트 통합에 필요한 규칙은 맨 아래에 따로 모았다.
   ══════════════════════════════════════════ */
@font-face{font-family:ihh-maru;src:url(maru.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:ihh-pretendard;src:url(pretendard.woff2) format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:ihh-instrument;src:url(instrument.woff2) format("woff2");font-style:normal;font-weight:400;font-display:swap}
@font-face{font-family:ihh-instrument;src:url(instrument-italic.woff2) format("woff2");font-style:italic;font-weight:400;font-display:swap}
@font-face{font-family:ihh-manrope;src:url(manrope.woff2) format("woff2");font-weight:200 800;font-display:swap}
.ihh,.ihh *{box-sizing:border-box}
.ihh{background:#f1eee7}
.ihh{margin:0;color:#26382d;font-family:ihh-pretendard,sans-serif;word-break:keep-all}
.ihh a,.ihh button{color:inherit}
.ihh a{text-decoration:none}
.ihh button{font:inherit}
.ihh button,.ihh a{-webkit-tap-highlight-color:transparent}
.ihh button:focus-visible,.ihh a:focus-visible{outline:1px solid currentColor;outline-offset:5px}
.ihh [lang=en]{font-family:ihh-manrope,sans-serif}
.ihh .chapter{height:200svh}
.ihh .stage{--glow:#e2c49e;--px:65%;--py:42%;position:sticky;top:0;height:100svh;min-height:660px;overflow:hidden;isolation:isolate;background:#f1eee7;container-type:inline-size}
.ihh .dark{background:#101e2c;color:#f1eadf}
.ihh .topline{position:absolute;z-index:6;top:4%;left:5%;right:5%;display:flex;justify-content:space-between;align-items:baseline;gap:20px;font-size:11px;letter-spacing:.02em}
.ihh .topline a{font-size:11px}
.ihh .headline{position:absolute;z-index:1;top:16%;left:6%;width:88%}
.ihh .headline h2{font:400 clamp(80px,12cqw,190px)/.88 ihh-instrument,serif;letter-spacing:-.04em;word-break:normal;font-synthesis:none;margin:0}
.ihh .headline h2 span{display:block;width:max-content;white-space:nowrap}
.ihh .headline h2 span+span{font-style:italic;margin:.07em 0 0 8cqw;font-size:1.08em}
.ihh .headline>p{font:500 clamp(20px,2.2cqw,31px)/1.4 ihh-maru,serif;letter-spacing:-.025em;margin:2.3cqw 0 0 8cqw}
.ihh .art{position:absolute;z-index:2;top:-2%;right:-6%;width:76%;height:98%;background:url(artwork.webp) 1% .45%/204% 306%;mask-image:linear-gradient(to right,transparent,#000 90%),linear-gradient(to bottom,#000 63%,transparent 100%);mask-composite:intersect;opacity:.85;pointer-events:none}
.ihh .scene-2 .art{background-position:99% .45%}
.ihh .scene-3 .art{background-position:1% 50%}
.ihh .scene-4 .art{background-position:99% 50%}
.ihh .scene-5 .art{background-position:1% 99.55%}
.ihh .scene-6 .art{background-position:99% 99.55%}
.ihh .copy{position:absolute;z-index:4;left:6%;top:65%;width:39%;max-width:610px}
.ihh .copy p{font-size:clamp(14px,1.25cqw,18px);font-weight:400;line-height:1.75;letter-spacing:-.015em;margin:0}
.ihh .copy p[lang=en]{font-size:clamp(12px,.94cqw,14px);line-height:1.65;margin-top:15px;opacity:.76}
.ihh .left .art{left:-11%;right:auto;mask-image:linear-gradient(to left,transparent,#000 78%),linear-gradient(to bottom,#000 63%,transparent 100%);mask-composite:intersect}
.ihh .left .headline{left:42%;width:54%}
.ihh .left .headline h2{font-size:clamp(76px,10.6cqw,166px)}
.ihh .left .headline h2 span+span{margin-left:4cqw}
.ihh .left .headline>p{margin-left:4cqw}
.ihh .left .copy{left:53%;width:40%}
.ihh .center .headline{left:6%;width:88%;top:14%;text-align:center}
.ihh .center .headline h2{font-size:clamp(74px,10cqw,158px)}
.ihh .center .headline h2 span{margin-left:auto;margin-right:auto}
.ihh .center .headline h2 span+span{margin-left:auto;font-size:1.05em}
.ihh .center .headline>p{margin:2cqw 0 0}
.ihh .center .art{top:25%;height:45%;left:20%;right:auto;width:60%;opacity:.78;mask-image:linear-gradient(to bottom,transparent,#000 14%,#000 72%,transparent)}
.ihh .center .copy{top:67%;left:25%;width:50%;max-width:none;text-align:center}
.ihh .scene-4 .headline h2{font-size:clamp(68px,8.6cqw,142px)}
.ihh .scene-4 .copy{top:65%}
.ihh .scene-6 .copy{top:64%}
.ihh .notes{position:absolute;z-index:5;bottom:5.5%;left:6%;display:flex;gap:26px}
.ihh .notes:empty{display:none}
.ihh .notes button{position:relative;min-height:46px;background:none;border:0;padding:5px 0;cursor:pointer;text-align:left;transition:opacity .18s ease-out}
.ihh .notes button::after{content:'';position:absolute;left:0;bottom:0;width:100%;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .22s ease-out}
.ihh .notes button[aria-pressed=true]::after{transform:scaleX(1)}
.ihh .notes button span{display:block;font-size:12px;line-height:1.5}
.ihh .notes button span+span{font-size:10px;margin-top:4px;opacity:.7}
.ihh .left .notes{left:53%}
.ihh .center .notes{left:0;right:0;justify-content:center}
.ihh .selection{position:absolute;z-index:4;left:6%;bottom:14%;opacity:0;transition:opacity .25s ease-out;pointer-events:none}
.ihh .selection.visible{opacity:1}
.ihh .selection p{margin:0;font-size:12px;line-height:1.7}
.ihh .selection p[lang=en]{font-size:10px;opacity:.68}
.ihh .left .selection{left:53%}
.ihh .center .selection{left:0;right:0;text-align:center}
.ihh .scent-glow{position:absolute;z-index:2;inset:0;pointer-events:none;background:radial-gradient(ellipse 240px 190px at var(--px) var(--py),var(--glow),transparent 75%);opacity:0;mix-blend-mode:soft-light;transition:opacity .35s ease-out,background-color .35s ease-out}
.ihh .stage.touched .scent-glow{opacity:.65}
.ihh .dust{position:absolute;z-index:3;inset:0;width:100%;height:100%;pointer-events:none}
.ihh .meaning{position:absolute;z-index:4;top:45%;left:18%;right:18%;text-align:center;opacity:0;visibility:hidden}
.ihh .meaning p{font:500 clamp(21px,3cqw,42px)/1.6 ihh-maru,serif;margin:0}
.ihh .meaning p[lang=en]{font:400 clamp(18px,2.4cqw,34px)/1.5 ihh-instrument,serif;margin-top:18px}
.ihh .product-link{position:absolute;z-index:5;bottom:7%;left:6%;font-size:14px;padding-bottom:7px;border-bottom:1px solid currentColor}
.ihh .product-link span{font-size:11px;margin-left:14px;opacity:.7}
.ihh .scene-count{position:absolute;z-index:5;right:5%;bottom:5.5%;font:10px ihh-manrope,sans-serif;opacity:.55}
.ihh footer{background:#101e2c;color:#c9c7be;padding:34px 5%;display:flex;align-items:center;justify-content:space-between;gap:25px;font-size:11px}
.ihh footer a{line-height:1.8}
.ihh footer a span{display:block;font-size:10px;opacity:.7}
@media(max-width:700px){
 .ihh .chapter{height:190svh}
 .ihh .stage{min-height:720px}
 .ihh .topline{left:6%;right:6%;font-size:9px;gap:8px}
 .ihh .topline a{font-size:9px}
 .ihh .headline{top:13%;left:6%;width:90%}
 .ihh .headline h2{font-size:17.3cqw}
 .ihh .headline h2 span+span{font-size:19cqw;margin:1cqw 0 0 9cqw}
 .ihh .headline>p{font-size:4.3cqw;margin:3cqw 0 0 9cqw}
 .ihh .art{top:0;right:-10%;width:100%;height:77%}
 .ihh .copy{top:51%;left:6%;width:82%;max-width:none}
 .ihh .copy p{font-size:14px;line-height:1.7}
 .ihh .copy p[lang=en]{font-size:11px;line-height:1.6;margin-top:13px}
 .ihh .left .art{left:-28%;width:105%}
 .ihh .left .headline{left:25%;width:70%;top:14%}
 .ihh .left .headline h2{font-size:18cqw}
 .ihh .left .headline h2 span+span{margin-left:7cqw}
 .ihh .left .headline>p{margin-left:7cqw}
 .ihh .left .copy{left:26%;width:68%;top:51%}
 .ihh .center .headline{top:12%}
 .ihh .center .headline h2{font-size:18cqw}
 .ihh .center .headline h2 span+span{font-size:17cqw;margin-left:auto}
 .ihh .center .headline>p{font-size:4.3cqw;margin:3cqw 0 0}
 .ihh .center .art{left:0;top:24%;height:40%;width:100%}
 .ihh .center .copy{left:8%;width:84%;top:64%}
 .ihh .center .copy p{font-size:13px}
 .ihh .center .copy p[lang=en]{font-size:11px}
 .ihh .scene-3 .headline h2 span+span{font-size:16cqw}
 .ihh .scene-4 .headline{left:20%;width:78%}
 .ihh .scene-4 .headline h2{font-size:16cqw}
 .ihh .scene-4 .headline h2 span+span{font-size:15cqw;margin-left:2cqw}
 .ihh .scene-4 .copy{top:51%}
 .ihh .scene-6 .copy{top:54%}
 .ihh .notes{left:6%;gap:20px;bottom:5%}
 .ihh .notes button span{font-size:10px}
 .ihh .notes button span+span{font-size:9px}
 .ihh .left .notes{left:26%;gap:16px}
 .ihh .left .notes button span{font-size:9px}
 .ihh .selection{bottom:14%;left:6%}
 .ihh .selection p{font-size:11px}
 .ihh .left .selection{left:26%}
 .ihh .center .selection{bottom:13%}
 .ihh .meaning{left:8%;right:8%;top:42%}
 .ihh .meaning p{font-size:22px}
 .ihh .meaning p[lang=en]{font-size:23px}
 .ihh .product-link{bottom:8%;font-size:13px}
 .ihh .product-link span{font-size:10px;margin-left:9px}
 .ihh .scene-count{font-size:9px;bottom:2%}
}
@media(min-width:701px) and (max-height:832px){
 .ihh .stage{min-height:760px}
 .ihh .headline{top:13%}
 .ihh .headline h2{font-size:10.5cqw}
 .ihh .copy{top:65%}
 .ihh .selection{bottom:13%}
}
@media(prefers-reduced-motion:reduce){
 .ihh .chapter{height:auto}
 .ihh .stage{position:relative}
 .ihh .dust{display:none}
 .ihh .meaning{display:none}
 .ihh .scent-glow,.ihh .selection,.ihh .notes button::after{transition:none}
}
@media(max-width:700px) and (max-height:808px){
 .ihh .stage{min-height:100svh}
 .ihh .headline,.ihh .left .headline{top:11%}
 .ihh .headline h2{font-size:16cqw}
 .ihh .headline h2 span+span{font-size:17.5cqw}
 .ihh .copy,.ihh .left .copy,.ihh .scene-4 .copy,.ihh .scene-6 .copy{top:47%}
 .ihh .copy p{font-size:12px;line-height:1.6}
 .ihh .copy p[lang=en]{font-size:10px;line-height:1.5;margin-top:10px}
 .ihh .center .headline{top:10%}
 .ihh .center .copy{top:57%}
 .ihh .center .copy p{font-size:12px}
 .ihh .center .copy p[lang=en]{font-size:10px}
 .ihh .center .art{top:23%;height:34%}
 .ihh .selection,.ihh .center .selection{bottom:13%}
 .ihh .selection p{font-size:10px}
 .ihh .selection p[lang=en]{font-size:9px}
 .ihh .notes{bottom:4%}
 .ihh .scene-count{bottom:1.5%}
 .ihh .product-link{bottom:6%}
}
.ihh{--ko:ihh-maru;--cursor-color:#efb36f;--cursor-ink:#536043;--cx:70vw;--cy:42vh}
.ihh{font-family:ihh-pretendard,sans-serif}
.ihh .headline>p,.ihh .meaning>p:not([lang=en]){font-family:var(--ko),serif;font-weight:400;font-synthesis:none}
.ihh .headline>p{font-size:clamp(24px,2.3cqw,34px);letter-spacing:-.02em}
.ihh .meaning p{font-size:clamp(24px,2.5cqw,36px)}
.ihh .copy,.ihh .center .copy,.ihh .left .copy{left:50%;top:62%;width:min(84%,1080px);max-width:none;transform:translateX(-50%);text-align:center}
.ihh .copy p,.ihh .center .copy p{font-size:clamp(20px,1.6cqw,25px);line-height:1.65;font-weight:400;letter-spacing:-.025em}
.ihh .copy p[lang=en],.ihh .center .copy p[lang=en]{font-size:clamp(15px,1.1cqw,18px);line-height:1.6;max-width:960px;margin:15px auto 0;opacity:.8}
.ihh .notes,.ihh .center .notes,.ihh .left .notes{left:0;right:0;justify-content:center;gap:44px;bottom:5%}
.ihh .notes button{text-align:center;padding:7px 2px;min-width:110px}
.ihh .notes button span{font-size:18px}
.ihh .notes button span+span{font-size:14px;opacity:.85}
.ihh .selection,.ihh .center .selection,.ihh .left .selection{left:0;right:0;text-align:center;bottom:14%;font-weight:400}
.ihh .selection p{font-size:14px}
.ihh .selection p[lang=en]{font-size:12px}
.ihh .art,.ihh .left .art{background-image:url(artwork.webp);top:5%;right:1%;left:auto;width:min(60vw,calc(70 * var(--ihh-u)));height:auto;aspect-ratio:1;opacity:1;mask-image:radial-gradient(ellipse at 64% 50%,#000 44%,transparent 69%);mask-composite:add;transform-origin:right top}
.ihh .center .art{left:50%;right:auto;top:54%;width:min(58vw,calc(42 * var(--ihh-u)));height:auto;aspect-ratio:1;opacity:1;mask-image:radial-gradient(ellipse 27% 20% at 70% 34%,#000 58%,transparent 100%),radial-gradient(ellipse 32% 20% at 48% 50%,#000 58%,transparent 100%),radial-gradient(ellipse 29% 19% at 29% 65%,#000 58%,transparent 100%);transform-origin:center top}
.ihh .scent-glow{display:none}
.ihh .scene-count{bottom:3%}
.ihh .cursor-aura{position:fixed;z-index:30;left:var(--cx);top:var(--cy);width:190px;height:190px;transform:translate(-50%,-50%);pointer-events:none;opacity:.8;background:radial-gradient(circle,var(--cursor-color),transparent 68%);mix-blend-mode:multiply;transition:background .28s ease-out}
.ihh.cursor-dark .cursor-aura{mix-blend-mode:screen;opacity:.45}
.ihh .cursor-mark{position:fixed;z-index:120;left:var(--cx);top:var(--cy);transform:translate(-50%,-50%);width:26px;height:26px;pointer-events:none;display:grid;place-items:center;color:var(--cursor-ink);opacity:0}
.ihh .cursor-mark>span{width:5px;height:5px;background:currentColor;border-radius:50%}
.ihh .cursor-mark svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.ihh.custom-cursor,.ihh.custom-cursor *{cursor:none!important}
.ihh.custom-cursor .cursor-mark{opacity:1}
.ihh.cursor-dark .cursor-mark{color:#f0d4b1}
@media(max-width:700px){
 .ihh .headline>p,.ihh .center .headline>p{font-size:5cqw}
 .ihh .copy,.ihh .center .copy,.ihh .left .copy{left:50%;width:88%;top:54%}
 .ihh .copy p,.ihh .center .copy p{font-size:16px;line-height:1.65}
 .ihh .copy p[lang=en],.ihh .center .copy p[lang=en]{font-size:13px;line-height:1.6;margin-top:14px}
 .ihh .notes,.ihh .center .notes,.ihh .left .notes{bottom:7%;gap:16px}
 .ihh .notes button{min-width:90px;padding:7px 0}
 .ihh .notes button span,.ihh .left .notes button span{font-size:13px}
 .ihh .notes button span+span{font-size:12px}
 .ihh .selection,.ihh .center .selection{bottom:17%}
 .ihh .selection p{font-size:13px}
 .ihh .selection p[lang=en]{font-size:11px}
 .ihh .art,.ihh .left .art{width:min(70vw,calc(36 * var(--ihh-u)));right:1%;top:23%;height:auto}
 .ihh .center .art{width:min(76vw,calc(36 * var(--ihh-u)));left:50%;top:43%;height:auto}
 .ihh .scene-count{display:none}
 .ihh .cursor-aura{width:120px;height:120px}
 .ihh .center .copy{top:57%}
}
@media(max-width:700px) and (max-height:808px){
 .ihh .copy,.ihh .center .copy,.ihh .left .copy{top:47%;width:90%}
 .ihh .copy p,.ihh .center .copy p{font-size:14px;line-height:1.55}
 .ihh .copy p[lang=en],.ihh .center .copy p[lang=en]{font-size:11px;line-height:1.5;margin-top:10px}
 .ihh .notes,.ihh .center .notes{bottom:8%}
 .ihh .selection,.ihh .center .selection{bottom:20%}
 .ihh .selection p{font-size:11px}
 .ihh .selection p[lang=en]{font-size:10px}
 .ihh .notes button span{font-size:12px}
 .ihh .notes button span+span{font-size:10px}
 .ihh .center .art{top:41%;width:min(68vw,calc(34 * var(--ihh-u)));left:50%}
}
@media(pointer:coarse){
 .ihh .cursor-aura,.ihh .cursor-mark{display:none}
 .ihh.custom-cursor,.ihh.custom-cursor *{cursor:auto!important}
}
@media(prefers-reduced-motion:reduce){
 .ihh .cursor-aura{transition:none}
}
.ihh .copy p{text-wrap:balance}
.ihh .notes,.ihh .center .notes,.ihh .left .notes{top:auto;bottom:3%;left:50%;right:auto;width:min(580px,88%);height:120px;transform:translateX(-50%);display:block;pointer-events:none}
.ihh .notes button{position:absolute;left:var(--nx);top:var(--ny);width:160px;height:110px;min-width:0;padding:0;border:0;transform:translate(-50%,-50%);pointer-events:auto;text-align:center;transition:transform .12s linear}
.ihh .notes button:nth-child(1){--nx:18%;--ny:50%;}
.ihh .notes button:nth-child(2){--nx:50%;--ny:50%;}
.ihh .notes button:nth-child(3){--nx:82%;--ny:50%;}
.ihh .notes button::after{display:none}
.ihh .scent-core{position:relative;width:100%;height:100%;}
.ihh .scent-orb{position:relative;display:grid;place-items:center;margin:0 auto 9px;width:48px;height:48px;color:currentColor;isolation:isolate}
.ihh .scent-orb::before{content:'';position:absolute;z-index:-1;inset:-20px;background:radial-gradient(circle,var(--tone) 3%,transparent 68%);opacity:.85;transition:transform .22s ease-out,opacity .22s ease-out}
.ihh .scent-orb svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.25;stroke-linecap:round;stroke-linejoin:round;opacity:.75;transition:opacity .2s ease-out}
.ihh .scent-label{transition:opacity .18s ease-out}
.ihh .notes .scent-label span{display:block;font-size:18px;line-height:1.35}
.ihh .notes .scent-label span+span{font-size:13px;opacity:.8;margin-top:5px}
.ihh .scent-tip{position:absolute;top:56px;left:50%;width:185px;transform:translateX(-50%);opacity:0;pointer-events:none;transition:opacity .18s ease-out;line-height:1.55;text-wrap:balance;text-shadow:0 1px 12px #f1eee7,0 1px 4px #f1eee7}
.ihh .dark .scent-tip{text-shadow:0 1px 12px #101e2c,0 1px 4px #101e2c}
.ihh .scent-tip strong{display:block;font-size:15px;font-weight:400}
.ihh .scent-tip em{display:block;font:400 12px/1.55 ihh-manrope,sans-serif;opacity:.8;margin-top:5px}
.ihh .notes button:hover .scent-tip,.ihh .notes button:focus-visible .scent-tip,.ihh .notes button[aria-pressed=true] .scent-tip{opacity:1}
.ihh .notes button:hover .scent-label,.ihh .notes button:focus-visible .scent-label,.ihh .notes button[aria-pressed=true] .scent-label{opacity:0}
.ihh .notes button:hover .scent-orb::before,.ihh .notes button:focus-visible .scent-orb::before{transform:scale(1.2);opacity:1}
.ihh .notes button:hover svg,.ihh .notes button:focus-visible svg{opacity:1}
.ihh .scent-spray{position:absolute;left:50%;top:24px;pointer-events:none;opacity:var(--spray,0)}
.ihh .scent-spray i{position:absolute;left:0;top:0;width:2px;height:2px;background:var(--tone);border-radius:50%;transform:translate(calc(var(--dx) * var(--spread,0)),calc(var(--dy) * var(--spread,0)));box-shadow:0 0 2px currentColor}
.ihh .selection{display:none}
.ihh .notes button:focus-visible{outline:1px dotted currentColor;outline-offset:4px;border-radius:50%}
.ihh .scent-hidden{visibility:hidden}
@media(max-width:700px){
 .ihh .notes,.ihh .center .notes,.ihh .left .notes{width:94%;height:112px;bottom:20px}
 .ihh .notes button{width:100px;height:100px}
 .ihh .notes button:nth-child(1),.ihh .center .notes button:nth-child(1){--nx:18%;--ny:50%}
 .ihh .notes button:nth-child(2),.ihh .center .notes button:nth-child(2){--nx:50%;--ny:50%}
 .ihh .notes button:nth-child(3),.ihh .center .notes button:nth-child(3){--nx:82%;--ny:50%}
 .ihh .notes .scent-label span{font-size:14px}
 .ihh .notes .scent-label span+span{font-size:12px}
 .ihh .scent-orb{width:36px;height:36px;margin-bottom:8px}
 .ihh .scent-orb svg{width:21px;height:21px}
 .ihh .scent-orb::before{inset:-13px}
 .ihh .scent-tip{top:44px;width:125px}
 .ihh .scent-tip strong{font-size:13px}
 .ihh .scent-tip em{font-size:10px}
 .ihh .scent-spray{top:18px}
}
@media(max-width:700px) and (max-height:808px){
 .ihh .copy,.ihh .center .copy,.ihh .left .copy{top:53%}
 .ihh .notes,.ihh .center .notes,.ihh .left .notes{height:100px;bottom:8px}
 .ihh .notes button{width:92px;height:96px}
 .ihh .notes button:nth-child(1),.ihh .center .notes button:nth-child(1){--ny:50%}
 .ihh .notes button:nth-child(2),.ihh .center .notes button:nth-child(2){--ny:50%}
 .ihh .notes button:nth-child(3),.ihh .center .notes button:nth-child(3){--ny:50%}
 .ihh .scent-orb{height:28px;width:28px;margin-bottom:4px}
 .ihh .scent-orb svg{width:18px;height:18px}
 .ihh .notes .scent-label span{font-size:12px}
 .ihh .notes .scent-label span+span{font-size:11px;margin-top:3px}
 .ihh .scent-tip{top:33px;width:118px}
 .ihh .scent-tip strong{font-size:12px}
 .ihh .scent-tip em{font-size:10px}
 .ihh .scent-spray{top:14px}
}
@media(prefers-reduced-motion:reduce){
 .ihh .stage .scent-core{animation:none}
 .ihh .scent-spray{display:none}
 .ihh .notes button,.ihh .scent-core,.ihh .scent-tip,.ihh .scent-label,.ihh .scent-orb::before{transition:none}
}
.ihh .headline{z-index:auto}
.ihh .headline h2{position:relative;z-index:1}
.ihh .headline>p{position:relative;z-index:4}
.ihh .dark .headline>p,.ihh .dark .copy{text-shadow:0 1px 3px #101e2c,0 1px 10px #101e2c}
.ihh .left .art{left:1%;right:auto;width:min(56vw,calc(66 * var(--ihh-u)));transform-origin:left top;mask-image:radial-gradient(ellipse at 48% 50%,#000 35%,transparent 71%)}
.ihh .scene-3 .art{mask-image:radial-gradient(ellipse 28% 25% at 72% 72%,#000 40%,transparent 100%)}
.ihh .scene-6 .art{mask-image:radial-gradient(ellipse closest-side at 50% 50%,#000 40%,transparent 100%)}
.ihh .meaning{left:12%;right:12%;top:45%;text-shadow:0 1px 8px #f1eee7}
.ihh .dark .meaning{text-shadow:0 1px 8px #101e2c}
.ihh .meaning p[lang=en]{font-family:ihh-instrument,serif;font-size:clamp(22px,2.6cqw,38px);opacity:.86}
.ihh .notes:empty{display:none}
.ihh .copy{text-shadow:0 1px 8px #f1eee7}
.ihh .product-link{left:50%;transform:translateX(-50%);white-space:nowrap}
.ihh .notes button:nth-child(1){--pulse-delay:0s}
.ihh .notes button:nth-child(2){--pulse-delay:-1.3s}
.ihh .notes button:nth-child(3){--pulse-delay:-2.6s}
.ihh .scent-orb::before{animation:ihh-scent-breathe 4.2s ease-in-out var(--pulse-delay) infinite;animation-play-state:paused}
.ihh .stage.in-view .scent-orb::before{animation-play-state:running}
.ihh .notes button:hover .scent-orb::before,.ihh .notes button:focus-visible .scent-orb::before{animation:none;opacity:1;transform:scale(1.4)}
@keyframes ihh-scent-breathe{0%,100%{opacity:.42;transform:scale(.85)}50%{opacity:1;transform:scale(1.4)}}
@media(max-width:700px){
 .ihh .left .art{left:1%;right:auto;width:min(70vw,calc(36 * var(--ihh-u)));top:23%}
 .ihh .left .headline{left:28%;width:70%}
 .ihh .left .headline h2{font-size:17cqw}
 .ihh .scene-4 .headline{left:23%;width:75%}
 .ihh .scene-4 .headline h2{font-size:15.5cqw}
 .ihh .scene-4 .headline h2 span+span{font-size:15cqw}
 .ihh .meaning{left:7%;right:7%;top:43%}
 .ihh .meaning p{font-size:22px;line-height:1.7}
 .ihh .meaning p[lang=en]{font-size:25px}
 .ihh .notes .scent-label span{font-size:12px}
 .ihh .notes .scent-label span+span{font-size:12px}
 .ihh .scene-2 .scent-label span[lang=en]{min-height:32px;display:grid;place-items:center}
 .ihh .product-link span{font-size:10px}
}
@media(max-width:700px) and (max-height:808px){
 .ihh .left .art,.ihh .right .art{width:min(68vw,calc(34 * var(--ihh-u)));top:22%}
 .ihh .meaning p{font-size:18px}
 .ihh .meaning p[lang=en]{font-size:21px}
 .ihh .notes .scent-label span{font-size:11px}
 .ihh .notes .scent-label span+span{font-size:11px}
 .ihh .scene-2 .scent-label span[lang=en]{min-height:28px}
 .ihh .product-link{bottom:8%}
 .ihh .product-link span{display:block;margin:5px 0 0;text-align:center}
}
@media(prefers-reduced-motion:reduce){
 .ihh .stage .scent-orb::before{animation:none;opacity:.75;transform:none}
}
@media(min-width:701px){
 .ihh .headline h2{font-size:clamp(80px,min(12cqw,calc(17 * var(--ihh-u))),190px)}
 .ihh .left .headline h2{font-size:clamp(76px,min(10.6cqw,calc(15.6 * var(--ihh-u))),166px)}
 .ihh .center .headline h2{font-size:clamp(74px,min(10cqw,calc(15 * var(--ihh-u))),158px)}
 .ihh .scene-4 .headline h2{font-size:clamp(68px,min(8.6cqw,calc(13.5 * var(--ihh-u))),142px)}
}
.ihh .chapter{height:300svh}
.ihh .chapter.has-meaning{height:400svh}
.ihh .copy{display:grid}
.ihh .copy-step{grid-area:1/1}
.ihh .scene-6 .headline{left:6%;width:88%;text-align:center}
.ihh .scene-6 .headline h2 span{margin-left:auto;margin-right:auto}
.ihh .scene-6 .headline>p{margin-left:0;margin-right:0}
@media(prefers-reduced-motion:reduce){
 .ihh .chapter,.ihh .chapter.has-meaning{height:auto}
 .ihh .stage{height:auto;min-height:100svh;padding:62svh 0 170px}
 .ihh .stage .copy{position:relative;top:auto;left:auto;transform:none;margin:0 auto;display:flex;flex-direction:column;gap:32px}
 .ihh .meaning{display:block;position:relative;top:auto;left:auto;right:auto;width:84%;margin:64px auto 0}
}

/* ══ 사이트 통합 — v10 원본에는 없는 부분 ══ */

/* 사이트 공통 스타일(ui-v2)이 body에 준 줄간격·자간이 장면 안으로 상속되지 않게 원본 기본값으로 되돌린다 */
.ihh{display:block;position:relative;line-height:normal;letter-spacing:normal;font-weight:400;text-align:left;--ihh-nav:72px;--ihh-u:calc((100svh - var(--ihh-nav)) / 100)}
@media(max-width:767px){.ihh{--ihh-nav:68px}}

/* 공통 상단 내비(불투명) 아래에서 장면이 온전히 보이게 — PASSAGE 003 게임과 같은 원칙.
   원본의 최소 높이 규칙을 같은 순서로 다시 적되 내비 높이만큼 뺀다. 스크롤 길이(장면 높이)는 원본 그대로다. */
.ihh .stage{top:var(--ihh-nav);height:calc(100svh - var(--ihh-nav));min-height:calc(660px - var(--ihh-nav))}
@media(max-width:700px){.ihh .stage{min-height:calc(720px - var(--ihh-nav))}}
@media(min-width:701px) and (max-height:832px){.ihh .stage{min-height:calc(760px - var(--ihh-nav))}}
@media(max-width:700px) and (max-height:808px){.ihh .stage{min-height:calc(100svh - var(--ihh-nav))}}
@media(prefers-reduced-motion:reduce){.ihh{padding-top:var(--ihh-nav)}.ihh .stage{top:auto;height:auto;min-height:calc(100svh - var(--ihh-nav))}}

/* 읽는 호흡(문장 한 쌍씩, 의미 문구 전 뜸들임)은 그대로 두고 길이만 줄인다.
   원본은 단독 페이지용이라 장면당 3화면(300svh, 의미 장면 400svh)이었는데,
   상세페이지에서는 향 설명·상품까지 20화면을 내려야 해서 너무 길었다.
   전환 시점은 전부 장면 길이에 대한 비율이라 리듬은 그대로 유지된다. */
.ihh .chapter{height:180svh}
.ihh .chapter.has-meaning{height:240svh}

/* 장면을 불러오는 동안 자리를 잡아 둔다 — 아래 향 설명이 먼저 보였다가 밀려나지 않게.
   스크립트가 꺼진 환경에서는 자리를 잡지 않는다. 불러오기에 실패하면 영역을 접는다. */
@media(scripting:enabled) and (prefers-reduced-motion:no-preference){.ihh:empty{min-height:calc(1200svh + var(--ihh-end,106px))}}
.ihh.is-failed{display:none}

/* 장면 위에서는 v10 커서만 보인다. 벗어나면 사이트의 비행기 커서로 돌아간다. */
html.ihh-here .cursor{visibility:hidden}
html:not(.ihh-here) .ihh .cursor-aura,html:not(.ihh-here) .ihh .cursor-mark{visibility:hidden}