/* 모바일·전체화면 호환 (js/mobile-view.js). PC(폭 769px 이상이면서 높이 501px 이상)는 영향 없음. */
@supports (height: 100dvh) {
  html, body { height: 100dvh; } /* 모바일 주소창 높이 변화 — 지원 안 하면 style.css 의 100% */
}
#topbar-toggle { display: none; }

@media (max-width: 768px), (max-height: 500px) {
  #topbar {
    max-height: 60vh;
    max-height: 60dvh;
    min-height: 0;
    overflow-y: auto; /* 아래 #map-wrap 최소 높이만큼 줄어들고 안에서 스크롤 */
    padding-top: max(8px, env(safe-area-inset-top));
    padding-left: max(12px, env(safe-area-inset-left));
    padding-right: max(12px, env(safe-area-inset-right));
  }
  #topbar-toggle { display: inline-block; }
  /* 접힘(모바일 기본): 첫 줄만 한 줄 가로 스크롤, 필터 줄·바코드 찾기·현황 카드 숨김 */
  body.topbar-compact #topbar { gap: 4px; padding-bottom: 4px; }
  body.topbar-compact #topbar > .topbar-row:first-child { flex-wrap: nowrap; overflow-x: auto; }
  body.topbar-compact #topbar > .topbar-row:first-child > * { flex-shrink: 0; }
  body.topbar-compact #topbar > .topbar-row:first-child > #round-select { flex: 0 1 auto; min-width: 120px; max-width: 46vw; }
  body.topbar-compact #topbar > .topbar-row:nth-child(2),
  body.topbar-compact #barcode-search,
  body.topbar-compact #pace-cards { display: none; }
  body.topbar-compact #pace-bar { padding-top: 2px; }
  body.topbar-compact #pace-collapse { display: none; }
  /* 필터를 펼쳐도 지도는 화면의 40% 이상(소수점 반올림 여유 2%) — 상단 위 [지도만 보기] 버튼 줄(약 56px)이 있어도 */
  #map-wrap {
    min-height: 42vh;
    min-height: 42dvh;
  }
}

@media (max-width: 768px) {
  #panel {
    height: 62vh;
    height: 62dvh;
    max-height: calc(100vh - 48px);
    max-height: calc(100dvh - 48px);
  }
}
#device-list {
  min-height: 0;
  overscroll-behavior: contain; /* 목록 끝에서 지도/페이지로 스크롤 전파 안 함 */
  -webkit-overflow-scrolling: touch;
  padding-bottom: calc(20px + env(safe-area-inset-bottom));
}

/* 네이티브 전체화면이 지도 요소에만 걸린 경우: 패널·모달을 그 안으로 옮겨 표시 */
/* html body 접두: 지도만 보기(body.map-focus …) 규칙보다 우선 */
html body #panel.fs-portal { position: absolute; z-index: 10000; }
html body .modal.fs-portal { z-index: 10010; }
html body #modal-confirm.fs-portal { z-index: 10020; }
html body #toast.fs-portal { z-index: 10030; }

@media print { #topbar-toggle { display: none !important; } }