/* =====================================================================
   믿음플란트치과의원 향남점 — Editorial Indigo v2
   영상 인트로 → 책처럼 펼쳐지는 좌/우 2페이지.
   인디고(로고색) + 샴페인 골드 포인트 + 세리프 디스플레이.
   ===================================================================== */

:root{
  --blue:      #13234d;   /* primary (로고 인디고) */
  --blue-600:  #0e1a3a;
  --blue-deep: #0b1530;
  --blue-soft: #e9edf5;
  --blue-tint: #f5f7fb;
  --sky:       #6f86b4;
  --accent:    #13234d;   /* 샴페인 골드 — 아주 절제해서 */
  --accent-soft:#e6dcc4;
  --white:     #ffffff;
  --ink:       #101a30;
  --ink-soft:  #43506b;
  --ink-muted: #8893a8;
  --line:      #e6eaf1;
  --line-2:    #d7dde8;
  --shell:     #0a1224;
  --naver:     #03c75a;
  --kakao:     #fee500;
  --r:         16px;
  --ease:      cubic-bezier(.22,.61,.36,1);
  --ease-out:  cubic-bezier(.16,1,.3,1);
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0; background:var(--shell); color:var(--ink-soft);
  font-family:"Pretendard","Pretendard Variable","Noto Sans KR",system-ui,sans-serif;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; word-break:keep-all;
}
img{ display:block; max-width:100%; }
button{ font-family:inherit; cursor:pointer; }
a{ -webkit-tap-highlight-color:transparent; }
::selection{ background:var(--blue); color:#fff; }

.serif{ font-family:"Noto Serif KR",serif; }

/* 아이브로우 — 골드 틱 + 레터스페이싱 */
.eyebrow{ font-size:12px; font-weight:700; letter-spacing:.3em; text-transform:uppercase; color:var(--blue); }
.eyebrow::before{
  content:""; display:inline-block; vertical-align:middle;
  width:24px; height:1px; background:var(--accent); margin-right:12px; transform:translateY(-1px);
}

/* =====================================================================
   1) 영상 인트로 — 시네마틱 인디고
   ===================================================================== */
#intro{
  position:fixed; inset:0; z-index:60; background:#0a1326; overflow:hidden; cursor:pointer;
  transition:opacity 1.1s var(--ease), visibility 1.1s var(--ease);
}
#intro.is-hidden{ opacity:0; visibility:hidden; }
#intro video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.88; }

.intro-bg{
  position:absolute; inset:-6%;
  background:
    radial-gradient(58% 50% at 74% 24%, rgba(150,150,215,.5), rgba(150,150,215,0) 62%),
    radial-gradient(80% 70% at 14% 92%, rgba(30,55,120,.55), rgba(30,55,120,0) 58%),
    radial-gradient(40% 36% at 50% 60%, rgba(19,35,77,.14), rgba(19,35,77,0) 70%),
    linear-gradient(152deg,#0b1530 0%, #2a2860 46%, #1c3164 100%);
  animation:drift 22s ease-in-out infinite alternate;
}
@keyframes drift{ from{ transform:scale(1.05);} to{ transform:scale(1.13) translate3d(-1.6%,-1.2%,0);} }
.intro-grain{
  position:absolute; inset:0; pointer-events:none; opacity:.5;
  background:radial-gradient(62% 50% at 50% 34%, rgba(255,255,255,.16), rgba(255,255,255,0) 62%);
}
#intro::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(10,9,30,.58), rgba(10,9,30,0) 26%, rgba(10,9,30,0) 54%, rgba(10,9,30,.74));
}

.intro-bar{
  position:absolute; top:0; left:0; right:0; z-index:3;
  display:flex; align-items:center; justify-content:space-between;
  padding:26px clamp(20px,4vw,56px);
}
.intro-kicker{
  position:absolute; left:0; right:0; bottom:clamp(118px,21vh,210px); z-index:3;
  text-align:center; color:rgba(231,229,255,.66);
  font-size:11px; font-weight:700; letter-spacing:.42em; text-transform:uppercase;
}
.intro-kicker::after{
  content:""; display:block; width:1px; height:26px; margin:14px auto 0;
  background:linear-gradient(rgba(19,35,77,.9), rgba(19,35,77,0));
}
.intro-sub{
  position:absolute; left:0; right:0; bottom:clamp(46px,9vh,96px); z-index:3;
  text-align:center; padding:0 24px; color:#fff;
  font-family:"Noto Serif KR",serif; font-weight:700;
  font-size:clamp(23px,3vw,40px); letter-spacing:-.01em; line-height:1.5;
  text-shadow:0 3px 28px rgba(8,6,30,.6);
}
.intro-sub b{ color:#cdd8ef; font-weight:700; }
.enter-hint{
  position:absolute; left:50%; top:50%; z-index:3; transform:translate(-50%,-50%);
  width:108px; height:108px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  color:rgba(255,255,255,.85); font-size:11px; letter-spacing:.34em; text-indent:.34em;
  border:1px solid rgba(255,255,255,.34); backdrop-filter:blur(2px);
  animation:breath 3.2s ease-in-out infinite;
}
.enter-hint .line{ display:none; }
.enter-hint::before{
  content:""; position:absolute; inset:-1px; border-radius:50%;
  border:1px solid rgba(255,255,255,.25); animation:ring 3.2s ease-out infinite;
}
@keyframes breath{ 0%,100%{ transform:translate(-50%,-50%) scale(1);} 50%{ transform:translate(-50%,-50%) scale(1.05);} }
@keyframes ring{ 0%{ transform:scale(1); opacity:.7;} 80%,100%{ transform:scale(1.45); opacity:0;} }

.sound{ position:absolute; right:clamp(20px,4vw,56px); bottom:clamp(28px,6vh,54px); z-index:4; display:flex; gap:8px; }
.sound button{
  display:inline-flex; align-items:center; gap:6px; padding:9px 16px; border-radius:999px;
  background:rgba(16,14,42,.34); border:1px solid rgba(255,255,255,.42); color:#fff;
  font-size:12.5px; letter-spacing:.08em; backdrop-filter:blur(6px); transition:.25s var(--ease);
}
.sound button:hover{ border-color:#fff; }
.sound button.on{ background:#fff; color:var(--blue-deep); border-color:#fff; }
.sound svg{ width:15px; height:15px; }

/* =====================================================================
   2) 책 — 좌/우 두 페이지
   ===================================================================== */
#book{
  position:fixed; inset:0; z-index:10; display:flex;
  opacity:0; visibility:hidden;
  transition:opacity 1s var(--ease) .12s, visibility 1s var(--ease);
}
#book.is-open{ opacity:1; visibility:visible; }
.page{ position:relative; height:100%; overflow:hidden; }

/* ── 좌 : 에디토리얼 신뢰 패널 ───────────────────────────────── */
.page-left{
  flex:1 1 46%;
  background:
    radial-gradient(70% 54% at 86% 4%, rgba(120,150,200,.34), rgba(120,150,200,0) 58%),
    radial-gradient(60% 50% at 0% 100%, rgba(19,35,77,.10), rgba(19,35,77,0) 55%),
    linear-gradient(168deg,#f5f7fb 0%, #e9edf5 56%, #dfdef2 100%);
}
.page-left::before{ /* 미세 노이즈 */
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.03'/%3E%3C/svg%3E");
}
.page-left::after{ /* 접지 그림자 */
  content:""; position:absolute; top:0; right:0; bottom:0; width:64px; pointer-events:none;
  background:linear-gradient(90deg, rgba(11,21,48,0), rgba(11,21,48,.07));
}
.left-num{ /* 고스트 섹션 넘버 */
  position:absolute; top:clamp(8px,2.5vw,30px); right:clamp(16px,3vw,42px); z-index:0;
  font-family:"Noto Serif KR",serif; font-weight:900;
  font-size:clamp(96px,12vw,176px); line-height:1; letter-spacing:-.02em;
  color:rgba(19,35,77,.07); user-select:none;
}
.left-inner{
  position:relative; z-index:1; height:100%;
  display:flex; flex-direction:column; justify-content:center;
  padding:clamp(28px,5vw,76px) clamp(26px,5vw,72px);
}
.left-inner .eyebrow{ margin-bottom:18px; }
.left-title{
  font-family:"Noto Serif KR",serif; font-weight:900;
  font-size:clamp(32px,4vw,56px); line-height:1.26; color:var(--ink);
  letter-spacing:-.015em; white-space:pre-line; margin:0;
}
.left-sub{
  margin:18px 0 0; color:#44506b; font-size:clamp(15px,1.45vw,19px); line-height:1.75;
  max-width:32ch; position:relative; padding-bottom:20px;
}
.left-sub::after{ content:""; position:absolute; left:1px; bottom:0; width:30px; height:1px; background:var(--accent); }
.fig-left{
  margin:clamp(24px,4vw,46px) 0 clamp(20px,3vw,30px);
  aspect-ratio:5/4; width:100%; border-radius:18px; position:relative;
  box-shadow:0 36px 74px -36px rgba(11,21,48,.55);
}
.fig-left::after{ content:""; position:absolute; inset:0; border-radius:inherit; box-shadow:inset 0 0 0 1px rgba(255,255,255,.5); pointer-events:none; }
.fig-left::before{ content:""; position:absolute; inset:-11px; border:1px solid rgba(19,35,77,.16); border-radius:26px; pointer-events:none; }
.left-foot{ display:flex; align-items:center; gap:10px; color:#566480; font-size:13.5px; letter-spacing:.04em; }
.left-foot .dot{ width:7px; height:7px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 4px rgba(19,35,77,.16); }

/* 좌측 콘텐츠 교체 모션 */
.left-inner.swap > *{ animation:rise .6s var(--ease-out) both; }
.left-inner.swap > *:nth-child(1){ animation-delay:.03s; }
.left-inner.swap > *:nth-child(2){ animation-delay:.09s; }
.left-inner.swap > *:nth-child(3){ animation-delay:.15s; }
.left-inner.swap > *:nth-child(4){ animation-delay:.21s; }
.left-inner.swap > *:nth-child(5){ animation-delay:.27s; }
@keyframes rise{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:none; } }

/* ── 우 : 콘텐츠 페이지 ─────────────────────────────────────── */
.page-right{ flex:1 1 54%; background:var(--white); display:flex; flex-direction:column; }
.topbar{
  flex:0 0 auto; display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:16px clamp(20px,3vw,40px);
  border-bottom:1px solid var(--line);
  background:linear-gradient(180deg,#fff, #fdfdff);
}
.rtitle{
  font-size:clamp(16px,1.5vw,19px); color:var(--ink); font-weight:700; letter-spacing:-.01em;
  display:inline-flex; align-items:center; gap:8px;
}
.rtitle .caret{ font-size:8px; color:var(--accent); transform:translateY(1px); }

.rcontent{
  flex:1 1 auto; overflow-y:auto; overflow-x:hidden;
  padding:clamp(26px,3.2vw,48px) clamp(20px,3.6vw,54px) clamp(96px,13vh,128px);
  scroll-behavior:smooth;
}
.rcontent::-webkit-scrollbar{ width:8px; }
.rcontent::-webkit-scrollbar-thumb{ background:#dddcec; border-radius:8px; border:2px solid #fff; }
.rcontent::-webkit-scrollbar-thumb:hover{ background:#c5c4de; }

.view{ display:none; max-width:880px; }
.view.is-active{ display:block; }
.view.is-active > *{ animation:rise .55s var(--ease-out) both; }
.view.is-active > *:nth-child(1){ animation-delay:.02s; }
.view.is-active > *:nth-child(2){ animation-delay:.07s; }
.view.is-active > *:nth-child(3){ animation-delay:.12s; }
.view.is-active > *:nth-child(4){ animation-delay:.17s; }
.view.is-active > *:nth-child(5){ animation-delay:.22s; }
.view.is-active > *:nth-child(6){ animation-delay:.27s; }
.view.is-active > *:nth-child(7){ animation-delay:.32s; }
.view.is-active > *:nth-child(8){ animation-delay:.37s; }

/* 탭 — 좌→우로 자라는 언더라인 */
.tabs{
  display:flex; gap:clamp(16px,2.2vw,30px); padding-bottom:15px; margin-bottom:clamp(22px,3vw,36px);
  border-bottom:1px solid var(--line); overflow-x:auto; scrollbar-width:none;
}
.tabs::-webkit-scrollbar{ display:none; }
.tabs button, .tabs a{
  background:none; border:0; padding:2px 0 7px; white-space:nowrap; text-decoration:none;
  color:var(--ink-muted); font-size:clamp(14px,1.2vw,16px); font-weight:500; letter-spacing:-.01em;
  position:relative; transition:color .25s var(--ease);
}
.tabs button::after{
  content:""; position:absolute; left:0; right:0; bottom:-1px; height:2px; border-radius:2px;
  background:var(--blue); transform:scaleX(0); transform-origin:left; transition:transform .35s var(--ease-out);
}
.tabs button:hover, .tabs a:hover{ color:var(--blue-600); }
.tabs button.active{ color:var(--blue); font-weight:700; }
.tabs button.active::after{ transform:scaleX(1); }

/* 콘텐츠 타이포 */
.fig-r{ width:100%; aspect-ratio:16/10; border-radius:var(--r); margin-bottom:clamp(22px,3vw,34px);
  box-shadow:0 24px 52px -32px rgba(11,21,48,.38), inset 0 0 0 1px rgba(16,26,48,.05); }
.view h2{
  font-family:"Noto Serif KR",serif; font-weight:900;
  font-size:clamp(28px,3.2vw,44px); color:var(--ink); letter-spacing:-.015em;
  margin:0 0 18px; line-height:1.3;
}
.view h3{ font-size:clamp(19px,2vw,25px); color:var(--ink); font-weight:800; margin:0 0 12px; letter-spacing:-.01em; }
.view p{ font-size:clamp(15.5px,1.2vw,18px); line-height:1.95; color:var(--ink-soft); margin:0 0 17px; }
.view .lead{ font-size:clamp(16.5px,1.35vw,19.5px); line-height:1.85; color:#2f3b54; }
.subhead{ margin-top:clamp(30px,4vw,48px); }
.cols2{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(22px,3vw,38px); }
.divider{ height:1px; background:linear-gradient(90deg,var(--line-2),var(--line),transparent); margin:clamp(26px,3.5vw,42px) 0; border:0; }
.pill{
  display:inline-block; padding:6px 14px; border-radius:999px;
  background:var(--blue-soft); color:var(--blue); font-size:12.5px; font-weight:700; letter-spacing:.14em;
}

/* 시그니처 : 디지털 임플란트 4단계 */
.journey{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin:clamp(10px,2vw,20px) 0 8px; }
.step{
  position:relative; background:#fff; border:1px solid var(--line); border-radius:var(--r);
  padding:22px 18px 20px; transition:.35s var(--ease); overflow:hidden;
}
.step::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:linear-gradient(var(--blue),var(--sky)); opacity:0; transition:.35s; }
.step:hover{ transform:translateY(-4px); border-color:var(--line-2); box-shadow:0 22px 40px -26px rgba(11,21,48,.45); }
.step:hover::before{ opacity:1; }
.step .n{ font-size:12px; font-weight:800; letter-spacing:.18em; color:var(--accent); }
.step .st{ margin:11px 0 7px; font-size:17.5px; font-weight:800; color:var(--ink); letter-spacing:-.01em; }
.step .sd{ font-size:14.5px; line-height:1.7; color:var(--ink-soft); }

/* 신뢰 카드 */
.trust{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin:clamp(22px,3vw,32px) 0 6px; }
.tcard{
  display:flex; gap:13px; align-items:flex-start; padding:19px 18px;
  border:1px solid var(--line); border-radius:var(--r); background:#fff; transition:.3s var(--ease);
}
.tcard:hover{ transform:translateY(-3px); box-shadow:0 18px 34px -24px rgba(11,21,48,.4); }
.tcard .ti{
  flex:0 0 auto; width:40px; height:40px; border-radius:12px;
  background:linear-gradient(150deg,var(--blue-soft),#f2f1fa); color:var(--blue);
  display:flex; align-items:center; justify-content:center;
}
.tcard .ti svg{ width:20px; height:20px; }
.tcard b{ display:block; font-size:15.5px; color:var(--ink); font-weight:800; margin-bottom:4px; letter-spacing:-.01em; }
.tcard span{ font-size:14px; color:var(--ink-soft); line-height:1.6; }

/* 의료진 */
.doc + .doc{ margin-top:clamp(34px,4vw,52px); padding-top:clamp(30px,4vw,48px); border-top:1px solid var(--line); }
.doc .meta{ font-size:15px; color:var(--ink-soft); margin:0 0 14px; }
.doc ul{ list-style:none; margin:0; padding:0; }
.doc li{ position:relative; padding-left:18px; font-size:14.5px; color:#4c586f; line-height:2; }
.doc li::before{ content:""; position:absolute; left:0; top:12px; width:6px; height:6px; border-radius:50%; background:var(--accent); }

/* 임상사례 (Before/After) */
.filters{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:22px; }
.chip{
  display:inline-flex; align-items:center; gap:7px; padding:9px 16px;
  border:1px solid var(--line-2); border-radius:999px; background:#fff;
  color:var(--ink-muted); font-size:13.5px; font-weight:500; cursor:pointer; user-select:none; transition:.22s var(--ease);
}
.chip:hover{ border-color:var(--sky); color:var(--blue); }
.chip input{ display:none; }
.chip:has(input:checked){ background:var(--blue); border-color:var(--blue); color:#fff; box-shadow:0 10px 20px -12px rgba(19,35,77,.6); }
.gallery-bar{
  display:flex; align-items:center; justify-content:space-between; padding:13px 2px;
  border-top:1px solid var(--line); border-bottom:1px solid var(--line); margin-bottom:26px;
  color:var(--ink-muted); font-size:13px; letter-spacing:.04em;
}
.cases{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(20px,2.6vw,30px); }
.case{ transition:.3s var(--ease); }
.case:hover{ transform:translateY(-4px); }
.case .ba{ display:grid; grid-template-columns:1fr 1fr; gap:7px; }
.case .ba figure{ position:relative; aspect-ratio:1/1; border-radius:12px; overflow:hidden; margin:0;
  box-shadow:inset 0 0 0 1px rgba(16,26,48,.05); }
.case .ba figure span{
  position:absolute; left:9px; top:9px; font-size:10px; font-weight:800; letter-spacing:.1em;
  padding:4px 9px; border-radius:7px; background:rgba(16,26,48,.6); color:#fff; backdrop-filter:blur(3px);
}
.case .ba figure.before span{ background:rgba(16,26,48,.6); }
.case .ba figure.after span{ background:var(--blue); }
.case .m{ margin-top:13px; font-size:13px; color:var(--accent); font-weight:700; letter-spacing:.06em; }
.case .t{ margin-top:5px; font-size:16px; color:var(--ink); font-weight:600; line-height:1.55; letter-spacing:-.01em; }

/* 진료시간 */
.hours{ list-style:none; margin:0 0 8px; padding:0; }
.hours li{
  display:flex; align-items:baseline; gap:18px; padding:14px 2px;
  border-bottom:1px solid var(--line); font-size:16.5px; color:#3a465f;
}
.hours li b{ flex:0 0 92px; color:var(--ink); font-weight:800; letter-spacing:-.01em; }
.hours .off{ color:var(--blue); font-size:.85em; font-weight:600; }
.callcenter{
  font-family:"Noto Serif KR",serif; font-weight:900;
  font-size:clamp(30px,3.2vw,42px); color:var(--ink); letter-spacing:.01em;
}

/* 버튼 */
.btn{
  display:inline-flex; align-items:center; gap:9px; padding:15px 28px; border-radius:999px;
  font-size:16px; font-weight:700; letter-spacing:-.01em; border:1px solid transparent;
  transition:.28s var(--ease); text-decoration:none;
}
.btn-primary{
  background:linear-gradient(140deg,#1c3164,#0e1a3a); color:#fff;
  box-shadow:0 16px 32px -14px rgba(14,26,58,.75);
}
.btn-primary:hover{ transform:translateY(-2px); box-shadow:0 22px 40px -16px rgba(14,26,58,.8); }
.btn-ghost{ background:#fff; color:var(--ink); border-color:var(--line-2); }
.btn-ghost:hover{ border-color:var(--blue); color:var(--blue); transform:translateY(-2px); }
.btn-naver{ background:var(--naver); color:#fff; box-shadow:0 14px 28px -14px rgba(3,199,90,.7); }
.btn-naver:hover{ transform:translateY(-2px); }
.btn-group{ display:flex; flex-wrap:wrap; gap:12px; margin-top:8px; }

/* 게시판 */
.board{ list-style:none; margin:0; padding:0; border-top:2px solid var(--ink); }
.board li{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:18px 10px 18px 6px; border-bottom:1px solid var(--line); transition:.22s var(--ease);
}
.board li:hover{ background:var(--blue-tint); padding-left:14px; }
.board .bt{ color:var(--ink); font-size:16.5px; font-weight:600; letter-spacing:-.01em; }
.board .bd{ color:var(--ink-muted); font-size:13px; white-space:nowrap; }

/* 전체메뉴 */
.menu-groups{ max-width:640px; counter-reset:mg; }
.mgroup{ counter-increment:mg; }
.mgroup + .mgroup{ margin-top:clamp(26px,3.4vw,42px); }
.mgroup > .h{
  font-family:"Noto Serif KR",serif; font-weight:900;
  font-size:clamp(17px,1.7vw,21px); color:var(--ink); margin-bottom:14px; letter-spacing:-.01em;
}
.mgroup > .h::before{
  content:counter(mg,decimal-leading-zero); margin-right:10px;
  font-family:Pretendard,sans-serif; font-size:.72em; font-weight:800; letter-spacing:.14em; color:var(--accent);
}
.mgroup .links{ display:flex; flex-wrap:wrap; gap:12px 26px; }
.mgroup .links a{
  display:inline-flex; align-items:center; gap:7px; color:var(--ink-soft); font-size:16px;
  text-decoration:none; transition:color .2s var(--ease);
}
.mgroup .links a::after{
  content:"→"; font-size:.85em; color:var(--accent);
  opacity:0; transform:translateX(-5px); transition:.25s var(--ease);
}
.mgroup .links a:hover{ color:var(--ink); }
.mgroup .links a:hover::after{ opacity:1; transform:none; }
.mgroup .links a.active{ color:var(--blue); font-weight:700; }
.menu-foot{ margin-top:clamp(40px,6vw,70px); padding-top:26px; border-top:1px solid var(--line); color:var(--ink-muted); }
.menu-foot .copy{ font-size:12px; letter-spacing:.02em; margin-top:14px; line-height:1.7; }

/* 작은 아이콘 칩 */
.ic{ width:18px; height:18px; border-radius:5px; display:inline-flex; align-items:center; justify-content:center; font-size:10px; font-weight:800; color:#fff; }
.ic.n{ background:var(--naver); } .ic.y{ background:#ff0000; } .ic.k{ background:var(--kakao); color:#3a1d1d; }

/* =====================================================================
   상시 CTA — 데스크톱 FAB / 모바일 액션바
   ===================================================================== */
.fab{ position:fixed; right:28px; bottom:28px; z-index:30; }
.fab .btn-primary{ position:relative; padding:16px 27px; }
.fab .btn-primary::before{
  content:""; position:absolute; inset:-1px; border-radius:inherit;
  border:1px solid rgba(28,49,100,.5); animation:fabring 2.8s ease-out infinite; pointer-events:none;
}
@keyframes fabring{ 0%{ transform:scale(1); opacity:.8;} 75%,100%{ transform:scale(1.22); opacity:0;} }

.actionbar{
  display:none; position:fixed; left:0; right:0; bottom:0; z-index:30;
  background:rgba(255,255,255,.92); backdrop-filter:blur(10px);
  border-top:1px solid var(--line);
  padding:8px 8px calc(8px + env(safe-area-inset-bottom)); gap:8px;
  box-shadow:0 -12px 34px -20px rgba(11,21,48,.5);
}
.actionbar a{
  flex:1; display:flex; flex-direction:column; align-items:center; gap:4px; padding:10px 4px;
  border-radius:13px; text-decoration:none; font-size:12px; font-weight:700; color:var(--ink);
  transition:.2s var(--ease);
}
.actionbar a:active{ transform:scale(.96); }
.actionbar a svg{ width:20px; height:20px; }
.actionbar a.call{ color:var(--blue); background:var(--blue-soft); }
.actionbar a.kakao{ background:var(--kakao); color:#3a1d1d; }
.actionbar a.naver{ background:var(--naver); color:#fff; }

/* =====================================================================
   로고 락업 — 치아 SVG + 믿음플란트치과의원
   ===================================================================== */
.logo{ display:inline-flex; align-items:center; gap:10px; line-height:1; user-select:none; white-space:nowrap; }
.logo-ic{ flex:0 0 auto; width:30px; height:30px; fill:currentColor; filter:drop-shadow(0 2px 6px rgba(16,26,48,.18)); }
.logo-tx{ display:flex; flex-direction:column; gap:3px; }
.logo-sub{ font-style:normal; font-weight:700; font-size:9.5px; letter-spacing:.1em; }
.logo-nm{ font-weight:800; font-size:18px; letter-spacing:-.02em; }
.logo-nm em{ font-style:normal; font-weight:600; font-size:.76em; margin-left:6px; opacity:.85; }
.logo.lg .logo-ic{ width:38px; height:38px; } .logo.lg .logo-nm{ font-size:21px; } .logo.lg .logo-sub{ font-size:10.5px; }
.logo.sm .logo-ic{ width:27px; height:27px; } .logo.sm .logo-nm{ font-size:16.5px; } .logo.sm .logo-sub{ font-size:9px; }
.logo.on-dark{ color:#fff; }
.logo.on-dark .logo-sub{ color:#cdd6e8; }
.logo.on-light{ color:var(--blue); }
.logo.on-light .logo-sub{ color:var(--ink-muted); }

/* 햄버거 */
.burger{ width:34px; height:22px; position:relative; background:none; border:0; padding:0; }
.burger span{ position:absolute; left:0; right:0; height:2px; border-radius:2px; background:currentColor; transition:.32s var(--ease); }
.burger span:nth-child(1){ top:2px; } .burger span:nth-child(2){ top:10px; } .burger span:nth-child(3){ top:18px; }
.burger:hover span:nth-child(1){ top:3px; } .burger:hover span:nth-child(3){ top:17px; }
.burger.on-dark{ color:#fff; } .burger.on-light{ color:var(--ink); }
.burger.is-x span:nth-child(1){ top:10px; transform:rotate(45deg); }
.burger.is-x span:nth-child(2){ opacity:0; }
.burger.is-x span:nth-child(3){ top:10px; transform:rotate(-45deg); }

/* 사진 — 로드 전엔 인디고 톤블록 + 캡션 (의도된 룩) */
.fig{
  position:relative; overflow:hidden; background-size:cover; background-position:center;
  background-image:linear-gradient(140deg,#dcdbef,#c2c1e2 55%,#9d9cc8);
}
.page-right .fig{ background-image:linear-gradient(140deg,#efeef8,#dddcf0 55%,#bdbcde); }
.fig .fig__tag{
  position:absolute; left:0; right:0; bottom:0; padding:13px 16px;
  font-size:12px; letter-spacing:.04em; color:rgba(255,255,255,.95);
  background:linear-gradient(180deg, rgba(20,18,55,0), rgba(20,18,55,.46));
}
.fig.is-photo .fig__tag{ display:none; }

/* =====================================================================
   반응형
   ===================================================================== */
@media (max-width:980px){
  #book{ flex-direction:column; }
  .page-left{ flex:0 0 auto; height:42vh; min-height:300px; }
  .page-left::after{ top:auto; bottom:0; left:0; right:0; width:auto; height:46px;
    background:linear-gradient(180deg, rgba(11,21,48,0), rgba(11,21,48,.09)); }
  .left-num{ font-size:clamp(72px,16vw,110px); top:6px; right:16px; }
  .left-inner{ padding:24px 22px 26px; justify-content:flex-end; }
  .left-title{ font-size:clamp(27px,7.6vw,38px); }
  .left-sub{ padding-bottom:14px; }
  .fig-left{ display:none; }
  .left-foot{ margin-top:16px; }
  .page-right{ flex:1 1 auto; }
  .cols2{ grid-template-columns:1fr; gap:26px; }
  .journey{ grid-template-columns:1fr 1fr; }
  .trust{ grid-template-columns:1fr; }
  .fab{ display:none; }
  .actionbar{ display:flex; }
}
@media (max-width:560px){
  .intro-bar{ padding:16px 18px; }
  .intro-sub{ font-size:clamp(20px,6vw,26px); }
  .enter-hint{ width:92px; height:92px; }
  .page-left{ height:36vh; min-height:235px; }
  .cases{ grid-template-columns:1fr; }
  .journey{ grid-template-columns:1fr; }
  .btn{ width:100%; justify-content:center; }
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.12s !important; }
}
:focus-visible{ outline:2px solid var(--blue); outline-offset:3px; border-radius:4px; }
#intro :focus-visible, .on-dark :focus-visible{ outline-color:#fff; }

/* =====================================================================
   v2.1 — 치과 안내 컴포넌트 (퀵배지 · 안내 3카드 · CTA 밴드 · 워터마크)
   ===================================================================== */
.view{ position:relative; }

/* 퀵배지 — 팩트 기반 진료 특징 */
.quickchips{ list-style:none; display:flex; flex-wrap:wrap; gap:10px; padding:0; margin:2px 0 8px; }
.quickchips li{
  display:inline-flex; align-items:center; gap:9px; padding:11px 17px;
  border:1px solid var(--line); border-radius:999px; background:#fff;
  font-size:14px; font-weight:700; color:var(--ink); letter-spacing:-.01em;
  box-shadow:0 12px 22px -18px rgba(11,21,48,.4); transition:.25s var(--ease);
}
.quickchips li:hover{ transform:translateY(-2px); border-color:var(--line-2); }
.quickchips svg{ width:15px; height:15px; color:var(--accent); }

/* 안내 3카드 (진료시간 · 병원주소 · 진료문의) */
.info3{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin:8px 0 10px; }
.icard{
  background:#fff; border:1px solid var(--line); border-radius:18px; padding:24px 22px 22px;
  box-shadow:0 20px 44px -34px rgba(11,21,48,.45); transition:.3s var(--ease);
  display:flex; flex-direction:column; align-items:flex-start;
}
.icard:hover{ transform:translateY(-3px); box-shadow:0 28px 54px -32px rgba(11,21,48,.5); }
.icard .ti{
  width:42px; height:42px; border-radius:13px; margin-bottom:14px;
  background:linear-gradient(150deg,var(--blue-soft),#f3f2fa); color:var(--blue);
  display:flex; align-items:center; justify-content:center;
}
.icard .ti svg{ width:21px; height:21px; }
.icard > b{ display:block; font-size:16.5px; font-weight:800; color:var(--ink); letter-spacing:-.01em; margin-bottom:12px; }
.icard .hours{ width:100%; }
.hours.mini li{ font-size:14.5px; padding:9px 0; gap:12px; }
.hours.mini li b{ flex:0 0 64px; font-size:14px; }
.icard .addr{ font-size:15px; line-height:1.75; color:var(--ink-soft); margin:0 0 16px; }
.icard .callcenter{ font-size:clamp(23px,2vw,28px); margin-bottom:16px; }
.btn.small{ padding:11px 20px; font-size:14px; }

/* CTA 밴드 — 인디고 그라데이션 상담 배너 */
.cta-band{
  margin-top:clamp(28px,4vw,46px); border-radius:20px;
  padding:clamp(26px,3.6vw,42px);
  display:flex; align-items:center; justify-content:space-between; gap:22px; flex-wrap:wrap;
  color:#fff; position:relative; overflow:hidden;
  background:
    radial-gradient(120% 170% at 96% 0%, rgba(120,150,205,.36), rgba(120,150,205,0) 52%),
    linear-gradient(135deg,#1c3164,#0e1a3a 72%);
  box-shadow:0 30px 60px -32px rgba(14,26,58,.8);
}
.cta-band::after{
  content:""; position:absolute; right:-22px; bottom:-26px; width:190px; height:190px;
  opacity:.08; pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23ffffff' d='M12 8.4c-1.5-2.8-3.9-3.9-6-3.2C3.6 6.1 2.6 8.9 3.6 11.4c.7 1.8 2.1 3 3.6 3.9.9.5 1.6 1 2.1 1.8.4.6.7 1.3.7 2.1 0 .5.4.9.9.9h2.2c.5 0 .9-.4.9-.9 0-.8.3-1.5.7-2.1.5-.8 1.2-1.3 2.1-1.8 1.5-.9 2.9-2.1 3.6-3.9 1-2.5 0-5.3-2.4-6.2-2.1-.7-4.5.4-6 3.2z'/%3E%3C/svg%3E") center/contain no-repeat;
}
.cta-band .eyebrow{ color:var(--accent-soft); }
.cta-band .eyebrow::before{ background:var(--accent); }
.cta-band h3{ font-family:"Noto Serif KR",serif; font-weight:900; font-size:clamp(21px,2.4vw,29px); color:#fff; margin:11px 0 8px; letter-spacing:-.01em; }
.cta-band p{ margin:0; color:#c4cde0; font-size:15px; line-height:1.7; }
.cta-actions{ display:flex; gap:12px; flex-wrap:wrap; position:relative; z-index:1; }
.btn-light{ background:#fff; color:var(--blue-deep); box-shadow:0 16px 30px -16px rgba(0,0,0,.55); }
.btn-light:hover{ transform:translateY(-2px); }

/* STEP 골드 도트 */
.step .n::before{
  content:""; display:inline-block; width:8px; height:8px; border-radius:50%;
  background:var(--accent); box-shadow:0 0 0 4px rgba(19,35,77,.16);
  margin-right:9px; vertical-align:1px;
}

/* 전체메뉴 — 치아 워터마크 */
.view[data-view="menu"]::after{
  content:""; position:absolute; right:-10px; bottom:-6px; width:230px; height:230px;
  pointer-events:none; opacity:.05;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%2313234d' d='M12 8.4c-1.5-2.8-3.9-3.9-6-3.2C3.6 6.1 2.6 8.9 3.6 11.4c.7 1.8 2.1 3 3.6 3.9.9.5 1.6 1 2.1 1.8.4.6.7 1.3.7 2.1 0 .5.4.9.9.9h2.2c.5 0 .9-.4.9-.9 0-.8.3-1.5.7-2.1.5-.8 1.2-1.3 2.1-1.8 1.5-.9 2.9-2.1 3.6-3.9 1-2.5 0-5.3-2.4-6.2-2.1-.7-4.5.4-6 3.2z'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* 커스텀 로고(이미지) 업로드 시 */
.logo.has-img img{ height:42px; width:auto; display:block; }
.logo.has-img .logo-tx{ display:none; }

/* 좌측 패널 — 더 클리닉하게 밝게 */
.page-left{
  background:
    radial-gradient(70% 54% at 86% 4%, rgba(120,150,200,.28), rgba(120,150,200,0) 58%),
    radial-gradient(60% 50% at 0% 100%, rgba(19,35,77,.08), rgba(19,35,77,0) 55%),
    linear-gradient(168deg,#fbfbfe 0%, #f0effa 56%, #e4e3f4 100%);
}

/* 워드프레스 폴백(글 목록 등) */
.site-fallback{ max-width:760px; margin:64px auto; padding:36px 30px; background:#fff; border-radius:18px; }
.site-fallback h1{ font-family:"Noto Serif KR",serif; color:var(--ink); }

@media (max-width:980px){
  .info3{ grid-template-columns:1fr; }
  .cta-band{ flex-direction:column; align-items:flex-start; }
}

/* =====================================================================
   v2.3 — 인트로 = 업로드 히어로 이미지 (PC 가로형 / 모바일 정사각형)
   이미지 자체에 로고·카피·밴드가 포함. 페이퍼 배경이 화면을 가득 채움.
   ===================================================================== */
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

#intro.hero{
  background:#e9e8e6; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
}
.hero-img{ display:block; width:100%; line-height:0; }
.hero-img img{ width:100%; height:auto; display:block; }

#intro.hero .intro-bar{ position:absolute; top:0; left:0; right:0; z-index:5; justify-content:flex-end; padding:22px clamp(18px,3.5vw,40px); }
.hero-enter{
  position:absolute; left:50%; bottom:clamp(26px,6vh,58px); transform:translateX(-50%); z-index:5;
  display:inline-flex; align-items:center; gap:9px; padding:13px 28px; border-radius:999px;
  background:#fff; color:var(--blue); font-size:14px; font-weight:700; letter-spacing:.06em;
  border:1px solid var(--blue); box-shadow:0 14px 30px -14px rgba(19,35,77,.5); transition:.28s var(--ease);
}
.hero-enter em{ font-style:normal; font-size:1.25em; transition:transform .28s var(--ease); }
#intro.hero:hover .hero-enter{ background:var(--blue); color:#fff; }
#intro.hero:hover .hero-enter em{ transform:translateX(3px); }

@media (max-width:760px){
  #intro.hero{ background:#e4e4e4; align-items:flex-end; }
  #intro.hero .intro-bar{ padding:16px 18px; }
}

/* =====================================================================
   v3.0 — 임상사례 : 풀스크린 갤러리 + 상세(컴포넌트형, 책 레이아웃 밖)
   ===================================================================== */
.case-overlay{
  position:fixed; inset:0; z-index:40; background:#fff;
  opacity:0; visibility:hidden; transform:translateY(18px);
  transition:opacity .45s var(--ease), transform .5s var(--ease-out), visibility .45s;
  overflow-y:auto; -webkit-overflow-scrolling:touch;
}
.case-overlay.is-open{ opacity:1; visibility:visible; transform:none; }
#caseDetail{ z-index:50; }

.cg-top{
  position:sticky; top:0; z-index:3; background:rgba(255,255,255,.92); backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:15px clamp(18px,4vw,48px);
}
.cg-back{ display:inline-flex; align-items:center; gap:8px; background:none; border:0; color:var(--ink);
  font-size:15px; font-weight:600; cursor:pointer; padding:6px 4px; transition:color .2s; }
.cg-back:hover{ color:var(--blue); }
.cg-back svg{ width:18px; height:18px; }
.cg-toptitle{ display:inline-flex; align-items:center; gap:9px; font-family:"Noto Serif KR",serif; font-weight:900; color:var(--blue); font-size:clamp(16px,1.7vw,20px); }
.cg-toptitle svg{ width:20px; height:20px; fill:currentColor; }
.cg-spacer{ width:64px; }

.cg-wrap{ max-width:1140px; margin:0 auto; padding:clamp(26px,4vw,52px) clamp(18px,4vw,48px) 96px; }
.cg-intro{ text-align:center; margin-bottom:clamp(26px,4vw,42px); }
.cg-intro .eyebrow{ justify-content:center; }
.cg-intro h2{ font-family:"Noto Serif KR",serif; font-weight:900; color:var(--ink); font-size:clamp(27px,3.6vw,44px); margin:14px 0 10px; letter-spacing:-.015em; }
.cg-intro p{ color:var(--ink-soft); font-size:clamp(15px,1.2vw,17px); }

.cg-filters{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-bottom:clamp(24px,3vw,36px); }
.cg-filters .chip{ background:#fff; border:1px solid var(--line-2); color:var(--ink-muted); font-weight:600; }
.cg-filters .chip:hover{ border-color:var(--sky); color:var(--blue); }
.cg-filters .chip.is-on{ background:var(--blue); border-color:var(--blue); color:#fff; box-shadow:0 10px 20px -12px rgba(19,35,77,.6); }

.cg-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,2vw,26px); }
.ccard{
  text-align:left; background:#fff; border:1px solid var(--line); border-radius:18px; overflow:hidden;
  cursor:pointer; padding:0; display:flex; flex-direction:column; transition:.32s var(--ease); appearance:none;
}
.ccard:hover{ transform:translateY(-5px); box-shadow:0 30px 54px -32px rgba(19,35,77,.45); border-color:var(--line-2); }
.ccard .thumb{ position:relative; aspect-ratio:4/3; background-size:cover; background-position:center;
  background-image:linear-gradient(140deg,#e4e8f1,#c2ccdb 60%,#a9b6cc); }
.ccard .badge{ position:absolute; left:12px; top:12px; background:var(--blue); color:#fff; font-size:11px; font-weight:700;
  letter-spacing:.04em; padding:5px 11px; border-radius:8px; }
.ccard .cc-body{ padding:16px 18px 20px; }
.ccard .cc-meta{ font-size:12.5px; color:var(--accent); font-weight:700; letter-spacing:.04em; }
.ccard .cc-title{ margin-top:6px; font-size:16.5px; color:var(--ink); font-weight:700; line-height:1.45; letter-spacing:-.01em; }
.ccard .cc-more{ margin-top:14px; display:inline-flex; align-items:center; gap:6px; color:var(--blue); font-size:13px; font-weight:700; }
.ccard .cc-more svg{ width:14px; height:14px; transition:transform .25s var(--ease); }
.ccard:hover .cc-more svg{ transform:translateX(3px); }
.cg-empty{ grid-column:1/-1; text-align:center; color:var(--ink-muted); padding:64px 0; }

/* 상세 */
.cd-wrap{ max-width:940px; margin:0 auto; padding:clamp(22px,3vw,44px) clamp(18px,4vw,46px) 110px; }
.cd-cat{ display:inline-block; padding:6px 13px; border-radius:999px; background:var(--blue-soft); color:var(--blue);
  font-size:12.5px; font-weight:700; letter-spacing:.08em; }
.cd-title{ font-family:"Noto Serif KR",serif; font-weight:900; color:var(--ink); font-size:clamp(27px,3.6vw,44px); line-height:1.28; margin:14px 0 20px; letter-spacing:-.015em; }
.cd-meta{ display:flex; flex-wrap:wrap; border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  padding:18px 0; margin-bottom:clamp(26px,3.5vw,40px); }
.cd-meta > div{ flex:1 1 25%; min-width:120px; padding:4px 0; }
.cd-meta dt{ font-size:12px; color:var(--ink-muted); letter-spacing:.06em; margin-bottom:6px; }
.cd-meta dd{ margin:0; font-size:16px; color:var(--ink); font-weight:700; }
.cd-label{ margin:clamp(30px,4vw,42px) 0 18px; }
.cd-body p{ font-size:clamp(15.5px,1.2vw,17.5px); line-height:1.95; color:var(--ink-soft); margin:0 0 16px; }

/* Before / After 비교 슬라이더 */
.ba-compare{ position:relative; aspect-ratio:3/2; border-radius:20px; overflow:hidden; user-select:none; touch-action:none;
  box-shadow:0 28px 56px -32px rgba(19,35,77,.45); background:#dfe4ee; --split:50%; }
.ba-img{ position:absolute; inset:0; width:100%; height:100%; background-size:cover; background-position:center; }
.ba-img.before{ background-image:linear-gradient(140deg,#cfd6e2,#aeb9c9); }
.ba-img.after{ background-image:linear-gradient(140deg,#dfe6f1,#bcc8db); clip-path:inset(0 0 0 var(--split)); }
.ba-tag{ position:absolute; top:14px; font-size:11px; font-weight:800; letter-spacing:.08em; color:#fff; padding:5px 11px; border-radius:8px; z-index:2; }
.ba-tag.b{ left:14px; background:rgba(19,35,77,.62); }
.ba-tag.a{ right:14px; background:var(--blue); }
.ba-handle{ position:absolute; top:0; bottom:0; left:var(--split); width:2px; background:#fff; transform:translateX(-1px); z-index:3; box-shadow:0 0 0 1px rgba(19,35,77,.12); pointer-events:none; }
.ba-handle::after{ content:""; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:44px; height:44px; border-radius:50%; background:#fff; box-shadow:0 8px 20px rgba(19,35,77,.4); }
.ba-handle::before{ content:"⟷"; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); z-index:1; color:var(--blue); font-size:16px; font-weight:800; }
.ba-range{ position:absolute; inset:0; width:100%; height:100%; margin:0; padding:0; opacity:0; cursor:ew-resize; z-index:4; -webkit-appearance:none; appearance:none; background:transparent; }
.ba-range::-webkit-slider-thumb{ -webkit-appearance:none; width:46px; height:100%; }
.ba-range::-moz-range-thumb{ width:46px; height:100%; border:0; background:transparent; }
.ba-note{ margin-top:12px; font-size:12.5px; color:var(--ink-muted); text-align:center; }

.cd-disclaimer{ margin-top:clamp(30px,4vw,44px); padding:18px 20px; background:var(--blue-tint); border:1px solid var(--line);
  border-radius:14px; font-size:13px; color:var(--ink-muted); line-height:1.7; }

@media (max-width:980px){ .cg-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:620px){ .cg-grid{ grid-template-columns:1fr; } .cd-meta > div{ flex-basis:50%; } .cg-spacer{ width:32px; } }

/* v3.1 — 임상사례 갤러리 상단 히어로 + 메뉴 버튼 */
.cg-top .burger{ width:30px; height:20px; }
.cg-top .burger span{ height:2px; }
.cg-top .burger span:nth-child(1){ top:2px; } .cg-top .burger span:nth-child(2){ top:9px; } .cg-top .burger span:nth-child(3){ top:16px; }
.cg-hero{ display:block; width:100%; line-height:0; background:#e9e8e6; }
.cg-hero img{ width:100%; height:auto; display:block; }
@media (max-width:760px){ .cg-hero{ background:#e4e4e4; } }

/* =====================================================================
   v4 — 디테일 폴리시 : 타이포 정밀화 + 로고색 어울리는 치과 클린 배경
   (전부 override. 구조 변경 없음)
   ===================================================================== */

/* ── 타이포그래피 정밀화 ───────────────────────────────────── */
body{ letter-spacing:-.004em; -webkit-font-smoothing:antialiased; }
.serif, .left-title, .view h2, .view h3, .cd-title, .cg-intro h2, .cg-toptitle,
.callcenter, .mgroup > .h{ font-feature-settings:"case" 1,"kern" 1; }
/* 숫자가 들어가는 곳은 표 숫자(자리 정렬) */
.hours, .hours li b, .callcenter, .cd-meta dd, .board .bd, .step .n, .mgroup > .h::before{
  font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1;
}
.left-title{ line-height:1.3; letter-spacing:-.025em; }
.view h2, .cd-title, .cg-intro h2{ line-height:1.32; letter-spacing:-.022em; }
.view h3{ letter-spacing:-.018em; }
.view .lead, .cd-body p, .view p{ letter-spacing:-.006em; }
.view .lead{ color:#2f3b54; }
.eyebrow{ letter-spacing:.34em; font-weight:700; }
.callcenter{ letter-spacing:.01em; }
.logo-nm{ letter-spacing:-.025em; }
.logo-sub{ letter-spacing:.12em; }
.tabs button, .tabs a{ letter-spacing:-.012em; }
.btn{ letter-spacing:-.014em; }
.cc-title, .board .bt{ letter-spacing:-.014em; }

/* 본문 첫 단락 살짝 키워 리듬 */
.view .lead{ font-size:clamp(16.5px,1.4vw,20px); line-height:1.82; }

/* ── 치과 클린 배경 : 로고 네이비와 어울리는 톤 ─────────────── */
:root{ --dot:rgba(19,35,77,.055); }

/* 좌측 패널 : 네이비 글로우 + 정밀 도트 그리드(클리닉 느낌) */
.page-left{
  background:
    radial-gradient(66% 52% at 86% 4%, rgba(120,150,205,.24), rgba(120,150,205,0) 60%),
    radial-gradient(58% 50% at 2% 100%, rgba(19,35,77,.07), rgba(19,35,77,0) 56%),
    radial-gradient(42% 34% at 50% 64%, rgba(19,35,77,.06), rgba(19,35,77,0) 70%),
    linear-gradient(168deg,#f6f8fc 0%, #eaeef6 56%, #dee3ef 100%);
}
.page-left::before{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:1;
  background-image:
    radial-gradient(var(--dot) 1px, transparent 1.5px),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.025'/%3E%3C/svg%3E");
  background-size:23px 23px, 150px 150px;
  -webkit-mask-image:linear-gradient(158deg, #000 26%, rgba(0,0,0,.35) 64%, transparent 88%);
          mask-image:linear-gradient(158deg, #000 26%, rgba(0,0,0,.35) 64%, transparent 88%);
}
/* 고스트 섹션 넘버 — 네이비 틴트로 더 또렷하지만 은은하게 */
.left-num{ color:rgba(19,35,77,.06); font-feature-settings:"tnum" 1; letter-spacing:-.03em; }

/* 우측 페이지 : 순백 대신 미세한 종이 + 상단 네이비 헤어라인 글로우 */
.page-right{
  background:
    radial-gradient(120% 60% at 100% 0%, rgba(19,35,77,.022), rgba(19,35,77,0) 60%),
    linear-gradient(180deg,#ffffff 0%, #fcfdff 100%);
}
.topbar{
  background:linear-gradient(180deg,#ffffff, #fbfcff);
  box-shadow:0 1px 0 rgba(19,35,77,.04);
}
/* 우측 콘텐츠 영역 상단 아주 옅은 도트(좌측과 호응, 가독성 방해 X) */
.rcontent{ position:relative; }
.rcontent::before{
  content:""; position:absolute; top:0; left:0; right:0; height:200px; pointer-events:none; z-index:0; opacity:.6;
  background-image:radial-gradient(rgba(19,35,77,.04) 1px, transparent 1.4px);
  background-size:24px 24px;
  -webkit-mask-image:linear-gradient(180deg, #000, transparent);
          mask-image:linear-gradient(180deg, #000, transparent);
}
.rcontent > .view{ position:relative; z-index:1; }

/* 디바이더 : 중앙 골드 점 포인트 */
.divider{
  position:relative; height:1px; border:0; margin:clamp(28px,3.6vw,44px) 0;
  background:linear-gradient(90deg, transparent, var(--line-2) 18%, var(--line) 50%, var(--line-2) 82%, transparent);
}
.divider::after{
  content:""; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%) rotate(45deg);
  width:5px; height:5px; background:var(--accent); box-shadow:0 0 0 4px #fff;
}

/* 탭 언더라인 끝에 미세 글로우 */
.tabs button.active::after{ box-shadow:0 6px 12px -4px rgba(19,35,77,.5); }

/* 좌측 이미지 액자 : 그림자 톤 정리 */
.fig-left{ box-shadow:0 40px 78px -38px rgba(19,35,77,.5); }
.fig-left::before{ border-color:rgba(19,35,77,.14); }

/* 카드/스텝 호버 그림자 네이비 정합 */
.tcard:hover, .icard:hover, .ccard:hover{ box-shadow:0 26px 50px -30px rgba(19,35,77,.42); }

/* 스크롤바 톤 */
.rcontent::-webkit-scrollbar-thumb{ background:#d9deea; }
.rcontent::-webkit-scrollbar-thumb:hover{ background:#bcc4d6; }

/* 셀렉션/포커스 */
::selection{ background:var(--blue); color:#fff; }

@media (max-width:980px){
  .page-left::before{ -webkit-mask-image:linear-gradient(180deg,#000 40%,transparent 92%); mask-image:linear-gradient(180deg,#000 40%,transparent 92%); }
}

/* =====================================================================
   ░░ DESIGN SYSTEM v5 ░░  STEP 1–10 : 파운데이션 토큰 + 적용
   네이비/골드 스케일 · 모듈러 타이포 · 간격 · 라운드 · 계층 그림자
   ===================================================================== */
:root{
  /* [1] 네이비 스케일 (로고색 = navy-800) */
  --navy-50:#f4f6fb;  --navy-100:#e9edf5; --navy-200:#d7dde8; --navy-300:#b9c2d4;
  --navy-400:#8893a8; --navy-500:#5a6b8e; --navy-600:#33446b; --navy-700:#1c2f5a;
  --navy-800:#13234d; --navy-900:#0b1530;
  /* [2] 골드(샴페인) 스케일 — 절제해서 포인트로만 */
  --gold-100:#e9edf5; --gold-300:#b9c2d4; --gold-500:#13234d; --gold-600:#13234d;
  /* [3] 표면/먹 */
  --ink-1:#101a30; --ink-2:#2f3b54; --ink-3:#43506b; --ink-4:#8893a8;

  /* [4] 모듈러 타이포 스케일 (모바일→데스크톱, ratio≈1.25) */
  --t-xs:clamp(11px,.9vw,12px);
  --t-sm:clamp(12.5px,1vw,13.5px);
  --t-base:clamp(15px,1.15vw,16.5px);
  --t-md:clamp(16.5px,1.4vw,19px);
  --t-lg:clamp(19px,2vw,23px);
  --t-xl:clamp(22px,2.5vw,28px);
  --t-2xl:clamp(26px,3.2vw,38px);
  --t-3xl:clamp(30px,4vw,50px);
  --t-4xl:clamp(34px,4.8vw,60px);
  --fs-serif:"Noto Serif KR",serif;

  /* [5] 간격 스케일 (8pt 기반 + 보정) */
  --sp-1:6px; --sp-2:10px; --sp-3:14px; --sp-4:20px;
  --sp-5:28px; --sp-6:38px; --sp-7:52px; --sp-8:72px;

  /* [6] 라운드 스케일 */
  --r-sm:10px; --r-md:16px; --r-lg:20px; --r-xl:26px; --r-pill:999px;

  /* [7] 계층 그림자 (네이비 틴트, 멀티 레이어) */
  --sh-1:0 1px 2px rgba(16,26,48,.05), 0 1px 1px rgba(16,26,48,.03);
  --sh-2:0 4px 10px -4px rgba(16,26,48,.10), 0 2px 5px -3px rgba(16,26,48,.07);
  --sh-3:0 16px 34px -18px rgba(16,26,48,.24), 0 6px 14px -8px rgba(16,26,48,.10);
  --sh-4:0 30px 62px -26px rgba(16,26,48,.30), 0 12px 26px -14px rgba(16,26,48,.14);
  --sh-pop:0 44px 84px -30px rgba(11,21,48,.42);
  --sh-gold:0 12px 26px -14px rgba(19,35,77,.5);

  /* [8] 모션 */
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-spring:cubic-bezier(.34,1.32,.5,1);

  /* [9] 폰트 피처 (커닝/합자/문맥) */
  --ff:"kern" 1,"calt" 1,"liga" 1;
}

/* [10] 적용 — 폰트 피처·타이포 스케일·계층 그림자 일괄 */
body{ font-feature-settings:var(--ff); }
.left-title{ font-size:var(--t-3xl); }
.view h2, .cd-title, .cg-intro h2{ font-size:var(--t-2xl); }
.view h3{ font-size:var(--t-lg); }
.view p{ font-size:var(--t-base); }
.view .lead{ font-size:var(--t-md); }

/* 카드/스텝/오버레이 그림자 토큰화 */
.tcard{ box-shadow:var(--sh-1); }
.tcard:hover{ box-shadow:var(--sh-3); }
.icard{ box-shadow:var(--sh-2); }
.icard:hover{ box-shadow:var(--sh-4); }
.ccard{ box-shadow:var(--sh-1); }
.ccard:hover{ box-shadow:var(--sh-4); }
.step:hover{ box-shadow:var(--sh-3); }
.fig-left{ box-shadow:var(--sh-pop); }
.cta-band{ box-shadow:var(--sh-4); }
.ba-compare{ box-shadow:var(--sh-4); }
.btn-primary{ box-shadow:var(--sh-3); }
.btn-primary:hover{ box-shadow:var(--sh-4); }
.btn-light{ box-shadow:var(--sh-2); }
.cg-top{ box-shadow:0 1px 0 rgba(16,26,48,.05); }

/* 라운드 토큰 정합 */
.tcard,.icard,.step{ border-radius:var(--r-md); }
.ccard,.cta-band{ border-radius:var(--r-lg); }
.fig-left,.ba-compare{ border-radius:var(--r-xl); }

/* =====================================================================
   ░░ STEP 11–20 : 인트로 히어로 폴리시 ░░
   업로드 이미지(로고·카피 포함)는 보존, 가독/깊이/모션만 더함
   ===================================================================== */
#intro.hero{ overflow:hidden; }

/* [11] 진입 모션 — 이미지가 살짝 확대→정착 + 페이드 */
.hero-img{ animation:heroSettle 1.5s var(--ease-out) both; will-change:transform,opacity; }
@keyframes heroSettle{ from{ opacity:0; transform:scale(1.045); } to{ opacity:1; transform:none; } }

/* [12] 상단 스크림 — 햄버거 가독(아주 옅게, 이미지 페이퍼와 동색) */
#intro.hero::before{
  content:""; position:absolute; top:0; left:0; right:0; height:128px; z-index:3; pointer-events:none;
  background:linear-gradient(180deg, rgba(244,246,250,.9), rgba(244,246,250,0));
}
@media (max-width:760px){ #intro.hero::before{ background:linear-gradient(180deg, rgba(228,228,228,.9), rgba(228,228,228,0)); } }

/* [13] 페이퍼 에지 비네팅 — 풀블리드가 의도된 느낌(영상용 어두운 ::after 덮어씀) */
#intro.hero::after{
  content:""; position:absolute; inset:0; z-index:2; pointer-events:none; background:none;
  box-shadow:inset 0 0 130px rgba(19,35,77,.06);
}

/* [14] 햄버거 — 라인 정밀 + hover */
#intro.hero .burger span{ transition:transform .32s var(--ease), opacity .2s; }
#intro.hero .burger:hover{ opacity:.72; }

/* [15] 엔터 필 — 부드러운 플로트 + 화살표 슬라이드 + 골드 링 펄스 */
.hero-enter{ animation:enterFloat 2.8s var(--ease) infinite; box-shadow:var(--sh-2); }
@keyframes enterFloat{ 0%,100%{ transform:translateX(-50%) translateY(0);} 50%{ transform:translateX(-50%) translateY(-5px);} }
.hero-enter::before{
  content:""; position:absolute; inset:-1px; border-radius:inherit; border:1px solid rgba(19,35,77,.35);
  animation:enterRing 2.8s var(--ease-out) infinite; pointer-events:none;
}
@keyframes enterRing{ 0%{ transform:scale(1); opacity:.6;} 70%,100%{ transform:scale(1.16); opacity:0;} }
#intro.hero:hover .hero-enter{ animation-play-state:paused; background:var(--blue); color:#fff; border-color:var(--blue); box-shadow:var(--sh-gold); }
#intro.hero:hover .hero-enter::before{ animation-play-state:paused; opacity:0; }

/* [16] 진입 시 엔터/햄버거는 약간 늦게 페이드인 */
#intro.hero .intro-bar,
.hero-enter{ animation-delay:.0s; }
#intro.hero .intro-bar{ animation:fadeDown .9s var(--ease-out) .5s both; }
@keyframes fadeDown{ from{ opacity:0; transform:translateY(-8px);} to{ opacity:1; transform:none;} }

/* [17] 포커스(어두운 이미지 위에서도 보이게) */
#intro.hero :focus-visible{ outline:2px solid var(--blue); outline-offset:3px; }

/* [18] 모션 줄이기 설정 시 진입/플로트 정지 */
@media (prefers-reduced-motion:reduce){
  .hero-img,.hero-enter,#intro.hero .intro-bar{ animation:none !important; }
  .hero-enter::before{ display:none; }
}

/* =====================================================================
   ░░ STEP 21–30 : 책 좌측 패널 (에디토리얼) ░░
   ===================================================================== */
/* [21] 좌측 내부 — 골드 세로 스파인(에디토리얼 축) */
.left-inner{ position:relative; }
.left-inner::before{
  content:""; position:absolute; left:clamp(20px,3.4vw,46px); top:clamp(28px,5vw,76px); bottom:clamp(28px,5vw,76px);
  width:1px; background:linear-gradient(180deg, transparent, rgba(19,35,77,.45) 12%, rgba(19,35,77,.12) 86%, transparent);
  opacity:.9;
}
.left-inner > *{ padding-left:clamp(18px,2.4vw,30px); }
@media (max-width:980px){ .left-inner::before{ display:none; } .left-inner > *{ padding-left:0; } }

/* [22] 타이틀 — 줄바꿈 밸런스 + 정밀 자간 */
.left-title{ text-wrap:balance; letter-spacing:-.028em; }
.left-sub{ text-wrap:pretty; }

/* [23] 고스트 섹션 넘버 — 정밀 배치 + 표 숫자 + 하단 헤어라인 */
.left-num{
  font-variant-numeric:tabular-nums; letter-spacing:-.04em;
  color:transparent; background:linear-gradient(180deg, rgba(19,35,77,.10), rgba(19,35,77,.03));
  -webkit-background-clip:text; background-clip:text;
}

/* [24] eyebrow 골드 틱 — 길이/정렬 정밀 */
.left-inner .eyebrow::before{ width:28px; }

/* [25] 액자 — 모서리 캡션 칩(브랜드 각인) */
.fig-left{ isolation:isolate; }
.fig-left .fig__tag{
  left:14px; right:auto; bottom:14px; width:auto; display:inline-flex; align-items:center; gap:7px;
  padding:7px 13px; border-radius:var(--r-pill); background:rgba(11,21,48,.62); backdrop-filter:blur(4px);
  font-size:11px; letter-spacing:.06em; color:#fff;
}
.fig-left .fig__tag::before{
  content:""; width:6px; height:6px; border-radius:50%; background:var(--gold-500); box-shadow:0 0 0 3px rgba(19,35,77,.25);
}

/* [26] 좌측 교체 모션 — 스프링감 + 타이밍 정리 */
.left-inner.swap > *{ animation:riseSpring .62s var(--ease-out) both; }
@keyframes riseSpring{ 0%{ opacity:0; transform:translateY(16px);} 60%{ opacity:1;} 100%{ transform:none;} }

/* [27] 푸터 — 골드 도트 글로우 + 자간 */
.left-foot{ letter-spacing:.02em; color:#566480; }
.left-foot .dot{ background:var(--gold-500); box-shadow:0 0 0 4px rgba(19,35,77,.16); }

/* [28] 액자 외곽 라인 — 네이비 톤 */
.fig-left::before{ border-color:rgba(19,35,77,.16); }
.fig-left::after{ box-shadow:inset 0 0 0 1px rgba(255,255,255,.55); }

/* =====================================================================
   ░░ STEP 31–40 : 책 우측 본문 ░░
   ===================================================================== */
/* [31] 우측 타이틀 캐럿 골드 */
.rtitle .caret{ color:var(--gold-500); }
/* [32] 줄바꿈 밸런스 */
.view h2, .cd-title, .cg-intro h2{ text-wrap:balance; }
.view p, .view .lead, .cd-body p{ text-wrap:pretty; }
/* [33] 탭 활성 언더라인 — 골드 시작 그라데이션 */
.tabs button.active::after{ background:linear-gradient(90deg,var(--gold-500), var(--blue) 32%); }
/* [34] 디지털 4단계 — 연결 점선(타임라인) */
.journey{ position:relative; }
@media (min-width:721px){
  .journey::before{ content:""; position:absolute; top:35px; left:12%; right:12%; height:1px; z-index:0;
    background:repeating-linear-gradient(90deg, rgba(19,35,77,.16) 0 6px, transparent 6px 12px); }
  .journey .step{ position:relative; z-index:1; }
}
.step .n{ display:inline-flex; align-items:center; color:var(--gold-600); }
/* [35] 신뢰카드 — 호버 시 아이콘 골드 */
.tcard:hover .ti{ background:linear-gradient(150deg,#ffffff,#f4f1ea); color:var(--gold-600); }
/* [36] 진료안내 카드 — 상단 네이비→골드 라인 호버 */
.icard{ position:relative; overflow:hidden; }
.icard::before{ content:""; position:absolute; left:0; right:0; top:0; height:3px; transform:scaleX(0); transform-origin:left;
  background:linear-gradient(90deg,var(--blue),var(--gold-500)); transition:transform .42s var(--ease-out); }
.icard:hover::before{ transform:scaleX(1); }
/* [37] 진료시간 — 야간 배지 */
.hours .off{ color:var(--blue); background:var(--blue-soft); padding:2px 9px; border-radius:6px; font-size:.78em; font-weight:700; letter-spacing:.02em; }
/* [38] 콜센터 번호 — 정밀 자간(표 숫자는 이미 적용) */
.callcenter{ letter-spacing:.012em; }
/* [39] 버튼 — 그라데이션/호버 정밀 */
.btn-primary{ background:linear-gradient(140deg,#23386e,#13234d 72%); }
.btn-primary:hover{ background:linear-gradient(140deg,#2a4180,#16264f 72%); }
.btn-ghost:hover{ background:var(--blue-tint); }
/* [40] 게시판 — 호버 골드 인디케이터 */
.board li{ position:relative; }
.board li::before{ content:""; position:absolute; left:0; top:50%; transform:translateY(-50%); width:0; height:58%;
  background:var(--gold-500); border-radius:2px; transition:width .25s var(--ease); }
.board li:hover::before{ width:3px; }
.board li:hover{ padding-left:18px; }
/* 전체메뉴 — 그룹 번호 골드 */
.mgroup > .h::before{ color:var(--gold-500); }
.mgroup .links a::after{ color:var(--gold-500); }

/* =====================================================================
   ░░ STEP 41–50 : 임상사례 컴포넌트 + 마감 ░░
   ===================================================================== */
/* [41] 갤러리 인트로 — 타이틀 밸런스 + 골드 틱 중앙 */
.cg-intro h2{ text-wrap:balance; }
.cg-intro .eyebrow::before{ width:24px; }
/* [42] 필터칩 — 정밀 패딩/그림자 */
.cg-filters .chip{ box-shadow:var(--sh-1); }
.cg-filters .chip.is-on{ box-shadow:var(--sh-gold); }
/* [43] 케이스 카드 — 썸네일 줌, 뱃지 정밀, 메타 골드 */
.ccard .thumb{ overflow:hidden; }
.ccard .thumb::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(11,21,48,0) 60%, rgba(11,21,48,.16)); }
.ccard .badge{ box-shadow:0 6px 14px -6px rgba(11,21,48,.5); letter-spacing:.05em; border-radius:var(--r-sm); }
.ccard .cc-meta{ color:var(--gold-600); letter-spacing:.05em; }
.ccard{ border-radius:var(--r-lg); }
.ccard:hover{ transform:translateY(-6px); }
/* 썸네일은 카드 호버 시 미세 확대 */
.ccard .thumb{ transition:transform .5s var(--ease-out); }
.ccard:hover .thumb{ transform:scale(1.04); }
/* [44] 상세 — 카테고리 핀/메타/제목 정밀 */
.cd-cat{ box-shadow:var(--sh-1); }
.cd-title{ text-wrap:balance; }
.cd-meta dd{ font-variant-numeric:tabular-nums; }
.cd-meta > div{ position:relative; }
.cd-meta > div + div::before{ content:""; position:absolute; left:-1px; top:6px; bottom:6px; width:1px; background:var(--line); }
@media (max-width:620px){ .cd-meta > div + div::before{ display:none; } }
/* [45] Before/After — 핸들/태그 정밀 + 호버 강조 */
.ba-compare{ cursor:ew-resize; }
.ba-handle::after{ box-shadow:0 8px 22px rgba(11,21,48,.45), 0 0 0 1px rgba(19,35,77,.06); }
.ba-tag{ box-shadow:0 4px 10px -4px rgba(11,21,48,.4); }
/* [46] 상단바 타이틀 — 치아 마크 골드 점 */
.cg-toptitle svg{ fill:var(--blue); }
/* [47] 반응형 정밀 — 태블릿/모바일 간격 */
@media (max-width:980px){
  .cg-grid{ gap:18px; }
  .cd-wrap, .cg-wrap{ padding-left:20px; padding-right:20px; }
}
@media (max-width:560px){
  .view h2, .cd-title, .cg-intro h2{ letter-spacing:-.02em; }
  .btn{ padding:14px 22px; }
  .hours li{ font-size:15.5px; }
}
/* [48] 접근성 — 포커스 링 통일, 모션 줄이기 보강 */
:focus-visible{ outline:2px solid var(--blue); outline-offset:3px; border-radius:6px; }
.ccard:focus-visible{ outline-offset:4px; }
@media (prefers-reduced-motion:reduce){
  .ccard:hover, .ccard:hover .thumb, .tcard:hover, .icard:hover, .step:hover{ transform:none; }
}
/* [49] 인쇄 — 오버레이/인트로 숨기고 본문만 깔끔하게 */
@media print{
  #intro, .fab, .actionbar, .case-overlay, .topbar .burger{ display:none !important; }
  #book{ position:static; opacity:1 !important; visibility:visible !important; display:block; }
  .page-left{ background:#fff; } .page-left::before, .left-num{ display:none; }
  *{ box-shadow:none !important; }
}
/* [50] 마감 — 전역 셀렉션/스크롤/안티앨리어싱 일관 */
html{ scroll-behavior:smooth; }
body{ text-rendering:optimizeLegibility; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; }
::selection{ background:var(--blue); color:#fff; }
img{ -webkit-user-drag:none; }

/* =====================================================================
   ░░ LIGHT THEME v6 ░░  STEP 1–25 : 화이트 베이스 재정의
   원칙: 배경=화이트, 네이비=포인트(로고·제목·버튼·탭). 토큰값만 밝게 재활용.
   ===================================================================== */
:root{
  /* [1–6] 그림자 토큰 — 전체적으로 더 얇고 옅게(밝은 느낌) */
  --sh-1:0 1px 2px rgba(16,26,48,.04);
  --sh-2:0 4px 12px -6px rgba(16,26,48,.07), 0 2px 5px -3px rgba(16,26,48,.045);
  --sh-3:0 14px 30px -18px rgba(16,26,48,.12), 0 5px 12px -8px rgba(16,26,48,.06);
  --sh-4:0 26px 52px -28px rgba(16,26,48,.16), 0 10px 22px -14px rgba(16,26,48,.08);
  --sh-pop:0 34px 66px -34px rgba(16,26,48,.20);
  --sh-gold:0 10px 22px -12px rgba(19,35,77,.40);
  /* [7] 도트 농도 다운 */
  --dot:rgba(19,35,77,.035);
  /* [8] 라인 더 옅게(밝은 분위기) */
  --line:#eef1f6; --line-2:#e2e7f0;
}

/* [9–14] 좌측 패널 — 거의 화이트, 끝색도 아주 옅은 네이비 틴트 */
.page-left{
  background:
    radial-gradient(58% 44% at 90% 0%, rgba(120,150,205,.10), rgba(120,150,205,0) 60%),
    radial-gradient(48% 40% at 0% 100%, rgba(19,35,77,.028), rgba(19,35,77,0) 56%),
    linear-gradient(170deg,#ffffff 0%, #fafbfe 56%, #f2f5fb 100%);
}
/* [15] 도트 그리드 — 더 옅고 빨리 페이드 */
.page-left::before{
  background-image:
    radial-gradient(var(--dot) 1px, transparent 1.5px),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.015'/%3E%3C/svg%3E");
  background-size:24px 24px, 150px 150px;
  -webkit-mask-image:linear-gradient(160deg, #000 16%, rgba(0,0,0,.25) 56%, transparent 80%);
          mask-image:linear-gradient(160deg, #000 16%, rgba(0,0,0,.25) 56%, transparent 80%);
}
/* [16] 접지 그림자 — 거의 안 보이게 */
.page-left::after{ background:linear-gradient(90deg, rgba(19,35,77,0), rgba(19,35,77,.035)); }
/* [17] 고스트 섹션 넘버 — 더 옅게 */
.left-num{ background:linear-gradient(180deg, rgba(19,35,77,.055), rgba(19,35,77,.012)); -webkit-background-clip:text; background-clip:text; color:transparent; }

/* [18–20] 우측 페이지 — 순백 유지(상단 네이비 글로우 거의 제거) */
.page-right{
  background:
    radial-gradient(120% 56% at 100% 0%, rgba(19,35,77,.014), rgba(19,35,77,0) 60%),
    #ffffff;
}
.topbar{ background:#ffffff; box-shadow:0 1px 0 rgba(16,26,48,.04); }
.rcontent::before{ opacity:.42; background-image:radial-gradient(rgba(19,35,77,.03) 1px, transparent 1.4px); }

/* [21] 인트로 비네팅 — 아주 옅게 */
#intro.hero::after{ box-shadow:inset 0 0 120px rgba(19,35,77,.035); }

/* [22–25] 카드/스텝 — 화이트 + 옅은 라인 + 가벼운 그림자 */
.tcard,.icard,.ccard,.step{ background:#ffffff; border-color:var(--line); }
.tcard{ box-shadow:var(--sh-1); }
.icard{ box-shadow:var(--sh-2); }
.ccard{ box-shadow:var(--sh-1); }
.tabs,.divider,.board,.doc + .doc,.menu-foot,.cd-meta,.gallery-bar,.hours li,.cg-top{ border-color:var(--line); }

/* =====================================================================
   ░░ LIGHT v6 STEP 26–60 : 컴포넌트 밝기·대비·여백 정밀 ░░
   ===================================================================== */
/* [26] 본문 색 — 너무 진한 먹 대신 살짝 부드럽게(가독 유지) */
.view p{ color:#41506b; }
.view .lead{ color:#33415c; }
/* [27] 제목은 네이비-잉크로 또렷하게(포인트) */
.view h2,.view h3,.left-title,.cd-title,.cg-intro h2{ color:#13223f; }
/* [28] eyebrow/메타 — 네이비 포인트(과하지 않게) */
.eyebrow{ color:var(--blue); }
/* [29] 탭 비활성 — 더 옅은 회색(밝은 분위기) */
.tabs button,.tabs a{ color:#9aa3b5; }
.tabs button.active{ color:var(--blue); }
/* [30] 진료시간 행 — 라인 옅게, 본문 톤 */
.hours li{ color:#41506b; border-color:var(--line); }
.hours li b{ color:#13223f; }
/* [31] 게시판 — 옅은 라인 + 호버 배경 아주 옅게 */
.board{ border-top-color:#13223f; }
.board li:hover{ background:#fafbfe; }
.board .bt{ color:#1c2b46; }
/* [32] 콜센터 — 네이비 포인트 */
.callcenter{ color:#13223f; }
/* [33] 신뢰카드 아이콘 — 옅은 네이비 톤 배경 */
.tcard .ti,.icard .ti{ background:linear-gradient(150deg,#f1f5fb,#e9eef6); color:var(--blue); }
/* [34] 버튼 고스트 — 옅은 라인 */
.btn-ghost{ border-color:var(--line-2); color:#13223f; }
/* [35] 디바이더 — 더 옅게 */
.divider{ background:linear-gradient(90deg, transparent, #eef1f6 18%, #e8ecf3 50%, #eef1f6 82%, transparent); }
/* [36] 좌측 서브 텍스트 */
.left-sub{ color:#46536e; }
.left-foot{ color:#5b6884; }
/* [37] 스텝 카드 본문 */
.step .sd{ color:#46536e; }
.step .st{ color:#13223f; }
/* [38] 임상 카드 — 화이트 + 옅은 라인, 제목 또렷 */
.ccard{ background:#fff; border-color:var(--line); }
.ccard .cc-title{ color:#13223f; }
.ccard .thumb{ background-image:linear-gradient(140deg,#eef1f7,#dde3ee 60%,#cdd5e3); }
/* [39] 갤러리/상세 배경 — 순백 */
.case-overlay{ background:#ffffff; }
.cg-top{ background:rgba(255,255,255,.94); border-color:var(--line); }
/* [40] 갤러리 인트로 텍스트 */
.cg-intro p{ color:#46536e; }
.cd-body p{ color:#41506b; }
.cd-meta dt{ color:#8893a8; }
.cd-meta dd{ color:#13223f; }
/* [41] 진료안내 카드 주소/본문 */
.icard .addr{ color:#41506b; }
/* [42] 전체메뉴 링크 */
.mgroup .links a{ color:#46536e; }
.mgroup .links a:hover{ color:#13223f; }
.mgroup > .h{ color:#13223f; }
/* [43] before/after 톤블록 — 더 밝게 */
.ba-img.before{ background-image:linear-gradient(140deg,#dfe4ee,#c6cedd); }
.ba-img.after{ background-image:linear-gradient(140deg,#eef2f8,#d3dbe8); }
/* [44] CTA 밴드는 유일한 진한 네이비 포인트 — 유지하되 살짝 톤업 */
.cta-band{ background:radial-gradient(120% 170% at 96% 0%, rgba(120,150,205,.30), rgba(120,150,205,0) 52%), linear-gradient(135deg,#1c3164,#13234d 74%); }
/* [45] 본문 영역 상단 도트 — 거의 안 보이게 */
.rcontent::before{ opacity:.32; }
/* [46–50] 여백 리듬 — 섹션 사이 호흡 */
.rcontent{ padding-top:clamp(28px,3.4vw,50px); }
.view h2{ margin-bottom:16px; }
.view .lead{ margin-bottom:18px; }
.subhead{ margin-top:clamp(32px,4.2vw,50px); }
.trust,.journey{ margin-top:clamp(24px,3.2vw,34px); }
/* [51–55] 라인/보더 일괄 옅게(밝은 통일) */
.tcard,.icard,.step,.ccard,.chip,.btn-ghost{ border-color:var(--line); }
.cg-filters .chip{ border-color:var(--line-2); }
.topbar{ border-color:var(--line); }
/* [56–60] 호버 그림자도 가볍게(이미 토큰 밝게) — 추가 미세 보정 */
.cta-band{ box-shadow:var(--sh-3); }
.fig-left{ box-shadow:var(--sh-4); }
.btn-primary{ box-shadow:var(--sh-2); }
.btn-primary:hover{ box-shadow:var(--sh-3); }

/* =====================================================================
   ░░ LIGHT v6 STEP 61–100 : 악센트 절제 · 인터랙션 · 타이포 · QA ░░
   ===================================================================== */
/* [61–66] 골드 악센트 — 화이트 위 텍스트는 진한 골드(대비), 장식선은 옅게 */
.ccard .cc-meta,.step .n{ color:var(--gold-600); }
.mgroup > .h::before{ color:var(--gold-600); }
.eyebrow::before,.left-sub::after,.divider::after{ background:var(--gold-500); }
.left-inner::before{ background:linear-gradient(180deg, transparent, rgba(19,35,77,.4) 12%, rgba(19,35,77,.1) 86%, transparent); }
.fig-left .fig__tag::before,.left-foot .dot{ background:var(--gold-500); }
/* [67–70] 골드 사용처 — CTA/필터 active의 골드 그림자만 포인트 */
.cg-filters .chip.is-on{ box-shadow:var(--sh-gold); }
.hero-enter:hover,#intro.hero:hover .hero-enter{ box-shadow:var(--sh-gold); }

/* [71–78] 인터랙션 상태 — 가볍고 명확하게 */
.btn{ transition:transform .26s var(--ease), box-shadow .26s var(--ease), background .26s var(--ease), color .2s; }
.btn:active{ transform:translateY(0) scale(.99); }
.tcard,.icard,.ccard,.step{ transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s; }
.tabs button::after{ height:2px; }
a,button{ -webkit-tap-highlight-color:transparent; }
.board li{ transition:background .2s var(--ease), padding .25s var(--ease); }
/* 링크 호버 밑줄(메뉴 외 본문 링크 대비) */
.cd-disclaimer a,.view a:not(.btn):not(.tabs *){ text-underline-offset:3px; }

/* [79–86] 타이포 미세 — 숫자 정렬/자간/줄 길이 */
.callcenter,.hours,.cd-meta dd,.board .bd,.step .n,.cc-meta{ font-variant-numeric:tabular-nums; }
.view p,.cd-body p,.left-sub{ max-width:64ch; }
.cg-intro p{ max-width:52ch; margin-left:auto; margin-right:auto; }
.view h2,.cd-title,.left-title,.cg-intro h2{ text-wrap:balance; }
.view p,.view .lead,.cd-body p{ text-wrap:pretty; }
.logo-sub{ letter-spacing:.12em; }
.eyebrow{ letter-spacing:.34em; }

/* [87–92] 스크롤바·셀렉션·포커스 — 밝게 통일 */
.rcontent::-webkit-scrollbar{ width:8px; }
.rcontent::-webkit-scrollbar-thumb{ background:#e0e5ee; border:2px solid #fff; border-radius:8px; }
.rcontent::-webkit-scrollbar-thumb:hover{ background:#cdd4e0; }
.case-overlay::-webkit-scrollbar{ width:10px; }
.case-overlay::-webkit-scrollbar-thumb{ background:#e0e5ee; border:3px solid #fff; border-radius:10px; }
::selection{ background:var(--blue); color:#fff; }
:focus-visible{ outline:2px solid var(--blue); outline-offset:3px; border-radius:6px; }

/* [93–96] 반응형 — 모바일 좌측 패널도 화이트, 간격 정리 */
@media (max-width:980px){
  .page-left{ background:linear-gradient(180deg,#ffffff 0%, #f6f8fc 100%); }
  .page-left::after{ background:linear-gradient(180deg, rgba(19,35,77,0), rgba(19,35,77,.04)); }
}
@media (max-width:560px){
  .rcontent{ padding-left:18px; padding-right:18px; }
  .cg-wrap,.cd-wrap{ padding-left:16px; padding-right:16px; }
  .view h2,.cd-title{ line-height:1.34; }
}

/* [97–100] QA 마감 — 안티앨리어싱·이미지·인쇄·모션 일관 */
html{ scroll-behavior:smooth; background:#fff; }
body{ -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; text-rendering:optimizeLegibility; }
img{ -webkit-user-drag:none; user-select:none; }
@media print{ #intro,.fab,.actionbar,.case-overlay{ display:none !important; } *{ box-shadow:none !important; } .page-left{ background:#fff; } }
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.12s !important; }
}

/* =====================================================================
   ░░ v7 ░░ 실제 로고(이미지) · 심플 산세리프 · 골드 전면 제거
   요청: 업로드 하트치아+워드마크, 메뉴/표시 폰트 심플(1번 이미지처럼), 골드 X
   ===================================================================== */

/* ── [A] 로고 — 이미지 마크 + Pretendard 헤비 워드마크(이미지2 느낌) ── */
.logo{ gap:11px; }
.logo-ic{ display:block; width:34px; height:34px; object-fit:contain; filter:none; }
.logo.lg .logo-ic{ width:44px; height:44px; }
.logo.sm .logo-ic{ width:30px; height:30px; }
.logo-nm{ font-family:"Pretendard","Pretendard Variable",sans-serif; font-weight:900; letter-spacing:-.035em; font-size:19px; }
.logo.lg .logo-nm{ font-size:22px; } .logo.sm .logo-nm{ font-size:17px; }
.logo-nm em{ font-weight:700; font-size:.74em; margin-left:6px; opacity:.78; letter-spacing:-.02em; }
.logo-sub{ font-weight:700; font-size:10px; letter-spacing:.06em; }
.logo.on-light{ color:#13234d; } .logo.on-light .logo-sub{ color:#8893a8; }
.logo.on-dark{ color:#fff; } .logo.on-dark .logo-sub{ color:#cdd6e8; }
.logo.has-img img{ height:42px; width:auto; }
/* 갤러리/상세 상단 타이틀 마크 */
.cg-mark{ width:22px; height:22px; object-fit:contain; }
.cg-toptitle{ font-family:"Pretendard",sans-serif; font-weight:800; letter-spacing:-.02em; }

/* ── [B] 폰트 전면 단순화 : 명조(Noto Serif) → Pretendard 산세리프 ── */
.serif,
.left-title, .left-num,
.view h2, .view h3, .cd-title, .cg-intro h2,
.callcenter, .mgroup > .h, .cg-toptitle{
  font-family:"Pretendard","Pretendard Variable","Noto Sans KR",system-ui,sans-serif !important;
}
/* 제목 굵기/자간 — 심플하고 또렷하게 */
.left-title{ font-weight:800; letter-spacing:-.035em; line-height:1.28; }
.view h2, .cd-title, .cg-intro h2{ font-weight:800; letter-spacing:-.032em; }
.view h3{ font-weight:800; letter-spacing:-.022em; }
.callcenter{ font-weight:800; letter-spacing:-.01em; }
.left-num{ font-weight:900; letter-spacing:-.04em; }
/* 메뉴(전체메뉴) — 1번 이미지처럼 심플 볼드 산세리프 */
.mgroup > .h{ font-weight:800; letter-spacing:-.02em; }
.mgroup > .h::before{ font-weight:700; }
.mgroup .links a{ font-weight:500; }

/* ── [C] 골드 전면 제거 : 모든 골드 → 네이비/뉴트럴 ── */
:root{
  --accent:#13234d; --accent-soft:#e9edf5;
  --gold-100:#e9edf5; --gold-300:#b9c2d4; --gold-500:#13234d; --gold-600:#13234d;
  --sh-gold:0 14px 30px -18px rgba(16,26,48,.16), 0 5px 12px -8px rgba(16,26,48,.08);
}
/* 골드로 칠해지던 장식들 → 네이비 또는 옅은 그레이(과하지 않게) */
.eyebrow{ color:#13234d; }
.eyebrow::before{ background:#13234d; }
.left-sub::after{ background:#13234d; }
.left-inner::before{ background:linear-gradient(180deg, transparent, rgba(19,35,77,.22) 12%, rgba(19,35,77,.06) 86%, transparent); }
.left-foot .dot{ background:#13234d; box-shadow:0 0 0 4px rgba(19,35,77,.12); }
.fig-left .fig__tag::before{ background:#fff; box-shadow:none; }
.divider::after{ background:#c7cdd8; box-shadow:0 0 0 4px #fff; }
.tabs button.active::after{ background:#13234d; }
.step .n{ color:#8893a8; }
.step .n::before{ background:#13234d; box-shadow:0 0 0 4px rgba(19,35,77,.10); }
.tcard:hover .ti{ background:linear-gradient(150deg,#f1f5fb,#e9eef6); color:#13234d; }
.icard::before{ background:#13234d; }
.board li::before{ background:#13234d; }
.ccard .cc-meta{ color:#8893a8; }
.ccard .badge{ background:#13234d; }
.mgroup > .h::before{ color:#8893a8; }
.mgroup .links a::after{ color:#13234d; }
.cd-cat{ background:#e9edf5; color:#13234d; }
.ba-tag.a{ background:#13234d; }
.cg-filters .chip.is-on{ background:#13234d; border-color:#13234d; }
/* 골드 그림자 쓰던 곳 → 일반 그림자 */
.hero-enter:hover, #intro.hero:hover .hero-enter,
.cg-filters .chip.is-on{ box-shadow:var(--sh-gold); }

/* =====================================================================
   ░░ v8 ░░ 고스트 넘버 제거 · 메뉴 1번 이미지 스타일(번호X, 서브 흐릿)
   ===================================================================== */
/* [1] 좌측 고스트 섹션 넘버 — 완전 제거(허접해 보임) */
.left-num{ display:none !important; }

/* [2] 메뉴 그룹 번호(01·02..) 제거 — 1번 이미지엔 번호 없음 */
.mgroup{ counter-reset:none; }
.mgroup > .h::before{ content:none !important; display:none !important; }

/* [3] 메뉴 상위 타이틀 — 진한 볼드(이미지처럼) */
.mgroup > .h{
  font-family:"Pretendard","Pretendard Variable","Apple SD Gothic Neo","Malgun Gothic",sans-serif !important;
  font-weight:800; color:#1b2740; letter-spacing:-.02em; margin-bottom:16px; font-size:clamp(17px,1.7vw,20px);
}

/* [4] 메뉴 서브 링크 — 흐릿한 회색 + 번호/화살표 없이 심플 */
.mgroup .links{ gap:13px 26px; }
.mgroup .links a{
  font-family:"Pretendard","Pretendard Variable","Apple SD Gothic Neo","Malgun Gothic",sans-serif !important;
  color:#b2b8c3; font-weight:500; letter-spacing:-.012em; transition:color .2s var(--ease);
}
.mgroup .links a::after{ content:none !important; display:none !important; }
.mgroup .links a:hover{ color:#13234d; }
.mgroup .links a.active{ color:#13234d; font-weight:700; }
/* 아이콘 링크(N·유튜브 등)는 아이콘 유지, 텍스트만 흐리게 */
.mgroup .links a .ic{ opacity:1; }

/* [5] 메뉴 그룹 간격 — 이미지처럼 넉넉히 */
.mgroup + .mgroup{ margin-top:clamp(28px,3.6vw,40px); }
.menu-groups{ counter-reset:none; }

/* [6] 좌측 패널 — 넘버 사라진 만큼 콘텐츠 수직 중앙 유지(그대로) */

/* =====================================================================
   ░░ v9 ░░ CTA 밴드(네이비 배경) 텍스트 가독 복구 — 흰색 우선순위
   (.view h3 / .view p 가 뒤에서 어둡게 덮어쓰던 문제 해결)
   ===================================================================== */
.cta-band .eyebrow{ color:#cdd8ef !important; }
.cta-band .eyebrow::before{ background:#ffffff; opacity:.5; }
.cta-band h3{ color:#ffffff !important; font-family:"Pretendard","Pretendard Variable",sans-serif !important; font-weight:800; letter-spacing:-.02em; }
.cta-band p{ color:#dce3f2 !important; }
.cta-band .btn-light{ color:#13234d !important; }
.cta-band .btn-naver{ color:#ffffff !important; }
/* 플로팅 예약 버튼 / 모바일 액션바도 확실히 */
.fab .btn-primary{ color:#ffffff !important; }
.actionbar a.naver{ color:#ffffff !important; }
.actionbar a.call{ color:var(--blue) !important; }
.actionbar a.kakao{ color:#3a1d1d !important; }

/* =====================================================================
   ░░ v10 ░░ 임상사례 상세 — 가운데 정렬 디자인
   ===================================================================== */
.cd-wrap{ max-width:880px; text-align:center; }
.cd-cat{ display:inline-block; margin:0 auto; }
.cd-title{ text-align:center; margin-left:auto; margin-right:auto; max-width:18ch; }
/* 메타 — 중앙 정렬 + 구분선 */
.cd-meta{ justify-content:center; gap:0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.cd-meta > div{ flex:0 1 auto; min-width:0; text-align:center; padding:6px clamp(16px,2.4vw,30px); position:relative; }
.cd-meta > div + div::before{ content:""; position:absolute; left:0; top:8px; bottom:8px; width:1px; background:var(--line); }
.cd-meta dt{ justify-content:center; }
/* 라벨(BEFORE→AFTER / CASE NOTE) — 중앙 */
.cd-label{ justify-content:center; }
.cd-label.eyebrow{ display:flex; align-items:center; justify-content:center; text-align:center; }
/* 슬라이더 — 중앙, 폭 제한 */
.ba-compare{ margin:0 auto; max-width:760px; }
.ba-note{ text-align:center; }
/* 본문 — 블록은 중앙, 가독 위해 텍스트는 좌측 정렬, 폭 제한 */
.cd-body{ max-width:680px; margin:8px auto 0; text-align:left; }
.cd-body p{ text-align:left; }
.cd-body h2,.cd-body h3,.cd-body h4{ text-align:center; color:#13223f; margin:26px 0 12px; }
.cd-body img{ border-radius:14px; margin:18px auto; }
.cd-body ul,.cd-body ol{ text-align:left; max-width:620px; margin:0 auto 16px; }
/* 면책 — 중앙 블록, 좌측 텍스트 */
.cd-disclaimer{ max-width:760px; margin-left:auto; margin-right:auto; text-align:left; }
/* 상세 CTA 밴드는 좌-우 행 레이아웃 유지 */
.cd-wrap .cta-band{ text-align:left; }
@media (max-width:620px){
  .cd-meta > div{ flex-basis:50%; padding:8px 6px; }
  .cd-meta > div:nth-child(3)::before,.cd-meta > div + div::before{ display:none; }
}

/* =====================================================================
   ░░ v12 ░░ 폰트·임상사례 최종 정리 (깨짐 수정)
   1) 누락된 serif 선언 → Pretendard (intro-sub / site-fallback)
   2) 가운데 라벨 대칭(BEFORE·AFTER / CASE NOTE / CLINICAL CASES)
   3) 상세 제목 폭·메타 규격 정리
   ===================================================================== */

/* [1] 아직 명조로 깨지던 요소 — 전부 Pretendard 로 */
.intro-sub,
.site-fallback h1{
  font-family:"Pretendard","Pretendard Variable","Noto Sans KR",system-ui,sans-serif !important;
  font-weight:800; letter-spacing:-.02em;
}
:root{ --fs-serif:"Pretendard","Pretendard Variable","Noto Sans KR",system-ui,sans-serif; }

/* [2] 가운데 라벨 — 좌우 대칭 틱 + 자간 보정 (중심 어긋남 수정) */
.cd-label.eyebrow,
.cg-intro .eyebrow{
  display:inline-flex; align-items:center; justify-content:center; gap:12px;
  letter-spacing:.22em; text-indent:0;
}
.cg-intro .eyebrow{ display:flex; }
.cd-label.eyebrow::before,
.cg-intro .eyebrow::before{
  content:""; position:static; width:22px; height:2px; background:var(--blue); flex:0 0 auto;
}
.cd-label.eyebrow::after,
.cg-intro .eyebrow::after{
  content:""; width:22px; height:2px; background:var(--blue); flex:0 0 auto;
}

/* [3] 상세 제목 — 폭 여유(18ch→26ch) + 리듬 */
.cd-title{
  max-width:26ch; font-size:var(--t-2xl); font-weight:800; letter-spacing:-.03em;
  line-height:1.32; margin:16px auto 22px;
}
.cd-cat{ font-size:12px; letter-spacing:.06em; padding:7px 14px; }

/* 메타 4칸 — 규격 통일 */
.cd-meta{ padding:16px 0; }
.cd-meta dt{ font-size:11.5px; letter-spacing:.08em; color:#8893a8; margin-bottom:7px; }
.cd-meta dd{ font-size:15.5px; font-weight:700; color:#13223f; }

/* 갤러리 카드 타이포 통일 */
.ccard .cc-title{ font-size:16px; line-height:1.5; font-weight:700; }
.ccard .cc-meta{ font-size:12px; letter-spacing:.04em; }
.ccard .badge{ font-size:11px; }

/* 상세 CTA 밴드 제목/문구 — 흰색 유지 재확인(카스케이드 최후단) */
.cd-wrap .cta-band h3{ color:#fff !important; }
.cd-wrap .cta-band p{ color:#dce3f2 !important; }

/* =====================================================================
   ░░ v13 ░░ 임상사례 단일 글 페이지 (single-clinical_case.php)
   어두운 폴백으로 떨어지던 문제 해결 — 오버레이 상세와 동일 디자인
   ===================================================================== */
body.single-clinical_case{ background:#fff; }
.case-single{ background:#fff; min-height:100vh; }
.case-single .cg-top{ position:sticky; top:0; z-index:20; }
body.admin-bar .case-single .cg-top{ top:32px; }
@media (max-width:782px){ body.admin-bar .case-single .cg-top{ top:46px; } }
.cg-home{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:64px; padding:6px 4px; color:var(--ink); font-size:15px; font-weight:600;
  text-decoration:none; transition:color .2s;
}
.cg-home:hover{ color:var(--blue); }
.case-single .cd-wrap{ padding-top:clamp(30px,4vw,52px); }
.cta-copy{ flex:1 1 auto; min-width:220px; position:relative; z-index:1; }

/* =====================================================================
   ░░ v14 ░░ 임상사례 단일 글 — 사이트 헤더·푸터 + 본문 제목 강제 중앙
   ===================================================================== */

/* [2] 사이트 헤더 */
.site-head{
  position:sticky; top:0; z-index:30;
  background:rgba(255,255,255,.94); backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
}
body.admin-bar .site-head{ top:32px; }
@media (max-width:782px){ body.admin-bar .site-head{ top:46px; } }
.sh-in{
  max-width:1140px; margin:0 auto; display:flex; align-items:center; gap:22px;
  padding:13px clamp(18px,4vw,40px);
}
.sh-logo{ text-decoration:none; display:inline-flex; }
.sh-nav{ display:flex; gap:22px; margin-left:6px; }
.sh-nav a{ color:#46536e; font-weight:600; font-size:15px; text-decoration:none; transition:color .2s; }
.sh-nav a:hover{ color:var(--blue); }
.sh-act{ margin-left:auto; display:flex; gap:10px; align-items:center; }
.sh-act .btn{ padding:10px 16px; font-size:13.5px; border-radius:12px; }
.sh-act .sh-nv .ic{ width:18px; height:18px; font-size:11px; }
@media (max-width:760px){
  .sh-nav{ display:none; }
  .sh-act .sh-tel{ padding:9px 12px; font-size:12.5px; }
}

/* [3] 브레드크럼 */
.case-crumb{ background:#fff; }
.case-crumb .sh-in{ padding-top:14px; padding-bottom:0; }
.case-crumb a{ color:#8893a8; font-size:13.5px; font-weight:600; text-decoration:none; transition:color .2s; }
.case-crumb a:hover{ color:var(--blue); }

/* [4] 사이트 푸터 */
.site-foot{
  background:#f6f8fc; border-top:1px solid var(--line);
  margin-top:clamp(44px,6vw,76px);
}
.sf-in{
  max-width:1140px; margin:0 auto; padding:clamp(32px,4.5vw,52px) clamp(18px,4vw,40px);
  display:flex; flex-direction:column; align-items:center; gap:9px; text-align:center;
}
.sf-in .logo{ justify-content:center; margin-bottom:4px; }
.sf-addr, .sf-hours{ margin:0; color:#5b6884; font-size:14px; line-height:1.75; }
.sf-addr a{ color:#13223f; font-weight:700; text-decoration:none; }
.sf-links{ margin:2px 0 0; display:flex; gap:10px; align-items:center; }
.sf-links a{ color:var(--blue); font-weight:700; font-size:14px; text-decoration:none; }
.sf-links a:hover{ text-decoration:underline; text-underline-offset:3px; }
.sf-links span{ color:#c7cdd8; }
.sf-copy{ margin:8px 0 0; color:#9aa3b5; font-size:12.5px; }

/* 단일 페이지 상단 여백(헤더 도입으로 조정) */
.case-single .cd-wrap{ padding-top:clamp(18px,2.6vw,32px); }

/* =====================================================================
   ░░ v15 ░░ 임상사례 글 — 본문 완전 중앙 정렬 + 메인식 topbar 헤더
   ===================================================================== */

/* [2] 단일 글 topbar — 메인과 동일 구조 + 우측 액션(전화·네이버·버거) */
.case-topbar{
  position:sticky; top:0; z-index:30; display:flex; align-items:center; justify-content:space-between;
  gap:18px; padding:13px clamp(18px,4vw,40px);
  background:rgba(255,255,255,.94); backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line); box-shadow:0 1px 0 rgba(16,26,48,.04);
}
body.admin-bar .case-topbar{ top:32px; }
@media (max-width:782px){ body.admin-bar .case-topbar{ top:46px; } }
.tb-act{ display:flex; align-items:center; gap:16px; }
.tb-call{ font-size:17px; text-decoration:none; }
.tb-naver{ padding:10px 16px; font-size:13.5px; border-radius:12px; }
.tb-naver .ic{ width:18px; height:18px; font-size:11px; }
a.burger{ display:inline-block; }
.tb-burger{ margin-left:2px; }
@media (max-width:640px){
  .tb-call{ display:none; }
  .tb-naver{ padding:9px 13px; font-size:12.5px; }
}

/* [3] 모바일 액션바와 겹치지 않게 하단 여백 */
@media (max-width:560px){
  .site-foot .sf-in{ padding-bottom:84px; }
  .case-single ~ .fab{ display:none; }
}


/* =====================================================================
   ░░ v17 ░░ 임상사례 본문 — "기존 글 존중" 모드
   · 강제(!important) 정렬/크기/여백 전부 철회 → 에디터에서 잡은
     인라인 스타일(정렬·글자크기·사진 크기·간격)이 그대로 살아남
   · 테마는 기본값만 제공: 폰트 패밀리 통일 + 중앙 기본 + 이미지 안전폭
   ===================================================================== */
.cd-body{
  font-family:"Pretendard","Pretendard Variable","Noto Sans KR",system-ui,sans-serif !important;
  font-size:16.5px; line-height:1.9; letter-spacing:-.006em; color:#41506b;
  text-align:center; /* 기본만 중앙 — 인라인 정렬이 있으면 그게 우선 */
  max-width:820px; margin:8px auto 0;
}
.cd-body p{ margin:0 0 1em; }
.cd-body strong,.cd-body b{ color:#13223f; }
.cd-body a{ color:var(--blue); text-decoration:underline; text-underline-offset:3px; }
.cd-body h1,.cd-body h2,.cd-body h3,.cd-body h4,.cd-body h5{
  font-weight:800; letter-spacing:-.024em; color:#13223f; line-height:1.4; margin:1.6em 0 .6em;
}
.cd-body h2{ font-size:1.5em; } .cd-body h3{ font-size:1.28em; } .cd-body h4{ font-size:1.12em; }
/* 이미지 — 크기는 에디터 설정 존중, 화면만 안 넘게 */
.cd-body img{ max-width:100%; height:auto; border-radius:12px; }
.cd-body .aligncenter{ display:block; margin-left:auto; margin-right:auto; }
.cd-body .alignleft{ float:left; margin:4px 18px 12px 0; }
.cd-body .alignright{ float:right; margin:4px 0 12px 18px; }
.cd-body ul,.cd-body ol{ list-style-position:inside; margin:0 auto 1em; padding:0; }
.cd-body table{ margin:1em auto; border-collapse:collapse; }
.cd-body figure{ margin:1.2em auto; }


/* =====================================================================
   ░░ v20 ░░ 정렬 전용 강제 — 구조(<p>/<br>/빈문단)·간격·크기는 절대 불변
   AET "단락 태그 유지"와 공존: HTML 은 안 건드리고 정렬만 중앙으로
   ===================================================================== */
.cd-body,
.cd-body p, .cd-body div, .cd-body li, .cd-body blockquote,
.cd-body h1, .cd-body h2, .cd-body h3, .cd-body h4, .cd-body h5, .cd-body h6{
  text-align:center !important;
  text-indent:0 !important;
  padding-left:0 !important; padding-right:0 !important;
  margin-left:auto !important; margin-right:auto !important;
}
.cd-body blockquote{ border:0 !important; }
/* 이미지 — width/height·상하 간격 그대로, 좌우 배치만 중앙 */
.cd-body img{
  display:block !important; float:none !important;
  margin-left:auto !important; margin-right:auto !important;
}
.cd-body figure, .cd-body .wp-caption, .cd-body table{
  float:none !important; margin-left:auto !important; margin-right:auto !important;
}
.cd-body ul, .cd-body ol{ list-style-position:inside; }

/* =====================================================================
   ░░ v21 ░░ 수정요청 반영 — 로고 홈복귀 / 병원소개▼ / 게시판 상세 / 둘러보기
   ===================================================================== */

/* [1] 로고 클릭 영역 */
.home-link{ display:inline-flex; text-decoration:none; color:inherit; cursor:pointer; border-radius:10px; }
.home-link:hover{ opacity:.82; }
.home-link:focus-visible{ outline:2px solid var(--blue); outline-offset:4px; }

/* [2] 병원소개 ▼ — 클릭 가능한 버튼 */
button.rtitle{
  appearance:none; background:none; border:0; font:inherit; color:inherit;
  cursor:pointer; padding:6px 10px; border-radius:10px; transition:background .2s var(--ease), color .2s;
}
button.rtitle:hover{ background:var(--blue-tint); color:var(--blue); }
button.rtitle:hover .caret{ transform:translateY(1px); }
button.rtitle .caret{ display:inline-block; transition:transform .25s var(--ease); }

/* [3] 게시판 — 클릭 가능한 항목 */
.board .bitem{
  appearance:none; background:none; border:0; font:inherit; color:inherit; cursor:pointer;
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:15px 0; text-align:left; transition:color .2s var(--ease);
}
.board .bitem:hover .bt{ color:var(--blue); }
.board li{ padding:0 !important; }
.board li:hover{ padding-left:0 !important; }
.board .bitem:hover{ padding-left:16px; }
.board-empty{ color:var(--ink-4); padding:18px 0; }
.board .bitem .bt{ font-weight:600; }
.board .bitem .bd{ flex:0 0 auto; color:var(--ink-4); font-size:13px; }

/* 게시판 상세 */
.nv-wrap{ max-width:760px; }
.nv-date{ margin:0 0 10px; color:var(--ink-4); font-size:13.5px; }
.nv-body{ text-align:left; }
.nv-body p{ text-align:left; margin:0 0 1em; }
.nv-body img{ max-width:100%; height:auto; border-radius:12px; }

/* [4] 둘러보기 — 사진 그리드 */
.tour-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:18px; }
.tour-item{
  appearance:none; padding:0; border:1px solid var(--line); background:#fff; cursor:pointer;
  border-radius:14px; overflow:hidden; position:relative; display:block; line-height:0;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s;
}
.tour-item img{ width:100%; height:100%; aspect-ratio:3/2; object-fit:cover; display:block; }
.tour-item:hover{ transform:translateY(-4px); box-shadow:var(--sh-3); border-color:var(--line-2); }
.tour-cap{
  position:absolute; left:0; right:0; bottom:0; padding:22px 12px 10px;
  background:linear-gradient(180deg, rgba(11,21,48,0), rgba(11,21,48,.62));
  color:#fff; font-size:12.5px; font-weight:600; line-height:1.3; text-align:left;
}
@media (max-width:760px){ .tour-grid{ grid-template-columns:repeat(2,1fr); gap:10px; } }

/* 사진 크게보기 */
.tour-lightbox{
  position:fixed; inset:0; z-index:60; background:rgba(9,14,28,.94);
  display:flex; align-items:center; justify-content:center; padding:60px 20px;
  opacity:0; visibility:hidden; transition:opacity .3s var(--ease), visibility .3s;
}
.tour-lightbox.is-open{ opacity:1; visibility:visible; }
.tour-lightbox img{ max-width:100%; max-height:100%; object-fit:contain; border-radius:8px; }
.tl-close{
  position:absolute; top:18px; right:20px; width:44px; height:44px; border-radius:50%;
  background:rgba(255,255,255,.12); border:0; color:#fff; font-size:18px; cursor:pointer; transition:background .2s;
}
.tl-close:hover{ background:rgba(255,255,255,.24); }
.tl-nav{
  position:absolute; top:50%; transform:translateY(-50%); width:52px; height:52px; border-radius:50%;
  background:rgba(255,255,255,.12); border:0; color:#fff; font-size:30px; line-height:1; cursor:pointer;
  transition:background .2s;
}
.tl-nav:hover{ background:rgba(255,255,255,.24); }
.tl-prev{ left:18px; } .tl-next{ right:18px; }
.tl-cap{ position:absolute; left:0; right:0; bottom:22px; text-align:center; color:#e6ebf5; font-size:13.5px; letter-spacing:.02em; }
@media (max-width:640px){
  .tl-nav{ width:42px; height:42px; font-size:24px; } .tl-prev{ left:8px; } .tl-next{ right:8px; }
  .tour-lightbox{ padding:56px 10px; }
}

/* =====================================================================
   ░░ v22 ░░ 좌측 실사진 액자 — 꽉 차게 + 세련되게
   ===================================================================== */
.fig-left{
  aspect-ratio:4/3;
  border-radius:20px;
  overflow:hidden;
  isolation:isolate;
  box-shadow:0 30px 64px -30px rgba(11,21,48,.42), 0 8px 20px -12px rgba(11,21,48,.18);
  background-color:#e8ecf3;
}
/* 사진은 항상 프레임을 꽉 채움 */
.fig-left, .fig-left.is-photo{ background-size:cover !important; background-position:center !important; background-repeat:no-repeat; }

/* 얇은 내부 테두리(유리 느낌) */
.fig-left::before{
  content:""; position:absolute; inset:0; z-index:2; pointer-events:none; border-radius:inherit;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.30), inset 0 0 0 2px rgba(19,35,77,.06);
}
/* 하단 그라데이션 — 캡션 가독 + 깊이감 */
.fig-left::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:46%; z-index:1; pointer-events:none;
  background:linear-gradient(180deg, rgba(11,21,48,0) 0%, rgba(11,21,48,.10) 42%, rgba(11,21,48,.52) 100%);
  border-radius:inherit;
}
/* 캡션 — 실제 사진 위에도 표시(기존엔 숨김) */
.fig-left.is-photo .fig__tag{ display:inline-flex !important; }
.fig-left .fig__tag{
  z-index:3; left:16px; bottom:16px; right:auto;
  padding:8px 14px; border-radius:var(--r-pill);
  background:rgba(11,21,48,.42); backdrop-filter:blur(8px) saturate(140%);
  box-shadow:0 6px 18px -8px rgba(11,21,48,.5), inset 0 0 0 1px rgba(255,255,255,.18);
  font-size:11.5px; font-weight:600; letter-spacing:.05em; color:#fff;
}
.fig-left .fig__tag::before{
  width:6px; height:6px; border-radius:50%; background:#fff;
  box-shadow:0 0 0 3px rgba(255,255,255,.22);
}
/* 뷰 전환 시 부드러운 등장 (크기는 항상 cover 유지) */
.left-inner.swap .fig-left{ animation:figIn .72s var(--ease-out) both; }
@keyframes figIn{ from{ opacity:0; transform:translateY(10px) scale(.988); } to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion:reduce){ .left-inner.swap .fig-left{ animation:none !important; } }
@media (max-width:980px){ .fig-left{ aspect-ratio:16/10; border-radius:16px; } }

/* =====================================================================
   ░░ v23 ░░ 프롤로그 영상 인트로 — PC/모바일 풀스크린 자동재생
   ===================================================================== */
#intro.hero.has-video{ background:#0b1530; }

/* 영상 — 화면을 꽉 채움(레터박스 없음) */
.hero-video{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover; object-position:center;
  z-index:1; opacity:0; transition:opacity .8s var(--ease);
  background:#0b1530; pointer-events:none;
}
#intro.video-ready .hero-video{ opacity:1; }

/* 영상 준비 전/자동재생 차단 시 → 기존 이미지 히어로가 보임(폴백) */
#intro.has-video .hero-img{ z-index:0; transition:opacity .6s var(--ease); }
#intro.has-video.video-ready .hero-img{ opacity:0; }

/* 아주 옅은 베일 — 상단 버튼 가독 (영상은 그대로 보이게) */
.hero-veil{
  position:absolute; inset:0; z-index:2; pointer-events:none; opacity:0;
  transition:opacity .8s var(--ease);
  background:
    linear-gradient(180deg, rgba(6,12,28,.30) 0%, rgba(6,12,28,0) 22%),
    linear-gradient(0deg,  rgba(6,12,28,.34) 0%, rgba(6,12,28,0) 26%);
}
#intro.video-ready .hero-veil{ opacity:1; }

/* 영상 재생 중엔 상단 스크림/비네팅 제거(이미지용이라 어색) */
#intro.has-video.video-ready::before,
#intro.has-video.video-ready::after{ opacity:0; }

/* 영상 모드에서 버튼 톤 — 흰색 */
#intro.has-video.video-ready .burger span{ background:#fff; }
#intro.has-video.video-ready .hero-enter{
  background:rgba(255,255,255,.14); color:#fff; border-color:rgba(255,255,255,.42);
  backdrop-filter:blur(8px);
}
#intro.has-video.video-ready:hover .hero-enter{ background:#fff; color:var(--blue); border-color:#fff; }
#intro.has-video.video-ready .hero-enter::before{ border-color:rgba(255,255,255,.55); }

/* 건너뛰기 버튼 */
.hero-skip{
  position:absolute; right:clamp(16px,3vw,34px); bottom:clamp(20px,3.4vw,38px); z-index:6;
  appearance:none; cursor:pointer; display:inline-flex; align-items:center; gap:7px;
  padding:10px 18px; border-radius:var(--r-pill);
  background:rgba(11,21,48,.34); border:1px solid rgba(255,255,255,.34); color:#fff;
  font-size:13px; font-weight:600; letter-spacing:-.01em;
  backdrop-filter:blur(8px); opacity:0; transition:opacity .5s var(--ease), background .25s, transform .25s;
}
#intro.video-ready .hero-skip{ opacity:1; }
.hero-skip:hover{ background:rgba(11,21,48,.56); transform:translateY(-1px); }
.hero-skip em{ font-style:normal; transition:transform .25s var(--ease); }
.hero-skip:hover em{ transform:translateX(3px); }

/* 진행 바 */
.hero-progress{
  position:absolute; left:0; right:0; bottom:0; height:3px; z-index:6;
  background:rgba(255,255,255,.16); opacity:0; transition:opacity .5s var(--ease);
}
#intro.video-ready .hero-progress{ opacity:1; }
.hero-progress span{ display:block; height:100%; width:0; background:#fff; transition:width .25s linear; }

/* 종료 → 홈 전환 (자연스러운 페이드/스케일) */
#intro.is-outro{ transition:opacity .6s var(--ease), transform .6s var(--ease-out); opacity:0; transform:scale(1.03); }

/* 자동재생 차단 상태 — 이미지 히어로 유지, 안내 없이 조용히 폴백 */
#intro.needs-tap .hero-video{ opacity:0; }
#intro.needs-tap .hero-img{ opacity:1; }

/* 모바일 — 세로 화면에서도 꽉 차게 */
@media (max-width:760px){
  /* (구 규칙 제거: 영상 잘림 원인) */
  .hero-skip{ padding:9px 15px; font-size:12.5px; }
}
@media (prefers-reduced-motion:reduce){
  .hero-video{ transition:none; }
  #intro.is-outro{ transition:opacity .3s linear; transform:none; }
}

/* =====================================================================
   ░░ v24 ░░ 인트로 영상 — 첫 화면부터 바로 영상 / 둘러보기 버튼 제거
   ===================================================================== */
/* 영상 모드: 이미지 히어로는 '자동재생 차단' 시에만 등장하는 폴백 */
.hero-img.is-fallback{ opacity:0 !important; visibility:hidden; transition:opacity .4s var(--ease); }
#intro.needs-tap .hero-img.is-fallback{ opacity:1 !important; visibility:visible; }

/* 영상은 로드 전에도 자리를 차지 — 검은 화면 대신 브랜드 네이비 */
#intro.hero.has-video{ background:#0b1530; }
#intro.has-video .hero-video{ opacity:1; }          /* video-ready 기다리지 않음 */
#intro.has-video.needs-tap .hero-video{ opacity:0; }

/* 영상 모드에서는 상단 스크림/비네팅 즉시 해제(이미지용) */
#intro.has-video::before, #intro.has-video::after{ opacity:0 !important; }

/* 영상 위 버튼 톤 — video-ready 전부터 흰색 */
#intro.has-video .burger span{ background:#fff; }
#intro.has-video .hero-veil{ opacity:1; }

/* 건너뛰기 / 진행바 — 바로 노출 */
#intro.has-video .hero-skip,
#intro.has-video .hero-progress{ opacity:1; }

/* 둘러보기 버튼은 영상 모드에서 출력하지 않음(자막 겹침 방지) */
#intro.has-video .hero-enter{ display:none !important; }

/* ░░ v25 ░░ 인트로 소리 버튼 */
.hero-sound{
  position:absolute; left:clamp(16px,3vw,34px); bottom:clamp(20px,3.4vw,38px); z-index:6;
  appearance:none; cursor:pointer; display:inline-flex; align-items:center; gap:8px;
  padding:10px 16px; border-radius:var(--r-pill);
  background:rgba(11,21,48,.34); border:1px solid rgba(255,255,255,.34); color:#fff;
  font-size:13px; font-weight:600; letter-spacing:-.01em;
  backdrop-filter:blur(8px); transition:background .25s, transform .25s, opacity .5s var(--ease);
}
#intro.has-video .hero-sound{ opacity:1; }
.hero-sound:hover{ background:rgba(11,21,48,.56); transform:translateY(-1px); }
.hero-sound svg{ width:18px; height:18px; flex:0 0 auto; }
.hero-sound .ic-on{ display:none; }
#intro.sound-on .hero-sound .ic-on{ display:block; }
#intro.sound-on .hero-sound .ic-off{ display:none; }
/* 소리가 꺼진 상태에서는 살짝 강조(주의 환기) */
#intro.has-video:not(.sound-on) .hero-sound{ animation:soundPulse 2.6s var(--ease) infinite; }
@keyframes soundPulse{ 0%,100%{ box-shadow:0 0 0 0 rgba(255,255,255,.28); } 60%{ box-shadow:0 0 0 10px rgba(255,255,255,0); } }
@media (max-width:760px){
  .hero-sound{ padding:9px 13px; font-size:12.5px; gap:6px; }
  .hero-sound .hs-txt{ display:none; }
}
@media (prefers-reduced-motion:reduce){ .hero-sound{ animation:none !important; } }

/* =====================================================================
   ░░ v26 ░░ 모바일 영상 원본비율 · 의료진 · 푸터 사업자정보
   ===================================================================== */

/* [1] 모바일 — 영상을 원본 비율 그대로(자막 잘림 방지) */
@media (max-width:760px){
  #intro.hero.has-video{
    align-items:center; justify-content:center;
    background:#0b1530;
  }
  /* (모바일 영상 규칙은 하단 v29 로 통합) */
  /* 위아래 남는 공간은 브랜드 네이비로 채워 자연스럽게 */
  #intro.has-video .hero-veil{
    background:linear-gradient(180deg, rgba(6,12,28,.34) 0%, rgba(6,12,28,0) 16%);
  }
  /* 컨트롤이 자막을 가리지 않도록 하단에서 살짝 위로 */
  .hero-skip{ bottom:calc(env(safe-area-inset-bottom, 0px) + 16px); }
  .hero-sound{ bottom:calc(env(safe-area-inset-bottom, 0px) + 16px); }
}
/* 아주 좁은 화면(세로형)에서도 영상 전체가 보이게 */


/* [2] 의료진 — 사진 + 정보 */
.doc-lead{ display:flex; gap:clamp(18px,2.6vw,30px); align-items:flex-start; }
.doc-photo{
  flex:0 0 clamp(140px,20vw,200px); border-radius:16px; overflow:hidden;
  box-shadow:var(--sh-3); background:#eef1f7; aspect-ratio:3/4;
}
.doc-photo img{ width:100%; height:100%; object-fit:cover; display:block; }
.doc-info{ flex:1 1 auto; min-width:0; }
.doc-lead h3 em{ font-style:normal; font-weight:700; font-size:.72em; color:var(--ink-3); margin-left:8px; }
.doc-say{
  margin:14px 0 0; padding:12px 16px; border-radius:12px;
  background:var(--blue-tint); color:#2c3a56; font-size:14.5px; line-height:1.7;
}
@media (max-width:620px){
  .doc-lead{ flex-direction:column; }
  .doc-photo{ flex:0 0 auto; width:min(60%,220px); aspect-ratio:1/1; }
}

/* [3] 푸터 사업자 정보 */
.main-foot{ position:relative; z-index:5; }
.sf-biz{
  margin:10px 0 0; display:flex; flex-wrap:wrap; justify-content:center; gap:6px 16px;
  color:#7c8798; font-size:12.5px; line-height:1.7;
}
.sf-biz span{ white-space:nowrap; }
@media (max-width:560px){
  .sf-biz{ gap:4px 12px; font-size:12px; }
  .sf-biz span{ white-space:normal; }
}

/* =====================================================================
   ░░ v27 ░░ 모바일 최적화 — 좁은 스크롤 창 해소 + 컴팩트 하단바
   문제: 모바일에서 좌측 패널이 42vh(min 300px) 고정 → 본문이 좁은 창에서만 스크롤
   해결: 책 레이아웃을 "페이지 전체 스크롤"로 전환, 상단바만 sticky
   ===================================================================== */
@media (max-width:980px){
  /* 책 전체가 문서처럼 자연스럽게 스크롤되도록 */
  #book{
    position:absolute; inset:auto; top:0; left:0; right:0;
    display:block; min-height:100vh; min-height:100dvh;
    overflow:visible;
  }
  body.has-entered{ overflow-y:auto; -webkit-overflow-scrolling:touch; }
  body.has-entered #intro{ display:none; }

  /* 좌측 패널 — 고정 높이 해제, 내용만큼만 차지 */
  .page-left{
    height:auto !important; min-height:0 !important;
    padding:0; flex:none;
  }
  .left-inner{ padding:26px 20px 24px; justify-content:flex-start; }
  .left-title{ font-size:clamp(24px,6.6vw,32px); line-height:1.3; }
  .left-sub{ font-size:15px; padding-bottom:10px; }
  .left-foot{ margin-top:12px; font-size:12px; }

  /* 우측 본문 — 자체 스크롤 해제(페이지 스크롤에 위임) */
  .page-right{ display:block; min-height:0; }
  .rcontent{
    overflow:visible !important; height:auto !important; flex:none;
    padding:20px 20px calc(78px + env(safe-area-inset-bottom, 0px));
  }
  /* 상단바만 화면 상단에 고정 */
  .topbar{
    position:sticky; top:0; z-index:25;
    background:rgba(255,255,255,.95); backdrop-filter:blur(12px);
    padding:11px 18px;
  }
  body.admin-bar .topbar{ top:46px; }

  /* 탭 — 가로 스크롤로 잘리지 않게 */
  .tabs{
    display:flex; gap:18px; overflow-x:auto; scrollbar-width:none;
    -webkit-overflow-scrolling:touch; padding-bottom:2px;
  }
  .tabs::-webkit-scrollbar{ display:none; }
  .tabs button, .tabs a{ flex:0 0 auto; white-space:nowrap; font-size:14px; }

  /* 본문 여백·타이포 정리 */
  .view h2{ font-size:clamp(21px,5.4vw,26px); }
  .view .lead{ font-size:15.5px; line-height:1.78; }
  .view p{ font-size:15px; }
  .subhead{ margin-top:30px; }
  .journey{ grid-template-columns:1fr; gap:10px; }
  .chips{ gap:8px; }
  .chip{ font-size:12.5px; padding:8px 12px; }
}

/* ── 하단 액션바 : 컴팩트하게(화면 방해 최소화) ── */
@media (max-width:980px){
  .actionbar{
    padding:6px 6px calc(6px + env(safe-area-inset-bottom, 0px));
    gap:6px;
    box-shadow:0 -8px 22px -18px rgba(11,21,48,.4);
  }
  .actionbar a{
    padding:8px 6px; border-radius:12px; font-size:11.5px; gap:3px;
    flex-direction:column; line-height:1.25;
  }
  .actionbar a svg{ width:17px; height:17px; }
  /* 스크롤 내릴 때는 살짝 투명해져 콘텐츠를 덜 가림 */
  .actionbar{ transition:transform .3s var(--ease), opacity .3s var(--ease); }
  body.scrolling-down .actionbar{ transform:translateY(76%); opacity:.92; }
}
@media (max-width:400px){
  .actionbar a{ font-size:11px; padding:7px 4px; }
  .actionbar a svg{ width:16px; height:16px; }
}

/* 임상사례 단일 페이지도 동일하게 컴팩트 */
@media (max-width:980px){
  .case-single .cd-wrap{ padding-bottom:calc(84px + env(safe-area-inset-bottom, 0px)); }
  .site-foot .sf-in{ padding-bottom:calc(84px + env(safe-area-inset-bottom, 0px)); }
}

/* ░░ v27-fix ░░ 모바일 페이지 스크롤 활성화 (html,body{height:100%} 해제) */
@media (max-width:980px){
  html, body{ height:auto !important; min-height:100%; }
  body{ overflow-y:auto !important; overflow-x:hidden; }
  /* 인트로(영상) 화면에서는 스크롤 잠금 유지 */
  body:not(.has-entered){ overflow:hidden !important; height:100% !important; }
  body:not(.has-entered) #book{ position:fixed; }
}

/* =====================================================================
   ░░ v28 ░░ 모바일 영상 잘림 완전 해소 + 하단바 아이콘 전용
   ===================================================================== */

/* [1] 영상 — 어떤 화면비에서도 원본 전체가 보이게 (잘림 0) */
@media (max-width:980px){
  /* 영상 배치는 하단 v30 규칙으로 통합 */
  /* 영상 위 베일은 잘림 인상 주지 않게 최소화 */
  #intro.has-video .hero-veil{
    background:linear-gradient(180deg, rgba(6,12,28,.30) 0%, rgba(6,12,28,0) 14%);
  }
}

/* [2] 하단 액션바 — 아이콘만, 아주 작게 */
@media (max-width:980px){
  .actionbar{
    padding:5px 10px calc(5px + env(safe-area-inset-bottom, 0px));
    gap:10px; justify-content:center;
    background:rgba(255,255,255,.90); backdrop-filter:blur(12px);
    box-shadow:0 -6px 18px -16px rgba(11,21,48,.35);
  }
  .actionbar a{
    flex:0 0 auto; width:42px; height:42px; padding:0; gap:0;
    display:inline-flex; align-items:center; justify-content:center;
    border-radius:50%; font-size:0;               /* 글자 숨김 — 아이콘만 */
    line-height:0;
  }
  .actionbar a svg{ width:20px; height:20px; margin:0; }
  /* 스크롤 내릴 때 완전히 숨김 → 콘텐츠 방해 0 */
  body.scrolling-down .actionbar{ transform:translateY(130%); opacity:0; }
  /* 하단 여백도 작아진 바에 맞춰 축소 */
  .rcontent{ padding-bottom:calc(62px + env(safe-area-inset-bottom, 0px)) !important; }
  .case-single .cd-wrap{ padding-bottom:calc(62px + env(safe-area-inset-bottom, 0px)); }
  .site-foot .sf-in{ padding-bottom:calc(62px + env(safe-area-inset-bottom, 0px)); }
}
@media (max-width:400px){
  .actionbar a{ width:38px; height:38px; }
  .actionbar a svg{ width:18px; height:18px; }
}


/* =====================================================================
   ░░ v30 ░░ 인트로 영상 최종 — 절대배치 + contain 단일 규칙
   inset:0 + object-fit:contain 이면 브라우저가 알아서 화면 중앙에
   원본 비율로 맞춰 그림. transform / width:auto 등은 쓰지 않는다.
   ===================================================================== */
#intro.hero.has-video{
  display:block !important;        /* flex 정렬 제거 — 절대배치와 충돌 방지 */
  background:#0b1530;
  padding:0;
}
#intro.hero.has-video .hero-video{
  position:absolute !important;
  top:0 !important; right:0 !important; bottom:0 !important; left:0 !important;
  width:100% !important; height:100% !important;
  max-width:none !important; max-height:none !important;
  transform:none !important;       /* 이전 규칙의 translate 제거 */
  object-fit:cover !important;      /* 화면을 꽉 채움 */
  object-position:center center !important;
  margin:0 !important;
}
/* 인트로 상단/하단 컨트롤은 영상 위에 그대로 */
#intro.hero.has-video .intro-bar{ position:absolute; top:0; left:0; right:0; }

/* =====================================================================
   ░░ v31 ░░ 수정요청 반영 — 남색 틀 제거 · 하트 삭제 · 선 정렬
   ===================================================================== */

/* [S1-1 / S2-3 / S3-2] 사진 위 남색 틀 완전 제거
   원인: .fig-left::after 가 앞 규칙의 inset:0(top:0) 을 물려받은 채
         height:46% 를 적용해 "상단 46% 어두운 띠"가 생김 */
.fig-left::after{ content:none !important; display:none !important; }
/* 액자 테두리도 최소화(유리 테두리만 아주 옅게) */
.fig-left::before{
  content:"" !important; display:block !important;
  position:absolute; inset:0; z-index:2; pointer-events:none; border-radius:inherit;
  border:0 !important;
  box-shadow:inset 0 0 0 1px rgba(19,35,77,.06) !important;
}
/* 캡션 칩은 자체 배경으로 가독 유지 */
.fig-left .fig__tag{ background:rgba(11,21,48,.52); }

/* [S1-5] CTA 배너 하트 워터마크 삭제 */
.cta-band::after{ content:none !important; display:none !important; }
/* [S2-7] 전체메뉴 하트 워터마크 삭제 */
.view[data-view="menu"]::after{ content:none !important; display:none !important; }

/* [S2-2 / S3-1] 선 위치 정렬 — eyebrow 선과 서브 아래 선의 시작점 일치 */
.left-inner .eyebrow{ position:relative; padding-left:0; }
.left-inner .eyebrow::before{ position:static; display:inline-block; vertical-align:middle; margin-right:12px; }
.left-sub{ position:relative; padding-bottom:16px; }
.left-sub::after{ left:0 !important; width:28px !important; }

/* [S1-3] 탭 4개 — 좁은 폭에서도 안 깨지게 */
.tabs button{ white-space:nowrap; }

/* [S2-5] 전체메뉴 임상사례 카테고리 — 줄바꿈 여유 */
.mgroup .links{ flex-wrap:wrap; }

/* ░░ v32 ░░ 임상사례 상세 — 대표이미지 1장 (메타표·전후비교 제거) */
.cd-hero{
  margin:clamp(20px,3vw,30px) auto clamp(6px,1.2vw,12px);
  max-width:760px; border-radius:18px; overflow:hidden;
  box-shadow:var(--sh-3); background:#eef1f7; line-height:0;
}
.cd-hero img{ width:100%; height:auto; display:block; }
/* 제목 아래 여백 정리(메타표가 빠진 만큼) */
.cd-title{ margin-bottom:clamp(10px,1.6vw,16px); }
/* 사업자정보 줄 — 항목이 늘어난 만큼 촘촘하게 */
.sf-biz{ gap:5px 14px; }


/* =====================================================================
   ░░ v34 ░░ 인트로 영상 — 화면 꽉 차게(풀스크린)
   ===================================================================== */
#intro.hero.has-video{
  height:100vh; height:100dvh;
  min-height:100vh; min-height:100dvh;
  overflow:hidden; background:#0b1530;
}
#intro.hero.has-video .hero-video{
  object-fit:cover !important;
  object-position:center center !important;
  width:100% !important; height:100% !important;
}
/* 모바일도 동일하게 꽉 차게 */
@media (max-width:980px){
  #intro.hero.has-video{ height:100vh; height:100dvh; }
  #intro.hero.has-video .hero-video{ object-fit:cover !important; }
}

/* =====================================================================
   ░░ v35 ░░ 인트로 폴백 이미지 레이아웃 수정
   원인: 영상 모드에서 #intro 가 display:block 이라 폴백 이미지가
         본문 흐름대로 상단에 배너처럼 놓이고 아래가 네이비로 비어 보임
   ===================================================================== */
#intro.hero.has-video .hero-img{
  position:absolute !important; inset:0 !important;
  width:100% !important; height:100% !important;
  z-index:0; line-height:0;
}
#intro.hero.has-video .hero-img img{
  width:100% !important; height:100% !important;
  object-fit:cover !important; object-position:center !important;
}
/* 영상이 재생되면 이미지는 숨김 */
#intro.has-video.video-ready .hero-img{ opacity:0; }

/* 영상 로드 실패 시 — 이미지 화면 + 진입 안내 버튼 노출 */
#intro.has-video.video-failed .hero-img{ opacity:1 !important; visibility:visible !important; }
#intro.has-video.video-failed .hero-video,
#intro.has-video.video-failed .hero-skip,
#intro.has-video.video-failed .hero-sound,
#intro.has-video.video-failed .hero-progress{ display:none !important; }
#intro.has-video.video-failed .hero-enter{ display:inline-flex !important; }

/* 자동재생 차단 상태에서도 이미지가 화면을 꽉 채우도록 */
#intro.has-video.needs-tap .hero-img{ opacity:1 !important; visibility:visible !important; }

/* =====================================================================
   ░░ v36 ░░ 인트로 영상 — 자막 보존 + 꽉 찬 느낌
   이 영상은 위·아래 검은 여백 안에 자막이 들어있어 잘라내면 자막이 사라짐.
   → 비율 유지(contain)하되 배경을 검정으로 맞춰 이어져 보이게 한다.
   ===================================================================== */
#intro.hero.has-video{
  background:#000 !important;
  height:100vh; height:100dvh;
  min-height:100vh; min-height:100dvh;
  overflow:hidden;
}
#intro.hero.has-video .hero-video{
  position:absolute !important; inset:0 !important;
  width:100% !important; height:100% !important;
  object-fit:contain !important;      /* 자막까지 항상 보이게 */
  object-position:center center !important;
  background:#000 !important;
  transform:none !important;
}
/* 폴백 이미지도 동일 규격 */
#intro.hero.has-video .hero-img{
  position:absolute !important; inset:0 !important;
  width:100% !important; height:100% !important;
}
#intro.hero.has-video .hero-img img{
  width:100% !important; height:100% !important; object-fit:cover !important;
}
/* 검은 화면 위 컨트롤 — 흰색 대비 유지 */
#intro.has-video .hero-veil{
  background:linear-gradient(180deg, rgba(0,0,0,.28) 0%, rgba(0,0,0,0) 14%);
}
@media (max-width:980px){
  #intro.hero.has-video{ height:100vh; height:100dvh; }
  #intro.hero.has-video .hero-video{ object-fit:contain !important; }
}