/* =====================================================
   ACERO GYM — v5  "Neon Red & White"
   White · Red Neon · Dark Charcoal
   스토리텔링 풀스크린 랜딩
   ===================================================== */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;0,700;1,300;1,600&family=Bebas+Neue&family=Noto+Sans+KR:wght@300;400;500;600;700;800;900&display=swap');

/* =====================================================
   DESIGN TOKENS
   ===================================================== */
:root {
  /* ── Dark Base ── */
  --dark-950: #080808;
  --dark-900: #0f0f0f;
  --dark-800: #161616;
  --dark-700: #1e1e1e;
  --dark-600: #262626;
  --dark-500: #303030;
  --dark-400: #3d3d3d;

  /* ── Red Neon ── */
  --red-700:  #8B0000;
  --red-600:  #b01010;
  --red-500:  #d42020;
  --red-400:  #e84040;
  --red-300:  #ff5555;
  --red-200:  #ff8080;
  --red-100:  #ffb3b3;
  --red-50:   #fff0f0;
  --red-glow: rgba(220, 40, 40, 0.55);
  --red-glow-soft: rgba(220, 40, 40, 0.18);
  --red-border: rgba(220, 40, 40, 0.30);

  /* ── White / Light ── */
  --white:    #ffffff;
  --white-90: rgba(255,255,255,0.90);
  --white-70: rgba(255,255,255,0.70);
  --white-50: rgba(255,255,255,0.50);
  --white-30: rgba(255,255,255,0.30);
  --white-15: rgba(255,255,255,0.15);
  --white-08: rgba(255,255,255,0.08);
  --white-04: rgba(255,255,255,0.04);

  /* ── Light Section BG ── */
  --light-bg:   #f8f8f8;
  --light-card: #ffffff;
  --light-border: rgba(0,0,0,0.08);
  --light-mute: rgba(0,0,0,0.40);
  --light-sub:  rgba(0,0,0,0.60);
  --light-h:    #0a0a0a;

  /* ── Typography (시스템 폰트 폴백 → 웹폰트 로드 전 FOIT 방지) ── */
  --font-serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-brand: 'Bebas Neue', 'Arial Narrow', Arial, sans-serif;
  --font-sans:  'Noto Sans KR', 'Apple SD Gothic Neo', 'Malgun Gothic', 'Segoe UI Emoji', 'Noto Color Emoji', 'Apple Color Emoji', sans-serif;

  /* ── Spacing ── */
  --section-px: clamp(24px, 6vw, 80px);

  /* ── Radius ── */
  --r-sm: 8px; --r-md: 14px; --r-lg: 20px; --r-xl: 28px; --r-full: 999px;

  /* ── Shadow ── */
  --sh-red:   0 0 40px rgba(220,40,40,0.40), 0 0 80px rgba(220,40,40,0.15);
  --sh-red-sm:0 0 16px rgba(220,40,40,0.35);
  --sh-dark:  0 8px 40px rgba(0,0,0,0.60);
  --sh-card:  0 2px 20px rgba(0,0,0,0.08);
  --sh-card-hover: 0 8px 40px rgba(0,0,0,0.14);
}

/* =====================================================
   RESET & BASE
   ===================================================== */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }

html {
  scroll-behavior: smooth;
  font-size: 16px;
  /* scroll-snap 제거 — 자유 스크롤 */
}

body {
  font-family: var(--font-sans);
  background: var(--dark-950);
  color: var(--white-90);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, video { max-width:100%; display:block; }
a { text-decoration:none; }
button { cursor:pointer; font-family:var(--font-sans); border:none; background:none; }

/* =====================================================
   FULLSCREEN SECTION BASE
   모든 섹션: 100vh 기준 — 자유 스크롤
   ===================================================== */
.fs-section {
  min-height: 100vh;
  width: 100%;
  display: flex;
  align-items: center;
  position: relative;
  overflow: visible; /* hidden → visible: 자유 스크롤 허용 */
}
/* 히어로 지점 섹션은 overflow:hidden 유지 (카드 넘침 방지) */
.hero-branch-section { overflow: hidden; }

/* 라이트 섹션 전용 */
.fs-section.light {
  background: var(--light-bg);
}
.fs-section.light-white {
  background: var(--light-card);
}
.fs-section.dark {
  background: var(--dark-900);
}
.fs-section.darker {
  background: var(--dark-950);
}

/* 섹션 내 컨테이너 */
.fs-inner {
  width: 100%;
  max-width: 1360px;
  margin: 0 auto;
  padding: 100px var(--section-px) 80px;
}

/* 멤버십 내부: .fs-inner(padding:100px)를 명시적으로 재정의 */
.membership-inner {
  padding: 88px var(--section-px) 60px !important;
  overflow-y: visible;
  max-height: none;
}

/* 섹션 내 2단 그리드 */
.fs-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 6vw, 100px);
  align-items: center;
}
.fs-two-col.reverse { direction: rtl; }
.fs-two-col.reverse > * { direction: ltr; }

/* =====================================================
   SECTION PROGRESS DOTS (우측 고정)
   ===================================================== */
.section-dots {
  position: fixed;
  right: 28px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 12px;
  z-index: 500;
}
.sd-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--white-30);
  cursor: pointer;
  transition: all 0.3s;
  border: none;
}
.sd-dot.active {
  background: var(--red-400);
  box-shadow: var(--sh-red-sm);
  transform: scale(1.4);
}
.sd-dot:hover { background: var(--white-70); }

/* =====================================================
   TYPOGRAPHY SYSTEM
   ===================================================== */

/* 섹션 레이블 — 고딕 대문자 */
.sec-label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-sans);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--red-300);
  margin-bottom: 24px;
}
.sec-label::before {
  content: '';
  width: 24px; height: 1.5px;
  background: var(--red-400);
  display: block;
}
.sec-label.dark-txt { color: var(--red-500); }
.sec-label.dark-txt::before { background: var(--red-500); }

/* 메인 헤드라인 — 세리프 강조 */
.headline-xl {
  font-family: var(--font-serif);
  font-size: clamp(3.2rem, 6.5vw, 7rem);
  font-weight: 700;
  line-height: 1.0;
  letter-spacing: -0.02em;
  color: var(--white);
}
.headline-lg {
  font-family: var(--font-serif);
  font-size: clamp(2.4rem, 4.5vw, 5rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.015em;
  color: var(--white);
}
.headline-md {
  font-family: var(--font-serif);
  font-size: clamp(1.8rem, 3vw, 3rem);
  font-weight: 600;
  line-height: 1.1;
  color: var(--white);
}
/* 라이트 섹션 헤드라인 */
.headline-xl.on-light,
.headline-lg.on-light,
.headline-md.on-light { color: var(--light-h); }

/* 레드 네온 강조 span */
.txt-red {
  color: var(--red-300);
  text-shadow: 0 0 20px rgba(220,40,40,0.50), 0 0 40px rgba(220,40,40,0.20);
}
.txt-red-dark {
  color: var(--red-500);
}

/* 브랜드 숫자 — Bebas */
.num-hero {
  font-family: var(--font-brand);
  font-size: clamp(5rem, 10vw, 11rem);
  letter-spacing: -2px;
  line-height: 0.9;
  color: var(--white);
}
.num-xl {
  font-family: var(--font-brand);
  font-size: clamp(3rem, 5vw, 5.5rem);
  letter-spacing: 0px;
  line-height: 1;
}

/* 본문 — 고딕 */
.body-lg {
  font-family: var(--font-sans);
  font-size: clamp(1rem, 1.4vw, 1.1rem);
  line-height: 1.95;
  color: var(--white-50);
}
.body-md {
  font-family: var(--font-sans);
  font-size: 0.95rem;
  line-height: 1.85;
  color: var(--white-50);
}
.body-lg.on-light, .body-md.on-light {
  color: var(--light-sub);
}
.body-sm {
  font-family: var(--font-sans);
  font-size: 0.85rem;
  line-height: 1.75;
  color: var(--white-30);
}

/* =====================================================
   NAVIGATION
   ===================================================== */
.site-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 950;                        /* modal(910) 위 */
  height: 62px;
  padding: 0 clamp(16px, 2.5vw, 40px); /* 좌우 패딩 축소 -> 로고 더 왼쪽 */
  display: flex;
  align-items: center;
  /* 항상 어두운 배경 — 로고 가독성 확보 */
  background: rgba(6,6,6,0.82);
  backdrop-filter: blur(16px) saturate(120%);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  transition: background 0.35s, box-shadow 0.35s;
}
.site-nav.scrolled {
  background: rgba(6,6,6,0.96);
  backdrop-filter: blur(24px);
  box-shadow: 0 1px 0 rgba(220,40,40,0.2);
}

.nav-inner {
  width: 100%;
  max-width: none;    /* ★ max-width 제거 — 로고 완전 좌측 고정 */
  margin: 0;
  padding: 0;         /* 내부 패딩 없음 (site-nav padding으로 제어) */
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* ── 로고 ── */
.nav-logo {
  display: flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
  user-select: none;
  transition: opacity 0.25s;
}
.nav-logo:hover { opacity: 0.9; }

/* 메탈릭 A 심볼 컨테이너 — 배경 복스 없음 */
.nav-logo-mark {
  width: 48px;
  height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: none;
  border-radius: 0;
  box-shadow: none;
  font-size: 0;
}

/* SVG — 크기 원래보다 커짜 — 더 눈에 띄게 */
.nav-logo-svg {
  width: 48px;
  height: 54px;
  display: block;
  filter:
    drop-shadow(0 0 10px rgba(200,40,40,0.55))
    drop-shadow(0 4px 8px rgba(0,0,0,0.9))
    drop-shadow(0 1px 1px rgba(255,255,255,0.18));
  transition: filter 0.35s ease, transform 0.35s ease;
  animation: logo-pulse 4s ease-in-out infinite alternate;
}
@keyframes logo-pulse {
  0%   { filter: drop-shadow(0 0 8px rgba(200,40,40,0.45)) drop-shadow(0 4px 8px rgba(0,0,0,0.85)); }
  100% { filter: drop-shadow(0 0 18px rgba(220,40,40,0.8)) drop-shadow(0 4px 10px rgba(0,0,0,0.95)); }
}
.nav-logo:hover .nav-logo-svg {
  filter:
    drop-shadow(0 0 22px rgba(220,40,40,0.85))
    drop-shadow(0 5px 10px rgba(0,0,0,1));
  transform: scale(1.06);
}

/* 구분선 (심볼 ↔ 텍스트) */
.nav-logo-text {
  display: flex;
  flex-direction: column;
  gap: 0;
  position: relative;
  padding-left: 13px;
}
.nav-logo-text::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 30px;
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(220,40,40,0.6) 30%,
    rgba(220,40,40,0.6) 70%,
    transparent 100%
  );
}

/* 브랜드명: ACERO — 강화된 타이포그래피 + 글로우 애니메이션 */
.nav-logo-text .brand {
  font-family: var(--font-brand);   /* Bebas Neue */
  font-size: 2rem;
  letter-spacing: 8px;
  color: #fff;
  display: block;
  line-height: 1;
  text-transform: uppercase;
  text-shadow:
    0 0 20px rgba(220,40,40,0.5),
    0 0 40px rgba(220,40,40,0.2),
    0 2px 4px rgba(0,0,0,0.8);
  animation: brand-glow 3s ease-in-out infinite alternate;
}
@keyframes brand-glow {
  0%   { text-shadow: 0 0 12px rgba(220,40,40,0.4), 0 0 30px rgba(220,40,40,0.15), 0 2px 4px rgba(0,0,0,0.8); }
  100% { text-shadow: 0 0 22px rgba(220,40,40,0.75), 0 0 50px rgba(220,40,40,0.35), 0 2px 6px rgba(0,0,0,0.9); }
}

/* 슬로건: 내일은 더 단단하게 | Forge Stronger. Every Day. */
.nav-logo-text .sub {
  font-family: var(--font-sans);
  font-size: 0.56rem;
  /* 레드 계열 — 첫번째 로고 슬로건 색 참고 */
  color: rgba(220, 80, 80, 0.9);
  letter-spacing: 1.2px;
  font-weight: 600;
  display: block;
  margin-top: 4px;
  white-space: nowrap;
  text-transform: none;
}

/* 메뉴 */
.nav-menu {
  display: flex;
  align-items: center;
  gap: 0;
  list-style: none;
}
.nav-menu a {
  padding: 8px 15px;
  font-family: var(--font-sans);
  font-size: 0.83rem;
  font-weight: 500;
  color: var(--white-50);
  border-radius: 7px;
  transition: color 0.2s, background 0.2s;
}
.nav-menu a:hover { color: #fff; background: var(--white-08); }

.nav-actions { display: flex; align-items: center; gap: 10px; }

.btn-nav-ghost {
  padding: 8px 17px;
  font-family: var(--font-sans); font-size: 0.82rem; font-weight: 600;
  color: var(--white-50);
  border: 1.5px solid var(--white-15);
  border-radius: 7px;
  transition: all 0.2s;
  display: flex; align-items: center; gap: 7px;
}
.btn-nav-ghost:hover { color: #fff; border-color: var(--red-border); }

.btn-nav-cta {
  padding: 10px 22px;
  font-family: var(--font-sans); font-size: 0.84rem; font-weight: 800;
  background: var(--red-500);
  color: #fff;
  border-radius: 7px;
  border: none;
  cursor: pointer;
  box-shadow: var(--sh-red-sm);
  transition: all 0.2s;
  display: flex; align-items: center; gap: 7px;
  text-decoration: none;
}
.btn-nav-cta:hover {
  background: var(--red-400);
  box-shadow: var(--sh-red);
  transform: translateY(-1px);
}

.nav-hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 6px;
}
.nav-hamburger span {
  width: 22px; height: 2px;
  background: var(--white-70);
  border-radius: 2px;
  display: block;
  transition: all 0.3s;
}

/* =====================================================
   SECTION 01 — HERO
   "아세로짐을 선택하는 순간, 변화가 시작됩니다"
   ===================================================== */
.hero {
  min-height: 100vh;
  width: 100%;
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
  background: var(--dark-950);
  /* scroll-snap-align: start; */
}

/* 배경 레이어 */
.hero-bg-layer {
  position: absolute; inset: 0; z-index: 0;
  /* 좌측 레드 글로우 원점 */
  background:
    radial-gradient(ellipse 60% 80% at -5% 50%, rgba(220,40,40,0.22) 0%, transparent 55%),
    radial-gradient(ellipse 40% 50% at 105% 20%, rgba(220,40,40,0.10) 0%, transparent 60%),
    radial-gradient(ellipse 80% 40% at 50% 100%, rgba(10,10,10,0.9) 0%, transparent 80%),
    linear-gradient(160deg, #111111 0%, #0a0a0a 100%);
}

/* 네온 수평선 장식 */
.hero-neon-line {
  position: absolute;
  left: 0; right: 0;
  height: 1px;
  z-index: 1;
  pointer-events: none;
}
.hero-neon-line.top {
  top: 68px;
  background: linear-gradient(90deg, transparent 0%, rgba(220,40,40,0.35) 30%, rgba(220,40,40,0.60) 50%, rgba(220,40,40,0.35) 70%, transparent 100%);
}
.hero-neon-line.bottom {
  bottom: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(220,40,40,0.20) 40%, rgba(220,40,40,0.40) 50%, rgba(220,40,40,0.20) 60%, transparent 100%);
}

/* 우측 대형 원형 링 */
.hero-circle {
  position: absolute;
  right: -12%;
  top: 50%;
  transform: translateY(-50%);
  width: 70vmin; height: 70vmin;
  border: 1px solid rgba(220,40,40,0.12);
  border-radius: 50%;
  z-index: 1;
  pointer-events: none;
}
.hero-circle::before {
  content: '';
  position: absolute; inset: 30px;
  border: 1px solid rgba(220,40,40,0.07);
  border-radius: 50%;
}
.hero-circle::after {
  content: '';
  position: absolute; inset: 70px;
  border: 1px solid rgba(255,255,255,0.04);
  border-radius: 50%;
}

/* 파티클 */
.hero-particles { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.hero-particles span {
  position: absolute; border-radius: 50%;
  animation: particleFloat linear infinite; opacity: 0;
}
.hero-particles span:nth-child(1){width:3px;height:3px;background:var(--red-400);left:8%;top:22%;animation-duration:9s;animation-delay:0s;}
.hero-particles span:nth-child(2){width:2px;height:2px;background:#fff;left:75%;top:18%;animation-duration:11s;animation-delay:2s;}
.hero-particles span:nth-child(3){width:4px;height:4px;background:var(--red-300);left:88%;top:65%;animation-duration:7.5s;animation-delay:1s;}
.hero-particles span:nth-child(4){width:2px;height:2px;background:#fff;left:20%;top:78%;animation-duration:10s;animation-delay:3.5s;}
.hero-particles span:nth-child(5){width:3px;height:3px;background:var(--red-400);left:55%;top:85%;animation-duration:8s;animation-delay:0.5s;}
.hero-particles span:nth-child(6){width:2px;height:2px;background:#fff;left:42%;top:8%;animation-duration:12s;animation-delay:4s;}
@keyframes particleFloat {
  0%   { opacity:0; transform:translateY(15px); }
  15%  { opacity:0.7; }
  85%  { opacity:0.3; }
  100% { opacity:0; transform:translateY(-35px); }
}

/* 히어로 내부 레이아웃 */
.hero-inner {
  position: relative; z-index: 2;
  width: 100%; max-width: 1360px;
  margin: 0 auto;
  padding: 140px var(--section-px) 100px;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 60px;
  align-items: center;
}

/* 브랜드 태그 */
.hero-tag {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 28px;
}
.hero-tag-label {
  font-family: var(--font-brand);
  font-size: clamp(1.8rem, 3vw, 2.8rem);
  letter-spacing: 8px;
  color: #fff;
  line-height: 1;
  text-shadow: 0 0 30px rgba(255,255,255,0.15);
}
.hero-tag-divider {
  width: 2px; height: 32px;
  background: linear-gradient(180deg, transparent, var(--red-400), transparent);
}
.hero-tag-sub {
  font-family: var(--font-sans);
  font-size: 0.68rem; font-weight: 700;
  letter-spacing: 2.5px; text-transform: uppercase;
  color: var(--red-300); line-height: 1.5;
}

/* 메인 헤드라인 */
.hero-headline {
  font-family: var(--font-serif);
  font-size: clamp(4rem, 7.8vw, 8.5rem);
  font-weight: 700;
  line-height: 0.93;
  letter-spacing: -0.025em;
  color: #fff;
  margin-bottom: 36px;
}
.hero-headline .line-red {
  display: block;
  color: var(--red-300);
  text-shadow: 0 0 30px rgba(220,40,40,0.55), 0 0 60px rgba(220,40,40,0.20);
}
.hero-headline .line-white {
  display: block;
  color: #fff;
}
.hero-headline .line-dim {
  display: block;
  color: var(--white-50);
  font-style: italic;
  font-size: 0.78em;
  font-weight: 300;
  letter-spacing: 0.01em;
  margin-top: 6px;
}

/* 서브카피 */
.hero-copy {
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 2.0;
  color: var(--white-50);
  max-width: 440px;
  margin-bottom: 36px;
}

/* 신뢰 뱃지 */
.hero-badges {
  display: flex; flex-wrap: wrap; gap: 10px;
  margin-bottom: 40px;
}
.hero-badge {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 14px;
  font-family: var(--font-sans); font-size: 0.75rem; font-weight: 600;
  color: var(--white-70);
  background: var(--white-04);
  border: 1px solid var(--white-08);
  border-radius: var(--r-full);
  backdrop-filter: blur(4px);
}
.hero-badge i { color: var(--red-300); font-size: 0.7rem; }

/* 히어로 CTA 버튼 */
.hero-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }

.btn-primary {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 17px 38px;
  font-family: var(--font-sans); font-size: 0.95rem; font-weight: 800;
  background: var(--red-500);
  color: #fff;
  border-radius: 10px;
  box-shadow: var(--sh-red-sm);
  transition: all 0.22s;
  letter-spacing: 0.3px;
  position: relative; overflow: hidden;
}
.btn-primary::before {
  content: '';
  position: absolute; top: 0; left: -100%; width: 100%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.12), transparent);
  transition: left 0.5s;
}
.btn-primary:hover { background: var(--red-400); box-shadow: var(--sh-red); transform: translateY(-3px); }
.btn-primary:hover::before { left: 100%; }

.btn-secondary {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 16px 30px;
  font-family: var(--font-sans); font-size: 0.92rem; font-weight: 600;
  color: var(--white-70);
  border: 1.5px solid var(--white-15);
  border-radius: 10px;
  transition: all 0.22s;
  background: var(--white-04);
  backdrop-filter: blur(6px);
}
.btn-secondary:hover { color: #fff; border-color: var(--red-border); background: rgba(220,40,40,0.06); transform: translateY(-2px); }

/* 라이트 섹션 버튼 */
.btn-primary-dark {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 17px 38px;
  font-family: var(--font-sans); font-size: 0.95rem; font-weight: 800;
  background: var(--light-h);
  color: #fff;
  border-radius: 10px;
  transition: all 0.22s;
}
.btn-primary-dark:hover { background: var(--red-500); transform: translateY(-2px); box-shadow: var(--sh-red-sm); }

.btn-ghost-dark {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 16px 28px;
  font-family: var(--font-sans); font-size: 0.9rem; font-weight: 600;
  color: var(--light-sub);
  border: 1.5px solid var(--light-border);
  border-radius: 10px;
  transition: all 0.22s;
}
.btn-ghost-dark:hover { color: var(--red-500); border-color: rgba(220,40,40,0.35); transform: translateY(-2px); }

/* 히어로 오른쪽 — 통계 카드 */
.hero-card-wrap { position: relative; }

.hero-card-wrap::before {
  content: '';
  position: absolute; top: -15%; left: -15%; width: 130%; height: 130%;
  background: radial-gradient(ellipse at 55% 50%, rgba(220,40,40,0.12) 0%, transparent 60%);
  pointer-events: none;
  animation: cardGlow 5s ease-in-out infinite;
}
@keyframes cardGlow {
  0%,100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.6; transform: scale(1.05); }
}

.hero-card {
  background: rgba(18,18,18,0.95);
  border: 1px solid rgba(220,40,40,0.20);
  border-radius: 20px;
  padding: 36px 32px;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.03), var(--sh-dark);
  position: relative;
  backdrop-filter: blur(10px);
}
.hero-card::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent 0%, var(--red-500) 35%, var(--red-300) 50%, var(--red-500) 65%, transparent 100%);
  border-radius: 20px 20px 0 0;
}
.hero-card-eyebrow {
  font-family: var(--font-sans); font-size: 0.6rem; font-weight: 800;
  letter-spacing: 3px; text-transform: uppercase;
  color: var(--red-300);
  margin-bottom: 20px;
}
.hero-stat-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
  margin-bottom: 24px;
}
.hero-stat-box {
  padding: 16px;
  background: var(--white-04);
  border: 1px solid var(--white-08);
  border-radius: 12px;
}
.hsb-label {
  font-family: var(--font-sans); font-size: 0.58rem; font-weight: 700;
  letter-spacing: 2px; text-transform: uppercase;
  color: var(--white-30); margin-bottom: 8px;
}
.hsb-value {
  font-family: var(--font-brand); font-size: 2.4rem;
  color: var(--white-90); line-height: 1; letter-spacing: 1px;
}
.hsb-value.red {
  color: var(--red-300);
  text-shadow: 0 0 16px rgba(220,40,40,0.50);
}
.hsb-unit { font-family: var(--font-sans); font-size: 0.65rem; color: var(--white-30); margin-left: 2px; }

.hero-ai-row {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 16px;
  background: rgba(220,40,40,0.06);
  border: 1px solid rgba(220,40,40,0.16);
  border-radius: 12px;
}
.hai-icon {
  width: 36px; height: 36px; border-radius: 9px; flex-shrink: 0;
  background: var(--red-500);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem;
}
.hai-title { font-family: var(--font-sans); font-size: 0.82rem; font-weight: 700; color: var(--white-90); margin-bottom: 2px; }
.hai-sub { font-family: var(--font-sans); font-size: 0.7rem; color: var(--white-30); }

/* 히어로 float 배지 */
.hero-float-badge {
  position: absolute; top: -16px; right: -16px;
  width: 72px; height: 72px; border-radius: 50%;
  background: var(--red-500);
  color: #fff;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  font-family: var(--font-brand); font-size: 0.65rem; letter-spacing: 1px;
  text-align: center; line-height: 1.3;
  box-shadow: var(--sh-red);
  animation: badgeFloat 3.5s ease-in-out infinite;
}
@keyframes badgeFloat {
  0%,100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-8px) rotate(3deg); }
}

/* 스크롤 힌트 */
.hero-scroll {
  position: absolute; bottom: 32px; left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  z-index: 3; text-decoration: none;
}
.hero-scroll-label {
  font-family: var(--font-sans); font-size: 0.6rem; font-weight: 700;
  letter-spacing: 3px; text-transform: uppercase;
  color: var(--white-30);
}
.hero-scroll-icon {
  width: 30px; height: 30px; border-radius: 50%;
  border: 1.5px solid rgba(220,40,40,0.30);
  display: flex; align-items: center; justify-content: center;
  color: var(--red-300); font-size: 0.65rem;
  animation: scrollBounce 1.8s ease-in-out infinite;
}
@keyframes scrollBounce { 0%,100%{transform:translateY(0);} 50%{transform:translateY(7px);} }

/* 히어로 진입 애니메이션 */
@keyframes fadeUp   { from{opacity:0;transform:translateY(28px);} to{opacity:1;transform:translateY(0);} }
@keyframes fadeLeft { from{opacity:0;transform:translateX(-20px);} to{opacity:1;transform:translateX(0);} }
@keyframes scaleUp  { from{opacity:0;transform:scale(0.95);} to{opacity:1;transform:scale(1);} }

.hero-tag       { animation: fadeLeft 0.65s 0.0s ease both; }
.hero-headline  { animation: fadeUp   0.75s 0.12s ease both; }
.hero-copy      { animation: fadeUp   0.75s 0.26s ease both; }
.hero-badges    { animation: fadeUp   0.75s 0.38s ease both; }
.hero-actions   { animation: fadeUp   0.75s 0.50s ease both; }
.hero-card-wrap { animation: scaleUp  0.80s 0.20s ease both; }

/* =====================================================
   SECTION 02 — STATS BAR (다크, 컴팩트)
   ===================================================== */
.stats-section {
  background: var(--dark-800);
  border-top: 1px solid rgba(220,40,40,0.18);
  border-bottom: 1px solid rgba(220,40,40,0.10);
  /* scroll-snap-align: none; */
  /* stats는 풀스크린 아님 — 자연스럽게 넘어가는 브릿지 */
  min-height: auto;
  padding: 0;
}
.stats-grid {
  max-width: 1360px; margin: 0 auto;
  padding: 0 var(--section-px);
  display: grid; grid-template-columns: repeat(4,1fr);
}
.stat-item {
  padding: 44px 20px; text-align: center;
  border-right: 1px solid var(--white-08);
  transition: background 0.2s;
}
.stat-item:last-child { border-right: none; }
.stat-item:hover { background: var(--white-04); }
.stat-num {
  font-family: var(--font-brand);
  font-size: clamp(2.4rem, 4vw, 3.5rem);
  color: var(--white-90); line-height: 1; margin-bottom: 8px;
  letter-spacing: 1px;
}
.stat-num span { color: var(--red-300); font-size: 0.6em; }
.stat-label {
  font-family: var(--font-sans); font-size: 0.72rem; font-weight: 700;
  letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--white-30);
}

/* =====================================================
   SECTION 03 — MEMBERSHIP (라이트, 풀스크린)
   스토리: "선택만 하면 됩니다"
   ===================================================== */
.membership-section {
  background: var(--light-bg);
  min-height: 100vh;
  /* scroll-snap-align: start; */
  padding: 0;
  display: flex; align-items: center;
  position: relative; overflow: hidden;
}

/* 라이트 섹션 배경 장식 */
.membership-section::before {
  content: '';
  position: absolute; top: -80px; right: -80px;
  width: 400px; height: 400px;
  background: radial-gradient(circle, rgba(220,40,40,0.06) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}

.ms-inner {
  width: 100%; max-width: 1360px;
  margin: 0 auto;
  padding: 100px var(--section-px) 80px;
}

/* 상단: 헤드 + 훅 가격 */
.ms-head {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 60px; align-items: end;
  margin-bottom: 64px;
}
.ms-price-hook {
  display: flex; align-items: baseline; gap: 6px;
  margin-top: 20px;
}
.ms-price-from {
  font-family: var(--font-sans); font-size: 0.8rem; font-weight: 700;
  color: var(--light-mute); letter-spacing: 1px; text-transform: uppercase;
}
.ms-price-num {
  font-family: var(--font-brand); font-size: clamp(3rem,5vw,4.5rem);
  color: var(--red-500); line-height: 1; letter-spacing: 0;
}
.ms-price-unit {
  font-family: var(--font-sans); font-size: 0.9rem; font-weight: 600;
  color: var(--light-mute);
}
.ms-price-note {
  font-family: var(--font-sans); font-size: 0.82rem;
  color: var(--light-mute); margin-top: 6px;
}

/* 토글 카드 (구독 vs 이용권) */
.ms-toggle-cards {
  display: flex; flex-direction: column; gap: 14px;
}
.ms-toggle-card {
  background: var(--light-card);
  border: 1.5px solid var(--light-border);
  border-radius: var(--r-lg); padding: 24px 26px;
  transition: all 0.25s; cursor: pointer;
}
.ms-toggle-card:hover { border-color: rgba(220,40,40,0.25); box-shadow: var(--sh-card-hover); }
.ms-toggle-card.active {
  border-color: var(--red-500);
  box-shadow: 0 0 0 3px rgba(220,40,40,0.08), var(--sh-card-hover);
}
.mtc-tag {
  display: inline-block;
  padding: 3px 11px; margin-bottom: 10px;
  font-family: var(--font-sans); font-size: 0.63rem; font-weight: 800;
  letter-spacing: 1.5px; text-transform: uppercase;
  background: var(--red-500); color: #fff; border-radius: var(--r-full);
}
.mtc-tag.gray { background: #e0e0e0; color: #666; }
.mtc-name {
  font-family: var(--font-serif); font-size: 1.5rem; font-weight: 700;
  color: var(--light-h); margin-bottom: 3px;
}
.mtc-price {
  font-family: var(--font-brand); font-size: 2.4rem;
  color: var(--light-h); line-height: 1;
}
.ms-toggle-card.active .mtc-price { color: var(--red-500); }
.mtc-period { font-family: var(--font-sans); font-size: 0.78rem; color: var(--light-mute); margin: 3px 0 10px; }
.mtc-desc { font-family: var(--font-sans); font-size: 0.86rem; color: var(--light-sub); line-height: 1.75; }

/* 3단 플랜 그리드 */
.plan-grid {
  display: grid; grid-template-columns: repeat(3,1fr); gap: 20px;
}
.plan-card {
  background: var(--light-card);
  border: 1.5px solid var(--light-border);
  border-radius: var(--r-xl); padding: 32px 26px;
  position: relative; transition: all 0.25s;
}
.plan-card:hover { box-shadow: var(--sh-card-hover); transform: translateY(-4px); }
.plan-card.best {
  border-color: var(--red-500);
  box-shadow: 0 0 0 3px rgba(220,40,40,0.08), var(--sh-card-hover);
  transform: translateY(-8px) scale(1.015);
}
.plan-card.best:hover { transform: translateY(-12px) scale(1.015); }

.plan-best-tag {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 13px; margin-bottom: 18px;
  font-family: var(--font-sans); font-size: 0.63rem; font-weight: 800;
  letter-spacing: 1.5px; text-transform: uppercase;
  background: var(--red-500); color: #fff; border-radius: var(--r-full);
}
.plan-name {
  font-family: var(--font-serif); font-size: 1.7rem; font-weight: 700;
  color: var(--light-h); margin-bottom: 6px;
}
.plan-price-row { display: flex; align-items: baseline; gap: 4px; margin-bottom: 3px; }
.plan-price {
  font-family: var(--font-brand); font-size: 2.8rem;
  color: var(--light-h); line-height: 1;
}
.plan-card.best .plan-price { color: var(--red-500); }
.plan-unit { font-family: var(--font-sans); font-size: 0.84rem; font-weight: 600; color: var(--light-mute); }
.plan-period { font-family: var(--font-sans); font-size: 0.76rem; color: var(--light-mute); margin-bottom: 22px; }
.plan-divider { height: 1px; background: var(--light-border); margin-bottom: 20px; }
.plan-feats { list-style: none; display: flex; flex-direction: column; gap: 10px; margin-bottom: 28px; }
.plan-feats li {
  display: flex; align-items: center; gap: 9px;
  font-family: var(--font-sans); font-size: 0.86rem; color: var(--light-sub);
}
.pf-dot {
  width: 18px; height: 18px; border-radius: 50%; flex-shrink: 0;
  background: rgba(220,40,40,0.08); border: 1.5px solid rgba(220,40,40,0.22);
  display: flex; align-items: center; justify-content: center;
  color: var(--red-500); font-size: 0.55rem;
}
.plan-feats li.na { color: #bbb; }
.plan-feats li.na .pf-dot { background: #f0f0f0; border-color: #ddd; color: #bbb; }

.btn-plan-red {
  display: block; width: 100%; padding: 14px;
  font-family: var(--font-sans); font-size: 0.9rem; font-weight: 800;
  background: var(--red-500); color: #fff;
  text-align: center; border-radius: 10px;
  transition: all 0.22s;
}
.btn-plan-red:hover { background: var(--red-400); box-shadow: var(--sh-red-sm); transform: translateY(-2px); }
.btn-plan-outline {
  display: block; width: 100%; padding: 14px;
  font-family: var(--font-sans); font-size: 0.9rem; font-weight: 700;
  background: transparent; color: var(--light-sub);
  border: 1.5px solid var(--light-border);
  text-align: center; border-radius: 10px;
  transition: all 0.22s;
}
.btn-plan-outline:hover { border-color: rgba(220,40,40,0.35); color: var(--red-500); }

/* =====================================================
   SECTION 04 — WHY ACERO (다크, 풀스크린)
   스토리: "여기가 다른 이유"
   ===================================================== */
.why-section {
  background: var(--dark-900);
  min-height: 100vh;
  /* scroll-snap-align: start; */
  display: flex; align-items: center;
  position: relative; overflow: hidden;
}
.why-section::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 55% 60% at 90% 50%, rgba(220,40,40,0.08) 0%, transparent 60%),
    radial-gradient(ellipse 40% 40% at 10% 80%, rgba(220,40,40,0.05) 0%, transparent 55%);
  pointer-events: none;
}

.why-inner {
  width: 100%; max-width: 1360px;
  margin: 0 auto;
  padding: 100px var(--section-px) 80px;
  position: relative; z-index: 1;
}
.why-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 80px; align-items: center;
}

/* 왼쪽 — 포인트 리스트 */
.why-items { display: flex; flex-direction: column; gap: 20px; }

.why-item {
  display: flex; align-items: flex-start; gap: 20px;
  padding: 24px;
  background: var(--white-04);
  border: 1px solid var(--white-08);
  border-radius: var(--r-lg);
  transition: all 0.25s;
  cursor: default;
}
.why-item:hover {
  background: rgba(220,40,40,0.05);
  border-color: var(--red-border);
  transform: translateX(6px);
}
.wi-icon {
  width: 50px; height: 50px; border-radius: 12px; flex-shrink: 0;
  background: var(--red-500);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.3rem;
  box-shadow: var(--sh-red-sm);
}
.wi-title {
  font-family: var(--font-serif); font-size: 1.2rem; font-weight: 700;
  color: var(--white-90); margin-bottom: 6px; letter-spacing: 0.01em;
}
.wi-desc {
  font-family: var(--font-sans); font-size: 0.84rem;
  color: var(--white-40, rgba(255,255,255,0.40)); line-height: 1.8;
}

/* 오른쪽 — 성과 카드 스택 */
.why-cards { display: flex; flex-direction: column; gap: 16px; }

.result-card {
  background: rgba(18,16,14,0.90);
  border: 1px solid rgba(220,40,40,0.14);
  border-radius: var(--r-lg); padding: 24px;
  position: relative; overflow: hidden;
}
.result-card::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--red-500), transparent);
}
.rc-eyebrow {
  font-family: var(--font-sans); font-size: 0.6rem; font-weight: 800;
  letter-spacing: 2.5px; text-transform: uppercase;
  color: var(--red-300); margin-bottom: 12px;
}
.rc-row { display: flex; align-items: center; gap: 14px; }
.rc-avatar {
  width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0;
  background: var(--red-600);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-brand); font-size: 1.1rem; color: #fff;
}
.rc-info { flex: 1; }
.rc-name {
  font-family: var(--font-sans); font-size: 0.88rem; font-weight: 700;
  color: var(--white-90); margin-bottom: 2px;
}
.rc-meta { font-family: var(--font-sans); font-size: 0.72rem; color: var(--white-30); }
.rc-stat { text-align: right; }
.rc-num {
  font-family: var(--font-brand); font-size: 1.9rem; letter-spacing: 1px;
  color: var(--red-300);
  text-shadow: 0 0 14px rgba(220,40,40,0.45);
  line-height: 1;
}
.rc-unit { font-family: var(--font-sans); font-size: 0.7rem; color: var(--white-30); }

.ai-preview-card {
  background: rgba(220,40,40,0.05);
  border: 1px solid rgba(220,40,40,0.14);
  border-radius: var(--r-lg); padding: 22px;
}
.apc-label {
  display: flex; align-items: center; gap: 7px;
  font-family: var(--font-sans); font-size: 0.6rem; font-weight: 800;
  letter-spacing: 2.5px; text-transform: uppercase;
  color: var(--red-300); margin-bottom: 12px;
}
.apc-text {
  font-family: var(--font-sans); font-size: 0.86rem;
  color: var(--white-60, rgba(255,255,255,0.60)); line-height: 1.85;
  padding-left: 12px;
  border-left: 2px solid var(--red-500);
  font-style: italic;
}
.apc-meta { font-family: var(--font-sans); font-size: 0.7rem; color: var(--white-30); margin-top: 10px; }

/* =====================================================
   SECTION 05 — FACILITY (라이트, 풀스크린)
   스토리: "공간이 당신을 만든다"
   ===================================================== */
.facility-section {
  background: var(--light-card);
  min-height: 100vh;
  /* scroll-snap-align: start; */
  display: flex; align-items: center;
  overflow: hidden;
}
.fac-inner {
  width: 100%; max-width: 1360px;
  margin: 0 auto;
  padding: 100px var(--section-px) 80px;
}
.fac-grid {
  display: grid; grid-template-columns: repeat(3,1fr); gap: 22px;
  margin-top: 56px;
}
.fac-card {
  background: var(--light-bg);
  border: 1px solid var(--light-border);
  border-radius: var(--r-lg); overflow: hidden;
  transition: all 0.28s;
}
.fac-card:hover { box-shadow: var(--sh-card-hover); transform: translateY(-5px); border-color: rgba(220,40,40,0.25); }
.fac-img {
  height: 190px;
  background: linear-gradient(135deg, var(--dark-700), var(--dark-600));
  display: flex; align-items: center; justify-content: center;
  font-size: 2.8rem;
  position: relative; overflow: hidden;
}
.fac-img::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(10,10,10,0.5) 0%, transparent 55%);
}
.fac-body { padding: 24px 22px; }
.fac-num {
  font-family: var(--font-brand); font-size: 0.65rem; letter-spacing: 3px;
  color: var(--red-500); margin-bottom: 9px;
}
.fac-title {
  font-family: var(--font-serif); font-size: 1.45rem; font-weight: 700;
  color: var(--light-h); margin-bottom: 9px; line-height: 1.2;
}
.fac-desc {
  font-family: var(--font-sans); font-size: 0.84rem;
  color: var(--light-sub); line-height: 1.8;
}

/* =====================================================
   SECTION 06 — TRAINERS (다크, 풀스크린)
   스토리: "믿을 수 있는 전문가"
   ===================================================== */
.trainer-section {
  background: var(--dark-950);
  min-height: 100vh;
  /* scroll-snap-align: start; */
  display: flex; align-items: center;
  position: relative; overflow: hidden;
}
.trainer-section::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 70% 50% at 50% 100%, rgba(220,40,40,0.06) 0%, transparent 65%);
  pointer-events: none;
}
.tr-inner {
  width: 100%; max-width: 1360px;
  margin: 0 auto;
  padding: 100px var(--section-px) 80px;
  position: relative; z-index: 1;
}
.tr-grid {
  display: grid; grid-template-columns: repeat(3,1fr); gap: 24px;
  margin-top: 56px;
}
.tr-card {
  background: var(--dark-800);
  border: 1px solid var(--white-08);
  border-radius: var(--r-xl); padding: 30px 24px;
  text-align: center; transition: all 0.25s;
  position: relative;
}
.tr-card::after {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, transparent, var(--red-500), transparent);
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  opacity: 0; transition: opacity 0.25s;
}
.tr-card:hover { box-shadow: 0 8px 40px rgba(0,0,0,0.30); transform: translateY(-5px); }
.tr-card:hover::after { opacity: 1; }

.tr-avatar {
  width: 86px; height: 86px; border-radius: 50%;
  background: linear-gradient(135deg, var(--dark-600), var(--dark-500));
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-brand); font-size: 2rem;
  color: var(--red-300); margin: 0 auto 18px;
  border: 2.5px solid rgba(220,40,40,0.25);
  box-shadow: 0 0 20px rgba(220,40,40,0.15);
}
.tr-name {
  /* Noto Sans KR 900: 한글 기하학적 블랙웨이트 */
  font-family: 'Noto Sans KR', 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
  font-size: 1.35rem;
  font-weight: 900;
  letter-spacing: -.03em;
  line-height: 1.2;
  color: var(--white-90);
  margin-bottom: 6px;
}
.tr-cert {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--font-sans); font-size: 0.68rem; font-weight: 700;
  color: var(--red-300);
  background: rgba(220,40,40,0.08);
  border: 1px solid rgba(220,40,40,0.20);
  padding: 3px 10px; border-radius: var(--r-full);
  margin-bottom: 14px;
}
.tr-spec {
  font-family: var(--font-sans); font-size: 0.84rem;
  color: var(--white-40, rgba(255,255,255,0.40)); line-height: 1.75; margin-bottom: 16px;
}
.tr-tags { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.tr-tag {
  padding: 4px 11px; border-radius: var(--r-full);
  background: var(--white-04); border: 1px solid var(--white-08);
  font-family: var(--font-sans); font-size: 0.73rem; font-weight: 600;
  color: var(--white-50);
}

/* =====================================================
   SECTION 07 — RESULTS (다크 + 레드 글로우, 풀스크린)
   스토리: "숫자가 증명합니다"
   ===================================================== */
.results-section {
  background: var(--dark-900);
  min-height: 100vh;
  /* scroll-snap-align: start; */
  display: flex; align-items: center;
  position: relative; overflow: hidden;
}
.results-section::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 65% 60% at 50% 50%, rgba(220,40,40,0.07) 0%, transparent 65%);
  pointer-events: none;
}
.res-inner {
  width: 100%; max-width: 1360px;
  margin: 0 auto;
  padding: 100px var(--section-px) 80px;
  display: grid; grid-template-columns: 1fr 1.3fr;
  gap: 80px; align-items: center;
  position: relative; z-index: 1;
}
.res-left {}
.res-headline {
  font-family: var(--font-serif);
  font-size: clamp(2.6rem, 4.5vw, 4.8rem);
  font-weight: 700; line-height: 1.0;
  color: #fff; margin-bottom: 22px; letter-spacing: -0.015em;
}
.res-headline .red { color: var(--red-300); text-shadow: 0 0 24px rgba(220,40,40,0.50); }
.res-body { font-family: var(--font-sans); font-size: 0.98rem; color: var(--white-50); line-height: 1.9; margin-bottom: 38px; }

.outcomes-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
}
.outcome-card {
  background: rgba(18,16,14,0.80);
  border: 1px solid rgba(220,40,40,0.12);
  border-radius: var(--r-lg); padding: 26px;
  transition: all 0.25s; position: relative; overflow: hidden;
}
.outcome-card::after {
  content: '';
  position: absolute; bottom: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--red-500), transparent);
  opacity: 0; transition: opacity 0.25s;
}
.outcome-card:hover { border-color: rgba(220,40,40,0.28); transform: translateY(-3px); }
.outcome-card:hover::after { opacity: 1; }
.oc-icon { font-size: 1.5rem; margin-bottom: 13px; }
.oc-num {
  font-family: var(--font-brand); font-size: 2.8rem; letter-spacing: 0px;
  color: var(--red-300);
  text-shadow: 0 0 20px rgba(220,40,40,0.45);
  line-height: 1; margin-bottom: 7px;
}
.oc-label {
  font-family: var(--font-sans); font-size: 0.88rem; font-weight: 700;
  color: var(--white-85, rgba(255,255,255,0.85)); margin-bottom: 5px;
}
.oc-desc { font-family: var(--font-sans); font-size: 0.78rem; color: var(--white-30); line-height: 1.7; }

/* =====================================================
   SECTION 08 — TESTIMONIALS (라이트, 풀스크린)
   스토리: "직접 경험한 사람들"
   ===================================================== */
.testi-section {
  background: var(--light-bg);
  min-height: 100vh;
  /* scroll-snap-align: start; */
  display: flex; align-items: center;
  overflow: hidden;
}
.testi-inner {
  width: 100%; max-width: 1360px;
  margin: 0 auto;
  padding: 100px var(--section-px) 80px;
}
.testi-grid {
  display: grid; grid-template-columns: repeat(3,1fr); gap: 22px;
  margin-top: 56px;
}
.testi-card {
  background: var(--light-card);
  border: 1px solid var(--light-border);
  border-radius: var(--r-lg); padding: 30px 26px;
  position: relative; transition: all 0.25s;
  box-shadow: var(--sh-card);
}
.testi-card::before {
  content: '\201C';
  position: absolute; top: 14px; left: 20px;
  font-family: var(--font-serif); font-size: 5rem; line-height: 1;
  color: rgba(220,40,40,0.10); pointer-events: none; font-style: italic;
}
.testi-card:hover { box-shadow: var(--sh-card-hover); border-color: rgba(220,40,40,0.20); transform: translateY(-4px); }
.testi-stars { display: flex; gap: 3px; margin-bottom: 16px; }
.testi-stars span { color: var(--red-400); font-size: 0.82rem; }
.testi-text {
  font-family: var(--font-sans); font-size: 0.9rem;
  color: var(--light-sub); line-height: 1.9;
  margin-bottom: 22px; padding-top: 22px;
}
.testi-author {
  display: flex; align-items: center; gap: 11px;
  padding-top: 16px;
  border-top: 1px solid var(--light-border);
}
.testi-avatar {
  width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;
  background: rgba(220,40,40,0.08);
  border: 1.5px solid rgba(220,40,40,0.20);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-brand); font-size: 1rem;
  color: var(--red-500);
}
.testi-name { font-family: var(--font-sans); font-size: 0.86rem; font-weight: 700; color: var(--light-h); }
.testi-meta { font-family: var(--font-sans); font-size: 0.72rem; color: var(--light-mute); margin-top: 2px; }

/* =====================================================
   SECTION 09 — LOCATION (다크, 풀스크린)
   스토리: "지금 바로 오세요"
   ===================================================== */
.location-section {
  background: var(--dark-800);
  min-height: 100vh;
  /* scroll-snap-align: start; */
  display: flex; align-items: center;
  position: relative; overflow: hidden;
}
.location-section::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 50% 60% at 0% 50%, rgba(220,40,40,0.08) 0%, transparent 60%);
  pointer-events: none;
}
.loc-inner {
  width: 100%; max-width: 1360px;
  margin: 0 auto;
  padding: 100px var(--section-px) 80px;
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 72px; align-items: center;
  position: relative; z-index: 1;
}
.loc-info-card {
  background: var(--dark-700);
  border: 1px solid var(--white-08);
  border-radius: var(--r-xl); padding: 28px;
  margin-top: 32px;
}
.loc-item {
  display: flex; align-items: flex-start; gap: 13px;
  padding: 13px 0;
  border-bottom: 1px solid var(--white-08);
}
.loc-item:last-child { border-bottom: none; }
.loc-ico {
  width: 34px; height: 34px; border-radius: 8px; flex-shrink: 0;
  background: rgba(220,40,40,0.10);
  border: 1px solid rgba(220,40,40,0.20);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.85rem; color: var(--red-300);
}
.loc-lbl { font-family: var(--font-sans); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; color: var(--white-30); margin-bottom: 3px; }
.loc-val { font-family: var(--font-sans); font-size: 0.88rem; color: var(--white-70); line-height: 1.65; }

.loc-map {
  background: var(--dark-700);
  border: 1px solid rgba(220,40,40,0.15);
  border-radius: var(--r-xl); height: 380px;
  position: relative; overflow: hidden;
}
.loc-map-ph {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 12px;
}
.lm-pin { font-size: 2.8rem; }
.lm-name {
  font-family: var(--font-brand); font-size: 1.3rem;
  letter-spacing: 3px; color: var(--red-300);
  text-shadow: 0 0 16px rgba(220,40,40,0.40);
}
.lm-sub { font-family: var(--font-sans); font-size: 0.8rem; color: var(--white-30); }
.lm-btn {
  margin-top: 6px; padding: 10px 22px;
  font-family: var(--font-sans); font-size: 0.83rem; font-weight: 700;
  background: var(--red-500); color: #fff; border-radius: 8px;
  box-shadow: var(--sh-red-sm); transition: all 0.2s;
  display: inline-flex; align-items: center; gap: 7px;
}
.lm-btn:hover { background: var(--red-400); transform: translateY(-2px); }

/* =====================================================
   SECTION 10 — CTA (다크, 풀스크린)
   스토리: "첫 걸음을 내딛는 순간"
   ===================================================== */
.cta-section {
  background: var(--dark-950);
  min-height: 100vh;
  /* scroll-snap-align: start; */
  display: flex; align-items: center; justify-content: center;
  position: relative; overflow: hidden;
}
.cta-section::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 70% 60% at 50% 50%, rgba(220,40,40,0.12) 0%, transparent 60%),
    radial-gradient(ellipse 40% 40% at 20% 80%, rgba(220,40,40,0.06) 0%, transparent 55%);
  pointer-events: none;
}

/* 네온 수평선 장식 */
.cta-section::after {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(220,40,40,0.40) 50%, transparent);
}

.cta-inner {
  max-width: 800px; text-align: center;
  padding: 80px var(--section-px);
  position: relative; z-index: 1;
}
.cta-headline {
  font-family: var(--font-serif);
  font-size: clamp(2.6rem, 5vw, 5rem);
  font-weight: 700; color: #fff;
  line-height: 1.05; letter-spacing: -0.02em;
  margin-bottom: 20px;
}
.cta-headline .red { color: var(--red-300); text-shadow: 0 0 30px rgba(220,40,40,0.50); }
.cta-body {
  font-family: var(--font-sans); font-size: 1.02rem;
  color: var(--white-50); line-height: 1.95; margin-bottom: 48px;
}
.cta-actions { display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; }

/* =====================================================
   FOOTER
   ===================================================== */
.site-footer {
  background: #050505;
  padding: 60px var(--section-px) 30px;
  border-top: 1px solid rgba(220,40,40,0.12);
  /* scroll-snap-align: start; */
}
.footer-inner { max-width: 1360px; margin: 0 auto; }
.footer-top {
  display: grid; grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 44px; margin-bottom: 48px;
}
.fb-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
  text-decoration: none;
}
.fb-logo-svg {
  width: 30px;
  height: 34px;
  flex-shrink: 0;
  filter: drop-shadow(0 2px 5px rgba(220,40,40,0.3));
}
.fb-logo-text {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding-left: 10px;
  position: relative;
}
.fb-logo-text::before {
  content: '';
  position: absolute;
  left: 0; top: 50%;
  transform: translateY(-50%);
  width: 1px; height: 24px;
  background: linear-gradient(180deg, transparent, rgba(220,40,40,0.5), transparent);
}
.fb-brand {
  font-family: var(--font-brand);
  font-size: 1.25rem;
  letter-spacing: 5px;
  color: rgba(255,255,255,0.85);
  display: block;
  line-height: 1;
}
.fb-slogan {
  font-family: var(--font-sans);
  font-size: 0.52rem;
  color: rgba(255,255,255,0.35);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  display: block;
  margin-top: 4px;
  white-space: nowrap;
}
.fb-desc { font-family: var(--font-sans); font-size: 0.83rem; color: var(--white-30); line-height: 1.85; max-width: 270px; margin-bottom: 22px; }
.fb-contact { font-family: var(--font-sans); font-size: 0.79rem; color: var(--white-30); margin-bottom: 8px; display: flex; align-items: center; gap: 8px; }
.fb-contact i { color: var(--red-400); font-size: 0.74rem; }

.footer-col-title { font-family: var(--font-sans); font-size: 0.65rem; font-weight: 800; letter-spacing: 2.5px; text-transform: uppercase; color: var(--white-25, rgba(255,255,255,0.25)); margin-bottom: 16px; }
.footer-links { list-style: none; display: flex; flex-direction: column; gap: 9px; }
.footer-links a { font-family: var(--font-sans); font-size: 0.86rem; color: var(--white-35, rgba(255,255,255,0.35)); transition: color 0.2s; }
.footer-links a:hover { color: var(--red-300); }
.ft-new-badge {
  display: inline-block; padding: 1px 5px; border-radius: 3px;
  font-size: 0.6rem; font-weight: 700; letter-spacing: .5px;
  background: var(--red, #dc2020); color: #fff; margin-left: 5px;
  vertical-align: middle; line-height: 1.5;
}

/* 푸터 SNS 버튼 */
.footer-sns {
  display: flex;
  gap: 10px;
  margin-top: 18px;
  flex-wrap: wrap;
}
.footer-sns-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.45);
  font-size: 0.9rem;
  transition: background 0.2s, color 0.2s, border-color 0.2s, transform 0.2s;
  text-decoration: none;
}
.footer-sns-btn:hover {
  background: rgba(212,32,32,0.15);
  border-color: rgba(212,32,32,0.4);
  color: var(--red-300);
  transform: translateY(-2px);
}

/* 푸터 사업자 정보 줄 */
.footer-legal {
  font-family: var(--font-sans);
  font-size: 0.72rem;
  color: rgba(255,255,255,0.18);
  line-height: 1.8;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--white-08);
  margin-bottom: 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 0;
  align-items: center;
}
.fl-sep {
  margin: 0 8px;
  color: rgba(255,255,255,0.1);
}

.footer-bottom { display: flex; justify-content: space-between; align-items: center; padding-top: 24px; border-top: 1px solid var(--white-08); flex-wrap: wrap; gap: 10px; }
.footer-copy { font-family: var(--font-sans); font-size: 0.76rem; color: var(--white-20, rgba(255,255,255,0.20)); }
.footer-copy span { color: var(--red-400); }
.footer-bl { display: flex; gap: 18px; }
.footer-bl a { font-family: var(--font-sans); font-size: 0.76rem; color: var(--white-20, rgba(255,255,255,0.20)); transition: color 0.2s; }
.footer-bl a:hover { color: var(--white-55, rgba(255,255,255,0.55)); }

/* =====================================================
   FLOATING ACCESS BAR — 2단 레이아웃
   ● 1행: 무료 상담 (빨간 pill CTA)
   ● 2행: 전화(빨강 원) + 카카오(노랑 원) 나란히
   ===================================================== */

/* ── 컨테이너 ── */
.float-access {
  position: fixed;
  bottom: 28px;
  right: 22px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  z-index: 800;
}

/* ── 1행: 무료 상담 pill ── */
.float-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 22px;
  border-radius: 50px;
  background: #DC2828;
  color: #fff;
  font-family: var(--font-sans, 'Noto Sans KR', sans-serif);
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.2px;
  border: none;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 4px 18px rgba(220,40,40,0.45);
  transition: background 0.2s, transform 0.2s, box-shadow 0.2s;
  animation: ctaPulse 2.8s ease-in-out infinite;
}
.float-cta:hover {
  background: #F03030;
  transform: translateY(-3px);
  box-shadow: 0 8px 28px rgba(220,40,40,0.6);
}
.float-cta:active { transform: translateY(0); }

@keyframes ctaPulse {
  0%,100% { box-shadow: 0 4px 18px rgba(220,40,40,0.45); }
  50%      { box-shadow: 0 6px 28px rgba(220,40,40,0.7), 0 0 0 6px rgba(220,40,40,0.12); }
}

/* ── 2행: 아이콘 원형 버튼 나란히 ── */
.float-row {
  display: flex;
  flex-direction: row;
  gap: 10px;
  align-items: center;
  justify-content: flex-end;
}

.float-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  position: relative;
  transition: transform 0.2s, box-shadow 0.2s;
  box-shadow: 0 4px 14px rgba(0,0,0,0.35);
}
.float-btn:hover  { transform: translateY(-4px) scale(1.08); }
.float-btn:active { transform: translateY(0) scale(1); }

/* 전화 버튼 — 빨강 */
.float-tel {
  background: #DC2828;
  color: #fff;
}
.float-tel:hover { box-shadow: 0 6px 20px rgba(220,40,40,0.55); }

/* 카카오 버튼 — 카카오 옐로 */
.float-kakao {
  background: #FEE500;
  color: #3C1E1E;
}
.float-kakao:hover { box-shadow: 0 6px 20px rgba(254,229,0,0.55); }

/* 툴팁 (hover 시 왼쪽에 표시) */
.float-btn::before {
  content: attr(data-tip);
  position: absolute;
  right: calc(100% + 10px);
  top: 50%;
  transform: translateY(-50%);
  background: rgba(8,8,8,0.88);
  color: #fff;
  font-family: var(--font-sans, 'Noto Sans KR', sans-serif);
  font-size: 0.68rem;
  font-weight: 700;
  padding: 5px 10px;
  border-radius: 6px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s;
  border: 1px solid rgba(255,255,255,0.1);
}
.float-btn:hover::before { opacity: 1; }

/* =====================================================
   SECTION HEADER HELPER
   ===================================================== */
.sec-header { margin-bottom: 56px; }
.sec-header.center { text-align: center; display: flex; flex-direction: column; align-items: center; }
.sec-header .sec-label { display: inline-flex; }
.sec-desc {
  font-family: var(--font-sans); font-size: 1rem; line-height: 1.9;
  color: var(--white-50); max-width: 540px; margin-top: 16px;
}
.sec-desc.dark { color: var(--light-sub); }
.sec-desc.center-txt { text-align: center; }

/* =====================================================
   SCROLL-REVEAL 애니메이션
   ===================================================== */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.65s ease, transform 0.65s ease;
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}
.reveal-left {
  opacity: 0;
  transform: translateX(-24px);
  transition: opacity 0.65s ease, transform 0.65s ease;
}
.reveal-left.visible { opacity: 1; transform: translateX(0); }
.reveal-right {
  opacity: 0;
  transform: translateX(24px);
  transition: opacity 0.65s ease, transform 0.65s ease;
}
.reveal-right.visible { opacity: 1; transform: translateX(0); }

/* 딜레이 클래스 */
.d1 { transition-delay: 0.08s; }
.d2 { transition-delay: 0.16s; }
.d3 { transition-delay: 0.24s; }
.d4 { transition-delay: 0.32s; }
.d5 { transition-delay: 0.40s; }

/* =====================================================
   TOAST
   ===================================================== */
.toast-wrap { position:fixed; top:78px; right:20px; z-index:9000; display:flex; flex-direction:column; gap:8px; pointer-events:none; }
.toast {
  display:flex; align-items:center; gap:10px; padding:13px 18px;
  background:var(--dark-700); border:1px solid var(--white-08);
  border-radius:12px; box-shadow:var(--sh-dark);
  min-width:260px; max-width:380px;
  font-family:var(--font-sans); font-size:0.84rem; color:var(--white-90);
  transform:translateX(110%); transition:transform 0.3s cubic-bezier(0.34,1.56,0.64,1);
  pointer-events:auto;
}
.toast.show { transform:translateX(0); }
.toast.toast-exit { transform:translateX(110%); transition:transform 0.3s ease; }
.toast.success { border-left:3px solid var(--red-400); }
.toast.error { border-left:3px solid #e55; }

/* =====================================================
   UTILITIES
   ===================================================== */
.spinner { display:inline-block; width:16px; height:16px; border:2px solid var(--white-15); border-top-color:var(--red-400); border-radius:50%; animation:spin 0.8s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
::-webkit-scrollbar { width:4px; height:4px; }
::-webkit-scrollbar-track { background:var(--dark-950); }
::-webkit-scrollbar-thumb { background:rgba(220,40,40,0.35); border-radius:3px; }

/* =====================================================
   HERO LEGACY SHIM — index.html 실제 사용 클래스
   ===================================================== */
/* hero-brand-tag */
.hero-brand-tag {
  display: inline-flex; align-items: center; gap: 12px;
  margin-bottom: 28px;
}
.brand-name {
  font-family: var(--font-brand);
  font-size: clamp(1.5rem, 2.5vw, 2.2rem);
  letter-spacing: 6px; color: #fff; line-height: 1;
  text-shadow: 0 0 24px rgba(255,255,255,0.12);
}
.brand-bar { width: 2px; height: 36px; background: linear-gradient(180deg, transparent, var(--red-400), transparent); }
.brand-sub {
  font-family: var(--font-sans); font-size: 0.64rem; font-weight: 700;
  letter-spacing: 2.5px; text-transform: uppercase;
  color: var(--red-300); line-height: 1.6;
}

/* hero headline — accent / wh / em */
.hero-headline .accent { display: block; color: var(--red-300); text-shadow: 0 0 28px rgba(220,40,40,0.55), 0 0 60px rgba(220,40,40,0.20); }
.hero-headline .wh { display: block; color: #fff; }
.hero-headline em { display: block; color: var(--white-50); font-style: italic; font-size: 0.78em; font-weight: 300; letter-spacing: 0.01em; margin-top: 4px; }

/* hero-sub */
.hero-sub { font-family: var(--font-sans); font-size: 1rem; line-height: 2.0; color: var(--white-50); max-width: 440px; margin-bottom: 32px; }

/* hero-trust badges */
.hero-trust { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-bottom: 36px; }
.ht-item { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-sans); font-size: 0.73rem; font-weight: 600; color: var(--white-70); }
.ht-item i { color: var(--red-300); font-size: 0.68rem; }
.ht-sep { width: 1px; height: 14px; background: var(--white-15); }

/* btn-hero-primary / ghost */
.btn-hero-primary {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 16px 34px;
  font-family: var(--font-sans); font-size: 0.93rem; font-weight: 800;
  background: var(--red-500); color: #fff;
  border-radius: 10px; box-shadow: var(--sh-red-sm);
  transition: all 0.22s; position: relative; overflow: hidden;
}
.btn-hero-primary::before { content:''; position:absolute; top:0; left:-100%; width:100%; height:100%; background:linear-gradient(90deg,transparent,rgba(255,255,255,0.12),transparent); transition:left 0.5s; }
.btn-hero-primary:hover { background: var(--red-400); box-shadow: var(--sh-red); transform: translateY(-3px); }
.btn-hero-primary:hover::before { left: 100%; }

.btn-hero-ghost {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 15px 28px;
  font-family: var(--font-sans); font-size: 0.9rem; font-weight: 600;
  color: var(--white-70); border: 1.5px solid var(--white-15);
  border-radius: 10px; transition: all 0.22s;
  background: var(--white-04); backdrop-filter: blur(6px);
}
.btn-hero-ghost:hover { color: #fff; border-color: var(--red-border); background: rgba(220,40,40,0.06); transform: translateY(-2px); }

/* hero-visual 영역 */
.hero-visual { display: flex; justify-content: flex-end; align-items: center; }

/* hero stat row/item */
.hero-card-label { font-family: var(--font-sans); font-size: 0.58rem; font-weight: 800; letter-spacing: 3px; text-transform: uppercase; color: var(--red-300); margin-bottom: 18px; }
.hero-stat-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 22px; }
.hero-stat-item { padding: 14px; background: var(--white-04); border: 1px solid var(--white-08); border-radius: 11px; }
.hsi-label { font-family: var(--font-sans); font-size: 0.56rem; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--white-30); margin-bottom: 7px; }
.hsi-value { font-family: var(--font-brand); font-size: 2.2rem; color: var(--white-90); line-height: 1; letter-spacing: 1px; }
.hsi-value.gold { color: var(--red-300); text-shadow: 0 0 14px rgba(220,40,40,0.45); }
.hsi-unit { font-family: var(--font-sans); font-size: 0.62rem; color: var(--white-30); margin-left: 2px; }

/* hero-ai-strip */
.hero-ai-strip { display: flex; align-items: center; gap: 13px; padding: 14px 16px; background: rgba(220,40,40,0.06); border: 1px solid rgba(220,40,40,0.15); border-radius: 12px; }
.hero-ai-icon { width: 36px; height: 36px; border-radius: 9px; flex-shrink: 0; background: var(--red-500); display: flex; align-items: center; justify-content: center; font-size: 1.05rem; }
.at-title { font-family: var(--font-sans); font-size: 0.82rem; font-weight: 700; color: var(--white-90); margin-bottom: 2px; }
.at-sub { font-family: var(--font-sans); font-size: 0.68rem; color: var(--white-30); }

/* hero-scroll-hint */
.hero-scroll-hint { position: absolute; bottom: 32px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 7px; z-index: 3; text-decoration: none; }
.hero-scroll-hint span { font-family: var(--font-sans); font-size: 0.58rem; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; color: var(--white-30); }
.scroll-arrow { width: 30px; height: 30px; border-radius: 50%; border: 1.5px solid rgba(220,40,40,0.28); display: flex; align-items: center; justify-content: center; color: var(--red-300); font-size: 0.65rem; animation: scrollBounce 1.8s ease-in-out infinite; }
@keyframes scrollBounce { 0%,100%{transform:translateY(0);} 50%{transform:translateY(7px);} }

/* hero dots layer */
.hero-dots { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.hero-dots span { position: absolute; border-radius: 50%; animation: particleFloat linear infinite; opacity: 0; }
.hero-dots span:nth-child(1){width:3px;height:3px;background:var(--red-400);left:8%;top:22%;animation-duration:9s;animation-delay:0s;}
.hero-dots span:nth-child(2){width:2px;height:2px;background:#fff;left:75%;top:18%;animation-duration:11s;animation-delay:2s;}
.hero-dots span:nth-child(3){width:4px;height:4px;background:var(--red-300);left:88%;top:65%;animation-duration:7.5s;animation-delay:1s;}
.hero-dots span:nth-child(4){width:2px;height:2px;background:#fff;left:20%;top:78%;animation-duration:10s;animation-delay:3.5s;}
.hero-dots span:nth-child(5){width:3px;height:3px;background:var(--red-400);left:55%;top:85%;animation-duration:8s;animation-delay:0.5s;}
.hero-dots span:nth-child(6){width:2px;height:2px;background:#fff;left:42%;top:8%;animation-duration:12s;animation-delay:4s;}

/* hero bg / grid / glow / ring / lines */
.hero-bg   { position:absolute; inset:0; z-index:0; background: radial-gradient(ellipse 55% 75% at -5% 50%, rgba(220,40,40,0.20) 0%, transparent 55%), radial-gradient(ellipse 38% 48% at 105% 20%, rgba(220,40,40,0.09) 0%, transparent 60%), linear-gradient(160deg, #111 0%, #0a0a0a 100%); }
.hero-grid { position:absolute; inset:0; z-index:0; opacity:0.025; background-image: linear-gradient(rgba(220,40,40,0.6) 1px, transparent 1px), linear-gradient(90deg, rgba(220,40,40,0.6) 1px, transparent 1px); background-size: 72px 72px; }
.hero-glow { position:absolute; left:-8%; top:30%; width:50vmin; height:50vmin; background: radial-gradient(circle, rgba(220,40,40,0.18) 0%, transparent 65%); z-index:0; pointer-events:none; }
.hero-ring { position:absolute; right:-10%; top:50%; transform:translateY(-50%); width:65vmin; height:65vmin; border:1px solid rgba(220,40,40,0.10); border-radius:50%; z-index:1; pointer-events:none; }
.hero-ring::before { content:''; position:absolute; inset:28px; border:1px solid rgba(220,40,40,0.06); border-radius:50%; }
.hero-lines { position:absolute; inset:0; z-index:1; pointer-events:none; }
.hero-lines::before { content:''; position:absolute; left:0; right:0; top:68px; height:1px; background:linear-gradient(90deg,transparent 0%,rgba(220,40,40,0.30) 30%,rgba(220,40,40,0.55) 50%,rgba(220,40,40,0.30) 70%,transparent 100%); }
.hero-lines::after  { content:''; position:absolute; left:0; right:0; bottom:0; height:1px; background:linear-gradient(90deg,transparent 0%,rgba(220,40,40,0.18) 40%,rgba(220,40,40,0.38) 50%,rgba(220,40,40,0.18) 60%,transparent 100%); }

/* ── STATS SECTION SHIM ── */
.stats-section-inner { max-width:1360px; margin:0 auto; padding:0 var(--section-px); display:grid; grid-template-columns:repeat(4,1fr); align-items:center; }
.stats-sep { width:1px; height:40px; background:var(--white-08); }
.si-value { font-family:var(--font-brand); font-size:clamp(2.2rem,3.8vw,3.2rem); color:var(--white-90); line-height:1; margin-bottom:6px; letter-spacing:1px; }
.si-value span { color:var(--red-300); font-size:0.58em; }
.si-label { font-family:var(--font-sans); font-size:0.71rem; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; color:var(--white-30); }
.stats-item { padding:44px 20px; text-align:center; transition:background 0.2s; }
.stats-item:hover { background:var(--white-04); }

/* ── MEMBERSHIP mi-compare shim ── */
.mi-compare { display:flex; align-items:center; gap:20px; margin-bottom:56px; }
.mi-compare-card { flex:1; background:var(--light-card); border:1.5px solid var(--light-border); border-radius:var(--r-lg); padding:26px 28px; transition:all 0.25s; }
.mi-compare-card:hover { border-color:rgba(220,40,40,0.28); box-shadow:var(--sh-card-hover); }
.mi-compare-card.featured { border-color:var(--red-500); box-shadow:0 0 0 3px rgba(220,40,40,0.08), var(--sh-card-hover); }
.mi-compare-vs { font-family:var(--font-brand); font-size:1.4rem; color:var(--light-mute); letter-spacing:3px; flex-shrink:0; }
.mic-badge { display:inline-block; padding:3px 11px; margin-bottom:10px; font-family:var(--font-sans); font-size:0.63rem; font-weight:800; letter-spacing:1.5px; text-transform:uppercase; background:var(--red-500); color:#fff; border-radius:var(--r-full); }
.mic-badge.alt { background:#e8e8e8; color:#666; }
.mic-type { font-family:var(--font-serif); font-size:1.4rem; font-weight:700; color:var(--light-h); margin-bottom:4px; }
.mic-price { font-family:var(--font-brand); font-size:2.4rem; color:var(--light-h); line-height:1; margin-bottom:2px; }
.mi-compare-card.featured .mic-price { color:var(--red-500); }
.mic-price span { font-family:var(--font-sans); font-size:1rem; font-weight:600; color:var(--light-mute); }
.mic-period { font-family:var(--font-sans); font-size:0.76rem; color:var(--light-mute); margin-bottom:10px; }
.mic-desc { font-family:var(--font-sans); font-size:0.85rem; color:var(--light-sub); line-height:1.75; }

/* plan-badge-tag / pf-check */
.plan-badge-tag { display:inline-flex; align-items:center; gap:5px; padding:4px 13px; margin-bottom:16px; font-family:var(--font-sans); font-size:0.63rem; font-weight:800; letter-spacing:1.5px; text-transform:uppercase; background:var(--red-500); color:#fff; border-radius:var(--r-full); }
.plan-price-wrap { display:flex; align-items:baseline; gap:4px; margin-bottom:4px; }
.plan-amount { font-family:var(--font-brand); font-size:2.6rem; color:var(--light-h); line-height:1; }
.plan-card.featured .plan-amount { color:var(--red-500); }
.pf-check { width:18px; height:18px; border-radius:50%; flex-shrink:0; background:rgba(220,40,40,0.08); border:1.5px solid rgba(220,40,40,0.22); display:flex; align-items:center; justify-content:center; color:var(--red-500); font-size:0.53rem; }
.plan-feats li.na .pf-check { background:#f0f0f0; border-color:#ddd; color:#bbb; }

/* ── WHY VISUAL shim ── */
.why-visual { display:flex; flex-direction:column; gap:16px; }
.why-result-card { background:rgba(18,16,14,0.92); border:1px solid rgba(220,40,40,0.15); border-radius:var(--r-lg); padding:24px; position:relative; overflow:hidden; }
.why-result-card::before { content:''; position:absolute; top:0; left:0; right:0; height:2px; background:linear-gradient(90deg, transparent, var(--red-500), transparent); }
.wrc-eyebrow { font-family:var(--font-sans); font-size:0.58rem; font-weight:800; letter-spacing:2.5px; text-transform:uppercase; color:var(--red-300); margin-bottom:12px; }
.wrc-row { display:flex; align-items:center; gap:14px; }
.wrc-avatar { width:44px; height:44px; border-radius:50%; flex-shrink:0; background:var(--red-600); display:flex; align-items:center; justify-content:center; font-family:var(--font-brand); font-size:1.1rem; color:#fff; }
.wrc-info { flex:1; }
.wrc-name { font-family:var(--font-sans); font-size:0.88rem; font-weight:700; color:var(--white-90); margin-bottom:2px; }
.wrc-meta { font-family:var(--font-sans); font-size:0.72rem; color:var(--white-30); }
.wrc-stat { text-align:right; }
.wrs-num { font-family:var(--font-brand); font-size:1.8rem; letter-spacing:1px; color:var(--red-300); text-shadow:0 0 14px rgba(220,40,40,0.45); line-height:1; }
.wrs-num span { font-size:0.65em; }
.wrs-unit { font-family:var(--font-sans); font-size:0.68rem; color:var(--white-30); }

.why-ai-card { background:rgba(220,40,40,0.05); border:1px solid rgba(220,40,40,0.15); border-radius:var(--r-lg); padding:22px; }
.wac-label { display:flex; align-items:center; gap:7px; font-family:var(--font-sans); font-size:0.58rem; font-weight:800; letter-spacing:2.5px; text-transform:uppercase; color:var(--red-300); margin-bottom:12px; }
.wac-text { font-family:var(--font-sans); font-size:0.85rem; color:rgba(255,255,255,0.60); line-height:1.85; padding-left:12px; border-left:2px solid var(--red-500); font-style:italic; }
.wac-meta { font-family:var(--font-sans); font-size:0.68rem; color:var(--white-30); margin-top:10px; }

/* ── FAC CARD shim ── */
.fac-card-icon { height:140px; background:linear-gradient(135deg, var(--dark-700), var(--dark-600)); display:flex; align-items:center; justify-content:center; font-size:2.6rem; }
.fac-card-body { padding:24px 22px; }

/* ── LOCATION shim ── */
.loc-address-card { background:var(--dark-700); border:1px solid var(--white-08); border-radius:var(--r-xl); padding:26px; }
.lac-item { display:flex; align-items:flex-start; gap:13px; padding:12px 0; border-bottom:1px solid var(--white-08); }
.lac-item:last-child { border-bottom:none; }
.lac-icon { width:34px; height:34px; border-radius:8px; flex-shrink:0; background:rgba(220,40,40,0.10); border:1px solid rgba(220,40,40,0.20); display:flex; align-items:center; justify-content:center; font-size:0.84rem; color:var(--red-300); }
.lac-label { font-family:var(--font-sans); font-size:0.66rem; font-weight:700; letter-spacing:0.5px; text-transform:uppercase; color:var(--white-30); margin-bottom:3px; }
.lac-value { font-family:var(--font-sans); font-size:0.87rem; color:var(--white-70); line-height:1.65; }

.loc-map { background:var(--dark-700); border:1px solid rgba(220,40,40,0.15); border-radius:var(--r-xl); min-height:380px; position:relative; overflow:hidden; display:flex; align-items:center; justify-content:center; }
.loc-map-inner { display:flex; flex-direction:column; align-items:center; gap:12px; text-align:center; padding:40px; }
.lmi-pin { font-size:2.8rem; }
.lmi-label { font-family:var(--font-brand); font-size:1.3rem; letter-spacing:3px; color:var(--red-300); text-shadow:0 0 16px rgba(220,40,40,0.40); }
.lmi-sub { font-family:var(--font-sans); font-size:0.8rem; color:var(--white-30); }
.lmi-btn { margin-top:6px; padding:10px 22px; font-family:var(--font-sans); font-size:0.82rem; font-weight:700; background:var(--red-500); color:#fff; border-radius:8px; box-shadow:var(--sh-red-sm); transition:all 0.2s; display:inline-flex; align-items:center; gap:7px; }
.lmi-btn:hover { background:var(--red-400); transform:translateY(-2px); }

/* CTA 풀스크린 내부 flex 정렬 */
.cta-fs-inner {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
@media (max-width: 768px) {
  .cta-fs-inner {
    display: block !important;
    padding-top: 40px !important;
    padding-bottom: 40px !important;
  }
  .cta-content { text-align: left !important; }
  .cta-content .sec-label { justify-content: flex-start !important; }
  .cta-content .body-lg { text-align: left !important; margin: 20px 0 0 !important; max-width: 100% !important; }
  .cta-actions {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
    margin-top: 20px;
  }
  .cta-trust { justify-content: flex-start !important; gap: 6px 16px; margin-top: 20px; }
}

/* ── CTA shim ── */
.cta-glow { position:absolute; inset:0; z-index:0; pointer-events:none; background:radial-gradient(ellipse 70% 60% at 50% 50%, rgba(220,40,40,0.12) 0%, transparent 60%); }
.cta-content { max-width:800px; text-align:center; position:relative; z-index:1; }
.btn-cta-primary { display:inline-flex; align-items:center; gap:9px; padding:17px 40px; font-family:var(--font-sans); font-size:0.95rem; font-weight:800; background:var(--red-500); color:#fff; border-radius:10px; box-shadow:var(--sh-red-sm); transition:all 0.22s; }
.btn-cta-primary:hover { background:var(--red-400); box-shadow:var(--sh-red); transform:translateY(-3px); }
.btn-cta-ghost { display:inline-flex; align-items:center; gap:8px; padding:16px 30px; font-family:var(--font-sans); font-size:0.9rem; font-weight:600; color:var(--white-70); border:1.5px solid var(--white-15); border-radius:10px; transition:all 0.22s; background:var(--white-04); }
.btn-cta-ghost:hover { color:#fff; border-color:var(--red-border); transform:translateY(-2px); }
.cta-trust { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:8px 24px; margin-top:32px; }
.cta-trust span { display:inline-flex; align-items:center; gap:6px; font-family:var(--font-sans); font-size:0.75rem; font-weight:600; color:var(--white-30); }
.cta-trust i { color:var(--red-400); font-size:0.7rem; }

/* btn-res-cta */
.btn-res-cta { display:inline-flex; align-items:center; gap:9px; padding:16px 34px; font-family:var(--font-sans); font-size:0.9rem; font-weight:800; background:var(--red-500); color:#fff; border-radius:10px; box-shadow:var(--sh-red-sm); transition:all 0.22s; }
.btn-res-cta:hover { background:var(--red-400); box-shadow:var(--sh-red); transform:translateY(-3px); }

/* footer shim */
/* 풋터 잊혀진 레거시 클래스 무효화 */
.fb-logo-mark { display: none; }
.fb-logo-name  { display: none; }
.footer-contacts { font-style:normal; }
.footer-contact-item { font-family:var(--font-sans); font-size:0.79rem; color:var(--white-30); margin-bottom:7px; display:flex; align-items:center; gap:8px; }
.footer-contact-item i { color:var(--red-400); font-size:0.74rem; }
.footer-bottom-links { display:flex; gap:18px; }
.footer-bottom-links a { font-family:var(--font-sans); font-size:0.76rem; color:rgba(255,255,255,0.20); transition:color 0.2s; }
.footer-bottom-links a:hover { color:rgba(255,255,255,0.55); }

/* ── 푸터 드롭다운 컬럼 ── */
.footer-col { }
.footer-col-toggle {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; background: none; border: none; cursor: pointer;
  padding: 0 0 16px 0; gap: 8px;
}
.footer-col-arrow {
  font-size: 0.65rem; color: rgba(255,255,255,0.25);
  transition: transform 0.25s ease;
}
.footer-col-toggle[aria-expanded="false"] .footer-col-arrow { transform: rotate(-90deg); }
.footer-col-body {
  overflow: hidden;
  max-height: 300px;
  transition: max-height 0.3s ease, opacity 0.25s ease;
  opacity: 1;
}
.footer-col-body.collapsed { max-height: 0; opacity: 0; }

/* ── 문의하기 모달 ── */
.inquiry-modal-overlay {
  position: fixed; inset: 0; z-index: 9000;
  background: rgba(0,0,0,0.72); backdrop-filter: blur(6px);
  display: none; align-items: center; justify-content: center; padding: 16px;
}
.inquiry-modal-overlay.open { display: flex; }
.inquiry-modal-box {
  background: #141414; border: 1px solid rgba(255,255,255,0.1);
  border-radius: 18px; width: 100%; max-width: 480px;
  box-shadow: 0 24px 60px rgba(0,0,0,0.6);
  animation: inquirySlideIn .25s ease;
}
@keyframes inquirySlideIn { from { transform: translateY(20px); opacity:0; } to { transform: translateY(0); opacity:1; } }
.inquiry-modal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 22px 16px; border-bottom: 1px solid rgba(255,255,255,0.07);
  font-family: var(--font-sans); font-size: 1rem; font-weight: 700; color: #fff;
}
.inquiry-modal-close {
  background: none; border: none; color: rgba(255,255,255,0.35);
  font-size: 1.1rem; cursor: pointer; transition: color .2s; padding: 2px 6px;
}
.inquiry-modal-close:hover { color: #fff; }
.inquiry-modal-body { padding: 18px 22px; display: flex; flex-direction: column; gap: 12px; }
.inq-field { display: flex; flex-direction: column; gap: 5px; }
.inq-field label { font-family: var(--font-sans); font-size: 0.75rem; font-weight: 600; color: rgba(255,255,255,0.45); }
.inq-field .req { color: var(--red-400, #e02020); }
.inq-field input, .inq-field textarea {
  background: #1e1e1e; border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px; color: #f0f0f0; font-family: var(--font-sans); font-size: 0.85rem;
  padding: 10px 13px; outline: none; transition: border-color .2s; resize: vertical;
}
.inq-field input:focus, .inq-field textarea:focus { border-color: rgba(220,32,32,0.45); }
.inq-select {
  appearance: none; background: #1e1e1e; border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px; color: #f0f0f0; font-family: var(--font-sans); font-size: 0.85rem;
  padding: 10px 13px; outline: none; cursor: pointer; width: 100%;
}
.inq-privacy-row {
  display: flex; align-items: flex-start; gap: 8px; cursor: pointer;
  font-family: var(--font-sans); font-size: 0.78rem; color: rgba(255,255,255,0.4);
  line-height: 1.5;
}
.inq-privacy-row input[type="checkbox"] { accent-color: var(--red-400,#e02020); width:15px; height:15px; flex-shrink:0; margin-top:2px; }
.inquiry-modal-footer {
  display: flex; gap: 10px; padding: 14px 22px 20px;
}
.inq-btn-cancel {
  flex: 1; padding: 11px; border-radius: 9px;
  background: #1e1e1e; border: 1px solid rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.4); font-family: var(--font-sans); font-size: 0.85rem;
  cursor: pointer; transition: all .2s;
}
.inq-btn-cancel:hover { color: #fff; border-color: rgba(255,255,255,0.2); }
.inq-btn-submit {
  flex: 2; padding: 11px; border-radius: 9px;
  background: linear-gradient(135deg, #dc2020, #a01010);
  border: none; color: #fff; font-family: var(--font-sans); font-size: 0.85rem; font-weight: 700;
  cursor: pointer; transition: opacity .2s;
}
.inq-btn-submit:hover { opacity: .88; }
.inq-btn-submit:disabled { opacity: .5; cursor: not-allowed; }

/* ── 개인정보/이용약관 모달 ── */
.policy-modal-overlay {
  position: fixed; inset: 0; z-index: 9100;
  background: rgba(0,0,0,0.75); backdrop-filter: blur(6px);
  display: none; align-items: center; justify-content: center; padding: 16px;
}
.policy-modal-overlay.open { display: flex; }
.policy-modal-box {
  background: #141414; border: 1px solid rgba(255,255,255,0.1);
  border-radius: 18px; width: 100%; max-width: 560px; max-height: 80vh;
  display: flex; flex-direction: column;
  box-shadow: 0 24px 60px rgba(0,0,0,0.6);
}
.policy-modal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 22px; border-bottom: 1px solid rgba(255,255,255,0.07);
  font-family: var(--font-sans); font-size: 0.95rem; font-weight: 700; color: #fff;
  flex-shrink: 0;
}
.policy-modal-close {
  background: none; border: none; color: rgba(255,255,255,0.35);
  font-size: 1.1rem; cursor: pointer; transition: color .2s; padding: 2px 6px;
}
.policy-modal-close:hover { color: #fff; }
.policy-modal-body {
  padding: 20px 22px; overflow-y: auto; flex: 1;
  font-family: var(--font-sans); font-size: 0.82rem; color: rgba(255,255,255,0.5);
  line-height: 1.9; white-space: pre-wrap;
}
.policy-modal-body:empty::after { content: '내용이 준비 중입니다. 관리자 페이지에서 등록할 수 있습니다.'; color: rgba(255,255,255,0.25); }

/* testi-stars fa-star 방식 */
.testi-stars .fa-star { color:var(--red-400); font-size:0.82rem; }

/* tr-card.featured */
.tr-card.featured { border-color:rgba(220,40,40,0.25); background:var(--dark-700); }
.tr-card.featured::after { opacity:1; }

/* =====================================================
   RESPONSIVE — 태블릿 (1024px)
   ===================================================== */
@media (max-width: 1024px) {
  /* scroll-snap removed */

  .hero-inner {
    grid-template-columns: 1fr;
    text-align: center;
    padding: 120px var(--section-px) 80px;
  }
  .hero-tag { justify-content: center; }
  .hero-copy { margin: 0 auto 36px; }
  .hero-badges { justify-content: center; }
  .hero-actions { justify-content: center; }
  .hero-card-wrap { display: none; }
  .hero-circle { display: none; }
  .hero-scroll { display: none; }

  .fs-two-col,
  .why-grid,
  .res-inner,
  .loc-inner { grid-template-columns: 1fr; gap: 50px; }
  .fs-two-col.reverse { direction: ltr; }

  .ms-head { grid-template-columns: 1fr; gap: 32px; }
  .plan-grid { grid-template-columns: 1fr 1fr; }
  .plan-card.best { transform: none; }
  .plan-card.best:hover { transform: translateY(-4px); }

  .fac-grid { grid-template-columns: 1fr 1fr; }
  .tr-grid { grid-template-columns: 1fr 1fr; }
  .testi-grid { grid-template-columns: 1fr 1fr; }
  .outcomes-grid { grid-template-columns: 1fr 1fr; }

  .footer-top { grid-template-columns: 1fr 1fr; }
  .section-dots { display: none; }
}

/* =====================================================
   RESPONSIVE — 모바일 (768px)
   풀스크린 동적 전환
   ===================================================== */
@media (max-width: 768px) {
  /* scroll-snap removed */

  :root { --section-px: 20px; }

  /* 모바일: 섹션 높이 자유 — min-height 제한 해제 */
  .fs-section,
  .hero,
  .membership-section,
  .why-section,
  .facility-section,
  .trainer-section,
  .results-section,
  .testi-section,
  .location-section,
  .cta-section {
    min-height: unset; /* 자유 스크롤 */
  }
  /* 히어로 지점 섹션만 풀스크린 유지 */
  .hero-branch-section {
    min-height: 100dvh;
  }

  .hero-inner { padding: 100px 20px 70px; }
  .fs-inner,
  .ms-inner,
  .why-inner,
  .fac-inner,
  .tr-inner,
  .res-inner,
  .testi-inner,
  .loc-inner,
  .cta-inner { padding: 90px 20px 60px; }

  .hero-headline { font-size: clamp(2.8rem, 11vw, 4rem); }
  .headline-xl, .headline-lg { font-size: clamp(2.2rem, 9vw, 3.2rem); }
  .hero-tag-label { font-size: 1.6rem; letter-spacing: 5px; }

  .why-grid,
  .res-inner,
  .loc-inner { grid-template-columns: 1fr; }

  .plan-grid { grid-template-columns: 1fr; gap: 14px; }
  .fac-grid { grid-template-columns: 1fr; }
  .tr-grid { grid-template-columns: 1fr; }
  .testi-grid { grid-template-columns: 1fr; }
  .outcomes-grid { grid-template-columns: 1fr 1fr; gap: 12px; }

  .stats-grid { grid-template-columns: 1fr 1fr; }
  .stat-item:nth-child(2) { border-right: none; }
  .stat-item:nth-child(3) { border-right: 1px solid var(--white-08); }

  .footer-top { grid-template-columns: 1fr; gap: 28px; }
  .footer-bottom { flex-direction: column; text-align: center; }
  .footer-legal { justify-content: center; text-align: center; font-size: 0.68rem; }
  .footer-sns { justify-content: flex-start; }

  .ms-head { grid-template-columns: 1fr; }

  /* 모바일 Float 버튼 축소 */
  .float-access { bottom: 18px; right: 14px; gap: 8px; }
  .float-cta { padding: 11px 18px; font-size: 0.77rem; gap: 7px; }
  .float-row { gap: 9px; }
  .float-btn { width: 48px; height: 48px; }
  .float-btn::before { display: none; } /* 모바일: 툴팁 숨김 */

  .nav-menu { display: none; }
  .nav-hamburger { display: flex; }
  .btn-nav-ghost { display: none; }
}

/* =====================================================
   RESPONSIVE — 소형 모바일 (480px)
   ===================================================== */
@media (max-width: 480px) {
  .hero-headline { font-size: clamp(2.4rem, 12vw, 3.2rem); }
  .hero-actions { flex-direction: column; align-items: stretch; }
  .btn-primary, .btn-secondary { justify-content: center; }
  .cta-actions { flex-direction: column; align-items: stretch; }
  .btn-primary, .btn-secondary, .btn-primary-dark, .btn-ghost-dark { justify-content: center; width: 100%; }
  .outcomes-grid { grid-template-columns: 1fr; }
  .ms-toggle-cards { gap: 10px; }
  .hero-badges { gap: 7px; }
}


/* =====================================================
   NEW v5 — HERO BRANCH SECTION (풀스크린 4지점 카드)
   ===================================================== */

/* 섹션 컨테이너 */
.hero-branch-section {
  position: relative;
  width: 100%;
  height: 100dvh;       /* 동적 뷰포트 높이 */
  min-height: 100dvh;
  overflow: hidden;
  background: #080808;
  /* scroll-snap-align: start; */
  /* nav(62px) 아래로 hb-grid 시작 — padding-top으로 카드가 nav 뒤 가려지지 않음 */
  padding-top: 62px;
  box-sizing: border-box;
}

/* 상단 공통 로고/스크롤 오버레이 */
.hb-header-overlay {
  position: absolute;
  top: 0; left: 0; right: 0; /* padding-top:62px인 섹션 기준 top:0 = 카드 최상단 */
  z-index: 20;
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  padding: 16px clamp(20px, 4vw, 60px);
  background: none;
  pointer-events: none;
}
.hb-header-overlay a { pointer-events: auto; }

/* hb-logo 제거됨 - site-nav 단일 로고 사용 */
.hb-logo { display: none; }
.hb-logo-mark { display: none; }
.hb-logo-text { display: none; }
.hb-brand { display: none; }
.hb-sub { display: none; }

/* 스크롤 힌트 */
.hb-scroll-hint {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  color: rgba(255,255,255,0.45);
  font-family: var(--font-sans);
  font-size: 0.62rem;
  letter-spacing: 3px;
  text-transform: uppercase;
  text-decoration: none;
  animation: hbScrollBounce 2.2s ease-in-out infinite;
  transition: color .2s;
}
.hb-scroll-hint:hover { color: var(--red-300); }
.hb-scroll-arrow {
  width: 28px; height: 28px;
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.65rem;
}
@keyframes hbScrollBounce {
  0%,100% { transform: translateY(0); }
  50%      { transform: translateY(7px); }
}

/* ── 4열 Flex 컨테이너 (Grid → Flex 변경: flex 확장 호버 작동) ── */
.hb-grid {
  display: grid;                     /* ★ 2×2 그리드 */
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  height: 100%;
  width: 100%;
  gap: 3px;                          /* 카드 간 구분선 */
  background: rgba(255,255,255,0.15); /* gap 색 */
}

/* ── 개별 카드: 완전 격리 스태킹 컨텍스트 ── */
.hb-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;                 /* 슬라이드 이미지 클리핑 */
  isolation: isolate;               /* ★ 완전 스태킹 격리 */
  contain: layout paint style;
  text-decoration: none;
  cursor: pointer;
  background: #080808;
  outline: none;
  /* 2×2 그리드이므로 flex transition 제거 */
  transition: none;
}

/* 2×2 그리드 — hover 확대 효과 대신 오버레이 밝기 변화로 대체 */
.hb-card:hover .hb-overlay {
  background: linear-gradient(
    to top,
    rgba(8,8,8,0.75) 0%,
    rgba(8,8,8,0.45) 40%,
    rgba(8,8,8,0.15) 70%,
    rgba(8,8,8,0.05) 100%
  );
}

/* ── 배경 슬라이드쇼 — 카드 내부에 완전 격리 ── */
.hb-bg-slideshow {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;                 /* ★ 추가 클리핑 레이어 */
  isolation: isolate;               /* ★ 자체 스태킹 컨텍스트 */
}

.hb-bg-slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-repeat: no-repeat;
  /* background-position은 인라인 스타일 or JS 주입으로 슬라이드별 지정 */
  opacity: 0;
  z-index: 1;
  transition: opacity 1.2s ease-in-out; /* ★ 1.6s→1.2s: 더 부드럽고 빠른 전환 */
  transform: translateZ(0);
  backface-visibility: hidden;
}

/* 활성 슬라이드에만 Ken Burns + will-change */
.hb-bg-slide.active {
  opacity: 1;
  z-index: 2;
  will-change: opacity, transform;
  animation: hbKenBurns 16s ease-in-out forwards;
}

/* ★ 비활성 슬라이드: animation 완전 제거 + transform 초기화 — 번짐 근본 차단 */
.hb-bg-slide:not(.active) {
  animation: none !important;
  transform: translateZ(0) !important;
  will-change: auto;
}

/* ★ Ken Burns scale 범위 (1.00→1.03) — 넘침 완전 방지 */
@keyframes hbKenBurns {
  0%   { transform: scale(1.00) translateZ(0); }
  100% { transform: scale(1.03) translateZ(0); }
}

/* ── 오버레이 그라데이션 ── */
.hb-overlay {
  position: absolute;
  inset: 0;
  /* 하단은 거의 불투명, 상단은 반투명 */
  background: linear-gradient(
    to top,
    rgba(8,8,8,0.92) 0%,
    rgba(8,8,8,0.65) 35%,
    rgba(8,8,8,0.35) 65%,
    rgba(8,8,8,0.20) 100%
  );
  transition: background .4s;
}
.hb-card:hover .hb-overlay {
  background: linear-gradient(
    to top,
    rgba(8,8,8,0.88) 0%,
    rgba(8,8,8,0.55) 40%,
    rgba(8,8,8,0.20) 70%,
    rgba(8,8,8,0.08) 100%
  );
}

/* 프리미엄 카드 오버레이: 약간 금빛 색조 */
.hb-card.premium .hb-overlay,
.premium-overlay {
  background: linear-gradient(
    to top,
    rgba(10,6,2,0.94) 0%,
    rgba(20,12,4,0.70) 35%,
    rgba(15,10,3,0.40) 65%,
    rgba(8,6,2,0.22) 100%
  );
}

/* ── 카드 콘텐츠 ── */
.hb-content {
  position: relative;
  z-index: 10;
  padding: 0 28px 32px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  /* 2×2 그리드: 콘텐츠 클리핑 없이 항상 표시 */
  overflow: visible;
}

/* 번호 */
.hb-num {
  font-family: var(--font-brand);
  font-size: 0.75rem;
  color: var(--red-400);
  letter-spacing: 3px;
  opacity: 0.85;
  margin-bottom: 2px;
}

/* 지점명 */
.hb-name-wrap {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.hb-gym {
  font-family: var(--font-sans);
  font-size: clamp(0.75rem, 1.2vw, 0.9rem);
  font-weight: 400;
  color: rgba(255,255,255,0.65);
  letter-spacing: 1px;
  line-height: 1.4;
}
.hb-branch {
  font-family: var(--font-brand);
  /* 2×2 그리드: 각 카드가 50% 너비이므로 폰트 사이즈 조절 */
  font-size: clamp(1.5rem, 2.5vw, 2.4rem);
  color: #fff;
  letter-spacing: 2px;
  line-height: 1.05;
  text-shadow: 0 2px 20px rgba(0,0,0,0.6);
  transition: color .3s;
}
.hb-card:hover .hb-branch {
  color: #fff;
  text-shadow: 0 0 30px rgba(220,40,40,0.4), 0 2px 20px rgba(0,0,0,0.6);
}

/* 태그 */
.hb-tag {
  font-family: var(--font-brand);
  font-size: 0.62rem;
  color: rgba(255,255,255,0.35);
  letter-spacing: 3px;
  margin-top: 2px;
  transition: color .3s;
}
.hb-card:hover .hb-tag { color: var(--red-400); }

/* 상세 정보: 2×2 그리드에서 상시 표시 */
.hb-info-list {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-top: 10px;
  max-height: none;
  overflow: visible;
  opacity: 1;
}
.hb-info-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-family: var(--font-sans);
  font-size: 0.78rem;
  color: rgba(255,255,255,0.65);
  line-height: 1.4;
}
.hb-info-item i {
  color: var(--red-400);
  width: 13px;
  flex-shrink: 0;
  margin-top: 2px;
  font-size: 0.65rem;
}

/* CTA 버튼: 2×2 그리드에서 상시 표시 */
.hb-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 14px;
  padding: 10px 20px;
  background: var(--red-500);
  color: #fff;
  font-family: var(--font-sans);
  font-size: 0.84rem;
  font-weight: 700;
  border-radius: 6px;
  align-self: flex-start;
  opacity: 1;
  transform: none;
  transition: background .2s;
  box-shadow: var(--sh-red-sm);
}
.hb-cta-btn:hover { background: var(--red-400); }

/* 프리미엄 배지 */
.hb-premium-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  background: rgba(180,140,30,0.25);
  border: 1px solid rgba(210,170,50,0.45);
  border-radius: 4px;
  font-family: var(--font-brand);
  font-size: 0.62rem;
  color: #d4af37;
  letter-spacing: 2px;
  align-self: flex-start;
  margin-bottom: 4px;
}

/* Coming Soon 배지 (대전 라마다 호텔) */
.hb-coming-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  background: rgba(30, 120, 200, 0.22);
  border: 1px solid rgba(80, 160, 255, 0.45);
  border-radius: 4px;
  font-family: var(--font-brand);
  font-size: 0.62rem;
  color: #7dc4ff;
  letter-spacing: 2px;
  align-self: flex-start;
  margin-bottom: 4px;
  animation: csGlow 2.5s ease-in-out infinite alternate;
}
@keyframes csGlow {
  from { border-color: rgba(80,160,255,0.35); color: #7dc4ff; }
  to   { border-color: rgba(80,160,255,0.75); color: #b8deff; box-shadow: 0 0 10px rgba(80,160,255,0.25); }
}

/* ── Coming Soon 카드 — 회색 비활성화 스타일 ── */
.hb-card.coming-soon {
  cursor: default;
  filter: grayscale(0.65) brightness(0.75);
}
.hb-card.coming-soon:hover {
  filter: grayscale(0.45) brightness(0.82);
}
.hb-card.coming-soon .hb-line-accent { display: none; }
.hb-card.coming-soon:hover::after { opacity: 0; }

/* Coming soon 카드 오버레이 */
.hb-card.coming-soon .hb-overlay,
.coming-overlay {
  background: linear-gradient(
    to top,
    rgba(5,15,30,0.97) 0%,
    rgba(8,18,35,0.82) 35%,
    rgba(5,12,25,0.55) 65%,
    rgba(3,8,18,0.30) 100%
  );
}

/* 모달 배지 Coming Soon */
.bm-badge.coming-soon {
  color: #7dc4ff;
  background: rgba(30,120,200,0.18);
  border-color: rgba(80,160,255,0.4);
  animation: csGlow 2.5s ease-in-out infinite alternate;
}

/* 호버 라인 액센트 (하단 레드 라인) */
.hb-line-accent {
  position: absolute;
  bottom: 0; left: 0;
  width: 100%; height: 3px;
  background: linear-gradient(to right, var(--red-500), var(--red-300));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .45s cubic-bezier(.4,0,.2,1);
}
.hb-card:hover .hb-line-accent { transform: scaleX(1); }

/* 카드 상단: 각 지점별 얇은 색 악센트 라인으로 구분 강화 */
.hb-card::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(to right, rgba(255,255,255,0.12), rgba(255,255,255,0.06));
  z-index: 30;
  pointer-events: none;
}
.hb-card:hover::after {
  background: linear-gradient(to right, var(--red-500), var(--red-300));
}


/* =====================================================
   NEW v5 — HERO LAYOUT
   .hero-wrap / .hero-top / .hero-top-left/right
   ===================================================== */
.hero-wrap {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 var(--section-px);
  display: flex;
  flex-direction: column;
  gap: 48px;
  padding-top: clamp(100px, 14vh, 140px);
  padding-bottom: clamp(60px, 8vh, 100px);
}

.hero-top {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 40px;
  align-items: flex-start;
}

.hero-top-left {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.hero-top-right {
  display: flex;
  align-items: stretch;
  flex-shrink: 0;
}

/* ──── 히어로 버튼 ──── */
.btn-hero-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 28px;
  background: var(--red-500);
  color: #fff;
  font-family: var(--font-sans);
  font-size: 0.95rem;
  font-weight: 700;
  border-radius: 6px;
  text-decoration: none;
  box-shadow: var(--sh-red-sm);
  transition: background .2s, box-shadow .2s, transform .2s;
}
.btn-hero-primary:hover {
  background: var(--red-400);
  box-shadow: var(--sh-red);
  transform: translateY(-2px);
}
.btn-hero-ghost {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 28px;
  background: transparent;
  color: var(--white-90);
  font-family: var(--font-sans);
  font-size: 0.95rem;
  font-weight: 600;
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 6px;
  text-decoration: none;
  transition: border-color .2s, color .2s, background .2s;
}
.btn-hero-ghost:hover {
  border-color: var(--red-300);
  color: var(--red-300);
  background: rgba(220,40,40,0.06);
}

/* ──── 히어로 스크롤 힌트 ──── */
.hero-scroll-hint {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  color: var(--white-50);
  font-family: var(--font-sans);
  font-size: 0.7rem;
  letter-spacing: 3px;
  text-transform: uppercase;
  text-decoration: none;
  align-self: center;
  transition: color .2s;
  animation: scrollBounce 2s ease-in-out infinite;
}
.hero-scroll-hint:hover { color: var(--red-300); }
.hero-scroll-hint .scroll-arrow {
  width: 32px; height: 32px;
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.75rem;
}
@keyframes scrollBounce {
  0%,100% { transform: translateY(0); }
  50% { transform: translateY(6px); }
}


/* =====================================================
   NEW v5 — HERO MINI STATS
   .hero-mini-stats / .hms-item / .hms-val / .hms-sep / .hms-lbl
   ===================================================== */
.hero-mini-stats {
  display: flex;
  flex-direction: column;
  gap: 0;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--red-border);
  border-radius: 12px;
  padding: 20px 24px;
  min-width: 160px;
  backdrop-filter: blur(8px);
}

.hms-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 12px 0;
  text-align: center;
}

.hms-val {
  font-family: var(--font-brand);
  font-size: 2rem;
  color: var(--white);
  line-height: 1;
  letter-spacing: 1px;
}

.hms-val.red {
  color: var(--red-300);
  text-shadow: 0 0 20px rgba(220,40,40,0.6);
}

.hms-sep {
  width: 60%;
  height: 1px;
  background: rgba(255,255,255,0.08);
  margin: 0 auto;
  border-radius: 1px;
}

.hms-lbl {
  font-family: var(--font-sans);
  font-size: 0.65rem;
  color: var(--white-50);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-top: 4px;
  white-space: nowrap;
}


/* =====================================================
   NEW v5 — BRANCH GRID (4지점 카드 4×1)
   .branch-grid / .branch-card / .bc-*
   ===================================================== */
.branch-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  width: 100%;
}

.branch-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 24px 20px 20px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--red-border);
  border-radius: 12px;
  text-decoration: none;
  color: var(--white);
  overflow: hidden;
  transition: background .3s, border-color .3s, transform .3s, box-shadow .3s;
  cursor: pointer;
}

.branch-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(220,40,40,0.08) 0%, transparent 60%);
  opacity: 0;
  transition: opacity .3s;
}

.branch-card:hover {
  background: rgba(220,40,40,0.08);
  border-color: rgba(220,40,40,0.55);
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(220,40,40,0.2), 0 0 0 1px rgba(220,40,40,0.3);
}

.branch-card:hover::before { opacity: 1; }

.branch-card.premium {
  border-color: rgba(220,40,40,0.45);
  background: rgba(220,40,40,0.05);
}

.branch-card.premium::after {
  content: 'PREMIUM';
  position: absolute;
  top: 12px;
  right: 12px;
  font-family: var(--font-brand);
  font-size: 0.65rem;
  letter-spacing: 2px;
  color: var(--red-300);
  background: rgba(220,40,40,0.15);
  border: 1px solid rgba(220,40,40,0.3);
  border-radius: 4px;
  padding: 2px 7px;
}

.branch-card.premium:hover {
  box-shadow: 0 16px 50px rgba(220,40,40,0.3), 0 0 0 1px rgba(220,40,40,0.5);
}

/* 좌측 상단 강조 바 */
.bc-accent {
  position: absolute;
  top: 0; left: 0;
  width: 3px; height: 100%;
  background: linear-gradient(to bottom, var(--red-400), transparent);
  border-radius: 12px 0 0 12px;
  opacity: 0.7;
  transition: opacity .3s;
}
.branch-card:hover .bc-accent { opacity: 1; }

.bc-num {
  font-family: var(--font-brand);
  font-size: 0.75rem;
  color: var(--red-400);
  letter-spacing: 2px;
  opacity: 0.8;
}

.bc-icon {
  font-size: 1.8rem;
  margin: 4px 0;
  line-height: 1;
}

.bc-name {
  font-family: var(--font-sans);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--white);
  line-height: 1.3;
  margin-top: 2px;
}

.bc-tag {
  font-family: var(--font-brand);
  font-size: 0.68rem;
  color: var(--white-50);
  letter-spacing: 2.5px;
  text-transform: uppercase;
}

.bc-info {
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  flex: 1;
}

.bc-info-row {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  font-family: var(--font-sans);
  font-size: 0.72rem;
  color: rgba(255,255,255,0.55);
  line-height: 1.4;
}

.bc-info-row i {
  color: var(--red-400);
  width: 12px;
  flex-shrink: 0;
  margin-top: 2px;
  font-size: 0.65rem;
}

.bc-cta {
  margin-top: 12px;
  font-family: var(--font-sans);
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--red-300);
  display: flex;
  align-items: center;
  gap: 6px;
  transition: gap .2s;
}

.branch-card:hover .bc-cta { gap: 10px; }

.bc-cta i { font-size: 0.7rem; }


/* =====================================================
   NEW v5 — SLIDER SECTION
   .slider-section / .slider-container / .slide / 전환 애니메이션
   ===================================================== */
.slider-section {
  position: relative;
  overflow: visible; /* PC 기본값 — 모바일에서 [3] 블록이 !important로 hidden 적용 */
  min-height: unset;
  height: auto;
  align-items: flex-start;
  display: flex;
  flex-direction: column;
}

.slider-container {
  position: relative;
  width: 100%;
}

.slide {
  display: none;
  width: 100%;
  flex-direction: column;
}

.slide.active {
  display: flex;
  flex-direction: column;
  opacity: 1;
  pointer-events: auto;
  position: relative;
  width: 100%;
}

/* 전환 애니메이션 */
@keyframes slideInFromRight {
  from { transform: translateX(80px); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}
@keyframes slideInFromLeft {
  from { transform: translateX(-80px); opacity: 0; }
  to   { transform: translateX(0);     opacity: 1; }
}
@keyframes slideOutToLeft {
  from { transform: translateX(0);   opacity: 1; }
  to   { transform: translateX(-80px); opacity: 0; }
}
@keyframes slideOutToRight {
  from { transform: translateX(0);  opacity: 1; }
  to   { transform: translateX(80px); opacity: 0; }
}

.slide-in-right {
  animation: slideInFromRight 0.48s cubic-bezier(.4,0,.2,1) forwards;
}
.slide-in-left {
  animation: slideInFromLeft 0.48s cubic-bezier(.4,0,.2,1) forwards;
}
.slide-out-left {
  animation: slideOutToLeft 0.48s cubic-bezier(.4,0,.2,1) forwards;
  pointer-events: none !important;
  position: absolute !important;
  inset: 0;
  width: 100%;
}
.slide-out-right {
  animation: slideOutToRight 0.48s cubic-bezier(.4,0,.2,1) forwards;
  pointer-events: none !important;
  position: absolute !important;
  inset: 0;
  width: 100%;
}


/* =====================================================
   NEW v5 — SLIDER UI
   .slider-ui / .slider-arrow / .slider-dots-wrap / .sl-dot
   ===================================================== */
.slider-ui {
  position: relative;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 24px var(--section-px) 32px;
  background: transparent;
}

/* 라이트 섹션 슬라이더 UI */
.slider-section.light .slider-ui {
  border-top: 1px solid rgba(0,0,0,0.06);
}
/* 다크 섹션 슬라이더 UI */
.slider-section.dark .slider-ui,
.slider-section.darker .slider-ui {
  border-top: 1px solid rgba(255,255,255,0.06);
}

.slider-arrow {
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  font-size: 0.9rem;
  transition: background .2s, color .2s, transform .2s, box-shadow .2s;
  flex-shrink: 0;
}

/* 라이트 섹션 화살표 */
.slider-section.light .slider-arrow {
  background: rgba(0,0,0,0.07);
  color: #333;
}
.slider-section.light .slider-arrow:hover {
  background: var(--red-500);
  color: #fff;
  box-shadow: var(--sh-red-sm);
  transform: scale(1.08);
}

/* 다크 섹션 화살표 */
.slider-section.dark .slider-arrow,
.slider-section.darker .slider-arrow {
  background: rgba(255,255,255,0.07);
  color: var(--white-90);
}
.slider-section.dark .slider-arrow:hover,
.slider-section.darker .slider-arrow:hover {
  background: var(--red-500);
  color: #fff;
  box-shadow: var(--sh-red-sm);
  transform: scale(1.08);
}

.slider-dots-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
}

.sl-dot {
  padding: 7px 18px;
  border-radius: 20px;
  border: none;
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  transition: background .2s, color .2s, box-shadow .2s, transform .2s;
}

/* 라이트 섹션 dot */
.slider-section.light .sl-dot {
  background: rgba(0,0,0,0.06);
  color: #555;
}
.slider-section.light .sl-dot.active,
.slider-section.light .sl-dot:hover {
  background: var(--red-500);
  color: #fff;
  box-shadow: var(--sh-red-sm);
  transform: scale(1.04);
}

/* 다크 섹션 dot */
.slider-section.dark .sl-dot,
.slider-section.darker .sl-dot {
  background: rgba(255,255,255,0.07);
  color: var(--white-50);
}
.slider-section.dark .sl-dot.active,
.slider-section.darker .sl-dot.active,
.slider-section.dark .sl-dot:hover,
.slider-section.darker .sl-dot:hover {
  background: var(--red-500);
  color: #fff;
  box-shadow: var(--sh-red-sm);
  transform: scale(1.04);
}


/* =====================================================
   NEW v5 — LOC BRANCH GRID (오시는 길 4지점 그리드)
   .loc-branch-grid / .loc-branch-card / .lbc-*
   ===================================================== */
.loc-branch-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 40px;
  width: 100%;
}

.loc-branch-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 12px;
  padding: 24px 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  transition: border-color .3s, background .3s, transform .3s;
}

.loc-branch-card:hover {
  border-color: var(--red-border);
  background: rgba(220,40,40,0.06);
  transform: translateY(-3px);
}

.loc-branch-card.premium {
  border-color: rgba(220,40,40,0.35);
  background: rgba(220,40,40,0.04);
}
.loc-branch-card.premium:hover {
  border-color: rgba(220,40,40,0.6);
  background: rgba(220,40,40,0.1);
}

.lbc-header {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.lbc-num {
  font-family: var(--font-brand);
  font-size: 1.5rem;
  color: var(--red-400);
  line-height: 1;
}

.lbc-name {
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 700;
  color: var(--white);
  line-height: 1.3;
}

.lbc-items {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}

.lbc-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-family: var(--font-sans);
  font-size: 0.78rem;
  color: rgba(255,255,255,0.6);
  line-height: 1.5;
}

.lbc-row i {
  color: var(--red-400);
  width: 14px;
  flex-shrink: 0;
  margin-top: 2px;
  font-size: 0.7rem;
}

.lbc-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 10px 16px;
  background: rgba(220,40,40,0.15);
  border: 1px solid rgba(220,40,40,0.35);
  border-radius: 6px;
  color: var(--red-300);
  font-family: var(--font-sans);
  font-size: 0.78rem;
  font-weight: 700;
  text-decoration: none;
  transition: background .2s, border-color .2s, transform .2s;
  align-self: flex-start;
}

.lbc-btn:hover {
  background: rgba(220,40,40,0.28);
  border-color: var(--red-400);
  transform: translateY(-1px);
}


/* =====================================================
   NEW v5 — 슬라이더 섹션 내 추가 콘텐츠 스타일
   .why-light / .dark-testi / .dark-card
   ===================================================== */

/* 라이트 섹션 Why 리스트 */
.why-light {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 8px;
}

.why-light-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 18px;
  background: rgba(0,0,0,0.03);
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 10px;
  transition: border-color .2s, background .2s;
}

.why-light-item:hover {
  border-color: rgba(220,40,40,0.25);
  background: rgba(220,40,40,0.03);
}

.why-light-item .wli-icon {
  font-size: 1.3rem;
  flex-shrink: 0;
  margin-top: 2px;
}

.why-light-item .wli-text h4 {
  font-family: var(--font-sans);
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--light-h);
  margin-bottom: 4px;
}

.why-light-item .wli-text p {
  font-family: var(--font-sans);
  font-size: 0.8rem;
  color: #666;
  line-height: 1.5;
}

/* 다크 섹션 후기 카드 */
.dark-testi {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 32px;
}

.dark-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  padding: 20px 22px;
  transition: border-color .2s, background .2s;
}

.dark-card:hover {
  border-color: var(--red-border);
  background: rgba(220,40,40,0.04);
}

.dark-card .dc-stars {
  color: var(--red-300);
  font-size: 0.8rem;
  margin-bottom: 8px;
}

.dark-card .dc-quote {
  font-family: var(--font-sans);
  font-size: 0.85rem;
  color: var(--white-90);
  line-height: 1.6;
  margin-bottom: 12px;
}

.dark-card .dc-meta {
  font-family: var(--font-sans);
  font-size: 0.72rem;
  color: var(--white-50);
  display: flex;
  align-items: center;
  gap: 8px;
}

.dark-card .dc-meta::before {
  content: '';
  width: 20px; height: 1px;
  background: var(--white-50);
  display: inline-block;
}


/* =====================================================
   NEW v5 — CTA 버튼 (슬라이드 내 CTA 섹션용)
   .btn-cta-primary / .btn-cta-ghost
   — <a> · <button> 공용 지원
   ===================================================== */
.btn-cta-primary,
.btn-cta-ghost {
  cursor: pointer;
  border: none;          /* button 기본 border 초기화 */
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  text-decoration: none;
}
.btn-cta-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 16px 32px;
  background: var(--red-500);
  color: #fff;
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 700;
  border-radius: 8px;
  text-decoration: none;
  box-shadow: var(--sh-red-sm);
  transition: background .2s, box-shadow .2s, transform .2s;
}
.btn-cta-primary:hover {
  background: var(--red-400);
  box-shadow: var(--sh-red);
  transform: translateY(-2px);
}
.btn-cta-ghost {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 16px 32px;
  background: transparent;
  color: var(--white-90);
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 600;
  border: 1px solid rgba(255,255,255,0.25) !important; /* button 기본 border 리셋 후 재정의 */
  border-radius: 8px;
  text-decoration: none;
  transition: border-color .2s, color .2s, background .2s;
}
.btn-cta-ghost:hover {
  border-color: var(--red-300);
  color: var(--red-300);
  background: rgba(220,40,40,0.06);
}

/* CTA Trust 뱃지 */
.cta-trust {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 24px;
}
.cta-trust span {
  font-family: var(--font-sans);
  font-size: 0.78rem;
  color: var(--white-50);
  display: flex;
  align-items: center;
  gap: 6px;
}
.cta-trust span i { color: var(--red-400); }


/* =====================================================
   NEW v5 — 반응형 업데이트 (1200px / 1024px / 768px / 480px)
   ===================================================== */

/* ── 1200px 이하: 슬라이더 내부 레이아웃 최적화 ── */
@media (max-width: 1200px) {
  .branch-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
  }
  .loc-branch-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
  }
  .hero-top {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .hero-top-right {
    align-self: flex-start;
  }
  .hero-mini-stats {
    flex-direction: row;
    min-width: unset;
    width: 100%;
    padding: 14px 20px;
    justify-content: space-around;
  }
  .hms-sep {
    width: 1px;
    height: 40px;
    margin: 0;
  }
  .hms-item {
    padding: 0 16px;
  }
}

/* ── 1024px 이하: 태블릿 ── */
@media (max-width: 1024px) {
  .hero-wrap {
    gap: 36px;
  }
  .branch-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .loc-branch-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .slider-section .fs-inner {
    padding-top: 60px;
    padding-bottom: 0;
  }
}

/* ── 768px 이하: 모바일 ── */
@media (max-width: 768px) {
  .hero-wrap {
    padding-top: 90px;
    padding-bottom: 60px;
    gap: 28px;
  }
  .hero-top {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .hero-mini-stats {
    flex-direction: row;
    justify-content: space-around;
    padding: 12px 16px;
    gap: 0;
    flex-wrap: wrap;
    row-gap: 8px;
  }
  .hms-sep {
    width: 1px;
    height: 32px;
    margin: 0;
  }
  .hms-item {
    padding: 0 10px;
  }
  .hms-val { font-size: 1.4rem; }
  .hms-lbl { font-size: 0.6rem; }

  .branch-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
  .branch-card {
    padding: 18px 14px 16px;
  }
  .bc-name { font-size: 0.9rem; }
  .bc-info { display: none; }
  .bc-cta { font-size: 0.72rem; }

  /* 슬라이더 UI 모바일 */
  .slider-ui {
    padding: 16px 16px 24px;
    gap: 12px;
  }
  .slider-arrow {
    width: 38px; height: 38px;
    font-size: 0.8rem;
  }
  .sl-dot {
    padding: 5px 12px;
    font-size: 0.72rem;
  }

  /* 위치 카드 모바일 */
  .loc-branch-grid {
    grid-template-columns: 1fr;
    gap: 12px;
    margin-top: 28px;
  }
  .loc-branch-card {
    padding: 18px 16px;
    gap: 12px;
  }

  /* 슬라이더 섹션: [3] v4 블록에서 통합 처리 */
}

/* ── 480px 이하: 소형 모바일 ── */
@media (max-width: 480px) {
  .branch-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }
  .branch-card {
    padding: 14px 12px;
  }
  .bc-icon { font-size: 1.4rem; }
  .bc-name { font-size: 0.82rem; }
  .bc-tag { display: none; }

  .hero-mini-stats {
    padding: 10px 12px;
  }
  .hms-val { font-size: 1.2rem; }

  .loc-branch-grid {
    grid-template-columns: 1fr;
  }

  .slider-dots-wrap {
    gap: 6px;
  }
  .sl-dot {
    padding: 4px 10px;
    font-size: 0.68rem;
  }
}

/* =====================================================
   BRANCH MODAL
   ===================================================== */

/* 배경 backdrop */
.branch-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0);
  z-index: 900;
  pointer-events: none;
  transition: background .35s ease;
}
.branch-modal-backdrop.open {
  background: rgba(0,0,0,0.82);
  pointer-events: auto;
  backdrop-filter: blur(6px);
}

/* 모달 컨테이너 */
.branch-modal {
  position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%, -46%) scale(0.94);
  z-index: 910;
  width: min(96vw, 1040px);
  max-height: 90vh;
  background: #111;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 16px;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr 380px;
  opacity: 0;
  pointer-events: none;
  transition: transform .38s cubic-bezier(.4,0,.2,1),
              opacity .32s ease;
  box-shadow: 0 32px 80px rgba(0,0,0,0.7), 0 0 0 1px rgba(220,40,40,0.12);
}
.branch-modal.open {
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
  pointer-events: auto;
}

/* 닫기 버튼 — 모달 전체 기준 absolute, 이미지 위에 항상 노출 */
.bm-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.35);
  background: rgba(10,10,10,0.75);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: #fff;
  font-size: 1.05rem;
  cursor: pointer;
  /* 모달 내 최상위 — 갤러리 이미지 위 */
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .2s, border-color .2s, transform .2s;
  box-shadow: 0 2px 12px rgba(0,0,0,0.55);
}
.bm-close:hover {
  background: #e53935;
  border-color: #e53935;
  transform: rotate(90deg);
}

/* ── 갤러리 영역 ── */
.bm-gallery {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
}

.bm-img-main {
  flex: 1;
  min-height: 380px;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center 40%;
  transition: opacity .3s ease;
  position: relative;
  overflow: hidden;
}

.bm-img-thumbs {
  display: flex;
  gap: 6px;
  padding: 6px;
  background: #0a0a0a;
  flex-shrink: 0;
}

.bm-thumb {
  flex: 1;
  height: 76px;
  border-radius: 8px;
  cursor: pointer;
  opacity: 0.45;
  border: 2px solid transparent;
  transition: opacity .25s, border-color .25s, transform .25s;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center 40%;
  outline: none;
}
.bm-thumb:focus-visible { outline: 2px solid var(--red-400); outline-offset: 2px; }
.bm-thumb.active,
.bm-thumb:hover {
  opacity: 1;
  border-color: var(--red-400);
  transform: scale(1.04);
  box-shadow: 0 4px 12px rgba(220,40,40,0.3);
}

/* ── 정보 패널 ── */
.bm-info-panel {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 32px 28px 28px;
  background: #0f0f0f;
  border-left: 1px solid rgba(255,255,255,0.06);
  overflow-y: auto;
}

.bm-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-brand);
  font-size: 0.65rem;
  letter-spacing: 2.5px;
  color: #d4af37;
  background: rgba(180,140,30,0.18);
  border: 1px solid rgba(210,170,50,0.4);
  border-radius: 4px;
  padding: 4px 10px;
  align-self: flex-start;
  min-height: 0;
}
.bm-badge:empty { display: none; }

.bm-num {
  font-family: var(--font-brand);
  font-size: 0.72rem;
  color: var(--red-400);
  letter-spacing: 3px;
  opacity: 0.8;
}

.bm-title {
  font-family: var(--font-sans);
  font-size: 1.35rem;
  font-weight: 800;
  color: #fff;
  line-height: 1.25;
  margin: 0;
}

.bm-subtitle {
  font-family: var(--font-sans);
  font-size: 0.8rem;
  color: rgba(255,255,255,0.45);
  margin: 0;
  line-height: 1.5;
}

.bm-details {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 4px;
  flex: 1;
}

.bm-detail-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 12px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 8px;
}
.bm-detail-row i {
  color: var(--red-400);
  width: 14px;
  flex-shrink: 0;
  margin-top: 3px;
  font-size: 0.75rem;
}
.bm-detail-row > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.bm-detail-label {
  font-family: var(--font-sans);
  font-size: 0.62rem;
  color: rgba(255,255,255,0.35);
  letter-spacing: 1px;
  text-transform: uppercase;
}
.bm-detail-value {
  font-family: var(--font-sans);
  font-size: 0.82rem;
  color: rgba(255,255,255,0.85);
  line-height: 1.4;
}

/* 액션 버튼 */
.bm-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 4px;
}

.bm-btn-primary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 20px;
  background: var(--red-500);
  color: #fff;
  font-family: var(--font-sans);
  font-size: 0.9rem;
  font-weight: 700;
  border-radius: 8px;
  text-decoration: none;
  box-shadow: var(--sh-red-sm);
  transition: background .2s, transform .2s;
}
.bm-btn-primary:hover { background: var(--red-400); transform: translateY(-1px); }

.bm-btn-kakao {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 20px;
  background: #FEE500;
  color: #3C1E1E;
  font-family: var(--font-sans);
  font-size: 0.88rem;
  font-weight: 700;
  border-radius: 8px;
  text-decoration: none;
  transition: opacity .2s, transform .2s;
}
.bm-btn-kakao:hover { opacity: 0.88; transform: translateY(-1px); }

.bm-btn-ghost {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 20px;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.18);
  color: rgba(255,255,255,0.7);
  font-family: var(--font-sans);
  font-size: 0.85rem;
  font-weight: 600;
  border-radius: 8px;
  text-decoration: none;
  transition: border-color .2s, color .2s;
}
.bm-btn-ghost:hover { border-color: var(--red-400); color: var(--red-300); }

/* 모달 반응형 */
@media (max-width: 768px) {
  .branch-modal {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
    width: 96vw;
    max-height: 92vh;
    top: 50%; left: 50%;
  }
  /* 모바일: 닫기 버튼 크게 + 항상 보이도록 */
  .bm-close {
    top: 10px;
    right: 10px;
    width: 48px;
    height: 48px;
    font-size: 1.15rem;
    background: rgba(0,0,0,0.85);
    border: 2px solid rgba(255,255,255,0.5);
    z-index: 100;
  }
  .bm-img-main { min-height: 220px; }
  .bm-img-thumbs { height: 56px; }
  .bm-thumb { height: 48px; }
  .bm-info-panel { padding: 20px 18px; gap: 10px; }
  .bm-title { font-size: 1.15rem; }
  .bm-actions { flex-direction: row; flex-wrap: wrap; }
  .bm-btn-primary, .bm-btn-kakao, .bm-btn-ghost { flex: 1; min-width: 120px; padding: 10px 12px; font-size: 0.8rem; }
}


/* =====================================================
   HERO BRANCH SECTION — 반응형
   ===================================================== */

/* 태블릿: 2×2 그리드 유지 */
@media (max-width: 1024px) {
  .hb-grid {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    height: 100%;
    gap: 2px;
  }
  .hb-card {
    min-height: 0; /* grid가 균등 분배 */
  }
  .hb-content { padding: 0 20px 26px; }
  .hb-branch { font-size: clamp(1.5rem, 3.2vw, 2.2rem); }
}

/* 모바일: 2×2 그리드 유지 (세로 스택 → 2×2 유지) */
@media (max-width: 768px) {
  .hero-branch-section {
    height: 100dvh;
    min-height: 100dvh;
  }
  .hb-header-overlay {
    padding: 12px 14px;
  }
  .hb-scroll-hint { display: none; }

  .hb-grid {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    height: 100%;
    gap: 2px;
  }
  .hb-card {
    min-height: 0;
  }
  .hb-content {
    padding: 0 14px 16px;
    gap: 3px;
  }
  .hb-branch { font-size: clamp(1.25rem, 4.5vw, 1.8rem); letter-spacing: 1px; }
  .hb-gym { font-size: 0.68rem; }
  .hb-num { font-size: 0.62rem; letter-spacing: 2px; }
  .hb-tag { font-size: 0.55rem; }
  .hb-info-list {
    margin-top: 6px;
    gap: 3px;
  }
  .hb-info-item { font-size: 0.68rem; gap: 5px; }
  .hb-info-item i { font-size: 0.6rem; }
  .hb-cta-btn {
    padding: 8px 14px;
    font-size: 0.73rem;
    margin-top: 10px;
    gap: 5px;
  }
  .hb-premium-badge { font-size: 0.52rem; padding: 3px 7px; }
  .hb-coming-badge  { font-size: 0.52rem; padding: 3px 7px; }
}

/* =====================================================
   NEW MEMBERSHIP — 지점 탭 + 2카드 레이아웃
   ===================================================== */

/* 지점 탭 바 */
.branch-tabs {
  display: flex;
  gap: 6px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.btab {
  position: relative;
  padding: 9px 18px;
  border-radius: 50px;
  border: 1.5px solid rgba(0,0,0,0.12);
  background: #f4f4f4;
  color: #555;
  font-family: var(--font-sans);
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
}
.btab:hover { background: #eee; color: #222; }
.btab.active {
  background: #1a1a1a;
  color: #fff;
  border-color: #1a1a1a;
}
.btab.coming { opacity: 0.55; cursor: default; }
.btab-badge {
  display: inline-block;
  margin-left: 5px;
  padding: 2px 7px;
  border-radius: 50px;
  background: linear-gradient(135deg,#6C3EF5,#A855F7);
  color: #fff;
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.5px;
  vertical-align: middle;
}

/* 탭 패널 */
.btab-panel { display: none; }
.btab-panel.active { display: block; }

/* 회원 유형 토글 */
.mem-type-toggle {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-bottom: 18px;
}
.mtt-btn {
  padding: 10px 22px;
  border-radius: 50px;
  border: 1.5px solid rgba(0,0,0,0.13);
  background: #f0f0f0;
  color: #666;
  font-family: var(--font-sans);
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
}
.mtt-btn.active {
  background: var(--red-500);
  color: #fff;
  border-color: var(--red-500);
  box-shadow: 0 3px 12px rgba(220,40,40,0.35);
}
.mtt-btn:hover:not(.active) { background: #e5e5e5; color: #333; }

/* 멤버 패널 */
.mem-panel { display: none; }
.mem-panel.active { display: block; }

/* 2카드 그리드 */
.plan-two-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  max-width: 720px;
  margin: 0 auto;
}

/* 새 플랜 카드 */
.plan-card2 {
  background: #fff;
  border: 1.5px solid #e8e8e8;
  border-radius: 18px;
  padding: 24px 22px;
  position: relative;
  transition: box-shadow 0.22s, transform 0.22s;
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}
.plan-card2:hover { box-shadow: 0 8px 28px rgba(0,0,0,0.12); transform: translateY(-4px); }
.plan-card2.featured {
  border-color: var(--red-400);
  box-shadow: 0 4px 22px rgba(220,40,40,0.15);
}
.p2-eyebrow {
  font-family: var(--font-sans);
  font-size: 0.63rem;
  font-weight: 800;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--red-400);
  margin-bottom: 6px;
}
.p2-name {
  font-family: var(--font-sans);
  font-size: 1.15rem;
  font-weight: 800;
  color: #111;
  margin-bottom: 8px;
}
.p2-price {
  display: flex;
  align-items: baseline;
  gap: 3px;
  margin-bottom: 2px;
}
.p2-amount {
  font-family: var(--font-brand);
  font-size: 2.2rem;
  color: #111;
  line-height: 1;
}
.plan-card2.featured .p2-amount { color: var(--red-500); }
.p2-unit {
  font-family: var(--font-sans);
  font-size: 0.82rem;
  color: #666;
  font-weight: 600;
}
.p2-note {
  font-family: var(--font-sans);
  font-size: 0.72rem;
  color: #888;
  margin-bottom: 8px;
}
.p2-divider {
  height: 1px;
  background: #eee;
  margin: 12px 0;
}
.plan-feats { list-style: none; display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; }
.plan-feats li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-family: var(--font-sans);
  font-size: 0.82rem;
  color: #333;
}
.plan-feats li.na { color: #bbb; }
.plan-feats li.na .pf-check { background: #f0f0f0; border-color: #ddd; color: #bbb; }
.pf-sub {
  display: block;
  font-size: 0.68rem;
  color: #888;
  font-weight: 400;
  margin-top: 1px;
}
.plan-feats strong { font-weight: 700; color: #111; }

/* 플랜 버튼 */
.btn-plan {
  display: block;
  width: 100%;
  text-align: center;
  padding: 12px;
  border-radius: 10px;
  font-family: var(--font-sans);
  font-size: 0.84rem;
  font-weight: 800;
  transition: all 0.2s;
  text-decoration: none;
}
.btn-plan-red {
  background: var(--red-500);
  color: #fff;
  box-shadow: 0 3px 12px rgba(220,40,40,0.3);
}
.btn-plan-red:hover { background: var(--red-400); transform: translateY(-2px); box-shadow: 0 5px 18px rgba(220,40,40,0.45); }
.btn-plan-outline {
  background: transparent;
  color: #333;
  border: 1.5px solid #ddd;
}
.btn-plan-outline:hover { border-color: var(--red-400); color: var(--red-500); }

/* 앱·코칭 인포 박스 */
.plan-info-box {
  max-width: 720px;
  margin: 0 auto;
  background: rgba(220,40,40,0.04);
  border: 1px solid rgba(220,40,40,0.12);
  border-radius: 14px;
  padding: 18px 22px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.pib-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-family: var(--font-sans);
  font-size: 0.82rem;
  color: #555;
}
.pib-item i {
  color: var(--red-400);
  font-size: 1rem;
  margin-top: 2px;
  flex-shrink: 0;
}
.pib-item strong { color: #111; font-weight: 700; display: block; margin-bottom: 2px; }
.pib-item span { color: #666; font-size: 0.78rem; }

/* 준비중 패널 */
.coming-soon-panel {
  text-align: center;
  padding: 60px 20px;
  max-width: 480px;
  margin: 0 auto;
}
.csp-icon { font-size: 3rem; margin-bottom: 16px; }
.csp-title {
  font-family: var(--font-sans);
  font-size: 1.2rem;
  font-weight: 800;
  color: #111;
  margin-bottom: 10px;
}
.csp-desc {
  font-family: var(--font-sans);
  font-size: 0.87rem;
  color: #666;
  line-height: 1.7;
  margin-bottom: 20px;
}

/* =====================================================
   차별화 섹션 — 선택 유도형 3분할 카드
   ===================================================== */
.diff-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1.2fr;
  gap: 14px;
  max-width: 860px;
  margin: 0 auto;
}

.diff-card {
  border-radius: 18px;
  padding: 24px 20px;
  position: relative;
  transition: transform 0.2s;
  cursor: default;
  display: flex;
  flex-direction: column;
}
.diff-card:hover { transform: translateY(-4px); }
.diff-card .dc-list { flex: 1; }

.diff-card.lose {
  background: #fafafa;
  border: 1.5px solid #ebebeb;
}
.diff-card.mid {
  background: #fafafa;
  border: 1.5px solid #ebebeb;
}
.diff-card.win {
  background: #fff;
  border: 2px solid var(--red-400);
  box-shadow: 0 6px 28px rgba(220,40,40,0.14);
}

.dc-header { margin-bottom: 16px; }
.dc-scenario {
  font-family: var(--font-sans);
  font-size: 0.9rem;
  font-weight: 800;
  color: #888;
}
.diff-card.win .dc-scenario { color: #111; }
.dc-badge-win {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 12px;
  border-radius: 50px;
  background: var(--red-500);
  color: #fff;
  font-family: var(--font-sans);
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.5px;
  margin-bottom: 6px;
}

.dc-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 20px;
}
.dc-list li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-family: var(--font-sans);
  font-size: 0.83rem;
  color: #555;
  line-height: 1.45;
}
.dc-list li i.fa-check { color: var(--red-500); font-size: 0.7rem; margin-top: 3px; flex-shrink: 0; }
.dc-list li i.fa-times { color: #ccc; font-size: 0.7rem; margin-top: 3px; flex-shrink: 0; }
.diff-card.win .dc-list li { color: #222; }

.btn-diff-cta {
  display: block;
  text-align: center;
  padding: 13px;
  border-radius: 10px;
  background: var(--red-500);
  color: #fff;
  font-family: var(--font-sans);
  font-size: 0.87rem;
  font-weight: 800;
  text-decoration: none;
  transition: all 0.2s;
  box-shadow: 0 3px 14px rgba(220,40,40,0.35);
}
.btn-diff-cta:hover { background: var(--red-400); transform: translateY(-2px); }

/* 숫자 통계 바 */
.diff-stats {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  max-width: 720px;
  margin: 0 auto;
  background: #fff;
  border: 1.5px solid #ebebeb;
  border-radius: 16px;
  padding: 22px 0;
  flex-wrap: wrap;
}
.ds-item {
  flex: 1;
  text-align: center;
  padding: 0 20px;
  min-width: 120px;
}
.ds-num {
  font-family: var(--font-brand);
  font-size: 2rem;
  color: var(--red-500);
  line-height: 1;
  margin-bottom: 4px;
}
.ds-num span { font-size: 0.65em; }
.ds-label {
  font-family: var(--font-sans);
  font-size: 0.73rem;
  color: #888;
  font-weight: 600;
}
.ds-divider {
  width: 1px;
  height: 40px;
  background: #eee;
  flex-shrink: 0;
}

/* =====================================================
   모바일 반응형 — 새 컴포넌트
   ===================================================== */
@media (max-width: 768px) {
  .plan-two-grid { grid-template-columns: 1fr; gap: 12px; }
  .diff-grid { grid-template-columns: 1fr; gap: 10px; }
  .diff-card.lose, .diff-card.mid { display: none; } /* 모바일: win 카드만 강조 */
  .diff-grid::before {
    content: '다른 짐에서 시작했다면?';
    font-family: var(--font-sans);
    font-size: 0.75rem;
    color: #aaa;
    text-align: center;
    padding: 6px 0;
    display: block;
  }
  .diff-stats { gap: 0; }
  .ds-item { min-width: 80px; padding: 0 12px; }
  .ds-num { font-size: 1.5rem; }
  .branch-tabs { gap: 5px; }
  .btab { padding: 8px 13px; font-size: 0.76rem; }
  .mem-type-toggle { gap: 6px; }
  .mtt-btn { padding: 9px 16px; font-size: 0.79rem; }
}

/* =====================================================
   섹션 하단 CTA 배너 (sec-cta-bar)
   ===================================================== */
.sec-cta-bar {
  position: static;   /* absolute 제거 — 콘텐츠 아래 자연 흐름 */
  width: 100%;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 14px var(--section-px);
  flex-wrap: wrap;
}
.sec-cta-light {
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(12px);
  border-top: 1px solid rgba(0,0,0,0.07);
}
.sec-cta-dark {
  background: rgba(10,10,10,0.88);
  backdrop-filter: blur(12px);
  border-top: 1px solid rgba(255,255,255,0.06);
}

.scb-text {
  font-family: var(--font-sans);
  font-size: 0.86rem;
  font-weight: 500;
}
.sec-cta-light .scb-text { color: #444; }
.sec-cta-dark  .scb-text { color: rgba(255,255,255,0.75); }
.scb-text strong {
  font-weight: 800;
}
.sec-cta-light .scb-text strong { color: #111; }
.sec-cta-dark  .scb-text strong { color: #fff; }

.scb-btn {
  padding: 10px 22px;
  border-radius: 50px;
  font-family: var(--font-sans);
  font-size: 0.82rem;
  font-weight: 800;
  white-space: nowrap;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: all 0.2s;
  display: inline-flex;
  align-items: center;
}
.scb-btn-red {
  background: var(--red-500);
  color: #fff;
  box-shadow: 0 3px 12px rgba(220,40,40,0.35);
}
.scb-btn-red:hover { background: var(--red-400); transform: translateY(-2px); }
.scb-btn-white {
  background: #fff;
  color: #111;
  box-shadow: 0 3px 10px rgba(0,0,0,0.18);
}
.scb-btn-white:hover { background: #f0f0f0; transform: translateY(-2px); }

/* slider-section: flex column으로 sec-cta-bar를 맨 아래 배치 */
.slider-section { position: relative; display: flex; flex-direction: column; }

@media (max-width: 768px) {
  .sec-cta-bar { padding: 12px 16px; gap: 10px; }
  .scb-text { font-size: 0.79rem; text-align: center; }
  .scb-btn { padding: 9px 18px; font-size: 0.79rem; }
}

/* ══════════════════════════════════════════════════════════════
   MEMBERSHIP REDESIGN — 새 컴포넌트 CSS
   (urgent-bar / social-proof / branch-selector / plan-compare)
══════════════════════════════════════════════════════════════ */

/* ── ① 긴급성 배너 ── */
.mem-urgent-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  background: linear-gradient(90deg, #1a0505 0%, #2a0a0a 50%, #1a0505 100%);
  border: 1px solid rgba(220,40,40,0.35);
  border-radius: 8px;
  padding: 9px 16px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.mub-dot {
  flex-shrink: 0;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #e03030;
  box-shadow: 0 0 0 0 rgba(220,40,40,0.6);
  animation: mub-pulse 1.6s infinite;
}
@keyframes mub-pulse {
  0%   { box-shadow: 0 0 0 0   rgba(220,40,40,0.6); }
  70%  { box-shadow: 0 0 0 8px rgba(220,40,40,0); }
  100% { box-shadow: 0 0 0 0   rgba(220,40,40,0); }
}
.mub-text {
  flex: 1;
  font-size: 0.82rem;
  color: rgba(255,255,255,0.88);
  line-height: 1.4;
}
.mub-text strong { color: #ff8080; }
.mub-cta {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  background: #c82020;
  color: #fff;
  border-radius: 5px;
  font-size: 0.78rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.2s;
}
.mub-cta:hover { background: #e03030; }

/* ── ② 헤더 + 소셜 프루프 ── */
.mem-header-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.mem-header-left { flex: 1; min-width: 180px; }
.mem-headline {
  /* headline-lg(clamp 2.4rem~5rem) 완전 재정의 */
  font-family: var(--font-serif) !important;
  font-size: 1.8rem !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  letter-spacing: -0.01em !important;
  margin-bottom: 0 !important;
  color: #111 !important;
}
.mem-headline .txt-red-dark { color: #b81e1e !important; }

.mem-social-proof {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  background: #fff;
  border: 1px solid rgba(0,0,0,0.09);
  border-radius: 10px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
  flex-shrink: 0;
}
.msp-rating { display: flex; align-items: center; gap: 6px; }
.msp-stars { color: #f5a623; font-size: 0.78rem; letter-spacing: 1px; }
.msp-score { font-size: 1.15rem; font-weight: 800; color: #111; }
.msp-count, .msp-review {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
}
.msp-count strong, .msp-review strong {
  font-size: 0.95rem;
  font-weight: 800;
  color: #111;
  line-height: 1.2;
}
.msp-count span, .msp-review span {
  font-size: 0.68rem;
  color: #666;
  line-height: 1.2;
}
.msp-divider {
  width: 1px;
  height: 32px;
  background: rgba(0,0,0,0.1);
}

/* ── ③ 지점 선택 대형 버튼 ── */
.branch-selector { margin-bottom: 18px; }
.bs-label {
  font-size: 0.72rem;
  font-weight: 700;
  color: #888;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin-bottom: 8px;
}
.bs-btns {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}
.bs-btn {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 10px 12px;
  background: #fff;
  border: 1.5px solid rgba(0,0,0,0.12);
  border-radius: 8px;
  cursor: pointer;
  transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
  text-align: left;
}
.bs-btn:hover:not(:disabled) {
  border-color: #c82020;
  box-shadow: 0 2px 10px rgba(200,32,32,0.15);
}
.bs-btn.active {
  border-color: #c82020;
  background: linear-gradient(135deg, #fff5f5 0%, #fff 100%);
  box-shadow: 0 2px 14px rgba(200,32,32,0.2);
}
.bs-btn.active::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 3px;
  background: #c82020;
  border-radius: 0 0 6px 6px;
}
.bs-btn.coming {
  opacity: 0.5;
  cursor: not-allowed;
  background: #f5f5f5;
}
.bs-btn:disabled { pointer-events: none; }
.bs-num {
  font-size: 0.62rem;
  font-weight: 800;
  color: #bbb;
  letter-spacing: 0.5px;
  line-height: 1;
}
.bs-btn.active .bs-num { color: #c82020; }
.bs-name {
  font-size: 0.88rem;
  font-weight: 700;
  color: #111;
  line-height: 1.2;
}
.bs-tag {
  font-size: 0.65rem;
  color: #999;
  line-height: 1;
}
.bs-badge-sub {
  display: inline-block;
  font-size: 0.58rem;
  font-weight: 700;
  color: #c82020;
  background: rgba(200,32,32,0.08);
  border-radius: 3px;
  padding: 1px 5px;
  line-height: 1.4;
}

/* ── ④ btab-panel 전환 ── */
.btab-panel { display: none; }
.btab-panel.active { display: block; }

/* ── ⑤ 2단 비교 카드 (plan-compare-grid) ── */
.plan-compare-grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: stretch;
  gap: 0;
  margin-bottom: 12px;
}
.pcg-card {
  background: #fff;
  border: 1.5px solid rgba(0,0,0,0.1);
  border-radius: 10px;
  padding: 16px 16px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: box-shadow 0.2s;
}
.pcg-card:hover { box-shadow: 0 4px 18px rgba(0,0,0,0.1); }
.pcg-card-featured {
  border-color: #c82020;
  box-shadow: 0 4px 20px rgba(200,32,32,0.18);
  background: linear-gradient(160deg, #fff5f5 0%, #fff 100%);
}
.pcg-vs {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  flex-shrink: 0;
}
.pcg-vs span {
  font-size: 0.72rem;
  font-weight: 800;
  color: #ccc;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  letter-spacing: 2px;
}
.pcg-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  background: #c82020;
  color: #fff;
  border-radius: 4px;
  font-size: 0.68rem;
  font-weight: 700;
  width: fit-content;
}
.pcg-badge-sub {
  background: #1a5c9a;
}
.pcg-type-label {
  font-size: 0.82rem;
  font-weight: 700;
  color: #333;
}
.pcg-price-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px;
}
.pcg-amount {
  font-size: 1.45rem;
  font-weight: 900;
  color: #111;
  line-height: 1;
}
.pcg-card-featured .pcg-amount { color: #c82020; }
.pcg-unit {
  font-size: 0.78rem;
  font-weight: 600;
  color: #555;
}
.pcg-alt {
  width: 100%;
  font-size: 0.7rem;
  color: #888;
  margin-top: 2px;
}
.pcg-alt strong { color: #555; }
.pcg-feats {
  list-style: none;
  padding: 0; margin: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
  flex: 1;
}
.pcg-feats li {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  font-size: 0.78rem;
  color: #444;
  line-height: 1.4;
}
.pcg-feats li .fas {
  color: #c82020;
  font-size: 0.72rem;
  margin-top: 2px;
  flex-shrink: 0;
}
.pcg-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 10px 14px;
  border-radius: 7px;
  font-size: 0.8rem;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.18s, box-shadow 0.18s;
  border: none;
  margin-top: auto;
}
.pcg-cta:hover { transform: translateY(-2px); box-shadow: 0 4px 14px rgba(0,0,0,0.18); }
.pcg-cta-red {
  background: #c82020;
  color: #fff;
  box-shadow: 0 3px 12px rgba(200,32,32,0.35);
}
.pcg-cta-red:hover { background: #e03030; }
.pcg-cta-outline {
  background: transparent;
  color: #333;
  border: 1.5px solid rgba(0,0,0,0.2);
}
.pcg-cta-outline:hover { border-color: #c82020; color: #c82020; background: rgba(200,32,32,0.04); }

/* 신뢰 배지 */
.pcg-trust {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 0.72rem;
  color: #777;
  padding: 8px 12px;
  background: rgba(0,0,0,0.03);
  border-radius: 6px;
  border: 1px solid rgba(0,0,0,0.06);
  margin-bottom: 4px;
}
.pcg-trust .fas { color: #27ae60; font-size: 0.78rem; }

/* 오픈 예정 패널 */
.coming-soon-panel {
  text-align: center;
  padding: 36px 20px;
  background: #f9f9f9;
  border-radius: 10px;
  border: 1.5px dashed rgba(0,0,0,0.12);
}
.csp-icon { font-size: 2.2rem; margin-bottom: 10px; }
.csp-title { font-size: 1rem; font-weight: 700; color: #333; margin-bottom: 8px; }
.csp-desc { font-size: 0.82rem; color: #666; line-height: 1.6; }

/* ── 반응형: 태블릿 이하 ── */
@media (max-width: 768px) {
  .mem-header-row { flex-direction: column; gap: 14px; }
  .mem-social-proof { width: 100%; justify-content: space-around; }
  .bs-btns { grid-template-columns: repeat(2, 1fr); }
  .plan-compare-grid {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
  }
  .pcg-vs {
    width: 100%;
    height: 28px;
    writing-mode: horizontal-tb;
  }
  .pcg-vs span {
    writing-mode: horizontal-tb;
    font-size: 0.72rem;
    letter-spacing: 4px;
  }
  .mem-urgent-bar { padding: 8px 12px; }
  .mub-text { font-size: 0.76rem; }
  .pcg-amount { font-size: 1.25rem; }
}

@media (max-width: 480px) {
  .bs-btns { grid-template-columns: repeat(2, 1fr); gap: 5px; }
  .bs-btn { padding: 8px 10px; }
  .bs-name { font-size: 0.82rem; }
  .mem-social-proof { gap: 10px; padding: 10px 12px; }
  .msp-score { font-size: 1rem; }
}

/* ══════════════════════════════════════════════════════════════
   MOBILE RESPONSIVE OVERHAUL v3
   - overflow 차단
   - nav 정리 + 햄버거 드롭다운
   - 슬라이더 유지 (모바일도 슬라이더 구조 사용)
   - 각 컴포넌트 모바일 최적화
══════════════════════════════════════════════════════════════ */

/* ────────────────────────────────────────────────────────────
   [0] 전역 overflow-x 차단
──────────────────────────────────────────────────────────── */
html, body {
  overflow-x: hidden;
  max-width: 100%;
}

/* ────────────────────────────────────────────────────────────
   [1] sec-cta-bar: PC/모바일 공통 static 흐름
   position:absolute → static 전환으로 overflow 완전 해결
──────────────────────────────────────────────────────────── */
.slider-section {
  padding-bottom: 0; /* sec-cta-bar가 자연 흐름이므로 불필요 */
}
/* sec-cta-bar는 이미 원본에서 static — 이 블록 불필요하지만 유지 */

/* ────────────────────────────────────────────────────────────
   [2] 모바일 네비게이션
──────────────────────────────────────────────────────────── */

/* ── 햄버거 드롭다운 메뉴 ── */
.nav-mobile-dropdown {
  display: none;
  position: absolute;
  top: 58px;
  left: 0;
  right: 0;
  background: rgba(8,8,8,0.97);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(220,40,40,0.2);
  z-index: 940;
  padding: 8px 0 12px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.5);
}
.nav-mobile-dropdown.open { display: block; }
.nmd-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 20px;
  color: var(--white-70);
  font-family: var(--font-sans);
  font-size: 0.9rem;
  font-weight: 500;
  text-decoration: none;
  border-left: 3px solid transparent;
  transition: all 0.18s;
}
.nmd-item:hover,
.nmd-item:active {
  color: #fff;
  background: rgba(220,40,40,0.08);
  border-left-color: var(--red-400);
}
.nmd-item i {
  width: 18px;
  text-align: center;
  color: var(--red-400);
  font-size: 0.82rem;
  flex-shrink: 0;
}
.nmd-divider {
  height: 1px;
  background: rgba(255,255,255,0.05);
  margin: 4px 20px;
}

@media (max-width: 768px) {
  .site-nav {
    height: 58px;
    min-height: 58px;
    padding: 0 14px;
    overflow: visible; /* 드롭다운 표시를 위해 visible */
  }
  .nav-inner {
    padding: 0;
    overflow: visible;
    position: relative;
  }

  /* 로고: 좌측 고정 */
  .nav-logo {
    gap: 9px;
    flex-shrink: 1;
    min-width: 0;
    overflow: hidden;
    max-width: calc(100vw - 160px);
  }

  /* SVG 로고: 배경 완전 제거 */
  .nav-logo-mark {
    width: 32px; height: 36px;
    flex-shrink: 0;
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
  }
  .nav-logo-svg { width: 32px; height: 36px; }

  .nav-logo-text {
    padding-left: 8px;
    min-width: 0;
    overflow: hidden;
    gap: 1px;
  }
  .nav-logo-text::before { height: 20px; }
  .nav-logo-text .brand {
    font-size: 1.45rem;
    letter-spacing: 5px;
    white-space: nowrap;
  }
  /* 슬로건: 768px에서 표시, 한 줄 ellipsis */
  .nav-logo-text .sub {
    font-size: 0.4rem;
    letter-spacing: 0.4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 170px;
    display: block;
  }

  /* nav 메뉴 링크: 숨김 */
  .nav-menu { display: none !important; }

  /* nav 우측: '지금 시작' + 햄버거 */
  .nav-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    margin-left: auto;
  }
  .btn-nav-ghost { display: none !important; }
  .btn-nav-cta {
    padding: 8px 14px;
    font-size: 0.78rem;
    font-weight: 800;
    gap: 5px;
    white-space: nowrap;
    border-radius: 7px;
  }
  .nav-hamburger {
    display: flex;
    margin-left: 4px;
  }
  /* 햄버거 열림 애니메이션 */
  .nav-hamburger.is-open span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }
  .nav-hamburger.is-open span:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
  }
  .nav-hamburger.is-open span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }

  .fs-section { align-items: flex-start; }
  .fs-inner,
  .fs-inner.membership-inner { align-self: stretch; }
}

/* 480px 이하: 슬로건 숨김 */
@media (max-width: 480px) {
  .nav-logo-text .sub { display: none; }
  .nav-logo-text .brand { font-size: 1.35rem; letter-spacing: 4px; }
  .nav-logo-mark { width: 28px; height: 32px; }
  .nav-logo-svg  { width: 28px; height: 32px; }
  .btn-nav-cta { padding: 7px 11px; font-size: 0.74rem; }
  .nav-logo { max-width: calc(100vw - 140px); }
}

/* ────────────────────────────────────────────────────────────
   [3] 모바일 슬라이더 — v6
   
   이중 스크롤 제거: section 높이를 콘텐츠에 맞게 auto로.
   overflow:hidden 고정 + 내부 overflow-y:auto 조합을 버림.
   페이지 스크롤 하나로 통일.
──────────────────────────────────────────────────────────── */
@media (max-width: 768px) {

  /* ① section — 높이 auto, 스크롤 컨텍스트 없음 */
  section.slider-section,
  section#plan,
  section#space,
  section#proof,
  section#visit {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    padding: 0 !important;
    position: relative !important;
  }

  /* ② slider-container — 슬라이드 전환 클리핑용 */
  section.slider-section .slider-container {
    overflow: hidden !important;   /* 슬라이드 애니메이션 클립만 */
    position: relative !important;
    width: 100% !important;
    display: block !important;     /* flex 아닌 block: 높이를 active 슬라이드가 결정 */
  }

  /* ③ slide.active — 높이를 콘텐츠에 맞게, 스크롤 없음 */
  section.slider-section .slide.active {
    overflow: visible !important;
    display: block !important;
    width: 100% !important;
    min-height: 0 !important;
  }

  /* ④ fs-inner */
  section.slider-section .fs-inner {
    padding-top: 70px !important;
    padding-bottom: 24px !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* ⑤ slider-ui */
  section.slider-section .slider-ui {
    display: flex !important;
    padding: 10px 16px 12px !important;
    gap: 10px !important;
  }
  section.slider-section .slider-arrow {
    width: 34px !important;
    height: 34px !important;
    font-size: 0.76rem !important;
  }
  section.slider-section .sl-dot {
    padding: 4px 10px !important;
    font-size: 0.7rem !important;
  }

  /* ⑥ sec-cta-bar */
  section.slider-section .sec-cta-bar {
    padding: 10px 16px 14px !important;
    width: 100% !important;
  }
}

/* ────────────────────────────────────────────────────────────
   [4] 멤버십 섹션 모바일
──────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .slider-section.fs-section.light {
    /* [3]에서 공통 처리됨 — 추가 override 불필요 */
  }

  .membership-inner {
    padding: 70px 0 24px !important; /* 상단 nav 높이 확보 */
    max-height: none !important;
    /* overflow-y: visible 제거 — slide.active의 overflow-y:auto를 무효화하는 원인 */
    overflow-y: unset !important;
    overflow-x: hidden !important;
  }

  /* 긴급 배너 */
  .mem-urgent-bar { gap: 8px; padding: 8px 12px; flex-wrap: nowrap; }
  .mub-text {
    font-size: 0.74rem; flex: 1; min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .mub-cta { padding: 5px 10px; font-size: 0.72rem; flex-shrink: 0; }

  /* 헤더 */
  .mem-header-row { margin-bottom: 14px; }
  .mem-headline { font-size: 1.85rem !important; line-height: 1.15 !important; }

  /* 지점 버튼 2열 */
  .bs-btns { grid-template-columns: repeat(2, 1fr); gap: 6px; }
  .bs-btn { padding: 10px 10px 8px; }
  .bs-name { font-size: 0.85rem; }
  .bs-tag  { font-size: 0.62rem; }

  /* 비교 카드 세로 스택 */
  .plan-compare-grid {
    display: flex; flex-direction: column; gap: 10px; margin-bottom: 10px;
  }
  .pcg-vs { width: 100%; height: auto; padding: 2px 0; writing-mode: horizontal-tb; }
  .pcg-vs span { writing-mode: horizontal-tb; font-size: 0.65rem; letter-spacing: 6px; color: #ccc; }
  .pcg-card { padding: 14px 14px 12px; gap: 8px; }
  .pcg-amount { font-size: 1.3rem; }
  .pcg-feats li { font-size: 0.76rem; }
  .pcg-cta { padding: 9px 14px; font-size: 0.78rem; }
  .pcg-trust { font-size: 0.68rem; padding: 7px 10px; gap: 5px; flex-wrap: wrap; }

  /* 차별화 카드 */
  .diff-grid { grid-template-columns: 1fr; gap: 12px; }

  /* 통계 바 */
  .diff-stats { flex-wrap: wrap; padding: 16px 0; }
  .ds-item { min-width: 80px; padding: 0 10px; }
  .ds-num { font-size: 1.4rem; }
}

/* ────────────────────────────────────────────────────────────
   [5] 성과 섹션 모바일 — outcome-card 텍스트 잘림 완전 해결
──────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  /* two-col → 세로 스택 */
  .fs-two-col {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
  .fs-two-col.reverse { direction: ltr; }

  /* outcome-card: 2열 유지, 숫자 줄바꿈 방지 */
  .outcomes-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 10px;
    margin-top: 20px;
  }
  .outcome-card {
    padding: 16px 10px !important;
    overflow: hidden;
  }
  .oc-num {
    font-family: var(--font-brand);
    font-size: 1.6rem !important;
    line-height: 1 !important;
    white-space: nowrap !important;  /* ★ 핵심: 숫자+단위 줄바꿈 방지 */
    overflow: hidden;
    text-overflow: clip;
    letter-spacing: -1px;
  }
  .oc-num span {
    font-size: 0.7em !important;
  }
  .oc-label {
    font-size: 0.73rem !important;
    line-height: 1.3 !important;
    margin-top: 4px;
    word-break: keep-all;
  }
  .oc-desc {
    font-size: 0.65rem !important;
    line-height: 1.5 !important;
    word-break: keep-all;
    margin-top: 4px;
  }
  .oc-icon { font-size: 1.2rem !important; margin-bottom: 6px; }
}

/* ────────────────────────────────────────────────────────────
   [6] 시설/트레이너/방문 섹션 모바일
──────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  /* 시설 카드 — 가로 배치 */
  .fac-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    margin-top: 24px !important;
  }
  .fac-card {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    gap: 0 !important;
    border-radius: 12px !important;
    overflow: hidden !important;
  }
  .fac-card-icon {
    height: auto !important; min-height: unset !important;
    width: 80px !important; min-width: 80px !important;
    flex-shrink: 0 !important; font-size: 1.8rem !important;
    padding: 20px 0 !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
  }
  .fac-card-body { padding: 14px 14px 14px 0 !important; }
  .fac-num { font-size: 0.58rem; margin-bottom: 4px; }
  .fac-title { font-size: 0.95rem; margin-bottom: 4px; }
  .fac-desc { font-size: 0.8rem; line-height: 1.55; }

  /* 트레이너 카드 */
  .tr-grid { grid-template-columns: 1fr !important; gap: 12px; }
  .tr-card { padding: 20px 16px; }

  /* 방문 지점 그리드: 2열 (PC 4열 → 모바일 2열) */
  .loc-branch-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
    margin-top: 24px !important;
  }
  .loc-branch-card { padding: 14px 12px !important; }
  .lbc-name { font-size: 0.9rem; }
  .lbc-row { font-size: 0.72rem; }

  /* headline 모바일 */
  .headline-lg { font-size: 1.7rem !important; line-height: 1.15 !important; }
  .headline-xl { font-size: 2.1rem !important; line-height: 1.05 !important; }
  .headline-md { font-size: 1.35rem !important; }

  /* sec-header center: 모바일 left 정렬 */
  .sec-header.center {
    text-align: left !important;
    align-items: flex-start !important;
  }
  .sec-header.center .body-lg,
  .sec-header.center p { max-width: 100% !important; text-align: left !important; }
  .sec-header { margin-bottom: 28px; }
}

/* ── 소형 모바일 480px ── */
@media (max-width: 480px) {
  .membership-inner { padding: 70px 14px 40px !important; }
  .mem-headline { font-size: 1.55rem !important; }
  .headline-lg { font-size: 1.5rem !important; }
  .headline-xl { font-size: 1.85rem !important; }
  .pcg-amount { font-size: 1.2rem; }
  .bs-btn { padding: 8px 8px 7px; }
  .bs-name { font-size: 0.8rem; }
  .mem-urgent-bar { padding: 7px 10px; }
  .mub-text { font-size: 0.68rem; }
  .mub-cta { padding: 4px 8px; font-size: 0.66rem; }
  .oc-num { font-size: 1.45rem !important; }
  .fac-card-icon { width: 68px !important; min-width: 68px !important; font-size: 1.5rem !important; }
  .slider-section .fs-inner { padding-left: 14px !important; padding-right: 14px !important; }
  /* 방문: 모바일 소형에서 1열 */
  .loc-branch-grid { grid-template-columns: 1fr !important; }
}

/* ══════════════════════════════════════════════════════════
   BRANCH FINDER BANNER — 텍스트 입력 기반 지점 찾기
   (Geolocation 제거 → 키워드 매칭으로 교체)
══════════════════════════════════════════════════════════ */
.branch-finder-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 10px;
  padding: 10px 14px;
  margin-bottom: 16px;
  backdrop-filter: blur(6px);
}
.bfb-icon {
  flex-shrink: 0;
  color: var(--red-300);
  font-size: 0.88rem;
  width: 20px;
  text-align: center;
}
.bfb-input-wrap {
  flex: 1;
  position: relative;
  min-width: 0;
}
.bfb-input {
  width: 100%;
  background: none;
  border: none;
  outline: none;
  font-family: var(--font-sans);
  font-size: 0.84rem;
  color: var(--white-90);
  caret-color: var(--red-300);
}
.bfb-input::placeholder { color: rgba(255,255,255,0.35); }
.bfb-result {
  position: absolute;
  top: calc(100% + 6px);
  left: -40px;
  right: -80px;
  background: #1a1a1a;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px;
  overflow: hidden;
  z-index: 200;
  box-shadow: 0 8px 24px rgba(0,0,0,0.5);
  display: none;
}
.bfb-result.open { display: block; }
.bfb-result-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  cursor: pointer;
  transition: background 0.15s;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.bfb-result-item:last-child { border-bottom: none; }
.bfb-result-item:hover { background: rgba(220,40,40,0.12); }
.bfb-result-item.selected { background: rgba(220,40,40,0.18); }
.bfr-name {
  font-family: var(--font-sans);
  font-size: 0.84rem;
  font-weight: 700;
  color: #fff;
}
.bfr-addr {
  font-family: var(--font-sans);
  font-size: 0.72rem;
  color: rgba(255,255,255,0.45);
}
.bfr-badge {
  margin-left: auto;
  flex-shrink: 0;
  padding: 3px 8px;
  background: var(--red-500);
  color: #fff;
  border-radius: 4px;
  font-size: 0.65rem;
  font-weight: 700;
}
.bfb-clear {
  flex-shrink: 0;
  background: none;
  border: none;
  color: rgba(255,255,255,0.3);
  font-size: 0.75rem;
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 3px;
  display: none;
  transition: color 0.15s;
}
.bfb-clear.show { display: block; }
.bfb-clear:hover { color: rgba(255,255,255,0.7); }
.bfb-hint {
  font-family: var(--font-sans);
  font-size: 0.72rem;
  color: rgba(255,255,255,0.3);
  flex-shrink: 0;
  white-space: nowrap;
}

/* 라이트 섹션 내 배너 (멤버십 페이지는 light) */
.membership-inner .branch-finder-bar {
  background: rgba(0,0,0,0.05);
  border-color: rgba(0,0,0,0.1);
}
.membership-inner .bfb-input { color: #333; }
.membership-inner .bfb-input::placeholder { color: rgba(0,0,0,0.35); }
.membership-inner .bfb-icon { color: var(--red-500); }
.membership-inner .bfb-hint { color: rgba(0,0,0,0.3); }
.membership-inner .bfb-clear { color: rgba(0,0,0,0.3); }
.membership-inner .bfb-clear:hover { color: rgba(0,0,0,0.6); }
.membership-inner .bfb-result {
  background: #fff;
  border-color: rgba(0,0,0,0.1);
}
.membership-inner .bfb-result-item { border-bottom-color: rgba(0,0,0,0.05); }
.membership-inner .bfb-result-item:hover { background: rgba(220,40,40,0.06); }
.membership-inner .bfr-name { color: #111; }
.membership-inner .bfr-addr { color: rgba(0,0,0,0.45); }

/* 모바일 */
@media (max-width: 768px) {
  .branch-finder-bar { padding: 8px 12px; gap: 6px; }
  .bfb-input { font-size: 0.8rem; }
  .bfb-hint { display: none; } /* 모바일: 힌트 숨김 (공간 절약) */
  .bfb-result {
    left: -28px;
    right: -60px;
  }
}

/* ==============================================
   SNS 공유 배너 (.share-banner)
   proof 섹션과 visit 섹션 사이에 위치
   ============================================== */
.share-banner {
  background: #0d0d12;
  border-top: 1px solid rgba(255,255,255,0.06);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  padding: 20px 24px;
}
.share-banner-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.share-banner-text {
  margin: 0;
  font-size: 0.88rem;
  color: rgba(255,255,255,0.45);
  display: flex;
  align-items: center;
  gap: 8px;
}
.share-banner-text .fa-share-alt {
  color: var(--red-400, #e53935);
  font-size: 0.9rem;
}
.share-btn-group {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.share-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 18px;
  border-radius: 8px;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  border: none;
  transition: transform 0.15s, box-shadow 0.15s, opacity 0.15s;
}
.share-btn:hover  { transform: translateY(-2px); box-shadow: 0 4px 14px rgba(0,0,0,0.35); }
.share-btn:active { transform: translateY(0); }

/* 카카오 버튼 — 공식 브랜드 컬러 #FEE500 */
.share-btn-kakao {
  background: #FEE500;
  color: #191919;
}
.share-btn-kakao:hover { background: #ffe033; }
.share-btn-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* 링크 복사 버튼 */
.share-btn-copy {
  background: rgba(255,255,255,0.07);
  color: rgba(255,255,255,0.75);
  border: 1px solid rgba(255,255,255,0.1) !important;
}
.share-btn-copy:hover {
  background: rgba(255,255,255,0.12);
  color: #fff;
  border-color: rgba(255,255,255,0.2) !important;
}

/* 모바일 */
@media (max-width: 600px) {
  .share-banner-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  .share-banner-text { font-size: 0.8rem; }
  .share-btn { padding: 8px 14px; font-size: 0.78rem; }
}

/* ==============================================
   공통 콘텐츠 섹션 레이아웃
   ============================================== */
.content-section {
  background: #f7f7f9;
  padding: 80px 24px;
}
.content-section--dark {
  background: #0d0d12;
}
.cs-inner {
  max-width: 1100px;
  margin: 0 auto;
}
.cs-header {
  text-align: center;
  margin-bottom: 48px;
}
.cs-eyebrow {
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  color: var(--red-500, #d42020);
  font-weight: 700;
  margin-bottom: 8px;
  text-transform: uppercase;
}
.cs-title {
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  font-weight: 800;
  color: #111;
  margin-bottom: 12px;
  line-height: 1.2;
}
.content-section--dark .cs-title   { color: #fff; }
.content-section--dark .cs-eyebrow { color: var(--red-400, #e53935); }
.cs-subtitle {
  font-size: 0.95rem;
  color: #666;
  line-height: 1.7;
}
.content-section--dark .cs-subtitle { color: rgba(255,255,255,0.5); }

/* ==============================================
   운동 가이드 섹션
   ============================================== */
.guide-cat-tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 36px;
}
.gct-btn {
  padding: 8px 20px;
  border-radius: 24px;
  border: 1px solid #ddd;
  background: #fff;
  color: #555;
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
}
.gct-btn:hover { border-color: var(--red-400); color: var(--red-500); }
.gct-btn.active {
  background: var(--red-500, #d42020);
  border-color: var(--red-500, #d42020);
  color: #fff;
  font-weight: 700;
}
.guide-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 24px;
}
.guide-card {
  background: #fff;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0,0,0,0.07);
  transition: transform 0.2s, box-shadow 0.2s;
  display: flex;
  flex-direction: column;
}
.guide-card:hover { transform: translateY(-4px); box-shadow: 0 8px 28px rgba(0,0,0,0.12); }
.guide-thumb {
  height: 160px;
  background-size: cover;
  background-position: center;
  background-color: #1a1a22;
  position: relative;
  flex-shrink: 0;
}
.guide-thumb--noimg {
  display: flex;
  align-items: center;
  justify-content: center;
}
.guide-thumb-icon { font-size: 2.5rem; color: rgba(255,255,255,0.15); }
.guide-play-btn {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.35);
  border: none;
  cursor: pointer;
  transition: background 0.2s;
}
.guide-play-btn:hover { background: rgba(212,32,32,0.6); }
.guide-play-btn i { font-size: 2rem; color: #fff; }
.guide-card-body { padding: 16px 18px 18px; display: flex; flex-direction: column; flex: 1; }
.guide-card-meta { display: flex; gap: 8px; margin-bottom: 8px; }
.guide-cat-badge {
  font-size: 0.72rem; font-weight: 700; padding: 2px 10px;
  border-radius: 12px; background: rgba(212,32,32,0.1); color: var(--red-500, #d42020);
}
.guide-level-badge { font-size: 0.72rem; font-weight: 600; }
.guide-card-title { font-size: 1rem; font-weight: 700; color: #111; margin-bottom: 8px; line-height: 1.4; }
.guide-card-desc  { font-size: 0.83rem; color: #666; line-height: 1.6; flex: 1; margin-bottom: 12px; }
.guide-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.guide-tag  { font-size: 0.72rem; color: #888; background: #f1f1f1; padding: 2px 8px; border-radius: 8px; }
.guide-watch-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 16px; border-radius: 8px;
  background: #ff0000; color: #fff;
  font-size: 0.82rem; font-weight: 600; border: none; cursor: pointer;
  transition: opacity 0.15s, transform 0.15s;
  align-self: flex-start;
}
.guide-watch-btn:hover { opacity: 0.85; transform: translateY(-1px); }
.guide-loading, .guide-empty {
  text-align: center; padding: 60px 20px;
  color: #aaa; font-size: 0.9rem; grid-column: 1/-1;
}
.guide-loading i { margin-right: 8px; color: var(--red-400); }

/* 유튜브 모달 */
.yt-modal {
  display: none;
  position: fixed; inset: 0; z-index: 9000;
  background: rgba(0,0,0,0.88);
  align-items: center; justify-content: center;
  padding: 24px;
}
.yt-modal.open { display: flex; }
.yt-modal-inner {
  background: #111;
  border-radius: 14px;
  width: min(760px, 100%);
  overflow: hidden;
  position: relative;
}
.yt-modal-close {
  position: absolute; top: 10px; right: 12px; z-index: 10;
  background: rgba(0,0,0,0.5); border: none; color: #fff;
  width: 32px; height: 32px; border-radius: 50%;
  font-size: 1rem; cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: background 0.15s;
}
.yt-modal-close:hover { background: var(--red-500, #d42020); }
.yt-modal-title {
  padding: 14px 16px 0;
  color: rgba(255,255,255,0.85);
  font-size: 0.9rem; font-weight: 600;
}
.yt-embed-wrap { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; }
.yt-embed-wrap iframe { position: absolute; inset: 0; width: 100%; height: 100%; }

/* ==============================================
   비포애프터 갤러리
   ============================================== */
.ba-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 28px;
  margin-bottom: 40px;
}
.ba-empty {
  text-align: center; padding: 80px 20px;
  color: rgba(255,255,255,0.3); grid-column: 1/-1;
}
.ba-empty-icon { font-size: 3rem; margin-bottom: 16px; display: block; }
.ba-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 14px; overflow: hidden;
  transition: border-color 0.2s;
}
.ba-card:hover { border-color: rgba(255,255,255,0.15); }
.ba-imgs {
  display: flex; align-items: center; gap: 4px;
  background: #000; height: 200px;
}
.ba-img-wrap { flex: 1; height: 100%; position: relative; overflow: hidden; }
.ba-img-wrap img { width: 100%; height: 100%; object-fit: cover; }
.ba-label {
  position: absolute; top: 8px; left: 8px;
  background: rgba(0,0,0,0.65); color: #fff;
  font-size: 0.72rem; font-weight: 700; padding: 2px 8px; border-radius: 8px;
}
.ba-label--after { background: rgba(212,32,32,0.8); }
.ba-arrow { color: rgba(255,255,255,0.4); font-size: 1rem; flex-shrink: 0; padding: 0 4px; }
.ba-card-info {
  padding: 14px 16px;
  display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
}
.ba-nickname { color: #fff; font-size: 0.88rem; font-weight: 600; }
.ba-goal     { font-size: 0.78rem; color: var(--red-400, #e53935); background: rgba(212,32,32,0.12); padding: 2px 10px; border-radius: 10px; }
.ba-period   { font-size: 0.78rem; color: rgba(255,255,255,0.4); }
.ba-submit-cta {
  text-align: center; padding: 20px 0 0;
  color: rgba(255,255,255,0.4); font-size: 0.88rem;
}
.ba-submit-cta p { margin-bottom: 12px; }
.btn-ba-submit {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 28px; border-radius: 10px;
  background: var(--red-500, #d42020); color: #fff;
  font-size: 0.9rem; font-weight: 700; border: none; cursor: pointer;
  transition: opacity 0.15s, transform 0.15s;
}
.btn-ba-submit:hover { opacity: 0.85; transform: translateY(-2px); }

/* 비포애프터 제출 모달 */
.ba-modal {
  display: none;
  position: fixed; inset: 0; z-index: 9000;
  background: rgba(0,0,0,0.85);
  align-items: center; justify-content: center;
  padding: 24px; overflow-y: auto;
}
.ba-modal.open { display: flex; }
.ba-modal-inner {
  background: #16161e;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 16px;
  width: min(560px, 100%);
  padding: 28px;
  position: relative;
  max-height: 90vh; overflow-y: auto;
}
.ba-modal-close {
  position: absolute; top: 12px; right: 14px;
  background: none; border: none; color: rgba(255,255,255,0.4);
  font-size: 1.1rem; cursor: pointer;
}
.ba-modal-close:hover { color: #fff; }
.ba-modal-title { color: #fff; font-size: 1.1rem; font-weight: 700; margin-bottom: 8px; }
.ba-modal-desc  { color: rgba(255,255,255,0.4); font-size: 0.8rem; line-height: 1.6; margin-bottom: 20px; }
.ba-form { display: flex; flex-direction: column; gap: 14px; }
.ba-field { display: flex; flex-direction: column; gap: 6px; }
.ba-field label { color: rgba(255,255,255,0.65); font-size: 0.82rem; font-weight: 600; }
.ba-field input, .ba-field select {
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12);
  border-radius: 8px; color: #fff; font-size: 0.88rem; padding: 10px 14px;
}
.ba-field input:focus, .ba-field select:focus { outline: none; border-color: var(--red-400); }
.ba-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ba-file-label {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 28px; border: 2px dashed rgba(255,255,255,0.15);
  border-radius: 10px; color: rgba(255,255,255,0.4);
  font-size: 0.82rem; cursor: pointer; transition: border-color 0.15s;
}
.ba-file-label:hover { border-color: var(--red-400); color: #fff; }
.ba-file-label input[type="file"] { display: none; }
.ba-preview {
  width: 100%; max-height: 140px; object-fit: cover;
  border-radius: 8px; margin-top: 6px;
}
.ba-consent-label {
  display: flex; align-items: flex-start; gap: 10px;
  color: rgba(255,255,255,0.5); font-size: 0.8rem;
  line-height: 1.5; cursor: pointer;
}
.ba-consent-label input { margin-top: 2px; flex-shrink: 0; }
.ba-submit-btn {
  width: 100%; padding: 14px;
  background: var(--red-500, #d42020); color: #fff;
  border: none; border-radius: 10px; font-size: 0.95rem; font-weight: 700;
  cursor: pointer; transition: opacity 0.15s;
}
.ba-submit-btn:hover { opacity: 0.85; }
.ba-submit-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.req { color: var(--red-400); }

/* ==============================================
   AI 인바디 분석 섹션
   ============================================== */
.ai-inbody-wrap { max-width: 860px; margin: 0 auto; }
.ai-form-card {
  background: #fff;
  border-radius: 16px;
  padding: 32px;
  box-shadow: 0 2px 20px rgba(0,0,0,0.08);
}
.ai-form-title {
  font-size: 1.1rem; font-weight: 700; color: #111;
  margin-bottom: 24px; display: flex; align-items: center; gap: 10px;
}
.ai-form-title i { color: var(--red-500, #d42020); }
.ai-field-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 20px;
}
.ai-field { display: flex; flex-direction: column; gap: 6px; }
.ai-field--full { grid-column: 1 / -1; }
.ai-field label { font-size: 0.8rem; font-weight: 600; color: #555; }
.ai-field input, .ai-field select {
  border: 1.5px solid #e5e5e5; border-radius: 8px;
  padding: 10px 14px; font-size: 0.88rem; color: #111;
  transition: border-color 0.15s;
}
.ai-field input:focus, .ai-field select:focus { outline: none; border-color: var(--red-400, #e53935); }
.ai-goal-btns {
  display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 8px;
}
.ai-goal-btn {
  padding: 7px 16px; border-radius: 20px;
  border: 1.5px solid #e0e0e0; background: #fff; color: #555;
  font-size: 0.82rem; font-weight: 500; cursor: pointer;
  transition: all 0.15s;
}
.ai-goal-btn:hover  { border-color: var(--red-400); color: var(--red-500); }
.ai-goal-btn.active { background: var(--red-500, #d42020); border-color: var(--red-500); color: #fff; font-weight: 700; }
.ai-goal-input { width: 100%; }
.ai-analyze-btn {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; padding: 14px;
  background: linear-gradient(135deg, #d42020, #b71c1c);
  color: #fff; border: none; border-radius: 10px;
  font-size: 1rem; font-weight: 700; cursor: pointer;
  margin-top: 20px;
  transition: opacity 0.15s, transform 0.15s;
}
.ai-analyze-btn:hover   { opacity: 0.88; transform: translateY(-1px); }
.ai-analyze-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

/* AI 결과 카드 */
.ai-result-card {
  background: #fff; border-radius: 16px; padding: 32px;
  box-shadow: 0 2px 20px rgba(0,0,0,0.08);
}
.ai-result-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 24px;
}
.ai-result-header h3 {
  font-size: 1.1rem; font-weight: 700; color: #111;
  display: flex; align-items: center; gap: 8px;
}
.ai-result-header h3 i { color: var(--red-500); }
.ai-reset-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 16px; border-radius: 8px;
  border: 1.5px solid #ddd; background: #fff; color: #555;
  font-size: 0.82rem; cursor: pointer; transition: all 0.15s;
}
.ai-reset-btn:hover { border-color: var(--red-400); color: var(--red-500); }
.ai-sample-badge {
  background: rgba(245,158,11,0.1); border: 1px solid rgba(245,158,11,0.3);
  color: #d97706; border-radius: 8px; padding: 8px 14px;
  font-size: 0.8rem; margin-bottom: 16px;
}
.ai-status-box {
  background: #f8f9fa; border-radius: 10px; padding: 16px 20px;
  margin-bottom: 20px;
}
.ai-status-label { font-size: 0.72rem; font-weight: 700; color: #888; text-transform: uppercase; letter-spacing: 0.1em; }
.ai-status-text  { font-size: 0.92rem; color: #333; margin-top: 4px; line-height: 1.6; }
.ai-lists { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin-bottom: 24px; }
.ai-list { background: #f8f9fa; border-radius: 10px; padding: 14px 16px; }
.ai-list-title { font-size: 0.82rem; font-weight: 700; margin-bottom: 10px; display: flex; align-items: center; gap: 6px; }
.ai-list--good    { color: #16a34a; }
.ai-list--improve { color: #2563eb; }
.ai-list--warn    { color: #d97706; }
.ai-list ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.ai-list ul li { font-size: 0.82rem; color: #444; display: flex; align-items: flex-start; gap: 8px; line-height: 1.5; }
.ai-check { color: #16a34a; font-size: 0.8rem; margin-top: 2px; flex-shrink: 0; }
.ai-up    { color: #2563eb; font-size: 0.8rem; margin-top: 2px; flex-shrink: 0; }
.ai-warn  { color: #d97706; font-size: 0.8rem; margin-top: 2px; flex-shrink: 0; }
.ai-section-title {
  font-size: 1rem; font-weight: 700; color: #111;
  margin-bottom: 16px; display: flex; align-items: center; gap: 8px;
}
.ai-day-card {
  border: 1px solid #e5e5e5; border-radius: 10px;
  margin-bottom: 14px; overflow: hidden;
}
.ai-day-header {
  background: #f8f9fa; padding: 12px 16px;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.ai-day-name   { font-size: 0.88rem; font-weight: 700; color: #111; }
.ai-day-focus  { font-size: 0.82rem; color: var(--red-500); font-weight: 600; }
.ai-day-meta   { font-size: 0.78rem; color: #888; margin-left: auto; }
.ai-day-table-wrap { overflow-x: auto; }
.ai-ex-table   { width: 100%; border-collapse: collapse; font-size: 0.82rem; }
.ai-ex-table th { background: #f0f0f0; padding: 8px 12px; text-align: left; color: #555; font-weight: 600; font-size: 0.78rem; }
.ai-ex-table td { padding: 9px 12px; border-bottom: 1px solid #f0f0f0; color: #333; vertical-align: top; }
.ai-ex-table tr:last-child td { border-bottom: none; }
.ex-name { font-weight: 600; color: #111; }
.ex-tip  { color: #888; font-size: 0.78rem; }
.ai-extra-cards { display: flex; flex-direction: column; gap: 12px; margin-top: 20px; }
.ai-extra-card {
  display: flex; align-items: flex-start; gap: 14px;
  background: #f8f9fa; border-radius: 10px; padding: 14px 16px;
}
.ai-extra-icon { font-size: 1.2rem; color: var(--red-500); flex-shrink: 0; margin-top: 2px; }
.ai-extra-card strong { font-size: 0.82rem; color: #111; display: block; margin-bottom: 4px; }
.ai-extra-card p { font-size: 0.82rem; color: #555; line-height: 1.6; margin: 0; }
.ai-cta {
  text-align: center; padding: 24px 0 0;
  border-top: 1px solid #f0f0f0; margin-top: 24px;
}
.ai-cta p { color: #666; font-size: 0.88rem; margin-bottom: 14px; }
.btn-primary {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 28px; border-radius: 10px;
  background: var(--red-500, #d42020); color: #fff;
  font-size: 0.9rem; font-weight: 700; border: none; cursor: pointer;
  transition: opacity 0.15s, transform 0.15s;
}
.btn-primary:hover { opacity: 0.85; transform: translateY(-2px); }

/* 모바일 반응형 */
@media (max-width: 768px) {
  .content-section { padding: 56px 16px; }
  .guide-grid      { grid-template-columns: 1fr; }
  .ai-field-grid   { grid-template-columns: 1fr 1fr; }
  .ba-gallery      { grid-template-columns: 1fr; }
  .ba-field-row    { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .ai-field-grid   { grid-template-columns: 1fr; }
  .ai-lists        { grid-template-columns: 1fr; }
}

/* ==========================================================
   v2 추가 스타일 — 운동가이드 level탭 + 상세모달
   ========================================================== */

/* 난이도 배지 */
.level-badge {
  display: inline-block; padding: 3px 10px; border-radius: 20px;
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em;
}
.level-badge.beginner     { background: #dcfce7; color: #15803d; }
.level-badge.intermediate { background: #fef9c3; color: #a16207; }
.level-badge.advanced     { background: #fee2e2; color: #b91c1c; }

/* 난이도 탭 */
.guide-level-tabs {
  display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px;
}
.glt-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 18px; border-radius: 24px; font-size: 0.84rem; font-weight: 600;
  border: 2px solid #e5e7eb; background: #fff; color: #555; cursor: pointer;
  transition: all 0.18s;
}
.glt-btn:hover   { border-color: var(--red-500, #d42020); color: var(--red-500, #d42020); }
.glt-btn.active  { background: var(--red-500, #d42020); border-color: var(--red-500, #d42020); color: #fff; }

/* 가이드 카드 v2 */
.guide-card {
  background: #fff; border-radius: 16px; overflow: hidden;
  box-shadow: 0 2px 12px rgba(0,0,0,0.07); cursor: pointer;
  transition: transform 0.18s, box-shadow 0.18s; display: flex; flex-direction: column;
}
.guide-card:hover { transform: translateY(-4px); box-shadow: 0 8px 28px rgba(0,0,0,0.13); }

.guide-card-header {
  display: flex; align-items: center; gap: 8px;
  padding: 14px 16px 0;
}
.guide-day-badge {
  font-size: 0.75rem; font-weight: 700; color: #888;
  background: #f3f4f6; padding: 3px 10px; border-radius: 20px;
}
.guide-card-body { padding: 10px 16px 14px; flex: 1; }
.guide-week-theme { font-size: 0.78rem; color: #888; margin-bottom: 4px; }
.guide-card-title { font-size: 1rem; font-weight: 700; color: #111; margin-bottom: 10px; }
.guide-ex-chips   { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.guide-ex-chip {
  font-size: 0.73rem; padding: 3px 10px; border-radius: 20px;
  background: #f8f9fa; color: #555; border: 1px solid #e5e7eb;
}
.guide-card-meta-row {
  display: flex; gap: 14px;
}
.guide-meta-item { font-size: 0.78rem; color: #888; }
.guide-meta-item i { margin-right: 4px; color: var(--red-500, #d42020); }
.guide-detail-btn {
  width: 100%; padding: 12px; background: #f8f9fa; border: none;
  border-top: 1px solid #f0f0f0; font-size: 0.82rem; font-weight: 600; color: #555;
  cursor: pointer; transition: background 0.15s; display: flex; align-items: center;
  justify-content: center; gap: 6px;
}
.guide-detail-btn:hover { background: var(--red-500, #d42020); color: #fff; }

/* 운동 가이드 상세 모달 */
.guide-detail-modal {
  position: fixed; inset: 0; background: rgba(0,0,0,0.65); z-index: 8000;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none; transition: opacity 0.25s;
}
.guide-detail-modal.open { opacity: 1; pointer-events: auto; }
.guide-detail-inner {
  background: #fff; border-radius: 20px; padding: 32px 28px 28px;
  width: min(680px, 95vw); max-height: 90vh; overflow-y: auto;
  position: relative; transform: translateY(20px); transition: transform 0.25s;
}
.guide-detail-modal.open .guide-detail-inner { transform: none; }
.guide-detail-close {
  position: absolute; top: 16px; right: 18px;
  background: none; border: none; font-size: 1.3rem; color: #999; cursor: pointer;
}
.guide-detail-close:hover { color: #111; }

.gd-header { margin-bottom: 20px; }
.gd-header .level-badge { margin-right: 8px; }
.gd-title    { font-size: 1.25rem; font-weight: 800; color: #111; margin: 10px 0 4px; }
.gd-subtitle { font-size: 0.84rem; color: #888; }

.gd-warmup-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 20px; }
.gd-warmup-card {
  background: #f0fdf4; border-radius: 12px; padding: 14px 16px;
}
.gd-cooldown-card { background: #eff6ff; }
.gd-warmup-card h4 { font-size: 0.82rem; font-weight: 700; margin-bottom: 6px; color: #111; }
.gd-warmup-card p  { font-size: 0.8rem; color: #555; line-height: 1.6; margin: 0; }
.gd-warmup-card i  { margin-right: 6px; color: var(--red-500, #d42020); }

.gd-ex-table-title { font-size: 0.9rem; font-weight: 700; color: #111; margin-bottom: 10px; }
.gd-ex-table-title i { margin-right: 6px; color: var(--red-500, #d42020); }
.gd-table-wrap { overflow-x: auto; }
.gd-ex-table  { width: 100%; border-collapse: collapse; font-size: 0.82rem; }
.gd-ex-table th { background: #f8f9fa; padding: 9px 12px; text-align: left; color: #555; font-weight: 700; font-size: 0.78rem; }
.gd-ex-table td { padding: 10px 12px; border-bottom: 1px solid #f0f0f0; color: #333; vertical-align: top; }
.gd-ex-table tr:last-child td { border-bottom: none; }
.gd-ex-name { font-weight: 600; color: #111; }
.gd-ex-tip  { color: #888; font-size: 0.78rem; }

@media (max-width: 480px) {
  .gd-warmup-row { grid-template-columns: 1fr; }
}

/* ==========================================================
   v2 추가 스타일 — 비포애프터 type탭 + 상세모달 v2
   ========================================================== */
.ba-type-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 20px; }
.bat-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 18px; border-radius: 24px; font-size: 0.84rem; font-weight: 600;
  border: 2px solid #444; background: transparent; color: #ccc; cursor: pointer;
  transition: all 0.18s;
}
.bat-btn:hover  { border-color: var(--red-500, #d42020); color: #fff; }
.bat-btn.active { background: var(--red-500, #d42020); border-color: var(--red-500, #d42020); color: #fff; }

/* 비포애프터 카드 v2 */
.ba-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; }
.ba-card {
  background: #1a1a1a; border-radius: 16px; overflow: hidden; cursor: pointer;
  transition: transform 0.18s, box-shadow 0.18s;
  border: 1px solid #2a2a2a;
}
.ba-card:hover { transform: translateY(-4px); box-shadow: 0 8px 30px rgba(0,0,0,0.4); }

.ba-media-row { display: flex; gap: 2px; }
.ba-side { flex: 1; position: relative; min-width: 0; }
.ba-label {
  position: absolute; top: 8px; left: 8px; z-index: 2;
  font-size: 0.68rem; font-weight: 800; letter-spacing: 0.08em;
  background: rgba(0,0,0,0.7); color: #fff; padding: 3px 8px; border-radius: 6px;
}
.ba-label--after { background: var(--red-500, #d42020); }
.ba-thumb-img {
  width: 100%; aspect-ratio: 1/1; object-fit: cover; display: block;
}
.ba-video-wrap { position: relative; }
.ba-video-thumb { width: 100%; aspect-ratio: 1/1; object-fit: cover; display: block; }
.ba-video-badge {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.4); font-size: 2rem; color: #fff;
}
.ba-arrow-col {
  display: flex; align-items: center; justify-content: center;
  width: 28px; background: #222; color: #888; font-size: 0.8rem; flex-shrink: 0;
}

.ba-card-info { padding: 12px 14px; }
.ba-card-top { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.ba-nickname { font-size: 0.88rem; font-weight: 700; color: #fff; }
.ba-media-badge {
  font-size: 0.68rem; padding: 2px 8px; border-radius: 20px;
}
.ba-media-badge.video { background: #1d4ed8; color: #fff; }
.ba-media-badge.image { background: #065f46; color: #fff; }
.ba-stats-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 6px; }
.ba-stat { font-size: 0.75rem; color: #aaa; display: flex; align-items: center; gap: 4px; }
.ba-stat i { color: var(--red-500, #d42020); font-size: 0.7rem; }
.ba-has-comment { font-size: 0.75rem; color: #f59e0b; display: flex; align-items: center; gap: 4px; }

/* 비포애프터 상세 모달 */
.ba-detail-modal {
  position: fixed; inset: 0; background: rgba(0,0,0,0.8); z-index: 8500;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none; transition: opacity 0.25s;
}
.ba-detail-modal.open { opacity: 1; pointer-events: auto; }
.ba-detail-inner {
  background: #111; border-radius: 20px; padding: 32px 28px 28px;
  width: min(720px, 95vw); max-height: 90vh; overflow-y: auto;
  position: relative; transform: translateY(20px); transition: transform 0.25s;
}
.ba-detail-modal.open .ba-detail-inner { transform: none; }
.ba-detail-close {
  position: absolute; top: 16px; right: 18px;
  background: none; border: none; font-size: 1.3rem; color: #999; cursor: pointer;
}
.ba-detail-close:hover { color: #fff; }

.bad-nickname { font-size: 1.2rem; font-weight: 800; color: #fff; margin-bottom: 14px; }
.bad-stats { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; }
.bad-stat-item { background: #1e1e1e; border-radius: 8px; padding: 8px 14px; }
.bad-stat-label { font-size: 0.73rem; color: #888; display: block; margin-bottom: 2px; }
.bad-stat-val   { font-size: 0.88rem; font-weight: 700; color: #fff; }
.bad-media-row { display: flex; gap: 12px; margin-bottom: 20px; }
.bad-media-wrap { flex: 1; position: relative; min-width: 0; }
.bad-media-wrap .ba-label { position: relative; top: auto; left: auto; display: inline-block; margin-bottom: 8px; }
.bad-img   { width: 100%; border-radius: 10px; }
.bad-video { width: 100%; border-radius: 10px; max-height: 280px; }
.bad-comment {
  border-radius: 12px; padding: 16px 18px; margin-bottom: 14px;
}
.bad-comment--ai      { background: #1e1e2e; border-left: 3px solid #6366f1; }
.bad-comment--trainer { background: #1e2718; border-left: 3px solid #22c55e; }
.bad-comment h4 { font-size: 0.82rem; font-weight: 700; color: #ccc; margin-bottom: 8px; }
.bad-comment h4 i { margin-right: 6px; }
.bad-comment--ai h4      i { color: #6366f1; }
.bad-comment--trainer h4 i { color: #22c55e; }
.bad-comment p  { font-size: 0.84rem; color: #aaa; line-height: 1.7; margin: 0; }

.ba-preview-img   { width: 100%; border-radius: 8px; max-height: 200px; object-fit: cover; margin-top: 8px; }
.ba-preview-video { width: 100%; border-radius: 8px; max-height: 200px; margin-top: 8px; }

@media (max-width: 480px) {
  .bad-media-row { flex-direction: column; }
}

/* ==========================================================
   v2 추가 스타일 — AI 인바디 입력탭 + 사진업로드 + diet
   ========================================================== */
.ai-input-tabs { display: flex; gap: 8px; margin-bottom: 20px; }
.ait-btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 10px 22px; border-radius: 24px; font-size: 0.88rem; font-weight: 600;
  border: 2px solid #e5e7eb; background: #fff; color: #555; cursor: pointer;
  transition: all 0.18s;
}
.ait-btn:hover  { border-color: var(--red-500, #d42020); color: var(--red-500, #d42020); }
.ait-btn.active { background: var(--red-500, #d42020); border-color: var(--red-500, #d42020); color: #fff; }

/* 사진 업로드 영역 */
.ai-photo-desc { font-size: 0.84rem; color: #666; margin-bottom: 16px; line-height: 1.6; }
.ai-photo-upload-area {
  border: 2px dashed #d1d5db; border-radius: 14px; padding: 24px;
  text-align: center; cursor: pointer; transition: border-color 0.18s;
  margin-bottom: 16px; position: relative;
}
.ai-photo-upload-area:hover,
.ai-photo-upload-area.has-image { border-color: var(--red-500, #d42020); }
.ai-photo-label {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  font-size: 0.88rem; color: #888; cursor: pointer;
}
.ai-photo-label i { font-size: 2rem; color: #ccc; }
.ai-photo-sub { font-size: 0.75rem; color: #bbb; }
.ai-photo-upload-area input[type="file"] {
  position: absolute; inset: 0; opacity: 0; cursor: pointer;
}
#aiInbodyPhotoPreview {
  width: 100%; max-height: 240px; object-fit: contain;
  border-radius: 10px; margin-top: 12px;
}
.ai-field-grid--photo { grid-template-columns: 1fr 1fr; margin-top: 12px; }

/* AI 사진에서 읽은 수치 */
.ai-extracted-box {
  background: #f0f4ff; border-radius: 12px; padding: 16px 18px; margin-bottom: 16px;
}
.ai-extracted-box h4 { font-size: 0.84rem; font-weight: 700; color: #3b4fd8; margin-bottom: 12px; }
.ai-extracted-box h4 i { margin-right: 6px; }
.ai-extracted-grid { display: flex; flex-wrap: wrap; gap: 10px; }
.ae-item {
  background: #fff; border-radius: 8px; padding: 8px 14px;
  text-align: center; min-width: 90px;
}
.ae-item span    { font-size: 0.72rem; color: #888; display: block; margin-bottom: 2px; }
.ae-item strong  { font-size: 0.9rem; font-weight: 700; color: #111; }

/* 신체 나이 */
.ai-body-age { font-size: 0.84rem; color: #555; margin-top: 6px; }
.ai-body-age strong { color: var(--red-500, #d42020); }

/* AI 식단 플랜 */
.ai-diet { margin-top: 24px; }
.diet-summary-row {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  background: #f8f9fa; border-radius: 14px; padding: 16px 18px; margin-bottom: 16px;
}
.diet-cal-box { text-align: center; min-width: 120px; }
.diet-cal-label { font-size: 0.75rem; color: #888; display: block; margin-bottom: 4px; }
.diet-cal-val   { font-size: 1.5rem; font-weight: 800; color: var(--red-500, #d42020); }
.diet-macro-row { display: flex; gap: 10px; flex-wrap: wrap; }
.diet-macro-item {
  display: flex; flex-direction: column; align-items: center;
  background: #fff; border-radius: 10px; padding: 8px 16px; min-width: 80px;
  border-top: 3px solid #ccc;
}
.diet-macro-item span    { font-size: 0.72rem; color: #888; margin-bottom: 2px; }
.diet-macro-item strong  { font-size: 0.9rem; font-weight: 700; color: #111; }
.diet-macro-item.protein { border-color: #3b82f6; }
.diet-macro-item.carbs   { border-color: #f59e0b; }
.diet-macro-item.fat     { border-color: #ec4899; }

.diet-meals { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }
/* diet-meal-card v3 — 하단 스타일시트에서 override 됨 */
.diet-meal-desc { font-size: 0.82rem; color: #555; line-height: 1.6; margin: 0; }

.diet-food-lists { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; }
.diet-food-col h5 {
  font-size: 0.82rem; font-weight: 700; color: #111; margin-bottom: 10px;
  display: flex; align-items: center; gap: 6px;
}
.diet-food-col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.diet-food-col li { font-size: 0.8rem; color: #555; display: flex; align-items: center; gap: 7px; }
.diet-food-col li i { flex-shrink: 0; }

.diet-tip-box {
  background: #fffbeb; border-left: 3px solid #f59e0b; border-radius: 0 10px 10px 0;
  padding: 12px 16px; font-size: 0.84rem; color: #92400e; line-height: 1.6;
  display: flex; gap: 8px;
}
.diet-tip-box i { flex-shrink: 0; color: #f59e0b; margin-top: 2px; }

@media (max-width: 600px) {
  .diet-food-lists { grid-template-columns: 1fr; }
  .ai-field-grid--photo { grid-template-columns: 1fr; }
  .diet-summary-row { flex-direction: column; align-items: flex-start; }
}

/* ==========================================================
   v2 추가 스타일 — 가이드북 그리드
   ========================================================== */
.guidebook-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}

/* 가이드북 뷰어 모달 */
.guidebook-modal {
  position: fixed; inset: 0; background: rgba(0,0,0,0.7); z-index: 9000;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none; transition: opacity 0.25s;
}
.guidebook-modal.open { opacity: 1; pointer-events: auto; }
.guidebook-modal-inner {
  background: #fff; border-radius: 20px; padding: 32px 28px;
  width: min(760px, 96vw); max-height: 90vh; overflow-y: auto;
  position: relative; transform: translateY(20px); transition: transform 0.25s;
}
.guidebook-modal.open .guidebook-modal-inner { transform: none; }
.guidebook-modal-close {
  position: absolute; top: 16px; right: 18px; background: none;
  border: none; font-size: 1.3rem; color: #999; cursor: pointer;
}

/* ==========================================================
   v2 추가 스타일 — 토스페이먼츠 결제 UI (멤버십 섹션)
   ========================================================== */
.plan-pay-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; padding: 13px 20px; border-radius: 10px;
  background: #3182f6; color: #fff; font-size: 0.9rem; font-weight: 700;
  border: none; cursor: pointer; transition: background 0.18s, transform 0.15s;
  margin-top: 8px;
}
.plan-pay-btn:hover { background: #1d6de6; transform: translateY(-1px); }
.plan-pay-btn i { font-size: 0.95rem; }

/* SNS 공유 배너 추가 스타일 */
.sns-ig-caption-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 16px; border-radius: 20px; font-size: 0.8rem; font-weight: 600;
  background: linear-gradient(135deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
  color: #fff; border: none; cursor: pointer; transition: opacity 0.18s;
}
.sns-ig-caption-btn:hover { opacity: 0.88; }


/* ===== 운동 가이드 카드 이미지 썸네일 ===== */
.guide-card-thumb {
  width: 100%;
  height: 130px;
  overflow: hidden;
  border-radius: 10px 10px 0 0;
  background: linear-gradient(135deg, #1a1a2a 0%, #0d0d1a 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.guide-card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}
.guide-card:hover .guide-card-thumb img {
  transform: scale(1.05);
}
.guide-card-thumb--icon {
  background: linear-gradient(135deg, #1e1e2e 0%, #0d0d1a 100%);
}
.guide-card-thumb--icon i {
  font-size: 2.5rem;
  color: rgba(255,255,255,0.2);
}

/* ===== 가이드북 카드 커버 이미지 ===== */
/* ── ACERO 가이드북 카드 ─────────────────────────────── */
.guidebook-card {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 0;
  overflow: hidden;
  cursor: pointer;
  background: #fff;
  border: 1px solid rgba(0,0,0,0.07);
  border-radius: 14px;
  transition: box-shadow 0.22s ease, transform 0.22s ease, border-color 0.22s ease;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  position: relative;
}
.guidebook-card::before {
  /* 좌측 accent 라인 — 호버 시 표시 */
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--gb-color, #d42020);
  opacity: 0;
  transition: opacity 0.22s ease;
  z-index: 2;
}
.guidebook-card:hover {
  box-shadow: 0 8px 28px rgba(0,0,0,0.13);
  transform: translateY(-3px);
  border-color: rgba(0,0,0,0.12);
}
.guidebook-card:hover::before { opacity: 1; }

/* 커버 — 책 비율 (세로형) */
.guidebook-cover {
  width: 108px;
  min-height: 108px;
  flex-shrink: 0;
  overflow: hidden;
  border-radius: 12px 0 0 12px;
  background: #0f0f0f;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.guidebook-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.guidebook-cover--icon {
  background: linear-gradient(135deg, #1a1a1a 0%, #0a0a0a 100%);
}
.guidebook-cover--icon i,
.guidebook-icon-fallback {
  font-size: 2.2rem;
  color: rgba(255,255,255,0.45);
}

/* 정보 영역 */
.guidebook-info {
  flex: 1;
  padding: 14px 16px 12px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.guidebook-title {
  font-size: 0.95rem;
  font-weight: 800;
  color: #111;
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: -0.02em;
}
.guidebook-desc {
  font-size: 0.78rem;
  color: #6b7280;
  line-height: 1.45;
  margin-bottom: 8px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  flex: 1;
}
.guidebook-meta {
  font-size: 0.73rem;
  color: var(--gb-color, #9ca3af);
  display: flex;
  align-items: center;
  gap: 5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  opacity: 0.85;
  margin-top: auto;
}

/* "준비 중" 섹션 */
.gb-section-coming-soon {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  background: rgba(0,0,0,0.03);
  border-radius: 10px;
  color: #9ca3af;
  font-size: 0.85rem;
  margin-top: 8px;
}
.gb-section-coming-soon i { font-size: 1.1rem; color: #d1d5db; }

/* ===== 가이드북 필터 바 ===== */
.gb-filter-bar {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 20px;
}
.gb-filter-goals {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.gb-goal-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  border: 1.5px solid #e5e7eb;
  background: #fff;
  border-radius: 24px;
  padding: 7px 14px;
  font-size: 0.82rem;
  font-weight: 600;
  color: #374151;
  cursor: pointer;
  transition: all 0.18s;
}
.gb-goal-btn:hover {
  border-color: #6366f1;
  color: #6366f1;
  background: #f5f3ff;
}
.gb-goal-btn.active {
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 2px 8px rgba(99,102,241,0.3);
}
.gb-goal-icon { font-size: 1rem; }
.gb-search-wrap {
  position: relative;
  width: 100%;
}
.gb-search-icon {
  position: absolute;
  left: 13px;
  top: 50%;
  transform: translateY(-50%);
  color: #9ca3af;
  font-size: 0.85rem;
}
#gbSearchInput {
  width: 100%;
  border: 1.5px solid #e5e7eb;
  border-radius: 24px;
  padding: 10px 16px 10px 36px;
  font-size: 0.88rem;
  color: #111;
  outline: none;
  background: #fff;
  box-sizing: border-box;
  transition: border-color 0.2s;
}
#gbSearchInput:focus {
  border-color: #6366f1;
  box-shadow: 0 0 0 3px rgba(99,102,241,0.12);
}
.gb-active-filter {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: 10px;
  padding: 8px 14px;
  font-size: 0.82rem;
  color: #1d4ed8;
  margin-bottom: 12px;
}
.gb-filter-reset {
  background: none;
  border: none;
  color: #ef4444;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  margin-left: auto;
  padding: 2px 6px;
  border-radius: 6px;
}
.gb-filter-reset:hover { background: #fef2f2; }
.gb-filter-reset-btn {
  background: linear-gradient(135deg,#6366f1,#8b5cf6);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 8px 18px;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  margin-top: 10px;
}
.gb-empty-state {
  text-align: center;
  padding: 40px 20px;
  color: #9ca3af;
  font-size: 0.9rem;
}

@media (min-width: 640px) {
  .gb-filter-bar { flex-direction: row; align-items: center; }
  .gb-search-wrap { width: 280px; flex-shrink: 0; }
  .gb-filter-goals { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 2px; }
}

/* ===== Paywall 잠금 카드 ===== */
.guide-card--locked {
  opacity: 0.75;
  cursor: pointer;
}
.guide-card--locked:hover {
  opacity: 1;
  border-color: #ef4444;
}
.guide-card-thumb--locked {
  background: linear-gradient(135deg, #1e1e2e 0%, #111 100%);
  height: 130px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lock-overlay {
  background: rgba(239, 68, 68, 0.15);
  border: 2px solid rgba(239, 68, 68, 0.3);
  border-radius: 50%;
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  color: #ef4444;
}

/* ===== 회원 포털 링크 버튼 (헤더 등) ===== */
.member-portal-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: linear-gradient(135deg, #111, #1e1e2e);
  color: #fff;
  border: 1.5px solid rgba(255,255,255,0.15);
  border-radius: 10px;
  padding: 7px 16px;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.2s;
}
.member-portal-btn:hover {
  background: linear-gradient(135deg, #1e1e2e, #2d2d44);
  transform: translateY(-1px);
}

/* ===== 전역 모바일 반응형 미디어 오버플로우 수정 ===== */
/* 이미지/비디오 전체 오버플로우 방지 */
img, video, iframe {
  max-width: 100%;
  height: auto;
  box-sizing: border-box;
}

/* 트레이너 매거진 갤러리 모바일 수정 */
.tr-mag-gallery {
  overflow: hidden;
  max-width: 100%;
}
.tr-mag-gallery > div {
  min-width: 0;
}

/* 트레이너 카드 모달 오버플로우 방지 */
.tr-modal {
  overflow-x: hidden;
  box-sizing: border-box;
}
.tr-modal-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 6px;
  max-width: 100%;
}
.tr-modal-gallery-item {
  aspect-ratio: 1/1;
  min-width: 0;
  border-radius: 8px;
  overflow: hidden;
}

/* 가이드북 모달 전체 오버플로우 방지 */
#guidebookModal .gb-modal-inner,
#guidebookModal .gb-modal-body {
  overflow-x: hidden;
  box-sizing: border-box;
  max-width: 100%;
}

/* BA(비포애프터) 비디오/이미지 모바일 */
.ba-video-thumb, .ba-img-thumb {
  max-width: 100%;
  height: auto;
}
.bad-video {
  max-width: 100%;
  height: auto;
}

/* 슬라이더 내부 오버플로우 */
.fs-inner, [class*="-inner"] {
  overflow-x: hidden;
}

@media (max-width: 480px) {
  /* 필터 바 모바일 */
  .gb-filter-goals {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
  }
  .gb-goal-btn {
    font-size: 0.75rem;
    padding: 6px 12px;
  }
  #gbSearchInput {
    font-size: 0.85rem;
  }
  /* 트레이너 매거진 갤러리 모바일 축소 */
  .tr-modal-gallery {
    grid-template-columns: repeat(2, 1fr);
  }
  /* 움직임개선 부위 그리드 */
  .gb-area-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* ==========================================================
   AI 인바디 분석 v3 — 복수목표·생활패턴·식단조합·루틴목적
   ========================================================== */

/* 복수 선택 목표 버튼 — 체크마크 효과 */
.ai-goal-btns--multi .ai-goal-btn.active::before {
  content: '✓ ';
  font-weight: 900;
}

/* 생활 패턴 입력 블록 */
.ai-schedule-block {
  background: linear-gradient(135deg, #f0f4ff 0%, #f5f3ff 100%);
  border: 1px solid #c7d2fe;
  border-radius: 12px;
  padding: 14px 16px !important;
  margin-top: 4px;
}
.ai-schedule-block > label {
  color: #3730a3 !important;
  font-weight: 700 !important;
  margin-bottom: 12px !important;
}
.ai-schedule-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
.ai-schedule-item {
  background: #fff;
  border: 1px solid #ddd6fe;
  border-radius: 10px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ai-sched-icon  { font-size: 1.1rem; }
.ai-sched-label { font-size: 0.75rem; color: #6b7280; font-weight: 600; }
.ai-sched-input {
  border: 1px solid #e0e0e0 !important;
  border-radius: 6px !important;
  padding: 6px 8px !important;
  font-size: 0.85rem !important;
  background: #fff !important;
  color: #111 !important;
  width: 100%;
}

/* 식단 카드 개선 */
.diet-meal-card {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 10px;
  transition: box-shadow 0.15s;
}
.diet-meal-card:hover { box-shadow: 0 3px 12px rgba(0,0,0,0.08); }
.diet-meal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #f8f9fa;
  padding: 10px 14px;
  border-bottom: 1px solid #f0f0f0;
}
.diet-meal-left  { display: flex; align-items: center; gap: 10px; }
.diet-meal-right { display: flex; align-items: center; gap: 8px; }
.diet-meal-name  { font-weight: 700; font-size: 0.9rem; color: #111; }
.diet-meal-time  { font-size: 0.78rem; color: #6366f1; background: #eef2ff; padding: 2px 8px; border-radius: 20px; }
.diet-meal-cal   { font-weight: 700; font-size: 0.88rem; color: var(--red-500, #d42020); }
.diet-meal-cal small { font-size: 0.72rem; font-weight: 400; }
.diet-meal-pro   { font-size: 0.78rem; color: #16a34a; background: #f0fdf4; padding: 2px 8px; border-radius: 20px; }
.diet-meal-pro small { font-size: 0.7rem; }
.diet-meal-menu  {
  padding: 10px 14px 8px;
  font-size: 0.85rem;
  color: #374151;
  line-height: 1.5;
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
/* alt 대체 옵션이 있을 때 menu 하단 패딩 축소 */
.diet-meal-card:has(.diet-meal-alt) .diet-meal-menu {
  padding-bottom: 4px;
}

/* 칼로리/단위 표기 개선 */
.diet-cal-val small { font-size: 0.75rem; font-weight: 400; color: #888; margin-left: 1px; }
.diet-macro-item strong small { font-size: 0.72rem; font-weight: 400; color: #888; }

/* 운동 루틴 — 목적 배지 */
.ai-purpose-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 20px;
}
.ai-day-header {
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}
.ai-day-header-top {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.ai-day-header-sub {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.ai-day-meta { margin-left: 0 !important; }

/* 목표 칼로리 단위 색 */
.diet-cal-box .diet-cal-val {
  font-size: 2rem;
  font-weight: 800;
  color: var(--red-500, #d42020);
  line-height: 1;
}
.diet-cal-box .diet-cal-val small { font-size: 1rem; color: #888; font-weight: 500; }

/* 모바일 반응형 */
@media (max-width: 480px) {
  .ai-schedule-grid { grid-template-columns: 1fr; }
  .diet-meal-header { flex-direction: column; align-items: flex-start; gap: 6px; }
  .diet-meal-right  { width: 100%; justify-content: flex-end; }
}

/* ── 루틴 목적 선택 버튼 (입력 폼) ── */
.ai-purpose-select-block {
  margin-top: 4px;
}
.ai-purpose-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}
.ai-purpose-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border: 1.5px solid #d1d5db;
  border-radius: 20px;
  background: #fff;
  color: #4b5563;
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.18s;
}
.ai-purpose-btn:hover {
  border-color: #6366f1;
  color: #6366f1;
  background: #eef2ff;
}
.ai-purpose-btn.active {
  background: #6366f1;
  border-color: #6366f1;
  color: #fff;
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(99,102,241,0.25);
}
.ai-purpose-btn i { font-size: 0.8rem; }

/* ── 루틴 목적 필터 버튼 (결과 화면) ── */
.ai-routine-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
  padding: 12px 14px;
  background: #f8fafc;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
}
.ai-filter-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 13px;
  border: 1.5px solid #d1d5db;
  border-radius: 16px;
  background: #fff;
  color: #6b7280;
  font-size: 0.82rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.16s;
}
.ai-filter-btn:hover {
  border-color: var(--filter-color, #6366f1);
  color: var(--filter-color, #6366f1);
  background: #f5f5ff;
}
.ai-filter-btn.active {
  border-color: var(--filter-color, #6366f1);
  background: var(--filter-color, #6366f1);
  color: #fff;
  font-weight: 700;
}
.ai-filter-btn[data-filter="all"].active {
  --filter-color: #374151;
  background: #374151;
  border-color: #374151;
}
.ai-days-container {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

@media (max-width: 480px) {
  .ai-purpose-btns { gap: 6px; }
  .ai-purpose-btn { padding: 6px 11px; font-size: 0.8rem; }
  .ai-routine-filter { gap: 6px; padding: 10px 12px; }
  .ai-filter-btn { padding: 5px 10px; font-size: 0.78rem; }
}

/* ── 루틴 설정 블록 (횟수 + 목적 통합) ── */
.ai-routine-config-block {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 18px 16px;
  background: #f8fafc;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  margin-top: 4px;
}
.ai-routine-config-row {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ai-routine-config-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.9rem;
  font-weight: 700;
  color: #374151;
}
.ai-routine-config-label small {
  font-weight: 400;
  color: #6b7280;
  font-size: 0.78rem;
}

/* ── 주간 운동 횟수 선택 버튼 ── */
.ai-days-selector {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.ai-days-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 64px;
  padding: 8px 4px 7px;
  border: 2px solid #d1d5db;
  border-radius: 12px;
  background: #fff;
  cursor: pointer;
  transition: all 0.18s;
  gap: 2px;
}
.ai-days-btn:hover {
  border-color: #6366f1;
  background: #eef2ff;
}
.ai-days-btn.active {
  border-color: #6366f1;
  background: #6366f1;
  box-shadow: 0 3px 10px rgba(99,102,241,0.3);
}
.ai-days-num {
  font-size: 1.45rem;
  font-weight: 800;
  line-height: 1;
  color: #374151;
}
.ai-days-btn.active .ai-days-num { color: #fff; }
.ai-days-unit {
  font-size: 0.7rem;
  font-weight: 600;
  color: #6b7280;
  line-height: 1;
}
.ai-days-btn.active .ai-days-unit { color: rgba(255,255,255,0.8); }
.ai-days-desc {
  font-size: 0.68rem;
  color: #9ca3af;
  font-weight: 500;
  line-height: 1;
}
.ai-days-btn.active .ai-days-desc { color: rgba(255,255,255,0.75); }

/* ── 횟수 힌트 메시지 ── */
.ai-days-hint {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8rem;
  color: #6366f1;
  background: #eef2ff;
  border: 1px solid #c7d2fe;
  border-radius: 8px;
  padding: 7px 12px;
  margin: 0;
}
.ai-days-hint i { font-size: 0.78rem; flex-shrink: 0; }

/* ── 결과 화면: 주 N회 뱃지 ── */
.ai-routine-days-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  background: #6366f1;
  color: #fff;
  border-radius: 20px;
  font-size: 0.82rem;
  font-weight: 700;
  white-space: nowrap;
}
.ai-routine-filter-divider {
  width: 1px;
  height: 24px;
  background: #d1d5db;
  flex-shrink: 0;
  align-self: center;
}

@media (max-width: 480px) {
  .ai-days-btn { width: 54px; padding: 7px 3px 6px; }
  .ai-days-num { font-size: 1.25rem; }
  .ai-routine-filter-divider { display: none; }
}

/* ── 식단 스타일 선택 카드 ── */
.ai-meal-level-cards {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.ai-meal-level-card {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 180px;
  padding: 12px 14px;
  border: 2px solid #e5e7eb;
  border-radius: 12px;
  background: #fff;
  cursor: pointer;
  text-align: left;
  transition: all 0.18s;
}
.ai-meal-level-card:hover {
  border-color: #6366f1;
  background: #fafafe;
}
.ai-meal-level-card.active {
  border-color: #6366f1;
  background: #eef2ff;
  box-shadow: 0 2px 10px rgba(99,102,241,0.2);
}
.ai-mlc-icon {
  font-size: 1.6rem;
  line-height: 1;
  flex-shrink: 0;
}
.ai-mlc-body {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.ai-mlc-body strong {
  font-size: 0.88rem;
  font-weight: 700;
  color: #111827;
  display: flex;
  align-items: center;
  gap: 5px;
}
.ai-mlc-body strong em {
  font-style: normal;
  font-size: 0.7rem;
  font-weight: 600;
  background: #6366f1;
  color: #fff;
  border-radius: 8px;
  padding: 1px 6px;
}
.ai-meal-level-card.active .ai-mlc-body strong { color: #4338ca; }
.ai-mlc-body span {
  font-size: 0.75rem;
  color: #6b7280;
  line-height: 1.4;
}
.ai-meal-level-card.active .ai-mlc-body span { color: #4338ca; }

/* ── 식단 섹션 타이틀 행 (제목 + 레벨 뱃지) ── */
.ai-section-title-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.diet-level-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 16px;
  font-size: 0.78rem;
  font-weight: 700;
  white-space: nowrap;
}

/* ── 끼니 카드 — 대체 옵션 alt 행 (하단 강화 스타일로 대체됨) ── */
/* .diet-meal-alt 스타일은 파일 하단 "식단 스타일별 카드 테마 차별화" 섹션에서 정의 */

@media (max-width: 600px) {
  .ai-meal-level-card { min-width: 140px; padding: 10px 11px; gap: 9px; }
  .ai-mlc-icon { font-size: 1.3rem; }
  .ai-mlc-body strong { font-size: 0.82rem; }
  .ai-mlc-body span { font-size: 0.7rem; }
}

/* ══════════════════════════════════════════════
   식단 스타일별 카드 테마 차별화
   data-meal-level 속성으로 끼니 카드 테마 적용
══════════════════════════════════════════════ */

/* 식단 컨테이너 — 레벨 속성 */
.diet-meals[data-level="easy"]    { --meal-accent: #0ea5e9; --meal-accent-bg: #f0f9ff; --meal-accent-light: #bae6fd; }
.diet-meals[data-level="balanced"]{ --meal-accent: #22c55e; --meal-accent-bg: #f0fdf4; --meal-accent-light: #bbf7d0; }
.diet-meals[data-level="strict"]  { --meal-accent: #8b5cf6; --meal-accent-bg: #f5f3ff; --meal-accent-light: #ddd6fe; }

/* 레벨 테마 적용된 끼니 카드 상단 강조 선 */
.diet-meals[data-level] .diet-meal-card {
  border-top: 3px solid var(--meal-accent, #e5e7eb);
}
.diet-meals[data-level] .diet-meal-header {
  background: var(--meal-accent-bg, #f8f9fa);
}
.diet-meals[data-level] .diet-meal-name {
  color: var(--meal-accent, #111);
}

/* ── 간편식 전용: 편의점 태그 ── */
.diet-meal-easy-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 7px;
  background: #e0f2fe;
  color: #0369a1;
  border-radius: 10px;
  font-size: 0.72rem;
  font-weight: 600;
  white-space: nowrap;
}

/* ── 대체 옵션(alt) 블록 — 강화 디자인 ── */
.diet-meal-alt {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 8px 14px 10px;  /* 기존 10px 14px에서 카드 내부 여백으로 변경 */
  padding: 9px 12px;
  background: linear-gradient(135deg, #fffbeb 0%, #fef9c3 100%);
  border: 1px solid #fde68a;
  border-left: 3px solid #f59e0b;
  border-radius: 8px;
  font-size: 0.8rem;
  color: #78350f;
  line-height: 1.5;
  transition: background 0.15s;
}
.diet-meal-alt:hover { background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%); }
.diet-meal-alt i {
  color: #f59e0b;
  font-size: 0.82rem;
  margin-top: 2px;
  flex-shrink: 0;
}
.diet-meal-alt strong {
  color: #92400e;
  font-size: 0.78rem;
  display: block;
  margin-bottom: 2px;
}
.diet-meal-alt-label {
  font-size: 0.72rem;
  font-weight: 700;
  color: #b45309;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  margin-bottom: 2px;
  display: block;
}
.diet-meal-alt-text {
  font-size: 0.82rem;
  color: #78350f;
  line-height: 1.5;
}

/* ── 식단 레벨 뱃지 — 개선 ── */
.diet-level-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 700;
  white-space: nowrap;
  box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}

/* ── 식단 팁 박스 강화 ── */
.diet-tip-box {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: linear-gradient(135deg, #fff7ed, #ffedd5);
  border: 1px solid #fed7aa;
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 0.83rem;
  color: #7c2d12;
  line-height: 1.55;
  margin-top: 4px;
}

/* ── 간편식 레벨: 대안 블록 파란색 테마 ── */
.diet-meals[data-level="easy"] .diet-meal-alt {
  background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
  border-color: #93c5fd;
  border-left-color: #3b82f6;
  color: #1e3a8a;
}
.diet-meals[data-level="easy"] .diet-meal-alt i {
  color: #3b82f6;
}
.diet-meals[data-level="easy"] .diet-meal-alt-label {
  color: #1d4ed8;
}
.diet-meals[data-level="easy"] .diet-meal-alt-text {
  color: #1e3a8a;
}

/* ── 철저관리식 레벨: 대안 블록 보라색 테마 ── */
.diet-meals[data-level="strict"] .diet-meal-alt {
  background: linear-gradient(135deg, #faf5ff 0%, #ede9fe 100%);
  border-color: #c4b5fd;
  border-left-color: #8b5cf6;
  color: #4c1d95;
}
.diet-meals[data-level="strict"] .diet-meal-alt i {
  color: #8b5cf6;
}
.diet-meals[data-level="strict"] .diet-meal-alt-label {
  color: #6d28d9;
}
.diet-meals[data-level="strict"] .diet-meal-alt-text {
  color: #4c1d95;
}

/* ── 영양 목표 요약 바 ── */
.diet-nutrient-bar-wrap {
  margin: 4px 0 16px;
}
.diet-nutrient-bar-label {
  display: flex;
  justify-content: space-between;
  font-size: 0.75rem;
  color: #6b7280;
  margin-bottom: 4px;
}
.diet-nutrient-bar-label strong { color: #374151; }
.diet-nutrient-bar-track {
  height: 6px;
  background: #f1f5f9;
  border-radius: 99px;
  overflow: hidden;
}
.diet-nutrient-bar-fill {
  height: 100%;
  border-radius: 99px;
  transition: width 0.6s ease;
}

@media (max-width: 600px) {
  .diet-meal-alt { margin: 6px 10px 8px; padding: 8px 10px; }
  .diet-meal-easy-tag { font-size: 0.68rem; padding: 1px 6px; }
}

/* ═══════════════════════════════════════════════════
   트레이너 지점 필터 탭
═══════════════════════════════════════════════════ */
#trBranchFilterWrap {
  width: 100%;
  max-width: 1360px;
  margin: 0 auto;
  padding: 32px var(--section-px, 40px) 0;
  box-sizing: border-box;
}

.tr-branch-filter {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 8px;
  width: 100%;
  margin: 0 auto 44px;
  padding: 6px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 20px;
  box-sizing: border-box;
}

.tr-bf-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 16px;
  border-radius: 14px;
  border: none;
  background: transparent;
  color: rgba(255,255,255,0.5);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, box-shadow 0.2s;
  letter-spacing: 0.01em;
  white-space: nowrap;
  min-height: 52px;
  font-family: inherit;
}

.tr-bf-btn i {
  font-size: 0.82rem;
  flex-shrink: 0;
}

.tr-bf-btn:hover {
  background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.85);
}

.tr-bf-btn.active {
  background: #e53935;
  color: #fff;
  box-shadow: 0 4px 16px rgba(229,57,53,0.40);
}

/* 카운트 뱃지 */
.tr-bf-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 50px;
  background: rgba(255,255,255,0.15);
  color: rgba(255,255,255,0.7);
  font-size: 0.70rem;
  font-weight: 700;
  line-height: 1;
  flex-shrink: 0;
}
.tr-bf-btn.active .tr-bf-count {
  background: rgba(255,255,255,0.25);
  color: #fff;
}

/* 모바일: 가로 스크롤 필터 탭 */
@media (max-width: 768px) {
  #trBranchFilterWrap {
    padding: 20px 12px 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .tr-branch-filter {
    gap: 6px;
    padding: 5px;
    margin: 0 auto 28px;
    border-radius: 16px;
    flex-wrap: nowrap;
    min-width: max-content;
    width: auto;
    justify-content: flex-start;
  }
  .tr-bf-btn {
    padding: 11px 14px;
    font-size: 0.80rem;
    gap: 5px;
    min-height: 46px;
    border-radius: 11px;
    flex: 0 0 auto;
  }
  .tr-bf-count {
    min-width: 17px;
    height: 17px;
    font-size: 0.62rem;
  }
}

@media (max-width: 480px) {
  .tr-bf-btn {
    padding: 10px 12px;
    font-size: 0.76rem;
  }
}

/* ═══════════════════════════════════════════════════
   모바일 섹션 퀵탐색 바
═══════════════════════════════════════════════════ */
.mob-quicknav {
  display: none; /* 데스크탑: 숨김 */
}

@media (max-width: 768px) {
  /* ─────────────────────────────────────────────────
     position: fixed — body overflow-x:hidden 때문에
     sticky가 동작하지 않는 문제를 fixed로 완전 해결
  ───────────────────────────────────────────────── */
  .mob-quicknav {
    display: flex;
    align-items: stretch;
    gap: 0;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    background: #0d0d0d;
    border-bottom: 1px solid rgba(255,255,255,0.10);
    /* fixed: body overflow 영향 없이 항상 상단 고정 */
    position: fixed;
    top: 62px;          /* site-nav 높이 62px 바로 아래 */
    left: 0;
    right: 0;
    z-index: 940;       /* site-nav(950) 아래, 모달(910) 위 */
    padding: 0;
    box-shadow: 0 2px 12px rgba(0,0,0,0.5);
    /* 백드롭 블러 약간 추가 */
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }
  .mob-quicknav::-webkit-scrollbar { display: none; }

  /* 퀵탐색이 fixed 62px+44px=106px 를 차지하므로
     첫 번째 섹션(#home)이 가려지지 않게 상단 패딩 */
  body.has-quicknav > *:first-child {
    padding-top: 106px;
  }
  /* hero 섹션은 자체 full-height 이므로 별도 처리 */
  body.has-quicknav .hero-branch-section {
    padding-top: 0;
    /* scroll-margin으로 앵커 위치 보정 */
    scroll-margin-top: 108px;
  }
  body.has-quicknav section[id],
  body.has-quicknav div[id] {
    scroll-margin-top: 108px;
  }

  .mqn-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    flex: 1 0 auto;
    min-width: 60px;
    padding: 9px 6px 8px;
    border: none;
    border-bottom: 2px solid transparent;
    background: transparent;
    color: rgba(255,255,255,0.40);
    font-size: 0.60rem;
    font-weight: 600;
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s, background 0.15s;
    white-space: nowrap;
    letter-spacing: 0.03em;
    font-family: inherit;
  }

  .mqn-btn i {
    font-size: 1.05rem;
    margin-bottom: 1px;
    transition: color 0.15s;
  }

  .mqn-btn:hover {
    color: rgba(255,255,255,0.75);
    background: rgba(255,255,255,0.05);
  }

  .mqn-btn.active {
    color: #e53935;
    border-bottom-color: #e53935;
    background: rgba(229,57,53,0.07);
  }

  .mqn-btn.active i {
    color: #e53935;
  }
}

/* ═══════════════════════════════════════════════════
   실제 후기 — 작성폼 & 목록
═══════════════════════════════════════════════════ */

/* 후기 작성하기 버튼 */
.btn-write-review {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 32px;
  border-radius: 50px;
  border: 2px solid rgba(229,57,53,0.6);
  background: transparent;
  color: #fff;
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, transform 0.15s;
  letter-spacing: 0.03em;
  font-family: inherit;
}
.btn-write-review:hover {
  background: #e53935;
  border-color: #e53935;
  transform: translateY(-2px);
}
.btn-write-review.active {
  background: rgba(229,57,53,0.15);
  border-color: #e53935;
}

/* 후기 작성 폼 카드 */
.rv-form-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 20px;
  padding: 32px 28px;
}
.rv-form-title {
  font-size: 1.1rem;
  font-weight: 800;
  color: #fff;
  margin: 0 0 6px;
}
.rv-form-desc {
  font-size: 0.82rem;
  color: rgba(255,255,255,0.45);
  margin: 0 0 24px;
}
.rv-form-row {
  margin-bottom: 18px;
}
.rv-label {
  display: block;
  font-size: 0.80rem;
  font-weight: 700;
  color: rgba(255,255,255,0.7);
  margin-bottom: 7px;
  letter-spacing: 0.02em;
}
.rv-req { color: #e53935; margin-left: 2px; }

.rv-input {
  width: 100%;
  box-sizing: border-box;
  background: rgba(255,255,255,0.06);
  border: 1.5px solid rgba(255,255,255,0.12);
  border-radius: 10px;
  padding: 11px 14px;
  color: #fff;
  font-size: 0.88rem;
  font-family: inherit;
  transition: border-color 0.2s;
  outline: none;
}
.rv-input:focus { border-color: #e53935; }
.rv-input option { background: #1e1e1e; color: #fff; }
.rv-textarea { resize: vertical; min-height: 110px; line-height: 1.6; }
.rv-char-count {
  text-align: right;
  font-size: 0.72rem;
  color: rgba(255,255,255,0.35);
  margin-top: 4px;
}

/* 별점 */
.rv-stars-wrap {
  display: flex;
  gap: 4px;
  cursor: pointer;
}
.rv-star {
  font-size: 1.8rem;
  color: rgba(255,255,255,0.2);
  transition: color 0.15s, transform 0.1s;
  user-select: none;
}
.rv-star.active { color: #f59e0b; }
.rv-star:hover  { transform: scale(1.15); }

/* 파일 업로드 */
.rv-file-label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 10px 18px;
  border-radius: 10px;
  border: 1.5px dashed rgba(255,255,255,0.25);
  color: rgba(255,255,255,0.6);
  font-size: 0.84rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s;
  font-family: inherit;
}
.rv-file-label:hover { border-color: #e53935; color: #e53935; }
.rv-media-preview-img {
  max-width: 180px;
  max-height: 140px;
  border-radius: 10px;
  object-fit: cover;
  border: 1.5px solid rgba(255,255,255,0.12);
}

/* 폼 버튼 */
.rv-form-actions {
  display: flex;
  gap: 10px;
  margin-top: 8px;
}
.rv-btn-cancel {
  flex: 1;
  padding: 13px;
  border-radius: 10px;
  border: 1.5px solid rgba(255,255,255,0.15);
  background: transparent;
  color: rgba(255,255,255,0.6);
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.2s;
}
.rv-btn-cancel:hover { background: rgba(255,255,255,0.06); }
.rv-btn-submit {
  flex: 2;
  padding: 13px;
  border-radius: 10px;
  border: none;
  background: #e53935;
  color: #fff;
  font-size: 0.88rem;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  transition: background 0.2s, transform 0.15s;
}
.rv-btn-submit:hover { background: #c62828; transform: translateY(-1px); }
.rv-btn-submit:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }

.rv-msg {
  margin-top: 12px;
  font-size: 0.84rem;
  min-height: 20px;
  text-align: center;
  font-weight: 600;
}
.rv-msg.ok  { color: #4ade80; }
.rv-msg.err { color: #f87171; }

/* 로딩 */
.rv-loading {
  grid-column: 1/-1;
  text-align: center;
  padding: 40px;
  color: rgba(255,255,255,0.35);
  font-size: 0.9rem;
}
.rv-empty {
  grid-column: 1/-1;
  text-align: center;
  padding: 48px 20px;
  color: rgba(255,255,255,0.3);
  font-size: 0.9rem;
}
.rv-empty i { font-size: 2.5rem; display: block; margin-bottom: 12px; opacity: 0.5; }

/* 후기 카드 — 미디어 있을 때 */
.testi-card.has-media {
  padding: 0;
  overflow: hidden;
}
.testi-card.has-media .rv-card-media {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  display: block;
}
.testi-card.has-media .rv-card-body {
  padding: 18px 20px 20px;
}
.rv-branch-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  background: rgba(229,57,53,0.15);
  border: 1px solid rgba(229,57,53,0.3);
  border-radius: 20px;
  font-size: 0.70rem;
  font-weight: 700;
  color: #e57373;
  margin-bottom: 8px;
}

@media (max-width: 600px) {
  .rv-form-card { padding: 22px 16px; }
  .rv-form-actions { flex-direction: column; }
  .rv-star { font-size: 1.5rem; }
}