/*
 * clinic/assets/mobile.css
 * 모바일(≤ 768px) 공통 반응형 보강.
 * 각 페이지에서 <link rel="stylesheet" href="/clinic/assets/mobile.css"> 로 포함.
 */

@media (max-width: 768px) {

  /* ── 공통 ── */
  body { font-size: 15px; }

  .page, .report, .container { padding: 14px !important; }
  .card { padding: 16px !important; border-radius: 12px !important; margin-bottom: 12px !important; }

  /* 상단 큰 제목 축소 */
  h1 { font-size: 22px !important; line-height: 1.2 !important; }
  h2 { font-size: 18px !important; }
  h3 { font-size: 16px !important; }

  /* 그리드 → 1열로 */
  .exam-grid {
    grid-template-columns: 1fr !important;
    height: auto !important;
    padding: 12px !important;
  }
  .exam-grid .pane {
    max-height: none !important; height: auto !important;
    padding: 18px !important;
  }

  .kpi-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; }
  .card-grid { grid-template-columns: 1fr !important; }
  .reasons   { grid-template-columns: 1fr !important; gap: 8px !important; }

  /* 리포트 2단 → 1단 */
  .stat-card, .report-header { padding: 18px !important; }
  .stat-big { font-size: 24px !important; }

  /* 필터 바 ── 가로 스크롤 */
  .filter-bar {
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap !important;
    white-space: nowrap;
    padding: 10px 14px !important;
  }
  .filter-bar select, .filter-bar input { font-size: 14px; min-width: 100px; }

  /* 2단 레이아웃 카드 (exam.php 지문+문항) */
  .pane { max-height: 60vh; }

  /* Schulte Grid 축소 */
  .schulte-grid {
    grid-template-columns: repeat(5, 54px) !important;
    grid-template-rows:    repeat(5, 54px) !important;
  }
  .schulte-cell { font-size: 18px !important; }

  /* N-Back 자극 */
  .nback-stim {
    width: 200px !important; height: 200px !important;
    font-size: 90px !important;
  }

  /* 쓰기 에디터 */
  .editor { min-height: 280px !important; font-size: 15px !important; }

  /* 헤더·푸터 버튼 묶음 */
  .header-card, .card .flex { flex-wrap: wrap; gap: 8px; }

  /* 타임라인 */
  .timeline { padding-left: 20px !important; }
  .tl-dot { left: -16px !important; width: 10px !important; height: 10px !important; }

  /* 테이블 가로 스크롤 */
  table, .custom-table, .q-table {
    display: block !important; overflow-x: auto !important;
    white-space: nowrap !important;
    -webkit-overflow-scrolling: touch;
  }

  /* 버튼 Full width */
  .btn-primary, .submit-btn {
    width: 100% !important; padding: 14px !important;
  }

  /* 모달 */
  .modal-box { max-width: calc(100vw - 40px) !important; padding: 20px !important; }

  /* 인쇄 / 닫기 버튼 */
  .no-print .px-3, .no-print .px-4, .no-print .px-5 {
    padding: 8px 12px !important; font-size: 12px !important;
  }

  /* 설문 Likert 5버튼 가로 좁게 */
  .likert-row { gap: 4px !important; }
  .likert-opt { padding: 8px 2px !important; font-size: 10px !important; }
  .likert-num { font-size: 15px !important; }

  /* Chart 영역 */
  canvas { max-height: 260px !important; }

  /* 지문 본문 가독성 */
  .passage-body, .passage {
    font-size: 16px !important; line-height: 1.75 !important;
  }
  .passage-title { font-size: 20px !important; }
}

@media (max-width: 480px) {
  /* 초소형 화면 */
  .kpi-grid { grid-template-columns: 1fr !important; }
  .skills-mini { grid-template-columns: repeat(3, 1fr) !important; gap: 2px !important; }
  .skill-mini-val { font-size: 11px !important; }
  .skill-mini-lab { font-size: 8px !important; }
  .schulte-grid {
    grid-template-columns: repeat(5, 46px) !important;
    grid-template-rows:    repeat(5, 46px) !important;
  }
}