:root{--bg:#071112;--panel:#0d1b1c;--line:#294143;--text:#eef6f3;--muted:#91aaa8;--cyan:#51d6c7;--yellow:#e5ca44;--orange:#ef9444;--red:#eb5a4e;--deep:#a61f43}
*{box-sizing:border-box}html,body{height:100%}body{margin:0;background:var(--bg);color:var(--text);font:15px Inter,"Noto Sans JP",system-ui,sans-serif;overflow:hidden}button,select{font:inherit}
header{position:fixed;z-index:650;left:16px;right:16px;top:max(14px,env(safe-area-inset-top));height:62px;display:flex;align-items:center;justify-content:space-between;padding:0 22px;border:1px solid var(--line);border-radius:9px;background:#071112e8;backdrop-filter:blur(14px);box-shadow:0 12px 30px #0006}.brand{display:flex;gap:11px;align-items:center}.mark{font-size:38px;line-height:1;color:var(--cyan);text-shadow:0 0 14px #51d6c799}h1{font-size:17px;margin:0;letter-spacing:.08em}.brand small{font-size:10px;color:var(--cyan);letter-spacing:.2em}.live{display:flex;gap:9px;align-items:center;color:var(--muted);font-size:12px}.live>i{width:8px;height:8px;background:var(--cyan);border-radius:50%;box-shadow:0 0 0 5px #51d6c722}.live>i.stale{background:var(--orange);box-shadow:0 0 0 5px #f38a4422}.live b{color:var(--text);font-size:14px}.live button{width:34px;height:34px;border:1px solid var(--line);border-radius:50%;background:#102224;color:var(--cyan);font-size:20px;cursor:pointer}
main{position:fixed;inset:0}.mapbox,#map{position:absolute;inset:0;background:#0d1b1c}.leaflet-tile-pane .leaflet-layer:first-child{filter:saturate(.55) brightness(.6) contrast(1.16) hue-rotate(120deg)}.leaflet-control-zoom a{background:#102224;color:#fff;border-color:#385052}.leaflet-control-attribution{background:#091617cc!important;color:#809695}.leaflet-control-attribution a{color:#77b8b3}
.locate{position:fixed;z-index:550;right:16px;top:92px;width:48px;height:48px;border:1px solid #365052;border-radius:6px;background:#0d1b1cef;color:#fff;font-size:25px;cursor:pointer}.status{position:fixed;z-index:500;left:18px;top:92px;max-width:min(460px,calc(100vw - 170px));display:grid;gap:3px;padding:11px 14px;border:1px solid var(--line);border-radius:5px;background:#071112e9;backdrop-filter:blur(10px)}.status b{font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.status span{font-size:12px;color:var(--cyan)}
.layers{position:fixed;z-index:560;right:76px;top:92px}.layers summary{list-style:none;min-height:48px;display:flex;align-items:center;padding:0 14px;border:1px solid var(--line);border-radius:6px;background:#0d1b1cef;color:#fff;font-size:12px;cursor:pointer;box-shadow:0 8px 22px #0005}.layers summary::-webkit-details-marker{display:none}.layers summary:after{content:"⌄";margin-left:8px;color:var(--cyan)}.layers[open] summary:after{transform:rotate(180deg)}.layer-menu{position:absolute;right:0;top:55px;width:230px;display:grid;gap:5px;padding:7px;border:1px solid var(--line);border-radius:7px;background:#071112f2;box-shadow:0 12px 30px #0008;backdrop-filter:blur(12px)}.layer-menu label{display:flex;align-items:center;gap:8px;min-height:36px;padding:6px 8px;border-radius:4px;font-size:12px;cursor:pointer}.layer-menu label:hover{background:#142728}.layer-menu input{accent-color:var(--cyan)}.layer-menu small{color:var(--cyan);font-size:9px}.river-guide{padding:9px;border-top:1px solid var(--line);display:grid;gap:7px}.river-guide[hidden]{display:none}.river-guide b{font-size:12px}.river-guide span{display:flex;align-items:center;gap:4px;color:var(--muted);font-size:9px;white-space:nowrap}.river-guide i{width:8px;height:8px;border-radius:50%}.river-caution{background:#f2e74b}.river-warning{background:#ef4b47}.river-danger{background:#9c1b68}.river-critical{background:#1f0a2b;border:1px solid #fff}.river-guide a{padding:8px;border:1px solid #39706b;border-radius:4px;color:var(--cyan);text-align:center;text-decoration:none;font-size:11px}
.crosshair{position:fixed;z-index:450;left:50%;top:50%;width:38px;height:38px;border:1px solid #fff9;border-radius:50%;transform:translate(-50%,-50%);pointer-events:none;box-shadow:0 0 0 5px #51d6c722}.crosshair:before,.crosshair:after{content:"";position:absolute;background:#fff9}.crosshair:before{width:52px;height:1px;left:-8px;top:18px}.crosshair:after{height:52px;width:1px;top:-8px;left:18px}
.analyze{position:fixed;z-index:550;left:50%;bottom:54px;transform:translateX(-50%);min-width:250px;padding:11px 25px;border:1px solid #8bf0e4;border-radius:8px;background:var(--cyan);color:#06211f;font-weight:900;box-shadow:0 10px 28px #0009,0 0 22px #51d6c744;cursor:pointer}.analyze small{display:block;font-size:10px;margin-top:2px}.legend{position:fixed;z-index:500;left:18px;bottom:16px;display:flex;gap:14px;padding:9px 12px;border:1px solid var(--line);background:#071112e8;font-size:11px}.legend span{display:flex;align-items:center;gap:5px}.legend i{width:9px;height:9px;border-radius:50%}
.low{color:#49b497!important}.watch{color:var(--yellow)!important}.alert{color:var(--orange)!important}.danger{color:var(--red)!important}.extreme{color:#ff4d83!important}.legend .low,.badge.low,.marker.low{background:#368b77}.legend .watch,.badge.watch,.marker.watch{background:#9d902e}.legend .alert,.badge.alert,.marker.alert{background:#c86b31}.legend .danger,.badge.danger,.marker.danger{background:#c9433f}.legend .extreme,.badge.extreme,.marker.extreme{background:var(--deep)}
.markerbox{background:none;border:0}.marker{width:48px;height:48px;display:flex;align-items:center;justify-content:center;gap:1px;border-radius:50%;border:2px solid #fffbd;color:#fff!important;font-size:11px;font-weight:900;box-shadow:0 0 0 7px #ff4f4920,0 8px 24px #000b;cursor:pointer}.marker b{font-size:15px}.loading{position:absolute;z-index:800;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#071112bd}.loading[hidden]{display:none}.loading>i{width:44px;height:44px;border:3px solid #244345;border-top-color:var(--cyan);border-radius:50%;animation:spin .8s linear infinite}.loading b{margin-top:14px}.loading small{color:var(--muted);margin-top:5px;text-align:center}
.drawer-open{position:fixed;z-index:700;right:0;top:50%;transform:translateY(-50%);width:56px;padding:12px 7px;border:1px solid #365052;border-right:0;border-radius:9px 0 0 9px;background:#0d1b1cf2;color:#fff;display:grid;gap:5px;justify-items:center;box-shadow:-8px 8px 25px #0007;cursor:pointer}.drawer-open span{display:grid;place-items:center;min-width:29px;height:29px;padding:0 4px;border-radius:20px;background:var(--cyan);color:#06211f;font-size:11px;font-weight:900}.drawer-open b{font-size:11px;writing-mode:vertical-rl}.drawer-open i{font-size:22px;font-style:normal}
aside{position:fixed;z-index:850;right:0;top:0;bottom:0;width:min(430px,92vw);overflow:auto;background:var(--panel);border-left:1px solid var(--line);box-shadow:-20px 0 55px #000a;transform:translateX(102%);transition:transform .3s cubic-bezier(.22,.8,.25,1)}.drawer-on aside{transform:translateX(0)}.drawer-close{position:absolute;z-index:2;left:9px;top:max(12px,env(safe-area-inset-top));width:34px;height:34px;border:1px solid var(--line);background:#132627;color:#fff;border-radius:50%;font-size:24px;cursor:pointer}.scrim{position:fixed;z-index:800;inset:0;background:#02070777;opacity:0;pointer-events:none;transition:.3s}.drawer-on .scrim{opacity:1;pointer-events:auto}.summary{padding:54px 22px 18px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line)}.summary small{font-size:11px;color:var(--muted)}.summary strong{display:block;font-size:27px}.summary>div:last-child{text-align:right;color:var(--muted);font-size:12px}.summary>div:last-child b{font-size:23px;color:#fff}
.forecast{min-height:82px;padding:13px 16px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.forecast span{text-align:center;color:var(--muted);font-size:10px}.forecast b{display:block;color:#fff;font-size:16px}.forecast b small{font-size:8px}.forecast>i{height:1px;flex:1;background:#325153;margin:10px 4px 0}.accum{display:grid;grid-template-columns:repeat(3,1fr);border-bottom:1px solid var(--line)}.accum span{padding:11px 6px;text-align:center;color:var(--muted);font-size:10px;border-right:1px solid var(--line)}.accum span:last-child{border:0}.accum b{display:block;color:#fff;font-size:14px;margin-top:4px}.controls{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:10px;border-bottom:1px solid var(--line)}.controls label{font-size:10px;color:var(--muted)}.controls select{width:100%;margin-top:4px;padding:7px;border:1px solid var(--line);border-radius:4px;background:#132627;color:#fff;font-size:11px}.controls select:disabled{opacity:.5}
nav{display:grid;grid-template-columns:1fr 1fr;border-bottom:1px solid var(--line)}nav button{padding:14px;border:0;border-bottom:2px solid transparent;background:none;color:var(--muted);font-size:13px;cursor:pointer}nav button.active{color:#fff;border-color:var(--cyan)}.tab{padding:8px}.hidden{display:none}.empty{padding:36px 18px;text-align:center}.empty b,.empty small{display:block}.empty small{color:var(--muted);margin-top:7px}.place{width:100%;min-height:66px;border:1px solid transparent;background:none;color:#fff;padding:10px;display:grid;grid-template-columns:46px minmax(0,1fr) 14px;gap:11px;align-items:center;text-align:left;cursor:pointer}.place:hover{background:#132627;border-color:#284345}.badge{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;color:#fff!important}.place strong,.place small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.place strong{font-size:13px}.place small{margin-top:3px;color:var(--muted);font-size:11px}.place>i{font-size:22px;color:var(--muted);font-style:normal}article{padding:16px;border-bottom:1px solid var(--line)}article b{font-size:14px}article p{font-size:12px;line-height:1.7;color:#b4c6c4}.error{margin:12px;padding:12px;background:#351d20;border-left:3px solid var(--red);font-size:12px}
nav{display:grid;grid-template-columns:1fr 1fr;border-bottom:1px solid var(--line)}nav button{padding:14px;border:0;border-bottom:2px solid transparent;background:none;color:var(--muted);font-size:13px;cursor:pointer}nav button.active{color:#fff;border-color:var(--cyan)}.tab{padding:8px}.hidden{display:none}.empty{padding:36px 18px;text-align:center}.empty b,.empty small{display:block}.empty small{color:var(--muted);margin-top:7px}.place{width:100%;min-height:66px;border:1px solid transparent;background:none;color:#fff;padding:10px;display:grid;grid-template-columns:46px minmax(0,1fr) 14px;gap:11px;align-items:center;text-align:left;cursor:pointer}.place:hover{background:#132627;border-color:#284345}.badge{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;color:#fff!important}.place strong,.place small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.place strong{font-size:13px}.place small{margin-top:3px;color:var(--muted);font-size:11px}.place>i{font-size:22px;color:var(--muted);font-style:normal}article{padding:16px;border-bottom:1px solid var(--line)}article b{font-size:14px}article p{font-size:12px;line-height:1.7;color:#b4c6c4}.judgement-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:12px}.judgement-grid span{padding:9px;background:#142526;color:#dce9e7;font-size:12px}.judgement-grid em{display:block;margin-top:3px;color:var(--cyan);font-size:10px;font-style:normal}.error{margin:12px;padding:12px;background:#351d20;border-left:3px solid var(--red);font-size:12px}
.detail{position:fixed;z-index:1200;left:18px;right:18px;bottom:18px;max-height:calc(100vh - 110px);overflow:auto;display:grid;grid-template-columns:1.05fr 1fr 1.15fr 1.2fr;gap:17px;padding:20px 24px;border:1px solid #345052;border-radius:9px;background:#0d1b1cf8;box-shadow:0 -18px 40px #0009;transform:translateY(calc(100% + 30px));transition:.35s}.detail.open{transform:translateY(0)}.detail>button{position:absolute;right:8px;top:5px;border:0;background:none;color:var(--muted);font-size:25px;cursor:pointer}.detailhead{display:flex;justify-content:space-between;gap:10px}.tag{color:var(--cyan)!important}.detail h2{font-size:17px;margin:6px 0 4px}.detailhead small{display:block;color:var(--muted);font-size:10px}.score{text-align:right;font-size:9px;white-space:nowrap}.score b{display:block;font-size:34px;line-height:1}.score span{display:block}.risk-timeline{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;align-content:center}.risk-timeline span{padding:9px 4px;background:#142526;text-align:center;color:var(--muted);font-size:9px}.risk-timeline b{display:block;margin-top:3px;font-size:18px}.metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:5px}.metrics div{background:#142526;padding:7px;color:var(--muted);font-size:9px}.metrics b{display:block;color:#fff;font-size:13px;white-space:nowrap}.reason>b{font-size:11px;color:var(--muted)}.reason p{font-size:12px;line-height:1.55;margin:5px 0}.reason small{color:var(--cyan);font-size:9px}.caution{grid-column:1/-1;display:flex;background:#301c1e;border-left:3px solid var(--red);padding:10px 12px;gap:5px;flex-direction:column;font-size:11px}.caution span{color:#cdb9b8;line-height:1.5}footer{position:fixed;z-index:500;right:15px;bottom:3px;font-size:9px;color:#77908e}
@keyframes spin{to{transform:rotate(360deg)}}
@media(max-width:900px){.detail{grid-template-columns:1fr 1fr}.reason{grid-column:1/-1}.caution{grid-column:1/-1}}
@media(max-width:800px){header{left:8px;right:8px;top:max(8px,env(safe-area-inset-top));height:55px;padding:0 10px}.mark{font-size:28px}h1{font-size:13px}.brand small{font-size:8px}.live{font-size:9px;gap:6px}.live b{font-size:11px}.live button{width:30px;height:30px}.status{top:76px;left:8px;right:68px;max-width:none;min-height:54px;padding:8px 10px}.status b{font-size:12px}.status span{font-size:10px;line-height:1.35}.locate{top:76px;right:8px;width:52px;height:54px}.layers{top:137px;right:8px}.layers summary{min-height:40px;padding:0 11px}.layer-menu{top:46px;width:min(246px,calc(100vw - 16px));grid-template-columns:1fr 1fr}.layer-menu label{font-size:10px;padding:5px}.river-guide{grid-column:1/-1}.legend{left:8px;right:8px;bottom:max(8px,env(safe-area-inset-bottom));justify-content:space-between;gap:3px;padding:8px 7px}.legend span{font-size:9px}.legend i{width:7px;height:7px}.analyze{bottom:max(44px,calc(env(safe-area-inset-bottom) + 37px));min-width:220px;padding:10px 17px}.drawer-open{top:auto;bottom:112px;width:48px}.leaflet-control-zoom{margin-right:8px!important;margin-bottom:9px!important}.leaflet-control-attribution{font-size:7px}.detail{left:8px;right:8px;bottom:max(8px,env(safe-area-inset-bottom));max-height:82vh;display:block;padding:18px 15px;border-radius:14px}.detailhead,.risk-timeline,.metrics,.reason{margin-bottom:12px}.metrics{grid-template-columns:repeat(2,1fr)}footer{display:none}}
@media(max-width:390px){.brand{gap:6px}.mark{font-size:23px}h1{font-size:11px}.brand small{display:none}.live span{font-size:8px}.layers summary{font-size:10px}.legend span{font-size:8px}.analyze{min-width:205px}.forecast{padding:11px 9px}.forecast b{font-size:14px}}