/* ─────────────────────────────────────────────────────────────
   Clinic Interactions — 바로한의원 전역 인터랙션
   업데이트: 2026-05-23 (v2)
   1) 단락 스크롤 페이드인 (20px ↑, 1.1s)
   2) 링크/버튼/카드 hover lift + accent border
      - nav/header 안의 모든 요소는 제외 (드롭다운 트리거 포함)
   3) "세계 석학들이…" 시차 페이드인 (0 / +700ms — 강화)
   4) "45+회 학술대회…" 숫자 카운팅 (JS)
   5) "오직 결과로 답하겠습니다" 타이핑 효과 (좌→우 글자별 페이드인)
   ───────────────────────────────────────────────────────────── */

/* 1) 전역 단락 페이드인 (v3: 1.1s → 1.5s, 더 여유롭게) */
[data-clinic-reveal] {
    opacity: 0;
    transform: translateY(30px);
    transition:
        opacity 3.5s cubic-bezier(0.22, 1, 0.36, 1),
        transform 3.5s cubic-bezier(0.22, 1, 0.36, 1);
    /* [2026-06-18] will-change 영구 선언 제거 — reveal 대상이 본문 거의 모든 섹션(수십 개)이라
       등장 후에도 GPU 합성 레이어가 영구히 유지돼 저사양/모바일에서 레이어 예산 고갈 → 스크롤 끊김.
       1회성 페이드 전환은 브라우저가 전환 중에만 임시 레이어를 만들고 끝나면 회수하므로 will-change 불필요(원장 보고). */
}
/* [2026-06-26] 등장 완료 상태의 잔존 transform 을 translateY(0)(=matrix identity)에서 none 으로 변경.
   identity transform 도 해당 섹션을 "영구 GPU 합성 레이어"로 만들어, 그 안의 애니메이션 webp/gif 가
   첫 프레임 텍스처로 굳어 하드웨어 가속 크롬에서 멈춘다(칼럼 본문 시술 webp "재생 안 됨" 반복 신고의 진짜 원인).
   06-25 에는 .hub-clips 섹션만 :has() 로 풀었으나, 본문 webp 는 그 밖이라 여전히 멈췄음 → 전역으로 확장.
   translateY(30px)→none 도 정상 보간되어 페이드업 애니메이션은 그대로(시각상 동일), 합성 레이어만 해제.
   [[project_animated_img_reveal_freeze]] [[project_scroll_perf_playbook]] */
[data-clinic-reveal].is-visible {
    opacity: 1;
    transform: none;
}

/* 시차 — 메인 임팩트 배너 ('세계 의사들이 검증한 치료법 / 진료실에서 그대로 적용됩니다')
   [2026-06-13] 원장 요청: line2 너무 늦게 올라옴 → 전역 3.5s 대신 배너만 1.4s + 지연 700→300ms.
   clinic-stagger-1/2 는 이 배너 두 줄에만 부여되므로 다른 섹션 페이드 속도엔 영향 없음. */
[data-clinic-reveal].clinic-stagger-1,
[data-clinic-reveal].clinic-stagger-2 { transition-duration: 1.4s; }
[data-clinic-reveal].clinic-stagger-1 { transition-delay: 0ms; }
[data-clinic-reveal].clinic-stagger-2 { transition-delay: 300ms; }

/* 2) Hover lift + accent border (의도적으로 nav/header 제외) */
.clinic-hover,
[data-clinic-hover],
a.btn,
a.button,
a[role="button"],
button:not([data-no-hover]):not(.no-hover),
.card,
article.card,
.feature-card,
.program-card,
.doctor-card {
    transition:
        transform 350ms cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 350ms cubic-bezier(0.22, 1, 0.36, 1),
        border-color 350ms cubic-bezier(0.22, 1, 0.36, 1);
    border: 1px solid transparent;
}

.clinic-hover:hover,
[data-clinic-hover]:hover,
a.btn:hover,
a.button:hover,
a[role="button"]:hover,
button:not([data-no-hover]):not(.no-hover):hover,
.card:hover,
article.card:hover,
.feature-card:hover,
.program-card:hover,
.doctor-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 24px -10px rgba(15, 23, 42, 0.18);
    border-color: var(--accent, #14b8a6);
}

/* (2) 제외 영역 — nav, header 안의 hover 효과 무력화
   드롭다운 트리거(병원 소개 · 특수 클리닉 · 비대면 한약 등)에 청록 테두리/lift가 생기던 문제 해결
   단, '진료 예약' 류의 CTA 버튼(href에 intake/booking 포함)은 예외로 hover 효과 유지 */
nav button:not([href*="intake"]):not([href*="booking"]):hover,
nav a:not([href*="intake"]):not([href*="booking"]):hover,
nav .clinic-hover:not([href*="intake"]):not([href*="booking"]):hover,
nav [data-clinic-hover]:not([href*="intake"]):not([href*="booking"]):hover,
nav .card:hover,
header button:not([href*="intake"]):not([href*="booking"]):hover,
header a:not([href*="intake"]):not([href*="booking"]):hover,
header .clinic-hover:not([href*="intake"]):not([href*="booking"]):hover,
header [data-clinic-hover]:not([href*="intake"]):not([href*="booking"]):hover,
header .card:hover,
[data-clinic-no-hover]:hover {
    transform: none !important;
    box-shadow: none !important;
    border-color: transparent !important;
}
/* 위 reset이 자체 border까지 지우지 않도록 — nav 내 border는 기존 색 유지 */
nav button:not([href*="intake"]):not([href*="booking"]),
nav a:not([href*="intake"]):not([href*="booking"]),
nav .clinic-hover:not([href*="intake"]):not([href*="booking"]),
nav [data-clinic-hover]:not([href*="intake"]):not([href*="booking"]),
nav .card,
header button:not([href*="intake"]):not([href*="booking"]),
header a:not([href*="intake"]):not([href*="booking"]),
header .clinic-hover:not([href*="intake"]):not([href*="booking"]),
header [data-clinic-hover]:not([href*="intake"]):not([href*="booking"]),
header .card {
    border: 0;
}

/* 상단 진료 예약 CTA — 청록 테두리 없이 lift + shadow만 부드럽게 */
header a[href*="intake"],
header a[href*="booking"],
header button[href*="intake"],
header button[href*="booking"],
nav a[href*="intake"],
nav a[href*="booking"],
nav button[href*="intake"],
nav button[href*="booking"] {
    transition:
        transform 350ms cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 350ms cubic-bezier(0.22, 1, 0.36, 1) !important;
}
header a[href*="intake"]:hover,
header a[href*="booking"]:hover,
header button[href*="intake"]:hover,
header button[href*="booking"]:hover,
nav a[href*="intake"]:hover,
nav a[href*="booking"]:hover,
nav button[href*="intake"]:hover,
nav button[href*="booking"]:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 10px 24px -10px rgba(15, 23, 42, 0.18) !important;
}

/* 카드 자체 border가 있는 경우의 안전망 */
.card.clinic-hover-soft,
[data-clinic-hover-soft] {
    border-color: var(--border-subtle, rgba(15,23,42,0.08));
}
.card.clinic-hover-soft:hover,
[data-clinic-hover-soft]:hover {
    border-color: var(--accent, #14b8a6);
}

/* 5) 타이핑 효과 — "오직 결과로 답하겠습니다"
   v3: 글자 span을 inline + opacity-only 로 (layout 영향 0 — 아래 진료 예약 버튼이 밀리던 문제 해결).
   글자별 transition-delay 시차만으로 좌→우 등장 효과 표현. */
.clinic-typed .clinic-typed-char {
    opacity: 0;
    transition: opacity 380ms cubic-bezier(0.22, 1, 0.36, 1);
}
.clinic-typed.clinic-typed-visible .clinic-typed-char {
    opacity: 1;
}
/* [2026-06-17] 단어 단위 페이드업(원장 요청) — 섹션 소제문/마무리문. 글자 타이핑 대신 '단어가 아래서 위로'.
   inline-block 이라야 transform 적용됨(inline 은 transform 무시). 시차는 인라인 transition-delay(wrapTypedChars 설정).
   layout 영향 없음(translateY 는 시각 변형 — 아래 버튼 안 밀림). */
.clinic-typed .clinic-typed-word {
    display: inline-block;
    opacity: 0;
    transform: translateY(0.5em);
    transition: opacity 420ms cubic-bezier(0.22, 1, 0.36, 1), transform 420ms cubic-bezier(0.22, 1, 0.36, 1);
    -webkit-transition: opacity 420ms cubic-bezier(0.22, 1, 0.36, 1), -webkit-transform 420ms cubic-bezier(0.22, 1, 0.36, 1);
}
.clinic-typed.clinic-typed-visible .clinic-typed-word {
    opacity: 1;
    transform: translateY(0);
}
/* 카운터 진행 중 깜빡임 방지 (선택사항) */
[data-clinic-counter-running] { font-variant-numeric: tabular-nums; }

/* ─────────────────────────────────────────────────────────────
   텍스트 컬러 톤 시스템 (자보2.jpg 디자인 기반, 2026-05-23)
   - 딥 네이비: 타이틀·강조 (검정 대체)
   - 다크 그레이: 본문·보조 (가독성 ↑)
   - 흰 텍스트는 selector에 포함 안 되어 자동 제외
   - 적용 게이트: html[data-clinic-text-tones="on"] (JS가 공개 페이지에서만 부착, admin 제외)
   ───────────────────────────────────────────────────────────── */
:root {
    --clinic-title: #1a2c3d; /* 딥 네이비 — 자보 로고/타이틀 톤 */
    --clinic-body:  #475569; /* slate-600 — 본문 (v2: 한 단계 연하게, 부드러움) */
    --clinic-meta:  #64748b; /* slate-500 — 보조/메타 (v2: 한 단계 연하게) */
}

/* 1) 디자인 토큰 자체를 덮어씀 — 사이트 전반에서 var(--text-*) 쓰는 모든 컴포넌트에 자동 반영 */
html[data-clinic-text-tones="on"] {
    --text-main:   var(--clinic-title) !important;
    --text-muted:  var(--clinic-body)  !important;
    --text-subtle: var(--clinic-meta)  !important;
}

/* 2) Tailwind 검정 계열 클래스 → 딥 네이비
   (text-white / text-white-* 는 매칭 자체가 안 되어 자동 제외) */
html[data-clinic-text-tones="on"] .text-black,
html[data-clinic-text-tones="on"] .text-slate-900,
html[data-clinic-text-tones="on"] .text-gray-900,
html[data-clinic-text-tones="on"] .text-zinc-900,
html[data-clinic-text-tones="on"] .text-neutral-900,
html[data-clinic-text-tones="on"] .text-stone-900 {
    color: var(--clinic-title) !important;
}

/* 3) Tailwind 중간 회색 → 다크 그레이로 진하게 (가독성 강화) */
html[data-clinic-text-tones="on"] .text-slate-500,
html[data-clinic-text-tones="on"] .text-slate-600,
html[data-clinic-text-tones="on"] .text-gray-500,
html[data-clinic-text-tones="on"] .text-gray-600,
html[data-clinic-text-tones="on"] .text-zinc-500,
html[data-clinic-text-tones="on"] .text-zinc-600,
html[data-clinic-text-tones="on"] .text-neutral-500,
html[data-clinic-text-tones="on"] .text-neutral-600 {
    color: var(--clinic-body) !important;
}

/* 4) _local/index.astro 의 특정 컴포넌트 hex 컬러 (#1a1a1a / #2d2d2d) override
   원본 코드는 그대로 두고 specificity 만으로 덮어씀 */
html[data-clinic-text-tones="on"] .equip-card__spec,
html[data-clinic-text-tones="on"] .equip-card__desc {
    color: var(--clinic-title) !important;
}

/* 5) 본문 안 strong·b 는 색상을 별도 지정하지 않음 — 부모 색상을 그대로 상속
   → 어두운 배경 위에서는 흰색, 밝은 배경 위에서는 본문 그레이 톤으로 자연스럽게 통일
   (이전 v1 에서 강조 키워드를 딥 네이비로 변경했더니 어두운 배경 안 strong 이 안 보이는 문제 발생) */

/* 6) Navbar 카테고리 & 모바일 사이드바 컬러 (2026-05-23 정밀 보정)
   - PC 헤더 7개 카테고리 → 시그니처 딥 네이비 (#1a2c3d via var(--clinic-title))
   - 모바일 사이드바 dropdown 카테고리 헤더 (text-slate-400) → 동일 딥 네이비
   - 모바일 사이드바 진료 예약 버튼 (accent 배경) → 화이트 강제
   - 이전 :not([class*="text-[color:var(--accent)]"]) 는 hover:text-[color:var(--accent)]
     substring 매칭으로 7개 카테고리 전부 제외하던 버그 → 제거 */
/* 게이트(html[data-clinic-text-tones="on"]) 제거 — JS 부착 시점 무관, CSS 파싱 즉시 적용.
   Navbar.astro 의 !text-[#1a2c3d] Tailwind 클래스 보조 안전망 역할. */
nav button:not([href*="intake"]):not([href*="booking"]),
nav a:not([href*="intake"]):not([href*="booking"]):not([class*="text-white"]) {
    color: var(--clinic-title) !important;
}
/* 모바일 드로어 dropdown 카테고리 헤더 → 딥 네이비 */
#mobile-menu-drawer .text-slate-400 {
    color: var(--clinic-title) !important;
}
/* 모바일 드로어 진료 예약 버튼 → 화이트 강제 (민트 배경 위 가독성 보장) */
#mobile-menu-drawer a[class*="bg-[color:var(--accent)]"] {
    color: #ffffff !important;
}

/* 모바일 사이드바 링크 — iOS/Android 터치 최적화 (파란 탭 하이라이트 제거 + 더블탭 줌 지연 제거) */
#mobile-menu-drawer a {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

/* [2026-06-07] 모바일 드로어 하단 '네이버 예약' 버튼 — 메뉴('관절 클리닉' 등 18px)와 동일 크기.
   global.css 의 ≤640px 압축 규칙(a.font-bold.rounded-xl → 0.95rem !important)보다 높은 우선순위로 무력화. */
:root[data-skin="varoModern"] #mobile-menu-drawer a.font-bold.rounded-xl[href][onclick*="navbar_mobile"],
#mobile-menu-drawer a[onclick*="navbar_mobile"] {
    font-size: 1.125rem !important;   /* text-lg = 관절 클리닉과 동일 */
}

/* 모바일 사이드바 7개 대카테고리 폰트 크기 무조건 강제 (서브 메뉴 유무 불문 동일 크기 보장).
   대카테고리는 .space-y-1 > a/div 의 첫 깊이에 위치하므로 :first-child 로 식별. */
#mobile-menu-drawer > div > div.space-y-1 > a:first-child,
#mobile-menu-drawer > div > div.space-y-1 > div:first-child {
    font-size: 1.125rem !important;   /* text-lg */
    line-height: 1.75rem !important;  /* text-lg line-height */
    font-weight: 700 !important;       /* font-bold */
}

/* 7) 메인 페이지 .sect-sub / .sect-closer 톤 통일
   - 원본: .sect-sub = #2d2d2d(그레이), .sect-closer = var(--text-h)(딥 네이비) → 같은 단락에서 두 문장 색이 달라 어색
   - 통일: 둘 다 본문 그레이(--clinic-body) 로 일관
   - 어두운 배경 위(--white modifier) 는 selector 에서 제외 → 흰색 그대로 유지 */
html[data-clinic-text-tones="on"] .sect-sub:not([class*="--white"]),
html[data-clinic-text-tones="on"] .sect-closer:not([class*="--white"]) {
    color: var(--clinic-body) !important;
}

/* 8) 박스(카드 류) 내부 텍스트는 모두 딥 네이비로 통일 — 강조 위계감 ↑
   - [class*="-card"]: .doctor-card, .equip-card, .feature-card, .program-card, .paper-card, .edu-card, .case-card 등 모든 *-card 클래스 잡힘
   - --white / --dark modifier 가 있는 카드(어두운 배경)는 통째로 제외 → 흰 글씨 그대로 유지
   - 카드 내부 텍스트가 자체 색상(text-white, mint accent, 인라인 color)을 명시한 경우는 :not() 으로 제외 */
html[data-clinic-text-tones="on"] [class*="-card"]:not([class*="--white"]):not([class*="--dark"]):not([class*="case-card"]):not([class*="pain-co-card"]):not([class*="doctor-card"]) h1,
html[data-clinic-text-tones="on"] [class*="-card"]:not([class*="--white"]):not([class*="--dark"]):not([class*="case-card"]):not([class*="pain-co-card"]):not([class*="doctor-card"]) h2,
html[data-clinic-text-tones="on"] [class*="-card"]:not([class*="--white"]):not([class*="--dark"]):not([class*="case-card"]):not([class*="pain-co-card"]):not([class*="doctor-card"]) h3,
html[data-clinic-text-tones="on"] [class*="-card"]:not([class*="--white"]):not([class*="--dark"]):not([class*="case-card"]):not([class*="pain-co-card"]):not([class*="doctor-card"]) h4,
html[data-clinic-text-tones="on"] [class*="-card"]:not([class*="--white"]):not([class*="--dark"]):not([class*="case-card"]):not([class*="pain-co-card"]):not([class*="doctor-card"]) h5,
html[data-clinic-text-tones="on"] [class*="-card"]:not([class*="--white"]):not([class*="--dark"]):not([class*="case-card"]):not([class*="pain-co-card"]):not([class*="doctor-card"]) p:not([class*="text-white"]):not([style*="color"]):not([class*="text-[color:var(--accent"]),
html[data-clinic-text-tones="on"] [class*="-card"]:not([class*="--white"]):not([class*="--dark"]):not([class*="case-card"]):not([class*="pain-co-card"]):not([class*="doctor-card"]) li:not([class*="text-white"]):not([style*="color"]):not([class*="text-[color:var(--accent"]) {
    color: var(--clinic-title) !important;
}

/* 9) 의료진 페이지 hardcoded 색상 명시 override
   - .doctor-card__role : 인라인 #1a1a1a (검정) → 딥 네이비
   - .doctor-card__name : var(--text-h) 이지만 캐시/명시 위해 한 번 더 강제 */
html[data-clinic-text-tones="on"] .doctor-card__role,
html[data-clinic-text-tones="on"] .doctor-card__name {
    color: var(--clinic-title) !important;
}

/* 9-pill) doctor-card__position pill 박스 — 민트 그라데이션 위 흰 글씨 강제
   (8)번 카드 selector 가 <p> 매칭으로 딥 네이비로 덮은 문제 해결 */
html[data-clinic-text-tones="on"] .doctor-card .doctor-card__position {
    color: #ffffff !important;
}

/* 9-pain) pain-clinic 페이지의 hardcoded 검정/그레이 텍스트 → 딥 네이비
   - 의료진 소개, VARO 비수술 치료, 영상으로 확인하세요(+보조), FAQ(타이틀+Q+A)
   - .pain-co-* (CLINICAL OUTCOMES) 는 selector 에 포함 안 함 → 흰 글씨 그대로 유지 */
html[data-clinic-text-tones="on"] .pain-ms-h2,
html[data-clinic-text-tones="on"] .pain-sol-h2,
html[data-clinic-text-tones="on"] .pain-yt-h2,
html[data-clinic-text-tones="on"] .pain-yt-sub,
html[data-clinic-text-tones="on"] .pain-faq-h2,
html[data-clinic-text-tones="on"] .pain-faq-q,
html[data-clinic-text-tones="on"] .pain-faq-a {
    color: var(--clinic-title) !important;
}

/* 9-hint) location 페이지 .loc-card__hint ("메가박스 화곡점 건너편 3층") 민트 복원
   원래 var(--mint) 였지만 (8)번 카드 selector 가 .loc-card 안 <p> 매칭해 딥 네이비로 덮은 문제 해결 */
html[data-clinic-text-tones="on"] .loc-card .loc-card__hint {
    color: var(--mint, #00b3ba) !important;
}

/* 11-pre) Premium Lineup 의 ULTRASOUND / HILT LASER / ESWT 라벨 — 민트 컬러 복원
   (8)번 카드 selector 가 .equip-card 안의 <p>를 잡아 딥 네이비로 만들었지만,
   .equip-card__tag 는 원래 mint 라벨이므로 명시 복원 */
html[data-clinic-text-tones="on"] .equip-card__tag {
    color: var(--mint, #00b3ba) !important;
}

/* 11-vd) VARO DIFFERENCE 단락 (FeatureHighlightSection / programs/[id]) 의 4줄 강조 키워드
   - 구조: .prose 안의 <p><span><strong class="text-text-main">키워드</strong></span></p>
   - Tailwind 의 text-text-main 클래스가 빌드 시 hex 로 컴파일되어 변수 override 영향 안 받음
   - .prose strong 명시 selector 로 딥 네이비 강제 */
html[data-clinic-text-tones="on"] .prose strong,
html[data-clinic-text-tones="on"] [data-program-id] .prose p > span > strong {
    color: var(--clinic-title) !important;
}

/* 11-white) text-white 클래스는 무조건 흰색 보호 (모바일 햄버거 메뉴 진료 예약 버튼 등)
   민트 배경 위 흰 텍스트가 우리 다른 selector 에 잡혀 색이 바뀌는 모든 사례 차단 */
html[data-clinic-text-tones="on"] .text-white,
html[data-clinic-text-tones="on"] [class~="text-white"] {
    color: #fff !important;
}

/* 11) MEDICAL STAFF 단락 — 전체 페이지(메인·프로그램·의료진 페이지) staff/pain-ms 태그·이름 통일
   - .staff-tag, .pain-ms-tag : 인라인 #1a1a1a (검정) hardcoded → 딥 네이비
   - .staff-card__name, .pain-ms-name, .pain-ms-h : var(--text-h) 사용 중이지만 안전망으로 강제 적용 */
html[data-clinic-text-tones="on"] .staff-tag,
html[data-clinic-text-tones="on"] .staff-card__name,
html[data-clinic-text-tones="on"] .pain-ms-tag,
html[data-clinic-text-tones="on"] .pain-ms-name,
html[data-clinic-text-tones="on"] .pain-ms-h {
    color: var(--clinic-title) !important;
}

/* 10-co) CLINICAL OUTCOMES 카드 텍스트 흰색 강제 복원 (메인 .case-card + 상세 .pain-co-card)
   - 상세 페이지(통증/관절·면역·여성건강·척추)는 .pain-co-sect 안에 있어 (10)번 .bg-sect selector 에 안 잡혔던 문제 해결
   - 부모 클래스(.pain-co-card / .case-card) 함께 명시하여 (8)번 카드 selector 보다 명확히 우선
   - 타이틀: 순수 흰색 / 보조(회복 경과·날짜): slate-200 (#e2e8f0) 으로 가독성 확보 */
html[data-clinic-text-tones="on"] .pain-co-sect .pain-co-title,
html[data-clinic-text-tones="on"] .pain-co-sect .pain-co-h2,
html[data-clinic-text-tones="on"] .pain-co-card .pain-co-title,
html[data-clinic-text-tones="on"] .case-card .case-card__title {
    color: #ffffff !important;
}
html[data-clinic-text-tones="on"] .pain-co-sect .pain-co-meta,
html[data-clinic-text-tones="on"] .pain-co-card .pain-co-meta,
html[data-clinic-text-tones="on"] .case-card .case-card__meta {
    color: #e2e8f0 !important;
}
html[data-clinic-text-tones="on"] .pain-co-sect .pain-co-disclaimer,
html[data-clinic-text-tones="on"] .pain-co-sect .pain-co-disclaimer p {
    color: #ffffff !important;
}

/* 10) 어두운 배경 섹션(.bg-sect / .bg-dark / [data-bg="dark"]) 안의 카드는 흰색 텍스트 복원
   - CLINICAL OUTCOMES 의 .case-card, NATIONAL GUIDELINE 내 카드 등이 카드 자체에 --white modifier 가 없어 (8)번 selector 에 잡혀 딥 네이비가 되던 문제 해결
   - 위 (8)번 selector 보다 더 specific(.bg-sect 조상 추가)하고 같은 !important 사용 → 우선 적용 */
html[data-clinic-text-tones="on"] .bg-sect [class*="-card"] h1,
html[data-clinic-text-tones="on"] .bg-sect [class*="-card"] h2,
html[data-clinic-text-tones="on"] .bg-sect [class*="-card"] h3,
html[data-clinic-text-tones="on"] .bg-sect [class*="-card"] h4,
html[data-clinic-text-tones="on"] .bg-sect [class*="-card"] h5,
html[data-clinic-text-tones="on"] .bg-sect [class*="-card"] p,
html[data-clinic-text-tones="on"] .bg-sect [class*="-card"] li,
html[data-clinic-text-tones="on"] .bg-dark [class*="-card"] h1,
html[data-clinic-text-tones="on"] .bg-dark [class*="-card"] h2,
html[data-clinic-text-tones="on"] .bg-dark [class*="-card"] h3,
html[data-clinic-text-tones="on"] .bg-dark [class*="-card"] h4,
html[data-clinic-text-tones="on"] .bg-dark [class*="-card"] h5,
html[data-clinic-text-tones="on"] .bg-dark [class*="-card"] p,
html[data-clinic-text-tones="on"] .bg-dark [class*="-card"] li,
html[data-clinic-text-tones="on"] [data-bg="dark"] [class*="-card"] h1,
html[data-clinic-text-tones="on"] [data-bg="dark"] [class*="-card"] h2,
html[data-clinic-text-tones="on"] [data-bg="dark"] [class*="-card"] h3,
html[data-clinic-text-tones="on"] [data-bg="dark"] [class*="-card"] h4,
html[data-clinic-text-tones="on"] [data-bg="dark"] [class*="-card"] h5,
html[data-clinic-text-tones="on"] [data-bg="dark"] [class*="-card"] p,
html[data-clinic-text-tones="on"] [data-bg="dark"] [class*="-card"] li {
    color: #fff !important;
}

/* 6) Hero 단어별 시차 등장 — 메인 타이틀 + 보조 문구
   - inline-block + translateY(15px) → 0  (transform은 layout flow 무영향)
   - vertical-align: baseline, line-height: inherit 명시 → 자간/행간/컨테이너 높이 안 깨짐
   - 공백은 span 밖 일반 텍스트 노드로 유지 (JS가 처리) → 줄바꿈 동일하게 보존
   - transition-delay 는 단어 인덱스별로 JS가 인라인 부여 */
.hero__title .clinic-word,
.hero__sub .clinic-word {
    display: inline-block;
    opacity: 0;
    transform: translateY(15px);
    transition:
        opacity 700ms cubic-bezier(0.22, 1, 0.36, 1),
        transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
    will-change: opacity, transform;
    vertical-align: baseline;
    line-height: inherit;
}
.hero__title.clinic-words-visible .clinic-word,
.hero__sub.clinic-words-visible .clinic-word {
    opacity: 1;
    transform: translateY(0);
}

/* reduced-motion 환경에서 Hero 단어 효과도 비활성화 (위 일반 reduced-motion 블록 보강)
   단, iOS (html[data-ios-force-motion="on"]) 에서는 이 override 를 건너뛴다 —
   iOS 26 Safari/Chrome 이 사용자 설정과 무관하게 reduce-motion 을 리포트하는 경우 회복용.
   JS rAF 가 단어별 페이드인을 수동 보간하므로 native CSS 차단을 우회해야 함. */
@media (prefers-reduced-motion: reduce) {
    html:not([data-ios-force-motion="on"]) .hero__title .clinic-word,
    html:not([data-ios-force-motion="on"]) .hero__sub .clinic-word {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}

/* 접근성: 모션 줄이기 선호 시 모든 효과 비활성화
   단, iOS 환경에서 reduce-motion 이 잘못 켜져 멈춤 현상이 발생하는 경우를 위해
   html[data-ios-force-motion="on"] 이 부착되어 있으면 이 블록을 건너뜀 */
@media (prefers-reduced-motion: reduce) {
    html:not([data-ios-force-motion="on"]) [data-clinic-reveal],
    html:not([data-ios-force-motion="on"]) [data-clinic-reveal].is-visible {
        transition: none !important;
        transform: none !important;
        opacity: 1 !important;
    }
    html:not([data-ios-force-motion="on"]) .clinic-hover,
    html:not([data-ios-force-motion="on"]) [data-clinic-hover],
    html:not([data-ios-force-motion="on"]) a.btn,
    html:not([data-ios-force-motion="on"]) button,
    html:not([data-ios-force-motion="on"]) .card {
        transition: none !important;
    }
    html:not([data-ios-force-motion="on"]) .clinic-hover:hover,
    html:not([data-ios-force-motion="on"]) [data-clinic-hover]:hover,
    html:not([data-ios-force-motion="on"]) a.btn:hover,
    html:not([data-ios-force-motion="on"]) button:hover,
    html:not([data-ios-force-motion="on"]) .card:hover {
        transform: none !important;
    }
    html:not([data-ios-force-motion="on"]) .clinic-typed .clinic-typed-char,
    html:not([data-ios-force-motion="on"]) .clinic-typed .clinic-typed-word {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}

/* ─────────────────────────────────────────────────────────────
   iOS WebKit 호환성 (2026-05-23 추가)
   - 증상: iPhone (iOS Safari / Chrome) 에서 스크롤 페이드인 / 호버 효과 멈춤
   - 원인: ① WebKit 프리픽스 누락 ② translateY 가 GPU 합성 미발화
          ③ 터치 환경에서 :hover sticky-hover 잔존
          ④ prefers-reduced-motion 잘못 켜져 모든 모션 비활성
   - 기존 규칙은 그대로 두고 아래 보강 규칙으로 덮어쓰기 (추가만, 삭제 0)
   ───────────────────────────────────────────────────────────── */

/* 1) 스크롤 페이드인 — WebKit 프리픽스 + 3D 가속 (translate3d 로 GPU 합성 강제) */
[data-clinic-reveal] {
    -webkit-transform: translate3d(0, 20px, 0);
    transform: translate3d(0, 20px, 0);
    -webkit-transition:
        opacity 1.8s cubic-bezier(0.22, 1, 0.36, 1),
        -webkit-transform 1.8s cubic-bezier(0.22, 1, 0.36, 1);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-perspective: 1000;
}
[data-clinic-reveal].is-visible {
    /* [2026-06-26] 등장 완료 후 GPU 합성 레이어 강제를 완전히 해제. translate3d(0,0,0)/perspective/
       backface-visibility:hidden 는 "영구 합성 레이어" 해킹이라, 그 안의 애니메이션 webp/gif 가
       하드웨어 가속 크롬에서 첫 프레임에 굳어 멈춤(본문 시술 클립 "재생 안 됨"의 실제 원인).
       이 블록이 위 transform:none 보다 뒤라 덮어쓰고 있었음 → 여기서 함께 none/해제.
       전환은 base 의 translate3d(0,20px,0)→none 로 정상 보간(페이드업 시각 동일), 끝나면 레이어 회수. */
    -webkit-transform: none;
    transform: none;
    -webkit-perspective: none;
    perspective: none;
    -webkit-backface-visibility: visible;
    backface-visibility: visible;
}

/* 2) Hero 단어 페이드인 — WebKit 프리픽스 + 3D 가속 */
.hero__title .clinic-word,
.hero__sub .clinic-word {
    -webkit-transform: translate3d(0, 15px, 0);
    transform: translate3d(0, 15px, 0);
    -webkit-transition:
        opacity 700ms cubic-bezier(0.22, 1, 0.36, 1),
        -webkit-transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}
.hero__title.clinic-words-visible .clinic-word,
.hero__sub.clinic-words-visible .clinic-word {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

/* 3) Hover lift / 카드 transition — WebKit 프리픽스 보강 + GPU 합성 힌트 */
.clinic-hover,
[data-clinic-hover],
a.btn,
a.button,
a[role="button"],
button:not([data-no-hover]):not(.no-hover),
.card,
article.card,
.feature-card,
.program-card,
.doctor-card {
    -webkit-transition:
        -webkit-transform 350ms cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 350ms cubic-bezier(0.22, 1, 0.36, 1),
        border-color 350ms cubic-bezier(0.22, 1, 0.36, 1);
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    touch-action: manipulation;
}

.clinic-hover:hover,
[data-clinic-hover]:hover,
a.btn:hover,
a.button:hover,
a[role="button"]:hover,
button:not([data-no-hover]):not(.no-hover):hover,
.card:hover,
article.card:hover,
.feature-card:hover,
.program-card:hover,
.doctor-card:hover {
    -webkit-transform: translate3d(0, -4px, 0);
    transform: translate3d(0, -4px, 0);
}

/* 4) 터치 환경 (iOS 포함) — :hover sticky 차단 후 :active 로 짧은 lift 응답 */
@media (hover: none), (pointer: coarse) {
    .clinic-hover:hover,
    [data-clinic-hover]:hover,
    a.btn:hover,
    a.button:hover,
    a[role="button"]:hover,
    button:not([data-no-hover]):not(.no-hover):hover,
    .card:hover,
    article.card:hover,
    .feature-card:hover,
    .program-card:hover,
    .doctor-card:hover,
    .card.clinic-hover-soft:hover,
    [data-clinic-hover-soft]:hover {
        -webkit-transform: none;
        transform: none;
        box-shadow: none;
    }
    .clinic-hover:active,
    [data-clinic-hover]:active,
    a.btn:active,
    a.button:active,
    a[role="button"]:active,
    button:not([data-no-hover]):not(.no-hover):active,
    .card:active,
    article.card:active,
    .feature-card:active,
    .program-card:active,
    .doctor-card:active {
        -webkit-transform: translate3d(0, -2px, 0);
        transform: translate3d(0, -2px, 0);
        -webkit-transition-duration: 150ms;
        transition-duration: 150ms;
        box-shadow: 0 6px 16px -8px rgba(15, 23, 42, 0.18);
    }
}

/* 5) 상단 진료 예약 CTA — 터치 환경에서도 짧은 응답 유지 (기존 hover lift 보존) */
@media (hover: none), (pointer: coarse) {
    header a[href*="intake"]:active,
    header a[href*="booking"]:active,
    header button[href*="intake"]:active,
    header button[href*="booking"]:active,
    nav a[href*="intake"]:active,
    nav a[href*="booking"]:active,
    nav button[href*="intake"]:active,
    nav button[href*="booking"]:active {
        -webkit-transform: translate3d(0, -2px, 0) !important;
        transform: translate3d(0, -2px, 0) !important;
        -webkit-transition-duration: 150ms !important;
        transition-duration: 150ms !important;
    }
}

/* ─────────────────────────────────────────────────────────────
   Footer 서체 스케일업 v2 (2026-05-25, 원장 재요청 — 체감 강화)
   v1 (+1px) 변화가 시각적으로 너무 미세 → 모바일 +2~3px, PC +4~6px 로 확대.
   - 코어 Footer.astro 무수정. CSS 만 수정.
   - 모바일: 가로폭 100% 유지, 가독성 확실히 ↑
   - PC(md+): 진료시간/바로가기 두 블록 사이 빈 공간을 늘어난 글자 부피로 채움.
   - font-size + line-height 외 어떤 속성도 건드리지 않음.
   ───────────────────────────────────────────────────────────── */
footer h3 {
    font-size: 1.125rem !important;  /* 18px — 모바일 타이틀 (기본 16px → +2, text-lg) */
    line-height: 1.4 !important;
}
footer ul.text-sm,
footer .text-sm {
    font-size: 1rem !important;  /* 16px — 모바일 본문 (14px → +2, text-base) */
    line-height: 1.7 !important;
}
footer .text-xs {
    font-size: 0.875rem !important;  /* 14px — 모바일 보조 (12px → +2, text-sm) */
    line-height: 1.6 !important;
}

/* PC (md 이상, 768px+) — 두 블록 간격 시각적 1/2 흡수 위해 더 든든하게 */
@media (min-width: 768px) {
    footer h3 {
        font-size: 1.375rem !important;  /* 22px — PC 타이틀 (text-2xl 24px 직전) */
    }
    footer ul.text-sm,
    footer .text-sm {
        font-size: 1.125rem !important;  /* 18px — PC 본문 (text-lg) */
    }
    footer .text-xs {
        font-size: 1rem !important;  /* 16px — PC 보조 (text-base) */
    }
}

/* ─────────────────────────────────────────────────────────────
   Hero badges (3줄 안내 박스) — 모바일 컴팩트 v2 + PC 텍스트 중앙 (2026-05-25)
   v1 (relative 흐름 + max-w-xs) → 박스가 비대해 보여 60% 슬림화 + 이미지 내부
   하단 중앙으로 absolute 재배치.
   - 가로폭 max-w-[240px], padding py-2 px-3 컴팩트
   - 이모지 wrapper 32px → 20px, 글자 14px → 12px 다운사이즈
   - bottom: 24px, left: 50%, translateX(-50%) 로 이미지 하단 중앙 안착
   - 이모지 좌측 고정 + 텍스트는 남은 영역 가로 중앙 (정렬 로직 유지)
   PC(md 이상) 박스 위치·크기는 Tailwind 원본 유지, 텍스트 중앙만 추가.
   ───────────────────────────────────────────────────────────── */

/* [PC + 모바일 공통] 이모지 우측 텍스트 블록 — 남은 영역 가로 중앙 정렬
   이모지 wrapper 는 코어의 shrink-0 로 좌측 고정 유지 */
section[class*="hero--"] .-bottom-6.-left-6.max-w-xs > div > div:last-child {
    flex: 1 1 auto !important;
    text-align: center !important;
}

/* v6 (2026-05-25) — v5 의 min-width 240px 가 작은 폰엔 과대, 큰 폰엔 빈 공간 유발.
   해결: min-width 폐지하고 콘텐츠가 박스 폭을 결정. 작은 폰(<410px)은 v4 그대로 복구,
   큰 폰(≥410px, iPhone 17 Pro/Plus·Pixel 7+) 에서만 폰트·패딩을 한 단계 ↑ →
   콘텐츠가 자연스럽게 넓어져 박스도 적정 비례로 커짐 (빈 공간 0). */
@media (max-width: 767px) {
    /* v4 복구 — 콘텐츠 기반 자연 폭, 빈 공간 없음 */
    section[class*="hero--"] .-bottom-6.-left-6.max-w-xs {
        display: block !important;
        position: absolute !important;
        bottom: 1.5rem !important;
        left: 50% !important;
        right: auto !important;
        top: auto !important;
        transform: translateX(-50%) !important;
        margin: 0 !important;
        max-width: 280px !important;
        width: max-content !important;        /* 콘텐츠가 폭 결정 — 빈 공간 0 */
        padding: 0.625rem 1rem !important;    /* 10/16 (v4) */
    }
    section[class*="hero--"] .-bottom-6.-left-6.max-w-xs > div {
        gap: 0.5rem !important;
    }
    section[class*="hero--"] .-bottom-6.-left-6.max-w-xs > div.mb-3 {
        margin-bottom: 0.5rem !important;
    }
    section[class*="hero--"] .-bottom-6.-left-6.max-w-xs > div > div:first-child:not(:last-child) {
        width: 1.5rem !important;
        height: 1.5rem !important;
        font-size: 0.875rem !important;       /* 14px */
    }
    section[class*="hero--"] .-bottom-6.-left-6.max-w-xs > div > div:last-child > div {
        font-size: 0.84375rem !important;     /* 13.5px */
        line-height: 1.4 !important;
    }
}

/* 큰 모바일 (iPhone 17 Pro 440px, Pixel 7 412px 등) — 폰트·패딩만 한 단계 ↑
   콘텐츠가 자연스럽게 넓어지면서 박스도 적정 비례로 커짐 (min-width 없음 → 빈 공간 0) */
@media (max-width: 767px) and (min-width: 410px) {
    section[class*="hero--"] .-bottom-6.-left-6.max-w-xs {
        max-width: 320px !important;          /* 콘텐츠가 자라면 받아줄 cap */
        padding: 0.75rem 1.125rem !important; /* 12/18 */
    }
    section[class*="hero--"] .-bottom-6.-left-6.max-w-xs > div > div:first-child:not(:last-child) {
        width: 1.625rem !important;           /* 26px */
        height: 1.625rem !important;
        font-size: 0.9375rem !important;      /* 15px 이모지 */
    }
    section[class*="hero--"] .-bottom-6.-left-6.max-w-xs > div > div:last-child > div {
        font-size: 0.90625rem !important;     /* 14.5px 본문 */
    }
}

/* ─────────────────────────────────────────────────────────────
   모바일 사이드바 폭 압축 (2026-05-26 원장 요청)
   - 코어 Navbar.astro 의 w-[280px] + global.css 의 varoModern 스킨 (88vw/320max) → 240px 압축
   - 향후 '자동차 보험 클리닉' (9자) 추가 시에도 한 줄 안착
   - 좁은 폰에서는 max-width 85vw 로 자동 축소
   - varoModern 스킨 규칙과 동일 specificity 매칭 필수 (:root[data-skin] #id) */
#mobile-menu-drawer#mobile-menu-drawer {  /* 같은 ID 2x → specificity 상승, varoModern 스킨 (1,2,0) 룰 보다 우선 (2,0,0) */
    width: 240px !important;
    max-width: 85vw !important;
}

/* ─────────────────────────────────────────────────────────────
   '치료 후기' 메뉴 일시 숨김 (2026-05-26 원장 요청)
   ─────────────────────────────────────────────────────────────
   목적: 리뷰 데이터 미확보 → PC 헤더 + 모바일 사이드바 양쪽에서 숨김.
   복원: 향후 리뷰 확보 시 이 @media 블록(아래 두 블록) 통째로 주석(/* */) 으로
         감싸기만 하면 즉시 메뉴 부활. DB main_navigation 손댈 필요 없음.
   타겟 정밀도:
     - PC: #main-header > nav > div.group (부모 래퍼) 숨김 → flex gap 자연 정리
     - 모바일: #mobile-menu-drawer .space-y-1 (부모 래퍼) 숨김 → space-y 자연 정리
     - href$="/reviews" 셀렉터로 한국어(/reviews) + 다국어(/en/reviews 등) 모두 매칭
   기타 메뉴 무영향: 다른 .group / .space-y-1 은 자식에 /reviews 링크가 없어 미매칭.
   ───────────────────────────────────────────────────────────── */
/* 직접 링크 자체 숨김 (1차 방어) — :has() 지원/매칭 실패 환경에서도 무조건 동작 */
#main-header a[href$="/reviews"],
#mobile-menu-drawer a[href$="/reviews"] {
    display: none !important;
}
/* 부모 래퍼 숨김 (2차) — flex gap / space-y 자연 정리.
   :has() 미지원 시 위 1차로 링크는 사라지지만 빈 부모가 남을 수 있음 → 이 룰로 정리.
   :has() 지원 브라우저: Chrome/Edge 105+, Safari 15.4+, Firefox 121+ (2024+ 기준 99%+) */
#main-header > div > nav > div.group:has(> a[href$="/reviews"]),
#mobile-menu-drawer .space-y-1:has(> a[href$="/reviews"]) {
    display: none !important;
}

/* ─────────────────────────────────────────────────────────────
   모바일 사이드바 서브메뉴 들여쓰기 (2026-05-26 원장 요청)
   ─────────────────────────────────────────────────────────────
   대상: 병원 소개 / 특수 클리닉 / 비대면 처방 의 하위 링크
   구조: 부모 라벨 <div class="font-bold"> 뒤에 자식 <a class="font-normal"> 들이 나열됨
         단일 메뉴(관절/척추/블로그/리뷰)는 .font-bold 클래스라서 셀렉터 미매칭
   효과: 자식 링크의 padding-left 를 16px(px-4) → 28px(pl-7) 로 늘려 시각 들여쓰기
         (~12px 들여쓰기 — 스페이스 2-3칸 효과). 기호/이모지/하이픈 없이 순수 공백.
   PC 무영향: 헤더 호버 드롭다운은 #mobile-menu-drawer 바깥, lg(>=1024px) media 가드.
   ───────────────────────────────────────────────────────────── */
@media (max-width: 1023px) {
    #mobile-menu-drawer .space-y-1 > div ~ a.font-normal {
        padding-left: 1.75rem !important;
    }
}

/* 드로어 서브카테고리(면역/여성 클리닉, 경희대 처방류 등) 색 → 딥네이비
   (원장 요청 2026-05-28). 기존 text-slate-600(#475569 연함)이 가독성 저하.
   두께(font-normal)는 유지하고 색만 var(--clinic-title) #1a2c3d 로. PC(<1024 drawer)/모바일 공통.
   들여쓰기(위 @media pl 1.75rem)는 그대로 — drawer 표시 구간 전체 적용. */
#mobile-menu-drawer .space-y-1 > div ~ a.font-normal {
    color: var(--clinic-title) !important;
}

/* ─────────────────────────────────────────────────────────────
   PC 헤더 드롭다운 가로폭 컴팩트화 (2026-05-26 원장 요청)
   - 코어 Navbar.astro 의 w-48 (192px) 고정폭 → 콘텐트 자연 맞춤 + 슬림 캡
   - 향후 '어혈 클리닉', '힘줄 파열 클리닉', '자동차보험 클리닉' (최대 9자) 추가 안전
   - 모바일 사이드바(#mobile-menu-drawer)는 위 블록에서 별도 관리 — 영향 없음
   - lg(>=1024px) 에서만 데스크톱 nav 렌더됨, 보호 차원에서 media query 명시
   ───────────────────────────────────────────────────────────── */
@media (min-width: 1024px) {
    /* (1) 외부 위치 컨테이너 (w-48 192px 고정) → max-content + 슬림 캡
       html body 체인으로 specificity 추가 (Tailwind 유틸 대비 안전 마진) */
    html body #main-header > div > nav > div.group > div.absolute.top-full {
        width: max-content !important;
        max-width: 13rem !important;   /* 208px — text-sm 한글 ~10자 + px-5 좌우 패딩 안전 폭 */
    }
    /* (2) 내부 가시 박스도 동일 적용 — 외부 폭 변경이 어떤 이유로 차단돼도 가시 박스 자체가 콘텐트 맞춤 */
    html body #main-header > div > nav > div.group > div.absolute.top-full > div {
        width: max-content !important;
        max-width: 13rem !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
    /* (3) 메뉴 아이템: 한 줄 마감 + 텍스트 중앙정렬 (시각 균형 보장 — 원장 요청 fallback) */
    html body #main-header > div > nav > div.group > div.absolute.top-full a {
        white-space: nowrap !important;
        text-align: center !important;
    }
}

/* 7) 타이핑 효과 — WebKit transition 프리픽스 보강 */
.clinic-typed .clinic-typed-char {
    -webkit-transition: opacity 380ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* 8) 푸터 'Powered by AIMO' 숨김 (원장 요청 2026-05-28)
   AIMO 링크를 즉시 숨겨 FOUC 방지 — JS removeAimoCredit 가 "Powered by"
   텍스트와 구분자(|)까지 완전 제거(텍스트노드는 CSS 로 못 숨기므로 JS 병행).
   Footer.astro 는 코어 파일이라 직접 수정 대신 여기(safe zone)서 처리 → core:pull 무영향. */
footer a[href*="aimo"] { display: none !important; }

/* 9) 언어전환 버튼을 정책 링크 줄(개인정보처리방침 오른쪽)로 이동 — JS moveLocaleToPolicies.
   같은 줄 수직 중앙 정렬 + 모바일 좁은 폭에서 wrap 안전(줄바꿈 시 간격). */
footer .flex.gap-4.mt-2 { align-items: center; flex-wrap: wrap; row-gap: 0.5rem; }

/* 10) 특정 단락 서브텍스트/링크 → 타이틀 딥네이비(--clinic-title #1a2c3d) 통일
   (원장 요청 2026-05-28). 기존엔 연한 회색(#64748b/#555/#475569)이라 가독성·위계 저하.
   대상:
   - INDICATIONS 카드 본문 (ProblemSection .card-body) — 충돌증후군/회전근개/디스크 등
   - QUICK GUIDE 단계 설명 (ProcessSection desc: word-keep + var(--text-muted)) — 구글폼/전화신청 등
   - INFORMATION 라벨+값 (.tele-info-item, .tele-info-label) — 비급여 비용/가격
   - 푸터 바로가기 링크 (진료예약/오시는길/비급여진료비/For AI) — 진료시간 '평일'과 동일 톤
   PC/모바일 공통. clinic-interactions safe zone → core:pull 무영향. */
html[data-clinic-text-tones="on"] .card-body,
html[data-clinic-text-tones="on"] p.word-keep[class*="text-muted"],
html[data-clinic-text-tones="on"] .tele-info-item,
html[data-clinic-text-tones="on"] .tele-info-item li,
html[data-clinic-text-tones="on"] .tele-info-item p,
html[data-clinic-text-tones="on"] .tele-info-label,
html[data-clinic-text-tones="on"] footer ul.text-slate-600 a {
    color: var(--clinic-title) !important;
}
/* 푸터 바로가기 링크 두께 = 진료시간 '평일/토요일'(font-medium 500)과 동일 (원장 요청 2026-05-28) */
html[data-clinic-text-tones="on"] footer ul.text-slate-600 a {
    font-weight: 500 !important;
}
/* blog(의료진 칼럼) 본문 prose 텍스트 → 타이틀과 동일 딥네이비 (원장 요청 2026-05-28).
   prose-p:text-[var(--text-main)] arbitrary 가 set:html 본문에 안 먹어 CSS 로 강제.
   strong/a 는 자체 색(accent/main) 유지 위해 p/li 만. */
html[data-clinic-text-tones="on"] article .prose p,
html[data-clinic-text-tones="on"] article .prose li {
    color: var(--clinic-title) !important;
}

/* ── 푸터 재구성: [진료시간 흰박스] [오시는길 약도 박스] 좌우 2개 (메인 ACCESS 디자인 이식)
   + 모바일 최하단 진료예약 버튼. clinic-interactions.js 가 컬럼 클래스 부여 + 약도/버튼 주입.
   PC/모바일 공통. (원장 요청 2026-05-29) */

/* '바로가기' 컬럼 제거 → 약도로 대체 (PC/모바일 모두) */
.footer-quicklinks-col { display: none !important; }

/* 진료시간 컬럼 → 흰 박스 (메인 .access-box 톤). 콘텐츠에 맞춰 가로폭 축소(max-width). */
.footer-hours-col {
    background: #fff;
    border: 1px solid var(--border-subtle, #e5e7eb);
    border-radius: 1rem;
    padding: 1.5rem 1.75rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    transition: transform 0.3s, box-shadow 0.3s, border-color 0.3s;
}
.footer-hours-col > h3 { font-size: 1.2rem !important; margin-bottom: 0.9rem !important; }
.footer-hours-col > ul { padding-left: 0 !important; }
/* 휴진(민트) 박스 li: 280px 캡 해제 → 좁아진 박스 안에서 박스 패딩만큼 좌우 여백으로 균등하게 둘러싸임 */
.footer-hours-col > ul > li.mt-8 { max-width: none !important; }
/* 진료시간 행 — 메인 .ah-row 처럼 밑줄 */
.footer-hours-col > ul > li.flex {
    max-width: none !important;
    /* 우측 1.25rem = 휴진(민트) 박스 내부 패딩(p-5)과 동일 → 진료시간 값 우측 끝선이
       휴진 박스 '휴진' 우측 끝선과 칼정렬 (원장 요청 2026-05-29) */
    padding: 0.7rem 1.25rem 0.7rem 0 !important;
    border-bottom: 1px solid #eef2f6;
    gap: 1rem;
}
.footer-hours-col > ul > li.flex:last-of-type { border-bottom: none; }
/* 휴진 박스 → 민트 박스 */
.footer-hours-col .bg-\[\#f4fafa\] {
    background: rgba(0, 179, 186, 0.10) !important;
}

/* 오시는길 약도 박스 — 흰 박스 + 제목 + 약도(잘림 없이 contain) */
.footer-map-box {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--border-subtle, #e5e7eb);
    border-radius: 1rem;
    padding: 1.75rem 2rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    text-decoration: none;
    color: inherit;
    transition: transform 0.3s, box-shadow 0.3s, border-color 0.3s;
}
.footer-map-box:hover,
.footer-phone-box:hover,
.footer-hours-col:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    border-color: #00b3ba;
}
.footer-map-box__title {
    font-size: 1.2rem;
    font-weight: 700;
    color: #00b3ba;
    margin-bottom: 0.9rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}
/* 오시는 길 제목 옆 민트 뱃지 — 비급여 페이지 .fees-badge('5회 1사이클')와 동일 형태 (원장 요청 2026-06-04) */
.footer-map-badge {
    font-size: 0.72rem;
    font-weight: 600;
    background: rgba(0, 179, 186, 0.1);
    color: #00b3ba;
    border-radius: 4px;
    padding: 0.1rem 0.35rem;
    margin-left: 0.3rem;
    vertical-align: middle;
    white-space: nowrap;
}
.footer-map-box__img {
    width: 100%;
    flex: 1;
    min-height: 180px;
    border-radius: 0.75rem;
    object-fit: contain;
    object-position: center;
}

/* 우측 컬럼: 전화 예약 박스(상) + 오시는 길 약도 박스(하) 세로 스택 */
.footer-right-col {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}
.footer-right-col .footer-map-box { flex: 1; }

/* 전화 예약 박스 — 진료시간 박스와 동일 톤/상단 구조(번호가 '평일' 행과 같은 줄에 정렬) */
.footer-phone-box {
    display: flex;
    align-items: center;
    justify-content: space-between;   /* 제목 좌측 / 번호 우측, 한 줄 */
    gap: 1rem;
    background: #fff;
    border: 1px solid var(--border-subtle, #e5e7eb);
    border-radius: 1rem;
    padding: 1.5rem 2rem;   /* 좌우 2rem = 아래 '📍 오시는 길' 박스와 좌측 시작점 일치 (원장 요청 2026-06-04) */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    text-decoration: none;
    color: inherit;
    transition: transform 0.3s, box-shadow 0.3s, border-color 0.3s;
}
.footer-phone-box__title {
    font-size: 1.2rem;
    font-weight: 700;
    color: #00b3ba;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    white-space: nowrap;
}
/* 번호: 박스 우측 정렬, 굵기는 진료시간 값(normal/400)과 동일 */
.footer-phone-box__tel {
    font-size: 1.05rem;
    font-weight: 400;
    color: #1a2c3d;
    white-space: nowrap;
}

/* 좌우 5:5 — 진료시간 박스/우측 컬럼이 각각 절반을 꽉 채움(흰 박스·민트 박스 함께 확대).
   값(공휴일 '일') ↔ 휴진 '진' 우측 정렬은 행 우측 패딩(1.25rem)으로 폭과 무관하게 유지.
   (md:grid-cols-2 = 1fr 1fr 그대로, max-width 미적용 → PC/모바일 모두 풀 채움) (원장 요청 2026-05-29) */

/* 모바일 최하단 진료예약 버튼 (PC 숨김) */
.footer-mobile-booking { display: none; }
@media (max-width: 767px) {
    /* [2026-06-07 2차] '🏥 네이버 예약' — 카카오톡 채널 문의 박스(.footer-phone-box/__title)와
       세로폭(padding 1.5rem)·폰트(1.2rem/700·line-height 동일)·풀폭 통일 + 내용 중앙 정렬 (원장 요청. PC 비노출 그대로) */
    .footer-mobile-booking {
        display: flex;
        align-items: center;
        justify-content: center;       /* 중앙 정렬 (원장 요청 2026-06-07 2차) */
        gap: 0.4rem;                   /* 카카오 제목(gap 0.4rem)과 동일 */
        width: 100%;
        max-width: none;               /* 카카오 박스와 같은 풀폭 */
        margin: 0.25rem auto 0;
        padding: 1rem 2rem;            /* [2026-06-07 3차] 세로폭 20% 축소 (구 1.5rem=79px → 1rem≈63px, 원장 요청) */
        border-radius: 0.9rem;
        font-weight: 700;
        font-size: 1.2rem;             /* 카카오 제목(1.2rem)과 동일 */
        line-height: 1.5;              /* 카카오 제목(상속 1.5)과 동일 → 높이 일치 */
        letter-spacing: 0.01em;
        color: #fff !important;
        text-decoration: none;
        background: linear-gradient(135deg, #28b7ad 0%, #129a8f 100%);
        box-shadow: 0 10px 24px rgba(18, 154, 143, 0.30), inset 0 1px 0 rgba(255, 255, 255, 0.30);
        border-bottom: 2px solid rgba(0, 0, 0, 0.10);
        transition: transform 0.2s ease, filter 0.2s ease, box-shadow 0.2s ease;
        -webkit-tap-highlight-color: transparent;
    }
    .footer-mobile-booking:hover { filter: brightness(1.06); }
    .footer-mobile-booking:active {
        transform: scale(0.975);
        box-shadow: 0 4px 12px rgba(18, 154, 143, 0.25);
    }
    .footer-mobile-booking__icon { font-size: inherit; line-height: inherit; }   /* 카카오 💬(제목 폰트 그대로)와 동일 */
}

/* [local 2026-05-31] 비급여 진료비 — '👑 공진단' 섹션(.fees-list--gj: 프리미엄/스탠다드/녹용침향) 모바일에서만
   수량 단위(10환/1환)를 약간 좌측으로 → '녹용캡슐(1박스 60포)'의 '60포' 좌측 끝과 같은 세로선에 정렬.
   방식: .fees-tiers 폭 7.5em→8.5em 으로 넓혀 수량 좌측 시작점을 좌측(x≈229)으로 이동. 금액(만원)은 우측 끝 유지.
   PC(>=769px)는 절대 미영향(media max-width:768px). 특이도(.fees-simple-list.fees-list--gj)로 본문 <style>의 7.5em !important 우선. */
@media (max-width: 768px) {
    .fees-simple-list.fees-list--gj .fees-tiers { width: 8.5em !important; }
}

/* [local 2026-06-01] 다국어 번역 버튼 숨김 — 외국어 로케일은 미들웨어가 한국어로 301 redirect 하므로
   번역 버튼이 무의미(클릭 시 한국어로 되돌아옴). 푸터 LocaleSwitcher 숨김. (원장 요청) */
.locale-switcher { display: none !important; }

/* [local 2026-06-10] 사이트 전체 Pretendard 통일 (원장 요청) —
   global.css 가 h1~h6 에 'Noto Serif KR'(명조)를 깔아 비-홈 페이지(블로그/프로그램/의료진 등)
   제목이 세리프로 나오던 것을, 전 공개페이지에서 Pretendard 로 강제. clinic-interactions.css 는
   global.css 이후 로드 + !important 라 확실히 이김. (admin/문진 폼은 BaseLayout 미사용 → 영향 없음) */
h1, h2, h3, h4, h5, h6,
p, a, li, span, strong, em, b, i,
blockquote, th, td, dt, dd, figcaption, small, label, button,
input, textarea, select, .font-serif, .font-heading {
  font-family: 'Pretendard Variable', 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, 'Apple SD Gothic Neo', 'Noto Sans KR', sans-serif !important;
}

/* [local 2026-06-22] 스크롤 끊김 개선 #1 — 고정 헤더 흐림(backdrop-filter) 전 페이지 제거.
   홈(_local/index.astro)은 2026-06-16에 껐지만 그 외 페이지엔 흐림이 남아 스크롤 매 프레임
   재계산 → 끊김. 헤더 배경은 0.92~0.94 불투명이라 흐림이 원래 거의 안 보임 → 무손실.
   흐림 출처: Navbar 스크롤 시 backdrop-blur-md(Tailwind 12px) + 일부 스킨(global.css varoModern blur 8px).
   :root[data-skin] 로 스킨별 규칙(:root[data-skin="..."] #main-header, 특이도 0,1,1,0)보다 높은
   특이도(0,1,2,0) 확보 → 스킨 무관, 로드순서 무관하게 확실히 이김. */
:root[data-skin] #main-header,
:root[data-skin] header[role="banner"],
:root[data-skin] body > header {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* [local 2026-06-22] 스크롤 끊김 개선 #3 — 등장 애니메이션 완료 후 will-change 해제.
   BaseLayout 의 .reveal-on-scroll 은 will-change:opacity,transform 을 영구 보유 →
   애니가 끝난 뒤에도 GPU 레이어로 승격된 채 남아 합성/메모리 부담. 등장 완료(animate-reveal)
   시점에 auto 로 되돌려 레이어 해제. (코어 BaseLayout 의 옵저버는 클래스만 추가하고 해제 안 함) */
.reveal-on-scroll.animate-reveal {
  will-change: auto !important;
}

/* [2026-06-26] 칼럼·가이드북 이미지 캡션 = 이미지 박스 하단 '밴드'(테두리 없음). 원장 요청:
   연한 색으로 바꾸지 말고(본문색 유지) 크기만 한 단계 작게 → 위계. 기존 인라인 스타일을 override.
   :has() 로 캡션 있는 figure 만 적용(이미지 위만 둥글게 + 밴드가 아래에 딱 붙어 한 박스처럼). */
figure:has(> figcaption.img-cap) {
  display: table; margin: 1.5em auto; max-width: min(820px, 100%);
}
figure > figcaption.img-cap {
  display: block !important; margin: 0 !important;
  background: #f5f6f7 !important; color: #1a2c3d !important;   /* 아주 연한 그레이 배경 + 원문 동일 딥네이비 텍스트 */
  font-size: 0.95em !important; line-height: 1.55 !important;  /* 너무 작지 않게, 한 단계만↓ */
  text-align: center !important; padding: 0.65em 1.1em !important;
  border-radius: 0 0 10px 10px !important;
}
figure:has(> figcaption.img-cap) > img,
figure:has(> figcaption.img-cap) > a > img {
  display: block !important; width: 100% !important; margin: 0 !important;
  border-radius: 10px 10px 0 0 !important;
}
/* 빈 캡션(안 쓰고 둔 경우)은 발행 화면에서 밴드 미표시 — 편집기 안내문구가 본문에 노출되지 않게 */
figure > figcaption.img-cap:empty { display: none !important; }
figure:has(> figcaption.img-cap:empty) > img,
figure:has(> figcaption.img-cap:empty) > a > img { border-radius: 10px !important; }
/* [2026-06-26] 캡션이 있어도 '전체 폭 채우기'(img-fullwidth) 적용 시 박스를 가득 채움(원장 요청) */
figure:has(> figcaption.img-cap):has(img.img-fullwidth) { display: block !important; max-width: 100% !important; width: 100% !important; }
figure:has(img.img-fullwidth) > img { width: 100% !important; }

/* ===== [가이드북 카드 썸네일 — 흰 박스 안 여백 프레임] 시작 (2026-06-29, 원장 요청) =====
   되살리기/되돌리기: 이 블록 전체(시작~끝 주석)를 삭제하면 코어 기본(사진 꽉 참)으로 복귀.
   대상: /blog/category (질환백과 가이드북 모음). 의료진 칼럼 카드 톤 참고. */
.gb-card__thumb {
  aspect-ratio: auto !important;
  padding: 0.85rem 0.85rem 0 !important;
  background: #fff !important;
  overflow: visible !important;
}
.gb-card__thumb img {
  aspect-ratio: 16 / 9 !important;
  height: auto !important;
  width: 100% !important;
  border-radius: 0.6rem 0.6rem 0 0 !important;   /* [2026-07-01] 하단 모서리 직각(상단만 라운드) — 의료진 칼럼 인덱스 카드와 동일(원장 요청) */
  object-fit: cover !important;
}
/* ===== [가이드북 카드 썸네일] 끝 ===== */

/* ===== [가이드북 검색창] /blog/category — 의료진 칼럼 검색창과 동일 외형 + 위아래 여백 (2026-06-29, 원장 요청)
   되돌리기: 이 블록 + clinic-interactions.js 의 [가이드북 검색창] 블록 삭제 */
.gb-search { position: relative; max-width: 36rem; margin: 1.6rem auto 3.35rem; }   /* [2026-06-30] 아래 여백을 위(칩 mb 1.75 + search mt 1.6 = ~3.35rem)에 맞춰 통일(원장 요청 Z4) */
.gb-search input {
  width: 100%; padding: 1rem 3rem 1rem 1.25rem;
  border-radius: 0.85rem; border: 1px solid var(--border-subtle, #e2e8f0);
  background: #fff; font-size: 1.05rem; color: #1a2c3d;
  transition: border-color .15s, box-shadow .15s;
}
.gb-search input::placeholder { color: #94a3b8; }
.gb-search input:focus { outline: none; border-color: var(--mint, #00b3ba); box-shadow: 0 0 0 3px rgba(0,179,186,0.15); }
.gb-search__icon { position: absolute; right: 1.1rem; top: 50%; transform: translateY(-50%); font-size: 1.15rem; color: #94a3b8; pointer-events: none; }
/* ===== [가이드북 검색창] 끝 ===== */

/* ─────────────────────────────────────────────────────────────
   [2026-06-30] 히어로 영문라벨 상단 여백 — 공용 기준(SoT). (원장 요청)
   고정헤더(PC 80px / 모바일 64px) 아래 첫 영문라벨까지의 간격을 페이지마다
   제각각 하드코딩(5/6/7rem)해 와서 손볼 때마다 어긋나고 점프처럼 보였음.
   기준 간격 = 헤더 + 약 32px(PC) → 각 히어로 페이지 상단 패딩을 7rem 으로 통일.
     · 의료진소개(.staff-hero)  : 7rem  (doctors/index.astro)
     · 오시는길(.sect inline)   : 7rem  (location.astro)
     · 의료진칼럼(.page-header) : 7rem  (PageHeader override, blog/index.astro)
     · 비급여(.fees-hero)       : 7rem  (DB sections)
     · 가이드북(.hub-paper)     : 카드 레이아웃 → 아래에서 PC 상단패딩만 맞춤
   ⚠️ 향후 신규 히어로 페이지도 위 기준(헤더+32px ≈ 7rem)으로 맞춰 드리프트 방지.
   ───────────────────────────────────────────────────────────── */
/* 가이드북(/blog/category/*) 페이퍼카드 상단 여백 → 칼럼/오시는길과 동일 톤(PC 48→32px). */
@media (min-width: 768px) {
    .hub-paper { padding-top: 2rem !important; }
}