/* ============================================
   서울티스치과 — 공통 레이아웃 스타일
   ============================================ */

/* 헤더 우측 액션 버튼 (예약하기 / 전화) — 기본은 흰 텍스트 (over hero) */
.header-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.7rem 1.15rem;
  border-radius: 10px;
  background: transparent;
  font-size: 1.02rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.96);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.005em;
  transition: color 0.2s ease, background 0.2s ease;
  text-decoration: none;
  white-space: nowrap;
}
.header-action-btn:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.16);
}
.header-action-btn svg { flex-shrink: 0; width: 18px; height: 18px; }
/* 스크롤/호버 상태에서는 다크 톤으로 */
#site-header header.scrolled .header-action-btn,
#site-header header.is-hover .header-action-btn { color: #4A5568; }
#site-header header.scrolled .header-action-btn:hover,
#site-header header.is-hover .header-action-btn:hover { color: #7C3AED; background: #F5F3FF; }

/* 브랜드 락업 (헤더: 좌 아이콘 + 우 텍스트) */
.brand-lockup {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  flex-shrink: 0;        /* 메뉴가 늘어나도 로고가 잘리지 않도록 */
  min-width: 0;
  transition: opacity 0.2s ease;
}
.brand-lockup:hover { opacity: 0.85; }
.brand-icon {
  width: 38px;
  height: 38px;
  object-fit: contain;
  display: block;
  flex-shrink: 0;
  /* 기본: 흰색 (over hero) */
  filter: brightness(0) invert(1);
  transition: filter 0.25s ease;
}
@media (min-width: 1024px) {
  .brand-icon { width: 42px; height: 42px; }
}
/* 스크롤/호버 상태에서는 primary blue */
#site-header header.scrolled .brand-icon,
#site-header header.is-hover .brand-icon {
  filter: brightness(0) saturate(100%) invert(63%) sepia(36%) saturate(736%) hue-rotate(186deg) brightness(95%) contrast(90%);
}
.brand-text {
  display: inline-flex;
  flex-direction: column;
  line-height: 1.1;
}
.brand-text__ko {
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #ffffff;
  transition: color 0.25s ease;
}
.brand-text__en {
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  color: rgba(255, 255, 255, 0.85);
  margin-top: 0.25rem;
  transition: color 0.25s ease;
}
#site-header header.scrolled .brand-text__ko,
#site-header header.is-hover .brand-text__ko { color: #6F9CE8; }
#site-header header.scrolled .brand-text__en,
#site-header header.is-hover .brand-text__en { color: #6F9CE8; }
@media (min-width: 1024px) {
  .brand-text__ko { font-size: 1.05rem; }
  .brand-text__en { font-size: 0.65rem; }
}

/* 브랜드 로고 카드 (푸터 전용) */
.brand-logo-card {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: white;
  border-radius: 10px;
  padding: 6px 12px;
  box-shadow: 0 2px 8px rgba(15,23,42,0.08);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.brand-logo-card:hover {
  box-shadow: 0 6px 18px rgba(15,23,42,0.14);
  transform: translateY(-1px);
}
.brand-logo-img {
  height: 38px;
  width: auto;
  display: block;
}
@media (min-width: 1024px) {
  .brand-logo-img { height: 44px; }
}
.brand-logo-card--footer {
  padding: 10px 16px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.18);
}
.brand-logo-card--footer .brand-logo-img { height: 52px; }

/* 헤더 3-state
   ① 기본 (스크롤 전, 호버 X) → 완전 투명, 흰 텍스트, hero와 겹침
   ② 호버 (.is-hover) → 흰 배경, 다크 텍스트, 풀폭 드롭 패널 표시
   ③ 스크롤 후 (.scrolled) → 흰 배경 고정, 다크 텍스트 */
#site-header header {
  background-color: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom: 0;
  transition: background-color 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease;
}
#site-header header.scrolled,
#site-header header.is-hover {
  background-color: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid #EEF0F4;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
}
.header-row { position: relative; z-index: 2; }
#mobile-menu-btn { color: #ffffff; }
#site-header header.scrolled #mobile-menu-btn,
#site-header header.is-hover #mobile-menu-btn { color: #1A2233; }

/* GNB — 메인 라벨 라인 (데스크탑 전용) */
.gnb-wrapper {
  position: static;
  height: 100%;
  display: flex;
  align-items: stretch;
}
/* 모바일·태블릿에서는 GNB 자체를 숨김 — Tailwind hidden을 강제 덮어쓰지 않게 */
@media (max-width: 1023px) {
  .gnb-wrapper,
  .gnb-list,
  .gnb-col,
  .gnb-flyout-bg { display: none !important; }
}
.gnb-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: stretch;
  gap: 8px; /* 메뉴 항목 간 간격 — 폰트 크니까 작아도 충분 */
  height: 100%;
}
.gnb-item {
  position: relative;
  display: flex;
  align-items: center;
  height: 100%;
  /* 짧은 카테고리도 서브메뉴 폭 확보 — 인접 컬럼 겹침 방지 */
  min-width: 130px;
  justify-content: center;
}

.nav-link {
  position: relative;
  font-size: 2.2rem;         /* 메뉴 문구 크기 더 키움 */
  font-weight: 600;
  color: #ffffff;            /* 기본: 흰색 (over hero) */
  padding: 0 18px;
  height: 100%;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  letter-spacing: -0.015em;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.18);
  transition: color 0.2s ease, text-shadow 0.2s ease;
}
.nav-link::after {
  content: "";
  position: absolute;
  left: 18px; right: 18px; bottom: 16px;
  height: 2px;
  background-color: #ffffff;
  transform: scaleX(0);
  transition: transform 0.25s ease, background-color 0.2s ease;
}

/* 노트북 좁은 데스크탑(1024~1279px) — 강하게 컴팩트해야 7카테고리+로고+우측 액션이 한 줄에 들어감 */
@media (min-width: 1024px) and (max-width: 1279px) {
  .gnb-list { gap: 2px; }
  .gnb-item { min-width: 78px; }
  .nav-link { font-size: 0.95rem; padding: 0 6px; letter-spacing: -0.02em; white-space: nowrap; }
  .nav-link::after { left: 6px; right: 6px; }
  /* 드롭 패널 — 라벨 충돌 방지 위해 더 좁게 + 작게 */
  .gnb-sub { font-size: 0.76rem; padding: 0 4px; }
  .gnb-col { gap: 0.55rem; padding: 0.9rem 0.4rem 1.2rem; }
  /* 영문 부제 숨김 — 가로 폭 절약 */
  .brand-text__en { display: none; }
  /* 우측 액션 컴팩트 — 텍스트 숨기고 아이콘 + 패딩 축소 */
  .header-action-btn { padding: 0.5rem 0.6rem; font-size: 0; gap: 0; }
  .header-action-btn svg { width: 20px; height: 20px; }
  #site-header header.is-hover .gnb-flyout-bg { height: 260px; }
}

/* 중간 데스크탑(1280~1535px) — 약간만 컴팩트
   MacBook Pro 14"(1512) 커버 */
@media (min-width: 1280px) and (max-width: 1535px) {
  .gnb-list { gap: 6px; }
  .gnb-item { min-width: 110px; }
  .nav-link { font-size: 1.3rem; padding: 0 12px; }
  .nav-link::after { left: 12px; right: 12px; }
  .gnb-sub { font-size: 0.92rem; }
  .gnb-col { gap: 0.8rem; padding: 1.3rem 0.8rem 1.6rem; }
  .brand-text__en { display: none; }
  .header-action-btn { padding: 0.55rem 0.8rem; font-size: 0.95rem; }
  #site-header header.is-hover .gnb-flyout-bg { height: 320px; }
}
.gnb-item.is-active .nav-link { font-weight: 700; }
.gnb-item.is-active .nav-link::after { transform: scaleX(1); }

/* 스크롤 또는 호버 상태 → 다크 텍스트 + 보라색 강조 */
#site-header header.scrolled .nav-link,
#site-header header.is-hover .nav-link {
  color: #1A2233;
  text-shadow: none;
}
#site-header header.scrolled .nav-link::after,
#site-header header.is-hover .nav-link::after {
  background-color: #7C3AED;
}
#site-header header.scrolled .gnb-item:hover .nav-link,
#site-header header.is-hover .gnb-item:hover .nav-link { color: #7C3AED; }
#site-header header.scrolled .gnb-item.is-active .nav-link,
#site-header header.is-hover .gnb-item.is-active .nav-link { color: #7C3AED; }
#site-header header.scrolled .gnb-item:hover .nav-link::after,
#site-header header.is-hover .gnb-item:hover .nav-link::after { transform: scaleX(1); }

/* 각 카테고리의 하위메뉴 — 부모 라벨 바로 아래 정렬 */
.gnb-col {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(6px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.95rem;
  padding: 1.5rem 0.9rem 1.9rem;   /* 좌우 패딩으로 인접 컬럼과 시각 여백 확보 */
  min-width: 100%;                  /* 부모 li 폭에 맞춰 — li min-width로 폭 보장 */
  opacity: 0;
  pointer-events: none;
  /* 이탈(hover off) 시 백드롭(0.28s)보다 먼저 사라지도록 짧게 — 글씨 잔상 방지 */
  transition: opacity 0.12s ease, transform 0.12s ease;
  z-index: 3;
}
/* GNB 리스트 어디든 호버하면 모든 카테고리의 컬럼이 동시에 노출 */
.gnb-list:hover .gnb-col,
.gnb-list:focus-within .gnb-col {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
  /* 진입 시에만 부드럽게 — 백드롭과 자연스럽게 동기화 */
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.gnb-sub {
  display: block;
  font-size: 0.98rem;       /* 서브 문구도 키움 */
  font-weight: 500;
  color: #4A5568;
  white-space: nowrap;
  text-align: center;
  text-decoration: none;
  transition: color 0.15s ease;
  letter-spacing: -0.005em;
}
.gnb-sub:hover { color: #7C3AED; font-weight: 700; }

/* 풀폭 드롭 백드롭 — 호버 시 흰 패널 펼쳐짐 */
.gnb-flyout-bg {
  position: absolute;
  top: 100%;
  left: 0; right: 0;
  height: 0;
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid #EEF0F4;
  box-shadow: 0 16px 28px rgba(15, 23, 42, 0.07);
  transition: height 0.28s ease;
  pointer-events: none;
  z-index: 1;
}
#site-header header.is-hover .gnb-flyout-bg { height: 340px; }

/* 모바일 메뉴 */
.mobile-link {
  font-size: 1rem;
  font-weight: 500;
  padding: 8px 0;
  border-bottom: 1px solid transparent;
}
.mobile-link:hover { color: #6F9CE8; }
.mobile-cat summary {
  list-style: none;
  font-size: 1rem;
  font-weight: 500;
  padding: 8px 0;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.mobile-cat summary::after {
  content: "›";
  color: #6F9CE8;
  font-size: 1.2rem;
  transition: transform 0.2s ease;
}
.mobile-cat[open] summary::after { transform: rotate(90deg); }
.mobile-cat summary::-webkit-details-marker { display: none; }
.mobile-sub {
  display: block;
  padding: 6px 0 6px 16px;
  font-size: 0.9rem;
  color: #4A5568;
}
.mobile-sub:hover { color: #6F9CE8; }
#mobile-drawer.open { transform: translateX(0); }

.drawer-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.4);
  z-index: 45;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.drawer-overlay.open { opacity: 1; pointer-events: auto; }

/* 플로팅 버튼 — 기본 (Top 버튼용 베이스) */
.floating-btn {
  width: 48px; height: 48px;
  border-radius: 50%;
  background: #ffffff;
  color: #6F9CE8;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.04),
    0 8px 20px rgba(15, 23, 42, 0.08);
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow 0.25s ease,
              background 0.2s ease,
              color 0.2s ease;
  border: 1px solid rgba(226, 232, 240, 0.9);
}
.floating-btn:hover {
  background: #6F9CE8;
  color: #ffffff;
  transform: translateY(-2px);
}

/* 브랜드 플로팅 버튼 공통 */
.floating-btn.floating-btn--blog,
.floating-btn.floating-btn--kakao,
.floating-btn.floating-btn--instagram,
.floating-btn.floating-btn--youtube {
  width: 54px !important;
  height: 54px !important;
  position: relative;
  border: none !important;
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.06),
    0 8px 22px rgba(15, 23, 42, 0.10) !important;
}
.floating-btn.floating-btn--blog:hover,
.floating-btn.floating-btn--kakao:hover,
.floating-btn.floating-btn--instagram:hover,
.floating-btn.floating-btn--youtube:hover {
  transform: translateY(-3px) scale(1.05) !important;
}

/* Blog (Naver) */
.floating-btn.floating-btn--blog {
  background: #03C75A !important;
  color: #ffffff !important;
  width: 72px !important;
  height: 72px !important;
}
.floating-btn.floating-btn--blog:hover {
  background: #02B050 !important;
  box-shadow:
    0 4px 8px rgba(3, 199, 90, 0.20),
    0 14px 28px rgba(3, 199, 90, 0.38) !important;
}
.floating-btn--blog .floating-btn__blog-text {
  font-family: 'Noto Sans KR', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
  font-weight: 900;
  font-size: 1.25rem;
  line-height: 1;
  letter-spacing: -0.06em;
  color: #ffffff;
}

/* Kakao */
.floating-btn.floating-btn--kakao {
  background: #FEE500 !important;
  color: #3C1E1E !important;
  width: 72px !important;
  height: 72px !important;
}
.floating-btn.floating-btn--kakao:hover {
  background: #FDD600 !important;
  box-shadow:
    0 4px 8px rgba(254, 229, 0, 0.30),
    0 14px 28px rgba(254, 229, 0, 0.50) !important;
}
.floating-btn--kakao svg { width: 40px; height: 40px; display: block; }

/* Instagram */
.floating-btn.floating-btn--instagram {
  background: radial-gradient(circle at 30% 107%,
    #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%) !important;
  color: #ffffff !important;
}
.floating-btn.floating-btn--instagram:hover {
  box-shadow:
    0 4px 8px rgba(214, 36, 159, 0.22),
    0 14px 28px rgba(214, 36, 159, 0.42) !important;
}
.floating-btn--instagram svg { width: 26px; height: 26px; display: block; }

/* YouTube */
.floating-btn.floating-btn--youtube {
  background: #FF0033 !important;
  color: #ffffff !important;
}
.floating-btn.floating-btn--youtube:hover {
  background: #E60028 !important;
  box-shadow:
    0 4px 8px rgba(255, 0, 51, 0.22),
    0 14px 28px rgba(255, 0, 51, 0.45) !important;
}
.floating-btn--youtube svg { width: 26px; height: 26px; display: block; }

/* Top 버튼 — 컴팩트 톤다운 */
#top-btn.floating-btn--top {
  width: 44px;
  height: 44px;
  background: #ffffff;
  color: #6F9CE8;
  border: 1px solid #E2E8F0;
  margin-top: 4px;
}
#top-btn.floating-btn--top:hover {
  background: #6F9CE8;
  color: #ffffff;
  border-color: #6F9CE8;
}
#top-btn.floating-btn--top svg { width: 18px; height: 18px; }

/* 좌측 툴팁 라벨 */
.floating-btn[data-label] {
  position: relative;
}
.floating-btn[data-label]::before {
  content: attr(data-label);
  position: absolute;
  right: calc(100% + 14px);
  top: 50%;
  transform: translateY(-50%) translateX(6px);
  background: rgba(26, 34, 51, 0.96);
  color: #ffffff;
  padding: 0.38rem 0.7rem;
  border-radius: 8px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
}
.floating-btn[data-label]::after {
  content: '';
  position: absolute;
  right: calc(100% + 8px);
  top: 50%;
  transform: translateY(-50%) translateX(6px);
  border: 5px solid transparent;
  border-left-color: rgba(26, 34, 51, 0.96);
  opacity: 0;
  transition: opacity 0.2s ease, transform 0.2s ease;
  pointer-events: none;
}
.floating-btn[data-label]:hover::before,
.floating-btn[data-label]:hover::after {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}
@media (max-width: 1023px) {
  .floating-btn[data-label]::before,
  .floating-btn[data-label]::after { display: none; }
}

/* 진입 애니메이션 — 우측에서 슬라이드 인 (stagger) */
@keyframes floatBtnIn {
  from { opacity: 0; transform: translateX(22px) scale(0.85); }
  to   { opacity: 1; transform: translateX(0) scale(1); }
}
.floating-btn.floating-btn--blog       { animation: floatBtnIn 0.5s cubic-bezier(0.34,1.56,0.64,1) 0.08s both; }
.floating-btn.floating-btn--kakao      { animation: floatBtnIn 0.5s cubic-bezier(0.34,1.56,0.64,1) 0.16s both; }
.floating-btn.floating-btn--instagram  { animation: floatBtnIn 0.5s cubic-bezier(0.34,1.56,0.64,1) 0.24s both; }
.floating-btn.floating-btn--youtube    { animation: floatBtnIn 0.5s cubic-bezier(0.34,1.56,0.64,1) 0.32s both; }

/* Kakao 활성 ping (소통중 인디케이터) */
.floating-btn--kakao .ping-dot {
  position: absolute;
  top: 3px; right: 3px;
  width: 11px; height: 11px;
  border-radius: 50%;
  background: #00C73C;
  box-shadow: 0 0 0 2.5px #FEE500;
}
.floating-btn--kakao .ping-dot::after {
  content: '';
  position: absolute; inset: -3px;
  border-radius: 50%;
  background: rgba(0, 199, 60, 0.50);
  animation: floatBtnPing 1.8s ease-out infinite;
}
@keyframes floatBtnPing {
  0%   { transform: scale(1);   opacity: 0.7; }
  80%  { transform: scale(2.1); opacity: 0;   }
  100% { transform: scale(2.1); opacity: 0;   }
}

/* 서비스 카드 */
.service-card {
  display: block;
  background: white;
  border-radius: 1rem;
  padding: 1.5rem;
  text-align: center;
  border: 1px solid #E2E8F0;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.service-card:hover {
  border-color: #6F9CE8;
  transform: translateY(-6px);
  box-shadow: 0 12px 24px rgba(111,156,232,0.12);
}
.service-icon {
  width: 60px; height: 60px;
  margin: 0 auto 1rem;
  border-radius: 14px;
  background-color: #E8F0FF;
  color: #6F9CE8;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s ease;
}
.service-icon svg { width: 32px; height: 32px; }
.service-card:hover .service-icon {
  transform: scale(1.1);
  background-color: #6F9CE8;
  color: white;
}
.service-title { font-weight: 700; font-size: 1.125rem; margin-bottom: 0.25rem; }
.service-desc { font-size: 0.875rem; color: #4A5568; margin-bottom: 0.75rem; min-height: 2.5em; }
.service-link {
  display: inline-block;
  font-size: 0.875rem;
  color: #6F9CE8;
  font-weight: 600;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.service-card:hover .service-link { opacity: 1; }

/* 단계 카드 */
.step-card {
  background: white;
  border-radius: 1rem;
  padding: 2rem 1.5rem;
  border: 1px solid #E2E8F0;
  transition: all 0.3s ease;
}
.step-card:hover { border-color: #6F9CE8; transform: translateY(-4px); }
.step-num { font-size: 3rem; font-weight: 800; color: #E8F0FF; line-height: 1; margin-bottom: 0.5rem; }

/* FAQ */
.faq-item {
  background: white;
  border: 1px solid #E2E8F0;
  border-radius: 0.75rem;
  overflow: hidden;
  transition: border-color 0.2s ease;
}
.faq-item[open] {
  border-color: #6F9CE8;
  box-shadow: 0 4px 12px rgba(111,156,232,0.06);
}
.faq-item summary {
  list-style: none;
  padding: 1.1rem 1.5rem;
  cursor: pointer;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: space-between;
  user-select: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  font-size: 1.5rem;
  color: #6F9CE8;
  font-weight: 300;
}
.faq-item[open] summary::after { content: "−"; }
.faq-answer {
  padding: 0 1.5rem 1.3rem;
  color: #4A5568;
  line-height: 1.7;
  font-size: 0.95rem;
}

/* 폼 입력 */
.form-input {
  display: block;
  width: 100%;
  margin-top: 0.4rem;
  padding: 0.75rem 1rem;
  border: 1px solid #E2E8F0;
  border-radius: 0.5rem;
  font-size: 1rem;
  font-family: inherit;
  background: white;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.form-input:focus {
  outline: none;
  border-color: #6F9CE8;
  box-shadow: 0 0 0 3px rgba(111,156,232,0.12);
}

/* TL;DR 박스 (AEO 핵심) */
.tldr-box {
  background: white;
  border-radius: 1rem;
  padding: 2rem 2.5rem;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
  border-left: 4px solid #6F9CE8;
  margin-bottom: 2rem;
}
.tldr-label {
  font-size: 0.7rem;
  font-weight: 700;
  color: #6F9CE8;
  letter-spacing: 0.1em;
  margin-bottom: 0.8rem;
}

/* 페이지 헤더 (Page Hero) */
.page-hero {
  background: linear-gradient(135deg, #6F9CE8 0%, #4574C9 100%);
  padding-top: 9rem;
  padding-bottom: 5rem;
  color: white;
  position: relative;
  overflow: hidden;
}
.page-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 20% 30%, rgba(255,255,255,0.15) 0%, transparent 40%), radial-gradient(circle at 80% 70%, rgba(0,180,216,0.2) 0%, transparent 40%);
}
.page-hero > * { position: relative; }

/* 사진 배경 hero variant — about/ 페이지용 */
.page-hero.page-hero--photo {
  background-image:
    linear-gradient(180deg, rgba(10,15,30,0.72) 0%, rgba(10,15,30,0.55) 45%, rgba(10,15,30,0.78) 100%),
    url('../assets/images/about-hero.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  min-height: 480px;
  padding-top: 10rem;
  padding-bottom: 6rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.page-hero.page-hero--photo::before { background: none; }
.page-hero.page-hero--photo > div { text-align: center; }
.page-hero.page-hero--photo h1 {
  font-size: 2.4rem;
  color: #FFFFFF;
  font-weight: 800;
  letter-spacing: -0.035em;
  text-shadow:
    0 2px 4px rgba(0,0,0,0.5),
    0 4px 24px rgba(0,0,0,0.45);
}
.page-hero.page-hero--photo p {
  color: #FFFFFF !important;
  opacity: 1;
  font-weight: 500;
  text-shadow:
    0 1px 3px rgba(0,0,0,0.55),
    0 2px 14px rgba(0,0,0,0.5);
}
.page-hero.page-hero--photo .text-primary-pale {
  color: #DBE7FB !important;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-shadow: 0 1px 6px rgba(0,0,0,0.55);
}
@media (min-width: 768px) {
  .page-hero.page-hero--photo { min-height: 560px; padding-top: 11rem; padding-bottom: 7rem; }
  .page-hero.page-hero--photo h1 { font-size: 3.2rem; }
}
@media (min-width: 1024px) {
  .page-hero.page-hero--photo { min-height: 620px; }
  .page-hero.page-hero--photo h1 { font-size: 3.6rem; }
}
.breadcrumb {
  font-size: 0.85rem;
  opacity: 0.85;
  margin-top: 1rem;
}
.breadcrumb a:hover { text-decoration: underline; }

/* 인뷰 애니메이션 */
[data-reveal] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
[data-reveal].revealed { opacity: 1; transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; transition: none; }
}

/* 본문 여백 (하단 CTA 바 보정) */
body { padding-bottom: 70px; }

/* 접근성 */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* ============================================
   클린 photo placeholder (v3)
   ============================================ */
.photo-ph {
  background: #F1F5FA;
  border: 1px solid #E2E8F0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  color: #94A3B8;
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  position: relative;
}
.photo-ph svg { color: #C4D2E5; }
.photo-ph__label { font-weight: 500; }
.photo-ph__sub { font-size: 0.7rem; color: #94A3B8; opacity: 0.7; }

/* ============================================
   메인 페이지 전용 컴포넌트
   ============================================ */

/* 공지 팝업 모달 */
.notice-modal {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: rgba(0,0,0,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}
.notice-modal.open { opacity: 1; pointer-events: auto; }
.notice-modal__card {
  background: linear-gradient(180deg, #FFF6F0 0%, #FFE8E0 50%, #FFD8E0 100%);
  border-radius: 1rem;
  width: 100%;
  max-width: 420px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,0.3);
  transform: scale(0.95);
  transition: transform 0.25s ease;
}
.notice-modal.open .notice-modal__card { transform: scale(1); }
.notice-modal__header {
  padding: 1.5rem 1.5rem 1rem;
  text-align: center;
}
.notice-modal__title {
  font-size: 1.5rem;
  font-weight: 800;
  color: #1A2233;
}
.notice-modal__body {
  padding: 0 1.5rem 1rem;
}
.notice-modal__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.5rem;
}
.notice-modal__day {
  background: white;
  border-radius: 0.75rem;
  padding: 1rem;
  text-align: center;
}
.notice-modal__day .date {
  font-size: 0.95rem;
  font-weight: 700;
  color: #1A2233;
  margin-bottom: 0.5rem;
}
.notice-modal__day .status {
  font-size: 1.2rem;
  font-weight: 800;
  letter-spacing: 0.05em;
}
.notice-modal__day .status.normal { color: #6F9CE8; }
.notice-modal__day .status.closed { color: #D63D3D; }
.notice-modal__day .desc {
  font-size: 0.75rem;
  color: #4A5568;
  margin-top: 0.25rem;
}
.notice-modal__note {
  margin: 1rem 0 0;
  font-size: 0.85rem;
  color: #4A5568;
  text-align: center;
}
.notice-modal__footer {
  background: white;
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.notice-modal__btn {
  padding: 0.9rem 1rem;
  font-size: 0.9rem;
  font-weight: 500;
  background: white;
  color: #4A5568;
  border: 0;
  cursor: pointer;
  transition: background 0.15s ease;
}
.notice-modal__btn:hover { background: #F7F9FC; }
.notice-modal__btn + .notice-modal__btn { border-left: 1px solid #E2E8F0; }
.notice-modal__btn.primary { color: #6F9CE8; font-weight: 700; }

/* 통계 배너 */
.stats-banner {
  background: linear-gradient(180deg, #FFFFFF 0%, #F7F9FC 100%);
  padding: 1.5rem 0;
  border-bottom: 1px solid #E2E8F0;
}
.stats-banner__inner {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.5rem;
  align-items: center;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 1rem;
}
.stats-banner__photo {
  display: none;
  width: 220px;
  height: 80px;
  background: linear-gradient(135deg, #E8F0FF, #FFFFFF);
  border-radius: 0.75rem;
  align-items: center;
  justify-content: center;
  color: #6F9CE8;
  font-size: 0.75rem;
  flex-shrink: 0;
}
@media (min-width: 768px) { .stats-banner__photo { display: flex; } }
.stats-banner__numbers {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}
.stats-banner__numbers .item { text-align: center; }
.stats-banner__numbers .label {
  font-size: 0.8rem;
  color: #4A5568;
  margin-bottom: 0.25rem;
}
.stats-banner__numbers .value {
  font-size: 1.5rem;
  font-weight: 800;
  color: #6F9CE8;
}
.stats-banner__numbers .value .unit {
  font-size: 0.9rem;
  font-weight: 600;
  color: #4A5568;
  margin-left: 0.15rem;
}
@media (min-width: 768px) {
  .stats-banner__numbers .value { font-size: 2rem; }
}

/* X-Ray 슬라이더 (매일 업데이트 진료 이야기) */
.xray-slider {
  position: relative;
  margin-top: 2rem;
}
.xray-slider__track {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0.75rem;
}
.xray-slider__card {
  background: #4574C9;
  border-radius: 0.75rem;
  overflow: hidden;
  position: relative;
  aspect-ratio: 16/9;
}
.xray-slider__card .placeholder {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #4574C9 0%, #6F9CE8 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.35);
  font-size: 0.85rem;
}
.xray-slider__card .badge {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  background: rgba(255,255,255,0.95);
  color: #6F9CE8;
  font-size: 0.6rem;
  font-weight: 700;
  padding: 0.2rem 0.5rem;
  border-radius: 4px;
}
.xray-slider__card .caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0,0,0,0.6);
  color: white;
  padding: 0.5rem 0.75rem;
  font-size: 0.75rem;
}

/* 신뢰 배너 (다크) */
.trust-banner {
  background: linear-gradient(135deg, #4574C9 0%, #1A2233 100%);
  color: white;
  padding: 5rem 0;
  position: relative;
  overflow: hidden;
}
.trust-banner::before { content: none; }
.trust-banner__inner {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  align-items: center;
}
@media (min-width: 768px) {
  .trust-banner__inner { grid-template-columns: auto 1fr; gap: 4rem; }
}
.trust-banner__figure {
  width: 280px;
  height: 280px;
  margin: 0 auto;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.4);
  font-size: 0.9rem;
}
.trust-banner__title {
  font-size: 1.75rem;
  font-weight: 700;
  margin-bottom: 2rem;
}
.trust-banner__values {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}
.trust-value {
  text-align: center;
}
.trust-value__icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 0.75rem;
  border-radius: 50%;
  background: linear-gradient(135deg, #94B7F0 0%, #6F9CE8 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
}
.trust-value__title {
  font-size: 0.95rem;
  font-weight: 700;
  margin-bottom: 0.25rem;
}
.trust-value__desc {
  font-size: 0.75rem;
  color: rgba(255,255,255,0.7);
}

/* 시스템 안내 배너 (밝은 블루) */
.system-banner {
  background: linear-gradient(90deg, #E8F0FF 0%, #FFFFFF 100%);
  border-radius: 1rem;
  padding: 2rem;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  align-items: center;
  margin: 3rem 0;
}
@media (min-width: 768px) {
  .system-banner { grid-template-columns: 1fr auto; padding: 2.5rem 3rem; }
}
.system-banner__title {
  font-size: 1.5rem;
  font-weight: 700;
  color: #1A2233;
  margin-bottom: 0.5rem;
}
.system-banner__subtitle {
  font-size: 0.95rem;
  color: #4A5568;
}
.system-banner__doctors {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
}
.system-banner__doctor {
  width: 80px;
  height: 100px;
  background: linear-gradient(180deg, #E8F0FF 0%, #FFFFFF 100%);
  border-radius: 0.5rem;
  border: 1px dashed #6F9CE8;
  display: flex;
  align-items: end;
  justify-content: center;
  color: #6F9CE8;
  font-size: 0.7rem;
  padding-bottom: 0.5rem;
}
.system-banner__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: #6F9CE8;
  color: white;
  padding: 0.75rem 1.5rem;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.9rem;
}
.system-banner__cta:hover { background: #4574C9; }

/* 빌딩 외관 (전체 너비 풀 이미지) */
.building-hero {
  position: relative;
  aspect-ratio: 21/9;
  background: linear-gradient(180deg, #2A3548 0%, #1A2233 100%);
  display: flex;
  align-items: end;
  justify-content: center;
  color: rgba(255,255,255,0.3);
  font-size: 0.9rem;
  overflow: hidden;
}
.building-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255,255,255,0.04) 1px, transparent 1px), radial-gradient(rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 24px 24px;
  background-position: 0 0, 12px 12px;
}
.building-hero__label {
  position: relative;
  z-index: 1;
  padding: 1.5rem;
  background: rgba(0,0,0,0.4);
  border-radius: 0.5rem 0.5rem 0 0;
  margin-top: auto;
}

/* 인라인 빠른 상담 폼 */
.inline-form {
  background: white;
  border-top: 1px solid #E2E8F0;
  padding: 1rem;
}
.inline-form__inner {
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.5rem;
  align-items: center;
}
@media (min-width: 1024px) {
  .inline-form__inner {
    grid-template-columns: 1.2fr 1.5fr 1fr 1.5fr auto auto;
    gap: 0.75rem;
  }
}
.inline-form input[type="text"],
.inline-form input[type="tel"],
.inline-form select {
  padding: 0.6rem 0.75rem;
  border: 1px solid #E2E8F0;
  border-radius: 0.4rem;
  font-size: 0.875rem;
  background: white;
}
.inline-form input:focus,
.inline-form select:focus {
  outline: none;
  border-color: #6F9CE8;
}
.inline-form__agree {
  font-size: 0.8rem;
  color: #4A5568;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.inline-form__submit {
  background: #6F9CE8;
  color: white;
  padding: 0.65rem 1.5rem;
  border-radius: 0.4rem;
  font-weight: 700;
  font-size: 0.875rem;
  border: 0;
  cursor: pointer;
  transition: background 0.15s ease;
}
.inline-form__submit:hover { background: #4574C9; }

/* Prose 본문 스타일 */
.prose-body { line-height: 1.75; color: #4A5568; }
.prose-body h2 { color: #1A2233; font-size: 1.75rem; font-weight: 700; margin-top: 3rem; margin-bottom: 1rem; }
.prose-body h3 { color: #6F9CE8; font-size: 1.25rem; font-weight: 600; margin-top: 2rem; margin-bottom: 0.75rem; }
.prose-body p { margin-bottom: 1rem; }
.prose-body ul { list-style: disc; padding-left: 1.5rem; margin-bottom: 1rem; }
.prose-body ol { list-style: decimal; padding-left: 1.5rem; margin-bottom: 1rem; }
.prose-body li { margin-bottom: 0.5rem; }
.prose-body table { width: 100%; border-collapse: collapse; margin: 1.5rem 0; }
.prose-body th, .prose-body td {
  border: 1px solid #E2E8F0;
  padding: 0.75rem 1rem;
  text-align: left;
}
.prose-body th { background: #F7F9FC; font-weight: 600; color: #1A2233; }
.prose-body blockquote {
  border-left: 4px solid #6F9CE8;
  padding: 1rem 1.5rem;
  background: #F7F9FC;
  margin: 1.5rem 0;
  color: #4A5568;
  font-style: normal;
}
.prose-body strong { color: #1A2233; font-weight: 600; }

/* ============================================
   Design Polish v2 — 위생적·전문적 톤 다듬기
   ============================================ */

/* 본문 타이포 정제 */
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "ss01", "ss02", "tnum";
  color: #1F2937;
}
h1, h2, h3, h4 {
  letter-spacing: -0.022em;
  color: #0F172A;
}
.text-neutral-body { color: #4A5568; }

/* 페이지 hero — 더 차분한 의료 톤 (탑 살짝 밝게, 바닥 살짝 진하게) */
.page-hero {
  background: linear-gradient(160deg, #7BA9EE 0%, #4574C9 70%, #2F5BAA 100%);
  padding-top: 8.5rem;
  padding-bottom: 4.5rem;
}
.page-hero::before {
  background:
    radial-gradient(circle at 18% 25%, rgba(255,255,255,0.18) 0%, transparent 38%),
    radial-gradient(circle at 82% 75%, rgba(255,255,255,0.10) 0%, transparent 42%);
}
.page-hero h1 { font-weight: 800; letter-spacing: -0.03em; }
.page-hero p { font-weight: 400; }

/* 카드/공통 borders + shadow — 더 깔끔 */
.faq-item,
.service-card,
.step-card,
.tldr-box {
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  transition: border-color 0.2s ease, box-shadow 0.25s ease, transform 0.25s ease;
}
.service-card:hover,
.step-card:hover {
  box-shadow: 0 10px 26px rgba(69, 116, 201, 0.10);
  transform: translateY(-3px);
}

/* Breadcrumb — 더 미세한 톤 */
.breadcrumb { opacity: 0.78; letter-spacing: 0.01em; }

/* CTA·버튼 일관성 */
.btn-primary,
.btn-primary-v3 {
  font-weight: 600;
  letter-spacing: -0.005em;
  box-shadow: 0 2px 6px rgba(69, 116, 201, 0.18);
  transition: background 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
}
.btn-primary:hover,
.btn-primary-v3:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(69, 116, 201, 0.22);
}

/* 페이지 모든 H2 섹션 타이틀 가운데 정렬일 때 약간의 letter-spacing */
section h2 { letter-spacing: -0.025em; }

/* (구) 메가메뉴 잔여 룰 제거됨 — .gnb-flyout 시스템으로 대체 */

/* SVG 라인 두께 정돈 (전역적으로 의료 톤에 맞게 살짝 얇게) */
section svg[stroke-width="2"] { stroke-width: 1.7; }

/* 표 셀 라인 가벼움 */
.prose-body th, .prose-body td { border-color: #EEF2F7; }

/* TL;DR 박스 폰트 정돈 */
.tldr-box p { font-size: 1rem; line-height: 1.75; }

/* Reduce motion 존중 (추가) */
@media (prefers-reduced-motion: reduce) {
  .service-card, .step-card, .faq-item, .btn-primary, .btn-primary-v3 {
    transition: none !important;
  }
  .service-card:hover, .step-card:hover, .btn-primary:hover, .btn-primary-v3:hover {
    transform: none !important;
  }
}

/* ============================================
   about/ 페이지 공통 리뉴얼 모듈 (v4)
   ============================================ */

/* 섹션 상단 영문 작은 라벨 */
.intro-eyebrow {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.25em;
  color: #6F9CE8;
  text-transform: uppercase;
}
.intro-eyebrow + .section-dot {
  display: block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #6F9CE8;
  margin: 0.75rem auto 1rem;
}

/* 중앙 정렬 섹션 타이틀 블록 */
.section-title {
  text-align: center;
  margin-bottom: 3rem;
}
.section-title h2 {
  font-size: 1.75rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: #0F172A;
  margin-bottom: 0.6rem;
}
.section-title p {
  font-size: 0.92rem;
  color: #4A5568;
  line-height: 1.7;
}
@media (min-width: 768px) {
  .section-title h2 { font-size: 2.2rem; }
  .section-title p { font-size: 1rem; }
}

/* 동그라미 번호 스텝 */
.numbered-step {
  background: white;
  border: 1px solid #E2E8F0;
  border-radius: 1rem;
  padding: 2.2rem 1.4rem 1.6rem;
  text-align: center;
  transition: border-color 0.2s ease, transform 0.2s ease;
  position: relative;
}
.numbered-step:hover {
  border-color: #6F9CE8;
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(69,116,201,0.08);
}
.numbered-step__num {
  position: absolute;
  top: -16px;
  left: 50%;
  transform: translateX(-50%);
  width: 32px; height: 32px;
  border-radius: 50%;
  background: #4574C9;
  color: white;
  font-size: 0.82rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.numbered-step__title {
  font-size: 1.05rem;
  font-weight: 700;
  color: #0F172A;
  margin: 0.6rem 0 0.5rem;
}
.numbered-step__desc {
  font-size: 0.85rem;
  color: #4A5568;
  line-height: 1.75;
}

/* 장비 카드 (상단 짙은 라벨) */
.equip-card {
  background: white;
  border: 1px solid #E2E8F0;
  border-radius: 1.1rem;
  overflow: hidden;
  position: relative;
  transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 1px 3px rgba(15,23,42,0.04);
}
.equip-card:hover {
  border-color: #6F9CE8;
  transform: translateY(-6px);
  box-shadow: 0 20px 40px rgba(69,116,201,0.14);
}
.equip-card__label {
  background: linear-gradient(135deg, #4574C9 0%, #6F9CE8 100%);
  color: white;
  text-align: center;
  font-size: 0.82rem;
  letter-spacing: 0.22em;
  font-weight: 800;
  padding: 0.55rem 0;
  position: relative;
}
.equip-card__label::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -6px;
  width: 12px;
  height: 12px;
  background: #4574C9;
  transform: translateX(-50%) rotate(45deg);
}
.equip-card__media {
  aspect-ratio: 1/1;
  background:
    radial-gradient(circle at 30% 20%, rgba(255,255,255,0.9) 0%, transparent 50%),
    linear-gradient(180deg, #F4F8FF 0%, #DCE8FA 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #6F9CE8;
  position: relative;
  overflow: hidden;
}
.equip-card__media::before {
  content: "";
  position: absolute;
  top: -20%;
  right: -20%;
  width: 60%;
  height: 60%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(111,156,232,0.18) 0%, transparent 70%);
}
.equip-card__media::after {
  content: "";
  position: absolute;
  bottom: -30%;
  left: -10%;
  width: 50%;
  height: 50%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(143,189,255,0.14) 0%, transparent 70%);
}
.equip-card__media svg {
  position: relative;
  z-index: 1;
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), color 0.3s ease;
}
.equip-card:hover .equip-card__media svg {
  transform: scale(1.1);
  color: #4574C9;
}
.equip-card__body {
  padding: 1.2rem 1.1rem 1.4rem;
  text-align: center;
}
.equip-card__name {
  font-size: 1.05rem;
  font-weight: 700;
  color: #0F172A;
  margin-bottom: 0.5rem;
}
.equip-card__list {
  font-size: 0.78rem;
  color: #4A5568;
  line-height: 1.7;
  list-style: none;
  padding: 0;
  margin: 0;
  text-align: left;
}
.equip-card__list li::before {
  content: "·";
  color: #6F9CE8;
  font-weight: 700;
  margin-right: 0.4rem;
}

/* 짙은 블루 프로세스 배너 */
.process-banner {
  background: linear-gradient(135deg, #4574C9 0%, #2F5BAA 100%);
  color: white;
  border-radius: 1rem;
  padding: 2.5rem 1.5rem;
  margin: 3rem 0;
}
@media (min-width: 768px) { .process-banner { padding: 3rem 2.5rem; } }
.process-banner__head {
  text-align: center;
  margin-bottom: 2rem;
}
.process-banner__head h3 {
  font-size: 1.4rem;
  font-weight: 800;
  color: white;
  margin-bottom: 0.4rem;
}
.process-banner__head p {
  color: rgba(255,255,255,0.78);
  font-size: 0.9rem;
}
.process-banner__list {
  display: grid;
  gap: 0.75rem;
}
.process-banner__item {
  display: flex;
  gap: 0.85rem;
  align-items: flex-start;
  font-size: 0.88rem;
  line-height: 1.7;
  color: rgba(255,255,255,0.95);
}
.process-banner__item .badge {
  flex-shrink: 0;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: white;
  color: #4574C9;
  font-size: 0.78rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
}

/* Point 박스 (왜 우리인가요?) */
.point-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
}
@media (min-width: 768px) { .point-row { grid-template-columns: 1fr 1fr; } }
.point-row__cell {
  display: flex;
  align-items: center;
  gap: 1rem;
  background: white;
  border: 1px solid #E2E8F0;
  border-radius: 0.75rem;
  padding: 1rem 1.25rem;
}
.point-row__cell .label {
  font-size: 0.78rem;
  font-weight: 700;
  color: #4574C9;
  padding: 0.25rem 0.6rem;
  border: 1px solid #4574C9;
  border-radius: 4px;
  flex-shrink: 0;
}
.point-row__cell .text {
  font-size: 0.92rem;
  color: #1A2233;
  font-weight: 500;
}

/* === 진료 장비·멸균 페이지 전용 추가 === */
/* 인트로 본문 (큰 강조 + 데코 라인) */
.intro-deco {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin: 0 auto 1.5rem;
  max-width: 280px;
  color: #94B7F0;
}
.intro-deco::before,
.intro-deco::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, #C9D8F0 100%);
}
.intro-deco::after { background: linear-gradient(90deg, #C9D8F0 0%, transparent 100%); }

.intro-body {
  text-align: center;
  font-size: 1.1rem;
  line-height: 1.85;
  color: #1A2233;
  font-weight: 600;
  letter-spacing: -0.015em;
  max-width: 820px;
  margin: 0 auto;
}
.intro-body strong {
  background: linear-gradient(135deg, #4574C9 0%, #6F9CE8 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 800;
  position: relative;
  display: inline-block;
}
.intro-body strong::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 6px;
  background: rgba(111,156,232,0.18);
  border-radius: 3px;
  z-index: -1;
}
@media (min-width: 768px) {
  .intro-body { font-size: 1.45rem; line-height: 1.9; }
}

/* 운영 프로세스 카드 (큰 워터마크 숫자) */
.process-step {
  background: white;
  border: 1px solid #E2E8F0;
  border-radius: 1.25rem;
  overflow: hidden;
  transition: border-color 0.3s ease, transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s ease;
  display: flex;
  flex-direction: column;
  position: relative;
  box-shadow: 0 1px 3px rgba(15,23,42,0.04);
}
.process-step:hover {
  border-color: #6F9CE8;
  transform: translateY(-8px);
  box-shadow: 0 24px 48px rgba(69,116,201,0.14);
}
.process-step__media {
  position: relative;
  aspect-ratio: 16/10;
  background: #EAF2FF;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.process-step__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 1;
}
.process-step:hover .process-step__media img {
  transform: scale(1.06);
}
.process-step__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(47,91,170,0) 50%, rgba(47,91,170,0.18) 100%);
  z-index: 2;
  pointer-events: none;
}
.process-step__media[data-bignum]::before {
  content: attr(data-bignum);
  position: absolute;
  top: 0.6rem;
  right: 0.9rem;
  font-size: 2rem;
  font-weight: 900;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(255,255,255,0.92);
  letter-spacing: -0.04em;
  pointer-events: none;
  z-index: 3;
  text-shadow: 0 2px 8px rgba(0,0,0,0.18);
}
.process-step__num {
  position: absolute;
  bottom: -22px;
  left: 50%;
  transform: translateX(-50%);
  width: 48px; height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, #4574C9 0%, #2F5BAA 100%);
  color: white;
  font-size: 1.1rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 4px solid white;
  box-shadow: 0 8px 20px rgba(47,91,170,0.35);
  z-index: 4;
}
.process-step__body {
  padding: 2.4rem 1.4rem 1.8rem;
  text-align: center;
  background: white;
}
.process-step__title {
  font-size: 1.15rem;
  font-weight: 800;
  color: #0F172A;
  margin-bottom: 0.6rem;
  letter-spacing: -0.02em;
}
.process-step__desc {
  font-size: 0.88rem;
  color: #4A5568;
  line-height: 1.75;
}

/* Point 4 카드 — 아이콘 + 핵심 수치 강조형 */
.point-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.1rem;
}
@media (min-width: 640px) {
  .point-grid { grid-template-columns: 1fr 1fr; gap: 1.3rem; }
}
@media (min-width: 1024px) {
  .point-grid { grid-template-columns: repeat(4, 1fr); gap: 1.3rem; }
}
.point-card {
  position: relative;
  background: white;
  border: 1px solid #E2E8F0;
  border-radius: 1.25rem;
  padding: 2.2rem 1.5rem 1.9rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(15,23,42,0.04);
  transition: border-color 0.35s ease, transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.35s ease;
}
.point-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #4574C9 0%, #6F9CE8 100%);
  opacity: 0.55;
  transition: opacity 0.35s ease, height 0.35s ease;
}
.point-card:hover {
  border-color: #6F9CE8;
  transform: translateY(-6px);
  box-shadow: 0 20px 40px rgba(69,116,201,0.15);
}
.point-card:hover::before {
  opacity: 1;
  height: 5px;
}
.point-card__badge {
  display: inline-flex;
  align-items: baseline;
  gap: 0.35rem;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  color: #6F9CE8;
  margin-bottom: 0.4rem;
}
.point-card__badge small {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: #94B7F0;
}
.point-card__icon {
  width: 74px;
  height: 74px;
  border-radius: 50%;
  background: linear-gradient(135deg, #EEF3FC 0%, #DCE7F8 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #4574C9;
  margin: 0.5rem 0 1.3rem;
  transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.35s ease;
}
.point-card:hover .point-card__icon {
  transform: scale(1.08) rotate(-5deg);
  background: linear-gradient(135deg, #DDE9F9 0%, #C5D7F1 100%);
}
.point-card__number {
  display: block;
  font-size: 2.3rem;
  font-weight: 900;
  background: linear-gradient(135deg, #4574C9 0%, #6F9CE8 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: -0.035em;
  line-height: 1;
}
.point-card__divider {
  display: block;
  width: 38px;
  height: 2px;
  background: linear-gradient(90deg, transparent, #6F9CE8, transparent);
  margin: 0.9rem auto;
  border-radius: 2px;
}
.point-card__title {
  font-size: 1rem;
  font-weight: 700;
  color: #1A2233;
  letter-spacing: -0.015em;
  line-height: 1.4;
  margin-bottom: 0.55rem;
}
.point-card__desc {
  font-size: 0.83rem;
  line-height: 1.65;
  color: #5A6478;
  letter-spacing: -0.01em;
}

/* 섹션 디바이더 (좌우 라인 + 점) */
.divider-dot {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  max-width: 120px;
  margin: 0 auto 2.5rem;
  color: #C9D8F0;
}
.divider-dot::before,
.divider-dot::after {
  content: "";
  flex: 1;
  height: 1px;
  background: #E2E8F0;
}
.divider-dot__center {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #6F9CE8;
  flex-shrink: 0;
}

/* 프로세스 배너 강화 */
.process-banner {
  background:
    radial-gradient(circle at 100% 0%, rgba(255,255,255,0.08) 0%, transparent 50%),
    radial-gradient(circle at 0% 100%, rgba(255,255,255,0.06) 0%, transparent 50%),
    linear-gradient(135deg, #4574C9 0%, #2F5BAA 100%);
  position: relative;
  overflow: hidden;
}
.process-banner::before {
  content: "";
  position: absolute;
  top: -50%;
  right: -20%;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,0.08) 0%, transparent 70%);
  pointer-events: none;
}
.process-banner__item {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 0.75rem;
  padding: 0.85rem 1rem;
  transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}
.process-banner__item:hover {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.25);
  transform: translateY(-2px);
}
.process-banner__item .badge {
  width: 30px; height: 30px;
  font-size: 0.85rem;
  box-shadow: 0 3px 10px rgba(0,0,0,0.15);
}

/* ───── 메인 히어로 슬라이더 ───── */
.hero-slider {
  position: relative;
  display: grid;          /* 모든 슬라이드를 같은 셀에 스택 — 가장 긴 슬라이드 높이로 컨테이너가 자람 */
  grid-template-areas: "slide";
}
.hero-slide {
  grid-area: slide;       /* 같은 셀에 겹쳐 배치 */
  position: relative;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 1.1s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s linear 1.1s;
  z-index: 1;
}
.hero-slide.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 1.1s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s linear;
  z-index: 2;
}
.hero-slide__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: scale(1.06);
  transition: transform 7s ease-out;
}
.hero-slide.is-active .hero-slide__bg {
  transform: scale(1);
}
.hero-slide__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10,20,55,0.55) 0%, rgba(10,20,55,0.62) 50%, rgba(10,20,55,0.78) 100%);
}
.hero-slide__content {
  position: relative;
  max-width: 80rem;
  margin: 0 auto;
  padding: 7rem 1.25rem 4.5rem;
  /* 모바일 주소창 고려해 svh 사용 — 첫 로드 시 가운데 정렬 콘텐츠 잘림 방지 */
  min-height: 90vh;
  min-height: 90svh;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.9s ease 0.25s, transform 0.9s cubic-bezier(0.34, 1.56, 0.64, 1) 0.25s;
}
/* ───────── 모바일 하단 sticky 예약 바 ───────── */
.mobile-booking-bar {
  display: none;
}
@media (max-width: 1023px) {
  .mobile-booking-bar {
    display: flex;
    position: fixed;
    left: 0.75rem;
    right: 0.75rem;
    bottom: max(0.75rem, env(safe-area-inset-bottom));
    z-index: 45;
    gap: 0.5rem;
    transform: translateY(0);
    transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.24s ease;
    will-change: transform, opacity;
  }
  .mobile-booking-bar[data-visible="false"] {
    transform: translateY(140%);
    opacity: 0;
    pointer-events: none;
  }
  .mobile-booking-bar__btn {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    background: linear-gradient(135deg, #03C75A 0%, #02B050 100%);
    color: #ffffff;
    font-weight: 800;
    font-size: 1rem;
    padding: 0.95rem 1.1rem;
    border-radius: 999px;
    box-shadow: 0 8px 24px rgba(3, 199, 90, 0.32),
                0 2px 6px rgba(15, 23, 42, 0.08);
    text-decoration: none;
    letter-spacing: -0.02em;
  }
  .mobile-booking-bar__btn:hover { background: linear-gradient(135deg, #02B050 0%, #019844 100%); }
  .mobile-booking-bar__chip {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px; height: 52px;
    border-radius: 999px;
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.12),
                0 1px 3px rgba(15, 23, 42, 0.06);
    text-decoration: none;
    border: none;
  }
  .mobile-booking-bar__chip--kakao { background: #FEE500; }
  .mobile-booking-bar__chip--blog { background: #03C75A; }
  .mobile-booking-bar__chip--blog .mobile-booking-bar__chip-text {
    font-family: 'Noto Sans KR', -apple-system, sans-serif;
    font-weight: 900;
    font-size: 0.9rem;
    color: #ffffff;
    letter-spacing: -0.06em;
    line-height: 1;
  }
  /* 하단 sticky 폼이 데스크탑 전용이므로 모바일에선 body padding-bottom 추가 */
  body { padding-bottom: calc(4.5rem + env(safe-area-inset-bottom)); }
}

/* 모바일(<768px) — 하단 진료 카드(2행 ≈ 144px) 위로 컨텐츠가 오도록 padding-bottom 확보 */
@media (max-width: 767px) {
  .hero-slide__content { padding-bottom: 11rem; }
}
/* 매우 좁은 모바일(<420px) — 텍스트가 안 짤리도록 좌우/상단 padding 축소 */
@media (max-width: 419px) {
  .hero-slide__content { padding: 6rem 1rem 10.5rem; }
}
/* 모바일·태블릿(<1024px) — 우측 floating-nav는 하단 바로 옮겼으니 완전히 숨김
   히어로 좌우 padding은 균형 잡힌 값으로 유지(가운데 정렬 보존) */
@media (max-width: 1023px) {
  /* 우측 플로팅 메뉴(blog/카카오)는 모바일에서 숨김 — 하단 sticky 바로 이동 */
  aside[aria-label="플로팅 메뉴"] { display: none !important; }
}
@media (min-width: 768px) {
  .hero-slide__content { padding: 8rem 1.5rem 5rem; }
}
@media (min-width: 1024px) {
  .hero-slide__content { padding: 8rem 2.5rem 5rem; }
}
/* 노트북·중간 데스크탑 (1024~1535): 우측 floating-nav 영역만큼 추가 padding-right
   MacBook Pro 14"(1512px)·16"(1728px) 모두 커버하기 위해 1535까지 확장
   풀데스크탑(1536+)에선 자연스러우니 적용 안 함 */
@media (min-width: 1024px) and (max-width: 1535px) {
  .hero-slide__content { padding-right: 7rem !important; padding-left: 7rem !important; }
}
.hero-slide.is-active .hero-slide__content {
  opacity: 1;
  transform: translateY(0);
}
.hero-eyebrow {
  font-size: 0.78rem;
  letter-spacing: 0.4em;
  font-weight: 500;
  color: rgba(255,255,255,0.8);
  margin-bottom: 1.5rem;
}
@media (min-width: 1024px) {
  .hero-eyebrow { font-size: 0.875rem; }
}
.hero-stat-strip {
  display: inline-flex;
  align-items: center;
  gap: 1.5rem;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 999px;
  padding: 0.75rem 1.5rem;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  margin-bottom: 2.5rem;
}
@media (min-width: 1024px) {
  .hero-stat-strip { gap: 2.5rem; padding: 0.75rem 2.5rem; }
}
.hero-stat { text-align: center; }
.hero-stat__num {
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1;
  color: #FFFFFF;
}
.hero-stat__num span {
  font-size: 0.875rem;
}
@media (min-width: 1024px) {
  .hero-stat__num { font-size: 1.5rem; }
}
.hero-stat__label {
  font-size: 9px;
  letter-spacing: 0.15em;
  color: rgba(255,255,255,0.55);
  margin-top: 0.25rem;
}
.hero-stat__div {
  width: 1px;
  height: 2rem;
  background: rgba(255,255,255,0.2);
}

/* 좌/우 화살표 */
.hero-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.25);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}
@media (min-width: 1024px) {
  .hero-arrow {
    width: 56px;
    height: 56px;
  }
}
.hero-arrow:hover {
  background: rgba(255,255,255,0.18);
  border-color: rgba(255,255,255,0.55);
  transform: translateY(-50%) scale(1.05);
}
.hero-arrow:focus-visible {
  outline: 2px solid white;
  outline-offset: 3px;
}
.hero-arrow--prev { left: 1rem; }
.hero-arrow--next { right: 1rem; }
@media (min-width: 1024px) {
  .hero-arrow--prev { left: 2.5rem; }
  .hero-arrow--next { right: 2.5rem; }
}
@media (max-width: 639px) {
  .hero-arrow {
    width: 40px;
    height: 40px;
    background: rgba(255,255,255,0.05);
  }
}

/* 닷 인디케이터 */
.hero-dots {
  position: absolute;
  bottom: 2.2rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 0.55rem;
  z-index: 10;
}
@media (max-width: 639px) {
  .hero-dots { bottom: 1.4rem; }
}
.hero-dot {
  width: 28px;
  height: 4px;
  border-radius: 4px;
  background: rgba(255,255,255,0.3);
  border: none;
  padding: 0;
  cursor: pointer;
  transition: background 0.3s ease, width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.hero-dot:hover {
  background: rgba(255,255,255,0.55);
}
.hero-dot.is-active {
  width: 56px;
  background: white;
}
.hero-dot:focus-visible {
  outline: 2px solid white;
  outline-offset: 3px;
}

/* prefers-reduced-motion: 애니메이션 최소화 */
@media (prefers-reduced-motion: reduce) {
  .hero-slide,
  .hero-slide__bg,
  .hero-slide__content {
    transition-duration: 0.001s;
  }
  .hero-slide.is-active .hero-slide__bg {
    transform: none;
  }
}

/* ───── 누적 진료 현황 (간결형, 카드 박스 제거) ───── */
.counter-board {
  position: relative;
  background: linear-gradient(180deg, #FBFDFF 0%, #F1F6FD 100%);
  padding: 4.5rem 1rem 4.5rem;
  overflow: hidden;
  border-top: 1px solid #E2E8F0;
  border-bottom: 1px solid #E2E8F0;
}
.counter-board__bg {
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(ellipse 60% 40% at 50% 0%, rgba(111,156,232,0.12), transparent 60%);
  pointer-events: none;
}
.counter-board__inner {
  position: relative;
  max-width: 80rem;
  margin: 0 auto;
}
.counter-board__head {
  text-align: center;
  margin-bottom: 3rem;
}
.counter-board__eyebrow {
  display: inline-block;
  font-size: 0.72rem;
  letter-spacing: 0.28em;
  font-weight: 700;
  color: #4574C9;
  margin-bottom: 0.9rem;
}
.counter-board__heading {
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #1A2233;
  margin-bottom: 0.7rem;
}
.counter-board__heading span {
  background: linear-gradient(135deg, #4574C9 0%, #6F9CE8 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.counter-board__subtext {
  font-size: 0.95rem;
  color: #5A6478;
  letter-spacing: -0.005em;
  line-height: 1.65;
}
.counter-board__subtext strong {
  color: #1A2233;
  font-weight: 700;
}
.counter-board__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem 0;
}
@media (min-width: 768px) {
  .counter-board__grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
  }
}
.counter-item {
  text-align: center;
  position: relative;
  padding: 0.5rem 1rem;
}
@media (min-width: 768px) {
  .counter-item + .counter-item::before {
    content: "";
    position: absolute;
    left: 0;
    top: 18%;
    bottom: 18%;
    width: 1px;
    background: linear-gradient(180deg, transparent, #C5D7F1 30%, #C5D7F1 70%, transparent);
  }
}
.counter-item__eyebrow {
  font-size: 0.78rem;
  color: #6F9CE8;
  font-weight: 600;
  margin-bottom: 0.35rem;
  letter-spacing: -0.005em;
}
.counter-item__label {
  font-size: 1rem;
  color: #1A2233;
  font-weight: 700;
  margin-bottom: 1rem;
  letter-spacing: -0.01em;
}
.counter-item__digits {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 0.4rem;
}
.counter-item__num {
  font-size: clamp(2.8rem, 6.5vw, 4rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1;
  background: linear-gradient(135deg, #4574C9 0%, #6F9CE8 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-variant-numeric: tabular-nums;
}
.counter-item__unit {
  font-size: 1.05rem;
  color: #4574C9;
  font-weight: 600;
  letter-spacing: -0.005em;
}

/* 진료시간 카드 */
.hours-card {
  background: white;
  border: 1px solid #E2E8F0;
  border-radius: 1rem;
  padding: 1.5rem;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.25rem;
  align-items: center;
}
.hours-card__icon {
  width: 64px; height: 64px;
  border-radius: 14px;
  background: linear-gradient(180deg, #4574C9 0%, #2F5BAA 100%);
  color: white;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
}
.hours-card__icon .day {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
}
.hours-card__rows {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.5rem 1.25rem;
  font-size: 0.92rem;
}
.hours-card__rows .lbl {
  color: #4574C9;
  font-weight: 700;
  white-space: nowrap;
}
.hours-card__rows .val { color: #1A2233; }
.hours-card__rows .sub {
  grid-column: 2 / 3;
  font-size: 0.78rem;
  color: #6F9CE8;
  margin-top: -0.2rem;
}
.hours-card__rows .night {
  display: inline-block;
  background: #E8F0FF;
  color: #4574C9;
  font-size: 0.7rem;
  padding: 0.15rem 0.5rem;
  border-radius: 4px;
  margin-left: 0.3rem;
  font-weight: 700;
}
.hours-card__rows .closed {
  grid-column: 1 / 3;
  font-size: 0.8rem;
  color: #D63D3D;
  font-weight: 600;
  margin-top: 0.4rem;
}
.hours-card__rows .note {
  grid-column: 1 / 3;
  font-size: 0.78rem;
  color: #8A5500;
  background: #FFF6E0;
  border-left: 3px solid #F2B344;
  padding: 0.45rem 0.7rem;
  margin-top: 0.6rem;
  border-radius: 0 6px 6px 0;
  line-height: 1.5;
}

/* 지하철 노선 컬러칩 */
.station-pill {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  background: white;
  border-radius: 999px;
  padding: 1.1rem 1.4rem;
  min-width: 130px;
  position: relative;
}
.station-pill__line {
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.7rem;
  font-weight: 700;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  color: white;
  white-space: nowrap;
}
.station-pill--g { border: 3px solid #00A84F; }
.station-pill--g .station-pill__line { background: #00A84F; }
.station-pill--r { border: 3px solid #D63D3D; }
.station-pill--r .station-pill__line { background: #D63D3D; }
.station-pill--b { border: 3px solid #4574C9; }
.station-pill--b .station-pill__line { background: #4574C9; }
.station-pill__name {
  font-size: 1rem;
  font-weight: 800;
  color: #0F172A;
}
.station-pill__exit {
  font-size: 0.72rem;
  color: #4A5568;
  margin-top: 0.2rem;
  white-space: nowrap;
}
.station-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  padding: 1.5rem 0;
  position: relative;
}
.station-row::before {
  content: "";
  position: absolute;
  left: 10%; right: 10%;
  top: 50%;
  height: 2px;
  background: #E2E8F0;
  z-index: -1;
}

/* 시설 둘러보기 — 통합 그리드 */
.facility-gallery {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}
@media (min-width: 640px) {
  .facility-gallery { grid-template-columns: repeat(3, 1fr); gap: 1.1rem; }
}
@media (min-width: 1024px) {
  .facility-gallery { grid-template-columns: repeat(4, 1fr); gap: 1.25rem; }
}
.facility-card {
  margin: 0;
  background: #F1F5FA;
  border: 1px solid #E2E8F0;
  border-radius: 0.9rem;
  overflow: hidden;
  position: relative;
  z-index: 1;
  transition: box-shadow 0.4s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.3s ease;
}
.facility-card:hover {
  border-color: transparent;
  box-shadow: 0 18px 40px -8px rgba(15, 23, 42, 0.20);
}
.facility-card__media {
  display: block;
  aspect-ratio: 4/3;
  overflow: hidden;
  background: #F1F5FA;
  position: relative;
}
.facility-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: transform;
}
.facility-card:hover img { transform: scale(1.08); }

/* 캡션 오버레이 — 평상시 숨김, hover 시 아래에서 슬라이드업 */
.facility-card figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 1.6rem 1rem 1.1rem;
  background: linear-gradient(180deg, rgba(15,23,42,0) 0%, rgba(15,23,42,0.85) 50%, rgba(15,23,42,1) 100%);
  color: #FFFFFF !important;
  font-size: 1rem;
  font-weight: 700;
  text-align: center;
  letter-spacing: -0.015em;
  line-height: 1.45;
  transform: translateY(100%);
  opacity: 0;
  transition:
    transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1),
    opacity 0.35s ease;
  pointer-events: none;
  text-shadow: 0 1px 3px rgba(0,0,0,0.6);
}
.facility-card:hover figcaption {
  transform: translateY(0);
  opacity: 1;
}

@media (hover: none) {
  /* 터치 디바이스: 캡션 항상 살짝 보이게 */
  .facility-card figcaption {
    transform: translateY(0);
    opacity: 1;
    padding: 1rem 0.85rem 0.75rem;
    background: linear-gradient(180deg, rgba(15,23,42,0) 0%, rgba(15,23,42,0.75) 60%);
    font-size: 0.78rem;
  }
  .facility-card:hover img { transform: none; }
}
.facility-card figcaption {
  padding: 0.7rem 0.85rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: #0F172A;
  text-align: center;
  letter-spacing: -0.01em;
  border-top: 1px solid #EEF2F7;
}

/* 시설 둘러보기 — 공간별 행 (좌 라벨 + 우 썸네일) */
.facility-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid #E2E8F0;
}
.facility-row:last-of-type { border-bottom: 0; padding-bottom: 0; }
@media (min-width: 1024px) {
  .facility-row {
    grid-template-columns: 240px 1fr;
    gap: 3rem;
    align-items: start;
  }
}
.facility-row__head {
  position: sticky;
  top: 100px;
}
.facility-row__title {
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -0.025em;
  color: #0F172A;
  margin-bottom: 0.4rem;
}
@media (min-width: 1024px) {
  .facility-row__title { font-size: 1.7rem; }
}
.facility-row__sub {
  font-size: 0.85rem;
  font-weight: 600;
  color: #4574C9;
  margin-bottom: 0.8rem;
}
.facility-row__desc {
  font-size: 0.85rem;
  line-height: 1.7;
  color: #4A5568;
}
.facility-row__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.7rem;
}
@media (min-width: 640px) {
  .facility-row__grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1024px) {
  .facility-row__grid { grid-template-columns: repeat(4, 1fr); }
}
.facility-row__grid a {
  display: block;
  aspect-ratio: 4/3;
  overflow: hidden;
  border-radius: 0.6rem;
  background: #F1F5FA;
}
.facility-row__grid img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}
.facility-row__grid a:hover img { transform: scale(1.05); }

/* 병원 장점 카드 */
.benefit-card {
  background: white;
  border: 1px solid #E2E8F0;
  border-radius: 1rem;
  padding: 1.6rem 1.4rem;
  text-align: center;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.benefit-card:hover {
  border-color: #6F9CE8;
  box-shadow: 0 12px 28px rgba(69,116,201,0.10);
  transform: translateY(-3px);
}
.benefit-card__icon {
  width: 52px;
  height: 52px;
  margin: 0 auto 0.9rem;
  border-radius: 12px;
  background: #E8F0FF;
  color: #4574C9;
  display: flex;
  align-items: center;
  justify-content: center;
}
.benefit-card__title {
  font-size: 1rem;
  font-weight: 700;
  color: #0F172A;
  margin-bottom: 0.5rem;
  letter-spacing: -0.015em;
}
.benefit-card__desc {
  font-size: 0.82rem;
  color: #4A5568;
  line-height: 1.7;
}

/* 의료진 강점 카드 (상단 3열) */
.doc-merit {
  background: white;
  border: 1px solid #E2E8F0;
  border-radius: 1rem;
  padding: 1.75rem 1.5rem;
  text-align: center;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.doc-merit:hover {
  border-color: #6F9CE8;
  box-shadow: 0 12px 28px rgba(69,116,201,0.10);
  transform: translateY(-3px);
}
.doc-merit__icon {
  width: 56px;
  height: 56px;
  margin: 0 auto 1rem;
  border-radius: 14px;
  background: #E8F0FF;
  color: #4574C9;
  display: flex;
  align-items: center;
  justify-content: center;
}
.doc-merit__title {
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #0F172A;
  line-height: 1.4;
  margin-bottom: 0.6rem;
}
.doc-merit__desc {
  font-size: 0.85rem;
  color: #4A5568;
  line-height: 1.7;
}

/* 의료진 상세 프로필 카드 (이력 집중형) */
.doc-profile {
  background: white;
  border: 1px solid #E2E8F0;
  border-radius: 1.25rem;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.doc-profile:hover {
  border-color: #94B7F0;
  box-shadow: 0 14px 36px rgba(69,116,201,0.08);
}
@media (min-width: 768px) {
  .doc-profile { grid-template-columns: 280px 1fr; }
}
@media (min-width: 1024px) {
  .doc-profile { grid-template-columns: 320px 1fr; }
}
.doc-profile__photo {
  background: linear-gradient(180deg, #F4F8FF 0%, #E8F0FF 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  min-height: 280px;
  color: #94B7F0;
  overflow: hidden;
}
.doc-profile__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
}
.doc-profile__photo--placeholder { padding: 2.5rem 1rem; }
.doc-profile__body {
  padding: 2rem 1.75rem;
}
@media (min-width: 1024px) {
  .doc-profile__body { padding: 2.5rem 2.5rem; }
}
.doc-profile__pill {
  display: inline-block;
  font-size: 0.68rem;
  letter-spacing: 0.22em;
  font-weight: 700;
  color: #4574C9;
  background: #EEF3FB;
  padding: 0.35rem 0.8rem;
  border-radius: 999px;
  margin-bottom: 0.85rem;
}
.doc-profile__name {
  font-size: 1.6rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: #0F172A;
  margin-bottom: 0.4rem;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.5rem;
}
@media (min-width: 1024px) {
  .doc-profile__name { font-size: 1.9rem; }
}
.doc-profile__name .ko-role {
  font-size: 0.92rem;
  font-weight: 600;
  color: #4A5568;
}
.doc-profile__name .en-name {
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  color: #94A3B8;
  margin-left: auto;
  align-self: center;
}
.doc-profile__specialty {
  font-size: 0.92rem;
  font-weight: 600;
  color: #4574C9;
  margin-bottom: 1.6rem;
  padding-bottom: 1.2rem;
  border-bottom: 1px solid #E2E8F0;
}
.doc-cv {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.1rem;
  margin-bottom: 1.4rem;
}
@media (min-width: 768px) {
  .doc-cv { grid-template-columns: 1fr 1fr; gap: 1.3rem 1.8rem; }
}
.doc-cv__group { }
.doc-cv__label {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: #6F9CE8;
  margin-bottom: 0.5rem;
  text-transform: uppercase;
}
.doc-cv__label::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 1.5px;
  background: #6F9CE8;
  vertical-align: middle;
  margin-right: 0.4rem;
  margin-bottom: 2px;
}
.doc-cv__list {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.75;
  color: #4A5568;
}
.doc-cv__list li {
  position: relative;
  padding-left: 0.85rem;
  margin-bottom: 0.25rem;
}
.doc-cv__list li::before {
  content: "·";
  position: absolute;
  left: 0;
  color: #6F9CE8;
  font-weight: 700;
}
.doc-cv__list li strong { color: #0F172A; font-weight: 700; }
.doc-profile__quote {
  font-size: 0.88rem;
  color: #4A5568;
  font-style: italic;
  padding: 1rem 1.2rem;
  background: #F7F9FC;
  border-left: 3px solid #6F9CE8;
  border-radius: 0.5rem;
  line-height: 1.7;
}

/* 의료진 닥터배너 — 흰 오버레이 + 치과 배경 사진 (중앙 정렬) */
.doctor-banner {
  position: relative;
  background-image:
    linear-gradient(180deg, rgba(255,255,255,0.88) 0%, rgba(255,255,255,0.82) 100%),
    url('../assets/images/greeting-bg.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 0;
  padding: 3.5rem 1.5rem;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  width: 100vw;
  overflow: hidden;
  display: flex;
  justify-content: center;
}
.doctor-banner__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  align-items: center;
  width: 100%;
  max-width: 1100px;
  text-align: center;
}
@media (min-width: 768px) {
  .doctor-banner { padding: 5rem 3rem; }
  .doctor-banner__inner {
    grid-template-columns: 300px 1fr;
    gap: 4rem;
    text-align: left;
  }
}
@media (min-width: 1024px) {
  .doctor-banner { padding: 6rem 4rem; }
  .doctor-banner__inner { grid-template-columns: 340px 1fr; gap: 5rem; }
}
.doctor-banner__photo {
  aspect-ratio: 3/4;
  border-radius: 1rem;
  background: white;
  border: 1px solid rgba(15,23,42,0.06);
  overflow: hidden;
  max-width: 340px;
  margin: 0 auto;
  box-shadow: 0 14px 36px rgba(15,23,42,0.10);
  display: flex; align-items: flex-end; justify-content: center;
}
.doctor-banner__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
}
.doctor-banner__eyebrow {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.25em;
  color: #4574C9;
  margin-bottom: 1rem;
}
.doctor-banner__name {
  font-size: 1.9rem;
  font-weight: 800;
  color: #0F172A;
  letter-spacing: -0.03em;
  margin-bottom: 0.6rem;
}
.doctor-banner__name .role {
  font-size: 0.95rem;
  font-weight: 500;
  color: #4A5568;
  margin-left: 0.5rem;
}
.doctor-banner__specialty {
  font-size: 0.95rem;
  font-weight: 600;
  color: #4574C9;
  margin-bottom: 1.4rem;
}
.doctor-banner__msg {
  font-size: 1.05rem;
  line-height: 1.9;
  color: #1A2233;
  font-weight: 500;
}
.doctor-banner__msg strong {
  color: #0F172A;
  font-weight: 700;
}
@media (min-width: 1024px) {
  .doctor-banner__name { font-size: 2.3rem; }
  .doctor-banner__msg { font-size: 1.15rem; }
}

/* 약국 미니맵 */
.pharm-map {
  background: #F7F9FC;
  border: 1px solid #E2E8F0;
  border-radius: 1rem;
  padding: 1.5rem;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.5rem;
  min-height: 240px;
  position: relative;
}
.pharm-map__pin {
  background: white;
  border: 1px solid #E2E8F0;
  border-radius: 0.5rem;
  padding: 0.55rem 0.4rem;
  text-align: center;
  font-size: 0.72rem;
  color: #4A5568;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
}
.pharm-map__pin .ico {
  width: 18px; height: 18px;
  color: #4574C9;
}
.pharm-map__pin--our {
  background: #4574C9;
  color: white;
  border-color: #4574C9;
  grid-column: span 2;
}
.pharm-map__pin--our .ico { color: white; }
@media (max-width: 640px) {
  .pharm-map { grid-template-columns: repeat(2, 1fr); }
  .pharm-map__pin--our { grid-column: span 2; }
}

/* 길찾기 3버튼 */
.route-btn-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.6rem;
  max-width: 720px;
  margin: 0 auto;
}
@media (min-width: 768px) {
  .route-btn-row { grid-template-columns: repeat(3, 1fr); gap: 0.75rem; }
}
.route-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #2F5BAA;
  color: white;
  padding: 0.95rem 1.4rem;
  border-radius: 0.5rem;
  font-weight: 600;
  font-size: 0.95rem;
  transition: background 0.2s ease;
}
.route-btn:hover { background: #1F4490; }
.route-btn .arrow { font-size: 1.1rem; }

/* 페이지 셀렉터 바 (히어로 아래) */
.page-selector-bar {
  background: white;
  border-bottom: 1px solid #E2E8F0;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.04);
  position: relative;
  z-index: 5;
}
.page-selector-row {
  display: flex;
  align-items: stretch;
  gap: 0;
  height: 60px;
}
.page-selector__home {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  background: #2F5BAA;
  color: white;
  border-radius: 0;
  transition: background 0.2s ease;
}
.page-selector__home:hover { background: #1F4490; }
/* 커스텀 드롭다운 */
.ps-dropdown {
  position: relative;
  flex: 1;
  max-width: 280px;
  border-right: 1px solid #E2E8F0;
}
.ps-dropdown:first-of-type { border-left: 1px solid #E2E8F0; }
.ps-dropdown__btn {
  width: 100%;
  height: 100%;
  background: white;
  border: 0;
  padding: 0 1rem 0 1.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  font-size: 0.95rem;
  font-weight: 500;
  color: #1A2233;
  letter-spacing: -0.01em;
  cursor: pointer;
  outline: none;
  transition: background 0.18s ease, color 0.18s ease;
}
.ps-dropdown__btn:hover { background: #F7F9FC; }
.ps-dropdown__btn:focus-visible {
  background: #F7F9FC;
  box-shadow: inset 0 0 0 2px #4574C9;
}
.ps-dropdown__label {
  flex: 1;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ps-dropdown__caret {
  color: #94A3B8;
  flex-shrink: 0;
  transition: transform 0.2s ease, color 0.18s ease;
}
.ps-dropdown.is-open .ps-dropdown__caret {
  transform: rotate(180deg);
  color: #4574C9;
}
.ps-dropdown.is-open .ps-dropdown__btn {
  background: #F7F9FC;
  color: #4574C9;
}
.ps-dropdown__list {
  position: absolute;
  top: calc(100% + 8px);
  left: -1px;
  right: -1px;
  margin: 0;
  padding: 0.4rem;
  background: white;
  border: 1px solid #E2E8F0;
  border-radius: 0.75rem;
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.12);
  list-style: none;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.18s ease, transform 0.2s ease, visibility 0s linear 0.2s;
  z-index: 20;
  min-width: 220px;
  max-height: 360px;
  overflow-y: auto;
}
.ps-dropdown.is-open .ps-dropdown__list {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity 0.18s ease, transform 0.2s ease, visibility 0s;
}
.ps-dropdown__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  padding: 0.65rem 0.85rem;
  border-radius: 0.5rem;
  font-size: 0.9rem;
  font-weight: 500;
  color: #1A2233;
  letter-spacing: -0.005em;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.ps-dropdown__item:hover {
  background: #F4F8FF;
  color: #4574C9;
}
.ps-dropdown__item.is-active {
  background: #EEF3FB;
  color: #4574C9;
  font-weight: 700;
}
.ps-dropdown__item .check { color: #4574C9; flex-shrink: 0; }

@media (max-width: 640px) {
  .page-selector-row { height: 52px; }
  .page-selector__home { width: 52px; }
  .ps-dropdown__btn { font-size: 0.85rem; padding: 0 0.85rem; }
  .ps-dropdown__list { min-width: 200px; padding: 0.3rem; }
  .ps-dropdown__item { padding: 0.6rem 0.7rem; font-size: 0.85rem; }
}

/* 진료 원칙 카드 (확장형) */
.principle-card {
  position: relative;
  background: white;
  border: 1px solid #E2E8F0;
  border-radius: 1.25rem;
  padding: 1.75rem 1.5rem 1.5rem;
  display: flex;
  flex-direction: column;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.principle-card:hover {
  border-color: #6F9CE8;
  box-shadow: 0 18px 40px rgba(69,116,201,0.10);
  transform: translateY(-3px);
}
.principle-card--featured {
  background: linear-gradient(180deg, #F4F8FF 0%, #FFFFFF 60%);
  border-color: #6F9CE8;
  box-shadow: 0 14px 32px rgba(69,116,201,0.10);
}
.principle-card--featured::before {
  content: "Most Important";
  position: absolute;
  top: -12px;
  right: 20px;
  background: #4574C9;
  color: white;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  padding: 0.3rem 0.8rem;
  border-radius: 999px;
}
.principle-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.2rem;
}
.principle-card__num {
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.2em;
  color: #94A3B8;
}
.principle-card__icon {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: #E8F0FF;
  color: #4574C9;
  display: flex;
  align-items: center;
  justify-content: center;
}
.principle-card--featured .principle-card__icon {
  background: #4574C9;
  color: white;
}
.principle-card__title {
  font-size: 1.25rem;
  font-weight: 800;
  color: #0F172A;
  letter-spacing: -0.025em;
  margin-bottom: 0.35rem;
}
.principle-card__sub {
  font-size: 0.85rem;
  font-weight: 600;
  color: #4574C9;
  margin-bottom: 0.85rem;
}
.principle-card__desc {
  font-size: 0.88rem;
  color: #4A5568;
  line-height: 1.75;
  margin-bottom: 1.1rem;
}
.principle-card__list {
  list-style: none;
  padding: 0;
  margin: 0 0 1.4rem;
  font-size: 0.85rem;
  color: #4A5568;
  line-height: 1.7;
  border-top: 1px solid #E2E8F0;
  padding-top: 1rem;
}
.principle-card__list li {
  position: relative;
  padding-left: 1.1rem;
  margin-bottom: 0.4rem;
}
.principle-card__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55rem;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: #6F9CE8;
}
.principle-card__list strong { color: #0F172A; font-weight: 700; }
.principle-card__stat {
  margin-top: auto;
  padding-top: 1rem;
  border-top: 1px dashed #E2E8F0;
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
}
.principle-card__stat-num {
  font-size: 2rem;
  font-weight: 800;
  color: #4574C9;
  letter-spacing: -0.03em;
  line-height: 1;
}
.principle-card__stat-num small {
  font-size: 0.9rem;
  font-weight: 600;
  color: #4A5568;
  margin-left: 0.1rem;
}
.principle-card__stat-label {
  font-size: 0.78rem;
  color: #4A5568;
  font-weight: 500;
}

/* CTA 밴드 (2단 분할) */
.cta-band {
  background: linear-gradient(135deg, #1A2233 0%, #2F5BAA 100%);
  border-radius: 1.5rem;
  overflow: hidden;
  color: white;
  position: relative;
}
.cta-band::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 10% 20%, rgba(255,255,255,0.08) 0%, transparent 35%),
    radial-gradient(circle at 90% 80%, rgba(111,156,232,0.18) 0%, transparent 40%);
  pointer-events: none;
}
.cta-band__inner {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  padding: 2.5rem 1.75rem;
}
@media (min-width: 768px) {
  .cta-band__inner {
    grid-template-columns: 1.2fr 1fr;
    gap: 3rem;
    padding: 3.5rem 3rem;
    align-items: center;
  }
}
.cta-band__eyebrow {
  font-size: 0.72rem;
  letter-spacing: 0.3em;
  font-weight: 600;
  color: #DBE7FB;
  margin-bottom: 1rem;
}
.cta-band__title {
  font-size: 1.7rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: #FFFFFF;
  line-height: 1.3;
  margin-bottom: 1rem;
}
@media (min-width: 1024px) {
  .cta-band__title { font-size: 2.1rem; }
}
.cta-band__desc {
  font-size: 0.95rem;
  line-height: 1.85;
  color: rgba(255,255,255,0.88);
  margin-bottom: 1.5rem;
}
.cta-band__desc strong { color: #FFFFFF; font-weight: 700; }
.cta-band__meta {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.6rem;
  border-top: 1px solid rgba(255,255,255,0.15);
  padding-top: 1.25rem;
}
.cta-band__meta li {
  display: grid;
  grid-template-columns: 60px 1fr;
  gap: 0.85rem;
  font-size: 0.86rem;
  align-items: baseline;
}
.cta-band__meta .lbl {
  color: #DBE7FB;
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.05em;
}
.cta-band__meta .val { color: rgba(255,255,255,0.92); }

.cta-band__phone-card {
  background: rgba(255,255,255,0.96);
  color: #0F172A;
  border-radius: 1rem;
  padding: 1.75rem 1.5rem;
  text-align: center;
  box-shadow: 0 20px 50px rgba(0,0,0,0.25);
}
.cta-band__phone-label {
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  font-weight: 700;
  color: #4574C9;
  margin-bottom: 0.5rem;
}
.cta-band__phone-num {
  display: block;
  font-size: 2rem;
  font-weight: 800;
  color: #0F172A;
  letter-spacing: -0.02em;
  margin-bottom: 0.6rem;
  text-decoration: none;
  transition: color 0.2s ease;
}
@media (min-width: 768px) {
  .cta-band__phone-num { font-size: 2.4rem; }
}
.cta-band__phone-num:hover { color: #4574C9; }
.cta-band__phone-note {
  font-size: 0.78rem;
  color: #4A5568;
  margin-bottom: 1.2rem;
}
.cta-band__actions {
  display: grid;
  gap: 0.55rem;
}
.cta-band__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.85rem 1rem;
  border-radius: 0.55rem;
  font-weight: 700;
  font-size: 0.9rem;
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.cta-band__btn--primary {
  background: #2F5BAA;
  color: white;
}
.cta-band__btn--primary:hover { background: #1F4490; }
.cta-band__btn--ghost {
  background: white;
  color: #2F5BAA;
  border: 1.5px solid #2F5BAA;
}
.cta-band__btn--ghost:hover { background: #EEF3FB; }

/* 한 줄 워드마크 */
.wordmark {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
}
.wordmark__main {
  font-size: 3.5rem;
  font-weight: 900;
  color: #4574C9;
  letter-spacing: -0.05em;
  line-height: 1;
}
.wordmark__sub {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.4em;
  color: #4A5568;
}

/* ============================================
   5가지 이유 · 자동 재생 카드 캐러셀
   ============================================ */
.reason-rotator {
  position: relative;
  max-width: 880px;
  margin: 0 auto;
  isolation: isolate;
}
.reason-rotator__stage {
  display: grid;
  position: relative;
}
.reason-slide {
  grid-area: 1 / 1;
  opacity: 0;
  transform: translateY(20px) scale(0.985);
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}
.reason-slide.is-active {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
  z-index: 2;
}
.reason-slide__inner {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.25rem;
  align-items: center;
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 1.25rem;
  padding: 1.75rem 1.5rem;
  box-shadow: 0 4px 16px rgba(14, 31, 77, 0.04);
  min-height: 180px;
}
@media (min-width: 1024px) {
  .reason-slide__inner {
    gap: 2rem;
    padding: 2.5rem 2.75rem;
    min-height: 220px;
  }
}
.reason-slide__num {
  flex-shrink: 0;
  width: 3.75rem;
  height: 3.75rem;
  border-radius: 9999px;
  background: #6F9CE8;
  color: white;
  font-weight: 800;
  font-size: 1.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  letter-spacing: -0.02em;
  box-shadow: 0 6px 18px rgba(108, 153, 232, 0.32);
}
@media (min-width: 1024px) {
  .reason-slide__num {
    width: 4.5rem;
    height: 4.5rem;
    font-size: 1.4rem;
  }
}
.reason-slide.is-active .reason-slide__num {
  animation: rotatorNumPop 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes rotatorNumPop {
  0% { transform: scale(0.5) rotate(-12deg); opacity: 0.4; }
  100% { transform: scale(1) rotate(0); opacity: 1; }
}
.reason-slide__body h4 {
  font-weight: 700;
  font-size: 1.15rem;
  line-height: 1.35;
  color: #0E1F4D;
  margin: 0 0 0.6rem;
  letter-spacing: -0.01em;
}
@media (min-width: 1024px) {
  .reason-slide__body h4 {
    font-size: 1.45rem;
    margin-bottom: 0.85rem;
  }
}
.reason-slide__body p {
  font-size: 0.92rem;
  line-height: 1.65;
  color: #5B6C8A;
  margin: 0;
}
@media (min-width: 1024px) {
  .reason-slide__body p { font-size: 1rem; }
}
.reason-slide__body strong {
  color: #0E1F4D;
  font-weight: 600;
}
.reason-slide.is-active .reason-slide__body {
  animation: rotatorBodyIn 0.65s cubic-bezier(0.22, 1, 0.36, 1) 0.18s both;
}
@keyframes rotatorBodyIn {
  0% { opacity: 0; transform: translateX(16px); }
  100% { opacity: 1; transform: translateX(0); }
}
.reason-rotator__progress {
  position: relative;
  height: 3px;
  background: rgba(14, 31, 77, 0.07);
  border-radius: 999px;
  margin: 1.5rem auto 0;
  max-width: 280px;
  overflow: hidden;
}
.reason-rotator__progress-bar {
  display: block;
  width: 100%;
  height: 100%;
  background: #6F9CE8;
  border-radius: inherit;
  transform-origin: left;
  transform: scaleX(0);
}
.reason-rotator.is-running .reason-rotator__progress-bar {
  animation: rotatorProgress var(--rotator-interval, 4.5s) linear forwards;
}
@keyframes rotatorProgress {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}
.reason-rotator__nav {
  display: flex;
  justify-content: center;
  gap: 0.55rem;
  margin-top: 1.25rem;
  flex-wrap: wrap;
}
.reason-dot {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 9999px;
  border: 1.5px solid #E2E8F0;
  background: white;
  color: #5B6C8A;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  font-family: inherit;
}
.reason-dot:hover {
  border-color: #6F9CE8;
  color: #4A78C5;
  transform: translateY(-1px);
}
.reason-dot.is-active {
  background: #6F9CE8;
  color: white;
  border-color: #6F9CE8;
  transform: scale(1.08);
  box-shadow: 0 4px 12px rgba(108, 153, 232, 0.3);
}
@media (prefers-reduced-motion: reduce) {
  .reason-slide,
  .reason-slide.is-active .reason-slide__num,
  .reason-slide.is-active .reason-slide__body,
  .reason-rotator__progress-bar {
    animation: none !important;
    transition: none !important;
  }
  .reason-rotator.is-running .reason-rotator__progress-bar {
    transform: scaleX(1);
  }
}

/* ============================================
   진료 페이지 공통 컴포넌트 (.tp-*) — ONE 레퍼런스 톤
   ============================================ */
.tp { background: #fff; }
.tp__inner { max-width: 64rem; margin: 0 auto; padding: 0 1.5rem; }
@media (min-width: 1024px) { .tp__inner { padding: 0 2rem; } }

/* 섹션 헤더 — 영문 라벨 + 점 + 한글 큰 제목 + 부제 */
.tp-section-head { text-align: center; padding: 4.5rem 0 2rem; }
@media (min-width: 1024px) { .tp-section-head { padding: 6rem 0 2.5rem; } }
.tp-section-head__eyebrow { display: block; font-size: 0.82rem; color: #6F9CE8; font-weight: 600; letter-spacing: 0.02em; margin-bottom: 0.6rem; }
.tp-section-head__dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #6F9CE8; margin: 0 auto 0.9rem; }
.tp-section-head__title { font-size: 1.7rem; font-weight: 800; color: #1A2233; letter-spacing: -0.025em; line-height: 1.3; margin-bottom: 0.7rem; }
@media (min-width: 1024px) { .tp-section-head__title { font-size: 2.1rem; } }
.tp-section-head__sub { font-size: 0.95rem; color: #4A5568; line-height: 1.65; }

/* 메인 메시지 — 큰 가운데 정렬 본문 */
.tp-lead { text-align: center; padding: 1.5rem 0 3rem; max-width: 44rem; margin: 0 auto; }
.tp-lead__line { font-size: 1.3rem; font-weight: 700; color: #1A2233; line-height: 1.5; letter-spacing: -0.02em; }
@media (min-width: 1024px) { .tp-lead__line { font-size: 1.55rem; } }
.tp-lead__line strong { color: #4574C9; }
.tp-lead__sub { font-size: 0.96rem; color: #4A5568; line-height: 1.7; margin-top: 0.8rem; }

/* 정보 카드 (좌측 텍스트 + 우측 이미지 자리) */
.tp-info { padding: 1rem 0 4rem; }
.tp-info__card {
  background: #fff;
  border: 1px solid #E2E8F0;
  border-radius: 1.25rem;
  padding: 2rem 1.6rem;
  box-shadow: 0 4px 14px rgba(15,23,42,0.04);
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.4rem;
  align-items: center;
}
@media (min-width: 768px) { .tp-info__card { grid-template-columns: 1.2fr 1fr; padding: 2.4rem 2.2rem; gap: 2rem; } }
.tp-info__title { font-size: 1.2rem; font-weight: 800; color: #4574C9; letter-spacing: -0.015em; margin-bottom: 0.8rem; padding-bottom: 0.7rem; border-bottom: 1px solid #E2E8F0; }
.tp-info__title strong { color: #1A2233; }
.tp-info__desc { font-size: 0.95rem; color: #2D3748; line-height: 1.75; }
.tp-info__desc p + p { margin-top: 0.7rem; }

/* 이미지 자리 placeholder */
.tp-imgph {
  background: #F1F5FA;
  border: 1px dashed #C4D2E5;
  border-radius: 0.9rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #94A3B8;
  font-size: 0.85rem;
  font-weight: 500;
  min-height: 200px;
  text-align: center;
  padding: 1rem;
}
.tp-imgph::before { content: "🖼  이미지 영역"; opacity: 0.7; }

/* 장점/특징 카드 그리드 — 4 col with numbered chip */
.tp-features { padding: 2rem 0 4rem; background: #F7F9FC; }
.tp-features__wrap { max-width: 64rem; margin: 0 auto; padding: 0 1.5rem; }
.tp-features__grid { display: grid; grid-template-columns: 1fr; gap: 1rem; margin-top: 2rem; }
@media (min-width: 640px)  { .tp-features__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .tp-features__grid { grid-template-columns: repeat(4, 1fr); gap: 1.1rem; } .tp-features__wrap { padding: 0 2rem; } }
.tp-feature {
  background: #fff;
  border: 1px solid #E2E8F0;
  border-radius: 1rem;
  padding: 1.4rem 1rem 1.6rem;
  text-align: center;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.tp-feature:hover { transform: translateY(-4px); box-shadow: 0 12px 24px rgba(15,23,42,0.06); }
.tp-feature__num { display: inline-block; font-size: 0.72rem; font-weight: 800; color: #fff; background: #4574C9; padding: 0.28rem 0.7rem; border-radius: 999px; letter-spacing: 0.05em; margin-bottom: 0.9rem; }
.tp-feature__img { background: #F1F5FA; border-radius: 0.7rem; height: 120px; margin: 0.4rem 0 1rem; display: flex; align-items: center; justify-content: center; color: #94A3B8; font-size: 0.78rem; }
.tp-feature__img::before { content: "🖼"; opacity: 0.7; font-size: 1.4rem; }
.tp-feature__title { font-size: 1rem; font-weight: 700; color: #1A2233; letter-spacing: -0.01em; margin-bottom: 0.5rem; }
.tp-feature__desc { font-size: 0.86rem; color: #4A5568; line-height: 1.6; }

/* Before & After (이미지 자리 4개) */
.tp-ba { padding: 3rem 0 4rem; background: #F0F4FA; }
.tp-ba__title { font-size: 1.5rem; font-weight: 800; color: #1A2233; text-align: center; letter-spacing: -0.02em; margin-bottom: 2rem; }
.tp-ba__title strong { color: #4574C9; }
.tp-ba__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.8rem; max-width: 56rem; margin: 0 auto; }
@media (min-width: 768px) { .tp-ba__grid { grid-template-columns: repeat(4, 1fr); } }
.tp-ba__cell { display: flex; flex-direction: column; gap: 0.4rem; }
.tp-ba__media { background: #fff; border: 1px solid #D8E2EF; border-radius: 0.7rem; height: 130px; display: flex; align-items: center; justify-content: center; color: #94A3B8; font-size: 0.85rem; }
.tp-ba__media::before { content: "🖼"; opacity: 0.6; font-size: 1.6rem; }
.tp-ba__label { background: #2F5BAA; color: #fff; text-align: center; padding: 0.45rem; border-radius: 0.45rem; font-size: 0.82rem; font-weight: 700; letter-spacing: 0.05em; }
.tp-ba__label--after { background: #1F4490; }

/* 주의사항 / 체크 리스트 (블루 배경 또는 가벼운 박스) */
.tp-checklist { padding: 3rem 0 4rem; background: #4574C9; color: #fff; }
.tp-checklist__title { font-size: 1.4rem; font-weight: 800; text-align: center; letter-spacing: -0.02em; margin-bottom: 0.5rem; }
.tp-checklist__sub { font-size: 0.92rem; color: rgba(255,255,255,0.85); text-align: center; margin-bottom: 1.8rem; }
.tp-checklist__list { max-width: 50rem; margin: 0 auto; list-style: none; padding: 0; }
.tp-checklist__list li {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: 0.6rem;
  padding: 0.85rem 1.1rem;
  font-size: 0.95rem;
  color: #fff;
  margin-bottom: 0.55rem;
}
.tp-checklist__num {
  flex-shrink: 0;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: #fff;
  color: #4574C9;
  font-size: 0.78rem;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* 추천 대상 (이런 분들에게 추천) */
.tp-recommend { padding: 3rem 0 5rem; }
.tp-recommend__title { font-size: 1.5rem; font-weight: 800; color: #1A2233; text-align: center; letter-spacing: -0.02em; margin-bottom: 1.6rem; }
.tp-recommend__title strong { color: #4574C9; }
.tp-recommend__grid { display: grid; grid-template-columns: 1fr; gap: 0.6rem; max-width: 52rem; margin: 0 auto; }
@media (min-width: 768px) { .tp-recommend__grid { grid-template-columns: repeat(2, 1fr); gap: 0.8rem; } }
.tp-recommend__item {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  background: #F7F9FC;
  border-radius: 999px;
  padding: 0.85rem 1.3rem;
  font-size: 0.94rem;
  color: #1A2233;
  font-weight: 500;
}
.tp-recommend__num {
  flex-shrink: 0;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: #4574C9;
  color: #fff;
  font-size: 0.74rem;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  letter-spacing: 0.04em;
}