/* 자연산한의원 — 공용 스타일 (멀티페이지) · 리디자인 규격 v1.0
   기준: 상세 기획서(컨테이너 1160 · 간격 120/96/64 · 4색 배경 · 타이포 H1>H2>H3 · 이미지 슬롯 비움) */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,300;9..144,400;9..144,500&family=Nanum+Myeongjo:wght@400;700&display=swap');

:root{
  /* palette (오프팔레트 제거 · 4색 배경 체계) */
  --cream:#f8f6f2; --paper:#fffdf9; --teal:#284849; --teal-soft:#3a5a5b;
  --mint:#ebf2f0; --mint2:#dde9e5; --warm:#faf3e8; --sand:#eadec8; --sand2:#eadec8;
  --line:rgba(40,72,73,.14); --muted:#5f7273; --warn:#b1471f;
  --serif:"Fraunces","Nanum Myeongjo",serif;
  --sans:"Pretendard",-apple-system,system-ui,sans-serif;
  /* layout */
  --maxw:1160px; --gutter:24px;
  /* 수직 리듬 3토큰 (Desktop→Mobile 자동) */
  --sp-l:clamp(64px,9vw,120px);
  --sp-m:clamp(56px,7vw,96px);
  --sp-s:clamp(40px,5vw,64px);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--sans);background:var(--cream);color:var(--teal);
  line-height:1.7;-webkit-font-smoothing:antialiased;letter-spacing:-.01em}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter)}
.serif{font-family:var(--serif);font-weight:400;letter-spacing:-.015em;line-height:1.15}

/* ===== 이미지 슬롯(비움) — 모든 <img> 자리를 규격 유지한 빈 플레이스홀더로 =====
   기본: 부모를 꽉 채움 / 컨텍스트별 비율 지정 */
.imgph{width:100%;height:100%;background:
    repeating-linear-gradient(45deg,var(--mint) 0 14px,var(--mint2) 14px 28px);
  color:var(--teal-soft);display:flex;align-items:center;justify-content:center;
  text-align:center;font-size:12px;letter-spacing:.06em;padding:14px;
  border:1px dashed rgba(40,72,73,.28);border-radius:inherit}
.imgph::after{content:attr(data-label)}
/* 절대채움 컨텍스트(부모가 position·높이 보유) */
.media-col .imgph,.hf-bg .imgph,.sband-bg .imgph,.story-media:not(.contain) .imgph,
.reco-band .rb-media .imgph,.why-bg .imgph{position:absolute;inset:0;border:none;border-radius:0}
/* 인플로우 비율 컨텍스트 */
.pic .imgph{aspect-ratio:4/3}
.posterframe .imgph{aspect-ratio:3/4}
.ccard .top .imgph{height:100%;border:none;border-radius:0}
.sc-media .imgph,.tc-media .imgph{border:none;border-radius:0}
.eye-cards figure .imgph{aspect-ratio:4/3;border:none;border-radius:0}
.story-media.contain .imgph{max-width:470px;aspect-ratio:4/3;border-radius:16px}
.cs-map .imgph{aspect-ratio:4/3;border-radius:14px}
.doc-banner .imgph{aspect-ratio:16/6}
.eyehero .imgph{aspect-ratio:16/9}
.reco-band.overlay .imgph{aspect-ratio:16/9}
.gallery-grid .imgph{aspect-ratio:3/4;margin:0 0 18px;border-radius:14px;break-inside:avoid}

/* buttons */
.pill{display:inline-flex;align-items:center;gap:9px;background:var(--teal);color:#fff;
  padding:15px 30px;border-radius:100px;font-weight:600;font-size:15px;border:1.5px solid var(--teal);
  transition:.25s;cursor:pointer;white-space:nowrap}
.pill:hover{background:#1c3536;border-color:#1c3536;transform:translateY(-2px)}
.pill.light{background:#fff;color:var(--teal);border-color:#fff}
.pill.light:hover{background:var(--warm)}
.pill.ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.55)}
.pill.ghost:hover{background:rgba(255,255,255,.12);transform:translateY(-2px)}
.pill.ghost-dark{background:transparent;color:var(--teal);border-color:var(--teal)}
.pill.ghost-dark:hover{background:var(--teal);color:#fff}
.pill.kakao{background:#FEE500;color:#3a2929;border-color:#FEE500}
.pill.kakao:hover{background:#f4d800;border-color:#f4d800}

/* announcement */
.announce{background:var(--mint2);color:var(--teal);text-align:center;font-size:14px;
  display:flex;gap:18px;align-items:center;justify-content:center;padding:11px 20px;flex-wrap:wrap}
.announce a{text-decoration:underline;text-underline-offset:3px;font-weight:600}

/* nav — 고정 상단 64px, 브랜드 teal */
header.nav{background:var(--teal);position:sticky;top:0;z-index:50}
.nav .row{display:flex;align-items:center;justify-content:space-between;height:64px}
.nav .left{display:flex;align-items:center;gap:26px}
.burger{display:none;flex-direction:column;gap:5px;cursor:pointer}
.burger span{width:24px;height:2px;background:#fff;border-radius:2px}
.logo{font-family:var(--serif);font-weight:400;color:#fff;font-size:22px;letter-spacing:.02em}
.nav-links{display:flex;gap:20px;color:#dfeae6;font-size:14.5px;font-weight:500;white-space:nowrap}
@media(max-width:1180px){.nav-links{gap:15px;font-size:13.5px}}
.nav-links a{position:relative;padding:4px 0}
.nav-links a:hover{color:#fff}
.nav-links a.active{color:#fff}
.nav-links a.active::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:2px;background:var(--sand)}
@media(max-width:900px){
  .burger{display:flex}
  .nav-links{position:absolute;top:64px;left:0;right:0;background:var(--teal);flex-direction:column;
    gap:0;padding:8px 0;display:none;box-shadow:0 12px 24px rgba(0,0,0,.2)}
  .nav-links.open{display:flex}
  .nav-links a{padding:14px 24px;border-top:1px solid rgba(255,255,255,.08)}
}

/* ===== generic section — 표준 리듬 sp-m ===== */
section{padding:var(--sp-m) 0}
.eyebrow{font-size:13px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--teal-soft);margin-bottom:16px}
/* 타이포 스케일 — H1 > H2 > H3 고정 */
h2.big{font-size:clamp(28px,3.6vw,40px);color:var(--teal)}
.lead{font-size:18px;color:var(--muted);max-width:660px;line-height:1.75}

/* 섹션별 리듬 배정 */
.impact-split{padding:var(--sp-l) 0}
.band{padding:var(--sp-l) 0}
.qband{padding:var(--sp-s) 0}
.dark-intro{padding:var(--sp-l) 0}
.statband{padding:var(--sp-l) 0}
.finalcta{padding:var(--sp-l) 0}
.doc-intro{padding:var(--sp-l) 0 var(--sp-m)}
.consult-block{padding:var(--sp-m) 0}
.cs-block{padding:var(--sp-m) 0}
.page-hero{padding:var(--sp-m) 0}
.eye-block{padding:var(--sp-m) 0}
.specbar{padding:clamp(24px,4vw,36px) 0}

/* home hero */
.hero{background:linear-gradient(120deg,var(--mint) 0%,var(--cream) 70%);position:relative;overflow:hidden;padding:0}
.hero .grid{display:grid;grid-template-columns:1.05fr .95fr;gap:32px;align-items:center;min-height:600px;padding:60px 0}
.hero h1{font-family:var(--serif);font-weight:400;font-size:clamp(40px,6vw,60px);color:var(--teal);line-height:1.12}
.hero .tagline{font-family:var(--serif);font-style:italic;font-size:18px;color:var(--teal-soft);margin-bottom:14px}
.hero .sub{font-size:19px;color:var(--teal-soft);max-width:470px;margin:22px 0 34px;line-height:1.6}
@media(max-width:820px){.hero .grid{grid-template-columns:1fr;gap:30px;min-height:auto}.hero .posterframe{order:-1}}

/* inner page hero */
.page-hero{background:var(--cream);border-bottom:1px solid var(--line)}
.page-hero .eyebrow{margin-bottom:14px}
.page-hero h1{font-family:var(--serif);font-weight:400;font-size:clamp(32px,5vw,48px);color:var(--teal);line-height:1.12}
.page-hero p{color:var(--muted);font-size:18px;margin-top:18px;max-width:660px}

/* split */
.split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
@media(max-width:820px){.split{grid-template-columns:1fr;gap:36px}}

/* stat band (3무) */
.statband{background:var(--teal);color:#eef3f0;text-align:center}
.statband .big3{font-family:var(--serif);font-weight:300;font-size:clamp(64px,11vw,132px);line-height:1;color:#fff}
.statband .cap{font-size:19px;color:#c4d6d1;max-width:640px;margin:22px auto 0}
.statband .three{display:flex;gap:40px;justify-content:center;flex-wrap:wrap;margin-top:40px}
.statband .three span{font-size:17px;color:#dfeae6;font-weight:500}

/* poster frame (빈 슬롯 유지) */
.posterframe{border-radius:16px;overflow:hidden;border:1px solid var(--line);box-shadow:0 14px 34px rgba(40,72,73,.08);background:var(--cream)}

/* treatment / condition cards */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:48px}
@media(max-width:820px){.cards{grid-template-columns:1fr}}
.ccard{background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden;transition:.25s;display:block}
.ccard:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(40,72,73,.1)}
.ccard .top{height:200px;overflow:hidden}
.ccard .body{padding:24px 26px 30px}
.ccard h3{font-family:var(--serif);font-weight:500;font-size:22px;margin-bottom:8px;display:flex;align-items:center;justify-content:space-between;color:var(--teal)}
.ccard h3 .arrow{color:var(--teal-soft);font-weight:400}
.ccard p{color:var(--muted);font-size:14.5px}

/* gallery / reveal */
.disclaimer{font-size:13px;color:var(--muted);margin:14px 0 20px;max-width:760px}
.gallery-grid{columns:3;column-gap:18px}
@media(max-width:820px){.gallery-grid{columns:2}}
@media(max-width:520px){.gallery-grid{columns:1}}

/* treatment detail block */
.tblock{display:grid;grid-template-columns:.9fr 1.1fr;gap:56px;align-items:center;padding:var(--sp-m) 0;border-bottom:1px solid var(--line)}
.tblock:nth-child(even){direction:rtl}
.tblock:nth-child(even)>*{direction:ltr}
@media(max-width:820px){.tblock{grid-template-columns:1fr;gap:28px}}
.tblock .pic{border-radius:16px;overflow:hidden;box-shadow:0 14px 34px rgba(40,72,73,.08)}
.tblock h3{font-family:var(--serif);font-weight:500;font-size:clamp(24px,3vw,30px);margin-bottom:16px;line-height:1.2;color:var(--teal)}
.tblock p{color:var(--muted);font-size:16px;margin-bottom:14px}
.tblock .tag{font-size:13px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--teal-soft);margin-bottom:12px}

/* info / location */
.infocard{background:#fff;border:1px solid var(--line);border-radius:16px;padding:32px 34px}
.infocard h3{font-family:var(--serif);font-weight:500;font-size:22px;margin-bottom:18px;color:var(--teal)}
.infocard .row2{display:flex;justify-content:space-between;padding:11px 0;border-bottom:1px solid var(--line);font-size:15px}
.infocard .row2:last-child{border-bottom:none}
.infocard .row2 b{color:var(--teal)}
.mapbox{border-radius:16px;overflow:hidden;border:1px solid var(--line);min-height:340px}
.mapbox iframe{width:100%;height:100%;min-height:340px;border:0}

/* final cta */
.finalcta{background:var(--mint);text-align:center}
.finalcta h2{margin-bottom:26px}

/* 진료과목 상세 — 이미지 좌측 + 정보 2단 히어로 */
.hero-split{background:var(--warm);border-bottom:1px solid var(--line);padding:0;position:relative}
.hero-split .grid{display:grid;grid-template-columns:1.05fr 1fr;gap:0;align-items:stretch;min-height:600px}
@media(max-width:960px){.hero-split .grid{grid-template-columns:1fr;min-height:auto}}
.hero-split .media-col{position:relative;overflow:hidden;min-height:460px}
.hero-split .content-col{display:flex;flex-direction:column;justify-content:center;padding:56px 48px}
@media(max-width:960px){.hero-split .content-col{padding:44px 24px}}
.hero-split .brand-kicker{font-family:var(--serif);font-weight:400;font-size:20px;color:var(--teal-soft);margin-bottom:8px}
.hero-split h1{font-family:var(--serif);font-weight:400;font-size:clamp(30px,3.6vw,44px);color:var(--teal);line-height:1.15}
.hero-split .sub{color:var(--muted);font-size:16px;margin-top:10px}
.info-cols{display:grid;grid-template-columns:1fr 1.3fr;gap:32px;margin-top:38px}
@media(max-width:560px){.info-cols{grid-template-columns:1fr}}
.info-cols h4{font-size:15px;font-weight:700;color:var(--teal);margin-bottom:16px;letter-spacing:.02em}
.spec-row{display:flex;justify-content:space-between;gap:10px;padding:10px 0;border-bottom:1px solid var(--line);font-size:14.5px}
.spec-row:last-child{border-bottom:none}
.spec-row b{color:var(--teal-soft);font-weight:600}
.spec-row span{color:var(--teal);font-weight:600;text-align:right}
.case-row{display:flex;gap:12px;padding:9px 0;font-size:14px;align-items:baseline}
.case-row .case-tag{flex:none;font-weight:700;color:var(--teal);font-size:13px;letter-spacing:.04em;background:var(--mint);padding:3px 9px;border-radius:6px}
.case-row p{color:var(--muted);margin:0;line-height:1.5}

/* 임팩트 헤드라인(좌) + 상세설명(우) */
.impact-split{background:var(--cream)}
.impact-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:56px;align-items:start}
@media(max-width:820px){.impact-grid{grid-template-columns:1fr;gap:24px}.impact-right{margin-top:0!important}}
.impact-left .line-sm{font-family:var(--serif);font-weight:400;font-size:clamp(28px,4vw,40px);color:var(--teal-soft);line-height:1.15}
.impact-left .line-sm.accent{color:var(--teal)}
.impact-left h2{font-family:var(--serif);font-weight:400;font-size:clamp(28px,4vw,40px);color:var(--teal);line-height:1.15;margin-top:6px}
.impact-right{margin-top:var(--sp-m)}
.impact-right p{color:var(--muted);font-size:16px;line-height:1.7;margin-bottom:18px}
.impact-right p:last-child{margin-bottom:0}
.impact-right b{color:var(--teal)}

/* 넘버링 스토리 블록 (이미지+번호+헤드라인+설명, 배경 교차) */
.story-block{padding:0;background:var(--cream)}
.story-grid{display:grid;grid-template-columns:1fr 1fr;min-height:560px;align-items:stretch}
@media(max-width:820px){.story-grid{grid-template-columns:1fr}}
.story-media{position:relative;overflow:hidden;min-height:340px}
.story-media.contain{display:flex;align-items:center;justify-content:center;padding:40px;overflow:visible}
.story-content{display:flex;flex-direction:column;justify-content:center;padding:var(--sp-m) 64px}
@media(max-width:820px){.story-content{padding:44px 24px}}
.story-num{font-family:var(--serif);font-size:16px;color:var(--teal-soft);margin-bottom:10px}
.story-content h3{font-family:var(--serif);font-weight:500;font-size:clamp(24px,3vw,32px);color:var(--teal);line-height:1.2;margin-bottom:18px}
.story-content p{color:var(--muted);font-size:16px;line-height:1.7;max-width:440px}
.story-block.warm{background:var(--warm)}
.story-block.dark{background:var(--teal)}
.story-block.dark .story-num{color:#9fbdb6}
.story-block.dark .story-content h3{color:#fff}
.story-block.dark .story-content p{color:#c4d6d1}

/* 와이드 풀블리드 배너형 스토리 (사진+글자 한 배경 위) */
.story-band{position:relative;min-height:560px;display:flex;align-items:center;overflow:hidden;background:var(--warm)}
.story-band .sband-bg{position:absolute;left:0;top:0;width:55%;height:100%}
.story-band .sband-content{position:relative;z-index:2;width:100%;padding:0 64px;margin-left:56%}
@media(max-width:820px){.story-band{min-height:auto;padding:0 0 40px;align-items:flex-start;flex-direction:column}
  .story-band .sband-bg{position:relative;left:auto;top:auto;width:100%;height:56vw;max-height:420px}
  .story-band .sband-content{margin-left:0;padding:32px 24px}}
.story-band .story-num{font-family:var(--serif);font-size:16px;color:var(--teal-soft);margin-bottom:10px}
.story-band h3{font-family:var(--serif);font-weight:500;font-size:clamp(24px,3vw,32px);color:var(--teal);line-height:1.2;margin-bottom:18px}
.story-band p{color:var(--muted);font-size:16px;line-height:1.7;max-width:440px}
.story-band.dark{background:var(--teal)}
.story-band.dark .story-num{color:#9fbdb6}
.story-band.dark h3{color:#fff}
.story-band.dark p{color:#c4d6d1}

/* 눈매 히어로 — 풀블리드 16:9 위 텍스트 오버레이 */
.eyehero{position:relative;background:var(--cream);overflow:hidden;padding:0}
.eyehero-text{position:absolute;top:50%;left:58%;right:5%;transform:translateY(-50%)}
.eyehero.textleft .eyehero-text{left:5%;right:58%}
.eyehero .story-num{font-family:var(--serif);font-size:clamp(15px,1.5vw,20px);color:var(--teal-soft);margin-bottom:12px}
.eyehero h3{font-family:var(--serif);font-weight:500;font-size:clamp(24px,3.4vw,40px);color:var(--teal);line-height:1.2;margin-bottom:20px}
.eyehero p{color:var(--muted);font-size:clamp(14px,1.15vw,17px);line-height:1.75;max-width:460px}
.eyehero.grey{background:var(--teal)}
.eyehero.grey .story-num{color:#9fbdb6}
.eyehero.grey h3{color:#fff}
.eyehero.grey p{color:#c4d6d1}
@media(max-width:820px){
  .eyehero .imgph{aspect-ratio:16/10}
  .eyehero-text{position:static;transform:none;padding:22px 24px 40px;left:auto;right:auto}
  .eyehero p{max-width:none}
}

/* 눈매 비대칭 — 좌측 텍스트 + 우측 눈 케이스 3컷 */
.eye-block{background:var(--mint);display:flex;align-items:center}
.eye-block>.wrap{width:100%}
.eye-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:56px;align-items:center}
@media(max-width:900px){.eye-grid{grid-template-columns:1fr;gap:36px}}
.eye-text .story-num{font-family:var(--serif);font-size:16px;color:var(--teal-soft);margin-bottom:10px}
.eye-text h3{font-family:var(--serif);font-weight:500;font-size:clamp(24px,3vw,32px);color:var(--teal);line-height:1.2;margin-bottom:18px}
.eye-text p{color:var(--muted);font-size:16px;line-height:1.7;max-width:420px}
.eye-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:0;box-shadow:0 18px 40px rgba(40,72,73,.10);border-radius:12px;overflow:hidden}
@media(max-width:560px){.eye-cards{grid-template-columns:1fr}}
.eye-cards figure{background:#fff;overflow:hidden;border-right:1px solid rgba(40,72,73,.10)}
.eye-cards figure:last-child{border-right:none}
.eye-cards figcaption{background:var(--mint);padding:16px 18px 20px;font-weight:700;color:var(--teal);font-size:16px}
.eye-cards figcaption span{display:block;margin-top:6px;font-weight:400;font-size:13.5px;color:var(--muted);line-height:1.5}

/* 공통 풋터 (teal + 워드마크) */
.site-footer{position:relative;background:var(--teal) url('images/gen_footer_bg.png') center/cover no-repeat;color:#eef3f0;padding:56px 0 26px;overflow:hidden}
.site-footer::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,34,34,.72) 0%,rgba(20,34,34,.84) 100%)}
.site-footer .wrap{position:relative;z-index:2}
.site-footer .flinks{display:flex;flex-wrap:wrap;gap:10px 28px;font-size:14px;padding-bottom:28px;border-bottom:1px solid rgba(255,255,255,.2)}
.site-footer .flinks a:hover{color:#fff;text-decoration:underline}
.site-footer .finfo{padding:24px 0 8px;font-size:13.5px;color:#cddbd6;line-height:2}
.site-footer .fword{font-family:var(--serif);font-weight:400;font-size:clamp(20px,2.4vw,30px);color:rgba(255,255,255,.6);letter-spacing:.10em;line-height:1;margin-top:18px;user-select:none}
.site-footer .fcopy{margin-top:20px;padding-top:16px;border-top:1px solid rgba(255,255,255,.15);font-size:12px;color:#9fbdb6;letter-spacing:.02em}

/* 다크 인트로 (병원소개 히어로+철학) */
.dark-intro{background:var(--warm);color:var(--teal);position:relative;overflow:hidden}
.dark-intro .lead-line{font-size:19px;color:var(--teal-soft);margin-bottom:10px}
.dark-intro h1{font-family:var(--serif);font-weight:400;font-size:clamp(32px,5vw,52px);color:var(--teal);line-height:1.15}
.dark-intro .body{margin-top:32px;max-width:580px;position:relative;z-index:2}
.dark-intro .body p{color:var(--muted);font-size:16px;line-height:1.8;margin-bottom:18px}

/* 풀블리드 다크 배너 (원장 소개) — 이미지 비움 시 teal 바탕 */
.doctor-banner{position:relative;background:var(--teal);min-height:560px;display:flex;align-items:center;padding:80px 0}
.doctor-banner .overlay{position:relative;z-index:2;width:100%}
.doctor-banner .overlay .inner{max-width:460px;padding:0 24px}
@media(min-width:640px){.doctor-banner .overlay .inner{padding:0 48px}}
.doctor-banner .eyebrow{color:#9fbdb6}
.doctor-banner h2{font-family:var(--serif);font-weight:400;color:#fff;font-size:clamp(26px,3.6vw,44px);line-height:1.15;margin-top:8px}
.doctor-banner p{color:#e3e0da;font-size:15.5px;line-height:1.7;margin-top:16px;max-width:420px}

/* 자가진단 / 체크리스트 */
.checklist{display:flex;flex-direction:column;gap:14px;margin-top:24px}
.checklist li{display:flex;gap:14px;align-items:flex-start;list-style:none;font-size:16px;color:var(--teal)}
.checklist li::before{content:"✓";flex:none;width:26px;height:26px;border-radius:50%;background:var(--teal);
  color:#fff;font-size:13px;display:flex;align-items:center;justify-content:center;margin-top:2px}
.checklist.warn li::before{content:"!";background:var(--warn)}
.checklist.compact{gap:9px;margin-top:16px}
.checklist.compact li{font-size:14.5px}
.checklist.compact li::before{width:20px;height:20px;font-size:11px}

/* 비교표 */
.cmp-table{width:100%;border-collapse:collapse;margin-top:28px;background:#fff;border-radius:12px;
  overflow:hidden;box-shadow:0 14px 34px rgba(40,72,73,.06)}
.cmp-table th,.cmp-table td{padding:16px 18px;text-align:left;border-bottom:1px solid var(--line);font-size:14.5px}
.cmp-table thead th{background:var(--teal);color:#fff;font-weight:600;font-size:13.5px}
.cmp-table tbody tr:last-child td{border-bottom:none}
.cmp-table tbody tr.highlight td{background:var(--mint)}
.cmp-table tbody tr.highlight td:first-child{font-weight:700;color:var(--teal)}
.cmp-table .ok{color:#2f7d5b;font-weight:700}
.cmp-table .mid{color:#a5702a;font-weight:700}
.cmp-table .no{color:var(--warn);font-weight:700}
.tablewrap{overflow-x:auto}

/* 원인/비교 2분할 카드 */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:30px}
@media(max-width:820px){.duo{grid-template-columns:1fr}}
.duocard{background:#fff;border:1px solid var(--line);border-radius:16px;padding:30px 28px}
.duocard.accent{background:var(--teal);border-color:var(--teal)}
.duocard.accent *{color:#fff !important}
.duocard .k{font-size:13px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--teal-soft);margin-bottom:10px}
.duocard h3{font-family:var(--serif);font-weight:500;font-size:24px;margin-bottom:12px;color:var(--teal)}
.duocard p{color:var(--muted);font-size:15px}
.duo.compact{gap:14px}
.duo.compact .duocard{padding:22px 24px;border-radius:16px}
.duo.compact .duocard .k{font-size:11.5px;margin-bottom:7px}
.duo.compact .duocard h3{font-size:20px;margin-bottom:8px}
.duo.compact .duocard p{font-size:14.5px;line-height:1.6}

/* reveal-on-scroll */
.rv{opacity:0;transform:translateY(24px);transition:.7s cubic-bezier(.2,.7,.2,1)}
.rv.in{opacity:1;transform:none}

/* ① 풀블리드 다크 히어로 (서비스 상세) */
.hero-full{position:relative;background:var(--warm);min-height:500px;display:flex;align-items:center;overflow:hidden}
.hero-full .hf-bg{position:absolute;top:0;right:0;bottom:0;left:46%;z-index:0}
.hero-full .hf-bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,var(--warm) 0%,rgba(250,243,232,.6) 22%,rgba(250,243,232,0) 58%)}
.hero-full .wrap{position:relative;z-index:2;width:100%}
.hero-full .hf-kicker{font-family:var(--serif);font-weight:400;font-size:clamp(17px,1.8vw,22px);color:var(--teal-soft);margin-bottom:6px}
.hero-full h1{font-family:var(--serif);font-weight:400;font-size:clamp(34px,5vw,52px);color:var(--teal);line-height:1.1}
.hero-full .hf-sub{color:var(--muted);font-size:clamp(15px,1.6vw,18px);margin-top:16px;max-width:440px;line-height:1.65}
@media(max-width:820px){
  .hero-full{display:block;min-height:auto}
  .hero-full .hf-bg{position:relative;left:0;height:240px}
  .hero-full .hf-bg::after{display:none}
  .hero-full .wrap{padding-top:30px;padding-bottom:36px}
  .hero-full .hf-sub{max-width:none}
}
.hero-full.hp-hip{background:linear-gradient(90deg,#faf3e8 0%,#faf3e8 36%,rgb(41,72,74) 46%,rgb(41,72,74) 100%)}
.hero-full.hp-hip .hf-bg img{object-position:center}
.hero-full.hp-hip .hf-bg::after{background:none}
@media(max-width:820px){.hero-full.hp-hip{background:var(--warm)}}
@media(max-width:820px){.hero-full.hp-hip .hf-bg::after{display:none}}
.hero-full .hf-mark{position:absolute;right:4vw;bottom:8%;z-index:1;font-family:var(--serif);font-weight:300;
  font-size:clamp(58px,9vw,128px);line-height:.92;color:rgba(255,255,255,.13);text-align:right;letter-spacing:-.02em;pointer-events:none}
@media(max-width:820px){.hero-full .hf-mark{display:none}}
.hero-full.flip .hf-bg::after{background:linear-gradient(90deg,rgba(28,48,49,0) 0%,rgba(28,48,49,.15) 34%,rgba(28,48,49,.80) 66%,rgba(28,48,49,.94) 100%)}
.hero-full.flip .wrap{text-align:right}
.hero-full.flip .hf-sub{margin-left:auto}
.hero-full.flip .hf-mark{left:4vw;right:auto}
@media(max-width:820px){
  .hero-full.flip .hf-bg::after{background:linear-gradient(180deg,rgba(28,48,49,.45) 0%,rgba(28,48,49,.92) 66%)}
  .hero-full.flip .wrap{text-align:left}
  .hero-full.flip .hf-sub{margin-left:0}
}

/* ② 시술정보 스펙바 */
.specbar{background:var(--warm);border-bottom:1px solid var(--line)}
.specbar .sb-grid{display:grid;grid-template-columns:180px 1fr;gap:28px;align-items:center}
@media(max-width:900px){.specbar .sb-grid{grid-template-columns:1fr;gap:20px}}
.specbar .sb-label{font-family:var(--serif);font-weight:400;font-size:15px;letter-spacing:.14em;color:var(--teal);line-height:1.5}
.specbar .sb-items{display:grid;grid-template-columns:repeat(6,1fr)}
@media(max-width:900px){.specbar .sb-items{grid-template-columns:repeat(3,1fr);row-gap:22px}}
@media(max-width:520px){.specbar .sb-items{grid-template-columns:repeat(2,1fr)}}
.specbar .sb-item{text-align:center;padding:2px 10px;border-left:1px solid rgba(40,72,73,.18)}
.specbar .sb-item:first-child{border-left:none}
@media(max-width:900px){.specbar .sb-item:nth-child(3n+1){border-left:none}}
@media(max-width:520px){.specbar .sb-item:nth-child(odd){border-left:none}
  .specbar .sb-item:nth-child(3n+1){border-left:1px solid rgba(40,72,73,.18)}
  .specbar .sb-item:nth-child(2n+1){border-left:none}}
.specbar .sb-item b{display:block;font-size:13.5px;font-weight:700;color:var(--teal);margin-bottom:5px}
.specbar .sb-item span{display:block;font-size:12.5px;color:var(--teal-soft);line-height:1.45}

/* ③ 질문 밴드 */
.qband{background:var(--teal);color:#fff;text-align:center}
.qband h2{font-family:var(--serif);font-weight:400;font-size:clamp(26px,3.4vw,38px);line-height:1.3;color:#fff}
.qband p{color:#9fbdb6;font-size:15px;margin-top:12px}

/* ④ STEP 4열 카드 */
.stepcards{display:grid;grid-template-columns:repeat(4,1fr);gap:26px;margin-top:48px}
@media(max-width:900px){.stepcards{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.stepcards{grid-template-columns:1fr}}
.stepcards.three{grid-template-columns:repeat(3,1fr)}
@media(max-width:900px){.stepcards.three{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.stepcards.three{grid-template-columns:1fr}}
.stepcard .sc-media{background:var(--mint);border-radius:12px;aspect-ratio:4/3;overflow:hidden;margin-bottom:16px}
.stepcard .sc-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.stepcard .sc-head h4{font-size:16px;font-weight:700;color:var(--teal)}
.stepcard .sc-head .stepno{font-family:var(--serif);font-size:13px;font-weight:400;letter-spacing:.1em;color:var(--teal-soft);flex:none}
.stepcard p{color:var(--muted);font-size:14px;line-height:1.6;margin-top:10px;padding-bottom:18px;border-bottom:1px solid var(--sand)}

/* ⑤ 추천대상 밴드 */
.reco-band{background:var(--mint);overflow:hidden;padding:0}
.reco-band.overlay{position:relative;background:var(--mint);padding:0;overflow:hidden}
.reco-band.overlay .rb-body{position:absolute;top:50%;left:55%;right:4%;transform:translateY(-50%);padding:0}
@media(max-width:900px){
  .reco-band.overlay .imgph{aspect-ratio:4/3}
  .reco-band.overlay .rb-body{position:static;transform:none;left:auto;right:auto;padding:40px 24px 46px}
}
.reco-band .rb-grid{display:grid;grid-template-columns:.88fr 1.12fr;align-items:stretch;min-height:600px}
@media(max-width:900px){.reco-band .rb-grid{grid-template-columns:1fr;min-height:auto}}
.reco-band .rb-media{position:relative;min-height:420px;overflow:hidden}
.reco-band .rb-body{display:flex;flex-direction:column;justify-content:center;padding:var(--sp-m) 56px}
@media(max-width:900px){.reco-band .rb-body{padding:48px 24px}}
.reco-band .rb-body .kicker{font-family:var(--serif);font-weight:400;font-size:clamp(22px,2.6vw,40px);color:var(--teal-soft);opacity:.7;line-height:1.15}
.reco-band .rb-body h2{font-family:var(--serif);font-weight:400;font-size:clamp(34px,4.4vw,56px);color:var(--teal);line-height:1.12;margin:2px 0 40px}
.reco-band .case-row{padding:0;border-bottom:none;gap:26px;align-items:baseline;margin-bottom:19px}
.reco-band .case-row:last-child{margin-bottom:0}
.reco-band .case-row .case-tag{background:transparent;padding:0;border-radius:0;
  font-family:var(--serif);font-weight:400;font-size:clamp(15px,1.15vw,19px);color:var(--teal);letter-spacing:.06em;min-width:76px}
.reco-band .case-row p{font-size:clamp(14.5px,1.1vw,18px);color:var(--muted);line-height:1.55}

/* 재료/구조 3분할 카드 (둔근 3종) */
.trio{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:34px}
@media(max-width:820px){.trio{grid-template-columns:1fr}}
.triocard{background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.triocard .tc-media{aspect-ratio:4/3;background:var(--mint);overflow:hidden}
.triocard .tc-body{padding:20px 22px}
.triocard .tc-head{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-bottom:8px}
.triocard h4{font-size:16px;font-weight:700;color:var(--teal)}
.triocard .tc-num{font-family:var(--serif);font-size:13px;color:var(--teal-soft);flex:none}
.triocard p{color:var(--muted);font-size:14px;line-height:1.6}
.triocard .tc-role{margin-top:10px;padding-top:10px;border-top:1px solid var(--line);color:var(--teal);font-size:13.5px;font-weight:600}

/* 공통: 오시는 길 / CS센터 */
.cs-block{background:var(--cream)}
.cs-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
@media(max-width:900px){.cs-grid{grid-template-columns:1fr;gap:40px}}
.cs-label{font-family:var(--serif);font-weight:400;font-size:clamp(20px,2.2vw,26px);color:var(--teal-soft);letter-spacing:.06em}
.cs-tel{display:block;margin-top:6px;font-family:var(--serif);font-weight:400;font-size:clamp(40px,5.6vw,66px);line-height:1;color:var(--teal);letter-spacing:-.01em}
.cs-sec{margin-top:38px}
.cs-sec h4{font-size:15px;font-weight:700;letter-spacing:.08em;color:var(--teal-soft);margin-bottom:14px}
.cs-sec ul{list-style:none;display:flex;flex-direction:column;gap:9px}
.cs-sec li{position:relative;padding-left:14px;font-size:16px;line-height:1.6;color:var(--muted)}
.cs-sec li::before{content:"·";position:absolute;left:2px;color:var(--teal-soft);font-weight:700}
.cs-note{margin-top:16px;font-size:15px;font-weight:700;color:var(--teal)}

/* 공통: 빠른 상담신청 */
.consult-block{background:var(--mint)}
.consult-head{text-align:center;margin-bottom:52px}
.ch-brand{font-family:var(--serif);font-weight:400;font-size:clamp(18px,2vw,22px);color:var(--teal-soft);letter-spacing:.34em;margin-bottom:10px}
.consult-head h2{font-family:var(--serif);font-weight:400;font-size:clamp(32px,4.6vw,52px);color:var(--teal-soft);line-height:1.1}
.consult-head h2 span{color:var(--teal)}
.consult-form{max-width:720px;margin:0 auto}
.cf-row{margin-bottom:30px}
.cf-row label{display:block;font-size:15.5px;color:var(--teal);font-weight:600;margin-bottom:12px}
.cf-row label em{color:#c0563c;font-style:normal}
.cf-row input[type=text],.cf-row input[type=tel],.cf-row select,.cf-row textarea{
  width:100%;background:transparent;border:none;border-bottom:1px solid rgba(40,72,73,.28);
  padding:10px 2px;font-family:var(--sans);font-size:16px;color:var(--teal);outline:none;transition:border-color .2s}
.cf-row textarea{border:1px solid rgba(40,72,73,.28);border-radius:10px;padding:14px;resize:vertical}
.cf-row input:focus,.cf-row select:focus,.cf-row textarea:focus{border-color:var(--teal)}
.cf-row select{appearance:none;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--teal-soft) 50%),linear-gradient(135deg,var(--teal-soft) 50%,transparent 50%);
  background-position:calc(100% - 14px) 19px,calc(100% - 8px) 19px;background-size:6px 6px,6px 6px;background-repeat:no-repeat}
.cf-tel{display:flex;align-items:center;gap:12px}
.cf-tel input{flex:1;text-align:center}
.cf-tel span{color:var(--teal-soft)}
.cf-agree{margin:34px 0 30px;padding:20px 22px;background:#fff;border-radius:12px}
.cf-agree label{display:flex;align-items:flex-start;gap:10px;cursor:pointer;font-size:15px;color:var(--teal);font-weight:600}
.cf-agree input{margin-top:4px;width:17px;height:17px;accent-color:var(--teal);flex:none}
.cf-agree em{color:#c0563c;font-style:normal}
.cf-agree p{margin-top:10px;padding-left:27px;font-size:13px;color:var(--muted);line-height:1.6}
.cf-submit{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.cf-submit button{font-family:var(--sans)}
.cf-result{margin-top:22px;text-align:center;font-size:15.5px;font-weight:600;color:var(--teal);line-height:1.7}

/* 병원소개 — 원장이 다른 이유 (풀블리드 사진 + 좌측 텍스트) */
.why-block{position:relative;background:var(--cream);padding:0;overflow:hidden;min-height:640px;
  display:flex;flex-direction:column;justify-content:flex-end}
.why-block .why-bg{position:absolute;inset:0;z-index:0}
.why-block .why-bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to right,rgba(248,246,242,.92) 0%,rgba(248,246,242,.9) 34%,rgba(248,246,242,.55) 62%,rgba(248,246,242,.2) 84%,rgba(248,246,242,.05) 100%)}
.why-block .wrap{position:relative;z-index:2;width:100%;padding-top:var(--sp-m);padding-bottom:var(--sp-m)}
.why-head{margin-bottom:clamp(90px,14vh,160px)}
.why-head .wh-sub{font-family:var(--serif);font-weight:400;font-size:clamp(28px,4vw,44px);color:var(--teal-soft);line-height:1.15;opacity:.8}
.why-head h2{font-family:var(--serif);font-weight:400;font-size:clamp(30px,4.6vw,52px);color:var(--teal);line-height:1.15;margin-top:4px}
.why-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:44px}
@media(max-width:900px){.why-cols{grid-template-columns:1fr;gap:34px}
  .why-block{min-height:auto}
  .why-block .why-bg::after{background:linear-gradient(to bottom,rgba(248,246,242,.55) 0%,rgba(248,246,242,.92) 46%,var(--cream) 78%)}
  .why-head{margin-bottom:60px}}
.why-col .wc-num{font-family:var(--serif);font-weight:400;font-size:30px;color:var(--teal-soft);margin-bottom:12px}
.why-col h3{font-size:19px;font-weight:700;color:var(--teal);line-height:1.4}
.why-col .wc-rule{display:block;width:26px;height:2px;background:var(--teal-soft);opacity:.5;margin:16px 0}
.why-col p{color:var(--muted);font-size:15.5px;line-height:1.75}

/* 원장 소개 + 풀블리드 배너 */
.doc-banner{padding:0;line-height:0;position:relative}

/* 공통 재활용 이미지 — 지도(4:3)·원장 배너(16:6) 슬롯 채움 (cover 크롭) */
.cs-map img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:14px;display:block}
.doc-banner img{width:100%;aspect-ratio:16/6;object-fit:cover;display:block}

/* 히어로 좌측 인물 — 한 배경 위에서 우측 가장자리를 페이드해 경계선 제거(레퍼런스형) */
.hero-split{background:#e6ebeb}
.hero-split .grid{background:transparent}
.hero-split .media-col{overflow:visible;background:transparent}
.hero-split .content-col{background:transparent}
.hero-split .media-col img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 22%;
  -webkit-mask-image:linear-gradient(to right,#000 0,#000 58%,transparent 100%);
          mask-image:linear-gradient(to right,#000 0,#000 58%,transparent 100%)}
@media(max-width:960px){
  .hero-split .media-col img{-webkit-mask-image:linear-gradient(to bottom,#000 0,#000 72%,transparent 100%);
          mask-image:linear-gradient(to bottom,#000 0,#000 72%,transparent 100%)}
}

/* ===== 히어로 텍스트 구성 — willbeps 레퍼런스 매핑 (강조색만 teal) ===== */
.hero-split .brand-kicker{font-family:var(--serif);font-weight:400;font-size:clamp(18px,2vw,24px);color:#9aa7a6;margin-bottom:4px;letter-spacing:.02em}
.hero-split h1{font-family:var(--serif);font-weight:500;font-size:clamp(32px,4vw,48px);color:var(--teal);line-height:1.12;letter-spacing:-.01em}
.hero-split .sub{color:#4a5a5a;font-size:16px;margin-top:12px;max-width:520px;line-height:1.6}
.hero-split .info-cols{margin-top:42px;gap:40px}
.hero-split .info-cols h4{font-family:var(--sans);font-size:19px;font-weight:600;color:#46595a;letter-spacing:0;margin-bottom:16px}
.hero-split .spec-row{display:flex;justify-content:flex-start;align-items:center;gap:12px;padding:10px 0;border-bottom:none;font-size:15px}
.hero-split .spec-row .ic{flex:none;width:20px;height:20px;color:var(--teal)}
.hero-split .spec-row .ic svg{width:100%;height:100%;display:block}
.hero-split .spec-row b{flex:none;width:96px;text-align:left;color:#233434;font-weight:700;white-space:nowrap}
.hero-split .spec-row span{flex:1;text-align:left;color:var(--muted);font-weight:500}
.hero-split .case-row{gap:14px;align-items:baseline;padding:9px 0}
.hero-split .case-row .case-tag{background:transparent;padding:0;border-radius:0;color:var(--teal);font-weight:800;font-size:13px;letter-spacing:.06em;min-width:64px}
.hero-split .case-row p{color:var(--muted);font-size:14.5px;line-height:1.5}

/* 안면비대칭 실사 이미지 배치 — 이미지 배경색과 섹션 배경 일치 + 안쪽 가장자리 페이드(테두리 없음) */
.hero-split{background:#dfeae8}
.story-band{background:#d3ccc8}
.story-band.dark{background:#26252a}
.story-band .sband-bg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 20%;
  -webkit-mask-image:linear-gradient(to right,#000 0,#000 60%,transparent 100%);
          mask-image:linear-gradient(to right,#000 0,#000 60%,transparent 100%)}
@media(max-width:820px){.story-band .sband-bg img{-webkit-mask-image:linear-gradient(to bottom,#000 0,#000 72%,transparent 100%);mask-image:linear-gradient(to bottom,#000 0,#000 72%,transparent 100%)}}

/* 얼굴 확대 + 좌측 여백 — 하드클립 없이(섹션 오버플로만) · 마스크를 일찍 페이드 */
.hero-split{overflow:hidden}
.hero-split .media-col img{left:5%;object-position:50% 20%;transform:scale(1.08);transform-origin:48% 26%;
  -webkit-mask-image:linear-gradient(to right,#000 0,#000 50%,transparent 88%);
          mask-image:linear-gradient(to right,#000 0,#000 50%,transparent 88%)}
.story-band:not(.dark) .sband-bg img{left:6%;object-position:50% 14%;transform:scale(1.12);transform-origin:48% 18%;
  -webkit-mask-image:linear-gradient(to right,#000 0,#000 46%,transparent 82%);
          mask-image:linear-gradient(to right,#000 0,#000 46%,transparent 82%)}
.story-band.dark .sband-bg img{left:9%;object-position:47% 12%;transform:scale(1.05);transform-origin:48% 16%;
  -webkit-mask-image:linear-gradient(to right,#000 0,#000 46%,transparent 82%);
          mask-image:linear-gradient(to right,#000 0,#000 46%,transparent 82%)}
@media(max-width:820px){
  .hero-split .media-col img,.story-band .sband-bg img{
    -webkit-mask-image:linear-gradient(to bottom,#000 0,#000 68%,transparent 92%);
            mask-image:linear-gradient(to bottom,#000 0,#000 68%,transparent 92%)}
}

/* ===== 배경 제거(누끼) 컷아웃 배치 — 인물만 브랜드 배경 위에, 마스크/스케일 해제 ===== */
.hero-split{background:var(--warm)!important;overflow:hidden}
.story-band:not(.dark){background:#faf3e8!important}
.story-band.dark{background:#284849!important}
.hero-split .media-col img,.story-band .sband-bg img{
  -webkit-mask-image:none!important;mask-image:none!important;transform:none!important;left:0!important;right:0!important;
  width:100%;height:100%;object-fit:contain;object-position:50% 100%}
.story-band .sband-bg img{object-position:34% 100%}
.hero-split .media-col img{filter:drop-shadow(0 12px 28px rgba(40,60,60,.16))}
.story-band:not(.dark) .sband-bg img{filter:drop-shadow(0 12px 28px rgba(60,50,40,.16))}
@media(max-width:820px){.story-band .sband-bg img{object-position:50% 100%}}

/* 03 컷아웃 — 얼굴 강조(레퍼런스형): 크게 cover + 얼굴 상단 정렬 */
.story-band.dark .sband-bg img{object-fit:cover!important;object-position:60% 8%!important;transform:scale(1.02)!important}

/* 03 — 사진 위로 올려 머리 위 살짝 크롭, 상반신 더 노출 */
.story-band.dark .sband-bg img{object-position:58% 34%!important;transform:scale(1.06)!important}

/* 03 — 틸 합성본(외곽 클린): 이미지 배경=섹션 틸이라 이음새 없음, 얼굴 강조 cover */
.story-band.dark .sband-bg img{object-fit:cover!important;object-position:56% 32%!important;transform:none!important;filter:none!important}

/* 03 — 밴드 한 장(틸 배경+모델+경계처리)을 섹션 배경으로 풀블리드, 별도 이미지 레이어 제거 */
.story-band.dark{background:#284849 url('images/asymmetry/gen_asym_03_band.jpg') left center/cover no-repeat!important}
.story-band.dark .sband-bg{display:none!important}
@media(max-width:820px){
  .story-band.dark{background-position:center top!important;min-height:70vw!important}
  .story-band.dark .sband-content{background:linear-gradient(180deg,rgba(40,72,73,0),rgba(40,72,73,.85) 60%)}
}

/* 눈매 비대칭 카드 — 눈 중심 크롭 */
.eye-cards figure img{width:100%;aspect-ratio:4/3;object-fit:cover;object-position:center 47%;display:block}

/* 04 입꼬리 컷 — 입 중심 크롭, 라운드 카드 */
.story-media.contain img{width:100%;max-width:480px;aspect-ratio:3/2;object-fit:cover;object-position:center 52%;border-radius:16px;box-shadow:0 20px 46px rgba(40,72,73,.14);display:block}

/* 진단 가이드 카드 — 세로 가이드 이미지(4:5) 풀 표시 */
.ccard .top{height:auto;aspect-ratio:4/5}
.ccard .top img{width:100%;height:100%;object-fit:cover;object-position:center;display:block}

/* 섹션 배경 교차 — 밋밋함 제거(레퍼런스식 구분) */
.bg-mint{background:var(--mint)}
.bg-warm{background:var(--warm)}
.doc-intro{background:var(--warm)}   /* 1:1 다이렉트 케어 — 웜 */

/* 섹션 크기 통일(패딩 sp-m) + doc-intro 배경 교차 */
.band{padding:var(--sp-m) 0}
.doc-intro{background:var(--mint);padding:var(--sp-m) 0}
.bg-cream{background:var(--cream)}

/* 진단 카드 — 정사각으로 축소해 섹션 높이 낮춤 + 컷별 초점 */
.ccard .top{height:auto;aspect-ratio:1/1}
.ccard .top img{object-position:center 30%}
.cards .ccard:nth-child(1) .top img{object-position:center 20%}  /* 윤곽=얼굴 */
.cards .ccard:nth-child(2) .top img{object-position:center 48%}  /* 눈매 */
.cards .ccard:nth-child(3) .top img{object-position:center 42%}  /* 입술 */

/* 병원소개 — 원장 배너를 밝은 톤으로 바꿔 히어로(teal)와 분리 */
.doctor-banner{background:var(--mint);min-height:auto;padding:var(--sp-l) 0}
.doctor-banner .overlay .inner{max-width:640px}
.doctor-banner .eyebrow{color:var(--teal-soft)}
.doctor-banner h2{color:var(--teal)}
.doctor-banner p{color:var(--muted)}
.doctor-banner .pill.light{background:var(--teal);color:#fff;border-color:var(--teal)}
.doctor-banner .pill.light:hover{background:#1c3536;border-color:#1c3536}
@media(max-width:820px){.doctor-banner::before{display:none}}

/* 병원소개 원장 풀블리드 배경 이미지 */
.why-block .why-bg img{width:100%;height:100%;object-fit:cover;object-position:right center;display:block}

/* 병원소개 원장 배너 — 원본 실사 이미지 배경 복원(토프색 + 밝은 글자) */
.doctor-banner{background:#6b625b url('images/gen_doctor_banner.png') no-repeat center right/cover!important;min-height:600px!important;position:relative;padding:80px 0!important}
.doctor-banner::before{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(107,98,91,.94) 0%,rgba(107,98,91,.72) 34%,rgba(107,98,91,.18) 62%,rgba(107,98,91,0) 100%)}
.doctor-banner .overlay{position:relative;z-index:2}
.doctor-banner .eyebrow{color:#d7cdbf!important}
.doctor-banner h2{color:#fff!important}
.doctor-banner p{color:#efe9e0!important}
.doctor-banner .pill.light{background:#fff!important;color:#4a423b!important;border-color:#fff!important}
.doctor-banner .pill.light:hover{background:#f0e9df!important;border-color:#f0e9df!important}
@media(max-width:820px){
  .doctor-banner{background-position:center 22%!important}
  .doctor-banner::before{background:linear-gradient(180deg,rgba(107,98,91,.45) 0%,rgba(107,98,91,.92) 62%)}
}
.bg-warm{background:var(--warm)}

/* === yungok 히어로·스토리 뷰티컷 배치(누끼→섹션색 합성) === */
.hero-full .hf-bg img{width:100%;height:100%;object-fit:cover;object-position:center 22%}
.story-media.yg01 img,.story-media.yg03 img,.story-media.yg04 img{width:100%;height:100%;object-fit:cover;display:block}
.story-media.yg01 img{object-position:center 26%}
.story-media.yg03 img{object-position:center 30%}
.story-media.yg04 img{object-position:center 26%}
.reco-band .rb-media img{width:100%;height:100%;object-fit:cover;object-position:center 22%;display:block}

/* ===== HOME 재구성 (willbeps 구조) ===== */
/* 원장 흑백 히어로 */
.home-hero{position:relative;overflow:hidden;background:var(--warm);padding:var(--sp-l) 0}
.home-hero .hh-grid{display:grid;grid-template-columns:.92fr 1.08fr;gap:clamp(32px,5vw,64px);align-items:center}
@media(max-width:820px){.home-hero .hh-grid{grid-template-columns:1fr;gap:30px}}
.home-hero .hh-copy{max-width:520px}
.home-hero .hh-kicker{font-family:var(--serif);font-size:clamp(16px,1.6vw,20px);color:var(--teal-soft);letter-spacing:.03em;margin-bottom:16px}
.home-hero h1{font-family:var(--serif);font-weight:400;font-size:clamp(42px,5.6vw,78px);line-height:1.06;color:var(--teal);letter-spacing:-.02em}
.home-hero .hh-tag{display:flex;align-items:center;flex-wrap:wrap;gap:14px;margin-top:24px;font-size:clamp(15px,1.6vw,19px);color:var(--muted);font-weight:500}
.home-hero .hh-dash{width:48px;height:1.5px;background:var(--teal-soft);display:inline-block}
.home-hero .hh-cta{display:flex;gap:12px;margin-top:34px;flex-wrap:wrap}
.home-hero .hh-photo{margin:0;border-radius:0;overflow:visible;box-shadow:none;border:none}
.home-hero .hh-photo img{width:100%;aspect-ratio:3/4;object-fit:cover;object-position:center;display:block}
@media(max-width:820px){.home-hero .hh-photo{order:-1}.home-hero .hh-photo img{aspect-ratio:3/4}}

/* 병원 내부 갤러리 */
.clinic-row{display:flex;gap:18px;overflow-x:auto;margin-top:44px;padding-bottom:10px;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
.clinic-row::-webkit-scrollbar{height:8px}
.clinic-row::-webkit-scrollbar-thumb{background:var(--mint2);border-radius:8px}
.clinic-row figure{flex:0 0 auto;margin:0;scroll-snap-align:start}
.clinic-row img{height:340px;width:auto;border-radius:16px;object-fit:cover;box-shadow:0 14px 34px rgba(40,72,73,.1);display:block}
@media(max-width:820px){.clinic-row img{height:240px}}

/* 위치 · 병원정보 + 지도 */
.loc-band{background:var(--mint)}
.loc-grid{display:grid;grid-template-columns:.82fr 1.18fr;gap:52px;align-items:center}
@media(max-width:900px){.loc-grid{grid-template-columns:1fr;gap:32px}}
.loc-info h2{font-family:var(--serif);font-weight:400;font-size:clamp(30px,3.6vw,44px);color:var(--teal);margin:2px 0 18px}
.loc-tel{display:inline-block;font-family:var(--serif);font-weight:400;font-size:clamp(34px,4.6vw,58px);color:var(--teal);letter-spacing:.01em;line-height:1;margin-bottom:26px}
.loc-dl{display:grid;grid-template-columns:88px 1fr;row-gap:16px;column-gap:18px;border-top:1px solid var(--line);padding-top:22px}
.loc-dl dt{font-weight:700;color:var(--teal-soft);font-size:14.5px;letter-spacing:.02em}
.loc-dl dd{color:var(--muted);font-size:15.5px;line-height:1.6}
.loc-dl .loc-off{color:var(--warn);font-weight:600}
.loc-map img{width:100%;border-radius:16px;box-shadow:0 16px 40px rgba(40,72,73,.14);border:1px solid var(--line);display:block}
.loc-map iframe{width:100%;height:460px;border:0;border-radius:16px;box-shadow:0 16px 40px rgba(40,72,73,.14);display:block}
@media(max-width:900px){.loc-map iframe{height:340px}}

/* 병원 내부 뷰어 — 큰 메인 + 썸네일(클릭 확대) */
.clinic-viewer{margin-top:44px}
.cv-stage{position:relative;border-radius:18px;overflow:hidden;box-shadow:0 18px 44px rgba(40,72,73,.12);background:var(--mint2)}
.cv-stage img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block}
.cv-arrow{position:absolute;top:50%;transform:translateY(-50%);width:46px;height:46px;border-radius:50%;border:0;background:rgba(255,255,255,.85);color:var(--teal);font-size:26px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 14px rgba(0,0,0,.15);transition:.2s}
.cv-arrow:hover{background:#fff;transform:translateY(-50%) scale(1.06)}
.cv-arrow.prev{left:16px}
.cv-arrow.next{right:16px}
.cv-thumbs{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-top:14px}
.cv-thumbs::-webkit-scrollbar{height:8px}
.cv-thumbs::-webkit-scrollbar-thumb{background:var(--mint2);border-radius:8px}
.cv-thumb{width:100%;height:100px;border-radius:10px;overflow:hidden;border:2px solid transparent;background:none;padding:0;cursor:pointer;opacity:.55;transition:.2s}
.cv-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.cv-thumb.active{opacity:1;border-color:var(--teal)}
.cv-thumb:hover{opacity:1}
@media(max-width:820px){.cv-thumb{height:74px}}

/* 병원 내부 갤러리 — 메인 이미지에만 무드 다크 오버레이(레퍼런스 톤 매칭) */
.cv-stage{position:relative}
.cv-stage img{position:relative;z-index:0}
.cv-stage::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:1;border-radius:inherit;
  background:linear-gradient(180deg,rgba(16,26,26,.32) 0%,rgba(16,26,26,.10) 32%,rgba(16,26,26,.04) 58%,rgba(16,26,26,.22) 100%)}
.cv-arrow{z-index:2}

/* 눈매교정 — 풀블리드 뷰티컷(누끼→섹션색 합성) */
.eyehero img{width:100%;display:block}
.reco-band.overlay img{width:100%;display:block}

/* 눈매 02 신경자극 — 해부 다이어그램(카드 없이 섹션색에 녹임) */
.story-media.contain.diagram{padding:20px}
.story-media.contain.diagram img{max-width:560px;aspect-ratio:4/3;object-fit:contain;border-radius:0;box-shadow:none;background:transparent}

/* 애플힙 둔근 카드 이미지 */
.triocard .tc-media img{width:100%;height:100%;object-fit:cover;display:block}

.posterframe img{width:100%;display:block}

.sc-media img{width:100%;height:100%;object-fit:cover;display:block}

/* 상담신청 접수 성공 메시지 */
.cf-result.ok{color:#1c6b45;background:#eef7f0;border:1px solid #cfe6d6;border-radius:12px;padding:16px 20px}