@charset "UTF-8";

/* ==========================================================================
   스킨부스터 페이지 전용 스타일
   ========================================================================== */
/* 왜 섹션: 밝은 배경 + 카드별 배경 사진 */
.tx-why {background-image: url("../images/sub/skin-restoration/skinbooster_why_bg.webp"); padding: 20rem 0 18rem; color: var(--color-text);}
.tx-why__desc {font-size: 2rem; font-weight: 500; color: var(--color-text);}

.tx-why__card:nth-child(1){background-image: url("../images/sub/skin-restoration/skinbooster_why_bg01.webp");}
.tx-why__card:nth-child(2){background-image: url("../images/sub/skin-restoration/skinbooster_why_bg02.webp"); background-color: #094048;}
.tx-why__card:nth-child(3){background-image: url("../images/sub/skin-restoration/skinbooster_why_bg03.webp"); background-color: #007b8c; }

.tx-why__card:nth-child(1) .tx-why__card-icon{width: clamp(11.2rem, 5.3vw + 7.13rem, 17.3rem);}
.tx-why__card:nth-child(3) .tx-why__card-icon{width: clamp(9rem, 4.25vw + 5.73rem, 13.9rem);}

/* 의료진 프로필(구분선형)은 treatment-detail.css의 .tx-doctor--line 공통 */

.tx-compare__stats .container{max-width: 108rem;}
/* 비교 통계 아이콘 svg·비율 (공통 스타일은 treatment-detail.css) */
.tx-compare__stats li:nth-child(1) .tx-compare__stats-ico{aspect-ratio: 55 / 49; -webkit-mask-image: url("../images/sub/skin-restoration/skinbooster_compare_icon01.svg"); mask-image: url("../images/sub/skin-restoration/skinbooster_compare_icon01.svg");}
.tx-compare__stats li:nth-child(2) .tx-compare__stats-ico{aspect-ratio: 60 / 60; -webkit-mask-image: url("../images/sub/skin-restoration/skinbooster_why_icon02.svg"); mask-image: url("../images/sub/skin-restoration/skinbooster_why_icon02.svg");}
.tx-compare__stats li:nth-child(3) .tx-compare__stats-ico{aspect-ratio: 61 / 58; -webkit-mask-image: url("../images/sub/skin-restoration/skinbooster_compare_icon03.svg"); mask-image: url("../images/sub/skin-restoration/skinbooster_compare_icon03.svg");}

.tx-recommend__inner{max-width: 178rem; margin: 0 auto; }

/* 1024 이하 가로형 카드 아이콘 크기 (아이콘 칸은 1번 기준) */
@media (max-width: 1024px) {
  .tx-why__cards{--why-icon-col: 17.2rem;}
  .tx-why__card:nth-child(1) .tx-why__card-icon{width: 17.2rem;}
  .tx-why__card:nth-child(2) .tx-why__card-icon{width: 15.5rem;}
  .tx-why__card:nth-child(3) .tx-why__card-icon{width: 14rem;}

  /* 비교: m_skinbooster_compare 기준 — 위(주사)/아래(큐어젯) 그림 경계가 이미지 높이의 약 55.3% 지점 */
  .tx-compare__vs{top: 55.3%;}
}

@media (max-width: 768px) {
  /* 위 .tx-why 패딩(20rem/18rem)이 페이지 CSS라 공통 모바일 값을 덮으므로 여기서 다시 줄인다 */
  .tx-why{background-image: url("../images/sub/skin-restoration/m_skinbooster_why_bg.webp"); padding: clamp(6.75rem, 17.58vw, 13.5rem) 0 clamp(7.5rem, 19.53vw, 15rem);}
  .tx-why .section-title{font-size: clamp(2.4rem, 6.51vw, 5rem);}
  .tx-why__cards{--why-icon-col: clamp(8.6rem, 22.4vw, 17.2rem);}
  .tx-why__card:nth-child(1){background-image: url("../images/sub/skin-restoration/m_skinbooster_why_bg01.webp");}
  .tx-why__card:nth-child(2){background-image: url("../images/sub/skin-restoration/m_skinbooster_why_bg02.webp"); }
  .tx-why__card:nth-child(3){background-image: url("../images/sub/skin-restoration/m_skinbooster_why_bg03.webp");  }

  .tx-why__card:nth-child(1) .tx-why__card-icon{width: clamp(8.6rem, 22.4vw, 17.2rem);}
  .tx-why__card:nth-child(2) .tx-why__card-icon{width: clamp(7.75rem, 20.18vw, 15.5rem);}
  .tx-why__card:nth-child(3) .tx-why__card-icon{width: clamp(7rem, 18.23vw, 14rem);}
}