/* gateway/html/app-mode.css
 * beach.jejunolza.com 전용 — Capacitor 앱 웹뷰 모드 전용 오버라이드.
 * devplan/8/part8.md 8-3절 사양. 반드시 <head> 가장 마지막에 로드해 각 페이지의
 * 큰 인라인 <style> 블록을 !important로 오버라이드한다 (8-9 리스크 참고).
 */
.app-mode .nav,
.app-mode footer,
.app-mode .web-only { display: none !important; }

.app-mode body {
  padding-top: env(safe-area-inset-top);
  padding-bottom: calc(env(safe-area-inset-bottom) + 60px);
  overscroll-behavior-y: none;
}
/* ── 하단 고정 요소 보정 (9차 P-1 과 같은 유형) ──────────────────────────
 * body 의 padding-bottom 은 **일반 흐름**만 밀어낸다. position:fixed / sticky 인
 * 요소는 그 padding 을 무시하고 화면 맨 아래에 붙으므로, 앱 탭바(60px + safe-area)
 * 뒤로 그대로 숨는다. 실기기에서 "즐겨찾기에 저장했어요" 토스트가 안 보인 원인이다.
 * 새로 추가하는 하단 고정 요소는 반드시 여기에 같이 등록할 것.
 * ─────────────────────────────────────────────────────────────────── */
.app-mode .toast {
  bottom: calc(env(safe-area-inset-bottom) + 76px) !important;
}
/* 상세 페이지의 하단 액션 바(sticky)도 탭바 위로 올린다 */
.app-mode .actions {
  bottom: calc(env(safe-area-inset-bottom) + 60px) !important;
}
/* 액션 바가 있는 페이지는 토스트를 그 위로 (미지원 브라우저는 위 76px 로 폴백) */
.app-mode body:has(#action-bar) .toast {
  bottom: calc(env(safe-area-inset-bottom) + 140px) !important;
}

.app-mode { -webkit-touch-callout: none; }
.app-mode input, .app-mode textarea, .app-mode a { -webkit-touch-callout: default; }
/* 히어로가 상단 노치와 겹치지 않도록 */
.app-mode .hero { padding-top: 24px; }
