/* 레이아웃 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; } }
/* 11-12 휴대폰 변전소·선로 창: 손잡이, 끌어서 작게·닫기, 안쪽 스크롤이 화면 전체를 끌지 않게 */
@media (max-width: 820px) {
  html, body.v4m { overscroll-behavior: none; }
  body.v4m #v4Dock { transition: transform .2s ease, bottom .2s ease; touch-action: pan-y; }
  body.v4m #v4Dock .v4SubBody { overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
  body.v4m #v4Dock .v4Win.open .v4WinHead { position: relative; padding-top: 18px; touch-action: none; cursor: grab; }
  body.v4m #v4Dock .v4Win.open .v4WinHead::before { content: ''; position: absolute; left: 50%; top: 7px; width: 36px; height: 4px; margin-left: -18px; border-radius: 2px; background: #D0D3D7; }
  body.v4m #v4Dock.mini { box-shadow: 0 -4px 16px rgba(0,0,0,.12); }
  body.v4m #v4Dock.mini .v4Win:not(.open) { display: none; }
  body.v4m #v4Dock.mini .v4Win.open { max-height: none; border-radius: 18px 18px 0 0; }
  body.v4m #v4Dock.mini .v4SubBody { display: none !important; }
  body.v4m #v4Dock.mini .v4Win.open .v4WinHead { border-bottom: 0; }
}
@media (max-width: 820px) { body.v4m #hint.say:not([hidden]) { display: block !important; top: auto; bottom: calc(120px + env(safe-area-inset-bottom)); z-index: 1200; } }
/* 11-12 휴대폰 탐색 줄: [← 목록] [‹ n/N ›] [☆]. 시트 손잡이 바로 아래에 늘 붙어 있음. 누르는 곳은 44px 이상 */
@media (max-width: 820px) {
  body.v4m .mNav { flex: none; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: 48px; padding: 0 8px; background: var(--bg); border-bottom: 1px solid var(--edge); }
  body.v4m .mNav[hidden] { display: none; }
  body.v4m .mNav button { all: unset; box-sizing: border-box; cursor: pointer; min-width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; color: var(--fg); -webkit-tap-highlight-color: transparent; }
  body.v4m .mNav button:active { background: var(--bg2); }
  body.v4m .mNav .mBack { justify-self: start; padding: 0 12px 0 8px; gap: 6px; font-size: 15px; font-weight: 600; }
  body.v4m .mNav .mBack i { font-style: normal; font-size: 18px; }
  body.v4m .mNav .mMid { display: flex; align-items: center; gap: 2px; }
  body.v4m .mNav .mMid[hidden] { display: none; }
  body.v4m .mNav .mPrev, body.v4m .mNav .mNext { font-size: 24px; line-height: 1; padding-bottom: 3px; }
  body.v4m .mNav button:disabled { color: #C9CDD2; }
  body.v4m .mNav .mPos { min-width: 58px; text-align: center; font-size: 13px; font-weight: 600; color: var(--fg2); font-variant-numeric: tabular-nums; }
  body.v4m .mNav .mStar { justify-self: end; font-size: 22px; }
  body.v4m .mNav .mStar[aria-pressed="true"] { color: var(--fg); }
  body.v4m #back { display: none !important; }                 /* 글자 링크 대신 탐색 줄의 ← 목록 */
  body.v4m.v4Det #detail { padding-top: 12px; }
  body.v4m .adCard.seen .adThumb { opacity: .5; }
  body.v4m .adCard.seen .adBody > :first-child::after { content: '본 물건'; margin-left: 8px; font-size: 11px; font-weight: 500; color: var(--fg3); }
  body.v4m .adCard.mLast { background: var(--bg2); box-shadow: -8px 0 0 var(--bg2), 8px 0 0 var(--bg2); transition: background .4s; }
}