/* ==========================================================================
   Pages — 레퍼런스 톤: 밝은 크림 히어로 + 사진 위 화이트 그라디언트
   ========================================================================== */

/* ---------- Home hero: 문구와 원본 비율 사진을 나란히 배치 ---------- */
.hero {
  position: relative;
  isolation: isolate;
  background: radial-gradient(ellipse at top left, #f8eadb, transparent 65%), var(--bg-page);
  overflow: hidden;
}

.hero__inner {
  position: relative;
  text-align: left;
}

.hero__title {
  font-size: var(--fs-display);
  line-height: 1.32;
  letter-spacing: -0.038em;
  color: var(--green-900);
  font-weight: 800;
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.6);
}

.hero__title em {
  font-style: normal;
  color: var(--gold-600);
}

.hero__sub {
  margin: var(--sp-5) auto 0;
  max-width: 46ch;
  font-size: var(--fs-lg);
  line-height: 1.9;
  color: var(--ink-700);
}

.hero__actions {
  margin-top: var(--sp-8);
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  justify-content: center;
}

/* 히어로 하단 정보 바 (금맥: 평일 야간 9시까지 · 화곡역 3번 출구) */
.hero__facts {
  margin-top: var(--sp-8);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-3) var(--sp-6);
  font-size: 0.88rem;
  color: var(--ink-600);
}

.hero__fact {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.hero__fact svg {
  width: 14px;
  height: 14px;
  color: var(--gold-600);
  flex-shrink: 0;
}

/* 메인 배너: 좌우 이동 · 현재 위치 · 자동 넘김 */
.hero__slides { display: grid; }
.hero__slide {
  grid-area: 1 / 1;
  min-width: 0;
  position: relative;
  isolation: isolate;
  opacity: 0;
  visibility: hidden;
  transition: opacity 450ms ease, visibility 450ms;
  display: grid;
  grid-template-columns: minmax(540px, 1.15fr) minmax(0, 1fr);
  align-items: center;
  gap: 24px;
  width: 100%;
  max-width: 1440px;
  margin-inline: auto;
  padding: 52px 72px 100px;
}
.hero__slide.is-active { opacity: 1; visibility: visible; }
.hero__slide .hero__inner { order: 1; min-width: 0; width: 100%; max-width: none; margin: 0; padding: 0; }
.hero__slide .hero__title { font-size: clamp(1.9rem, 3.1vw, 2.8rem); text-shadow: none; }
.hero__slide .hero__sub { margin-inline: 0; }
.hero__slide .hero__actions, .hero__slide .hero__facts { justify-content: flex-start; }
.hero__phone { column-gap: 6px; padding-inline: 20px; white-space: nowrap; }
.hero__phone-number { display: inline-flex; align-items: baseline; gap: 0; font-variant-numeric: tabular-nums lining-nums; letter-spacing: 0; }
.hero__media { order: 2; min-width: 0; width: 100%; }
.hero__media picture { display: flex; align-items: center; justify-content: center; height: 560px; }
.hero__media img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  /* 실제 사진 경계에서 페이드해 세로·가로 사진 모두 배경에 자연스럽게 연결 */
  -webkit-mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent), linear-gradient(to bottom, transparent, #000 7%, #000 84%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent), linear-gradient(to bottom, transparent, #000 7%, #000 84%, transparent);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}
.hero__media--doctor picture { height: 540px; }
/* 접수 공간 배너: 병원명 가까운 왼쪽은 좁게, 나머지 테두리는 은은하게 페이드 */
#hero-slide-2 .hero__media img {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 1.5%, #000 96%, transparent), linear-gradient(to bottom, transparent, #000 4%, #000 94%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 1.5%, #000 96%, transparent), linear-gradient(to bottom, transparent, #000 4%, #000 94%, transparent);
  object-fit: contain;
}
.hero__caption { margin-top: 14px; text-align: center; font-size: .85rem; color: var(--ink-600); }
.hero__caption strong { display: inline-block; margin-left: 8px; color: var(--green-900); font-size: 1rem; }
.hero__arrow {
  position: absolute;
  z-index: 2;
  top: calc(50% - 26px);
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: rgba(255, 255, 255, .94);
  color: var(--gold-700);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
}
.hero__arrow--prev { left: 16px; }
.hero__arrow--next { right: 16px; }
.hero__arrow svg { width: 22px; height: 22px; }
.hero__arrow:hover { background: var(--gold-050); border-color: var(--gold-500); }
.hero__controls {
  position: absolute;
  z-index: 2;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 8px;
}
.hero__dots { display: flex; }
.hero__dot, .hero__pause {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  color: var(--gold-700);
}
.hero__dot::before {
  content: '';
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #d1cbc2;
  transition: background 200ms, transform 200ms;
}
.hero__dot[aria-current="true"]::before { background: var(--gold-500); transform: scale(1.25); }
.hero__pause { font-size: 16px; border-radius: 50%; }
.hero__pause:hover { background: var(--gold-100); }
.hero [hidden] { display: none; }
@media (min-width: 801px) {
  .hero__slide .hero__actions { flex-wrap: nowrap; gap: 10px; }
  .hero__slide .hero__actions .btn { padding-inline: 14px; font-size: .9rem; white-space: nowrap; }
  .hero__slide .hero__phone { column-gap: 6px; }
}
@media (min-width: 801px) and (max-width: 1100px) {
  .hero__slide { grid-template-columns: minmax(0, 1fr); }
  .hero__slide .hero__inner { text-align: center; }
  .hero__slide .hero__actions, .hero__slide .hero__facts { justify-content: center; }
  .hero__slide .hero__sub { margin-inline: auto; }
  .hero__media picture { height: 420px; }
}
@media (max-width: 800px) {
  .hero__slide { grid-template-columns: minmax(0, 1fr); gap: 28px; padding: 36px 48px 90px; }
  .hero__slide .hero__inner { text-align: center; }
  .hero__slide .hero__sub { margin-inline: auto; }
  .hero__slide .hero__actions, .hero__slide .hero__facts { justify-content: center; }
  .hero__media picture { height: 360px; }
  .hero__media--doctor picture { height: 340px; }
  .hero__caption { font-size: .75rem; }
  .hero__caption strong { font-size: .875rem; }
  .hero__arrow { width: 44px; height: 44px; top: calc(50% - 22px); }
  .hero__arrow--prev { left: 2px; }
  .hero__arrow--next { right: 2px; }
  .hero__slide .hero__title { font-size: clamp(1.55rem, 6vw, 1.95rem); }
}
@media (prefers-reduced-motion: reduce) {
  .hero__slide, .hero__dot::before { transition: none; }
}

/* ---------- Page hero (서브페이지) — 밝은 톤 ---------- */
.page-hero {
  position: relative;
  isolation: isolate;
  background-color: var(--bg-soft);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}

.page-hero__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.page-hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.page-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    180deg,
    rgba(250, 246, 237, 0.9) 0%,
    rgba(250, 246, 237, 0.82) 100%
  );
}

.page-hero__inner {
  padding-block: clamp(36px, 5vw, 66px);
  max-width: 52ch;
}

.page-hero__title {
  font-size: var(--fs-h1);
  line-height: 1.3;
  color: var(--green-900);
}

.page-hero__lead {
  margin-top: var(--sp-4);
  font-size: var(--fs-lg);
  line-height: 1.88;
  color: var(--ink-600);
}

/* ---------- Breadcrumb ---------- */
.crumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
  margin-bottom: var(--sp-4);
  font-size: var(--fs-xs);
  color: var(--ink-500);
}
.crumb a:hover {
  color: var(--green-600);
}
.crumb li {
  display: flex;
  align-items: center;
}
.crumb li:not(:last-child)::after {
  content: "/";
  margin-left: var(--sp-2);
  color: var(--line-strong);
}
.crumb [aria-current] {
  color: var(--gold-700);
  font-weight: 600;
}

/* ---------- 진료과목 카드 그리드 (레퍼런스: 균등 카드 + 아이콘) ---------- */
.focus-grid {
  display: grid;
  gap: var(--sp-4);
}

.focus-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--sp-6);
  background: var(--surface-0);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  transition: border-color var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.focus-card:hover {
  border-color: var(--green-600);
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
}

.focus-card__icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: var(--r-md);
  background: var(--green-050);
  color: var(--green-600);
  margin-bottom: var(--sp-4);
}
.focus-card__icon svg {
  width: 24px;
  height: 24px;
}

.focus-card__title {
  font-size: 1.22rem;
  letter-spacing: -0.035em;
  color: var(--green-900);
}

.focus-card__desc {
  margin-top: var(--sp-3);
  font-size: 0.93rem;
  line-height: 1.82;
  color: var(--ink-600);
}

.focus-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: var(--sp-4);
}

.focus-card__tag {
  padding: 3px 10px;
  border-radius: var(--r-pill);
  background: var(--gold-050);
  border: 1px solid var(--gold-100);
  font-size: 0.73rem;
  font-weight: 600;
  color: var(--gold-700);
}

.focus-card__more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: auto;
  padding-top: var(--sp-5);
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--green-600);
  transition: gap var(--dur-fast) var(--ease);
}

.focus-card:hover .focus-card__more {
  gap: 11px;
}

@media (min-width: 640px) {
  .focus-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 1000px) {
  .focus-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  /* 5개 카드: 앞 3개 + 뒤 2개가 자연스럽게 */
}

/* ---------- Split ---------- */
.split {
  display: grid;
  gap: var(--sp-8);
  align-items: center;
}

@media (min-width: 900px) {
  .split {
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-12);
  }
  .split--reverse > :first-child {
    order: 2;
  }
  .split--narrow-img {
    grid-template-columns: 1.12fr 0.88fr;
  }
}

/* ---------- Gallery ---------- */
.gallery {
  display: grid;
  gap: var(--sp-4);
}

/* ---------- 페이지 제목 옆 외부 사이트 링크 ---------- */
.page-hero__link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-left: var(--sp-3);
  padding: 5px 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--surface-0);
  color: var(--green-600);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0;
  vertical-align: middle;
  white-space: nowrap;
  transition: transform .18s ease, box-shadow .18s ease;
}

.page-hero__link:hover,
.page-hero__link:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 6px 14px rgba(31, 61, 42, .16);
}

@media (max-width: 600px) {
  .page-hero__link {
    display: inline-flex;
    margin-left: 0;
    margin-top: var(--sp-3);
    font-size: 0.76rem;
  }
}

/* ---------- 고민 카드 제목 앞 체크박스 ---------- */
.concern-card .method__name {
  position: relative;
  padding-left: 30px;
}

.concern-card .method__name::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.1em;
  width: 19px;
  height: 19px;
  border: 1.6px solid var(--green-300, var(--green-600));
  border-radius: 5px;
  background: var(--green-050);
}

.concern-card .method__name::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 0.42em;
  width: 7px;
  height: 3.5px;
  transform: rotate(-45deg);
  border-left: 2px solid var(--green-600);
  border-bottom: 2px solid var(--green-600);
}

/* ---------- 비대면 진료 절차 (번호 + 아이콘 카드) ---------- */
.flow-steps {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-4);
  margin-top: var(--sp-10);
  padding: 0;
  list-style: none;
  counter-reset: flow;
}

.flow-step {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-10) var(--sp-5) var(--sp-6);
  text-align: center;
  background: var(--surface-0);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}

.flow-step__num {
  position: absolute;
  top: calc(var(--sp-5) * -1);
  left: 50%;
  transform: translateX(-50%);
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--green-700);
  color: #fff;
  font-size: 1.02rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.flow-step__icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  color: var(--green-600);
}

.flow-step__icon svg { width: 100%; height: 100%; }

.flow-step__name {
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--ink-900);
}

.flow-step__desc {
  color: var(--ink-600);
  font-size: 0.92rem;
  line-height: 1.75;
}

@media (min-width: 760px) {
  .flow-steps {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--sp-5);
  }
}

/* 상담·앱 사진은 잘리면 내용을 알아보기 어려워 원본 비율을 유지합니다. */
.gallery--2.program-gallery .figure img {
  aspect-ratio: 4 / 3;
  height: auto;
  object-fit: contain;
  background: var(--gold-050);
}

/* 린다이어트·수공진단 제품 갤러리: 사진 비율이 서로 달라 4:3으로 맞춥니다. */
.program-gallery .figure img {
  aspect-ratio: 4 / 3;
  height: auto;
  object-fit: cover;
  object-position: center;
}

/* 시설 사진은 원본 비율이 제각각이라 4:3으로 통일합니다.
   칸 높이도 같이 맞춰 캡션 줄이 가지런히 놓이도록 합니다. */
.facility-gallery { align-items: stretch; }

.facility-gallery .figure {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.facility-gallery .figure picture {
  display: block;
}

.facility-gallery .figure img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  height: auto;
  object-fit: cover;
  object-position: center;
}

.facility-gallery .figure figcaption {
  flex: 1;
}

@media (min-width: 700px) {
  .gallery--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .gallery--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Four photographs: full frames with a gentle hover lift and zoom. */
.clinic-gallery {
  align-items: stretch;
}
.clinic-gallery .figure { background: var(--surface-0); transition: box-shadow .45s ease, translate .45s ease; }
.clinic-gallery picture { display: block; position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--gold-050); }
.clinic-gallery picture::before { content: ""; position: absolute; inset: -20px; background: var(--clinic-photo) center / cover; filter: blur(18px); opacity: .3; }
.clinic-gallery .figure img {
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform: scale(.96);
  transition: transform .6s ease;
}
.clinic-gallery .figure--examroom { --clinic-photo: url('../img/clinic/examroom-1200.webp'); }
.clinic-gallery .figure--therapy { --clinic-photo: url('../img/clinic/hero-therapy-1600.webp'); }
.clinic-gallery .figure--waiting { --clinic-photo: url('../img/clinic/waiting-1000.webp'); }
.clinic-gallery .figure--corridor { --clinic-photo: url('../img/clinic/corridor-1600.webp'); }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .clinic-gallery .figure:hover { translate: 0 -5px; box-shadow: var(--shadow-md); }
  .clinic-gallery .figure:hover img { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .clinic-gallery .figure, .clinic-gallery .figure img { transition: none; }
}
@media (min-width: 700px) {
  .clinic-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1180px) {
  .clinic-gallery { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ---------- Doctor page ---------- */
.doctor-card {
  display: grid;
  gap: var(--sp-8);
}

.doctor-card__photo {
  margin: 0;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--gold-050);
  box-shadow: var(--shadow-md);
}

.doctor-card__name {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--sp-3);
}

.doctor-card__name h2 {
  font-size: clamp(1.75rem, 2.9vw, 2.3rem);
  letter-spacing: -0.042em;
}

@media (min-width: 820px) {
  .doctor-card {
    grid-template-columns: 0.78fr 1.22fr;
    gap: var(--sp-12);
    align-items: start;
  }
}

/* ---------- Treatment method ---------- */
.method {
  padding: var(--sp-6);
  background: var(--surface-0);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
}

.method__name {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--sp-2);
  font-size: 1.08rem;
  letter-spacing: -0.03em;
  color: var(--green-900);
}

.method__name span {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--gold-600);
  text-transform: uppercase;
}

.method__desc {
  margin-top: var(--sp-3);
  font-size: 0.93rem;
  line-height: 1.84;
  color: var(--ink-600);
}

/* ---------- Form ---------- */
.form-card {
  padding: clamp(var(--sp-5), 3vw, var(--sp-10));
  background: var(--surface-0);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-md);
}

.form {
  display: grid;
  gap: var(--sp-5);
}

.field {
  display: grid;
  gap: var(--sp-2);
}

.field__label {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--ink-800);
}

.field__label .req {
  color: var(--point);
  margin-left: 2px;
}

.field__hint {
  font-size: 0.8rem;
  color: var(--ink-500);
  line-height: 1.7;
}

.input,
.textarea,
.select {
  width: 100%;
  min-height: 50px;
  padding: var(--sp-3) var(--sp-4);
  font: inherit;
  font-size: 1rem;
  color: var(--ink-900);
  background: var(--bg-page);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  transition: border-color var(--dur-fast) var(--ease),
    box-shadow var(--dur-fast) var(--ease), background var(--dur-fast);
}

.input::placeholder,
.textarea::placeholder {
  color: var(--ink-500);
}

.input:focus,
.textarea:focus,
.select:focus {
  outline: none;
  background: var(--surface-0);
  border-color: var(--green-600);
  box-shadow: 0 0 0 3px var(--green-100);
}

.textarea {
  min-height: 136px;
  line-height: 1.8;
  resize: vertical;
}

.select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%236b5b4b' stroke-width='1.6' d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--sp-4) center;
  background-size: 12px;
  padding-right: var(--sp-10);
}

.radio-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}

.radio-chip {
  position: relative;
}

.radio-chip input {
  position: absolute;
  opacity: 0;
  inset: 0;
  cursor: pointer;
}

.radio-chip span {
  display: inline-flex;
  align-items: center;
  min-height: 42px;
  padding: 0 var(--sp-5);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--ink-600);
  background: var(--surface-0);
  transition: all var(--dur-fast) var(--ease);
}

.radio-chip input:checked + span {
  background: var(--green-600);
  border-color: var(--green-600);
  color: #fff;
}

.radio-chip input:focus-visible + span {
  outline: 2px solid var(--green-600);
  outline-offset: 2px;
}

.consent {
  padding: var(--sp-5);
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}

.consent__box {
  max-height: 140px;
  overflow-y: auto;
  padding: var(--sp-4);
  background: var(--surface-0);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  font-size: 0.82rem;
  line-height: 1.85;
  color: var(--ink-600);
}

.consent__box dl {
  margin: 0;
  display: grid;
  gap: var(--sp-2);
}
.consent__box dt {
  font-weight: 700;
  color: var(--ink-800);
}
.consent__box dd {
  margin: 0 0 var(--sp-2);
}

.checkbox {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  margin-top: var(--sp-4);
  font-size: 0.92rem;
  line-height: 1.7;
  color: var(--ink-800);
  cursor: pointer;
}

.checkbox input {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  margin-top: 2px;
  accent-color: var(--green-600);
}

.form__note {
  font-size: 0.82rem;
  color: var(--ink-500);
  line-height: 1.8;
}

/* ---------- 상담 채널 카드 ---------- */
.channel {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-6);
  background: var(--surface-0);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  text-align: center;
  align-items: center;
}

.channel__icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--green-050);
  color: var(--green-600);
}

.channel__icon svg {
  width: 21px;
  height: 21px;
}

.channel__title {
  font-size: 1.04rem;
  letter-spacing: -0.025em;
}

.channel__desc {
  font-size: 0.82rem;
  color: var(--ink-600);
  line-height: 1.76;
  word-break: keep-all;
  overflow-wrap: break-word;
  text-wrap: pretty;
}

.channel__value {
  font-size: 1.14rem;
  font-weight: 800;
  color: var(--green-900);
  letter-spacing: -0.02em;
}

.channel__desc--reservation > span {
  display: block;
  white-space: nowrap;
}

/* ---------- Map ---------- */
.location-card {
  min-height: 320px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 36px 24px;
  text-align: center;
  border: 1px dashed #a6b89d;
  border-radius: var(--r-xl);
  background: var(--green-050);
  box-shadow: var(--shadow-sm);
}
.location-card__pin { width: 34px; height: 34px; color: var(--green-600); }
.location-card h3 { font-size: 1.15rem; }
.location-card p { font-size: .9rem; color: var(--ink-600); }
.location-card__button { margin-top: 6px; border-radius: var(--r-pill); background: white; }
.location-card__button svg { color: var(--green-600); }
.map-embed {
  aspect-ratio: 16 / 10;
  max-width: 100%;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--bg-tint);
  border: 1px solid var(--line);
}

.map-embed--naver { aspect-ratio: auto; }
.map-embed--naver .map-placeholder { min-height: 320px; }
.map-embed--naver .naver-map { width: 100%; height: 380px; }
.map-embed--naver [hidden] { display: none; }
.naver-map-link { margin-top: 12px; text-align: right; font-size: .875rem; color: var(--green-700); }
.naver-map-link a { text-decoration: underline; text-underline-offset: 4px; }
.map-embed iframe,
.map-embed:not(.map-embed--naver) img {
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: cover;
}

.map-placeholder {
  display: grid;
  place-items: center;
  gap: var(--sp-2);
  height: 100%;
  padding: var(--sp-6);
  text-align: center;
  color: var(--ink-600);
  font-size: var(--fs-sm);
  line-height: 1.8;
}

.map-placeholder strong {
  color: var(--green-900);
  font-size: 1rem;
}

/* ---------- Directions ---------- */
.direction-list {
  display: grid;
  gap: var(--sp-4);
}

.direction {
  display: grid;
  gap: var(--sp-2);
  padding: var(--sp-5);
  background: var(--surface-0);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
}

.direction__head {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  font-weight: 700;
  color: var(--green-900);
}

.direction__desc {
  font-size: 0.93rem;
  color: var(--ink-600);
  line-height: 1.84;
}

/* ---------- CTA band ---------- */
.cta-band {
  text-align: center;
}

.cta-band__title {
  font-size: var(--fs-h2);
}

.cta-band__lead {
  margin: var(--sp-4) auto 0;
  max-width: 50ch;
  line-height: 1.88;
}

.cta-band__actions {
  margin-top: var(--sp-8);
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  justify-content: center;
}

/* ---------- Conditions hub ---------- */
.hub-list {
  display: grid;
  gap: var(--sp-4);
}

@media (min-width: 800px) {
  .hub-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ---------- 후기 페이지: 필터 칩 ---------- */
.review-filter {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-bottom: var(--sp-8);
}

.review-filter button {
  min-height: 40px;
  padding: 0 var(--sp-5);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  background: var(--surface-0);
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--ink-600);
  transition: all var(--dur-fast) var(--ease);
}

.review-filter button[aria-pressed="true"] {
  background: var(--green-600);
  border-color: var(--green-600);
  color: #fff;
}

.review-grid {
  display: grid;
  gap: var(--sp-4);
}

@media (min-width: 700px) {
  .review-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 1040px) {
  .review-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.review[hidden] {
  display: none;
}

/* ==========================================================================
   상담 신청 위저드 (레퍼런스 /intake 방식)
   ========================================================================== */
.wizard {
  max-width: 640px;
  margin-inline: auto;
}

.wizard__head {
  margin-bottom: var(--sp-8);
}

.wizard__utilities { display: flex; justify-content: flex-end; margin-bottom: var(--sp-3); }
.wizard__utilities button { min-height: 44px; padding: 8px 4px; font: inherit; font-size: .82rem; color: var(--ink-600); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

.wizard__track {
  height: 4px;
  border-radius: var(--r-pill);
  background: var(--line);
  overflow: hidden;
}

.wizard__bar {
  height: 100%;
  width: 20%;
  border-radius: var(--r-pill);
  background: var(--green-600);
  transition: width 320ms var(--ease);
}

.wizard__count {
  display: block;
  margin-top: var(--sp-3);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--gold-600);
}

.wizard__step {
  animation: wz-in 300ms var(--ease);
}

@keyframes wz-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .wizard__step { animation: none; }
}

.wizard__q {
  font-size: clamp(1.25rem, 2.1vw, 1.6rem);
  line-height: 1.45;
  letter-spacing: -0.032em;
  color: var(--green-900);
}

.wizard__hint {
  margin-top: var(--sp-3);
  font-size: 0.92rem;
  line-height: 1.8;
  color: var(--ink-600);
}

.wizard__body {
  margin-top: var(--sp-6);
}

/* 큰 선택 카드 */
.choice-list {
  display: grid;
  gap: var(--sp-3);
}

.choice {
  position: relative;
  display: block;
}

.choice input {
  position: absolute;
  opacity: 0;
  inset: 0;
  cursor: pointer;
}

.choice span {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  min-height: 64px;
  padding: var(--sp-4) var(--sp-5);
  background: var(--surface-0);
  border: 1.5px solid var(--line-strong);
  border-radius: var(--r-md);
  font-size: 1.02rem;
  font-weight: 600;
  color: var(--ink-800);
  transition: all var(--dur-fast) var(--ease);
}

.choice span::before {
  content: "";
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1.5px solid var(--line-strong);
  transition: all var(--dur-fast) var(--ease);
}

.choice input:checked + span {
  border-color: var(--green-600);
  background: var(--green-050);
  color: var(--green-900);
}

.choice input:checked + span::before {
  border-color: var(--green-600);
  border-width: 6px;
}

.choice input:focus-visible + span {
  outline: 2px solid var(--green-600);
  outline-offset: 2px;
}

.choice small {
  display: block;
  margin-top: 2px;
  font-size: 0.81rem;
  font-weight: 500;
  color: var(--ink-500);
}

/* 위저드 버튼 영역 */
.wizard__nav {
  display: flex;
  gap: var(--sp-3);
  margin-top: var(--sp-8);
}

.wizard__nav .btn--primary,
.wizard__nav .btn--gold {
  flex: 1;
}

/* 완료 화면 */
.wizard__done {
  text-align: center;
  padding: var(--sp-8) var(--sp-4);
}

.wizard__done-icon {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  margin: 0 auto var(--sp-5);
  border-radius: 50%;
  background: var(--green-100);
  color: var(--green-600);
}
.wizard__done-icon svg {
  width: 30px;
  height: 30px;
}

/* 카카오톡 채널로 보내기 */
.kakao-guide {
  margin-top: var(--sp-5);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-sm);
  background: var(--gold-050);
  border: 1px solid var(--gold-100);
  font-size: 0.88rem;
  line-height: 1.7;
  color: var(--gold-700);
}
.kakao-steps {
  max-width: 440px;
  margin: var(--sp-5) auto 0;
  padding-left: 1.4em;
  list-style: decimal;
  text-align: left;
  font-size: 0.95rem;
  line-height: 1.8;
  color: var(--ink-600);
}
/* 붙여넣기 안내: 휴대폰은 길게 누르기, 마우스(PC)는 Ctrl+V */
.kakao-step--mouse { display: none; }
@media (hover: hover) and (pointer: fine) {
  .kakao-step--touch { display: none; }
  .kakao-step--mouse { display: list-item; }
}
.kakao-text {
  display: block;
  width: 100%;
  margin-top: var(--sp-5);
  text-align: left;
  font-size: 0.9rem;
  line-height: 1.6;
  resize: vertical;
}
.wizard__nav.kakao-actions {
  flex-wrap: wrap;
  margin-top: var(--sp-5);
}
.kakao-actions .btn {
  flex: 1 1 180px;
  justify-content: center;
}

/* 임시저장 안내 */
.wizard__saved {
  margin-top: var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-sm);
  background: var(--gold-050);
  border: 1px solid var(--gold-100);
  font-size: 0.82rem;
  color: var(--gold-700);
}

/* 상담 채널 3분할 */
.channel-row {
  display: grid;
  gap: var(--sp-3);
}

@media (min-width: 700px) {
  .channel-row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Consultation alternatives (문진표 카드는 2026-10-28 삭제). */
.consult-channels { max-width: 960px; margin: var(--sp-10) auto 0; }
.channel--intake { background: var(--gold-050); border-color: var(--gold-100); }
.channel--intake .channel__title { font-weight: 700; color: var(--green-900); word-break: keep-all; }
.channel--intake .channel__icon { color: var(--gold-700); background: var(--surface-0); }
.channel__action { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; margin-top: auto; color: var(--green-600); font-weight: 700; font-size: .88rem; }
/* 마우스를 올리면 글자가 살짝 떠오르는 입체 효과 */
.channel__action,
.channel a.channel__value,
a.channel .channel__value {
  transition: transform .18s ease, text-shadow .18s ease, color .18s ease;
}
.channel__action:hover,
.channel__action:focus-visible,
a.channel:hover .channel__value,
a.channel:focus-visible .channel__value {
  transform: translateY(-2px);
  text-shadow: 0 3px 6px rgba(31, 61, 42, .28);
}
.channel__action > span[aria-hidden] {
  transition: transform .18s ease;
}
.channel__action:hover > span[aria-hidden],
.channel__action:focus-visible > span[aria-hidden] {
  transform: translateX(3px);
}

@media (prefers-reduced-motion: reduce) {
  .channel__action,
  .channel a.channel__value,
  a.channel .channel__value,
  .channel__action > span[aria-hidden] { transition: none; }
  .channel__action:hover,
  .channel__action:focus-visible,
  a.channel:hover .channel__value,
  a.channel:focus-visible .channel__value { transform: none; }
}
@media (min-width: 700px) {
  .channel-row--with-intake { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1000px) {
  .channel-row--with-intake { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.home-notices__heading { display: flex; justify-content: space-between; align-items: end; flex-wrap: wrap; gap: 20px; margin-bottom: 28px; }
.home-notices__heading h2 { margin-top: 10px; }
.home-notices__list { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--green-600); }
.home-notices__list li { border-bottom: 1px solid var(--line); }
.home-notices__list a { display: grid; grid-template-columns: 64px minmax(0, 1fr) 96px 20px; align-items: center; gap: 20px; padding: 24px 10px; }
.home-notices__list a:hover { background: var(--gold-050); }
.home-notices__tag { color: var(--gold-700); font-size: .8rem; }
.home-notices__list strong { color: var(--ink-900); font-size: 1rem; }
.home-notices__list time { color: var(--ink-500); font-size: .8rem; font-variant-numeric: tabular-nums; }
@media (max-width: 599px) {
  .home-notices__list a { grid-template-columns: minmax(0, 1fr) 20px; gap: 6px 12px; }
  .home-notices__tag, .home-notices__list strong, .home-notices__list time { grid-column: 1; }
  .home-notices__arrow { grid-column: 2; grid-row: 1 / 4; }
}

/* [hidden] 이 flex/grid 자식에서 무시되지 않도록 (위저드 버튼·단계) */
.wizard [hidden],
.wizard__nav [hidden] {
  display: none !important;
}

/* Preserve the director portrait's complete original frame. */
.doctor-card__photo img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}