/* 유월외과의원 ver02 메인 시안 1·2 — 반응형 스타일 (2026-10-15)
   build_responsive.py 가 final/assets/site.css 로 복사한다. 수치는 Figma 보드(PC 1920 · 모바일 360)에서 잰 값.
   폭 구간: 모바일 < 768 · 태블릿 768~1199 · 데스크톱 ≥ 1200 (내용 폭 1440, 디자인과 같음)
   사진 원칙: 모든 사진 칸은 디자인의 비율(aspect-ratio)과 초점(object/background-position)을 그대로 지킨다 —
              폭이 바뀌어도 칸이 함께 줄어들 뿐, 화면 끝에 걸려 잘리는 사진은 없다. */

@font-face{font-family:"Pretendard Variable";src:url(fonts/PretendardVariable.subset.44a9dc08.woff2) format("woff2");font-weight:45 920;font-style:normal;font-display:swap}
@font-face{font-family:"Noto Serif KR";src:url(fonts/NotoSerifKR-Variable.0f7ac27e.woff2) format("woff2");font-weight:200 900;font-style:normal;font-display:swap}
@font-face{font-family:"Cormorant";src:url(fonts/CormorantGaramond-Variable.eafcc9b7.woff2) format("woff2");font-weight:300 700;font-style:normal;font-display:swap}

:root{
  --green:#316a00;--green-dk:#264809;--lime:#abc562;--ink:#222;--ink7:rgba(34,34,34,.7);--ink5:rgba(34,34,34,.5);--ink3:rgba(34,34,34,.3);
  --mint:#f1f8e7;--chip:#c4d1b8;--line:#d0d4c4;
  --sans:"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Malgun Gothic",sans-serif;
  --serif:"Noto Serif KR","Noto Serif CJK KR","Nanum Myeongjo",serif;
  --deco:"Cormorant","Cormorant Garamond",serif;
  --pad:20px;--hh:60px;--sec:60px;
}
@media (min-width:768px){:root{--pad:40px;--sec:100px}}
@media (min-width:1200px){:root{--hh:88px;--sec:150px}}

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:#fff;color:var(--ink);font-family:var(--sans);font-weight:500;letter-spacing:-.025em;
  word-break:keep-all;overflow-wrap:break-word;-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3,p,ul,figure{margin:0;padding:0}
ul{list-style:none}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
b{font-weight:700}
.w4{font-weight:400}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:fixed;left:12px;top:-60px;z-index:300;padding:10px 14px;border-radius:8px;background:var(--green);color:#fff;font-size:14px}
.skip:focus{top:12px}
:focus-visible{outline:2px solid var(--green);outline-offset:3px}
.wrap{width:min(100% - 2 * var(--pad),1440px);margin-inline:auto}
main>section,footer{scroll-margin-top:var(--hh)}
.arrow{width:13px;height:6px;flex:none}

/* 줄바꿈: d = 데스크톱에서만, m = 모바일에서만, mt = 태블릿 이하에서만 (Figma 의 PC·모바일 강제 줄바꿈) */
br.d{display:none}
@media (min-width:768px){br.m{display:none}}
@media (min-width:1200px){br.d{display:inline}br.mt{display:none}}

/* ── 공통 글자 역할 ──────────────────────────────────────────────── */
.eb{font-size:15px;font-weight:700;line-height:1.5;color:var(--green)}
.h2{margin-top:8px;font-family:var(--serif);font-size:28px;font-weight:600;line-height:1.5;letter-spacing:-.025em}
.body{font-size:14px;font-weight:500;line-height:1.6;color:var(--ink7)}
.body b{color:var(--ink)}
@media (min-width:768px){.eb{font-size:16px}.h2{font-size:34px}.body{font-size:15px}}
@media (min-width:1200px){.eb{font-size:18px}.h2{font-size:40px}.body{font-size:16px}}

.btn-line{display:inline-flex;align-items:center;gap:12px;height:41px;padding:0 17px;border-radius:25px;
  box-shadow:inset 0 0 0 1px currentColor;font-size:14px;font-weight:600;line-height:1.5;transition:background .2s}
.btn-line.w{color:#fff}.btn-line.w:hover{background:rgba(255,255,255,.12)}
.btn-line.g{color:var(--green)}.btn-line.g:hover{background:rgba(49,106,0,.08)}
@media (min-width:1200px){.btn-line{height:47px;padding:0 21px}}

/* ── 헤더 ─────────────────────────────────────────────────────────── */
.hd{position:fixed;top:0;left:0;right:0;z-index:100;height:var(--hh);background:#fff}
.hd-in{height:100%;display:flex;align-items:center}
.logo{flex:none}
.logo img{height:28px;width:auto}
.gnb,.rsv-btn{display:none}
.menu-btn{margin-left:auto;margin-right:-10px;width:44px;height:44px;display:grid;place-content:center;gap:5px;
  background:none;border:0;padding:0;cursor:pointer}
.menu-btn i{display:block;width:24px;height:2px;background:var(--ink);transition:transform .2s,opacity .2s}
.hd.open .menu-btn i:nth-child(1){transform:translateY(7px) rotate(45deg)}
.hd.open .menu-btn i:nth-child(2){opacity:0}
.hd.open .menu-btn i:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.mnav{position:absolute;top:100%;left:0;right:0;max-height:calc(100dvh - var(--hh));overflow:auto;background:#fff;
  border-top:1px solid rgba(34,34,34,.08);box-shadow:0 16px 28px rgba(0,0,0,.08);padding:4px var(--pad) 24px}
.mnav[hidden]{display:none}
.mnav a,.mnav .off{display:block;padding:15px 0;font-size:16px;font-weight:500;line-height:1.2;border-bottom:1px solid rgba(34,34,34,.08)}
.mnav .off{color:rgba(34,34,34,.45)}
.mnav .rsv{margin-top:18px;border:0;display:flex;justify-content:center;align-items:center;gap:8px;height:48px;padding:0;
  border-radius:10px;background:var(--green);color:#fff}
.mnav .rsv img{width:24px;height:24px}
.nav-dim{position:fixed;inset:var(--hh) 0 0;z-index:99;background:rgba(0,0,0,.35)}
.nav-dim[hidden]{display:none}
@media (min-width:1024px){
  .menu-btn,.mnav,.nav-dim{display:none!important}
  .gnb{display:flex;align-items:center;gap:clamp(28px,4.4vw - 14px,70px);font-size:16px;font-weight:500;line-height:1;white-space:nowrap}
  .gnb a:hover{color:var(--green)}
  .gnb .off{cursor:default}
  .v1 .gnb{margin-left:auto}
  .v2 .gnb{margin-left:clamp(32px,11.56vw,222px)}
  .rsv-btn{display:inline-flex;margin-left:auto;align-items:center;gap:8px;height:48px;padding:0 20px;border-radius:10px;
    background:var(--green);color:#fff;font-size:16px;font-weight:500;letter-spacing:-.0275em;white-space:nowrap}
  .rsv-btn img{width:24px;height:24px}
}
@media (min-width:1200px){.logo img{height:44px}}

/* ── 히어로 — 모바일 360:680 · 태블릿 4:3 · 데스크톱 16:9(헤더 밑까지, 디자인과 같음) ── */
.hero{position:relative;overflow:hidden;margin-top:var(--hh);aspect-ratio:360/680;color:#fff;touch-action:pan-y}
/* 헤더 넘김 — 사진 줄(.hero-track)만 가로로 넘어가고 글은 그대로. 사진마다 덮개 색(--ov)·초점(--pm 모바일 / --pt 태블릿 / --pd 데스크톱)이 다르다 */
.hero-track{position:absolute;inset:0;user-select:none;-webkit-user-select:none}
.hero-slide{position:absolute;inset:0;overflow:hidden;will-change:transform}
.hero-slide::after{content:"";position:absolute;inset:0;background:var(--ov,rgba(0,0,0,.5))}
.hero .hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--pm,50%) 50%;-webkit-user-drag:none}
.hero-track:not(.js) .hero-slide:not(.on){display:none}
.hero.drag{cursor:grabbing}
.hero.drag .hero-in{user-select:none;-webkit-user-select:none}
.hero-in{position:absolute;z-index:1;left:0;right:0;top:27.06%;padding:0 var(--pad);display:flex;flex-direction:column;align-items:center;text-align:center}
.hero-ctl{display:flex;align-items:center;gap:20px;height:16px}
.hero-ctl .bar{position:relative;width:160px;height:2px;border-radius:1px;background:rgba(255,255,255,.4);overflow:hidden}
.hero-ctl .bar i{position:absolute;left:0;top:0;bottom:0;width:50%;border-radius:1px;background:#fff}
/* ⏸ ▶ = 진짜 버튼. 그림 크기·간격은 디자인 그대로 두고 누르는 자리만 넓힌다(사방 10px) */
.hero-ctl button{display:inline-flex;align-items:center;justify-content:center;padding:10px;margin:-10px;border:0;background:none;color:#fff;cursor:pointer;border-radius:6px;transition:opacity .2s}
.hero-ctl button:focus-visible{outline:2px solid #fff;outline-offset:-4px}
.hero-ctl .hp{margin-left:-19px}
.hero-ctl .pz{position:relative;display:block;width:12px;height:12px}
.hero-ctl .pz::before,.hero-ctl .pz::after{content:"";position:absolute;top:0;width:2px;height:12px;background:#fff}
.hero-ctl .pz::before{left:2px}.hero-ctl .pz::after{left:8px}
.hero-ctl .pl{display:block;width:16px;height:16px}
.hero.run .hp,.hero.stop .hz{opacity:.45}            /* 지금 상태 쪽 버튼은 흐리게 — 재생 중이면 ▶, 멈춤이면 ⏸ */
.hero-eb{margin-top:32px;font-family:var(--serif);font-size:15px;font-weight:700;line-height:1.5;color:var(--lime)}
.hero-t{margin-top:8px;font-size:36px;font-weight:500;line-height:1.5;letter-spacing:-.025em}
.hero-d{margin-top:16px;font-size:14px;font-weight:400;line-height:1.6}
.hero .btn-line{margin-top:30px}
@media (min-width:768px){
  .hero{aspect-ratio:4/3}
  .hero .hero-img{object-position:var(--pt,50%) 50%}
  .hero-in{top:28%}
  .hero-eb{margin-top:44px;font-size:17px}.hero-t{margin-top:10px;font-size:46px}.hero-d{margin-top:20px;font-size:15px}.hero .btn-line{margin-top:36px}
}
@media (min-width:1200px){
  .hero{margin-top:0;aspect-ratio:16/9}
  .hero .hero-img{object-position:var(--pd,50%) 50%}
  .hero-in{top:30.28%}
  .hero-ctl .bar{width:200px}
  .hero-eb{margin-top:60px;font-size:18px}.hero-t{margin-top:12px;font-size:60px}.hero-d{margin-top:24px;font-size:16px}.hero .btn-line{margin-top:40px}
}

/* ── 8가지 이유 · 시안 1 (타원 사진 + 넘김 표시) ─────────────────── */
.dz{position:relative;overflow:hidden}   /* 시안1: 「8가지 이유」+「진료 안내」를 감싸 번진 녹색 원·옆 타원을 함께 자른다 */
.why{position:relative;padding-top:var(--sec);background:linear-gradient(#f1f8e7,rgba(241,248,231,.75) 25%,rgba(241,248,231,.5) 50%,rgba(241,248,231,.25) 75%,rgba(241,248,231,0))}
.why-in{position:relative;display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:"eb" "h2" "side" "stage" "sum" "nav" "btn"}
.why .eb{grid-area:eb}.why .h2{grid-area:h2}
.why-side{grid-area:side;margin-top:40px}
.why-side h3{font-size:15px;font-weight:700;line-height:1.5}
.why-side .body{margin-top:8px;color:var(--ink)}
.why-stage{grid-area:stage;position:relative;margin-top:30px}
/* 사진 url 은 HTML 의 style(background-image)에 둔다 — 여기서 var() 로 받으면 상대경로 기준이 브라우저마다 달라진다 */
.track{position:relative;width:min(87.5%,360px);margin-inline:auto;aspect-ratio:460/580}
.slide{position:absolute;inset:0;margin:0;border-radius:9999px;overflow:hidden;background-size:cover;background-position:center;
  background-repeat:no-repeat;transform-origin:50% 50%;will-change:transform}
.slide::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,var(--dim,0));pointer-events:none}   /* 양옆 장을 더 어둡게 */
.track:not(.js) .slide:not(.on){display:none}   /* 스크립트 전에는 첫 장만 */
.slide .cap{position:absolute;inset:0;z-index:1}
.slide .num,.slide .ttl{position:absolute;left:0;right:0;text-align:center;font-family:var(--serif);line-height:1.5}
.slide .num{top:60.9%;font-size:20px;font-weight:900;color:var(--lime)}
.slide .ttl{top:71.7%;font-size:20px;font-weight:600;color:#fff}
.why-sum{grid-area:sum;margin-top:20px;text-align:center}
.why-sum .sum{font-size:20px;font-weight:700;line-height:1.5}
.why-sum .body{margin-top:8px}
/* 넘김: 끌기·밀기(site.js). 세로 스크롤은 그대로 두고 가로 움직임만 받는다 */
.why-stage{touch-action:pan-y;user-select:none;-webkit-user-select:none;cursor:grab}
.why-stage.drag{cursor:grabbing}
.why-stage:focus-visible{outline-offset:8px;border-radius:12px}
.why-sum{transition:opacity .22s ease}
.why-sum.fade{opacity:0}
.why-sum .note{margin-top:12px;font-size:12px;font-weight:500;line-height:1.6;color:var(--ink5)}
.pg{grid-area:nav;margin-top:40px;justify-self:center;display:flex;align-items:center;height:24px;
  font-family:var(--serif);font-size:16px;font-weight:600;line-height:1.5}
/* 버튼은 누르는 자리 36px — 화살표 위치는 디자인과 같게(왼쪽 여백 12, 01 까지 8, 08 뒤 20) */
.pg button{display:grid;place-items:center;flex:none;width:36px;height:36px;margin:-6px 0;padding:0;border:0;border-radius:50%;
  background:none;color:var(--ink);cursor:pointer;transition:background .15s}
@media (hover:hover){.pg button:hover{background:rgba(49,106,0,.1)}}   /* 터치 기기에선 누른 뒤 색이 남지 않게 */
.pg .prev svg{transform:scaleX(-1)}
.pg .cur{margin-left:-4px}
.pg .sl{width:5px;height:13px;margin:0 4px}
.pg .tot{color:rgba(34,34,34,.4)}
.pg .next{margin-left:8px}
.pg .auto{margin-left:6px;color:var(--ink)}
.pg .auto .pz{position:relative;width:10px;height:12px}
.pg .auto .pz::before,.pg .auto .pz::after{content:"";position:absolute;top:0;width:2px;height:12px;background:currentColor}
.pg .auto .pz::before{left:1px}.pg .auto .pz::after{left:7px}
.pg .auto .pl{display:none;width:14px;height:14px;margin-left:2px}
.pg .auto[aria-pressed="true"] .pz{display:none}.pg .auto[aria-pressed="true"] .pl{display:block}   /* 멈춘 상태면 재생 표시 */
.why .btn-line{grid-area:btn;justify-self:center;margin-top:30px}
.blob{display:none}
@media (min-width:768px){
  .why-in{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"eb eb" "h2 side" "stage stage" "sum sum" "nav nav" "btn btn";column-gap:40px}
  .why-side{margin-top:8px;align-self:end}
  .why-side h3{font-size:16px}
  .why-stage{margin-top:50px}
  .track{width:min(50%,380px)}
  .slide .num,.slide .ttl{font-size:26px}
  .why-sum{margin-top:26px}.why-sum .sum{font-size:22px}.why-sum .body{margin-top:12px}
  .pg{margin-top:52px}.why .btn-line{margin-top:34px}
}
@media (min-width:1200px){
  .why-in{grid-template-columns:minmax(0,1fr) clamp(380px,32vw,460px) minmax(0,1fr);
    grid-template-areas:"eb . ." "h2 stage side" ". sum ." ". nav ." ". btn .";column-gap:0}
  .why .h2{align-self:start}
  .why-stage{margin-top:8px}           /* 타원 위끝 = 제목 위끝(디자인) */
  .why-side{align-self:start;margin-top:253px;padding-left:clamp(30px,5vw - 26px,70px)}
  .why-side h3{font-size:18px}
  .why-side .body{margin-top:12px}
  .track{width:100%}
  .slide .num{top:59.31%;font-size:32px}.slide .ttl{top:69.66%;font-size:32px}.slide .ttl.sm{font-size:28px}   /* Frame 79: 긴 제목은 28px */
  .why-sum .note{margin-top:16px}
  .why-sum{margin-top:30px}.why-sum .sum{font-size:24px}.why-sum .body{margin-top:16px}
  .pg{margin-top:66px}.why .btn-line{margin-top:40px}
  .blob{display:block;position:absolute;z-index:1;width:658px;height:658px;border-radius:50%;background:rgba(155,211,106,.2);filter:blur(100px);pointer-events:none}
  .why-in,.dz .svc .wrap{position:relative;z-index:2}   /* 녹색 원 = 배경 그라디언트 위, 글자·카드 아래(디자인 겹침 순서) */
  .blob.b1{left:calc(50% + 447px);top:-152px}
  .blob.b2{left:calc(50% - 1126px);top:825px}
}
/* 양옆 장의 위치·크기는 site.js 가 정한다(데스크톱: 내용 폭 바깥에 걸쳐 디자인처럼 183px 아래, 모바일·태블릿: 같은 높이로 옆에) */
.slide.near{cursor:pointer}

/* ── 8가지 이유 · 시안 2 (카드 8장) ───────────────────────────────── */
.why2{background:var(--mint);padding-top:var(--sec)}
.rgrid{display:grid;gap:20px;margin-top:30px;padding-bottom:40px}
.rcard{position:relative;border-radius:10px;background:#fff;box-shadow:inset 0 0 0 1px var(--line);padding:10px 10px 20px}
.rph{position:relative;aspect-ratio:300/180;border-radius:10px;overflow:hidden;background-repeat:no-repeat;background-size:cover;background-position:var(--pm,50% 50%)}
.rph::after,.rbg::after{content:"";position:absolute;inset:0;background:linear-gradient(rgba(0,0,0,0),rgba(0,0,0,.125) 25%,rgba(0,0,0,.25) 50%,rgba(0,0,0,.376) 75%,rgba(0,0,0,.5))}
.rbg{display:none}
.rcard{isolation:isolate}
.rt{position:absolute;z-index:2;left:20px;right:20px;bottom:20px;display:flex;gap:12px;align-items:flex-start;
  font-family:var(--serif);font-size:20px;line-height:1.5;color:#fff}
.rt .num{flex:none;font-weight:700;color:var(--lime)}
.rt .tt{font-weight:600}
.rtx{position:relative;z-index:2;padding:20px 10px 0}
.rsum{font-size:18px;font-weight:700;line-height:1.5}
.rtx .body{margin-top:12px}
.rtx .note{margin-top:12px;font-size:12px;font-weight:500;line-height:1.6;color:var(--ink5)}
.more-bar{display:flex;justify-content:center;background:var(--green);color:#fff}
.more-bar a{display:flex;align-items:center;gap:12px;height:60px;font-size:14px;font-weight:600}
.more-bar a::before,.more-bar a::after{content:"";width:1px;height:60px;background:#fff}
.more-bar a::before{margin-right:28px}.more-bar a::after{margin-left:28px}
@media (min-width:768px){
  .rgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin-top:40px;padding-bottom:70px}
  .rt{font-size:22px}.rsum{font-size:19px}
  .more-bar a::before{margin-right:68px}.more-bar a::after{margin-left:68px}
}
@media (min-width:1200px){
  .why2 .eb,.why2 .h2{text-align:center}
  .rgrid{gap:40px;margin-top:50px;padding-bottom:100px}
  .rcard{padding:10px 10px 40px;min-height:471px}
  .rph{aspect-ratio:680/260;background-position:var(--pd,50% 50%)}   /* 폭이 줄어도 디자인 비율 그대로 — 사진이 옆으로 더 잘리지 않는다 */
  .rt{bottom:21px;font-size:28px}
  .rtx{padding:30px 30px 0}
  .rtx>*{max-width:460px}   /* 디자인 글상자 폭 */
  .rsum{font-size:20px}
  .rtx .body,.rtx .note{margin-top:20px}
  .more-bar a::before{margin-right:68px}.more-bar a::after{margin-left:68px}
  /* 디자인의 02 카드 = 마우스를 올린 상태. 기본은 그 카드가, 올리면 그 카드가 사진으로 덮인다 */
  .rbg{display:block;position:absolute;z-index:1;inset:10px;border-radius:10px;overflow:hidden;opacity:0;transition:opacity .3s;
    background-repeat:no-repeat;background-size:cover;background-position:center}
  .rbg::after{background:rgba(0,0,0,.5)}
  .rgrid:not(:hover):not(:focus-within) .rcard.def .rbg,.rcard:hover .rbg,.rcard:focus-within .rbg{opacity:1}
  .rgrid:not(:hover):not(:focus-within) .rcard.def .rtx,.rcard:hover .rtx,.rcard:focus-within .rtx{color:#fff}
  .rgrid:not(:hover):not(:focus-within) .rcard.def .body,.rcard:hover .body,.rcard:focus-within .body{color:rgba(255,255,255,.7)}
  .rgrid:not(:hover):not(:focus-within) .rcard.def .body b,.rcard:hover .body b,.rcard:focus-within .body b,
  .rgrid:not(:hover):not(:focus-within) .rcard.def .note,.rcard:hover .note,.rcard:focus-within .note{color:#fff}
}

/* ── 진료 안내 (카드 5장) ─────────────────────────────────────────── */
.svc{padding:var(--sec) 0 30px}
.svc .lead{margin-top:12px;font-size:14px;font-weight:500;line-height:1.5}
.sgrid{display:grid;gap:20px;margin-top:30px}
.scard{position:relative;aspect-ratio:320/240;border-radius:10px;background:#fff;box-shadow:inset 0 0 0 1px var(--line);overflow:hidden}
.sbg{position:absolute;inset:10px;border-radius:10px;overflow:hidden;background-repeat:no-repeat;background-size:cover;background-position:center;transition:opacity .3s}
.sbg::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,var(--dim,.4))}
.sthumb{display:none}
.stx{position:absolute;left:30px;right:30px;bottom:30px;color:#fff;transition:color .3s}
.stx h3{font-size:20px;font-weight:700;line-height:1.5}
.stx p{margin-top:8px;font-size:14px;font-weight:500;line-height:1.6}
.stx .more{margin-top:20px;display:inline-flex;align-items:center;gap:12px;font-size:14px;font-weight:600;line-height:1.5}
@media (min-width:768px){
  .svc{padding-bottom:60px}.svc .lead{font-size:15px}
  .sgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin-top:40px}
}
@media (min-width:1200px){
  .svc{padding-bottom:100px}.svc .lead{margin-top:20px;font-size:16px}
  .sgrid{grid-template-columns:repeat(6,minmax(0,1fr));margin-top:50px}
  .scard{aspect-ratio:auto;height:260px}
  .scard:nth-child(-n+3){grid-column:span 2}
  .scard:nth-child(n+4){grid-column:span 3}
  .stx h3{font-size:24px}.stx p{font-size:16px}
  /* 디자인의 「유방검진」 카드 = 마우스를 올린 상태. 나머지는 흰 카드 + 오른쪽 위 작은 사진 */
  .sbg{opacity:0}
  .sthumb{display:block;position:absolute;top:10px;right:10px;width:100px;height:100px;border-radius:10px;object-fit:cover;transition:opacity .3s}
  .stx{color:var(--ink)}.stx p{color:var(--ink7)}.stx .more{display:none}
  .sgrid:not(:hover):not(:focus-within) .scard.def .sbg,.scard:hover .sbg,.scard:focus-within .sbg{opacity:1}
  .sgrid:not(:hover):not(:focus-within) .scard.def .sthumb,.scard:hover .sthumb,.scard:focus-within .sthumb{opacity:0}
  .sgrid:not(:hover):not(:focus-within) .scard.def .stx,.scard:hover .stx,.scard:focus-within .stx{color:#fff}
  .sgrid:not(:hover):not(:focus-within) .scard.def p,.scard:hover p,.scard:focus-within p{color:#fff}
  .sgrid:not(:hover):not(:focus-within) .scard.def .more,.scard:hover .more,.scard:focus-within .more{display:inline-flex}
}

/* 장식 배경 글자 — 화면보다 넓게 가운데 정렬(디자인처럼 양끝이 화면 밖) */
.wm{display:flex;justify-content:center;overflow:hidden;white-space:nowrap;font-family:var(--deco);font-weight:700;
  font-size:60px;line-height:1.5;letter-spacing:0;color:#f2f2f2;user-select:none;pointer-events:none}
.wm.dk{color:rgba(255,255,255,.1)}
@media (min-width:768px){.wm{font-size:96px}}
@media (min-width:1200px){.wm{font-size:140px}}

/* ── 원장 소개 ───────────────────────────────────────────────────── */
.doc{position:relative;overflow:hidden;color:#fff;padding:var(--sec) 0}
.doc-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.doc::before{content:"";position:absolute;inset:0;z-index:1;background:rgba(0,0,0,.2)}
.doc-in{position:relative;z-index:2;display:grid;gap:30px}
.doc .eb{color:var(--lime)}
.doc .body{margin-top:20px;color:#fff}
.doc .btn-line{margin-top:40px}
.doc-fig{width:min(100%,487px);margin-inline:auto}
.doc-fig img{width:100%;height:auto}
.doc-fig figcaption{margin-top:20px;text-align:center}
.doc-fig .en{display:block;font-family:var(--deco);font-size:24px;font-weight:700;line-height:1.5;letter-spacing:0}
.doc-fig .ko{display:block;font-size:14px;font-weight:700;line-height:1.6}
.leaf{display:none}
@media (min-width:768px){
  .doc-in{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;align-items:start}
  .doc-fig{order:-1}
  .doc-fig .en{font-size:32px}.doc-fig .ko{font-size:15px}
}
@media (min-width:1200px){
  .doc-in{gap:0}
  .doc-fig{margin:0 0 0 80px}
  .doc-tx{padding-top:80px}
  .doc .body{margin-top:40px}.doc .btn-line{margin-top:80px}
  .doc-fig .en{font-size:40px}.doc-fig .ko{margin-top:4px;font-size:16px}
  .leaf{display:block;position:absolute;z-index:1;bottom:0;right:max(0px,calc(50% - 836px));width:343px;height:auto}
}
/* 잎 = 같은 그림 두 장(.lj J · .ll 작은 잎)을 겹쳐 잘라 보인다 — 따로 움직이려고. 자르는 선은 gfx/leaf.png(686×818) 실측:
   작은 잎 x 0~230 · y 235~611, J 는 그 칸을 뺀 나머지(아래 꼬리 끝 x 209 · y 787~). 가만히 있으면 원래 한 장과 같다 */
span.leaf img{width:100%;height:auto}
span.leaf .ll{position:absolute;left:0;top:0;clip-path:inset(27% 65.5% 24% 0)}
span.leaf .lj{clip-path:polygon(34% 0,100% 0,100% 100%,30% 100%,30% 76%,34% 76%)}

/* ── 원장 소개 모션 (두 시안 공통, 2026-10-15 사용자 「이 섹션이 조금 심심해서 모션 이펙트 줘」 → 시안2 도 「마찬가지로」) ─────
   site.js 「원장 소개 모션」이 .doc 에 fx 를 붙일 때만 켜진다(움직임 줄이기 설정·스크립트 없음 = 위 정지 디자인 그대로).
   .in  = 그 묶음(섹션·글·원장·잎)이 화면에 들어옴 → 한 번 등장. 지연(transition-delay)이 곧 등장 순서다.
   .vis = 섹션이 화면 안 → 반복 움직임(햇살·궤도선·잎 흔들림) 재생, 밖이면 멈춤.
   --py = 스크롤 패럴랙스(배경 세로만), --mx·--my = 마우스 위치 -1~1(원장 사진·작은 잎이 살짝 따라온다).
   ⚠ 배경 사진은 가로로 움직이거나 키우지 않는다 — qa_resp 「화면 끝에 걸려 잘린 사진」 검사가 전폭 배경을 왼끝 0·오른끝 W 로 판정한다. */
.doc.fx .doc-bg{top:-8%;height:116%;translate:0 calc(var(--py,0px) + var(--my,0) * -6px)}
.doc.fx::before{background:rgba(0,0,0,.6);transition:background 1.8s ease .1s}            /* 어둑하다 밝아진다 = 햇살이 드는 느낌 */
.doc.fx.in::before{background:rgba(0,0,0,.2)}
.doc.fx::after{content:"";position:absolute;inset:-25%;z-index:1;pointer-events:none;opacity:0;transition:opacity 2.4s ease .4s;
  background:radial-gradient(30% 26% at 30% 40%,rgba(255,240,205,.5),transparent 70%),radial-gradient(24% 22% at 70% 66%,rgba(255,248,226,.32),transparent 70%);
  mix-blend-mode:soft-light;animation:docSun 16s ease-in-out infinite alternate}
.doc.fx.in::after{opacity:1}
@keyframes docSun{from{transform:translate3d(-7%,-3%,0) rotate(-4deg)}to{transform:translate3d(7%,4%,0) rotate(5deg)}}
/* 글 — 소제목 → 제목 한 줄씩(아래에서 밀려 올라옴) → 본문 한 줄씩 → 버튼 */
.doc.fx .doc-tx .eb,.doc.fx .doc-tx .body .ln{opacity:0;translate:0 22px;transition:opacity .8s ease var(--d),translate .9s cubic-bezier(.2,.8,.2,1) var(--d)}
.doc.fx .doc-tx .eb{--d:.15s}
.doc.fx .doc-tx .ln{display:block}
.doc.fx .doc-tx .h2 .ln{overflow:hidden;padding-bottom:.12em;margin-bottom:-.12em}
.doc.fx .doc-tx .h2 .ln>span{display:block;translate:0 110%;transition:translate 1s cubic-bezier(.2,.8,.2,1) calc(.3s + var(--i) * .14s)}
.doc.fx .doc-tx .body .ln{--d:calc(.75s + var(--i) * .12s)}
.doc.fx .doc-tx .btn-line{opacity:0;translate:0 22px;transition:background .2s,opacity .8s ease 1.2s,translate .9s cubic-bezier(.2,.8,.2,1) 1.2s}
.doc.fx .doc-tx.in .eb,.doc.fx .doc-tx.in .body .ln,.doc.fx .doc-tx.in .btn-line{opacity:1;translate:0 0}
.doc.fx .doc-tx.in .h2 .ln>span{translate:0 0}
.doc.fx .btn-line .arrow{transition:translate .3s cubic-bezier(.2,.8,.2,1)}
.doc.fx .btn-line:hover .arrow{translate:4px 0}
/* 원장 — 노란 원이 가운데서 펼쳐지고(원 = 그림 너비의 100%, 중심 50% 56.9%, 반지름 = clip 기준의 46.1%) 이어서 머리가 원 밖으로 올라온다 */
.doc.fx .doc-fig{position:relative;isolation:isolate;translate:calc(var(--mx,0) * -12px) calc(var(--my,0) * -8px)}
.doc.fx .doc-fig img{clip-path:circle(0 at 50% 56.9%)}
.doc.fx .doc-fig.in img{animation:docFig 1.5s cubic-bezier(.65,0,.35,1) .1s both}
@keyframes docFig{0%{clip-path:circle(0 at 50% 56.9%);translate:0 28px}60%{clip-path:circle(46.1% at 50% 56.9%)}100%{clip-path:circle(80% at 50% 56.9%);translate:0 0}}
/* 원 둘레 궤도선 — 원보다 너비 5% 바깥, 양 끝이 흐려지는 호. 그려지듯 돌아 들어온 뒤 아주 천천히 돈다(margin-top % = 너비 기준: 원 위끝 16.1% − 5%) */
.doc.fx .doc-fig::before{content:"";position:absolute;z-index:-1;left:-5%;top:0;margin-top:11.1%;width:110%;aspect-ratio:1;border-radius:50%;
  border:1px solid rgba(255,255,255,.45);opacity:0;rotate:-140deg;transition:opacity 1.2s ease .5s,rotate 2.2s cubic-bezier(.2,.7,.2,1) .5s;
  -webkit-mask:conic-gradient(transparent 0 6%,#000 38% 72%,transparent 96%);mask:conic-gradient(transparent 0 6%,#000 38% 72%,transparent 96%)}
.doc.fx .doc-fig.in::before{opacity:1;rotate:0deg;animation:docOrbit 48s linear 2.7s infinite}
@keyframes docOrbit{to{transform:rotate(360deg)}}
/* 영문 서명은 왼쪽부터 써지듯, 한글 직함은 뒤따라 */
.doc.fx .doc-fig .en{clip-path:inset(-20% 100% -30% 0);transition:clip-path 1.3s cubic-bezier(.65,0,.35,1) 1.1s}
.doc.fx .doc-fig.in .en{clip-path:inset(-20% -5% -30% -5%)}
.doc.fx .doc-fig .ko{opacity:0;translate:0 10px;transition:opacity .8s ease 1.7s,translate .8s cubic-bezier(.2,.8,.2,1) 1.7s}
.doc.fx .doc-fig.in .ko{opacity:1;translate:0 0}
/* 잎 — J 가 아래에서 올라오고 작은 잎이 줄기 끝(19.4% 74.7%)에서 돋은 뒤 바람에 흔들린다. J 는 화면 끝·섹션 아래끝에 붙어 있어 마우스로 움직이지 않는다 */
.doc.fx .leaf .lj{opacity:0;translate:0 45%;transition:opacity 1s ease .3s,translate 1.6s cubic-bezier(.2,.8,.2,1) .3s}
.doc.fx .leaf.in .lj{opacity:1;translate:0 0}
.doc.fx .leaf .ll{transform-origin:19.4% 74.7%;scale:0;translate:calc(var(--mx,0) * -10px) calc(var(--my,0) * -8px);transition:scale 1.1s cubic-bezier(.34,1.56,.64,1) 1.1s}
.doc.fx .leaf.in .ll{scale:1;animation:docSway 5.5s ease-in-out 2.2s infinite}
@keyframes docSway{0%,100%{rotate:0deg}30%{rotate:-5deg}70%{rotate:3deg}}
.doc.fx:not(.vis)::after,.doc.fx:not(.vis) .doc-fig::before,.doc.fx:not(.vis) .leaf .ll{animation-play-state:paused}

/* ── 내원 전후 안내 (카드 4장) ───────────────────────────────────── */
.visit{background:var(--mint);padding:var(--sec) 0}
.vgrid{display:grid;gap:20px;margin-top:30px}
.vcard{display:flex;flex-direction:column;border-radius:10px;background:#fff;padding:20px;transition:transform .3s,box-shadow .3s}
.vic{width:40px;height:40px;background-repeat:no-repeat;background-size:577.5% 192.5%;background-position:var(--x) 50%}
.vcard h3{margin-top:12px;font-size:20px;font-weight:700;line-height:1.5}
.vcard .body{margin-top:8px}
.chip{align-self:flex-start;margin-top:20px;display:inline-flex;align-items:center;gap:12px;height:35px;padding:0 16px;
  border-radius:25px;background:var(--chip);color:var(--green-dk);font-size:14px;font-weight:600;line-height:1.5;transition:background .3s,color .3s}
@media (min-width:768px){.vgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin-top:40px}.vcard{padding:26px}}
@media (min-width:1200px){
  .vgrid{grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;margin-top:50px}
  .vcard{padding:30px;min-height:400px}
  .vic{width:60px;height:60px}
  .vcard h3{margin-top:20px;font-size:24px}
  .chip{margin-top:auto}
  /* 디자인의 「예약과 내원 준비」 = 마우스를 올린 상태(20px 올라오고 그림자, 버튼 녹색) */
  .vgrid:not(:hover):not(:focus-within) .vcard.def,.vcard:hover,.vcard:focus-within{transform:translateY(-20px);box-shadow:2px 4px 20px rgba(151,170,124,.2)}
  .vgrid:not(:hover):not(:focus-within) .vcard.def .chip,.vcard:hover .chip,.vcard:focus-within .chip{background:var(--green);color:#fff}
}

/* ── 진료 예약·문의 ─────────────────────────────────────────────── */
.contact{position:relative;background:#222;color:#fff;padding-top:var(--sec);overflow:hidden}
.ct-in{position:relative;display:grid;gap:30px}
.contact .wm{position:relative}
.contact .eb{color:var(--lime)}
.contact .body{margin-top:12px;color:rgba(255,255,255,.7)}
.rsv-list{display:grid;gap:10px}
.rsv-item{display:flex;align-items:center;justify-content:space-between;height:60px;padding:0 10px 0 20px;border-radius:10px;
  box-shadow:inset 0 0 0 1px #fff;font-size:14px;font-weight:600;line-height:1.5}
.rsv-item .lb{display:inline-flex;align-items:center;gap:12px}
.rsv-item img{width:40px;height:40px}
/* 예약 카드 반응(2026-10-15 사용자 「여기도 반응이 있었으면」, 두 시안 공통) — Figma 에 올린 상태 디자인이 없어 페이지의 다른 반응과 같은 결로:
   마우스를 올리면 테두리·글씨가 연두, 화살표가 밀리고, 아이콘이 살짝 들려 기운다. 터치는 누르는 순간 살짝 눌린다.
   (카드는 이동할 주소가 디자인에 없어 아직 링크가 아니다 — 주소가 생기면 <a> 로만 바꾸면 된다) */
.rsv-item{transition:box-shadow .3s,background-color .3s,transform .2s}
.rsv-item .lb{transition:color .3s}
.rsv-item .arrow{transition:translate .35s cubic-bezier(.2,.8,.2,1)}
.rsv-item img{transition:transform .45s cubic-bezier(.34,1.56,.64,1)}
@media (hover:hover){
  .rsv-item:hover{box-shadow:inset 0 0 0 1px var(--lime);background-color:rgba(255,255,255,.05)}
  .rsv-item:hover .lb{color:var(--lime)}
  .rsv-item:hover .arrow{translate:6px 0}
  .rsv-item:hover img{transform:translateY(-3px) rotate(-6deg) scale(1.06)}
}
.rsv-item:active{transform:scale(.985)}
@media (prefers-reduced-motion:reduce){.rsv-item:hover .arrow{translate:none}.rsv-item:hover img,.rsv-item:active{transform:none}}
@media (min-width:1200px){
  .ct-in{grid-template-columns:minmax(0,1fr) minmax(0,683px);column-gap:40px}
  .contact .body{margin-top:20px}
  .rsv-list{gap:20px}
  .rsv-item{height:100px;padding:0 20px 0 38px}
  .rsv-item img{width:60px;height:60px}
}

/* ── 진료 예약·문의 모션 (두 시안 공통, 2026-10-15 사용자 「여기도 반응이 있었으면」 — 원장 소개 모션과 같은 방식) ─────
   site.js 「진료 예약·문의 모션」이 .contact 에 fx 를 붙일 때만 켜진다(움직임 줄이기 설정·스크립트 없음 = 정지 디자인 그대로).
   .in = 그 묶음(글·카드 줄·영문 글씨)이 화면에 들어옴 → 한 번 등장. --wx = 스크롤에 따라 큰 영문 글씨가 옆으로 흐른다.
   --sx·--sy = 마우스 위치(섹션 기준 px) — 연두빛 조명이 따라온다(.lit = 마우스가 섹션 위). */
.contact.fx::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .5s;
  background:radial-gradient(480px circle at var(--sx,50%) var(--sy,50%),rgba(171,197,98,.13),transparent 70%)}
.contact.fx.lit::before{opacity:1}
/* 글 — 소제목 → 제목 → 본문 한 줄씩 */
.contact.fx .ct-tx .eb,.contact.fx .ct-tx .body .ln{opacity:0;translate:0 22px;transition:opacity .8s ease var(--d),translate .9s cubic-bezier(.2,.8,.2,1) var(--d)}
.contact.fx .ct-tx .eb{--d:.1s}
.contact.fx .ct-tx .ln{display:block}
.contact.fx .ct-tx .h2 .ln{overflow:hidden;padding-bottom:.12em;margin-bottom:-.12em}
.contact.fx .ct-tx .h2 .ln>span{display:block;translate:0 110%;transition:translate 1s cubic-bezier(.2,.8,.2,1) calc(.25s + var(--i) * .14s)}
.contact.fx .ct-tx .body .ln{--d:calc(.6s + var(--i) * .12s)}
.contact.fx .ct-tx.in .eb,.contact.fx .ct-tx.in .body .ln{opacity:1;translate:0 0}
.contact.fx .ct-tx.in .h2 .ln>span{translate:0 0}
/* 카드 — 오른쪽(모바일은 아래)에서 차례로 들어오고, 아이콘이 이어서 톡 튀어나온다. 들어오기는 translate·scale, 마우스 반응은 transform 이라 서로 안 겹친다 */
.contact.fx .rsv-item{opacity:0;translate:0 26px;transition:box-shadow .3s,background-color .3s,transform .2s,opacity .7s ease calc(.2s + var(--i) * .13s),translate .9s cubic-bezier(.2,.8,.2,1) calc(.2s + var(--i) * .13s)}
.contact.fx .rsv-item img{scale:.4;opacity:0;transition:transform .45s cubic-bezier(.34,1.56,.64,1),opacity .4s ease calc(.55s + var(--i) * .13s),scale .6s cubic-bezier(.34,1.56,.64,1) calc(.55s + var(--i) * .13s)}
.contact.fx .rsv-list.in .rsv-item{opacity:1;translate:0 0}
.contact.fx .rsv-list.in .rsv-item img{scale:1;opacity:1}
@media (min-width:1200px){.contact.fx .rsv-item{translate:60px 0}}
/* 큰 영문 글씨 — 아래에서 천천히 떠오르고(translate), 스크롤하면 옆으로 흐른다(transform — 스크립트가 매 프레임 바꾸므로 전환 없음) */
.contact.fx .wm span{opacity:0;translate:0 30%;transform:translateX(var(--wx,0px));transition:opacity 1.6s ease .3s,translate 1.4s cubic-bezier(.2,.8,.2,1) .3s}
.contact.fx .wm.in span{opacity:1;translate:0 0}

/* ── 푸터 — 모바일·태블릿은 열 묶음을 풀어(display:contents) 디자인 순서대로 쌓는다 ─────────── */
.ft{border-top:1px solid rgba(34,34,34,.2);padding-top:39px;color:var(--ink)}
.ft-grid{display:grid;grid-template-columns:minmax(0,1fr)}
.ft .col1,.ft .col2,.ft .side{display:contents}
.ft .flogo{order:1}.ft .slogan{order:2}.ft .info{order:3}.ft .fbtns{order:4}.ft .map{order:5}.ft .hours{order:6}.ft .copy{order:7}
.ft .flogo{justify-self:start}
.ft .flogo img{height:28px;width:auto}
.ft .slogan{margin-top:20px;font-size:16px;font-weight:600;line-height:1.5;color:var(--ink3)}
.ft .info{margin-top:30px;display:flex;flex-direction:column;gap:20px}
.ft .info dl{margin:0}
.ft .info dt{font-size:14px;font-weight:700;line-height:1.5}
.ft .info dd{margin:4px 0 0;font-size:14px;font-weight:500;line-height:1.5;color:var(--ink7)}
.ft .fbtns{margin-top:30px;display:grid;grid-template-columns:1fr 1fr;gap:10px}
.ft .fbtn{display:flex;align-items:center;justify-content:center;gap:8px;height:50px;border-radius:10px;font-size:14px;font-weight:500;
  letter-spacing:-.0275em;line-height:1;box-shadow:inset 0 0 0 1px var(--green)}
.ft .fbtn img{width:24px;height:24px}
.ft .fbtn.tel{background:#fff;color:var(--green)}
.ft .fbtn.kakao{background:var(--green);color:#fff}
.ft .map{margin-top:30px;width:100%;height:auto;aspect-ratio:320/220;object-fit:cover;border-radius:10px}   /* height:auto — img 의 height 속성이 비율을 이기지 않게 */
.ft .hours{margin-top:20px;display:flex;flex-direction:column;gap:30px}
.ft .hours h3{font-size:14px;font-weight:700;line-height:1.5;color:var(--green)}
.ft .tbl{margin:12px 0 0;display:grid;grid-template-columns:max-content max-content;column-gap:50px;row-gap:8px;font-size:14px;line-height:1.5}
.ft .tbl dt{font-weight:700}
.ft .tbl dt.wide{letter-spacing:.08em}
.ft .tbl dd{margin:0;font-weight:500;color:var(--ink7)}
.ft .tbl .only{grid-column:1/-1;margin-top:4px}
.ft .pk{margin-top:12px;font-size:14px;font-weight:500;line-height:1.5;color:var(--ink7)}
.ft .copy{margin-top:30px;font-size:14px;font-weight:500;line-height:1.5;color:var(--ink7)}
.ft-bottom{margin-top:30px;border-top:1px solid rgba(34,34,34,.2)}
.ft-links{display:flex;align-items:center;gap:16px;padding:21px 0 20px;font-size:14px;font-weight:500;line-height:1.5;color:var(--ink7)}
.ft-links i{width:1px;height:16px;background:#ddd}
@media (min-width:768px) and (max-width:1199px){
  .ft-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:40px}
  .ft .flogo{grid-column:1;grid-row:1}.ft .slogan{grid-column:1;grid-row:2}.ft .info{grid-column:1;grid-row:3}
  .ft .fbtns{grid-column:1;grid-row:4}.ft .copy{grid-column:1;grid-row:5}
  .ft .map{grid-column:2;grid-row:1/4;margin-top:0;align-self:start}.ft .hours{grid-column:2;grid-row:4/6;flex-direction:row;gap:60px}
  .ft .info{flex-direction:row;flex-wrap:wrap;gap:20px 40px}
  .ft .fbtns{grid-template-columns:repeat(2,max-content)}.ft .fbtn{padding:0 21px}
  .ft .info dt,.ft .info dd,.ft .copy,.ft .pk,.ft .hours h3,.ft .tbl{font-size:15px}
}
@media (min-width:1200px){
  .ft{padding-top:60px}
  .ft-grid{grid-template-columns:minmax(0,300fr) minmax(0,600fr) minmax(0,540fr)}
  .ft .col1{display:flex;flex-direction:column;align-items:flex-start;padding-top:40px}
  .ft .col2{display:block;padding-top:40px}
  .ft .side{display:block}
  .ft .flogo img{height:44px}
  .ft .slogan{margin-top:43px;font-size:20px}
  .ft .copy{margin-top:auto;font-size:16px}
  .ft .info{margin-top:0;flex-direction:row;gap:60px}
  .ft .info dt,.ft .info dd{font-size:16px}
  .ft .info dd{margin-top:8px}
  .ft .fbtns{margin-top:40px;grid-template-columns:repeat(2,max-content);gap:20px}
  .ft .fbtn{padding:0 21px;font-size:16px}
  .ft .map{margin-top:0;aspect-ratio:540/320}
  .ft .hours{flex-direction:row;gap:120px}
  .ft .hours h3,.ft .tbl,.ft .pk{font-size:16px}
  .ft .tbl{column-gap:48px}
  .ft-bottom{margin-top:60px}
  .ft-links{padding:31px 0 30px;font-size:16px}
}

/* 시안 확인용 이동 바(실제 사이트에서는 뺀다) */
#fnav{position:fixed;left:50%;bottom:12px;transform:translateX(-50%);z-index:200;display:flex;align-items:center;gap:4px;padding:5px;
  max-width:calc(100vw - 16px);overflow-x:auto;scrollbar-width:none;background:rgba(18,18,18,.88);backdrop-filter:blur(8px);border-radius:999px;
  box-shadow:0 6px 24px rgba(0,0,0,.35);font:13px/1 var(--sans);letter-spacing:0;white-space:nowrap}
#fnav::-webkit-scrollbar{display:none}
#fnav a,#fnav button{color:#fff;padding:8px 12px;border-radius:999px;background:none;border:0;font:inherit;cursor:pointer}
#fnav a:hover,#fnav button:hover{background:rgba(255,255,255,.14)}
#fnav a.on{background:#fff;color:#111;font-weight:600}
#fnav .sep{width:1px;height:18px;background:rgba(255,255,255,.25);flex:none}
#fnav-open{position:fixed;right:12px;bottom:12px;z-index:200;display:none;padding:9px 13px;border:0;border-radius:999px;
  background:rgba(18,18,18,.88);color:#fff;font:12px/1 var(--sans);cursor:pointer}
body.fnav-off #fnav{display:none}body.fnav-off #fnav-open{display:block}
body.has-fnav{padding-bottom:64px}body.has-fnav.fnav-off{padding-bottom:0}

@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none!important}}

/* 2026-10-15 clinicsung1 /new/ — 배치안 문구·메뉴로 바꾸며 넘치지 않게 맞춘 것만(디자인은 그대로).
   ① 메뉴 글자가 늘어 1024~1439px 에서 시안2 메뉴가 [예약·문의] 버튼과 겹치지 않게 왼쪽 간격만 줄인다(1440 이상은 디자인 값 그대로).
   ② 「8가지 이유」 제목(스토리북 타이틀)이 디자인보다 길어 타원 밖으로 나가지 않게 긴 제목의 글자 크기만 줄인다. */
@media (min-width:1024px) and (max-width:1439px){.v2 .gnb{margin-left:clamp(24px,(100vw - 1300px) * .6,222px)}}
@media (min-width:1024px) and (max-width:1199px){.gnb{font-size:15px}}
@media (max-width:767px){.slide .ttl.sm{font-size:17px}.slide .ttl.xs{font-size:16px}}
@media (min-width:768px) and (max-width:1199px){.slide .ttl.sm{font-size:22px}.slide .ttl.xs{font-size:20px}}
@media (min-width:1200px){.slide .ttl.xs{font-size:25px}}
/* ③ 의료진 소개 강화 — 원장 섹션에 소제목(.eb)+본문(.body) 묶음이 더 붙어 묶음 사이 간격만 정한다(글자 모양은 디자인 그대로) */
.doc .doc-tx .body+.eb{margin-top:32px}
.doc .doc-tx .body+.eb+.body{margin-top:10px}
@media (min-width:1200px){.doc .doc-tx .body+.eb{margin-top:40px}.doc .doc-tx .body+.eb+.body{margin-top:12px}}
/* ④ 메뉴 구성(GNB 구성안 261014 표) — 1차 메뉴 아래 2차 메뉴를 붙이고, 예약·문의는 두 시안 모두 오른쪽 강조 버튼.
   디자인에 펼친 메뉴 모양이 없어 헤더와 같은 흰 바탕·글자·녹색 강조로 만든다(1차 메뉴 줄의 모양·간격은 그대로). */
.gnb .gi{position:relative;display:flex;align-items:center;height:var(--hh)}
.gnb .gi>a{display:flex;align-items:center;height:100%}
.gnb .sub{position:absolute;top:100%;left:50%;z-index:2;min-width:176px;padding:12px 0;background:#fff;border-radius:0 0 10px 10px;
  box-shadow:0 14px 28px rgba(0,0,0,.08);border-top:2px solid var(--green);translate:-50% 0;opacity:0;visibility:hidden;
  transition:opacity .2s ease,visibility 0s linear .2s}
.gnb .gi:hover .sub,.gnb .gi:focus-within .sub{opacity:1;visibility:visible;transition:opacity .2s ease}
.gnb .sub a{display:block;padding:10px 22px;font-size:15px;font-weight:500;line-height:1.4;white-space:nowrap;text-align:center}
.gnb .sub a:hover,.gnb .sub a:focus-visible{color:var(--green);background:var(--mint)}
.gnb .gi:hover>a,.gnb .gi:focus-within>a{color:var(--green)}
@media (min-width:1024px){.v1 .rsv-btn{margin-left:clamp(20px,2.4vw,48px)}}
/* 모바일 메뉴 — 2차 메뉴가 있는 항목은 눌러서 펼친다(GNB 구성안 3절) */
.mnav details{border-bottom:1px solid rgba(34,34,34,.08)}
.mnav summary{display:flex;align-items:center;justify-content:space-between;padding:15px 0;font-size:16px;font-weight:500;line-height:1.2;
  cursor:pointer;list-style:none}
.mnav summary::-webkit-details-marker{display:none}
.mnav summary::after{content:"";width:9px;height:9px;margin-right:4px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  rotate:45deg;translate:0 -3px;transition:rotate .2s}
.mnav details[open] summary{color:var(--green)}
.mnav details[open] summary::after{rotate:225deg;translate:0 2px}
.mnav .msub{padding:0 0 10px}
.mnav .msub a{padding:10px 0 10px 14px;font-size:15px;color:var(--ink7);border-bottom:0}
.mnav .msub a:hover{color:var(--green)}
/* ⑤ 헤더 — 사진마다 글이 다르다(2026-10-15 사용자 요청). 장마다 글 한 벌(.hero-copy)을 같은 자리에 겹쳐 두고 지금 장만 보인다.
   글 하나하나의 자리·크기·간격은 디자인의 .hero-eb·.hero-t·.hero-d·.btn-line 그대로 */
.hero-copies{display:grid;width:100%}
.hero-copy{grid-area:1/1;display:flex;flex-direction:column;align-items:center;opacity:0;visibility:hidden;transition:opacity .45s ease,visibility 0s linear .45s}
.hero-copy.on{opacity:1;visibility:visible;transition:opacity .6s ease .15s}
/* ⑥ 8가지 이유 펼침판(sian1b.html · 2026-10-15 사용자 「옆으로 당겨야 내용이 보이는 방식이 별로」 → 「다 펼치고 지그재그 배치」 → 「간격 더 이쁘게, 모션 이펙트」).
   8개를 모두 펼쳐 가운데 세로 선(.whyv-line)을 사이에 두고 타원과 설명 글을 줄마다 좌우로 번갈아 둔다(휴대폰: 선은 왼쪽, 타원만 좌우로 번갈아, 글은 아래).
   타원·글 모양은 위 시안1 그대로이고, 타원이 디자인보다 작아 번호·제목 글자는 타원 폭에 비례(cqw, 각 화면 폭의 디자인 비율)로 줄인다.
   모션(site.js 「8가지 이유 펼침판」이 .anim 을 붙였을 때만 — 움직임 줄이기 설정이면 없음): 화면에 들어오면(li.in) 타원이 아래에서 위로 열리고 사진이 줌아웃,
   번호·제목 → 요약 → 설명 → 비고가 차례로 올라온다. 점은 차오르는 선이 닿을 때 채워진다(.dot.on). 스크롤하면 선이 차오르고 타원 안 사진이 천천히 위아래로(패럴랙스, .ph translate) */
.whyv .why-in{grid-template-areas:"eb" "h2" "side" "tl"}
.whyv-tl{grid-area:tl;position:relative;min-width:0;margin-top:48px}
.whyv-line{position:absolute;left:7px;top:0;bottom:0;width:2px;margin-left:-1px;border-radius:2px;background:rgba(49,106,0,.13);pointer-events:none}
.whyv-line i{position:absolute;inset:0;border-radius:inherit;background:linear-gradient(var(--lime),var(--green));transform-origin:50% 0}
.whyv-list{margin:0;padding:0 0 0 32px;list-style:none}
.whyv-list li{position:relative;display:grid;row-gap:24px}
.whyv-list li+li{margin-top:72px}
.whyv-list .track{width:min(78%,270px);margin:0;container-type:inline-size}
.whyv-list li:nth-child(even) .track{justify-self:end}
.whyv-list .slide{clip-path:inset(0 round 9999px);transition:clip-path 1.1s cubic-bezier(.65,0,.35,1)}
.whyv-list .ph{position:absolute;inset:-10% 0;background-size:cover;background-position:center;background-repeat:no-repeat;
  will-change:transform;transition:scale 1.6s cubic-bezier(.2,.7,.2,1)}
.whyv-list .slide .num,.whyv-list .slide .ttl{font-size:6.35cqw}.whyv-list .slide .ttl.sm{font-size:5.4cqw}.whyv-list .slide .ttl.xs{font-size:5.08cqw}
.whyv-list .dot{position:absolute;left:-32px;top:30px;width:14px;height:14px;box-sizing:border-box;border:2px solid var(--green);border-radius:50%;
  background:var(--green);box-shadow:0 0 0 5px #f5faee,0 0 0 9px rgba(171,197,98,.3)}
.whyv-list .why-sum{grid-area:auto;margin-top:0;text-align:left}   /* 원래 .why-sum{grid-area:sum} 이 줄 안에 빈 칸을 만들지 않게 */
/* 모션 */
.whyv-list.anim .slide{clip-path:inset(100% 0 0 0 round 9999px)}
.whyv-list.anim .ph{scale:1.2}
.whyv-list.anim .cap .num,.whyv-list.anim .cap .ttl{opacity:0;translate:0 14px;transition:opacity .6s ease .55s,translate .8s cubic-bezier(.2,.7,.2,1) .55s}
.whyv-list.anim .cap .ttl{transition-delay:.68s}
.whyv-list.anim .why-sum>*{opacity:0;translate:0 22px;transition:opacity .7s ease .3s,translate .9s cubic-bezier(.2,.7,.2,1) .3s}
.whyv-list.anim .why-sum>:nth-child(2){transition-delay:.42s}.whyv-list.anim .why-sum>:nth-child(3){transition-delay:.54s}
.whyv-list.anim .dot{background:#fff;box-shadow:0 0 0 5px #f5faee;scale:.5;transition:scale .5s cubic-bezier(.3,1.6,.5,1),background-color .4s,box-shadow .5s}
.whyv-list.anim li.in .slide{clip-path:inset(0 round 9999px)}
.whyv-list.anim li.in .ph{scale:1.04}
.whyv-list.anim li.in .cap .num,.whyv-list.anim li.in .cap .ttl,.whyv-list.anim li.in .why-sum>*{opacity:1;translate:none}
.whyv-list.anim li.in .dot{scale:1}
.whyv-list.anim .dot.on{background:var(--green);box-shadow:0 0 0 5px #f5faee,0 0 0 9px rgba(171,197,98,.3)}   /* 차오르는 선이 닿으면 점이 채워진다 */
@media (hover:hover){.whyv-list.anim li.in:hover .ph{scale:1.1}}
.whyv-more{display:flex;justify-content:center}
.whyv-more .btn-line{margin-top:64px}
@media (min-width:768px){
  .whyv .why-in{grid-template-columns:minmax(0,1fr);grid-template-areas:"eb" "h2" "side" "tl"}
  .whyv .eb,.whyv .h2,.whyv .why-side{text-align:center}
  .whyv .why-side{align-self:auto;margin-top:20px;padding-left:0}
  .whyv-tl{margin-top:72px}
  .whyv-line{left:50%}
  .whyv-list{padding:0}
  .whyv-list li{grid-template-columns:minmax(0,1fr) 88px minmax(0,1fr);grid-template-areas:"fig dot tx";align-items:center;row-gap:0}
  .whyv-list li:nth-child(even){grid-template-areas:"tx dot fig"}
  .whyv-list li+li{margin-top:56px}
  .whyv-list .track{grid-area:fig;justify-self:end;width:clamp(220px,32vw,400px)}
  .whyv-list li:nth-child(even) .track{justify-self:start}
  .whyv-list .dot{position:relative;left:auto;top:auto;grid-area:dot;justify-self:center}
  .whyv-list .why-sum{grid-area:tx;justify-self:start;max-width:400px}
  .whyv-list li:nth-child(even) .why-sum{justify-self:end;text-align:right}
  .whyv-list .slide .num,.whyv-list .slide .ttl{font-size:6.84cqw}.whyv-list .slide .ttl.sm{font-size:5.79cqw}.whyv-list .slide .ttl.xs{font-size:5.26cqw}
  .whyv-more .btn-line{margin-top:80px}
}
@media (min-width:1200px){
  .whyv-tl{margin-top:96px}
  .whyv-list .track{width:clamp(220px,30vw,400px)}
  .whyv-list li{grid-template-columns:minmax(0,1fr) 128px minmax(0,1fr)}
  .whyv-list li+li{margin-top:max(-64px,calc(-32px - (100vw - 1200px) * .1333))}   /* 타원이 좌우로 번갈아 있어 줄을 겹쳐 올린다(지그재그가 촘촘하게). 1200 → -32, 1440 이상 → -64: 앞 줄 글과 다음 타원 사이 60px 이상(검사) */
  .whyv-list .slide .num,.whyv-list .slide .ttl{font-size:6.96cqw}.whyv-list .slide .ttl.sm{font-size:6.09cqw}.whyv-list .slide .ttl.xs{font-size:5.43cqw}
  .whyv-more .btn-line{margin-top:96px}
}

/* ⑦ 줄바꿈 다듬기(2026-10-16 사용자 「메인 문구 줄바꿈이 아쉬워, 가독성 있게」) — 문구는 그대로, 줄 나누는 자리만.
   · 제목·짧은 글 = text-wrap:balance(줄 길이를 고르게), 긴 본문 = text-wrap:pretty(마지막 줄에 한 단어만 남지 않게). 지원 안 하는 브라우저는 원래대로.
   · <br> 이 섞인 글은 balance 가 덩어리마다 듣지 않아서(크롬 실측) 덩어리를 블록으로 나눈다 — 8가지 이유 요약(앞 가는 글씨 .w4 / 뒤 굵은 글씨),
     진료 안내 카드 본문(<b> 앞 / 뒤). 원장 약속 본문·예약 제목은 site.js 가 <br> 마다 .ln 블록으로 나눈다(움직임 줄이기 설정이면 원래 줄바꿈).
   · .nw = 닫는 따옴표 뒤(‘안내’해)에서 줄이 갈리지 않게.
   · 휴대폰 헤더 큰 제목은 좁은 폭에서 한 단어만 넘어가지 않게 글자를 한 단계 줄인다(390 미만 32px · 360 미만 30px, 디자인은 36px). */
.why .h2,.svc .h2,.svc .lead,.scard .stx p,.vcard h3,.vcard .body,.ct-tx .h2,.doc-tx .body,.foot-info dd,.whyv .why-sum .sum{text-wrap:balance}
.why-sum .body,.why-sum .note{text-wrap:pretty}
.whyv .why-sum .sum .w4{display:block}
.vcard .body b{display:block}
.nw{white-space:nowrap}
@media (max-width:389px){.hero-t{font-size:32px}}
@media (max-width:359px){.hero-t{font-size:30px}}

/* ⑧ 헤더 「오시는 길」 장(2026-10-16 사용자 「메인화면 한 장은 선릉역 7번 출구 1분이랑 지도 이미지 넣어서 "오기 편하고, 찾기 쉬운 곳에서 여러분을 만납니다"」).
   마크업 = build_copy.py HERO_IMG·HERO_COPY 둘째 장 + hero() 의 HERO_MAP. 배경 = 지도 사진을 흑백으로 바꾸고 다른 장과 같은 초록 덮개.
   1200 이상: 글은 왼쪽, 오른쪽에 또렷한 지도 카드(핀 자리에 천천히 퍼지는 고리 + 「유월외과의원」 꼬리표). 그보다 좁으면 다른 장처럼 가운데 글(카드 없음).
   태블릿은 큰 제목을 두 줄로(높이 4:3 안에 들게 40px) */
.hero-slide.map .hero-img{filter:grayscale(1) contrast(.92) brightness(1.06)}
.hero-sw{display:inline-flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px 8px}
.hero-sw b{color:#fff;font-weight:700}
.hero-sw .sw-l{height:22px}
.hero-map{display:none}
@media (min-width:768px) and (max-width:1199px){.hero-copy.loc .hero-t{font-size:40px}}
@media (min-width:1200px){
  .hero-copy.loc{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);grid-template-areas:"eb map" "t map" "d map" "btn map";
    column-gap:clamp(40px,5vw,96px);justify-items:start;align-items:start;width:min(100%,1240px);margin:0 auto;text-align:left}
  .hero-copy.loc .hero-eb{grid-area:eb;margin-top:36px}
  .hero-copy.loc .hero-t{grid-area:t;font-size:clamp(44px,3.6vw,56px);line-height:1.38}
  .hero-copy.loc .hero-d{grid-area:d}
  .hero-copy.loc .hero-sw{justify-content:flex-start}
  .hero-copy.loc .btn-line{grid-area:btn}
  .hero-map{grid-area:map;align-self:center;position:relative;display:block;width:100%;margin:28px 0 0;aspect-ratio:1273/769;border-radius:22px;overflow:hidden;
    box-shadow:0 0 0 6px rgba(255,255,255,.92),0 30px 70px rgba(0,0,0,.35)}
  .hero-map img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 48.9%}
  .hero-map .pin{position:absolute;left:50%;top:48.9%;width:0;height:0}
  .hero-map .pin i{position:absolute;left:-28px;top:-28px;width:56px;height:56px;border-radius:50%;border:2px solid var(--green);background:rgba(171,197,98,.28);
    animation:heroPin 3s ease-out infinite}
  .hero-map .pin i+i{animation-delay:1.5s}
  .hero-map .tag{position:absolute;left:50%;top:48.9%;translate:-50% calc(-100% - 30px);padding:7px 14px;border-radius:999px;background:var(--green);color:#fff;
    font-size:14px;font-weight:700;line-height:1.2;white-space:nowrap;box-shadow:0 8px 20px rgba(0,0,0,.2)}
  .hero-map .tag::after{content:"";position:absolute;left:50%;top:100%;margin-left:-6px;border:6px solid transparent;border-top-color:var(--green)}
}
@keyframes heroPin{from{scale:.45;opacity:.95}to{scale:1.5;opacity:0}}
@media (prefers-reduced-motion:reduce){.hero-map .pin i{animation:none;opacity:.6}}
@media (min-width:1200px) and (max-width:1499px){.hero-copy.loc{padding-right:92px}}   /* 오른쪽 퀵바(76px)에 지도 카드가 가리지 않게 */

/* 2026-10-15 clinicsung1 /new/ — 우측 채널 퀵바(사용자 요청 「다양한 채널 퀵바, 우측 사이드바」). 시안에 없던 것이라 site.css 와 나눠 둔다.
   build_copy.py 가 assets/site.css 뒤에 이어 붙인다. 마크업은 build_copy.py quick().
   데스크톱(1024 이상) = 오른쪽 가운데 세로 막대 + TOP. 모바일 = 오른쪽 아래 [예약·문의] 버튼, 누르면 채널 목록이 위로 펼쳐진다.
   z-index 98 = 헤더(100)·모바일 메뉴 어둡게(99) 아래, 시안 이동 바(200) 아래. */
.qb{position:fixed;z-index:98;right:16px;bottom:16px;display:flex;flex-direction:column;align-items:flex-end;gap:10px;
  font-family:var(--sans);letter-spacing:-.02em}
.qb-list{display:none}
.qb.open .qb-list{display:flex;flex-direction:column;align-items:flex-end;gap:8px}
.qb-it{display:flex;align-items:center;gap:8px;height:44px;padding:0 18px 0 14px;border-radius:999px;background:#fff;color:var(--ink);
  font-size:14px;font-weight:500;line-height:1;white-space:nowrap;box-shadow:0 4px 16px rgba(0,0,0,.14)}
.qb-it svg{flex:none;width:22px;height:22px;color:var(--green)}
.qb-it.em{background:var(--green);color:#fff}
.qb-it.em svg{color:#fff}
span.qb-it{cursor:default}
.qb-tg{display:flex;align-items:center;gap:8px;height:52px;padding:0 22px 0 18px;border:0;border-radius:999px;background:var(--green);color:#fff;
  font:600 15px/1 var(--sans);letter-spacing:-.02em;cursor:pointer;box-shadow:0 6px 20px rgba(38,72,9,.35)}
.qb-tg svg{width:22px;height:22px}
.qb-tg .o,.qb-tg .x{display:flex;align-items:center;gap:8px}
.qb-tg .x{display:none}
.qb.open .qb-tg{background:var(--ink)}
.qb.open .qb-tg .o{display:none}.qb.open .qb-tg .x{display:flex}
.qb-top{display:none}
@media (min-width:1024px){
  .qb{right:20px;top:calc(50% + var(--hh) / 2);bottom:auto;transform:translateY(-50%);align-items:center}
  .qb-tg{display:none}
  .qb-list,.qb.open .qb-list{display:flex;flex-direction:column;align-items:stretch;gap:0;width:76px;overflow:hidden;
    border-radius:16px;background:#fff;box-shadow:0 10px 30px rgba(0,0,0,.1)}
  .qb-it{flex-direction:column;justify-content:center;gap:7px;height:auto;padding:14px 4px 13px;border-radius:0;box-shadow:none;
    font-size:12px;line-height:1.2;text-align:center}
  .qb-it+.qb-it{border-top:1px solid rgba(34,34,34,.08)}
  .qb-it svg{width:24px;height:24px}
  .qb-top{display:grid;place-content:center;justify-items:center;gap:2px;width:52px;height:52px;border:0;border-radius:50%;background:#fff;
    color:var(--ink);font:600 11px/1 var(--sans);letter-spacing:0;cursor:pointer;box-shadow:0 6px 20px rgba(0,0,0,.1);transition:background .2s}
  .qb-top svg{width:18px;height:18px;color:var(--green)}
}
@media (min-width:1024px) and (max-height:700px){   /* 낮은 노트북 화면에서 헤더와 겹치지 않게 */
  .qb{gap:6px}
  .qb-it{padding:9px 4px 8px;gap:5px}
  .qb-it svg{width:20px;height:20px}
  .qb-top{width:44px;height:44px}
}
/* 마우스를 올리면 진하게(2026-10-15 사용자 요청) — 흰 칸은 초록으로 채우고 글자·아이콘은 흰색, 초록 칸(예약·문의)은 더 진한 초록.
   주소를 아직 못 받은 칸(링크 없는 span)도 같은 효과. 터치 화면은 누른 뒤 색이 남지 않게 제외. */
.qb-it,.qb-it svg,.qb-top,.qb-top svg,.qb-tg{transition:background .2s,color .2s}
@media (hover:hover){
  .qb-it:hover,.qb-top:hover{background:var(--green);color:#fff}
  .qb-it+.qb-it:hover{border-top-color:rgba(255,255,255,.3)}   /* 바로 위 초록 칸(예약·문의)과 붙어 보이지 않게 */
  .qb-it:hover svg,.qb-top:hover svg{color:#fff}
  .qb-it.em:hover,.qb-tg:hover{background:var(--green-dk)}
}
/* 모바일 미리보기(mobile.html 의 iframe name="yw-pv") 안 = 실제 휴대폰처럼 스크롤 막대를 감춘다 */
.in-pv{scrollbar-width:none}.in-pv::-webkit-scrollbar{display:none}

/* PC·모바일 바 없앰(2026-10-29 사용자 「이 것 없애도 돼」) — 빌드 페이지는 바를 그리지 않는다(build_copy.py quick()).
   따로 만든 예전 시안 페이지(sian-ab-* · sian-op-pv-* · sian-req78)는 HTML 에 바가 남아 있어 여기서 감추고 그 자리 여백도 뺀다 */
#fnav,#fnav-open{display:none!important}
body.has-fnav{padding-bottom:0}

/* 2026-10-15 clinicsung1 /new/ — 푸터 새 모양(사용자 「푸터 디자인 조금 더 이쁘게」). 내용은 그대로, 배치·모양만.
   마크업 = build_copy.py footer(). 클래스를 새로 써서 site.css 의 원래 .ft 규칙은 닿지 않는다. build() 가 site.css·quick.css 뒤에 이어 붙인다.
   위 띠 = 로고·슬로건 | 문의 버튼. 본문 = [병원 정보·주차] [진료시간] [지도] — 모바일은 차례로 쌓고, 태블릿은 지도만 아래 한 줄,
   데스크톱(1200 이상)은 세 칸. 아래 띠 = 약관 링크 + 저작권. */
.foot{background:#f5f6ef;color:var(--ink);padding-top:48px}
.foot h3{font-size:14px;font-weight:700;line-height:1.5;color:var(--green)}
.foot-top{display:flex;flex-direction:column;gap:28px;padding-bottom:32px;border-bottom:1px solid rgba(34,34,34,.12)}
.foot-logo{display:inline-block}
.foot-logo img{display:block;height:32px;width:auto}
.foot-slogan{margin-top:18px;font-family:var(--serif);font-size:18px;font-weight:600;line-height:1.6;letter-spacing:-.025em}
.foot-btns{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.foot .fbtn{display:flex;align-items:center;justify-content:center;gap:8px;height:50px;padding:0 20px;border-radius:10px;
  font-size:15px;font-weight:600;line-height:1;letter-spacing:-.02em;white-space:nowrap;transition:background .2s,border-color .2s}
.foot .fbtn img{width:22px;height:22px}
.foot .fbtn.tel{background:#fff;color:var(--green);border:1px solid rgba(49,106,0,.35)}
.foot .fbtn.kakao{background:var(--green);color:#fff}
.foot-body{display:grid;gap:36px;padding:32px 0 44px}
.foot-info{margin:0;display:grid;gap:14px}
.foot-info div{display:grid;grid-template-columns:76px minmax(0,1fr);gap:12px;align-items:baseline}
.foot-info dt{font-size:14px;font-weight:600;line-height:1.5;color:var(--ink5)}
.foot-info dd{margin:0;font-size:15px;font-weight:500;line-height:1.5}
.foot-bus{margin-top:28px}
.foot-bus p{margin-top:8px;font-size:15px;font-weight:500;line-height:1.5;color:var(--ink7)}
.foot-tbl{margin:10px 0 0;display:grid;grid-template-columns:76px minmax(0,1fr);font-size:15px;line-height:1.5}
.foot-tbl dt,.foot-tbl dd{padding:9px 0;border-bottom:1px solid rgba(34,34,34,.08)}
.foot-tbl dt{font-weight:600}
.foot-tbl dd{margin:0;padding-left:12px;font-weight:500;color:var(--ink7)}
.foot-tbl .only{grid-column:1/-1;padding:10px 0 0;border-bottom:0;font-size:14px;color:var(--ink5)}
.foot-map{display:block;width:100%;height:auto;aspect-ratio:540/320;object-fit:cover;border-radius:14px;
  box-shadow:0 0 0 1px rgba(34,34,34,.06)}
.foot-bottom{border-top:1px solid rgba(34,34,34,.12);padding:20px 0 84px}   /* 84 = 모바일에서 떠 있는 [예약·문의] 버튼에 가리지 않게 */
.foot-bottom .wrap{display:flex;flex-direction:column;gap:8px}
.foot-links{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;font-size:14px;font-weight:500;line-height:1.5;color:var(--ink7)}
.foot-links i{width:1px;height:12px;background:rgba(34,34,34,.2)}
.foot-copy{font-size:13px;font-weight:500;line-height:1.5;color:var(--ink5)}
@media (hover:hover){
  .foot .fbtn.tel:hover{background:var(--mint);border-color:var(--green)}
  .foot .fbtn.kakao:hover{background:var(--green-dk)}
}
@media (min-width:768px){
  .foot{padding-top:64px}
  .foot-top{flex-direction:row;align-items:flex-end;justify-content:space-between;gap:40px;padding-bottom:40px}
  .foot-btns{display:flex;flex:none}
  .foot-body{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;padding:40px 0 56px}
  .foot-map{grid-column:1/-1;aspect-ratio:3/1}
}
@media (min-width:1024px){
  .foot-bottom{padding:24px 0 28px}
  .foot-bottom .wrap{flex-direction:row;align-items:center;justify-content:space-between;gap:24px}
}
@media (min-width:1200px){
  .foot{padding-top:80px}
  .foot h3{font-size:15px}
  .foot-logo img{height:40px}
  .foot-slogan{margin-top:22px;font-size:22px}
  .foot .fbtn{height:54px;padding:0 24px;font-size:16px}
  .foot-btns{gap:12px}
  .foot-body{grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1.25fr);column-gap:64px;padding:48px 0 72px}
  .foot-map{grid-column:auto;aspect-ratio:16/9}
  .foot-info{gap:18px}
  .foot-info div,.foot-tbl{grid-template-columns:84px minmax(0,1fr)}
  .foot-info dt{font-size:15px}
  .foot-info dd,.foot-tbl,.foot-bus p{font-size:16px}
  .foot-bus{margin-top:36px}
  .foot-links{font-size:15px}
  .foot-copy{font-size:14px}
}

/* 지하철로 오시는 길(2026-10-16 사용자 「"선릉역(2호선·분당선) 7번출구 도보 1분" 잘 살려줘」) — 마크업 = build_copy.py SUBWAY(푸터·진료시간·오시는 길이 같이 씀).
   노선 색 칩: 2호선 초록 #00a84d, 분당선 노랑 #f5a200(글자는 진한 색 — 대비). 푸터에서는 주소 바로 아래 흰 알약 */
.sw{display:inline-flex;flex-wrap:wrap;align-items:center;gap:6px 8px}
.sw-l{display:inline-flex;align-items:center;height:22px;padding:0 9px;border-radius:999px;font-size:12px;font-weight:700;line-height:1;letter-spacing:-.01em;white-space:nowrap}
.sw-l.l2{background:#00a84d;color:#fff}
.sw-l.lb{background:#f5a200;color:#3b2a00}
.sw-l.bg{background:#0068b7;color:#fff}.sw-l.bj{background:#32831f;color:#fff}   /* 버스 — 서울 간선(파랑)·지선·마을(초록), 2026-10-19 요청서 9번. 흰 글자 대비 4.5 이상(간선 5.7·지선 4.8) */
.sw-t{font-weight:600;color:var(--ink);white-space:nowrap}
.sw-t b{font-weight:800;color:var(--green)}
.foot-subway{margin-top:16px;padding:12px 16px;border-radius:12px;background:#fff;box-shadow:inset 0 0 0 1px rgba(49,106,0,.18);font-size:15px;line-height:1.5}
@media (min-width:1200px){.foot-subway{font-size:16px}}

/* 2026-10-15 clinicsung1 /new/ — 모바일 최적화(사용자 요청). 모양은 그대로 두고, 손가락으로 누르는 영역만 넓힌다.
   눈에 안 보이는 덧칸(::after)을 버튼·링크 둘레에 붙여 누르는 칸을 40~48px 이상으로. 터치 화면(pointer:coarse)에서만.
   (사진 경량화는 optimize.py — 빌드가 webp·휴대폰 히어로 크롭으로 바꾼다) */
@media (pointer:coarse){
  .logo,.stx .more,.hero-ctl button,.pg button,a.chip{position:relative}
  .logo::after,.stx .more::after,.hero-ctl button::after,.pg button::after,a.chip::after{content:"";position:absolute}
  .logo::after{inset:-16px -8px}                 /* 로고 28px → 헤더 높이만큼 */
  .stx .more::after{inset:-12px -10px}           /* 진료 카드 「자세히 보기」 21px → 45px */
  .hero-ctl button::after{inset:-4px}            /* 히어로 ⏸ ▶ 32~36px → 40~44px */
  .pg button::after{inset:-4px}                  /* 8가지 이유 ← → ⏸ 36px → 44px */
  a.chip::after{inset:-5px 0}                    /* 진료 안내 칩 35px → 45px */
}

/* 유월외과 소개 서브 페이지(유월의 이야기 · 의료진 소개 · 진료철학과 치료원칙) — 2026-10-15 사용자 「메인페이지의 스타일을 잘 분석하고 그 느낌을 잘 살리는 디자인」.
   build_copy.py 가 site.css·quick.css·footer.css·mobile.css 뒤에 이어 붙인다. 마크업 = build_sub.py, 움직임 = site.js 끝 「서브 페이지」.
   메인의 재료만 쓴다 — 색: --green·--green-dk·--lime·--mint·--ink, 글자: 명조 제목(.h2)·Pretendard 본문(.body)·Cormorant 장식(영문),
   모양: 타원 사진(460:580, 메인 「8가지 이유」), 흰 카드(메인 진료 안내), 잎 그림(로고), 어두운 사진 위 글(메인 원장 섹션), 큰 영문 띠(.wm).
   폭 구간도 메인과 같다(모바일 < 768 · 태블릿 768~1199 · 데스크톱 ≥ 1200).
   숨겼다 나타내는 상태는 html.spfx 일 때만(site.js 가 붙임) — 스크립트가 없거나 움직임 줄이기 설정이면 처음부터 다 보인다. */

/* 한자(2026-10-16 유월의 이야기·진료철학 한자를 모두 영어로 바꿔 지금 쓰는 쪽은 없음 — 다시 한자를 쓰면 이 글꼴이 채운다) — 사이트 명조(Noto Serif KR 부분 글꼴)에 한자가 없어 기기마다 다른 글꼴로 보이던 것을,
   같은 계열 Noto Serif CJK KR(OFL)에서 한자만 뽑은 원본(out/assets/fonts/NotoSerifKR-Hanja{R,B}.woff2)으로 채운다. 빌드가 쓰인 글자만 남긴다.
   같은 이름으로 두면 원래 명조 글꼴을 가려 버려서(한글까지 시스템 글꼴로 떨어짐) 따로 이름을 붙이고 명조 목록 맨 앞에 둔다 — 한자가 없는 페이지는 받지도 않는다 */
@font-face{font-family:"June Hanja Serif";src:url(fonts/NotoSerifKR-HanjaR.636a1a13.woff2) format("woff2");font-weight:200 549;font-style:normal;font-display:swap;unicode-range:U+4E00-9FFF,U+F900-FAFF}
@font-face{font-family:"June Hanja Serif";src:url(fonts/NotoSerifKR-HanjaB.304d9442.woff2) format("woff2");font-weight:550 900;font-style:normal;font-display:swap;unicode-range:U+4E00-9FFF,U+F900-FAFF}
:root{--serif:"June Hanja Serif","Noto Serif KR","Noto Serif CJK KR","Nanum Myeongjo",serif}

/* ── 머리 그림 + 페이지 탭 ─────────────────────────────────────────── */
.sp-hero{position:relative;isolation:isolate;overflow:hidden;margin-top:var(--hh);display:grid;place-items:center;min-height:320px;padding:56px 0 64px;
  color:#fff;text-align:center}
.sp-hero-bg{position:absolute;inset:-6% 0;z-index:-2;background-size:cover;background-position:center;animation:spZoom 2.6s cubic-bezier(.2,.7,.2,1) both}
.sp-hero::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(rgba(16,23,10,.42),rgba(16,23,10,.6))}
.sp-bc{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;font-size:13px;font-weight:500;color:rgba(255,255,255,.72)}
.sp-bc>*+*::before{content:"›";margin-right:8px;opacity:.6}
.sp-bc a:hover{color:#fff}
.sp-en{margin-top:28px;font-family:var(--deco);font-size:16px;font-weight:700;line-height:1;letter-spacing:.28em;color:var(--lime)}
.sp-t{margin-top:12px;font-family:var(--serif);font-size:32px;font-weight:600;line-height:1.35;letter-spacing:-.03em}
.sp-d{margin-top:14px;font-size:15px;font-weight:500;line-height:1.7;color:rgba(255,255,255,.86)}
.sp-hero-in>*{animation:spUp 1s cubic-bezier(.2,.7,.2,1) both}
.sp-hero-in>:nth-child(2){animation-delay:.15s}.sp-hero-in>:nth-child(3){animation-delay:.27s}.sp-hero-in>:nth-child(4){animation-delay:.4s}
@keyframes spZoom{from{scale:1.12}to{scale:1}}
@keyframes spUp{from{opacity:0;translate:0 26px}to{opacity:1;translate:0 0}}
.sp-tabs{position:sticky;top:var(--hh);z-index:40;border-bottom:1px solid var(--line);background:rgba(255,255,255,.96);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.sp-tabs .wrap{display:flex;gap:2px;overflow-x:auto;scrollbar-width:none}
.sp-tabs .wrap::-webkit-scrollbar{display:none}
.sp-tabs a{position:relative;flex:none;display:flex;align-items:center;height:52px;padding:0 12px;font-size:14px;font-weight:600;color:var(--ink5);
  white-space:nowrap;transition:color .2s}
.sp-tabs a:first-child{margin-left:auto}.sp-tabs a:last-child{margin-right:auto}   /* 다 들어가면 가운데, 넘치면 왼쪽부터 밀어 보기 */
.sp-tabs a::after{content:"";position:absolute;left:12px;right:12px;bottom:-1px;height:2px;background:var(--green);scale:0 1;transition:scale .4s cubic-bezier(.2,.7,.2,1)}
.sp-tabs a:hover{color:var(--ink)}
.sp-tabs a[aria-current]{color:var(--green)}.sp-tabs a[aria-current]::after{scale:1 1}
.sp main>section{scroll-margin-top:calc(var(--hh) + 52px)}
.gnb .sub a[aria-current],.mnav a[aria-current]{color:var(--green);font-weight:700}
@media (min-width:768px){
  .sp-hero{min-height:400px}.sp-en{font-size:18px}.sp-t{font-size:44px}.sp-d{font-size:17px}
  .sp-tabs .wrap{gap:28px}.sp-tabs a{height:64px;padding:0 4px;font-size:16px}.sp-tabs a::after{left:4px;right:4px}
  .sp main>section{scroll-margin-top:calc(var(--hh) + 64px)}
}
@media (min-width:1200px){.sp-hero{min-height:480px}.sp-t{font-size:56px}.sp-d{font-size:18px}}

/* ── 공통 틀 ──────────────────────────────────────────────────────── */
.sp-sec{position:relative;padding:var(--sec) 0}
.sp-sec.mint{background:linear-gradient(#f1f8e7,rgba(241,248,231,.55) 60%,rgba(241,248,231,0))}
.sp-head{max-width:820px}
.sp-head.c{margin-inline:auto;text-align:center}
.sp-head .lead{margin-top:16px}
.sp-split{display:grid;gap:44px;align-items:center}
.sp-tx{min-width:0}
.sp-copy{margin-top:24px}
.sp-copy .body+.body{margin-top:14px}
.sp-ovalbox{position:relative;min-width:0}
@media (min-width:1024px){
  .sp-split{grid-template-columns:minmax(0,1fr) minmax(0,.8fr);gap:clamp(56px,7vw,128px)}
  .sp-split.rev{grid-template-columns:minmax(0,.8fr) minmax(0,1fr)}
  .sp-split.rev>.sp-ovalbox{order:-1}
}
@media (min-width:1200px){.sp-copy{margin-top:32px}.sp-copy .body+.body{margin-top:18px}}

/* 타원 사진 — 메인 「8가지 이유」와 같은 460:580 타원. 화면에 들어오면 아래에서 위로 열리고 사진이 줌아웃, 스크롤하면 사진이 천천히(패럴랙스) */
.sp-oval{position:relative;width:min(78%,420px);aspect-ratio:460/580;margin:0 auto;overflow:hidden;clip-path:inset(0 round 9999px);
  transition:clip-path 1.2s cubic-bezier(.65,0,.35,1)}
.sp-oval .ph{position:absolute;inset:-9% 0;background-size:cover;background-position:center;background-repeat:no-repeat;will-change:transform;
  transition:scale 1.8s cubic-bezier(.2,.7,.2,1)}
.spfx .sp-oval:not(.in){clip-path:inset(100% 0 0 0 round 9999px)}
.spfx .sp-oval:not(.in) .ph{scale:1.22}
/* 차례로 나타나기 — 묶음마다 data-rv, 늦춤은 --d */
.spfx [data-rv]{opacity:0;translate:0 32px;transition:opacity .9s ease var(--d,0s),translate 1.1s cubic-bezier(.2,.7,.2,1) var(--d,0s)}
.spfx [data-rv].in{opacity:1;translate:0 0}

/* ── 유월의 이야기 ─────────────────────────────────────────────────── */
/* 유월이라는 이름 — 세 장의 카드 */
.sp-names{display:grid;gap:20px;margin-top:40px}
.sp-name{padding:32px 24px 34px;border-radius:20px;background:#fff;box-shadow:0 14px 40px rgba(38,72,9,.08);text-align:center}
.sp-name .sp-oval{width:min(52%,170px)}
.sp-name .en{display:block;margin-top:24px;font-family:var(--deco);font-size:40px;font-weight:600;line-height:1.2;letter-spacing:0;color:var(--green)}
.sp-name .rd{display:block;margin-top:8px;font-size:12px;font-weight:700;letter-spacing:.4em;color:var(--ink5)}
.sp-name h3{margin-top:16px;font-family:var(--serif);font-size:19px;font-weight:600;line-height:1.5}
.sp-name .body{margin-top:10px}
@media (min-width:768px){.sp-names{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:56px}.sp-name{padding:40px 24px 40px}
  .sp-name .en{font-size:clamp(28px,3.6vw,40px)}}   /* 세 칸이 좁은 태블릿에서 「Willow Month」가 두 줄로 꺾이지 않게 */
@media (min-width:1200px){.sp-names{gap:32px;margin-top:72px}.sp-name{padding:48px 36px 48px}.sp-name .en{font-size:48px}.sp-name h3{font-size:21px}}
/* 잎 하나 + 맺음말 */
.sp-band{padding:var(--sec) 0;background:var(--mint);text-align:center}
.sp-band-leaf{width:88px;height:auto;margin:0 auto;transform-origin:30% 90%;animation:docSway 6s ease-in-out infinite}
.sp-band h3{margin-top:24px;font-family:var(--serif);font-size:20px;font-weight:600;line-height:1.5}
.sp-band .body{margin-top:12px}
.sp-band .big{margin-top:40px;padding-top:40px;border-top:1px solid rgba(49,106,0,.18);font-family:var(--serif);font-size:22px;font-weight:600;line-height:1.6;color:var(--green)}
@media (min-width:768px){.sp-band-leaf{width:104px}.sp-band h3{font-size:24px}.sp-band .big{font-size:28px}}
@media (min-width:1200px){.sp-band-leaf{width:120px}.sp-band h3{font-size:26px}.sp-band .big{margin-top:56px;padding-top:56px;font-size:34px}}
/* 의사 조성일의 약속 — 메인 원장 섹션처럼 어두운 사진 위에, 편지는 종이 한 장 */
.sp-letter{position:relative;isolation:isolate;overflow:hidden;padding:var(--sec) 0;color:#fff}
.sp-letter-bg{position:absolute;inset:-8% 0;z-index:-2;background-size:cover;background-position:center;will-change:transform}
.sp-letter::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(rgba(20,32,10,.55),rgba(20,32,10,.72))}
.sp-letter .eb{color:var(--lime)}
.sp-paper{position:relative;max-width:880px;margin:40px auto 0;padding:36px 22px 40px;border-radius:24px;background:#fbfaf3;color:var(--ink);
  box-shadow:0 30px 80px rgba(0,0,0,.28)}
.sp-paper>p{font-size:15px;font-weight:500;line-height:1.9;color:var(--ink7)}
.sp-paper>p+p,.sp-rule+p{margin-top:18px}
.sp-paper .key{color:var(--ink);font-weight:700}
.sp-rule{margin:32px 0;padding:28px 18px;border-radius:16px;background:var(--mint);text-align:center}
.sp-rule small{display:block;font-size:13px;font-weight:700;color:var(--green)}
.sp-rule strong{display:block;margin-top:10px;font-family:var(--serif);font-size:21px;font-weight:600;line-height:1.5}
.sp-rule .hj{display:block;margin-top:6px;font-family:var(--serif);font-size:18px;letter-spacing:.32em;color:var(--ink5)}   /* 2026-10-19 한문(요청서 1번) — 크기는 바꾸기 전 영어 줄과 같게 */
.sp-rule p{margin-top:14px;font-size:15px;font-weight:700;line-height:1.7}
.sp-sign{margin-top:36px!important;text-align:right}
.sp-sign .ko{display:block;margin-top:6px;font-size:14px;font-weight:700;color:var(--ink)}
@media (min-width:768px){.sp-paper{margin-top:56px;padding:56px 64px}.sp-paper>p{font-size:16px}.sp-rule{padding:32px}.sp-rule strong{font-size:26px}}
@media (min-width:1200px){.sp-paper{margin-top:72px;padding:80px 96px}.sp-paper>p{font-size:17px}.sp-rule{margin:44px 0}.sp-rule strong{font-size:30px}}
/* 미션과 비전 */
.sp-mv{margin-top:32px;border-bottom:1px solid var(--line)}
.sp-mv-row{padding:26px 0;border-top:1px solid var(--line)}
.sp-mv-row .lb{font-family:var(--deco);font-size:36px;font-weight:600;line-height:1;letter-spacing:.14em;color:var(--lime)}
.sp-mv-row .st{margin-top:12px;font-family:var(--serif);font-size:20px;font-weight:600;line-height:1.55}
.sp-goal{margin-top:28px;padding:18px 22px;border-radius:14px;background:var(--mint);font-size:15px;line-height:1.7;color:var(--ink7)}
.sp-goal b{color:var(--green)}
@media (min-width:768px){.sp-mv-row{padding:32px 0}.sp-mv-row .lb{font-size:52px}.sp-mv-row .st{font-size:25px}.sp-goal{font-size:16px}}
@media (min-width:1200px){.sp-mv{margin-top:44px}.sp-mv-row{padding:40px 0}.sp-mv-row .lb{font-size:68px}.sp-mv-row .st{font-size:28px}.sp-goal{margin-top:36px;padding:22px 28px}}
/* 유월외과 이야기 — 타원과 글이 줄마다 좌우로 */
.sp-stories{display:grid;gap:72px;margin-top:48px}
.sp-story{display:grid;gap:28px;align-items:center}
.sp-story .sp-oval{width:min(70%,360px)}
.sp-story .no{font-size:14px;font-weight:700;color:var(--green)}
.sp-story h3{margin-top:10px;font-family:var(--serif);font-size:23px;font-weight:600;line-height:1.45}
.sp-story-tx>.body{margin-top:18px}
.sp-story .end{margin-top:22px;padding-left:16px;border-left:2px solid var(--lime);font-family:var(--serif);font-size:16px;font-weight:600;line-height:1.6;color:var(--green)}
.sp-more{margin-top:26px}
.sp-more summary{display:inline-flex;align-items:center;gap:10px;height:41px;padding:0 18px;border-radius:25px;box-shadow:inset 0 0 0 1px currentColor;
  color:var(--green);font-size:14px;font-weight:600;cursor:pointer;list-style:none;transition:background .2s}
.sp-more summary::-webkit-details-marker{display:none}
.sp-more summary::after{content:"";width:9px;height:9px;margin-top:-4px;border:solid currentColor;border-width:0 1.5px 1.5px 0;rotate:45deg;transition:rotate .3s,margin .3s}
.sp-more[open] summary::after{rotate:225deg;margin-top:4px}
.sp-more summary:hover{background:rgba(49,106,0,.08)}
.sp-more .full{margin-top:20px;padding:24px 20px;border-radius:16px;background:#fff;box-shadow:0 10px 30px rgba(38,72,9,.06)}
.sp-more .full p{font-size:15px;font-weight:500;line-height:1.85;color:var(--ink7)}
.sp-more .full p+p{margin-top:14px}
.sp-more .full .end{margin-top:20px}
.sp-more[open] .full{animation:spUp .6s cubic-bezier(.2,.7,.2,1)}
@media (min-width:768px){.sp-stories{gap:96px;margin-top:64px}.sp-story h3{font-size:28px}.sp-story .end{font-size:18px}.sp-more .full{padding:32px 36px}}
@media (min-width:1024px){
  .sp-story{grid-template-columns:minmax(0,.72fr) minmax(0,1fr);gap:clamp(56px,7vw,120px)}
  .sp-story:nth-child(even){grid-template-columns:minmax(0,1fr) minmax(0,.72fr)}
  .sp-story:nth-child(even) .sp-oval{order:2}
}
@media (min-width:1200px){.sp-stories{gap:128px;margin-top:88px}.sp-story h3{font-size:32px}.sp-story-tx>.body{margin-top:24px}.sp-story .end{font-size:20px}}

/* ── 의료진 소개 ──────────────────────────────────────────────────── */
/* 원장 섹션(.doc)은 메인 그대로. 제목이 인용문이라 메인 제목보다 한 단계 작게 */
.sp-doc .h2{font-size:22px}
@media (min-width:768px){.sp-doc .h2{font-size:27px}}
@media (min-width:1200px){.sp-doc .h2{font-size:34px;line-height:1.55}}
/* 주요 진료 분야 — 2026-10-16 사용자 「재미없어 보여, 재미있고 매력 있게」: 흰 카드 4장 → 번호 목록 + 아치 사진 틀(마크업 build_sub.py doctor_page,
   움직임 site.js 「주요 진료 분야」). 고른 줄(.on)로 흰 캡슐(.fx-hl)이 미끄러지고, 아치 안 사진은 아래에서 열리며 바뀌고(.ph.on — 앞 사진 .out 은 그 아래에 그대로),
   큰 번호가 굴러가고(--k) 뒤 테두리가 좌우로 흔들리고(--rx) 잎이 돈다. 휴대폰·태블릿(< 1024) = 줄마다 작은 아치 사진(.th), 아치 틀 없음.
   스크립트가 없으면 캡슐 없이 첫 줄·첫 사진 그대로 */
.fx-box{position:relative;margin-top:28px}
.fx-hl{position:absolute;left:0;right:0;top:0;height:0;border-radius:20px;background:#fff;box-shadow:0 18px 44px rgba(38,72,9,.12);opacity:0;pointer-events:none;
  transition:translate .65s cubic-bezier(.6,0,.2,1.12),height .65s cubic-bezier(.6,0,.2,1.12),opacity .5s}
.fx-box.js .fx-hl{opacity:1}
.fx-list{margin:0;padding:0;list-style:none}
.fx-list li+li{border-top:1px solid rgba(49,106,0,.14)}
.fx-row{position:relative;z-index:1;display:grid;grid-template-columns:60px minmax(0,1fr) 34px;grid-template-areas:"th no go" "th t go";align-items:center;
  column-gap:12px;padding:14px 12px}
.fx-row .th{grid-area:th;width:100%;aspect-ratio:3/4;border-radius:50% 50% 12px 12px/37.5% 37.5% 12px 12px;background-size:cover;background-position:center;
  transition:scale .6s cubic-bezier(.34,1.56,.64,1)}
.fx-row .no{grid-area:no;align-self:end;font-family:var(--deco);font-size:18px;font-weight:700;line-height:1;color:var(--lime);font-variant-numeric:lining-nums;
  transition:color .4s,scale .5s cubic-bezier(.34,1.56,.64,1);transform-origin:0 100%}
.fx-row .t{grid-area:t;align-self:start;margin-top:6px;transition:translate .5s cubic-bezier(.2,.7,.2,1)}
.fx-row strong{display:block;font-family:var(--serif);font-size:16px;font-weight:600;line-height:1.45;letter-spacing:-.02em}
.fx-row .more{display:block;margin-top:6px;font-size:12px;font-weight:600;color:var(--ink5);transition:color .4s}
.fx-row .go{grid-area:go;display:grid;place-items:center;width:100%;aspect-ratio:1;border:1px solid rgba(49,106,0,.3);border-radius:50%;color:var(--green);
  transition:background .4s,border-color .4s,color .4s}
.fx-row .go .arrow{width:14px;height:7px;transition:translate .4s cubic-bezier(.2,.8,.2,1)}
.fx-row.on .th{scale:1.06}
.fx-row.on .no{color:var(--green)}
.fx-row.on .more{color:var(--green)}
.fx-row.on .go{background:var(--green);border-color:var(--green);color:#fff}
.fx-row.on .go .arrow{translate:2px 0}
.fx-fig{display:none}
@media (min-width:768px){
  .fx-box{margin-top:40px}
  .fx-hl{border-radius:24px}
  .fx-row{grid-template-columns:84px minmax(0,1fr) 46px;column-gap:20px;padding:18px 22px}
  .fx-row .no{font-size:22px}
  .fx-row strong{font-size:19px}
  .fx-row .more{font-size:13px}
}
@media (min-width:1024px){
  .fx-in{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);column-gap:clamp(56px,7vw,120px);align-items:center}
  .fx-box{margin-top:48px}
  .fx-row{grid-template-columns:72px minmax(0,1fr) 54px;grid-template-areas:"no t go";padding:26px 28px}
  .fx-row .th{display:none}
  .fx-row .no{align-self:center;font-size:44px;font-weight:600}
  .fx-row .t{align-self:center;margin-top:0}
  .fx-row strong{font-size:22px}
  .fx-row.on .no{scale:1.12}
  .fx-row.on .t{translate:8px 0}
  .fx-row.on .go .arrow{translate:3px 0}
  /* 아치 사진 틀 — 4:5, 위는 반원(가로 50% = 세로 40%), 아래 모서리만 살짝 둥글게 */
  .fx-fig{position:relative;display:block;justify-self:center;width:100%;max-width:470px;margin:0;--arch:50% 50% 28px 28px/40% 40% 28px 28px}
  .fx-ring{position:absolute;inset:0;border:1px solid rgba(49,106,0,.38);border-radius:var(--arch);translate:calc(var(--rx,1) * 22px) -22px;
    transition:translate 1s cubic-bezier(.34,1.4,.64,1)}
  .fx-arch{position:relative;z-index:1;display:block;aspect-ratio:4/5;overflow:hidden;border-radius:var(--arch);background:#dfe9d0;
    box-shadow:0 30px 70px rgba(38,72,9,.18);transition:clip-path 1.3s cubic-bezier(.7,0,.2,1) .25s}
  .fx-arch .ph{position:absolute;inset:0;z-index:0;background-size:cover;background-position:center;clip-path:inset(100% 0 0 0);scale:1.18}
  .fx-arch .ph.out{z-index:1;clip-path:inset(0);scale:1}
  .fx-arch .ph.on{z-index:2;clip-path:inset(0);scale:1;transition:clip-path 1s cubic-bezier(.7,0,.2,1),scale 1.6s cubic-bezier(.2,.7,.2,1)}
  .fx-arch::after{content:"";position:absolute;inset:auto 0 0;z-index:3;height:42%;background:linear-gradient(rgba(16,23,10,0),rgba(16,23,10,.5))}
  .fx-cnt{position:absolute;left:34px;bottom:30px;z-index:4;display:flex;align-items:flex-end;gap:12px;color:#fff;font-variant-numeric:lining-nums}
  .fx-no{display:block;height:1em;overflow:hidden;font-family:var(--deco);font-size:88px;font-weight:600;line-height:1}
  .fx-no .roll{display:block;translate:0 calc(var(--k,0) * -1em);transition:translate .85s cubic-bezier(.7,0,.2,1)}
  .fx-no i{display:block;height:1em;font-style:normal}
  .fx-of{padding-bottom:12px;font-family:var(--deco);font-size:22px;font-weight:600;line-height:1;opacity:.75}
  .fx-leaf{position:absolute;left:-30px;top:14%;z-index:5;width:62px;height:auto;fill:#83a666;filter:drop-shadow(0 10px 16px rgba(38,72,9,.2));
    transform-origin:50% 96%;rotate:calc(var(--k,0) * 24deg - 18deg);animation:fxSway 5s ease-in-out infinite;
    transition:rotate .9s cubic-bezier(.34,1.56,.64,1),scale 1s cubic-bezier(.34,1.56,.64,1) 1s}
  .fx-leaf .v{fill:none;stroke:#fff;stroke-width:2.4;stroke-linecap:round;opacity:.85}
  .spfx .fx-fig:not(.in) .fx-arch{clip-path:inset(100% 0 0 0)}
  .spfx .fx-fig:not(.in) .fx-leaf{scale:0}
}
@media (min-width:1200px){
  .fx-box{margin-top:56px}
  .fx-row{grid-template-columns:84px minmax(0,1fr) 58px;padding:30px 32px}
  .fx-row .no{font-size:50px}
  .fx-row strong{font-size:25px}
  .fx-no{font-size:100px}
}
@keyframes fxSway{0%,100%{transform:rotate(-5deg)}50%{transform:rotate(5deg)}}
@media (prefers-reduced-motion:reduce){
  .fx-hl,.fx-row *,.fx-ring,.fx-arch,.fx-arch .ph,.fx-no .roll,.fx-leaf{transition:none!important}
  .fx-leaf{animation:none}
}
/* 주요 이력 */
.sp-en2{display:block;margin-top:4px;font-family:var(--deco);font-size:22px;font-weight:600;letter-spacing:0;color:var(--green)}
.sp-cv{margin-top:28px}
.sp-cv .g{padding:22px 0;border-top:1px solid var(--line)}
.sp-cv .g:last-child{border-bottom:1px solid var(--line)}
.sp-cv h3{font-size:14px;font-weight:700;color:var(--green)}
.sp-cv ul{margin-top:12px;display:grid;gap:10px}
.sp-cv li{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:15px;font-weight:500;line-height:1.6}
.sp-cv .tg{flex:none;padding:2px 10px;border-radius:999px;background:var(--green);color:#fff;font-family:var(--deco);font-size:13px;font-weight:700;letter-spacing:.04em}
.sp-cv .tg.f{background:var(--chip);color:var(--ink)}
@media (min-width:768px){.sp-en2{font-size:28px}.sp-cv .g{display:grid;grid-template-columns:120px minmax(0,1fr);gap:24px;padding:26px 0}.sp-cv ul{margin-top:0}.sp-cv li{font-size:16px}}
@media (min-width:1200px){.sp-en2{font-size:34px}.sp-cv{margin-top:40px}.sp-cv li{font-size:17px}}
/* 진료 방식 — 타원 세 개 */
.sp-trio{display:grid;gap:44px;margin-top:44px;text-align:center}
.sp-trio .sp-oval{width:min(62%,280px)}
.sp-trio h3{margin-top:22px;font-family:var(--serif);font-size:22px;font-weight:600}
.sp-trio .body{max-width:300px;margin:8px auto 0}
@media (min-width:768px){.sp-trio{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:56px}.sp-trio .sp-oval{width:min(86%,300px)}.sp-trio li:nth-child(2){margin-top:64px}}
@media (min-width:1200px){.sp-trio{gap:48px;margin-top:72px}.sp-trio h3{font-size:26px}.sp-trio li:nth-child(2){margin-top:96px}}
/* 이어 읽기 */
.sp-next{padding-top:0}
.sp-links{display:grid;gap:16px}
.sp-links a{position:relative;isolation:isolate;overflow:hidden;display:flex;align-items:flex-end;justify-content:space-between;gap:16px;min-height:200px;padding:28px;
  border-radius:24px;color:#fff}
.sp-links .ph{position:absolute;inset:0;z-index:-2;background-size:cover;background-position:center;transition:scale 1s cubic-bezier(.2,.7,.2,1)}
.sp-links a::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(rgba(16,23,10,.15),rgba(16,23,10,.7))}
.sp-links small{display:block;font-size:13px;font-weight:600;color:var(--lime)}
.sp-links strong{display:block;margin-top:6px;font-family:var(--serif);font-size:22px;font-weight:600;line-height:1.4}
.sp-links .arrow{width:26px;height:12px;margin-bottom:10px;transition:translate .3s cubic-bezier(.2,.8,.2,1)}
@media (hover:hover){.sp-links a:hover .ph{scale:1.06}.sp-links a:hover .arrow{translate:6px 0}}
@media (min-width:768px){.sp-links{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}.sp-links a{min-height:260px;padding:36px}.sp-links strong{font-size:26px}}
@media (min-width:1200px){.sp-links a{min-height:320px;padding:44px}.sp-links strong{font-size:30px}}

/* ── 진료철학과 치료원칙 ───────────────────────────────────────────── */
/* 3가지 진료 철학 — 한눈에 */
.sp-phil{display:grid;gap:16px;margin:40px 0 0;padding:0;list-style:none}
.sp-phil a{position:relative;overflow:hidden;display:block;height:100%;padding:32px 26px 34px;border-radius:24px;background:#fff;box-shadow:0 14px 40px rgba(38,72,9,.08);
  transition:translate .4s cubic-bezier(.2,.7,.2,1),box-shadow .4s}
.sp-phil .n{position:absolute;right:18px;top:-14px;font-family:var(--deco);font-size:120px;font-weight:600;line-height:1;color:rgba(171,197,98,.28)}
.sp-phil strong{position:relative;display:block;font-family:var(--serif);font-size:32px;font-weight:600;line-height:1.3}
.sp-phil .en{position:relative;display:block;margin-top:2px;font-family:var(--deco);font-size:19px;font-weight:600;line-height:1.3;letter-spacing:.03em;color:var(--ink5)}   /* 한자 → 영어(2026-10-16) */
.sp-phil em{position:relative;display:block;margin-top:20px;font-family:var(--serif);font-size:18px;font-style:normal;font-weight:600;color:var(--green)}
.sp-phil .tx{position:relative;display:block;margin-top:10px;font-size:15px;line-height:1.7;color:var(--ink7)}
@media (hover:hover){.sp-phil a:hover{translate:0 -6px;box-shadow:0 22px 50px rgba(38,72,9,.14)}}
@media (min-width:768px){.sp-phil{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:56px}.sp-phil a{padding:40px 28px}}
@media (min-width:1200px){.sp-phil{gap:32px;margin-top:72px}.sp-phil a{padding:56px 44px 52px}.sp-phil .n{font-size:168px}.sp-phil strong{font-size:40px}.sp-phil em{font-size:21px}.sp-phil .tx{font-size:16px}}
/* 철학 하나씩 */
.sp-pd .h2 .en{margin-left:8px;font-family:var(--deco);font-size:.62em;font-weight:600;letter-spacing:.03em;color:var(--ink5)}
.sp-qt{margin-top:18px;font-family:var(--serif);font-size:20px;font-weight:600;line-height:1.5;color:var(--green)}
.sp-pd .sp-tx>.body{margin-top:18px}
.sp-pull{margin:28px 0 0;padding:22px 22px 24px;border-radius:16px;background:var(--mint);font-family:var(--serif);font-size:18px;font-weight:600;line-height:1.55}
.sp-pd.mint .sp-pull{background:#fff}
.sp-pull small{display:block;margin-bottom:8px;font-family:var(--sans);font-size:13px;font-weight:700;color:var(--green)}
.sp-big{position:absolute;left:2%;top:-8%;z-index:-1;font-family:var(--deco);font-size:clamp(200px,34vw,440px);font-weight:600;line-height:1;
  color:rgba(171,197,98,.26);pointer-events:none}
.sp-split.rev .sp-big{left:auto;right:2%}
.sp-pd .sp-ovalbox{isolation:isolate}
@media (min-width:768px){.sp-qt{font-size:24px}.sp-pull{padding:26px 30px;font-size:21px}}
@media (min-width:1200px){.sp-qt{margin-top:24px;font-size:28px}.sp-pd .sp-tx>.body{margin-top:24px}.sp-pull{margin-top:36px;padding:30px 36px;font-size:24px}}
/* 5가지 치료 원칙 — 짙은 초록 */
.sp-rules{position:relative;isolation:isolate;overflow:hidden;padding:var(--sec) 0 0;background:radial-gradient(120% 80% at 85% 0%,#356b12 0%,var(--green-dk) 60%);color:#fff}
.sp-rules-leaf{position:absolute;z-index:-1;right:-60px;bottom:40px;width:280px;height:auto;opacity:.07;filter:brightness(4) saturate(0)}
.sp-rules .eb{color:var(--lime)}
.sp-rl{margin:36px 0 0;padding:0;list-style:none;border-top:1px solid rgba(255,255,255,.18)}
.sp-rl li{display:flex;align-items:baseline;gap:20px;padding:22px 0;border-bottom:1px solid rgba(255,255,255,.18)}
.sp-rl .n{flex:none;width:40px;font-family:var(--deco);font-size:28px;font-weight:600;line-height:1;color:var(--lime)}
.sp-rl p{font-family:var(--serif);font-size:19px;font-weight:600;line-height:1.5}
.sp-rules-end{margin-top:40px;font-family:var(--serif);font-size:22px;font-weight:600;line-height:1.5;color:var(--lime)}
.sp-rules .wm{margin-top:32px}
@media (min-width:768px){.sp-rl li{gap:32px;padding:28px 0}.sp-rl .n{width:56px;font-size:40px}.sp-rl p{font-size:24px}.sp-rules-end{font-size:28px}.sp-rules-leaf{width:420px}}
@media (min-width:1200px){
  .sp-rules-in{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);column-gap:96px;align-items:start}
  .sp-rules-in .sp-head{position:sticky;top:calc(var(--hh) + 120px)}
  .sp-rl{margin-top:0;grid-column:2}
  .sp-rl li{padding:34px 0}.sp-rl .n{width:72px;font-size:52px}.sp-rl p{font-size:28px}
  .sp-rules-end{grid-column:2;margin-top:48px;font-size:32px}
  .sp-rules-leaf{right:max(-80px,calc(50% - 900px));bottom:120px;width:520px}
}
@media (hover:hover){.sp-rl li{transition:padding-left .4s cubic-bezier(.2,.7,.2,1)}.sp-rl li:hover{padding-left:12px}}

@media (prefers-reduced-motion:reduce){.sp-hero-bg,.sp-hero-in>*,.sp-band-leaf,.sp-more[open] .full{animation:none}}

/* 유월의 이야기 줄바꿈 — 2026-10-16 사용자 「줄바꿈 아쉬운 부분이 많아, 가독성 있게」. 뜻 단위 묶음(&nbsp;)·문장 끝 줄바꿈(<br>)은 build_sub.py story_page·keep().
   제목·가운데 맞춘 짧은 글은 줄 길이를 고르게(balance), 긴 본문은 마지막 줄에 한 낱말만 남지 않게(pretty — 지원 안 하는 브라우저는 그냥 예전처럼) */
#naming .h2,#name h3,#name .body,.sp-band h3,.sp-band .body,.sp-band .big,.sp-rule strong,.sp-rule .hj,.sp-rule p,.sp-mv-row .st,.sp-goal,
  .sp-story h3,.sp-story .end{text-wrap:balance}
#naming .body,.sp-paper>p,.sp-story-tx>.body,.sp-more .full p:not(.end){text-wrap:pretty}
.sp-goal b{white-space:nowrap}
.sp-ln{display:block;text-wrap:balance}   /* 문장 한 덩어리 = 한 줄 묶음(build_sub.py lines()), 길면 덩어리 안에서만 고르게 꺾인다 */
@media (min-width:1200px){.sp-name .en{font-size:clamp(40px,3.4vw,48px)}}   /* 1200 근처 좁은 카드에서 「Willow Month」가 두 줄로 꺾이지 않게 */

/* 유월외과 이야기 강조 — 2026-10-16 사용자 「이러한 글들 중에 강조해야 하는 것을 bold 하거나 highlight」. 글자는 그대로(마크업 build_sub.py STORIES).
   b = 문단마다 흐름을 잡는 문장(진한 글자), b.hl = 이야기마다 가장 중요한 한 문장 — 연두 형광펜(글자 아래쪽 42%).
   형광펜은 요약 글이 화면에 들어올 때(.in), 전문은 펼칠 때 왼쪽부터 줄을 따라 그어진다. 움직임 줄이기 설정이면 처음부터 칠해져 있다 */
.sp-story-tx>.body b,.sp-more .full p b{font-weight:700;color:var(--ink)}
.sp-story b.hl{padding:0 2px;background:linear-gradient(transparent 58%,rgba(171,197,98,.55) 58%) no-repeat 0 0/100% 100%;
  transition:background-size 1.2s cubic-bezier(.6,0,.2,1) .8s}
.spfx .sp-story-tx:not(.in)>.body b.hl{background-size:0 100%}
@media (prefers-reduced-motion:no-preference){.sp-more[open] .full b.hl{animation:spHl 1.2s cubic-bezier(.6,0,.2,1) .4s both}}
@keyframes spHl{from{background-size:0 100%}to{background-size:100% 100%}}

/* 의료진 소개 보강 — 2026-10-16 사용자 「의료진 내용이 너무 없어, 스토리북·블로그·언론 리서치해서 추가」. 마크업 = build_sub.py doctor_page(CAREER·WORDS·COLUMNS).
   메인·서브의 재료만 씀: 짙은 초록 바탕(5가지 치료 원칙과 같은 그라데이션), 흰 카드(유월이라는 이름 카드와 같은 그림자), Cormorant 숫자 */
.sp-cv .tg.d{background:none;box-shadow:inset 0 0 0 1px var(--green);color:var(--green);font-variant-numeric:lining-nums}
.sp-cv li:has(>.tg){display:grid;grid-template-columns:auto minmax(0,1fr);align-items:baseline;column-gap:8px}   /* 칩 옆으로 글이 꺾이게(긴 줄도 칩 아래로 떨어지지 않게) */
.sp-cv .lk{text-decoration:underline;text-decoration-color:transparent;text-underline-offset:4px;transition:text-decoration-color .2s,color .2s}
.sp-cv .lk .ar{font-size:.85em;color:var(--green)}
@media (hover:hover){.sp-cv .lk:hover{color:var(--green);text-decoration-color:currentColor}}
/* 주요 이력 — 목록이 길어서 데스크톱에서는 사진을 화면에 붙여 둔다 */
@media (min-width:1024px){#career .sp-split{align-items:start}#career .sp-ovalbox{position:sticky;top:calc(var(--hh) + 52px + 56px)}}
/* 원장의 글에서 — 2026-10-16 사용자 「조금 더 이쁘게 완성도 있게」: 2×3 글 격자 → 왼쪽 제목·사진(데스크톱에서 붙어 있음), 오른쪽 연도 줄기 */
/* overflow 는 clip — hidden 이면 왼쪽 제목·사진(position:sticky)이 화면에 붙지 않는다 */
.sp-words{position:relative;isolation:isolate;overflow:clip;padding:var(--sec) 0;background:radial-gradient(120% 80% at 85% 0%,#356b12 0%,var(--green-dk) 60%);color:#fff}
.sp-words .eb{color:var(--lime)}
.sp-wd-note{margin-top:16px;color:rgba(255,255,255,.72);text-wrap:pretty}
.sp-wl{position:relative;margin:40px 0 0;padding:0 0 0 26px;list-style:none}
.sp-wl::before{content:"";position:absolute;left:4px;top:12px;bottom:12px;width:1px;background:linear-gradient(rgba(171,197,98,.75),rgba(171,197,98,.12))}
.sp-wl li{position:relative;padding:0 0 36px}
.sp-wl li:last-child{padding-bottom:0}
.sp-wl li::before{content:"";position:absolute;left:-26px;top:8px;width:9px;height:9px;border-radius:50%;background:#2a4f0c;box-shadow:0 0 0 1.5px var(--lime)}
.sp-wl .y{display:block;font-family:var(--deco);font-size:26px;font-weight:600;line-height:1;color:var(--lime);font-variant-numeric:lining-nums}
.sp-wl .lead{margin-top:12px;font-size:14px;font-weight:500;line-height:1.7;color:rgba(255,255,255,.72)}
.sp-wl blockquote{margin:12px 0 0;font-family:var(--serif);font-size:18px;font-weight:600;line-height:1.7;text-wrap:pretty}
@media (max-width:1023px){   /* 휴대폰·태블릿: 사진은 설명 글 옆에 작게 */
  .sp-wd-side{display:grid;grid-template-columns:minmax(0,1fr) clamp(96px,22vw,160px);column-gap:20px;align-items:center}
  .sp-wd-side .sp-head{grid-column:1/-1}
  .sp-words .sp-ovalbox{grid-column:2;grid-row:2;margin-top:16px}.sp-words .sp-oval{width:100%}}
@media (min-width:768px){.sp-wl{margin-top:52px;padding-left:34px}.sp-wl li::before{left:-34px}.sp-wl li{padding-bottom:44px}.sp-wl .y{font-size:30px}.sp-wl blockquote{font-size:20px}}
@media (min-width:1024px){
  .sp-wd{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);column-gap:clamp(56px,7vw,112px);align-items:start}
  .sp-wd-side{position:sticky;top:calc(var(--hh) + 52px + 48px)}
  .sp-words .sp-ovalbox{margin-top:40px}.sp-words .sp-oval{width:min(68%,280px);margin:0}
  .sp-wl{margin-top:8px}}
@media (min-width:1200px){.sp-wl li{padding-bottom:52px}.sp-wl .y{font-size:34px}.sp-wl blockquote{font-size:22px}}
/* 함께하는 의료진 — 글 + 마취과 전문의가 살피는 네 가지(선 아이콘) */
.sp-anes{max-width:1000px;margin:56px auto 0;padding:30px 22px;border-radius:24px;background:#fff;box-shadow:0 14px 40px rgba(38,72,9,.08)}
.sp-anes h3{margin-top:10px;font-family:var(--serif);font-size:21px;font-weight:600;line-height:1.5;text-wrap:balance}
.sp-anes .body{margin-top:12px;text-wrap:pretty}
.sp-anes .mon{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:26px 0 0;padding:0;list-style:none}
.sp-anes .mon li{display:flex;align-items:center;gap:10px;padding:13px 12px;border-radius:14px;background:#f1f8e7;
  font-size:13.5px;font-weight:600;line-height:1.4;color:var(--ink)}
.sp-anes .mon svg{flex:none;width:26px;height:26px;fill:none;stroke:var(--green);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
@media (min-width:768px){.sp-anes{margin-top:72px;padding:44px 48px}.sp-anes h3{font-size:25px}
  .sp-anes .mon li{flex-direction:column;align-items:flex-start;gap:14px;padding:22px 20px;border-radius:16px;font-size:14px}.sp-anes .mon svg{width:30px;height:30px}}
@media (min-width:1024px){.sp-anes{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);column-gap:52px;align-items:center}.sp-anes .mon{margin-top:0}}
@media (min-width:1200px){.sp-anes{margin-top:96px;padding:56px 60px}.sp-anes h3{font-size:28px}}
/* 원장 칼럼(블로그 글 목록) 칸은 2026-10-21 뺐다 — 원장님 요청서(10/20) 5번 + 사용자 「블로그 언급은 사이트 전체」 */

/* 손으로 남겨주신 이야기 — 2026-10-16 사용자 「메인에 환자가 직접 쓴 손글씨 자료를 소개하는 섹션」(시안1 예약·문의 바로 위, 흘러가는 손글씨 띠).
   마크업 = build_copy.py reviews_section(), 숫자 세기 = site.js 끝 「손으로 남겨주신 이야기」. build_copy.py 가 sub.css 뒤에 이어 붙인다.
   · 바탕 = 브랜드 크림(#F7F5E7, 손글씨 종이 느낌) — 위 진료 안내(연두)와 아래 예약(검정) 사이.
   · 띠 = 같은 목록 두 벌(.rv-track, 두 번째는 aria-hidden)을 한 줄로 이어 붙여 반 만큼 옮기면 끝없이 이어진다. 위 줄은 왼쪽, 아래 줄은 오른쪽으로.
     마우스를 올리거나 초점이 들어가면 멈춘다. 움직임 줄이기 설정이면 흐르지 않고 손가락·스크롤로 옆으로 넘겨 본다.
   · 카드 = 손글씨 그림 위쪽(글이 있는 쪽)을 보여 주고 살짝 기울여 둔다. 스토리북 인용 5개는 초록 카드로 사이사이에. */
.rv{background:#f7f5e7;padding:var(--sec) 0;overflow:hidden}
.rv .h2{text-wrap:balance}
.rv-n{color:var(--green);font-variant-numeric:lining-nums tabular-nums}
.rv .body{margin-top:16px;color:var(--ink7)}
.rv-ln{display:block;text-wrap:balance}
.rv-rows{display:grid;gap:6px;margin-top:36px;--cw:230px;--ch:160px;--gap:14px}
.rv-row{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
.rv-move{display:flex;width:max-content;animation:rvL 110s linear infinite}
.rv-row.r .rv-move{animation-name:rvR;animation-duration:125s}
.rv-row:hover .rv-move,.rv-row:focus-within .rv-move,.rv-rows.paused .rv-move{animation-play-state:paused}
@keyframes rvL{from{translate:0 0}to{translate:-50% 0}}
@keyframes rvR{from{translate:-50% 0}to{translate:0 0}}
.rv-track{display:flex;gap:var(--gap);margin:0;padding:14px var(--gap) 14px 0;list-style:none}
.rv-track>li{flex:none}
.rv-track>li:nth-child(4n+1){--rot:-1.4deg}.rv-track>li:nth-child(4n+2){--rot:.9deg}.rv-track>li:nth-child(4n+3){--rot:-.6deg}.rv-track>li:nth-child(4n){--rot:1.3deg}
.rv-card,.rv-q{display:block;width:var(--cw);height:var(--ch);border-radius:6px;rotate:var(--rot,0deg);box-shadow:0 10px 24px rgba(60,52,20,.13);
  transition:rotate .45s cubic-bezier(.2,.7,.2,1),scale .45s cubic-bezier(.2,.7,.2,1),box-shadow .45s}
.rv-card{position:relative;overflow:hidden;background:#fff;cursor:zoom-in}
.rv-card img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 0}
.rv-card .tg{position:absolute;left:10px;bottom:10px;padding:3px 10px;border-radius:999px;background:rgba(49,106,0,.88);color:#fff;font-size:12px;font-weight:600;line-height:1.5}
.rv-card:hover,.rv-card:focus-visible{rotate:0deg;scale:1.05;box-shadow:0 18px 36px rgba(60,52,20,.2)}
.rv-card:focus-visible{outline:2px solid var(--green);outline-offset:3px}
.rv-q{display:flex;align-items:center;width:calc(var(--cw) + 60px);padding:18px 20px;background:var(--green);color:#fff}   /* 인용은 카드보다 조금 넓게, 스토리북 줄 단위(.rv-ln)로 고르게 */
.rv-q blockquote{margin:0;font-family:var(--serif);font-size:14px;font-weight:600;line-height:1.65;letter-spacing:-.02em;text-wrap:balance}
.rv-foot{display:grid;gap:8px;margin-top:28px}
.rv-cap{font-family:var(--serif);font-size:15px;font-weight:600;line-height:1.5;color:var(--green);text-wrap:balance}
.rv-note{font-size:13px;font-weight:500;line-height:1.65;color:var(--ink5);text-wrap:pretty}
.rv-pause{justify-self:start;display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 14px;border:1px solid rgba(49,106,0,.35);border-radius:999px;
  background:transparent;color:var(--green);font:inherit;font-size:13px;font-weight:600;cursor:pointer}
.rv-pause::before{content:"";width:8px;height:10px;border:solid currentColor;border-width:0 2.5px}   /* ⏸ — 멈춘 뒤엔 ▶ */
.rv-pause[aria-pressed="true"]::before{width:0;height:0;border-width:5px 0 5px 9px;border-color:transparent transparent transparent currentColor}
.rv-pause:hover{background:rgba(49,106,0,.08)}
.rv-flag{justify-self:start;padding:3px 12px;border:1px dashed #b4532a;border-radius:999px;font-size:12px;font-weight:600;line-height:1.6;color:#b4532a}
@media (min-width:768px){
  .rv-rows{--cw:300px;--ch:208px;--gap:20px;margin-top:48px;gap:8px}
  .rv-q{padding:24px 28px}.rv-q blockquote{font-size:16px}
  .rv-foot{margin-top:36px}.rv-cap{font-size:17px}
}
@media (min-width:1200px){
  .rv-head{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:40px;align-items:end}
  .rv-head .eb,.rv-head .h2{grid-column:1}.rv-head .body{grid-column:1}
  .rv-rows{margin-top:64px}
  .rv-foot{grid-template-columns:minmax(0,1fr) auto auto;column-gap:16px;align-items:center}.rv-cap{grid-column:1/-1}.rv-note{grid-column:1}
}
/* 크게 보기 */
.rv-dlg{width:min(92vw,780px);max-width:none;max-height:none;padding:0;border:0;border-radius:14px;background:#fff;color:var(--ink);
  box-shadow:0 30px 80px rgba(0,0,0,.35);overflow:hidden}
.rv-dlg[open]{animation:rvIn .35s cubic-bezier(.2,.7,.2,1)}
.rv-dlg::backdrop{background:rgba(20,26,14,.72);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.rv-dlg figure{margin:0;background:#fff}
.rv-dlg img{display:block;width:100%;height:auto;max-height:calc(92vh - 64px);max-height:calc(92svh - 64px);object-fit:contain}
.rv-dlg-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 12px 10px 18px;border-top:1px solid rgba(34,34,34,.08)}
.rv-dlg-cap{font-size:14px;font-weight:600;color:var(--ink7)}
.rv-dlg-btns{display:flex;gap:6px}
.rv-dlg button{min-width:44px;height:44px;padding:0 14px;border:1px solid rgba(49,106,0,.35);border-radius:999px;background:#fff;color:var(--green);
  font:inherit;font-size:14px;font-weight:700;cursor:pointer;transition:background .2s,color .2s}
.rv-dlg .rv-prev,.rv-dlg .rv-next{font-size:22px;line-height:1}
.rv-dlg button:hover{background:var(--green);color:#fff}
.rv-dlg .rv-x{background:var(--green);color:#fff}
html:has(.rv-dlg[open]){overflow:hidden}
@keyframes rvIn{from{opacity:0;scale:.96}to{opacity:1;scale:1}}
@media (prefers-reduced-motion:reduce){
  .rv-move{animation:none}
  .rv-row{overflow-x:auto;scroll-snap-type:x proximity;-webkit-mask-image:none;mask-image:none}
  .rv-track[aria-hidden],.rv-pause{display:none}
  .rv-track{padding-left:var(--pad)}.rv-track>li{scroll-snap-align:start}
  .rv-card,.rv-q,.rv-dlg[open]{transition:none;animation:none}
}

/* ── 이야기 페이지(about-reviews.html · build_reviews.py, 2026-10-16 사용자 「메뉴 추가, 유월외과 소개 하위로, 페이지 구성」) ─────────────
   소개(스토리북 19쪽: 제목·본문 + 쌓인 이야기 수 + 인용 5개) → 이야기 모음(크림 바탕, 분류 단추·카드 격자·더 보기·크게 보기는 메인 .rv-dlg 모양 그대로). */
.rva-top{display:grid;gap:28px}
.rva-count{justify-self:start;min-width:220px;padding:22px 28px 20px;border-top:3px solid var(--green);background:#fff;box-shadow:0 14px 40px rgba(38,72,9,.08)}
.rva-count .n{font-family:var(--deco);font-size:64px;font-weight:700;line-height:1;color:var(--green);font-variant-numeric:lining-nums}
.rva-count .n small{margin-left:6px;font-family:"Pretendard Variable",sans-serif;font-size:16px;font-weight:700;color:var(--green)}
.rva-count .d{margin-top:14px;padding-top:12px;border-top:1px solid rgba(49,106,0,.2);font-size:14px;font-weight:500;color:var(--ink5)}
.rva-quotes{display:grid;gap:14px;margin:40px 0 0;padding:0;list-style:none}
.rva-quotes li{padding:4px 0 4px 18px;border-left:2px solid var(--lime)}
.rva-quotes blockquote{margin:0;font-family:var(--serif);font-size:16px;font-weight:600;line-height:1.65;letter-spacing:-.02em;color:var(--green)}
.rva{background:#f7f5e7}
.rva-f{display:flex;flex-wrap:wrap;gap:8px;margin-top:28px}
.rva-f button{display:inline-flex;align-items:center;gap:6px;height:42px;padding:0 16px;border:1px solid rgba(49,106,0,.28);border-radius:999px;background:#fff;
  color:var(--ink7);font:inherit;font-size:14px;font-weight:600;cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.rva-f button small{font-size:12px;font-weight:500;color:var(--ink5)}
.rva-f button:hover{border-color:var(--green);color:var(--green)}
.rva-f button[aria-pressed="true"]{background:var(--green);border-color:var(--green);color:#fff}
.rva-f button[aria-pressed="true"] small{color:rgba(255,255,255,.78)}
.rva-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:24px 0 0;padding:0;list-style:none}
.rva-card{position:relative;display:block;overflow:hidden;border-radius:8px;background:#fff;box-shadow:0 8px 22px rgba(60,52,20,.1);cursor:zoom-in;
  transition:translate .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s}
.rva-card img{display:block;width:100%;height:auto;aspect-ratio:440/306;object-fit:cover;object-position:50% 0}   /* 거의 다 440×300 안팎 — 줄이 맞게 한 비율로, 긴 글은 위쪽만(크게 보기에서 전체) */
.rva-card .tg{position:absolute;left:8px;bottom:8px;padding:2px 9px;border-radius:999px;background:rgba(49,106,0,.88);color:#fff;font-size:11px;font-weight:600;line-height:1.6}
.rva-card:focus-visible{outline:2px solid var(--green);outline-offset:3px}
@media (hover:hover){.rva-card:hover{translate:0 -4px;box-shadow:0 16px 34px rgba(60,52,20,.18)}}
.rva-more{display:flex;align-items:center;gap:10px;height:50px;margin:36px auto 0;padding:0 26px;border:1px solid var(--green);border-radius:999px;background:#fff;
  color:var(--green);font:inherit;font-size:15px;font-weight:700;cursor:pointer;transition:background .2s,color .2s}
.rva-more .c{font-size:13px;font-weight:500;opacity:.75}
.rva-more:hover{background:var(--green);color:#fff}
.rva-more[hidden]{display:none}
.rva-foot{display:grid;gap:10px;margin-top:40px}
@media (min-width:768px){
  .rva-count .n{font-size:76px}
  .rva-quotes{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 32px}
  .rva-quotes blockquote{font-size:17px}
  .rva-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
  .rva-card .tg{left:10px;bottom:10px;font-size:12px;padding:3px 10px}
}
@media (min-width:1200px){
  .rva-top{grid-template-columns:minmax(0,1fr) auto;column-gap:64px;align-items:end}
  .rva-count{min-width:280px}.rva-count .n{font-size:92px}
  .rva-quotes{grid-template-columns:repeat(3,minmax(0,1fr));margin-top:64px}
  .rva-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
}
@media (prefers-reduced-motion:reduce){.rva-card{transition:none}}
/* 메인 섹션 「손으로 남겨주신 이야기들 전체 보기」(이야기 페이지로) */
.rv-all{justify-self:start;margin-top:8px}
@media (min-width:1200px){.rv-all{grid-column:1;grid-row:3}}

/* ── 흐린 손글씨 + 「로그인 후 이야기 자세히보기」(2026-10-16 사용자 「이미지는 흐리게 처리하고 버튼 추가」) ─────────────────
   그림 자체가 흐리게 만든 파일(<id>-b.webp)이라 CSS 를 꺼도 읽히지 않는다. 버튼 = build_copy.rv_login()(지금은 준비중 페이지로) */
.rv-login{display:inline-flex;align-items:center;gap:10px;padding:15px 26px;border-radius:999px;background:var(--green);color:#fff;
  font-size:16px;font-weight:700;line-height:1.2;box-shadow:0 16px 36px rgba(38,72,9,.28);transition:background .3s,translate .3s}
.rv-login svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.rv-login:hover,.rv-login:focus-visible{background:var(--green-dk);translate:0 -2px}
.rv-rows{position:relative}
.rv-gate{position:absolute;left:50%;top:50%;z-index:3;margin:0;translate:-50% -50%;white-space:nowrap}
.rv-asof{font-family:var(--sans);font-size:.45em;font-weight:600;letter-spacing:0;color:var(--ink5);white-space:nowrap}
.wy-count .lb,.rva-count .lb{margin-bottom:6px;font-size:15px;font-weight:700;color:var(--green)}
.rva-gate{margin-top:24px}
@media (min-width:768px){.rv-login{padding:17px 30px;font-size:17px}}

/* 유월이 특별한 8가지 이유(reasons.html) — 2026-10-16 사용자 「매력 있고, 이미지가 많고, 재미있는 요소, 모션 이펙트 — 1mm 「Why 1mm」 참고, 지금 컨셉과 어울리게」.
   build_copy.py 가 site.css·…·sub.css·reviews.css 뒤에 이어 붙인다. 마크업 = build_reasons.py, 움직임 = reasons.js(+ site.js 「서브 페이지」의 data-rv·타원·패럴랙스).
   재료는 사이트 것 그대로 — 색 --green·--green-dk·--lime·--mint·--ink·--line, 글자 명조 제목·Pretendard 본문·Cormorant 장식, 타원·잎·흰 카드·짙은 초록 띠.
   참고 사이트에서 가져온 틀: WHY? 선언 + 눈금자 위 목록(.wy-intro), 큰 외곽선 글자(.wy-big·.wy-hero-8), 번호 눈금자(.wy-bar), 아치 사진 + 겹친 카드(.wy-arch).
   숨겼다 나타내는 상태는 html.spfx 일 때만(site.js) — 스크립트가 없거나 움직임 줄이기 설정이면 처음부터 다 보인다. 폭 구간 = 768 · 1024 · 1200. */

.wy{--wy-ease:cubic-bezier(.2,.7,.2,1)}
.wy-intro ol,.wy-reasons ol,.wy-reasons ul,.wy-after ol,.wy-after ul{margin:0;padding:0;list-style:none}
.wy-no,.wy-big,.wy-hero-8,.wy-idx-h span,.wy-track a,.wy-count .n,.wy-wall-cap,.cut-row b,.cut-scale,.wy-glass .n{font-variant-numeric:lining-nums;font-feature-settings:"lnum" 1}
.wy .lf{fill:currentColor}.wy .lf .v{fill:none;stroke:#fff;stroke-width:2.4;stroke-linecap:round;opacity:.75}

/* ── 머리 그림: 큰 외곽선 8 ───────────────────────────────────────── */
.wy-hero .sp-hero-in{position:relative;z-index:1}
.wy-hero-8{position:absolute;right:-2%;bottom:-24%;z-index:0;font-family:var(--deco);font-size:clamp(260px,46vw,620px);font-weight:600;line-height:1;
  color:transparent;-webkit-text-stroke:1.5px rgba(255,255,255,.34);pointer-events:none;animation:wyFloat 9s ease-in-out infinite}
@keyframes wyFloat{0%,100%{translate:0 0;rotate:0deg}50%{translate:0 -14px;rotate:-2deg}}

/* ── WHY JUNE? 선언 + 눈금 목차 ──────────────────────────────────── */
.wy-intro{position:relative;overflow-x:clip;padding:var(--sec) 0}
/* 글 폭 — 큰 화면에서 오른쪽 퀵바(76px)와 겹치지 않게 1240 안쪽으로(머리글·푸터는 그대로 1440) */
.wy-intro .wrap,.wy-bar .wrap,.wy-r>.wrap,.wy-after .wrap,.wy-notes-row{max-width:1240px}
.wy-why{font-family:var(--deco);font-size:20px;font-weight:700;line-height:1;letter-spacing:.3em;color:#8aa64a}
.wy-mani-h{margin-top:14px;font-family:var(--serif);font-size:36px;font-weight:600;line-height:1.28;letter-spacing:-.035em}
.wy-mani-tx p{font-size:16px;font-weight:500;line-height:1.85;color:var(--ink7);text-wrap:pretty}
.wy-mani-tx p+p{margin-top:14px}
.wy-mani-tx b{color:var(--ink);font-weight:700}
.wy-idx-h{display:flex;align-items:baseline;gap:12px;margin-top:56px;font-size:15px;font-weight:700;color:var(--green)}
.wy-idx-h span{font-family:var(--deco);font-size:15px;letter-spacing:.24em;color:#8aa64a}
/* 목차 = 눈금자 위 8가지 이유 — 참고 사이트의 눈금자 + 가치 목록을 옮긴 첫 디자인(2026-10-16 사용자 「그냥 첫번째 디자인으로」로 되돌림).
   휴대폰은 세로 눈금 목록, 태블릿 2열, PC 4열 × 2줄. 화면에 들어오면 눈금이 그어지고 잎 점이 돋는다(마우스를 따라오던 사진은 2026-10-16 사용자 「없애」로 뺌) */
.wy-mani{display:grid;gap:28px}
.wy-idx{display:grid;margin-top:12px;counter-reset:none}
.wy-idx li{position:relative;min-width:0}
.wy-idx a{position:relative;display:grid;grid-template-columns:28px 44px minmax(0,1fr) 24px;align-items:center;gap:0 10px;padding:18px 4px 18px 0;
  border-bottom:1px solid var(--line);color:var(--ink);transition:color .3s}
/* 눈금(밀리미터 자 모양) — 휴대폰은 세로, 태블릿 이상은 가로 */
.wy-idx a::before{content:"";position:absolute;left:13px;top:0;bottom:0;width:10px;
  background:repeating-linear-gradient(to bottom,var(--ink3) 0 1px,transparent 1px 7px);-webkit-mask:linear-gradient(90deg,#000 40%,transparent 41%);mask:linear-gradient(90deg,#000 40%,transparent 41%)}
.wy-idx .node{position:relative;z-index:1;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:#fff;color:var(--lime);
  box-shadow:0 0 0 1px var(--line);transition:background .35s,color .35s,box-shadow .35s,scale .35s var(--wy-ease)}
.wy-idx .node .lf{width:12px;height:16px;transition:rotate .5s var(--wy-ease)}
.wy-idx .no{font-family:var(--deco);font-size:26px;font-weight:600;line-height:1;color:var(--green);font-variant-numeric:lining-nums;font-feature-settings:"lnum" 1}
.wy-idx .t{font-family:var(--serif);font-size:17px;font-weight:600;line-height:1.45;letter-spacing:-.03em;text-wrap:balance}
.wy-idx .t br{display:none}
.wy-idx .go{display:grid;place-items:center;width:24px;height:24px;color:var(--green);opacity:.35;transition:opacity .3s,translate .35s var(--wy-ease)}
.wy-idx .go svg{width:18px;height:18px}
.wy-idx a:hover,.wy-idx a:focus-visible{color:var(--green)}
.wy-idx a:hover .node,.wy-idx a:focus-visible .node{background:var(--green);color:#fff;box-shadow:0 0 0 6px rgba(171,197,98,.28);scale:1.08}
.wy-idx a:hover .node .lf,.wy-idx a:focus-visible .node .lf{rotate:-18deg}
.wy-idx a:hover .go,.wy-idx a:focus-visible .go{opacity:1;translate:0 4px}
.spfx .wy-idx li:not(.in) .node{scale:0}
@media (min-width:768px){
  .wy-mani-h{font-size:46px}.wy-why{font-size:24px}.wy-mani-tx p{font-size:17px}
  .wy-idx{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:0;margin-top:20px}
  .wy-idx a{display:flex;flex-direction:column;align-items:flex-start;gap:12px;height:100%;padding:0 28px 34px 0;border:0}
  .wy-idx a::before{left:0;right:0;top:13px;bottom:auto;width:auto;height:14px;transform-origin:0 50%;
    background:repeating-linear-gradient(90deg,var(--ink3) 0 1px,transparent 1px 8px) 0 0/100% 7px no-repeat,linear-gradient(var(--ink3),var(--ink3)) 0 7px/100% 1px no-repeat;
    -webkit-mask:none;mask:none;transition:scale 1.2s var(--wy-ease) var(--d,0s)}
  .spfx .wy-idx li:not(.in) a::before{scale:0 1}
  .wy-idx .node{margin-bottom:6px}
  .wy-idx .no{font-size:30px}
  .wy-idx .t{font-size:19px}.wy-idx .t br{display:inline}
  .wy-idx .go{position:absolute;right:28px;top:2px;rotate:-90deg}
  .wy-idx a:hover .go,.wy-idx a:focus-visible .go{translate:-4px 0}
}
@media (min-width:1024px){
  .wy-mani{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(48px,6vw,120px);align-items:end}
  .wy-idx{grid-template-columns:repeat(4,minmax(0,1fr));row-gap:16px}
}
@media (min-width:1200px){
  .wy-why{font-size:28px}.wy-mani-h{margin-top:18px;font-size:60px}.wy-mani-tx p{font-size:19px}.wy-mani-tx p+p{margin-top:18px}
  .wy-idx-h{margin-top:96px;font-size:17px}.wy-idx .t{font-size:21px}.wy-idx .no{font-size:34px}
}


/* ── 위에 붙는 진행 눈금(참고 사이트의 번호 눈금자) ─────────────────────── */
.wy-reasons{position:relative}
.wy-bar{position:sticky;top:var(--hh);z-index:45;border-bottom:1px solid var(--line);background:rgba(255,255,255,.94);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.wy-bar-in{display:flex;align-items:center;gap:24px;height:52px}
.wy-bar-lb{display:none;flex:none;font-size:14px;font-weight:700;color:var(--green)}
.wy-track{position:relative;flex:1;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));height:100%}   /* 2026-10-21 이유 7가지(원장님 요청서 10/20 2번) */
.wy-track .rl{position:absolute;left:0;right:0;bottom:9px;height:7px;
  background:repeating-linear-gradient(90deg,var(--ink3) 0 1px,transparent 1px 6px) 0 0/100% 4px no-repeat,linear-gradient(var(--line),var(--line)) 0 100%/100% 1px no-repeat}
.wy-track .fill{position:absolute;left:0;bottom:9px;width:100%;height:2px;background:var(--green);transform-origin:0 50%;scale:var(--p,0) 1}
.wy-track .mk{position:absolute;bottom:4px;left:calc(var(--p,0) * 100%);width:14px;height:19px;margin-left:-7px;color:var(--green);transition:rotate .4s}
.wy-track .mk .lf{width:100%;height:100%;display:block}
.wy-track a{position:relative;z-index:1;display:flex;justify-content:center;padding-top:7px;font-family:var(--deco);font-size:16px;font-weight:700;
  line-height:1;color:var(--ink5);transition:color .3s}
.wy-track a span{transition:scale .35s var(--wy-ease)}
.wy-track a:hover,.wy-track a[aria-current]{color:var(--green)}
.wy-track a[aria-current] span{scale:1.3}
/* 번호에 마우스를 올리면 이유 제목(마우스가 있는 큰 화면만, 바깥 끝 번호는 안쪽으로 붙여서) */
.wy-track a::after{content:attr(data-t);position:absolute;top:calc(100% + 10px);left:50%;translate:-50% 4px;padding:8px 12px;border-radius:10px;
  background:var(--green-dk);color:#fff;font-family:var(--sans);font-size:13px;font-weight:600;letter-spacing:-.02em;white-space:nowrap;
  opacity:0;pointer-events:none;transition:opacity .2s,translate .25s;display:none}
.wy-track a:nth-of-type(-n+2)::after{left:0;translate:0 4px}.wy-track a:nth-of-type(n+6)::after{left:auto;right:0;translate:0 4px}
@media (hover:hover) and (min-width:1024px){
  .wy-track a::after{display:block}
  .wy-track a:hover::after{opacity:1;translate:-50% 0}.wy-track a:nth-of-type(-n+2):hover::after,.wy-track a:nth-of-type(n+6):hover::after{translate:0 0}
}
.wy-bar{overflow-x:clip}
@media (min-width:768px){.wy-bar-in{height:60px}.wy-bar-lb{display:block}.wy-track a{font-size:19px}}

/* ── 이유 하나(공통 틀) ─────────────────────────────────────────── */
.wy-r{position:relative;isolation:isolate;overflow:hidden;padding:var(--sec) 0;scroll-margin-top:calc(var(--hh) + 52px)}
.wy-r.mint{background:linear-gradient(#f1f8e7,rgba(241,248,231,.55) 60%,rgba(241,248,231,0))}
/* 큰 외곽선 번호 — 참고 사이트의 「1mm」처럼 글 쪽 뒤에 크게(휴대폰은 오른쪽 위) */
.wy-big{position:absolute;top:calc(var(--sec) * .25);right:2%;z-index:-1;font-family:var(--deco);font-size:clamp(170px,27vw,440px);font-weight:600;line-height:.8;
  color:transparent;-webkit-text-stroke:1.5px rgba(49,106,0,.22);pointer-events:none;will-change:transform}
@media (min-width:1024px){.wy-big{right:auto;left:1%}.wy-r:has(.wy-grid.rev) .wy-big{left:auto;right:1%}}
.wy-grid{display:grid;grid-template-areas:"hd" "md" "bd";gap:32px}
.wy-hd{grid-area:hd}.wy-md{grid-area:md;position:relative;min-width:0}.wy-bd{grid-area:bd;min-width:0}
.wy-no{display:flex;align-items:baseline;gap:10px;font-family:var(--deco);font-size:15px;font-weight:700;line-height:1;letter-spacing:.26em;color:var(--green)}
.wy-no b{font-size:30px;letter-spacing:.02em}
.wy-no::after{content:"";flex:none;width:48px;height:1px;margin-left:4px;align-self:center;background:currentColor;opacity:.4}
.wy-t{margin-top:16px;font-family:var(--serif);font-size:27px;font-weight:600;line-height:1.42;letter-spacing:-.035em;text-wrap:balance}
.wy-bd>p{font-size:15px;font-weight:500;line-height:1.85;color:var(--ink7);text-wrap:pretty}
.wy-bd>p+p{margin-top:16px}
.wy-bd b{color:var(--ink);font-weight:700}
.wy-bd b.lg{display:block;margin-top:6px;padding-left:16px;border-left:3px solid var(--lime);font-family:var(--serif);font-size:18px;font-weight:600;line-height:1.7}
.wy-sm{margin-top:20px!important;font-size:13px!important;line-height:1.7!important;color:var(--ink5)!important}
@media (min-width:768px){
  .wy-r{scroll-margin-top:calc(var(--hh) + 60px)}
  .wy-t{font-size:34px}.wy-no{font-size:16px}.wy-no b{font-size:34px}.wy-bd>p{font-size:16px}.wy-bd b.lg{font-size:20px}
}
@media (min-width:1024px){
  /* 사진·도해 쪽이 넓게(2026-10-16 「요소들이 너무 작아서 글자만 보인다」) */
  .wy-grid{grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);grid-template-areas:"hd md" "bd md";grid-template-rows:auto 1fr;column-gap:clamp(44px,5vw,88px);row-gap:28px;align-items:start}
  .wy-grid.rev{grid-template-columns:minmax(0,1.18fr) minmax(0,.82fr);grid-template-areas:"md hd" "md bd"}
  .wy-md{align-self:center}
}
@media (min-width:1200px){.wy-t{margin-top:20px;font-size:40px}.wy-bd>p{font-size:16px}.wy-bd>p+p{margin-top:18px}.wy-bd b.lg{font-size:21px}}

/* 아치 사진(참고 사이트의 위가 둥근 사진) — 아래에서 열리고 사진은 천천히 */
.wy-arch{position:relative;width:min(86%,520px);aspect-ratio:4/5;margin:0 auto;overflow:hidden;border-radius:9999px 9999px 24px 24px;
  clip-path:inset(0 round 9999px 9999px 24px 24px);transition:clip-path 1.3s cubic-bezier(.65,0,.35,1),opacity .6s}
.wy-arch .ph,.wy-wide .ph{position:absolute;inset:-9% 0;background-size:cover;background-position:center;will-change:transform;transition:scale 1.8s var(--wy-ease)}
.spfx .wy-arch[data-rv]:not(.in){opacity:1;translate:0 0;clip-path:inset(100% 0 0 0 round 9999px 9999px 24px 24px)}
.spfx .wy-arch:not(.in) .ph,.spfx .wy-wide:not(.in) .ph{scale:1.2}
.wy-arch.tall{aspect-ratio:3/4}
.wy-ov.sp-oval{width:min(84%,500px)}
@media (min-width:1024px){.wy-arch{width:min(88%,580px)}.wy-ov.sp-oval{width:min(86%,560px)}}

/* ── 01 고객 이야기 — 숫자 카드 · 남겨 주신 말 넘기기 · 손글씨 벽(흐리게, 로그인 안내) ─────────────────────── */
.wy-count{position:relative;width:min(82%,360px);margin:-96px auto 0;padding:26px 26px 24px;border-top:3px solid var(--green);border-radius:4px 4px 20px 20px;background:#fff;box-shadow:0 18px 50px rgba(38,72,9,.1)}
.wy-count .n{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 10px;font-family:var(--deco);font-size:72px;font-weight:700;line-height:.95;color:var(--green);
  font-variant-numeric:tabular-nums}
.wy-count .n small{font-family:var(--sans);font-size:16px;font-weight:700;color:var(--green)}
.wy-count .d{display:flex;align-items:center;gap:12px;margin-top:16px;font-size:14px;font-weight:600;color:var(--ink5)}
.wy-count .d::before{content:"";width:40px;height:2px;background:var(--lime)}
.wy-qr{position:relative;margin-top:28px;padding:30px 26px 24px;border-radius:20px;background:var(--green-dk);color:#fff;overflow:hidden}
.wy-qr .qm{position:absolute;right:18px;top:-14px;font-family:var(--deco);font-size:140px;font-weight:700;line-height:1;color:rgba(171,197,98,.35)}
.wy-qr ul{position:relative;display:grid}
.wy-qr li+li{margin-top:16px}
.wy-qr blockquote{margin:0;font-family:var(--serif);font-size:16px;font-weight:600;line-height:1.7;letter-spacing:-.03em;text-wrap:pretty}
.wy-qr .dots{display:none;gap:8px;margin-top:18px}
.wy-qr .dots button{width:22px;height:22px;padding:0;border:0;background:none;cursor:pointer;display:grid;place-items:center}
.wy-qr .dots button::before{content:"";width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.35);transition:width .35s var(--wy-ease),background .3s,border-radius .3s}
.wy-qr .dots button[aria-current]::before{width:22px;border-radius:4px;background:var(--lime)}
/* reasons.js 가 붙이면(.js) 한 번에 한 문장씩 겹쳐 넘김 — 없으면 다섯 문장이 다 보이는 목록 */
.wy-qr.js ul{grid-template-areas:"q"}
.wy-qr.js li{grid-area:q;margin:0!important;opacity:0;translate:0 14px;transition:opacity .6s,translate .8s var(--wy-ease);visibility:hidden}
.wy-qr.js li.on{opacity:1;translate:0 0;visibility:visible}
.wy-qr.js .dots{display:flex}
@media (min-width:768px){.wy-count .n{font-size:84px}.wy-qr blockquote{font-size:18px}}
@media (min-width:1024px){.wy-r1 .wy-md{padding-bottom:40px}.wy-count{position:absolute;left:0;bottom:0;margin:0;width:min(58%,380px)}}
@media (min-width:1200px){.wy-count{padding:34px 38px 30px}.wy-count .n{font-size:100px}.wy-qr{margin-top:36px;padding:40px 38px 30px}.wy-qr blockquote{font-size:20px}}
/* 손글씨 벽 — 기둥마다 반대 방향으로 천천히(reasons.js), 누르면 크게 */
.wy-wall{position:relative;margin-top:56px;height:500px;overflow:hidden;
  -webkit-mask:linear-gradient(transparent,#000 14%,#000 86%,transparent);mask:linear-gradient(transparent,#000 14%,#000 86%,transparent)}
.wy-wall-in{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;width:min(100% - 2 * var(--pad),1440px);margin-inline:auto}
.wy-wall .col{display:grid;gap:12px;align-content:start;will-change:transform}
.wy-wall .col:nth-child(n+4){display:none}
.wy-wall .col:nth-child(2){margin-top:-70px}.wy-wall .col:nth-child(3){margin-top:-24px}.wy-wall .col:nth-child(4){margin-top:-110px}
.wy-card{position:relative;display:block;overflow:hidden;border-radius:10px;background:#fff;box-shadow:0 0 0 1px rgba(208,212,196,.8),0 10px 26px rgba(38,72,9,.08);
  transition:translate .45s var(--wy-ease),rotate .45s var(--wy-ease),box-shadow .45s}
.wy-card img{display:block;width:100%;height:auto}
.wy-card .tg{position:absolute;left:10px;top:10px;padding:3px 10px;border-radius:999px;background:rgba(49,106,0,.88);color:#fff;font-size:12px;font-weight:700}
.wy-card:hover,.wy-card:focus-visible{translate:0 -6px;rotate:-1.2deg;box-shadow:0 0 0 2px var(--lime),0 22px 44px rgba(38,72,9,.18)}
.wy-card:nth-child(even):hover{rotate:1.2deg}
.wy-wall-cap{position:absolute;left:50%;bottom:22px;translate:-50% 0;z-index:2;display:flex;align-items:baseline;gap:8px;padding:12px 22px;border-radius:999px;
  background:rgba(38,72,9,.92);color:#fff;font-family:var(--serif);font-size:16px;font-weight:600;white-space:nowrap;box-shadow:0 14px 34px rgba(0,0,0,.2)}
.wy-wall-cap span{display:none;font-family:var(--deco);font-size:13px;font-weight:700;letter-spacing:.18em;color:var(--lime)}
.wy-wall-cap b{font-family:var(--deco);font-size:22px;color:var(--lime)}
.wy-notes-row{display:grid;gap:8px;margin-top:28px}
.wy-notes-row .cap{font-family:var(--serif);font-size:15px;font-weight:600;line-height:1.5;color:var(--green);text-wrap:balance}
.wy-notes-row .note{font-size:13px;font-weight:500;line-height:1.65;color:var(--ink5);text-wrap:pretty}
.wy .rv-flag{justify-self:start;width:fit-content;padding:3px 12px;border:1px dashed #b4532a;border-radius:999px;font-size:12px;font-weight:600;line-height:1.6;color:#b4532a}
@media (min-width:768px){
  .wy-wall{height:640px;margin-top:72px}.wy-wall-in{grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}.wy-wall .col{gap:18px}
  .wy-wall .col:nth-child(4){display:grid}
  .wy-wall-cap{bottom:28px;padding:14px 26px;font-size:18px}.wy-wall-cap span{display:inline}
  .wy-notes-row{grid-template-columns:minmax(0,1fr) auto;column-gap:24px;align-items:center}.wy-notes-row .cap{grid-column:1/-1;font-size:17px}
}
@media (min-width:1200px){
  .wy-wall{height:800px}.wy-wall-in{gap:28px}.wy-wall .col{gap:28px}
  .wy-wall .col:nth-child(2){margin-top:-120px}.wy-wall .col:nth-child(3){margin-top:-40px}.wy-wall .col:nth-child(4){margin-top:-180px}
  .wy-card .tg{font-size:13px}
}

/* ── 02 상담 — 타원 + 작은 원 사진 + 말풍선(낱말이 차례로) ─────────────────── */
.wy-r2 .wy-md{padding-bottom:20px}
@media (max-width:1023px){.wy-dot{top:4%;bottom:auto;right:6%;width:min(30%,150px)}}
.wy-dot{position:absolute;right:2%;bottom:12%;width:min(36%,210px);aspect-ratio:1;border-radius:50%;background-size:cover;background-position:center;
  border:6px solid #fff;box-shadow:0 16px 40px rgba(38,72,9,.18)}
.spfx .wy-dot[data-rv]:not(.in){opacity:0;translate:0 0;scale:.4}
.spfx .wy-dot[data-rv]{transition:opacity .5s ease var(--d),scale .9s cubic-bezier(.34,1.56,.64,1) var(--d)}
.wy-bub{position:relative;max-width:360px;margin:-56px auto 0;padding:20px 22px 22px;border-radius:22px 22px 22px 6px;background:#fff;
  box-shadow:0 20px 50px rgba(38,72,9,.16)}
.wy-bub::after{content:"";position:absolute;left:28px;top:100%;border:10px solid transparent;border-top-color:#fff;border-left-color:#fff;border-bottom:0;border-right-width:16px}
.wy-bub small{display:block;font-size:12px;font-weight:700;color:var(--green)}
.wy-bub p{margin-top:8px;font-family:var(--serif);font-size:19px;font-weight:600;line-height:1.5;letter-spacing:-.035em;text-wrap:balance}
.wy-bub .wd{display:inline-block;transition:opacity .4s,translate .5s var(--wy-ease);transition-delay:calc(var(--d,0s) + .25s + var(--i) * .09s)}
.spfx .wy-bub:not(.in) .wd{opacity:0;translate:0 10px}
.spfx .wy-bub[data-rv]:not(.in){scale:.9}
.spfx .wy-bub[data-rv]{transform-origin:10% 100%;transition:opacity .5s ease var(--d),translate .9s var(--wy-ease) var(--d),scale .7s cubic-bezier(.34,1.56,.64,1) var(--d)}
@media (min-width:1024px){
  .wy-bub{position:absolute;left:-2%;top:5%;margin:0;width:min(64%,410px);padding:26px 28px 28px}
  .wy-bub small{font-size:13px}.wy-bub p{font-size:25px}
}

/* ── 03 비용 — 아치 사진 + 영수증(한 줄씩 찍히고 도장) ───────────────────── */
.wy-r3 .wy-md{padding-bottom:8px}
.wy-rcpt{position:relative;width:min(92%,380px);margin:-120px auto 0;filter:drop-shadow(0 22px 40px rgba(38,72,9,.18))}
.rc-paper{position:relative;padding:24px 24px 34px;background:#fff;
  -webkit-mask:radial-gradient(circle 7px at 50% 100%,transparent 6.5px,#000 7px) 0 0/18px 100% repeat-x;mask:radial-gradient(circle 7px at 50% 100%,transparent 6.5px,#000 7px) 0 0/18px 100% repeat-x}
.rc-h{display:flex;flex-direction:column;align-items:center;gap:2px;padding-bottom:14px;border-bottom:1.5px dashed var(--line);text-align:center}
.rc-h b{font-family:var(--serif);font-size:17px;font-weight:600;color:var(--green)}
.rc-h span{font-family:var(--deco);font-size:11px;font-weight:700;letter-spacing:.24em;color:var(--ink5)}
.rc-rows{padding:10px 0;border-bottom:1.5px dashed var(--line)}
.rc-rows li{display:flex;align-items:baseline;gap:8px;padding:9px 0;font-size:14px;font-weight:600;color:var(--ink7)}
.rc-rows i{flex:1;border-bottom:1px dotted var(--ink3);translate:0 -4px}
.rc-rows b{color:var(--ink);font-weight:700}
.rc-rows .no b{color:#b4532a}
.rc-rows .no span{position:relative}
.rc-rows .no span::after{content:"";position:absolute;left:-2px;right:-2px;top:52%;height:1.5px;background:#b4532a;transform-origin:0 50%;
  transition:scale .5s var(--wy-ease) calc(var(--d,0s) + .9s + var(--i) * .2s)}
.rc-f{margin-top:14px;font-family:var(--serif);font-size:15px;font-weight:600;line-height:1.6;text-align:center;color:var(--green);text-wrap:balance}
.rc-stamp{position:absolute;right:-34px;bottom:-46px;display:grid;place-items:center;width:92px;height:92px;border:2.5px solid rgba(180,83,42,.82);border-radius:50%;
  color:rgba(180,83,42,.9);rotate:-14deg;font-size:15px;font-weight:800;line-height:1.25;text-align:center;letter-spacing:.04em}
.rc-stamp::before{content:"";position:absolute;inset:5px;border:1px solid rgba(180,83,42,.6);border-radius:50%}
.rc-stamp{transition:opacity .2s calc(var(--d,0s) + 1.9s),scale .45s cubic-bezier(.3,1.8,.5,1) calc(var(--d,0s) + 1.9s)}
.wy-rcpt .rc-rows li{transition:opacity .4s calc(var(--d,0s) + .35s + var(--i) * .2s),translate .5s var(--wy-ease) calc(var(--d,0s) + .35s + var(--i) * .2s)}
.spfx .wy-rcpt:not(.in) .rc-rows li{opacity:0;translate:0 -6px}
.spfx .wy-rcpt:not(.in) .rc-rows .no span::after{scale:0 1}
.spfx .wy-rcpt:not(.in) .rc-stamp{opacity:0;scale:2.2}
.spfx .wy-rcpt[data-rv]:not(.in){clip-path:inset(0 0 100% 0);translate:0 -30px}
.spfx .wy-rcpt[data-rv]{transition:opacity .4s ease var(--d),translate 1.2s var(--wy-ease) var(--d),clip-path 1.2s var(--wy-ease) var(--d)}
.wy-rcpt[data-rv].in{clip-path:inset(-60px -60px -60px -60px)}
@media (min-width:1024px){
  .wy-r3 .wy-arch{margin:0 0 0 auto;width:min(80%,540px)}
  .wy-rcpt{position:absolute;left:0;bottom:-4%;margin:0;width:min(60%,420px)}
  .rc-paper{padding:30px 30px 40px}.rc-h b{font-size:20px}.rc-h span{font-size:12px}.rc-rows li{padding:11px 0;font-size:16px}.rc-f{font-size:17px}
  .rc-stamp{width:110px;height:110px;font-size:18px}
}

/* ── 04 일정 — 타원 + 문진 메모(체크가 그려짐) ─────────────────────────── */
.wy-memo{position:relative;width:min(88%,300px);margin:-70px auto 0;padding:22px 22px 18px;border-radius:18px;background:#fffef6;
  box-shadow:0 20px 50px rgba(38,72,9,.16);rotate:-2deg}
.wy-memo::before{content:"";position:absolute;left:50%;top:-12px;width:84px;height:24px;margin-left:-42px;border-radius:4px;background:rgba(171,197,98,.55);rotate:3deg}
.mm-h{font-size:12px;font-weight:700;color:var(--green)}
.wy-memo ul{margin-top:10px}
.wy-memo li{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid rgba(208,212,196,.7);font-family:var(--serif);font-size:16px;font-weight:600}
.wy-memo .ck{flex:none;width:22px;height:22px;padding:2px;border-radius:6px;background:var(--mint);fill:none;stroke:var(--green);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.wy-memo .ck path{stroke-dasharray:24;stroke-dashoffset:0;transition:stroke-dashoffset .5s ease calc(var(--d,0s) + .5s + var(--i) * .35s)}
.spfx .wy-memo:not(.in) .ck path{stroke-dashoffset:24}
.mm-f{display:flex;align-items:center;gap:6px;margin-top:12px;font-size:14px;font-weight:700;color:var(--green)}
.mm-f svg{width:16px;height:16px;rotate:-90deg}
@media (min-width:1024px){.wy-memo{position:absolute;right:-2%;bottom:6%;margin:0;width:min(62%,370px);padding:28px 28px 22px}
  .mm-h{font-size:14px}.wy-memo li{padding:11px 0;font-size:19px}.wy-memo .ck{width:26px;height:26px}.mm-f{font-size:16px}}

/* ── 05 의료진 — 아치 사진 + 꽂아 둔 의료인 이야기 카드 + 큰 한 줄 ─────────────── */
.wy-pins{display:grid;gap:14px;margin-top:-60px;padding:0 4%}
.wy-pins li{position:relative;padding:20px 22px;border-left:3px solid var(--green);border-radius:4px 16px 16px 4px;background:#fff;box-shadow:0 18px 44px rgba(38,72,9,.14)}
.wy-pins li:nth-child(1){rotate:-1.5deg}.wy-pins li:nth-child(2){rotate:1.2deg}
.wy-pins small{font-size:12px;font-weight:700;color:var(--ink5)}
.wy-pins p{margin-top:8px;font-family:var(--serif);font-size:16px;font-weight:600;line-height:1.6;color:var(--green)}
.spfx .wy-pins li[data-rv]:not(.in){translate:40px 0}
.wy-line{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:64px;padding:26px 0;border-top:1px solid rgba(49,106,0,.18);border-bottom:1px solid rgba(49,106,0,.18);
  font-family:var(--serif);font-size:20px;font-weight:600;line-height:1.55;color:var(--green);text-align:center;text-wrap:balance}
.wy-line .lf{flex:none;width:22px;height:30px;color:var(--lime);animation:docSway 6s ease-in-out infinite;transform-origin:50% 95%}
.wy-flag{margin:18px auto 0}
@media (min-width:768px){.wy-pins{grid-template-columns:1fr 1fr;align-items:start}.wy-pins li:nth-child(2){margin-top:40px}.wy-line{font-size:26px}}
@media (min-width:1024px){
  .wy-r5 .wy-arch{width:min(76%,520px)}
  .wy-pins{position:absolute;left:0;right:0;bottom:-6%;margin:0;padding:0;grid-template-columns:minmax(0,.56fr) minmax(0,.44fr);justify-content:space-between}
  .wy-pins li{padding:24px 26px}.wy-pins small{font-size:13px}
  .wy-pins li:nth-child(2){margin-top:110px;justify-self:end;max-width:300px}
  .wy-r5 .wy-md{padding-bottom:110px}
  .wy-line{margin-top:96px;font-size:30px}
}
@media (min-width:1200px){.wy-pins p{font-size:20px}}

/* ── 06 정성 — 짙은 초록 띠(잎 그림자 패럴랙스) + 큰 문장 + 유리 카드 ─────────── */
.wy-r.dark{color:#fff;background:#1d300c}
.wy-r6-bg{position:absolute;inset:-12% 0;z-index:-2;background-size:cover;background-position:center;opacity:.32;mix-blend-mode:luminosity;will-change:transform}
.wy-r.dark::after{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(80% 70% at 75% 30%,rgba(171,197,98,.16),transparent 70%),
  linear-gradient(rgba(20,32,10,.5),rgba(20,32,10,.82))}
.wy-r.dark .wy-big{-webkit-text-stroke-color:rgba(255,255,255,.16)}
.wy-r.dark .wy-no{color:var(--lime)}
.wy-r.dark .wy-bd>p{color:rgba(255,255,255,.76)}
.wy-r.dark .wy-arch{box-shadow:0 30px 80px rgba(0,0,0,.35)}
.wy-qt{margin:18px 0!important;font-family:var(--serif);font-size:24px!important;font-weight:600!important;line-height:1.5!important;color:#fff!important;letter-spacing:-.035em}
.wy-qt .ln{display:inline;background:linear-gradient(transparent 62%,rgba(171,197,98,.45) 62% 92%,transparent 92%) 0 0/100% 100% no-repeat;
  -webkit-box-decoration-break:clone;box-decoration-break:clone;transition:background-size 1s var(--wy-ease) .7s}
.wy-qt .ln+.ln{transition-delay:1.2s}
.spfx .wy-bd:not(.in) .wy-qt .ln{background-size:0 100%}
.wy-glass{display:grid;gap:12px;margin-top:28px}
.wy-glass li{display:grid;grid-template-columns:auto 1fr;gap:14px;padding:20px 22px;border:1px solid rgba(255,255,255,.16);border-radius:18px;
  background:rgba(255,255,255,.07);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.wy-glass .n{font-family:var(--deco);font-size:24px;font-weight:700;line-height:1.1;color:var(--lime)}
.wy-glass p{font-size:15px;font-weight:500;line-height:1.75;color:rgba(255,255,255,.86);text-wrap:pretty}
@media (min-width:768px){.wy-qt{font-size:30px!important}.wy-glass{grid-template-columns:1fr 1fr}}
@media (min-width:1024px){.wy-r6 .wy-arch{width:min(90%,560px)}.wy-glass{grid-template-columns:1fr}}
@media (min-width:1200px){.wy-qt{font-size:34px!important}.wy-glass p{font-size:16px}}

/* ── 07 결과 — 사진 + 절개 비교 도해(밀리미터 눈금자, 막대가 자람) + 띠 문장 ──────── */
.wy-wide{position:relative;aspect-ratio:4/3;overflow:hidden;border-radius:24px;clip-path:inset(0 round 24px);transition:clip-path 1.3s cubic-bezier(.65,0,.35,1),opacity .6s}
.spfx .wy-wide[data-rv]:not(.in){opacity:1;translate:0 0;clip-path:inset(0 0 0 100% round 24px)}
.wy-cut{position:relative;width:min(94%,520px);margin:-64px auto 0;padding:22px 20px 24px;border-radius:20px;background:#fff;box-shadow:0 22px 56px rgba(38,72,9,.16)}
.cut-h{display:flex;align-items:baseline;justify-content:space-between;gap:12px;font-family:var(--serif);font-size:17px;font-weight:600}
.cut-h small{font-family:var(--sans);font-size:12px;font-weight:700;color:var(--ink5)}
.cut-body{position:relative;margin-top:16px;padding-top:26px}
.cut-scale{position:absolute;left:0;right:0;top:0;height:22px;
  background:repeating-linear-gradient(90deg,var(--ink3) 0 1px,transparent 1px 1.25%) 0 100%/100% 6px no-repeat,
             repeating-linear-gradient(90deg,var(--ink5) 0 1px,transparent 1px 12.5%) 0 100%/calc(100% + 1px) 12px no-repeat}
.cut-scale span{position:absolute;bottom:14px;left:calc(var(--x) * 12.5%);translate:-50% 0;font-family:var(--deco);font-size:13px;font-weight:700;line-height:1;color:var(--ink5)}
.cut-scale span:first-child{translate:0 0}.cut-scale span:nth-child(9){translate:-100% 0}
.cut-scale em{position:absolute;right:0;top:-14px;font-style:normal;font-size:11px;font-weight:700;color:var(--ink5)}
.cut-row{position:relative;margin-top:14px}
.cut-row .lb{display:block;font-size:13px;font-weight:700;color:var(--ink7)}
.cut-row .lb b{font-family:var(--deco);font-size:20px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
.cut-row .bar{position:relative;display:block;height:12px;margin-top:6px;width:calc(var(--w) * 100%);border-radius:999px;transform-origin:0 50%;
  transition:scale 1.4s var(--wy-ease) calc(var(--d,0s) + var(--bd,.4s))}
.cut-row.tissue .bar{height:22px;background:linear-gradient(90deg,#f3e6cf,#f0dcbf 86%,rgba(240,220,191,0));border-radius:999px 60% 60% 999px}
.cut-row.book{--bd:.8s}.cut-row.book .bar{background:repeating-linear-gradient(90deg,#bfc4b3 0 10px,#d6dacb 10px 14px)}
.cut-row.june{--bd:1.3s}.cut-row.june .lb,.cut-row.june .lb b{color:var(--green)}
.cut-row.june .bar{height:14px;background:var(--green);box-shadow:0 0 0 5px rgba(171,197,98,.3)}
.cut-row.june .bar .lf{position:absolute;right:-12px;top:-14px;width:18px;height:24px;color:var(--lime);rotate:30deg;transition:scale .5s cubic-bezier(.3,1.8,.5,1) calc(var(--d,0s) + 2.5s)}
.spfx .wy-cut:not(.in) .bar{scale:0 1}
.spfx .wy-cut:not(.in) .cut-row.june .lf{scale:0}
.wy-banner{position:relative;margin-top:56px;padding:28px 24px;border-radius:20px;background:var(--green);color:#fff;overflow:hidden;
  font-family:var(--serif);font-size:20px;font-weight:600;line-height:1.55;text-align:center;text-wrap:balance}
.wy-banner::before{content:"";position:absolute;inset:0;background:url(g/leaf.png) right -40px center/220px no-repeat;opacity:.12}
.wy-banner span{position:relative}
@media (min-width:768px){.wy-cut{padding:28px 30px 30px}.cut-h{font-size:19px}.wy-banner{font-size:26px;padding:36px 40px}}
@media (min-width:1024px){
  .wy-r7 .wy-md{padding-bottom:230px}
  .wy-cut{position:absolute;left:5%;right:5%;bottom:0;width:auto;margin:0;padding:34px 38px 36px}
  .cut-h{font-size:22px}.cut-h small{font-size:13px}.cut-body{margin-top:22px;padding-top:30px}.cut-scale span{font-size:15px}
  .cut-row{margin-top:18px}.cut-row .lb{font-size:15px}.cut-row .lb b{font-size:26px}
  .cut-row .bar{height:16px;margin-top:8px}.cut-row.tissue .bar{height:30px}.cut-row.june .bar{height:18px}
  .cut-row.june .bar .lf{width:22px;height:30px;top:-18px;right:-14px}
  .wy-banner{margin-top:96px;font-size:30px;padding:44px 56px}
}

/* ── 08 핫라인 — 타원 + 울리는 전화 카드 ───────────────────────────────── */
.wy-phone{position:relative;width:min(86%,300px);margin:-80px auto 0;padding:26px 24px 22px;border-radius:30px;background:var(--green-dk);color:#fff;text-align:center;
  box-shadow:0 26px 60px rgba(20,32,10,.35)}
.wy-phone::before{content:"";position:absolute;left:50%;top:10px;width:46px;height:5px;margin-left:-23px;border-radius:9px;background:rgba(255,255,255,.18)}
.wy-phone .ring{position:relative;display:grid;place-items:center;width:64px;height:64px;margin:6px auto 0;border-radius:50%;background:var(--lime);color:var(--green-dk)}
.wy-phone .ring svg{width:28px;height:28px;animation:wyBuzz 4.8s ease-in-out infinite}
.wy-phone .ring i{position:absolute;inset:0;border-radius:50%;border:2px solid var(--lime);animation:wyRing 3.6s ease-out infinite}
.wy-phone .ring i+i{animation-delay:1.8s}
@keyframes wyRing{from{scale:1;opacity:.55}to{scale:1.8;opacity:0}}
@keyframes wyBuzz{0%,20%,100%{rotate:0deg}4%,12%{rotate:-8deg}8%,16%{rotate:8deg}}
.wy-phone .lb{margin-top:20px;font-family:var(--deco);font-size:14px;font-weight:700;letter-spacing:.32em;color:var(--lime)}
.wy-phone .no{margin-top:4px;font-size:26px;font-weight:700;letter-spacing:.01em;font-variant-numeric:tabular-nums}
.wy-phone .sub{display:flex;align-items:center;justify-content:center;gap:6px;margin-top:10px;font-size:13px;font-weight:600;color:rgba(255,255,255,.72)}
.wy-phone .sub svg{width:15px;height:15px;color:var(--lime)}
@media (min-width:1024px){.wy-phone{position:absolute;left:-2%;bottom:4%;margin:0;width:min(60%,350px);padding:32px 28px 28px}
  .wy-phone .ring{width:80px;height:80px}.wy-phone .ring svg{width:34px;height:34px}.wy-phone .lb{font-size:15px}.wy-phone .sub{font-size:14px}}
@media (min-width:1200px){.wy-phone .no{font-size:33px}}

/* ── 수술 이후에도 이어지는 진료 — 회복 가이드 · 수술 기록 ───────────────────── */
.wy-after{position:relative;overflow-x:clip;padding:var(--sec) 0;background:linear-gradient(#fff,#f1f8e7 30%,#f1f8e7 70%,#fff)}
.wy-ac{display:grid;gap:36px;margin-top:48px;align-items:center}
.wy-lb{display:inline-flex;align-items:center;gap:8px;padding:6px 14px;border-radius:999px;background:#fff;box-shadow:inset 0 0 0 1px var(--chip);font-size:13px;font-weight:700;color:var(--green)}
.wy-ac h3{margin-top:16px;font-family:var(--serif);font-size:25px;font-weight:600;line-height:1.42;letter-spacing:-.035em;text-wrap:balance}
.wy-ac-body{margin-top:18px}
.wy-ac-body p{font-size:15px;font-weight:500;line-height:1.85;color:var(--ink7);text-wrap:pretty}
.wy-ac-body p+p{margin-top:14px}
.wy-ac-body b{color:var(--ink);font-weight:700}
.wy-chips{display:flex;gap:8px;margin-top:20px}
.wy-chips li{display:flex;align-items:center;gap:6px;padding:8px 14px;border-radius:999px;background:var(--green);color:#fff;font-size:13px;font-weight:700}
.wy-chips svg{width:16px;height:16px}
.wy-cap{margin-top:22px;padding:16px 18px;border-radius:14px;background:#fff;font-size:15px;font-weight:600;line-height:1.6;color:var(--ink7)}
.wy-cap b{color:var(--green)}
/* 떠다니는 질문 말풍선 */
.wy-qs{position:relative;padding:20px 0}
.wy-qs .sp-oval{width:min(66%,360px)}
.wy-qs .q{position:absolute;max-width:230px;padding:12px 16px;border-radius:18px;background:#fff;box-shadow:0 16px 40px rgba(38,72,9,.14);
  font-size:14px;font-weight:600;line-height:1.5;color:var(--ink);animation:wyBob 6s ease-in-out infinite}
.wy-qs .q::before{content:"?";display:inline-grid;place-items:center;width:20px;height:20px;margin-right:8px;border-radius:50%;background:var(--lime);color:var(--green-dk);
  font-family:var(--deco);font-size:14px;font-weight:700;vertical-align:-3px}
.wy-qs .q1{left:0;top:8%}.wy-qs .q2{right:0;top:42%;animation-delay:-2s}.wy-qs .q3{left:2%;bottom:4%;animation-delay:-4s}
@keyframes wyBob{0%,100%{translate:0 0}50%{translate:0 -10px}}
/* 회복 안내 시간표 — 선이 그어지고 점이 차례로 */
.wy-tl{margin-top:48px;padding:26px 20px 22px;border-radius:24px;background:#fff;box-shadow:0 18px 50px rgba(38,72,9,.08)}
.tl-h{font-size:14px;font-weight:700;color:var(--green)}
.tl-head{display:none}
.wy-tl ol{position:relative;display:grid;gap:0;margin-top:14px}
.wy-tl ol::before{content:"";position:absolute;left:7px;top:14px;bottom:14px;width:2px;background:var(--lime);transform-origin:50% 0;transition:scale 1.4s var(--wy-ease) .3s}
.wy-tl li{position:relative;display:grid;grid-template-columns:16px 64px 1fr;align-items:center;gap:12px;padding:12px 0}
.wy-tl .dot{width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:inset 0 0 0 4px var(--green);
  transition:scale .5s cubic-bezier(.3,1.8,.5,1) calc(.4s + var(--i) * .22s)}
.wy-tl li b{font-family:var(--serif);font-size:18px;font-weight:700;color:var(--green-dk)}
.wy-tl li>span:last-child{font-size:15px;font-weight:600;color:var(--ink);transition:opacity .5s calc(.5s + var(--i) * .22s),translate .6s var(--wy-ease) calc(.5s + var(--i) * .22s)}
.spfx .wy-tl:not(.in) ol::before{scale:1 0}
.spfx .wy-tl:not(.in) .dot{scale:0}
.spfx .wy-tl:not(.in) li>span:last-child{opacity:0;translate:10px 0}
.tl-f{margin-top:16px;padding:14px 16px;border-radius:12px;background:var(--mint);font-size:14px;font-weight:700;line-height:1.6;color:var(--green-dk)}
/* 서류 세 장 — 화면에 들어오면 부채처럼 펼침 */
.wy-docs{position:relative;height:300px;margin:0 auto;width:min(100%,420px)}
.wy-docs .wy-sheet{position:absolute;left:50%;top:20px;width:176px;height:240px;margin-left:-88px;padding:22px 20px;border-radius:10px;background:#fff;
  box-shadow:0 0 0 1px rgba(208,212,196,.9),0 18px 40px rgba(38,72,9,.14);transition:rotate 1s var(--wy-ease),translate 1s var(--wy-ease),box-shadow .3s}
.wy-docs .sh-h{padding-bottom:12px;border-bottom:2px solid var(--green);font-family:var(--serif);font-size:16px;font-weight:600;color:var(--green-dk)}
.wy-docs .wy-sheet i{display:block;height:7px;margin-top:14px;border-radius:4px;background:#eceee6}
.wy-docs .wy-sheet i.s{width:62%}
.wy-docs .tag{position:absolute;right:-10px;top:58px;padding:5px 10px;border-radius:999px;background:var(--lime);color:var(--green-dk);font-size:12px;font-weight:800;rotate:6deg}
.wy-docs .d1{rotate:-12deg;translate:-52px 14px}.wy-docs .d2{rotate:2deg;translate:0 0;z-index:2}.wy-docs .d3{rotate:13deg;translate:54px 18px;z-index:1}
.spfx .wy-docs:not(.in) .wy-sheet{rotate:0deg;translate:0 0}
.wy-docs .wy-sheet:hover{z-index:3;box-shadow:0 0 0 2px var(--lime),0 26px 50px rgba(38,72,9,.2)}
.wy-docs .lf-box{position:absolute;right:8%;bottom:6px;width:34px;height:46px;color:var(--lime);transform-origin:50% 95%;animation:docSway 6s ease-in-out infinite}
.wy-docs .lf-box .lf{width:100%;height:100%}
@media (min-width:768px){
  .wy-ac h3{font-size:30px}.wy-ac-body p{font-size:16px}
  .wy-qs{padding:36px 0}.wy-qs .q{font-size:15px;max-width:260px}
  .wy-tl{padding:34px 36px 30px}
  .tl-head{display:none}
  .wy-tl ol{grid-template-columns:repeat(5,minmax(0,1fr));margin-top:26px}
  .wy-tl ol::before{left:8%;right:8%;top:7px;bottom:auto;width:auto;height:2px;transform-origin:0 50%}
  .spfx .wy-tl:not(.in) ol::before{scale:0 1}
  .wy-tl li{grid-template-columns:1fr;justify-items:center;text-align:center;gap:8px;padding:0 6px}
  .wy-tl li>span:last-child{font-size:15px;text-wrap:balance}
  .spfx .wy-tl:not(.in) li>span:last-child{translate:0 10px}
  .wy-docs{height:420px;width:min(100%,560px)}.wy-docs .wy-sheet{width:250px;height:330px;margin-left:-125px}
  .wy-docs .d1{translate:-120px 14px}.wy-docs .d3{translate:122px 18px}
}
@media (min-width:1024px){
  .wy-ac{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(56px,7vw,128px);margin-top:72px}
  .wy-ac.rev .wy-docs{order:-1}
  .wy-qs .sp-oval{width:min(72%,440px)}.wy-qs .q{font-size:16px;max-width:300px;padding:14px 18px}
  .wy-docs{height:480px}.wy-docs .wy-sheet{width:280px;height:370px;margin-left:-140px;padding:28px 24px}.wy-docs .sh-h{font-size:19px}
  .wy-docs .wy-sheet i{height:8px;margin-top:17px}.wy-docs .tag{font-size:13px;top:66px}
  .wy-docs .d1{translate:-140px 16px}.wy-docs .d3{translate:142px 20px}
  .wy-tl{margin-top:64px}
}
@media (min-width:1200px){.wy-ac h3{font-size:36px}.wy-ac-body p{font-size:16px}.wy-tl li b{font-size:22px}.wy-tl li>span:last-child{font-size:16px}}


@media (prefers-reduced-motion:reduce){
  .wy-hero-8,.wy-phone .ring svg,.wy-phone .ring i,.wy-qs .q,.wy-line .lf,.wy-docs .lf-box{animation:none}
  .wy-phone .ring i{display:none}
}

/* 진료 안내 서브 페이지(진료시간·오시는 길 · 예약 안내 · 비용·보험 안내) — 2026-10-16 사용자 「진료 안내 메뉴의 하위 메뉴 페이지도 구성」.
   마크업 = build_guide.py, 공통 틀(머리 그림·탭·.sp-sec·.sp-split·타원 사진) = sub.css. 이 파일은 클래스 gd- 만 쓴다.
   사용자 취향(재미있되 보기 편하게): 테두리·그림자는 얇고 옅게, 움직임은 느리고 작게(튀는 이징 없음), 강조는 한 번에 하나.
   숨겼다 나타내는 상태는 html.spfx 일 때만(site.js) — 스크립트가 없거나 움직임 줄이기 설정이면 처음부터 다 보인다. */
.gd-todo{color:var(--ink5);font-weight:600}
.gd-lf{display:block;fill:var(--lime);fill-opacity:.55}
.gd-lf .v{fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round}
.gd .sp-ovalbox.gd-ob{isolation:isolate}
.gd-ob>.gd-lf{position:absolute;z-index:1;left:max(4%,calc(50% - 250px));bottom:4%;width:56px;transform:rotate(-24deg);transform-origin:50% 95%;animation:docSway 7s ease-in-out infinite}
@keyframes gdFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@media (min-width:768px){.gd-ob>.gd-lf{width:72px}}

/* ── 진료시간 ── */
.gd-hcard{margin-top:28px;padding:8px 22px 24px;border:1px solid rgba(49,106,0,.1);border-radius:20px;background:#fff;box-shadow:0 14px 40px rgba(38,72,9,.06)}
.gd-tbl{margin:0}
.gd-tbl div{display:flex;justify-content:space-between;gap:16px;padding:16px 2px;border-bottom:1px solid var(--line)}
.gd-tbl dt{font-weight:700}
.gd-tbl dd,.gd-call dd{margin:0}
.gd-call{display:flex;flex-wrap:wrap;gap:8px 28px;margin:18px 2px 22px}
.gd-call div{display:flex;gap:10px;font-size:15px}
.gd-call dt{font-weight:700;color:var(--green)}
.gd-call dd{font-weight:700}
@media (min-width:768px){.gd-hcard{margin-top:36px;max-width:560px;padding:12px 32px 30px}.gd-tbl div{padding:18px 2px;font-size:16px}}

/* ── 오시는 길 ── */
.gd-loc-in{display:grid;gap:16px;margin-top:32px}
.gd-map{position:relative;overflow:hidden;aspect-ratio:1/1;border:1px solid rgba(49,106,0,.12);border-radius:24px;background:#e8eee0}
.gd-map iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.gd-loc-info{display:flex;flex-direction:column;padding:6px 22px 24px;border:1px solid rgba(49,106,0,.1);border-radius:24px;background:#fff}
.gd-dl{margin:0}
.gd-dl div{display:grid;grid-template-columns:92px minmax(0,1fr);gap:12px;padding:18px 0;border-bottom:1px solid var(--line)}
.gd-dl dt{display:flex;align-items:center;gap:8px;align-self:start;font-weight:700;color:var(--green)}
.gd-dl dt svg{flex:none;width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.gd-dl dd{margin:0;font-weight:600;line-height:1.6}
.gd-maps{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.gd-mapbtn{display:inline-flex;align-items:center;gap:8px;height:46px;padding:0 18px;border:1px solid var(--line);border-radius:999px;background:#fff;
  font-size:15px;font-weight:700;transition:border-color .3s,color .3s}
.gd-mapbtn svg{width:18px;height:18px;color:var(--green)}
.gd-mapbtn:hover{border-color:var(--green);color:var(--green)}
@media (min-width:768px){.gd-loc-in{margin-top:48px}.gd-map{aspect-ratio:16/10}.gd-loc-info{padding:8px 32px 30px}}
@media (min-width:1024px){
  .gd-loc-in{grid-template-columns:minmax(0,1.5fr) minmax(0,.8fr);gap:24px}
  .gd-map{aspect-ratio:auto;min-height:460px}
  .gd-loc-info{align-self:start}
}
@media (min-width:1200px){.gd-loc-in{margin-top:64px}.gd-map{min-height:520px}.gd-loc-info{padding:12px 40px 40px}.gd-dl div{grid-template-columns:104px minmax(0,1fr);padding:22px 0;font-size:17px}}

/* ── 예약 안내: 우리가 예약을 권하는 이유 — 타원 사진 옆 둥근 표 ── */
.gd-badge{position:absolute;z-index:1;right:max(2%,calc(50% - 230px));top:8%;display:grid;place-items:center;width:112px;aspect-ratio:1;margin:0;
  border:1px solid rgba(49,106,0,.1);border-radius:50%;background:#fff;box-shadow:0 14px 34px rgba(38,72,9,.1);text-align:center}
.gd-badge>span{font-family:var(--serif);font-size:14px;font-weight:600;line-height:1.45;color:var(--ink7);animation:gdFloat 7s ease-in-out infinite}
.gd-badge b{font-size:22px;color:var(--green)}
.gd-badge .gd-lf{position:absolute;width:26px;right:-6px;top:-10px;transform:rotate(28deg)}
@media (min-width:768px){.gd-badge{width:140px}.gd-badge>span{font-size:16px}.gd-badge b{font-size:28px}}

/* 예약 방법 — 3단계(점선으로 잇기) + 예약 확정 문자 */
.gd-steps{display:grid;gap:30px;max-width:980px;margin:40px auto 0;padding:0;list-style:none}
.gd-steps li{position:relative;padding-left:72px}
.gd-steps .n{position:absolute;left:0;top:0;display:grid;place-items:center;width:52px;height:52px;border:1px solid rgba(49,106,0,.22);border-radius:50%;
  background:#fff;font-family:var(--deco);font-size:22px;font-weight:600;line-height:1;color:var(--green)}
.gd-steps li:not(:last-child)::before{content:"";position:absolute;left:26px;top:60px;bottom:-24px;border-left:1px dashed rgba(49,106,0,.35)}
.gd-steps strong{display:block;padding-top:11px;font-family:var(--serif);font-size:20px;font-weight:600;line-height:1.4}
.gd-steps p{margin-top:6px;font-size:15px;line-height:1.65;color:var(--ink7)}
@media (min-width:768px){
  .gd-steps{grid-template-columns:repeat(3,minmax(0,1fr));gap:0;margin-top:56px}
  .gd-steps li{padding:0 12px;text-align:center}
  .gd-steps .n{position:relative;width:68px;height:68px;margin:0 auto 18px;font-size:26px}
  .gd-steps li:not(:last-child)::before{left:calc(50% + 46px);right:calc(-50% + 46px);top:34px;bottom:auto;border-left:0;border-top:1px dashed rgba(49,106,0,.35)}
  .gd-steps strong{padding-top:0;font-size:22px}
}
@media (min-width:1200px){.gd-steps{margin-top:72px}.gd-steps strong{font-size:24px}.gd-steps p{font-size:16px}}

.gd-sms{max-width:360px;margin:56px auto 0;text-align:center}
.gd-sms h3{font-family:var(--serif);font-size:19px;font-weight:600;line-height:1.5}
.gd-phone{width:min(100%,304px);margin:20px auto 0;padding:11px;border:1px solid rgba(49,106,0,.12);border-radius:42px;background:#fff;box-shadow:0 24px 60px rgba(38,72,9,.12)}
.gd-scr{position:relative;min-height:330px;padding:48px 14px 26px;border-radius:32px;background:#f4f7ef;text-align:left}
.gd-scr::before{content:"";position:absolute;top:12px;left:50%;width:76px;height:20px;margin-left:-38px;border-radius:999px;background:#e3e8db}
.gd-from{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:700;color:var(--ink7)}
.gd-from .av{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#fff}
.gd-from .gd-lf{width:13px;fill-opacity:1}
.gd-msg{display:grid;margin:12px 0 0 38px}
.gd-msg>*{grid-area:1/1}
.gd-typing{display:none;align-self:start;justify-self:start;gap:4px;padding:12px 14px;border-radius:4px 16px 16px 16px;background:#fff}
.gd-typing i{width:6px;height:6px;border-radius:50%;background:var(--ink3);animation:gdDot 1.4s ease-in-out infinite}
.gd-typing i:nth-child(2){animation-delay:.2s}.gd-typing i:nth-child(3){animation-delay:.4s}
@keyframes gdDot{0%,60%,100%{opacity:.35}30%{opacity:1}}
.gd-bubble{margin:0;padding:12px 14px;border-radius:4px 18px 18px 18px;background:#fff;box-shadow:0 4px 14px rgba(38,72,9,.05);list-style:none}
.gd-bubble li{display:flex;align-items:flex-start;gap:8px;padding:7px 0;font-size:14px;font-weight:600;line-height:1.5}
.gd-bubble li+li{border-top:1px solid #eef1e8}
.gd-ck{flex:none;width:16px;height:16px;margin-top:3px;fill:none;stroke:var(--green);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
/* 화면에 들어오면: 입력 중 점 → 말풍선 → 항목 하나씩 */
.spfx .gd-typing{display:inline-flex;transition:opacity .4s ease 1.5s}
.spfx .gd-sms.in .gd-typing{opacity:0}
.spfx .gd-bubble{opacity:0;transform:translateY(10px);transition:opacity .7s ease 1.7s,transform .9s cubic-bezier(.2,.7,.2,1) 1.7s}
.spfx .gd-sms.in .gd-bubble{opacity:1;transform:none}
.spfx .gd-bubble li{opacity:0;transition:opacity .6s ease calc(2s + var(--i) * .35s)}
.spfx .gd-sms.in .gd-bubble li{opacity:1}
@media (min-width:768px){.gd-sms{margin-top:72px}.gd-sms h3{font-size:21px}}

/* 오시기 전에 */
.gd-btns{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px;margin-top:28px}

/* 원장 핫라인 — 수술 후 긴급 연락(사용자 결정: 보조 정보로 작게) */
.gd-hot{padding-top:0}
.gd-hot-in{display:grid;gap:28px;padding:36px 22px;border-radius:28px;background:var(--mint)}
.gd-hot-card{padding:28px 22px;border-radius:22px;background:#fff;text-align:center}
.gd-hot-card .mo{display:inline-grid;place-items:center;width:46px;height:46px;border-radius:50%;background:var(--mint)}
.gd-hot-card .mo svg{width:20px;height:20px;fill:none;stroke:var(--green);stroke-width:1.7;stroke-linejoin:round}
.gd-hot-card .lb{margin-top:14px;font-family:var(--deco);font-size:15px;font-weight:700;line-height:1;letter-spacing:.24em;color:var(--green)}
.gd-hot-card .no{margin-top:10px;font-size:24px;font-weight:700;letter-spacing:0}
.gd-hot-card .sub{margin-top:10px;font-size:13px;line-height:1.6;color:var(--ink5)}
.gd-end{margin-top:36px;text-align:center;font-family:var(--serif);font-size:19px;font-weight:600;line-height:1.6;color:var(--green)}
@media (min-width:768px){.gd-hot-in{padding:56px 48px}.gd-hot-card .no{font-size:28px}.gd-end{margin-top:48px;font-size:24px}}
@media (min-width:1024px){.gd-hot-in{grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:64px;align-items:center;padding:72px 80px}}
@media (min-width:1200px){.gd-end{margin-top:64px;font-size:28px}}

/* ── 비용·보험 안내: 타원 사진 둘레의 말머리표(보험 적용을 가르는 세 가지) ── */
.gd-chips{position:absolute;inset:0;z-index:1;margin:0;padding:0;list-style:none;pointer-events:none}
.gd-chips li{position:absolute;display:flex;align-items:center;gap:8px;padding:10px 16px;border:1px solid rgba(49,106,0,.1);border-radius:999px;background:#fff;
  box-shadow:0 10px 28px rgba(38,72,9,.1);font-size:14px;font-weight:700;white-space:nowrap;animation:gdFloat 8s ease-in-out calc(var(--i) * -2.6s) infinite}
.gd-chips li::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--lime)}
.gd-chips .c1{left:max(0px,calc(50% - 240px));top:16%}
.gd-chips .c2{right:max(0px,calc(50% - 250px));top:47%}
.gd-chips .c3{left:max(4px,calc(50% - 210px));bottom:12%}
@media (min-width:768px){.gd-chips li{padding:12px 20px;font-size:15px}}

/* 진료별 비용 안내 */
.gd-pl{margin:32px 0 0;padding:0;list-style:none;border-top:1px solid var(--line)}
.gd-pl>li{display:flex;gap:16px;padding:26px 0;border-bottom:1px solid var(--line)}
.gd-pl .n{flex:none;width:38px;font-family:var(--deco);font-size:28px;font-weight:600;line-height:1.1;color:#97b356}
.gd-pl h3{font-family:var(--serif);font-size:20px;font-weight:600;line-height:1.45}
.gd-pl h3 a{display:inline-flex;align-items:center;gap:10px;transition:color .3s}
.gd-pl h3 a .arrow{width:13px;color:var(--green);transition:translate .4s cubic-bezier(.2,.7,.2,1)}
.gd-pl h3 a:hover{color:var(--green)}.gd-pl h3 a:hover .arrow{translate:4px 0}
.gd-pl h3 i{display:none;margin:0 10px;font-style:normal;color:var(--ink3)}   /* 휴대폰 = 두 진료 이름을 줄마다, 768 이상 = 한 줄에 「·」로 */
.gd-nw{white-space:nowrap}
.gd-pl .body{margin-top:8px}
.gd-tags{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0 0;padding:0;list-style:none}
.gd-tags li{padding:5px 12px;border:1px solid rgba(49,106,0,.18);border-radius:999px;background:#fff;font-size:13px;font-weight:700;color:var(--green)}
.gd-nc{margin-top:28px;padding:20px 24px;border:1px dashed rgba(49,106,0,.3);border-radius:18px;background:rgba(255,255,255,.7)}
.gd-nc h3{font-size:15px;font-weight:700;color:var(--green)}
.gd-nc p{margin-top:6px;font-size:15px}
@media (max-width:767px){.gd-pl h3 a{display:flex;width:fit-content}}
@media (min-width:768px){.gd-pl h3 i{display:inline}.gd-pl{margin-top:44px}.gd-pl>li{gap:28px;padding:32px 0}.gd-pl .n{width:52px;font-size:36px}.gd-pl h3{font-size:23px}}
@media (min-width:1200px){
  .gd-prog-in{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);column-gap:96px;align-items:start}
  .gd-prog-in>.sp-head{position:sticky;top:calc(var(--hh) + 120px)}
  .gd-pl{margin-top:0}.gd-pl>li{padding:36px 0}.gd-pl h3{font-size:26px}
}

/* 보험 청구와 서류 — 종이 석 장(계단처럼 겹쳐 제목이 다 보이게, 들어오면 한 묶음에서 펼쳐짐) */
.gd-docs{position:relative;width:min(88%,400px);aspect-ratio:1/1.2;margin:0 auto}
.gd-sheet{position:absolute;width:54%;aspect-ratio:3/4;padding:22px 18px;border:1px solid rgba(49,106,0,.08);border-radius:12px;background:#fff;
  box-shadow:0 18px 44px rgba(38,72,9,.1);transition:rotate 1.4s cubic-bezier(.2,.7,.2,1) .2s,translate 1.4s cubic-bezier(.2,.7,.2,1) .2s}
.gd-sheet p{font-family:var(--serif);font-size:15px;font-weight:600;line-height:1.4}
.gd-sheet .tag{display:inline-block;margin-top:8px;padding:3px 10px;border-radius:999px;background:var(--mint);font-size:11px;font-weight:700;color:var(--green)}
.gd-sheet i{display:block;height:6px;margin-top:12px;border-radius:3px;background:#edf1e6}
.gd-sheet i:first-of-type{margin-top:18px}
.gd-sheet i.s{width:60%}
.gd-sheet.d1{left:0;top:0;rotate:-4deg}
.gd-sheet.d2{left:22%;top:18%;z-index:1;rotate:1deg}
.gd-sheet.d3{left:44%;top:38%;z-index:2;rotate:5deg}
.spfx .gd-docs:not(.in) .gd-sheet{rotate:0deg}
.spfx .gd-docs:not(.in) .d1{translate:40% 30%}
.spfx .gd-docs:not(.in) .d3{translate:-40% -33%}
.gd-seal{position:absolute;z-index:3;right:2%;bottom:6%;display:grid;place-items:center;width:72px;aspect-ratio:1;border-radius:50%;background:var(--green);rotate:-12deg;
  box-shadow:0 10px 26px rgba(38,72,9,.2)}
.gd-seal .gd-lf{width:24px;fill:var(--lime);fill-opacity:1}
.gd-seal .gd-lf .v{stroke:var(--green)}
.gd-cap{margin-top:22px;padding-top:18px;border-top:1px solid var(--line);font-size:14px;font-weight:700;color:var(--green)}
@media (min-width:768px){.gd-sheet{padding:28px 24px}.gd-sheet p{font-size:18px}.gd-sheet .tag{font-size:12px}.gd-seal{width:88px}.gd-seal .gd-lf{width:30px}.gd-cap{font-size:15px}}

/* 맺음 — 지인 할인도, 조건부 할인도 없습니다 */
.gd-band{padding:var(--sec) 0;background:var(--mint);text-align:center}
.gd-band-leaf{width:80px;height:auto;margin:0 auto 22px;transform-origin:30% 90%;animation:docSway 6s ease-in-out infinite}
.gd-band p{font-family:var(--serif);font-size:21px;font-weight:600;line-height:1.6;color:var(--green)}
@media (min-width:768px){.gd-band-leaf{width:96px}.gd-band p{font-size:28px}}
@media (min-width:1200px){.gd-band-leaf{width:112px;margin-bottom:28px}.gd-band p{font-size:34px}}

/* 지하철 — 오시는 길 맨 위에 크게(2026-10-16 사용자 「"선릉역(2호선·분당선) 7번출구 도보 1분" 잘 살려줘」). 노선 칩 = footer.css 「지하철」 */
.gd-subway{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:6px 16px;margin-top:28px;padding:20px 22px;border-radius:24px;background:#fff;
  box-shadow:inset 0 0 0 1px rgba(49,106,0,.14),0 14px 36px rgba(38,72,9,.08)}
.gd-sw-ic{grid-row:1/3;display:grid;place-items:center;width:56px;height:56px;border-radius:50%;background:var(--green);color:#fff}
.gd-sw-ic svg{width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.gd-sw-l{display:flex;gap:6px}
.gd-sw-l .sw-l{height:24px;font-size:13px}
.gd-sw-t{font-family:var(--serif);font-size:22px;font-weight:600;line-height:1.4;letter-spacing:-.03em;color:var(--ink)}
.gd-sw-t b{color:var(--green);font-weight:700}
.gd-dl .sw{font-size:inherit}
@media (min-width:768px){.gd-subway{margin-top:40px;padding:24px 30px;gap:6px 20px}.gd-sw-ic{width:64px;height:64px}.gd-sw-ic svg{width:32px;height:32px}.gd-sw-t{font-size:28px}}
@media (min-width:1200px){.gd-subway{margin-top:48px;padding:28px 36px}.gd-sw-ic{width:72px;height:72px}.gd-sw-l .sw-l{height:26px;font-size:14px}.gd-sw-t{font-size:32px}}
.gd-dl .sw-t{white-space:normal}.gd-dl .sw-t b{white-space:nowrap}   /* 좁은 칸에서는 「선릉역 7번 출구」는 붙여 두고 줄을 넘긴다 */


/* ══ 진료 · 수술 페이지(부유방 · 여유증) — build_program.py, 2026-10-27 원장님 요청 「진료와 수술 분리」 ══════════════════════════════
   예전 부유방 페이지(axilla.css)의 머리 사진 · 그림 · 바탕색 규칙(흰색 · 크림 · 진한 녹색 셋)을 이어받아, 네 페이지가 같은 부품만 쓴다:
   섹션 머리(영문 이름표 + 제목) · 카드 목록 · 그림 틀 · 회복 줄 · 맺음 띠 · 짝 페이지 단추. 글자 크기는 사이트 본문보다 작게 두지 않는다 */
.prg{--cream:#f7f5e7;--paper:#fbfaf3}   /* body 클래스 — .pg 는 site.css 메인 넘김 단추라 쓰지 않음 */

/* 머리 — 다른 서브 페이지와 같은 사진 머리(sub.css .sp-hero), 글은 왼쪽 · 덮개는 글 쪽만 짙게(PC) */
.pg-hero{text-align:left}
.pg-hero .sp-bc{justify-content:flex-start}
.pg-hero .sp-hero-bg{background-position:70% 50%}
.pg-hero.duo .sp-hero-bg.pc{display:none}   /* 사진 두 벌(부유방 진료) — 휴대폰·태블릿 = .mo, PC = .pc */
.pg-hero .nm{display:table;margin:0 0 14px;padding:6px 14px;border-radius:999px;background:var(--green);color:#fff;font-family:var(--sans);font-size:16px;font-weight:700;line-height:1.4;letter-spacing:0}
.pg-kick{margin-top:16px;font-size:15px;font-weight:600;line-height:1.5;color:rgba(255,255,255,.86)}
.pg-hero .sp-en{letter-spacing:.2em}
@media (max-width:1023px){   /* 사진이 두 벌인 머리(부유방 진료) — 휴대폰·태블릿은 위 사진, 아래 벽 색에 글(예전 부유방 페이지 그대로) */
  .pg-hero.duo{--ph:380px;min-height:0;padding:calc(var(--ph) - 60px) 0 40px;background:#4a5843}
  .pg-hero.duo .sp-hero-bg{inset:-64px 0 auto;height:calc(var(--ph) + 64px);background-position:30% 30%}
  .pg-hero.duo::after{background:linear-gradient(180deg,rgba(74,88,67,0) calc(var(--ph) - 170px),#4a5843 calc(var(--ph) - 30px))}
}
@media (min-width:768px) and (max-width:1023px){.pg-hero.duo{--ph:520px;padding-bottom:56px}.pg-hero.duo .sp-hero-bg{background-position:50% 30%}}
@media (min-width:768px){.pg-kick{font-size:17px}}
@media (min-width:1024px){.pg-hero{min-height:520px;padding:56px 0 64px}
  .pg-hero::after{background:linear-gradient(90deg,rgba(16,23,10,.66),rgba(16,23,10,.46) 38%,rgba(16,23,10,.14) 70%)}
  .pg-hero.duo .sp-hero-bg.pc{display:block;background-position:88% 30%}.pg-hero.duo .sp-hero-bg.mo{display:none}
  .pg-hero.duo::after{background:linear-gradient(90deg,rgba(16,23,10,.62),rgba(16,23,10,.42) 34%,rgba(16,23,10,0) 58%)}}
@media (min-width:1200px){.pg-hero{min-height:580px}.pg-hero .nm{font-size:17px}.pg-kick{font-size:19px}}

/* 섹션 바탕 — 흰색 · 크림 · 진한 녹색(이웃끼리 겹치지 않게) */
.pg-sec.cr{background:var(--cream)}
.pg-sec.dk{background:var(--green-dk);color:#fff}
.pg-head .h2{text-wrap:balance}
.pg-en{margin-bottom:10px;font-family:var(--deco);font-size:15px;font-weight:700;line-height:1.2;letter-spacing:.2em;color:var(--green)}
.pg-sec.dk .pg-en{color:var(--lime)}
.pg-en,.pg-card .lab,.pg-pre .lab{font-variant-numeric:lining-nums}   /* Cormorant 숫자를 옛 숫자꼴(o1) 대신 1 · 2 로 */
.pg-head.c{margin-inline:auto;text-align:center}
.pg-head.c + *{margin-top:32px}

/* 글 · 그림 두 칸 */
.pg-row{display:grid;gap:32px;align-items:center}
.pg-tx .pg-cards{margin-top:24px}
.pg-fg{min-width:0}
@media (min-width:1024px){
  .pg-row{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:72px}
  .pg-row.rev .pg-tx{order:2}
  .pg-head.c + *{margin-top:48px}
}
@media (min-width:1200px){.pg-row{gap:104px}.pg-tx .pg-cards{margin-top:36px}.pg-en{font-size:16px}}

/* 카드 목록 — 흰 바탕 위 = 크림 카드, 크림 바탕 위 = 흰 카드(얇은 테두리), 강조 카드(.hl) = 연두 바탕 */
.pg-cards{display:grid;gap:12px;list-style:none;margin:0;padding:0}
.pg-card{position:relative;padding:22px 22px 24px;border-radius:20px;background:var(--paper);box-shadow:inset 0 0 0 1px rgba(49,106,0,.08)}
.pg-sec.cr .pg-card{background:#fff}
.pg-card.hl{background:var(--mint);box-shadow:inset 0 0 0 1px rgba(49,106,0,.18)}
.pg-card h3{font-family:var(--serif);font-size:19px;font-weight:600;line-height:1.45;letter-spacing:-.025em;color:var(--ink)}
.pg-card .tx{margin-top:8px;font-size:15.5px;font-weight:500;line-height:1.7;color:var(--ink7)}
.pg-card .lab{margin-bottom:6px;font-family:var(--deco);font-size:15px;font-weight:700;letter-spacing:.14em;color:var(--green)}
.pg-card .meta{display:inline-block;margin-top:8px;padding:3px 12px;border-radius:999px;background:#fff;box-shadow:inset 0 0 0 1px rgba(49,106,0,.2);font-size:14px;font-weight:600;color:var(--green)}
.pg-sec.cr .pg-card .meta{background:var(--paper)}
.pg-card .badge{display:inline-block;margin-top:14px;padding:5px 14px;border-radius:999px;background:var(--green);color:#fff;font-size:14px;font-weight:700}
.pg-card .pic{margin:-6px -6px 16px;border-radius:14px;overflow:hidden;background:#fdf6ee}
.pg-card .pic img{display:block;width:100%;height:auto}
.pg-ic{display:block;width:56px;height:56px;margin-bottom:12px;padding:6px;border-radius:50%;background:var(--mint)}
.pg-sec.cr .pg-ic{background:var(--cream)}
/* 진한 녹색 바탕 위 카드 */
.pg-sec.dk .pg-card{background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
.pg-sec.dk .pg-card h3{color:#fff}
.pg-sec.dk .pg-card .tx{color:rgba(255,255,255,.78)}
.pg-sec.dk .pg-card .lab{color:var(--lime)}
.pg-sec.dk .pg-card.hl{background:var(--lime);box-shadow:none}
.pg-sec.dk .pg-card.hl h3,.pg-sec.dk .pg-card.hl .tx{color:var(--green-dk)}
.pg-sec.dk .pg-card.hl .lab{color:var(--green-dk)}
@media (min-width:768px){
  .pg-cards{gap:16px}
  .pg-cards.n2,.pg-cards.n4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pg-cards.n3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .pg-card{padding:26px 26px 28px}
  .pg-card h3{font-size:20px}.pg-card .tx{font-size:16px}
}
@media (min-width:1200px){
  .pg-cards{gap:20px}
  .pg-cards.n4{grid-template-columns:repeat(4,minmax(0,1fr))}
  .pg-card{padding:30px 30px 32px;border-radius:24px}
  .pg-card h3{font-size:22px}.pg-card .tx{font-size:16.5px}
  .pg-ic{width:64px;height:64px}
  .pg-cards.wide .pg-card{padding:40px 44px}
}
/* 단계 카드(STEP) — 번호가 이어지는 느낌만: 카드 사이 가는 화살표(PC) */
@media (min-width:1024px){
  .pg-cards.steps.n3 .pg-card:not(:last-child)::after,.pg-cards.steps.n4 .pg-card:not(:last-child)::after{content:"";position:absolute;top:50%;right:-15px;z-index:1;width:10px;height:10px;
    border-top:2px solid var(--lime);border-right:2px solid var(--lime);rotate:45deg}
  .pg-tx .pg-cards.steps .pg-card::after{display:none}
}
/* 짝 비교(지방 vs 유선) — 가운데 vs 동그라미(PC) */
.pg-cards.vs{position:relative}
@media (min-width:768px){.pg-cards.vs{gap:56px}
  .pg-cards.vs::before{content:"vs";position:absolute;left:50%;top:38%;z-index:2;display:grid;place-items:center;width:56px;height:56px;margin-left:-28px;border-radius:50%;
    background:var(--green);color:#fff;font-family:var(--deco);font-size:24px;font-weight:700;font-style:italic}}
/* 아이콘 카드 — 가운데 정렬 */
.pg-cards.icons .pg-card{text-align:center}
.pg-cards.icons .pg-ic{margin-inline:auto}

/* 체크리스트(부유방) — 가운데 겨드랑이 둥근 그림 + 네 칸(PC 는 그림 둘레 2 × 2) */
.pg-check{display:grid;gap:20px}
.pg-round{margin:0 auto;width:min(72%,300px);border-radius:50%;overflow:hidden;box-shadow:0 0 0 10px #fff}
.pg-round svg{display:block;width:100%;height:auto}
@media (min-width:1024px){
  .pg-check{grid-template-columns:minmax(0,1fr) 300px minmax(0,1fr);align-items:center;gap:28px}
  .pg-check .pg-round{grid-column:2;grid-row:1;width:100%}
  .pg-check .pg-cards{display:contents}
  .pg-check .pg-card:nth-child(1){grid-column:1;grid-row:1}.pg-check .pg-card:nth-child(2){grid-column:3;grid-row:1}
  .pg-check .pg-card:nth-child(3){grid-column:1;grid-row:2}.pg-check .pg-card:nth-child(4){grid-column:3;grid-row:2}
  .pg-check .pg-card{text-align:left;display:grid;grid-template-columns:64px 1fr;gap:4px 18px;align-items:start}
  .pg-check .pg-ic{grid-row:span 2;margin:0}
  .pg-check .pg-card .tx{margin-top:2px}
}
@media (min-width:1200px){.pg-check{grid-template-columns:minmax(0,1fr) 340px minmax(0,1fr);gap:36px}}

/* 그림 틀 — 그림 · 이름표(색 점) · 설명 */
.pg-fig{margin:0;padding:18px;border-radius:28px;background:var(--paper);box-shadow:inset 0 0 0 1px rgba(49,106,0,.08)}
.pg-sec.cr .pg-fig{background:#fff}
.pg-sec.dk .pg-fig{background:var(--paper);box-shadow:none}
.pg-fig img,.pg-fig picture,.pg-fig svg{display:block;width:100%;height:auto;border-radius:16px}
.pg-fig.milk{max-width:480px;margin-inline:auto;border-radius:220px 220px 28px 28px;padding-top:32px}
.pg-fig.milk .ab-pix{mix-blend-mode:multiply}
.pg-fig.spread,.pg-fig.inc{max-width:520px;margin-inline:auto}
.pg-fig .ab-pixwrap{position:relative}
.pg-fig .ab-lb{position:absolute;padding:4px 10px;border-radius:999px;background:rgba(255,255,255,.94);font-size:13.5px;font-weight:700;line-height:1.3;color:var(--ink);white-space:nowrap;box-shadow:0 2px 8px rgba(38,72,9,.08)}
.pg-fig .ab-lb.g{color:var(--green)}.pg-fig .ab-lb.r{color:#b0583f}
.pg-fig figcaption,.pg-cap{margin-top:12px;font-size:14px;line-height:1.5;text-align:center;color:var(--ink5)}
.pg-cap{margin-top:20px}.pg-cap.c{text-align:center}
.pg-sec.dk .pg-fig figcaption{color:var(--ink5)}
.pg-leg{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 18px;list-style:none;margin:14px 0 0;padding:0;font-size:15px;font-weight:600;color:var(--ink)}
.pg-leg i{display:inline-block;width:12px;height:12px;margin-right:7px;border-radius:50%;vertical-align:-1px}
.pg-leg .fat{background:#f2d36b}.pg-leg .gland{background:#e2826f}.pg-leg .cut{background:var(--green)}
.pg-two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.pg-two .pg-fig{padding:10px}
.pg-two figcaption{font-size:15px;font-weight:700;color:var(--ink)}
@media (min-width:1200px){.pg-fig{padding:22px}.pg-fig .ab-lb{font-size:14.5px}.pg-two{gap:16px}.pg-two .pg-fig{padding:14px}}

/* 사이트 사진 — 둥근 아치 틀 */
.pg-photo{margin:0 auto;width:100%;max-width:520px;aspect-ratio:4/5;border-radius:260px 260px 28px 28px;overflow:hidden}
.pg-photo span{display:block;width:100%;height:100%;background-size:cover;transition:scale 1.6s cubic-bezier(.2,.7,.2,1)}
.spfx .pg-photo:not(.in) span{scale:1.08}
@media (max-width:1023px){.pg-photo{max-width:420px;aspect-ratio:1/1}}

/* 회복 경과 — 휴대폰 세로 줄 · PC 가로 줄(시기 알약 + 점) */
.pg-tl{position:relative;display:grid;gap:0;list-style:none;margin:0;padding:0 0 0 28px}
.pg-tl::before{content:"";position:absolute;left:7px;top:10px;bottom:10px;width:2px;background:linear-gradient(var(--green),var(--lime))}
.pg-tl li{position:relative;padding:0 0 28px}
.pg-tl li::before{content:"";position:absolute;left:-27px;top:6px;width:14px;height:14px;border-radius:50%;background:#fff;box-shadow:inset 0 0 0 3px var(--green)}
.pg-tl .when{display:inline-block;padding:4px 14px;border-radius:999px;background:var(--green);color:#fff;font-size:14.5px;font-weight:700}
.pg-tl h3{margin-top:10px;font-family:var(--serif);font-size:19px;font-weight:600;line-height:1.45}
.pg-tl .tx{margin-top:6px;font-size:15.5px;line-height:1.7;color:var(--ink7)}
@media (min-width:1024px){
  .pg-tl{grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:20px;padding:30px 0 0}
  .pg-tl::before{left:0;right:0;top:6px;bottom:auto;width:auto;height:2px;background:linear-gradient(90deg,var(--green),var(--lime))}
  .pg-tl li{padding:20px 0 0}
  .pg-tl li::before{left:0;top:-31px}
  .pg-tl h3{font-size:20px}.pg-tl .tx{font-size:16px}
}
@media (min-width:1200px){.pg-tl{gap:32px}.pg-tl h3{font-size:22px}.pg-tl .tx{font-size:16.5px}.pg-tl .when{font-size:15px}}

/* 수술 전 사전 진료(PRE-OP) — 가로 띠 하나 */
.pg-pre{margin-bottom:16px;padding:22px 22px 24px;border-radius:20px;background:var(--mint);box-shadow:inset 0 0 0 1px rgba(49,106,0,.18)}
.pg-pre .lab{display:inline-block;padding:3px 12px;border-radius:999px;background:var(--green);color:#fff;font-family:var(--deco);font-size:14px;font-weight:700;letter-spacing:.12em}
.pg-pre h3{margin-top:10px;font-family:var(--serif);font-size:19px;font-weight:600;line-height:1.45}
.pg-pre .flow{display:grid;gap:8px;list-style:none;margin:14px 0 0;padding:0}
.pg-pre .flow li{position:relative;padding:10px 14px;border-radius:12px;background:#fff;font-size:15.5px;font-weight:500;line-height:1.55;color:var(--ink)}
.pg-pre .flow li:not(:last-child){margin-bottom:18px}
.pg-pre .flow li:not(:last-child)::after{content:"→";position:absolute;left:50%;bottom:-23px;translate:-50% 0;rotate:90deg;font-weight:700;color:var(--green)}   /* PPT 의 → (휴대폰은 아래로 돌림 — 글꼴 부분 집합에 있는 글자만) */
@media (min-width:1024px){
  .pg-pre{display:grid;grid-template-columns:auto 1fr;gap:6px 28px;align-items:center;padding:28px 32px;margin-bottom:20px}
  .pg-pre .lab{grid-row:span 2;align-self:start;margin-top:4px}
  .pg-pre h3{margin:0;font-size:21px}
  .pg-pre .flow{grid-auto-flow:column;grid-auto-columns:auto;justify-content:start;gap:34px;margin:8px 0 0}
  .pg-pre .flow li:not(:last-child){margin-bottom:0}
  .pg-pre .flow li:not(:last-child)::after{left:auto;bottom:auto;right:-25px;top:50%;translate:0 -50%;rotate:none}
  .pg-pre .flow li{font-size:16px}
}

/* 맺음 띠(PPT 마지막 장) — 진한 녹색 */
.pg-band{padding:var(--sec) 0;background:var(--green-dk);color:#fff;text-align:center}
.pg-band-leaf{width:72px;height:auto;margin:0 auto 22px;filter:brightness(1.7) saturate(.7);transform-origin:30% 90%;animation:docSway 6s ease-in-out infinite}
.pg-band .t{font-family:var(--serif);font-size:24px;font-weight:600;line-height:1.5;color:#fff;text-wrap:balance}
.pg-band .d{max-width:760px;margin:16px auto 0;font-size:16px;line-height:1.75;color:rgba(255,255,255,.8);text-wrap:pretty}
@media (min-width:768px){.pg-band-leaf{width:88px}.pg-band .t{font-size:32px}.pg-band .d{font-size:18px}}
@media (min-width:1200px){.pg-band-leaf{width:100px}.pg-band .t{font-size:40px}.pg-band .d{margin-top:22px;font-size:19px}}
@media (prefers-reduced-motion:reduce){.pg-band-leaf{animation:none}}

/* 짝 페이지(진료 ↔ 수술) 단추 */
.pg-pair{padding:48px 0;background:#fff}
.pg-pair a{display:grid;grid-template-columns:1fr auto;align-items:center;gap:4px 16px;max-width:760px;margin:0 auto;padding:24px 28px;border-radius:24px;
  background:var(--cream);box-shadow:inset 0 0 0 1px rgba(49,106,0,.12);transition:background .3s,box-shadow .3s}
.pg-pair .k{font-size:14px;font-weight:700;color:var(--green)}
.pg-pair strong{grid-column:1;font-family:var(--serif);font-size:22px;font-weight:600;color:var(--ink)}
.pg-pair .ar{grid-column:2;grid-row:1 / span 2;display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:var(--green);color:#fff;font-size:20px;transition:translate .3s}
@media (hover:hover){.pg-pair a:hover{background:var(--mint);box-shadow:inset 0 0 0 1px rgba(49,106,0,.24)}.pg-pair a:hover .ar{translate:4px 0}}
@media (min-width:1200px){.pg-pair{padding:72px 0}.pg-pair a{padding:30px 36px}.pg-pair strong{font-size:26px}}

/* 알림 상자(양성종양 PPT 의 💡 · ⚠️ 줄, 2026-10-29) — 이름표 + 글, 주의(.warn)는 붉은 기운. 그림이 있으면 768 이상에서 그림 | 글 */
.pg-tip{margin-top:28px;padding:22px 22px 24px;border-radius:20px;background:var(--mint);box-shadow:inset 0 0 0 1px rgba(49,106,0,.18)}
.pg-tip .lb{display:inline-block;padding:3px 12px;border-radius:999px;background:var(--green);color:#fff;font-size:14.5px;font-weight:700;line-height:1.5}
.pg-tip .tx{margin-top:10px;font-size:16px;font-weight:600;line-height:1.7;color:var(--ink);text-wrap:pretty}
.pg-tip.warn{background:#fbf0eb;box-shadow:inset 0 0 0 1px rgba(160,74,50,.2)}
.pg-tip.warn .lb{background:#a04a32}
.pg-tip .pic{margin:-6px -6px 16px;border-radius:14px;overflow:hidden;background:#fdf6ee}
.pg-tip .pic img{display:block;width:100%;height:auto}
@media (min-width:768px){
  .pg-tip{padding:26px 30px 28px}.pg-tip .tx{font-size:17px}
  .pg-tip.has-pic{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:28px;align-items:center}
  .pg-tip.has-pic .pic{margin:0}
}
@media (min-width:1024px){.pg-tip{margin-top:48px}}
@media (min-width:1200px){.pg-tip{padding:32px 40px}.pg-tip.has-pic{grid-template-columns:minmax(0,360px) minmax(0,1fr);gap:44px}.pg-tip .tx{font-size:18px}}

/* 자주 묻는 질문(양성종양) — 가이드북의 가는 선 목록(.gb-qa)을 가운데 한 줄로 */
.pg-qa{max-width:880px;margin-inline:auto}

/* 당일수술 띠(양성종양 수술 4쪽) — 수술 전 사전 진료 띠(.pg-pre) + 「당일 수술 연계 가능」(PC 는 제목 줄 오른쪽) */
.pg-pre .lab.ko{font-family:var(--sans);letter-spacing:.02em}
.pg-pre .tag{display:inline-block;margin-top:14px;padding:4px 14px;border-radius:999px;background:#fff;box-shadow:inset 0 0 0 1px rgba(49,106,0,.24);font-size:14.5px;font-weight:700;color:var(--green)}
@media (min-width:1024px){
  .pg-pre.bt{grid-template-columns:auto 1fr auto}
  .pg-pre.bt h3{grid-column:2}
  .pg-pre.bt .tag{grid-column:3;grid-row:1;margin:0}
  .pg-pre.bt .flow{grid-column:2 / span 2}
}

/* ══ 환자 안내 #1 · #2 · #3(메뉴에 없는 주소) — 종이 안내문을 웹에서 읽는 모양: 가운데 한 장, 장식 없이 글 위주 ══════════════════ */
.pt{background:#f4f3ec}
.pt-main{padding:calc(var(--hh) + 24px) 0 48px}
.pt-doc{width:min(100% - 2 * var(--pad),760px);margin:0 auto;padding:28px 22px 32px;border-radius:6px;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.06),0 0 0 1px rgba(0,0,0,.04)}
.pt-dh{padding-bottom:20px;border-bottom:2px solid var(--green)}
.pt-org{font-size:14px;font-weight:700;color:var(--green)}
.pt-kind{margin-top:14px;font-size:15px;font-weight:600;color:var(--ink5)}
.pt-t{margin-top:4px;font-family:var(--serif);font-size:26px;font-weight:600;line-height:1.4;letter-spacing:-.03em;color:var(--ink)}
.pt-for{margin-top:8px;font-size:16px;line-height:1.6;color:var(--ink7)}
.pt-body{padding:8px 0 4px;font-size:17px;line-height:1.8;color:var(--ink)}
.pt-body h2{margin-top:32px;padding-top:4px;font-family:var(--serif);font-size:21px;font-weight:600;line-height:1.45;color:var(--green-dk)}
.pt-body p{margin-top:12px}
.pt-body ul,.pt-body ol{margin:12px 0 0;padding-left:1.4em}
.pt-body ul{list-style:disc}.pt-body ol{list-style:decimal}   /* 사이트 기본이 list-style:none */
.pt-body li+li{margin-top:6px}
.pt-body table{width:100%;margin-top:16px;border-collapse:collapse;font-size:16px;line-height:1.6}
.pt-body th,.pt-body td{padding:10px 12px;border:1px solid var(--line);text-align:left;vertical-align:top}
.pt-body thead th{background:var(--cream,#f7f5e7);font-weight:700}
.pt-body tbody th{width:32%;font-weight:600;background:#fbfaf3}
.pt-note,.pt-warn{margin-top:20px;padding:16px 18px;border-radius:8px;background:#f1f8e7}
.pt-warn{background:#fdf1ec}
.pt-note .lb,.pt-warn .lb{font-size:15px;font-weight:700;color:var(--green)}
.pt-warn .lb{color:#a24a2f}
.pt-note p,.pt-warn p{margin-top:4px}
.pt-wait{margin-top:24px;padding:22px 20px;border-radius:8px;background:#f7f5e7;text-align:center}
.pt-wait .t{margin:0;font-family:var(--serif);font-size:19px;font-weight:600;color:var(--green-dk)}
.pt-wait p{margin-top:8px;font-size:16px;line-height:1.7;color:var(--ink7)}
.pt-sample{margin-top:20px;padding:10px 14px;border-radius:8px;background:#fff6d6;font-size:15px;font-weight:600;color:#7a5a00}
.pt-df{margin-top:28px;padding-top:18px;border-top:1px solid var(--line);font-size:16px;line-height:1.7;color:var(--ink7)}
.pt-df .tel{margin-top:2px;font-weight:700;color:var(--ink)}
.pt-df .tel a{color:var(--green);text-decoration:underline;text-underline-offset:3px}
.pt-more{width:min(100% - 2 * var(--pad),760px);margin:24px auto 0}
.pt-more .lb{font-size:15px;font-weight:700;color:var(--ink7)}
.pt-more ul{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:10px 0 0;padding:0}
.pt-more a{display:inline-block;padding:10px 16px;border-radius:999px;background:#fff;box-shadow:inset 0 0 0 1px var(--line);font-size:15px;font-weight:600;color:var(--green)}
.pt-more a:hover{background:#f1f8e7}
@media (min-width:768px){
  .pt-main{padding:calc(var(--hh) + 48px) 0 72px}
  .pt-doc{padding:48px 56px 52px}
  .pt-t{font-size:32px}
  .pt-body{font-size:17.5px}
  .pt-body h2{font-size:23px}
}

/* ── 환자 안내서(가이드북) — 2026-10-27 사용자 「https://atelier-ps.com/ko/breast/reconstruction/ 이러한 가이드북처럼」 ──────────────────
   그 페이지의 짜임을 사이트 색으로: 사진 머리 · 큰 제목 + 요약 상자 · 왼쪽에 붙는 「이 페이지에서」 차례 + 연락 상자 · 번호 섹션(가는 선으로 나눔) ·
   점 목록 · 세로 타임라인 · 정보 칸 · 테두리 이름표 상자 · Q1 접기 질문 · 관련 페이지 카드. 휴대폰은 왼쪽 차례를 숨기고 연락 상자만 본문 위에 */
.gbp{--gbbg:#f7f5ee;background:var(--gbbg)}
.gb2-in{width:min(100% - 2 * var(--pad),1200px);margin:0 auto;padding:48px 0 72px}
.gb2-top{max-width:780px}
.gb2-t{font-family:var(--serif);font-size:28px;font-weight:600;line-height:1.4;letter-spacing:-.03em;color:var(--ink)}
.gb-when{display:inline-block;margin-top:12px;padding:4px 14px;border-radius:999px;background:#fff;box-shadow:inset 0 0 0 1px rgba(49,106,0,.3);font-size:15px;font-weight:700;color:var(--green)}
.gb2-lead{margin-top:20px;padding:20px 22px;border-left:3px solid var(--green);background:#fff;font-size:16.5px;line-height:1.8;color:var(--ink)}
/* 권 바로 가기 */
.gb-vols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin-top:20px}
.gb-vols a{display:grid;align-content:start;gap:2px;padding:12px 12px 14px;background:#fff;box-shadow:inset 0 0 0 1px var(--line);color:var(--ink)}
.gb-vols b{font-family:var(--deco);font-size:16px;font-style:italic;font-weight:700;line-height:1.1;letter-spacing:.04em;color:var(--green);font-variant-numeric:lining-nums}
.gb-vols span{font-size:15px;font-weight:700;line-height:1.4}
.gb-vols small{font-size:14px;font-weight:500;color:var(--ink5)}
.gb-vols a[aria-current]{background:var(--green-dk);box-shadow:none;color:#fff}
.gb-vols a[aria-current] b{color:var(--lime)}.gb-vols a[aria-current] small{color:rgba(255,255,255,.72)}
.gb-vols a:not([aria-current]):hover{box-shadow:inset 0 0 0 1px var(--green)}
/* 두 칸 — 왼쪽 차례(PC) · 오른쪽 본문 */
.gb2-grid{margin-top:36px}
.gb2-toc{display:none}
.gb2-cta{padding:20px 20px 22px;background:var(--green-dk);color:#fff}
.gb2-cta .t{font-size:16px;font-weight:700;line-height:1.5}
.gb2-cta a{display:block;margin-top:14px;padding:12px 16px;border-radius:999px;background:var(--lime);color:var(--green-dk);font-size:15px;font-weight:800;text-align:center}
.gb2-cta a:hover{background:#c3d97c}
.gb2-main{min-width:0}
@media (min-width:1024px){
  .gb2-in{padding:72px 0 104px}
  .gb2-t{font-size:38px}
  .gb2-lead{padding:24px 30px;font-size:17px}
  .gb2-grid{display:grid;grid-template-columns:240px minmax(0,1fr);gap:72px;margin-top:56px}
  .gb2-stick{position:sticky;top:calc(var(--hh) + 32px)}
  .gb2-toc{display:block;max-height:calc(100vh - var(--hh) - 260px);overflow:auto;border-top:1px solid var(--ink);scrollbar-width:thin}
  .gb2-toc .lb{padding:14px 0 6px;font-size:14px;font-weight:600;letter-spacing:.24em;color:var(--ink5)}
  .gb2-toc ol{list-style:none;margin:0;padding:0}
  .gb2-toc li{border-bottom:1px solid var(--line)}
  .gb2-toc a{display:flex;gap:10px;align-items:baseline;padding:10px 0;font-size:14.5px;font-weight:500;line-height:1.45;color:var(--ink7)}
  .gb2-toc a i{flex:none;min-width:24px;font-family:var(--deco);font-size:15px;font-weight:600;color:var(--green);font-variant-numeric:lining-nums}
  .gb2-toc a:hover,.gb2-toc a.on{color:var(--ink);font-weight:700}
  .gb2-toc .pt2{margin:14px 0 2px}
  .gb2-toc .pt2 a{padding:4px 0;font-weight:700;color:var(--green-dk)}
  .gb2-toc .pt2 i{min-width:0}
  .gb2-cta{margin-top:24px}
}
@media (max-width:1023px){.gb2-side{margin-bottom:8px}}
/* 섹션 */
.gb-sec{padding:40px 0;border-top:1px solid var(--line);scroll-margin-top:calc(var(--hh) + 16px)}
.gb2-main>.gb-sec:first-child{border-top:0;padding-top:16px}
.gb-eb{margin:0 0 8px;font-size:14px;font-weight:700;color:var(--ink5)}
.gb-sec>h3,.gb-sec>h4{margin:0;display:flex;gap:12px;align-items:baseline;font-family:var(--serif);font-size:24px;font-weight:600;line-height:1.4;letter-spacing:-.03em;color:var(--ink)}
.gb-sec>h3 .no,.gb-sec>h4 .no{flex:none;font-family:var(--deco);font-size:20px;font-style:italic;font-weight:600;color:var(--green);font-variant-numeric:lining-nums}
.gb-sec>p{margin-top:14px;font-size:16.5px;line-height:1.85;color:var(--ink7)}
.gb-sec>p b{color:var(--ink)}
.gb-code{margin-left:6px;padding:1px 8px;background:#f1f8e7;font-size:14px;font-weight:700;color:var(--green)}
/* 목록 세 가지 — 점 목록(list) · 세로 타임라인(tl) · 정보 칸(grid) */
.gb-rows{margin:22px 0 0}
.gb-rows.list{border-top:1px solid var(--line)}
.gb-rows.list>div{padding:16px 0 17px 30px;border-bottom:1px solid var(--line);position:relative}
.gb-rows.list>div::before{content:"";position:absolute;left:0;top:20px;width:16px;height:16px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--green);
  background:radial-gradient(circle,var(--green) 0 3px,transparent 3.5px)}
.gb-rows.list dt{font-family:var(--serif);font-size:17.5px;font-weight:600;line-height:1.5;color:var(--ink)}
.gb-rows.list dd{margin:4px 0 0;font-size:16.5px;line-height:1.8;color:var(--ink7)}
.gb-rows.tl{position:relative;padding-left:26px}
.gb-rows.tl::before{content:"";position:absolute;left:5px;top:8px;bottom:12px;width:1px;background:rgba(49,106,0,.35)}
.gb-rows.tl>div{position:relative;padding-bottom:22px}
.gb-rows.tl>div:last-child{padding-bottom:0}
.gb-rows.tl>div::before{content:"";position:absolute;left:-26px;top:6px;width:11px;height:11px;border-radius:50%;background:var(--gbbg,#fff);box-shadow:inset 0 0 0 1.5px var(--green)}
.gb-rows.tl dt{font-size:15px;font-weight:800;line-height:1.5;color:var(--green)}
.gb-rows.tl dd{margin:4px 0 0;font-size:16.5px;line-height:1.8;color:var(--ink7)}
.gb-rows.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-top:1px solid var(--line);border-left:1px solid var(--line);background:#fff}
.gb-rows.grid>div{padding:14px 16px 16px;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.gb-rows.grid dt{font-size:13.5px;font-weight:600;color:var(--ink5)}
.gb-rows.grid dd{margin:6px 0 0;font-family:var(--serif);font-size:17px;font-weight:600;line-height:1.5;color:var(--ink)}
@media (max-width:767px){.gb-rows.grid>div:last-child:nth-child(odd){grid-column:1 / -1}}   /* 두 칸일 때 홀수 끝 칸은 한 줄 */
@media (min-width:768px){.gb-rows.grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
/* 숫자 상자 · 그림 */
.gb-fact{display:flex;flex-direction:column;gap:4px;margin-top:22px;padding:18px 22px;border-left:3px solid var(--green);background:#fff}
.gb-fact b{font-family:var(--serif);font-size:28px;font-weight:600;line-height:1.2;color:var(--green)}
.gb-fact span{font-size:15.5px;line-height:1.65;color:var(--ink7)}
@media (min-width:600px){.gb-fact{flex-direction:row;align-items:center;gap:20px}}
.gb-fig{position:relative;max-width:560px;margin:24px auto 0;padding:12px;border:1px solid var(--line);background:#fff}
.gb-fig img,.gb-fig svg{display:block;width:100%;height:auto}
.gb-fig figcaption,.gb-cap{margin-top:10px;font-size:14px;line-height:1.5;text-align:center;color:var(--ink5)}
.gb-fig.milk{max-width:420px;background:#fbfaf3}.gb-fig.milk .ab-pix{mix-blend-mode:multiply}
.gb-fig.sm{max-width:340px}   /* 분위기 그림(원무 데스크)은 작게 */
.gb-fig .ab-pixwrap{position:relative}
.gb-fig .ab-lb{position:absolute;padding:4px 10px;border-radius:999px;background:rgba(255,255,255,.94);font-size:13.5px;font-weight:700;line-height:1.3;color:var(--ink);white-space:nowrap;box-shadow:0 2px 8px rgba(38,72,9,.08)}
.gb-fig .ab-lb.g{color:var(--green)}
.gb-fig .tag{position:absolute;top:24px;padding:4px 12px;border-radius:999px;background:rgba(255,255,255,.94);font-size:14px;font-weight:700;color:var(--ink)}
.gb-fig .tag.l{left:24px}.gb-fig .tag.r{right:24px;color:#b0583f}
/* 여유증 안내서(2026-10-27) — 전·후 그림 두 칸 · 사이먼 등급 카드 · 표 이름(소제목) */
.gb-two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:24px}
.gb-two .gb-fig{margin:0;padding:8px}
.gb-two figcaption{font-size:15px;font-weight:700;color:var(--ink)}
.gb-grades{display:grid;gap:12px;list-style:none;margin:22px 0 0;padding:0}
.gb-grades li{padding:12px 12px 20px;border:1px solid var(--line);background:#fff}
.gb-grades figure{margin:0 0 14px;background:#fdf6ee}
.gb-grades img{display:block;width:100%;height:auto}
.gb-grades .st{padding:0 6px;font-family:var(--deco);font-size:17px;font-style:italic;font-weight:600;color:var(--green);font-variant-numeric:lining-nums}
.gb-grades .h{margin-top:2px;padding:0 6px;font-family:var(--serif);font-size:19px;font-weight:600;color:var(--ink)}
.gb-grades p:not(.st):not(.h):not(.badge){margin-top:6px;padding:0 6px;font-size:16px;line-height:1.7;color:var(--ink7)}
.gb-grades .badge{display:inline-block;margin:12px 6px 0;padding:4px 12px;border-radius:999px;background:var(--green);color:#fff;font-size:14px;font-weight:700}
@media (min-width:768px){.gb-grades{grid-template-columns:repeat(3,minmax(0,1fr))}}
.gb-steps.nofig li{grid-template-columns:minmax(0,1fr)}
.gb-sub{margin-top:24px;font-size:15px;font-weight:800;color:var(--green)}
.gb-sub+.gb-rows{margin-top:10px}
.gb-end a{color:inherit;font-weight:700;text-decoration:underline;text-underline-offset:3px}
.gb-box>p+p{margin-top:8px}
.gb-goal .t:first-child{margin-top:0}
/* 수술 목표 — 진한 녹색 한 번 */
.gb-goal{margin:8px 0 0;padding:30px 24px;background:var(--green-dk);color:#fff;text-align:center}
.gb-goal .en{font-family:var(--deco);font-size:19px;font-style:italic;font-weight:600;color:var(--lime)}
.gb-goal .t{margin-top:8px;font-family:var(--serif);font-size:21px;font-weight:600;line-height:1.6;text-wrap:balance}
.gb-goal .s{margin-top:8px;font-size:15px;color:rgba(255,255,255,.72)}
/* 자주 묻는 질문 — Q1 · Q2 접기 */
.gb-qa{margin-top:22px;border-top:1px solid var(--ink)}
.gb-qa details{border-bottom:1px solid var(--line)}
.gb-qa summary{position:relative;display:flex;gap:14px;align-items:baseline;padding:18px 36px 18px 0;cursor:pointer;list-style:none}
.gb-qa summary::-webkit-details-marker{display:none}
.gb-qa .no{flex:none;font-family:var(--deco);font-size:20px;font-style:italic;font-weight:600;color:var(--green);font-variant-numeric:lining-nums}
.gb-qa .q{font-family:var(--serif);font-size:18px;font-weight:600;line-height:1.5;color:var(--ink)}
.gb-qa details[open] .q{color:var(--green)}
.gb-qa summary i{position:absolute;right:4px;top:26px;width:14px;height:14px}
.gb-qa summary i::before,.gb-qa summary i::after{content:"";position:absolute;left:0;top:6px;width:14px;height:1.5px;background:var(--ink5);transition:rotate .25s}
.gb-qa summary i::after{rotate:90deg}
.gb-qa details[open] summary i::before{rotate:45deg}.gb-qa details[open] summary i::after{rotate:135deg}
.gb-qa .a{padding:0 0 20px 38px;font-size:16.5px;line-height:1.85;color:var(--ink7)}
/* 맺는 한 줄 · 이름표 상자 */
.gb-end{display:flex;gap:12px;align-items:flex-start;margin-top:24px;padding:16px 20px;border:1px solid var(--line);background:#fff;font-size:16.5px;line-height:1.8;color:var(--green-dk)}
.gb-lf{flex:none;width:16px;height:22px;margin-top:4px;fill:var(--lime)}
.gb-box{position:relative;margin-top:30px;padding:22px 20px 18px;border:1px solid rgba(49,106,0,.35)}
.gb-box.warn{border-color:rgba(176,88,63,.4)}
.gb-box .lb{position:absolute;left:14px;top:-11px;margin:0;padding:0 8px;background:var(--gbbg,#fff);font-size:14px;font-weight:800;line-height:22px;color:var(--green)}
.gb-box.warn .lb{color:#a24a2f}
.gb-box>p{font-size:16.5px;line-height:1.8;color:var(--ink)}
.gb-box ol{margin:0;padding-left:1.3em;list-style:decimal}
.gb-box li{font-size:16.5px;line-height:1.8;color:var(--ink7)}.gb-box li+li{margin-top:8px}
.gb-box>img{display:block;width:min(100%,200px);height:auto;margin:14px auto 0}
/* 수술 당일 — 번호 카드(글 | 그림) */
.gb-steps{display:grid;gap:12px;list-style:none;margin:22px 0 0;padding:0}
.gb-steps li{display:grid;gap:16px;padding:22px 22px 24px;border:1px solid var(--line);background:#fff}
.gb-steps .st{font-family:var(--deco);font-size:18px;font-style:italic;font-weight:600;color:var(--green);font-variant-numeric:lining-nums}
.gb-steps .h{margin-top:4px;font-family:var(--serif);font-size:20px;font-weight:600;color:var(--ink)}
.gb-steps .tx p:not(.st):not(.h):not(.tm){margin-top:8px;font-size:16.5px;line-height:1.8;color:var(--ink7)}
.gb-steps .tm{margin-top:10px;font-size:14.5px;font-weight:700;color:var(--green)}
.gb-steps .tm::before{content:"— ";color:var(--lime)}
.gb-steps figure{margin:0}
.gb-steps img{display:block;width:100%;height:auto}
@media (min-width:768px){.gb-steps li{grid-template-columns:minmax(0,1fr) 200px;align-items:center;gap:28px;padding:26px 28px}}
/* 비용 */
.gb-cost{margin-top:22px}
.gb-cost .main{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 16px;align-items:baseline;margin:0;padding:18px 18px 16px;border:1px solid var(--line);border-bottom:0;background:#fff}
.gb-cost .k{font-size:15px;font-weight:700;color:var(--ink7)}
.gb-cost .main b{font-family:var(--serif);font-size:28px;font-weight:600;color:var(--green)}
.gb-cost .main small{font-size:16px;color:var(--ink7)}
.gb-cost .gb-rows{margin-top:0}
/* 전체본 — PART 머리 */
.gb-part{margin-top:56px;padding-top:28px;border-top:2px solid var(--ink);scroll-margin-top:calc(var(--hh) + 16px)}
.gb2-main>.gb-part:first-child{margin-top:0}
.gb-part .no{margin:0;font-family:var(--deco);font-size:18px;font-style:italic;font-weight:700;letter-spacing:.08em;color:var(--green);font-variant-numeric:lining-nums}
.gb-part .t{margin-top:4px;font-family:var(--serif);font-size:28px;font-weight:600;line-height:1.4;color:var(--ink)}
.gb-part .l{margin-top:12px;font-size:16.5px;line-height:1.8;color:var(--ink7)}
.gb-part+.gb-sec{border-top:0}
/* 끝 — 다음 권 · 맺음 · 관련 페이지 */
.gb-next{display:grid;grid-template-columns:1fr auto;gap:2px 14px;align-items:center;margin-top:40px;padding:20px 22px;border:1px solid var(--line);background:#fff;color:var(--ink)}
.gb-next .k{font-size:14.5px;font-weight:700;color:var(--green)}
.gb-next strong{font-family:var(--serif);font-size:20px;font-weight:600}
.gb-next .ar{grid-column:2;grid-row:1 / span 2;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--green);color:#fff;font-size:18px}
.gb-next:hover{border-color:var(--green)}
.gb-fin{margin-top:40px;padding-top:32px;border-top:1px solid var(--line);text-align:center}
.gb-fin .gb-lf{display:block;margin:0 auto}
.gb-fin .t{margin-top:10px;font-family:var(--serif);font-size:21px;font-weight:600;color:var(--green-dk)}
.gb-fin .btns{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:16px}
.gb2-rel{margin-top:64px}
.gb2-rel .lb{font-size:14px;font-weight:600;letter-spacing:.24em;color:var(--ink5)}
.gb2-rel ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;list-style:none;margin:14px 0 0;padding:0}
.gb2-rel a{display:flex;flex-direction:column;height:100%;padding:18px 18px 20px;border:1px solid var(--line);background:#fff;color:var(--ink)}
.gb2-rel .k{font-size:13.5px;font-weight:700;color:var(--green)}
.gb2-rel strong{margin-top:6px;font-family:var(--serif);font-size:19px;font-weight:600;line-height:1.4}
.gb2-rel .more{align-self:flex-start;margin-top:auto;padding-top:14px;border-bottom:1px solid var(--ink);font-size:14px;font-weight:700}
.gb2-rel .more i{margin-left:6px;font-style:normal}
.gb2-rel a:hover{border-color:var(--green)}
@media (min-width:768px){
  .gb2-t{font-size:34px}
  .gb-sec{padding:52px 0}
  .gb-sec>h3,.gb-sec>h4{font-size:28px}
  .gb-sec>p,.gb-rows.list dd,.gb-rows.tl dd,.gb-qa .a,.gb-end,.gb-box>p,.gb-box li,.gb-steps .tx p:not(.st):not(.h):not(.tm){font-size:17px}
  .gb-goal{padding:40px 48px}.gb-goal .t{font-size:25px}
  .gb-fact b{font-size:32px}
  .gb-part .t{font-size:32px}
  .gb2-rel ul{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
  .gb2-rel a{padding:22px 22px 24px}
}
@media (min-width:1024px){.gb2-t{font-size:40px}}

@media print{   /* 인쇄하면 안내문만 */
  .hd,.mnav,.nav-dim,.qb,#fnav,.contact,.foot,.pt-more,.skip,.gb2-side,.gb-vols,.gb-next,.gb-fin .btns,.gb2-rel{display:none!important}
  .pt,.gbp{background:#fff}.pt-main{padding:0}.pt-doc{width:auto;padding:0;box-shadow:none}
  .gb-hero{min-height:0!important;padding:16px 0!important;margin-top:0;color:#000}.gb-hero .sp-hero-bg,.gb-hero::after{display:none}
  .gb2-grid{display:block}.gb-qa details{display:block}.gb-qa details>*{display:block}
  .gb-sec,.gb-fig,.gb-goal,.gb-steps li{break-inside:avoid}
}