/* ============================================================
   잠실센트럴안과의원 — Home Page Stylesheet (home.css)
   Depends on: style.css (tokens, resets, common components)
   ============================================================ */

/* ------------------------------------------------------------
   0. 특정 섹션 크기 유지 (전체 zoom 제거 후 개별 적용)
   ------------------------------------------------------------ */
@media (min-width: 768px) {
  .hero,
  .quick-menu,
  .about-intro,
  .eq-showcase {
    zoom: 0.85;
  }
}

/* ------------------------------------------------------------
   1. HERO SECTION
   ------------------------------------------------------------ */
.hero {
  position: relative;
  width: 100%;
  height: 100svh;
  min-height: 560px;
  max-height: 900px;
  display: flex;
  align-items: center;         /* 콘텐츠 수직 중앙 */
  justify-content: flex-start; /* 콘텐츠 좌측 정렬 */
  overflow: hidden;
  background-color: #0c2d4a;
}

/* ── 히어로 배경 이미지 (<img> 태그, 반응형) ── */
.hero-bg-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: right center;
  z-index: 0;
  pointer-events: none;
  user-select: none;
}

/* ── 레퍼런스 스타일 좌→우 그라데이션 오버레이 ── */
.hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(to right,
      rgba(8,28,52,.96) 0%,
      rgba(8,28,52,.85) 28%,
      rgba(8,28,52,.50) 52%,
      rgba(8,28,52,.15) 70%,
      transparent 85%
    );
}

/* ── 렌즈/원 장식 요소 ── */
.hero-deco-circle {
  position: absolute;
  width: 520px;
  height: 520px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 50%;
  top: 50%;
  left: 36%;
  transform: translate(-50%, -50%);
  z-index: 1;
  pointer-events: none;
}
.hero-deco-circle::after {
  content: '';
  position: absolute;
  inset: 30px;
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 50%;
}

/* ── 텍스트 — 좌측 중앙 ── */
.hero-content {
  position: relative;
  z-index: 2;
  text-align: left;
  color: #fff;
  padding: 0 max(60px, env(safe-area-inset-left, 60px));
  max-width: 660px;
}

.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-kanit);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: rgba(255,255,255,.80);
  margin-bottom: var(--sp-4);
}

.hero-eyebrow::before,
.hero-eyebrow::after {
  content: '';
  display: block;
  width: 30px;
  height: 1px;
  background: rgba(255,255,255,.5);
}

.hero-title {
  font-size: clamp(36px, 5.8vw, 72px);
  font-weight: 700;
  line-height: 1.12;
  color: #fff;
  margin-bottom: var(--sp-6);
  text-shadow: 0 2px 16px rgba(0,0,0,.30);
  word-break: keep-all;
  letter-spacing: -0.02em;
}

.hero-title em { font-style: normal; color: #7ec8f5; }

.hero-sub-top {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.2em;
  color: rgba(255,255,255,.70);
  margin-bottom: var(--sp-3);
  text-transform: uppercase;
}

.hero-sub {
  font-size: clamp(15px, 1.8vw, 18px);
  color: rgba(255,255,255,.85);
  margin-top: var(--sp-4);
  line-height: 1.7;
  word-break: keep-all;
}

.hero-sub-2 {
  font-size: clamp(13px, 1.5vw, 15px);
  color: rgba(255,255,255,.65);
  margin-top: var(--sp-2);
}

.hero-subtitle {
  font-size: clamp(15px, 2.2vw, 20px);
  color: rgba(255,255,255,.82);
  line-height: 1.7;
  margin-bottom: var(--sp-10);
  word-break: keep-all;
}

.hero-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-4);
  flex-wrap: wrap;
}

.hero-scroll {
  position: absolute;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  color: rgba(255,255,255,.6);
  font-size: 11px;
  font-family: var(--font-kanit);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  animation: hero-bounce 2s infinite;
}

.hero-scroll-line {
  width: 1px;
  height: 40px;
  background: linear-gradient(to bottom, rgba(255,255,255,.6), rgba(255,255,255,0));
}

@keyframes hero-bounce {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%       { transform: translateX(-50%) translateY(6px); }
}

/* ------------------------------------------------------------
   2. QUICK MENU — 5개 진료 카드 (가로형, 호버 하위항목 페이드)
   ------------------------------------------------------------ */
.quick-menu {
  padding-block: var(--sp-12);
  background: var(--color-surface);
}

.quick-menu .container {
  padding-inline: clamp(32px, 5vw, 72px);
}

/* 5열 가로 배치 — 최대 350px, 화면이 좁으면 균등 축소 */
.quick-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 350px));
  gap: 20px;
  justify-content: center;
}

/* 카드 기본 — 세로형 6:4 비율 + 배경 이미지 */
.quick-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  aspect-ratio: 3/4;
  padding: 29px 16px;
  background-color: var(--color-primary);
  border: none;
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  box-shadow: 0 4px 20px rgba(20,65,104,.12);
  transition: box-shadow .35s ease, transform .35s ease;
}

/* 퀵카드 배경 이미지 (<img> 태그) */
.quick-card-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
  pointer-events: none;
  user-select: none;
  transition: transform .5s ease;
}

.quick-card:hover .quick-card-bg {
  transform: scale(1.04);
}

.quick-card:hover {
  box-shadow: 0 10px 36px rgba(20,65,104,.30);
  transform: translateY(-3px);
}

/* 상단 accent 라인 */
.quick-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: rgba(255,255,255,.60);
  z-index: 3;
  transition: background .35s;
}

.quick-card:hover::before {
  background: #fff;
}

/* 이미지 위 반투명 오버레이 — z-index 1 */
/* 기본: 아주 약한 남색 오버레이 */
.quick-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(8,28,52,.04) 0%,
    rgba(8,28,52,.14) 60%,
    rgba(8,28,52,.24) 100%
  );
  z-index: 1;
  transition: background .3s ease;
}

/* 네비 드롭다운이 열릴 때 오버레이 강화 */
body.nav-open .quick-card::after {
  background: linear-gradient(
    to bottom,
    rgba(8,28,52,.18) 0%,
    rgba(8,28,52,.42) 55%,
    rgba(8,28,52,.62) 100%
  );
}

/* 카드 직접 호버 시 어둡게 */
.quick-card:hover::after {
  background: linear-gradient(
    to bottom,
    rgba(8,28,52,.60) 0%,
    rgba(8,28,52,.80) 60%,
    rgba(8,28,52,.92) 100%
  );
}

/* 카테고리 제목 — 프로스티드 글래스 필 배지, 호버 시 페이드아웃 */
.qc-title {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  /* frosted glass pill */
  background: rgba(255,255,255,.16);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.30);
  border-radius: 100px;
  padding: 10px 24px;
  /* type */
  font-size: 22px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: #fff;
  white-space: nowrap;
  text-align: center;
  text-decoration: none;
  text-shadow: none;
  opacity: 1;
  transition: opacity .25s ease;
}

.quick-card:hover .qc-title {
  opacity: 0;
  pointer-events: none;
}

/* 하위 항목 — z-index 2 (오버레이 위), 기본 숨김, 호버 시 페이드인 */
.qc-subs {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 13px;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .3s .08s ease, transform .3s .08s ease;
  pointer-events: none;
  padding: 24px 14px;
}

/* 호버 시 상단 카테고리 레이블 */
.qc-cat-label {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: rgba(255,255,255,.55);
  text-align: center;
  margin: 0 0 4px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255,255,255,.20);
  width: 70%;
  pointer-events: none;
  user-select: none;
}

.quick-card:hover .qc-subs {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.qc-sub-link {
  font-size: 18px;
  color: rgba(255,255,255,.90);
  font-weight: 400;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  display: block;
  transition: color .15s;
  text-shadow: 0 1px 4px rgba(0,0,0,.30);
}

.qc-sub-link:hover {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ------------------------------------------------------------
   3. DISEASE CARDS
   ------------------------------------------------------------ */
.disease-section {
  padding-block: var(--sp-20);
  background: var(--color-bg);
}

.disease-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-5);
}

.disease-card {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--color-border);
  text-decoration: none;
  display: flex;
  flex-direction: column;
  transition: all var(--trans-normal);
  box-shadow: var(--shadow-sm);
}

.disease-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
  border-color: var(--color-accent);
}

.disease-img-wrap {
  position: relative;
  aspect-ratio: 4/3;
  overflow: hidden;
  background: var(--color-blue-sub);
}

.disease-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--trans-slow);
}

.disease-card:hover .disease-img { transform: scale(1.06); }

.disease-img-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--color-blue-sub), var(--color-surface-2));
}

.disease-img-placeholder svg { width: 48px; height: 48px; color: var(--color-primary); opacity: .4; }

.disease-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  background: var(--color-accent);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
}

.disease-body {
  padding: var(--sp-5);
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.disease-title { font-size: 16px; font-weight: 700; color: var(--color-text); line-height: 1.3; }
.disease-card:hover .disease-title { color: var(--color-accent); }

.disease-desc {
  font-size: 13px;
  color: var(--color-text-3);
  line-height: 1.6;
  flex: 1;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.disease-arrow {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 600;
  color: var(--color-accent);
  margin-top: var(--sp-2);
  transition: gap var(--trans-fast);
}

.disease-card:hover .disease-arrow { gap: 8px; }

.disease-arrow svg { width: 14px; height: 14px; flex-shrink: 0; }

/* ------------------------------------------------------------
   4. EQUIPMENT SLIDER
   ------------------------------------------------------------ */
.equip-section {
  padding-block: var(--sp-16);
  background: var(--color-surface);
  overflow: hidden;
}

.equip-slider-wrap {
  position: relative;
  margin-top: var(--sp-8);
}

.equip-slider {
  display: flex;
  gap: var(--sp-5);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-inline: max(20px, env(safe-area-inset-left, 20px));
  padding-bottom: var(--sp-4);
}

.equip-slider::-webkit-scrollbar { display: none; }

.equip-slide {
  flex: 0 0 280px;
  scroll-snap-align: start;
  background: var(--color-surface-2);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  overflow: hidden;
  transition: box-shadow var(--trans-normal), transform var(--trans-normal);
}

.equip-slide:hover { box-shadow: var(--shadow-md); transform: translateY(-4px); }

.equip-slide-img {
  width: 100%;
  aspect-ratio: 3/2;
  object-fit: cover;
  background: var(--color-bg);
}

.equip-slide-body { padding: var(--sp-4) var(--sp-5); }

.equip-slide-tag {
  font-size: 11px;
  font-weight: 700;
  color: var(--color-accent);
  text-transform: uppercase;
  font-family: var(--font-kanit);
  letter-spacing: 0.1em;
  margin-bottom: var(--sp-1);
}

.equip-slide-name { font-size: 15px; font-weight: 700; color: var(--color-text); margin-bottom: var(--sp-2); }

.equip-slide-desc {
  font-size: 13px;
  color: var(--color-text-3);
  line-height: 1.6;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Nav arrows */
.equip-nav { display: flex; justify-content: flex-end; gap: var(--sp-3); margin-top: var(--sp-5); }

.equip-nav-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--color-surface);
  border: 1.5px solid var(--color-border);
  color: var(--color-primary);
  cursor: pointer;
  transition: all var(--trans-fast);
}

.equip-nav-btn:hover { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }
.equip-nav-btn svg { width: 18px; height: 18px; }

/* Fade edges */
.equip-slider-wrap::before,
.equip-slider-wrap::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 40px;
  z-index: 2;
  pointer-events: none;
}

.equip-slider-wrap::before {
  left: 0;
  background: linear-gradient(to right, var(--color-surface), transparent);
}

.equip-slider-wrap::after {
  right: 0;
  background: linear-gradient(to left, var(--color-surface), transparent);
}

/* ------------------------------------------------------------
   5. NOTICE SECTION — 병원소식 / 건강소식
   ------------------------------------------------------------ */
.notice-section {
  padding-block: var(--sp-16);
  background: var(--color-surface-2);
}

.notice-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-8);
}

.notice-col {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  overflow: hidden;
}

.notice-col-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-5) var(--sp-6);
  border-bottom: 1px solid var(--color-border);
}

.notice-col-title {
  font-size: 17px;
  font-weight: 700;
  color: var(--color-primary);
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}

.notice-col-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: var(--color-blue-sub);
  border-radius: var(--radius-sm);
  color: var(--color-accent);
}

.notice-col-icon svg { width: 16px; height: 16px; }

.notice-more {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text-3);
  display: flex;
  align-items: center;
  gap: 4px;
  transition: color var(--trans-fast);
  text-decoration: none;
}

.notice-more:hover { color: var(--color-accent); }
.notice-more svg { width: 12px; height: 12px; }

.notice-list { display: flex; flex-direction: column; }

.notice-item {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: 14px var(--sp-6);
  border-bottom: 1px solid var(--color-border);
  text-decoration: none;
  transition: background var(--trans-fast);
}

.notice-item:last-child { border-bottom: none; }
.notice-item:hover { background: var(--color-blue-sub); }

.notice-item-title {
  flex: 1;
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.4;
}

.notice-item:hover .notice-item-title { color: var(--color-accent); }

.notice-item-date {
  flex-shrink: 0;
  font-size: 12px;
  color: var(--color-text-3);
  font-family: var(--font-kanit);
  font-weight: 300;
}

/* ------------------------------------------------------------
   6. HOURS SECTION — 진료시간
   ------------------------------------------------------------ */
.hours-section {
  padding-block: var(--sp-16);
  background: var(--color-surface);
}

.hours-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-10);
  align-items: start;
}

.hours-table-wrap {
  background: var(--color-surface-2);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  overflow: hidden;
}

.hours-table { width: 100%; border-collapse: collapse; }

.hours-table thead th {
  background: var(--color-primary);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  padding: 12px 16px;
  text-align: center;
}

.hours-table tbody td {
  padding: 12px 16px;
  font-size: 14px;
  color: var(--color-text-2);
  text-align: center;
  border-bottom: 1px solid var(--color-border);
}

.hours-table tbody tr:last-child td { border-bottom: none; }

.hours-table tbody td:first-child { font-weight: 600; color: var(--color-text); }

/* Highlight today's row */
.hours-today td {
  background: var(--color-blue-sub) !important;
  color: var(--color-primary) !important;
  font-weight: 700 !important;
}

.hours-today td:first-child::after {
  content: ' 오늘';
  font-size: 11px;
  color: var(--color-accent);
  font-weight: 600;
}

.hours-table .closed td { color: var(--color-text-3); }

.hours-closed-text { color: #ef4444; font-weight: 600; }

/* Today highlight card */
.hours-today-card { display: flex; flex-direction: column; gap: var(--sp-5); }

.hours-today-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 6px 16px;
  background: var(--color-accent);
  color: #fff;
  border-radius: var(--radius-pill);
  font-size: 13px;
  font-weight: 700;
  width: fit-content;
}

.hours-today-chip::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #fff;
  animation: live-pulse 1.5s infinite;
}

@keyframes live-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: .5; transform: scale(.8); }
}

.hours-big-time {
  font-family: var(--font-kanit);
  font-size: clamp(36px, 5vw, 56px);
  font-weight: 700;
  color: var(--color-primary);
  line-height: 1;
}

.hours-big-label { font-size: 14px; color: var(--color-text-3); margin-top: var(--sp-2); }

.hours-extra { display: flex; flex-direction: column; gap: var(--sp-3); }

.hours-extra-item { display: flex; align-items: center; gap: var(--sp-3); font-size: 14px; color: var(--color-text-2); }

.hours-extra-item svg { width: 16px; height: 16px; color: var(--color-accent); flex-shrink: 0; }

/* ------------------------------------------------------------
   7. LOCATION / MAP SECTION
   ------------------------------------------------------------ */
.map-section {
  padding-block: var(--sp-16);
  background: var(--color-bg);
}

.map-inner {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: var(--sp-8);
  align-items: start;
}

.map-frame-wrap {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-md);
  aspect-ratio: 16/10;
}

.map-frame { width: 100%; height: 100%; border: none; display: block; }

.map-info-card {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  padding: var(--sp-6);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
}

.map-info-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--color-primary);
  padding-bottom: var(--sp-4);
  border-bottom: 2px solid var(--color-border);
}

.map-info-list { display: flex; flex-direction: column; gap: var(--sp-4); }

.map-info-item { display: flex; gap: var(--sp-3); align-items: flex-start; }

.map-info-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: var(--color-blue-sub);
  border-radius: var(--radius-sm);
  color: var(--color-accent);
  flex-shrink: 0;
}

.map-info-icon svg { width: 18px; height: 18px; }

.map-info-label { font-size: 12px; color: var(--color-text-3); font-weight: 600; letter-spacing: 0.05em; margin-bottom: 2px; }

.map-info-value { font-size: 14px; color: var(--color-text); font-weight: 500; line-height: 1.5; }

.map-info-value a { color: var(--color-accent); font-weight: 700; font-family: var(--font-kanit); }
.map-info-value a:hover { text-decoration: underline; }

.map-transport-tags { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-2); }

.map-transport-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  font-size: 12px;
  font-weight: 600;
  background: var(--color-blue-sub);
  color: var(--color-primary);
  border: 1px solid var(--color-border);
}

.map-nav-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  padding: 14px;
  background: var(--color-primary);
  color: #fff;
  border-radius: var(--radius-md);
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  transition: background var(--trans-fast);
}

.map-nav-btn:hover { background: var(--color-navy-dark); }
.map-nav-btn svg { width: 18px; height: 18px; }

/* ── 메인 오시는길 지도 iframe ── */
.map-iframe-wrap {
  width: 100%;
  aspect-ratio: 4/3;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--color-border);
  box-shadow: 0 4px 20px rgba(20,65,104,.08);
  background: var(--color-surface-2);
  margin-bottom: 16px;
}

.map-iframe-wrap iframe {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}

/* ------------------------------------------------------------
   8. CTA BANNER
   ------------------------------------------------------------ */
.cta-banner {
  padding-block: var(--sp-20);
  background:
    linear-gradient(135deg, rgba(10,37,69,.72) 0%, rgba(10,37,69,.55) 100%),
    url('/images/cta_bg.jpg') center/100% auto no-repeat;
  position: relative;
  overflow: hidden;
  text-align: center;
}

.cta-banner::before {
  content: '';
  position: absolute;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.08);
  top: -150px;
  right: -100px;
  pointer-events: none;
}

.cta-banner::after {
  content: '';
  position: absolute;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.06);
  bottom: -120px;
  left: -80px;
  pointer-events: none;
}

.cta-content { position: relative; z-index: 1; max-width: 680px; margin-inline: auto; }

.cta-eyebrow {
  font-family: var(--font-kanit);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: rgba(255,255,255,.65);
  display: block;
  margin-bottom: var(--sp-4);
}

.cta-title {
  font-size: clamp(24px, 4vw, 44px);
  font-weight: 700;
  color: #fff;
  line-height: 1.2;
  margin-bottom: var(--sp-5);
  word-break: keep-all;
}

.cta-title span { color: #7ec8f5; }

.cta-desc {
  font-size: clamp(14px, 1.8vw, 17px);
  color: rgba(255,255,255,.75);
  line-height: 1.8;
  margin-bottom: var(--sp-10);
  word-break: keep-all;
}

.cta-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-4);
  flex-wrap: wrap;
}

.cta-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 14px 36px;
  background: #fff;
  color: var(--color-primary);
  border-radius: var(--radius-pill);
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  transition: all var(--trans-fast);
  box-shadow: var(--shadow-lg);
}

.cta-btn-primary:hover {
  background: var(--color-blue-sub);
  box-shadow: var(--shadow-xl);
  transform: translateY(-2px);
}

.cta-btn-outline {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 14px 36px;
  background: transparent;
  color: #fff;
  border: 2px solid rgba(255,255,255,.5);
  border-radius: var(--radius-pill);
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  transition: all var(--trans-fast);
}

.cta-btn-outline:hover { background: rgba(255,255,255,.15); border-color: #fff; }

.cta-tel {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  margin-top: var(--sp-8);
  font-size: clamp(24px, 3vw, 36px);
  font-family: var(--font-kanit);
  font-weight: 700;
  color: #fff;
}

.cta-tel svg { width: 28px; height: 28px; color: #7ec8f5; }
.cta-tel a { color: #fff; text-decoration: none; }
.cta-tel a:hover { color: #7ec8f5; }

/* CTA — 원형 3개 레이아웃 */
.cta-circles-wrap {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 48px;
  padding-inline: clamp(20px, 5vw, 80px);
}

.cta-circles-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: clamp(20px, 4vw, 56px);
  flex-wrap: wrap;
}

.cta-circle {
  width: clamp(180px, 22vw, 240px);
  height: clamp(180px, 22vw, 240px);
  border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,.38);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 28px;
  text-align: center;
  gap: 14px;
}

.cta-circle-line {
  width: 1px;
  height: 22px;
  background: rgba(255,255,255,.5);
  flex-shrink: 0;
}

.cta-circle-text {
  font-size: clamp(13px, 1.3vw, 16px);
  font-weight: 500;
  color: #fff;
  line-height: 1.7;
  word-break: keep-all;
  margin: 0;
}

.cta-paragraph {
  font-size: clamp(13px, 1.2vw, 16px);
  color: rgba(255,255,255,.80);
  line-height: 1.9;
  word-break: keep-all;
  text-align: center;
  margin: 0;
}

@media (max-width: 767px) {
  .cta-circles-row { gap: 16px; }
  .cta-circle {
    width: 140px;
    height: 140px;
    padding: 16px;
    gap: 10px;
  }
  .cta-circle-line { height: 16px; }
  .cta-circle-text { font-size: 11px; }
  .cta-paragraph { font-size: 12px; }
}

/* ------------------------------------------------------------
   9. ABOUT / INTRO — 병원소개 섹션 (자체 디자인)
   ------------------------------------------------------------ */
.about-intro {
  padding-block: 0;
  background: linear-gradient(to right, #EDF3F9, #F6F9FC);
  overflow: hidden;
}

/* 2열 그리드: 텍스트 | 사진 */
.about-grid {
  display: grid;
  grid-template-columns: 48fr 52fr;
  min-height: 580px;
}

/* ── 왼쪽 패널 ── */
.about-left {
  background: transparent;
  padding: clamp(48px, 6vw, 88px) clamp(32px, 5vw, 72px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0;
  position: relative;
}

/* ── 오른쪽: 메인 이미지 컬럼 ── */
.about-photo-col {
  position: relative;
  overflow: hidden;
  background: #e8f0f7;
}

/* 텍스트 패널과의 경계 — 짧고 가벼운 그라데이션 */
.about-photo-col::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    rgba(237,243,249,.75) 0%,
    transparent 14%
  );
  z-index: 1;
  pointer-events: none;
}

.ab-main-photo {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center center;
  display: block;
}

.ab-eyebrow {
  font-family: var(--font-kanit);
  font-size: 25px;
  font-weight: 600;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin: 0 0 18px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.ab-eyebrow::before {
  content: '';
  display: block;
  width: 24px;
  height: 2px;
  background: var(--color-accent);
  flex-shrink: 0;
}

.ab-heading {
  font-size: clamp(30px, 3.2vw, 48px);
  font-weight: 700;
  color: var(--color-primary);
  line-height: 1.3;
  letter-spacing: -.03em;
  word-break: keep-all;
  margin: 0 0 20px;
}
.ab-heading-accent { color: var(--color-accent); }

.ab-rule {
  width: 40px;
  height: 2px;
  background: var(--color-border);
  margin-bottom: 22px;
}

.ab-body {
  font-size: 23px;
  color: var(--color-text-2);
  line-height: 1.9;
  word-break: keep-all;
  margin: 0 0 10px;
}

/* CTA 버튼 */
.ab-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--color-primary);
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  padding: 14px 28px;
  border-radius: 50px;
  text-decoration: none;
  letter-spacing: .02em;
  margin-top: 28px;
  align-self: flex-start;
  box-shadow: 0 4px 18px rgba(10,37,69,.22);
  transition: background .25s, transform .2s, box-shadow .25s;
}
.ab-cta-btn:hover {
  background: var(--color-accent);
  transform: translateX(5px);
  box-shadow: 0 6px 22px rgba(59,143,197,.32);
}

/* 3개 뱃지 */
.ab-badges {
  display: flex;
  align-items: center;
  gap: 0;
  margin-top: 40px;
  padding-top: 32px;
  border-top: 1px solid var(--color-border);
}

.ab-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  flex: 1;
}

.ab-badge-icon {
  width: 148px;
  height: 148px;
  background: none;
  border-radius: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ab-badge-icon img {
  width: 148px;
  height: 148px;
  object-fit: contain;
}
.ab-badge-icon svg { width: 48px; height: 48px; }

.ab-badge-name {
  font-size: 20px;
  font-weight: 700;
  color: var(--color-primary);
}
.ab-badge-sub {
  font-size: 17px;
  color: var(--color-text-3);
  letter-spacing: .02em;
}

.ab-badge-divider {
  width: 1px;
  height: 56px;
  background: var(--color-border);
  flex-shrink: 0;
}

/* ── 오른쪽 패널 (네이비) ── */
.about-right {
  background: var(--color-primary);
  padding: clamp(36px, 5vw, 72px) clamp(28px, 3.8vw, 52px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0;
  position: relative;
  overflow: hidden;
}

/* 인용 */
.ab-quote-wrap {
  position: relative;
  margin-bottom: 28px;
}

.ab-quote-open,
.ab-quote-close {
  font-family: var(--font-kanit);
  font-size: 48px;
  line-height: 1;
  color: rgba(59,143,197,.5);
  margin: 0;
  user-select: none;
}
.ab-quote-close {
  text-align: right;
  margin-top: 4px;
}

.ab-quote-text {
  font-size: clamp(18px, 2.4vw, 28px);
  font-weight: 700;
  color: #fff;
  line-height: 1.65;
  letter-spacing: -.01em;
  word-break: keep-all;
  margin: 8px 0;
  /* 손글씨 느낌을 내기 위해 이탤릭체 활용 */
  font-style: italic;
}

/* 원장 정보 */
.ab-doctor-info { display: flex; flex-direction: column; gap: 6px; }

.ab-doctor-rule {
  width: 32px;
  height: 2px;
  background: var(--color-accent);
  margin-bottom: 14px;
}

.ab-doctor-name {
  font-family: var(--font-kanit);
  font-size: clamp(16px, 1.8vw, 22px);
  font-weight: 700;
  color: #fff;
  letter-spacing: .15em;
  margin: 0;
}

.ab-doctor-title {
  font-size: 12px;
  color: rgba(255,255,255,.55);
  letter-spacing: .04em;
  margin: 0 0 16px;
}

.ab-doctor-note {
  font-size: 12.5px;
  color: rgba(255,255,255,.45);
  line-height: 1.75;
  margin: 0;
  font-style: italic;
}

/* 배경 장식 텍스트 */
.ab-deco-text {
  position: absolute;
  bottom: -10px;
  right: -4px;
  font-family: var(--font-kanit);
  font-size: clamp(20px, 2.6vw, 34px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: .08em;
  color: rgba(255,255,255,.04);
  text-align: right;
  pointer-events: none;
  user-select: none;
  margin: 0;
}

/* ── 스크롤 애니메이션 ── */
.ao {
  opacity: 0;
  transform: translateY(44px);
  transition:
    opacity .9s cubic-bezier(.22,.61,.36,1),
    transform .9s cubic-bezier(.22,.61,.36,1);
}
.ao[data-ao="fade-left"]  { transform: translateX(-44px); }
.ao[data-ao="fade-right"] { transform: translateX(44px); }
.ao[data-ao="zoom-in"]    { transform: scale(.94) translateY(20px); }
.ao.is-visible {
  opacity: 1;
  transform: none;
}

/* ── 기존 클래스 — 상세 페이지(about/doctor.html 등)에서 계속 사용 ── */
.about-text-panel { display: flex; flex-direction: column; gap: 0; max-width: 760px; }
.about-eyebrow-row { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-5); }
.about-eyebrow-line { display: block; width: 28px; height: 2px; background: var(--color-accent); flex-shrink: 0; }
.about-eyebrow-text { font-family: var(--font-kanit); font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--color-accent); }
.about-doctor-heading { font-size: clamp(26px,3vw,36px); font-weight: 700; color: var(--color-primary); letter-spacing: -.03em; line-height: 1.2; margin-bottom: var(--sp-6); padding-bottom: var(--sp-6); border-bottom: 1px solid var(--color-border); word-break: keep-all; }
.about-body { font-size: 14.5px; color: var(--color-text-2); line-height: 1.95; margin-bottom: var(--sp-3); word-break: keep-all; }
.about-cv { display: flex; flex-direction: column; gap: 0; margin-top: var(--sp-6); margin-bottom: var(--sp-7); border-top: 1px solid var(--color-border); }
.about-cv-row { display: flex; align-items: baseline; gap: var(--sp-4); padding: 14px 0; border-bottom: 1px solid var(--color-border); }
.about-cv-label { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; min-width: 38px; padding: 3px 10px; border-radius: var(--radius-pill); font-size: 11px; font-weight: 700; font-family: var(--font-kanit); letter-spacing: .04em; background: var(--color-primary); color: #fff; }
.about-cv-value { font-size: 13.5px; color: var(--color-text-2); line-height: 1.65; word-break: keep-all; }
.btn-text-arrow { display: inline-flex; align-items: center; gap: var(--sp-2); font-size: 13px; font-weight: 700; font-family: var(--font-kanit); letter-spacing: .08em; text-transform: uppercase; color: var(--color-accent); text-decoration: none; transition: gap var(--trans-fast), color var(--trans-fast); }
.btn-text-arrow:hover { color: var(--color-primary); gap: var(--sp-3); }

/* 유틸 */
.section-pad { padding-block: var(--sp-16); }
.bg-light { background: var(--color-surface-2); }

/* ------------------------------------------------------------
   9-B. EQUIPMENT SHOWCASE — 의료장비소개 섹션
   ------------------------------------------------------------ */
.eq-showcase {
  padding-block: var(--sp-16);
  background: var(--color-bg);
}

.eq-showcase-inner {
  padding-inline: clamp(32px, 5vw, 72px);
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--sp-10);
}

/* ── 텍스트 패널 ── */
.eq-showcase-left {
  display: flex;
  flex-direction: column;
  gap: 0;
  max-width: 560px;
}

.eq-showcase-title {
  font-size: clamp(30px, 2.6vw, 42px);
  font-weight: 700;
  color: var(--color-primary);
  letter-spacing: -.03em;
  line-height: 1.25;
  margin-bottom: var(--sp-5);
  word-break: keep-all;
}

.eq-showcase-title span {
  color: var(--color-accent);
}

.eq-showcase-desc {
  font-size: 22.5px;
  color: var(--color-text-2);
  line-height: 1.85;
  margin-bottom: var(--sp-7);
  word-break: keep-all;
}

.eq-showcase-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: 16px;
  font-weight: 700;
  font-family: var(--font-kanit);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--color-accent);
  text-decoration: none;
  transition: gap var(--trans-fast), color var(--trans-fast);
}

.eq-showcase-btn:hover { color: var(--color-primary); gap: var(--sp-3); }

/* ── 오른쪽 카드 3개 — 너비 500px 고정 ── */
.eq-showcase-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 500px));
  gap: 20px;
  justify-content: center;
}

.eq-card {
  position: relative;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-primary);
  box-shadow: 0 4px 20px rgba(10,37,69,.12);
  transition: box-shadow var(--trans-base), transform var(--trans-base);
  aspect-ratio: 2/1.95;
}

.eq-card:hover {
  box-shadow: 0 10px 36px rgba(10,37,69,.25);
  transform: translateY(-3px);
}

/* 이미지 래퍼 — 카드 전체 높이에서 푸터 제외한 나머지 채움 */
.eq-card-img-wrap {
  position: relative;
  flex: 1;
  overflow: hidden;
  background: #fff;
}

/* 이미지 — 절대 위치로 쌓기, 기본 불투명도 0, active만 보임 */
.eq-card-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;   /* 전체 장비가 크롭 없이 보이도록 */
  object-position: center center;
  padding: 16px;         /* 장비 사방 여백 확보 */
  opacity: 0;
  transition: opacity .8s ease-in-out;
}

.eq-card-img.active {
  opacity: 1;
}

/* contain 모드에서는 오버레이 불필요 — 제거 */

/* 점 (pagination dots) */
.eq-card-dots {
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 5px;
  z-index: 2;
}

.eq-card-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(10,37,69,.20);
  transition: background var(--trans-fast), transform var(--trans-fast);
  cursor: pointer;
}

.eq-card-dot.active {
  background: var(--color-accent);
  transform: scale(1.35);
}

/* 카드 하단 푸터 — 영문 라벨 + 국문 카테고리 + 화살표 */
.eq-card-footer {
  position: relative;
  padding: 13px 15px 14px;
  background: linear-gradient(135deg, #14406C 0%, #0A2545 58%, #071C36 100%);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

/* 이미지 영역과의 경계 — 얇은 빛 선 */
.eq-card-footer::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(to right,
    rgba(126,200,245,0) 0%,
    rgba(126,200,245,.50) 26%,
    rgba(126,200,245,.50) 74%,
    rgba(126,200,245,0) 100%);
  opacity: .75;
  transition: opacity var(--trans-base);
}
.eq-card:hover .eq-card-footer::before { opacity: 1; }

.eq-card-ftxt {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.eq-card-eyebrow {
  font-family: var(--font-kanit);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .2em;
  line-height: 1;
  text-transform: uppercase;
  color: rgba(126,200,245,.82);
}

.eq-card-label {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -.01em;
  line-height: 1.15;
  color: #fff;
  white-space: nowrap;
}

.eq-card-arrow {
  flex-shrink: 0;
  width: 27px;
  height: 27px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.24);
  color: rgba(255,255,255,.72);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--trans-base), border-color var(--trans-base), color var(--trans-base), transform var(--trans-base);
}
.eq-card-arrow svg { width: 12px; height: 12px; display: block; }
.eq-card:hover .eq-card-arrow {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: #fff;
  transform: translateX(2px);
}

.eq-card-name {
  display: none; /* 장비명 숨김 — 카테고리명만 표시 */
}

/* ------------------------------------------------------------
   10. RESPONSIVE — TABLET (≤900px)
   ------------------------------------------------------------ */
@media (max-width: 900px) {
  .hero { max-height: 700px; }

  .quick-grid { grid-template-columns: repeat(3, minmax(0, 280px)); gap: 10px; justify-content: center; }

  .disease-grid { grid-template-columns: repeat(2, 1fr); }

  .notice-cols { grid-template-columns: 1fr; }

  .hours-inner { grid-template-columns: 1fr; }

  .hours-today-card { flex-direction: row; flex-wrap: wrap; gap: var(--sp-5); }

  .map-inner { grid-template-columns: 1fr; }

  .map-frame-wrap { aspect-ratio: 16/9; }

  /* about */
  .about-doctor-heading { font-size: 26px; }
  .about-grid { grid-template-columns: 1fr 1fr; }
  .about-photo-col { min-height: 320px; }

  /* Equipment Showcase — 태블릿 */
  .eq-showcase-cards { grid-template-columns: repeat(3, minmax(0, 400px)); justify-content: center; }
}

/* ------------------------------------------------------------
   11. RESPONSIVE — MOBILE (≤767px)
   ------------------------------------------------------------ */
@media (max-width: 767px) {
  /* Hero */
  .hero { height: 90svh; min-height: 480px; max-height: 680px; }

  .hero-actions { flex-direction: column; align-items: stretch; }

  .hero-actions .btn { width: 100%; justify-content: center; }

  .hero-eyebrow { font-size: 11px; }

  /* Quick menu */
  .quick-menu .container { padding-inline: 16px; }
  .quick-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }

  .qc-title { font-size: 24px; padding: 8px 16px; }

  .qc-sub-link { font-size: 20px; }

  /* Disease */
  .disease-grid { grid-template-columns: 1fr 1fr; gap: var(--sp-3); }

  .disease-card:hover { transform: none; }

  /* Equipment */
  .equip-slide { flex: 0 0 240px; }

  /* Notice */
  .notice-item-date { display: none; }

  /* Hours */
  .hours-big-time { font-size: clamp(28px, 8vw, 44px); }

  /* Map */
  .map-frame-wrap { aspect-ratio: 4/3; }

  .map-inner { gap: var(--sp-5); }

  /* CTA */
  .cta-actions { flex-direction: column; align-items: stretch; }

  .cta-btn-primary,
  .cta-btn-outline { justify-content: center; }

  .cta-tel { font-size: clamp(20px, 6vw, 30px); }

  /* About — 서브페이지 */
  .about-doctor-heading { font-size: 22px; margin-bottom: var(--sp-4); padding-bottom: var(--sp-4); }
  .about-cv-row { gap: var(--sp-3); }
  .about-cv-label { min-width: 34px; font-size: 10px; }
  /* About — 메인 섹션 모바일 */
  .about-grid { grid-template-columns: 1fr; }
  .about-photo-col { min-height: 260px; }
  .ab-badges { flex-wrap: wrap; gap: 8px; }
  .ab-badge-divider { display: none; }
  .ab-badge { flex: 1 1 0; min-width: 0; }
  .ab-cta-btn { align-self: stretch; justify-content: center; }
  .ab-deco-text { font-size: 18px; }

  /* Equipment Showcase — 모바일 */
  .eq-showcase-inner { padding-inline: 16px; flex-direction: column; align-items: stretch; gap: var(--sp-6); }
  .eq-showcase-left { max-width: none; }

  /* 좌우 등장 애니메이션은 모바일에서 화면을 벗어나므로 위아래로 전환 */
  .ao[data-ao="fade-left"],
  .ao[data-ao="fade-right"] { transform: translateY(26px); }
  .eq-showcase-cards { grid-template-columns: 1fr; gap: 12px; }
  .eq-card-footer { padding: 13px 16px 14px; gap: 10px; }
  .eq-card-label { font-size: 16.5px; }
  .eq-card { aspect-ratio: 5/4; }
  .eq-card-img { padding: 20px 20px 26px; }
}

/* ------------------------------------------------------------
   12. RESPONSIVE — SMALL MOBILE (≤400px)
   ------------------------------------------------------------ */
@media (max-width: 400px) {
  .hero { min-height: 400px; }

  .hero-deco-circle { display: none; }
  .hero-scroll { display: none; }

  .quick-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }

  .qc-title { font-size: 23px; padding: 7px 14px; }
  .qc-sub-link { font-size: 17px; gap: 6px; }

  .disease-grid { grid-template-columns: 1fr; }

  .equip-slide { flex: 0 0 200px; }

  .cta-tel svg { width: 22px; height: 22px; }

  .map-frame-wrap { aspect-ratio: 1; }

  .hours-table { font-size: 12px; }

  .hours-table thead th,
  .hours-table tbody td { padding: 8px 10px; }
}

/* ============================================================
   MAIN POPUP LAYER (js/popup.js · Admin > 팝업관리)
   ============================================================ */
html.pop-open { overflow: hidden; }
.pop-layer {
  position: fixed; inset: 0; z-index: 3000;
  height: 100%; height: 100dvh;
  padding-bottom: max(32px, env(safe-area-inset-bottom, 0px));
  background: rgba(6, 18, 36, .58);
  display: flex; align-items: center; justify-content: center;
  padding: 32px 24px; overflow-y: auto;
  animation: popFade .25s ease-out;
}
@keyframes popFade { from { opacity: 0; } to { opacity: 1; } }
.pop-row {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start;
  gap: 22px; max-width: 1380px; width: 100%;
}
.pop-card {
  width: 440px; max-width: 100%;
  background: #fff; border-radius: 14px; overflow: hidden;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .45);
  animation: popUp .35s cubic-bezier(.22, .61, .36, 1) both;
}
@keyframes popUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.pop-link { display: block; }
.pop-img { display: block; width: 100%; height: auto; max-height: 66vh; max-height: 66dvh; object-fit: contain; background: #F3F6FA; }
.pop-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 5px 14px; border-top: 1px solid #E5EAF1; background: #fff;
}
.pop-today { display: flex; align-items: center; gap: 7px; font-size: 13px; line-height: 1.2; color: #4A5B70; cursor: pointer; user-select: none; }
.pop-today input { width: 14px; height: 14px; accent-color: #144168; margin: 0; flex-shrink: 0; }
.pop-close {
  font-family: inherit; font-size: 13px; font-weight: 600; line-height: 1.2; color: #fff;
  background: #144168; border: none; border-radius: 7px; padding: 4px 14px; cursor: pointer;
}
.pop-close:hover { background: #1A5490; }

/* 949px 이하 — 카드를 겹쳐 쌓아 세로 스크롤 없이 한 화면에
   (카드 2개가 나란히 놓이려면 440×2 + 여백 = 950px 필요) */
@media (max-width: 949px) {
  .pop-layer { padding: 20px 16px; padding-bottom: max(20px, env(safe-area-inset-bottom, 0px)); align-items: center; }
  .pop-row { position: relative; display: block; width: min(440px, 100%); margin-top: 24px; }
  /* 뒤 카드가 오른쪽 위로 살짝 보이도록 겹쳐 쌓기 (animation 은 opacity 만 — transform 충돌 방지) */
  .pop-card { position: absolute; top: 0; left: 0; width: 100%; animation-name: popFade; transform: translate(calc(var(--i, 0) * 10px), calc(var(--i, 0) * -12px)); z-index: calc(50 - var(--i, 0)); transition: transform .25s; }
  .pop-card:first-child { position: relative; }
  .pop-card:not(:first-child) { pointer-events: none; filter: brightness(.92); }
  .pop-img { max-height: 62vh; max-height: 58dvh; }
}
@media (prefers-reduced-motion: reduce) { .pop-layer, .pop-card { animation: none; } }

/* ============================================================
   CARE GUIDE — 진료 분야 안내 (정적 본문 · SEO/AEO)
   ============================================================ */
.care-guide { padding-block: var(--sp-16); background: var(--color-surface); }
.care-guide .container { max-width: 1240px; margin-inline: auto; padding-inline: clamp(24px, 5vw, 72px); }
.care-guide .section-desc { max-width: none; white-space: nowrap; }
@media (max-width: 899px) { .care-guide .section-desc { white-space: normal; max-width: 560px; } }
.care-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.care-item { background: var(--color-surface-2); border: 1px solid var(--color-border); border-radius: 18px; padding: 34px 32px 30px; display: flex; flex-direction: column; gap: 14px; }
.care-item h3 { font-size: 22px; font-weight: 700; color: var(--color-primary); line-height: 1.3; letter-spacing: -.01em; padding-bottom: 14px; border-bottom: 2px solid var(--color-accent); align-self: flex-start; }
.care-item p { font-size: 16.5px; line-height: 1.85; color: var(--color-text-2); flex: 1; word-break: keep-all; }
.care-item > a, .care-item .care-body > a { font-size: 15.5px; font-weight: 600; color: var(--color-accent); text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
.care-item > a::after, .care-item .care-body > a::after { content: '→'; transition: transform .2s; }
.care-item > a:hover::after, .care-item .care-body > a:hover::after { transform: translateX(4px); }
.care-trust { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
.care-trust h3 { color: #fff; border-bottom-color: rgba(255,255,255,.5); }
.care-trust p { color: rgba(255,255,255,.85); flex: 0; }
.care-trust p a { color: #fff; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.care-refs { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.care-refs a { color: #fff; font-size: 15px; line-height: 1.55; text-decoration: none; display: inline-flex; align-items: flex-start; gap: 8px; opacity: .92; }
.care-refs a::before { content: ''; width: 6px; height: 6px; margin-top: .55em; border-radius: 50%; background: var(--color-accent); flex-shrink: 0; }
.care-refs a:hover { opacity: 1; text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 1023px) { .care-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 767px) { .care-guide { padding-block: var(--sp-12); } .care-grid { grid-template-columns: 1fr; gap: 16px; } .care-item { padding: 26px 22px; } .care-item h3 { font-size: 20px; } .care-item p { font-size: 16px; } }

/* ── 진료 분야 카드 내 핵심 수치 ── */
.care-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 0; padding-top: 18px; border-top: 1px solid var(--color-border); }
.care-stat dt { display: flex; align-items: baseline; gap: 3px; font-family: var(--font-kanit); color: var(--color-accent); line-height: 1; margin-bottom: 6px; }
.care-stat dt b { font-size: 27px; font-weight: 600; letter-spacing: -.01em; }
.care-stat .cs-unit { font-size: 14px; font-weight: 500; }
.care-stat dd { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--color-text-2); word-break: keep-all; }
.care-stat cite { display: block; margin-top: 5px; font-style: normal; font-size: 12px; line-height: 1.45; color: var(--color-text-3); }
.care-stat cite a { color: inherit; text-decoration: underline; text-underline-offset: 2px; text-decoration-color: rgba(0,0,0,.18); }
.care-stat cite a:hover { color: var(--color-accent); text-decoration-color: currentColor; }

/* ── 증상 점검표 · 검진 주기 패널 ── */
.care-extra { display: grid; grid-template-columns: 1.35fr 1fr; gap: 24px; margin-top: 24px; }
.care-panel { min-width: 0; background: var(--color-surface-2); border: 1px solid var(--color-border); border-radius: 18px; padding: 34px 32px 30px; }
.care-panel h3 { font-size: 22px; font-weight: 700; color: var(--color-primary); line-height: 1.35; margin-bottom: 10px; letter-spacing: -.01em; word-break: keep-all; }
.care-panel-lead { font-size: 16px; line-height: 1.8; color: var(--color-text-2); margin-bottom: 20px; word-break: keep-all; }
.care-src { margin-top: 16px; font-size: 13px; line-height: 1.7; color: var(--color-text-3); word-break: keep-all; }
.care-src a { color: var(--color-text-3); text-decoration: underline; text-underline-offset: 2px; }
.care-src a:hover { color: var(--color-accent); }

.care-table-scroll { min-width: 0; overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: 12px; border: 1px solid var(--color-border); background: var(--color-surface); }
.care-table { width: 100%; min-width: 440px; border-collapse: collapse; font-size: 15px; }
.care-table th { background: var(--color-primary); color: #fff; font-weight: 600; font-size: 14px; text-align: left; padding: 13px 18px; white-space: nowrap; }
.care-table td { padding: 14px 18px; border-top: 1px solid var(--color-border); color: var(--color-text-2); line-height: 1.6; word-break: keep-all; }
.care-table td:first-child { color: var(--color-text); font-weight: 500; }
.care-table tbody tr:nth-child(even) td { background: rgba(0,0,0,.015); }
.urg { display: inline-block; white-space: nowrap; font-size: 13px; font-weight: 700; padding: 4px 11px; border-radius: 999px; }
.urg.now { background: #FDE8E8; color: #C0392B; }
.urg.soon { background: #FDF3DC; color: #9A6B08; }
.urg.plan { background: #E6F1FB; color: var(--color-primary); }

.care-steps { list-style: none; margin: 0; padding: 0; counter-reset: cs; display: flex; flex-direction: column; gap: 14px; }
.care-steps li { position: relative; counter-increment: cs; padding-left: 44px; min-height: 32px; }
.care-steps li::before { content: counter(cs); position: absolute; left: 0; top: 0; width: 32px; height: 32px; border-radius: 50%; background: var(--color-primary); color: #fff; font-family: var(--font-kanit); font-size: 15px; font-weight: 600; display: flex; align-items: center; justify-content: center; }
.care-steps li b { display: block; font-size: 16.5px; font-weight: 700; color: var(--color-text); margin-bottom: 2px; }
.care-steps li span { display: block; font-size: 15px; line-height: 1.7; color: var(--color-text-2); word-break: keep-all; }

@media (max-width: 1023px) { .care-extra { grid-template-columns: 1fr; } }
@media (max-width: 767px) {
  .care-stats { gap: 12px; padding-top: 16px; }
  .care-stat dt b { font-size: 24px; }
  .care-panel { padding: 26px 22px; }
  .care-panel h3 { font-size: 20px; }
  .care-table { font-size: 14px; }
  .care-table th, .care-table td { padding: 11px 13px; }
}

/* 증상 점검표 — 좁은 화면에서는 가로 스크롤 대신 행 단위로 쌓기 */
@media (max-width: 599px) {
  .care-table { display: block; width: 100%; min-width: 0; font-size: 15px; }
  .care-table tbody { display: block; }
  .care-table-scroll { overflow-x: visible; }
  .care-table thead { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
  .care-table tbody tr { display: block; padding: 15px 16px; border-top: 1px solid var(--color-border); }
  .care-table tbody tr:first-child { border-top: none; }
  .care-table tbody tr:nth-child(even) { background: rgba(0,0,0,.015); }
  .care-table tbody tr:nth-child(even) td { background: none; }
  .care-table td { display: block; padding: 0; border: none; }
  .care-table td:first-child { font-size: 16px; font-weight: 600; color: var(--color-text); margin-bottom: 4px; }
  .care-table td:nth-child(2) { font-size: 14.5px; }
  .care-table td:nth-child(2)::before { content: '의심 질환 · '; color: var(--color-text-3); }
  .care-table td:nth-child(3) { margin-top: 9px; }
}

/* ============================================================
   v128 — 진료 분야 카드/패널 접기 구조 (PC 레이아웃 불변)
   ============================================================ */
/* 본문 래퍼 — PC 에서는 기존 카드 레이아웃을 그대로 재현한다 */
.care-body { display: flex; flex-direction: column; gap: 14px; flex: 1; min-width: 0; }
.care-pbody { display: block; min-width: 0; }

/* 토글 버튼 — PC 에서는 제목 텍스트와 동일하게 보이고 클릭되지 않는다 */
.care-tog {
  display: block; width: 100%; margin: 0; padding: 0; border: 0; background: none;
  font: inherit; color: inherit; letter-spacing: inherit; line-height: inherit;
  text-align: left; cursor: default; pointer-events: none; -webkit-appearance: none;
}
.care-chev { display: none; }

/* ============================================================
   v128 — 모바일 전용 미세 조정 (≤767px)
   ============================================================ */
@media (max-width: 767px) {
  /* 1. 히어로 인물이 타이틀에 가리지 않도록 오른쪽으로 이동 */
  .hero-bg-img { width: 126%; max-width: none; left: auto; right: -20%; object-position: right center; }

  /* 히어로 텍스트 가독성 — 이미지를 오른쪽으로 옮긴 만큼 스크림 보강 */
  .hero-overlay {
    background: linear-gradient(to right,
      rgba(8,28,52,.95) 0%,
      rgba(8,28,52,.88) 32%,
      rgba(8,28,52,.68) 56%,
      rgba(8,28,52,.38) 76%,
      rgba(8,28,52,.12) 92%,
      transparent 100%);
  }

  /* 병원소개 본문 — 글자/줄간격 축소 */
  .ab-body { font-size: 16px; line-height: 1.75; margin-bottom: 14px; }

  /* 2. 히어로 설명글 축소 */
  .hero-sub   { font-size: 12px; line-height: 1.65; }
  .hero-sub-2 { font-size: 10.5px; line-height: 1.6; }

  /* 3. 3개 뱃지 — 겹침 해소 + 한 줄 유지 */
  .ab-badges { flex-wrap: nowrap; gap: 6px; }
  .ab-badge { gap: 4px; }
  .ab-badge-icon,
  .ab-badge-icon img { width: 84px; height: 84px; }
  .ab-badge-name { font-size: 13px; white-space: nowrap; letter-spacing: -.02em; }
  .ab-badge-sub  { font-size: 11px; white-space: nowrap; letter-spacing: -.02em; }

  /* 4. 진료 안내 문구 / 카드 제목 축소 */
  .quick-menu .section-desc { font-size: 20px; }
  .qc-title { font-size: 18px; padding: 6px 15px; bottom: 14px; letter-spacing: .04em; }

  /* 5. 진료 분야 안내 제목 한 줄 처리 */
  .care-guide .section-title { font-size: min(21px, 5.8vw); white-space: nowrap; line-height: 1.3; }
  .care-guide .section-desc  { font-size: 18px; }

  /* 6·7. 진료 분야 카드 · 증상 점검표 · 검진 주기 — 기본 닫힘 */
  .care-item h3,
  .care-panel h3 {
    align-self: stretch; width: 100%; margin-bottom: 0;
    padding-bottom: 13px; border-bottom: 2px solid var(--color-accent);
  }
  .care-trust h3 { border-bottom-color: rgba(255,255,255,.45); }
  .care-tog {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    cursor: pointer; pointer-events: auto; -webkit-tap-highlight-color: transparent;
  }
  .care-chev {
    display: block; flex: 0 0 auto; width: 9px; height: 9px; margin: -4px 5px 0 0;
    border-right: 1.8px solid currentColor; border-bottom: 1.8px solid currentColor;
    opacity: .5; transform: rotate(45deg);
    transition: transform .32s cubic-bezier(.4,0,.2,1), opacity .2s, margin .32s cubic-bezier(.4,0,.2,1);
  }
  .care-tog[aria-expanded="true"] .care-chev { transform: rotate(-135deg); margin: 2px 5px 0 0; opacity: .85; }

  .care-body, .care-pbody { display: none; }
  .care-item.is-open > .care-body  { display: flex; animation: careOpen .3s ease both; }
  .care-panel.is-open > .care-pbody { display: block; animation: careOpen .3s ease both; }
  .care-item.is-open > .care-body  { padding-top: 16px; }
  .care-panel.is-open > .care-pbody { padding-top: 16px; }
  .care-item { gap: 0; }
  .care-panel { padding-bottom: 24px; }
}
@keyframes careOpen { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .care-item.is-open > .care-body,
  .care-panel.is-open > .care-pbody { animation: none; }
  .care-chev { transition: none; }
}

/* 초소형 화면 (≤400px) */
@media (max-width: 400px) {
  .qc-title { font-size: 17px; padding: 5px 13px; bottom: 12px; letter-spacing: .03em; }
  .ab-badge-icon, .ab-badge-icon img { width: 74px; height: 74px; }
  .ab-badge-name { font-size: 12px; }
  .ab-badge-sub  { font-size: 10px; }
}