/* ============================================================
   NIO Fragrance (rigel-scents.com/nio)
   Natural Ingredient Observer: 자연에서 유래한 향 분자로 한 사람을 위한 향을 짓는 향수 브랜드
   리겔 연구소(Rigel Lab)와 같은 가족. 거의 검은 무대 위에 강조는 흰색, 향의 빛깔은 라벨과 빛에만.
   색과 글자는 맨 위 :root 에서 바꿉니다. 브랜드 가이드(Design System)와 같은 값입니다.
   ============================================================ */
/* 한글 글꼴 Pretendard 1.3.9 (SIL 오픈 폰트 라이선스, fonts/Pretendard-OFL.txt).
   굵기 하나로 다 되는 가변 글꼴에서 자주 쓰는 한글 2,350자와 영문·기호(라틴, 문장부호 블록 통째로)만 남긴 파일(685 KB).
   글자 모핑(torph)이 띄어쓰기를 붙는 빈칸(U+00A0)으로 바꾸므로 그 글자가 꼭 있어야 함(빠지면 사파리에서 글자가 겹침).
   파일을 다시 만들면 이름도 바꿀 것(/fonts/* 는 한 해 캐시)
   nio/index.html 이 미리 불러오고, 처음 막이 걷히기 전에 다 받아 두므로 글꼴이 바뀌며 깜빡이지 않음(block).
   드문 글자는 Noto Sans KR 로 채움 */
@font-face {
  font-family: 'Pretendard NIO';
  font-style: normal;
  font-weight: 45 930;
  font-display: block;
  src: url(/fonts/pretendard-nio-1.3.9b.woff2) format('woff2-variations'), url(/fonts/pretendard-nio-1.3.9b.woff2) format('woff2');
}
:root {
  /* 브랜드 색: 리겔과 같은 네 가지 + 로고의 먹색 */
  --blue: #B7C3DE;          /* Authentic Blue */
  --coral: #D9948E;         /* Coral Red */
  --gray: #A8A9AC;          /* Mineral Gray */
  --white: #FAFAF8;         /* Pure White: 강조 */
  --ink: #0E0F12;           /* Observer Ink */
  /* 무대 (어두운 바탕)와 글자 */
  --bg: #0A0B0D;
  --bg-1: #0E0F12;
  --bg-2: #141519;
  --bg-3: #1B1C21;
  --fg: #F3F3F1;
  --fg-2: #C6C7CB;          /* 본문 */
  --muted: #8E8F95;         /* 보조 (4.9:1) */
  --faint: #5D5E64;         /* 장식 */
  --line: rgba(255, 255, 255, .1);
  --line-2: rgba(255, 255, 255, .22);
  --paper: #F4F4F1;         /* 라벨, 노트 카드의 흰 종이 */
  --prism: linear-gradient(90deg, #B7C3DE, #FFFFFF 45%, #F6E6A6 62%, #D9948E);
  /* 유리 테두리의 빛 갈라짐 (파랑 → 흰빛 → 노랑 → 분홍 → 보라) */
  --rim: conic-gradient(from 200deg at 22% 0%, rgba(165, 205, 255, .95), rgba(255, 255, 255, .2) 11%, rgba(255, 236, 170, .9) 20%, rgba(255, 150, 168, .85) 29%, rgba(255, 255, 255, .05) 42%, rgba(255, 255, 255, .035) 68%, rgba(195, 175, 255, .85) 85%, rgba(165, 205, 255, .95));

  /* 글꼴: 영문은 브랜드 글꼴 Red Hat Text(브랜드 키트), 병 라벨·노트 카드만 Poppins·Lora, 한글은 제목·본문 모두 Pretendard 고딕
     (fonts/pretendard-nio-*.woff2, 이 파일 맨 위 @font-face). 한글 제목은 700 으로 굵게.
     --f-serif-ko 는 예전 이름(한글 명조 제목)을 그대로 둔 것이고 지금은 고딕입니다 */
  --f-ko: 'Pretendard NIO', 'Noto Sans KR', 'Apple SD Gothic Neo', 'Malgun Gothic', system-ui, sans-serif;
  --f-en: 'Red Hat Text', 'Pretendard NIO', 'Noto Sans KR', system-ui, sans-serif;
  --f-display: var(--f-en);
  --f-sans: var(--f-ko);
  --f-serif: var(--f-en);
  --f-serif-ko: var(--f-ko);
  --f-label: 'Lora', Georgia, serif;
  --f-mono: var(--f-en);
  /* 병 라벨·노트 카드처럼 '인쇄된 물건'의 글꼴 (js/nio-data.js 의 METRICS 가 이 글꼴의 폭으로 이름 크기를 맞춤) */
  --f-print: 'Poppins', var(--f-ko);
  --f-print-s: 'Lora', Georgia, serif;
  /* 명조로 남기는 영문: 첫 화면 글자 벽, 브랜드 문장, 분자 장면 한 줄 (사용자 요청 2026-10-24) */
  --f-serif-en: 'Lora', 'Pretendard NIO', 'Noto Sans KR', Georgia, serif;

  /* 움직임 (맞춤 향 화면 css/blend.css 도 이 이름을 씀) */
  --ease: cubic-bezier(.22, .61, .36, 1);
  --ease-io: cubic-bezier(.65, 0, .35, 1);
  --expo: cubic-bezier(.16, 1, .3, 1);
  --spring: cubic-bezier(.34, 1.56, .64, 1);

  /* 여백 */
  --gut: clamp(16px, 4.4vw, 64px);
  --padL: max(var(--gut), env(safe-area-inset-left, 0px));
  --padR: max(var(--gut), env(safe-area-inset-right, 0px));
  --pad: var(--gut);
  --max: 1320px;
  --hdr: 72px;
  --top: 0px;
  --sec: clamp(96px, 12vw, 190px);
  color-scheme: dark;
}
/* 휴대폰 브라우저의 다크 모드에게 '이 사이트는 처음부터 어둡다'고 알리는 표시 (2026-11-05).
   nio/index.html 의 <meta name="color-scheme" content="dark"> 와 위 color-scheme: dark 로
   크롬·안드로이드 앱 속 브라우저는 색을 그대로 둠. 삼성 인터넷은 다크 모드 규칙이 있는지도 본다는 말이 있어
   같은 값을 한 번 더 적음 (보통 화면은 그대로. 색은 위 :root 의 이름을 그대로 씀) */
@media (prefers-color-scheme: dark) {
  :root { color-scheme: dark; }
  html, body { background-color: var(--bg); }
}
@media (max-width: 900px) { :root { --hdr: 62px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: auto; background: var(--bg); }
body {
  margin: 0; background: var(--bg); color: var(--fg);
  font: 400 16px/1.8 var(--f-sans); letter-spacing: -.005em;
  word-break: keep-all; overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
[hidden] { display: none !important; }
::selection { background: var(--blue); color: var(--ink); }
:focus-visible { outline: 2px solid var(--fg); outline-offset: 3px; }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.skip { position: fixed; left: 12px; top: -60px; z-index: 100; padding: 10px 16px; background: var(--fg); color: var(--bg); font-size: 14px; }
.skip:focus { top: 12px; }

.wrap { width: 100%; max-width: calc(var(--max) + var(--padL) + var(--padR)); margin: 0 auto; padding-inline: var(--padL) var(--padR); }
main { position: relative; z-index: 1; display: block; min-height: 60vh; }
main:focus { outline: none; }
.page { overflow-x: clip; }
.ch { position: relative; padding-block: var(--sec); }

/* ---------- 배경: 사진 무대(bgx), 관찰 입자와 분자 구름(field), 마우스 빛 ---------- */
.bgx { position: fixed; inset: 0; z-index: 0; display: block; width: 100%; height: 100%; pointer-events: none; }
.bgx-css { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.bgx-css i { position: absolute; inset: 0; background-repeat: no-repeat; opacity: 0; will-change: opacity; }
.bgx-css .bx-l { border-radius: 50%; }
/* 브랜드 빛: WebGL 셰이더의 aura 와 같은 자리·색·번짐 (가우시안을 여러 단계로 나눈 원형 그러데이션. 어두운 바탕 위라 보통 섞기로도 더하기와 같아 보임. 업데이트 44) */
.bgx-css .bx-u { background:
  radial-gradient(88vmax 88vmax at 10% 14%, rgba(183, 195, 222, .4), rgba(183, 195, 222, .34) 19%, rgba(183, 195, 222, .2) 39%, rgba(183, 195, 222, .09) 57%, rgba(183, 195, 222, .025) 76%, transparent),
  radial-gradient(85vmax 85vmax at 90% 88%, rgba(217, 148, 142, .4), rgba(217, 148, 142, .34) 19%, rgba(217, 148, 142, .2) 39%, rgba(217, 148, 142, .09) 57%, rgba(217, 148, 142, .025) 76%, transparent),
  radial-gradient(66vmax 66vmax at 86% 10%, rgba(199, 184, 238, .22), rgba(199, 184, 238, .18) 19%, rgba(199, 184, 238, .11) 39%, rgba(199, 184, 238, .05) 57%, transparent),
  radial-gradient(70vmax 70vmax at 14% 92%, rgba(168, 169, 172, .28), rgba(168, 169, 172, .24) 19%, rgba(168, 169, 172, .14) 39%, rgba(168, 169, 172, .06) 57%, transparent),
  radial-gradient(60vmax 60vmax at 50% 50%, rgba(245, 244, 241, .04), rgba(245, 244, 241, .025) 30%, transparent),
  rgba(183, 195, 222, .01); }
/* 유리 구슬의 무지갯빛 테(bx-r)와 빛 맺힘(bx-h): WebGL 을 쓸 수 없을 때 셰이더의 band·bead 를 흉내 (업데이트 44) */
.bgx-css .bx-r, .bgx-css .bx-h { inset: auto; border-radius: 50%; will-change: opacity, transform; }
.bgx-css .bx-r { mix-blend-mode: hard-light; background: conic-gradient(from var(--rot, 0deg), #ff7ab0, #ffd66e, #7dffc4, #6eb8ff, #b77aff, #ff7ab0);
  -webkit-mask: radial-gradient(closest-side, transparent var(--b0, 80%), rgba(0, 0, 0, .25) calc(var(--b0, 80%) + (96.5% - var(--b0, 80%)) * .6), #000 96.5%, transparent 100%);
          mask: radial-gradient(closest-side, transparent var(--b0, 80%), rgba(0, 0, 0, .25) calc(var(--b0, 80%) + (96.5% - var(--b0, 80%)) * .6), #000 96.5%, transparent 100%); }
.bgx-css .bx-h { background: radial-gradient(20% 20% at 32% 29%, rgba(255, 255, 255, .6), rgba(255, 255, 255, .2) 45%, transparent), radial-gradient(14% 14% at 67% 73%, rgba(255, 255, 255, .14), transparent), radial-gradient(closest-side, transparent 45%, rgba(10, 11, 13, .25) 75%, rgba(10, 11, 13, .55) 100%); }
.bgx-css .bx-v { background: radial-gradient(ellipse at 50% 50%, transparent 35%, rgba(10, 11, 13, .92) 100%); opacity: .6; }
.field { position: fixed; inset: 0; z-index: 0; width: 100%; height: 100%; pointer-events: none; }
/* 반자동 스크롤의 문: 장면이 다 그려질 때까지 문서 끝을 그 자리에 둠 */
html.gated #app { overflow: clip; }   /* 높이(max-height)는 js/nio.js 의 gate() 가 #app 에 바로 적음 */
html.gated #nf { display: none; }
.cglow {
  --gc: 183, 195, 222;
  position: fixed; left: 0; top: 0; z-index: 0; width: 720px; height: 720px; margin: -360px 0 0 -360px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(var(--gc), .11), rgba(var(--gc), .04) 45%, transparent 100%);
  pointer-events: none; opacity: 0; transition: opacity .8s var(--ease); will-change: transform;
}
.cglow.on { opacity: 1; }

/* ---------- 글자 체계 ---------- */
.eyebrow { margin: 0; font: 500 12px/1.4 var(--f-display); letter-spacing: .3em; text-transform: uppercase; color: var(--muted); }
.h-mega { margin: 0; font: 600 clamp(58px, 12.4vw, 196px)/.9 var(--f-display); letter-spacing: -.035em; text-transform: uppercase; }
.h-xl { margin: 0; font: 700 clamp(32px, 4.6vw, 66px)/1.26 var(--f-serif-ko); letter-spacing: -.035em; text-wrap: balance; }
.h-l { margin: 0; font: 700 clamp(26px, 3vw, 42px)/1.36 var(--f-serif-ko); letter-spacing: -.03em; text-wrap: balance; }
.lead { margin: 0; color: var(--fg-2); font-size: clamp(16px, 1.25vw, 18px); line-height: 1.85; max-width: 34em; }
.muted-note { margin: 18px 0 0; color: var(--muted); font-size: 14px; }
.sec-head { display: grid; gap: 18px; }
.sec-head.row { display: flex; justify-content: space-between; align-items: end; gap: 24px; flex-wrap: wrap; }
.sec-head.row > div { display: grid; gap: 18px; }

/* 한 글자씩 떠오르는 제목 (js/nio.js 의 splitText) */
.split .sw { display: inline-block; white-space: nowrap; overflow: hidden; vertical-align: top; padding-bottom: .1em; margin-bottom: -.1em; }
.split .sc { display: inline-block; }
html.js .split .sc {
  --k: clamp(0, calc((var(--r, 0) * 1.7 - var(--ci) / var(--cn) * .7) * 2.2), 1);
  transform: translate3d(0, calc((1 - var(--k)) * 108%), 0) rotate(calc((1 - var(--k)) * 7deg));
  opacity: calc(var(--k) * 1.3);
}

/* 스크롤로 드러나는 것: 화면 아래에서 기다리다 올라오는 만큼 또렷해짐 (--r: 0~1, js 가 적음) */
html.js .rv { opacity: var(--r, 0); transform: translate3d(0, calc((1 - var(--r, 0)) * 56px), 0); }
html.js .rv.split { opacity: 1; transform: none; }
html.js .lead.rv, html.js .eyebrow.rv { filter: blur(calc((1 - var(--r, 0)) * 8px)); }

/* ---------- 단추 ---------- */
.btn {
  --b-bg: var(--fg); --b-fg: var(--bg); --b-bd: var(--fg);
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  min-height: 54px; padding: 0 30px; border: 1px solid var(--b-bd); border-radius: 999px; background: var(--b-bg); color: var(--b-fg);
  font: 500 14.5px/1.2 var(--f-sans); letter-spacing: .01em; cursor: pointer; overflow: hidden; isolation: isolate; white-space: nowrap;
  transition: color .45s var(--ease), background-color .45s var(--ease), border-color .45s var(--ease), transform .5s var(--expo);
}
.btn::before { content: ''; position: absolute; inset: -2px; z-index: -1; border-radius: inherit; background: var(--prism); transform: translateY(102%); transition: transform .6s var(--expo); }
.btn:hover::before, .btn:focus-visible::before { transform: none; }
.btn:hover, .btn:focus-visible { --b-fg: var(--ink); --b-bd: transparent; }
.btn .arr { width: 16px; height: 10px; flex: none; transition: transform .45s var(--expo); }
.btn:hover .arr { transform: translateX(5px); }
.btn.light { --b-bg: var(--fg); --b-fg: var(--bg); --b-bd: var(--fg); }
.btn.line { --b-bg: transparent; --b-fg: var(--fg); --b-bd: var(--line-2); }
.btn.big { min-height: 62px; padding: 0 36px; font-size: 15.5px; }
.btn.wide { width: 100%; }
.btn[disabled] { opacity: .45; cursor: not-allowed; }
.link { display: inline-flex; align-items: center; gap: 10px; padding-bottom: 5px; border-bottom: 1px solid var(--line-2); font: 500 14.5px/1.3 var(--f-sans); color: var(--fg); cursor: pointer; background: none; border-top: 0; border-left: 0; border-right: 0; transition: border-color .4s; }
.link:hover { border-bottom-color: var(--fg); }
.link .arr { width: 14px; height: 9px; transition: transform .4s var(--expo); }
.link:hover .arr { transform: translateX(5px); }
.btn-row { display: flex; flex-wrap: wrap; gap: 10px; margin: 32px 0 0; }
/* 흰 단추: 가장자리에 옅은 무지개 번짐 */
.btn.light { box-shadow: 0 0 0 1px rgba(255, 255, 255, .55), -3px 0 14px -6px rgba(150, 190, 255, .55), 3px 0 14px -6px rgba(255, 150, 170, .5), 0 14px 34px -18px rgba(0, 0, 0, .7); }
/* 선 단추: 유리 */
.btn.line { --b-bg: rgba(255, 255, 255, .07); --b-bd: rgba(255, 255, 255, .14); -webkit-backdrop-filter: blur(16px) saturate(1.6); backdrop-filter: blur(16px) saturate(1.6); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .24), 0 12px 30px -18px rgba(0, 0, 0, .7); }
.btn.line::after, .nh-cta::after { content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none; background: var(--rim); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); opacity: .7; transition: opacity .5s; }
.btn.line:hover::after { opacity: 0; }

/* ============================================================
   유리 (글래스모피즘): 뒤를 흐리게 비추는 판과, 빛이 무지갯빛으로 갈라지는 테두리
   .gl 을 붙이면 유리판. 마우스를 올리면 빛이 닿는 자리(--gx, --gy)가 포인터를 따라 움직임 (js 의 interactions)
   ============================================================ */
.gl {
  position: relative; isolation: isolate; border-radius: var(--gr, 22px);
  background: radial-gradient(80% 70% at var(--gx, 20%) var(--gy, 0%), rgba(255, 255, 255, .1), transparent 70%), linear-gradient(150deg, rgba(255, 255, 255, .085), rgba(255, 255, 255, .03) 40%, rgba(255, 255, 255, .015) 64%, rgba(255, 255, 255, .05));
  -webkit-backdrop-filter: blur(22px) saturate(1.5); backdrop-filter: blur(22px) saturate(1.5);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .24), inset 0 0 0 1px rgba(255, 255, 255, .045), inset 0 -18px 30px -24px rgba(255, 255, 255, .2), 0 30px 70px -36px rgba(0, 0, 0, .8);
}
.gl::before {
  content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; padding: 1.2px; pointer-events: none;
  background: conic-gradient(from var(--ga, 200deg) at var(--gx, 20%) var(--gy, 0%), rgba(165, 205, 255, .95), rgba(255, 255, 255, .2) 11%, rgba(255, 236, 170, .9) 20%, rgba(255, 150, 168, .85) 29%, rgba(255, 255, 255, .05) 42%, rgba(255, 255, 255, .035) 68%, rgba(195, 175, 255, .85) 85%, rgba(165, 205, 255, .95));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  opacity: .72;
}
.gl.lite { -webkit-backdrop-filter: none; backdrop-filter: none; background: radial-gradient(80% 70% at var(--gx, 20%) var(--gy, 0%), rgba(255, 255, 255, .08), transparent 70%), linear-gradient(150deg, rgba(255, 255, 255, .075), rgba(255, 255, 255, .025) 45%, rgba(255, 255, 255, .045)); }

/* ============================================================
   처음 들어올 때의 막, 페이지 사이의 막
   ============================================================ */
.intro { position: fixed; inset: 0; z-index: 200; display: none; place-content: center; justify-items: center; gap: 28px; background: #07080A; transition: background-color .9s var(--ease-io); }
html.intro-on .intro { display: grid; }
html.intro-on .nh-logo { opacity: 0; }
.intro-word { width: min(560px, 72vw); overflow: visible; }
.iw { fill: none; stroke: #F3F3F1; stroke-width: 5; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: iwDraw 1.5s var(--ease) forwards; }
.il[data-l="i"] .iw { animation-delay: .18s; }
.il[data-l="o"] .iw { animation-delay: .32s; }
.iw.soft { animation-delay: .55s !important; stroke-opacity: .7; }
.iwf { fill: #F3F3F1; opacity: 0; transition: opacity .55s var(--ease); }
.il[data-l="i"] .iwf { transition-delay: .08s; }
.il[data-l="o"] .iwf { transition-delay: .16s; }
.intro.fill .iwf { opacity: 1; }
.intro.fill .iw { transition: stroke-opacity .6s; stroke-opacity: 0; }
.iw-sh rect { opacity: 0; }
.intro.fill .iw-sh rect { animation: iwSheen 1.1s var(--ease-io) .1s forwards; }
@keyframes iwSheen { 0% { opacity: 1; transform: skewX(-16deg) translateX(0); } 100% { opacity: 1; transform: skewX(-16deg) translateX(3300px); } }
@keyframes iwDraw { to { stroke-dashoffset: 0; } }
/* 다시 올 때(짧게): 세 글자가 왼쪽, 위, 안쪽에서 모여듦 */
html.intro-quick .iw { animation-duration: .7s; animation-delay: .05s; }
html.intro-quick .iw.soft { animation-delay: .2s !important; }
.il-in { transform-box: view-box; }
html.intro-quick .il[data-l="n"] .il-in { animation: ilN .8s var(--expo) both; }
html.intro-quick .il[data-l="i"] .il-in { animation: ilI .8s var(--expo) .07s both; }
html.intro-quick .il[data-l="o"] .il-in { transform-origin: 1936px 376px; animation: ilO .9s var(--expo) .12s both; }
@keyframes ilN { from { transform: translateX(-420px) skewX(-8deg); opacity: 0; } }
@keyframes ilI { from { transform: translateY(-520px); opacity: 0; } }
@keyframes ilO { from { transform: scale(.35) rotate(-140deg); opacity: 0; } }
.intro-meta { display: flex; justify-content: space-between; gap: 24px; width: min(560px, 72vw); margin: 0; font: 500 11px/1 var(--f-display); letter-spacing: .3em; text-transform: uppercase; color: var(--muted); transition: opacity .5s, transform .8s var(--ease); }
.intro-pct { font-variant-numeric: tabular-nums; color: var(--fg); }
/* 내려앉는 동안: 막은 투명해지고, 글자만 날아감 (js 가 글자마다 transform) */
.intro.land { background-color: rgba(7, 8, 10, 0); pointer-events: none; }
.intro.land .intro-meta { opacity: 0; transform: translateY(16px); }

.veil { position: fixed; inset: 0; z-index: 150; display: grid; place-items: center; background: #07080A; pointer-events: none; transform: translateY(100%); visibility: hidden; }
.veil.in { visibility: visible; transform: translateY(0); transition: transform .5s var(--ease-io); }
.veil.out { transform: translateY(-100%); transition: transform .75s var(--ease-io); }
.veil-word { width: min(220px, 40vw); color: var(--fg); opacity: 0; transform: translateY(20px); transition: opacity .35s .15s, transform .5s var(--expo) .1s; }
.veil.in .veil-word { opacity: 1; transform: none; }
.veil.out .veil-word { opacity: 0; transform: translateY(-20px); transition-delay: 0s; }
.veil-word svg { width: 100%; height: auto; aspect-ratio: 2312 / 752; }

/* ============================================================
   머리글
   ============================================================ */
.nh {
  position: fixed; left: 0; right: 0; top: 0; z-index: 40; height: calc(var(--hdr) + env(safe-area-inset-top, 0px)); padding-top: env(safe-area-inset-top, 0px);
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 24px; padding-inline: var(--padL) var(--padR);
  transition: transform .6s var(--expo), background-color .5s, border-color .5s;
  border-bottom: 1px solid transparent;
}
.nh.solid { background: linear-gradient(180deg, rgba(10, 11, 13, .55), rgba(10, 11, 13, .32)); -webkit-backdrop-filter: saturate(1.6) blur(22px); backdrop-filter: saturate(1.6) blur(22px); }
.nh::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: linear-gradient(90deg, transparent, rgba(165, 205, 255, .5) 20%, rgba(255, 255, 255, .35) 45%, rgba(255, 236, 170, .45) 62%, rgba(255, 150, 168, .45) 78%, transparent); opacity: 0; transition: opacity .5s; }
.nh.solid::after { opacity: 1; }
.nh.away { transform: translateY(-110%); }
html.menu-open .nh { transform: none; }
.nh-logo { display: block; width: 76px; color: var(--fg); transition: opacity .5s var(--ease), transform .6s var(--expo); }
body[data-page="home"] .nh:not(.solid) .nh-logo { opacity: 0; transform: translateY(-6px); pointer-events: none; }
.nh-logo svg { width: 100%; height: auto; aspect-ratio: 2312 / 752; }
.nh-nav { display: flex; justify-content: center; gap: clamp(18px, 2.6vw, 42px); }
.nh-nav a { position: relative; display: block; height: 1.4em; overflow: hidden; font: 500 12px/1.4 var(--f-display); letter-spacing: .22em; text-transform: uppercase; color: var(--fg-2); }
.nh-nav a span { display: block; transition: transform .5s var(--expo); }
.nh-nav a::after { content: ''; position: absolute; left: 0; right: .22em; bottom: 0; height: 1px; background: var(--fg); transform: scaleX(0); transform-origin: 0 50%; transition: transform .5s var(--expo); }
.nh-nav a:hover, .nh-nav a[aria-current="page"] { color: var(--fg); }
.nh-nav a:hover::after, .nh-nav a[aria-current="page"]::after { transform: scaleX(1); }
.nh-right { grid-column: 3; justify-self: end; display: flex; align-items: center; gap: 10px; }
.nh-cta { position: relative; display: inline-flex; align-items: center; gap: 10px; height: 40px; padding: 0 18px; border-radius: 999px; background: rgba(255, 255, 255, .1); color: var(--fg); -webkit-backdrop-filter: blur(16px) saturate(1.6); backdrop-filter: blur(16px) saturate(1.6); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), 0 10px 26px -16px rgba(0, 0, 0, .7); font-size: 13px; font-weight: 500; letter-spacing: .01em; transition: transform .4s var(--expo), background-color .4s; }
.nh-cta:hover { background: rgba(255, 255, 255, .18); }
.nh-cta:hover { transform: translateY(-1px); }
.nh-cta i { width: 8px; height: 8px; border-radius: 50%; background: conic-gradient(from 90deg, var(--blue), #fff, var(--coral), var(--blue)); animation: spin 4s linear infinite; }
html:not(.menu-open) .nh.away.gone .nh-cta i { animation-play-state: paused; }   /* 머리글이 다 숨은 뒤에만 멈춤 (js/nio.js: gone) */
.nh-menu { display: none; position: relative; width: 44px; height: 44px; margin-right: -10px; }
.nh-menu span { position: absolute; left: 12px; right: 12px; height: 1.5px; background: var(--fg); transition: transform .45s var(--expo), top .45s var(--expo); }
.nh-menu span:nth-child(1) { top: 18px; }
.nh-menu span:nth-child(2) { top: 25px; }
.nh-menu[aria-expanded="true"] span:nth-child(1) { top: 21.5px; transform: rotate(45deg); }
.nh-menu[aria-expanded="true"] span:nth-child(2) { top: 21.5px; transform: rotate(-45deg); }
@media (max-width: 900px) {
  .nh-nav { display: none; }
  .nh-menu { display: block; }
  .nh-cta { height: 36px; padding: 0 14px; font-size: 12.5px; }
}
@media (max-width: 380px) { .nh-cta span { display: none; } .nh-cta { padding: 0 12px; } }

/* 휴대폰 메뉴 */
.nm { position: fixed; inset: 0; z-index: 39; padding: calc(var(--hdr) + env(safe-area-inset-top, 0px) + 16px) var(--padR) calc(28px + env(safe-area-inset-bottom, 0px)) var(--padL); background: rgba(7, 8, 10, .6); -webkit-backdrop-filter: blur(30px) saturate(1.4); backdrop-filter: blur(30px) saturate(1.4); overflow-y: auto; display: flex; flex-direction: column; gap: 28px; }
.nm:not(.open) { visibility: hidden; opacity: 0; }
.nm { transition: opacity .4s var(--ease), visibility 0s linear .45s; }
.nm.open { transition: opacity .4s var(--ease), visibility 0s; }
.nm ol { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.nm li { border-bottom: 1px solid var(--line); overflow: hidden; }
.nm li a { display: grid; grid-template-columns: 34px 1fr auto; align-items: baseline; gap: 12px; padding: 18px 0; transform: translateY(110%); transition: transform .7s var(--expo); transition-delay: calc(var(--i) * 50ms); }
.nm.open li a { transform: none; }
.nm li a small { font: 500 11px var(--f-display); color: var(--faint); letter-spacing: .1em; }
.nm li a b { font: 600 30px/1.1 var(--f-display); letter-spacing: -.01em; text-transform: uppercase; }
.nm li a span { color: var(--muted); font-size: 14px; }
.nm-foot { margin-top: auto; color: var(--muted); font-size: 13px; }
html.menu-open { overflow: hidden; }
@media (min-width: 901px) { .nm { display: none; } }

/* 장면 바로가기 (처음 화면, 넓은 화면) */
.chnav { position: fixed; right: max(14px, calc(var(--padR) - 44px)); top: 50%; z-index: 30; transform: translateY(-50%); }
.chnav ol { list-style: none; margin: 0; padding: 12px 12px 12px 10px; display: grid; gap: 2px; border-radius: 18px; background: rgba(255, 255, 255, .04); -webkit-backdrop-filter: blur(16px) saturate(1.5); backdrop-filter: blur(16px) saturate(1.5); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), inset 0 0 0 1px rgba(255, 255, 255, .05); }
.chnav a { position: relative; display: grid; grid-template-columns: auto 30px; align-items: center; gap: 10px; height: 24px; color: var(--faint); font: 500 10px/1 var(--f-display); letter-spacing: .16em; text-transform: uppercase; }
.chnav a span { text-align: right; font-variant-numeric: tabular-nums; }
.chnav a i { display: block; height: 1px; background: currentColor; transform-origin: 100% 50%; transform: scaleX(.46); transition: transform .5s var(--expo); }
.chnav a b { position: absolute; right: calc(100% + 12px); top: 50%; font-weight: 500; white-space: nowrap; opacity: 0; transform: translate(8px, -50%); transition: opacity .35s, transform .45s var(--expo); pointer-events: none; }
.chnav a:hover, .chnav a[aria-current="true"] { color: var(--fg); }
.chnav a[aria-current="true"] i { transform: scaleX(1); }
.chnav:hover a b, .chnav a:focus-visible b { opacity: 1; transform: translate(0, -50%); }
.chnav { transition: opacity .5s var(--ease), visibility 0s; }
.chnav.off { opacity: 0; visibility: hidden; transition: opacity .5s var(--ease), visibility 0s linear .5s; }
@media (max-width: 1100px) { .chnav { display: none; } }

/* ============================================================
   처음 화면 1: NIO → O 렌즈 속으로 → 브랜드 선언 → 물방울 → 한 분자 → 수많은 분자
   (O 구멍 속과 뒤의 사진, 물방울은 배경 무대 js/nio-stage.js 가 그림)
   ============================================================ */
.hero { padding: 0; height: 935vh; }
.stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.ch-mark { position: absolute; left: 0; width: 1px; height: 1px; pointer-events: none; }
.hx-wall { position: absolute; inset: 0; display: grid; align-content: center; gap: clamp(4px, 1.4vh, 16px); pointer-events: none; user-select: none; }
/* 글자 벽: 반투명 흰 글자 + 가는 테두리. 줄마다 천천히 숨 쉬듯 밝아졌다 흐려짐 (로고보다 한참 옅게) */
.hx-wall p { margin: 0; white-space: nowrap; font: 400 clamp(52px, 8.6vw, 140px)/1 var(--f-serif-en); letter-spacing: .34em; color: rgba(255, 255, 255, .075); -webkit-text-stroke: 1px rgba(255, 255, 255, .13); will-change: transform; }
.hx-wall span { display: inline-block; animation: wall 110s linear infinite, wallGlow 7s ease-in-out infinite; }
.hx-wall p:nth-child(even) span { animation-direction: reverse, alternate; animation-duration: 140s, 9s; }
.hx-wall p:nth-child(3n) span { animation-delay: 0s, -3s; }
.hx-wall p.off span { animation-play-state: paused; }   /* 안 보이는 동안 멈춤 (js/nio.js 의 heroScene) */
@keyframes wall { to { transform: translate3d(-100%, 0, 0); } }
@keyframes wallGlow { 0%, 100% { opacity: .7; } 50% { opacity: 1; } }
.hx-shade { position: absolute; display: block; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(closest-side, rgba(10, 11, 13, .82), rgba(10, 11, 13, .5) 55%, transparent); pointer-events: none; }
.hx-sq { position: absolute; display: block; will-change: transform, opacity; }
.hx-sq.s1 { background: #E2A79E; }
.hx-sq.s2 { background: #9FACCB; }
.hx-sq.s3 { background: #3A3C43; }
.hx-rule { position: absolute; display: block; height: 1px; background: rgba(255, 255, 255, .28); transform-origin: 0 50%; }
.hx-svg { position: absolute; inset: 0; width: 100%; height: 100%; fill: var(--fg); overflow: visible; }
.hx-acro { position: absolute; display: block; height: 1.2em; margin: 0; font: 500 clamp(10px, .95vw, 13px)/1 var(--f-display); letter-spacing: .3em; text-transform: uppercase; color: var(--fg-2); white-space: nowrap; }
.hx-acro b { color: var(--fg); font-weight: 600; }
.hx-acro span { position: absolute; left: 0; top: 0; white-space: nowrap; }
.hx-copy { position: absolute; right: var(--padR); bottom: clamp(36px, 8vh, 84px); max-width: 440px; text-align: right; }
.hx-tag { margin: 0; font: 500 clamp(18px, 1.7vw, 24px)/1.3 var(--f-display); letter-spacing: .24em; text-transform: uppercase; }
.hx-ko { margin: 14px 0 0; font: 400 15px/1.8 var(--f-serif-ko); color: var(--fg-2); }
.hx-cta { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; margin-top: 24px; }
.hx-hint { position: absolute; left: var(--padL); bottom: clamp(36px, 8vh, 84px); display: flex; align-items: center; gap: 14px; margin: 0; font: 500 11px/1 var(--f-display); letter-spacing: .3em; text-transform: uppercase; color: var(--muted); }
.hx-hint i { position: relative; width: 1px; height: 56px; overflow: hidden; background: var(--line); }
.hx-hint i::after { content: ''; position: absolute; inset: 0; background: var(--fg); transform: translateY(-100%); animation: hint 2.4s var(--ease-io) infinite; }
@keyframes hint { 50% { transform: none; } 100% { transform: translateY(100%); } }
.hx-hint.idle i::after { animation-play-state: paused; }   /* 스크롤해서 안 보이는 동안 (js/nio.js 의 heroScene) */
.hx-mf { position: absolute; inset: 0; z-index: 1; isolation: isolate; display: grid; place-content: center; justify-items: center; padding: var(--hdr) var(--padR) 0 var(--padL); text-align: center; opacity: 0; pointer-events: none; }
.hx-mf::before { content: ''; position: absolute; left: 50%; top: 52%; z-index: -1; width: min(1100px, 120vw); height: min(640px, 80vh); transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(closest-side, rgba(8, 9, 11, .5), rgba(8, 9, 11, .22) 60%, transparent); }
.hx-mf .eyebrow { color: var(--fg); margin-bottom: 30px; }
.hx-en { max-width: 19em; margin: 0; font: 400 clamp(26px, 3.4vw, 54px)/1.34 var(--f-serif-en); letter-spacing: -.01em; color: var(--fg); text-wrap: balance; text-shadow: 0 2px 30px rgba(0, 0, 0, .45); }
.hx-en .w { opacity: .18; }
.hx-ko2 { max-width: 32em; margin: 34px 0 0; font: 400 clamp(14.5px, 1.1vw, 16.5px)/1.95 var(--f-serif-ko); color: var(--fg); opacity: 0; text-shadow: 0 1px 18px rgba(0, 0, 0, .6); }
/* 한 분자: 물방울 자리(--my)에서 자라남 */
.hx-one { --my: 41%; --mh: 120px; --cy: 0px; position: absolute; inset: 0; margin: 0; opacity: 0; pointer-events: none; visibility: hidden; }
.hx-molm { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 0 10px rgba(255, 255, 255, .35)); }
.hx-mp { fill: none; stroke: #fff; stroke-linecap: round; }
.hx-mt text { fill: #fff; font-family: var(--f-display); font-weight: 500; }
.hx-one figcaption { position: absolute; left: var(--padL); right: var(--padR); top: calc(var(--my) + var(--mh) + clamp(34px, 5vh, 56px)); display: grid; justify-items: center; gap: 12px; text-align: center; transform: translate3d(0, var(--cy), 0); }
.hx-no { display: flex; align-items: center; gap: 12px; margin: 0; font: 500 11px/1.4 var(--f-display); letter-spacing: .3em; color: var(--fg-2); font-variant-numeric: tabular-nums; }
.hx-no i { width: 26px; height: 1px; background: var(--line-2); }
.hx-cap { width: 100%; max-width: 22em; margin: 0; font: italic 400 clamp(26px, 3vw, 44px)/1.25 var(--f-serif-en); color: #fff; }
.hx-ko3 { width: 100%; max-width: 34em; margin: 0; font: 400 clamp(14px, 1.05vw, 16px)/1.8 var(--f-serif-ko); color: var(--fg-2); opacity: 0; }
@media (max-width: 700px) {
  .hero { height: 890vh; }
  .hx-copy { left: var(--padL); right: var(--padR); bottom: calc(24px + env(safe-area-inset-bottom, 0px)); max-width: none; text-align: left; }
  .hx-tag { font-size: 17px; letter-spacing: .2em; }
  .hx-ko { font-size: 14px; margin-top: 10px; }
  .hx-cta { justify-content: flex-start; margin-top: 18px; }
  .hx-cta .btn { flex: 1 1 0; min-height: 50px; padding: 0 16px; font-size: 13.5px; }
  .hx-hint { display: none; }
  .hx-acro { letter-spacing: .16em; }
  .hx-wall p { font-size: 13vw; letter-spacing: .24em; }
  .hx-one figcaption { gap: 10px; }
  .hx-cap { font-size: 25px; max-width: 13em; }
}
@media (max-height: 560px) and (max-width: 1000px) { .hx-ko, .hx-hint { display: none; } }
/* 동작 줄이기: 장면 없이 첫 모습만 */
html.rm .hero { height: 100svh; }
html.rm .hx-mf, html.rm .hx-one, html.rm .ch-mark { display: none; }
.rm-only { display: none; }
html.rm .rm-only { display: block; }

/* 글자 모핑 (js/nio.js 의 MT): 두 글자가 흐려지며 녹아 섞이는 동안에만 알파 문턱 필터 */
.mt { position: relative; display: grid; }
.mt-a, .mt-b { grid-area: 1 / 1; display: block; min-width: 0; }
.mt-b { opacity: 0; }
.mt.melt { filter: url(#nio-goo); }

/* ============================================================
   처음 화면 2: 원료 (The Palette) — 입자 흐름 위의 네 박자 (업데이트 31)
   원료 182 → 천연 오일 → 향조(도넛) → 한 사람을 위한 하나. 큰 숫자와 설명은 torph 로 녹아 바뀜
   ============================================================ */
.flow { position: fixed; inset: 0; z-index: 0; display: block; width: 100%; height: 100%; pointer-events: none; }
.field { transition: opacity .7s var(--ease); }
html.flow-vis .field { opacity: 0; }
.tmx { white-space: pre-line; }
/* torph 글자는 늘 레이어(will-change, torph.js)인데, 화면에서 먼 구역(.tm-far, js/nio.js tmWatch)에서는 레이어로 두지 않음 */
.tm-far [torph-item]:not(br), .tm-far [torph-slot] > span { will-change: auto; }
.pal { height: 470vh; padding: 0; }
/* --out 은 무대에만 적고, 읽는 것(제목, 숫자, 무대의 ::before/::after)만 가져감 (무대 안 모든 요소를 다시 계산하지 않게) */
@property --out { syntax: '<number>'; inherits: false; initial-value: 0; }
.pal .stage { --out: 0; }
.pal-head, .pal-count, .pal .stage::before, .pal .stage::after { --out: inherit; }
.pal-head { position: absolute; left: var(--padL); top: calc(var(--hdr) + clamp(26px, 7vh, 84px)); z-index: 2; width: min(54vw, 780px); display: grid; gap: 20px; opacity: calc(1 - var(--out)); transform: translate3d(0, calc(var(--out) * -8vh), 0); text-shadow: 0 2px 30px rgba(0, 0, 0, .55); }
.pal-head .eyebrow { color: var(--fg); }
.pal-h { font-size: clamp(30px, 3.3vw, 54px); }
.pal-count { position: absolute; left: var(--padL); bottom: clamp(48px, 10vh, 116px); z-index: 2; width: min(34vw, 520px); display: grid; justify-items: start; gap: 12px; opacity: calc(1 - var(--out)); transform: translate3d(0, calc(var(--out) * 8vh), 0); text-shadow: 0 2px 30px rgba(0, 0, 0, .6); }
.pal-dots { display: flex; gap: 8px; margin: 0 0 4px; padding: 0; list-style: none; }
.pal-dots li { width: 26px; height: 2px; background: var(--line-2); transition: background-color .6s var(--ease), width .6s var(--expo); }
.pal-dots li.on { width: 44px; background: var(--fg); }
.pc-num { margin: 0; font: 200 clamp(104px, 14vw, 236px)/.84 var(--f-display); letter-spacing: -.055em; color: #fff; font-variant-numeric: tabular-nums; }
.pc-cap { margin: 0; font: 700 clamp(19px, 1.6vw, 25px)/1.4 var(--f-serif-ko); letter-spacing: -.02em; }
.pc-sub { width: 100%; margin: 0; color: var(--fg-2); font-size: 15px; line-height: 1.75; min-height: 3.5em; }
.pal-go { margin-top: 8px; }
.pal-dn { position: absolute; left: 66%; top: 50%; z-index: 1; width: min(420px, 30vw); opacity: 0; visibility: hidden; transform: translate3d(-50%, -50%, 0) scale(.82); will-change: transform, opacity; }
/* 입자 고리 가운데에서는 이름표 없는 도넛 (향조 이름은 조각에 올리면 가운데 글자로) */
.pal-dn .dn-wide, .pal-dn .dn-legend { display: none !important; }
.pal-dn .dn-narrow { display: block; width: 100%; }
/* 입자 흐름이 없을 때(WebGL 이 없거나 동작 줄이기): 도넛을 늘 보여 줌 */
html:not(.flow-on) .pal-dn { opacity: 1 !important; visibility: visible !important; }
.pal-arch { position: relative; padding: clamp(30px, 6vh, 80px) 0 clamp(40px, 8vh, 100px); }
@media (max-width: 760px) {
  .pal { height: 430vh; }
  .pal-head { top: calc(var(--hdr) + 16px); right: var(--padR); width: auto; gap: 12px; }
  .pal-h { font-size: clamp(25px, 7.2vw, 34px); }
  .pal-count { right: var(--padR); width: auto; bottom: calc(26px + env(safe-area-inset-bottom, 0px)); gap: 8px; }
  .pc-num { font-size: clamp(72px, 23vw, 118px); }
  .pc-cap { font-size: 17px; }
  .pc-sub { font-size: 13.5px; line-height: 1.65; }
  .pal-go { margin-top: 2px; }
  .pal-dn { left: 50%; top: 42%; width: min(62vw, 300px); }
}
@media (max-width: 760px) and (max-height: 700px) { .pc-sub { display: none; } }
.mriver { margin-top: clamp(64px, 8vw, 120px); display: grid; gap: 14px; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.mr-row { will-change: transform; transform: translate3d(calc((var(--s, .5) - .5) * -36vw), 0, 0); }
.mr-row.r2 { transform: translate3d(calc((var(--s, .5) - .5) * 36vw - 120px), 0, 0); }
.mr-in { display: flex; gap: 14px; width: max-content; animation: marq 90s linear infinite; }
.mr-row.r2 .mr-in { animation-direction: reverse; animation-duration: 110s; }
@keyframes marq { to { transform: translate3d(-50%, 0, 0); } }
.mriver:hover .mr-in, .mriver.idle .mr-in { animation-play-state: paused; }
.mcard { flex: none; display: grid; grid-template-rows: 1fr auto; gap: 12px; width: 236px; height: 210px; padding: 18px 18px 16px; border-radius: 20px; background: linear-gradient(150deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .02) 48%, rgba(255, 255, 255, .045)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), inset 0 0 0 1px rgba(255, 255, 255, .06), inset 1px 0 0 rgba(165, 205, 255, .18), inset -1px 0 0 rgba(255, 150, 168, .14); transition: background-color .45s, box-shadow .45s; }
.mcard:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), inset 0 0 0 1px rgba(255, 255, 255, .22), inset 1px 0 0 rgba(165, 205, 255, .5), inset -1px 0 0 rgba(255, 150, 168, .4); }
.mcard .mol { width: 72%; max-height: 116px; margin: auto; }
.mcard .mol path { stroke-width: 3.6; opacity: .85; }
.mcard b { display: block; font-size: 14px; font-weight: 500; }
.mcard small { display: block; color: var(--muted); font: 500 10px/1.5 var(--f-display); letter-spacing: .12em; }
@media (max-width: 900px) {
  .mcard { width: 190px; height: 180px; }
}

/* ============================================================
   처음 화면 3: THE SCENTS (업데이트 31) — 유리판 없이, 입자 상징 위에 큰 이름·번호·설명을 대담하게.
   이름·번호·설명·노트는 torph 로 녹아 바뀌고, 라벨은 깊은 곳에서 다가와 자리 잡은 뒤 카메라 옆으로 스쳐 지나감
   ============================================================ */
.scents { --nf: clamp(96px, min(19vw, 34vh), 330px); height: calc(var(--n) * 96vh); padding: 0; }
.scents .stage { --dip: 0; perspective: 1400px; }
html.flow-on .sc-glows { display: none; }
.sc-glows { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.sc-glows i { position: absolute; inset: -10%; background: var(--gl); opacity: 0; mix-blend-mode: soft-light; }
.sc-meta { position: absolute; left: var(--padL); right: var(--padR); top: calc(var(--hdr) + 18px); z-index: 3; display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; margin: 0; pointer-events: none; }
.sc-k { position: relative; min-width: 0; padding-top: .9em; font: 500 calc(12px * var(--kfit, 1))/1.2 var(--f-display); letter-spacing: .32em; color: var(--fg); }
.sc-idx { display: grid; justify-items: end; text-align: right; }
.sc-idx b { font: 200 clamp(64px, 8vw, 140px)/.8 var(--f-display); letter-spacing: -.055em; color: #fff; font-variant-numeric: tabular-nums; }
.sc-idx i { margin-top: 12px; font: 500 11px/1.2 var(--f-display); font-style: normal; letter-spacing: .3em; color: var(--fg-2); }
.sc-name { position: absolute; left: calc(var(--padL) - .06em); right: var(--padR); bottom: clamp(30px, 6.5vh, 76px); z-index: 3; margin: 0; font: 600 calc(var(--nf) * var(--fit, 1))/.8 var(--f-display); letter-spacing: -.045em; white-space: nowrap; color: #fff; pointer-events: none; text-shadow: 0 18px 80px rgba(0, 0, 0, .4); }
.sc-probe { position: absolute; left: 0; top: 0; visibility: hidden; white-space: nowrap; pointer-events: none; }
.sc-labels { position: absolute; inset: 0; z-index: 2; pointer-events: none; transform-style: preserve-3d; }
.sc-lb { --lw: clamp(150px, min(14.5vw, 25vh), 250px); position: absolute; left: calc(63% - 13vw - var(--lw) / 2); top: calc(50% - var(--lw) * .5); width: var(--lw); opacity: 0; visibility: hidden; transform-origin: 50% 60%; will-change: transform, opacity; filter: drop-shadow(0 34px 46px rgba(0, 0, 0, .6)); }
.sc-lb.on { pointer-events: auto; }
.sc-lb .label { display: block; }
.sc-copy { position: absolute; left: var(--padL); top: calc(var(--hdr) + clamp(96px, 17vh, 190px)); z-index: 3; width: min(29vw, 430px); display: grid; gap: 16px; transform: translate3d(0, calc(var(--dip) * 1.4vh), 0); text-shadow: 0 2px 26px rgba(0, 0, 0, .6); }
.sc-line { margin: 0; font: 700 clamp(21px, 1.9vw, 30px)/1.38 var(--f-serif-ko); letter-spacing: -.025em; }
.sc-mood { margin: 0; color: var(--fg-2); font-size: 15px; line-height: 1.8; }
.sc-notes { margin: 6px 0 0; border-top: 1px solid var(--line-2); transition: opacity .6s var(--ease); }
.sc-notes > div { display: grid; grid-template-columns: 5.4em minmax(0, 1fr); column-gap: 14px; align-items: baseline; padding: 11px 0; border-bottom: 1px solid var(--line); }
.sc-notes dt { font: 500 10.5px/1.6 var(--f-display); letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
.sc-notes dd { margin: 0; min-width: 0; font-size: 14.5px; line-height: 1.55; }
.scents.sc-first .sc-notes { opacity: 0; }
.sc-cta { position: absolute; right: var(--padR); bottom: calc(clamp(30px, 6.5vh, 76px) + var(--nf) * var(--fit, 1) * .8 + 26px); z-index: 3; }
.sc-bar { position: absolute; left: var(--padL); right: var(--padR); bottom: 14px; z-index: 3; height: 1px; background: var(--line); }
.sc-bar i { position: absolute; inset: 0; background: var(--fg); transform-origin: 0 50%; transform: scaleX(0); }
@media (max-width: 760px) {
  .scents { --nf: 21vw; height: calc(var(--n) * 88vh); }
  .sc-meta { top: calc(var(--hdr) + 12px); }
  .sc-k { font-size: calc(10.5px * var(--kfit, 1)); letter-spacing: .24em; }
  .sc-meta { align-items: center; }
  .sc-k { padding-top: 0; }
  .sc-idx { display: flex; align-items: baseline; gap: 8px; }
  .sc-idx b { font-size: 30px; letter-spacing: -.03em; }
  .sc-idx i { margin-top: 0; font-size: 10px; letter-spacing: .22em; }
  .sc-name { top: calc(var(--hdr) + 54px); bottom: auto; }
  .sc-lb { --lw: min(32vw, 150px); left: calc(50% + 6vw); top: calc(44% - var(--lw) * .1); }
  .sc-copy { left: var(--padL); right: var(--padR); top: auto; bottom: calc(58px + env(safe-area-inset-bottom, 0px)); width: auto; gap: 8px; }
  .sc-line { font-size: 18px; }
  .sc-mood { font-size: 13.5px; line-height: 1.65; }
  .sc-notes > div { padding: 7px 0; }
  .sc-notes dd { font-size: 13px; }
  .sc-cta { left: var(--padL); right: auto; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); font-size: 13.5px; }
  .scents:not(.sc-first) .sc-mood { display: none; }
  /* 휴대폰: 아래 글자 뒤를 살짝 어둡게 (입자 위에서도 읽히게) */
  .scents .stage::after, .pal .stage::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 50%; z-index: 1; pointer-events: none; background: linear-gradient(to top, rgba(10, 11, 13, .88), rgba(10, 11, 13, .5) 48%, rgba(10, 11, 13, 0)); }
  .pal .stage::after { height: 42%; opacity: calc(1 - var(--out)); }
  /* 업데이트 32: 위쪽 제목 뒤도 살짝 어둡게 (글자를 키운 휴대폰에서 제목이 세 줄이 되어 입자와 겹쳐도 읽히게) */
  .pal .stage::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 34%; z-index: 1; pointer-events: none; background: linear-gradient(to bottom, rgba(10, 11, 13, .82), rgba(10, 11, 13, .45) 55%, rgba(10, 11, 13, 0)); opacity: calc(1 - var(--out)); }
}
@media (max-width: 760px) and (max-height: 700px) { .sc-notes { display: none; } }

/* ============================================================
   과정 (시그니처 비스포크: 세 병이 차례로 차고 네 단계가 밝아짐. --s 는 js)
   ============================================================ */
.proc-bottles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(8px, 3vw, 48px); max-width: 780px; margin: clamp(48px, 6vw, 88px) auto 0; }
.pb { --lv: clamp(0, calc((var(--s, 1) - .18 - var(--k) * .11) * 4.4), 1); margin: 0; display: grid; justify-items: center; gap: 10px; opacity: calc(.35 + var(--lv) * .65); }
.pb .bottle { width: 100%; max-width: 230px; }
.pb .b-liq { transform-box: fill-box; transform-origin: 50% 100%; transform: scaleY(var(--lv)); }
.pb .dl { stroke-dasharray: 1; stroke-dashoffset: calc(1 - min(1, var(--lv) * 1.6)); }
.pb figcaption { display: grid; justify-items: center; gap: 2px; font: 400 22px/1.2 var(--f-serif); }
.pb figcaption small { font: 400 12.5px/1.4 var(--f-sans); color: var(--muted); }
.proc-steps { position: relative; list-style: none; margin: clamp(56px, 7vw, 100px) 0 0; padding: 26px 0 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(10px, 1.2vw, 16px); }
.ps-line { position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--line); }
.ps-line i { position: absolute; inset: 0; background: var(--prism); transform-origin: 0 50%; transform: scaleX(clamp(0, calc((var(--s, 1) - .3) * 2.1), 1)); }
.ps { --a: clamp(0, calc((var(--s, 1) - .32 - var(--k) * .085) * 7), 1); --gr: 22px; padding: 28px clamp(18px, 1.8vw, 26px) 26px; opacity: calc(.3 + var(--a) * .7); transform: translate3d(0, calc((1 - var(--a)) * 26px), 0); }
.ps-no::before { content: ''; position: absolute; left: clamp(18px, 1.8vw, 26px); top: -31px; width: 10px; height: 10px; border-radius: 50%; background: var(--fg); transform: scale(var(--a)); box-shadow: 0 0 0 5px rgba(255, 255, 255, calc(var(--a) * .1)), 0 0 18px rgba(255, 255, 255, calc(var(--a) * .5)); }
.ps-no { font: 500 12px/1 var(--f-display); letter-spacing: .2em; color: var(--muted); }
.ps h3 { margin: 16px 0 0; font: 700 23px/1.35 var(--f-serif-ko); letter-spacing: -.02em; }
.ps .en { margin: 6px 0 0; font: 500 11px/1.4 var(--f-display); letter-spacing: .24em; text-transform: uppercase; color: var(--muted); }
.ps p:last-child { margin: 14px 0 0; color: var(--fg-2); font-size: 15px; line-height: 1.8; }
@media (max-width: 900px) {
  .proc-steps { grid-template-columns: minmax(0, 1fr); padding: 0 0 0 26px; gap: 12px; }
  .ps-line { left: 0; right: auto; top: 0; bottom: 0; width: 1px; height: auto; }
  .ps-line i { transform-origin: 50% 0; transform: scaleY(clamp(0, calc((var(--s, 1) - .3) * 2.1), 1)); }
  .ps { padding: 22px 20px 22px; }
  .ps-no::before { left: -31px; top: 26px; }
}
.ps-prog { display: none; }
/* 휴대폰 (업데이트 32): 세 병은 화면에 고정하고, 그 아래 설명 카드가 스크롤을 따라 좌우로 미끄러짐 (js 의 procScene 이 --lv, 카드 위치를 정함).
   세로가 긴 요즘 휴대폰에 맞춰 머리글 → 병 → 카드 → 단계 표시를 한 화면에 세로로 쌓고, 병 크기(--bh)는 남는 높이에 맞춤.
   '동작 줄이기'와 자바스크립트가 없으면 예전처럼 위아래로 늘어놓음 */
@media (max-width: 760px) {
  html.js:not(.rm) .proc { --bh: 180px; height: 300vh; padding-block: 0; }
  html.js:not(.rm) .proc > .wrap { position: sticky; top: 0; height: 100vh; height: 100svh; display: flex; flex-direction: column; justify-content: center; gap: min(26px, 3vh); padding-top: calc(var(--hdr) + 2px); padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px)); overflow: hidden; }
  html.js:not(.rm) .proc .sec-head { gap: 8px; }
  html.js:not(.rm) .proc .sec-head .h-xl { font-size: clamp(24px, 7.2vw, 32px); line-height: 1.24; }
  html.js:not(.rm) .proc-bottles { flex: none; height: var(--bh); width: min(100%, calc(var(--bh) * 1.75)); margin: 0 auto; gap: clamp(6px, 3vw, 18px); }
  html.js:not(.rm) .pb { height: 100%; min-height: 0; grid-template-rows: minmax(0, 1fr) auto; gap: 4px; opacity: calc(.42 + var(--lv) * .58); }
  html.js:not(.rm) .pb .bottle { height: 100%; width: auto; max-width: 100%; }
  html.js:not(.rm) .pb figcaption { font-size: 16px; }
  html.js:not(.rm) .pb figcaption small { font-size: 11px; }
  html.js:not(.rm) .ps-view { flex: none; }
  html.js:not(.rm) .proc-steps { display: flex; align-items: stretch; gap: 14px; margin: 0; padding: 0; will-change: transform; }
  html.js:not(.rm) .proc-steps .ps-line { display: none; }
  /* 다음 카드가 오른쪽에 조금 보이도록 (옆으로 넘어간다는 신호) */
  html.js:not(.rm) .ps { flex: 0 0 calc(100% - 26px); min-width: 0; --a: 1; opacity: 1; transform: none; padding: 20px 22px 22px; transform-origin: 50% 50%; -webkit-backdrop-filter: none; backdrop-filter: none; background: radial-gradient(80% 70% at 20% 0%, rgba(255, 255, 255, .09), transparent 70%), linear-gradient(150deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .03) 45%, rgba(255, 255, 255, .05)); }
  html.js:not(.rm) .ps > * { will-change: transform; }
  html.js:not(.rm) .ps-no::before { display: none; }
  html.js:not(.rm) .ps-no { font-size: 11.5px; }
  html.js:not(.rm) .ps h3 { margin-top: 10px; font-size: 21px; }
  html.js:not(.rm) .ps .en { margin-top: 4px; }
  html.js:not(.rm) .ps p:last-child { margin-top: 10px; font-size: 14.5px; line-height: 1.75; word-break: keep-all; }
  html.js:not(.rm) .ps-prog { display: flex; flex: none; align-items: center; gap: 8px; margin: 0; font: 500 11px/1 var(--f-display); letter-spacing: .2em; color: var(--muted); font-variant-numeric: tabular-nums; }
  html.js:not(.rm) .ps-prog b { min-width: 2.2em; color: var(--fg); font-weight: 500; }
  html.js:not(.rm) .ps-prog i { width: 22px; height: 2px; background: var(--line-2); transition: width .6s var(--expo), background-color .6s var(--ease); }
  html.js:not(.rm) .ps-prog i.on { width: 40px; background: var(--fg); }
  html.js:not(.rm) .ps-prog span { margin-left: 4px; }
}

/* ============================================================
   맞춤 향 설계 안내 (빛깔 구슬 둘레를 도는 질문들)
   ============================================================ */
.fd { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 80px); align-items: center; }
.fd-text { display: grid; gap: 22px; justify-items: start; }
.fd-text .lead { margin-top: 4px; }
.fd-art { --R: clamp(150px, 19vw, 262px); position: relative; width: 100%; max-width: 640px; aspect-ratio: 1; justify-self: center; }
.fd-orb { position: absolute; left: 50%; top: 50%; width: 36%; aspect-ratio: 1; border-radius: 50%; overflow: hidden; transform: translate(-50%, -50%); background: #17161F; box-shadow: 0 0 140px 10px rgba(199, 184, 238, .2); isolation: isolate; }
.fd-orb i { position: absolute; width: 72%; height: 72%; border-radius: 50%; background: radial-gradient(closest-side, var(--c), transparent); mix-blend-mode: screen; animation: blob 12s ease-in-out infinite alternate; }
.fd-orb i:nth-child(1) { --c: #C7B8EE; left: -6%; top: -4%; }
.fd-orb i:nth-child(2) { --c: #C6F0EA; right: -8%; top: 10%; animation-delay: -3s; }
.fd-orb i:nth-child(3) { --c: #FBC4E2; left: 12%; bottom: -10%; animation-delay: -6s; }
.fd-orb i:nth-child(4) { --c: #FCE29A; right: 4%; bottom: -2%; width: 46%; height: 46%; animation-delay: -9s; }
.fd-orb::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(55% 40% at 32% 20%, rgba(255, 255, 255, .55), transparent 62%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35), inset 0 -24px 40px -20px rgba(255, 255, 255, .5); }
.fd-ring { position: absolute; border: 1px solid var(--line); border-radius: 50%; animation: spin 60s linear infinite; }
.fd-ring::before { content: ''; position: absolute; left: 50%; top: -3px; width: 6px; height: 6px; margin-left: -3px; border-radius: 50%; background: var(--fg); }
.fd-ring.r1 { inset: 14%; }
.fd-ring.r2 { inset: 26%; border-style: dashed; animation-duration: 40s; animation-direction: reverse; }
.fd-ring.r2::before { background: var(--coral); }
.fd-ring.r3 { inset: 1%; animation-duration: 90s; }
.fd-ring.r3::before { background: var(--blue); }
.fd-chip { position: absolute; left: 50%; top: 50%; width: 0; height: 0; animation: spin 70s linear infinite; animation-delay: calc(var(--i) / var(--n) * -70s); }
.fd-art.idle .fd-ring, .fd-art.idle .fd-chip, .fd-art.idle .fd-chip span span, .fd-art.idle .fd-orb i { animation-play-state: paused; }   /* 화면 밖이면 멈춤 (js/nio.js 의 finderLens) */
.fd-chip > span { position: absolute; left: 0; top: 0; display: block; transform: translateX(var(--R)); }
.fd-chip span span { display: block; padding: .62em 1.15em; border: 1px solid rgba(255, 255, 255, .2); border-radius: 999px; background: linear-gradient(150deg, rgba(40, 42, 50, .82), rgba(20, 21, 26, .78)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), -2px 0 8px -4px rgba(150, 190, 255, .5), 2px 0 8px -4px rgba(255, 150, 170, .45); font-size: calc(13px * var(--cs, 1)); line-height: 1.3; white-space: nowrap; transform: translate(-50%, -50%); animation: spinBack 70s linear infinite; animation-delay: calc(var(--i) / var(--n) * -70s); }
@keyframes spinBack { from { transform: translate(-50%, -50%) rotate(0deg); } to { transform: translate(-50%, -50%) rotate(-360deg); } }
.fd-art.few .fd-chip:nth-of-type(2n) { display: none; }
.fd-mol { position: absolute; left: 50%; top: 50%; width: 22%; transform: translate(-50%, -50%); opacity: .0; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes blob { 0% { transform: translate3d(0, 0, 0) scale(1); } 50% { transform: translate3d(14%, -10%, 0) scale(1.16); } 100% { transform: translate3d(-12%, 12%, 0) scale(.9); } }
/* WebGL 이 있으면 구슬 속은 배경 무대의 렌즈가 그림 (꽃이 거꾸로 비치는 유리구슬) */
html.gl-on .fd-orb { overflow: visible; background: none; box-shadow: 0 0 150px 16px rgba(199, 184, 238, .16), 0 40px 80px -20px rgba(0, 0, 0, .6); }
html.gl-on .fd-orb i, html.gl-on .fd-orb::after { display: none; }
@media (max-width: 900px) {
  .fd { grid-template-columns: minmax(0, 1fr); }
  .fd-art { --R: clamp(110px, 33vw, 190px); max-width: 480px; margin-top: 20px; }
  .fd-chip span span { font-size: calc(12px * var(--cs, 1)); padding: .5em .92em; width: max-content; max-width: 8.4em; white-space: normal; word-break: keep-all; text-align: center; line-height: 1.25; }
}

/* ============================================================
   저널 카드
   ============================================================ */
.jr .sec-head { margin-bottom: clamp(36px, 4vw, 56px); }
.jcards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.jcard { --gr: 24px; position: relative; display: flex; flex-direction: column; gap: 16px; min-height: 300px; padding: 28px 26px 24px; overflow: hidden; isolation: isolate; }
.jcard::after { content: ''; position: absolute; left: -20%; right: -20%; bottom: -70%; height: 110%; z-index: -1; background: radial-gradient(closest-side, var(--kc), transparent); opacity: 0; transition: opacity .7s var(--ease), transform 1.2s var(--expo); transform: translateY(20%); }
.jcard:hover::after { opacity: .22; transform: none; }
.jmeta { display: flex; justify-content: space-between; gap: 10px; color: var(--muted); font: 500 12px/1.4 var(--f-display); letter-spacing: .06em; }
.jkind { display: inline-flex; align-items: center; gap: 8px; font: 500 12.5px/1 var(--f-sans); color: var(--fg); letter-spacing: 0; }
.jkind i { width: 7px; height: 7px; border-radius: 50%; background: var(--kc, var(--gray)); box-shadow: 0 0 10px var(--kc); }
.jcard h3 { margin: 0; font: 700 22px/1.45 var(--f-serif-ko); letter-spacing: -.02em; }
.jcard p { margin: 0; color: var(--fg-2); font-size: 14.5px; line-height: 1.75; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.jfoot { margin-top: auto; display: grid; gap: 16px; }
.jgo { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; }
.jgo .arr { width: 14px; height: 9px; transition: transform .45s var(--expo); }
.jcard:hover .jgo .arr { transform: translateX(6px); }
.jstrip { display: flex; height: 6px; gap: 2px; }
.jstrip span { flex-basis: 0; min-width: 2px; }
@media (max-width: 900px) { .jcards { grid-template-columns: minmax(0, 1fr); } .jcard { min-height: 0; } }

/* ============================================================
   아틀리에 띠
   ============================================================ */
.band { overflow: clip; padding-block: clamp(130px, 17vw, 240px); }
.band-in { position: relative; z-index: 2; display: grid; gap: 24px; justify-items: start; }
.band-quote { max-width: 15em; margin: 0; font: 700 clamp(32px, 4.6vw, 68px)/1.38 var(--f-serif-ko); letter-spacing: -.035em; text-wrap: balance; }
.band-sub { margin: 0; color: var(--fg-2); max-width: 36em; }
.band-cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.band-prism { position: absolute; right: -8%; top: 0; bottom: 0; width: 64%; pointer-events: none; }
.band-prism i { position: absolute; left: 0; right: 0; top: 62%; height: 1.5px; background: var(--prism); transform-origin: 0 50%; opacity: .55; box-shadow: 0 0 22px 1px rgba(183, 195, 222, .18); transform: rotate(calc(-20deg + var(--j) * 4.2deg + (var(--s, .5) - .5) * 12deg)) scaleX(calc(.5 + var(--s, 1) * .6)); will-change: transform; }
.band-prism i:nth-child(1) { --j: 0; }
.band-prism i:nth-child(2) { --j: 1; opacity: .35; }
.band-prism i:nth-child(3) { --j: 2; opacity: .5; }
.band-prism i:nth-child(4) { --j: 3; opacity: .25; }
.band-prism i:nth-child(5) { --j: 4; opacity: .4; }
.band-prism::before { content: ''; position: absolute; left: -6px; top: calc(62% - 6px); width: 12px; height: 12px; border-radius: 50%; background: #fff; box-shadow: 0 0 30px 8px rgba(255, 255, 255, .35); }
@media (max-width: 760px) { .band-prism { width: 100%; right: -40%; opacity: .6; } }

/* ============================================================
   바닥글
   ============================================================ */
.nf { position: relative; z-index: 1; background: linear-gradient(180deg, rgba(6, 7, 8, 0), rgba(6, 7, 8, .86) clamp(120px, 14vw, 220px), #060708); color: var(--fg-2); padding: clamp(110px, 12vw, 190px) 0 calc(28px + env(safe-area-inset-bottom, 0px)); overflow: clip; }
.nf a:hover { color: #fff; }
.nf-top { display: grid; grid-template-columns: minmax(0, 1.2fr) repeat(3, minmax(0, 1fr)); gap: clamp(28px, 4vw, 64px); }
.nf-brand .nf-word { display: block; width: min(200px, 60%); color: var(--fg); }
.nf-brand .nf-word svg { width: 100%; height: auto; aspect-ratio: 2312 / 752; }
.nf-brand p { margin: 22px 0 0; font: 500 10.5px/1.9 var(--f-display); letter-spacing: .3em; text-transform: uppercase; color: var(--muted); }
.nf-col h2 { margin: 0 0 18px; font: 500 11px/1 var(--f-display); letter-spacing: .28em; text-transform: uppercase; color: var(--muted); }
.nf-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; font-size: 15px; }
.nf-col li.sub a { color: var(--muted); font-size: 13.5px; }
.nf-col .link { font-size: 14.5px; }
.nf-mailrow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.nf-copy { border: 1px solid var(--line-2); border-radius: 999px; background: none; color: var(--fg-2); font-size: 12px; padding: 4px 10px; cursor: pointer; }
.nf-copy:hover { border-color: #fff; color: #fff; }
.nf-family { display: inline-flex; align-items: center; gap: 10px; margin-top: 20px; padding: 10px 16px; border: 1px solid var(--line-2); border-radius: 999px; font-size: 13px; }
.nf-family svg { width: 12px; height: 12px; }
.nf-big { margin: clamp(64px, 9vw, 130px) 0 0; overflow: hidden; }
.nf-big svg { width: 100%; height: auto; aspect-ratio: 2312 / 752; overflow: visible; }
.nf-big .nb { fill: var(--fg); transform-box: fill-box; transform: translate3d(0, calc((1 - clamp(0, calc((var(--s, 1) - .25 - var(--k) * .1) * 3), 1)) * 105%), 0); }
.nf-big .nb.n { --k: 0; }
.nf-big .nb.i { --k: 1; }
.nf-big .nb.o { --k: 2; }
.nf-bottom { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px 24px; margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--line); color: var(--muted); font-size: 12.5px; }
.nf-bottom a { color: var(--fg-2); }
.nf-tools a { margin-left: 14px; }
@media (max-width: 900px) { .nf-top { grid-template-columns: repeat(2, minmax(0, 1fr)); } .nf-brand { grid-column: 1 / -1; } }

/* ============================================================
   하위 페이지 머리
   ============================================================ */
.ph { padding-block: calc(var(--hdr) + clamp(56px, 9vw, 140px)) clamp(44px, 5vw, 80px); }
.ph .h-mega { margin-top: 26px; }
.ph .lead { margin-top: 26px; }
.crumbs { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; color: var(--muted); font: 500 11px/1.4 var(--f-display); letter-spacing: .18em; text-transform: uppercase; }
.crumbs li + li::before { content: '/'; margin-right: 8px; color: var(--faint); }
.crumbs a:hover { color: var(--fg); }

/* ============================================================
   그림: 라벨, 노트 카드, 병 심볼, 분자
   ============================================================ */
.label, .ncard { display: block; width: 100%; height: auto; }
.lb-paper, .nc-paper { fill: var(--paper); }
.lb-name { font-family: var(--f-label); font-weight: 500; }
.lb-no { font-family: var(--f-print); font-weight: 500; letter-spacing: .16em; }
.nc-name { font-family: var(--f-print); font-weight: 700; }
.nc-notes { font-family: var(--f-print); font-weight: 500; letter-spacing: .2em; }
.nc-side { font-family: var(--f-print-s); }

.bottle { display: block; width: 100%; height: auto; overflow: visible; color: #fff; }
/* 블렌더 병 (업데이트 47, 시그니처 병 A · TFL 샌딩 유리 기둥 병): 투명 배경 렌더를 400 × 540 상자에. .lv 는 빈 병 위에 향수 든 병을 --lv 높이까지만 (액면 44%~78%) */
.bimg { position: relative; aspect-ratio: 400 / 540; }
.bimg::before { content: ''; position: absolute; left: 14%; right: 18%; bottom: 7%; height: 7%; border-radius: 50%; background: radial-gradient(closest-side, rgba(0, 0, 0, .55), transparent); }
.bimg.glow::before { background: radial-gradient(closest-side, rgba(255, 226, 190, .22), rgba(0, 0, 0, .4) 60%, transparent); }
.bimg.tfl::before { left: 30%; right: 39%; }
.bimg img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.bimg.lv .bi-f { clip-path: inset(calc(44.07% + (1 - var(--lv, 1)) * 33.89%) 0 0 0); }
.bimg .b-ann { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.bimg .b-ann .dl { stroke-opacity: .5; stroke-width: 1; }
.bimg .b-ann text { fill: var(--muted); font: 500 9.5px var(--f-display); letter-spacing: .18em; }
.bimg .b-ann .b-cap { fill: var(--fg-2); font-size: 9px; }
.bottle .b-body { fill: rgba(255, 255, 255, .03); }
.bottle.sig .b-body { fill: rgba(6, 7, 9, .82); }
.bottle .dl { fill: none; stroke: #fff; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.bottle .b-line { stroke-opacity: .92; }
.bottle .b-in { stroke-opacity: .28; }
.bottle .b-cut { stroke-opacity: .2; }
.bottle .b-ray { stroke-opacity: .32; stroke-width: 1; }
.bottle .b-star { stroke-opacity: .95; fill: rgba(255, 255, 255, .06); }
.bottle .b-rib { stroke-opacity: .13; }
.bottle .b-base { stroke-opacity: .35; }
.bottle .b-hi { fill: none; stroke-width: 3.2; stroke-linecap: round; opacity: .5; }
.bottle .b-mark { opacity: .55; }
.bottle .b-liq { opacity: .82; }
.bottle.sig .b-liq { opacity: .42; }
.bottle .b-surf { animation: wave 5s linear infinite; }
@keyframes wave { to { transform: translateX(-80px); } }
.bottle .b-prism { mix-blend-mode: screen; }
.bottle .b-prism path + path { animation: prism 3.6s ease-in-out infinite alternate; }
.bottle .b-prism path:nth-child(3) { animation-delay: -.9s; }
.bottle .b-prism path:nth-child(4) { animation-delay: -1.8s; }
.bottle .b-prism path:nth-child(5) { animation-delay: -2.7s; }
@keyframes prism { from { opacity: .25; } to { opacity: 1; } }
.bottle .b-glow { animation: glow 6s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: 50% 50%; }
@keyframes glow { to { transform: scale(1.08); opacity: .75; } }
.bottle .b-ann { stroke: rgba(255, 255, 255, .34); }
.bottle .b-ann-t { fill: var(--muted); font: 500 11px var(--f-display); letter-spacing: .16em; }
/* 드러날 때 선이 그려짐 (--r 은 js) */
.rv .bottle .dl, .rv .mol path { stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--r, 1)); }

.mol { position: relative; width: 62%; height: auto; overflow: visible; }
.mol path { fill: none; stroke: var(--fg); stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }
.mol text { font: 600 22px var(--f-display); fill: var(--coral); }
html.js .mol.draw path { stroke-dasharray: 1; stroke-dashoffset: 1; animation: molDraw 2.6s var(--ease) .2s forwards; }
@keyframes molDraw { to { stroke-dashoffset: 0; } }

/* 병과 라벨 상자, 세 병, 포뮬러 카드 */
.comp { position: relative; width: min(500px, 90%); aspect-ratio: 1 / .92; }
.comp-label { position: absolute; left: 0; top: 18%; z-index: 2; width: 36%; transform: rotate(-6deg); }
.comp-label .label { filter: drop-shadow(0 26px 40px rgba(0, 0, 0, .6)); }
.comp-bottle { position: absolute; right: 0; bottom: 0; width: 66%; }
.trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3%; align-items: end; }
.trio-b { margin: 0; display: grid; gap: 10px; justify-items: center; }
.trio-b figcaption { display: grid; justify-items: center; color: var(--muted); font-size: 12.5px; line-height: 1.4; }
.trio-b figcaption b { font: 400 18px var(--f-print-s); color: var(--fg); }
.fcard { position: relative; width: 60%; aspect-ratio: 1000 / 1200; background: var(--paper); color: var(--ink); container-type: inline-size; display: grid; grid-template-rows: auto 1fr auto auto; padding: 7%; box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .8); background-image: linear-gradient(rgba(14, 15, 18, .06) 1px, transparent 1px), linear-gradient(90deg, rgba(14, 15, 18, .06) 1px, transparent 1px); background-size: 8% 6.6%; }
.fcard .fc-top, .fcard .fc-foot { display: flex; justify-content: space-between; margin: 0; font: 500 3.2cqw/1 var(--f-print); letter-spacing: .1em; color: #5E5F63; }
.fc-mols { display: grid; gap: 6%; align-content: center; justify-items: center; }
.fc-mols figure { margin: 0; display: grid; justify-items: center; gap: 1cqw; width: 100%; }
.fc-mols figcaption { font: 500 2.8cqw var(--f-print); letter-spacing: .1em; color: #5E5F63; }
.fc-mols .mol { width: 42%; }
.fc-mols .mol path { stroke: var(--ink); stroke-width: 5; }
.fc-mols .mol text { fill: #A4524A; }
.fc-name { margin: 0 0 4%; text-align: center; font: 400 8cqw/1.1 var(--f-print-s); font-style: italic; }

/* ============================================================
   컬렉션 페이지
   ============================================================ */
.rooms { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.room { position: relative; display: grid; grid-template-rows: auto 1fr; border: 1px solid var(--line); -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4); background: linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, 0) 60%); overflow: hidden; transition: border-color .5s; }
.room:hover { border-color: rgba(255, 255, 255, .42); }
.room-vis { position: relative; display: grid; place-items: center; aspect-ratio: 5 / 4; transition: transform .6s var(--expo); }
.room-mols { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.room-vis > :not(.room-mols) { position: relative; z-index: 1; }
.room.sig .room-vis { background: radial-gradient(56% 50% at 60% 62%, rgba(183, 195, 222, .16), transparent 72%); }
.room.tfl .room-vis { background: radial-gradient(40% 40% at 38% 50%, rgba(252, 226, 154, .16), transparent 72%), radial-gradient(40% 40% at 64% 54%, rgba(199, 184, 238, .18), transparent 72%); }
.room-body { display: flex; flex-direction: column; gap: 10px; padding: clamp(22px, 2.6vw, 36px); }
.room-name { display: block; margin-top: 4px; font: 600 clamp(22px, 2.2vw, 32px)/1.1 var(--f-display); text-transform: uppercase; letter-spacing: -.005em; }
.room-ko { display: block; color: var(--muted); font: 400 14px/1.5 var(--f-serif-ko); }
.room-lead { display: block; color: var(--fg-2); font-size: 15px; line-height: 1.75; }
.room-foot { display: flex; align-items: baseline; gap: 14px; margin-top: auto; padding-top: 20px; border-top: 1px solid var(--line); }
.room-foot b { font: 300 clamp(32px, 3vw, 44px)/1 var(--f-display); letter-spacing: -.03em; }
.room-foot small { color: var(--muted); font: 500 11px/1.4 var(--f-display); letter-spacing: .14em; text-transform: uppercase; }
.room-go { margin-left: auto; align-self: center; display: grid; place-items: center; width: 46px; height: 46px; border: 1px solid var(--line-2); border-radius: 50%; transition: background-color .45s, color .45s, transform .6s var(--expo); }
.room-go .arr { width: 16px; height: 10px; }
.room:hover .room-go { background: var(--fg); color: var(--bg); transform: rotate(-45deg); }
/* 두 방의 제품 (업데이트 48): 틀 없이 방 안에 바로 (js setupRooms). 병 A 는 오른쪽, 라벨은 왼쪽 뒤. TFL 여섯 병은 세 겹 */
.room-vis > .rm-sig, .room-vis > .rm-tfl { align-self: stretch; justify-self: stretch; pointer-events: none; }
.rm-sig .cutx { position: absolute; left: 61%; bottom: 0; height: 90%; width: auto; translate: -50% 0; }
.rm-lb { position: absolute; left: 11%; top: 19%; width: 26%; will-change: transform; }
.rm-lb .label { display: block; filter: drop-shadow(0 26px 40px rgba(0, 0, 0, .6)); }
.rm-tb { position: absolute; left: var(--x); bottom: var(--b); height: var(--h); translate: -50% 0; will-change: transform; }
.rm-tb .cutx { height: 100%; width: auto; }
.rm-tb[data-l="2"] { z-index: 1; filter: brightness(.7) saturate(.92) blur(.7px); }
.rm-tb[data-l="1"] { z-index: 2; filter: brightness(.86); }
.rm-tb[data-l="0"] { z-index: 3; }
html.q-lo .rm-tb { filter: none; }
html.q-lo .rm-tb[data-l="2"] { opacity: .7; }
.tgrid-sec { padding-block: var(--sec); }
.tgrid-sec .sec-head { margin-bottom: clamp(36px, 4vw, 56px); }
.tgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.tcell { position: relative; display: grid; gap: 22px; justify-items: center; padding: clamp(28px, 3.4vw, 52px) 20px 26px; border: 1px solid var(--line); overflow: hidden; isolation: isolate; transition: border-color .5s; }
.tcell:hover { border-color: rgba(255, 255, 255, .4); }
.tcell-glow { position: absolute; inset: -20%; z-index: -1; background: var(--gl); opacity: .45; transition: opacity .7s var(--ease), transform 1.4s var(--expo); }
.tcell:hover .tcell-glow { opacity: .85; transform: scale(1.12); }
.tcell-l { width: min(230px, 64%); transition: transform .6s var(--expo); }
.tcell-l .label { filter: drop-shadow(0 26px 36px rgba(0, 0, 0, .55)); }
.tcell-t { display: grid; justify-items: center; gap: 4px; text-align: center; }
.tcell-t b { font: 500 13px/1.4 var(--f-display); letter-spacing: .2em; }
.tcell-t small { color: var(--fg-2); font-size: 13.5px; }
@media (max-width: 900px) { .rooms { grid-template-columns: minmax(0, 1fr); } .tgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .tgrid { grid-template-columns: minmax(0, 1fr); } }

/* ============================================================
   제품 페이지 (구매 페이지 배치)
   ============================================================ */
.pd { padding-top: calc(var(--hdr) + clamp(20px, 3vw, 36px)); }
.pd-grid { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); gap: clamp(28px, 4.4vw, 80px); margin-top: 22px; align-items: start; }
.pd-media { position: sticky; top: calc(var(--hdr) + 18px); display: grid; gap: 12px; }
.pd-stage { position: relative; aspect-ratio: 1 / 1; overflow: hidden; border: 1px solid var(--line); background: rgba(12, 13, 16, .52); -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3); isolation: isolate; }
.pd-glow { position: absolute; inset: -12%; z-index: -1; transition: opacity 1s var(--ease); animation: breathe 8s ease-in-out infinite alternate; }
.pd-glow.fresh { opacity: 0; }
@keyframes breathe { to { transform: scale(1.06) translate(1%, -1%); } }
.pd-stage.idle .pd-glow, .obs.idle .obs-glow { animation-play-state: paused; }   /* 화면 밖이면 멈춤 (js/nio.js 의 pauseOff) */
.pd-view { position: absolute; inset: 0; display: grid; place-items: center; }
.pd-view.swap > * { animation: stageIn .9s var(--expo) both; }
@keyframes stageIn { from { opacity: 0; transform: translateY(18px) scale(.97); } to { opacity: 1; transform: none; } }
.pd-view .comp { width: 84%; }
.pd-view .st-label { width: 44%; }
.pd-view .st-label .label { filter: drop-shadow(0 30px 44px rgba(0, 0, 0, .6)); }
.pd-view .st-card { width: 54%; }
.pd-view .st-card .ncard { box-shadow: 0 30px 60px -24px rgba(0, 0, 0, .8); }
.pd-view .trio { width: 84%; }
.pd-view .six { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; width: 70%; }
.pd-view .six .label { filter: drop-shadow(0 18px 26px rgba(0, 0, 0, .5)); }
.pd-thumbs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.pd-thumb { position: relative; display: grid; grid-template-rows: 1fr auto; gap: 6px; padding: 10px 8px 8px; border: 1px solid var(--line); background: rgba(12, 13, 16, .5); cursor: pointer; overflow: hidden; transition: border-color .35s; }
.pd-thumb > span { aspect-ratio: 1; display: grid; place-items: center; pointer-events: none; }
.pd-thumb small { font: 500 10px/1.3 var(--f-display); letter-spacing: .1em; color: var(--muted); text-align: center; }
.pd-thumb[aria-pressed="true"] { border-color: var(--fg); }
.pd-thumb[aria-pressed="true"] small { color: var(--fg); }
.pd-thumb:hover { border-color: rgba(255, 255, 255, .4); }
.pd-thumb .comp { width: 100%; }
.pd-thumb .bottle .dl { stroke-width: 3; }
.pd-thumb .bottle .b-prism, .pd-thumb .bottle .b-ann, .pd-thumb .bottle .b-ann-t { display: none; }
.pd-thumb .st-label { width: 58%; }
.pd-thumb .st-card { width: 62%; }
.pd-thumb .trio { width: 100%; }
.pd-thumb .trio-b figcaption { display: none; }
.pd-thumb .six { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; width: 80%; }
.pd-thumb .fcard { width: 64%; padding: 5%; box-shadow: none; }

.pd-info { display: flex; flex-direction: column; min-width: 0; }
.pd-title { margin: 16px 0 0; font: 600 clamp(32px, 3.6vw, 54px)/1.04 var(--f-display); letter-spacing: -.015em; text-transform: uppercase; text-wrap: balance; }
.pd-ko { margin: 10px 0 0; color: var(--muted); font: 400 15px/1.5 var(--f-serif-ko); }
.pd-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px 16px; margin: 28px 0 0; padding-top: 24px; border-top: 1px solid var(--line-2); }
.pd-price b { font: 300 clamp(44px, 4.4vw, 64px)/1 var(--f-display); letter-spacing: -.03em; }
.pd-price small { color: var(--muted); font: 500 12px/1.4 var(--f-display); letter-spacing: .14em; }
.pd-pnote { margin: 10px 0 0; color: var(--muted); font-size: 13.5px; }
.pd-lead { margin: 22px 0 0; font-size: 16.5px; line-height: 1.85; color: var(--fg-2); }
.pd-opt { margin: 30px 0 0; padding: 0; border: 0; min-width: 0; }
.pd-opt legend, .pd-opt .opt-h { display: flex; justify-content: space-between; gap: 12px; width: 100%; padding: 0; margin: 0 0 12px; font: 500 14px/1.4 var(--f-sans); color: var(--fg); }
.pd-opt legend small, .pd-opt .opt-h small { color: var(--muted); font: 400 13px var(--f-sans); }
.opt-methods { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.opt-m { position: relative; display: grid; gap: 2px; padding: 16px 18px; border: 1px solid var(--line-2); border-radius: 2px; background: rgba(255, 255, 255, .02); text-align: left; transition: border-color .3s, background-color .3s; }
.opt-m b { font-size: 15px; font-weight: 500; }
.opt-m small { color: var(--muted); font-size: 13px; }
.opt-m:hover { border-color: rgba(255, 255, 255, .5); }
.opt-m[aria-checked="true"] { border-color: var(--fg); background: rgba(255, 255, 255, .06); }
.opt-m[aria-checked="true"]::after { content: ''; position: absolute; right: 14px; top: 14px; width: 8px; height: 8px; border-radius: 50%; background: var(--fg); }
.opt-scents { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.opt-s { display: grid; grid-template-columns: 28px minmax(0, 1fr); align-items: center; gap: 10px; padding: 10px 12px 10px 10px; border: 1px solid var(--line-2); border-radius: 2px; background: rgba(255, 255, 255, .02); text-align: left; min-width: 0; transition: border-color .3s, background-color .3s; }
.opt-s i { width: 28px; height: 34px; border-radius: 2px; background: var(--g); box-shadow: inset 0 0 0 2px var(--paper); }
.opt-s b { display: block; font: 500 11.5px/1.2 var(--f-display); letter-spacing: .14em; }
.opt-s small { display: block; color: var(--muted); font-size: 12px; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.opt-s:hover { border-color: rgba(255, 255, 255, .5); }
.opt-s[aria-checked="true"] { border-color: var(--fg); background: rgba(255, 255, 255, .06); }
.opt-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.pd-opt .opt-row .opt-h { width: auto; flex: 1 1 auto; justify-content: flex-start; gap: 10px; }
.opt-row .qty { flex: none; }
.qty { display: inline-grid; grid-template-columns: 44px 48px 44px; height: 44px; border: 1px solid var(--line-2); border-radius: 999px; overflow: hidden; }
.qty button { font-size: 18px; }
.qty button:disabled { color: var(--faint); cursor: default; }
.qty output { display: grid; place-items: center; font: 500 15px var(--f-display); border-inline: 1px solid var(--line); }
.pd-notes { margin: 16px 0 0; padding: 18px 18px 6px; border: 1px solid var(--line); background: rgba(255, 255, 255, .02); }
.pd-notes .pn-mood { margin: 0 0 14px; font: 400 15px/1.7 var(--f-serif-ko); color: var(--fg-2); }
.pd-notes dl { display: grid; grid-template-columns: 70px 1fr; margin: 0; }
.pd-notes dt, .pd-notes dd { margin: 0; padding: 10px 0; border-top: 1px solid var(--line); font-size: 14px; }
.pd-notes dt { color: var(--muted); font: 500 10.5px/2.1 var(--f-display); letter-spacing: .18em; text-transform: uppercase; }
.pd-actions { display: grid; gap: 12px; margin: 30px 0 0; }
.pd-actions .sub { display: flex; justify-content: center; gap: 18px; flex-wrap: wrap; margin: 4px 0 0; font-size: 14px; color: var(--muted); }
.pd-actions .sub a { border-bottom: 1px solid var(--line-2); }
.pd-actions .sub a:hover { color: var(--fg); border-color: var(--fg); }
.pd-facts { display: grid; grid-template-columns: auto 1fr; margin: 32px 0 0; }
.pd-facts dt, .pd-facts dd { margin: 0; padding: 12px 0; border-top: 1px solid var(--line); font-size: 14px; }
.pd-facts dt { padding-right: 22px; color: var(--muted); white-space: nowrap; }
.pd-acc { margin-top: 28px; border-bottom: 1px solid var(--line); }
.pd-acc details { border-top: 1px solid var(--line); }
.pd-acc summary { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 19px 0; cursor: pointer; list-style: none; font-weight: 500; font-size: 15px; }
.pd-acc summary::-webkit-details-marker { display: none; }
.pd-acc summary i { position: relative; width: 12px; height: 12px; flex: none; }
.pd-acc summary i::before, .pd-acc summary i::after { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 1.5px; background: var(--fg); transition: transform .4s var(--expo); }
.pd-acc summary i::after { transform: rotate(90deg); }
.pd-acc details[open] summary i::after { transform: rotate(0); }
.pd-acc .acc-b { padding: 0 0 22px; color: var(--fg-2); font-size: 15px; line-height: 1.9; }
.pd-acc .acc-b p { margin: 0 0 12px; }
.pd-acc .acc-b ul { margin: 0; padding-left: 18px; }
@media (max-width: 960px) { .pd-grid { grid-template-columns: minmax(0, 1fr); } .pd-media { position: relative; top: 0; } }
@media (max-width: 520px) { .opt-scents { grid-template-columns: repeat(2, minmax(0, 1fr)); } .opt-methods { grid-template-columns: minmax(0, 1fr); } }

/* 제품 이야기 */
.story { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 96px); align-items: start; }
.story > div:first-child { display: grid; gap: 20px; }
.story-body p { margin: 0 0 18px; font-size: clamp(16px, 1.25vw, 18px); line-height: 1.95; color: var(--fg-2); }
.story-body p.first { font: 400 clamp(21px, 2vw, 28px)/1.7 var(--f-serif-ko); color: var(--fg); letter-spacing: -.02em; }
.story-body .story-close { margin: 34px 0 0; color: var(--fg); padding-top: 28px; border-top: 1px solid var(--line-2); font: 700 clamp(21px, 2vw, 28px)/1.6 var(--f-serif-ko); letter-spacing: -.02em; }
@media (max-width: 900px) { .story { grid-template-columns: minmax(0, 1fr); } }
.trio-sec { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 80px); align-items: center; }
.trio-art { display: grid; place-items: center; padding: clamp(20px, 3vw, 48px); border: 1px solid var(--line); background: radial-gradient(50% 50% at 50% 60%, rgba(183, 195, 222, .1), transparent 72%); aspect-ratio: 4 / 3; }
.trio-art { position: relative; }
.trio-art .fcard { width: 46%; transform: rotate(3deg) translateX(10%); }
.trio-art .ta-label { position: absolute; left: 14%; top: 50%; width: 26%; height: auto; transform: translateY(-50%) rotate(-8deg); filter: drop-shadow(0 24px 36px rgba(0, 0, 0, .6)); }
.trio-list { margin: 28px 0 0; padding: 0; list-style: none; display: grid; border-top: 1px solid var(--line-2); }
.trio-list li { display: grid; grid-template-columns: 52px 1fr; gap: 12px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.trio-list li b { font: 400 20px/1.4 var(--f-serif); color: var(--fg); }
.trio-list li p { margin: 0; color: var(--fg-2); }
.trio-list li p strong { display: block; color: var(--fg); font-weight: 500; }
@media (max-width: 900px) { .trio-sec { grid-template-columns: minmax(0, 1fr); } }
.fam-sec .sec-head { margin-bottom: clamp(36px, 5vw, 64px); }
.fam-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2.2vw, 32px) clamp(14px, 2vw, 28px); }
.fam-card { display: grid; gap: 16px; align-content: start; }
.fam-art { width: 100%; }
.fam-art .tilt-in { transition: transform .6s var(--expo); }
.fam-art .ncard { box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .9); }
.fam-card h3 { margin: 4px 0 0; font: 500 13.5px/1.4 var(--f-display); letter-spacing: .18em; }
.fam-card h3 small { margin-left: 8px; color: var(--muted); font: 400 13px var(--f-serif-ko); letter-spacing: 0; }
.fam-card p { margin: 0; color: var(--fg-2); font-size: 14.5px; line-height: 1.8; }
.fam-card .link { justify-self: start; }
@media (max-width: 900px) { .fam-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .fam-cards { grid-template-columns: minmax(0, 1fr); } }

/* ============================================================
   원료 페이지
   ============================================================ */
.ing-sec { padding-bottom: var(--sec); }
.ing-tools { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; margin: 0 0 24px; }
.ing-search { flex: 1 1 280px; max-width: 460px; display: flex; align-items: center; gap: 12px; height: 52px; padding: 0 20px; border: 1px solid var(--line-2); border-radius: 999px; background: rgba(255, 255, 255, .03); }
.ing-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; font: inherit; font-size: 15px; color: var(--fg); }
.ing-search input::placeholder { color: var(--muted); }
.ing-search:focus-within { border-color: var(--fg); }
.ing-search svg { width: 16px; height: 16px; stroke: var(--muted); fill: none; stroke-width: 1.6; }
.ing-toggle { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--fg-2); cursor: pointer; }
.ing-toggle input { width: 18px; height: 18px; accent-color: var(--fg); }
.ing-fams { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 30px; }
.ing-fam { display: inline-flex; align-items: center; gap: 8px; padding: 7px 13px; border: 1px solid var(--line-2); border-radius: 999px; font-size: 13px; transition: border-color .3s, background-color .3s, color .3s; }
.ing-fam i { width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
.ing-fam small { color: var(--muted); font: 500 10.5px var(--f-display); }
.ing-fam:hover { border-color: rgba(255, 255, 255, .5); }
.ing-fam[aria-pressed="true"] { border-color: var(--fg); background: var(--fg); color: var(--bg); }
.ing-fam[aria-pressed="true"] small { color: #5E5F63; }
.ing-count { color: var(--muted); font: 500 11px/1 var(--f-display); letter-spacing: .14em; margin: 0 0 14px; }
.ing-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.ing-card { position: relative; display: grid; grid-template-rows: 124px auto; gap: 12px; padding: 18px 18px 20px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); min-width: 0; overflow: hidden; isolation: isolate; animation: cardIn .8s var(--expo) both; animation-delay: calc(var(--k, 0) * 35ms); transition: background-color .4s; }
@keyframes cardIn { from { opacity: 0; transform: translateY(18px); } }
.ing-card::before { content: ''; position: absolute; left: 50%; top: 30%; z-index: -1; width: 70%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(closest-side, var(--c), transparent); opacity: 0; transform: translate(-50%, -50%) scale(.6); transition: opacity .6s, transform .9s var(--expo); }
.ing-card:hover { background: rgba(255, 255, 255, .025); }
.ing-card:hover::before { opacity: .22; transform: translate(-50%, -50%) scale(1); }
.ing-art { display: grid; place-items: center; overflow: hidden; }
.ing-art .mol { width: 78%; max-height: 112px; }
.ing-art .mol path { stroke-width: 4.2; opacity: .85; }
.ing-card:hover .mol path { stroke-dasharray: 1; animation: redraw 1.3s var(--ease); }
@keyframes redraw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
.ing-art .blob { width: 70px; height: 70px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff 0%, var(--c) 55%, transparent 72%); opacity: .8; }
.ing-card b { display: block; font-size: 15px; font-weight: 500; line-height: 1.4; }
.ing-card small { display: block; color: var(--muted); font-size: 12.5px; line-height: 1.4; }
.ing-tags { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-top: 8px; }
.ing-tag { display: inline-flex; align-items: center; gap: 6px; font: 400 11.5px/1.6 var(--f-sans); color: var(--muted); }
.ing-tag i { width: 7px; height: 7px; border-radius: 50%; background: var(--c); }
.ing-more { display: flex; justify-content: center; margin-top: 30px; }
.ing-one { padding-top: calc(var(--hdr) + clamp(24px, 3vw, 44px)); padding-bottom: var(--sec); }
.ing-detail { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 80px); align-items: start; margin-top: 28px; }
.obs { position: relative; margin: 0; aspect-ratio: 1; display: grid; place-items: center; overflow: hidden; border: 1px solid var(--line); background: rgba(12, 13, 16, .5); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); isolation: isolate; }
.obs-grid { position: absolute; inset: 0; z-index: -1; background-image: linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px); background-size: 30px 30px; background-position: -1px -1px; }
.obs-glow { position: absolute; inset: 10%; z-index: -1; border-radius: 50%; background: radial-gradient(closest-side, var(--c), transparent); opacity: .2; animation: breathe 7s ease-in-out infinite alternate; }
.obs .mol.big { width: 64%; }
.obs-top, .obs-foot { position: absolute; left: 18px; right: 18px; display: flex; justify-content: space-between; gap: 12px; margin: 0; color: var(--muted); font: 500 10.5px/1.4 var(--f-display); letter-spacing: .16em; text-transform: uppercase; }
.obs-top { top: 16px; }
.obs-foot { bottom: 16px; }
.ing-en { margin: 10px 0 0; color: var(--muted); }
.kv { display: grid; grid-template-columns: auto 1fr; margin: 28px 0 0; }
.kv dt, .kv dd { margin: 0; padding: 12px 0; border-top: 1px solid var(--line); font-size: 15px; }
.kv dt { padding-right: 24px; color: var(--muted); }
.ing-used { margin: 18px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.ing-used li a { display: flex; justify-content: space-between; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.ing-used li a span:last-child { color: var(--muted); font: 500 12px var(--f-display); }
@media (max-width: 860px) { .ing-detail { grid-template-columns: minmax(0, 1fr); } }

/* ============================================================
   저널 목록과 글
   ============================================================ */
.jsec { padding-bottom: var(--sec); }
.jtabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 30px; }
.jtab { padding: 9px 16px; border: 1px solid var(--line-2); border-radius: 999px; font-size: 14px; transition: border-color .3s, background-color .3s, color .3s; }
.jtab small { margin-left: 6px; color: var(--muted); font: 500 11px var(--f-display); }
.jtab:hover { border-color: rgba(255, 255, 255, .5); }
.jtab[aria-current="true"] { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.jtab[aria-current="true"] small { color: #5E5F63; }
.jlist { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line-2); }
.jrow { position: relative; display: grid; grid-template-columns: 120px 150px minmax(0, 1fr) 150px 30px; gap: 20px; align-items: baseline; padding: 28px 0; border-bottom: 1px solid var(--line); isolation: isolate; }
.jrow::before { content: ''; position: absolute; inset: 0 -2vw; z-index: -1; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .035), transparent); opacity: 0; transition: opacity .45s; }
.jrow:hover::before { opacity: 1; }
.jr-date { color: var(--muted); font: 500 12px var(--f-display); letter-spacing: .08em; }
.jr-title { display: block; font: 700 clamp(19px, 1.7vw, 24px)/1.45 var(--f-serif-ko); letter-spacing: -.02em; transition: transform .6s var(--expo); }
.jrow:hover .jr-title { transform: translateX(8px); }
.jr-ex { display: block; margin-top: 6px; color: var(--muted); font-size: 14.5px; line-height: 1.7; }
.jr-strip { align-self: center; }
.jr-go { align-self: center; justify-self: end; }
.jr-go .arr { width: 16px; height: 10px; transition: transform .45s var(--expo); }
.jrow:hover .jr-go .arr { transform: translateX(6px); }
@media (max-width: 860px) { .jrow { grid-template-columns: minmax(0, 1fr); gap: 6px; } .jr-strip { width: 50%; } .jr-go { display: none; } }
.post { padding-bottom: var(--sec); }
.post-head { max-width: 960px; padding: calc(var(--hdr) + clamp(40px, 6vw, 96px)) 0 clamp(28px, 3vw, 44px); }
.post-title { margin: 22px 0 0; font: 700 clamp(32px, 4.4vw, 60px)/1.26 var(--f-serif-ko); letter-spacing: -.035em; text-wrap: balance; }
.post-meta { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 24px 0 0; padding: 0; list-style: none; color: var(--muted); font-size: 13.5px; }
.post-lede { margin: 26px 0 0; font: 400 clamp(17px, 1.5vw, 20px)/1.85 var(--f-serif-ko); color: var(--fg-2); max-width: 40em; }
.post-cover { margin: 0 0 clamp(28px, 4vw, 56px); background: var(--bg-2); }
.post-cover img { width: 100%; max-height: 78vh; object-fit: cover; }
.post-fx { margin: 0 0 clamp(28px, 4vw, 56px); padding: clamp(20px, 3vw, 40px); border: 1px solid var(--line); background: rgba(255, 255, 255, .02); }
.prose { max-width: 740px; font-size: 17px; line-height: 1.95; color: var(--fg-2); }
.prose h2, .prose h3 { color: var(--fg); font-family: var(--f-serif-ko); font-weight: 700; line-height: 1.45; margin: 2em 0 .6em; letter-spacing: -.02em; }
.prose h2 { font-size: 27px; }
.prose h3 { font-size: 21px; }
.prose p { margin: 0 0 1.2em; }
.prose a { color: var(--fg); border-bottom: 1px solid var(--blue); }
.prose a:hover { border-color: var(--fg); }
.prose blockquote { margin: 1.6em 0; padding: 4px 0 4px 22px; border-left: 2px solid var(--coral); color: var(--fg-2); }
.prose img { margin: 1.6em 0; }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose code { font-size: .9em; background: var(--bg-3); padding: 2px 6px; }
.prose hr { border: 0; height: 1px; background: var(--line); margin: 2.4em 0; }
.prose .ing-ref { color: var(--fg); border-bottom: 1px solid var(--blue); }
.tx.s-sm { font-size: .84em; }
.tx.s-lg { font-size: 1.3em; line-height: 1.6; }
.tx.s-xl { font-size: 1.75em; line-height: 1.4; }
.tx.c-red { color: #EBA39C; }
.tx.c-yellow { color: #1A1600; background: #F6E6A6; padding: 0 .15em; }
.tx.c-blue { color: var(--blue); }
.tx.c-white { color: var(--bg); background: var(--fg); padding: 0 .25em; }
.tx.c-black { color: var(--fg); }
.post-pics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 40px; }
.post-pics img { width: 100%; height: 100%; object-fit: cover; }
.post-nav { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-top: clamp(40px, 6vw, 80px); padding-top: 24px; border-top: 1px solid var(--line-2); }
.post-nav a { display: grid; gap: 6px; max-width: 26em; }
.post-nav a.nx { text-align: right; justify-self: end; margin-left: auto; }
.post-nav small { color: var(--muted); font-size: 12.5px; }
.post-nav b { font: 700 17px/1.5 var(--f-serif-ko); }

/* 배합 블록 (js/perfume.js 의 formulaHTML) */
.fx-top { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 6px 24px; margin-bottom: 18px; }
.fx-h { margin: 0; font: 500 16px/1.2 var(--f-sans); color: var(--fg); }
.fx-basis { margin: 0; color: var(--muted); font-size: 13px; }
.fx-strip { display: flex; gap: 2px; height: 14px; overflow: hidden; }
.fx-strip span { flex-basis: 0; min-width: 3px; }
.fx-strip-lg { height: 40px; }
.fx-strip-blotter { height: 10px; }
.fx-legend { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: 14px; }
.fx-legend li { display: flex; align-items: center; gap: 8px; }
.fx-legend i, .fx-fam i { display: inline-block; flex: none; width: 9px; height: 9px; border-radius: 50%; }
.fx-legend span { color: var(--muted); font-variant-numeric: tabular-nums; }
.fx-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 8fr); gap: clamp(28px, 4vw, 60px); margin-top: clamp(28px, 4vw, 48px); }
@media (max-width: 900px) { .fx-grid { grid-template-columns: minmax(0, 1fr); } }
.fx-sub { margin: 0 0 14px; color: var(--muted); font: 500 13px/1.2 var(--f-sans); }
.fx-tiers { display: flex; flex-direction: column; gap: 14px; }
.fx-tier { width: var(--w); margin: 0 auto; }
.fx-tier-box { position: relative; display: flex; align-items: center; justify-content: space-between; height: 46px; padding: 0 16px; overflow: hidden; background: var(--bg-3); }
.fx-tier-fill { position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(90deg, rgba(183, 195, 222, .55), rgba(217, 148, 142, .45)); }
.fx-tier-label, .fx-tier-pct { position: relative; font-size: 14px; font-weight: 500; }
.fx-tier-pct { font-variant-numeric: tabular-nums; }
.fx-tier-names { margin: 8px 0 0; color: var(--muted); font-size: 13px; line-height: 1.6; text-align: center; }
.fx-scroll { overflow-x: auto; }
.fx-table { width: 100%; min-width: 480px; border-collapse: collapse; font-size: 14.5px; }
.fx-table th, .fx-table td { padding: 12px 10px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; }
.fx-table th:first-child, .fx-table td:first-child { padding-left: 0; }
.fx-table th:last-child, .fx-table td:last-child { padding-right: 0; }
.fx-table thead th { color: var(--muted); font-size: 12px; font-weight: 500; }
.fx-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.fx-name b { display: block; font-weight: 500; color: var(--fg); }
.fx-name small { display: block; color: var(--muted); font-size: 12px; line-height: 1.4; }
.fx-name a:hover b { color: var(--blue); }
.fx-role { display: inline-block; margin-top: 4px; padding: 1px 7px; border: 1px solid var(--line-2); border-radius: 999px; color: var(--muted); font-size: 11px; font-style: normal; line-height: 1.5; }
.fx-fam { white-space: nowrap; font-size: 13.5px; }
.fx-fam i { margin-right: 8px; }
.fx-note { color: var(--muted); font-size: 13.5px; white-space: nowrap; }
.fx-pct { font-weight: 600; }
.fx-table tfoot th, .fx-table tfoot td { border-bottom: 0; color: var(--muted); font-size: 13.5px; font-weight: 500; }
.fx-private { margin: 18px 0 0; color: var(--muted); font-size: 13px; }

/* ============================================================
   브랜드 이야기 (About)
   ============================================================ */
.ab-lockup { margin-top: clamp(40px, 6vw, 80px); }
.ab-lockup img { width: 100%; height: auto; }
.pillars-sec { padding-top: 0; }
.pillars { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line-2); }
.pillar { --f: clamp(0, calc((var(--s, 1) - .15 - var(--k) * .1) * 3), 1); padding: 34px clamp(16px, 2.4vw, 40px) 8px 0; min-width: 0; }
.pillar + .pillar { padding-left: clamp(16px, 2.4vw, 40px); border-left: 1px solid var(--line); }
.pl-big { position: relative; width: clamp(90px, 11vw, 160px); aspect-ratio: 1; }
.pl-big svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.pl-big .pl-o { fill: none; stroke: var(--line-2); stroke-width: 3; }
.pl-big .pl-f { fill: var(--fg); clip-path: inset(calc((1 - var(--f)) * 100%) 0 0 0); }
.pillar h3 { margin: 26px 0 0; font: 500 12px/1.4 var(--f-display); letter-spacing: .28em; text-transform: uppercase; }
.pillar h4 { margin: 10px 0 0; font: 700 21px/1.45 var(--f-serif-ko); letter-spacing: -.02em; }
.pillar p { margin: 12px 0 0; color: var(--fg-2); font-size: 15px; line-height: 1.85; }
@media (max-width: 900px) { .pillars { grid-template-columns: minmax(0, 1fr); } .pillar + .pillar { padding-left: 0; border-left: 0; border-top: 1px solid var(--line); } }
.manifesto { text-align: center; display: grid; justify-items: center; gap: 34px; }
.mf-en { max-width: 22em; margin: 0; font: 400 clamp(26px, 3.3vw, 50px)/1.4 var(--f-serif-en); letter-spacing: -.01em; text-wrap: balance; }
.mf-ko { max-width: 36em; margin: 0; color: var(--fg-2); font: 400 clamp(15px, 1.2vw, 17px)/1.95 var(--f-serif-ko); }
.ab-family { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 80px); align-items: center; }
.ab-family > div { display: grid; gap: 18px; justify-items: start; }
.family-art { position: relative; margin: 0; aspect-ratio: 4 / 3; background: #060709; border: 1px solid var(--line); overflow: hidden; display: grid; place-items: center; }
.family-art canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.family-art .fa-word { position: relative; width: 44%; color: #fff; }
.family-art .fa-word svg { width: 100%; height: auto; aspect-ratio: 2312 / 752; }
.family-art .fa-cap { position: absolute; left: 20px; bottom: 16px; right: 20px; display: flex; justify-content: space-between; color: var(--muted); font: 500 10.5px var(--f-display); letter-spacing: .18em; }
@media (max-width: 860px) { .ab-family { grid-template-columns: minmax(0, 1fr); } }
.palette-row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin-top: 40px; }
.sw { display: grid; grid-template-rows: 170px auto; }
.sw i { display: block; background: var(--c); box-shadow: inset 0 0 0 1px var(--line); }
.sw div { padding: 14px 12px 0 0; }
.sw b { display: block; font-size: 14px; font-weight: 500; }
.sw small { display: block; color: var(--muted); font: 500 11px/1.6 var(--f-display); letter-spacing: .06em; }
@media (max-width: 760px) { .palette-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 12px; } .sw { grid-template-rows: 100px auto; } }

/* ============================================================
   주문 요청 시트
   ============================================================ */
.os { position: fixed; inset: 0; z-index: 60; display: grid; justify-items: end; }
.os-bg { position: absolute; inset: 0; background: rgba(0, 0, 0, .6); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); opacity: 0; transition: opacity .4s var(--ease); }
.os.open .os-bg { opacity: 1; }
.os-panel { position: relative; width: min(540px, 100%); height: 100%; overflow-y: auto; background: linear-gradient(160deg, rgba(28, 29, 35, .72), rgba(14, 15, 19, .82)); -webkit-backdrop-filter: blur(30px) saturate(1.5); backdrop-filter: blur(30px) saturate(1.5); box-shadow: inset 1px 0 0 rgba(255, 255, 255, .14), -30px 0 80px -30px rgba(0, 0, 0, .7); padding: calc(28px + env(safe-area-inset-top, 0px)) clamp(20px, 3vw, 38px) calc(28px + env(safe-area-inset-bottom, 0px)); transform: translateX(100%); transition: transform .6s var(--expo); display: flex; flex-direction: column; gap: 18px; }
.os.open .os-panel { transform: none; }
.os-panel:focus { outline: 0; }
.os-head { display: flex; justify-content: space-between; align-items: start; gap: 16px; }
.os-head h2 { margin: 10px 0 0; font: 700 28px/1.35 var(--f-serif-ko); letter-spacing: -.02em; }
.os-x { width: 42px; height: 42px; flex: none; border: 1px solid var(--line-2); border-radius: 50%; font-size: 18px; line-height: 1; transition: background-color .3s, color .3s; }
.os-x:hover { background: var(--fg); color: var(--bg); }
.os-sum { display: grid; grid-template-columns: 64px 1fr; gap: 16px; align-items: center; padding: 16px; border: 1px solid var(--line); background: rgba(255, 255, 255, .02); }
.os-art { width: 64px; }
.os-sum b { display: block; font: 500 14px/1.4 var(--f-display); letter-spacing: .06em; }
.os-sum small { display: block; color: var(--muted); font-size: 13px; line-height: 1.6; }
.os-form { display: grid; gap: 14px; }
.field-in { display: grid; gap: 6px; }
.field-in > span { font-size: 13px; font-weight: 500; }
.field-in > span small { color: var(--muted); font-weight: 400; margin-left: 4px; }
.field-in input, .field-in textarea { width: 100%; padding: 13px 15px; border: 1px solid var(--line-2); border-radius: 2px; background: rgba(255, 255, 255, .03); font: inherit; font-size: 15px; color: var(--fg); }
.field-in input::placeholder, .field-in textarea::placeholder { color: var(--faint); }
.field-in input:focus, .field-in textarea:focus { outline: 0; border-color: var(--fg); }
.os-consent { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; color: var(--fg-2); line-height: 1.6; cursor: pointer; }
.os-consent input { margin-top: 2px; width: 18px; height: 18px; accent-color: var(--fg); flex: none; }
.os-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.os-err { min-height: 1.4em; margin: 0; color: #EBA39C; font-size: 13.5px; }
.os-err a { text-decoration: underline; }
.os-info { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.7; }
.os-done { display: grid; gap: 14px; align-content: start; justify-items: start; }
.os-done .tick { width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; background: var(--fg); color: var(--bg); animation: pop .7s var(--spring) both; }
@keyframes pop { from { transform: scale(.4); opacity: 0; } }
.os-done .tick svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; }
.os-done h2 { margin: 6px 0 0; font: 700 27px/1.4 var(--f-serif-ko); }
.os-done p { margin: 0; color: var(--fg-2); }
/* 비스포크 상담 달력 (js/nio-booking.js): 상담 날짜 → 받는 날(21~30일 뒤), 달마다 남은 자리 */
.bk { display: grid; gap: 14px; padding: 18px 16px 16px; border: 1px solid var(--line); background: rgba(255, 255, 255, .02); }
.bk-top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.bk-label { font-size: 13px; font-weight: 500; }
.bk-hint { color: var(--muted); font-size: 12.5px; }
.bk-left { margin: 0; display: flex; align-items: center; gap: 10px; color: var(--fg-2); font-size: 12.5px; min-height: 1.5em; }
.bk-left b { color: var(--fg); font-weight: 500; }
.bk-left.full .bk-left-t { color: #EBA39C; }
.bk-meter { display: inline-grid; grid-template-columns: repeat(8, 5px); gap: 3px; }
.bk-meter i { width: 5px; height: 5px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--line-2); transition: background-color .5s var(--ease), box-shadow .5s var(--ease); }
.bk-meter i.on { background: var(--fg); box-shadow: none; }
.bk-nocount .bk-meter { display: none; }
.bk-nav { display: grid; grid-template-columns: 40px 1fr 40px; align-items: center; margin-bottom: 6px; }
.bk-month { text-align: center; font: 500 14px/1 var(--f-display); letter-spacing: .04em; font-variant-numeric: tabular-nums; }
.bk-mv { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; color: var(--fg-2); transition: background-color .3s, color .3s, opacity .3s; }
.bk-mv svg { width: 8px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.4; }
.bk-mv:not(:disabled):hover { background: rgba(255, 255, 255, .07); color: var(--fg); }
.bk-mv:disabled { opacity: .22; cursor: default; }
.bk-wk, .bk-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.bk-wk span { text-align: center; padding: 4px 0 8px; color: var(--muted); font-size: 11.5px; }
.bk-wk span:first-child { color: #B98480; }
.bk-days { row-gap: 2px; }
.bk-days.swap { animation: bk-in .32s var(--ease) both; }
@keyframes bk-in { from { opacity: 0; } }
.bk-d { position: relative; height: 42px; display: grid; place-items: center; font: 400 14px/1 var(--f-display); font-variant-numeric: tabular-nums; color: var(--fg); -webkit-tap-highlight-color: transparent; }
.bk-d::before { content: ''; position: absolute; width: 38px; height: 38px; max-width: 100%; border-radius: 50%; transition: background-color .25s, transform .35s var(--spring); transform: scale(.86); }
.bk-d span, .bk-d { z-index: 0; }
.bk-d:not(:disabled):not(.sel):hover::before { background: rgba(255, 255, 255, .08); transform: none; }
.bk-d.sel { color: var(--bg); font-weight: 500; }
.bk-d.sel::before { background: var(--fg); transform: none; z-index: -1; }
.bk-d:disabled { color: var(--faint); cursor: default; }
.bk-d.today::after { content: ''; position: absolute; bottom: 4px; width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: .7; }
.bk-d:focus-visible { outline: 0; }
.bk-d:focus-visible::before { box-shadow: 0 0 0 1px var(--fg); transform: none; }
.bk-note { margin: 0; display: flex; gap: 9px; align-items: flex-start; padding-top: 12px; border-top: 1px solid var(--line); color: var(--fg-2); font-size: 13px; line-height: 1.6; }
.bk-note svg { flex: none; width: 15px; height: 15px; margin-top: 2.5px; fill: none; stroke: var(--coral); stroke-width: 1.3; }
.bk-note b { color: var(--fg); font-weight: 500; }
.bk-pick { display: grid; gap: 10px; transition: opacity .4s var(--ease); }
.bk-pick[data-off="1"] { opacity: .55; }
.bk-chips { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.bk-chips:empty { display: none; }
.bk-c { display: grid; gap: 3px; justify-items: center; padding: 10px 0 9px; border: 1px solid var(--line-2); border-radius: 2px; background: rgba(255, 255, 255, .02); transition: border-color .3s, background-color .3s, color .3s; -webkit-tap-highlight-color: transparent; }
.bk-c b { font: 500 13.5px/1 var(--f-display); font-variant-numeric: tabular-nums; }
.bk-c small { color: var(--muted); font-size: 11px; line-height: 1; transition: color .3s; }
.bk-c.sun small { color: #B98480; }
.bk-c:hover { border-color: rgba(255, 255, 255, .5); }
.bk-c.sel { border-color: var(--fg); background: var(--fg); color: var(--bg); }
.bk-c.sel small { color: rgba(10, 11, 13, .62); }
.bk-c:focus-visible { outline: 1px solid var(--fg); outline-offset: 2px; }
.bk-sum { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; color: var(--muted); font-size: 12.5px; min-height: 0; }
.bk-sum:empty { display: none; }
.bk-sum b { color: var(--fg); font-weight: 500; margin-left: 4px; }
.bk-sum i { width: 18px; height: 1px; background: var(--line-2); }
.bk-sum .dim { color: var(--faint); }
.os-dates { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 6px 18px; padding: 14px 16px; border: 1px solid var(--line); font-size: 14px; }
.os-dates dt { color: var(--muted); }
.os-dates dd { margin: 0; color: var(--fg); }
@media (max-width: 380px) { .bk { padding: 16px 12px 14px; } .bk-d { height: 40px; } .bk-d::before { width: 36px; height: 36px; } .bk-chips { gap: 5px; } }
@media (prefers-reduced-motion: reduce) { .bk-days.swap { animation: none; } .bk-d::before { transition: none; } }
.os-done .code { font: 500 14px var(--f-display); letter-spacing: .06em; color: var(--fg); }
@media (max-width: 560px) { .os { align-items: end; } .os-panel { height: auto; max-height: 92vh; transform: translateY(100%); border-left: 0; border-top: 1px solid var(--line); } }

.toast { position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); z-index: 70; transform: translate(-50%, 20px); padding: 12px 18px; background: var(--fg); color: var(--bg); font-size: 14px; opacity: 0; pointer-events: none; transition: opacity .3s, transform .4s var(--ease); max-width: calc(100vw - 32px); }
.toast.on { opacity: 1; transform: translate(-50%, 0); }
.empty { color: var(--muted); padding: 24px 0; }
.nf404 { padding-block: calc(var(--hdr) + var(--sec)) var(--sec); text-align: center; display: grid; justify-items: center; }
/* 404 의 유리 렌즈 (업데이트 49, nio.js mountNotFound · js/fluid-glass.js). 렌즈가 뜨면 작은 404 는 화면에서만 숨기고 큰 404 를 렌즈 무대가 그림.
   렌즈가 뜨지 않는 기기는 이 규칙이 걸리지 않아 예전 404 그대로 */
.nf-glass { position: relative; width: min(100%, 980px); height: clamp(220px, 34vw, 440px);
  /* 렌즈가 무대 끝에서 잘리지 않고 스르르 사라지게 */
  -webkit-mask-image: linear-gradient(transparent, #000 14%, #000 86%, transparent); mask-image: linear-gradient(transparent, #000 14%, #000 86%, transparent); }
.nf404.has-glass { padding-top: calc(var(--hdr) + var(--sec) * .4); }
.nf404.has-glass .eyebrow { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.nf404.has-glass .h-l { margin-top: 0 !important; }

/* ============================================================
   맞춤 향 (#/bespoke): css/blend.css 위에 NIO 의 어두운 무대
   ============================================================ */
body.nio[data-page="blend"] {
  --bl-bg: var(--bg); --bl-card: #131418; --bl-ink: var(--fg); --bl-mute: rgba(243, 243, 241, .64); --bl-soft: rgba(243, 243, 241, .46);
  --bl-line: rgba(255, 255, 255, .1); --bl-shadow: 0 1px 0 rgba(255, 255, 255, .04), 0 20px 40px -24px rgba(0, 0, 0, .8);
  --top: 0px;
}
.bl-mount { position: relative; z-index: 1; }
body.nio .bl { font-family: var(--f-sans); }
body.nio .bl-kicker { font-family: var(--f-display); font-weight: 500; letter-spacing: .3em; }
body.nio .bl-h1 { font-family: var(--f-serif-ko); font-weight: 700; letter-spacing: -.035em; line-height: 1.24; }
body.nio .bl-h2 { font-family: var(--f-serif-ko); font-weight: 700; letter-spacing: -.03em; line-height: 1.32; }
body.nio .lg { background: rgba(20, 21, 26, .72); -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1), 0 18px 40px -24px rgba(0, 0, 0, .8); }
body.nio :is(.bl-intent, .bl-kwn li, .bl-tl, .bl-phases li, .bl-acc, .bl-card, .bl-word, .bl-fam, .bl-think-card, .bl-form, .bl-mats, .bl-matlist) { border-radius: 3px; }
body.nio :is(.bl-intent, .bl-kwn li, .bl-tl, .bl-phases li, .bl-acc) { box-shadow: 0 0 0 1px var(--line); }
.bl-methods { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 14px; }
.bl-methods label { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.bl-methods input { width: 16px; height: 16px; accent-color: var(--fg); }
.bl .bx .btn { min-height: 46px; padding: 0 22px; }
/* 밝은 바탕에 흰 글자였던 곳: 어두운 무대에서는 흰 바탕에 먹색 글자 */
body.nio :is(.bl-chip[aria-pressed="true"], .bl-chip.on, .bl-mat[aria-pressed="true"], .bl-word[aria-pressed="true"], .bl-next, .bl-btn.solid, .bl-kwn b, .bl-badge, .bl-m-n em, .bl-rank, .bl-seg-o[aria-checked="true"]) { color: var(--bg); }
body.nio :is(.bl-mat[aria-pressed="true"], .bl-word[aria-pressed="true"], .bl-seg-o[aria-checked="true"]) small { color: rgba(10, 11, 13, .62); }
body.nio :is(.bl-check, .bl-tick)::before, body.nio .bl-think-steps li::after { border-left-color: var(--bg); border-bottom-color: var(--bg); }
body.nio .bl-word .bl-rank { background: var(--bg); color: var(--fg); }
body.nio :is(.bl-badge.soft, .bl-m-n em.soft) { background: rgba(255, 255, 255, .1); color: var(--fg-2); }
body.nio .bl-acc-bar { background: rgba(255, 255, 255, .08); }
body.nio .bl-tl-plot { background: rgba(255, 255, 255, .04); }
body.nio .bl-tl-plot path { stroke: var(--bg); }
body.nio :is(.bl-tl-mk, .bl-ph-n) { background: rgba(243, 243, 241, .92); color: var(--bg); }
body.nio .bl-tl-mk::after { background: rgba(255, 255, 255, .35); }
body.nio .bl-mat:hover { background: rgba(255, 255, 255, .06); }
body.nio .bl-prism { background: rgba(20, 21, 26, .72); box-shadow: inset 0 1px 1px rgba(255, 255, 255, .1), 0 14px 30px -20px rgba(0, 0, 0, .8); }
body.nio :is(.bl-field input, .bl-field textarea) { background: rgba(255, 255, 255, .05); color: var(--fg); border-color: rgba(255, 255, 255, .08); }
body.nio :is(.bl-field input, .bl-field textarea):focus { background: rgba(255, 255, 255, .08); border-color: var(--fg); }
body.nio .bl-memo textarea { background: transparent; }
body.nio .bl-back { position: relative; background: rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); }   /* position: 화살표가 단추 안에 오게 (업데이트 33에서 고침) */
body.nio .bl-back span { border-color: var(--fg); }
body.nio .bl-dots i { background: rgba(255, 255, 255, .18); }
body.nio .bl-dots i.done { background: rgba(255, 255, 255, .5); }
body.nio .bl-dots i.now { background: var(--fg); }
body.nio nav.bl-dock { --lg-tint: rgba(20, 21, 26, .62); }
body.nio :is(.bl-warn, .bl-err) { color: #EBA39C; }
body.nio .bl-link { text-decoration-color: rgba(255, 255, 255, .3); }
body.nio .bl-sheet-bg { background: rgba(6, 7, 9, .6); }
body.nio .bl-sheet .bl-form, body.nio .bl-form { border: 1px solid var(--line); }
body.nio .bl-consent input { accent-color: var(--fg); }
body.nio :is(.bl-card[aria-pressed="true"]) { box-shadow: inset 0 0 0 1.5px var(--fg), 0 18px 34px -22px rgba(0, 0, 0, .8); }
/* 무드 휠 (업데이트 33): 어두운 무대에 맞춘 빛깔, 장면 이름은 명조 */
body.nio { --bl-accent: #E9A79D; --bl-wh-base: rgba(243, 243, 241, .56); --bl-wh-echo: rgba(243, 243, 241, .14); }
body.nio .bl-wh-it, body.nio .bl-wh-br { font-family: var(--f-serif-ko); font-weight: 400; letter-spacing: -.03em; }
body.nio .bl-wh-reply { font-family: var(--f-serif-ko); }
body.nio .bl-sph-cap { font-family: var(--f-display); font-weight: 500; letter-spacing: .3em; }
body.nio .bl-wq-chip { border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line); }
/* 카드 원호 (업데이트 33): NIO 는 모서리가 단단하고 그림자가 깊게, 이름은 명조 */
body.nio .bl-ac-face { border-radius: 4px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2), 0 26px 44px -22px rgba(0, 0, 0, .85); }
body.nio .bl-ac.is-f .bl-ac-face { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .26), 0 36px 64px -26px rgba(0, 0, 0, .95); }
body.nio .bl-ac.on .bl-ac-face { box-shadow: inset 0 0 0 2px var(--fg), 0 34px 60px -26px rgba(0, 0, 0, .95); }
body.nio .bl-ac-k, body.nio .bl-ac-t, body.nio .bl-ac-cp b { font-family: var(--f-serif-ko); font-weight: 700; letter-spacing: -.03em; }
body.nio .bl-ac-t { font-weight: 400; }
body.nio .bl-ac-mk { background: #0E0F12; color: #F3F3F1; }
body.nio .bl-ac.dk .bl-ac-mk { background: #F3F3F1; color: #0E0F12; }
body.nio .bl-ac-pick { background: var(--fg); color: var(--bg); }
body.nio .bl-ac-nav { background: rgba(19, 20, 24, .72); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); }
body.nio .bl-ac-nav:hover { background: rgba(32, 33, 38, .9); }
body.nio .bl-ac-pick[aria-pressed="true"] { background: transparent; color: var(--fg); box-shadow: inset 0 0 0 1px var(--fg); }
body.nio .bl-h1-vx .soft { color: rgba(243, 243, 241, .42); }
body.nio .bl-tk { color: #141519; }
/* 결과 아래 NIO 제품 연결 */
.bx { margin-top: clamp(40px, 6vw, 72px); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(12px, 1.6vw, 20px); text-align: left; }
.bx-card { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 20px; padding: 22px; border: 1px solid var(--line); background: rgba(255, 255, 255, .025); align-items: start; }
.bx-card.sig { background: radial-gradient(80% 90% at 0% 0%, rgba(183, 195, 222, .12), transparent 70%), rgba(255, 255, 255, .02); }
.bx-art { width: 104px; }
.bx-card .eyebrow { font-size: 10.5px; }
.bx-card h4 { margin: 8px 0 0; font: 600 18px/1.3 var(--f-display); letter-spacing: .02em; text-transform: uppercase; }
.bx-card p { margin: 8px 0 0; font-size: 14px; line-height: 1.75; color: var(--fg-2); }
.bx-card .bx-match { display: flex; align-items: center; gap: 10px; margin-top: 12px; font: 500 12px var(--f-display); color: var(--fg); }
.bx-card .bx-match i { flex: 1; height: 2px; background: var(--line-2); position: relative; max-width: 140px; }
.bx-card .bx-match i::after { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: var(--m); background: var(--prism); }
.bx-card .bx-act { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 14px; }
.bx-others { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; color: var(--muted); font-size: 13px; }
.bx-others a { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border: 1px solid var(--line-2); border-radius: 999px; color: var(--fg-2); }
.bx-others a i { width: 10px; height: 12px; background: var(--g); border-radius: 2px; }
@media (max-width: 760px) { .bx { grid-template-columns: minmax(0, 1fr); } .bx-card { grid-template-columns: 72px minmax(0, 1fr); } .bx-art { width: 72px; } }

/* ============================================================
   동작 줄이기
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; transition-delay: 0ms !important; }
  html.js .rv { opacity: 1; transform: none; filter: none; }
  html.js .split .sc { transform: none; opacity: 1; }
  .veil, .intro, .cglow { display: none !important; }
}

/* 맞춤 설계 첫 화면 (휴대폰, 글자를 키운 기기에서도): 알약 단추는 글자가 길면 두 줄로, 구슬은 가운데 */
body.nio .bl-h1-vx { text-wrap: balance; }
body.nio .bl-stat { text-wrap: balance; }
@media (max-width: 760px) {
  body.nio .bl-tk { align-items: center; padding: 10px 16px 10px 10px; }
  body.nio .bl-tk-t b { white-space: normal; line-height: 1.22; word-break: keep-all; }
  body.nio .bl-tk-t small { white-space: normal; word-break: keep-all; }
}

/* ============================================================
   크리스털 향수병 (js/nio-bottle.js)
   ============================================================ */
.bottle.lux .b-body { fill: rgba(255, 255, 255, .025); }
.bottle.lux.sig .b-body { fill: rgba(16, 17, 22, .5); }
.bottle.lux .b-cav { fill: rgba(255, 255, 255, .015); }
.bottle.lux.sig .b-cav { fill: rgba(0, 0, 0, .3); }
.bottle.lux .b-liq, .bottle.lux.sig .b-liq { opacity: .88; }
.bottle.lux .b-line { stroke-opacity: .78; stroke-width: 1.3; }
.bottle.lux .b-in { stroke-opacity: .26; }
.bottle.lux .b-star { stroke-opacity: .8; fill: none; stroke-width: 1.2; }
.bottle.lux .b-ray { stroke-opacity: .2; }
.bottle.lux .b-hi { stroke-width: 3; opacity: .55; }
.bottle.lux .b-mark { opacity: .62; }
.bottle.lux .b-capq { mix-blend-mode: screen; }
.bottle.lux .b-glow { mix-blend-mode: screen; }
.bottle.anim .b-prism { opacity: 0; }
/* 가볍게: 크리스털 병은 그림이 복잡해서, 계속 도는 작은 움직임(액면 물결, 바닥 빛, 프리즘 반짝임)은 끔 (매 장면 병 전체를 다시 그리게 되므로) */
.bottle.lux .b-surf, .bottle.lux .b-glow, .bottle.lux .b-prism path { animation: none; }
.bottle.anim .b-prism path + path { animation: none; }
}

/* ============================================================
   맨 위로 · 맨 아래로 (오른쪽 아래 작은 유리 단추 두 개)
   ============================================================ */
.jump { position: fixed; right: max(16px, env(safe-area-inset-right, 0px)); bottom: calc(18px + env(safe-area-inset-bottom, 0px)); z-index: 40; display: grid; justify-items: center; padding: 4px; border-radius: 999px; opacity: 0; visibility: hidden; transform: translateY(14px) scale(.94); transition: opacity .45s var(--ease), transform .6s var(--expo), visibility 0s .45s; }
.jump.on { opacity: 1; visibility: visible; transform: none; transition: opacity .45s var(--ease), transform .6s var(--expo), visibility 0s; }
.jump button { display: grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: 50%; background: none; color: var(--fg); cursor: pointer; transition: background-color .25s, opacity .3s, height .45s var(--expo); }
.jump button:hover, .jump button:focus-visible { background: rgba(255, 255, 255, .12); }
.jump button svg { width: 16px; height: 16px; transition: transform .45s var(--spring, var(--expo)); }
.jump button[data-j="top"]:hover svg { transform: translateY(-2px); }
.jump button[data-j="end"]:hover svg { transform: translateY(2px); }
.jump i { width: 18px; height: 1px; background: var(--line-2); transition: opacity .3s; }
.jump.no-up button[data-j="top"], .jump.no-down button[data-j="end"] { height: 0; opacity: 0; pointer-events: none; overflow: hidden; }
.jump.no-up i, .jump.no-down i { opacity: 0; }
html.menu-open .jump, html.os-open .jump { opacity: 0; visibility: hidden; }
@media (max-width: 760px) { .jump button { width: 34px; height: 34px; } .jump { opacity: 0; } .jump.on { opacity: .9; } }

/* 조향사 출입 (숨은 입구) */
.nf-copyr { cursor: default; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; }
.nf-copyr.tick { animation: nfTick .35s var(--ease); }
@keyframes nfTick { 50% { color: var(--fg); } }
.nf-lock { margin-left: 14px; padding: 0; border: 0; background: none; color: var(--muted); font: inherit; cursor: pointer; }
.nf-lock:hover { color: var(--fg); }
.staff { position: fixed; inset: 0; z-index: 180; display: grid; place-items: center; padding: 20px; background: rgba(6, 7, 9, .55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); opacity: 0; transition: opacity .4s var(--ease); }
.staff.on { opacity: 1; }
.staff-card { position: relative; overflow: hidden; width: min(440px, 100%); padding: 26px 24px 20px; border-radius: 22px; background-color: rgba(16, 17, 22, .8); transform: translateY(18px) scale(.97); transition: transform .6s var(--expo); }
.staff.on .staff-card { transform: none; }
.staff-card:focus { outline: none; }
.staff-scan { position: absolute; left: 0; right: 0; top: 0; height: 40%; background: linear-gradient(180deg, transparent, rgba(183, 195, 222, .16), transparent); transform: translateY(-120%); pointer-events: none; }
.staff.on .staff-scan { animation: staffScan 1.2s var(--ease) .15s both; }
@keyframes staffScan { to { transform: translateY(320%); } }
.staff-x { position: absolute; right: 12px; top: 12px; z-index: 2; width: 36px; height: 36px; border: 0; border-radius: 50%; background: none; color: var(--muted); font-size: 22px; line-height: 1; cursor: pointer; }
.staff-x:hover { background: rgba(255, 255, 255, .08); color: var(--fg); }
.staff-k { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; color: var(--muted); font: 500 11px/1 var(--f-display); letter-spacing: .28em; text-transform: uppercase; }
.staff-k svg { width: 46px; height: auto; aspect-ratio: 2312 / 752; color: var(--fg); }
.staff-t { margin: 0; font: 700 clamp(20px, 5vw, 24px)/1.35 var(--f-serif-ko); letter-spacing: -.02em; }
.staff-d { margin: 6px 0 18px; color: var(--muted); font-size: 14px; }
.staff-acts { display: grid; gap: 8px; }
.staff-go { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-radius: 16px; border: 1px solid var(--line); transition: background-color .3s, border-color .3s, transform .45s var(--expo); }
.staff-go:hover, .staff-go:focus-visible { background: rgba(255, 255, 255, .08); border-color: var(--line-2); transform: translateY(-2px); }
.staff-ico { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: #F3F3F1; color: #0A0B0D; font: 600 15px/1 var(--f-display); }
.staff-go b { display: block; font-size: 15.5px; font-weight: 600; }
.staff-go small { display: block; margin-top: 2px; color: var(--muted); font-size: 12.5px; line-height: 1.45; }
.staff-keep { display: flex; align-items: flex-start; gap: 10px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); font-size: 14px; cursor: pointer; }
.staff-keep input { margin-top: 3px; accent-color: #F3F3F1; }
.staff-keep small { display: block; color: var(--muted); font-size: 12.5px; }

/* ============================================================
   향조 도넛 그래프 (리겔 사이트 향료 페이지와 같은 그래프, 어두운 무대용 빛깔)
   ============================================================ */
.donut { container-type: inline-size; position: relative; }
.dn-fig { position: relative; }
.dn-wide { display: block; width: 100%; max-width: 880px; height: auto; margin: 0 auto; overflow: visible; }
.dn-narrow { display: none; width: min(100%, 400px); height: auto; margin: 0 auto; overflow: visible; }
.dn-track { fill: none; stroke: rgba(255, 255, 255, .06); stroke-width: 46; }
.dn-sheen { fill: none; stroke-width: 46; pointer-events: none; mix-blend-mode: screen; opacity: 0; transition: opacity 1s var(--ease) .9s; }
.donut.in .dn-sheen { opacity: .55; }
.dn-rim { fill: none; stroke: rgba(255, 255, 255, .42); stroke-width: 1; pointer-events: none; opacity: 0; transition: opacity .8s .9s; }
.donut.in .dn-rim { opacity: 1; }
.dseg { cursor: pointer; transition: transform .55s var(--expo); }
.dseg circle { fill: none; stroke: color-mix(in oklab, var(--c) 82%, #fff); stroke-width: 46; stroke-dasharray: 0 1000; transition: stroke-dasharray 1.3s var(--ease) calc(var(--i) * 80ms + 120ms), stroke .3s, stroke-opacity .3s; }
.donut.in .dseg circle { stroke-dasharray: var(--len) 1000; }
.dseg.is-hl { transform: translate(calc(var(--ux) * 11px), calc(var(--uy) * 11px)); }
.dseg.is-hl circle { stroke: color-mix(in oklab, var(--c) 70%, #fff); }
.has-focus .dseg:not(.is-hl) circle { stroke-opacity: .28; }
.donut.counted.live .dseg-float { animation: dnFloat 6s ease-in-out infinite; animation-delay: calc(var(--i) * -.47s); }
@keyframes dnFloat { 0%, 100% { transform: none; } 50% { transform: translate(calc(var(--ux) * 3.5px), calc(var(--uy) * 3.5px)); } }
.dn-core { cursor: pointer; }
.dn-core circle { stroke: rgba(255, 255, 255, .35); stroke-width: 1; }
.dn-core text { text-anchor: middle; }
.dn-k { fill: var(--muted); font: 500 15px var(--f-sans); }
.dn-num { fill: var(--fg); font: 300 66px var(--f-display); letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.dn-sub { fill: var(--muted); font: 400 13.5px var(--f-sans); }
.dcall { cursor: pointer; transition: opacity .3s; }
.dcall path { fill: none; stroke: rgba(255, 255, 255, .28); stroke-width: 1; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .7s var(--ease) calc(var(--i) * 80ms + 650ms), stroke .3s; }
.donut.in .dcall path { stroke-dashoffset: 0; }
.dcall text { opacity: 0; transform: translateY(7px); transition: opacity .5s calc(var(--i) * 80ms + 900ms), transform .7s var(--expo) calc(var(--i) * 80ms + 900ms); }
.donut.in .dcall text { opacity: 1; transform: none; }
.dc-name { fill: var(--fg); font: 500 15px var(--f-sans); }
.dc-n { fill: color-mix(in oklab, var(--c) 80%, #fff); font: 600 14.5px var(--f-display); }
.dc-p { fill: var(--muted); font: 400 12.5px var(--f-display); }
.has-focus .dcall:not(.is-hl) { opacity: .35; }
.dcall.is-hl path { stroke: rgba(255, 255, 255, .7); }
.dn-legend { display: none; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin: 16px 0 0; padding: 0; list-style: none; }
.dn-legend li { opacity: 0; transform: translateY(8px); transition: opacity .45s calc(var(--i) * 45ms + 700ms), transform .6s var(--expo) calc(var(--i) * 45ms + 700ms); }
.donut.in .dn-legend li { opacity: 1; transform: none; }
.dn-key { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 40px; padding: 6px 12px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255, 255, 255, .03); color: var(--fg); font-size: 13.5px; text-align: left; cursor: pointer; transition: background-color .2s, border-color .2s; }
.dn-key i { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--c); }
.dn-key b { min-width: 0; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dn-key span { margin-left: auto; color: var(--muted); font: 500 12.5px var(--f-display); }
.dn-key.is-hl, .dn-key[aria-pressed="true"] { background: rgba(255, 255, 255, .1); border-color: color-mix(in oklab, var(--c) 70%, transparent); }
@container (max-width: 640px) {
  .dn-wide { display: none; }
  .dn-narrow { display: block; }
  .dn-legend { display: grid; }
}
.ing-dn { margin: clamp(10px, 2vw, 30px) 0 clamp(30px, 4vw, 60px); }

/* ============================================================
   아카이브 (js/nio-archive.js): 끝없이 이어진 카드 판을 어안 렌즈로 띄움
   ============================================================ */
.arch { position: relative; height: clamp(520px, 86vh, 900px); margin-top: clamp(40px, 6vw, 90px); touch-action: pan-y; }
.arch-cv { position: absolute; inset: 0; width: 100%; height: 100%; cursor: grab; touch-action: pan-y; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; }
.arch.dragging .arch-cv { cursor: grabbing; }
.arch-off { display: none; }
.arch.arch-on ~ .mriver { display: none; }
.arch-hint { position: absolute; left: 50%; bottom: clamp(14px, 3vh, 34px); z-index: 2; display: flex; align-items: center; gap: 12px; margin: 0; transform: translateX(-50%); color: var(--fg-2); font: 500 11px/1 var(--f-display); letter-spacing: .34em; text-transform: uppercase; white-space: nowrap; pointer-events: none; text-shadow: 0 1px 12px rgba(0, 0, 0, .8); }
.arch-hint i { width: 26px; height: 1px; background: currentColor; opacity: .5; }
.arch-meta { position: absolute; left: var(--padL); top: clamp(10px, 2vh, 24px); z-index: 2; margin: 0; color: var(--muted); font: 500 10.5px/1.4 var(--f-display); letter-spacing: .24em; text-transform: uppercase; pointer-events: none; }
.arch-tag { position: absolute; left: 0; top: 0; z-index: 3; display: grid; gap: 2px; margin: 0; padding: 8px 12px; max-width: 260px; border: 1px solid rgba(255, 255, 255, .18); border-radius: 12px; background: rgba(14, 15, 19, .72); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); pointer-events: none; opacity: 0; visibility: hidden; transition: opacity .25s, visibility 0s .25s; }
.arch-tag.on { opacity: 1; visibility: visible; transition: opacity .25s, visibility 0s; }
.arch-tag b { font-weight: 500; font-size: 14px; }
.arch-tag small { color: var(--muted); font-size: 11.5px; }
.arch-sec { position: relative; margin-top: clamp(10px, 2vw, 30px); }
.arch-sec .arch { margin-top: 0; }
@media (max-width: 760px) {
  .arch { height: min(78vh, 640px); }
  .arch-hint { font-size: 10px; letter-spacing: .28em; }
}

/* 분자 들판 (그 향과 이어진 분자들이 깊이를 달리해 떠서 모핑) */
.pd-mols, .sc-mols { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.mf-l { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; will-change: transform; }
.ml-p { fill: none; stroke: #F3F3F1; stroke-linecap: round; stroke-linejoin: round; }
.ml-t text { fill: var(--coral); font-family: var(--f-display); font-weight: 600; }
.pd-view { z-index: 1; }

/* ============================================================
   TFL 디스커버리 세트 (업데이트 47): 화면에 고정된 상자 렌더, 스크롤로 뚜껑이 열리고 병 여섯이 차례로 솟음 (js discScene)
   ============================================================ */
.disc-sec.ch { padding-block: 0; height: 260vh; height: 260svh; }
.disc-pin { position: sticky; top: 0; height: 100vh; height: 100svh; display: grid; align-items: center; overflow: hidden; }
.disc { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: clamp(28px, 5vw, 90px); align-items: center; }
.disc-art { position: relative; width: 100%; }
.disc-lead { margin: 14px 0 0; color: var(--muted); }
.disc-steps { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 14px; }
.disc-steps li { position: relative; display: grid; gap: 2px; padding-left: 20px; opacity: .3; transition: opacity .6s var(--ease); }
.disc-steps li::before { content: ''; position: absolute; left: 0; top: .62em; width: 6px; height: 6px; border-radius: 50%; background: var(--fg); }
.disc-steps li.on { opacity: 1; }
.disc-steps b { font-weight: 500; font-size: 15px; }
.disc-steps span { color: var(--muted); font-size: 13.5px; line-height: 1.5; }
.disc-act { margin: 24px 0 0; }
.opt-set { margin: 12px 0 0; color: var(--muted); font-size: 13.5px; line-height: 1.6; }
.opt-set a { color: var(--fg); text-decoration: underline; text-underline-offset: 3px; }
.os-art img { display: block; width: 100%; height: auto; border-radius: 2px; }
.os-art img[src*="/cut/sig/"] { width: 74%; margin: 0 auto; border-radius: 0; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .45)); }
@media (max-width: 900px) {
  .disc-sec.ch { height: 240svh; }
  .disc { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .disc-lead { display: none; }
  .disc-steps { margin-top: 12px; gap: 6px; }
  .disc-steps b { font-size: 14px; }
  .disc-steps span { font-size: 12.5px; }
  .disc-copy .pd-price { margin-top: 12px; padding-top: 12px; }
  .disc-copy .pd-price b { font-size: 38px; }
  .disc-act { margin-top: 12px; }
}
@media (max-width: 900px) and (max-height: 700px) { .disc-steps span { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .disc-sec.ch { height: auto; }
  .disc-pin { position: static; height: auto; padding-block: var(--sec); }
  .disc-steps li { opacity: 1; }
}

/* ============================================================
   제품 컷아웃 (업데이트 48): 배경 없이 렌더한 제품을 사이트 배경 위에 바로 (js cutPlayer)
   받기 전에는 쉬는 자리 한 장(.cut-po), 받으면 캔버스(돌기 · 바닥 반사)로 바뀜
   ============================================================ */
.cutx { position: relative; aspect-ratio: var(--ar, 3 / 4); }
.cutx .cut-po { position: absolute; left: 0; top: 0; width: 100%; height: var(--ph, 100%); object-fit: contain; object-position: 50% 100%; transition: opacity .6s var(--ease); }
.cutx .cut-cv { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity .6s var(--ease); }
.cutx.on .cut-cv { opacity: 1; }
.cutx.on .cut-po { opacity: 0; }

/* ============================================================
   처음 화면 2: 컬렉션 (업데이트 48). 히어로 바로 뒤, 화면에 고정된 무대.
   1막 시그니처 병 A (돌며 빛줄기, 다 돌면 주석) → 2막 TFL 여섯 병 세 겹. 움직임은 js shopScene
   넓은 화면: 제품은 오른쪽, 글은 왼쪽. 세로 화면(폴드 · 휴대폰): 제품은 위, 글은 아래
   ============================================================ */
.shop.ch { padding-block: 0; height: 360vh; height: 360svh; }
.shop-pin { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.shop-glow { position: absolute; left: 64%; top: 60%; width: min(130vh, 92vw); aspect-ratio: 1.5; translate: -50% -50%; border-radius: 50%; pointer-events: none; background: radial-gradient(closest-side, rgba(255, 228, 200, .12), rgba(255, 228, 200, .045) 50%, transparent); }
.shop-k { position: absolute; left: var(--padL); top: calc(var(--hdr) + 18px); opacity: 0; }
.shop-sig { position: absolute; left: 64%; bottom: 1svh; height: 92svh; margin: 0; translate: -50% 0; will-change: transform, opacity; }
.shop-sig .cutx, .shop-tb .cutx { height: 100%; width: auto; }
.shop-ann { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; opacity: 0; }
.shop-ann .dl { fill: none; stroke: rgba(255, 255, 255, .42); stroke-width: 1; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: var(--d, 1); }
.shop-ann text { fill: var(--muted); font: 500 calc(10px * var(--u, 1)) var(--f-display); letter-spacing: .18em; text-anchor: end; }
.shop-ann .t-dim { text-anchor: middle; }
.shop.ann-lite .shop-ann .dl:not(.dim), .shop.ann-lite .shop-ann text:not(.t-dim) { display: none; }
.shop-tfl { position: absolute; left: 35%; right: 6.5%; top: 0; bottom: 0; pointer-events: none; }
.shop-tb { position: absolute; left: var(--x); bottom: var(--b); height: var(--h); translate: -50% 0; opacity: 0; will-change: transform, opacity; }
.shop-tb[data-l="2"] { z-index: 1; filter: brightness(.7) saturate(.92) blur(1.1px); }
.shop-tb[data-l="1"] { z-index: 2; filter: brightness(.86) blur(.25px); }
.shop-tb[data-l="0"] { z-index: 3; }
html.q-lo .shop-tb { filter: none; }
html.q-lo .shop-tb[data-l="2"] { opacity: .7; }
.shop-card { position: absolute; z-index: 5; left: var(--padL); top: 52%; width: min(440px, 33vw); translate: 0 -50%; display: grid; gap: 10px; justify-items: start; opacity: 0; }
.shop-card.off { pointer-events: none; }
.shop-card:focus-within { opacity: 1 !important; transform: none !important; pointer-events: auto; }
.shop-name { margin: 6px 0 0; font: 600 clamp(30px, 3.6vw, 54px)/1.02 var(--f-display); letter-spacing: -.01em; text-transform: uppercase; }
.shop-ko { margin: 0; font: 400 15px/1.5 var(--f-serif-ko); color: var(--muted); }
.shop-lead { margin: 6px 0 0; color: var(--fg-2); font-size: 15.5px; line-height: 1.7; max-width: 30em; }
.shop-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 16px; margin: 12px 0 0; padding-top: 18px; border-top: 1px solid var(--line-2); align-self: stretch; }
.shop-price b { font: 300 clamp(42px, 4.4vw, 64px)/1 var(--f-display); letter-spacing: -.03em; }
.shop-price small { color: var(--muted); font: 500 11.5px/1.4 var(--f-display); letter-spacing: .16em; text-transform: uppercase; }
.shop-act { display: flex; flex-wrap: wrap; gap: 10px; margin: 14px 0 0; }
/* 세로 화면 (폴드 · 태블릿 세로 · 휴대폰): 제품은 위쪽 가운데, 글은 아래에 (글 뒤는 바탕색으로 서서히) */
@media (max-aspect-ratio: 1/1) {
  .shop-glow { left: 50%; top: 36%; width: 150vw; }
  .shop-k { display: none; }
  .shop-sig { left: 50%; top: var(--sigT, calc(var(--hdr) - 4px)); bottom: auto; height: var(--sigH, 44svh); }
  .shop-tfl { left: var(--tflX, 13%); right: var(--tflX, 13%); top: var(--tflT, calc(var(--hdr) + 12svh)); bottom: var(--tflB, 36svh); }
  .shop-card { left: 0; right: 0; top: auto; bottom: 0; width: auto; translate: none; gap: 6px; padding: 56px var(--padR) calc(22px + env(safe-area-inset-bottom, 0px)) var(--padL); background: linear-gradient(to bottom, transparent, rgba(10, 11, 13, .86) 42px, var(--bg)); }
  .shop-name { font-size: clamp(26px, 7.4vw, 40px); }
  .shop-lead { font-size: 14px; line-height: 1.6; }
  .shop-price { margin-top: 6px; padding-top: 12px; }
  .shop-price b { font-size: clamp(34px, 9vw, 48px); }
  .shop-act { margin-top: 8px; }
  .shop-act .btn { min-height: 48px; padding: 0 22px; }
}
@media (max-aspect-ratio: 1/1) and (max-height: 760px) { .shop-lead { display: none; } }
@media (max-width: 440px) { .shop-card .eyebrow { letter-spacing: .14em; } }
@media (prefers-reduced-motion: reduce) { .shop-sig, .shop-tb, .shop-card { transition: opacity .4s var(--ease); } }

/* 제품 페이지 무대 (업데이트 48): 틀 없이. 병은 배경 없는 렌더, 페이지를 내리는 동안 천천히 돌고 끌어서 돌려 볼 수도 있음 */
.pd-stage { border: 0; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; overflow: visible; }
.pd-glow { -webkit-mask-image: radial-gradient(closest-side, #000 55%, transparent); mask-image: radial-gradient(closest-side, #000 55%, transparent); }
.pd-mols { -webkit-mask-image: radial-gradient(closest-side, #000 60%, transparent); mask-image: radial-gradient(closest-side, #000 60%, transparent); }
.st-cut { position: relative; height: 96%; display: grid; place-items: end center; touch-action: pan-y; cursor: grab; -webkit-user-select: none; user-select: none; }
.st-cut:active { cursor: grabbing; }
.st-cut .cutx { height: 100%; width: auto; max-width: 100%; }
.st-hint { position: absolute; left: 50%; bottom: 2%; translate: -50% 0; margin: 0; font: 500 10.5px/1 var(--f-display); letter-spacing: .22em; text-transform: uppercase; color: var(--muted); white-space: nowrap; pointer-events: none; transition: opacity .6s var(--ease); }
.st-cut.used .st-hint { opacity: 0; }
/* 30 mL × 3: 세 병이 나란히 함께 돎. 이름은 바닥 반사가 옅어지는 자리에 */
.st-trio { width: 100%; place-items: center; }
.st-trio .trio { width: 90%; gap: 3%; }
.st-trio .cutx { height: auto; width: 100%; max-width: none; }
.st-trio .trio-b { gap: 0; }
.st-trio .trio-b figcaption { position: relative; margin-top: -22%; }

/* 디스커버리 세트 (업데이트 48): 틀 없이 상자만, 왼쪽 여백까지 조금 넉넉히 (화면 끝에는 닿지 않게) */
.disc-art .cutx { width: calc(100% + var(--padL) * .6); margin-left: calc(var(--padL) * -.6); }
.disc-glow { position: absolute; left: 34%; top: 54%; width: min(110vh, 80vw); aspect-ratio: 1.6; translate: -50% -50%; border-radius: 50%; pointer-events: none; background: radial-gradient(closest-side, rgba(244, 217, 181, .11), rgba(244, 217, 181, .04) 50%, transparent); }
@media (max-width: 900px) {
  .disc-art { width: 100%; }
  .disc-art .cutx { width: min(calc(100% + var(--padL)), 88svh); margin: 0 auto; translate: 0; position: relative; left: 50%; transform: translateX(-50%); }
  .disc-glow { left: 50%; top: 30%; width: 140vw; }
}

/* ============================================================
   바로 구매 (업데이트 48): 머리글의 Shop. 어느 페이지에서나 세 제품을 사진 · 가격과 함께, 구매 요청 · 상담 예약은 그 자리에서
   ============================================================ */
.nh-shop { position: relative; display: inline-flex; align-items: center; height: 40px; padding: 0 16px; border-radius: 999px; font: 500 12px/1 var(--f-display); letter-spacing: .22em; text-transform: uppercase; color: var(--fg); transition: background-color .4s; }
.nh-shop::after { content: ''; position: absolute; left: 16px; right: calc(16px + .22em); bottom: 11px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: 0 50%; transition: transform .5s var(--expo); }
.nh-shop:hover::after, .nh-shop[aria-expanded="true"]::after { transform: scaleX(1); }
.qs { position: fixed; inset: 0; z-index: 58; }
.qs-bg { position: absolute; inset: 0; background: rgba(0, 0, 0, .45); opacity: 0; transition: opacity .4s var(--ease); }
.qs.open .qs-bg { opacity: 1; }
.qs-panel { position: absolute; top: calc(var(--hdr) + env(safe-area-inset-top, 0px) + 6px); right: var(--padR); width: min(440px, calc(100vw - 32px)); max-height: calc(100vh - var(--hdr) - 24px); overflow-y: auto; padding: 20px 22px 18px; border-radius: 22px; background: linear-gradient(160deg, rgba(30, 31, 37, .82), rgba(14, 15, 19, .9)); -webkit-backdrop-filter: blur(30px) saturate(1.5); backdrop-filter: blur(30px) saturate(1.5); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 40px 90px -30px rgba(0, 0, 0, .85); opacity: 0; transform: translateY(-10px) scale(.98); transform-origin: 100% 0; transition: opacity .4s var(--ease), transform .55s var(--expo); }
.qs.open .qs-panel { opacity: 1; transform: none; }
.qs-head { display: flex; justify-content: space-between; align-items: center; }
.qs-x { width: 36px; height: 36px; border: 1px solid var(--line-2); border-radius: 50%; font-size: 17px; line-height: 1; transition: background-color .3s, color .3s; }
.qs-x:hover { background: var(--fg); color: var(--bg); }
.qs-list { list-style: none; margin: 10px 0 0; padding: 0; display: grid; }
.qs-row { display: grid; grid-template-columns: 76px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 12px 0; border-top: 1px solid var(--line); }
.qs-row:first-child { border-top: 0; }
.qs-pic { display: grid; place-items: center; height: 92px; border-radius: 14px; background: radial-gradient(closest-side, rgba(255, 228, 200, .1), transparent); }
.qs-pic img { max-width: 100%; max-height: 92px; width: auto; height: auto; display: block; object-fit: contain; }
.qs-txt { display: grid; gap: 3px; min-width: 0; }
.qs-txt b { font: 600 14px/1.3 var(--f-display); letter-spacing: .02em; text-transform: uppercase; }
.qs-txt small { color: var(--muted); font-size: 12.5px; line-height: 1.45; }
.qs-price { font: 300 22px/1.1 var(--f-display); letter-spacing: -.02em; margin-top: 2px; }
.qs-act .btn { min-height: 40px; padding: 0 16px; font-size: 13px; }
.qs-all { display: inline-flex; margin-top: 12px; font-size: 13.5px; }
@media (max-width: 900px) {
  .nh-shop { height: 36px; padding: 0 10px; font-size: 11.5px; }
  .nh-shop::after { left: 10px; right: calc(10px + .22em); bottom: 9px; }
  .qs-panel { top: auto; bottom: 0; left: 0; right: 0; width: auto; max-height: 86vh; border-radius: 22px 22px 0 0; padding: 18px var(--padR) calc(20px + env(safe-area-inset-bottom, 0px)) var(--padL); transform: translateY(24px); transform-origin: 50% 100%; }
}
@media (max-width: 380px) { .qs-row { grid-template-columns: 60px minmax(0, 1fr); } .qs-act { grid-column: 2; } }
/* 좁은 휴대폰: Shop 과 '나만의 향 찾기'가 한 줄에 (글이 두 줄로 꺾이지 않게) */
.nh-cta span { white-space: nowrap; }
@media (max-width: 430px) { .nh-shop { padding: 0 7px; letter-spacing: .16em; } .nh-shop::after { left: 7px; right: calc(7px + .16em); } }

/* ============================================================
   고급스러움 다듬기 (2026-10-24)
   - 영문은 브랜드 글꼴 Red Hat Text: 큰 제목은 굵은 대문자 대신 가늘고 조용하게 (글자 벽·브랜드 문장·분자 장면은 명조 그대로)
   - 첫 화면 색면은 브랜드 포스터(geometric-1)처럼 빛이 위에서 아래로 스미는 판으로
   - 단추의 무지개 번짐은 덜어 내고, 손이 닿을 때만 빛이 지나가게
   ============================================================ */
.h-mega { font-weight: 300; letter-spacing: -.045em; }
.nm li a b { font-weight: 300; font-size: 32px; letter-spacing: -.02em; text-transform: none; }
.room-name, .shop-name, .pd-title { font-weight: 300; letter-spacing: -.03em; text-transform: none; }
.shop-name { line-height: 1.04; }
.bx-card h4, .qs-txt b { font-weight: 500; letter-spacing: .06em; }
.eyebrow { letter-spacing: .32em; }
.price-from { margin-left: .32em; font: 400 max(13px, .26em)/1 var(--f-ko); font-style: normal; letter-spacing: 0; color: var(--fg-2); }

/* 첫 화면: 색면 */
.hx-sq.s1 { background: linear-gradient(200deg, #4E3B3B 0%, #9C6D69 46%, #E2A79E 100%); }
.hx-sq.s2 { background: linear-gradient(180deg, #D5DBEA 0%, #A7B3D0 44%, #59627C 100%); }
.hx-sq.s3 { background: linear-gradient(180deg, #121317 0%, #34363C 55%, #77787D 100%); }
.hx-sq::after { content: ''; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .26), inset 0 0 0 1px rgba(255, 255, 255, .07); }
/* 첫 화면: 태그라인은 포스터처럼 가는 문장으로, 위에 로고 비율 한 줄 */
.hx-tag { font: 300 clamp(32px, 3.1vw, 48px)/1.1 var(--f-en); letter-spacing: -.025em; text-transform: none; }
.hx-spec { display: flex; justify-content: flex-end; gap: 22px; margin: 0 0 20px; font: 500 10px/1 var(--f-en); letter-spacing: .26em; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.hx-spec b { margin-right: .7em; color: var(--fg-2); font-weight: 600; }
.hx-ko { margin-top: 16px; }
@media (max-width: 760px), (max-aspect-ratio: 1/1) {
  .hx-tag { font-size: 32px; letter-spacing: -.025em; }
  .hx-spec { justify-content: flex-start; margin-bottom: 16px; }
}

/* 단추: 흰 단추는 맑은 테두리만, 유리 단추의 빛 갈라짐은 옅게 */
.btn { letter-spacing: .02em; }
.btn.light { box-shadow: 0 0 0 1px rgba(255, 255, 255, .5), 0 16px 36px -20px rgba(0, 0, 0, .75); }
.btn.line::after, .nh-cta::after { opacity: .34; }
.hx-ko2, .mf-ko { word-break: keep-all; text-wrap: balance; }
.hx-en .w { white-space: nowrap; }   /* pre-existing 같은 낱말이 줄 끝에서 끊기지 않게 */