@charset "utf-8";
/* ==========================================================================
   튼튼소아청소년과 — P6 소프트 클리닉
   ★ 레이아웃 아키타입 D — 비대칭 매거진 그리드 (CSS Grid 12칼럼)
   섹션마다 좌우 정렬을 뒤집어 지그재그 리듬을 만든다.
   유기 곡선(블롭)이 그리드 경계를 부드럽게 넘나든다.
   모바일(<720px)은 1칼럼 스택 — 배치 클래스가 무력화된다.

   ⚠ scroll-behavior:smooth 전역 금지 (Lenis 충돌) — 모바일에서만
   ⚠ 강한 원색·직각 금지. 라운드 24px+, 소프트 섀도, 파스텔.
   ========================================================================== */

:root{
  --cloud:#FBFAF8;
  --mist:#EEF1EE;
  --ink:#2A3230;
  --sage:#7A9E8E;
  --sage-dk:#5E8272;
  --sage-lt:#A8C4B7;
  --blush:#E8D5CE;
  --blush-dk:#D9B9AE;

  --ink-70:rgba(42,50,48,.70);
  --ink-50:rgba(42,50,48,.50);
  --line:rgba(42,50,48,.13);

  --sans:'Pretendard Variable',Pretendard,-apple-system,'Noto Sans KR',sans-serif;
  --mono:'IBM Plex Mono','SF Mono',Consolas,monospace;

  --shadow:0 12px 40px rgba(42,50,48,.05);
  --shadow-lg:0 24px 70px rgba(42,50,48,.08);
  --r:24px;
  --r-lg:36px;

  --wrap:1360px;
  --gut:clamp(20px,4vw,52px);
  --colgap:clamp(12px,1.6vw,26px);
}

*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  font-family:var(--sans);background:var(--cloud);color:var(--ink);
  font-size:16px;line-height:1.75;word-break:keep-all;overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
::selection{background:var(--sage);color:#fff}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gut)}
.mono{font-family:var(--mono)}

/* ==========================================================================
   ★ 12칼럼 매거진 그리드
   모바일(<720px)은 1칼럼으로 전부 스택 (함정 4/8 대응 — 화면 밖으로 안 밀린다)
   ========================================================================== */
.mag-grid{
  max-width:var(--wrap);margin:0 auto;padding:0 var(--gut);
  display:grid;grid-template-columns:1fr;gap:clamp(20px,3vw,34px) var(--colgap);
  align-items:start;
}
@media(min-width:720px){
  .mag-grid{grid-template-columns:repeat(12,1fr)}
  .g-c1-4{grid-column:1/4}    .g-c1-5{grid-column:1/5}
  .g-c1-6{grid-column:1/6}    .g-c1-7{grid-column:1/7}
  .g-c1-8{grid-column:1/9}    .g-c1-13{grid-column:1/13}
  .g-c2-6{grid-column:2/6}    .g-c2-12{grid-column:2/12}
  .g-c3-7{grid-column:3/7}    .g-c3-9{grid-column:3/9}
  .g-c3-12{grid-column:3/12}
  .g-c4-10{grid-column:4/10}
  .g-c5-8{grid-column:5/9}    .g-c5-9{grid-column:5/10}
  .g-c6-10{grid-column:6/11}  .g-c6-13{grid-column:6/13}
  .g-c7-11{grid-column:7/11}  .g-c7-13{grid-column:7/13}
  .g-c8-13{grid-column:8/13}
  .g-c9-13{grid-column:9/13}
  .g-c10-13{grid-column:10/13}
  .g-c11-13{grid-column:11/13}
  .g-r1{grid-row:1} .g-r2{grid-row:2} .g-r3{grid-row:3}
  .g-r4{grid-row:4} .g-r5{grid-row:5}
}

/* 사진 톤 통일 — 명세서 §03 (밝고 뽀얀 톤) */
.hero-fig img,.blob-img,.room-fig img,.space-media img,
.place-fig img,.voice-fig img{
  filter:brightness(1.04) saturate(.85) contrast(.96);
}

/* ---------- 로딩 커튼 ---------- */
.curtain{
  position:fixed;inset:0;z-index:200;background:var(--cloud);
  display:grid;place-items:center;
}
.curtain-inner{text-align:center}
.curtain-blob{
  display:block;width:88px;height:88px;margin:0 auto 22px;
  background:linear-gradient(150deg,var(--sage-lt),var(--blush));
  border-radius:46% 54% 58% 42% / 52% 44% 56% 48%;
}
.curtain-txt{font-size:11px;letter-spacing:.46em;color:var(--sage);opacity:0;padding-left:.46em}
html.loaded .curtain{pointer-events:none}

/* ---------- 타이포 ---------- */
.display{font-weight:700;font-size:clamp(40px,8vw,118px);line-height:1.08;letter-spacing:-.035em}
.h2{font-weight:700;font-size:clamp(28px,5vw,62px);line-height:1.2;letter-spacing:-.032em}
.label{font-size:10.5px;letter-spacing:.34em;color:var(--sage-dk);font-weight:600;font-family:var(--mono)}
em{font-style:normal;color:var(--sage-dk);font-weight:600}
.sec-lead{margin-top:18px;color:var(--ink-70);font-size:clamp(14.5px,1.6vw,17px);max-width:52ch}
.sec-lead.note{font-size:12.5px;color:var(--ink-50)}

/* ---------- 버튼 ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:17px 32px;border-radius:999px;font-size:14.5px;font-weight:700;
  transition:background .25s,color .25s,border-color .25s,box-shadow .25s;will-change:transform;
}
.btn-primary{background:var(--sage);color:#fff;box-shadow:0 10px 26px rgba(122,158,142,.28)}
.btn-primary:hover{background:var(--sage-dk)}
.btn-ghost{border:1.5px solid var(--line);color:var(--ink)}
.btn-ghost:hover{border-color:var(--sage);color:var(--sage-dk);background:rgba(122,158,142,.07)}
.btn-naver{background:#03C75A;color:#fff}
.btn-naver:hover{background:#02A64B}
.btn-mini{padding:11px 20px;font-size:13px;background:var(--sage);color:#fff}

/* ---------- 헤더 ---------- */
.site-head{
  position:fixed;top:0;left:0;right:0;z-index:90;
  border-bottom:1px solid transparent;transition:background .4s,border-color .4s,backdrop-filter .4s;
}
.site-head.is-stuck{
  background:rgba(251,250,248,.92);border-bottom-color:var(--line);
  backdrop-filter:saturate(1.3) blur(12px);
}
.head-inner{display:flex;align-items:center;gap:24px;height:76px}
.logo{display:flex;align-items:center;gap:10px;color:var(--ink)}
.logo-mark{
  width:22px;height:22px;flex-shrink:0;
  background:linear-gradient(150deg,var(--sage-lt),var(--blush));
  border-radius:46% 54% 58% 42% / 52% 44% 56% 48%;
}
.logo-txt{font-weight:700;font-size:17.5px;letter-spacing:-.02em}
.gnb{display:none;gap:28px;margin-left:auto;font-size:13.5px;color:var(--ink-70)}
@media(min-width:980px){.gnb{display:flex}}
.gnb a{position:relative;padding:4px 0}
.gnb a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1.5px;
  background:currentColor;border-radius:2px;transition:right .3s}
.gnb a:hover::after{right:0}
@media(max-width:979px){.btn-mini{margin-left:auto}}

/* ==========================================================================
   01 히어로 — 매거진 표지형 비대칭
   이미지 1~7칼럼(유기 곡선 마스크) / 헤드라인 7~13칼럼이 여백을 파고든다
   ========================================================================== */
.hero{position:relative;overflow:hidden;z-index:2;
  padding:calc(76px + clamp(26px,4vw,54px)) 0 clamp(44px,6vw,80px)}
.hero-grid{row-gap:clamp(16px,2vw,26px)}

/* 히어로 배경 블롭 — 그리드 경계를 부드럽게 넘나든다 */
.hero::before{
  content:"";position:absolute;z-index:0;right:-14vw;top:-8vh;
  width:min(60vw,760px);aspect-ratio:1/1;pointer-events:none;
  background:radial-gradient(120% 120% at 36% 30%,rgba(232,213,206,.55),rgba(168,196,183,.30) 56%,rgba(168,196,183,0) 100%);
  border-radius:44% 56% 52% 48% / 50% 42% 58% 50%;
}
.hero::after{
  content:"";position:absolute;z-index:0;left:-18vw;bottom:-22vh;
  width:min(52vw,620px);aspect-ratio:1/1;pointer-events:none;
  background:radial-gradient(120% 120% at 60% 40%,rgba(168,196,183,.32),rgba(232,213,206,.14) 60%,transparent 100%);
  border-radius:56% 44% 48% 52% / 42% 56% 44% 58%;
}
.hero-grid > *{position:relative;z-index:2}

.eyebrow{display:flex;align-items:center;gap:14px;font-family:var(--mono);
  font-size:11px;letter-spacing:.28em;color:var(--sage-dk)}
.eyebrow .rule{display:block;width:52px;height:2px;border-radius:2px;background:var(--blush-dk);flex:0 0 auto}

/* 이미지에 유기 곡선 마스크 — 직각 금지 */
.hero-fig{position:relative;background:var(--mist);overflow:visible;
  border-radius:42% 58% 46% 54% / 38% 40% 60% 62%}
.hero-fig img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:52% 46%;
  border-radius:inherit;box-shadow:var(--shadow-lg);will-change:transform}
.edge-cap{position:absolute;left:6%;bottom:-26px;font-size:9.5px;letter-spacing:.3em;color:var(--ink-50)}

.hero-title{align-self:end;position:relative;z-index:3;pointer-events:none}
.hero-h1{color:var(--ink)}

.hero-copy{align-self:start}
.hero-lead{font-size:clamp(15px,1.7vw,18.5px);color:var(--ink-70);max-width:34ch;line-height:1.8}
.hero-cta{display:flex;gap:10px;flex-wrap:wrap;margin-top:28px}

.hero-side{font-size:10.5px;letter-spacing:.16em;color:var(--ink-50);line-height:2.5;
  border-top:1.5px solid var(--line);padding-top:16px}
.hero-side b{font-weight:600;color:var(--sage-dk);font-size:14px;letter-spacing:.02em}

.hero-scroll{display:flex;align-items:center;gap:10px;letter-spacing:.2em;
  font-size:10px;color:var(--ink-50);justify-self:end;align-self:end}
.hero-scroll i{display:block;width:34px;height:2px;border-radius:2px;background:var(--line);
  position:relative;overflow:hidden}
.hero-scroll i::after{content:"";position:absolute;inset:0;background:var(--blush-dk);border-radius:2px;
  animation:sweep 2.4s cubic-bezier(.7,0,.3,1) infinite}
@keyframes sweep{0%{transform:translateX(-100%)}60%,100%{transform:translateX(100%)}}

/* 데스크톱: 헤드라인이 이미지 오른쪽 경계로 살짝 걸친다 (매거진 겹침) */
@media(min-width:1024px){
  .hero{padding-top:calc(76px + 3vh);padding-bottom:5vh}
  .hero-fig img{aspect-ratio:auto;height:clamp(380px,56vh,580px)}
  .hero-title{width:fit-content;margin-left:-2.6vw;padding-bottom:1vh}
  .hero-h1{font-size:clamp(50px,4.8vw,80px)}
}

/* ★ Physics2D 비눗방울 레이어 — 소아과 톤에 맞게 부드럽고 느리다 */
.bubble-layer{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.bubble{
  position:absolute;top:0;left:0;width:12px;height:12px;border-radius:50%;
  background:radial-gradient(circle at 32% 28%,rgba(255,255,255,.95),rgba(232,213,206,.5) 46%,rgba(168,196,183,.28) 100%);
  box-shadow:0 0 0 1px rgba(122,158,142,.16),0 4px 14px rgba(42,50,48,.06);
  opacity:0;will-change:transform;
}
.bubble.star{
  border-radius:0;background:none;box-shadow:none;
  clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);
  background-color:var(--blush-dk);
}

/* ==========================================================================
   02 공감 — 헤드가 2칼럼에서 시작, 둘째 줄이 더 들어간다
   ========================================================================== */
.statement{padding:clamp(96px,14vw,210px) 0 clamp(84px,12vw,180px);
  background:var(--cloud);position:relative;z-index:2}
.st-label{align-self:start}
.statement-h{font-weight:700;font-size:clamp(38px,9.5vw,138px);line-height:1.06;letter-spacing:-.045em}
.st-line{display:block}
@media(min-width:720px){.st-indent{margin-left:13%}}
.statement-sub p{font-size:clamp(14.5px,1.7vw,18px);color:var(--ink-70);line-height:1.9}
.st-note{font-size:10px;letter-spacing:.26em;color:var(--ink-50);line-height:2.7;
  border-top:1.5px solid var(--line);padding-top:16px}
.st-note span{display:block;margin-top:12px;letter-spacing:.08em;font-size:11.5px;color:var(--sage-dk)}

/* ==========================================================================
   03 ★ 시그니처 — 성장 곡선 블롭 (MorphSVG + Draggable + Physics2D)
   ========================================================================== */
.growth{background:var(--mist);position:relative;z-index:2;overflow:hidden;
  padding:clamp(84px,12vw,170px) 0 clamp(80px,11vw,160px)}
/* 배경 대형 블롭 — 그리드 경계를 넘나든다 */
.growth::before{
  content:"";position:absolute;z-index:0;right:-20vw;top:-10vh;
  width:min(74vw,900px);aspect-ratio:1/1;pointer-events:none;
  background:radial-gradient(120% 120% at 40% 30%,rgba(168,196,183,.30),rgba(232,213,206,.18) 60%,transparent 100%);
  border-radius:44% 56% 52% 48% / 50% 42% 58% 50%;
}
.growth-head-grid{position:relative;z-index:2;row-gap:clamp(20px,2.4vw,30px);
  margin-bottom:clamp(28px,3.4vw,48px)}
/* 블롭·게이지 행은 헤드라인 바로 아래에 붙인다 (빈 공간 제거) */
@media(min-width:720px){.growth-head-grid{row-gap:clamp(16px,1.8vw,24px)}}
.growth-title{font-weight:700;font-size:clamp(32px,6vw,78px);line-height:1.12;letter-spacing:-.038em}
.growth-sub{color:var(--ink-70);font-size:clamp(13.5px,1.5vw,16px);align-self:end}

/* ★ MorphSVG 블롭 — d 속성이 실제로 모핑된다.
   ⚠ 데스크톱에서 너무 크면 게이지·카드가 첫 화면 밖으로 밀린다 → 폭을 묶는다 */
.blob-morph{position:relative;max-width:340px;width:100%;margin:0}
@media(min-width:1024px){.blob-morph{max-width:clamp(240px,22vw,330px)}}
.blob-svg{width:100%;height:auto;overflow:visible;filter:drop-shadow(0 20px 48px rgba(42,50,48,.10))}
.blob-img{opacity:0}
.blob-img.is-on{opacity:1}
.morph-src{display:none}
.morph-label{position:absolute;left:2px;bottom:-24px;font-size:10.5px;letter-spacing:.26em;
  color:var(--sage-dk);font-weight:600}
/* 성장 곡선 SVG — 블롭 아래를 가로지르며 우상향한다 (DrawSVG로 그려진다) */
.curve{position:absolute;left:-8%;right:-8%;bottom:-4%;width:116%;height:42%;
  pointer-events:none;overflow:visible;z-index:3}

/* 진행 게이지 — 블롭 오른쪽 여백을 파고든다 */
.growth-progress{align-self:start;display:grid;gap:14px;max-width:400px;padding-top:clamp(8px,2vw,28px)}
.gp-bar{position:relative;height:3px;border-radius:3px;background:rgba(42,50,48,.12);overflow:hidden}
.gp-bar span{display:block;height:100%;width:0;background:var(--sage);border-radius:3px}
.gp-idx{font-size:11px;letter-spacing:.16em;color:var(--ink-50)}
.gp-idx b{font-weight:600;font-size:17px;color:var(--ink)}
.gp-idx i{font-style:normal}
.drag-hint{font-size:10px;letter-spacing:.24em;color:var(--sage-dk)}

/* ★ Draggable + Inertia — 성장 단계 카드 가로 갤러리 */
.stage-viewport{position:relative;z-index:2;overflow:hidden;padding-left:var(--gut);cursor:grab}
.stage-viewport.is-drag{cursor:grabbing}
.stage-track{display:flex;gap:clamp(16px,2.2vw,28px);align-items:stretch;
  width:max-content;will-change:transform}
.stage{
  flex:0 0 clamp(250px,74vw,340px);display:flex;flex-direction:column;
  background:var(--cloud);border-radius:var(--r-lg);
  padding:clamp(24px,3vw,34px);border:1px solid rgba(42,50,48,.05);
  box-shadow:var(--shadow);transition:box-shadow .5s;
}
/* 카드를 넉넉히 잡아 4장이 뷰포트를 확실히 넘치게 한다 —
   그래야 던지는 드래그(Draggable+Inertia)에 실제 이동 거리가 생긴다 */
@media(min-width:1024px){.stage{flex:0 0 clamp(400px,32vw,480px)}}
.stage.is-active{box-shadow:var(--shadow-lg);border-color:rgba(122,158,142,.3)}
.stage-idx{font-size:11px;letter-spacing:.2em;color:var(--sage-dk);margin-bottom:14px;
  display:flex;gap:6px;align-items:baseline}
.stage-idx b{font-size:19px;font-weight:600;color:var(--ink)}
.stage h3{font-weight:700;font-size:clamp(24px,3vw,36px);line-height:1.16;letter-spacing:-.035em}
.stage-age{margin-top:8px;font-size:12px;letter-spacing:.16em;color:var(--sage-dk)}
.stage-p{margin-top:16px;color:var(--ink-70);font-size:14.5px;line-height:1.85}
.stage-list{list-style:none;margin-top:auto;padding-top:22px;display:grid;gap:10px}
.stage-list li{position:relative;padding-left:24px;font-size:13.5px;color:var(--ink-70)}
.stage-list li::before{
  content:"";position:absolute;left:0;top:9px;width:11px;height:11px;
  background:var(--blush);border-radius:46% 54% 58% 42% / 52% 44% 56% 48%;
}
.stage-viewport img{user-select:none;-webkit-user-drag:none}

/* 모바일·태블릿: Draggable 없이도 손으로 밀 수 있게 (함정 8) */
@media(max-width:1023px){
  .stage-viewport{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;
    scroll-snap-type:x proximity;scrollbar-width:none;touch-action:pan-x pan-y}
  .stage-viewport::-webkit-scrollbar{display:none}
  .stage-track{padding-right:var(--gut)}
  .stage{scroll-snap-align:start}
}

/* ==========================================================================
   04 진료 안내 — 카드가 계단식으로 어긋난다
   ========================================================================== */
.care{background:var(--cloud);padding:clamp(90px,13vw,190px) 0;position:relative;z-index:2}
.care-head-grid{row-gap:clamp(16px,2.2vw,28px);margin-bottom:clamp(34px,4.6vw,62px)}
.care-head-grid .sec-lead{align-self:end}
.care-grid{row-gap:clamp(16px,2.2vw,26px)}
.care-card{
  background:#fff;border-radius:var(--r-lg);padding:clamp(24px,3vw,36px);
  box-shadow:var(--shadow);border:1px solid rgba(42,50,48,.05);
  transition:transform .5s cubic-bezier(.16,1,.3,1),box-shadow .5s;
}
.care-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg)}
.care-no{font-size:10.5px;letter-spacing:.24em;color:var(--sage-dk)}
.care-card h3{font-weight:700;font-size:clamp(19px,2.2vw,25px);margin:12px 0 12px;letter-spacing:-.025em}
.care-card p{font-size:14px;color:var(--ink-70)}
/* 계단식 어긋남 — 균등 그리드를 깬다 */
@media(min-width:1024px){
  .c2{margin-top:clamp(26px,3.4vw,58px)}
  .c3{margin-top:clamp(-40px,-4vw,-16px)}
  .c5{margin-top:clamp(18px,2.4vw,42px)}
  .c6{margin-top:clamp(-12px,-1.4vw,0px)}
}

.room-grid{margin-top:clamp(34px,4.6vw,68px);row-gap:clamp(18px,2.4vw,30px)}
.room-fig{border-radius:var(--r-lg);overflow:hidden;background:var(--mist);box-shadow:var(--shadow)}
.room-fig img{width:100%;aspect-ratio:3/2;object-fit:cover;will-change:transform}
.room-fig figcaption{padding:14px 20px 18px;font-size:11px;letter-spacing:.12em;color:var(--ink-50)}
@media(min-width:1024px){
  .r1 img{aspect-ratio:16/9}
  .r2{margin-top:clamp(40px,5vw,86px)}
}

/* ==========================================================================
   05 접종·검진 일정 — 좌측 sticky 라벨 + 우측 리스트
   ========================================================================== */
.schedule{background:var(--mist);padding:clamp(84px,12vw,170px) 0;position:relative;z-index:2}
.sch-grid{row-gap:clamp(28px,3.6vw,46px)}
.sch-side .h2{margin-top:14px}
@media(min-width:1024px){.sch-side{position:sticky;top:110px}}
.sch-note{margin-top:26px;font-size:11px;letter-spacing:.05em;color:var(--ink-50);line-height:1.8}
.sch-list{list-style:none;display:grid;gap:12px}
.sch-item{
  display:grid;gap:6px 26px;align-items:baseline;
  background:var(--cloud);border-radius:var(--r);padding:clamp(20px,2.6vw,28px) clamp(22px,3vw,34px);
  border:1px solid rgba(42,50,48,.05);
}
@media(min-width:900px){.sch-item{grid-template-columns:180px 1fr}}
/* 항목이 오른쪽으로 조금씩 어긋난다 — 매거진 리듬 */
@media(min-width:1024px){
  .sch-item:nth-child(2){margin-left:3%}
  .sch-item:nth-child(3){margin-left:6%}
  .sch-item:nth-child(4){margin-left:3%}
}
.sch-when{font-size:12px;letter-spacing:.1em;color:var(--sage-dk);font-weight:500}
.sch-body h3{font-weight:700;font-size:clamp(17px,2vw,21px);letter-spacing:-.025em}
.sch-body p{margin-top:6px;font-size:14px;color:var(--ink-70)}

/* ==========================================================================
   06 공간 — 풀블리드 패럴랙스
   ========================================================================== */
.space{position:relative;overflow:hidden;z-index:2;
  padding:clamp(140px,22vh,260px) 0 clamp(46px,6vw,84px);
  display:flex;align-items:flex-end}
.space-media{position:absolute;inset:-12% 0;z-index:0}
.space-media img{width:100%;height:100%;object-fit:cover;will-change:transform}
.space::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(30,40,37,.10),rgba(30,40,37,.34) 44%,rgba(30,40,37,.72))}
.space-grid{position:relative;z-index:2;color:#fff;width:100%;row-gap:clamp(14px,2vw,26px)}
.space-grid .label{color:var(--blush)}
.space-grid .h2{color:#fff;text-shadow:0 2px 30px rgba(30,40,37,.42)}
.space-p{color:rgba(255,255,255,.88);font-size:clamp(14px,1.5vw,16px);align-self:end;
  text-shadow:0 1px 14px rgba(30,40,37,.6)}

/* ==========================================================================
   07 숫자 (세이지 컬러 반전 챕터) — 계단식 어긋남 + ScrambleText
   ========================================================================== */
.stats{background:var(--sage);color:#fff;padding:clamp(80px,11vw,160px) 0;position:relative;z-index:2}
.stats .label{color:rgba(255,255,255,.78)}
.stat-grid{row-gap:clamp(26px,3.4vw,48px)}
.stat-h{color:#fff}
.stat{display:flex;flex-wrap:wrap;align-items:baseline;gap:5px;
  padding-top:22px;border-top:1.5px solid rgba(255,255,255,.3)}
.stat .count{font-size:clamp(48px,7vw,96px);font-weight:400;line-height:1;letter-spacing:-.04em}
.stat .unit{font-size:clamp(18px,2.4vw,26px);opacity:.82}
.stat p{flex:1 0 100%;font-size:13.5px;color:rgba(255,255,255,.82);margin-top:12px}
@media(min-width:1024px){
  .s2{margin-top:clamp(28px,3.6vw,60px)}
  .s3{margin-top:clamp(-16px,-1.6vw,0px)}
}
.stat-note{font-size:10.5px;color:rgba(255,255,255,.62);letter-spacing:.05em;line-height:1.85}

/* ==========================================================================
   08 후기 — 인용문이 서로 다른 칼럼/높이로 어긋난다
   ========================================================================== */
.voices{padding:clamp(90px,13vw,190px) 0;background:var(--cloud);position:relative;z-index:2}
.voice-grid{row-gap:clamp(24px,3.2vw,46px)}
.voice-grid .sec-lead{align-self:end;justify-self:end;text-align:right}
.voice{
  background:var(--mist);border-radius:var(--r-lg);padding:clamp(26px,3.2vw,36px);
  display:flex;flex-direction:column;
}
.voice p{font-size:clamp(15px,1.8vw,18px);line-height:1.82;letter-spacing:-.018em}
.voice cite{display:block;margin-top:auto;padding-top:22px;font-size:11px;color:var(--ink-50);
  font-style:normal;letter-spacing:.14em}
@media(min-width:1024px){
  .v2{margin-top:clamp(34px,4.2vw,74px)}
  .v3{margin-top:clamp(-14px,-1.4vw,0px)}
}
.voice-fig{border-radius:46% 54% 58% 42% / 52% 44% 56% 48%;overflow:hidden;
  box-shadow:var(--shadow);align-self:end}
.voice-fig img{width:100%;aspect-ratio:1/1;object-fit:cover}

/* ==========================================================================
   09 FAQ — 제목 좌측 sticky, 아코디언 우측 6~13
   ========================================================================== */
.faq{background:var(--mist);padding:clamp(90px,13vw,190px) 0;position:relative;z-index:2}
.faq-side .h2{margin-top:16px}
@media(min-width:1024px){.faq-side{position:sticky;top:110px}}
.acc{display:grid;gap:10px}
.qa{background:var(--cloud);border-radius:var(--r);border:1px solid rgba(42,50,48,.05)}
.qa summary{list-style:none;cursor:pointer;padding:24px clamp(48px,6vw,60px) 24px clamp(22px,3vw,32px);
  position:relative;font-size:clamp(15px,1.7vw,17.5px);font-weight:600;letter-spacing:-.02em}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{content:"";position:absolute;right:clamp(22px,3vw,30px);top:50%;
  width:10px;height:10px;border-right:2px solid var(--sage);border-bottom:2px solid var(--sage);
  border-radius:2px;transform:translateY(-70%) rotate(45deg);transition:transform .3s}
.qa[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.qa-body{padding:0 clamp(22px,3vw,32px) 26px}
.qa-body p{font-size:14.5px;color:var(--ink-70);max-width:60ch}

/* ==========================================================================
   10 예약 CTA — 진료시간 좌측, 문구 우측 (히어로와 반대)
   ========================================================================== */
.reserve{background:var(--cloud);padding:clamp(90px,13vw,190px) 0;position:relative;z-index:2;overflow:hidden}
.reserve::before{
  content:"";position:absolute;z-index:0;left:-16vw;bottom:-24vh;
  width:min(56vw,660px);aspect-ratio:1/1;pointer-events:none;
  background:radial-gradient(120% 120% at 50% 40%,rgba(232,213,206,.42),rgba(168,196,183,.16) 62%,transparent 100%);
  border-radius:52% 48% 44% 56% / 46% 54% 46% 54%;
}
.reserve-grid{position:relative;z-index:2;row-gap:clamp(26px,3.4vw,46px)}
.reserve-h{font-weight:700;font-size:clamp(30px,5.4vw,70px);line-height:1.14;letter-spacing:-.038em}
.hours{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);
  border-radius:var(--r);overflow:hidden;align-self:end}
@media(min-width:560px){.hours{grid-template-columns:1fr 1fr}}
.hours>div{background:#fff;padding:18px 22px;display:flex;justify-content:space-between;gap:12px;font-size:14px}
.hours dt{color:var(--ink-50)}
.hours dd{font-weight:600;letter-spacing:.02em;color:var(--sage-dk)}
.reserve-cta{display:flex;gap:10px;flex-wrap:wrap;margin-top:32px}
.mini-note{margin-top:20px;font-size:12.5px;color:var(--ink-50)}

/* ==========================================================================
   11 오시는 길 — 이미지 3~12칼럼 중앙, 헤드가 아래 왼쪽으로 파고든다
   ========================================================================== */
.place{background:var(--mist);padding:clamp(84px,12vw,180px) 0;position:relative;z-index:2}
.place-grid{row-gap:clamp(22px,3vw,40px)}
.place-fig{overflow:hidden;border-radius:var(--r-lg);background:var(--cloud);box-shadow:var(--shadow)}
.place-fig img{width:100%;aspect-ratio:16/9;object-fit:cover;will-change:transform}
@media(min-width:1024px){
  .place-h{margin-top:-3.4vw;position:relative;z-index:3}
}
.place-body address{font-style:normal;color:var(--ink-70);font-size:15px;line-height:2}
.place-list{list-style:none;display:grid;gap:11px;margin:24px 0 30px}
.place-list li{position:relative;padding-left:22px;font-size:14px;color:var(--ink-70)}
.place-list li::before{content:"";position:absolute;left:0;top:9px;width:10px;height:10px;
  background:var(--sage-lt);border-radius:46% 54% 58% 42% / 52% 44% 56% 48%}

/* ---------- 푸터 ---------- */
.site-foot{background:var(--ink);color:rgba(251,250,248,.7);
  padding:clamp(58px,7vw,92px) 0 120px;position:relative;z-index:2}
.foot-grid{row-gap:30px}
.foot-brand .logo-txt{color:var(--cloud);font-size:21px}
.foot-brand .mono{font-size:10px;letter-spacing:.22em;color:rgba(251,250,248,.42);margin-top:8px}
.foot-info p{font-size:13px;line-height:1.95}
.foot-note{border-top:1px solid rgba(251,250,248,.14);padding-top:26px;display:grid;gap:11px}
.foot-note p{font-size:12px;color:rgba(251,250,248,.5);line-height:1.8}
.demo-badge{display:inline-block;justify-self:start;border:1px solid var(--sage-lt);
  color:var(--sage-lt) !important;padding:9px 18px;border-radius:999px;font-size:12.5px !important}
.demo-badge b{color:#fff}
.made-by{letter-spacing:.2em;font-size:10px !important;color:rgba(251,250,248,.32) !important}

/* ---------- 모바일 고정 CTA ---------- */
.mobile-bar{display:none}
@media(max-width:768px){
  .mobile-bar{display:grid;grid-template-columns:1fr 1fr;gap:1px;position:fixed;
    left:0;right:0;bottom:0;z-index:95;background:rgba(42,50,48,.14)}
  .mobile-bar a{padding:17px 10px;text-align:center;font-size:14px;font-weight:700}
  .mb-call{background:var(--sage);color:#fff}
  .mb-naver{background:#03C75A;color:#fff}
  .site-foot{padding-bottom:130px}
  .head-inner{height:64px}
}

/* ---------- 애니메이션 초기 상태 (js-anim 하위에만) ---------- */
html.js-anim .fade-up{opacity:0}
html.js-anim .stage{opacity:0}
html.js-anim .care-card{opacity:0}
html.js-anim .sch-item{opacity:0}
html.js-anim .voice{opacity:0}
html.js-anim .qa{opacity:0}
html.js-anim .stat{opacity:0}
html.js-anim .place-list li{opacity:0}
html.js-anim .hours>div{opacity:0}
html.js-anim .room-fig{opacity:0}

@media(max-width:1023px){html{scroll-behavior:smooth}}

/* ---------- 접근성 ---------- */
:focus-visible{outline:2px solid var(--blush-dk);outline-offset:3px}
.stats :focus-visible,.space :focus-visible,.site-foot :focus-visible{outline-color:var(--blush)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important}
  html.js-anim .fade-up,html.js-anim .stage,html.js-anim .care-card,html.js-anim .sch-item,
  html.js-anim .voice,html.js-anim .qa,html.js-anim .stat,html.js-anim .place-list li,
  html.js-anim .hours>div,html.js-anim .room-fig{opacity:1 !important}
  .curtain{display:none}
  .hero-scroll i::after{animation:none}
  .stage-viewport{overflow-x:auto}
  .bubble-layer{display:none}
}