:root {
  --dn-bg: #f5f6f8; --dn-panel: #ffffff; --dn-text: #1d2330; --dn-muted: #5d6675; --dn-border: #d9dde4;
  --dn-accent: #d9480f; --dn-accent-soft: #fff0e6; --dn-btn: #eef1f5; --dn-btn-hover: #e1e6ed; --dn-map-bg: #cfd8e3;
}
@media (prefers-color-scheme: dark) {
  :root {
    --dn-bg: #15181e; --dn-panel: #1d2129; --dn-text: #e4e7ec; --dn-muted: #9aa3b2; --dn-border: #333a46;
    --dn-accent: #ff8a4c; --dn-accent-soft: #3a2518; --dn-btn: #2a303b; --dn-btn-hover: #353c49; --dn-map-bg: #2b3340;
  }
}
/* #app はサイト共通ヘッダーの下にある全面パネル。バー分の余白を自前で
   padding-top: var(--navbar-h) で確保する（CLAUDE.md参照）。html/body の
   高さ・overflow・box-sizing はサイト共通CSSが持つのでここでは触らない。
   フォントもこのアプリ内だけ独自にする（共通ヘッダーは Zen Maru Gothic のまま）。 */
#app { display: flex; flex: 1; min-height: 0; overflow: hidden; padding-top: var(--navbar-h, 72px);
  background: var(--dn-bg); color: var(--dn-text);
  font-family: "Segoe UI", "Hiragino Kaku Gothic ProN", "Yu Gothic UI", Meiryo, sans-serif; font-size: 13px; }
#panel { width: 370px; flex: none; overflow-y: auto; background: var(--dn-panel); border-right: 1px solid var(--dn-border); padding: 12px 14px 24px; }
#mapwrap { position: relative; flex: 1; min-width: 0; }
#map { position: absolute; inset: 0; background: var(--dn-map-bg); overflow: hidden; cursor: default; user-select: none; -webkit-user-select: none; }
/* 地図: stage（回転前の論理座標の箱）に canvas 3枚（背景・夜・都市の光）と、ラベル・印の層を重ねる */
#stage { position: absolute; left: 0; top: 0; transform-origin: 0 0; overflow: hidden; }
#stage canvas { position: absolute; left: 0; top: 0; }
#labels, #marks { position: absolute; left: 0; top: 0; width: 0; height: 0; }
.lbl, .mark { position: absolute; left: 0; top: 0; width: 0; height: 0; }
.mark > div { transform: translate(-50%, -50%); }
#credit { position: absolute; right: 0; bottom: 0; font-size: 11px; padding: 1px 6px; background: rgba(255,255,255,.75); color: #333; border-top-left-radius: 4px; }
#credit a { color: #0b6bcb; text-decoration: none; }
section { border-top: 1px solid var(--dn-border); padding: 10px 0 6px; }
h2 { font-size: 13px; margin: 0 0 8px; display: flex; justify-content: space-between; align-items: baseline; }
h2 small { font-weight: normal; color: var(--dn-muted); font-size: 11px; }
.row { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-bottom: 6px; }
button, select, input[type=datetime-local], input[type=text] {
  font: inherit; color: var(--dn-text); background: var(--dn-btn); border: 1px solid var(--dn-border); border-radius: 6px; padding: 4px 8px; }
button { cursor: pointer; }
button:hover { background: var(--dn-btn-hover); }
button.on { background: var(--dn-accent-soft); border-color: var(--dn-accent); color: var(--dn-accent); font-weight: 600; }
button.sm { padding: 3px 6px; font-size: 12px; min-width: 42px; }
input[type=datetime-local] { flex: 1; min-width: 0; }
input[type=text] { width: 100px; }
input[type=range] { width: 100%; accent-color: var(--dn-accent); }
.slabel { display: flex; justify-content: space-between; color: var(--dn-muted); font-size: 11.5px; }
table.kv { width: 100%; border-collapse: collapse; }
table.kv th { text-align: left; font-weight: normal; color: var(--dn-muted); padding: 2px 8px 2px 0; white-space: nowrap; vertical-align: top; width: 1%; }
table.kv td { padding: 2px 0; font-variant-numeric: tabular-nums; }
.state { display: inline-block; padding: 1px 8px; border-radius: 10px; font-weight: 600; font-size: 12px; }
.legend div { display: flex; align-items: center; gap: 8px; margin: 3px 0; }
.sw { width: 26px; height: 12px; border-radius: 2px; flex: none; }
.swl { width: 26px; height: 0; border-top: 3px solid; flex: none; }
.note { color: var(--dn-muted); font-size: 11.5px; line-height: 1.55; }
.note p { margin: 4px 0; }
label.ck { display: flex; align-items: center; gap: 6px; margin: 3px 0; cursor: pointer; }
.colors { display: grid; grid-template-columns: auto 1fr auto 1fr; gap: 6px 8px; align-items: center; margin: 6px 0; }
.colors label { color: var(--dn-muted); }
input[type=color] { width: 44px; height: 24px; padding: 0 2px; border: 1px solid var(--dn-border); border-radius: 4px; background: var(--dn-btn); cursor: pointer; }
.pt-icon { width: 7px; height: 7px; border-radius: 50%; background: radial-gradient(circle, #ffffff 0%, #d3f9d8 35%, #51cf66 100%);
  box-shadow: 0 0 2px 1px #69db7c, 0 0 5px 2px rgba(55,178,77,.95), 0 0 10px 4px rgba(55,178,77,.55); }
.sun-icon { width: 36px; height: 36px; border-radius: 50%;
  background: radial-gradient(circle, #fff4d6 0%, #ffc078 18%, rgba(253,126,20,.75) 36%, rgba(253,126,20,.28) 58%, rgba(253,126,20,0) 72%); }
/* 夜を中央にしたとき、太陽は地図の左右の端に来る。端より外（地図の外の帯）にはみ出す半分を切る */
.mark.edge-r > div { clip-path: inset(0 50% 0 0); }
.mark.edge-l > div { clip-path: inset(0 0 0 50%); }
.pill { font-size: 10.5px; font-weight: 600; white-space: nowrap; display: inline-block; border-radius: 3px; padding: 0 4px;
  background: rgba(255,255,255,.88); box-shadow: 0 0 0 1px rgba(0,0,0,.12); }
.pill.iso { color: #9a3b00; transform: translate(-50%, -50%); }
.pill.spd { color: #7a2e00; transform: translate(6px, -50%); }
.pill.spd.slow { color: #1864ab; }
.spd-dot { position: absolute; left: -3px; top: -3px; width: 6px; height: 6px; border-radius: 50%; background: #d9480f; box-shadow: 0 0 0 1.5px #fff; }
.plabel { font-size: 10.5px; font-weight: 600; white-space: nowrap; display: inline-block; transform: translate(5px, -50%);
  text-shadow: 0 0 2px var(--dn-halo, #fff), 0 0 2px var(--dn-halo, #fff), 0 0 3px var(--dn-halo, #fff); }
.plabel.day { color: #b35c00; background: rgba(255,255,255,.85); border-radius: 3px; padding: 0 3px; text-shadow: none; } .plabel.ana { color: #a61e4d; } .plabel.ecl { color: #5f3dc4; } .plabel.ref { color: #495057; font-weight: normal; transform: translate(5px, 1px); }
/* ---------- スマートフォン向けレイアウト（body.mobile） ---------- */
#menuBtn, #bottombar, #backdrop, #compass { display: none; }
body.mobile #app { flex-direction: column; }
body.mobile #panel { position: fixed; left: 0; right: 0; bottom: 0; top: 8vh; width: auto; z-index: 3000; border: none;
  border-radius: 14px 14px 0 0; box-shadow: 0 -4px 24px rgba(0,0,0,.3); padding: 12px 16px 32px; display: none; }
body.mobile.menu-open #panel { display: block; }
body.mobile.menu-open #backdrop { display: block; position: fixed; inset: 0; z-index: 2999; background: rgba(0,0,0,.35); }
body.mobile #toggle { display: inline-block; }
body.mobile #menuBtn { display: flex; position: absolute; left: 10px; top: 10px; z-index: 1000; width: 40px; height: 40px;
  align-items: center; justify-content: center; border-radius: 8px; background: var(--dn-panel); border: 1px solid var(--dn-border);
  box-shadow: 0 1px 5px rgba(0,0,0,.25); padding: 0; }
#compass { position: absolute; right: 10px; top: 10px; z-index: 1000; width: 40px; height: 40px; border-radius: 50%;
  background: var(--dn-panel); border: 1px solid var(--dn-border); box-shadow: 0 1px 5px rgba(0,0,0,.25); align-items: center; justify-content: center; }
#bottombar { flex: none; background: var(--dn-panel); border-top: 1px solid var(--dn-border); }
#bbInner { padding: 6px 14px 10px; box-sizing: border-box; }
/* 地図を回転（北が右）しているとき: 下部バーの位置と操作はそのままで、文字だけを90°回す（端末を左に倒すと読める向き）。
   日時と節気は右端の縦の列に置き、見出し（日付・時刻）はダイアルの中に描く */
body.rot90 #bbInner { display: grid; grid-template-columns: 1fr auto; column-gap: 8px; }
body.rot90 #bottombar .bhead { grid-column: 2; grid-row: 1 / span 2; writing-mode: vertical-rl; text-orientation: sideways;
  margin: 4px 0 0; min-height: 0; flex-direction: column; justify-content: flex-start; gap: 3px; }
body.rot90 .dialrow { grid-column: 1; }
body.rot90 .dialrow .cap { display: none; }
body.rot90 .dial { height: 64px; }
body.rot90 #menuBtn svg { transform: rotate(90deg); }
body.mobile #bottombar { display: block; }
#bottombar .bhead { min-height: 18px; display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 12px; margin-bottom: 2px; }
#bottombar .bhead b { margin-right: auto; }
/* body.rot90 では端末を横に倒して見る前提（北が上になる向き）なので、画面上の
   上下・左右は、実際に利用者が見る向きの左右・上下と入れ替わる。利用者から見た
   左右を広げたいので、画面（CSS）上は上下方向のパディングを広げてある */
#bNow { padding: 10px 6px; min-width: 0; }
#bottombar .bhead b { font-size: 13px; font-variant-numeric: tabular-nums; }
.dialrow { display: flex; align-items: center; gap: 6px; margin-top: 4px; }
.dialrow .cap { flex: none; width: 26px; color: var(--dn-muted); font-size: 11px; writing-mode: vertical-rl; text-align: center; letter-spacing: 2px; }
.dial { flex: 1; min-width: 0; height: 50px; display: block; touch-action: none; cursor: grab; border-radius: 8px;
  background: var(--dn-btn); border: 1px solid var(--dn-border); user-select: none; -webkit-user-select: none; }
.dial:active { cursor: grabbing; }