/* mobile-common.css — 모든 페이지가 같이 쓰는 모바일(≤640px) 규칙.
   테마 CSS 뒤에 걸어서 좁은 화면에서만 덮어쓴다. */
@media (max-width: 640px) {
  html { -webkit-text-size-adjust: 100%; }
  body { padding-bottom: calc(96px + env(safe-area-inset-bottom)) !important; }

  /* 손가락 크기 */
  select, input[type="text"], input[type="date"], input[type="number"] {
    font-size: 16px !important; padding: 8px 10px !important; border-radius: 8px !important; min-height: 40px;
  }
  .btn, .move-btn { min-height: 40px; display: inline-flex; align-items: center; justify-content: center; }

  /* 오른쪽 떠 있는 버튼: 작게, 겹치지 않게 */
  html body #magFab, html body #userFab, html body #helpFab, html body #scrapFab {
    position: fixed !important;   /* 스크랩 버튼은 페이지에 따라 위치 규칙이 없어 흐름에 남아 있었다 */
    top: auto !important; left: auto !important; transform: none !important;
    width: 40px !important; height: 40px !important;
    border-radius: 50% !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
    background: #fff !important; border: 2px solid var(--main, #ff8fa3) !important; color: var(--main, #ff8fa3) !important;
    z-index: 9000 !important;
    right: 8px !important;
    font-size: 17px !important;
    opacity: .92 !important;
    box-shadow: 0 3px 10px rgba(0,0,0,.12) !important;
  }
  html body #userFab  { bottom: calc(12px + env(safe-area-inset-bottom)) !important; }
  html body #magFab   { bottom: calc(60px + env(safe-area-inset-bottom)) !important; }
  html body #helpFab  { bottom: calc(108px + env(safe-area-inset-bottom)) !important; }
  html body #scrapFab { bottom: calc(156px + env(safe-area-inset-bottom)) !important; }

  /* 오딘 AI 루트 안내 시트가 아래에서 열리면 route_guide.js 가 세 버튼을 위로 올리는데
     도움말(?) 버튼은 빠져 있어 시트 뒤에 숨었다. 같이 올린다. */
  html body.odin-guide-on #helpFab { bottom: calc(var(--odin-guide-h, 200px) + 200px) !important; }

  /* 체험 배지 */
  html body .odin-trial-badge { top: calc(10px + env(safe-area-inset-top)) !important; right: 10px !important; padding: 5px 11px !important; font-size: 12px !important; }

  /* 첫 설정 팝업 폭 */
  #odin-setup-overlay { width: 100vw !important; max-width: 100vw !important; }
  #odin-setup-overlay > * { max-width: calc(100vw - 24px) !important; }
}