/* MEDIGAIN — luxury site */
:root{
  --ink:#120d08; --espresso:#1c140d; --brown:#2C2318; --ivory:#F6F1E8; --paper:#FBF8F2; --sand:#E9DFCC;
  --gold:#B8922A; --gold-2:#E3C777; --gold-3:#8d6d17; --sage:#4A6741; --mid:#7a7265; --line:rgba(44,35,24,.14); --line-d:rgba(227,199,119,.22);
  --serif:"Noto Serif KR","Cormorant Garamond",Georgia,serif; --en:"Cormorant Garamond",Georgia,serif;
  --sans:"Pretendard Variable",Pretendard,"Apple SD Gothic Neo","Malgun Gothic",sans-serif;
  --ease:cubic-bezier(.22,.8,.2,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:auto}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
body{font-family:var(--sans);color:var(--brown);background:var(--paper);line-height:1.8;-webkit-font-smoothing:antialiased;word-break:keep-all;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
ul{list-style:none}
::selection{background:var(--gold);color:#fff}

.wrap{width:min(1200px,100% - 48px);margin:0 auto}
.narrow{width:min(760px,100% - 48px);margin:0 auto}
section{position:relative}
.pad{padding:clamp(90px,13vw,180px) 0}
.dark{background:var(--ink);color:#efe7d6}
.espresso{background:var(--espresso);color:#efe7d6}
.ivory{background:var(--ivory)}

/* type */
.eyebrow{font-family:var(--en);font-size:15px;letter-spacing:.34em;text-transform:uppercase;color:var(--gold);display:flex;align-items:center;gap:16px}
.eyebrow::before{content:"";width:44px;height:1px;background:currentColor;opacity:.7}
.center .eyebrow{justify-content:center}.center .eyebrow::after{content:"";width:44px;height:1px;background:currentColor;opacity:.7}
h1,h2,h3{font-family:var(--serif);font-weight:500;letter-spacing:-.02em;line-height:1.28}
h1{font-size:clamp(38px,6.4vw,92px)}
h2{font-size:clamp(30px,4.4vw,60px)}
h3{font-size:clamp(20px,2.2vw,28px)}
.lead{font-size:clamp(16px,1.5vw,19px);color:var(--mid);max-width:640px}
.dark .lead,.espresso .lead{color:#b9ad97}
.gold{background:linear-gradient(110deg,var(--gold) 0%,var(--gold-2) 45%,var(--gold) 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.small{font-size:13px;color:var(--mid);line-height:1.8}
.dark .small,.espresso .small{color:#9b907c}
.center{text-align:center}.center .lead{margin-inline:auto}
.mt{margin-top:clamp(20px,3vw,40px)}

/* line mask text */
.ln{display:block;overflow:hidden;padding-bottom:.08em}
.ln>span{display:block}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;padding:18px 38px;border:1px solid var(--gold);color:var(--gold-2);font-size:15px;letter-spacing:.08em;position:relative;overflow:hidden;transition:color .5s var(--ease)}
.btn::before{content:"";position:absolute;inset:0;background:linear-gradient(110deg,var(--gold),var(--gold-2));transform:translateY(101%);transition:transform .55s var(--ease);z-index:0}
.btn>*{position:relative;z-index:1}
.btn:hover{color:var(--ink)}.btn:hover::before{transform:translateY(0)}
.btn.solid{background:linear-gradient(110deg,var(--gold),var(--gold-2));color:var(--ink);border-color:transparent}
.btn.solid::before{background:#fff}
.btn.light{color:var(--brown);border-color:var(--brown)}
.btn.light:hover{color:#fff}.btn.light::before{background:var(--brown)}
.btn .arr{display:inline-block;transition:transform .4s var(--ease)}
.btn:hover .arr{transform:translateX(6px)}
.link{display:inline-flex;gap:10px;align-items:center;font-size:15px;letter-spacing:.06em;color:var(--gold);border-bottom:1px solid rgba(184,146,42,.4);padding-bottom:4px;transition:.3s}
.link:hover{gap:16px;border-color:var(--gold)}

/* header */
.hd{position:fixed;inset:0 0 auto 0;z-index:100;transition:transform .5s var(--ease),background .5s,backdrop-filter .5s}
.hd .in{display:flex;align-items:center;justify-content:space-between;height:78px;width:min(1320px,100% - 48px);margin:0 auto}
.logo{font-family:var(--en);font-size:25px;letter-spacing:.4em;font-weight:500;color:#fff;transition:color .4s}
.nav{display:flex;gap:clamp(18px,2.6vw,40px);font-size:14px;letter-spacing:.08em}
.nav a{color:#e8dec9;position:relative;padding:6px 0;transition:color .3s}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--gold-2);transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease)}
.nav a:hover::after,.nav a.on::after{transform:scaleX(1)}
.hd .buy{padding:11px 24px;font-size:13px}
.hd.solid{background:rgba(18,13,8,.88);backdrop-filter:blur(14px)}
.hd.hide{transform:translateY(-100%)}
.hd.light-on{background:rgba(251,248,242,.9);backdrop-filter:blur(14px)}
.hd.light-on .logo{color:var(--brown)}.hd.light-on .nav a{color:var(--brown)}
.burger{display:none;width:44px;height:44px;border:0;background:none;cursor:pointer;position:relative;z-index:130}
.burger i{position:absolute;left:10px;right:10px;height:1px;background:#fff;transition:.4s var(--ease)}
.burger i:nth-child(1){top:18px}.burger i:nth-child(2){top:26px}
.hd.light-on .burger i{background:var(--brown)}
body.menu-open .burger i{background:#fff}
body.menu-open .burger i:nth-child(1){top:22px;transform:rotate(45deg)}
body.menu-open .burger i:nth-child(2){top:22px;transform:rotate(-45deg)}
.drawer{position:fixed;inset:0;z-index:120;background:var(--ink);display:flex;flex-direction:column;justify-content:center;padding:0 10vw;clip-path:inset(0 0 100% 0);transition:clip-path .8s var(--ease);pointer-events:none}
body.menu-open .drawer{clip-path:inset(0);pointer-events:auto}
.drawer a{font-family:var(--serif);font-size:clamp(28px,8vw,44px);color:#efe7d6;padding:10px 0;border-bottom:1px solid var(--line-d)}
.drawer a small{font-family:var(--en);font-size:13px;letter-spacing:.3em;color:var(--gold);margin-left:14px}
@media(max-width:980px){.nav,.hd .buy{display:none}.burger{display:block}}

/* hero (home) */
.hero{height:100svh;min-height:680px;overflow:hidden;background:var(--ink);color:#fff;display:flex;align-items:center}
.stage{position:absolute;left:50%;top:50%;width:max(100%,calc(100svh * 1.5));aspect-ratio:3/2;transform:translate(-50%,-50%)}
.stage .bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;will-change:transform}
.stage .prod{position:absolute;will-change:transform;filter:drop-shadow(0 30px 40px rgba(0,0,0,.55))}
.stage .tube{left:64%;top:13%;height:49%;transform:translateX(-50%)}
.stage .box{left:76%;top:24%;height:38%;transform:translateX(-50%)}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(18,13,8,.75) 0%,rgba(18,13,8,.25) 55%,rgba(18,13,8,0) 100%);pointer-events:none}
.hero .txt{position:relative;z-index:5;padding-top:40px}
.hero h1{margin:26px 0 28px;color:#fff}
.hero h1 em{font-style:normal}
.hero .lead{color:#cfc3ab;margin-bottom:44px}
.hero .cta{display:flex;gap:16px;flex-wrap:wrap}
.dust{position:absolute;inset:0;z-index:3;pointer-events:none}
.scrollhint{position:absolute;left:50%;bottom:34px;z-index:6;transform:translateX(-50%);font-family:var(--en);font-size:12px;letter-spacing:.4em;color:#cdbf9f;display:flex;flex-direction:column;align-items:center;gap:12px}
.scrollhint i{width:1px;height:54px;background:linear-gradient(var(--gold-2),transparent);animation:sh 2.2s var(--ease) infinite;transform-origin:top}
@keyframes sh{0%{transform:scaleY(0)}50%{transform:scaleY(1)}100%{transform:scaleY(1);opacity:0}}
@media(max-width:760px){
  .stage{width:220vw;left:calc(50% - 30.8vw);top:78%}
  .stage .tube{height:40%;top:22%}
  .stage .box{height:30%;top:32%;left:78%}
  .hero::after{background:linear-gradient(180deg,rgba(18,13,8,.8),rgba(18,13,8,.2) 60%,rgba(18,13,8,.6))}
  .hero{align-items:flex-start}.hero .txt{padding-top:110px}
}

/* page hero (sub pages) */
.phero{min-height:78svh;display:flex;align-items:flex-end;position:relative;overflow:hidden;color:#fff;background:var(--ink)}
.phero .bgw{position:absolute;inset:-12% 0 -12% 0}
.phero .bgw img{width:100%;height:100%;object-fit:cover}
.phero::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(18,13,8,.85),rgba(18,13,8,.15) 70%)}
.phero .in{position:relative;z-index:2;padding:160px 0 clamp(60px,8vw,110px)}
.phero h1{font-size:clamp(36px,6vw,84px);margin-top:20px}
.phero .lead{color:#d7cbb2;margin-top:24px}
.phero.light{color:var(--brown)}.phero.light::after{background:linear-gradient(0deg,rgba(246,241,232,.85),rgba(246,241,232,0) 60%)}
.phero.light .lead{color:#5d554a}

/* marquee */
.marquee{overflow:hidden;border-block:1px solid var(--line-d);background:var(--ink);padding:26px 0}
.marquee .tr{display:flex;gap:70px;width:max-content;animation:mq 38s linear infinite;font-family:var(--en);font-size:clamp(22px,3vw,40px);letter-spacing:.28em;color:#cdbf9f;white-space:nowrap}
.marquee .tr span::after{content:"✦";color:var(--gold);margin-left:70px;font-size:.55em;vertical-align:middle}
@keyframes mq{to{transform:translateX(-50%)}}

/* scroll-fill statement */
.statement{font-family:var(--serif);font-size:clamp(28px,4.6vw,66px);line-height:1.5;letter-spacing:-.025em}
.statement .w{opacity:.14;transition:none}
.dark .statement .w{color:#f1e9d8}

/* split */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,7vw,110px);align-items:center}
.split.rev .media{order:2}
.media{position:relative;overflow:hidden;aspect-ratio:4/5;background:var(--sand)}
.media.wide{aspect-ratio:3/2}
.media img{position:absolute;inset:-10% 0;height:120%;width:100%;object-fit:cover}
.split h2{margin:22px 0 26px}
.split p+p{margin-top:16px}
@media(max-width:860px){.split{grid-template-columns:1fr}.split.rev .media{order:0}}

/* horizontal herbs */
.hs{overflow:hidden;background:var(--espresso);color:#efe7d6}
.hs .head{padding:clamp(90px,12vw,150px) 0 40px}
.hs .track{display:flex;gap:28px;padding:0 max(24px,calc((100vw - 1200px)/2));width:max-content}
.herb{width:min(380px,78vw);flex:none}
.herb .ph{aspect-ratio:1;overflow:hidden;background:#000;position:relative}
.herb .ph img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.herb:hover .ph img{transform:scale(1.07)}
.herb .han{font-family:var(--serif);font-size:15px;letter-spacing:.4em;color:var(--gold-2);margin:22px 0 4px}
.herb h3{font-size:30px;color:#fff}
.herb .ex{font-size:14px;color:#a89c85;margin-top:6px}
.herb p{font-size:14.5px;color:#cbbfa7;margin-top:14px}
.hs .tail{padding:60px 0 clamp(90px,12vw,140px)}
@media(max-width:900px){.hs .scroller{overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}.hs .track{padding:0 24px}.herb{scroll-snap-align:center}}

/* numbers */
.nums{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line-d);border:1px solid var(--line-d);margin-top:70px}
.num{background:var(--ink);padding:clamp(30px,4vw,56px) 28px;text-align:center}
.num b{display:block;font-family:var(--en);font-weight:400;font-size:clamp(46px,6vw,86px);line-height:1;letter-spacing:-.01em}
.num b sub{font-size:.4em;vertical-align:baseline;margin-left:4px;letter-spacing:.05em}
.num>span{display:block;margin-top:16px;font-size:14px;color:#cdbf9f}
.num>small{display:block;margin-top:6px;font-size:12px;color:#8d826e}
@media(max-width:760px){.nums{grid-template-columns:1fr 1fr}}

/* feature */
.feature{display:grid;grid-template-columns:1.1fr 1fr;min-height:100svh}
.feature .pic{position:relative;overflow:hidden}
.feature .pic img{position:absolute;inset:-8% 0;width:100%;height:116%;object-fit:cover}
.feature .tx{display:flex;flex-direction:column;justify-content:center;padding:clamp(50px,7vw,120px)}
.feature h2{margin:22px 0 24px}
.feature ul{margin:30px 0 40px;display:grid;gap:14px}
.feature li{display:flex;gap:16px;padding-bottom:14px;border-bottom:1px solid var(--line)}
.feature li i{font-style:normal;font-family:var(--en);color:var(--gold);width:32px;flex:none}
@media(max-width:860px){.feature{grid-template-columns:1fr}.feature .pic{height:80vw}}

/* cards */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.card{border:1px solid var(--line);padding:clamp(28px,3vw,44px);background:#fff;position:relative;overflow:hidden;transition:transform .6s var(--ease),border-color .4s}
.card:hover{transform:translateY(-8px);border-color:var(--gold)}
.card .no{font-family:var(--en);font-size:52px;line-height:1;color:var(--gold-2);opacity:.9}
.card h3{margin:18px 0 12px}
.card p{font-size:15px;color:var(--mid)}
.dark .card,.espresso .card{background:rgba(255,255,255,.03);border-color:var(--line-d)}
.dark .card p,.espresso .card p{color:#b9ad97}
@media(max-width:860px){.cards{grid-template-columns:1fr}}

/* timeline */
.tl{position:relative;margin-top:80px;padding-left:46px}
.tl::before{content:"";position:absolute;left:11px;top:6px;bottom:6px;width:1px;background:var(--line-d)}
.tl .bar{position:absolute;left:11px;top:6px;width:1px;height:0;background:linear-gradient(var(--gold-2),var(--gold))}
.tl .it{position:relative;padding-bottom:clamp(50px,7vw,90px)}
.tl .it::before{content:"";position:absolute;left:-42px;top:12px;width:9px;height:9px;border-radius:50%;background:var(--gold-2);box-shadow:0 0 0 6px rgba(227,199,119,.16)}
.tl .yr{font-family:var(--en);font-size:clamp(34px,4.4vw,60px);color:var(--gold-2);line-height:1}
.tl h3{margin:14px 0 10px;color:#fff}
.tl p{color:#b9ad97;max-width:620px}

/* info table */
.info{width:100%;border-collapse:collapse;margin-top:28px}
.info th,.info td{padding:20px 12px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top;font-size:15.5px}
.info th{width:30%;font-weight:500;color:var(--gold-3);font-size:14px;letter-spacing:.06em}
.dark .info th,.dark .info td,.espresso .info th,.espresso .info td{border-color:var(--line-d)}
.dark .info th,.espresso .info th{color:var(--gold-2)}
@media(max-width:600px){.info th{width:34%}.info th,.info td{padding:16px 6px;font-size:14px}}

/* gallery strip */
.strip{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.strip .media{aspect-ratio:3/4}
@media(max-width:760px){.strip{grid-template-columns:1fr}}

/* acc */
.acc details{border-bottom:1px solid var(--line)}
.dark .acc details,.espresso .acc details{border-color:var(--line-d)}
.acc summary{list-style:none;cursor:pointer;padding:26px 50px 26px 0;font-family:var(--serif);font-size:clamp(17px,1.8vw,22px);position:relative}
.acc summary::-webkit-details-marker{display:none}
.acc summary::after{content:"+";position:absolute;right:6px;top:50%;transform:translateY(-50%);font-family:var(--en);font-size:30px;color:var(--gold);transition:transform .4s var(--ease)}
.acc details[open] summary::after{transform:translateY(-50%) rotate(45deg)}
.acc .b{padding:0 50px 28px 0;color:var(--mid);font-size:15.5px}
.dark .acc .b,.espresso .acc .b{color:#b9ad97}

/* store cards */
.stores{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:60px}
.store{padding:clamp(34px,4vw,60px);border:1px solid var(--line-d);background:rgba(255,255,255,.03);display:flex;flex-direction:column;gap:18px;transition:.5s var(--ease)}
.store:hover{border-color:var(--gold-2);background:rgba(227,199,119,.06);transform:translateY(-6px)}
.store .n{font-family:var(--en);font-size:15px;letter-spacing:.3em;color:var(--gold-2)}
.store h3{color:#fff;font-size:clamp(24px,2.6vw,34px)}
.store p{color:#b9ad97;font-size:15px;flex:1}
@media(max-width:760px){.stores{grid-template-columns:1fr}}

/* closing */
.closing{min-height:90svh;display:flex;align-items:center;overflow:hidden;color:#fff;text-align:center}
.closing .bgw{position:absolute;inset:-10% 0}
.closing .bgw img{width:100%;height:100%;object-fit:cover}
.closing::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at center,rgba(18,13,8,.35),rgba(18,13,8,.85))}
.closing .in{position:relative;z-index:2;padding:120px 0}
.closing h2{margin:24px 0 20px}
.closing .cta{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;margin-top:44px}

/* footer */
.ft{background:#0c0805;color:#8f846f;padding:90px 0 50px;font-size:13px;line-height:2}
.ft .top{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:50px;padding-bottom:56px;border-bottom:1px solid var(--line-d)}
.ft .logo{display:block;font-size:30px;margin-bottom:18px}
.ft h4{font-family:var(--en);font-size:14px;letter-spacing:.3em;color:var(--gold-2);margin-bottom:16px;font-weight:500}
.ft a{display:block;color:#a99d86;transition:color .3s}.ft a:hover{color:var(--gold-2)}
.ft .legal{padding-top:34px;font-size:12px;color:#756b59}
.ft .legal p+p{margin-top:8px}
@media(max-width:860px){.ft .top{grid-template-columns:1fr 1fr}.ft .top>div:first-child{grid-column:1/-1}}

/* effects */
.js .rv{opacity:0;transform:translateY(40px)}
.js .ln>span{transform:translateY(110%)}
.cursor{position:fixed;left:0;top:0;width:10px;height:10px;border-radius:50%;background:var(--gold-2);z-index:300;pointer-events:none;mix-blend-mode:difference;transition:width .35s var(--ease),height .35s var(--ease),margin .35s var(--ease),opacity .3s}
.cursor.big{width:64px;height:64px;margin:-27px 0 0 -27px;background:#fff}
@media(pointer:coarse){.cursor{display:none}}
.pt{position:fixed;inset:0;z-index:400;background:var(--ink);transform:translateY(100%);pointer-events:none;display:grid;place-items:center}
.pt span{font-family:var(--en);font-size:28px;letter-spacing:.5em;color:var(--gold-2);opacity:0}
.intro{position:fixed;inset:0;z-index:500;background:var(--ink);display:grid;place-items:center}
.intro .t{font-family:var(--en);font-size:clamp(26px,5vw,56px);letter-spacing:.6em;color:#efe7d6;padding-left:.6em;overflow:hidden;white-space:nowrap}
.intro .t span{display:inline-block;transform:translateY(110%)}
.intro .l{position:absolute;left:50%;bottom:38%;width:min(220px,40vw);height:1px;background:rgba(227,199,119,.25);transform:translateX(-50%);overflow:hidden}
.intro .l i{display:block;height:100%;width:100%;background:var(--gold-2);transform:scaleX(0);transform-origin:left}
.prog{position:fixed;left:0;top:0;height:2px;width:100%;background:linear-gradient(90deg,var(--gold),var(--gold-2));transform:scaleX(0);transform-origin:left;z-index:200}
@media(prefers-reduced-motion:reduce){.js .rv,.js .ln>span{opacity:1!important;transform:none!important}.marquee .tr{animation:none}.statement .w{opacity:1!important}}

/* sub-page extras */
.phero.top{align-items:flex-start}
.phero.top .in{padding-top:170px}
.phero.top::after{background:linear-gradient(180deg,rgba(246,241,232,.82),rgba(246,241,232,0) 55%)}
.phero.top.dk::after{background:linear-gradient(180deg,rgba(18,13,8,.7),rgba(18,13,8,0) 60%)}
.phero .ph-prod{position:absolute;z-index:1;right:max(24px,calc((100vw - 1200px)/2 + 40px));bottom:0;height:78%;display:flex;gap:2%;align-items:flex-end;pointer-events:none}
.phero .ph-prod img{height:100%;width:auto;filter:drop-shadow(0 30px 40px rgba(0,0,0,.5))}
.phero .ph-prod img+img{height:72%}
@media(max-width:860px){.phero .ph-prod{height:44%;right:16px;opacity:.9}}
.big-han{font-family:var(--serif);font-size:clamp(70px,14vw,200px);letter-spacing:.12em;line-height:1;color:var(--gold-2);opacity:.9}
.principle{display:grid;grid-template-columns:120px 1fr;gap:clamp(20px,5vw,80px);padding:clamp(44px,6vw,80px) 0;border-top:1px solid var(--line)}
.principle:last-child{border-bottom:1px solid var(--line)}
.principle .no{font-family:var(--en);font-size:clamp(48px,6vw,84px);line-height:1;color:var(--gold-2)}
.principle h3{font-size:clamp(24px,3vw,40px);margin-bottom:16px}
.principle p{color:var(--mid);max-width:640px}
@media(max-width:700px){.principle{grid-template-columns:1fr}}
.herb-row{display:grid;grid-template-columns:240px 1fr;gap:clamp(24px,5vw,70px);align-items:center;padding:clamp(34px,4vw,54px) 0;border-top:1px solid var(--line-d)}
.herb-row:last-child{border-bottom:1px solid var(--line-d)}
.herb-row img{width:100%;aspect-ratio:1;object-fit:cover}
.herb-row .han{font-family:var(--serif);letter-spacing:.4em;color:var(--gold-2);font-size:15px}
.herb-row h3{color:#fff;font-size:clamp(26px,3.2vw,42px);margin:8px 0 6px}
.herb-row .ex{color:#a89c85;font-size:15px}
.herb-row .tag{display:inline-block;margin-top:14px;font-size:12px;letter-spacing:.08em;color:var(--gold-2);border:1px solid var(--line-d);padding:5px 12px}
@media(max-width:700px){.herb-row{grid-template-columns:110px 1fr;gap:18px}}
.steps3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:70px}
.st{padding:clamp(28px,3vw,44px);border:1px solid var(--line-d);background:rgba(255,255,255,.03)}
.st .n{font-family:var(--en);font-size:60px;color:var(--gold-2);line-height:1}
.st h3{color:#fff;margin:16px 0 10px}
.st p{color:#b9ad97;font-size:15px}
@media(max-width:860px){.steps3{grid-template-columns:1fr}}
.ing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin-top:60px}
.ing{background:var(--paper);padding:34px 28px}
.ing small{font-family:var(--en);letter-spacing:.24em;color:var(--gold);font-size:12px}
.ing h3{font-size:22px;margin:10px 0 6px}
.ing p{font-size:14px;color:var(--mid)}
@media(max-width:860px){.ing-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.ing-grid{grid-template-columns:1fr}}
.func2{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:60px}
.fn{padding:clamp(34px,4vw,56px);border:1px solid var(--line-d);text-align:center}
.fn small{font-family:var(--en);letter-spacing:.3em;color:var(--gold-2);font-size:13px}
.fn b{display:block;font-family:var(--en);font-weight:400;font-size:clamp(60px,8vw,110px);line-height:1.1;margin:14px 0 4px}
.fn h3{color:#fff;margin-bottom:6px}
.fn p{color:#b9ad97;font-size:14.5px}
@media(max-width:700px){.func2{grid-template-columns:1fr}}
.quote{font-family:var(--serif);font-size:clamp(20px,2.6vw,34px);line-height:1.6;max-width:900px;margin:0 auto;text-align:center}
.quote cite{display:block;font-family:var(--sans);font-style:normal;font-size:13px;color:#8d826e;margin-top:22px}
.trial{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:70px}
.tr1{padding:clamp(30px,3vw,48px) 28px;border:1px solid var(--line-d);text-align:center;background:rgba(255,255,255,.03)}
.tr1 b{display:block;font-family:var(--en);font-weight:400;font-size:clamp(52px,6.6vw,96px);line-height:1}
.tr1 h3{color:#fff;margin:14px 0 6px;font-size:20px}
.tr1 p{color:#b9ad97;font-size:13.5px}
.tr1 .vs{margin-top:16px;padding-top:16px;border-top:1px solid var(--line-d);font-size:13px;color:#cdbf9f}
@media(max-width:860px){.trial{grid-template-columns:1fr}}
.pat{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:50px}
.pt1{padding:32px 26px;border:1px solid var(--line);background:#fff}
.pt1 small{font-family:var(--en);letter-spacing:.2em;color:var(--gold);font-size:12px}
.pt1 b{display:block;font-family:var(--en);font-weight:500;font-size:26px;margin:10px 0 6px}
.pt1 p{font-size:14px;color:var(--mid)}
@media(max-width:860px){.pat{grid-template-columns:1fr}}
.pill{display:flex;flex-wrap:wrap;gap:10px;margin-top:30px}
.pill span{border:1px solid var(--line);padding:9px 18px;font-size:14px;background:#fff}
.dark .pill span{background:transparent;border-color:var(--line-d)}

.closing .lead{margin-inline:auto}
.closing .eyebrow{justify-content:center}
.closing .eyebrow::after{content:"";width:44px;height:1px;background:currentColor;opacity:.7}

/* hero = 제품이 들어 있는 한 장의 사진 */
.hero .stage{inset:0;left:0;top:0;width:auto;aspect-ratio:auto;transform:none}
.hero .stage .bg{object-fit:cover;object-position:68% 55%}
.hero::after{background:linear-gradient(90deg,rgba(18,13,8,.55) 0%,rgba(18,13,8,.12) 50%,rgba(18,13,8,0) 100%)}
@media(max-width:760px){
  .hero .stage{top:auto;bottom:0;height:47%;-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 34%);mask-image:linear-gradient(180deg,transparent 0,#000 34%)}
  .hero .stage .bg{object-position:66% 58%}
  .hero::after{display:none}
  .hero .txt{padding-top:92px}
  .hero h1{font-size:clamp(32px,9.4vw,40px);margin:18px 0 18px}
  .hero .lead{margin-bottom:26px;font-size:15px}
}
@media(max-width:760px){.scrollhint{display:none}}

/* 안전장치: 스크립트가 아예 실행되지 않아도 로고 화면은 5초 뒤 사라진다 */
@keyframes introOut{to{opacity:0;visibility:hidden}}
.intro{animation:introOut .4s 5s forwards}

/* === 휴대폰 점검 후 보정 === */
body{font-variant-numeric:lining-nums;font-feature-settings:"lnum" 1}
.light-top .hd,.light-top .hd.solid{background:rgba(251,248,242,.92);backdrop-filter:blur(14px)}
.light-top .hd .logo,.light-top .hd .nav a{color:var(--brown)}
.light-top .burger i{background:var(--brown)}
.light-top .hd .buy{color:var(--gold-3);border-color:var(--gold)}
body.menu-open.light-top .hd .logo{color:#fff}
body.menu-open.light-top .burger i{background:#fff}
.phero.top{color:var(--brown)}
.phero.top .lead{color:#5a5145}
.phero.top .eyebrow{color:var(--gold-3)}
.phero.prodhero .bgw{inset:0}
@media(max-width:760px){.phero.prodhero .bgw{inset:72px 0 0 0}}
@media(max-width:860px){.feature .pic{height:112vw}.feature .pic img{object-position:50% 82%}}

/* 메뉴 이동 시 깜빡임 방지: 다음 페이지가 열리자마자 같은 막이 이미 덮여 있게 한다 */
html.pt-on::before{content:"";position:fixed;inset:0;z-index:450;background:var(--ink);animation:ptSafe .4s 4s forwards}
@keyframes ptSafe{to{opacity:0;visibility:hidden}}

/* 페이지 전환(최종): 막 없이 부드러운 페이드. 깜빡임이 생기지 않는다 */
html{background:var(--ink)}
@keyframes pageIn{from{opacity:0}to{opacity:1}}
body{animation:pageIn .55s ease-out backwards}
body.leaving{opacity:0;transition:opacity .32s ease-in}
.pt{display:none}
html.pt-on::before{display:none}
/* 첫 화면 큰 제목이 제품을 가리지 않게 */
.hero h1{font-size:clamp(32px,4.5vw,64px);line-height:1.22}
.hero .txt{max-width:min(660px,56vw)}
@media(max-width:760px){.hero .txt{max-width:none}.hero h1{font-size:clamp(32px,9.4vw,40px)}}
.hero .txt{margin-left:max(24px,calc((100vw - 1200px)/2));margin-right:0}
@media(max-width:760px){.hero .txt{margin:0 auto}}
@media(max-width:760px){
  .hero h1{font-size:clamp(27px,7.4vw,31px);margin:14px 0 14px}
  .hero .lead{margin-bottom:18px}
  .hero .stage{height:41%}
  .hero .small{margin-top:14px!important;font-size:12px}
}

/* === 가인수·검증 페이지 보강 === */
.herb-row{grid-template-columns:240px 1fr;align-items:start}
.herb-row .lat{font-family:var(--en);font-style:italic;font-size:14px;color:#8d826e;margin-top:2px}
.pts{margin-top:18px;display:grid;gap:9px}
.pts li{display:flex;gap:12px;font-size:15px;color:#cbbfa7;line-height:1.7}
.pts li::before{content:"";flex:none;width:6px;height:6px;border-radius:50%;background:var(--gold-2);margin-top:11px}
.herb-row .tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.herb-row .tags .tag{margin-top:0}
.espresso .ing-grid,.dark .ing-grid{background:var(--line-d);border-color:var(--line-d)}
.espresso .ing,.dark .ing{background:var(--espresso)}
.espresso .ing small,.dark .ing small{color:var(--gold-2)}
.espresso .ing h3,.dark .ing h3{color:#fff}
.espresso .ing p,.dark .ing p{color:#b9ad97}
.ing p{margin-top:8px;line-height:1.7}
/* 특허 서류 */
.cert{display:grid;grid-template-columns:.75fr 1.5fr;gap:clamp(24px,4vw,64px);align-items:center;padding:clamp(40px,5vw,70px) 0;border-top:1px solid var(--line)}
.cert:last-of-type{border-bottom:1px solid var(--line)}
.cert .full img{width:100%;box-shadow:0 20px 50px rgba(44,35,24,.16);display:block}
.cert .full a{display:block;position:relative}
.cert .full a::after{content:"전체 보기";position:absolute;right:12px;bottom:12px;font-size:12px;letter-spacing:.1em;background:rgba(18,13,8,.78);color:#fff;padding:6px 12px}
.cert .zoomwrap{position:relative;overflow:hidden;border:1px solid var(--line);background:#fff;box-shadow:0 26px 60px rgba(44,35,24,.16)}
.cert .zoomwrap img{width:100%;display:block}
.cert .cap{display:flex;align-items:center;gap:10px;margin-bottom:14px;font-size:13px;letter-spacing:.12em;color:var(--gold-3)}
.cert .cap svg{width:20px;height:20px;stroke:var(--gold);fill:none;stroke-width:1.6}
.cert h3{margin:6px 0 4px}
.cert .no{font-family:var(--en);font-size:clamp(26px,3vw,40px);color:var(--gold)}
.cert .meta{font-size:14px;color:var(--mid)}
.notice{margin-top:34px;padding:22px 26px;border:1px solid var(--gold);background:var(--gold-light);font-size:15px;color:var(--brown)}
@media(max-width:860px){.cert{grid-template-columns:1fr}.herb-row{grid-template-columns:104px 1fr}}
/* 사용 순서 */
.steps2{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:70px;text-align:left}
.steps2 .st .tm{font-family:var(--en);font-size:13px;letter-spacing:.3em;color:var(--gold-2);margin-bottom:6px}
@media(max-width:860px){.steps2{grid-template-columns:1fr}}
.rolegrid{display:grid;grid-template-columns:repeat(2,1fr);gap:0;margin-top:50px;border-top:1px solid var(--line)}
.role{padding:22px 8px 22px 0;border-bottom:1px solid var(--line);display:grid;grid-template-columns:150px 1fr;gap:14px}
.role b{font-size:15px;color:var(--gold-3);font-weight:600}
.role span{font-size:15px;color:var(--brown)}
.role small{display:block;color:var(--mid);font-size:13px;margin-top:2px}
@media(max-width:860px){.rolegrid{grid-template-columns:1fr}.role{grid-template-columns:110px 1fr}}

.info td small.note{display:block;margin-top:8px;font-size:13px;color:#8d826e;line-height:1.7}

.phero.top.tall{min-height:min(100svh,1000px)}
.phero.top.tall .in{padding-top:120px}
.phero.top.tall h1{font-size:clamp(32px,5vw,68px)}
.phero.top.tall .bgw img{object-position:50% 100%}

/* === 성분 모음(fam) · 역할 카드(rcard) === */
.fams{margin-top:70px;display:grid;gap:18px}
.fam{display:grid;grid-template-columns:70px 84px 1fr 1.25fr;gap:clamp(14px,2.4vw,34px);align-items:center;padding:clamp(22px,2.6vw,34px) clamp(18px,2.4vw,34px);background:#fff;border:1px solid var(--line);position:relative;overflow:hidden;transition:transform .5s var(--ease),border-color .4s,box-shadow .5s}
.fam::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:linear-gradient(var(--gold-2),var(--gold));transform:scaleY(0);transform-origin:top;transition:transform .6s var(--ease)}
.fam:hover{transform:translateX(6px);border-color:var(--gold);box-shadow:0 18px 40px rgba(44,35,24,.10)}
.fam:hover::before{transform:scaleY(1)}
.fam .fn1{font-family:var(--en);font-size:clamp(34px,4vw,54px);line-height:1;color:var(--gold-2)}
.fam .fic{width:70px;height:70px;border-radius:50%;background:linear-gradient(145deg,var(--gold-light),#fff);border:1px solid var(--line);display:grid;place-items:center}
.fam .fic svg,.rcard .ric svg{width:32px;height:32px;stroke:var(--gold-3);fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.fam h3{font-size:clamp(19px,2vw,24px);margin-bottom:6px}
.fam p{font-size:14.5px;color:var(--mid);line-height:1.7}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips span{font-size:13.5px;padding:7px 14px;border:1px solid var(--line);background:var(--paper);color:var(--brown);border-radius:999px;transition:.3s}
.fam:hover .chips span{border-color:rgba(184,146,42,.5);background:var(--gold-light)}
@media(max-width:980px){.fam{grid-template-columns:64px 1fr;grid-template-areas:"n i" "t t" "c c"}.fam .fn1{grid-area:n}.fam .fic{grid-area:i;justify-self:end}.fam .ftx{grid-area:t}.fam .chips{grid-area:c}}
.rcards{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-top:56px}
.rcard{padding:clamp(26px,3vw,40px);background:linear-gradient(160deg,#fff 0%,var(--paper) 100%);border:1px solid var(--line);position:relative;overflow:hidden;transition:transform .5s var(--ease),box-shadow .5s,border-color .4s}
.rcard:hover{transform:translateY(-8px);border-color:var(--gold);box-shadow:0 26px 54px rgba(44,35,24,.12)}
.rcard .big{position:absolute;right:18px;top:6px;font-family:var(--en);font-size:96px;line-height:1;color:rgba(184,146,42,.12);margin:0;letter-spacing:0}
.rcard .ric{width:64px;height:64px;border-radius:50%;background:var(--gold-light);display:grid;place-items:center;margin-bottom:22px}
.rcard small{font-family:var(--en);letter-spacing:.24em;font-size:12px;color:var(--gold)}
.rcard h3{margin:6px 0 10px;font-size:clamp(20px,2.2vw,26px)}
.rcard p{font-size:14.5px;color:var(--mid);margin-bottom:18px;line-height:1.75}
@media(max-width:760px){.rcards{grid-template-columns:1fr}}
/* 임상 전·후 비교 */
.cmp{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(28px,5vw,70px);align-items:center;padding:clamp(40px,5vw,70px) 0;border-top:1px solid var(--line-d)}
.cmp:last-of-type{border-bottom:1px solid var(--line-d)}
.cmp.rev .cmpimg{order:2}
.cmpimg{position:relative;aspect-ratio:1;max-width:520px;width:100%;margin-inline:auto;overflow:hidden;user-select:none;touch-action:pan-y;cursor:ew-resize;background:#000}
.cmpimg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}
.cmpimg .after{clip-path:inset(0 0 0 50%)}
.cmpimg .hd1,.cmpimg .hd2{position:absolute;top:14px;z-index:3;font-size:12px;letter-spacing:.14em;padding:5px 12px;background:rgba(18,13,8,.78);color:#fff}
.cmpimg .hd1{left:14px}.cmpimg .hd2{right:14px;background:rgba(184,146,42,.92);color:#fff}
.cmpimg .knob{position:absolute;top:0;bottom:0;left:50%;width:2px;background:#fff;z-index:4;box-shadow:0 0 14px rgba(0,0,0,.5)}
.cmpimg .knob::after{content:"⇆";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:44px;height:44px;border-radius:50%;background:#fff;color:var(--brown);display:grid;place-items:center;font-size:18px;box-shadow:0 6px 20px rgba(0,0,0,.4)}
.cmpimg input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;z-index:5;margin:0}
.cmptx .pct{font-family:var(--en);font-size:clamp(64px,8vw,110px);line-height:1}
.cmptx h3{color:#fff;margin:10px 0 6px}
.cmptx p{color:#b9ad97;font-size:15px}
.cmptx .mini{display:flex;gap:10px;margin-top:20px;flex-wrap:wrap}
.cmptx .mini figure{width:96px}
.cmptx .mini img{width:96px;height:96px;object-fit:cover;display:block}
.cmptx .mini figcaption{font-size:11.5px;color:#8d826e;margin-top:6px;text-align:center}
@media(max-width:860px){.cmp{grid-template-columns:1fr}.cmp.rev .cmpimg{order:0}}
/* 특허: 발명의 명칭 */
.cert .titlecard{margin-top:16px;padding:20px 22px;background:#fff;border:1px solid var(--gold);box-shadow:0 20px 44px rgba(44,35,24,.12)}
.cert .titlecard img{width:100%;display:block}
.cert .titlecard .lb{font-size:12px;letter-spacing:.18em;color:var(--gold-3);margin-bottom:10px}
.cert .zoomwrap{display:none}
.cert .full img{filter:none}
/* 홈 제품 이미지 잘림 수정 */
.feature .pic img{inset:0;height:100%;object-position:50% 78%}

/* 줄바꿈 정리: 제목은 균형 있게, 문단은 마지막 줄에 한두 글자만 남지 않게 */
h1,h2,h3,.statement,.quote{text-wrap:balance}
p,li,.lead,.small,td,.b,summary,.chips span{text-wrap:pretty}

.bignote{margin-top:46px;padding:clamp(26px,4vw,44px) 24px;text-align:center;border:2px solid var(--gold);background:var(--gold-light)}
.bignote b{display:block;font-family:var(--serif);font-weight:600;font-size:clamp(22px,3.6vw,40px);line-height:1.4;color:var(--brown);letter-spacing:-.02em}