/* ============================================================
   이음치과의원 — DESIGN PATCH v1
   인류 최고 디자이너 모드: 첫 인상의 명료함, 위계, 공감
   (style.css 뒤에 로드되어 우선순위로 덮어씀)
   ============================================================ */

/* ─────────────────────────────────────────────────────────────
   1. HERO TITLE — 가독성 + 시네마틱 위계 회복
   문제: 첫 두 줄도 너무 흐릿, accent 라인은 transparent + 가는 stroke만
        → 첫 인상이 "텅 빈 어두운 화면"
   해결: 화이트 + 미세한 글로우, accent는 골드 그라디언트로 풀필
   ───────────────────────────────────────────────────────────── */
.story-hero .title-word,
.hero .title-word {
  color: #FFFFFF !important;
  -webkit-text-stroke: 0 !important;
  text-shadow:
    0 2px 24px rgba(15, 27, 45, 0.55),
    0 0 60px rgba(42, 90, 143, 0.15);
  letter-spacing: -0.035em;
  font-weight: 700;
  /* FOUC/블러 방지 — GSAP 진입 애니메이션 중에도 즉시 보이게 */
  opacity: 1 !important;
}

/* 첫 두 줄 — 애니메이션이 아무리 돌아도 최종 상태는 명확히 */
.story-hero .title-line:not(.accent) .title-word,
.hero .title-line:not(.accent) .title-word {
  opacity: 1 !important;
  filter: none !important;
}

/* ★★ 핵심 수정 — hero-content를 vignette/depth-blur 위로 올림 */
.story-hero .hero-content,
.hero .hero-content {
  position: relative;
  z-index: 10 !important;
}

/* Vignette은 여전히 배경에 두되, 가독성 회복을 위해 약화 */
.story-hero .hero-vignette,
.hero .hero-vignette {
  background:
    radial-gradient(ellipse 75% 65% at 50% 45%, transparent 0%, rgba(10,22,40,0.12) 60%, rgba(10,22,40,0.45) 100%) !important;
  z-index: 3 !important;
}
.story-hero .hero-depth-blur,
.hero .hero-depth-blur {
  background: radial-gradient(circle at 50% 50%, transparent 40%, rgba(10,22,40,0.1) 100%) !important;
}

/* Accent 라인 — 골드 그라디언트 풀필, 깨끗한 광채 (blur 사각 제거) */
.story-hero .title-line.accent .title-word,
.hero .title-line.accent .title-word {
  -webkit-text-stroke: 0 !important;
  background: linear-gradient(180deg,
    #A8C4D4 0%,
    #7EA8BE 30%,
    #5E8BA3 70%,
    #8A6E3F 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  font-style: italic;
  /* 핵심: drop-shadow 제거 — 이게 사각 blur를 만들고 있었음 */
  filter: none !important;
  text-shadow: none !important;
  position: relative;
  display: inline-block;
}
/* 골드 텍스트에 아주 미묘한 서브 라인 (letterpress 느낌) */
.story-hero .title-line.accent,
.hero .title-line.accent {
  position: relative;
  display: block;
  margin-top: 0.1em;
}
.story-hero .title-line.accent::after,
.hero .title-line.accent::after {
  content: '';
  display: block;
  width: 60px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(126, 168, 190, 0.6), transparent);
  margin: 0.8em auto 0;
}

/* 기존 ::after shimmer 비활성화 — 어두운 navy 위 navy shimmer는 안 보였음 */
.story-hero .title-line.accent .title-word::after,
.hero .title-line.accent .title-word::after {
  display: none !important;
}

/* hero-tag 텍스트 — 골드 톤으로 통일 (어두운 navy는 안 보임) */
.story-hero .tag-text,
.hero .tag-text {
  color: #7EA8BE !important;
  opacity: 0.9;
}
.story-hero .tag-line,
.hero .tag-line {
  background: linear-gradient(90deg, transparent, #7EA8BE 50%, transparent) !important;
  opacity: 0.6;
}


/* ─────────────────────────────────────────────────────────────
   2. NAV — Hero 위에서 더 명료하게, 모바일 안 잘리게
   ───────────────────────────────────────────────────────────── */

/* Hero 위 nav — 텍스트 가독성 강화 */
#nav:not(.scrolled) .nav-brand {
  color: rgba(255, 255, 255, 0.95) !important;
  text-shadow: 0 2px 12px rgba(0,0,0,0.4);
}
#nav:not(.scrolled) .nav-booking,
#nav:not(.scrolled) .nav-menu-btn {
  color: rgba(255, 255, 255, 0.92) !important;
  border-color: rgba(255, 255, 255, 0.28) !important;
  background: rgba(15, 27, 45, 0.25);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
#nav:not(.scrolled) .nav-booking:hover,
#nav:not(.scrolled) .nav-menu-btn:hover {
  background: rgba(126, 168, 190, 0.95);
  color: #0F1B2D !important;
  border-color: #7EA8BE !important;
}

/* Scrolled 상태 — 흰 배경에서 navy 텍스트가 정확히 보이게 */
#nav.scrolled {
  background: rgba(255, 255, 255, 0.92) !important;
  backdrop-filter: blur(20px) saturate(1.4);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  border-bottom: 1px solid rgba(15, 27, 45, 0.06);
}
#nav.scrolled .nav-brand,
#nav.scrolled .nav-brand-mark,
#nav.scrolled .nav-menu-btn,
#nav.scrolled .nav-menu-btn span,
#nav.scrolled .nav-login-btn,
#nav.scrolled .nav-user-name,
#nav.scrolled .nav-user-logout {
  color: #0F1B2D !important;
}
#nav.scrolled .nav-menu-btn {
  border-color: rgba(15, 27, 45, 0.25) !important;
  background: transparent;
}
#nav.scrolled .nav-menu-btn:hover {
  border-color: #0F1B2D !important;
  background: rgba(15, 27, 45, 0.04);
}
#nav.scrolled .nav-login-btn {
  background: rgba(15, 27, 45, 0.05) !important;
  border: 1px solid rgba(15, 27, 45, 0.15) !important;
  padding: 0.5rem 1rem !important;
  border-radius: 100px !important;
  font-size: 0.75rem;
  font-weight: 500;
  transition: all 0.25s ease;
}
#nav.scrolled .nav-login-btn:hover {
  background: #0F1B2D !important;
  color: #FFFFFF !important;
  border-color: #0F1B2D !important;
}

/* 카카오 nav 버튼 — 항상 노랑 유지 */
.nav-kakao {
  background: #FEE500 !important;
  color: #3C1E1E !important;
  border: 1px solid #FEE500 !important;
}
.nav-kakao svg { fill: #3C1E1E !important; }
.nav-kakao:hover {
  background: #FFD600 !important;
  border-color: #FFD600 !important;
  transform: translateY(-1px);
}

/* 모바일 — nav가 4개(브랜드/예약/카카오/메뉴) 라 좁음 → MENU 잘림 방지 */
@media (max-width: 768px) {
  #nav {
    padding: 0.75rem 1rem !important;
    gap: 0.4rem;
  }
  .nav-brand {
    font-size: 1.15rem !important;
    flex-shrink: 0;
  }
  /* 모바일에서는 텍스트 라벨 숨기고 아이콘만 (공간 절약) */
  .nav-booking span,
  .nav-kakao span {
    display: none !important;
  }
  .nav-booking,
  .nav-kakao {
    padding: 0.55rem 0.75rem !important;
    width: 40px;
    height: 40px;
    border-radius: 50% !important;
    justify-content: center;
    flex-shrink: 0;
  }
  .nav-booking svg,
  .nav-kakao svg {
    width: 16px !important;
    height: 16px !important;
    opacity: 1 !important;
  }
  .nav-menu-btn {
    padding: 0.5rem 0.9rem !important;
    flex-shrink: 0;
  }
  .nav-menu-btn span {
    font-size: 0.6rem !important;
    letter-spacing: 0.2em !important;
  }
}

/* 모바일에서 더 좁아지면 — 워드마크 줄이고 MENU도 더 컴팩트 */
@media (max-width: 380px) {
  .nav-brand { font-size: 1rem !important; }
  .nav-menu-btn { padding: 0.5rem 0.7rem !important; }
  .nav-menu-btn span { font-size: 0.55rem !important; letter-spacing: 0.15em !important; }
}


/* ─────────────────────────────────────────────────────────────
   3. FLOATING CTA — 모바일에서 콘텐츠 가리지 않게 + 카카오 살리기
   ───────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .floating-cta-group {
    bottom: 1rem !important;
    right: 1rem !important;
    gap: 0.5rem !important;
  }
  .floating-btn {
    width: 50px !important;
    height: 50px !important;
  }
}

/* 카카오 — 그림자 살짝 더 따뜻하게 */
.floating-kakao {
  background: #FEE500 !important;
  box-shadow: 0 6px 20px rgba(254, 229, 0, 0.4), 0 2px 8px rgba(0,0,0,0.12) !important;
}


/* ─────────────────────────────────────────────────────────────
   4. DOCTORS PAGE — 1명일 때도 균형, 여러명일 때 더 우아한 그리드
   ───────────────────────────────────────────────────────────── */

/* 1명일 때: hero-spread 레이아웃 (사진 좌, 정보 우) */
.doctors-grid:has(.doctor-grid-item:only-child) {
  grid-template-columns: 1fr !important;
  max-width: 1000px;
  margin: 0 auto;
}
.doctors-grid:has(.doctor-grid-item:only-child) .doctor-grid-link {
  grid-template-columns: 0.9fr 1.1fr !important;
  display: grid !important;
  gap: 3rem !important;
  align-items: center;
  padding: 2.5rem !important;
}
.doctors-grid:has(.doctor-grid-item:only-child) .doctor-grid-photo {
  aspect-ratio: 4/5 !important;
  border-radius: 20px !important;
  overflow: hidden;
}
.doctors-grid:has(.doctor-grid-item:only-child) .doctor-grid-name {
  font-size: 2.2rem !important;
}
.doctors-grid:has(.doctor-grid-item:only-child) .doctor-grid-greeting {
  font-size: 1rem !important;
  line-height: 1.7 !important;
}

@media (max-width: 768px) {
  .doctors-grid:has(.doctor-grid-item:only-child) .doctor-grid-link {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
    padding: 1.5rem !important;
  }
  .doctors-grid:has(.doctor-grid-item:only-child) .doctor-grid-name {
    font-size: 1.6rem !important;
  }
}


/* ─────────────────────────────────────────────────────────────
   5. EMPTY STATES — "등록된 케이스가 없습니다" 같은 빈 상태에 품격
   ───────────────────────────────────────────────────────────── */
.empty-state {
  padding: 5rem 2rem !important;
  text-align: center;
  background: linear-gradient(180deg, #F8FAFC 0%, #FFFFFF 100%);
  border: 1px dashed rgba(15, 27, 45, 0.12);
  border-radius: 24px;
  position: relative;
  overflow: hidden;
}
.empty-state::before {
  content: '';
  display: block;
  width: 72px;
  height: 72px;
  margin: 0 auto 1.5rem;
  background: linear-gradient(135deg, #7EA8BE 0%, #5E8BA3 100%);
  border-radius: 50%;
  opacity: 0.15;
  position: relative;
}
.empty-state::after {
  content: '✦';
  position: absolute;
  top: 5rem;
  left: 50%;
  transform: translateX(-50%);
  font-size: 2.2rem;
  color: #5E8BA3;
  opacity: 0.6;
}
.empty-state p {
  font-size: 1.05rem !important;
  color: rgba(15, 27, 45, 0.55) !important;
  margin-bottom: 1.5rem;
  font-weight: 500;
}
/* Cases 페이지 빈 상태에 친절한 CTA 추가 (메시지 보강은 cases.tsx에서) */
.empty-state-cta-row {
  display: inline-flex;
  gap: 0.75rem;
  margin-top: 1rem;
  flex-wrap: wrap;
  justify-content: center;
}
.empty-state-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.75rem 1.5rem;
  border-radius: 100px;
  font-size: 0.9rem;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.3s var(--ease);
}
.empty-state-cta.primary {
  background: #0F1B2D;
  color: #FFFFFF;
}
.empty-state-cta.primary:hover {
  background: #1B3A5C;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(15, 27, 45, 0.25);
}
.empty-state-cta.secondary {
  background: transparent;
  color: #1B3A5C;
  border: 1px solid rgba(27, 58, 92, 0.25);
}
.empty-state-cta.secondary:hover {
  background: rgba(27, 58, 92, 0.05);
  border-color: rgba(27, 58, 92, 0.5);
}


/* ─────────────────────────────────────────────────────────────
   6. ABOUT — 인용문(quote) 디자인 격상
   ───────────────────────────────────────────────────────────── */
.page-about .mission-quote,
.page-about blockquote,
.about-quote {
  position: relative;
  padding: 3rem 2rem !important;
}
.about-quote::before,
.page-about .mission-quote::before {
  font-family: var(--font-en, 'DM Serif Display', serif);
  font-size: 6rem;
  line-height: 1;
  color: rgba(126, 168, 190, 0.35);
  position: absolute;
  top: -1rem;
  left: 50%;
  transform: translateX(-50%);
}


/* ─────────────────────────────────────────────────────────────
   7. SUB-PAGE HERO — 일관된 톤 (DOCTORS/FAQ/CASES 등 상단 영역)
   기존 page-hero-mini 강화
   ───────────────────────────────────────────────────────────── */
.page-hero-mini {
  background: linear-gradient(135deg, #0F1B2D 0%, #1B3A5C 100%) !important;
  padding: 5rem 0 4rem !important;
  position: relative;
  overflow: hidden;
}
.page-hero-mini::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background:
    radial-gradient(circle at 20% 30%, rgba(126, 168, 190, 0.15) 0%, transparent 40%),
    radial-gradient(circle at 80% 70%, rgba(42, 90, 143, 0.4) 0%, transparent 50%);
  pointer-events: none;
}
.page-hero-mini > .container-wide { position: relative; z-index: 1; }

.page-hero-mini .section-label.light {
  color: #7EA8BE !important;
  letter-spacing: 0.3em;
  font-size: 0.72rem;
  font-weight: 600;
}
.page-hero-mini .page-title {
  color: #FFFFFF !important;
  font-size: clamp(2.2rem, 5vw, 3.6rem) !important;
  font-weight: 700 !important;
  letter-spacing: -0.025em !important;
  margin: 1rem 0 !important;
}
.page-hero-mini .page-subtitle {
  color: rgba(245, 247, 250, 0.78) !important;
  font-size: 1.05rem !important;
  max-width: 640px;
  margin: 0 auto;
  line-height: 1.7 !important;
}

/* center-align sub-page hero text */
.page-hero-mini > .container-wide {
  text-align: center;
}

/* 모바일에서 sub hero — 좀 더 컴팩트 */
@media (max-width: 768px) {
  .page-hero-mini {
    padding: 3.5rem 0 3rem !important;
  }
  .page-hero-mini .page-title {
    font-size: 2rem !important;
  }
  .page-hero-mini .page-subtitle {
    font-size: 0.95rem !important;
    padding: 0 1rem;
  }
}


/* ─────────────────────────────────────────────────────────────
   8. 모바일 hero — 카피 잘 보이고 CTA도 잘 보이게
   ───────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .story-hero .hero-title,
  .hero .hero-title {
    margin-bottom: 2.5rem !important;
  }
  /* 카카오 CTA가 모바일에서 데드 그레이로 보였던 문제 해결 */
  .hero-cta-kakao {
    background: #FEE500 !important;
    color: #3C1E1E !important;
    border-color: #FEE500 !important;
  }
  .hero-cta-kakao svg { fill: #3C1E1E !important; }
  .hero-cta-kakao:hover {
    background: #FFD600 !important;
    border-color: #FFD600 !important;
  }
}

/* 데스크탑에서도 hero CTA 카카오는 노랑 유지 */
.hero-cta-kakao {
  background: #FEE500;
  color: #3C1E1E;
  border-color: #FEE500;
}
.hero-cta-kakao svg { fill: #3C1E1E; }
.hero-cta-kakao:hover {
  background: #FFD600;
  border-color: #FFD600;
  color: #3C1E1E;
}


/* ─────────────────────────────────────────────────────────────
   9. 미세 마감 — 셔틀이 디자인을 살린다
   ───────────────────────────────────────────────────────────── */

/* 본문 위 GSAP 진입 전 깜빡임 (FOUC) 방지 */
.story-hero { background-color: #0A1220; }

/* 데스크탑 hero에 미묘한 골드 액센트 라인 (좌측) */
@media (min-width: 1024px) {
  .story-hero::after,
  .hero::after {
    color: rgba(126, 168, 190, 0.25) !important;
  }
}


/* ═══════════════════════════════════════════════════════════════
   ▼▼▼  PATCH v2 — 인류 최고 디자이너 모드, 깊이 있는 프레이밍  ▼▼▼
   ═══════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────
   10. NAV BRAND — 워드마크 업그레이드 ("이음 · EUM · EST.2025")
   ───────────────────────────────────────────────────────────── */
.nav-brand--premium {
  display: inline-flex !important;
  align-items: baseline;
  gap: 0.55rem;
  text-decoration: none;
  position: relative;
}
.nav-brand-mark {
  font-family: var(--font-kr, 'Noto Sans KR', sans-serif);
  font-weight: 700;
  font-size: 1.35rem;
  letter-spacing: -0.02em;
  line-height: 1;
  color: inherit;
}
.nav-brand-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: linear-gradient(135deg, #A8C4D4, #5E8BA3);
  display: inline-block;
  transform: translateY(-2px);
  box-shadow: 0 0 10px rgba(126, 168, 190, 0.5);
}
.nav-brand-sub {
  font-family: var(--font-en, 'DM Serif Display', serif);
  font-style: italic;
  font-size: 0.68rem;
  letter-spacing: 0.22em;
  opacity: 0.6;
  font-weight: 400;
  text-transform: uppercase;
  color: inherit;
}
#nav:not(.scrolled) .nav-brand-sub { opacity: 0.7; }
#nav.scrolled .nav-brand-sub { opacity: 0.55; }

/* 모바일에서는 sub 숨기고 브랜드만 */
@media (max-width: 768px) {
  .nav-brand-sub { display: none !important; }
  .nav-brand-mark { font-size: 1.2rem; }
  .nav-brand-dot { width: 4px; height: 4px; }
}


/* ─────────────────────────────────────────────────────────────
   11. HERO FRAME — Constellation horizon + subtle grid overlay
   프리미엄 치과의 "정적인 아름다움" 연출
   ───────────────────────────────────────────────────────────── */
.hero-frame {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}
.hero-frame-horizon {
  position: absolute;
  left: 0; right: 0;
  /* 타이틀 아래, 서브카피 위로 이동 — 방해 최소화 */
  bottom: 22%;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(126, 168, 190, 0.06) 20%,
    rgba(126, 168, 190, 0.16) 50%,
    rgba(126, 168, 190, 0.06) 80%,
    transparent 100%);
  opacity: 0.6;
}
.hero-frame-horizon::before,
.hero-frame-horizon::after {
  content: '';
  position: absolute;
  top: -3px;
  width: 6px;
  height: 6px;
  border: 1px solid rgba(126, 168, 190, 0.4);
  border-radius: 50%;
  background: #0A1220;
}
.hero-frame-horizon::before { left: 10%; }
.hero-frame-horizon::after { right: 10%; }

.hero-frame-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.018) 1px, transparent 1px);
  background-size: 80px 80px;
  mask-image: radial-gradient(ellipse at center, black 20%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 20%, transparent 75%);
}

@media (max-width: 768px) {
  .hero-frame-horizon { display: none; }
  .hero-frame-grid { background-size: 60px 60px; opacity: 0.6; }
}


/* ─────────────────────────────────────────────────────────────
   12. HERO SUBCOPY — hook 다음의 정답 한 줄 (emotional payoff)
   ───────────────────────────────────────────────────────────── */
.hero-subcopy {
  max-width: 640px;
  margin: 2rem auto 0;
  text-align: center;
  font-family: var(--font-kr, 'Noto Sans KR', sans-serif);
  font-size: clamp(0.98rem, 1.4vw, 1.12rem);
  line-height: 1.75;
  color: rgba(245, 247, 250, 0.72);
  font-weight: 400;
  letter-spacing: -0.01em;
  position: relative;
  opacity: 0;
  animation: heroSubcopyFade 1.2s cubic-bezier(0.22, 1, 0.36, 1) 1.8s forwards;
}
.hero-subcopy-inner { display: inline-block; }
.hero-subcopy-accent {
  display: inline-block;
  color: rgba(245, 247, 250, 0.95);
  font-weight: 500;
  position: relative;
  margin-left: 0.3em;
}
.hero-subcopy-accent::before {
  content: '';
  display: inline-block;
  width: 1.2em;
  height: 1px;
  background: rgba(126, 168, 190, 0.6);
  margin-right: 0.7em;
  transform: translateY(-0.3em);
}
@keyframes heroSubcopyFade {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (max-width: 768px) {
  .hero-subcopy {
    margin-top: 1.5rem;
    padding: 0 1.25rem;
    font-size: 0.92rem;
    line-height: 1.7;
  }
  .hero-subcopy-accent {
    display: block;
    margin: 0.5em 0 0;
  }
  .hero-subcopy-accent::before { display: none; }
}


/* ─────────────────────────────────────────────────────────────
   13. HERO CTA — 위계 재설계: 카카오(primary) + 전화(ghost)
   ───────────────────────────────────────────────────────────── */
.hero-cta-wrap {
  display: flex !important;
  justify-content: center;
  gap: 0.75rem;
  margin-top: 2.5rem !important;
  flex-wrap: wrap;
  opacity: 0;
  animation: heroSubcopyFade 1.2s cubic-bezier(0.22, 1, 0.36, 1) 2.1s forwards;
}

/* Primary = Kakao yellow */
.hero-cta-primary.hero-cta-kakao {
  background: #FEE500 !important;
  color: #3C1E1E !important;
  border: none !important;
  padding: 0.95rem 1.8rem !important;
  border-radius: 100px !important;
  font-weight: 600;
  font-size: 0.95rem;
  box-shadow:
    0 10px 30px rgba(254, 229, 0, 0.35),
    0 2px 6px rgba(0, 0, 0, 0.2);
  transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
}
.hero-cta-primary.hero-cta-kakao svg { fill: #3C1E1E !important; }
.hero-cta-primary.hero-cta-kakao:hover {
  background: #FFD600 !important;
  transform: translateY(-2px);
  box-shadow:
    0 14px 36px rgba(254, 229, 0, 0.5),
    0 4px 10px rgba(0, 0, 0, 0.25);
}

/* Secondary = Ghost with gold underline on hover */
.hero-cta-ghost {
  background: transparent !important;
  color: rgba(245, 247, 250, 0.9) !important;
  border: 1px solid rgba(245, 247, 250, 0.22) !important;
  padding: 0.95rem 1.6rem !important;
  border-radius: 100px !important;
  font-weight: 500;
  font-size: 0.95rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.hero-cta-ghost:hover {
  color: #A8C4D4 !important;
  border-color: rgba(126, 168, 190, 0.6) !important;
  background: rgba(126, 168, 190, 0.06) !important;
  transform: translateY(-2px);
}

@media (max-width: 480px) {
  .hero-cta-wrap { flex-direction: column; width: 100%; padding: 0 1.5rem; }
  .hero-cta-primary.hero-cta-kakao,
  .hero-cta-ghost {
    width: 100%;
    justify-content: center;
  }
}


/* ─────────────────────────────────────────────────────────────
   14. HERO PROOF — 미시적 신뢰 지표 (star · reviews · years)
   ───────────────────────────────────────────────────────────── */
.hero-proof {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  margin: 2.5rem auto 0;
  padding: 0.9rem 1.75rem;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 100px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  opacity: 0;
  animation: heroSubcopyFade 1.2s cubic-bezier(0.22, 1, 0.36, 1) 2.4s forwards;
}
.hero-proof-item {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: rgba(245, 247, 250, 0.9);
  font-family: var(--font-kr, 'Noto Sans KR', sans-serif);
}
.hero-proof-star {
  color: #FEE500;
  font-size: 1.05rem;
  line-height: 1;
  filter: drop-shadow(0 0 6px rgba(254, 229, 0, 0.5));
}
.hero-proof-num {
  font-family: var(--font-en, 'DM Serif Display', serif);
  font-weight: 400;
  font-size: 1.15rem;
  letter-spacing: -0.02em;
  color: #FFFFFF;
}
.hero-proof-plus,
.hero-proof-unit {
  font-size: 0.7em;
  color: rgba(126, 168, 190, 0.9);
  margin-left: 0.1em;
  font-style: italic;
}
.hero-proof-label {
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  color: rgba(245, 247, 250, 0.55);
  font-weight: 400;
}
.hero-proof-sep {
  width: 1px;
  height: 18px;
  background: linear-gradient(to bottom, transparent, rgba(255,255,255,0.2), transparent);
  display: inline-block;
}

@media (max-width: 640px) {
  .hero-proof {
    gap: 0.9rem;
    padding: 0.75rem 1rem;
    font-size: 0.9rem;
    margin-top: 2rem;
    flex-wrap: wrap;
    max-width: calc(100% - 2rem);
  }
  .hero-proof-num { font-size: 1rem; }
  .hero-proof-label { font-size: 0.65rem; }
  .hero-proof-sep { height: 14px; }
}
@media (max-width: 380px) {
  .hero-proof-sep { display: none; }
  .hero-proof { gap: 0.6rem; }
}


/* ─────────────────────────────────────────────────────────────
   15. HERO TITLE — 위계 미세 조정 (size/weight/spacing)
   ───────────────────────────────────────────────────────────── */
.story-hero .hero-title,
.hero .hero-title {
  margin: 1.25rem auto 0 !important;
  line-height: 0.95;
}
.story-hero .title-word,
.hero .title-word {
  font-size: clamp(3.2rem, 9vw, 7rem) !important;
  font-weight: 700;
  letter-spacing: -0.045em !important;
  line-height: 1 !important;
}
.story-hero .title-line.accent .title-word,
.hero .title-line.accent .title-word {
  font-size: clamp(3.2rem, 9.5vw, 7.2rem) !important;
  letter-spacing: -0.04em !important;
  font-weight: 500;
}
@media (max-width: 768px) {
  .story-hero .title-word,
  .hero .title-word {
    font-size: clamp(2.6rem, 13vw, 4.2rem) !important;
  }
}


/* ─────────────────────────────────────────────────────────────
   16. HERO TAG — 상단 EUM DENTAL CLINIC 라벨 미세 튠
   ───────────────────────────────────────────────────────────── */
.story-hero .hero-tag,
.hero .hero-tag {
  margin-bottom: 2rem;
  opacity: 0.95;
}
.story-hero .tag-text,
.hero .tag-text {
  font-size: 0.72rem !important;
  letter-spacing: 0.3em !important;
  font-weight: 500;
}


/* ─────────────────────────────────────────────────────────────
   17. Scroll hint — 심플한 하트비트
   ───────────────────────────────────────────────────────────── */
.hero-scroll-hint {
  opacity: 0;
  animation: heroSubcopyFade 1s ease 2.8s forwards;
}
.hero-scroll-hint span {
  font-size: 0.62rem !important;
  letter-spacing: 0.4em !important;
  color: rgba(245, 247, 250, 0.45) !important;
}


/* ─────────────────────────────────────────────────────────────
   18. 부수적 fix — hero-bottom margin 조정 (proof row 추가 후)
   ───────────────────────────────────────────────────────────── */
.hero-bottom {
  margin-top: 3rem !important;
}
@media (max-width: 768px) {
  .hero-bottom { margin-top: 2rem !important; }
}


/* ═══════════════════════════════════════════════════════════════
   ▼▼▼  PATCH v3 — NAVER BOOKING CTA (세 번째 전환 채널)
   브랜드 컬러: Naver Green #03C75A
   ═══════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────
   19. HERO — 네이버 예약 버튼 (카카오 옆, 전화 ghost 앞)
   ───────────────────────────────────────────────────────────── */
.hero-cta-naver {
  background: #03C75A !important;
  color: #FFFFFF !important;
  border: none !important;
  padding: 0.95rem 1.6rem !important;
  border-radius: 100px !important;
  font-weight: 600;
  font-size: 0.95rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  box-shadow:
    0 10px 26px rgba(3, 199, 90, 0.3),
    0 2px 6px rgba(0, 0, 0, 0.18);
  transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
  text-decoration: none;
}
.hero-cta-naver svg { fill: #FFFFFF !important; }
.hero-cta-naver:hover {
  background: #02B351 !important;
  transform: translateY(-2px);
  color: #FFFFFF !important;
  box-shadow:
    0 14px 32px rgba(3, 199, 90, 0.45),
    0 4px 10px rgba(0, 0, 0, 0.22);
}

/* Hero CTA — 폰 버튼에도 아이콘 들어갔으니 배치 정렬 */
.hero-cta-ghost svg { opacity: 0.85; }

@media (max-width: 640px) {
  /* 모바일에서 세 버튼 풀폭 스택 */
  .hero-cta-wrap {
    flex-direction: column;
    width: 100%;
    padding: 0 1.5rem;
    gap: 0.6rem !important;
  }
  .hero-cta-primary.hero-cta-kakao,
  .hero-cta-naver,
  .hero-cta-ghost {
    width: 100%;
    justify-content: center;
  }
}


/* ─────────────────────────────────────────────────────────────
   20. FLOATING CTA — 3-button stack (카카오·예약·전화)
   이전 2-button에서 확장, 라벨 마이크로 타이포 포함
   ───────────────────────────────────────────────────────────── */
.floating-cta-group {
  gap: 0.6rem !important;
}
.floating-btn {
  position: relative;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-direction: column;
  gap: 0.1rem !important;
  transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.floating-btn-label {
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1;
  margin-top: 1px;
}

/* Naver button — green brand */
.floating-naver {
  background: #03C75A !important;
  color: #FFFFFF !important;
  box-shadow:
    0 6px 20px rgba(3, 199, 90, 0.38),
    0 2px 8px rgba(0, 0, 0, 0.12) !important;
}
.floating-naver svg { fill: #FFFFFF !important; }
.floating-naver:hover {
  background: #02B351 !important;
  transform: scale(1.08);
  box-shadow:
    0 10px 28px rgba(3, 199, 90, 0.55),
    0 4px 12px rgba(0, 0, 0, 0.18) !important;
}
.floating-naver .floating-btn-label { color: #FFFFFF; }

/* Kakao/Call floating button labels 색상 */
.floating-kakao .floating-btn-label { color: #3C1E1E; }
.floating-call .floating-btn-label { color: rgba(255, 255, 255, 0.92); }

@media (max-width: 768px) {
  .floating-btn-label { font-size: 0.52rem !important; }
  .floating-btn svg {
    width: 16px !important;
    height: 16px !important;
  }
}


/* ─────────────────────────────────────────────────────────────
   21. CONTACT 섹션 — 네이버 예약 버튼
   ───────────────────────────────────────────────────────────── */
.naver-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.7rem 1.25rem;
  background: #03C75A;
  color: #FFFFFF !important;
  border-radius: 100px;
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
  box-shadow: 0 4px 14px rgba(3, 199, 90, 0.3);
}
.naver-btn svg { fill: #FFFFFF; }
.naver-btn:hover {
  background: #02B351;
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(3, 199, 90, 0.45);
  color: #FFFFFF !important;
}


/* ─────────────────────────────────────────────────────────────
   22. EMPTY STATE — 네이버 CTA variant
   ───────────────────────────────────────────────────────────── */
.empty-state-cta.naver {
  background: #03C75A;
  color: #FFFFFF;
  border: none;
  box-shadow: 0 4px 14px rgba(3, 199, 90, 0.28);
}
.empty-state-cta.naver:hover {
  background: #02B351;
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(3, 199, 90, 0.45);
}


/* ─────────────────────────────────────────────────────────────
   23. FULL MENU — 네이버 예약 링크
   ───────────────────────────────────────────────────────────── */
.menu-naver-link {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  color: #03C75A !important;
  font-weight: 600;
  text-decoration: none;
  margin-top: 0.4rem;
  transition: all 0.25s ease;
  font-size: 0.95rem;
}
.menu-naver-link:hover {
  color: #02B351 !important;
  transform: translateX(3px);
}
.menu-naver-link::before {
  content: 'N';
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  background: #03C75A;
  color: #FFFFFF;
  border-radius: 4px;
  font-size: 0.72rem;
  font-weight: 800;
  font-family: var(--font-en, 'Inter', sans-serif);
  margin-right: 0.25rem;
}


/* ─────────────────────────────────────────────────────────────
   24. DICTIONARY CTA — 네이버 예약 variant
   ───────────────────────────────────────────────────────────── */
.dict-cta-btn.naver {
  background: #03C75A !important;
  color: #FFFFFF !important;
  border: none !important;
  box-shadow: 0 4px 14px rgba(3, 199, 90, 0.28);
}
.dict-cta-btn.naver svg { fill: #FFFFFF; }
.dict-cta-btn.naver:hover {
  background: #02B351 !important;
  color: #FFFFFF !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(3, 199, 90, 0.45);
}


/* ─────────────────────────────────────────────────────────────
   25. NAV — 네이버 예약 버튼 색상 (녹색 강조)
   기존엔 투명 glass였음 → 네이버 초록으로 브랜드 인지 강화
   ───────────────────────────────────────────────────────────── */
.nav-booking {
  background: rgba(3, 199, 90, 0.95) !important;
  color: #FFFFFF !important;
  border: 1px solid #03C75A !important;
}
.nav-booking svg { fill: #FFFFFF !important; opacity: 1 !important; }
.nav-booking:hover {
  background: #02B351 !important;
  border-color: #02B351 !important;
  color: #FFFFFF !important;
  transform: translateY(-1px);
}
/* Scrolled 상태에서도 녹색 유지 */
#nav.scrolled .nav-booking {
  background: #03C75A !important;
  color: #FFFFFF !important;
  border-color: #03C75A !important;
}
/* Hero 위에서도 녹색 — 투명 배경 덮어씀 */
#nav:not(.scrolled) .nav-booking {
  background: rgba(3, 199, 90, 0.95) !important;
  color: #FFFFFF !important;
  border-color: #03C75A !important;
}


/* ═══════════════════════════════════════════════════════════════
   FLOATING CTA v3 — 3-버튼 수직 스택 겹침 완전 해소
   문제: Kakao / Naver / Call 3버튼이 hover scale·pulse ring으로
        서로 침범 → 시각적 답답함 + 클릭 영역 겹침
   해결: 1) 충분한 gap 확보, 2) pulse ring inset 축소,
        3) hover 시 transform-origin center로 자리 고정,
        4) 모바일 공간 최적화, 5) 라벨 레이아웃 폴백
   ═══════════════════════════════════════════════════════════════ */

/* 그룹 컨테이너 — 간격 재조정 */
.floating-cta-group {
  gap: 14px !important;          /* 12 → 14 (hover scale 1.1 시에도 여유) */
  bottom: 1.75rem !important;
  right: 1.5rem !important;
  align-items: center !important;
}

/* 버튼 기본 — 중심 기준 transform, 겹침 방지 */
.floating-cta-group .floating-btn {
  width: 54px !important;
  height: 54px !important;
  flex: 0 0 auto !important;
  transform-origin: center center !important;
  will-change: transform, box-shadow;
  overflow: visible;              /* pulse ring이 잘리지 않게 */
}

/* hover scale 축소 — 이웃 침범 방지 (1.1 → 1.06) */
.floating-cta-group .floating-kakao:hover,
.floating-cta-group .floating-naver:hover,
.floating-cta-group .floating-call:hover {
  transform: scale(1.06) !important;
}

/* Pulse ring — 전화 버튼 주변 고리를 내부로 당김 (inset:-4px → 0) */
.floating-cta-group .floating-call::after {
  inset: 0 !important;
  border: 1.5px solid rgba(42, 90, 143, 0.55) !important;
  opacity: 0.8;
}

/* Naver 버튼 — 라벨 있을 때도 N 로고/예약 안 밀리게 */
.floating-naver {
  font-weight: 800;
  font-size: 12px;
  letter-spacing: -0.02em;
}
.floating-naver span {
  line-height: 1;
  pointer-events: none;
}

/* 버튼 라벨 — 데스크톱에선 툴팁처럼 좌측 호버 노출, 모바일 숨김 */
.floating-btn .floating-btn-label {
  display: none;              /* 기본 숨김 — 버튼 자체 시그널로 충분 */
}
@media (min-width: 769px) {
  .floating-btn:hover .floating-btn-label {
    display: block;
    position: absolute;
    right: calc(100% + 10px);
    top: 50%;
    transform: translateY(-50%);
    white-space: nowrap;
    padding: 5px 9px;
    background: rgba(15, 27, 45, 0.92);
    color: #fff;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: -0.01em;
    pointer-events: none;
  }
}

/* ── 모바일(≤768) — 더 촘촘 but 겹치지 않게 ── */
@media (max-width: 768px) {
  .floating-cta-group {
    gap: 12px !important;
    bottom: 1rem !important;
    right: 1rem !important;
  }
  .floating-cta-group .floating-btn {
    width: 48px !important;
    height: 48px !important;
  }
  .floating-cta-group .floating-btn svg {
    width: 18px !important;
    height: 18px !important;
  }
  .floating-naver {
    font-size: 11px !important;
  }
  /* 모바일에서 hover scale 거의 제거 (터치 상태) */
  .floating-cta-group .floating-btn:hover {
    transform: scale(1.03) !important;
  }
}

/* ── 매우 작은 뷰포트(≤380) — iPhone SE ── */
@media (max-width: 380px) {
  .floating-cta-group {
    gap: 10px !important;
    bottom: 0.75rem !important;
    right: 0.75rem !important;
  }
  .floating-cta-group .floating-btn {
    width: 44px !important;
    height: 44px !important;
  }
}


/* ═══════════════════════════════════════════════════════════════
   HERO CTA v4 — 실기기 실사용 피드백 반영
   원장님 실사용: "카카오톡 버튼 색이 유저 모르냐" = 너무 흐릿
   해결:
   1) 카카오 = 샛노랑 그대로 유지 (primary)
   2) 네이버 예약 = 녹색 브랜드 컬러로 히어로에서도 단단한 실체
   3) 전화(ghost) = 다크 배경에서도 윤곽 뚜렷하게 (border·텍스트 톤업)
   ═══════════════════════════════════════════════════════════════ */

/* 네이버 예약 — 히어로에서도 필드 옐로우·그린 대비 확실히 */
.hero-cta-wrap .hero-cta-naver {
  background: #03C75A !important;
  color: #FFFFFF !important;
  border: none !important;
  padding: 0.95rem 1.8rem !important;
  border-radius: 100px !important;
  font-weight: 700 !important;
  font-size: 0.95rem !important;
  letter-spacing: -0.01em !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.55rem !important;
  box-shadow:
    0 10px 30px rgba(3, 199, 90, 0.38),
    0 2px 6px rgba(0, 0, 0, 0.2) !important;
  transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.hero-cta-wrap .hero-cta-naver svg { fill: #FFFFFF !important; }
.hero-cta-wrap .hero-cta-naver:hover {
  background: #02B351 !important;
  transform: translateY(-2px);
  box-shadow:
    0 14px 36px rgba(3, 199, 90, 0.55),
    0 4px 10px rgba(0, 0, 0, 0.25) !important;
}

/* Ghost(전화) — 다크 배경에서도 '존재감' 확보: 윤곽·글자 밝기 up */
.hero-cta-wrap .hero-cta-ghost {
  background: rgba(255, 255, 255, 0.05) !important;
  color: #FFFFFF !important;
  border: 1.5px solid rgba(255, 255, 255, 0.35) !important;
  padding: 0.95rem 1.6rem !important;
  border-radius: 100px !important;
  font-weight: 600 !important;
  font-size: 0.9rem !important;
  letter-spacing: -0.01em !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.hero-cta-wrap .hero-cta-ghost svg { stroke: #FFFFFF !important; opacity: 0.9; }
.hero-cta-wrap .hero-cta-ghost:hover {
  background: rgba(255, 255, 255, 0.12) !important;
  border-color: rgba(126, 168, 190, 0.85) !important;
  color: #A8C4D4 !important;
  transform: translateY(-2px);
}
.hero-cta-wrap .hero-cta-ghost:hover svg { stroke: #A8C4D4 !important; }

/* 카카오 — 이미 노란색이지만 한번 더 강제 (구버전 덮개 방지) */
.hero-cta-wrap .hero-cta-kakao,
.hero-cta-wrap a.hero-cta-btn.hero-cta-kakao,
.hero-cta-wrap a.hero-cta-btn.hero-cta-primary {
  background: #FEE500 !important;
  color: #1A1000 !important;
  border: none !important;
  padding: 0.95rem 1.8rem !important;
  border-radius: 100px !important;
  font-weight: 700 !important;
  font-size: 0.95rem !important;
  letter-spacing: -0.01em !important;
  box-shadow:
    0 10px 30px rgba(254, 229, 0, 0.42),
    0 2px 6px rgba(0, 0, 0, 0.2) !important;
}
.hero-cta-wrap .hero-cta-kakao svg,
.hero-cta-wrap a.hero-cta-btn.hero-cta-kakao svg { fill: #1A1000 !important; }
.hero-cta-wrap .hero-cta-kakao:hover {
  background: #FFD600 !important;
  transform: translateY(-2px);
}

/* 히어로 CTA 컨테이너 — 3버튼 정렬 */
.hero-cta-wrap {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  gap: 0.75rem !important;
  align-items: center !important;
}

/* 모바일 — 3버튼 세로 풀너비 + 위계 명확 */
@media (max-width: 768px) {
  .hero-cta-wrap {
    flex-direction: column !important;
    padding: 0 1.25rem !important;
    gap: 0.6rem !important;
  }
  .hero-cta-wrap .hero-cta-kakao,
  .hero-cta-wrap .hero-cta-naver,
  .hero-cta-wrap .hero-cta-ghost {
    width: 100% !important;
    justify-content: center !important;
    padding: 1rem 1.5rem !important;
    font-size: 0.9rem !important;
    letter-spacing: -0.01em !important;  /* 기존 0.22em 광폭 리셋 */
  }
  /* 모바일에서 구버전 규칙(.hero-cta-btn 광폭 letter-spacing) 무효화 */
  .hero-cta-wrap .hero-cta-btn {
    letter-spacing: -0.01em !important;
    font-size: 0.9rem !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   HERO REDESIGN v5 — 모바일 히어로 전면 재설계 (2026-04-19)
   문제: 숫자 떠다님, 마퀴 스팸, 이미지 잘림, CTA 위계 부재
   해결: 신뢰도 카드화 + 마퀴 톤 조정 + 갤러리 정돈 + CTA 위계 강화
═══════════════════════════════════════════════════════════════════════ */

/* ─── 1. HERO PROOF — 신뢰 지표 카드화 ─── */
.hero-proof {
  display: flex !important;
  align-items: stretch !important;
  justify-content: center !important;
  gap: 0 !important;
  margin: 2rem auto 0 !important;
  padding: 1rem 1.2rem !important;
  max-width: 560px !important;
  width: calc(100% - 2rem) !important;
  background: linear-gradient(135deg, rgba(15,27,45,0.55) 0%, rgba(42,90,143,0.35) 100%) !important;
  backdrop-filter: blur(16px) saturate(140%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(140%) !important;
  border: 1px solid rgba(255,255,255,0.14) !important;
  border-radius: 18px !important;
  box-shadow: 
    0 8px 32px rgba(0,0,0,0.35),
    inset 0 1px 0 rgba(255,255,255,0.08) !important;
  position: relative !important;
  z-index: 10 !important;
}

.hero-proof-item {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.35rem !important;
  padding: 0.25rem 0.5rem !important;
  text-align: center !important;
  min-width: 0 !important;
}

.hero-proof-num {
  font-family: 'Playfair Display', 'Noto Serif KR', serif !important;
  font-size: 1.75rem !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  letter-spacing: -0.02em !important;
  background: linear-gradient(180deg, #A8C4D4 0%, #7EA8BE 50%, #5E8BA3 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  display: inline-flex !important;
  align-items: baseline !important;
  gap: 0.08em !important;
  text-shadow: none !important;
}

.hero-proof-star {
  font-size: 1.1rem !important;
  color: #7EA8BE !important;
  margin-right: 0.25rem !important;
  display: inline-block !important;
  text-shadow: 0 0 12px rgba(126, 168, 190,0.6) !important;
}

.hero-proof-plus,
.hero-proof-unit {
  font-size: 0.8em !important;
  font-weight: 600 !important;
  opacity: 0.9 !important;
  -webkit-text-fill-color: transparent !important;
  background: inherit !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
}

.hero-proof-label {
  font-size: 0.68rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.08em !important;
  color: rgba(255,255,255,0.72) !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
  line-height: 1.2 !important;
}

.hero-proof-sep {
  display: block !important;
  width: 1px !important;
  background: linear-gradient(180deg, 
    transparent 0%, 
    rgba(255,255,255,0.18) 20%, 
    rgba(255,255,255,0.18) 80%, 
    transparent 100%) !important;
  margin: 0.5rem 0 !important;
  flex-shrink: 0 !important;
}

/* 모바일: 신뢰 카드 최적화 */
@media (max-width: 768px) {
  .hero-proof {
    margin: 1.5rem auto 0 !important;
    padding: 0.9rem 0.75rem !important;
    width: calc(100% - 1.5rem) !important;
    border-radius: 16px !important;
  }
  .hero-proof-item {
    padding: 0.15rem 0.35rem !important;
    gap: 0.3rem !important;
  }
  .hero-proof-num {
    font-size: 1.45rem !important;
  }
  .hero-proof-star {
    font-size: 0.95rem !important;
    margin-right: 0.15rem !important;
  }
  .hero-proof-label {
    font-size: 0.6rem !important;
    letter-spacing: 0.06em !important;
  }
}

@media (max-width: 380px) {
  .hero-proof {
    padding: 0.8rem 0.5rem !important;
  }
  .hero-proof-num {
    font-size: 1.25rem !important;
  }
  .hero-proof-label {
    font-size: 0.55rem !important;
  }
}

/* ─── 2. MARQUEE — 톤 조정 (스팸 제거) ─── */
.marquee-band {
  background: linear-gradient(90deg, 
    rgba(15,27,45,0.02) 0%, 
    rgba(42,90,143,0.04) 50%, 
    rgba(15,27,45,0.02) 100%) !important;
  border-top: 1px solid rgba(15,27,45,0.06) !important;
  border-bottom: 1px solid rgba(15,27,45,0.06) !important;
  padding: 1rem 0 !important;
  overflow: hidden !important;
  position: relative !important;
}

.marquee-band::before,
.marquee-band::after {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  bottom: 0 !important;
  width: 80px !important;
  pointer-events: none !important;
  z-index: 2 !important;
}
.marquee-band::before {
  left: 0 !important;
  background: linear-gradient(90deg, #FAFBFC 0%, transparent 100%) !important;
}
.marquee-band::after {
  right: 0 !important;
  background: linear-gradient(270deg, #FAFBFC 0%, transparent 100%) !important;
}

.marquee-band.dark {
  background: linear-gradient(90deg, #0F1B2D 0%, #1a2d4a 50%, #0F1B2D 100%) !important;
  border-color: rgba(255,255,255,0.08) !important;
}
.marquee-band.dark::before {
  background: linear-gradient(90deg, #0F1B2D 0%, transparent 100%) !important;
}
.marquee-band.dark::after {
  background: linear-gradient(270deg, #0F1B2D 0%, transparent 100%) !important;
}

.marquee-band .marquee-track span {
  font-family: 'Playfair Display', 'Noto Serif KR', serif !important;
  font-size: 0.85rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.25em !important;
  color: rgba(15,27,45,0.42) !important;
  text-transform: uppercase !important;
  padding: 0 1.5rem !important;
}
.marquee-band.dark .marquee-track span {
  color: rgba(126, 168, 190,0.55) !important;
}

@media (max-width: 768px) {
  .marquee-band {
    padding: 0.6rem 0 !important;
  }
  .marquee-band .marquee-track span {
    font-size: 0.65rem !important;
    letter-spacing: 0.18em !important;
    padding: 0 1rem !important;
  }
  .marquee-band::before,
  .marquee-band::after {
    width: 40px !important;
  }
}

/* ─── 3. GALLERY STRIP — 이미지 정돈 ─── */
.gallery-strip {
  padding: 2rem 0 !important;
  overflow: hidden !important;
  position: relative !important;
  background: linear-gradient(180deg, #FAFBFC 0%, #F5F7FA 50%, #FAFBFC 100%) !important;
}

.gallery-strip::before,
.gallery-strip::after {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  bottom: 0 !important;
  width: 60px !important;
  pointer-events: none !important;
  z-index: 3 !important;
}
.gallery-strip::before {
  left: 0 !important;
  background: linear-gradient(90deg, #FAFBFC 0%, transparent 100%) !important;
}
.gallery-strip::after {
  right: 0 !important;
  background: linear-gradient(270deg, #FAFBFC 0%, transparent 100%) !important;
}

.gallery-item {
  border-radius: 12px !important;
  overflow: hidden !important;
  box-shadow: 
    0 4px 16px rgba(15,27,45,0.08),
    0 1px 3px rgba(15,27,45,0.06) !important;
  transition: transform 0.5s cubic-bezier(0.16,1,0.3,1), box-shadow 0.5s !important;
  position: relative !important;
}

.gallery-item:hover {
  box-shadow: 
    0 12px 32px rgba(15,27,45,0.16),
    0 2px 6px rgba(15,27,45,0.08) !important;
}

.gallery-caption {
  position: absolute !important;
  bottom: 0.75rem !important;
  left: 0.75rem !important;
  font-family: 'Playfair Display', 'Noto Serif KR', serif !important;
  font-size: 0.62rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.18em !important;
  color: #FFFFFF !important;
  background: rgba(15,27,45,0.55) !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
  padding: 0.3rem 0.65rem !important;
  border-radius: 4px !important;
  text-transform: uppercase !important;
  z-index: 2 !important;
}

@media (max-width: 768px) {
  .gallery-strip {
    padding: 1.5rem 0 !important;
  }
  .gallery-item {
    border-radius: 10px !important;
    flex-shrink: 0 !important;
  }
  .gallery-caption {
    font-size: 0.55rem !important;
    padding: 0.25rem 0.5rem !important;
    bottom: 0.5rem !important;
    left: 0.5rem !important;
  }
}

/* ─── 4. HERO CTA — 시각 위계 재정립 ─── */
/* 네이버 예약 = 1st priority (가장 눈에 띄게) */
.hero-cta-wrap .hero-cta-naver {
  background: linear-gradient(135deg, #03C75A 0%, #02A84D 100%) !important;
  color: #FFFFFF !important;
  border: none !important;
  box-shadow: 
    0 8px 24px rgba(3,199,90,0.35),
    0 2px 8px rgba(3,199,90,0.25),
    inset 0 1px 0 rgba(255,255,255,0.2) !important;
  font-weight: 700 !important;
  position: relative !important;
  overflow: hidden !important;
}

.hero-cta-wrap .hero-cta-naver::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(135deg, rgba(255,255,255,0.15) 0%, transparent 50%) !important;
  opacity: 0 !important;
  transition: opacity 0.3s !important;
}

.hero-cta-wrap .hero-cta-naver:hover {
  background: linear-gradient(135deg, #02B351 0%, #029640 100%) !important;
  transform: translateY(-2px) !important;
  box-shadow: 
    0 12px 32px rgba(3,199,90,0.45),
    0 4px 12px rgba(3,199,90,0.3) !important;
}
.hero-cta-wrap .hero-cta-naver:hover::before {
  opacity: 1 !important;
}

/* 카카오 = 2nd (친숙한 옐로우) */
.hero-cta-wrap .hero-cta-kakao,
.hero-cta-wrap .hero-cta-primary.hero-cta-kakao {
  background: #FEE500 !important;
  color: #3C1E1E !important;
  border: none !important;
  box-shadow: 
    0 6px 20px rgba(254,229,0,0.3),
    0 2px 6px rgba(254,229,0,0.2) !important;
  font-weight: 700 !important;
}
.hero-cta-wrap .hero-cta-kakao:hover {
  background: #FFD600 !important;
  transform: translateY(-2px) !important;
  box-shadow: 
    0 10px 28px rgba(254,229,0,0.4),
    0 3px 10px rgba(254,229,0,0.25) !important;
}

/* 전화 = 3rd (고스트, 보조) */
.hero-cta-wrap .hero-cta-ghost {
  background: rgba(255,255,255,0.06) !important;
  color: #FFFFFF !important;
  border: 1.5px solid rgba(255,255,255,0.28) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  font-weight: 600 !important;
  box-shadow: none !important;
}
.hero-cta-wrap .hero-cta-ghost:hover {
  background: rgba(255,255,255,0.12) !important;
  border-color: rgba(255,255,255,0.5) !important;
  color: #FFFFFF !important;
  transform: translateY(-2px) !important;
}

/* 데스크톱: 3채널 가로 */
@media (min-width: 769px) {
  .hero-cta-wrap {
    display: flex !important;
    flex-direction: row !important;
    gap: 0.75rem !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
  }
  .hero-cta-wrap .hero-cta-btn {
    padding: 0.95rem 1.6rem !important;
    font-size: 0.95rem !important;
    width: auto !important;
  }
  /* 예약이 가운데 가장 크게 */
  .hero-cta-wrap .hero-cta-naver {
    order: 2 !important;
    padding: 1.05rem 2rem !important;
    font-size: 1rem !important;
    transform: scale(1.05) !important;
  }
  .hero-cta-wrap .hero-cta-naver:hover {
    transform: scale(1.05) translateY(-2px) !important;
  }
  .hero-cta-wrap .hero-cta-kakao { order: 1 !important; }
  .hero-cta-wrap .hero-cta-ghost { order: 3 !important; }
}

/* 모바일: 세로 풀폭, 예약 최상단 */
@media (max-width: 768px) {
  .hero-cta-wrap {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.65rem !important;
    width: 100% !important;
    max-width: 340px !important;
    margin: 1.75rem auto 0 !important;
    padding: 0 1rem !important;
  }
  .hero-cta-wrap .hero-cta-btn {
    width: 100% !important;
    padding: 0.95rem 1.2rem !important;
    font-size: 0.9rem !important;
    font-weight: 700 !important;
    letter-spacing: -0.01em !important;
    border-radius: 100px !important;
    justify-content: center !important;
  }
  .hero-cta-wrap .hero-cta-naver {
    order: 1 !important;
    padding: 1.05rem 1.2rem !important;
    font-size: 0.95rem !important;
  }
  .hero-cta-wrap .hero-cta-kakao { order: 2 !important; }
  .hero-cta-wrap .hero-cta-ghost { order: 3 !important; }
}

/* ─── 5. NAV — 상단 네비 정돈 ─── */
@media (max-width: 768px) {
  #nav {
    padding: 0.7rem 1rem !important;
  }
  #nav .nav-brand {
    font-size: 0.95rem !important;
    letter-spacing: 0.08em !important;
    white-space: nowrap !important;
  }
  #nav .nav-est {
    display: none !important; /* 모바일에서 EST.2025 숨김 (잘림 방지) */
  }
  #nav .nav-booking {
    padding: 0.45rem 0.85rem !important;
    font-size: 0.7rem !important;
    letter-spacing: 0.06em !important;
    background: linear-gradient(135deg, #03C75A 0%, #02A84D 100%) !important;
    color: #FFFFFF !important;
    border: none !important;
    border-radius: 100px !important;
    box-shadow: 0 4px 12px rgba(3,199,90,0.3) !important;
    font-weight: 600 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.3rem !important;
  }
}

/* ─── 6. HERO CONTENT — z-index 정돈 ─── */
.hero-content {
  position: relative !important;
  z-index: 10 !important;
}

.hero-subcopy {
  position: relative !important;
  z-index: 10 !important;
  color: rgba(255,255,255,0.88) !important;
  text-shadow: 0 2px 12px rgba(15,27,45,0.4) !important;
}

.hero-subcopy-accent {
  color: #7EA8BE !important;
  font-weight: 600 !important;
}

/* End of HERO REDESIGN v5 ═══════════════════════════════════════════ */

/* ─── 7. FLOATING CTA — 전화 버튼 톤 조정 (회색→네이비) ─── */
.floating-cta-group .floating-call {
  background: linear-gradient(135deg, #1a2d4a 0%, #0F1B2D 100%) !important;
  color: #FFFFFF !important;
  border: 1.5px solid rgba(126, 168, 190,0.35) !important;
  box-shadow: 
    0 6px 20px rgba(15,27,45,0.35),
    0 2px 6px rgba(15,27,45,0.25) !important;
}
.floating-cta-group .floating-call:hover {
  background: linear-gradient(135deg, #2a4068 0%, #1a2d4a 100%) !important;
  border-color: rgba(126, 168, 190,0.6) !important;
  box-shadow: 
    0 10px 28px rgba(15,27,45,0.45),
    0 3px 10px rgba(126, 168, 190,0.3) !important;
}
.floating-cta-group .floating-call svg,
.floating-cta-group .floating-call path {
  stroke: #7EA8BE !important;
  color: #7EA8BE !important;
}

/* End of FLOATING CTA polish ═══════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════
   STATS + GALLERY FIX v6 — 숫자 가시성 + 갤러리 터치 스와이프 (2026-04-19)
═══════════════════════════════════════════════════════════════════════ */

/* ─── 1. STORY STATS — 배경 어둡게 + 넘버 선명하게 ─── */
.story-stats {
  background-color: #0F1B2D !important;
  background-image: 
    radial-gradient(ellipse 60% 80% at 50% 50%, rgba(42,90,143,0.25) 0%, transparent 60%),
    linear-gradient(135deg, #0F1B2D 0%, #1a2d4a 50%, #0F1B2D 100%) !important;
  padding: 4rem 0 !important;
  position: relative !important;
  overflow: hidden !important;
}

.story-stats::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background: 
    radial-gradient(ellipse 50% 80% at 50% 50%, rgba(126, 168, 190,0.06) 0%, transparent 70%) !important;
  pointer-events: none !important;
}

.story-stats .story-stats-inner {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 2.5rem !important;
  position: relative !important;
  z-index: 2 !important;
  flex-wrap: nowrap !important;
  padding: 0 1rem !important;
}

.story-stats .hero-stat {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.5rem !important;
  padding: 1rem 1.5rem !important;
  text-align: center !important;
  position: relative !important;
  flex: 1 !important;
  min-width: 0 !important;
}

.story-stats .hero-stat-num {
  font-family: 'Playfair Display', 'Noto Serif KR', serif !important;
  font-size: clamp(2.5rem, 7vw, 4rem) !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  letter-spacing: -0.025em !important;
  background: linear-gradient(180deg, #A8C4D4 0%, #7EA8BE 50%, #5E8BA3 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  text-shadow: 0 2px 20px rgba(126, 168, 190,0.2) !important;
  opacity: 1 !important;
}

.story-stats .hero-stat-unit {
  font-family: 'Playfair Display', 'Noto Serif KR', serif !important;
  font-size: clamp(1.2rem, 3vw, 1.6rem) !important;
  font-weight: 500 !important;
  background: linear-gradient(180deg, #7EA8BE 0%, #5E8BA3 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  margin-left: 0.1em !important;
}

.story-stats .hero-stat-label {
  display: block !important;
  font-size: 0.72rem !important;
  font-weight: 500 !important;
  color: rgba(255,255,255,0.75) !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  margin-top: 0.5rem !important;
  white-space: nowrap !important;
}

.story-stats .hero-stat-divider {
  display: block !important;
  width: 1px !important;
  height: 60px !important;
  background: linear-gradient(180deg, 
    transparent 0%, 
    rgba(126, 168, 190,0.3) 30%, 
    rgba(126, 168, 190,0.3) 70%, 
    transparent 100%) !important;
  flex-shrink: 0 !important;
}

/* 모바일: Stats 섹션 */
@media (max-width: 768px) {
  .story-stats {
    padding: 3rem 0 !important;
  }
  .story-stats .story-stats-inner {
    flex-direction: row !important;
    gap: 0 !important;
    padding: 0 0.75rem !important;
  }
  .story-stats .hero-stat {
    padding: 0.5rem 0.25rem !important;
    flex: 1 !important;
  }
  .story-stats .hero-stat-num {
    font-size: 2rem !important;
  }
  .story-stats .hero-stat-unit {
    font-size: 1rem !important;
  }
  .story-stats .hero-stat-label {
    font-size: 0.6rem !important;
    letter-spacing: 0.08em !important;
    margin-top: 0.4rem !important;
  }
  .story-stats .hero-stat-divider {
    width: 1px !important;
    height: 40px !important;
    display: block !important;
  }
}

@media (max-width: 380px) {
  .story-stats .hero-stat-num {
    font-size: 1.7rem !important;
  }
  .story-stats .hero-stat-label {
    font-size: 0.55rem !important;
  }
}

/* 카운트업 안 돼도 숫자 자체가 보이도록 data-count 초기값 대체 */
.story-stats .hero-stat-num:empty::before,
.story-stats .hero-stat-num:is([data-count]) {
  min-width: 2ch !important;
}

/* ─── 2. GALLERY STRIP — 터치 스와이프 가능하게 ─── */
.gallery-strip {
  padding: 2rem 0 !important;
  overflow: hidden !important;
}

/* 데스크톱: 기존 자동 마퀴 유지 */
@media (min-width: 769px) {
  .gallery-track {
    animation: galleryScroll 45s linear infinite !important;
  }
  .gallery-strip:hover .gallery-track {
    animation-play-state: paused !important;
  }
}

/* 모바일: 자동 애니메이션 OFF → 수동 터치 스와이프 */
@media (max-width: 768px) {
  .gallery-strip {
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    scroll-snap-type: x mandatory !important;
    scrollbar-width: none !important;
    touch-action: pan-x !important;
    padding: 1.5rem 0 !important;
  }
  .gallery-strip::-webkit-scrollbar {
    display: none !important;
  }
  .gallery-track {
    animation: none !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 0.75rem !important;
    padding: 0 1rem !important;
    width: max-content !important;
    transform: none !important;
  }
  .gallery-item {
    flex: 0 0 auto !important;
    width: 80vw !important;
    max-width: 320px !important;
    height: 220px !important;
    scroll-snap-align: center !important;
    border-radius: 14px !important;
    overflow: hidden !important;
    box-shadow: 
      0 8px 24px rgba(15,27,45,0.12),
      0 2px 6px rgba(15,27,45,0.08) !important;
  }
  .gallery-item img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }
  /* 모바일에선 중복 aria-hidden 이미지 숨겨서 깔끔하게 (원본 6장만 표시) */
  .gallery-item[aria-hidden="true"] {
    display: none !important;
  }
  /* 페이드 마스크 유지 */
  .gallery-strip::before,
  .gallery-strip::after {
    width: 30px !important;
  }
}

/* 힌트: 모바일에서 "← 스와이프 →" 같은 미묘한 UI 암시 */
@media (max-width: 768px) {
  .gallery-strip {
    position: relative !important;
  }
}

/* End of STATS + GALLERY FIX v6 ═══════════════════════════════════════ */

/* ─── STATS VISIBILITY FIX v7 — data-reveal opacity:0 우회 ─── */
.story-stats [data-reveal],
.story-stats .hero-stat {
  opacity: 1 !important;
  transform: none !important;
  visibility: visible !important;
}

.story-stats .hero-stat-num,
.story-stats .hero-stat-unit,
.story-stats .hero-stat-label {
  opacity: 1 !important;
  visibility: visible !important;
}

/* story-stats-inner가 빈 높이 나오지 않도록 최소 높이 보장 */
.story-stats-inner {
  min-height: 120px !important;
}

@media (max-width: 768px) {
  .story-stats-inner {
    min-height: 100px !important;
  }
}

/* End v7 ═══════════════════════════════════════ */

/* ─── STATS GSAP BLUR OVERRIDE v8 — inline filter:blur 제거 ─── */
.story-stats .hero-stat,
.story-stats .hero-stat.visible,
.story-stats [data-reveal],
.story-stats [data-reveal].visible {
  filter: none !important;
  opacity: 1 !important;
  transform: none !important;
  translate: none !important;
  rotate: none !important;
  scale: none !important;
}

.story-stats .hero-stat-num,
.story-stats .hero-stat-unit,
.story-stats .hero-stat-label,
.story-stats .hero-stat span {
  filter: none !important;
  opacity: 1 !important;
  transform: none !important;
  translate: none !important;
  visibility: visible !important;
}

/* End v8 ═════════════════════════════════════ */

/* ═══ STATS FINAL v9 — 숫자 크기 + 솔리드 골드 강제 ═══ */
.story-stats {
  padding: 3.5rem 1rem !important;
  background: linear-gradient(135deg, #0F1B2D 0%, #1a2d4a 50%, #0F1B2D 100%) !important;
}
.story-stats-inner {
  display: flex !important;
  flex-direction: row !important;
  justify-content: space-around !important;
  align-items: center !important;
  gap: 0.5rem !important;
  max-width: 560px !important;
  margin: 0 auto !important;
}
.story-stats .hero-stat {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  flex: 1 1 0 !important;
  padding: 0.5rem !important;
  gap: 0.4rem !important;
  min-height: 110px !important;
}
.story-stats .hero-stat-num {
  font-family: 'DM Serif Display', 'Inter', serif !important;
  font-size: clamp(2.5rem, 11vw, 4rem) !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  letter-spacing: -0.02em !important;
  /* 솔리드 골드 - gradient 제거로 가독성 확보 */
  color: #7EA8BE !important;
  background: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  -webkit-text-fill-color: #7EA8BE !important;
  text-shadow: 0 2px 12px rgba(126, 168, 190, 0.3) !important;
  display: inline-block !important;
  width: auto !important;
  margin: 0 !important;
}
.story-stats .hero-stat-unit {
  font-family: 'DM Serif Display', 'Inter', serif !important;
  font-size: clamp(1rem, 3.5vw, 1.4rem) !important;
  color: #7EA8BE !important;
  opacity: 0.8 !important;
  margin-left: 0.15rem !important;
  font-weight: 400 !important;
}
.story-stats .hero-stat-label {
  font-family: 'Noto Sans KR', sans-serif !important;
  font-size: clamp(0.7rem, 2.8vw, 0.85rem) !important;
  font-weight: 500 !important;
  color: rgba(255, 255, 255, 0.85) !important;
  letter-spacing: 0.05em !important;
  text-transform: none !important;
  margin-top: 0.6rem !important;
  display: block !important;
}
.story-stats .hero-stat-divider {
  display: none !important;
}
/* 제목이 있다면 */
.story-stats h2, .story-stats .story-stats-title {
  color: rgba(255, 255, 255, 0.9) !important;
  font-size: 1rem !important;
  text-align: center !important;
  margin-bottom: 1.5rem !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  font-weight: 300 !important;
}

@media (min-width: 769px) {
  .story-stats-inner {
    max-width: 800px !important;
    gap: 2rem !important;
  }
  .story-stats .hero-stat-num {
    font-size: clamp(3rem, 5vw, 4.5rem) !important;
  }
}
/* End v9 ════════════════════════ */

/* ═══ GALLERY MOBILE SWIPE FINAL v9 ═══ */
@media (max-width: 768px) {
  .gallery-strip {
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    scroll-snap-type: x mandatory !important;
    scrollbar-width: none !important;
    touch-action: pan-x !important;
    padding: 1rem 1rem !important;
  }
  .gallery-strip::-webkit-scrollbar { display: none !important; }
  
  .gallery-track {
    animation: none !important;
    -webkit-animation: none !important;
    transform: none !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 0.75rem !important;
    width: max-content !important;
    padding-right: 2rem !important;
  }
  .gallery-track:hover { animation: none !important; }
  
  .gallery-item {
    flex: 0 0 78vw !important;
    max-width: 320px !important;
    min-width: 260px !important;
    height: 260px !important;
    scroll-snap-align: center !important;
    border-radius: 14px !important;
    overflow: hidden !important;
    position: relative !important;
  }
  .gallery-item img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
  }
  /* 중복 아이템(무한 마퀴용) 숨김 */
  .gallery-item[aria-hidden="true"] { display: none !important; }
}
/* End gallery v9 ═══════════════════ */

/* ═══ NAV CTA CLEANUP v10 — 플로팅과 중복되는 상단 CTA 숨김 ═══ */
html body #nav .nav-booking,
html body #nav .nav-kakao,
html body #nav.scrolled .nav-booking,
html body #nav.scrolled .nav-kakao,
html body #nav:not(.scrolled) .nav-booking,
html body #nav:not(.scrolled) .nav-kakao,
html body nav .nav-booking,
html body nav .nav-kakao {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  pointer-events: none !important;
}

/* 로고만 남으면 좌측 정렬, MENU는 우측 */
#nav, nav#nav {
  justify-content: space-between !important;
}
.nav-brand {
  margin-right: auto !important;
}
/* End v10 ═══════════════════ */

/* ╔═══════════════════════════════════════════════════════════════════╗
   ║  MIST BLUE 통합 컬러 시스템 v11                                    ║
   ║  골드(#7EA8BE) 전면 퇴역 → Mist Blue (#7EA8BE) 통일              ║
   ║  철학: "진료의 냄새는 쿨톤이다"                                     ║
   ╚═══════════════════════════════════════════════════════════════════╝ */

:root {
  /* Accent — 새로운 5% 강조색 */
  --mist-blue: #7EA8BE;
  --mist-blue-soft: #A8C4D4;
  --mist-blue-deep: #5E8BA3;
  --mist-blue-glow: rgba(126, 168, 190, 0.4);
  --mist-blue-faint: rgba(126, 168, 190, 0.15);
  
  /* 기존 변수도 오버라이드 (하위 호환) */
  --accent: #7EA8BE !important;
  --gold: #7EA8BE !important;
  --gold-light: #A8C4D4 !important;
  --gold-deep: #5E8BA3 !important;
  
  /* Primary — 최원장님 선호 */
  --pure-white: #FFFFFF;
  --off-white: #FAFAF7;
  --deep-navy: #0F1B2D;
  --ink-navy: #1E2A3F;
}

/* ═══ 골드 HEX 직접 타겟 — #7EA8BE (메인 골드) ═══ */
[style*="F4C870"],
[style*="f4c870"] {
  color: #7EA8BE !important;
}

/* 브랜드 로고 닷 */
.nav-brand::after,
.brand-dot,
.logo-dot {
  background: #7EA8BE !important;
  color: #7EA8BE !important;
}

/* 히어로 서브카피 강조 (em / strong) */
.hero-sub em, .hero-sub strong,
.hero-subtitle em, .hero-subtitle strong,
.story-lead em, .story-lead strong,
.story-content em, .story-content strong,
.story-chapter em, .story-chapter strong,
.story-chapter-dark em, .story-chapter-dark strong {
  color: #7EA8BE !important;
  background: none !important;
  -webkit-text-fill-color: #7EA8BE !important;
  background-clip: initial !important;
  -webkit-background-clip: initial !important;
  text-shadow: none !important;
  font-style: italic !important;
  font-weight: 500 !important;
}

/* Story 섹션 밑줄·언더라인·hr (배경색 적용 — 진짜 선/바 요소만) */
.story-underline,
.story-divider,
.underline-accent,
.accent-line,
section hr {
  background: #7EA8BE !important;
  background-color: #7EA8BE !important;
  border-color: #7EA8BE !important;
  color: #7EA8BE !important;
}

/* em 강조어는 배경 없이 텍스트만 Mist Blue */
.pillars-title em,
h1 em, h2 em, h3 em,
.section-title em,
.story-title em {
  background: none !important;
  background-color: transparent !important;
  background-image: none !important;
  color: #7EA8BE !important;
  -webkit-text-fill-color: #7EA8BE !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  font-style: italic !important;
  padding: 0 !important;
  border-radius: 0 !important;
  display: inline !important;
}

/* Stats 섹션 — 네이비 배경에 Mist Blue 숫자 */
.story-stats {
  background: linear-gradient(135deg, #0F1B2D 0%, #1E2A3F 50%, #0F1B2D 100%) !important;
}
.story-stats .hero-stat-num {
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
  background: none !important;
  text-shadow: 0 2px 20px rgba(126, 168, 190, 0.25) !important;
  font-weight: 400 !important;
}
.story-stats .hero-stat-unit {
  color: #7EA8BE !important;
  -webkit-text-fill-color: #7EA8BE !important;
  opacity: 1 !important;
  font-weight: 400 !important;
}
.story-stats .hero-stat-label {
  color: rgba(255, 255, 255, 0.65) !important;
  letter-spacing: 0.08em !important;
}

/* 히어로 Trust Card 숫자도 통일 */
.hero-proof-num,
.trust-card-num,
.hero-trust-num {
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
  background: none !important;
  background-clip: initial !important;
  -webkit-background-clip: initial !important;
}
.hero-proof-unit,
.trust-card-unit,
.hero-trust-unit,
.hero-proof-label,
.trust-card-label,
.hero-trust-label {
  color: #7EA8BE !important;
  -webkit-text-fill-color: #7EA8BE !important;
}

/* 플로팅 전화 버튼 — 네이비 → Mist Blue glow */
.floating-call,
.floating-phone,
.floating-btn.floating-phone {
  background: linear-gradient(135deg, #1E2A3F 0%, #0F1B2D 100%) !important;
  border: 1.5px solid rgba(126, 168, 190, 0.4) !important;
  box-shadow: 
    0 8px 24px rgba(15, 27, 45, 0.35),
    0 0 0 1px rgba(126, 168, 190, 0.2),
    inset 0 1px 0 rgba(126, 168, 190, 0.2) !important;
}
.floating-call svg,
.floating-phone svg,
.floating-btn.floating-phone svg,
.floating-call svg path,
.floating-phone svg path,
.floating-btn.floating-phone svg path {
  color: #7EA8BE !important;
  fill: #7EA8BE !important;
  stroke: #7EA8BE !important;
}
.floating-call:hover,
.floating-phone:hover {
  border-color: rgba(126, 168, 190, 0.7) !important;
  box-shadow: 
    0 12px 32px rgba(15, 27, 45, 0.5),
    0 0 20px rgba(126, 168, 190, 0.4) !important;
}

/* 히어로 CTA — Naver 초록·Kakao 노랑은 브랜드 컬러라 유지
   단, ghost 버튼(전화)만 Mist Blue 테두리로 */
.hero-cta-btn.ghost,
.hero-cta-btn.cta-phone,
.hero-cta-phone {
  border-color: rgba(126, 168, 190, 0.5) !important;
  color: #0F1B2D !important;
}
.hero-cta-btn.ghost:hover,
.hero-cta-btn.cta-phone:hover,
.hero-cta-phone:hover {
  border-color: #7EA8BE !important;
  background: rgba(126, 168, 190, 0.08) !important;
}

/* 네비게이션 MENU 버튼 */
.nav-menu-btn {
  border-color: rgba(126, 168, 190, 0.35) !important;
}
.nav-menu-btn:hover {
  border-color: #7EA8BE !important;
  color: #7EA8BE !important;
}

/* 섹션 카테고리 라벨 (CHAPTER 01, CHAPTER 02 등) */
.chapter-num,
.section-num,
.chapter-label,
.section-eyebrow,
.section-label {
  color: #7EA8BE !important;
  -webkit-text-fill-color: #7EA8BE !important;
}

/* Pillar 카드 상단 4px 악센트 바만 Mist Blue — ::after는 호버 라디얼이라 건드리지 않음 */
.pillar-card::before,
.philosophy-card::before,
.service-card::before {
  background: linear-gradient(90deg, #7EA8BE, #A8C4D4) !important;
}
/* ::after는 호버 시 부드러운 블루 라디얼 — 풀사이즈 덮지 않도록 투명 유지 */
.pillar-card::after,
.philosophy-card::after,
.service-card::after {
  background: radial-gradient(circle at var(--mouse-x, 50%) var(--mouse-y, 0%), rgba(126, 168, 190, 0.1) 0%, transparent 60%) !important;
}

/* 버튼 글로우·포커스 */
.btn:focus-visible,
button:focus-visible,
a:focus-visible {
  outline-color: #7EA8BE !important;
  box-shadow: 0 0 0 3px rgba(126, 168, 190, 0.3) !important;
}

/* 링크 호버 */
a:not(.hero-cta-btn):not(.floating-btn):not(.menu-link):not(.nav-brand):hover {
  color: #7EA8BE !important;
}

/* End v11 Mist Blue ═══════════════════════════════════════════════ */

/* ═══ MIST BLUE FINAL KILL v12 — 남은 골드 완전 제거 ═══ */

/* "두려운 이유" 타이틀 워드 */
.hero-title .title-word,
.hero-title span.title-word,
html body .hero-title .title-word {
  background: linear-gradient(180deg, #A8C4D4 0%, #7EA8BE 50%, #5E8BA3 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
}

/* "이음은, 모두 보여드립니다." subcopy accent */
.hero-subcopy-accent,
.hero-sub .accent,
.hero-subcopy-accent *,
html body .hero-subcopy-accent {
  color: #7EA8BE !important;
  -webkit-text-fill-color: #7EA8BE !important;
  background: none !important;
  background-clip: initial !important;
  -webkit-background-clip: initial !important;
}

/* ★ 별 아이콘 */
.hero-proof-star,
.star-gold,
.rating-star,
html body .hero-proof-star {
  color: #7EA8BE !important;
  -webkit-text-fill-color: #7EA8BE !important;
  fill: #7EA8BE !important;
}

/* hero-stat-unit 배경 그라디언트 완전 제거 */
.hero-stat-unit,
html body .hero-stat-unit,
.story-stats .hero-stat-unit {
  background: none !important;
  background-image: none !important;
  background-color: transparent !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  color: #7EA8BE !important;
  -webkit-text-fill-color: #7EA8BE !important;
}

/* 전역 SVG fill 골드 제거 */
svg[fill="#7EA8BE"], svg[fill="#7ea8be"],
path[fill="#7EA8BE"], path[fill="#7ea8be"] {
  fill: #7EA8BE !important;
}

/* 태그라인 구분선 */
.nav-tagline::before,
.nav-tagline::after,
.tagline-line,
.nav-brand-line {
  background: linear-gradient(90deg, transparent, #7EA8BE 50%, transparent) !important;
  background-color: #7EA8BE !important;
}

/* 스크롤 인디케이터 */
.scroll-line,
.scroll-indicator,
.scroll-to-discover::after {
  background: #7EA8BE !important;
  color: rgba(126, 168, 190, 0.6) !important;
}

/* End v12 ═══════════════════════════════════════════ */

/* ═══ 플로팅 전화 SVG 골드 완전 제거 v13 ═══ */
.floating-btn.floating-call,
.floating-call,
a.floating-call,
html body .floating-call {
  background: linear-gradient(135deg, #1E2A3F 0%, #0F1B2D 100%) !important;
  border: 1.5px solid rgba(126, 168, 190, 0.4) !important;
}
.floating-btn.floating-call svg,
.floating-call svg,
.floating-call svg *,
.floating-call path,
.floating-call circle,
html body .floating-call svg,
html body .floating-call svg path {
  color: #A8C4D4 !important;
  fill: #A8C4D4 !important;
  stroke: #A8C4D4 !important;
}
/* End v13 ═══════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════
   v15 — FLOATING CTA 정렬 최종 리셋 (모바일·데스크탑 공통)
   원인: 옛날 .floating-call { position:fixed; right:2rem } 규칙의
         right 값이 그룹 자식(position:relative) 상태에서 -left로
         환산돼 14~32px 왼쪽으로 틀어지던 버그.
   ═══════════════════════════════════════════════════════════ */

/* 그룹 컨테이너: 세로 스택, 오른쪽 정렬 고정 */
.floating-cta-group {
  position: fixed !important;
  bottom: max(1.25rem, env(safe-area-inset-bottom, 1rem)) !important;
  right: max(1.25rem, env(safe-area-inset-right, 1rem)) !important;
  left: auto !important;
  top: auto !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 0.75rem !important;
  z-index: 900 !important;
  width: auto !important;
}

/* 모든 플로팅 버튼: 동일 규격 + 위치 리셋 */
.floating-cta-group .floating-btn,
.floating-cta-group .floating-kakao,
.floating-cta-group .floating-naver,
.floating-cta-group .floating-call {
  position: relative !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  bottom: auto !important;
  transform: none !important;
  margin: 0 !important;
  align-self: center !important;
  flex-shrink: 0 !important;
  box-sizing: border-box !important;
}

/* 데스크탑 사이즈 통일 */
@media (min-width: 769px) {
  .floating-cta-group .floating-btn {
    width: 54px !important;
    height: 54px !important;
  }
  .floating-cta-group .floating-btn svg {
    width: 22px !important;
    height: 22px !important;
  }
}

/* 모바일 사이즈 통일 */
@media (max-width: 768px) {
  .floating-cta-group {
    bottom: max(1rem, env(safe-area-inset-bottom, 0.75rem)) !important;
    right: max(1rem, env(safe-area-inset-right, 0.75rem)) !important;
    gap: 0.6rem !important;
  }
  .floating-cta-group .floating-btn {
    width: 50px !important;
    height: 50px !important;
  }
  .floating-cta-group .floating-btn svg {
    width: 20px !important;
    height: 20px !important;
  }
}

/* hover 시 scale이 어긋나지 않도록 중앙 기준 */
.floating-cta-group .floating-btn:hover {
  transform: scale(1.08) !important;
  transform-origin: center center !important;
}

/* 라벨 포지션 (아이콘 밑 미니 텍스트) — 안 보이게 숨김 처리
   이전 :hover 시 풍선처럼 나오는 것도 정렬에 영향 주므로 완전 제거 */
.floating-cta-group .floating-btn-label {
  display: none !important;
}

/* Pulse 링이 오른쪽으로 튀지 않도록 */
.floating-cta-group .floating-call::after {
  inset: -4px !important;
  left: -4px !important;
  right: -4px !important;
  top: -4px !important;
  bottom: -4px !important;
}

/* ═══════════════════════════════════════════════════════════
   v16 — FULL MENU 타이포그래피 리파인
   
   설계 철학: "여백이 곧 럭셔리다"
   - 기존: 60.8px 초대형 타이포 → 답답, 데스크탑 94% 세로 점유
   - 변경: 타이포 30% 축소 + 트래킹(자간) 확장 + 좌측 인덱스 넘버
   - 레퍼런스: Aēsop, Loro Piana, Hermès 글로벌 메뉴
   ═══════════════════════════════════════════════════════════ */

/* 메뉴 배경 — 불투명도 확실히 (히어로 비침 방지) */
.full-menu {
  background: #0F1B2D !important;
}
.full-menu.open {
  background: linear-gradient(135deg, #0F1B2D 0%, #162744 60%, #1B3254 100%) !important;
}
.menu-overlay {
  background: #0F1B2D !important;
  opacity: 1 !important;
}

/* 컨테이너 — 중앙 정렬 + 최대폭 제한 (너무 넓게 퍼지지 않도록) */
.menu-content {
  max-width: 640px !important;
  margin: 0 auto !important;
  padding: clamp(4rem, 10vh, 6rem) clamp(2rem, 6vw, 4rem) clamp(3rem, 8vh, 5rem) !important;
  justify-content: center !important;
}

/* 링크 스택 — 간격 확대 (여백으로 호흡) */
.menu-links {
  display: flex !important;
  flex-direction: column !important;
  gap: clamp(0.25rem, 1.2vh, 0.75rem) !important;
}

/* 메뉴 링크 본체 — 타이포 30% 축소 + 자간 확장 */
.menu-link {
  font-family: var(--font-kr) !important;
  /* 모바일 26px, 태블릿 32px, 데스크탑 42px (기존 대비 -30%) */
  font-size: clamp(1.4rem, 3vw, 2.4rem) !important;
  font-weight: 300 !important;
  letter-spacing: -0.01em !important;
  line-height: 1.4 !important;
  color: rgba(255, 255, 255, 0.92) !important;
  padding: clamp(0.4rem, 1.2vh, 0.9rem) 0 !important;
  position: relative !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
}

/* 인덱스 넘버 — 왼쪽으로 이동, Mist Blue 상시 노출 (더 세련됨) */
.menu-link::after {
  content: attr(data-index) !important;
  position: absolute !important;
  left: auto !important;
  right: 0 !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  font-family: var(--font-en, 'Inter', sans-serif) !important;
  font-size: 0.65rem !important;
  font-weight: 400 !important;
  letter-spacing: 0.3em !important;
  color: rgba(126, 168, 190, 0.5) !important;
  opacity: 1 !important;
  transition: color 0.3s var(--ease, ease), transform 0.3s var(--ease, ease) !important;
}

/* 호버: 색상만 살짝 변화 + 인덱스 활성화 */
.menu-link:hover {
  color: #7EA8BE !important;
}
.menu-link:hover::after {
  color: #7EA8BE !important;
  opacity: 1 !important;
  transform: translateY(-50%) translateX(-4px) !important;
}
/* 텍스트 슬라이드 축소 (2rem → 0.5rem, 덜 산만) */
.menu-link:hover span {
  transform: translateX(0.5rem) !important;
}

/* 모바일 전용 — 패딩/간격 더 타이트하게 */
@media (max-width: 768px) {
  .menu-content {
    padding: 5rem 1.5rem 3rem !important;
    justify-content: flex-start !important;
  }
  .menu-links {
    gap: 0.1rem !important;
  }
  .menu-link {
    font-size: 1.5rem !important;   /* 기존 35.1px → 24px */
    font-weight: 400 !important;
    padding: 0.7rem 0 !important;
    letter-spacing: -0.015em !important;
  }
  .menu-link::after {
    font-size: 0.55rem !important;
    letter-spacing: 0.25em !important;
  }
}

/* 아주 작은 모바일 (360px 이하) */
@media (max-width: 360px) {
  .menu-link {
    font-size: 1.35rem !important;   /* 21.6px */
    padding: 0.6rem 0 !important;
  }
}

/* 데스크탑 전용 — 여백 극대화, 타이포 절제 */
@media (min-width: 1024px) {
  .menu-content {
    max-width: 720px !important;
    padding: 6rem 4rem 4rem !important;
    justify-content: center !important;
  }
  .menu-link {
    font-size: 2.2rem !important;   /* 기존 60.8px → 35.2px */
    padding: 0.6rem 0 !important;
  }
  .menu-link::after {
    font-size: 0.7rem !important;
  }
}

/* 메뉴 푸터 (LOCATION, 주소 등) — 더 미니멀하게 */
.menu-footer {
  padding-top: clamp(2rem, 4vh, 3rem) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
  margin-top: clamp(2rem, 5vh, 3rem) !important;
}

/* ═══════════════════════════════════════════════════════════
   v16.1 — 메뉴 링크 visibility 긴급 수정
   원인: 원본의 .full-menu.open .menu-link nth-child(1~6)만 
         transition-delay 있고 7~9는 없어서 상태 전환이 꼬이며
         일부 링크가 opacity:0 상태로 남아있음
   ═══════════════════════════════════════════════════════════ */

/* 메뉴 열린 상태에서는 모든 링크 무조건 표시 */
.full-menu.open .menu-link {
  opacity: 1 !important;
  transform: translateY(0) !important;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1),
              opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
              color 0.3s ease !important;
}

/* 7~9번 링크 stagger 지연 추가 (자연스러운 등장 순서) */
.full-menu.open .menu-link:nth-child(7) { transition-delay: 0.40s !important; }
.full-menu.open .menu-link:nth-child(8) { transition-delay: 0.45s !important; }
.full-menu.open .menu-link:nth-child(9) { transition-delay: 0.50s !important; }
.full-menu.open .menu-link:nth-child(10) { transition-delay: 0.55s !important; }

/* 닫힌 상태에서는 원래대로 숨김 (깜빡임 방지) */
.full-menu:not(.open) .menu-link {
  opacity: 0;
  transform: translateY(100%);
  pointer-events: none;
}

/* ═══════════════════════════════════════════════════════════
   v16.2 — 메뉴 열림 속도 개선 + overlay 먼저 페이드
   
   기존: clip-path 0.8s ease-expo → 데스크탑에서 0.8초 내내 0% 근처
         → 시각적으로 "메뉴가 느리게 열린다"
   개선: clip-path 0.55s + easing 변경 + overlay는 opacity로
         먼저 살짝 뜨게 해서 즉각 피드백
   ═══════════════════════════════════════════════════════════ */

.full-menu {
  transition: clip-path 0.55s cubic-bezier(0.22, 1, 0.36, 1) !important;
}

/* 오버레이는 투명→불투명으로 빠르게 전환 (0.3s) */
.menu-overlay {
  opacity: 0 !important;
  transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.full-menu.open .menu-overlay {
  opacity: 1 !important;
}

/* open 시 링크 등장 딜레이 단축 (전체 0.55s 안에 수렴) */
.full-menu.open .menu-link:nth-child(1) { transition-delay: 0.05s !important; }
.full-menu.open .menu-link:nth-child(2) { transition-delay: 0.08s !important; }
.full-menu.open .menu-link:nth-child(3) { transition-delay: 0.11s !important; }
.full-menu.open .menu-link:nth-child(4) { transition-delay: 0.14s !important; }
.full-menu.open .menu-link:nth-child(5) { transition-delay: 0.17s !important; }
.full-menu.open .menu-link:nth-child(6) { transition-delay: 0.20s !important; }
.full-menu.open .menu-link:nth-child(7) { transition-delay: 0.23s !important; }
.full-menu.open .menu-link:nth-child(8) { transition-delay: 0.26s !important; }
.full-menu.open .menu-link:nth-child(9) { transition-delay: 0.29s !important; }
.full-menu.open .menu-link:nth-child(10) { transition-delay: 0.32s !important; }

/* ═══════════════════════════════════════════════════════════
   v16.3 — 메뉴 텍스트 blur 제거
   원인: GSAP scroll-velocity blur가 .menu-link에 상시 적용되어
         메뉴 열린 상태에서도 blur(1~3px) 남아있음
   ═══════════════════════════════════════════════════════════ */
.full-menu,
.full-menu *,
.menu-content,
.menu-content *,
.menu-link,
.menu-link *,
.menu-link span {
  filter: none !important;
  -webkit-filter: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* ═══════════════════════════════════════════════════════
   v20 HERO TITLE 가독성 강제 수정
   문제: .title-line 전체에 dark navy 색 + blur + text-shadow 잔존
   해법: Mist Blue 전면 적용, blur/shadow 완전 제거, opacity 고정
   ═══════════════════════════════════════════════════════ */

/* 히어로 타이틀 전체 (치과가 / 그렇게도 / 두려운 이유) */
html body .hero-title,
html body .hero-title * {
  color: #D4E3EC !important;
  -webkit-text-fill-color: #D4E3EC !important;
  filter: none !important;
  -webkit-filter: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.4), 0 0 1px rgba(212, 227, 236, 0.2) !important;
  opacity: 1 !important;
  -webkit-text-stroke: 0 transparent !important;
  transform: none !important;
}

/* 타이틀 라인 (일반) - 밝은 Mist Blue */
html body .hero-title .title-line:not(.accent),
html body .hero-title .title-line:not(.accent) .title-word {
  color: #D4E3EC !important;
  -webkit-text-fill-color: #D4E3EC !important;
  background: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
}

/* 타이틀 라인 (.accent - "두려운 이유") - 강조 그라디언트 */
html body .hero-title .title-line.accent,
html body .hero-title .title-line.accent .title-word {
  background: linear-gradient(180deg, #FFFFFF 0%, #B8D4E3 60%, #7EA8BE 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
}

/* hero section 애니메이션 완료 후 빡센 고정 */
.hero-content, 
.hero-content * {
  will-change: auto !important;
}

/* CTA wrap 불투명도 확실히 1 */
html body .hero-cta-wrap {
  opacity: 1 !important;
  transform: none !important;
}