/* ================================================================
   모바일 셸 (features/mobile-shell) — 폰(≤760px)을 «앱처럼»: 목업(docs/목업-모바일화면-20261013.html)의 모양을 그대로 옮겼다
   v2 (2026-10-13) — 목업 디자인 재현 + 실제 자료 · v1 은 기존 패널을 그대로 띄웠다(운영자 「목업과 많이 다름」)
   ----------------------------------------------------------------
   ⛔ 원래 모듈(shell.css §8-3 · nav-menu · sponsor.css)은 고치지 않고 `html.msh` 접두로 덮는다 — mobile-shell.js 가 켜질 때만 붙는다.
   ⚠ #bar 는 **숨기지 않고 투명하게**(visibility) — index.html sheetLimits()가 #bar.offsetHeight 로 시트 최대 높이를 잰다.
   색은 목업 토큰(--msh-*)을 쓴다 — 지도 위 껍데기는 테마와 무관하게 늘 어둡다(레일이 라이트에서도 어두운 것과 같은 원칙).
   ================================================================ */
/* 넓은 화면(폰을 가로로 돌림 등)에서는 셸 부품을 통째로 숨긴다 — 아래 규칙은 전부 ≤760px 안이라, 이것이 없으면 스타일 없는 껍데기가 남는다(리뷰 4) */
.msh-tabs, .msh-top, .msh-saver, .msh-sheet, .msh-page, .msh-splash { display: none; }
@media (max-width: 760px) {
  html.msh .msh-tabs { display: flex; } html.msh .msh-top { display: flex; }
  html.msh { --tabbar-h: 64px;
    --msh-bg: #070d18; --msh-panel: #0b1527; --msh-card: #0f1a2e; --msh-line: #1b2a44; --msh-line2: #15233b;
    --msh-tx: #e6eef8; --msh-tx2: #9fb0c6; --msh-tx3: #8ea0b8; --msh-acc: #38bdf8; --msh-ac: #f2994a; --msh-sel: #d6336c; --msh-pro: #f59e0b;
    --msh-mono: var(--font-mono, ui-monospace, 'JetBrains Mono', Menlo, monospace); }
  html.msh #bar.nav-rail { visibility: hidden; pointer-events: none; }
  html.msh #railMore, html.msh #railMoreSheet, html.msh #mlpBtn { display: none !important; }
  /* ⚠ app.css 전역 button{width:100%;margin-top:8px} 되돌림 — 안 되돌리면 칩이 가로로 늘고 제목이 세로로 깨진다(shell.css 의 다른 모듈들도 같은 줄을 둔다) */
  html.msh :where(.msh-tabs, .msh-sheet, .msh-page, .msh-top, .msh-splash) button { width: auto; margin: 0; min-width: 0; height: auto; line-height: normal; letter-spacing: normal; text-transform: none; box-shadow: none; }   /* :where — 특이도를 낮춰 아래의 .msh-row 등 width:100% 가 이긴다 */
  html.msh .msh-chips[hidden] { display: none; }
  /* 지도 위 떠 있는 광고 카드는 셸에서 숨긴다 — 광고는 시작 1회(.msh-splash 로 옮겨 보임) + 팝업·목록 사이 한 줄이 대신(운영자 2026-10-14)
     · 피더 모집 카드는 하루 한 번(KST 날짜 aeronexus.mshFrcDay — 그날 한 번 보였으면 다음 접속부터 숨김) */
  html.msh body > #cpSponsor { display: none !important; }
  /* 문서는 스크롤하지 않는다 — 화면마다 제 칸(.msh-page 등)이 스크롤한다. 일부 폰에서 아래 탭이 밀려 내려가던 것(10-14) */
  html.msh, html.msh body { overflow: hidden; overscroll-behavior: none; }
  html.msh.msh-frc-off #frcCard { display: none !important; }
  html.msh .msh-mono { font-family: var(--msh-mono); }
  html.msh .msh-k { font-size: 11px; color: var(--msh-tx3); }
  html.msh .msh-pro { font-size: 9px; padding: 1px 5px; border-radius: 5px; background: var(--msh-pro); color: #1a1204; font-weight: 700; vertical-align: 2px; margin-left: 4px; }
  html.msh .msh-ico { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }

  /* ── 하단 탭 5개 ── */
  html.msh .msh-tabs {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 1620;   /* 알림 허브 덮개(.ah-ov 1610)보다 위 · 시작 광고(1700) 아래 */
    height: var(--tabbar-total, calc(64px + var(--sa-b, 0px))); padding: 0 var(--sa-r, 0px) var(--sa-b, 0px) var(--sa-l, 0px); box-sizing: border-box;
    display: flex; align-items: stretch; background: var(--msh-panel); border-top: 1px solid var(--msh-line);
    box-shadow: 0 40px 0 40px var(--msh-panel);
  }
  html.msh .msh-tabs button { flex: 1 1 0; min-width: 0; min-height: 56px; margin: 0; padding: 6px 0 4px; background: none; border: 0; border-radius: 0; color: var(--msh-tx3);
    font: 500 11px/1.2 inherit; font-family: inherit; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; position: relative; -webkit-tap-highlight-color: transparent; }
  html.msh .msh-tabs button.on { color: var(--msh-acc); }
  html.msh .msh-tabs .msh-badge { position: absolute; top: 5px; left: calc(50% + 6px); min-width: 16px; height: 16px; padding: 0 4px; box-sizing: border-box; border-radius: 8px; background: #ff5a36; color: #fff; font: 700 10px/16px inherit; text-align: center; }
  html.msh .msh-tabs .msh-badge:empty { display: none; }

  /* ── 지도 위: 검색 알약 · 기상 단추 · 절약 표시 ── */
  html.msh .msh-top { position: absolute; left: 12px; right: 64px; top: calc(var(--hdr-total, 48px) + 8px); z-index: 1200; display: flex; gap: 8px; pointer-events: none; }
  html.msh .msh-top > * { pointer-events: auto; }
  html.msh .msh-search { flex: 1; height: 44px; border-radius: 22px; background: rgba(11, 21, 39, .94); border: 0; color: var(--msh-tx3); font: 400 14px inherit; font-family: inherit; display: flex; align-items: center; gap: 10px; padding: 0 14px; box-shadow: 0 2px 10px rgba(0, 0, 0, .25); text-align: left; }
  html.msh .msh-search svg { width: 18px; height: 18px; }
  html.msh #mshWx { position: relative; }
  html.msh #msBtn { display: none !important; }   /* 폰에선 「여러 대 선택」 대신 「두 대 간격」(#mshGap) — 운영자 10-14 */
  html.msh #mshGap[aria-pressed="true"] { color: #fff; background: #0284c7; border-color: #0284c7; }
  html.msh #mshWx[aria-pressed="true"] { color: var(--accent-cyan); border-color: var(--accent-cyan); }
  html.msh #mshWx[aria-pressed="false"] svg { opacity: .55; }
  html.msh #mshWx[aria-pressed="false"]::after { content: ''; position: absolute; left: 7px; right: 7px; top: 50%; height: 2px; background: currentColor; transform: rotate(-35deg); opacity: .7; }
  html.msh .msh-saver { position: absolute; left: 12px; top: calc(var(--hdr-total, 48px) + 60px); z-index: 1200; height: 28px; padding: 0 10px; border-radius: 14px; background: rgba(11, 21, 39, .9); color: #86efac; font: 500 11px inherit; display: none; align-items: center; gap: 5px; }
  html.msh .msh-saver svg { width: 14px; height: 14px; }
  html.msh.msh-saver-on .msh-saver { display: inline-flex; }
  /* 「지금 볼 만한 편」 띠(features/popular-flights)는 셸에서 검색 알약 아래로 — 같은 자리(hdr+8)에 z 가 높은 띠가 알약을 덮던 것(10-14 리뷰 1).
     오른쪽 레이어 단추 열(약 52px)은 비킨다 · 데이터 절약 표시는 띠 아래로 */
  html.msh #pfBar { top: calc(var(--hdr-total, 48px) + 60px); left: 12px; right: 64px; }
  html.msh.msh-saver-on .msh-saver { top: calc(var(--hdr-total, 48px) + 104px); }

  /* ── 시트(기체 팝업 · 더보기) — index.html 시트 쌓기에 등록(peek·more). 앞이 아니면 접힌다 ── */
  html.msh .msh-sheet { position: fixed; left: 0; right: 0; bottom: var(--tabbar-total, 64px); z-index: 1255; background: var(--msh-panel); color: var(--msh-tx);
    border-radius: 18px 18px 0 0; box-shadow: 0 -8px 24px rgba(0, 0, 0, .5); display: none; max-height: calc(100vh - var(--hdr-total, 48px) - var(--tabbar-total, 64px) - 8px); overflow-y: auto; overflow-anchor: none; -webkit-overflow-scrolling: touch; padding-bottom: 8px; }
  html.msh .msh-sheet.open { display: block; }
  html.msh body[data-sheet]:not([data-sheet="peek"]) .msh-peek { display: none !important; }
  html.msh body[data-sheet]:not([data-sheet="more"]) .msh-more { display: none !important; }
  html.msh body[data-sheet="peek"] #drawer.side-drawer, html.msh body[data-sheet="peek"] #alertPopover, html.msh body[data-sheet="peek"] #mlPanel, html.msh body[data-sheet="peek"] #avnPop,
  html.msh body[data-sheet="more"] #drawer.side-drawer, html.msh body[data-sheet="more"] #acDetail.inspector-panel, html.msh body[data-sheet="more"] #alertPopover, html.msh body[data-sheet="more"] #mlPanel, html.msh body[data-sheet="more"] #avnPop,
  html.msh body[data-sheet="me"] #drawer.side-drawer, html.msh body[data-sheet="me"] #acDetail.inspector-panel, html.msh body[data-sheet="me"] #alertPopover, html.msh body[data-sheet="me"] #mlPanel, html.msh body[data-sheet="me"] #avnPop { display: none !important; }
  /* 기체 정보 패널(#acDetail)은 「자세히」를 눌렀을 때만(html.msh-detail) — 평소엔 목업형 팝업(.msh-peek)이 대신한다 */
  html.msh:not(.msh-detail) #acDetail.inspector-panel { display: none !important; }
  html.msh .msh-grab { display: block; width: 100%; height: 30px; background: none; border: 0; padding: 0; position: sticky; top: 0; z-index: 2; background: var(--msh-panel); touch-action: none; cursor: ns-resize; }
  html.msh .msh-grab::after { content: ''; position: absolute; left: 50%; top: 10px; width: 40px; height: 5px; margin-left: -20px; border-radius: 3px; background: #334866; }

  /* 기체 팝업 */
  html.msh .msh-ph { display: flex; align-items: center; gap: 10px; padding: 0 6px 0 16px; }
  html.msh .msh-logo { width: 36px; height: 36px; border-radius: 8px; background: #e6eef8; color: #0b3a7a; display: flex; align-items: center; justify-content: center; font: 700 12px var(--msh-mono); flex: none; }
  html.msh .msh-logo.has-img { background: #fff; padding: 3px; box-sizing: border-box; overflow: hidden; }
  html.msh .msh-logo img { width: 100%; height: 100%; object-fit: contain; display: block; }
  html.msh .msh-logo.sm { width: 30px; height: 30px; border-radius: 7px; font-size: 10px; }
  html.msh .msh-cs { font: 700 19px/1.1 var(--msh-mono); color: var(--msh-tx); }
  html.msh .msh-sub { font-size: 12px; color: var(--msh-tx2); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  html.msh .msh-chip { height: 40px; min-height: 40px; padding: 0 12px; border-radius: 16px; border: 0; background: #16233a; color: var(--msh-tx); font: 500 12px inherit; font-family: inherit; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
  html.msh .msh-chip.on { background: #0c4a6e; color: #e0f2fe; }
  html.msh .msh-x { width: 44px; height: 44px; border: 0; background: none; color: var(--msh-tx3); display: flex; align-items: center; justify-content: center; padding: 0; flex: none; }
  html.msh .msh-route { display: flex; align-items: center; gap: 10px; padding: 12px 16px 0; }
  html.msh .msh-apt { width: 80px; } html.msh .msh-apt.r { text-align: right; }
  html.msh .msh-apt b { display: block; font: 700 26px/1 var(--msh-mono); color: var(--msh-tx); }
  html.msh .msh-apt small { display: block; font-size: 11px; color: var(--msh-tx3); margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  html.msh .msh-bar { flex: 1; position: relative; height: 30px; }
  html.msh .msh-bar i { position: absolute; left: 0; right: 0; top: 9px; height: 3px; border-radius: 2px; background: #22324d; }
  html.msh .msh-bar i.f { right: auto; background: var(--msh-ac); }
  html.msh .msh-bar .pl { position: absolute; top: 0; margin-left: -10px; }
  html.msh .msh-bar .t { position: absolute; left: 0; right: 0; top: 18px; text-align: center; font-size: 11px; color: var(--msh-tx3); }
  html.msh .msh-times { display: flex; justify-content: space-between; padding: 10px 16px 0; font-size: 12px; color: var(--msh-tx2); }
  html.msh .msh-times b { font-family: var(--msh-mono); color: var(--msh-tx); }
  html.msh .msh-late { font-size: 10px; padding: 1px 6px; border-radius: 8px; background: #422006; color: #fcd34d; font-weight: 700; margin-left: 4px; }
  html.msh .msh-stat4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 16px 16px 0; border-radius: 10px; background: var(--msh-card); padding: 8px 0; text-align: center; }
  html.msh .msh-stat4 b { display: block; font: 500 14px var(--msh-mono); color: var(--msh-tx); }
  html.msh .msh-morebtn { width: 100%; min-height: 44px; border: 0; background: none; color: var(--msh-tx2); font: 500 12px inherit; font-family: inherit; display: flex; align-items: center; justify-content: center; gap: 4px; }
  html.msh .msh-det { margin: 0 16px; border-radius: 10px; background: var(--msh-card); padding: 4px 12px; }
  html.msh .msh-det .r { display: flex; justify-content: space-between; align-items: center; gap: 8px; min-height: 36px; font-size: 13px; border-bottom: 1px solid var(--msh-line2); color: var(--msh-tx); }
  html.msh .msh-det .r:last-child { border-bottom: 0; }
  html.msh .msh-det .r > span:first-child { color: var(--msh-tx3); font-size: 12px; flex: none; }
  html.msh .msh-det .r > span:last-child { text-align: right; min-width: 0; }
  html.msh .msh-acts { display: flex; margin: 6px 4px 0; border-top: 1px solid var(--msh-line2); }
  html.msh .msh-acts button { flex: 1; min-height: 56px; border: 0; background: none; color: #cbd5e1; font: 500 11px inherit; font-family: inherit; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 0; }
  html.msh .msh-acts button.on { color: var(--msh-ac); }
  html.msh .msh-acts button svg { width: 20px; height: 20px; }

  /* 광고 한 줄 — 떠 있는 광고 카드(#cpSponsor)의 상품을 비춘다 · PRO 는 카드가 없어 안 그려진다 */
  html.msh .msh-ad { display: flex; align-items: center; gap: 10px; margin: 10px 16px 0; padding: 8px 12px; border-radius: 10px; background: #111d31; border: 1px solid #1e3150; color: var(--msh-tx); text-decoration: none; min-height: 52px; width: auto; text-align: left; font-family: inherit; }
  html.msh .msh-ad.row { margin: 0; border-radius: 0; border-left: 0; border-right: 0; border-top: 0; padding: 8px 16px; background: #0d182b; width: 100%; box-sizing: border-box; }
  html.msh .msh-ad .im { width: 34px; height: 34px; border-radius: 8px; background: #eef2f6; flex: none; overflow: hidden; display: flex; align-items: center; justify-content: center; }
  html.msh .msh-ad .im img { width: 100%; height: 100%; object-fit: cover; }
  html.msh .msh-ad .tx { flex: 1; min-width: 0; font-size: 13px; line-height: 1.35; }
  html.msh .msh-ad .tx .nm { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
  html.msh .msh-ad .tx .pr { color: #fbbf24; font-weight: 700; }
  html.msh .msh-ad .lbl { font-size: 9.5px; font-weight: 700; padding: 1px 5px; border-radius: 5px; background: #16233a; color: var(--msh-tx2); margin-right: 4px; }
  html.msh .msh-ad .disc { display: block; font-size: 9.5px; line-height: 1.35; color: var(--msh-tx3); }

  /* ── 전체 화면(항공편 · 공항 · 내 주변 · 내 정보) ── */
  html.msh .msh-page { display: none; position: fixed; left: 0; right: 0; z-index: 1260; top: var(--hdr-total, 48px); bottom: var(--tabbar-total, 64px);
    overflow-y: auto; -webkit-overflow-scrolling: touch; overflow-anchor: none; background: var(--msh-bg); color: var(--msh-tx); }
  html.msh .msh-page.open { display: block; }
  html.msh body[data-sheet]:not([data-sheet="me"]) .msh-page { display: none !important; }
  html.msh .msh-hd { display: flex; align-items: center; gap: 6px; padding: 12px 8px 6px; position: sticky; top: 0; background: var(--msh-bg); z-index: 2; }
  html.msh .msh-hd h2 { flex: 1; margin: 0; font-size: 20px; font-weight: 700; padding-left: 8px; }
  html.msh .msh-hd .ib { width: 44px; height: 44px; border: 0; background: none; color: var(--msh-tx); display: flex; align-items: center; justify-content: center; padding: 0; flex: none; }
  html.msh .msh-tier { height: 28px; padding: 0 12px; border-radius: 14px; font-size: 12px; font-weight: 700; display: inline-flex; align-items: center; background: #1d2b44; color: #cbd5e1; margin-right: 8px; }
  html.msh .msh-tier.pro { background: var(--msh-pro); color: #1a1204; }
  html.msh .msh-h3 { margin: 18px 16px 6px; font-size: 12px; font-weight: 700; color: var(--msh-tx3); }
  html.msh .msh-grp { margin: 10px 16px 2px; font-size: 11px; color: var(--msh-tx3); }
  html.msh .msh-row { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px; padding: 0 16px; box-sizing: border-box; background: none; border: 0; border-bottom: 1px solid var(--msh-line2); color: var(--msh-tx);
    font: 500 15px/1.3 inherit; font-family: inherit; text-align: left; text-decoration: none; -webkit-tap-highlight-color: transparent; }
  html.msh .msh-row:active { background: rgba(255, 255, 255, .06); }
  html.msh .msh-row > svg { color: var(--msh-acc); }
  html.msh .msh-row.msh-rail svg { width: 20px; height: 20px; fill: currentColor; stroke: none; color: var(--msh-tx3); }
  html.msh .msh-row .t { flex: 1; min-width: 0; }
  html.msh .msh-row .t small { display: block; font-size: 12px; font-weight: 400; color: var(--msh-tx3); margin-top: 2px; }
  html.msh .msh-row .n { font-size: 11px; padding: 2px 8px; border-radius: 10px; background: #ff5a36; color: #fff; font-weight: 700; }
  html.msh .msh-row .n:empty { display: none; }
  html.msh .msh-card { margin: 10px 16px 0; padding: 12px 14px; border-radius: 14px; background: var(--msh-card); border: 1px solid var(--msh-line); }
  html.msh .msh-note { margin: 10px 16px 24px; padding: 12px 14px; border-radius: 12px; background: var(--msh-card); font-size: 12px; line-height: 1.7; color: var(--msh-tx3); }
  html.msh .msh-seg { margin: 8px 16px 0; padding: 4px; border-radius: 12px; background: var(--msh-card); display: flex; gap: 4px; }
  html.msh .msh-seg button { flex: 1; height: 44px; border-radius: 10px; border: 0; background: none; color: var(--msh-tx3); font: 500 13px inherit; font-family: inherit; }
  html.msh .msh-seg button.on { background: #1d2b44; color: var(--msh-tx); }
  html.msh .msh-chips { display: flex; gap: 8px; padding: 8px 16px 0; overflow-x: auto; scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, #000 90%, transparent); mask-image: linear-gradient(90deg, #000 90%, transparent); }
  html.msh .msh-bc { flex: none; height: 40px; padding: 0 14px; border-radius: 18px; border: 1px solid #22324d; background: none; color: #cbd5e1; font: 500 13px inherit; font-family: inherit; }
  html.msh .msh-bc.on { background: var(--msh-tx); color: var(--msh-panel); border-color: var(--msh-tx); }
  html.msh .msh-in { display: flex; align-items: center; gap: 10px; flex: 1; height: 46px; border-radius: 23px; background: var(--msh-card); border: 1px solid var(--msh-acc); padding: 0 14px; }
  html.msh .msh-in input { flex: 1; min-width: 0; background: none; border: 0; color: var(--msh-tx); font: 500 15px var(--msh-mono); outline: none; }
  html.msh .msh-in input::placeholder { color: var(--msh-tx3); font-family: inherit; font-weight: 400; }
  html.msh .msh-in svg { width: 18px; height: 18px; color: var(--msh-acc); }
  html.msh .msh-tx-btn { height: 46px; border: 0; background: none; color: var(--msh-acc); font: 500 14px inherit; font-family: inherit; padding: 0 8px; }
  html.msh .msh-res { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 60px; padding: 0 16px; box-sizing: border-box; background: none; border: 0; border-bottom: 1px solid var(--msh-line2); color: var(--msh-tx); text-align: left; font-family: inherit; }
  html.msh .msh-res .cs { width: 68px; font: 700 15px var(--msh-mono); flex: none; }
  html.msh .msh-res .t { flex: 1; min-width: 0; font-size: 13px; }
  html.msh .msh-res .t small { display: block; font-size: 11px; color: var(--msh-tx3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  html.msh .msh-res .go { font-size: 11px; padding: 3px 9px; border-radius: 10px; background: #0c4a6e; color: #7dd3fc; flex: none; }
  html.msh .msh-fl { display: grid; grid-template-columns: 50px 68px minmax(0, 1fr) 80px; align-items: center; gap: 8px; min-height: 52px; padding: 0 16px; border-bottom: 1px solid var(--msh-line2); font-size: 13px; width: 100%; box-sizing: border-box; background: none; border-left: 0; border-right: 0; border-top: 0; color: var(--msh-tx); text-align: left; font-family: inherit; }
  html.msh .msh-fl .hm { font: 500 13px var(--msh-mono); } html.msh .msh-fl .hm s { display: block; font-size: 10px; color: var(--msh-tx3); }
  html.msh .msh-fl .hm.late { color: #fca5a5; }
  html.msh .msh-fl .id { font: 700 13px var(--msh-mono); }
  html.msh .msh-fl .to small { display: block; font-size: 11px; color: var(--msh-tx3); }
  html.msh .msh-fl .st { justify-self: end; font-size: 11px; padding: 3px 8px; border-radius: 10px; font-weight: 700; background: #1d2b44; color: #cbd5e1; white-space: nowrap; }
  html.msh .msh-fl .st.teal { background: #0c4a6e; color: #7dd3fc; } html.msh .msh-fl .st.warn { background: #422006; color: #fcd34d; }
  html.msh .msh-fl .st.info { background: #1e3a5f; color: #93c5fd; } html.msh .msh-fl .st.live { background: #14532d; color: #86efac; }
  html.msh .msh-fl .st.danger { background: #4c0519; color: #fda4af; } html.msh .msh-fl .st.gray { background: #1f2937; color: #9ca3af; }
  html.msh .msh-fl.head { min-height: 30px; font-size: 11px; color: var(--msh-tx3); border-bottom-color: var(--msh-line); }
  html.msh .msh-apthd { padding: 14px 16px 0; display: flex; align-items: center; gap: 10px; }
  html.msh .msh-apthd .nm { flex: 1; min-width: 0; } html.msh .msh-apthd .nm small { display: block; font-size: 12px; color: var(--msh-tx3); }
  html.msh .msh-apthd .nm b { font-size: 20px; font-weight: 700; }
  html.msh .msh-stat { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
  html.msh .msh-stat small { display: block; font-size: 11px; color: var(--msh-tx3); } html.msh .msh-stat b { font-size: 14px; font-weight: 500; }
  html.msh .msh-stat b.mono { font-family: var(--msh-mono); }
  html.msh .msh-bigbtn { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 10px 16px 0; min-height: 44px; border-radius: 12px; background: #0c2440; border: 1px solid #1e3a5f; color: #7dd3fc; font: 500 13px inherit; font-family: inherit; width: calc(100% - 32px); }
  html.msh .msh-bg { display: flex; justify-content: space-around; padding: 4px 16px 8px; }
  html.msh .msh-bg button { display: flex; flex-direction: column; align-items: center; gap: 6px; background: none; border: 0; padding: 4px; color: var(--msh-tx3); font: 500 11px inherit; font-family: inherit; min-height: 44px; }
  html.msh .msh-bg button i { width: 72px; height: 48px; border-radius: 10px; border: 2px solid #22324d; display: block; }
  html.msh .msh-bg button.on { color: var(--msh-tx); } html.msh .msh-bg button.on i { border-color: var(--msh-acc); }
  /* 내 정보 — 줄 높이 약 80%(10-14 운영자 「내 정보의 각 줄 높이를 80% 정도로」) · 다른 페이지 줄은 그대로 */
  html.msh .msh-page[data-page="me"] .msh-row { min-height: 46px; padding-top: 5px; padding-bottom: 5px; }
  html.msh .msh-page[data-page="me"] .msh-row .t { line-height: 1.3; }
  html.msh .msh-page[data-page="me"] .msh-row .t small { margin-top: 1px; }
  html.msh .msh-page[data-page="me"] .msh-h3 { margin: 12px 16px 2px; }
  html.msh .msh-page[data-page="me"] .msh-bg { padding: 2px 16px 4px; }
  html.msh .msh-page[data-page="me"] .msh-bg button i { width: 64px; height: 38px; }
  html.msh .msh-tg { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; padding: 0 16px; border-bottom: 1px solid var(--msh-line2); font-size: 14px; cursor: pointer; }
  html.msh .msh-tg > span { display: flex; align-items: center; gap: 12px; min-width: 0; }
  html.msh .msh-tg > span > svg { color: var(--msh-acc); }
  html.msh .msh-tg small { display: block; font-size: 12px; color: var(--msh-tx3); }
  html.msh .msh-sw { width: 44px; height: 26px; border-radius: 13px; background: #22324d; position: relative; border: 0; padding: 0; flex: none; }
  html.msh .msh-sw::after { content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 10px; background: #8ea0b8; transition: left .15s; }
  html.msh .msh-sw.on { background: #0284c7; } html.msh .msh-sw.on::after { left: 21px; background: #fff; }
  html.msh .msh-near { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 64px; padding: 0 16px; box-sizing: border-box; background: none; border: 0; border-bottom: 1px solid var(--msh-line2); color: var(--msh-tx); text-align: left; font-family: inherit; }
  html.msh .msh-near .ar { width: 36px; height: 36px; border-radius: 18px; background: var(--msh-card); display: flex; align-items: center; justify-content: center; flex: none; }
  html.msh .msh-near .ar svg { width: 22px; height: 22px; stroke-width: 2.2; }
  html.msh .msh-near .t { flex: 1; min-width: 0; } html.msh .msh-near .t b { font: 700 15px var(--msh-mono); } html.msh .msh-near .t small { display: block; font-size: 12px; color: var(--msh-tx2); }
  html.msh .msh-near .ov { font-size: 11px; padding: 3px 8px; border-radius: 10px; background: #422006; color: #fcd34d; font-weight: 700; }
  html.msh .msh-tabs button[hidden] { display: none; }
  /* 지도 말풍선 → 아래 시트(.msh-pop) — 원본 말풍선은 숨김(내용은 시트가 따라 그림 · JS buildPop) */
  html.msh .leaflet-popup-pane .leaflet-popup { visibility: hidden !important; pointer-events: none !important; }
  html.msh body[data-sheet]:not([data-sheet="wxpop"]) .msh-pop { display: none !important; }
  /* 두 대 간격 카드(.pg-card 1258) 위로 — 간격을 보는 중에 METAR 표식을 눌러도 시트가 가려지지 않게(전체 화면 1260 아래) */
  html.msh .msh-sheet.msh-pop { z-index: 1259; }
  html.msh body[data-sheet="wxpop"] .msh-peek, html.msh body[data-sheet="wxpop"] #drawer.side-drawer, html.msh body[data-sheet="wxpop"] #mlPanel, html.msh body[data-sheet="wxpop"] #alertPopover { display: none !important; }
  html.msh .msh-pop-b { margin: 4px 12px 12px; padding: 12px 14px; border-radius: 12px; background: #f8fafc; color: #0f172a; font-size: 14px; line-height: 1.55; overflow-wrap: anywhere; }   /* 원본 말풍선의 인라인 색(밝은 바탕용)을 살리려고 내용 칸만 밝게 */
  html.msh .msh-pop-b .prow { min-height: 28px; }
  html.msh .msh-pop-b .pn { font-size: 17px; font-weight: 700; margin-bottom: 4px; }
  html.msh .msh-pop-b a { color: #0369a1; }
  html.msh .msh-pop-b img { max-width: 100%; height: auto; }
  html.msh .msh-wxi { color: #fbbf24; display: inline-flex; }
  /* 활주로 2D(10-14) — 목록 줄 앞 작은 그림(36px) · 시트 위 큰 그림(밝은 내용 칸 위) */
  html.msh .msh-wxi .msh-rwy-s { display: block; width: 36px; height: 36px; flex: none; }
  /* 기상 목록 줄 오른쪽 날씨 칸(10-14 「가로 공백 활용 · 날씨 아이콘」) — 아이콘 · 기온(크게) · 시정 */
  html.msh .msh-row .msh-wxs { display: flex; align-items: center; gap: 8px; flex: none; margin-left: 4px; }
  html.msh .msh-row .msh-wxs:empty { display: none; }
  html.msh .msh-wxic { width: 30px; height: 30px; flex: none; }
  html.msh .msh-wxtv { display: flex; flex-direction: column; align-items: flex-end; min-width: 44px; line-height: 1.1; }
  html.msh .msh-wxtv b { font: 700 20px/1.1 var(--font-mono, ui-monospace, monospace); color: var(--msh-tx); }
  html.msh .msh-wxtv small { font-size: 11px; color: var(--msh-tx3); margin-top: 2px; }
  html.msh .msh-wdir { width: 11px; height: 11px; fill: #38bdf8; vertical-align: -1px; margin-right: 4px; }
  html.msh .msh-wxi { width: 40px; height: 40px; border-radius: 10px; background: #0f1a2e; align-items: center; justify-content: center; flex: none; }
  html.msh .msh-rwyw { margin: -2px 0 8px; text-align: center; }
  html.msh .msh-rwyw .msh-rwy { display: block; width: 100%; max-width: 360px; height: auto; margin: 0 auto; background: #0b1527; border-radius: 10px; }
  html.msh .msh-wxw { font-size: 10px; padding: 1px 6px; border-radius: 8px; background: #422006; color: #fcd34d; font-weight: 700; margin-left: 4px; }
  html.msh .msh-pop-f:empty { display: none; }
  /* 기상 탭에서 연 시트(.dark) — 내용 칸도 어둡게. Amos 카드 인라인 색(밝은 바탕용)을 어두운 바탕에서 읽히게 바꾼다(10-14) */
  html.msh .msh-pop.dark .msh-pop-b { background: #0f1a2e; color: #e6eef8; }
  html.msh .msh-pop.dark .msh-pop-b [style*="#fff3d6"] { background: rgba(251, 191, 36, .14) !important; }
  html.msh .msh-pop.dark .msh-pop-b [style*="color:#e03131"] { color: #f87171 !important; }
  html.msh .msh-pop.dark .msh-pop-b [style*="color:#2f9e44"] { color: #4ade80 !important; }
  html.msh .msh-pop.dark .msh-pop-b [style*="color:#b45309"] { color: #fbbf24 !important; }
  html.msh .msh-pop.dark .msh-pop-b [style*="color:#7a8a99"] { color: #94a3b8 !important; }
  html.msh .msh-pop.dark .msh-pop-b a { color: #7dd3fc; }
  html.msh .msh-pop-back[hidden] { display: none; }
  html.msh .msh-pop-back { margin-left: -8px; }
  html.msh .msh-news { padding: 12px 16px; border-bottom: 1px solid var(--msh-line2); }
  html.msh .msh-news a { display: block; color: var(--msh-tx); font-size: 15px; font-weight: 500; line-height: 1.45; text-decoration: none; padding: 2px 0 4px; }
  html.msh .msh-news.major a { font-weight: 700; } html.msh .msh-news.major { border-left: 3px solid var(--msh-ac); padding-left: 13px; }
  html.msh .msh-news details { margin-top: 6px; font-size: 13px; color: var(--msh-tx2); } html.msh .msh-news summary { cursor: pointer; color: var(--msh-acc); min-height: 32px; display: flex; align-items: center; }
  html.msh .msh-empty { padding: 20px 16px; font-size: 13px; color: var(--msh-tx3); text-align: center; line-height: 1.6; }

  /* ── 기존 창을 쓰는 곳(알림 허브 · 레이어 · 기체 정보 「자세히」)은 다크 토큰이 색을 맞춘다 — 자리만 ── */
  html.msh .ah-ov .ah-pop { margin-bottom: var(--tabbar-total, 64px); max-height: calc(100vh - var(--tabbar-total, 64px) - var(--hdr-total, 48px)); }

  /* ── 시작 광고 ── */
  html.msh .msh-splash { display: flex; position: fixed; inset: 0; z-index: 1700; background: rgba(5, 10, 20, .78); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: calc(var(--sa-t, 0px) + 24px) 20px calc(var(--sa-b, 0px) + 24px); box-sizing: border-box; overflow-y: auto; }
  html.msh .msh-splash .cps { position: static !important; display: block !important; width: min(360px, 100%) !important; max-width: none !important; margin: 0 !important; left: auto !important; right: auto !important; top: auto !important; bottom: auto !important; box-shadow: 0 20px 50px rgba(0, 0, 0, .7); }
  html.msh .msh-splash .cps .cps-ib[data-a="close"] { display: none; }
  html.msh .msh-splash .cps-more { display: none; }
  html.msh .msh-splash .msh-splash-close { width: min(360px, 100%); height: 52px; border: 0; border-radius: 14px; background: #0284c7; color: #fff; font: 700 16px inherit; font-family: inherit; box-shadow: 0 6px 18px rgba(0, 0, 0, .5); }
  html.msh .msh-splash .msh-splash-note { font-size: 12px; color: #cbd5e1; text-align: center; }
  @media (prefers-reduced-motion: reduce) { html.msh .msh-sw::after { transition: none; } }
}
/* 폰으로 시작한 창을 넓혀 셸이 꺼지면 셸이 지도 단추 열에 넣은 단추(기상 켜고 끄기·두 대 간격)를 숨긴다 — PC 는 제 단추(#pgBtn)를 쓴다(10-14) */
html:not(.msh) #mshWx, html:not(.msh) #mshGap { display: none !important; }