/* OWNED: mobile/app-shell */
/* app-shell.css — 밤마실 모바일 앱 셸(≤860px 전용). 새 파일만: index.html/explore.css는 건드리지 않는다.
   app-shell.js가 폭을 먼저 확인하고 body.app-shell-active를 붙였을 때만 아래 규칙이 의미를 갖는다.
   861px 이상에서는 이 파일이 로드돼도 아무 것도 바뀌지 않는다(전부 max-width:860px 안쪽). */
@media (max-width:860px){
  :root{--app-tabbar-h:calc(64px + env(safe-area-inset-bottom))}

  body.app-shell-active{overflow:hidden}
  body.app-shell-active .page{display:none}
  /* 워드마크: 지도 위에서 읽히도록 흰 사각 상자(1px 검정, 그림자 없음) + 검정 글자 */
  body.app-shell-active .nav{position:fixed;top:12px;left:12px;z-index:45;height:auto;background:none;border:0}
  body.app-shell-active .nav-in{padding:0;width:auto}
  body.app-shell-active .nav-end{display:none}
  body.app-shell-active .logo{gap:6px;height:40px;padding:0 var(--s3) 0 var(--s2);border:1px solid var(--ink);border-radius:0;background:var(--bg);color:var(--ink);font-size:var(--fs-body);font-weight:600;box-shadow:none}
  body.app-shell-active .logo img{height:24px}
  body.app-shell-active #toast{z-index:60;bottom:calc(var(--app-tabbar-h) + 12px)}

  #app-shell{position:fixed;inset:0;z-index:40}
  #app-shell[hidden]{display:none}

  .app-maplayer{position:absolute;inset:0;z-index:1;background:var(--tile)}
  .app-maplayer #map-placeholder{background:var(--tile)}
  .app-maplayer #kakao-map,.app-maplayer #map-placeholder{position:absolute;inset:0;width:100%;height:100%;border-radius:0}
  /* 지도 캡션: 로고 아래 작은 상자(top:auto 금지 — .map-cap의 top을 새 값으로 덮는다) */
  .app-maplayer #map-caption{position:absolute;top:60px;left:var(--s3);right:auto;bottom:auto;margin:0;max-width:calc(100% - 80px);padding:var(--s1) var(--s2);font-size:var(--fs-label);background:var(--bg);color:var(--muted);border:1px solid var(--line)}
  /* 내 위치 버튼: 지도 레이어로 옮겨 로고 반대편 위에 둔다 */
  .app-maplayer #locate-me{position:absolute;top:var(--s3);right:var(--s3);bottom:auto}

  .app-sheet{position:fixed;left:0;right:0;bottom:var(--app-tabbar-h);z-index:20;height:min(82vh,calc(100vh - var(--app-tabbar-h) - 20px));background:var(--bg);border-radius:12px 12px 0 0;border-top:1px solid var(--line);box-shadow:none;display:flex;flex-direction:column;overflow:hidden;transform:translateY(var(--sheet-y,0px));transition:transform .32s var(--ease)}
  .app-sheet.dragging{transition:none}

  .app-sheet-handlerow{position:relative;display:flex;align-items:center;justify-content:center;padding:var(--s2) 0 var(--s1);flex:none;touch-action:none;cursor:grab}
  .app-sheet-handle{width:40px;height:var(--s1);border-radius:0;background:var(--line)}
  .app-sheet-cat{display:none}

  .app-sheet-header{display:flex;align-items:center;gap:var(--s2);padding:var(--s1) var(--s4) var(--s3);flex:none;touch-action:none}
  .app-sheet-header h2{flex:1;font-size:var(--fs-title);font-weight:600;line-height:1.3;letter-spacing:-0.01em}
  .app-back{flex:none;display:inline-flex;align-items:center;gap:2px;min-height:36px;padding:0 6px 0 0;font-size:var(--fs-body);font-weight:600;color:var(--muted)}

  .app-sheet-body{flex:1;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;padding:0 var(--s3) calc(var(--s6) + env(safe-area-inset-bottom));-webkit-overflow-scrolling:touch}
  .app-view[hidden]{display:none}
  /* 시트 중간 상태: 상태 줄(축약)·필터·날짜 그룹 목록 */
  .app-sheet-body .status{height:auto;border-radius:0;font-size:var(--fs-label)}
  .app-sheet-body .status-in{padding:var(--s2) var(--s3);gap:var(--s2)}
  /* 시트 안 필터는 한 줄 가로 스크롤(줄바꿈 금지 — 시트 높이 절약) */
  .app-sheet-body .filters{padding:0;flex-wrap:nowrap;overflow-x:auto}
  .app-sheet-body .chips{gap:var(--s2);flex-wrap:nowrap;flex:none}
  .app-sheet-body .region-swipe{display:none}
  .app-sheet-body #cards{display:flex;flex-direction:column}
  .app-sheet-body .group-h{position:sticky;top:0;z-index:2;background:var(--bg);padding:var(--s4) 0 var(--s2)}
  #app-view-list,#app-view-fav{display:flex;flex-direction:column}
  #app-view-list{gap:var(--s1)}
  #app-view-fav{gap:var(--s2)}
  .app-sheet-body .market-card,.app-sheet-body .compact{width:100%;position:relative}
  .app-sheet-body #event-detail.detail{padding:0 2px}

  .app-tabbar{position:fixed;left:0;right:0;bottom:0;z-index:30;display:flex;background:var(--bg);border-top:1px solid var(--line);padding:6px var(--s3) env(safe-area-inset-bottom);gap:4px}
  .app-tab{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;min-height:52px;padding:6px 0;border-radius:0;font-size:11px;font-weight:600;color:var(--muted);position:relative;transition:color var(--t) var(--ease)}
  .app-tab svg{width:22px;height:22px}
  .app-tab[aria-selected=true]{color:var(--ink)}
  .app-tab-badge{position:absolute;top:2px;right:calc(50% - 22px);min-width:18px;height:18px;padding:0 var(--s1);border:1px solid var(--ink);border-radius:0;background:var(--lantern);color:var(--ink);font-size:var(--fs-label);line-height:16px;font-weight:600;text-align:center}

  .app-fav-btn-detail{width:40px;height:40px;border-radius:0;display:flex;align-items:center;justify-content:center;background:var(--tile);color:var(--muted)}
  .app-fav-btn-detail svg{width:18px;height:18px}
  .app-fav-btn-detail[aria-pressed=true]{color:var(--lantern)}
  .app-fav-btn-detail[aria-pressed=true] svg path{fill:var(--lantern)}

  .app-detail-actions{display:flex;align-items:center;gap:8px;margin-top:var(--s3)}

  .app-empty{display:flex;flex-direction:column;align-items:center;gap:var(--s3);padding:var(--s6) var(--s4);text-align:center;color:var(--muted);font-size:var(--fs-body)}
  .app-empty img{width:64px}
  .app-empty strong{color:var(--ink);font-size:var(--fs-meta)}
}

@media (max-width:860px) and (prefers-reduced-motion:reduce){
  .app-sheet{transition:none!important}
}