/* ===========================================================
   웹이즈 덴탈클리닉 (theme/22) — 보조 CSS
   Tailwind utility 중심. 여기에는 full-bleed / grid 보정 /
   Swiper 보정 / CDN 한계 보정만 둔다.
   =========================================================== */

html { scroll-behavior: smooth; }
body { -webkit-font-smoothing: antialiased; }

/* 헤더 영역만큼 앵커 보정 */
:target { scroll-margin-top: 96px; }

/* ---- Tailwind4 CDN grid 함정 회피: 자식 overflow 방지 ---- */
.grid > * { min-width: 0; }

/* ---- 푸터 4컬럼 grid 보정 (CDN arbitrary 값 안전화) ---- */
@media (min-width: 1024px) {
  footer .grid {
    grid-template-columns: minmax(0,1.4fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1.1fr);
  }
}

/* ---- Swiper: 슬라이드 display 강제 보정 ---- */
.heroSwiper .swiper-slide { display: block !important; }
.heroSwiper, .heroSwiper .swiper-wrapper { height: 100%; }
/* swiper-bundle.css 의 .swiper{position:relative} 가 Tailwind .absolute 를
   덮어 풀스크린 배경 swiper 가 in-flow 로 빠지는 함정 → 절대위치 강제 */
.heroSwiper.swiper { position: absolute !important; inset: 0; }

/* ---- 진료분야 카드 ---- */
.treat-card {
  display: block;
  background: #fff;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 24px;
  padding: 28px;
  transition: box-shadow .25s ease, border-color .25s ease, transform .25s ease;
}
.treat-card:hover {
  border-color: rgba(164,114,42,0.35);
  box-shadow: 0 18px 40px -22px rgba(164,114,42,0.45);
  transform: translateY(-3px);
}
.treat-tag {
  display: inline-block;
  padding: 5px 12px;
  border-radius: 999px;
  background: #F3EEE4;
  color: #8A6B30;
  font-size: 12px;
  font-weight: 600;
}

/* ---- WHY US 카드 ---- */
.why-card {
  background: #fff;
  border-radius: 24px;
  padding: 36px 32px;
  box-shadow: 0 14px 40px -28px rgba(0,0,0,0.35);
  transition: transform .25s ease, box-shadow .25s ease;
}
.why-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 50px -28px rgba(0,0,0,0.4);
}

/* ---- 우측 퀵메뉴 버튼 ---- */
.quick-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  width: 64px;
  height: 64px;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 10px 30px -14px rgba(0,0,0,0.35);
  box-shadow: 0 0 0 1px rgba(0,0,0,0.06), 0 10px 30px -14px rgba(0,0,0,0.35);
  color: #2A2420;
  font-size: 17px;
  transition: transform .2s ease, background .2s ease;
}
.quick-btn span:last-child { font-size: 10.5px; font-weight: 700; line-height: 1; }
.quick-btn:hover { transform: translateX(-2px); }

/* ---- 모바일 메뉴 링크 ---- */
.m-link {
  display: block;
  padding: 14px 6px;
  border-bottom: 1px solid rgba(0,0,0,0.06);
  color: #2A2420;
  transition: color .2s ease;
}
.m-link:hover { color: #A4722A; }

/* ---- 모바일 메뉴 오픈 상태 ---- */
/* Tailwind4 의 translate-x-full 은 transform 이 아니라 translate 속성을 쓴다.
   닫힘/열림 모두 translate 속성으로 제어해야 패널이 실제로 슬라이드된다. */
#mobilePanel { transform: none; transition: translate .3s ease; }
#mobileMenu.is-open { visibility: visible; }
#mobileMenu.is-open #mobileOverlay { opacity: 1; }
#mobileMenu.is-open #mobilePanel { translate: 0 0; }
body.menu-lock { overflow: hidden; }

/* ---- 헤더 스크롤 상태 ---- */
#siteHeader.scrolled {
  background: rgba(255,255,255,0.92);
  backdrop-filter: saturate(150%) blur(10px);
  box-shadow: 0 1px 0 rgba(0,0,0,0.06);
}

/* ---- 히어로 자체 등장 (AOS 비의존, 로드 즉시 보장) ---- */
@keyframes revealUp {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}
.reveal-up { animation: revealUp .8s cubic-bezier(.22,.61,.36,1) both; }
.rv-d1 { animation-delay: .1s; }
.rv-d2 { animation-delay: .22s; }
.rv-d3 { animation-delay: .34s; }
.rv-d4 { animation-delay: .46s; }

/* ---- 작은 화면 overflow 안전장치 ---- */
@media (max-width: 360px) {
  h1 { word-break: keep-all; }
}