/* ═══════════════════════════════════════════════════════════
   mobile.css  —  수학데이 반응형 미디어쿼리 초안
   Phase 2 산출물

   브레이크포인트:
     ≥1024px  데스크탑 (기본 — common.css / 인라인 CSS 그대로)
     768~1023 태블릿  (사이드바 축소, 2열 그리드 유지)
     ≤767px   모바일  (사이드바 햄버거, 그리드 1~2열)
     ≤360px   소형폰  (전체 1열, 폰트/여백 추가 축소)

   캐스케이드:  기존 <style> → common.css → mobile.css (이 파일)
   → 이 파일이 마지막이므로 특이성 한 단계 높이기(body .main 등)로
     인라인 CSS를 오버라이드. !important는 최후 수단만 사용.
═══════════════════════════════════════════════════════════ */

/* ────────────────────────────────────────────────────────
   A. 태블릿  768px ~ 1023px
──────────────────────────────────────────────────────── */
@media (max-width: 1023px) {

  /* 사이드바: 너비 축소 */
  .sidebar { width: 220px; }

  /* 문제 그리드: pg-std / pg-wide → 2열 */
  body .pg-std  { grid-template-columns: repeat(2, 1fr); }
  body .pg-wide { grid-template-columns: repeat(2, 1fr); }
  /* pg-2col은 2열 유지 */

  /* 메인 패딩 */
  body .main { padding: 16px; }

  /* 탑바 광고 영역 숨김 (태블릿부터) */
  .topbar-ad { display: none; }
}

/* ────────────────────────────────────────────────────────
   B. 모바일  ≤ 767px
──────────────────────────────────────────────────────── */
@media (max-width: 767px) {

  /* ── 탑바 ── */
  .topbar { padding: 0 12px; gap: 8px; }

  /* 햄버거 버튼 표시 */
  .hamburger-btn { display: flex; }

  /* ── 사이드바 → 오프-캔버스 ──
     .topbar(z-index:200, height:56px)가 고정 상단이므로
     사이드바는 그 아래(top:56px)부터 시작시켜 첫 항목(예: 1학년)이 가려지지 않게 함 */
  .sidebar {
    position: fixed;
    top: 56px; left: 0; bottom: 0;
    width: 280px;
    transform: translateX(-100%);
    transition: transform .25s ease;
    z-index: 190;
    box-shadow: 4px 0 24px rgba(0,0,0,.18);
    overflow-y: auto;
  }
  .sidebar.open { transform: translateX(0); }

  /* 사이드바 오버레이 */
  .sidebar-overlay { display: none; }
  .sidebar-overlay.on { display: block; }

  /* ── 레이아웃 ── */
  .layout { min-height: calc(100vh - 100px); }
  body .main { padding: 12px; }

  /* ── 학교 탭 ── */
  .school-tabs { padding: 0 12px; }
  .school-tab  { padding: 10px 16px; font-size: 13px; }

  /* ── 문제 그리드 ── */
  body .pg-std  { grid-template-columns: repeat(2, 1fr); gap: 10px 8px; }
  body .pg-wide { grid-template-columns: repeat(2, 1fr); gap: 10px 8px; }
  body .pg-2col { grid-template-columns: 1fr;            gap: 10px; }

  /* ── 워크시트 프레임 ── */
  body .ws          { padding: 20px 14px; }
  body .ws-hd       { flex-direction: column; gap: 10px; }
  body .ws-meta     { text-align: left; }
  body .ws-title    { font-size: 22px; }

  /* ── 타이포 하한 (iOS 자동 확대 방지) ── */
  body { font-size: 16px; }
  body .unit-title   { font-size: 20px; }
  body .welcome h2   { font-size: 24px; }
  body .eq           { font-size: 18px; line-height: 2.2; }

  /* ── 옵션 박스 ── */
  body .options-box  { flex-direction: column; align-items: flex-start; gap: 12px; }
  body .btn-gen      { margin-left: 0; width: 100%; justify-content: center; display: flex; }

  /* ── 미리보기 버튼 바 ── */
  .preview-bar { gap: 8px; }
  .btn-t       { font-size: 12px; padding: 9px 14px; }

  /* ── 정답 모달 ── */
  .modal       { padding: 20px 16px; }
  .ans-grid    { grid-template-columns: repeat(4, 1fr); }

  /* ── 유형 카드 그리드 ── */
  .type-grid   { grid-template-columns: repeat(2, 1fr); }

  /* ── 광고 행 높이 ── */
  .ad-row      { height: 60px; }
}

/* ────────────────────────────────────────────────────────
   B-2. 모던 스마트폰  ≤ 480px  (2026-05-05 추가)
   배경: iPhone 14/15 (393px), Pixel 7 (412px), Galaxy S24 (384px) 등
        모던 모바일 폰 폭이 361~480 구간에 분포해 ≤767 의 2열 규칙을
        받아 grid 1fr 컬럼 min-content 가 viewport 를 초과 → 짝수 카드가
        화면 오른쪽 너머로 잘리는 현상 발생.
        (HANDOFF_iOS그리드breakpoint확장_20260505.md 참고)
   조치: 그리드 1열 임계값을 360 → 480 으로 확장. 타이포·여백 등 그 외
        축소 규칙은 ≤360 그대로 유지하여 영향 범위 최소화.
──────────────────────────────────────────────────────── */
@media (max-width: 480px) {
  /* 문제 그리드: 전체 1열 (소형 + 모던 폰 모두 적용) */
  body .pg-std  { grid-template-columns: 1fr; }
  body .pg-wide { grid-template-columns: 1fr; }
  body .pg-2col { grid-template-columns: 1fr; }
}

/* ────────────────────────────────────────────────────────
   C. 소형폰  ≤ 360px
──────────────────────────────────────────────────────── */
@media (max-width: 360px) {

  /* ── 문제 그리드: 전체 1열 ── */
  body .pg-std  { grid-template-columns: 1fr; }
  body .pg-wide { grid-template-columns: 1fr; }
  body .pg-2col { grid-template-columns: 1fr; }

  /* ── 탑바 ── */
  .logo         { font-size: 22px; }
  .topbar       { height: 52px; }

  /* ── 타이포 추가 축소 ── */
  body          { font-size: 16px; } /* 하한 유지 */
  body .unit-title { font-size: 20px; }
  body .eq         { font-size: 18px; }
  .split-top    { width: 36px; height: 36px; font-size: 20px; }
  .split-box    { width: 32px; height: 32px; font-size: 18px; }

  /* ── 여백 ── */
  body .main    { padding: 8px; }
  body .ws      { padding: 16px 10px; }

  /* ── 워크시트 메타 ── */
  body .ws-hd   { padding-bottom: 10px; margin-bottom: 12px; }

  /* ── QR 섹션 ── */
  .qr-section   { flex-direction: column; align-items: flex-start; gap: 10px; }

  /* ── 정답 모달 ── */
  .ans-grid     { grid-template-columns: repeat(3, 1fr); }

  /* ── 유형 카드 ── */
  .type-grid    { grid-template-columns: 1fr; }

  /* ── 슬라이더 ── */
  .slider-row input { width: 100%; }
  .slider-row       { width: 100%; }

  /* ── 사이드바 너비 (소형폰은 화면 가득) ──
     소형폰에선 .topbar 높이가 52px로 줄어들므로 사이드바 top도 맞춰 52px */
  .sidebar { width: min(280px, 85vw); top: 52px; }
}

/* ────────────────────────────────────────────────────────
   D. 인쇄 시 반응형 오버라이드 해제
   (mobile.css 규칙이 인쇄 레이아웃을 깨지 않도록)
──────────────────────────────────────────────────────── */
@media print {
  .hamburger-btn, .sidebar-overlay { display: none !important; }
  .sidebar {
    position: static !important;
    transform: none !important;
    display: none !important;
  }
  body .pg-std  { grid-template-columns: repeat(4, 1fr) !important; }
  body .pg-wide { grid-template-columns: repeat(3, 1fr) !important; }
  body .pg-2col { grid-template-columns: repeat(2, 1fr) !important; }
}