/* ─────────────────────────────────────────────────────────────
   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(20px);
    transition:
        opacity 1.5s cubic-bezier(0.22, 1, 0.36, 1),
        transform 1.5s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: opacity, transform;
}
[data-clinic-reveal].is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* 시차 — 메인 임팩트 배너 (강화: 0 / 700ms) */
[data-clinic-reveal].clinic-stagger-1 { transition-delay: 0ms; }
[data-clinic-reveal].clinic-stagger-2 { transition-delay: 700ms; }

/* 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);
    will-change: opacity;
}
.clinic-typed.clinic-typed-visible .clinic-typed-char {
    opacity: 1;
}
/* 카운터 진행 중 깜빡임 방지 (선택사항) */
[data-clinic-counter-running] { font-variant-numeric: tabular-nums; }

/* 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 블록 보강) */
@media (prefers-reduced-motion: reduce) {
    .hero__title .clinic-word,
    .hero__sub .clinic-word {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}

/* 접근성: 모션 줄이기 선호 시 모든 효과 비활성화 */
@media (prefers-reduced-motion: reduce) {
    [data-clinic-reveal],
    [data-clinic-reveal].is-visible {
        transition: none !important;
        transform: none !important;
        opacity: 1 !important;
    }
    .clinic-hover,
    [data-clinic-hover],
    a.btn,
    button,
    .card {
        transition: none !important;
    }
    .clinic-hover:hover,
    [data-clinic-hover]:hover,
    a.btn:hover,
    button:hover,
    .card:hover {
        transform: none !important;
    }
    .clinic-typed .clinic-typed-char {
        opacity: 1 !important;
        transition: none !important;
    }
}