/* ═════════════════════════════════════════════════════════════
   구역 제목, 여정(아이를 만나기까지), 의료진 고르기, 화면에 들어올 때 효과
   (site.css, cards.css 다음에 읽는다)
   ═════════════════════════════════════════════════════════════ */

/* ── 첫 화면: 실제 건물 사진 + 의료진 얼굴 ── */
.intro {
  grid-template-columns: minmax(0, 1fr) minmax(320px, 460px);
  align-items: center;
  padding-block: 28px 8px;
}
.intro-text { padding-block: 24px; }
.intro-visual { position: relative; align-self: stretch; min-height: 420px; }
.intro-building {
  position: absolute; inset: 0 0 0 auto; margin: 0;
  width: 100%;
  display: flex; align-items: flex-end; justify-content: flex-end;
  pointer-events: none;
}
.intro-building::before {
  /* 건물 뒤 원형 빛 — 사용 안 함 (건물 주변 음영 없이) */
  display: none;
  content: ""; position: absolute; right: 4%; bottom: 6%;
  width: 82%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 50% 45%, #fff 0%, rgb(255 255 255 / 0.65) 45%, rgb(255 255 255 / 0) 70%);
}
.intro-building img {
  position: relative;
  width: auto; height: 100%; max-height: 470px; max-width: 100%;
  object-fit: contain; object-position: right bottom;
  filter: drop-shadow(0 24px 30px rgb(98 30 66 / 0.18));
}
.intro-visual .intro-emergency {
  position: absolute; left: 0; bottom: 18px; z-index: 1;
  min-width: 0; width: min(300px, 74%);
  padding: 18px 22px;
  background: rgb(255 255 255 / 0.8);  /* 80% 흰색 — 뒤 건물이 살짝 비친다 */
  box-shadow: var(--shadow-2);
}
.intro-visual .em-phone { font-size: 30px; }

.intro-doctors {
  display: inline-flex; align-items: center; gap: 14px;
  margin-top: 28px; padding: 8px 18px 8px 8px;
  border-radius: 999px; background: var(--paper); box-shadow: var(--shadow-1);
  text-decoration: none;
}
.intro-doctors:hover { box-shadow: var(--shadow-2); }
.faces { display: flex; align-items: center; }
.faces img, .faces .more {
  width: 44px; height: 44px; border-radius: 50%;
  border: 3px solid var(--paper);
  margin-left: -12px;
  background: #efeaed;
}
.faces img:first-child { margin-left: 0; }
/* 4:5 사진에서 얼굴 부분만 동그랗게 (얼굴이 위에서 25~45% 위치) */
.faces img { object-fit: cover; object-position: 50% 22%; }
.faces .more {
  display: grid; place-items: center;
  background: var(--magenta); color: #fff;
  font-size: 13px; font-weight: 800;
}
.faces-text { font-size: 15px; color: var(--muted); }
.faces-text strong { color: var(--ink); font-weight: 800; }

@media (max-width: 899px) {
  .intro { grid-template-columns: 1fr; padding-block: 24px 8px; }
  .intro-text { padding-block: 8px 0; }
  .intro-visual { min-height: 0; display: grid; grid-template-columns: 1fr 150px; align-items: end; gap: 12px; margin-bottom: 20px; }
  .intro-building { position: relative; inset: auto; order: 2; }
  .intro-building img { max-height: 200px; }
  .intro-visual .intro-emergency { position: relative; bottom: auto; width: auto; order: 1; }
}
@media (max-width: 419px) {
  .intro-visual { grid-template-columns: 1fr 110px; }
  .intro-visual .em-phone { font-size: 24px; }
  .faces img, .faces .more { width: 38px; height: 38px; }
  .faces-text { font-size: 14px; }
}

/* 처음 열 때 한 번: 건물이 아래에서 올라오고 카드가 이어서 나타난다 */
@media (prefers-reduced-motion: no-preference) {
  .js .intro-building img { animation: rise .9s cubic-bezier(.2, .7, .2, 1) both; }
  .js .intro-building::before { animation: fade 1.2s ease both; }
  .js .intro-visual .intro-emergency { animation: rise .7s cubic-bezier(.2, .7, .2, 1) .35s both; }
  @keyframes rise { from { opacity: 0; translate: 0 28px; } to { opacity: 1; translate: 0 0; } }
  @keyframes fade { from { opacity: 0; } to { opacity: 1; } }
}

/* 머리말이 좁은 노트북 화면에서 넘치지 않도록 */
@media (max-width: 1399px) and (min-width: 1100px) {
  .brand img { width: 176px; height: auto; }
  .gnb-item > a { padding-inline: 6px; font-size: 14.5px; }
  .call-label { display: none; }
  .call-num { font-size: 17px; }
}

/* ── 구역 제목: 제목과 설명을 한 덩어리로 ── */
.sec-head { max-width: 40em; }
.sec-head h2 {
  font-size: clamp(28px, 3.2vw, 40px);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.2;
}
.sec-head p {
  margin: 12px 0 0;
  font-size: 17px;
  color: var(--muted);
  line-height: 1.65;
}
.sec-head.is-center { margin-inline: auto; text-align: center; }
/* 제목 아래 짧은 자홍 선: 화면에 들어오면 가운데서 양옆으로 그려진다 */
.sec-head h2::after {
  content: "";
  display: block;
  width: 44px; height: 4px; border-radius: 999px;
  margin-top: 16px;
  background: var(--magenta);
  transform-origin: left center;
}
.sec-head.is-center h2::after { margin-inline: auto; transform-origin: center; }
@media (max-width: 599px) {
  .sec-head p br { display: none; }
}

/* ── 여정: 층 표시를 점선으로 잇는다 ── */
.journey { padding-block: 80px 72px; }
.journey .sec-head { margin-bottom: 48px; }

.journey-steps {
  position: relative;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 20px;
}
/* 층 표시를 잇는 점선 */
.journey-steps::before {
  content: "";
  position: absolute; left: 10%; right: 10%; top: 22px;
  border-top: 2px dashed color-mix(in srgb, var(--magenta) 45%, transparent);
  transform-origin: left center;
}
/* 층 표시 줄은 내용 높이로 고정하고, 카드가 남은 높이를 채운다 (글이 길어도 카드 윗선·아랫선이 맞도록) */
.journey-steps li { position: relative; display: grid; grid-template-rows: auto 1fr; justify-items: center; gap: 18px; }
.journey-steps .step-floor {
  position: relative; z-index: 1;
  display: grid; place-items: center;
  min-width: 64px; height: 46px; padding: 0 14px; margin: 0;
  white-space: nowrap; /* "2,3/10,11F" 처럼 긴 층 표시도 한 줄로 */
  border-radius: 999px;
  background: var(--magenta); color: #fff;
  font-size: 16px; font-weight: 800;
  box-shadow: 0 0 0 6px var(--blush), var(--shadow-1);
}
.step-card {
  display: block; width: 100%; height: 100%;
  background: var(--paper);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-1);
  overflow: hidden;
  padding-bottom: 20px;
  text-decoration: none;
  text-align: left;
}
.step-photo { display: block; overflow: hidden; aspect-ratio: 4 / 3; }
.step-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.step-card h3 { font-size: 19px; font-weight: 800; margin-top: 16px; padding-inline: 18px; }
.step-card p { margin: 6px 0 0; padding-inline: 18px; font-size: 15px; color: var(--muted); line-height: 1.6; }
.step-card:hover { box-shadow: var(--shadow-2); }
.step-card:hover h3 { color: var(--magenta-deep); }

/* 이전 카드형 규칙(cards.css)과 겹치지 않도록 정리 */
.journey-steps a.step-card { padding-bottom: 20px; }
.journey-steps img { aspect-ratio: auto; }

@media (max-width: 999px) {
  .journey-steps { grid-template-columns: 1fr; gap: 14px; max-width: 640px; margin-inline: auto; }
  /* 세로 점선 */
  .journey-steps::before { left: 32px; right: auto; top: 20px; bottom: 20px; border-top: 0; border-left: 2px dashed color-mix(in srgb, var(--magenta) 45%, transparent); transform-origin: center top; }
  .journey-steps li { grid-template-columns: 64px 1fr; grid-template-rows: auto; justify-items: start; align-items: center; gap: 14px; }
  .journey-steps .step-floor { min-width: 64px; height: 40px; font-size: 14px; padding: 0 8px; }
  .step-card { display: grid; grid-template-columns: 112px 1fr; column-gap: 14px; align-items: center; padding: 10px; }
  .step-photo { grid-row: 1 / 3; border-radius: var(--r-md); aspect-ratio: 1; }
  .step-card h3 { margin-top: 0; padding-inline: 0; font-size: 17px; align-self: end; }
  .step-card p { padding-inline: 0; font-size: 14px; align-self: start; }
}

/* ── 의료진: 제목 + 진료과 고르기 ── */
.doctors-top {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: 24px 40px; margin-bottom: 36px;
}
.dept-filter { display: flex; flex-wrap: wrap; gap: 8px; }
.dept-filter button {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 16px;
  border: 0; border-radius: 999px;
  background: var(--paper); color: var(--ink);
  box-shadow: var(--shadow-1);
  font: inherit; font-size: 15px; font-weight: 700;
  cursor: pointer;
}
.dept-filter button span {
  min-width: 22px; padding: 0 6px; border-radius: 999px;
  background: var(--tint); color: var(--magenta-deep);
  font-size: 12px; font-weight: 800; line-height: 20px;
  font-variant-numeric: tabular-nums;
}
.dept-filter button:hover { color: var(--magenta-deep); }
.dept-filter button[aria-pressed="true"] { background: var(--magenta); color: #fff; }
.dept-filter button[aria-pressed="true"] span { background: rgb(255 255 255 / 0.22); color: #fff; }

.doctor-grid li[hidden] { display: none; }

/* ── 의료진 카드: 큰 세로 사진 + 절제된 글자 ── */
.doctor-grid {
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 40px 22px;
}
.doctor-grid a {
  background: none;
  box-shadow: none;
  border-radius: 0;
  overflow: visible;
  padding: 0;
}
.doctor-grid a:hover { box-shadow: none; }
.doc-photo {
  aspect-ratio: 4 / 5;
  border-radius: var(--r-xl);
  background: #efeaed;
  box-shadow: var(--shadow-1);
  overflow: hidden;
}
.doc-photo img { mix-blend-mode: normal; object-position: center 20%; transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
/* 새 사진이 없는 분은 기존 작은 사진을 가운데 아래쪽에 맞춘다 */
.doc-photo.is-legacy { display: grid; place-items: end center; background: #f3f0f2; }
.doc-photo.is-legacy img { width: 88%; height: auto; object-fit: contain; mix-blend-mode: multiply; }
.doctor-grid a:hover .doc-photo { box-shadow: var(--shadow-2); }
.doctor-grid a:hover .doc-photo img { transform: scale(1.04); }

.doc-dept, .doc-name, .doc-focus { padding-inline: 2px; }
.doc-dept { margin-top: 18px; font-size: 13px; font-weight: 700; color: var(--magenta-deep); letter-spacing: 0.02em; }
.doc-name { margin-top: 2px; font-size: 21px; font-weight: 800; letter-spacing: -0.02em; }
.doc-name small { font-size: 14px; font-weight: 600; color: var(--muted); margin-left: 2px; letter-spacing: 0; }
.doc-focus { font-size: 14px; color: var(--muted); line-height: 1.55; }
.doc-focus:first-of-type { margin-top: 6px; }
.doctor-grid a:hover .doc-name { color: var(--magenta-deep); }

@media (max-width: 599px) {
  .doctor-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 12px; }
  .doc-photo { border-radius: var(--r-lg); }
  .doc-name { font-size: 18px; }
  .doc-focus { font-size: 13px; }
}

/* ── 하위 페이지의 의료진 소개(기존 본문) ── */
.legacy .mtab, .legacy .mtab_0 {
  display: inline-block; margin: 0 6px 8px 0; padding: 8px 18px;
  border-radius: 999px; background: var(--paper); box-shadow: var(--shadow-1);
  font-size: 15px; font-weight: 700; text-decoration: none; color: var(--ink);
}
.legacy .mtab_0 { background: var(--magenta); color: #fff; }
.legacy .doc, .legacy .doc_right {
  display: grid; grid-template-columns: 240px minmax(0, 1fr); column-gap: 36px; align-items: start;
  float: none !important; width: auto !important;
  padding: 32px 0; border-bottom: 1px solid var(--line);
}
.legacy .doc > br, .legacy .doc_right > br { display: none; }
.legacy .doc > img, .legacy .doc_right > img {
  grid-row: 1 / span 3; width: 100%; height: auto;
  aspect-ratio: 4 / 5; object-fit: cover; object-position: center 20%;
  border-radius: var(--r-xl); box-shadow: var(--shadow-1); background: #efeaed;
}
.legacy .doc_name { display: block; font-size: 24px; font-weight: 800; letter-spacing: -0.02em; margin-bottom: 10px; }
.legacy .doc_p { margin: 0; font-size: 15px; color: var(--muted); line-height: 1.85; }
.legacy .doc_p .em, .legacy .doc_p .color { color: var(--magenta-deep); }
@media (max-width: 699px) {
  .legacy .doc, .legacy .doc_right { grid-template-columns: 1fr; }
  .legacy .doc > img, .legacy .doc_right > img { grid-row: auto; max-width: 280px; margin-bottom: 18px; }
}

/* ── 화면에 들어올 때 효과 (스크립트가 켜진 경우에만) ── */
@media (prefers-reduced-motion: no-preference) {
  .js [data-reveal] .rv,
  .js [data-reveal] .journey-steps .step-card,
  .js [data-reveal] .journey-steps .step-floor,
  .js [data-reveal] .doctor-grid li,
  .js [data-reveal].home-lower > section,
  .js [data-reveal] .shortcuts-list > li {
    opacity: 0;
    translate: 0 22px;
    transition: opacity .6s ease, translate .6s cubic-bezier(.2, .7, .2, 1);
  }
  .js [data-reveal] .journey-steps .step-floor { translate: 0 0; scale: .6; transition: opacity .4s ease, scale .5s cubic-bezier(.3, 1.6, .5, 1); }
  .js [data-reveal] .sec-head h2::after { scale: 0 1; transition: scale .7s cubic-bezier(.2, .7, .2, 1) .25s; }
  .js [data-reveal] .journey-steps::before { scale: 0 1; transition: scale 1.1s cubic-bezier(.4, 0, .2, 1) .2s; }

  /* 들어온 뒤 */
  .js [data-reveal].is-in .rv,
  .js [data-reveal].is-in .journey-steps .step-card,
  .js [data-reveal].is-in .doctor-grid li,
  .js [data-reveal].is-in.home-lower > section,
  .js [data-reveal].is-in .shortcuts-list > li { opacity: 1; translate: 0 0; }
  .js [data-reveal].is-in .journey-steps .step-floor { opacity: 1; scale: 1; }
  .js [data-reveal].is-in .sec-head h2::after { scale: 1 1; }
  .js [data-reveal].is-in .journey-steps::before { scale: 1 1; }

  /* 순서대로: 점선이 그려지는 동안 층 표시와 카드가 차례로 */
  .js [data-reveal] .journey-steps .step-floor { transition-delay: calc(.35s + var(--i, 0) * .18s); }
  .js [data-reveal] .journey-steps .step-card { transition-delay: calc(.45s + var(--i, 0) * .18s); }
  .js [data-reveal] .doctor-grid li { transition-delay: calc(min(var(--i, 0), 8) * .05s); }
  .js [data-reveal] .dept-filter { transition-delay: .1s; }
  .js [data-reveal].home-lower > section:nth-child(2) { transition-delay: .12s; }
  .js [data-reveal] .shortcuts-list > li:nth-child(2) { transition-delay: .06s; }
  .js [data-reveal] .shortcuts-list > li:nth-child(3) { transition-delay: .12s; }
  .js [data-reveal] .shortcuts-list > li:nth-child(4) { transition-delay: .18s; }
  .js [data-reveal] .shortcuts-list > li:nth-child(5) { transition-delay: .24s; }
  .js [data-reveal] .shortcuts-list > li:nth-child(6) { transition-delay: .30s; }

  /* 진료과를 바꿀 때: 새로 보이는 카드가 살짝 떠오른다 */
  .doctor-grid li.is-swap { animation: doc-in .35s ease both; animation-delay: calc(min(var(--n, 0), 8) * .04s); }
  @keyframes doc-in { from { opacity: 0; translate: 0 10px; } to { opacity: 1; translate: 0 0; } }

  .step-photo img { transition: transform .5s ease; }
  .step-card:hover .step-photo img { transform: scale(1.05); }
}

/* ═════ 구역 제목 다듬기: 핵심 정보 표시 + 큰 제목 ═════ */
.sec-head h2::after { display: none; }
.sec-head h2 { font-size: clamp(30px, 3.6vw, 46px); letter-spacing: -0.04em; margin-top: 14px; }
.sec-head p { font-size: 17px; margin-top: 14px; }
.sec-tag {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 16px 7px 8px;
  border-radius: 999px;
  background: var(--paper);
  box-shadow: var(--shadow-1);
  font-size: 14px; font-weight: 800; color: var(--magenta-deep);
}
.sec-tag svg {
  width: 28px; height: 28px; padding: 5px; border-radius: 50%;
  background: var(--magenta); stroke: #fff; fill: none;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.journey .sec-tag, .updates .sec-tag { background: var(--paper); }
.doctors .sec-tag, .shortcuts .sec-tag { background: var(--blush); box-shadow: none; }
.shortcuts .sec-tag { background: var(--paper); box-shadow: var(--shadow-1); }
.shortcuts .sec-head { margin-bottom: 36px; }

/* ═════ 소식과 강좌 ═════ */
.updates { padding-block: 80px 72px; background: var(--paper); }
.updates .sec-head { margin-bottom: 40px; }
.updates-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; align-items: stretch; }
.panel {
  display: flex; flex-direction: column;
  background: var(--paper);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-1);
  padding: 24px 26px 22px;
}
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.panel-head h3 { display: flex; align-items: center; gap: 10px; font-size: 19px; font-weight: 800; }
.panel-icon { display: grid; place-items: center; width: 36px; height: 36px; border-radius: var(--r-md); background: var(--tint); }
.panel-icon svg { width: 20px; height: 20px; fill: none; stroke: var(--magenta-deep); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.panel-head a {
  flex: none; padding: 6px 14px; border-radius: 999px; background: var(--blush);
  font-size: 13px; font-weight: 700; color: var(--ink); text-decoration: none;
}
.panel-head a:hover { background: var(--tint); color: var(--magenta-deep); }

.updates .post-list { background: none; box-shadow: none; border-radius: 0; padding: 0; flex: 1; }
.updates .post-list li { padding: 15px 2px; align-items: center; }
.updates .post-list li::before {
  content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--line-strong); margin-right: 2px;
}
.updates .post-list a { flex: 1; }
.updates .post-list li:hover::before { background: var(--magenta); }
.updates .post-list time { font-size: 13px; padding: 2px 10px; border-radius: 999px; background: var(--blush); }

.class-rows { list-style: none; margin: 0; padding: 0; flex: 1; }
.class-rows li {
  display: grid; grid-template-columns: 74px 1fr auto; align-items: center; gap: 14px;
  padding: 11px 2px; border-bottom: 1px solid var(--line);
}
.class-rows li:last-child { border-bottom: 0; }
.class-rows time {
  display: flex; align-items: baseline; justify-content: center; gap: 4px;
  padding: 6px 0; border-radius: var(--r-md); background: var(--tint);
  font-variant-numeric: tabular-nums;
}
.class-rows .d { font-size: 16px; font-weight: 800; color: var(--magenta-deep); }
.class-rows .w { font-size: 12px; color: var(--muted); font-weight: 600; }
.c-name { font-size: 15px; font-weight: 700; }
.c-time { font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.panel-foot { margin: 14px 0 0; padding-top: 14px; border-top: 1px solid var(--line); font-size: 13px; color: var(--muted); }
.panel-foot a { font-weight: 700; color: var(--ink); }

@media (max-width: 799px) {
  .updates { padding-block: 56px; }
  .updates-grid { grid-template-columns: 1fr; }
  .panel { padding: 20px 18px; }
}

/* ═════ 의료진 카드: 글자 시작 높이 맞추기 ═════ */
.doctor-grid a { align-content: start; }

/* ═════ 하위 페이지 왼쪽 메뉴 ═════ */
.subnav {
  padding: 0;
  overflow: hidden;
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-2);
  background: var(--paper);
}
.subnav-head {
  position: relative;
  padding: 26px 24px 22px;
  background:
    radial-gradient(circle at 92% 8%, rgb(255 255 255 / 0.22) 0 46px, transparent 47px),
    radial-gradient(circle at 78% 120%, rgb(255 255 255 / 0.14) 0 70px, transparent 71px),
    radial-gradient(circle at 6% 0%, rgb(255 210 236 / 0.35) 0 60px, transparent 61px),
    linear-gradient(135deg, #d3348c 0%, var(--magenta) 45%, #7d0f4d 100%);
  color: #fff;
  overflow: hidden;
}
.subnav-kicker { display: block; font-size: 12px; font-weight: 700; opacity: .8; }
.subnav .subnav-title {
  margin: 4px 0 0; padding: 0; border: 0;
  font-size: 24px; font-weight: 800; letter-spacing: -0.03em; color: #fff;
}
.subnav-count {
  display: inline-block; margin-top: 10px; padding: 3px 10px;
  border-radius: 999px; background: rgb(255 255 255 / 0.2);
  font-size: 12px; font-weight: 700;
}

.subnav > ul { padding: 12px 10px 6px; }
.subnav > ul > li { border-bottom: 0; }
.subnav > ul > li + li { margin-top: 2px; }
.subnav > ul > li > a {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 12px 14px;
  border-radius: var(--r-md);
  font-size: 16px; font-weight: 700;
}
.subnav .chev { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; opacity: .3; }
.subnav > ul > li > a:hover { background: var(--tint); color: var(--magenta-deep); }
.subnav > ul > li > a:hover .chev { opacity: .8; }

/* 지금 보는 메뉴 */
.subnav > ul > li.is-on > a,
.subnav > ul > li > a[aria-current="page"] {
  background: linear-gradient(135deg, #c4237d, var(--magenta-deep));
  color: #fff;
  padding-left: 14px;
  box-shadow: 0 10px 20px -10px rgb(142 18 87 / 0.7);
}
.subnav > ul > li.is-on > a .chev,
.subnav > ul > li > a[aria-current="page"] .chev { opacity: 1; transform: rotate(90deg); }
.subnav > ul > li.is-on > a:not([aria-current]) .chev { transform: rotate(90deg); }

/* 하위 메뉴 */
.subnav li ul {
  margin: 6px 4px 8px; padding: 8px 8px;
  border: 0; border-radius: var(--r-md);
  background: var(--blush);
}
.subnav li ul a {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 10px; border-radius: var(--r-sm);
  font-size: 14.5px; font-weight: 600; color: var(--muted);
}
.subnav li ul a::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%; flex: none;
  background: var(--line-strong);
}
.subnav li ul a:hover { background: var(--paper); color: var(--magenta-deep); }
.subnav li ul a[aria-current="page"] { background: var(--paper); color: var(--magenta-deep); font-weight: 800; box-shadow: var(--shadow-1); }
.subnav li ul a[aria-current="page"]::before { background: var(--magenta); box-shadow: 0 0 0 3px color-mix(in srgb, var(--magenta) 22%, transparent); }

/* 아래 전화 문의 */
.subnav-call {
  display: grid; gap: 2px;
  margin: 8px 10px 12px; padding: 14px 16px;
  border-radius: var(--r-md);
  background: var(--tint);
  text-decoration: none;
}
.subnav-call span { font-size: 12px; font-weight: 700; color: var(--magenta-deep); }
.subnav-call strong { font-size: 20px; font-weight: 800; letter-spacing: -0.01em; color: var(--magenta-deep); font-variant-numeric: tabular-nums; }
.subnav-call:hover { background: var(--magenta); }
.subnav-call:hover span, .subnav-call:hover strong { color: #fff; }

@media (prefers-reduced-motion: no-preference) {
  .subnav > ul > li > a, .subnav li ul a { transition: background-color .2s ease, color .2s ease, translate .2s ease; }
  .subnav > ul > li:not(.is-on) > a:hover, .subnav li ul a:hover { translate: 4px 0; }
  .subnav .chev { transition: transform .25s ease, opacity .2s ease; }
}

/* 좁은 화면: 가로로 넘기는 알약 메뉴 */
@media (max-width: 899px) {
  .subnav { border-radius: 0; box-shadow: none; background: var(--paper); overflow: visible; padding: 0 var(--gutter); }
  .subnav .subnav-head, .subnav .subnav-call { display: none; }
  .subnav > ul { padding: 10px 0; gap: 6px; }
  .subnav > ul > li > a { padding: 8px 14px; border-radius: 999px; font-size: 14.5px; background: var(--blush); }
  .subnav .chev { display: none; }
  .subnav > ul > li.is-on > a, .subnav > ul > li > a[aria-current="page"] { box-shadow: none; }
}

/* ═════ 바로 찾는 진료 안내: 아이콘 카드 ═════ */
.shortcuts { padding-block: 80px 80px; }
.shortcuts-list { gap: 16px; }
.shortcuts-list a {
  grid-template-columns: 52px 1fr; grid-template-rows: auto auto;
  column-gap: 16px; align-items: center;
  padding: 22px 24px;
}
.sc-icon {
  grid-row: 1 / 3;
  display: grid; place-items: center;
  width: 52px; height: 52px; border-radius: var(--r-lg);
  background: var(--tint);
}
.sc-icon svg { width: 26px; height: 26px; fill: none; stroke: var(--magenta-deep); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.shortcuts-list strong { align-self: end; }
.shortcuts-list span:not(.sc-icon) { align-self: start; }
.shortcuts-list a:hover .sc-icon { background: var(--magenta); }
.shortcuts-list a:hover .sc-icon svg { stroke: #fff; }
@media (prefers-reduced-motion: no-preference) {
  .sc-icon, .sc-icon svg { transition: background-color .2s ease, stroke .2s ease; }
}

/* ── 첫 화면 모바일: 건물을 크게, 24시간 카드는 어둡게 겹친다 ── */
@media (max-width: 899px) {
  .intro { display: grid; grid-template-columns: minmax(0, 1fr); padding-block: 20px 4px; }
  .intro-text { display: contents; }
  .intro h1 { order: 1; font-size: clamp(32px, 8.6vw, 44px); line-height: 1.18; letter-spacing: -0.045em; }
  .intro-lead { order: 2; margin-top: 12px; font-size: 15.5px; }
  .intro-visual { order: 3; display: block; position: relative; min-height: 0; margin: 18px 0 0; }
  .intro-doctors { order: 4; justify-self: start; margin: 18px 0 22px; }

  /* 건물: 가운데 크게, 뒤에 자홍빛 원 */
  .intro-building { position: relative; inset: auto; display: flex; justify-content: center; height: 330px; }
  .intro-building::before {
    right: auto; left: 50%; bottom: 8%; translate: -50% 0; width: min(330px, 86%);
    background: radial-gradient(circle at 50% 45%, #f9dcea 0%, #fbe9f2 42%, rgb(251 233 242 / 0) 70%);
  }
  .intro-building::after {
    content: ""; position: absolute; left: 50%; bottom: 14%; translate: -50% 0;
    width: min(270px, 70%); aspect-ratio: 1; border-radius: 50%;
    border: 1.5px dashed rgb(181 23 111 / .28);
  }
  .intro-building img { height: 100%; max-height: none; width: auto; object-position: center bottom; }

  /* 24시간 카드: 건물 아래쪽에 겹치는 어두운 카드 */
  .intro-visual .intro-emergency {
    position: relative; z-index: 2; margin: -64px 0 0; width: auto; padding: 20px 22px;
    border-radius: 22px; background: #33292f; color: #fff; box-shadow: 0 18px 36px rgb(51 41 47 / .28);
  }
  .intro-visual .em-title { color: #ff9fcf; }
  .intro-visual .em-phone { color: #fff; font-size: 34px; }
  .intro-visual .em-sub { color: rgb(255 255 255 / .72); }
  .intro-visual .em-links a { color: #fff; }

}
@media (max-width: 419px) {
  .intro-visual { grid-template-columns: none; }
  .intro-building { height: 290px; }
  .intro-visual .em-phone { font-size: 30px; }
}
@media (max-width: 419px) {
  .intro-doctors { gap: 10px; padding-right: 16px; }
  .intro-doctors .faces img, .intro-doctors .faces .more { margin-left: -16px; }
  .intro-doctors .faces img:first-child { margin-left: 0; }
  .faces img, .faces .more { width: 36px; height: 36px; }
  .faces-text { white-space: nowrap; }
}

/* ── 첫 화면 모바일 (다시): 건물 사진이 오른쪽에 들어간 배너 한 장 + 전화 버튼 ── */
@media (max-width: 899px) {
  .intro-visual {
    display: block; position: relative; overflow: hidden; isolation: isolate;
    margin: 20px 0 0; min-height: 236px; border-radius: 26px;
    background: linear-gradient(120deg, #ffffff 0%, #fdf2f8 52%, #f7dbea 100%);
    box-shadow: var(--shadow-1);
  }
  .intro-building { position: absolute; inset: auto -22px -8px auto; z-index: -1; height: 116%; width: auto; display: block; }
  .intro-building::before, .intro-building::after { display: none; }
  .intro-building img {
    height: 100%; width: auto; max-height: none; filter: none;
    -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 34%);
            mask-image: linear-gradient(to right, transparent 0%, #000 34%);
  }
  .intro-visual .intro-emergency {
    position: relative; margin: 0; width: 66%; padding: 22px 0 20px 22px;
    border-radius: 0; background: none; box-shadow: none; color: var(--ink);
  }
  .intro-visual .em-title { display: flex; align-items: center; gap: 8px; color: var(--magenta-deep); font-size: 14px; font-weight: 800; }
  .intro-visual .em-title::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--magenta); box-shadow: 0 0 0 4px rgb(181 23 111 / .15); }
  .intro-visual .em-phone {
    display: inline-flex; align-items: center; gap: 8px; margin: 12px 0 8px; padding: 11px 18px 11px 14px;
    border-radius: 999px; background: var(--magenta); color: #fff; font-size: 21px; letter-spacing: -0.01em;
    box-shadow: 0 10px 22px rgb(181 23 111 / .28); text-decoration: none; white-space: nowrap;
  }
  .intro-visual .em-phone::before {
    content: ""; width: 18px; height: 18px; flex: none; background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 10.8a15.1 15.1 0 0 0 6.6 6.6l2.2-2.2a1 1 0 0 1 1-.25 11.4 11.4 0 0 0 3.6.57 1 1 0 0 1 1 1V20a1 1 0 0 1-1 1A17 17 0 0 1 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1c0 1.25.2 2.45.57 3.57a1 1 0 0 1-.25 1z'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 10.8a15.1 15.1 0 0 0 6.6 6.6l2.2-2.2a1 1 0 0 1 1-.25 11.4 11.4 0 0 0 3.6.57 1 1 0 0 1 1 1V20a1 1 0 0 1-1 1A17 17 0 0 1 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1c0 1.25.2 2.45.57 3.57a1 1 0 0 1-.25 1z'/%3E%3C/svg%3E") center / contain no-repeat;
  }
  .intro-visual .em-sub { max-width: 11.5em; color: var(--muted); font-size: 13.5px; line-height: 1.55; }
  .intro-visual .em-links { margin-top: 12px; }
  .intro-visual .em-links a { color: var(--ink); }
}
@media (max-width: 419px) {
  .intro-visual { min-height: 224px; }
  .intro-visual .intro-emergency { width: 70%; padding-left: 18px; }
  .intro-visual .em-phone { font-size: 19px; padding: 10px 15px 10px 12px; }
}
@media (prefers-reduced-motion: no-preference) {
  .intro-visual .em-title::before { animation: em-pulse 2.4s ease-in-out infinite; }
  @keyframes em-pulse { 50% { box-shadow: 0 0 0 7px rgb(181 23 111 / 0); } }
}

/* ── 첫 화면 모바일: 건물 윗부분만 배너 위로 살짝 빠져나오게 ── */
@media (max-width: 899px) {
  .intro-visual { overflow: visible; margin-top: 64px; }
  .intro-building {
    inset: auto 4px 0 auto; height: calc(100% + 40px);
    /* 건물 오른쪽에 여백을 두고, 아래는 배너 모서리(26px)에 맞춰 자른다. 위쪽만 밖으로 둔다 */
    clip-path: inset(-100px -100px 0 -100px round 0 0 22px 0);
  }
  /* 건물 뒤 옅은 분홍빛 그림자 */
  .intro-building img { -webkit-mask-image: none; mask-image: none; filter: drop-shadow(0 10px 14px rgb(98 30 66 / 0.18)); }
}
@media (max-width: 419px) {
  .intro-visual { margin-top: 58px; }
  .intro-building { height: calc(100% + 34px); }
}
@media (max-width: 899px) {
  .intro-visual .em-phone { font-size: 19px; padding: 10px 15px 10px 12px; gap: 7px; }
  .intro-visual .em-links { display: flex; gap: 14px; }
  .intro-visual .em-links a { font-size: 14px; }
}
/* 배너 글자 간격: 제목 → 버튼 → 안내 → 링크 */
@media (max-width: 899px) {
  .intro-visual .intro-emergency { padding: 24px 0 22px 22px; }
  .intro-visual .em-title { margin: 0; line-height: 1.3; }
  .intro-visual .em-phone { margin: 14px 0 0; }
  .intro-visual .em-sub { margin: 12px 0 0 4px; line-height: 1.5; }
  .intro-visual .em-links { margin: 16px 0 0 4px !important; }
}
@media (max-width: 419px) { .intro-visual .intro-emergency { padding: 22px 0 20px 18px; } }

/* 층별 안내 제목 (오늘 진료와 같은 모양) */
.dir-title { grid-column: 1 / -1; margin-bottom: 18px; }
.dir-title span { font-size: 14px; font-weight: 500; color: var(--muted); }

/* ── 아주 좁은 휴대폰(380px 미만): 건물과 글이 나란히 들어가지 않으므로 건물을 카드 위로 세우고 글은 아래 ── */
@media (max-width: 379px) {
  .intro-visual { margin-top: 96px; min-height: 0; }
  .intro-building {
    inset: -86px 0 auto 0; height: 196px; width: auto;
    display: flex; justify-content: center; clip-path: none;
  }
  .intro-building img { height: 100%; width: auto; }
  .intro-visual .intro-emergency { width: auto; padding: 126px 20px 20px; text-align: center; }
  .intro-visual .em-title { justify-content: center; }
  .intro-visual .em-sub { max-width: none; margin-left: 0; }
  .intro-visual .em-links { justify-content: center; margin-left: 0 !important; }
}

/* ── 메인 화면 움직임 (움직임 줄이기 설정이면 모두 꺼짐) ── */
@media (prefers-reduced-motion: no-preference) {
  /* 의료진 얼굴: 한 명씩 차례로 살짝 커졌다 돌아온다 (계속 반복) */
  .intro-doctors .faces > * {
    position: relative;
    animation: faceWave 5.6s ease-in-out infinite;
    animation-delay: calc(1.2s + var(--i, 0) * .45s);
  }
  @keyframes faceWave {
    0%, 14%, 100% { scale: 1; translate: 0 0; z-index: 0; }
    6%            { scale: 1.18; translate: 0 -3px; z-index: 2; }
  }
  .intro-doctors:hover .faces > * { animation-play-state: paused; }

  /* 첫 화면: 제목 → 설명 → 의료진 순서로 올라온다 */
  .js .intro-text > h1,
  .js .intro-text > .intro-lead,
  .js .intro-text > .intro-doctors { animation: rise .8s cubic-bezier(.2, .7, .2, 1) both; }
  .js .intro-text > .intro-lead { animation-delay: .12s; }
  .js .intro-text > .intro-doctors { animation-delay: .24s; }

  /* 오늘 진료 카드, 층별 안내 목록: 화면에 들어오면 차례로 */
  .js [data-reveal] .today-list > li,
  .js [data-reveal] .floors > li,
  .js [data-reveal].directory .bldg {
    opacity: 0; translate: 0 18px;
    transition: opacity .6s ease, translate .6s cubic-bezier(.2, .7, .2, 1);
  }
  .js [data-reveal].is-in .today-list > li,
  .js [data-reveal].is-in .floors > li,
  .js [data-reveal].is-in.directory .bldg { opacity: 1; translate: 0 0; }
  .js [data-reveal] .today-list > li:nth-child(2) { transition-delay: .08s; }
  .js [data-reveal] .today-list > li:nth-child(3) { transition-delay: .16s; }
  .js [data-reveal] .today-list > li:nth-child(4) { transition-delay: .24s; }
  .js [data-reveal] .floors > li:nth-child(1) { transition-delay: 0.15s; }
  .js [data-reveal] .floors > li:nth-child(2) { transition-delay: 0.20s; }
  .js [data-reveal] .floors > li:nth-child(3) { transition-delay: 0.25s; }
  .js [data-reveal] .floors > li:nth-child(4) { transition-delay: 0.30s; }
  .js [data-reveal] .floors > li:nth-child(5) { transition-delay: 0.35s; }
  .js [data-reveal] .floors > li:nth-child(6) { transition-delay: 0.40s; }
  .js [data-reveal] .floors > li:nth-child(7) { transition-delay: 0.45s; }
  .js [data-reveal] .floors > li:nth-child(8) { transition-delay: 0.50s; }
  .js [data-reveal] .floors > li:nth-child(9) { transition-delay: 0.55s; }
  .js [data-reveal] .floors > li:nth-child(10) { transition-delay: 0.60s; }
  .js [data-reveal] .floors > li:nth-child(11) { transition-delay: 0.65s; }
  .js [data-reveal] .floors > li:nth-child(12) { transition-delay: 0.70s; }
  .js [data-reveal] .floors > li:nth-child(13) { transition-delay: 0.75s; }
  .js [data-reveal] .floors > li:nth-child(14) { transition-delay: 0.80s; }
}
/* 오른쪽 층 안내 패널 (PC만 — 모바일에서는 아래에서 올라오는 창이라 건드리지 않음) */
@media (prefers-reduced-motion: no-preference) and (min-width: 900px) {
  .js [data-reveal].directory .stop-panels { opacity: 0; translate: 0 18px; transition: opacity .7s ease .15s, translate .7s cubic-bezier(.2, .7, .2, 1) .15s; }
  .js [data-reveal].is-in.directory .stop-panels { opacity: 1; translate: 0 0; }
}

/* 진료 중 표시 점: 천천히 깜박임 / 응급 진료 카드: 위아래로 살짝 떠 있음 */
@media (prefers-reduced-motion: no-preference) {
  .st-open .t-state::before { animation: dotBlink 1.6s ease-in-out infinite; }
  @keyframes dotBlink {
    0%, 100% { opacity: 1; box-shadow: 0 0 0 4px color-mix(in srgb, #1f8a4c 22%, transparent); }
    50%      { opacity: .35; box-shadow: 0 0 0 7px color-mix(in srgb, #1f8a4c 0%, transparent); }
  }
}
@media (prefers-reduced-motion: no-preference) and (min-width: 900px) {
  /* transform 으로 움직여 GPU 가 처리 (그림자를 매번 다시 그리지 않음) — 등장 효과(translate)와 따로 논다 */
  .intro-visual .intro-emergency {
    will-change: transform;
    animation: emFloat 3s ease-in-out 1.2s infinite;
  }
  .js .intro-visual .intro-emergency {
    animation: rise .7s cubic-bezier(.2, .7, .2, 1) .35s both, emFloat 3s ease-in-out 1.2s infinite;
  }
  @keyframes emFloat {
    0%, 100% { transform: translate3d(0, 0, 0); }
    50%      { transform: translate3d(0, -10px, 0); }
  }
}