/* ============================================
   K-Trust · Lecture Mode CSS
   ────────────────────────────────────────────
   원칙: 원본 CSS 손대지 않음
        body.ktl-mode 클래스로 스코핑
   
   ⭐ 자산가·강의자 가독성 최우선
   ⭐ 강의장 조명 어두울 때 최적화 (다크 배경)
   ⭐ 서서 읽어도 명확히 보이는 크기
   ============================================ */

/* ═══════════════════════════════════════════════
   원본 콘텐츠 숨김 (강의 모드에서는 스테이지에만 표시)
   ═══════════════════════════════════════════════ */
body.ktl-source-hidden {
  overflow: hidden;
  background: #0a1520;
}
body.ktl-source-hidden > *:not(#ktl-shell):not(script):not(style):not(link) {
  display: none !important;
}

/* ═══════════════════════════════════════════════
   1. 강의 모드 쉘 (풀스크린)
   ═══════════════════════════════════════════════ */
#ktl-shell {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: 
    radial-gradient(ellipse at 20% 10%, rgba(212, 175, 55, 0.08), transparent 50%),
    radial-gradient(ellipse at 85% 95%, rgba(26, 58, 82, 0.15), transparent 55%),
    linear-gradient(180deg, #0a1520 0%, #0f2637 50%, #0a1520 100%);
  color: #fbfaf7;
  display: flex;
  flex-direction: column;
  font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, sans-serif;
  overflow: hidden;
}
#ktl-shell * { box-sizing: border-box; }

/* ═══════════════════════════════════════════════
   2. 상단바 · 브랜드 + 슬라이드 라벨 + 컨트롤
   ═══════════════════════════════════════════════ */
.ktl-topbar {
  flex: 0 0 auto;
  padding: 20px 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  border-bottom: 1px solid rgba(212, 175, 55, 0.15);
  background: rgba(10, 21, 32, 0.6);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}
.ktl-brand {
  display: flex;
  align-items: baseline;
  gap: 2px;
  font-family: 'Noto Serif KR', serif;
  white-space: nowrap;
}
.ktl-brand-mark {
  color: #d4af37;
  font-size: 24px;
  font-weight: 500;
  line-height: 1;
}
.ktl-brand-name {
  color: #fbfaf7;
  font-size: 18px;
  letter-spacing: 0.02em;
  line-height: 1;
}
.ktl-brand-sub {
  margin-left: 14px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: #d4af37;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  padding: 4px 10px;
  border: 1px solid rgba(212, 175, 55, 0.4);
  border-radius: 2px;
  background: rgba(212, 175, 55, 0.06);
}

.ktl-slide-label {
  flex: 1;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  min-width: 0;
}
.ktl-slide-num {
  font-family: 'JetBrains Mono', monospace;
  font-size: 14px;
  color: #d4af37;
  letter-spacing: 0.16em;
  font-weight: 600;
  padding: 6px 12px;
  border: 1px solid rgba(212, 175, 55, 0.35);
  background: rgba(212, 175, 55, 0.08);
  border-radius: 2px;
  flex-shrink: 0;
}
.ktl-slide-title {
  font-family: 'Noto Serif KR', serif;
  font-size: 22px;
  color: #fbfaf7;
  font-weight: 500;
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ktl-controls {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-shrink: 0;
}
.ktl-btn-icon {
  width: 40px;
  height: 40px;
  background: transparent;
  border: 1px solid rgba(251, 250, 247, 0.2);
  border-radius: 2px;
  color: rgba(251, 250, 247, 0.7);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 180ms ease;
}
.ktl-btn-icon:hover {
  border-color: #d4af37;
  color: #d4af37;
  background: rgba(212, 175, 55, 0.08);
}
.ktl-btn-icon svg { width: 18px; height: 18px; }

/* ═══════════════════════════════════════════════
   3. 스테이지 · 슬라이드 표시 영역
   ═══════════════════════════════════════════════ */
.ktl-stage {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  position: relative;
  padding: 40px 80px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ktl-stage::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(
      135deg,
      transparent 0,
      transparent 36px,
      rgba(212, 175, 55, 0.012) 36px,
      rgba(212, 175, 55, 0.012) 37px
    );
  pointer-events: none;
}

/* 슬라이드 인너 컨테이너 */
.ktl-slide-inner {
  width: 100%;
  max-width: 1400px;
  max-height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  background: #fbfaf7;
  color: #14202b;
  padding: 40px 60px;
  border-radius: 4px;
  box-shadow: 
    0 40px 80px -20px rgba(0, 0, 0, 0.5),
    0 20px 40px -12px rgba(0, 0, 0, 0.3);
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 400ms cubic-bezier(0.2, 0.7, 0.2, 1),
              transform 400ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
.ktl-stage.is-entered .ktl-slide-inner {
  opacity: 1;
  transform: translateY(0);
}
.ktl-stage.is-transitioning .ktl-slide-inner {
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity 200ms ease, transform 200ms ease;
}

/* 스크롤바 스타일 */
.ktl-slide-inner::-webkit-scrollbar {
  width: 8px;
}
.ktl-slide-inner::-webkit-scrollbar-track {
  background: transparent;
}
.ktl-slide-inner::-webkit-scrollbar-thumb {
  background: rgba(212, 175, 55, 0.4);
  border-radius: 4px;
}
.ktl-slide-inner::-webkit-scrollbar-thumb:hover {
  background: rgba(212, 175, 55, 0.6);
}

/* ═══════════════════════════════════════════════
   4. 슬라이드 내부 · 원본 스타일 유지하되 강의 최적화
   ═══════════════════════════════════════════════ */

/* 슬라이드 내부에서 섹션 여백 제거 (스테이지가 이미 여백 관리) */
.ktl-slide-inner section,
.ktl-slide-inner .case-section,
.ktl-slide-inner .hero,
.ktl-slide-inner .trust-section,
.ktl-slide-inner .why-section,
.ktl-slide-inner .structure-section,
.ktl-slide-inner .tax-section,
.ktl-slide-inner .family-section,
.ktl-slide-inner .ktrust-section,
.ktl-slide-inner .insurance-section,
.ktl-slide-inner .report-section,
.ktl-slide-inner .finale-section {
  padding: 20px 0 !important;
  min-height: auto !important;
}

/* Hero 슬라이드 · 하단 스크롤 힌트 숨김 */
.ktl-slide-inner .hero-scroll-hint {
  display: none !important;
}

/* Nav 숨김 (강의 모드에선 상단바가 대체) */
.ktl-slide-inner .site-nav {
  display: none !important;
}

/* Tweaks 패널 숨김 */
.ktl-slide-inner .tweaks-panel,
.ktl-slide-inner [class*="tweak"] {
  display: none !important;
}

/* ⭐ 큰 글자 · 강의자와 자산가 가독성 최우선 ⭐ */
.ktl-slide-inner .container {
  max-width: 100% !important;
  padding: 0 !important;
}

/* 눈에 잘 띄는 헤딩 */
.ktl-slide-inner h1,
.ktl-slide-inner .hero-title,
.ktl-slide-inner .case-hook {
  font-size: 3.2em !important;
  line-height: 1.25 !important;
}
.ktl-slide-inner h2,
.ktl-slide-inner .section-title,
.ktl-slide-inner .scenarios-title,
.ktl-slide-inner .worries-title,
.ktl-slide-inner .structure-title {
  font-size: 2.4em !important;
  line-height: 1.3 !important;
}
.ktl-slide-inner h3,
.ktl-slide-inner .panel-title,
.ktl-slide-inner .practice-title,
.ktl-slide-inner .profile-name {
  font-size: 1.9em !important;
  line-height: 1.35 !important;
}

/* 본문 텍스트 확대 */
.ktl-slide-inner p,
.ktl-slide-inner .section-desc,
.ktl-slide-inner .q-desc,
.ktl-slide-inner .worry-desc,
.ktl-slide-inner .layer-desc,
.ktl-slide-inner .practice-desc,
.ktl-slide-inner .case-hook-sub,
.ktl-slide-inner .scenarios-sub,
.ktl-slide-inner .story-event,
.ktl-slide-inner .sq-body,
.ktl-slide-inner .rc-desc {
  font-size: 1.15em !important;
  line-height: 1.75 !important;
}

/* 명언 · 강의 훅 */
.ktl-slide-inner .case-quote .quote-body,
.ktl-slide-inner .quote-body {
  font-size: 2em !important;
  line-height: 1.55 !important;
}

/* 숫자·수치 강조 */
.ktl-slide-inner .asset-value,
.ktl-slide-inner .outcome-value,
.ktl-slide-inner .rc-v,
.ktl-slide-inner .stat-value,
.ktl-slide-inner .q-value {
  font-size: 2em !important;
}

/* 오프닝 훅의 강조어 (200억, 96억) */
.ktl-slide-inner .case-hook .hook-line-2 em,
.ktl-slide-inner .case-hook .hook-line-3 em {
  font-size: 1.15em !important;
}

/* 걱정 카드 아이콘 */
.ktl-slide-inner .worry-icon {
  font-size: 2.4em !important;
}

/* 걱정 카드 제목 */
.ktl-slide-inner .worry-title {
  font-size: 1.5em !important;
}

/* 시나리오 탭 · 큰 인터랙션 영역 */
.ktl-slide-inner .scenario-tab {
  padding: 24px 28px !important;
  font-size: 1.1em !important;
}
.ktl-slide-inner .tab-code {
  font-size: 3em !important;
}
.ktl-slide-inner .tab-title {
  font-size: 1.15em !important;
}

/* 스토리 타임라인 · 강의 진행 시 잘 보이게 */
.ktl-slide-inner .story-time {
  font-size: 1em !important;
}
.ktl-slide-inner .story-event {
  font-size: 1.2em !important;
}

/* 층 다이어그램 (K-신탁 3층) */
.ktl-slide-inner .layer-title {
  font-size: 1.5em !important;
}
.ktl-slide-inner .layer-num {
  font-size: 2.8em !important;
}

/* CTA 버튼 · 큰 클릭 영역 */
.ktl-slide-inner .cta-btn,
.ktl-slide-inner .btn,
.ktl-slide-inner .diag-btn {
  padding: 20px 32px !important;
  font-size: 1.1em !important;
}
.ktl-slide-inner .cta-main {
  font-size: 1.3em !important;
}

/* 인용부호 크기 */
.ktl-slide-inner .quote-mark {
  font-size: 5em !important;
}

/* 통계 카드 (Why 섹션) */
.ktl-slide-inner [class*="stat-"] .stat-value,
.ktl-slide-inner .stat-number {
  font-size: 2.5em !important;
}

/* ═══════════════════════════════════════════════
   5. 하단바 · 네비게이션 + 진행률
   ═══════════════════════════════════════════════ */
.ktl-bottombar {
  flex: 0 0 auto;
  padding: 20px 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  border-top: 1px solid rgba(212, 175, 55, 0.15);
  background: rgba(10, 21, 32, 0.6);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}
.ktl-nav {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 24px;
  background: transparent;
  border: 1.5px solid rgba(251, 250, 247, 0.2);
  border-radius: 3px;
  color: #fbfaf7;
  cursor: pointer;
  font-family: inherit;
  font-size: 15px;
  font-weight: 500;
  transition: all 200ms ease;
  min-width: 120px;
  justify-content: center;
}
.ktl-nav:hover:not(:disabled) {
  border-color: #d4af37;
  color: #d4af37;
  background: rgba(212, 175, 55, 0.08);
  transform: translateY(-1px);
}
.ktl-nav:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}
.ktl-nav .ktl-arrow {
  font-size: 20px;
  font-weight: 300;
}

/* 진행률 · 도트 + 카운트 */
.ktl-progress {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 32px;
  min-width: 0;
}
.ktl-progress-dots {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
}
.ktl-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: rgba(251, 250, 247, 0.15);
  border: none;
  padding: 0;
  cursor: pointer;
  transition: all 220ms cubic-bezier(0.2, 0.7, 0.2, 1);
  flex-shrink: 0;
}
.ktl-dot:hover {
  background: rgba(212, 175, 55, 0.5);
  transform: scale(1.2);
}
.ktl-dot.is-past {
  background: rgba(212, 175, 55, 0.5);
}
.ktl-dot.is-active {
  background: #d4af37;
  width: 28px;
  border-radius: 6px;
  box-shadow: 0 0 12px rgba(212, 175, 55, 0.5);
}
.ktl-progress-count {
  font-family: 'JetBrains Mono', monospace;
  font-size: 14px;
  color: rgba(251, 250, 247, 0.7);
  letter-spacing: 0.08em;
  white-space: nowrap;
}
.ktl-progress-count #ktl-current {
  color: #d4af37;
  font-weight: 700;
  font-size: 16px;
}
.ktl-count-sep {
  margin: 0 4px;
  opacity: 0.4;
}

/* ═══════════════════════════════════════════════
   6. 힌트 (첫 진입 시 4초 표시)
   ═══════════════════════════════════════════════ */
.ktl-hint {
  position: fixed;
  bottom: 100px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 20px;
  background: rgba(15, 38, 55, 0.9);
  border: 1px solid rgba(212, 175, 55, 0.35);
  border-radius: 2px;
  color: #fbfaf7;
  font-size: 13px;
  z-index: 10000;
  opacity: 1;
  transition: opacity 500ms ease, transform 500ms ease;
  box-shadow: 0 20px 40px -12px rgba(0, 0, 0, 0.5);
}
.ktl-hint.is-hidden {
  opacity: 0;
  transform: translateX(-50%) translateY(20px);
  pointer-events: none;
}
.ktl-hint-key {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 28px;
  padding: 0 8px;
  background: rgba(212, 175, 55, 0.15);
  border: 1px solid rgba(212, 175, 55, 0.4);
  border-radius: 3px;
  color: #d4af37;
  font-family: 'JetBrains Mono', monospace;
  font-size: 14px;
  font-weight: 600;
}
.ktl-hint-text {
  color: rgba(251, 250, 247, 0.85);
  letter-spacing: 0.02em;
}

/* ═══════════════════════════════════════════════
   7. 반응형 · 큰 화면 (1400px+)
   ═══════════════════════════════════════════════ */
@media (min-width: 1400px) {
  .ktl-slide-inner {
    padding: 56px 80px;
  }
  .ktl-slide-inner h1,
  .ktl-slide-inner .hero-title,
  .ktl-slide-inner .case-hook {
    font-size: 3.6em !important;
  }
  .ktl-slide-inner .case-quote .quote-body {
    font-size: 2.4em !important;
  }
}

/* 큰 프로젝터 화면 (1920px+) */
@media (min-width: 1920px) {
  .ktl-slide-inner {
    max-width: 1600px;
    padding: 72px 100px;
  }
  .ktl-topbar { padding: 24px 60px; }
  .ktl-bottombar { padding: 24px 60px; }
  .ktl-slide-title { font-size: 26px; }
  .ktl-nav { padding: 16px 28px; font-size: 16px; min-width: 140px; }
}

/* ═══════════════════════════════════════════════
   8. 반응형 · 태블릿 (900px 이하)
   ═══════════════════════════════════════════════ */
@media (max-width: 900px) {
  .ktl-topbar { padding: 14px 20px; }
  .ktl-brand-sub { display: none; }
  .ktl-slide-title { font-size: 16px; }
  .ktl-stage { padding: 20px 24px; }
  .ktl-slide-inner { padding: 32px 28px; }
  .ktl-bottombar { padding: 14px 20px; gap: 12px; }
  .ktl-nav { min-width: 90px; padding: 10px 16px; font-size: 14px; }
  .ktl-nav .ktl-nav-label { display: none; }
  .ktl-progress { gap: 16px; }
  .ktl-dot { width: 10px; height: 10px; }
  .ktl-dot.is-active { width: 24px; }
  .ktl-slide-inner h1,
  .ktl-slide-inner .hero-title,
  .ktl-slide-inner .case-hook {
    font-size: 2.4em !important;
  }
  .ktl-slide-inner .quote-body { font-size: 1.5em !important; }
}

/* 스마트폰 · 강의 모드는 큰 화면 위주라 최소 지원만 */
@media (max-width: 640px) {
  .ktl-topbar { padding: 12px 14px; }
  .ktl-brand-name { font-size: 15px; }
  .ktl-slide-num { font-size: 11px; padding: 4px 8px; }
  .ktl-slide-title { display: none; }
  .ktl-stage { padding: 12px 14px; }
  .ktl-slide-inner { padding: 24px 20px; }
  .ktl-progress-count { font-size: 12px; }
  .ktl-dot { width: 8px; height: 8px; }
  .ktl-hint { bottom: 80px; padding: 10px 14px; font-size: 12px; }
  .ktl-hint-text { display: none; }
}

/* ═══════════════════════════════════════════════
   9. 접근성 · 모션 감소
   ═══════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .ktl-slide-inner {
    transition: opacity 100ms ease !important;
    transform: none !important;
  }
  .ktl-dot { transition: none !important; }
}