/* 首都高周辺夜景ナビ（試作）。初めは明るい配色。data-theme="dark" で暗い配色 */
:root{--hwy:#0a7a46;--hwy2:#0d5c37;--local:#1c4f9f;--y:#f3b703;--ink:#15181c;--mute:#5d6570;--rule:#dde1e6;--bg:#f4f5f7;--card:#fff;--red:#c62828;
--m-bg:#fbfbf8;--m-road:#9ccdb0;--m-roadb:#a9c3e6;--m-ink:#1c2228;--m-mute:#6b747c;--m-halo:#ffffff;--d-bg:#f4f5f7;--d-panel:#ffffff;--d-ink:#15181c;--d-line:#e3e6ea}
:root[data-theme="dark"]{--bg:#12171b;--card:#1b2227;--ink:#e9edf0;--mute:#9aa4ad;--rule:#2c363e;
--m-bg:#10161b;--m-road:#2f6f4c;--m-roadb:#2a4f7f;--m-ink:#e6ebef;--m-mute:#9aa4ad;--m-halo:#10161b;--d-bg:#0b1013;--d-panel:#1b242b;--d-ink:#eef2f4;--d-line:#2c3842}
*{box-sizing:border-box}
html,body{overflow-x:clip;overscroll-behavior-x:none;margin:0;background:var(--bg);color:var(--ink);font:16px/1.6 "Hiragino Sans","BIZ UDPGothic",system-ui,sans-serif;-webkit-text-size-adjust:100%}
a{color:var(--local)}
:root[data-theme="dark"] a{color:#8fc1ff}
button{font:inherit;cursor:pointer;color:inherit}
.wrap{max-width:760px;margin:0 auto;padding:12px 16px 80px}
header.top{background:var(--hwy);color:#fff;padding:10px 16px;position:relative}
header.top h1{margin:0;font-size:19px;line-height:1.3}
header.top .sub{font-size:13px;opacity:.95}
header.top a{color:#fff}
header.top .themebtn{position:absolute;right:10px;top:8px;border:1px solid rgba(255,255,255,.7);background:transparent;color:#fff;border-radius:8px;padding:4px 8px;font-size:13px}
.proto{display:inline-block;background:var(--y);color:#111;font-size:12px;font-weight:700;border-radius:4px;padding:0 6px;margin-left:6px;vertical-align:2px}
h2{font-size:18px;margin:22px 0 8px;padding-left:10px;border-left:6px solid var(--hwy)}
.card{background:var(--card);border:1px solid var(--rule);border-radius:10px;padding:12px 14px;margin:10px 0}
.warnbox{border:3px solid var(--y);background:#fffbe8;color:#15181c}
:root[data-theme="dark"] .warnbox{background:#2a2614;color:#f1ead0}
.warnbox h2{margin-top:0;border-left-color:var(--red)}
.bigbtn{display:block;width:100%;min-height:56px;border:0;border-radius:10px;background:var(--hwy);color:#fff;font-size:18px;font-weight:700;padding:12px;margin:8px 0;text-align:center;text-decoration:none}
.bigbtn.sub{background:#fff;color:var(--hwy);border:2px solid var(--hwy)}
.bigbtn.yellow{background:var(--y);color:#111}
.bigbtn.blue{background:var(--local)}
.bigbtn[disabled]{opacity:.45}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.seg{display:flex;flex-wrap:wrap;gap:8px}
.seg button{flex:1 1 30%;min-height:48px;border:2px solid var(--hwy);background:var(--card);color:var(--hwy);border-radius:10px;font-size:17px;font-weight:700}
.seg button.on{background:var(--hwy);color:#fff}
.preset{display:block;width:100%;text-align:left;border:2px solid var(--rule);background:var(--card);border-radius:10px;padding:10px 12px;margin:8px 0;min-height:56px}
.preset.on{border-color:var(--hwy);box-shadow:0 0 0 2px var(--hwy) inset}
.preset b{font-size:16px}
.preset .meta{display:block;font-size:13px;color:var(--mute)}
.preset .meta b{font-size:13px;color:var(--ink)}
.preset .path{display:block;margin:2px 0;color:var(--ink)}
.preset .num{display:block}
.preset .why{display:block;margin-top:4px;font-size:12px;color:#8a4b00}
.patog{display:flex;align-items:center;gap:8px;margin:6px 2px 0;min-height:40px;font-size:14px;font-weight:700}.patog input{width:22px;height:22px}
.preset .ng{color:var(--red);font-weight:700}
.preset .id{display:inline-block;background:var(--hwy);color:#fff;border-radius:4px;padding:0 6px;margin-right:6px;font-size:13px}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0}
.chip{border:2px solid var(--hwy);background:var(--card);color:var(--hwy);border-radius:22px;padding:8px 12px;font-weight:700;min-height:44px}
.stops{list-style:none;padding:0;margin:6px 0}
.stops li{display:flex;align-items:center;gap:8px;background:var(--card);border:1px solid var(--rule);border-radius:8px;padding:6px 8px;margin:6px 0}
.stops .n{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;background:var(--y);color:#111;font-weight:700}
.stops .t{flex:1}
.stops button{min-width:44px;min-height:40px;border:1px solid var(--rule);background:var(--card);border-radius:8px}
.small{font-size:13px;color:var(--mute)}
.layers{display:flex;gap:6px;margin:8px 0}
.layers button{flex:1;min-height:44px;border:2px solid var(--rule);background:var(--card);border-radius:10px;font-weight:700}
.layers button.on{border-color:var(--ink)}
.layers i{display:inline-block;width:16px;height:6px;border-radius:3px;margin-right:5px;vertical-align:middle}
.mapbox{position:relative;background:var(--m-bg);border:1px solid var(--rule);border-radius:10px;overflow:hidden;height:62vh;min-height:380px;touch-action:none;user-select:none;-webkit-user-select:none}
.mapbox svg{width:100%;height:100%;display:block}
.mapctl{position:absolute;right:6px;top:6px;display:flex;flex-direction:row;flex-wrap:wrap;justify-content:flex-end;gap:5px;max-width:75%;z-index:5}
.mapctl button{width:42px;height:42px;border-radius:10px;border:1px solid var(--rule);background:var(--card);font-size:20px;font-weight:700;color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.15)}
.mapctl button.wide{width:auto;height:42px;padding:0 9px;font-size:13px}
.legend{font-size:12px;color:var(--mute);margin:4px 0}
.legend i{display:inline-block;width:16px;height:6px;border-radius:3px;vertical-align:middle;margin:0 3px 0 8px}
.legend b{display:inline-block;width:10px;height:10px;border-radius:50%;vertical-align:middle;margin:0 3px 0 8px}
/* 路線図の色（テーマで変わるもの） */
.nv-road{fill:none;stroke:var(--m-road);stroke-width:4;stroke-linejoin:round;stroke-linecap:round}
.nv-road.nv-ring{stroke-width:6}
.nv-hit{fill:none;stroke:transparent;stroke-width:26;cursor:pointer;stroke-linecap:round}
.nv-road.nv-b{stroke:var(--m-roadb)}
.nv-shield{fill:#0a7a46;stroke:#fff;stroke-width:1}
.nv-shield.nv-b{fill:#1c4f9f}
.nv-shieldt{fill:#fff;font-size:12px;font-weight:700}
.nv-halo{fill:none;stroke:var(--m-halo);stroke-width:8.5;stroke-linejoin:round;stroke-linecap:round;opacity:.9}
.nv-lbl{fill:var(--m-ink)}
.nv-lbl2{fill:var(--m-mute)}
.nv-bold{font-weight:700}
.nv-pa{fill:#1c4f9f;font-weight:700}
:root[data-theme="dark"] .nv-bridge,:root[data-theme="dark"] .nv-pa{fill:#8fc1ff}
.nv-jct{fill:var(--m-bg);stroke:var(--m-ink)}
.nv-ex300{fill:#0a9f55;stroke:#fff}
.nv-exhi{fill:#7d8790;stroke:#fff}
.nv-exno{fill:var(--m-bg);stroke:#b8c0c7}
.nv-l300{fill:#078046;font-weight:800}
.nv-lhi{fill:#5d6570;font-weight:700}
:root[data-theme="dark"] .nv-l300{fill:#3ddc84}
:root[data-theme="dark"] .nv-lhi{fill:#aab3bb}
.nv-est{fill:var(--m-ink);font-weight:800}
.summary dl{display:grid;grid-template-columns:auto 1fr;gap:2px 12px;margin:0}
.summary dt{color:var(--mute)}
.summary dd{margin:0;font-weight:700}
.reason{background:#fdecea;border:2px solid var(--red);border-radius:10px;padding:10px 12px;color:#7a1c1c;font-weight:700}
.warn{background:#fff6dc;color:#3a3216;border-left:5px solid var(--y);padding:6px 10px;margin:6px 0;font-size:14px}
ol.steps{padding-left:22px;margin:6px 0}
ol.steps li{margin:3px 0}
ol.steps .d{color:var(--mute);font-size:13px;margin-left:6px}
details summary{cursor:pointer;font-weight:700;min-height:40px;line-height:40px}
select{font:inherit;font-size:16px;width:100%;min-height:48px;border-radius:8px;border:1px solid var(--rule);padding:6px;background:var(--card);color:var(--ink)}
footer.src{font-size:12px;color:var(--mute);margin-top:30px}
.modal{position:fixed;inset:0;background:rgba(0,0,0,.55);display:flex;align-items:center;justify-content:center;z-index:100;padding:16px}
.modal .box{background:var(--card);border-radius:14px;max-width:460px;width:100%;padding:18px 16px;max-height:calc(100vh - 32px - env(safe-area-inset-bottom));max-height:calc(100dvh - 32px - env(safe-area-inset-bottom));overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
.modal .box>.bigbtn{position:sticky;bottom:0;margin-bottom:0;box-shadow:0 -8px 8px -4px var(--card)}
.modal h2{margin-top:0;border-left-color:var(--red)}
.modal p{margin:8px 0}
/* 走行中の画面（明るい配色が標準） */
#drive{position:fixed;inset:0;background:var(--d-bg);color:var(--d-ink);display:none;flex-direction:column;z-index:50}
#drive.on{display:flex}
.banner{display:flex;align-items:center;gap:10px;background:var(--hwy);color:#fff;padding:8px 12px;min-height:104px;position:relative}
.banner .bicon{flex:0 0 64px;width:64px;height:64px}
.banner .bmain{flex:1;min-width:0}
.banner .bdist{font-size:34px;font-weight:800;line-height:1.05;letter-spacing:.5px}
.banner .bshort{font-size:23px;font-weight:800;line-height:1.3;display:flex;flex-wrap:wrap;align-items:center;gap:2px 8px;margin-top:2px}
.banner .bshort .w1{background:rgba(255,255,255,.18);border-radius:6px;padding:0 6px}
.banner .bsub{font-size:14px;opacity:.95}
.banner.exit{background:#0b5fa8}
.banner.off{background:var(--red)}
.banner.surface{background:var(--local)}
.banner.entrance{background:#0b5fa8}
.rbadge{display:inline-flex;align-items:center;justify-content:center;min-width:34px;height:28px;padding:0 6px;border-radius:7px;background:#fff;color:#0a7a46;border:2px solid #0a7a46;font-size:17px;font-weight:900;line-height:1;box-shadow:0 0 0 2px #fff}
.rbadge.b{color:#1c4f9f;border-color:#1c4f9f}
.badges{position:absolute;right:10px;top:6px;display:flex;gap:6px}
.badge{background:var(--y);color:#111;font-weight:800;border-radius:6px;padding:2px 8px;font-size:15px}
.lanesrow{display:flex;gap:4px;justify-content:center;background:var(--hwy2);padding:4px}
.lane{display:inline-flex;align-items:center;justify-content:center;width:38px;height:34px;border-radius:5px;background:rgba(255,255,255,.18);color:rgba(255,255,255,.55);font-size:22px;font-weight:900}
.lane.ok{background:#fff;color:#0a7a46}
.prog{height:7px;background:var(--d-line)}.prog i{display:block;height:100%;background:var(--y);width:0}
.then{background:var(--d-panel);color:var(--d-ink);padding:4px 12px;font-size:15px;border-bottom:1px solid var(--d-line)}
.alerts{background:var(--d-panel);padding:3px 12px;min-height:28px;font-size:15px;border-bottom:1px solid var(--d-line)}
.alerts div{padding:2px 0}
.alerts .cam{color:#c62828;font-weight:700}.alerts .pa{color:#1c4f9f;font-weight:700}.alerts .weave,.alerts .rexit{color:#a05a00;font-weight:700}
.alerts .paclosed,.alerts .keep{color:var(--mute);font-size:13px}
:root[data-theme="dark"] .alerts .cam{color:#ffb4a8}:root[data-theme="dark"] .alerts .pa{color:#9cd2ff}:root[data-theme="dark"] .alerts .weave,:root[data-theme="dark"] .alerts .rexit{color:var(--y)}
.dmap{position:relative;flex:1;min-height:0}
.dmap .mapbox{height:100%;min-height:0;border-radius:0;border:0}
.recenter{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);z-index:600;display:none;min-height:56px;padding:0 22px;border-radius:28px;border:0;background:#1565e8;color:#fff;font-size:18px;font-weight:800;box-shadow:0 2px 8px rgba(0,0,0,.3)}
.recenter.on{display:block}
.dfoot{display:flex;justify-content:space-between;gap:8px;background:var(--d-panel);border-top:1px solid var(--d-line);padding:4px 12px;font-size:15px;font-weight:700}
.dbar{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;padding:8px;background:var(--d-panel);border-top:1px solid var(--d-line)}
.dbar button{min-height:56px;border-radius:10px;border:1px solid var(--d-line);background:var(--card);color:var(--d-ink);font-size:14px;font-weight:700}
.dbar button.on{background:var(--y);color:#111;border-color:var(--y)}
.dbar button.end{background:#b3261e;color:#fff;border-color:#b3261e}
#realmap{position:absolute;inset:0;display:none;background:#ddd}
#realmap.on{display:block}
@media (min-width:700px){.mapbox{height:560px}}

.preset-wrap{margin:8px 0}.preset-wrap .preset{margin:0}
.dirbtn{display:flex;gap:6px;margin:4px 0 0}.dirbtn button{flex:1;min-height:40px;border:2px solid var(--line,#c9d0d8);background:#fff;border-radius:8px;font:inherit;font-size:14px;font-weight:700;color:inherit}
.dirbtn button.on{border-color:#0a7a46;background:#e6f5ec}.dirbtn button:disabled{opacity:.45}
.stops .dirt{min-height:36px}

.preset .rep{display:block;margin-top:4px;font-size:12px;color:#8a4b00}
.intro ul,.notes{margin:4px 0;padding-left:1.3em}
.notice{margin-bottom:12px}