/* Responsive overrides — 태블릿 baseline (7~11" 600~1024px) 우선
 *
 * 설계 원칙:
 *   1. 태블릿 portrait (768~1024)이 1차 디자인 캔버스. 데스크톱은 여백 확장,
 *      모바일은 단단 stack으로 *역방향* 파생.
 *   2. 터치 타겟 최소 44px (Apple HIG / Google M3 권장).
 *   3. 페이지별 미디어 쿼리는 각 *.css 내부에서, 공용 룰만 여기.
 */

/* ── 태블릿 landscape & 좁은 데스크톱 (≤1024) ─────────────────── */
@media (max-width: 1024px) {
  .container, .container--narrow { padding: 0 var(--space-5); }
}

/* ── 터치 디바이스 (≤1024) — 터치 타겟 44px 전역 ───────────────
 * WHY: Apple HIG / Google M3 권장 최소 터치 타겟 44px.
 * 기존엔 min-width:600 조건 때문에 모바일(<600px)에서 누락 → 모바일 미스탭 위험.
 * 룰을 max-width:1024 단독으로 확장해 태블릿+모바일 동시 커버. .btn--sm은 36px 예외 유지. */
@media (max-width: 1024px) {
  .btn,
  .field__input,
  .field__textarea,
  .field__select,
  input[type="text"],
  input[type="email"],
  textarea,
  select {
    min-height: 44px;
  }
  .btn--sm { min-height: 36px; }
}

/* ── 태블릿 portrait (600~1024) — baseline 캔버스 ───────────────
 * 폼 라벨 가독성 등 태블릿 한정 룰. */
@media (min-width: 600px) and (max-width: 1024px) {
  .field__label { font-size: var(--fz-14); }
}

/* ── 큰 폰/소형 태블릿 (≤720) ─────────────────────────────────── */
@media (max-width: 720px) {
  .section { padding: var(--space-10) 0; }
  .hero { padding: var(--space-12) 0 var(--space-8); }
  .guided-step { padding: var(--space-5); }
  .stepper { padding: var(--space-4) var(--space-5); }
  .g-nav { padding: 8px 14px; }
  .g-logo__sub { display: none; }
  /* nav 링크 스크롤 가능 (좁은 폰에서 잘림 방지) */
  .g-nav__links {
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .g-nav__links::-webkit-scrollbar { display: none; }
  .g-nav__links a { white-space: nowrap; }
  /* WHY: 좁은 폰에서 actions(모델픽커+시력보호+테마토글+햄버거)가 가로폭을 초과해
     햄버거가 잘려보이는 문제 — 모델픽커 라벨/테마 라벨을 숨겨 폭을 확보. */
  .g-nav__actions { gap: 6px; }
  .mpick__btn { padding: 7px 10px; }
  .mpick__btn [data-mpick-current] { max-width: 80px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

/* ── 모바일 (≤480) — actions 극압축 ───────────────────────────── */
@media (max-width: 480px) {
  .g-nav__actions { gap: 4px; }
  .g-nav { padding: 6px 10px; }
  /* 모델 현재값 라벨 자체를 숨겨 햄버거 노출 보장 — 모델 변경은 햄버거 메뉴 열고 진행 */
  .mpick__btn [data-mpick-current] { display: none; }
  .mpick__btn { padding: 8px 10px; }
  .mpick__caret { display: none; }
  .eyecare__btn { width: 38px; height: 38px; padding: 0; }
  .g-logo__text { font-size: var(--fz-13); }
}

/* ── 모바일 (≤480) — 본문 ─────────────────────────────────────── */
@media (max-width: 480px) {
  body { font-size: 15px; }
  .btn--lg { padding: 12px 18px; font-size: 14px; }
  .hero__cta .btn { width: 100%; min-width: 0; }
  .container, .container--narrow { padding: 0 var(--space-4); }
}

/* ── 가로 모드 작은 태블릿 (height ≤ 600 landscape) — 코치 panel sticky 해제 */
@media (max-height: 600px) and (orientation: landscape) {
  .tutor-pane--coach { position: static; }
}

/* ── 모바일 (≤720) — Guided & Tutor 반응형 개선 ──────────────────
 * 목표: 행간 균등화, 요소 간격 통일, 모바일 가독성 개선 */
@media (max-width: 720px) {
  /* 스테퍼 + 카드 사이 간격 축소로 수직 공간 활용도 개선 */
  .guided-shell { gap: 8px; padding-bottom: var(--space-10); }
  .stepper { padding: var(--space-4) var(--space-4); }

  /* 필드 간격 균등화 — 전체 수직 리듬 일관성 */
  .field { gap: 6px; }

  /* 카드 내부 padding 균등화 */
  .guided-step { padding: var(--space-5); gap: var(--space-5); }

  /* 텍스트영역/입력칸 line-height 개선 */
  textarea, .field__textarea { line-height: 1.6; }

  /* 스테퍼 항목 내부 간격 조정 */
  .stepper__item { gap: 8px; }
}

/* ── 모바일 (≤480) — 극압축 모드 ────────────────────────────────── */
@media (max-width: 480px) {
  /* 스테퍼 간격 추가 축소 */
  .stepper { padding: var(--space-3) var(--space-3); gap: 8px; }

  /* 카드 padding 더 축소 */
  .guided-step { padding: var(--space-4); gap: var(--space-4); }
}