* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; font-family: system-ui, "Segoe UI", sans-serif; }
#map { position: absolute; inset: 0; }
#panel {
  position: absolute; top: 12px; left: 12px; z-index: 5; width: 300px; max-width: calc(100% - 24px);
  background: rgba(255,255,255,.96); border-radius: 10px; box-shadow: 0 2px 12px rgba(0,0,0,.25);
  padding: 12px 14px; font-size: 13px; color: #1a2230;
}
#panel h1 { font-size: 15px; margin: 0 0 8px; display: flex; align-items: center; gap: 6px; }
#panel h1 small { font-weight: 400; color: #667; font-size: 11px; }
.row { display: flex; gap: 6px; align-items: center; margin: 6px 0; }
.row label { width: 42px; color: #556; }
.row input { flex: 1; min-width: 0; width: 100%; padding: 5px 7px; border: 1px solid #ccd; border-radius: 6px; font-size: 13px; text-transform: uppercase; }
.wind { display: flex; gap: 10px; align-items: center; margin: 8px 0; padding: 8px; background: #f4f6fb; border-radius: 8px; }
.wfields { flex: 1; min-width: 0; }
.row .u { color: #778; font-size: 11px; width: 26px; text-align: left; }
/* 風見鶏(ドラッグで風向=角度・風速=中心からの距離) */
#vane { touch-action: none; cursor: grab; flex: 0 0 auto; }
.v-ring { fill: #eef3fb; stroke: #b8c2d8; stroke-width: 1.5; }
.v-center { fill: #556; }
.v-lbl { font: 700 9px system-ui, sans-serif; fill: #667; text-anchor: middle; dominant-baseline: middle; }
.v-arm { stroke: #2563eb; stroke-width: 2.5; stroke-linecap: round; }
.v-handle { fill: #2563eb; stroke: #fff; stroke-width: 2; cursor: grab; }
.btns { display: flex; gap: 6px; margin-top: 8px; }
.btns button { flex: 1; padding: 6px; border: 0; border-radius: 6px; cursor: pointer; font-size: 13px; }
#calc { background: #2563eb; color: #fff; }
#clear { background: #e5e7eb; color: #333; }
.hint { color: #778; font-size: 11px; margin: 4px 0 0; }
#result { margin-top: 10px; border-top: 1px solid #e3e6ee; padding-top: 8px; display: none; }
#result.show { display: block; }
.metric { display: flex; justify-content: space-between; margin: 3px 0; }
.metric b { font-variant-numeric: tabular-nums; }
.big { font-size: 18px; color: #2563eb; }
.leg { font-size: 11px; color: #667; margin-top: 6px; }
.dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
#layers { position: absolute; bottom: 12px; left: 12px; z-index: 5; background: rgba(255,255,255,.94);
  border-radius: 8px; padding: 8px 10px; font-size: 12px; color: #334; box-shadow: 0 1px 6px rgba(0,0,0,.2); }
#layers .lhdr { font-weight: 600; font-size: 11px; color: #556; margin-bottom: 4px; }
#layers label { display: flex; align-items: center; gap: 6px; margin: 3px 0; cursor: pointer; user-select: none; }
#layers input { margin: 0; cursor: pointer; }

/* 地図カーソルを常に通常の矢印に(手のアイコンを抑止) */
.maplibregl-canvas-container,
.maplibregl-canvas-container.maplibregl-interactive,
.maplibregl-canvas-container.maplibregl-interactive .maplibregl-canvas { cursor: default !important; }

/* 赤線中間の情報ボックス(TC/WCA/TH/VAR/CH) */
.mid-box {
  background: #fff; border: 2px solid #b91c1c; border-radius: 6px; padding: 4px 8px;
  font: 600 11px/1.4 system-ui, sans-serif; color: #1a2230; pointer-events: none;
  box-shadow: 0 1px 6px rgba(0,0,0,.45); display: grid; grid-template-columns: auto auto;
  gap: 0 10px; white-space: nowrap;
}
.mid-box .k { color: #b91c1c; font-weight: 700; }
.mid-box .v { text-align: right; font-variant-numeric: tabular-nums; }

/* 出発S/到着G マーカー(DOM。縮尺に関係なく固定サイズで常時表示) */
.route-marker {
  width: 30px; height: 30px; border-radius: 50%; color: #fff;
  font: 700 16px system-ui, sans-serif; display: flex; align-items: center; justify-content: center;
  border: 2px solid #fff; box-shadow: 0 1px 5px rgba(0,0,0,.55); pointer-events: none;
}