/* ─────────────────────────────────────────────
   NAV — 히어로 스크롤 연동 제어
───────────────────────────────────────────── */
.nav {
  opacity: 0;
  pointer-events: none;
  transition: background-color 0.65s ease, padding 0.65s ease,
              backdrop-filter 0.65s ease, border-color 0.65s ease;
}


/* ─────────────────────────────────────────────
   1. 히어로 
───────────────────────────────────────────── */

.hero-container {
  position: relative;
  height: 350vh;
}
.hero-sticky {
  position: sticky;
  top: var(--banner-h);
  height: calc(100vh - var(--banner-h));
  overflow: hidden;
}

/* 1. 배경 레이어 */
.hero-inner-content {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--color-bg-secondary);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: scale(1.08);
  will-change: opacity, transform;
}

.inner-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

/* 2. 노이즈 오버레이 — z-index 3 */
.hero-noise {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  opacity: 0.08;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n' x='0' y='0'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 200px 200px;
  mix-blend-mode: overlay;
}

/* 3. 동영상 레이어 */
.inner-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 2;
  opacity: 0;
  filter: brightness(0.3);
}


/* 4. 시퀀스 레이어 — z-index 4 */
.hero-sequence {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.inner-eyebrow {
  display: block;
  font-family: var(--font-heading);
  font-size: clamp(1rem, 2vw, 2rem);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.5em;
  color: var(--color-text-muted);
  text-transform: uppercase;
  opacity: 0; 
}

.inner-title {
  font-family: 'Barlow Condensed', var(--font-heading), cursive;
  font-size: clamp(3.5rem, 10vw, 13rem);
  font-weight: var(--fw-bold);
  letter-spacing: -0.01em;
  color: var(--color-text-primary);
  line-height: 1;
  margin: 7rem 4rem;
  text-shadow: 0 2px 30px rgba(0, 0, 0, 0.85);
}
.inner-title strong {
  font-size: clamp(4rem, 12vw, 16rem);
  text-transform: uppercase;
  color: var(--color-red);
  white-space: nowrap;
  user-select: none;
  margin-top: 3rem;
}

.inner-title__line {
  display: block;
  text-align: center;
  will-change: transform, opacity;
}

.inner-desc {
  display: block;
  font-family: var(--font-heading);
  font-size: clamp(0.8rem, 1.5vw, 2rem);
  font-weight: var(--fw-regular);
  letter-spacing: 0.3em;
  color: var(--color-text-muted);
  text-transform: uppercase;
  opacity: 0;
}

/* 좌측 우측 패널 — z-index 5 */
.panel-left,
.panel-right {
  position: absolute;
  top: 0;
  width: 50%;
  height: 100%;
  overflow: hidden;
  z-index: 5;
  background: var(--color-bg-primary);
  will-change: transform;
  transform: translateZ(0);
}
.panel-left  { left: 0; }
.panel-right { right: 0; }

.panel-content {
  position: absolute;
  top: 0;
  width: 200%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.panel-left .panel-content  { left: 0; }
.panel-right .panel-content { left: -100%; }

.panel-title {
  display: block;
  font-family: 'Barlow Condensed', var(--font-heading), sans-serif;
  font-size: clamp(7rem, 16vw, 20rem);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  color: var(--color-red);
  line-height: 1;
  white-space: nowrap;
  user-select: none;
}

/* ─────────────────────────────────────────────
   2. 신뢰 지표 v
───────────────────────────────────────────── */
.trust {
  padding: var(--space-xl) 0;
  position: relative;
  z-index: 10; 
}

.trust__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: center;
}

.trust__item {
  text-align: center;
  padding: 2rem;
  position: relative;
}

.trust__item--divider::before,
.trust__item--divider::after {
  content: '';
  position: absolute;
  top: 20%;
  height: 60%;
  width: 1px;
  background: var(--color-border-subtle);
}
.trust__item--divider::before { left: 0; }
.trust__item--divider::after  { right: 0; }

.trust__number {
  display: block;
  font-family: var(--font-heading);
  font-size: 5rem;
  font-weight: var(--fw-black);
  color: var(--color-red);
  line-height: 1;
  margin-bottom: 1.5rem;
}
.trust__label {
  display: block;
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: var(--fw-semibold);
  color: var(--color-text-primary);
  letter-spacing: var(--ls-normal);
  text-transform: uppercase;
  margin-bottom: 1.2rem;
}
.trust__sub {
  display: block;
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  color: var(--color-text-muted);
  letter-spacing: var(--ls-normal);
}
.trust__sub .fa-star{
  color: var(--color-text-muted);
  font-size: var(--text-xs);
}


/* ─────────────────────────────────────────────
   3. 트레이너 v
───────────────────────────────────────────── */
.trainers {
  background: var(--color-bg-primary);
  padding: var(--space-2xl) 6rem;
}

.trainers__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
  padding: 0 6rem;
}

.trainer-card {
  background: var(--color-bg-secondary);
  box-shadow: 0 8px 40px rgba(165, 31, 31, 0.12);
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}
.trainer-card:hover {
  transform: translateY(-12px);
  box-shadow: 0 20px 60px rgba(165, 31, 31, 0.25);
}

.trainer-card__body {
  padding: 2rem 2rem 2rem 4rem;
}

.trainer-card__name {
  font-family: var(--font-heading);
  font-size: 2.6rem;
  font-weight: var(--fw-semibold);
  color: var(--color-text-primary);
  letter-spacing: var(--ls-wide);
  margin: 1rem 0;
}
.trainer-card__career {
  font-size: var(--text-xs);
  color: var(--color-red-dark);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-normal);
}
.trainer-card__desc {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  font-weight: var(--fw-semibold);
  line-height: 1.8;
  margin: 1rem 0 2.2rem 0;;
}
.trainer-card__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1.6rem;
}
.badge {
  display: inline-block;
  padding: 0.4rem 0.8rem;
  border: 1.5px solid var(--color-text-muted);
  color: var(--color-text-muted);
  font-size: var(--text-2xs);
  font-weight: var(--fw-bold);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  box-shadow: 3px 3px 5px rgba(0, 0, 0, 1); 
}


/* ─────────────────────────────────────────────
   4. 프로그램 v
───────────────────────────────────────────── */
.programs {
  background: var(--color-bg-secondary);
  padding: var(--space-3xl) 0;
}

/* 탭 버튼 */
.programs__tabs {
  display: flex;
  justify-content: center;
  gap: 0;
  border: 1px solid var(--color-border-subtle);
  max-width: 80rem;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 10rem;
}
.programs__tab {
  flex: 1;
  padding: 2rem;
  font-size: var(--text-md);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--color-text-muted);
  background: transparent;
  border: none;
  border-right: 1px solid var(--color-border-subtle);
  cursor: pointer;
  transition: var(--transition);
}
.programs__tab:last-child {
  border-right: none;
}
.programs__tab:hover {
  color: var(--color-text-primary);
  background: rgba(255, 255, 255, 0.03);
}
.programs__tab.active {
  background: var(--color-red-dark);
  color: #ffffff;
}

/* 패널 */
.programs__panels {
  position: relative;
}
.programs__panel {
  display: none;
  grid-template-columns: 1fr 0.85fr;
  gap: 8rem;
  align-items: center;
}
.programs__panel.active {
  display: grid;
  animation: panelFadeIn 0.5s ease;
}

@keyframes panelFadeIn {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

.programs__panel-img {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--color-bg-tertiary);
}
.programs__panel-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: var(--color-bg-tertiary);
  min-height: 100%;
}
.programs__panel-img-overlay {
  position: absolute;
  top: 2rem;
  left: 2rem;
}

.programs__tag {
  display: inline-block;
  background: var(--color-red);
  color: #fff;
  font-size: var(--text-2xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-normal);
  padding: 0.7rem 1.4rem;
  text-transform: uppercase;
  opacity: 0.8;
}

.programs__panel-title {
  font-family: var(--font-heading);
  font-size: 3.6rem;
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-normal);
  text-transform: uppercase;
  color: var(--color-text-primary);
  margin-bottom: 3rem;
}
.programs__panel-desc {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: 2;
  margin-bottom: 3rem;
}
.programs__features {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 3.5rem;
}

.programs__features li {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
}
.programs__features li .fa-check {
  color: var(--color-red);
  font-size: var(--text-sm);
  flex-shrink: 0;
}

.programs__price-wrap {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin-bottom: 4rem;
  padding: 2.5rem;
  border-left: 4px solid var(--color-red-dark);
  background: var(--color-red-dim);
}

.programs__price-label {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: var(--ls-noraml);
}
.programs__price {
  font-family: var(--font-heading);
  font-size: var(--text-5xl);
  font-weight: var(--fw-bold);
  color: var(--color-red-dark);
  line-height: 1;
  letter-spacing: -0.01em;
}
.programs__price em {
  font-size: var(--text-2xl);
  color: var(--color-red);
  font-style: normal;
}
.programs__price-note {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  letter-spacing: var(--ls-noraml);
}


/* ─────────────────────────────────────────────
   5. 머신 v
───────────────────────────────────────────── */
.machines {
  background: var(--color-bg-primary);
  padding-bottom: 0;
}

.machines .section-header {
  padding-top: var(--space-3xl);
}

/* 브랜드 로고 슬라이더 */
.machines__brands {
  overflow: hidden;
  padding: 3.5rem 0;
  border-top: 1px solid var(--color-border-subtle);
  border-bottom: 1px solid var(--color-border-subtle);
  background: var(--color-bg-secondary);
}

.machines__brands-track {
  display: flex;
  gap: 0;
  animation: brandSlide 25s linear infinite;
  width: max-content;
}

.machines__brand-item {
  font-family: var(--font-heading);
  font-size: var(--text-3xl);
  font-weight: var(--fw-bold);
  color: rgba(255, 255, 255, 0.15);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  padding: 0 5rem;
  flex-shrink: 0;
  transition: color 0.3s ease;
  white-space: nowrap;
}

.machines__brand-item:hover {
  color: rgba(165, 31, 31, 0.8);
}

@keyframes brandSlide {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* Scrollytelling 래퍼 */
.machines__scrolly {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  min-height: 200vh;
}

/* 스티키 패널 (좌측) */
.machines__sticky-panel {
  position: sticky;
  top: calc(var(--banner-h) + 7rem);
  height: calc(100vh - var(--banner-h) - 7rem);
  overflow: hidden;
  background: var(--color-bg-secondary);
}

.machines__map-container {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
  background: #000;
}
.machines__map-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform-origin: center center;
  will-change: transform;
  transition: transform 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 50%, #1a1a1a 100%);
}

/* 머신 스펙 팝업 */
.machines__popup {
  position: absolute;
  bottom: 3rem;
  left: 3rem;
  right: 3rem;
  background: rgba(10, 10, 10, 0.92);
  backdrop-filter: blur(12px);
  border-left: 4px solid var(--color-red);
  padding: 2.5rem 3rem;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s ease, transform 0.5s ease;
  pointer-events: none;
}
.machines__popup.active {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.machines__popup-zone {
  display: block;
  font-family: var(--font-heading);
  font-size: var(--text-md);
  font-weight: var(--fw-black);
  letter-spacing: var(--ls-widest);
  color: var(--color-red);
}
.machines__popup-title {
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  font-weight: var(--fw-black);
  color: var(--color-text-primary);
  text-transform: uppercase;
  letter-spacing: var(--ls-normal);
  margin-bottom: 1.3rem;
}

.machines__popup-specs {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin-bottom: 1.3rem;
}
.machines__popup-specs li {
  font-size: var(--text-xs);
  color: var(--color-text-secondary);
  padding-left: 1rem;
  position: relative;
}
.machines__popup-specs li::before {
  content: '·';
  position: absolute;
  left: 0;
  color: var(--color-red);
}

.machines__popup-brand {
  font-size: var(--text-xs);
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  color: rgba(255, 255, 255, 0.5);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  padding-left: 1rem;
}


/* 스크롤 스텝 */
.machines__steps {
  padding: 0;
}

.machines__step {
  min-height: 50vh;
  display: flex;
  align-items: center;
  padding: 8rem 6.5rem;
  border-bottom: 1px solid var(--color-border-subtle);
  transition: background 0.4s ease;
}
.machines__step.active {
  background: var(--color-red-dim);
}
.machines__step-inner {
  max-width: 50rem;
}

.machines__step-num {
  display: block;
  font-family: var(--font-heading);
  font-size: 9rem;
  font-weight: var(--fw-bold);
  color: rgba(255, 69, 0, 0.1);
  line-height: 1;
  margin-bottom: 1.5rem;
  letter-spacing: var(--ls-normal);
}
.machines__step.active .machines__step-num {
  color: var(--color-red-dark);
}

.machines__step-title {
  font-family: var(--font-heading);
  font-size: var(--text-3xl);
  font-weight: var(--fw-black);
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: 2rem;
  transition: color 0.4s ease;
}
.machines__step.active .machines__step-title {
  color: var(--color-red-dark);
}

.machines__step-desc {
  font-size: var(--text-md);
  color: var(--color-text-muted);
  line-height: 1.8;
}
.machines__step.active .machines__step-desc {
  color: var(--color-text-secondary);
}


/* ─────────────────────────────────────────────
   6. 비포/애프터 v
───────────────────────────────────────────── */
.before-after {
  background: var(--color-bg-secondary);
  padding: var(--space-3xl) 0;
}

.ba-wrap {
  max-width: 90rem;
  margin: 0 auto;
}

.ba-slider {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  cursor: ew-resize;
  user-select: none;
  background: var(--color-bg-tertiary);
}

.ba-slider__before,
.ba-slider__after {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0.7;
}
.ba-slider__before img,
.ba-slider__after img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  background: var(--color-bg-tertiary);
  min-height: 100%;
}

.ba-slider__after {
  clip-path: polygon(50% 0%, 100% 0%, 100% 100%, 50% 100%);
  transition: clip-path 0s;
}

.ba-slider__label {
  position: absolute;
  bottom: 2rem;
  font-size: var(--text-sm);
  font-weight: var(--fw-bold);
  padding: 0.6rem 1.4rem;
  opacity: 0.9;
  border-radius: 5px;
}
.ba-slider__label--before {
  left: 2rem;
  background: rgba(0,0,0,0.7);
  color: #fff;
}
.ba-slider__label--after {
  right: 2rem;
  background: var(--color-red);
  color: #fff;
}

/* 핸들 */
.ba-slider__handle {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 10;
  pointer-events: none;
}

.ba-slider__line {
  flex: 1;
  width: 2px;
  background: var(--color-border-subtle);
}

.ba-slider__btn {
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  background: var(--color-red);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  flex-shrink: 0;
  box-shadow: 0 4px 20px rgba(0,0,0,0.5);
}
.ba-slider__btn i {
  color: #ffffff;
  font-size: var(--text-xs);
}

/* 비포 애프터 수치 */
.ba-info {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  margin-top: 4rem;
  padding: 3.5rem;
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border-subtle);
}

.ba-info__item {
  text-align: center;
}

.ba-info__num {
  display: block;
  font-family: var(--font-heading);
  font-size: 6rem;
  font-weight: var(--fw-bold);
  color: var(--color-red);
  line-height: 1;
  margin-bottom: 1.5rem;
}
.ba-info__unit {
  font-size: 3rem;
  font-weight: var(--fw-bold);
  color: var(--color-text-muted);
  vertical-align: baseline;
}

.ba-info__label {
  font-size: var(--text-sm);
  font-weight: var(--fw-black);  
  color: var(--color-text-muted);
  text-transform: uppercase;
}


/* ─────────────────────────────────────────────
   7. 리뷰 v
───────────────────────────────────────────── */
.reviews {
  background: var(--color-bg-primary);
  padding: var(--space-3xl) 0;
}

.reviews__slider-wrap {
  position: relative;
  overflow: hidden;
}

.reviews__track {
  display: flex;
  transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.review-slide {
  min-width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: start;
}

.review-card {
  display: block;
}

.review-card__body {
  padding: 4rem;
}

.review-card__text {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: 2;
  margin-bottom: 8rem;
  font-style: italic;
  position: relative;
}

.review-card__text::before {
  content: '"';
  position: absolute;
  left: -1rem;
  top: -4.5rem;
  font-family: var(--font-heading);
  font-size: var(--text-5xl);
  color: var(--color-red);
  line-height: 1;
  opacity: 0.6;
}

.review-card__text::after {
  content: '"';
  position: absolute;
  right: 2rem;
  top: -4.5rem;
  font-family: var(--font-heading);
  font-size: var(--text-5xl);
  color: var(--color-red);
  line-height: 1;
  opacity: 0.6;
}

.review-card__stars {
  display: flex;
  justify-content: center;
  gap: 0.4rem;
  margin-bottom: 4rem;
}

.review-card__stars i {
  color: rgb(254, 229, 0);
  font-size: var(--text-xs);
  opacity: 0.5;
}

.review-card__meta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
}

.review-card__name {
  font-size: var(--text-md);
  font-weight: var(--fw-semibold);
  color: var(--color-text-muted);
  letter-spacing: var(--ls-normal);
}

.review-card__period {
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  color: var(--color-text-muted);
  letter-spacing: var(--ls-normal);
}

.reviews__nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2.4rem;
  margin-top: 5rem;
}

.reviews__btn {
  width: 5rem;
  height: 5rem;
  background: transparent;
  color: var(--color-text-muted);
  font-size: var(--text-base);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: var(--transition);
}
.reviews__btn:hover {
  color: var(--color-red);
}
.reviews__dots {
  display: flex;
  gap: 1.2rem;
}
.reviews__dot {
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background: var(--color-border-subtle);
  border: none;
  cursor: pointer;
  transition: var(--transition);
}
.reviews__dot.active {
  background: var(--color-red);
  transform: scale(1.2);
}


/* ─────────────────────────────────────────────
   8. 시설
───────────────────────────────────────────── */
.facility {
  background: var(--color-bg-secondary);
  padding: var(--space-3xl) 0;
}

.facility__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 26rem;
  gap: 1.6rem;
}

/* tall: 세로 2칸 */
.facility__item--tall {
  grid-row: span 2;
}
/* wide: 가로 2칸 */
.facility__item--wide {
  grid-column: span 2;
}

.facility__item {
  position: relative;
  overflow: hidden;
  background: var(--color-bg-tertiary);
  cursor: pointer;
}

/* 하단 레드 라인 — hover 시 좌→우 슬라이드 */
.facility__item::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 3px;
  background: var(--color-red);
  transition: width 0.45s ease;
  z-index: 3;
}
.facility__item:hover::before {
  width: 100%;
}

.facility__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.65s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  background: var(--color-bg-tertiary);
  min-height: 100%;
}

.facility__item:hover img {
  transform: scale(1.1);
}

.facility__caption {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  padding: 2.4rem;
  opacity: 0;
  transition: opacity 0.4s ease;
}

.facility__item:hover .facility__caption {
  opacity: 1;
}

.facility__caption span {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: var(--fw-semibold);
  color: #ffffff;
  letter-spacing: var(--ls-normal);
  text-transform: uppercase;
  transform: translateY(10px);
  transition: transform 0.4s ease;
}

.facility__item:hover .facility__caption span {
  transform: translateY(0);
}


/* ─────────────────────────────────────────────
   9.  위치 & 운영시간 v
───────────────────────────────────────────── */
.location {
  background: var(--color-bg-primary);
  padding: var(--space-3xl) 0;
}

.location__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8rem;
  align-items: start;
}

.location__map {
  height: 55rem;
  background: var(--color-bg-secondary);
  overflow: hidden;
}

.location__map iframe {
  width: 100%;
  height: 100%;
  display: block;
  filter: grayscale(100%) invert(1) contrast(0.9) brightness(0.7) hue-rotate(180deg);
}

.location__info {
  display: flex;
  flex-direction: column;
  gap: 4rem;
}

.location__block-title {
  font-family: var(--font-heading);
  font-size: var(--text-md);
  font-weight: var(--fw-black);
  color: var(--color-red-dark);
  letter-spacing: var(--ls-normal);
  text-transform: uppercase;
  margin-bottom: 1.6rem;
  display: flex;
  align-items: center;
  gap: 1rem;
}

.location__text {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: 1.9;
}

.location__hours {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.location__hours li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 1rem;
  padding-right: 2rem;
  border-bottom: 1px solid var(--color-border-subtle);
}

.location__hours li:last-child {
  border-bottom: none;
}

.location__day {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  font-weight: var(--fw-medium);
}

.location__time {
  font-family: var(--font-heading);
  font-size: var(--text-base);
  font-weight: var(--fw-medium);
  color: var(--color-text-secondary);
  letter-spacing: 0.05em;
}

.location__transport {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}

.location__transport li {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
}

.location__transport .fa-check {
  color: var(--color-red-dark);
  font-size: var(--text-sm);
  flex-shrink: 0;
}



/* ─────────────────────────────────────────────
   10. 최종 CTA
───────────────────────────────────────────── */
.final-cta {
  background: var(--color-red);
  padding: var(--space-3xl) 0;
  position: relative;
  overflow: hidden;
}

.final-cta__bg-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--font-heading);
  font-size: clamp(20rem, 30vw, 45rem);
  font-weight: var(--fw-bold);
  color: rgba(0, 0, 0, 0.1);
  pointer-events: none;
  user-select: none;
  white-space: nowrap;
  line-height: 1;
}

.final-cta__content {
  position: relative;
  z-index: 1;
  text-align: center;
}

.final-cta__title {
  font-family: var(--font-heading);
  font-size: clamp(2.5rem, 4vw, 6rem);
  font-weight: var(--fw-black);
  color: rgba(255,255,255,0.85);
  text-transform: uppercase;
  letter-spacing: var(--ls-normal);
  line-height: 1.3;
  margin: 4rem 0;
}

.final-cta__title strong {
  display: block;
  color: #ffffff;
  font-size: clamp(4.5rem, 8vw, 12rem);
  text-shadow: 0 4px 30px rgba(0,0,0,0.3);
}

.final-cta__desc {
  font-size: var(--text-lg);
  font-weight: var(--fw-bold);
  color: rgba(255,255,255,0.8);
  line-height: 1.8;
  margin-bottom: 8rem;
}

.final-cta__btns {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}
.final-cta__btns .btn {
  font-family: var(--font-heading);
  font-size: var(--text-md);
  font-weight: var(--fw-bold);
  padding: 2.2rem 3.2rem;
  border-radius: 10px;
  box-shadow: 0 4px 30px rgba(0,0,0,0.6);
}



/* ─────────────────────────────────────────────
   모바일 반응형 (섹션별)
───────────────────────────────────────────── */

/* Laptop 1024px */
@media (max-width: 1024px) {
  
  /* 히어로 V */

  /* 신뢰지표 */

  /* 공통 v*/
  .section-title {
    font-size: 4rem;
  }
  .section-desc {
    font-size: var(--text-sm);  
  }
  
  /* 트레이너 v  */
  .trainers__grid {
    padding: 0;
  }
  .trainer-card__body {
    padding: 2rem 1rem 2rem 3rem;
  }

  /* 프로그램 v */

  .programs__tabs {
    margin-bottom: 8rem;
  }
  .programs__tab{
    font-size: var(--text-sm);
    padding: 1.8rem 1rem;
  }
  .programs__panel {
    gap: 5rem;
  }
  .programs__panel-title {
    font-size: 3rem;
    margin-bottom: 2rem;
  }
  .programs__panel-desc {
    font-size: var(--text-xs);
    margin-bottom: 2rem; 
  }
  .programs__features {
    gap: 0.8rem;
    margin-bottom: 2.5rem;
  }
  .programs__features li, .programs__features li .fa-check  {
    font-size: var(--text-xs);
  }
  .programs__price-wrap {
    margin-bottom: 3rem;
    padding: 2rem;
  }
  .programs__price-label {
    font-size: var(--text-2xs);
  }
  .programs__price {
    font-size: 6.5rem;  
  }
  .programs__price em {
    font-size: var(--text-xl);
  }
  .programs__price-note {
    font-size: var(--text-2xs);
  }
  
  /* 머신  v */
  .machines__brands {
    padding: 2.8rem 0;
  }
  .machines__brand-item {
    font-size: var(--text-2xl);  
    padding: 0 4rem;
  }

  .machines__popup{
    padding: 2.5rem 2rem;
  }
  .machines__popup-zone {
    font-size: var(--text-sm);  
  }
  .machines__popup-title {
    font-size: var(--text-xl);
  }
  .machines__popup-specs li {
    font-size: var(--text-2xs);
  }  
  .machines__step {
    padding: 6rem 4.5rem;
  }
  .machines__step-num {
    font-size: 7.4rem;
  }
  .machines__step-title {
    font-size: var(--text-2xl);
  }
  .machines__step-desc {
    font-size: var(--text-sm);
  }

  /* 비포/애프터 */
  .ba-slider__label {
    font-size: var(--text-xs);
  }

  .ba-info{
    padding: 3rem;
  }
  .ba-info__num {
    font-size: 5.3rem;
    margin-bottom: 1rem;  
  } 
  .ba-info__unit {
    font-size: 2.5rem;
  } 
  .ba-info__label {
    font-size: var(--text-xs);
  }  

  /* 리뷰 */

  /* 시설 v*/
  .facility__caption {
    padding: 1.8rem;
  }
  .facility__caption span {
    font-size: var(--text-lg);    
  }


  /* 위치 & 운영시간 v*/
  .location__grid {
    gap: 5rem;
  }


  /* 최종 CTA v */
  .final-cta__desc {
    font-size: var(--text-md);
  }
  .final-cta__btns .btn {
    font-size: var(--text-sm);
    font-weight: var(--fw-bold);
    padding: 2rem 2.8rem;
  }
}

/* Tablet 768px */
@media (max-width: 768px) {
  
  /* 히어로 V  */
  .inner-title{
    margin: 4.5rem 4rem;
  }
  .inner-title strong {
    margin-top: 2rem;
  }
  

  /* 신뢰지표 v  */
  .trust__number {
    font-size: 4rem;
  }
  .trust__label {
    font-size: var(--text-md);
  }

  /* 공통v */
  .section-label {
    font-size: var(--text-md);
  }
  .section-title {
    font-size: 3.5rem;
  }


  /* 트레이너 v */
  .trainers {
    padding: var(--space-xl) 0;
  }
  
  .trainers__grid {
    padding: 0 3rem;
  }

  .trainer-card__body {
    padding: 2rem;
  }
  .trainer-card__name{
    font-size: 2.2rem;
  }
  .trainer-card__career,.trainer-card__desc{
    font-size: var(--text-2xs);  
  }
  .badge {
    font-size: 1rem;
  }

  /* 프로그램 v */
  .programs {
    padding: var(--space-2xl) 0;
  }
  .programs__tabs {
    margin-bottom: 6rem;
  }
  .programs__tab{
    font-size: var(--text-xs);
  }
  .programs__panel.active {
    grid-template-columns: 1fr;
    gap: 3rem;
    padding: 0 6rem;
  }

  .programs__price-wrap {
    margin: 3rem 0;
  }

  /* 머신 */
  .machines .section-header {
    padding-top: var(--space-2xl);
  }
   .machines__brands {
    padding: 2.1rem 0;
  }
  .machines__brand-item {
    font-size: var(--text-xl);  
  }

  .machines__scrolly {
    min-height: 132vh;
    grid-template-columns: 1.2fr 1fr;
  }
  .machines__step {
    min-height: 33vh;
  }

  .machines__step {
    padding: 3rem 2rem;
  }
  .machines__step-num {
    font-size: 6rem;
    margin-bottom: 1.2rem;
  }
  .machines__step-title {
    font-size: 2rem;
  }
  .machines__step-desc {
    font-size: var(--text-xs);
  }

  .machines__popup {
    padding: 2.5rem 1.3rem;  
    bottom: 1.5rem;
    left: 1.5rem;
    right: 1rem;
  }
  .machines__popup-zone {
    font-size: var(--text-xs);  
  }  
  .machines__popup-title {
    font-size: var(--text-lg);
  }
  .machines__popup-brand {
    font-size: var(--text-2xs);
    padding-left: 0.5rem;
  }


  /* 비포/애프터 */
  .before-after{
    padding: var(--space-2xl) 0;    
  }  

  .ba-slider {
    aspect-ratio: 4 / 3;
  }
  .ba-slider__btn {
    width: 3rem;
    height: 3rem;
  }
  .ba-slider__btn i{
    font-size: var(--text-2xs);
  }
  .ba-slider__label {
    font-size: var(--text-2xs);
    padding: 0.5rem 1.2rem;  
    bottom: 1rem;
  }
  .ba-slider__label--before {
    left: 1rem;
  }
  .ba-slider__label--after {
    right: 1rem;
  }

  .ba-info{
    padding: 2.5rem;
  }
  .ba-info__num {
    font-size: 4.5rem;
    margin-bottom: 0.8rem;  
  } 
  .ba-info__unit {
    font-size: 2rem;
  } 
  .ba-info__label {
    font-size: var(--text-2xs);
  }  


  /* 리뷰 */
  .reviews {
  padding: var(--space-2xl) 0;
  }
  .review-slide {
    gap: 1rem;
  }
  .review-card__body {
    padding: 2rem;
  }
  .review-card__text {
    font-size: var(--text-xs);
    margin-bottom: 5rem;
  }
  .review-card__stars i {
    font-size: var(--text-2xs);    
  } 
  .review-card__name {
    font-size: var(--text-sm);
  }  
  .review-card__period {
    font-size: 1rem;
  }   

  .reviews__btn {
    width: 3.5rem;
    height: 3.5rem;
    font-size: var(--text-xs);
  }  

  .review-dots{
    gap: 0.8rem;
  }
  .reviews__dot {
    width: 0.8rem;
    height: 0.8rem;
  }


  /* 시설 v */
  .facility {
    padding: var(--space-2xl) 0;
  }
  .facility__grid {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 20rem;
  }
  .facility__item--wide {
    grid-column: span 2;
  }
  .facility__item--cardio {
    display: none;
  }
  .facility__caption span {
    font-size: var(--text-lg);
  }


  /* 위치 & 운영시간 v*/
  .location {
    padding: var(--space-2xl) 0;    
  }
  .location__grid {
    grid-template-columns: 1fr;
    gap: 4rem;
  }
  .location__map {
    height: 30rem;
  }
  .location__info {
    gap: 3rem;
  }
  .location__hours li {
    padding: 0 2rem 0 1rem;
  }
  .location__block-title {
    font-size: var(--text-sm);
  }
  .location__text, .location__day,.location__transport li  {
    font-size: var(--text-xs);  
  }
  .location__time {
    font-size: var(--text-sm);
  }


  /* 최종 CTA v */
  .final-cta {
    padding: var(--space-2xl) 0;
  }
   .final-cta__desc {
    font-size: var(--text-sm);
    margin-bottom: 6rem;
  }
  .final-cta__btns .btn {
    font-size: var(--text-xs);
    font-weight: var(--fw-bold);
    padding: 2rem 2.8rem;
  }


}

@media (max-width: 610px) {
  
  /* 신뢰지표 v */
  .trust {
    padding: var(--space-lg) 0;
  }
  .trust__item {
    padding: 2rem 1rem;
  }
  .trust__number {
    font-size: 3.5rem;
  }
  .trust__label {
    font-size: var(--text-sm);
    letter-spacing: 0.04em;
  }
  .trust__sub , .trust__sub .fa-star{
    font-size: var(--text-2xs);
  }
  .programs__panel.active {
    padding: 0 2.5rem;
  }

  /* 시설 */
  .facility__grid {
    grid-auto-rows: 16rem;
  }
  .facility__caption span {
    font-size: var(--text-md);  
  }
}

@media (max-width: 500px) {

  /* 공통v */
  .section-header {
    margin-bottom: 8rem;
  }
  .section-label {
    font-size: var(--text-sm);

  }
  .section-title {
    font-size: 3rem;
  }
  .section-desc {
    font-size: var(--text-xs);  
  }
  .red-line{
    margin: 3rem 0;
  }
  .red-line--center {
    margin-left: auto;
    margin-right: auto;
  }

    /* 시설 */
  .facility__caption {
    padding: 1rem;
  }
  .facility__caption span {
    font-size: var(--text-sm);  
  }

}


/* Mobile L 430px */
@media (max-width: 430px) {

  /* 히어로 V  */
  .inner-title{
    margin: 3.5rem 3rem;
  }
  .inner-title strong {
    margin-top: 1.5rem;
  }


  /* 신뢰 지표 v  */
  .trust__item {
    padding: 2rem 0.5rem;
  }
  .trust__number {
    font-size: 3.5rem;
  }
  .trust__label {
    font-size: var(--text-xs);
    letter-spacing: 0.02em;
  }
  .trust__sub , .trust__sub .fa-star{
    font-size: 1.1rem;
  }
  
  /* 공통 v */
  .section-title {
    font-size: 2.6rem;
  }


  /* 트레이너 v */
  .trainers__grid {
    padding: 0 1rem;
  }
  .trainer-card__name {
    font-size: 2.1rem;
  }

  /* 프로그램 v */
  .programs__tabs {
    margin-bottom: 4rem;
  }
  .programs__tab{
    font-size: var(--text-2xs);
  }
  .programs__panel-img-overlay {
    position: absolute;
    top: 1.2rem;
    left: 1.2rem;
  }
  .programs__tag {
    font-size: 1rem;
    padding: 0.6rem 1.2rem;
  } 
  .programs__panel-title {
    font-size: 2.5rem;
    margin-bottom: 2rem; 
  }
  .programs__panel-desc {
    font-size: var(--text-2xs);
    margin-bottom: 2rem; 
  }
  .programs__features li, .programs__features li .fa-check  {
    font-size: var(--text-2xs);
  }
  .programs__price-wrap {
    margin-bottom: 3rem;
    padding: 1.8rem;
  }
  .programs__price-label {
    font-size: 1rem;
  }
  .programs__price {
    font-size: 5rem;  
  }
  .programs__price em {
    font-size: var(--text-lg);
  }
  .programs__price-note {
    font-size: 1rem;
  }
  
  /* 머신 */
  .machines__scrolly {
    min-height: 120vh;
    grid-template-columns: 1.2fr 1fr;
  }
  .machines__step {
    min-height: 30vh;
  }

  .machines__step-num {
    font-size: 5rem;
    margin-bottom: 1.2rem;
  }
  .machines__step-title {
    font-size: 1.5rem;
  }
  .machines__step-desc {
    font-size: var(--text-2xs);
  }
  .machines__popup {
    padding: 2.5rem 0.8rem;
    bottom: 1.2rem;
    left: 1.2rem;
    right: 1rem;
  }  
  .machines__popup-zone {
    font-size: var(--text-2xs);  
  }  
  .machines__popup-title {
    font-size: var(--text-sm);
  }
  .machines__popup-specs li {
    padding-left: 0;
  }
  .machines__popup-brand {
    font-size: var(--text-2xs);
    padding-left: 0rem;
  }

  /* 비포/애프터 */
  .ba-slider__label {
    font-size: 1rem;
    padding: 0.5rem 1rem;  
  }
  .ba-info{
    padding: 2rem;
  }
  .ba-info__num {
    font-size: 4rem;
  } 
  .ba-info__unit {
    font-size: 1.5rem;
  } 
  .ba-info__label {
    font-size: var(--text-2xs);
  }  


  /* 리뷰 */

  .review-card__text {
    font-size: var(--text-2xs);
    margin-bottom: 5rem;
  }
  .review-card__stars i {
    font-size: 1rem;    
  } 
  .review-card__name {
    font-size: var(--text-xs);
  }  
  .review-card__period {
    font-size: 0.9rem;
  }   

  /* 시설 v */
  .facility__grid {
    grid-auto-rows: 14rem;
    gap: 1rem;
  }


  /* 위치 & 운영시간 v*/
  .location__block-title {
    font-size: var(--text-xs);
  }
  .location__text, .location__day,.location__transport li  {
    font-size: var(--text-2xs);  
  }
  .location__time {
    font-size: var(--text-xs);
  }


  /* 최종 CTA v */
   .final-cta__desc {
    font-size: var(--text-xs);
  }
  .final-cta__btns .btn {
    font-size: var(--text-xs);
    font-weight: var(--fw-bold);
    padding: 1.8rem 2.6rem;
  }
}

/* Mobile S 360px */
@media (max-width: 360px) {
  .section-title { 
    font-size: 2.4rem; 
  }
  .section-desc{
    font-size: var(--text-2xs);
  }
  .programs__tab{
    padding: 1.8rem 0.5rem;
  }
  .review-card__body { padding: 1.4rem;
  }


  /* 시설 v */

  /* 위치 & 운영시간 v */

  /* 최종 CTA v */
   .final-cta__desc {
    font-size: var(--text-2xs);
    margin-bottom: 5rem;
  }
  .final-cta__btns .btn {
    font-size: var(--text-2xs);
    font-weight: var(--fw-bold);
  }
}