/* 결 성형외과 — 첫 화면 아래 · 하위 페이지 공용
   색의 리듬(크림 → 에스프레소 → 크림 → 블러시), 큰 글씨, 스크롤에 묶인 장면들 */
:root{--cream:#ffffff;--tone:#f5f4f2;--ink:#2a211d;--mute:rgba(42,33,29,.62);--rose:#a4604c;--espresso:#171514;--blush:#f7f1ee;--line:rgba(42,33,29,.14);--serif:'Noto Serif KR',serif;--sans:'Pretendard Variable',Pretendard,sans-serif;--pad:clamp(20px,4vw,64px);--fg:var(--ink);--fgm:var(--mute);--ln:var(--line)}
body{transition:background-color .9s cubic-bezier(.3,.7,.2,1),color .9s}
body.dk{--fg:#f4f2f0;--fgm:rgba(244,242,240,.62);--ln:rgba(244,242,240,.16);background-color:var(--espresso) !important;color:#f4f2f0}
body.bl{background-color:var(--blush) !important}
.site{color:var(--fg)}
.site a{color:inherit}
.hd.dk{background:rgba(23,21,20,.86) !important;color:#f4f2f0;box-shadow:0 1px 0 rgba(244,242,240,.08) !important}
.hd.dk .cta{border-color:#f4f2f0;background:transparent;color:#f4f2f0}
.hd.dk .menu{background:transparent}

/* 글자 */
.k{font:500 12.5px var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--rose);display:flex;gap:14px;align-items:center}
.k::before{content:attr(data-n);font-family:var(--serif);letter-spacing:0;color:var(--fgm)}
.dk .k{color:#e0a894}
.xl{font-family:var(--serif);font-weight:300;font-size:clamp(34px,4.6vw,80px);line-height:1.14;letter-spacing:-.045em}
.lg{font-family:var(--serif);font-weight:300;font-size:clamp(28px,3vw,52px);line-height:1.22;letter-spacing:-.035em}
.md{font-family:var(--serif);font-weight:300;font-size:clamp(22px,1.9vw,32px);line-height:1.35;letter-spacing:-.025em}
.xl em,.lg em,.md em{font-style:normal;color:var(--rose)}
.dk .xl em,.dk .lg em,.dk .md em{color:#e0a894}
.p{font-size:clamp(16px,1.15vw,18px);line-height:1.85;color:var(--fgm);max-width:540px}

/* 단어가 아래에서 올라오며 나타남 */
.sw .w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.08em;margin-bottom:-.08em}
.sw .w>span{display:inline-block;transform:translateY(105%);transition:transform 1.1s cubic-bezier(.2,.8,.15,1)}
.sw.in .w>span{transform:none}
.rv{opacity:0;transform:translateY(28px);transition:opacity 1s cubic-bezier(.2,.7,.2,1),transform 1s cubic-bezier(.2,.7,.2,1)}
.rv.in{opacity:1;transform:none}

/* 사진 — 가림막이 걷히며 떠오름 */
.lift{position:relative;overflow:hidden;margin:0;background:#efedea}
.dk .lift{background:#24211f}
.lift img{display:block;width:100%;height:100%;object-fit:cover;transform:scale(1.18);will-change:transform}

/* 섹션 틀 */
.blk{position:relative;padding:clamp(110px,17vh,200px) var(--pad);max-width:1600px;margin:0 auto}
.blk-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;align-items:end;margin-bottom:clamp(48px,8vh,96px)}

/* ① 선언 — 스크롤에 맞춰 단어가 차오른다 */
.stm{position:relative;height:170vh}
.stm-pin{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;justify-content:center;padding:0 var(--pad);max-width:1600px;margin:0 auto}
.stm .xl .f{color:var(--fg);opacity:.14;transition:opacity .25s}
.stm .xl .f.on{opacity:1}
.stm-foot{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;margin-top:clamp(40px,7vh,80px)}

/* 옅은 회색 구간 */
body.tn{background-color:var(--tone) !important}

/* ② 흐르는 띠 */
.mq{overflow:hidden;border-top:1px solid var(--ln);border-bottom:1px solid var(--ln);padding:clamp(18px,3vh,30px) 0;white-space:nowrap}
.mq-t{display:inline-flex;gap:0;will-change:transform}
.mq-t span{font-family:var(--serif);font-weight:300;font-size:clamp(28px,3.4vw,58px);letter-spacing:-.04em;padding-right:.6em}
.mq-t span i{font-style:normal;color:transparent;-webkit-text-stroke:1px var(--fg)}
.mq-t span b{font-weight:300;color:var(--rose);padding:0 .35em}

/* 원칙 — 큰 줄 */
.rules{border-top:1px solid var(--ln)}
.rule{display:grid;grid-template-columns:90px minmax(0,1fr) minmax(0,1.1fr);gap:32px;align-items:baseline;padding:clamp(26px,4vh,40px) 0;border-bottom:1px solid var(--ln)}
.rule b{font-family:var(--serif);font-weight:300;font-size:16px;color:var(--rose)}
.rule h3{font-family:var(--serif);font-weight:400;font-size:clamp(22px,1.9vw,30px);letter-spacing:-.025em}
.rule p{font-size:16px;line-height:1.85;color:var(--fgm)}

/* ③ 과정 — 어두운 바탕, 옆으로 넘기기 */
.proc{position:relative}
.proc-pin{padding:clamp(100px,14vh,150px) 0}
.proc.pinned .proc-pin{position:sticky;top:0;height:100vh;overflow:hidden;display:flex;flex-direction:column;justify-content:center;padding:78px 0 36px}
.proc-head{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;padding:0 var(--pad);margin-bottom:clamp(28px,5vh,56px)}
.proc-bar{flex:0 0 min(28vw,380px);height:1px;background:var(--ln);margin-bottom:14px}
.proc-bar i{display:block;height:1px;background:var(--fg);transform-origin:left;transform:scaleX(0)}
.proc-track{display:flex;gap:clamp(28px,3.4vw,64px);padding:0 var(--pad);will-change:transform}
.step{flex:0 0 clamp(300px,36vw,600px);position:relative}
.step .n{position:absolute;right:-4px;top:-.58em;z-index:2;font-family:var(--serif);font-weight:300;font-size:clamp(60px,6.4vw,110px);line-height:1;letter-spacing:-.06em;color:transparent;-webkit-text-stroke:1px rgba(244,242,240,.45);pointer-events:none}
.step figure{margin:0 0 24px;aspect-ratio:4/3}
.step h3{font-family:var(--serif);font-weight:400;font-size:clamp(22px,1.8vw,28px);letter-spacing:-.03em;margin-bottom:10px}
.step p{font-size:16px;line-height:1.8;color:var(--fgm);max-width:440px}
.step{opacity:.38;transition:opacity .7s}.step.on,.proc:not(.pinned) .step{opacity:1}

/* ④ 진료 — 큰 목록 + 커서를 따라다니는 사진(수술 전 ↔ 후) */
.idx{border-top:1px solid var(--ln)}
.idx a{position:relative;display:grid;grid-template-columns:90px minmax(0,1fr) auto 60px;gap:24px;align-items:center;padding:clamp(22px,3.6vh,38px) 0;border-bottom:1px solid var(--ln);transition:color .4s}
.idx a b{font-family:var(--serif);font-weight:300;font-size:15px;color:var(--rose)}
.idx a h3{font-family:var(--serif);font-weight:300;font-size:clamp(32px,3.8vw,64px);line-height:1.1;letter-spacing:-.04em;transition:transform .6s cubic-bezier(.2,.8,.2,1),color .4s}
.idx a small{font-size:15px;color:var(--fgm);text-align:right}
.idx a .ar{justify-self:end;width:46px;height:46px;border-radius:50%;border:1px solid var(--ln);display:grid;place-items:center;font-size:18px;transition:background .4s,color .4s,transform .4s}
.idx:hover a h3{color:rgba(42,33,29,.35)}
.idx a:hover h3{color:var(--fg);transform:translateX(18px)}
.idx a:hover .ar{background:var(--ink);color:var(--cream);transform:rotate(-45deg)}
.idx .mob{display:none}
.flo{position:fixed;left:0;top:0;z-index:40;width:clamp(240px,20vw,340px);aspect-ratio:3/4;pointer-events:none;opacity:0;transform:translate(-50%,-50%) scale(.86);transition:opacity .35s,transform .5s cubic-bezier(.2,.8,.2,1);overflow:hidden;border-radius:2px;box-shadow:0 30px 60px rgba(42,33,29,.25)}
.flo.on{opacity:1;transform:translate(-50%,-50%) scale(1)}
.flo i{position:absolute;inset:0;background-size:cover;background-position:center;transition:opacity .6s}
.flo i.b{opacity:0}.flo.pre i.b{opacity:1}
.flo em{position:absolute;left:12px;top:12px;font:600 11.5px var(--sans);font-style:normal;letter-spacing:.06em;color:#fff;background:rgba(160,82,66,.88);padding:6px 10px;border-radius:999px;transition:opacity .3s}
.flo em.a{background:rgba(42,33,29,.75);opacity:0}.flo:not(.pre) em.b{opacity:0}.flo:not(.pre) em.a{opacity:1}

/* ⑤ 형태 예시 — 대표 비교(블러시 바탕) */
.cmp .tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:22px}
.cmp .tabs button{font:500 14px var(--sans);color:var(--fg);background:transparent;border:1px solid rgba(42,33,29,.22);border-radius:999px;padding:10px 20px;cursor:pointer;transition:background .25s,color .25s,border-color .25s}
.cmp .tabs button[aria-pressed="true"]{background:var(--ink);color:var(--cream);border-color:var(--ink)}
.cmpbox{position:relative;aspect-ratio:16/9;overflow:hidden;background:#efedea;--x:50%;touch-action:pan-y;user-select:none}
.cmpbox img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}
.cmpbox img.b{clip-path:inset(0 calc(100% - var(--x)) 0 0)}
.cmpbox .ln{position:absolute;top:0;bottom:0;left:var(--x);width:2px;margin-left:-1px;background:#fff;box-shadow:0 0 16px 4px rgba(255,246,230,.8);pointer-events:none}
.cmpbox .ln i{position:absolute;top:50%;left:50%;width:54px;height:54px;margin:-27px 0 0 -27px;border-radius:50%;background:rgba(255,255,255,.94);box-shadow:0 8px 24px rgba(42,33,29,.22)}
.cmpbox .ln i::before,.cmpbox .ln i::after{content:'';position:absolute;top:50%;width:8px;height:8px;margin-top:-4px;border-left:1.5px solid var(--ink);border-bottom:1.5px solid var(--ink)}
.cmpbox .ln i::before{left:14px;transform:rotate(45deg)}.cmpbox .ln i::after{right:14px;transform:rotate(-135deg)}
.cmpbox .tg{position:absolute;top:20px;font:600 12.5px var(--sans);letter-spacing:.06em;color:#fff;padding:8px 14px;border-radius:999px;pointer-events:none}
.cmpbox .tg.l{left:20px;background:rgba(160,82,66,.88)}.cmpbox .tg.r{right:20px;background:rgba(42,33,29,.74)}
.cmpbox input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0}
.cmp-foot{display:flex;justify-content:space-between;gap:24px;margin-top:16px;font-size:13px;color:var(--fgm)}
.cmp-foot .cpt{font-family:var(--serif);font-size:17px;color:var(--fg)}

/* ⑥ 대표원장 — 어두운 바탕 */
.doc{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1fr);gap:clamp(40px,7vw,140px);align-items:center}
.doc .lift{aspect-ratio:3/4}
.doc blockquote{margin:28px 0 0}
.doc .sig{margin-top:36px;display:flex;gap:18px;align-items:baseline}
.doc .sig b{font-family:var(--serif);font-weight:400;font-size:20px}
.doc .sig span{font-size:14px;color:var(--fgm)}
.dl{margin:40px 0;border-top:1px solid var(--ln)}
.dl div{display:grid;grid-template-columns:140px 1fr;gap:18px;padding:17px 0;border-bottom:1px solid var(--ln);font-size:16px}
.dl dt{color:var(--fgm)}
.lnk{display:inline-flex;gap:12px;align-items:center;font-size:15px;font-weight:600;border-bottom:1px solid currentColor;padding-bottom:5px}
.lnk span{transition:transform .3s}.lnk:hover span{transform:translateX(5px)}

/* ⑦ 공간 — 겹겹이 쌓이는 사진 */
.stk{position:relative}
.stk-card{position:sticky;top:12vh;height:76vh;margin-bottom:6vh;background:var(--tone);padding-bottom:2vh;display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,.7fr);gap:clamp(24px,3vw,48px);align-items:end;transform-origin:50% 0;will-change:transform}
.stk-card .lift{height:100%}
.stk-card .cpt{padding-bottom:8px}
.stk-card .cpt b{display:block;font-family:var(--serif);font-weight:400;font-size:clamp(24px,2vw,32px);letter-spacing:-.025em;margin-bottom:12px}
.stk-card .cpt span{font-size:16px;line-height:1.85;color:var(--fgm)}
.stk-card .cpt i{font-style:normal;font-family:var(--serif);color:var(--rose);display:block;margin-bottom:10px}

/* ⑧ 예약 */
.bk{position:relative;min-height:100vh;display:grid;align-items:end;overflow:hidden;color:#fff}
.bk>.lift{position:absolute;inset:0;background:#24211f}
.bk::after{content:'';position:absolute;inset:0;z-index:1;background:linear-gradient(to top,rgba(23,21,20,.84),rgba(23,21,20,.3) 58%,rgba(23,21,20,.12))}
.bk-tx{position:relative;z-index:2;padding:clamp(90px,14vh,150px) var(--pad);max-width:1600px;width:100%;margin:0 auto;display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:40px;align-items:end}
.bk .k{color:#f1cdbf}
.hours{display:grid;gap:0;border-top:1px solid rgba(255,255,255,.22)}
.hours div{display:flex;justify-content:space-between;padding:14px 0;border-bottom:1px solid rgba(255,255,255,.14);font-size:15px}
.hours dd{font-family:var(--serif);font-size:19px}
.mag{display:inline-grid;place-items:center;width:clamp(150px,13vw,190px);aspect-ratio:1;border-radius:50%;background:#fff;color:var(--ink) !important;font:600 16px var(--sans);letter-spacing:.02em;margin-top:34px;transition:background .3s;will-change:transform}
.mag:hover{background:#fff}
.bk-go{display:flex;align-items:center;gap:34px;flex-wrap:wrap}

/* 바닥 */
.fx{padding:clamp(70px,10vh,110px) var(--pad) 40px;max-width:1600px;margin:0 auto;color:var(--fg)}
.fx-top{display:grid;grid-template-columns:minmax(0,1.2fr) repeat(2,minmax(0,.6fr));gap:40px;padding-bottom:48px}
.fx-top .md{max-width:520px}
.fx-top h4{font:500 12px var(--sans);letter-spacing:.2em;color:var(--fgm);margin-bottom:16px}
.fx-top nav a,.fx-top p{display:block;font-size:15px;line-height:2}
.fx-top nav a:hover{color:var(--rose)}
.fx-mark{font-family:var(--serif);font-weight:300;font-size:clamp(88px,14vw,220px);line-height:.9;letter-spacing:-.06em;color:var(--fg);opacity:.85;margin:10px 0 30px;white-space:nowrap;overflow:hidden}
.fx-mark span{font-family:var(--sans);font-size:.1em;letter-spacing:.2em;margin-left:.4em;vertical-align:.2em;opacity:.6}
.fx-legal{border-top:1px solid var(--ln);padding-top:22px;font-size:12px;line-height:1.85;color:var(--fgm)}
.fx-legal p+p{margin-top:6px}

/* 커서 고리 — 마우스만 */
.cur{position:fixed;left:0;top:0;z-index:60;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;border:1px solid rgba(42,33,29,.6);pointer-events:none;transition:width .35s,height .35s,margin .35s,background .35s,border-color .35s,opacity .3s;display:grid;place-items:center;opacity:0}
.cur.on{opacity:1}
.cur span{font:600 11px var(--sans);letter-spacing:.06em;color:#fff;opacity:0;transition:opacity .2s;white-space:nowrap}
.cur.big{width:78px;height:78px;margin:-39px 0 0 -39px;background:rgba(42,33,29,.86);border-color:transparent}
.cur.big span{opacity:1}
body.dk .cur{border-color:rgba(244,242,240,.7)}

/* 페이지 넘김 막 */
.veil{position:fixed;inset:0;z-index:90;background:var(--cream);pointer-events:none;transform:translateY(0);transition:transform .8s cubic-bezier(.7,0,.2,1)}
.veil.up{transform:translateY(-100%)}
.veil.down{transform:translateY(0);transition-duration:.6s}
.veil.below{transform:translateY(100%);transition:none}
.veil b{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-family:var(--serif);font-weight:300;font-size:64px;color:var(--ink)}

@media (max-width:900px){
  .blk-head,.doc,.bk-tx,.fx-top{grid-template-columns:1fr}
  .stm{height:auto}.stm-pin{position:static;height:auto;padding:110px var(--pad) 60px}.stm .xl .f{opacity:1}
  .stm-foot{flex-direction:column;align-items:flex-start}
  .rule{grid-template-columns:1fr;gap:8px}
  .proc-head{flex-direction:column;align-items:flex-start}.proc-bar{display:none}
  .proc-track{flex-direction:column}.step{flex:none;opacity:1}.step .n{font-size:84px}
  .idx a{grid-template-columns:50px 1fr 46px}.idx a small{display:none}
  .idx .mob{display:block;grid-column:1/-1;aspect-ratio:16/10;margin-top:14px}
  .idx:hover a h3{color:inherit}
  .cmpbox{aspect-ratio:4/5}.cmp-foot{flex-direction:column;gap:6px}
  .stk-card{position:relative;top:auto;height:auto;grid-template-columns:1fr;margin-bottom:48px}.stk-card .lift{aspect-ratio:4/3;height:auto}
  .fx-mark{font-size:26vw}
}
@media (prefers-reduced-motion: reduce){
  .rv,.sw .w>span{opacity:1;transform:none;transition:none}.lift img{transform:none}
  .stm .xl .f{opacity:1}
}