/* 레이아웃 v4 휴대폰 (2026-11-08): 시안 B. layout4.css 의 글자·구성은 그대로 쓰고, 자리만 아래 시트로 바꾼다.
   지도가 바탕, 아래 흰 시트 하나(끌어 올림), 찾기 = 질문 + 검색 + 목록, 판정 = 결론 → 숫자 → 걸린 항목, 바닥 검은 버튼은 입력창 위에 붙음.
   변전소 창은 시트 위를 덮는 작은 시트, 요청·진행 창도 아래에서 올라옴. 820px 이하에서만 */
@media (max-width: 820px) {
  body.v4m { font-size: 15px; }
  /* 시트 */
  body.v4m .col { position: fixed; left: 0; right: 0; top: auto; bottom: 0; width: auto; height: var(--sh, 150px); max-height: 92dvh; z-index: 1050;
    padding: 0; border: 0; border-radius: 18px 18px 0 0; box-shadow: 0 -6px 24px rgba(0,0,0,.14); overflow: hidden; display: flex !important; flex-direction: column; }
  body.v4m .col.anim { transition: height .25s ease; }
  body.v4m .grab { all: unset; display: block; flex: none; box-sizing: border-box; width: 100%; padding: 10px 0 8px; background: var(--bg); cursor: grab; touch-action: none; }
  body.v4m .grab i { display: block; width: 40px; height: 5px; border-radius: 3px; background: #C9CDD2; margin: 0 auto; }
  body.v4m .stage { padding: 0 20px 12px; }
  body.v4m .v4Q { font-size: 22px; margin-top: 4px; }
  body.v4m .composer { padding: 8px 14px calc(10px + env(safe-area-inset-bottom)); }
  body.v4m .composer .v4Cta { margin: 2px 0 10px; }
  body.v4m .composer .v4Fine { display: none; }
  body.v4m .v4Fine { padding: 6px 20px 12px; }
  body.v4m .leaflet-bottom { bottom: var(--peek, 150px); }
  body.v4m .leaflet-control-zoom { display: none; }
  /* 지도 위 버튼: 땅|건물 왼쪽 위, 후보지·내 정보 오른쪽 위 */
  body.v4m.simple #branchBar { top: 12px; left: 12px; right: auto; }
  body.v4m .branchBar button { padding: 7px 14px; font-size: 13px; min-height: 34px; }
  body.v4m .leaflet-top.leaflet-right .acct { margin: 12px 12px 0 0; }
  body.v4m .acct > button { min-height: 40px; }
  body.v4m #hint { max-width: calc(100% - 32px); white-space: normal; text-align: center; top: 64px; }
  /* 땅 판정은 시트 안에. 돌아가기는 ‹ 글자 링크 */
  body.v4m #detail { padding-top: 4px; }
  body.v4m #back { display: inline-block; margin: 0 0 6px; }
  /* 변전소 창: 시트 위를 덮는 작은 시트들 */
  body.v4m #v4Dock { position: fixed; left: 0; right: 0; bottom: 0; top: auto; width: auto; max-height: 78dvh; z-index: 1060; gap: 0; border-radius: 18px 18px 0 0; overflow: hidden; background: transparent; }
  body.v4m #v4Dock:empty { display: none; }
  body.v4m .v4Win { border-radius: 0; box-shadow: none; border-top: 1px solid var(--edge); }
  body.v4m .v4Win:first-child { border-radius: 18px 18px 0 0; border-top: 0; box-shadow: 0 -6px 24px rgba(0,0,0,.14); }
  body.v4m .v4Win.open { max-height: 60dvh; }
  body.v4m .v4Win.open .v4SubBody { padding: 12px 16px calc(16px + env(safe-area-inset-bottom)); }
  body.v4m .v4WinHead { padding: 8px 8px 8px 16px; }
  body.v4m .v4WinTtl { min-height: 36px; font-size: 14px; }
  /* 요청·진행 창: 아래에서 올라오는 시트 */
  body.v4m #reqWrap { background: rgba(10,14,18,.35); pointer-events: auto; padding: 0; display: block; }
  body.v4m #reqBox { position: fixed; left: 0; right: 0; top: auto; bottom: 0; width: auto; max-height: 92dvh; border-radius: 18px 18px 0 0; padding: 10px 20px calc(20px + env(safe-area-inset-bottom)); box-shadow: 0 -6px 24px rgba(0,0,0,.16); display: flex; flex-direction: column; overflow-y: auto; }
  body.v4m #reqBox .v4Cta { flex: none; }
  body.v4m #reqBox .v4Cta { margin-top: 16px; }
}
@media (max-width: 820px) {
  body.v4m .composer .v4Cta { width: 100%; box-sizing: border-box; }
  body.v4m.v4Det.simple #aiChips { display: none !important; }          /* 판정 상태: 결론이 먼저 보이게 질문 칩은 감춤 */
  body.v4m.v4Peek .stage { visibility: hidden; }
  body.v4m .grab i { background: #B9BEC4; }
}
/* 11-10 (사용자 결정): 휴대폰에선 지도 위 안내 말풍선('14단계 이상 확대하면…') 없앰. 위 버튼들과 겹침 */
@media (max-width: 820px) { body.v4m #hint { display: none !important; } }