/* ==========================================================================
   서래성형외과 — 사이트 공통 스타일
   base: 리뷰티 템플릿 260628zau7o-01 원본 CSS (토큰/헤더/푸터) 그대로
   ========================================================================== */

:root{--mocha:#49423e;--mocha-deep:#332d2a;--mocha-soft:#6b605a;--espresso:#2c2724;--gold:#f1d1ac;--gold-soft:#f7e6d2;--gold-line:#e7d3bb;--sand:#cda87f;--sand-deep:#8a6f54;--ivory:#f6f0e6;--ivory-warm:#efe7d8;--ivory-pure:#fbf7ef;--ink:#3f3835;--ink-soft:#574e49;--ink-mute:#534b45;--on-mocha:#f6f0e6;--on-mocha-soft:#e7dccb;--accent:#8a6f54;--accent-deep:#6b5238;--line:#e7d3bb;--line-soft:#efe2cf;--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:24px;--space-6:32px;--space-7:48px;--space-8:64px;--space-9:96px;--space-10:128px;--gutter:clamp(20px,4.5vw,56px);--container:1200px;--container-narrow:780px;--section-pad-block:clamp(56px,7vw,108px);--section-gap:clamp(32px,4vw,56px);--grid-gap:clamp(16px,2.2vw,28px);--card-pad:clamp(22px,2.4vw,32px);--stack-gap:var(--space-5);--cluster-gap:var(--space-3);--radius:14px;--radius-lg:22px;--radius-sm:8px;--radius-pill:999px;--header-h:148px;--fs-eyebrow:clamp(.72rem,.68rem + .2vw,.82rem);--fs-body:clamp(.96rem,.93rem + .2vw,1.05rem);--fs-h3:clamp(1.25rem,1.05rem + .9vw,1.62rem);--fs-h2:clamp(1.9rem,1.3rem + 2.4vw,2.95rem);--fs-display:clamp(2.3rem,1.5rem + 4vw,4.15rem);--fs-band:clamp(1.5rem,1rem + 2.4vw,2.6rem);--lh-body:1.85;--lh-display:1.22;--ls-display:.01em;--ls-eyebrow:.34em;--dur-1:.4s;--dur-2:.8s;--ease:cubic-bezier(.22,.7,.3,1);--shadow:0 24px 52px -32px rgba(44,39,36,.34);--shadow-sm:0 14px 30px -22px rgba(44,39,36,.26);--font-serif:'Nanum Myeongjo',serif;--font-body:'Pretendard','Pretendard Variable',-apple-system,system-ui,sans-serif;--font-head:'Nanum Myeongjo',serif}
/* 글자 기준 크기 — 2026-08-11 전체 20% 확대.
   이 파일의 font-size 선언 101개가 모두 rem/em 이라 뿌리만 키우면 전부 따라 커진다.
   px 가 아니라 %(사용자 브라우저 기본값 대비)로 두어 글꼴 크기 설정도 그대로 존중한다.
   여백·컨테이너는 px 라 그대로 — 글만 커지고 배치는 흔들리지 않는다 */
html{font-size:120%}

/* v14-center-floor */
main :where(section,div,article,header,aside,h1,h2,h3,h4,h5,p,ul,ol,li,dl,dt,dd,figure,figcaption,blockquote,table){text-align:center}

*,*::before,*::after{box-sizing:border-box}html{overflow-x:clip;scroll-behavior:smooth}body{margin:0;background:var(--ivory);color:var(--ink);font-family:var(--font-body);font-size:var(--fs-body);line-height:var(--lh-body);-webkit-font-smoothing:antialiased;word-break:keep-all;overflow-x:clip}img{display:block;max-width:100%;height:auto}/* height:auto — <img> 의 height 속성(가로세로비를 알려 주려고 넣는다)이 레이아웃 높이까지 정해 버리는 것을 막는다. aspect-ratio 만 쓰고 height 를 지정하지 않은 규칙(.mstep img 등)에서 상자가 원본 픽셀 높이만큼 늘어났다. height 를 직접 정하는 규칙(.row__media img 등)은 우선순위가 높아 그대로 이긴다 */a{color:inherit;text-decoration:none}h1,h2,h3,h4,p{margin:0}.ic{width:1.3em;height:1.3em;display:inline-block;vertical-align:middle;flex:0 0 auto;fill:currentColor}:where(a,button,summary,input,.rb-btn,.rb-nav__link):focus-visible{outline:3px solid var(--accent-deep);outline-offset:3px;border-radius:4px}:focus:not(:focus-visible){outline:none}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition-duration:.001ms!important;animation-duration:.001ms!important}}/* header */.rb-header{position:sticky;top:0;z-index:1000;background:rgba(246,240,230,.95);backdrop-filter:saturate(120%) blur(8px);border-bottom:1px solid var(--line)}.rb-util{display:flex;align-items:center;justify-content:center;gap:var(--space-5);min-height:38px;padding:6px var(--gutter);background:var(--mocha);color:var(--on-mocha-soft);font-size:.76rem;letter-spacing:.02em;flex-wrap:wrap}.rb-util a{color:var(--on-mocha-soft);min-height:30px;display:inline-flex;align-items:center}.rb-util a:hover{color:var(--gold)}.rb-util__tel{font-weight:700;color:var(--gold);letter-spacing:.04em}/* center-logo split nav */.rb-bar{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;column-gap:clamp(12px,2.4vw,40px);min-height:104px;padding:var(--space-3) var(--gutter);max-width:1320px;margin-inline:auto;position:relative}.rb-navwrap{display:flex;align-items:center;min-width:0;min-height:50px}.rb-navwrap--left{justify-content:flex-end}.rb-navwrap--right{justify-content:flex-start}.rb-nav{display:flex;align-items:center;list-style:none;margin:0;padding:0;gap:clamp(8px,1.4vw,26px);flex-wrap:nowrap}.rb-nav--left{justify-content:flex-end}.rb-nav--right{justify-content:flex-start}.rb-nav__item{display:flex;align-items:center}.rb-nav__link{position:relative;display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:8px 4px;font-weight:600;font-size:.97rem;color:var(--mocha);white-space:nowrap}.rb-nav__link::after{content:"";position:absolute;left:50%;right:50%;bottom:12px;height:1.5px;background:var(--sand-deep);transition:left var(--dur-1) var(--ease),right var(--dur-1) var(--ease)}.rb-nav__item:hover .rb-nav__link::after,.rb-nav__item:focus-within .rb-nav__link::after,.rb-nav__link.is-active::after{left:4px;right:4px}.rb-nav__link.is-active{color:var(--accent-deep)}.rb-brand{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;min-height:44px;gap:3px;flex:0 0 auto;padding-inline:clamp(8px,1.4vw,22px)}.rb-brand b{font-family:var(--font-serif);font-weight:800;font-size:clamp(1.45rem,1.1rem + 1vw,1.9rem);letter-spacing:.18em;color:var(--mocha);line-height:1}.rb-brand span{font-size:.54rem;letter-spacing:.36em;color:var(--accent-deep);text-transform:uppercase;font-weight:600}.rb-burger{display:none;position:absolute;right:var(--gutter);top:50%;transform:translateY(-50%);min-width:44px;min-height:44px;background:none;border:0;color:var(--mocha);cursor:pointer;align-items:center;justify-content:center}/* mobile drawer */.rb-drawer{position:fixed;inset:0;z-index:1100;background:rgba(44,39,36,.52);opacity:0;visibility:hidden;transition:opacity var(--dur-1) var(--ease)}.rb-drawer.is-open{opacity:1;visibility:visible}.rb-drawer__panel{position:absolute;top:0;right:0;height:100%;width:min(86vw,360px);background:var(--ivory-pure);overflow-y:auto;padding:var(--space-7) var(--gutter);transform:translateX(100%);transition:transform var(--dur-1) var(--ease);text-align:center}.rb-drawer.is-open .rb-drawer__panel{transform:none}.rb-drawer__close{position:absolute;top:var(--space-4);right:var(--space-4);min-width:44px;min-height:44px;background:none;border:0;color:var(--mocha);cursor:pointer;font-size:1.4rem}.rb-drawer__nav{list-style:none;margin:var(--space-7) 0 0;padding:0;display:flex;flex-direction:column;gap:var(--space-2)}.rb-drawer__nav a{display:flex;align-items:center;justify-content:center;min-height:48px;font-family:var(--font-serif);font-weight:700;font-size:1.1rem;color:var(--mocha);border-bottom:1px solid var(--line-soft)}.rb-drawer__nav a:hover{color:var(--accent-deep)}@media(max-width:1080px){.rb-navwrap{display:none}.rb-burger{display:inline-flex}.rb-bar{grid-template-columns:1fr;justify-items:center;min-height:74px}.rb-brand{padding-inline:0}}/* footer */.rb-footer{background:var(--mocha-deep);color:var(--on-mocha-soft);padding-block:var(--section-pad-block);padding-inline:var(--gutter)}.rb-footer__inner{max-width:var(--container);margin-inline:auto;text-align:center;display:flex;flex-direction:column;align-items:center;gap:var(--space-5)}.rb-footer__brand{font-family:var(--font-serif);font-weight:800;font-size:1.5rem;letter-spacing:.18em;color:var(--ivory-pure)}.rb-footer__brand span{display:block;font-family:var(--font-body);font-size:.56rem;letter-spacing:.36em;color:var(--gold);text-transform:uppercase;margin-top:6px;font-weight:600}.rb-footer__links{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--space-2) var(--space-5);list-style:none;margin:0;padding:0}.rb-footer__links a{min-height:44px;display:inline-flex;align-items:center;font-size:.9rem;color:var(--on-mocha-soft)}.rb-footer__links a:hover{color:var(--gold)}.rb-footer__biz{font-size:.86rem;line-height:1.9;color:var(--on-mocha-soft);max-width:72ch}.rb-footer__biz b{color:var(--ivory-pure);font-weight:700}.rb-footer__sep{color:var(--sand);margin-inline:6px}.rb-footer__copy{font-size:.78rem;letter-spacing:.04em;color:var(--on-mocha-soft);border-top:1px solid rgba(205,168,127,.3);padding-top:var(--space-5);width:100%;max-width:var(--container)}@media(max-width:560px){.rb-footer__biz .rb-footer__sep{display:inline-block;width:100%;height:0;margin:0;overflow:hidden;color:transparent}}

/* 글자 20% 확대에 따른 헤더 조정 — 원본 줄(위)은 그대로 두고 여기서 덮어쓴다.
   내비 글자가 15.5px → 18.6px 가 되면서 1085~1200px 구간에서 메뉴가 두 줄로 접혔다.
   그 구간을 햄버거로 넘긴다(원래 기준 1080px → 1200px). 1200px 이상은 한 줄로 그대로 */
@media(max-width:1200px){
  .rb-navwrap{display:none}
  .rb-burger{display:inline-flex}
  .rb-bar{grid-template-columns:1fr;justify-items:center;min-height:74px}
  .rb-brand{padding-inline:0}
}

/* ==========================================================================
   서래성형외과 — 섹션 컴포넌트
   템플릿(260628zau7o-01)의 섹션 CSS 값을 그대로 사용하되,
   페이지마다 중복되던 정의를 재사용 가능한 컴포넌트로 정리했습니다.
   ========================================================================== */

/* ---------- 공통 ---------- */
.sec{padding-block:clamp(64px,8vw,116px);padding-inline:var(--gutter)}
.sec--ivory{background:var(--ivory);color:var(--ink)}
.sec--pure{background:var(--ivory-pure);color:var(--ink)}
.sec--warm{background:var(--ivory-warm);color:var(--ink)}
.sec--mocha{background:var(--mocha);color:var(--on-mocha)}
.sec--deep{background:var(--mocha-deep);color:var(--on-mocha)}
.sec--gold{background:var(--gold-soft);color:var(--ink);border-block:1px solid var(--gold-line)}
.sec--white{background:#fff;color:var(--ink)}
/* 화이트 종이 바탕 — SVG 그레인(feTurbulence)과 갈색 잉크 얼룩을 CSS 로만 얹는다.
   얼룩은 크기·위치·농도를 서로 다르게 두어 불규칙하게 보이도록 했고,
   가장 진한 곳도 알파 .10 이라 글자 가독성에는 영향이 없다.
   background-attachment:fixed 라 스크롤해도 바탕은 제자리에 머문다. */
.sec--paper{
  background-color:#fff;
  color:var(--ink);
  background-image:
    radial-gradient(46% 38% at 17% 21%,rgba(122,90,58,.10) 0%,rgba(122,90,58,.045) 45%,rgba(122,90,58,0) 72%),
    radial-gradient(34% 44% at 86% 57%,rgba(107,82,56,.085) 0%,rgba(107,82,56,.032) 48%,rgba(107,82,56,0) 74%),
    radial-gradient(28% 24% at 58% 91%,rgba(138,111,84,.065) 0%,rgba(138,111,84,.026) 50%,rgba(138,111,84,0) 76%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)' opacity='.05'/%3E%3C/svg%3E");
  background-repeat:no-repeat,no-repeat,no-repeat,repeat;
  background-size:auto,auto,auto,180px 180px;
  background-attachment:fixed,fixed,fixed,fixed;
}
/* 모바일에서는 fixed 배경이 스크롤마다 다시 그려져 무거우므로 함께 흐르게 둔다.
   모션 최소화 설정에서도 마찬가지. */
@media(max-width:760px){
  .sec--paper{background-attachment:scroll,scroll,scroll,scroll;background-size:auto,auto,auto,140px 140px}
}
@media(prefers-reduced-motion:reduce){
  .sec--paper{background-attachment:scroll,scroll,scroll,scroll}
}
.sec__inner{max-width:var(--container);margin-inline:auto;display:flex;flex-direction:column;align-items:center;gap:var(--section-gap)}
.sec__inner--narrow{max-width:820px}
.sec__inner--mid{max-width:980px}
.sec__head{max-width:var(--container-narrow);margin-inline:auto;display:flex;flex-direction:column;align-items:center;gap:var(--space-3)}
/* 왼쪽 정렬 머리말 — 아래 내용이 왼쪽 정렬인 섹션(눈성형 대표 항목)에서 쓴다.
   아이라인 앞의 세로 막대까지 참고 시안과 같다 */
.sec__head--left{align-self:stretch;width:100%;max-width:var(--container);align-items:flex-start}
.sec__head--left :where(p,h2){text-align:left}
.sec__head--left .eyebrow{display:inline-flex;align-items:center;gap:13px}
.sec__head--left .eyebrow::before{content:"";width:2px;height:1.35em;background:var(--accent-deep)}
/* 폭을 푼 머리말 — 제목 한 줄이 기본 폭(780px)보다 길어 접히는 섹션에서 쓴다.
   리드 문장은 자체 max-width 가 있어 넓어지지 않는다.
   글자 크기를 칸 폭(cqi)에 맞춰 줄일 수 있도록 컨테이너로도 선언한다. */
.sec__head--wide{max-width:100%;width:100%;container-type:inline-size}
.eyebrow{margin:0;font-size:var(--fs-eyebrow);letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--accent-deep);font-weight:600}
.sec--mocha .eyebrow,.sec--deep .eyebrow{color:var(--gold)}
.eyebrow--rule{display:flex;align-items:center;justify-content:center;gap:14px}
.eyebrow--rule::before,.eyebrow--rule::after{content:"";width:clamp(26px,4vw,52px);height:1px;background:rgba(241,209,172,.55)}
/* 왼쪽 정렬 섹션용 — 앞쪽에만 짧은 선 */
.eyebrow--dash{display:inline-flex;align-items:center;gap:14px}
.eyebrow--dash::before{content:"";width:clamp(22px,3vw,34px);height:1px;background:var(--sand);flex:none}
.sec--ivory .eyebrow--rule::before,.sec--ivory .eyebrow--rule::after,.sec--pure .eyebrow--rule::before,.sec--pure .eyebrow--rule::after{background:var(--line)}
.title{margin:0;font-family:var(--font-serif);font-weight:800;font-size:var(--fs-h2);line-height:1.28;color:var(--mocha)}
.sec--mocha .title,.sec--deep .title{color:var(--ivory-pure)}
.title .em{color:var(--accent-deep);font-style:normal}
.sec--mocha .title .em,.sec--deep .title .em{color:var(--gold)}
/* 진료분야 제목 — 둘째 줄 "거상 · 눈성형 · 줄기세포 · 지방성형" 을 한 줄로 둔다.
   그대로 두면 1280px 이상에서 "지방성형" 이 셋째 줄로 떨어졌다.
   좁은 화면에서는 한 줄이 칸을 넘치므로, 칸 폭의 6.5%(≈ 한 줄이 딱 들어가는 크기)를
   상한으로 두어 글자가 폭을 따라 줄어들게 한다 — 넉넉한 화면에서는 --fs-h2 그대로다. */
.title--dept{font-size:min(var(--fs-h2),6.5cqi)}
.title__nb{white-space:nowrap}
.lead{margin:0;max-width:52ch;color:var(--ink-soft);line-height:var(--lh-body)}
/* 한 문장짜리 리드를 한 줄로 — 기본 52ch(520px)로는 접히는 문장에 쓴다 */
.lead--wide{max-width:700px}
.sec--mocha .lead,.sec--deep .lead{color:var(--on-mocha-soft)}
.lead b{color:var(--mocha);font-weight:700}
.sec--mocha .lead b,.sec--deep .lead b{color:var(--gold-soft)}
.note{margin:0;max-width:62ch;font-size:.8rem;line-height:1.75;color:var(--ink-mute)}
.sec--mocha .note,.sec--deep .note{color:var(--on-mocha-soft)}
.rule{width:48px;height:2px;background:var(--sand-deep);border:0;margin:0}

/* ---------- 히어로 (서브 상단) ---------- */
.hero{position:relative;isolation:isolate;background:var(--espresso);color:var(--on-mocha);overflow:hidden}
.hero__bg{position:absolute;inset:0;background-size:cover;background-position:center top;opacity:.5;filter:grayscale(.14) brightness(.78)}
.hero__scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(44,39,36,.5) 0%,rgba(51,45,42,.6) 46%,rgba(44,39,36,.9) 100%)}
.hero__inner{position:relative;max-width:880px;margin-inline:auto;padding-block:clamp(112px,15vw,210px);padding-inline:var(--gutter);display:flex;flex-direction:column;align-items:center;gap:clamp(18px,2.4vw,28px)}
.hero__eyebrow{display:flex;align-items:center;justify-content:center;gap:14px;margin:0;font-size:.78rem;letter-spacing:.34em;text-transform:uppercase;color:var(--gold)}
.hero__eyebrow::before,.hero__eyebrow::after{content:"";width:clamp(26px,4vw,52px);height:1px;background:rgba(241,209,172,.55)}
.hero__title{margin:0;font-family:var(--font-serif);font-weight:800;font-size:var(--fs-display);line-height:var(--lh-display);letter-spacing:var(--ls-display);color:var(--ivory-pure)}
.hero__title .em{font-style:normal;color:var(--gold)}
.hero__lead{margin:0;max-width:50ch;font-size:var(--fs-h3);font-weight:500;line-height:1.6;color:var(--on-mocha-soft)}
.hero__lead b{color:var(--gold-soft);font-weight:700}

/* ---------- 홈 히어로 (이미지 그리드형) ---------- */
.mhero{position:relative;isolation:isolate;background:var(--mocha-deep);color:var(--on-mocha);padding-block:clamp(64px,9vw,120px);padding-inline:var(--gutter);overflow:hidden}
.mhero__inner{max-width:var(--container);margin-inline:auto;display:flex;flex-direction:column;align-items:center;gap:var(--space-7)}
.mhero__head{max-width:760px;margin-inline:auto;display:flex;flex-direction:column;align-items:center;gap:var(--space-5)}
.mhero__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--grid-gap);width:100%;max-width:var(--container);margin-inline:auto}
.mhero__cell{border-radius:var(--radius-lg);overflow:hidden;box-shadow:0 28px 60px -26px rgba(0,0,0,.7);border:1px solid rgba(241,209,172,.3)}
/* 세 장 모두 같은 크기 한 줄 — 그리드가 낮아진 만큼 배경 영상이 더 보인다 */
.mhero__cell--tall,.mhero__cell--wide{aspect-ratio:4/3}
.mhero__cell img{width:100%;height:100%;object-fit:cover}
@media(max-width:760px){.mhero__grid{grid-template-columns:repeat(2,minmax(0,1fr));max-width:520px}}
@media(max-width:460px){.mhero__grid{grid-template-columns:minmax(0,1fr);max-width:360px}}

/* ---------- 와이드 미디어 ---------- */
.media{width:100%;max-width:var(--container);margin-inline:auto;aspect-ratio:16/9;border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-sm);border:1px solid var(--line)}
.media img{width:100%;height:100%;object-fit:cover}
.media--narrow{max-width:760px}
.media--portrait{max-width:360px;aspect-ratio:4/5}
.sec--mocha .media,.sec--deep .media{border-color:rgba(241,209,172,.22)}

/* ---------- 2단 소개 (텍스트 좌 · 인물 사진 우) ---------- */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.62fr);align-items:center;gap:clamp(30px,5vw,84px);width:100%;max-width:var(--container);margin-inline:auto}
.split__text{display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-5)}
/* main 전역의 가운데 정렬(center floor)을 이 블록에서만 왼쪽으로 되돌린다 */
.split__text :where(p,h2,h3,a){text-align:left}
/* 한글은 1ch 가 좁게 잡혀 기본 52ch 로는 단이 절반만 찬다 — 단 폭을 그대로 쓴다 */
.split__text .lead{max-width:none}
.split__text .btn{margin-top:var(--space-4)}
.split__media{width:100%;aspect-ratio:4/5;border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow)}
.split__media img{width:100%;height:100%;object-fit:cover}
.sec--mocha .split__media,.sec--deep .split__media{border-color:rgba(241,209,172,.22)}
@media(max-width:940px){
  .split{grid-template-columns:minmax(0,1fr);gap:var(--space-7);max-width:520px}
  .split__text{align-items:center}
  .split__text :where(p,h2,h3,a){text-align:center}
  .split__media{max-width:400px;margin-inline:auto}
}

/* ---------- 원형 항목 (시술 방법 타이틀) ---------- */
.orbs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(10px,1.6vw,26px);width:100%;max-width:var(--container);margin-inline:auto}
.orb{aspect-ratio:1;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(9px,1.5vw,24px);padding:clamp(12px,2.2vw,34px);background:radial-gradient(circle at 38% 32%,#fbf7f0 0%,#f8f3e9 42%,#f1e9db 100%);border:1px solid #eadbc6;box-shadow:0 24px 46px -30px rgba(44,39,36,.5)}
.orb__no{font-family:var(--font-body);font-weight:800;font-size:clamp(.95rem,.74rem + .52vw,1.26rem);letter-spacing:.04em;line-height:1;color:var(--mocha)}
/* 두 줄 높이를 고정해 제목이 한 줄인 항목도 번호 높이가 어긋나지 않게 한다 */
.orb__title{margin:0;display:flex;align-items:center;min-height:3.4em;font-family:var(--font-body);font-weight:500;font-size:clamp(.84rem,.6rem + .66vw,1.12rem);line-height:1.7;color:var(--mocha);word-break:keep-all}
@media(max-width:820px){.orbs{grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(14px,3vw,26px);max-width:560px}}

/* ---------- 스택형 상세 행 (진료 항목) ---------- */
.rows{list-style:none;margin:0;padding:0;width:100%;max-width:900px;display:flex;flex-direction:column;gap:clamp(18px,2.6vw,30px)}
.row{display:flex;flex-direction:column;align-items:center;gap:clamp(14px,1.8vw,20px);padding:clamp(24px,2.8vw,38px);background:var(--ivory);border:1px solid var(--line);border-radius:20px;box-shadow:0 18px 38px -30px rgba(44,39,36,.3)}
.sec--ivory .row{background:var(--ivory-pure)}
.row__num{display:flex;align-items:center;justify-content:center;width:clamp(46px,6vw,58px);height:clamp(46px,6vw,58px);border-radius:50%;background:var(--gold-soft);border:1px solid var(--gold-line);font-family:var(--font-serif);font-weight:800;font-size:1.05rem;color:var(--accent-deep)}
.row__media{width:100%;max-width:420px;aspect-ratio:16/10;border-radius:16px;overflow:hidden;box-shadow:0 20px 44px -30px rgba(44,39,36,.32)}
.row__media img{width:100%;height:100%;object-fit:cover}
.row__title{margin:0;font-family:var(--font-serif);font-weight:700;font-size:var(--fs-h3);line-height:1.45;color:var(--mocha)}
.row__desc{margin:0;max-width:60ch;color:var(--ink-soft);line-height:var(--lh-body)}
.row__desc + .row__desc{margin-top:calc(var(--space-2) * -1)}

/* ---------- 대표 항목 (머리말 + 수술법별 단계 이미지 줄) ---------- */
/* 참고 시안과 같은 구성 — 위쪽에 세로막대 제목과 설명(왼쪽) · 비교 사진(오른쪽),
   그 아래로 수술법마다 한 줄씩 [번호·이름·설명 | 단계 이미지 원형 배열].
   카드 테두리 없이 평평하게 두고, 좌우 여백이 비어 보이지 않게 폭을 넓게 쓴다. */
/* 같은 페이지의 다른 섹션(.sec__inner--wide)과 같은 폭 — 섹션끼리 좌우 끝선이 맞는다 */
.sec__inner--feat{max-width:1680px}
.feat{display:flex;flex-direction:column;gap:clamp(32px,4.2vw,64px);width:100%}
.feat__head{display:flex;flex-direction:column;align-items:center;gap:clamp(8px,1.1vw,15px)}
/* main 전역의 가운데 정렬(center floor)을 이 블록에서만 왼쪽으로 되돌린다 */
.feat__head :where(p,h3,span){text-align:center}
.feat__no{font-family:var(--font-serif);font-weight:700;font-size:clamp(.82rem,.76rem + .2vw,.94rem);letter-spacing:.16em;line-height:1;color:var(--pt,var(--accent-deep))}
.feat__title{margin:0;font-family:var(--font-body);font-weight:700;font-size:clamp(1.25rem,1rem + 1.15vw,1.95rem);line-height:1.4;color:var(--mocha);word-break:keep-all}
/* 한 줄 길이 상한은 em 으로 — 한글은 1em 이 한 글자라 40em ≈ 40자다.
   컨테이너가 1680px 라 상한이 없으면 한 줄이 90자를 넘어 읽기 힘들어진다 */
/* 폭이 좁아 문장이 잘게 접히던 것을 넓혔다 — 02·03 은 3줄, 04 는 1줄로 떨어진다 */
/* 가운데 정렬이라 마지막 줄이 짧게 남으면 한 조각만 떠 보인다 —
   balance 로 문단 안의 줄 길이를 고르게 나눈다(줄바꿈 위치만 바뀌고 글은 그대로다).
   문단 사이는 줄 간격보다 넉넉히 벌려 두 문단이 서로 구분되게 한다. */
.feat__desc{margin:0 auto;max-width:760px;font-size:clamp(.84rem,.79rem + .22vw,.96rem);line-height:1.85;color:var(--ink-mute);text-wrap:balance}
.feat__desc + .feat__desc{margin-top:clamp(6px,.6vw,12px)}

/* 수술법 줄 — 왼쪽 번호·이름·설명, 오른쪽 단계 이미지 */
.methods{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:clamp(26px,3vw,48px)}
.method{display:grid;grid-template-columns:minmax(220px,.72fr) minmax(0,1fr);align-items:center;gap:clamp(24px,3vw,56px)}
/* 수술법 사이 구분선 — 줄과 줄이 붙어 보이지 않게 한다.
   위 여백은 .methods 의 gap, 아래 여백은 이 padding 이라 선이 두 줄 사이 가운데에 온다 */
.method + .method{padding-top:clamp(26px,3vw,48px);border-top:1px solid rgba(107,82,56,.16)}
.method__text{display:flex;flex-direction:column;align-items:flex-start;gap:clamp(9px,1.1vw,15px)}
.method__text :where(p,h4,span){text-align:left}
.method__head{margin:0;display:flex;align-items:baseline;gap:clamp(10px,1.1vw,17px)}
.method__no{font-family:var(--font-serif);font-weight:800;font-size:clamp(1.5rem,1.15rem + 1.3vw,2.2rem);line-height:1;color:var(--line-soft);color:color-mix(in srgb,var(--pt) 30%,#fff)}
.method__name{font-family:var(--font-body);font-weight:700;font-size:clamp(1.02rem,.92rem + .48vw,1.32rem);line-height:1.4;color:var(--mocha);word-break:keep-all}
.method__desc{margin:0;max-width:42em;font-size:clamp(.8rem,.76rem + .18vw,.9rem);line-height:1.8;color:var(--ink-mute)}
/* 열 수는 단계 수(--n)만큼 — 빌더가 인라인으로 넣는다 */
.method__steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(var(--n,3),minmax(0,1fr));justify-items:stretch;gap:clamp(12px,1.4vw,22px)}
/* 캡션이 붙은 단계는 카드(.mstep)가 li 안의 figure 라 li 를 세로로 세워 가운데 정렬한다.
   캡션 없는 단계는 li 자신이 .mstep 이므로 건드리지 않는다 — 띠가 카드 폭을 잃는다 */
.method__steps > li:not(.mstep){display:flex;flex-direction:column;align-items:center}
/* 이름·설명 없이 단계만 있는 줄(03 노인성 안검) — 글 칸까지 넘겨받아 가운데에 선다.
   폭은 02 카드 줄(.mcard 두 장 + 간격)과 같은 값이라 두 섹션의 좌우 여백이 맞는다 */
.method__steps:only-child{grid-column:1/-1;width:min(100%,74.2vw);max-width:1274px;margin-inline:auto}
/* 참고 시안과 같은 둥근 카드 — 그림 아래에 STEP 띠.
   폭 상한을 두지 않고 칸을 꽉 채운다 — 오른쪽 끝이 컨테이너와 맞아 여백이 고르게 남는다 */
.mstep{margin:0;width:100%;display:flex;flex-direction:column;border-radius:clamp(10px,1vw,18px);overflow:hidden;background:var(--ivory-warm);box-shadow:0 14px 28px -20px rgba(44,39,36,.5)}
.mstep img{width:100%;aspect-ratio:10/7;object-fit:cover}
.mstep__label{display:block;padding:.7em 0;background:var(--pt,var(--accent-deep));color:#fff;text-align:center;font-size:clamp(.7rem,.66rem + .16vw,.8rem);font-weight:500;letter-spacing:.14em;line-height:1}
.mstep__label b{font-weight:800;letter-spacing:.06em}
/* 가운데 정렬 머리말 — 카드형·박스형이 함께 쓴다 */
.feat--cards,.feat--boxes{align-items:center}
.feat--cards .feat__head,.feat--boxes .feat__head{align-items:center;max-width:none}
.feat--cards .feat__head :where(p,h3,span),.feat--boxes .feat__head :where(p,h3,span){text-align:center}
.feat--cards .feat__title em,.feat--boxes .feat__title em{font-style:normal;color:var(--pt,var(--accent-deep))}
.feat--cards .feat__desc,.feat--boxes .feat__desc{margin-inline:auto}

/* 박스형 변형 (.feat--boxes) — 항목마다 흰 박스 하나.
   박스 위쪽에 이름 띠가 걸리고(아래 모서리만 둥글게), 그 아래 설명과 STEP 카드 줄이 온다.
   STEP 카드도 같은 방식으로 아래 모서리만 둥글다. */
.tboxes{list-style:none;margin:0;padding:0;width:100%;display:flex;flex-direction:column;gap:clamp(26px,3vw,48px)}
.tbox{display:flex;flex-direction:column;align-items:center;width:min(100%,1400px);margin-inline:auto;padding:0 clamp(16px,2vw,32px) clamp(28px,3.4vw,52px);background:#fff;border:1px solid var(--line-soft);border-radius:clamp(20px,2.2vw,30px);box-shadow:0 24px 46px -34px rgba(44,39,36,.42)}
.tbox__name{width:min(100%,640px);margin:0;padding:clamp(12px,1.4vw,20px) 14px;background:var(--pt,var(--accent-deep));color:#fff;text-align:center;font-family:var(--font-body);font-weight:400;font-size:clamp(1.05rem,.9rem + .72vw,1.7rem);line-height:1.35;border-end-start-radius:clamp(20px,2.2vw,30px);border-end-end-radius:clamp(20px,2.2vw,30px);word-break:keep-all}
.tbox__name b{font-weight:700}
.tbox__desc{margin:clamp(20px,2.2vw,32px) auto 0;max-width:840px;text-align:center;font-size:clamp(.84rem,.79rem + .22vw,.96rem);line-height:1.85;color:var(--ink-mute)}
.tsteps{list-style:none;margin:clamp(22px,2.6vw,40px) 0 0;padding:0;width:100%;display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(16px,1.8vw,30px)}
.tsteps > li{width:clamp(186px,22vw,340px);display:flex;flex-direction:column;align-items:center}
.tstep{position:relative;margin:0;width:100%;overflow:hidden;background:var(--ivory-warm);border-end-start-radius:clamp(18px,2vw,30px);border-end-end-radius:clamp(18px,2vw,30px)}
.tstep img{display:block;width:100%;aspect-ratio:10/7;object-fit:cover}
.tstep__label{position:absolute;left:0;right:0;bottom:0;padding:.74em 2px;background:var(--mocha);color:#fff;text-align:center;font-size:clamp(.74rem,.7rem + .18vw,.88rem);font-weight:300;letter-spacing:.08em;line-height:1}
.tstep__label b{font-weight:900;letter-spacing:.04em}
.tstep__cap{margin:clamp(12px,1.3vw,18px) 0 0;max-width:22em;text-align:center;font-size:clamp(.78rem,.75rem + .16vw,.88rem);line-height:1.7;color:var(--ink-mute)}
/* 카드형 변형 (.feat--cards) — 03 단계 카드(.mstep)와 같은 구성이다:
   그림 + 카드 안 이름 띠, 설명은 카드 아래 글(2026-08-11).
   시안대로 두 번째 카드는 한 단 내려 엇갈리게 둔다 */
.cardrow{list-style:none;margin:0;padding:0;width:100%;display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-start;gap:clamp(18px,2.2vw,34px)}
.mcard{width:clamp(216px,36vw,620px);display:flex;flex-direction:column;align-items:center;gap:clamp(12px,1.4vw,20px)}
.mcard:nth-child(even){margin-top:clamp(20px,4.2vw,62px)}
/* 카드 자체 — 둥글기·그림자·바탕은 .mstep 과 같은 값이라 두 섹션 카드가 같아 보인다.
   overflow:hidden 이 그림과 띠를 카드 모서리에 맞춰 자른다 */
.mcard__fig{margin:0;width:100%;display:flex;flex-direction:column;border-radius:clamp(10px,1vw,18px);overflow:hidden;background:var(--ivory-warm);box-shadow:0 14px 28px -20px rgba(44,39,36,.5)}
/* 그림 위아래 빈 여백이 넓어 카드가 세로로 길다 — 폭은 그대로 두고 비율만 2:1 로 낮춰
   위아래만 잘라낸다. cover + center 라 눈 그림은 찌그러지지 않고 가운데가 남는다.
   원본 1160×800 에서 그림이 든 구간은 219~678px 이라 이 비율에서도 잘리지 않는다
   (더 낮추면 두 번째 그림의 화살표 꼬리가 이름 띠에 닿는다) */
.mcard__fig img{display:block;width:100%;aspect-ratio:1.9/1;object-fit:cover;object-position:center}
/* 이름 띠 — .mstep__label 과 같은 자리(카드 아래쪽)에 붙는다. 색은 블록 포인트 컬러 */
.mcard__name{display:block;padding:.8em .7em;background:var(--pt,var(--accent-deep));color:#fff;text-align:center;font-weight:700;font-size:clamp(.84rem,.78rem + .24vw,.98rem);line-height:1.35;word-break:keep-all}
.mcard__desc{margin:0;max-width:28em;text-align:center;font-size:clamp(.8rem,.76rem + .18vw,.9rem);line-height:1.75;color:var(--ink-mute)}
/* 태블릿부터 한 열로 — 2단을 유지하면 단계 카드가 150px 아래로 작아져 그림이 안 읽힌다 */
@media(max-width:900px){
  .method{grid-template-columns:minmax(0,1fr);gap:var(--space-5)}
}
@media(max-width:560px){
  /* 카드형·박스형 항목은 좁은 화면에서 칸을 꽉 채운다 — 가운데에 좁게 서 있지 않게 */
  .mcard,.tsteps > li{width:100%}
  /* 한 열로 접히면 엇갈림은 위 카드와의 간격으로만 보이므로 뺀다 */
  .mcard:nth-child(even){margin-top:0}
  /* 카드가 폭을 꽉 채우는 구간이라 단계 줄도 같이 채운다 — 좌우 여백을 맞춘다 */
  .method__steps:only-child{width:100%}
}
@media(max-width:520px){
  /* 단계는 순서대로 읽혀야 하므로 좁은 화면에서도 한 줄에 유지한다 — 간격만 좁힌다 */
  .method__steps{gap:8px}
  /* 카드가 좁아진 만큼 STEP 띠도 줄인다 — 자간이 넓으면 글자가 카드를 넘는다 */
  .mstep__label{padding:.62em 2px;letter-spacing:.08em}
}

/* 행(.row) 안의 서브 항목 — rows_section 계열에서 sub 를 넘길 때 쓴다 */
.sublist{list-style:none;margin:0;padding:0;width:100%;display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:var(--space-4)}
.sublist li{padding:clamp(18px,2vw,24px);background:var(--ivory-warm);border:1px solid var(--line-soft);border-radius:14px;display:flex;flex-direction:column;gap:var(--space-2)}
.sublist b{font-family:var(--font-serif);font-weight:700;font-size:1.02rem;color:var(--accent-deep)}
.sublist p{margin:0;font-size:.92rem;line-height:1.8;color:var(--ink-soft)}

/* ---------- 카드 그리드 ---------- */
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--grid-gap);width:100%;max-width:var(--container);margin-inline:auto}
.cards--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.cards--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.card{display:flex;flex-direction:column;background:var(--ivory-pure);border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-sm);transition:transform var(--dur-1) var(--ease),box-shadow var(--dur-1) var(--ease)}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
/* 어두운 섹션 위에서는 카드를 크림색으로 깔아 띄운다. 글자색은 밝은 배경 기준(기본값)을 그대로 쓴다 */
.sec--mocha .card,.sec--deep .card{background:var(--ivory);border-color:var(--gold-line);box-shadow:0 26px 48px -22px rgba(0,0,0,.55)}
.sec--mocha .card:hover,.sec--deep .card:hover{border-color:var(--sand);box-shadow:0 34px 60px -22px rgba(0,0,0,.62)}
.card__media{width:100%;aspect-ratio:16/10;overflow:hidden}
.card__media img{width:100%;height:100%;object-fit:cover}
.card__body{display:flex;flex-direction:column;align-items:center;gap:var(--space-2);padding:var(--card-pad)}
.card__tag{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-deep);font-weight:600}
.card__title{margin:0;font-family:var(--font-serif);font-weight:700;font-size:var(--fs-h3);line-height:1.4;color:var(--mocha)}
.card__desc{margin:0;font-size:.92rem;color:var(--ink-soft)}
/* 4단은 카드가 좁아 설명이 두 줄로 접힌다 — 좌우 여백과 글자를 조금 줄이고,
   그래도 한 줄이 안 나오는 폭(1160px 이하)부터는 2단으로 내려 글자 크기를 지킨다 */
.cards--4 .card__body{padding-inline:clamp(14px,1.4vw,18px)}
.cards--4 .card__desc{font-size:.86rem}
@media(max-width:1160px){.cards--4{grid-template-columns:repeat(2,minmax(0,1fr));max-width:680px}}
/* VIEW MORE — 둥근 테두리 버튼. 카드 전체가 링크라 카드 hover 에 반응한다 */
.card__go{margin-top:var(--space-3);display:inline-flex;align-items:center;justify-content:center;min-height:38px;padding:0 22px;border:1px solid var(--line);border-radius:var(--radius-pill);font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-deep);font-weight:700;transition:background var(--dur-1) var(--ease),border-color var(--dur-1) var(--ease),color var(--dur-1) var(--ease)}
.card:hover .card__go{background:var(--accent-deep);border-color:var(--accent-deep);color:var(--ivory-pure)}
@media(max-width:980px){.cards,.cards--4{grid-template-columns:repeat(2,minmax(0,1fr));max-width:680px}}
@media(max-width:560px){.cards,.cards--2,.cards--4{grid-template-columns:minmax(0,1fr);max-width:400px}}

/* ---------- 좌측 소개 + 우측 가로 슬라이드 ---------- */
/* --promo-n = 한 화면에 보일 슬라이드 수. 카드 폭을 이 값에서 거꾸로 계산해
   보이는 칸을 정확히 채우므로 오른쪽에 잘린 장이나 남는 여백이 생기지 않는다 */
.promo{--promo-gap:clamp(14px,2.4vw,36px);--promo-n:3;display:grid;grid-template-columns:minmax(0,28.2%) minmax(0,1fr);gap:clamp(24px,3vw,50px);width:100%;max-width:var(--container);margin-inline:auto;align-items:start}
/* 눈성형 ALSO 섹션 — 왼쪽 글 칸이 좁아 리드가 3줄로 접혔다. 2줄에 맞춰 조금 넓힌다.
   index.html 의 Seorae Space 는 기존 28.2% 그대로 둔다. */
.promo--wideside{grid-template-columns:minmax(0,32%) minmax(0,1fr)}
/* 이 섹션만 1200px 상한을 풀어 화면 폭을 다 쓴다 — 양옆에 남던 빈 띠를 없앤다.
   좌우로는 다른 섹션과 같은 --gutter 만 남으므로 머리글·본문이 화면 끝에 붙지 않는다.
   :has() 를 모르는 옛 브라우저는 기존(1200px 가운데 정렬)으로 남는다 */
.sec:has(.promo--wideside) .sec__inner{max-width:none}
.promo--wideside{max-width:none}
.promo__side{display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-4);padding-top:clamp(4px,1vw,14px)}
/* main 전역의 가운데 정렬(center floor)을 이 블록에서만 왼쪽으로 되돌린다 */
.promo__side :where(p,h2,a){text-align:left}
.promo__side .lead{max-width:none}
/* 갤러리형 — 사진 옆 설명 칸은 사진 높이에 맞춰 가운데로 */
.promo--gal{align-items:center}
.promo__side--gal{gap:clamp(14px,2vw,26px);padding-top:0}

/* 기본 컨테이너(1200)보다는 넓게, 그러나 좌우 여백은 남기는 섹션.
   제목은 넓어진 폭에 맞춰 기본 h2보다 한 단계 작게 잡아 균형을 맞춘다. */
.sec--wide .sec__inner{max-width:1440px}
.sec--wide .sec__head{max-width:none}
.sec--wide .sec__head .title{font-size:clamp(1.7rem,1.2rem + 1.7vw,2.45rem)}
.sec--wide .sec__head .lead{max-width:none}
.sec--wide .promo{max-width:none}
/* 슬라이드 영역 — 넘치는 부분을 잘라낸다.
   카드 폭을 이 칸 폭(100cqw)에서 계산하려고 컨테이너로 삼는다 */
.promo__view{overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scrollbar-width:none;-ms-overflow-style:none;scroll-behavior:smooth;container-type:inline-size}
.promo__view::-webkit-scrollbar{display:none}
.promo__track{display:flex;gap:var(--promo-gap);width:max-content}
/* 폭 = (칸 폭 - 사이 간격 전부) / 장수 → n 장이 좌우 여백 없이 딱 맞는다.
   앞줄 clamp() 는 cqw 를 모르는 옛 브라우저용 대비값(예전 동작) */
.promo__slide{flex:0 0 auto;width:clamp(216px,24vw,330px);width:calc((100cqw - (var(--promo-n) - 1) * var(--promo-gap)) / var(--promo-n));scroll-snap-align:start;display:flex;flex-direction:column}
.promo__photo{width:100%;aspect-ratio:1;border-radius:clamp(16px,2vw,28px);overflow:hidden;background:var(--ivory-warm)}
.promo__photo img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.promo__slide:hover .promo__photo img{transform:scale(1.05)}
.promo__info{padding-top:clamp(14px,1.8vw,24px);display:flex;flex-direction:column;gap:4px;text-align:right}
.promo__cap{margin:0;font-size:.85rem;line-height:1.5;color:var(--ink-soft);text-align:right}
.promo__name{margin:0;font-family:var(--font-serif);font-weight:700;font-size:clamp(1.05rem,.9rem + .5vw,1.32rem);line-height:1.4;color:var(--mocha);text-align:right}
.promo__line{display:block;margin-top:clamp(12px,1.4vw,20px);width:100%;height:1px;background:var(--sand-deep)}
/* 페이지네이션 · 좌우 버튼 */
.promo__nav{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);margin-top:clamp(18px,2.2vw,30px)}
.promo__dots{display:flex;align-items:center;gap:8px}
.promo__dots button{width:9px;height:9px;padding:0;border:0;border-radius:var(--radius-pill);background:var(--gold-line);cursor:pointer;transition:width var(--dur-1) var(--ease),background var(--dur-1) var(--ease)}
.promo__dots button.is-on{width:30px;background:var(--sand-deep)}
.promo__arrows{display:flex;gap:10px}
.promo__arrow{display:flex;align-items:center;justify-content:center;width:44px;height:44px;border:1px solid var(--line);border-radius:50%;background:transparent;color:var(--mocha);cursor:pointer;transition:background var(--dur-1) var(--ease),border-color var(--dur-1) var(--ease)}
.promo__arrow:hover{background:var(--gold-soft);border-color:var(--gold-line)}
.promo__arrow svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
@media(max-width:860px){
  .promo{grid-template-columns:minmax(0,1fr);gap:var(--space-6)}
  .promo__side{align-items:center}
  .promo__side :where(p,h2,a){text-align:center}
  .promo__more{margin-top:var(--space-2)}
}
/* 장수 조정 — 폭이 좁아질수록 한 화면에 적게 둔다. 그대로 3장이면
   1100px 아래에서 사진이 200px 밑으로 내려가 얼굴이 안 읽힌다 */
@media(max-width:1100px){
  .promo{--promo-n:2}
}
/* 폰 — 2장이면 사진이 170px 남짓이라 한 장씩 꽉 채운다 */
@media(max-width:560px){
  .promo{--promo-n:1}
}

/* ---------- 공간 갤러리 — 큰 사진 + 아래 썸네일 줄 ----------
   사진은 겹쳐 두고 진행 방향으로 밀어 넘긴다(나가는 장은 반대쪽으로).
   썸네일은 고르지 않은 것만 어둡게 덮어 지금 보는 장을 표시한다. */
.gal{display:flex;flex-direction:column;gap:clamp(6px,.7vw,9px)}
.gal__stage{position:relative;overflow:hidden;aspect-ratio:16/9;border-radius:clamp(16px,2vw,28px);background:var(--ivory-warm)}
.gal__item{position:absolute;inset:0;transform:translateX(100%);transition:transform .55s var(--ease)}
.gal__item.is-on{transform:translateX(0)}
.gal__item img{width:100%;height:100%;object-fit:cover}
.gal__arrow{position:absolute;top:50%;z-index:2;display:flex;align-items:center;justify-content:center;width:clamp(40px,3.4vw,52px);height:clamp(40px,3.4vw,52px);padding:0;transform:translateY(-50%);border:0;border-radius:50%;background:rgba(44,39,36,.4);color:var(--ivory-pure);opacity:.55;cursor:pointer;transition:opacity var(--dur-1) var(--ease),background var(--dur-1) var(--ease)}
.gal__arrow:hover{opacity:1;background:rgba(44,39,36,.72)}
.gal__arrow--prev{left:clamp(10px,1.4vw,20px)}
.gal__arrow--next{right:clamp(10px,1.4vw,20px)}
.gal__arrow svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
/* 지금 보고 있는 사진의 이름·설명 — 사진 왼쪽 칸에 놓인다 */
.gal__name{margin:0;font-family:var(--font-serif);font-weight:800;font-size:clamp(1.2rem,.95rem + .8vw,1.6rem);line-height:1.35;color:var(--mocha);text-align:left}
.gal__en{margin:0;align-self:flex-end;font-family:var(--font-serif);font-weight:400;font-style:italic;font-size:clamp(1rem,.85rem + .6vw,1.3rem);line-height:1.4;color:var(--accent-deep);text-align:left}
.gal__note{margin:0;font-size:var(--fs-body);line-height:var(--lh-body);color:var(--ink-soft);text-align:left}
.gal__thumbs{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
.gal__thumb{position:relative;overflow:hidden;aspect-ratio:16/9;padding:0;border:0;border-radius:6px;background:var(--ivory-warm);cursor:pointer}
.gal__thumb img{width:100%;height:100%;object-fit:cover}
.gal__thumb::after{content:"";position:absolute;inset:0;background:var(--espresso);opacity:.5;transition:opacity var(--dur-1) var(--ease)}
.gal__thumb:hover::after,.gal__thumb.is-on::after{opacity:0}
.gal__thumb.is-on{cursor:default}
@media(max-width:860px){
  .gal__name,.gal__note{text-align:center}
  .gal__en{align-self:center}
}
/* 좁은 화면 — 썸네일은 옆으로 밀어 볼 수 있게 */
@media(max-width:560px){
  .gal__thumbs{display:flex;overflow-x:auto;scrollbar-width:none}
  .gal__thumbs::-webkit-scrollbar{display:none}
  .gal__thumb{flex:0 0 104px}
}

/* ---------- 3분할 포인트 패널 ---------- */
.panels{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--grid-gap);width:100%;max-width:var(--container);margin-inline:auto}
.panel{display:flex;flex-direction:column;align-items:center;gap:var(--space-3)}
.panel__media{width:100%;aspect-ratio:1/1;border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--line)}
.sec--mocha .panel__media,.sec--deep .panel__media{border-color:rgba(241,209,172,.22)}
.panel__media img{width:100%;height:100%;object-fit:cover}
.panel__cap{margin:0;font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;color:var(--accent-deep);font-weight:600}
.sec--mocha .panel__cap,.sec--deep .panel__cap{color:var(--gold)}
.panel__title{margin:0;font-family:var(--font-serif);font-weight:700;font-size:1.12rem;color:var(--mocha)}
.sec--mocha .panel__title,.sec--deep .panel__title{color:var(--ivory-pure)}
.panel__desc{margin:0;font-size:.9rem;color:var(--ink-soft);line-height:1.8}
.sec--mocha .panel__desc,.sec--deep .panel__desc{color:var(--on-mocha-soft)}
@media(max-width:820px){.panels{grid-template-columns:repeat(2,minmax(0,1fr));max-width:560px}}
@media(max-width:480px){.panels{grid-template-columns:minmax(0,1fr);max-width:320px}}

/* ---------- 스텝 (STEP 01 · 02 · 03) ---------- */
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--grid-gap);width:100%;max-width:900px;margin-inline:auto;list-style:none;padding:0}
.step{display:flex;flex-direction:column;align-items:center;gap:var(--space-3);padding:clamp(22px,2.4vw,32px);background:var(--ivory-pure);border:1px solid var(--line);border-radius:18px}
.sec--mocha .step,.sec--deep .step{background:rgba(51,45,42,.55);border-color:rgba(241,209,172,.2)}
.step__no{font-size:.72rem;letter-spacing:.24em;text-transform:uppercase;color:var(--accent-deep);font-weight:700}
.sec--mocha .step__no,.sec--deep .step__no{color:var(--gold)}
.step__title{margin:0;font-family:var(--font-serif);font-weight:700;font-size:1.15rem;color:var(--mocha)}
.sec--mocha .step__title,.sec--deep .step__title{color:var(--ivory-pure)}
.step__desc{margin:0;font-size:.9rem;line-height:1.8;color:var(--ink-soft)}
.sec--mocha .step__desc,.sec--deep .step__desc{color:var(--on-mocha-soft)}
@media(max-width:760px){.steps{grid-template-columns:minmax(0,1fr);max-width:380px}}

/* ---------- 체크 리스트 ---------- */
.checks{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:var(--space-3)}
.checks li{display:inline-flex;align-items:center;gap:8px;padding:10px 20px;border-radius:var(--radius-pill);background:var(--gold-soft);border:1px solid var(--gold-line);font-size:.92rem;font-weight:600;color:var(--accent-deep)}
.sec--mocha .checks li,.sec--deep .checks li{background:rgba(241,209,172,.12);border-color:rgba(241,209,172,.32);color:var(--gold-soft)}
.checks li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--sand-deep);flex:none}
.sec--mocha .checks li::before,.sec--deep .checks li::before{background:var(--gold)}

/* ---------- 인용 밴드 ---------- */
.band{position:relative;isolation:isolate;overflow:hidden;background:var(--gold-soft);color:var(--ink);padding-block:clamp(72px,10vw,128px);padding-inline:var(--gutter);border-block:1px solid var(--gold-line)}
/* 배경 사진 — 위아래 여유(-16%)를 두고, 스크롤·마우스에 따라 JS가 transform 으로 흘린다 */
.band__bg{position:absolute;inset:-16% 0;background-size:cover;background-position:center;filter:brightness(1.08) saturate(.78);will-change:transform}
/* 글자색은 그대로 두고도 읽히도록, 글이 놓이는 가운데를 가장 진하게 덮는 크림 베일 */
.band__veil{position:absolute;inset:0;background:radial-gradient(120% 100% at 50% 50%,rgba(247,230,210,.95) 0%,rgba(247,230,210,.91) 42%,rgba(247,230,210,.74) 100%)}
.band__inner{position:relative;z-index:1;max-width:1000px;margin-inline:auto;display:flex;flex-direction:column;align-items:center;gap:var(--space-6)}
.band__script{margin:0;font-family:var(--font-serif);font-weight:400;font-style:italic;font-size:var(--fs-h3);color:var(--accent-deep)}
.band__title{margin:0;font-family:var(--font-body);font-weight:800;font-size:var(--fs-band);line-height:1.4;letter-spacing:-.01em;color:var(--mocha)}
.band__lead{max-width:none;font-size:clamp(1rem,.95rem + .32vw,1.14rem);font-weight:700;line-height:1.75}

/* 배경이미지 밴드 */
.imgband{position:relative;isolation:isolate;background:var(--espresso);color:var(--on-mocha);overflow:hidden}
.imgband__bg{position:absolute;inset:0;background-size:cover;background-position:center;opacity:.42;filter:brightness(.72)}
.imgband__scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(51,45,42,.86),rgba(44,39,36,.72) 50%,rgba(51,45,42,.92))}
.imgband__inner{position:relative;max-width:760px;margin-inline:auto;padding-block:clamp(72px,9vw,128px);padding-inline:var(--gutter);display:flex;flex-direction:column;align-items:center;gap:clamp(16px,2.2vw,26px)}
.imgband__title{margin:0;font-family:var(--font-serif);font-weight:800;font-size:clamp(1.7rem,1.2rem + 2.2vw,2.7rem);line-height:1.35;color:var(--gold-soft)}
.imgband__lead{margin:0;max-width:48ch;color:var(--on-mocha-soft);line-height:1.9}

/* 슬로건 — 사진 띠(imgband) 대신 흰 바탕에 큰따옴표로 감싼 한 문장만 둔다.
   따옴표는 글자가 아니라 장식이므로 ::before/::after 로 두어 읽히지 않게 한다.
   따옴표 위치·크기를 글자 크기(em)에 맞춰 두면 화면 폭이 바뀌어도 같은 비율로 붙어 있다. */
.slogan{background:#fff;color:var(--ink);border-block:1px solid var(--line-soft)}
/* 줄 길이를 글자 크기(em)에 묶어 두면 따옴표가 화면 폭과 상관없이 글에 붙어 있다.
   21em = 첫 줄(18.5em) + 좌우 여백(1.8em) + 여유 — 데스크톱에서 두 줄로 떨어진다.
   px 로 묶으면 글자만 커지고 줄은 그대로라 따옴표가 멀찍이 떨어진다. */
.slogan__text{
  position:relative;margin:0;padding-inline:.9em;max-width:min(21em,100%);
  font-family:var(--font-serif);font-weight:800;font-size:var(--fs-band);
  line-height:1.62;letter-spacing:-.01em;color:var(--mocha);
  text-align:center;word-break:keep-all}
.slogan__text em{font-style:normal;color:var(--accent-deep)}
.slogan__text::before,.slogan__text::after{
  position:absolute;font-family:var(--font-serif);font-weight:400;
  font-size:2.6em;line-height:1;color:var(--sand);opacity:.5}
.slogan__text::before{content:"\201C";top:-.34em;left:-.16em}
.slogan__text::after{content:"\201D";right:-.16em;bottom:-.5em}
@media(max-width:560px){
  .slogan__text{padding-inline:.55em}
  .slogan__text::before,.slogan__text::after{font-size:2em}
}

/* ==========================================================================
   Why(이물질 제거) — 왼쪽 머리말·이미지 + 오른쪽 확인 항목 카드
   참고 시안과 같은 구성이다: 작은 명조 영문 → 큰 볼드 제목(줄 단위로 올라옴)
   → 설명 → 이미지, 오른쪽에는 흰 카드가 오른쪽에서 미끄러져 들어온다.
   ========================================================================== */
.sec__inner.rec__inner{
  display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);
  gap:clamp(28px,4.4vw,80px);align-items:start;width:100%}
/* main 안의 글은 기본이 가운데 정렬(맨 위 공통 규칙)이라 이 구역만 왼쪽으로 되돌린다 */
.rec__side{display:flex;flex-direction:column;align-items:flex-start;gap:clamp(14px,1.8vw,24px)}
.rec__side :where(p,h2,span),.rec__list :where(p,span){text-align:left}
.rec__en{margin:0;font-family:var(--font-serif);font-weight:400;
  font-size:clamp(1.3rem,1rem + 1.3vw,2rem);letter-spacing:.01em;color:var(--sand-deep)}
/* 제목만 본문 서체(Pretendard) 볼드 — 명조 영문과 대비를 준다(.band__title 과 같은 역할) */
.rec__title{margin:0;font-family:var(--font-body);font-weight:800;font-size:var(--fs-band);
  line-height:1.42;letter-spacing:-.01em;color:var(--mocha)}
.rec__ln{display:block}
.rec__ln > span{display:block}
.rec__lead{margin:0;font-size:clamp(.94rem,.9rem + .2vw,1.02rem);line-height:1.9;
  color:var(--ink-soft);word-break:keep-all}
.rec__lead b{color:var(--mocha);font-weight:700}
.rec__body{display:flex;flex-direction:column;gap:clamp(20px,2.6vw,34px)}
.rec__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;
  gap:clamp(12px,1.4vw,18px)}
.rec__list > li{display:flex;align-items:center;gap:clamp(14px,1.6vw,24px);
  padding:clamp(16px,1.8vw,24px) clamp(18px,2.2vw,30px);
  background:#fff;border-radius:var(--radius);box-shadow:var(--shadow-sm)}
.rec__no{flex:none;display:inline-flex;align-items:center;justify-content:center;
  padding:7px 14px;border-radius:var(--radius-sm);background:var(--accent-deep);
  color:var(--ivory-pure);font-family:var(--font-serif);font-weight:700;
  font-size:.82rem;letter-spacing:.08em;white-space:nowrap}
.rec__txt{margin:0;font-weight:700;font-size:clamp(.98rem,.92rem + .3vw,1.12rem);
  line-height:1.6;color:var(--mocha);word-break:keep-all}
.rec__chips{justify-content:flex-start}

/* ---------- 스크롤 인 ----------
   제목은 줄 단위 마스크 리빌(바깥 줄상자는 가만히, 안쪽 글만 아래에서 올라온다),
   오른쪽 카드는 오른쪽에서 미끄러져 들어온다. 카드 사이 시차(--d)는 스크립트가 넣는
   --rv-d 에 더해 계산한다 — 한 화면에 같이 들어와도 순서대로 뜨게 하려는 것이다. */
.js .rec__title > .rec__ln{opacity:1;transform:none;overflow:hidden}
.js .rec__ln > span{transform:translateY(105%);
  transition:transform .95s var(--ease) calc(var(--rv-d,0s) + var(--d,0s))}
.js .rec__ln.is-in > span{transform:none}
.js .rec__ln:nth-child(2){--d:.12s}

.js .rec__list > li{transition:opacity .75s var(--ease) calc(var(--rv-d,0s) + var(--d,0s)),
  transform .95s var(--ease) calc(var(--rv-d,0s) + var(--d,0s))}
.js .rec__list > li:not(.is-in){opacity:0;transform:translateX(72px)}
.js .rec__list > li:nth-child(2){--d:.12s}
.js .rec__list > li:nth-child(3){--d:.24s}

@media(max-width:900px){
  .sec__inner.rec__inner{grid-template-columns:minmax(0,1fr);gap:clamp(26px,5vw,40px)}
  .rec__side{align-items:center}
  .rec__side :where(p,h2,span){text-align:center}
  .rec__chips{justify-content:center}
  /* 한 열로 쌓이면 가로 이동 대신 위아래 이동이 자연스럽다 */
  .js .rec__list > li:not(.is-in){transform:translateY(46px)}
}

/* ==========================================================================
   빠른 상담신청 — 위쪽 색면(제목 + 흐르는 로고) 아래로 입력 카드가 걸쳐 올라온다
   ========================================================================== */
/* scroll-margin-top — 헤더가 sticky 라 #quickConsult 로 뛰면 제목이 그 밑에 깔린다.
   유틸 바의 '빠른 상담신청' 이 이 자리로 내려오므로 헤더 높이만큼 비워 둔다.
   헤더 높이 = .rb-util 38 + .rb-bar 104 + 테두리 1 = 143px, 1080px 아래는 74 로 줄어 113px.
   .rb-bar 의 min-height 를 고치면 이 값도 같이 고쳐야 한다. */
.qc{position:relative;background:var(--ivory-pure);color:var(--ink);scroll-margin-top:150px}
@media(max-width:1080px){.qc{scroll-margin-top:120px}}
.qc__band{background:linear-gradient(180deg,var(--mocha) 0%,var(--espresso) 100%);color:var(--on-mocha);padding-block:var(--section-pad-block) clamp(96px,12vw,170px);overflow:hidden}
.qc__head{padding-inline:var(--gutter)}
.qc__head .eyebrow{color:var(--gold)}
.qc__head .title{color:var(--gold-soft)}
.qc__head .lead{color:var(--on-mocha-soft)}

/* 로고 흐름 — 오른쪽에서 왼쪽으로 무한 반복, 양 끝은 배경으로 서서히 사라진다 */
.mq{margin-top:clamp(28px,3.6vw,48px);overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.mq__track{display:flex;width:max-content;animation:mq-run 38s linear infinite}
.mq:hover .mq__track{animation-play-state:paused}
.mq__set{display:flex;align-items:center;flex:none}
.mq__ko,.mq__en{white-space:nowrap}
.mq__ko{font-family:var(--font-serif);font-weight:800;font-size:clamp(1.15rem,.85rem + 1.1vw,1.85rem);letter-spacing:.06em;color:var(--gold-soft)}
.mq__en{font-size:clamp(.72rem,.62rem + .34vw,.92rem);font-weight:600;letter-spacing:.34em;text-transform:uppercase;color:var(--sand)}
.mq__dot{flex:none;width:5px;height:5px;margin-inline:clamp(16px,2.2vw,34px);border-radius:50%;background:var(--sand);opacity:.65}
@keyframes mq-run{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
@media(prefers-reduced-motion:reduce){.mq__track{animation:none}}

/* 입력 카드 — 색면 위로 끌어올려 두 영역에 걸치게 한다 */
.qc__body{padding-inline:var(--gutter);padding-bottom:var(--section-pad-block)}
.qc__inner{max-width:1440px;margin-top:clamp(-140px,-9.5vw,-72px)}
.qform{position:relative;width:100%;margin-inline:auto;padding:clamp(22px,3vw,44px);border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--ivory-pure);box-shadow:0 38px 72px -34px rgba(44,39,36,.62),0 14px 30px -20px rgba(44,39,36,.4);text-align:left;display:flex;flex-direction:column;gap:clamp(14px,1.8vw,22px)}
/* 네 칸을 한 줄에 — 문의 내용만 넓게 */
.qform__grid{display:grid;grid-template-columns:1fr 1fr 1fr 1.6fr;gap:clamp(12px,1.6vw,20px)}
.qfield{display:flex;flex-direction:column;gap:8px;text-align:left}
.qfield__lb{display:flex;align-items:center;gap:6px;font-size:.84rem;font-weight:700;color:var(--mocha)}
.qfield__lb i{font-style:normal;color:var(--accent-deep)}
.qfield__lb em{font-style:normal;font-weight:500;font-size:.76rem;color:var(--ink-mute)}
.qfield__in{width:100%;min-height:52px;padding:12px 16px;border:1px solid var(--line);border-radius:var(--radius-sm);background:#fff;color:var(--ink);font-family:inherit;font-size:.95rem;line-height:1.6;transition:border-color var(--dur-1) var(--ease),box-shadow var(--dur-1) var(--ease)}
.qfield__in::placeholder{color:#a99c90}
.qfield__in:focus{border-color:var(--accent-deep);box-shadow:0 0 0 3px rgba(107,82,56,.14);outline:none}
.qfield__sel{appearance:none;-webkit-appearance:none;padding-right:42px;cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b5238' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;background-size:18px}
/* 다른 칸과 같은 높이에서 시작하되, 길게 적을 때는 늘려 쓸 수 있게 둔다 */
.qfield__ta{height:52px;resize:vertical}
.qform__foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:clamp(12px,2vw,20px)}
.qagree{display:flex;align-items:center;gap:10px;font-size:.88rem;color:var(--ink-soft);cursor:pointer}
.qagree input{flex:none;width:18px;height:18px;accent-color:var(--accent-deep)}
.qagree i{font-style:normal;color:var(--accent-deep);margin-left:4px}
.qform__submit{min-width:220px}
.qform__priv{font-size:.78rem;color:var(--ink-mute);text-align:left}
.qform__msg{font-size:.9rem;font-weight:600;line-height:1.7;text-align:left;color:var(--accent-deep)}
.qform__msg:empty{display:none}
.qform__msg.is-err{color:#b4523c}
/* 확인이 필요한 칸 표시 */
.qfield.is-err .qfield__in{border-color:#b4523c;box-shadow:0 0 0 3px rgba(180,82,60,.12)}
.qagree.is-err{color:#b4523c}
@media(max-width:900px){
  .qform__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:600px){
  .qform__grid{grid-template-columns:1fr}
  .qform__foot{flex-direction:column;align-items:stretch}
  .qform__submit{width:100%;min-width:0}
}

/* ---------- 정보 테이블 (진료시간 등) ---------- */
.info{width:100%;max-width:640px;margin-inline:auto;border-top:1px solid var(--line);list-style:none;padding:0}
.info li{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);padding:clamp(16px,2vw,22px) clamp(8px,1.6vw,20px);border-bottom:1px solid var(--line);text-align:left}
.info dt,.info .info__k{font-family:var(--font-serif);font-weight:700;color:var(--mocha);flex:0 0 auto;min-width:9ch}
.info dd,.info .info__v{margin:0;color:var(--ink-soft);text-align:right;flex:1 1 auto}
.info .info__v b{color:var(--accent-deep);font-weight:700}
/* 어두운 배경 섹션에서는 항목명/값을 밝은 색으로 — 기본값(모카/잉크)은 대비가 나오지 않음 */
.sec--mocha .info .info__k,.sec--deep .info .info__k,.sec--mocha .info dt,.sec--deep .info dt{color:var(--ivory-pure)}
.sec--mocha .info .info__v,.sec--deep .info .info__v,.sec--mocha .info dd,.sec--deep .info dd{color:var(--on-mocha-soft)}
.sec--mocha .info .info__v b,.sec--deep .info .info__v b{color:var(--gold)}
.sec--mocha .info,.sec--deep .info{border-top-color:rgba(241,209,172,.22)}
.sec--mocha .info li,.sec--deep .info li{border-bottom-color:rgba(241,209,172,.22)}

/* ---------- 약력 리스트 ---------- */
.cv{width:100%;max-width:720px;margin-inline:auto;list-style:none;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-2) var(--space-5)}
.cv li{position:relative;padding-left:16px;font-size:.94rem;line-height:1.9;color:var(--ink-soft);text-align:left}
.cv li::before{content:"";position:absolute;left:0;top:.85em;width:5px;height:5px;border-radius:50%;background:var(--sand)}
@media(max-width:640px){.cv{grid-template-columns:minmax(0,1fr)}}

/* ---------- FAQ 아코디언 ----------
   질문을 눌러 답을 펴는 목록. <details>/<summary> 라 스크립트 없이 동작하고,
   JS가 막혀도 열고 닫을 수 있다. main 전역의 가운데 정렬을 이 블록에서만 왼쪽으로 되돌린다 */
.faq{width:100%;max-width:1000px;margin-inline:auto;text-align:left}
.faq__head{margin-bottom:clamp(22px,2.8vw,38px)}
/* 참고 시안과 같은 짧은 선 + 이탤릭 라벨 */
.faq__eyebrow{display:flex;align-items:center;gap:12px;margin:0 0 var(--space-4);font-family:var(--font-serif);font-style:italic;font-size:.86rem;letter-spacing:.22em;color:var(--sand-deep);text-align:left}
.faq__eyebrow::before{content:"";flex:none;width:38px;height:1px;background:var(--sand-deep)}
.faq__title{margin:0;font-family:var(--font-serif);font-weight:700;font-size:clamp(1.55rem,1.05rem + 1.9vw,2.5rem);line-height:1.32;color:var(--mocha);text-align:left;word-break:keep-all}
.faq__list{border-top:1px solid var(--line);text-align:left}
.faq__item{border-bottom:1px solid var(--line)}
/* summary 기본 삼각형 마커를 지우고 오른쪽 +/− 로 대신한다 */
.faq__q{display:flex;align-items:flex-start;gap:14px;padding:clamp(16px,1.8vw,22px) 2px;cursor:pointer;list-style:none;text-align:left}
.faq__q::-webkit-details-marker{display:none}
.faq__q b{flex:none;font-family:var(--font-serif);font-weight:400;font-size:1.02rem;line-height:1.62;color:var(--sand-deep)}
.faq__q span{flex:1;min-width:0;font-weight:700;font-size:clamp(.95rem,.9rem + .2vw,1.06rem);line-height:1.62;color:var(--ink);text-align:left;word-break:keep-all}
.faq__q::after{content:"+";flex:none;width:1em;font-size:1.24rem;font-weight:300;line-height:1.35;color:var(--sand-deep);text-align:center}
.faq__item[open] .faq__q::after{content:"\2212"}
.faq__q:hover span{color:var(--accent-deep)}
.faq__a{margin:0;padding:0 30px clamp(18px,2vw,26px) 30px;font-size:clamp(.88rem,.85rem + .16vw,.96rem);line-height:1.85;color:var(--accent-deep);text-align:left;word-break:keep-all}
.faq .note{margin-top:clamp(20px,2.4vw,32px);max-width:none;text-align:left}
@media(max-width:560px){
  .faq__q{gap:10px}
  .faq__a{padding-inline:26px 4px}
}

/* ---------- FAQ — 줄기세포 페이지와 같은 붙박이 머리말 + 번호 아코디언 ----------
   stemcell.css 의 .sb-faq 를 페이지 구분 없이 쓸 수 있게 옮겨 왔다(값은 그대로).
   줄기세포 본 페이지는 stemcell.css 의 body.p-stem 규칙이 더 구체적이라 계속
   자기 것을 쓴다 — 값이 같으므로 보이는 결과는 같다.
   왼쪽 머리말은 목록 옆에 붙어 따라오고(sticky), 1000px 아래에서 한 줄로 접힌다.
   main 전역 가운데 정렬(v14-center-floor)은 이 블록 안에서만 왼쪽으로 되돌린다. */
.sb-faq{--sbw:1280px;--sbtop:clamp(112px,17vh,178px);background:var(--ivory-pure);
  padding:clamp(74px,9vw,136px) var(--gutter);scroll-margin-top:clamp(84px,13vh,150px)}
.sb-faq :is(div,h2,p,summary,details,span,b,em,i,a){text-align:left}
.sb-faq__inner{max-width:var(--sbw);margin-inline:auto;display:grid;
  grid-template-columns:minmax(0,.44fr) minmax(0,1fr);gap:clamp(28px,5vw,90px);align-items:start}
.sb-faq__side{position:sticky;top:var(--sbtop);display:flex;flex-direction:column;
  align-items:flex-start;gap:clamp(11px,1.3vw,17px)}
.sb-faq .sb-head__eye{margin:0;font-size:.68rem;letter-spacing:.4em;text-transform:uppercase;
  font-weight:700;color:var(--accent-deep)}
.sb-faq__t{margin:0;font-family:var(--font-serif);font-weight:800;
  font-size:clamp(1.55rem,1.05rem + 1.9vw,2.4rem);line-height:1.32;letter-spacing:-.018em;color:var(--mocha)}
.sb-faq__lead{margin:clamp(4px,.8vw,10px) 0 0;font-size:clamp(.88rem,.85rem + .16vw,.95rem);
  line-height:1.9;color:var(--ink-soft)}
.sb-faq__note{margin:clamp(10px,1.6vw,22px) 0 0;padding-top:clamp(14px,1.8vw,24px);
  border-top:1px solid var(--line-soft);font-size:.75rem;line-height:1.9;color:var(--ink-mute)}
.sb-q{border-bottom:1px solid var(--line)}
.sb-q:first-of-type{border-top:1px solid var(--line)}
.sb-q__s{display:flex;align-items:flex-start;gap:clamp(12px,1.4vw,20px);
  padding:clamp(17px,1.9vw,25px) 2px;cursor:pointer;list-style:none;
  transition:padding-left .4s var(--ease)}
.sb-q__s::-webkit-details-marker{display:none}
.sb-q__s:hover{padding-left:6px}
.sb-q__s i{flex:none;padding-top:.4em;font-family:var(--font-serif);font-style:normal;
  font-weight:700;font-size:.74rem;letter-spacing:.1em;color:var(--sand)}
.sb-q__s span{flex:1;min-width:0;font-weight:600;
  font-size:clamp(.96rem,.9rem + .24vw,1.1rem);line-height:1.62;color:var(--ink);word-break:keep-all}
.sb-q__s em{position:relative;flex:none;width:14px;height:14px;margin-top:.5em}
.sb-q__s em::before,.sb-q__s em::after{content:"";position:absolute;
  background:var(--sand-deep);transition:transform .45s var(--ease),opacity .45s var(--ease)}
.sb-q__s em::before{left:0;top:6.5px;width:14px;height:1px}
.sb-q__s em::after{left:6.5px;top:0;width:1px;height:14px}
.sb-q[open] .sb-q__s em::after{transform:scaleY(0);opacity:0}
.sb-q[open] .sb-q__s span,.sb-q[open] .sb-q__s i{color:var(--accent-deep)}
.sb-q__a{margin:0;padding:0 0 clamp(20px,2.2vw,30px) calc(clamp(12px,1.4vw,20px) + 2.4em);
  font-size:clamp(.9rem,.86rem + .18vw,.98rem);line-height:2.02;color:var(--ink-mute);word-break:keep-all}
.sb-q__a a{color:var(--accent-deep);text-decoration:underline;text-underline-offset:3px}
.sb-q[open] .sb-q__a{animation:sb-open .5s var(--ease) both}
@keyframes sb-open{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
/* 스크롤 인 — 줄기세포와 같이 짧고 곧게(30px). .is-in 은 아래 공통 스크립트가 붙인다 */
.js .sb-faq__side > *,.js .sb-faq__list > *{opacity:0;transform:translateY(30px);
  transition:opacity .8s var(--ease) var(--rv-d,0s),transform .9s var(--ease) var(--rv-d,0s)}
.js .sb-faq__side > .is-in,.js .sb-faq__list > .is-in{opacity:1;transform:none}
@media(max-width:1000px){
  .sb-faq__inner{grid-template-columns:minmax(0,1fr);gap:clamp(24px,4vw,40px)}
  .sb-faq__side{position:static;top:auto}
}

/* ---------- CTA ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding:0 clamp(28px,3.4vw,44px);border-radius:var(--radius-pill);background:var(--mocha);color:var(--ivory-pure);font-weight:700;font-size:.98rem;letter-spacing:.02em;transition:background var(--dur-1) var(--ease)}
.btn:hover{background:var(--accent-deep)}
.btn--gold{background:var(--gold);color:var(--mocha-deep)}
.btn--gold:hover{background:var(--gold-soft)}
.btn--ghost{background:transparent;color:var(--gold);border:1px solid rgba(241,209,172,.5)}
.btn--ghost:hover{background:rgba(241,209,172,.12)}
/* 밝은 바탕(아이보리·화이트)용 외곽선 버튼(2026-08-20). --ghost 는 금빛이라
   어두운 바탕 전용이고, 크림 바탕에 얹으면 글자가 배경에 묻힌다. */
.btn--line{background:transparent;color:var(--accent-deep);border:1px solid var(--gold-line)}
.btn--line:hover{background:var(--gold-soft);color:var(--accent-deep)}
.btnrow{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--space-3)}

/* ---------- 하단 퀵 카드 ---------- */
.quick{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(18px,2.6vw,30px);width:100%;max-width:1000px;margin-inline:auto;justify-items:center}
.qcard{position:relative;width:100%;max-width:460px;aspect-ratio:16/10;border-radius:18px;overflow:hidden;display:flex;align-items:flex-end;justify-content:flex-start;box-shadow:0 20px 40px -28px rgba(44,39,36,.4);background-color:var(--mocha-deep)}
.qcard img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.qcard__scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(44,39,36,.34),rgba(44,39,36,.68))}
/* 글은 카드 왼쪽 아래 모서리로 */
.qcard__body{position:relative;display:flex;flex-direction:column;align-items:flex-start;text-align:left;gap:clamp(10px,1.4vw,16px);padding:clamp(20px,3vw,32px)}
.qcard__title{margin:0;font-family:var(--font-serif);font-weight:700;font-size:clamp(1.15rem,.95rem + .9vw,1.5rem);line-height:1.4;color:var(--ivory-pure);text-shadow:0 2px 10px rgba(0,0,0,.45)}
.qcard__go{display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px;border-radius:50%;background:var(--gold);color:var(--mocha-deep);font-weight:700;font-size:.82rem;letter-spacing:.04em}
@media(max-width:640px){.quick{grid-template-columns:minmax(0,1fr)}}

/* ---------- 스크롤 인 모션 ---------- */
/* 섹션이 화면에 들어오면 콘텐츠가 80px 아래에서 위로 살짝 튀어오르며 떠오른다.
   튀는 느낌은 transform 에만 준다 — opacity 는 1을 넘길 수 없어 오버슈트가 의미 없고,
   끝에서 뚝 끊겨 보이기 때문에 부드러운 곡선으로 따로 돌린다.
   아래 목록은 "묶음" 요소들이고, 그 직계 자식(묶음 자신은 제외)이 애니메이션 단위가 된다.
   순서 딜레이(--rv-d)와 .is-in 은 index.html / build.py 하단 스크립트가 넣는다.
   화면 밖으로 나가면 스크립트가 .is-in 을 떼므로, 다시 들어올 때 애니메이션이 재생된다.
   JS가 동작할 때(.js)만 숨기므로 JS 실패·차단 시에도 콘텐츠는 항상 보인다.
   prefers-reduced-motion 이면 스크립트가 즉시 .is-in 을 붙여 애니메이션 없이 표시한다. */
.js :where(.sec__head,.sec__inner,.split,.split__text,.rows,.cards,.svc,.iconbox,.panels,.steps,.band__inner,.imgband__inner,.hero__inner,.ehero__text,.vhero__head,.vhero__inner,.rec__side,.rec__body,.rec__title,.rec__list) > :not(.sec__head,.sec__inner,.split,.split__text,.rows,.cards,.svc,.iconbox,.panels,.steps,.band__inner,.imgband__inner,.hero__inner,.ehero__text,.vhero__head,.vhero__inner,.rec__side,.rec__body,.rec__title,.rec__list){opacity:0;transform:translateY(80px);transition:opacity .8s var(--ease) var(--rv-d,0s),transform 1.1s cubic-bezier(.34,1.56,.64,1) var(--rv-d,0s)}
.js .is-in{opacity:1;transform:none}

/* ---------- 눈성형 페이지 스크롤 모션 ----------
   블록 하나가 통째로 나타나던 것을 항목 단위로 나눈다: 번호·제목·설명이 차례로 뜨고,
   이어서 방법(.methods)·카드(.cardrow)·박스(.tboxes)가 하나씩 떠오른다.
   순서 딜레이(--rv-d)와 .is-in 은 다른 페이지와 같은 스크립트가 넣어 준다.
   블록(.feat) 자체의 모션은 꺼서 안쪽 항목과 겹쳐 움직이지 않게 한다.
   안쪽 항목은 바깥 블록보다 짧게(28px) · 튕김 없는 곡선으로 움직여 잔잔하게 이어진다. */
/* p-feat 는 p-eye 와 같은 규칙을 쓰는 공용 이름이다.
   눈성형 페이지(p-eye)가 기준 시안이라 그 클래스는 그대로 두고,
   같은 컨셉으로 만든 다른 페이지는 p-feat 를 붙인다. */
.js body.p-eye .sec__inner > .feat,.js body.p-feat .sec__inner > .feat{opacity:1;transform:none}
.js body.p-eye :where(.feat__head,.methods,.cardrow,.tboxes) > *,.js body.p-feat :where(.feat__head,.methods,.cardrow,.tboxes) > *{opacity:0;transform:translateY(28px);transition:opacity .7s var(--ease) var(--rv-d,0s),transform .9s var(--ease) var(--rv-d,0s)}
.js body.p-eye :where(.feat__head,.methods,.cardrow,.tboxes) > .is-in,.js body.p-feat :where(.feat__head,.methods,.cardrow,.tboxes) > .is-in{opacity:1;transform:none}

/* ---------- 플로팅 상담 버튼 ---------- */
.fab{position:fixed;right:clamp(14px,2.5vw,28px);bottom:clamp(14px,2.5vw,28px);z-index:900;display:flex;flex-direction:column;gap:10px}
/* 네 개 버튼 모두 카톡 버튼과 같은 골드 톤 · 라벨 없이 아이콘만 */
.fab a{display:flex;align-items:center;justify-content:center;width:60px;height:60px;border-radius:50%;background:var(--gold);color:var(--mocha-deep);box-shadow:0 12px 28px -12px rgba(44,39,36,.6);transition:background var(--dur-1) var(--ease),transform var(--dur-1) var(--ease)}
.fab a:hover{background:var(--gold-soft);transform:translateY(-2px)}
.fab svg{width:26px;height:26px;fill:currentColor}
@media(max-width:560px){.fab a{width:52px;height:52px}.fab svg{width:23px;height:23px}}

/* ==========================================================================
   추가 컴포넌트 — 영상 히어로 / 아이콘 박스
   ========================================================================== */

/* ---------- 영상 + 이미지 배경 히어로 ---------- */
.vhero{position:relative;isolation:isolate;min-height:min(88vh,780px);display:flex;align-items:center;justify-content:center;background:var(--espresso);color:var(--on-mocha);overflow:hidden}
.vhero__stage{position:absolute;inset:0;z-index:0}
.vhero__slide{position:absolute;inset:0;opacity:0;transition:opacity 1.4s var(--ease)}
.vhero__slide.is-on{opacity:1}
.vhero__slide--img{background-size:cover;background-position:center;filter:grayscale(.14) brightness(.86) sepia(.05)}
/* 유튜브 배경: 화면을 꽉 채우도록 16:9 비율을 넘겨 잘라냄 */
.vhero__slide--video > .vhero__slide--img{position:absolute;inset:0}
/* 자체 배경 영상(mp4) — 슬라이드를 꽉 채우고 포스터가 먼저 보인다 */
.vhero__mp4{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border:0;pointer-events:none;filter:brightness(.88) saturate(.94)}
.vhero__video{position:absolute;top:50%;left:50%;width:100vw;height:56.25vw;min-height:100%;min-width:177.78vh;transform:translate(-50%,-50%);border:0;pointer-events:none;opacity:0;transition:opacity 1.2s var(--ease)}
.vhero__video.is-ready{opacity:1}
.vhero__slide--video .vhero__video{filter:brightness(.88) saturate(.94)}
/* 유튜브 플레이어 UI 차단막 — 외부 도메인 iframe이라 내부 UI를 숨길 수 없으므로,
   ① 영상 위를 덮어 클릭·터치가 플레이어에 닿지 않게 하고
   ② 플레이어가 한가운데 띄우는 재생·이전·다음 버튼 자리를 같은 색으로 덮어 가린다.
   영상이 실제로 표시될 때만(.is-ready) 켜서 배너 이미지에는 영향을 주지 않는다. */
.vhero__guard{position:absolute;inset:0;z-index:1}
.vhero__guard::after{content:"";position:absolute;left:50%;top:50%;width:40%;height:32%;transform:translate(-50%,-50%);opacity:0;transition:opacity 1.2s var(--ease);background:radial-gradient(closest-side,rgba(26,22,20,1) 0%,rgba(26,22,20,.99) 46%,rgba(26,22,20,.72) 72%,rgba(26,22,20,0) 100%)}
.vhero__video.is-ready ~ .vhero__guard::after{opacity:1}
/* 위아래 그라데이션 — 텍스트가 놓이는 상단을 가장 진하게,
   이미지 카드가 놓이는 중하단은 열어서 배경 영상이 보이도록 */
.vhero__scrim{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(24,20,18,.90) 0%,rgba(26,22,20,.86) 22%,rgba(28,24,22,.78) 38%,rgba(30,26,23,.52) 60%,rgba(26,22,20,.62) 82%,rgba(22,19,17,.86) 100%)}
/* 글과 사진 사이를 넉넉히 띄워 그 틈으로 배경 영상이 보이게 하고, 아래 여백을 조금 줄여
   사진 3장을 점 쪽으로 내린다. 모바일 아래 여백(84px)은 점과의 간격이라 건드리지 않는다. */
.vhero__inner{position:relative;z-index:2;max-width:var(--container);margin-inline:auto;padding-block:clamp(72px,9vw,116px) clamp(84px,8.6vw,112px);padding-inline:var(--gutter);display:flex;flex-direction:column;align-items:center;gap:clamp(44px,6.4vw,96px)}
.vhero__head{display:flex;flex-direction:column;align-items:center;gap:clamp(18px,2.4vw,28px);max-width:820px;margin-inline:auto}
.vhero__eyebrow{display:flex;align-items:center;justify-content:center;gap:14px;margin:0;font-size:.78rem;letter-spacing:.34em;text-transform:uppercase;color:var(--gold)}
.vhero__eyebrow::before,.vhero__eyebrow::after{content:"";width:clamp(26px,4vw,52px);height:1px;background:rgba(241,209,172,.55)}
.vhero__title{margin:0;font-family:var(--font-serif);font-weight:800;font-size:var(--fs-display);line-height:var(--lh-display);letter-spacing:var(--ls-display);color:var(--ivory-pure);text-shadow:0 2px 24px rgba(20,16,14,.45)}
.vhero__title .em{font-style:normal;color:var(--gold)}
.vhero__lead{margin:0;max-width:50ch;font-size:var(--fs-h3);font-weight:500;line-height:1.6;color:var(--on-mocha-soft);text-shadow:0 1px 14px rgba(20,16,14,.4)}
.vhero__lead b{color:var(--gold-soft);font-weight:700}
.vhero__dots{position:absolute;left:50%;bottom:clamp(20px,3vw,34px);transform:translateX(-50%);z-index:3;display:flex;gap:16px}
.vhero__dots button{position:relative;width:9px;height:9px;padding:0;border:0;border-radius:50%;background:rgba(246,240,230,.42);cursor:pointer;transition:background var(--dur-1) var(--ease),transform var(--dur-1) var(--ease)}
/* 점은 9px 그대로 두고 누를 수 있는 범위만 24px 로 넓힌다 (2026-08-31).
   가짜 요소라 배치에 영향이 없고, 위의 gap 을 10→16px 로 벌린 것은
   24px 영역끼리 겹쳐 옆 점이 눌리는 것을 막기 위해서다(중심 간 25px). */
.vhero__dots button::before{content:"";position:absolute;inset:-7.5px;border-radius:50%}
.vhero__dots button.is-on{background:var(--gold);transform:scale(1.25)}
@media(max-width:760px){.vhero{min-height:min(78vh,620px)}}
@media(prefers-reduced-motion:reduce){.vhero__slide{transition:none}}

/* ---------- 아이콘 박스 (MERIT 등) ---------- */
.iconbox{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--grid-gap);width:100%;max-width:var(--container);margin-inline:auto}
/* 박스와 섹션 배경이 같은 아이보리라 테두리·그림자를 진하게 줘야 카드가 떠 보인다 */
.iconbox__item{position:relative;display:flex;flex-direction:column;align-items:center;gap:var(--space-3);padding:clamp(28px,3.2vw,40px) clamp(20px,2.4vw,28px);background:var(--ivory-pure);border:1px solid var(--sand);border-radius:var(--radius-lg);box-shadow:0 20px 40px -20px rgba(44,39,36,.42),0 3px 8px -4px rgba(44,39,36,.16);transition:transform var(--dur-1) var(--ease),box-shadow var(--dur-1) var(--ease),border-color var(--dur-1) var(--ease)}
.iconbox__item:hover{transform:translateY(-5px);box-shadow:0 30px 54px -22px rgba(44,39,36,.52),0 5px 12px -5px rgba(44,39,36,.2);border-color:var(--sand-deep)}
.sec--mocha .iconbox__item,.sec--deep .iconbox__item{background:rgba(51,45,42,.55);border-color:rgba(241,209,172,.2);box-shadow:none}
.sec--mocha .iconbox__item:hover,.sec--deep .iconbox__item:hover{border-color:var(--gold);box-shadow:none}
.iconbox__ico{display:flex;align-items:center;justify-content:center;width:clamp(60px,7vw,76px);height:clamp(60px,7vw,76px);border-radius:50%;background:var(--gold-soft);border:1px solid var(--gold-line);color:var(--accent-deep);flex:none}
.sec--mocha .iconbox__ico,.sec--deep .iconbox__ico{background:rgba(241,209,172,.14);border-color:rgba(241,209,172,.36);color:var(--gold)}
.iconbox__ico svg{width:clamp(28px,3.2vw,34px);height:clamp(28px,3.2vw,34px);fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.iconbox__no{font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;color:var(--accent-deep);font-weight:700}
.sec--mocha .iconbox__no,.sec--deep .iconbox__no{color:var(--gold)}
.iconbox__title{margin:0;font-family:var(--font-serif);font-weight:700;font-size:clamp(1.05rem,.95rem + .5vw,1.22rem);line-height:1.4;color:var(--mocha)}
.sec--mocha .iconbox__title,.sec--deep .iconbox__title{color:var(--ivory-pure)}
.iconbox__desc{margin:0;font-size:.9rem;line-height:1.8;color:var(--ink-soft)}
.sec--mocha .iconbox__desc,.sec--deep .iconbox__desc{color:var(--on-mocha-soft)}
.iconbox__rule{width:26px;height:1px;background:var(--gold-line);border:0;margin:0}
.sec--mocha .iconbox__rule,.sec--deep .iconbox__rule{background:rgba(241,209,172,.4)}
@media(max-width:980px){.iconbox{grid-template-columns:repeat(2,minmax(0,1fr));max-width:680px}}
@media(max-width:520px){.iconbox{grid-template-columns:minmax(0,1fr);max-width:400px}}

/* ---------- 오시는 길 · 상담 (왼쪽 지도 + 오른쪽 항목) ---------- */
/* sec--deep 은 전 페이지에서 이 섹션에만 쓰인다. 섹션 자체는 진료분야와 같은 폭으로
   넓혀 양옆이 휑하게 남지 않게 한다. 제목은 sec__head 가 따로 좁게 잡고 있어
   같이 늘어나지 않는다.
   지도와 오른쪽 정보단의 비중은 1.25:1 — 지도가 정보단을 눌러 보이지 않도록 맞췄고,
   이 비율이면 좁은 폭에서도 전화번호(02-547-3351)가 한 줄로 유지된다. */
.sec--deep .sec__inner{max-width:1680px}
.lc{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:clamp(26px,3.2vw,58px);width:100%;max-width:1680px;margin-inline:auto;align-items:start}
.lc__map{width:100%;aspect-ratio:16/9;border-radius:var(--radius);overflow:hidden;border:1px solid rgba(241,209,172,.28);background:var(--ivory-warm)}
.lc__map iframe{display:block;width:100%;height:100%;border:0}
.lc__info{display:flex;flex-direction:column}
.lc__list{margin:0;display:flex;flex-direction:column;gap:clamp(20px,2.4vw,32px)}
/* 라벨(좌) + 값(우) — main 전역의 가운데 정렬은 이 블록에서 되돌린다 */
.lc__row{display:grid;grid-template-columns:clamp(82px,7.6vw,112px) minmax(0,1fr);gap:clamp(10px,1.4vw,20px);align-items:start}
.lc__row dt{margin:0;font-family:var(--font-serif);font-weight:700;font-size:clamp(.94rem,.86rem + .26vw,1.06rem);line-height:1.7;color:var(--ivory-pure);text-align:left}
.lc__row dd{margin:0;display:flex;flex-direction:column;gap:5px}
.lc__tel{display:inline-block;font-family:var(--font-serif);font-weight:800;font-size:clamp(1.65rem,1.15rem + 1.9vw,2.5rem);line-height:1.15;letter-spacing:.01em;color:var(--gold);text-align:left}
.lc__tel:hover{color:var(--gold-soft)}
.lc__note{margin:0;font-size:.84rem;line-height:1.7;color:var(--on-mocha-soft);text-align:left}
.lc__line{margin:0;display:flex;align-items:baseline;gap:8px;font-size:.95rem;line-height:1.8;color:var(--on-mocha-soft);text-align:left}
.lc__line b{min-width:6.4em;font-weight:600;color:var(--ivory-pure)}
.lc__line i{font-style:normal;color:var(--sand);flex:none}
.lc__val{margin:0;font-size:.97rem;line-height:1.8;color:var(--on-mocha-soft);text-align:left}
a.lc__val:hover{color:var(--gold)}
/* 지도 앱 버튼 — 알약이 아닌 각진 버튼 */
.lc__btns{display:flex;flex-wrap:wrap;gap:clamp(10px,1.2vw,16px);margin-top:clamp(24px,2.8vw,38px)}
.lc__btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:52px;padding:0 clamp(18px,1.8vw,26px);border:1px solid rgba(241,209,172,.45);border-radius:6px;font-size:.92rem;font-weight:600;color:var(--gold);transition:background var(--dur-1) var(--ease),color var(--dur-1) var(--ease),border-color var(--dur-1) var(--ease)}
.lc__btn:hover{background:var(--gold);border-color:var(--gold);color:var(--mocha-deep)}
.lc__btn i{width:18px;height:1px;background:currentColor;flex:none}
@media(max-width:900px){.lc{grid-template-columns:minmax(0,1fr);gap:var(--space-6)}}
@media(max-width:430px){.lc__row{grid-template-columns:minmax(0,1fr);gap:6px}.lc__line{flex-wrap:wrap}.lc__line b{min-width:0}}

/* ==========================================================================
   눈성형 대표 항목 — 01~04를 각각 독립 섹션으로 (eye.html 전용)
   레이아웃은 네 섹션 모두 같다 — .feat 기본형(텍스트 좌 + 사진 우 흰 카드).
   섹션마다 다른 것은 배경과 포인트 컬러뿐이다.
   배경  01 화이트 / 02 연베이지 / 03 화이트 / 04 연그레이
   포인트 01 골드 / 02 코퍼 / 03 브론즈 / 04 에스프레소 (--pt)
   상하 여백·글꼴은 네 섹션 모두 같은 값으로 묶는다.
   ========================================================================== */
:root{--greige:#eceae4}

.featsec{padding-block:clamp(52px,6.4vw,92px);border-top:1px solid rgba(107,82,56,.14)}
.featsec--a{background:var(--ivory-pure);--pt:#a98243}
.featsec--b{background:var(--ivory-warm);--pt:#a26a4e}
/* 03 노인성 안검 및 눈썹아래 거상 — 흰 배경 (눈성형 페이지에서만 쓰는 변형) */
.featsec--c{background:#fff;--pt:#7d7350}
.featsec--d{background:var(--greige);--pt:#5c4a3f}

/* 블록 번호는 제목 위 작은 표시로 — 큰 번호는 수술법 줄(.method__no)이 맡는다 */
.featsec .feat__no{display:block}

/* ==========================================================================
   진료분야 지그재그 목록 (index.html — Medical Service)
   4-4clinic SIGNATURE CARE 와 같은 구성: 사진/글 2단을 좌우 번갈아 놓고,
   항목끼리 위아래로 겹쳐 어긋나게 쌓는다. 스크롤 시 좌·우에서 밀려 들어오고,
   View more 는 호버하면 점이 오른쪽에서 들어오며 글자를 민다.
   폭은 참고 사이트(1008px)보다 넓게 잡아 양옆 여백을 줄였다.
   ========================================================================== */
.sec__inner--wide{max-width:1680px}
.svc{list-style:none;margin:0;padding:0;width:100%;max-width:1680px;margin-inline:auto}
.svc__item{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,3.2vw,64px);align-items:start}
/* 짝수 항목은 사진을 오른쪽에 — DOM 순서(사진 먼저)는 그대로 두고 자리만 바꾼다 */
.svc > li:nth-child(2n) .svc__thumb{grid-column:2;grid-row:1}
.svc > li:nth-child(2n) .svc__text{grid-column:1;grid-row:1}

/* 항목끼리 겹쳐 쌓아 어긋난 리듬을 만든다 */
.svc__text{padding-top:clamp(0px,5.5vw,100px)}
.svc > li:nth-child(2n){margin-top:calc(clamp(0px,5vw,90px) * -1)}
.svc > li:nth-child(2n) .svc__text{padding-top:clamp(0px,9vw,165px)}
.svc > li:nth-child(2n+3){margin-top:calc(clamp(0px,2.5vw,45px) * -1)}
.svc > li:nth-child(2n+3) .svc__text{padding-top:clamp(0px,9.4vw,170px)}
/* 다음 항목이 위 음수 margin 만큼 올라와 앞 항목의 글 칸 위를 덮는다.
   글 칸 맨 아래가 'View more' 라 여백이 없으면 그 글자가 사진에 가려진다
   (1100~1600px 에서 4~34px 씩 겹쳤다). 올라오는 만큼 + 12px 을 글 칸 아래에 둬
   겹치는 띠가 항상 빈 여백 위에만 얹히게 한다. 겹쳐 쌓는 리듬은 그대로다.
   홀수 항목 뒤에는 5vw(2n), 짝수 항목 뒤에는 2.5vw(2n+3) 가 올라온다. */
.svc:not(.svc--gap) .svc__text{padding-bottom:calc(clamp(0px,5vw,90px) + 12px)}
.svc:not(.svc--gap) > li:nth-child(2n) .svc__text{padding-bottom:calc(clamp(0px,2.5vw,45px) + 12px)}
.svc:not(.svc--gap) > li:last-child .svc__text{padding-bottom:0}

.svc__thumb{display:block;width:100%;aspect-ratio:4/3;overflow:hidden;border-radius:var(--radius-lg);background:var(--ivory-warm)}
.svc__thumb img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.svc__item:hover .svc__thumb img{transform:scale(1.04)}

.svc__text{display:flex;flex-direction:column;align-items:flex-start;padding-inline:clamp(0px,2.6vw,50px)}
.svc__text > *{text-align:left}
.svc__meta{display:flex;align-items:center;gap:14px}
.svc__num{display:flex;align-items:center;justify-content:center;width:clamp(34px,3vw,42px);height:clamp(34px,3vw,42px);border-radius:50%;background:var(--accent-deep);color:var(--ivory-pure);font-weight:800;font-size:.82rem;flex:none}
.svc__tag{font-size:var(--fs-eyebrow);letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--accent-deep);font-weight:600}
.svc__title{padding:clamp(20px,2.2vw,34px) 0 clamp(12px,1.4vw,22px);font-family:var(--font-serif);font-weight:800;font-size:var(--fs-h3);line-height:1.4;color:var(--mocha)}
/* 설명은 단 폭을 그대로 쓰게 두어 데스크톱에서 한 줄로 떨어지게 한다 */
.svc__desc{font-size:clamp(.9rem,.85rem + .2vw,1rem);line-height:1.8;color:var(--ink-soft);word-break:keep-all}
/* 설명이 두 문단 이상인 항목(쁘띠 · 레이저)에서 문단 사이를 띄운다 */
.svc__desc + .svc__desc{margin-top:clamp(10px,1vw,16px)}
.svc__go{display:inline-flex;align-items:center;align-self:flex-end;margin-top:clamp(22px,2.6vw,40px);font-size:.95rem;font-weight:600;color:var(--accent-deep)}
.svc__dot{position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden;transition:padding-right .2s var(--ease)}
.svc__dot::before{content:"";width:4px;height:4px;border-radius:50%;background:var(--accent-deep);transform:translateX(100%);opacity:0;transition:transform .1s linear,opacity .2s}
.svc__item:hover .svc__dot{padding-right:15px}
.svc__item:hover .svc__dot::before{transform:translateX(0);opacity:1}

/* 스크롤 인 — 홀수는 왼쪽에서, 짝수는 오른쪽에서 (참고 사이트의 fade-right/fade-left).
   시작 상태에만 :not(.is-in) 을 걸어, 도착 상태(.is-in)와 우선순위 다툼이 없게 한다. */
.js .svc > li:not(.is-in){opacity:0;transform:translateX(-90px)}
.js .svc > li:nth-child(2n):not(.is-in){transform:translateX(90px)}

/* 태블릿 — 겹침을 풀고 2단은 유지 */
@media(max-width:1024px){
  .svc__item{align-items:center}
  .svc__text,.svc > li:nth-child(2n) .svc__text,.svc > li:nth-child(2n+3) .svc__text{padding-top:0}
  .svc:not(.svc--gap) .svc__text,.svc:not(.svc--gap) > li:nth-child(2n) .svc__text{padding-bottom:0}
  /* nth-child 규칙이 `.svc > li + li` 보다 우선순위가 높아 예전에는 간격이 0 이 됐다.
     겹침 해제(0)와 간격 지정을 한 규칙으로 합쳐 우선순위 다툼을 없앤다. */
  .svc > li + li,.svc > li:nth-child(2n),.svc > li:nth-child(2n+3){margin-top:clamp(32px,4vw,48px)}
}
/* 모바일 — 한 열로 쌓고 가운데 정렬, 가로 이동 대신 위아래 이동 */
@media(max-width:760px){
  .svc__item{grid-template-columns:minmax(0,1fr);gap:clamp(18px,4vw,26px)}
  .svc .svc__thumb,.svc > li:nth-child(2n) .svc__thumb{grid-column:1;grid-row:1}
  .svc .svc__text,.svc > li:nth-child(2n) .svc__text{grid-column:1;grid-row:2}
  .svc__text{align-items:center;padding-inline:0}
  .svc__text > *{text-align:center}
  .svc__go{align-self:center}
  .svc > li + li,.svc > li:nth-child(2n),.svc > li:nth-child(2n+3){margin-top:clamp(38px,8vw,56px)}
  .js .svc > li:not(.is-in),.js .svc > li:nth-child(2n):not(.is-in){transform:translateY(60px)}
}

/* 설명이 두 문단 이상인 목록(쁘띠 · 레이저)은 겹쳐 쌓기를 풀고 사이를 띄운다 —
   음수 margin 을 그대로 두면 앞 항목의 글줄 위로 다음 항목의 사진이 올라온다.
   글 길이는 내용마다 달라서 겹치는 양을 CSS 로 미리 계산할 수 없으므로,
   다음 항목이 앞 항목의 아래(li 경계)에서 시작하도록 양수 간격만 남긴다.
   항목 안에서 글을 아래로 내리는 .svc__text 의 padding-top 은 그대로 두어
   사진과 글이 어긋나는 메인의 리듬은 유지한다.
   위 두 미디어쿼리의 nth-child 규칙(우선순위가 .svc > li + li 보다 높다)까지
   덮어야 하므로 같은 우선순위로 뒤에 둔다. */
.svc--gap > li:nth-child(n+2){margin-top:clamp(28px,3.4vw,60px)}
@media(max-width:760px){
  .svc--gap > li:nth-child(n+2){margin-top:clamp(38px,8vw,56px)}
}

/* Location 섹션과 푸터가 같은 배경색(--mocha-deep)이라 경계가 보이지 않는다.
   푸터 윗변에 얇은 구분선을 둬 두 영역을 나눈다.
   색은 푸터 안쪽 저작권 구분선과 같은 톤으로 맞췄다. */
.rb-footer{border-top:1px solid rgba(205,168,127,.28)}

/* ==========================================================================
   눈성형 — 헤더 배너 (.ehero)
   ========================================================================== */
/* 참고 시안과 같은 구성 — 회색 그러데이션 바탕에 모델 컷아웃이 왼쪽에서
   바닥을 딛고 서고, 오른쪽에 알약 배지 · 큰 제목 · 해시태그가 들어간다.
   바탕은 위가 어둡고 아래로 갈수록 밝아지며, 글이 놓이는 오른쪽에는
   흰 글씨가 묻히지 않도록 옅은 회색 베일을 한 겹 더 깐다. */
.ehero{
  position:relative;isolation:isolate;overflow:hidden;
  /* pop-ps.com 제품 배너와 같은 회색 배경.
     그쪽은 배경색이 CSS가 아니라 배너 이미지(poc0601_banner.jpg) 안에 그려져 있어,
     이미지에서 색 분포를 뽑아 그대로 재현했다 — 아래 세로 그러데이션이 기본이고,
     오른쪽 아래로 갈수록 밝아지는 빛을 한 겹 얹는다(측정 오차 1~2단계). */
  background:
    radial-gradient(40% 120% at 100% 100%,rgba(255,255,255,.53) 0%,rgba(255,255,255,.44) 25%,rgba(255,255,255,.34) 50%,rgba(255,255,255,.21) 75%,rgba(255,255,255,0) 100%),
    linear-gradient(180deg,#a1a1a1 0%,#adadad 10%,#b7b7b7 20%,#bfbfbf 30%,#c6c6c6 40%,#cecece 50%,#d2d2d2 60%,#d6d6d6 70%,#dadada 80%,#d9d9d9 100%);
}
.ehero__inner{
  --eh-split:46%;   /* 오른쪽 글 칸의 폭 — 컷아웃 자리와 한 값으로 묶어 둔다 */
  position:relative;max-width:1720px;margin-inline:auto;
  min-height:clamp(380px,37vw,700px);
  padding-inline:var(--gutter);
  display:grid;grid-template-columns:minmax(0,calc(100% - var(--eh-split))) minmax(0,var(--eh-split));align-items:center;
}
/* 컷아웃은 왼쪽 칸 안에서 오른쪽·아래로 붙는다. 배너 바닥에서 잘리는 것이 시안과 같다. */
.ehero__media{position:absolute;inset:0 var(--eh-split) 0 0;display:flex;align-items:flex-end;justify-content:flex-end;pointer-events:none}
.ehero__media img{height:100%;width:auto;max-width:none;object-fit:contain;object-position:bottom center;filter:drop-shadow(0 26px 40px rgba(24,18,15,.42))}
.ehero__text{position:relative;z-index:1;grid-column:2;display:flex;flex-direction:column;align-items:flex-start;gap:clamp(14px,1.9vw,26px);padding-block:clamp(44px,6vw,88px)}
.ehero__text :where(p,h1,ul,li){text-align:left}
.ehero__badge{margin:0;padding:.62em 1.5em;border:1.5px solid rgba(255,255,255,.72);border-radius:var(--radius-pill);font-size:clamp(.76rem,.7rem + .3vw,1.05rem);font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:#fff;text-shadow:0 1px 10px rgba(74,74,78,.34)}
.ehero__title{margin:0;font-family:var(--font-serif);font-weight:800;font-size:clamp(1.95rem,1.15rem + 3.5vw,4.4rem);line-height:1.18;letter-spacing:-.01em;color:#fff;text-shadow:0 2px 22px rgba(70,70,74,.36);word-break:keep-all}
.ehero__title .em{font-style:normal;color:var(--gold-soft)}
/* 해시태그는 세로로 쌓지 않고 가로 한 줄로 흐른다 — 다섯 개가 좁은 글 칸에 들어가야 해서
   글자를 1.05rem 까지만 키우고, 태그 하나가 도중에 접히지 않도록 nowrap 을 건다.
   칸을 넘치면 태그 단위로 다음 줄에 접힌다. */
.ehero__tags{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;align-items:center;gap:clamp(8px,.9vw,15px)}
.ehero__tags li{font-size:clamp(.7rem,.34rem + .6vw,1.05rem);font-weight:500;line-height:1.5;white-space:nowrap;color:rgba(255,255,255,.94);text-shadow:0 1px 12px rgba(70,70,74,.34)}
/* 리드 문장도 흰 글씨다(2026-08-20). 예전에는 이 규칙이 `body.p-lift` 안에만 있었고
   나머지 페이지는 본문 색(어두운 잉크)을 그대로 물려받았다 — 바탕이 밝은 회색일
   때는 읽혔지만, 페이지마다 어두운 바탕 그림을 깔면서 글자가 묻혔다.
   해시태그와 같은 이유로 기본값으로 올리고 페이지별 예외는 두지 않는다. */
.ehero__lead{max-width:34em;font-size:clamp(.9rem,.86rem + .2vw,1.02rem);line-height:1.85;color:rgba(255,255,255,.93);text-shadow:0 1px 12px rgba(70,70,74,.34)}
.ehero__lead b{font-weight:700;color:#fff}
/* 중간 폭에서는 글 칸을 넓히고 제목을 줄여 제목이 두 줄을 유지하게 한다 */
@media(max-width:1100px){
  .ehero__inner{--eh-split:50%}
  .ehero__title{font-size:clamp(1.95rem,1.05rem + 3vw,3.4rem)}
}
@media(max-width:640px){
  /* 좁은 화면에서는 컷아웃을 배너 오른쪽 아래로 물리고 글을 전체 폭으로 편다 */
  .ehero__inner{grid-template-columns:minmax(0,1fr);min-height:0}
  .ehero__media{inset:auto -6% 0 auto;width:min(76%,420px);height:clamp(300px,62vw,440px)}
  .ehero__media img{height:100%}
  .ehero__text{grid-column:1;padding-block:clamp(44px,9vw,64px);padding-bottom:clamp(300px,60vw,400px)}
}
/* 거상 페이지만 — 어두운 결 그림 바탕 · 리드 문장.
   바탕 그림 lift_hero_bg.svg 는 _build/gen_hero_bg.py 가 그린다(색·파형은 그 스크립트에서 고친다).
   눈성형(.p-eye)은 위 회색 그러데이션을 그대로 써야 하므로 .p-lift 안에 가둔다.
   인물 컷아웃은 알파가 살아 있어 어두운 바탕에서도 테두리가 뜨지 않는다. */
body.p-lift .ehero{background:#241f1d url("../img/lift_hero_bg.svg") center center/cover no-repeat}
/* 나머지 여섯 페이지도 페이지마다 다른 바탕 그림을 쓴다(2026-08-20).
   그림은 _build/gen_page_bg.py 가 한 레시피로 그린다 — 딥 웜 뉴트럴 바탕 +
   페이지 고유의 결 + 왼쪽 아래(쁘띠만 오른쪽 위) 빛 + 그레인 + 오른쪽 스크림.
   위 회색 그러데이션은 이제 시안 파일(lifting-a·stemcell-a 등)만 쓰는 기본값이다.
   바탕색(#…)은 SVG 가 늦게 뜨거나 막혔을 때 흰 글씨가 읽히도록 둔 안전판이라,
   그림의 어두운 쪽 색과 같은 값으로 맞춰 둔다 — 더 밝게 두면 그 순간 글자가 뜬다. */
body.p-eye     .ehero{background:#292522 url("../img/eye_hero_bg.svg")     center center/cover no-repeat}
body.p-stem    .ehero{background:#1a1719 url("../img/stem_hero_bg.svg")    center center/cover no-repeat}
body.p-fat     .ehero{background:#3f352e url("../img/fat_hero_bg.svg")     center center/cover no-repeat}
body.p-petit   .ehero{background:#242120 url("../img/petit_hero_bg.svg")   center center/cover no-repeat}
body.p-removal .ehero{background:#211f1d url("../img/removal_hero_bg.svg") center center/cover no-repeat}
body.p-trauma  .ehero{background:#26231f url("../img/trauma_hero_bg.svg")  center center/cover no-repeat}
/* 줄기세포 A 시안만 아직 위 회색 그러데이션을 쓴다(시안 담당이 따로 있어 그대로 둔다).
   밝은 바탕에 흰 리드는 읽히지 않으므로 이 한 장만 예전 색으로 되돌린다.
   시안이 정리되거나 A 도 바탕 그림을 받으면 이 규칙은 지운다. */
body.p-stem-a .ehero__lead{color:var(--ink);text-shadow:none}
/* 외상 제목만 조금 작게(2026-08-20). 다른 페이지 제목은 첫 줄이 5~7자인데
   외상은 "흉터는 처음 치료가" 9자라, 기본 크기로는 1100~1500px 구간에서 글 칸을
   넘겨 **세 줄로 접혔습니다**. 줄바꿈 자리만 옮겨서는 그 구간이 해결되지 않아
   이 페이지에서만 글자를 칸 너비에 맞춰 줄입니다(칸은 화면 폭의 46%라 vw 로 묶입니다).
   1100px 아래는 기본 규칙과 같은 값이라 그 아래 동작은 그대로입니다. */
body.p-trauma .ehero__title{font-size:clamp(1.95rem,4.6vw,4.4rem)}
@media(max-width:1100px){
  body.p-trauma .ehero__title{font-size:clamp(1.7rem,4.9vw,3.4rem)}
}
/* 640px 아래는 글이 배너 전체 폭을 쓰므로 좁혀 둘 이유가 없다 — 기본값으로 되돌린다 */
@media(max-width:640px){
  body.p-trauma .ehero__title{font-size:clamp(1.95rem,1.05rem + 3vw,3.4rem)}
}
/* 거상 전용이던 .ehero__lead 규칙은 위 기본값으로 올라갔다(2026-08-20). */

/* 전면 사진 히어로(.hero)의 해시태그 줄 — 거상 배너와 같은 개념을 사진 히어로에 옮긴 것.
   가로로 한 줄, 좁아지면 다음 줄로 접힌다. 어두운 사진 위에 얹히므로 금빛 테두리 알약으로 낸다. */
/* ==========================================================================
   뉴스 페이지 — 블로그 소식 (.blg) : 대표 글 + 카드 격자
   ---------------------------------------------------------------------
   홈의 주요 뉴스(.nc)가 어두운 띠 위를 흐르는 장식이라면, 이쪽은 **읽으러 오는
   자리**다. 밝은 크림 바탕에 대표 글 하나를 크게 세우고 나머지는 카드 격자로
   편다(2026-08-20 개편 — 그전에는 한 줄짜리 목록이 세로로만 쌓여 있었다).

   글 내용은 news_feed.php 가 블로그에서 받아 온다(news.html 아래쪽 스크립트).
   격자는 auto-fill 이라 화면 폭에 따라 3열 → 2열 → 1열로 저절로 접힌다 —
   열 수를 따로 못박지 않는다.
   ========================================================================== */
.blg{display:flex;flex-direction:column;align-items:center;gap:clamp(26px,3.4vw,48px);width:100%}
.blg > *{width:100%}

/* ---------- 대표 글 ---------- */
.blg__lead{margin:0}
.blg__lead a{
  display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,1fr);align-items:center;
  gap:clamp(18px,2.6vw,44px);padding:clamp(14px,1.6vw,22px);
  border:1px solid var(--line);border-radius:clamp(16px,1.8vw,24px);background:#fff;
  box-shadow:var(--shadow);transition:box-shadow var(--dur-1) var(--ease),border-color var(--dur-1) var(--ease)
}
.blg__lead a:hover{border-color:var(--gold-line);box-shadow:0 30px 56px -34px rgba(44,39,36,.5)}
.blg__fig{display:block;overflow:hidden;border-radius:clamp(12px,1.4vw,18px);background:var(--ivory-warm)}
.blg__fig img{width:100%;aspect-ratio:16/10;object-fit:cover;transition:transform var(--dur-2) var(--ease)}
.blg__lead a:hover .blg__fig img{transform:scale(1.03)}
.blg__fig--none{aspect-ratio:16/10;border:1px solid var(--line-soft);background:var(--ivory-pure)}
.blg__tx{display:flex;flex-direction:column;align-items:flex-start;gap:clamp(8px,1vw,13px);
  padding-right:clamp(0px,1.4vw,20px)}
.blg__tx > *{text-align:left}
.blg__badge{padding:.34em 1em;border:1px solid var(--gold-line);border-radius:var(--radius-pill);
  background:var(--gold-soft);font-size:.72rem;font-weight:700;letter-spacing:.1em;color:var(--accent-deep)}
.blg__date{font-size:.82rem;letter-spacing:.06em;color:var(--ink-mute);font-variant-numeric:tabular-nums}
.blg__title{font-family:var(--font-serif);font-weight:800;line-height:1.38;
  font-size:clamp(1.2rem,1rem + 1vw,1.72rem);color:var(--espresso)}
.blg__lead a:hover .blg__title{color:var(--accent-deep)}
.blg__sum{font-size:.93rem;line-height:1.85;color:var(--ink-soft);
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.blg__go{display:inline-flex;align-items:center;gap:9px;margin-top:2px;
  font-size:.88rem;font-weight:700;color:var(--accent-deep)}
.blg__go::after{content:"";width:18px;height:1px;background:currentColor;
  transition:width var(--dur-1) var(--ease)}
.blg__lead a:hover .blg__go::after{width:30px}

/* ---------- 카드 격자 ---------- */
.blg__grid{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(auto-fill,minmax(clamp(230px,24vw,290px),1fr));
  gap:clamp(14px,1.8vw,26px)}
.blg__card a{display:flex;flex-direction:column;gap:11px;height:100%;padding:clamp(11px,1.1vw,15px);
  border:1px solid var(--line);border-radius:clamp(13px,1.3vw,17px);background:#fff;
  box-shadow:var(--shadow-sm);
  transition:transform var(--dur-1) var(--ease),box-shadow var(--dur-1) var(--ease),border-color var(--dur-1) var(--ease)}
.blg__card a:hover{transform:translateY(-5px);border-color:var(--gold-line);
  box-shadow:0 24px 40px -26px rgba(44,39,36,.46)}
.blg__cfig{display:block;overflow:hidden;border-radius:calc(var(--radius) - 5px);background:var(--ivory-warm)}
.blg__cfig img{width:100%;aspect-ratio:4/3;object-fit:cover}
.blg__cfig--none{aspect-ratio:4/3;border:1px solid var(--line-soft);background:var(--ivory-pure);position:relative}
.blg__cfig--none::after{content:"";position:absolute;left:28%;right:28%;top:50%;height:1px;background:var(--line)}
.blg__cdate{width:100%;text-align:left;font-size:.76rem;letter-spacing:.05em;color:var(--sand-deep);
  font-variant-numeric:tabular-nums}
.blg__ctitle{width:100%;text-align:left;font-size:.95rem;font-weight:600;line-height:1.6;color:var(--ink);
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}

.blg__btns{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--space-3)}
.blg__state{margin:0}

@media(max-width:760px){
  .blg__lead a{grid-template-columns:minmax(0,1fr);gap:clamp(14px,3vw,20px)}
  .blg__tx{padding-right:0}
}

/* ==========================================================================
   메인 — 주요 뉴스 (.nc) : 세로 아카이브
   ---------------------------------------------------------------------
   2026-08-20 개편. 예전에는 `왼쪽 글 목록 + 오른쪽 붙박이 사진` 두 칸이었다
   (.nsec/.nsplit/.nsticky — 쓰는 곳이 없어져 아래에서 걷어냈다).

   어두운 모카 띠 위로 블로그 글 카드가 세로 다섯 줄로 서로 반대 방향으로 흐르고,
   가운데 유리판에 제목이 얹힌다. 흐름은 **빠른 상담 띠(.mq)와 같은 방식** —
   같은 묶음을 두 벌 이어 붙이고 한 벌 높이(-50%)만큼 흘려 끊김 없이 반복시킨다.

   카드 내용은 news_feed.php 가 블로그에서 받아 온다(index.html 아래쪽 스크립트).
   흐르는 카드는 장식이라 aria-hidden 이고 초점을 받지 않는다 —
   키보드·스크린리더용 목록(.nc__list)을 따로 숨겨 두었다.
   ========================================================================== */
.nc{position:relative;isolation:isolate;overflow:hidden;min-height:clamp(560px,62vw,860px);display:flex;align-items:center;padding-block:clamp(72px,9vw,132px);
  background:var(--mocha-deep)}
.nc__bg{position:absolute;inset:0;z-index:0;
  background:
    radial-gradient(46% 60% at 50% 50%,rgba(241,209,172,.16) 0%,rgba(241,209,172,0) 70%),
    linear-gradient(180deg,#2c2724 0%,#221e1b 55%,#1b1816 100%)}
.nc__cols{position:absolute;inset:-10% 0;z-index:1;display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(14px,1.6vw,26px);
  padding-inline:var(--gutter);max-width:1680px;margin-inline:auto;left:0;right:0;
  -webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,0) 0%,#000 16%,#000 84%,rgba(0,0,0,0) 100%);
  mask-image:linear-gradient(180deg,rgba(0,0,0,0) 0%,#000 16%,#000 84%,rgba(0,0,0,0) 100%)}
.nc__col{overflow:hidden}
.nc__track{display:flex;flex-direction:column;gap:clamp(14px,1.6vw,26px);animation:ncUp 46s linear infinite}
.nc__col--down .nc__track{animation-name:ncDown;animation-duration:54s}
.nc__col--slow .nc__track{animation-duration:62s}
/* 다섯 줄이 같은 속도로 돌면 겹치는 카드가 나란히 서서 눈에 띈다 — 줄마다 다르게 */
.nc__col:nth-child(5) .nc__track{animation-duration:50s}
.nc:hover .nc__track,.nc:focus-within .nc__track{animation-play-state:paused}
@keyframes ncUp{from{transform:translate3d(0,0,0)}to{transform:translate3d(0,-50%,0)}}
@keyframes ncDown{from{transform:translate3d(0,-50%,0)}to{transform:translate3d(0,0,0)}}

.nc__card{display:flex;flex-direction:column;gap:9px;padding:clamp(10px,1vw,14px);
  border:1px solid rgba(231,211,187,.18);border-radius:clamp(12px,1.2vw,16px);
  background:rgba(246,240,230,.055);backdrop-filter:blur(2px)}
.nc__fig{display:block;overflow:hidden;border-radius:calc(var(--radius) - 6px);background:rgba(246,240,230,.08)}
.nc__fig img{width:100%;aspect-ratio:4/3;object-fit:cover;opacity:.82}
.nc__fig.is-none{aspect-ratio:4/3;border:1px solid rgba(231,211,187,.16)}
.nc__date{font-size:.72rem;letter-spacing:.06em;color:var(--gold);text-align:left;font-variant-numeric:tabular-nums}
.nc__title{text-align:left;font-size:.88rem;font-weight:500;line-height:1.55;color:rgba(246,240,230,.9);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* 가운데 유리판 — 흐르는 카드 위에 얹혀 제목을 붙든다 */
.nc__plate{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;
  gap:clamp(12px,1.4vw,20px);width:min(100% - var(--gutter) * 2,640px);margin-inline:auto;
  padding:clamp(30px,4vw,56px) clamp(24px,3vw,48px);
  border:1px solid rgba(231,211,187,.24);border-radius:clamp(18px,2vw,26px);
  background:rgba(28,24,22,.62);backdrop-filter:blur(10px) saturate(120%);
  box-shadow:0 40px 80px -50px rgba(0,0,0,.9)}
.nc__plate .eyebrow{color:var(--gold)}
.nc__plate .title{color:var(--ivory-pure)}
.nc__plate .lead{color:var(--on-mocha-soft)}

/* 흐르는 카드는 장식이라 초점을 받지 않는다 — 대신 이 목록이 키보드·스크린리더용이다 */
.nc__list{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;list-style:none}

@media(max-width:1400px){ .nc__cols{grid-template-columns:repeat(4,minmax(0,1fr))} .nc__col:nth-child(n+5){display:none} }
@media(max-width:1100px){ .nc__cols{grid-template-columns:repeat(3,minmax(0,1fr))} .nc__col:nth-child(n+4){display:none} }
@media(max-width:760px){  .nc__cols{grid-template-columns:repeat(2,minmax(0,1fr))} .nc__col:nth-child(n+3){display:none} }
@media(prefers-reduced-motion:reduce){
  .nc__track{animation:none}
}

/* 예전 주요 뉴스(.nsec · .nsplit · .nlist · .nposts · .npost* · .nsticky*)의 CSS 는
   2026-08-20 개편으로 쓰는 곳이 없어져 걷어냈습니다 — 홈은 .nc(세로 아카이브),
   뉴스 페이지는 .blg(대표 글 + 카드 격자)로 바뀌었습니다.
   되살리려면 그 시점 이전 판을 참고하세요(Backup/models-2026-08-20/before-2026-08-20-pm/site.css). */
@media(prefers-reduced-motion:reduce){
  .npost__link:hover{transform:none}
  .npost__link:hover .npost__thumb img{transform:none}
}

/* 어디서든 이 구절만은 줄 사이에서 찢어지지 않게 한다(괄호·단위·고유명사 묶음) */
.nb{white-space:nowrap}

/* ==========================================================================
   지방성형 — 좌 그림 / 우 글 2단(.twocol) · 자가조직 카드(.fcta)
   ========================================================================== */
/* 흰 바탕에 왼쪽 그림, 오른쪽 글. 글은 왼쪽 끝선을 하나로 맞춘다 —
   main 전역의 가운데 정렬(center floor)이 p·h3 에 직접 걸리므로 자식 선택자로 되돌린다. */
.twocol{background:#fff}
.twocol__grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);align-items:center;gap:clamp(24px,4vw,80px);width:100%;max-width:1400px;margin-inline:auto}
.twocol__fig{margin:0;border-radius:clamp(14px,1.8vw,24px);overflow:hidden}
.twocol__fig img{width:100%;height:auto;display:block}
.twocol__text{display:flex;flex-direction:column;align-items:flex-start}
.twocol__text :where(p,h3,span){text-align:left}
.twocol__no{font-family:var(--font-serif);font-weight:800;font-size:clamp(.86rem,.8rem + .3vw,1rem);letter-spacing:.14em;color:var(--sand-deep)}
.twocol__title{margin:clamp(6px,.8vw,12px) 0 0;font-family:var(--font-body);font-weight:700;font-size:clamp(1.35rem,1.05rem + 1.3vw,2.05rem);line-height:1.35;color:var(--mocha);word-break:keep-all}
.twocol__title em{font-style:normal;color:var(--accent-deep)}
/* 참고 시안의 포인트색 굵은 한 줄 — 제목과 본문을 잇는 다리 역할 */
.twocol__point{margin:clamp(14px,1.8vw,26px) 0 0;max-width:26em;font-weight:700;font-size:clamp(1rem,.92rem + .42vw,1.24rem);line-height:1.6;color:var(--accent-deep);word-break:keep-all;text-wrap:balance}
.twocol__label{margin:clamp(18px,2.2vw,32px) 0 0;padding:.4em 1.1em;border:1px solid var(--gold-line);border-radius:var(--radius-pill);background:var(--ivory-pure);font-size:clamp(.76rem,.73rem + .14vw,.86rem);font-weight:700;letter-spacing:.02em;color:var(--accent-deep)}
.twocol__desc{margin:clamp(10px,1.2vw,16px) 0 0;max-width:32em;font-size:clamp(.86rem,.82rem + .22vw,.98rem);line-height:1.9;color:var(--ink-mute);word-break:keep-all}
@media(max-width:860px){
  .twocol__grid{grid-template-columns:minmax(0,1fr)}
}

/* 자가조직이라는 장점 — 둥근 카드 한 장. 은은한 무지개빛 바탕 위에 가운데 정렬,
   바닥에는 카드 밖으로 잘려 나가는 큰 워터마크 글자를 깐다. */
.fcta__sec{background:#fff;padding-inline:clamp(20px,2.2vw,36px)}
.fcta__sec .sec__inner{max-width:none}
.fcta{position:relative;isolation:isolate;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(12px,1.5vw,22px);width:100%;max-width:1720px;min-height:clamp(240px,21vw,340px);margin-inline:auto;padding:clamp(44px,4.4vw,68px) clamp(24px,3.4vw,64px) clamp(58px,5.6vw,88px);border-radius:clamp(20px,2.6vw,40px);background:linear-gradient(128deg,#413830 0%,#6b5b4a 26%,#514537 52%,#7b6a56 74%,#39312a 100%);box-shadow:0 34px 64px -38px rgba(44,39,36,.5)}
/* 부드러운 빛무리 두 겹 — 참고 시안의 오로라 느낌을 그러데이션으로만 낸다 */
.fcta::before{content:"";position:absolute;z-index:-1;inset:-20%;background:radial-gradient(38% 44% at 24% 30%,rgba(255,244,224,.22) 0%,rgba(255,244,224,0) 70%),radial-gradient(34% 40% at 78% 66%,rgba(255,238,214,.16) 0%,rgba(255,238,214,0) 72%)}
.fcta > *{position:relative;z-index:1}
.fcta :where(p,h2){text-align:center}
.fcta__en{margin:0;font-family:var(--font-serif);font-weight:400;font-size:clamp(1.1rem,.95rem + .7vw,1.6rem);letter-spacing:.06em;color:rgba(255,253,248,.94)}
.fcta__title{margin:0;font-family:var(--font-serif);font-weight:800;font-size:clamp(1.9rem,1.25rem + 2.5vw,3.2rem);line-height:1.2;color:#fff;text-shadow:0 2px 18px rgba(74,60,48,.28);word-break:keep-all}
.fcta__lead{margin:clamp(4px,.6vw,10px) 0 0;max-width:34em;font-size:clamp(.88rem,.84rem + .22vw,1rem);line-height:1.85;color:rgba(255,253,248,.94);text-shadow:0 1px 10px rgba(74,60,48,.24);word-break:keep-all;text-wrap:balance}
/* 카드 아래를 가로지르는 큰 글자 — 좌우로 잘려 나가는 것이 시안과 같다 */
.fcta__wm{position:absolute;z-index:0;left:50%;bottom:-.52em;transform:translateX(-50%);font-family:var(--font-serif);font-weight:800;font-size:clamp(2.4rem,7.6vw,7.6rem);line-height:1;letter-spacing:.06em;color:rgba(255,255,255,.26);white-space:nowrap;pointer-events:none}

/* ==========================================================================
   서래소개 — 약력 두르기(.cvsec) / 학술활동 패널(.vsec)
   ========================================================================== */
/* 대표원장 컷아웃을 가운데 두고 약력을 좌우로 두른다.
   바탕 사진은 사람이 찍히지 않은 진료실 장비 컷을 크게 흐리고 어둡게 눌러
   가운데 인물만 또렷하게 남긴다(사진이 인물과 경쟁하면 안 된다). */
.cvsec{position:relative;isolation:isolate;overflow:hidden;color:var(--on-mocha)}
.cvsec__bg{position:absolute;inset:-5%;z-index:-2;background-size:cover;background-position:center;filter:blur(9px) saturate(.7) brightness(.4)}
.cvsec__veil{position:absolute;inset:0;z-index:-1;background:radial-gradient(58% 66% at 50% 46%,rgba(28,24,22,.28) 0%,rgba(24,20,18,.8) 68%,rgba(18,15,14,.94) 100%)}
.cvsec__head{margin-bottom:clamp(30px,4vw,64px)}
.cvsec__head .eyebrow{color:var(--gold)}
.cvsec__head .title{color:var(--ivory-pure)}
.cvsec__head .lead{color:rgba(246,240,230,.86)}
.cvring{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:clamp(14px,2.4vw,48px);width:100%;max-width:1560px;margin-inline:auto}
.cvring__fig{margin:0;width:clamp(250px,calc(37.5vw - 150px),480px)}
.cvring__fig img{width:100%;height:auto;filter:drop-shadow(0 34px 50px rgba(0,0,0,.6))}
.cvring__col{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:clamp(9px,1.2vw,17px)}
/* 항목마다 금색 점 하나 — 왼쪽 칸은 줄을 뒤집어 점이 사진 쪽을 향하게 한다 */
.cvring__col li{display:flex;align-items:flex-start;gap:10px;font-size:clamp(.8rem,.76rem + .2vw,.95rem);line-height:1.6;color:rgba(246,240,230,.9);word-break:keep-all}
.cvring__col li::before{content:"";flex:none;width:5px;height:5px;margin-top:.62em;border-radius:50%;background:var(--gold)}
.cvring__col--l li{flex-direction:row-reverse;text-align:right}
@media(max-width:1000px){
  /* 사진이 위로 올라가고 약력은 아래에 두 칸으로 선다 */
  .cvring{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .cvring__fig{grid-column:1/-1;justify-self:center;order:-1;margin-bottom:clamp(18px,3vw,32px)}
  .cvring__col--l li{flex-direction:row;text-align:left}
}
@media(max-width:620px){
  .cvring{grid-template-columns:minmax(0,1fr)}
}

/* 학술활동 — 왼쪽 소개 카드가 스크롤을 따라 붙고, 오른쪽에 사진과 항목이 이어진다 */
.vsec__grid{display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);align-items:start;gap:clamp(22px,3.4vw,64px);width:100%;max-width:1560px;margin-inline:auto}
/* 자식은 stretch 로 폭을 채워 글 왼쪽 끝선을 하나로 맞춘다(배지만 알약이라 예외) */
.vpanel{position:sticky;top:clamp(88px,13vh,148px);display:flex;flex-direction:column;align-items:stretch;gap:clamp(10px,1.3vw,18px);overflow:hidden;min-height:clamp(320px,36vw,520px);padding:clamp(24px,2.8vw,46px);border-radius:clamp(18px,2vw,28px);background:linear-gradient(158deg,#f5f2ee 0%,#efe7d8 46%,#e0d0ba 100%);box-shadow:var(--shadow)}
/* main 전역의 가운데 정렬(center floor)을 이 블록에서만 왼쪽으로 되돌린다.
   그 규칙은 p·h3 자신에게 직접 걸리므로 부모에 text-align 을 줘 봐야 상속값이라 진다 —
   .feat__head 가 쓰는 방식과 같게 자식 선택자로 되돌려야 한다.
   안 되돌리면 배지·제목(짧다)은 왼쪽에 붙고 소제목·리드(길다)만 가운데로 떠서 축이 어긋난다. */
.vpanel :where(p,h3){text-align:left}
.vpanel > *{position:relative;z-index:1}
.vpanel__badge{align-self:flex-start;margin:0 0 clamp(2px,.4vw,6px);padding:.5em 1.35em;border:1px solid var(--gold-line);border-radius:var(--radius-pill);background:rgba(255,255,255,.55);font-size:.78rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--accent-deep)}
.vpanel__title{margin:0;font-family:var(--font-serif);font-weight:800;font-size:clamp(2rem,1.3rem + 2.6vw,3.3rem);line-height:1.15;color:var(--mocha)}
/* 소제목과 리드는 제목에 딸린 한 덩어리로 읽혀야 한다 — 위 여백을 조금 더 주고
   두 문단 사이는 좁힌다. 줄 길이는 balance 가 고르게 나눈다(끝줄만 짧게 남지 않도록). */
.vpanel__sub{margin:clamp(4px,.7vw,10px) 0 0;max-width:20em;font-weight:700;font-size:clamp(1rem,.92rem + .4vw,1.22rem);line-height:1.55;color:var(--accent-deep);word-break:keep-all;text-wrap:balance}
.vpanel__lead{margin:calc(-1 * clamp(2px,.5vw,8px)) 0 0;max-width:26em;font-size:clamp(.86rem,.82rem + .2vw,.98rem);line-height:1.8;color:var(--ink-mute);word-break:keep-all;text-wrap:balance}
/* 카드 바닥에 깔리는 큰 워터마크 글자 */
.vpanel__mark{position:absolute;z-index:0;left:-.06em;bottom:-.12em;font-family:var(--font-serif);font-weight:800;font-size:clamp(3.4rem,8vw,6.6rem);letter-spacing:.03em;line-height:1;color:rgba(255,255,255,.5);white-space:nowrap;pointer-events:none}
.vlist{display:flex;flex-direction:column;gap:clamp(20px,2.6vw,40px)}
.vitem__fig{position:relative;margin:0;border-radius:clamp(14px,1.6vw,22px);overflow:hidden;box-shadow:var(--shadow-sm)}
.vitem__fig img{width:100%;height:auto;display:block}
.vitem__tag{position:absolute;top:clamp(10px,1.2vw,16px);left:clamp(10px,1.2vw,16px);padding:.42em 1.05em;border-radius:var(--radius-pill);background:rgba(251,247,239,.88);font-size:.76rem;font-weight:600;letter-spacing:.02em;color:var(--mocha)}
.vpoints{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:clamp(12px,1.6vw,22px)}
.vitem{padding:clamp(16px,1.8vw,26px) clamp(18px,2vw,30px);border:1px solid var(--line);border-radius:var(--radius);background:#fff;text-align:center}
.vitem__eyebrow{margin:0 0 .5em;font-family:var(--font-serif);font-weight:700;font-size:clamp(.78rem,.75rem + .14vw,.88rem);letter-spacing:.14em;text-transform:uppercase;color:var(--sand-deep)}
.vitem__title{margin:0;font-size:clamp(.92rem,.86rem + .3vw,1.08rem);font-weight:600;line-height:1.6;color:var(--mocha);word-break:keep-all;text-wrap:balance}
@media(max-width:900px){
  .vsec__grid{grid-template-columns:minmax(0,1fr)}
  .vpanel{position:static;min-height:0}
}

/* 서래소개 히어로 리드 — 한 문장을 두 줄로 앉힌다.
   기본 글 칸(880px)에 기본 크기(--fs-h3)면 네 줄이 되고 괄호 구절까지 찢어진다.
   이 페이지에서만 줄을 넓히고 글자를 줄였다. 끊는 자리는 balance 가 고르게 잡는다. */
body.p-about .hero__lead{max-width:none;width:min(1140px,calc(100vw - 2 * var(--gutter)));font-size:clamp(1rem,.88rem + .55vw,1.24rem);line-height:1.75;text-wrap:balance}

/* 히어로 글 칸(880px)보다 넓게 잡아 태그 다섯 개가 한 줄에 들어가게 한다.
   화면이 좁아지면 뷰포트 폭에 묶이고, 그보다 더 좁아지면 다음 줄로 접힌다. */
.btags{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(8px,1.1vw,14px);width:max-content;max-width:min(1160px,calc(100vw - 2 * var(--gutter)))}
.btags li{padding:.52em 1.1em;border:1px solid rgba(241,209,172,.42);border-radius:var(--radius-pill);color:var(--gold-soft);font-size:clamp(.78rem,.74rem + .18vw,.9rem);line-height:1.5;letter-spacing:.02em}

/* ==========================================================================
   눈성형 — 배너형 소개 (.ebanner) / 약속 섹션 (.promise)
   ========================================================================== */
/* 종이결 카드 위에 왼쪽 글 · 오른쪽 사진. 사진은 카드 오른쪽 끝까지 채운다. */
/* 참고 이미지와 같은 밝은 종이결 박스 — 왼쪽은 옅은 회백, 오른쪽으로 갈수록 따뜻한 베이지.
   구겨진 종이 느낌은 그레인 + 사선 결로 낸다. 모델 컷아웃이 위로 솟는다(--eb-pop). */
.ebanner{--eb-pad:clamp(26px,3.4vw,62px);--eb-pop:clamp(30px,8vw,150px);position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.58fr);align-items:center;gap:clamp(16px,2vw,32px);width:100%;max-width:calc(1680px - 8cm);margin-inline:auto;margin-top:var(--eb-pop);min-height:clamp(260px,26vw,430px);padding:var(--eb-pad);padding-right:0;overflow:visible;border-radius:clamp(20px,2.4vw,34px);background-color:#ece5db;background-image:linear-gradient(103deg,#f5f2ee 0%,#efe9e0 38%,#e3d5c3 72%,var(--eb-tint,#d9c6ad) 100%),repeating-linear-gradient(24deg,rgba(255,255,255,.5) 0 2px,rgba(160,140,118,.05) 2px 5px),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='b'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23b)' opacity='.07'/%3E%3C/svg%3E");background-blend-mode:normal,soft-light,normal;background-repeat:no-repeat,repeat,repeat;background-size:auto,auto,180px 180px;box-shadow:0 30px 60px -34px rgba(44,39,36,.4)}
.ebanner__text{position:relative;z-index:1;display:flex;flex-direction:column;align-items:flex-start;gap:clamp(12px,1.6vw,20px)}
.ebanner__text > *{text-align:left}
.ebanner__title{margin:0;font-family:var(--font-serif);font-weight:800;font-size:clamp(1.55rem,1.1rem + 2.1vw,2.6rem);line-height:1.25;color:var(--espresso);word-break:keep-all}
.ebanner__title em{font-style:normal;color:var(--accent-deep)}
.ebanner__title span{font-family:var(--font-body);font-weight:600;font-size:.46em;color:var(--mocha);letter-spacing:0}
.ebanner__lead{margin:0;font-size:clamp(.92rem,.86rem + .24vw,1.05rem);line-height:1.75;color:var(--mocha);word-break:keep-all}
.ebanner__lead b{color:var(--espresso);font-weight:700}
/* 한글 문구 "뒤"에 크게 깔리는 영문 워터마크 — 흐름 밖(absolute)이라 flex gap/높이에 영향이 없다.
   .ebanner 는 모델 컷아웃이 위로 솟아야 해서 overflow:visible 이 필수 → 워터마크 자신만 가둔다
   (left/right:0 로 글 칼럼 폭에 묶고, 넘치면 오른쪽 mask 로 부드럽게 사라진다). */
.ebanner__en{position:absolute;left:0;right:calc(-58% - clamp(16px,2vw,32px));top:50%;z-index:0;transform:translateY(-50%);margin:0;overflow:hidden;font-family:'Great Vibes',cursive;font-weight:400;font-size:clamp(2.8rem,1.4rem + 4.8vw,6.5rem);line-height:1.7;letter-spacing:.01em;text-align:left;white-space:nowrap;color:rgba(138,111,84,.14);-webkit-mask-image:linear-gradient(90deg,#000 88%,rgba(0,0,0,0) 100%);mask-image:linear-gradient(90deg,#000 88%,rgba(0,0,0,0) 100%);pointer-events:none;user-select:none}
/* 한글은 항상 워터마크 위 — 음수 z-index 없이 형제 순서로 해결한다 */
.ebanner__title,.ebanner__lead,.ebanner__tags{position:relative;z-index:1}
.ebanner__tags{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.ebanner__tags li{padding:9px clamp(14px,1.4vw,20px);border:1px solid var(--sand);border-radius:var(--radius-pill);background:rgba(255,255,255,.6);font-size:clamp(.78rem,.74rem + .16vw,.88rem);font-weight:600;color:var(--accent-deep);white-space:nowrap}
/* 컷아웃은 박스 바닥에 발을 딛고 위로 솟는다 — 배경이 없는 png/webp 라 잘림 없이 겹친다 */
.ebanner__media{position:relative;align-self:stretch;margin-block:calc(var(--eb-pad) * -1);z-index:2}
.ebanner__media img{position:absolute;right:clamp(0px,1vw,22px);bottom:0;height:calc(100% + var(--eb-pop));width:auto;max-width:none;object-fit:contain;object-position:bottom center;filter:drop-shadow(0 24px 34px rgba(44,39,36,.42))}
@media(max-width:820px){
  .ebanner{grid-template-columns:minmax(0,1fr);padding:clamp(22px,5vw,34px);gap:clamp(18px,3.4vw,26px);min-height:0}
  .ebanner__text{align-items:center}
  .ebanner__text > *{text-align:center}
  /* 모바일은 카드 안에 빈 공간이 없어 워터마크를 어디에 둬도 제목·태그와 겹친다.
     장식 요소(aria-hidden)이므로 한글 가독성을 택해 숨긴다. */
  .ebanner__en{display:none}
  /* 부제가 11px대로 작아져 읽기 어려웠다 — 모바일에서만 비율을 키운다 */
  .ebanner__title span{font-size:.58em}
  .ebanner__tags{justify-content:center}
  .ebanner__media{order:-1;align-self:auto;margin-block:0;height:clamp(230px,52vw,320px)}
  /* 데스크톱은 사진 아래를 카드 바닥에 붙여 직선 컷이 안 보이지만, 모바일은 카드 가운데에
     떠서 가슴께가 뚝 잘린 것처럼 보인다. 아래쪽을 부드럽게 사라지게 하고 사각 그림자도 없앤다. */
  .ebanner__media img{position:relative;right:auto;bottom:auto;height:100%;margin-inline:auto;display:block;filter:none;-webkit-mask-image:linear-gradient(180deg,#000 74%,rgba(0,0,0,0) 99%);mask-image:linear-gradient(180deg,#000 74%,rgba(0,0,0,0) 99%)}
/* 소개 띠는 사이트를 묶는 아이보리 크림이라 모양·구성은 그대로 두고,
   카드 오른쪽 끝 색만 그 페이지 헤더 배너의 색조를 아주 옅게 받는다(2026-08-20).
   기본값(#d9c6ad)에서 한 톤 안쪽이라 나란히 놓고 봐야 차이가 보이는 정도다 —
   더 벌리면 페이지끼리 남는 공통분모가 없어진다. */
body.p-lift    .ebanner{--eb-tint:#d3c2ac}
body.p-stem    .ebanner{--eb-tint:#d3c3c4}
body.p-fat     .ebanner{--eb-tint:#dfc5a2}
body.p-petit   .ebanner{--eb-tint:#d6cbc0}
body.p-removal .ebanner{--eb-tint:#cfc9c0}
body.p-trauma  .ebanner{--eb-tint:#d2cdc3}
}

/* 왼쪽 제목 + 오른쪽 시스템 카드 3장 */
.promise{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,2fr);gap:clamp(28px,3.6vw,64px);align-items:center;width:100%;max-width:1680px;margin-inline:auto}
.promise__side{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:clamp(10px,1.4vw,16px)}
/* 제목 뒤에 옅게 깔리는 워터마크 */
.promise__side::before{content:"Seorae";position:absolute;left:-.04em;top:-.42em;font-family:var(--font-serif);font-weight:800;font-size:clamp(3rem,2rem + 3vw,5.4rem);line-height:1;color:rgba(107,82,56,.07);white-space:nowrap;pointer-events:none}
.promise__side > *{position:relative;text-align:left}
.promise__list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.8vw,24px)}
/* 카드마다 다른 파스텔 — 배경/글자/테두리를 --pc-* 로 묶어 한 곳에서 관리한다 */
.promise__item{display:flex;flex-direction:column;align-items:center;gap:clamp(10px,1.2vw,16px);padding:clamp(24px,2.6vw,38px) clamp(16px,1.8vw,26px);border-radius:var(--radius-lg);background:var(--pc-bg);border:1px solid var(--pc-line);box-shadow:0 18px 36px -24px rgba(44,39,36,.4)}
.promise__item--a{--pc-bg:#dbe7ef;--pc-line:#c2d6e3;--pc-ink:#2f5f80}
.promise__item--b{--pc-bg:#dcecdf;--pc-line:#c3ddc9;--pc-ink:#356047}
.promise__item--c{--pc-bg:#fadfcb;--pc-line:#f0cbb0;--pc-ink:#8f5227}
.promise__ico{display:flex;align-items:center;justify-content:center;width:clamp(46px,4.4vw,56px);height:clamp(46px,4.4vw,56px);border-radius:14px;background:#fff;border:1px solid var(--pc-line);color:var(--pc-ink);flex:none}
.promise__ico svg{width:clamp(22px,2.2vw,26px);height:clamp(22px,2.2vw,26px);fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.promise__title{margin:0;font-family:var(--font-serif);font-weight:700;font-size:clamp(1rem,.92rem + .4vw,1.18rem);line-height:1.4;color:var(--pc-ink)}
.promise__desc{margin:0;font-size:clamp(.85rem,.82rem + .14vw,.93rem);line-height:1.75;color:#4a423d;word-break:keep-all}
/* 글자 20% 확대에 따른 조정 — 기준폭 980px → 1460px.
   제목의 가장 긴 낱말 '서래성형외과의'(줄바꿈 불가)가 47px→56px 글자에서 381px 가 되어
   왼쪽 칸(1440px 화면에서 381px)을 넘어 카드와 겹쳤다. 그 아래는 세로로 세운다.
   칸 비율을 늘려 2단을 유지하는 방법도 있으나 카드가 171px 까지 좁아져 글이 6줄로 접힌다 */
@media(max-width:1460px){
  .promise{grid-template-columns:minmax(0,1fr);gap:clamp(24px,4vw,36px)}
  .promise__side{align-items:center}
  .promise__side > *{text-align:center}
  .promise__side::before{left:50%;transform:translateX(-50%)}
}
@media(max-width:640px){.promise__list{grid-template-columns:minmax(0,1fr);max-width:420px;margin-inline:auto}}

/* ==========================================================================
   섹션 머리말 전용 섹션 · 문단 간격  (2026-08-14)
   거상 페이지에서 'Why Lifting' 을 프로모 띠 아래로 옮기며 정리한 규칙.
   ========================================================================== */

/* 머리말만 있는 섹션이 바로 아래 대표 항목 카드(featsec)를 이끌 때.
   섹션 아래 여백과 featsec 위 여백이 겹쳐 머리말이 붕 떠 보이므로 아래를 줄인다 */
.sec--head{padding-bottom:clamp(22px,2.8vw,38px)}

/* 머리말 안에 설명 문단이 둘 이상일 때 — .sec__head 의 gap(12px)만으로는
   문단 사이가 줄바꿈처럼 붙어 보인다 */
.sec__head .lead + .lead{margin-top:var(--space-2)}

/* ==========================================================================
   본문 바로가기 — 키보드로 들어온 사람이 헤더 메뉴 13개를 지나지 않게 한다.
   평소에는 화면 밖에 두고 포커스를 받을 때만 왼쪽 위로 내려온다.
   ========================================================================== */
.skip{position:fixed;top:0;left:0;z-index:2000;transform:translateY(-120%);
  padding:12px 20px;background:var(--mocha);color:var(--on-mocha);
  font-weight:700;font-size:.95rem;border-radius:0 0 var(--radius-sm) 0;
  transition:transform var(--dur-1) var(--ease)}
.skip:focus{transform:none}

/* ==========================================================================
   진료분야 카드의 '이런 분께 · 진행 과정' — 한 줄 설명만으로는 어떤 진료인지
   알 수 없어서 덧붙였다. 카드가 길어지지 않게 글자를 한 단계 줄인다.
   ========================================================================== */
/* 카드가 <a> 안이라 이 구간은 목록 태그 대신 span 으로 짠다 — 주변 마크업과 같은 방식 */
.svc__facts{display:grid;gap:var(--space-2);width:100%;
  margin-top:clamp(12px,1.2vw,18px)}
.svc__fact{display:grid;grid-template-columns:5.4em 1fr;gap:var(--space-3);
  font-size:clamp(.82rem,.78rem + .16vw,.9rem);line-height:1.72;
  color:var(--ink-mute);word-break:keep-all;text-align:left}
.svc__fact b{font-weight:700;color:var(--accent-deep);letter-spacing:.02em}
@media(max-width:720px){
  .svc__fact{grid-template-columns:1fr;gap:2px}
  .svc__fact b{font-size:.78rem}
}