/* ============================================================
   features/map-layers — 「지도 레이어」 패널 모양 (2026-09-13 신설)
   ------------------------------------------------------------
   ⭐ 부품 모양은 표시 서랍 목업(css/app.css v82 `.pane[data-pane="disp"]` — .psec 카드 · .phd 점 머리 ·
      .toggle 스위치 · .f-chip)과 **같은 값**이다. 한 화면 안에서 같은 스위치가 두 모양이면 다시 «제각각»이 된다.
   ⭐ 넓은 화면 = 오른쪽 위에 뜨는 카드 — 기체 상세 창(#acDetail, 같은 자리·같은 모양)과 한 식구로 보이게 했다.
      둘은 «한 번에 하나»만 열린다(map-layers.js conflict). 좁은 화면(≤760px) = 탭바 위 바텀시트.
   ⚠ 색·치수는 호스트 토큰(theme.css · shell.css)을 쓰고, 없으면 옆의 기본값으로 떨어진다(다른 호스트 재사용).
   ⚠ 이 저장소에는 전역 `button{width:100%;margin-top:8px;…}`(app.css)가 있다 — 이 파일의 버튼은 전부
     width:auto·margin:0으로 되돌린다(안 하면 칩·링크 버튼이 한 줄을 통째로 먹는다).
   ============================================================ */

/* ── 지도 위 「레이어」 버튼 — 옛 배경 콤보(#bgSwitch) 자리 ── */
.mlp-btn {
  position: fixed; z-index: 1200;
  top: calc(var(--hdr-total, 68px) + var(--gap, 14px)); right: calc(var(--gap, 14px) + var(--sa-r, 0px));
  width: auto; height: 32px; margin: 0; padding: 0 12px 0 10px;
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--bg-surface-float, #fff); color: var(--text-primary, #0f172a);
  border: 1px solid var(--border-medium, #cbd5e1); border-radius: var(--radius-md, 10px);
  box-shadow: var(--shadow-md, 0 4px 16px -2px rgba(15,23,42,.08));
  font-family: inherit; font-size: var(--fs-md, 12px); font-weight: 700; cursor: pointer;
  transition: right var(--transition-smooth, .25s), border-color var(--transition-fast, .15s);
}
.mlp-btn svg { width: 16px; height: 16px; color: var(--accent-cyan, #0284c7); flex: none; }
.mlp-btn:hover { background: var(--bg-surface-float, #fff); border-color: var(--accent-cyan, #0284c7); }
.mlp-btn.on { background: var(--accent-cyan, #0284c7); color: var(--text-inverse, #fff); border-color: var(--accent-cyan, #0284c7); }
.mlp-btn.on svg { color: currentColor; }
/* 거르기가 걸려 있으면 버튼 모서리에 점 하나 — 알약과 같은 뜻을 버튼도 말한다(색만으로 알리지 않고 알약이 글로 말한다) */
.mlp-btn.flt::after { content: ''; position: absolute; top: -3px; right: -3px; width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent-cyan, #0284c7); box-shadow: 0 0 0 2px var(--bg-surface-float, #fff); }
.mlp-btn:focus-visible { outline: 2px solid var(--accent-cyan, #0284c7); outline-offset: 2px; }
/* 기체 상세 창이 열리면 그 폭만큼 비켜선다 — 옛 #bgSwitch와 같은 규약(shell.css body.inspector-open) */
body.inspector-open .mlp-btn { right: calc(var(--insp-w, 430px) + var(--gap, 14px) * 2 + var(--sa-r, 0px)); }

/* ── 거르기 알약 — 걸려 있는 동안 늘 보인다(패널을 닫아도) ── */
.mlp-pill {
  position: fixed; z-index: 1190; left: 50%; transform: translateX(-50%);
  top: calc(var(--hdr-total, 68px) + var(--gap, 14px));
  display: inline-flex; align-items: center; gap: 9px; height: 32px; padding: 0 5px 0 12px;
  background: #1e293b; color: #f8fafc; border-radius: 999px; white-space: nowrap;
  font-size: var(--fs-md, 12px); box-shadow: var(--shadow-lg, 0 12px 32px -4px rgba(15,23,42,.14));
}
.mlp-pill[hidden] { display: none !important; }
.mlp-pill .mlp-dot { width: 7px; height: 7px; border-radius: 50%; background: #38bdf8; box-shadow: 0 0 0 3px rgba(56,189,248,.25); flex: none; }
.mlp-pill .mlp-pill-what { color: #a3b1c2; }
.mlp-pill button { width: auto; margin: 0; height: 24px; padding: 0 10px; border: 0; border-radius: 999px; box-shadow: none;
  background: rgba(255,255,255,.1); color: #7dd3fc; font-size: var(--fs-sm, 11px); font-weight: 700; cursor: pointer; }
.mlp-pill button:hover { background: rgba(255,255,255,.18); color: #bae6fd; }

/* ── 패널 ── */
.mlp {
  position: fixed; z-index: 1260;
  top: calc(var(--hdr-total, 68px) + var(--gap, 14px)); right: calc(var(--gap, 14px) + var(--sa-r, 0px));
  width: 320px; max-height: calc(100% - var(--hdr-total, 68px) - var(--gap, 14px) * 2 - 20px);
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--bg-space, #eef2f6); color: var(--text-primary, #0f172a);
  border: 1px solid var(--border-medium, #cbd5e1); border-radius: var(--radius-lg, 14px);
  box-shadow: var(--shadow-lg, 0 12px 32px -4px rgba(15,23,42,.14));
  font-family: inherit;
}
.mlp[hidden] { display: none !important; }
.mlp button { width: auto; margin: 0; box-shadow: none; font-family: inherit; }
.mlp-rxhost button { width: auto; margin: 0; box-shadow: none; font-family: inherit; }   /* 2026-09-28 표시 › 피더 탭으로 옮긴 수신기 칩 — 전역 button{width:100%}(app.css)을 푼다 */
.mlp-hd { display: flex; align-items: center; gap: 8px; flex: none; height: 44px; padding: 0 6px 0 14px;
  background: var(--bg-surface-elevated, #fff); border-bottom: 1px solid var(--border-subtle, #e2e8f0); }
.mlp-hd > svg { width: 16px; height: 16px; color: var(--accent-cyan, #0284c7); flex: none; }
.mlp-hd b { font-size: var(--fs-lg, 13px); font-weight: 700; letter-spacing: -.01em; }
.mlp .mlp-x { margin-left: auto; width: 30px; height: 30px; padding: 0; border: 0; border-radius: var(--radius-sm, 6px);
  background: none; color: var(--text-tertiary, #64748b); display: grid; place-items: center; cursor: pointer; }
.mlp .mlp-x:hover { background: var(--bg-hover, #f1f5f9); color: var(--text-primary, #0f172a); }
.mlp .mlp-x svg { width: 16px; height: 16px; }
.mlp-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 10px; display: flex; flex-direction: column; gap: 10px;
  overscroll-behavior: contain; scrollbar-width: thin; }

/* ── 탭 (2026-09-27) ── 절 셋을 한 줄로 쌓으면 PC에서도 스크롤이 남았다(실측 약 1,150px > 패널 상한 약 960px).
   「지도 · 공역」 / 「항공기 거르기」 두 탭. 몸통(.mlp-body) 밖에 두어 스크롤 중에도 보인다.
   shell.css 공용 .subtabs를 빌리지 않는다 ─ 공용 스타일이 바뀌어도 패널이 흔들리지 않게 .mlp 안에 가둔다. */
.mlp-tabs { display: flex; flex: none; gap: 4px; padding: 6px 10px 0; background: var(--bg-surface-elevated, #fff);
  border-bottom: 1px solid var(--border-subtle, #e2e8f0); }
.mlp-tabs button { flex: 1 1 0; display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 34px; padding: 0 8px;
  border: 0; border-bottom: 2px solid transparent; border-radius: var(--radius-sm, 6px) var(--radius-sm, 6px) 0 0; background: none;
  color: var(--text-tertiary, #64748b); font-size: 12.5px; font-weight: 700; letter-spacing: -.01em; cursor: pointer;
  transition: color var(--transition-fast, .15s), background var(--transition-fast, .15s); }
.mlp-tabs button:hover { color: var(--text-primary, #0f172a); background: var(--bg-hover, #f1f5f9); }
.mlp-tabs button[aria-selected="true"] { color: var(--accent-cyan, #0284c7); border-bottom-color: var(--accent-cyan, #0284c7); }
.mlp-tabs button:focus-visible { outline: 2px solid var(--accent-cyan, #0284c7); outline-offset: -2px; }
/* 거르기가 걸려 있으면 「항공기 거르기」 탭에 점 ─ 다른 탭을 보고 있어도 걸린 줄 안다(알약과 같은 조건, paintPill) */
.mlp-tab-dot { display: none; width: 7px; height: 7px; border-radius: 50%; background: var(--accent-cyan, #0284c7);
  box-shadow: 0 0 0 3px var(--accent-cyan-soft, #e0f2fe); }
.mlp-tabs button.flt .mlp-tab-dot { display: inline-block; }
.mlp-pane { display: flex; flex-direction: column; gap: 10px; }
.mlp-pane[hidden] { display: none !important; }

/* 절 = 카드 (표시 서랍 .psec와 같은 값) */
.mlp-sec { background: var(--bg-surface-elevated, #fff); border: 1px solid var(--border-subtle, #e2e8f0);
  border-radius: var(--radius-md, 10px); padding: 12px 14px; box-shadow: var(--shadow-sm, 0 1px 3px rgba(15,23,42,.05));
  transition: border-color var(--transition-fast, .15s); }
.mlp-sec:hover { border-color: var(--border-medium, #cbd5e1); }
.mlp-phd { display: flex; align-items: center; gap: 6px; padding: 0 0 8px; margin: 0 0 8px;
  border-bottom: 1px solid var(--border-subtle, #e2e8f0); font-size: 12.5px; font-weight: 700; letter-spacing: -.01em; }
.mlp-phd::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--accent-cyan, #0284c7); flex: none; }
.mlp-end { margin-left: auto !important; }

/* 한 줄 = 한 항목 (표시 서랍 .toggle-row와 같은 값) */
.mlp-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 12.5px;
  padding: 6px; margin: 0 -6px; border-bottom: 1px solid var(--border-subtle, #e2e8f0); border-radius: var(--radius-sm, 6px); cursor: pointer; }
.mlp-row:last-child { border-bottom: 0; }
.mlp-row:hover { background: var(--bg-hover, #f1f5f9); }
.mlp-row[hidden] { display: none !important; }
.mlp-lbl { flex: 1 1 auto; min-width: 0; color: var(--text-secondary, #475569); line-height: 1.45; }
.mlp-sub { cursor: default; border-bottom: 0; padding-top: 2px; }
.mlp-sub:hover { background: none; }
.mlp-sub .mlp-lbl { flex: none; color: var(--text-tertiary, #64748b); }
.mlp-sub select { flex: 1 1 auto; width: auto; min-width: 0; height: 28px; padding: 0 6px; font-size: var(--fs-md, 12px); }
/* 항로 범위는 관리자만 — 호스트 게이트(awyScopeAdminGate)가 select에 hidden을 걸면 줄째 접는다 */
.mlp-sub:has(> select[hidden]) { display: none; }
/* 한 단 들인 스위치 줄(MOA 「└ 레이블 표기」, 2026-10-16 수정/172) — 누르는 줄이라 손 모양, 스위치는 오른쪽 끝 */
.mlp-subtog { cursor: pointer; }
.mlp-subtog:hover { background: var(--bg-hover, #f1f5f9); }
.mlp-subtog .mlp-lbl { flex: 1 1 auto; padding-left: 6px; }
.mlp-tag { font-style: normal; font-size: 10px; font-weight: 700; color: var(--accent-indigo, #4f46e5);
  background: var(--accent-indigo-bg, #eef2ff); border-radius: 4px; padding: 1px 5px; margin-left: 5px; vertical-align: 1px; }

/* 토글 스위치 (표시 서랍 .toggle과 같은 값) */
.mlp-tog { position: relative; width: 36px; height: 20px; flex: none; display: block; }
.mlp-tog input { position: absolute; opacity: 0; width: 0; height: 0; margin: 0; }
.mlp-tog i { position: absolute; inset: 0; background: var(--border-medium, #cbd5e1); border-radius: 10px; cursor: pointer;
  transition: background var(--transition-fast, .15s); }
.mlp-tog i::before { content: ''; position: absolute; left: 2px; top: 2px; width: 16px; height: 16px; border-radius: 50%;
  background: var(--bg-surface-elevated, #fff); box-shadow: 0 1px 3px rgba(0,0,0,.2); transition: transform var(--transition-fast, .15s); }
.mlp-tog input:checked + i { background: var(--accent-cyan, #0284c7); }
.mlp-tog input:checked + i::before { transform: translateX(16px); }
.mlp-tog input:focus-visible + i { box-shadow: 0 0 0 2px var(--bg-surface-elevated, #fff), 0 0 0 4px var(--accent-cyan, #0284c7); }
.mlp-tog input:disabled + i { opacity: .45; cursor: not-allowed; }

/* 배경 미리보기 칸 — 3×2 */
.mlp-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 6px; }
.mlp-tiles[hidden] { display: none; }
.mlp .mlp-tile { position: relative; padding: 0; border: 1px solid var(--border-medium, #cbd5e1); border-radius: 8px;
  background: var(--bg-surface-elevated, #fff); overflow: hidden; display: flex; flex-direction: column; cursor: pointer;
  transition: border-color var(--transition-fast, .15s), box-shadow var(--transition-fast, .15s); }
.mlp .mlp-tile svg { width: 100%; height: auto; aspect-ratio: 16 / 10; display: block; }
.mlp .mlp-tile span { font-size: var(--fs-sm, 11px); font-weight: 700; color: var(--text-secondary, #475569); padding: 4px 0 5px; text-align: center; }
.mlp .mlp-tile .mlp-tick { position: absolute; top: 4px; right: 4px; width: 16px; height: 16px; border-radius: 50%;
  background: var(--accent-cyan, #0284c7); color: var(--text-inverse, #fff); display: none; place-items: center; }
.mlp .mlp-tile .mlp-tick svg { width: 11px; height: 11px; aspect-ratio: auto; }
.mlp .mlp-tile:hover { background: var(--bg-surface-elevated, #fff); border-color: var(--accent-cyan, #0284c7); }
.mlp .mlp-tile[aria-checked="true"] { border-color: var(--accent-cyan, #0284c7); box-shadow: 0 0 0 1px var(--accent-cyan, #0284c7); }
.mlp .mlp-tile[aria-checked="true"] span { color: var(--accent-cyan, #0284c7); }
.mlp .mlp-tile[aria-checked="true"] .mlp-tick { display: grid; }

/* 선명도 */
.mlp-mini { display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
  font-size: var(--fs-sm, 11px); font-weight: 700; color: var(--text-tertiary, #64748b); margin: 12px 0 4px; }
.mlp-mini small { font-weight: 400; }
.mlp-sl { display: grid; grid-template-columns: 52px 1fr 40px; align-items: center; gap: 8px;
  font-size: var(--fs-md, 12px); color: var(--text-secondary, #475569); padding: 3px 0; }
.mlp-sl[hidden] { display: none; }
.mlp-sl input { width: 100%; margin: 0; accent-color: var(--accent-cyan, #0284c7); }
.mlp-sl output, .mlp-fhd output { font-family: var(--font-mono, monospace); font-size: var(--fs-sm, 11px);
  color: var(--text-primary, #0f172a); text-align: right; font-variant-numeric: tabular-nums; }
.mlp-fhd output.off { color: var(--text-tertiary, #64748b); }
/* 지점 글자 크기(#wptScaleSlot) — 그 레이어(「지점 · 항법시설」) 자체가 꺼져 있으면 슬라이더를
   만져도 지도에 효과가 없다. 흐리게 해 «만졌는데 안 바뀐다»로 읽히지 않게 한다(2026-09-14 리뷰
   개선 — index.html syncMapCfg가 mapCfgOn('point')를 보고 .off를 토글한다). */
.mlp-sl.off { opacity: .45; }

/* 잠금 띠 — 비로그인이면 절 머리 아래에 한 줄. 무엇이 왜 안 되는지 말한다(조용히 비활성으로 두지 않는다) */
.mlp-lock { display: none; align-items: center; gap: 8px; margin: 0 0 8px; padding: 8px 10px;
  border-radius: var(--radius-sm, 6px); background: var(--bg-sunken, #f8fafc); border: 1px solid var(--border-subtle, #e2e8f0);
  font-size: var(--fs-md, 12px); color: var(--text-secondary, #475569); }
.mlp-lock svg { width: 14px; height: 14px; color: var(--text-tertiary, #64748b); flex: none; }
.mlp-sec.locked .mlp-lock { display: flex; }
.mlp-sec.locked .mlp-row:not(.mlp-sub), .mlp-sec.locked .mlp-f { opacity: .45; }
/* 지점 글자 크기(#wptScaleSlot, .mlp-sl) — 회원 전용 절 안에 있지만 .mlp-row가 아니라 위 규칙에
   안 걸린다. 지점 레이어 자체가 잠겨 안 보일 때는 이 슬라이더도 같이 흐리게(2026-09-14, D4). */
.mlp-sec.locked .mlp-sl { opacity: .45; }
.mlp .mlp-btn-s { margin-left: auto; height: 26px; padding: 0 10px; border: 0; border-radius: var(--radius-sm, 6px);
  background: var(--accent-cyan, #0284c7); color: var(--text-inverse, #fff); font-size: var(--fs-md, 12px); font-weight: 700; cursor: pointer; }
.mlp .mlp-btn-s:hover { background: var(--accent-cyan, #0284c7); filter: brightness(1.06); }
.mlp .mlp-link { padding: 0; border: 0; background: none; color: var(--accent-cyan, #0284c7);
  font-size: var(--fs-sm, 11px); font-weight: 700; cursor: pointer; }
.mlp .mlp-link:hover { background: none; text-decoration: underline; }
.mlp .mlp-link:disabled { color: var(--text-tertiary, #64748b); opacity: .6; cursor: default; text-decoration: none; }

/* 항공기 거르기 */
.mlp-f { padding: 8px 0; border-bottom: 1px solid var(--border-subtle, #e2e8f0); }
.mlp-f[hidden] { display: none; }
.mlp-f:last-of-type { border-bottom: 0; }
.mlp-fhd { display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
  font-size: 12.5px; color: var(--text-secondary, #475569); margin-bottom: 6px; }
.mlp-dual { position: relative; height: 20px; --lo: 0; --hi: 1; }
.mlp-dual .mlp-rail, .mlp-dual .mlp-fill { position: absolute; top: 8px; height: 4px; border-radius: 2px; }
.mlp-dual .mlp-rail { left: 8px; right: 8px; background: var(--border-medium, #cbd5e1); }
.mlp-dual .mlp-fill { left: calc(8px + (100% - 16px) * var(--lo)); width: calc((100% - 16px) * (var(--hi) - var(--lo)));
  background: var(--accent-cyan, #0284c7); }
.mlp-dual input { position: absolute; inset: 0; width: 100%; height: 20px; margin: 0; padding: 0; border: 0; background: none;
  pointer-events: none; -webkit-appearance: none; appearance: none; }
.mlp-dual input::-webkit-slider-runnable-track { background: transparent; height: 20px; }
.mlp-dual input::-moz-range-track { background: transparent; }
.mlp-dual input::-webkit-slider-thumb { pointer-events: auto; -webkit-appearance: none; width: 16px; height: 16px; margin-top: 2px;
  border-radius: 50%; background: var(--bg-surface-elevated, #fff); border: 2px solid var(--accent-cyan, #0284c7);
  box-shadow: var(--shadow-sm, 0 1px 3px rgba(15,23,42,.05)); cursor: grab; }
.mlp-dual input::-moz-range-thumb { pointer-events: auto; width: 12px; height: 12px; border-radius: 50%;
  background: var(--bg-surface-elevated, #fff); border: 2px solid var(--accent-cyan, #0284c7); cursor: grab; }
.mlp-dual input:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px var(--accent-cyan-soft, #e0f2fe); }
.mlp-dual input:disabled::-webkit-slider-thumb { cursor: not-allowed; }
.mlp-ticks { position: relative; height: 14px; margin: 2px 8px 0; font-family: var(--font-mono, monospace);
  font-size: var(--fs-xs, 10px); color: var(--text-tertiary, #64748b); }
.mlp-ticks span { position: absolute; top: 0; transform: translateX(-50%); white-space: nowrap; }
.mlp-ticks span:first-child { transform: none; }
.mlp-ticks span:last-child { transform: translateX(-100%); }
.mlp-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.mlp .mlp-chip, .mlp-rxhost .mlp-chip { height: 28px; padding: 0 11px 0 9px; border-radius: 999px; border: 1px solid var(--border-medium, #cbd5e1);
  background: var(--bg-surface, #fff); color: var(--text-secondary, #475569); font-size: var(--fs-sm, 11px); font-weight: 700;
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer; transition: all var(--transition-fast, .15s); }
.mlp .mlp-chip i, .mlp-rxhost .mlp-chip i { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.mlp .mlp-chip:hover, .mlp-rxhost .mlp-chip:hover { background: var(--bg-hover, #f1f5f9); color: var(--text-primary, #0f172a); }
.mlp .mlp-chip[aria-pressed="true"], .mlp-rxhost .mlp-chip[aria-pressed="true"] { background: var(--accent-cyan, #0284c7); border-color: var(--accent-cyan, #0284c7); color: var(--text-inverse, #fff); }
.mlp .mlp-chip[aria-pressed="true"] i, .mlp-rxhost .mlp-chip[aria-pressed="true"] i { box-shadow: 0 0 0 1.5px var(--text-inverse, #fff); }
.mlp .mlp-chip:disabled, .mlp-rxhost .mlp-chip:disabled { opacity: .45; cursor: not-allowed; }
/* 항공사 칩 (2026-09-19) — 로고(있을 때만)·이름·지금 대수. 로고는 흰 바탕에 얹어 눌린 칩(하늘색)에서도 원래 색으로 보이게 */
.mlp .mlp-chip img.mlp-logo { width: 16px; height: 16px; object-fit: contain; border-radius: 3px; background: #fff; flex: none; }
.mlp .mlp-chip em { font-style: normal; font-family: var(--font-mono, monospace); font-weight: 600; opacity: .75; }
.mlp-hint { margin-top: 6px; font-size: var(--fs-sm, 11px); color: var(--text-tertiary, #64748b); }
.mlp-hint[hidden] { display: none; }
.mlp-foot { margin-top: 10px; padding-top: 9px; border-top: 1px dashed var(--border-subtle, #e2e8f0);
  font-size: var(--fs-sm, 11px); line-height: 1.65; color: var(--text-muted, #64748b); }

/* 옮겨 온 호스트 공항 칸 — 표시 서랍에 있던 모양 그대로(.fieldrow · .f-input · .f-btn · .hint) */
.mlp-slot .fieldrow { display: grid; grid-template-columns: auto 1fr auto 1fr; align-items: center; gap: 6px; }
.mlp-slot .fieldlab { font-size: var(--fs-md, 12px); color: var(--text-tertiary, #64748b); }
.mlp-slot .f-input { width: 100%; min-width: 0; height: 28px; padding: 0 8px; font-size: var(--fs-md, 12px); }
.mlp-slot .btnrow { display: flex; gap: 6px; margin-top: 6px; }
.mlp-slot .f-btn { flex: 1 1 auto; width: auto; margin: 0; height: 28px; padding: 0 12px; border: 0; border-radius: var(--radius-sm, 6px);
  background: var(--accent-cyan, #0284c7); color: var(--text-inverse, #fff); font-size: var(--fs-md, 12px); font-weight: 700; cursor: pointer; box-shadow: none; }
.mlp-slot .f-btn:hover { background: var(--accent-cyan, #0284c7); filter: brightness(1.06); }
.mlp-slot .f-btn.sec { background: var(--bg-sunken, #f8fafc); color: var(--text-primary, #0f172a); border: 1px solid var(--border-medium, #cbd5e1); }
.mlp-slot .f-btn.sec:hover { background: var(--bg-hover, #f1f5f9); filter: none; }
.mlp-slot .f-btn:disabled { opacity: .5; cursor: not-allowed; filter: none; }
.mlp-slot .hint { font-size: var(--fs-sm, 11px); margin-top: 6px; }

/* ── 좁은 화면(≤760px) — 탭바 위 바텀시트 (호스트 시트들과 같은 자리·같은 모서리) ── */
@media (max-width: 760px) {
  .mlp-btn { width: 40px; height: 40px; padding: 0; justify-content: center; top: calc(var(--hdr-total, 48px) + var(--gap, 10px)); }
  .mlp-btn-t { display: none; }
  .mlp-btn svg { width: 19px; height: 19px; }
  .mlp-pill { top: calc(var(--hdr-total, 48px) + 8px); height: 30px; font-size: var(--fs-sm, 11px); max-width: calc(100vw - 120px); }
  .mlp-pill .mlp-pill-what { display: none; }
  .mlp {
    left: 0; right: 0; top: auto; bottom: var(--tabbar-total, 0px); width: auto;
    height: calc((100% - var(--hdr-total, 48px) - var(--tabbar-total, 0px) - 8px) * 0.62);
    max-height: calc(100% - var(--hdr-total, 48px) - var(--tabbar-total, 0px));
    border-radius: var(--radius-lg, 14px) var(--radius-lg, 14px) 0 0; border-left: 0; border-right: 0; border-bottom: 0;
    z-index: 1265;
  }
}
@media (prefers-reduced-motion: reduce) {
  .mlp-btn, .mlp-sec, .mlp-tog i, .mlp-tog i::before, .mlp .mlp-tile, .mlp .mlp-chip { transition: none; }
}