:root{
  --c-violet:#517264; --c-violet-deep:#3f5f55; --c-violet-ink:#232a26;   /* accent / accent-deep / deep-ink (legacy names) */
  --c-gold:#a98a5e; --c-gold-deep:#7c6442; --c-taupe:#9a8c80; --c-teal:#b98c74;  /* brass / brass-deep / taupe / clay-point */
  --c-graphite:#33302b; --c-slate:#655e55;
  --c-canvas:#f7f4ee; --c-paper:#ffffff; --c-mist:#eef0ea; --c-cream:#f3eee2;
  --hairline-l:rgba(35,42,38,.12); --hairline-d:rgba(255,255,255,.16); --hairline:var(--hairline-l);
  --sp-xs:4px; --sp-sm:8px; --sp-md:12px; --sp-lg:16px; --sp-xl:24px; --sp-2xl:32px; --sp-3xl:48px; --sp-4xl:72px; --sp-5xl:100px;
  --container:1280px; --container-narrow:780px; --gutter:clamp(18px,4vw,56px);
  --section-pad:clamp(44px,4.6vw,72px); --section-pad-tight:clamp(44px,6vw,92px);
  --grid-gap:clamp(16px,2.2vw,28px); --card-pad:clamp(20px,2.2vw,30px); --header-h:74px; --anchor-top:calc(var(--header-h) + 24px);
  --r-sm:3px; --r-md:8px; --r-lg:16px; --r-xl:26px; --r-pill:999px;
  --ff:"Pretendard Variable","Pretendard",system-ui,-apple-system,"Apple SD Gothic Neo","Noto Sans KR",sans-serif;
  --serif:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --dur-fast:250ms; --dur-base:500ms; --dur-slow:700ms;
  --ease-out:cubic-bezier(.22,.61,.36,1); --ease-soft:cubic-bezier(.4,0,.2,1); --stagger:80ms; --rise:24px;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0; background:var(--c-canvas); color:var(--c-graphite); font-family:var(--ff); font-size:18px; font-weight:400;
  line-height:1.75; letter-spacing:-.005em; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden; word-break:keep-all; overflow-wrap:break-word}
img{max-width:100%} .rbw2{width:100%; height:auto; display:block}
a{color:inherit; text-decoration:none} button{font:inherit; color:inherit; cursor:pointer; background:none; border:none}
h1,h2,h3,h4,p{margin:0}
::selection{background:var(--c-violet); color:#fff}
:focus-visible{outline:2px solid var(--c-violet); outline-offset:3px; border-radius:2px}
.j-dark :focus-visible,.site-footer :focus-visible,.menu-drawer :focus-visible{outline-color:#fff}
.sr-only{position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0}
.skip{position:absolute; left:-9999px; top:0; background:#fff; color:var(--c-violet-ink); padding:10px 16px; z-index:200; border-radius:0 0 8px 0}
.skip:focus{left:0}

.section{position:relative; padding-block:var(--section-pad); scroll-margin-top:var(--anchor-top)}
.phero{min-height:clamp(340px,34vw,480px); display:flex; align-items:center}   /* 부제 줄 수와 상관없이 같은 높이 */   /* 앵커로 들어올 때 고정 헤더 밑에 가리지 않게 */
.section--tight{padding-block:var(--section-pad-tight)}
.section--mist{background:var(--c-mist)} .section--cream{background:var(--c-cream)} .section--paper{background:var(--c-paper)}
.section--violet{background:var(--c-violet-deep); color:#eef3f0; --hairline:var(--hairline-d)}
.section--ink{background:var(--c-violet-ink); color:#d6ddd8; --hairline:var(--hairline-d)}
.container{width:100%; max-width:var(--container); margin-inline:auto; padding-inline:var(--gutter)}
.container--narrow{max-width:var(--container-narrow)}
.stack{display:flex; flex-direction:column; gap:var(--sp-xl)} .stack--lg{gap:var(--sp-3xl)} .center{text-align:center}

.eyebrow{display:inline-flex; align-items:center; gap:var(--sp-md); font-family:var(--serif); font-size:16px; font-weight:600;
  letter-spacing:.28em; text-transform:uppercase; color:var(--c-gold-deep)}
.eyebrow::before{content:""; width:24px; height:1px; background:var(--c-gold); opacity:.85}
.center .eyebrow{justify-content:center} .center .eyebrow::after{content:""; width:24px; height:1px; background:var(--c-gold); opacity:.85}
.section--violet .eyebrow,.section--ink .eyebrow{color:#e3d1a3}   /* 진한 배경 위 금색은 밝은 쪽으로 (2.18 → 4.6) */
.serif-hero{font-family:var(--serif); font-size:clamp(44px,7.5vw,98px); font-weight:500; line-height:1.0; letter-spacing:-.01em}
.serif-xl{font-family:var(--serif); font-size:clamp(32px,5vw,60px); font-weight:500; line-height:1.05}
.display-kr{font-size:clamp(28px,3vw,42px); font-weight:700; line-height:1.3; letter-spacing:-.02em}   /* MASTER .j-h2 와 같은 행간·자간 (2026-09-28) */
.heading-lg{font-size:clamp(21px,2.4vw,29px); font-weight:700; line-height:1.3; letter-spacing:-.02em}
.heading-md{font-size:19px; font-weight:700; line-height:1.4; letter-spacing:-.01em}
.body-lg{font-size:18px; line-height:1.75} .body-md{font-size:15px; line-height:1.7}
.muted{color:var(--c-slate)} .section--violet .muted,.section--ink .muted{color:#ccd5cf}
.accent{color:var(--c-violet)} .section--violet .accent{color:var(--c-gold)}

.btn{display:inline-flex; align-items:center; gap:var(--sp-sm); min-height:52px; padding:0 var(--sp-2xl); border-radius:var(--r-pill);
  font-size:15px; font-weight:600; transition:transform var(--dur-fast) var(--ease-out), background var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out)}
.btn--solid{background:var(--c-violet); color:#fff; box-shadow:0 10px 30px -12px rgba(94,140,126,.6)}
.btn--solid:hover{background:var(--c-violet-deep); transform:translateY(-2px)}
.btn--ghost{border:1px solid var(--hairline); color:inherit} .btn--ghost:hover{border-color:var(--c-violet); color:var(--c-violet)}
.section--violet .btn--solid{background:#fff; color:var(--c-violet-deep); box-shadow:none}
.section--violet .btn--solid:hover{background:var(--c-gold); color:var(--c-violet-ink)}
.section--violet .btn--ghost{border-color:rgba(255,255,255,.5)} .section--violet .btn--ghost:hover{border-color:#fff; color:#fff}
.link-arrow{display:inline-flex; align-items:center; gap:var(--sp-sm); font-weight:600; font-size:15px; color:var(--c-violet); transition:gap var(--dur-fast) var(--ease-out)}
.link-arrow:hover{gap:var(--sp-md)} .section--violet .link-arrow{color:var(--c-gold)}

/* ── header + menu ── */
.site-header{position:fixed; inset:0 0 auto 0; z-index:90; height:var(--header-h); display:flex; align-items:center; color:#fff;
  transition:background var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out)}
.site-header.is-solid,.site-header:hover,.site-header:focus-within{background:rgba(255,255,255,.97); color:var(--c-violet-ink);
  box-shadow:0 1px 0 var(--hairline-l)}   /* 배경이 97% 불투명이라 블러는 보이지 않으면서 스크롤마다 다시 그렸다 */
.header-inner{width:100%; padding-inline:var(--gutter); display:flex; align-items:center; justify-content:space-between; gap:var(--sp-lg)}
.brand-lockup{display:inline-flex; align-items:center; gap:var(--sp-sm); color:currentColor; flex:none}
.brand-word{font-family:var(--serif); font-weight:600; font-size:20px; letter-spacing:.22em}
.nav{display:flex; align-items:stretch; gap:0}
.nav-item{position:relative; display:flex; align-items:center}
.nav-top{display:inline-flex; align-items:center; height:var(--header-h); padding:0 clamp(9px,1.1vw,16px); font-size:15px; font-weight:600; letter-spacing:-.01em; opacity:.95; white-space:nowrap}
/* 투명 헤더(사진 위)에서는 현재 메뉴도 흰 글씨 그대로 두고 밑줄로만 표시한다 —
   세이지색으로 칠하면 사진 위에서 현재 메뉴만 안 보였다(2026-09-28) */
.site-header.is-solid .nav-item:hover .nav-top,.site-header.is-solid .nav-top.is-active{color:var(--c-violet)}
.nav-panel{position:absolute; top:calc(var(--header-h) - 8px); left:50%; transform:translateX(-50%) translateY(8px);
  min-width:200px; background:#fff; border:1px solid var(--hairline-l); border-radius:var(--r-md); box-shadow:0 24px 50px -24px rgba(35,42,38,.45);
  padding:8px; opacity:0; visibility:hidden; pointer-events:none; transition:opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); z-index:91}
.nav-item:hover .nav-panel,.nav-item:focus-within .nav-panel{opacity:1; visibility:visible; pointer-events:auto; transform:translateX(-50%) translateY(0)}
.nav-panel a{display:block; padding:9px 14px; font-size:13.5px; font-weight:500; color:var(--c-graphite); border-radius:var(--r-sm); white-space:nowrap}
.nav-panel a:hover{background:var(--c-mist); color:var(--c-violet)}
.nav-tel{flex:none; display:inline-flex; align-items:center; gap:6px; font-size:15.5px; font-weight:700;
  letter-spacing:.01em; white-space:nowrap; opacity:.95}
.nav-tel:hover{opacity:1}
.nav-tel span{font-size:13px}
@media (max-width:1180px){ .nav-tel{display:none} }
.nav-cta{flex:none; margin-left:var(--sp-sm); display:inline-flex; align-items:center; gap:var(--sp-sm); font-size:15.5px; font-weight:700;
  padding:10px 20px; min-height:46px; border:1px solid currentColor; border-radius:var(--r-pill); opacity:.95}
.nav-cta:hover{opacity:1; background:var(--c-violet); border-color:var(--c-violet); color:#fff}
.site-header.is-solid .nav-cta,.site-header:hover .nav-cta{border-color:var(--c-violet); color:var(--c-violet)}
.site-header.is-solid .nav-cta:hover,.site-header:hover .nav-cta:hover{background:var(--c-violet); color:#fff}
.menu-toggle{display:none; align-items:center; gap:var(--sp-sm); font-size:13px; font-weight:600; padding:8px 12px; min-height:44px; border:1px solid currentColor; border-radius:var(--r-pill)}
.menu-toggle .bars{display:inline-flex; flex-direction:column; gap:3px} .menu-toggle .bars i{width:16px; height:1.5px; background:currentColor; display:block}

/* ── mobile drawer (accordion) ── */
.menu-drawer{position:fixed; inset:0; z-index:120; background:var(--c-violet-ink); color:#e3e9e5; display:flex; flex-direction:column;
  padding:var(--gutter); opacity:0; visibility:hidden; transform:translateY(-10px);
  transition:opacity var(--dur-base) var(--ease-soft), transform var(--dur-base) var(--ease-soft), visibility 0s linear var(--dur-base); overflow-y:auto}
body.drawer-open .menu-drawer{opacity:1; visibility:visible; transform:none; transition:opacity var(--dur-base) var(--ease-soft), transform var(--dur-base) var(--ease-soft), visibility 0s linear 0s}
.drawer-top{display:flex; align-items:center; justify-content:space-between; height:var(--header-h)}
.drawer-close{font-size:14px; font-weight:600; min-height:44px; padding:0 12px}
.drawer-nav{display:flex; flex-direction:column; gap:2px; margin-block-start:var(--sp-md)}
.acc-top{display:flex; align-items:center; justify-content:space-between; width:100%; padding:16px 4px; font-family:var(--serif); font-size:24px; font-weight:500;
  border-bottom:1px solid var(--hairline-d); color:#fff}
.acc-top .en{font-family:var(--ff); font-size:12px; letter-spacing:.12em; color:var(--c-gold)}
.acc-top .chev{transition:transform var(--dur-fast) var(--ease-out); color:var(--c-gold)}
.acc[aria-expanded="true"] .chev{transform:rotate(180deg)}
.acc-panel{max-height:0; overflow:hidden; visibility:hidden; transition:max-height var(--dur-base) var(--ease-soft), visibility 0s linear var(--dur-base)}
.acc-panel.is-open,.acc[aria-expanded="true"] + .acc-panel{visibility:visible; transition-delay:0s}
.acc-panel ul{list-style:none; margin:0; padding:4px 4px 12px} .acc-panel a{display:block; padding:9px 8px; font-size:15px; color:#c6cfca; min-height:40px}
.acc-panel a:hover{color:#fff} .acc-panel a strong{color:#fff}
.acc-panel .grp{font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--c-gold); padding:10px 8px 2px; font-weight:700}
.drawer-foot{margin-top:auto; padding-top:var(--sp-xl); display:flex; flex-direction:column; gap:4px; font-size:14px; color:#aab4ae; line-height:1.8}

/* ── hero slider ── */
.hero{position:relative; height:100vh; min-height:600px; overflow:hidden; color:#fff}
.hero-track{position:absolute; inset:0}
.hero-slide{position:absolute; inset:0; opacity:0; transition:opacity 1100ms var(--ease-soft); pointer-events:none}
.hero-slide.is-on{opacity:1; pointer-events:auto}
.hero-slide img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transform:scale(1.06); transition:transform 6s linear}
.hero-slide.is-on img{transform:scale(1)}
.hero-slide::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(35,42,38,.5) 0%,rgba(35,42,38,.18) 30%,rgba(35,42,38,.16) 56%,rgba(35,42,38,.74) 100%)}
.hero-inner{position:relative; z-index:2; height:100%; max-width:var(--container); margin-inline:auto; padding-inline:var(--gutter);
  display:flex; flex-direction:column; justify-content:flex-end; padding-block-end:clamp(56px,9vw,120px)}
.hero-cap{max-width:760px}
.hero-cap .eyebrow{color:#fff; margin-block-end:var(--sp-lg)} .hero-cap .eyebrow::before{background:var(--c-gold)}
.hero h1{margin-block-end:var(--sp-lg); text-shadow:0 2px 30px rgba(35,42,38,.35)}
.hero h1 .kr{display:block; font-family:var(--ff); font-weight:700; font-size:clamp(28px,5vw,58px); letter-spacing:-.03em; line-height:1.18; margin-block-start:var(--sp-sm)}
.hero-sub{max-width:48ch; font-size:clamp(15px,1.6vw,19px); line-height:1.7; color:rgba(255,255,255,.92); margin-block-end:var(--sp-xl)}
/* 첫 화면에 병원을 고를 근거가 한 줄도 없었다 — 사실 세 가지만 짧게 (2026-09-28) */
.hero-facts{margin-block-end:var(--sp-lg); font-size:15px; font-weight:600; letter-spacing:.01em; color:rgba(255,255,255,.92)}
@media (max-width:640px){ .hero-facts{font-size:13.5px; line-height:1.7} }
.hero-actions{display:flex; flex-wrap:wrap; gap:var(--sp-md)}
.hero-disc{margin-block-start:var(--sp-lg); font-size:12px; color:rgba(255,255,255,.74)}
.hero-dots{position:absolute; z-index:3; left:50%; bottom:var(--sp-xl); transform:translateX(-50%); display:flex; gap:10px}
.hero-dots button{width:9px; height:9px; border-radius:50%; background:rgba(255,255,255,.45); border:7px solid transparent; background-clip:content-box; box-sizing:content-box; transition:background var(--dur-fast),transform var(--dur-fast)}
.hero-dots button[aria-current="true"]{background:#fff; transform:scale(1.25)}
.hero-arrows{position:absolute; z-index:3; inset:auto var(--gutter) var(--sp-xl) auto; display:flex; gap:8px}
.hero-arrows button{width:46px; height:46px; border-radius:50%; border:1px solid rgba(255,255,255,.5); display:flex; align-items:center; justify-content:center; color:#fff; transition:background var(--dur-fast)}
.hero-arrows button:hover{background:rgba(255,255,255,.15)}
.hero-hold{font-size:13px; line-height:1}   /* 자동 넘김 멈춤/재생 — WCAG 2.2.2 */

/* ── ghost bigtype ── */
.ghost{font-family:var(--serif); font-weight:500; font-size:clamp(60px,18vw,260px); line-height:.9; letter-spacing:-.02em; color:#fff;
  -webkit-text-stroke:1px rgba(94,140,126,.24); text-stroke:1px rgba(94,140,126,.24); opacity:.9; text-align:center; user-select:none}
.section--ink .ghost{color:transparent; -webkit-text-stroke:1px rgba(169,138,94,.4)}

/* ── section head ── */
.section-head{display:grid; grid-template-columns:.42fr .58fr; gap:var(--sp-2xl) var(--grid-gap); align-items:end; margin-block-end:clamp(24px,2.6vw,36px)}
.section-head--center{grid-template-columns:1fr; text-align:center; place-items:center; gap:var(--sp-lg); max-width:var(--container-narrow); margin-inline:auto}
.section-head__body{display:flex; flex-direction:column; gap:var(--sp-lg); align-items:flex-start}
.section-head--center .section-head__body{align-items:center}

/* ── philosophy ── */
.philo-grid{display:grid; grid-template-columns:1.04fr .96fr; gap:var(--sp-5xl) var(--grid-gap); align-items:center}
.philo-text{display:flex; flex-direction:column; gap:var(--sp-xl); align-items:flex-start}
.philo-text .big{font-family:var(--serif); font-size:clamp(30px,4.2vw,56px); font-weight:500; line-height:1.16; color:var(--c-violet-ink)}
.philo-text .big em{font-style:italic; color:var(--c-violet)}
.philo-media{border-radius:var(--r-lg); overflow:hidden; aspect-ratio:4/3; background:var(--c-paper)} .philo-media img{width:100%; height:100%; object-fit:cover}

/* ── field grid (categories) ── */
.field-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:var(--grid-gap)}
.field-card{position:relative; display:flex; flex-direction:column; background:var(--c-paper); border-radius:var(--r-lg); overflow:hidden;
  box-shadow:0 1px 0 var(--hairline-l); transition:transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out)}
.field-card:hover{transform:translateY(-6px); box-shadow:0 30px 60px -34px rgba(63,95,85,.42)}
.field-media{position:relative; aspect-ratio:4/5; overflow:hidden; background:var(--c-mist)}
.field-media img{width:100%; height:100%; object-fit:cover; transition:transform var(--dur-slow) var(--ease-out)} .field-card:hover .field-media img{transform:scale(1.05)}
.field-body{display:flex; flex-direction:column; gap:6px; padding:var(--card-pad)}
.field-en{font-family:var(--serif); font-size:14px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--c-gold-deep)}
.field-name{font-size:20px; font-weight:700; letter-spacing:-.02em; color:var(--c-violet-ink)}
.field-tag{font-size:14px; line-height:1.55; color:var(--c-slate)} .field-arrow{margin-top:6px; font-size:13px; font-weight:600; color:var(--c-violet)}

/* ── process ── */
.proc-grid{display:grid; grid-template-columns:.92fr 1.08fr; gap:var(--sp-5xl) var(--grid-gap); align-items:center}
.proc-media{border-radius:var(--r-lg); overflow:hidden; aspect-ratio:16/10; background:var(--c-mist)} .proc-media img{width:100%; height:100%; object-fit:cover}
.proc-steps{display:flex; flex-direction:column}
.step{display:grid; grid-template-columns:auto 1fr; gap:var(--sp-lg); padding-block:var(--sp-lg); border-top:1px solid var(--hairline)} .step:last-child{border-bottom:1px solid var(--hairline)}
.step-no{font-family:var(--serif); font-size:30px; font-weight:500; line-height:1; color:var(--c-gold-deep); min-width:46px}
.step-b h3{font-size:18px; font-weight:700; color:var(--c-violet-ink); margin-block-end:3px} .step-b p{font-size:15px; line-height:1.6; color:var(--c-slate)}

/* ── before/after compare slider ── */
.compare-wrap{max-width:560px; margin-inline:auto}
.compare{position:relative; aspect-ratio:3/4; border-radius:var(--r-lg); overflow:hidden; background:var(--c-mist); cursor:ew-resize; touch-action:none; user-select:none}
.compare img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; pointer-events:none}
.compare .after-wrap{position:absolute; inset:0; width:50%; overflow:hidden; border-right:2px solid #fff}
.compare .after-wrap img{width:auto; height:100%; max-width:none; left:0}
.compare .lbl{position:absolute; top:12px; padding:4px 12px; font-size:12px; font-weight:600; letter-spacing:.04em; background:rgba(35,42,38,.6); color:#fff; border-radius:var(--r-pill)}
.compare .lbl-a{right:12px} .compare .lbl-b{left:12px}
.compare .handle{position:absolute; top:0; bottom:0; left:50%; width:40px; transform:translateX(-50%); display:flex; align-items:center; justify-content:center}
.compare .handle::before{content:""; position:absolute; top:0; bottom:0; width:2px; background:#fff}
.compare .knob{width:40px; height:40px; border-radius:50%; background:#fff; box-shadow:0 4px 14px rgba(35,42,38,.4); display:flex; align-items:center; justify-content:center; color:var(--c-violet); position:relative; z-index:1}

/* ── stats / counters ── */
.stat-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:var(--sp-3xl) var(--grid-gap)}
.stat{display:flex; flex-direction:column; gap:6px; text-align:center}
.stat-num{font-family:var(--serif); font-size:clamp(40px,5vw,66px); font-weight:500; line-height:1; color:#fff}
.stat-num small{font-size:.42em; font-weight:600; letter-spacing:.04em; margin-inline-start:2px; color:#e9e2d2}
.stat-label{font-size:14px; font-weight:600; color:#c2ccc6}

/* ── event cards ── */
.event-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--grid-gap)}
.event-card{display:flex; flex-direction:column; gap:var(--sp-sm); padding:var(--card-pad); background:var(--c-paper); border:1px solid var(--hairline-l); border-radius:var(--r-lg)}
.event-kicker{font-family:var(--serif); font-size:14px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--c-gold-deep)}
.event-card h3{font-size:19px; font-weight:700; color:var(--c-violet-ink)} .event-card p{font-size:14.5px; line-height:1.6; color:var(--c-slate)}

/* ── clinic ── */
.clinic-grid{display:grid; grid-template-columns:1fr .92fr; gap:var(--sp-5xl) var(--grid-gap); align-items:center}
.clinic-media{border-radius:var(--r-lg); overflow:hidden; aspect-ratio:4/5; background:var(--c-mist)} .clinic-media img{width:100%; height:100%; object-fit:cover}
.tick-list{display:flex; flex-direction:column; gap:var(--sp-md); margin-block-start:var(--sp-sm)}
.tick-list li{display:flex; gap:var(--sp-md); align-items:flex-start; font-size:15.5px; line-height:1.6; color:var(--c-graphite); list-style:none}
.tick-list li::before{content:""; flex:none; width:7px; height:7px; margin-top:8px; border-radius:50%; background:var(--c-gold)}

/* ── closing / contact ── */
.closing-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:var(--sp-5xl) var(--grid-gap); align-items:center}
.closing-media{border-radius:var(--r-lg); overflow:hidden; aspect-ratio:16/11; background:var(--c-mist)} .closing-media img{width:100%; height:100%; object-fit:cover}
.closing-cta{display:flex; flex-direction:column; gap:var(--sp-lg); align-items:flex-start}
.contact-rows{display:flex; flex-direction:column; gap:8px; margin-block:var(--sp-sm) var(--sp-md); width:100%}
.contact-row{display:flex; gap:var(--sp-md); align-items:baseline; padding-block:var(--sp-sm); border-top:1px solid var(--hairline)}
.contact-row dt{font-family:var(--serif); font-size:14px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--c-gold-deep); min-width:92px}
.contact-row dd{margin:0; font-size:15.5px; color:var(--c-graphite)}

/* ── page hero (subpages) ── */
.phero{position:relative; padding-block:calc(var(--header-h) + clamp(48px,8vw,96px)) clamp(48px,8vw,96px); overflow:hidden; background:var(--c-violet-ink); color:#fff}
.phero::before{content:""; position:absolute; inset:0; opacity:.34; background-size:cover; background-position:center}
.phero .container{position:relative}
.phero .crumb{font-size:13px; letter-spacing:.04em; color:#bcc6c0; margin-block-end:var(--sp-md)} .phero .crumb a:hover{color:#fff}
.phero h1{font-family:var(--ff); font-size:clamp(30px,5vw,54px); font-weight:700; letter-spacing:-.03em; line-height:1.16}
.phero .en{font-family:var(--serif); font-size:clamp(20px,3vw,34px); font-weight:500; letter-spacing:.04em; color:var(--c-gold); display:block; margin-block-end:var(--sp-xs)}
.phero p{max-width:60ch; margin-block-start:var(--sp-md); color:rgba(255,255,255,.86); font-size:clamp(15px,1.6vw,18px); line-height:1.7}

/* ── item cards (subpage) ── */
.item-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:var(--grid-gap)}
.item-grid--3{grid-template-columns:repeat(3,1fr)} .item-grid--4{grid-template-columns:repeat(4,1fr)}
.item{display:flex; flex-direction:column; gap:var(--sp-sm); padding:var(--card-pad); background:var(--c-paper); border:1px solid var(--hairline-l); border-radius:var(--r-lg); scroll-margin-top:var(--anchor-top)}
.item-no{font-family:var(--serif); font-size:22px; color:var(--c-gold-deep)} .item h3{font-size:20px; font-weight:700; color:var(--c-violet-ink)} .item p{font-size:15px; line-height:1.65; color:var(--c-slate)}
a.item{transition:transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out)}
a.item:hover{transform:translateY(-4px); border-color:transparent; box-shadow:0 26px 52px -32px rgba(63,95,85,.45)}
a.item .field-arrow{margin-top:auto; padding-top:var(--sp-sm)}

/* ── disclaimer / footer ── */
.disclaimer{font-size:12px; line-height:1.7; color:var(--c-slate)} .section--violet .disclaimer,.section--ink .disclaimer{color:#a3ada7}
.disclaimer--block{margin-block-start:var(--sp-2xl); padding-block-start:var(--sp-lg); border-top:1px solid var(--hairline); max-width:64ch}
.site-footer{background:var(--c-violet-ink); color:#c6cfca; --hairline:var(--hairline-d); padding-block:var(--sp-5xl) var(--sp-3xl)}
.foot-head{display:grid; grid-template-columns:.46fr .54fr; gap:var(--sp-3xl) var(--grid-gap); align-items:start; padding-block-end:var(--sp-4xl); border-bottom:1px solid var(--hairline)}
.foot-brand{display:flex; flex-direction:column; gap:var(--sp-md)} .foot-brand .brand-word{color:#fff} .foot-tag{font-family:var(--serif); font-style:italic; font-size:20px; color:var(--c-gold)}
.foot-cols{display:grid; grid-template-columns:repeat(4,1fr); gap:var(--sp-3xl) var(--grid-gap); padding-block:var(--sp-4xl)}
.foot-col{display:flex; flex-direction:column; gap:var(--sp-sm)} .foot-col h3{font-family:var(--serif); font-size:14px; letter-spacing:.16em; text-transform:uppercase; color:var(--c-gold); font-weight:600; margin-bottom:4px}
.foot-link{display:inline-flex; align-items:center; min-height:40px; font-size:14.5px; color:#c6cfca; transition:color var(--dur-fast) var(--ease-out)} .foot-link:hover{color:#fff}
.foot-bottom{padding-block-start:var(--sp-3xl); border-top:1px solid var(--hairline)}
.foot-legal{font-size:12.5px; color:#97a09a; line-height:1.85; max-width:90ch}
.foot-note{margin-block-start:var(--sp-lg); font-size:11.5px; line-height:1.8; color:#949d97; max-width:96ch}

/* ── reveal ── */
.reveal{opacity:0; transform:translateY(var(--rise)); transition:opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); transition-delay:calc(var(--i,0)*var(--stagger))}
.reveal.is-in{opacity:1; transform:none}
.reveal--left{transform:translateX(calc(-1*var(--rise)))} .reveal--right{transform:translateX(var(--rise))}
.reveal--zoom{transform:scale(.96)}
.stagger>*{--i:0}.stagger>*:nth-child(2){--i:1}.stagger>*:nth-child(3){--i:2}.stagger>*:nth-child(4){--i:3}.stagger>*:nth-child(5){--i:4}.stagger>*:nth-child(6){--i:5}.stagger>*:nth-child(7){--i:6}.stagger>*:nth-child(8){--i:7}

@media (max-width:1180px){ .nav,.nav-cta{display:none} .menu-toggle{display:inline-flex} .field-grid{grid-template-columns:repeat(2,1fr)} }
@media (max-width:900px){
  .philo-grid,.proc-grid,.clinic-grid,.closing-grid{grid-template-columns:1fr; gap:var(--sp-3xl)} .philo-media{order:-1; max-width:560px}
  .section-head,.foot-head{grid-template-columns:1fr; gap:var(--sp-lg)} .section-head__body{align-items:flex-start}
  .item-grid,.item-grid--3,.item-grid--4{grid-template-columns:1fr} .event-grid{grid-template-columns:1fr}
}
@media (max-width:640px){
  body{font-size:16px} .field-grid,.foot-cols{grid-template-columns:1fr} .stat-grid{grid-template-columns:repeat(2,1fr); gap:var(--sp-2xl) var(--sp-lg)}
  /* 좁은 화면에서는 화살표를 숨기되, 자동 넘김을 멈출 수단은 남긴다 */
  .hero-arrows{inset:auto var(--gutter) calc(var(--sp-xl) + 44px) auto}
  .hero-prev,.hero-next{display:none}
  .hero{height:auto; min-height:0; padding-block:0}
  .hero-track{position:relative; height:78vh} .hero-inner{position:absolute; inset:0}
}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *,*::before,*::after{transition-duration:.001ms!important; animation-duration:.001ms!important} .reveal{opacity:1; transform:none} }

/* ══════════════════════════════════════════════════════════════
   바른영치과의원 — 템플릿 확장분
   base: rebeauty 260626i95e6-01 template
   ══════════════════════════════════════════════════════════════ */

/* ── [병원 요청] 베이지 연속성 ────────────────────────────────
   시안은 기본 바탕을 #ffffff로 바꿔 히어로에서 흰색으로 뚝 끊겼음.
   원본 템플릿의 --c-canvas(#f7f4ee)를 기본 바탕으로 되돌리고,
   히어로 하단에 베이지 브리지를 깔아 따뜻하게 이어지도록 처리.        */
.section--paper{background:var(--c-canvas)}          /* 순백 밴드 → 베이지 */
.hero::after{content:""; position:absolute; left:0; right:0; bottom:0; height:clamp(90px,12vw,170px);
  z-index:2; pointer-events:none;
  background:linear-gradient(180deg,rgba(247,244,238,0) 0%,rgba(247,244,238,.55) 55%,var(--c-canvas) 100%)}
.phero::after{content:""; position:absolute; left:0; right:0; bottom:0; height:clamp(60px,8vw,110px);
  z-index:1; pointer-events:none;
  background:linear-gradient(180deg,rgba(247,244,238,0) 0%,var(--c-canvas) 100%)}
.philo-media,.proc-media,.closing-media,.field-media{background:var(--c-cream)}

/* ── 로고 락업 ── */
.brand-lockup img{height:34px; width:auto; display:block}
.site-header .logo-dark{display:none}
.site-header.is-solid .logo-light,.site-header:hover .logo-light,.site-header:focus-within .logo-light{display:none}
.site-header.is-solid .logo-dark,.site-header:hover .logo-dark,.site-header:focus-within .logo-dark{display:block}
.foot-brand img{height:38px; width:auto}
.drawer-top img{height:30px; width:auto}

/* ── 우측 플로팅 퀵메뉴 ── */
.quick{position:fixed; right:clamp(10px,1.4vw,22px); top:50%; transform:translateY(-50%); z-index:80;
  display:flex; flex-direction:column; background:#fff; border-radius:var(--r-md);
  box-shadow:0 18px 40px -20px rgba(35,42,38,.45); overflow:hidden; border:1px solid var(--hairline-l)}
/* 2026-09-28: 퀵 패널(폭 90px, 불투명)이 컨테이너(1392px) 바깥에 설 자리가 없는 폭에서는
   본문 글자를 덮는다. 자리가 나는 1616px 이상에서만 띄운다. 1180px 이하는 하단 고정바가 대신한다. */
@media (max-width:1615px){ .quick{display:none} }

.quick a{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:7px;
  width:88px; padding:16px 6px; font-size:12px; font-weight:600; color:var(--c-graphite);
  border-bottom:1px solid var(--hairline-l); transition:background var(--dur-fast) var(--ease-out)}
.quick a:last-child{border-bottom:none}
.quick a:hover{background:var(--c-mist); color:var(--c-violet-deep)}
.quick .ico{width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center; overflow:hidden}
.quick .ico img{width:26px; height:auto}
.quick .ico--naver{background:#03c75a} .quick .ico--talk{background:#000} .quick .ico--blog{background:#03c75a}
@media (max-width:1180px){ .quick{display:none} }

/* ── 주요진료 카드 (3열) ── */
.care-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--grid-gap)}
.care-grid .field-media{aspect-ratio:16/10}
@media (max-width:900px){ .care-grid{grid-template-columns:repeat(2,1fr)} }
@media (max-width:640px){ .care-grid{grid-template-columns:1fr} }

/* ── HOURS / LOCATION ── */
.hours-grid{display:grid; grid-template-columns:.92fr 1.08fr; gap:var(--sp-5xl) var(--grid-gap); align-items:center}
.hours-map{border-radius:var(--r-lg); overflow:hidden; aspect-ratio:16/9; background:var(--c-mist)}
.hours-map img{width:100%; height:100%; object-fit:cover}
.hours-table{display:grid; grid-template-columns:auto 1fr; gap:0 var(--sp-xl)}
.hours-table dt,.hours-table dd{margin:0; padding-block:var(--sp-md); border-top:1px solid var(--hairline); font-size:15.5px}
.hours-table dt{font-weight:700; color:var(--c-violet-ink); white-space:nowrap}
.hours-table dd{color:var(--c-graphite); letter-spacing:.01em}
.hours-note{margin-block-start:var(--sp-md); font-size:13px; line-height:1.9; color:var(--c-slate)}
@media (max-width:900px){ .hours-grid{grid-template-columns:1fr; gap:var(--sp-3xl)} }

/* ── VS 비교 다이어그램 (서브1) ── */
.vs-wrap{display:grid; grid-template-columns:1fr auto 1fr; gap:var(--sp-xl); align-items:center}
.vs-box{border-radius:var(--r-lg); overflow:hidden; background:var(--c-paper); border:1px solid var(--hairline-l)}
.vs-box__head{padding:14px var(--sp-xl); font-size:17px; font-weight:700; text-align:center; letter-spacing:-.02em}
.vs-box--plain .vs-box__head{background:#d8d2c4; color:var(--c-graphite)}
.vs-box--oneday .vs-box__head{background:var(--c-violet-deep); color:#fff}
.vs-box__body{padding:var(--sp-2xl) var(--sp-xl); min-height:270px; display:flex; align-items:center; justify-content:center}
.vs-box--plain .vs-box__body{background:var(--c-canvas)}
.vs-box--oneday .vs-box__body{background:var(--c-mist)}
.vs-steps{display:flex; flex-wrap:wrap; gap:var(--sp-lg); justify-content:center; align-items:center}
.vs-step{width:104px; height:104px; border-radius:50%; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:2px; text-align:center; line-height:1.25; background:#fff; border:1px solid var(--hairline-l)}
.vs-step .no{font-size:11.5px; font-weight:600; color:var(--c-slate); letter-spacing:.02em}
.vs-step .nm{font-size:14.5px; font-weight:700; color:var(--c-violet-ink)}
.vs-step .sub{font-size:10.5px; color:var(--c-slate); line-height:1.2}
.vs-box--oneday .vs-step{width:118px; height:118px; background:var(--c-violet-deep); border-color:transparent}
.vs-box--oneday .vs-step .no{color:rgba(255,255,255,.72)}
.vs-box--oneday .vs-step .nm{color:#fff}
.vs-box--oneday .vs-step .sub{color:rgba(255,255,255,.7)}
.vs-arrow{color:var(--c-gold); font-size:20px; line-height:1}
.vs-mark{font-family:var(--serif); font-size:clamp(26px,3vw,40px); font-weight:600; color:var(--c-violet-ink); letter-spacing:.02em}
.vs-foot{margin-block-start:var(--sp-lg); font-size:13.5px; line-height:1.75; color:var(--c-slate); text-align:center}
@media (max-width:900px){
  .vs-wrap{grid-template-columns:1fr; gap:var(--sp-lg)}
  .vs-mark{text-align:center; padding-block:var(--sp-sm)}
  .vs-box__body{min-height:0; padding:var(--sp-xl) var(--sp-lg)}
  .vs-step{width:92px; height:92px} .vs-box--oneday .vs-step{width:100px; height:100px}
}

/* ── 체크 카드 (서브1 치료 전 확인사항) ── */
.check-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:var(--grid-gap)}
.check-card{display:flex; flex-direction:column; gap:var(--sp-md); padding:var(--card-pad);
  border:1px solid rgba(255,255,255,.28); border-radius:var(--r-lg); background:rgba(255,255,255,.06)}
.check-card .ic{width:30px; height:30px; border-radius:50%; border:1px solid #e3d1a3; color:#e3d1a3;
  display:flex; align-items:center; justify-content:center; font-size:14px}
.check-card p{font-size:15px; font-weight:600; line-height:1.5; color:#fff}
@media (max-width:900px){ .check-grid{grid-template-columns:repeat(2,1fr)} }
@media (max-width:520px){ .check-grid{grid-template-columns:1fr} }

/* ── 번호 리스트 (라미네이트 차이점) ── */
.diff-list{display:flex; flex-direction:column}
.diff-row{display:grid; grid-template-columns:auto 1fr; gap:var(--sp-lg); padding-block:var(--sp-lg); border-top:1px solid var(--hairline)}
.diff-row:last-child{border-bottom:1px solid var(--hairline)}
.diff-row .no{font-family:var(--serif); font-size:26px; font-weight:500; line-height:1.2; color:var(--c-gold-deep); min-width:40px}
.diff-row h3{font-size:18px; font-weight:700; color:var(--c-violet-ink); margin-block-end:4px}
.diff-row p{font-size:15px; line-height:1.65; color:var(--c-slate)}

/* ── Before / After 갤러리 ── */
.ba-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:var(--sp-2xl) var(--grid-gap)}
.ba-pair{display:grid; grid-template-columns:1fr 1fr; gap:var(--grid-gap)}
.ba-shot{position:relative; border-radius:var(--r-lg); overflow:hidden; aspect-ratio:69/40; background:#111}
.ba-shot img{width:100%; height:100%; object-fit:cover}
.ba-shot .lbl{position:absolute; top:0; left:50%; transform:translateX(-50%);
  padding:5px 22px; border-radius:0 0 var(--r-md) var(--r-md);
  font-family:var(--serif); font-size:14px; font-weight:600; letter-spacing:.06em; color:#fff}
.ba-shot--before .lbl{background:#6f6155}
.ba-shot--after  .lbl{background:var(--c-violet)}
.ba-more{display:flex; justify-content:center; margin-block-start:var(--sp-3xl)}
@media (max-width:900px){ .ba-grid{grid-template-columns:1fr} }

/* ── 마퀴 (라미네이트 미소 스트립) ── */
.marquee{overflow:hidden; margin-block-start:var(--sp-3xl); -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.marquee__track{display:flex; gap:var(--grid-gap); width:max-content; animation:mq 46s linear infinite}
.marquee:hover .marquee__track{animation-play-state:paused}
.marquee img{width:clamp(150px,17vw,235px); aspect-ratio:1; object-fit:cover; border-radius:var(--r-lg); display:block}
@keyframes mq{from{transform:translateX(0)} to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){ .marquee__track{animation:none} }

/* ── 이미지 배경 다크 섹션 ── */
.section--photo{position:relative; background:var(--c-violet-ink); color:#eef3f0; --hairline:var(--hairline-d); overflow:hidden}
.section--photo>.bg{position:absolute; inset:0; z-index:0}
.section--photo>.bg img{width:100%; height:100%; object-fit:cover}
.section--photo>.bg::after{content:""; position:absolute; inset:0; background:rgba(28,34,30,.78)}
.section--photo>.container{position:relative; z-index:1}
.section--photo .muted{color:#ccd5cf}
.section--photo .eyebrow{color:var(--c-gold)}
.section--photo .btn--solid{background:var(--c-violet); color:#fff}
.section--photo .btn--solid:hover{background:#6f9d8e}

/* ── 인트로 2단 ── */
.intro-grid{display:grid; grid-template-columns:.86fr 1.14fr; gap:var(--sp-5xl) clamp(28px,4vw,64px); align-items:center}
.intro-media{border-radius:var(--r-lg); overflow:hidden; aspect-ratio:3/4; background:var(--c-cream)}
.intro-media img{width:100%; height:100%; object-fit:cover}
.intro-body{display:flex; flex-direction:column; gap:var(--sp-lg); align-items:flex-start}
.intro-body .lead{font-size:15.5px; line-height:1.8; color:var(--c-slate)}
.intro-body .lead strong{color:var(--c-violet-ink); font-weight:700}
@media (max-width:900px){ .intro-grid{grid-template-columns:1fr; gap:var(--sp-2xl)} .intro-media{aspect-ratio:4/3; max-width:560px} }

/* ── 하단 CTA 밴드 ── */
.cta-band{display:flex; flex-direction:column; align-items:center; gap:var(--sp-lg); text-align:center}
.cta-band p{max-width:62ch}

/* ── 푸터 사업자정보 한 줄 ── */
.foot-legal span{white-space:nowrap} .foot-legal span+span::before{content:"·"; margin-inline:8px; color:#6d766f}

/* ── 히어로: 시안은 수직 중앙 정렬 ── */
.hero-inner--mid{justify-content:center; padding-block-end:0}
.hero-inner--mid .hero-cap{margin-block-end:clamp(40px,6vw,90px)}
.hero .serif-hero{font-size:clamp(38px,5.6vw,86px)}

/* ── 홈 브랜드 밴드 — 히어로와 주요진료 사이 (2026-09-29 복원) ── */
/* 배경은 히어로 브리지가 도착하는 캔버스와 같은 색이라 이음매에 가로줄이 생기지 않는다.
   세로 여백은 아래 '섹션 여백 정본' 목록에서 함께 관리한다. */
.brand-band{background:var(--c-canvas); text-align:center}
.brand-band__mark{margin:0; color:var(--c-gold-deep)}   /* 캔버스 위 5.09:1 — AA 통과 */

/* ══════════════════════════════════════════════════════════════
   시안 실측 반영 + 검토 지적사항 보정
   ══════════════════════════════════════════════════════════════ */

/* ── 시안 그리드 실측치 ────────────────────────────────────────
   시안(1920px) 픽셀 측정: 콘텐츠 320~1599px = 1280px,
   주요진료 카드 400px × 3, 갭 40px (400*3 + 40*2 = 1280).
   템플릿 기본값(콘텐츠 1168 / 갭 28)이 아니라 시안 기준으로 맞춤.        */
:root{ --container:1392px; --grid-gap:clamp(16px,2.2vw,40px) }
.care-grid .field-media{aspect-ratio:40/31}   /* 카드 400×310 실측 */

/* ── 서브 히어로 배경 이미지 ──────────────────────────────────
   주의: 커스텀 속성 안의 url()은 var()를 "쓰는" 스타일시트 기준으로
   해석되므로, HTML 인라인 --ph 방식은 경로가 깨집니다.
   페이지별 클래스로 이 파일 안에서 지정하세요 (경로는 css/ 기준).       */
.phero--sub1::before{background-image:var(--tint),url('../img/sub1-hero.jpg')}
/* 2026-09-28: 임플란트 렌더(sub1-hero)가 일반진료·병원소개 9쪽의 머리 사진으로 쓰이고 있었다.
   새 CG 히어로가 들어오면 아래 두 클래스로 바꾼다. */
/* 새 CG 히어로는 치아색이 살아 있어야 해서 딥그린 틴트를 옅게 쓴다 (글자 대비는 아래 그라데이션으로 확보) */
.phero--general::before,.phero--about::before{
  background-image:linear-gradient(180deg,rgba(35,42,38,.30) 0%,rgba(35,42,38,.52) 58%,rgba(35,42,38,.68) 100%),var(--hero-photo);
  background-size:cover,cover; background-position:center,center}
.phero--general::before{--hero-photo:url('../img/hero-general.jpg')}
.phero--about::before{--hero-photo:url('../img/hero-about.jpg')}
.phero--sub2::before{background-image:var(--tint),url('../img/sub2-hero.jpg')}

/* ── 진료안내 액션 버튼 ── */
.hours-actions{display:flex; flex-wrap:wrap; gap:var(--sp-md); margin-block-start:var(--sp-xl)}

/* ── 푸터 슬로건 (템플릿 foot-tag 복원) ── */
.foot-tag{font-family:var(--serif); font-style:italic; font-size:20px; color:var(--c-gold)}

/* ── 모바일 하단 고정 CTA 바 ──────────────────────────────────
   기존 사이트의 #m_quick_menu 대체. PC 플로팅 퀵메뉴가 1180px
   이하에서 숨겨지므로, 네이버예약·카톡 진입점이 사라지지 않도록 복원.   */
.mcta{position:fixed; left:0; right:0; bottom:0; z-index:85; display:none;
  background:var(--c-violet-ink); box-shadow:0 -8px 24px -12px rgba(0,0,0,.5);
  padding-bottom:env(safe-area-inset-bottom)}
.mcta a{flex:1 1 0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
  min-height:58px; padding:9px 4px; font-size:12px; font-weight:600; color:#e3e9e5;
  border-left:1px solid rgba(255,255,255,.14)}
.mcta a:first-child{border-left:none}
.mcta a .ic{font-size:16px; line-height:1}
.mcta a.is-primary{background:var(--c-violet); color:#fff}
@media (max-width:1180px){
  .mcta{display:flex}
  body{padding-bottom:58px}
  .site-footer{padding-block-end:var(--sp-3xl)}
}

/* ── [선택] 예약 버튼 명암비 강화 ─────────────────────────────
   현재 #5e8c7e + 흰 글씨 = 3.81:1 로 WCAG AA(4.5:1) 미달입니다.
   시안/템플릿 색을 그대로 쓴 값이라 임의로 바꾸지 않았습니다.
   접근성을 우선하려면 아래 두 줄의 주석을 해제하세요 (7.1:1).       */
/* .btn--solid{background:var(--c-violet-deep)} */
/* .btn--solid:hover{background:#33504a} */

/* ── 고스트 밴드: 시안은 1줄 (템플릿 기본 260px는 3줄로 깨짐) ── */
.ghost{font-size:clamp(22px,4.9vw,94px); white-space:nowrap; letter-spacing:.01em;
  -webkit-text-stroke:1px rgba(94,140,126,.30); text-stroke:1px rgba(94,140,126,.30)}

/* ── 로고: flex column 안에서 stretch되어 늘어나는 것 방지 ── */
.foot-brand{align-items:flex-start}
.foot-brand img{align-self:flex-start; height:40px}
.brand-lockup img{height:34px; width:auto; flex:none}

/* ── 퀵메뉴 아이콘: 기존 사이트 아이콘이 이미 브랜드 컬러라 배경 제거 ── */
.quick .ico{background:var(--c-canvas); border:1px solid var(--hairline-l)}
.quick .ico--naver,.quick .ico--talk,.quick .ico--blog{background:var(--c-canvas)}
.quick .ico img{width:24px}

/* ══ 시안 대조 후 보정 ══════════════════════════════════════ */

/* 서브 히어로: 사진 + 딥그린 틴트 (시안은 사진이 또렷하게 보임) */
.phero{background:var(--c-violet-ink);
  --tint:linear-gradient(180deg,rgba(58,70,62,.50) 0%,rgba(63,95,85,.68) 62%,rgba(63,95,85,.80) 100%)}
.phero::before{opacity:1; background-size:cover,cover; background-position:center,center}
.phero::after{display:none}      /* 시안은 서브 히어로 하단이 하드 엣지 */

/* 인트로 이미지: 시안 실측 3:2 가로형 */
.intro-media{aspect-ratio:3/2}
@media (max-width:900px){ .intro-media{aspect-ratio:3/2} }

/* VS 비교: 일반 임플란트는 시안대로 3+2 줄바꿈 */
.vs-box--plain .vs-steps{max-width:376px; margin-inline:auto}

/* Before/After: 시안은 1행 1쌍 (이미지 620px × 2 + 갭 40 = 1280) */
.ba-grid{grid-template-columns:1fr; gap:var(--grid-gap)}

/* ── 서브2 클로징: 시안은 검정 바탕 + 상단 이미지 밴드 (이미지 하단이 검정이라 자연 블렌드) ── */
.closing-dark{background:#000; color:#eef3f0; --hairline:var(--hairline-d); padding-block:0 var(--section-pad); overflow:hidden}
.closing-band{width:100%; line-height:0; margin-block-end:clamp(24px,4vw,56px)}
.closing-band img{width:100%; height:auto; display:block}
.closing-dark .muted{color:#b9c2bc}
.closing-dark .cta-band strong{color:#fff}
.closing-dark .btn--solid{background:var(--c-violet); color:#fff}
.closing-dark .btn--solid:hover{background:#6f9d8e}

/* ── 치료사례 하단 고지문: 중앙 정렬 시 폭 제한 ── */
.disclaimer--block{margin-inline:auto}

/* ── 모바일: 라벨 줄바꿈 방지 ── */
@media (max-width:640px){
  .eyebrow{font-size:13px; letter-spacing:.18em; flex-wrap:wrap; justify-content:center}
  .section-head:not(.section-head--center) .eyebrow{justify-content:flex-start}
}

/* ── 모바일: 라벨 줄바꿈 방지 ── */
@media (max-width:640px){
  .eyebrow{font-size:13px; letter-spacing:.18em; flex-wrap:wrap; justify-content:center}
  .section-head:not(.section-head--center) .eyebrow{justify-content:flex-start}
}

/* ══ 통합진료 10개 항목 — 2단 드롭다운 / 푸터 2칸 ══════════════ */

/* 헤더: 항목이 많은 메뉴는 설명을 곁들인 2단 패널.
   통합진료는 GNB 우측 끝이라 중앙 정렬하면 화면을 넘침 → 오른쪽 기준으로 고정. */
.nav-panel--two{display:grid; grid-template-columns:repeat(2,minmax(206px,1fr)); gap:2px; padding:10px;
  left:auto; right:0; transform:translateX(0) translateY(8px)}
.nav-item:hover .nav-panel--two,.nav-item:focus-within .nav-panel--two{transform:translateX(0) translateY(0)}
.nav-panel--two a{display:flex; flex-direction:column; gap:1px; padding:9px 12px; white-space:normal}
.nav-panel--two a b{font-size:13.5px; font-weight:600; color:var(--c-violet-ink); line-height:1.35}
.nav-panel--two a i{font-style:normal; font-size:11.5px; line-height:1.4; color:var(--c-slate)}
.nav-panel--two a:hover b{color:var(--c-violet)}
.nav-panel--two a:hover i{color:var(--c-violet-deep)}

/* 푸터: 항목 많은 컬럼은 폭을 넓게 잡고 내부에서 2단으로 접음.
   4·5·3·10 항목이 각각 4·5·3·5줄이 되어 컬럼 높이가 고르게 맞습니다. */
.foot-links{display:flex; flex-direction:column; gap:var(--sp-sm)}
.foot-cols{grid-template-columns:1fr 1fr 1fr 1.85fr}
.foot-col--wide .foot-links{display:grid; grid-template-columns:repeat(2,1fr); gap:0 var(--grid-gap)}
@media (max-width:900px){
  .foot-cols{grid-template-columns:repeat(2,1fr)}
  .foot-col--wide{grid-column:span 2}
}
@media (max-width:640px){
  .foot-cols{grid-template-columns:1fr}
  .foot-col--wide{grid-column:auto}
  .foot-col--wide .foot-links{grid-template-columns:repeat(2,1fr)}
}

/* ══════════════════════════════════════════════════════════════
   헤더 드롭다운 — 상위 메뉴마다 자기 패널 하나만 연다. 2026-09-23
   이전(LUCID형 풀와이드 메가)은 .nav 전체 hover 로 7개 열이 한꺼번에 펼쳐져
   본문을 가렸다. .nav-item 단위 hover/focus-within 으로 바꾸면서
   .nav-tops / .mega / .mega-cols 규칙과 뒤에 덧대던 폭 보정 규칙을 모두 걷어냈다.
   ══════════════════════════════════════════════════════════════ */
.nav{position:relative; display:flex; align-items:stretch; justify-content:center;
  gap:clamp(0px,.5vw,10px); flex:1 1 auto; min-width:0}
.nav-item{position:relative; display:flex; align-items:center}
.nav-top{display:inline-flex; align-items:center; justify-content:center; height:var(--header-h);
  padding:0 clamp(8px,1vw,18px); font-size:17px; font-weight:700; letter-spacing:-.02em;
  opacity:1; white-space:nowrap; text-align:center}
.site-header.is-solid .nav-item:hover .nav-top,.site-header:hover .nav-item:hover .nav-top,.site-header:focus-within .nav-item:focus-within .nav-top,.site-header.is-solid .nav-top:hover,.site-header:hover .nav-top:hover,.site-header.is-solid .nav-top.is-active,.site-header:hover .nav-top.is-active,.site-header:focus-within .nav-top.is-active{color:var(--c-violet)}
.site-header .nav-top.is-active{position:relative}
.site-header .nav-top.is-active::after{content:""; position:absolute; left:10px; right:10px; bottom:18px;
  height:2px; background:currentColor; opacity:.85}

/* 상단 메뉴와 패널 사이 빈 틈을 지나도 닫히지 않도록 놓는 다리 */
.nav-item::after{content:""; position:absolute; left:0; right:0; top:100%; height:14px}

.nav-panel{position:absolute; top:calc(100% - 4px); left:50%; transform:translateX(-50%) translateY(6px);
  min-width:190px; padding:10px; background:rgba(255,255,255,.98);
  border:1px solid var(--hairline-l); border-radius:var(--r-md);
  box-shadow:0 26px 48px -26px rgba(35,42,38,.45);
  opacity:0; visibility:hidden; pointer-events:none; z-index:92;
  transition:opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out),
             visibility 0s linear var(--dur-fast)}
.nav-item:hover .nav-panel,.nav-item:focus-within .nav-panel,.nav-item.is-open .nav-panel{opacity:1; visibility:visible;
  pointer-events:auto; transform:translateX(-50%) translateY(0); transition-delay:0s}
.nav-panel a{display:block; padding:9px 16px; font-size:15px; font-weight:500; line-height:1.5;
  color:var(--c-slate); border-radius:var(--r-sm); white-space:nowrap; text-align:center;
  transition:color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out)}
.nav-panel a:hover,.nav-panel a:focus-visible{background:var(--c-mist); color:var(--c-violet)}

/* 항목이 많은 묶음(일반진료)은 패널 안에서 2열로 접어 세로로 길어지지 않게 한다 */
.nav-panel--two{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 4px; min-width:340px}

/* 화면 양끝 메뉴는 패널이 잘리지 않도록 안쪽으로 붙인다 */
.nav-item:first-child .nav-panel{left:0; transform:translateX(0) translateY(6px)}
.nav-item:first-child:hover .nav-panel,.nav-item:first-child:focus-within .nav-panel{transform:translateX(0) translateY(0)}
.nav-item:last-child .nav-panel{left:auto; right:0; transform:translateX(0) translateY(6px)}
.nav-item:last-child:hover .nav-panel,.nav-item:last-child:focus-within .nav-panel{transform:translateX(0) translateY(0)}

/* 드롭다운이 열리면 헤더는 흰 배경으로 — 히어로 위 투명 헤더에서도 글자가 읽히게 */
.site-header:hover,.site-header:focus-within{background:rgba(255,255,255,.98)}

@media (max-width:1460px){
  .nav-top{font-size:15.5px; padding-inline:clamp(6px,.8vw,12px)}
  .nav-panel a{font-size:14px; padding-inline:12px}
}
@media (max-width:1180px){
  .nav{display:none} .nav-cta{display:none} .menu-toggle{display:inline-flex}
}

/* 푸터 5컬럼 */
.foot-links{display:flex; flex-direction:column; gap:var(--sp-sm)}
.foot-cols{grid-template-columns:repeat(5,1fr)}
@media (max-width:980px){ .foot-cols{grid-template-columns:repeat(3,1fr)} }
@media (max-width:640px){ .foot-cols{grid-template-columns:repeat(2,1fr)} }

/* ── 모바일 드로어 문구 확대 (영문 라벨 제거에 맞춰 여백 재조정) ── */
.acc-top{font-family:var(--ff); font-size:21px; font-weight:700; letter-spacing:-.02em; padding:19px 4px}
.acc-panel a{font-size:16.5px; padding:11px 8px; min-height:44px}
.acc-panel a strong{font-weight:700}

/* ── 모바일: 좌우 진입 애니메이션이 6px 가로 넘침을 만들어 세로로 전환 ── */
@media (max-width:640px){
  .reveal--left,.reveal--right{transform:translateY(var(--rise))}
}

/* ══════════════════════════════════════════════════════════════
   전체 서브페이지용 추가 컴포넌트
   (원데이 임플란트·라미네이트에서 쓴 어휘를 그대로 확장)
   ══════════════════════════════════════════════════════════════ */

/* ── STEP 가로 플로우 ── */
.flow{display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:var(--grid-gap)}
.flow-step{display:flex; flex-direction:column; gap:6px; padding:var(--card-pad);
  background:var(--c-paper); border:1px solid var(--hairline-l); border-radius:var(--r-lg); text-align:center;
  align-items:center; position:relative}
.flow-media{width:100%; aspect-ratio:4/3; border-radius:var(--r-md); overflow:hidden;
  background:var(--c-mist); margin-block-end:var(--sp-sm)}
.flow-media img{width:100%; height:100%; object-fit:cover}
.flow-no{font-family:var(--serif); font-size:13px; font-weight:600; letter-spacing:.16em;
  text-transform:uppercase; color:var(--c-gold-deep)}
.flow-body{display:flex; flex-direction:column; gap:6px; align-items:inherit; width:100%}
.flow-step h3{font-size:17px; font-weight:700; color:var(--c-violet-ink); line-height:1.35}
.flow-step p{font-size:14px; line-height:1.6; color:var(--c-slate)}
.section--photo .flow-step,.section--violet .flow-step{background:rgba(255,255,255,.06);
  border-color:rgba(255,255,255,.24)}
.section--photo .flow-step h3,.section--violet .flow-step h3{color:#fff}
.section--photo .flow-step p,.section--violet .flow-step p{color:#c2ccc6}
.section--photo .flow-no,.section--violet .flow-no{color:var(--c-gold)}

/* ── 갤러리 ── */
.gal-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--grid-gap)}
.gal{margin:0; border-radius:var(--r-lg); overflow:hidden; aspect-ratio:4/3; background:var(--c-mist)}
.gal img{width:100%; height:100%; object-fit:cover;
  transition:transform var(--dur-slow) var(--ease-out)}
.gal:hover img{transform:scale(1.04)}
@media (max-width:900px){ .gal-grid{grid-template-columns:repeat(2,1fr)} }
@media (max-width:560px){ .gal-grid{grid-template-columns:1fr} }

/* ── 표 (비급여수가표) ── */
.tablewrap{overflow-x:auto; border:1px solid var(--hairline-l); border-radius:var(--r-lg);
  background:var(--c-paper)}
table.price{width:100%; border-collapse:collapse; min-width:520px; font-size:15px}
table.price caption{text-align:left; padding:var(--sp-lg) var(--sp-xl) 0;
  font-size:13px; color:var(--c-slate)}
table.price th,table.price td{text-align:left; padding:14px var(--sp-xl);
  border-top:1px solid var(--hairline-l); vertical-align:top; line-height:1.6}
table.price thead th{border-top:none; background:var(--c-mist); font-size:13px; font-weight:700;
  letter-spacing:.04em; color:var(--c-violet-ink); white-space:nowrap}
table.price td:first-child{font-weight:600; color:var(--c-violet-ink)}
table.price td:last-child{white-space:nowrap; font-variant-numeric:tabular-nums; color:var(--c-graphite)}
/* 모바일에서는 좌우로 밀지 않고 화면 안에 들어오게 — 칸 여백을 줄이고,
   "10만원 (gi core는 보험비용 발생)" 처럼 설명이 붙은 금액은 줄바꿈을 허용한다 */
@media (max-width:640px){
  table.price{min-width:0; font-size:14px}
  table.price th,table.price td{padding:12px 14px}
  table.price caption{padding:var(--sp-md) 14px 0}
  table.price td:last-child{white-space:normal}
}

/* ── 의료진 프로필 ── */
.doc-grid{display:grid; grid-template-columns:.8fr 1.2fr; gap:var(--sp-5xl) clamp(28px,4vw,64px);
  align-items:start}
.doc-media{border-radius:var(--r-lg); overflow:hidden; aspect-ratio:3/4; background:var(--c-cream)}
.doc-media img{width:100%; height:100%; object-fit:cover; object-position:top center}
.doc-body .role{font-family:var(--serif); font-size:16px; font-weight:600; letter-spacing:.16em;
  text-transform:uppercase; color:var(--c-gold-deep)}
.doc-body .name{font-size:clamp(30px,4vw,44px); font-weight:700; letter-spacing:.08em;
  color:var(--c-violet-ink); margin-block:6px var(--sp-lg)}
.doc-cv{list-style:none; padding:0; margin:0; display:grid; grid-template-columns:repeat(2,1fr);
  gap:0 var(--grid-gap)}
.doc-cv li{display:flex; gap:var(--sp-md); align-items:flex-start; padding-block:9px;
  border-top:1px solid var(--hairline); font-size:14.5px; line-height:1.55; color:var(--c-graphite)}
.doc-cv li::before{content:""; flex:none; width:5px; height:5px; margin-top:9px; border-radius:50%;
  background:var(--c-gold)}
@media (max-width:900px){
  .doc-grid{grid-template-columns:1fr; gap:var(--sp-2xl)}
  .doc-media{aspect-ratio:4/3; max-width:460px}
  .doc-cv{grid-template-columns:1fr}
}

/* ── 진료시간 카드 (오시는길) ── */
.info-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:var(--grid-gap)}
.info-card{padding:var(--card-pad); background:var(--c-paper); border:1px solid var(--hairline-l);
  border-radius:var(--r-lg)}
.info-card h3{font-family:var(--serif); font-size:14px; font-weight:600; letter-spacing:.16em;
  text-transform:uppercase; color:var(--c-gold-deep); margin-block-end:var(--sp-sm)}
.info-card p{font-size:15.5px; line-height:1.7; color:var(--c-graphite)}
.info-card .big{font-size:22px; font-weight:700; color:var(--c-violet-ink); letter-spacing:-.01em}

/* ── 중간 라벨(3컷 비교) ── */
.ba-shot--mid .lbl{background:var(--c-slate)}

/* ── 진료과목 아이콘 카드 (통합진료) ── */
.care-icons{display:grid; grid-template-columns:repeat(5,1fr); gap:var(--grid-gap)}
.care-icon{display:flex; flex-direction:column; align-items:center; gap:6px; text-align:center;
  padding:var(--card-pad) var(--sp-lg); background:var(--c-cream); border-radius:var(--r-lg);
  scroll-margin-top:calc(var(--header-h) + 24px);
  transition:transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out)}
.care-icon:hover{transform:translateY(-5px); box-shadow:0 26px 50px -32px rgba(63,95,85,.45)}
.care-icon .ci{width:82px; height:82px; border-radius:50%; background:var(--c-gold-deep);
  display:flex; align-items:center; justify-content:center; margin-block-end:var(--sp-sm)}
.care-icon .ci img{width:46px; height:46px}
.care-icon h3{font-size:18px; font-weight:700; color:var(--c-violet-ink); letter-spacing:-.02em}
.care-icon p{font-size:14px; line-height:1.55; color:var(--c-slate)}
.care-icon:target{outline:2px solid var(--c-violet); outline-offset:4px}
@media (max-width:1100px){ .care-icons{grid-template-columns:repeat(3,1fr)} }
@media (max-width:680px){ .care-icons{grid-template-columns:repeat(2,1fr)} }

/* ── 8가지 약속 (통합진료) ── */
.promise-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:var(--grid-gap)}
.promise{display:grid; grid-template-columns:132px 1fr; gap:var(--sp-xl); align-items:start;
  padding:var(--card-pad); background:var(--c-paper); border:1px solid var(--hairline-l);
  border-radius:var(--r-lg)}
.promise-media{border-radius:var(--r-md); overflow:hidden; aspect-ratio:1; background:var(--c-mist)}
.promise-media img{width:100%; height:100%; object-fit:cover}
.promise-body{display:flex; flex-direction:column; gap:6px}
.promise-no{font-family:var(--serif); font-size:26px; font-weight:500; line-height:1;
  color:var(--c-gold-deep)}
.promise-body p{font-size:14.5px; line-height:1.65; color:var(--c-slate)}
.promise-body .tick-list{gap:5px; margin-block-start:4px}
.promise-body .tick-list li{font-size:13.5px; line-height:1.5}
.promise-body .tick-list li::before{width:5px; height:5px; margin-top:7px}
@media (max-width:900px){ .promise-grid{grid-template-columns:1fr} }
@media (max-width:520px){ .promise{grid-template-columns:96px 1fr; gap:var(--sp-lg)} }

/* ── 조건별 항목 카드 (질환별 체크사항 등) ── */
.cond-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:var(--grid-gap)}
.cond{padding:var(--card-pad); background:var(--c-paper); border:1px solid var(--hairline-l);
  border-radius:var(--r-lg); display:flex; flex-direction:column; gap:var(--sp-md)}
.cond-head{display:flex; align-items:baseline; gap:var(--sp-md);
  padding-block-end:var(--sp-md); border-bottom:1px solid var(--hairline-l)}
.cond-no{font-family:var(--serif); font-size:24px; font-weight:500; line-height:1; color:var(--c-gold-deep)}
.cond h3{font-size:19px; font-weight:700; color:var(--c-violet-ink); letter-spacing:-.02em}
.cond .tick-list{gap:var(--sp-sm)}
.cond .tick-list li{font-size:14.5px; line-height:1.6; color:var(--c-slate)}
@media (max-width:900px){ .cond-grid{grid-template-columns:1fr} }

/* ══════════════════════════════════════════════════════════════
   FAQ / 부작용 고지 / 비용 안내
   ══════════════════════════════════════════════════════════════ */

/* ── FAQ 아코디언 ── */
.faq{max-width:900px; margin-inline:auto; border-top:1px solid var(--hairline)}
.faq-item{border-bottom:1px solid var(--hairline)}
.faq-item summary{list-style:none; cursor:pointer; display:flex; align-items:flex-start;
  gap:var(--sp-md); padding:var(--sp-xl) var(--sp-sm); font-size:17px; font-weight:700;
  color:var(--c-violet-ink); line-height:1.5; letter-spacing:-.02em}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::before{content:"Q"; flex:none; font-family:var(--serif); font-size:18px;
  font-weight:600; color:var(--c-gold-deep); line-height:1.35}
.faq-item summary::after{content:""; flex:none; margin-left:auto; width:11px; height:11px;
  border-right:1.5px solid var(--c-slate); border-bottom:1.5px solid var(--c-slate);
  transform:rotate(45deg) translateY(-3px); transition:transform var(--dur-fast) var(--ease-out)}
.faq-item[open] summary::after{transform:rotate(-135deg) translateY(-3px)}
.faq-item summary:hover{color:var(--c-violet)}
.faq-a{padding:0 var(--sp-sm) var(--sp-xl) calc(var(--sp-md) + 18px);
  font-size:15.5px; line-height:1.78; color:var(--c-graphite)}
.faq-a a{color:var(--c-violet); text-decoration:underline; text-underline-offset:3px; display:inline-block; padding-block:11px; min-height:22px}

/* ── 부작용·주의 고지 ────────────────────────────────────────
   의료법 제56조2항7호 — 부작용 고지를 작게 하거나 접어두는 것 자체가 위반 유형.
   본문과 같은 글자 크기·대비를 유지하고 details로 감싸지 말 것.             */
.notice{max-width:900px; margin-inline:auto; padding:var(--card-pad);
  background:var(--c-paper); border:1px solid var(--c-gold); border-radius:var(--r-lg)}
.notice-title{font-size:16px; font-weight:700; color:var(--c-violet-ink);
  margin-block-end:var(--sp-md); display:flex; align-items:center; gap:var(--sp-sm)}
.notice-title::before{content:"!"; flex:none; width:22px; height:22px; border-radius:50%;
  background:var(--c-gold-deep); color:#fff; font-size:13px; font-weight:700;
  display:flex; align-items:center; justify-content:center}
.notice-list{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:var(--sp-md)}
.notice-list li{display:flex; gap:var(--sp-md); align-items:flex-start;
  font-size:15.5px; line-height:1.72; color:var(--c-graphite)}
.notice-list li::before{content:""; flex:none; width:6px; height:6px; margin-top:9px;
  border-radius:50%; background:var(--c-gold)}
.section--mist .notice,.section--cream .notice{background:var(--c-paper)}

/* ── 비용 구조 안내 ── */
.price-link{margin-block-start:var(--sp-lg); font-size:15px; line-height:1.7; color:var(--c-slate)}
.price-link a{color:var(--c-violet); font-weight:600; text-decoration:underline; text-underline-offset:3px}

/* ── 푸터 감수 표기 (C7) ── */
.foot-review{margin-block-start:var(--sp-lg); font-size:12.5px; line-height:1.8; color:#a8b1ab;
  max-width:96ch; padding-block-start:var(--sp-lg); border-top:1px solid var(--hairline)}

/* ── 의료진 프로필 보강 ── */
.doc-fields{font-size:13.5px; font-weight:600; letter-spacing:.02em; color:var(--c-gold-deep);
  padding-block-end:var(--sp-md); margin-block-end:var(--sp-md); border-bottom:1px solid var(--hairline)}
.doc-credential{font-size:15.5px; font-weight:600; color:var(--c-violet); margin-block-end:var(--sp-lg)}
.doc-lead{font-size:15.5px; line-height:1.8; color:var(--c-slate); margin-block-end:var(--sp-md); max-width:60ch}

/* ── 캡션 갤러리 (병원둘러보기) ── */
.gal-card{margin:0; background:var(--c-paper); border:1px solid var(--hairline-l);
  border-radius:var(--r-lg); overflow:hidden; display:flex; flex-direction:column}
.gal-media{aspect-ratio:4/3; overflow:hidden; background:var(--c-mist)}
.gal-media img{width:100%; height:100%; object-fit:cover;
  transition:transform var(--dur-slow) var(--ease-out)}
.gal-card:hover .gal-media img{transform:scale(1.04)}
.gal-card figcaption{padding:var(--card-pad); display:flex; flex-direction:column; gap:5px}
.gal-name{font-size:16px; font-weight:700; color:var(--c-violet-ink); letter-spacing:-.02em}
.gal-card figcaption p{font-size:14px; line-height:1.6; color:var(--c-slate)}

/* ══════════════════════════════════════════════════════════════
   관주(貫珠) 표시 — 옛 문헌에서 중요한 대목 옆에 찍던 동그라미.
   꼭 읽어야 하는 문장에만 씁니다. 남용하면 표시의 뜻이 사라집니다.
   ══════════════════════════════════════════════════════════════ */
.gwanju{max-width:900px; margin-inline:auto; padding:clamp(24px,3vw,36px) clamp(22px,3vw,40px);
  background:var(--c-paper); border-radius:var(--r-lg);
  border:1px solid var(--hairline-l); border-left:3px solid var(--c-gold)}
.gwanju-title{display:flex; align-items:center; gap:var(--sp-md);
  font-size:17px; font-weight:700; color:var(--c-violet-ink);
  letter-spacing:-.02em; margin-block-end:var(--sp-lg)}
.gwanju-title::before{content:"◉"; color:var(--c-gold-deep); font-size:15px; line-height:1}
.gwanju-list{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:var(--sp-lg)}
.gwanju-list li{position:relative; padding-left:30px;
  font-size:17.5px; line-height:1.8; color:var(--c-graphite); font-weight:500; letter-spacing:-.01em}
.gwanju-list li::before{content:"◦"; position:absolute; left:4px; top:-1px;
  font-size:22px; line-height:1.5; color:var(--c-gold); font-weight:700}

/* 문장 안 핵심 구절 */
.kw{font-weight:700; color:var(--c-violet-ink);
  background:linear-gradient(transparent 62%, rgba(169,138,94,.26) 62%);
  padding-bottom:1px}
.section--violet .kw,.section--photo .kw,.closing-dark .kw{color:#fff;
  background:linear-gradient(transparent 62%, rgba(169,138,94,.5) 62%)}

/* ── 사랑니 페이지 모바일: 버튼 줄바꿈 방지 ── */
/* ── 사랑니 페이지 히어로: 생성 이미지 (wis-hero) ── */
body[data-page="general-wisdom"] .phero::before{background-image:var(--tint),url('../img/ph/wis-hero.jpg')}
/* ══════════════════════════════════════════════════════════════
   가디언즈형 레이아웃 부품 (사랑니 페이지 개편)
   색은 전부 토큰 — 나중에 :root 값만 바꾸면 전체가 따라갑니다.
   ══════════════════════════════════════════════════════════════ */

/* ── 페이지 내 탭 ── */
.ptabs{display:grid; grid-template-columns:repeat(var(--n,4),1fr); border-bottom:1px solid var(--hairline);
  margin-block-end:var(--sp-4xl)}
.ptabs a{display:flex; flex-direction:column; align-items:center; gap:6px; padding:var(--sp-lg) var(--sp-md) var(--sp-xl);
  font-size:17px; font-weight:600; color:var(--c-slate); text-align:center; position:relative;
  transition:color var(--dur-fast) var(--ease-out)}
.ptabs a .tab-no{font-family:var(--serif); font-size:15px; letter-spacing:.06em; color:var(--c-slate)}
.ptabs a::after{content:""; position:absolute; left:0; right:0; bottom:-1px; height:2px; background:transparent}
.ptabs a:hover,.ptabs a.is-on{color:var(--c-violet)} .ptabs a:hover::after,.ptabs a.is-on::after{background:var(--c-violet)}
@media (max-width:760px){ .ptabs{grid-template-columns:repeat(2,1fr)} .ptabs a:last-child:nth-child(odd){grid-column:1/-1} }

/* ── 아이콘 2~4 가로 ── */
.ipair-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:clamp(24px,3vw,48px)}
.ipair{display:flex; flex-direction:column; gap:8px}
.ipair-ico{width:52px; height:52px; color:var(--c-violet)} .ipair-ico svg{width:100%; height:100%}
.ipair h3{font-size:20px; font-weight:700; color:var(--c-violet-ink); padding-block-end:10px; border-bottom:1px solid var(--hairline)}
.ipair p{font-size:15.5px; line-height:1.75; color:var(--c-slate)}

/* ── 2단 인트로 변형 ── */
.intro-grid--flip .intro-media{order:2} .intro-grid--flip .intro-body{order:1}
.intro-media--photo{aspect-ratio:4/3; border-radius:var(--r-lg)}
.h-en{display:inline-block; font-family:var(--serif); font-size:.5em; font-weight:500; letter-spacing:.04em;
  color:var(--c-slate); margin-inline-start:.5em; vertical-align:baseline}
.sub-accent{font-size:17px; font-weight:600; color:var(--c-violet); margin-block:-4px 4px}
.vbar-list{list-style:none; padding:0; margin:var(--sp-md) 0 0; display:flex; flex-direction:column; gap:10px}
.vbar-list li{padding-left:16px; border-left:2px solid var(--c-violet); font-size:16px; color:var(--c-graphite); line-height:1.5}
.pill-checks{list-style:none; padding:0; margin:var(--sp-lg) 0 0; display:flex; flex-direction:column; gap:12px}
.pill-checks li{display:flex; align-items:center; gap:14px; padding:14px 22px; background:var(--c-paper);
  border-radius:var(--r-pill); font-size:16px; font-weight:500; color:var(--c-violet-ink);
  box-shadow:0 8px 24px -16px rgba(35,42,38,.25)}
.pill-checks li::before{content:"✓"; flex:none; color:var(--c-violet); font-weight:700}

/* ── 2열 불릿 ── */
.twocol{list-style:none; padding:0; margin:0; display:grid; grid-template-columns:repeat(2,1fr); gap:14px 40px; max-width:900px; margin-inline:auto}
.twocol li{position:relative; padding-left:16px; font-size:16.5px; line-height:1.6; color:var(--c-graphite)}
.twocol li::before{content:"·"; position:absolute; left:2px; font-weight:700; color:var(--c-violet)}
.twocol--plain{max-width:none; margin-inline:0}
@media (max-width:640px){ .twocol{grid-template-columns:1fr} }

/* ── 인용문 ── */
.bigquote{margin:0; text-align:center; max-width:820px; margin-inline:auto}
.bigquote p{font-size:clamp(22px,2.8vw,34px); font-weight:700; line-height:1.5; letter-spacing:-.02em; color:var(--c-violet-ink)}
.bigquote .quote-sub{font-size:17px; font-weight:400; line-height:1.8; color:var(--c-slate); margin-block-start:var(--sp-lg)}
.section--ink .bigquote p,.section--photo .bigquote p{color:#fff}
.section--ink .bigquote .quote-sub,.section--photo .bigquote .quote-sub{color:#c2ccc6}

/* ── 증상 카드 (실사 + 번호 배지) ── */
.symgrid{display:grid; grid-template-columns:repeat(4,1fr); gap:var(--grid-gap)}
.symcard{margin:0; border:1px solid var(--hairline-l); border-radius:var(--r-md); overflow:hidden; background:var(--c-paper)}
.symcard-media{position:relative; aspect-ratio:1; background:var(--c-mist)}
.symcard-media img{border-radius:inherit}
.symcard-media img{width:100%; height:100%; object-fit:cover}
.symno{position:absolute; z-index:2; left:50%; bottom:-14px; transform:translateX(-50%); width:28px; height:28px; border-radius:50%;
  background:var(--c-violet); color:#fff; font-size:13px; font-weight:700; display:flex; align-items:center; justify-content:center;
  box-shadow:0 0 0 3px var(--c-paper)}
.symcard figcaption{padding:26px 14px 18px; text-align:center; font-size:15px; font-weight:500; color:var(--c-violet-ink); line-height:1.5; background:var(--c-mist)}
@media (max-width:900px){ .symgrid{grid-template-columns:repeat(2,1fr)} }

/* ── 좌 문장 + 우 2열 ── */
.tl-grid{display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(28px,4vw,64px); align-items:center}
.tl-left{font-size:16.5px; line-height:1.8; color:var(--c-graphite)}
.accent-link{margin-block-start:var(--sp-lg); font-size:16px; font-weight:600; color:var(--c-violet); text-decoration:underline; text-underline-offset:4px}
@media (max-width:760px){ .tl-grid{grid-template-columns:1fr} }

/* ── 다크 타임라인 (점 + 선) ── */
.section--ink{background:var(--c-violet-deep); color:#eef3f0; --hairline:var(--hairline-d)}
.section--ink .eyebrow{color:var(--c-gold)} .section--ink .display-kr{color:#fff} .section--ink .body-lg{color:#c2ccc6}
.dtl-lead{text-align:center; font-size:16.5px; line-height:1.85; color:#dbe3de; max-width:70ch; margin:0 auto var(--sp-4xl)}
.dtl{display:grid; grid-template-columns:repeat(5,1fr); position:relative; padding-block:var(--sp-lg)}
.dtl::before{content:""; position:absolute; left:10%; right:10%; top:calc(var(--sp-lg) + 36px); height:1px; background:rgba(255,255,255,.35)}
.dtl-step{display:flex; flex-direction:column; align-items:center; text-align:center; gap:8px; padding-inline:8px}
.dtl-no{font-size:16px; font-weight:700; color:#fff; letter-spacing:.04em}
.dtl-dot{width:14px; height:14px; border-radius:50%; background:#fff; box-shadow:0 0 0 5px rgba(255,255,255,.25); margin-block:10px 14px}
.dtl-step h3{font-size:18px; font-weight:700; color:#fff}
.dtl-step p{font-size:14px; line-height:1.6; color:#c2ccc6}
@media (max-width:900px){ .dtl{grid-template-columns:repeat(2,1fr); gap:var(--sp-2xl) 0} .dtl::before{display:none} }

/* ── 실사 2장 나란히 (기울어진 분할) ── */
.ppair{display:grid; grid-template-columns:1fr 1fr; gap:0; overflow:hidden; border-radius:var(--r-lg); height:clamp(260px,31vw,470px)}
.ppair figure{margin:0; height:100%; overflow:hidden}
.ppair figure:first-child{clip-path:polygon(0 0,100% 0,90% 100%,0 100%); width:106%}
.ppair figure:last-child{clip-path:polygon(10% 0,100% 0,100% 100%,0 100%); width:106%; margin-left:-6%}
.ppair img{width:100%; height:100%; object-fit:cover}
@media (max-width:640px){ .ppair{grid-template-columns:1fr; height:auto}
  .ppair figure{clip-path:none!important; margin:0!important; width:100%!important; aspect-ratio:16/10} }

/* ── 좌 본문 + 우 STEP 박스 ── */
.ts-grid{display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(28px,4vw,64px); align-items:start}
.ts-left .lead{font-size:16.5px; line-height:1.85; color:var(--c-graphite); margin-block-end:var(--sp-lg)}
.ts-right{display:flex; flex-direction:column; gap:12px}
.sbox{padding:26px 30px; background:var(--c-mist); border-radius:var(--r-sm)}
.sbox-no{font-size:14px; font-weight:600; color:var(--c-violet); letter-spacing:.02em; margin-inline-end:12px}
.sbox h3{display:inline; font-size:19px; font-weight:700; color:var(--c-violet-ink)}
.sbox p{margin-block-start:10px; font-size:15.5px; color:var(--c-slate); line-height:1.6}
@media (max-width:760px){ .ts-grid{grid-template-columns:1fr} }

/* ── 실사 + 4분할 정보 ── */
.ipq{display:grid; grid-template-columns:.42fr .58fr; gap:clamp(28px,4vw,64px); align-items:center}
.ipq-media{overflow:hidden; aspect-ratio:4/5}
.ipq-media img{width:100%; height:100%; object-fit:cover}
.ipq-body .lead{font-size:16.5px; line-height:1.85; color:var(--c-graphite); margin-block-end:var(--sp-2xl)}
.quad-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:var(--sp-2xl) var(--sp-3xl)}
.quad h3{font-size:17px; font-weight:700; color:var(--c-violet-ink); padding-left:12px; border-left:2px solid var(--c-violet); margin-block-end:10px}
.quad p{font-size:15px; line-height:1.7; color:var(--c-slate)}
.quad p b{color:var(--c-violet); font-weight:700}
@media (max-width:900px){ .ipq{grid-template-columns:1fr} .ipq-media{aspect-ratio:4/3} }
@media (max-width:560px){ .quad-grid{grid-template-columns:1fr} }

/* ── 화면 끝까지 나가는 사진 블록 (가디언즈 surgerySec / insuSec 리듬) ── */
.section--full{overflow-x:clip}
.section--flush{padding-block-start:0}
@media (max-width:900px){ .section--flush{padding-block-start:var(--section-pad)} }
.bleed,.section--full .ipq{
  --bleed-side:max(var(--gutter), calc((100vw - var(--container))/2 + var(--gutter)));
  --bleed-inner:clamp(28px,4vw,68px);
}
.bleed{display:grid; grid-template-columns:.42fr .58fr; align-items:center; gap:clamp(24px,3vw,52px)}
.bleed-media{overflow:hidden; aspect-ratio:4/3; background:var(--c-cream); border-radius:0 var(--r-xl) var(--r-xl) 0}
.bleed-media img{width:100%; height:100%; object-fit:cover; display:block}
.bleed-body{display:flex; flex-direction:column; align-items:flex-start; gap:var(--sp-lg);
  padding-inline:var(--bleed-inner) var(--bleed-side)}
.bleed--flip{grid-template-columns:.58fr .42fr}
.bleed--flip .bleed-media{order:2; border-radius:var(--r-xl) 0 0 var(--r-xl)}
.bleed--flip .bleed-body{order:1; padding-inline:var(--bleed-side) var(--bleed-inner)}
.bleed-body .lead{font-size:15.5px; line-height:1.8; color:var(--c-slate)}
.bleed-body .lead strong{color:var(--c-violet-ink); font-weight:700}
.section--full .ipq-media{border-radius:0 var(--r-xl) var(--r-xl) 0}
.section--full .ipq-body{padding-inline:var(--bleed-inner) var(--bleed-side)}
@media (max-width:900px){
  .bleed{grid-template-columns:1fr; gap:var(--sp-2xl)}
  .bleed-media,.bleed--flip .bleed-media{order:0; border-radius:0; aspect-ratio:4/3}
  .bleed-body,.bleed--flip .bleed-body{order:0; padding-inline:var(--gutter)}
  .section--full .ipq{grid-template-columns:1fr; gap:var(--sp-2xl)}
  .section--full .ipq-media{border-radius:0}
  .section--full .ipq-body{padding-inline:var(--gutter)}
}

/* ── 가로 STEP 3단 (꺾쇠 구분) ── */
.hstep{display:grid; grid-template-columns:repeat(var(--hstep-n,3), minmax(0,1fr));
  align-items:start; gap:0; margin-block-start:var(--sp-3xl)}
.hstep{grid-template-columns:1fr auto 1fr auto 1fr}
.hstep-item{text-align:center; padding-inline:clamp(12px,2vw,28px)}
.hstep-no{font-family:var(--serif); font-size:19px; font-weight:600; letter-spacing:.06em; color:var(--c-violet)}
.hstep-item h3{font-size:22px; font-weight:700; color:var(--c-violet-ink); margin-block:10px 12px; line-height:1.35}
.hstep-desc{font-size:16px; line-height:1.72; color:var(--c-slate)}
.hstep-arrow{align-self:center; width:26px; height:26px; color:var(--c-gold); flex:none}
.hstep-arrow svg{width:100%; height:100%}
@media (max-width:820px){
  .hstep{grid-template-columns:1fr; gap:var(--sp-xl)}
  .hstep-arrow{transform:rotate(90deg); margin-inline:auto}
}

/* ── 인용문만 있는 구분 밴드 — 여백을 줄여 빈 화면처럼 보이지 않게 ── */
.section--quote{padding-block:clamp(48px,4.6vw,84px)}
/* ══════════════════════════════════════════════════════════════
   사랑니 페이지 — 감수 반영 (2026-09-11)
   ══════════════════════════════════════════════════════════════ */

/* [버그] 페이지 스코프 규칙(0-2-1)이 모바일 미디어쿼리(0-1-0)를 이겨
   390px에서 2열이 유지돼 본문 컬럼이 160~194px(줄당 8~11자)로 붕괴했다.
   같은 스코프로 다시 눌러 준다. */
/* [자간] 영문용 0.22em 이 한글에도 걸려 '건 강 보 험' 으로 벌어졌다.
   아이브로우 안에서 한글 조각만 자간을 되돌린다. */
.eyebrow .kr{letter-spacing:.02em}
.eyebrow .en{letter-spacing:.22em}

/* ── 진료 시간 · 오시는 길 ── */
.vi{display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(32px,4.4vw,80px); align-items:start}
.vi-h{font-size:20px; font-weight:700; color:var(--c-violet-ink); padding-block-end:14px;
  margin-block-end:18px; border-bottom:1px solid var(--hairline)}
.vi-table{display:flex; flex-direction:column}
.vi-row{display:flex; align-items:center; gap:16px; padding-block:14px; border-bottom:1px solid var(--hairline-l)}
.vi-row:last-child{border-bottom:0}
.vi-day{flex:none; width:104px; font-size:17px; font-weight:600; color:var(--c-violet-ink)}
.vi-time{font-size:17px; color:var(--c-slate); font-variant-numeric:tabular-nums}
.vi-row--hl .vi-time{color:var(--c-violet); font-weight:600}
.vi-tag{margin-inline-start:auto; flex:none; font-size:13px; font-weight:600; padding:5px 12px; border-radius:var(--r-pill);
  background:var(--c-mist); color:var(--c-violet)}
.vi-note{margin-block-start:18px; font-size:15.5px; line-height:1.75; color:var(--c-slate)}
.vi-contact{display:flex; flex-direction:column; align-items:flex-start}
.vi-addr{font-size:17.5px; line-height:1.7; color:var(--c-graphite)}
.vi-tel{display:block; margin-block:14px 22px; font-family:var(--serif); font-size:clamp(32px,3.6vw,46px);
  font-weight:600; letter-spacing:.01em; color:var(--c-violet-deep); text-decoration:none}
.vi-tel:hover{color:var(--c-violet)}
@media (max-width:820px){ .vi{grid-template-columns:1fr; gap:var(--sp-3xl)} }

/* ── 회복 일정 가로 타임라인 ── */
.rl{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:0; position:relative;
  margin-block-start:var(--sp-3xl)}
.rl::before{content:""; position:absolute; left:12.5%; right:12.5%; top:8px; height:1px; background:var(--hairline)}
.rl-step{position:relative; text-align:center; padding-inline:12px}
.rl-step::before{content:""; position:absolute; left:50%; top:2px; width:13px; height:13px; margin-left:-6.5px;
  border-radius:50%; background:var(--c-violet); box-shadow:0 0 0 4px var(--c-canvas)}
.section--mist .rl-step::before{box-shadow:0 0 0 4px var(--c-mist)}
.section--cream .rl-step::before{box-shadow:0 0 0 4px var(--c-cream)}
.rl-when{display:block; margin-block-start:32px; font-family:var(--serif); font-size:20px; font-weight:600;
  letter-spacing:.04em; color:var(--c-gold-deep)}
.rl-step h3{font-size:19px; font-weight:700; color:var(--c-violet-ink); margin-block:8px 8px}
.rl-step p{font-size:15.5px; line-height:1.7; color:var(--c-slate)}
@media (max-width:760px){
  .rl{grid-template-columns:1fr; gap:var(--sp-xl)}
  .rl::before{left:6px; right:auto; top:8px; bottom:8px; width:1px; height:auto}
  .rl-step{text-align:left; padding-left:34px; padding-inline-end:0}
  .rl-step::before{left:6px; margin-left:-6px; top:6px}
  .rl-when{margin-block-start:0}
}

/* ── 한 줄 크레딧 ── */
.credit{margin-block-start:var(--sp-xl); text-align:center; font-size:16px; line-height:1.7; color:var(--c-slate)}
.credit b{color:var(--c-violet-deep); font-weight:700}
.rl-when{font-family:var(--ff); font-size:17px; font-weight:700; letter-spacing:.01em}

/* ── 시트 탭 (엑셀 시트 탭처럼 — 열린 탭이 패널과 한 몸으로 이어짐) ── */
.stabs{margin-block-start:var(--sp-md)}
.stabs-bar{display:flex; gap:6px; align-items:flex-end; padding-inline:6px}
.stab{position:relative; font:inherit; font-size:18px; font-weight:600; color:var(--c-slate);
  padding:16px 30px 14px; background:var(--c-mist); border:1px solid var(--hairline); border-bottom:0;
  border-radius:var(--r-md) var(--r-md) 0 0; cursor:pointer; margin-bottom:-1px;
  transition:color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out)}
.stab:hover{color:var(--c-violet-ink); background:var(--c-cream)}
.stab.is-on{color:var(--c-violet-ink); background:var(--c-paper); padding-top:18px; z-index:1}
.stab.is-on::after{content:""; position:absolute; left:0; right:0; top:-1px; height:3px; background:var(--c-violet);
  border-radius:var(--r-md) var(--r-md) 0 0}
.stab:focus-visible{outline:2px solid var(--c-violet); outline-offset:-4px}
.stabs-panel{background:var(--c-paper); border:1px solid var(--hairline); border-radius:0 var(--r-md) var(--r-md) var(--r-md);
  padding:clamp(28px,3.2vw,48px) clamp(24px,3vw,44px)}
.stabs-panel > .reveal{opacity:1; transform:none}
.section--cream .stab{background:rgba(35,42,38,.05)}
.section--cream .stab:hover{background:rgba(35,42,38,.08)}
.section--cream .stab.is-on{background:var(--c-paper)}
@media (max-width:640px){
  .stabs-bar{padding-inline:0}
  .stab{flex:1; padding:13px 10px 12px; font-size:15.5px; text-align:center}
  .stabs-panel{padding:22px 18px; border-radius:0 0 var(--r-md) var(--r-md)}
}
.w2-en{font-family:var(--serif); font-size:15px; font-weight:600; letter-spacing:.32em; text-transform:uppercase; color:var(--c-gold-deep)}
.w2-no{font-family:var(--serif); font-size:clamp(44px,4.4vw,64px); font-weight:500; line-height:1; letter-spacing:.02em; color:var(--c-gold-deep)}
.w2-label{margin-block-start:10px; font-family:var(--serif); font-size:13.5px; font-weight:600; letter-spacing:.3em; text-transform:uppercase; color:var(--c-slate)}
.w2-title{margin-block-start:22px; font-size:clamp(26px,2.5vw,36px); font-weight:700; line-height:1.32; letter-spacing:-.02em; color:var(--c-violet-ink); text-wrap:balance}
.w2-numsec__desc{margin-block-start:16px; font-size:16px; line-height:1.8; color:var(--c-slate); max-width:30ch}
.w2-numsec__btn{margin-block-start:24px}
.w2-arrow{margin-inline-start:2px; font-size:1.15em; line-height:1}
.w2-hand{font-family:"Nanum Brush Script", var(--serif); font-size:clamp(26px,2.6vw,38px); line-height:1.35; color:var(--c-gold-deep)}

/* ── 히어로 ── */
.w2-hero{position:relative; isolation:isolate; overflow:hidden; background:var(--c-cream);
  padding-block:calc(var(--header-h) + clamp(56px,7vw,108px)) clamp(64px,7.5vw,116px)}
.w2-hero__bg{position:absolute; inset:0; z-index:-1; background-size:cover; background-position:right center}
.w2-hero__bg::after{content:""; position:absolute; inset:0;
  background:linear-gradient(90deg, var(--c-cream) 0%, var(--c-cream) 28%, rgba(243,238,226,.72) 46%, rgba(243,238,226,0) 66%)}
.w2-hero__in{position:relative}
.w2-hero__body{max-width:640px}
.w2-hero__title{margin-block-start:26px; font-size:clamp(34px,4.6vw,60px); font-weight:700; line-height:1.24; letter-spacing:-.025em; color:var(--c-violet-ink)}
.w2-hero__title em{font-style:normal; font-weight:500; color:var(--c-violet-deep)}
.w2-hero__sub{margin-block-start:22px; font-size:clamp(16px,1.35vw,19px); line-height:1.8; color:var(--c-graphite); max-width:40ch}
.w2-hicons{list-style:none; padding:0; margin:30px 0 0; display:flex; flex-wrap:wrap; gap:14px 30px}
.w2-hicons li{display:flex; align-items:center; gap:10px; font-size:16px; font-weight:600; color:var(--c-violet-ink)}
.w2-hico{display:inline-flex; width:46px; height:46px; padding:10px; border-radius:50%; border:1px solid rgba(94,140,126,.45); color:var(--c-violet)}
.w2-hico svg{width:100%; height:100%}
.w2-btns{display:flex; flex-wrap:wrap; gap:12px; margin-block-start:34px}
.w2-btns .btn{min-height:56px; padding-inline:30px; font-size:16px; border-radius:6px}
.w2-hero__hand{position:absolute; right:var(--gutter); top:-10px; text-align:right}
.w2-hero__brand{position:absolute; right:var(--gutter); top:112px; font-family:var(--serif); font-size:13px; letter-spacing:.3em; line-height:1.8; text-align:right; color:var(--c-slate)}
@media (max-width:900px){
  .w2-hero{padding-block:calc(var(--header-h) + 36px) 48px}
  .w2-hero__bg{background-position:72% center; opacity:.35}
  .w2-hero__bg::after{background:linear-gradient(180deg, rgba(243,238,226,.2), var(--c-cream) 80%)}
  .w2-hero__hand,.w2-hero__brand{position:static; text-align:left; margin-block-start:26px}
  .w2-hero__brand{display:none}
}

/* ── 번호 섹션 골격 ── */
.w2-numsec{padding-block:clamp(56px,6vw,96px)}
.w2-numsec__grid{display:grid; grid-template-columns:minmax(240px,300px) minmax(0,1fr); gap:clamp(28px,4vw,72px); align-items:start}
.w2-numsec:nth-of-type(even){background:var(--c-cream)}
.w2-numsec--mist{background:var(--c-mist)!important}
@media (max-width:900px){ .w2-numsec__grid{grid-template-columns:1fr; gap:28px} .w2-numsec__desc{max-width:none} }

/* ── 01 사진 카드 ── */
.w2-pcards{display:grid; grid-template-columns:repeat(var(--n,5),minmax(0,1fr)); gap:14px}
.w2-pcard{margin:0; background:#fff; border-radius:10px; overflow:hidden; box-shadow:0 10px 30px -22px rgba(35,42,38,.45)}
.w2-pcard__media{position:relative; aspect-ratio:3/4; background:var(--c-mist)}
.w2-pcard__media img{width:100%; height:100%; object-fit:cover; display:block}
.w2-pcard--glow .w2-pcard__media::after{content:""; position:absolute; inset:0;
  background:radial-gradient(circle at 62% 58%, rgba(230,70,70,.42), rgba(230,70,70,0) 38%); mix-blend-mode:multiply}
.w2-pcard figcaption{padding:16px 12px 18px; text-align:center; font-size:15.5px; font-weight:600; line-height:1.5; color:var(--c-violet-ink)}
@media (max-width:1100px){ .w2-pcards{grid-template-columns:repeat(3,1fr)} }
@media (max-width:640px){ .w2-pcards{grid-template-columns:repeat(2,1fr)} }

/* ── 02 CT 다크 밴드 ── */
.w2-ct{background:var(--c-violet-deep); color:#eef3f0; padding-block:clamp(56px,6vw,96px); overflow:hidden}
.w2-ct__grid{display:grid; grid-template-columns:minmax(240px,300px) minmax(0,1fr) minmax(240px,320px); gap:clamp(24px,3.2vw,56px); align-items:center}
.w2-numsec__head--dark .w2-no,.w2-numsec__head--dark .w2-hand{color:var(--c-gold)}
.w2-numsec__head--dark .w2-label{color:rgba(238,243,240,.65)}
.w2-numsec__head--dark .w2-title{color:#fff}
.w2-numsec__head--dark .w2-numsec__desc{color:rgba(238,243,240,.78)}
.w2-numsec__head--dark .btn--solid{background:var(--c-gold); color:var(--c-violet-ink)}
.w2-numsec__head--dark .btn--solid:hover{background:#fff}
.w2-ct__media{position:relative; margin:0; aspect-ratio:16/10; border-radius:12px; overflow:hidden; background:#2c433b}
.w2-ct__media img{width:100%; height:100%; object-fit:cover; display:block}
.w2-ct__tag{position:absolute; right:18px; bottom:18px; padding:10px 16px; border-radius:8px; background:rgba(35,42,38,.82);
  color:var(--c-gold); font-size:14px; font-weight:600; line-height:1.45; text-align:center; backdrop-filter:blur(4px)}
.w2-cpts{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:22px}
.w2-cpt{display:flex; align-items:center; gap:16px}
.w2-cpt__ico{flex:none; width:64px; height:64px; padding:16px; border-radius:50%; background:rgba(255,255,255,.1); color:var(--c-gold)}
.w2-cpt__ico svg{width:100%; height:100%}
.w2-cpt h3{font-size:17.5px; font-weight:700; color:#fff}
.w2-cpt p{margin-block-start:4px; font-size:14.5px; line-height:1.55; color:rgba(238,243,240,.7)}
@media (max-width:1100px){ .w2-ct__grid{grid-template-columns:1fr 1fr} .w2-ct__media{grid-column:1/-1; order:-1} }
@media (max-width:700px){ .w2-ct__grid{grid-template-columns:1fr} .w2-cpts{gap:16px} }

/* ── 03 유형 카드 ── */
.w2-tcards{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px}
.w2-tcard{margin:0; background:#fff; border-radius:12px; padding:22px 16px 20px; text-align:center; box-shadow:0 10px 30px -22px rgba(35,42,38,.45)}
.w2-tcard h3{font-size:17px; font-weight:700; line-height:1.4; color:var(--c-violet-ink); min-height:2.8em; display:flex; align-items:center; justify-content:center}
.w2-tcard__media{margin-block:14px 16px; aspect-ratio:1; border-radius:10px; overflow:hidden; background:var(--c-cream)}
.w2-tcard__media img{width:100%; height:100%; object-fit:cover; display:block}
.w2-tcard figcaption{font-size:15px; line-height:1.55; color:var(--c-slate)}
@media (max-width:900px){ .w2-tcards{grid-template-columns:repeat(2,1fr)} }

/* ── 04 진행 과정 ── */
.w2-prcs{display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:14px}
.w2-prc{margin:0; background:#fff; border-radius:10px; overflow:hidden; box-shadow:0 10px 30px -22px rgba(35,42,38,.45)}
.w2-prc__media{aspect-ratio:4/3; background:var(--c-mist)}
.w2-prc__media img{width:100%; height:100%; object-fit:cover; display:block}
.w2-prc figcaption{padding:16px 16px 18px}
.w2-prc__no{display:block; font-family:var(--serif); font-size:15px; font-weight:600; letter-spacing:.1em; color:var(--c-gold-deep)}
.w2-prc b{display:block; margin-block-start:6px; font-size:16.5px; font-weight:700; line-height:1.4; color:var(--c-violet-ink)}
@media (max-width:1100px){ .w2-prcs{grid-template-columns:repeat(3,1fr)} }
@media (max-width:640px){ .w2-prcs{grid-template-columns:repeat(2,1fr)} }

/* ── 05 관리 아이콘 ── */
.w2-cares{list-style:none; padding:0; margin:0; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:18px}
.w2-care{text-align:center}
.w2-care__ico{display:inline-flex; width:92px; height:92px; padding:24px; border-radius:50%; background:#fff; color:var(--c-violet);
  box-shadow:0 10px 26px -18px rgba(35,42,38,.5)}
.w2-care__ico svg{width:100%; height:100%}
.w2-care h3{margin-block-start:16px; font-size:18px; font-weight:700; color:var(--c-violet-ink)}
.w2-care p{margin-block-start:8px; font-size:15px; line-height:1.65; color:var(--c-slate)}
@media (max-width:900px){ .w2-cares{grid-template-columns:repeat(3,1fr)} }
@media (max-width:560px){ .w2-cares{grid-template-columns:repeat(2,1fr)} }

/* ── 고지 스트립 ── */
.w2-notice{margin-block-start:34px; padding:22px 26px; border-radius:10px; background:rgba(255,255,255,.6); border:1px solid var(--hairline-l)}
.w2-notice__t{font-size:14.5px; font-weight:700; color:var(--c-violet-deep); margin-block-end:8px}
.w2-notice ul{list-style:none; padding:0; margin:0; display:grid; grid-template-columns:repeat(2,1fr); gap:6px 28px}
.w2-notice li{position:relative; padding-left:12px; font-size:13.5px; line-height:1.6; color:var(--c-slate)}
.w2-notice li::before{content:"·"; position:absolute; left:0; font-weight:700; color:var(--c-violet)}
@media (max-width:700px){ .w2-notice ul{grid-template-columns:1fr} }

/* ── 06 FAQ + 배너 ── */
.w2-faq{display:grid; grid-template-columns:minmax(0,1.3fr) minmax(280px,.8fr); gap:24px; align-items:start}
.w2-faq__item{border-top:1px solid var(--hairline)}
.w2-faq__item:last-child{border-bottom:1px solid var(--hairline)}
.w2-faq__item summary{display:flex; align-items:center; gap:14px; padding:20px 6px; cursor:pointer; list-style:none;
  font-size:17px; font-weight:600; color:var(--c-violet-ink)}
.w2-faq__item summary::-webkit-details-marker{display:none}
.w2-faq__q{font-family:var(--serif); font-size:19px; font-weight:600; color:var(--c-violet)}
.w2-faq__plus{margin-inline-start:auto; position:relative; width:14px; height:14px; flex:none}
.w2-faq__plus::before,.w2-faq__plus::after{content:""; position:absolute; background:var(--c-slate); transition:transform var(--dur-fast) var(--ease-out)}
.w2-faq__plus::before{left:0; right:0; top:6px; height:2px} .w2-faq__plus::after{top:0; bottom:0; left:6px; width:2px}
.w2-faq__item[open] .w2-faq__plus::after{transform:scaleY(0)}
.w2-faq__a{padding:0 6px 22px 39px; font-size:16px; line-height:1.85; color:var(--c-slate)}
.w2-faq__banner{position:relative; isolation:isolate; overflow:hidden; border-radius:12px; padding:38px 32px; min-height:300px;
  display:flex; flex-direction:column; justify-content:center; align-items:flex-start; gap:24px;
  background-size:cover; background-position:center; color:#fff}
.w2-faq__banner::before{content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(90deg, rgba(63,95,85,.94) 0%, rgba(63,95,85,.82) 55%, rgba(63,95,85,.35) 100%)}
.w2-faq__banner p{font-size:clamp(18px,1.5vw,21px); font-weight:600; line-height:1.6; max-width:18ch}
.w2-faq__banner .btn--solid{background:var(--c-gold); color:var(--c-violet-ink)}
.w2-faq__banner .btn--solid:hover{background:#fff}
@media (max-width:900px){ .w2-faq{grid-template-columns:1fr} }

/* ── 마감 밴드 ── */
.w2-close{background:var(--c-mist); padding-block:clamp(40px,4.4vw,64px)}
.w2-close__in{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:24px}
.w2-close .w2-btns{margin:0}
.w2-close .btn--solid{min-height:60px; padding-inline:30px; border-radius:8px; background:var(--c-violet-deep)}
.w2-close .btn--solid:hover{background:var(--c-violet)}
.w2-bico{display:inline-flex; width:22px; height:22px; margin-inline-end:8px}
.w2-bico svg{width:100%; height:100%}
.w2-en{font-size:16px}
.w2-no{font-size:clamp(56px,4.8vw,84px)}
.w2-label{font-size:15px; margin-block-start:12px}
.w2-title{font-size:clamp(30px,2.6vw,44px); margin-block-start:24px}
.w2-numsec__desc{font-size:18px; line-height:1.8; max-width:34ch}
.w2-numsec__btn{min-height:56px; padding-inline:28px; font-size:16.5px}
.w2-hand{font-size:clamp(30px,2.8vw,46px)}

/* 히어로 */
.w2-hero{padding-block:calc(var(--header-h) + clamp(72px,8vw,128px)) clamp(80px,8.5vw,136px)}
.w2-hero__body{max-width:760px}
.w2-hero__title{font-size:clamp(40px,4.9vw,74px); margin-block-start:28px}
.w2-hero__sub{font-size:clamp(18px,1.4vw,22px); margin-block-start:26px; max-width:44ch}
.w2-hicons{margin-block-start:36px; gap:16px 34px}
.w2-hicons li{font-size:18px; gap:12px}
.w2-hico{width:56px; height:56px; padding:12px}
.w2-btns{margin-block-start:40px; gap:14px}
.w2-btns .btn{min-height:64px; padding-inline:36px; font-size:18px}
.w2-hero__hand{top:-4px}
.w2-hero__brand{top:132px; font-size:14px}

/* 번호 섹션 골격 — 1600 미만은 레일이 위로 */
.w2-numsec{padding-block:clamp(64px,6.6vw,120px)}
.w2-numsec__grid{grid-template-columns:minmax(240px,280px) minmax(0,1fr); gap:clamp(32px,3.4vw,64px)}
@media (max-width:1599px){
  .w2-numsec__grid{grid-template-columns:1fr; gap:36px}
  .w2-numsec__head{display:grid; grid-template-columns:auto minmax(0,1fr); column-gap:28px; row-gap:0; align-items:end}
  .w2-numsec__head .w2-no{grid-row:1/3; align-self:start}
  .w2-numsec__head .w2-label{margin-block-start:6px}
  .w2-numsec__head .w2-title{margin-block-start:8px}
  .w2-numsec__head .w2-numsec__desc{grid-column:2; max-width:70ch; margin-block-start:12px}
  .w2-numsec__head .w2-numsec__btn{grid-column:2; justify-self:start}
}
@media (max-width:640px){
  .w2-numsec__head{grid-template-columns:1fr}
  .w2-numsec__head .w2-no{grid-row:auto}
  .w2-numsec__head .w2-numsec__desc,.w2-numsec__head .w2-numsec__btn{grid-column:auto}
}

/* 01 사진 카드 */
.w2-pcards{gap:18px}
.w2-pcard{border-radius:14px}
.w2-pcard figcaption{padding:20px 14px 22px; font-size:18px}
@media (max-width:1100px){ .w2-pcards{grid-template-columns:repeat(3,1fr)} }
@media (max-width:640px){ .w2-pcards{grid-template-columns:repeat(2,1fr); gap:12px} .w2-pcard figcaption{font-size:16px} }

/* 02 CT 밴드 */
.w2-ct{padding-block:clamp(64px,6.6vw,120px)}
.w2-ct__grid{grid-template-columns:minmax(240px,280px) minmax(0,1fr) minmax(280px,380px); gap:clamp(28px,3.4vw,64px)}
.w2-ct__media{border-radius:16px}
.w2-ct__tag{font-size:16px; padding:12px 18px; right:22px; bottom:22px}
.w2-cpts{gap:26px}
.w2-cpt{gap:18px}
.w2-cpt__ico{width:76px; height:76px; padding:19px}
.w2-cpt h3{font-size:20px}
.w2-cpt p{font-size:16px; margin-block-start:5px}
@media (max-width:1599px){
  .w2-ct__grid{grid-template-columns:minmax(0,1fr) minmax(280px,380px)}
  .w2-ct__grid .w2-numsec__head{grid-column:1/-1}
  .w2-ct__media{order:0}
}
@media (max-width:900px){ .w2-ct__grid{grid-template-columns:1fr} }

/* 03 유형 카드 */
.w2-tcards{gap:20px}
.w2-tcard{border-radius:16px; padding:26px 18px 24px}
.w2-tcard h3{font-size:20px}
.w2-tcard__media{margin-block:18px 20px; border-radius:12px}
.w2-tcard figcaption{font-size:17px}

/* 04 진행 과정 */
.w2-prcs{gap:18px}
.w2-prc{border-radius:14px}
.w2-prc figcaption{padding:20px 20px 22px}
.w2-prc__no{font-size:17px}
.w2-prc b{font-size:19px; margin-block-start:8px}

/* 05 관리 */
.w2-cares{gap:24px}
.w2-care__ico{width:120px; height:120px; padding:32px}
.w2-care h3{font-size:22px; margin-block-start:20px}
.w2-care p{font-size:17px; margin-block-start:10px}
.w2-notice{margin-block-start:44px; padding:26px 30px; border-radius:12px}
.w2-notice__t{font-size:16px}
.w2-notice li{font-size:15px}

/* 06 FAQ */
.w2-faq{gap:32px}
.w2-faq__item summary{padding:24px 8px; font-size:20px; gap:16px}
.w2-faq__q{font-size:24px}
.w2-faq__plus{width:16px; height:16px}
.w2-faq__plus::before{top:7px} .w2-faq__plus::after{left:7px}
.w2-faq__a{font-size:17.5px; padding:0 8px 26px 48px}
.w2-faq__banner{min-height:400px; padding:46px 40px; border-radius:16px; gap:28px}
.w2-faq__banner p{font-size:clamp(20px,1.6vw,24px)}
.w2-faq__banner .btn{min-height:56px; padding-inline:28px; font-size:16.5px}

/* 마감 밴드 */
.w2-close{padding-block:clamp(48px,5vw,80px)}
.w2-close .btn--solid{min-height:66px; padding-inline:36px; font-size:18px}
.w2-bico{width:24px; height:24px}

/* 레일 모드(≥1600)에서 제목이 6자씩 끊기던 문제 — 레일을 넓히고 제목은 한 단계 아래로 */
@media (min-width:1600px){
  .w2-numsec__grid{grid-template-columns:minmax(300px,340px) minmax(0,1fr)}
  .w2-ct__grid{grid-template-columns:minmax(300px,340px) minmax(0,1fr) minmax(280px,380px)}
  .w2-numsec__head .w2-title{font-size:clamp(30px,2.2vw,38px)}
}
/* 04 과정 카드 — 사진을 정사각으로 키움 */
@media (min-width:1100px){ .w2-prc__media{aspect-ratio:1} }

/* 히어로 붓글씨가 치아 모형 위에 겹쳐 읽히지 않던 문제 — 제목과 모형 사이 여백(가운데)으로 이동 */
@media (min-width:901px){
  .w2-hero__hand{right:auto; left:52%; top:-6px; text-align:left}
  .w2-hero__brand{right:auto; left:52%; top:124px; text-align:left}
}

/* ── 사용자 지시: 히어로 그라데이션 제거, 붓글씨·브랜드 제거 ── */
.w2-hero__bg::after{display:none}
.w2-hero__bg{background-position:right center}
@media (max-width:900px){ .w2-hero__bg{opacity:.28} }

/* ── 아이콘 정돈 (Lucide 24그리드) — 원 안에 여유 있게, 선은 1.5 ── */
.w2-hico{width:52px; height:52px; padding:13px; border:1px solid rgba(94,140,126,.4); background:rgba(255,255,255,.55)}
.w2-cpt__ico{width:72px; height:72px; padding:20px}
.w2-care__ico{width:112px; height:112px; padding:32px; color:var(--c-violet-deep)}
.w2-bico{width:22px; height:22px}
.w2-hico svg,.w2-cpt__ico svg,.w2-care__ico svg,.w2-bico svg{stroke-width:1.5}

/* ── 표준 페이지(원데이 디자인) 보강 ── */
.ba-note{margin-block-start:var(--sp-2xl); text-align:center; font-size:14px; color:var(--c-slate)}
.vs-wrap--single{grid-template-columns:1fr; max-width:1100px; margin-inline:auto}
.vs-wrap--single .vs-box__body{padding-block:var(--sp-2xl)}

/* 치료사례 갤러리 — 4장은 2×2, 2장은 나란히 (3열에 한 장이 남아 떠 있던 문제) */
.gal-grid:has(> :nth-child(4):last-child){grid-template-columns:repeat(2,1fr)}
.gal-grid:has(> :nth-child(2):last-child){grid-template-columns:repeat(2,1fr); max-width:1000px; margin-inline:auto}
@media (max-width:640px){ .gal-grid:has(> :nth-child(4):last-child),.gal-grid:has(> :nth-child(2):last-child){grid-template-columns:1fr} }

/* ══════════════════════════════════════════════════════════════
   여정형(J) 페이지 — 소개 → 관련 → 지그재그 → 대상 → 주의 → 표 → 사례 → FAQ → 안내
   색은 전부 기존 토큰. 새 색 없음.
   ══════════════════════════════════════════════════════════════ */
.j-en{font-family:var(--serif); font-size:15px; font-weight:600; letter-spacing:.3em; text-transform:uppercase; color:var(--c-gold-deep); line-height:1.75}
.j-en--gold{color:var(--c-gold-deep)}
.j-h2{margin-block-start:14px; font-size:clamp(28px,3vw,42px); font-weight:700; line-height:1.3; letter-spacing:-.02em; color:var(--c-violet-ink); text-wrap:balance}
.j-h2--light{color:#fff}
.j-h3{font-size:clamp(22px,2vw,27px); font-weight:700; line-height:1.35; letter-spacing:-.015em; color:var(--c-violet-ink)}
.j-ans{margin-block-start:18px; font-size:19px; font-weight:600; line-height:1.7; color:var(--c-violet-deep)}
.j-ans--center{max-width:60ch; margin-inline:auto}
.j-ans .kw{color:var(--c-violet-deep)}
.j-lead{margin-block-start:16px; font-size:17.5px; line-height:1.8; color:var(--c-slate); max-width:64ch; margin-inline:auto}
.j-center{text-align:center; margin-block-end:clamp(36px,4vw,56px)}
.j-center .j-h2{margin-inline:auto}
.j-foot{margin-block-start:24px; text-align:center; font-size:15px; line-height:1.75; color:var(--c-slate)}
.j-dark{background:var(--c-violet-deep); color:#eef3f0}

/* 소개 */
.j-intro__grid{display:grid; grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr); gap:clamp(32px,4.6vw,80px); align-items:center}
.j-intro__media{margin:0; aspect-ratio:4/3.4; overflow:hidden; border-radius:120px 0 0 0; background:var(--c-cream)}
.j-intro__media img{width:100%; height:100%; object-fit:cover; display:block}
.j-prose{margin-block-start:22px; display:flex; flex-direction:column; align-items:flex-start; gap:14px}
.j-prose p{font-size:17px; line-height:1.85; color:var(--c-slate); max-width:58ch}
.j-prose .btn{margin-block-start:10px}
@media (max-width:900px){ .j-intro__grid{grid-template-columns:1fr} .j-intro__media{aspect-ratio:4/3; border-radius:64px 0 0 0} }

/* 관련 치료 */
.j-rels{display:grid; grid-template-columns:repeat(var(--n,5),minmax(0,1fr)); gap:14px}
.j-rel{display:flex; flex-direction:column; align-items:center; gap:12px; padding:28px 14px 22px; border:1px solid rgba(255,255,255,.22); border-radius:12px;
  color:#fff; text-decoration:none; position:relative; transition:background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out)}
.j-rel:hover{background:rgba(255,255,255,.08); border-color:var(--c-gold)}
.j-rel__ico{width:52px; height:52px; color:var(--c-gold)}
.j-rel__ico svg{width:100%; height:100%}
.j-rel__lbl{font-size:16.5px; font-weight:600; text-align:center; line-height:1.4}
.j-rel__plus{position:absolute; right:12px; top:10px; width:22px; height:22px; border-radius:50%; border:1px solid rgba(255,255,255,.4); font-size:15px; line-height:20px; text-align:center; color:rgba(255,255,255,.75)}
@media (max-width:900px){ .j-rels{grid-template-columns:repeat(3,1fr)} }
@media (max-width:560px){ .j-rels{grid-template-columns:repeat(2,1fr)} }

/* 지그재그 */
.j-zz__list{list-style:none; margin:0; padding:0; position:relative}
.j-zz__list::before{content:""; position:absolute; left:50%; top:24px; bottom:24px; width:1px; background:var(--hairline); transform:translateX(-.5px)}
.j-zz__row{position:relative; display:grid; grid-template-columns:1fr 1fr; gap:clamp(40px,6vw,110px); align-items:center; padding-block:clamp(28px,3.4vw,52px)}
.j-zz__text{padding-inline-end:clamp(8px,1.5vw,24px); text-align:right; display:flex; flex-direction:column; align-items:flex-end}
.j-zz__row--flip .j-zz__text{order:2; text-align:left; align-items:flex-start; padding-inline:clamp(8px,1.5vw,24px) 0}
.j-zz__row--flip .j-zz__media{order:1}
.j-zz__text .j-ans{margin-block-start:12px; font-size:17.5px}
.j-zz__det{margin-block-start:10px; font-size:16px; line-height:1.8; color:var(--c-slate); max-width:46ch}
.j-zz__dot{position:absolute; left:50%; top:50%; width:14px; height:14px; margin:-7px 0 0 -7px; border-radius:50%; background:var(--c-violet); box-shadow:0 0 0 5px var(--c-canvas)}
.j-zz__media{margin:0; aspect-ratio:16/11; overflow:hidden; border-radius:12px; background:var(--c-cream); box-shadow:0 18px 40px -28px rgba(35,42,38,.45)}
.j-zz__media img{width:100%; height:100%; object-fit:cover; display:block}
@media (max-width:820px){
  .j-zz__list::before,.j-zz__dot{display:none}
  .j-zz__row,.j-zz__row--flip{grid-template-columns:1fr; gap:18px}
  .j-zz__text,.j-zz__row--flip .j-zz__text{order:2; text-align:left; align-items:flex-start; padding:0}
  .j-zz__media,.j-zz__row--flip .j-zz__media{order:1}
}

/* 이런 분들께 — 사진 절반 + 다크 패널 */
.j-who{display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); background:var(--c-violet-deep); color:#eef3f0}
.j-who__media{position:relative; min-height:560px}
.j-who__media img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.j-who__media::after{content:""; position:absolute; inset:0; background:linear-gradient(90deg, rgba(63,95,85,0) 55%, var(--c-violet-deep) 100%)}
.j-who__panel{padding:clamp(48px,5vw,80px) clamp(24px,5vw,80px) clamp(48px,5vw,80px) clamp(24px,4vw,56px); display:flex; flex-direction:column; gap:28px; justify-content:center}
.j-who__lead{margin-block-start:14px; font-size:16.5px; line-height:1.8; color:rgba(238,243,240,.78); max-width:44ch}
.j-who__card{background:#fff; color:var(--c-violet-ink); border-radius:14px; padding:clamp(20px,2.4vw,32px) clamp(20px,2.6vw,36px); max-width:640px}
.j-checks{list-style:none; margin:0; padding:0}
.j-checks li{position:relative; padding:14px 0 14px 40px; font-size:17px; line-height:1.55; border-bottom:1px solid var(--hairline-l)}
.j-checks li:last-child{border-bottom:0}
.j-checks li::before{content:""; position:absolute; left:2px; top:16px; width:20px; height:20px; border:1.5px solid var(--c-violet); border-radius:4px}
.j-checks li::after{content:""; position:absolute; left:8px; top:19px; width:6px; height:11px; border-right:2px solid var(--c-violet); border-bottom:2px solid var(--c-violet); transform:rotate(45deg)}
.j-checks .kw{color:var(--c-violet-deep); font-weight:700}
.j-who__foot{margin-block-start:14px; font-size:14.5px; line-height:1.7; color:var(--c-slate)}
@media (max-width:900px){ .j-who{grid-template-columns:1fr} .j-who__media{min-height:280px} .j-who__media::after{background:linear-gradient(180deg, rgba(63,95,85,0) 50%, var(--c-violet-deep) 100%)} }

/* 주의사항 번호 목록 */
.j-numlist{list-style:none; margin:0 auto; padding:0; max-width:1000px; background:#fff; border-radius:14px; border:1px solid var(--hairline-l); overflow:hidden}
.j-numlist li{display:flex; align-items:flex-start; gap:18px; padding:18px 26px; border-bottom:1px solid var(--hairline-l)}
.j-numlist li:last-child{border-bottom:0}
.j-num{flex:none; width:30px; height:30px; border-radius:6px; background:var(--c-violet-deep); color:#fff; font-family:var(--serif); font-size:16px; font-weight:600; display:flex; align-items:center; justify-content:center; margin-top:2px}
.j-numlist p{font-size:16.5px; line-height:1.8; color:var(--c-graphite)}

/* 비교 표 */
.j-tbl__wrap{overflow-x:auto; max-width:1000px; margin-inline:auto}
.j-table{width:100%; border-collapse:collapse; font-size:16px; background:#fff; border-radius:14px; overflow:hidden; box-shadow:0 0 0 1px var(--hairline-l)}
.j-table th,.j-table td{padding:16px 20px; text-align:left; vertical-align:top; border-bottom:1px solid var(--hairline-l); line-height:1.6}
.j-table thead th{background:var(--c-violet-deep); color:#fff; font-weight:600; font-size:15.5px}
.j-table tbody th{width:22%; background:var(--c-mist); color:var(--c-violet-ink); font-weight:700}
.j-table tbody tr:last-child th,.j-table tbody tr:last-child td{border-bottom:0}
.j-table td b{color:var(--c-violet-deep)}

/* 사례·FAQ·안내 */
.j-cases .ba-grid{margin-block-end:var(--sp-3xl)}
.j-faq .faq{max-width:1000px; margin-inline:auto}
.j-contact .vi{max-width:1100px; margin-inline:auto}
.j-contact__cta{display:flex; justify-content:center; gap:12px; margin-block-start:var(--sp-3xl); flex-wrap:wrap}
.j-contact__cta .btn{min-height:58px; padding-inline:34px; font-size:16.5px}

/* 섹션 배경 교대 */
.j-intro{background:var(--c-canvas)} .j-zz{background:var(--c-canvas)} .j-notice{background:var(--c-cream)}
.j-tbl{background:var(--c-canvas)} .j-cases{background:var(--c-mist)} .j-faq{background:var(--c-canvas)} .j-contact{background:var(--c-cream)}

/* ── 아이콘 크기 정상화 (사용자: "아이콘 왜 이렇게 큰 거야") ──
   시안 비율(1400 기준 원 90px)에 맞춰 원은 작게, 선 아이콘은 원의 1/3 크기로. */
.w2-care__ico{width:84px; height:84px; padding:26px}
.w2-cpt__ico{width:58px; height:58px; padding:16px}
.w2-hico{width:46px; height:46px; padding:12px}
.w2-bico{width:20px; height:20px}
.j-rel__ico{width:38px; height:38px}
.j-rel{padding:24px 12px 20px; gap:10px}
@media (max-width:640px){ .w2-care__ico{width:68px; height:68px; padding:20px} }

/* ── 과정 비교 그림 타임라인 ── */
.j-proc{background:var(--c-cream)}
.j-proc__wrap{display:flex; flex-direction:column; gap:22px; max-width:1240px; margin-inline:auto}
.j-proc__row{display:grid; grid-template-columns:150px minmax(0,1fr); gap:24px; align-items:center; padding:26px 30px; background:#fff; border-radius:16px; border:1px solid var(--hairline-l)}
.j-proc__row--hl{border-color:var(--c-violet); box-shadow:0 0 0 3px rgba(94,140,126,.12)}
.j-proc__lbl{font-size:18px; font-weight:700; line-height:1.4; color:var(--c-violet-ink)}
.j-proc__row--hl .j-proc__lbl{color:var(--c-violet-deep)}
.j-proc__steps{display:flex; align-items:center; gap:10px; overflow-x:auto}
.j-proc__step{flex:1 1 0; min-width:120px; display:flex; flex-direction:column; align-items:center; text-align:center; gap:8px}
.j-proc__step figure{margin:0; width:100%; max-width:150px; aspect-ratio:1; border-radius:14px; overflow:hidden; background:var(--c-mist)}
.j-proc__step img{width:100%; height:100%; object-fit:cover; display:block}
.j-proc__step b{font-size:16px; font-weight:700; color:var(--c-violet-ink); line-height:1.35}
.j-proc__step small{font-size:13.5px; color:var(--c-slate); line-height:1.4}
.j-proc__arrow{flex:none; font-size:26px; line-height:1; color:var(--c-gold); padding-block-end:34px}
@media (max-width:820px){ .j-proc__row{grid-template-columns:1fr; gap:14px} .j-proc__step{min-width:104px} .j-proc__step figure{max-width:110px} }

/* 전후 사진 figure 기본 여백(1em 40px) 제거 — 가운데 공백 120px 원인 */
.ba-shot{margin:0}

/* 관련 치료 카드 — 사용자: "모두 키워달라" */
.j-rel{padding:44px 16px 36px; gap:18px; border-radius:16px}
.j-rel__ico{width:66px; height:66px}
.j-rel__lbl{font-size:20px}
.j-rel__plus{width:26px; height:26px; line-height:24px; font-size:17px; right:14px; top:12px}
.j-rels{gap:18px}
/* .j-related .j-h2 는 전역 .j-h2(42px) 를 그대로 쓴다 — 2026-09-28 2px 차이 제거 */
@media (max-width:640px){ .j-rel{padding:28px 12px 24px} .j-rel__ico{width:48px; height:48px} .j-rel__lbl{font-size:16px} }

/* 영문 라벨 확대 (사용자: "영문도 키워") */
.j-en{font-size:20px; letter-spacing:.32em}
.j-en--gold{font-size:20px}
.j-h2{margin-block-start:18px}
@media (max-width:640px){ .j-en{font-size:16px} }

/* 가운데 정렬 머리말은 한 줄로 (사용자: "한줄로") */
.j-center .j-h2{text-wrap:nowrap; white-space:nowrap}
.j-center .j-lead{max-width:none; white-space:nowrap}
@media (max-width:1100px){ .j-center .j-h2,.j-center .j-lead{white-space:normal; text-wrap:balance} }

.acc-top,
.ba-shot .lbl,
.brand-word,
.cond-no,
.contact-row dt,
.diff-row .no,
.doc-body .role,
.event-kicker,
.eyebrow,
.faq-item summary::before,
.field-en,
.flow-no,
.foot-col h3,
.foot-tag,
.ghost,
.h-en,
.hstep-no,
.info-card h3,
.item-no,
.j-en,
.j-num,
.phero .en,
.philo-text .big,
.promise-no,
.ptabs a .tab-no,
.rl-when,
.serif-hero,
.serif-xl,
.stat-num,
.step-no,
.vi-tel,
.vs-mark,
.w2-en,
.w2-faq__q,
.w2-hero__brand,
.w2-label,
.w2-no,
.w2-prc__no{font-weight:700}

/* ── 주의사항: 연한 병원 사진 배경 + 흰 카드 + 사각 번호 (참고 디자인) ── */
.j-notice--photo{position:relative; isolation:isolate; overflow:hidden}
.j-notice__bg{position:absolute; inset:0; z-index:-1}
.j-notice__bg img{width:100%; height:100%; object-fit:cover; opacity:.22; filter:saturate(.6)}
.j-notice__bg::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(247,244,238,.55), rgba(247,244,238,.85))}
.j-notice__ico{display:inline-flex; width:58px; height:58px; padding:14px; border-radius:50%; background:var(--c-violet-deep); color:var(--c-gold); margin-block-end:18px}
.j-notice__ico svg{width:100%; height:100%}
.j-h2--mix{font-weight:400}
.j-h2--mix b{font-weight:800; color:var(--c-violet-deep)}
.j-numlist{max-width:1420px; border-radius:6px; padding:16px 48px; box-shadow:0 24px 60px -40px rgba(35,42,38,.35)}
.j-numlist li{gap:26px; padding:24px 0; border-bottom:1px solid var(--hairline)}
.j-num{width:42px; height:42px; border-radius:2px; font-family:var(--ff); font-size:22px; font-weight:800; margin-top:1px}
.j-numlist p{font-size:21px; line-height:1.6; color:var(--c-graphite); font-weight:400}
.j-numlist p b{font-weight:700; color:var(--c-violet-ink)}
.j-notice .j-foot{font-size:17px; margin-block-start:28px}
@media (max-width:640px){ .j-numlist{padding:8px 18px} .j-numlist li{gap:14px; padding:16px 0} .j-num{width:32px; height:32px; font-size:17px} .j-numlist p{font-size:17px} }

/* 과정 타임라인 — 그림 윗선 정렬, 화살표는 그림 가운데 */
.j-proc__steps{align-items:flex-start}
.j-proc__arrow{align-self:flex-start; margin-top:58px; padding:0}
.j-proc{background:var(--c-canvas)} .j-tbl{background:var(--c-cream)}

/* ── 관련 치료 다크 밴드: 로고 마크를 크게 워터마크로 (사용자 지시) ── */
.j-related{position:relative; isolation:isolate; overflow:hidden}
.j-related::before{content:""; position:absolute; z-index:-1; right:-60px; top:50%; width:560px; height:560px; transform:translateY(-50%);
  background:url('../img/logo-mark-white.png') center/contain no-repeat; opacity:.08; pointer-events:none}
@media (max-width:900px){ .j-related::before{width:360px; height:360px; right:-80px} }

/* 로고 마크 워터마크 — 가운데 맞춤 (사용자 지시) */
.j-related::before{right:auto; left:50%; top:50%; transform:translate(-50%,-50%); width:640px; height:640px; opacity:.07}
@media (max-width:900px){ .j-related::before{width:420px; height:420px; right:auto} }

/* ── 과정 비교 재구성: 두 줄이 같은 5열 격자에 정렬, 사진 확대, 배경은 흐름상 미스트 ── */
.j-proc{background:var(--c-mist)}
.j-tbl{background:var(--c-cream)}
.j-proc__wrap{max-width:none; gap:26px}
.j-proc__row{display:block; padding:30px 36px 34px; border-radius:18px}
.j-proc__lbl{display:flex; flex-wrap:wrap; align-items:baseline; gap:12px; margin-block-end:22px; padding-block-end:14px; border-bottom:1px solid var(--hairline-l)}
.j-proc__lbl b{font-size:21px; font-weight:800; color:var(--c-violet-ink)}
.j-proc__lbl span{font-size:15px; font-weight:600; letter-spacing:.06em; color:var(--c-slate)}
.j-proc__row--hl .j-proc__lbl b{color:var(--c-violet-deep)}
.j-proc__row--hl .j-proc__lbl span{color:var(--c-violet)}
.j-proc__steps{display:grid; grid-template-columns:repeat(var(--n,5),minmax(0,1fr)); gap:0 34px; overflow:visible; align-items:start}
.j-proc__step{position:relative; min-width:0; grid-column:span var(--span,1); gap:12px}
.j-proc__step figure{max-width:none; width:100%; aspect-ratio:1; border-radius:16px}
.j-proc__step[style*="--span:2"] figure{aspect-ratio:auto; height:auto}
.j-proc__step[style*="--span:2"] figure img{aspect-ratio:2/1; object-fit:cover}
.j-proc__step b{font-size:19px}
.j-proc__step small{font-size:14.5px}
.j-proc__step:not(:last-child)::after{content:"›"; position:absolute; right:-25px; top:calc((100% - 62px) / 2 - 18px); font-size:30px; line-height:1; color:var(--c-gold); font-weight:700}
.j-proc__arrow{display:none}
@media (max-width:900px){ .j-proc__steps{gap:0 18px} .j-proc__step:not(:last-child)::after{right:-15px; font-size:22px} .j-proc__step b{font-size:15.5px} .j-proc__row{padding:20px 18px 22px} }
@media (max-width:560px){ .j-proc__steps{grid-template-columns:repeat(2,1fr); gap:18px 26px} .j-proc__step{grid-column:auto!important} .j-proc__step figure img{aspect-ratio:1!important} .j-proc__step:not(:last-child)::after{display:none} }

/* ── 비교 표 (implant-oneday-b) — [일반 | 항목 | 원데이]: 항목을 가운데 축으로 두고 헤더 알약이 각 열 바로 위에 ── */
.j-tbl__wrap{max-width:1200px; padding-block-start:8px}
.j-table{table-layout:fixed; border-collapse:separate; border-spacing:0; background:transparent; box-shadow:none; border-radius:0; overflow:visible; font-size:17.5px}
.j-table thead th{background:transparent; padding:0 0 22px; text-align:center; position:relative; border:0; vertical-align:top}
.j-table thead th.j-table__vs{width:170px}
.j-table__hd{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; width:100%; min-height:74px; padding:12px 20px; box-sizing:border-box;
  border-radius:999px; border:1.5px solid var(--hairline); background:#fff; color:var(--c-graphite); font-size:18px; font-weight:700; line-height:1.3}
.j-table__hd em{font-style:normal; font-size:12.5px; font-weight:700; letter-spacing:.14em; line-height:1; color:var(--c-gold)}
thead .j-table__b .j-table__hd{background:var(--c-violet-deep); border-color:var(--c-violet-deep); color:#fff; box-shadow:0 14px 30px -18px rgba(63,95,85,.6)}
thead .j-table__b .j-table__hd em{color:#e3d1a3}   /* 진초록 위 금색 태그 명도 대비 4.67:1 (기존 --c-gold 는 2.2:1) */
.j-table thead .j-table__vs::before{content:""; position:absolute; left:0; right:0; top:37px; border-top:1.5px solid var(--hairline)}   /* 두 알약을 잇는 선 */
.j-table thead .j-table__vs span{position:relative; display:flex; align-items:center; justify-content:center; width:52px; height:52px; margin:11px auto 0; border-radius:50%;
  background:var(--c-gold-deep); color:#fff; font-family:var(--serif); font-size:18px; font-weight:700; line-height:1; box-shadow:0 0 0 5px var(--c-cream)}
.j-table tbody th,.j-table tbody td{padding:22px 26px; border-bottom:1px solid var(--hairline-l); font-size:17.5px; line-height:1.6; vertical-align:middle}
.j-table tbody td.j-table__a{background:#fff; color:var(--c-slate); text-align:right; border-left:1px solid var(--hairline-l)}
.j-table tbody th{width:auto; background:#fff; color:var(--c-violet-ink); font-weight:800; font-size:16.5px; text-align:center; padding:22px 12px; border-left:1px solid var(--hairline-l); border-right:1px solid var(--hairline-l)}
.j-table tbody td.j-table__b{background:rgba(94,140,126,.09); color:var(--c-violet-ink); font-weight:600; text-align:left; position:relative; padding-left:52px; border-right:1px solid var(--hairline-l)}
.j-table tbody td.j-table__b::before{content:""; position:absolute; left:24px; top:50%; margin-top:-7px; width:14px; height:8px; border-left:2px solid var(--c-violet); border-bottom:2px solid var(--c-violet); transform:rotate(-45deg)}
.j-table tbody td.j-table__b b{color:var(--c-violet-deep); font-weight:800}
.j-table tbody tr:first-child th,.j-table tbody tr:first-child td{border-top:1px solid var(--hairline-l)}
.j-table tbody tr:first-child td.j-table__a{border-top-left-radius:16px} .j-table tbody tr:first-child td.j-table__b{border-top-right-radius:16px}
.j-table tbody tr:last-child td.j-table__a{border-bottom-left-radius:16px} .j-table tbody tr:last-child td.j-table__b{border-bottom-right-radius:16px}
.j-table tbody tr:last-child th,.j-table tbody tr:last-child td{border-bottom:1px solid var(--hairline-l)}   /* 옛 기본 규칙(border-bottom:0) 되돌림 — 카드 아래 테두리 */
.j-tbl .j-foot{margin-block-start:26px}
@media (max-width:760px){
  /* 행마다 [항목] 아래에 [일반 | 원데이] 두 칸 — 표 레이아웃 대신 grid 로 쌓음 */
  .j-table,.j-table thead,.j-table tbody{display:block}
  .j-table thead tr{display:grid; grid-template-columns:1fr 56px 1fr}
  .j-table thead th{display:block; padding:0 0 16px}
  .j-table thead th.j-table__vs{width:auto; display:flex; align-items:center; justify-content:center}
  .j-table thead .j-table__vs::before{display:none}
  .j-table thead .j-table__vs span{width:44px; height:44px; margin:0; font-size:15px; box-shadow:0 0 0 4px var(--c-cream)}
  .j-table__hd{height:100%; min-height:74px; padding:12px 12px; font-size:15px; line-height:1.35}
  .j-table tbody tr{display:grid; grid-template-columns:1fr 1fr}
  .j-table tbody th{grid-column:1/-1; order:-1; display:block; padding:9px 12px; font-size:14px; background:var(--c-mist); border-top:1px solid var(--hairline-l)}
  .j-table tbody td{display:block; padding:14px 12px; font-size:15px; line-height:1.55; text-align:left!important}
  .j-table tbody td.j-table__b{padding-left:32px} .j-table tbody td.j-table__b::before{left:12px; top:21px; margin-top:0}
  .j-table tbody tr:first-child td.j-table__a,.j-table tbody tr:first-child td.j-table__b{border-top:0; border-radius:0}
  .j-table tbody tr+tr th{border-top:0}   /* 앞 행 td 아래선과 겹쳐 2px 되는 것 방지 */
  .j-table tbody tr:first-child th{border-top-left-radius:16px; border-top-right-radius:16px}
  .j-table tbody tr:last-child td.j-table__a{border-bottom-left-radius:16px} .j-table tbody tr:last-child td.j-table__b{border-bottom-right-radius:16px}
}

/* ══════════════════════════════════════════════════════════════
   푸터 리디자인 — 오시는 길 & 진료시간 안내 밴드 + 법적 고지 (2026-09-14)
   ══════════════════════════════════════════════════════════════ */
.site-footer.ft2{padding:0; background:var(--c-violet-ink)}
.ft2-band{position:relative; isolation:isolate; overflow:hidden; background:var(--c-violet-deep); color:#eef3f0; padding-block:clamp(56px,6.5vw,104px)}
.ft2-band::before{content:""; position:absolute; z-index:-1; right:-120px; bottom:-140px; width:620px; height:620px;
  background:url('../img/logo-mark-white.png') center/contain no-repeat; opacity:.06; pointer-events:none}
.ft2-en{font-family:var(--serif); font-size:18px; font-weight:700; letter-spacing:.08em; color:var(--c-gold)}
.ft2-title{margin-block-start:14px; font-size:clamp(28px,3.2vw,44px); font-weight:700; line-height:1.3; letter-spacing:-.02em; color:#fff}
.ft2-grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); gap:clamp(36px,5vw,90px); margin-block-start:clamp(36px,4vw,60px)}
.ft2-h{display:flex; align-items:center; justify-content:space-between; gap:16px; margin-block-end:22px}
.ft2-h h3{font-size:clamp(20px,1.8vw,26px); font-weight:700; color:#fff}
.ft2-h__en{margin-inline-start:10px; font-family:var(--serif); font-size:.72em; font-weight:700; letter-spacing:.06em; color:rgba(238,243,240,.6)}
.ft2-nbtn{display:inline-flex; align-items:center; gap:10px; padding:10px 20px 10px 12px; border-radius:999px; background:rgba(255,255,255,.12); color:#fff;
  font-size:15px; font-weight:600; text-decoration:none; border:1px solid rgba(255,255,255,.18)}
.ft2-nbtn:hover{background:rgba(255,255,255,.2)}
.ft2-nbtn__n{display:inline-flex; align-items:center; justify-content:center; width:26px; height:26px; border-radius:6px; background:#03c75a; color:#fff; font-weight:800; font-size:14px}
.ft2-map__frame{aspect-ratio:16/10; border-radius:14px; overflow:hidden; background:rgba(255,255,255,.08); box-shadow:0 20px 50px -30px rgba(0,0,0,.6)}
.ft2-map__frame iframe{width:100%; height:100%; border:0; display:block; filter:saturate(.85)}
.ft2-addr{margin-block-start:18px; display:flex; align-items:flex-start; gap:10px; font-size:17px; line-height:1.6; color:#fff}
.ft2-addr em{font-style:normal; color:rgba(238,243,240,.85)}
.ft2-ico{display:inline-flex; width:22px; height:22px; flex:none; color:var(--c-gold); margin-top:2px}
.ft2-ico svg{width:100%; height:100%}
.ft2-rows{margin:0; display:flex; flex-direction:column; gap:0}
.ft2-row{display:grid; grid-template-columns:150px minmax(0,1fr); gap:18px; align-items:baseline; padding-block:16px; border-bottom:1px solid rgba(255,255,255,.1)}
.ft2-row:last-child{border-bottom:0}
.ft2-row dt{display:flex; align-items:center; gap:10px; font-size:17px; font-weight:600; color:#fff; white-space:nowrap}
.ft2-row dd{margin:0; font-size:17px; line-height:1.7; color:rgba(238,243,240,.82)}
.ft2-tel{font-family:var(--serif); font-size:clamp(30px,2.6vw,38px); font-weight:700; letter-spacing:.02em; color:#fff; text-decoration:none; line-height:1.1}
.ft2-tel:hover{color:var(--c-gold)}
.ft2-hours{border-collapse:collapse; width:100%; max-width:440px}
.ft2-hours th,.ft2-hours td{padding:5px 0; text-align:left; font-weight:400; font-size:17px; line-height:1.6; vertical-align:baseline}
.ft2-hours th{width:44%; color:rgba(238,243,240,.85)}
.ft2-hours td{color:#fff; font-variant-numeric:tabular-nums}
.ft2-tag{display:inline-block; margin-inline-start:8px; padding:2px 9px; border-radius:999px; font-size:12.5px; font-weight:700; background:#e8d8bd; color:#4a3a22; vertical-align:2px}
.ft2-btns{display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-block-start:28px}
.ft2-btn{display:flex; align-items:center; justify-content:center; min-height:58px; border-radius:10px; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.18);
  color:#fff; font-size:16px; font-weight:600; text-decoration:none; transition:background var(--dur-fast) var(--ease-out)}
.ft2-btn:hover{background:var(--c-gold); border-color:var(--c-gold); color:var(--c-violet-ink)}
.ft2-bottom{padding-block:36px 44px}
.ft2-brand{display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; padding-block-end:22px; margin-block-end:22px; border-bottom:1px solid rgba(255,255,255,.12)}
.ft2-brand img{height:38px; width:auto}
.ft2-links{display:flex; flex-wrap:wrap; gap:6px 24px}
.ft2-links a{font-size:15px; color:rgba(238,243,240,.75); text-decoration:none}
.ft2-links a:hover{color:#fff}
.ft2 .foot-legal{color:rgba(238,243,240,.82)} .ft2 .foot-review{color:rgba(238,243,240,.82)} .ft2 .foot-note{color:rgba(238,243,240,.78)}
@media (max-width:900px){
  .ft2-grid{grid-template-columns:1fr}
  .ft2-row{grid-template-columns:1fr; gap:6px; padding-block:14px}
  .ft2-btns{grid-template-columns:1fr}
}

/* ── 원장 사진 프레임: 사진 배경색과 같은 판 위에, 바깥 이중 선, 아래 이름판 ── */
.j-intro__media--frame{position:relative; aspect-ratio:auto; overflow:visible; border-radius:18px; background:#e9ebea; padding:0; margin:14px 14px 0 0;
  box-shadow:0 30px 60px -40px rgba(35,42,38,.45)}
.j-intro__media--frame::before{content:""; position:absolute; inset:-14px 0 14px -14px; border:1.5px solid var(--c-gold); border-radius:20px; pointer-events:none; opacity:.85}
.j-intro__media--frame::after{content:""; position:absolute; right:-14px; top:14px; bottom:-14px; width:14px; border-radius:0 20px 20px 0; background:var(--c-violet-deep); opacity:.9; z-index:-1}
.j-intro__media--frame img{display:block; width:100%; height:auto; aspect-ratio:519/585; object-fit:cover; object-position:top; border-radius:18px 18px 0 0}
.j-intro__media--frame figcaption{display:flex; align-items:center; justify-content:center; gap:8px; padding:16px 20px; background:var(--c-violet-deep); color:#fff;
  font-size:16.5px; letter-spacing:.01em; border-radius:0 0 18px 18px}
.j-intro__media--frame figcaption b{font-weight:800; color:var(--c-gold)}
@media (max-width:900px){ .j-intro__media--frame{margin-inline-end:14px} }

/* 원장 사진 프레임 — 어긋난 오프셋 선 제거, 사진을 감싸는 정직한 매트 프레임 */
.j-intro__media--frame{margin:0; padding:14px; background:#fff; border:1.5px solid var(--c-gold); border-radius:20px; box-shadow:0 30px 60px -40px rgba(35,42,38,.45)}
.j-intro__media--frame::before,.j-intro__media--frame::after{display:none}
.j-intro__media--frame img{border-radius:12px 12px 0 0; background:#e9ebea}
.j-intro__media--frame figcaption{border-radius:0 0 12px 12px}

/* 4단계 줄은 5단계 줄과 같은 칸 폭으로 가운데 정렬 — 빈 칸이 남아 보이지 않게 */
.j-proc__steps[style*="--n:4"]{width:calc((100% - 4 * 34px) / 5 * 4 + 3 * 34px); margin-inline:auto}
@media (max-width:900px){ .j-proc__steps[style*="--n:4"]{width:calc((100% - 4 * 18px) / 5 * 4 + 3 * 18px)} }
@media (max-width:560px){ .j-proc__steps[style*="--n:4"]{width:100%} }

/* 과정 그림 확대 — 이 섹션만 컨테이너를 넓히고 여백을 줄여 그림을 키운다 */
.j-proc .container{max-width:1720px}
.j-proc__row{padding:28px 28px 30px}
.j-proc__steps{gap:0 26px}
.j-proc__step:not(:last-child)::after{right:-21px}
.j-proc__steps[style*="--n:4"]{width:calc((100% - 4 * 26px) / 5 * 4 + 3 * 26px)}
.j-proc__step b{font-size:20px}
.j-proc__step small{font-size:15px}
@media (max-width:900px){ .j-proc__steps[style*="--n:4"]{width:calc((100% - 4 * 18px) / 5 * 4 + 3 * 18px)} }

/* 장점 4 (원본 내용) — 여정형 페이지 안에서 */
.j-benefits{background:var(--c-canvas)}
.j-benefits .section-head{margin-block-end:var(--sp-3xl)}
.j-benefits .item-grid{max-width:1200px; margin-inline:auto}
.j-benefits .item{background:#fff}
/* 어려운 경우 목록 (다크 밴드 카드 안) */
.j-who__sub{margin-block-start:22px; padding-block-start:18px; border-top:1px solid var(--hairline-l); font-size:15px; font-weight:700; letter-spacing:.02em; color:var(--c-slate)}
.j-avoid{list-style:none; margin:8px 0 0; padding:0}
.j-avoid li{position:relative; padding:9px 0 9px 30px; font-size:16px; line-height:1.5; color:var(--c-graphite)}
.j-avoid li::before,.j-avoid li::after{content:""; position:absolute; left:6px; top:18px; width:14px; height:2px; background:#b9583f; border-radius:2px}
.j-avoid li::before{transform:rotate(45deg)} .j-avoid li::after{transform:rotate(-45deg)}

/* 과정 줄 보강 — 단계 번호 배지, 단계 수, 총 치료기간 */
.j-proc__lbl{align-items:center; gap:14px}
.j-proc__cnt{font-style:normal; font-size:13.5px; font-weight:700; letter-spacing:.04em; padding:4px 10px; border-radius:999px; background:var(--c-mist); color:var(--c-violet-deep)}
.j-proc__row--hl .j-proc__cnt{background:var(--c-violet-deep); color:#fff}
.j-proc__total{margin-inline-start:auto; display:inline-flex; align-items:baseline; gap:10px; font-size:19px; font-weight:800; color:var(--c-violet-ink)}
.j-proc__total em{font-style:normal; font-size:13.5px; font-weight:600; color:var(--c-slate); letter-spacing:.02em}
.j-proc__row--hl .j-proc__total{color:var(--c-violet-deep)}
.j-proc__step figure{position:relative}
.j-proc__no{position:absolute; left:10px; top:10px; z-index:1; width:30px; height:30px; border-radius:50%; background:var(--c-violet-deep); color:#fff;
  font-family:var(--serif); font-size:16px; font-weight:700; display:flex; align-items:center; justify-content:center; box-shadow:0 0 0 3px rgba(255,255,255,.9)}
.j-proc__step small{min-height:1.4em}
@media (max-width:640px){ .j-proc__total{margin-inline-start:0; width:100%} }

/* 관련 치료 — 사진 카드 */
.j-rel--photo{padding:0; overflow:hidden; gap:0; background:rgba(255,255,255,.06)}
.j-rel__media{display:block; width:100%; aspect-ratio:16/10; overflow:hidden; background:rgba(0,0,0,.2)}
.j-rel__media img{width:100%; height:100%; object-fit:cover; display:block; transition:transform var(--dur-base) var(--ease-out)}
.j-rel--photo:hover .j-rel__media img{transform:scale(1.05)}
.j-rel--photo .j-rel__lbl{padding:18px 14px 20px; font-size:19px}
.j-rel--photo .j-rel__plus{background:rgba(35,42,38,.45); border-color:rgba(255,255,255,.5)}

/* 관련 치료 사진 카드 — 크게, 사진 잘 보이게, 정돈 */
.j-related .container{max-width:1720px}
.j-rels{gap:22px}
.j-rel--photo{border-radius:18px; border-color:rgba(255,255,255,.16)}
.j-rel__media{aspect-ratio:4/3}
.j-rel__media img{object-position:center}
.j-rel--photo .j-rel__lbl{padding:22px 16px 24px; font-size:21px; width:100%; background:rgba(255,255,255,.05)}
.j-rel--photo .j-rel__plus{display:none}
.j-rel--photo:hover{border-color:var(--c-gold)}

/* ── shadcn Card 문법으로 만든 두 카드 (맞는 경우 / 어려운 경우) ── */
.j-who--two{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr)}
.j-who--two .j-who__lead{max-width:56ch}
.j-who__cards{display:grid; grid-template-columns:1fr 1fr; gap:18px; align-items:stretch}
.sc-card{display:flex; flex-direction:column; gap:0; background:#fff; color:var(--c-violet-ink); border:1px solid var(--hairline-l); border-radius:14px;
  box-shadow:0 1px 2px rgba(35,42,38,.06), 0 24px 48px -36px rgba(0,0,0,.5); overflow:hidden}
.sc-card__head{display:flex; flex-direction:column; gap:6px; padding:22px 22px 16px; border-bottom:1px solid var(--hairline-l)}
.sc-card__title{font-size:19px; font-weight:700; letter-spacing:-.01em; line-height:1.35}
.sc-card__desc{font-size:14.5px; line-height:1.6; color:var(--c-slate)}
.sc-badge{align-self:flex-start; display:inline-flex; align-items:center; height:24px; padding:0 10px; border-radius:999px; font-size:12.5px; font-weight:700; letter-spacing:.04em; border:1px solid transparent}
.sc-badge--ok{background:rgba(94,140,126,.14); color:var(--c-violet-deep); border-color:rgba(94,140,126,.3)}
.sc-badge--no{background:rgba(185,88,63,.1); color:#9a4a34; border-color:rgba(185,88,63,.28)}
.sc-card--ok{border-top:3px solid var(--c-violet)}
.sc-card--no{border-top:3px solid #c9776a}
.sc-list{list-style:none; margin:0; padding:8px 22px 18px}
.sc-list li{position:relative; padding:12px 0 12px 32px; font-size:16.5px; line-height:1.5; border-bottom:1px solid var(--hairline-l)}
.sc-list li:last-child{border-bottom:0}
.sc-list .kw{color:var(--c-violet-deep); font-weight:700}
.sc-list--check li::before{content:""; position:absolute; left:2px; top:14px; width:18px; height:18px; border-radius:50%; background:rgba(94,140,126,.14)}
.sc-list--check li::after{content:""; position:absolute; left:8px; top:18px; width:5px; height:9px; border-right:2px solid var(--c-violet-deep); border-bottom:2px solid var(--c-violet-deep); transform:rotate(45deg)}
.sc-list--x li::before{content:""; position:absolute; left:2px; top:14px; width:18px; height:18px; border-radius:50%; background:rgba(185,88,63,.1)}
.sc-list--x li::after{content:"×"; position:absolute; left:2px; top:12px; width:18px; text-align:center; font-size:16px; font-weight:800; line-height:1.3; color:#b9583f}
.j-who--two .j-who__foot{margin-block-start:18px; color:rgba(238,243,240,.72)}
@media (max-width:1100px){ .j-who__cards{grid-template-columns:1fr} }
@media (max-width:900px){ .j-who--two{grid-template-columns:1fr} }

/* 원데이(4단계) 줄은 카드 폭을 다 써서 그림을 키운다 — 강조 줄이니 더 크게 보이는 게 맞다 */
.j-proc__steps[style*="--n:4"]{width:100%; margin-inline:0}
.j-proc__row--hl .j-proc__step b{font-size:21px}
.j-proc__row--hl .j-proc__no{width:34px; height:34px; font-size:17px}

/* 제목 영문 라벨 확대 (사용자: "모든 제목 영문을 키워") — 여정형 페이지 + 공용 아이브로우 */
.j-en{font-size:24px; letter-spacing:.3em}
.j-en--gold{font-size:24px}
.j-h2{margin-block-start:20px}
.ft2-en{font-size:22px}
.eyebrow{font-size:20px}
.eyebrow .en{font-size:1em}
.phero .en{font-size:clamp(30px,3.6vw,46px)}
@media (max-width:640px){ .j-en,.j-en--gold{font-size:17px} .eyebrow{font-size:15px} .ft2-en{font-size:16px} }

/* ── 장점 카드 (implant-oneday-b "원데이 임플란트의 장점") — 아이콘 + 번호 + 제목 + 핵심어 강조 (사용자: "눈에 잘 안 들어와") ── */
.j-benefits{background:var(--c-cream)}
.j-bens{display:grid; grid-template-columns:repeat(var(--n,4),minmax(0,1fr)); gap:22px; max-width:1240px; margin-inline:auto}
.j-ben{position:relative; display:flex; flex-direction:column; gap:14px; padding:30px 28px 32px; background:#fff; border:1px solid var(--hairline-l); border-radius:20px;
  box-shadow:0 1px 2px rgba(35,42,38,.05), 0 26px 44px -36px rgba(35,42,38,.45); transition:transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out)}
.j-ben:hover{transform:translateY(-4px); border-color:rgba(94,140,126,.45); box-shadow:0 1px 2px rgba(35,42,38,.05), 0 30px 48px -32px rgba(63,95,85,.55)}
.j-ben__ico{display:flex; align-items:center; justify-content:center; width:60px; height:60px; border-radius:16px; background:var(--c-mist); color:var(--c-violet-deep)}
.j-ben__ico svg{width:30px; height:30px}
.j-ben__no{position:absolute; top:26px; right:26px; font-family:var(--serif); font-size:34px; font-weight:600; line-height:1; color:var(--c-gold); opacity:.55}
.j-ben__title{margin-block-start:6px; font-size:21px; font-weight:800; line-height:1.3; letter-spacing:-.01em; color:var(--c-violet-ink); word-break:keep-all}
.j-ben__title::after{content:""; display:block; width:28px; height:3px; margin-block-start:14px; border-radius:2px; background:var(--c-gold)}
.j-ben__desc{font-size:15.5px; line-height:1.75; color:var(--c-slate); word-break:keep-all}
.j-ben__desc b{font-weight:700; color:var(--c-violet-deep)}
@media (max-width:1100px){ .j-bens{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:600px){ .j-bens{grid-template-columns:1fr; gap:14px} .j-ben{padding:24px 22px 26px; gap:12px} .j-ben__ico{width:52px; height:52px} .j-ben__ico svg{width:26px; height:26px} .j-ben__no{top:22px; right:22px; font-size:28px} .j-ben__title{font-size:19px} .j-ben__desc{font-size:15px} }

/* ── 2026-09-14 여정형 순서 재배치: 영문 라벨 가시성(금색 선 + 굵게), 의료진 섹션, 상담 CTA ── */
.j-en{display:inline-flex; align-items:center; gap:14px; font-weight:700; color:var(--c-gold-deep)}
.j-en::before{content:""; flex:none; width:30px; height:2px; background:var(--c-gold)}
.j-en--gold{color:var(--c-gold-deep)}
.j-doctor{background:var(--c-cream)}
@media (min-width:901px){ .j-doctor .j-intro__media{order:2} }
.j-cv{list-style:none; margin:26px 0 0; padding:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px 24px}
.j-cv li{position:relative; padding-left:18px; font-size:15.5px; line-height:1.55; font-weight:600; color:var(--c-violet-ink)}
.j-cv li::before{content:""; position:absolute; left:0; top:.6em; width:8px; height:8px; border-radius:50%; background:var(--c-gold)}
.j-cv__note{margin:12px 0 0; font-size:13px; color:var(--c-slate)}
.j-doctor__more{margin-block-start:26px}
@media (max-width:640px){ .j-cv{grid-template-columns:1fr} }
.j-cta{background:var(--c-canvas)}
.j-cta .j-center{margin-block-end:0}
.j-cta__btns{display:flex; flex-wrap:wrap; justify-content:center; gap:14px; margin-block-start:34px}
.j-cta__btns .btn{min-width:200px; justify-content:center}
/* 주의 배지 제거 후 두 카드 제목 높이 맞춤 (배지 24px + gap 6px 만큼 위 여백) */
.sc-card--no .sc-card__head{padding-top:52px}
@media (max-width:1100px){ .sc-card--no .sc-card__head{padding-top:22px} }
/* 라벨을 블록 flex 로 — 고지 섹션의 종 아이콘이 라벨과 같은 줄에 붙지 않게 */
.j-en{display:flex}
.j-center .j-en{justify-content:center}

/* ── 비교 표 '일반' 열 — 오른쪽 정렬로 왼쪽이 비어 보이던 것을 원데이 열과 같은 [표시 + 글] 구조로 (사용자: "이 부분이 아쉬워") ── */
.j-table tbody td.j-table__a{text-align:left; position:relative; padding-left:52px}
.j-table tbody td.j-table__a::before{content:""; position:absolute; left:24px; top:50%; width:10px; height:10px; margin-top:-5px; box-sizing:border-box; border:1.5px solid var(--c-taupe); border-radius:50%}
@media (max-width:760px){ .j-table tbody td.j-table__a{padding-left:32px} .j-table tbody td.j-table__a::before{left:12px; top:21px; margin-top:0} }
/* 의료진 액자: 이름판 삭제 → 사진 네 모서리 모두 둥글게 */
.j-doctor .j-intro__media--frame img{border-radius:12px}

/* ── 2026-09-14 여정형: 섹션 사이 여백 축소, 장점 카드 확대, 어려운 경우 카드 아래 빈 공간 제거 ── */
.j-intro,.j-tbl,.j-benefits,.j-zz,.j-proc,.j-cases,.j-notice,.j-faq,.j-doctor,.j-related,.j-cta,
/* 2026-09-23: 신설 페이지가 쓰는 세 부품과 칼럼 본문도 같은 여백을 쓰도록 이 목록에 합쳤다.
   (별도 블록을 덧붙이지 않고 여정형 여백 정본 한 곳에서 관리한다) */
.j-feature,.j-fsl,.j-diag,.j-gcards,.pt-tabs,.j-situations,.j-radial,body[data-page^="column"] .section{padding-block:clamp(44px,4.6vw,72px)}
.j-center{margin-block-end:clamp(24px,2.6vw,36px)}
.j-who__panel{padding-block:clamp(40px,4vw,56px)}
.j-who__panel{gap:22px}
.j-cases .ba-grid{margin-block-end:var(--sp-lg)}
.j-cases .ba-note{margin-block-start:var(--sp-lg)}
.j-foot,.j-notice .j-foot,.j-tbl .j-foot{margin-block-start:18px}
.j-who__cards{align-items:start}
.j-benefits .container{max-width:1720px}
.j-bens{max-width:none; gap:26px}
.j-ben{padding:40px 36px 42px; gap:16px}
.j-ben__ico{width:76px; height:76px; border-radius:20px}
.j-ben__ico svg{width:38px; height:38px}
.j-ben__no{top:30px; right:32px; font-size:42px}
.j-ben__title{font-size:26px}
.j-ben__title::after{width:34px; margin-block-start:16px}
.j-ben__desc{font-size:17.5px; line-height:1.8}
@media (max-width:1100px){ .j-ben{padding:30px 28px 32px} .j-ben__title{font-size:22px} .j-ben__desc{font-size:16px} }
/* 의료진: 이름·전문의·약력 프로필형 (질문형 제목·본문 없음) */
.j-doc__role{margin:18px 0 4px; font-size:16px; font-weight:700; letter-spacing:.1em; color:var(--c-violet-deep)}
.j-doctor .j-h2.j-doc__name{margin-block-start:0; font-size:clamp(34px,3.4vw,48px)}
.j-doctor .j-ans{margin-block-start:12px}
.j-doc__fields{margin:10px 0 0; font-size:16px; line-height:1.6; color:var(--c-slate)}
.j-cvg{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px 32px; margin:30px 0 0}
.j-cvg__g dt{margin:0 0 10px; padding-block-end:8px; border-bottom:1px solid var(--hairline-l); font-size:14px; font-weight:800; letter-spacing:.06em; color:var(--c-gold-deep)}
.j-cvg__g dd{margin:0}
.j-cvg__g ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px}
.j-cvg__g li{position:relative; padding-left:14px; font-size:15px; line-height:1.55; color:var(--c-violet-ink)}
.j-cvg__g li::before{content:""; position:absolute; left:0; top:.66em; width:5px; height:5px; border-radius:50%; background:var(--c-gold)}
.j-doctor .j-cv__note{margin-block-start:16px}
@media (max-width:640px){ .j-cvg{grid-template-columns:1fr} }
/* 약력 두 열: 각 열 안에서 그룹이 위로 붙게 (dl → div) */
.j-cvg{gap:0 32px; align-items:start}
.j-cvg__col{display:flex; flex-direction:column; gap:24px}
.j-cvg__t{margin:0 0 10px; padding-block-end:8px; border-bottom:1px solid var(--hairline-l); font-size:14px; font-weight:800; letter-spacing:.06em; color:var(--c-gold-deep)}

/* ── 비교 표 확정안 (심사 B안: 거울 배치) — 표를 1080px로 좁히고 칸을 조여 빈 공간을 줄이며,
   일반 값은 축 쪽으로 오른쪽 정렬(표시 없음), 원데이 값은 축 쪽으로 왼쪽 정렬(✓) → 항목을 중심으로 좌우 대칭 (사용자: "어색해") ── */
.j-tbl__wrap{max-width:1080px}
.j-table tbody td.j-table__a::before{content:none}
@media (min-width:761px){
  .j-table{font-size:17px}
  .j-table thead th.j-table__vs{width:140px}
  .j-table tbody th,.j-table tbody td{padding:19px 24px; font-size:17px; vertical-align:top}
  .j-table tbody th{font-size:16px; padding:19px 10px; vertical-align:middle}
  .j-table tbody td.j-table__a{text-align:right; padding-left:24px}
  .j-table tbody td.j-table__b{padding-left:52px; padding-right:16px}
  .j-table tbody td.j-table__b::before{top:29px; margin-top:0}   /* ✓ 를 첫 줄에 맞춤 (여러 줄일 때도) */
}

/* ── 2026-09-14 여정형: 치료사례 섹션 구분(흰 배경 + 상단 선), 전후 사진 사이 큰 화살표 ── */
.j-cases{background:#fff; border-top:1px solid var(--hairline-l)}
.j-cases .ba-pair{position:relative; gap:64px}
.j-cases .ba-pair::after{content:""; position:absolute; left:50%; top:50%; width:72px; height:72px; transform:translate(-50%,-50%); border-radius:50%;
  background:var(--c-violet-deep) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M4 12h16M13 5l7 7-7 7'/></svg>") center/38px no-repeat;
  box-shadow:0 0 0 5px #fff, 0 14px 28px -12px rgba(35,42,38,.5); pointer-events:none}
@media (max-width:900px){ .j-cases .ba-pair{gap:32px} .j-cases .ba-pair::after{width:48px; height:48px; background-size:26px; box-shadow:0 0 0 4px #fff} }
/* 2026-09-29: 390px 에서 전후 두 장이 나란히 들어가 161px 로 줄어 치아가 안 보였다.
   좁은 화면에서는 Before 위 / After 아래로 세로 배치해 전폭을 쓴다(순서 유지). */
@media (max-width:640px){
  .ba-pair{grid-template-columns:1fr; gap:14px}
  .j-cases .ba-pair{gap:14px}
  .j-cases .ba-pair::after{left:50%; top:auto; bottom:calc(50% - 7px); transform:translate(-50%,50%) rotate(90deg); width:38px; height:38px; background-size:20px}
}

/* ── 2026-09-14 최종 순서: 사례 한 줄에 한 쌍(크게), 상담 CTA 아래 관련 치료 텍스트 링크 ── */
.j-cases .ba-grid{grid-template-columns:1fr; max-width:1400px; margin-inline:auto; gap:40px}
.j-cta__links{margin:34px 0 0; display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:8px 0; font-size:15px; color:var(--c-slate)}
.j-cta__links span{margin-inline-end:14px; font-weight:700; color:var(--c-violet-deep)}
.j-cta__links a{position:relative; padding:0 14px; color:var(--c-violet-ink); text-decoration:none; border-left:1px solid var(--hairline)}
.j-cta__links a:first-of-type{border-left:0}
.j-cta__links a:hover{color:var(--c-violet); text-decoration:underline; text-underline-offset:4px}
.j-cases .ba-grid{max-width:1600px}
.j-cta .j-ans--center{max-width:56ch; margin-inline:auto}
/* 두 카드 모두 배지 없음 → 어려운 경우 카드 상단 빈 여백 제거 */
.sc-card--no .sc-card__head{padding-top:22px}

/* ── 2026-09-14 푸터 단순화: 밴드 제목·버튼 줄 제거, 왼쪽 지도+주소·교통·주차, 오른쪽 진료시간+전화 ── */
.ft2-band--simple{padding-block:clamp(48px,5vw,80px)}
.ft2-band--simple .ft2-grid{margin-block-start:0; align-items:start}
.ft2-band--simple .ft2-h{margin-block-end:18px}
.ft2-band--simple .ft2-h h3{font-size:22px}
.ft2-addr--sub{margin-block-start:10px; font-size:15.5px; color:rgba(238,243,240,.78)}
.ft2-addr--sub em{margin-inline:6px}
.ft2-band--simple .ft2-hours{max-width:520px}
.ft2-band--simple .ft2-hours th,.ft2-band--simple .ft2-hours td{padding:9px 0; border-bottom:1px solid rgba(255,255,255,.1)}
.ft2-band--simple .ft2-hours tr:last-child th,.ft2-band--simple .ft2-hours tr:last-child td{border-bottom:0}
.ft2-telline{margin:26px 0 0; display:flex; align-items:center; gap:12px}
.ft2-telline .ft2-ico{margin:0; width:26px; height:26px}
.ft2-bottom .foot-review{margin-block-start:10px}
/* 의료진 핵심 약력 한 열 */
.j-cv--one{grid-template-columns:1fr; gap:8px; margin-block-start:22px}
.j-cv--one li{font-size:16px}

/* ── 2026-09-14 여정형 spec 페이지용 부품: 2×2 카드(cards2), 이미지 없는 스텝, 카드 아래 노트 ── */
.j-gcards{background:var(--c-cream)}
.j-gcards__grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px; max-width:1400px; margin-inline:auto}
.sc-card--plain{background:#fff; border:1px solid var(--hairline-l); border-radius:20px; overflow:hidden; box-shadow:0 1px 2px rgba(35,42,38,.05), 0 26px 44px -36px rgba(35,42,38,.4)}
.sc-card--plain .sc-card__head{padding:26px 28px 18px}
.sc-card--plain .sc-card__title{font-size:22px; color:var(--c-violet-ink)}
.sc-card--plain .sc-card__desc{margin:6px 0 0; font-size:15px; color:var(--c-slate)}
.sc-list--dot{list-style:none; margin:0; padding:18px 28px 26px; display:flex; flex-direction:column; gap:10px}
.sc-list--dot li{position:relative; padding-left:18px; font-size:16px; line-height:1.7; color:var(--c-violet-ink)}
.sc-list--dot li::before{content:""; position:absolute; left:0; top:.72em; width:7px; height:7px; border-radius:50%; background:var(--c-gold)}
@media (max-width:900px){ .j-gcards__grid{grid-template-columns:1fr} .sc-card--plain .sc-card__title{font-size:19px} }
.j-bens__note{max-width:900px; margin:30px auto 0; padding:22px 28px; border-left:3px solid var(--c-gold); background:#fff; border-radius:0 14px 14px 0; font-size:16.5px; line-height:1.8; color:var(--c-violet-ink)}
.j-bens__note b{color:var(--c-violet-deep)}
.j-proc__step--noimg{padding-top:8px}
.j-proc__no--solo{position:static; width:56px; height:56px; font-size:22px; margin-block-end:6px}
.j-proc__step--noimg:not(:last-child)::after{top:14px}

/* ── 여정형 spec 페이지 히어로 배경 ── */
.phero--implant-full::before{background-image:var(--tint),url('../img/ph/hero-implant-full.jpg')}
.phero--implant-advanced::before{background-image:var(--tint),url('../img/ph/hero-implant-adv.jpg')}
.phero--implant-redo::before{background-image:var(--tint),url('../img/ph/hero-implant-redo.jpg')}
.phero--implant-guide::before{background-image:var(--tint),url('../img/ph/hero-implant-guide.jpg')}
/* 히어로 교체분 캐시 무효화 */
.phero--implant-full::before{background-image:var(--tint),url('../img/ph/hero-implant-full.jpg?v=2')}
.phero--implant-advanced::before{background-image:var(--tint),url('../img/ph/hero-implant-adv.jpg?v=2')}
.phero--implant-redo::before{background-image:var(--tint),url('../img/ph/hero-implant-redo.jpg?v=2')}

/* ══════════════════════════════════════════════════════════════
   모션 — implant-oneday 여정형 페이지 (2026-09-14, 사용자: "알아서 모션을 넣어달라")
   원칙: transform/opacity 만 애니메이션(레이아웃 불변) · JS 가 html.mo 를 붙일 때만 켜짐
        · 기존 .reveal.is-in 스크롤 트리거를 부모로 쓰고 자식만 순차 등장(부모는 페이드만) · 한 섹션은 1초 안에 정착
        · fill-mode 는 backwards(끝나면 원래 상태로 돌아가 hover transform 이 살아 있음) · reduced-motion 이면 지연까지 0
   ══════════════════════════════════════════════════════════════ */
:root{--mo-ease:cubic-bezier(.22,.61,.36,1); --mo-spring:cubic-bezier(.34,1.56,.64,1)}
@keyframes mo-up{from{opacity:0; transform:translateY(18px)} to{opacity:1; transform:none}}
@keyframes mo-left{from{opacity:0; transform:translateX(-36px)} to{opacity:1; transform:none}}
@keyframes mo-right{from{opacity:0; transform:translateX(36px)} to{opacity:1; transform:none}}
@keyframes mo-pop{from{opacity:0; transform:scale(.4)} to{opacity:1; transform:scale(1)}}
@keyframes mo-pop-c{from{opacity:0; transform:translate(-50%,-50%) scale(.4)} to{opacity:1; transform:translate(-50%,-50%) scale(1)}}
@keyframes mo-check-b{from{opacity:0; transform:rotate(-45deg) scale(.3)} to{opacity:1; transform:rotate(-45deg) scale(1)}}   /* 표 ✓ (원래 rotate(-45deg)) */
@keyframes mo-check{from{opacity:0; transform:rotate(45deg) scale(.3)} to{opacity:1; transform:rotate(45deg) scale(1)}}          /* 체크 목록 ✓ (원래 rotate(45deg)) */
@keyframes mo-fade{from{opacity:0} to{opacity:1}}
@keyframes mo-grow-x{from{transform:scaleX(0)} to{transform:scaleX(1)}}
@keyframes mo-zoom-out{from{scale:1.08} to{scale:1}}
@keyframes mo-ring{0%,100%{transform:rotate(0)} 15%{transform:rotate(-14deg)} 30%{transform:rotate(12deg)} 45%{transform:rotate(-8deg)} 60%{transform:rotate(5deg)} 78%{transform:rotate(-2deg)}}
@keyframes mo-halo{from{opacity:.7; transform:scale(1)} to{opacity:0; transform:scale(1.22)}}
/* 순차 지연용 인덱스 — JS 가 컨테이너에 .mo-st 를 붙임 (기존 .stagger 와 같은 --i 를 씀) */
.mo-st>*{--i:0} .mo-st>:nth-child(2){--i:1} .mo-st>:nth-child(3){--i:2} .mo-st>:nth-child(4){--i:3} .mo-st>:nth-child(5){--i:4} .mo-st>:nth-child(6){--i:5}
.mo-st>:nth-child(7){--i:6} .mo-st>:nth-child(8){--i:7} .mo-st>:nth-child(9){--i:8} .mo-st>:nth-child(10){--i:9} .mo-st>:nth-child(11){--i:10} .mo-st>:nth-child(12){--i:11}
/* 자식이 직접 등장하는 컨테이너는 부모의 24px 상승을 끄고 페이드만 (대각선 이동 방지) */
html.mo .j-tbl__wrap.reveal,html.mo .j-who__card.reveal,html.mo .ba-pair.reveal,html.mo .j-proc__row.reveal,html.mo .j-zz__row.reveal,html.mo .j-intro__body.reveal{transform:none}

/* 서브 히어로: 배경 천천히 줌아웃 + 스크롤 패럴랙스(--plx 는 JS, 최대 34px — 위아래 40px 여유를 둠) · 텍스트 순차 등장 */
html.mo .phero::before{inset:-40px 0; animation:mo-zoom-out 9s var(--mo-ease) backwards; translate:0 var(--plx,0)}
html.mo .phero .crumb{animation:mo-up .7s var(--mo-ease) .05s backwards}
html.mo .phero h1{animation:mo-up .8s var(--mo-ease) .2s backwards}
html.mo .phero p{animation:mo-up .8s var(--mo-ease) .4s backwards}

/* 소개·의료진: 사진은 옆에서(기존 reveal--left/right) 들어오며 살짝 줌아웃, 본문은 자식이 차례로 상승 */
html.mo .j-intro__media:not(.j-intro__media--frame).is-in img{animation:mo-zoom-out 1.6s var(--mo-ease) backwards}
html.mo .j-intro__body.is-in>*{animation:mo-up .55s var(--mo-ease) backwards; animation-delay:calc(.08s + var(--i,0)*70ms)}
html.mo .j-doctor .j-intro__body.is-in .j-cv li{animation:mo-up .45s var(--mo-ease) backwards; animation-delay:calc(.3s + var(--i,0)*60ms)}

/* 비교 표: 알약이 좌우에서 축으로 모이고 → 선이 자라며 → VS 팝 → 행이 위에서 차례로(✓ 는 행 바로 뒤) */
html.mo .j-tbl__wrap{overflow:visible}
html.mo .j-tbl__wrap.is-in thead .j-table__a .j-table__hd{animation:mo-left .6s var(--mo-ease) .05s backwards}
html.mo .j-tbl__wrap.is-in thead .j-table__b .j-table__hd{animation:mo-right .6s var(--mo-ease) .05s backwards}
html.mo .j-tbl__wrap.is-in thead .j-table__vs::before{animation:mo-grow-x .5s var(--mo-ease) .25s backwards}
html.mo .j-tbl__wrap.is-in thead .j-table__vs span{animation:mo-pop .5s var(--mo-spring) .4s backwards}
html.mo .j-tbl__wrap.is-in tbody tr{animation:mo-up .5s var(--mo-ease) backwards; animation-delay:calc(.15s + var(--i,0)*55ms)}
html.mo .j-tbl__wrap.is-in tbody td.j-table__b::before{animation:mo-check-b .4s var(--mo-spring) backwards; animation-delay:calc(.27s + var(--i,0)*55ms)}
@media (max-width:900px){ html.mo .j-tbl__wrap.is-in thead .j-table__a .j-table__hd,html.mo .j-tbl__wrap.is-in thead .j-table__b .j-table__hd{animation-name:mo-up} }

/* 가능한 경우: 체크 항목이 왼쪽에서 차례로(✓ 바로 뒤따라) → 각주 · 사진 패럴랙스 */
html.mo .j-who__card.is-in .j-checks li{animation:mo-left .45s var(--mo-ease) backwards; animation-delay:calc(.08s + var(--i,0)*60ms)}
html.mo .j-who__card.is-in .j-checks li::after{animation:mo-check .35s var(--mo-spring) backwards; animation-delay:calc(.2s + var(--i,0)*60ms)}
html.mo .j-who__card.is-in .j-who__foot{animation:mo-up .45s var(--mo-ease) .5s backwards}
html.mo .j-who__media{overflow:hidden} html.mo .j-who__media img{scale:1.12; translate:0 var(--plx,0)}

/* 장점 카드: 카드 순차 상승, 아이콘 팝과 금색 선은 카드 바로 뒤에 */
html.mo .j-bens.is-in .j-ben{animation:mo-up .55s var(--mo-ease) backwards; animation-delay:calc(.05s + var(--i,0)*80ms)}
html.mo .j-bens.is-in .j-ben__ico{animation:mo-pop .5s var(--mo-spring) backwards; animation-delay:calc(.15s + var(--i,0)*80ms)}
html.mo .j-bens.is-in .j-ben__title::after{transform-origin:left center; animation:mo-grow-x .45s var(--mo-ease) backwards; animation-delay:calc(.25s + var(--i,0)*80ms)}

/* 치료 원칙(지그재그): 글과 사진이 양옆에서 모이고 타임라인 점이 팝 · 사진 hover 줌 */
html.mo .j-zz__row.is-in .j-zz__text{animation:mo-left .65s var(--mo-ease) .05s backwards}
html.mo .j-zz__row.is-in .j-zz__media{animation:mo-right .65s var(--mo-ease) .05s backwards}
html.mo .j-zz__row--flip.is-in .j-zz__text{animation-name:mo-right}
html.mo .j-zz__row--flip.is-in .j-zz__media{animation-name:mo-left}
html.mo .j-zz__row.is-in .j-zz__dot{animation:mo-pop .45s var(--mo-spring) .4s backwards}
html.mo .j-zz__media img{transition:transform .9s var(--mo-ease)} html.mo .j-zz__media:hover img{transform:scale(1.04)}

/* 치료 과정: 라벨 → 단계가 왼쪽부터 차례로(번호·화살표는 바로 뒤) · 단계 hover 살짝 상승 */
html.mo .j-proc__row.is-in .j-proc__lbl{animation:mo-left .45s var(--mo-ease) .05s backwards}
html.mo .j-proc__row.is-in .j-proc__step{animation:mo-up .45s var(--mo-ease) backwards; animation-delay:calc(.15s + var(--i,0)*80ms)}
html.mo .j-proc__row.is-in .j-proc__step::after{animation:mo-fade .35s var(--mo-ease) backwards; animation-delay:calc(.3s + var(--i,0)*80ms)}
html.mo .j-proc__row.is-in .j-proc__no{animation:mo-pop .4s var(--mo-spring) backwards; animation-delay:calc(.25s + var(--i,0)*80ms)}
html.mo .j-proc__step{transition:transform .35s var(--mo-ease)} html.mo .j-proc__step:hover{transform:translateY(-4px)}

/* 치료사례: Before 는 왼쪽, After 는 오른쪽에서 · 가운데 화살표 팝 · hover 줌 */
html.mo .ba-pair.is-in .ba-shot--before{animation:mo-left .65s var(--mo-ease) .05s backwards}
html.mo .ba-pair.is-in .ba-shot--after{animation:mo-right .65s var(--mo-ease) .05s backwards}
html.mo .j-cases .ba-pair.is-in::after{animation:mo-pop-c .5s var(--mo-spring) .4s backwards}
html.mo .ba-shot img{transition:transform .9s var(--mo-ease)} html.mo .ba-shot:hover img{transform:scale(1.03)}

/* 주의사항: 종 아이콘이 한 번 흔들리고, 번호 항목이 차례로 · 배경 패럴랙스 */
html.mo .j-notice .j-center.is-in .j-notice__ico{transform-origin:50% 8%; animation:mo-ring 1.2s var(--mo-ease) .4s backwards}
html.mo .j-numlist.is-in li{animation:mo-up .45s var(--mo-ease) backwards; animation-delay:calc(.05s + var(--i,0)*60ms)}
html.mo .j-numlist.is-in .j-num{animation:mo-pop .4s var(--mo-spring) backwards; animation-delay:calc(.15s + var(--i,0)*60ms)}
html.mo .j-notice__bg{overflow:hidden} html.mo .j-notice__bg img{scale:1.12; translate:0 var(--plx,0)}

/* FAQ: 질문이 차례로 · 펼칠 때 답이 부드럽게 · hover 색 */
html.mo .faq.is-in .faq-item{animation:mo-up .45s var(--mo-ease) backwards; animation-delay:calc(.05s + var(--i,0)*50ms)}
html.mo .faq-item[open] .faq-a{animation:mo-up .35s var(--mo-ease) backwards}
html.mo .faq-item summary{transition:color .25s var(--mo-ease), background .25s var(--mo-ease)} html.mo .faq-item summary:hover{color:var(--c-violet-deep)}

/* 상담: 버튼 순차 등장 + 첫 버튼 둘레에 퍼지는 링 두 번(::after — 버튼 자체의 그림자·hover 는 그대로) */
html.mo .j-cta__btns.is-in .btn{animation:mo-up .45s var(--mo-ease) backwards; animation-delay:calc(.05s + var(--i,0)*100ms)}
html.mo .j-cta__btns.is-in .btn:first-child{position:relative}
html.mo .j-cta__btns.is-in .btn:first-child::after{content:""; position:absolute; inset:-3px; border-radius:inherit; border:2px solid rgba(63,95,85,.5); opacity:0; pointer-events:none;
  animation:mo-halo 1.4s var(--mo-ease) .9s 2 backwards}

/* 폰 폭: 옆에서 들어오는 요소가 화면 밖으로 삐져나오지 않게 전부 아래→위로 */
@media (max-width:640px){
  html.mo .j-zz__row.is-in .j-zz__text,html.mo .j-zz__row.is-in .j-zz__media,html.mo .ba-pair.is-in .ba-shot--before,html.mo .ba-pair.is-in .ba-shot--after,
  html.mo .j-who__card.is-in .j-checks li,html.mo .j-proc__row.is-in .j-proc__lbl{animation-name:mo-up}
}
/* 키보드 포커스가 아직 등장 중인 컨테이너로 들어오면 지연 없이 바로 보이게 */
html.mo .reveal:focus-within *,html.mo .reveal:focus-within *::before,html.mo .reveal:focus-within *::after{animation-delay:0s!important; animation-duration:.15s!important}
/* 접근성: 움직임 줄이기 설정이면 지연·이동 전부 해제 (지속시간은 기존 전역 규칙이 0으로) */
@media (prefers-reduced-motion:reduce){
  html.mo *,html.mo *::before,html.mo *::after{animation-delay:0s!important}
  html.mo .phero::before,html.mo .j-who__media img,html.mo .j-notice__bg img{translate:none; scale:none}
  html.mo .phero::before{inset:0}
}
.phero--implant-guide::before{background-image:var(--tint),url('../img/ph/hero-implant-guide.jpg?v=2')}

/* ── 2026-09-14 페이지별 대표 장면 부품: feature(대형 비주얼 격자) · story(실제 치료 흐름) · diag(증상→원인→해결) · flow(가로형 워크플로) ── */
.j-feature{background:var(--c-canvas)}
.j-feature .container{max-width:1720px}
.j-feats{display:grid; grid-template-columns:repeat(var(--cols,3),minmax(0,1fr)); gap:28px}
.j-feat{margin:0; background:#fff; border:1px solid var(--hairline-l); border-radius:20px; overflow:hidden; box-shadow:0 1px 2px rgba(35,42,38,.05), 0 26px 44px -36px rgba(35,42,38,.4)}
.j-feat__media{aspect-ratio:var(--ratio,4/3); background:#fff; overflow:hidden}
.j-feat__media img{width:100%; height:100%; object-fit:cover; display:block}
.j-feat figcaption{padding:22px 26px 26px}
.j-feat figcaption b{display:block; font-size:22px; font-weight:800; letter-spacing:-.01em; color:var(--c-violet-ink); line-height:1.3}
.j-feat figcaption p{margin:10px 0 0; font-size:16px; line-height:1.7; color:var(--c-slate); word-break:keep-all}
.j-feat figcaption p b{color:var(--c-violet-deep)}
@media (max-width:1100px){ .j-feats{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:640px){ .j-feats{grid-template-columns:1fr; gap:18px} .j-feat figcaption b{font-size:19px} }
.j-story{background:var(--c-mist)}
.j-story .container{max-width:1720px}
.j-story__grid{display:grid; grid-template-columns:repeat(var(--n,3),minmax(0,1fr)); gap:26px}
.j-story__step{margin:0}
.j-story__media{position:relative; aspect-ratio:16/10; border-radius:16px; overflow:hidden; background:#111; box-shadow:0 20px 40px -30px rgba(35,42,38,.5)}
.j-story__media img{width:100%; height:100%; object-fit:cover; display:block}
.j-story__no{position:absolute; left:12px; top:12px; z-index:1; width:34px; height:34px; border-radius:50%; background:var(--c-violet-deep); color:#fff; display:flex; align-items:center; justify-content:center; font-family:var(--serif); font-weight:700; font-size:17px}
.j-story__step figcaption{padding:16px 6px 0}
.j-story__step figcaption b{display:block; font-size:19px; font-weight:800; color:var(--c-violet-ink); line-height:1.35}
.j-story__step figcaption p{margin:8px 0 0; font-size:15px; line-height:1.7; color:var(--c-slate); word-break:keep-all}
@media (max-width:1100px){ .j-story__grid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:640px){ .j-story__grid{grid-template-columns:1fr} }
.j-diag{background:var(--c-cream)}
.j-diag__head,.j-diag__row{display:grid; grid-template-columns:1fr 1.2fr 1.2fr; gap:18px; max-width:1400px; margin-inline:auto}
.j-diag__head{margin-block-end:14px; padding:0 4px}
.j-diag__head span{font-family:var(--serif); font-weight:700; font-size:15px; letter-spacing:.14em; text-transform:uppercase; color:var(--c-gold-deep)}
.j-diag__list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:14px}
.j-diag__row{align-items:stretch; width:100%}   /* 2026-09-28: 부모가 flex column 이라 margin-inline:auto 가 stretch 를 죽여 행이 머리글과 어긋났다 */
.j-diag__c{position:relative; padding:22px 24px; background:#fff; border:1px solid var(--hairline-l); border-radius:16px; font-size:16.5px; line-height:1.7; color:var(--c-violet-ink); word-break:keep-all}
.j-diag__c b{color:var(--c-violet-deep)}
.j-diag__c--s{font-weight:800; font-size:18px; padding-left:64px}
.j-diag__no{position:absolute; left:20px; top:22px; width:32px; height:32px; border-radius:8px; background:var(--c-violet-deep); color:#fff; font-family:var(--serif); font-weight:700; font-size:15px; display:flex; align-items:center; justify-content:center}
.j-diag__c--m::before,.j-diag__c--r::before{content:"→"; position:absolute; left:-18px; top:50%; transform:translate(-50%,-50%); color:var(--c-gold); font-weight:700; font-size:20px}
.j-diag__c--r{background:rgba(94,140,126,.09); border-color:rgba(94,140,126,.3)}
.j-diag__lbl{display:none}
@media (max-width:900px){ .j-diag__head{display:none} .j-diag__row{grid-template-columns:1fr; gap:8px}
  /* 머리글을 숨기는 대신 각 칸이 자기 라벨을 달고 나온다 (2026-09-28) */
  .j-diag__lbl{display:block; font-family:var(--serif); font-weight:700; font-size:13px;
    letter-spacing:.12em; text-transform:uppercase; color:var(--c-gold-deep); margin-block-end:4px} .j-diag__c--m::before,.j-diag__c--r::before{content:"↓"; left:50%; top:-6px; transform:translate(-50%,-100%)} .j-diag__list{gap:24px} }
.j-flow{background:var(--c-canvas)}
.j-flow .container{max-width:1720px}
.j-flow__fig{margin:0; border-radius:22px; overflow:hidden; background:#fff; border:1px solid var(--hairline-l); box-shadow:0 30px 60px -40px rgba(35,42,38,.45)}
.j-flow__fig img{width:100%; height:auto; display:block}
.j-flow__steps{list-style:none; margin:26px 0 0; padding:0; display:grid; grid-template-columns:repeat(var(--n,5),minmax(0,1fr)); gap:18px}
.j-flow__steps li{position:relative; text-align:center; padding:0 8px}
.j-flow__steps li:not(:last-child)::after{content:"›"; position:absolute; right:-14px; top:8px; font-size:26px; line-height:1; color:var(--c-gold); font-weight:700}
.j-flow__no{display:inline-flex; width:34px; height:34px; border-radius:50%; background:var(--c-violet-deep); color:#fff; align-items:center; justify-content:center; font-family:var(--serif); font-weight:700; font-size:16px; margin-block-end:10px}
.j-flow__steps b{display:block; font-size:19px; font-weight:800; color:var(--c-violet-ink); line-height:1.35}
.j-flow__steps small{display:block; margin-top:6px; font-size:14.5px; color:var(--c-slate)}
@media (max-width:900px){ .j-flow__steps{grid-template-columns:repeat(2,1fr); gap:20px} .j-flow__steps li::after{display:none} }

/* ── 2026-09-14 Editorial 부품 (전체 임플란트 재구성) ─────────────────────────── */
.j-dark{background:var(--c-violet-deep); color:#eef3f0}
.j-ans--light{color:rgba(238,243,240,.86)}
.j-dark .j-foot{color:rgba(238,243,240,.85)}
/* 진초록 밴드 위에서는 진한 금색이 오히려 안 보인다 — 밝은 금색으로 (대비 4.6:1) */
.j-dark .j-en--gold,.j-dark .lm-chk__no,.j-dark .lm-m__no,.j-who .j-en--gold,.j-who .lm-chk__no{color:#e3d1a3}
/* 2분할 히어로 */
.jh{background:linear-gradient(180deg,#fff 0%,var(--c-cream) 100%); padding-block:calc(var(--header-h) + clamp(40px,6vw,88px)) clamp(40px,6vw,88px); overflow:hidden}
.jh__grid{display:grid; grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr); gap:clamp(28px,4vw,72px); align-items:center; max-width:1720px}
.jh .crumb{margin:0 0 18px; font-size:13px; color:var(--c-slate)}
.jh .crumb a{color:inherit; text-decoration:none}
.jh__en{font-family:var(--serif); font-weight:700; font-size:clamp(26px,3vw,40px); letter-spacing:.04em; color:var(--c-gold-deep); line-height:1.1}
.jh__title{margin:10px 0 0; font-size:clamp(40px,5vw,72px); font-weight:800; letter-spacing:-.03em; line-height:1.12; color:var(--c-violet-ink)}
.jh__desc{margin:26px 0 0; font-size:clamp(17px,1.4vw,21px); line-height:1.75; color:var(--c-slate); max-width:34ch}
.jh__btns{display:flex; flex-wrap:wrap; gap:12px; margin-top:34px}
.jh__media{margin:0; border-radius:28px; overflow:hidden; background:#fff; box-shadow:0 40px 80px -50px rgba(35,42,38,.5)}
.jh__media img{width:100%; height:auto; display:block; aspect-ratio:16/11; object-fit:cover}
@media (max-width:900px){ .jh__grid{grid-template-columns:1fr} .jh__media img{aspect-ratio:16/10} .jh__title{font-size:40px} }
/* 숫자 섹션 */
.j-numbers .container{max-width:1720px}
.j-cnts{display:grid; grid-template-columns:repeat(var(--n,3),minmax(0,1fr)); gap:30px}
.j-cnt{margin:0; position:relative; text-align:center}
.j-cnt__n{display:block; font-family:var(--serif); font-weight:700; font-size:clamp(64px,7vw,112px); line-height:1; letter-spacing:-.02em; color:var(--c-gold); margin-block-end:-18px; position:relative; z-index:1}
.j-cnt__media{border-radius:22px; overflow:hidden; background:#fff; aspect-ratio:4/3; box-shadow:0 30px 60px -36px rgba(0,0,0,.6)}
.j-cnt__media img{width:100%; height:100%; object-fit:cover; display:block}
.j-cnt figcaption{padding:22px 10px 0}
.j-cnt figcaption b{display:block; font-size:24px; font-weight:800; color:#fff; letter-spacing:-.01em}
.j-cnt figcaption p{margin:10px auto 0; font-size:16px; line-height:1.7; color:rgba(238,243,240,.8); max-width:36ch; word-break:keep-all}
.j-cnt__foot{max-width:760px; margin:44px auto 0; padding:22px 28px; border:1px solid rgba(255,255,255,.22); border-radius:16px; text-align:center; font-size:18px; line-height:1.75; color:#fff}
.j-cnt__foot b{color:var(--c-gold)}
@media (max-width:900px){ .j-cnts{grid-template-columns:1fr; gap:40px} .j-cnt__n{font-size:64px} }
/* 적용 대상 2열 이미지 리스트 */
.j-situations{background:#fff}
.j-sits{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px 28px; max-width:1400px; margin-inline:auto}
.j-sit{display:grid; grid-template-columns:200px minmax(0,1fr); gap:22px; align-items:center; padding:16px; border:1px solid var(--hairline-l); border-radius:18px; background:#fff}
.j-sit__media{aspect-ratio:4/3; border-radius:12px; overflow:hidden; background:#111}
.j-sit__media img{width:100%; height:100%; object-fit:cover; display:block}
.j-sit__body b{display:block; font-size:19px; font-weight:800; color:var(--c-violet-ink); line-height:1.35}
.j-sit__body p{margin:8px 0 0; font-size:15.5px; line-height:1.65; color:var(--c-slate); word-break:keep-all}
@media (max-width:1000px){ .j-sits{grid-template-columns:1fr} }
@media (max-width:560px){ .j-sit{grid-template-columns:1fr} .j-sit__media{aspect-ratio:16/9} }
/* 풀폭 다이어그램 (중앙 3D + 4노드) */
.j-radial{background:var(--c-cream)}
.j-radial .container{max-width:1720px}
.j-rad{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.3fr) minmax(0,1fr); grid-template-rows:auto auto; gap:26px 36px; align-items:center}
.j-rad__media{margin:0; grid-column:2; grid-row:1 / span 2; border-radius:28px; overflow:hidden; background:#fff; box-shadow:0 30px 60px -40px rgba(35,42,38,.45)}
.j-rad__media img{width:100%; height:100%; object-fit:cover; display:block; aspect-ratio:4/3}
.j-rad__node{position:relative; padding:26px 28px; background:#fff; border:1px solid var(--hairline-l); border-radius:18px}
.j-rad__node--1{grid-column:1; grid-row:1} .j-rad__node--2{grid-column:1; grid-row:2} .j-rad__node--3{grid-column:3; grid-row:1} .j-rad__node--4{grid-column:3; grid-row:2}
.j-rad__node::after{content:""; position:absolute; top:50%; width:36px; height:2px; background:var(--c-gold)}
.j-rad__node--1::after,.j-rad__node--2::after{right:-36px} .j-rad__node--3::after,.j-rad__node--4::after{left:-36px}
.j-rad__k{display:block; font-family:var(--serif); font-weight:700; font-size:14px; letter-spacing:.14em; text-transform:uppercase; color:var(--c-gold-deep)}
.j-rad__node b{display:block; margin-top:8px; font-size:21px; font-weight:800; color:var(--c-violet-ink); line-height:1.3}
.j-rad__node p{margin:10px 0 0; font-size:15.5px; line-height:1.7; color:var(--c-slate); word-break:keep-all}
@media (max-width:1000px){ .j-rad{grid-template-columns:1fr; grid-template-rows:none} .j-rad__media,.j-rad__node{grid-column:auto; grid-row:auto} .j-rad__media{order:-1} .j-rad__node::after{display:none} }
/* 좌우 Split 비교 */
.j-splitsec{background:#fff}
.j-split{position:relative; display:grid; grid-template-columns:1fr 1fr; gap:28px; max-width:1400px; margin-inline:auto}
.j-split__col{padding:30px 32px 34px; border:1px solid var(--hairline-l); border-radius:22px; background:var(--c-canvas)}
.j-split__col--hl{background:var(--c-violet-deep); color:#fff; border-color:transparent}
.j-split__t{margin:0 0 18px; font-size:24px; font-weight:800; letter-spacing:-.01em}
.j-split__media{aspect-ratio:16/9; border-radius:14px; overflow:hidden; margin-block-end:20px; background:#fff}
.j-split__media img{width:100%; height:100%; object-fit:cover; display:block}
.j-split__rows{list-style:none; margin:0; padding:0}
.j-split__rows li{display:grid; grid-template-columns:110px minmax(0,1fr); gap:14px; padding:13px 0; border-top:1px solid var(--hairline-l); font-size:16px; line-height:1.6}
.j-split__col--hl .j-split__rows li{border-top-color:rgba(255,255,255,.18)}
.j-split__rows span{font-weight:600; color:var(--c-slate)} .j-split__col--hl .j-split__rows span{color:rgba(238,243,240,.85)}
.j-split__rows b{font-weight:600; color:var(--c-violet-ink)} .j-split__col--hl .j-split__rows b{color:#fff; font-weight:700}
.j-split__vs{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:54px; height:54px; border-radius:50%; background:var(--c-gold-deep); color:#fff; display:flex; align-items:center; justify-content:center; font-family:var(--serif); font-weight:700; font-size:18px; box-shadow:0 0 0 6px #fff}
@media (max-width:820px){ .j-split{grid-template-columns:1fr} .j-split__vs{display:none} }
/* Editorial 지그재그 (사진 55 / 텍스트 45) */
.j-ed{background:var(--c-canvas)}
.j-ed .container{max-width:1720px}
.j-ed__row{display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); gap:clamp(28px,4vw,72px); align-items:center; padding-block:clamp(28px,3vw,48px)}
.j-ed__row--flip .j-ed__media{order:2}
.j-ed__media{margin:0; border-radius:24px; overflow:hidden; background:#111; box-shadow:0 30px 60px -40px rgba(35,42,38,.5)}
.j-ed__media img{width:100%; height:100%; object-fit:cover; display:block; aspect-ratio:16/10}
.j-ed__k{display:block; font-family:var(--serif); font-weight:700; font-size:16px; letter-spacing:.16em; text-transform:uppercase; color:var(--c-gold-deep)}
.j-ed__t{margin:14px 0 0; font-size:clamp(26px,2.6vw,36px); font-weight:800; letter-spacing:-.02em; line-height:1.25; color:var(--c-violet-ink)}
.j-ed__a{margin:18px 0 0; font-size:17.5px; line-height:1.8; color:var(--c-violet-ink); font-weight:500; word-break:keep-all}
.j-ed__d{margin:12px 0 0; font-size:15.5px; line-height:1.75; color:var(--c-slate); word-break:keep-all}
@media (max-width:900px){ .j-ed__row{grid-template-columns:1fr} .j-ed__row--flip .j-ed__media{order:0} }
/* 세로 타임라인 */
.j-tlsec{background:#fff}
.j-tl{list-style:none; margin:0 auto; padding:0; max-width:820px; position:relative}
.j-tl::before{content:""; position:absolute; left:27px; top:8px; bottom:8px; width:2px; background:linear-gradient(180deg,var(--c-gold),rgba(169,138,94,.2))}
.j-tl__item{position:relative; display:grid; grid-template-columns:56px minmax(0,1fr); gap:22px; padding-block:18px}
.j-tl__no{width:56px; height:56px; border-radius:50%; background:var(--c-violet-deep); color:#fff; display:flex; align-items:center; justify-content:center; font-family:var(--serif); font-weight:700; font-size:20px; box-shadow:0 0 0 6px #fff; position:relative; z-index:1}
.j-tl__body{padding-top:10px}
.j-tl__body b{font-size:21px; font-weight:800; color:var(--c-violet-ink)}
.j-tl__body em{margin-left:10px; font-style:normal; font-size:14px; font-weight:700; color:var(--c-gold-deep); letter-spacing:.04em}
.j-tl__body p{margin:8px 0 0; font-size:16px; line-height:1.75; color:var(--c-slate); word-break:keep-all}
/* 대형 실제 사례 (다크) */
.j-cb .container{max-width:1720px}
.j-cb__grid{display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:40px; align-items:start}
.j-cb__steps{display:flex; flex-direction:column; gap:34px}
.j-cb__step{margin:0}
.j-cb__media{position:relative; border-radius:22px; overflow:hidden; background:#000; box-shadow:0 40px 80px -50px rgba(0,0,0,.8)}
.j-cb__media img{width:100%; height:auto; display:block}
.j-cb__lbl{position:absolute; left:18px; top:18px; z-index:1; padding:8px 16px; border-radius:999px; background:var(--c-gold); color:#fff; font-weight:800; font-size:15px; letter-spacing:.02em}
.j-cb__step figcaption{margin-top:14px; font-size:16.5px; line-height:1.75; color:rgba(238,243,240,.88); max-width:70ch; word-break:keep-all}
.j-cb__aside{position:sticky; top:calc(var(--header-h) + 24px); padding:26px 28px; border:1px solid rgba(255,255,255,.2); border-radius:18px}
.j-cb__aside-t{margin:0 0 14px; font-family:var(--serif); font-weight:700; font-size:14px; letter-spacing:.14em; text-transform:uppercase; color:var(--c-gold)}
.j-cb__tags{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px}
.j-cb__tags li{position:relative; padding-left:18px; font-size:17px; font-weight:600; color:#fff}
.j-cb__tags li::before{content:""; position:absolute; left:0; top:.6em; width:7px; height:7px; border-radius:50%; background:var(--c-gold)}
.j-cb__note{margin:26px 0 0; text-align:center; font-size:14px; color:rgba(238,243,240,.6)}
@media (max-width:1000px){ .j-cb__grid{grid-template-columns:1fr} .j-cb__aside{position:static} }
/* 작은 아이콘 관리 안내 */
.j-icosec{background:var(--c-cream)}
.j-icos{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(var(--n,5),minmax(0,1fr)); gap:22px; max-width:1500px; margin-inline:auto}
.j-ico{text-align:center; padding:26px 18px}
.j-ico__i{display:inline-flex; width:60px; height:60px; border-radius:16px; background:#fff; color:var(--c-violet-deep); align-items:center; justify-content:center; box-shadow:0 1px 2px rgba(35,42,38,.06)}
.j-ico__i svg{width:28px; height:28px}
.j-ico b{display:block; margin-top:14px; font-size:18px; font-weight:800; color:var(--c-violet-ink)}
.j-ico p{margin:8px 0 0; font-size:15px; line-height:1.65; color:var(--c-slate); word-break:keep-all}
.j-ico p a{display:inline-block; margin-block-start:4px; color:var(--c-violet-deep); font-weight:700; text-decoration:underline; text-underline-offset:3px}
@media (max-width:900px){ .j-icos{grid-template-columns:repeat(2,1fr)} }
/* 다크 CTA */
.j-cta--dark .btn--ghost{border-color:rgba(255,255,255,.5); color:#fff}
.j-cta--dark .btn--solid{background:#fff; color:var(--c-violet-deep); box-shadow:none}
/* 인라인 <b> 강조가 블록으로 깨지지 않게 — 제목용 b 는 직계 자식만 */
.j-cnt figcaption p b,.j-feat figcaption p b,.j-story__step figcaption p b,.j-sit__body p b,.j-rad__node p b,.j-tl__body p b,.j-ico p b{display:inline; font-size:inherit; color:var(--c-violet-deep); margin:0; line-height:inherit}
.j-cnt figcaption p b{color:var(--c-gold)}
.j-cnt figcaption > b,.j-feat figcaption > b,.j-story__step figcaption > b,.j-sit__body > b,.j-rad__node > b,.j-ico > b{display:block}

/* ── 2026-09-14 전체 임플란트 v3: 사이즈 위계·여백 압축·카드 최소화 (페이지 스코프) ───────── */
.j-hssec{background:#fff}
.j-hs{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(var(--n,6),minmax(0,1fr)); gap:0 14px; position:relative}
.j-hs::before{content:""; position:absolute; left:8%; right:8%; top:20px; height:2px; background:linear-gradient(90deg,rgba(169,138,94,.25),var(--c-gold),rgba(169,138,94,.25))}
.j-hs li{position:relative; text-align:center; padding:0 6px}
.j-hs__no{position:relative; z-index:1; display:inline-flex; width:42px; height:42px; border-radius:50%; background:var(--c-violet-deep); color:#fff; align-items:center; justify-content:center; font-family:var(--serif); font-weight:700; font-size:16px; box-shadow:0 0 0 6px #fff}
.j-hs b{display:block; margin-top:16px; font-size:18px; font-weight:800; color:var(--c-violet-ink); line-height:1.35; word-break:keep-all}
.j-hs p{margin:8px 0 0; font-size:14.5px; line-height:1.65; color:var(--c-slate); word-break:keep-all}
@media (max-width:900px){ .j-hs{grid-template-columns:repeat(3,1fr); gap:26px 14px} .j-hs::before{display:none} }
@media (max-width:560px){ .j-hs{grid-template-columns:repeat(2,1fr)} }
/* 대표 사례 — 화이트 풀폭 */
.j-cr{background:#fff}
.j-cr__wide{max-width:1720px}
.j-cr__row{display:grid; grid-template-columns:repeat(var(--n,3),minmax(0,1fr)); gap:22px}
.j-cr__shot{margin:0}
.j-cr__media{border-radius:16px; overflow:hidden; background:#000; aspect-ratio:16/9}
.j-cr__media img{width:100%; height:100%; object-fit:cover; display:block}
.j-cr__shot figcaption{margin-top:14px; display:flex; align-items:baseline; gap:12px}
.j-cr__en{font-family:var(--serif); font-weight:700; font-size:14px; letter-spacing:.14em; text-transform:uppercase; color:var(--c-gold-deep)}
.j-cr__shot figcaption b{font-size:19px; font-weight:800; color:var(--c-violet-ink)}
.j-cr__bottom{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); gap:40px; align-items:center; margin-top:40px; padding-top:40px; border-top:1px solid var(--hairline-l)}
.j-cr__after{margin:0; border-radius:16px; overflow:hidden; background:#000}
.j-cr__after img{width:100%; height:100%; object-fit:cover; display:block; aspect-ratio:16/9}
.j-cr__after figcaption{position:absolute} .j-cr__after{position:relative}
.j-cr__after figcaption{left:16px; top:16px; padding:7px 14px; border-radius:999px; background:var(--c-gold-deep); color:#fff; font-weight:800; font-size:14px}
.j-cr__t{margin:0 0 12px; font-family:var(--serif); font-weight:700; font-size:14px; letter-spacing:.14em; text-transform:uppercase; color:var(--c-gold-deep)}
.j-cr__tags{list-style:none; margin:0 0 18px; padding:0; display:flex; flex-wrap:wrap; gap:8px}
.j-cr__tags li{padding:7px 14px; border-radius:999px; background:var(--c-mist); color:var(--c-violet-deep); font-weight:700; font-size:14.5px}
.j-cr__lines p{margin:0 0 8px; font-size:16.5px; line-height:1.75; color:var(--c-violet-ink); word-break:keep-all}
.j-cr__note{margin:28px 0 0; text-align:center; font-size:14px; color:var(--c-slate)}
@media (max-width:1000px){ .j-cr__row{grid-template-columns:1fr} .j-cr__bottom{grid-template-columns:1fr} }
/* 의료진 진료 철학 한 줄 */
.j-doc__quote{margin:14px 0 0; font-size:17px; line-height:1.7; color:var(--c-slate); word-break:keep-all}
/* 4분할 사진 + 짧은 제목 (plain feature) */
.j-feature--plain{background:#fff}
.j-feature--plain .j-feat{background:transparent; border:0; border-radius:0; box-shadow:none}
.j-feature--plain .j-feat__media{border-radius:14px}
.j-feature--plain .j-feat figcaption{padding:14px 2px 0}
.j-feature--plain .j-feat figcaption > b{font-size:18px}
.j-feature--plain .j-feat figcaption p{font-size:14.5px; margin-top:6px}
/* 딥그린 다이어그램 */
.j-radial--dark .j-rad__node{background:transparent; border-color:rgba(255,255,255,.22)}
.j-radial--dark .j-rad__node b{color:#fff} .j-radial--dark .j-rad__node p{color:rgba(238,243,240,.8)} .j-radial--dark .j-rad__k{color:var(--c-gold)}
.j-radial--dark .j-rad__node::after{background:rgba(255,255,255,.35)}
.j-radial--dark .j-rad__media{box-shadow:0 40px 80px -50px rgba(0,0,0,.8)}
.j-radial--dark .j-rad{grid-template-columns:minmax(0,.8fr) minmax(0,1.5fr) minmax(0,.8fr)}
/* 숫자 섹션 밝은 버전 + 숫자가 주인공 */
.j-numbers:not(.j-dark){background:var(--c-cream)}
.j-numbers:not(.j-dark) .j-cnt__media{box-shadow:none; border:1px solid var(--hairline-l)}
.j-numbers:not(.j-dark) .j-cnt figcaption > b{color:var(--c-violet-ink)}
.j-numbers:not(.j-dark) .j-cnt figcaption p{color:var(--c-slate)}
.j-numbers:not(.j-dark) .j-cnt figcaption p b{color:var(--c-violet-deep)}
.j-numbers:not(.j-dark) .j-cnt__n{font-size:clamp(56px,6vw,80px); margin-block-end:-10px; color:var(--c-gold)}
.j-numbers:not(.j-dark) .j-cnt__foot{border:0; border-top:2px solid var(--c-gold); border-radius:0; color:var(--c-violet-ink); font-size:22px; font-weight:600; padding:26px 0 0; max-width:820px}
.j-numbers:not(.j-dark) .j-cnt__foot b{color:var(--c-violet-deep); font-weight:800}
/* 히어로 40:60, 카드 없이 */
body[data-page="implant-full-b"] .jh__grid,body[data-page="implant-full"] .jh__grid{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr)}
body[data-page="implant-full-b"] .jh__media,body[data-page="implant-full"] .jh__media{background:transparent; box-shadow:none; border-radius:0}
body[data-page="implant-full-b"] .jh__media img,body[data-page="implant-full"] .jh__media img{aspect-ratio:auto}
body[data-page="implant-full-b"] .jh,body[data-page="implant-full"] .jh{padding-block:calc(var(--header-h) + 40px) 40px}
/* 페이지 전체 사이즈 위계: 본문 폭 1280, 텍스트 폭, 제목 크기, 여백 80~100 */
body[data-page="implant-full-b"] .section .container:not(.j-cr__wide),body[data-page="implant-full"] .section .container:not(.j-cr__wide){max-width:1280px}
body[data-page="implant-full-b"] .section,body[data-page="implant-full"] .section{padding-block:clamp(56px,6vw,96px)}
body[data-page="implant-full-b"] .j-numbers,body[data-page="implant-full-b"] .j-radial,body[data-page="implant-full-b"] .j-cr,
body[data-page="implant-full"] .j-numbers,body[data-page="implant-full"] .j-radial,body[data-page="implant-full"] .j-cr{padding-block:clamp(72px,8vw,128px)}
body[data-page="implant-full-b"] .j-h2,body[data-page="implant-full"] .j-h2{font-size:clamp(30px,2.8vw,40px)}
body[data-page="implant-full-b"] .j-ans,body[data-page="implant-full"] .j-ans{font-size:17.5px}
body[data-page="implant-full-b"] .j-ans--center,body[data-page="implant-full"] .j-ans--center{max-width:720px; margin-inline:auto}
body[data-page="implant-full-b"] .j-center,body[data-page="implant-full"] .j-center{margin-block-end:clamp(26px,3vw,40px)}
body[data-page="implant-full-b"] .j-prose p,body[data-page="implant-full"] .j-prose p{max-width:60ch}
body[data-page="implant-full-b"] .j-cnts,body[data-page="implant-full"] .j-cnts{gap:26px}
body[data-page="implant-full-b"] .j-split__rows li,body[data-page="implant-full"] .j-split__rows li{padding:11px 0}
body[data-page="implant-full-b"] .j-cases .ba-grid,body[data-page="implant-full"] .j-cases .ba-grid,body[data-page="implant-advanced"] .j-cases .ba-grid{grid-template-columns:repeat(2,1fr); max-width:1280px; gap:22px}
body[data-page="implant-full-b"] .j-cases .ba-pair,body[data-page="implant-full"] .j-cases .ba-pair,body[data-page="implant-advanced"] .j-cases .ba-pair{gap:40px}
body[data-page="implant-full-b"] .j-cases .ba-pair::after,body[data-page="implant-full"] .j-cases .ba-pair::after,body[data-page="implant-advanced"] .j-cases .ba-pair::after{width:48px; height:48px; background-size:26px}
body[data-page="implant-full-b"] .j-icos,body[data-page="implant-full"] .j-icos{max-width:1100px}
body[data-page="implant-full-b"] .j-cta,body[data-page="implant-full"] .j-cta{padding-block:clamp(56px,6vw,80px)}
body[data-page="implant-full-b"] .j-doctor .j-intro__grid,body[data-page="implant-full"] .j-doctor .j-intro__grid{max-width:1280px}
@media (max-width:900px){ body[data-page="implant-full-b"] .j-cases .ba-grid,body[data-page="implant-full"] .j-cases .ba-grid,body[data-page="implant-advanced"] .j-cases .ba-grid{grid-template-columns:1fr} }
.j-radial--dark{background:var(--c-violet-deep)}
/* 4/6/8+ 개수 마커 */
.j-cnt__dots{display:flex; justify-content:center; align-items:center; gap:7px; margin-top:16px}
.j-cnt__dots i{width:10px; height:22px; border-radius:3px 3px 5px 5px; background:linear-gradient(180deg,#b9b9b9,#7c7c7c); box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)}
.j-cnt__dots em{font-style:normal; font-family:var(--serif); font-weight:700; font-size:20px; color:var(--c-gold); margin-left:2px; line-height:1}

/* ── 2026-09-14 전체 임플란트 v4: 4 STEP 2×2 + 사이즈 압축(컨테이너 1200, 여백 80/100/120) + 모바일 규격 ── */
.j-sg{background:#fff}
.j-sg__grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:26px 32px}
.j-sg__cell{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:20px; align-items:center}
.j-sg__media{margin:0; border-radius:14px; overflow:hidden; background:#111}
.j-sg__media img{width:100%; height:100%; object-fit:cover; display:block; aspect-ratio:4/3}
.j-sg__k{display:block; font-family:var(--serif); font-weight:700; font-size:13.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--c-gold-deep)}
.j-sg__body h3{margin:8px 0 0; font-size:19px; font-weight:800; letter-spacing:-.01em; line-height:1.35; color:var(--c-violet-ink); word-break:keep-all}
.j-sg__body p{margin:8px 0 0; font-size:15px; line-height:1.7; color:var(--c-slate); word-break:keep-all}
@media (max-width:900px){ .j-sg__grid{grid-template-columns:1fr} }
@media (max-width:560px){ .j-sg__cell{grid-template-columns:1fr} .j-sg__media img{aspect-ratio:16/9} }
/* 페이지 스코프 압축 */
body[data-page="implant-full-b"] .section .container:not(.j-cr__wide),body[data-page="implant-full"] .section .container:not(.j-cr__wide){max-width:1200px}
body[data-page="implant-full-b"] .section,body[data-page="implant-full"] .section{padding-block:80px}
body[data-page="implant-full-b"] .j-numbers,body[data-page="implant-full"] .j-numbers{padding-block:88px}
body[data-page="implant-full-b"] .j-radial,body[data-page="implant-full"] .j-radial{padding-block:104px}
body[data-page="implant-full-b"] .j-cr,body[data-page="implant-full"] .j-cr{padding-block:120px}
body[data-page="implant-full-b"] .j-cta,body[data-page="implant-full"] .j-cta{padding-block:64px}
body[data-page="implant-full-b"] .j-h2,body[data-page="implant-full"] .j-h2{font-size:clamp(28px,2.6vw,38px); margin-block-start:14px}
body[data-page="implant-full-b"] .j-center,body[data-page="implant-full"] .j-center{margin-block-end:32px}
body[data-page="implant-full-b"] .j-ans,body[data-page="implant-full"] .j-ans{font-size:17px; margin-block-start:14px}
body[data-page="implant-full-b"] .j-ans--center,body[data-page="implant-full"] .j-ans--center{max-width:640px}
/* HERO 560~620 */
body[data-page="implant-full-b"] .jh__grid,body[data-page="implant-full"] .jh__grid{max-width:1200px; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}
body[data-page="implant-full-b"] .jh__title,body[data-page="implant-full"] .jh__title{font-size:clamp(38px,4vw,54px)}
body[data-page="implant-full-b"] .jh__en,body[data-page="implant-full"] .jh__en{font-size:clamp(22px,2.2vw,30px)}
body[data-page="implant-full-b"] .jh__desc,body[data-page="implant-full"] .jh__desc{font-size:17px; margin-top:18px; max-width:32ch}
body[data-page="implant-full-b"] .jh__btns,body[data-page="implant-full"] .jh__btns{margin-top:26px}
body[data-page="implant-full-b"] .jh__media img,body[data-page="implant-full"] .jh__media img{max-height:560px; object-fit:contain}
/* INTRO 430~480: 이미지 440~500, 본문 520 */
body[data-page="implant-full-b"] .j-intro__grid,body[data-page="implant-full"] .j-intro__grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:48px}
body[data-page="implant-full-b"] .j-intro__media,body[data-page="implant-full"] .j-intro__media{aspect-ratio:4/3; border-radius:16px}
body[data-page="implant-full-b"] .j-prose p,body[data-page="implant-full"] .j-prose p{max-width:520px; font-size:16px}
body[data-page="implant-full-b"] .j-intro .j-ans,body[data-page="implant-full"] .j-intro .j-ans{max-width:520px}
/* 4/6/8+: 숫자 64~72, 3D 각 240~280 — 한 화면에 */
body[data-page="implant-full-b"] .j-cnts,body[data-page="implant-full"] .j-cnts{gap:22px; max-width:960px; margin-inline:auto}
body[data-page="implant-full-b"] .j-cnt__n,body[data-page="implant-full"] .j-cnt__n{font-size:clamp(52px,5vw,68px); margin-block-end:-8px}
body[data-page="implant-full-b"] .j-cnt__media,body[data-page="implant-full"] .j-cnt__media{max-width:280px; margin-inline:auto; border-radius:16px}
body[data-page="implant-full-b"] .j-cnt__dots,body[data-page="implant-full"] .j-cnt__dots{margin-top:12px}
body[data-page="implant-full-b"] .j-cnt__dots i,body[data-page="implant-full"] .j-cnt__dots i{width:8px; height:18px}
body[data-page="implant-full-b"] .j-cnt figcaption,body[data-page="implant-full"] .j-cnt figcaption{padding-top:14px}
body[data-page="implant-full-b"] .j-cnt figcaption > b,body[data-page="implant-full"] .j-cnt figcaption > b{font-size:19px}
body[data-page="implant-full-b"] .j-cnt figcaption p,body[data-page="implant-full"] .j-cnt figcaption p{font-size:14.5px; line-height:1.6; max-width:28ch}
body[data-page="implant-full-b"] .j-cnt__foot,body[data-page="implant-full"] .j-cnt__foot{font-size:18px; margin-top:30px; padding-top:20px; max-width:720px}
/* 적용 대상: 한 줄 4개, 카드 250~280 */
body[data-page="implant-full-b"] .j-feature--plain .j-feats,body[data-page="implant-full"] .j-feature--plain .j-feats{gap:20px}
body[data-page="implant-full-b"] .j-feature--plain .j-feat__media,body[data-page="implant-full"] .j-feature--plain .j-feat__media{aspect-ratio:auto; height:165px}
body[data-page="implant-full-b"] .j-feature--plain .j-feat figcaption > b,body[data-page="implant-full"] .j-feature--plain .j-feat figcaption > b{font-size:17px}
body[data-page="implant-full-b"] .j-feature--plain .j-feat figcaption p,body[data-page="implant-full"] .j-feature--plain .j-feat figcaption p{font-size:14px; line-height:1.55}
/* Treatment Planning: 중앙 3D 480~560, 키워드 노드 */
body[data-page="implant-full-b"] .j-rad,body[data-page="implant-full"] .j-rad{grid-template-columns:minmax(0,1fr) 520px minmax(0,1fr); gap:20px 28px}
body[data-page="implant-full-b"] .j-rad__node,body[data-page="implant-full"] .j-rad__node{padding:20px 22px}
body[data-page="implant-full-b"] .j-rad__node b,body[data-page="implant-full"] .j-rad__node b{font-size:20px; margin-top:6px}
body[data-page="implant-full-b"] .j-rad__node p,body[data-page="implant-full"] .j-rad__node p{font-size:14.5px; margin-top:6px}
body[data-page="implant-full-b"] .j-rad__node::after,body[data-page="implant-full"] .j-rad__node::after{width:28px}
body[data-page="implant-full-b"] .j-rad__node--1::after,body[data-page="implant-full-b"] .j-rad__node--2::after,body[data-page="implant-full"] .j-rad__node--1::after,body[data-page="implant-full"] .j-rad__node--2::after{right:-28px}
body[data-page="implant-full-b"] .j-rad__node--3::after,body[data-page="implant-full-b"] .j-rad__node--4::after,body[data-page="implant-full"] .j-rad__node--3::after,body[data-page="implant-full"] .j-rad__node--4::after{left:-28px}
/* 비교 400~450 */
body[data-page="implant-full-b"] .j-split__col,body[data-page="implant-full"] .j-split__col{padding:24px 26px 26px}
body[data-page="implant-full-b"] .j-split__t,body[data-page="implant-full"] .j-split__t{font-size:21px; margin-bottom:12px}
body[data-page="implant-full-b"] .j-split__rows li,body[data-page="implant-full"] .j-split__rows li{padding:10px 0; font-size:15px}
/* REAL CASE: 파노라마 최대 1100 */
body[data-page="implant-full-b"] .j-cr__wide,body[data-page="implant-full"] .j-cr__wide{max-width:1200px}
body[data-page="implant-full-b"] .j-cr__row,body[data-page="implant-full"] .j-cr__row{gap:18px}
body[data-page="implant-full-b"] .j-cr__bottom,body[data-page="implant-full"] .j-cr__bottom{margin-top:32px; padding-top:32px; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:32px}
body[data-page="implant-full-b"] .j-cr__lines p,body[data-page="implant-full"] .j-cr__lines p{font-size:15.5px}
/* 의료진 430~480: 사진 330~400 */
body[data-page="implant-full-b"] .j-doctor .j-intro__grid,body[data-page="implant-full"] .j-doctor .j-intro__grid{grid-template-columns:minmax(0,1.2fr) 380px; gap:48px}
body[data-page="implant-full-b"] .j-doctor .j-intro__media--frame,body[data-page="implant-full"] .j-doctor .j-intro__media--frame{padding:10px}
body[data-page="implant-full-b"] .j-doctor .j-h2.j-doc__name,body[data-page="implant-full"] .j-doctor .j-h2.j-doc__name{font-size:34px}
body[data-page="implant-full-b"] .j-doc__quote,body[data-page="implant-full"] .j-doc__quote{font-size:15.5px}
/* CTA 260~300: 제목 32~38 */
body[data-page="implant-full-b"] .j-cta .j-h2,body[data-page="implant-full"] .j-cta .j-h2{font-size:clamp(28px,2.4vw,36px)}
body[data-page="implant-full-b"] .j-cta__btns,body[data-page="implant-full"] .j-cta__btns{margin-block-start:26px}
/* 모바일 규격 */
@media (max-width:640px){
  body[data-page="implant-full-b"] .section,body[data-page="implant-full"] .section{padding-block:64px}
  body[data-page="implant-full-b"] .j-cr,body[data-page="implant-full"] .j-cr{padding-block:72px}
  body[data-page="implant-full-b"] .jh__title,body[data-page="implant-full"] .jh__title{font-size:38px}
  body[data-page="implant-full-b"] .j-h2,body[data-page="implant-full"] .j-h2{font-size:29px}
  body[data-page="implant-full-b"] .j-ans,body[data-page="implant-full"] .j-ans{font-size:15.5px}
  body[data-page="implant-full-b"] .j-prose p,body[data-page="implant-full"] .j-prose p{font-size:15px}
  body[data-page="implant-full-b"] .j-cnts,body[data-page="implant-full"] .j-cnts{display:flex; overflow-x:auto; scroll-snap-type:x mandatory; gap:16px; padding-bottom:8px; -webkit-overflow-scrolling:touch}
  body[data-page="implant-full-b"] .j-cnt,body[data-page="implant-full"] .j-cnt{flex:0 0 78%; scroll-snap-align:center}
  body[data-page="implant-full-b"] .j-rad,body[data-page="implant-full"] .j-rad{grid-template-columns:1fr 1fr; gap:14px}
  body[data-page="implant-full-b"] .j-rad__media,body[data-page="implant-full"] .j-rad__media{grid-column:1 / -1; order:-1}
  body[data-page="implant-full-b"] .j-rad__node,body[data-page="implant-full"] .j-rad__node{grid-column:auto; grid-row:auto; padding:16px}
  body[data-page="implant-full-b"] .j-feature--plain .j-feats,body[data-page="implant-full"] .j-feature--plain .j-feats{grid-template-columns:1fr 1fr; gap:16px}
  body[data-page="implant-full-b"] .j-feature--plain .j-feat__media,body[data-page="implant-full"] .j-feature--plain .j-feat__media{height:120px}
  body[data-page="implant-full-b"] .j-cr__wide,body[data-page="implant-full"] .j-cr__wide{padding-inline:0}
  body[data-page="implant-full-b"] .j-cr__media,body[data-page="implant-full"] .j-cr__media{border-radius:0}
}

/* ── 2026-09-14 전체 임플란트 v5: 사이즈 스케일을 원데이(implant-oneday)와 1:1 — 이전 페이지 스코프 치수 되돌림 ── */
body[data-page="implant-full-b"] .section,body[data-page="implant-full"] .section,
body[data-page="implant-full-b"] .j-numbers,body[data-page="implant-full"] .j-numbers,
body[data-page="implant-full-b"] .j-radial,body[data-page="implant-full"] .j-radial,
body[data-page="implant-full-b"] .j-cr,body[data-page="implant-full"] .j-cr,
body[data-page="implant-full-b"] .j-cta,body[data-page="implant-full"] .j-cta{padding-block:clamp(44px,4.6vw,72px)}
body[data-page="implant-full-b"] .section .container:not(.j-cr__wide),body[data-page="implant-full"] .section .container:not(.j-cr__wide){max-width:var(--container)}
body[data-page="implant-full-b"] .j-benefits .container,body[data-page="implant-full"] .j-benefits .container,
body[data-page="implant-full-b"] .j-proc .container,body[data-page="implant-full"] .j-proc .container,
body[data-page="implant-full-b"] .j-cr__wide,body[data-page="implant-full"] .j-cr__wide{max-width:1720px}
body[data-page="implant-full-b"] .j-h2,body[data-page="implant-full"] .j-h2{font-size:clamp(28px,3vw,42px); margin-block-start:20px}
body[data-page="implant-full-b"] .j-center,body[data-page="implant-full"] .j-center{margin-block-end:clamp(24px,2.6vw,36px)}
body[data-page="implant-full-b"] .j-ans,body[data-page="implant-full"] .j-ans{font-size:19px; margin-block-start:18px}
body[data-page="implant-full-b"] .j-ans--center,body[data-page="implant-full"] .j-ans--center{max-width:none}
body[data-page="implant-full-b"] .j-intro__grid,body[data-page="implant-full"] .j-intro__grid{grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr); gap:clamp(32px,4.6vw,80px)}
body[data-page="implant-full-b"] .j-intro__media,body[data-page="implant-full"] .j-intro__media{aspect-ratio:4/3.4; border-radius:120px 0 0 0}
body[data-page="implant-full-b"] .j-prose p,body[data-page="implant-full"] .j-prose p{max-width:58ch; font-size:17px}
body[data-page="implant-full-b"] .j-intro .j-ans,body[data-page="implant-full"] .j-intro .j-ans{max-width:none}
body[data-page="implant-full-b"] .j-doctor .j-intro__grid,body[data-page="implant-full"] .j-doctor .j-intro__grid{grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr); gap:clamp(32px,4.6vw,80px)}
body[data-page="implant-full-b"] .j-doctor .j-intro__media--frame,body[data-page="implant-full"] .j-doctor .j-intro__media--frame{padding:14px}
body[data-page="implant-full-b"] .j-doctor .j-h2.j-doc__name,body[data-page="implant-full"] .j-doctor .j-h2.j-doc__name{font-size:clamp(34px,3.4vw,48px)}
body[data-page="implant-full-b"] .j-cta .j-h2,body[data-page="implant-full"] .j-cta .j-h2{font-size:clamp(28px,3vw,42px)}
body[data-page="implant-full-b"] .j-cta__btns,body[data-page="implant-full"] .j-cta__btns{margin-block-start:34px}
body[data-page="implant-full-b"] .j-cta .j-ans--center,body[data-page="implant-full"] .j-cta .j-ans--center{max-width:56ch}
/* 4/6/8+ = 원데이 Benefits 카드 규격 + 이미지 */
.j-ben--img{padding-top:0; overflow:hidden}
.j-ben__media{margin:0 -36px 8px; aspect-ratio:4/3; background:#fff; border-bottom:1px solid var(--hairline-l)}
.j-ben__media img{width:100%; height:100%; object-fit:cover; display:block}
.j-ben--img .j-ben__no{top:auto; right:auto; position:static; opacity:.9; font-size:42px; margin-top:22px}
.j-ben--img .j-ben__title{margin-block-start:0}
@media (max-width:600px){ .j-ben__media{margin:0 -22px 8px} }
body[data-page="implant-full-b"] .j-cases,body[data-page="implant-full"] .j-cases{padding-block:clamp(44px,4.6vw,72px)}
body[data-page="implant-full-b"] .j-feature--plain .j-feat__media,body[data-page="implant-full"] .j-feature--plain .j-feat__media{aspect-ratio:4/3; height:auto}
body[data-page="implant-full-b"] .j-feature--plain .j-feat figcaption > b,body[data-page="implant-full"] .j-feature--plain .j-feat figcaption > b{font-size:19px}
body[data-page="implant-full-b"] .j-feature--plain .j-feat figcaption p,body[data-page="implant-full"] .j-feature--plain .j-feat figcaption p{font-size:15px}
body[data-page="implant-full-b"] .j-split__col,body[data-page="implant-full"] .j-split__col{padding:30px 32px 34px}
body[data-page="implant-full-b"] .j-split__t,body[data-page="implant-full"] .j-split__t{font-size:24px; margin-bottom:18px}
body[data-page="implant-full-b"] .j-split__rows li,body[data-page="implant-full"] .j-split__rows li{padding:13px 0; font-size:16px}
body[data-page="implant-full-b"] .j-cr__row,body[data-page="implant-full"] .j-cr__row{gap:22px}
body[data-page="implant-full-b"] .j-cr__bottom,body[data-page="implant-full"] .j-cr__bottom{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); gap:40px; margin-top:40px; padding-top:40px}
body[data-page="implant-full-b"] .j-cr__lines p,body[data-page="implant-full"] .j-cr__lines p{font-size:16.5px}
@media (max-width:640px){
  body[data-page="implant-full-b"] .section,body[data-page="implant-full"] .section,body[data-page="implant-full-b"] .j-cr,body[data-page="implant-full"] .j-cr{padding-block:clamp(44px,4.6vw,72px)}
  body[data-page="implant-full-b"] .j-h2,body[data-page="implant-full"] .j-h2{font-size:clamp(28px,3vw,42px)}
  body[data-page="implant-full-b"] .j-ans,body[data-page="implant-full"] .j-ans{font-size:19px}
  body[data-page="implant-full-b"] .j-prose p,body[data-page="implant-full"] .j-prose p{font-size:17px}
}
/* 의료진 액자는 인트로 라운드(120px) 규칙에서 제외 */
body[data-page="implant-full-b"] .j-intro__media--frame,body[data-page="implant-full"] .j-intro__media--frame{aspect-ratio:auto; border-radius:20px}
.j-ben--img .j-ben__title{margin-block-start:22px}
/* 전체 임플란트: 원데이와 동일 폭(1720) — Benefits·Process 컨테이너, 카드 이미지 높이, 보조 타이포를 원데이 규격에 매핑 */
body[data-page="implant-full"] .section.j-benefits .container:not(.j-cr__wide),body[data-page="implant-full"] .section.j-proc .container:not(.j-cr__wide){max-width:1720px}
body[data-page="implant-full"] .j-ben__media{aspect-ratio:16/10}
body[data-page="implant-full"] .j-feat figcaption > b{font-size:20px}
body[data-page="implant-full"] .j-feat figcaption p{font-size:15px; line-height:1.4}
body[data-page="implant-full"] .j-split__t{font-size:24px}
body[data-page="implant-full"] .j-split__rows li{font-size:17.5px}
body[data-page="implant-full"] .j-cr__shot figcaption b{font-size:21px}
body[data-page="implant-full"] .j-cr__lines p{font-size:17.5px; line-height:1.75}
body[data-page="implant-full"] .j-cr__tags li{font-size:15px}
body[data-page="implant-full"] .j-cr__after figcaption{font-size:15px}
/* 고난이도: 전신질환 확인 미니카드(아이콘 4개) 한 줄 — 원데이 규격, 사례 이미지 크게 */
/* 3장 세트(전·중·후)에서는 가운데 화살표를 숨김 — 2장 쌍에만 표시 */
.j-cases .ba-pair[style*="repeat(3"]::after{display:none}
.j-cases .ba-pair[style*="repeat(3"]{gap:22px}
/* 재수술: 대표 사례(사진 없는 하단은 텍스트 풀폭), 원인 카드는 원데이 규격, 사례 3장 세트 크게 */
.j-cr__bottom--noimg{grid-template-columns:1fr}
.j-cr__bottom--noimg .j-cr__lines p{max-width:80ch}
body[data-page="implant-redo"] .section.j-cr .container.j-cr__wide{max-width:1720px}
body[data-page="implant-redo"] .j-cases .ba-grid{max-width:none}
/* 재수술 실패 원인 4장: 원데이 카드 규격(제목 21px·본문 15.5px), 이미지 1:1 */
body[data-page="implant-redo"] .j-feature{background:var(--c-cream)}
body[data-page="implant-redo"] .j-feature .container{max-width:1720px}
body[data-page="implant-redo"] .j-feats{gap:26px}
body[data-page="implant-redo"] .j-feat figcaption > b{font-size:21px}
body[data-page="implant-redo"] .j-feat figcaption p{font-size:15.5px; line-height:1.75}

/* ── 2026-09-15 재수술 페이지 위계 정리 (원데이 규격 유지, 중요도만 차등) ─────────── */
/* Process 정보 바 */
.j-proc__bar{display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:10px 22px; max-width:900px; margin:-8px auto 26px; padding:14px 22px; border:1px solid var(--hairline-l); border-radius:12px; background:#fff; font-size:15px; color:var(--c-violet-ink)}
.j-proc__bar-t{font-weight:800; color:var(--c-gold-deep); letter-spacing:.04em}
.j-proc__bar-i b{color:var(--c-violet-deep)}
.j-proc__bar small{flex-basis:100%; text-align:center; font-size:13px; color:var(--c-slate)}
/* CASE STORY */
.j-cs{background:#fff}
.j-cs .container{max-width:1720px}
.j-cs__t{margin:0 0 14px; text-align:center; font-family:var(--serif); font-weight:700; font-size:15px; letter-spacing:.12em; text-transform:uppercase; color:var(--c-gold-deep)}
.j-cs__top{display:grid; grid-template-columns:repeat(var(--n,3),minmax(0,1fr)); gap:22px; max-width:1100px; margin:0 auto 44px}
.j-cs__shot{margin:0}
.j-cs__media{position:relative; aspect-ratio:69/40; border-radius:var(--r-lg); overflow:hidden; background:#111}
.j-cs__media img{width:100%; height:100%; object-fit:cover; display:block}
.j-cs__lbl{position:absolute; top:0; left:50%; transform:translateX(-50%); padding:6px 16px; border-radius:0 0 10px 10px; background:var(--c-violet); color:#fff; font-family:var(--serif); font-weight:700; font-size:14px; letter-spacing:.06em}
.j-cs__shot:first-child .j-cs__lbl{background:#6f6155} .j-cs__shot:nth-child(2) .j-cs__lbl{background:var(--c-slate)}
.j-cs__grid{display:grid; grid-template-columns:repeat(var(--n,3),minmax(0,1fr)); gap:22px; max-width:1400px; margin-inline:auto}
.j-cs__ev{margin:0}
.j-cs__evmedia{aspect-ratio:16/10; border-radius:var(--r-lg); overflow:hidden; background:#111}
.j-cs__evmedia img{width:100%; height:100%; object-fit:cover; display:block}
.j-cs__ev figcaption{padding:14px 4px 0}
.j-cs__ev figcaption b{display:block; font-size:18px; font-weight:800; color:var(--c-violet-ink); line-height:1.35}
.j-cs__ev figcaption p{margin:6px 0 0; font-size:15px; line-height:1.65; color:var(--c-slate); word-break:keep-all}
@media (max-width:900px){ .j-cs__top,.j-cs__grid{grid-template-columns:1fr} }
/* 페이지 스코프 위계: Symptoms/Notice 작게, Causes 중간, Process/Case 크게 */
body[data-page="implant-redo"] .j-benefits{padding-block:clamp(40px,4vw,64px)}
body[data-page="implant-redo"] .j-ben{padding:30px 28px 32px; gap:12px}
body[data-page="implant-redo"] .j-ben__no{font-size:22px; top:24px; right:26px; opacity:.7}
body[data-page="implant-redo"] .j-ben__title{font-size:21px}
body[data-page="implant-redo"] .j-ben__desc{font-size:15.5px; line-height:1.7}
body[data-page="implant-redo"] .j-feature{padding-block:clamp(56px,6vw,96px)}
body[data-page="implant-redo"] .j-proc{padding-block:clamp(64px,7vw,110px)}
body[data-page="implant-redo"] .j-cs,body[data-page="implant-advanced"] .j-cs{padding-block:clamp(64px,7vw,116px)}
body[data-page="implant-redo"] .j-notice{padding-block:clamp(40px,4vw,64px)}
body[data-page="implant-redo"] .j-numlist li{padding:16px 22px} body[data-page="implant-redo"] .j-numlist li p{font-size:15.5px; line-height:1.7}
body[data-page="implant-redo"] .j-num{width:30px; height:30px; font-size:14px}
body[data-page="implant-redo"] .j-intro__grid{grid-template-columns:1fr 1fr}
body[data-page="implant-redo"] .j-intro__media{aspect-ratio:4/3.2}
/* Process: 3 + 2 배치로 이미지 확대 (5단계가 한 흐름으로 보이게, 마지막 두 개 가운데 정렬) */
@media (min-width:1100px){
  body[data-page="implant-redo"] .j-proc__steps[style*="--n:5"]{grid-template-columns:repeat(6,minmax(0,1fr)); gap:34px 30px; width:100%; margin-inline:0}
  body[data-page="implant-redo"] .j-proc__steps[style*="--n:5"] .j-proc__step{grid-column:span 2}
  body[data-page="implant-redo"] .j-proc__steps[style*="--n:5"] .j-proc__step:nth-child(4){grid-column:2 / span 2}
  body[data-page="implant-redo"] .j-proc__steps[style*="--n:5"] .j-proc__step:nth-child(3)::after{display:none}
  body[data-page="implant-redo"] .j-proc__step figure{max-width:440px; margin-inline:auto}
  body[data-page="implant-redo"] .j-proc__step b{font-size:20px} body[data-page="implant-redo"] .j-proc__step small{font-size:15px}
}
@media (max-width:640px){
  body[data-page="implant-redo"] .j-proc__steps{display:flex; overflow-x:auto; scroll-snap-type:x mandatory; gap:14px; grid-template-columns:none}
  body[data-page="implant-redo"] .j-proc__step{flex:0 0 74%; scroll-snap-align:center}
  body[data-page="implant-redo"] .j-proc__step figure img{aspect-ratio:1!important}
  body[data-page="implant-redo"] .j-cs .container,body[data-page="implant-advanced"] .j-cs .container{padding-inline:12px}
}
/* 재수술 정렬: Process 이미지 340px 상한(3+2), CASE 위·아래 격자 폭 통일(1100) */
@media (min-width:1100px){
  body[data-page="implant-redo"] .j-proc__step figure{max-width:340px}
  body[data-page="implant-redo"] .j-proc__steps[style*="--n:5"]{gap:30px 26px; max-width:1240px; margin-inline:auto}
}
body[data-page="implant-redo"] .j-cs__top,body[data-page="implant-redo"] .j-cs__grid{max-width:1100px}
body[data-page="implant-redo"] .j-cs__top{margin-bottom:40px}
body[data-page="implant-redo"] .j-cs__evmedia,body[data-page="implant-advanced"] .j-cs__evmedia{aspect-ratio:69/40}
/* 재수술 최종: 원인 카드 번호(작게), 정보 바 아이보리, CASE 격자 1240 */
.j-feat__no{display:block; font-family:var(--serif); font-weight:700; font-size:20px; letter-spacing:.04em; color:var(--c-gold); margin-bottom:6px; line-height:1}
body[data-page="implant-redo"] .j-proc__bar{background:var(--c-cream); border-color:transparent}
body[data-page="implant-redo"] .j-cs__top,body[data-page="implant-redo"] .j-cs__grid{max-width:1240px}
body[data-page="implant-redo"] .j-bens{grid-template-columns:repeat(5,minmax(0,1fr)); gap:18px}
@media (max-width:1100px){ body[data-page="implant-redo"] .j-bens{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:600px){ body[data-page="implant-redo"] .j-bens{grid-template-columns:1fr} }
/* 재수술 미세조정: 정보 바 3줄, CASE 위 3장 > 진단자료 3장, 한글 캡션 */
.j-proc__bar{flex-direction:column; gap:6px; padding:18px 24px}
.j-proc__bar p{margin:0}
.j-proc__bar-t{font-size:14px}
.j-proc__bar-row{display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:0 16px; font-size:17px; font-weight:700; color:var(--c-violet-ink)}
.j-proc__bar-sep{color:var(--c-gold-deep); font-weight:400}
.j-proc__bar-note{font-size:13.5px; color:var(--c-slate)}
.j-cs__shot figcaption{margin-top:12px; display:flex; align-items:baseline; justify-content:center; gap:10px}
.j-cs__shot figcaption b{font-size:18px; font-weight:800; color:var(--c-violet-ink)}
.j-cs__en{font-family:var(--serif); font-weight:700; font-size:13.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--c-gold-deep)}
body[data-page="implant-redo"] .j-cs__top,body[data-page="implant-advanced"] .j-cs__top{max-width:1400px; margin-bottom:48px}
body[data-page="implant-redo"] .j-cs__grid{max-width:1240px}
body[data-page="implant-redo"] .j-bens{grid-template-columns:repeat(4,minmax(0,1fr))}
/* 위 한 줄이 미디어쿼리(2636·2637행)보다 뒤에 있어 모바일에서도 4열로 남아 있었다 (2026-09-28) */
@media (max-width:1100px){ body[data-page="implant-redo"] .j-bens{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:600px){ body[data-page="implant-redo"] .j-bens{grid-template-columns:1fr} }

/* ── 2026-09-15 고난이도 위계: HOW WE SOLVE·CASE 크게, FOR WHOM·전신질환·Notice 작게 ── */
/* 고난이도 zigzag 교차 복원: 기본 행은 텍스트|이미지(이미지 55%), flip 행은 이미지|텍스트 */

/* ── 2026-09-15 가이드 임플란트 위계: Digital workflow·CASE 크게, 대상·Notice 작게 (원데이 규격 유지) ── */
body[data-page="implant-guide"] .j-flow{background:#fff; padding-block:clamp(64px,7vw,116px)}
body[data-page="implant-guide"] .j-flow__fig{border:0; box-shadow:none; border-radius:var(--r-lg)}
body[data-page="implant-guide"] .j-flow__steps{margin-top:18px}
body[data-page="implant-guide"] .j-flow .j-proc__bar{margin:-8px auto 26px; background:var(--c-cream); border-color:transparent}
body[data-page="implant-guide"] .j-benefits{padding-block:clamp(40px,4vw,64px)}
body[data-page="implant-guide"] .j-ben{padding:30px 28px 32px; gap:12px}
body[data-page="implant-guide"] .j-ben__no{font-size:22px; top:24px; right:26px; opacity:.7}
body[data-page="implant-guide"] .j-ben__title{font-size:21px}
body[data-page="implant-guide"] .j-ben__desc{font-size:15.5px; line-height:1.7}
body[data-page="implant-guide"] .j-bens__note{margin-top:22px; padding:14px 22px; font-size:15px}
body[data-page="implant-guide"] .j-cs{padding-block:clamp(64px,7vw,116px)}
body[data-page="implant-guide"] .j-cs__top{max-width:1400px; margin-bottom:48px}
body[data-page="implant-guide"] .j-cs__grid{max-width:1240px}
body[data-page="implant-guide"] .j-cs__evmedia{aspect-ratio:4/3}
body[data-page="implant-guide"] .j-cases{padding-block:clamp(40px,4vw,64px)}
body[data-page="implant-guide"] .j-cases .ba-grid{grid-template-columns:repeat(2,1fr); max-width:1240px; gap:22px}
body[data-page="implant-guide"] .j-cases .ba-pair{gap:40px}
body[data-page="implant-guide"] .j-cases .ba-pair::after{width:48px; height:48px; background-size:26px}
body[data-page="implant-guide"] .j-notice{padding-block:clamp(40px,4vw,64px)}
body[data-page="implant-guide"] .j-numlist li{padding:16px 22px} body[data-page="implant-guide"] .j-numlist li p{font-size:15.5px; line-height:1.7}
body[data-page="implant-guide"] .j-num{width:30px; height:30px; font-size:14px}
@media (max-width:900px){ body[data-page="implant-guide"] .j-cases .ba-grid{grid-template-columns:1fr} }
@media (max-width:640px){ body[data-page="implant-guide"] .j-flow__fig{margin-inline:-12px; border-radius:0} body[data-page="implant-guide"] .j-flow__fig img{height:180px; object-fit:cover; object-position:left center} }

/* ── 2026-09-15 고난이도 최종: 인트로 이미지 +12%, 해결방법 이미지 높이 420 상한, 대표 CASE > CT 비교, 흐름 화살표, 모바일 과정 스와이프 ── */
body[data-page="implant-advanced"] .j-cs__top,body[data-page="implant-advanced"] .j-cs__grid{position:relative}
body[data-page="implant-advanced"] .j-cs__shot,body[data-page="implant-advanced"] .j-cs__ev{position:relative}
body[data-page="implant-advanced"] .j-cs__shot:not(:last-child)::after,
body[data-page="implant-advanced"] .j-cs__ev:not(:last-child)::after{content:""; position:absolute; z-index:2; right:-11px; top:0; transform:translate(50%,0); width:40px; height:40px; margin-top:calc((100% * 40 / 69) / 2 - 20px); border-radius:50%;
  background:var(--c-violet-deep) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M4 12h16M13 5l7 7-7 7'/></svg>") center/20px no-repeat; box-shadow:0 0 0 4px #fff}
@media (max-width:900px){ body[data-page="implant-advanced"] .j-cs__shot:not(:last-child)::after,body[data-page="implant-advanced"] .j-cs__ev:not(:last-child)::after{display:none} }
/* 고난이도 해결방법: 가운데 선·점과 맞도록 좌우 대칭 복원(원데이 방식) + 폭 확대로 이미지 660px, 1행부터 이미지 먼저 */
body[data-page="implant-advanced"] .j-zz__row:not(.j-zz__row--flip) .j-zz__media{order:1}
body[data-page="implant-advanced"] .j-zz__row:not(.j-zz__row--flip) .j-zz__text{order:2; text-align:left; align-items:flex-start; padding-inline:clamp(8px,1.5vw,24px) 0}
body[data-page="implant-advanced"] .j-zz__row--flip .j-zz__media{order:2}
body[data-page="implant-advanced"] .j-zz__row--flip .j-zz__text{order:1; text-align:right; align-items:flex-end; padding-inline:0 clamp(8px,1.5vw,24px)}
html.mo body[data-page="implant-advanced"] .j-zz__row:not(.j-zz__row--flip).is-in .j-zz__text{animation-name:mo-right}
html.mo body[data-page="implant-advanced"] .j-zz__row:not(.j-zz__row--flip).is-in .j-zz__media{animation-name:mo-left}
html.mo body[data-page="implant-advanced"] .j-zz__row--flip.is-in .j-zz__text{animation-name:mo-left}
html.mo body[data-page="implant-advanced"] .j-zz__row--flip.is-in .j-zz__media{animation-name:mo-right}
@media (max-width:820px){
  body[data-page="implant-advanced"] .j-zz__row,body[data-page="implant-advanced"] .j-zz__row--flip{grid-template-columns:1fr; gap:18px}
  body[data-page="implant-advanced"] .j-zz__row .j-zz__media,body[data-page="implant-advanced"] .j-zz__row--flip .j-zz__media{order:1}
  body[data-page="implant-advanced"] .j-zz__row .j-zz__text,body[data-page="implant-advanced"] .j-zz__row--flip .j-zz__text{order:2; text-align:left; align-items:flex-start; padding:0}
}

/* ── 2026-09-15 임플란트 시리즈 공통화: 치료기간 INFO BAR는 재수술 컴포넌트를 기본값으로, 고난이도 CT 비교 2장은 재수술 진단자료 사진과 같은 폭 ── */
.j-proc__bar{background:var(--c-cream); border-color:transparent}
body[data-page="implant-advanced"] .j-cs__grid[style*="--n:2"]{max-width:calc((1240px - 44px) / 3 * 2 + 22px)}
/* 단일 과정 행: 박스·외곽선·머리글 없이 5단계만 — 여백은 같은 행 부품 그대로 두어 이미지 크기가 원데이 5단계 행과 동일 */
.j-proc__row--open{background:none; border-color:transparent; box-shadow:none}

/* ── 2026-09-15 고난이도 최종: REAL CASE 위계(대표 3장 = 원데이 사례 폭 1600 > CT 비교 > 그 밖의 사례), BEFORE TREATMENT는 아이콘 정보 행(공통 부품, 섹션 여백은 공통값 그대로) ── */
body[data-page="implant-advanced"] .j-cs__top{max-width:1600px}
/* 아이콘 정보 행 섹션도 여정 페이지 공통 섹션 여백(2344행 목록과 같은 값) */
.j-icosec{padding-block:clamp(44px,4.6vw,72px)}

/* ── 2026-09-15 고난이도 리뷰: 중요 단어(소제목·라벨) 확대 — 기존 크기 단계만 사용: 소제목 20(과정 단계 제목), 영문 라벨·칩 16(과정 번호), 안내 바 16/19/15(라벨/답변/각주). 한글이 섞이는 세리프 라벨은 한글만 본문 서체로 ── */
.j-cs__t{font-size:20px; font-family:"Cormorant Garamond",var(--ff); margin-bottom:18px}
.j-cs__shot figcaption b,.j-cs__ev figcaption b,.j-ico b{font-size:20px}
.j-cs__en{font-size:16px}
.j-cs__lbl{font-size:16px}
body[data-page="implant-advanced"] .j-cases .ba-shot .lbl,body[data-page="implant-redo"] .j-cases .ba-shot .lbl,body[data-page="implant-guide"] .j-cases .ba-shot .lbl{font-size:16px}
.j-proc__bar-t{font-size:16px}
.j-proc__bar-row{font-size:19px}
.j-proc__bar-note{font-size:15px}

/* ══ 2026-09-15 고난이도 → 원데이 MASTER 정합. 원데이 값은 손대지 않고 고난이도만 맞춤 ══ */
body[data-page="implant-advanced"] section.section{padding-block:clamp(44px,4.6vw,72px)}   /* 섹션 여백 = 원데이(치료사례 섹션 116 → 72) */
body[data-page="implant-advanced"] :is(.ba-shot .lbl,.j-cs__lbl){font-size:14px}            /* B&A 라벨 = 원데이 14 */
/* 그 밖의 치료사례: 원데이 사례 부품 규칙 그대로(한 줄에 한 쌍·쌍 간격 64·화살표 72). 격자 폭만 대표 사례 3장(519)보다 커지지 않도록 기존 .j-cs__t 기본 격자 폭 1100 재사용 */
body[data-page="implant-advanced"] .j-cases .ba-grid{grid-template-columns:1fr; max-width:1100px; gap:40px}
body[data-page="implant-advanced"] .j-cases .ba-pair{gap:64px}
body[data-page="implant-advanced"] .j-cases .ba-pair::after{width:72px; height:72px; background-size:38px}
@media (max-width:900px){ body[data-page="implant-advanced"] .j-cases .ba-pair{gap:32px} body[data-page="implant-advanced"] .j-cases .ba-pair::after{width:48px; height:48px; background-size:26px} }
body[data-page="implant-advanced"] .j-cs__top{max-width:1600px}                             /* 대표 사례 3장 격자(오늘 확정) */
body[data-page="implant-advanced"] .j-cases .ba-shot .lbl{font-size:14px}                  /* 오늘 오전 16px 규칙(더 높은 특이도)보다 뒤에 두어 원데이 14로 */
/* CASE 02(파노라마 966×489)는 69/40 프레임에서 cover 시 좌우가 잘려 contain으로 — 프레임·배경(#111)은 그대로, 원본 전체 표시 */
body[data-page="implant-advanced"] .ba-case:first-child .ba-shot img{object-fit:contain}

/* ══ 2026-09-15 재수술·가이드·전체 → 원데이 MASTER 정합 (동일 역할 부품만 원데이 computed 값으로, 페이지 고유 구조는 유지) ══ */
/* 섹션 여백 72 · 카드(장점/특징) = 원데이 장점 카드(패딩 40/36/42, 번호 42, 제목 26/800, 설명 17.5/1.8) · 주의사항 = 원데이(번호 42px 상자 22, 본문 21/1.6) · B&A 칩 14 */
body[data-page="implant-redo"] section.section,body[data-page="implant-guide"] section.section{padding-block:clamp(44px,4.6vw,72px)}
body[data-page="implant-redo"] .j-ben,body[data-page="implant-guide"] .j-ben{padding:40px 36px 42px; gap:16px}
body[data-page="implant-redo"] .j-ben__no,body[data-page="implant-guide"] .j-ben__no{font-size:42px; top:30px; right:32px; opacity:.55}
body[data-page="implant-redo"] .j-ben__title,body[data-page="implant-guide"] .j-ben__title{font-size:26px}
body[data-page="implant-redo"] .j-ben__desc,body[data-page="implant-guide"] .j-ben__desc{font-size:17.5px; line-height:1.8}
body[data-page="implant-redo"] .j-feat figcaption > b,body[data-page="implant-full"] .j-feature--plain .j-feat figcaption > b{font-size:26px; font-weight:800; line-height:1.3}
body[data-page="implant-redo"] .j-feat figcaption p,body[data-page="implant-full"] .j-feature--plain .j-feat figcaption p{font-size:17.5px; line-height:1.8}
body[data-page="implant-full"] .j-feature--plain .j-feats{gap:26px}
body[data-page="implant-redo"] .j-numlist li,body[data-page="implant-guide"] .j-numlist li{padding:18px 26px}
body[data-page="implant-redo"] .j-numlist li p,body[data-page="implant-guide"] .j-numlist li p{font-size:21px; line-height:1.6}
body[data-page="implant-redo"] .j-num,body[data-page="implant-guide"] .j-num{width:42px; height:42px; font-size:22px}
body[data-page="implant-redo"] .j-intro__grid{grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr)}
body[data-page="implant-redo"] .j-intro__media{aspect-ratio:4/3.4}
@media (max-width:900px){ body[data-page="implant-redo"] .j-intro__grid{grid-template-columns:1fr} body[data-page="implant-redo"] .j-intro__media{aspect-ratio:4/3} }
body[data-page="implant-redo"] .j-cs__lbl,body[data-page="implant-guide"] .j-cs__lbl,body[data-page="implant-guide"] .j-cases .ba-shot .lbl{font-size:14px}
/* 가이드 흐름 단계 = 원데이 과정 단계 제목/부연 규칙 */
body[data-page="implant-guide"] .j-flow__steps b{font-size:20px; font-weight:700; line-height:1.35}
body[data-page="implant-guide"] .j-flow__steps small{font-size:15px; line-height:1.4}
/* 가이드 그 밖의 치료사례 = 고난이도와 같은 처리(원데이 사례 규칙: 한 줄 한 쌍·64·72, 격자 1100로 대표 사례보다 크지 않게) */
body[data-page="implant-guide"] .j-cases .ba-grid{grid-template-columns:1fr; max-width:1100px; gap:40px}
body[data-page="implant-guide"] .j-cases .ba-pair{gap:64px}
body[data-page="implant-guide"] .j-cases .ba-pair::after{width:72px; height:72px; background-size:38px}
@media (max-width:900px){ body[data-page="implant-guide"] .j-cases .ba-pair{gap:32px} body[data-page="implant-guide"] .j-cases .ba-pair::after{width:48px; height:48px; background-size:26px} }
body[data-page="implant-guide"] .j-cs__top{max-width:1600px}
/* 전체 과정 단계 제목 = 원데이 20 */
body[data-page="implant-full"] .j-proc__step > b{font-size:20px}
/* ══ 2026-09-15 고난이도 제목 위계 재검수 — 원데이 동일 역할 component 타이포 공유 ══ */
/* BEFORE TREATMENT 질환명 = 원데이 장점 카드 제목(.j-ben__title): Pretendard 26/800/1.3/-.01em */
body[data-page="implant-advanced"] .j-ico > b{font-size:26px; font-weight:800; line-height:1.3; letter-spacing:-.01em; color:var(--c-violet-ink)}
/* 사례 시작 제목(대표 사례·상악동거상술 3D CT 비교·CASE 02·CASE 03) = 원데이 H3(.j-h3): Pretendard clamp(22,2vw,27)/700/1.35/-.015em — 원데이에 Case title 전용 부품 없음 */
body[data-page="implant-advanced"] .j-cs__t{font-family:var(--ff); font-size:clamp(22px,2vw,27px); font-weight:700; line-height:1.35; letter-spacing:-.015em; text-transform:none; color:var(--c-violet-ink)}
/* ══ 2026-09-15 고난이도 BEFORE TREATMENT 밀도 — 원데이 공통 규칙만 사용 (섹션 여백·.j-center 간격은 이미 공통 토큰) ══ */
body[data-page="implant-advanced"] .j-icos{max-width:none; gap:26px}          /* 격자 = 원데이 .j-bens (컨테이너 1280 안 4열, 간격 26) — 별도 max-width 없음 */
body[data-page="implant-advanced"] .j-ico{padding:0}                          /* 부품 자체 상하 26px 제거 → H2→콘텐츠 간격은 원데이 .j-center 값만 */
body[data-page="implant-advanced"] .j-ico p{font-size:17.5px; line-height:1.8}   /* item body = 원데이 .j-ben__desc */
/* 반응형도 원데이 장점 카드의 computed 값과 같게: ≤1100 2열·제목 22·설명 16, ≤600 1열 (간격은 원데이 실제값 26 유지) */
@media (max-width:1100px){ body[data-page="implant-advanced"] .j-icos{grid-template-columns:repeat(2,minmax(0,1fr))} body[data-page="implant-advanced"] .j-ico > b{font-size:22px} body[data-page="implant-advanced"] .j-ico p{font-size:16px} }
@media (max-width:600px){ body[data-page="implant-advanced"] .j-icos{grid-template-columns:1fr} }

/* ══════════════════════════════════════════════════════════════
   라미네이트 (laminate.html) 리뉴얼 — 2026-09-15 (4차: 사진 크기 일괄) · 2026-09-17 5차(디테일 QA 반영: PROCESS 전체 폭·METHOD 04 사진행·CHECK 리드/결론·CASE 01 strip·CASE 04 범례) + 하위 페이지(laminate-redo · whitening) 같은 부품
   타이포·섹션 여백·사진 모서리·치료사례 부품은 원데이 MASTER 그대로 쓰고, 레이아웃만 라미네이트 전용(lm-*).
   사진 크기 기준: 인트로 570×428(원데이 인트로) · METHOD·CHECK 695px 폭 · 치료사례 608×352(원데이 공통 전후 프레임)
   ══════════════════════════════════════════════════════════════ */
/* 섹션 위아래 여백 — 원데이 여정형 섹션과 같은 값(1920 에서 72px) */
.lm-flow,.lm-method,.lm-chk{padding-block:clamp(44px,4.6vw,72px)}
.lm-flow{background:var(--c-paper)} .lm-method{background:var(--c-cream)}

/* HERO — 공통 히어로(틴트·H1 54·설명) 그대로, 사진만 라미네이트 전용: 세라믹 라미네이트를 좌우 반전해 오른쪽에(글과 겹치지 않게) */
.phero--laminate::before{background-color:#000; background-image:var(--tint),url('../img/sub2-closing-b.jpg'); background-size:cover,auto 84%;
  background-position:center,left bottom; background-repeat:no-repeat; transform:scaleX(-1)}   /* 라미네이트 전체가 헤더 아래로 보이게 84% 높이, 반전 후 오른쪽 아래 */

/* INTRO — 원데이 인트로와 같은 구성(컨테이너 안, 사진 .95 : 글 1.05, 왼쪽 위 아치 120px).
   입술 근접 사진이라 원데이 모바일 인트로와 같은 4:3 프레임 — 입꼬리만 조금 덜리고 앞니는 모두 보임 */
body[data-page="laminate"] .j-intro__media{aspect-ratio:4/3}

/* PROCESS — 가벼운 가로 흐름: 큰 번호 먼저 → 단계명 → 짧은 설명, 금색 선은 01 에서 마지막 번호까지 (칸 수 = 단계 수 --n) */
.lm-flow__list{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(var(--n,6),minmax(0,1fr)); row-gap:44px}
.lm-flow__step{position:relative; display:flex; flex-direction:column; gap:10px; padding:30px 28px 0 0; border-top:1px solid var(--c-gold)}
.lm-flow__step::before{content:""; position:absolute; top:-6px; left:0; width:11px; height:11px; border-radius:50%; background:var(--c-gold); box-shadow:0 0 0 4px var(--c-paper)}
.lm-flow__step:last-child{border-top-color:transparent}   /* 선이 06(마지막 점)에서 끝나게 */
.lm-flow__no{font-family:var(--serif); font-size:42px; font-weight:600; line-height:1; color:var(--c-gold)}
.lm-flow__t{margin-block-start:8px; font-size:20px; font-weight:700; line-height:1.35; color:var(--c-violet-ink)}
.lm-flow__s{font-size:15px; line-height:1.5; color:var(--c-slate)}
.lm-flow > .container > .j-foot{margin-block-start:36px}
/* PROCESS 5차(2026-09-17 QA ①②) — laminate 페이지만: 6개 1열 유지하면서 320~1600 전체 폭 사용(5×1fr + 마지막 칸 auto, 금색 선은 1600 까지),
   lining 숫자(01·02 잉크 높이 통일 — METHOD 번호도 같이), 데스크톱 제목 21·설명 17(원데이 실재값), 설명문 고아줄 방지 */
body[data-page="laminate"] .lm-flow__no,body[data-page="laminate"] .lm-m__no{font-variant-numeric:lining-nums}
body[data-page="laminate"] .lm-flow .j-ans--center{text-wrap:balance}
@media (min-width:1101px){
  body[data-page="laminate"] .lm-flow__list{grid-template-columns:repeat(5,minmax(0,1fr)) auto}
  body[data-page="laminate"] .lm-flow__step:last-child{padding-right:0; border-top-color:var(--c-gold)}
  body[data-page="laminate"] .lm-flow__t{font-size:21px}
  body[data-page="laminate"] .lm-flow__s{font-size:17px}
}

/* METHOD — 01 사진|글 · 02 글|사진 · 03 사진|글 · 04 글|사진(5차: 모델 위 점검 사진 추가), 사진 네 장 모두 같은 크기(695×464, 3:2 원본 비율) */
.lm-m__row{display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:clamp(40px,5vw,88px); align-items:center; padding-block:clamp(28px,3.4vw,52px)}
.lm-m__row--flip{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
.lm-m__row--flip .lm-m__visual{order:2}
.lm-m__media{margin:0; aspect-ratio:3/2; overflow:hidden; border-radius:var(--r-lg); background:#111; box-shadow:0 30px 60px -44px rgba(35,42,38,.55)}
.lm-m__media img{width:100%; height:100%; object-fit:cover}
/* 같은 프레임 안에서 빈 검은 천만 조금 덜어 라미네이트를 크게(대상은 전부 프레임 안) */
.lm-m__row--2 .lm-m__media img{transform:scale(1.1); transform-origin:55% 44%}
.lm-m__row--3 .lm-m__media img{transform:scale(1.15); transform-origin:50% 45%}
.lm-m__no{display:block; margin-block-end:18px; font-family:var(--serif); font-size:42px; font-weight:600; line-height:1; color:var(--c-gold-deep)}
.lm-m__body .j-ans{margin-block-start:14px}
.lm-m__body .j-prose{margin-block-start:12px}

/* CHECK — 진녹색 밴드(원데이 '가능한 경우'와 같은 톤) 위 설계선 사진 | 확인 4항목. 사진은 METHOD 와 같은 695px 폭(원본 비율) */
.lm-chk__grid{display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:clamp(40px,5vw,88px); align-items:center}
.lm-chk__media{margin:0; aspect-ratio:1652/952; overflow:hidden; border-radius:var(--r-lg); background:#111}
.lm-chk__media img{width:100%; height:100%; object-fit:cover}
.lm-chk__list{list-style:none; margin:0; padding:0}
.lm-chk__list li{display:grid; grid-template-columns:22px minmax(0,1fr); gap:18px; padding-block:22px; border-top:1px solid rgba(255,255,255,.16)}   /* 번호 칸 고정폭 — 본문 시작선 4개 동일(5차 QA D-09) */
.lm-chk__list li:first-child{padding-block-start:0; border-top:0}
.lm-chk__list li:last-child{padding-block-end:0}
.lm-chk__no{font-family:var(--serif); font-size:24px; font-weight:700; line-height:1.2; color:var(--c-gold-deep)}
.lm-chk__list p{font-size:17px; line-height:1.8; color:rgba(255,255,255,.86)}
.lm-chk__list p b{font-weight:700; color:#fff}   /* 항목 리드(5차 QA D-07) — MASTER 주의사항 인라인 강조와 같은 방식 */
/* 결론 문장(핵심 메시지) — 본문과 같은 17px, 명도 .86, 두 번째 문장 강조(5차 QA D-13). 전역 .j-foot 은 그대로 */
.lm-chk > .container > .j-foot{margin-block-start:36px; font-size:17px; line-height:1.75; color:rgba(238,243,240,.86)}
.lm-chk > .container > .j-foot strong{font-weight:600; color:#fff}
@media (max-width:520px){ .lm-chk > .container > .j-foot br{display:none} }   /* 모바일 고아줄 방지(D-16) */

/* CASES — 원데이 공통 치료사례 부품(.j-cases .ba-grid · .ba-pair · 가운데 화살표) 그대로 쓰되,
   프레임만 이 페이지에서 3:2 로 둔다. 병원이 준 전후사진 여섯 장이 모두 3:2 원본이라
   여섯 장이 화면에서 정확히 같은 크기(608×405)가 되면서 한 픽셀도 잘리지 않는다. (2026-09-29) */
body[data-page="laminate"] .j-cases .ba-shot{aspect-ratio:3/2}
/* 잇몸성형 전후 두 장도 원본이 730×357 로 같다 — 프레임을 그 비율로 두어 두 장이 같은 크기이면서 잘리지 않게 */
body[data-page="gum"] .j-cases .ba-shot{aspect-ratio:730/357}
.lm-case__head{text-align:center; margin-block-end:22px}
.lm-case__head .j-en{justify-content:center}
.lm-case__head .j-cs__t{margin:12px 0 0; font-family:var(--ff); font-size:20px; font-weight:700; letter-spacing:0; text-transform:none; color:var(--c-violet-ink)}
.lm-case + .lm-case{padding-block-start:clamp(40px,4vw,56px); border-top:1px solid var(--hairline)}
/* ── 사례 본문 위계 (2026-09-29) ──────────────────────────────
   제목 → 도입 2~3줄 → (촬영 범위 라벨 + 전후 한 쌍) → 결과 1~2줄.
   본문은 읽기 좋은 폭에서 왼쪽 정렬한다. */
.lm-case__lead{max-width:62ch; margin:14px auto 22px; font-size:18px; line-height:1.8; color:var(--c-violet-ink); font-weight:600; text-align:left}
.lm-case__result{max-width:62ch; margin:20px auto 0; font-size:16.5px; line-height:1.85; color:var(--c-graphite); text-align:left}
/* 촬영 범위 라벨 — 전후 한 쌍 바로 위. 한 사례에 쌍이 둘일 때(구강 내 정면 · 미소 라인) 무엇을 찍은 것인지 알린다 */
.lm-pair__head{margin:26px auto 10px; font-family:var(--serif); font-size:14px; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase; color:var(--c-gold-deep); text-align:left}
.lm-case__lead + .lm-pair__head{margin-block-start:0}
@media (max-width:640px){
  .lm-case__lead{font-size:16.5px; margin-block-end:16px}
  .lm-case__result{font-size:15.5px}
}




/* NOTICE — 원데이 공통 부품 그대로, 문장이 길어 본문 크기(17px)로 · 목록 폭은 아래 FAQ 와 같은 1000px */
body[data-page="laminate"] .j-numlist,body[data-page="laminate-redo"] .j-numlist,body[data-page="whitening"] .j-numlist{max-width:1000px}
body[data-page="laminate"] .j-numlist p,body[data-page="laminate-redo"] .j-numlist p,body[data-page="whitening"] .j-numlist p{font-size:17px; line-height:1.8}

@media (max-width:1100px){
  .lm-flow__list{grid-template-columns:repeat(3,minmax(0,1fr))}
  .lm-flow__step:nth-child(3n){border-top-color:transparent}
}
@media (max-width:900px){
  .lm-m__row,.lm-m__row--flip,.lm-chk__grid{grid-template-columns:minmax(0,1fr)}
  .lm-m__row{gap:24px} .lm-m__row--flip .lm-m__visual{order:0}
}
@media (max-width:640px){
  .lm-flow__list{grid-template-columns:repeat(2,minmax(0,1fr)); row-gap:32px}
  .lm-flow__step:nth-child(3n){border-top-color:var(--c-gold)} .lm-flow__step:nth-child(2n){border-top-color:transparent}
  .lm-flow__no{font-size:28px} .lm-flow__t{font-size:17px}
  .lm-m__no{font-size:28px; margin-block-end:12px}
  .lm-chk__list p{font-size:15.5px}
}

/* 모션 — 공통 모션 시스템(html.mo · mo-* 키프레임) 위에서 새 부품만 (치료사례 전후 사진은 공통 .ba-pair 규칙) */
html.mo .lm-m__row.reveal{transform:none}
html.mo .lm-flow__list.is-in .lm-flow__step{animation:mo-up .45s var(--mo-ease) backwards; animation-delay:calc(.05s + var(--i,0)*70ms)}
html.mo .lm-m__row.is-in .lm-m__visual{animation:mo-left .65s var(--mo-ease) .05s backwards}
html.mo .lm-m__row.is-in .lm-m__body{animation:mo-right .65s var(--mo-ease) .05s backwards}
html.mo .lm-m__row--flip.is-in .lm-m__visual{animation-name:mo-right}
html.mo .lm-m__row--flip.is-in .lm-m__body{animation-name:mo-left}
html.mo .lm-chk__list.is-in li{animation:mo-up .45s var(--mo-ease) backwards; animation-delay:calc(.05s + var(--i,0)*70ms)}
@media (max-width:640px){
  html.mo .lm-m__row.is-in .lm-m__visual,html.mo .lm-m__row.is-in .lm-m__body{animation-name:mo-up}
}
/* ── 라미네이트 하위 페이지(재치료 · 치아미백) — laminate 와 같은 부품 + 사진 없는 글 부품 (타이포는 MASTER 값만) ── */
/* 섹션 여백 정본 — 새 섹션 클래스는 반드시 이 목록에 넣는다. 빠지면 130px 기본값으로 떨어진다 */
.lm-band,.lm-numgrid,.lm-tsec,.brand-band{padding-block:clamp(44px,4.6vw,72px)}
.lm-numgrid,.lm-tsec{background:var(--c-paper)}

.lm-numgrid{background:var(--c-cream)} .lm-tsec{background:var(--c-paper)}


/* 확인 밴드(사진 없음) — laminate CHECK 와 같은 진녹색 · 금색 번호 · 가는 선 */
.lm-band .j-ans{color:rgba(238,243,240,.86)}
.lm-band__list{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); column-gap:clamp(32px,4vw,64px); border-bottom:1px solid rgba(255,255,255,.16)}
.lm-band__list--2{grid-template-columns:repeat(2,minmax(0,1fr)); max-width:1000px; margin-inline:auto}
.lm-band__list li{display:grid; grid-template-columns:auto minmax(0,1fr); gap:18px; padding-block:24px; border-top:1px solid rgba(255,255,255,.16)}
.lm-band__list p{font-size:17px; line-height:1.8; color:rgba(255,255,255,.86)}

/* 번호 칸(재치료 판단 4 · 미백 변색 유형 6) — 박스 없이 가는 선, 번호 42 · 제목 20 · 본문 17 (METHOD 와 같은 값) */
.lm-grid{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(36px,4vw,56px) clamp(40px,5vw,88px)}
.lm-grid--3{grid-template-columns:repeat(3,minmax(0,1fr)); column-gap:64px}
.lm-grid__item{padding-block-start:32px; border-top:1px solid var(--hairline)}
.lm-grid__item .lm-m__no{margin-block-end:16px}
.lm-grid__t{margin:0; font-size:20px; font-weight:700; line-height:1.4; color:var(--c-violet-ink)}
.lm-grid__d{display:flex; flex-direction:column; gap:8px; margin-block-start:12px}
.lm-grid__d p{margin:0; font-size:17px; line-height:1.8; color:var(--c-slate)}
/* 칸 안의 사진 — 설명 아래, 칸 바닥에 붙인다. 글 길이가 달라도 사진 윗선이 가지런하게 (2026-09-29) */
.lm-grid__item{display:flex; flex-direction:column}
.lm-grid__media{margin:0; padding-block-start:26px; margin-block-start:auto}
.lm-grid__media img{display:block; width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:var(--r-md); background:var(--c-cream)}

/* 비교 표(4열) — 가는 선 표, 이 페이지 치료(첫 행)만 옅은 초록 */
.lm-table__wrap{max-width:1000px; margin-inline:auto; overflow:hidden; border:1px solid var(--hairline); border-radius:var(--r-lg); background:#fff}
.lm-table{width:100%; border-collapse:collapse; font-size:17px; line-height:1.6}
.lm-table th,.lm-table td{padding:20px 24px; text-align:left; vertical-align:middle; border-bottom:1px solid var(--hairline)}
.lm-table thead th{background:var(--c-violet-deep); color:#fff; font-size:15px; font-weight:700}
.lm-table tbody th{color:var(--c-violet-ink); font-weight:700; white-space:nowrap}
.lm-table tbody td{color:var(--c-slate)}
.lm-table tbody tr:first-child{background:rgba(94,140,126,.09)}
.lm-table tbody tr:first-child td{color:var(--c-violet-ink)}
.lm-table tbody tr:last-child > *{border-bottom:0}
.lm-table__note{max-width:1000px; margin:24px auto 0; text-align:center; font-size:17px; line-height:1.8; color:var(--c-violet-ink)}

/* 비용 구성 — 가는 선 목록 + 비급여수가표 안내 */

/* 치아미백 인트로 — 기존 제품 사진(700×419, 아래에 설명 글자 포함)이라 잘리지 않게 원본 비율(570×341) */
body[data-page="whitening"] .j-intro__media{aspect-ratio:700/419; background:#fff}

@media (max-width:1100px){
  .lm-grid--3,.lm-band__list{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:900px){
}
@media (max-width:640px){
  .lm-grid,.lm-grid--3,.lm-band__list,.lm-band__list--2{grid-template-columns:minmax(0,1fr)}
  .lm-band__list p{font-size:15.5px}
  .lm-table thead{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0)}
  .lm-table,.lm-table tbody,.lm-table tr,.lm-table th,.lm-table td{display:block}
  .lm-table tbody tr{padding:18px 20px; border-bottom:1px solid var(--hairline)}
  .lm-table tbody tr:last-child{border-bottom:0}
  .lm-table tbody th{padding:0 0 8px; border:0}
  .lm-table tbody td{display:grid; grid-template-columns:6.5em minmax(0,1fr); gap:12px; padding:6px 0; border:0; font-size:15.5px}
  .lm-table tbody td::before{content:attr(data-label); font-weight:600; color:var(--c-slate)}
}
html.mo .lm-band__list.is-in li,html.mo .lm-grid.is-in .lm-grid__item{animation:mo-up .45s var(--mo-ease) backwards; animation-delay:calc(.05s + var(--i,0)*70ms)}
/* ── 라미네이트 리뉴얼 블록 끝 ── */

/* ══════════════════════════════════════════════════════════════
   미디어 — 대표원장 방송(TV) 출연 자리 · 2026-09-16
   방송사·방송명·방영일·주제·영상 URL 이 확인되기 전이라 내용은 비워 둔 자리만 만든다.
   공개 화면에는 나오지 않고, 주소에 ?ph=1 을 붙였을 때만 보인다(app.js '준비 중 블록 미리보기').
   타이포·여백·모서리·색은 전부 기존 여정형 토큰 그대로. 영상 프레임 1000×563(16:9).
   ══════════════════════════════════════════════════════════════ */
.ph-media{display:none}
html.ph .ph-media{display:block}

.j-media{background:#fff; padding-block:clamp(44px,4.6vw,72px)}
.j-media__frame{margin:0 auto; width:min(1000px,100%); aspect-ratio:16/9; overflow:hidden; border-radius:var(--r-lg); background:#111}
.j-media__frame img,.j-media__frame iframe{display:block; width:100%; height:100%; border:0; object-fit:cover}
.j-media__play{position:relative; display:block; width:100%; height:100%}
.j-media__btn{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:78px; height:78px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; background:rgba(255,255,255,.92); color:var(--c-violet-deep); font-size:26px; padding-left:5px}
/* 자료 오기 전 자리 표시 — 최종 사진/영상과 같은 크기 */
.j-media__ph{width:100%; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; padding:24px; text-align:center;
  background:repeating-linear-gradient(45deg,#f2efe8,#f2efe8 12px,#eae5db 12px,#eae5db 24px)}
.j-media__no{font-family:var(--serif); font-size:15px; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--c-gold-deep)}
.j-media__ph b{font-size:20px; font-weight:700; color:var(--c-violet-ink)}
.j-media__ph span{font-size:15px; color:var(--c-slate)}
.j-media__ph i{font-style:normal; font-size:15px; color:#b45454}
.j-media__meta{max-width:1000px; margin:26px auto 0; padding-block-start:22px; border-top:1px solid var(--hairline);
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px clamp(24px,3vw,48px)}
.j-media__meta dt{font-size:15px; line-height:1.6; color:var(--c-slate)}
.j-media__meta dd{margin:4px 0 0; font-size:17px; font-weight:700; line-height:1.6; color:var(--c-violet-ink)}
.j-media__sum{max-width:1000px; margin:20px auto 0; font-size:17px; line-height:1.85; color:var(--c-slate)}
.j-media__note{max-width:1000px; margin:16px auto 0; font-size:15px; line-height:1.75; color:var(--c-slate)}

/* 미니 밴드 — MAIN 이 아닌 상세페이지 공통(영상 없이 한 줄) */
.j-media--mini{background:transparent; padding-block:clamp(24px,2.6vw,40px)}
.j-media__band{max-width:1000px; margin:0 auto; display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:clamp(16px,2vw,28px);
  padding:22px 26px; border:1px solid var(--hairline); border-radius:var(--r-lg); background:var(--c-canvas)}
.j-media__lbl{margin:0; font-family:var(--serif); font-size:15px; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--c-gold-deep); white-space:nowrap}
.j-media__txt{margin:0; font-size:17px; line-height:1.6; color:var(--c-violet-ink)}
.j-media__info{display:block; margin-block-start:4px; font-size:15px; color:var(--c-slate)}
.j-media__link{font-size:15px; font-weight:700; color:var(--c-violet-deep); white-space:nowrap; text-decoration:none}
.j-media__link--off{color:var(--c-taupe)}

@media (max-width:900px){
  .j-media__meta{grid-template-columns:1fr; gap:14px}
  .j-media__band{grid-template-columns:1fr; gap:10px}
  .j-media__btn{width:58px; height:58px; font-size:20px}
}
/* ── 미디어 블록 끝 ── */

/* ── 미디어 실제 영상 모드 보강 · 2026-09-17 — 썸네일+재생 버튼(facade) 상태 ── */
.j-media__sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.j-media__play img{transition:transform .5s ease}
.j-media__play:hover img{transform:scale(1.03)}
.j-media__btn{transition:transform .25s ease, background .25s ease; box-shadow:0 8px 24px rgba(0,0,0,.25)}
.j-media__play:hover .j-media__btn{transform:translate(-50%,-50%) scale(1.06); background:#fff}
.j-media__play:focus-visible{outline:3px solid var(--c-gold-deep); outline-offset:-3px}
/* ── 미디어 실제 영상 모드 보강 끝 ── */

/* ── 공통 푸터(ft2) 정렬 보정 · 2026-09-17 (라미네이트 QA 에서 발견, 전 페이지 공통) ──
   G-31 모바일 주소 줄: 아이콘 뒤 텍스트가 flex 항목으로 갈라지던 것을 한 span 으로(마크업 parts.py) — 여기서는 그 span 만 정의
   G-21 두 열 제목 시작선: '오시는 길'(버튼과 같은 줄, 48px) vs '진료시간'(h3 만) 5px 차 → .ft2-h 최소 높이 48
   G-32 모바일 진료시간 표: 토요일 행만 태그가 다음 줄로 내려가 73px → 640 이하에서 th 폭 44%→36% */
.ft2-addr__t{flex:1 1 auto; min-width:0}
.ft2-h{min-height:48px}
@media (max-width:640px){ .ft2-hours th{width:36%} }
/* ── 공통 푸터 정렬 보정 끝 ── */

/* ══════════════════════════════════════════════════════════════
   보철치료 탭 (pt-*) — 크라운 / 심미보철 / 틀니 를 한 페이지에서 전환. 2026-09-28
   패널은 HTML 에 모두 들어 있고 보이기만 바뀐다(검색엔진은 셋 다 읽는다).
   JS 가 없으면 head 의 noscript 규칙이 셋 다 펼친다.
   ══════════════════════════════════════════════════════════════ */
.pt-tabs{padding-block-end:0}
.pt-bar{display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin-block-start:34px}
.pt-btn{font:inherit; font-size:16px; font-weight:600; padding:12px 26px; border-radius:var(--r-pill);
  border:1px solid var(--hairline); background:#fff; color:var(--c-slate); cursor:pointer;
  transition:color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out),
             border-color var(--dur-fast) var(--ease-out)}
.pt-btn:hover,.pt-btn:focus-visible{border-color:var(--c-violet); color:var(--c-violet)}
.pt-btn.is-on{background:var(--c-violet); border-color:var(--c-violet); color:#fff}
.pt-panel{display:none; scroll-margin-top:calc(var(--header-h) + 120px)}  /* 해시로 들어와도 탭 바가 헤더에 가리지 않게 — app.js 가 로드 뒤 정확한 값으로 다시 맞춘다 */
.pt-panel.is-on{display:block}
@media (max-width:640px){ .pt-btn{font-size:14.5px; padding:10px 18px} }

/* ══════════════════════════════════════════════════════════════
   2026-09-29 잇몸성형 "건강한 잇몸, 건강한 미소" — 3칸 격자를 한 장씩 보는 슬라이더로
   · 카드 마크업(.j-feature/.j-feats/.j-feat)은 그대로 두고 껍데기만 .j-fsl 로 감쌌다.
   · app.js 가 .is-slider 를 붙일 때만 슬라이더가 된다 → JS 가 없으면 지금의 3칸 격자 그대로(noscript 손댈 필요 없음).
   · 640px 이하에서는 슬라이더를 쓰지 않고 1열 세로 나열로 되돌린다(근거는 responsive 메모).
   ══════════════════════════════════════════════════════════════ */
.j-fsl__head{position:relative}
.j-fsl__nav:not([hidden]){display:flex; gap:8px; position:absolute; right:0; top:0; height:100%; align-items:center}
.j-fsl__arrow{width:46px; height:46px; border-radius:50%; border:1px solid var(--hairline-l); background:var(--c-paper);
  display:flex; align-items:center; justify-content:center; font-size:22px; line-height:1; color:var(--c-violet-deep);
  transition:background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out)}
.j-fsl__arrow:hover{background:var(--c-mist); border-color:rgba(81,114,100,.45)}
/* 점 — 히어로와 같은 기법(투명 테두리 + background-clip:content-box)이지만 밝은 배경용 색이고,
   테두리를 키워 실제 누를 면적을 34×44px 로 넓혔다(히어로의 35×25px 문제를 새 부품에서만 고친다) */
.j-fsl__dots:not([hidden]){display:flex; justify-content:center; gap:0; margin-block-start:clamp(18px,2vw,28px)}
.j-fsl__dots button{width:10px; height:10px; border-radius:50%; border:17px solid transparent; border-inline-width:12px;
  background:rgba(35,42,38,.22); background-clip:content-box; box-sizing:content-box;
  transition:background var(--dur-fast),transform var(--dur-fast)}
.j-fsl__dots button:hover{background-color:rgba(35,42,38,.45)}
.j-fsl__dots button[aria-current="true"]{background-color:var(--c-violet-deep); transform:scale(1.3)}
/* 번호는 슬라이더일 때만 — 격자 fallback 은 지금 배포본과 같은 모양으로 남긴다 */
.j-fsl__no{display:none}

/* ── 슬라이더 모드(JS 가 .is-slider 를 붙였을 때) ── */
.j-fsl.is-slider .j-fsl__head,
.j-fsl.is-slider .j-fsl__view{max-width:1240px; margin-inline:auto}   /* 화살표 오른쪽 끝을 슬라이드 오른쪽 끝에 맞춘다 */
.j-fsl.is-slider .j-fsl__track{display:block}
.j-fsl.is-slider .j-fsl__slide{display:none}
.j-fsl.is-slider .j-fsl__slide.is-on{display:grid; grid-template-columns:minmax(0,46%) minmax(0,1fr);
  align-items:center; gap:clamp(20px,2.4vw,40px); padding:clamp(18px,2vw,30px)}
.j-fsl.is-slider .j-fsl__slide .j-feat__media{border-radius:14px}
.j-fsl.is-slider .j-fsl__slide figcaption{padding:0 clamp(6px,1vw,18px) 0 0}
.j-fsl.is-slider .j-fsl__slide figcaption b{font-size:clamp(23px,2.1vw,30px)}
.j-fsl.is-slider .j-fsl__no{display:inline-flex; align-items:center; gap:12px; margin-block-end:16px;
  font-family:var(--serif); font-weight:700; font-size:26px; line-height:1; letter-spacing:.06em; color:var(--c-gold-deep)}
.j-fsl.is-slider .j-fsl__no::after{content:""; width:34px; height:2px; background:var(--c-gold)}
html.mo .j-fsl.is-slider .j-fsl__slide.is-on{animation:mo-fade var(--dur-base) var(--mo-ease) backwards}

@media (max-width:900px){
  .j-fsl__nav:not([hidden]){position:static; height:auto; justify-content:center; margin-block-start:18px}
  .j-fsl.is-slider .j-fsl__slide.is-on{grid-template-columns:1fr; gap:18px}
  .j-fsl.is-slider .j-fsl__slide figcaption{padding:0}
}
@media (max-width:640px){
  /* 좁은 화면: 슬라이더를 끄고 3장을 세로로 모두 보여 준다(= 지금 배포본의 1열 격자) */
  .j-fsl .j-fsl__nav,.j-fsl .j-fsl__nav:not([hidden]),
  .j-fsl .j-fsl__dots,.j-fsl .j-fsl__dots:not([hidden]){display:none}
  .j-fsl.is-slider .j-fsl__head,.j-fsl.is-slider .j-fsl__view{max-width:none}
  .j-fsl.is-slider .j-fsl__track{display:grid}
  .j-fsl.is-slider .j-fsl__slide,.j-fsl.is-slider .j-fsl__slide.is-on{display:block; padding:0}
  .j-fsl.is-slider .j-fsl__slide figcaption{padding:22px 26px 26px}
  .j-fsl.is-slider .j-fsl__no{display:none}
}

/* ── 병원 둘러보기(홈) — 대표 사진 한 장 + 아래 작은 사진 줄. 캡션 없음 (2026-09-29) ── */
/* 2026-09-30: 레퍼런스처럼 더 넓고 크게 — 컨테이너 1400, 대표 16:9, 썸네일 4열 */
.gal-sec > .container{max-width:1432px; padding-inline:16px}   /* 내용 폭 정확히 1400 */
.gal-hero{margin:0; aspect-ratio:16/9; overflow:hidden; border-radius:var(--r-lg); background:var(--c-cream)}
.gal-hero img{width:100%; height:100%; object-fit:cover; display:block}
.gal-strip{display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(8px,.63vw,12px); margin-block-start:clamp(8px,.63vw,12px)}
.gal-thumb{margin:0; aspect-ratio:4/3; overflow:hidden; border-radius:var(--r-md); background:var(--c-cream)}
.gal-thumb img{width:100%; height:100%; object-fit:cover; display:block; transition:transform var(--dur-slow) var(--ease-out)}
.gal-thumb:hover img{transform:scale(1.05)}
@media (max-width:640px){ .gal-strip{grid-template-columns:repeat(2,minmax(0,1fr))} }

/* ══════════════════════════════════════════════════════════════
   홈 임팩트 (2026-09-29) — style.css 맨 끝에 덧붙인다.
   전부 body[data-page="home"] 스코프. 새 색·새 서체 없음, :root 토큰만.
   원데이 MASTER(.j-h2 / .display-kr / .j-en / .j-ed__t / .eyebrow)의
   전역 값은 한 글자도 바꾸지 않는다.
   ══════════════════════════════════════════════════════════════ */

/* ── 1) 세로 리듬: 72px 한 값 × 8 → 세 값 ───────────────────── */
body[data-page="home"] .section      {padding-block:clamp(56px,5.6vw,88px)}
body[data-page="home"] .sec--air     {padding-block:clamp(60px,6.6vw,104px)}
body[data-page="home"] .sec--rest,
body[data-page="home"] .brand-band   {padding-block:clamp(24px,2.4vw,36px)}

/* ── 2) 제목 위계: 42px 한 종류 → 68 / 42 / 32 ──────────────── */
body[data-page="home"] .h-xl{font-size:clamp(28px,3.4vw,52px); line-height:1.2; letter-spacing:-.03em}
body[data-page="home"] .h-sm{font-size:clamp(22px,2vw,28px)}
/* 한 줄 안 굵기 2단은 기존 .j-h2--mix(400 + b 800) 재사용 — 다크에서만 색을 뒤집는다 */
body[data-page="home"] .section--ink   .j-h2--mix b,
body[data-page="home"] .section--violet .j-h2--mix b{color:var(--c-gold)}

/* ── 3) 히어로: 한글 줄만 키우고, 브리지를 다크로 도착시킨다 ── */
body[data-page="home"] .hero h1 .kr{font-size:clamp(28px,5vw,58px)}
body[data-page="home"] .hero::after{
  background:linear-gradient(180deg,rgba(35,42,38,0) 0%,rgba(35,42,38,.55) 55%,var(--c-violet-ink) 100%)}
/* 좌하단 스크롤 유도 — 2026-10-06 사용자 "이거 그냥 삭제해줘"로 마크업과 함께 지움 */

/* ── 5) 자주 찾으시는 치료 — 사진을 지그재그로 화면 끝까지 ────
   그리드 아이템의 % 마진은 그리드 영역 기준이라 어긋난다 → 뷰포트 기준 값으로 직접 계산한다.
   컨테이너는 max-width 1720 + padding-inline var(--gutter) 이므로
   내용 가장자리에서 화면 끝까지의 거리 = (100vw - min(1720px,100vw))/2 + gutter.
   1920 → 156px, 1600 → 56px, 1366 → 54.6px. 사진 표시 폭은 760+156 = 916px(원본 1000px 안).
   높이는 16/9 로 고정해 행이 한없이 길어지지 않게 한다. */
body[data-page="home"] .j-ed{--bleed:calc((100vw - min(1720px,100vw))/2 + var(--gutter))}
@media (min-width:1100px){
  body[data-page="home"] .j-ed__row{grid-template-columns:minmax(0,600px) minmax(0,1fr);
    padding-block:clamp(24px,2.2vw,38px)}
  body[data-page="home"] .j-ed__media{aspect-ratio:16/9; box-shadow:none}
  body[data-page="home"] .j-ed__media img{width:100%; height:100%; object-fit:cover}
  body[data-page="home"] .j-ed__row > .j-ed__media{
    margin-left:calc(-1 * var(--bleed)); border-radius:0 var(--r-xl) var(--r-xl) 0}
  body[data-page="home"] .j-ed__row--flip{grid-template-columns:minmax(0,1fr) minmax(0,600px)}
  body[data-page="home"] .j-ed__row--flip > .j-ed__media{
    margin-left:0; margin-right:calc(-1 * var(--bleed)); border-radius:var(--r-xl) 0 0 var(--r-xl)}
  body[data-page="home"] .j-ed__body{max-width:620px}
}
/* 풀블리드 요소가 가로 스크롤을 만들지 않게 (clip 은 sticky 를 깨지 않는다) */
body[data-page="home"]{overflow-x:clip}
/* 대표원장 소개(홈) — 병원소개 페이지와 같은 .doc-grid 를 쓰되 사진을 한 단계 줄인다.
   원본 doctor.png 519×585 이라 표시 폭을 그 안에 둔다. */
body[data-page="home"] .doc-grid{grid-template-columns:minmax(0,380px) minmax(0,1fr); gap:clamp(28px,4vw,64px); align-items:center}
body[data-page="home"] .doc-media{aspect-ratio:519/585}
.doc-more{margin-block-start:var(--sp-xl)}
.doc-more a{font-size:15.5px; font-weight:700; color:var(--c-violet-deep);
  text-decoration:underline; text-underline-offset:4px}
@media (max-width:900px){ body[data-page="home"] .doc-grid{grid-template-columns:1fr} }

/* ── 6) 치료사례 — 크기는 다른 페이지와 같게 둔다(608px). 2026-09-29 축소 ── */

/* ── 7) 병원 둘러보기 — 레퍼런스(ledentals 'A promise with Le') 실측값 (2026-09-30) ──
   1920 기준: 대표 사진 1400 폭 · 아래 썸네일 4장 각 344 · 칸 사이 7 · 대표와 썸네일 사이 47 */
body[data-page="home"] .gal-strip{gap:7px; margin-block-start:clamp(20px,2.45vw,47px)}

/* ── 8) 상담 CTA 만 ink 로 — 푸터(deep)와 갈라 끝에서 한 층 더 ── */
body[data-page="home"] .j-cta--dark{background:var(--c-violet-ink)}

/* ── 9) 모션: 첫 화면 등장 + 대형 섹션만 이동거리 24 → 56px ──── */
html.mo body[data-page="home"] .hero-cap h1          {animation:mo-up .9s var(--mo-ease) .15s backwards}
html.mo body[data-page="home"] .hero-cap .hero-sub   {animation:mo-up .8s var(--mo-ease) .32s backwards}
html.mo body[data-page="home"] .hero-cap .hero-facts {animation:mo-up .8s var(--mo-ease) .44s backwards}
html.mo body[data-page="home"] .hero-cap .hero-actions{animation:mo-up .8s var(--mo-ease) .56s backwards}
body[data-page="home"] .sec--air .reveal,
body[data-page="home"] .j-cases .reveal{--rise:56px}


/* ── 선언 밴드 (2026-09-30) — koclub.com 메인 두 카드 섹션 실측값으로 맞춤 ──
   1920 기준 원본값: 좌우 여백 60 / 카드 900×810(10:9) ×2, gap 0 / radius 30
   왼쪽: 글자 67px·600·lh 80.4·ls -3px, 줄 피치 117.4(=80.4+37), 1·2줄 흰색 70%, 3줄 순백 + 3px 밑줄
   오른쪽: 덮는 레이어 없음, 사진 center bottom, 안쪽 여백 120, 배지 4/13·radius 8·15px, 화살표 지름 48
   색만 우리 토큰(--c-violet-deep)으로 바꾼다. 나머지는 vw 로 환산해 그대로 옮겼다. */
/* 2026-09-30 카드가 푸터 첫 줄(같은 --c-violet-deep)에 바로 붙어 한 덩어리로 보였다 →
   koclub 실측처럼 카드 아래에 바탕 여백 165px(1920)을 두어 카드가 따로 떠 보이게 한다. */
body[data-page="home"] .home-decl{padding-block:0 clamp(72px,8.6vw,165px); background:var(--c-paper)}
body[data-page="home"] .home-decl__grid{display:grid; grid-template-columns:1fr 1fr; gap:0;
  padding-inline:clamp(16px,3.125vw,60px)}
body[data-page="home"] .home-decl__card{position:relative; overflow:hidden;
  aspect-ratio:10/9; border-radius:clamp(14px,1.56vw,30px); display:block}

/* 왼쪽 — 문구 카드 */
body[data-page="home"] .home-decl__card--word{background:var(--c-violet-deep);
  display:flex; align-items:center; justify-content:center; text-align:center;
  padding:clamp(40px,3.9vw,75px) 0 clamp(28px,2.6vw,50px)}
body[data-page="home"] .home-decl__brand{position:absolute; top:clamp(28px,3.65vw,70px); left:clamp(20px,4.43vw,85px);
  margin:0; font-family:var(--serif); font-size:clamp(13px,1.15vw,22px); font-weight:400;
  line-height:1.45; color:#fff; opacity:.75}
body[data-page="home"] .home-decl__big{margin:0; display:flex; flex-direction:column; align-items:center;
  gap:clamp(8px,1.93vw,37px);
  font-size:clamp(26px,3.49vw,67px); font-weight:600; line-height:1.2; letter-spacing:-.045em;
  color:rgba(255,255,255,.7)}
body[data-page="home"] .home-decl__big > span{display:block}
body[data-page="home"] .home-decl__last{color:#fff; align-self:center;
  border-bottom:3px solid #fff; padding-bottom:4px}

/* 오른쪽 — 사진 카드. 덮는 레이어를 두지 않는다(레퍼런스와 동일) */
body[data-page="home"] .home-decl__card--photo{background:var(--c-violet-ink)}
body[data-page="home"] .hd-car__cell img{position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover; object-position:50% 22%}
/* 레퍼런스는 사진 자체에 아래쪽 어두운 그라데이션이 구워져 있다. 우리 수술 사진은 전체가 균일하게
   어둡고 기구가 많아 글자가 묻혔다 → 같은 효과를 CSS 로 깔아 글자 자리를 비운다. (2026-09-30) */
body[data-page="home"] .hd-car__cell::after{content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg,rgba(35,42,38,0) 34%,rgba(35,42,38,.62) 66%,rgba(35,42,38,.93) 100%)}
body[data-page="home"] .home-decl__cap{position:absolute; left:0; right:0; bottom:0; z-index:2;
  padding:0 clamp(20px,6.25vw,120px) clamp(24px,6.25vw,120px); color:#fff}
body[data-page="home"] .home-decl__no{display:inline-block; padding:4px 13px; border-radius:8px;
  background:rgba(63,95,85,.89); font-size:clamp(12px,.78vw,15px); font-weight:400; line-height:1.73; color:#fff}
body[data-page="home"] .home-decl__t{margin:clamp(10px,1.04vw,20px) 0 clamp(12px,1.3vw,25px);
  font-size:clamp(20px,2.76vw,53px); font-weight:600; line-height:1.32; letter-spacing:-.047em}
body[data-page="home"] .home-decl__s{margin:0; font-size:clamp(12px,.99vw,19px); font-weight:300;
  line-height:1.68; color:#fff}
body[data-page="home"] .home-decl__go{position:absolute; z-index:2;
  right:clamp(20px,5vw,96px); bottom:clamp(24px,6.5vw,125px);
  width:clamp(30px,2.5vw,48px); height:clamp(30px,2.5vw,48px); border-radius:50%;
  background:rgba(255,255,255,.15); transition:background .45s cubic-bezier(.25,1,.33,1)}
body[data-page="home"] .home-decl__go::after{content:""; position:absolute; top:50%; left:50%;
  width:clamp(8px,.63vw,12px); height:clamp(8px,.63vw,12px); border-top:2px solid #fff; border-right:2px solid #fff;
  transform:translate(-65%,-50%) rotate(45deg)}
body[data-page="home"] .home-decl__card--photo:hover .home-decl__go{background:rgba(255,255,255,.3)}

/* 좁은 화면 — 레퍼런스도 두 장을 세로로 쌓는다(390에서 335.4×285 / 335.4×343) */
@media (max-width:900px){
  body[data-page="home"] .home-decl__grid{grid-template-columns:1fr; padding-inline:7%}
  body[data-page="home"] .home-decl__card--word{aspect-ratio:auto; min-height:285px;
    padding:53px 0 59px}
  body[data-page="home"] .home-decl__card--photo{aspect-ratio:auto; min-height:343px}
  body[data-page="home"] .home-decl__brand{position:static; text-align:center; font-size:15px; margin-block-end:22px}
  body[data-page="home"] .home-decl__card--word{flex-direction:column; justify-content:flex-start}
  body[data-page="home"] .home-decl__big{gap:8px; font-size:30px; letter-spacing:-.043em; margin-block:auto}
  body[data-page="home"] .home-decl__cap{padding:0 27px 50px}
  body[data-page="home"] .home-decl__t{font-size:24px; line-height:1.34; margin:10px 0 13px}
  body[data-page="home"] .home-decl__s{font-size:13px}
  /* 2026-09-30 390 폭에서 자격 문구 끝(통합치의학과)을 가려서 카드 오른쪽 위로 */
  body[data-page="home"] .home-decl__go{width:26px; height:26px; right:24px; top:24px; bottom:auto}
}

/* ── 가로 아코디언 (2026-09-30) — 홈 '자주 찾으시는 치료'.
   레퍼런스(1mmps draft2 'Our Solution')의 동작을 옮긴 것: 올려 놓은 칸만 넓어지고 나머지는 좁아진다.
   JS 없이 :hover / :focus-within 으로만 동작하고, 아무 데도 올리지 않았을 때는 첫 칸이 열려 있다. */
.j-acc{background:var(--c-canvas)}
/* 2026-09-30: 다른 섹션(숏츠 1440 · 둘러보기 1400)과 줄을 맞춰 한 단계 줄인다 */
.j-acc > .container{max-width:1472px; padding-inline:16px}   /* 내용 폭 1440 */
.j-acc__head{margin-block-end:clamp(22px,2.4vw,36px)}
.j-acc__head .j-h2{margin-block-start:14px}
.j-acc__row{display:flex; gap:0; height:clamp(360px,29vw,560px); overflow:hidden;
  border-radius:clamp(14px,1.56vw,30px)}
.j-acc__item{position:relative; flex:1 1 0; min-width:0; overflow:hidden; display:block;
  transition:flex-grow .52s cubic-bezier(.4,0,.2,1)}
.j-acc__item img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transition:transform .6s var(--ease-out)}
.j-acc__item::after{content:""; position:absolute; inset:0; background:rgba(35,42,38,.42);
  transition:background .4s var(--ease-out)}
/* 기본 — 첫 칸이 열려 있다 */
.j-acc__item:first-child{flex-grow:3}
.j-acc__item:first-child::after{background:rgba(35,42,38,.28)}
/* 어느 칸에든 올리면 기본 열림을 풀고, 올린 칸만 연다 */
.j-acc__row:hover .j-acc__item,
.j-acc__row:focus-within .j-acc__item{flex-grow:1}
.j-acc__row:hover .j-acc__item::after,
.j-acc__row:focus-within .j-acc__item::after{background:rgba(35,42,38,.42)}
.j-acc__row .j-acc__item:hover,
.j-acc__row .j-acc__item:focus-within{flex-grow:3}
.j-acc__row .j-acc__item:hover::after,
.j-acc__row .j-acc__item:focus-within::after{background:rgba(35,42,38,.28)}
.j-acc__item:hover img{transform:scale(1.04)}
/* 라벨 — 가운데 아래 */
.j-acc__label{position:absolute; z-index:1; left:0; right:0; bottom:clamp(24px,2.9vw,52px);
  display:flex; flex-direction:column; align-items:center; gap:14px; padding-inline:12px;
  font-size:clamp(17px,1.5vw,28px); font-weight:700; letter-spacing:-.025em; color:#fff;
  text-align:center; white-space:nowrap}
.j-acc__label em{display:flex; align-items:center; gap:10px; font-style:normal;
  font-size:13px; font-weight:600; letter-spacing:.14em; color:rgba(255,255,255,.9);
  opacity:0; transform:translateY(6px); transition:opacity .4s var(--ease-out), transform .4s var(--ease-out)}
.j-acc__label em::before{content:""; width:26px; height:1px; background:rgba(255,255,255,.75)}
.j-acc__item:first-child .j-acc__label em{opacity:1; transform:none}
.j-acc__row:hover .j-acc__item .j-acc__label em,
.j-acc__row:focus-within .j-acc__item .j-acc__label em{opacity:0; transform:translateY(6px)}
.j-acc__row .j-acc__item:hover .j-acc__label em,
.j-acc__row .j-acc__item:focus-within .j-acc__label em{opacity:1; transform:none}
@media (max-width:900px){
  /* 좁은 화면에서는 열고 닫지 않고 2열로 모두 보여 준다 */
  .j-acc__row{display:grid; grid-template-columns:1fr 1fr; gap:10px; height:auto; border-radius:0}
  .j-acc__item,.j-acc__item:first-child{flex:none; aspect-ratio:4/5; border-radius:var(--r-md)}
  .j-acc__label{bottom:20px; font-size:17px; gap:8px}
  .j-acc__label em{opacity:1; transform:none; font-size:11px}
  .j-acc__row:hover .j-acc__item .j-acc__label em{opacity:1; transform:none}
}
@media (prefers-reduced-motion:reduce){ .j-acc__item{transition:none} }

/* ── 방송 자문 (2026-09-30) — 홈 '누가 하는지'. 대표원장 섹션(흰 바탕) 바로 뒤 ──
   사용자 레퍼런스(블로그 글 카드) 형식: 1200 폭 3장 · 카드 흰 바탕 + 얇은 금색 테두리 · 위 사진 16:10 + 왼쪽 위 배지
   / 날짜 / 제목 2줄 / 요약 3줄 / 선 아래 '작성자 | 자세히 보기 →'. 섹션은 크림 바탕으로 흰 카드가 떠 보이게. */
.j-press{background:var(--c-canvas)}
.j-press__head{text-align:center; margin-block-end:clamp(28px,2.9vw,48px)}
.j-press__head .j-en{justify-content:center}
.j-press__head .j-h2{margin-block-start:14px}
.j-press__list{list-style:none; margin:0 auto; padding:0; width:min(1200px,100%);
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(14px,1.25vw,24px)}
.j-press__list > li{display:flex}
.j-press__card{display:flex; flex-direction:column; width:100%; overflow:hidden; color:inherit;
  background:#fff; border:1px solid rgba(81,114,100,.35); border-radius:10px;
  transition:transform .45s var(--ease-out), box-shadow .45s var(--ease-out)}
.j-press__card:hover,.j-press__card:focus-visible{transform:translateY(-6px); box-shadow:0 18px 40px -22px rgba(35,42,38,.35)}
.j-press__media{position:relative; display:block; aspect-ratio:16/10; overflow:hidden; background:var(--c-cream)}
.j-press__media img{width:100%; height:100%; object-fit:cover; display:block; transition:transform .6s var(--ease-out)}
.j-press__card:hover .j-press__media img{transform:scale(1.04)}
.j-press__ch{position:absolute; top:14px; left:14px; padding:5px 11px; border-radius:4px;
  background:rgba(81,114,100,.92); font-size:13px; font-weight:700; letter-spacing:.12em; line-height:1.5; color:#fff}   /* 2026-10-02 금색 → 기준 초록(--c-violet) */
.j-press__body{display:flex; flex-direction:column; flex:1; padding:clamp(20px,1.46vw,28px) clamp(18px,1.25vw,24px) clamp(16px,1.15vw,22px)}
.j-press__date{font-size:clamp(14px,.83vw,16px); font-weight:600; color:#333}
.j-press__title{margin-block-start:12px; font-size:clamp(18px,1.15vw,22px); font-weight:700; line-height:1.45; letter-spacing:-.03em;
  color:var(--c-violet-ink); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.j-press__ex{margin-block-start:12px; font-size:clamp(14px,.89vw,17px); line-height:1.65; color:#666;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden}
.j-press__foot{margin-block-start:auto; padding-block-start:16px; display:flex; align-items:center; justify-content:space-between; gap:12px;
  border-top:1px solid rgba(35,42,38,.1); font-size:clamp(14px,.83vw,16px); color:#666}
.j-press__ex{margin-block-end:18px}   /* 요약과 아래 선 사이 최소 간격 — 선은 margin-top:auto 로 카드 바닥에 붙는다 */
.j-press__more{display:inline-flex; align-items:center; gap:6px; font-weight:600; color:var(--c-violet)}
.j-press__more i{font-style:normal; transition:transform var(--dur-fast) var(--ease-out)}
.j-press__card:hover .j-press__more i{transform:translateX(5px)}
@media (max-width:900px){
  .j-press__list{grid-template-columns:1fr; gap:14px}
}
@media (prefers-reduced-motion:reduce){ .j-press__card,.j-press__media img{transition:none} }

/* ── 대표원장 — 가운데 큰 세리프 + 좌우 사진 (레퍼런스 koclub DOCTOR) ── */
.j-dr{background:var(--c-paper); overflow:hidden}
.j-dr__in{position:relative; display:grid; grid-template-columns:1fr minmax(0,620px) 1fr;
  align-items:center; gap:clamp(20px,3vw,60px); padding-inline:clamp(16px,5.1vw,98px)}
.j-dr__mid{text-align:center}
.j-dr__k{margin:0 0 clamp(14px,1.6vw,26px); font-size:clamp(14px,1.04vw,18px); line-height:1.7; color:var(--c-slate)}
.j-dr__t{margin:0; font-family:var(--serif); font-weight:500; letter-spacing:-.01em;
  font-size:clamp(34px,4.17vw,80px); line-height:1.24; color:var(--c-violet-ink)}
.j-dr__more{display:inline-flex; align-items:center; gap:10px; margin-block-start:clamp(22px,2.3vw,40px);
  font-size:15px; font-weight:600; letter-spacing:.06em; color:var(--c-violet-deep)}
.j-dr__more span{transition:transform var(--dur-fast) var(--ease-out)}
.j-dr__more:hover span{transform:translateX(5px)}
.j-dr__ph{margin:0; overflow:hidden; border-radius:clamp(12px,1.25vw,24px); background:var(--c-cream)}
.j-dr__ph img{display:block; width:100%; height:100%; object-fit:cover}
.j-dr__ph--l{aspect-ratio:4/3; align-self:start; margin-block-start:clamp(0px,2vw,40px)}
.j-dr__ph--r{aspect-ratio:3/4; align-self:end; margin-block-end:clamp(0px,2vw,40px)}
@media (max-width:900px){
  .j-dr__in{grid-template-columns:1fr 1fr; gap:14px}
  .j-dr__mid{grid-column:1 / -1; order:-1}
  .j-dr__ph--l,.j-dr__ph--r{aspect-ratio:1/1; margin:0}
}

/* 홈 제목 — 줄 단위로 밀려 올라오며 나타난다(레퍼런스 line-reveal-by-space 대응) */
@keyframes mo-lr{from{opacity:0; transform:translateY(.55em)} to{opacity:1; transform:none}}
html.mo body[data-page="home"] .reveal.is-in > .j-en,
html.mo body[data-page="home"] .reveal.is-in > h2,
html.mo body[data-page="home"] .j-dr__mid.is-in > *{animation:mo-lr .95s cubic-bezier(.22,.61,.36,1) backwards}
html.mo body[data-page="home"] .reveal.is-in > h2{animation-delay:.1s}
html.mo body[data-page="home"] .j-dr__mid.is-in > :nth-child(2){animation-delay:.1s}
html.mo body[data-page="home"] .j-dr__mid.is-in > :nth-child(3){animation-delay:.2s}

/* ── 모션 (2026-09-30) — koclub 이 쓰는 다섯 가지를 우리 시스템으로 옮긴 것 ──
   ① fade-in-from-bottom  ② 제목 줄 공개(위 mo-lr)  ③ 자동 슬라이드(히어로에 이미 있음)
   ④ 배경 패럴랙스 very_subtle  ⑤ 사진 zoom-out-slow
   prefers-reduced-motion 은 style.css 280행 전역 규칙이 전부 끈다. */
body[data-page="home"] .j-press .reveal,
body[data-page="home"] .j-dr .reveal,
body[data-page="home"] .j-acc .reveal,
body[data-page="home"] .j-cases .reveal{--rise:56px}
/* 좌우 사진은 시차를 두고 올라온다(레퍼런스 delay 0 / 100ms) */
html.mo body[data-page="home"] .j-dr__ph--l.is-in{animation:mo-up .95s var(--mo-ease) backwards}
html.mo body[data-page="home"] .j-dr__ph--r.is-in{animation:mo-up .95s var(--mo-ease) .1s backwards}
/* 선언 사진 — 아주 약한 패럴랙스 + 천천히 축소 */
body[data-page="home"] .home-decl__card--photo img{translate:0 var(--plx,0)}
@media (prefers-reduced-motion:reduce){
  body[data-page="home"] .home-decl__card--photo img{translate:none}
}

/* ── 전후사진 (2026-09-30) — 한 화면에 3장, 몇 초마다 넘어간다. 치료 후만 잠김 ──
   레퍼런스 koclub '전후사진 BEST' 실측: 카드 540 폭 · 칸 사이 30 · 3장 노출 · 좌우로 다음 장이 살짝 보임 */
.j-bal{background:var(--c-paper); overflow:hidden}
.j-bal__head{display:flex; align-items:flex-end; justify-content:space-between; gap:24px;
  margin-block-end:clamp(24px,2.6vw,40px)}
.j-bal__head .j-h2{margin-block-start:14px}
.j-bal__more{display:inline-flex; align-items:center; gap:10px; font-size:16px; font-weight:600;
  letter-spacing:.04em; color:var(--c-violet-deep); white-space:nowrap}
.j-bal__more span{transition:transform var(--dur-fast) var(--ease-out)}
.j-bal__more:hover span{transform:translateX(5px)}
/* 레퍼런스: 카드 3장 540+32+540+32+540 = 1684 를 화면 가운데. 딱 3장만 보이고 옆은 잘라 낸다.
   padding 안쪽은 overflow:hidden 이 자르지 못해 옆 카드가 비어져 나왔다 → 창 자체를 1684 로 (2026-09-30) */
.j-bal__view{width:min(1684px, 100% - 32px); margin-inline:auto; overflow:hidden}
.j-bal__track{display:flex; gap:clamp(12px,1.67vw,32px); width:max-content;
  transition:transform .7s cubic-bezier(.4,0,.2,1)}
.j-bal__card{flex:0 0 clamp(300px,28.1vw,540px)}
.j-bal__pair{display:grid; grid-template-columns:1fr 1fr; gap:0; overflow:hidden;
  border-radius:clamp(10px,.83vw,16px); background:#111}
.j-bal__side{position:relative; margin:0; aspect-ratio:270/315; overflow:hidden}   /* 레퍼런스 실측 반쪽 270×315 */
.j-bal__side img{width:100%; height:100%; object-fit:cover; display:block}
.j-bal__side figcaption{position:absolute; bottom:10px; font-size:clamp(11px,.73vw,14px); font-weight:600;
  color:#fff; text-shadow:0 1px 6px rgba(0,0,0,.65)}
.j-bal__side:first-child figcaption{left:14px}
.j-bal__side--lock figcaption{right:14px; z-index:3}
/* 치료 후 — 잠금. 레퍼런스는 사진을 지우지 않고 어둡게만 덮는다(전후가 읽혀야 한다) */
.j-bal__side--lock img{filter:none; transition:filter .5s var(--ease-out)}
.j-bal__lock{position:absolute; inset:0; z-index:2; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:9px; cursor:pointer;
  background:rgba(35,42,38,.58); backdrop-filter:blur(2px);
  font-size:clamp(12px,.83vw,15px); font-weight:600; letter-spacing:.04em; color:#fff;
  transition:opacity .35s var(--ease-out)}
.j-bal__lock:hover{background:rgba(35,42,38,.48)}
.j-bal__ico{width:clamp(20px,1.35vw,26px); height:clamp(23px,1.56vw,30px); display:block;
  background:no-repeat center/100% url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 28' fill='none' stroke='%23fff' stroke-width='1.8'>\
<rect x='3' y='11' width='18' height='15' rx='2.5'/><path d='M7 11V7a5 5 0 0 1 10 0v4'/></svg>")}
.j-bal__side--lock.is-open figcaption{opacity:1}
.j-bal__side--lock.is-open .j-bal__lock{opacity:0; pointer-events:none}
.j-bal__name{margin:14px 0 0; text-align:center; font-size:clamp(14px,1.04vw,18px);
  font-weight:600; color:var(--c-violet-ink)}
.j-bal__dots{display:flex; justify-content:center; gap:0; margin-block-start:clamp(18px,1.8vw,28px)}
.j-bal__dots button{width:9px; height:9px; border-radius:50%; border:13px solid transparent; border-inline-width:9px;
  background-color:rgba(35,42,38,.22); background-clip:content-box; box-sizing:content-box;
  transition:background-color var(--dur-fast),transform var(--dur-fast)}
.j-bal__dots button[aria-current="true"]{background-color:var(--c-violet-deep); transform:scale(1.35)}
.j-bal .ba-note{margin-block-start:clamp(16px,1.6vw,26px)}
@media (max-width:760px){
  .j-bal__head{flex-direction:column; align-items:flex-start; gap:14px}
  .j-bal__card{flex:0 0 calc(100vw - 64px)}
}
@media (prefers-reduced-motion:reduce){ .j-bal__track{transition:none} }

/* 대표원장 자격·학회·경력 — 옛 공식 홈페이지처럼 사진 옆에 목록으로 (2026-09-30) */
.doc-cv{margin-block-start:var(--sp-xl); display:grid; gap:var(--sp-lg)}
.doc-cv ul{list-style:none; margin:0; padding:0}
.doc-cv li{position:relative; padding-inline-start:14px; font-size:15.5px; line-height:1.95; color:var(--c-graphite)}
.doc-cv li::before{content:"·"; position:absolute; left:2px; color:var(--c-gold-deep)}
.doc-cv ul + ul{padding-block-start:var(--sp-lg); border-top:1px solid var(--hairline)}
.doc-body .disclaimer{margin-block-start:var(--sp-lg); font-size:14px; color:var(--c-slate)}

/* ── 유튜브 숏츠 (2026-09-30) — 레퍼런스 1mm 'YouTube Short' 실측값으로 맞춤 ──
   1920 기준 원본값: 카드 254×450 (9:16) · 칸 사이 38 · 5장 노출 · 트랙 좌우 240(= 1440 컨테이너)
   화살표는 카드 바깥(왼 185 / 오 1720, 지름 48) · 카드 아래에 진행 막대 */
.j-yt{background:var(--c-violet-ink); color:#fff}
.j-yt > .container{max-width:1472px; padding-inline:16px}   /* 내용 폭 1440 — 아래 카드 창과 같은 선 */
.j-yt__head{display:flex; align-items:flex-end; justify-content:space-between; gap:24px;
  margin-block-end:clamp(22px,2.4vw,34px)}
.j-yt__head .j-en{color:#e3d1a3}
.j-yt__head .j-h2{margin-block-start:14px; color:#fff}
.j-yt__more{display:inline-flex; align-items:center; gap:10px; font-size:16px; font-weight:600;
  letter-spacing:.04em; color:rgba(255,255,255,.88); white-space:nowrap}
.j-yt__more span{transition:transform var(--dur-fast) var(--ease-out)}
.j-yt__more:hover span{transform:translateX(5px)}
/* 트랙을 1440 창 안에 가둔다 — 카드가 화살표 밑으로 흘러 나가지 않게 (2026-09-30) */
.j-yt__view{position:relative; width:min(1440px, 100% - 32px); margin-inline:auto}
.j-yt__track{display:flex; gap:clamp(12px,1.98vw,38px); overflow-x:auto; scroll-behavior:smooth;
  scroll-snap-type:x mandatory; scrollbar-width:none; overscroll-behavior-x:contain}
.j-yt__track::-webkit-scrollbar{display:none}
.j-yt__card{flex:0 0 clamp(150px,13.23vw,254px); scroll-snap-align:start; display:block; color:inherit}
.j-yt__thumb{position:relative; display:block; aspect-ratio:254/450; overflow:hidden;
  border-radius:clamp(8px,.63vw,12px); background:#000}
.j-yt__thumb img{width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .6s var(--ease-out)}
.j-yt__card:hover .j-yt__thumb img{transform:scale(1.05)}
.j-yt__play{position:absolute; left:50%; top:50%; width:clamp(34px,2.6vw,50px); height:clamp(34px,2.6vw,50px);
  transform:translate(-50%,-50%); border-radius:50%; background:rgba(0,0,0,.42);
  display:flex; align-items:center; justify-content:center;
  transition:background var(--dur-fast) var(--ease-out)}
.j-yt__play::after{content:""; margin-left:3px; border-style:solid;
  border-width:clamp(6px,.47vw,9px) 0 clamp(6px,.47vw,9px) clamp(10px,.78vw,15px);
  border-color:transparent transparent transparent #fff}
.j-yt__card:hover .j-yt__play{background:rgba(0,0,0,.62)}
.j-yt__t{display:block; margin-block-start:12px; font-size:clamp(12px,.73vw,14px); font-weight:500;
  line-height:1.55; color:rgba(255,255,255,.8);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
/* 진행 막대 — 트랙과 같은 폭 */
.j-yt__bar{position:relative; height:1px; margin-block-start:clamp(18px,2vw,38px);
  margin-inline:auto; width:min(1440px, 100% - 32px); background:rgba(255,255,255,.22)}
.j-yt__bar::after{content:""; position:absolute; left:0; top:-1px; height:3px;
  width:var(--p,33%); background:#e3d1a3; transition:width .3s var(--ease-out)}
/* 화살표 — 카드 바깥 */
.j-yt__arrow{position:absolute; top:calc(50% - 26px); z-index:3;
  width:clamp(34px,2.5vw,48px); height:clamp(34px,2.5vw,48px); transform:translateY(-50%);
  border-radius:50%; background:rgba(255,255,255,.16); color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:20px; line-height:1;
  transition:background var(--dur-fast) var(--ease-out)}
.j-yt__arrow:hover{background:rgba(255,255,255,.32)}
.j-yt__prev{left:clamp(-52px,-2.86vw,-8px)}
.j-yt__next{right:clamp(-52px,-2.86vw,-8px)}
@media (max-width:1100px){ .j-yt__prev,.j-yt__next{display:none} }
@media (max-width:760px){
  .j-yt__head{flex-direction:column; align-items:flex-start; gap:14px}
}

/* 퀵메뉴 유튜브 아이콘 — 이미지가 없어 글리프로 (2026-09-30) */
.ico--yt{display:flex; align-items:center; justify-content:center; font-size:15px; color:#e0403a}

/* ── 병원소개 대표원장 (2026-09-30) — 레퍼런스 1mmps '의료진소개' 실측값 ──
   1920 기준: 내용 1500 = 사진 카드 750 + 간격 115 + 글 635 · 사진 카드 750×545, 모서리 20
   라벨 23/400/-1px 색 · 영문 50/400 세리프 · 이름 25/700(원장 400) · 이력 17 / 줄 33 · 점 없음 */
.dr2-sec > .container{max-width:1532px; padding-inline:16px}
.dr2{display:grid; grid-template-columns:minmax(0,750fr) minmax(0,635fr); column-gap:clamp(40px,6vw,115px); align-items:start}
/* doctor.png 는 불투명(바탕 #e9ebeb~#f4f5f5) — 카드 바탕을 사진 바탕에 맞추고 좌우 끝을 마스크로 흐려 사각 이음매를 없앤다 */
.dr2__photo{position:relative; margin:0; aspect-ratio:750/545; overflow:hidden; border-radius:20px; background:#eceeed}
.dr2__photo img{position:absolute; left:50%; bottom:0; height:100%; width:auto; transform:translateX(-50%); display:block;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent); mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent)}
@media (min-width:1001px){ .dr2__photo{position:sticky; top:120px} }
.dr2__photo figcaption{position:absolute; left:clamp(20px,2.34vw,45px); bottom:clamp(20px,2.34vw,45px);
  font-size:clamp(15px,.94vw,18px); letter-spacing:-.03em; color:var(--c-graphite)}
.dr2__photo figcaption b{font-weight:700; color:var(--c-violet-ink)}
.dr2__k{margin:10px 0 0; font-size:clamp(17px,1.2vw,23px); font-weight:400; line-height:1.4; letter-spacing:-1px; color:var(--c-violet)}
.dr2__en{margin:clamp(18px,1.56vw,30px) 0 0; font-family:var(--serif); font-size:clamp(34px,2.6vw,50px); font-weight:400;
  line-height:1; letter-spacing:0; color:#111}
.dr2__ko{margin:clamp(18px,1.51vw,29px) 0 0; font-size:clamp(20px,1.3vw,25px); font-weight:400; line-height:1.5;
  letter-spacing:-1px; color:#222}
.dr2__ko b{font-weight:700; color:#111}
.dr2__fields{margin:10px 0 0; font-size:15px; letter-spacing:-.02em; color:var(--c-slate)}
.dr2__lead{margin-block-start:clamp(26px,2.4vw,46px); display:grid; gap:10px}
.dr2__lead p{margin:0; font-size:clamp(15px,.89vw,17px); line-height:1.95; letter-spacing:-.02em; color:#555}
.dr2__cv{list-style:none; margin:clamp(24px,1.72vw,33px) 0 0; padding:0}
.dr2__cv li{font-size:clamp(15px,.89vw,17px); line-height:1.95; letter-spacing:-.02em; color:#555}
.dr2__note{margin:clamp(22px,1.72vw,33px) 0 0; font-size:14px; line-height:1.7; color:var(--c-slate)}
@media (max-width:1000px){
  .dr2{grid-template-columns:1fr; row-gap:36px}
}
/* 의료진소개가 페이지의 유일한 섹션이 됨(2026-09-30) — 세로 여백을 1mmps 실측값으로:
   히어로 → 사진 위 134px, 마지막 줄 → 푸터 153px (1920). 좁은 화면은 72/80 까지만 줄인다. */
.section.dr2-sec{padding-block:clamp(72px,7vw,134px) clamp(80px,8vw,153px)}
/* 숏츠 화살표가 1101~1535 폭에서 화면 밖으로 23px 까지 나갔다(2026-09-30 1366 가로 넘침).
   화살표는 창 바깥으로 2.86vw 나가므로, 창 좌우에 그만큼 + 10px 을 남기도록 창·막대를 좁힌다. 1920 은 1440 그대로. */
@media (min-width:1101px){
  .j-yt__view,.j-yt__bar{width:min(1440px, 100% - 5.72vw - 20px)}
}

/* ── 선언 카드 모션 (2026-09-30 "모션도 똑같이") — koclub 테마(Salient) 코드에서 뽑은 값 그대로 ──
   · 1·2줄 line-reveal-by-space : 단어마다 1.3em 아래 → 제자리, 1.2s cubic-bezier(.25,1,.5,1),
       단어 간격 500÷단어수 ms(15~50), 줄 지연 0 / 100ms  (--w·--st·--d 는 build.py 가 넣는다)
   · 3줄 rotating words : 첫 등장 1.2em 아래 → 제자리 1.2s(.2s 지연), 이후 2초마다 가로로 닦이며 교체 .8s cubic-bezier(.2,1,.3,1)
   · 오른쪽 카드 fade-in-from-bottom : 100px 아래 · 투명 → 제자리 750ms easeOutCubic, 200ms 지연
   · 카드 사진 zoom-out-slow : 1.45배 → 1배, 8s cubic-bezier(.1,.2,.7,1)
   · 카드 글 bottom-to-top : 10% 아래 · 투명 → 제자리 .7s cubic-bezier(.175,.885,.32,1.275)
   · 슬라이드 : 5초마다 다음 장, 끝에서 처음으로 이어서 같은 방향(wrap). 화살표·끌기로 넘기면 자동 넘김은 멈춘다(Flickity 기본)
   JS 가 html.mo 를 붙이지 못하면 전부 정지 상태 그대로 보인다. */
body[data-page="home"] .hd-lr .lr{display:inline-block; overflow:hidden; vertical-align:bottom; line-height:1.2}
body[data-page="home"] .hd-lr .lr__in{display:inline-block}
html.mo body[data-page="home"] .hd-lr .lr__in{transform:translateY(1.3em);
  transition:transform 1.2s cubic-bezier(.25,1,.5,1); transition-delay:calc(var(--d,0ms) + var(--w,0)*var(--st,50ms))}
html.mo body[data-page="home"] .home-decl.is-in .hd-lr .lr__in{transform:none}

body[data-page="home"] .hd-rot{position:relative; display:inline-block}
body[data-page="home"] .hd-rot__w{display:block; overflow:hidden; line-height:1.2}
body[data-page="home"] .hd-rot__w:not(.is-on){position:absolute; left:0; top:0; opacity:0; pointer-events:none}
body[data-page="home"] .hd-rot__up,body[data-page="home"] .hd-rot__t{display:block; white-space:nowrap}
html.mo body[data-page="home"] .hd-rot__w,
html.mo body[data-page="home"] .hd-rot__t{transition:transform .8s cubic-bezier(.2,1,.3,1), opacity .8s cubic-bezier(.2,1,.3,1)}
html.mo body[data-page="home"] .hd-rot__w:not(.is-on){transform:translate3d(-100%,0,0)}
html.mo body[data-page="home"] .hd-rot__w:not(.is-on) .hd-rot__t{transform:translate3d(100%,0,0)}
html.mo body[data-page="home"] .hd-rot__w.is-on,
html.mo body[data-page="home"] .hd-rot__w.is-on .hd-rot__t{transition-delay:.4s; transform:none}
html.mo body[data-page="home"] .hd-rot__up{transform:translate3d(0,1.2em,0); transition:transform 1.2s cubic-bezier(.25,1,.5,1) .2s}
html.mo body[data-page="home"] .home-decl.is-in .hd-rot__up{transform:none}

/* 오른쪽 — 슬라이드 */
body[data-page="home"] .hd-car__track{position:absolute; inset:0; display:flex; touch-action:pan-y;
  transition:transform 1s cubic-bezier(.25,1,.5,1)}
body[data-page="home"] .hd-car__track.is-jump{transition:none}
body[data-page="home"] .hd-car__cell{position:relative; flex:0 0 100%; overflow:hidden; display:block; color:#fff}
body[data-page="home"] .hd-car.is-drag .hd-car__track{transition:none}
body[data-page="home"] .hd-car.is-drag .hd-car__cell{pointer-events:none}
body[data-page="home"] .home-decl__go{z-index:3; cursor:pointer; border:0; padding:0}
body[data-page="home"] .home-decl__go:hover,body[data-page="home"] .home-decl__go:focus-visible{background:rgba(255,255,255,.3)}
html.mo body[data-page="home"] .home-decl__card--photo{opacity:0; transform:translateY(100px);
  transition:transform .75s cubic-bezier(.215,.61,.355,1) .2s, opacity .75s cubic-bezier(.215,.61,.355,1) .2s}
html.mo body[data-page="home"] .home-decl.is-in .home-decl__card--photo{opacity:1; transform:none}
html.mo body[data-page="home"] .hd-car__cell img{transform:scale(1.45); transition:transform 8s cubic-bezier(.1,.2,.7,1)}
html.mo body[data-page="home"] .home-decl.is-in .hd-car__cell img{transform:none}
@keyframes hd-btt{from{opacity:0; transform:translate(0,10%)} to{opacity:1; transform:none}}
html.mo body[data-page="home"] .home-decl .home-decl__cap > *{opacity:0}
html.mo body[data-page="home"] .home-decl.is-in .home-decl__cap > *{opacity:1; animation:hd-btt .7s cubic-bezier(.175,.885,.32,1.275) .2s backwards}

/* ── '자주 찾으시는 치료' 고정 + '대표원장' 판이 떠올라 덮기 (2026-09-30) — koclub 특화 프로그램 → DOCTOR 실측 ──
   koclub: 프로그램 줄 position:sticky; top:0 · 다음 줄 흰 바탕 + 위 모서리 100px 둥글게, 스크롤하면 위로 올라와 덮음.
   우리는 헤더(74)가 고정이라 top 을 JS 가 계산한다: 섹션이 화면에 다 들어가면 헤더 바로 아래, 크면 아래끝이 화면 아래끝에 닿을 때 멈춤.
   고정은 .hm-stack(두 섹션 묶음) 안에서만 — 묶음이 끝나면 함께 올라간다. */
@media (min-width:1001px){
  body[data-page="home"] .hm-stack > .j-acc{position:sticky; top:var(--stk-top,0px); z-index:1}
  body[data-page="home"] .hm-stack > .j-dr{position:relative; z-index:2; border-radius:clamp(40px,5.21vw,100px) clamp(40px,5.21vw,100px) 0 0}
}
body[data-page="home"] .hd-car__cell img{-webkit-user-drag:none; user-select:none}

/* ── '자주 찾으시는 치료'가 온전히 보이는 구간 (2026-09-30, 사용자 "이게 제대로 보여야해 지금 안보여") ──
   1920×911 실측: 고정되는 순간 판 위끝이 879 → 곧바로 치료 이름 줄(823)을 덮어 온전히 보이는 스크롤이 56px 뿐이었다.
   koclub 은 고정 후 판이 카드에 닿기까지 약 400px(아래 여백 250 + 화면 밖 151). 같은 만큼 판 앞에 틈을 둔다.
   틈은 묶음 바탕 = j-acc 바탕색이라 고정된 섹션과 이어져 보이고, 판의 둥근 모서리 뒤도 같은 색이다. */
@media (min-width:1001px){
  body[data-page="home"] .hm-stack{background:var(--c-canvas)}
  body[data-page="home"] .hm-stack > .j-dr{margin-top:clamp(200px,38vh,420px)}
}

/* ── '자주 찾으시는 치료' 고정 화면을 koclub 비율로 (2026-09-30, 사용자 "지금도 답답한 느낌") ──
   koclub 1920×911 고정 순간: 헤더 숨김 · 제목 위 165 / 카드 353~711 / 캡션 아래 143 — 내용이 화면의 2/3, 위아래가 비슷하게 빈다.
   우리 헤더(74)는 계속 보이므로 헤더 아래 높이(100vh−74) 안에서 같은 비율:
   섹션 = 헤더 아래 화면 높이에 딱 맞춰 내용 가운데, 사진 줄 = 원래 크기(1920 557)와 '화면 높이 − 74 − 제목 140 − 위아래 여백 26vh' 중 작은 값.
   → 911: 줄 약 460, 위아래 각 약 118 / 1080: 줄 557 그대로, 위아래 각 약 154. 고정 top 은 app.js 가 계산해 74(헤더 바로 아래)가 된다.
   판이 올라오기 전 여유도 koclub(판이 캡션에 닿기까지 약 294px)에 맞춰 앞 블록의 38vh 를 줄인다. */
@media (min-width:1001px){
  body[data-page="home"] .hm-stack > .j-acc{box-sizing:border-box; min-height:calc(100vh - var(--header-h));
    display:flex; flex-direction:column; justify-content:center; padding-block:clamp(40px,6vh,80px)}
  body[data-page="home"] .hm-stack > .j-acc > .container{width:100%}
  body[data-page="home"] .hm-stack .j-acc__row{height:min(clamp(360px,29vw,560px), max(280px, calc(74vh - var(--header-h) - 140px)))}
  body[data-page="home"] .hm-stack > .j-dr{margin-top:clamp(120px,17vh,200px)}
}

/* ── '자주 찾으시는 치료' 아래 여백 더 (2026-09-30, 사용자 "밑에 여백이 더 필요한듯") ──
   위 블록은 위아래를 같게(911: 115/115) 두었는데, 위에는 헤더 74 가 더 있어 아래가 좁아 보였다.
   고정 화면에서 아래 여백을 위보다 크게: 여백 바닥값 위 6vh / 아래 14vh, 사진 줄 = 원래 크기와 '70vh − 헤더 − 제목 150' 중 작은 값.
   → 1920×911: 위 약 100 · 줄 414 · 아래 약 175 / 1920×1080: 위 약 120 · 줄 532 · 아래 약 205. */
@media (min-width:1001px){
  body[data-page="home"] .hm-stack > .j-acc{padding-block:6vh 14vh}
  body[data-page="home"] .hm-stack .j-acc__row{height:min(clamp(360px,29vw,560px), max(280px, calc(70vh - var(--header-h) - 150px)))}
}

/* ── '자주 찾으시는 치료'는 홈에서 가장 중요한 섹션 — 사진이 또렷하게 (2026-09-30, 사용자 "가장 중요해서 잘 보여야해") ──
   ① 전 칸에 깔던 회색 막(42%·첫 칸 28%) 때문에 밝은 사진이 뿌옇게 묻혔다 → 막을 걷고 글자 자리(아래 절반)에만 그라데이션.
      닫힌 칸만 옅은 막 20% 를 남겨 열린 칸과 구분한다(열린 칸 0%).
   ② 바로 위 블록이 아래 여백을 늘리려고 줄을 414 까지 줄였다 → 여백은 유지하되 줄을 다시 키운다.
      고정 화면 여백 바닥값 위 11vh / 아래 16.5vh, 줄 = 원래 크기와 '72.5vh − 헤더 − 제목 147' 중 작은 값.
      → 1920×911: 위 약 100 · 줄 약 440 · 아래 약 150 / 1920×1080: 줄 557(원래 크기) 그대로. */
body[data-page="home"] .j-acc__item::after{
  background:linear-gradient(180deg,rgba(35,42,38,0) 48%,rgba(35,42,38,.58) 100%) rgba(35,42,38,.2);
  transition:background-color .4s var(--ease-out)}
body[data-page="home"] .j-acc__item:first-child::after{background-color:rgba(35,42,38,0)}
body[data-page="home"] .j-acc__row:hover .j-acc__item::after,
body[data-page="home"] .j-acc__row:focus-within .j-acc__item::after{background-color:rgba(35,42,38,.2)}
body[data-page="home"] .j-acc__row .j-acc__item:hover::after,
body[data-page="home"] .j-acc__row .j-acc__item:focus-within::after{background-color:rgba(35,42,38,0)}
body[data-page="home"] .j-acc__label{text-shadow:0 2px 14px rgba(0,0,0,.28)}
@media (min-width:1001px){
  body[data-page="home"] .hm-stack > .j-acc{padding-block:11vh 16.5vh}
  body[data-page="home"] .hm-stack .j-acc__row{height:min(clamp(360px,29vw,560px), max(280px, calc(72.5vh - var(--header-h) - 157px)))}   /* 2026-10-06 영문 라벨이 돌아와 제목 블록이 커짐 147 → 157 */
}


/* ── 장식 영문 삭제 후 정리 (2026-09-30) ──
   홈 히어로: 영문 제목이 빠져 한국어 줄이 첫 줄이 됨 → 위 여백 제거(크기는 그대로 1920 58px / 390 28px 한 줄).
   의료진소개: 'Director' 자리가 빠져 이름 줄이 라벨 바로 아래로 → 라벨과 이름 사이 간격만 둔다. */
.hero h1 .kr:first-child{margin-block-start:0}
.dr2__k + .dr2__ko{margin-block-start:clamp(14px,1.25vw,24px)}

/* ── 전후사진 페이지 (before-after.html, 2026-09-30) — 레퍼런스 clyveps.rebeauty.website/ko/before-after ──
   머리: 밝은 그라데이션 · 알약 라벨 · 큰 제목(1920 56px) · 한 줄 설명 / 알약 분류 버튼(선택 = 진초록 채움)
   잠금 안내 띠(폭 960) / 카드: 베이지 판(모서리 24) 안에 치료명 · 사진 종류 알약 · 전|후 사진 + 아래 띠(전 흰색 · 후 초록),
   후 사진은 흐리게 잠금 → 누르면 열림 / 카드 아래 분류 칩 + 사례 번호. 사진을 키워 달라는 지시에 맞춰 2열(폭 1440). */
.bah{padding-block:calc(var(--header-h) + clamp(56px,6.8vw,130px)) clamp(56px,6.8vw,130px); text-align:center;
  background:linear-gradient(115deg,#f6f3ec 0%,#ebe7dc 42%,#c9d0c3 78%,#aab8ab 100%)}
.bah__pill{display:inline-block; margin:0; padding:10px 30px; border:1px solid rgba(35,42,38,.18); border-radius:999px;
  background:rgba(255,255,255,.55); font-size:clamp(14px,.94vw,18px); font-weight:700; letter-spacing:.18em; color:var(--c-violet-ink)}
.bah__t{margin:clamp(16px,1.3vw,24px) 0 0; font-size:clamp(34px,2.92vw,56px); font-weight:800; letter-spacing:-.03em;
  line-height:1.2; color:var(--c-violet-ink)}
.bah__s{margin:clamp(10px,.9vw,16px) 0 0; font-size:clamp(15px,1.04vw,20px); color:#555}
.j-bag{background:#fff}
.j-bag > .container{max-width:1472px; padding-inline:16px}
.j-bag__tabs{display:flex; flex-wrap:wrap; justify-content:center; gap:10px}
.j-bag__tab{padding:10px 24px; border:1px solid #d9d6cc; border-radius:999px; background:#fff; font:inherit;
  font-size:clamp(14px,.83vw,16px); font-weight:500; color:#444; cursor:pointer;
  transition:background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), border-color var(--dur-fast)}
.j-bag__tab:hover{border-color:var(--c-violet-deep); color:var(--c-violet-deep)}
.j-bag__tab.is-on{background:var(--c-violet-deep); border-color:var(--c-violet-deep); color:#fff; font-weight:700}
.j-bag__bar{display:flex; align-items:center; gap:16px; width:min(960px,100%); margin:clamp(28px,2.9vw,56px) auto 0;
  padding:18px 20px; border:1px solid #e5e1d6; border-radius:12px; background:#faf9f5}
.j-bag__bar[hidden]{display:none}
.j-bag__bar-ico{flex:0 0 36px; height:36px; border-radius:50%; background:var(--c-violet-deep); display:grid; place-items:center}
.j-bag__bar-ico .j-bag__ico{width:14px; height:17px}
.j-bag__bar-t{flex:1; min-width:0; display:grid; gap:4px}
.j-bag__bar-t b{font-size:15px; font-weight:700; color:#222}
.j-bag__bar-t span{font-size:13px; color:#777}
.j-bag__all{flex:none; padding:10px 20px; border:0; border-radius:999px; background:var(--c-violet-deep); font:inherit;
  font-size:14px; font-weight:600; color:#fff; cursor:pointer}
.j-bag__all:hover{background:var(--c-violet-ink)}
.j-bag__grid{list-style:none; margin:clamp(24px,1.56vw,30px) auto 0; padding:0; width:min(1440px,100%);
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(36px,2.6vw,50px) clamp(16px,1.67vw,32px)}
.j-bag__item[hidden]{display:none}
.j-bag__card{padding:clamp(24px,2vw,38px) clamp(20px,2.1vw,40px) clamp(24px,2.1vw,40px); border-radius:24px;
  background:#ebe7dc; text-align:center}
.j-bag__name{margin:0; font-size:clamp(20px,1.46vw,28px); font-weight:800; letter-spacing:-.03em; color:var(--c-violet-ink)}
.j-bag__kind{display:inline-block; margin:10px 0 0; padding:3px 16px; border:1px solid rgba(35,42,38,.45); border-radius:999px;
  font-size:clamp(13px,.78vw,15px); font-weight:600; color:#333}
.j-bag__pair{display:grid; grid-template-columns:1fr 1fr; gap:6px; margin-block-start:clamp(16px,1.35vw,26px)}
.j-bag__side{margin:0}
.j-bag__img{position:relative; display:block; aspect-ratio:3/2; overflow:hidden; background:#dcd7ca}
.j-bag__img img{width:100%; height:100%; object-fit:contain; display:block; transition:filter .5s var(--ease-out)}
.j-bag__side figcaption{padding:4px 6px; font-size:clamp(12px,.73vw,14px); font-weight:600; background:#fff; color:#333}
.j-bag__side--a figcaption{background:var(--c-violet-deep); color:#fff}
/* 잠금(JS 가 있을 때만): 후 사진을 흐리게, 위에 자물쇠 */
.j-bag.is-js .j-bag__side--a:not(.is-open) img{filter:blur(12px) saturate(.7) brightness(.85)}
.j-bag__lock{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
  border:0; background:rgba(35,42,38,.42); font:inherit; color:#fff; cursor:pointer; transition:opacity .35s var(--ease-out)}
.j-bag__lock[hidden]{display:none}
.j-bag__lock:hover{background:rgba(35,42,38,.34)}
.j-bag__lock b{font-size:clamp(13px,.83vw,16px); font-weight:600}
.j-bag__lock i{font-style:normal; font-size:clamp(11px,.68vw,13px); opacity:.8}
.j-bag__side--a.is-open .j-bag__lock{opacity:0; pointer-events:none}
.j-bag__ico{display:block; width:clamp(20px,1.35vw,26px); height:clamp(23px,1.56vw,30px);
  background:no-repeat center/100% url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 28' fill='none' stroke='%23fff' stroke-width='1.8'>\
<rect x='3' y='11' width='18' height='15' rx='2.5'/><path d='M7 11V7a5 5 0 0 1 10 0v4'/></svg>")}
.j-bag__meta{display:flex; align-items:center; gap:10px; margin:14px 0 0; font-size:clamp(15px,.94vw,18px); font-weight:700; color:#222}
.j-bag__chip{padding:5px 12px; border-radius:999px; background:#ebe7dc; font-size:13px; font-weight:600; color:#444}
.j-bag__more{display:block; margin:clamp(36px,3.1vw,60px) auto 0; padding:12px 40px; border:1px solid var(--c-violet-deep);
  border-radius:999px; background:#fff; font:inherit; font-size:15px; font-weight:600; color:var(--c-violet-deep); cursor:pointer}
.j-bag__more:hover{background:var(--c-violet-deep); color:#fff}
.j-bag__more[hidden]{display:none}
.j-bag__note{margin-block-start:20px; text-align:center; font-size:14px; color:var(--c-slate)}
.j-bag{padding-block-end:clamp(72px,7vw,134px)}
@media (max-width:760px){
  .j-bag__grid{grid-template-columns:1fr}
  .j-bag__bar{flex-wrap:wrap}
  .j-bag__all{width:100%}
  .j-bag__tab{padding:8px 16px}
}
@media (prefers-reduced-motion:reduce){ .j-bag__img img,.j-bag__lock{transition:none} }

/* ══════════════════════════════════════════════════════════════
   홈 글자 키우기 · 임팩트 · 중요 문구 그림자 (2026-09-30)
   사용자 "메인 페이지 폰트 키우고 임펙트있게, 중요한 내용들은 shadow".
   글자만 키운다 — 사진·섹션 여백은 그대로(09-29 "사이즈 너무 크잖아"로 줄인 값). 예외는 3)의 고정 화면 사진 줄 공식 하나.
   전부 body[data-page="home"] 스코프 — .j-h2 / .display-kr 등 원데이 MASTER 전역값은 그대로.
   그림자: 밝은 바탕 제목은 얕은 윤곽 + 넓게 퍼지는 것 두 겹, 사진 위 흰 글자는 히어로 기존 톤(rgba(35,42,38))을 더 진하게.
   본문 문단·16px 미만 글자에는 걸지 않는다. 선언 카드 .lr·.hd-rot__w 는 잘림 창이라 그 안 글자에도 걸지 않는다.
   ══════════════════════════════════════════════════════════════ */

/* ── 1) 섹션 제목: 42/700 → 60/800 → 72/800 (2026-10-02 사용자 "메인 제목이 임팩트 없어 보여") (1366 약 58 · 390 36) ──
   줄 높이 1.2 → 1.15, 자간 -.035 → -.04em 로 더 단단하게. 3)의 고정 화면 공식이 이 크기·줄 높이를 쓴다 — 바꾸면 같이 고칠 것. */
body[data-page="home"] .j-h2,
body[data-page="home"] .display-kr{font-size:clamp(30px,calc(23.6px + 2.157vw),65px); font-weight:700; line-height:1.15;
  letter-spacing:-.04em; text-wrap:balance}   /* 2026-10-06 견본처럼 700 · 그림자 없음(사용자 결정) */
/* 2026-10-06 병원 "글씨크기는 살짝 줄여야" → 폰·PC 모두 약 10%: 72 → 65(1920) · 58 → 53(1366) · 36 → 32(390). 3)의 고정 화면 공식이 이 값을 쓴다 */
/* 어두운 숏츠 바탕 — 흰 제목은 대비가 충분하고 그림자는 후광처럼 보여 뺀다 */
body[data-page="home"] .j-yt .j-h2{text-shadow:none}
/* 1-2) 섹션 제목 왼쪽 정렬 (2026-10-02 사용자 "메인 제목이 가운데도 있고 왼쪽에도 있어서") — 가운데였던 닥터스 칼럼·병원 둘러보기도 왼쪽.
   제목 왼쪽 끝 = 바로 아래 내용의 왼쪽 끝: 칼럼 카드 목록(1600) · 둘러보기 사진(1400) · 전후사진 카드 창(1684). 자주 찾는 치료·숏츠는 원래 맞음.
   병원 둘러보기 머리 라벨('— 공간')은 사용자 지시로 뺐다(build.py _head 의 eyebrow 빈 값). */
body[data-page="home"] .j-press__head{text-align:left; width:min(1600px,100%); margin-inline:auto}
body[data-page="home"] .j-press__head .j-ans{max-width:none; margin-inline:0}
body[data-page="home"] .gal-sec .section-head--center{text-align:left; place-items:start; max-width:none; margin-inline:0}
body[data-page="home"] .gal-sec .section-head--center .section-head__body{align-items:flex-start}
body[data-page="home"] .j-bal__head{max-width:none; width:min(1684px, 100% - 32px); padding-inline:0}

/* ── 2) 히어로 — 영문 제목이 빠져 한글 병원명이 유일한 큰 글자: 58/700 → 82/800 (1366 약 74 · 390 약 40 한 줄) ──
   섹션 제목(60) 대비 1.37배, 390 에서도 40 대 34 로 위계를 유지한다. 10vw 상한은 좁은 폰(300~320)에서 한 줄을 지키는 값. 두 번째 사진은 흰 치아 위에 글자가 걸려 그림자를 기존보다 진하게. */
body[data-page="home"] .hero h1{text-shadow:0 1px 3px rgba(35,42,38,.40), 0 2px 12px rgba(35,42,38,.40), 0 4px 34px rgba(35,42,38,.50)}
body[data-page="home"] .hero h1 .kr{font-size:clamp(28px,min(calc(26.4px + 3.48vw),10vw),82px); font-weight:700; letter-spacing:-.035em}   /* 2026-10-06 견본 700 */
body[data-page="home"] .hero-sub{font-size:clamp(16.5px,1.75vw,21px);
  text-shadow:0 1px 3px rgba(35,42,38,.30), 0 2px 24px rgba(35,42,38,.45)}
body[data-page="home"] .hero-facts{font-size:17px; text-shadow:0 1px 3px rgba(35,42,38,.30), 0 2px 20px rgba(35,42,38,.40)}
body[data-page="home"] .hero-actions .btn{font-size:16.5px}
/* 주 CTA 는 사진 위에서 떠 보이게, 보조 버튼은 밝은 치아 위 흰 글자라 그림자만 */
body[data-page="home"] .hero-actions .btn--solid{box-shadow:0 2px 6px rgba(35,42,38,.20), 0 16px 36px -12px rgba(35,42,38,.60)}
body[data-page="home"] .hero-actions .btn--ghost{text-shadow:0 1px 3px rgba(35,42,38,.35), 0 2px 18px rgba(35,42,38,.45)}
@media (max-width:640px){
  /* 부제(16.5)보다 가볍게 15px · 가운뎃점에서 끊기게 폭을 준다(balance 만 쓰면 둘째 줄이 '·'로 시작) */
  body[data-page="home"] .hero-facts{font-size:15px; max-width:16.5em;
    text-shadow:0 1px 2px rgba(35,42,38,.30), 0 2px 18px rgba(35,42,38,.40)}
}

/* ── 3) 자주 찾으시는 치료 — 사진 위 진료명 28 → 32, 그림자 두 겹 ──
   닫힌 칸 폭(1920 약 180 · 1366 약 167) 안에 '사랑니 발치'가 들어가는 크기까지만. '자세히 보기'는 901~953 에서 칸을 넘지 않게 clamp. */
body[data-page="home"] .j-acc__label{font-size:clamp(18px,1.67vw,32px);
  text-shadow:0 1px 3px rgba(0,0,0,.28), 0 4px 26px rgba(35,42,38,.50)}
body[data-page="home"] .j-acc__label em{font-size:clamp(13px,.76vw,14.5px)}
@media (max-width:900px){
  body[data-page="home"] .j-acc__label{font-size:19px}
  body[data-page="home"] .j-acc__label em{font-size:12px}
}
/* 고정 화면 사진 줄 공식의 147px 는 제목 블록 높이(옛 영문 라벨 + 제목 + 아래 간격)였다.
   영문 라벨이 빠지고 제목이 커졌으므로 새 제목 블록(1.2 × 제목 크기 + 아래 간격)으로 다시 계산 → 1920×911 제목 위 약 100 · 줄 아래 약 150.
   높이 850 미만 화면(노트북 1366×768 · 1280×720)은 예전 공식 그대로 두어 사진이 커지지 않게 한다. */
@media (min-width:1001px) and (min-height:850px){
  body[data-page="home"] .hm-stack .j-acc__head .j-h2{margin-block-start:0}
  body[data-page="home"] .hm-stack .j-acc__row{height:min(clamp(360px,29vw,560px),
    max(280px, calc(72.5vh - var(--header-h) - clamp(22px,2.4vw,36px) - 1.15 * clamp(30px,calc(23.6px + 2.157vw),65px) - 41px)))}   /* 제목 크기·줄 높이 = 1), 41 = 2026-10-06 되살린 영문 라벨 한 줄(22 × 1.75 = 38.5, 반올림 여유 포함) */
}

/* ── 4) 대표원장 — 선언 80 → 84(가운데 칸 620 안에서 '직접 진행합니다' 한 줄 유지), 자격 문구 18 → 20 ──
   한글은 명조 폴백(굵기 500)이라 획이 가늘다 → 그림자는 작게. */
body[data-page="home"] .j-dr__t{font-size:clamp(34px,3.95vw,76px); letter-spacing:-.03em}   /* 그림자는 2026-10-06 견본처럼 뺌. 같은 날 "살짝 작게" 84 → 76 · 폰 38 → 34 */
body[data-page="home"] .j-dr__k{font-size:clamp(16px,1.04vw,20px); text-wrap:balance}   /* 360 이하에서 '(통합치의학과)'만 떨어지지 않게 */
body[data-page="home"] .j-dr__more{font-size:16.5px}

/* ── 5) 방송 자문 — 부제·카드 글자 키우고, 카드는 평상시에도 그림자로 띄운다(카드 폭·줄 수 제한 그대로) ── */
body[data-page="home"] .j-press .j-ans{font-size:clamp(18px,1vw,19px); text-wrap:balance}   /* 2026-10-06 살짝 작게 21 → 19 · 폰 20 → 18 */
body[data-page="home"] .j-press__ch{font-size:14px}
body[data-page="home"] .j-press__date{font-size:clamp(15px,.91vw,17.5px)}
body[data-page="home"] .j-press__title{font-size:clamp(19.5px,1.2vw,23px); text-wrap:balance}
body[data-page="home"] .j-press__ex{font-size:clamp(15.5px,.94vw,18px); text-wrap:pretty}   /* 마지막 줄에 한 단어만 남지 않게 */
body[data-page="home"] .j-press__foot{font-size:clamp(15px,.91vw,17.5px)}
/* 901~1000 은 3열 카드가 가장 좁아 요약이 3줄 제한에 걸린다 → 이 구간만 예전 크기 */
@media (min-width:901px) and (max-width:1000px){
  body[data-page="home"] .j-press__ex{font-size:14px; letter-spacing:-.03em}
}
body[data-page="home"] .j-press__card{box-shadow:0 1px 2px rgba(35,42,38,.06), 0 18px 40px -26px rgba(35,42,38,.40)}
body[data-page="home"] .j-press__card:hover,
body[data-page="home"] .j-press__card:focus-visible{box-shadow:0 2px 4px rgba(35,42,38,.06), 0 28px 52px -24px rgba(35,42,38,.48)}

/* ── 6) 숏츠 — 보기 링크·영상 제목(2줄 제한에서 잘리지 않는 크기까지) ── */
body[data-page="home"] .j-yt__more{font-size:17.5px}
body[data-page="home"] .j-yt__t{font-size:clamp(13px,.81vw,15.5px); text-wrap:balance}

/* ── 7) 전후사진 — 치료명·캡션 키우고, 사진 카드는 아래로만 퍼지는 그림자(창 overflow 에 옆이 잘리지 않게) ── */
body[data-page="home"] .j-bal__more{font-size:17.5px}
body[data-page="home"] .j-bal__name{font-size:clamp(15.5px,1.15vw,20px)}
body[data-page="home"] .j-bal__side figcaption{font-size:clamp(12px,.81vw,15.5px)}
body[data-page="home"] .j-bal__lock{font-size:clamp(13px,.9vw,16.5px)}
body[data-page="home"] .j-bal .ba-note{font-size:15.5px; text-wrap:balance}
body[data-page="home"] .j-bal__pair{box-shadow:0 12px 18px -14px rgba(35,42,38,.45)}

/* ── 8) 병원 둘러보기 — 부제 18 → 20 ── */
body[data-page="home"] .gal-sec .body-lg{font-size:18px; text-wrap:balance}   /* 2026-10-06 살짝 작게 20 → 18 */

/* ── 9) 선언 카드 — 글자 크기만(줄 높이 1.2·모션 값 그대로). 마지막 줄(노력합니다/연구합니다)은 700 ── */
body[data-page="home"] .home-decl__big{font-size:clamp(27px,3.33vw,64px)}   /* 2026-10-06 명조로 바뀌어 같은 폭이 되게 76 → 64(글자 폭 약 1.18배) */
body[data-page="home"] .home-decl__last{font-weight:700}
body[data-page="home"] .home-decl__no{font-size:clamp(13px,.86vw,16.5px)}
/* 사진 캡션 제목 — 가장 긴 줄이 캡션 폭 안에, 02 캡션 끝이 다음 화살표와 떨어지는 크기 */
body[data-page="home"] .home-decl__t{font-size:clamp(22px,2.85vw,55px);
  text-shadow:0 2px 4px rgba(0,0,0,.25), 0 4px 30px rgba(35,42,38,.45)}
body[data-page="home"] .home-decl__s{font-size:clamp(13px,1.1vw,21px); font-weight:400; text-wrap:balance}
@media (max-width:900px){
  body[data-page="home"] .home-decl__big{font-size:clamp(25px,6.7vw,26px)}   /* 390 카드 335 안에서 첫 줄 한 줄(명조 2026-10-06: 31 → 26) */
  body[data-page="home"] .home-decl__t{font-size:24px}                 /* 390 은 캡션 폭 281 에 꽉 차 기존값 */
  body[data-page="home"] .home-decl__s{font-size:14px}
}
/* 초소형 폰(≤340, 폴드 커버 화면 등) — 올린 최소값 때문에 줄이 늘지 않게 기존 크기로 */
@media (max-width:343px){ body[data-page="home"] .home-decl__big{font-size:6.7vw} }
@media (max-width:340px){
  body[data-page="home"] .j-press__ex{font-size:14px}
  body[data-page="home"] .j-dr__t{font-size:31px}   /* 2026-10-06 34 → 31(폰 전체를 줄이며 같이) */
}
/* ── 홈 글자 키우기 블록 끝 ── */

/* ── 병원 이름이 흐르는 띠 (2026-09-30) — 홈 대표원장 판 아래 빈 자리 ──
   사용자 레퍼런스 moonsdentalclinic.com(Salient nectar-scrolling-text) 실측값 그대로:
   글자 140/700 · 행간 .7 · 1440 이하 110 · 999 이하 80, 흰 바탕 위 아주 옅은 글자색, 덩어리마다 앞 .45em,
   덩어리 폭의 -20% → -120% 를 30초 linear 무한(왼쪽으로 흐름), 3덩어리.
   문구는 영문 병원명(사용자 "영어로 해야 해"), 서체는 레퍼런스와 같은 Montserrat 700(parts.py Google Fonts),
   색은 레퍼런스처럼 브랜드 색의 옅은 톤 — 녹색 --c-violet(81,114,100) 12%(사용자 "색이 다른 디자인 폰트로").
   행간 .7 이라 g·y 아래가 잘리지 않게 아래 여백을 더 둔다.
   2026-10-02 사용자 "이 폰트를 조금 더 고급스럽게" → Montserrat 700 대신 Cormorant Garamond 500(이미 쓰는 세리프),
   세리프는 x높이·획이 작아 글자 140→160(110→126, 80→92)·색 12→20% 로 올려 전과 비슷하게 보이게. */
.j-roll{overflow:hidden; margin-block-start:clamp(36px,3.6vw,64px); padding-block:.1em .24em; font-size:160px;
  pointer-events:none; user-select:none}
.j-roll__in{display:flex; white-space:nowrap; font-family:'Cormorant Garamond',serif; font-weight:500; letter-spacing:.01em;
  line-height:.7; color:rgba(81,114,100,.2)}
.j-roll__in > span{flex:none; padding-left:.45em; transform:translateX(-20%); animation:j-roll 30s linear infinite}
@keyframes j-roll{from{transform:translateX(-20%)} to{transform:translateX(-120%)}}
@media (max-width:1440px){ .j-roll{font-size:126px} }
@media (max-width:999px){ .j-roll{font-size:92px} }
@media (prefers-reduced-motion:reduce){ .j-roll__in > span{animation:none} }
/* ── 병원 이름 띠 끝 ── */

/* ── 2열 사진 카드 크기 (2026-09-30, 사용자 "사진들 커 작게해달라" — 충치치료 STEP 01~04 카드) ──
   .j-feature 컨테이너(1720)를 2열로 나눠 사진이 1920 에서 788×488 까지 커졌다.
   카드 비율값(--ratio:630/390)이 뜻하는 원래 크기 630×390 에 맞춰 2열 그리드 폭을 2×630 + 간격 28 = 1288 로 묶는다.
   같은 부품을 쓰는 충치·신경·사랑니·잇몸·장비 소개 5페이지 일괄(페이지마다 크기가 다르지 않게). */
.j-feats[style*="--cols:2"]{max-width:1288px; margin-inline:auto}
/* ── 2열 사진 카드 크기 끝 ── */

/* ══════════════════════════════════════════════════════════════
   충치치료 페이지 — moons 단계·치료법 (2026-09-30) — body[data-page="general-cavity"] 스코프
   사용자 moons 일반진료 캡처 3장을 옮긴다(생성기 _build/pages_general_sub.py _stages · _treats · gc-gum).
   moons 실측(1920): ① 충치 진행 단계 — 흰 바탕 4열, 카드 360×300 · 간격 30 · 모서리 24, 카드 왼쪽 위 번호 배지,
      카드 아래 가운데 제목 24/700, 점 목록 17px 행간 1.6
   ② 충치 치료법 — 옅은 바탕에 흰 카드 2×2 · 간격 30 · 모서리 20 · 안쪽 40, 왼쪽 사진 260×200 모서리 16,
      오른쪽 'Treatment 01' 15 · 치료명 28/700 + (영문) 17/400 · 점 목록
   ③ 잇몸치료란? — 부제 한 줄을 형광 띠로
   색은 우리 토큰(배지 --c-violet-deep · 점 --c-gold · 옅은 바탕 --c-mist · 형광 금색 20%).
   ══════════════════════════════════════════════════════════════ */
/* ① 단계 */
body[data-page="general-cavity"] .gc-stage{background:var(--c-paper)}
body[data-page="general-cavity"] .gc-stage__list{list-style:none; margin:0 auto; padding:0; max-width:1530px;
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:30px}
body[data-page="general-cavity"] .gc-stage__card{position:relative; margin:0; aspect-ratio:6/5; overflow:hidden;
  border-radius:24px; border:1px solid var(--hairline-l); background:var(--c-cream)}
body[data-page="general-cavity"] .gc-stage__card img{width:100%; height:100%; object-fit:cover; display:block}
body[data-page="general-cavity"] .gc-stage__no{position:absolute; z-index:1; top:22px; left:28px; padding:2px 10px; border-radius:4px;
  background:var(--c-violet-deep); font-size:17px; font-weight:700; line-height:1.5; color:#fff}
body[data-page="general-cavity"] .gc-stage__t{margin:clamp(22px,2vw,36px) 0 0; text-align:center;
  font-size:clamp(20px,1.25vw,24px); font-weight:700; letter-spacing:-.02em; line-height:1.4; color:var(--c-violet-ink)}
/* 점 목록 — 단계·치료법 공용 */
body[data-page="general-cavity"] .gc-dots{list-style:none; margin:clamp(14px,1.1vw,20px) 0 0; padding:0; display:grid; gap:8px}
body[data-page="general-cavity"] .gc-dots li{position:relative; padding-left:20px; font-size:clamp(15.5px,.9vw,17px);
  line-height:1.6; color:var(--c-slate); word-break:keep-all}
body[data-page="general-cavity"] .gc-dots li::before{content:""; position:absolute; left:4px; top:.72em;
  width:5px; height:5px; border-radius:50%; background:var(--c-gold)}
@media (max-width:1100px){ body[data-page="general-cavity"] .gc-stage__list{grid-template-columns:repeat(2,minmax(0,1fr)); gap:36px 20px} }
@media (max-width:640px){ body[data-page="general-cavity"] .gc-stage__list{grid-template-columns:1fr} }
/* ② 치료법 */
body[data-page="general-cavity"] .gc-tx{background:var(--c-mist)}
body[data-page="general-cavity"] .gc-tx__grid{max-width:1530px; margin:0 auto;
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:30px}
body[data-page="general-cavity"] .gc-tx__card{display:grid; grid-template-columns:minmax(0,260px) minmax(0,1fr);
  gap:clamp(24px,2.6vw,50px); align-items:center; padding:clamp(24px,2.1vw,40px); background:#fff; border-radius:20px}
body[data-page="general-cavity"] .gc-tx__media{margin:0; aspect-ratio:260/200; overflow:hidden; border-radius:16px; background:var(--c-cream)}
body[data-page="general-cavity"] .gc-tx__media img{width:100%; height:100%; object-fit:cover; display:block}
body[data-page="general-cavity"] .gc-tx__k{margin:0; font-size:15px; color:var(--c-slate)}
body[data-page="general-cavity"] .gc-tx__t{margin:4px 0 0; font-size:clamp(22px,1.46vw,28px); font-weight:700;
  letter-spacing:-.02em; line-height:1.35; color:var(--c-violet-ink)}
body[data-page="general-cavity"] .gc-tx__t small{font-size:.6em; font-weight:400; letter-spacing:0; color:var(--c-graphite); white-space:nowrap}
@media (max-width:1100px){ body[data-page="general-cavity"] .gc-tx__grid{grid-template-columns:1fr; max-width:760px} }
@media (max-width:640px){ body[data-page="general-cavity"] .gc-tx__card{grid-template-columns:1fr} }
/* ③ 잇몸치료란? — 부제 형광 띠 */
body[data-page="general-cavity"] .gc-gum .j-ans{display:inline-block; padding:4px 10px; background:rgba(169,138,94,.2);
  font-size:clamp(18px,1.25vw,24px); font-weight:700; color:var(--c-violet-ink)}
body[data-page="general-cavity"] .gc-gum .j-prose b{font-weight:700; color:var(--c-graphite)}
/* ── 충치치료 페이지 moons 블록 끝 ── */

/* ── 충치치료 페이지 — 단계별 비교표 (2026-09-30, 사용자 "이건 다른 디자인으로") — 생성기 pages_general_sub._matrix ──
   화살표로 이은 3열 상자(j_diag) 대신: 단계 4개가 열, '느껴지는 증상' · '치료 방법'이 행.
   머리칸은 01 → 04 로 갈수록 진해져 진행을 보인다(--c-violet 14% · 32% · --c-violet · --c-violet-ink).
   넓은 화면: 한 격자(왼쪽 행 이름 열 + 단계 4열)에 li·dl 을 display:contents 로 풀어 행 높이를 맞춘다. dt 는 화면에서만 숨김.
   좁은 화면(≤900): 단계마다 카드, dt 가 행 이름을 단다. */
body[data-page="general-cavity"] .gc-mx{background:var(--c-cream)}
body[data-page="general-cavity"] .gc-mx__wrap{max-width:1290px; margin:0 auto; display:grid;
  grid-template-columns:minmax(120px,150px) repeat(4,minmax(0,1fr)); column-gap:12px}
body[data-page="general-cavity"] .gc-mx__lbls,
body[data-page="general-cavity"] .gc-mx__cols,
body[data-page="general-cavity"] .gc-mx__col,
body[data-page="general-cavity"] .gc-mx__dl{display:contents}
body[data-page="general-cavity"] .gc-mx__cols{list-style:none; margin:0; padding:0}
body[data-page="general-cavity"] .gc-mx__lbls span{grid-column:1; display:flex; align-items:center; gap:10px;
  font-size:15px; font-weight:700; letter-spacing:.02em; color:var(--c-slate)}
body[data-page="general-cavity"] .gc-mx__lbls span::before{content:""; width:14px; height:2px; background:var(--c-gold)}
body[data-page="general-cavity"] .gc-mx__lbls span:nth-child(1){grid-row:1}
body[data-page="general-cavity"] .gc-mx__lbls span:nth-child(2){grid-row:2}
body[data-page="general-cavity"] .gc-mx__lbls span:nth-child(3){grid-row:3}
body[data-page="general-cavity"] .gc-mx__col--1 > *, body[data-page="general-cavity"] .gc-mx__col--1 dd{grid-column:2}
body[data-page="general-cavity"] .gc-mx__col--2 > *, body[data-page="general-cavity"] .gc-mx__col--2 dd{grid-column:3}
body[data-page="general-cavity"] .gc-mx__col--3 > *, body[data-page="general-cavity"] .gc-mx__col--3 dd{grid-column:4}
body[data-page="general-cavity"] .gc-mx__col--4 > *, body[data-page="general-cavity"] .gc-mx__col--4 dd{grid-column:5}
/* 머리칸 — 진행할수록 진하게 */
body[data-page="general-cavity"] .gc-mx__h{grid-row:1; margin:0; padding:18px 22px; border-radius:16px 16px 0 0;
  font-size:clamp(18px,1.15vw,21px); font-weight:800; letter-spacing:-.02em; line-height:1.35; color:var(--c-violet-ink)}
body[data-page="general-cavity"] .gc-mx__no{display:block; margin-bottom:4px; font-size:13px; font-weight:700; letter-spacing:.08em; opacity:.75}
body[data-page="general-cavity"] .gc-mx__col--1 .gc-mx__h{background:rgba(81,114,100,.14)}
body[data-page="general-cavity"] .gc-mx__col--2 .gc-mx__h{background:rgba(81,114,100,.32)}
body[data-page="general-cavity"] .gc-mx__col--3 .gc-mx__h{background:var(--c-violet); color:#fff}
body[data-page="general-cavity"] .gc-mx__col--4 .gc-mx__h{background:var(--c-violet-ink); color:#fff}
/* 칸 */
body[data-page="general-cavity"] .gc-mx__dl dt{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
body[data-page="general-cavity"] .gc-mx__dl dd{margin:0; padding:20px 22px; background:#fff; word-break:keep-all}
body[data-page="general-cavity"] .gc-mx__sym{grid-row:2; font-size:16.5px; line-height:1.65; color:var(--c-slate)}
body[data-page="general-cavity"] .gc-mx__tx{grid-row:3; border-top:1px dashed var(--hairline-l); border-radius:0 0 16px 16px;
  font-size:17px; font-weight:700; line-height:1.55; color:var(--c-violet-deep); box-shadow:0 18px 30px -26px rgba(35,42,38,.35)}
@media (max-width:900px){
  body[data-page="general-cavity"] .gc-mx__wrap{display:block; max-width:640px}
  body[data-page="general-cavity"] .gc-mx__lbls{display:none}
  body[data-page="general-cavity"] .gc-mx__cols{display:grid; gap:14px}
  body[data-page="general-cavity"] .gc-mx__col{display:block; overflow:hidden; border-radius:16px; background:#fff;
    box-shadow:0 18px 30px -26px rgba(35,42,38,.35)}
  body[data-page="general-cavity"] .gc-mx__h{border-radius:0}
  body[data-page="general-cavity"] .gc-mx__dl{display:block; margin:0; padding:6px 22px 18px}
  body[data-page="general-cavity"] .gc-mx__dl dt{position:static; width:auto; height:auto; overflow:visible; clip:auto;
    margin-top:12px; font-size:13px; font-weight:700; color:var(--c-slate)}
  body[data-page="general-cavity"] .gc-mx__dl dd{padding:2px 0 0; background:none; border:0; box-shadow:none; border-radius:0}
}
/* ── 단계별 비교표 끝 ── */

/* ── 충치치료 페이지 — 잇몸질환 증상 · 진행과정 · 치료법 (2026-09-30) — 생성기 pages_general_sub._checks · _stages · _perio_tx ──
   사용자: 진녹색 잇몸 밴드를 날리고 moons '잇몸질환의 증상' · '진행과정'을 만들고, '치료법'은 좀 다른 디자인으로.
   ① 증상 — moons: 흐린 사진 바탕 위 가운데 흰 상자 700 폭 × 4, 체크 원 + 제목 + 한 줄.
      우리: 사진 대신 진녹색 바탕(없어진 진녹색 밴드 자리의 리듬을 잇는다), 상자·체크는 같은 구성.
   ② 진행과정 — 위 '충치 진행 단계'와 같은 카드(gc-stage)를 3열로(--n:3).
   ③ 치료법 — moons 는 열린 2단(번호 원 + 형광 제목). 우리는 치료마다 흰 카드: 왼쪽 세리프 큰 번호 · 치료명,
      오른쪽 '…이란?' 알약 태그 · 설명 · 정보 상자 2개 나란히(체크 목록). */
/* ① */
body[data-page="general-cavity"] .gc-chk{background:var(--c-violet-deep)}
body[data-page="general-cavity"] .gc-chk__list{list-style:none; margin:0 auto; padding:0; max-width:700px; display:grid; gap:22px}
body[data-page="general-cavity"] .gc-chk__item{padding:26px 30px; background:#fff; text-align:center}
body[data-page="general-cavity"] .gc-chk__t{display:inline-flex; align-items:center; gap:12px;
  font-size:clamp(18px,1.1vw,20px); font-weight:700; color:var(--c-violet-ink)}
body[data-page="general-cavity"] .gc-chk__t::before{content:""; flex:none; width:24px; height:24px; border-radius:50%;
  background:var(--c-violet-deep) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='M6.5 12.5l3.5 3.5 7.5-8'/></svg>") center/15px no-repeat}
body[data-page="general-cavity"] .gc-chk__item p{margin:8px 0 0; font-size:16.5px; line-height:1.6; color:var(--c-slate); word-break:keep-all}
/* ② 단계 카드 열 수 = 항목 수 */
body[data-page="general-cavity"] .gc-stage__list{grid-template-columns:repeat(var(--n,4),minmax(0,1fr));
  max-width:calc(var(--n,4) * 360px + (var(--n,4) - 1) * 30px)}
@media (max-width:1100px){ body[data-page="general-cavity"] .gc-stage__list{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:1100px) and (min-width:901px){ body[data-page="general-cavity"] .gc-stage__list[style*="--n:3"]{grid-template-columns:repeat(3,minmax(0,1fr)); gap:36px 20px} }
@media (max-width:900px){ body[data-page="general-cavity"] .gc-stage__list[style*="--n:3"]{grid-template-columns:1fr; max-width:480px} }
@media (max-width:640px){ body[data-page="general-cavity"] .gc-stage__list{grid-template-columns:1fr} }
/* ③ */
body[data-page="general-cavity"] .gc-ptx{background:var(--c-mist)}
body[data-page="general-cavity"] .gc-ptx__list{max-width:1290px; margin:0 auto; display:grid; gap:30px}
body[data-page="general-cavity"] .gc-ptx__card{display:grid; grid-template-columns:minmax(0,300px) minmax(0,1fr); gap:clamp(28px,3.2vw,64px);
  padding:clamp(28px,3vw,56px); background:#fff; border-radius:24px; box-shadow:0 30px 60px -44px rgba(35,42,38,.35)}
body[data-page="general-cavity"] .gc-ptx__side{padding-right:clamp(20px,2.4vw,44px); border-right:1px solid var(--hairline-l)}
body[data-page="general-cavity"] .gc-ptx__no{display:block; font-family:var(--serif); font-size:clamp(56px,4.4vw,84px); font-weight:600;
  line-height:1; font-variant-numeric:lining-nums; color:var(--c-gold-deep)}   /* 세리프 기본 옛 숫자는 01 이 'OI' 로 읽힌다 */
body[data-page="general-cavity"] .gc-ptx__t{margin:clamp(14px,1.3vw,24px) 0 0; font-size:clamp(28px,1.9vw,36px); font-weight:800;
  letter-spacing:-.03em; line-height:1.25; color:var(--c-violet-ink)}
body[data-page="general-cavity"] .gc-ptx__sub{margin:6px 0 0; font-size:17px; color:var(--c-slate)}
body[data-page="general-cavity"] .gc-ptx__q{display:inline-block; margin:0; padding:7px 16px; border-radius:999px;
  background:rgba(81,114,100,.12); font-size:clamp(17px,1.05vw,20px); font-weight:700; color:var(--c-violet-deep)}
body[data-page="general-cavity"] .gc-ptx__p{margin:18px 0 0; font-size:17px; line-height:1.85; color:var(--c-slate); word-break:keep-all}
body[data-page="general-cavity"] .gc-ptx__p b{font-weight:700; color:var(--c-graphite)}
body[data-page="general-cavity"] .gc-ptx__boxes{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; margin-top:26px}
body[data-page="general-cavity"] .gc-ptx__box{padding:22px 24px; border-radius:16px; background:var(--c-canvas)}
body[data-page="general-cavity"] .gc-ptx__bt{margin:0; font-size:16.5px; font-weight:700; color:var(--c-violet-ink)}
body[data-page="general-cavity"] .gc-ptx__ck{list-style:none; margin:12px 0 0; padding:0; display:grid; gap:8px}
body[data-page="general-cavity"] .gc-ptx__ck li{position:relative; padding-left:28px; font-size:16px; line-height:1.6; color:var(--c-slate); word-break:keep-all}
body[data-page="general-cavity"] .gc-ptx__ck li::before{content:""; position:absolute; left:0; top:.2em; width:18px; height:18px;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237c6442' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><path d='M7.5 12.5l3 3 6-6.5'/></svg>") center/contain no-repeat}
@media (max-width:900px){
  body[data-page="general-cavity"] .gc-ptx__card{grid-template-columns:1fr}
  body[data-page="general-cavity"] .gc-ptx__side{padding:0 0 20px; border-right:0; border-bottom:1px solid var(--hairline-l)}
  body[data-page="general-cavity"] .gc-ptx__boxes{grid-template-columns:1fr}
}
/* ── 잇몸질환 블록 끝 ── */

/* ── 사랑니 발치 (2026-09-30) — moons 사랑니발치 페이지 구성·비율, 색은 우리 토큰 ── (_build/pages_category_general.py WISDOM)
   소개 형광펜 한 줄 / '꼭 뽑아야 하나요?' 흐린 파노라마 큰 카드(모서리 60) / 발치과정 번호 사진 카드(모서리 40)
   / 주의사항: 왼쪽 번호+그룹명 · 오른쪽 번호 줄 목록(줄마다 밑줄). 새 섹션은 여백 정본에 없으니 여기서 여백을 준다. */
body[data-page="general-wisdom"] .j-intro .j-ans,body[data-page="general-endo"] .j-intro .j-ans{display:inline; padding:3px 10px; background:#f6e9c2; color:var(--c-violet-ink);
  -webkit-box-decoration-break:clone; box-decoration-break:clone; line-height:2}
.wz-sec{padding-block:clamp(56px,6vw,110px)}
.wz-center{text-align:center}
.wz-q{background:var(--c-canvas)}
.wz-q__card{position:relative; overflow:hidden; max-width:1530px; margin-inline:auto; text-align:center; isolation:isolate;
  padding:clamp(44px,5.2vw,100px) clamp(20px,4.2vw,80px); border-radius:clamp(28px,3.1vw,60px); background:#fff}
.wz-q__bg{position:absolute; inset:0; z-index:-1; width:100%; height:100%; object-fit:cover; opacity:.09; filter:grayscale(1)}
.wz-q__q{margin:0; font-size:clamp(18px,1.35vw,26px); font-weight:600; color:#333}
.wz-q__a{margin:clamp(10px,1vw,18px) 0 0}
.wz-q__a span{padding:2px 12px; background:rgba(83,120,104,.14); font-size:clamp(22px,1.77vw,34px); font-weight:700; line-height:1.7;
  letter-spacing:-.03em; color:var(--c-violet-deep); -webkit-box-decoration-break:clone; box-decoration-break:clone}
.wz-q__p{margin-block-start:clamp(18px,1.6vw,30px); display:grid; gap:6px}
.wz-q__p p{margin:0 auto; max-width:62ch; font-size:clamp(15px,.94vw,18px); line-height:1.75; color:#555}
.wz-q__types{margin:clamp(22px,2vw,36px) 0 0; font-size:clamp(17px,1.15vw,22px); font-weight:700; color:var(--c-violet-ink)}
.wz-q__risk{margin:6px 0 0; font-size:clamp(14px,.89vw,17px); color:#555}
.wz-q__lbl{margin:clamp(28px,2.4vw,44px) 0 0; font-size:clamp(15px,.94vw,18px); font-weight:700; color:var(--c-violet-deep)}
.wz-q__cases{list-style:none; margin:14px auto 0; padding:0; max-width:1100px;
  display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:12px; text-align:left}
.wz-q__cases li{padding:18px 16px; border-radius:16px; background:rgba(247,244,238,.92); border:1px solid rgba(35,42,38,.08)}
.wz-q__cases b{display:block; font-size:clamp(14px,.89vw,16px); font-weight:700; line-height:1.4; color:var(--c-violet-ink)}
.wz-q__cases span{display:block; margin-top:6px; font-size:13.5px; line-height:1.6; color:#555}
.wz-proc{background:#fff}
.wz-steps{list-style:none; margin:clamp(32px,3.1vw,60px) auto 0; padding:0; display:grid; justify-content:center;
  grid-template-columns:repeat(4,minmax(0,330px)); gap:clamp(16px,1.56vw,30px)}
.wz-step__ph{position:relative; margin:0; overflow:hidden; aspect-ratio:360/301; border-radius:clamp(20px,2.1vw,40px); background:var(--c-cream)}
.wz-step__ph img{width:100%; height:100%; object-fit:cover; display:block}
.wz-step__no{position:absolute; top:16px; left:16px; padding:2px 12px; border-radius:999px; background:#fff;
  font-size:13px; font-weight:700; color:var(--c-violet-ink)}
.wz-step__t{margin:22px 0 0; text-align:center; font-size:clamp(17px,1.15vw,22px); font-weight:700; color:var(--c-violet-ink)}
.wz-step__d{margin:10px auto 0; max-width:30ch; text-align:center; font-size:clamp(14px,.89vw,17px); line-height:1.7; color:#555}
.wz-proc .j-foot{margin-top:clamp(18px,1.6vw,28px)}
.wz-caution{background:var(--c-cream)}
.wz-cg{display:grid; grid-template-columns:minmax(0,300px) minmax(0,1fr); gap:clamp(20px,3vw,56px); max-width:1300px; margin:clamp(32px,3.1vw,60px) auto 0}
.wz-cg__label{display:flex; align-items:center; gap:12px; margin:0; align-self:start;
  font-size:clamp(20px,1.46vw,28px); font-weight:700; color:var(--c-violet-ink)}
.wz-cg__no{flex:none; display:grid; place-items:center; width:32px; height:32px; border-radius:50%; background:var(--c-violet-ink);
  font-size:13px; font-weight:700; color:#fff}
.wz-cg__lead{margin:0 0 8px; font-size:clamp(15px,.94vw,18px); line-height:1.7; color:#444}
.wz-cg__list{list-style:none; margin:0; padding:0}
.wz-cg__list li{display:flex; gap:18px; padding:15px 0; border-bottom:1px solid rgba(35,42,38,.14);
  font-size:clamp(15px,.94vw,18px); line-height:1.6; color:#333}
.wz-cg__list li span{flex:none; min-width:28px; font-weight:700; color:var(--c-violet-deep)}
@media (max-width:1100px){ .wz-q__cases{grid-template-columns:repeat(2,minmax(0,1fr))} .wz-steps{grid-template-columns:repeat(2,minmax(0,330px))} }
@media (max-width:640px){ .wz-q__cases,.wz-steps{grid-template-columns:minmax(0,1fr)} .wz-cg{grid-template-columns:1fr} }
/* 형태 4종 — 충치 페이지 '충치 진행 단계' 카드(gc-stage)와 같은 값: 4열 · 간격 30 · 사진 6:5 모서리 24 · 번호 배지 · 제목 가운데 · 금색 점 */
body[data-page="general-wisdom"] .wz-types{background:var(--c-paper)}
.wz-types__list{list-style:none; margin:clamp(28px,2.6vw,48px) auto 0; padding:0; max-width:1530px;
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:30px}
.wz-type__card{position:relative; margin:0; aspect-ratio:6/5; overflow:hidden; border-radius:24px;
  border:1px solid var(--hairline-l); background:var(--c-cream)}
.wz-type__card img{width:100%; height:100%; object-fit:cover; display:block}
.wz-type__no{position:absolute; z-index:1; top:22px; left:28px; padding:2px 10px; border-radius:4px;
  background:var(--c-violet-deep); font-size:17px; font-weight:700; line-height:1.5; color:#fff}
.wz-type__t{margin:clamp(22px,2vw,36px) 0 0; text-align:center;
  font-size:clamp(20px,1.25vw,24px); font-weight:700; letter-spacing:-.02em; line-height:1.4; color:var(--c-violet-ink)}
.wz-dots{list-style:none; margin:clamp(14px,1.1vw,20px) 0 0; padding:0; display:grid; gap:8px}
.wz-dots li{position:relative; padding-left:20px; font-size:clamp(15.5px,.9vw,17px); line-height:1.6; color:var(--c-slate); word-break:keep-all}
.wz-dots li::before{content:""; position:absolute; left:4px; top:.72em; width:5px; height:5px; border-radius:50%; background:var(--c-gold)}
@media (max-width:1100px){ .wz-types__list{grid-template-columns:repeat(2,minmax(0,1fr)); gap:36px 20px} }
@media (max-width:640px){ .wz-types__list{grid-template-columns:1fr} }
/* 신경치료(2026-09-30)도 같은 부품 — 과정 5단계 5열 · 카드 안 묶음 여러 개(설명 없는 항목) · 카드 아래 한 줄 */
.wz-steps--5{grid-template-columns:repeat(5,minmax(0,280px))}
.wz-proc .j-ans{margin-top:14px}
.wz-q__cases--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.wz-q__cases li:not(:has(span)){display:flex; align-items:center; min-height:64px}
.wz-q__foot{margin:clamp(22px,2vw,34px) auto 0; max-width:70ch; font-size:clamp(14px,.89vw,16px); line-height:1.7; color:#666}
@media (max-width:1100px){ .wz-steps--5{grid-template-columns:repeat(2,minmax(0,330px))} .wz-q__cases--4{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:640px){ .wz-steps--5,.wz-q__cases--4{grid-template-columns:minmax(0,1fr)} }
/* ── 사랑니 발치 블록 끝 ── */

/* ── 일반진료 6페이지 색 통일 (2026-09-30) — 원데이 임플란트(디자인 MASTER)의 역할별 색 ──
   사용자 "임플란트 중 색 잘 들어간 페이지에 맞춰". 임플란트 5페이지 공통 규칙:
   소개=베이지 · 경우/특징/치료법 카드=크림 · 강조 진녹=페이지당 1곳 · 원칙=베이지 · 진행과정=연회색 · 사례/유형 카드=흰 · 주의사항=크림 · FAQ/상담=베이지.
   색만 바꾼다(레이아웃·글자 그대로). 이미 규칙대로인 섹션(j-intro 베이지, j-cases 흰, j-notice 크림, j-faq/j-cta 베이지)은 적지 않았다. */
body[data-page="general-endo"] .wz-q,
body[data-page="general-wisdom"] .wz-q{background:var(--c-cream)}                     /* 꼭 ~하나요? = 경우 카드 */
body[data-page="general-endo"] .wz-proc,
body[data-page="general-wisdom"] .wz-proc{background:var(--c-mist)}                   /* 진행과정 */
body[data-page="general-wisdom"] .wz-types{background:var(--c-paper)}                 /* 유형 카드 */
body[data-page="general-endo"] .wz-caution,
body[data-page="general-wisdom"] .wz-caution{background:var(--c-cream)}               /* 주의사항 */
body[data-page="prosthetic"] .lm-flow,
body[data-page="prosthetic-tmj"] .lm-flow,
body[data-page="general-pediatric"] .lm-flow{background:var(--c-mist)}                /* 진행 순서 */
body[data-page="prosthetic"] .lm-numgrid,
body[data-page="prosthetic-tmj"] .lm-numgrid{background:var(--c-cream)}               /* 특징 */
body[data-page="general-pediatric"] .j-feature{background:var(--c-paper)}             /* 유치 충치의 특징(유형 카드) */
body[data-page="general-pediatric"] .j-benefits{background:var(--c-cream)}            /* 유치를 지켜야 하는 이유(경우 카드) */
body[data-page="general-cavity"] .gc-tx,
body[data-page="general-cavity"] .gc-ptx{background:var(--c-cream)}                   /* 충치·잇몸 치료법 카드 */
/* ── 일반진료 색 통일 블록 끝 ── */

/* ── 주의사항 크기 통일 (2026-09-30, 사용자 "이 부분도 동일한 크기로 — 모든 페이지") ──
   기준 = 원데이 임플란트(MASTER) j-notice: 목록 폭 = 컨테이너(1280) · 번호 42px · 글자 21px/1.6 · 줄 여백 24px 0 (1608~1611행).
   따로 줄여 두었던 라미네이트·라미네이트 재치료·미백(폭 1000 · 17px), 재수술·가이드 임플란트(줄 여백 18px 26px)를 되돌리고,
   신경치료·사랑니의 전/후 묶음(.wz-caution)도 같은 크기·같은 흰 상자 모양으로 맞춘다. */
body[data-page="laminate"] .j-numlist,body[data-page="laminate-redo"] .j-numlist,body[data-page="whitening"] .j-numlist{max-width:1420px}
body[data-page="laminate"] .j-numlist p,body[data-page="laminate-redo"] .j-numlist p,body[data-page="whitening"] .j-numlist p{font-size:21px; line-height:1.6}
body[data-page="implant-redo"] .j-numlist li,body[data-page="implant-guide"] .j-numlist li{padding:24px 0}
/* 전/후 묶음 — 묶음 이름을 위에, 목록은 MASTER 와 같은 흰 상자 */
.wz-caution .wz-cg{display:block; max-width:none; margin:clamp(32px,3.1vw,56px) 0 0}
.wz-caution .wz-cg__label{justify-content:center; margin:0 0 18px; font-size:clamp(20px,1.25vw,24px)}
.wz-caution .wz-cg__lead{margin:0 0 16px; text-align:center; font-size:17px; color:var(--c-slate)}
.wz-caution .wz-cg__list{background:#fff; border:1px solid var(--hairline-l); border-radius:6px; padding:16px 48px;
  box-shadow:0 24px 60px -40px rgba(35,42,38,.35)}
.wz-caution .wz-cg__list li{gap:26px; padding:24px 0; border-bottom:1px solid var(--hairline); font-size:21px; line-height:1.6; color:var(--c-graphite)}
.wz-caution .wz-cg__list li:last-child{border-bottom:0}
.wz-caution .wz-cg__list li span{flex:none; display:flex; align-items:center; justify-content:center; width:42px; height:42px; min-width:0;
  margin-top:1px; border-radius:2px; background:var(--c-violet-deep); font-size:22px; font-weight:800; color:#fff}
@media (max-width:640px){
  body[data-page="laminate"] .j-numlist p,body[data-page="laminate-redo"] .j-numlist p,body[data-page="whitening"] .j-numlist p{font-size:17px}
  body[data-page="implant-redo"] .j-numlist li,body[data-page="implant-guide"] .j-numlist li{padding:16px 0}
  body[data-page="implant-redo"] .j-numlist li p,body[data-page="implant-guide"] .j-numlist li p{font-size:17px}
  body[data-page="implant-redo"] .j-num,body[data-page="implant-guide"] .j-num{width:32px; height:32px; font-size:17px}
  .wz-caution .wz-cg__list{padding:8px 18px}
  .wz-caution .wz-cg__list li{gap:14px; padding:16px 0; font-size:17px}
  .wz-caution .wz-cg__list li span{width:32px; height:32px; font-size:17px}
}
/* ── 주의사항 크기 통일 블록 끝 ── */

/* ── 진행과정 단계 사진 (2026-09-30, 사용자 "제목이 비슷하면 모든 페이지 일괄적인 사진") ──
   lm-flow(가로 단계) 모든 페이지 공통 — 금색 선·점 아래에 단계 사진(4:3, 모서리 14) → 번호 → 단계명 → 설명.
   사진은 _build/step_photos.py 규칙이 단계 이름으로 고른다(상담·촬영·계획·모형·치료·수술·보철물·부착·검진). */
.lm-flow__ph{margin:0 0 10px; aspect-ratio:4/3; overflow:hidden; border-radius:14px; background:var(--c-cream)}
.lm-flow__ph img{width:100%; height:100%; object-fit:cover; display:block}
@media (max-width:640px){ .lm-flow__ph{border-radius:10px; margin-bottom:6px} }
/* ── 진행과정 단계 사진 블록 끝 ── */

/* ══ 주의사항 비교 뷰 (2026-09-30, 사용자 "이걸 비교 뷰 만들어줘 제대로 디자인 넣어서") — 생성기 sections_wz.wz_compare ══
   사랑니 '발치 전 / 발치 후' 두 묶음을 나란히: 왼쪽 흰 카드 · 가운데 금색 화살표 원(전 → 후) · 오른쪽 진녹 카드.
   시안 3개(좌우 분할 · 시간 흐름 · 편집형) 중 두 심사 모두 좌우 분할을 골랐고, 그 위에
   · 목록 크기는 '주의사항 크기 통일'(모든 페이지 같은 크기) 값: 글자 21/1.6 · 번호 42 사각 · 줄 여백 24 (≤640 17 · 32 · 16)
   · 11개(후)가 6개(전)의 두 배라 폭을 1 : 1.35 로 두고, 두 카드 높이 차이는 '전' 카드 아래 병원 실사진 칸이 채운다
   · 아이콘: 전 = 문진표(클립보드) · 후 = 방패 체크 / 바탕 = 주의사항 역할색 크림(일반진료 색 통일 규칙) */
.cmpv{background:var(--c-cream)}
.cmpv .cmpv-title{margin:0; text-align:center}
.cmpv-grid{position:relative; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.35fr); column-gap:28px;
  margin-block-start:clamp(32px,3.1vw,56px)}
.cmpv-panel{min-width:0; padding:clamp(28px,2.5vw,48px); border-radius:clamp(20px,1.6vw,30px)}
.cmpv-panel:first-of-type{background:var(--c-paper); box-shadow:0 30px 60px -44px rgba(35,42,38,.45)}
.cmpv-panel:last-of-type{--i:1; color:#fff;
  background:radial-gradient(110% 70% at 100% 0%,rgba(81,114,100,.6),rgba(81,114,100,0) 60%),var(--c-violet-deep);
  box-shadow:0 30px 60px -40px rgba(35,42,38,.6)}
/* 두 카드는 같은 높이(격자 stretch) — 짧은 '전' 카드는 목록 아래 사진 칸이 남는 높이를 채운다 */
.cmpv-panel:first-of-type{display:flex; flex-direction:column}
.cmpv-ph{flex:1 1 auto; min-height:220px; margin:28px 0 0; overflow:hidden; border-radius:clamp(12px,1vw,18px); background:var(--c-cream)}
.cmpv-ph img{display:block; width:100%; height:100%; object-fit:cover}
/* 머리 — 아이콘 원 + 묶음 이름 / 리드. 두 카드의 목록 시작선이 맞도록 최소 높이 */
.cmpv-head{display:grid; grid-template-columns:auto minmax(0,1fr); align-items:center; column-gap:16px;
  padding-block-end:clamp(18px,1.4vw,26px); border-block-end:1px solid var(--hairline-l)}
@media (min-width:1101px){ .cmpv-head{min-height:clamp(150px,8.6vw,166px); align-content:start} }
.cmpv-ico{width:clamp(48px,2.9vw,56px); height:clamp(48px,2.9vw,56px); border-radius:50%; display:grid; place-items:center;
  background:var(--c-mist); color:var(--c-violet-deep)}
.cmpv-ico::before{content:""; width:48%; height:48%; background:currentColor;
  -webkit-mask:var(--cmpv-ico) center/contain no-repeat; mask:var(--cmpv-ico) center/contain no-repeat}
.cmpv-panel:first-of-type .cmpv-ico{--cmpv-ico:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><rect x='5' y='4.5' width='14' height='16.5' rx='2'/><path d='M9 4.5V3.2h6v1.3'/><path d='M8.6 11.2l1.6 1.6 3-3'/><path d='M8.6 16.4h6.8'/></svg>")}
.cmpv-panel:last-of-type .cmpv-ico{--cmpv-ico:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M12 3.2l7 2.6v5.6c0 4.4-2.9 7.8-7 9.4-4.1-1.6-7-5-7-9.4V5.8z'/><path d='M8.8 12.2l2.2 2.2 4.3-4.4'/></svg>");
  background:rgba(255,255,255,.1); color:var(--c-cream)}
.cmpv-name{margin:0; font-size:clamp(22px,1.46vw,28px); font-weight:700; line-height:1.35; letter-spacing:-.02em; color:var(--c-violet-ink)}
.cmpv-lead{grid-column:1 / -1; margin:clamp(14px,1.1vw,20px) 0 0; font-size:17px; line-height:1.7; color:var(--c-slate); word-break:keep-all; text-wrap:pretty}
.cmpv-panel:last-of-type .cmpv-name{color:#fff}
.cmpv-panel:last-of-type .cmpv-lead{color:rgba(255,255,255,.86)}
.cmpv-panel:last-of-type .cmpv-head{border-color:rgba(255,255,255,.18)}
/* 목록 — 모든 주의사항과 같은 크기(글자 21 · 번호 42 사각 · 줄 여백 24) */
.cmpv-list{list-style:none; margin:0; padding:0}
.cmpv-list li{display:flex; align-items:flex-start; gap:22px; padding:24px 0; border-bottom:1px solid var(--hairline-l);
  font-size:21px; line-height:1.6; color:var(--c-graphite)}
.cmpv-list li:last-child{border-bottom:0; padding-bottom:0}
.cmpv-no{flex:none; display:flex; align-items:center; justify-content:center; width:42px; height:42px; margin-top:-2px;
  border-radius:2px; background:var(--c-violet-deep); font-size:22px; font-weight:800; line-height:1; color:#fff}
.cmpv-tx{min-width:0; word-break:keep-all; text-wrap:pretty}
.cmpv-nw{white-space:nowrap}
.cmpv-panel:last-of-type .cmpv-list li{border-color:rgba(255,255,255,.16); color:rgba(255,255,255,.95)}
.cmpv-panel:last-of-type .cmpv-no{background:var(--c-cream); color:var(--c-violet-ink)}
/* 가운데 금색 화살표 원 — 두 카드 사이 틈 한가운데, 왼쪽 카드 머리 높이에 */
.cmpv-link{position:absolute; z-index:1; top:clamp(52px,4.4vw,84px);
  left:calc((100% - 28px) / 2.35 + 14px); translate:-50% 0;
  width:clamp(52px,3.4vw,64px); height:clamp(52px,3.4vw,64px); border-radius:50%; background:var(--c-gold);
  box-shadow:0 0 0 8px var(--c-cream),0 16px 28px -12px rgba(35,42,38,.5)}
.cmpv-link::before{content:""; position:absolute; inset:0; margin:auto; width:44%; height:44%; background:#fff;
  -webkit-mask:var(--cmpv-arrow) center/contain no-repeat; mask:var(--cmpv-arrow) center/contain no-repeat;
  --cmpv-arrow:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M4 12h16M13 5l7 7-7 7'/></svg>")}
/* 태블릿 이하 — 위아래로 쌓고, 원은 두 카드 사이에 걸쳐 아래 화살표 */
@media (max-width:1100px){
  .cmpv-grid{grid-template-columns:minmax(0,1fr); row-gap:14px; max-width:820px; margin-inline:auto}
  .cmpv-ph{flex:none; min-height:0; aspect-ratio:16/9}
  .cmpv-link{position:relative; top:auto; left:auto; translate:none; justify-self:center; margin-block:-40px; z-index:2}
  .cmpv-link::before{rotate:90deg}
}
@media (max-width:640px){
  .cmpv-panel{padding:24px 18px 20px}
  .cmpv-head{column-gap:14px}
  .cmpv-list li{gap:14px; padding:16px 0; font-size:17px}
  .cmpv-no{width:32px; height:32px; font-size:17px; margin-top:0}
}
/* ── 주의사항 비교 뷰 끝 ── */

/* ── 진행과정 · 사진 카드 가운데 정렬 (2026-09-30, 사용자 "사진을 키우고 위에 줄을 삭제, 모든 페이지 가운데 맞춤") ──
   ① 진행과정(lm-flow, 7페이지): 금색 줄·점 삭제 → 사랑니 과정 카드와 같은 크기(297px)의 사진 카드, 가운데 정렬.
      한 줄 최대 4장(4 × 297 + 간격 30 = 1278), 5·6단계는 한 줄 3장(3+2 · 3+3), 남는 줄도 가운데.
   ② 사진 설명 카드(j-feat — 장비·소아·잇몸성형·재수술·전체 임플란트 등): 제목·설명 가운데.
   긴 문단(주의사항·특징·FAQ)과 사진 옆 소개 글은 왼쪽 정렬 그대로. */
main .lm-flow .lm-flow__list{display:flex; flex-wrap:wrap; justify-content:center; gap:44px 30px; max-width:1278px; margin-inline:auto}
main .lm-flow .lm-flow__list[style*="--n:5"],main .lm-flow .lm-flow__list[style*="--n:6"]{max-width:951px}
main .lm-flow .lm-flow__step{flex:0 0 297px; max-width:100%; padding:0; border-top:0; align-items:center; text-align:center}
main .lm-flow .lm-flow__step::before{display:none}
main .lm-flow .lm-flow__ph{width:100%; margin:0 0 16px; border-radius:clamp(16px,1.6vw,24px)}
main .lm-flow .lm-flow__t{margin-block-start:4px}
.j-feat figcaption{text-align:center}
@media (max-width:640px){
  main .lm-flow .lm-flow__list{gap:28px 16px}
  main .lm-flow .lm-flow__step{flex:0 0 calc(50% - 8px)}
  main .lm-flow .lm-flow__ph{margin-bottom:10px}
}
/* ── 진행과정 가운데 정렬 블록 끝 ── */

/* ── 사랑니 발치 주의사항 — 세 단계 카드 (2026-09-30, 사용자 "이거 디자인 다시해줘") ── (sections_wz.wz_stages)
   발치 전 → 발치 당일 → 회복 기간. 같은 모양의 흰 카드 3장(각 6항목) · 카드 사이 금색 화살표 · 바탕 크림(주의사항 색 규칙).
   머리: 아이콘 원 · 금색 번호 · 단계 이름 · 한 줄 / 목록: 주의사항 MASTER 와 같은 진녹 사각 번호. */
.wzs{background:var(--c-cream)}
.wzs-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(28px,3vw,56px); max-width:1400px;
  margin:clamp(32px,3.1vw,56px) auto 0; align-items:stretch}
.wzs-card{position:relative; display:flex; flex-direction:column; background:#fff; border:1px solid var(--hairline-l);
  border-radius:20px; box-shadow:0 24px 60px -40px rgba(35,42,38,.35)}
.wzs-card + .wzs-card::before{content:""; position:absolute; top:74px; left:calc(-1 * clamp(28px,3vw,56px) / 2 - 11px);
  width:22px; height:22px; border-radius:50%; background:var(--c-gold);
  -webkit-mask:no-repeat center/12px url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path d='M4 2l4 4-4 4' fill='none' stroke='black' stroke-width='2'/></svg>"),linear-gradient(#000,#000);
  -webkit-mask-composite:xor; mask-composite:exclude}
.wzs-card__head{padding:clamp(26px,2.2vw,36px) clamp(22px,2vw,32px) clamp(20px,1.6vw,26px); text-align:center; border-bottom:1px solid var(--hairline-l)}
.wzs-card__ico{display:inline-flex; align-items:center; justify-content:center; width:56px; height:56px; border-radius:50%;
  background:var(--c-canvas); color:var(--c-violet-deep)}
.wzs-card__ico svg{width:28px; height:28px}
.wzs-card__no{margin:14px 0 0; font-family:var(--serif); font-size:20px; font-weight:600; letter-spacing:.06em; line-height:1; color:var(--c-gold)}
.wzs-card__t{margin:8px 0 0; font-size:clamp(22px,1.46vw,28px); font-weight:700; letter-spacing:-.02em; color:var(--c-violet-ink)}
.wzs-card__lead{margin:10px auto 0; max-width:30ch; min-height:calc(1.6em * 3); font-size:15.5px; line-height:1.6; color:var(--c-slate)}   /* 세 카드 목록 시작선을 맞춘다 */
.wzs-card__list{list-style:none; margin:0; padding:8px clamp(22px,2vw,32px) 16px; flex:1}
.wzs-card__list li{display:flex; align-items:flex-start; gap:14px; padding:16px 0; border-bottom:1px solid var(--hairline)}
.wzs-card__list li:last-child{border-bottom:0}
.wzs-card__list li span{flex:none; display:flex; align-items:center; justify-content:center; width:30px; height:30px; margin-top:1px;
  border-radius:2px; background:var(--c-violet-deep); font-size:15px; font-weight:800; color:#fff}
.wzs-card__list li p{margin:0; font-size:clamp(16px,.94vw,18px); line-height:1.6; color:var(--c-graphite); word-break:keep-all}
@media (max-width:1100px){
  .wzs-grid{grid-template-columns:1fr; max-width:680px}
  .wzs-card__lead{min-height:0}
  .wzs-card + .wzs-card::before{top:calc(-1 * clamp(28px,3vw,56px) / 2 - 11px); left:calc(50% - 11px); transform:rotate(90deg)}
}
@media (max-width:640px){ .wzs-card__list li p{font-size:16px} }
/* ── 사랑니 발치 주의사항 세 단계 끝 ── */

/* ── 강조 밴드 배경 사진 (2026-09-30 사용자 "다른 페이지들은 너무 밋밋해 보여") — 충치 '잇몸질환의 증상' 진녹 밴드 뒤에 옅은 진료실 사진 ── */
.gc-chk--photo{position:relative; isolation:isolate; overflow:hidden}
.gc-chk__bg{position:absolute; inset:0; z-index:-1}
.gc-chk__bg img{width:100%; height:100%; object-fit:cover; filter:saturate(.5)}
.gc-chk__bg::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(63,95,85,.88), rgba(63,95,85,.94))}
/* ── 강조 밴드 배경 사진 끝 ── */

/* ── 생성 이미지 각주 (2026-09-30) — 소개 사진 오른쪽 아래 작은 캡션 "이해를 돕기 위한 이미지입니다" ── */
.j-intro__media:has(.j-intro__note){position:relative}
.j-intro__media .j-intro__note{position:absolute; right:14px; bottom:12px; margin:0; padding:4px 10px; border-radius:4px;
  background:rgba(35,42,38,.5); color:#fff; font-size:12px; line-height:1.4; letter-spacing:0; pointer-events:none}
@media (max-width:640px){ .j-intro__media .j-intro__note{right:10px; bottom:8px; font-size:11px} }
/* ── 생성 이미지 각주 끝 ── */

/* ── 사진 밴드 제목 균형 줄바꿈 (2026-10-01 사용자 "원데이와 동일하게") — 길어서 강제로 안 끊은 제목도 두 줄을 고르게 ── */
.j-who__head .j-h2{text-wrap:balance}

/* ── 전 페이지 글자·사진 키우기 (2026-10-01) ──────────────────────────────────────────────
   사용자: "모든 페이지 가운데 정렬할 부분은 해주고 안 해야 할 부분은 두고, 사진들을 전체적으로 확인해서 키우고 눈에 잘 보이게,
   밑에 문구도 다 일관성 있게 폰트 키우고, 제목도 키우고" (홈 index 는 "좋아요" — 손대지 않음).
   · 범위: 홈·대표원장(about-doctor, 1mmps 실측값으로 맞춘 블록) 제외 전 페이지. 크기는 키우기만 하고 줄이지 않는다.
   · 글자 단계(데스크톱 1101↑ / 태블릿 641~1100 / 모바일 ~640):
       섹션 제목 52 / 32~46 / 32 · 카드 제목 26 / 23 / 21 · 사진 아래·카드 설명 18 / 17.5 / 17 · 각주 16 / 15.5 / 15 · 사진 라벨 16 / 15 / 14
   · 사진: 진행과정 카드(lm-flow · wz-steps)·충치 치료법·사랑니 유형·전후사진 갤러리를 1720 컨테이너로 넓혀 키움(비율·object-fit 그대로).
   · 가운데: 칼럼 목록 4장(3열에 1장 남던 것) → 2×2. 카드 안 점 목록·사진 옆 소개 글·긴 문단은 왼쪽 정렬 그대로.
   · 사진 위 작은 캡션(.j-intro__note)·주의사항 MASTER 목록·전후 사진 짝 크기는 건드리지 않는다. */

/* 1) 섹션 제목 */
@media (min-width:1101px){
  :root body:not([data-page="home"]):not([data-page="about-doctor"]) main .j-h2,
  :root body:not([data-page="home"]):not([data-page="about-doctor"]) main h2.display-kr{font-size:52px}
}
@media (min-width:641px) and (max-width:1100px){
  :root body:not([data-page="home"]):not([data-page="about-doctor"]) main .j-h2,
  :root body:not([data-page="home"]):not([data-page="about-doctor"]) main h2.display-kr{font-size:clamp(32px,2.2vw + 16px,46px)}
}
@media (max-width:640px){
  :root body:not([data-page="home"]):not([data-page="about-doctor"]) main .j-h2,
  :root body:not([data-page="home"]):not([data-page="about-doctor"]) main h2.display-kr{font-size:32px}
}

/* 2) 카드 제목 — 사진 아래 제목 · 단계 이름 · 유형 이름 (26 이상인 것은 그대로) */
@media (min-width:1101px){
  :root body:not([data-page="home"]):not([data-page="about-doctor"]) :is(.wz-step__t, .lm-flow__t, .lm-grid__t, .gc-stage__t, .wz-type__t, .sc-card__title, .j-split__t, .flow-body h3),
  :root body:not([data-page="home"]):not([data-page="about-doctor"]) .j-feat:not(.j-fsl__slide) figcaption b{font-size:26px}
  :root body:not([data-page="home"]):not([data-page="about-doctor"]) .info-card h3{font-size:20px}
}
@media (min-width:641px) and (max-width:1100px){
  :root body:not([data-page="home"]):not([data-page="about-doctor"]) :is(.wz-step__t, .lm-flow__t, .lm-grid__t, .gc-stage__t, .wz-type__t, .sc-card__title, .flow-body h3){font-size:23px}
  :root body:not([data-page="home"]):not([data-page="about-doctor"]):not([data-page="implant-full"]):not([data-page="implant-redo"]) .j-feat:not(.j-fsl__slide) figcaption b{font-size:23px}
  :root body:not([data-page="home"]):not([data-page="about-doctor"]) .info-card h3{font-size:19px}
}
@media (max-width:640px){
  :root body:not([data-page="home"]):not([data-page="about-doctor"]) :is(.wz-step__t, .lm-flow__t, .lm-grid__t, .gc-stage__t, .wz-type__t, .sc-card__title, .flow-body h3){font-size:21px}
  :root body:not([data-page="home"]):not([data-page="about-doctor"]):not([data-page="implant-full"]):not([data-page="implant-redo"]) .j-feat:not(.j-fsl__slide) figcaption b{font-size:21px}
  :root body:not([data-page="home"]):not([data-page="about-doctor"]) .info-card h3{font-size:18px}
}

/* 3) 설명 글 — 사진 아래 · 카드 안 · 목록 (18 / 17.5 / 17) */
@media (min-width:1101px){
  :root body:not([data-page="home"]):not([data-page="about-doctor"]) main :is(.j-prose p, .j-feat figcaption p, .wz-step__d, .lm-flow__s, .lm-grid__d p,
    .gc-dots li, .wz-dots li, .j-ben__desc, .gc-chk__item p, .gc-ptx__ck li, .gc-ptx__p, .j-ico p, .sc-list li, .j-checks li,
    .j-who__lead, .j-cr__lines p, .j-lead, .wz-cg__lead, .lm-case__result, .j-zz__det, .j-cs figcaption p, .flow-body p,
    .info-card p:not(.big), .hours-table dd, .wz-q__foot, .gc-ptx__bt, .wz-q__p p, .wz-q__risk, .wz-q__lbl){font-size:18px}
  :root body:not([data-page="home"]):not([data-page="about-doctor"]) main .gal-card figcaption p{font-size:16.5px}
  :root body:not([data-page="home"]):not([data-page="about-doctor"]) main .gal-name{font-size:18px}
  :root body:not([data-page="home"]):not([data-page="about-doctor"]) main .wz-q__cases b{font-size:17px}
  :root body:not([data-page="home"]):not([data-page="about-doctor"]) main .wz-q__cases span{font-size:15.5px}
  :root body[data-page="price"] main td{font-size:16.5px}
  :root body[data-page="about-visit"] main .item p{font-size:18px}
}
@media (min-width:641px) and (max-width:1100px){
  :root body:not([data-page="home"]):not([data-page="about-doctor"]) main :is(.j-prose p, .j-feat figcaption p, .wz-step__d, .lm-flow__s, .lm-grid__d p,
    .gc-dots li, .wz-dots li, .j-ben__desc, .gc-chk__item p, .gc-ptx__ck li, .gc-ptx__p, .j-ico p, .sc-list li, .j-checks li,
    .j-who__lead, .j-cr__lines p, .j-lead, .wz-cg__lead, .lm-case__result, .j-zz__det, .j-cs figcaption p, .flow-body p,
    .info-card p:not(.big), .hours-table dd, .wz-q__foot, .gc-ptx__bt, .wz-q__p p, .wz-q__risk){font-size:17.5px}
  :root body:not([data-page="home"]):not([data-page="about-doctor"]) main :is(.wz-q__lbl, .wz-q__cases b){font-size:16px}
  :root body:not([data-page="home"]):not([data-page="about-doctor"]) main .wz-q__cases span{font-size:15px}
  :root body:not([data-page="home"]):not([data-page="about-doctor"]) main .gal-card figcaption p{font-size:16px}
  :root body:not([data-page="home"]):not([data-page="about-doctor"]) main .gal-name{font-size:17.5px}
}
@media (max-width:640px){
  :root body:not([data-page="home"]):not([data-page="about-doctor"]) main :is(.j-prose p, .wz-step__d, .lm-grid__d p,
    .gc-dots li, .wz-dots li, .gc-chk__item p, .gc-ptx__ck li, .gc-ptx__p, .j-ico p, .sc-list li, .j-checks li,
    .j-who__lead, .wz-cg__lead, .lm-case__result, .j-zz__det, .j-cs figcaption p, .flow-body p,
    .info-card p:not(.big), .hours-table dd, .wz-q__foot, .gc-ptx__bt, .wz-q__p p, .wz-q__risk){font-size:17px}
  :root body:not([data-page="home"]):not([data-page="about-doctor"]) main :is(.wz-q__lbl, .wz-q__cases b){font-size:16px}
  :root body:not([data-page="home"]):not([data-page="about-doctor"]) main .wz-q__cases span{font-size:15px}
  :root body:not([data-page="home"]):not([data-page="about-doctor"]) main :is(.j-ben__desc, .j-feat figcaption p, .j-cr__lines p, .j-lead){font-size:17.5px}
  :root body:not([data-page="home"]):not([data-page="about-doctor"]) main .lm-flow__s{font-size:16px}   /* 모바일 2열 카드라 한 단계 작게 */
  :root body[data-page="about-visit"] main .item p{font-size:17px}
  :root body:not([data-page="home"]):not([data-page="about-doctor"]) main .gal-card figcaption p{font-size:15.5px}
  :root body:not([data-page="home"]):not([data-page="about-doctor"]) main .gal-name{font-size:17px}
}

/* 4) 각주 — 사진·목록 아래 '* …' (주의사항 아래 17 은 그대로, 사진 위 캡션 제외) */
@media (min-width:1101px){
  :root body:not([data-page="home"]):not([data-page="about-doctor"]) main :is(.j-foot, .ba-note, .j-cr__note, .j-bag__note, .j-who__foot, .j-bens__note, .j-proc__bar-note, .hours-note, .disclaimer):not(.j-notice .j-foot):not(.lm-chk .j-foot){font-size:16px}
}
@media (min-width:641px) and (max-width:1100px){
  :root body:not([data-page="home"]):not([data-page="about-doctor"]) main :is(.j-foot, .ba-note, .j-cr__note, .j-bag__note, .j-who__foot, .j-bens__note, .j-proc__bar-note, .hours-note, .disclaimer):not(.j-notice .j-foot):not(.lm-chk .j-foot){font-size:15.5px}
}
@media (max-width:640px){
  :root body:not([data-page="home"]):not([data-page="about-doctor"]) main :is(.j-foot, .ba-note, .j-cr__note, .j-bag__note, .j-who__foot, .j-bens__note, .j-proc__bar-note, .hours-note, .disclaimer):not(.j-notice .j-foot):not(.lm-chk .j-foot){font-size:15px}
}

/* 5) 사진 라벨 — Before/After · 치료 전/후 · Treatment 01 · 단계 번호 */
@media (min-width:641px){
  :root body:not([data-page="home"]):not([data-page="about-doctor"]) main :is(.ba-shot .lbl, .lm-pair__head, .gc-tx__k, .j-bag__side figcaption, .j-bag__kind, .j-cr__t, .j-cr__tags li){font-size:16px}
  :root body:not([data-page="home"]):not([data-page="about-doctor"]) main :is(.wz-step__no, .j-bag__chip, .flow-no){font-size:15px}
}
@media (max-width:640px){
  :root body:not([data-page="home"]):not([data-page="about-doctor"]) main :is(.ba-shot .lbl, .lm-pair__head, .gc-tx__k, .j-bag__side figcaption, .j-bag__kind, .j-cr__t, .j-cr__tags li, .wz-step__no, .j-bag__chip, .flow-no){font-size:15px}
}

/* 6) 사진 키우기 — 넓은 컨테이너(원데이 진행과정·장점과 같은 1720) */
@media (min-width:1101px){
  /* 진행과정 사진 카드: 한 줄 최대 4장(1608 안에서 약 380px), 5·6단계는 3장씩(3+2 · 3+3) 가운데 */
  :root body:not([data-page="home"]):not([data-page="about-doctor"]) :is(.lm-flow, .wz-proc) .container{max-width:1720px}
  :root body:not([data-page="home"]):not([data-page="about-doctor"]) main .lm-flow .lm-flow__list{max-width:1610px}
  :root body:not([data-page="home"]):not([data-page="about-doctor"]) main .lm-flow .lm-flow__step{flex:0 0 min(380px, calc((100% - 90px) / 4))}
  :root body:not([data-page="home"]):not([data-page="about-doctor"]) main .lm-flow .lm-flow__list:is([style*="--n:5"], [style*="--n:6"]){max-width:1200px}
  :root body:not([data-page="home"]):not([data-page="about-doctor"]) main .lm-flow .lm-flow__list:is([style*="--n:5"], [style*="--n:6"]) .lm-flow__step{flex-basis:min(380px, calc((100% - 60px) / 3))}
  :root body:not([data-page="home"]):not([data-page="about-doctor"]) .wz-steps{display:flex; flex-wrap:wrap; justify-content:center; gap:48px 30px; max-width:1610px}
  :root body:not([data-page="home"]):not([data-page="about-doctor"]) .wz-steps .wz-step{flex:0 0 min(380px, calc((100% - 90px) / 4))}
  :root body:not([data-page="home"]):not([data-page="about-doctor"]) .wz-steps--5{max-width:1200px}
  :root body:not([data-page="home"]):not([data-page="about-doctor"]) .wz-steps--5 .wz-step{flex-basis:min(380px, calc((100% - 60px) / 3))}
  :root body:not([data-page="home"]):not([data-page="about-doctor"]) .wz-step__d{max-width:32ch}
  /* 충치 치료법: 사진 260 → 340 (같은 260:200 비율) */
  :root body:not([data-page="home"]):not([data-page="about-doctor"]) .gc-tx .container{max-width:1720px}
  :root body:not([data-page="home"]):not([data-page="about-doctor"]) .gc-tx__grid{max-width:1610px}
  :root body:not([data-page="home"]):not([data-page="about-doctor"]) .gc-tx__card{grid-template-columns:minmax(0,340px) minmax(0,1fr)}
  /* 사랑니 유형 4장 */
  :root body:not([data-page="home"]):not([data-page="about-doctor"]) .wz-types .container{max-width:1720px}
  :root body:not([data-page="home"]):not([data-page="about-doctor"]) .wz-types__list{max-width:1610px}
  /* 전후사진 갤러리(before-after) — 카드 두 장이 넓어지면 전·후 사진이 같은 폭으로 함께 커진다 */
  :root body:not([data-page="home"]):not([data-page="about-doctor"]) .j-bag .container{max-width:1720px}
  :root body:not([data-page="home"]):not([data-page="about-doctor"]) .j-bag__grid{width:min(1610px,100%)}
  /* 6단계 안내(내원 안내 '처음 오시는 분께'): 자동 칸이라 5+1 로 1장이 왼쪽에 남아 → 3×2 */
  :root body:not([data-page="home"]):not([data-page="about-doctor"]) .flow:has(> .flow-step:nth-child(6):last-child){grid-template-columns:repeat(3,minmax(0,1fr))}
  /* 칼럼 목록 4장: 3열이면 1장이 왼쪽에 남아 2×2 가운데 */
  :root body[data-page="column"] .j-feats{grid-template-columns:repeat(2,minmax(0,1fr)); max-width:1288px; margin-inline:auto}
}
@media (min-width:641px) and (max-width:1100px){
  :root body:not([data-page="home"]):not([data-page="about-doctor"]) .flow:has(> .flow-step:nth-child(6):last-child){grid-template-columns:repeat(2,minmax(0,1fr))}
  :root body:not([data-page="home"]):not([data-page="about-doctor"]) main .lm-flow .lm-flow__step{flex:0 0 calc((100% - 60px) / 3)}
  :root body:not([data-page="home"]):not([data-page="about-doctor"]) main .lm-flow .lm-flow__list{max-width:none}
}
/* ── 전 페이지 글자·사진 키우기 블록 끝 ── */

/* ── 닥터스 칼럼 (블로그 글 옮김, 2026-10-01) — 사용자 "knsy.co.kr/ko/columns 처럼, 클릭하면 다 보여야 해, 블로그 연결 안 되고" ──
   생성: _build/pages_column_blog.py. 목록 = 추천 4 → 소개 · 분류 탭(글 수) · 검색 · 총 n편 → 3열 카드 → 페이지 번호(12편씩, JS)
   본문 = 분류 · 가운데 정렬 글 · 사진 720 · 소제목 금색 밑줄 · 인용 크림 상자 → 다른 칼럼 3편 → 칼럼 전체 보기. 색·글꼴은 사이트 토큰 그대로. */
.cl-list{background:var(--c-paper)} .cl-article{background:var(--c-paper)} .cl-more{background:var(--c-canvas)}
.cl-list__head{text-align:center; margin-bottom:clamp(28px,2.6vw,44px)}
.cl-list__head .j-ans{margin-inline:auto}
/* 카드 */
.cl-grid{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(18px,1.6vw,28px)}
.cl-card[hidden]{display:none}
.cl-card__a{display:flex; flex-direction:column; height:100%; overflow:hidden; border-radius:16px; background:#fff; border:1px solid var(--hairline-l);
  box-shadow:0 1px 2px rgba(35,42,38,.05),0 20px 40px -34px rgba(35,42,38,.45); color:inherit; text-decoration:none; transition:transform .25s, box-shadow .25s}
.cl-card__a:hover{transform:translateY(-4px); box-shadow:0 1px 2px rgba(35,42,38,.06),0 28px 48px -30px rgba(35,42,38,.5)}
.cl-card__media{position:relative; display:block; aspect-ratio:4/3; overflow:hidden; background:var(--c-cream)}
.cl-card__media img{width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s}
.cl-card__a:hover .cl-card__media img{transform:scale(1.04)}
.cl-card__body{display:flex; flex-direction:column; flex:1; padding:clamp(18px,1.4vw,26px) clamp(18px,1.4vw,26px) 0}
.cl-card__date{font-size:15px; font-weight:600; color:var(--c-slate)}
.cl-card__t{margin-top:10px; font-size:clamp(19px,1.2vw,22px); font-weight:700; line-height:1.45; color:var(--c-violet-ink); word-break:keep-all;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.cl-card__ex{margin-top:10px; font-size:16.5px; line-height:1.7; color:var(--c-slate); word-break:keep-all;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden}
.cl-card__foot{display:flex; justify-content:space-between; align-items:center; margin-top:auto; padding:16px 0 18px; border-top:1px solid var(--hairline-l);
  font-size:15px; color:var(--c-slate)}
.cl-card__ex{margin-bottom:18px}   /* 바닥 줄(원장 · 자세히 보기)은 margin-top:auto 로 카드 바닥에 맞춘다 */
.cl-card__more{font-weight:700; color:var(--c-violet)}   /* 2026-10-02 사용자 "기준 초록색으로, 컬럼 색도" — 칼럼의 금색 5곳 → --c-violet */
/* 분류 탭 · 검색 */
.cl-tabs{display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); border:1px solid var(--hairline-l); border-radius:12px; overflow:hidden; background:#fff}
.cl-tab{appearance:none; border:0; border-right:1px solid var(--hairline-l); background:transparent; padding:16px 10px; cursor:pointer;
  font:inherit; font-size:17px; font-weight:600; color:var(--c-violet-ink); transition:background .2s, color .2s}
.cl-tab:last-child{border-right:0}
.cl-tab small{margin-left:4px; font-size:14px; font-weight:700; color:var(--c-violet)}
.cl-tab:hover{background:var(--c-canvas)}
.cl-tab.is-on{background:var(--c-violet-deep); color:#fff} .cl-tab.is-on small{color:rgba(255,255,255,.72)}
.cl-toolbar{display:flex; justify-content:space-between; align-items:center; gap:16px; margin:clamp(22px,2vw,34px) 0 clamp(18px,1.6vw,26px)}
.cl-search{display:flex; align-items:center; gap:10px; width:min(420px,100%); padding:0 16px; border:1px solid var(--hairline-l); border-radius:10px; background:#fff; color:var(--c-slate)}
.cl-search svg{flex:none; width:20px; height:20px}
.cl-search input{flex:1; min-width:0; border:0; outline:0; background:transparent; padding:14px 0; font:inherit; font-size:17px; color:var(--c-graphite)}
.cl-search:focus-within{border-color:var(--c-violet-deep); box-shadow:0 0 0 3px rgba(63,95,85,.12)}
.cl-info{margin:0; font-size:16px; color:var(--c-slate); white-space:nowrap}
.cl-empty{margin:40px 0; text-align:center; font-size:18px; color:var(--c-slate)}
.cl-pager{display:flex; justify-content:center; align-items:center; gap:8px; margin-top:clamp(36px,3vw,56px)}
.cl-pager[hidden]{display:none}
.cl-pg{appearance:none; min-width:44px; height:44px; padding:0 10px; border:1px solid var(--hairline-l); border-radius:8px; background:#fff; cursor:pointer;
  font:inherit; font-size:16px; font-weight:600; color:var(--c-violet-ink)}
.cl-pg:hover:not(:disabled){border-color:var(--c-violet-deep)}
.cl-pg.is-on{background:var(--c-violet-deep); border-color:var(--c-violet-deep); color:#fff}
.cl-pg:disabled{opacity:.35; cursor:default}
.cl-pg__dots{padding:0 4px; color:var(--c-slate)}
/* 본문 */
.cl-article .container--narrow{max-width:880px}
.cl-cat{margin:0 0 clamp(26px,2.4vw,40px); text-align:center}
.cl-cat a{display:inline-block; padding:5px 16px; border-radius:999px; background:rgba(81,114,100,.12); color:var(--c-violet-deep); font-size:15px; font-weight:700; text-decoration:none}
.cl-article .cl-p{margin:0 auto; max-width:720px; text-align:center; font-size:18px; line-height:1.9; color:var(--c-graphite); word-break:keep-all}
.cl-article .cl-p + .cl-p{margin-top:4px}
.cl-article .cl-gap{margin-top:26px !important}
.cl-article .cl-p b{font-weight:700; color:var(--c-violet-ink)}
.cl-h2,.cl-h3{position:relative; margin:clamp(40px,3.6vw,60px) auto 22px; max-width:720px; text-align:center; font-weight:800; line-height:1.45; color:var(--c-violet-ink); word-break:keep-all}
.cl-h2{font-size:clamp(23px,1.6vw,28px)} .cl-h3{font-size:clamp(21px,1.35vw,24px)}
.cl-h2::after,.cl-h3::after{content:""; display:block; width:40px; height:2px; margin:16px auto 0; background:var(--c-violet)}
.cl-quote{margin:clamp(24px,2.4vw,40px) auto; max-width:680px; padding:clamp(22px,2vw,32px) clamp(20px,2.4vw,40px); border-radius:16px; background:var(--c-cream); text-align:center}
.cl-quote p{margin:0; font-size:18.5px; line-height:1.85; font-weight:600; color:var(--c-violet-ink)}
.cl-quote cite{display:block; margin-top:10px; font-size:15px; font-style:normal; color:var(--c-slate)}
.cl-fig{margin:clamp(22px,2vw,34px) auto; max-width:720px; text-align:center}
.cl-fig img{display:block; width:auto; max-width:100%; height:auto; margin-inline:auto; border-radius:12px; background:var(--c-cream)}
.cl-fig figcaption{margin-top:10px; font-size:15.5px; color:var(--c-slate)}
.cl-strip{display:grid; gap:12px; max-width:720px; margin:clamp(22px,2vw,34px) auto}
.cl-strip--2{grid-template-columns:1fr 1fr} .cl-strip--3{grid-template-columns:repeat(3,1fr)}
.cl-strip .cl-fig{margin:0} .cl-strip .cl-fig img{width:100%; height:100%; object-fit:cover}
.cl-hr{width:60px; margin:clamp(36px,3vw,52px) auto; border:0; border-top:2px solid var(--c-violet)}
.cl-table{max-width:720px; margin:24px auto; overflow-x:auto} .cl-table table{width:100%; border-collapse:collapse; font-size:16px}
.cl-table td{padding:10px 12px; border:1px solid var(--hairline-l); text-align:center}
.cl-yt{max-width:720px; margin:28px auto; aspect-ratio:16/9} .cl-yt iframe{width:100%; height:100%; border:0; border-radius:12px}
.cl-note{margin:clamp(44px,4vw,64px) auto 0; max-width:720px; padding-top:22px; border-top:1px solid var(--hairline-l); text-align:center; font-size:15.5px; line-height:1.8; color:var(--c-slate)}
.cl-more__all{margin:clamp(30px,2.6vw,44px) 0 0; text-align:center}
@media (max-width:1100px){
  .cl-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cl-tabs{grid-template-columns:repeat(4,minmax(0,1fr))} .cl-tab:nth-child(4n){border-right:0} .cl-tab{border-bottom:1px solid var(--hairline-l)}
}
@media (max-width:640px){
  .cl-grid{grid-template-columns:1fr; gap:16px}
  .cl-tabs{display:flex; overflow-x:auto; border-radius:10px; scrollbar-width:none} .cl-tabs::-webkit-scrollbar{display:none}
  .cl-tab{flex:none; padding:13px 16px; font-size:16px; border-bottom:0; border-right:1px solid var(--hairline-l) !important}
  .cl-toolbar{flex-direction:column; align-items:stretch; gap:10px} .cl-info{text-align:right; font-size:15px}
  .cl-article .cl-p{font-size:17px; line-height:1.85}
  .cl-strip--3{grid-template-columns:1fr 1fr}
  .cl-pg{min-width:40px; height:40px}
}
/* ── 닥터스 칼럼 블록 끝 ── */
/* 칼럼 본문 안 '함께 읽으면 좋은 글' 링크 (블로그 주소 → 사이트 안 칼럼) */
.cl-article .cl-link a{color:var(--c-violet-deep); font-weight:700; text-decoration:underline; text-underline-offset:4px}
@media (max-width:640px){ .cl-pager{gap:5px} .cl-pg{min-width:38px; height:40px; padding:0 8px} }

/* ── 상담 띠 삭제 후 (2026-10-01) — 마지막 섹션이 진녹색(함께 보시면 좋은 진료)이면 진녹 푸터와 한 덩어리로 보여 경계선 ── */
main > section.j-dark:last-child{border-bottom:1px solid rgba(255,255,255,.16)}

/* ── 주의사항 단계 이름 · 요약 한 줄 키우기 (2026-10-01 사용자 "이런 중요한 내용 문구 키워 달라") ──
   신경치료 주의사항(wz-caution) '01 치료 전·치료 중 / 02 치료 후' + 그 아래 요약 한 줄, 사랑니 세 단계 카드(wzs) 요약 한 줄도 같은 역할이라 함께. */
:root body:not([data-page="home"]) main .wz-caution .wz-cg__label{gap:14px; font-size:30px; font-weight:800}
:root body:not([data-page="home"]) main .wz-caution .wz-cg__no{width:40px; height:40px; font-size:16px}
:root body:not([data-page="home"]):not([data-page="about-doctor"]) main .wz-caution .wz-cg__body .wz-cg__lead{font-size:22px; font-weight:600; color:var(--c-violet-ink)}
:root body:not([data-page="home"]):not([data-page="about-doctor"]) main .wzs .wzs-card__lead{max-width:24ch; font-size:18.5px; font-weight:600; color:var(--c-violet-ink)}
@media (max-width:640px){
  :root body:not([data-page="home"]) main .wz-caution .wz-cg__label{font-size:24px}
  :root body:not([data-page="home"]) main .wz-caution .wz-cg__no{width:34px; height:34px; font-size:15px}
  :root body:not([data-page="home"]):not([data-page="about-doctor"]) main .wz-caution .wz-cg__body .wz-cg__lead{font-size:18.5px}
  :root body:not([data-page="home"]):not([data-page="about-doctor"]) main .wzs .wzs-card__lead{font-size:17.5px}
}
/* ── 주의사항 중요 문구 끝 ── */

/* ── 사랑니 주의사항 세 단계 카드 — 화살표 삭제 · 사이 여백 최소 · 전부 키우기 (2026-10-01 사용자 "화살표 삭제하고 가운데 여백을 최대한 작게 그리고 키워줘 모두") ── */
.wzs-card + .wzs-card::before{display:none}
:root body:not([data-page="home"]) .wzs .wzs-grid{gap:14px}
@media (min-width:1101px){
  :root body:not([data-page="home"]) .wzs .container{max-width:1720px}
  :root body:not([data-page="home"]) .wzs .wzs-grid{max-width:1610px}
}
:root body:not([data-page="home"]) .wzs .wzs-card__head{padding:clamp(30px,2.4vw,44px) clamp(24px,2.2vw,40px) clamp(24px,1.8vw,30px)}
:root body:not([data-page="home"]) .wzs .wzs-card__ico{width:68px; height:68px}
:root body:not([data-page="home"]) .wzs .wzs-card__ico svg{width:34px; height:34px}
:root body:not([data-page="home"]) .wzs .wzs-card__no{margin-top:16px; font-size:24px}
:root body:not([data-page="home"]) .wzs .wzs-card__t{margin-top:10px; font-size:clamp(28px,1.8vw,34px)}
:root body:not([data-page="home"]):not([data-page="about-doctor"]) main .wzs .wzs-card__lead{max-width:28ch; font-size:20px}
:root body:not([data-page="home"]) .wzs .wzs-card__list{padding:10px clamp(24px,2.2vw,40px) 20px}
:root body:not([data-page="home"]) .wzs .wzs-card__list li{gap:16px; padding:20px 0}
:root body:not([data-page="home"]) .wzs .wzs-card__list li span{width:34px; height:34px; font-size:16px}
:root body:not([data-page="home"]) .wzs .wzs-card__list li p{font-size:20px; line-height:1.6}
@media (max-width:640px){
  :root body:not([data-page="home"]) .wzs .wzs-card__ico{width:58px; height:58px}
  :root body:not([data-page="home"]) .wzs .wzs-card__t{font-size:27px}
  :root body:not([data-page="home"]):not([data-page="about-doctor"]) main .wzs .wzs-card__lead{font-size:18px}
  :root body:not([data-page="home"]) .wzs .wzs-card__list li{padding:16px 0}
  :root body:not([data-page="home"]) .wzs .wzs-card__list li span{width:30px; height:30px; font-size:15px}
  :root body:not([data-page="home"]) .wzs .wzs-card__list li p{font-size:17.5px}
}
/* ── 사랑니 세 단계 카드 키우기 끝 ── */

/* ── 방송 자문 카드 — 방송 화면 전체 (2026-10-01 사용자 "방송 화면 전체 나오게") ──
   사진 = 병원 블로그에 올린 방송 화면 원본(로고·자막·이름표 포함, 자르지 않음). 칸을 방송 화면 비율로, contain 으로 전체 표시.
   방송사 배지는 화면 속 프로그램 로고(왼쪽 위)를 가리지 않게 오른쪽 위로. 확대 효과는 화면 가장자리가 잘려 끔. */
.j-press__media{aspect-ratio:966/515; background:#1d1f1e}
.j-press__media img{object-fit:contain}
.j-press__card:hover .j-press__media img{transform:none}
.j-press__ch{left:auto; right:12px}
/* ── 방송 자문 카드 끝 ── */

/* 홈 히어로 2번(모델 미소, 2026-10-01) — 모바일 세로 화면에서 얼굴이 오른쪽 밖으로 잘리지 않게 */
@media (max-width:640px){ body[data-page="home"] .hero-slide img{object-position:70% 30%} }   /* 2026-10-01 세 장 모두 모델 사진 — 얼굴이 오른쪽에 있어 모바일에서 오른쪽 기준 */
@media (min-width:641px){ body[data-page="home"] .hero-slide:nth-child(1) img{object-position:50% 50%} }   /* (10-06 순서 바꿈: 3번 모델이 첫 장) 3번 모델(tci00400001209, 사용자 지정) — 작게 줄여 오른쪽 아래에 둠 */
@media (max-width:640px){ body[data-page="home"] .hero-slide:nth-child(1) img{object-position:76% 30%} }   /* 10-02 모바일 얼굴 가운데(66%→76%, 오른쪽 눈이 잘렸음) */

/* ── 홈 히어로 슬라이드 표시(점) 다시 그리기 (2026-10-01 사용자 "이 이쁜걸로 바꿔줘" → 2026-10-02 "이런 식으로" 참고 이미지) ──
   2026-10-01 가는 막대형(현재 36px·나머지 10px)이었던 것을 → 동그란 점: 나머지는 10px 반투명 흰 점,
   현재 슬라이드는 18px 흰 테두리 원(2px) 안에 6px 흰 점. 사진 위라 참고 이미지의 진보라 대신 흰색.
   누르는 범위는 26×28px 투명 버튼(크기 고정 — 현재 점이 커져도 옆 점이 밀리지 않음), 보이는 점은 ::before 로 그린다. */
.hero-dots{gap:2px; align-items:center}
.hero-dots button{position:relative; display:grid; place-items:center; width:26px; height:28px; padding:0; margin:0; border:0; border-radius:0; background:none; transform:none; cursor:pointer}
.hero-dots button::before{content:""; display:block; box-sizing:border-box; width:10px; height:10px; border-radius:50%; border:0 solid #fff; background:rgba(255,255,255,.5);
  box-shadow:0 1px 4px rgba(35,42,38,.25); transition:width .3s var(--ease-out), height .3s var(--ease-out), background .3s}
.hero-dots button:hover::before{background:rgba(255,255,255,.8)}
.hero-dots button[aria-current="true"]{transform:none; background:none}
.hero-dots button[aria-current="true"]::before{width:18px; height:18px; border-width:2px; background:radial-gradient(circle, #fff 0 3px, transparent 3.5px)}
.hero-dots button:focus-visible{outline:2px solid #fff; outline-offset:2px; border-radius:4px}
/* ── 히어로 슬라이드 표시 끝 ── */
@media (max-width:640px){ body[data-page="home"] .hero-slide:nth-child(3) img{object-position:73% 30%} }   /* (10-06 순서 바꿈: 셋째 장) 1번 모델을 왼쪽으로 옮긴 뒤(2026-10-01) 모바일 기준점 */
@media (min-width:641px){ body[data-page="home"] .hero-slide:nth-child(2) img{object-position:50% 50%} }   /* (10-06 순서 바꿈: 둘째 장) 2번 모델(2026-10-01 교체) 머리 위가 잘리지 않게 위 기준 */
@media (max-width:640px){ body[data-page="home"] .hero-slide:nth-child(2) img{object-position:57% 30%} }   /* 10-02 모바일 얼굴 가운데(1번 63→73, 2번 66→57) */

/* ── 상단 헤더 키우기 (2026-10-01 사용자 "여기 다 키워줘") — 로고 · 메뉴 · 드롭다운 · 전화 · 진료 예약 버튼 · 모바일 메뉴 버튼 ──
   헤더 높이 74 → 86(전 페이지 공통 --header-h 라 히어로 여백·고정 화면 공식이 함께 따라간다). */
:root{--header-h:86px}
.brand-lockup img{height:42px}
.nav-top{font-size:19.5px}
.site-header .nav-top.is-active::after{bottom:22px; height:2.5px}
.nav-panel{min-width:210px; padding:12px}
.nav-panel a{font-size:17px; padding:11px 18px}
.nav-panel--two{min-width:380px}
.nav-tel{font-size:18.5px; gap:8px} .nav-tel span{font-size:15px}
.nav-cta{font-size:17.5px; padding:12px 26px; min-height:52px}
@media (max-width:1460px){
  .nav-top{font-size:17.5px; padding-inline:clamp(6px,.75vw,12px)}
  .nav-panel a{font-size:16px; padding-inline:14px}
  .nav-tel{font-size:17px}
  .nav-cta{font-size:16.5px; padding:11px 22px}
}
@media (max-width:1180px){
  .brand-lockup img{height:40px}
  .menu-toggle{font-size:15px; padding:10px 16px; min-height:48px}
  .menu-toggle .bars i{width:19px; height:2px} .menu-toggle .bars{gap:4px}
}
@media (max-width:640px){
  :root{--header-h:76px}
  .brand-lockup img{height:38px}
}
/* ── 상단 헤더 키우기 끝 ── */


/* ── 서브 히어로 사진 교체 (2026-10-01 사용자 "메인 페이지 빼고 모든 다른 페이지 이 부분 사진을 적합한 걸로") ──
   사진 = 클립아트코리아 멤버십 '의료뷰티' 인물(병원 홍보 사용 가능 표시) + 병원소개는 실제 병원 대기실 사진. 인물은 변형 없이 배경만 왼쪽으로 늘린 2560×800
   (assets/img/hero-sub/<page>.jpg, 원본 ~/work/clipart/dl, 대응표 ~/work/clipart/subhero_map.json). 인물은 화면 오른쪽(약 72%), 제목은 왼쪽.
   틴트: 진녹 그라데이션을 왼쪽(글자 쪽)만 진하게 → 인물 얼굴은 밝게. 모바일은 전체를 고르게 어둡게. 칼럼 229편(col-*)은 칼럼 목록과 같은 사진. */
body:not([data-page="home"]) .phero::before{--hs-tint:linear-gradient(90deg,rgba(35,42,38,.74) 0%,rgba(35,42,38,.56) 36%,rgba(35,42,38,.18) 64%,rgba(35,42,38,.05) 100%)}
body[data-page^="col"] .phero::before{background-color:transparent !important; background-image:var(--hs-tint),url('../img/hero-sub/column.jpg') !important; background-size:cover,cover !important; background-position:center,72% 38% !important}
body[data-page="about-clinic"] .phero::before{background-color:transparent !important; background-image:var(--hs-tint),url('../img/hero-sub/about-clinic.jpg') !important; background-size:cover,cover !important; background-position:center,72% 38% !important}
body[data-page="about-equipment"] .phero::before{background-color:transparent !important; background-image:var(--hs-tint),url('../img/hero-sub/about-equipment.jpg') !important; background-size:cover,cover !important; background-position:center,72% 38% !important}
body[data-page="about-visit"] .phero::before{background-color:transparent !important; background-image:var(--hs-tint),url('../img/hero-sub/about-visit.jpg') !important; background-size:cover,cover !important; background-position:center,72% 38% !important}
body[data-page="price"] .phero::before{background-color:transparent !important; background-image:var(--hs-tint),url('../img/hero-sub/price.jpg') !important; background-size:cover,cover !important; background-position:center,72% 38% !important}
body[data-page="general"] .phero::before{background-color:transparent !important; background-image:var(--hs-tint),url('../img/hero-sub/general.jpg') !important; background-size:cover,cover !important; background-position:center,72% 38% !important}
body[data-page="general-cavity"] .phero::before{background-color:transparent !important; background-image:var(--hs-tint),url('../img/hero-sub/general-cavity.jpg') !important; background-size:cover,cover !important; background-position:center,72% 38% !important}
body[data-page="general-endo"] .phero::before{background-color:transparent !important; background-image:var(--hs-tint),url('../img/hero-sub/general-endo.jpg') !important; background-size:cover,cover !important; background-position:center,72% 38% !important}
body[data-page="general-wisdom"] .phero::before{background-color:transparent !important; background-image:var(--hs-tint),url('../img/hero-sub/general-wisdom.jpg') !important; background-size:cover,cover !important; background-position:center,72% 38% !important}
body[data-page="general-pediatric"] .phero::before{background-color:transparent !important; background-image:var(--hs-tint),url('../img/hero-sub/general-pediatric.jpg') !important; background-size:cover,cover !important; background-position:center,72% 38% !important}
body[data-page="implant-oneday"] .phero::before{background-color:transparent !important; background-image:var(--hs-tint),url('../img/hero-sub/implant-oneday.jpg') !important; background-size:cover,cover !important; background-position:center,72% 38% !important}
body[data-page="implant-full"] .phero::before{background-color:transparent !important; background-image:var(--hs-tint),url('../img/hero-sub/implant-full.jpg') !important; background-size:cover,cover !important; background-position:center,72% 38% !important}
body[data-page="implant-advanced"] .phero::before{background-color:transparent !important; background-image:var(--hs-tint),url('../img/hero-sub/implant-advanced.jpg') !important; background-size:cover,cover !important; background-position:center,72% 38% !important}
body[data-page="implant-redo"] .phero::before{background-color:transparent !important; background-image:var(--hs-tint),url('../img/hero-sub/implant-redo.jpg') !important; background-size:cover,cover !important; background-position:center,72% 38% !important}
body[data-page="implant-guide"] .phero::before{background-color:transparent !important; background-image:var(--hs-tint),url('../img/hero-sub/implant-guide.jpg') !important; background-size:cover,cover !important; background-position:center,72% 38% !important}
body[data-page="laminate"] .phero::before{background-color:transparent !important; background-image:var(--hs-tint),url('../img/hero-sub/laminate.jpg') !important; background-size:cover,cover !important; background-position:center,72% 38% !important}
body[data-page="laminate-redo"] .phero::before{background-color:transparent !important; background-image:var(--hs-tint),url('../img/hero-sub/laminate-redo.jpg') !important; background-size:cover,cover !important; background-position:center,72% 38% !important}
body[data-page="gum"] .phero::before{background-color:transparent !important; background-image:var(--hs-tint),url('../img/hero-sub/gum.jpg') !important; background-size:cover,cover !important; background-position:center,72% 38% !important}
body[data-page="whitening"] .phero::before{background-color:transparent !important; background-image:var(--hs-tint),url('../img/hero-sub/whitening.jpg') !important; background-size:cover,cover !important; background-position:center,72% 38% !important}
body[data-page="prosthetic"] .phero::before{background-color:transparent !important; background-image:var(--hs-tint),url('../img/hero-sub/prosthetic.jpg') !important; background-size:cover,cover !important; background-position:center,72% 38% !important}
body[data-page="prosthetic-tmj"] .phero::before{background-color:transparent !important; background-image:var(--hs-tint),url('../img/hero-sub/prosthetic-tmj.jpg') !important; background-size:cover,cover !important; background-position:center,72% 38% !important}
body[data-page="faq"] .phero::before{background-color:transparent !important; background-image:var(--hs-tint),url('../img/hero-sub/faq.jpg') !important; background-size:cover,cover !important; background-position:center,72% 38% !important}
body[data-page="review"] .phero::before{background-color:transparent !important; background-image:var(--hs-tint),url('../img/hero-sub/review.jpg') !important; background-size:cover,cover !important; background-position:center,72% 38% !important}
@media (max-width:640px){
  body:not([data-page="home"]) .phero::before{--hs-tint:linear-gradient(180deg,rgba(35,42,38,.50) 0%,rgba(35,42,38,.62) 60%,rgba(35,42,38,.72) 100%)}
  body:not([data-page="home"]) .phero::before{background-position:center,76% 30% !important}
}
/* ── 서브 히어로 사진 교체 끝 ── */

/* ── 전 페이지 일괄성 2차 (2026-10-01 저녁) ─────────────────────────────────────────────
   사용자: "메인 페이지 빼고 전 페이지를 하나씩 확인해서 동일하게 — 사진 크기·폰트 사이즈. 이 말이 중요한건데 작아(이런 부분이 많아) 모두 키우고,
   소개 글이 많고 적고 일괄성이 떨어져, 필요 없는 섹션도 있어 — 난 일괄성 있는 걸 원해" + "사진 크기도 봐야 해".
   특이도: 앞 블록의 :is() 목록이 (0,2,1)까지 올라가 같은 형태로는 못 이겨 main:not(#_)(ID 한 단계)로 올림.
   원칙: 같은 역할 = 같은 크기·같은 모양(가장 큰 쪽으로 맞춤, 줄이지 않음). 홈·대표원장(about-doctor) 제외 — 앞 '전 페이지 글자·사진 키우기' 블록과 같은 스코프.
   · 리드(제목 아래 핵심 한두 줄 = j-ans·j-lead·j-who__lead): 20 / 19.5 / 19 · 인트로(사진 옆) 리드 22 / 20.5 / 19.5, 굵기 600 — 페이지마다 달랐던 노란 형광펜·베이지 상자 → 원데이 모양 하나로
   · 섹션 안 소제목(wz-q '이런 경우에는 발치를 권합니다'·CASE 제목): 27 / 23 / 22
   · 작은 카드 제목(사례 갤러리 이름·wz-q 경우 카드·잇몸 증상): 22~26 / 그 설명 17.5~18
   · 과정 단계 이름 22 · 설명 16.5, FAQ 질문 20 · 답 17.5, 라미네이트 체크 목록 18
   · 사진: 인트로 570×485(모양 4/3.4·왼쪽 위 둥근 모서리) 통일 / 4장 사진 카드 382(1610 격자) / 임플란트 5단계 과정 3+2(340) /
     대표 사례 3장 519 / 전후 한 쌍 608 / 치료사례 갤러리 620(3건이면 2+1 가운데) / 진행과정 단계 사진 비율 하나(360/301) */

/* 1) 리드 — 페이지마다 다른 모양(형광펜·상자)을 원데이 모양 하나로 */
:root body:not([data-page="home"]):not([data-page="about-doctor"]) main:not(#_) .j-intro .j-ans{display:block; padding:0; background:none; line-height:1.7; color:var(--c-violet-deep); font-weight:600}
:root body:not([data-page="home"]):not([data-page="about-doctor"]) main:not(#_) .j-lead{color:var(--c-violet-deep); font-weight:600; line-height:1.7}
@media (min-width:1101px){
  :root body:not([data-page="home"]):not([data-page="about-doctor"]) main:not(#_) :is(.j-ans, .j-lead){font-size:20px}
  :root body:not([data-page="home"]):not([data-page="about-doctor"]) main:not(#_) .j-intro .j-ans{font-size:22px}
  :root body:not([data-page="home"]):not([data-page="about-doctor"]) main:not(#_) .j-who__lead{font-size:20px; font-weight:500}
  :root body:not([data-page="home"]):not([data-page="about-doctor"]) main:not(#_) .lm-case__lead{font-size:20px}
}
@media (min-width:641px) and (max-width:1100px){
  :root body:not([data-page="home"]):not([data-page="about-doctor"]) main:not(#_) :is(.j-ans, .j-lead){font-size:19.5px}
  :root body:not([data-page="home"]):not([data-page="about-doctor"]) main:not(#_) .j-intro .j-ans{font-size:20.5px}
  :root body:not([data-page="home"]):not([data-page="about-doctor"]) main:not(#_) .j-who__lead{font-size:19px; font-weight:500}
}
@media (max-width:640px){
  :root body:not([data-page="home"]):not([data-page="about-doctor"]) main:not(#_) :is(.j-ans, .j-lead){font-size:19px}
  :root body:not([data-page="home"]):not([data-page="about-doctor"]) main:not(#_) .j-intro .j-ans{font-size:19.5px}
  :root body:not([data-page="home"]):not([data-page="about-doctor"]) main:not(#_) .j-who__lead{font-size:18px; font-weight:500}
}

/* 2) 섹션 안 소제목 */
:root body:not([data-page="home"]):not([data-page="about-doctor"]) main:not(#_) .j-cs__t{font-family:var(--ff); font-weight:700; line-height:1.35; letter-spacing:-.015em; text-transform:none; color:var(--c-violet-ink)}
:root body:not([data-page="home"]):not([data-page="about-doctor"]) main:not(#_) .wz-q__lbl{font-weight:800; color:var(--c-violet-ink)}
@media (min-width:1101px){
  :root body:not([data-page="home"]):not([data-page="about-doctor"]) main:not(#_) :is(.j-cs__t, .wz-q__lbl){font-size:27px}
  :root body:not([data-page="home"]):not([data-page="about-doctor"]) main:not(#_) .wz-q__types{font-size:24px}
  :root body:not([data-page="home"]):not([data-page="about-doctor"]) main:not(#_) .wz-q__q{font-size:28px}
  :root body:not([data-page="home"]):not([data-page="about-doctor"]) main:not(#_) :is(.wz-q__risk, .gc-ptx__bt, .j-cr__t){font-size:20px}
  :root body:not([data-page="home"]):not([data-page="about-doctor"]) main:not(#_) .gc-ptx__q{font-size:20px; padding:8px 20px}
  :root body:not([data-page="home"]):not([data-page="about-doctor"]) main:not(#_) .j-proc__bar-t{font-size:17px}
}
@media (min-width:641px) and (max-width:1100px){
  :root body:not([data-page="home"]):not([data-page="about-doctor"]) main:not(#_) :is(.j-cs__t, .wz-q__lbl){font-size:23px}
  :root body:not([data-page="home"]):not([data-page="about-doctor"]) main:not(#_) :is(.wz-q__types, .wz-q__q){font-size:22px}
  :root body:not([data-page="home"]):not([data-page="about-doctor"]) main:not(#_) :is(.wz-q__risk, .gc-ptx__bt, .gc-ptx__q, .j-cr__t){font-size:18.5px}
}
@media (max-width:640px){
  :root body:not([data-page="home"]):not([data-page="about-doctor"]) main:not(#_) :is(.j-cs__t, .wz-q__lbl){font-size:22px}
  :root body:not([data-page="home"]):not([data-page="about-doctor"]) main:not(#_) :is(.wz-q__types, .wz-q__q){font-size:20px}
  :root body:not([data-page="home"]):not([data-page="about-doctor"]) main:not(#_) :is(.wz-q__risk, .gc-ptx__bt, .gc-ptx__q, .j-cr__t){font-size:17.5px}
}

/* 3) 작은 카드 제목·설명 */
@media (min-width:1101px){
  :root body:not([data-page="home"]):not([data-page="about-doctor"]) main:not(#_) .wz-q__cases{max-width:1400px}
  :root body:not([data-page="home"]):not([data-page="about-doctor"]) main:not(#_) .wz-q__cases li{padding:22px 20px}
  :root body:not([data-page="home"]):not([data-page="about-doctor"]) main:not(#_) .wz-q__cases b{font-size:21px}
  :root body:not([data-page="home"]):not([data-page="about-doctor"]) main:not(#_) .wz-q__cases span{font-size:17.5px}
  :root body:not([data-page="home"]):not([data-page="about-doctor"]) main:not(#_) .wz-q__p p{max-width:70ch}
  :root body:not([data-page="home"]):not([data-page="about-doctor"]) .wz-q .container{max-width:1720px}
  :root body:not([data-page="home"]):not([data-page="about-doctor"]) main:not(#_) .gc-chk__list{max-width:1000px}
  :root body:not([data-page="home"]):not([data-page="about-doctor"]) main:not(#_) .gc-chk__t{font-size:26px}
  :root body:not([data-page="home"]):not([data-page="about-doctor"]) main:not(#_) .gc-chk__t::before{width:28px; height:28px}
  :root body:not([data-page="home"]):not([data-page="about-doctor"]) main:not(#_) .gal-name{font-size:22px}
  :root body:not([data-page="home"]):not([data-page="about-doctor"]) main:not(#_) .gal-card figcaption p{font-size:18px}
  :root body:not([data-page="home"]):not([data-page="about-doctor"]) main:not(#_) .j-proc__step b{font-size:22px}
  :root body:not([data-page="home"]):not([data-page="about-doctor"]) main:not(#_) .j-proc__step small{font-size:16.5px}
  :root body:not([data-page="home"]):not([data-page="about-doctor"]) main:not(#_) .lm-chk li p{font-size:18px}
  :root body:not([data-page="home"]):not([data-page="about-doctor"]) main:not(#_) :is(.j-cs figcaption b, .j-cr figcaption b, .j-cs__shot figcaption b){font-size:21px}
}
@media (min-width:641px) and (max-width:1100px){
  :root body:not([data-page="home"]):not([data-page="about-doctor"]) main:not(#_) .wz-q__cases b{font-size:19px}
  :root body:not([data-page="home"]):not([data-page="about-doctor"]) main:not(#_) .wz-q__cases span{font-size:16.5px}
  :root body:not([data-page="home"]):not([data-page="about-doctor"]) main:not(#_) .gc-chk__t{font-size:23px}
  :root body:not([data-page="home"]):not([data-page="about-doctor"]) main:not(#_) .gal-name{font-size:20px}
  :root body:not([data-page="home"]):not([data-page="about-doctor"]) main:not(#_) .gal-card figcaption p{font-size:17px}
}
@media (max-width:640px){
  :root body:not([data-page="home"]):not([data-page="about-doctor"]) main:not(#_) .wz-q__cases b{font-size:18.5px}
  :root body:not([data-page="home"]):not([data-page="about-doctor"]) main:not(#_) .wz-q__cases span{font-size:16px}
  :root body:not([data-page="home"]):not([data-page="about-doctor"]) main:not(#_) .gc-chk__t{font-size:21px}
  :root body:not([data-page="home"]):not([data-page="about-doctor"]) main:not(#_) .gal-name{font-size:19px}
  :root body:not([data-page="home"]):not([data-page="about-doctor"]) main:not(#_) .gal-card figcaption p{font-size:16.5px}
}

/* 4) FAQ — 질문이 본문(18)보다 작던 것(17/15.5) */
:root body:not([data-page="home"]):not([data-page="about-doctor"]) main:not(#_) .faq-item summary{font-size:20px; line-height:1.5}
:root body:not([data-page="home"]):not([data-page="about-doctor"]) main:not(#_) .faq-a{font-size:17.5px; line-height:1.8}
@media (max-width:640px){
  :root body:not([data-page="home"]):not([data-page="about-doctor"]) main:not(#_) .faq-item summary{font-size:18px}
  :root body:not([data-page="home"]):not([data-page="about-doctor"]) main:not(#_) .faq-a{font-size:16.5px}
}

/* 5) 사진 — 인트로 570×485 통일(라미네이트 428 · 미백 341 이던 것) */
:root body:not([data-page="home"]):not([data-page="about-doctor"]) main:not(#_) .j-intro__media:not(.j-intro__media--frame){aspect-ratio:4/3.4; border-radius:120px 0 0 0; background:var(--c-cream)}
@media (max-width:900px){
  :root body:not([data-page="home"]):not([data-page="about-doctor"]) main:not(#_) .j-intro__media:not(.j-intro__media--frame){aspect-ratio:4/3; border-radius:64px 0 0 0}
}
@media (min-width:1101px){
  /* 4장 사진 카드(전체 임플란트 '고려하는 경우' 301 → 재수술 '실패 원인'과 같은 382) · 충치 단계 카드 같은 격자 */
  :root body:not([data-page="home"]):not([data-page="about-doctor"]) .j-feature:has(.j-feats[style*="--cols:4"]) .container,
  :root body:not([data-page="home"]):not([data-page="about-doctor"]) .gc-stage .container{max-width:1720px}
  :root body:not([data-page="home"]):not([data-page="about-doctor"]) main:not(#_) .j-feats[style*="--cols:4"]{max-width:1610px; margin-inline:auto; gap:26px}
  :root body:not([data-page="home"]):not([data-page="about-doctor"]) main:not(#_) .gc-stage__list{gap:26px; max-width:calc(var(--n,4) * 382px + (var(--n,4) - 1) * 26px)}
  /* 임플란트 5단계 과정 — 고난이도도 재수술과 같은 3+2 · 사진 340 */
  :root body:not([data-page="home"]):not([data-page="about-doctor"]):is([data-page="implant-advanced"], [data-page="implant-redo"]) .j-proc__steps[style*="--n:5"]{grid-template-columns:repeat(6,minmax(0,1fr)); gap:30px 26px; width:100%; max-width:1240px; margin-inline:auto}
  :root body:not([data-page="home"]):not([data-page="about-doctor"]):is([data-page="implant-advanced"], [data-page="implant-redo"]) .j-proc__steps[style*="--n:5"] .j-proc__step{grid-column:span 2}
  :root body:not([data-page="home"]):not([data-page="about-doctor"]):is([data-page="implant-advanced"], [data-page="implant-redo"]) .j-proc__steps[style*="--n:5"] .j-proc__step:nth-child(4){grid-column:2 / span 2}
  :root body:not([data-page="home"]):not([data-page="about-doctor"]):is([data-page="implant-advanced"], [data-page="implant-redo"]) .j-proc__steps[style*="--n:5"] .j-proc__step:nth-child(3)::after{display:none}
  :root body:not([data-page="home"]):not([data-page="about-doctor"]):is([data-page="implant-advanced"], [data-page="implant-redo"]) .j-proc__steps[style*="--n:5"] .j-proc__step figure{max-width:340px; margin-inline:auto}
  /* 대표 사례 3장 — 재수술 452 → 519(고난이도·가이드와 같게) */
  :root body:not([data-page="home"]):not([data-page="about-doctor"]) main:not(#_) .j-cs__top{max-width:1600px}
  /* 그 밖의 치료사례 전후 한 쌍 — 518 → 원데이와 같은 608 (한 줄에 한 쌍, 쌍 사이 64) */
  :root body:not([data-page="home"]):not([data-page="about-doctor"]):is([data-page="implant-advanced"], [data-page="implant-guide"]) .j-cases .ba-grid{grid-template-columns:minmax(0,1fr); max-width:1280px; gap:40px}
  :root body:not([data-page="home"]):not([data-page="about-doctor"]):is([data-page="implant-advanced"], [data-page="implant-guide"]) .j-cases .ba-pair{gap:64px}
  :root body:not([data-page="home"]):not([data-page="about-doctor"]):is([data-page="implant-advanced"], [data-page="implant-guide"]) .j-cases .ba-pair::after{width:72px; height:72px; background-size:38px}
}
@media (min-width:641px){
  /* 치료사례 갤러리 — 3건(턱관절)도 다른 페이지와 같은 620 칸: 2+1, 남는 1건은 가운데 */
  :root body:not([data-page="home"]):not([data-page="about-doctor"]) main:not(#_) .gal-grid:has(> :nth-child(3):last-child){grid-template-columns:repeat(4,minmax(0,1fr))}
  :root body:not([data-page="home"]):not([data-page="about-doctor"]) main:not(#_) .gal-grid:has(> :nth-child(3):last-child) > *{grid-column:span 2}
  :root body:not([data-page="home"]):not([data-page="about-doctor"]) main:not(#_) .gal-grid:has(> :nth-child(3):last-child) > :nth-child(3){grid-column:2 / span 2}
}
@media (min-width:901px){
  /* 2026-10-02 사용자 "세 개 나란히" — 3건 갤러리(턱관절·보철)는 데스크톱에서 한 줄 3칸. 641~900 은 칸이 좁아 위 2+1 유지 */
  :root body:not([data-page="home"]):not([data-page="about-doctor"]) main:not(#_) .gal-grid:has(> :nth-child(3):last-child){grid-template-columns:repeat(3,minmax(0,1fr))}
  :root body:not([data-page="home"]):not([data-page="about-doctor"]) main:not(#_) .gal-grid:has(> :nth-child(3):last-child) > :nth-child(n){grid-column:auto}
}
/* 진행과정 단계 사진 — 사랑니·신경치료(wz 360/301)와 나머지(lm-flow 4/3)가 달랐다 → 큰 쪽(360/301)으로 */
:root body:not([data-page="home"]):not([data-page="about-doctor"]) main:not(#_) :is(.wz-step__ph, .lm-flow__ph){aspect-ratio:360/301}
/* ── 전 페이지 일괄성 2차 블록 끝 ── */
/* 라미네이트 계열(라미네이트·재치료·잇몸성형·미백) 히어로는 옛 사진용 좌우 반전(transform:scaleX(-1))이 걸려 있어 새 사진이 뒤집혀 보였다 — 해제 */
body:not([data-page="home"]) .phero--laminate::before{transform:none !important; background-repeat:no-repeat !important}

/* ── 병원소개 4페이지 — moons 구성 (2026-10-01) ──────────────────────────────────────────────
   사용자: "이 페이지들을 필요없는걸 삭제하고 푸터만 남기고 내용을 살려서 여기처럼 만들어줘 https://moonsdentalclinic.com/"
   병원둘러보기·진료안내/오시는길·장비 소개·비급여수가표 = 사진 히어로(그대로) → 가운데 제목(j-h2 52, 리드 20) → 큰 본문 하나 → 푸터.
   생성: _build/sections_ab.py (ab_tour · ab_loc · ab_equip · ab_price). 슬라이드 JS 는 app.js 끝 '병원 둘러보기 슬라이드'.
   색·글꼴·제목 크기는 사이트 토큰 그대로, 모양만 moons(흰 바탕 · 넓은 여백 · 큰 사진 슬라이드 · 안내+지도 · 엇갈린 장비 카드 · 격자 표). */
.ab-tour,.ab-loc,.ab-eq,.ab-price{background:var(--c-paper); padding-block:clamp(56px,5.6vw,100px)}
:is(.ab-tour,.ab-loc,.ab-eq,.ab-price) .j-ans--center{max-width:68ch; text-wrap:balance}

/* 병원 둘러보기 — 가운데 큰 사진 + 양옆 사진이 살짝 보이는 슬라이드 */
.ab-slider{position:relative; --w:min(1040px, 78vw); margin-top:clamp(30px,2.8vw,48px)}
.ab-slider__track{position:relative; display:flex; gap:clamp(16px,1.6vw,30px); overflow-x:auto; scroll-snap-type:x mandatory;
  padding-inline:calc((100% - var(--w)) / 2); scrollbar-width:none; overscroll-behavior-x:contain; outline:none}
.ab-slider__track::-webkit-scrollbar{display:none}
.ab-slider__track:focus-visible{outline:2px solid var(--c-violet); outline-offset:6px}
.ab-slide{flex:0 0 var(--w); margin:0; scroll-snap-align:center; transition:opacity .45s var(--ease-out, ease)}
.ab-slide:not(.is-on){opacity:.42}
.ab-slide__media{aspect-ratio:16/10; overflow:hidden; border-radius:clamp(16px,1.6vw,28px); background:var(--c-cream)}
.ab-slide__media img{width:100%; height:100%; object-fit:cover; display:block}
.ab-slide figcaption{display:grid; grid-template-columns:auto minmax(0,1fr); column-gap:18px; align-items:baseline; padding:24px 6px 0}
.ab-slide__no{grid-row:span 2; font-family:var(--serif); font-size:36px; font-weight:600; line-height:1; color:var(--c-gold)}
.ab-slide figcaption b{font-size:26px; font-weight:800; line-height:1.35; color:var(--c-violet-ink)}
.ab-slide figcaption p{margin:6px 0 0; font-size:18px; line-height:1.75; color:var(--c-slate)}
.ab-slider__btn{position:absolute; z-index:2; top:calc(var(--w) * 10 / 32); transform:translateY(-50%); display:grid; place-items:center;
  width:60px; height:60px; padding:0; border:0; border-radius:50%; background:#fff; color:var(--c-violet-deep); cursor:pointer;
  box-shadow:0 12px 30px -12px rgba(35,42,38,.4); transition:opacity .25s, background .25s}
.ab-slider__btn:hover{background:var(--c-violet-deep); color:#fff}
.ab-slider__btn svg{width:24px; height:24px}
.ab-slider__btn--prev{left:calc(50% - var(--w) / 2 - 30px)} .ab-slider__btn--prev svg{transform:scaleX(-1)}
.ab-slider__btn--next{right:calc(50% - var(--w) / 2 - 30px)}
.ab-slider.is-first .ab-slider__btn--prev,.ab-slider.is-last .ab-slider__btn--next{opacity:.3; pointer-events:none}
.ab-slider__count{display:flex; justify-content:center; align-items:baseline; gap:10px; margin:28px 0 0; font-family:var(--serif); font-size:20px; color:var(--c-slate)}
.ab-slider__count b{font-size:28px; font-weight:600; color:var(--c-violet-ink)}
@media (max-width:900px){
  .ab-slider{--w:86vw}
  .ab-slider__btn{width:46px; height:46px} .ab-slider__btn svg{width:20px; height:20px}
  .ab-slider__btn--prev{left:calc(50% - var(--w) / 2 + 10px)} .ab-slider__btn--next{right:calc(50% - var(--w) / 2 + 10px)}
  .ab-slide figcaption{column-gap:12px; padding-top:18px}
  .ab-slide__no{font-size:28px} .ab-slide figcaption b{font-size:21px} .ab-slide figcaption p{font-size:16.5px}
}

/* 진료시간 · 오시는길 — 왼쪽 안내 + 오른쪽 지도 */
.ab-loc__grid{display:grid; grid-template-columns:minmax(0,600px) minmax(0,1fr); gap:clamp(32px,4.4vw,80px); max-width:1500px; margin:clamp(34px,3.2vw,60px) auto 0}
.ab-loc__name{margin:0; font-size:38px; font-weight:800; letter-spacing:-.02em; color:var(--c-violet-ink)}
.ab-loc__rows{display:grid; grid-template-columns:auto minmax(0,1fr); gap:12px 20px; margin:22px 0 0; font-size:18px; line-height:1.6}
.ab-loc__rows dt{font-weight:800; color:var(--c-violet-ink)}
.ab-loc__rows dd{margin:0; color:var(--c-graphite)}
.ab-line{display:inline-grid; place-items:center; width:24px; height:24px; margin-right:6px; border-radius:50%; vertical-align:2px; color:#fff; font-size:13px; font-weight:800}
.ab-line--3{background:#ef7c1c} .ab-line--6{background:#cd7c2f}
.ab-loc__maps{display:flex; flex-wrap:wrap; gap:10px; margin-top:24px}
.ab-chip{display:inline-flex; align-items:center; padding:12px 22px; border-radius:10px; background:var(--c-cream); color:var(--c-violet-ink); font-size:16px; font-weight:700; transition:background .25s}
.ab-chip:hover{background:var(--c-mist)}
.ab-loc__tel{display:flex; flex-wrap:wrap; align-items:baseline; gap:8px 22px; margin-top:34px; padding-top:30px; border-top:1px solid var(--hairline-l)}
.ab-loc__tel span{font-size:17px; font-weight:800; color:var(--c-violet-ink)}
.ab-loc__tel a{font-family:var(--serif); font-size:52px; font-weight:600; line-height:1; letter-spacing:.01em; color:var(--c-violet-deep)}
.ab-loc__btns{display:flex; flex-wrap:wrap; gap:10px; margin-top:22px}
.ab-loc__sub{margin:38px 0 0; padding-bottom:12px; border-bottom:2px solid var(--c-violet-ink); font-size:20px; font-weight:800; color:var(--c-violet-ink)}
.ab-hours{width:100%; border-collapse:collapse; font-size:18px}
.ab-hours th,.ab-hours td{padding:14px 0; border-bottom:1px solid var(--hairline-l); text-align:left}
.ab-hours th{width:42%; font-weight:700; color:var(--c-violet-ink)}
.ab-hours td{color:var(--c-graphite); font-variant-numeric:tabular-nums}
.ab-hours em{margin-left:10px; padding:3px 10px; border-radius:999px; background:var(--c-cream); font-style:normal; font-size:14px; font-weight:700; color:var(--c-gold-deep)}
.ab-loc__notes{list-style:none; margin:16px 0 0; padding:0; font-size:16px; line-height:1.7; color:var(--c-slate)}
.ab-loc__notes li::before{content:"* "}
.ab-loc__map{position:relative; min-height:600px; overflow:hidden; border-radius:clamp(20px,2vw,36px); background:var(--c-cream)}
.ab-loc__map iframe{position:absolute; inset:0; width:100%; height:100%; border:0}
body[data-page="about-visit"] .ft2-band{display:none}   /* 본문이 같은 '오시는 길·진료시간'이라 푸터 띠는 이 페이지만 숨김 */
@media (max-width:1100px){
  .ab-loc__grid{grid-template-columns:minmax(0,1fr); max-width:760px}
  .ab-loc__map{min-height:420px}
}
@media (max-width:640px){
  .ab-loc__name{font-size:30px}
  .ab-loc__rows{font-size:16.5px; gap:10px 14px}
  .ab-loc__tel a{font-size:40px}
  .ab-hours{font-size:16.5px}
  .ab-loc__map{min-height:320px}
}

/* 장비 — 사진 상자 + 분류 + 이름 + 설명, 4열 엇갈림 */
.ab-eq .container{max-width:1720px}
.ab-eq__grid{list-style:none; margin:clamp(34px,3.2vw,60px) auto 0; padding:0; max-width:1610px; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:56px 30px}
.ab-eq__card:nth-child(even){margin-top:64px}
.ab-eq__media{aspect-ratio:1/1; overflow:hidden; border-radius:clamp(20px,1.8vw,32px); background:var(--c-cream); box-shadow:0 22px 44px -30px rgba(35,42,38,.45)}
.ab-eq__media img{width:100%; height:100%; object-fit:cover; display:block}
.ab-eq__k{margin:22px 0 0; font-size:15.5px; font-weight:700; letter-spacing:.02em; color:var(--c-violet)}
.ab-eq__t{margin:6px 0 0; font-size:26px; font-weight:800; line-height:1.35; color:var(--c-violet-ink)}
.ab-eq__d{margin:10px 0 0; font-size:18px; line-height:1.75; color:var(--c-slate); word-break:keep-all}
.ab-eq .j-foot{margin-top:clamp(40px,3.6vw,64px); text-align:center}
@media (max-width:1100px){
  .ab-eq__grid{grid-template-columns:repeat(2,minmax(0,1fr)); gap:44px 24px}
  .ab-eq__card:nth-child(even){margin-top:48px}
  .ab-eq__t{font-size:23px} .ab-eq__d{font-size:17px}
}
@media (max-width:640px){
  .ab-eq__grid{grid-template-columns:minmax(0,1fr); gap:40px}
  .ab-eq__card:nth-child(even){margin-top:0}
  .ab-eq__t{font-size:22px}
}

/* 비급여수가표 — 한 섹션 안 표 두 개, 칸 가운데·격자 선 */
.ab-price__note{max-width:900px; margin:22px auto 0; text-align:center; font-size:16px; line-height:1.8; color:var(--c-slate)}
.ab-price__block{max-width:1100px; margin:clamp(36px,3.4vw,60px) auto 0}
.ab-price__t{margin:0 0 18px; text-align:center; font-size:30px; font-weight:800; color:var(--c-violet-ink)}
.ab-price .tablewrap{border-radius:var(--r-lg)}
:root body[data-page="price"] main .ab-price table.price{min-width:0; font-size:17px}
:root body[data-page="price"] main .ab-price table.price thead th{background:var(--c-violet-deep); color:#fff; font-size:16.5px; font-weight:700; letter-spacing:0; text-transform:none}
:root body[data-page="price"] main .ab-price table.price :is(th, td){padding:15px 18px; text-align:center; border:1px solid var(--hairline-l); font-size:17px}
:root body[data-page="price"] main .ab-price table.price td:last-child{white-space:normal}
@media (max-width:640px){
  :root body[data-page="price"] main .ab-price table.price :is(th, td){padding:12px 10px; font-size:15.5px}
  .ab-price__t{font-size:24px}
}
/* ── 병원소개 4페이지 블록 끝 ── */

/* ── 미백 소개 사진 가운데 맞춤 (2026-10-02, 사용자 "이 사진 가운데 맞춰달라") ──
   원본(tci00980000018, 2400×1345)은 입이 왼쪽(중심 x≈770)에 있어 4:3.4 칸에 가운데로 잘리면 입 왼쪽 끝이 잘린다.
   왼쪽 끝 기준으로 맞추면 칸 가운데(1582/2 ≈ 791)와 입 중심이 거의 겹친다. step_photos 의 같은 사진은 그대로. */
:root body[data-page="whitening"] main .j-intro__media img{object-position:0% 50%}
/* ── 미백 소개 사진 가운데 맞춤 끝 ── */

/* ── 홈 닥터스 칼럼 (2026-10-02, 사용자 "방송 자문 대신 닥터 컬럼") — 방송 자문 카드(j-press) 부품을 그대로 쓴다 ──
   칼럼 썸네일(t.jpg)은 480×360(4:3) 이고 위쪽에 제목 글자가 든 안내 그림이 많아, 16:10 으로 자르면 글자가 잘린다 → 홈에서는 4:3.
   목록 아래 '닥터스 칼럼 전체 보기'(대표원장 판과 같은 .j-dr__more) 가운데, 그 아래 치료사례 각주(.ba-note). */
body[data-page="home"] .j-press__media{aspect-ratio:4/3}
.j-press__all{margin:0; text-align:center}
.j-press .ba-note{margin-block-start:clamp(14px,1.2vw,20px)}
/* ── 홈 닥터스 칼럼 끝 ── */
/* 홈 닥터스 칼럼 4편 (2026-10-02 사용자 "세개말고 4개") — 1281 이상 4칸(목록 폭 1600), 901~1280 은 2칸, 900 이하는 기존 1칸 */
@media (min-width:901px){ body[data-page="home"] .j-press__list{width:min(1600px,100%); grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (min-width:1281px){ body[data-page="home"] .j-press__list{grid-template-columns:repeat(4,minmax(0,1fr))} }
/* 기본 틀(.container 1280)로는 4칸이 302px 로 좁아 이 섹션만 틀을 목록 폭 1600 + 좌우 여백으로 넓힌다 → 1920 에서 카드 약 382 */
body[data-page="home"] .j-press .container{max-width:calc(1600px + 2 * var(--gutter))}

/* ── 마우스를 따라오는 커서 (2026-10-02 처음, 2026-10-06 병원 비교 페이지 _review/cursor/ 에서 6번 '치아 표식 따라오기'로 교체) — app.js 끝 같은 이름 블록과 짝 ──
   평소 화살표는 그대로 두고, 로고의 치아 표식(logo-mark-white.png 를 mask 로, 먹색 + 흰 테두리)이 화살표 오른쪽 아래에서 살짝 늦게 따라온다.
   (16:25 화살표를 숨기고 표식만 커서로 해 봤다가 병원 "화살표 있는 게 좋다"로 16:30 되돌림)
   링크·버튼 위에서는 표식이 1.3배. 입력칸 위에서는 숨긴다. 홈 · 마우스 화면에서만(터치 기기는 없음). */
.cur{position:fixed; left:0; top:0; z-index:2147483000; pointer-events:none; opacity:0; transition:opacity .2s}
.cur.is-on{opacity:1}
.cur.is-on.is-off{opacity:0}
.cur__tooth{position:fixed; left:0; top:0; display:block; margin:16px 0 0 16px; pointer-events:none; will-change:transform}
.cur__tooth::before{content:""; position:absolute; left:0; top:0; width:24px; height:24px; background:var(--c-violet-ink);
  -webkit-mask:url('../img/logo-mark-white.png') center/contain no-repeat; mask:url('../img/logo-mark-white.png') center/contain no-repeat;
  filter:drop-shadow(0 0 1px #fff) drop-shadow(0 0 1px #fff); transition:transform .25s ease}
.cur.is-hot .cur__tooth::before{transform:scale(1.3)}
/* ── 마우스 커서 끝 ── */

/* ── 하단 상담 신청 바 (2026-10-02 사용자 "밑에 이렇게 만들어줘" — 참고: 이름 · 전화번호 · 상담부위 선택 · 개인정보 동의 · 상담신청하기 한 줄 고정 바) ──
   전 페이지 공통, 1181px 이상에서만 보인다(1180 이하는 기존 모바일 하단 버튼 .mcta 가 그 자리를 쓴다).
   접수 = renew/consult.php → 관리자 '문의관리'. 마크업 parts.py consult_bar(), 동작 app.js 끝 "하단 상담 신청 바".
   색은 사이트 것으로: 바탕 = 모바일 하단 버튼과 같은 --c-violet-ink 반투명, 신청 버튼 = 헤더 '진료 예약'과 같은 --c-violet. */
:root{--cbar-h:76px}
.cbar{display:none}
.cbar__hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
@media (min-width:1181px){
  .site-footer.ft2{padding-bottom:var(--cbar-h)}   /* 바 높이만큼 푸터를 늘려 마지막 줄이 가려지지 않게(푸터 색 그대로 이어짐) */
  .cbar{position:fixed; z-index:84; left:50%; bottom:0; transform:translateX(-50%); display:block;
    width:min(1500px, calc(100% - 2 * var(--gutter))); height:var(--cbar-h); box-sizing:border-box; padding:0 12px 0 16px;
    border-radius:18px 18px 0 0; background:rgba(35,42,38,.84); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
    box-shadow:0 -10px 30px -16px rgba(0,0,0,.45)}
  .cbar__form{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)) auto auto; align-items:center; column-gap:14px; height:100%}   /* 세 칸 같은 폭 */
  .cbar__in{flex:1 1 0; min-width:0; height:42px; box-sizing:border-box; margin:0; padding:0 14px; border:0; border-radius:9px; background:#fff;
    font:inherit; font-size:15px; color:var(--c-graphite)}
  .cbar__in::placeholder{color:#8a847c; opacity:1}
  select.cbar__in{appearance:none; -webkit-appearance:none; padding-right:38px; cursor:pointer;
    background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%2333302b' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 15px center / 12px 8px}
  select.cbar__in:invalid{color:#8a847c}
  select.cbar__in option{color:var(--c-graphite)}
  .cbar__agree{flex:none; display:flex; align-items:center; gap:8px; padding-inline:4px 8px; font-size:14px; color:#e3e9e5; white-space:nowrap}
  .cbar__agree label{display:flex; align-items:center; gap:10px; cursor:pointer}
  .cbar__agree input{appearance:none; -webkit-appearance:none; flex:none; width:22px; height:22px; margin:0; border:0; border-radius:50%; background:#fff; cursor:pointer}
  .cbar__agree input:checked{background:var(--c-violet) radial-gradient(circle, #fff 0 4px, transparent 4.5px)}
  .cbar__more{margin:0; padding:0; border:0; background:none; font:inherit; font-size:14px; color:#aeb9b2; cursor:pointer}
  .cbar__more:hover{color:#fff; text-decoration:underline; text-underline-offset:3px}
  .cbar__go{flex:none; min-width:200px; height:52px; margin:0; padding:0 30px; border:0; border-radius:999px; background:var(--c-violet); color:#fff;
    font:inherit; font-size:19px; font-weight:800; letter-spacing:-.01em; cursor:pointer; box-shadow:0 8px 20px -10px rgba(0,0,0,.6); transition:filter .25s}
  .cbar__go:hover{filter:brightness(1.12)}
  .cbar__go[disabled]{opacity:.6; cursor:progress}
  .cbar :focus-visible{outline:2px solid #fff; outline-offset:2px}
  .cbar__msg{position:absolute; left:50%; bottom:calc(100% + 12px); transform:translateX(-50%); max-width:calc(100% - 40px); box-sizing:border-box;
    padding:12px 22px; border-radius:999px; background:#fff; color:var(--c-violet-ink); font-size:15px; font-weight:600; white-space:nowrap;
    box-shadow:0 12px 30px -12px rgba(35,42,38,.45)}
  .cbar__msg:empty{display:none}
  .cbar__msg.is-err{color:#a3402f}
  /* 바가 화면 아래 76px 를 덮으므로 홈 히어로 아래쪽 표시(점 · 화살표)를 그만큼 올린다 */
  .hero-dots,.hero-arrows{bottom:calc(var(--sp-xl) + var(--cbar-h))}
}
@media (min-width:1181px) and (max-width:1440px){
  .cbar__form{column-gap:10px} .cbar__in{padding-inline:12px} .cbar__agree{font-size:13px; padding-inline:2px 4px} .cbar__more{font-size:13px}
  .cbar__go{min-width:0; padding:0 24px; font-size:17px}
}
.cbar-dlg{width:min(520px, calc(100% - 32px)); box-sizing:border-box; padding:34px 32px 28px; border:0; border-radius:16px; background:#fff; color:var(--c-graphite)}
.cbar-dlg::backdrop{background:rgba(20,24,22,.55)}
.cbar-dlg h3{margin:0 0 18px; font-size:21px; font-weight:800; color:var(--c-violet-ink)}
.cbar-dlg dl{margin:0; display:grid; grid-template-columns:auto 1fr; gap:10px 18px; font-size:15px; line-height:1.6}
.cbar-dlg dt{font-weight:700; color:var(--c-violet-ink)} .cbar-dlg dd{margin:0; color:var(--c-slate)}
.cbar-dlg p{margin:18px 0 0; font-size:14px; line-height:1.6; color:var(--c-slate)}
.cbar-dlg button{display:block; margin:24px auto 0; min-width:120px; height:46px; padding:0 26px; border:0; border-radius:999px;
  background:var(--c-violet); color:#fff; font:inherit; font-size:15px; font-weight:700; cursor:pointer}
/* ── 하단 상담 신청 바 끝 ── */

/* ── 홈 히어로 2번 모델 위치 (2026-10-02, 사용자 "애 위치 살짝 오른쪽으로, 문구와 첫번째 사진과 동일한 위치로") ──
   1920×911 에서 1번 얼굴 중심 ≈1257px, 2번 ≈1047px — 2번이 제목 글자와 겹쳤다. 화면 가로에 꽉 맞춘 사진이라 object-position 으로는 못 옮겨
   사진 상자를 11% 오른쪽으로 민다(넘치는 오른쪽은 .hero overflow 로 숨음). 왼쪽 빈칸은 사진 왼쪽 끝과 같은 회색,
   사진 왼쪽 8% 를 투명→불투명으로 흐려 이음매가 안 보이게. 사진 파일은 그대로(생성본 후처리 금지). 모바일(640 이하)은 기존 66% 30% 그대로. */
@media (min-width:641px){
  /* 10-06 순서 바꿈으로 둘째 장(3번 모델 · 2번 · 1번). 사진 배경을 베이지로 바꾼 파일(imgpipe hero-bg2 후보1)의 왼쪽 끝 색으로 빈칸을 칠한다
     (해시 없는 사진 주소는 CDN 으로 넘어가 예전 사진이 나와 CSS 배경 그림으로는 못 맞춘다). 사진을 또 바꾸면 이 색도 다시 잴 것 */
  body[data-page="home"] .hero-slide:nth-child(2){background:#d7dce7}   /* 10-07 낮 폴더 원본 + 병원 견본 치아 합성 4400px(mouth-ck2) 사진 왼쪽 끝 색 — 사진을 바꾸면 다시 잴 것 */
  body[data-page="home"] .hero-slide:nth-child(2) img{left:11%;
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 8%); mask-image:linear-gradient(90deg,transparent 0,#000 8%)}
}
/* ── 홈 히어로 2번 모델 위치 끝 ── */

/* ── 홈 숏츠 다듬기 (2026-10-02 사용자 "여기 눌려 있는 느낌 그리고 글이 위아래 높이가 안 맞아 보여") ──
   ① ‹ › 버튼이 카드에서 4~6px 떨어져 있어, 회색 썸네일인 첫 카드와 붙어 눌린 버튼처럼 보였다.
      → 버튼을 카드에서 16px 띄우고(창 좌우 여백도 버튼 + 22px 로 다시 계산), 더 넘길 곳이 없는 쪽 버튼은 숨긴다(app.js 숏츠 draw 의 is-start/is-end).
   ② 카드 아래 설명이 한 줄짜리·두 줄짜리가 섞여 높이가 들쭉날쭉 → build.py 제목에 넣은 줄바꿈으로 모두 두 줄, 높이도 두 줄로 고정.
      1100 이하(카드 150px)에서는 그 줄바꿈을 끄고 예전처럼 자연스럽게 감는다. */
.j-yt__prev{left:auto; right:calc(100% + 16px)}
.j-yt__next{right:auto; left:calc(100% + 16px)}
@media (min-width:1101px){
  .j-yt__view,.j-yt__bar{width:min(1440px, 100% - 2 * (clamp(34px,2.5vw,48px) + 22px))}
  /* 제목 줄도 같은 폭 — 1101~1919 에서 제목(컨테이너 여백)과 카드 왼쪽 끝이 어긋나던 것(2026-10-02 제목 왼쪽 정렬) */
  .j-yt > .j-yt__head{max-width:none; width:min(1440px, 100% - 2 * (clamp(34px,2.5vw,48px) + 22px)); padding-inline:0}   /* .j-yt > .container(1472·16) 보다 앞서게 */
}
.j-yt__arrow{transition:background var(--dur-fast) var(--ease-out), opacity .3s, visibility .3s}
.j-yt.is-start .j-yt__prev,.j-yt.is-end .j-yt__next{opacity:0; visibility:hidden; pointer-events:none}
.j-yt__t{min-height:3.1em}   /* line-height 1.55 × 두 줄 */
@media (max-width:1100px){ .j-yt__br{display:none} }
/* ── 홈 숏츠 다듬기 끝 ── */

/* ── 전 페이지 점검 — 글꼴·숫자·크기·가운데 맞춤·사진 밖 글자 (2026-10-02, barunyoung-fc) ──
   사용자 "모든 페이지 폰트가 같은지, 숫자가 같은지, 폰트 크기도 같은지, 가운데 맞춤 해야 하는 부분, 사진보다 글자가 삐죽 나오는지 모두 체크해서 수정".
   측정 도구 ~/work/qa-1002/scan.py (운영 실측 1920/1280/390). */
/* 라미네이트 치료사례 — 가운데 제목 아래 촬영 범위 라벨·도입·결과 글이 왼쪽에 붙어 있었다(사용자 지적 "이 문구는 가운데 정렬").
   라벨은 쌍이 둘 이상인 사례에만 남김(pages_laminate._cases). */
.lm-cases .lm-pair__head, .lm-cases .lm-case__lead, .lm-cases .lm-case__result{text-align:center}
/* ── 전 페이지 점검 끝 ── */

/* ── 홈 숏츠 썸네일 정렬 (2026-10-02 사용자 "문구가 위 아래로 보여 정렬해야 해 보기 편하게") ──
   유튜브 썸네일은 영상마다 사진·문구 높이가 제각각이라(위 문구만/아래 문구만/둘 다, 7번은 사진 없음) 줄이 맞지 않았다.
   → 썸네일에서 사진 부분만 잘라(assets/img/yt/<id>-ph.jpg) 모든 카드의 같은 자리(가운데 3:2)에 두고,
     썸네일에 박혀 있던 문구는 글자 그대로 HTML 로 옮겨 사진 바로 위(아래 맞춤)·바로 아래(위 맞춤)에 같은 크기로 놓는다.
   문구 원고 = build.py 숏츠 목록의 3·4번째 값, 마크업 = sections_j.j_shorts. 원래 썸네일 그림은 assets/img/yt/<id>.jpg 그대로 남아 있다. */
.j-yt__thumb--set{display:flex; flex-direction:column}
.j-yt__tt,.j-yt__tb{flex:1 1 0; min-height:0; display:flex; justify-content:center; padding-inline:7%;
  color:#fff; font-weight:700; line-height:1.32; letter-spacing:-.01em; text-align:center; word-break:keep-all; text-wrap:balance}
.j-yt__tt{align-items:flex-end; padding-block-end:7%; font-size:clamp(12px,1.03vw,20px)}
.j-yt__tb{align-items:flex-start; padding-block-start:7%; font-size:clamp(11.5px,.89vw,17px); font-weight:600}
.j-yt__ph{flex:none; display:block; aspect-ratio:3/2; overflow:hidden}
.j-yt__thumb--set .j-yt__ph img{object-fit:contain}
/* ── 홈 숏츠 썸네일 정렬 끝 ── */

/* ── 전 페이지 점검 2 — 숫자·사진 옆 글·마지막 줄 가운데 (2026-10-02, barunyoung-fc) ──
   ~/work/qa-1002/scan.py(운영 실측 1920/1280/1024/768/390) 결과로 고친 것. 앞 '전 페이지 점검' 블록의 이어짐. */
/* 1) 숫자 — 세리프(Cormorant) 기본 옛 숫자는 01 이 'OI', 1 이 'I' 로 보였다(원데이 장점·라미네이트 체크·임플란트 과정 번호 등).
      페이지마다 01/OI 가 섞이지 않게 전 페이지 숫자를 표준 숫자(lining)로. Pretendard 숫자는 원래 표준이라 변화 없음. */
html{font-variant-numeric:lining-nums}
/* 사진 모서리 단계 번호 — 임플란트(세리프 동그라미)와 충치·사랑니·신경치료(고딕 사각·알약)가 글꼴·크기가 달랐다 → 세리프 700 · 17px 하나로(모양은 그대로) */
:root body main:not(#_) :is(.j-proc__no, .j-flow__no, .gc-stage__no, .wz-type__no, .wz-step__no, .wz-cg__no){font-family:var(--serif); font-weight:700; font-size:17px; font-variant-numeric:lining-nums}
/* 카드 제목 위 번호 — 재수술 '실패 원인' 20 · 사랑니 '발치 전/당일/회복' 24 → 24 */
:root body main:not(#_) :is(.j-feat__no, .wzs-card__no){font-size:24px; font-weight:600}
/* 큰 번호(장점 카드·진행 단계·방법·병원 둘러보기) — 데스크톱 42, 모바일 28 (원데이 장점 번호는 모바일 28 규칙이 뒤 규칙에 덮여 42 로 남아 있었다) */
@media (min-width:901px){ :root body main:not(#_) .ab-slide__no{font-size:42px} }
@media (max-width:640px){ :root body main:not(#_) .j-ben__no{font-size:28px} }
/* 사랑니 '주의사항' 번호 사각형(30·34px) — 다른 모든 페이지 주의사항 번호(.j-num 42px·22 / 모바일 32·17)와 같게 */
:root body main:not(#_) .wzs .wzs-card__list li span{width:42px; height:42px; font-size:22px}
@media (max-width:640px){ :root body main:not(#_) .wzs .wzs-card__list li span{width:32px; height:32px; font-size:17px} }

/* 2) 사진 옆 글이 사진보다 위·아래로 삐져나오던 곳 — 글이 길면 사진이 글 높이까지 같이 늘어난다(짧으면 지금 크기·비율 그대로).
      인트로 12곳(1280 기준: 보철 88px·심미보철 71·잇몸성형 55 등), 라미네이트 '모든 분에게 가능한 것은 아닙니다' 156, 방법 12,
      충치 치료법 카드 74, 전체 임플란트 사례 48. 대표원장(about-doctor) 약력은 사진이 따라 내려오는 sticky 라 그대로. */
@media (min-width:901px){
  :root body main:not(#_) .j-intro__media:not(.j-intro__media--frame),
  :root body main:not(#_) .lm-chk__media{align-self:stretch; justify-self:stretch; width:100%}
  :root body main:not(#_) .lm-m__visual{align-self:stretch; display:flex; flex-direction:column}
  :root body main:not(#_) .lm-m__visual > .lm-m__media{flex:1 0 auto; width:100%}
}
@media (min-width:641px){ :root body main:not(#_) .gc-tx__media{align-self:stretch; justify-self:stretch; width:100%} }
@media (min-width:1001px){ :root body main:not(#_) .j-cr__after{align-self:stretch} }

/* 3) 가운데 맞춤 — 격자 마지막 줄에 한 칸만 남아 왼쪽에 붙던 곳을 가운데로 */
@media (max-width:560px){
  :root body main:not(#_) .j-proc__steps > .j-proc__step:last-child:nth-child(odd){grid-column:1 / -1 !important; justify-self:center; width:calc(50% - 13px)}
}
@media (max-width:900px){
  :root body main:not(#_) .j-flow__steps > li:last-child:nth-child(odd){grid-column:1 / -1; justify-self:center; width:calc(50% - 10px)}
  /* 함께 보시면 좋은 진료 — 3칸·2칸 격자에서 남는 칸을 가운데로 */
  :root body main:not(#_) .j-rels{display:flex; flex-wrap:wrap; justify-content:center}
  :root body main:not(#_) .j-rels > *{flex:0 0 calc((100% - 44px) / 3)}
}
@media (max-width:560px){ :root body main:not(#_) .j-rels > *{flex-basis:calc((100% - 22px) / 2)} }
@media (min-width:641px) and (max-width:1100px){
  :root body main:not(#_) .lm-grid--3 > :last-child:nth-child(odd){grid-column:1 / -1; justify-self:center; width:calc(50% - 32px)}
  :root body main:not(#_) .wz-steps--5 > :last-child:nth-child(odd){grid-column:1 / -1; justify-self:center; width:calc(50% - 8px)}
  :root body main:not(#_) .wz-q__cases--5 > :last-child:nth-child(odd){grid-column:1 / -1; justify-self:center; width:calc(50% - 6px)}
  :root body main:not(#_) .cl-grid > :last-child:nth-child(odd){grid-column:1 / -1; justify-self:center; width:calc(50% - 9px)}
}
/* 가이드 임플란트 '고려하는 경우' 아래 한 줄 안내 — 900px 상자 안에서 글이 왼쪽에 붙어 보였다 → 상자를 글 길이에 맞춰 가운데 */
:root body main:not(#_) .j-bens__note{width:fit-content; max-width:min(900px, 100%)}
/* ── 전 페이지 점검 2 끝 ── */
/* ══════════════════════════════════════════════════════════════
   견본 색·글씨체 맞추기 (2026-10-06) — 병원 피드백 "견본과 똑같이, 연한민트·연한베이지가 자연스럽게, 맨밑 쑥색이 너무 들어감,
   글씨체도 견본처럼 섞어서". 견본 = d.rebeauty.co.kr 리뷰티의원 템플릿(사이트의 원래 틀, ~/work/template).
   사용자 결정: 영문 소제목 되살리기(홈) · 제목 700/그림자 없음(홈 1)·4) 블록에서 고침) · 범위 = 홈 + 공통(강조색·오시는 길 띠).
   견본 바탕 순서: 연민트(--c-mist) → 연베이지(--c-canvas) → 크림(--c-cream)을 번갈아, 진한 녹색은 얇은 띠 한 곳 + 먹색 푸터.
   ══════════════════════════════════════════════════════════════ */

/* ── 1) 강조색 = 견본 값(#517264 → #5e8c7e). 공통 토큰 ── */
:root{--c-violet:#5e8c7e}

/* ── 2) 홈 바탕 — 민트 · 베이지 · 크림이 번갈아 이어지게(흰 바탕 구간 없앰) ── */
body[data-page="home"] .j-acc,
body[data-page="home"] .hm-stack{background:var(--c-mist)}
body[data-page="home"] .j-dr{background:var(--c-canvas)}
body[data-page="home"] .j-press{background:var(--c-cream)}
body[data-page="home"] .j-yt{background:var(--c-violet)}   /* 2026-10-06 병원 "쑥색 같아서 민트처럼 살짝 연하게" → 진녹 #3f5f55 → 강조색 #5e8c7e(흰 글자 대비 3.8) */
body[data-page="home"] .j-yt__t{color:#fff}   /* 바탕이 밝아져 카드 아래 제목을 80% → 100% 흰색 */
body[data-page="home"] .j-bal{background:var(--c-mist)}
body[data-page="home"] .gal-sec,
body[data-page="home"] .home-decl{background:var(--c-canvas)}   /* 둘러보기와 한 바탕 — 연민트 선언 카드가 그 위에 떠 보이게 */

/* ── 3) 홈 영문 소제목 — 견본 .eyebrow 모양(세리프 600 · 대문자 · 금색 · 앞 가는 선) ── */
body[data-page="home"] .j-en,
body[data-page="home"] main .eyebrow{display:inline-flex; align-items:center; gap:14px; font-family:var(--serif);
  font-weight:600; letter-spacing:.28em; text-transform:uppercase; color:var(--c-gold-deep)}
body[data-page="home"] .j-en::before,
body[data-page="home"] main .eyebrow::before{content:""; flex:none; width:24px; height:1px; background:var(--c-gold); opacity:.85}
body[data-page="home"] .j-yt .j-en{color:#e3d1a3}   /* 진한 바탕 위 금색은 밝은 쪽(기존 숏츠 값) */
/* 병원 둘러보기 라벨은 .eyebrow 부품(20px · 안쪽 .kr 자간 .02em) — 다른 섹션 영문 라벨(.j-en 24 / 모바일 17)과 같게 */
body[data-page="home"] .j-en, body[data-page="home"] .gal-sec .eyebrow{font-size:22px}   /* 2026-10-06 살짝 작게 24 → 22 */
body[data-page="home"] main .eyebrow .kr{letter-spacing:inherit}
@media (max-width:640px){ body[data-page="home"] .j-en, body[data-page="home"] .gal-sec .eyebrow{font-size:15px} }   /* 2026-10-06 폰 글씨 살짝 작게: 17 → 15 */
body[data-page="home"] .hero-cap .eyebrow{color:#fff; margin-block-end:var(--sp-lg);
  text-shadow:0 1px 3px rgba(35,42,38,.40), 0 2px 14px rgba(35,42,38,.45)}   /* 견본 히어로처럼 흰 글자, 사진 위라 그림자 */

/* ── 4) 선언 카드 — 진녹 카드 → 연민트 카드 + 견본 '철학' 문구처럼 세리프, 마지막 말은 기울인 강조색 ── */
body[data-page="home"] .home-decl__card--word{background:var(--c-mist)}
body[data-page="home"] .home-decl__big{font-family:var(--serif); font-weight:500; letter-spacing:-.02em; color:var(--c-violet-ink)}
body[data-page="home"] .home-decl__last{font-weight:500; font-style:italic; color:var(--c-violet); border-bottom-color:var(--c-violet)}
body[data-page="home"] .home-decl__no{font-family:var(--serif); font-weight:600}

/* ── 5) 오시는 길 · 진료시간 띠(전 페이지 공통) — 진녹 → 견본 상담 구간과 같은 크림 바탕 + 먹색 글자 ── */
.ft2-band{background:var(--c-cream); color:var(--c-graphite)}
/* 띠는 먹색 푸터 안에 있어 소수점 경계(125·150% 배율)에서 먹색이 한 줄 비친다 → 푸터 바탕 맨 위 2px 를 비운다 */
.site-footer.ft2{background:linear-gradient(transparent 2px, var(--c-violet-ink) 2px)}
.ft2-band::before{display:none}   /* 흰 로고 무늬는 밝은 바탕에서 안 보이고, 견본 상담 구간에도 없다 */
.ft2-h h3{color:var(--c-violet-ink)}
.ft2-nbtn{background:#fff; color:var(--c-violet-ink); border-color:var(--hairline-l)}
.ft2-nbtn:hover{background:var(--c-mist)}
.ft2-map__frame{background:var(--c-mist); box-shadow:0 20px 50px -30px rgba(35,42,38,.35)}
.ft2-addr{color:var(--c-violet-ink)}
.ft2-addr em{color:var(--c-slate)}
.ft2-addr--sub{color:var(--c-slate)}
.ft2-ico{color:var(--c-gold-deep)}
.ft2-hours th{color:var(--c-slate)}
.ft2-hours td{color:var(--c-violet-ink)}
.ft2-band--simple .ft2-hours th,.ft2-band--simple .ft2-hours td{border-bottom-color:var(--hairline-l)}
.ft2-tel{color:var(--c-violet-ink)}
.ft2-tel:hover{color:var(--c-violet)}
/* 선언 문구 잘림 창 넓히기 (2026-10-06, 사용자 "이 부분이 짤려 보여" — Edge 캡처에서 '노력합니다' 오른쪽·윗부분이 잘림)
   단어마다 overflow:hidden 창(줄 높이 1.2)이 있는데, 기울임체는 오른쪽으로, 윈도 바탕체는 위로 창을 넘는다.
   창 안쪽 여백을 늘리고 같은 만큼 음수 바깥 여백을 줘서 배치·줄 간격은 그대로, 보이는 창만 넓힌다. */
body[data-page="home"] .hd-lr .lr{padding-top:.2em; margin-top:-.2em}
body[data-page="home"] .hd-rot__w{padding:.2em .3em 0; margin:-.2em -.3em 0}
/* 가로로 닦이는 교체 모션: 창이 넓어진 만큼(.3em) 이동 거리를 보정해 글자가 제자리에 머물게 */
html.mo body[data-page="home"] .hd-rot__w:not(.is-on){transform:translate3d(calc(-100% + .3em),0,0)}
html.mo body[data-page="home"] .hd-rot__w:not(.is-on) .hd-rot__t{transform:translate3d(calc(100% + .3em),0,0)}
/* ── 6) 첫 화면(히어로) 밝게 — 병원 "사진 3장 뒤배경이 어두워 보여서 베이지톤으로 밝게, 보여지는 첫쪽 글씨는 다 지울 거라서" (2026-10-06) ──
   글씨를 읽히게 깔던 어두운 막을 걷고 글씨는 화면에서 숨긴다(병원 새 문구가 오면 _main_body.html 의 글을 고치고 이 숨김을 지울 것).
   h1 은 검색·화면 읽기 프로그램용으로 남긴다. 밝은 사진 위라 헤더·슬라이드 버튼은 흰색 → 먹색. 사진 배경 베이지는 이미지 교체(imgpipe hero-bg1~3). */
body[data-page="home"] .hero-slide::after,
body[data-page="home"] .hero::after{display:none}   /* 사진 위 어두운 막 + 아래쪽을 진한 구간으로 잇던 그라데이션(다음 구간은 이제 연민트) */
body[data-page="home"] .hero-cap > :not(h1){display:none}
body[data-page="home"] .hero-cap h1{position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0}
/* 헤더 — 투명 헤더의 먹색 글자는 사진의 어두운 머리카락과 겹쳐 안 읽힌다 → 스크롤했을 때와 같은 흰 헤더를 처음부터 */
body[data-page="home"] .site-header{background:rgba(255,255,255,.97); color:var(--c-violet-ink); box-shadow:0 1px 0 var(--hairline-l)}
body[data-page="home"] .site-header .nav-cta{border-color:var(--c-violet); color:var(--c-violet)}
body[data-page="home"] .site-header .nav-cta:hover{background:var(--c-violet); color:#fff}
/* 슬라이드 점·화살표·멈춤 */
body[data-page="home"] .hero-dots button::before{border-color:var(--c-violet-ink); background:rgba(35,42,38,.28)}
body[data-page="home"] .hero-dots button:hover::before{background:rgba(35,42,38,.55)}
body[data-page="home"] .hero-dots button[aria-current="true"]::before{background:radial-gradient(circle, var(--c-violet-ink) 0 3px, transparent 3.5px)}
body[data-page="home"] .hero-dots button:focus-visible{outline-color:var(--c-violet-ink)}
body[data-page="home"] .hero-arrows button{border-color:rgba(35,42,38,.35); color:var(--c-violet-ink)}
body[data-page="home"] .hero-arrows button:hover{background:rgba(35,42,38,.07)}
/* 점·화살표가 사진의 어두운 머리카락 위에 놓이면 먹색이 묻힌다(사용자 "이거 안보여") → 반투명 흰 바탕을 깔아 밝은 곳·어두운 곳 어디서나 보이게 */
body[data-page="home"] .hero-dots{padding:0 6px; border-radius:999px; background:rgba(255,255,255,.78);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); box-shadow:0 2px 12px rgba(35,42,38,.14)}
body[data-page="home"] .hero-arrows button{background:rgba(255,255,255,.78); border-color:rgba(35,42,38,.16);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); box-shadow:0 2px 12px rgba(35,42,38,.14)}
body[data-page="home"] .hero-arrows button:hover{background:rgba(255,255,255,.95)}
/* ── 7) 로고 — 병원 "왼쪽 위 병원 글씨체도 변경"(2026-10-06, 사용자 선택 A 본명조) ──
   로고 그림(logo.png / logo-white.png) 대신 치아 표식 + 글자. 표식은 logo-mark-white.png 를 mask 로 써서 글자색(currentColor)을 따른다
   → 투명 헤더 흰색 · 흰 헤더 먹색 · 모바일 메뉴·푸터 흰색이 자동. 글자: 본명조 600(Noto Serif KR, 일곱 글자만 받음) + 영문 Cormorant. */
.brand-lockup{gap:11px; line-height:1}
.brand-mark{flex:none; width:42px; height:42px; background:currentColor;
  -webkit-mask:url('../img/logo-mark-white.png') center/contain no-repeat; mask:url('../img/logo-mark-white.png') center/contain no-repeat}
/* 두 줄 폭을 맞춘다(한글 자간 .2em ≈ 영문 자간 .16em, 1920 약 179px) — 마지막 글자 뒤 자간은 음수 여백으로 상쇄 */
.brand-name{display:flex; flex-direction:column; align-items:center; white-space:nowrap}
.brand-kr{font-family:"Noto Serif KR",var(--serif); font-weight:600; font-size:22px; line-height:1.15; letter-spacing:.2em; margin-right:-.2em}
.brand-en{margin-top:4px; font-family:var(--serif); font-weight:600; font-size:9.6px; line-height:1; letter-spacing:.16em; margin-right:-.16em; text-transform:uppercase; opacity:.85}
@media (max-width:1280px){   /* 1181~1280 은 메뉴가 꽉 차 로고와 첫 메뉴 사이가 좁다(옛 로고 11px) → 한 단계 작게 */
  .brand-mark{width:40px; height:40px}
  .brand-kr{font-size:21px}
  .brand-en{font-size:9.2px}
}
@media (max-width:640px){
  .brand-lockup{gap:9px}
  .brand-mark{width:38px; height:38px}
  .brand-kr{font-size:20px}
  .brand-en{font-size:8.8px}
}
.drawer-top .brand-mark{width:34px; height:34px}
.drawer-top .brand-kr{font-size:18px}
.drawer-top .brand-en{font-size:8px}
.ft2-brand .brand-lockup{color:#fff}
/* ── 견본 색·글씨체 블록 끝 ── */

/* ══════════════════════════════════════════════════════════════
   상세 페이지에도 메인 글씨체·색감 (2026-10-06, 사용자 "메인페이지 글씨체 색감 다른 상세페이지 모든 페이지에 적용해줘")
   메인(홈)과 같게: ① 영문 라벨(j-en)을 전 페이지에 되살려 메인과 같은 금색 명조 ② 흰 바탕 없이 베이지 → 민트 → 크림이 차례로 돌게
   ③ 진녹 띠(체크 카드 j-who · 충치 체크 gc-chk · 라미네이트 체크 lm-chk)는 메인 숏츠처럼 민트(강조색).
   특이도: 앞 블록들의 main:not(#_) 류를 이기도록 html:not(#_) 를 붙인다. 홈은 앞의 '견본 색·글씨체' 블록이 그대로 정본.
   ══════════════════════════════════════════════════════════════ */

/* ── ① 영문 라벨 — 메인 .j-en 과 같은 모양(세리프 600 · .28em · 금색 · 앞 가는 선 24×1 · 22 / 폰 15) ── */
html:not(#_) .j-en{display:inline-flex; align-items:center; gap:14px; font-family:var(--serif); font-size:22px;
  font-weight:600; letter-spacing:.28em; text-transform:uppercase; color:var(--c-gold-deep)}
html:not(#_) .j-en::before{content:""; flex:none; width:24px; height:1px; background:var(--c-gold); opacity:.85}
@media (max-width:640px){ html:not(#_) .j-en{font-size:15px} }
/* 가운데 정렬 머리말은 선을 양쪽에(견본 .center .eyebrow) */
html:not(#_) :is(.j-center, .lm-case__head, .j-press__head) .j-en{justify-content:center}

/* ── ② 구간 바탕 — 히어로(밝은 베이지) 다음부터 메인처럼 민트 → 크림 → 베이지 차례(이웃한 두 구간이 같은 색이 되지 않음) ──
   탭 페이지(보철)는 탭 안에서 다시 센다. 띠(체크 카드)·탭 줄·대표원장 소개는 제외. 마지막 구간이 크림이면 아래 '오시는 길'(크림)과 붙지 않게 베이지. */
html:not(#_) body:not([data-page="home"]) :is(main, .pt-panel) > section.section:not(.pt-tabs, .dr2-sec, .gc-chk, .j-dark):nth-child(3n+2){background:var(--c-mist)}
html:not(#_) body:not([data-page="home"]) :is(main, .pt-panel) > section.section:not(.pt-tabs, .dr2-sec, .gc-chk, .j-dark):nth-child(3n){background:var(--c-cream)}
html:not(#_) body:not([data-page="home"]) :is(main, .pt-panel) > section.section:not(.pt-tabs, .dr2-sec, .gc-chk, .j-dark):nth-child(3n+1){background:var(--c-canvas)}
html:not(#_) body:not([data-page="home"]) :is(main, .pt-panel) > section.section:not(.pt-tabs, .dr2-sec, .gc-chk, .j-dark):last-child:nth-child(3n){background:var(--c-canvas)}

/* ── ③ 진녹 띠 → 민트(메인 숏츠와 같은 #5e8c7e). 사진 쪽 그라데이션·덮개도 같은 색으로, 띠 위 금색 글자는 흰색으로(민트 위 금색은 대비 부족) ── */
html:not(#_) :is(.j-who, .j-dark, .gc-chk){background:var(--c-violet)}
html:not(#_) .j-who__media::after{background:linear-gradient(90deg, rgba(94,140,126,0) 55%, var(--c-violet) 100%)}
@media (max-width:900px){ html:not(#_) .j-who__media::after{background:linear-gradient(180deg, rgba(94,140,126,0) 55%, var(--c-violet) 100%)} }
html:not(#_) .gc-chk__bg::after{background:linear-gradient(180deg, rgba(94,140,126,.88), rgba(94,140,126,.94))}
html:not(#_) :is(.j-who, .j-dark, .gc-chk) :is(.j-en, .j-en--gold, .lm-chk__no, .lm-m__no){color:#fff}
html:not(#_) :is(.j-who, .j-dark, .gc-chk) .j-en::before{background:#fff; opacity:.7}
/* ── ④ 상세 페이지 첫 화면(히어로) — 메인처럼 밝게: 사진 위 먹색 막 → 밝은 베이지 막(글씨 쪽 진하게, 사진 쪽 투명), 글씨는 먹색. 헤더도 메인처럼 처음부터 흰 헤더 ── */
html:not(#_) body:not([data-page="home"]) .phero{background:var(--c-canvas); color:var(--c-violet-ink)}
html:not(#_) body:not([data-page="home"]) .phero::before{--hs-tint:linear-gradient(90deg,rgba(247,244,238,.95) 0%,rgba(247,244,238,.86) 34%,rgba(247,244,238,.35) 62%,rgba(247,244,238,0) 86%);
  --tint:linear-gradient(90deg,rgba(247,244,238,.95) 0%,rgba(247,244,238,.86) 34%,rgba(247,244,238,.35) 62%,rgba(247,244,238,0) 86%)}
html:not(#_) body:not([data-page="home"]) .phero :is(h1, h1 *){color:var(--c-violet-ink); text-shadow:none}
html:not(#_) body:not([data-page="home"]) .phero p{color:var(--c-slate); text-shadow:none}
html:not(#_) body:not([data-page="home"]) .phero .crumb, html:not(#_) body:not([data-page="home"]) .phero .crumb a{color:var(--c-slate)}
html:not(#_) body:not([data-page="home"]) .phero .crumb a:hover{color:var(--c-violet)}
html:not(#_) body:not([data-page="home"]) .site-header{background:rgba(255,255,255,.97); color:var(--c-violet-ink); box-shadow:0 1px 0 var(--hairline-l)}
html:not(#_) body:not([data-page="home"]) .site-header .nav-cta{border-color:var(--c-violet); color:var(--c-violet)}
html:not(#_) body:not([data-page="home"]) .site-header .nav-cta:hover{background:var(--c-violet); color:#fff}
/* 좁은 화면은 글씨가 화면 폭 전체로 깔려 오른쪽(사진 쪽)에서 얼굴과 겹친다 → 막을 고르게 깔아 사진은 은은하게, 글씨는 또렷하게 */
@media (max-width:900px){
  html:not(#_) body:not([data-page="home"]) .phero::before{--hs-tint:linear-gradient(180deg,rgba(247,244,238,.80),rgba(247,244,238,.88));
    --tint:linear-gradient(180deg,rgba(247,244,238,.80),rgba(247,244,238,.88))}
}
/* ── 상세 페이지 메인 글씨체·색감 블록 끝 ── */

/* ── 홈 히어로 = '히어로 사진 2' 폴더 사진 (2026-10-07 사용자 "히어로 사진 2 폴더 있는 사진으로 교체") ──
   새 사진은 1942×809(가로로 긴 2.4:1), 모델이 이미 오른쪽(얼굴 중심 약 77% · 76% · 82%)에 있고 배경은 베이지 빛결.
   PC: 가운데 기준으로 자르면 모델이 오른쪽 끝에 걸려 → 사진 오른쪽 기준(왼쪽 배경만 잘림). 2번째 장을 11% 오른쪽으로 밀던 설정은 해제.
   휴대폰(390×658, 사진 높이 기준으로 맞춤): 얼굴이 화면 가운데 오게 장마다 기준점 계산. 사진을 바꾸면 이 값도 다시 잴 것 */
@media (min-width:641px){
  body[data-page="home"] .hero-slide:nth-child(n) img{object-position:100% 50%}
  body[data-page="home"] .hero-slide:nth-child(2) img{left:0; -webkit-mask-image:none; mask-image:none}
}
@media (max-width:640px){
  body[data-page="home"] .hero-slide:nth-child(1) img{object-position:85% 50%}
  body[data-page="home"] .hero-slide:nth-child(2) img{object-position:84% 50%}
  body[data-page="home"] .hero-slide:nth-child(3) img{object-position:92% 50%}
}
/* ── 홈 히어로 '히어로 사진 2' 블록 끝 ── */

/* ══════════════════════════════════════════════════════════════
   병원 요청 시트 '대문 첫페이지' (2026-10-12) — 홈 수정 6건. build.py HERO_SLIDES · HOME_SECTIONS, parts.py quick() 와 짝
   ══════════════════════════════════════════════════════════════ */

/* ── 1) 첫 화면 3장 ──
   1 = 예전 홈페이지 첫 화면(베이지 빛결 sec1_bg) + 원장님 수술 사진(예전 홈 sec2_img) + "바른진료가…" (병원 "기존홈피참고")
   2 = 예전 홈페이지 둘째 화면(회갈색 진료실 sec2_bg) + "더 나은 내일의 진료를 위해…" 흰 글자
   3 = 지금 모델 사진 한 장(2번 모델, 글자 없음)
   글귀 구도 = 병원 참고(리앤장치과 lienPearl 첫 화면): 작은 영문 → 큰 병원 이름 → 세로 가는 선 → 기울인 영문 한 줄 → 짧은 한글 두 줄, 왼쪽 정렬.
   예전 장(사진 1장)용 nth-child 위치 규칙(10-01~10-07)보다 앞서도록 html 을 붙여 특이도를 올렸다. */
html body[data-page="home"] .hero-slide.hs .hs-bg{left:0; object-position:50% 50%; -webkit-mask-image:none; mask-image:none}
html body[data-page="home"] .hero-slide.hs--model .hs-bg{object-position:100% 50%}
html body[data-page="home"] .hero-slide.hs{background:none}
html body[data-page="home"] .hs-photo{position:absolute; z-index:1; margin:0; top:var(--header-h); right:0; bottom:0; width:47%; overflow:hidden}
html body[data-page="home"] .hero-slide.hs .hs-photo img{object-position:50% 28%}
html body[data-page="home"] .hs-cap{position:absolute; z-index:2; top:var(--header-h); bottom:0; left:0; width:53%;
  box-sizing:border-box; padding-inline:max(clamp(24px,4.7vw,90px), calc((100vw - 1440px) / 2)) 40px;   /* 1920 = 아래 구간 1440 틀 왼쪽 끝(240) · 1366 = 로고 왼쪽 끝 근처(64) */
  display:flex; flex-direction:column; justify-content:center; align-items:flex-start; color:var(--c-violet-ink); text-align:left}
html body[data-page="home"] .hs--dark .hs-cap{width:62%}
@media (min-width:1181px){ html body[data-page="home"] .hs-cap{bottom:var(--cbar-h)} }   /* 아래 상담 바(76)를 뺀 보이는 높이의 가운데 */
.hs-en{margin:0; font-family:var(--serif); font-size:clamp(12px,.86vw,16px); font-weight:600; letter-spacing:.34em; text-transform:uppercase; color:var(--c-gold-deep)}
.hs-name{margin:clamp(10px,.9vw,16px) 0 0; font-family:"Gowun Batang",var(--serif); font-weight:700; font-size:clamp(40px,4.3vw,82px);
  line-height:1.12; letter-spacing:.02em; color:var(--c-violet-ink)}   /* 레퍼런스 글꼴 = 예전 홈페이지 .gowun_bold(고운바탕 700) */
.hs-line{display:block; width:1px; height:clamp(40px,4.2vw,80px); margin:clamp(20px,2vw,36px) 0 clamp(16px,1.5vw,26px) .14em; background:var(--c-gold)}
.hs-acc{margin:0; font-family:var(--serif); font-style:italic; font-weight:500; font-size:clamp(19px,1.55vw,30px); letter-spacing:.01em; color:var(--c-violet)}
.hs-copy{margin:clamp(10px,.9vw,16px) 0 0; font-family:"Gowun Batang",var(--serif); font-weight:700; font-size:clamp(15px,1.04vw,20px);
  line-height:1.85; letter-spacing:-.01em; color:#4b524e}
.hs--dark .hs-cap{text-shadow:0 1px 18px rgba(35,30,25,.28)}
.hs--dark .hs-en,.hs--dark .hs-acc{color:#ead9b0}
.hs--dark .hs-name{color:#fff}
.hs--dark .hs-line{background:rgba(255,255,255,.7)}
.hs--dark .hs-copy{color:rgba(255,255,255,.94)}
/* 장이 바뀔 때 글귀가 차례로 떠오른다(JS 없음 — .is-on 만 따름). 움직임 줄이기 설정이면 전역 규칙이 바로 보이게 한다 */
.hs-cap > *{opacity:0; transform:translateY(16px); transition:opacity .9s var(--ease-out), transform .9s var(--ease-out)}
.hero-slide.is-on .hs-cap > *{opacity:1; transform:none}
.hero-slide.is-on .hs-cap > :nth-child(2){transition-delay:.12s}
.hero-slide.is-on .hs-cap > :nth-child(3){transition-delay:.26s}
.hero-slide.is-on .hs-cap > :nth-child(4){transition-delay:.38s}
.hero-slide.is-on .hs-cap > :nth-child(5){transition-delay:.5s}
@media (max-width:640px){
  /* 휴대폰(390×658): 1장은 위 글귀 · 아래 원장님 사진, 2장은 글귀 가운데 */
  html body[data-page="home"] .hs-photo{top:auto; left:0; right:0; bottom:0; width:auto; height:46%}
  html body[data-page="home"] .hero-slide.hs .hs-photo img{object-position:50% 24%}
  html body[data-page="home"] .hs-cap{top:var(--header-h); bottom:46%; width:100%; padding:0 24px}
  html body[data-page="home"] .hs--dark .hs-cap{bottom:0; width:100%; padding-bottom:64px}
  html body[data-page="home"] .hero-slide.hs--dark .hs-bg{object-position:28% 50%}
  html body[data-page="home"] .hero-slide.hs--model .hs-bg{object-position:84% 50%}
  .hs-en{font-size:10.5px; letter-spacing:.26em}
  .hs-name{margin-top:8px; font-size:33px}
  .hs-line{height:26px; margin:14px 0 12px .14em}
  .hs-acc{font-size:16.5px}
  .hs-copy{margin-top:6px; font-size:13.5px; line-height:1.75}
}

/* ── 2) 자주 찾으시는 치료 — 제목·영문 라벨 삭제(병원 "자주찾으시는치료 - 삭제", h2 는 화면 읽기용으로만 남김) ──
   고정 화면 사진 줄 공식에서 제목 몫(1920: 36 + 1.15×65 + 41 ≈ 152 · 850 미만 157)을 뺀다 → 빈 줄이 위아래로 벌어지지 않고 사진 줄이 그만큼 커진다.
   상한은 그대로 clamp(360,29vw,560) — 1920×911 줄 약 557(위 100 · 아래 150 여백 유지), 1366×768 약 396. */
@media (min-width:1001px){
  body[data-page="home"] .hm-stack .j-acc__row{height:min(clamp(360px,29vw,560px), max(280px, calc(72.5vh - var(--header-h))))}
}

/* ── 3) 닥터스 칼럼 — 크기 살짝 줄임(목록 1600 → 1440, 다른 홈 구간과 같은 폭 · 1920 카드 382 → 342, 카드 글자 한 단계) ──
   부제 '대표원장 김태영이 직접 전하는 치과 이야기' — 병원 "글씨 키우고 다른 글씨체로" + 사용자 "레퍼런스 글씨체로" → 고운바탕 700 · 19 → 27 */
body[data-page="home"] .j-press .container{max-width:calc(1440px + 2 * var(--gutter))}
body[data-page="home"] .j-press__head{width:min(1440px,100%)}
@media (min-width:901px){ body[data-page="home"] .j-press__list{width:min(1440px,100%)} }
body[data-page="home"] .j-press__title{font-size:clamp(18px,1.1vw,21px)}
body[data-page="home"] .j-press__ex{font-size:clamp(15px,.86vw,16.5px)}
body[data-page="home"] .j-press__date,
body[data-page="home"] .j-press__foot{font-size:clamp(14px,.83vw,16px)}
body[data-page="home"] .j-press__ch{font-size:13px}
@media (min-width:901px) and (max-width:1000px){ body[data-page="home"] .j-press__ex{font-size:14px} }   /* 3칸이 가장 좁은 구간은 예전 값 그대로 */
body[data-page="home"] .j-press .j-ans{margin-top:clamp(14px,1.1vw,20px); font-family:"Gowun Batang",var(--serif); font-weight:700;
  font-size:clamp(20px,1.4vw,27px); line-height:1.5; letter-spacing:-.01em; color:var(--c-violet-ink)}

/* ── 4) 숏츠 바탕 #3f5f55 + 글씨 전부 흰색 — PC·폰 같게 ──
   처음(같은 날 오전)엔 병원 "PC 너무 진함"으로 PC 만 연한 녹색 #8fb3a6 + 먹색 글자로 했다가,
   사용자 "이 초록색은 이걸로(캡처 #3f5f55) 바꿔 주고 글씨 색상은 하양색으로" 로 바꿈(흰 글자 대비 7.0). */
body[data-page="home"] .j-yt{background:#3f5f55; color:#fff}
body[data-page="home"] .j-yt .j-h2,
body[data-page="home"] .j-yt__more,
body[data-page="home"] .j-yt__t{color:#fff}
html:not(#_) body[data-page="home"] .j-yt .j-en{color:#fff}
body[data-page="home"] .j-yt .j-en::before{background:rgba(255,255,255,.7)}
body[data-page="home"] .j-yt__bar{background:rgba(255,255,255,.22)}
body[data-page="home"] .j-yt__bar::after{background:#fff}
body[data-page="home"] .j-yt__arrow{background:rgba(255,255,255,.16); color:#fff}
body[data-page="home"] .j-yt__arrow:hover{background:rgba(255,255,255,.32)}

/* ── 5) 오른쪽 퀵메뉴 — 위챗 · 라인 · 왓츠앱(병원 "사이드바 위챗,라인,왓츠앱 추가", 사용자 "수정해줘" → 공개) ──
   병원 계정 주소를 받기 전에는 눌러도 이동하지 않는 버튼(.is-off). parts.py WECHAT·LINE·WHATSAPP 을 채우면 링크가 된다 */
.quick .ico svg{display:block; width:24px; height:24px}
.quick a.is-off{cursor:default}
.quick a{padding-block:12px}   /* 7칸 — 1616×900 화면에서도 위아래가 헤더·상담 바에 닿지 않게(16 → 12) */
/* ── 6) 선언 구간 오른쪽 = 방송 출연 영상 3편(2026-10-12 사용자 "메인 영상 폴더 안의 영상을 넣어줘", 순서는 병원 카톡 1·2·3번) ──
   카드(왼쪽 글 카드와 같은 크기·모서리) 안을 위 라벨 · 가운데 영상(원본 비율 약 16:9) · 아래 1·2·3 단추로 나눈다.
   한 편이 끝나면 다음 편이 이어서 나오고, 3번이 끝나면 1번 첫 화면으로 돌아가 멈춘다(app.js '홈 방송 출연 영상'). */
body[data-page="home"] .home-decl__card--video{background:#1f2523}
.hd-tv{position:absolute; inset:0; background:#000}
/* 2026-10-13 병원 "영상 1 2 3 없애고 그냥 영상만 꽉차게" — 단추·안쪽 여백·라벨 없이 영상이 칸 전체를 채운다.
   칸이 10:9 이면 16:9 영상 양옆(자막·이름표)이 잘려서, 두 카드의 비율을 영상 비율(1294:720)로 바꿨다(아래 '방송 영상 칸 꽉 차게' 블록). */
.hd-tv__v{display:block; width:100%; height:100%; background:#000; object-fit:cover}
@media (max-width:900px){
  body[data-page="home"] .home-decl__card--video{aspect-ratio:1294/720; min-height:0}
}
/* ── 7) 대표원장 판 — 왼쪽 원장님 사진 + 오른쪽 '바른영치과여야만 하는 이유'(예전 홈페이지 chapter4 구성) ──
   예전 값: 고운바탕 700 · 번호 '첫 번째,' 는 1px 테두리(#413831)만 · 항목 사이 선 #b1a79f.
   같은 날 사용자 "배경 없이 넣어줘" → 예전의 베이지 판(#fbf1e8)·오른쪽 아래 로고 무늬를 빼고 글을 구간 바탕 위에 바로 둔다(번호 속은 투명).
   사진 45 : 글 55 (예전 사진 45% · 글 55%), 내용 폭 1440(다른 홈 구간과 같은 틀). */
body[data-page="home"] .j-dr--why .j-dr__in{grid-template-columns:minmax(0,45fr) minmax(0,55fr); gap:0; align-items:stretch;
  max-width:1472px; margin-inline:auto; padding-inline:16px}
body[data-page="home"] .j-dr--why .j-dr__ph--doc{aspect-ratio:auto; min-height:100%; margin:0; align-self:stretch;
  border-radius:clamp(14px,1.56vw,30px); background:#f1f0ee}
body[data-page="home"] .j-dr--why .j-dr__ph--doc img{object-position:50% 12%}
.j-why{position:relative; overflow:hidden; display:flex; flex-direction:column; justify-content:center;
  padding:clamp(24px,2.6vw,50px) 0 clamp(24px,2.6vw,50px) clamp(36px,5vw,96px); background:none;
  font-family:"Gowun Batang",var(--serif); font-weight:700; color:#413831}
.j-why__t{margin:0 0 clamp(8px,1vw,20px); font-family:inherit; font-weight:700; font-size:clamp(26px,2.3vw,44px); line-height:1.3; letter-spacing:-.01em; color:#413831}
.j-why__list{list-style:none; margin:0; padding:0}
.j-why__list li{display:flex; align-items:center; gap:clamp(14px,1.3vw,25px); padding-block:clamp(18px,2.4vw,46px); border-bottom:1px solid #b1a79f}
.j-why__no{flex:none; font-size:clamp(24px,1.9vw,36px); line-height:1.2; white-space:nowrap; color:transparent; -webkit-text-stroke:1px #413831}
.j-why__list p{margin:0; font-size:clamp(16px,1.25vw,24px); line-height:1.55; word-break:keep-all}
.j-why .j-dr__more{align-self:flex-start; margin-block-start:clamp(22px,2.2vw,40px); font-family:var(--ff); font-weight:600}
@media (max-width:900px){
  body[data-page="home"] .j-dr--why .j-dr__in{grid-template-columns:1fr}
  body[data-page="home"] .j-dr--why .j-dr__ph--doc{aspect-ratio:1/1; min-height:0}
  .j-why{padding:28px 4px 8px}
  .j-why__list li{align-items:flex-start; flex-direction:column; gap:6px}
}
/* ── 8) 의료진소개(about-doctor) — 병원 시트 '병원소개'(2026-10-12) ──
   진료과목 줄·소개 두 단락·연수회 각주를 빼고 병원 문구(DR_MSG)를 넣은 뒤, 사용자 "이런 느낌으로(po-ve 의료진)" →
   작은 자간 라벨 '대표원장' · 큰 굵은 이름 + 옆 작은 전공 · 굵은 고딕 한 줄 문장 + 회색 설명 · 이력 두 칸. 사진은 좌우 반전본(doctor-flip.png). */
/* 사진 칸 — 사용자 "이런 식으로(po-ve 의료진) 사진이 들어가야 해, 좌우 여백 짧게": 누끼(doctor-cut.png)를 세로로 긴 칸 아래에 크게,
   인물 좌우 여백이 칸 폭의 약 10% 만 남게. 칸 바탕은 사진처럼 밝은 회색 그라데이션, 옛 좌우 흐림 마스크는 끔(누끼라 필요 없음). */
@media (min-width:1001px){ .dr2{grid-template-columns:minmax(0,640fr) minmax(0,745fr)} }   /* 1000 이하는 앞 규칙대로 한 칸(사진 위 · 글 아래) */
.dr2__photo{aspect-ratio:4/5; background:linear-gradient(180deg,#f1f1ef 0%,#e6e7e4 100%)}
.dr2__photo img{left:50%; bottom:0; height:auto; width:84%; max-height:96%; object-fit:contain; object-position:50% 100%;
  -webkit-mask-image:none; mask-image:none}
@media (max-width:1000px){ .dr2__photo{width:100%; aspect-ratio:4/5; max-width:520px; margin-inline:auto} }   /* width 없으면 auto 여백에서 폭이 0 이 됨(안의 사진이 absolute) */
.dr2__role{margin:0; font-size:13px; font-weight:600; letter-spacing:.42em; color:#8a8f8b}
.dr2__name{display:flex; flex-wrap:wrap; align-items:baseline; gap:8px 16px; margin:clamp(10px,.9vw,16px) 0 0; font-size:inherit; font-weight:400; line-height:1.2}
.dr2__name b{font-size:clamp(38px,2.9vw,56px); font-weight:800; letter-spacing:-.03em; color:var(--c-violet-ink)}
.dr2__name span{font-size:clamp(14px,.83vw,16px); color:#8a8f8b; letter-spacing:-.01em}
.dr2__msg{margin-block-start:clamp(30px,2.6vw,50px)}
.dr2__msg-t{margin:0; font-size:clamp(19px,1.25vw,24px); font-weight:700; line-height:1.5; letter-spacing:-.03em; color:var(--c-violet-ink)}
.dr2__msg-d{margin:clamp(12px,1vw,18px) 0 0; font-size:clamp(15px,.89vw,17px); line-height:1.85; letter-spacing:-.02em; color:#6b6f6c}
.dr2__cvs{display:grid; grid-template-columns:1fr 1fr; column-gap:clamp(20px,2.2vw,44px); margin-block-start:clamp(28px,2.4vw,46px);
  padding-block-start:clamp(22px,1.9vw,36px); border-top:1px solid rgba(35,42,38,.12)}
.dr2__cvs .dr2__cv{margin:0}
.dr2__cvs .dr2__cv + .dr2__cv{margin-block-start:clamp(14px,1.2vw,22px)}
.dr2__cvs .dr2__cv li{font-size:clamp(14px,.83vw,16px); line-height:1.85; color:#666}
@media (max-width:640px){ .dr2__cvs{grid-template-columns:1fr} .dr2__cvs > div + div{margin-block-start:14px} .dr2__msg-d br{display:none} }
/* 정돈(2026-10-12 사용자 "여기 배치 깔끔하게") — 사진·글을 한 덩어리로 가운데 모으고(1920 에서 오른쪽 퀵메뉴와 겹치지 않게),
   사진은 화면 높이 안에 들어오는 크기로, 글은 사진 높이 가운데에. 이력 묶음마다 작은 제목. */
@media (min-width:1001px){
  .dr2{grid-template-columns:minmax(0,500px) minmax(0,680px); justify-content:center; column-gap:clamp(48px,5.5vw,104px); align-items:center}
  .dr2__photo{position:relative; top:auto}
}
@media (min-width:641px){ .dr2__cvs{grid-template-columns:minmax(0,1.12fr) minmax(0,1fr); column-gap:clamp(24px,2.4vw,44px)} }   /* 640 이하는 앞 규칙대로 한 칸 */
.dr2__cvh{margin:0 0 8px; font-size:12.5px; font-weight:600; letter-spacing:.24em; color:#8a8f8b}
.dr2__cvs .dr2__cv + .dr2__cvh{margin-top:clamp(16px,1.4vw,24px)}
.dr2__cvs .dr2__cv + .dr2__cv{margin-block-start:0}
.dr2__cvs .dr2__cv li{font-size:clamp(14px,.8vw,15.5px); line-height:1.8}
/* ── 병원 요청 시트 '대문 첫페이지' 블록 끝 ── */


/* ══════════════════════════════════════════════════════════════
   글씨체 = 포브의원 방식 · 첫 화면 1장 · 오른쪽 바로가기 (2026-10-13)
   병원 "글씨체 자체가 별로"(poveclinic.com 참고) → 사용자 "사이트 전체 글씨체를 이렇게"(카톡 정리 4가지).
   ① 한글은 Pretendard 하나 — --serif 뒤에 Pretendard 를 넣어 영문 세리프 자리의 한글도 고딕(예전엔 기기 기본 글꼴로 나오던 곳 포함),
      10-12 홈 고운바탕 자리(첫 화면·칼럼 부제·방송 영상·'이유' 판)도 고딕. 로고 글자(.brand-kr 본명조)는 병원 로고 글씨라 그대로.
   ② 한글을 얇게 — Pretendard 는 assets/css/pretendard.css 에서 굵기 상한 600(CSS 의 700·800 도 600 으로 그려짐),
      큰 제목(페이지·섹션 제목·첫 화면 제목)은 500. 영문 Cormorant 는 parts.py 링크에서 400·500 만 받아 600·700 도 500.
      가짜 굵게(font-synthesis weight)는 끈다 — 켜 두면 없는 굵기를 브라우저가 번지게 칠한다.
   ③ 글자 먹색 #232a26(초록빛) → 갈색빛 #2b2520. 같은 변수를 바탕으로 쓰는 어두운 띠(푸터·메뉴·하단 바 등)는 예전 색 그대로.
   ══════════════════════════════════════════════════════════════ */
:root{--c-ink-text:#2b2520; --c-ink-bg:#232a26; --c-violet-ink:var(--c-ink-text);
  --serif:"Cormorant Garamond",Georgia,"Pretendard Variable","Pretendard",sans-serif}
html{font-synthesis:style}
:is(.section--ink, .section--photo, .menu-drawer, .site-footer, .mcta, .j-yt, .j-cta--dark, .home-decl__card--photo){--c-violet-ink:var(--c-ink-bg)}
.site-footer .ft2-band{--c-violet-ink:var(--c-ink-text)}   /* 푸터 안 크림 띠(오시는 길)는 글자라 갈색빛 */
html:not(#_) :is(.hs-name, .hs-copy, .j-why){font-family:var(--ff)}
html:not(#_) body[data-page="home"] .j-press .j-ans{font-family:var(--ff)}
html:not(#_) :is(.phero h1, .j-h2, .display-kr, .bah__t, .ab-loc__name, .hs-name){font-weight:500}
.hs-copy{color:#4f4740}   /* 첫 화면 설명 — 초록빛 회색(#4b524e)을 갈색빛으로 (어두운 2장은 .hs--dark 흰색 그대로) */
html:not(#_) .j-why__no{color:var(--c-gold); -webkit-text-stroke:0; font-weight:500}   /* 홈 '이유' 판 번호 — 가변 글꼴(Pretendard)에 외곽선을 그으면 글자 안 겹친 선이 비쳐 속 찬 금색으로 */

/* ── 첫 화면 1장 — 병원 "글귀 전체 저 문구로"(build.py HERO_SLIDES[0]) + "너무 뚝 끊기지 않게(그라데이션)" ──
   참고 캡처처럼 제목 아래 짧은 가로선.
   사진·이음(2026-10-13 오후, 사용자 "참고처럼 그라데이션, 이음이 자연스럽게" → 한 번 되돌린 뒤 "再试一次, 참고 느낌대로"):
   병원 참고(1337 폭)를 재 보니 사진이 화면 왼쪽 12% 부터 깔리고, 크림이 화면 37%(사진 33%)까지 이어진 뒤 따뜻한 갈색 벽(약 #695c53)으로
   거의 고르게 넘어가며(사진 33~54%), 원장님은 화면 63% 부터. 그래서
   · 사진 = 원본 surgery-src 좌우 반전, x 0~3290 · y 269~2293 (시안 구도 실측) + 따뜻한 갈색 톤 + 시안 색 맞춤
     = hero-1013c-doctor.jpg (2200×1353, 만든 과정 ~/work/hero-1013). 왼쪽 끝 다른 직원 몸은 안개 아래로 들어간다.
   · 사진 칸은 높이에 맞춘 사진 비율(최대 화면 폭)로 오른쪽에 세우고, 위 측정값 그대로 크림 막(바탕 #f3ebe1)을 사진 위에 덮는다.
   · 맨 왼쪽은 사진째 투명하게 빼 바탕(베이지 빛결)과 이음매가 없게. */
.hs--doc .hs-line{width:clamp(28px,2.4vw,46px); height:1px; margin:clamp(22px,2.2vw,40px) 0 clamp(18px,1.8vw,32px)}
html body[data-page="home"] .hs--doc .hs-photo{left:auto; right:0; width:auto; max-width:100%; aspect-ratio:2200/1353; height:calc(100% - var(--header-h));   /* 높이를 적어 둬야 폭이 화면에 걸릴 때 비율 때문에 높이가 줄지 않는다 */
  -webkit-mask-image:linear-gradient(90deg, transparent 0, transparent 8%, #000 26%); mask-image:linear-gradient(90deg, transparent 0, transparent 8%, #000 26%)}
html body[data-page="home"] .hero-slide.hs--doc .hs-photo img{object-position:100% 22%}
/* 안개는 사진에 구웠다(같은 날 사용자 "시안과 똑같은 느낌" — 시안을 재서: 사진 폭 44.7% 중심 · 폭 6% 로지스틱, 안개 진하기별 금빛 크림색,
   안개는 원장님 뒤에만(윤곽 rembg birefnet-portrait), 이음 구간 사진은 살짝 번지게, 수술등 높이는 경계를 물려 등이 보이게 — ~/work/hero-1013/fogbake6.py).
   CSS 크림 막은 폰(아래 세로 이음)에서만 쓴다 */
html body[data-page="home"] .hs--doc .hs-photo::after{content:""; position:absolute; inset:0; pointer-events:none}
@media (max-width:640px){
  /* 폰은 사진이 아래 46%(전체 폭) — 위 끝을 같은 크림색 안개로, 원장님은 오른쪽 */
  html body[data-page="home"] .hs--doc .hs-photo{left:0; aspect-ratio:auto; height:46%;
    -webkit-mask-image:linear-gradient(180deg, transparent 0, #000 14%); mask-image:linear-gradient(180deg, transparent 0, #000 14%)}
  html body[data-page="home"] .hs--doc .hs-photo::after{background:linear-gradient(180deg, rgba(243,235,225,.95) 0%, rgba(243,235,225,.6) 20%, rgba(243,235,225,.2) 40%, rgba(243,235,225,0) 55%)}
  .hs--doc .hs-line{width:26px; height:1px; margin:14px 0 12px}
}

/* ── 오른쪽 바로가기 — 사용자 참고 캡처 "이 모양으로": 검은 알약 바 · 흰 단색 아이콘(parts._QUICK_ICONS) · 흰 글자 · 칸 줄 없음 · 맨 아래 접기 ──
   예전 흰 카드 규칙(‘우측 플로팅 퀵메뉴’·‘퀵메뉴 아이콘’·10-12 7칸)을 덮는다. 보이는 폭(1616 이상)은 그대로 */
.quick{padding:20px 0 12px; background:rgba(43,37,32,.94); border:0; border-radius:999px; box-shadow:0 18px 40px -18px rgba(20,16,12,.55)}
.quick a, .quick__fold{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; width:76px; padding:8px 4px;
  border:0; background:none; font-size:11.5px; font-weight:500; line-height:1.25; letter-spacing:-.01em; color:rgba(255,255,255,.92); white-space:nowrap;
  transition:opacity var(--dur-fast) var(--ease-out)}
.quick a:hover, .quick__fold:hover{background:none; color:#fff; opacity:.72}
.quick .ico{width:30px; height:30px; border:0; border-radius:0; background:none; overflow:visible}
.quick .ico svg{width:30px; height:30px}
.quick__fold{width:52px; margin:6px auto 0; padding-top:12px; border-top:1px solid rgba(255,255,255,.2); cursor:pointer}
.quick__fold .ico, .quick__fold .ico svg{width:22px; height:22px}
.quick__fold .v{display:none}
/* 접기(2026-10-13 사용자 참고 캡처 "접히는 느낌으로"): 항목이 높이·투명도로 스르르 접히고, 다 접히면 회색 테두리 검은 동그라미 + '바로가기'.
   접힌 항목은 visibility 로 탭 이동에서도 빠진다(접히는 0.45초가 끝난 뒤) */
.quick{transition:padding .45s var(--ease-out), border-radius .45s var(--ease-out), box-shadow .45s var(--ease-out)}
.quick a{max-height:84px; overflow:hidden;
  transition:max-height .45s var(--ease-out), width .45s var(--ease-out), padding .45s var(--ease-out), opacity .3s var(--ease-out), visibility 0s linear 0s}
.quick__fold{transition:width .45s var(--ease-out), height .45s var(--ease-out), margin .45s var(--ease-out), padding .45s var(--ease-out), border-color .3s, opacity var(--dur-fast) var(--ease-out)}
.quick.is-folded{padding:0; border-radius:50%; box-shadow:0 0 0 6px rgba(200,198,194,.78), 0 18px 40px -18px rgba(20,16,12,.55)}
.quick.is-folded a{max-height:0; width:66px; padding-block:0; opacity:0; visibility:hidden; pointer-events:none;   /* 폭도 동그라미(66)에 맞춰야 타원이 안 된다 */
  transition:max-height .45s var(--ease-out), width .45s var(--ease-out), padding .45s var(--ease-out), opacity .2s var(--ease-out), visibility 0s linear .45s}
.quick.is-folded .quick__fold{width:66px; height:66px; margin:0; padding:0; gap:3px; border-top-color:transparent}
.quick.is-folded .quick__fold .ico, .quick.is-folded .quick__fold .ico svg{width:24px; height:24px}
.quick.is-folded .quick__fold-t{font-size:11px; font-weight:600}
.quick.is-folded .quick__fold .v{display:inline}
/* ── 글씨체 = 포브의원 방식 블록 끝 ── */


/* ══════════════════════════════════════════════════════════════
   글씨체 = 한글 Pretendard 하나 · 영문만 얇은 명조 (2026-10-13 오후, 최종)
   한때 사용자 "全部的字体都要프리텐다드"로 영문까지 Pretendard 로 했다가, 이어서 사용자 "전체 글씨가 이걸로"(카톡 정리 4가지:
   한글은 고딕 하나 · 한글 얇게 · 영문만 얇은 명조 · 갈색빛 먹색) → 영문은 위 '포브의원 방식' 블록 그대로 Cormorant 400·500.
   한글은 로고(.brand-kr)·손글씨 자리까지 Pretendard (--serif 는 Cormorant 뒤에 Pretendard — 세리프 자리의 한글도 고딕).
   ══════════════════════════════════════════════════════════════ */
html:not(#_) :is(.brand-kr, .w2-hand){font-family:var(--ff)}
/* 로고 두 줄 폭 — Pretendard 한글(본명조보다 좁음)을 자간 .305em 으로 Cormorant 영문(.16em) 폭에 맞춤(1920 약 180) */
html:not(#_) .brand-kr{letter-spacing:.305em; margin-right:-.305em}
/* ── 글씨체 = 한글 Pretendard · 영문 명조 블록 끝 ── */


/* ══ 사진 모서리 전부 직각 (2026-10-13) — 병원 "사진들이 다 짤리는 느낌이라 홈페이지 사진들 전체 그냥 각지게" ══
   전 페이지(30종 + 칼럼 글) 1440·390 실측으로 사진·영상을 감싼 둥근 틀(아치 120px 포함)을 모두 찾아 0 으로(~/work/req-1013/radius.py).
   틀마다 미디어쿼리·페이지별 규칙이 여럿이라 !important 로 한 번에 덮는다. 단추·알약·바로가기 동그라미는 사진이 아니라 그대로.
   선언 두 칸(.home-decl__card)은 영상 칸과 짝이라 글 칸도 같이 직각. */
html:not(#_) main :is(img, video, picture, figure),
html:not(#_) :is(.j-intro__media, .lm-flow__ph, .gal-card, .gal-hero, .gal-thumb, .ba-shot, .j-zz__media, .wz-q__card, .wz-step__ph, .wz-type__card,
  .j-feat, .j-feat__media, .j-cs__media, .j-cs__evmedia, .j-cr__media, .j-cr__after, .j-flow__fig, .ab-slide__media, .ab-eq__media, .dr2__photo,
  .gc-stage__card, .gc-tx__media, .gc-tx__card, .j-acc__row, .j-acc__item, .j-dr__ph, .j-dr--why, .j-press__card, .j-yt__thumb, .j-bal__pair,
  .hd-tv__v, .home-decl__card, .lm-chk__media, .lm-m__media, .cl-card__a){border-radius:0 !important}
/* ── 사진 모서리 직각 블록 끝 ── */


/* ══ 하위 페이지 맨 위 = 사진 없이 깔끔하게 (2026-10-13) — 병원 "들어가면 나오는 첫 위 사진들이 다 없이 깔끔하게 제목에 맞게"(LUCID 참고) ══
   페이지별 사진(hero-sub/*.jpg · phero--* 사진 · 칼럼 공용)을 모두 걷고, 밝은 회베이지 면에 비스듬한 빛·그림자 면(LUCID 첫 화면 결)을 CSS 로만 그린다.
   글은 가운데 — 의료진소개·전후사진 머리(.bah)와 같은 정렬. 사진 미리 받기(preload)는 build.py 에서 뺐다.
   예전 사진 규칙(body[data-page=…] .phero::before …!important)보다 강하게 html:not(#_) + !important. */
html:not(#_) body:not([data-page="home"]) .phero{background:#ebe7e1}
html:not(#_) body:not([data-page="home"]) .phero::before{opacity:1 !important; transform:none !important; background-color:transparent !important;
  background-image:
    linear-gradient(112deg, rgba(255,255,255,.78) 0%, rgba(255,255,255,0) 32%),
    linear-gradient(112deg, rgba(255,255,255,0) 51%, rgba(255,255,255,.5) 51.8%, rgba(255,255,255,.16) 63.4%, rgba(255,255,255,0) 64.2%),
    linear-gradient(112deg, rgba(84,72,60,0) 64.2%, rgba(84,72,60,.075) 65%, rgba(84,72,60,.025) 100%),
    linear-gradient(180deg, #f2efea 0%, #e6e1da 100%) !important;
  background-size:cover !important; background-position:center !important; background-repeat:no-repeat !important}
html:not(#_) body:not([data-page="home"]) .phero .container{text-align:center}
html:not(#_) body:not([data-page="home"]) .phero p{margin-inline:auto}
/* ── 하위 페이지 맨 위 깔끔하게 블록 끝 ── */


/* ══ 사진 줄 · 크게 보기 (2026-10-13) — 사용자 "LUCID(teethlucid.com 병원 둘러보기)처럼: 사진 크기 같게, 원래 버튼 없애고, 누르면 큰 사진 + 좌우 단추"
   → 같은 날 "검은 선 빼고, 마우스로 잡고 자유롭게 가로로, 예시와 똑같이": LUCID 와 같은 Swiper(8.4.7) · 같은 설정(app.js), 사진 650×510.5(1920 기준),
   간격 20, 본문 시작선에서 시작해 화면 오른쪽 끝까지 이어진다(Swiper overflow 보이게). 커서·확대 효과 없음(LUCID 그대로). */
.pstrip{position:relative; margin-top:clamp(28px,2.8vw,48px)}
.pstrip__swiper.swiper{overflow:visible}
.pstrip__item.swiper-slide{width:clamp(260px,33.85vw,650px); aspect-ratio:650/510.5; height:auto; overflow:hidden; display:block; background:#e9e5df}
.pstrip__item img{display:block; width:100%; height:100%; object-fit:cover; user-select:none; -webkit-user-drag:none}
.pstrip:not(.is-swiper) .swiper-wrapper{display:flex; gap:20px; overflow-x:auto; scrollbar-width:none}   /* Swiper 를 못 받으면 가로 스크롤 */
.pstrip:not(.is-swiper) .pstrip__item{flex:none}
@media (max-width:900px){ .pstrip__item.swiper-slide{width:78vw} }
/* 크게 보기 */
.plb{position:fixed; inset:0; z-index:300; display:none; align-items:center; justify-content:center; background:rgba(20,17,14,.92)}
.plb.is-open{display:flex}
/* 앞·지금·다음 세 장 띠 — 잡고 끌면 따라오고 놓으면 0.3초에 넘어가거나 제자리로(app.js) */
.plb__stage{position:absolute; inset:0; overflow:hidden; cursor:grab; touch-action:none; user-select:none; -webkit-user-select:none}
.plb__stage.is-drag{cursor:grabbing}
.plb__track{display:flex; width:300%; height:100%; transform:translateX(calc(-100% / 3)); will-change:transform}
.plb__slide{flex:0 0 calc(100% / 3); display:grid; place-items:center; padding:0 clamp(12px,2vw,40px); box-sizing:border-box}   /* 끌 때 옆 사진이 보이도록 사이를 띄움 */
.plb__slide img{display:block; max-width:min(88vw,1500px); max-height:84vh; width:auto; height:auto; user-select:none; -webkit-user-drag:none; pointer-events:none}
.plb__count,.plb__close,.plb__btn{z-index:2}
.plb__count{position:absolute; left:clamp(14px,2vw,28px); top:18px; margin:0; color:rgba(255,255,255,.85); font-size:15px; letter-spacing:.08em}
.plb__close{position:absolute; right:clamp(6px,1.4vw,20px); top:8px; width:52px; height:52px; color:#fff; font-size:34px; line-height:1; font-weight:300}
.plb__btn{position:absolute; top:50%; transform:translateY(-50%); width:58px; height:58px; border-radius:50%; background:rgba(255,255,255,.12); color:#fff; display:grid; place-items:center; transition:background var(--dur-fast)}
.plb__btn:hover{background:rgba(255,255,255,.26)}
.plb__btn svg{width:26px; height:26px}
.plb__btn--prev{left:clamp(8px,2vw,32px)} .plb__btn--prev svg{transform:scaleX(-1)}
.plb__btn--next{right:clamp(8px,2vw,32px)}
.plb :focus-visible{outline:2px solid #fff; outline-offset:3px}
@media (max-width:640px){ .plb__btn{width:44px; height:44px} .plb__slide img{max-width:100vw} }
html.plb-lock{overflow:hidden}
/* ── 사진 줄 · 크게 보기 블록 끝 ── */


/* ══ 방송 영상 칸 꽉 차게 (2026-10-13) — 병원 "영상 1 2 3 없애 주시고 그냥 영상만 꽉차게" ══
   선언 두 카드(왼쪽 문구 · 오른쪽 영상)를 10:9 → 영상 비율(1294:720)로. 문구 카드는 같은 높이에 글을 가운데로(위아래 여백만 줄임). */
@media (min-width:901px){
  body[data-page="home"] .home-decl__card{aspect-ratio:1294/720}
  body[data-page="home"] .home-decl__card--word{padding-block:clamp(20px,2.2vw,42px)}
}
/* ── 방송 영상 칸 꽉 차게 블록 끝 ── */


/* ══ 숏츠 녹색 팔레트 (2026-10-13) — 병원 "이 부분 녹색이 마음에 안 든다" → 사용자 "녹색으로 팔레트 만들어서 적용" ══
   비교 페이지 renew/_review/green-1013/ 의 1번 제이드(옥색) 팔레트: 가장 진함 #24533f · 바탕 #3a7561 · 중간 #6fa58c · 연함 #bfd9cc · 아주 연함 #e6f0eb.
   이력: 10-06 "쑥색 같아 민트처럼 연하게", 10-12 "PC 너무 진함" → 회색기를 빼고 #3f5f55 보다 밝게(흰 글자 대비 5.4, 글자는 그대로 흰색).
   다른 번호로 바꿀 때는 --yt-bg 만 바꾸면 된다(2 #55715f · 3 #344a3c · 4 #5d7059 · 5 밝은 바탕은 글자도 먹색으로 따로). */
html:not(#_) body[data-page="home"] .j-yt{--yt-bg:#3a7561; background:var(--yt-bg)}
/* ── 숏츠 녹색 팔레트 블록 끝 ── */


/* ══ 홈 대표원장 판 사진 = 프로필 상반신 (2026-10-13) — 병원 "사진이 너무 가까워 보이고 뒷배경이 너무 밝아서 → 포브처럼 프로필 상반신, 배경은 포브보다 좀 더 밝게" ══
   사진: 얼굴을 크게 자른 old/doctor.png(흰 배경) → 의료진소개와 같은 배경 없는 상반신 doctor-cut5.png(팔짱·허리까지)를 칸 아래 가운데에 작게(칸 높이 82%).
   배경: 포브 실측 #bcbcbb~#cbcbcb 보다 한 단계 밝은 따뜻한 회색 — 위 #dcdad6 → 아래 #cfccc7, 머리 뒤만 살짝 밝게. 폰은 칸을 4:5 세로로(포브 폰처럼). */
html:not(#_) body[data-page="home"] .j-dr--why .j-dr__ph--doc{position:relative; overflow:hidden;
  background:radial-gradient(60% 45% at 50% 30%, rgba(255,255,255,.35), rgba(255,255,255,0) 70%), linear-gradient(180deg, #dcdad6 0%, #cfccc7 100%)}
html:not(#_) body[data-page="home"] .j-dr--why .j-dr__ph--doc img{position:absolute; left:0; right:0; bottom:0; width:100%; height:82%;
  object-fit:contain; object-position:50% 100%}
@media (max-width:900px){
  html:not(#_) body[data-page="home"] .j-dr--why .j-dr__ph--doc{aspect-ratio:4/5}
  html:not(#_) body[data-page="home"] .j-dr--why .j-dr__ph--doc img{height:84%}
}
/* ── 홈 대표원장 판 사진 블록 끝 ── */

/* ── 메인 페이지 글씨체·글자색 = public_html/index.html 과 똑같이 (2026-10-15) ──
   사용자 "메인 페이지는 여기(public_html/index.html, 라미네이트 시안)와 동일한 글씨체 색으로". 메인 본문(main) 전체 — 머리·푸터·바로가기·상담 바(공통)는 그대로.
   index.html 실측: 제목 Noto Serif KR 400 #292924 · 강조(em) #746c60 / 본문 Noto Sans KR 300(350) · 첫 화면 설명 #68675d · 본문 #77736b · 각주 #928d84
   / 카드 제목 Noto Sans KR 500 / 작은 영문 라벨 DM Sans 500 대문자 자간 .31em #8d887d·#9b9489 / 장식 영문 Playfair Display / 번호 #999183
   / 어두운 구간 제목 #eeece7 · 글 #d4d0c7 · 라벨 #999486 / 버튼 올리브 #55584c. 글꼴 파일 = assets/css/home-fonts.css(우리 서버 사본, parts.head 가 홈에만).
   글자 크기는 그대로 — 영문 라벨만 Cormorant→DM Sans 로 글자 폭이 커져 22→16px(폰 15→12)로 같은 크기로 보이게.
   같은 날 앞선 판(병원 "제목 고딕·설명 명조"로 첫 화면만)을 이것으로 바꿈. */
html:not(#_) body[data-page="home"] main, html:not(#_) body[data-page="home"] main *{font-family:"Noto Sans KR",sans-serif}
html:not(#_) body[data-page="home"] main{font-weight:300; color:#292924}
/* 위 * 규칙이 제목 안 줄 묶음(span 등)까지 고딕으로 만들지 않게 — 글꼴이 다른 덩어리 안은 부모 글꼴을 따른다 */
html:not(#_) body[data-page="home"] :is(.hs-name, .hs-acc, .hs-en, .j-en, .j-h2, .display-kr, .j-why__t, .j-why__no, .j-ans, .j-press__date) *{font-family:inherit}
/* 첫 화면 */
html:not(#_) body[data-page="home"] :is(.hs-en, main .eyebrow){font-family:"DM Sans",sans-serif; font-weight:500; font-size:clamp(11px,.68vw,13px); letter-spacing:.31em; color:#8d887d}
html:not(#_) body[data-page="home"] main .eyebrow .kr{font-family:inherit}
html:not(#_) body[data-page="home"] .hs--dark .hs-en{color:#ddd8cf}
html:not(#_) body[data-page="home"] .hs-name{font-family:"Noto Serif KR",serif; font-weight:400; letter-spacing:-.04em; color:#292924}
html:not(#_) body[data-page="home"] .hs--doc .hs-name span{color:#746c60}
html:not(#_) body[data-page="home"] .hs--dark .hs-name{color:#fff}
html:not(#_) body[data-page="home"] .hs-copy{font-family:"Noto Sans KR",sans-serif; font-weight:300; letter-spacing:0; color:#68675d}
html:not(#_) body[data-page="home"] .hs--dark .hs-copy{color:rgba(255,255,255,.94)}
html:not(#_) body[data-page="home"] .hs-acc{font-family:"Playfair Display",Georgia,serif; font-style:italic; font-weight:400; color:#eeece7}
html:not(#_) body[data-page="home"] .hs--doc .hs-line{background:#c7beb1}
/* 구간 머리: 작은 영문 라벨 · 제목 · 부제 */
html:not(#_) body[data-page="home"] .j-en, html:not(#_) body[data-page="home"] .gal-sec .eyebrow{font-family:"DM Sans",sans-serif; font-weight:500; font-size:16px; letter-spacing:.31em; text-transform:uppercase; color:#9b9489}
html:not(#_) body[data-page="home"] .j-en::before, html:not(#_) body[data-page="home"] main .eyebrow::before{background:#c7beb1; opacity:1}
html:not(#_) body[data-page="home"] :is(.j-h2, .display-kr, .j-why__t){font-family:"Noto Serif KR",serif; font-weight:400; letter-spacing:-.035em; color:#292924}
html:not(#_) body[data-page="home"] .j-press .j-ans{font-family:"Noto Serif KR",serif; font-weight:400; color:#55514b}
html:not(#_) body[data-page="home"] .gal-sec .body-lg{font-weight:300; color:#77736b}
/* 대표원장 '이유' 판 */
html:not(#_) body[data-page="home"] .j-why__no{font-family:"Noto Serif KR",serif; font-weight:400; color:#999183}
html:not(#_) body[data-page="home"] .j-why__list p{font-weight:500; color:#292924}
html:not(#_) body[data-page="home"] .j-roll__in{font-family:"Playfair Display",Georgia,serif; font-weight:400; color:rgba(116,108,96,.16)}
html:not(#_) body[data-page="home"] .j-roll__in *{font-family:inherit}
/* '자세히 보기' 글자 링크 */
html:not(#_) body[data-page="home"] :is(.j-dr__more, .j-bal__more, .j-press__more){font-weight:400; color:#55584c}
/* 닥터스 칼럼 카드 */
html:not(#_) body[data-page="home"] .j-press__card{border-color:#ddd8d0}
html:not(#_) body[data-page="home"] .j-press__ch{background:#fffffff0; color:#3c3a34; font-weight:500}
html:not(#_) body[data-page="home"] .j-press__date{font-family:"DM Sans",sans-serif; font-weight:400; color:#a7a094}
html:not(#_) body[data-page="home"] .j-press__title{font-weight:500; color:#292924}
html:not(#_) body[data-page="home"] .j-press__ex{font-weight:300; color:#77736b}
html:not(#_) body[data-page="home"] .j-press__ex + span, html:not(#_) body[data-page="home"] .j-press__card span:not([class]){color:#8b877d}
html:not(#_) body[data-page="home"] .ba-note{font-weight:300; color:#928d84}
/* 숏츠(어두운 구간 #252521) */
html:not(#_) body[data-page="home"] .j-yt .j-en{color:#999486}
html:not(#_) body[data-page="home"] .j-yt .j-h2{color:#eeece7}
html:not(#_) body[data-page="home"] .j-yt__more{font-weight:400; color:#eeece7}
html:not(#_) body[data-page="home"] .j-yt__tt{font-weight:500}
html:not(#_) body[data-page="home"] .j-yt__tb{font-weight:400}
html:not(#_) body[data-page="home"] .j-yt__t{font-weight:300; color:#d4d0c7}
/* 자주 찾는 치료 · 전후사진 */
html:not(#_) body[data-page="home"] .j-acc__label{font-weight:500}
html:not(#_) body[data-page="home"] .j-acc em{font-weight:400}
html:not(#_) body[data-page="home"] .j-bal figcaption, html:not(#_) body[data-page="home"] .j-bal__lock{font-weight:500}
html:not(#_) body[data-page="home"] .j-bal__name{font-weight:500; color:#292924}
html:not(#_) body[data-page="home"] .j-bal__dots button[aria-current="true"]{background-color:#55584c}
/* 선언 문구 */
html:not(#_) body[data-page="home"] .home-decl .lr__in{font-family:"Noto Serif KR",serif; font-weight:400; color:#292924}
html:not(#_) body[data-page="home"] .home-decl__last, html:not(#_) body[data-page="home"] .home-decl__last *{font-family:"Noto Serif KR",serif; font-weight:400; font-style:normal; color:#746c60; border-bottom-color:#746c60}
@media (max-width:640px){
  html:not(#_) body[data-page="home"] .j-en, html:not(#_) body[data-page="home"] .gal-sec .eyebrow{font-size:12px}
}
/* ── 메인 페이지 글씨체·글자색 블록 끝 ── */

/* ── 전체 바탕색 = 견본(public_html/index.html) 바탕색 (2026-10-15) ──
   병원 "전체 홈페이지 배경색깔 적용해서 보여주세요" — 견본(라미네이트 시안 index.html)의 따뜻한 무채색으로 전 페이지 바탕을 바꾼다.
   구간 차례(크림·베이지·민트, 10-06 '상세 페이지에도 메인 색감')는 그대로 두고 색만 견본 값으로 바꿔 끼운다(밝기 차례 유지):
     크림 --c-canvas #f7f4ee → 견본 아이보리 #f8f7f4(본문 바탕)   베이지 --c-cream #f3eee2 → #f2eee8(견본 '하루 한 분' 구간)
     민트 --c-mist #eef0ea → 견본 샌드 #eae6df('선택 이유' 구간)  먹색 --c-ink-bg #232a26 → 견본 푸터 #373730(푸터·메뉴·폰 아래 바)
     민트 띠(j-who·j-dark·gc-chk, 흰 글자) #5e8c7e → 견본 짙은 갈색 띠 #39332c('공예' 구간)
     홈 숏츠 #3a7561 → 견본 진한 띠 #252521('라미네이트 종류' 구간), 홈 선언 영상 카드 #1f2523 → #252521
     하단 상담 바 rgba(35,42,38,.84) → #373730 .86, 머리(.bah) 초록빛 그라데이션 → 견본 첫 화면 베이지(#dbd3ca 쪽)
   버튼·강조 글자색(--c-violet #5e8c7e)은 바탕이 아니라 그대로. 되돌릴 땐 이 블록만 지우면 된다. */
:root{--c-canvas:#f8f7f4; --c-cream:#f2eee8; --c-mist:#eae6df; --c-ink-bg:#373730}
html:not(#_) :is(.j-who, .j-dark, .gc-chk){background:#39332c}
html:not(#_) .j-who__media::after{background:linear-gradient(90deg, rgba(57,51,44,0) 55%, #39332c 100%)}
@media (max-width:900px){ html:not(#_) .j-who__media::after{background:linear-gradient(180deg, rgba(57,51,44,0) 55%, #39332c 100%)} }
html:not(#_) body[data-page="home"] .j-yt{--yt-bg:#252521}
html:not(#_) body[data-page="home"] .home-decl__card--video{background:#252521}
@media (min-width:1181px){ html:not(#_) .cbar{background:rgba(55,55,48,.86)} }
html:not(#_) .bah{background:linear-gradient(115deg,#f8f7f4 0%,#eee9e2 42%,#e0d8ce 78%,#d6cdc1 100%)}
html:not(#_) body:not([data-page="home"]) .phero::before{--hs-tint:linear-gradient(90deg,rgba(248,247,244,.95) 0%,rgba(248,247,244,.86) 34%,rgba(248,247,244,.35) 62%,rgba(248,247,244,0) 86%);
  --tint:linear-gradient(90deg,rgba(248,247,244,.95) 0%,rgba(248,247,244,.86) 34%,rgba(248,247,244,.35) 62%,rgba(248,247,244,0) 86%)}
@media (max-width:900px){
  html:not(#_) body:not([data-page="home"]) .phero::before{--hs-tint:linear-gradient(180deg,rgba(248,247,244,.80),rgba(248,247,244,.88));
    --tint:linear-gradient(180deg,rgba(248,247,244,.80),rgba(248,247,244,.88))}
}
/* ── 전체 바탕색 블록 끝 ── */

/* ── 머리 · 첫 화면 제목 = 병원 'V3 디자인 적용 시안' (2026-10-16) ──
   병원 캡처 KakaoTalk_f1KsUlUm8N(머리 + 첫 화면 1장) + 사용자 "똑같은 걸로". 시안 위 안내 띠('V3 디자인 적용 시안…')는 시안 표시라 넣지 않는다.
   머리(전 페이지 공통 부품): 바탕 시안 실측 #f1eee9 · 로고 글자만 '바른영치과'(굵게) + 작은 영문 · 메뉴 보통 굵기 회먹색
     · 메뉴 6개(parts.header) · 전화번호 없음 · '진료 예약 ↗' 견본 올리브 채움(#5e6050, 견본 .navcta).
   첫 화면: 제목이 시안에서 작다(라벨 대비 0.78배) → 82 → 64px, 둘째 줄 강조색 #746c60 → 시안 실측 회먹색 #595751.
   되돌릴 땐 이 블록과 parts.header 의 2026-10-16 줄을 되돌린다(원본 ~/work/req-1016c/). */
html:not(#_):not(#_) .site-header,
html:not(#_):not(#_) .site-header:is(:hover, :focus-within, .is-solid){background:#f1eee9; color:#292924; box-shadow:0 1px 0 #e2ddd5}
html:not(#_):not(#_) .site-header .brand-name{align-items:flex-start}
html:not(#_):not(#_) .site-header .brand-kr{font-family:var(--ff); font-weight:600; font-size:29px; line-height:1.1; letter-spacing:-.04em; margin-right:0}
html:not(#_):not(#_) .site-header .brand-en{margin-top:6px; font-family:"DM Sans",sans-serif; font-weight:500; font-size:11.5px; letter-spacing:.16em; margin-right:0; opacity:1; color:#77736c}   /* 견본 .logo small */
html:not(#_):not(#_) .site-header .nav-top{font-weight:400; color:#4a4843}
html:not(#_):not(#_) .site-header :is(.nav-item:hover .nav-top, .nav-top:hover, .nav-top.is-active){color:#5e6050}
html:not(#_):not(#_) .site-header .nav-cta{background:#5e6050; border-color:#5e6050; color:#fff; font-weight:500; gap:.4em}
html:not(#_):not(#_) .site-header .nav-cta:hover{background:#55584c; border-color:#55584c; color:#fff}
@media (max-width:1180px){
  html:not(#_):not(#_) .site-header .brand-kr{font-size:22px}
  html:not(#_):not(#_) .site-header .brand-en{font-size:9px; margin-top:5px}
}
@media (min-width:641px){
  html:not(#_):not(#_) body[data-page="home"] .hs-name{font-size:clamp(34px,3.35vw,64px)}
}
html:not(#_):not(#_) body[data-page="home"] .hs--doc .hs-name span{color:#595751}
/* ── 머리 · 첫 화면 제목 블록 끝 ── */

/* ── 전 페이지 글씨체·글자색 = 견본(V3) (2026-10-16) ──
   병원 카톡 "네 전체 글씨체 색감 수정 해주세요~! 바른영치과 로고 병원소개 임플란트 상단 부분 글씨체도 다같이 변경해주세요~!"
   → 10-15 에 메인 본문에만 넣은 견본(public_html/index.html) 글꼴·글자색을 전 페이지 · 머리 · 푸터 · 서랍 · 상담 바까지.
   글꼴(assets/css/home-fonts.css, 이제 전 페이지 링크): 한글 본문 Noto Sans KR(견본 body 350) · 제목 Noto Serif KR 400 · 작은 영문 라벨 DM Sans · 숫자·장식 영문 Playfair Display.
     --ff(Pretendard) → Noto Sans KR, --serif(Cormorant) → Playfair Display(+한글은 Noto Serif KR).
   글자색: 제목 먹색 #2b2520 → 견본 #292924 · 본문 #33302b → #45423c · 보조 본문 #655e55 → #77736b · 금색 라벨 #7c6442 → #9b9489 · 금색 숫자·선 #a98a5e → #999183
     · 초록 부제(.j-ans) → 견본 부제 명조 #55514b · 남은 초록 강조(링크·버튼·번호 동그라미 --c-violet / -deep) → 견본 올리브 #5e6050 / #55584c.
   메인(홈) 본문은 10-15 블록이 이미 같은 값. 되돌릴 땐 이 블록 + home-fonts.css 굵기 범위 + parts.head 링크 조건. */
:root{--ff:"Noto Sans KR",sans-serif; --serif:"Playfair Display","Noto Serif KR",serif;
  --c-ink-text:#292924; --c-graphite:#45423c; --c-slate:#77736b; --c-gold-deep:#9b9489; --c-gold:#999183;
  --c-violet:#5e6050; --c-violet-deep:#55584c}
html:not(#_) body{font-weight:350}
/* 제목 = 명조 */
html:not(#_) body:not([data-page="home"]) main :is(h1, h2, .display-kr, .bah__t, .ab-loc__name){font-family:"Noto Serif KR",serif; font-weight:400; letter-spacing:-.035em}
/* 부제 = 명조 회먹색 */
html:not(#_) body:not([data-page="home"]) main :is(.j-ans, .j-lead){font-family:"Noto Serif KR",serif; font-weight:400; color:#55514b}
/* 작은 영문 라벨 = DM Sans (홈과 같은 크기·자간) */
html:not(#_) body:not([data-page="home"]) main .j-en{font-family:"DM Sans",sans-serif; font-weight:500; font-size:16px; letter-spacing:.31em; color:#9b9489}
html:not(#_) body:not([data-page="home"]) main .j-en::before{background:#c7beb1}
html:not(#_) body:not([data-page="home"]) main :is(.j-who, .j-dark, .gc-chk, .lm-chk, .section--ink, .j-cta--dark) .j-en{color:#999486}
html:not(#_) body:not([data-page="home"]) main :is(.j-who, .j-dark, .gc-chk, .lm-chk, .section--ink, .j-cta--dark) .j-en::before{background:#7b776f}
@media (max-width:640px){ html:not(#_) body:not([data-page="home"]) main .j-en{font-size:12px} }
/* 어두운 칸 위 금색 글자(#e3d1a3) → 견본 어두운 구간 밝은 글자 */
html:not(#_) body:not([data-page="home"]) main :is(.j-table__hd em, .j-dark .lm-chk__no, .j-dark .lm-m__no, .j-who .lm-chk__no, .j-en--gold){color:#ddd8cf}
/* ── 전 페이지 글씨체·글자색 블록 끝 ── */

/* ── 카키 포인트 띠 = 병원 '03 포인트 강조 시안' (2026-10-16) ──
   시안 설명 "상단바부터 벨트, 하단 일부까지 카키 포인트가 이어져 브랜드 아이덴티티가 더 명확한 조합" + 사용자 "이 포인트 넣어 달라고 했는데".
   머리 맨 위 카키 띠(parts.header .topbar) — --header-h 가 머리 전체 높이라 띠 높이를 더해 히어로·여백·고정 화면이 함께 내려간다.
   카키 = 견본 상단 메뉴 버튼 #5e6050. 푸터 맨 끝 저작권 줄 카키 띠는 같은 날 병원 "하단엔 카키 없이 통색으로"로 뺐다. */
:root{--topbar-h:40px; --header-h:126px}
@media (max-width:640px){ :root{--topbar-h:30px; --header-h:106px} }
html:not(#_):not(#_) .site-header{flex-direction:column; align-items:stretch}
html:not(#_):not(#_) .site-header .topbar{flex:none; height:var(--topbar-h); display:flex; align-items:center; justify-content:center;
  background:#5e6050; color:rgba(255,255,255,.86); font-size:13.5px; font-weight:400; letter-spacing:.04em}
.topbar__in{display:flex; align-items:center; gap:.8em; white-space:nowrap}
html:not(#_):not(#_) .site-header .header-inner{flex:1; min-height:0}
html:not(#_):not(#_) .site-header .nav-top{height:calc(var(--header-h) - var(--topbar-h))}
html:not(#_):not(#_) .site-header .nav-panel{top:calc(var(--header-h) - var(--topbar-h) - 8px)}
html:not(#_):not(#_) .drawer-top{height:calc(var(--header-h) - var(--topbar-h))}
@media (max-width:640px){ html:not(#_):not(#_) .site-header .topbar{font-size:12px} }
/* ── 카키 포인트 띠 블록 끝 ── */

/* ── 홈 첫 화면 제목·설명 글씨체 맞바꿈 (2026-10-16) ──
   사용자 "위의 문장과 아래 문장의 문체를 서로 바꿔줘" + 캡처 KakaoTalk_jLmYJdJTYp(견본 첫 화면 구성: 큰 제목 고딕 · 아래 설명 명조).
   10-15 견본 맞춤으로 제목 명조 · 설명 고딕이던 것을 서로 바꾼다. 글자 크기·색은 그대로. 첫 화면 세 장 모두. */
html:not(#_):not(#_) body[data-page="home"] .hs-name{font-family:"Noto Sans KR",sans-serif; font-weight:400; letter-spacing:-.03em}
html:not(#_):not(#_) body[data-page="home"] .hs-copy{font-family:"Noto Serif KR",serif; font-weight:400}
/* ── 홈 첫 화면 글씨체 맞바꿈 블록 끝 ── */

/* ── 전체 글씨 = 위 제목 고딕 · 밑 설명 명조 (2026-10-16) ──
   사용자 "전체 글씨가 위 고딕이고 밑에 명조 해 봐요"(같은 날 홈 첫 화면 제목·설명 맞바꿈을 전 페이지로).
   제목(h1~h5 · 큰 제목 클래스) = Noto Sans KR, 그 아래 설명(본문 p · li · dd · 부제 · FAQ 답) = Noto Serif KR(400 · 굵은 글씨 600 — home-fonts.css).
   메뉴 · 버튼 · 표 · 입력 · 탭 · 사진 위 글씨 · 작은 영문 라벨 · 경로 · 제목 노릇 하는 굵은 p 는 고딕 그대로. 머리 · 푸터 · 상담 바는 main 밖이라 고딕.
   글자 크기 · 색은 그대로. 되돌릴 땐 이 블록만 지우면 앞 블록(제목 명조 · 설명 고딕)으로 돌아간다. */
html:not(#_):not(#_) main :is(h1, h2, h3, h4, h5, .display-kr, .bah__t, .j-h2, .ab-loc__name, .j-why__t, .lr__in, .home-decl__last, .home-decl__last *){font-family:"Noto Sans KR",sans-serif}
html:not(#_):not(#_) main :is(h1, h2, .display-kr, .bah__t, .j-h2, .ab-loc__name, .j-why__t, .lr__in, .home-decl__last){font-weight:400; letter-spacing:-.03em}
html:not(#_):not(#_) main :is(p, li, dd, blockquote, .faq-a, .j-ans, .j-lead):not(.j-en, .eyebrow, .hs-en, .crumb, .j-bag__name, .j-bag__kind, .j-bag__meta, .wz-cg__label, .wz-q__lbl, .wz-q__q, .dr2__role, .dr2__cvh, .j-proc__bar-t, .gc-ptx__q, .ab-eq__k, .j-cr__t, .lm-pair__head):not(:is(nav, form, table, button, .btn, [role="tablist"], .pt-tabs, .j-yt__thumb, .j-acc, .j-bal__pair, .cl-pg) *){font-family:"Noto Serif KR",serif}
/* 명조 목록(li · p) 안에 들어 있어도 제목 · 화면 요소 노릇 하는 글씨는 고딕 (전 페이지 32쪽 실측으로 고름).
   위 명조 규칙이 :is · :not 때문에 (2,3,2) 라 예외는 :not(#_) 를 세 번 걸어 이긴다 */
html:not(#_):not(#_):not(#_) main :is(.hs-name, .crumb, figcaption, .btn, .cl-card__t, .cl-card__date, .cl-card__more, .lm-flow__t, .j-cs__t, .wz-step__t, .j-bal__name,
  .j-bag__chip, .j-bag__name, .j-bag__kind, .j-bag__meta, .j-bag i, .wz-cg__label, .wz-q__lbl, .wz-q__q, .dr2__role, .dr2__cvh, .dr2__msg-t,
  .j-proc__bar-t, .gc-ptx__q, .gc-ptx__bt, .gc-ptx__sub, .gc-chk__t, .ab-eq__k, .ab-line, .bah__pill, .gc-tx__k, .cl-info){font-family:"Noto Sans KR",sans-serif}
/* 숫자 · 장식 영문은 원래대로 Playfair */
html:not(#_):not(#_):not(#_) main :is(.hs-acc, .wzs-card__no, .j-cr__t, .lm-pair__head){font-family:var(--serif)}
/* 홈 칼럼 카드 요약은 설명 → 명조 */
html:not(#_):not(#_) main .j-press__ex{font-family:"Noto Serif KR",serif}
/* ── 위 제목 고딕 · 밑 설명 명조 블록 끝 ── */

/* ── 로고 = ㅂㄹㅇ 치아 표식 + '바른영치과' 전체 고딕 · 전화번호 원래 자리 (2026-10-16) ──
   병원 "로고는 전에 있던 그 ㅂㄹㅇ 있는 로고 옆에 바른영치과, 그 전체를 고딕으로 로고까지 같이" → parts.header 에 .brand-mark 되살림, 작은 영문도 고딕(DM Sans) — 머리 · 서랍 · 푸터 로고 모두.
   사용자 "상단 카키에 병원 전화번호 → 진료 예약 옆 원래 있던 곳으로" → parts.header .nav-tel 되살림(카키 띠엔 병원 이름만). */
html:not(#_) .brand-en{font-family:"DM Sans",sans-serif; font-weight:500}
html:not(#_):not(#_) .site-header .brand-lockup{gap:12px}
html:not(#_):not(#_) .site-header .nav-tel{color:#292924; font-weight:500}
/* ── 로고 · 전화번호 블록 끝 ── */

/* ── 병원소개 펼침 메뉴 가운데 정렬 (2026-10-16 사용자 "임플란트처럼 중앙 정렬") ──
   첫 메뉴는 화면 왼쪽에서 잘리지 않게 왼쪽에 붙여 두었지만, 이제 앞에 로고가 있어 잘릴 일이 없다 */
html:not(#_) .nav-item:first-child .nav-panel{left:50%; transform:translateX(-50%) translateY(6px)}
html:not(#_) :is(.nav-item:first-child:hover, .nav-item:first-child:focus-within, .nav-item:first-child.is-open) .nav-panel{transform:translateX(-50%) translateY(0)}

/* ── 홈 대표원장 사진 = 사람 크게 · 배경 한 단계 연하게 · 좌우 반전 (2026-10-16) ──
   사용자 "프로필 사진 사람이 작아서 이 크기로, 뒤배경 살짝 더 연하게, 사진 좌우 반전".
   사진 파일은 doctor-cut5-flip.png(build.py). 칸 높이 82% 안에 통째로 넣던 것을 → 칸 높이의 115%, 머리 위 7% 띄우고
   팔짱 아래는 칸 밖으로 잘림 — 사람이 약 1.4배. 칸이 가로로 넓은 PC(1440 등)에서도 머리가 잘리지 않게 높이 기준.
   배경: 위 #dcdad6 → 아래 #cfccc7 를 한 단계 연하게. */
html:not(#_):not(#_) body[data-page="home"] .j-dr--why .j-dr__ph--doc{
  background:radial-gradient(60% 45% at 50% 30%, rgba(255,255,255,.35), rgba(255,255,255,0) 70%), linear-gradient(180deg, #e6e4e0 0%, #dbd8d3 100%)}
html:not(#_):not(#_) body[data-page="home"] .j-dr--why .j-dr__ph--doc img{top:7%; bottom:auto; left:50%; right:auto;
  width:auto; height:115%; max-width:none; transform:translateX(-50%)}

/* ── 하위 페이지 머리 띠 높이 줄임 (2026-10-16) ──
   병원 캡처(의료진소개 · 원데이 임플란트 머리) "다 폭이 넓은 거 같아서 반으로 다 좁게". 띠 안 글(경로 · 제목 · 설명)만 PC 182~231px 라
   그대로 반(374→187, 491→245)은 글이 위아래에 붙어서 → 위아래 여백 96 · 130px → 최대 34px, 최소 높이 480 → 머리 + 250px.
   PC 1920 띠(머리 아래) 하위 374 → 250 · 의료진소개/전후사진 491 → 약 300. */
html:not(#_):not(#_) body:not([data-page="home"]) .phero{min-height:calc(var(--header-h) + clamp(200px,13vw,250px));
  padding-block:calc(var(--header-h) + clamp(24px,1.8vw,34px)) clamp(24px,1.8vw,34px)}
html:not(#_):not(#_) body:not([data-page="home"]) .bah{padding-block:calc(var(--header-h) + clamp(24px,1.8vw,34px)) clamp(24px,1.8vw,34px)}
@media (max-width:640px){
  html:not(#_):not(#_) body:not([data-page="home"]) .phero{min-height:0}
}

/* ── 홈 전후사진 = 닥터스 칼럼 · 미디어와 같은 좌우 선 (2026-10-16) ──
   사용자 "전후사진 정렬" — 전후사진만 레퍼런스 폭 1684(화면 양끝 16)로 넓게 퍼져 다른 구간보다 왼쪽에서 시작했다.
   → 칼럼과 같은 틀(최대 1440 · 양옆 --gutter), 카드 3장이 그 폭에 꼭 차게(틀 폭 기준 cqw). 폰(760 이하)은 그대로 한 장씩. */
html:not(#_) body[data-page="home"] :is(.j-bal__head, .j-bal__view){width:min(1440px, 100% - 2 * var(--gutter)); margin-inline:auto; padding-inline:0}
html:not(#_) body[data-page="home"] .j-bal__view{container-type:inline-size}
@media (min-width:761px){
  html:not(#_) body[data-page="home"] .j-bal__card{flex:0 0 calc((100cqw - 2 * clamp(12px,1.67vw,32px)) / 3)}
}

/* ── 홈 넘김 문구 마지막 말('노력합니다' · '연구합니다') = 명조 (2026-10-16) ──
   병원 "연구합니다 노력합니다 글씨체 견고체(=명조)로" — 같은 날 '위 제목 고딕' 규칙이 고딕으로 덮었던 것을 이 말만 다시 명조로(굵기 · 색 · 밑줄 그대로). */
html:not(#_):not(#_):not(#_) main :is(.home-decl__last, .home-decl__last *){font-family:"Noto Serif KR",serif}

/* ── '오시는 길' 병원 전화번호 = 고딕 (2026-10-16) ──
   병원 "오시는길 병원전화번호 글씨체는 고딕체로" — 전 페이지 아래 '오시는 길' 띠(.ft2-tel)와 진료안내 · 오시는길 본문 '상담 / 예약'(.ab-loc__tel a)
   두 곳이 Playfair 명조였다 → Noto Sans KR(크기 · 굵기 그대로). */
html:not(#_):not(#_):not(#_) :is(.ft2-tel, .ab-loc__tel a){font-family:"Noto Sans KR",sans-serif}

/* ── 폰 홈 닥터스 칼럼 · 전후사진 = 미디어처럼 가로로 넘기는 줄 (2026-10-16) ──
   병원(모바일) "전후사진 미디어처럼 한 번에 보이게 / 닥터스 칼럼도 그렇게 — 4개가 크게 연달아 떠서".
   미디어(.j-yt) 폰 값 그대로: 카드 150 · 사이 12 · 손으로 넘김(스냅) · 막대 없음. 칼럼 카드는 미디어처럼 사진 · 날짜 · 제목만(요약 · 아랫줄은 PC에만).
   전후사진은 폰에서 자동 넘김(app.js 가 transform 으로 3장씩) 대신 손으로 넘김 — 점은 숨김. PC · 태블릿(761 이상)은 그대로. */
@media (max-width:760px){
  html:not(#_) body[data-page="home"] :is(.j-press__list, .j-bal__view){display:flex; gap:12px; overflow-x:auto; scroll-snap-type:x mandatory;
    scrollbar-width:none; overscroll-behavior-x:contain}
  html:not(#_) body[data-page="home"] :is(.j-press__list, .j-bal__view)::-webkit-scrollbar{display:none}
  html:not(#_) body[data-page="home"] :is(.j-press__list > li, .j-bal__card){flex:0 0 150px; scroll-snap-align:start}
  html:not(#_) body[data-page="home"] .j-press__card{border-radius:8px}
  html:not(#_) body[data-page="home"] .j-press__ch{top:8px; right:8px; padding:3px 7px; font-size:10px; letter-spacing:.06em}
  html:not(#_) body[data-page="home"] .j-press__body{padding:12px 12px 14px}
  html:not(#_) body[data-page="home"] .j-press__date{font-size:11px}
  html:not(#_) body[data-page="home"] .j-press__title{margin-block-start:6px; font-size:14px; line-height:1.5}
  html:not(#_) body[data-page="home"] :is(.j-press__ex, .j-press__foot){display:none}
  html:not(#_) body[data-page="home"] .j-bal__track{transform:none !important; gap:12px}
  html:not(#_) body[data-page="home"] .j-bal__name{margin-block-start:10px; font-size:13px}
  html:not(#_) body[data-page="home"] .j-bal__dots{display:none}
  /* 반쪽이 75px 라 '사진 보기'와 '치료 후'가 겹친다 → 잠금 칸은 자물쇠만(단추 이름은 aria-label 그대로), 전 · 후 글자는 작게 */
  html:not(#_) body[data-page="home"] .j-bal__lock{font-size:0; gap:0}
  html:not(#_) body[data-page="home"] .j-bal__side figcaption{bottom:6px; font-size:10px}
  html:not(#_) body[data-page="home"] .j-bal__side:first-child figcaption{left:7px}
  html:not(#_) body[data-page="home"] .j-bal__side--lock figcaption{right:7px}
}

/* ── 전 페이지 — 머리 띠 바로 아래 첫 구간 · 치료사례 = 밝은 톤 (2026-10-16) ──
   병원 "아까 밝게 바꾼 것(병원소개 3쪽 · 원데이 소개 · 치료사례) 홈페이지 전체 다 — 페이지 들어갔을 때 처음 배경을 밝게".
   하위 페이지 바탕 돌림(mist #eae6df → cream → canvas)에서 첫 구간이 늘 mist 였다 → 홈 '병원 둘러보기'와 같은 #f8f7f4.
   홈은 첫 화면 사진 아래 '자주 찾는 치료' 묶음(.hm-stack). 탭 페이지(보철 등) · 의료진소개는 이미 밝고, 라미네이트(V3 시안)는 시안 그대로. */
html:not(#_):not(#_) main > :is(.phero, .bah) + section.section,
html:not(#_):not(#_) main .j-cases,
html:not(#_):not(#_) body[data-page="home"] main > .hm-stack,
html:not(#_):not(#_) body[data-page="home"] .hm-stack > .j-acc{background:#f8f7f4}

/* ── 충치 · 잇몸치료 '잇몸질환의 증상' 사진 덮개 = 짙은 갈색 (2026-10-16) ──
   병원 "일반진료 충치치료 · 잇몸치료에 배경색깔 적용 안 됐어" — 바탕(.gc-chk)은 10-15 에 #39332c 로 바꿨지만 사진 위 덮개(::after)는 민트 초록이 남아 있었다.
   전 페이지 검사에서 남은 초록은 이것 하나(푸터 네이버 'N' 표식 제외). */
html:not(#_):not(#_) .gc-chk__bg::after{background:linear-gradient(180deg, rgba(57,51,44,.88), rgba(57,51,44,.94))}

/* ── 로고 글씨 = 7 리디바탕 (2026-10-19) ──
   병원이 로고 글씨체 후보(_review/logo-try) 중 7 리디바탕으로 정함(저장 10-19 09:12) + 사용자 "일단 7 리디바탕 글씨 변경".
   글꼴 = assets/fonts/logo/ridibatang-logo.woff2 — 눈누 RIDIBatang.woff 에서 '바른영치과의원' 일곱 글자만 남긴 사본(1.7KB). Regular 하나뿐이라 굵기 400 · 가짜 굵게 없음.
   한글 줄 길이 = 아래 영문 줄 길이(시안의 '글자 간격: 영어 길이에 맞춤' 그대로) — 글자 크기마다 실측한 자간, 마지막 글자 뒤 자간은 음수 여백으로 상쇄(~/work/logo-1019/measure.py).
   머리 · 메뉴 서랍 · 푸터 로고 모두. 되돌릴 땐 이 블록만 지운다(글꼴 파일은 남아도 무해). */
@font-face{font-family:'RIDIBatang Logo';src:url(../fonts/logo/ridibatang-logo.woff2) format('woff2');font-weight:400;font-display:block}
html:not(#_):not(#_):not(#_) .brand-kr{font-family:'RIDIBatang Logo',"Noto Sans KR",sans-serif; font-weight:400; font-synthesis:none}
html:not(#_):not(#_):not(#_) .site-header .brand-kr{letter-spacing:.116em; margin-right:-.116em}
html:not(#_):not(#_):not(#_) .menu-drawer .brand-kr{letter-spacing:.266em; margin-right:-.266em}
html:not(#_):not(#_):not(#_) .ft2-brand .brand-kr{letter-spacing:.211em; margin-right:-.211em}
@media (max-width:1280px){
  html:not(#_):not(#_):not(#_) .ft2-brand .brand-kr{letter-spacing:.201em; margin-right:-.201em}
}
@media (max-width:1180px){
  html:not(#_):not(#_):not(#_) .site-header .brand-kr{letter-spacing:.125em; margin-right:-.125em}
}
@media (max-width:640px){
  html:not(#_):not(#_):not(#_) .ft2-brand .brand-kr{letter-spacing:.223em; margin-right:-.223em}
}
/* ── 로고 글씨 리디바탕 블록 끝 ── */

/* ── 잇몸성형 첫 화면 전후 사진 (2026-10-20 병원 "잇몸이 잘 안 보여요") ──
   위 치료 전 · 아래 치료 후를 붙인 사진(1200×1256)이라 폰에서 4:3 으로 자르면 위 사진의 잇몸과 아래 사진이 잘린다 → 사진 비율 그대로 */
html:not(#_):not(#_) body[data-page="gum"] .j-intro__media{aspect-ratio:1200/1256}
@media (max-width:900px){ html:not(#_):not(#_) body[data-page="gum"] .j-intro__media{aspect-ratio:1200/1256} }
/* 치료 전·치료 후 라벨 — 사이트 전후 사진 라벨(.ba-shot .lbl)과 같은 모양: 위 가장자리에 매달린 탭, 위 사진·아래 사진 각각 가운데 */
html:not(#_):not(#_) body[data-page="gum"] .j-intro__media{position:relative}
html:not(#_):not(#_) body[data-page="gum"] .j-intro__media .gi-lab{position:absolute; top:0; left:50%; transform:translateX(-50%); z-index:2;
  padding:5px 22px; border-radius:0 0 8px 8px; background:#6f6155; color:#fff; font-size:16px; font-weight:700; letter-spacing:.06em; line-height:1.75; white-space:nowrap}
html:not(#_):not(#_) body[data-page="gum"] .j-intro__media .gi-lab--a{top:50%}
@media (max-width:640px){ html:not(#_):not(#_) body[data-page="gum"] .j-intro__media .gi-lab{font-size:13px; padding:3px 14px} }
/* 사진 바로 아래 고지 문구 — 사진과 한 칸(.gi-col)으로 묶음, 글자 크기는 사이트 각주(.ba-note) 규칙 그대로 */
html:not(#_):not(#_) body[data-page="gum"] .gi-col{align-self:start; min-width:0}
html:not(#_):not(#_) body[data-page="gum"] .gi-note{margin:12px 0 0; text-align:center}
/* 잇몸성형 첫 화면 전후 사진 블록 끝 */

/* ══ 홈 첫 화면 2장 = 라미네이트 첫 화면 (2026-10-20 병원 카톡) ══
   병원 "처음 꺼만 살려 주시고, 2번째는 얼굴 움직이게 해서 라미네이트 첫 페이지로" · "3번째는 없어도 됩니다"
   → 1장(원장님) 그대로 · 2장 = 라미네이트 첫 화면 문구 + 병원이 보낸 모델 사진 · 3장 삭제(build.py HERO_SLIDES).
   사진 hero-1020-lam.jpg(2086×1041) = 병원 사진의 흰 캡처 여백만 잘라 냄. 왼쪽 45% 가 빈 베이지 벽, 눈이 사진 높이 17%.
   PC: 사진을 머리 아래 칸에 꽉(위 기준 — 아래 블라우스 쪽을 자름) + 라미네이트 첫 화면과 같은 왼쪽 밝은 막. 폰: 1장처럼 위 글 · 아래 사진.
   영상이 오면 build.py 사진 셋째 칸에 mp4 경로만 넣는다(app.js 히어로 슬라이더가 보이는 장의 영상만 처음부터 재생). */
html:not(#_):not(#_) body[data-page="home"] .hero-slide.hs--lam{background:#cbc2b8}   /* 사진 왼쪽 벽 색 */
html:not(#_):not(#_) body[data-page="home"] .hs--lam .hs-photo{left:0; right:0; width:auto}
html:not(#_):not(#_) body[data-page="home"] .hero-slide.hs--lam .hs-photo :is(img, video){position:absolute; inset:0; left:0; width:100%; height:100%;
  object-fit:cover; object-position:100% 0; -webkit-mask-image:none; mask-image:none}
html:not(#_):not(#_) body[data-page="home"] .hs--lam .hs-photo::after{content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(90deg, rgba(242,236,228,.65) 0%, rgba(245,240,234,.23) 46%, transparent 80%)}   /* 라미네이트 첫 화면 막 그대로 */
html:not(#_):not(#_) body[data-page="home"] .hs--lam .hs-line{width:clamp(28px,2.4vw,46px); height:1px; margin:clamp(22px,2.2vw,40px) 0 clamp(18px,1.8vw,32px); background:#a39b8f}
html:not(#_):not(#_) body[data-page="home"] .hs--lam .hs-name span{color:#746c60}   /* 라미네이트 첫 화면 둘째 줄 색 */
/* '하루 한 분의 진료 철학 ↗' = 라미네이트 첫 화면 단추(.v3-linkbtn) 모양 → laminate.html#one-patient */
html:not(#_):not(#_) body[data-page="home"] .hs-link{display:inline-flex; align-items:center; gap:clamp(28px,2.4vw,46px); margin-top:clamp(22px,2vw,34px);
  padding:clamp(13px,.9vw,17px) clamp(20px,1.4vw,26px); border:1px solid #7e7a71; border-radius:50px;
  font-family:"Noto Sans KR",sans-serif; font-weight:400; font-size:clamp(12px,.75vw,14px); color:#292924; text-decoration:none}
html:not(#_):not(#_) body[data-page="home"] .hs-link:hover{background:#55584c; border-color:#55584c; color:#fff}
@media (max-width:640px){
  html:not(#_):not(#_) body[data-page="home"] .hero-slide.hs--lam{background:#e6dfd6}
  /* 1장보다 글이 한 줄 · 단추만큼 길어 사진 칸 46 → 38%, 설명은 줄바꿈을 풀어 흐르게(360 폭에서도 머리 띠에 안 가림) */
  html:not(#_):not(#_) body[data-page="home"] .hs--lam .hs-photo{top:auto; height:38%;
    -webkit-mask-image:linear-gradient(180deg, transparent 0, #000 30%); mask-image:linear-gradient(180deg, transparent 0, #000 30%)}
  html:not(#_):not(#_) body[data-page="home"] .hs--lam .hs-cap{bottom:38%}
  html:not(#_):not(#_) body[data-page="home"] .hero-slide.hs--lam .hs-photo :is(img, video){object-position:72% 0}
  html:not(#_):not(#_) body[data-page="home"] .hs--lam .hs-photo::after{background:none}
  html:not(#_):not(#_) body[data-page="home"] .hs--lam .hs-line{width:26px; margin:10px 0 8px}
  html:not(#_):not(#_) body[data-page="home"] .hs--lam .hs-copy br{display:none}
  html:not(#_):not(#_) body[data-page="home"] .hs-link{gap:24px; margin-top:12px; padding:9px 18px; font-size:12px}
}
/* 홈 첫 화면 2장 = 라미네이트 첫 화면 블록 끝 */

/* ══ 잇몸성형 치료 과정 꺾인 배치 (2026-10-20 병원 카톡 KakaoTalk_zotN2LWITA) ══
   병원 그림: 1→2→3 ↓ 4 ← 5, "순서는 원래대로 흑백사진이 3번". 5 = '대표 치료사례' 전후 두 장(2:1)을 위아래로(pages_lam_sub._snake_story).
   PC(1101 이상) 3칸 두 줄 — 위 1·2·3, 아래 가운데 5 · 오른쪽 4(왼쪽 아래 칸은 비움), 칸 사이 동그란 화살표(전후사진 화살표와 같은 모양).
   1100 이하는 1~5 차례대로(사이트 기존 2칸 · 폰 1칸), 칸 사이 화살표 없음. */
.j-story--snake .j-story__media--ba{aspect-ratio:auto; background:none; box-shadow:none; overflow:visible; border-radius:0; display:grid; gap:14px}
.j-story--snake .j-story__ba{position:relative; aspect-ratio:2/1; border-radius:16px; overflow:hidden; background:#111; box-shadow:0 20px 40px -30px rgba(35,42,38,.5)}
.j-story--snake .j-story__ba img{width:100%; height:100%; object-fit:cover; display:block}
.j-story--snake .j-story__ba .lbl{position:absolute; top:0; left:50%; transform:translateX(-50%); padding:5px 22px; border-radius:0 0 12px 12px;
  font-family:var(--serif); font-size:14px; font-weight:600; letter-spacing:.06em; color:#fff}
.j-story--snake .j-story__ba--before .lbl{background:#6f6155}
.j-story--snake .j-story__ba--after .lbl{background:var(--c-violet)}
.j-story--snake .j-story__media--ba .j-story__no{z-index:2}
.j-story--snake .j-story__media--ba::after,
.j-story--snake .j-story__step:nth-child(-n+4)::after{content:""; position:absolute; z-index:2; width:44px; height:44px; border-radius:50%; pointer-events:none;
  background:var(--c-violet-deep) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M4 12h16M13 5l7 7-7 7'/></svg>") center/22px no-repeat;
  box-shadow:0 0 0 4px #fff, 0 10px 22px -10px rgba(35,42,38,.5)}
.j-story--snake .j-story__media--ba::after{left:calc(50% - 22px); top:calc(50% - 59px); transform:rotate(90deg)}   /* Before → After — Before 사진 아래쪽 안(가운데면 After 라벨을 가림, 병원 그림도 이 자리) */
.j-story--snake .j-story__step:nth-child(-n+4)::after{display:none}
@media (min-width:1101px){
  .j-story--snake .j-story__grid{container-type:inline-size; grid-template-columns:repeat(3,minmax(0,1fr)); column-gap:64px; row-gap:64px}
  .j-story--snake .j-story__step{position:relative}
  .j-story--snake .j-story__step:nth-child(4){grid-column:3; grid-row:2}
  .j-story--snake .j-story__step:nth-child(5){grid-column:2; grid-row:2}
  /* 1→2 · 2→3: 사진 높이 가운데(칸 폭 = (틀 폭 − 사이 2개) ÷ 3, 사진 16:10), 사이 64 의 가운데 */
  .j-story--snake .j-story__step:nth-child(-n+4)::after{display:block; top:calc((100cqw - 128px) / 3 * 10 / 32 - 22px); right:-54px}
  .j-story--snake .j-story__step:nth-child(3)::after{top:calc(100% + 10px); right:auto; left:calc(50% - 22px); transform:rotate(90deg)}   /* 3 ↓ 4 */
  .j-story--snake .j-story__step:nth-child(4)::after{right:auto; left:-54px; transform:rotate(180deg)}                                    /* 4 ← 5 */
}
/* 잇몸성형 치료 과정 꺾인 배치 블록 끝 */

/* 홈 진료 칸 5칸(2026-10-21) — 병원 수정 4차로 '소아 진료' 칸을 빼 6 → 5칸. PC 가로 아코디언은 그대로 늘어나고,
   900 이하 2열 격자에서 혼자 남는 마지막 칸은 같은 크기로 가운데(전 페이지 '마지막 줄 가운데' 규칙과 같음) */
@media (max-width:900px){
  body[data-page="home"] .j-acc__row > .j-acc__item:last-child:nth-child(odd){grid-column:1 / -1; justify-self:center; width:calc(50% - 5px)}
}

/* ══ 충치 '치료 방법' 카드 글 위에서 시작 (2026-10-21) — 사용자 "문구 높이 맞춰줘 · 이런 현상이 있는지 검수해봐"(~/work/align-1021/audit.py)
   두 장씩 나란한 폭(1101 이상)에서 글이 사진 옆 가운데 정렬이라 목록 길이에 따라 이웃 카드와 'Treatment 0N'·제목 높이가 달랐다 → 글을 위에서 시작.
   제목 줄 수 차이는 app.js '나란한 카드 글 높이 맞추기'가 맞춘다. 1100 이하(한 줄에 한 장)는 그대로 가운데. ══ */
@media (min-width:1101px){ body[data-page="general-cavity"] .gc-tx__body{align-self:start} }

/* ══ 홈페이지 관리 레이어팝업 · 이벤트 (2026-10-23 사용자 "홈페이지 관리에 클리브처럼 이벤트, 레이어팝업 관리를 만들어줘") ══
   그리는 것 = app.js 끝 같은 이름 블록, 내용 = CRM 홈페이지 관리(admin/homepage-popups.php · homepage-events.php) → assets/hp/*.json.
   팝업: PC 는 정한 자리에 따로(뒤 화면 그대로 쓸 수 있게 판 없음), 휴대폰은 어두운 판 위에 가운데로 겹쳐 쌓음.
   사진은 직각(2026-10-13 병원 "사진 직각"). 이벤트 머리는 전후사진 .bah 그대로. */
.hpop{position:fixed; inset:0; z-index:130}
.hpop--pc{pointer-events:none}
.hpop--pc .hpop__box{position:absolute; pointer-events:auto; width:min(var(--hpop-w,420px), calc(100vw - 40px));
  max-height:calc(100vh - var(--header-h,86px) - 40px)}
.hpop--mo{overflow-y:auto; padding:16px 14px; background:rgba(35,42,38,.62); overscroll-behavior:contain; -webkit-overflow-scrolling:touch}
.hpop__stack{display:grid; justify-items:center; align-content:center; min-height:calc(100vh - 32px); min-height:calc(100dvh - 32px)}
.hpop__stack .hpop__box{grid-area:1/1; align-self:start; position:relative; width:min(100%, var(--hpop-w,420px));
  margin-top:calc(var(--hpop-i,0) * 50px); z-index:var(--hpop-i,0)}
.hpop__box{display:flex; flex-direction:column; overflow:hidden; background:#fff; box-shadow:0 24px 64px rgba(0,0,0,.32)}
.hpop__bar{flex:0 0 auto; display:flex; align-items:center; justify-content:space-between; gap:10px; height:46px;
  padding:0 4px 0 14px; border-bottom:1px solid #e6e1d8; background:#fff}
.hpop__today{display:flex; align-items:center; gap:7px; font-size:14px; line-height:1.3; color:#555; cursor:pointer}
.hpop__today input{width:16px; height:16px; margin:0; accent-color:var(--c-violet); cursor:pointer}
.hpop__close{border:0; background:none; padding:10px 12px; font:inherit; font-size:14px; font-weight:600; color:var(--c-violet-ink); cursor:pointer}
.hpop__close::after{content:"\2715"; margin-left:6px; font-weight:400}
.hpop__img{flex:1 1 auto; min-height:0; overflow:auto; background:#f3eee2}
.hpop__img a{display:block}
.hpop__img img{display:block; width:100%; height:auto}
html.hpop-lock{overflow:hidden}

.section.hpev{padding-block:clamp(40px,4.6vw,80px) clamp(64px,6vw,120px)}
.hpev-grid{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(28px,2.6vw,48px) clamp(16px,1.8vw,32px); align-items:start}
@media (max-width:1024px){ .hpev-grid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:560px){ .hpev-grid{grid-template-columns:1fr} }
.hpev-card a{display:block; color:inherit; text-decoration:none}
.hpev-card__pic{margin:0; overflow:hidden; background:var(--c-cream)}
.hpev-card__pic img{display:block; width:100%; height:auto; transition:transform .5s ease}
.hpev-card a:hover .hpev-card__pic img{transform:scale(1.03)}
.hpev-card.is-on .hpev-card__pic{outline:2px solid var(--c-violet); outline-offset:3px}
.hpev-card__body{padding:16px 2px 0}
html:not(#_) main .hpev-card__t{margin:0; font-size:20px; font-weight:600; line-height:1.4; letter-spacing:-.02em; color:var(--c-violet-ink)}
.hpev-card__when{margin:6px 0 0; font-size:15px; color:#777; font-variant-numeric:lining-nums tabular-nums}
.hpev-card__more{display:inline-block; margin-top:10px; font-size:15px; color:var(--c-violet)}
.hpev-card__more::after{content:" \203A"}
.hpev-d{max-width:960px; margin:0 auto clamp(48px,5vw,90px)}
.hpev-d[hidden], .hpev-empty[hidden]{display:none}
.hpev-d__hd{display:flex; align-items:flex-end; justify-content:space-between; gap:16px; padding-bottom:14px; border-bottom:1px solid var(--c-violet-ink)}
html:not(#_) main .hpev-d__t{margin:0; font-size:clamp(24px,2vw,32px); font-weight:600; line-height:1.35; letter-spacing:-.02em}
.hpev-d__back{flex:0 0 auto; font-size:15px; color:var(--c-slate); text-decoration:none; white-space:nowrap}
.hpev-d__back::before{content:"\2039"; margin-right:6px}
.hpev-d__when{margin:12px 0 0; font-size:15px; color:#777; font-variant-numeric:lining-nums tabular-nums}
.hpev-d__when:empty{display:none}
.hpev-d__imgs{margin-top:20px}
.hpev-d__imgs img{display:block; width:100%; height:auto}
.hpev-d__acts{display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin-top:28px}
.hpev-empty{margin:0; padding:clamp(48px,6vw,100px) 0; text-align:center; font-size:18px; color:#777}