/* ───────────────────────────────────────────────
   Mobile & Responsive enhancements
   Append 후 로드: <link rel="stylesheet" href="/static/mobile.css">
   기존 support.css에 *추가*하는 형태 (덮어쓰기 아님)
─────────────────────────────────────────────── */

/* 1. 터치 타겟 최소 44x44 (Apple HIG / WCAG 2.5.5) */
@media (hover: none) and (pointer: coarse) {
  button, .btn, a.btn, input[type=button], input[type=submit],
  .btn-icon, .nav-link, .action, [role="button"] {
    min-height: 44px;
    min-width: 44px;
    padding: 10px 14px;
  }
  input, textarea, select {
    min-height: 44px;
    font-size: 16px; /* iOS Safari가 자동 줌 하지 않도록 */
  }
}

/* 2. iOS 안전 영역 (노치) */
:root {
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
}
@supports (padding: max(0px)) {
  .topbar, header.topbar {
    padding-top: max(10px, var(--safe-top));
    padding-left: max(12px, var(--safe-left));
    padding-right: max(12px, var(--safe-right));
  }
  body, .page, .container {
    padding-bottom: max(0px, var(--safe-bottom));
  }
}

/* 3. 뷰포트 단위 버그(iOS) 대응용 유틸 */
.h-dvh { height: 100dvh; }
.h-svh { height: 100svh; }

/* 4. 가로 스크롤 방지 (디버그 중 흔한 실수) */
html, body { overflow-x: hidden; max-width: 100vw; }

/* 5. 모바일 타이포그래피 */
@media (max-width: 640px) {
  :root { font-size: 15px; }
  h1 { font-size: 22px; line-height: 1.3; }
  h2 { font-size: 18px; line-height: 1.35; }
  h3 { font-size: 16px; }
  p, li { line-height: 1.65; }
  .container, main { padding: 14px; }
  .card, .panel { padding: 12px; border-radius: 12px; }
  /* 테이블은 가로 스크롤 */
  table { display: block; overflow-x: auto; white-space: nowrap; }
  /* 그리드 단일 컬럼 */
  .grid, .cols-2, .cols-3, .cols-4 { grid-template-columns: 1fr !important; }
}

/* 6. 모달/드로어: 전체 화면 */
@media (max-width: 640px) {
  .modal, .dialog { inset: 0 !important; width: 100% !important; max-width: 100% !important;
    max-height: 100dvh !important; border-radius: 0 !important; }
  .modal-content, .dialog-body { padding: 16px; }
}

/* 7. 고대비 모드 */
@media (prefers-contrast: more) {
  :root { --border: rgba(148,163,184,.4); --muted: #c8d0de; }
  button, .btn { outline: 1px solid rgba(255,255,255,.25); }
}

/* 8. 다크 ↔ 라이트 전환 대비 (사용자가 시스템 설정 변경 시) */
@media (prefers-color-scheme: light) {
  /* 강제로 다크 유지하려면 아무것도 하지 않음 */
}

/* 9. 스크롤 시 주소창 접힘 대응 */
.fit-viewport { min-height: 100dvh; }

/* 10. 포커스 가시성 개선 (키보드 사용자) */
:focus-visible {
  outline: 2px solid var(--brand, #6384ff);
  outline-offset: 2px;
  border-radius: 6px;
}

/* 11. 이미지 반응형 기본값 */
img { max-width: 100%; height: auto; }

/* 12. 상단 바 모바일 - 로고는 축소, 메뉴는 우측 */
@media (max-width: 480px) {
  .topbar .logo { font-size: 14px; }
  .topbar .menu { gap: 6px; }
  .topbar .menu a { padding: 6px 8px; font-size: 13px; }
}