/* ============================================================
   모바일 / Capacitor 반응형 하드닝 (Phase 2)
   - 안전영역(노치/홈 인디케이터), iOS 입력 확대 방지, 터치 타깃, dvh
   - index.html 의 인라인 <style> 이후에 로드되어 동등 우선순위 규칙을 덮어씁니다.
   - env(safe-area-inset-*) 는 일반 브라우저에서 0 이므로, 설치형 PWA/네이티브에서만
     실제 효과가 납니다 → 데스크톱·모바일 웹 외관은 그대로 유지됩니다.
   ============================================================ */

/* ── 1) 뷰포트 높이: dvh (모바일 주소창 변동 대응), vh 폴백 ── */
.app        { min-height: 100vh; min-height: 100dvh; }
.login-page { min-height: 100vh; min-height: 100dvh; }

/* ── 2) 터치 느낌 개선 (전 화면 공통) ── */
* { -webkit-tap-highlight-color: transparent; }
button, a, .nav-item, .top-nav-item, .menu-card, .menu-list-item, .tab-btn, .engine-btn {
  touch-action: manipulation;   /* 더블탭 확대 지연 제거 */
}
body { overscroll-behavior-y: none; }   /* 당겨서 새로고침/바운스 흰 영역 방지 */

/* ── 3) 모바일 전용 (<768px): 안전영역 + 터치 타깃 + 입력 확대 방지 ── */
@media (max-width: 767px) {
  /* 상단 바: 노치(위)·곡면(좌우) 안전영역. 콘텐츠 64px 영역은 노치 아래에 위치 */
  .top-bar {
    height: calc(64px + env(safe-area-inset-top));
    padding-top: env(safe-area-inset-top);
    padding-left: max(16px, env(safe-area-inset-left));
    padding-right: max(16px, env(safe-area-inset-right));
  }

  /* 하단 탭바: 홈 인디케이터 영역만큼 아래 패딩 (배경은 끝까지, 아이콘은 위로) */
  .bottom-nav { padding-bottom: env(safe-area-inset-bottom); }
  .nav-item   { min-height: 50px; justify-content: center; }  /* 터치 타깃 ≥44px */

  /* 페이지 하단 여백: 하단바 높이 + 안전영역 (콘텐츠가 탭바에 가리지 않도록) */
  .pages { padding-bottom: calc(62px + env(safe-area-inset-bottom)); }

  /* 본문 좌우 안전영역 */
  .wrap {
    padding-left: max(16px, env(safe-area-inset-left));
    padding-right: max(16px, env(safe-area-inset-right));
  }

  /* 로그인 화면 안전영역 */
  .login-page {
    padding-top: max(24px, env(safe-area-inset-top));
    padding-bottom: max(24px, env(safe-area-inset-bottom));
    padding-left: max(20px, env(safe-area-inset-left));
    padding-right: max(20px, env(safe-area-inset-right));
  }

  /* iOS: 입력 포커스 시 자동 확대(zoom) 방지를 위해 16px 이상 강제 */
  input[type="text"], input[type="password"], input[type="email"],
  input[type="number"], input[type="tel"], input[type="search"],
  input[type="date"], textarea, select {
    font-size: 16px;
  }

  /* 일반 버튼 터치 타깃 하한 (너무 작은 버튼 방지) */
  .btn, .logout-btn, .tab-btn { min-height: 40px; }

  /* AI 챗봇 플로팅 패널: 모바일에선 전체 화면 폭 (인라인 380px 덮어쓰기) */
  #aiChatPanel {
    width: 100% !important;
    max-width: 100% !important;
    padding-bottom: env(safe-area-inset-bottom);
  }
}

/* ── 4) 가로 모드/작은 높이에서 하단바가 콘텐츠를 너무 가리지 않도록 ── */
@media (max-width: 767px) and (orientation: landscape) {
  .nav-item { min-height: 44px; padding-top: 4px; padding-bottom: 4px; }
}