:root{--fg:#1d2733;--mut:#5b6773;--bd:#d5dbe1;--bg:#f6f8fa;--ac:#0b5cad}
*{box-sizing:border-box}
body{margin:0;font:16px/1.7 system-ui,"Hiragino Sans","Noto Sans JP",sans-serif;color:var(--fg);background:var(--bg)}
header{display:flex;gap:1rem;align-items:center;flex-wrap:wrap;padding:.6rem 1rem;background:#fff;border-bottom:1px solid var(--bd)}
.brand{font-weight:700;color:var(--fg);text-decoration:none}
nav a{margin-right:1rem}
a{color:var(--ac)}
main{max-width:860px;margin:0 auto;padding:1rem}
.notice{padding:.6rem .9rem;border-radius:6px;border:1px solid var(--bd);background:#fff}
.notice.stale{background:#fff4e5;border-color:#e0a030}
.notice.degraded{background:#fff4e5;border-color:#e0a030}
.notice.unknown{background:#fff4e5;border-color:#e0a030}
.region{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap}
select,button{font:inherit;padding:.4rem .6rem;min-height:44px}
.items{list-style:none;padding:0}
.items li{background:#fff;border:1px solid var(--bd);border-radius:8px;padding:.8rem 1rem;margin:.7rem 0}
.t{font-weight:700;font-size:1.05rem}
.b{display:inline-block;font-size:.8rem;border:1px solid var(--bd);border-radius:4px;padding:0 .4rem;margin-right:.3rem}
.b.warn,.b.cancel{background:#fff4e5;border-color:#e0a030}
dl{display:grid;grid-template-columns:max-content 1fr;gap:.1rem .8rem;margin:.4rem 0}
dt{color:var(--mut)}dd{margin:0}
.muted{color:var(--mut)}
.btn{display:inline-block;padding:.6rem 1rem;background:var(--ac);color:#fff;border-radius:6px;text-decoration:none}
.headline{font-size:1.1rem}
footer{max-width:860px;margin:0 auto;padding:1rem;color:var(--mut);font-size:.85rem}
@media(max-width:520px){dl{grid-template-columns:1fr}dt{margin-top:.3rem}}