/* 一般向け「いまの地震・津波」と本人専用の画面で使う追加のスタイル (色の決まりは style.css の :root) */
html, body { height: auto; min-height: 100%; }
.top { flex-wrap: wrap; }
.sitenav { display: flex; gap: 4px; flex-wrap: wrap; }
.sitenav a { color: var(--ink); text-decoration: none; font-size: 13.5px; padding: 8px 12px; border-radius: 8px; border: 1px solid transparent; min-height: 36px; display: inline-flex; align-items: center; }
.sitenav a:hover { border-color: var(--line); }
.sitenav a[aria-current="page"] { background: var(--accent); color: #fff; }
.sitenav a:focus-visible, button:focus-visible, input:focus-visible, summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.page { max-width: 1080px; margin: 0 auto; padding: 16px 16px 48px; }
.notice { border: 1px solid var(--line); background: var(--panel); border-radius: 12px; padding: 12px 14px; font-size: 13px; line-height: 1.7; color: var(--muted); margin-bottom: 14px; }
.notice strong { color: var(--ink); }
.notice.alert { border-color: var(--warn); color: var(--ink); }
.notice.owner { border-color: #b86b00; background: color-mix(in srgb, #ffb340 10%, var(--panel)); color: var(--ink); }
.section { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; margin-bottom: 14px; box-shadow: var(--shadow); }
.section h2 { margin: 0 0 4px; font-size: 16.5px; }
.section .sub { margin: 0 0 12px; color: var(--muted); font-size: 12.5px; }
.statusline { display: flex; gap: 8px 16px; flex-wrap: wrap; align-items: center; font-size: 12.5px; color: var(--muted); margin-bottom: 12px; }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #2da44e; margin-right: 6px; vertical-align: 1px; }
.dot.stale { background: var(--warn); }
.headline { white-space: pre-wrap; font-size: 15px; line-height: 1.7; margin: 6px 0 10px; }
.meta { color: var(--muted); font-size: 12.5px; }
table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
th, td { text-align: left; padding: 7px 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { color: var(--muted); font-weight: 600; font-size: 12.5px; }
td.num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.tablewrap { overflow-x: auto; }
.kind { display: inline-block; padding: 2px 8px; border-radius: 6px; font-size: 12.5px; font-weight: 600; white-space: nowrap; border: 1px solid transparent; }
.kind.major { background: var(--major); color: #fff; }
.kind.warn { background: var(--warn); color: #fff; }
.kind.adv { background: var(--adv); color: #222; }
.kind.fc { background: var(--fc); color: #fff; }
.kind.off { border-color: var(--line); color: var(--muted); }
.cards2 { display: grid; gap: 12px; }
.eq { border: 1px solid var(--line); border-radius: 10px; padding: 12px; }
.eq.cancel { opacity: .75; border-style: dashed; }
.eq .row1 { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; justify-content: space-between; }
.eq h3 { margin: 0; font-size: 15px; }
.eq .facts { display: flex; gap: 8px 18px; flex-wrap: wrap; margin: 8px 0 4px; font-size: 13.5px; }
.eq .facts span b { color: var(--muted); font-weight: 500; margin-right: 4px; }
.eq ul.comments { margin: 6px 0 0; padding-left: 18px; font-size: 13px; }
.int { display: inline-block; min-width: 54px; text-align: center; padding: 3px 8px; border-radius: 6px; font-weight: 700; font-size: 13px; border: 1px solid rgba(0,0,0,.12); }
.int.i1 { background: #f2f2ff; color: #333; } .int.i2 { background: #00aaff; color: #fff; } .int.i3 { background: #0041ff; color: #fff; }
.int.i4 { background: #fae696; color: #333; } .int.i5m { background: #ffe600; color: #333; } .int.i5p { background: #ff9900; color: #222; }
.int.i6m { background: #ff2800; color: #fff; } .int.i6p { background: #a50021; color: #fff; } .int.i7 { background: #b40068; color: #fff; }
.int.none { background: transparent; color: var(--muted); }
details.more { margin-top: 8px; font-size: 13px; }
details.more summary { cursor: pointer; color: var(--accent); min-height: 32px; display: flex; align-items: center; }
.empty { color: var(--muted); font-size: 13.5px; padding: 6px 0; }
a.ext { color: var(--accent); }
footer.foot { color: var(--muted); font-size: 12px; line-height: 1.8; margin-top: 18px; }
button.primary, button.secondary { font: inherit; font-size: 14px; border-radius: 9px; padding: 10px 16px; min-height: 44px; cursor: pointer; }
button.primary { background: var(--accent); color: #fff; border: 1px solid var(--accent); }
button.secondary { background: transparent; color: var(--ink); border: 1px solid var(--line); }
button:disabled { opacity: .55; cursor: default; }
.field { display: grid; gap: 6px; margin: 10px 0; max-width: 420px; }
.field label { font-size: 13px; color: var(--muted); }
.field input { padding: 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); color: var(--ink); font-size: 15px; letter-spacing: .04em; }
.msg { font-size: 13px; min-height: 20px; margin-top: 8px; }
.msg.err { color: var(--warn); }
.msg.ok { color: #2da44e; }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 760px) { .split { grid-template-columns: 1fr; } .top { padding: 10px 12px; } .page { padding: 12px 12px 40px; } }
/* 指で触る端末では、表の中のリンクも押しやすい大きさに (文中のリンクは除く) */
@media (pointer: coarse) { td a.ext { display: inline-flex; align-items: center; min-height: 44px; padding: 0 8px; } }
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; transition: none !important; } }