@charset "UTF-8";

/* ==========================================================================
   Before & After (.ba-section)
   ========================================================================== */
.ba-section {position: relative;padding: 16.3rem 0 14.5rem;overflow: hidden;}
.ba-section::before {content: "Before & After"; font-family: "Highsummit", serif; position: absolute; bottom: -6rem; left: 50%; transform: translateX(-50%); font-size: clamp(10rem, 9vw + 3rem, 21rem); font-weight: 400; color: #f9f9f9; white-space: nowrap; pointer-events: none;}
.sub-page .ba-section::before{content: none;}
  /* 헤더: 타이틀 + 탭 + 더보기 */
.ba-header {position: relative;z-index: 1;display: flex;align-items: center;justify-content: space-between;gap:2rem;}
.ba-header.center{justify-content: center;}
.ba-header__title {flex: none; margin-bottom: 2rem;}
/* .center: 타이틀 텍스트도 가운데 정렬 */
.ba-header.center .ba-header__title{text-align: center;}
.sub-page .ba-header__title{margin-bottom: 0;}

  /* min-width:0: 탭 스와이퍼 overflow 방지 */
.ba-header .left {min-width: 0;}
.ba-section .tab-group{margin-top: 2.9rem;}

/* 비교 캐러셀 — 메인/서브 동일 크기 (배지 위치만 서브 전용) */
/* 1920 이상에서 옆 슬라이드 사진이 점점 드러나도록 패널 폭 확장 (약 2300px까지) */
.ba-panel {position: relative;z-index: 1;margin: 3rem auto 0;max-width: 238rem;overflow: hidden;}
.ba-slider {overflow: visible;}

.ba-slider .swiper-wrapper {align-items: center;height: 52rem;}
.ba-slide {display: flex; align-items: center; width: min(88.7rem, 84vw);}
.ba-slide__compare {position: relative; display: flex; gap: 2rem; transition: gap 0.3s ease;}
.ba-slide.swiper-slide-active .ba-slide__compare {gap: 0.3rem; width: 100%;}
.ba-slide__half {position: relative; flex: none; width: 27.8rem; height: 27.7rem; overflow: hidden; background: var(--white); transition: width 0.3s ease, height 0.3s ease;}
.ba-slide__half img {width: 100%;height: 100%;object-fit: cover;}
.ba-slide.swiper-slide-active .ba-slide__half {flex: 1; width: auto; height: 52rem;}
.ba-slide:not(.swiper-slide-active) .ba-slide__badge {display: none;}
.ba-slide:not(.swiper-slide-active) .ba-slide__gate-text,
.ba-slide:not(.swiper-slide-active) .ba-slide__gate-btn {display: none;}
.ba-slide:not(.swiper-slide-active) .ba-slide__gate {background: rgba(255, 255, 255, 0.25); backdrop-filter: blur(4px);}
.ba-slide__badge {position: absolute; z-index: 2; left: 50%;bottom: 3rem;transform: translateX(-50%);font-size: 2.5rem; font-weight: 700;color: #fff;}
.ba-slide__gate {position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2rem; background: rgba(255, 255, 255, 0.55); backdrop-filter: blur(6px);}
.ba-slide__gate-text {font-size: 2.2rem;font-weight: 400;color: var(--black);}
.ba-slide__gate-text b {font-weight: 700;}

.ba-slide__gate-btn {width: 14.6rem;font-size: 1.5rem;}

/* 캡션(활성 슬라이드 정보) + prev/next/카운터를 한 줄에 배치하는 공통 푸터 */
.ba-slide__caption {display: flex; align-items: center; justify-content: space-between; gap: 2rem; width: min(88.7rem, 84vw); margin: 2.7rem auto 0;}
.ba-slide__caption-text {text-align: left; font-size: 2.4rem; color: var(--color-muted-sub); display: flex; align-items: center; gap: 3rem;}
.ba-slide__caption-text .divider {display: inline-block; width: 0.2rem; height: 1.5rem; background-color: var(--color-muted-sub);}
.ba-slide__category {font-weight: 700;color: var(--color-text);}

/* 캡션 영역: 시술명 + 촬영 시점(수술 후 N개월)을 세로로 쌓아 왼쪽에 배치 */
.ba-slide__caption-info {display: flex; flex-direction: column; gap: 0.6rem;}
.ba-slide__duration {font-size: 2rem; color: var(--color-muted-sub);}

/* 시술 상세 페이지(.tx-*)처럼 캡션 텍스트 없이 카운터/화살표만 남을 때 가운데 정렬 */
.ba-slide__caption--controls-only{justify-content: center;}

/* 촬영 각도(Front/45˚/90˚) 토글 — 실제 각도별 사진 데이터 연동 전까지는 선택 상태만 전환 */
.ba-angle-toggle {flex: none; display: flex; gap: 0.5rem;}
.ba-angle-toggle__btn {width: 6.9rem; height: 6.9rem; padding: 0; border-radius: 0.5rem; font-size: 1.6rem; font-weight: 400; color: var(--color-muted-sub); background: #f8f8f8; transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;}
.ba-angle-toggle__btn[aria-pressed="true"] {background: var(--color-primary); color: var(--white);}

/* 활성 슬라이드만 선명하게 */
.ba-slide {opacity: 0.4; transition: opacity 0.3s ease;}
.ba-slide.swiper-slide-active {opacity: 1;}
.swiper-slide-prev {justify-content: flex-end;}
.swiper-slide-prev .ba-slide__compare {margin-right: 12%;}
.swiper-slide-next .ba-slide__compare {margin-left: 12%;}

.sub-page .ba-slide__badge{bottom: unset; top: 2rem; left: 3rem; transform: translateX(0); font-size: 1.8rem;}

/* 좌우 큰 화살표: 하단 .ba-slider-controls 카운터 네비와 별개로 슬라이더 양옆에 배치 */
.ba-side-nav {position: absolute; top: 50%; transform: translateY(-50%); z-index: 5; width: 4rem; height: 4rem; border: none; background-color: transparent; background-repeat: no-repeat; background-position: center; background-size: contain; cursor: pointer;}
.ba-side-nav::after {display: none;}
.ba-side-nav--prev svg,
.ba-side-nav--next svg{display: none;}
.ba-side-nav--prev,
.ba-side-nav--next{width: 3rem; height: 5rem; background: url("../../images/common/swiper-arrow.svg") no-repeat center/contain;}
.ba-side-nav--next{left: calc(50% + 50rem); right: auto;}
.ba-side-nav--prev{left: calc(50% - 50rem); transform: rotate(180deg);}

/* 치료 후기 */
/* 치료후기 탭 10개: PC는 5열 그리드, 모바일은 칩 가로 스크롤 */
@media (min-width: 1025px) {
  .community-review .tab-pills.swiper .swiper-slide .tab-pills__btn{padding: 0 2rem;}
  .community-review .tab-group .tab-pills.swiper .swiper-wrapper{display: grid !important; grid-template-columns: repeat(5, 1fr); gap: 2.4rem 2rem !important;}
  .community-review .tab-pills.swiper .swiper-slide{width: auto !important;}
  .community-review .tab-pills.swiper .swiper-slide .tab-pills__btn{width: 100%;}
  .community-review .tab-group--filled{border-radius: 1.25rem;}
}
.sub-page.community-review .ba-slide__badge{top: unset; bottom: 3rem; left: 50%; transform: translateX(-50%); font-size: 2.5rem;}
.community-review .ba-slide__caption-text .divider,
.community-review .ba-slide__name{display: none;}
.community-review .ba-slide__caption-info{border-left: 1px solid var(--black); padding-left: 2rem; max-width: 55rem;}
.community-review .ba-slide__category{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: 100%;}
/* 클릭하면 상세 팝업(.review-modal)이 뜬다 — review-modal.js 참고 */
.community-review .ba-slide{cursor: pointer;}

@media (max-width: 1024px) {
  /* 모바일: 전체 폭 슬라이드 */
  .ba-section::before {bottom: 0;}
  .ba-slider {overflow: hidden;}
  .ba-slider .swiper-wrapper {height: auto;}
  .ba-header__title {text-align: center; margin-bottom: 2rem;}
  .ba-slide__compare {gap: 0;width: 100%;}
  /* 모바일: aspect-ratio 384/453로 폭에 비례 */
  .ba-slide__half,
  .ba-slide.swiper-slide-active .ba-slide__half {flex: 1;width: auto;height: auto;aspect-ratio: 384 / 453;}
  .swiper-slide-prev {justify-content: normal;}
  .swiper-slide-prev .ba-slide__compare,
  .swiper-slide-next .ba-slide__compare {margin: 0;}
  .ba-slide__caption {flex-direction: column;}
  .ba-section .btn-wrap {padding: 4rem 4rem 0;}
  .ba-side-nav {display: none;}
}

@media (max-width: 768px) {
  .ba-section {padding: clamp(6.5rem, 16.93vw, 13rem) 0;}
  .ba-header__title{font-size: clamp(2.4rem, 6.77vw, 5.5rem);}
  .ba-slide.swiper-slide-active .ba-slide__compare {gap: clamp(0.15rem, 0.39vw, 0.3rem);}
  .ba-panel {margin-top: clamp(2.5rem, 6.51vw, 5rem);}
  .ba-section::before {font-size: clamp(5.9rem, 15.36vw, 11.8rem); bottom:clamp(12rem, 28.65vw, 22rem);}
  .ba-slide__badge {font-size: clamp(1.4rem, 3.65vw, 2.8rem); bottom: clamp(1.5rem, 4vw, 3rem);}
  .ba-slide__gate-text {font-size: clamp(1.3rem, 3.5vw, 2.4rem);}
  .ba-slide__gate-btn {width: clamp(9rem, 23vw, 14.6rem); font-size: clamp(1.3rem, 3.5vw, 1.8rem);}
  .ba-slide__caption {width: 100%; margin-top: clamp(1.9rem, 4.95vw, 3.8rem); gap: clamp(2rem, 5.21vw, 4rem);}
  .ba-slide__caption-text {font-size: clamp(1.6rem, 4.17vw, 3.2rem); gap: clamp(1.5rem, 3.91vw, 3rem);}
  .ba-slide__caption-text .divider {width: clamp(0.1rem, 0.26vw, 0.2rem); height: clamp(1rem, 2.6vw, 2rem);}
  .ba-slide__duration {font-size: clamp(1.2rem, 3.13vw, 2.4rem);}
  .ba-angle-toggle__btn {height: clamp(2.8rem, 7.29vw, 5.6rem); padding: 0 clamp(1.2rem, 3.13vw, 2.4rem); font-size: clamp(1.2rem, 3.2vw, 2.2rem);}
  .ba-section .btn-wrap {padding: clamp(2rem, 5.21vw, 4rem) clamp(2rem, 5.21vw, 4rem) 0;}

  .sub-page .ba-slide__badge{font-size: clamp(1.4rem, 3.65vw, 2.8rem);}
}