@charset "UTF-8";

/* ==========================================================================
   시술 상세 페이지 공통 컴포넌트 (.tx-*)
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. Hero (서브 히어로 배너)
   -------------------------------------------------------------------------- */
.tx-hero {position: relative; width: 100%; overflow: hidden;}
/* aspect-ratio로 비율 유지하며 폭에 맞춰 축소 (1920x1050 기준) */
.tx-hero__media {position: relative; width: 100%; aspect-ratio: 1920 / 1050; overflow: hidden; background-color: var(--color-bg-soft);}
.tx-hero__media img {width: 100%; height: 100%; object-fit: cover; display: block;}
/* 유튜브 배경 영상: 16:9 영상을 박스에 꽉 차게(cover) — 사진 위에 깔림, 클릭 안 됨 */
.tx-hero__media:has(.sub-hero__video){container-type: size;}
.tx-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;}
.tx-hero__inner {position: absolute;top: 0;bottom: 0;left: 50%;transform: translateX(-50%);width: 100%;display: flex;align-items: center;}
.tx-hero__text{margin-top: -4rem;}

.tx-eyebrow{display: block;font-size: 1.8rem; line-height: 2;color: #527b5e; letter-spacing: 0.5rem;}
.tx-hero__title {font-size: clamp(6rem, 4.8vw + 1.18rem, 8rem);font-weight: 400;color: #29362f;margin: 0.8rem 0 3.5rem;}
.tx-hero__desc {position: relative; font-size: 2.6rem;line-height: 1.5;color: rgb(45 61 52 / 0.83); padding-top: 3rem;}
.tx-hero__desc::before{content: ''; width: 5rem; height: 1px; background: #2d3d34; display: block; position: absolute; top: 0; left: 0;  }


.ba-section{padding: 8rem 0 17rem;}

/* --------------------------------------------------------------------------
   3. 왜 필요할까요 (.tx-why)
   -------------------------------------------------------------------------- */
/* 배경 사진 기본값은 공통 이미지 (필요 없으면 페이지 CSS에서 none) */
.tx-why { background-image: url("../../images/common/tx-why-bg.webp"); background-repeat: no-repeat; background-position: center; background-size: cover; padding: 25rem 0 21rem; color: var(--white);}
.tx-why__media {max-width: 106rem;margin: 3.5rem auto;box-shadow: -20px 39px 70px 0px rgba(0, 63, 64, 0.36); }
/* 사진 수와 무관하게 화살표를 사진 사이 flex 아이템으로 배치 */
.tx-why__media__inner{display: flex; align-items: center; overflow: hidden;}
.tx-why__arrow{position: relative; z-index: 1; flex: none; width: 6.2rem; height: 6.2rem; margin: 0 -3.1rem; background-color: var(--white); border-radius: 50%; display: flex; align-items: center; justify-content: center;}
.tx-why__arrow .arrow{ background-color: var(--color-primary);}
.tx-why__img{position: relative; flex: 1; min-width: 0;}
.tx-why__img-label{position: absolute; top: 1.8rem; left: 2.3rem; font-size: 1.8rem; font-weight: 700;}
.tx-why__media img { width: 100%; display: block; }

/* 텍스처 배경 카드 3장 배리언트 (카드별 배경은 페이지 CSS) */
.tx-why__cards {width: 100%;margin: 4rem auto 0;display: grid;grid-template-columns: repeat(3, 1fr);gap: 1.8rem;}
.tx-why__card {position: relative;aspect-ratio: 460 / 480;overflow: hidden;padding: 7rem 2rem;display: flex;flex-direction: column;align-items: center;text-align: center;color: var(--white);background-color: var(--color-primary);background-repeat: no-repeat;background-position: center bottom;background-size: 100%;}
.tx-why__card-label {font-size: 1.6rem;font-weight: 500;letter-spacing: -0.02rem;}
.tx-why__card-title {margin-top: 0.8rem;font-size: 2.8rem;font-weight: 600;}
.tx-why__card-divider {display: block;flex-shrink: 0;width: 2px;height: 4.1rem;margin: 2rem auto 1rem;background: var(--white);}
/* 아이콘 크기 1920→768 비례 축소 */
/* 아이콘 칸은 남은 높이만 차지하고 contain으로 맞춤 */
.tx-why__card-icon {flex: 1 1 0;min-height: 0;display: flex;align-items: center;justify-content: center;width: clamp(10.1rem, 4.69vw + 6.5rem, 15.5rem); margin: 0 auto;}
.tx-why__card-icon img {width: 100%;height: 100%;object-fit: contain;}
.tx-why__card-desc{font-size: 3rem; text-align: center;margin-top: 5.3rem; color: var(--black);}

.tx-why__desc {display: flex; flex-direction: column; gap: 2rem; font-size: 2.2rem; line-height: 1.5; font-weight: 500; text-align: center;}
.tx-why__callout {margin-top: 3rem;font-size: 4rem;font-weight: 100;text-align: center;}

/* --------------------------------------------------------------------------
   4. 핵심 시술 방법 (.tx-method)
   -------------------------------------------------------------------------- */
.tx-method{padding: 19rem 0; background: #eff6f6;}
.tx-method__list {margin-top: 4rem; overflow: visible;}
/* PC 3열 grid, 1024 이하 캐러셀 (tx-method.js) */
.tx-method__list .swiper-wrapper {display: grid;grid-template-columns: repeat(3, 1fr);gap: 2rem;}
.tx-method__item {background: #fff;text-align: center;box-shadow: -11px 21px 43px 0px rgba(0, 63, 64, 0.14);}
.tx-method__title {padding: 4.6rem 0 2.5rem; }
.tx-method__title .tx-method__point{font-size: 1.6rem; font-weight: 500; color: var(--color-primary);}
.tx-method__title h3{font-size: 3.2rem; font-weight: 600; color: var(--black); line-height: 1.5; }
.tx-method__img {width: 100%;aspect-ratio: 460 / 290;overflow: hidden;}
/* 이미지 안에 라벨 텍스트가 있어 원본 비율(460x290) 그대로 채운다 — 16:9로 cover하면 라벨이 잘림 */
.tx-method__img picture,
.tx-method__img img {display: block;width: 100%;height: 100%;}
.tx-method__img img {object-fit: cover;}
.tx-method-controls {display: none;}
.tx-method__desc {padding: 4.7rem 0.5rem; font-size: 1.8rem; font-weight: 500; color: var(--color-text); line-height: 1.5; }

/* --------------------------------------------------------------------------
   5. 시술 3대 강점 (.tx-steps)
   -------------------------------------------------------------------------- */
.tx-steps {padding: 16rem 0 18rem; }
.tx-steps__list {width: 100%; max-width: 118rem; margin: 0 auto; display: flex; flex-direction: column;gap: 2rem;margin-top: 5rem;}
.tx-steps__item {background: #f6f6f6;height: 13.7rem;display: flex; align-items: center;position: relative;}
/* 배경 이미지(url)는 페이지별 CSS에서 nth-child별로 지정 */
.tx-steps__item .left{width: 36rem; height: 100%; background-repeat: no-repeat; background-size: cover; background-position: center; color: var(--white); display: flex; align-items: center; gap:3rem; padding-left: 5.4rem;}
.tx-steps__badge {display: inline-block;font-family: "Philosopher", serif;font-size: 2.6rem;}
.tx-steps__title { font-size: 3.6rem; font-weight: 600;}
.tx-steps__item .right{flex: 1; padding: 5rem; display: flex; align-items: center; justify-content: space-between;}
.tx-steps__desc { font-size: 3rem; font-weight: 500; color: var(--black);}
/* 아이콘도 그래픽마다 원본 비율이 달라 크기+이미지를 페이지별 CSS에서 함께 지정 */
.tx-steps__ico{display: inline-block; width: 7.5rem; height: 5rem; background-repeat: no-repeat; background-position: center; background-size: contain;}
.tx-steps__bottom{text-align: center; margin-top: 5rem; font-size: 3.4rem; font-weight: 500; color: var(--color-primary);}


/* --------------------------------------------------------------------------
   6. 시술 원칙 (.tx-principle)
   -------------------------------------------------------------------------- */
.tx-principle {position: relative;background-color: #f9f9f9;}
.tx-principle__inner {display: flex;align-items: center;gap: 9.5rem;}
.principle-media-swiper {flex: 1;width: 50%;height: 86rem;overflow: hidden;}
.principle-media-swiper .swiper-slide{width: 100%;height: 100%;}
.principle-text-swiper::before {content: '';position: absolute;top: 0;left: 0;width: 100%;height: 12rem;background: linear-gradient(to bottom, #f9f9f9 0%, rgba(249, 249, 249, 0) 100%);z-index: 2;pointer-events: none;}
.principle-text-swiper::after {content: '';position: absolute;bottom: 0;left: 0;width: 100%;height: 12rem;background: linear-gradient(to top, #f9f9f9 0%, rgba(249, 249, 249, 0) 100%);z-index: 2;pointer-events: none;}
.principle-media-swiper .swiper-slide picture {display: block;width: 100%;height: 100%;}
.principle-media-swiper .swiper-slide img {display: block;width: 100%;height: 100%;object-fit: cover;}
.principle-text-swiper {flex: 1;width: 50%;max-height: 86rem; position: relative;}
.tx-principle-controls {display: none;}
.principle-text-swiper .swiper-slide {opacity: 0.4;transition: opacity 0.4s ease;}
.principle-text-swiper .swiper-slide-active {opacity: 1;border-top: 1px solid var(--color-text); border-bottom: 1px solid var(--color-text);}
.tx-principle__body {display: flex;flex-direction: column;justify-content: center;height: 100%;box-sizing: border-box;}
.tx-principle__body .sub-title {font-size: 2.2rem;font-weight: 500;color: var(--color-primary);margin-bottom: 1rem;}
.tx-principle__body .title-wrap {display: flex;align-items: center;gap: 1.4rem;margin-bottom: 1rem;}
.tx-principle__body .num {display: inline-flex;align-items: center;justify-content: center;width: 4.2rem;height: 4.2rem;background-color: var(--color-primary);color: #fff;border-radius: 50%;font-size: 1.6rem;font-weight: 700;flex-shrink: 0;}
/* 대형 타이틀 영역만 clamp() 유지 (나머지는 위처럼 브레이크포인트별 고정 rem) */
.tx-principle__body .title {font-size: clamp(3rem, 2vw + 1.6rem, 4rem);font-weight: 700;color: var(--color-text);line-height: 1.2;}
.tx-principle__body .desc {font-size: 2rem;line-height: 1.5;color: var(--color-text);}


/* ==========================================================================
   7. 원장 프로필 + 통계 + 회복 타임라인 (.tx-doctor)
   ========================================================================== */
.tx-doctor {padding: 18rem 0 19rem;}
  /* --------------------------------------------------------------------------
     1. 통계 수치 영역 (.tx-doctor__stats-wrap)
     -------------------------------------------------------------------------- */
.tx-doctor__stats-wrap {margin: 3rem auto 0; }
.tx-doctor__stats {display: flex;align-items: center;justify-content: center;border-top: 1px solid var(--color-text);border-bottom: 1px solid var(--color-text);padding: 2.5rem 0 1.5rem;}
.tx-doctor__stat-item{ flex: 1; display: flex; align-items: center; justify-content: center;}
.tx-doctor__stat-item:first-child{border-right: 1px solid var(--color-text);}
.tx-doctor__stat-item dd {display: flex;align-items: center;gap: 2.5rem;}
.tx-doctor__stat-value{position:relative; padding-right: 2.5rem;}
.tx-doctor__stat-value::after{content: ''; width: 0.1rem; height: 55%; display: block; position: absolute; right: 0; top: 50%; transform: translateY(-50%); border-right: 0.2rem dotted #ccc;}
.tx-doctor__stat-num {font-size: clamp(4.5rem, 4vw + 2rem, 9rem);font-weight: 700;line-height: 1;font-family: 'Philosopher', sans-serif;}
.tx-doctor__stat-unit {font-size: 2.5rem;font-weight: 600;color: var(--black);}
.tx-doctor__stat-desc {font-size: 2.2rem;line-height: 1.2;color: var(--color-muted-sub);}
.tx-doctor__caption {text-align: center;font-size: 1.6rem;color: var(--black);  padding: 1.5rem 0; border-bottom: 1px solid var(--color-text);}

/* --------------------------------------------------------------------------
   2. 원장 프로필 영역 (.tx-doctor__profile)
   -------------------------------------------------------------------------- */
.tx-doctor__profile { margin: 8rem auto 0; position: relative; display: flex;align-items: flex-start;justify-content: center;gap: 7.4rem; border-bottom: 1px solid var(--color-text);overflow: hidden;}
.tx-doctor__profile::before{content: 'Dr. Byungchul Kim'; position: absolute; bottom: 0; right: 0; z-index: -1; font-family: "Highsummit", serif; font-size: 8.2rem; color: rgb(119 119 119 / 0.11);}
.tx-doctor__photo {flex: none;width: min(100%, 48.4rem);aspect-ratio: 484 / 704; margin-left: 4.3rem;}
.tx-doctor__photo img {width: 100%;height: 100%;object-fit: contain;}
.tx-doctor__info {flex: 1;}
.tx-doctor__sub-title {display: block;font-family: 'Philosopher', serif;font-size: 2.2rem;color: var(--color-muted-sub);margin-bottom: 2.4rem;}
.tx-doctor__quote {display: flex;flex-direction: column;gap: 2.5rem;font-size: 2.2rem;line-height: 1.45;color: var(--color-text);margin-bottom: 3rem;}
.tx-doctor__quote .highlight-text {font-size: 2.6rem;}
.tx-doctor__quote .highlight-text b{font-weight: 600;}
/* 구분선형 프로필(.tx-doctor--line): 강조 문구 줄바꿈, PC 프로필 위 선 (페이지별 차이는 페이지 CSS) */
.tx-doctor--line .tx-doctor__quote .highlight-text b {display: block;}
.tx-doctor--line .tx-doctor__quote .highlight-text b + b {margin-top: 2rem;}
@media (min-width: 1025px) {
  .tx-doctor--line .tx-doctor__profile {margin-top: 5rem; border-top: 1px solid; align-items: flex-end;}
  .tx-doctor--line .tx-doctor__info {padding: 7rem 0;}
}
.tx-doctor__meta {display: flex;flex-direction: column;gap: 0.4rem; color: var(--black);font-weight: 500;}
.tx-doctor__name {font-size: 3.5rem;font-weight: 700;}
.tx-doctor__role {font-size: 2.4rem;margin-left: 0.6rem;font-weight: 500;}
.tx-doctor__spec {font-size: 2.2rem;}
.tx-doctor__credential {margin-top: 3rem; padding: 3.5rem 0; border-top: 1px solid var(--color-text); display: flex; align-items: center; gap: 3rem;}
.tx-doctor__credential-label {display: block; font-size: 2.2rem; font-weight: 600; color: var(--black); flex-shrink: 0;}
.tx-doctor__credential-list {display: flex; flex-direction: column; gap: 0.6rem; padding-left: 3rem;border-left: 2px dotted rgb(0 0 0  / 0.2);}
.tx-doctor__credential-tit{font-size: 1.8rem; font-weight: 600;}
.tx-doctor__credential-item {font-size: 1.5rem; line-height: 1.5; color: #7f7f7f; width: 70%;}

/* --------------------------------------------------------------------------
   3. 회복 과정 타임라인 (.tx-doctor__recovery)
   -------------------------------------------------------------------------- */
.tx-doctor__recovery {margin-top: 5rem;}
.recovery-header {display: flex;align-items: baseline;gap: 2rem;margin-bottom: 2rem;}
.recovery-title {font-size: 2.8rem;font-weight: 600;color: var(--black);flex-shrink: 0;}
.recovery-caption {font-size: 1.6rem; font-weight: 300; color: #7f7f7f;}

/* 타임라인 4열 — 설명이 2줄에 들어가도록 DAY 폭·간격을 좁게 */
.recovery-timeline {display: flex; align-items: center; gap: 1.2rem;position: relative;padding: 3rem 0 4rem 2rem;border-top: 1px solid var(--color-text);border-bottom: 1px solid var(--color-text);}
/* 4단이 컨테이너 폭을 나눠 가지며 줄어들게(min-width:0) — 고정 폭 합이 컨테이너보다 커서 넘치던 문제 */
.recovery-step {position: relative;display: flex;gap: 2.4rem; align-items: center; flex: 1 1 0; min-width: 0;}
.step-day {position: relative; display: flex;flex-direction: column; align-items: center;font-family: "Philosopher", serif; font-weight: 700;color: var(--color-primary); width: 8rem;}
.step-day::after{content: ''; width: 0.1rem; height: 90%; display: block; position: absolute; right: -1.2rem; top: 50%; transform: translateY(-50%); border-right: 0.2rem dotted #ccc;}
.step-day .label {font-size: 2.5rem;}
.step-day .num {font-size: 3.5rem;line-height: 1;font-weight: 700;}
.step-content {display: flex;flex-direction: column;gap: 0.6rem;}
.step-title {font-size: 2rem;font-weight: 600;color: var(--black);}
.step-desc {font-size: 1.6rem;line-height: 1.25;color: #7f7f7f; }
.recovery-timeline .arrow-wrap{width: 2.1rem; height: 2.1rem; background-color: #949494; flex-shrink: 0; }
.recovery-timeline .arrow-wrap .arrow{width: 1.1rem; height: 1.1rem;}

/* --------------------------------------------------------------------------
   7-1. 같은 재료, 다른 접근 — VS 비교 다이어그램 (.tx-compare)
   -------------------------------------------------------------------------- */
/* 라벨 카드·VS는 이미지에 포함, 제목·안내 바만 HTML (aspect-ratio 유지) */
.tx-compare {position: relative;}
/* 사진 위 흰 배경의 서브 캡션 (세로 구분선 + 한 줄) */
.tx-compare__sub {padding: 5rem 0 16rem; text-align: center; font-size: clamp(3.8rem, 2vw + 1.64rem, 4.8rem); font-weight: 400; color: #7f7f7f;}
.tx-compare__sub::before {content: ''; display: block; width: 1px; height: 6.3rem; margin: 0 auto 1.2rem; background: var(--color-border);}
.tx-compare__media {position: relative; width: 100%; aspect-ratio: 1920 / 1183; overflow: hidden; background-color: var(--color-bg-soft);}
.tx-compare__media_bg img {width: 100%; height: 100%; object-fit: cover; display: block;}

/* 제목·VS는 이미지와 같은 비율로 축소 (vw clamp, 1920 기준) */
.tx-compare__title {position: absolute; top: 13.5%; left: 50%; transform: translateX(-50%); z-index: 2; width: 100%; text-align: center; font-size: clamp(2rem, 1.74vw + 0.667rem, 4rem); font-weight: 400; line-height: 1.55; color: var(--black);}
.tx-compare__title b{font-weight: 500; font-size: clamp(2.2rem, 2vw + 0.667rem, 4.5rem);}

.tx-compare__vs {position: absolute; top: 59%; left: 50%; transform: translate(-50%, -59%); z-index: 2; display: flex; align-items: center; justify-content: center; width: clamp(6rem, 7.64vw + 0.133rem, 14.8rem); height: clamp(6rem, 7.64vw + 0.133rem, 14.8rem); border-radius: 50%; background: var(--white); box-shadow: 0 0.4rem 1.6rem rgba(0, 0, 0, 0.15); font-family: "Philosopher", serif; font-weight: 700; font-size: clamp(3rem, 4.08vw - 0.133rem, 7.7rem); color: #7e7b7b;}

.tx-compare__stats {position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; height: 19rem; background: rgba(0,0,0,.4);}
.tx-compare__stats .container{ display: flex; justify-content: space-between; gap: 2rem; height: 100%;}
.tx-compare__stats li {display: flex; align-items: center; gap: 2rem; color: var(--white);}
/* 아이콘마다 원본 비율이 달라 너비는 고정하지 않고 높이만 맞춰 이미지 자체 크기를 따라가게 한다 */
.tx-compare__stats-icon {flex: none; height: 5.5rem; padding-right: 2rem; border-right: 0.2rem dotted var(--white);}
.tx-compare__stats-icon img {display: block; width: auto; height: 100%;}
/* 통계 아이콘은 mask로 색만 전환 (svg·비율은 페이지 CSS) */
.tx-compare__stats-ico {display: block; height: 100%; aspect-ratio: 1; background-color: var(--white); -webkit-mask: no-repeat center / contain; mask: no-repeat center / contain;}
.tx-compare__stats-label {display: block; font-size: 2rem; font-weight: 500; letter-spacing: 0.05rem; text-shadow: 0 0 18px rgba(0, 0, 0, 0.47);}
.tx-compare__stats-desc {display: block; font-size: clamp(2.2rem, 0.96vw + 1.22rem, 2.6rem); font-weight: 600;text-shadow: 0 0 18px rgba(0, 0, 0, 0.47); margin-top: 1rem;}

/* --------------------------------------------------------------------------
   8. 이런 분께 추천합니다 (.tx-recommend)
   -------------------------------------------------------------------------- */
/* 배경 사진 기본값은 공통 이미지 */
.tx-recommend{padding: 20rem 0 19rem; background-image: url("../../images/common/tx-recommend-bg.webp"); background-repeat: no-repeat; background-position: center center; background-size: cover;}
.tx-recommend-swiper{margin-top: 4rem;}
.tx-recommend__item{position: relative; width: 34rem; height: 49rem; background: var(--white); border: 1px solid rgb(101 149 158 / 0.82); padding: 10.7rem 4rem 7rem 4rem; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; overflow: hidden; box-shadow: 0 0.4rem 2rem rgba(0, 40, 45, 0.06); transition: background 0.4s ease, border-color 0.4s ease, padding 0.4s ease;}
/* 그림자가 잘리지 않도록 클리핑(picture)과 그림자(바깥 요소) 분리 */
.tx-recommend__icon{width: 16rem; height: 16rem; margin-bottom: 7.5rem; border-radius: 50%; box-shadow: -5px -10px 16px rgba(45, 128, 139, 0.18); transition: width 0.4s ease, height 0.4s ease, margin 0.4s ease;}
.tx-recommend__icon picture{display: block; width: 100%; height: 100%; overflow: hidden; border-radius: 50%;}
.tx-recommend__icon img{width: 100%; height: 100%; object-fit: cover; object-position: center;}
.tx-recommend__label{width: 100%; font-size: 2rem; font-weight: 500; color: var(--color-primary); line-height: 1.5; padding-top: 2.4rem; border-top: 1px solid rgb(101 149 158 / 0.82); transition: color 0.4s ease, border-color 0.4s ease;}
.tx-recommend__num{position: absolute; right: 2rem; bottom: 2rem; font-family: "Philosopher", serif; font-size: 2rem; font-weight: 700; line-height: 1; color: var(--color-primary); pointer-events: none; transition: color 0.4s ease;}
.tx-recommend-controls{margin: 3rem auto 0;}

/* 4개 이하로 한 줄에 들어가면 캐러셀 없이 가운데 정렬 (tx-recommend.js) */
.tx-recommend-swiper--static .swiper-wrapper{display: flex; flex-wrap: nowrap; justify-content: center; gap: 2rem; transform: none !important;}
.tx-recommend-swiper--static .tx-recommend__item{flex: none;}

/* 활성 카드: 그라데이션 + 아이콘 확대 + 흰 텍스트 (active 슬라이드 또는 hover) */
.tx-recommend__item.swiper-slide-active,
.tx-recommend__item:hover
{background: linear-gradient(135deg, rgb(129 216 208) 0%, rgb(129 216 208 / 0) 55%), rgba(0, 101, 115, 1); border: none; padding-top: 4.3rem;}
.tx-recommend__item.swiper-slide-active .tx-recommend__icon,
.tx-recommend__item:hover .tx-recommend__icon
{width: 22.4rem; height: 22.4rem; margin-bottom: 4rem;}
.tx-recommend__item.swiper-slide-active .tx-recommend__label,
.tx-recommend__item:hover .tx-recommend__label
{color: var(--white); border-top-color: var(--white);}
.tx-recommend__item.swiper-slide-active .tx-recommend__num,
.tx-recommend__item:hover .tx-recommend__num
{color: var(--white);}


/* --------------------------------------------------------------------------
   9. 함께하면 좋은 시술 (.tx-related)
   -------------------------------------------------------------------------- */
.tx-related {padding: 17rem 0 18rem;}
.tx-related__list {display: grid;grid-template-columns: repeat(3, 1fr);gap: 2rem;list-style: none;padding: 0;margin: 4rem auto 0;}
.tx-related__card {display: block;text-decoration: none;color: inherit;outline: none;}
/* 1024 이하 스와이퍼: 간격은 spaceBetween, grid gap 해제 */
.tx-related__slider.swiper-initialized .tx-related__list {display: flex; gap: 0; margin-top: 0;}
.tx-related__slider.swiper-initialized {margin-top: 4rem;}
.tx-related__slider.swiper-initialized .tx-related__card {width: 55rem;}
.tx-related__thumb {position: relative;width: 100%;aspect-ratio: 23 / 15;overflow: hidden;}
.tx-related__thumb img {width: 100%;height: 100%;object-fit: cover;display: block;transition: transform 0.4s ease;}
.tx-related__overlay {position: absolute;inset: 0;background: linear-gradient(135deg, rgb(129 216 208) 0%, rgb(129 216 208 / 0) 55%), rgba(0, 101, 115, 0.80);display: flex;flex-direction: column;align-items: center;justify-content: center;gap: 1.2rem;opacity: 0;visibility: hidden;transition: opacity 0.3s ease, visibility 0.3s ease;padding: 2rem;text-align: center;}
.tx-related__overlay-title {color: #fff;font-size: 2.4rem;font-weight: 500;}
.tx-related__info {margin-top: 3rem;}
.tx-related__name {display: block;font-size: 2.2rem;font-weight: 500;color: var(--black);margin-bottom: 0.6rem;}
.tx-related__desc {font-size: 1.6rem;color: var(--color-muted-sub);line-height: 1.75;margin: 0;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;overflow: hidden;}
/* hover는 마우스 기기만 (1024 이하는 탭한 카드 .is-active) */
@media (hover: hover) {
  .tx-related__card:hover .tx-related__overlay {opacity: 1;visibility: visible;}
}
.tx-related__card:focus-visible .tx-related__overlay,
.tx-related__card.is-active .tx-related__overlay {opacity: 1;visibility: visible;}


/* --------------------------------------------------------------------------
   10. 시술 전, 이것만 확인하세요 (.tx-checklist)
   -------------------------------------------------------------------------- */
.tx-checklist{padding: 20rem 0 19rem; background: #f4f7f5;}
.tx-checklist__list{display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; list-style: none; padding: 0; margin: 4rem auto 0;}
.tx-checklist__item{overflow: hidden;}
/* 배경 이미지(url)는 페이지별 CSS에서 nth-child별로 지정 */
/* 배경 사진 기본값은 공통 이미지 */
.tx-checklist__head{display: flex; align-items: center; justify-content: center; gap:1rem; position: relative; height: 15rem; background-image: url("../../images/common/tx-checklist-bg01.png"); background-repeat: no-repeat; background-position: center; background-size: cover; padding: 0 2rem;}
.tx-checklist__item:nth-child(2) .tx-checklist__head{background-image: url("../../images/common/tx-checklist-bg02.png");}
.tx-checklist__item:nth-child(3) .tx-checklist__head{background-image: url("../../images/common/tx-checklist-bg03.png");}
.tx-checklist__check{display: inline-block; width: 3.3rem; height: 3.3rem; background: url("../../images/common/checklist_before.svg") no-repeat center center/contain;}
.tx-checklist__title{font-size: 2.6rem; font-weight: 400; color: #fff; line-height: 1.4;}
.tx-checklist__title b{font-weight: 600;}
.tx-checklist__num{position: absolute; top: 2rem; right: 2rem; font-family: "Philosopher", serif; font-size: 2rem; font-weight: 700; color: var(--white);}
.tx-checklist__body{min-height: 18.5rem; display: flex; align-items: center; justify-content: center; text-align: center; background: var(--white); border: 1px solid #65959e; border-top: none;}
.tx-checklist__desc{font-size: 2.2rem; font-weight: 500; color: var(--black); line-height: 1.5;}


/* --------------------------------------------------------------------------
   11. FAQ (.tx-checklist 섹션 안에 함께 배치됨 — 별도 section 아님)
   -------------------------------------------------------------------------- */
.tx-faq{margin-top: 8.2rem;}
.tx-faq .section-title{font-size: 3.5rem; margin-bottom: 2rem;}
.tx-faq__list { width: 100%; display: flex; flex-direction: column; }
.tx-faq__item { border-bottom: 1px solid var(--color-primary); padding: 2.6rem 3.5rem 2.6rem 2rem; }
.tx-faq__item:first-child{border-top: 1px solid var(--color-primary); }
.tx-faq__question {width: 100%;display: flex;justify-content: space-between;align-items: center;gap: 2rem;background: transparent;font-size: 2.4rem;font-weight: 600;color: var(--color-primary);text-align: left;}
/* 질문 내어쓰기 — 둘째 줄이 Q 아래로 들어가지 않게 (Q 폭은 --faq-q-w) */
.tx-faq__question{--faq-q-w: 4rem;}
.tx-faq__question > span:first-child{padding-left: var(--faq-q-w); text-indent: calc(var(--faq-q-w) * -1); }
.tx-faq__question > span:first-child::before{content: "Q."; display: inline-block; width: var(--faq-q-w); text-indent: 0; color: var(--color-primary); font-family: "Philosopher", serif; font-weight: 700; font-size: 3rem;}
.tx-faq__question-icon{position: relative; flex-shrink: 0; width: 1.8rem; height: 1.8rem;}
.tx-faq__question-icon::before,
.tx-faq__question-icon::after{content: ''; position: absolute; top: 50%; left: 50%; background: var(--color-primary); transition: transform 0.25s ease;}
.tx-faq__question-icon::before{width: 1.8rem; height: 2px; transform: translate(-50%, -50%);}
.tx-faq__question-icon::after{width: 2px; height: 1.8rem; transform: translate(-50%, -50%);}
.tx-faq__question[aria-expanded="true"] .tx-faq__question-icon::after{transform: translate(-50%, -50%) scaleY(0);}
.tx-faq__answer {padding: 2rem 0 0 4rem; width: 90%;background: transparent;font-size: 1.8rem; font-weight: 500;line-height: 1.6;color: var(--color-text);}

/* --------------------------------------------------------------------------
   11-1. 종류/상태별로 치료가 달라집니다 (.tx-types)
   -------------------------------------------------------------------------- */
.tx-types {padding: 19rem 0; background-color: #d7e6e6;}
.tx-types__list {display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 1.6rem; margin-top: 4rem; list-style: none; padding: 0;}
.tx-types__thumb {position: relative; width: 100%; aspect-ratio: 1 / 1; overflow: hidden; border-radius: 0.8rem; background: var(--color-bg-soft);}
.tx-types__thumb img {width: 100%; height: 100%; object-fit: cover; display: block;}
.tx-types__label {margin-top: 1.4rem; text-align: center; font-size: 1.8rem; font-weight: 500; color: var(--color-text);}

/* .tx-types--expand: 가로 패널 중 호버한 항목이 넓어지는 변형 */
.tx-types--expand .tx-types__list {display: flex; align-items: stretch; height: 60rem; overflow: hidden; gap: 0.2rem; }
/* 접힌 항목은 균등 분할, 호버한 항목만 flex:2 */
.tx-types--expand .tx-types__item {position: relative; flex: 1; min-width: 0; overflow: hidden; transition: flex 0.5s ease;}

.tx-types--expand .tx-types__thumb {position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; border-radius: 0; background: var(--black);}
/* 사진 크롭 기준점을 위쪽으로 */
.tx-types--expand .tx-types__thumb img {width: 100%; height: 100%; object-fit: cover; object-position: center 30%; display: block; opacity: 0.8;}
.tx-types--expand .tx-types__num {position: absolute; z-index: 2; right: 2.6rem; bottom: 3rem; font-size: 2.4rem; font-weight: 400; color: var(--white); font-family: "Philosopher", serif;}

/* 접힌 상태: 라벨만 표시 — 상태가 바뀌어도 라벨 크기·줄바꿈은 동일 */
.tx-types--expand .tx-types__info {position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; padding-top: 6.5rem; transition: padding 0.5s ease, align-items 0.5s ease;}
.tx-types--expand .tx-types__label {margin-top: 0; font-size: 3.2rem; line-height: 1.3; font-weight: 600; color: var(--white); white-space: nowrap; transition: color 0.5s ease;}
.tx-types--expand .tx-types__label span{display: none; font-size: 1.7rem;}
.tx-types--expand .tx-types__desc {font-size: 2rem; line-height: 1.5; font-weight: 500; color: var(--color-text); max-height: 0; opacity: 0; overflow: hidden; transition: opacity 0.4s ease, max-height 0.5s ease;}

/* 모바일 캐러셀(1024 이하) 전용 요소 — PC 패널에서는 숨김 */
.tx-types__case {display: none;}
.tx-types-controls {display: none;}

/* 확장 상태: 호버한 항목만 (PC 폭 전용) */
@media (min-width: 1025px) {
  .tx-types--expand .tx-types__item:hover {flex: 2;}
  .tx-types--expand .tx-types__item:hover .tx-types__thumb img{opacity: 1;}
  .tx-types--expand .tx-types__item:hover .tx-types__info {background: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.98) 18%, rgba(255, 255, 255, 0.85) 25%, rgba(255, 255, 255, 0.4) 30%, rgba(255, 255, 255, 0) 35%); align-items: flex-start; justify-content: flex-start; padding: 6.5rem 1.2rem 0; height: 100%; inset: 0;}
  .tx-types--expand .tx-types__item:hover .tx-types__label {color: var(--black); white-space: normal;}
  .tx-types--expand .tx-types__item:hover .tx-types__label br{display: none;}
  .tx-types--expand .tx-types__item:hover .tx-types__label span{display: inline-block;}
  .tx-types--expand .tx-types__item:hover .tx-types__desc {max-height: 20rem; opacity: 1; margin-top: 1.8rem;}
}

/* 패널 목록 아래 요약 캡션 (선택 사항) */
.tx-types__caption {margin-top: 4.6rem; font-size: 3.2rem; line-height: 1.5; font-weight: 400; text-align: center; color: var(--black);}
.tx-types__caption b{font-weight: 600;}

/* --------------------------------------------------------------------------
   12. CTA 배너 (.tx-cta)
   -------------------------------------------------------------------------- */
.tx-cta{position: relative; display: flex; align-items: center; min-height: 39rem; overflow: hidden;}
.tx-cta__media{position: absolute; inset: 0; z-index: 0;}
.tx-cta__media img{width: 100%; height: 100%; object-fit: cover; display: block;}
.tx-cta .container{position: relative; z-index: 1;}
.tx-cta__title{font-size: 4rem; font-weight: 400; color: var(--white); line-height: 1.4;}
.tx-cta__title b{font-weight: 600;}
.tx-cta__desc{margin-top: 1.6rem; font-size: 2rem; font-weight: 400; color: var(--white); line-height: 1.6;}
.tx-cta .btn-wrap{margin-top: 2.8rem;}

/* --------------------------------------------------------------------------
   13. 반응형 브레이크포인트 (1280px / 1024px 이하 / 768px 이하)
   -------------------------------------------------------------------------- */
@media (max-width: 1440px) {
  .tx-why__card { padding: 5rem 2rem; }
}

@media (max-width: 1280px) {
  /* --------------------------------------------------------------------------
   회복 과정 타임라인(.recovery-timeline): 1280 이하에서는 가로 4단이 너무
   -------------------------------------------------------------------------- */
  .recovery-timeline { flex-direction: column; align-items: stretch; gap: 0; padding: 0; }
  .recovery-step { flex: none; width: 100%; gap: 2.4rem; padding: 2.4rem 0; }
  .recovery-step + .arrow-wrap + .recovery-step { border-top: 1px solid var(--color-text); }
  .recovery-timeline .arrow-wrap { position: relative; z-index: 1; align-self: center; margin: -1.05rem auto; transform: rotate(90deg); }
  .step-day { flex-direction: row; align-items: baseline; gap: 0.6rem; width: 12rem; flex-shrink: 0; }
  .step-day::after { right: -1.2rem; height: 100%; }


  .tx-principle__inner { gap: 7.5rem; }
  /* 카드 3장 배리언트: 1280에서 카드가 약 390x405까지 줄어 세로 여백·제목을 줄여 아이콘 자리를 확보 */
  .tx-why__card { padding: 4rem 2rem; }
  .tx-why__card-title { font-size: 2.4rem; }
  .tx-why__card-divider { height: 3rem; margin-top: 1.6rem; }
  .principle-media-swiper { height: 65rem; }
  .principle-text-swiper { max-height: 65rem; }
  .principle-text-swiper::before,
  .principle-text-swiper::after { height: 11.5rem; }
  .tx-doctor__stats { gap: 0; }
  .tx-doctor__profile { gap: 8.5rem; }


}

@media (max-width: 1024px) {
  /* --------------------------------------------------------------------------
   시술 3대 강점(.tx-steps, 눈밑 재건 전용): 데스크톱은 컬러 사진 스트립(.left)과
   -------------------------------------------------------------------------- */
  .tx-steps__item { display: grid; grid-template-columns: 1fr auto; height: auto; }
  .tx-steps__item .left { grid-column: 1 / -1; grid-row: 1; width: 100%; height: auto; padding: 3.4rem 12rem 3.4rem 5.4rem; }
  .tx-steps__item .right { display: contents; }
  .tx-steps__ico { grid-column: 2; grid-row: 1; align-self: center; margin-right: 5.4rem; }
  .tx-steps__desc { grid-column: 1 / -1; grid-row: 2; padding: 4rem 5.4rem; text-align: center; }
  /* 센터모드 스와이퍼 — 슬라이드 폭(slidesPerView)과 gap(spaceBetween)은 JS에서 지정 */
  .tx-method{overflow: hidden;}
  .tx-method .container{padding: 0;}
  .tx-method__list .swiper-wrapper { display: flex; gap: 0; }
  /* 카드 높이를 같게 하려고 .swiper-slide height 해제 */
  .tx-method__list .swiper-wrapper { align-items: stretch; }
  .tx-method__item { flex: none; height: auto; }
  .tx-method-controls { display: flex; margin: 4rem auto 0; }

  .tx-doctor__info{width: 100%; }
  .tx-doctor__photo{margin: 0 auto;}
  .tx-doctor__profile { flex-direction: column-reverse; text-align: center; }
  /* 이름/직함은 사진 오른쪽 아래에 겹쳐 배치 */
  .tx-doctor__meta { position: absolute; left: calc(50% + min(27.5%, 13.3rem)); bottom: 9rem; z-index: 1; text-align: left; }
  /* 특별 이력이 있는 프로필: 메시지 → 사진 → 이력 순으로 그리드 재배치 */
  .tx-doctor__profile:has(.tx-doctor__credential) { display: grid; grid-template-columns: 100%; grid-template-areas: "sub" "quote" "photo" "cred"; row-gap: 0; }
  .tx-doctor__profile:has(.tx-doctor__credential) .tx-doctor__info { display: contents; }
  .tx-doctor__profile:has(.tx-doctor__credential) .tx-doctor__sub-title { grid-area: sub; }
  .tx-doctor__profile:has(.tx-doctor__credential) .tx-doctor__quote { grid-area: quote; margin-bottom: 6rem; }
  .tx-doctor__profile:has(.tx-doctor__credential) .tx-doctor__photo { grid-area: photo; justify-self: center; }
  .tx-doctor__profile:has(.tx-doctor__credential) .tx-doctor__meta { grid-area: photo; position: relative; left: auto; right: auto; bottom: auto; align-self: end; justify-self: start; margin: 0 0 9rem calc(50% + min(27.5%, 13.3rem)); }
  .tx-doctor__credential { grid-area: cred; margin-top: 0; padding: 3.5rem 0 4rem; gap: 0; text-align: left; }
  .tx-doctor__credential-label { width: 16.3rem; text-align: center; font-size: 2rem; }
  .tx-doctor__credential-list { padding-left: 2.2rem; gap: 0.4rem; }
  .tx-doctor__credential-tit { font-size: 1.8rem; font-weight: 500; }
  .tx-doctor__credential-item { width: auto; font-size: 1.6rem; }
  /* 시술 원칙: 텍스트 → 컨트롤 → 이미지 순 재배치 (consult-slider.js) */
  .tx-principle__inner { flex-direction: column; gap: 0; text-align: center; }
  .principle-media-swiper,
  .principle-text-swiper { width: 100%; }
  .principle-text-swiper { order: 1; max-height: none; padding-top: 8rem; }
  .tx-principle-controls { order: 2; display: flex; margin: 3rem auto 8rem; }
  .principle-media-swiper { order: 3; }
  /* 세로로 쌓이면 좌우 높이를 맞출 이유가 없어서 이미지 원래 비율로 복귀 */
  .principle-media-swiper { height: auto; aspect-ratio: 958 / 1024; }
  .principle-text-swiper::before,
  .principle-text-swiper::after { display: none; }
  /* 슬라이드 높이를 가장 긴 문구에 맞춰 컨트롤 위치가 흔들리지 않게 */
  .principle-text-swiper .swiper-slide { height: auto; opacity: 1; }
  .principle-text-swiper .swiper-slide-active { border: 0; }
  .tx-principle__body { padding: 0 2rem; }
  .tx-principle__body .sub-title { margin-bottom: 3rem; }
  .tx-principle__body .sub-title::after { content: ''; display: block; width: 4rem; height: 2px; margin: 1.6rem auto 0; background: var(--color-primary); }
  .tx-principle__body .title-wrap { justify-content: center; }

  .tx-hero__media { aspect-ratio: 768 / 1562; }
  .tx-hero__inner{top: 9%; align-items: flex-start;}
  .tx-hero__text{margin-top: 0; width: 100%; text-align: center;}
  .tx-hero__desc::before{left: 50%; transform: translateX(-50%);}

  /* 카드 3장(.tx-why__cards): 1024 이하 가로형 카드, 아이콘 칸은 --why-icon-col */
  .tx-why__cards { grid-template-columns: 1fr; margin-top: 4rem; gap: 2rem; }
  .tx-why__card { display: grid; grid-template-columns: 1fr var(--why-icon-col, 15.5rem); grid-template-rows: 1fr auto auto 1fr; column-gap: 2rem; aspect-ratio: auto; height: 30rem; padding: 0 6.3rem 0 7rem; text-align: left; align-items: start; background-size: cover; background-position: center; }
  .tx-why__card-label { grid-column: 1; grid-row: 2; font-size: 1.6rem; font-weight: 400; }
  .tx-why__card-title { grid-column: 1; grid-row: 3; margin-top: 1rem; font-size: 2.4rem; }
  .tx-why__card-divider { display: none; }
  .tx-why__card-icon { grid-column: 2; grid-row: 1 / -1; align-self: center; justify-self: center; flex: none; margin: 0; }
  .tx-why__card-desc { margin-top: 5rem; font-size: 2rem; line-height: 1.9; }
  /* 비교 1024 이하: 세로 이미지 → 통계, 제목·VS는 이미지 위에 겹침 (VS 위치는 페이지 CSS) */
  .tx-compare__media{display: grid; grid-template-areas: "img" "stats"; aspect-ratio: auto; overflow: visible; background: none;}
  /* 제목은 이미지 윗부분(비어있는 연회색 영역)에 겹쳐 띄운다 — 시안 기준 이미지 상단에서 150px */
  .tx-compare__title{grid-area: img; align-self: start; position: relative; top: auto; left: auto; transform: none; padding: clamp(7.5rem, 19.53vw, 15rem) 2rem 0; font-size: 2.2rem;}
  .tx-compare__title b{font-size: 3.6rem; line-height: 1.2; display: block; margin-top: 0.5rem;}
  .tx-compare__media_bg{grid-area: img;}
  .tx-compare__vs{grid-area: img; position: relative; top: 50%; left: auto; transform: translateY(-50%); align-self: start; justify-self: center; width: clamp(5rem, 13.02vw, 10rem); height: clamp(5rem, 13.02vw, 10rem); font-size: clamp(2.6rem, 6.77vw, 5.2rem);}
  .tx-compare__stats{grid-area: stats; position: static; height: auto; padding: clamp(2.5rem, 6.51vw, 5rem) 0 0; background: none;}
  .tx-compare__stats .container{gap: 0; align-items: stretch;}
  .tx-compare__stats li{flex: 1; flex-direction: column-reverse; justify-content: flex-end; gap: 2rem; text-align: center; color: var(--black);}
  .tx-compare__stats li + li{border-left: 0.2rem dotted #ccc;}
  /* 텍스트 줄 수가 달라도 아이콘은 한 줄에 정렬 */
  .tx-compare__stats li > span{flex: 1;}
  .tx-compare__stats-icon{height: 6.5rem; padding-right: 0; border-right: 0;}
  .tx-compare__stats-ico{background-color: #3A3A3C;}
  .tx-compare__stats-label{font-size: 1.6rem; color: var(--color-primary); text-shadow: none;}
  .tx-compare__stats-desc{font-size: 1.8rem; text-shadow: none; margin-top: 0.6rem;}
  .tx-compare__sub{padding: 3.2rem 0 13rem; font-size: 2.8rem;}
  .tx-compare__sub::before{height: 6rem; margin-bottom: 3rem;}
  .tx-principle__body .title-wrap { gap: 1rem; }
  .tx-principle__body .num { width: 3.7rem; height: 3.7rem; font-size: 1.4rem; }
  .tx-principle__body .desc { font-size: 1.8rem; }
  .tx-doctor__profile { gap: 6rem; }
  .tx-doctor__stat-unit{font-size: 2rem;}

  .tx-related{overflow: hidden;}
  .tx-related__slider{overflow: visible;}

  /* 종류별 카드 1024 이하: 센터모드 캐러셀 (tx-types.js), 사진은 카드 아래 */
  .tx-types { padding: 9rem 0; overflow: hidden; }
  .tx-types--expand .tx-types__slider { overflow: visible; }
  .tx-types--expand .tx-types__list { height: auto; overflow: visible; gap: 0; margin-top: 4rem; align-items: stretch; }
  .tx-types--expand .tx-types__item { flex: none; width: 55.1rem; height: auto; display: flex; flex-direction: column; background: var(--white); }
  .tx-types--expand .tx-types__info { position: static; order: -1; flex: 1; align-items: center; text-align: center; padding: 6.4rem 2rem 6.4rem; background: none; }
  .tx-types__case { display: block; font-size: 1.6rem; font-weight: 500; line-height: 1.3; color: var(--color-primary); }
  .tx-types--expand .tx-types__label { margin-top: 1rem; font-size: 2.6rem; color: var(--black); white-space: normal; line-height: 1.2;}
  .tx-types--expand .tx-types__label br.pc-only { display: none; }
  .tx-types--expand .tx-types__label span { display: inline; font-size: 0.7em; }
  .tx-types--expand .tx-types__desc { max-height: none; opacity: 1; overflow: visible; margin-top: 2.4rem; font-size: 1.8rem; line-height: 1.75; color: var(--color-text); }
  .tx-types--expand .tx-types__thumb { position: relative; inset: auto; height: auto; aspect-ratio: 551 / 442; background: none; }
  .tx-types--expand .tx-types__thumb img { opacity: 1; object-position: center; }
  .tx-types--expand .tx-types__num { right: 4rem; bottom: 3.5rem; font-size: 2.4rem; }
  .tx-types-controls { display: flex; margin: 4rem auto 0; }
  .tx-types__caption { margin-top: 5rem; font-size: 2.2rem; line-height: 1.73; }

  .tx-checklist__list{ grid-template-columns: 1fr;}
  .tx-cta{min-height: auto; aspect-ratio: 768 / 431;}

  /* 1024 비율 그룹: 섹션 타이틀(3.6) > 소제목(2.2~2.8) > 본문(1.6~2) */
  .tx-why__callout { font-size: 2.8rem; }
  .tx-method__title h3 { font-size: 2.4rem; }
  .tx-steps__badge { font-size: 2rem; }
  .tx-steps__title { font-size: 2.6rem; }
  .tx-steps__desc { font-size: 2rem; }
  .tx-steps__bottom { font-size: 2.4rem; }
  .tx-principle__body .sub-title { font-size: 1.8rem; }
  .tx-principle__body .title { font-size: 2.6rem; }
  .tx-doctor__quote { font-size: 1.8rem; }
  .tx-doctor__quote .highlight-text { font-size: 2.2rem; }
  .tx-doctor__name { font-size: 2.8rem; }
  .recovery-title { font-size: 2.2rem; }
  .step-day .label { font-size: 2rem; }
  .step-day .num { font-size: 2.8rem; }
  .tx-related__name { font-size: 1.8rem; }
  .tx-checklist__title { font-size: 2.2rem; }
  .tx-checklist__desc { font-size: 1.8rem; }
  .tx-faq .section-title { font-size: 2.6rem; }
  .tx-faq__question { font-size: 1.8rem; }
  .tx-cta__title { font-size: 3.2rem; }

}

/* 섹션 여백 — 페이지 CSS(.tx-why 등)가 나중에 로드되므로 main 범위로 올리고 769~1024로 한정 */
@media (min-width: 769px) and (max-width: 1024px) {
  main .tx-why,
  main .tx-method,
  main .tx-steps,
  main .tx-doctor,
  main .tx-recommend,
  main .tx-related,
  main .tx-checklist { padding-top: 9rem; padding-bottom: 9rem; }
}

@media (max-width: 768px) {
  .tx-eyebrow{font-size: clamp(1.3rem, 2.6vw, 2rem); letter-spacing: clamp(0.35rem, 0.91vw, 0.7rem);}
  .tx-hero__title{font-size: clamp(3.6rem, 8.33vw, 6.4rem); margin: clamp(0.4rem, 1.04vw, 0.8rem) 0 clamp(1.8rem, 4.56vw, 3.5rem);}
  .tx-hero__desc{font-size: clamp(1.5rem, 3.65vw, 2.8rem); padding-top: clamp(1.4rem, 3.52vw, 2.7rem); }
  .tx-hero__desc::before{width: clamp(2.5rem, 6.51vw, 5rem);}

  .ba-section{padding: clamp(2.8rem, 7.29vw, 5.6rem) 0 clamp(6.5rem, 16.93vw, 13rem);}



  .tx-why .section-title,
  .tx-method .section-title,
  .tx-steps .section-title,
  .tx-doctor .section-title,
  .tx-checklist .section-title,
  .tx-types .section-title,
  .tx-recommend .section-title{font-size: clamp(2.4rem, 7.16vw, 5.5rem);}
  /* 원장 섹션 제목 + 아래 구분선 (통계 박스가 있는 섹션 제외) */
  .tx-doctor:not(:has(.tx-doctor__stats-wrap)) .section-title{font-size: clamp(2.4rem, 6.51vw, 5rem); padding-bottom: clamp(2rem, 5.21vw, 4rem); border-bottom: 1px solid var(--color-text);}

  .tx-why{padding: clamp(8rem, 20.83vw, 16rem) 0; background-image: url("../../images/common/m_tx-why-bg.png");}
  .tx-why__media__inner{flex-direction: column;}
  .tx-why__media{margin: clamp(2rem, 5.21vw, 4rem) clamp(4rem, 10.42vw, 8rem) clamp(2.5rem, 6.51vw, 5rem);}
  .tx-why__img{width: 100%;}
  .tx-why__img-label{font-size: clamp(1.3rem, 3.12vw, 2.4rem); top: clamp(1.2rem, 3.12vw, 2.4rem); left: clamp(1.4rem, 3.65vw, 2.8rem);}
  .tx-why__arrow{display: none;}
  .tx-why__desc{font-size: clamp(1.3rem, 3.39vw, 2.6rem); gap: clamp(2.1rem, 5.47vw, 4.2rem); letter-spacing: -0.05rem;}
  .tx-why__callout{font-size: clamp(2.2rem, 5.21vw, 4rem); margin-top: clamp(2rem, 5.21vw, 4rem);}
  .tx-why__cards { margin-top: clamp(2rem, 5.21vw, 4rem); gap: clamp(1rem, 2.6vw, 2rem); }
  .tx-why__card { height: clamp(15rem, 39.06vw, 30rem); column-gap: clamp(1rem, 2.6vw, 2rem); padding: 0 clamp(3.15rem, 8.2vw, 6.3rem) 0 clamp(3.5rem, 9.11vw, 7rem); }
  .tx-why__card-label { font-size: clamp(1.3rem, 2.86vw, 2.2rem); }
  .tx-why__card-title { font-size: clamp(1.8rem, 4.69vw, 3.6rem); margin-top: clamp(0.5rem, 1.3vw, 1rem); }
  .tx-why__card-desc { font-size: clamp(1.5rem, 3.91vw, 3rem); margin-top: clamp(2.5rem, 6.51vw, 5rem); }

  .tx-method{padding: clamp(6.5rem, 16.93vw, 13rem) 0;}
  .tx-method__list{margin-top: clamp(2.25rem, 5.86vw, 4.5rem);}
  .tx-method__title{padding: clamp(3.4rem, 8.85vw, 6.8rem) 0 clamp(3.05rem, 7.94vw, 6.1rem);}
  .tx-method__title .tx-method__point{font-size: clamp(1.3rem, 2.86vw, 2.2rem);}
  .tx-method__title h3{font-size: clamp(1.8rem, 4.69vw, 3.6rem);}
  .tx-method__desc{font-size: clamp(1.3rem, 3.12vw, 2.4rem); color: var(--color-muted-sub); padding: 0; height: clamp(11.25rem, 29.3vw, 22.5rem); display: flex; align-items: center; justify-content: center; }
  .tx-method-controls{margin-top: clamp(2rem, 5.21vw, 4rem);}


  /* 시술 3대 강점(.tx-steps) — 두 단 레이아웃은 1024 블록에서 잡고, 여기선 크기만 축소 */
  .tx-steps { padding: clamp(6.25rem, 16.28vw, 12.5rem) 0 clamp(6.5rem, 16.93vw, 13rem); }
  .tx-steps__list { margin-top: clamp(2rem, 5.21vw, 4rem); gap: 0; }
  .tx-steps__item .left { gap: clamp(0.7rem, 1.82vw, 1.4rem); padding: clamp(2.1rem, 5.47vw, 4.2rem) clamp(3rem, 7.81vw, 6rem) clamp(2.6rem, 6.77vw, 5.2rem) clamp(2.4rem, 6.25vw, 4.8rem); }
  .tx-steps__badge { font-size: clamp(1.5rem, 3.91vw, 3rem); }
  .tx-steps__title { font-size: clamp(2.25rem, 5.86vw, 4.5rem); }
  .tx-steps__ico { margin-right: clamp(2.35rem, 6.12vw, 4.7rem); width: clamp(3.75rem, 9.77vw, 7.5rem); height: clamp(2.5rem, 6.51vw, 5rem); }
  .tx-steps__desc { padding: clamp(2.75rem, 7.16vw, 5.5rem) 0; font-size: clamp(1.8rem, 4.69vw, 3.6rem);  text-align: center; }
  .tx-steps__bottom { margin-top: clamp(3.15rem, 8.2vw, 6.3rem); font-size: clamp(1.4rem, 3.65vw, 2.8rem); }

  /* 원칙 */
  .principle-text-swiper{padding-top: clamp(6.4rem, 16.67vw, 12.8rem);}
  .tx-principle__body .sub-title { font-size: clamp(1.5rem, 3.91vw, 3rem); font-weight: 700; margin-bottom: clamp(2.1rem, 5.47vw, 4.2rem);}
  .tx-principle__body .sub-title::after{width: clamp(3.15rem, 8.2vw, 6.3rem); height: clamp(0.2rem, 0.39vw, 0.3rem); margin-top: clamp(1.3rem, 3.39vw, 2.6rem);}
  .tx-principle__body .title-wrap{gap: clamp(1.3rem, 3.39vw, 2.6rem); margin-bottom: clamp(1.35rem, 3.52vw, 2.7rem);}
  .tx-principle__body .title{font-size: clamp(2.25rem, 5.86vw, 4.5rem);}
  .tx-principle__body .num { width: clamp(2.5rem, 6.51vw, 5rem); height: clamp(2.5rem, 6.51vw, 5rem); font-size: clamp(1.3rem, 2.6vw, 2rem);}
  .tx-principle__body .desc { font-size: clamp(1.4rem, 3.65vw, 2.8rem); }
  .tx-principle-controls{margin: clamp(2rem, 5.21vw, 4rem) auto clamp(5rem, 13.02vw, 10rem);}

  /* 통계 수치: 숫자 위, 설명 아래로 세로 스택 */

  .tx-doctor{padding: clamp(6.5rem, 16.93vw, 13rem) 0;}
  .tx-doctor__stats-wrap{margin-top: clamp(2rem, 5.21vw, 4rem);}
  .tx-doctor__stats { gap: 0; padding: clamp(1.5rem, 3.91vw, 3rem) 0;}
  .tx-doctor__stat-item dd { flex-direction: column; gap: clamp(1rem, 2.6vw, 2rem); width: 100%;}
  .tx-doctor__stat-value { padding-right: 0; width: 100%; text-align: center; padding-bottom: clamp(1rem, 2.6vw, 2rem);}
  .tx-doctor__stat-value::after { width: 90%; height: 0.1rem; border-right: none; border-bottom: 0.2rem dotted #ccc; right: 5%; top: unset; transform: unset; bottom: 0;}
  .tx-doctor__stat-num{font-size: clamp(4rem, 10.42vw, 8rem);}
  .tx-doctor__stat-unit{font-size: clamp(1.3rem, 3.12vw, 2.4rem);}
  .tx-doctor__stat-desc { font-size: clamp(1.3rem, 3.12vw, 2.4rem); text-align: center; }
  .tx-doctor__caption{padding: clamp(0.85rem, 2.21vw, 1.7rem); font-size: clamp(1.3rem, 2.86vw, 2.2rem);}

  .tx-doctor__recovery { display: flex; flex-direction: column; margin-top: clamp(3.25rem, 8.46vw, 6.5rem);}
  .recovery-header { display: contents; }
  .recovery-title { order: 1; margin-bottom: clamp(0.95rem, 2.47vw, 1.9rem); font-size: clamp(1.8rem, 4.69vw, 3.6rem);}
  .recovery-timeline { order: 2; }
  /* 원 크기가 바뀌면 구분선 위 중앙에 걸치도록 음수 마진(크기의 절반)과 안쪽 화살표(PC 비율 1.1/2.1)도 같이 줄인다 */
  .recovery-timeline .arrow-wrap{--arrow-wrap-size: clamp(1.6rem, 3.26vw, 2.5rem); width: var(--arrow-wrap-size); height: var(--arrow-wrap-size); margin: calc(var(--arrow-wrap-size) / -2) auto;}
  .recovery-timeline .arrow-wrap .arrow{width: clamp(0.85rem, 1.69vw, 1.3rem); height: clamp(0.85rem, 1.69vw, 1.3rem);}
  .recovery-caption { order: 3; margin-top: clamp(1.5rem, 3.91vw, 3rem); font-size: clamp(1.3rem, 3.5vw, 2.2rem); letter-spacing: -0.09rem;}
  .recovery-caption + .recovery-caption{margin-top: 0;}
  .recovery-step{gap: clamp(1.8rem, 4.69vw, 3.6rem); padding: clamp(1.5rem, 3.91vw, 3rem) 0;}
  .step-day{width: clamp(9rem, 23.44vw, 18rem);}
  .step-day::after{right: clamp(-1.8rem, -2.34vw, -0.9rem);}
  .step-day .label { font-size: clamp(2rem, 5.21vw, 4rem); }
  .step-day .num { font-size: clamp(2.5rem, 6.51vw, 5rem); }
  .step-title { font-size: clamp(1.3rem, 3.39vw, 2.6rem); }
  .step-desc { font-size: clamp(1.3rem, 2.86vw, 2.2rem); }
  .step-content{flex: 1; }
  .tx-doctor__profile { gap: clamp(2.25rem, 5.86vw, 4.5rem); margin-top: clamp(3rem, 7.81vw, 6rem);}
  .tx-doctor__profile::before{content: none;}
  .tx-doctor__sub-title{font-size: clamp(1.3rem, 3.12vw, 2.4rem); margin-bottom: clamp(1.85rem, 4.82vw, 3.7rem);}
  .tx-doctor__quote{font-size: clamp(1.3rem, 3.12vw, 2.4rem); gap: clamp(1.5rem, 3.91vw, 3rem); margin-bottom: 0;}
  .tx-doctor__quote .highlight-text { font-size: clamp(1.4rem, 3.65vw, 2.8rem); }
  .tx-types__list { grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: clamp(0.5rem, 1.3vw, 1rem); }
  .tx-types__label { font-size: clamp(1.3rem, 1.82vw, 1.4rem); }
  /* 사진·이름은 about 의료진 카드 모바일과 동일 */
  .tx-doctor__photo { width: clamp(28rem, 70.31vw, 54rem); }
  .tx-doctor__meta { left: auto; right: 0; bottom: clamp(3.5rem, 8.46vw, 6.5rem); gap: 0; }
  .tx-doctor__name { font-size: clamp(1.8rem, 4.56vw, 3.5rem); }
  .tx-doctor__role { font-size: clamp(1.3rem, 3.12vw, 2.4rem); }
  .tx-doctor__spec { font-size: clamp(1.3rem, 3.5vw, 2.2rem); margin-top: 0.4rem; }
  /* 특별 이력 있는 프로필(1024 블록 참고) */
  .tx-doctor__profile:has(.tx-doctor__credential) .tx-doctor__quote { margin-bottom: clamp(2.25rem, 5.86vw, 4.5rem); }
  .tx-doctor__profile:has(.tx-doctor__credential) .tx-doctor__meta { justify-self: end; margin: 0 0 clamp(3.5rem, 8.46vw, 6.5rem); }
  .tx-doctor__credential { padding: clamp(1.75rem, 4.56vw, 3.5rem) 0 clamp(2rem, 5.21vw, 4rem); }
  .tx-doctor__credential-label { width: clamp(8.15rem, 20.22vw, 16.3rem); font-size: clamp(1.4rem, 3.65vw, 2.8rem); }
  .tx-doctor__credential-list { padding-left: clamp(1.1rem, 2.56vw, 2.2rem); }
  .tx-doctor__credential-tit { font-size: clamp(1.3rem, 2.86vw, 2.2rem); }
  .tx-doctor__credential-item { font-size: clamp(1.3rem, 2.6vw, 2rem); }

  /* 추천합니다 */
  .tx-recommend{padding: clamp(6.5rem, 16.93vw, 13rem) 0; background-image: url("../../images/common/m_tx-recommend-bg.png");}
  /* 카드·아이콘·여백은 768 시안 글자 비율(PC 2rem → 3rem)에 맞춰 PC 값의 1.5배를 최대값으로 */
  .tx-recommend-swiper{margin-top: clamp(2rem, 5.21vw, 4rem);}
  .tx-recommend__item{width: clamp(25.5rem, 66.4vw, 51rem); height: clamp(36.75rem, 95.7vw, 73.5rem); padding: clamp(6.6rem, 17.19vw, 13.2rem) clamp(2rem, 5.21vw, 4rem) clamp(5.5rem, 14.32vw, 11rem);}
  .tx-recommend__icon{width: clamp(12rem, 31.25vw, 24rem); height: clamp(12rem, 31.25vw, 24rem); margin-bottom: clamp(4.5rem, 11.72vw, 9rem);}
  .tx-recommend__item.swiper-slide-active,
  .tx-recommend__item:hover{padding-top: clamp(3.23rem, 8.4vw, 6.45rem);}
  .tx-recommend__item.swiper-slide-active .tx-recommend__icon,
  .tx-recommend__item:hover .tx-recommend__icon{width: clamp(16.8rem, 43.75vw, 33.6rem); height: clamp(16.8rem, 43.75vw, 33.6rem); margin-bottom: clamp(3rem, 7.81vw, 6rem);}
  .tx-recommend__label{font-size: clamp(1.5rem, 3.91vw, 3rem); padding-top: clamp(1.9rem, 4.95vw, 3.8rem);}
  .tx-recommend__num{font-size: clamp(1.5rem, 3.91vw, 3rem); bottom: clamp(2rem, 5.21vw, 4rem); right: clamp(2rem, 5.21vw, 4rem);}
  .tx-recommend-controls{margin-top: clamp(2rem, 5.21vw, 4rem);}

  /* 함께하면 좋은 시술 */
  .tx-related{padding: clamp(7rem, 18.23vw, 14rem) 0 clamp(6.5rem, 16.93vw, 13rem);}
  .tx-related .section-title{font-size: clamp(2.4rem, 6.51vw, 5rem);}
  .tx-related__slider.swiper-initialized{margin-top: clamp(2rem, 5.21vw, 4rem);}
  .tx-related__slider.swiper-initialized .tx-related__card{width: clamp(27.5rem, 71.61vw, 55rem);}
  .tx-related__info{margin-top: clamp(1.65rem, 4.3vw, 3.3rem); }
  .tx-related__name{font-size: clamp(1.4rem, 3.65vw, 2.8rem); margin-bottom: clamp(0.3rem, 0.78vw, 0.6rem);}
  .tx-related__desc{font-size: clamp(1.3rem, 3.12vw, 2.4rem); }
  /* 탭 오버레이(모바일 크기) — 버튼은 공통 .btn--sm 모바일 규칙(common.css) 사용 */
  .tx-related__overlay{gap: clamp(1rem, 2.6vw, 2rem);}
  .tx-related__overlay-title{font-size: clamp(1.8rem, 4.69vw, 3.6rem);}

  /* 체크리스트 */
  .tx-checklist{padding: clamp(6.5rem, 16.93vw, 13rem) 0;}
  .tx-checklist__list { gap: clamp(1.5rem, 3.91vw, 3rem); }
  .tx-checklist__head { height: clamp(8.35rem, 21.74vw, 16.7rem); min-height: auto; padding: clamp(2.35rem, 6.12vw, 4.7rem) clamp(2rem, 5.21vw, 4rem); gap: clamp(0.9rem, 2.34vw, 1.8rem); justify-content: flex-start;}
  .tx-checklist__check{width: clamp(1.8rem, 5.34vw, 4.1rem); height: clamp(1.8rem, 5.34vw, 4.1rem);}
  .tx-checklist__title { font-size: clamp(1.6rem, 4.69vw, 3.6rem); line-height: 1.2;}
  .tx-checklist__num{font-size: clamp(1.3rem, 3.91vw, 3rem); top: clamp(1rem, 3vw, 3rem); right: clamp(1rem, 3vw, 3rem);}
  .tx-checklist__desc { font-size: clamp(1.5rem, 3.91vw, 3rem); }
  .tx-checklist__body { min-height: clamp(10rem, 26.04vw, 20rem);  }

  .tx-faq{margin-top: clamp(3.65rem, 9.5vw, 7.3rem);}
  .tx-faq .section-title{font-size: clamp(1.8rem, 4.69vw, 3.6rem); margin-bottom: clamp(1.4rem, 3.65vw, 2.8rem);}
  .tx-faq__question{gap: clamp(0.5rem, 1.3vw, 1rem); font-size: clamp(1.4rem, 3.65vw, 2.8rem);}
  .tx-faq__item{padding: clamp(1.75rem, 4.56vw, 3.5rem) 0;}
  .tx-faq__question{--faq-q-w: clamp(1.75rem, 4.56vw, 3.5rem);}
  .tx-faq__question > span:first-child::before{font-size: clamp(1.6rem, 4.17vw, 3.2rem);}
  .tx-faq__question-icon{width: clamp(1.2rem, 2.34vw, 1.8rem); height: clamp(1.2rem, 2.34vw, 1.8rem);}
  /* +/- 선 길이도 아이콘 박스(clamp) 크기를 그대로 따라가게 */
  .tx-faq__question-icon::before{width: 100%;}
  .tx-faq__question-icon::after{height: 100%;}
  .tx-faq__answer{font-size: clamp(1.3rem, 3.12vw, 2.4rem); padding: clamp(1.5rem, 3.91vw, 3rem) 0 0 clamp(1.75rem, 4.56vw, 3.5rem);}


  /*cta*/
  .tx-cta__title{font-size: clamp(1.8rem, 4.69vw, 3.6rem);}
  .tx-cta__desc{font-size: clamp(1.3rem, 3.12vw, 2.4rem); margin-top: clamp(1rem, 2.6vw, 2rem); line-height: 1.3;}
  .tx-cta .btn-wrap{margin-top: clamp(1.5rem, 3.91vw, 3rem);}

  /* 종류별 카드 캐러셀 — 레이아웃은 1024 블록, 여기선 크기만 */
  .tx-types { padding: clamp(6.5rem, 16.93vw, 13rem) 0; }
  .tx-types--expand .tx-types__list { margin-top: clamp(2rem, 5.21vw, 4rem); }
  .tx-types--expand .tx-types__item { width: clamp(27.55rem, 71.74vw, 55.1rem); }
  .tx-types--expand .tx-types__info { padding: clamp(3.2rem, 8.33vw, 6.4rem) clamp(1rem, 2.6vw, 2rem); }
  .tx-types__case { font-size: clamp(1.3rem, 2.86vw, 2.2rem); }
  .tx-types--expand .tx-types__label span{font-size: 0.75em;}
  .tx-types--expand .tx-types__label { font-size: clamp(1.8rem, 4.69vw, 3.6rem); margin-top: clamp(0.5rem, 1.3vw, 1rem); }
  .tx-types--expand .tx-types__desc { font-size: clamp(1.3rem, 3.12vw, 2.4rem); margin-top: clamp(1.2rem, 3.13vw, 2.4rem); }
  .tx-types--expand .tx-types__num { right: clamp(2rem, 5.21vw, 4rem); bottom: clamp(1.75rem, 4.56vw, 3.5rem); font-size: clamp(1.5rem, 3.91vw, 3rem); }
  .tx-types-controls { margin-top: clamp(2rem, 5.21vw, 4rem); }
  .tx-types__caption { margin-top: clamp(2.5rem, 6.51vw, 5rem); font-size: clamp(1.6rem, 4.17vw, 3.2rem); line-height: 1.5;}


  .tx-compare__title{font-size: clamp(1.6rem, 4.17vw, 3.2rem); padding: clamp(7.5rem, 19.53vw, 15rem) 0 0;}
  .tx-compare__title b{font-size: clamp(2.25rem, 5.86vw, 4.5rem); margin-top: clamp(0.25rem, 0.65vw, 0.5rem);}
  .tx-compare__stats li{gap: clamp(1rem, 2.6vw, 2rem);}
  .tx-compare__stats-label{font-size: clamp(1.3rem, 2.86vw, 2.2rem);}
  .tx-compare__stats-desc{font-size: clamp(1.3rem, 3.39vw, 2.6rem); margin-top: clamp(0.3rem, 0.78vw, 0.6rem);}
  .tx-compare__stats-icon{height: clamp(3.25rem, 8.46vw, 6.5rem);}
  .tx-compare__sub{font-size: clamp(2rem, 5.21vw, 4rem); padding: clamp(1.6rem, 4.17vw, 3.2rem) 0 clamp(6.5rem, 16.93vw, 13rem);}
  .tx-compare__sub::before{height: clamp(3rem, 7.81vw, 6rem); margin-bottom: clamp(1.5rem, 3.91vw, 3rem);}
}