/* ==========================================================================
Firstier v2 — base (tokens · header · drawer · buttons · footer · call bar)
Page CSS: v2-home.css (밝은 스냅 홈) / v2-24h.css (블랙 24시 페이지)
========================================================================== */
:root {
--v2-frost: #F2F4F2;
--v2-mint: #E7ECE9;
--v2-white: #FFFFFF;
--v2-ink: #11161C;
--v2-body: #2C343C;
--v2-sub: #3E4851;
--v2-meta: #5E6770;
--v2-line: #C9D1CD;
--v2-lamp: #F2A93B;
--v2-night: #0F151B;
--v2-night-2: #161E26;
--v2-ink-n: #ECEFF1;
--v2-body-n: #C9D0D6;
--v2-meta-n: #8C98A4;
--v2-line-n: #27313B;
--v2-lamp-n: #FFB547;
--v2-font: 'IBM Plex Sans KR', 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
--v2-num: 'Instrument Sans', 'Helvetica Neue', Arial, sans-serif;
--v2-max: 1312px;
--v2-pad: clamp(20px, 4.5vw, 64px);
--v2-header-h: 76px;
--v2-section-y: clamp(80px, 10vw, 144px);
}
@media (max-width: 1099px) {
:root { --v2-header-h: 60px; }
}
/* ---------- reset / base ---------- */
body.v2 {
margin: 0;
padding-top: var(--v2-header-h);
background: var(--v2-frost);
color: var(--v2-ink);
font-family: var(--v2-font);
font-size: 16px;
line-height: 1.7;
word-break: keep-all;
overflow-wrap: anywhere;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
body.v2-24h { background: var(--v2-night); color: var(--v2-ink-n); }
body.v2 *, body.v2 *::before, body.v2 *::after { box-sizing: border-box; }
body.v2 img, body.v2 video { display: block; max-width: 100%; }
body.v2 a { color: inherit; text-decoration: none; }
body.v2 a:hover { opacity: .82; }
body.v2 h1, body.v2 h2, body.v2 h3, body.v2 p, body.v2 figure, body.v2 ol, body.v2 ul, body.v2 dl, body.v2 dd { margin: 0; }
body.v2 ol, body.v2 ul { padding: 0; list-style: none; }
body.v2 button { font: inherit; color: inherit; }
body.v2 :focus-visible { outline: 2px solid var(--v2-lamp); outline-offset: 3px; }
body.v2 .ft-skip { position: absolute; left: -9999px; }
body.v2 .ft-skip:focus { left: 16px; top: 12px; z-index: 100; background: var(--v2-ink); color: #fff; padding: 10px 14px; }
.v2-wrap { max-width: var(--v2-max); margin: 0 auto; padding-left: var(--v2-pad); padding-right: var(--v2-pad); box-sizing: content-box !important; }
/* ---------- type ---------- */
.v2-label { font-size: 16px; line-height: 1.4; font-weight: 600; color: var(--v2-meta); }
.v2-h1 { font-size: clamp(38px, 5.2vw, 76px); line-height: 1.13; font-weight: 600; letter-spacing: -0.035em; }
.v2-h2 { font-size: clamp(30px, 3.6vw, 54px); line-height: 1.2; font-weight: 600; letter-spacing: -0.03em; }
.v2-h3 { font-size: clamp(20px, 1.8vw, 26px); line-height: 1.4; font-weight: 600; letter-spacing: -0.02em; }
.v2-lead { font-size: clamp(16px, 1.35vw, 19px); line-height: 1.7; color: var(--v2-body); }
.v2-num { font-family: var(--v2-num); font-weight: 500; letter-spacing: -0.03em; font-feature-settings: 'tnum' 1; }
.v2-24h .v2-label { color: var(--v2-meta-n); }
.v2-24h .v2-lead { color: var(--v2-body-n); }
/* ---------- buttons ---------- */
.v2-btn {
display: inline-flex; align-items: center; justify-content: center; gap: 10px;
height: 56px; padding: 0 28px; border: 1px solid transparent;
font-size: 16px; font-weight: 600; line-height: 1; white-space: nowrap; cursor: pointer;
transition: opacity .2s ease, background-color .2s ease;
}
.v2-btn--sm { height: 44px; padding: 0 20px; font-size: 15px; }
.v2-btn--ink { background: var(--v2-ink); color: #fff !important; }
.v2-btn--lamp { background: var(--v2-lamp); color: var(--v2-ink) !important; }
.v2-24h .v2-btn--lamp, .v2-on-dark .v2-btn--lamp { background: var(--v2-lamp-n); }
.v2-btn--line { border-color: rgba(17, 22, 28, .42); background: transparent; }
.v2-btn--line-light { border-color: rgba(255, 255, 255, .55); background: transparent; color: #fff !important; }
.v2-btn .v2-ico { flex: none; }
.v2-more { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; }
.v2-lampdot { width: 9px; height: 9px; background: var(--v2-lamp); display: inline-block; flex: none; }
.v2-24h .v2-lampdot { background: var(--v2-lamp-n); }
/* ---------- header ---------- */
.v2-header {
position: fixed; z-index: 60; top: 0; left: 0; right: 0; height: var(--v2-header-h);
background: rgba(242, 244, 242, .94);
border-bottom: 1px solid #DCE2DF;
-webkit-backdrop-filter: saturate(140%) blur(10px); backdrop-filter: saturate(140%) blur(10px);
color: var(--v2-ink);
}
.admin-bar .v2-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .v2-header { top: 46px; } }
.v2-header--dark { background: rgba(15, 21, 27, .9); border-bottom-color: var(--v2-line-n); color: var(--v2-ink-n); }
.v2-header__in { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 24px 40px; }
.v2-brand { display: flex; align-items: center; gap: 16px; flex: none; }
/* 병원 공식 로고(가로형, 4.56:1) — 높이는 firstier_v2_logo() 의 --v2-logo-h, 폰 헤더는 줄인다. */
.v2-logo--a { display: block; height: var(--v2-logo-h, 40px); width: auto; max-width: none; }
@media (max-width: 767px) { .v2-header .v2-logo--a { height: 30px; } .v2-footer .v2-logo--a { height: 34px; } }
.v2-brand__rule { width: 1px; height: 30px; background: rgba(17, 22, 28, .22); }
.v2-header--dark .v2-brand__rule { background: rgba(236, 239, 241, .28); }
.v2-brand__name { font-size: 15px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; white-space: nowrap; }
.v2-nav { align-self: stretch; display: flex; align-items: stretch; gap: 32px; font-size: 15px; font-weight: 500; }
.v2-nav__item { display: flex; align-items: stretch; }
.v2-nav__link { position: relative; display: inline-flex; align-items: center; gap: 6px; }
.v2-nav__link[aria-current="page"]::after { content: ''; position: absolute; left: 0; right: 0; bottom: 18px; height: 2px; background: var(--v2-lamp); }
.v2-header--dark .v2-nav__link[aria-current="page"]::after { background: var(--v2-lamp-n); }
.v2-nav__chev { opacity: .6; transition: transform .18s ease; }
.v2-nav__item--mega:hover .v2-nav__chev, .v2-nav__item--mega:focus-within .v2-nav__chev { transform: rotate(180deg); }
/* ---------- mega menu (진료과목) ---------- */
.v2-mega {
position: absolute; left: 0; right: 0; top: 100%;
background: var(--v2-white); color: var(--v2-ink);
border-top: 1px solid #DCE2DF; border-bottom: 1px solid var(--v2-line);
visibility: hidden; opacity: 0; transform: translateY(-4px); pointer-events: none;
transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
}
.v2-nav__item--mega:hover .v2-mega, .v2-nav__item--mega:focus-within .v2-mega, .v2-nav__item--mega.is-open .v2-mega {
visibility: visible; opacity: 1; transform: none; pointer-events: auto; transition-delay: 0s;
}
.v2-nav__item--mega.is-closed .v2-mega { visibility: hidden; opacity: 0; pointer-events: none; }
.v2-mega__in { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: 64px; padding-top: 40px; padding-bottom: 44px; align-items: start; }
.v2-mega__depts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 26px 32px; }
.v2-mega__dept { display: flex; flex-direction: column; gap: 4px; }
.v2-mega__name { font-size: 18px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.35; }
.v2-mega__kw { font-size: 13.5px; line-height: 1.5; color: var(--v2-meta); }
.v2-mega__dept:hover .v2-mega__name { text-decoration: underline; text-underline-offset: 4px; }
.v2-mega__special { display: flex; flex-direction: column; gap: 12px; }
.v2-mega__k { margin: 0; font-size: 13px; font-weight: 600; color: var(--v2-meta); }
.v2-mega__tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.v2-mega__tile { display: flex; flex-direction: column; gap: 8px; }
.v2-mega__thumb { position: relative; display: block; aspect-ratio: 1 / 1; overflow: hidden; background: var(--v2-mint); }
.v2-mega__thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; max-width: none; transition: transform .3s ease; }
.v2-mega__tile:hover .v2-mega__thumb img { transform: scale(1.04); }
.v2-mega__tname { font-size: 15px; font-weight: 600; }
/* 진료과목 메가 오른쪽 — 증상으로 찾기 */
.v2-mega__finder { display: flex; flex-direction: column; gap: 12px; }
.v2-mega__rows { display: flex; flex-direction: column; border-top: 1px solid #DCE2DF; }
.v2-mega__rows a { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid #E6EAE8; font-size: 14.5px; font-weight: 500; line-height: 1.5; }
.v2-mega__rows a:hover span:first-child { text-decoration: underline; text-underline-offset: 4px; }
.v2-mega__to { flex: none; font-size: 13px; font-weight: 600; color: var(--v2-meta); }
.v2-mega__all { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; font-size: 14px; font-weight: 600; }
.v2-header--dark .v2-mega__rows, .v2-header--dark .v2-mega__rows a { border-color: var(--v2-line-n); }
.v2-header--dark .v2-mega__to { color: var(--v2-meta-n); }
.v2-header--dark .v2-mega { background: var(--v2-night); color: var(--v2-ink-n); border-color: var(--v2-line-n); }
.v2-header--dark .v2-mega__k, .v2-header--dark .v2-mega__kw { color: var(--v2-meta-n); }
.v2-header--dark .v2-mega__thumb { background: var(--v2-night-2); }
@media (max-width: 1279px) { .v2-mega__in { gap: 40px; } .v2-mega__depts { gap: 22px 20px; } }
/* 특화진료 메가메뉴 (정제안) — 사진 + 이름 · 키워드 + 세부 3줄 | 링크 두 줄 */
.v2-smega { display: grid; grid-template-columns: minmax(0, 9fr) minmax(0, 3fr); gap: 56px; padding-top: 36px; padding-bottom: 40px; align-items: end; }
.v2-smega__cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.v2-smega__card { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 20px; align-items: start; }
.v2-smega__card:hover { opacity: 1 !important; }
.v2-smega__thumb { position: relative; display: block; aspect-ratio: 1 / 1; overflow: hidden; background: var(--v2-mint); }
.v2-smega__thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; max-width: none; transition: transform .3s ease; }
.v2-smega__card:hover .v2-smega__thumb img { transform: scale(1.04); }
.v2-smega__body { display: flex; flex-direction: column; gap: 4px; padding-top: 2px; }
.v2-smega__name { font-size: 20px; line-height: 1.35; font-weight: 600; letter-spacing: -0.025em; }
.v2-smega__card:hover .v2-smega__name { text-decoration: underline; text-underline-offset: 5px; }
.v2-smega__kw { font-size: 13.5px; line-height: 1.5; color: var(--v2-meta); }
.v2-smega__subs { display: flex; flex-direction: column; margin-top: 14px; border-top: 1px solid #DCE2DF; }
.v2-smega__subs span { padding: 8px 0; border-bottom: 1px solid #ECEFEE; font-size: 14px; font-weight: 500; line-height: 1.5; color: var(--v2-body); }
.v2-smega__links { display: flex; flex-direction: column; }
.v2-smega__links a { display: flex; align-items: center; justify-content: space-between; padding: 11px 0; border-top: 1px solid #DCE2DF; font-size: 14.5px; font-weight: 600; }
.v2-smega__links a:last-child { border-bottom: 1px solid #DCE2DF; }
.v2-header--dark .v2-smega__kw { color: var(--v2-meta-n); }
.v2-header--dark .v2-smega__subs span { color: var(--v2-body-n); border-color: var(--v2-line-n); }
.v2-header--dark .v2-smega__subs, .v2-header--dark .v2-smega__links a { border-color: var(--v2-line-n); }
.v2-header--dark .v2-smega__thumb { background: var(--v2-night-2); }
@media (max-width: 1279px) {
.v2-smega { gap: 32px; }
.v2-smega__cards { gap: 24px; }
.v2-smega__card { grid-template-columns: 96px minmax(0, 1fr); gap: 14px; }
}
.v2-header__actions { display: flex; align-items: center; gap: 4px; }
.v2-header__phone { display: inline-flex; align-items: center; gap: 8px; margin-right: 16px; font-size: 16px; font-weight: 500; white-space: nowrap; }
.v2-header__phone .v2-num { font-size: 17px; }
.v2-header--dark .v2-header__cta { background: var(--v2-ink-n); color: var(--v2-night) !important; }
.v2-nav__link { white-space: nowrap; }
.v2-header__actions { flex-wrap: nowrap; flex: none; }
/* 메뉴 7개(온라인 상담 포함) — 1440 미만에서는 로고 옆 병원명을 숨겨 한 줄을 지킨다. */
@media (max-width: 1439px) {
.v2-brand__rule, .v2-brand__name { display: none; }
}
@media (max-width: 1279px) {
.v2-header__phone { display: none; }
.v2-brand__rule, .v2-brand__name { display: none; }
.v2-nav { gap: 24px; }
}
.v2-iconbtn { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border: 0; background: transparent; padding: 0; cursor: pointer; }
.v2-header__consult, .v2-header__menu { display: none; }
/* 폰 · 태블릿 헤더 「상담」 — 상담 창(전화 · 카카오톡 · 온라인 상담)을 연다. 메뉴 아이콘과 같은 44px 줄에 가운데 정렬. */
.v2-header__consult { align-items: center; justify-content: center; height: 36px; margin-right: 6px; padding: 0 14px; border: 1px solid rgba(17, 22, 28, .42); background: transparent; color: inherit; font-family: var(--v2-font); font-size: 15px; font-weight: 600; line-height: 1; cursor: pointer; }
.v2-header--dark .v2-header__consult { border-color: rgba(236, 239, 241, .5); }
/* 메뉴 아이콘이 블록 안 인라인 SVG 라 줄 높이만큼 위로 떠 있던 것(전화 아이콘보다 4px 위). */
.v2-header__menu [data-ico] { display: flex; }
.v2-header__menu .v2-ico { display: block; }
@media (max-width: 1099px) {
.v2-nav, .v2-header__cta { display: none; }
.v2-header__consult, .v2-header__menu { display: inline-flex; }
.v2-brand { gap: 12px; }
.v2-brand__rule, .v2-brand__name { display: none; }
.v2-header__in { padding-right: 8px; }
}
/* ---------- drawer (mobile menu) ---------- */
.v2-drawer {
position: fixed; z-index: 59; left: 0; right: 0; bottom: 0; top: var(--v2-header-h);
background: var(--v2-frost); color: var(--v2-ink);
padding: 24px var(--v2-pad) 40px; overflow-y: auto;
display: flex; flex-direction: column; gap: 32px;
}
.v2-drawer[hidden] { display: none; }
.v2-header--dark + .v2-drawer, .v2-24h .v2-drawer { background: var(--v2-night); color: var(--v2-ink-n); }
.v2-drawer__nav { display: flex; flex-direction: column; }
.v2-drawer__nav a { display: flex; justify-content: space-between; align-items: center; padding: 18px 0; border-bottom: 1px solid var(--v2-line); font-size: 22px; font-weight: 600; letter-spacing: -0.02em; }
.v2-24h .v2-drawer__nav a { border-bottom-color: var(--v2-line-n); }
.v2-drawer .v2-btn { width: 100%; }
.v2-drawer__group summary { list-style: none; display: flex; justify-content: space-between; align-items: center; padding: 18px 0; border-bottom: 1px solid var(--v2-line); font-size: 22px; font-weight: 600; letter-spacing: -0.02em; cursor: pointer; }
.v2-drawer__group summary::-webkit-details-marker { display: none; }
.v2-drawer__chev { transition: transform .18s ease; }
.v2-drawer__group[open] .v2-drawer__chev { transform: rotate(180deg); }
.v2-drawer__sub { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; padding: 8px 0 16px; border-bottom: 1px solid var(--v2-line); }
.v2-drawer__nav .v2-drawer__sub a { display: block; padding: 10px 0; border: 0; font-size: 16px; font-weight: 500; }
.v2-drawer__nav .v2-drawer__sub .v2-drawer__all { grid-column: 1 / -1; color: var(--v2-meta); font-size: 15px; }
.v2-24h .v2-drawer__group summary, .v2-24h .v2-drawer__sub { border-color: var(--v2-line-n); }
body.v2-menu-open { overflow: hidden; }
/* ---------- footer ---------- */
.v2-footer { background: var(--v2-mint); color: var(--v2-ink); }
.v2-footer--dark { background: var(--v2-night); color: var(--v2-ink-n); border-top: 1px solid var(--v2-line-n); }
.v2-footer__in { padding-top: 48px; padding-bottom: 40px; display: flex; flex-direction: column; gap: 32px; }
/* 왼쪽 브랜드 칸(로고 + 병원명) | 오른쪽 정보 4칸 — 로고가 헤더 로고와 같은 왼쪽 선에 선다. */
.v2-footer__top { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: 32px 64px; align-items: start; }
.v2-footer__brand { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.v2-footer__brand a { display: inline-flex; }
.v2-footer__name { font-size: 14px; font-weight: 600; letter-spacing: -0.02em; color: var(--v2-sub); }
.v2-footer--dark .v2-footer__name { color: var(--v2-body-n); }
.v2-footer__cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px 40px; font-size: 14px; line-height: 1.7; color: var(--v2-body); }
@media (max-width: 1279px) {
.v2-footer__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1099px) {
.v2-footer__top { grid-template-columns: 1fr; }
}
@media (max-width: 559px) {
.v2-footer__cols { grid-template-columns: 1fr; }
}
/* 터치 화면 — 푸터 링크(전화·바로가기·개인정보처리방침) 줄 높이만으로는 손가락에 좁다. */
@media (max-width: 1099px) {
.v2-footer__cols a, .v2-footer__privacy { display: inline-block; padding: 6px 0; }
.v2-footer__k { margin-bottom: 2px; }
}
.v2-footer--dark .v2-footer__cols { color: var(--v2-body-n); }
.v2-footer__k { display: block; font-size: 13px; font-weight: 600; color: var(--v2-meta); margin-bottom: 6px; }
.v2-footer--dark .v2-footer__k { color: var(--v2-meta-n); }
.v2-footer__legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 32px; padding-top: 20px; border-top: 1px solid var(--v2-line); font-size: 12.5px; color: var(--v2-meta); }
.v2-footer--dark .v2-footer__legal { border-top-color: var(--v2-line-n); color: var(--v2-meta-n); }
.v2-footer__legal-r { display: inline-flex; flex-wrap: wrap; gap: 4px 20px; }
.v2-footer__privacy { font-weight: 700; color: var(--v2-ink); }
.v2-footer--dark .v2-footer__privacy { color: var(--v2-ink-n); }
/* ---------- mobile call bar ---------- */
.v2-callbar { display: none; }
@media (max-width: 767px) {
/* 기본은 숨김 — v2.js 가 위로 올릴 때 .is-shown 을 붙인다(첫 화면 · 내려 읽는 중에는 숨김). */
.v2-callbar {
display: grid; grid-template-columns: 1fr 1fr; position: fixed; z-index: 55; left: 0; right: 0; bottom: 0;
height: calc(56px + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom);
background: var(--v2-ink);
transform: translateY(100%); visibility: hidden;
transition: transform .25s ease, visibility 0s linear .25s;
}
.v2-callbar.is-shown { transform: none; visibility: visible; transition: transform .25s ease, visibility 0s; }
.v2-callbar a { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 16px; font-weight: 600; }
.v2-callbar__tel { background: var(--v2-lamp); color: var(--v2-ink) !important; }
.v2-callbar__kakao { background: var(--v2-ink); color: #fff !important; }
.v2-24h .v2-callbar__tel { background: var(--v2-lamp-n); }
.v2-24h .v2-callbar__kakao { background: var(--v2-night-2); }
/* 바가 떠도 맨 아래 법적 고지가 가려지지 않게 푸터 쪽에 여유를 둔다(본문 아래 빈 띠는 없앴다). */
.v2-footer__in { padding-bottom: calc(40px + 56px + env(safe-area-inset-bottom)); }
}
/* ---------- map (Naver dynamic map / poster route-map fallback) ---------- */
.v2-map { position: relative; width: 100%; height: 100%; min-height: 300px; overflow: hidden; background: var(--v2-mint); }
.v2-map__canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
/* 네이버 지도 타일은 폭 0 레이어 안의 ![]()
— 공통 img{max-width:100%} 가 타일을 0px 로 접지 않게 풀어 준다. */
.v2-map__canvas img { max-width: none !important; display: inline !important; }
.v2-map__fallback { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.v2-24h .v2-map { background: var(--v2-night-2); }
.v2-media > .v2-map, .v2e-loc__map > .v2-map { position: absolute; inset: 0; min-height: 0; }
.v2e-loc__map { position: relative; }
.v2-maplinks { display: flex; flex-wrap: wrap; gap: 12px; }
/* ---------- legacy (fx) pages sharing the v2 GNB / footer ---------- */
body.v2-chrome:not(.v2) { padding-top: var(--v2-header-h); }
body.v2-chrome .v2-header, body.v2-chrome .v2-drawer, body.v2-chrome .v2-footer, body.v2-chrome .v2-callbar {
font-family: var(--v2-font); word-break: keep-all; -webkit-font-smoothing: antialiased; line-height: 1.6;
}
body.v2-chrome .v2-header *, body.v2-chrome .v2-drawer *, body.v2-chrome .v2-footer *, body.v2-chrome .v2-callbar * { box-sizing: border-box; }
body.v2-chrome .v2-header a, body.v2-chrome .v2-drawer a, body.v2-chrome .v2-footer a, body.v2-chrome .v2-callbar a,
body.v2-chrome .v2-header a:hover, body.v2-chrome .v2-drawer a:hover, body.v2-chrome .v2-footer a:hover { color: inherit; text-decoration: none; }
body.v2-chrome .v2-header img, body.v2-chrome .v2-footer img { display: block; max-width: none; }
body.v2-chrome .v2-drawer__nav, body.v2-chrome .v2-footer p { margin: 0; }
body.v2-chrome .v2-header ul, body.v2-chrome .v2-header ol, body.v2-chrome .v2-drawer ul { list-style: none; margin: 0; padding: 0; }
body.v2-chrome .v2-header li { margin: 0; padding: 0; }
body.v2-chrome .v2-header li::marker { content: none; }
body.v2-chrome .v2-header p { margin-top: 0; }
body.v2-chrome .v2-header h2, body.v2-chrome .v2-header h3 { margin: 0; }
@media (max-width: 767px) { body.v2-chrome:not(.v2) { padding-bottom: calc(60px + env(safe-area-inset-bottom)); } }
/* ---------- media helpers ---------- */
.v2-media { position: relative; overflow: hidden; background: var(--v2-mint); }
.v2-media > img, .v2-media > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.v2-24h .v2-media { background: var(--v2-night-2); }
@media (prefers-reduced-motion: reduce) {
body.v2 *, body.v2 *::before, body.v2 *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
/* ---------- 모바일 글자 크기 6단계 (2026-10-10) ----------
제목 32 · 섹션 24 · 항목 18 · 리드 16 · 본문 15 · 라벨 13 (+ 전화번호 28, 숫자 서체).
페이지 CSS(v2-home/dept/24h/location)가 v2.css 뒤에 실리므로 body.v2 를 붙여 한 곳에서 이긴다. */
@media (max-width: 767px) {
body.v2 { --t-display: 32px; --t-h2: 24px; --t-h3: 18px; --t-lead: 16px; --t-body: 15px; --t-meta: 13px; --t-num: 28px; }
body.v2 .v2-h1, body.v2 .v2d-head__h, body.v2 .v2d-dhead__h, body.v2 .v2l-head__h,
body.v2 .v2h-hero__title, body.v2 .v2e-hero__title { font-size: var(--t-display); line-height: 1.25; letter-spacing: -0.03em; }
body.v2 .v2-h2, body.v2 .v2h-h2, body.v2 .v2d-h2, body.v2 .v2e-h2, body.v2 .v2h-loc__title, body.v2 .v2s-feat__name,
body.v2 .v2r-doc__name, body.v2 .v2h-doc__name, body.v2 .v2a-doc__id strong, body.v2 .v2s-doc__name strong,
body.v2 .v2d-spcard__txt strong, body.v2 .v2n-article__h, body.v2 .v2c-write__h, body.v2 .v2-st__name h3 { font-size: var(--t-h2); line-height: 1.35; letter-spacing: -0.03em; }
body.v2 .v2-h3, body.v2 .v2d-h3, body.v2 .v2e-h3, body.v2 .v2e-h3--sm, body.v2 .v2e-faq__q, body.v2 .v2h-promise__title,
body.v2 .v2h-card__title, body.v2 .v2h-depts__list a, body.v2 .v2d-card__name, body.v2 .v2d-cond h3, body.v2 .v2d-home__title strong,
body.v2 .v2d-option strong, body.v2 .v2d-urgent__txt strong, body.v2 .v2d-visit__cta strong, body.v2 .v2d-rcard strong,
body.v2 .v2d-workup strong, body.v2 .v2d-steps strong, body.v2 .v2x-cols strong, body.v2 .v2i-way strong, body.v2 .v2i-links strong,
body.v2 .v2i-hours dd strong, body.v2 .v2n-card__title, body.v2 .v2n-empty strong, body.v2 .v2f-care strong, body.v2 .v2f-equip__name strong,
body.v2 .v2l-addr strong, body.v2 .v2g-sec h2 { font-size: var(--t-h3); line-height: 1.45; letter-spacing: -0.02em; }
body.v2 .v2-lead, body.v2 .v2h-hero__lead, body.v2 .v2e-lead, body.v2 .v2e-hero__lead, body.v2 .v2e-body, body.v2 .v2a-intro__txt > p,
body.v2 .v2r-doc__quote, body.v2 .v2h-fac__lead, body.v2 .v2d-feature__head p, body.v2 .v2h-loc__addr, body.v2 .v2d-finder__q,
body.v2 .v2s-feat__txt p, body.v2 .v2-prose, body.v2 .v2g-sec h3, body.v2 .v2e-cost__row dt { font-size: var(--t-lead); line-height: 1.7; letter-spacing: -0.01em; }
body.v2 .v2h-promise__text, body.v2 .v2h-er__lead, body.v2 .v2h-loc__transit, body.v2 .v2h-doc__quote, body.v2 .v2h-card__desc,
body.v2 .v2h-doc__fields, body.v2 .v2d-checks li, body.v2 .v2d-cond p, body.v2 .v2d-faq p, body.v2 .v2d-faq summary, body.v2 .v2d-home p,
body.v2 .v2d-steps li > span:last-child, body.v2 .v2d-tests dt, body.v2 .v2d-tests dd, body.v2 .v2d-urgent__txt span,
body.v2 .v2d-visit__note li, body.v2 .v2d-visit__cta > div:first-child span, body.v2 .v2d-card__sum, body.v2 .v2d-stages__item strong,
body.v2 .v2d-stages__item > span:last-child, body.v2 .v2x-cols p, body.v2 .v2i-way p, body.v2 .v2f-equip__use, body.v2 .v2f-care p,
body.v2 .v2f-notes dd, body.v2 .v2f-notes dt, body.v2 .v2f-room figcaption strong, body.v2 .v2n-card__ex, body.v2 .v2n-empty p,
body.v2 .v2r-doc__career li, body.v2 .v2r-doc__fields, body.v2 .v2r-ac li, body.v2 .v2s-feat__checks li, body.v2 .v2a-doc__quote,
body.v2 .v2a-facts dd, body.v2 .v2a-room figcaption, body.v2 .v2g-sec p, body.v2 .v2g-list li, body.v2 .v2g-table,
body.v2 .v2p-item, body.v2 td.v2p-num, body.v2 .v2-st__steps p, body.v2 .v2-st__rows dd, body.v2 .v2e-loc__row dd,
body.v2 .v2x-info dd, body.v2 .v2i-hours dd span { font-size: var(--t-body); line-height: 1.7; }
body.v2 .v2-label, body.v2 .v2d-crumb, body.v2 .v2h-hero__kicker, body.v2 .v2d-card__kw, body.v2 .v2p-desc, body.v2 .v2d-call__txt span,
body.v2 .v2f-equip__cat, body.v2 .v2f-room figcaption span, body.v2 .v2i-links span, body.v2 .v2a-facts dt, body.v2 .v2i-way__soon,
body.v2 .v2h-hero__status, body.v2 .v2g-date, body.v2 .v2e-figure figcaption, body.v2 .v2h-chip, body.v2 .v2-st__dist,
body.v2 .v2-st__rows dt, body.v2 .v2n-card__meta, body.v2 .v2a-doc__id span, body.v2 .v2r-doc__role, body.v2 .v2x-cols__n,
body.v2 .v2x-info dt, body.v2 .v2i-hours dt, body.v2 .v2-footer__k { font-size: var(--t-meta); line-height: 1.5; }
body.v2 .v2d-dhead__kw { font-size: var(--t-meta); line-height: 1.5; font-weight: 500; color: var(--v2-meta); }
body.v2 .v2h-er__num, body.v2 .v2x-info__tel, body.v2 .v2e-hero__tel-num { font-size: var(--t-num); line-height: 1.2; letter-spacing: -0.03em; }
/* 칩 · 보조 줄 — 14 · 14.5 · 12 → 라벨 13 */
body.v2 .v2-st__line, body.v2 .v2-st__stop, body.v2 .v2-st__type, body.v2 .v2-st__bus, body.v2 .v2l-crumb, body.v2 .v2l-addr span,
body.v2 .v2l-visit dt, body.v2 .v2d-finder__to a, body.v2 .v2s-feat__kw, body.v2 .v2s-doc__member, body.v2 .v2s-doc__name span,
body.v2 .v2p-meta, body.v2 .v2p-tbd, body.v2 .v2r-doc__photo, body.v2 .v2r-doc__k, body.v2 .v2d-rcard > span > span,
body.v2 .v2f-equip__name span, body.v2 .v2l-park dt, body.v2 h3.v2r-doc__k { font-size: var(--t-meta); line-height: 1.5; }
body.v2 .v2g-foot, body.v2 .v2g-toc a { font-size: var(--t-body); }
body.v2 .v2e-signs__list li { font-size: var(--t-lead); line-height: 1.6; }
body.v2 .v2e-cost__row dd { font-size: var(--t-h3); line-height: 1.45; }
body.v2 .v2d-steps__n { font-size: var(--t-h2); }
body.v2 .v2l-visit__tel { font-size: var(--t-num); line-height: 1.2; letter-spacing: -0.03em; }
/* 예외: 오시는 길 역 카드의 큰 "도보 N분" 숫자(.v2-st__min)와 지도 위 이름표는 그대로 둔다. */
body.v2 .v2-btn { font-size: var(--t-body); }
body.v2 .v2-callbar a { font-size: var(--t-body); }
}
/* ---------- 상담 창 (