/* ===== DSInfoDrawer 說明抽屜（/assets/js/infodrawer.js）=====
 * 2026-10-23 由 airspace 抽出共用（airspace、fuel）。內容寫死在各頁 HTML：
 * 地圖工具的資料靠 JS 載入，Googlebot 常讀不到，這段是它讀得到的正文；也是使用說明。
 * 關閉時用 visibility 藏：移出 Tab 順序與無障礙樹，但 DOM 仍在、Google 照常索引。
 * 從右側滑出；底部讓開全站固定的 .tool-nav（52px）。遮罩 z-index 2000、抽屜 2001。 */

.info-scrim {
    position: fixed;
    inset: 0;
    z-index: 2000;
    background: var(--bg-dark);
    opacity: 0.6;
}
.info-scrim[hidden] { display: none; }

.info-drawer {
    position: fixed;
    top: 0;
    right: 0;
    bottom: calc(52px + env(safe-area-inset-bottom, 0px));
    z-index: 2001;
    width: min(88vw, 400px);
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border-left: 1px solid var(--hairline);
    box-shadow: var(--glass-shadow);
    transform: translateX(100%);
    visibility: hidden;
    transition: transform 0.25s ease, visibility 0s linear 0.25s;
}
.info-drawer.is-open {
    transform: translateX(0);
    visibility: visible;
    transition: transform 0.25s ease;
}
@media (prefers-reduced-motion: reduce) {
    .info-drawer, .info-drawer.is-open { transition: none; }
}
.info-drawer-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-1) var(--space-1) var(--space-1) var(--space-2);
    border-bottom: 1px solid var(--hairline);
    flex-shrink: 0;
}
.info-drawer-title { font-weight: 700; }
.info-drawer-body {
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: var(--space-1) var(--space-2) var(--space-3);
    font-size: 0.9em;
    line-height: 1.7;
    color: var(--text-white-80);
}
.info-drawer-body section + section { margin-top: var(--space-3); }
.info-drawer-body h2 {
    font-size: 1.05em;
    color: var(--primary);
    margin: var(--space-2) 0 var(--space-1);
}
.info-drawer-body h3 {
    font-size: 1em;
    color: var(--text-white);
    margin: var(--space-2) 0 4px;
}
.info-drawer-body p + p { margin-top: var(--space-1); }
.info-drawer-body strong { color: var(--text-white); }
.info-drawer-body ol,
.info-drawer-body ul { padding-left: 1.4em; }
.info-drawer-body li + li { margin-top: 4px; }
.info-drawer-body a { color: var(--primary); }

/* 地圖右上角的開關鈕：借 .leaflet-control-layers 的外框，尺寸與底圖切換鈕一致
 * （非觸控 36px、觸控 44px）。疊 .leaflet-container 壓過 Leaflet 的 `.leaflet-container a` 連結藍 */
.leaflet-container .info-control-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    color: var(--bg-dark);
    cursor: pointer;
}
.leaflet-touch .info-control-btn { width: 44px; height: 44px; }
.info-control-btn .bx { font-size: 24px; }
.info-control-btn:focus-visible { outline: 2px solid var(--status-warn); outline-offset: -2px; }