/*
 * deck-mobile.css — 공통 슬라이드 deck 모바일 세로 전용 레이아웃
 * 768px 이하에서만 작동. 데스크톱에는 영향 없음.
 * scaleDeck()이 박는 인라인 transform/opacity는 !important로 무력화.
 * 8개 deck이 같은 클래스 구조를 공유하므로 이 파일 하나로 공통 적용.
 */
@media (max-width: 768px) {
  /* ── 캔버스 스케일 해제 · 세로 스크롤 전환 ── */
  html, body {
    height: auto !important;
    min-height: 100% !important;
    overflow: auto !important;
    display: block !important;
    background: #fff !important;
  }
  .deck {
    width: 100% !important;
    height: auto !important;
    transform: none !important;
    overflow: visible !important;
  }

  /* ── 캐러셀: active 슬라이드만 세로로 펼침 ── */
  .slide {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    height: auto !important;
    min-height: 100vh;
    transform: none !important;
    opacity: 1 !important;
    transition: none !important;
    display: none !important;
    justify-content: flex-start !important;
    align-items: stretch !important;
    padding: 30px 18px 64px !important;
  }
  .slide.active { display: flex !important; }
  .slide.centered {
    justify-content: center !important;
    align-items: center !important;
    text-align: center;
  }
  .slide .body {
    justify-content: flex-start !important;
    gap: 14px !important;
    height: auto !important;
  }

  /* ── 멀티컬럼 grid → 1컬럼 ── */
  .tool-body, .two-block, .cards3, .glossary-grid {
    grid-template-columns: 1fr !important;
    height: auto !important;
    gap: 13px !important;
  }
  .tool-left, .tool-right { justify-content: flex-start !important; gap: 12px !important; }

  /* ── 파이프라인: 가로 → 세로 ── */
  .pipeline { flex-direction: column; align-items: stretch; gap: 6px; }
  .pipe-arrow { transform: rotate(90deg); padding: 2px 0; }
  .pipe-box { min-height: 0; padding: 12px 10px; }

  /* ── summary-table: table → 세로 카드 ── */
  .summary-table, .summary-table tbody, .summary-table tr, .summary-table td {
    display: block !important;
    width: auto !important;
  }
  .summary-table { border-spacing: 0 !important; }
  .summary-table tr { margin-bottom: 12px; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
  .summary-table td { border-radius: 0 !important; border: none !important; padding: 11px 14px !important; }
  .sum-step { text-align: left !important; }
  .sum-arrow { display: none !important; }

  /* ── 타이포 축소 ── */
  .title-badge { font-size: 12px; padding: 6px 14px; margin-bottom: 16px; }
  .title-main { font-size: 32px !important; margin-bottom: 12px; }
  .title-sub { font-size: 15.5px; margin-bottom: 20px; }
  .ending-main { font-size: 28px; }
  .ending-sub { font-size: 15px; }
  .slide-title { font-size: 24px !important; line-height: 1.15; }
  .step-label { font-size: 11px; }
  .info-block-text { font-size: 15.5px; }
  .info-block-text.sm { font-size: 14px; }
  .ai-note-text { font-size: 15px; }
  .li { font-size: 14.5px; }
  .glossary-term { font-size: 16px; }
  .glossary-def { font-size: 14px; }
  .card3 .n { font-size: 18px; }
  .card3 .d { font-size: 13.5px; }
  .summary-table td { font-size: 14.5px; }

  /* ── 고정 UI ── */
  .page-indicator { bottom: 10px; right: 14px; font-size: 11px; }
  .nav-zone { display: none !important; }
}