@charset "UTF-8";

/* ==========================================================================
   ABOUT 청담이엘 (병원소개 intro.html / 의료진소개 medical.html) 전용 스타일시트
   ========================================================================== */


/* --------------------------------------------------------------------------
   0. 히어로 (.about-hero) — ABOUT 계열 페이지 공통
   -------------------------------------------------------------------------- */
.about-hero{position: relative; overflow: hidden;}
.about-hero__media{position: relative; width: 100%; aspect-ratio: 1920 / 1000; overflow: hidden; background: var(--color-bg-soft);}
.about-hero__media img{width: 100%; height: 100%; object-fit: cover; display: block;}
/* 유튜브 배경 영상: 16:9 영상을 박스에 꽉 차게(cover) — 사진 위에 깔림, 클릭 안 됨 */
.about-hero__media:has(.sub-hero__video){container-type: size;}
.about-hero__media .sub-hero__video{position: absolute; top: 50%; left: 50%; width: max(100cqw, 177.78cqh); height: max(100cqh, 56.25cqw); transform: translate(-50%, -50%); border: 0; pointer-events: none;}
.about-hero__inner{position: absolute; top: 50%; right: 0; left: 0; transform: translateY(-50%); text-align: center; display: flex; flex-direction: column; align-items: center; gap: 3.2rem;}
.about-hero__title{font-size: clamp(3.6rem, 2.6vw + 2.2rem, 6rem); color: var(--white);text-shadow: 0 0 49px rgba(0, 0, 0, 0.64);}
.about-hero__title > span{display: block; font-weight: 100;} /* 제목 위 작은 글씨만 (h2 안의 PC/모바일 span 은 제외) */
.about-hero__title h2{font-size: clamp(3.6rem, 2.6vw + 2.2rem, 6rem);}
.about-hero__desc{font-size: 2.4rem; font-weight: 500; color: var(--white); line-height: 1.6;}
.about-hero__desc span{font-family: "Highsummit", serif; display: block; }
.about-hero__inner .dash{width: 0.1rem; height: 6.8rem; background: var(--white); }
.about-hero__tag{display: flex; align-items: center; gap: 2rem; font-size: 1.5rem; font-weight: 500; color: var(--white);margin-top: 2rem;}

.about-hero__wordmark{width: 100%; font-family: "Philosopher", serif; font-weight: 400; font-size: clamp(8rem, 6vw + 3rem, 11.2rem); color: var(--white); position: absolute; bottom: -3.5rem; left: 50%; transform: translateX(-50%); text-align: center;}
.medical .about-hero__wordmark{color: rgba(255,255,255,.11);}
.location .about-hero__wordmark{color: rgba(255,255,255,.20);}
.equipment .about-hero__wordmark{color: rgba(255,255,255,.20);}

/* --------------------------------------------------------------------------
   1. 청담이엘, 이름에 철학을 담다 (.about-identity) — intro 전용
   -------------------------------------------------------------------------- */
.about-identity{padding: 19rem 0 20rem;}
.about-identity__grid{display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.7rem; margin-top: 6rem;}
/* 커튼 리빌: 아래에서 위로 드러나며 사진 줌아웃 (AOS .aos-animate 트리거) */
.about-identity__item{position: relative; aspect-ratio: 700 / 801; overflow: hidden; clip-path: inset(100% 0 0 0); transition: clip-path 1.1s cubic-bezier(0.16, 1, 0.3, 1);}
.about-identity__item.aos-animate{clip-path: inset(0 0 0 0);}
.about-identity__item img{width: 100%; height: 100%; object-fit: cover; display: block; transform: scale(1.15); transition: transform 1.4s cubic-bezier(0.16, 1, 0.3, 1);}
.about-identity__item.aos-animate img{transform: scale(1);}
/* reduced-motion: AOS가 꺼지므로 최종 상태로 고정 */
@media (prefers-reduced-motion: reduce) {
  .about-identity__item{clip-path: none; transition: none;}
  .about-identity__item img{transform: none; transition: none;}
}
.about-identity__caption{position: absolute; left: 0; bottom: 0; width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--white);}
.about-identity__caption strong{display: block; font-size: 4rem; font-family: 'Philosopher', serif; text-shadow: 0.6rem 0 1.8rem rgba(0, 0, 0, 0.47);}
.about-identity__caption span{display: block; margin-top: 0.4rem; font-size: 2.2rem; font-weight: 500; }
.about-identity__note{margin-top: 8rem; text-align: center; color: var(--black)}
.about-identity__note b{display: block; font-size: 3.2rem; font-weight: 600;}
.about-identity__note p{margin-top: 2.6rem; font-size: 2.2rem; font-weight: 500; color: var(--color-muted-sub); line-height: 1.5;}

/* --------------------------------------------------------------------------
   2. 청담이엘은 왜 이런 이름을 갖게 됐을까요 (.about-portrait) — intro 전용
   -------------------------------------------------------------------------- */
.about-portrait{position: relative;}
.about-portrait__media{width: 100%; aspect-ratio: 48 / 25; overflow: hidden; background: var(--color-bg-soft);}
/* 켄번즈 줌: 확대 상태에서 제 크기로 (data-aos="media-reveal" 트리거) */
.about-portrait__media img{width: 100%; height: 100%; object-fit: cover; display: block; transform: scale(1.08); transition: transform 1.4s cubic-bezier(0.16, 1, 0.3, 1);}
.about-portrait__media.aos-animate img{transform: scale(1);}
/* reduced-motion: AOS가 꺼지므로 최종 상태로 고정 */
@media (prefers-reduced-motion: reduce) {
  .about-portrait__media img{transform: none; transition: none;}
}
.about-portrait__overlay{position: absolute;inset: 0;display: flex;justify-content: space-between;align-items: center;padding: 16rem 4rem;box-sizing: border-box;}
.about-portrait__intro{max-width: 40rem;  width: 100%; margin-top: 16rem;}
.about-portrait__desc{font-size: 2.2rem; font-weight: 500; color: var(--black); line-height: 1.5; word-break: keep-all;}
.about-portrait__callout{margin-top: 3.3rem; font-size: 3.2rem; font-weight: 600; color: var(--black); line-height: 1.5; word-break: keep-all;}
.about-portrait__note{align-self: flex-end;display: flex;flex-direction: column;max-width: 40rem;  width: 100%;}
.about-portrait__dash{display: inline-block; width: 6.8rem; height: 1px; background: var(--black); margin-bottom: 1.6rem;}
.about-portrait__note p{font-size: 2.4rem; font-weight: 500; color: var(--black); line-height: 1.5; word-break: keep-all;}


/* --------------------------------------------------------------------------
   3. 이미지 2단 + 텍스트 (.about-values) — intro/medical 공통, 텍스트 스타일만 페이지별로 다름
   -------------------------------------------------------------------------- */
.about-values{padding: 20rem 0; }
/* 사진/설명을 grid-template-areas로 배치 — 모바일은 area만 재정의 */
.about-values__grid{display: grid; grid-template-columns: 3fr 2fr; grid-template-areas: "m1 m2" "d1 d2"; gap: 2rem; margin-top: 5rem; text-align: left;}
.about-values__media{height: clamp(40rem, 30vw + 15rem, 55rem); overflow: hidden; background: var(--color-bg-soft);}
.about-values__media img{width: 100%; height: 100%; object-fit: cover; display: block;}
.about-values__media--1{grid-area: m1;}
.about-values__media--2{grid-area: m2;}
.about-values__desc--1{grid-area: d1;}
.about-values__desc--2{grid-area: d2;}

/* intro: 1번(왼쪽)은 짧고 굵은 한 줄 카피(중앙정렬), 2번(오른쪽)은 세로선+들여쓰기 붙은 본문 */
.about-values__desc--1{font-size: 3.2rem; font-weight: 400; color: var(--black); margin: 6rem auto 0; width: max-content;}
.about-values__desc--1 b{font-weight: 600;}
.about-values__desc--2{font-size: 2.2rem; font-weight: 500; color: var(--color-muted-sub); line-height: 1.5; margin-top: 6rem; padding-left: 4rem; border-left: 1px solid var(--color-text);}
.about-values__desc--2 p + p {margin-top: 3rem;}

/* medical: 1번(왼쪽) 본문, 2번(오른쪽) 한 줄 카피 */
.medical .about-values{padding: 15rem 0; background: #fafafa; margin-top: 9rem;}
.medical .about-values__desc--1{ margin: 6rem auto 0; width: max-content; text-align: left; font-weight: 400;}
.medical .about-values__desc--1 b{font-weight: 600;}
.medical .about-values__span{display: block; margin-top: 3.5rem; font-size: 2.2rem; font-weight: 500; color: var(--color-muted-sub); line-height: 1.5;}
.medical .about-values__desc--2{margin-top: 6rem; padding: 4rem; font-size: 3.2rem; font-weight: 600; color: var(--black); line-height: 1.5;}

/* --------------------------------------------------------------------------
   4. 청담이엘의 진료 원칙 (.about-principles) — intro 전용, .principle-list 감싸는 섹션
   -------------------------------------------------------------------------- */
.about-principles{padding-bottom: 23rem;}
.about-principles .section-title{padding-top: 14rem; border-top: 1px solid #b2b2b2; text-align: center;}

/* --------------------------------------------------------------------------
   5. 병원 사이니지 배너 (.about-signage) — intro 전용
   -------------------------------------------------------------------------- */
.about-signage{width: 100%; aspect-ratio: 1920 / 970; overflow: hidden; position: relative;}
.about-signage img{width: 100%; height: 100%; object-fit: cover; display: block;}
.about-signage p{position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: var(--white); font-family: "Philosopher", serif; width: 100%; text-align: center; font-size: 4.4rem; text-shadow: 0 0 1.6rem rgba(0,0,0,.26);}

/* --------------------------------------------------------------------------
   6. 병원 둘러보기 (.about-tour) — intro 전용
   -------------------------------------------------------------------------- */
.about-tour{padding: 17rem 0; background: #fbfbfc;}
/* 메인 치료공간 '더 알아보기'(#about-tour) — 고정 헤더에 가리지 않게 (제목은 등장 효과로 움직여서 섹션에 건다) */
#about-tour{scroll-margin-top: var(--header-h);}
.about-tour__heading{margin-top: 0.6rem; display: flex; align-items: flex-end; justify-content: space-between; gap: 3rem; flex-wrap: wrap;}
.about-tour .section-description{font-size: 2.2rem; margin-top: 0; font-weight: 400;}
.about-tour__panel{margin-top: 4rem;}
/* 데스크톱 전용 간격 — 모바일 스와이퍼 spaceBetween과 중복 방지 */
@media (min-width: 1025px) {
  .about-tour__right .tab-pills.swiper .swiper-wrapper{gap: 2rem !important;}
}
.about-tour-swiper{position: relative; width: 100%; aspect-ratio: 71 / 34; overflow: hidden; background: var(--color-bg-soft);}
.about-tour-swiper .swiper-slide{width: 100%; height: 100%;}
.about-tour-swiper picture,
.about-tour-swiper img{width: 100%; height: 100%; object-fit: cover; display: block;}
.about-tour-controls{position: absolute; left: 50%; bottom: 5rem; transform: translateX(-50%); z-index: 2;}

/* --------------------------------------------------------------------------
   7. 원장 프로필 카드 (.doctor-card) — medical 전용
   -------------------------------------------------------------------------- */
.doctor-intro { padding: 10rem 0 19rem; }
.doctor-card { position: relative; display: flex; align-items: flex-end; gap: clamp(6rem, 8.33vw, 16rem); }
.doctor-card__photo { position: relative; flex: 0 1 55.8rem; min-width: 45rem; aspect-ratio: 31 / 46; margin-left: 6.6rem; }
.doctor-card::before { content: 'Dr. Byungchul Kim'; font-family: "Highsummit", serif; font-size: clamp(5.5rem, 4.27vw, 8.2rem); color: rgb(119 119 119 / 0.11); letter-spacing: -0.09rem; position: absolute; bottom: 0; left: 0; }
.doctor-card__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.doctor-card__caption { position: absolute; right: -7rem; bottom: 3.5rem; font-size: 2.5rem; font-weight: 500; color: var(--black); }
.doctor-card__caption strong { font-size: 3.5rem; font-weight: 700; }
.doctor-card__caption span { display: block; margin-top: 0.4rem; font-size: 2.2rem; font-weight: 400; color: var(--black); }
.doctor-card__body { flex: 1; }
.doctor-card__name { display: flex; align-items: center; flex-wrap: wrap; gap: 2.6rem; padding: 4rem 0; border-top: 1px solid var(--black); border-bottom: 1px solid var(--black); }
.doctor-card__badge { flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; aspect-ratio: 1 / 1; width: 7.1rem; }
.doctor-card__txt { display: flex; align-items: flex-end; gap: 1.5rem; }
.doctor-card__name-text { font-size: clamp(3.6rem, 2.6vw, 5rem); font-weight: 700; color: var(--black); }
.doctor-card__role { font-size: 3rem; font-weight: 500; color: var(--color-muted-sub); }
.doctor-card__info { display: flex; flex-direction: column; }
.doctor-card__row { display: flex; align-items: center; padding: 4.1rem 0; border-bottom: 1px solid #d1d1d1; }
.doctor-card__row:last-child { border-color: var(--black); }
.doctor-card__row dt { flex: 0 0 15rem; font-size: 2.4rem; font-weight: 600; color: var(--black); text-align: center; }
.doctor-card__row dd { position: relative; font-size: 1.8rem; color: var(--color-muted-sub); line-height: 1.7; padding-left: 3rem; letter-spacing: -0.05rem;}
.doctor-card__row dd::before { content: ''; display: block; width: 0.1rem; height: 90%; border-left: 1px solid #d1d1d1; position: absolute; top: 50%; transform: translateY(-50%); left: 0; }

/* 논문 / 저서 */
.doctor-papers{position: relative; margin-top: 7rem; width: 100%;}
.doctor-papers__title{font-size: 2.4rem; font-weight: 600; color: var(--black); margin-bottom: 2rem;}
.doctor-papers-swiper{width: 100%; overflow: hidden;}
.doctor-papers-swiper .swiper-wrapper{align-items: stretch;}
.doctor-papers__card{box-sizing: border-box; height: auto; display: flex; flex-direction: column; gap: 1rem; padding: 3rem 3.8rem; background: #f5f5f5;}
.doctor-papers__card.swiper-slide-active{background: linear-gradient(135deg, rgb(129 216 208/ 0.7) 0%, rgb(129 216 208 / 0) 45%), #006573;}
.doctor-papers__tag{display: flex; align-items: center; justify-content: center; width: max-content; padding: 0 1.2rem; height: 3rem; border: 1px solid #a1c6cb; border-radius: 999px; font-size: 1.4rem; font-weight: 500; color: var(--color-primary);}
.doctor-papers__card.swiper-slide-active .doctor-papers__tag{border-color: #fbfbfb; color: var(--white);}
.doctor-papers__desc{font-size: 1.4rem; font-weight: 300; line-height: 1.4; color: #7f7f7f;}
.doctor-papers__card.swiper-slide-active .doctor-papers__desc{color: var(--white);}
.doctor-papers .swiper-button-prev,
.doctor-papers .swiper-button-next{position: absolute; top: calc(50% + 1.2rem); margin-top: 0; transform: translateY(-50%); z-index: 2;}
/* 화살표는 컨테이너 바깥 여백에, 여백이 좁으면 안쪽으로 당김 */
.doctor-papers .swiper-button-prev{left: calc(-1 * min(6rem, (100vw - 100%) / 2 - 1rem));}
.doctor-papers .swiper-button-next{right: calc(-1 * min(6rem, (100vw - 100%) / 2 - 1rem));}

/* --------------------------------------------------------------------------
   8. 왜 피부과 의사가 되었을까요 (.doctor-statement) — medical 전용
   -------------------------------------------------------------------------- */
.doctor-statement{position: relative;}
.doctor-statement__media{width: 100%; height: 108rem; aspect-ratio: 192 / 108; overflow: hidden; background: var(--color-bg-soft);}
.doctor-statement__media img{width: 100%; height: 100%; object-fit: cover; display: block;}
.doctor-statement__overlay{position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
.doctor-statement__overlay .doctor-card__badge{display: inline-flex; width: 5.7rem; margin-bottom: 2.4rem;}
.doctor-statement__title{font-size: 6rem; font-weight: 300; color: var(--black);}
.doctor-statement__title b{font-weight: 500;}
.doctor-statement__quote{margin:1rem 0 2rem; font-size: 3.2rem; font-weight: 600; color: var(--black); line-height: 1.5; letter-spacing: -0.05rem;}
.doctor-statement__desc{font-size: 2.2rem; font-weight: 500; color: #7c7464; line-height: 1.5;}
.doctor-statement__desc p + p{margin-top: 2rem;}
/* --------------------------------------------------------------------------
   8-1. 진료 철학 (.doctor-philosophy) — medical 전용
   -------------------------------------------------------------------------- */
.doctor-philosophy{padding: 10rem 0 0; text-align: center;}
.doctor-philosophy__quote{font-size: 3.2rem; font-weight: 600; color: var(--black); line-height: 1.4;}
.doctor-philosophy__mark img{margin: 0.8rem; width: 1.8rem;}
.doctor-philosophy__desc{margin-top: 3.3rem; font-size: 2.2rem; font-weight: 500; color: var(--color-muted-sub); line-height: 1.5;}
.doctor-philosophy__divider{display: inline-block; width: 1px; height: 16.5rem; margin-top: 7.3rem; background: var(--black);}

/* --------------------------------------------------------------------------
   11. 의사로서 가장 기억에 남는 순간 (.doctor-memory) — medical 전용
   -------------------------------------------------------------------------- */
.doctor-memory{position: relative; padding: 30.9rem 0 29rem; overflow: hidden;}
.doctor-memory__media{position: absolute; inset: 0; z-index: 0;}
.doctor-memory__media img{width: 100%; height: 100%; object-fit: cover; display: block;}
.doctor-memory__inner{position: relative; z-index: 1; color: var(--black);}
.doctor-memory__desc{font-size: 1.7rem; font-weight: 400; line-height: 1.9;}
.doctor-memory__quote{position: relative; margin: 8.4rem 0 2.5rem; padding-top: 3.2rem; font-size: 2.8rem; font-weight: 600; line-height: 1.4;}
.doctor-memory__quote::before{content: ''; display: block; width: 7.6rem; height: 1px; background: var(--black); position: absolute; top: 0; left: 0;}
.doctor-memory__desc{font-size: 2.2rem; font-weight: 500; color: #554f45; line-height: 1.5;}

/* --------------------------------------------------------------------------
   11-1. 치료 경험 이야기 (.doctor-episode) — medical 전용, .doctor-memory 이어지는 스토리
   -------------------------------------------------------------------------- */
.doctor-episode{padding: 15rem 0 25rem;}
.doctor-episode__list{display: flex; flex-direction: column; gap: 4rem;}
.doctor-episode__item{display: flex; align-items: center; gap: 10rem; }
.doctor-episode__item--reverse{flex-direction: row-reverse;}
.doctor-episode__media{flex: 1; max-width: 70rem; aspect-ratio: 700 / 801; overflow: hidden; background: var(--color-bg-soft);}
.doctor-episode__media img{width: 100%; height: 100%; object-fit: cover; display: block;}
.doctor-episode__body{font-size: 2.2rem; font-weight: 500; color: var(--color-text); line-height: 1.5;}
.doctor-episode__body p + p{margin-top: 4rem;}
.doctor-episode__lead{font-size: 3.2rem; font-weight: 600; color: var(--black); line-height: 1.4;}
.doctor-episode__body--right{text-align: right;}
.doctor-episode__quote{margin: 1rem 0 4rem; font-size: 3.8rem; font-weight: 700; color: var(--black); line-height: 1.5;}

/* --------------------------------------------------------------------------
   12. 클로징 배너 (.doctor-closing) — medical 전용, 이미지 위 카피+뱃지
   -------------------------------------------------------------------------- */
.doctor-closing{position: relative; width: 100%; aspect-ratio: 48 / 13; overflow: hidden;}
.doctor-closing img{width: 100%; height: 100%; object-fit: cover; display: block;}
.doctor-closing__overlay{position: absolute; inset: 0; z-index: 1; box-sizing: border-box; display: flex; align-items: center; justify-content: center; padding: 0 12%;}
.doctor-closing__content{text-align: center; color: var(--white);}
.doctor-closing__eyebrow{font-size: 2.1rem; font-weight: 300; }
.doctor-closing__quote{margin: 2rem 0 2.7rem; font-size: 3.4rem; font-weight: 400; line-height: 1.2;}
.doctor-closing__quote b{font-weight: 600;}
.doctor-closing__badge{display: inline-block; width: 5rem;}

/* --------------------------------------------------------------------------
   14. 이미지+텍스트 번갈아 배치되는 원칙/기준 리스트 (.principle-list) — intro/medical 공통
   -------------------------------------------------------------------------- */
.principle-swiper{width: 100%;}
.principle-list{list-style: none; padding: 0; margin: 6rem auto 0; display: flex; flex-direction: column; gap: 7rem;}
.principle-list__item{display: flex; align-items: flex-end; gap: 6.5rem;}
.principle-list__item--reverse{flex-direction: row-reverse;}
.principle-list__media{flex: 580 1 0; aspect-ratio: 58 / 55; overflow: hidden; background: var(--color-bg-soft);}
.principle-list__media img{width: 100%; height: 100%; object-fit: cover; display: block;}
.principle-list__body{flex: 535 1 0;}
.principle-list__num{display: block; font-family: "Philosopher", serif; font-size: 3rem; font-weight: 700; color: #d7d7d7;}
.principle-list__title{display: flex; align-items: center; justify-content: space-between; padding-bottom: 2.5rem; border-bottom: 1px solid var(--black);}
.principle-list__title h3{font-size: 3.5rem; font-weight: 700; }
.principle-list__desc{margin-top: 2.7rem; font-size: 2.2rem; font-weight: 500; color: rgb(60 60 60 / 0.7); line-height: 1.5;}

/* --------------------------------------------------------------------------
   15. 진료시간 안내 (.clinic-hours) — location 전용
   -------------------------------------------------------------------------- */
.clinic-hours{position: relative; display: flex; overflow: hidden; background: url("../images/sub/about/location_hours_bg.webp") no-repeat center center/cover;}
.clinic-hours__body{position: relative; z-index: 1; width: min(100%, 70rem); margin-left: auto; display: flex; flex-direction: column; justify-content: center; padding: 22rem 0 20rem; box-sizing: border-box;}
.clinic-hours__desc{margin-top: 1.2rem; font-size: 3rem; color: var(--color-muted-sub);}
.clinic-hours__list{margin-top: 4rem; padding: 3.4rem 0; border-top: 1px solid rgb(0 0 0 / 0.34);}
.clinic-hours__list + .clinic-hours__list{margin-top: 0; padding: 5rem 0; border-bottom: 1px solid rgb(0 0 0 / 0.34);}
.clinic-hours__item{display: flex; align-items: baseline; gap: 3rem;}
.clinic-hours__item > dt{flex: 0 0 12rem; font-size: 2.6rem; font-weight: 700; color: #757575;}
.clinic-hours__phone{font-size: 4.2rem; font-weight: 700; color: var(--black);}
.clinic-hours__phone a{color: inherit;}
.clinic-hours__table{display: flex; flex-direction: column; gap: 1.4rem;}
.clinic-hours__row{display: flex; align-items: baseline; gap: 2rem;}
.clinic-hours__row > dt{flex: 0 0 17rem; font-size: 2.4rem; font-weight: 500; color: var(--black);}
.clinic-hours__row > dd{font-size: 2.6rem; font-weight: 500; color: rgba(0,0,0,.8); line-height: 1.6;}
.clinic-hours__row > dd .time-period{font-size: 2rem;}
.clinic-hours__note{margin-left: 0.6rem; font-size: 1.4rem; font-weight: 400; color: rgb(70 70 70 / 0.8);}
.clinic-hours__row:last-child > dd{font-size: 2rem; }
.clinic-hours__wordmark{position: absolute; z-index: 0; right: 0; bottom: 0.5rem; font-family: "Highsummit", serif; font-weight: 400; font-size: 10.9rem; color: rgb(119 119 119 / 0.08); white-space: nowrap; pointer-events: none;}

/* --------------------------------------------------------------------------
   16. 오시는 길 (.clinic-directions) — location 전용
   -------------------------------------------------------------------------- */
.clinic-directions{padding: 14.5rem 0 15rem;}
.clinic-directions__heading{display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; flex-wrap: wrap;}
.clinic-directions__address{margin-top: 2.3rem; font-size: 2.6rem; font-weight: 400; color: #636363;}
.clinic-directions__map-links{display: flex; gap: 1.1rem;}
.clinic-directions__map-btn{height: 5.6rem; padding: 0 4.3rem; font-weight: 500;}
.clinic-directions__map-icon{display: inline-flex; align-items: center; justify-content: center; height: 2.4rem; width: auto; flex-shrink: 0;}
.clinic-directions__map-icon img{width: 100%; height: 100%; display: block;}
.clinic-directions__map{margin: 3rem auto 0; width: calc(100% - 8rem); max-width: calc(var(--container) - 8rem); aspect-ratio: 192 / 79; overflow: hidden; border: 1px solid #a7a7a7; height: 57rem;}
.clinic-directions__info{display: flex; padding: 4rem 0;}
.clinic-directions__info-item{flex: 1; display: flex; align-items: center; gap: 1.6rem;}
.clinic-directions__info-item + .clinic-directions__info-item{padding-left: 4.5rem; border-left: 1px solid rgba(0,0,0,.34);}
.clinic-directions__info-icon{flex-shrink: 0; width: 3.6rem; height: 3.6rem; color: var(--color-text);}
.ico_car{width: 6.7rem; height: 5.9rem;}
.ico_subway,
.ico_bus{width: 5.8rem; height: 6.9rem;}
.clinic-directions__info-icon img{width: 100%; height: 100%; object-fit: cover; display: block;}
.clinic-directions__info-body h3{font-size: 2.8rem; font-weight: 600; color: var(--color-text); margin-bottom: 0.5rem;}
.clinic-directions__info-body p{font-size: 2rem; font-weight: 400; color: var(--color-text); line-height: 1.6;}
.clinic-directions__bus{display: flex; align-items: flex-start; gap: 1.6rem; padding: 3rem 0; border-top: 1px solid rgba(0,0,0,.34); border-bottom: 1px solid rgba(0,0,0,.34);}
.clinic-directions__badge{display: inline-flex; align-items: center; justify-content: center; min-width: 2.8rem; height: 2.8rem; border-radius: 999px; font-size: 1.7rem; font-weight: 800; color: var(--white); margin: 0 0.8rem 0 0.4rem;}
.clinic-directions__badge--parking{width: 2.8rem; margin-left: 0; background: var(--color-text);}
.clinic-directions__badge--line7{margin-left: 0; background: #6f7d1c;}

/* 노선 뱃지(수인분당/간선/직행/지선) — 색만 다르고 크기·여백은 공통 */
.clinic-directions__badge--suin,
.clinic-directions__badge--trunk,
.clinic-directions__badge--direct,
.clinic-directions__badge--branch{height: 3.3rem; padding: 0 1.1rem; font-weight: 600; font-size: 1.6rem;}
.clinic-directions__badge--suin{background: #ffca44;}
.clinic-directions__badge--trunk{background: #306ecf;}
.clinic-directions__badge--direct{background: #dd112e;}
.clinic-directions__badge--branch{background: #51b070;}
.clinic-directions__badge-list{display: flex; flex-wrap: wrap; align-items: center; gap: 1.6rem; list-style: none; margin: 0; padding: 0; font-size: 2rem; font-weight: 400; color: var(--color-text);}
.clinic-directions__badge-list li{display: flex; align-items: center; gap: 0.8rem;}
.clinic-directions__badge-list .clinic-directions__badge{margin: 0;}
.clinic-directions__bus-note{font-weight: 500; color: #006573; font-size: 2rem;}

/* --------------------------------------------------------------------------
   17. 장비 목록 (.equipment-section) — equipment 전용
   -------------------------------------------------------------------------- */
.equipment-section{padding: 11rem 0 18rem;}
.equipment-grid{list-style: none; margin: 7rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem;}
.equipment-empty{margin-top: 7rem; padding: 6rem 0; text-align: center; font-size: 1.8rem; color: var(--color-muted-sub);}
.equipment-card{position: relative; box-sizing: border-box; height: 45rem; display: flex; flex-direction: column;padding: clamp(3rem, 3.5vw, 6.7rem) 1rem; background: #f8f8f6; text-align: center; overflow: hidden; transition: background 0.3s ease, padding-top 0.3s ease;}
.equipment-card[hidden]{display: none;}
.equipment-card__category{flex: none; align-self: center; padding: 0.4rem 1.6rem; border: 1px solid #9ec5cc; border-radius: 9999px; font-size: 1.4rem; font-weight: 500; color: var(--color-primary); transition: color 0.3s ease, border-color 0.3s ease, background 0.3s ease;}
.equipment-card__origin{flex: none; margin-top: 1.6rem; font-size: 1.6rem; font-weight: 700; color: var(--color-text); transition: color 0.3s ease;}
.equipment-card__name{flex: none; font-size: 2.2rem; font-weight: 400; color: var(--color-primary); margin-top: 0.5rem; transition: color 0.3s ease;}
.equipment-card__desc{flex: none; max-height: 0; margin-top: 0; opacity: 0; overflow: hidden; font-size: 1.4rem; font-weight: 500; line-height: 1.4; color: var(--white); transition: max-height 0.3s ease, opacity 0.3s ease, margin-top 0.3s ease;}
/* flex 자식은 max-height:100%가 불안정해 absolute + inset으로 박스 확정 */
.equipment-card__media{flex: 1 1 auto; width: 100%; height: 28rem; min-height: 0; position: absolute; left:0; bottom: 0; transition: bottom 0.3s ease;}
.equipment-card__media img{position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; display: block; transition: inset 0.3s ease, width 0.3s ease;}
.equipment-card__tags{position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; margin: 0; padding: 1.4rem 5rem; min-height: 7rem; background: rgb(0 0 0 / 0.65); font-size: 1.4rem; font-weight: 300; color: var(--white); display: flex; align-items: center; align-content: center; justify-content: center; flex-wrap: wrap; gap: 0.7rem; opacity: 0; transition: opacity 0.3s ease;}
.equipment-card__tags span{display: inline-block;}
/* 터치 기기용 닫기 버튼 — 탭으로 고정된(is-active) 카드에서만 노출 */
.equipment-card__close{position: absolute; top: 1.6rem; right: 1.6rem; z-index: 2; width: 2.4rem; height: 2.4rem; padding: 0; border: none; background: transparent; cursor: pointer; opacity: 0; pointer-events: none; transition: opacity 0.3s ease; text-indent: -9999px;}
.equipment-card__close::before,
.equipment-card__close::after{content: ''; position: absolute; top: 50%; left: 50%; width: 1.6rem; height: 2px; background-color: var(--white);}
.equipment-card__close::before{transform: translate(-50%, -50%) rotate(45deg);}
.equipment-card__close::after{transform: translate(-50%, -50%) rotate(-45deg);}
.equipment-card.is-active .equipment-card__close{opacity: 1; pointer-events: auto;}

.equipment-card.is-active{background: linear-gradient(135deg, rgb(129 216 208) 0%, rgb(129 216 208 / 0) 55%), #006573; cursor: pointer; padding-bottom: 0; padding-top: clamp(2rem, 2.5vw, 4.7rem);}
.equipment-card.is-active .equipment-card__origin,
.equipment-card.is-active .equipment-card__name{color: var(--white);}
.equipment-card.is-active .equipment-card__name{font-weight: 700;}
.equipment-card.is-active .equipment-card__category{border-color: var(--white); background: transparent; color: var(--white);}
.equipment-card.is-active .equipment-card__tags{opacity: 1;}
.equipment-card.is-active .equipment-card__desc{max-height: 20rem; margin-top: 1.2rem; opacity: 1;}

.equipment-card.is-active .equipment-card__media{bottom: -8rem;}
.equipment-card.is-active .equipment-card__media img{width: 95%; height: 100%; margin: 0 auto;}

/* hover는 마우스 기기에서만 (모바일은 탭 .is-active) */
@media (min-width: 1025px) {
  .equipment-card:hover{background: linear-gradient(135deg, rgb(129 216 208) 0%, rgb(129 216 208 / 0) 55%), #006573; cursor: pointer; padding-bottom: 0; padding-top: clamp(2rem, 2.5vw, 4.7rem);}
  .equipment-card:hover .equipment-card__origin,
  .equipment-card:hover .equipment-card__name{color: var(--white);}
  .equipment-card:hover .equipment-card__name{font-weight: 700;}
  .equipment-card:hover .equipment-card__category{border-color: var(--white); background: transparent; color: var(--white);}
  .equipment-card:hover .equipment-card__tags{opacity: 1;}
  .equipment-card:hover .equipment-card__desc{max-height: 20rem; margin-top: 1.2rem; opacity: 1;}
  .equipment-card:hover .equipment-card__media{bottom: -8rem;}
  .equipment-card:hover .equipment-card__media img{width: 95%; height: 100%; margin: 0 auto;}
}

@media (max-width: 1280px) {
  /*의료진소개 - 닥터*/
  .doctor-card{gap: 5rem; }
  .doctor-card__photo{flex: 0 1 45rem;margin-left: 0;}
  .doctor-card__name{gap: 1.6rem;}
  .doctor-card__badge{width: 5rem;}
  /* 의료진소개 - 왜 의사가 되었을까요 */
  .doctor-statement__title{font-size: 5.5rem; line-height: 1.3;}

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

}

/* --------------------------------------------------------------------------
   반응형 (1024px / 768px 이하)
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .about-hero__media{aspect-ratio: 16 / 25;}
  .about-hero__inner{top: 12%; transform: translateY(-11%);}
  .about-hero__wordmark{font-size: clamp(4.5rem, 9vw, 9rem);width: max-content; bottom: -0.5rem;}

  .location .about-hero__inner,
  .equipment .about-hero__inner{top: 25%;}


  /* 사진 2장을 먼저 위로, 텍스트 2블록은 전부 아래로 — 데스크톱 좌우 2열 배치를
     콘텐츠 중복 없이 세로 4행으로 재배치 */
  .about-values__grid{grid-template-columns: 1fr; grid-template-areas: "m1" "m2" "d1" "d2"; margin-top: 3rem;}
  .about-portrait__media{aspect-ratio: 768 / 1175;}
  /* 좁은 세로 사진 위에서는 intro/note를 세로로 쌓음 */
  .about-portrait__overlay { flex-direction: column; justify-content: flex-start; align-items: stretch; text-align: center; gap: 3rem; padding: 13rem 1rem 0; }
  .about-portrait__intro { max-width: 100%; margin: 0 auto; }
  .about-portrait__note { align-self: center; align-items: center; max-width: 100%; }
  .about-portrait__desc, .about-portrait__note p { color: var(--color-muted-sub); font-size: 2rem; font-weight: 500; line-height: 1.5; }
  .about-portrait__note p { font-weight: 400; }
  .about-portrait__dash { display: none; }
  .about-portrait__callout { font-size: 2.6rem; margin-top: 3rem }

  .about-values { padding: 9rem 0; }
  .about-values__grid { gap: 0; }
  .about-values__media { height: auto; aspect-ratio: 768 / 509; }
  .about-values__desc--1 { margin: 6rem clamp(2rem, 3.91vw, 4rem) 0; width: auto; font-size: 2.4rem; line-height: 1.5;}
  .about-values__desc--2 { margin: 4rem clamp(2rem, 3.91vw, 4rem) 0; width: auto; padding-left: 3rem; font-size: 1.8rem; }

  .about-principles .section-title{padding-top: 13rem; text-align: left;}

  .about-tour{background: var(--white);}
  .about-tour .section-title,
  .about-tour .about-tour__left{text-align: center; width: 100%;}
  .about-tour-swiper{aspect-ratio: 768 / 900;}
  .about-tour__heading{flex-direction: column; align-items: flex-start; gap: 5rem;}
  .about-tour__right{width: 100%;}
  .about-tour__panel{width: 100%; padding: 0; margin-top: 5rem;}



  .doctor-card{flex-direction: column; align-items: center; text-align: center; gap:0;}
  /* 캡션을 카드 오른쪽 끝에 붙이려고 사진 박스는 카드 전체 폭 */
  .doctor-card__photo{flex: unset; align-self: stretch; width: 100%; min-width: 0; margin-left: 0; aspect-ratio: auto;}
  .doctor-card__photo picture{display: block; width: 55.8rem; max-width: 100%; aspect-ratio: 31 / 46; margin: 0 auto;}

  .medical .about-values{margin-top: 7rem;}
  .medical .about-values__desc--1{margin: 6rem clamp(2rem, 3.91vw, 4rem) 0; width: auto;}
  .medical .about-values__desc--2{margin-top: 4rem; padding: 0; font-size: 2.4rem; border-left: none;}
  .medical .about-values__span{ padding-left: 3rem;font-size: 1.8rem; border-left: 1px solid;}

  .doctor-memory{aspect-ratio: 768 / 1115; padding: 14rem 0 0;}
  .doctor-memory__quote{padding-top: 0; margin: 4.8rem 0 3.3rem;}
  .doctor-memory__quote::before{content: none;}

  .doctor-episode{padding: 10.2rem 0 0;}
  .doctor-episode .container{padding: 0;}
  .doctor-episode__media{max-width: 100%; width: 100%; aspect-ratio: 768 / 733;}
  .doctor-episode__item,
  .doctor-episode__item--reverse{flex-direction: column-reverse; gap: 10rem; }
  .doctor-episode__body{width: 100%; padding: 0 4rem;text-align: left;}
  .doctor-episode__quote{margin: 1rem 0 2rem;}

  .doctor-card::before{display: none;}
  .doctor-card__caption{right: 0; bottom: 7.5rem; text-align: left;}
  .doctor-card__body{width: 100%;}
  .doctor-card__row dd{text-align: left;}


  .doctor-papers .swiper-button-prev,
  .doctor-papers .swiper-button-next{display: none;}
  .doctor-statement__media{aspect-ratio: 768 / 1515; height: auto;}
  .doctor-statement__overlay{padding-top: 13rem; height: 100%;}
  .doctor-statement__overlay .doctor-card__badge{position: absolute; bottom: 6rem; right: 5rem; width: 9.4rem; margin-bottom: 0;}
  .doctor-statement__quote{font-size: 2.6rem;}
  .doctor-statement__desc{font-size: 1.8rem; margin: 2rem 0 1rem;}
  .doctor-philosophy{padding: 8rem 0 0;}
  .doctor-philosophy__divider{margin-top: 5rem;}

  /* 1024 이하 가로 스와이퍼(principle-swiper.js) — 간격은 spaceBetween */
  .principle-list{flex-direction: row; gap: 0;}
  .principle-list__item,
  .principle-list__item--reverse{flex-direction: column; flex-shrink: 0; width: min(55rem, 70vw); gap: 2.4rem; text-align: center;}
  .principle-list__media{flex-basis: auto; width: 100%;}
  .principle-list__body{width: 100%;}
  .principle-list__desc{text-align: left;}

  .about-signage{aspect-ratio: 256 / 143;}
  .about-signage p{font-size: 3.8rem;}


  .doctor-closing{aspect-ratio: 768 / 431;}
  .doctor-closing__overlay{justify-content: center; padding: 0 3rem;}

  .clinic-hours{flex-direction: column; background: url("../images/sub/about/m_location_hours_bg.png") no-repeat center bottom/cover;}
  .clinic-hours .section-title,
  .clinic-hours__desc{text-align: center;}
  .clinic-hours__body{width: 100%; margin-left: 0; padding: 13rem 0 66.5rem;}
  .clinic-hours__wordmark{display: none;}

  .clinic-directions__info{flex-direction: column; gap: 2.4rem;}
  .clinic-directions__info-item,
  .clinic-directions__bus{flex-direction: row-reverse; align-items: flex-end; border-color: #a8a8a8;}
  .clinic-directions__info-item + .clinic-directions__info-item{margin-left: 0; padding-left: 0; padding-top: 2.4rem; border-left: none; border-top: 1px solid #a8a8a8;}
  .clinic-directions__info-body{flex: 1;}
  .clinic-directions__badge-list li{width: 100%;}

  .clinic-directions__map{ width: 100%; max-width: none; aspect-ratio: 4 / 3; border-left: none; border-right: none;}

  .equipment-section{padding: 8rem 0 12rem;}
  .equipment-grid{grid-template-columns: repeat(2, 1fr);}

  /* 1024 비율 그룹: 섹션 타이틀(3.6) > 리드·인용(2.4~2.6) > 본문(1.6~2), 섹션 여백 9rem */
  .about-identity{padding: 9rem 0;}
  .about-identity__note b{font-size: 2.4rem;}
  .about-identity__note p{font-size: 1.8rem;}
  .about-principles{padding-bottom: 9rem;}
  .principle-list__num{font-size: 2rem;}
  .principle-list__title h3{font-size: 2.4rem;}
  .principle-list__desc{font-size: 1.8rem;}
  .about-tour{padding: 9rem 0;}
  .about-tour .section-description{font-size: 2rem;}

  .doctor-intro{padding: 9rem 0;}
  .doctor-statement__title{font-size: 3.6rem;}
  .doctor-philosophy__quote{font-size: 2.4rem;}
  .doctor-philosophy__desc{font-size: 1.8rem;}
  .doctor-memory__quote{font-size: 2.4rem;}
  .doctor-memory__desc{font-size: 1.8rem;}
  .doctor-episode__body{font-size: 1.8rem; }
  .doctor-episode__lead{font-size: 2.4rem;}
  .doctor-episode__quote{font-size: 2.6rem;}
  .doctor-closing__quote{font-size: 2.6rem;}

  .clinic-hours__desc{font-size: 2rem;}
  .clinic-hours__item > dt{font-size: 2rem;}
  .clinic-hours__phone{font-size: 3.2rem;}
  .clinic-hours__row > dt{font-size: 1.8rem;}
  .clinic-hours__row > dd{font-size: 2rem;}
  .clinic-hours__row > dd .time-period,
  .clinic-hours__row:last-child > dd{font-size: 1.6rem;}
  .clinic-directions{padding: 9rem 0;}
  .clinic-directions__address{font-size: 2rem;}
  .clinic-directions__info-body h3{font-size: 2.2rem;}
  .clinic-directions__info-body p,
  .clinic-directions__badge-list,
  .clinic-directions__bus-note{font-size: 1.6rem;}
}

/* 768 블록에 덮어쓰는 규칙이 없는 여백 — 769~1024로 한정 */
@media (min-width: 769px) and (max-width: 1024px) {
  .doctor-philosophy{padding-top: 8rem;}
}

@media (max-width: 768px) {
  /* ==========================================================================
     HERO SECTION
     ========================================================================== */
  .about-hero__inner { padding: 0 clamp(1rem, 2.6vw, 2rem); gap: clamp(1.2rem, 3.39vw, 2.6rem); }
  .about-hero__title,
  .about-hero__title h2 { font-size: clamp(2.2rem, 8.6vw, 6.5rem); }
  .about-hero__inner .dash { height: clamp(2.5rem, 6.51vw, 5rem); }
  .about-hero__desc { font-size: clamp(1.5rem, 3.65vw, 2.8rem); }
  .about-hero__tag { font-size: clamp(1.3rem, 3.12vw, 2.4rem); gap: clamp(2.4rem, 6.12vw, 4.7rem); }
  .about-hero__wordmark { font-size: clamp(4.2rem, 11.98vw, 9.2rem); bottom: clamp(-0.5rem, -0.66vw, -0.25rem); }

  /* ==========================================================================
     SECTION PADDINGS
     ========================================================================== */
  .about-identity,
  .doctor-intro { padding: clamp(6.5rem, 16.93vw, 13rem) 0; }
  .doctor-memory { padding: clamp(6.5rem, 18.23vw, 14rem) 0; }

  /* ==========================================================================
     DOCTOR EPISODE & CLOSING
     ========================================================================== */
  .doctor-episode { padding: clamp(5rem, 13.28vw, 10.2rem) 0 0; }
  .doctor-episode__body { padding: 0 clamp(2rem, 5.21vw, 4rem); font-size: clamp(1.3rem, 3.39vw, 2.6rem); }
  .doctor-episode__list,
  .doctor-episode__item,
  .doctor-episode__item--reverse { gap: clamp(4rem, 13.39vw, 10rem); }
  .doctor-episode__lead { font-size: clamp(1.6rem, 4.17vw, 3.2rem); }
  .doctor-episode__quote { font-size: clamp(1.6rem, 4.17vw, 3.2rem); }
  .doctor-episode__body{color: var(--color-muted-sub); letter-spacing: -0.05rem;}
  .doctor-episode__body p + p { margin-top: clamp(2rem, 5.21vw, 4rem); }

  .doctor-closing__overlay { padding: 0; }
  .doctor-closing__eyebrow { font-size: clamp(1.3rem, 3.12vw, 2.4rem); }
  .doctor-closing__quote { font-size: clamp(1.6rem, 4.17vw, 3.2rem); margin: clamp(0.5rem, 1.31vw, 1rem) 0; }
  .doctor-closing__badge { width: clamp(3rem, 6.51vw, 5rem); }

  /* ==========================================================================
     ABOUT IDENTITY
     ========================================================================== */
  .about-identity .container { padding: 0; }
  .about-identity__grid { grid-template-columns: 1fr; gap: 0; margin-top: clamp(1.8rem, 4.17vw, 3.2rem); }
  .about-identity__item { aspect-ratio: 768 / 509; }
  .about-identity__caption strong { font-size: clamp(2.2rem, 5.21vw, 4rem); }
  .about-identity__caption span { font-size: clamp(1.5rem, 3.65vw, 2.8rem); margin-top: clamp(0.1rem, 0.27vw, 0.2rem); }
  .about-identity__note { margin-top: clamp(3rem, 6.51vw, 5rem); }
  .about-identity__note b { font-size: clamp(1.8rem, 4.56vw, 3.5rem); }
  .about-identity__note p { font-size: clamp(1.3rem, 3.39vw, 2.6rem); margin-top: clamp(1.8rem, 3.65vw, 2.8rem); }

  /* ==========================================================================
     ABOUT PORTRAIT & VALUES
     ========================================================================== */
  .about-portrait__overlay { flex-direction: column; justify-content: flex-start; align-items: stretch; text-align: center; gap: clamp(0.5rem, 2.5vw, 3rem); padding: clamp(6rem, 16.93vw, 13rem) clamp(0.5rem, 1.31vw, 1rem) 0; }
  .about-portrait__intro { max-width: 100%; margin: 0 auto; }
  .about-portrait__note { align-self: center; align-items: center; max-width: 100%; }
  .about-portrait__desc,
  .about-portrait__note p { color: var(--color-muted-sub); font-size: clamp(1.3rem, 3.39vw, 2.6rem); font-weight: 500; line-height: 1.5; }
  .about-portrait__note p { font-weight: 400; }
  .about-portrait__dash { display: none; }
  .about-portrait__callout { font-size: clamp(1.8rem, 4.56vw, 3.5rem); margin-top: clamp(0.5rem, 2.5vw, 3rem); }

  .about-values { padding: clamp(8rem, 20.83vw, 16rem) 0 clamp(6rem, 16.93vw, 13rem); }
  .about-values .section-title--xl { font-size: clamp(1.8rem, 5.21vw, 4rem); letter-spacing: -0.05rem; }
  .about-values__grid { gap: 0; margin-top: clamp(0.5rem, 2.5vw, 3rem);}
  .about-values__desc--1 { margin: clamp(3.2rem, 7.81vw, 6rem) clamp(2rem, 5.21vw, 4rem) 0; width: auto; font-size: clamp(1.6rem, 4.17vw, 3.2rem); letter-spacing: -0.09rem; }
  .about-values__desc--2 { margin: clamp(2.4rem, 5.21vw, 4rem) clamp(2rem, 5.21vw, 4rem) 0; width: auto; padding-left: clamp(1.6rem, 3.91vw, 3rem); font-size: clamp(1.3rem, 3.39vw, 2.6rem); }
  .medical .about-values { padding: clamp(6rem, 16.93vw, 13rem) 0; margin-top: clamp(3.5rem, 9.12vw, 7rem)}
  .medical .about-values__desc--1 { margin: clamp(3.2rem, 7.81vw, 6rem) clamp(2rem, 5.21vw, 4rem) 0; width: auto; }
  .medical .about-values__desc--2 { margin-top: clamp(2.4rem, 5.21vw, 4rem); font-size: clamp(1.6rem, 4.17vw, 3.2rem); }
  .medical .about-values__span { font-size: clamp(1.3rem, 3.39vw, 2.6rem); padding-left: clamp(1.6rem, 3.91vw, 3rem); margin-top: clamp(2.4rem, 5.21vw, 4rem); }

  /* ==========================================================================
     PRINCIPLES & TOUR
     ========================================================================== */
  .about-principles { padding-bottom: clamp(10rem, 26.04vw, 20rem); }
  .about-principles .section-title { padding-top: clamp(6.5rem, 16.93vw, 13rem); font-size: clamp(2.4rem, 6.51vw, 5rem); }
  .principle-list { margin-top: clamp(2.4rem, 5.21vw, 4rem); }
  .principle-list__item,
  .principle-list__item--reverse { gap: clamp(2rem, 4.95vw, 3.8rem); }
  .principle-list__media { aspect-ratio: 55 / 55; }
  .principle-list__title { padding-bottom: clamp(1.4rem, 3vw, 2.3rem); }
  .principle-list__title h3 { font-size: clamp(1.8rem, 4.56vw, 3.5rem);  letter-spacing: -0.09rem;}
  .principle-list__desc { font-size: clamp(1.3rem, 3.39vw, 2.6rem); margin-top: clamp(1.6rem, 3.25vw, 2.5rem); letter-spacing: -0.05rem; }
  .principle-list__num { font-size: clamp(1.6rem, 3.91vw, 3rem); }

  .about-signage p { font-size: clamp(1.8rem, 4.95vw, 3.8rem); }

  .about-tour { padding: clamp(8.5rem, 22.13vw, 17rem) 0 0; }
  .about-tour__heading { margin-top: clamp(1.8rem, 4.17vw, 3.2rem); gap: clamp(2.4rem, 6.51vw, 5rem); }
  .about-tour .section-title { font-size: clamp(2.6rem, 7.81vw, 6rem); }
  .about-tour .section-description { font-size: clamp(1.4rem, 3.91vw, 3rem); color: #616161; letter-spacing: -0.09rem; }
  .about-tour__panel { margin-top: clamp(2rem, 6.7vw, 5rem); }
  .about-tour-controls { bottom: clamp(2.4rem, 8.04vw, 6rem); }

  /* ==========================================================================
     DOCTOR CARDS & PAPERS
     ========================================================================== */
  .doctor-card__photo picture { width: clamp(28rem, 70.31vw, 54rem); }
  .doctor-card__name { padding: clamp(2rem, 4.56vw, 3.5rem) 0; gap: clamp(1rem, 2.08vw, 1.6rem); }
  .doctor-card__name-text { font-size: clamp(2.2rem, 5.73vw, 4.4rem); }
  .doctor-card__badge { width: clamp(3.8rem, 7.29vw, 5.6rem); }
  .doctor-card__role { font-size: clamp(1.6rem, 4.17vw, 3.2rem); }
  .doctor-card__row { padding: clamp(3rem, 7.81vw, 6rem) 0; }
  .doctor-card__row dt { flex-basis: clamp(10rem, 20.83vw, 16rem); font-size: clamp(1.6rem, 4.17vw, 3.2rem); }
  .doctor-card__row dd { font-size: clamp(1.3rem, 3.39vw, 2.6rem); padding-left: clamp(1.5rem, 3.91vw, 3rem); }
  .doctor-card__caption { font-size: clamp(1.3rem, 3.12vw, 2.4rem); right: 0; bottom: clamp(3.5rem, 8.46vw, 6.5rem); }
  .doctor-card__caption strong { font-size: clamp(1.8rem, 4.56vw, 3.5rem); }
  .doctor-card__caption span { font-size: clamp(1.2rem, 3.2vw, 2.2rem); }

  .doctor-papers { margin-top: clamp(2.8rem, 6.77vw, 5.2rem); }
  .doctor-papers__title { font-size: clamp(1.6rem, 4.17vw, 3.2rem); }
  .doctor-papers__card { padding: clamp(2.6rem, 5.99vw, 4.6rem) clamp(2rem, 5.21vw, 4rem); gap: clamp(1.4rem, 2.73vw, 2.1rem); }
  .doctor-papers__tag { font-size: clamp(1.2rem, 3.2vw, 2.2rem); height: clamp(3.2rem, 5.86vw, 4.5rem); padding: 0 clamp(1.4rem, 2.73vw, 2.1rem); }
  .doctor-papers__desc { font-size: clamp(1.3rem, 3.5vw, 2.2rem); }

  /* ==========================================================================
     DOCTOR STATEMENTS & PHILOSOPHY
     ========================================================================== */
  .doctor-statement__overlay { padding-top: clamp(6.5rem, 16.93vw, 13rem); }
  .doctor-statement__title { font-size: clamp(2.4rem, 6.77vw, 5.5rem); }
  .doctor-statement__quote { font-size: clamp(1.4rem, 4.17vw, 3.2rem); margin-bottom: 0; }
  .doctor-statement__desc { font-size: clamp(1.2rem, 3.39vw, 2.6rem); margin: 1em 0 0;}
  .doctor-statement__desc p + p{margin-top: 1em;}
  .doctor-statement__overlay .doctor-card__badge { width: clamp(5.2rem, 12.24vw, 9.4rem); bottom: clamp(2.4rem, 8.04vw, 6rem); right: clamp(2rem, 6.7vw, 5rem); }

  .doctor-philosophy{padding-top: clamp(4rem, 10.42vw, 8rem);}
  .doctor-philosophy__quote { font-size: clamp(1.4rem, 4.17vw, 3.2rem); letter-spacing: -0.05rem; }
  .doctor-philosophy__mark img { width: clamp(1.2rem, 2.34vw, 1.8rem); margin: clamp(0.5rem, 1.04vw, 0.8rem); }
  .doctor-philosophy__desc { font-size: clamp(1.3rem, 3.39vw, 2.6rem); margin-top: clamp(1.5rem, 3.39vw, 2.6rem); }
  .doctor-philosophy__divider { height: clamp(6.5rem, 17.45vw, 13.4rem); margin-top: clamp(2.8rem, 6.9vw, 5.3rem); }


  .doctor-memory .section-title { font-size: clamp(2.4rem, 6.77vw, 5.5rem); }
  .doctor-memory__quote { font-size: clamp(1.6rem, 4.17vw, 3.2rem); margin: clamp(2.4rem, 6.25vw, 4.8rem) 0 clamp(1.6rem, 4.3vw, 3.3rem); }
  .doctor-memory__desc { font-size: clamp(1.3rem, 3.39vw, 2.6rem); }

  /* ==========================================================================
     CLINIC HOURS & DIRECTIONS
     ========================================================================== */
  .clinic-directions { padding: clamp(7.5rem, 19.53vw, 15rem) 0; }
  .clinic-hours__body { padding: clamp(6.5rem, 16.93vw, 13rem) 0 clamp(33.25rem, 86.58vw, 66.5rem); }
  .clinic-hours .section-title,
  .clinic-directions .section-title { font-size: clamp(2.4rem, 6.77vw, 5.5rem); }
  .clinic-hours__desc { font-size: clamp(1.5rem, 3.91vw, 3rem); }
  .clinic-hours__phone { font-size: clamp(2.1rem, 5.47vw, 4.2rem); }
  .clinic-hours__list{padding: clamp(2.2rem, 5.73vw, 4.4rem) 0;}
  .clinic-hours__list + .clinic-hours__list{padding: clamp(2.75rem, 7.16vw, 5.5rem) 0;}
  .clinic-hours__list:first-child .clinic-hours__item { gap: 0; }
  .clinic-hours__list:last-child .clinic-hours__item { flex-direction: column; gap: clamp(1.3rem, 3.39vw, 2.6rem); }
  .clinic-hours__item > dt { flex: unset; width: clamp(10.5rem, 27.34vw, 21rem); font-size: clamp(1.7rem, 4.43vw, 3.4rem); }
  .clinic-hours__table{gap: 0;}
  .clinic-hours__row:nth-child(3) {margin-top: clamp(0.5rem, 1.31vw, 1rem);}
  .clinic-hours__row > dt { flex: unset; width: clamp(10.5rem, 27.34vw, 21rem); font-size: clamp(1.6rem, 3.91vw, 3rem); }
  .clinic-hours__row > dd,
  .clinic-hours__row > dd .time-period,
  .clinic-hours__row:last-child > dd { font-size: clamp(1.3rem, 3.39vw, 2.6rem); }
  .clinic-hours__note { font-size: clamp(1.3rem, 3.12vw, 2.4rem); display: block; }

  .clinic-directions__heading { align-items: flex-start; gap:clamp(2rem, 5.21vw, 4rem);}
  .clinic-directions__address { font-size: clamp(1.3rem, 3.39vw, 2.6rem); margin-top: clamp(1.5rem, 3.52vw, 2.7rem); }
  .clinic-directions__map-links { gap: clamp(0.6rem, 2.01vw, 1.5rem);  width: 100%; }
  .clinic-directions__map-btn { flex: 1; height: clamp(3.5rem, 9.11vw, 7rem); padding: 0 clamp(0.6rem, 5.14vw, 3.8rem); gap: clamp(0.3rem, 0.65vw, 0.5rem); font-size: clamp(1.3rem, 3.5vw, 2.4rem); white-space: nowrap; }
  .clinic-directions__map-icon { height: clamp(1.3rem, 3.12vw, 2.4rem); }
  .clinic-directions__map { margin: clamp(3.5rem, 9.11vw, 7rem) 0 0; height: auto; }

  .clinic-directions__info { padding: clamp(3.5rem, 9.11vw, 7rem) 0 clamp(3rem, 7.81vw, 6rem); gap: clamp(3rem, 7.81vw, 6rem); }
  .clinic-directions__info-item + .clinic-directions__info-item { padding-top: clamp(3rem, 7.81vw, 6rem); }
  .clinic-directions__bus { padding: clamp(3rem, 7.81vw, 6rem) 0 clamp(3.5rem, 9.11vw, 7rem); }
  .clinic-directions__info-body h3 { font-size: clamp(1.9rem, 4.95vw, 3.8rem); margin-bottom: clamp(1.85rem, 4.82vw, 3.7rem); }
  .clinic-directions__info-body p,
  .clinic-directions__badge-list,
  .clinic-directions__bus-note { font-size: clamp(1.3rem, 3.39vw, 2.6rem); }
  .clinic-directions__badge { min-width: clamp(2.2rem, 5.73vw, 4.4rem); height: clamp(2.2rem, 5.73vw, 4.4rem); font-size: clamp(1.3rem, 3.39vw, 2.6rem); }
  .clinic-directions__badge--parking { width: clamp(2.2rem, 5.73vw, 4.4rem); }
  .clinic-directions__badge--suin,
  .clinic-directions__badge--trunk,
  .clinic-directions__badge--direct,
  .clinic-directions__badge--branch { padding: 0 clamp(0.85rem, 2.21vw, 1.7rem); }
  .clinic-directions__badge-list { gap: clamp(1.4rem, 3.65vw, 2.8rem); }
  .clinic-directions__badge-list li { gap: clamp(1.05rem, 2.73vw, 2.1rem); }
  .ico_car { width: clamp(4.95rem, 12.89vw, 9.9rem); height: clamp(4.4rem, 11.46vw, 8.8rem); }
  .ico_subway, .ico_bus { width: clamp(4.35rem, 11.33vw, 8.7rem); height: clamp(5.15rem, 13.41vw, 10.3rem); }
  .clinic-directions__info-item:first-child li { align-items: flex-start; }

  /* ==========================================================================
     EQUIPMENT & PAGINATION
     ========================================================================== */
  .equipment-section{padding: clamp(6.5rem, 16.93vw, 13rem) 0; }
  .equipment-tabs { margin-top: clamp(2.5rem, 6.51vw, 5rem); }
  .equipment-grid { grid-template-columns: 1fr; gap: clamp(1.5rem, 3.91vw, 3rem); margin-top: clamp(2.5rem, 6.51vw, 5rem); }
  .equipment-card{padding: clamp(5.2rem, 13.55vw, 10.4rem) clamp(1rem, 2.6vw, 2rem); height: clamp(43rem, 112vw, 86rem);}
  .equipment-card__category{padding: clamp(0.4rem, 1.05vw, 0.8rem) clamp(1.3rem, 3.39vw, 2.6rem); font-size: clamp(1.4rem, 3.65vw, 2.8rem);}
  .equipment-card__origin{margin-top: clamp(1.2rem, 3.13vw, 2.4rem); font-size: clamp(1.4rem, 3.65vw, 2.8rem);}
  .equipment-card__name { font-size: clamp(2rem, 5.21vw, 4rem); }
  .equipment-card__desc{font-size: clamp(1.3rem, 3.39vw, 2.6rem);}
  .equipment-card__tags{min-height: clamp(6rem, 15.63vw, 12rem); padding: clamp(1.2rem, 3.13vw, 2.4rem) clamp(5.15rem, 13.41vw, 10.3rem); font-size: clamp(1.2rem, 2.87vw, 2.2rem); gap: 0 0.4rem;}
  .equipment-card__media{flex: none; height: clamp(27.5rem, 71.62vw, 55rem);}
  .equipment-card.is-active{padding-top: clamp(5.2rem, 13.55vw, 10.4rem);}
  .equipment-card.is-active .equipment-card__desc{max-height: 40rem;}
  .equipment-card.is-active .equipment-card__media{bottom: clamp(-10rem, -13.03vw, -5rem);}
  .equipment-card__close{width: clamp(2.4rem, 4.3vw, 3.3rem); height: clamp(2.4rem, 4.3vw, 3.3rem);}
  .equipment-card__close::before, .equipment-card__close::after{width: clamp(2.4rem, 4.3vw, 3.3rem);}
}