/* 페이지별 스타일: 메인·소개·진료 분야·의료진·예약·오시는 길.
   site.css 다음, motion.css보다 먼저 불러옵니다. 반응형 규칙은 파일 아래쪽 @media에 폭별로 모여 있습니다. */
/* 메인: 소개·운영시간과 공식 병원 전경을 나란히 배치합니다. */
.hero {
  display: grid;
  align-items: start;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  padding-block: 32px 24px;
  gap: 58px;
}
.hero-copy { min-width: 0; padding-top: 30px; }
.hero h1 {
  color: var(--navy);
  font-size: clamp(38px, 4.1vw, 52px);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.03em;
  overflow-wrap: anywhere;
  text-wrap: balance;
}
.hero-description {
  margin-top: 14px;
  font-size: 19px;
  line-height: 1.7;
  font-weight: 600;
  letter-spacing: -.02em;
  max-width: 52ch;
}
.home-hours { margin-top: 30px; }
.home-hours h2 { color: var(--navy); font-size: 22px; line-height: 1.4; }
.home-hours .hours-table { margin-top: 10px; font-size: var(--text-small); }
.home-hours .hours-table > div { padding-block: 10px; gap: 12px; grid-template-columns: minmax(0, .9fr) minmax(0, 1.4fr); }
.home-exterior-photo { min-width: 0; }
.home-hero-media { min-width: 0; display: grid; gap: 18px; }
.home-appointment.button { width: 100%; min-height: 68px; font-size: 22px; padding: 18px 24px; }
.home-appointment svg { flex: 0 0 24px; width: 24px; height: 24px; }
/* 기존 공식 외관 원본은 세로 합본입니다. 위쪽 외관 사진만 표시합니다. */
.hospital-photo-panel { position: relative; aspect-ratio: 632 / 421; overflow: hidden; }
.hospital-photo-panel > img { position: absolute; inset: 0 auto auto 0; width: 100%; height: auto; max-width: none; }
.home-paths { padding-bottom: 64px; }
.home-paths > h2 { margin-bottom: 18px; font-size: 24px; }
.path-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: 8px; }
.path-card { display: flex; align-items: center; gap: 13px; padding: 24px 22px; border-right: 1px solid var(--line); transition: background-color 160ms ease; }
.path-card:last-child { border-right: 0; }
.path-card:hover { background: var(--soft); }
.path-card > div { min-width: 0; }
.path-card > svg { color: var(--navy); width: 24px; height: 24px; flex-shrink: 0; }
.path-card > svg:last-child { margin-left: auto; width: 18px; height: 18px; }
.path-card h3 { font-size: 22px; line-height: 1.5; letter-spacing: -.018em; }

/* 병원·센터 소개 · 센터장 */
.about-grid {
  display: grid;
  align-items: start;
}
.about-copy h2 {
  margin-bottom: 23px;
}
.about-copy > .lead {
  line-height: 1.75;
  margin-bottom: 15px;
  letter-spacing: -.01em;
}
.about-copy > p:not(.lead) {
  color: var(--muted);
  line-height: 1.85;
  font-size: var(--text-body);
}

.support-list {
  list-style: none;
  padding: 0;
  margin: 24px 0 0;
  display: grid;
  gap: 11px;
}
.support-list li {
  display: flex;
  gap: 12px;
  align-items: center;
  font-weight: 600;
  font-size: 15px;
}
.support-list svg {
  width: 18px;
  height: 18px;
  color: var(--navy);
}

.page-about .about-section {
  background: var(--white);
  padding-block: 72px;
}
.page-about .about-copy > p.lead {
  font-size: 21px;
}
/* 시설 슬라이드 아래에 수술 사진을 독립적으로 배치합니다. */
.hospital-media { min-width: 0; display: grid; gap: 40px; }
.hospital-gallery-panel { position: relative; aspect-ratio: 632 / 421; overflow: hidden; }
/* h01_4.jpg (1283×861)의 진료실·MRI·대기공간 영역. 원본 파일을 변형하지 않습니다. */
.hospital-slider .hospital-gallery-panel > img {
  position: absolute;
  width: calc(100% * 1283 / 632);
  height: auto;
  max-width: none;
  aspect-ratio: auto;
  border-radius: 0;
  left: 0;
  top: 0;
}
.hospital-slider .hospital-gallery-panel--consultation > img { left: calc(-100% * 649 / 632); }
.hospital-slider .hospital-gallery-panel--mri > img { left: calc(-100% * 649 / 632); top: calc(-100% * 438 / 421); }
.hospital-slider .hospital-gallery-panel--waiting > img { top: calc(-100% * 438 / 421); }
.hospital-surgery-photo { width: min(68%, 360px); justify-self: center; }
.hospital-surgery-photo img { display: block; width: 100%; height: auto; }
.hospital-slider .photo-slider-track { border-radius: 0; }
.director-greeting { margin-top: 26px; }
.director-greeting p { font-size: var(--text-body); line-height: 1.9; color: var(--muted); }
.director-greeting p:first-child { color: var(--ink); }
.director-greeting p + p { margin-top: 20px; }
.director-copy > .text-link { margin-top: 24px; }
.greeting-quote {
  margin: 34px 0;
  padding: 0;
}
.greeting-quote p {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--navy);
  letter-spacing: -.015em;
}
.about-copy > p.greeting-signature {
  margin-top: 28px;
  color: var(--ink);
  font-weight: 700;
  text-align: right;
}
.greeting p + p {
  margin-top: 16px;
}
.center-guide {
  background: var(--soft);
}
.center-links {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-block: 1px solid var(--line);
}
.center-links a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 28px 20px;
  font-size: 16px;
  font-weight: 600;
  border-right: 1px solid var(--line);
}
.center-links a:first-child {
  padding-left: 0;
}
.center-links a:last-child {
  border-right: 0;
}
.center-links a:hover {
  text-decoration: underline;
  text-underline-offset: 5px;
}
.director-section { border-block: 1px solid var(--line); }
.director-grid {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: 75px;
  align-items: center;
}
.director-portrait {
  display: flex;
  justify-content: center;
  align-items: center;
  min-width: 0;
}
.director-portrait img {
  width: 100%;
  height: auto;
  max-width: 349px;
  object-fit: contain;
  object-position: center center;
}
.director-copy {
  min-width: 0;
}
.director-copy h2 {
  font-size: 30px;
  line-height: 1.35;
  margin-bottom: 22px;
}
.director-copy h3 {
  font-size: 31px;
  line-height: 1.3;
  font-weight: 700;
  color: var(--navy);
  letter-spacing: -.025em;
}

.page-about .about-grid {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 62px;
}
/* 진료 분야: 왼쪽은 분야 이름·요약·링크, 오른쪽은 진료 질환·치료 방법 그룹. 건강검진 프로그램도 같은 행 구조를 씁니다. */
.specialty-directory {
  padding-block: 0 74px;
}
.specialty-row {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.75fr);
  gap: 28px 56px;
  padding: 44px 0;
  border-bottom: 1px solid var(--line);
  align-items: start;
  scroll-margin-top: 110px;
}
.specialty-directory .specialty-row:last-child {
  border-bottom: 0;
}
.specialty-summary h2, .specialty-summary h3 {
  font-size: 24px;
  line-height: 1.4;
  font-weight: 700;
  letter-spacing: -.02em;
  text-wrap: balance;
}
.specialty-summary > p {
  color: var(--muted);
  margin-top: 11px;
  line-height: 1.8;
  font-size: var(--text-body);
  max-width: 36ch;
}
.specialty-summary > .text-link {
  margin-top: 16px;
}
.specialty-groups {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 24px 32px;
}
.specialty-fields .fields-label {
  display: block;
  padding: 0;
  border: 0;
  margin: 0;
  color: var(--muted);
  font-size: var(--text-small);
}
.specialty-fields ul {
  margin: 10px 0 0;
  padding-left: 18px;
  line-height: 1.8;
  font-size: var(--text-body);
}
.specialty-fields li+li {
  margin-top: 5px;
}
/* 건강검진센터: 프로그램별 대상·설명과 포함 검사. 비용은 표시하지 않습니다. */
.checkup-overview {
  padding-block: 32px 52px;
}
.checkup-overview > .wrap {
  max-width: 800px;
}
.checkup-program-link {
  margin-bottom: 22px;
}
.checkup-section {
  background: var(--soft);
  padding-block: 72px 84px;
  scroll-margin-top: 96px;
}
.checkup-heading {
  max-width: 72ch;
  padding-bottom: 8px;
}
.checkup-heading h2 {
  font-size: clamp(28px, 2.8vw, 36px);
}
.checkup-heading p {
  color: var(--muted);
  margin-top: 14px;
  line-height: 1.8;
  font-size: var(--text-body);
}
.checkup-program .checkup-for {
  color: var(--navy);
  font-weight: 600;
  margin-top: 8px;
  font-size: var(--text-small);
}
.checkup-program .checkup-base {
  color: var(--ink);
  font-weight: 600;
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  font-size: var(--text-small);
}
.checkup-base span {
  display: block;
  color: var(--muted);
  font-weight: 400;
  margin-bottom: 2px;
}
.checkup-note {
  color: var(--muted);
  margin-top: 36px;
  max-width: 80ch;
  line-height: 1.8;
  font-size: var(--text-small);
}
.checkup-section .button {
  margin-top: 22px;
}
/* 건강검진센터 사진 슬라이드: 가로 스크롤 스냅으로 한 장씩 넘기고, JavaScript가 있으면 이전·다음 버튼과 현재 번호를 보여줍니다. */
.photo-slider {
  min-width: 0;
}
.photo-slider-track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
}
.photo-slider-track::-webkit-scrollbar {
  display: none;
}
.photo-slide {
  flex: 0 0 100%;
  margin: 0;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}
.photo-slide img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: 12px;
  background: var(--soft);
}
.photo-slide figcaption {
  margin-top: 10px;
  font-size: var(--text-small);
  color: var(--muted);
}
.photo-slider-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 14px;
}
.photo-slider-controls[hidden] {
  display: none;
}
.photo-slider-controls button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--white);
  color: var(--navy);
  cursor: pointer;
  transition: background-color 160ms ease;
}
.photo-slider-controls button:hover {
  background: var(--soft);
}
.photo-slider-controls button svg {
  width: 20px;
  height: 20px;
}
.photo-slider-status {
  min-width: 4em;
  text-align: center;
  font-size: var(--text-small);
  font-weight: 600;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
/* 의료진: 진료과 순서를 유지하면서 카드가 3열 단위로 연속 배치됩니다. */
/* 모바일 진료과 선택 상자. 700px 이하에서만 보이고, 그 위에서는 버튼 목록(.filters)을 씁니다. */
.filter-select {
  display: none;
}
.filter-select label {
  display: grid;
  gap: 8px;
  color: var(--muted);
  font-size: var(--text-label);
}
.filter-select select {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  min-height: 48px;
  padding: 10px 44px 10px 14px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23182643' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6l6-6'/%3E%3C/svg%3E") no-repeat right 14px center / 18px;
  color: var(--ink);
  font: inherit;
  font-weight: 600;
  font-size: 15px;
}
.filter-select select:focus-visible {
  outline: 3px solid #547ac8;
  outline-offset: 3px;
}
.filter-select noscript .button {
  margin-top: 10px;
}
.doctor-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 30px;
  flex-wrap: wrap;
}
.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.filters a {
  border: 1px solid var(--line);
  background: var(--white);
  border-radius: 6px;
  font-weight: 600;
  transition: background-color 150ms ease, color 150ms ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  line-height: 1.5;
  font-size: var(--text-small);
  padding: 11px 15px;
}
.filters a:hover {
  background: var(--soft);
}
.filters a[aria-current="page"] {
  background: var(--navy);
  border-color: var(--navy);
  color: var(--white);
}
.doctor-count {
  color: var(--muted);
  white-space: nowrap;
  font-size: var(--text-label);
}
/* 같은 줄의 카드는 사진·이름·진료과·구분선 높이를 공유합니다(subgrid).
   진료과가 두 줄로 넘어가도 구분선이 맞도록, 줄 사이 간격은 row-gap 대신 카드 아래 여백으로 둡니다. */
.doctor-grid {
  --doctor-row-gap: 42px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 28px;
  margin-bottom: calc(-1 * var(--doctor-row-gap));
}
.doctor {
  min-width: 0;
  display: grid;
  grid-row: span 6;
  grid-template-rows: subgrid;
  padding-bottom: var(--doctor-row-gap);
}
/* 의료진 사진은 잘라내지 않고(contain) 전체를 보여줍니다. 안쪽 여백으로 머리 위 공간을 확보합니다. */
.doctor-image {
  overflow: hidden;
  aspect-ratio: 6 / 5;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 12px;
}
.doctor-department {
  font-weight: 600;
  color: var(--navy);
  font-size: 14px;
  line-height: 1.75;
  margin-bottom: 18px;
}
.fields-label {
  color: var(--muted);
  border-top: 1px solid var(--line);
  font-size: var(--text-label);
  padding-top: 15px;
  margin-bottom: 8px;
}
.doctor ul {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: var(--text-body);
  line-height: 1.85;
}
.doctor li {
  position: relative;
  padding-left: 13px;
}
.doctor li::before {
  content: '';
  width: 3px;
  height: 3px;
  background: var(--muted);
  position: absolute;
  left: 0;
  border-radius: 100%;
  top: .85em;
}
.page-doctors .doctors-section {
  padding-block: 48px 78px;
}
.doctor h2 {
  letter-spacing: -.025em;
  font-weight: 700;
  font-size: 25px;
  line-height: 1.35;
  margin-bottom: 10px;
}
/* 센터장 직함은 진료과와 한 줄에 두고 얇은 세로선으로 구분합니다. */
.doctor-role {
  font-weight: 700;
}
.doctor-role::after {
  content: '';
  display: inline-block;
  width: 1px;
  height: .9em;
  margin: 0 6px 0 7px;
  background: var(--line);
  vertical-align: -.1em;
}
/* 한 줄에 다 들어가지 않으면 진료과를 중간에서 끊지 않고 다음 줄로 넘깁니다. */
.doctor-role + .doctor-dept {
  display: inline-block;
}
.doctor-image img {
  display: block;
  width: 100%;
  height: 100%;
  padding: 14px;
  object-fit: contain;
  object-position: center center;
}
.doctor-info {
  display: grid;
  grid-row: span 5;
  grid-template-rows: subgrid;
  padding: 20px 2px 0;
}
/* 예약 안내 */
.booking-section {
  background: var(--navy);
  color: var(--white);
  padding-block: 80px;
  scroll-margin-top: 95px;
}
.booking-intro {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: 80px;
  align-items: center;
}
.booking-intro h2 {
  font-size: clamp(28px, 3vw, 39px);
}
.booking-intro p {
  color: #dce4ff;
  margin-top: 23px;
  max-width: 59ch;
  font-size: var(--text-body);
  line-height: 1.8;
}
.booking-contact {
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 12px;
}
.booking-intro--channels {
  grid-template-columns: minmax(0, 1.05fr) minmax(480px, 1.5fr);
  gap: 56px;
}
.booking-channels {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 32px;
  align-items: start;
}
.booking-channels.booking-channels--single {
  grid-template-columns: minmax(0, 1fr);
  justify-self: center;
  width: 100%;
  max-width: 360px;
}
.booking-channel {
  display: grid;
  min-width: 0;
  justify-items: center;
  gap: 12px;
  text-align: center;
}
.booking-channel .button {
  width: 100%;
  min-width: 0;
  white-space: nowrap;
}
.contact-mark {
  margin-bottom: 7px;
  color: var(--green);
}
.contact-mark svg {
  width: 51px;
  height: 51px;
  stroke-width: 1.25;
}
.booking-channel .contact-number {
  overflow-wrap: anywhere;
}
.booking-channel small {
  color: #dce4ff;
  max-width: 31ch;
  font-size: var(--text-label);
  line-height: 1.65;
}
.copy-toast {
  position: fixed;
  z-index: 90;
  left: 50%;
  bottom: 24px;
  max-width: min(420px, calc(100% - 32px));
  padding: 13px 18px;
  border-radius: 10px;
  background: var(--white);
  color: var(--navy);
  box-shadow: 0 16px 42px rgba(5, 18, 70, .28);
  font-size: var(--text-small);
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 12px);
  transition: opacity 180ms ease, transform 180ms var(--ease);
}
.copy-toast.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}
.copy-toast[data-state="error"] {
  color: #8a1f2d;
}
.mobile-contact.email-copy-button {
  width: 100%;
  border-inline: 0;
  border-bottom: 0;
}
.whatsapp-mark {
  margin-bottom: 7px;
  color: var(--green);
}
.whatsapp-mark svg {
  width: 51px;
  height: 51px;
  stroke-width: 1.25;
}
.contact-number {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  font-size: 17px;
}
.booking-contact small {
  color: #dce4ff;
  text-align: center;
  font-size: var(--text-label);
}
.contact-email {
  margin-top: 6px;
  font-size: 15px;
  text-decoration: underline;
  text-decoration-color: #7a89c4;
  text-underline-offset: 5px;
  text-align: center;
  overflow-wrap: anywhere;
}
.contact-email span {
  display: block;
  color: #dce4ff;
  font-size: var(--text-label);
  text-decoration: none;
  margin-bottom: 2px;
}
.contact-email:hover {
  text-decoration-color: var(--white);
}
.booking-steps {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 48px;
  padding: 38px 0 0;
  margin: 46px 0 0;
  border-top: 1px solid #5463a0;
  list-style: none;
}
.booking-steps li {
  display: flex;
  gap: 17px;
  align-items: flex-start;
}
.booking-steps li > div {
  max-width: 52ch;
}
.step-number {
  font-size: 14px;
  font-weight: 600;
  color: #c8d5ff;
  line-height: 1.8;
  font-variant-numeric: tabular-nums;
}
.booking-steps h3 {
  line-height: 1.5;
  margin-bottom: 8px;
  font-size: 19px;
}
.booking-steps p {
  color: #dce4ff;
  font-size: var(--text-body);
  line-height: 1.8;
}
.booking-note {
  color: #dce4ff;
  margin-top: 34px;
  max-width: 92ch;
  font-size: var(--text-small);
  line-height: 1.85;
}
/* 진료 시간 */
.hours-section {
  padding-block: 72px 80px;
}
.hours-grid {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: 56px;
  align-items: start;
}
.hours-copy h2 {
  font-size: clamp(26px, 2.6vw, 32px);
}
.hours-copy p {
  color: var(--muted);
  margin-top: 14px;
  max-width: 42ch;
  line-height: 1.8;
  font-size: var(--text-body);
}
.hours-table {
  margin: 0;
  border-top: 1px solid var(--line);
}
.hours-table > div {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.4fr);
  gap: 20px;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
}
.hours-table dt {
  font-weight: 600;
  color: var(--navy);
}
.hours-table dd {
  margin: 0;
  font-variant-numeric: tabular-nums;
}
/* 오시는 길 */
.location-grid {
  display: grid;
  grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr);
  gap: 55px;
  align-items: stretch;
}
.location-copy {
  padding: 15px 0;
}
.location-pin {
  display: block;
  color: var(--navy);
  margin-bottom: 17px;
}
.location-pin svg {
  width: 30px;
  height: 30px;
}
.location-copy h2 {
  margin-bottom: 13px;
  font-size: 24px;
  line-height: 1.4;
}
.location-copy address {
  font-style: normal;
  line-height: 1.8;
  font-weight: 600;
  font-size: var(--text-body);
}
.location-copy address span {
  display: block;
  font-weight: 400;
  color: var(--muted);
  margin-top: 7px;
  font-size: var(--text-small);
}
.floor-list {
  margin-top: 16px;
  gap: 8px;
}
.main-building {
  color: var(--muted);
  line-height: 1.8;
  margin-top: 16px;
  font-size: var(--text-small);
}
.transit {
  border-top: 1px solid var(--line);
  margin-top: 25px;
  padding-top: 21px;
  margin-bottom: 16px;
}
.transit h3 {
  margin-bottom: 8px;
  font-size: 14px;
  letter-spacing: 0;
}
.transit p {
  color: var(--muted);
  line-height: 1.85;
  font-size: var(--text-body);
}
.map-frame {
  overflow: hidden;
  border-radius: 9px;
  background: var(--soft);
  border: 1px solid var(--line);
}
.map-frame iframe {
  display: block;
  width: 100%;
  border: 0;
}
.page-location .location-section {
  padding-block: 66px 90px;
}
/* 브라우저가 지도를 막아도 새 창 길찾기 버튼은 그대로 보입니다. */
.map-panel {
  min-width: 0;
}
.map-panel .map-frame {
  height: 400px;
  min-height: 400px;
}
.map-panel .map-frame iframe {
  height: 100%;
  min-height: 400px;
}
.map-help {
  padding-top: 17px;
}
.map-help p {
  color: var(--muted);
  line-height: 1.75;
  margin-bottom: 11px;
  font-size: var(--text-small);
}
.map-help .button {
  min-height: 46px;
  padding: 12px 16px;
  font-size: var(--text-small);
}
.map-help .button svg {
  width: 18px;
  height: 18px;
}
@media (max-width: 1190px) {
  /* 메인 */
  .hero {
    gap: 34px;
  }
  .hero h1 {
    font-size: 46px;
  }

  /* 병원·센터 소개 · 센터장 */
  .page-about .about-grid {
    gap: 38px;
  }
  /* 예약 안내 */
  .booking-intro {
    gap: 45px;
  }
}
@media (max-width: 1100px) {
  /* 메인 */
  .path-card > svg:first-child {
    display: none;
  }
  /* 진료 분야 */
  .specialty-row {
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.5fr);
    gap: 24px 36px;
  }
  .specialty-groups {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 20px 24px;
  }
}
@media (max-width: 980px) {
  /* 메인 */

  .hero h1 {
    font-size: 39px;
  }
  .hero-description {
    font-size: 16px;
  }

  /* 병원·센터 소개 · 센터장 */
  .director-grid {
    gap: 38px;
  }
  .director-copy h2 {
    font-size: 27px;
  }
  .director-copy h3 {
    font-size: 28px;
  }
  /* 의료진 */
  .doctor-controls {
    align-items: flex-start;
  }
  .doctor-count {
    margin-top: 10px;
  }
  .doctor-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  /* 예약 안내 */
  .booking-intro h2 {
    font-size: 30px;
  }
  .booking-intro {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    gap: 30px;
  }
  .booking-intro--channels {
    grid-template-columns: 1fr;
    gap: 38px;
  }
  .booking-channels {
    max-width: 760px;
  }
  .booking-steps {
    gap: 26px;
  }
  .booking-steps li {
    gap: 12px;
  }
  .booking-steps h3 {
    font-size: 18px;
  }
  /* 오시는 길 */
  .location-grid {
    gap: 30px;
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  }
}
@media (max-width: 700px) {
  /* 메인 */
  .hero-copy {
    padding: 0;
  }
  .hero h1 {
    max-width: 590px;
    font-size: clamp(34px, 8.5vw, 42px);
  }

  .home-paths > h2 {
    line-height: 1.4;
  }
  .path-grid {
    grid-template-columns: 1fr;
  }
  .path-card {
    border-right: 0;
    border-bottom: 1px solid var(--line);
    padding: 22px 19px;
    gap: 12px;
  }
  .path-card:last-child {
    border-bottom: 0;
  }
  .path-card > svg:first-child {
    display: block;
  }
  .hero {
    grid-template-columns: 1fr;
    padding-block: 30px 36px;
    gap: 28px;
  }

  .hero-description {
    font-size: 16px;
    margin-top: 13px;
  }

  .home-paths {
    padding-bottom: 42px;
  }

  /* 병원·센터 소개 · 센터장 */
  .support-list { gap: 9px; margin-top: 20px; }
  .about-copy h2 {
    margin-bottom: 18px;
  }

  .page-about .about-section {
    padding-block: 43px;
  }
  .center-links {
    grid-template-columns: 1fr;
  }
  .center-links a {
    padding: 19px 0;
    border-right: 0;
    border-bottom: 1px solid var(--line);
    font-size: 15px;
  }
  .center-links a:last-child {
    border-bottom: 0;
  }
  .director-grid {
    grid-template-columns: 1fr;
    gap: 29px;
  }
  .director-copy h2 {
    font-size: 27px;
    margin-bottom: 19px;
  }
  .director-copy h3 {
    font-size: 29px;
  }

  .page-about .about-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .page-about .hospital-photo {
    position: static;
  }
  .greeting-quote p {
    font-size: 20px;
  }
  .director-portrait img {
    height: 280px;
    max-width: 100%;
  }
  /* 진료 분야 */
  .specialty-directory {
    padding-block: 0 30px;
  }
  .specialty-row {
    grid-template-columns: 1fr;
    padding-block: 29px;
    gap: 18px;
  }
  .specialty-summary h2, .specialty-summary h3 {
    font-size: 22px;
  }
  .specialty-summary > p {
    margin-top: 7px;
    font-size: 16px;
    max-width: none;
  }
  .specialty-summary > .text-link {
    margin-top: 10px;
  }
  .specialty-groups {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .specialty-fields ul {
    font-size: 16px;
  }
  .checkup-section {
    padding-block: 44px 52px;
  }
  .checkup-note {
    margin-top: 24px;
  }
  /* 의료진 */
  .doctor-controls {
    display: block;
    margin-bottom: 24px;
  }
  .filters {
    display: none;
  }
  .filter-select {
    display: block;
  }
  .page-doctors .doctors-section {
    padding-block: 30px 48px;
  }
  .filters a {
    padding: 10px 12px;
    font-size: 14px;
  }
  .doctor-count {
    font-size: 13px;
    margin-top: 14px;
  }
  .doctor h2 {
    font-size: 23px;
  }
  .doctor-department {
    font-size: 14px;
  }
  .doctor ul {
    font-size: 16px;
  }
  .fields-label {
    font-size: 13px;
  }
  /* 예약 안내 */
  .booking-section {
    padding-block: 49px;
    scroll-margin-top: 76px;
  }
  .booking-intro h2 {
    font-size: 29px;
  }
  .booking-intro p {
    margin-top: 17px;
    font-size: 16px;
  }
  .booking-contact {
    align-items: flex-start;
    gap: 10px;
  }
  .booking-channels {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .booking-channel {
    justify-items: start;
    text-align: left;
  }
  .booking-channel .button {
    max-width: 100%;
  }
  .booking-channel small {
    max-width: 42ch;
    text-align: left;
  }
  .contact-mark {
    display: none;
  }
  .copy-toast {
    bottom: 84px;
  }
  .whatsapp-mark {
    display: none;
  }
  .booking-contact small {
    text-align: left;
  }
  .booking-steps {
    grid-template-columns: 1fr;
    padding-top: 28px;
    margin-top: 30px;
    gap: 27px;
  }
  .booking-steps h3 {
    margin-bottom: 5px;
  }
  .booking-note {
    margin-top: 28px;
    font-size: 14px;
  }
  .booking-intro {
    grid-template-columns: 1fr;
  }
  .booking-steps p {
    font-size: 16px;
  }
  .contact-email {
    text-align: left;
  }
  /* 진료 시간 */
  .hours-section {
    padding-block: 44px 50px;
  }
  .hours-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .hours-table > div {
    grid-template-columns: 1fr;
    gap: 4px;
    padding: 13px 0;
  }
  /* 오시는 길 */
  .location-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .location-copy {
    padding-top: 0;
  }
  .location-pin {
    display: none;
  }
  .page-location .location-section {
    padding-block: 38px 50px;
  }
  .location-copy h2 {
    font-size: 21px;
  }
  .map-panel .map-frame, .map-panel .map-frame iframe {
    height: 330px;
    min-height: 330px;
  }
  .map-help .button {
    width: 100%;
  }
  .location-copy address {
    font-size: 16px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .copy-toast {
    transform: translate(-50%, 0);
    transition: opacity 120ms ease;
  }
}
@media (max-width: 600px) {
  /* 의료진 */
  .doctor-grid {
    grid-template-columns: 1fr;
    --doctor-row-gap: 38px;
  }
  .doctor-image {
    aspect-ratio: auto;
    height: 270px;
  }
  .doctor-image img {
    padding: 15px;
  }
  .doctor-info {
    padding-top: 18px;
  }
  .doctor h2 {
    font-size: 25px;
  }
}
@media (max-width: 380px) {
  /* 진료 분야 */
  .specialty-summary h2, .specialty-summary h3 {
    font-size: 20px;
  }
  /* 예약 안내 */
  .booking-intro h2 {
    font-size: 26px;
  }
}
@media print {
  /* 메인 */

  /* 병원·센터 소개 · 센터장 */
  .director-grid {
    grid-template-columns: 1fr 1.4fr;
    gap: 30px;
  }
  .director-section {
    break-inside: avoid;
  }
  /* 진료 분야 */
  .specialty-row {
    break-inside: avoid;
  }
  /* 의료진 */
  .doctor {
    break-inside: avoid;
  }
  .doctor-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .doctor-image {
    height: 200px;
  }
  /* 예약 안내 */
  .booking-section {
    background: white;
    color: var(--ink);
    padding-block: 30px;
  }
  .booking-section p, .step-number {
    color: var(--muted);
  }
}

/* 홈·병원 소개의 좁은 화면 배치. */
@media (max-width: 980px) and (min-width: 701px) {
  .hero { gap: 30px; }
  .hero-copy { padding-top: 8px; }
  .hero-description { font-size: 17px; }
  .home-hours { margin-top: 22px; }
}
@media (max-width: 700px) {
  .hero-copy { padding-top: 0; }
  .hero-description { font-size: 17px; margin-top: 14px; }
  .home-hours { margin-top: 24px; }
  .home-hours h2 { font-size: 21px; }
  .home-paths { padding-bottom: 42px; }
  .path-card h3 { font-size: 20px; }
  .hospital-media { order: 2; gap: 28px; }
  .hospital-surgery-photo { width: min(76%, 320px); }
  .director-portrait img { height: auto; width: min(100%, 290px); }
}
@media (prefers-reduced-motion: reduce) {
  .photo-slider-track { scroll-behavior: auto; }
}