* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body { font-family: system-ui, "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif; }
#map { position: absolute; inset: 0; background: #aadaff; }

/* 左上の操作バー（滑空場プルダウン + 設定） */
#topbar {
  position: absolute; top: 10px; left: 10px; z-index: 1000;
  display: flex; gap: 6px; align-items: center;
}
#siteSelect {
  font-size: 14px; padding: 7px 10px; border-radius: 8px;
  border: 1px solid #bbb; background: rgba(255,255,255,.95);
  box-shadow: 0 1px 4px rgba(0,0,0,.25); max-width: 62vw;
}
#settingsBtn {
  font-size: 18px; line-height: 1; width: 38px; height: 38px;
  border-radius: 8px; border: 1px solid #bbb; background: rgba(255,255,255,.95);
  box-shadow: 0 1px 4px rgba(0,0,0,.25); cursor: pointer;
}

/* 設定パネル */
#settingsPanel {
  position: absolute; top: 58px; left: 10px; z-index: 1001;
  width: 260px; padding: 14px 16px; border-radius: 10px;
  background: #fff; box-shadow: 0 4px 18px rgba(0,0,0,.3);
}
#settingsPanel h2 { margin: 0 0 10px; font-size: 15px; }
#settingsPanel label { display: block; font-size: 13px; margin: 10px 0 4px; color: #333; }
#settingsPanel select { width: 100%; padding: 6px 8px; font-size: 14px; border-radius: 6px; border: 1px solid #bbb; }
#settingsClose { margin-top: 14px; padding: 7px 14px; border-radius: 6px; border: 1px solid #bbb; background: #f2f2f2; cursor: pointer; }

/* 右下ステータス */
#status {
  position: absolute; right: 8px; bottom: 8px; z-index: 1000;
  font-size: 12px; color: #234; background: rgba(255,255,255,.85);
  padding: 3px 8px; border-radius: 6px; pointer-events: none;
}

/* 機体アイコン: 上=ラベル / 中=SVG(方位回転) / 下=高度 */
.ac { position: relative; width: 30px; height: 30px; }
.ac-ico { width: 30px; height: 30px; line-height: 0; }
.ac-ico svg { display: block; transform-origin: 50% 50%; }
.ac-top, .ac-bot {
  position: absolute; left: 50%; transform: translateX(-50%);
  white-space: nowrap; font-size: 11px; font-weight: 700; line-height: 1;
  padding: 1px 4px; border-radius: 4px; pointer-events: none;
}
.ac-top { bottom: 100%; margin-bottom: 2px; color: #111; background: rgba(255,255,255,.82); }
.ac-bot { top: 100%; margin-top: 2px; color: #1a3d1a; background: rgba(255,255,255,.72); font-weight: 600; }
.ac-top:empty, .ac-bot:empty { display: none; }

/* 選択中の機体（当日航跡表示中）を少し強調 */
.leaflet-marker-icon.ac-selected .ac-top { background: #ffe27a; }