/* =====================================================
   단체야놀자 서비스소개 — style.css
   ===================================================== */

/* ── 1. CSS 변수 (디자인 토큰) ── */
:root {
  --bg:          #080d18;
  --teal:        #4fd1c5;
  --teal-dim:    rgba(79, 209, 197, 0.15);
  --teal-border: rgba(79, 209, 197, 0.3);
  --text:        #f0f4f8;
  --text-sub:    #8899aa;
  --text-dim:    rgba(240, 244, 248, 0.45);
  --glass:       rgba(255, 255, 255, 0.04);
  --glass-hover: rgba(255, 255, 255, 0.07);
  --border:      rgba(255, 255, 255, 0.08);
  --border-md:   rgba(255, 255, 255, 0.12);
  --slide-w:     1123px;
  --slide-h:     794px;
  --pad-x:       80px;
  --pad-y:       56px;
  --radius:      16px;
  --radius-sm:   10px;
  --ease:        cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── 2. 리셋 & 기본 ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: 'Pretendard', -apple-system, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.7;
  letter-spacing: -0.02em;
  overflow: hidden;
  transition: background-color 1s var(--ease);
}

img { max-width: 100%; display: block; }
a { text-decoration: none; }
ul { list-style: none; }

/* ── 3. Three.js 캔버스 ── */
#bg {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  z-index: 0;
  pointer-events: none;
}

/* ── 4. UI 컨트롤 ── */
.ui-fullscreen {
  position: fixed;
  top: 24px; right: 24px;
  z-index: 100;
  width: 40px; height: 40px;
  background: var(--glass);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text-sub);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.2s;
}
.ui-fullscreen:hover { background: var(--glass-hover); color: var(--text); }
.ui-fullscreen svg { width: 18px; height: 18px; }

.ui-counter {
  position: fixed;
  bottom: 24px; right: 32px;
  z-index: 100;
  font-size: 13px;
  color: var(--text-dim);
  letter-spacing: 0.05em;
}
.ui-home {
  position: fixed;
  bottom: 16px; right: 88px;
  z-index: 100;
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 1px solid var(--glass-border);
  background: var(--glass);
  color: var(--text-dim);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
  backdrop-filter: blur(8px);
}
.ui-home:hover { background: var(--glass-hover); color: var(--teal); border-color: var(--teal); }
.ui-home svg { width: 16px; height: 16px; }

.ui-dots {
  position: fixed;
  bottom: 20px;
  left: 50%; transform: translateX(-50%);
  z-index: 100;
  display: flex;
  gap: 8px;
  align-items: center;
}
.dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--border-md);
  border: none;
  cursor: pointer;
  transition: all 0.3s;
  padding: 0;
}
.dot.active {
  background: var(--teal);
  width: 22px;
  border-radius: 3px;
}

.ui-arrow {
  position: fixed;
  top: 50%; transform: translateY(-50%);
  z-index: 100;
  width: 44px; height: 44px;
  background: var(--glass);
  border: 1px solid var(--border);
  border-radius: 50%;
  color: var(--text-sub);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.2s;
  opacity: 0.6;
}
.ui-arrow:hover { opacity: 1; background: var(--glass-hover); color: var(--text); }
.ui-arrow svg { width: 20px; height: 20px; }
.ui-arrow-left  { left: 20px; }
.ui-arrow-right { right: 20px; }

/* ── 슬라이드별 CSS 배경 오버레이 ── */
/* 공통: 슬라이드 ::before/::after는 콘텐츠 위에 올라오지 않게 z-index: 0 */

/* ─────────────────────────────────────────
   슬라이드별 도트 격자 패턴 — 청록 단일 톤
   크기 / 간격 / 방향 / 속도 변주
   ───────────────────────────────────────── */

/* Slide 1 - 공감A: 중간 도트, 좌상단 대각선 이동, 보통 속도 */
#slide-1::before {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: radial-gradient(circle, rgba(79,209,197,0.17) 1.5px, transparent 1.5px);
  background-size: 36px 36px;
  animation: dotDiagUL 8s linear infinite;
}

/* Slide 2 - 공감B: 작은 도트, 오른쪽으로 흘러감, 느리고 희미 */
#slide-2::before {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: radial-gradient(circle, rgba(79,209,197,0.10) 1px, transparent 1px);
  background-size: 52px 52px;
  animation: dotRight 14s linear infinite;
}

/* Slide 2-1 - 혼자홍보한계: 중간 도트, 아래로 흘러감, 보통 밀도 */
#slide-2-1::before {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: radial-gradient(circle, rgba(79,209,197,0.11) 1.5px, transparent 1.5px);
  background-size: 56px 56px;
  animation: dotDown 16s linear infinite;
}

/* Slide 3 - 시장공백: 크고 성긴 도트, 매우 느리게, 희미 */
#slide-3::before {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: radial-gradient(circle, rgba(79,209,197,0.07) 2px, transparent 2px);
  background-size: 72px 72px;
  animation: dotDiagDR 20s linear infinite;
}

/* Slide 4 - 플랫폼구조(D3): 성긴 도트, 천천히 대각선 */
#slide-4::before {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: radial-gradient(circle, rgba(79,209,197,0.10) 1.5px, transparent 1.5px);
  background-size: 48px 48px;
  animation: dotDiagDR 18s linear infinite;
}

/* Slide 5 - 세가지방식: 촘촘한 도트, 아래로 내려감 */
#slide-5::before {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: radial-gradient(circle, rgba(79,209,197,0.14) 1px, transparent 1px);
  background-size: 28px 28px;
  animation: dotDown 6s linear infinite;
}

/* Slide 6 - 업종별: 기준 패턴, 밀도 높음, 대각선 */
#slide-6::before {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: radial-gradient(circle, rgba(79,209,197,0.15) 1px, transparent 1px);
  background-size: 24px 24px;
  animation: dotDiagDR 10s linear infinite;
}

/* Slide 6-1 - 영업자에디터: 중간 도트, 오른쪽으로 흘러감 */
#slide-6-1::before {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: radial-gradient(circle, rgba(79,209,197,0.12) 1px, transparent 1px);
  background-size: 40px 40px;
  animation: dotRight 12s linear infinite;
}

/* Slide 7 - 관리자화면: 중간 도트, 위로 올라감, 보통 */
#slide-7::before {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: radial-gradient(circle, rgba(79,209,197,0.16) 1.5px, transparent 1.5px);
  background-size: 40px 40px;
  animation: dotUp 7s linear infinite;
}

/* Slide 7-1 - 영업자중앙관리: 중간 도트, 오른쪽으로 흐름 */
#slide-7-1::before {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: radial-gradient(circle, rgba(79,209,197,0.13) 1.5px, transparent 1.5px);
  background-size: 38px 38px;
  animation: dotRight 10s linear infinite;
}

/* Slide 8 - 플랫폼비전: 중간 도트, 대각선, 중앙 글로우 추가 */
#slide-8::before {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: radial-gradient(circle, rgba(79,209,197,0.20) 1px, transparent 1px);
  background-size: 42px 42px;
  animation: dotDiagUL 9s linear infinite;
}
#slide-8::after {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(ellipse 60% 50% at 50% 50%, rgba(79,209,197,0.07) 0%, transparent 70%);
  animation: breathe 5s ease-in-out infinite alternate;
}

/* Slide 9 - 감성피크: 큰 도트 성기게, 오른쪽→아래 대각선, 느림 */
#slide-9::before {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: radial-gradient(circle, rgba(79,209,197,0.14) 2px, transparent 2px);
  background-size: 60px 60px;
  animation: dotDiagDR 16s linear infinite;
}

/* Slide 10 - 수치: 작은 도트 빠르게 위로 */
#slide-10::before {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: radial-gradient(circle, rgba(79,209,197,0.18) 1.5px, transparent 1.5px);
  background-size: 32px 32px;
  animation: dotUp 5s linear infinite;
}

/* Slide 11-1 - 시작3단계: 촘촘한 도트, 대각선 상향 */
#slide-11-1::before {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: radial-gradient(circle, rgba(79,209,197,0.13) 1.5px, transparent 1.5px);
  background-size: 40px 40px;
  animation: dotDiagUL 10s linear infinite;
}

/* Slide 11 - CTA: 도트 대각선 */
#slide-11::before {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: radial-gradient(circle, rgba(79,209,197,0.22) 1.5px, transparent 1.5px);
  background-size: 30px 30px;
  animation: dotDiagUL 6s linear infinite;
}

/* ── 도트 이동 키프레임 ── */
@keyframes dotDiagUL {                       /* 우하→좌상 대각선 */
  from { background-position: 0 0; }
  to   { background-position: -36px -36px; }
}
@keyframes dotDiagDR {                       /* 좌상→우하 대각선 */
  from { background-position: 0 0; }
  to   { background-position: 72px 72px; }
}
@keyframes dotRight {                        /* 왼→오른쪽 수평 */
  from { background-position: 0 0; }
  to   { background-position: 104px 0; }
}
@keyframes dotDown {                         /* 위→아래 수직 */
  from { background-position: 0 0; }
  to   { background-position: 0 56px; }
}
@keyframes dotUp {                           /* 아래→위 수직 */
  from { background-position: 0 0; }
  to   { background-position: 0 -64px; }
}
@keyframes breathe {
  from { opacity: 0.5; transform: scale(0.97); }
  to   { opacity: 1;   transform: scale(1.03); }
}

/* ── 5. 프레젠테이션 & 슬라이드 기본 ── */
.presentation {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  z-index: 10;
}

.slide {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
}
.slide.active {
  opacity: 1;
  pointer-events: all;
  will-change: transform, opacity; /* active 슬라이드에만 GPU 레이어 생성 */
}

.slide-inner {
  width: 100%;
  max-width: var(--slide-w);
  padding: var(--pad-y) var(--pad-x);
  position: relative;
  z-index: 1;
}

/* ── 6. 공통 타이포 ── */
.slide-h {
  font-size: clamp(28px, 3.6vw, 44px);
  font-weight: 600;
  line-height: 1.35;
  color: var(--text);
  margin-bottom: 20px;
}
.slide-sub {
  font-size: clamp(16px, 1.6vw, 20px);
  color: var(--text-sub);
  margin-top: 12px;
}
.accent { color: var(--teal); }

/* ── 7. SLIDE 1: 표지 ── */
.cover-wrap {
  text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 20px;
}
.cover-logo {
  width: 48px; height: 48px;
  border-radius: 14px;
  background: var(--teal-dim);
  border: 1px solid var(--teal-border);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 8px;
}
.logo-dot {
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--teal);
  box-shadow: 0 0 16px var(--teal);
}
.cover-title {
  font-size: clamp(52px, 7vw, 80px);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1;
}
/* Splitting.js 글자 애니메이션 */
.cover-title .char {
  display: inline-block;
  opacity: 0;
  transform: translateY(-30px);
}
.cover-rule {
  width: 48px; height: 2px;
  background: var(--teal);
  border-radius: 1px;
  opacity: 0.6;
}
.cover-category {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--teal);
  border: 1px solid var(--teal-brd);
  border-radius: 20px;
  padding: 4px 14px;
  opacity: 0;
}
.cover-sub {
  font-size: clamp(16px, 1.8vw, 22px);
  color: var(--text-sub);
  line-height: 1.8;
  opacity: 0;
}
.cover-tagline {
  font-size: 14px;
  color: rgba(255,255,255,0.35);
  letter-spacing: 0.04em;
  opacity: 0;
}
.cover-url {
  font-size: 14px;
  color: var(--teal);
  opacity: 0;
  letter-spacing: 0.04em;
}

/* ── 8. SLIDE 2·3: 채팅 레이아웃 ── */
.chat-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}
.chat-layout-rev { direction: rtl; }
.chat-layout-rev > * { direction: ltr; }

.chat-eyebrow {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-dim);
  margin-bottom: 20px;
}
.chat-bubbles {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.bubble {
  padding: 12px 18px;
  border-radius: 18px;
  font-size: clamp(13px, 1.2vw, 15px);
  line-height: 1.6;
  max-width: 90%;
  opacity: 0;
  transform: translateY(10px);
}
.bbl-in {
  background: var(--teal-dim);
  border: 1px solid var(--teal-border);
  align-self: flex-start;
  border-bottom-left-radius: 4px;
}
.bbl-out {
  background: var(--glass);
  border: 1px solid var(--border);
  color: var(--text-sub);
  align-self: flex-end;
  border-bottom-right-radius: 4px;
}
.bbl-alt {
  background: rgba(255, 200, 80, 0.1);
  border: 1px solid rgba(255, 200, 80, 0.2);
  align-self: flex-start;
  border-bottom-left-radius: 4px;
}
.bbl-leave {
  background: rgba(255, 100, 80, 0.1);
  border: 1px solid rgba(255, 100, 80, 0.2);
  color: rgba(255, 140, 120, 0.9);
}
.bbl-time {
  text-align: center;
  font-size: 12px;
  color: var(--text-dim);
  align-self: center;
  padding: 4px 12px;
  background: none;
  border: none;
}

.chat-copy { opacity: 0; }
.chat-copy .slide-h { font-size: clamp(24px, 2.8vw, 38px); }

/* ── 9. SLIDE 4: 비교표 ── */
.market-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
}
.cmp-table {
  width: 100%;
  max-width: 640px;
  border-collapse: collapse;
  font-size: clamp(14px, 1.4vw, 17px);
}
.cmp-table thead th {
  font-weight: 400;
  color: var(--text-dim);
  font-size: 13px;
  padding: 8px 24px;
  letter-spacing: 0.06em;
  text-align: center;
}
.cmp-table thead th:first-child { text-align: left; }
.cmp-table tbody tr {
  border-top: 1px solid var(--border);
  opacity: 0;
  transform: translateY(8px);
}
.cmp-table tbody td {
  padding: 14px 24px;
  text-align: center;
}
.cmp-name { text-align: left !important; color: var(--text-sub); }
.cmp-y    { color: rgba(255,255,255,0.3); }
.cmp-n    { color: rgba(239, 68, 68, 0.65); }
.cmp-gray { color: rgba(255,200,100,0.55); }
.cmp-highlight td { background: rgba(79,209,197,0.06); }
.cmp-brand { color: var(--text) !important; font-weight: 600; }
.cmp-accent { color: var(--teal) !important; font-weight: 700; font-size: 18px; }
.cmp-table-3col { max-width: 780px; }
.cmp-brand-col { color: var(--teal) !important; }

.market-copy {
  font-size: clamp(20px, 2.4vw, 30px);
  font-weight: 600;
  text-align: center;
  line-height: 1.5;
  opacity: 0;
}

/* ── 9-1. SLIDE 4-1: 플랫폼 구조 (D3) ── */
.d3-title {
  font-size: clamp(1.1rem, 2.8vw, 1.5rem);
  font-weight: 700;
  color: var(--teal);
  text-align: center;
  margin: 0 0 12px;
  letter-spacing: -0.02em;
  opacity: 0;
}
#d3-graph {
  width: 100%;
  flex: 1 1 0;
  min-height: 0;
  overflow: visible;
  position: relative;
}
#d3-graph svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}
#d3-graph svg text {
  user-select: none;
}
.d3-footer {
  font-size: clamp(0.75rem, 1.6vw, 0.95rem);
  color: rgba(255,255,255,0.45);
  text-align: center;
  margin: 8px 0 0;
  opacity: 0;
}
#slide-4 {
  align-items: center;
  justify-content: center;
}
@media (max-width: 768px) {
  #d3-graph {
    flex: none !important;
    width: 100%;
    height: calc(100vh - 80px) !important;
    min-height: calc(100vh - 80px) !important;
  }
  .d3-title { font-size: 0.9rem; margin-bottom: 6px; }
  .d3-footer { font-size: 0.68rem; margin-top: 4px; }
}

/* ── 10. SLIDE 5: 업종 카드 + 프리뷰 ── */
.use-wrap {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
}
.use-header { text-align: center; }
.use-eyebrow {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--teal);
  font-weight: 600;
  margin-bottom: 6px;
  opacity: 0;
}
.use-sub {
  font-size: clamp(22px, 2.6vw, 34px);
  font-weight: 700;
  color: var(--text);
  opacity: 0;
  transform: translateY(14px);
}

/* 5열 카드 그리드 */
.use-cards {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
}
.use-card {
  background: var(--glass);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  text-align: center;
  opacity: 0;
  transform: translateY(20px);
  transition: background 0.25s, border-color 0.25s, box-shadow 0.25s, transform 0.2s;
  user-select: none;
}
.use-card:hover {
  background: var(--teal-dim);
  border-color: var(--teal-border);
  transform: translateY(-3px);
}
.use-card.active {
  background: var(--teal-dim);
  border-color: var(--teal-border);
  box-shadow: 0 0 0 2px rgba(79,209,197,0.35);
  transform: translateY(0);
}
.use-icon { font-size: 26px; line-height: 1; }
.use-name {
  font-size: clamp(13px, 1.2vw, 15px);
  font-weight: 600;
  color: var(--text);
}
.use-desc {
  font-size: 11px;
  color: var(--text-sub);
  line-height: 1.55;
}

/* 펼쳐지는 프리뷰 패널 */
.use-preview {
  height: 0;
  overflow: hidden;
}
.use-preview-inner {
  position: relative;
  height: 420px;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--teal-border);
  background: rgba(4, 8, 16, 0.92);
}
.use-preview-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center top;
  display: block;
  cursor: zoom-in;
  transition: filter 0.2s, transform 0.2s;
}
.use-preview-img:hover {
  filter: brightness(1.06);
  transform: scale(1.01);
}
/* 우하단 확대 힌트 아이콘 */
.use-preview-inner::after {
  content: '⤢';
  position: absolute;
  bottom: 7px; right: 9px;
  font-size: 14px;
  color: rgba(255,255,255,0.5);
  background: rgba(0,0,0,0.4);
  padding: 2px 6px;
  border-radius: 4px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s;
  z-index: 2;
}
.use-preview-inner:hover::after { opacity: 1; }

.use-preview-close {
  position: absolute;
  top: 10px; right: 12px;
  width: 28px; height: 28px;
  background: rgba(0,0,0,0.55);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 50%;
  color: #fff;
  font-size: 13px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.2s;
  line-height: 1;
}
.use-preview-close:hover { background: rgba(0,0,0,0.8); }

/* 하단 카피 */
.use-footer {
  font-size: clamp(16px, 1.8vw, 22px);
  font-weight: 600;
  text-align: center;
  line-height: 1.5;
  color: var(--text);
  opacity: 0;
}
.use-footer-sub {
  font-size: clamp(12px, 1.2vw, 15px);
  font-weight: 400;
  color: var(--text-sub);
  display: block;
  margin-top: 5px;
  line-height: 1.6;
}

/* ── 11. SLIDE 6: 업종별 카드 ── */
.feat-wrap {
  display: flex; flex-direction: column; gap: 28px;
}
.feat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.feat-card {
  background: var(--glass);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px;
  display: flex; flex-direction: column; gap: 12px;
  opacity: 0;
  transform: translateY(24px);
  transition: border-color 0.3s, transform 0.3s;
}
.feat-card:hover { border-color: var(--teal-border); transform: translateY(-2px); }
.feat-icon { font-size: 28px; }
.feat-title { font-size: 15px; font-weight: 600; color: var(--text); }
.feat-img-box {
  height: 120px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  position: relative;
}
.feat-img {
  width: 100%; height: 100%; object-fit: cover;
}
.feat-img-ph {
  font-size: 12px;
  color: var(--text-dim);
  position: absolute;
}
.feat-img-box.no-img .feat-img { display: none; }
.feat-list { display: flex; flex-direction: column; gap: 6px; }
.feat-list li {
  font-size: 13px;
  color: var(--text-sub);
  padding-left: 14px;
  position: relative;
}
.feat-list li::before {
  content: '—';
  position: absolute; left: 0;
  color: var(--teal);
  font-size: 10px;
  top: 2px;
}
/* ── Slide 2-1: 혼자 홍보하는 한계 ── */
.limit-wrap {
  max-width: 680px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.limit-eyebrow {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--teal);
  opacity: 0;
}
.limit-list {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.limit-item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  font-size: clamp(15px, 1.5vw, 18px);
  color: var(--text-sub);
  line-height: 1.6;
  opacity: 0;
  transform: translateY(16px);
}
.limit-icon {
  font-size: 22px;
  flex-shrink: 0;
  margin-top: 1px;
}

/* ── Slide 4: 영업자=채널 ── */
.channel-wrap {
  max-width: 860px;
  margin: 0 auto;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 36px;
}
.channel-h {
  text-align: center;
}
.channel-diagram {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.channel-row {
  display: grid;
  grid-template-columns: 180px 1fr 180px;
  align-items: center;
  gap: 16px;
  padding: 14px 20px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border);
  border-radius: 10px;
  opacity: 0;
  transform: translateX(-24px);
}
.channel-person {
  font-size: 15px;
  font-weight: 700;
  color: var(--teal);
}
.channel-mid {
  font-size: 14px;
  color: var(--text-sub);
}
.channel-result {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  text-align: right;
}
.channel-converge {
  text-align: center;
  font-size: 17px;
  font-weight: 700;
  color: var(--teal);
  border-top: 1px solid var(--teal-brd);
  padding-top: 20px;
  opacity: 0;
}
.channel-sub {
  text-align: center;
  font-size: 15px;
  color: var(--text-sub);
  line-height: 1.8;
  opacity: 0;
}

/* ── Slide 6: 업종별 헤드라인 ── */
.feat-h {
  text-align: center;
  margin-bottom: 28px;
  opacity: 0;
}

/* ── Slide 7: 관리자 추가 서브카피 ── */
.admin-sub2 {
  font-size: clamp(13px, 1.2vw, 15px);
  color: var(--teal);
  line-height: 1.7;
  margin-top: 12px;
  opacity: 0.85;
}

/* ── Slide 11-1: 시작 3단계 ── */
.steps-wrap {
  max-width: 820px;
  margin: 0 auto;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 36px;
  text-align: center;
}
.steps-eyebrow {
  font-size: 13px;
  letter-spacing: 0.06em;
  color: var(--text-sub);
  opacity: 0;
}
.steps-list {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
  opacity: 0;
  transform: translateY(16px);
}
.step-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  min-width: 160px;
}
.step-num {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 2px solid var(--teal-brd);
  background: var(--teal-dim);
  color: var(--teal);
  font-size: 20px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.step-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
}
.step-desc {
  font-size: 14px;
  color: var(--text-sub);
  line-height: 1.6;
}
.step-arrow {
  font-size: 22px;
  color: var(--teal);
  opacity: 0.4;
  padding-top: 52px;
}
.steps-sub {
  font-size: 14px;
  color: var(--teal);
  opacity: 0;
}

.feat-footer {
  font-size: clamp(18px, 2vw, 26px);
  font-weight: 600;
  text-align: center;
  line-height: 1.5;
  opacity: 0;
}

/* ── 12. SLIDE 6-1: 영업자 에디터 ── */
.edit-wrap {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: 48px;
  align-items: center;
  width: 100%; max-width: 900px;
}
.edit-copy {
  display: flex; flex-direction: column; gap: 20px;
}
.edit-eyebrow {
  font-size: clamp(11px, 1.1vw, 13px);
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--teal); opacity: 0;
}
.edit-h {
  font-size: clamp(28px, 3.2vw, 42px);
  line-height: 1.25; margin: 0; opacity: 0;
}
.edit-list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 12px;
}
.edit-item {
  display: flex; align-items: center; gap: 14px;
  font-size: clamp(13px, 1.3vw, 15px);
  color: var(--text-sub);
  opacity: 0; transform: translateX(-20px);
}
.edit-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--teal); flex-shrink: 0;
}
.edit-sub {
  font-size: clamp(12px, 1.2vw, 14px);
  color: rgba(255,255,255,0.38);
  line-height: 1.7; opacity: 0;
}
.edit-screen-wrap {
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--glass);
  opacity: 0; transform: translateX(30px);
  cursor: pointer;
}
.edit-img {
  width: 100%; height: auto; display: block;
  border-radius: var(--radius);
}

/* ── 12. SLIDE 7: 관리자 실사 ── */
.admin-layout {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 60px;
  align-items: center;
}
.admin-points {
  display: flex; flex-direction: column; gap: 10px;
  margin: 20px 0;
}
.admin-point {
  font-size: clamp(14px, 1.3vw, 16px);
  color: var(--text-sub);
  padding-left: 16px;
  position: relative;
  opacity: 0;
}
.admin-point::before {
  content: '';
  position: absolute; left: 0; top: 50%;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--teal);
  transform: translateY(-50%);
}
.admin-sub {
  font-size: clamp(14px, 1.4vw, 17px);
  color: var(--text-sub);
  line-height: 1.8;
  opacity: 0;
}

/* 브라우저 프레임 */
.screen-frame {
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border-md);
  border-radius: var(--radius);
  overflow: visible;   /* 레이블이 프레임 밖으로 나올 수 있게 */
  position: relative;
  opacity: 0;
}
.screen-frame > .screen-bar {
  border-radius: var(--radius) var(--radius) 0 0;
  overflow: hidden;
}
.screen-bar {
  background: rgba(255,255,255,0.05);
  border-bottom: 1px solid var(--border);
  padding: 10px 16px;
  display: flex; align-items: center; gap: 8px;
}
.screen-dot {
  width: 10px; height: 10px; border-radius: 50%;
}
.screen-dot.r { background: #ff5f57; }
.screen-dot.y { background: #ffbd2e; }
.screen-dot.g { background: #28ca41; }
.screen-title-bar {
  font-size: 12px;
  color: var(--text-dim);
  margin-left: 8px;
}
.screen-body {
  height: 280px;
  border-radius: 0 0 var(--radius) var(--radius);
  position: relative;
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.screen-img {
  width: 100%; height: 100%; object-fit: cover; object-position: top;
}
.screen-ph {
  font-size: 13px;
  color: var(--text-dim);
  position: absolute;
}
.screen-body.no-img .screen-img { display: none; }

.screen-label {
  position: absolute;
  background: var(--teal);
  color: #000;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 20px;
  white-space: nowrap;
  opacity: 0;
  z-index: 2;
}
.lbl-1 { top: 56px;  right: -10px; }
.lbl-2 { top: 120px; right: -10px; }
.lbl-3 { top: 184px; right: -10px; }

/* ── 12-1. SLIDE 7-1: 영업자 중앙관리 ── */
.sales-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
  width: 100%;
}

.sales-eyebrow {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--teal);
  font-weight: 600;
  margin-bottom: 20px;
  opacity: 0;
  transform: translateY(10px);
}

.sales-rows {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.sales-row {
  display: flex;
  align-items: center;
  gap: 12px;
  opacity: 0;
  transform: translateX(-24px);
}

.sales-person {
  background: var(--glass);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 8px 16px;
  font-size: clamp(12px, 1.1vw, 14px);
  font-weight: 500;
  color: var(--text-sub);
  min-width: 100px;
  text-align: center;
  white-space: nowrap;
}
.sales-person-more {
  background: transparent;
  border-color: transparent;
  color: transparent;
  min-width: 100px;
}

.sales-arrow {
  color: var(--teal);
  font-size: 18px;
  opacity: 0.5;
  flex-shrink: 0;
  line-height: 1;
}

.sales-page {
  background: var(--teal-dim);
  border: 1px solid var(--teal-border);
  border-radius: var(--radius-sm);
  padding: 8px 16px;
  font-size: clamp(12px, 1.1vw, 14px);
  color: var(--teal);
  flex: 1;
}
.sales-page-more {
  background: var(--glass);
  border: 1px dashed var(--border-md);
  color: var(--text-dim);
  font-style: italic;
}

.sales-copy {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.sales-copy .slide-h {
  opacity: 0;
}

.sales-hub-card {
  background: var(--teal-dim);
  border: 1px solid var(--teal-border);
  border-radius: var(--radius);
  padding: 20px 24px;
  opacity: 0;
  transform: translateY(16px);
}
.sales-hub-label {
  font-size: clamp(13px, 1.3vw, 16px);
  font-weight: 700;
  color: var(--teal);
  margin-bottom: 6px;
}
.sales-hub-desc {
  font-size: clamp(12px, 1.1vw, 14px);
  color: var(--text-sub);
  line-height: 1.6;
}

.sales-features {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.sales-feature {
  font-size: clamp(13px, 1.2vw, 15px);
  color: var(--text-sub);
  padding-left: 16px;
  position: relative;
  opacity: 0;
  transform: translateX(14px);
}
.sales-feature::before {
  content: '·';
  position: absolute;
  left: 4px;
  color: var(--teal);
  font-weight: 700;
}

.sales-sub {
  font-size: clamp(13px, 1.3vw, 16px);
  color: var(--text-dim);
  font-style: italic;
  line-height: 1.6;
  opacity: 0;
}

/* ── 13. SLIDE 8: 포털 비전 ── */
.pv-wrap {
  display: flex; flex-direction: column; align-items: center;
  gap: 14px;
  width: 100%; max-width: 820px;
}
.pv-eyebrow {
  font-size: clamp(11px, 1.1vw, 13px);
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--teal); opacity: 0;
}
.pv-title {
  font-size: clamp(26px, 3vw, 40px);
  text-align: center; margin: 0; opacity: 0;
}
.pv-portal-box {
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  padding: 14px 36px;
  border: 1.5px solid rgba(79,209,197,0.55);
  border-radius: 10px;
  background: rgba(79,209,197,0.07);
  box-shadow: 0 0 24px rgba(79,209,197,0.12);
  opacity: 0; transform: translateY(16px);
}
.pv-portal-name {
  font-size: clamp(15px, 1.6vw, 18px);
  font-weight: 700; color: var(--teal);
}
.pv-portal-tag {
  font-size: clamp(10px, 1vw, 12px);
  color: rgba(255,255,255,0.5);
}
.pv-tree-line {
  display: flex; flex-direction: column; align-items: center;
  width: 68%; opacity: 0;
}
.pv-tree-vert {
  width: 1px; height: 12px;
  background: rgba(79,209,197,0.4);
}
.pv-tree-horiz {
  width: 100%; height: 1px;
  background: rgba(79,209,197,0.35);
}
.pv-groups {
  display: flex; gap: 16px;
  width: 100%; justify-content: center;
}
.pv-group {
  flex: 1; max-width: 230px;
  display: flex; flex-direction: column; gap: 8px;
  opacity: 0; transform: translateY(20px);
}
.pv-group-name {
  font-size: clamp(12px, 1.2vw, 14px);
  font-weight: 600; color: rgba(255,255,255,0.7);
  text-align: center;
  padding: 8px 12px;
  border-bottom: 1px solid rgba(79,209,197,0.2);
  margin: 0;
}
.pv-pages { display: flex; flex-direction: column; gap: 6px; }
.pv-page {
  position: relative;
  padding: 8px 12px; border-radius: 6px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.03);
  font-size: clamp(10px, 1vw, 12px);
  color: rgba(255,255,255,0.38);
  text-align: center;
  display: flex; flex-direction: column; gap: 2px;
}
.pv-page-hot {
  border-color: rgba(79,209,197,0.45);
  background: rgba(79,209,197,0.07);
  color: rgba(255,255,255,0.82);
  box-shadow: 0 0 14px rgba(79,209,197,0.15);
}
.pv-hot-badge {
  font-size: 9px; font-weight: 700;
  color: var(--teal); letter-spacing: 0.08em; text-transform: uppercase;
}
.pv-hot-label {
  font-size: 9px; color: rgba(79,209,197,0.65);
}
.pv-sub {
  font-size: clamp(12px, 1.3vw, 14px);
  color: rgba(255,255,255,0.4);
  text-align: center; margin-top: 4px; opacity: 0;
}

/* ── 14. SLIDE 9: 감성 피크 ── */
.emotion-wrap {
  text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 32px;
  max-width: 700px;
  margin: 0 auto;
}
.emotion-h {
  font-size: clamp(30px, 4vw, 52px);
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -0.03em;
}
.emotion-h .char {
  display: inline-block;
  opacity: 0;
  transform: translateY(20px);
}
.emotion-rule {
  width: 40px; height: 2px;
  background: var(--teal);
  border-radius: 1px;
  opacity: 0;
}
.emotion-stories {
  display: flex; flex-direction: column; gap: 12px;
}
.emotion-stories p {
  font-size: clamp(15px, 1.5vw, 18px);
  color: var(--text-sub);
  opacity: 0;
  transform: translateY(12px);
}
.emotion-close {
  font-size: clamp(16px, 1.7vw, 20px);
  font-weight: 500;
  color: var(--teal);
  opacity: 0;
}

/* ── 15. SLIDE 10: 수치 ── */
.stats-wrap {
  display: flex; flex-direction: column; gap: 28px; align-items: center;
}
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  width: 100%;
}
.stat-card {
  background: var(--glass);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px 20px;
  text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  opacity: 0;
  transform: translateY(20px);
}
.stat-num {
  font-size: clamp(36px, 4vw, 54px);
  font-weight: 700;
  color: var(--teal);
  line-height: 1;
  letter-spacing: -0.04em;
}
.stat-unit { font-size: 14px; color: var(--text-sub); margin-top: 2px; }
.stat-lbl  { font-size: 13px; color: var(--text-dim); margin-top: 6px; }
.stat-ctx  { font-size: 11px; color: rgba(240,244,248,0.28); margin-top: 3px; letter-spacing: 0.01em; }

.stats-screen {
  width: 100%;
  height: 260px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 1px solid var(--border);
  position: relative;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.02);
  opacity: 0;
}
.stats-img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.stats-ph  { font-size: 13px; color: var(--text-dim); position: absolute; }
.stats-screen.no-img .stats-img { display: none; }
.stats-copy {
  font-size: clamp(16px, 1.8vw, 22px);
  font-weight: 600;
  text-align: center;
  line-height: 1.6;
  opacity: 0;
}

/* ── 16. SLIDE 11: CTA ── */
.cta-wrap {
  text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 28px;
  max-width: 680px;
  margin: 0 auto;
}
.cta-headline {
  display: flex; flex-direction: column; gap: 8px;
}
.cta-headline p {
  font-size: clamp(18px, 2.2vw, 28px);
  font-weight: 600;
  color: var(--text-sub);
  opacity: 0;
}
.cta-bridge {
  font-size: clamp(22px, 2.6vw, 34px);
  font-weight: 700;
  line-height: 1.45;
  opacity: 0;
}
.cta-btns {
  display: flex; gap: 16px; flex-wrap: wrap; justify-content: center;
  opacity: 0;
}
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 14px 36px;
  border-radius: var(--radius-sm);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
  transition: all 0.25s;
  cursor: pointer;
}
.btn-primary {
  background: var(--teal);
  color: #020d0c;
  border: 2px solid var(--teal);
}
.btn-primary:hover {
  background: #38b2ac;
  border-color: #38b2ac;
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(79,209,197,0.3);
}
.btn-outline {
  background: transparent;
  color: var(--text);
  border: 2px solid var(--border-md);
}
.btn-outline:hover {
  border-color: var(--teal-border);
  color: var(--teal);
  transform: translateY(-2px);
}
.cta-sub {
  font-size: 15px;
  color: var(--text-sub);
  opacity: 0;
}
.cta-copy {
  font-size: 13px;
  color: var(--text-dim);
  opacity: 0;
}

/* =====================================================
   모바일 반응형 (768px 이하)
   ===================================================== */
@media (max-width: 768px) {
  :root {
    --pad-x: 24px;
    --pad-y: 40px;
  }

  /* 슬라이드 모드 유지 (스와이프 방식) */
  .slide {
    height: 100vh; height: 100dvh; /* % → vh 명시: iOS가 scroll 높이를 올바르게 계산 (dvh = 주소창 제외 실제 높이) */
    overflow-y: scroll;         /* auto → scroll: iOS position:fixed 내부 scroll 인식 강화 */
    align-items: flex-start;    /* 상단 잘림 방지 */
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain; /* 슬라이드 내부 스크롤이 상위로 전파되지 않도록 */
  }
  /* 콘텐츠가 짧아 스크롤 불필요한 슬라이드는 중앙 유지 */
  #slide-0, #slide-8, #slide-9, #slide-10, #slide-11 {
    align-items: center;
    justify-content: center;
  }
  .slide-inner {
    max-width: 100%;
    padding-top: 60px;
    padding-bottom: 72px; /* 홈 버튼과 겹침 방지 */
    margin: 0 auto;
  }

  /* 스크롤바 스타일 */
  .slide::-webkit-scrollbar { width: 3px; }
  .slide::-webkit-scrollbar-track { background: transparent; }
  .slide::-webkit-scrollbar-thumb {
    background: rgba(79, 209, 197, 0.35);
    border-radius: 3px;
  }

  /* UI 컨트롤 숨기기 */
  .ui-fullscreen,
  .ui-counter,
  .ui-dots,
  .ui-arrow { display: none; }

  /* 홈 버튼: 모바일에서 우상단 배치 (하단은 슬라이드 카드 영역과 겹쳐 오터치 발생) */
  .ui-home { top: 12px; right: 12px; bottom: auto; width: 40px; height: 40px; }
  .ui-home svg { width: 16px; height: 16px; }

  /* 채팅 레이아웃: 세로 */
  .chat-layout,
  .chat-layout-rev {
    grid-template-columns: 1fr;
    gap: 32px;
    direction: ltr;
  }
  .chat-layout-rev { grid-template-columns: 1fr; direction: ltr; }

  /* 채팅 슬라이드 텍스트 중앙 정렬 */
  .chat-layout .chat-copy,
  .chat-layout-rev .chat-copy { text-align: center; }

  /* chat-layout-rev: 모바일에서 버블이 먼저, 텍스트가 아래로 */
  .chat-layout-rev .chat-copy { order: 2; }
  .chat-layout-rev .chat-col  { order: 1; }

  /* 비교표 */
  .cmp-table { font-size: 13px; }
  .cmp-table td, .cmp-table th { padding: 10px 12px; }

  /* 업종 카드: 모바일 2열 */
  .use-cards { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .use-preview-inner { height: 320px; }

  /* 세로 이미지 높이 제한 — iOS position:fixed 내 scroll 한계 보완
     슬라이드에서는 70vh로 잘라 보여주고, 탭 시 라이트박스에서 전체 확인 */
  .edit-img {
    max-height: 70vh;
    width: auto;
    max-width: 100%;
    margin: 0 auto;
    object-fit: contain;
  }

  /* 기능 카드 */
  .feat-grid { grid-template-columns: 1fr; gap: 14px; }
  .feat-img-box { height: 80px; }

  /* 관리자 레이아웃 */
  .admin-layout { grid-template-columns: 1fr; gap: 28px; }

  /* Slide 6-1: edit-wrap 모바일 1컬럼 (2컬럼이면 이미지 컬럼이 너무 좁아 세로 길이 폭발) */
  .edit-wrap { grid-template-columns: 1fr; gap: 28px; }

  /* Slide 4: 채널 다이어그램 모바일 */
  .channel-wrap { gap: 20px; }
  .channel-diagram { gap: 10px; }
  .channel-row {
    grid-template-columns: 1fr;
    gap: 4px;
    padding: 12px 14px;
  }
  .channel-person { font-size: 14px; }
  .channel-mid { font-size: 13px; }
  .channel-result { font-size: 13px; text-align: left; }
  .channel-converge { font-size: 14px; padding-top: 14px; }
  .channel-sub { font-size: 13px; }

  /* 영업자 중앙관리 */
  .sales-layout { grid-template-columns: 1fr; gap: 28px; }
  .sales-copy .slide-h { font-size: 26px; }
  .sales-person { min-width: 80px; font-size: 12px; }
  .sales-page   { font-size: 12px; }

  /* 포털 비전 그룹 */
  .pv-groups { flex-wrap: wrap; }
  .pv-group { max-width: 45%; }

  /* 수치 그리드 */
  .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .stats-screen { height: 180px; }

  /* CTA 버튼 */
  .cta-btns { flex-direction: column; align-items: center; }
  .btn { width: 100%; max-width: 280px; }

  /* 모든 초기 숨김 해제 (슬라이드 진입 시 GSAP 애니메이션) */
  .bubble, .chat-copy, .cmp-table tbody tr,
  .market-copy, .use-eyebrow, .use-sub, .use-card, .use-footer,
  .feat-card, .feat-footer, .admin-point,
  .admin-sub, .screen-frame, .screen-label,
  .sales-eyebrow, .sales-row, .sales-copy .slide-h,
  .sales-hub-card, .sales-feature, .sales-sub,
  .edit-eyebrow, .edit-h, .edit-item, .edit-sub, .edit-screen-wrap,
  .pv-eyebrow, .pv-title, .pv-portal-box,
  .pv-tree-line, .pv-group, .pv-sub,
  .emotion-h .char,
  .emotion-rule, .emotion-stories p, .emotion-close,
  .stat-card, .stats-screen, .stats-copy,
  .cta-headline p, .cta-bridge, .cta-btns,
  .cta-sub, .cta-copy,
  .cover-sub, .cover-url, .cover-title .char,
  .cover-category, .cover-tagline,
  .limit-eyebrow, .limit-item,
  .channel-wrap .slide-h, .channel-row, .channel-converge, .channel-sub,
  .feat-h,
  .steps-eyebrow, .steps-list, .steps-sub {
    opacity: 0;
  }

  /* 모바일: 3단계 세로 정렬 */
  .steps-list {
    flex-direction: column;
    align-items: center;
  }
  .step-arrow {
    padding-top: 0;
    transform: rotate(90deg);
  }
}

/* =====================================================
   작은 모바일 (480px 이하)
   ===================================================== */
@media (max-width: 480px) {
  .cover-title { font-size: 42px; }
  .chat-layout { gap: 20px; }
  .bubble { font-size: 13px; padding: 10px 14px; }
  .stat-num { font-size: 36px; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .emotion-h { font-size: 26px; }
  .channel-person { font-size: 13px; }
  .channel-mid, .channel-result { font-size: 12px; }
  .channel-converge { font-size: 13px; }
  .channel-sub { font-size: 12px; }
}

/* =====================================================
   인쇄 모드 (@media print)
   ===================================================== */
@media print {
  @page { size: A4 landscape; margin: 0; }

  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }

  html, body { overflow: visible; background: #fff !important; color: #111 !important; }

  #bg { display: none !important; }
  .ui-fullscreen, .ui-counter, .ui-dots, .ui-arrow { display: none !important; }

  .presentation { position: static !important; height: auto !important; overflow: visible !important; }

  .slide {
    position: relative !important;
    width: 297mm !important;
    height: 210mm !important;
    opacity: 1 !important;
    pointer-events: all !important;
    page-break-after: always !important;
    break-after: page !important;
    display: flex !important;
    background: #fff !important;
    color: #111 !important;
    overflow: hidden;
  }

  /* 다크 색상을 인쇄용으로 */
  .slide-h, .cover-title, .emotion-h { color: #111 !important; }
  .slide-sub, .chat-eyebrow, .cmp-name,
  .bbl-out, .admin-sub, .pv-sub,
  .emotion-stories p, .stat-lbl, .stat-unit,
  .cta-headline p, .cta-sub, .cta-copy,
  .mode-for, .feat-list li { color: #555 !important; }

  .bubble { border-color: #ddd !important; }
  .bbl-in { background: #f0fffe !important; }
  .bbl-out { background: #f8f8f8 !important; }
  .bbl-alt { background: #fff8e0 !important; }

  .use-card, .feat-card, .stat-card,
  .screen-frame, .cmp-highlight td { background: #f8f8f8 !important; border-color: #ddd !important; }

  .accent, .cmp-accent, .pv-portal-name, .use-name,
  .emotion-close, .cta-btns .btn-primary { color: #0d9488 !important; }

  /* 초기 숨겨진 요소 모두 표시 */
  .bubble, .chat-copy, .cmp-table tbody tr,
  .market-copy, .use-eyebrow, .use-sub, .use-card, .use-footer,
  .feat-card, .feat-footer, .admin-point,
  .admin-sub, .screen-frame, .screen-label,
  .sales-eyebrow, .sales-row, .sales-copy .slide-h,
  .sales-hub-card, .sales-feature, .sales-sub,
  .edit-eyebrow, .edit-h, .edit-item, .edit-sub, .edit-screen-wrap,
  .pv-eyebrow, .pv-title, .pv-portal-box,
  .pv-tree-line, .pv-group, .pv-sub,
  .emotion-rule,
  .emotion-stories p, .emotion-close,
  .stat-card, .stats-screen, .stats-copy,
  .cta-headline p, .cta-bridge, .cta-btns,
  .cta-sub, .cta-copy {
    opacity: 1 !important;
    transform: none !important;
  }
  /* 인쇄 시 프리뷰 패널 펼침 */
  .use-preview { height: auto !important; }
  .use-preview-close { display: none !important; }
  .cover-sub, .cover-url, .cover-category, .cover-tagline { opacity: 1 !important; }
  .cover-title .char { opacity: 1 !important; transform: none !important; }
  .emotion-h .char { opacity: 1 !important; transform: none !important; }
  /* 라이트박스 인쇄 제외 */
  .lightbox-overlay { display: none !important; }
}

/* =====================================================
   라이트박스
   ===================================================== */

/* 라이트박스 열린 동안 body 스크롤/터치 차단 */
body.lb-open {
  overflow: hidden;
  overscroll-behavior: none;
}
/* 라이트박스 열린 동안 라이트박스 외 모든 요소 포인터 비활성화 */
body.lb-open > *:not(#lightbox) {
  pointer-events: none;
}
/* 라이트박스 열린 동안 슬라이드 도트 패턴 애니메이션 일시정지
   — iOS에서 ::before @keyframes 레이어 16개가 GPU 메모리를 점유한 채
     orientationchange 시 레이어 재구성이 일어나면 메모리 압박 극대화 */
body.lb-open .slide::before {
  animation-play-state: paused;
}

body.is-ios .lightbox-overlay {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  background: rgba(0, 0, 0, 0.96);
}

.lightbox-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0, 0, 0, 0.92);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  overflow-y: auto;
  /* 오버스크롤이 부모 페이지로 전파되지 않도록 억제 (iOS pull-to-refresh 방지) */
  overscroll-behavior: contain;
  /* iOS 핀치 제스처가 overflow-y:auto + backdrop-filter 레이어에서 GPU 메모리 충돌 유발.
     pan-y: 세로 스크롤만 허용, 핀치 줌 차단 → 이미지 확대 시 크래시 방지 */
  touch-action: pan-y;
  padding: 60px 20px 40px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.lightbox-overlay.open {
  opacity: 1;
  pointer-events: all;
}
.lightbox-inner {
  position: relative;
  max-width: 94vw;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  margin: auto 0;
}
.lightbox-img {
  max-width: 92vw;
  width: 100%;
  height: auto;
  object-fit: contain;
  border-radius: 10px;
  box-shadow: 0 24px 80px rgba(0,0,0,0.7);
  transform: scale(0.94);
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  display: block;
  touch-action: pan-y; /* scale=1: 세로 스크롤 허용 / scale>1: JS가 pan-y→none으로 전환 */
}
.lightbox-overlay.open .lightbox-img {
  transform: scale(1);
}
.lightbox-webpage {
  width: min(92vw, 1280px);
  height: 85vh;
  border-radius: 10px;
  box-shadow: 0 24px 80px rgba(0,0,0,0.7);
  display: none;
  border: none;
  background: #fff;
}
.lightbox-yt {
  width: min(92vw, 960px);
  aspect-ratio: 16 / 9;
  border-radius: 10px;
  box-shadow: 0 24px 80px rgba(0,0,0,0.7);
  display: none;
  background: #000;
}

body.is-ios .lightbox-inner {
  max-width: 100vw;
}
body.is-ios .lightbox-webpage {
  width: 100vw;
  height: calc(100vh - 40px);
  border-radius: 0;
}
body.is-ios .lightbox-img,
body.is-ios .lightbox-yt {
  max-width: 100vw;
}
body.is-ios .lightbox-close {
  top: 12px;
  right: 12px;
}

.lightbox-caption {
  font-size: 13px;
  color: rgba(255,255,255,0.5);
  letter-spacing: 0.04em;
}
.lightbox-close {
  position: fixed;
  top: 16px;
  right: 20px;
  z-index: 10000;
  width: 36px;
  height: 36px;
  background: rgba(255,255,255,0.15);
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 50%;
  color: #fff;
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
  line-height: 1;
}
.lightbox-close:hover { background: rgba(255,255,255,0.3); }

/* 클릭 가능한 이미지/유튜브 공통 커서 */
.feat-img,
.screen-img,
.stats-img {
  cursor: zoom-in;
  transition: filter 0.2s, transform 0.2s;
}
.feat-img:hover,
.screen-img:hover,
.stats-img:hover {
  filter: brightness(1.08);
  transform: scale(1.02);
}

/* 웹페이지 iframe 슬롯 */
.webpage-wrapper {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 1;
}
.webpage-frame {
  position: absolute;
  top: 0;
  left: 0;
  border: none;
  pointer-events: none;
  width: calc(100% / var(--wp-scale, 0.35));
  height: calc(100% / var(--wp-scale, 0.35));
  transform: scale(var(--wp-scale, 0.35));
  transform-origin: top left;
  will-change: transform; /* GPU 레이어 분리 힌트 — 데스크톱 WebKit 안정화 */
}
/* 이미지 박스에 확대 힌트 아이콘 */
.feat-img-box,
.screen-body,
.stats-screen {
  position: relative;
}
.feat-img-box::after,
.screen-body::after,
.stats-screen::after {
  content: '⤢';
  position: absolute;
  bottom: 7px;
  right: 9px;
  font-size: 14px;
  color: rgba(255,255,255,0.5);
  background: rgba(0,0,0,0.4);
  padding: 2px 6px;
  border-radius: 4px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s;
  z-index: 2;
}
.feat-img-box:hover::after,
.screen-body:hover::after,
.stats-screen:hover::after {
  opacity: 1;
}