/* ==========================================================================
   한결 척추관절병원 — theme.css (종합 정보형 병원 사이트 · 가상 병원)
   --------------------------------------------------------------------------
   얼굴: 남색 #123A6B 한 가지 + 주황 강조. 흰 면 · 차가운 회청 면(#F2F5F9) · 짙은 남색 면 세 가지만 쓴다.
   · 주황을 **글자**로 쓸 땐 --orange-ink(#A85204 · 흰 바탕 5.4:1 · 회청 면 4.9:1). 밝은 주황(#F08A24)은 면·선·점 전용이고,
     그 위 글자는 흰색이 아니라 짙은 남색(6.2:1)이다 — 흰 글자는 2.5:1 로 AA 미달.
   · 모서리 10~16px · 카드는 선 1px + 그림자 약하게. 정보가 많아도 한 격자(12칸 감각)에 맞춘다.
   글꼴: SUIT Variable — SIL Open Font License 1.1 · 상업 사용 가능 · 배포 jsDelivr(github sun-typeface/SUIT@2.0.5).
   글자 크기 바닥 0.875rem(14px) — 법적 고지·푸터·배지 포함 예외 없음.
   ========================================================================== */
@font-face {
  font-family: 'SUIT Variable';
  font-weight: 100 900;
  font-display: swap;
  src: url('https://cdn.jsdelivr.net/gh/sun-typeface/SUIT@2.0.5/fonts/variable/woff2/SUIT-Variable.woff2') format('woff2-variations'), url('https://cdn.jsdelivr.net/gh/sun-typeface/SUIT@2.0.5/fonts/variable/woff2/SUIT-Variable.woff2') format('woff2');
}

/* ① 토큰 ------------------------------------------------------------------ */
:root {
  --f-sans: 'SUIT Variable', 'Pretendard', -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Noto Sans KR', sans-serif;
  --f-display: var(--f-sans);
  --f-latin: var(--f-sans);
  --w-display: 800;
  --w-latin: 700;
  --w-head: 800;
  --w-strong: 700;
  --w-body: 500;

  --navy: #123a6b;
  --navy-2: #1c4f8c;
  --navy-deep: #0b2445;
  --navy-soft: #eaf0f7;
  --orange: #f08a24;
  --orange-hi: #f59a3e;
  --orange-ink: #a85204;
  --orange-soft: #fff3e6;
  --orange-light: #ffc27a;   /* 어두운 면 위 주황 글자 — 남색 7.2:1 */

  --c-bg: #ffffff;
  --c-ink: #0f1e33;
  --c-body: #3b4758;          /* 흰 바탕 9.4:1 */
  --c-mute: #5b6778;          /* 흰 5.7:1 · 회청 면 5.3:1 */
  --c-line: #dde3eb;
  --c-line-strong: #c3ccd8;
  --c-panel: #f2f5f9;
  --c-accent: var(--orange-ink);
  --c-deep: var(--navy);
  --c-dark: var(--navy-deep);
  --c-focus: #c2610a;         /* 밝은 면 — 흰 바탕 4.2:1(비텍스트 3:1 이상) */
  --c-on-dark-2: rgba(255, 255, 255, 0.82);
  --c-on-dark-3: rgba(255, 255, 255, 0.72);

  --fs-display: clamp(2.125rem, 1.25rem + 3.1vw, 3.75rem);
  --fs-h1: clamp(1.875rem, 1.3rem + 2.1vw, 2.875rem);
  --fs-h2: clamp(1.625rem, 1.2rem + 1.5vw, 2.375rem);
  --fs-h3: clamp(1.1875rem, 1.05rem + 0.5vw, 1.4375rem);
  --fs-h4: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
  --fs-lead: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
  --ls-head: -0.025em;
  --ls-eyebrow: 0.12em;

  --container: 72.5rem;       /* 1160px — 1440 에서 양옆 84px: 퀵메뉴(80px)가 본문을 덮지 않는다 */
  --container-wide: 82.5rem;
  --gutter: clamp(1.25rem, 4.5vw, 3.5rem);
  --sec-y: clamp(4rem, 2.4rem + 5vw, 7.5rem);
  --hd-h: 5rem;
  --radius: 10px;
  --radius-lg: 16px;
  --shadow: 0 1px 2px rgba(11, 36, 69, 0.05), 0 14px 34px -14px rgba(11, 36, 69, 0.18);
  --shadow-lg: 0 2px 4px rgba(11, 36, 69, 0.05), 0 30px 60px -24px rgba(11, 36, 69, 0.35);
  --qc-overlap: 5.5rem;
  --tabbar-h: 0px;
}
@media (max-width: 880px) {
  :root { --hd-h: 4rem; --qc-overlap: 0rem; --tabbar-h: 4rem; --badge-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom) + 0.75rem); }
  /* 하단 탭 바가 포커스된 요소·앵커 대상을 가리지 않게 */
  html { scroll-padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom) + 1rem); }
}

/* ② 기초 ------------------------------------------------------------------ */
html { scroll-padding-top: calc(var(--hd-h) + 4.5rem); }
body.hg { font-feature-settings: 'tnum' 0; letter-spacing: -0.01em; }
.hg h1, .hg h2, .hg h3 { letter-spacing: var(--ls-head); }
.hg .num { font-variant-numeric: tabular-nums; letter-spacing: 0; }
.hg ::selection { background: var(--navy); color: #fff; }
.hg .sec--panel { background: var(--c-panel); }
#main:focus { outline: none; }
.eyebrow { color: var(--orange-ink); font-weight: 800; letter-spacing: var(--ls-eyebrow); }
.eyebrow--on-navy { color: var(--orange-light); }
.muted { color: var(--c-mute); }
/* 번호·시간 한 덩어리 — 하이픈·대시에서 줄이 갈리지 않게(「000-00-/00000」 · 「02-000-/0000」 · 「08:30–/18:00」) */
.nw, .hg .num { white-space: nowrap; }

/* 버튼 */
.hbtn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; min-height: 3rem; padding: 0 1.375rem; border: 1px solid transparent; border-radius: var(--radius); font-size: 0.9375rem; font-weight: 800; letter-spacing: -0.01em; white-space: nowrap; transition: background-color 0.2s, color 0.2s, border-color 0.2s, transform 0.2s; }
.hbtn .ico { transition: transform 0.25s var(--ease); }
.hbtn:hover .ico:last-child:not(:first-child) { transform: translateX(3px); }
.hbtn--orange { background: var(--orange); color: var(--navy-deep); }
.hbtn--orange:hover { background: var(--orange-hi); }
.hbtn--navy { background: var(--navy); color: #fff; }
.hbtn--navy:hover { background: var(--navy-2); }
.hbtn--line { background: #fff; color: var(--navy); border-color: var(--navy); }
.hbtn--line:hover { background: var(--navy-soft); }
.hbtn--ghost { color: #fff; border-color: rgba(255, 255, 255, 0.5); }
.hbtn--ghost:hover { background: rgba(255, 255, 255, 0.12); border-color: #fff; }
.hbtn--glass { color: #fff; background: rgba(255, 255, 255, 0.14); border-color: rgba(255, 255, 255, 0.4); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.hbtn--glass:hover { background: rgba(255, 255, 255, 0.24); }
.hbtn--white { background: #fff; color: var(--navy); }
.hbtn--white:hover { background: var(--orange-soft); }
.hbtn--kakao { background: #fee500; color: #191919; }
.hbtn--kakao:hover { background: #f5dc00; }
.hbtn--sm { min-height: 2.75rem; padding: 0 1rem; font-size: 0.875rem; }
.chip { display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 1rem; border: 1px solid var(--c-line); border-radius: 999px; background: #fff; color: var(--c-body); font-size: 0.875rem; font-weight: 700; transition: border-color 0.2s, color 0.2s, background-color 0.2s; }
.chip:hover { border-color: var(--navy); color: var(--navy); background: var(--navy-soft); }
.link-more { display: inline-flex; align-items: center; gap: 0.375rem; min-height: 2.75rem; font-weight: 800; color: var(--navy); font-size: 0.9375rem; }
.link-more:hover .ico { transform: translateX(3px); }
.link-more .ico { transition: transform 0.2s; }

/* 어두운 면 — 포커스 링을 밝은 주황으로. ⚠️ 링은 요소 **바깥**(offset 3px)에 그려진다 — 링이 흰 바탕에 떨어지는 요소
   (홈 진료 환경 카드 `.fac__card` · 퀵메뉴 접기 단추 · 모바일 탭 바 전화 단추)는 기본 링(#c2610a · 흰 4.2:1 · 남색 4.0:1)을 쓴다.
   예전엔 이 목록에 `.fac`·`.tabbar__call` 이 있어 연주황 링이 흰 바탕 위에서 1.58:1 이었다(2026-09-22 재검증). */
.util, .hft, .quick, .hero-s, .fm, .tvsec, .depts__intro, .hourscard, .qc__form--op, .qc__tile--call, .ctab, .ph { --c-focus: var(--orange-light); }
.quick__toggle { --c-focus: #c2610a; }

/* 로고 */
.hg-logo { display: inline-flex; align-items: center; gap: 0.625rem; min-height: 2.75rem; color: var(--navy); flex-shrink: 0; }
.hg-logo__mark { width: 2.5rem; height: 2.5rem; }
.hg-logo__mark path { stroke: var(--logo-line, #fff); }
.hg-logo__txt { display: grid; line-height: 1.15; }
.hg-logo__txt b { font-size: 1.1875rem; font-weight: 800; letter-spacing: -0.03em; color: var(--c-ink); }
.hg-logo__txt small { font-size: 0.875rem; font-weight: 700; letter-spacing: 0.02em; color: var(--c-mute); }
.hft .hg-logo, .fm .hg-logo { color: #fff; --logo-line: var(--navy-deep); }
.hft .hg-logo__txt b, .fm .hg-logo__txt b { color: #fff; }
.hft .hg-logo__txt small, .fm .hg-logo__txt small { color: var(--c-on-dark-3); }

/* ③ 유틸 띠 --------------------------------------------------------------- */
.util { background: var(--navy-deep); color: var(--c-on-dark-2); font-size: 0.875rem; }
.util__inner { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; min-height: 2.75rem; max-width: calc(var(--container-wide) + var(--gutter) * 2); }
.util__hours { display: inline-flex; align-items: center; gap: 0.5rem; }
.util__hours .ico { color: var(--orange-light); }
.util__links { display: flex; align-items: center; }
.util__links li + li { border-left: 1px solid rgba(255, 255, 255, 0.18); }
.util__links a, .util__links button { display: inline-flex; align-items: center; gap: 0.375rem; min-height: 2.75rem; padding: 0 0.875rem; color: var(--c-on-dark-2); font-weight: 600; transition: color 0.2s; }
.util__links a:hover, .util__links button:hover { color: #fff; }
.util__tel button { color: #fff; padding-right: 0; }
.util__tel b { color: var(--orange-light); font-weight: 800; letter-spacing: 0; }
@media (max-width: 1080px) { .util__hours { display: none; } .util__inner { justify-content: flex-end; } }
@media (max-width: 880px) { .util { display: none; } }

/* ④ 헤더 · 메가 메뉴 · 검색 ------------------------------------------------ */
.hg .hd.hg-hd { position: sticky; top: 0; height: var(--hd-h); background: #fff; color: var(--c-ink); border-bottom: 1px solid var(--c-line); backdrop-filter: none; -webkit-backdrop-filter: none; }
.hg-hd.is-scrolled { box-shadow: 0 8px 24px -16px rgba(11, 36, 69, 0.35); }
.hg-hd__inner { display: flex; align-items: center; gap: 1.25rem; height: 100%; max-width: calc(var(--container-wide) + var(--gutter) * 2); }
.mnav { flex: 1; display: flex; justify-content: center; height: 100%; min-width: 0; }
.mnav__list { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); width: 100%; max-width: 48rem; height: 100%; }
.mnav__item { position: relative; height: 100%; }
.mnav__top { position: relative; display: flex; align-items: center; justify-content: center; height: 100%; font-size: 1.0625rem; font-weight: 800; letter-spacing: -0.02em; color: var(--c-ink); transition: color 0.2s; }
.mnav__top::after { content: ''; position: absolute; left: 1.25rem; right: 1.25rem; bottom: -1px; height: 3px; border-radius: 3px 3px 0 0; background: var(--orange); transform: scaleX(0); transition: transform 0.25s var(--ease); }
.mnav__item:hover > .mnav__top, .mnav__item:focus-within > .mnav__top, .mnav__item.is-current > .mnav__top { color: var(--navy); }
.mnav__item:hover > .mnav__top::after, .mnav__item:focus-within > .mnav__top::after, .mnav__item.is-current > .mnav__top::after { transform: scaleX(1); }
.mnav__col { position: absolute; left: 0; right: 0; top: 100%; z-index: 2; min-height: var(--mega-h, 19rem); padding: 0.875rem 0.25rem 1.125rem; border-left: 1px solid var(--c-line); opacity: 0; visibility: hidden; transition: opacity 0.2s, visibility 0.2s, background-color 0.2s; }
.mnav__item:first-child .mnav__col { border-left: 0; }
.mnav__item:last-child .mnav__col { border-right: 1px solid var(--c-line); }
.mnav__col a { display: flex; align-items: center; min-height: 2.75rem; padding: 0.25rem 0.375rem; white-space: nowrap; border-radius: 6px; font-size: 0.9375rem; font-weight: 600; color: var(--c-body); line-height: 1.35; text-align: center; justify-content: center; transition: color 0.15s, background-color 0.15s; }
.mnav__col a:hover, .mnav__col a[aria-current] { color: var(--navy); background: #fff; font-weight: 800; }
.mnav__item:hover > .mnav__col, .mnav__item:focus-within > .mnav__col { background: var(--navy-soft); }
.mega-bg { position: absolute; left: 0; right: 0; top: 100%; z-index: 1; height: var(--mega-h, 19rem); background: #fff; border-top: 1px solid var(--c-line); box-shadow: 0 28px 40px -28px rgba(11, 36, 69, 0.35); opacity: 0; visibility: hidden; transition: opacity 0.2s, visibility 0.2s; pointer-events: none; }
.mega-bg__in { width: 100%; max-width: calc(var(--container-wide) + var(--gutter) * 2); margin-inline: auto; padding: 1.5rem var(--gutter); }
.mega-bg__promo { width: 14.5rem; padding: 1.25rem 1.375rem; border-radius: var(--radius-lg); background: var(--navy) radial-gradient(100% 80% at 100% 0%, rgba(240, 138, 36, 0.3), transparent 60%); color: rgba(255, 255, 255, 0.8); }
.mega-bg__t { font-size: 0.875rem; font-weight: 700; }
.mega-bg__tel { margin-top: 0.25rem; font-size: 1.625rem; font-weight: 800; color: var(--orange-light); line-height: 1.2; }
.mega-bg__h { margin-top: 0.625rem; font-size: 0.875rem; line-height: 1.6; }
.hg-hd.is-mega .mnav__col, .hg-hd.is-mega .mega-bg { opacity: 1; visibility: visible; }
.hg-hd.is-mega .mega-bg { pointer-events: auto; }
.hg-hd.is-mega { box-shadow: none; }

.hg-hd__icon { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: var(--radius); color: var(--c-ink); flex-shrink: 0; }
.hg-hd__icon:hover { background: var(--navy-soft); color: var(--navy); }
.hg .hd__menu { margin: 0 -0.25rem 0 0; }
.hg-hd__search { display: none; }
.hg-hd__search[aria-expanded='true'] { background: var(--navy); color: #fff; }

.hsearch { position: relative; width: 15rem; flex-shrink: 0; }
.hsearch__box { position: relative; display: flex; align-items: center; }
.hsearch__input { width: 100%; min-height: 2.75rem; padding: 0 3rem 0 1rem; border: 1.5px solid var(--c-line-strong); border-radius: 999px; background: var(--c-panel); color: var(--c-ink); font-size: 0.9375rem; font-weight: 600; transition: border-color 0.2s, background-color 0.2s; -webkit-appearance: none; appearance: none; }
.hsearch__input::placeholder { color: var(--c-mute); font-weight: 500; }
.hsearch__input::-webkit-search-cancel-button { -webkit-appearance: none; }
.hsearch__input:focus { outline: 0; border-color: var(--navy); background: #fff; box-shadow: 0 0 0 3px rgba(18, 58, 107, 0.16); }
.hsearch__go { position: absolute; right: 0; top: 0; display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 999px; color: var(--navy); }
.hsearch__go:hover { color: var(--orange-ink); }
.hsearch__panel { position: absolute; right: 0; top: calc(100% + 0.5rem); z-index: 5; width: 24rem; max-width: calc(100vw - 2rem); padding: 1rem; background: #fff; border: 1px solid var(--c-line); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); }
.hsearch__hint { font-size: 0.875rem; font-weight: 800; color: var(--c-mute); margin-bottom: 0.5rem; }
.hsearch__chips { display: flex; flex-wrap: wrap; gap: 0.375rem; }
.hsearch__list { display: grid; gap: 0.125rem; max-height: min(60vh, 26rem); overflow-y: auto; }
.hsearch__list:empty { display: none; }
.hs-opt { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 0.25rem 0.75rem; min-height: 2.75rem; padding: 0.5rem 0.75rem; border-radius: var(--radius); cursor: pointer; }
.hs-opt b { color: var(--c-ink); font-weight: 800; }
.hs-opt small { font-size: 0.875rem; color: var(--c-mute); font-weight: 600; text-align: right; }
.hs-opt mark { background: var(--orange-soft); color: var(--orange-ink); border-radius: 3px; }
.hs-opt:hover, .hs-opt[aria-selected='true'] { background: var(--navy-soft); }
.hs-opt[aria-selected='true'] { box-shadow: inset 3px 0 0 var(--orange); }
.hsearch__empty { font-size: 0.9375rem; color: var(--c-body); padding: 0.5rem 0.25rem 0.25rem; }
.hsearch__empty b { color: var(--navy); }

@media (max-width: 1359px) {
  .hg-hd__search { display: grid; }
  .hsearch { position: absolute; left: 0; right: 0; top: 100%; width: auto; padding: 1rem var(--gutter) 1.25rem; background: #fff; border-bottom: 1px solid var(--c-line); box-shadow: 0 24px 32px -24px rgba(11, 36, 69, 0.35); display: none; }
  .hg-hd.is-search .hsearch { display: block; }
  .hsearch__box { max-width: 40rem; margin-inline: auto; }
  .hsearch__panel { position: static; width: auto; max-width: 40rem; margin: 0.75rem auto 0; box-shadow: none; }
}
@media (max-width: 1180px) { .mnav__top { font-size: 1rem; } }
@media (max-width: 1080px) {
  .mnav, .mega-bg { display: none; }
  .hg-hd__search { margin-left: auto; }
}
@media (max-width: 880px) {
  .hg-logo__mark { width: 2.25rem; height: 2.25rem; }
  .hg-logo__txt b { font-size: 1.0625rem; }
  .hg-hd__inner { gap: 0.5rem; }
}
@media (max-width: 380px) { .hg-hd .hg-logo__txt small { display: none; } }

/* 전체 메뉴(키트) — 남색으로 */
.hg .fm { background: var(--navy-deep); --fm-cols: 3; }
.hg .fm__head { font-size: clamp(1.25rem, 1rem + 1vw, 1.75rem); }
.hg .fm__num { color: var(--orange-light); font-weight: 700; }
.hg .fm__contact strong { color: var(--orange-light); }
.hg .fm__close:focus-visible, .hg .fm a:focus-visible { outline-color: var(--orange-light); }
html.fm-open .quick, html.fm-open .tabbar { display: none; }

/* ⑤ 홈 히어로 슬라이더 ------------------------------------------------------ */
.hero-s { position: relative; background: var(--navy-deep); color: #fff; overflow: hidden; }
.hero-s .slides > .slide { transition: opacity 1s var(--ease), visibility 1s; }
/* 첫 화면 = 유틸 띠 + 헤더 + 히어로. 빠른 상담 카드는 화면 맨 아래에 윗단(빈 여백)만 걸친다 —
   좌하단 샘플 표식이 카드의 입력칸을 덮지 않게(1440×900 기준 실측). */
.hs { position: relative; display: flex; align-items: center; min-height: clamp(36rem, calc(100svh - 9.75rem + var(--qc-overlap)), 56rem); padding: 3.5rem 0 calc(var(--qc-overlap) + 6.5rem); isolation: isolate; }
.hs__media { position: absolute; inset: 0; z-index: -2; }
.hs__media img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.06); }
.slide.is-on .hs__media img { animation: hg-zoom 9s var(--ease) forwards; }
@keyframes hg-zoom { from { transform: scale(1.08); } to { transform: scale(1); } }
.hs::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(11, 36, 69, 0.94) 0%, rgba(11, 36, 69, 0.78) 38%, rgba(18, 58, 107, 0.28) 72%, rgba(18, 58, 107, 0.1) 100%); }
.hs__body { width: 100%; }
.hs__eyebrow { font-size: 0.875rem; font-weight: 800; letter-spacing: 0.16em; color: var(--orange-light); margin-bottom: 1.25rem; }
.hs__title { font-size: var(--fs-display); font-weight: 800; line-height: 1.2; letter-spacing: -0.035em; color: #fff; max-width: 13em; }
.hs__lead { margin-top: 1.25rem; max-width: 30em; font-size: var(--fs-lead); font-weight: 600; line-height: 1.75; color: rgba(255, 255, 255, 0.88); }
.hs__btns { display: flex; flex-wrap: wrap; gap: 0.625rem; margin-top: 2rem; }
.slide:not(.is-on) .hs__body > * { opacity: 0; transform: translateY(14px); }
.slide .hs__body > * { transition: opacity 0.8s var(--ease), transform 0.8s var(--ease); }
.slide.is-on .hs__body > :nth-child(2) { transition-delay: 0.08s; }
.slide.is-on .hs__body > :nth-child(3) { transition-delay: 0.16s; }
.slide.is-on .hs__body > :nth-child(4) { transition-delay: 0.24s; }
.hs__ctrl { position: absolute; left: 0; right: 0; bottom: calc(var(--qc-overlap) + 2rem); z-index: 2; display: flex; align-items: center; gap: 1rem; }
.hs__count { font-size: 0.9375rem; font-weight: 600; color: rgba(255, 255, 255, 0.72); min-width: 4.25rem; }
.hs__count b { color: #fff; font-weight: 800; }
.hs__bar { width: 9rem; color: var(--orange); }
.hs__btnset { display: flex; gap: 0.375rem; }
.hs__cbtn { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.4); color: #fff; transition: background-color 0.2s, border-color 0.2s; }
.hs__cbtn:hover { background: rgba(255, 255, 255, 0.14); border-color: #fff; }
.hs__toggle .ico + .ico { display: none; }
.hs__toggle[aria-pressed='true'] .ico:first-child { display: none; }
.hs__toggle[aria-pressed='true'] .ico + .ico { display: block; }
@media (max-width: 880px) {
  /* 모바일 첫 화면 = 헤더 + 히어로(탭 바 위까지). 조작 버튼은 오른쪽 — 왼쪽 아래는 샘플 표식 자리 */
  .hs { min-height: calc(100svh - var(--hd-h) - var(--tabbar-h)); align-items: flex-end; padding: 6rem 0 5.75rem; }
  /* 사진은 위쪽 절반에 또렷하게, 글은 아래 남색 면에 — 사진 주제가 글 뒤에 묻히지 않게 */
  .hs__media { bottom: auto; height: 54%; }
  /* 글자가 걸치는 사진 아래끝(40~54%)은 거의 불투명한 남색 — eyebrow 가 사진 위에서 4.1:1 이었다(2026-09-22 실측) */
  .hs::before { background: linear-gradient(180deg, rgba(11, 36, 69, 0) 0%, rgba(11, 36, 69, 0.08) 26%, rgba(11, 36, 69, 0.9) 42%, var(--navy-deep) 49%); }
  .hs__btns .hbtn { flex: 1 1 auto; }
  .hs__ctrl { bottom: 1rem; justify-content: flex-end; gap: 0.75rem; }
  .hs__bar { display: none; }
  .hs__count { min-width: 0; }
}

/* ⑥ 빠른 상담 ------------------------------------------------------------- */
.qc { position: relative; z-index: 3; margin-top: calc(-1 * var(--qc-overlap)); }
.qc__grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1.35fr) minmax(0, 1fr); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg); background: #fff; }
.qc__form { display: flex; flex-direction: column; gap: 1rem; padding: 1.75rem clamp(1.25rem, 2vw, 2rem) 1.5rem; }
.qc__form--first { border-top: 4px solid var(--orange); }
.qc__form--op { background: var(--navy); color: rgba(255, 255, 255, 0.86); border-top: 4px solid var(--navy-deep); }
.qc__title { display: flex; align-items: center; gap: 0.5rem; font-size: 1.25rem; font-weight: 800; color: var(--c-ink); letter-spacing: -0.03em; }
.qc__title .ico { color: var(--orange-ink); }
.qc__form--op .qc__title { color: #fff; }
.qc__form--op .qc__title .ico { color: var(--orange-light); }
.qc__desc { margin-top: 0.25rem; font-size: 0.9375rem; color: var(--c-mute); line-height: 1.55; }
.qc__form--op .qc__desc { color: rgba(255, 255, 255, 0.78); }
.qc__fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.625rem; }
.field--full { grid-column: 1 / -1; }
.hg .field { gap: 0.3rem; }
.hg .field__label { font-size: 0.875rem; font-weight: 700; color: var(--c-ink); }
.hg .field__label em, .rsv__note em { font-style: normal; color: var(--orange-ink); }
.qc__form--op .field__label { color: rgba(255, 255, 255, 0.9); }
.hg .input, .hg .select, .hg .textarea { min-height: 2.875rem; padding: 0.5rem 0.875rem; border-color: var(--c-line-strong); border-radius: 8px; font-size: 0.9375rem; font-weight: 600; }
.hg .input::placeholder, .hg .textarea::placeholder { color: #697485; font-weight: 500; }
.hg .select { -webkit-appearance: none; appearance: none; padding-right: 2.5rem; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23123a6b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 0.75rem center; }
.hg .input:focus, .hg .select:focus, .hg .textarea:focus { border-color: var(--navy); box-shadow: 0 0 0 3px rgba(18, 58, 107, 0.18); }
.qc__form--op .input, .qc__form--op .select { border-color: transparent; }
.qc__form--op .input:focus, .qc__form--op .select:focus { box-shadow: 0 0 0 3px rgba(255, 194, 122, 0.7); }
/* 남색 카드 안 입력칸 — 테두리가 남색(=카드색)이라 포커스가 안 보였다. 키보드 포커스는 연주황 링(남색 위 7:1)으로 */
.qc__form--op .input:focus-visible, .qc__form--op .select:focus-visible { outline: 2px solid var(--orange-light); outline-offset: 2px; }
.hg .input[aria-invalid='true'], .hg .select[aria-invalid='true'] { border-color: #c8321f; box-shadow: 0 0 0 3px rgba(200, 50, 31, 0.15); }
.qc__foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 0.75rem; margin-top: auto; }
.qc__submit { flex-shrink: 0; }
.consent { display: grid; gap: 0; }
.hg .check { align-items: center; gap: 0.5rem; font-size: 0.875rem; font-weight: 600; line-height: 1.45; }
.hg .check input { margin-top: 0; accent-color: var(--navy); }
.check em { font-style: normal; color: var(--orange-ink); }
.qc__form--op .check { color: rgba(255, 255, 255, 0.9); }
.qc__form--op .check em { color: var(--orange-light); }
.qc__form--op .check input { accent-color: var(--orange); }
.consent__more summary { display: inline-flex; align-items: center; min-height: 2.75rem; padding-left: 1.75rem; font-size: 0.875rem; font-weight: 700; color: var(--c-mute); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; list-style: none; }
.consent__more summary::-webkit-details-marker { display: none; }
.consent__more p { margin: 0 0 0.25rem 1.75rem; font-size: 0.875rem; line-height: 1.55; color: var(--c-mute); }
.qc__form--op .consent__more summary, .qc__form--op .consent__more p { color: rgba(255, 255, 255, 0.78); }
.qc__side { display: grid; grid-template-rows: 1fr 1fr; }
.qc__tile { display: flex; flex-direction: column; justify-content: center; gap: 0.375rem; padding: 1.5rem clamp(1.25rem, 2vw, 1.75rem); }
.qc__tile--reserve { background: var(--orange-soft); color: var(--c-body); border-top: 4px solid var(--orange); transition: background-color 0.2s; }
.qc__tile--reserve:hover { background: #ffe9d2; }
.qc__tile--reserve > .ico { color: var(--orange-ink); margin-bottom: 0.25rem; }
.qc__tile-t { display: flex; align-items: center; gap: 0.5rem; font-size: 1.125rem; font-weight: 800; color: var(--c-ink); letter-spacing: -0.02em; }
.qc__tile-d { font-size: 0.875rem; line-height: 1.55; color: var(--c-body); }
.qc__tile-go { display: inline-flex; align-items: center; gap: 0.25rem; margin-top: 0.25rem; font-size: 0.9375rem; font-weight: 800; color: var(--orange-ink); }
.qc__tile--call { background: var(--navy-deep); color: rgba(255, 255, 255, 0.82); }
.qc__tile--call .qc__tile-t { color: #fff; font-size: 1rem; }
.qc__tile--call .qc__tile-t .ico { color: var(--orange-light); }
.qc__tile--call .qc__tile-d { color: rgba(255, 255, 255, 0.78); }
.qc__tel { align-self: flex-start; min-height: 2.75rem; font-size: clamp(1.75rem, 1.3rem + 1vw, 2.125rem); font-weight: 800; color: var(--orange-light); letter-spacing: -0.01em; line-height: 1.2; }
@media (max-width: 1080px) {
  .qc__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .qc__side { grid-column: 1 / -1; grid-template-rows: none; grid-template-columns: 1fr 1fr; }
}
@media (max-width: 880px) { .qc { padding-top: 0; } .qc .wrap { padding-inline: 0; } .qc__grid { border-radius: 0; box-shadow: none; } }
@media (max-width: 720px) {
  .qc__grid, .qc__side { grid-template-columns: minmax(0, 1fr); }
  .qc__foot { flex-direction: column; align-items: stretch; }
  .qc__submit { width: 100%; }
}

/* ⑦ 홈 공통 머리 ----------------------------------------------------------- */
.h2blk { margin-bottom: clamp(1.75rem, 1.2rem + 1.5vw, 2.75rem); max-width: 46rem; }
.h2blk .eyebrow { margin-bottom: 0.75rem; }
.h2blk__title { font-size: var(--fs-h2); font-weight: 800; line-height: 1.28; color: var(--c-ink); }
.h2blk__desc { margin-top: 0.875rem; font-size: var(--fs-lead); color: var(--c-body); line-height: 1.7; }
.h2blk--center { margin-inline: auto; text-align: center; }

/* ⑧ 진료과 카드 ----------------------------------------------------------- */
.depts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(0.875rem, 1.4vw, 1.25rem); }
.depts__intro { display: flex; flex-direction: column; padding: clamp(1.75rem, 2.5vw, 2.5rem); border-radius: var(--radius-lg); background: var(--navy) radial-gradient(120% 90% at 100% 0%, rgba(240, 138, 36, 0.28), transparent 55%); color: rgba(255, 255, 255, 0.84); }
.depts__title { margin-top: 0.75rem; font-size: var(--fs-h2); font-weight: 800; line-height: 1.25; color: #fff; }
.depts__desc { margin-top: 1rem; font-size: 0.9375rem; line-height: 1.75; }
.depts__more { display: inline-flex; align-items: center; gap: 0.375rem; min-height: 2.75rem; margin-top: auto; padding-top: 1.5rem; font-weight: 800; color: var(--orange-light); }
.depts__more:hover .ico { transform: translateX(3px); }
.depts__more .ico { transition: transform 0.2s; }
.dcard { position: relative; display: flex; flex-direction: column; border: 1px solid var(--c-line); border-radius: var(--radius-lg); background: #fff; overflow: hidden; transition: border-color 0.25s, box-shadow 0.35s var(--ease), transform 0.35s var(--ease); }
.dcard:hover { border-color: var(--c-line-strong); box-shadow: var(--shadow-lg); transform: translateY(-4px); }
.dcard__media { aspect-ratio: 16 / 10; overflow: hidden; background: var(--c-panel); }
.dcard__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.9s var(--ease); }
.dcard:hover .dcard__media img { transform: scale(1.05); }
.dcard__body { position: relative; display: flex; flex-direction: column; gap: 0.25rem; padding: 1.25rem 1.375rem 1.375rem; flex: 1; }
.dcard__en { font-size: 0.875rem; font-weight: 800; letter-spacing: 0.1em; color: var(--orange-ink); }
.dcard__title { display: flex; align-items: center; gap: 0.5rem; font-size: 1.375rem; font-weight: 800; color: var(--c-ink); }
.dcard__ico { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 10px; background: var(--navy-soft); color: var(--navy); }
.dcard__short { font-size: 0.9375rem; font-weight: 600; color: var(--c-mute); }
.dcard__tags { display: flex; flex-wrap: wrap; gap: 0.375rem; margin-top: 0.75rem; padding-right: 3rem; }
.dcard__tags li { padding: 0.25rem 0.625rem; border-radius: 999px; background: var(--c-panel); font-size: 0.875rem; font-weight: 700; color: var(--c-body); }
.dcard__go { position: absolute; right: 1.25rem; bottom: 1.25rem; display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 999px; background: var(--navy); color: #fff; transition: background-color 0.2s; }
.dcard:hover .dcard__go { background: var(--orange); color: var(--navy-deep); }
@media (max-width: 960px) { .depts { grid-template-columns: repeat(2, minmax(0, 1fr)); } .depts__intro { grid-column: 1 / -1; } .depts__title br.d-only { display: none; } }
@media (max-width: 640px) {
  .depts { grid-template-columns: minmax(0, 1fr); gap: 0.75rem; }
  .dcard { flex-direction: row; }
  .dcard__media { aspect-ratio: auto; width: 7.5rem; flex-shrink: 0; }
  .dcard__body { padding: 1rem 3.75rem 1rem 1rem; justify-content: center; }
  .dcard__title { font-size: 1.1875rem; }
  .dcard__ico { display: none; }
  .dcard__tags { display: none; }
  .dcard__go { right: 1rem; top: 50%; bottom: auto; transform: translateY(-50%); }
}

/* ⑨ 간호·간병 띠 ----------------------------------------------------------- */
.ward { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); background: var(--navy-soft); }
.ward__media { position: relative; min-height: 34rem; overflow: hidden; }
.ward__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ward__panel { display: flex; align-items: center; padding: clamp(3rem, 6vw, 5.5rem) var(--gutter); }
.ward__inner { max-width: 32rem; }
.ward__title { margin-top: 0.75rem; font-size: var(--fs-h2); font-weight: 800; line-height: 1.25; }
.ward__desc { margin-top: 1rem; font-size: var(--fs-lead); line-height: 1.75; color: var(--c-body); }
.ward__points { display: grid; gap: 0.625rem; margin: 1.75rem 0 2rem; }
.ward__points li { display: flex; align-items: center; gap: 1rem; padding: 0.875rem 1rem; border-radius: var(--radius); background: #fff; box-shadow: 0 1px 2px rgba(11, 36, 69, 0.06); }
.ward__points .ico { flex-shrink: 0; color: var(--navy); }
.ward__points p { font-size: 0.9375rem; color: var(--c-mute); line-height: 1.5; }
.ward__points b { display: block; color: var(--c-ink); font-size: 1rem; font-weight: 800; }
@media (max-width: 880px) { .ward { grid-template-columns: minmax(0, 1fr); } .ward__media { min-height: 16rem; } }

/* ⑩ 의료진(홈) ------------------------------------------------------------ */
.drs__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem 2rem; margin-bottom: 1.75rem; }
.drs__head .h2blk { margin-bottom: 0; }
.drs__tabs { gap: 0.375rem; flex-wrap: wrap; }
.drs__tab { min-height: 2.75rem; padding: 0 1.125rem; border: 1px solid var(--c-line-strong); border-radius: 999px; background: #fff; font-size: 0.9375rem; font-weight: 700; color: var(--c-body); white-space: nowrap; transition: background-color 0.2s, color 0.2s, border-color 0.2s; }
.drs__tab:hover { border-color: var(--navy); color: var(--navy); }
.drs__tab[aria-selected='true'] { background: var(--navy); border-color: var(--navy); color: #fff; }
.drp__grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: clamp(1rem, 2vw, 1.5rem); }
.drf { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); border-radius: var(--radius-lg); background: var(--c-panel); overflow: hidden; }
.drf__media { position: relative; aspect-ratio: 4 / 5; background: var(--navy-soft); }
.dr-pic { display: block; overflow: hidden; background: var(--navy-soft); }
.dr-pic .dr-av { display: block; width: 100%; height: 100%; }
/* 선 굵기는 칸 크기와 무관하게 화면 기준으로(큰 카드·작은 썸네일 모두 같은 가는 선) */
.dr-av path, .dr-av rect, .dr-av ellipse, .dr-av circle { vector-effect: non-scaling-stroke; }
.drf__img { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 0.5s var(--ease); }
.drf__img.is-on { opacity: 1; }
.drf__info { display: flex; align-items: center; padding: clamp(1.5rem, 3vw, 2.5rem); }
.drf__dept { font-size: 0.9375rem; font-weight: 800; color: var(--orange-ink); }
.drf__name { margin-top: 0.375rem; font-size: clamp(1.625rem, 1.3rem + 1vw, 2.125rem); font-weight: 800; color: var(--c-ink); letter-spacing: -0.03em; line-height: 1.25; }
.drf__name span { font-size: 1.125rem; font-weight: 700; color: var(--c-body); }
.drf__focus { display: flex; flex-wrap: wrap; gap: 0.375rem; margin-top: 1rem; }
.drf__focus li { padding: 0.3rem 0.75rem; border-radius: 999px; background: #fff; border: 1px solid var(--c-line); font-size: 0.875rem; font-weight: 700; color: var(--navy); }
.drf__career { margin-top: 1.25rem; display: grid; gap: 0.25rem; font-size: 0.9375rem; color: var(--c-body); }
.drf__career li { position: relative; padding-left: 0.875rem; }
.drf__career li::before { content: ''; position: absolute; left: 0; top: 0.72em; width: 4px; height: 4px; border-radius: 50%; background: var(--orange); }
.drf__btns { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.75rem; }
.drl { display: flex; flex-direction: column; gap: 0.75rem; }
.drl__label { font-size: 0.9375rem; font-weight: 700; color: var(--c-mute); }
.drl__label b { color: var(--navy); }
.drl__list { display: grid; gap: 0.5rem; }
.drl__item, .drl__more { display: flex; align-items: center; gap: 0.875rem; width: 100%; min-height: 4.75rem; padding: 0.625rem 0.875rem; border: 1px solid var(--c-line); border-radius: var(--radius); background: #fff; text-align: left; transition: border-color 0.2s, background-color 0.2s, box-shadow 0.2s; }
.drl__item:hover { border-color: var(--c-line-strong); }
.drl__item.is-on { border-color: var(--navy); background: var(--navy-soft); box-shadow: inset 4px 0 0 var(--orange); }
.drl__img { width: 3.5rem; height: 3.5rem; border-radius: 999px; flex-shrink: 0; }
.drl__txt { display: grid; gap: 0.125rem; font-size: 0.9375rem; color: var(--c-body); line-height: 1.4; }
.drl__item b { color: var(--c-ink); font-size: 1.0625rem; font-weight: 800; }
.drl__item small { font-size: 0.875rem; color: var(--c-mute); font-weight: 600; }
.drl__more { justify-content: center; min-height: 3.5rem; border-style: dashed; color: var(--navy); font-weight: 800; }
.drl__more:hover { background: var(--navy-soft); }
.photo-note { margin-top: 1.25rem; font-size: 0.875rem; color: var(--c-mute); }
.photo-note::before { content: '※ '; }
.photo-note--top { margin-top: 2rem; }
@media (max-width: 960px) { .drp__grid { grid-template-columns: minmax(0, 1fr); } .drl__list { grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); } }
@media (max-width: 640px) {
  .drs__tabs { flex-wrap: nowrap; overflow-x: auto; margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); width: calc(100% + var(--gutter) * 2); }
  .drf { grid-template-columns: minmax(0, 1fr); }
  .drf__media { aspect-ratio: 5 / 4; }
  .drf__info { padding: 1.5rem 1.25rem; }
}

/* ⑪ 영상 ------------------------------------------------------------------ */
.tvsec { background: var(--navy-deep); color: rgba(255, 255, 255, 0.82); }
.tvsec .h2blk__title { color: #fff; }
.tvsec .eyebrow { color: var(--orange-light); }
.tv__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem 2rem; margin-bottom: 1.75rem; }
.tv__head .h2blk { margin-bottom: 0; }
.tv__nav { display: flex; align-items: center; gap: 0.5rem; }
.rail-btn { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.35); color: #fff; transition: background-color 0.2s, border-color 0.2s; }
.rail-btn:hover { background: rgba(255, 255, 255, 0.12); border-color: #fff; }
.tv__all { display: inline-flex; align-items: center; gap: 0.25rem; min-height: 2.75rem; margin-left: 0.5rem; font-weight: 800; color: var(--orange-light); }
.tv__track { --rail-w: calc((100% - 3 * 1.25rem) / 4); --rail-gap: 1.25rem; padding-bottom: 0.25rem; }
.vcard__poster { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; border-radius: var(--radius); overflow: hidden; background: #16345c; }
.vcard__poster img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s var(--ease), filter 0.3s; filter: saturate(0.9); }
.vcard__poster::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(11, 36, 69, 0.55)); }
.vcard__poster:hover img { transform: scale(1.05); filter: none; }
.vcard__play { position: absolute; left: 50%; top: 50%; z-index: 1; display: grid; place-items: center; width: 3.5rem; height: 3.5rem; margin: -1.75rem 0 0 -1.75rem; border-radius: 999px; background: var(--orange); color: var(--navy-deep); box-shadow: 0 8px 20px -6px rgba(0, 0, 0, 0.5); transition: transform 0.25s var(--ease); }
.vcard__play .ico { margin-left: 3px; fill: currentColor; }
.vcard__poster:hover .vcard__play { transform: scale(1.08); }
.vcard__time { position: absolute; right: 0.625rem; bottom: 0.5rem; z-index: 1; padding: 0.125rem 0.5rem; border-radius: 6px; background: rgba(11, 36, 69, 0.82); color: #fff; font-size: 0.875rem; font-weight: 700; }
.vcard__dept { margin-top: 0.875rem; font-size: 0.875rem; font-weight: 800; color: var(--orange-light); }
.vcard__title { margin-top: 0.25rem; font-size: 1.0625rem; font-weight: 700; line-height: 1.45; color: #fff; }
@media (max-width: 960px) { .tv__track { --rail-w: calc((100% - 1.25rem) / 2.2); } }
@media (max-width: 640px) { .tv__track { --rail-w: 78%; --rail-gap: 0.875rem; } .tv__nav .rail-btn { display: none; } .tv__all { margin-left: 0; } }

/* ⑫ 진료 환경 띠 ---------------------------------------------------------- */
.fac { display: grid; grid-template-columns: 1fr 1fr; }
.fac__card { position: relative; display: flex; align-items: flex-end; min-height: clamp(18rem, 30vw, 26rem); padding: clamp(1.5rem, 3vw, 3rem); overflow: hidden; color: #fff; isolation: isolate; }
.fac__card img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.fac__card::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(11, 36, 69, 0) 0%, rgba(11, 36, 69, 0.3) 32%, rgba(11, 36, 69, 0.86) 58%, rgba(11, 36, 69, 0.94) 100%); }
.fac__card:hover img { transform: scale(1.04); }
.fac__txt { display: grid; gap: 0.25rem; }
.fac__en { font-size: 0.875rem; font-weight: 800; letter-spacing: 0.14em; color: var(--orange-light); }
.fac__txt b { font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); font-weight: 800; letter-spacing: -0.03em; }
.fac__txt > span:last-child { font-size: 0.9375rem; color: rgba(255, 255, 255, 0.86); }
@media (max-width: 720px) { .fac { grid-template-columns: minmax(0, 1fr); } }

/* ⑬ 소식 · 진료 시간 ------------------------------------------------------- */
.newsgrid { display: grid; grid-template-columns: minmax(0, 2.15fr) minmax(0, 1fr); gap: clamp(1rem, 2vw, 1.5rem); }
.newsbox { padding: clamp(1.25rem, 2.5vw, 2rem); border: 1px solid var(--c-line); border-radius: var(--radius-lg); }
.newsbox__head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.25rem; margin-bottom: 1.25rem; }
.newsbox__title { font-size: var(--fs-h3); font-weight: 800; }
.newsbox__more { display: inline-flex; align-items: center; gap: 0.25rem; min-height: 2.75rem; margin-left: auto; font-size: 0.9375rem; font-weight: 800; color: var(--navy); }
.seg { display: inline-flex; padding: 0.25rem; border-radius: 999px; background: var(--c-panel); gap: 0.125rem; }
.seg__tab { min-height: 2.75rem; padding: 0 1rem; border-radius: 999px; font-size: 0.9375rem; font-weight: 700; color: var(--c-mute); white-space: nowrap; transition: background-color 0.2s, color 0.2s; }
.seg__tab:hover { color: var(--navy); }
.seg__tab[aria-selected='true'] { background: #fff; color: var(--navy); font-weight: 800; box-shadow: 0 1px 3px rgba(11, 36, 69, 0.15); }
.nlist { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 1.5rem; }
.nfeat { display: grid; gap: 0.75rem; align-content: start; }
.nfeat__media { display: block; aspect-ratio: 16 / 10; border-radius: var(--radius); overflow: hidden; background: var(--c-panel); }
.nfeat__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s var(--ease); }
.nfeat:hover .nfeat__media img { transform: scale(1.04); }
.nfeat__body { display: grid; gap: 0.375rem; justify-items: start; }
.nfeat__title { font-size: 1.125rem; font-weight: 800; line-height: 1.45; color: var(--c-ink); }
.nfeat:hover .nfeat__title { color: var(--navy); text-decoration: underline; text-underline-offset: 4px; }
.nfeat__date, .nrows__d { font-size: 0.875rem; color: var(--c-mute); font-weight: 600; }
.nbadge { display: inline-flex; align-items: center; padding: 0.125rem 0.625rem; border-radius: 6px; background: var(--orange-soft); color: var(--orange-ink); font-size: 0.875rem; font-weight: 800; white-space: nowrap; }
.nbadge--press { background: var(--navy-soft); color: var(--navy); }
.nrows { border-top: 2px solid var(--c-ink); }
.nrows a { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 0.75rem; min-height: 3.5rem; padding: 0.5rem 0.25rem; border-bottom: 1px solid var(--c-line); transition: background-color 0.2s; }
.nrows a:hover { background: var(--c-panel); }
.nrows__tag { font-size: 0.875rem; font-weight: 800; color: var(--orange-ink); min-width: 2.5rem; }
.nrows__t { font-size: 0.9375rem; font-weight: 600; color: var(--c-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hourscard { display: flex; flex-direction: column; padding: clamp(1.5rem, 2.5vw, 2rem); border-radius: var(--radius-lg); background: var(--navy) radial-gradient(90% 70% at 100% 100%, rgba(240, 138, 36, 0.22), transparent 60%); color: rgba(255, 255, 255, 0.84); }
.hourscard__t { display: flex; align-items: center; gap: 0.5rem; font-size: 1.25rem; font-weight: 800; color: #fff; margin-bottom: 1rem; }
.hourscard__t .ico { color: var(--orange-light); }
.hourscard__note { margin-top: 0.75rem; font-size: 0.875rem; color: rgba(255, 255, 255, 0.76); }
.hourscard__tel { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-top: auto; padding-top: 1.25rem; border-top: 1px solid rgba(255, 255, 255, 0.18); }
.hourscard__tel span { font-size: 0.9375rem; font-weight: 700; }
.hourscard__tel b { font-size: 1.75rem; font-weight: 800; color: var(--orange-light); }
.hourscard__btns { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; margin-top: 1rem; }
@media (max-width: 1080px) { .newsgrid { grid-template-columns: minmax(0, 1fr); } .hourscard__tel { margin-top: 1.25rem; } }
@media (max-width: 720px) { .nlist { grid-template-columns: minmax(0, 1fr); } .newsbox__head { gap: 0.5rem; } .newsbox__more { margin-left: auto; } .seg { order: 3; width: 100%; } .seg__tab { flex: 1; } }

/* 진료 시간 표(공용) */
.hours { display: grid; }
.hours__row { display: flex; justify-content: space-between; gap: 1rem; padding: 0.625rem 0; border-bottom: 1px solid var(--c-line); font-size: 0.9375rem; }
.hours dt { font-weight: 700; color: var(--c-ink); }
.hours dd { font-weight: 700; color: var(--c-body); font-variant-numeric: tabular-nums; }
.hours--dark .hours__row { border-color: rgba(255, 255, 255, 0.16); }
.hours--dark dt { color: rgba(255, 255, 255, 0.78); font-weight: 600; }
.hours--dark dd { color: #fff; }
.hours--lg .hours__row { padding: 1rem 0; font-size: 1.0625rem; }
.hours__row:last-child dd { color: var(--orange-ink); }
.hours--dark .hours__row:last-child dd { color: var(--orange-light); }

/* ⑭ 푸터 ------------------------------------------------------------------ */
.hft { background: var(--navy-deep); color: var(--c-on-dark-3); font-size: 0.875rem; }
.hft__links { border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
.hft__links ul { display: flex; flex-wrap: wrap; gap: 0 0.25rem; }
.hft__links a, .hft__links button { display: inline-flex; align-items: center; min-height: 3.25rem; padding: 0 0.875rem 0 0; margin-right: 0.625rem; color: rgba(255, 255, 255, 0.82); font-size: 0.875rem; font-weight: 600; }
.hft__links b { color: var(--orange-light); font-weight: 800; }
.hft__links a:hover, .hft__links button:hover { color: #fff; }
.hft__main { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr); gap: 2.5rem; padding-block: clamp(2.5rem, 5vw, 3.5rem); }
.hft__info { margin-top: 1.25rem; display: grid; gap: 0.25rem; line-height: 1.7; }
.hft__h { font-size: 0.9375rem; font-weight: 800; color: #fff; margin-bottom: 0.5rem; }
.hft__hours .hours__row { padding: 0.375rem 0; font-size: 0.875rem; }
.hft__tel { font-size: clamp(1.875rem, 1.4rem + 1.2vw, 2.5rem); font-weight: 800; color: #fff; line-height: 1.1; letter-spacing: -0.01em; }
.hft__btns { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1rem; }
.hft__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.75rem 2rem; padding-block: 1.5rem calc(5.5rem + var(--tabbar-h)); border-top: 1px solid rgba(255, 255, 255, 0.1); }
.hft__demo { max-width: 46em; color: rgba(255, 255, 255, 0.72); }
@media (max-width: 960px) { .hft__main { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .hft__brand { grid-column: 1 / -1; } }
@media (max-width: 560px) { .hft__main { grid-template-columns: minmax(0, 1fr); gap: 2rem; } }

/* ⑮ 퀵메뉴(데스크톱) · 하단 탭 바(모바일) · 표식 --------------------------- */
.quick { position: fixed; right: 0; top: 50%; z-index: 90; display: flex; flex-direction: column; align-items: flex-end; transform: translateY(-50%); filter: drop-shadow(0 12px 24px rgba(11, 36, 69, 0.28)); }
.quick__toggle { display: flex; align-items: center; justify-content: center; gap: 0.25rem; width: 5rem; min-height: 2.75rem; border-radius: 12px 0 0 0; background: var(--navy-deep); color: #fff; font-size: 0.875rem; font-weight: 800; }
.quick__toggle .ico { transition: transform 0.25s var(--ease); }
.quick__list { display: flex; flex-direction: column; width: 5rem; background: var(--navy); border-radius: 0 0 0 12px; overflow: hidden; }
.quick__a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.25rem; width: 100%; min-height: 4.25rem; padding: 0.5rem 0.25rem; color: #fff; font-size: 0.875rem; font-weight: 700; line-height: 1.3; text-align: center; border-top: 1px solid rgba(255, 255, 255, 0.1); transition: background-color 0.2s; }
.quick li:first-child .quick__a { border-top: 0; }
.quick__a:hover { background: var(--navy-2); }
.quick li:nth-child(2) .quick__a { background: var(--orange); color: var(--navy-deep); }
.quick li:nth-child(2) .quick__a:hover { background: var(--orange-hi); }
.quick__a--kakao .ico { color: #fee500; }
.quick__top { min-height: 3.25rem; flex-direction: row; background: var(--navy-deep); }
.js .quick:not(.is-open) .quick__list { display: none; }
.js .quick:not(.is-open) .quick__toggle { width: 2.75rem; min-height: 7.5rem; flex-direction: column; border-radius: 12px 0 0 12px; writing-mode: vertical-rl; letter-spacing: 0.08em; }
.js .quick:not(.is-open) .quick__toggle .ico { transform: rotate(180deg); }
.js .quick:not(.is-open) .quick__tg-txt { writing-mode: vertical-rl; }
@media (max-width: 880px) { .quick { display: none; } }

.tabbar { display: none; }
@media (max-width: 880px) {
  .tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 95; display: block; background: #fff; border-top: 1px solid var(--c-line); box-shadow: 0 -8px 24px -12px rgba(11, 36, 69, 0.25); padding-bottom: env(safe-area-inset-bottom); }
  .tabbar ul { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); height: var(--tabbar-h); }
  .tabbar a, .tabbar button { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.125rem; width: 100%; height: 100%; font-size: 0.875rem; font-weight: 700; color: var(--c-body); }
  .tabbar a[aria-current] { color: var(--navy); font-weight: 800; }
  .tabbar a[aria-current]::before { content: ''; position: absolute; left: 25%; right: 25%; top: 0; height: 3px; border-radius: 0 0 3px 3px; background: var(--orange); }
  .tabbar__call { background: var(--navy); color: #fff !important; }
  .tabbar__call .ico { color: var(--orange-light); }
  /* 샘플 표식은 탭 바 위로 · 알림도 그 위로 */
  .hg .toast { bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom) + 4.5rem); }
}

/* ⑯ 하위 지면 첫 화면 · 탭 ------------------------------------------------- */
.ph { position: relative; display: flex; align-items: flex-end; min-height: clamp(17rem, 30vw, 22rem); color: #fff; overflow: hidden; isolation: isolate; background: var(--navy-deep); }
.ph__media { position: absolute; inset: 0; z-index: -2; }
.ph__media img { width: 100%; height: 100%; object-fit: cover; }
.ph::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(11, 36, 69, 0.94) 0%, rgba(18, 58, 107, 0.8) 42%, rgba(18, 58, 107, 0.35) 100%); }
.ph__inner { padding-block: 2.5rem 2.75rem; }
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem; margin-bottom: 1.5rem; font-size: 0.875rem; font-weight: 600; color: rgba(255, 255, 255, 0.8); }
.crumbs li { display: inline-flex; align-items: center; }
.crumbs li + li::before { content: ''; width: 0.4rem; height: 0.4rem; margin: 0 0.625rem 0 0.25rem; border-top: 1.5px solid currentColor; border-right: 1.5px solid currentColor; transform: rotate(45deg); opacity: 0.7; }
.crumbs a { display: inline-flex; align-items: center; min-height: 2.75rem; }
.crumbs li:first-child a { min-width: 2.75rem; justify-content: flex-start; }
.crumbs a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.crumbs [aria-current] { color: #fff; font-weight: 800; }
.ph__eyebrow { font-size: 0.875rem; font-weight: 800; letter-spacing: 0.14em; color: var(--orange-light); margin-bottom: 0.625rem; }
.ph__title { font-size: var(--fs-h1); font-weight: 800; line-height: 1.25; color: #fff; }
.ph__lead { margin-top: 0.875rem; max-width: 38em; font-size: var(--fs-lead); font-weight: 600; color: rgba(255, 255, 255, 0.88); line-height: 1.7; }
.hg .lnb, .anav { background: #fff; border-bottom: 1px solid var(--c-line); position: sticky; top: var(--hd-h); z-index: 50; transition: top 0.4s var(--ease); }
/* 헤더가 숨으면 탭도 맨 위로(빈틈 방지). 탭 줄이 둘인 지면(LNB + 지면 안 위치 탭)은 아래 것 하나만 붙어 다닌다. */
html.hd-hidden .hg .lnb, html.hd-hidden .hg .anav { top: 0; }
.hg .lnb:has(+ .anav) { position: relative; top: auto; z-index: 1; }
.anav { background: var(--c-panel); }
.hg .lnb__list, .anav__list { display: flex; justify-content: center; gap: 0; overflow-x: auto; scrollbar-width: none; }
.anav__list::-webkit-scrollbar { display: none; }
.hg .lnb__link, .anav__list a { position: relative; display: flex; align-items: center; min-height: 3.5rem; padding-inline: clamp(0.875rem, 1.6vw, 1.5rem); font-size: 0.9375rem; font-weight: 700; color: var(--c-mute); white-space: nowrap; transition: color 0.2s; }
.hg .lnb__link:hover, .anav__list a:hover { color: var(--navy); }
.hg .lnb__link[aria-current] { color: var(--navy); font-weight: 800; }
.hg .lnb__link[aria-current]::after { height: 3px; background: var(--orange); border-radius: 3px 3px 0 0; }
.anav__list a.is-on { color: var(--navy); font-weight: 800; }
.anav__list a.is-on::after { content: ''; position: absolute; left: 0.75rem; right: 0.75rem; bottom: -1px; height: 3px; border-radius: 3px 3px 0 0; background: var(--orange); }
@media (max-width: 880px) { .hg .lnb__list, .anav__list { justify-content: flex-start; } .ph__inner { padding-block: 2rem 2.25rem; } .crumbs { margin-bottom: 1rem; } }

/* ⑰ 진료과 지면 ----------------------------------------------------------- */
.dintro { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.dintro__title { margin: 0.75rem 0 1.5rem; font-size: var(--fs-h2); font-weight: 800; line-height: 1.3; }
.dintro__text p:not(.eyebrow) { font-size: var(--fs-lead); line-height: 1.85; color: var(--c-body); }
.dintro__text p + p { margin-top: 1rem; }
.dintro__fig { border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 5 / 4; background: var(--c-panel); }
.dintro__fig img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 880px) { .dintro { grid-template-columns: minmax(0, 1fr); } .dintro__fig { order: -1; aspect-ratio: 16 / 10; } }
.symp { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem; }
.symp li { display: flex; align-items: center; gap: 0.75rem; min-height: 4.5rem; padding: 1rem 1.25rem; border-radius: var(--radius); background: #fff; border: 1px solid var(--c-line); font-size: 1rem; font-weight: 700; color: var(--c-ink); line-height: 1.45; }
.symp .ico { color: var(--orange); flex-shrink: 0; }
@media (max-width: 960px) { .symp { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .symp { grid-template-columns: minmax(0, 1fr); } }
.conds { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.cond { padding: 1.5rem 1.5rem 1.75rem; border-top: 3px solid var(--navy); background: var(--c-panel); border-radius: 0 0 var(--radius) var(--radius); }
.cond__no { font-size: 0.9375rem; font-weight: 800; color: var(--orange-ink); }
.cond__title { margin-top: 0.5rem; font-size: var(--fs-h4); font-weight: 800; color: var(--c-ink); line-height: 1.4; }
.cond__title small { display: block; font-size: 0.875rem; font-weight: 600; color: var(--c-mute); letter-spacing: 0; }
.cond__desc { margin-top: 0.625rem; font-size: 0.9375rem; color: var(--c-body); line-height: 1.7; }
@media (max-width: 960px) { .conds { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .conds { grid-template-columns: minmax(0, 1fr); } }
.flow { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.75rem; counter-reset: flow; }
.flow--6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.flow__step { position: relative; padding: 1.375rem 1.25rem 1.5rem; border-radius: var(--radius); background: #fff; border: 1px solid var(--c-line); }
.flow__step::after { content: ''; position: absolute; right: -0.55rem; top: 50%; z-index: 1; width: 0.75rem; height: 0.75rem; border-top: 2px solid var(--c-line-strong); border-right: 2px solid var(--c-line-strong); transform: translateY(-50%) rotate(45deg); background: transparent; }
.flow__step:last-child::after { display: none; }
.flow__no { display: block; font-size: 0.875rem; font-weight: 800; letter-spacing: 0.06em; color: var(--orange-ink); }
.flow__step b { display: block; margin-top: 0.5rem; font-size: 1.0625rem; font-weight: 800; color: var(--c-ink); }
.flow__step p { margin-top: 0.375rem; font-size: 0.9375rem; color: var(--c-body); line-height: 1.6; }
@media (max-width: 1080px) { .flow, .flow--6 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .flow__step::after { display: none; } }
@media (max-width: 640px) { .flow, .flow--6 { grid-template-columns: minmax(0, 1fr); } }
.treats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.75rem; margin-top: 1.5rem; }
.treat { display: flex; gap: 0.875rem; padding: 1.25rem; border-radius: var(--radius); background: var(--navy); color: rgba(255, 255, 255, 0.82); }
.treat__ico { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 10px; background: rgba(255, 255, 255, 0.1); color: var(--orange-light); flex-shrink: 0; }
.treat b { display: block; font-size: 1.0625rem; font-weight: 800; color: #fff; }
.treat p { margin-top: 0.25rem; font-size: 0.9375rem; line-height: 1.6; }
@media (max-width: 1080px) { .treats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .treats { grid-template-columns: minmax(0, 1fr); } }
.mini-drs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
@media (max-width: 760px) { .mini-drs { grid-template-columns: minmax(0, 1fr); } }
.mini-dr { display: flex; align-items: center; gap: 1.25rem; padding: 1rem; border: 1px solid var(--c-line); border-radius: var(--radius-lg); transition: border-color 0.2s, box-shadow 0.3s; }
.mini-dr:hover { border-color: var(--navy); box-shadow: var(--shadow); }
.mini-dr__media { width: 7.5rem; aspect-ratio: 4 / 5; border-radius: var(--radius); overflow: hidden; flex-shrink: 0; background: var(--c-panel); }
.mini-dr__media .dr-pic { width: 100%; height: 100%; }
.mini-dr__body { display: grid; gap: 0.25rem; }
.mini-dr__major { font-size: 0.875rem; font-weight: 800; color: var(--orange-ink); }
.mini-dr b { font-size: 1.25rem; font-weight: 800; color: var(--c-ink); }
.mini-dr b small { font-size: 0.9375rem; font-weight: 700; color: var(--c-body); }
.mini-dr__focus { font-size: 0.9375rem; color: var(--c-body); }

/* CTA 띠 */
.ctab { background: var(--navy-deep) radial-gradient(60% 120% at 100% 0%, rgba(240, 138, 36, 0.24), transparent 60%); color: rgba(255, 255, 255, 0.82); }
.ctab__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem 2rem; padding-block: clamp(2.5rem, 5vw, 3.75rem); }
.ctab__title { font-size: var(--fs-h3); font-weight: 800; color: #fff; }
.ctab__desc { margin-top: 0.375rem; font-size: 0.9375rem; }
.ctab__btns { display: flex; flex-wrap: wrap; gap: 0.625rem; }
@media (max-width: 560px) { .ctab__btns { width: 100%; } .ctab__btns .hbtn { flex: 1; } }

/* ⑱ 병원 소개 -------------------------------------------------------------- */
.greet { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.greet__fig { position: relative; border-radius: var(--radius-lg); overflow: hidden; background: var(--navy-soft); }
.greet__fig .dr-pic { width: 100%; aspect-ratio: 4 / 5; }
.greet__fig figcaption { position: absolute; left: 1rem; bottom: 1rem; padding: 0.5rem 0.875rem; border-radius: 8px; background: rgba(11, 36, 69, 0.86); color: #fff; font-size: 0.9375rem; font-weight: 800; }
.greet__fig small { font-size: 0.875rem; font-weight: 600; color: rgba(255, 255, 255, 0.8); }
.greet__title { margin: 0.75rem 0 1.5rem; font-size: var(--fs-h2); font-weight: 800; line-height: 1.3; }
.greet__text > p:not(.eyebrow):not(.greet__sign) { font-size: var(--fs-lead); line-height: 1.9; color: var(--c-body); }
.greet__text > p + p { margin-top: 1rem; }
.greet__sign { margin-top: 2rem !important; font-size: 1rem; color: var(--c-mute); font-weight: 600; }
.greet__sign b { margin-left: 0.375rem; font-size: 1.25rem; font-weight: 800; color: var(--c-ink); }
@media (max-width: 880px) { .greet { grid-template-columns: minmax(0, 1fr); } .greet__fig { max-width: 17rem; } }
.princ { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.princ__card { position: relative; padding: 2rem 1.75rem; border-radius: var(--radius-lg); background: #fff; border: 1px solid var(--c-line); }
.princ__no { position: absolute; right: 1.5rem; top: 1.25rem; font-size: 2.5rem; font-weight: 800; color: var(--navy-soft); line-height: 1; }
.princ__ico { display: grid; place-items: center; width: 3.5rem; height: 3.5rem; border-radius: 14px; background: var(--navy); color: var(--orange-light); margin-bottom: 1.5rem; }
.princ__card h3 { font-size: var(--fs-h3); font-weight: 800; }
.princ__card p:last-child { margin-top: 0.625rem; font-size: 0.9375rem; line-height: 1.75; color: var(--c-body); }
@media (max-width: 880px) { .princ { grid-template-columns: minmax(0, 1fr); } }
.facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 2px solid var(--c-ink); border-bottom: 1px solid var(--c-line); }
.facts__item { padding: 2rem 1.5rem; text-align: center; }
.facts__item + .facts__item { border-left: 1px solid var(--c-line); }
.facts dt { font-size: 0.9375rem; font-weight: 700; color: var(--c-mute); }
.facts dd { margin-top: 0.375rem; font-size: 1.125rem; font-weight: 700; color: var(--c-body); }
.facts dd .num { font-size: clamp(2.25rem, 1.6rem + 2vw, 3.25rem); font-weight: 800; color: var(--navy); margin-right: 0.25rem; letter-spacing: -0.02em; }
.facts__note { margin-top: 0.75rem; font-size: 0.875rem; color: var(--c-mute); text-align: right; }
@media (max-width: 720px) { .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } .facts__item:nth-child(3) { border-left: 0; } .facts__item:nth-child(n+3) { border-top: 1px solid var(--c-line); } }
.floors { border-top: 2px solid var(--c-ink); background: #fff; border-radius: 0 0 var(--radius) var(--radius); overflow: hidden; }
.floors__row { display: grid; grid-template-columns: 7rem minmax(0, 1fr); align-items: center; min-height: 3.75rem; border-bottom: 1px solid var(--c-line); }
.floors__f { display: grid; place-items: center; align-self: stretch; background: var(--navy-soft); font-size: 1.125rem; font-weight: 800; color: var(--navy); }
.floors__t { padding: 0.75rem 1.5rem; font-size: 1rem; font-weight: 600; color: var(--c-body); }
.floors__row.is-hl .floors__f { background: var(--navy); color: #fff; }
.floors__row.is-hl .floors__t { color: var(--c-ink); font-weight: 800; }
@media (max-width: 560px) { .floors__row { grid-template-columns: 4.5rem minmax(0, 1fr); } .floors__t { padding: 0.75rem 1rem; } }
.facg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.facg__item { position: relative; border-radius: var(--radius-lg); overflow: hidden; background: var(--c-panel); aspect-ratio: 3 / 2; }
.facg__item--lg { grid-column: span 2; grid-row: span 2; aspect-ratio: auto; }
.facg__item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.9s var(--ease); }
.facg__item:hover img { transform: scale(1.04); }
.facg__item figcaption { position: absolute; left: 0; right: 0; bottom: 0; display: grid; gap: 0.125rem; padding: 3rem 1.25rem 1rem; background: linear-gradient(rgba(11, 36, 69, 0), rgba(11, 36, 69, 0.82) 48%, rgba(11, 36, 69, 0.94)); color: rgba(255, 255, 255, 0.9); font-size: 0.875rem; font-weight: 600; }
.facg__item figcaption b { font-size: 1.0625rem; font-weight: 800; color: #fff; }
@media (max-width: 880px) { .facg { grid-template-columns: repeat(2, minmax(0, 1fr)); } .facg__item--lg { grid-column: 1 / -1; grid-row: auto; aspect-ratio: 16 / 10; } }
@media (max-width: 480px) { .facg { grid-template-columns: minmax(0, 1fr); } }

/* ⑲ 오시는 길 -------------------------------------------------------------- */
.loc { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 1.25rem; align-items: stretch; }
.loc__map { position: relative; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--c-line); background: #eef2f7; }
.loc__map picture { display: block; height: 100%; }
.loc__map img { width: 100%; height: 100%; min-height: 22rem; object-fit: contain; }
.loc__map figcaption { position: absolute; left: 0.75rem; bottom: 0.75rem; padding: 0.375rem 0.75rem; border-radius: 6px; background: rgba(255, 255, 255, 0.92); font-size: 0.875rem; font-weight: 600; color: var(--c-mute); }
.loc__card { display: flex; flex-direction: column; gap: 0.875rem; padding: clamp(1.5rem, 2.5vw, 2rem); border-radius: var(--radius-lg); background: var(--c-panel); }
.loc__name { font-size: var(--fs-h3); font-weight: 800; color: var(--c-ink); }
.loc__addr, .loc__tel { display: flex; gap: 0.625rem; font-size: 1rem; font-weight: 600; color: var(--c-body); line-height: 1.55; }
.loc__addr .ico, .loc__tel .ico { color: var(--navy); margin-top: 0.1rem; }
.loc__tel b { color: var(--navy); font-weight: 800; }
.loc__btns { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.loc__hours { margin-top: 0.5rem; }
.loc__h { font-size: 0.9375rem; font-weight: 800; color: var(--c-ink); margin-bottom: 0.25rem; }
@media (max-width: 880px) { .loc { grid-template-columns: minmax(0, 1fr); } .loc__map img { height: auto; min-height: 0; aspect-ratio: 720 / 580; } }
.trans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.trans__item { display: flex; gap: 1.25rem; padding: 1.5rem; border-radius: var(--radius-lg); background: #fff; border: 1px solid var(--c-line); }
.trans__ico { display: grid; place-items: center; width: 3.25rem; height: 3.25rem; border-radius: 12px; background: var(--navy-soft); color: var(--navy); flex-shrink: 0; }
.trans__item h3 { font-size: var(--fs-h4); font-weight: 800; margin-bottom: 0.375rem; }
.trans__item p { font-size: 0.9375rem; line-height: 1.65; color: var(--c-ink); font-weight: 600; }
.trans__item p.muted { color: var(--c-mute); font-weight: 500; }
@media (max-width: 720px) { .trans { grid-template-columns: minmax(0, 1fr); } }

/* ⑳ 의료진 지면 ----------------------------------------------------------- */
.hg .sec.drsec + .sec.drsec { padding-top: 0; }
.drsec__head { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.5rem 1.5rem; padding-bottom: 1.25rem; margin-bottom: 1.5rem; border-bottom: 2px solid var(--c-ink); }
.drsec__head .eyebrow { width: 100%; }
.drsec__title { font-size: var(--fs-h2); font-weight: 800; }
.drsec__head .link-more { margin-left: auto; }
.drcards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
.drcard { display: grid; grid-template-columns: 12.5rem minmax(0, 1fr); gap: 1.5rem; align-items: start; padding: 1.5rem; border: 1px solid var(--c-line); border-radius: var(--radius-lg); overflow: hidden; background: #fff; scroll-margin-top: calc(var(--hd-h) + 5rem); }
.drcard:target { border-color: var(--orange); box-shadow: 0 0 0 3px rgba(240, 138, 36, 0.35); }
.drcard__media { border-radius: var(--radius); overflow: hidden; background: var(--navy-soft); }
.drcard__media .dr-pic { width: 100%; aspect-ratio: 4 / 5; }
.drcard__body { display: flex; flex-direction: column; align-items: flex-start; padding: 0.25rem 0 0.25rem; }
.drcard__major { font-size: 0.875rem; font-weight: 800; color: var(--orange-ink); }
.drcard__name { margin-top: 0.25rem; font-size: 1.625rem; font-weight: 800; }
.drcard__name span { font-size: 1.0625rem; font-weight: 700; color: var(--c-body); }
.drcard__k { margin-top: 1rem; font-size: 0.875rem; font-weight: 800; color: var(--c-mute); }
.drcard .drf__focus { margin-top: 0.375rem; }
.drcard .drf__focus li { background: var(--navy-soft); border-color: transparent; }
.drcard__career { margin-top: 0.375rem; display: grid; gap: 0.125rem; font-size: 0.9375rem; color: var(--c-body); }
.wkg { display: grid; gap: 0.25rem; width: 100%; margin: 1.25rem 0; }
.wkg__row { display: grid; grid-template-columns: 2.75rem repeat(6, minmax(0, 1fr)); gap: 0.25rem; align-items: center; text-align: center; }
.wkg__head span { font-size: 0.875rem; font-weight: 800; color: var(--c-ink); }
.wkg__ap { font-size: 0.875rem; font-weight: 700; color: var(--c-mute); text-align: left; }
.wkg .sch { min-width: 0; width: 100%; padding: 0; }
.drcard .hbtn { margin-top: auto; }
@media (max-width: 1080px) { .drcards { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) { .drcard { grid-template-columns: minmax(0, 1fr); } }
.sch { display: inline-grid; place-items: center; min-width: 2.5rem; min-height: 1.75rem; padding: 0 0.375rem; border-radius: 6px; font-size: 0.875rem; font-weight: 800; }
.sch--on { background: var(--navy); color: #fff; }
.sch--op { background: var(--orange-soft); color: var(--orange-ink); }
.sch--alt { background: var(--navy-soft); color: var(--navy); }
.sch--off { background: transparent; color: var(--c-mute); }
.sch-legend { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; margin-bottom: 1rem; font-size: 0.875rem; font-weight: 600; color: var(--c-body); }
.sch-legend li { display: inline-flex; align-items: center; gap: 0.5rem; }
.sched-wrap, .tbl-wrap { overflow-x: auto; border-radius: var(--radius); -webkit-overflow-scrolling: touch; }
/* 좁은 화면: 시간표는 의료진별 카드, 서류·비급여 표는 행마다 한 덩어리로(가로로 밀어야 보이는 칸이 없게) */
.sched-cards { display: none; }
@media (max-width: 720px) {
  .sched-wrap { display: none; }
  .sched-cards { display: grid; gap: 0.75rem; }
  .schc { padding: 1rem 1rem 0.25rem; border-radius: var(--radius); background: #fff; border: 1px solid var(--c-line); }
  .schc__name { display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem; font-weight: 800; color: var(--c-ink); }
  .schc__name a { display: inline-flex; align-items: center; min-height: 2.75rem; color: var(--navy); }
  .schc__name small { font-size: 0.875rem; font-weight: 600; color: var(--c-mute); }
  .schc .wkg { margin: 0.25rem 0 0.75rem; }
}
.sched { width: 100%; min-width: 44rem; border-collapse: collapse; background: #fff; font-size: 0.9375rem; }
.sched th, .sched td { padding: 0.625rem 0.5rem; border-bottom: 1px solid var(--c-line); text-align: center; }
.sched thead th { background: var(--navy); color: #fff; font-weight: 800; }
.sched tbody th { text-align: left; padding-left: 1rem; font-weight: 800; color: var(--c-ink); border-right: 1px solid var(--c-line); }
.sched tbody th a { display: inline-flex; min-height: 2.75rem; align-items: center; color: var(--navy); text-decoration: underline; text-underline-offset: 3px; }
.sched tbody th small { display: block; font-size: 0.875rem; font-weight: 600; color: var(--c-mute); }
.sched__ap { font-weight: 700; color: var(--c-mute); }
.sched tr:not(.is-pm) td, .sched tr:not(.is-pm) th { border-bottom-style: dashed; }
.sched tr.is-pm td { background: #fafbfd; }

/* ㉑ 이용 안내 ------------------------------------------------------------- */
.ghours { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: center; }
.ghours__card { padding: clamp(1.25rem, 2.5vw, 2rem); border-radius: var(--radius-lg); border: 1px solid var(--c-line); box-shadow: var(--shadow); }
.ghours__tel { display: flex; align-items: center; gap: 0.625rem; margin-top: 1.25rem; font-weight: 700; color: var(--c-body); }
.ghours__tel .ico { color: var(--navy); }
.ghours__tel b { font-size: 1.375rem; font-weight: 800; color: var(--navy); margin-left: 0.25rem; }
@media (max-width: 880px) { .ghours { grid-template-columns: minmax(0, 1fr); } }
/* 절 머리 사진 — 표·목록만 이어지는 절(처음 오시는 분·증명서·비급여·FAQ)이 글만으로 몇 화면씩 가지 않게 한다(표준 §6.5). */
/* 진료 시간: 넓은 화면은 왼쪽에 제목·사진, 오른쪽에 시간표. 좁은 화면은 제목 → 시간표 → 사진(사진 없는 구간을 나눈다). */
.ghours { grid-template-areas: 'head card' 'fig card'; row-gap: 1.5rem; }
.ghours__head { grid-area: head; align-self: end; }
.ghours__head .h2blk { margin-bottom: 0; }
.ghours__fig { grid-area: fig; align-self: start; border-radius: var(--radius-lg); overflow: hidden; background: var(--c-panel); }
.ghours__fig img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.ghours__card { grid-area: card; }
@media (max-width: 880px) { .ghours { grid-template-areas: 'head' 'card' 'fig'; } }
/* 처음 오시는 분: 준비물 상자 옆에 사진. 좁은 화면은 사진을 준비물 위로 올려 6단계 흐름 바로 뒤에 둔다. */
.gfirst { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 1.5rem; margin-top: 1.5rem; align-items: start; }
.gfirst .bring { margin-top: 0; }
@media (max-width: 880px) { .gfirst { grid-template-columns: minmax(0, 1fr); } .gfirst__fig { order: -1; } }
.ghead { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: end; margin-bottom: clamp(1.75rem, 1.2rem + 1.5vw, 2.75rem); }
.ghead .h2blk { margin-bottom: 0; }
.ghead__fig { border-radius: var(--radius-lg); overflow: hidden; background: var(--c-panel); }
.ghead__fig img { width: 100%; aspect-ratio: 21 / 9; object-fit: cover; }
.ghead__fig figcaption { padding: 0.625rem 1rem; font-size: 0.875rem; font-weight: 700; line-height: 1.5; color: var(--c-mute); background: var(--c-panel); }
.sec--panel .ghead__fig figcaption { background: #fff; }
@media (max-width: 880px) { .ghead { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; align-items: start; } .ghead__fig img { aspect-ratio: 16 / 9; } }
.bring { margin-top: 1.5rem; padding: 1.5rem 1.75rem; border-radius: var(--radius-lg); background: #fff; border: 1px dashed var(--c-line-strong); }
.bring__t { display: flex; align-items: center; gap: 0.5rem; font-size: 1.125rem; font-weight: 800; color: var(--c-ink); margin-bottom: 0.75rem; }
.bring__t .ico { color: var(--orange); }
.bring ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.375rem 2rem; }
.bring li { position: relative; padding-left: 1rem; font-size: 0.9375rem; color: var(--c-body); font-weight: 600; }
.bring li::before { content: ''; position: absolute; left: 0; top: 0.7em; width: 5px; height: 5px; border-radius: 50%; background: var(--navy); }
@media (max-width: 640px) { .bring ul { grid-template-columns: minmax(0, 1fr); } }
.gward { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.gward__fig { border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 4 / 3; background: var(--c-panel); }
.gward__fig img { width: 100%; height: 100%; object-fit: cover; }
.gward .h2blk { margin-bottom: 1rem; }
.gward__p { font-size: var(--fs-lead); line-height: 1.85; color: var(--c-body); }
.gward__list { display: grid; margin-top: 1.5rem; border-top: 2px solid var(--c-ink); }
.gward__list div { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: 1rem; padding: 0.875rem 0; border-bottom: 1px solid var(--c-line); font-size: 0.9375rem; }
.gward__list dt { font-weight: 800; color: var(--navy); }
.gward__list dd { color: var(--c-body); font-weight: 600; }
@media (max-width: 880px) { .gward { grid-template-columns: minmax(0, 1fr); } }
.tbl { width: 100%; min-width: 36rem; border-collapse: collapse; background: #fff; font-size: 0.9375rem; }
.tbl th, .tbl td { padding: 1rem 1.25rem; border-bottom: 1px solid var(--c-line); text-align: left; line-height: 1.55; }
.tbl thead th { background: var(--navy); color: #fff; font-weight: 800; }
.tbl tbody th { font-weight: 800; color: var(--c-ink); }
.tbl td { color: var(--c-body); font-weight: 500; }
.tbl__fee { color: var(--c-mute) !important; font-weight: 700 !important; }
.gdocs__btns { margin-top: 1.25rem; }
.faq { display: grid; gap: 0.625rem; }
.faq__item { border-radius: var(--radius); background: #fff; border: 1px solid var(--c-line); overflow: hidden; }
.faq__item summary { display: flex; align-items: center; gap: 1rem; min-height: 4rem; padding: 0.75rem 1.25rem; cursor: pointer; list-style: none; font-size: 1.0625rem; font-weight: 800; color: var(--c-ink); }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary .ico { margin-left: auto; color: var(--navy); transition: transform 0.25s var(--ease); flex-shrink: 0; }
.faq__item[open] summary .ico { transform: rotate(180deg); }
.faq__item[open] summary { color: var(--navy); }
.faq__q { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 999px; background: var(--navy); color: #fff; font-size: 0.9375rem; font-weight: 800; flex-shrink: 0; }
.faq__qt { flex: 1; min-width: 0; }
.faq__a { padding: 0 1.25rem 1.25rem 4.25rem; }
.faq__a p { font-size: 0.9375rem; line-height: 1.8; color: var(--c-body); }
@media (max-width: 560px) { .faq__a { padding-left: 1.25rem; } }

/* ㉒ 예약·상담 ------------------------------------------------------------- */
.ways { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.ways a, .ways button { display: grid; justify-items: start; gap: 0.375rem; width: 100%; height: 100%; padding: 1.5rem; border-radius: var(--radius-lg); border: 1px solid var(--c-line); background: #fff; text-align: left; transition: border-color 0.2s, box-shadow 0.3s, transform 0.3s var(--ease); }
.ways a:hover, .ways button:hover { border-color: var(--navy); box-shadow: var(--shadow); transform: translateY(-3px); }
.ways .ico { color: var(--orange-ink); margin-bottom: 0.5rem; }
.ways b { font-size: 1.1875rem; font-weight: 800; color: var(--c-ink); }
.ways b .num { color: var(--navy); }
.ways span:not(.num) { font-size: 0.9375rem; color: var(--c-mute); line-height: 1.55; }
@media (max-width: 880px) { .ways { grid-template-columns: minmax(0, 1fr); } }
.rsv { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); gap: 1.5rem; align-items: start; }
.rsv__form { padding: clamp(1.5rem, 3vw, 2.5rem); border-radius: var(--radius-lg); border: 1px solid var(--c-line); box-shadow: var(--shadow); scroll-margin-top: calc(var(--hd-h) + 1rem); }
.rsv__title { font-size: var(--fs-h3); font-weight: 800; }
.rsv__note { margin-top: 0.375rem; font-size: 0.9375rem; color: var(--c-mute); }
.rsv__set { margin: 1.75rem 0 0; padding: 0; border: 0; }
.rsv__set legend { padding: 0 0 0.75rem; font-size: 1.0625rem; font-weight: 800; color: var(--navy); }
.rsv__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; padding-top: 1rem; border-top: 2px solid var(--c-ink); }
.rsv__foot { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-top: 1.75rem; padding-top: 1.25rem; border-top: 1px solid var(--c-line); }
.rsv__submit { min-height: 3.5rem; padding: 0 2rem; font-size: 1.0625rem; }
.rsv__side { display: grid; gap: 1rem; position: sticky; top: calc(var(--hd-h) + 1.5rem); }
.rsv__quick { display: grid; gap: 0.75rem; padding: 1.5rem; border-radius: var(--radius-lg); background: var(--navy-soft); scroll-margin-top: calc(var(--hd-h) + 1rem); }
.rsv__qt { display: flex; align-items: center; gap: 0.5rem; font-size: 1.25rem; font-weight: 800; }
.rsv__qt .ico { color: var(--orange-ink); }
.rsv__qd { font-size: 0.9375rem; color: var(--c-body); margin-top: -0.25rem; }
.rsv__info { display: grid; gap: 0.75rem; padding: 1.5rem; border-radius: var(--radius-lg); border: 1px solid var(--c-line); }
.rsv__it { display: flex; align-items: center; gap: 0.5rem; font-size: 1.0625rem; font-weight: 800; color: var(--c-ink); }
.rsv__it .ico { color: var(--navy); }
@media (max-width: 960px) { .rsv { grid-template-columns: minmax(0, 1fr); } .rsv__side { position: static; } }
@media (max-width: 560px) { .rsv__grid { grid-template-columns: minmax(0, 1fr); } .rsv__submit { width: 100%; } }

/* ㉓ 소식 게시판 ----------------------------------------------------------- */
.board-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.5rem; }
.seg--lg .seg__tab { padding: 0 1.25rem; font-size: 1rem; }
.bsearch { position: relative; width: min(20rem, 100%); }
.bsearch__input { padding-right: 2.75rem !important; border-radius: 999px !important; }
.bsearch__ico { position: absolute; right: 1rem; top: 50%; transform: translateY(-50%); color: var(--c-mute); pointer-events: none; }
.board-list { border-top: 2px solid var(--c-ink); }
.bitem { border-bottom: 1px solid var(--c-line); }
.bitem summary { display: grid; grid-template-columns: 3rem 7.5rem auto minmax(0, 1fr) auto auto; align-items: center; gap: 1rem; min-height: 4.25rem; padding: 0.875rem 0.5rem; cursor: pointer; list-style: none; transition: background-color 0.2s; }
/* 목록 썸네일 — 사진이 없는 글은 같은 크기의 아이콘 타일 */
.bitem__thumb { display: block; width: 7.5rem; aspect-ratio: 3 / 2; border-radius: var(--radius); overflow: hidden; background: var(--navy-soft); }
.bitem__thumb .bitem__img { width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; border-radius: 0; transition: transform 0.6s var(--ease); }
.bitem summary:hover .bitem__img { transform: scale(1.05); }
.bitem__ph { display: grid; place-items: center; width: 100%; height: 100%; color: var(--navy); background: var(--navy-soft) radial-gradient(80% 90% at 100% 0%, rgba(240, 138, 36, 0.18), transparent 60%); }
.bitem summary::-webkit-details-marker { display: none; }
.bitem summary:hover { background: var(--c-panel); }
.bitem summary > .ico { color: var(--c-mute); transition: transform 0.25s var(--ease); }
.bitem details[open] summary > .ico { transform: rotate(180deg); }
.bitem details[open] summary .bitem__t { color: var(--navy); }
.bitem__no { font-size: 0.9375rem; font-weight: 700; color: var(--c-mute); text-align: center; }
.bitem__t { font-size: 1.0625rem; font-weight: 700; color: var(--c-ink); }
.bitem__d { font-size: 0.875rem; font-weight: 600; color: var(--c-mute); }
.bitem__body { padding: 0.5rem 1rem 1.75rem 13.5rem; }
.bitem__img { display: block; }
.bitem__body p { font-size: 1rem; line-height: 1.85; color: var(--c-body); }
.board-empty { padding: 2.5rem 0; text-align: center; color: var(--c-mute); font-weight: 600; }
.board-note { margin-top: 1rem; font-size: 0.875rem; color: var(--c-mute); }
.vgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.75rem 1.25rem; }
.vgrid .vcard__dept { color: var(--orange-ink); }
.vgrid .vcard__title { color: var(--c-ink); }
.pager { display: flex; justify-content: center; align-items: center; gap: 0.375rem; margin-top: 2.5rem; }
.pager__btn, .pager__num { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 999px; border: 1px solid var(--c-line); color: var(--c-body); font-weight: 800; }
.pager__num { background: var(--navy); border-color: var(--navy); color: #fff; }
.pager__btn:disabled { opacity: 0.45; cursor: default; }
@media (max-width: 880px) { .vgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .bitem summary { grid-template-columns: 5.5rem auto minmax(0, 1fr) auto; gap: 0.25rem 0.75rem; padding: 0.875rem 0.25rem; }
  .bitem__no { display: none; }
  .bitem__thumb { grid-row: 1 / 3; grid-column: 1; width: 5.5rem; align-self: start; }
  .bitem .nbadge { grid-row: 1; grid-column: 2; justify-self: start; }
  .bitem__d { grid-row: 1; grid-column: 3; }
  .bitem__t { grid-row: 2; grid-column: 2 / 4; }
  .bitem summary > .ico { grid-row: 1 / 3; grid-column: 4; }
  .bitem__body { padding: 0.25rem 0.25rem 1.5rem; }
  .vgrid { grid-template-columns: minmax(0, 1fr); }
  .board-top .seg { width: 100%; }
  .board-top .seg__tab { flex: 1; padding: 0 0.5rem; }
  .bsearch { width: 100%; }
}

/* 예약 뒤 진행 — 사진 3장 단계 */
.rsteps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; counter-reset: none; }
.rstep { display: flex; flex-direction: column; border-radius: var(--radius-lg); background: #fff; border: 1px solid var(--c-line); overflow: hidden; }
.rstep__fig img { width: 100%; aspect-ratio: 10 / 7; object-fit: cover; }
.rstep__body { display: grid; gap: 0.375rem; padding: 1.125rem 1.25rem 1.375rem; }
.rstep__no { font-size: 0.875rem; font-weight: 800; letter-spacing: 0.08em; color: var(--orange-ink); }
.rstep__body b { font-size: var(--fs-h4); font-weight: 800; color: var(--c-ink); }
.rstep__body p { font-size: 0.9375rem; line-height: 1.7; color: var(--c-body); }
@media (max-width: 880px) { .rsteps { grid-template-columns: minmax(0, 1fr); } .rstep { flex-direction: row; } .rstep__fig { flex: 0 0 40%; } .rstep__fig img { height: 100%; aspect-ratio: auto; } }
@media (max-width: 480px) { .rstep { flex-direction: column; } .rstep__fig img { aspect-ratio: 16 / 10; } }

/* 의료진 — 협진 소개(사진 두 장) */
.drintro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.drintro__text p { margin-top: 1rem; font-size: var(--fs-lead); line-height: 1.85; color: var(--c-body); }
.drintro__text .h2blk { margin-bottom: 0.25rem; }
.drintro__media { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.55fr); gap: 1rem; align-items: end; }
.drintro__a, .drintro__b { border-radius: var(--radius-lg); overflow: hidden; background: var(--c-panel); }
.drintro__a img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.drintro__b { margin-bottom: -2rem; }
.drintro__b img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; object-position: 50% 50%; }
.drintro-sec + .drsec { padding-top: clamp(2.5rem, 4vw, 4rem); }
@media (max-width: 880px) { .drintro { grid-template-columns: minmax(0, 1fr); } .drintro__b { margin-bottom: 0; } }

/* 움직임 줄이기 — 슬라이드 확대·카드 들림을 끈다(키트가 전체 전환 시간을 0으로 만든다) */
@media (prefers-reduced-motion: reduce) {
  .slide.is-on .hs__media img { animation: none; transform: none; }
  .dcard:hover, .ways a:hover, .ways button:hover { transform: none; }
}
html.shot .slide.is-on .hs__media img { animation: none; transform: none; }

/* ㉔ 진료과 지면 — 과마다 다른 구성 --------------------------------------- */
.dint { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.dint__title { margin: 0.75rem 0 1.5rem; font-size: var(--fs-h2); font-weight: 800; line-height: 1.3; }
.dint__text p:not(.eyebrow) { font-size: var(--fs-lead); line-height: 1.85; color: var(--c-body); }
.dint__text p + p { margin-top: 1rem; }
.dint__media { position: relative; }
.dint__main { border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 5 / 4; background: var(--c-panel); }
.dint__main img { width: 100%; height: 100%; object-fit: cover; }
.dint__media.has-sub { padding: 0 0 3.5rem 3.5rem; }
.dint__sub { position: absolute; left: 0; bottom: 0; width: 42%; border-radius: var(--radius); overflow: hidden; border: 6px solid #fff; box-shadow: var(--shadow-lg); background: #fff; }
.dint__sub img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.dint__sub figcaption { padding: 0.5rem 0.625rem; font-size: 0.875rem; font-weight: 700; color: var(--c-mute); }
@media (max-width: 880px) { .dint { grid-template-columns: minmax(0, 1fr); } .dint__media { order: -1; } .dint__media.has-sub { padding: 0 0 2.5rem 2.5rem; } }
.spacer { height: 1.5rem; }
.symp--col { grid-template-columns: minmax(0, 1fr); }
.symp--plain { grid-template-columns: minmax(0, 1fr); gap: 0; }
.symp--plain li { min-height: 0; padding: 0.625rem 0; border: 0; background: none; font-size: 0.9375rem; }
.symx { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.symx__fig { border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 4 / 5; background: var(--c-panel); }
.symx__fig img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 880px) { .symx { grid-template-columns: minmax(0, 1fr); } .symx__fig { aspect-ratio: 16 / 10; } }
/* 척추 도판 */
.spd { display: grid; grid-template-columns: 7rem minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3.5rem); padding: clamp(1.5rem, 3vw, 2.5rem); border-radius: var(--radius-lg); background: #fff; border: 1px solid var(--c-line); }
.spd__col { display: grid; gap: 0.625rem; justify-items: center; align-content: start; padding-top: 0.25rem; }
.spd__grp { display: grid; gap: 3px; justify-items: center; padding: 0.375rem 0; border-radius: 12px; }
.spd__grp i { display: block; height: 0.875rem; border-radius: 5px; background: currentColor; }
.spd__grp--c { color: #7fa3cc; } .spd__grp--c i { width: 2.5rem; }
.spd__grp--t { color: #3f6fa5; } .spd__grp--t i { width: 3rem; }
.spd__grp--l { color: var(--navy); } .spd__grp--l i { width: 3.75rem; height: 1.25rem; }
.spd__grp--s { color: var(--orange); } .spd__grp--s i { width: 3.25rem; height: 2.5rem; border-radius: 8px 8px 60% 60%; }
.spd__list { display: grid; gap: 1rem; }
.spd__row { padding: 1rem 1.25rem; border-radius: var(--radius); background: var(--c-panel); border-left: 5px solid currentColor; }
.spd__row--c { color: #7fa3cc; } .spd__row--t { color: #3f6fa5; } .spd__row--l { color: var(--navy); } .spd__row--s { color: var(--orange); }
.spd__name { display: flex; align-items: baseline; gap: 0.5rem; font-size: 1.125rem; font-weight: 800; color: var(--c-ink); }
.spd__name small { font-size: 0.875rem; font-weight: 700; color: var(--c-mute); }
.spd__dot { width: 0.625rem; height: 0.625rem; border-radius: 50%; background: currentColor; align-self: center; }
.spd__conds { display: grid; gap: 0.5rem; margin-top: 0.625rem; }
.spd__conds li { font-size: 0.9375rem; line-height: 1.65; color: var(--c-body); }
.spd__conds b { display: block; font-size: 1rem; color: var(--c-ink); }
.spd__none { margin-top: 0.5rem; font-size: 0.9375rem; color: var(--c-body); line-height: 1.65; }
.spd__note { margin-top: 0.75rem; font-size: 0.875rem; color: var(--c-mute); }
@media (max-width: 640px) { .spd { grid-template-columns: minmax(0, 1fr); } .spd__col { grid-auto-flow: column; justify-content: center; align-items: end; gap: 0.375rem; } .spd__grp { grid-auto-flow: column; gap: 2px; padding: 0; } .spd__grp i { width: 0.375rem !important; height: 1.75rem; border-radius: 3px; } .spd__grp--l i { width: 0.5rem !important; height: 2.25rem; } .spd__grp--s i { width: 1.25rem !important; height: 2.5rem; border-radius: 6px; } }
/* 치료 — 사진 + 목록 */
.trsplit { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.trsplit--rev { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); }
.trsplit__fig { border-radius: var(--radius-lg); overflow: hidden; background: var(--c-panel); }
.trsplit__fig img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.trsplit__fig figcaption { padding: 0.75rem 1rem; font-size: 0.875rem; font-weight: 700; color: var(--c-mute); background: var(--c-panel); }
.trsplit .h2blk { margin-bottom: 1.25rem; }
.trows { display: grid; border-top: 2px solid var(--c-ink); }
.trows li { display: flex; gap: 1rem; padding: 1rem 0.25rem; border-bottom: 1px solid var(--c-line); }
.trows__ico { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 10px; background: var(--navy-soft); color: var(--navy); flex-shrink: 0; }
.trows b { display: block; font-size: 1.0625rem; font-weight: 800; color: var(--c-ink); }
.trows p { margin-top: 0.125rem; font-size: 0.9375rem; line-height: 1.65; color: var(--c-body); }
@media (max-width: 880px) { .trsplit, .trsplit--rev { grid-template-columns: minmax(0, 1fr); } .trsplit__fig { order: -1; } }
/* 관절 — 부위 탭 */
.parts__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem 2rem; margin-bottom: 1.75rem; }
.parts__head .h2blk { margin-bottom: 0; }
.part { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: start; padding: clamp(1.25rem, 2.5vw, 2rem); border-radius: var(--radius-lg); background: #fff; border: 1px solid var(--c-line); }
.part__fig { position: relative; border-radius: var(--radius); overflow: hidden; background: var(--c-panel); }
.part__fig img { width: 100%; aspect-ratio: 5 / 6; object-fit: cover; }
.part__fig figcaption { position: absolute; left: 1rem; top: 1rem; padding: 0.375rem 0.875rem; border-radius: 999px; background: var(--navy); color: #fff; font-size: 0.9375rem; }
.part__k { margin: 0.5rem 0 0.75rem; font-size: 0.9375rem; font-weight: 800; color: var(--orange-ink); }
.part__k + .symp { margin-bottom: 1.25rem; }
.part__conds { display: grid; gap: 0.625rem; }
.part__conds li { padding: 0.875rem 1rem; border-radius: var(--radius); background: var(--c-panel); }
.part__conds b { display: block; font-size: 1.0625rem; font-weight: 800; color: var(--c-ink); }
.part__conds small { font-size: 0.875rem; font-weight: 600; color: var(--c-mute); }
.part__conds p { margin-top: 0.25rem; font-size: 0.9375rem; line-height: 1.65; color: var(--c-body); }
@media (max-width: 880px) { .part { grid-template-columns: minmax(0, 1fr); } .part__fig img { aspect-ratio: 16 / 10; } .parts__head .seg { width: 100%; } .parts__head .seg__tab { flex: 1; } }
/* 수족부 — 손 | 발 */
.sides { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
.side { border-radius: var(--radius-lg); background: #fff; border: 1px solid var(--c-line); overflow: hidden; }
.side__fig img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.side__body { padding: 1.25rem clamp(1.25rem, 2.5vw, 1.75rem) 1.5rem; }
.side__title { font-size: var(--fs-h3); font-weight: 800; margin-bottom: 0.5rem; }
.side .symp { margin-bottom: 1rem; }
@media (max-width: 880px) { .sides { grid-template-columns: minmax(0, 1fr); } }
.plate { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); background: #121212; color: rgba(255, 255, 255, 0.84); --c-focus: var(--orange-light); }
.plate__fig { background: #121212; }
.plate__fig img { width: 100%; height: 100%; min-height: 20rem; object-fit: contain; }
.plate__body { display: flex; flex-direction: column; justify-content: center; gap: 1rem; padding: clamp(2.5rem, 5vw, 4.5rem) var(--gutter); max-width: 34rem; }
.plate__title { font-size: var(--fs-h2); font-weight: 800; line-height: 1.3; color: #fff; }
.plate__body p:not(.eyebrow) { font-size: var(--fs-lead); line-height: 1.8; }
@media (max-width: 880px) { .plate { grid-template-columns: minmax(0, 1fr); } .plate__fig img { min-height: 0; aspect-ratio: 16 / 9; } }
/* 뇌신경 — 증상 기록지 · 검사 */
.diary { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.diary__card { padding: 1.5rem 1.75rem; border-radius: var(--radius-lg); background: #fff; border: 1px solid var(--c-line); box-shadow: var(--shadow); background-image: repeating-linear-gradient(transparent 0 2.4rem, var(--c-line) 2.4rem calc(2.4rem + 1px)); }
.diary__h { font-size: 1.125rem; font-weight: 800; color: var(--navy); margin-bottom: 0.75rem; }
.diary__h small { margin-left: 0.375rem; padding: 0.125rem 0.5rem; border-radius: 6px; background: var(--orange-soft); color: var(--orange-ink); font-size: 0.875rem; }
.diary__card dl { display: grid; gap: 0.5rem; }
.diary__card dl div { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: 0.75rem; font-size: 0.9375rem; }
.diary__card dt { font-weight: 800; color: var(--c-ink); }
.diary__card dd { color: var(--c-body); font-weight: 600; }
.diary__fig { border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 4 / 5; background: var(--c-panel); }
.diary__fig img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 880px) { .diary { grid-template-columns: minmax(0, 1fr); } .diary__fig { aspect-ratio: 16 / 10; order: -1; } }
@media (max-width: 480px) { .diary__card dl div { grid-template-columns: minmax(0, 1fr); gap: 0; } }
.tests { position: relative; display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); background: #070d16; color: rgba(255, 255, 255, 0.82); --c-focus: var(--orange-light); }
.tests__fig img { width: 100%; height: 100%; min-height: 24rem; object-fit: cover; }
.tests__body { display: grid; align-content: center; gap: 1.5rem; padding-block: clamp(3rem, 6vw, 5rem); margin: 0; max-width: 44rem; }
.tests__title { font-size: var(--fs-h2); font-weight: 800; color: #fff; line-height: 1.3; margin-top: 0.75rem; }
.tests__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }
.tests__list li { display: flex; gap: 0.875rem; padding: 1rem; border-radius: var(--radius); background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.1); }
.tests__list b { display: block; color: #fff; font-weight: 800; }
.tests__list p { margin-top: 0.25rem; font-size: 0.9375rem; line-height: 1.6; }
.tests__mri { border-radius: var(--radius); overflow: hidden; }
.tests__mri img { width: 100%; aspect-ratio: 21 / 9; object-fit: cover; }
.tests__mri figcaption { padding: 0.5rem 0.75rem; font-size: 0.875rem; background: rgba(255, 255, 255, 0.08); color: rgba(255, 255, 255, 0.78); }
@media (max-width: 960px) { .tests { grid-template-columns: minmax(0, 1fr); } .tests__fig img { min-height: 0; aspect-ratio: 16 / 9; } .tests__body { max-width: none; } }
@media (max-width: 560px) { .tests__list { grid-template-columns: minmax(0, 1fr); } }
/* 재활 — 프로그램 사진 카드 · 소그룹 띠 */
.progs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.prog { display: flex; flex-direction: column; border-radius: var(--radius-lg); background: #fff; border: 1px solid var(--c-line); overflow: hidden; }
.prog__fig img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.prog__ico { display: grid; place-items: center; height: 8rem; margin: 1rem 1rem 0; border-radius: var(--radius); background: var(--navy-soft) radial-gradient(80% 90% at 100% 0%, rgba(240, 138, 36, 0.18), transparent 60%); color: var(--navy); }
.prog__body { padding: 1.125rem 1.25rem 1.375rem; }
.prog__body h3 { font-size: var(--fs-h4); font-weight: 800; }
.prog__body h3 small { font-size: 0.875rem; font-weight: 600; color: var(--c-mute); }
.prog__body p { margin-top: 0.375rem; font-size: 0.9375rem; line-height: 1.65; color: var(--c-body); }
@media (max-width: 960px) { .progs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .progs { grid-template-columns: minmax(0, 1fr); } }
.bandp { position: relative; display: flex; align-items: center; min-height: clamp(24rem, 40vw, 32rem); color: #fff; overflow: hidden; isolation: isolate; --c-focus: var(--orange-light); }
.bandp__media { position: absolute; inset: 0; z-index: -2; }
.bandp__media img { width: 100%; height: 100%; object-fit: cover; }
.bandp::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(11, 36, 69, 0.92) 0%, rgba(11, 36, 69, 0.7) 45%, rgba(11, 36, 69, 0.15) 100%); }
.bandp__body { padding-block: 3rem; }
.bandp__body > * { max-width: 30rem; }
.bandp__title { margin: 0.75rem 0 1rem; font-size: var(--fs-h2); font-weight: 800; line-height: 1.3; color: #fff; }
.bandp__body p:not(.eyebrow) { font-size: var(--fs-lead); line-height: 1.8; color: rgba(255, 255, 255, 0.9); }
.bandp__body .bandp__note { margin-top: 0.75rem; font-size: 0.875rem; color: rgba(255, 255, 255, 0.72); }
/* 좁은 화면 — 사진을 위에 따로 두고 글은 남색 면에(사진 위에 글을 얹으면 「GROUP CLASS」가 3.05:1 이었다 · 2026-09-22 실측) */
@media (max-width: 720px) {
  .bandp { flex-direction: column; align-items: stretch; min-height: 0; background: var(--navy-deep); }
  .bandp::before { content: none; }
  .bandp__media { position: relative; inset: auto; z-index: 0; aspect-ratio: 16 / 10; }
  .bandp__body { padding-block: 2rem 2.5rem; }
}

/* 좁은 화면의 표 — 행마다 한 덩어리(기본 .tbl 규칙보다 뒤에 둔다) */
@media (max-width: 720px) {
  .tbl { min-width: 0; }
  .tbl thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .tbl tr { display: grid; gap: 0.25rem; padding: 1rem 1.125rem; border-bottom: 1px solid var(--c-line); }
  .tbl th, .tbl td { display: block; padding: 0; border: 0; }
  .tbl tbody th { order: -1; font-size: 1rem; }
  .tbl td[data-label]::before { content: attr(data-label) ' · '; font-weight: 700; color: var(--c-mute); }
  .loc__map figcaption { position: static; border-radius: 0; background: #fff; border-top: 1px solid var(--c-line); }
}
@media (max-width: 560px) {
  .drcard__media { width: 11rem; }
}