/* ══════════════════════════════════════════════════════════════
   죽전에스S치과의원 · 공용 디자인 시스템 v3.1 (색채 시스템 확정)
   색   : 로고 #2B4EAD + 원내 원목 #543024 (실측 추출)
   깊이 : 3단 적층 그림자 · 표면 그라디언트 · 내부 하이라이트
   ⚠️ 이 파일 하나만 고치면 전 페이지가 함께 바뀝니다.

   ── 방향 확정 (2026-08-02 원장) : D · 밝은 낮 + 톤2 '옅게' ──
   · 구조 = 절제(B) — 카드·번호배지·영문아이브로우·격자·요소그림자 전부 금지
   · 밝기 = 밝음이 기본, 어둠은 히어로 한 곳뿐 (L21%)
   · 바탕 = 순백 금지. 오프화이트 #FAF8F4 (원목 색조 미량 · Pantone 2026 Cloud Dancer 계열)
   · 무드(톤2) = '옅게' — 필름 그레인 + 컬러 그레이딩 + 젖은 반사까지만.
     레트로·블리치바이패스 등 시대색 ✗ (의료기관은 유행 타면 신뢰가 깎임)
   · 광점(앰버)은 어둠 위에서만. 밝은 바탕에선 대비 1.87:1로 안 보임 → 티일 실선으로 대체

   ── 색채 시스템 (2026-08-02 확정 · WCAG 실측 기반) ──
   구성 원리 = 근보색 조화: 블루 H224°(신뢰·구조) ↔ 원목 H20°(온기·사람).
     224°의 보색은 44° — 원목(20°)은 그 근방 = 긴장감 있되 충돌하지 않는 짝.
     원목은 채도 42%로 눌러서(저채도 보색) 블루의 보조로만 존재.
   배분 = 60·30·10: 뉴트럴(흰·쿨·웜 배경) 60 / 블루(구조·행동) 30 / 원목(인용·노트·받침판 등 '사람' 구간) 10.
   규칙:
   · 빨강 계열은 예약(경고 전용) — 의료 사이트에서 빨강=피 연상, 장식 사용 금지
   · --brand-l 은 그라디언트·장식 전용, 텍스트 금지 (흰배경 대비 3.96:1 미달)
   · 네이버 초록·카카오 노랑 = 팔레트 밖 '기능색 섬' — 다른 곳에 번지지 않게
   · 모든 텍스트 색은 배경과 4.5:1 이상(작은 글씨) / 3.0:1 이상(버튼·큰 글씨)
   · 색조(H)는 고정하고 명도(L)로만 위계 — 같은 파랑·같은 갈색의 밝기 사다리
   ══════════════════════════════════════════════════════════════ */

:root{
  /* 브랜드 블루 — 로고에서 추출 */
  --brand:#2B4EAD; --brand-d:#17296C; --brand-l:#4C7BE8; --brand-xl:#C9D9FF;
  /* 틸 — 원내 사진 하이라이트 H204 정렬. 블루와 유사색(20°), 원목과 보색(194°) */
  --teal:#296D8E; --teal-l:#4E93B4;
  /* 원목 — 원내 사진 그림자에서 추출 */
  --wood:#7A4A32; --wood-l:#A9754E; --wood-xl:#E4D3C1;
  /* 광점 — 어둠 위 전용. 면적 5%, 에너지 100% */
  --lamp:#E7AA40; --lamp-w:#F2C877;
  /* 어둠 — 히어로 한 곳뿐. L21%로 '검정' 아닌 '파랑'으로 읽히게 */
  --night:#1A3050; --night-d:#12233A;
  /* 바탕 — 순백 금지. 오프화이트 3단(H40 동일, 명도만 이동 = 단색조화) */
  --bg:#FAF8F4; --cool:#F5F2EC; --warm:#EFEBE3; --line:#E4DFD6;
  /* 뉴트럴 */
  --ink:#141A24; --ink-2:#2B3444; --body:#4C5870; --mute:#6B7280;
  /* 표면 — 카드 금지. 면 구분은 선·여백·톤으로 */
  --card:linear-gradient(180deg,#FDFCFA 0%,#F8F6F1 100%);
  --hi:inset 0 1px 0 rgba(255,255,255,.85);
  --ring:0 0 0 1px rgba(20,26,36,.075);
  --rule:1px solid rgba(20,26,36,.12);
  /* 그림자 — 절제 문법이라 사진·부유요소에만. 요소용 sh1/sh2는 폐기 */
  --sh-img:0 0 0 1px rgba(20,26,36,.06), 0 18px 40px rgba(20,26,36,.10);
  --sh-lift:0 10px 26px rgba(20,26,36,.10);
  --r:14px; --r-l:20px;
  --f-head:"Pretendard Variable",Pretendard,system-ui,sans-serif;
  --f-body:"Pretendard Variable",Pretendard,system-ui,sans-serif;
  --f-serif:"Noto Serif KR",serif;
  --hw:800; --hls:-.04em; --wrap:1180px; --read:780px;
  /* 톤2 '옅게' — 그레인 강도 .30 (C안 .42에서 완화) */
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
}
/* 구 토큰 호환 별칭 — 점진 이관용. 신규 작성 시 사용 금지 */
:root{ --sh1:none; --sh2:var(--sh-lift); --sh3:var(--sh-img); --sh4:var(--sh-img); }

[data-theme="warm"]{--brand:#1E3A6E;--brand-d:#0F2044;--brand-l:#3B6BB8;--brand-xl:#C2D4F2;
  --wood:#6B4227;--wood-l:#9C6A42;--wood-xl:#E6D9C9;--ink:#161F30;--ink-2:#303C54;--body:#525E76;--mute:#767061;
  --bg:#FDFCFA;--cool:#F5F2ED;--warm:#F1EDE6;--line:#E7E1D6;
  --card:linear-gradient(180deg,#FDFCFA 0%,#FAF7F2 100%);
  --f-head:"Noto Serif KR",serif;--hw:700;--hls:-.02em;}
  /* ↑ 웜 테마 크림을 회색 쪽으로 이동 — "크림+세리프+테라코타" AI 기본값에서 이탈(frontend-design 보정) */
[data-theme="soft"]{--brand:#3E4C63;--brand-d:#232D40;--brand-l:#657FA6;--brand-xl:#C6CFDC;
  --wood:#6E5A48;--wood-l:#96806A;--wood-xl:#E0D8CE;--ink:#181F2B;--ink-2:#374156;--body:#586274;--mute:#6C7686;
  --bg:#FFFFFF;--cool:#F6F8FA;--warm:#F8F6F3;--line:#E5E9EF;--hw:700;}

/* ── 기본 ── */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:76px;}
body{margin:0;background:var(--bg);color:var(--body);font-family:var(--f-body);font-size:17px;line-height:1.9;
  word-break:keep-all;overflow-wrap:break-word;-webkit-font-smoothing:antialiased;letter-spacing:-.012em;}
h1,h2,h3,h4{margin:0;font-family:var(--f-head);color:var(--ink);line-height:1.4;letter-spacing:var(--hls);font-weight:var(--hw);}
p{margin:0 0 1.15em;} a{color:var(--brand);text-decoration:none;} img{max-width:100%;display:block;}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px;}
.read{max-width:var(--read);margin-left:auto;margin-right:auto;}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);}
@media(max-width:640px){body{font-size:16.5px;}.wrap{padding:0 18px;}}

#prog{position:fixed;top:0;left:0;height:3px;width:0;z-index:95;
  background:linear-gradient(90deg,var(--brand-d),var(--brand) 40%,var(--brand-l));
  box-shadow:0 0 12px rgba(43,78,173,.5);transition:width .1s linear;}

/* ── 시안 배너 (게시 시 제거) ── */
.proof{background:linear-gradient(180deg,#151E30,#0E1524);color:#D6DEEC;font-size:13px;padding:11px 18px;
  display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;justify-content:center;text-align:center;}
.proof b{color:#FFCF6B;} .proof .sw{display:flex;gap:6px;}
.proof button{font-family:inherit;font-size:12.5px;padding:5px 13px;border-radius:99px;cursor:pointer;
  border:1px solid #3A465E;background:rgba(255,255,255,.04);color:#C3CEE0;transition:.18s;}
.proof button:hover{border-color:#7688A8;color:#fff;}
.proof button[aria-pressed="true"]{background:#fff;color:#141C2C;border-color:#fff;font-weight:700;box-shadow:0 3px 12px rgba(0,0,0,.35);}
.chk{background:linear-gradient(180deg,#FFF0BC,#FFE49A);border-bottom:2px solid #DDA818;padding:1px 6px;
  border-radius:4px;font-weight:700;color:#6B4D05;font-size:.94em;}

/* ── 헤더 ── */
.top{position:sticky;top:0;z-index:80;background:rgba(255,255,255,.82);
  backdrop-filter:saturate(180%) blur(16px);-webkit-backdrop-filter:saturate(180%) blur(16px);
  border-bottom:1px solid rgba(226,232,244,.8);transition:box-shadow .25s,background .25s;}
.top.stuck{box-shadow:0 1px 0 rgba(13,21,38,.04),0 8px 28px rgba(13,21,38,.08);background:rgba(255,255,255,.93);}
[data-theme="warm"] .top{background:rgba(255,253,249,.86);}
.top-in{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:14px 24px;max-width:var(--wrap);margin:0 auto;}
.brand img{height:29px;}
.gnb{display:flex;gap:26px;list-style:none;margin:0;padding:0;font-size:15.5px;font-weight:500;}
.gnb a{color:var(--ink-2);position:relative;padding:6px 0;}
.gnb a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:2px;border-radius:2px;
  background:linear-gradient(90deg,var(--brand),var(--brand-l));transition:right .3s cubic-bezier(.4,0,.2,1);}
.gnb a:hover::after,.gnb a.on::after{right:0;}
.gnb a.on{color:var(--brand);font-weight:700;}
.tel-btn{display:inline-flex;align-items:center;gap:8px;font-size:15px;font-weight:700;color:var(--ink);white-space:nowrap;
  padding:9px 16px;border-radius:99px;background:var(--card);box-shadow:var(--ring),var(--sh1),var(--hi);transition:.2s;}
.tel-btn:hover{box-shadow:var(--ring),var(--sh2),var(--hi);transform:translateY(-1px);}
.tel-btn svg{width:16px;height:16px;fill:var(--brand);}
@media(max-width:980px){.gnb{display:none;} .top-in{padding:12px 18px;}}

/* ── 버튼 ── */
.btn{display:inline-flex;align-items:center;gap:9px;padding:16px 30px;border-radius:99px;font-weight:700;font-size:16px;
  letter-spacing:-.02em;transition:transform .22s cubic-bezier(.2,.7,.3,1),box-shadow .22s,filter .22s;}
.btn svg{width:18px;height:18px;}
.btn-p{background:linear-gradient(180deg,#02A94C 0%,#029A45 100%);color:#fff; /* 흰글씨 3.1~3.7:1 — 네이버 초록 H147 유지 */
  box-shadow:inset 0 1px 0 rgba(255,255,255,.32), 0 2px 5px rgba(2,100,46,.38), 0 10px 24px rgba(2,169,76,.32), 0 22px 46px rgba(2,169,76,.18);}
.btn-p svg{fill:#fff;filter:drop-shadow(0 1px 1px rgba(0,60,25,.3));}
.btn-p:hover{transform:translateY(-3px);filter:brightness(1.04);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4), 0 3px 7px rgba(2,100,46,.4), 0 16px 34px rgba(2,169,76,.4), 0 30px 60px rgba(2,169,76,.22);}
.btn-g{background:linear-gradient(180deg,rgba(255,255,255,.22),rgba(255,255,255,.09));color:#fff;
  border:1px solid rgba(255,255,255,.42);backdrop-filter:blur(10px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35), 0 8px 24px rgba(0,10,30,.28);}
.btn-g svg{fill:#fff;}
.btn-g:hover{background:linear-gradient(180deg,rgba(255,255,255,.32),rgba(255,255,255,.16));transform:translateY(-3px);}
.btn-b{background:linear-gradient(180deg,var(--brand-l) 0%,var(--brand) 100%);color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3), 0 2px 5px rgba(20,40,110,.3), 0 10px 24px rgba(43,78,173,.34), 0 22px 44px rgba(43,78,173,.18);}
.btn-b svg{fill:#fff;}
.btn-b:hover{transform:translateY(-3px);filter:brightness(1.05);}

/* ── 히어로 : 영상형 (메인) ── */
.hero{position:relative;min-height:min(86vh,740px);display:flex;align-items:flex-end;overflow:hidden;background:#0B1220;}
.hero video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.hero::after{content:"";position:absolute;inset:0;
  background:
    radial-gradient(120% 80% at 15% 100%, rgba(23,41,108,.62) 0%, transparent 62%),
    linear-gradient(180deg, rgba(8,16,34,.46) 0%, rgba(8,16,34,.06) 34%, rgba(8,16,34,.55) 72%, rgba(8,16,34,.88) 100%);}
.hero .grain{position:absolute;inset:0;background-image:var(--grain);opacity:.28;mix-blend-mode:overlay;pointer-events:none;z-index:1;}
.hero-in{position:relative;z-index:2;width:100%;max-width:var(--wrap);margin:0 auto;padding:0 24px 96px;}
.hero .eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:12.5px;font-weight:700;letter-spacing:.14em;color:#C4D6FF;margin-bottom:18px;}
.hero .eyebrow::before{content:"";width:26px;height:2px;border-radius:2px;background:linear-gradient(90deg,#C4D6FF,rgba(196,214,255,.2));}
.hero h1{color:#fff;font-size:clamp(31px,5.4vw,60px);line-height:1.26;margin-bottom:18px;
  text-shadow:0 1px 2px rgba(0,10,30,.34),0 8px 40px rgba(0,10,30,.5);}
.hero p{color:#D9E4F7;font-size:clamp(16px,1.9vw,19.5px);max-width:620px;margin-bottom:30px;text-shadow:0 1px 12px rgba(0,10,30,.5);}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;}
@media(max-width:640px){.hero{min-height:74vh;} .hero-in{padding:0 18px 78px;}}

/* ── 히어로 : 사진 분할형 (하위 페이지) ── */
.phero{position:relative;padding:52px 0 8px;
  background:radial-gradient(900px 460px at 8% -12%, rgba(43,78,173,.09), transparent 62%),
             radial-gradient(700px 420px at 96% 0%, rgba(122,74,50,.07), transparent 60%),
             linear-gradient(180deg,var(--cool) 0%, #FBFCFE 100%);}
.phero-grid{display:grid;grid-template-columns:1fr 1fr;gap:54px;align-items:center;}
.crumb{font-size:13px;color:var(--mute);margin-bottom:20px;letter-spacing:0;}
.crumb a{color:var(--mute);} .crumb a:hover{color:var(--brand);}
.phero h1{font-size:clamp(32px,4.6vw,50px);margin-bottom:15px;}
.phero .tagline{font-size:clamp(16.5px,2vw,19.5px);color:var(--ink-2);font-weight:500;line-height:1.7;margin:0;}
.phero .ph{position:relative;}
.phero .ph::before{content:"";position:absolute;inset:24px -24px -24px 24px;border-radius:var(--r-l);
  background:linear-gradient(135deg,var(--wood-xl),rgba(228,211,193,.22));z-index:0;}
.phero .ph img{position:relative;z-index:1;width:100%;height:400px;object-fit:cover;border-radius:var(--r-l);
  box-shadow:0 0 0 1px rgba(13,21,38,.06),var(--sh4);}
.phero .tag{position:absolute;z-index:2;left:20px;bottom:20px;background:rgba(255,255,255,.94);
  backdrop-filter:blur(10px);padding:9px 17px;border-radius:99px;font-size:13.5px;font-weight:700;
  color:var(--ink);box-shadow:var(--ring),var(--sh2);}
@media(max-width:900px){.phero{padding:32px 0 4px;} .phero-grid{grid-template-columns:1fr;gap:44px;}
  .phero .ph img{height:260px;} .phero .ph::before{inset:18px -14px -18px 14px;}}

/* ── 신뢰 바 ── */
.trust-wrap{position:relative;z-index:6;margin-top:-52px;padding:0 24px;}
.trust{max-width:var(--wrap);margin:0 auto;border-radius:var(--r-l);padding:26px 32px;
  background:linear-gradient(135deg,var(--brand-d) 0%,var(--brand) 52%,#3A63C9 100%);
  box-shadow:var(--sh4), inset 0 1px 0 rgba(255,255,255,.22);
  display:grid;grid-template-columns:repeat(4,1fr);gap:16px;position:relative;overflow:hidden;}
.trust::before{content:"";position:absolute;inset:0;background-image:var(--grain);opacity:.16;mix-blend-mode:overlay;}
.trust div{position:relative;display:flex;flex-direction:column;gap:3px;}
.trust div+div{padding-left:20px;border-left:1px solid rgba(255,255,255,.16);}
.trust .k{font-size:12px;font-weight:700;letter-spacing:.1em;color:var(--brand-xl);}
.trust .v{font-size:16.5px;font-weight:700;letter-spacing:-.025em;color:#fff;}
/* 하위 페이지용 — 겹치지 않는 버전 */
.trust-wrap.flat{margin-top:44px;}
@media(max-width:860px){.trust{grid-template-columns:1fr 1fr;gap:18px;padding:24px;}
  .trust div+div{padding-left:0;border-left:0;}
  .trust div:nth-child(even){padding-left:18px;border-left:1px solid rgba(255,255,255,.16);}}
@media(max-width:640px){.trust-wrap{margin-top:-40px;padding:0 18px;} .trust-wrap.flat{margin-top:32px;}}

/* ── 섹션 ── */
section{padding:104px 0;position:relative;} /* v3: 여백 확대(82→104) — 건축 벤치마킹 ⑤ */
.sec-cool{background:
  radial-gradient(880px 420px at 10% -10%, rgba(43,78,173,.085), transparent 62%),
  radial-gradient(700px 400px at 94% 6%, rgba(122,74,50,.055), transparent 60%),
  linear-gradient(180deg, var(--cool) 0%, #FBFCFE 100%);}
.sec-warm{background:
  radial-gradient(760px 380px at 88% -8%, rgba(122,74,50,.09), transparent 62%),
  linear-gradient(180deg, var(--warm) 0%, #FDFBF8 100%);}
.sec-tight{padding:64px 0;}
.sec-head{margin-bottom:52px;}
.eyebrow2{display:inline-flex;align-items:center;gap:10px;font-size:12.5px;font-weight:700;letter-spacing:.14em;color:var(--brand);margin-bottom:14px;}
.eyebrow2::before{content:"";width:26px;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--brand),rgba(43,78,173,.15));}
.sec-head h2{font-size:clamp(26px,3.5vw,40px);margin-bottom:12px;}
.sec-head .desc{font-size:16.5px;color:var(--mute);margin:0;}
.center{text-align:center;} .center .eyebrow2{justify-content:center;}
h3{font-size:20px;margin:32px 0 10px;}
@media(max-width:640px){section{padding:64px 0;} .sec-tight{padding:46px 0;} .sec-head{margin-bottom:38px;}}

/* 스크롤 등장 — html.js 게이트: JS가 없으면 전부 그대로 보임 (no-JS 폴백, ui-ux-pro-max 가이드) */
html.js .rv{opacity:0;transform:translateY(14px);transition:opacity .6s cubic-bezier(.2,.7,.3,1),transform .6s cubic-bezier(.2,.7,.3,1);}
html.js .rv.in{opacity:1;transform:none;}

/* 클립 리빌 — 사진이 커튼 열리듯 (건축 벤치마킹 · 6/8 사이트 사용 기법) */
html.js .rv-clip{clip-path:inset(0 0 100% 0);transition:clip-path 1.05s cubic-bezier(.65,.05,.2,1);}
html.js .rv-clip img{transform:scale(1.12);transition:transform 1.35s cubic-bezier(.2,.7,.3,1);}
html.js .rv-clip.in{clip-path:inset(0 0 0% 0);}
html.js .rv-clip.in img{transform:scale(1);}

/* 패럴랙스 — 배경·전경 속도차로 깊이 (--plx는 JS가 갱신, reduced-motion 시 JS가 건너뜀) */
.plx{overflow:hidden;}
.plx img{transform:translateY(calc(var(--plx,0)*1px)) scale(1.12);will-change:transform;}

@media(prefers-reduced-motion:reduce){
  html.js .rv,html.js .rv-clip{opacity:1;transform:none;transition:none;clip-path:none;}
  html.js .rv-clip img{transform:none;transition:none;}
  .plx img{transform:none;}
  html{scroll-behavior:auto;}
}

/* ── 즉답 박스 ── */
.lead{border-radius:var(--r-l);padding:32px 36px;position:relative;overflow:hidden;
  background:linear-gradient(135deg,rgba(43,78,173,.075),rgba(122,74,50,.05));
  box-shadow:var(--ring),var(--sh1);}
.lead::before{content:"";position:absolute;left:0;top:26px;bottom:26px;width:4px;border-radius:0 4px 4px 0;
  background:linear-gradient(180deg,var(--brand),var(--brand-l));}
.lead p{font-size:17.5px;color:var(--ink-2);line-height:1.85;}
.lead p:last-child{margin-bottom:0;}
.lead strong{color:var(--brand-d);font-weight:700;}
@media(max-width:640px){.lead{padding:24px 22px;border-radius:var(--r);}}

/* ── 사회적 증거 밴드 (리뷰 개수 + 흐르는 사실 티커) ──
   ⚠️ 의료법 §56②2 치료경험담 광고 금지 → 리뷰 "본문"은 절대 싣지 않는다.
      플랫폼이 집계한 "개수"(객관적 사실)와 병원 사실 정보만 노출하고,
      실제 후기는 네이버 링크로 보내 환자가 직접 보게 한다. */
.proof-band{padding:64px 0 58px;overflow:hidden;
  background:radial-gradient(760px 380px at 50% -20%, rgba(43,78,173,.1), transparent 62%),
             linear-gradient(180deg,var(--cool) 0%, #FBFCFE 100%);}
.rvcount{display:flex;align-items:center;justify-content:center;gap:clamp(20px,4vw,54px);flex-wrap:wrap;text-align:center;}
.rvcount .n{font-family:var(--f-serif);font-weight:700;letter-spacing:-.04em;line-height:.92;
  font-size:clamp(64px,11vw,124px);
  background:linear-gradient(180deg,var(--brand-l),var(--brand-d));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 6px 18px rgba(43,78,173,.22));}
.rvcount .meta{text-align:left;}
.rvcount .lbl{font-size:12.5px;font-weight:700;letter-spacing:.14em;color:var(--brand);margin-bottom:6px;}
.rvcount .desc{font-size:clamp(17px,2.1vw,21px);font-weight:600;color:var(--ink);letter-spacing:-.025em;margin-bottom:16px;}
.rvcount .sub{font-size:14.5px;color:var(--mute);margin:10px 0 0;}
@media(max-width:600px){.rvcount{gap:14px;} .rvcount .meta{text-align:center;}}

.ticker{margin-top:44px;overflow:hidden;position:relative;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);}
.ticker-track{display:flex;gap:13px;width:max-content;animation:tickmove 42s linear infinite;}
.ticker:hover .ticker-track{animation-play-state:paused;}
@keyframes tickmove{from{transform:translateX(0);} to{transform:translateX(-50%);}}
@media(prefers-reduced-motion:reduce){.ticker-track{animation:none;}}
.ticker span{flex:none;display:inline-flex;align-items:center;gap:9px;white-space:nowrap;
  padding:14px 24px;border-radius:99px;font-size:16px;font-weight:600;color:var(--ink-2);
  background:var(--card);box-shadow:var(--ring),var(--sh1),var(--hi);}
.ticker span::before{content:"";width:7px;height:7px;border-radius:50%;flex:none;
  background:linear-gradient(135deg,var(--brand-l),var(--brand));box-shadow:0 0 0 3px rgba(43,78,173,.1);}
.ticker span b{color:var(--brand-d);font-weight:800;}

/* ── 고민 카드 ── */
.worry{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;}
.worry div{position:relative;background:var(--card);border-radius:var(--r-l);padding:30px 26px 28px;
  box-shadow:var(--ring),var(--sh2),var(--hi);}
  /* v3: 호버 부상 제거 — 클릭 안 되는 카드가 떠오르면 링크로 오인(어포던스 오류). 부상은 실제 링크에만 */
.worry .q{font-family:Georgia,serif;font-size:56px;line-height:.7;color:var(--wood-xl);margin-bottom:14px;display:block;}
.worry p{margin:0;font-size:16.5px;color:var(--ink-2);}
@media(max-width:900px){.worry{grid-template-columns:1fr 1fr;}}
@media(max-width:560px){.worry{grid-template-columns:1fr;}}

/* ── 진료과목 카드 ── */
.svc{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.svc a{display:block;background:var(--card);border-radius:var(--r-l);overflow:hidden;position:relative;
  box-shadow:var(--ring),var(--sh2),var(--hi);transition:transform .3s cubic-bezier(.2,.7,.3,1),box-shadow .3s;}
.svc a:hover{transform:translateY(-8px);box-shadow:0 0 0 1px rgba(43,78,173,.18),var(--sh4),var(--hi);}
.svc figure{margin:0;aspect-ratio:16/10;overflow:hidden;background:var(--cool);position:relative;}
.svc figure::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(13,21,38,0) 55%,rgba(13,21,38,.16) 100%);}
.svc img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.7,.3,1);}
.svc a:hover img{transform:scale(1.06);}
.svc .body{padding:24px 26px 28px;position:relative;}
.svc .ghost{position:absolute;right:20px;top:-38px;font-family:var(--f-head);font-size:82px;font-weight:800;
  line-height:1;letter-spacing:-.06em;color:transparent;-webkit-text-stroke:1.6px rgba(255,255,255,.55);pointer-events:none;}
.svc .no{font-size:12px;font-weight:800;color:var(--brand);letter-spacing:.14em;}
.svc h3{font-size:20.5px;margin:6px 0 8px;}
.svc p{margin:0;font-size:15.5px;color:var(--body);line-height:1.7;}
@media(max-width:900px){.svc{grid-template-columns:1fr 1fr;}}
@media(max-width:560px){.svc{grid-template-columns:1fr;}}

/* ── 증상 체크 목록 ── */
.sx{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.sx li{background:var(--card);border-radius:var(--r);padding:19px 22px;display:flex;gap:13px;align-items:flex-start;
  font-size:16.5px;color:var(--ink-2);box-shadow:var(--ring),var(--sh1),var(--hi);
  transition:transform .24s cubic-bezier(.2,.7,.3,1),box-shadow .24s;}
.sx li:hover{transform:translateY(-4px);box-shadow:0 0 0 1px rgba(43,78,173,.16),var(--sh2),var(--hi);}
.sx .ck{flex:none;width:26px;height:26px;border-radius:50%;margin-top:2px;position:relative;
  background:linear-gradient(180deg,var(--brand-l),var(--brand));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 3px 9px rgba(43,78,173,.3);}
.sx .ck::after{content:"";position:absolute;left:8px;top:7px;width:8px;height:12px;
  border:solid #fff;border-width:0 2.2px 2.2px 0;transform:rotate(45deg);}
.sx a{border-bottom:1.5px solid color-mix(in srgb,var(--brand) 35%,transparent);font-weight:600;}
.sx a:hover{border-bottom-color:var(--brand);}
@media(max-width:760px){.sx{grid-template-columns:1fr;}}

/* ── 스티키 핀 그리드 — "공간을 걷는 진료" 시그니처 (건축 벤치마킹 ①, 8/8 사이트 사용) ──
   왼쪽 사진이 화면에 고정된 채, 오른쪽 치료 단계가 그 공간 안을 걷듯 흐른다. */
.pin-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:56px;align-items:start;}
.pin-media{position:sticky;top:104px;}
.pin-media figure{margin:0;border-radius:var(--r-l);overflow:hidden;
  box-shadow:0 0 0 1px rgba(13,21,38,.055),var(--sh3);}
.pin-media img{width:100%;aspect-ratio:4/5;object-fit:cover;display:block;}
.pin-media figcaption{margin-top:14px;font-size:14px;color:var(--mute);text-align:center;}
@media(max-width:860px){
  .pin-grid{grid-template-columns:1fr;gap:36px;}
  .pin-media{position:static;}
  .pin-media img{aspect-ratio:16/9;}
}

/* ── 단계 타임라인 ── */
.steps{list-style:none;margin:36px 0 0;padding:0;position:relative;}
.steps::before{content:"";position:absolute;left:31px;top:38px;bottom:48px;width:2px;border-radius:2px;
  background:linear-gradient(180deg,var(--brand),color-mix(in srgb,var(--brand) 10%,transparent));}
.steps>li{position:relative;padding:0 0 28px 86px;}
.steps>li:last-child{padding-bottom:0;}
.num{position:absolute;left:0;top:0;width:62px;height:62px;border-radius:50%;z-index:1;
  font-family:var(--f-head);font-size:21px;font-weight:800;letter-spacing:-.03em;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(180deg,var(--brand-l),var(--brand));color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 4px 12px rgba(43,78,173,.34),0 12px 26px rgba(43,78,173,.18);}
.num.open{background:var(--card);color:var(--brand);box-shadow:var(--ring),var(--sh1),var(--hi);}
.steps h3{margin:13px 0 8px;font-size:20px;}
.steps .en{font-size:12.5px;color:var(--mute);font-weight:500;font-family:var(--f-body);letter-spacing:.04em;margin-left:9px;}
.steps p{margin:0;font-size:16.5px;}
@media(max-width:640px){.steps::before{left:22px;} .steps>li{padding-left:62px;}
  .num{width:44px;height:44px;font-size:17px;} .steps h3{margin-top:5px;font-size:18px;}}

/* ── 3단계 카드 ── */
.steps3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;counter-reset:s3;}
.steps3 div{counter-increment:s3;position:relative;background:var(--card);border-radius:var(--r-l);padding:36px 30px;
  box-shadow:var(--ring),var(--sh2),var(--hi);} /* v3: 비링크 카드 호버 부상 제거 */
.steps3 div::before{content:"0" counter(s3);display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;border-radius:50%;margin-bottom:16px;
  font-family:var(--f-head);font-weight:800;font-size:15px;color:#fff;
  background:linear-gradient(180deg,var(--brand-l),var(--brand));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 4px 12px rgba(43,78,173,.32),0 10px 22px rgba(43,78,173,.16);}
.steps3 h3{font-size:20px;margin:0 0 10px;}
.steps3 p{margin:0;font-size:16px;}
@media(max-width:820px){.steps3{grid-template-columns:1fr;}}

/* ── 콜아웃 ── */
.note{border-radius:var(--r);padding:22px 26px;margin:28px 0 0;font-size:16.5px;color:var(--ink-2);
  background:linear-gradient(135deg,rgba(122,74,50,.075),rgba(122,74,50,.03));
  box-shadow:var(--ring);border-left:4px solid var(--wood-l);}
.note p:last-child{margin-bottom:0;} .note strong{color:var(--wood);}

/* ── 원장 ── */
.doc{display:grid;grid-template-columns:.92fr 1.08fr;gap:60px;align-items:center;}
.doc .ph{position:relative;}
.doc .ph::before{content:"";position:absolute;inset:26px -26px -26px 26px;border-radius:var(--r-l);
  background:linear-gradient(135deg,var(--wood-xl),rgba(228,211,193,.25));z-index:0;}
.doc .ph img{position:relative;z-index:1;border-radius:var(--r-l);width:100%;
  box-shadow:0 0 0 1px rgba(13,21,38,.06),var(--sh4);}
.doc .lead2{font-size:19.5px;color:var(--ink-2);line-height:1.8;margin-bottom:24px;}
.cred{list-style:none;margin:0 0 28px;padding:0;display:grid;gap:10px;}
.cred li{display:flex;gap:12px;font-size:16px;color:var(--ink-2);align-items:flex-start;}
.cred li::before{content:"";flex:none;width:7px;height:7px;border-radius:50%;margin-top:11px;
  background:linear-gradient(135deg,var(--brand-l),var(--brand));box-shadow:0 0 0 3px rgba(43,78,173,.1);}
@media(max-width:860px){.doc{grid-template-columns:1fr;gap:44px;} .doc .ph::before{inset:20px -14px -20px 14px;}}

/* ── 인용 ── */
.pq{text-align:center;}
.pq .mark{font-family:Georgia,serif;font-size:88px;line-height:.5;color:var(--wood-l);opacity:.34;display:block;margin-bottom:22px;}
.pq blockquote{margin:0;font-family:var(--f-serif);font-weight:700;font-size:clamp(22px,3.5vw,37px);
  line-height:1.62;color:var(--ink);letter-spacing:-.015em;}
  /* v3: 인용문은 전 테마 세리프 — 원장의 실제 벽 문구에 '기록'의 격을 부여 (세리프는 여기와 큰 숫자에만) */
.pq cite{display:block;margin-top:22px;font-style:normal;font-size:14.5px;color:var(--mute);}

/* ── 포토 밴드 ── */
.band{position:relative;border-radius:var(--r-l);overflow:hidden;margin-top:38px;
  box-shadow:0 0 0 1px rgba(13,21,38,.055),var(--sh3);}
.band img{width:100%;height:320px;object-fit:cover;}
@media(max-width:640px){.band img{height:210px;}}

/* ── 갤러리 ── */
.gal{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;padding:8px 24px 22px;-webkit-overflow-scrolling:touch;}
.gal::-webkit-scrollbar{height:8px;}
.gal::-webkit-scrollbar-thumb{background:linear-gradient(90deg,var(--brand-xl),var(--line));border-radius:9px;}
.gal figure{margin:0;flex:0 0 min(440px,78vw);scroll-snap-align:center;}
.gal img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:var(--r-l);
  box-shadow:0 0 0 1px rgba(13,21,38,.055),var(--sh3);transition:transform .3s,box-shadow .3s;}
.gal figure:hover img{transform:translateY(-4px);box-shadow:0 0 0 1px rgba(13,21,38,.07),var(--sh4);}
.gal figcaption{margin-top:14px;font-size:14.5px;color:var(--mute);text-align:center;}

/* ── FAQ ── */
.faq details{background:var(--card);border-radius:var(--r);margin-bottom:12px;overflow:hidden;
  box-shadow:var(--ring),var(--sh1),var(--hi);transition:box-shadow .24s;}
.faq details[open]{box-shadow:0 0 0 1px rgba(43,78,173,.18),var(--sh2),var(--hi);}
.faq summary{cursor:pointer;padding:20px 24px;font-family:var(--f-head);font-weight:700;font-size:17.5px;
  color:var(--ink);list-style:none;display:flex;justify-content:space-between;gap:16px;align-items:center;letter-spacing:-.025em;}
.faq summary::-webkit-details-marker{display:none;}
.faq .ico{flex:none;width:28px;height:28px;border-radius:50%;position:relative;transition:.3s;
  background:linear-gradient(180deg,#fff,#EEF3FD);box-shadow:var(--ring),0 1px 3px rgba(13,21,38,.08);}
.faq .ico::before,.faq .ico::after{content:"";position:absolute;left:50%;top:50%;background:var(--brand);
  border-radius:2px;transform:translate(-50%,-50%);transition:.3s;}
.faq .ico::before{width:11px;height:2px;} .faq .ico::after{width:2px;height:11px;}
.faq details[open] .ico{background:linear-gradient(180deg,var(--brand-l),var(--brand));transform:rotate(180deg);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 4px 12px rgba(43,78,173,.3);}
.faq details[open] .ico::before{background:#fff;} .faq details[open] .ico::after{height:0;}
.faq .a{padding:0 24px 23px;font-size:16.5px;}
.faq .a p:last-child{margin-bottom:0;}
@media(max-width:640px){.faq summary{padding:17px 18px;font-size:16.5px;}.faq .a{padding:0 18px 19px;}}

/* ── 관련 글 (네이버 블로그) ── */
.posts{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.posts a{display:block;background:var(--card);border-radius:var(--r-l);padding:24px 26px;
  box-shadow:var(--ring),var(--sh2),var(--hi);transition:transform .26s cubic-bezier(.2,.7,.3,1),box-shadow .26s;}
.posts a:hover{transform:translateY(-6px);box-shadow:0 0 0 1px rgba(3,199,90,.3),var(--sh3),var(--hi);}
.posts .t{display:block;font-family:var(--f-head);font-weight:700;font-size:17.5px;color:var(--ink);
  letter-spacing:-.025em;line-height:1.5;margin-bottom:8px;}
.posts .d{display:block;font-size:15px;color:var(--body);line-height:1.65;}
.posts .via{display:inline-flex;align-items:center;gap:7px;margin-top:16px;font-size:12.5px;font-weight:700;color:#027A37;} /* 5.5:1 */
.posts .via::before{content:"N";display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;
  background:linear-gradient(180deg,#02A94C,#029A45);color:#fff;border-radius:4px;font-size:11px;font-weight:800;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 2px 6px rgba(3,199,90,.35);}
@media(max-width:760px){.posts{grid-template-columns:1fr;}}

/* ── 진료안내 ── */
.info-grid{display:grid;grid-template-columns:1.15fr 1fr;gap:34px;align-items:start;}
.hours{width:100%;border-collapse:separate;border-spacing:0;font-size:16.5px;border-radius:var(--r);overflow:hidden;
  background:var(--card);box-shadow:var(--ring),var(--sh2),var(--hi);}
.hours th,.hours td{padding:16px 20px;text-align:left;border-bottom:1px solid var(--line);}
.hours tr:last-child th,.hours tr:last-child td{border-bottom:0;}
.hours th{background:linear-gradient(180deg,rgba(43,78,173,.055),rgba(43,78,173,.025));font-weight:600;color:var(--ink);width:37%;font-size:16px;}
.hours .hl{color:var(--brand);font-weight:700;} .hours .sm{color:var(--mute);font-size:14.5px;}
.addr-card{background:var(--card);border-radius:var(--r);padding:28px;box-shadow:var(--ring),var(--sh2),var(--hi);}
.addr-card .lbl{font-size:12px;font-weight:700;letter-spacing:.12em;color:var(--brand);margin-bottom:9px;}
.addr-card p{font-size:16.5px;color:var(--ink-2);margin-bottom:20px;}
.addr-card .big{display:block;font-family:var(--f-head);font-size:27px;font-weight:var(--hw);color:var(--ink);letter-spacing:-.035em;}
@media(max-width:860px){.info-grid{grid-template-columns:1fr;gap:22px;}}

/* ── byline ── */
.byline{margin-top:42px;padding:26px 28px;border-radius:var(--r);font-size:15.5px;color:var(--body);line-height:1.8;
  background:linear-gradient(135deg,rgba(122,74,50,.06),rgba(43,78,173,.045));box-shadow:var(--ring);}
.byline p{margin:0 0 4px;} .byline p:last-child{margin:0;} .byline strong{color:var(--ink);font-weight:600;}
.byline .upd{margin-top:12px;padding-top:12px;border-top:1px solid rgba(13,21,38,.09);
  font-size:14px;color:var(--mute);}
.byline .upd time{font-weight:600;color:var(--ink-2);}

/* ── 푸터 ── */
footer{background:linear-gradient(180deg,#131E33 0%,var(--ink) 100%);color:#9FADC6;font-size:14.5px;
  padding:58px 0 118px;position:relative;overflow:hidden;}
footer::before{content:"";position:absolute;inset:0;background-image:var(--grain);opacity:.14;mix-blend-mode:overlay;}
footer .wrap{position:relative;}
footer .fname{font-family:var(--f-head);font-size:19px;font-weight:var(--hw);color:#fff;letter-spacing:-.035em;margin-bottom:15px;}
footer p{margin:0 0 6px;line-height:1.75;}
footer .sns{margin-top:24px;padding-top:22px;border-top:1px solid rgba(255,255,255,.11);
  display:flex;flex-wrap:wrap;gap:10px;}
footer .sns a{display:inline-flex;align-items:center;padding:9px 17px;border-radius:99px;font-size:14px;
  font-weight:600;color:#CFDBEC;background:rgba(255,255,255,.07);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.09);transition:.2s;}
footer .sns a:hover{background:rgba(255,255,255,.15);color:#fff;transform:translateY(-2px);}
footer .svc2{margin-top:18px;padding-top:20px;border-top:1px solid rgba(255,255,255,.11);
  display:flex;flex-wrap:wrap;gap:8px 18px;font-size:14px;color:#8496B3;}

/* ── 하단 고정바 ── */
.bar{position:fixed;left:0;right:0;bottom:0;z-index:85;display:grid;grid-template-columns:1fr 1.45fr 1fr;
  background:rgba(255,255,255,.94);backdrop-filter:blur(16px);border-top:1px solid var(--line);
  box-shadow:0 -1px 0 rgba(13,21,38,.04),0 -8px 30px rgba(13,21,38,.12);}
.bar a{display:flex;align-items:center;justify-content:center;gap:8px;padding:17px 6px;font-size:15.5px;
  font-weight:700;color:var(--ink);letter-spacing:-.025em;position:relative;transition:filter .2s;}
.bar a+a::before{content:"";position:absolute;left:0;top:22%;bottom:22%;width:1px;background:rgba(13,21,38,.09);}
.bar svg{width:18px;height:18px;flex:none;}
.bar .rsv{background:linear-gradient(180deg,#02A94C,#029A45);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.3);}
.bar .rsv svg{fill:#fff;} .bar .rsv::before{display:none;}
.bar .kko{background:linear-gradient(180deg,#FFEE58,#F6D900);color:#3B1F1F;box-shadow:inset 0 1px 0 rgba(255,255,255,.55);}
.bar .kko svg{fill:#3B1F1F;} .bar .kko::before{display:none;}
.bar .tel svg{fill:var(--brand);}
.bar a:hover{filter:brightness(1.04);}


/* ══════════════════════════════════════════════════════════════
   D · 밝은 낮 — 절제 문법 오버라이드 (2026-08-02)
   위쪽 v2 규칙 중 '대시보드 언어'에 해당하는 것을 여기서 무력화한다.
   ⚠️ 신규 페이지는 아래 규칙만 사용할 것.
   ══════════════════════════════════════════════════════════════ */

/* ── 폐기: 카드형 표면 ── */
.worry div, .steps3 div, .svc a, .posts a, .faq details,
.hours, .addr-card, .sx li, .tel-btn{
  background:none !important; box-shadow:none !important;
  border-radius:0 !important; border:0;
}
.worry div, .steps3 div{padding:0;}
.svc .ghost, .svc .no, .steps3 div::before{display:none !important;} /* 번호 배지 폐기 */
.eyebrow2::before, .hero .eyebrow::before{display:none;}              /* 영문 아이브로우 선 폐기 */

/* ── 대체: 선과 여백으로 구분 ── */
.rule-top{border-top:var(--rule);}
.eyebrow2{font-family:var(--f-serif);font-size:13.5px;font-weight:500;
  letter-spacing:0;color:var(--wood);text-transform:none;gap:0;}

/* ── 사진: 유일하게 그림자를 갖는 요소 ── */
.ph img,.band img,.gal img,.pin-media img,.phero .ph img{
  box-shadow:var(--sh-img);border-radius:var(--r-l);}

/* ── 톤2 '옅게': 그레인 + 컬러 그레이딩 ── */
.grain{position:relative;}
.grain::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:4;
  opacity:.30;mix-blend-mode:overlay;background-image:var(--grain);}
.grade{position:relative;overflow:hidden;}
.grade>img,.grade>video{filter:saturate(.97) contrast(1.04);}
.grade::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  mix-blend-mode:soft-light;opacity:.55;
  background:linear-gradient(155deg,rgba(78,147,180,.8) 0%,rgba(78,147,180,0) 46%,rgba(122,74,50,.62) 100%);}

/* ── 어둠은 히어로 하나뿐 ── */
.hero{background:var(--night-d);}
.hero::after{background:
  radial-gradient(120% 86% at 16% 104%,rgba(18,35,58,.86) 0%,rgba(18,35,58,.22) 56%,transparent 82%),
  linear-gradient(180deg,rgba(26,48,80,.34) 0%,transparent 34%,rgba(18,35,58,.62) 100%);}
/* 광점 — 어둠 위에서만 */
.lamps{position:absolute;inset:0;z-index:3;pointer-events:none;}
.lamps i{position:absolute;width:4px;height:4px;border-radius:50%;background:var(--lamp-w);}
.lamps i:nth-child(1){left:15%;top:26%;
  box-shadow:0 0 11px 4px rgba(231,170,64,.5),0 0 36px 13px rgba(231,170,64,.18);}
.lamps i:nth-child(2){left:79%;top:18%;
  box-shadow:0 0 9px 3px rgba(231,170,64,.4),0 0 30px 11px rgba(231,170,64,.14);}
/* 젖은 반사 */
.mirror{position:relative;height:96px;overflow:hidden;background:var(--bg);}
.mirror video{position:absolute;left:0;right:0;bottom:0;width:100%;height:min(56vh,420px);
  object-fit:cover;transform:scaleY(-1);filter:blur(8px) saturate(.6) brightness(.85);
  -webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.4),transparent 76%);
  mask-image:linear-gradient(180deg,rgba(0,0,0,.4),transparent 76%);}
.mirror::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(250,248,244,.2),var(--bg) 84%);}

/* ── 에디토리얼 목록 (진료과목 · 카드 대체) ── */
.deck{display:grid;grid-template-columns:1.02fr .98fr;min-height:560px;}
@media(max-width:880px){.deck{grid-template-columns:1fr;}}
.deck-media{position:relative;overflow:hidden;background:var(--warm);}
.deck-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transform:scale(1.05);border-radius:0 !important;box-shadow:none !important;
  transition:opacity .85s cubic-bezier(.2,.7,.3,1),transform 1.45s cubic-bezier(.2,.7,.3,1);}
.deck-media img.on{opacity:1;transform:scale(1);}
@media(max-width:880px){.deck-media{height:300px;}}
.deck-list{padding:clamp(44px,5vw,72px) clamp(26px,4.4vw,56px);
  display:flex;flex-direction:column;justify-content:center;}
.row{position:relative;display:grid;grid-template-columns:1fr;width:100%;text-align:left;
  background:none;border:0;border-top:var(--rule);padding:18px 2px 18px 22px;cursor:pointer;
  font:inherit;color:inherit;transition:padding .35s ease;}
.row:last-of-type{border-bottom:var(--rule);}
.row .mark{position:absolute;left:0;top:27px;width:0;height:2px;background:var(--teal);
  border-radius:2px;transition:width .38s cubic-bezier(.2,.7,.3,1);}
.row .rn{font-size:20.5px;font-weight:700;letter-spacing:-.035em;color:var(--ink);transition:color .25s;}
.row .rd{font-size:14px;color:var(--mute);max-height:0;overflow:hidden;opacity:0;
  transition:max-height .42s ease,opacity .3s ease,margin .42s ease;}
.row.on{padding-left:34px;}
.row.on .mark{width:22px;}
.row.on .rn{color:var(--teal);}
.row.on .rd{max-height:60px;opacity:1;margin-top:6px;}
.row:focus-visible{outline:2px solid var(--teal);outline-offset:3px;}

/* ── 섹션 지반 (밝음 3단) ── */
.sec-cool{background:
  radial-gradient(820px 460px at 92% -12%,rgba(41,109,142,.11),transparent 62%),
  radial-gradient(680px 420px at 4% 112%,rgba(122,74,50,.10),transparent 62%),
  linear-gradient(180deg,var(--bg) 0%,var(--cool) 100%);}
.sec-warm{background:
  radial-gradient(700px 380px at 50% 0%,rgba(122,74,50,.12),transparent 64%),
  linear-gradient(180deg,var(--cool) 0%,var(--warm) 100%);}
/* 대기 원근 — 어둠에서 밝음으로 잇는 헤이즈 */
.haze{height:110px;background:linear-gradient(180deg,var(--night) 0%,#4A5C73 44%,#9AA5B4 74%,var(--bg) 100%);}

/* ── 진료 지역 · 연표 (절제 문법 · 카드 없음) ── */
.region{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(28px,4vw,56px);align-items:start;}
@media(max-width:820px){.region{grid-template-columns:1fr;gap:24px;}}
.region .places{font-family:var(--f-head);font-weight:800;letter-spacing:-.04em;
  font-size:clamp(26px,3.6vw,40px);line-height:1.3;color:var(--ink);}
.region .places em{font-style:normal;color:var(--teal);}
.region p{margin:0 0 1.05em;font-size:16.5px;}
.region p:last-child{margin-bottom:0;}

.tl{list-style:none;margin:0;padding:0;}
.tl li{display:grid;grid-template-columns:112px 1fr;gap:0 22px;align-items:baseline;
  padding:20px 0;border-top:var(--rule);}
.tl li:last-child{border-bottom:var(--rule);}
.tl .yr{font-family:var(--f-serif);font-size:16px;color:var(--wood);letter-spacing:0;}
.tl .ev{font-size:16.5px;color:var(--ink-2);}
.tl .ev b{font-weight:700;color:var(--ink);}
@media(max-width:600px){.tl li{grid-template-columns:1fr;gap:4px;padding:16px 0;}}

/* ══════════════════════════════════════════════════════════════
   CTA 정제 (2026-08-02 원장 확정 : Ⅰ 이중선 + Ⅱ 활자조판 + Ⅵ 유리)
   알약(pill) 폐기 — 부트스트랩 기본값이라 성격이 없고, 카드를 걷어낸
   화면에서 혼자 대시보드 언어로 남아 있었다.
   ⚠️ !important 금지 — 위쪽 구 .btn-p/.btn-b 규칙보다 뒤에 오므로
      같은 특정도로도 이긴다. !important를 쓰면 hover 배경까지 막혀
      "글자만 흰색이 되고 배경이 안 깔리는" 사고가 난다. (실제 발생 2026-08-02)
   ══════════════════════════════════════════════════════════════ */
.btn{border-radius:0;padding:0;min-height:0;filter:none;}
.btn:hover{transform:none;}

/* Ⅰ 이중선 프레임 — 공통 골격 */
.btn-p,.btn-b{position:relative;display:inline-flex;align-items:center;justify-content:center;
  gap:9px;min-height:52px;padding:15px 34px;background-color:transparent;background-image:none;box-shadow:none;
  font-size:15px;font-weight:600;letter-spacing:.01em;
  transition:background .42s cubic-bezier(.2,.7,.3,1),color .42s,border-color .42s;}
.btn-p svg,.btn-b svg{fill:currentColor;filter:none;}
.btn-p::before,.btn-b::before{content:"";position:absolute;inset:5px;
  transition:inset .42s cubic-bezier(.2,.7,.3,1),border-color .42s;}

/* 주요 — 네이버 예약 (초록) */
.btn-p{border:1px solid rgba(2,154,69,.55);color:#0A6B33;}
.btn-p::before{border:1px solid rgba(2,154,69,.28);}
.btn-p:hover{background-color:#02A94C;background-image:none;color:#fff;border-color:#02A94C;box-shadow:none;}
.btn-p:hover::before{inset:1px;border-color:rgba(255,255,255,.45);}

/* 부차 — 리뷰 보기·원장 소개 등 (잉크) */
.btn-b{border:1px solid var(--line);color:var(--ink);}
.btn-b::before{border:1px solid rgba(20,26,36,.14);}
.btn-b:hover{background-color:#141A24;background-image:none;color:#fff;border-color:#141A24;box-shadow:none;}
.btn-b:hover::before{inset:1px;border-color:rgba(255,255,255,.4);}

.btn-p:focus-visible,.btn-b:focus-visible{outline:2px solid var(--teal);outline-offset:3px;}

/* Ⅵ 유리 — 히어로 영상 위 전용 (특정도 0,2,0 이라 위 규칙을 이김) */
.hero .btn-p{border-color:rgba(255,255,255,.5);color:#fff;background:rgba(2,169,76,.6);
  backdrop-filter:blur(14px) saturate(1.3);-webkit-backdrop-filter:blur(14px) saturate(1.3);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 8px 26px rgba(10,22,38,.28);}
.hero .btn-p::before{border-color:rgba(255,255,255,.32);}
.hero .btn-p:hover{border-color:rgba(255,255,255,.9);background:rgba(2,169,76,.82);color:#fff;}
.hero .btn-g{min-height:52px;padding:15px 30px;border-radius:0;
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.45);color:#fff;
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45);}
.hero .btn-g:hover{background:rgba(255,255,255,.26);transform:none;}

/* Ⅱ 활자 조판 — 헤더 전화 (라벨 + 번호 2단) */
.tel-btn{flex-direction:column;align-items:flex-start;gap:3px;padding:9px 0 10px;
  background:none;box-shadow:none;border-radius:0;
  border-bottom:1px solid var(--line);position:relative;color:var(--ink);}
.tel-btn svg{display:none;}
.tel-btn::before{content:"TEL";font-size:10px;font-weight:800;letter-spacing:.3em;color:var(--mute);
  transition:letter-spacing .42s cubic-bezier(.2,.7,.3,1);}
.tel-btn::after{content:"";position:absolute;left:0;bottom:-1px;width:0;height:1px;
  background:var(--ink);transition:width .5s cubic-bezier(.2,.7,.3,1);}
.tel-btn:hover{transform:none;box-shadow:none;background:none;}
.tel-btn:hover::before{letter-spacing:.42em;}
.tel-btn:hover::after{width:100%;}

/* 하단 고정바 — 알약 제거, 면으로 */
.bar a{border-radius:0;}
.bar .rsv{background:#02A94C;box-shadow:inset 0 1px 0 rgba(255,255,255,.22);}
.bar .kko{background:#F6D900;box-shadow:inset 0 1px 0 rgba(255,255,255,.5);}

/* ── 진료과목 : 사진 패널 제거, 전폭 활자 목록 (사진 비중 축소) ── */
.deck.textonly{display:block;min-height:0;}
.deck.textonly .deck-media{display:none;}
.deck.textonly .deck-list{padding:0;max-width:var(--read);margin:0 auto;}
.svc-list{list-style:none;margin:0;padding:0;}
.svc-list li{border-top:var(--rule);}
.svc-list li:last-child{border-bottom:var(--rule);}
.svc-list a{display:grid;grid-template-columns:210px 1fr auto;gap:0 28px;align-items:baseline;
  padding:24px 4px;text-decoration:none;color:inherit;position:relative;
  transition:padding .38s cubic-bezier(.2,.7,.3,1);}
.svc-list .nm{font-size:22px;font-weight:700;letter-spacing:-.038em;color:var(--ink);transition:color .28s;}
.svc-list .ds{font-size:15.5px;color:var(--body);}
.svc-list .ar{width:26px;height:1px;background:var(--line);position:relative;align-self:center;
  transition:width .38s cubic-bezier(.2,.7,.3,1),background .28s;}
.svc-list .ar::after{content:"";position:absolute;right:0;top:-3px;width:7px;height:7px;
  border-top:1px solid currentColor;border-right:1px solid currentColor;
  transform:rotate(45deg);color:var(--line);transition:color .28s;}
.svc-list a:hover{padding-left:16px;}
.svc-list a:hover .nm{color:var(--teal);}
.svc-list a:hover .ar{width:42px;background:var(--teal);}
.svc-list a:hover .ar::after{color:var(--teal);}
.svc-list a:focus-visible{outline:2px solid var(--teal);outline-offset:2px;}
@media(max-width:760px){
  .svc-list a{grid-template-columns:1fr auto;gap:6px 16px;padding:20px 4px;}
  .svc-list .ds{grid-column:1;}
  .svc-list .ar{grid-row:1;grid-column:2;}
}

/* 미완성 진료과목 — 링크가 아닌 행 (죽은 링크 방지) */
.svc-list .norow{display:grid;grid-template-columns:210px 1fr;gap:0 28px;align-items:baseline;
  padding:24px 4px;color:inherit;}
.svc-list .norow .nm{color:var(--ink-2);}
.svc-list .norow .ar{display:none;}
@media(max-width:760px){.svc-list .norow{grid-template-columns:1fr;gap:6px;padding:20px 4px;}}