/* ============================================================
   mobile.css — 모바일 전용 최적화 레이어 (PC 무변경)
   - 가장 마지막에 로드되어 @media (max-width:768px) 범위만 덮어쓴다.
   - PC(>768px)에는 어떤 규칙도 적용되지 않는다.
   ============================================================ */

/* 전화 버튼 '전화 상담' 문구 — PC에서는 숨김(모바일에서만 노출) */
.floating-cta-phone-text { display: none; }

@media (max-width: 768px) {

  /* ---------- 전역: 가로 오버플로 차단 ---------- */
  html, body { max-width: 100%; overflow-x: hidden; }
  img, svg, video, iframe { max-width: 100%; height: auto; }

  /* ---------- HERO (hero.css에 모바일 규칙 부재 → 신규 대응) ---------- */
  .hero { margin-top: 60px; min-height: auto; }
  .hero-container {
    grid-template-columns: 1fr !important;
    gap: 34px !important;
    padding: 30px 20px !important;
  }
  .hero-title { font-size: 2.35rem !important; line-height: 1.2 !important; margin-bottom: 22px !important; }
  .hero-title .highlight::after { bottom: -4px; height: 2px; }
  .hero-hi-touch-lede { font-size: 0.97rem !important; line-height: 1.6 !important; }
  .premium-badge { transform: none !important; }
  .hero-visual-panel { padding: 16px 16px !important; }

  /* 히어로 CTA: 세로 풀폭 버튼 */
  .cta-wrapper { flex-direction: column !important; gap: 10px !important; align-items: stretch !important; }
  .hero-cta, .secondary-cta { width: 100% !important; justify-content: center !important; text-align: center; }

  /* 우측 통계 카드: 2열 압축 + 장식 궤도 숨김 */
  .stats-container { width: 100% !important; min-height: auto !important; }
  .orbit-container { display: none !important; }
  .stats-grid { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
  .stat-card { padding: 16px 14px !important; }

  /* ---------- 공통 섹션 여백/타이포 축소 ---------- */
  .section-container { padding-left: 18px !important; padding-right: 18px !important; }
  .about-section, .systems-section, .curriculum-section,
  .testimonials-section, .students-section, .persona-section {
    padding-top: 54px !important;
    padding-bottom: 54px !important;
  }
  .section-title { font-size: 1.9rem !important; line-height: 1.3 !important; }
  .section-subtitle { font-size: 0.96rem !important; }
  .section-badge { font-size: 0.78rem !important; padding: 6px 16px !important; }

  /* ---------- 학습 원리/시스템 버튼 ---------- */
  .systems-mechanism-btn { width: 100%; }

  /* ---------- 커리큘럼 요약: 1열 ---------- */
  .curriculum-courses { grid-template-columns: 1fr !important; gap: 12px !important; }
  .curriculum-flow { gap: 8px !important; }
  .curriculum-flow li { flex: 1 1 100% !important; }
  .curriculum-more-btn { width: 100%; justify-content: center; }

  /* ---------- 우수 학생: 모바일 미니멀 정적 카드 (캐러셀/블러 잰크 제거) ---------- */
  /* backdrop-filter blur + 절대배치 캐러셀이 스크롤 끊김의 주범 → 활성 1장만 normal flow로 */
  .students-slider-wrapper {
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: none !important;
  }
  .slider-container {
    min-height: auto !important;
    height: auto !important;
    touch-action: pan-y;
  }
  .slider-wrapper { height: auto !important; display: block !important; }
  .student-card {
    position: relative !important;
    left: auto !important; top: auto !important; right: auto !important; bottom: auto !important;
    transform: none !important;
    width: 100% !important;
    max-width: 380px !important;
    height: auto !important;
    margin: 0 auto !important;
    opacity: 1 !important;
    padding: 22px !important;
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 22px !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28) !important;
    transition: none !important;
  }
  .student-card:not(.active) { display: none !important; }
  .student-card::before, .student-card::after,
  .overall-score::before { display: none !important; animation: none !important; }
  .nav-button { display: none !important; }   /* 좌우 화살표 숨김 — 점 네비로 전환 */
  .dot-nav { margin-top: 16px !important; }
  .student-info h3 { font-size: 1.3rem !important; }
  .overall-score-value { font-size: 2.2rem !important; }
  .stats-grid { gap: 8px !important; }

  /* ---------- VOICES 후기 미리보기: 1열 ---------- */
  .voices-preview { grid-template-columns: 1fr !important; gap: 12px !important; }
  .voices-place-card { padding: 1.1rem 1.1rem 1rem !important; }
  .voices-place-card__main { flex-direction: column !important; }
  .voices-fullcta { width: 100%; }

  /* ---------- 푸터: 1열 ---------- */
  .footer-content { grid-template-columns: 1fr !important; gap: 28px !important; text-align: left; }
  .footer-section ul li a { font-size: 1rem !important; }

  /* ---------- 성능: 무거운 무한 장식 애니메이션 정지 ---------- */
  .cube, .cube-container,
  .orbit, .orbit-dot,
  .students-section::after,
  .about-summary::before,
  .student-card::before,
  .overall-score::before {
    animation: none !important;
  }
}

/* ---------- 초소형 단말 ---------- */
@media (max-width: 480px) {
  .hero-title { font-size: 2.0rem !important; }
  .section-title { font-size: 1.62rem !important; }
  .stats-grid { grid-template-columns: 1fr !important; }
  .student-card { width: 92vw !important; }
}

/* ============================================================
   모바일 CTA — 하단 고정 수평 바 (네이버 예약 + 전화 2개)
   ============================================================ */
@media (max-width: 768px) {
  /* 헤더 '무료 학습 진단 신청' 버튼 — 상단 가림 → 숨김 */
  .nav-cta { display: none !important; }

  /* 본문이 하단 바에 가리지 않도록 여백 */
  body { padding-bottom: 60px !important; }

  /* 우측 레일 → 하단 고정 수평 바 */
  .floating-cta-panel {
    top: auto !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    transform: none !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    flex-direction: row !important;
    align-items: stretch !important;
    gap: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
    border: none !important;
    border-top: 1px solid rgba(255, 255, 255, 0.14) !important;
    background: rgba(18, 20, 30, 0.97) !important;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.32) !important;
    overflow: visible !important;   /* 예약 드롭다운(위로 펼침)이 잘리지 않도록 */
    z-index: 10060 !important;
  }

  /* 전화·예약 외 항목 숨김 */
  .floating-cta-item--light:not(.floating-cta-item--phone) { display: none !important; }

  /* 예약 + 전화 = 화면 폭 각 정확히 50% (flex 1 1 0 균등 분할) */
  .floating-cta-booking { flex: 1 1 0 !important; width: 50% !important; min-width: 0 !important; max-width: 50% !important; position: relative !important; }
  .floating-cta-booking-toggle { width: 100% !important; }
  .floating-cta-item--phone { flex: 1 1 0 !important; width: 50% !important; min-width: 0 !important; max-width: 50% !important; border-left: 1px solid rgba(255, 255, 255, 0.12) !important; }

  /* 다크 바에 맞게 항목 색 통일: 투명 배경 + 흰 아이콘/글자
     (아이콘 stroke=currentColor → color:#fff 면 흰 아이콘, --light의 흰 배경/검정 글자 무력화) */
  .floating-cta-panel .floating-cta-booking-toggle,
  .floating-cta-panel .floating-cta-item--phone {
    background: transparent !important;
    color: #ffffff !important;
  }
  .floating-cta-panel .floating-cta-icon { color: #ffffff !important; }
  .floating-cta-panel .floating-cta-label,
  .floating-cta-panel .floating-cta-chevron { color: #ffffff !important; }

  /* 전화 버튼: '전화 상담' + 전화번호 2줄 표시 (기존 번호 라벨은 숨김) */
  .floating-cta-item--phone .floating-cta-label { display: none !important; }
  /* 예약·전화 버튼 내용 — 버튼 중앙(수평·수직) 정렬 */
  .floating-cta-panel .floating-cta-booking-toggle,
  .floating-cta-panel .floating-cta-item--phone {
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* 아이콘 + 전화 상담 + 번호 한 줄, 중앙정렬 */
  .floating-cta-phone-text {
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 5px !important;
    white-space: nowrap !important;
    color: #fff !important;
  }
  .floating-cta-phone-text .fct-top { font-size: 0.85rem !important; font-weight: 700 !important; }
  .floating-cta-phone-text .fct-num { font-size: 0.8rem !important; font-weight: 600 !important; color: rgba(255, 255, 255, 0.9) !important; }
  .floating-cta-item--phone { justify-content: center !important; gap: 6px !important; }
  .floating-cta-item--phone .floating-cta-icon { width: 18px !important; height: 18px !important; }
  .floating-cta-item--phone .floating-cta-icon svg { width: 18px !important; height: 18px !important; }

  .floating-cta-booking-toggle,
  .floating-cta-item--phone,
  .floating-cta-item--primary {
    width: 100% !important;
    height: 60px !important;
    min-height: 60px !important;   /* floating-cta.css min-height(64/76) 무력화 — 두 버튼 동일 높이 */
    max-height: 60px !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    border-radius: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }
  .floating-cta-icon { width: 20px !important; height: 20px !important; margin: 0 !important; }
  .floating-cta-icon svg { width: 20px !important; height: 20px !important; }
  .floating-cta-label { font-size: 0.92rem !important; line-height: 1.15 !important; text-align: left; }
  .floating-cta-label br { display: none !important; }

  /* 예약 드롭다운: 바 위로 펼침 */
  .floating-cta-booking-menu {
    position: absolute !important;
    bottom: 100% !important;
    top: auto !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    flex-direction: column !important;
    border-radius: 12px 12px 0 0 !important;
    box-shadow: 0 -6px 18px rgba(0, 0, 0, 0.3) !important;
  }
}