@charset "UTF-8";

/* ==========================================================================
   동안 볼륨교정 페이지 전용 배경 이미지
   ========================================================================== */
.tx-why__media{max-width: 118rem;}

/* 비교 통계 아이콘 svg·비율 (공통 스타일은 treatment-detail.css) */
.tx-compare__stats li:nth-child(1) .tx-compare__stats-ico{aspect-ratio: 70 / 78; -webkit-mask-image: url("../images/sub/anti-aging/volume_compare_icon01.svg"); mask-image: url("../images/sub/anti-aging/volume_compare_icon01.svg");}
.tx-compare__stats li:nth-child(2) .tx-compare__stats-ico{aspect-ratio: 52 / 58; -webkit-mask-image: url("../images/sub/anti-aging/volume_compare_icon02.svg"); mask-image: url("../images/sub/anti-aging/volume_compare_icon02.svg");}
.tx-compare__stats li:nth-child(3) .tx-compare__stats-ico{aspect-ratio: 56 / 60; -webkit-mask-image: url("../images/sub/anti-aging/volume_compare_icon03.svg"); mask-image: url("../images/sub/anti-aging/volume_compare_icon03.svg");}

/* PC 전용 조정 (공통 반응형 값을 덮지 않도록) */
@media (min-width: 1025px) {
  .tx-why{padding: 23rem 0 18rem;}
}

@media (max-width: 1024px) {
  /* 비교 모바일 레이아웃은 treatment-detail.css 공통, 여기는 이미지 기준 값만 */
  /* VS 원 위치 = m_volume_compare 그림 경계(55.2%) */
  .tx-compare__vs{top: 55.2%;}
}

@media (max-width: 768px) {

  /* 왜 필요할까요: 시안은 제목 → 설명 → 사진 순. 제목은 한 줄에 들어가도록 자간만 살짝 좁힘 */
  .tx-why .container{display: flex; flex-direction: column;}
  .tx-why .section-title{letter-spacing: -0.03em;}
  .tx-why__desc{order: 1; margin-top: clamp(1.5rem, 3.91vw, 3rem);}
  .tx-why__media{order: 2; margin: clamp(2.5rem, 6.51vw, 5rem) clamp(5.4rem, 14.06vw, 10.8rem) 0;}
}