/* ═══════════════════════════════════════════════════════════
   layout.css — 構造だけ。色や装飾は tokens.css の変数経由。
   ソルへ: レイアウトの骨格はここ。自由に上書きして構いません。
   守ってほしいのは 1つだけ ── タップ領域 44px 以上。
   ═══════════════════════════════════════════════════════════ */

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0; padding: 0;
  height: 100%;
  min-height: 100dvh;
  overflow: hidden;
  overscroll-behavior: none;
  background: var(--km-bg);
  color: var(--km-fg);
  font-family: var(--km-font);
  font-size: 16px;
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
}

/* ── 地図 ─────────────────────────────────────────────── */
.km-map {
  position: fixed; inset: 0;
  z-index: 0;
  background: var(--km-bg);
  transform: rotate(var(--km-heading));
  transform-origin: 50% 50%;
  transition: transform .35s linear;
}
.km-map .leaflet-tile-pane { filter: var(--km-tile-filter); }
.km-map .leaflet-control-attribution {
  background: transparent; color: var(--km-fg-dim); font-size: 9px;
}

/* コンパス連動時は地図が回るぶん、画面外が見えないよう拡大する */
body.is-compass-on .km-map { transform: rotate(var(--km-heading)) scale(1.45); }

/* ── 上部バー ─────────────────────────────────────────── */
.km-top {
  position: fixed; z-index: 20;
  top: calc(var(--km-safe-top) + 8px); left: 8px; right: 8px;
  display: flex; gap: 8px; align-items: center; justify-content: space-between;
}

.km-scopes { display: flex; gap: 6px; }

/* ── チップ ───────────────────────────────────────────── */
.km-chip {
  min-height: var(--km-tap-min);
  min-width: var(--km-tap-min);
  padding: 0 14px;
  border: 0; border-radius: var(--km-radius-chip);
  background: var(--km-chip-bg);
  color: var(--km-chip-fg);
  font: inherit; font-weight: 600;
  backdrop-filter: blur(12px);
  cursor: pointer;
}
.km-chip[aria-pressed="true"] {
  background: var(--km-chip-bg-on);
  color: var(--km-chip-fg-on);
}
.km-chip--wide { flex: 1; }

.km-icon-btn {
  width: var(--km-tap-min); height: var(--km-tap-min);
  border: 0; border-radius: var(--km-radius-chip);
  background: var(--km-chip-bg); color: var(--km-chip-fg);
  font-size: 18px; backdrop-filter: blur(12px); cursor: pointer;
}

/* ── 下部 ─────────────────────────────────────────────── */
.km-bottom {
  position: fixed; z-index: 20;
  left: 8px; right: 8px;
  bottom: calc(var(--km-safe-bottom) + 8px);
  display: grid; gap: 8px;
}

.km-summary {
  display: grid; gap: 2px;
  padding: 12px 14px;
  border-radius: var(--km-radius);
  background: var(--km-surface);
  backdrop-filter: blur(16px);
}
.km-summary__date { font-size: 12px; color: var(--km-fg-dim); }
.km-summary__best { font-size: 17px; font-weight: 700; }

.km-origin { display: flex; gap: 6px; }

/* ── ボトムシート ─────────────────────────────────────── */
.km-sheet {
  position: fixed; z-index: 40;
  left: 0; right: 0; bottom: 0;
  max-height: 78vh; overflow-y: auto;
  padding: 8px 16px calc(var(--km-safe-bottom) + 24px);
  border-radius: var(--km-radius) var(--km-radius) 0 0;
  background: var(--km-surface-2);
  backdrop-filter: blur(20px);
}
.km-sheet[hidden] { display: none; }

.km-sheet__grab {
  display: block; width: 44px; height: 24px; margin: 0 auto 8px;
  border: 0; background: transparent; cursor: pointer;
}
.km-sheet__grab::before {
  content: ''; display: block; width: 36px; height: 4px; margin: 10px auto;
  border-radius: 2px; background: var(--km-border);
}

.km-sheet__title { margin: 0; font-size: 22px; }
.km-sheet__verdict { margin: 2px 0 14px; font-size: 15px; font-weight: 700; }
.km-sheet__verdict[data-verdict="daikichi"] { color: var(--km-daikichi-stroke); }
.km-sheet__verdict[data-verdict="kichi"]    { color: var(--km-kichi-stroke); }
.km-sheet__verdict[data-verdict="kyo"],
.km-sheet__verdict[data-verdict="daikyo"]   { color: var(--km-ha-stroke); }

.km-sheet__stars { margin: 0 0 14px; display: grid; gap: 2px; }
.km-starrow {
  display: grid; grid-template-columns: 4em 1fr auto;
  align-items: center; gap: 8px;
  padding: 8px 0; border-bottom: 1px solid var(--km-border);
}
.km-starrow[data-active="false"] { opacity: .35; }
.km-starrow dt, .km-starrow dd { margin: 0; }
.km-starrow dt { font-size: 12px; color: var(--km-fg-dim); }

.km-sheet__kyo { margin: 0 0 12px; padding: 0; list-style: none; display: grid; gap: 8px; }
.km-sheet__kyo li {
  display: grid; grid-template-columns: auto auto 1fr; gap: 8px; align-items: baseline;
  font-size: 13px;
}
.km-sheet__kyo span { font-size: 11px; color: var(--km-fg-dim); }
.km-sheet__kyo em { font-style: normal; color: var(--km-fg-dim); }

.km-sheet__note { font-size: 12px; color: var(--km-fg-dim); margin: 0; }

/* ── 設定 / オンボーディング ─────────────────────────── */
.km-settings, .km-onboard {
  position: fixed; inset: 0; z-index: 50;
  padding: calc(var(--km-safe-top) + 16px) 16px calc(var(--km-safe-bottom) + 16px);
  background: var(--km-bg);
  overflow-y: auto;
  display: grid; gap: 16px; align-content: start;
}
.km-settings[hidden], .km-onboard[hidden] { display: none; }

.km-settings__head { display: flex; align-items: center; justify-content: space-between; }
.km-settings__head h2 { margin: 0; font-size: 20px; }
.km-settings__foot { font-size: 12px; color: var(--km-fg-dim); }

.km-field { display: grid; gap: 6px; }
.km-field--row { grid-template-columns: 1fr auto; align-items: center; }
.km-field__label { font-size: 13px; color: var(--km-fg-dim); }
.km-field__hint  { font-size: 12px; color: var(--km-fg-dim); }
.km-field__input {
  min-height: var(--km-tap-min);
  padding: 0 12px;
  border: 1px solid var(--km-border); border-radius: 12px;
  background: var(--km-surface-2); color: var(--km-fg);
  font: inherit;
}
.km-field__switch { width: 44px; height: 28px; }

.km-btn {
  min-height: var(--km-tap-min);
  border: 0; border-radius: 12px;
  background: var(--km-chip-bg-on); color: var(--km-chip-fg-on);
  font: inherit; font-weight: 700; cursor: pointer;
}
.km-btn--ghost { background: var(--km-chip-bg); color: var(--km-chip-fg); }

.km-onboard__title { margin: 24px 0 0; font-size: 28px; }
.km-onboard__lead  { margin: 0; color: var(--km-fg-dim); }

/* ── ピン ─────────────────────────────────────────────── */
.km-pin i { display: block; width: 100%; height: 100%; border-radius: 50%; }
.km-pin--origin i { background: var(--km-pin-origin); box-shadow: 0 0 0 3px var(--km-bg); }
.km-pin--me i     { background: var(--km-pin-me);     box-shadow: 0 0 0 3px var(--km-bg); }

/* 地図が回っているときピンは回さない */
body.is-compass-on .km-pin { transform: rotate(calc(-1 * var(--km-heading))); }

/* ── 状態クラス ───────────────────────────────────────── */
body.is-picking-home .km-map { cursor: crosshair; }
body.is-picking-home .km-bottom::after {
  content: '地図をタップして自宅を決めてください';
  display: block; padding: 10px; text-align: center;
  border-radius: var(--km-radius); background: var(--km-surface); font-size: 13px;
}

@media (prefers-reduced-motion: reduce) {
  .km-map { transition: none; }
}

/* ═══════════════════════════════════════════════════════════
   ARMY / FIELD OPERATION THEME
   地図を主役にした、携帯用の作戦盤UI
   ═══════════════════════════════════════════════════════════ */

body.km {
  color-scheme: dark;
  background:
    radial-gradient(circle at 50% 42%, rgba(132, 164, 72, .13), transparent 34%),
    var(--km-bg);
  letter-spacing: .025em;
}

body.km::before,
body.km::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

body.km::before {
  background-image:
    linear-gradient(var(--km-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--km-grid) 1px, transparent 1px);
  background-size: 32px 32px;
  -webkit-mask-image: radial-gradient(circle at center, #000 0, transparent 78%);
  mask-image: radial-gradient(circle at center, #000 0, transparent 78%);
  opacity: .52;
}

body.km::after {
  background:
    linear-gradient(90deg, rgba(255,255,255,.025), transparent 4%, transparent 96%, rgba(255,255,255,.025)),
    repeating-linear-gradient(0deg, rgba(255,255,255,.012) 0 1px, transparent 1px 4px);
  mix-blend-mode: screen;
  opacity: .55;
}

button,
input { touch-action: manipulation; }

button:focus-visible,
input:focus-visible {
  outline: 2px solid var(--km-lime);
  outline-offset: 3px;
}

/* ── 作戦地図 ─────────────────────────────────────────── */
.km-map {
  background: radial-gradient(circle at 50% 50%, #1d2819 0, #0b100b 72%);
}

.km-map .leaflet-overlay-pane path {
  filter: drop-shadow(0 0 3px rgba(224, 182, 99, .24));
}

.km-map .leaflet-control-container { font-family: var(--km-font); }
.km-map .leaflet-top { top: calc(var(--km-safe-top) + 62px); }
.km.is-time-active .km-map .leaflet-top { top: calc(var(--km-safe-top) + 116px); }
.km-map .leaflet-left { left: 0; }
.km-map .leaflet-bottom { bottom: calc(var(--km-safe-bottom) + 140px); }

.km-map .leaflet-control-zoom {
  margin: 8px !important;
  overflow: hidden;
  border: 1px solid var(--km-border) !important;
  border-radius: var(--km-radius) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,.38), inset 0 0 0 1px rgba(255,255,255,.035);
}

.km-map .leaflet-control-zoom a {
  width: var(--km-tap-min);
  height: var(--km-tap-min);
  line-height: var(--km-tap-min);
  border: 0 !important;
  border-bottom: 1px solid var(--km-border) !important;
  border-radius: 0 !important;
  background: rgba(11, 16, 10, .94);
  color: var(--km-gold-bright);
  font-size: 24px;
  font-weight: 500;
}

.km-map .leaflet-control-zoom a:last-child { border-bottom: 0 !important; }
.km-map .leaflet-control-zoom a:hover,
.km-map .leaflet-control-zoom a:focus {
  background: #25321e;
  color: var(--km-lime);
}

.km-map .leaflet-control-attribution {
  margin: 0 6px 4px 0 !important;
  padding: 2px 5px;
  border: 1px solid rgba(224, 182, 99, .22);
  background: rgba(8, 12, 8, .76);
  color: var(--km-fg-dim);
  font-size: 9px;
}

.km-map .leaflet-control-attribution a { color: var(--km-gold); }

.km-map .leaflet-tooltip,
.km-map .leaflet-popup-content-wrapper,
.km-map .leaflet-popup-tip {
  border: 1px solid var(--km-border);
  border-radius: 2px;
  background: rgba(10, 15, 9, .96);
  color: var(--km-fg);
  box-shadow: 0 8px 24px rgba(0,0,0,.55);
}

/* ── 上部：盤スコープ ───────────────────────────────── */
.km-top {
  top: calc(var(--km-safe-top) + 8px);
  left: 50%;
  right: auto;
  width: min(calc(100% - 16px), 520px);
  min-height: 48px;
  padding: 3px;
  transform: translateX(-50%);
  gap: 6px;
  border: 1px solid var(--km-border);
  border-left: 3px solid var(--km-gold);
  background:
    linear-gradient(110deg, rgba(63, 76, 43, .35), transparent 38%),
    var(--km-surface);
  box-shadow: 0 10px 28px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.035);
  backdrop-filter: blur(16px) saturate(.8);
  -webkit-backdrop-filter: blur(16px) saturate(.8);
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
}

.km-scopes {
  display: grid;
  grid-template-columns: repeat(4, minmax(44px, 1fr));
  flex: 1;
  gap: 3px;
}

.km-chip,
.km-icon-btn,
.km-btn {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(205, 196, 139, .22);
  border-radius: var(--km-radius-chip);
  background: linear-gradient(180deg, rgba(255,255,255,.045), transparent 55%), var(--km-chip-bg);
  color: var(--km-chip-fg);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.25);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  font-weight: 750;
  letter-spacing: .10em;
}

.km-chip {
  height: var(--km-chip-h);
  padding: 0 10px;
}

.km-chip::after,
.km-btn::after {
  content: "";
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 3px;
  height: 1px;
  background: currentColor;
  opacity: .22;
}

.km-chip[aria-pressed="true"] {
  border-color: var(--km-gold-bright);
  background: linear-gradient(180deg, rgba(255,255,255,.22), transparent 50%), var(--km-chip-bg-on);
  color: var(--km-chip-fg-on);
  box-shadow: 0 0 16px rgba(201, 255, 114, .24), inset 0 0 0 1px rgba(13, 22, 9, .45);
}

.km-chip[aria-pressed="true"]::before {
  content: "";
  position: absolute;
  top: 4px;
  right: 4px;
  width: 4px;
  height: 4px;
  background: #fffbc4;
  box-shadow: 0 0 7px var(--km-lime);
}

.km-icon-btn {
  flex: 0 0 var(--km-tap-min);
  width: var(--km-tap-min);
  height: var(--km-tap-min);
  color: var(--km-gold-bright);
  font-size: 19px;
}

.km-top .km-icon-btn::after {
  content: "";
  position: absolute;
  inset: 6px;
  border: 1px dashed rgba(224, 182, 99, .36);
  border-radius: 50%;
}

/* ── 時盤：十二支の一刻（2時間）刻みの時刻操作 ────── */
.km-timebar {
  position: fixed;
  z-index: 20;
  top: calc(var(--km-safe-top) + 66px);
  left: 50%;
  width: min(calc(100% - 16px), 520px);
  min-height: 46px;
  padding: 3px;
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) 58px 64px;
  gap: 3px;
  transform: translateX(-50%);
  border: 1px solid var(--km-border);
  border-left: 3px solid var(--km-lime);
  background: var(--km-surface);
  box-shadow: 0 10px 28px rgba(0,0,0,.42);
  backdrop-filter: blur(16px) saturate(.8);
  -webkit-backdrop-filter: blur(16px) saturate(.8);
}

.km-timebar[hidden] { display: none; }

.km-timebar button,
.km-timebar__label {
  min-height: var(--km-tap-min);
  border: 1px solid rgba(205, 196, 139, .22);
  border-radius: var(--km-radius-chip);
  background: linear-gradient(180deg, rgba(255,255,255,.045), transparent 55%), var(--km-chip-bg);
  color: var(--km-chip-fg);
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .06em;
}

.km-timebar button { cursor: pointer; }

.km-timebar__label {
  display: grid;
  place-items: center;
  color: var(--km-gold-bright);
  font-variant-numeric: tabular-nums;
}

.km-timebar__now[aria-pressed="true"] {
  border-color: var(--km-lime);
  background: var(--km-chip-bg-on);
  color: var(--km-chip-fg-on);
}

/* ── 下部：ブリーフィング ───────────────────────────── */
.km-bottom {
  left: 50%;
  right: auto;
  bottom: calc(var(--km-safe-bottom) + 12px);
  width: min(calc(100% - 16px), 520px);
  transform: translateX(-50%);
  gap: 6px;
}

.km-summary {
  position: relative;
  gap: 3px;
  min-height: 70px;
  padding: 18px 14px 11px;
  overflow: hidden;
  border: 1px solid var(--km-border);
  border-left: 4px solid var(--km-gold);
  border-radius: var(--km-radius);
  background: linear-gradient(105deg, rgba(85, 103, 54, .42), transparent 46%), var(--km-surface);
  box-shadow: 0 12px 30px rgba(0,0,0,.48), inset 0 0 0 1px rgba(255,255,255,.035);
  backdrop-filter: blur(18px) saturate(.8);
  -webkit-backdrop-filter: blur(18px) saturate(.8);
  clip-path: polygon(0 0, calc(100% - 15px) 0, 100% 15px, 100% 100%, 0 100%);
}

.km-summary::before {
  content: "FIELD BRIEF  /  方位情報";
  position: absolute;
  top: 4px;
  left: 14px;
  color: var(--km-gold);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .18em;
}

.km-summary::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 58px;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--km-lime));
  box-shadow: 0 0 12px rgba(200, 243, 106, .5);
}

.km-summary__date {
  color: #c5c6a8;
  font-size: 11px;
  font-weight: 650;
  letter-spacing: .08em;
}

.km-summary__best {
  color: var(--km-gold-bright);
  font-size: clamp(16px, 4.5vw, 19px);
  line-height: 1.35;
  text-shadow: 0 0 14px rgba(224, 182, 99, .18);
}

.km-summary__best[data-state="has-kichi"] {
  color: var(--km-lime);
  text-shadow: 0 0 16px rgba(200, 243, 106, .38);
}

.km-summary__best[data-state="no-kichi"] {
  color: #c1b995;
  text-shadow: none;
}

.km-origin {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  padding: 3px;
  border: 1px solid rgba(224, 182, 99, .28);
  background: rgba(9, 14, 8, .92);
  box-shadow: 0 8px 24px rgba(0,0,0,.35);
}

.km-origin .km-chip { width: 100%; }

/* ── 方位詳細：インテルシート ───────────────────────── */
.km-sheet {
  left: 50%;
  right: auto;
  width: min(100%, 540px);
  max-height: 82vh;
  padding: 8px 18px calc(var(--km-safe-bottom) + 24px);
  transform: translateX(-50%);
  border: 1px solid var(--km-border);
  border-bottom: 0;
  border-top: 3px solid var(--km-gold);
  border-radius: 8px 8px 0 0;
  background: linear-gradient(135deg, rgba(89, 105, 55, .24), transparent 34%), var(--km-surface-2);
  box-shadow: 0 -18px 56px rgba(0,0,0,.62);
  backdrop-filter: blur(22px) saturate(.76);
  -webkit-backdrop-filter: blur(22px) saturate(.76);
}

.km-sheet::before {
  content: "DIRECTION INTEL";
  display: block;
  margin: 0 0 6px;
  color: var(--km-gold);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .2em;
}

.km-sheet__grab {
  position: absolute;
  top: 2px;
  left: 50%;
  margin: 0;
  transform: translateX(-50%);
}

.km-sheet__grab::before {
  height: 3px;
  background: var(--km-gold);
  opacity: .7;
}

.km-sheet__title {
  padding-bottom: 8px;
  border-bottom: 1px solid var(--km-border);
  color: var(--km-fg);
  font-size: 24px;
  line-height: 1.25;
  letter-spacing: .08em;
}

.km-sheet__verdict {
  display: inline-flex;
  min-height: 32px;
  margin: 9px 0 14px;
  padding: 5px 10px;
  align-items: center;
  border: 1px solid currentColor;
  background: rgba(0,0,0,.26);
  font-size: 14px;
  letter-spacing: .14em;
}

.km-sheet__verdict[data-verdict="daikichi"] {
  color: var(--km-daikichi-stroke);
  box-shadow: 0 0 20px rgba(231, 255, 147, .18);
}

.km-sheet__verdict[data-verdict="kichi"] { color: var(--km-kichi-stroke); }
.km-sheet__verdict[data-verdict="heion"] { color: var(--km-heion-stroke); }
.km-sheet__verdict[data-verdict="kyo"] { color: #c29b6f; }
.km-sheet__verdict[data-verdict="daikyo"] { color: #a76d57; }
.km-sheet__stars { gap: 4px; }

.km-starrow {
  min-height: 48px;
  padding: 8px 10px;
  border: 1px solid rgba(224, 182, 99, .16);
  border-left: 2px solid var(--km-olive);
  background: rgba(3, 7, 3, .24);
}

.km-starrow[data-active="true"] {
  border-left-color: var(--km-lime);
  background: linear-gradient(90deg, rgba(131, 162, 72, .24), transparent 75%);
  box-shadow: inset 12px 0 18px rgba(200, 243, 106, .035);
}

.km-starrow[data-active="false"] {
  opacity: .38;
  filter: saturate(.55);
}

.km-starrow dt {
  color: var(--km-gold);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .12em;
}

.km-sheet__kyo li {
  min-height: 44px;
  padding: 8px 10px;
  align-items: center;
  border: 1px solid rgba(157, 95, 70, .32);
  border-left: 3px solid var(--km-danger);
  background: rgba(48, 29, 20, .22);
}

.km-sheet__kyo li[data-kyo="none"] {
  border-color: rgba(200, 243, 106, .22);
  border-left-color: var(--km-olive);
  background: rgba(61, 79, 39, .18);
  color: #d9dfb7;
}

.km-sheet__note {
  padding: 10px;
  border-top: 1px dashed var(--km-border);
  color: var(--km-fg-dim);
  line-height: 1.65;
}

/* ── 設定 / 初回登録 ─────────────────────────────────── */
.km-settings,
.km-onboard {
  padding:
    calc(var(--km-safe-top) + 18px)
    max(18px, calc((100vw - 480px) / 2))
    calc(var(--km-safe-bottom) + 20px);
  background:
    linear-gradient(var(--km-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--km-grid) 1px, transparent 1px),
    radial-gradient(circle at 50% 15%, rgba(114, 137, 67, .22), transparent 32%),
    var(--km-bg);
  background-size: 28px 28px, 28px 28px, auto, auto;
}

.km-settings { grid-template-columns: minmax(0, 1fr); }

.km-settings__head {
  min-height: 58px;
  padding: 6px 8px 6px 14px;
  border: 1px solid var(--km-border);
  border-left: 4px solid var(--km-gold);
  background: var(--km-surface);
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%);
}

.km-settings__head h2 {
  color: var(--km-gold-bright);
  font-size: 22px;
  letter-spacing: .14em;
}

.km-settings__head h2::after {
  content: " / SYSTEM CONFIG";
  color: var(--km-fg-dim);
  font-size: 9px;
  letter-spacing: .12em;
}

.km-field {
  padding: 12px;
  border: 1px solid rgba(224, 182, 99, .2);
  background: rgba(18, 25, 16, .66);
}

.km-field--row { min-height: 62px; }

.km-field__label {
  color: var(--km-gold);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .12em;
}

.km-field__hint {
  color: var(--km-fg-dim);
  line-height: 1.6;
}

.km-field__input {
  min-height: 48px;
  border: 1px solid rgba(224, 182, 99, .42);
  border-radius: 2px;
  background: rgba(5, 9, 5, .78);
  color: var(--km-fg);
  box-shadow: inset 0 0 14px rgba(0,0,0,.35);
  font-weight: 650;
}

.km-field__input:focus { border-color: var(--km-lime); }
.km-field__input::placeholder { color: #747861; }

.km-field__switch {
  position: relative;
  width: 50px;
  min-width: 50px;
  height: 30px;
  margin: 0;
  appearance: none;
  border: 1px solid var(--km-border);
  border-radius: 2px;
  background: #0a0e09;
  cursor: pointer;
}

.km-field__switch::before {
  content: "";
  position: absolute;
  top: 4px;
  left: 4px;
  width: 20px;
  height: 20px;
  background: #6c705d;
  transition: transform .18s ease, background .18s ease;
}

.km-field__switch:checked {
  border-color: var(--km-lime);
  background: rgba(106, 135, 60, .4);
}

.km-field__switch:checked::before {
  transform: translateX(20px);
  background: var(--km-lime);
  box-shadow: 0 0 12px rgba(200, 243, 106, .5);
}

.km-btn {
  min-height: 50px;
  border-color: var(--km-gold);
  background: linear-gradient(180deg, rgba(255,255,255,.12), transparent 58%), #c69a50;
  color: #15160d;
  box-shadow: 0 0 18px rgba(224, 182, 99, .14), inset 0 0 0 1px rgba(255, 233, 167, .23);
}

.km-btn--ghost {
  border-color: rgba(200, 243, 106, .42);
  background: rgba(60, 76, 39, .42);
  color: #e1e7be;
}

.km-settings__foot {
  margin: 0;
  padding: 12px;
  border-left: 2px solid var(--km-olive);
  background: rgba(5,8,5,.42);
  color: var(--km-fg-dim);
  line-height: 1.7;
}

.km-onboard {
  align-content: center;
  justify-items: stretch;
}

.km-onboard::before {
  content: "FIELD ORIENTATION  /  01";
  color: var(--km-gold);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .2em;
}

.km-onboard__title {
  position: relative;
  margin: 0;
  padding: 24px 18px 18px;
  border: 1px solid var(--km-border);
  border-top: 3px solid var(--km-gold);
  background: radial-gradient(circle at 85% 30%, rgba(200,243,106,.12), transparent 22%), var(--km-surface);
  color: var(--km-gold-bright);
  font-size: clamp(30px, 10vw, 44px);
  line-height: 1.1;
  letter-spacing: .12em;
  clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 0 100%);
}

.km-onboard__title::after {
  content: "✥";
  float: right;
  color: var(--km-lime);
  text-shadow: 0 0 18px rgba(200, 243, 106, .5);
}

.km-onboard__lead {
  margin: -16px 1px 8px;
  padding: 16px 18px 14px;
  border: 1px solid rgba(224, 182, 99, .22);
  border-top: 0;
  background: rgba(10, 15, 9, .82);
  color: #c9c8ab;
}

/* ── ピンと状態表示 ───────────────────────────────────── */
.km-pin { filter: drop-shadow(0 3px 8px rgba(0,0,0,.7)); }

.km-pin i { border: 2px solid #f7e9ae; }

.km-pin--origin i {
  box-shadow:
    0 0 0 3px var(--km-bg),
    0 0 0 5px rgba(255, 208, 108, .45),
    0 0 18px rgba(255, 208, 108, .7);
}

.km-pin--me i {
  box-shadow:
    0 0 0 3px var(--km-bg),
    0 0 0 5px rgba(201, 255, 114, .42),
    0 0 20px rgba(201, 255, 114, .7);
}

body.is-picking-home .km-bottom::after {
  min-height: 44px;
  padding: 11px 12px;
  border: 1px solid var(--km-gold);
  border-radius: 2px;
  background: #171e12;
  color: var(--km-gold-bright);
  box-shadow: 0 0 24px rgba(224, 182, 99, .18);
  font-weight: 750;
  letter-spacing: .05em;
}

/* ── 小さい端末 / 横長画面 ───────────────────────────── */
@media (max-width: 390px) {
  .km-top,
  .km-bottom,
  .km-timebar { width: calc(100% - 12px); }

  .km-top { top: calc(var(--km-safe-top) + 6px); }
  .km-chip { padding-inline: 8px; }

  .km-summary {
    min-height: 66px;
    padding-inline: 12px;
  }

  .km-map .leaflet-bottom {
    bottom: calc(var(--km-safe-bottom) + 136px);
  }

  .km-sheet { padding-inline: 14px; }
}

@media (max-height: 560px) and (orientation: landscape) {
  .km-bottom {
    left: auto;
    right: 8px;
    width: min(42vw, 420px);
    transform: none;
  }

  .km-map .leaflet-bottom { bottom: 4px; }

  .km-timebar {
    left: 8px;
    width: min(54vw, 520px);
    transform: none;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .km-chip[aria-pressed="true"] {
    animation: km-signal-lock .32s ease-out both;
  }

  .km-pin--me i {
    animation: km-pulse 2.2s ease-in-out infinite;
  }
}

@keyframes km-signal-lock {
  from { filter: brightness(1.8); transform: scale(.96); }
  to   { filter: brightness(1); transform: scale(1); }
}

@keyframes km-pulse {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.35); }
}