/* ============================================================
   odorata — 원장님 전용 샘플 랜딩 v17
   팔레트  에스프레소 & 앰버 — #15120F · 크림 #F3EFE7 · 앰버 #C69064
   사진    v14 대비 27~50% 축소. 스테이지는 모든 폭에서 sticky — 단계가 넘어갈 때 전환이 보인다.
   활자    한글 Wanted Sans 400/500/700 (자체 서브셋) · 영문·숫자 Instrument Sans
           영문 악센트 Instrument Serif 이탤릭 (곱슬거리는 필기체는 뺐다)
   모션    글자 단위 스태거 · 줄 마스크 · 패럴랙스 · 히어로 스크럽 · 커튼 리빌
           스크롤 진행 바 · 마그네틱 버튼 · 카운트업 · 마키
   ============================================================ */





/* ---------- Wanted Sans 자체 서브셋 (한글) ---------- */
@font-face{font-family:'Wanted Sans Sub'; font-weight:400; font-display:swap; src:url('font/wantedsans-400-subset.woff2') format('woff2')}
@font-face{font-family:'Wanted Sans Sub'; font-weight:500; font-display:swap; src:url('font/wantedsans-500-subset.woff2') format('woff2')}
@font-face{font-family:'Wanted Sans Sub'; font-weight:700 800; font-display:swap; src:url('font/wantedsans-700-subset.woff2') format('woff2')}

/* ---------- tokens ---------- */
:root{
  --bg:#15120F;            /* 에스프레소 */
  --bg-2:#1E1A16;
  --bg-3:#26211C;
  --cream:#F3EFE7;
  --cream-2:#E8E3D8;
  --cream-3:#D9D2C4;
  --ink:#1B1714;
  --ink-2:#4A4238;
  --ink-3:#6E655A;
  --amber:#C69064;          /* 다크 바탕용 (대비 7:1) */
  --amber-deep:#8C5A34;     /* 크림 바탕용 (대비 5:1) */
  --line-d:rgba(243,239,231,.13);
  --line-d2:rgba(243,239,231,.07);
  --line-l:rgba(27,23,20,.13);
  --line-l2:rgba(27,23,20,.07);

  --ff:'Instrument Sans','Wanted Sans Sub','Wanted Sans','Pretendard','Apple SD Gothic Neo',sans-serif;
  --ff-ko-d:var(--ff); --ff-ko:var(--ff); --ff-ui:var(--ff); --ff-en:var(--ff);

  --gut:clamp(20px,4.6vw,84px);
  --sec:clamp(64px,9vh,120px);
  --max:1400px;

  --e-out:cubic-bezier(.16,1,.3,1);
  --e-soft:cubic-bezier(.32,.72,0,1);
  --e-in-out:cubic-bezier(.76,0,.24,1);
}

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; background:var(--bg)}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto !important}
.lenis.lenis-stopped{overflow:hidden}
body{
  margin:0; background:var(--bg); color:var(--cream);
  font-family:var(--ff); font-weight:400; font-size:16px; line-height:1.65; letter-spacing:-.012em;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:hidden;
}
img,svg,video{display:block; max-width:100%; height:auto}
a{color:inherit; text-decoration:none}
button{font:inherit; color:inherit; background:none; border:0; cursor:pointer}
h1,h2,h3,h4,p,blockquote,figure,dl,dd{margin:0}
ul,ol{margin:0; padding:0; list-style:none}
::selection{background:var(--amber); color:var(--bg)}
:where(a,button,summary,[tabindex]):focus-visible{outline:2px solid var(--amber); outline-offset:5px; border-radius:2px}
.skip{position:fixed;top:-200px;left:16px;z-index:120;background:var(--cream);color:var(--ink);padding:14px 20px;border-radius:99px;font-size:13px}
.skip:focus{top:16px}

/* 필름 그레인 */
.grain{position:fixed; inset:-50%; z-index:60; pointer-events:none; opacity:.07; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 7s steps(6) infinite}
@keyframes grain{0%,100%{transform:translate(0,0)}20%{transform:translate(-3%,2%)}40%{transform:translate(2%,-3%)}60%{transform:translate(-2%,-2%)}80%{transform:translate(3%,1%)}}

/* ---------- layout ---------- */
.wrap{width:100%; max-width:var(--max); margin-inline:auto; padding-inline:var(--gut)}
.sec{padding-block:var(--sec); position:relative}
.light{background:var(--cream); color:var(--ink)}
.light .micro{color:var(--ink-3)}
.light .lede{font-size:clamp(1rem,1.1vw,1.1rem); line-height:1.72; color:var(--ink-2); letter-spacing:-.012em; word-break:keep-all; max-width:34em}
.light .eyebrow{color:var(--ink-2); border-color:var(--line-l); background:rgba(255,255,255,.35)}
.light .eyebrow::before{background:var(--amber-deep)}
.light h1 em,.light h2 em,.light .accent{color:var(--amber-deep)}

/* ---------- 타이포 ---------- */
.eyebrow{font-family:var(--ff-ui); display:inline-flex; align-items:center; gap:9px; font-size:10.5px; font-weight:700; letter-spacing:.2em; text-transform:uppercase;
  color:rgba(243,239,231,.72); padding:7px 14px 7px 12px; border:1px solid var(--line-d); border-radius:99px; background:rgba(243,239,231,.04)}
.eyebrow::before{content:''; width:5px; height:5px; border-radius:50%; background:var(--amber); flex:none}

h1,.h1{font-family:var(--ff); font-weight:800; font-size:clamp(2.2rem,4.9vw,4.15rem); line-height:1.13; letter-spacing:-.042em; word-break:keep-all; text-wrap:balance}
h2,.h2{font-family:var(--ff); font-weight:800; font-size:clamp(1.75rem,3.6vw,3rem); line-height:1.17; letter-spacing:-.036em; word-break:keep-all; text-wrap:balance}
h1 em,h2 em{font-style:normal; font-weight:700; letter-spacing:-.026em; color:var(--amber); font-size:1em}
h1 strong,h2 strong{font-weight:700}
/* 영문 악센트 한 줄 (필기체). 한글 <em> 은 위 규칙 그대로 Wanted Sans 700 을 쓴다 */
h1 em.script,h2 em.script{font-family:'Instrument Serif',serif; font-style:italic; font-weight:400;
  font-size:1.06em; line-height:1.12; letter-spacing:-.02em; padding-right:.04em}
h3,.h3{font-family:var(--ff); font-size:clamp(1.05rem,1.35vw,1.3rem); font-weight:700; line-height:1.4; letter-spacing:-.022em; word-break:keep-all}
.lede{font-size:clamp(1.02rem,1.15vw,1.18rem); line-height:1.95; color:rgba(243,239,231,.74); letter-spacing:-.015em; word-break:keep-all; max-width:34em}
.micro{font-family:var(--ff-ui); font-size:12px; line-height:1.8; color:rgba(243,239,231,.58); letter-spacing:0; word-break:keep-all}
.k{font-family:var(--ff-ui); font-size:10.5px; font-weight:500; letter-spacing:.16em; text-transform:uppercase; color:rgba(243,239,231,.55)}
.light .k{color:var(--ink-3)}
.serif-num{font-weight:700; letter-spacing:-.03em}
.accent{color:var(--amber)}

.mask{display:block; overflow:hidden; padding-block:.18em; margin-block:-.18em}
.mask>span{display:block; will-change:transform}
.js .mask>span{transform:translateY(112%)}

/* ---------- 버튼 ---------- */
.btn{font-family:var(--ff-ui); --bg:var(--cream); --fg:var(--ink); position:relative; isolation:isolate; overflow:hidden;
  display:inline-flex; align-items:center; gap:clamp(20px,3vw,44px); min-height:60px; padding:8px 8px 8px 26px; border-radius:99px;
  background:var(--bg); color:var(--fg); font-size:15px; font-weight:500; letter-spacing:-.02em; white-space:nowrap;
  transition:transform .5s var(--e-soft), background-color .5s var(--e-soft)}
.btn>span:first-child{position:relative; z-index:2}
.btn .knob{position:relative; z-index:2; flex:none; width:44px; height:44px; border-radius:50%; display:grid; place-items:center;
  background:var(--amber-deep); color:var(--cream); transition:transform .55s var(--e-soft)}
.btn .knob svg{width:15px; height:15px}
.btn:hover{transform:translateY(-2px)}
.btn:hover .knob{transform:translate(3px,-3px) scale(1.07)}
.btn:active{transform:scale(.985)}
.btn::after{content:''; position:absolute; inset:0; z-index:1; border-radius:inherit;
  background:linear-gradient(105deg,transparent 32%,rgba(255,255,255,.28) 48%,transparent 64%);
  transform:translateX(-120%); animation:sweep 4.8s var(--e-in-out) infinite}
@keyframes sweep{0%,72%{transform:translateX(-120%)}100%{transform:translateX(120%)}}
.light .btn{--bg:var(--ink); --fg:var(--cream)}
.light .btn .knob{background:var(--amber-deep)}
.light .light 
.tlink{font-family:var(--ff-ui); display:inline-flex; align-items:center; gap:14px; font-size:13.5px; font-weight:500; letter-spacing:-.02em; padding-bottom:9px;
  border-bottom:1px solid var(--line-d); transition:border-color .4s var(--e-soft), gap .4s var(--e-soft)}
.tlink:hover{border-color:var(--cream); gap:20px}
.tlink svg{width:13px; height:13px}
.light .tlink{border-color:var(--line-l)} .light .tlink:hover{border-color:var(--ink)}

/* ---------- 네비 ---------- */
.nav-shell{position:fixed; top:0; left:0; right:0; z-index:80; padding:clamp(12px,1.7vw,22px) var(--gut); pointer-events:none}
.nav{pointer-events:auto; max-width:var(--max); margin-inline:auto; display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding:9px 9px 9px 22px; border-radius:99px; background:rgba(12,12,14,.62); backdrop-filter:blur(18px) saturate(140%); -webkit-backdrop-filter:blur(18px) saturate(140%);
  box-shadow:0 0 0 1px rgba(243,239,231,.1), 0 18px 40px -26px rgba(0,0,0,.6); transition:transform .62s var(--e-soft), opacity .5s var(--e-soft)}
body.nav-hide .nav{transform:translateY(calc(-100% - 26px)); opacity:0}
body.nav-hide .nav:focus-within{transform:none; opacity:1}
.dock:not(.on-screen):focus-within{transform:none; opacity:1}
.logo{display:flex; align-items:baseline; gap:7px; font-size:22px; font-weight:700; letter-spacing:-.03em; letter-spacing:-.028em; color:var(--cream)}
.logo sup{font-size:9px; letter-spacing:0; translate:0 -3px}
.nav-mid{display:flex; gap:clamp(14px,2.2vw,30px); font-size:15px; font-weight:700; letter-spacing:-.018em; color:var(--cream)}
.nav-mid a{position:relative; padding-block:4px}
.nav-mid a::after{content:''; position:absolute; left:0; right:0; bottom:0; height:1px; background:var(--cream); transform:scaleX(0); transform-origin:left; transition:transform .5s var(--e-soft)}
.nav-mid a:hover::after{transform:scaleX(1)}
.nav-cta{display:inline-flex; align-items:center; gap:12px; background:var(--cream); color:var(--ink); padding:10px 10px 10px 20px; border-radius:99px; font-size:15.5px; font-weight:700; letter-spacing:-.02em; white-space:nowrap}
.nav-cta .knob{width:34px;height:34px;border-radius:50%;background:var(--amber-deep);color:var(--cream);display:grid;place-items:center;transition:transform .5s var(--e-soft)}
.nav-cta .knob svg{width:13px;height:13px}
.nav-cta:hover .knob{transform:translate(2px,-2px)}
.burger{display:none; position:relative; width:44px; height:44px; border-radius:50%; background:var(--cream); place-items:center; flex:none}
.burger i{display:block; position:absolute; width:16px; height:1.4px; background:var(--ink); border-radius:2px; transition:transform .55s var(--e-in-out)}
.burger i:nth-child(1){transform:translateY(-4px)} .burger i:nth-child(2){transform:translateY(4px)}
body.menu-open .burger i:nth-child(1){transform:rotate(45deg)} body.menu-open .burger i:nth-child(2){transform:rotate(-45deg)}
.menu{position:fixed; inset:0; z-index:75; display:grid; align-content:center; gap:6px; padding:0 var(--gut); background:rgba(12,12,14,.94);
  backdrop-filter:blur(26px); -webkit-backdrop-filter:blur(26px); opacity:0; visibility:hidden; transition:opacity .6s var(--e-soft), visibility .6s}
body.menu-open .menu{opacity:1; visibility:visible}
.menu a{font-family:var(--ff); font-weight:700; font-size:clamp(2rem,9vw,3.4rem); letter-spacing:-.03em; color:var(--cream); transform:translateY(48px); opacity:0; transition:transform .8s var(--e-out), opacity .8s var(--e-out)}
body.menu-open .menu a{transform:none; opacity:1}
body.menu-open .menu a:nth-child(1){transition-delay:.1s} body.menu-open .menu a:nth-child(2){transition-delay:.17s}
body.menu-open .menu a:nth-child(3){transition-delay:.24s} body.menu-open .menu a:nth-child(4){transition-delay:.31s} body.menu-open .menu a:nth-child(5){transition-delay:.38s}
.menu .micro{margin-top:26px; transform:translateY(48px); opacity:0; transition:transform .8s var(--e-out) .45s, opacity .8s var(--e-out) .45s}
body.menu-open .menu .micro{transform:none; opacity:1}

/* ---------- HERO (풀블리드) ---------- */
.hero{position:relative; min-height:min(86svh,760px); display:grid; align-items:end; isolation:isolate; overflow:hidden}
.hero-bg{position:absolute; inset:0; z-index:-2}
.hero-bg img{width:100%; height:100%; object-fit:cover; object-position:62% 40%; transform:scale(1.06); animation:kb 28s ease-in-out infinite alternate; will-change:transform}
@keyframes kb{0%{transform:scale(1.06) translate(0,0)}100%{transform:scale(1.15) translate(-1.6%,-1.8%)}}
.hero-scrim{position:absolute; inset:0; z-index:-1;
  background:linear-gradient(90deg,rgba(12,12,14,.94) 0%,rgba(12,12,14,.78) 38%,rgba(12,12,14,.28) 70%,rgba(12,12,14,.12) 100%),
             linear-gradient(0deg,rgba(12,12,14,.96) 0%,rgba(12,12,14,.35) 34%,rgba(12,12,14,0) 62%)}
.hero-in{position:relative; padding-top:clamp(104px,13vh,144px); padding-bottom:clamp(32px,5vh,56px); display:grid; grid-template-columns:minmax(0,1.32fr) minmax(0,.68fr); gap:clamp(24px,4vw,64px); align-items:end}
.hero-copy{display:flex; flex-direction:column; align-items:flex-start}
.hero h1{margin-top:24px; max-width:18em}
.hero .lede{margin-top:26px}
.hero .hero .micro{margin-top:16px}
.hero-side{display:grid; gap:10px; justify-items:end; align-self:end}
.stat{display:flex; align-items:baseline; gap:12px; padding:14px 18px; border-radius:4px; background:rgba(12,12,14,.5); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); box-shadow:0 0 0 1px var(--line-d2) inset}
.stat b{font-weight:700; font-size:clamp(26px,2.6vw,36px); line-height:1; letter-spacing:-.03em; color:var(--amber); white-space:nowrap}
.stat > span{font-size:15px; font-weight:700; letter-spacing:-.02em; color:var(--cream); word-break:keep-all}
.hero-foot{position:relative; border-top:1px solid var(--line-d); padding-block:18px; display:flex; gap:26px; align-items:center; flex-wrap:wrap; font-size:10.5px; letter-spacing:.15em; text-transform:uppercase; color:rgba(243,239,231,.6)}
.hero-foot img{width:100px; filter:invert(1) brightness(1.7); opacity:.85}

/* ---------- 마키 ---------- */
.marquee{border-block:1px solid var(--line-d); overflow:hidden; padding-block:18px; background:var(--bg-2)}
.marquee-track{display:flex; width:max-content; animation:march 44s linear infinite}
.marquee-track>span{font-family:var(--ff-ui); display:inline-flex; align-items:center; gap:clamp(26px,3.4vw,52px); padding-inline:clamp(13px,1.7vw,26px); font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:rgba(243,239,231,.7); white-space:nowrap}
.marquee-track>span::after{content:''; width:4px; height:4px; border-radius:50%; background:var(--amber); flex:none}
@keyframes march{to{transform:translateX(-50%)}}

/* ---------- 헤드 ---------- */
.head{display:flex; flex-direction:column; align-items:flex-start; gap:0}
.head h2{margin-top:16px; max-width:22em}
.head .lede{margin-top:16px; max-width:34em}
.head .lede + .lede{margin-top:10px}

/* ---------- 01 왜 지금 ---------- */
.frame{position:relative; padding:9px; border-radius:4px; background:linear-gradient(158deg,rgba(255,255,255,.7),rgba(255,255,255,.2)); box-shadow:0 0 0 1px var(--line-l2), 0 40px 80px -40px rgba(27,23,20,.35)}
.frame .crop{overflow:hidden; border-radius:2px; background:var(--cream-2)}
.frame .crop img{width:100%; height:100%; object-fit:cover}
.pull{font-family:var(--ff); font-weight:700; font-size:clamp(1.5rem,2.6vw,2.35rem); line-height:1.26; letter-spacing:-.026em; word-break:keep-all}
.pull em{font-style:normal; font-weight:700; color:var(--amber-deep)}

/* ---------- 02 관리실에서 (스크롤 스토리) ---------- */
.story{background:var(--bg)}
.story-grid{display:grid; grid-template-columns:minmax(0,.62fr) minmax(0,1fr); gap:clamp(28px,4vw,64px); align-items:start; margin-top:clamp(28px,4vh,48px)}
.story-stage{position:sticky; top:clamp(90px,12vh,130px); aspect-ratio:5/6; border-radius:4px; overflow:hidden; background:var(--bg-3); box-shadow:0 0 0 1px var(--line-d2)}
.story-stage img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transform:scale(1.04);
  transition:opacity 1s var(--e-soft), transform 1.4s var(--e-soft)}
.story-stage img.on{opacity:1; transform:scale(1)}
.story-stage .idx{position:absolute; left:20px; bottom:18px; font-weight:700; font-size:42px; line-height:1; letter-spacing:-.035em; color:var(--cream); text-shadow:0 2px 18px rgba(0,0,0,.5)}
.steps{display:grid}
.step{padding-block:clamp(28px,5vh,52px); border-top:1px solid var(--line-d); transition:opacity .7s var(--e-soft)}
/* 강조는 흐림이 아니라 번호 색으로 한다 — 흐림은 비활성 단계 대비를 2.5~4.1:1 로 떨어뜨렸다 */
.step.on{opacity:1}
.step:first-child{border-top:0; padding-top:0}
.step .k{display:flex; gap:12px; align-items:baseline}
.step .k b{font-weight:700; font-size:16px; color:rgba(243,239,231,.62); letter-spacing:-.02em;
  transition:color .5s var(--e-soft)}
.step.on .k b{color:var(--amber)}
.step h3{font-family:var(--ff); font-weight:700; font-size:clamp(1.45rem,2.3vw,2.1rem); letter-spacing:-.03em; line-height:1.3; margin-top:16px}
.step p:not(.k){margin-top:16px; color:rgba(243,239,231,.82); line-height:1.85; word-break:keep-all; max-width:30em}

/* ---------- 03 왜 오도라타 ---------- */
.pillars{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(20px,3vw,44px); margin-top:clamp(36px,5vh,56px); padding-top:clamp(28px,3.5vh,44px); border-top:1px solid var(--line-d)}
.pillar .k{display:flex; gap:12px; align-items:baseline}
.pillar .k b{font-weight:700; font-size:16px; color:var(--amber)}
.pillar h3{margin-top:14px}
.pillar p:not(.k){margin-top:10px; font-size:14px; line-height:1.8; color:rgba(243,239,231,.78); word-break:keep-all}

/* ---------- 원장(ledger) — 숫자 4개 ---------- */
.ledger{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(16px,2.4vw,40px); margin-top:clamp(32px,4vh,48px); padding-top:clamp(26px,3vh,38px); border-top:1px solid var(--line-d)}
.ledger-item{display:flex; flex-direction:column; gap:10px}
.ledger-item b{font-weight:700; font-size:clamp(2.1rem,3.4vw,3.1rem); line-height:1; letter-spacing:-.035em; color:var(--amber)}
.ledger-item b em{font-style:normal; font-size:.3em; font-weight:700; letter-spacing:-.01em; margin-left:4px; color:var(--cream)}
.ledger-item > span{font-size:13px; line-height:1.6; color:rgba(243,239,231,.6); word-break:keep-all}
.faq-sec{padding-top:0}

/* ---------- 04 서류 ---------- */
.docs{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(16px,2.2vw,30px); margin-top:clamp(32px,4vh,48px); align-items:start}
.doc{margin:0}
.doc button{display:block; width:100%; padding:10px; border-radius:4px; cursor:zoom-in; background:linear-gradient(160deg,#FBFAF6,#EFEBE2);
  box-shadow:0 0 0 1px rgba(243,239,231,.08), 0 40px 80px -36px rgba(0,0,0,.8); transition:transform .7s var(--e-soft), box-shadow .7s var(--e-soft)}
.doc button:hover,.doc button:focus-visible{transform:translateY(-8px); box-shadow:0 0 0 1px rgba(243,239,231,.18), 0 60px 90px -36px rgba(0,0,0,.9)}
.doc img{width:100%; border-radius:2px; aspect-ratio:4/3; object-fit:cover; object-position:top center}
.doc figcaption{display:grid; grid-template-columns:auto 1fr; gap:6px 12px; margin-top:20px; padding-top:16px; border-top:1px solid var(--line-d)}
.doc figcaption .k{grid-row:1/span 2; font-family:var(--ff-en); font-size:13px; letter-spacing:0; padding-top:2px}
.doc figcaption b{font-family:var(--ff-ui); font-size:15px; font-weight:700; letter-spacing:-.03em}
.doc figcaption span:last-child{font-family:var(--ff-ui); font-size:12px; color:rgba(243,239,231,.58); line-height:1.6; word-break:keep-all}

/* ---------- 05 후기 (단톡방 말풍선) ---------- */
.chat{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(14px,1.8vw,26px); margin-top:clamp(32px,4vh,48px)}
.bubble{display:flex; flex-direction:column; gap:14px}
.bubble .who{font-family:var(--ff-ui); display:flex; align-items:center; gap:10px; font-size:12.5px; color:var(--ink-3)}
.bubble .who i{width:30px; height:30px; border-radius:50%; background:var(--ink); color:var(--cream); display:grid; place-items:center; font-family:var(--ff-en); font-style:normal; font-size:14px}
.bubble .tag{font-family:var(--ff-ui); align-self:flex-start; font-size:10.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--amber-deep); padding:6px 11px; border-radius:99px; background:rgba(140,90,52,.1)}
.bubble blockquote{position:relative; padding:20px 22px; border-radius:4px 18px 18px 18px; background:#fff; box-shadow:0 0 0 1px var(--line-l2), 0 24px 40px -30px rgba(27,23,20,.35);
  font-size:clamp(1.02rem,1.25vw,1.2rem); font-weight:500; line-height:1.6; letter-spacing:-.03em; word-break:keep-all}
.bubble blockquote::before{content:''; position:absolute; left:-6px; top:0; border:8px solid transparent; border-top-color:#fff; border-right-color:#fff}

/* ---------- 06 샘플 ---------- */
.sample-grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(30px,5vw,90px); align-items:center}
.sample-grid .crop{aspect-ratio:5/4; border-radius:4px; overflow:hidden; box-shadow:0 0 0 1px var(--line-d2)}
.sample-grid .crop img{width:100%; height:100%; object-fit:cover}
.ticks{display:grid; gap:13px; margin-top:28px}
.ticks li{display:flex; gap:12px; font-size:15px; color:inherit; opacity:.9; word-break:keep-all}
.ticks svg{width:14px; height:14px; flex:none; margin-top:7px; color:var(--amber)}
.light .ticks li{color:var(--ink-2)}
.light .ticks svg,.natal .ticks svg{color:var(--amber-deep)}

/* ---------- 07 FAQ ---------- */
.faq{margin-top:clamp(36px,5vh,60px); border-top:1px solid var(--line-l)}
.faq details{border-bottom:1px solid var(--line-l)}
.faq summary{font-family:var(--ff-ui); display:flex; align-items:center; justify-content:space-between; gap:24px; padding-block:clamp(22px,2.5vw,30px); cursor:pointer; list-style:none;
  font-size:clamp(1.02rem,1.4vw,1.3rem); font-weight:500; letter-spacing:-.03em; word-break:keep-all}
.faq summary::-webkit-details-marker{display:none}
.faq .pm{position:relative; width:38px; height:38px; border-radius:50%; border:1px solid var(--line-l); flex:none}
.faq .pm::before,.faq .pm::after{content:''; position:absolute; top:50%; left:50%; translate:-50% -50%; background:var(--ink); transition:transform .5s var(--e-soft), opacity .35s}
.faq .pm::before{width:12px; height:1.4px} .faq .pm::after{width:1.4px; height:12px}
.faq details[open] .pm{background:var(--ink)} .faq details[open] .pm::before{background:var(--cream)} .faq details[open] .pm::after{opacity:0; transform:rotate(90deg)}
.faq .ans{overflow:hidden}
.faq .ans p{padding:0 62px clamp(24px,2.8vw,34px) 0; font-size:14.5px; line-height:1.85; color:var(--ink-2); max-width:62ch; word-break:keep-all}

/* ---------- 최종 CTA ---------- */
.apply{position:relative; overflow:hidden}
.apply::before{content:''; position:absolute; inset:0; background:radial-gradient(70% 90% at 80% 10%, rgba(207,201,190,.12), transparent 60%)}
.apply-in{position:relative; display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:clamp(34px,5vw,90px); align-items:end}
.apply h2{margin-top:26px} .apply .lede{margin-top:24px}
.apply-box{padding:clamp(26px,2.8vw,38px); border-radius:4px; background:rgba(243,239,231,.05); box-shadow:0 0 0 1px var(--line-d) inset}
.apply-box .btn{width:100%; justify-content:space-between; margin-bottom:18px}

/* ---------- footer ---------- */
.foot{padding-top:clamp(52px,7vh,86px); padding-bottom:clamp(120px,15vh,150px); border-top:1px solid var(--line-d)}
.foot-top{display:flex; justify-content:space-between; align-items:flex-start; gap:30px; flex-wrap:wrap; padding-bottom:34px; border-bottom:1px solid var(--line-d)}
.foot-body{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(24px,4vw,72px); padding-top:32px}
.foot-word{font-size:clamp(4rem,16vw,13rem); line-height:.9; font-weight:700; letter-spacing:-.055em; color:rgba(243,239,231,.07); margin-top:clamp(36px,5vh,60px); user-select:none}

/* ---------- 하단 고정 바 ---------- */
.dock{font-family:var(--ff-ui); position:fixed; z-index:70; left:50%;
  bottom:calc(clamp(14px,2.2vh,24px) + env(safe-area-inset-bottom,0px)); translate:-50% 0; display:flex; align-items:center; gap:clamp(16px,2.6vw,34px);
  padding:8px 8px 8px 24px; border-radius:99px; max-width:calc(100vw - 2*var(--gut)); background:rgba(243,239,231,.94); color:var(--ink);
  backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); box-shadow:0 0 0 1px rgba(27,23,20,.1), 0 22px 48px -22px rgba(0,0,0,.7);
  font-size:15px; white-space:nowrap; transform:translateY(150%); opacity:0; transition:transform .7s var(--e-soft), opacity .5s var(--e-soft)}
body.dock-on .dock{transform:none; opacity:1}
.dock em{font-style:normal; font-size:15px; font-weight:500; letter-spacing:-.02em; color:var(--ink-2)}
.dock a{display:inline-flex; align-items:center; gap:12px; background:var(--ink); color:var(--cream); padding:13px 11px 13px 21px; border-radius:99px; font-size:15.5px; font-weight:700; letter-spacing:-.02em}
.dock a .knob{width:34px; height:34px; border-radius:50%; background:var(--amber-deep); display:grid; place-items:center; transition:transform .5s var(--e-soft)}
.dock a .knob svg{width:13px; height:13px}
.dock a:hover .knob{transform:translate(2px,-2px)}

/* ---------- 문서 모달 ---------- */
dialog{border:0; padding:0; max-width:min(92vw,820px); max-height:88dvh; width:100%; background:var(--cream); border-radius:6px; overflow:auto; color:var(--ink); box-shadow:0 40px 90px -30px rgba(0,0,0,.8)}
dialog::backdrop{background:rgba(12,12,14,.8); backdrop-filter:blur(9px)}
dialog[open]{animation:pop .55s var(--e-out)}
@keyframes pop{from{opacity:0; transform:translateY(22px) scale(.985)}}
.dlg-bar{position:sticky; top:0; z-index:2; display:flex; align-items:center; justify-content:space-between; gap:20px; padding:16px 16px 16px 22px; background:var(--cream); border-bottom:1px solid var(--line-l); font-size:12px; letter-spacing:.04em}
.dlg-bar button{width:38px; height:38px; border-radius:50%; background:var(--ink); color:var(--cream); display:grid; place-items:center}
.dlg-bar button svg{width:13px; height:13px}
dialog .micro{padding:18px 22px 24px; color:var(--ink-3)}

/* ---------- 리빌 ---------- */
.js [data-rv]{opacity:0; transform:translateY(clamp(18px,2.6vh,34px)); filter:blur(7px)}
.js [data-rv].in{opacity:1; transform:none; filter:blur(0); transition:opacity .95s var(--e-out), transform 1.05s var(--e-out), filter .95s var(--e-out)}
.js [data-rv].in[data-d="1"]{transition-delay:.09s} .js [data-rv].in[data-d="2"]{transition-delay:.18s}
.js [data-rv].in[data-d="3"]{transition-delay:.27s} .js [data-rv].in[data-d="4"]{transition-delay:.36s}

/* ?qa=1 검수 모드 — 트랜지션에 의존하지 않고 즉시 전개 (전체 페이지 캡처 재현성) */
html.qa [data-rv]{opacity:1 !important; transform:none !important; filter:none !important; transition:none !important}
html.qa [data-split] .ch{opacity:1 !important; transform:none !important; transition:none !important}
html.qa [data-curtain] button{clip-path:none !important; transition:none !important}
html.qa .lede strong::after{transform:scaleX(1) !important}
html.qa .mask>span{transform:none !important; transition:none !important}
html.qa .hero-bg img{animation:none !important; transform:none !important}
html.qa .dock{transform:none !important; opacity:1 !important; transition:none !important}
/* 스테이지 사진은 1초 크로스페이드다. 검수 캡처에서는 즉시 확정시킨다 —
   프레임을 그리지 않는 환경에서 트랜지션은 시작값에 머물러 어느 사진이 활성인지 알 수 없다. */
html.qa .story-stage img{transition:none !important}
html.qa .nav{transform:none !important; opacity:1 !important; transition:none !important}

/* ---------- 스크롤 진행 바 ---------- */
.progress{position:fixed; top:0; left:0; height:2px; width:0; z-index:90; pointer-events:none;
  background:linear-gradient(90deg,transparent,var(--amber)); transition:width .12s linear}

/* ---------- 글자 단위 스태거 (히어로) ---------- */
.ch{display:inline-block; white-space:pre}
.js [data-split] .ch{opacity:0; transform:translateY(.42em) rotateX(-38deg); transform-origin:50% 100%}
.js [data-split].lit .ch{opacity:1; transform:none;
  transition:opacity .5s var(--e-out), transform .72s var(--e-out)}

/* ---------- 커튼 리빌 (서류 카드) ---------- */
.js [data-curtain] button{clip-path:inset(0 0 100% 0)}
.js [data-curtain].in button{clip-path:inset(0 0 0 0); transition:clip-path 1.05s var(--e-out)}

/* ---------- 마그네틱 버튼 ---------- */
.btn .knob{will-change:transform}
.btn.mag .knob{transition:transform .18s var(--e-soft)}

/* ---------- 리드 강조 밑줄 그리기 ---------- */
.lede strong{position:relative; text-decoration:none}
.lede strong::after{content:''; position:absolute; left:0; right:0; bottom:-.1em; height:1px;
  background:currentColor; opacity:.5; transform:scaleX(0); transform-origin:left;
  transition:transform .9s var(--e-out) .25s}
.js [data-rv].in .lede strong::after,.js .lede[data-rv].in strong::after{transform:scaleX(1)}

/* ============================================================ 반응형 */
@media (max-width:1180px){
    .ledger{grid-template-columns:repeat(2,minmax(0,1fr)); gap:26px}
}
@media (max-width:1024px){
  .nav-mid,.nav-cta{display:none} .burger{display:grid}
  .hero-in{grid-template-columns:minmax(0,1fr); gap:28px}
  .hero-side{justify-items:start; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); width:100%}
  .head,.why-grid,.sample-grid,.apply-in{grid-template-columns:minmax(0,1fr)}
  .head{gap:22px}
  .story-grid{display:block}
  .story-stage{position:sticky; top:76px; aspect-ratio:16/10; max-width:560px; margin-inline:auto; margin-bottom:26px; z-index:1}
  .steps{margin-top:0}
  .step{padding-block:clamp(26px,4vh,40px)}
  .docs,.chat,.pillars{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .docs>:last-child,.chat>:last-child,.pillars>:last-child{grid-column:span 2}
  .foot-body{grid-template-columns:minmax(0,1fr)}
  }
@media (max-width:760px){
  body{font-size:15.5px; line-height:1.6}
  .hero-bg img{object-position:58% 50%}
  .hero-scrim{background:linear-gradient(0deg,rgba(12,12,14,.98) 0%,rgba(12,12,14,.82) 40%,rgba(12,12,14,.3) 72%,rgba(12,12,14,.1) 100%)}
  .hero-in{padding-top:min(26svh,210px)}
  :root{--sec:clamp(44px,6vh,64px)}
  .hero-side{grid-template-columns:1fr; gap:8px; width:100%}
  .stat{width:100%}
  .lede{line-height:1.62}
  .step p:not(.k),.pillar p:not(.k),.bubble blockquote{line-height:1.6}
  .stat{padding:12px 14px; min-width:0} .stat b{font-size:26px} .stat > span{font-size:12px}   .ledger{gap:20px} .ledger-item b{font-size:1.95rem}
  .docs,.chat,.pillars{grid-template-columns:minmax(0,1fr)}
  .docs>:last-child,.chat>:last-child,.pillars>:last-child{grid-column:auto}
  .story-stage{aspect-ratio:16/11; max-width:none; top:70px}
  .faq .ans p{padding-right:0}
  .sample-grid .crop{aspect-ratio:16/11; order:-1}
  .doc img{aspect-ratio:16/10}
  .doc button{padding:8px}
  .doc figcaption{margin-top:14px; padding-top:12px}
  /* 폭을 100vw 로 못 박으면 안내 문구를 숨겼을 때 200px 가 빈 채로 남는다.
     내용에 맞춰 줄이고 화면폭만 상한으로 둔다. */
  .dock{gap:12px; padding:6px 6px 6px 16px; width:auto; max-width:calc(100vw - 2*var(--gut))}
  .dock em{font-size:14px}
  .dock a{font-size:15px; padding:12px 9px 12px 18px; gap:10px} .dock a .knob{width:32px; height:32px}
}
@media (max-width:400px){
  .btn{gap:14px; padding-left:20px; font-size:14px; min-height:56px} .btn .knob{width:40px; height:40px}
}
@media (max-width:359px){
  .dock em{display:none}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important; transition-duration:.01ms !important; scroll-behavior:auto !important}
  .js .mask>span{transform:none !important}
  .js [data-rv]{opacity:1 !important; transform:none !important; filter:none !important}
  .js [data-split] .ch{opacity:1 !important; transform:none !important}
  .js [data-curtain] button{clip-path:none !important}
  .progress{display:none}
  .lede strong::after{transform:scaleX(1) !important}
  .hero-bg img{animation:none; transform:none}
  .story-stage img{opacity:1; position:relative} .story-stage img:not(.on){display:none} .story-stage img.on{display:block}
}

/* ============================================================
   v5 추가 — 산전·산후 섹션
   ============================================================ */
.natal{background:var(--cream); color:var(--ink)}
.natal .micro{color:var(--ink-3)} .natal .lede{color:var(--ink-2)}
.natal .eyebrow{color:var(--ink-2); border-color:var(--line-l); background:rgba(255,255,255,.4)}
.natal .eyebrow::before{background:var(--amber-deep)}
.natal h2 em,.natal .pull em{color:var(--amber-deep)}
.natal .lede strong{font-weight:700; color:var(--ink)}
/* 산모 케어는 이 페이지에서 가장 강한 소구다 — 제목을 h2 기본보다 키운다 */
.natal .head h2{font-size:clamp(2rem,4.4vw,3.7rem); line-height:1.14; letter-spacing:-.03em; max-width:20em}
.natal .k{color:var(--ink-3)}
.natal .tlink{border-color:var(--line-l)} .natal .tlink:hover{border-color:var(--ink)}

.natal-grid{display:grid; grid-template-columns:minmax(0,.5fr) minmax(0,1.5fr);
  gap:clamp(30px,5vw,72px); align-items:center; margin-top:clamp(32px,4vh,48px)}
.natal .ticks{margin-top:24px}
.natal-photo{margin:0; max-width:288px}
.natal-photo .crop{aspect-ratio:4/5}

/* 제품별 사용 기준 표 */
.ntr>span:first-child{font-weight:500; letter-spacing:-.025em; word-break:keep-all}
.ntr>span:not(:first-child){font-size:13px; text-align:left}
.no{color:#9A4A32} .no::before{background:#9A4A32}
.tbd{color:var(--ink-3)} .tbd::before{background:var(--ink-3)}

@media (max-width:1024px){
  .natal-grid{grid-template-columns:minmax(0,1fr); gap:34px}
  .natal-photo .crop{aspect-ratio:16/11}
  .natal-photo{max-width:420px}
}
@media (max-width:520px){
    .ntr>span:first-child{grid-column:1/span 2}
    .ntr>span:nth-child(2)::after{content:' · 임신 중'; color:var(--ink-3); font-size:11px}
  .ntr>span:nth-child(3)::after{content:' · 산후'; color:var(--ink-3); font-size:11px}
  .ntr>span:nth-child(3){justify-self:end}
}