/* ═══════════════════════════════════════════════════════════════
   QuakeView — 共有デザインシステム
   quakeview.css  |  QuakeView（app/ 一般向け・dev/ 開発者向け 共通）
═══════════════════════════════════════════════════════════════ */

/* ── 1. Design Tokens ──────────────────────────────────────── */
:root {
  /* Backgrounds */
  --bg:          #0a0c0f;
  --surface:     #10141a;
  --surface2:    #0f1820;
  --header-bg:   #0a1830;

  /* Borders */
  --border:      #1e2530;
  --border2:     #1f3045;

  /* Named colors — palette */
  --cyan:        #00d4ff;
  --cyan-dim:    #004d6e;
  --teal:        #00c49a;
  --amber:       #f0a500;
  --red:         #ff4c4c;
  --orange:      #ff7d2e;
  --yellow:      #ffd166;
  --blue:        #4db8ff;
  --green:       #2ed573;
  --purple:      #a78bff;
  --pink:        #ff80ff;

  /* Text */
  --text:        #dbe6f7;
  --text-dim:    #7f9bb2;
  --text-mid:    #9db6cc;

  /* Semantic aliases — 後方互換 */
  --accent:      var(--cyan);
  --accent-dim:  var(--cyan-dim);
  --accent3:     var(--amber);   /* earthquake_viz.html */
  --dim:         #8ba4bd;        /* 旧 elapsed_timer 由来 */
  /* --accent2 は各ページで独自定義（ページごとに意味が異なる） */

  /* Fonts */
  --mono:        'JetBrains Mono', monospace;
  --sans:        'Noto Sans JP', sans-serif;

  /* Layout metrics — ルートのフォントサイズに追従させる（相対単位） */
  --header-h:      3rem;      /* .rtm-header / .personal-nav-bar の高さ */
  --header-h-mob:  2.5rem;    /* 同 モバイル時の最低高さ */
}

/* ── 2. Reset ──────────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ── 3. Base ───────────────────────────────────────────────── */
html {
  overflow-x: hidden;
  width: 100%;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-weight: 300;
  min-height: 100vh;
  overflow-x: hidden;
}

/* ── 4. Scrollbars ─────────────────────────────────────────── */
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 2px; }

/* ── 5. Keyframe Animations ────────────────────────────────── */
@keyframes blink {
  0%, 100% { opacity: 1; box-shadow: 0 0 5px var(--cyan); }
  50%       { opacity: .2; box-shadow: none; }
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: .3; }
}

@keyframes rowIn {
  from { opacity: 0; transform: translateX(4px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes sweep {
  0%   { width: 0%;   margin-left: 0; }
  50%  { width: 55%;  margin-left: 45%; }
  100% { width: 0%;   margin-left: 100%; }
}

/* ── 6. Header ─────────────────────────────────────────────── */
header {
  flex-shrink: 0;
  background: var(--header-bg);
  border-bottom: 1px solid var(--border);
}

/* ── 7. QuakeView ロゴ — nav-logo スタイル（hypo 型） ───────── */
.nav-logo {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  text-decoration: none;
  margin-bottom: 6px;
}
.nav-logo-icon {
  width: 22px; height: 22px;
  border-radius: 4px;
  background: linear-gradient(135deg, var(--cyan) 0%, var(--teal) 100%);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; flex-shrink: 0;
  box-shadow: 0 0 10px rgba(0, 212, 255, .3);
}
.nav-logo-text {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 600;
  color: var(--cyan);
  letter-spacing: .08em;
  text-shadow: 0 0 12px rgba(0, 212, 255, .4);
  transition: color .2s;
}
.nav-logo:hover .nav-logo-text { color: #fff; }

.header-divider {
  width: 1px; height: 28px;
  background: var(--border2);
  margin: 0 14px 6px;
  flex-shrink: 0;
  align-self: flex-end;
}

/* ── 8. QuakeView ロゴ — logo-link スタイル（viz 型） ───────── */
.logo {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}
.logo-link {
  font-family: var(--mono);
  font-size: 1.05rem;
  color: var(--cyan);
  letter-spacing: 2px;
  text-transform: uppercase;
  text-decoration: none;
  padding: 4px 10px;
  border: 1px solid rgba(0, 212, 255, .35);
  border-radius: 3px;
  background: rgba(0, 212, 255, .06);
  transition: background .2s, border-color .2s, color .2s;
  position: relative;
  overflow: hidden;
}
.logo-link::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(0, 212, 255, .1) 0%, transparent 100%);
  opacity: 0;
  transition: opacity .2s;
}
.logo-link:hover { border-color: var(--cyan); color: #fff; }
.logo-link:hover::before { opacity: 1; }
.logo-sep {
  color: var(--text-dim);
  font-family: var(--mono);
  font-size: 1rem;
  user-select: none;
}
.logo-sub {
  font-family: var(--mono);
  font-size: .72rem;
  color: var(--text-mid);
  letter-spacing: 3px;
  text-transform: uppercase;
}

/* ── 9. ページタイトル / ロゴタグ ──────────────────────────── */
.logo-tag {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .3em;
  color: var(--text-dim);
  margin-bottom: 3px;
}
h1 {
  font-family: var(--mono);
  font-size: 17px;
  font-weight: 600;
  color: var(--cyan);
  letter-spacing: .05em;
  text-shadow: 0 0 20px rgba(0, 212, 255, .3);
}
h1 small {
  color: var(--teal);
  font-size: 11px;
  font-weight: 300;
  letter-spacing: .1em;
  margin-left: 10px;
}

/* ── 10. Clock / Live インジケーター ───────────────────────── */
.header-right { text-align: right; }
#clock {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--amber);
}
.live {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--mono);
  font-size: 9px;
  color: var(--teal);
  letter-spacing: .15em;
  margin-top: 3px;
}
.dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--teal);
  animation: blink 2s ease-in-out infinite;
}

/* ── 11. ボタン ────────────────────────────────────────────── */
button {
  background: transparent;
  border: 1px solid var(--cyan);
  color: var(--cyan);
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .1em;
  padding: .38rem .78rem;
  border-radius: 3px;
  cursor: pointer;
  transition: background .15s;
  white-space: nowrap;
}
button:hover { background: rgba(0, 212, 255, .1); }

/* .btn — アウトラインボタン（hypo スタイル） */
.btn {
  background: var(--cyan-dim);
  border: 1px solid var(--cyan);
  color: var(--cyan);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .08em;
  padding: 4px 12px;
  border-radius: 2px;
  cursor: pointer;
  transition: background .2s, box-shadow .2s;
  white-space: nowrap;
}
.btn:hover {
  background: rgba(0, 212, 255, .15);
  box-shadow: 0 0 10px rgba(0, 212, 255, .2);
}
.btn:disabled { opacity: .4; cursor: not-allowed; }

/* 押しっぱなしのトグル（重ねる／重ねないの切り替えなど） */
.btn--on {
  background: var(--cyan);
  color: var(--bg);
}
.btn--on:hover { background: var(--cyan); opacity: .85; }

/* .btn-primary — 塗りつぶしボタン（viz スタイル） */
.btn-primary {
  padding: 12px;
  background: var(--cyan);
  color: var(--bg);
  border: none;
  border-radius: 3px;
  cursor: pointer;
  font-family: var(--mono);
  font-size: .9rem;
  letter-spacing: 2px;
  font-weight: 700;
  transition: opacity .2s;
  width: 100%;
}
.btn-primary:hover { opacity: .85; }

/* secondary ボタン */
button.secondary {
  border-color: var(--dim);
  color: var(--dim);
}
button.secondary:hover {
  background: rgba(255, 255, 255, .04);
  color: var(--text);
  border-color: var(--text);
}

/* ── 12. フォーム入力 ──────────────────────────────────────── */
input[type="number"],
input[type="date"],
input[type="datetime-local"],
input[type="text"],
input[type="url"] {
  background: var(--bg);
  border: 1px solid var(--border2);
  color: var(--text);
  font-family: var(--mono);
  font-size: 11px;
  padding: 3px 6px;
  border-radius: 2px;
  outline: none;
  transition: border-color .2s;
  color-scheme: dark;
}
input[type="number"]:hover,
input[type="number"]:focus,
input[type="date"]:hover,
input[type="date"]:focus,
input[type="datetime-local"]:hover,
input[type="datetime-local"]:focus,
input[type="text"]:hover,
input[type="text"]:focus,
input[type="url"]:hover,
input[type="url"]:focus {
  border-color: var(--cyan-dim);
}
input:focus { border-color: var(--cyan) !important; }
input[type="number"] { -moz-appearance: textfield; }
input[type="number"]::-webkit-inner-spin-button { opacity: .4; }
input[type="date"] {
  font-size: 10px;
  padding: 3px 7px;
  cursor: pointer;
}

/* datetime-local */
input[type="datetime-local"] {
  font-size: 10px;
  padding: 3px 7px;
  cursor: pointer;
}

/* select */
select {
  background: var(--bg);
  border: 1px solid var(--border2);
  color: var(--text);
  font-family: var(--mono);
  font-size: 11px;
  padding: 3px 22px 3px 7px;
  border-radius: 2px;
  cursor: pointer;
  outline: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%232d4a60'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 6px center;
  transition: border-color .2s;
}
select:hover,
select:focus { border-color: var(--cyan-dim); outline: none; }

/* range */
input[type="range"] {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  accent-color: var(--cyan);
  width: 80px;
}
.range-val {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--cyan);
  min-width: 28px;
}

/* filter-group / filter-label — viz/timer 共通 */
.filter-group { display: flex; flex-direction: column; gap: 4px; }
.filter-label {
  color: var(--dim);
  font-family: var(--mono);
  font-size: .6rem;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.filter-group input,
.filter-group select {
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 5px 8px;
  border-radius: 3px;
  font-family: var(--mono);
  font-size: .78rem;
  outline: none;
  width: 100%;
  box-sizing: border-box;
}
.filter-group input:focus,
.filter-group select:focus { border-color: var(--cyan); }

/* ── 13. Panel コンポーネント ───────────────────────────────── */
.panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 4px;
  overflow: hidden;
  width: 100%;
  box-sizing: border-box;
}
.panel-header {
  padding: 12px 18px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 10px;
}
.panel-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--cyan);
  flex-shrink: 0;
}
.panel-title {
  font-family: var(--mono);
  font-size: .82rem;
  color: var(--cyan);
  letter-spacing: 2px;
  text-transform: uppercase;
}
.panel-body {
  padding: 20px;
  width: 100%;
  box-sizing: border-box;
}
.panel-body canvas { display: block; width: 100% !important; }
.panel-body--flush { padding: 0 !important; }

/* ── 14. Card コンポーネント（旧 elapsed_timer 由来） ────────────── */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 1rem 1.25rem;
  position: relative;
  overflow: hidden;
}
/* 四隅の装飾 */
.card::before,
.card::after {
  content: '';
  position: absolute;
  width: .75rem; height: .75rem;
  border-color: var(--cyan);
  border-style: solid;
  opacity: .4;
}
.card::before { top: .3rem; left: .3rem; border-width: 1px 0 0 1px; }
.card::after  { bottom: .3rem; right: .3rem; border-width: 0 1px 1px 0; }

/* ── 15. テーブル ──────────────────────────────────────────── */
table { width: 100%; border-collapse: collapse; font-size: 11px; }
thead tr {
  border-bottom: 1px solid var(--cyan-dim);
  position: sticky; top: 0; z-index: 1;
  background: var(--surface);
}
th {
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: .2em;
  color: var(--text-dim);
  text-transform: uppercase;
  padding: 7px 8px;
  text-align: left;
  white-space: nowrap;
  font-weight: 400;
}
th[data-sort] { cursor: pointer; }
th[data-sort]:hover { color: var(--text-mid); }
th.sort-desc::after { content: ' ▼'; color: var(--cyan); }
th.sort-asc::after  { content: ' ▲'; color: var(--cyan); }
tbody tr {
  border-bottom: 1px solid rgba(24, 37, 53, .8);
  transition: background .1s;
  cursor: pointer;
  animation: rowIn .2s ease both;
}
tbody tr:hover,
tbody tr.highlighted { background: rgba(0, 212, 255, .06); }
td {
  padding: 6px 8px;
  white-space: nowrap;
  vertical-align: middle;
}
.td-time   { font-family: var(--mono); font-size: 10px; color: var(--text-mid); }
.td-region {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 300;
  max-width: 130px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.td-num { font-family: var(--mono); font-size: 10px; color: var(--text-dim); }

/* viz スタイルのテーブル上書き */
thead th {
  background: var(--bg);
  color: var(--dim);
  font-size: .65rem;
  letter-spacing: 1px;
  padding: 8px 12px;
}
tbody td { padding: 7px 12px; color: var(--text); }
tbody tr:hover { background: rgba(0, 212, 255, .04); }

/* ── 16. マグニチュード バッジ ─────────────────────────────── */
.mag {
  display: inline-block;
  font-family: var(--mono);
  font-weight: 600;
  font-size: 11px;
  padding: 1px 5px;
  border-radius: 2px;
  min-width: 36px;
  text-align: center;
}
.mag-nd  { background: rgba(45,74,96,.25);   color: var(--text-dim);         border: 1px solid #182535; }
.mag-1   { background: rgba(77,184,255,.1);  color: var(--blue);     border: 1px solid rgba(77,184,255,.25); }
.mag-2   { background: rgba(0,212,255,.1);   color: var(--cyan);     border: 1px solid rgba(0,212,255,.25); }
.mag-3   { background: rgba(0,196,154,.1);   color: var(--teal);     border: 1px solid rgba(0,196,154,.25); }
.mag-4   { background: rgba(240,165,0,.12);  color: var(--amber);    border: 1px solid rgba(240,165,0,.3); }
.mag-5   { background: rgba(255,125,46,.15); color: var(--orange);   border: 1px solid rgba(255,125,46,.35); }
.mag-6   { background: rgba(255,76,76,.15);  color: var(--red);      border: 1px solid rgba(255,76,76,.35); }
.mag-7   { background: rgba(255,76,76,.3);   color: #fff;            border: 1px solid var(--red); text-shadow: 0 0 8px var(--red); }

/* viz スタイルの mag-badge */
.mag-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 2px;
  font-weight: 600;
  font-size: .7rem;
  font-family: var(--mono);
}

/* ── 17. 震度バッジ ────────────────────────────────────────── */
.si {
  display: inline-block;
  font-family: var(--mono);
  font-weight: 600;
  font-size: 11px;
  padding: 1px 5px;
  border-radius: 2px;
  min-width: 38px;
  text-align: center;
}
.si-none { background: rgba(45,74,96,.2);    color: var(--text-dim); border: 1px solid var(--border); font-size: 9px; font-weight: 300; }
.si-1    { background: rgba(77,184,255,.1);  color: var(--blue);     border: 1px solid rgba(77,184,255,.25); }
.si-2    { background: rgba(0,212,255,.1);   color: var(--cyan);     border: 1px solid rgba(0,212,255,.25); }
.si-3    { background: rgba(0,196,154,.1);   color: var(--teal);     border: 1px solid rgba(0,196,154,.25); }
.si-4    { background: rgba(240,165,0,.12);  color: var(--amber);    border: 1px solid rgba(240,165,0,.3); }
.si-5    { background: rgba(255,125,46,.15); color: var(--orange);   border: 1px solid rgba(255,125,46,.35); }
.si-6    { background: rgba(255,76,76,.15);  color: var(--red);      border: 1px solid rgba(255,76,76,.35); }
.si-7    { background: rgba(255,76,76,.35);  color: #fff;            border: 1px solid var(--red); text-shadow: 0 0 6px var(--red); }

/* ── 18. ローディングオーバーレイ ──────────────────────────── */
#loading {
  position: absolute; inset: 0;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(6, 11, 16, .85);
  gap: 14px;
  color: var(--text-dim);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .12em;
}
.loader {
  width: 180px; height: 2px;
  background: var(--border);
  border-radius: 1px;
  overflow: hidden;
}
.loader-fill {
  height: 100%;
  background: var(--cyan);
  box-shadow: 0 0 8px var(--cyan);
  animation: sweep 1.4s ease-in-out infinite;
}

/* ── 19. エラートースト ────────────────────────────────────── */
#error-toast {
  display: none;
  position: absolute;
  bottom: 16px; left: 50%; transform: translateX(-50%);
  z-index: 2000;
  padding: 10px 18px;
  border: 1px solid rgba(255, 76, 76, .4);
  background: rgba(10, 16, 24, .95);
  border-radius: 3px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--red);
}

/* ── 20. Notification（viz スタイル） ──────────────────────── */
#notif {
  position: fixed;
  bottom: 24px; right: 24px;
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 12px 20px;
  border-radius: 4px;
  font-family: var(--mono);
  font-size: .8rem;
  color: var(--text);
  opacity: 0;
  transition: opacity .3s;
  pointer-events: none;
  box-shadow: 0 8px 30px rgba(0, 0, 0, .4);
}
#notif.show   { opacity: 1; }
#notif.error  { border-color: var(--red);   color: var(--red); }
#notif.success { border-color: var(--green); color: var(--green); }

/* ── 21. 地図凡例 ──────────────────────────────────────────── */
#legend {
  position: absolute;
  bottom: 20px; right: 10px;
  z-index: 500;
  background: rgba(6, 11, 16, .88);
  border: 1px solid var(--border2);
  border-radius: 3px;
  padding: 10px 14px;
  font-family: var(--mono);
  font-size: 10px;
  color: var(--text-mid);
  line-height: 2;
  backdrop-filter: blur(4px);
}
#legend .leg-title {
  color: var(--text-dim);
  font-size: 9px;
  letter-spacing: .2em;
  margin-bottom: 4px;
}
.leg-row { display: flex; align-items: center; gap: 7px; }
.leg-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }

/* ── 22. MapLibre ポップアップ上書き ────────────────────────── */
.maplibregl-map { background: #08111a; }
.maplibregl-popup-content {
  background: var(--surface);
  border: 1px solid var(--border2);
  border-radius: 3px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, .6);
  color: var(--text);
  font-family: var(--sans);
  margin: 0;
  padding: 10px 14px;
  line-height: 1.6;
}
/* 吹き出しの三角は anchor 位置ごとに着色する辺が変わる */
.maplibregl-popup-anchor-top          .maplibregl-popup-tip,
.maplibregl-popup-anchor-top-left     .maplibregl-popup-tip,
.maplibregl-popup-anchor-top-right    .maplibregl-popup-tip    { border-bottom-color: var(--surface); }
.maplibregl-popup-anchor-bottom       .maplibregl-popup-tip,
.maplibregl-popup-anchor-bottom-left  .maplibregl-popup-tip,
.maplibregl-popup-anchor-bottom-right .maplibregl-popup-tip    { border-top-color:    var(--surface); }
.maplibregl-popup-anchor-left         .maplibregl-popup-tip    { border-right-color:  var(--surface); }
.maplibregl-popup-anchor-right        .maplibregl-popup-tip    { border-left-color:   var(--surface); }
.maplibregl-popup-close-button {
  color: var(--text-dim);
  background: none;
  border: none;
  top: 2px; right: 4px;
  font-size: 16px;
  cursor: pointer;
}
.maplibregl-popup-close-button:hover { background: none; color: var(--text); }

/* ── 23. 地図ポップアップ内テキスト ─────────────────────────── */
.popup-time  { font-family: var(--mono); font-size: 10px; color: var(--text-dim); margin-bottom: 4px; }
.popup-place { font-size: 14px; font-weight: 500; margin-bottom: 6px; }
.popup-row   { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 4px; }
.popup-dep   { font-family: var(--mono); font-size: 11px; color: var(--text-mid); }

/* ── 24. ステータスバー ────────────────────────────────────── */
.status-bar {
  margin-top: .55rem;
  font-family: var(--mono);
  font-size: .58rem;
  color: var(--dim);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .3rem;
}
#origin-display { color: var(--text); }
#tick-dot {
  display: inline-block;
  width: .35rem; height: .35rem;
  border-radius: 50%;
  background: var(--cyan);
  margin-right: .3em;
  animation: pulse 1s steps(1) infinite;
}

/* ── 25. section-label / metric-label ──────────────────────── */
.section-label,
.metric-label {
  font-family: var(--mono);
  font-size: .58rem;
  letter-spacing: .2em;
  color: var(--dim);
  text-transform: uppercase;
  margin-bottom: .3rem;
  display: block;
}

/* ── 26. metric-badge ──────────────────────────────────────── */
.metric-badge {
  display: inline-block;
  font-family: var(--mono);
  font-size: .6rem;
  padding: .08em .4em;
  border-radius: 3px;
  margin-bottom: .2rem;
  background: rgba(0, 212, 255, .1);
  color: var(--cyan);
  letter-spacing: .1em;
  transition: background .15s, color .15s;
}
.metric-badge.negative {
  background: rgba(255, 107, 53, .1);
  color: var(--accent2, var(--orange));
}

/* ── 27. big-number ────────────────────────────────────────── */
.big-number {
  font-family: var(--mono);
  font-size: clamp(1.7rem, 4vw, 3.4rem);
  color: var(--cyan);
  letter-spacing: .04em;
  text-shadow: 0 0 1.2rem rgba(0, 212, 255, .3);
  line-height: 1.1;
  transition: color .15s;
}
.big-number.negative {
  color: var(--accent2, var(--orange));
  text-shadow: 0 0 1.2rem rgba(255, 107, 53, .3);
}
.big-sub {
  font-family: var(--mono);
  font-size: .65rem;
  color: var(--dim);
  margin-top: .2rem;
}

/* ── 28. arrival phases テーブル（旧 elapsed_timer 由来） ───────────── */
.arr-hdr-row,
.arrival-row {
  display: grid;
  grid-template-columns: 8.5rem 1fr 1fr 7.5rem;
  gap: .4rem;
  align-items: center;
  padding: .2rem .65rem;
}
.arrival-row {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: .42rem .65rem;
  margin-bottom: .28rem;
}
.arr-section-hdr {
  font-family: var(--mono);
  font-size: .55rem;
  letter-spacing: .18em;
  color: var(--dim);
  padding: .5rem .65rem .2rem;
  text-transform: uppercase;
}
.arr-phase { font-family: var(--mono); font-size: .7rem; font-weight: bold; }
.arr-tt    { font-family: var(--mono); font-size: .7rem; color: var(--text); }
.arr-abs   { font-family: var(--mono); font-size: .66rem; color: var(--text); }
.arr-cd {
  font-family: var(--mono);
  font-size: .7rem;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.arr-cd.waiting { color: var(--cyan); }
.arr-cd.arrived { color: var(--dim); }
.arr-note {
  font-family: var(--mono);
  font-size: .54rem;
  color: var(--dim);
  padding-left: 9.5rem;
  margin-top: -.15rem;
  margin-bottom: .2rem;
}
.arr-none {
  font-family: var(--mono);
  font-size: .7rem;
  color: var(--dim);
  padding: .3rem .65rem;
}

/* ── 29. KS バッジ ─────────────────────────────────────────── */
.ks-badge {
  display: inline-block;
  padding: 3px 12px;
  border-radius: 2px;
  font-family: var(--mono);
  font-size: .75rem;
  font-weight: 600;
}

/* ── 30. パラメータカード（ETAS） ──────────────────────────── */
.param-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 16px;
  margin-bottom: 20px;
}
.param-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 20px 14px;
  text-align: center;
  transition: border-color .2s;
}
.param-card:hover { border-color: var(--amber); }
.param-name  { font-family: var(--mono); color: var(--amber); font-size: 1.2rem; margin-bottom: 8px; }
.param-value { font-family: var(--mono); color: var(--text);  font-size: 1.5rem; font-weight: 600; }
.param-ci    { font-family: var(--mono); color: var(--dim);   font-size: .68rem; margin-top: 6px; }

/* ── 31. AIC テーブル ──────────────────────────────────────── */
.aic-table { width: 100%; border-collapse: collapse; font-family: var(--mono); font-size: .85rem; }
.aic-table th {
  color: var(--dim);
  padding: 11px 16px;
  text-align: left;
  font-size: .68rem;
  letter-spacing: 1px;
  border-bottom: 1px solid var(--border);
}
.aic-table td { padding: 11px 16px; border-bottom: 1px solid var(--border); }

/* ── 32. 異常性モニタリング ─────────────────────────────────── */
.anomaly-param-bar {
  background: rgba(255, 71, 87, .05);
  border: 1px solid rgba(255, 71, 87, .2);
  border-radius: 3px;
  padding: 8px 14px;
  margin-bottom: 16px;
  font-family: var(--mono);
  font-size: .7rem;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.anomaly-item {
  display: grid;
  grid-template-columns: 180px 60px 90px 1fr;
  gap: 8px;
  padding: 6px 10px;
  font-family: var(--mono);
  font-size: .75rem;
  border-bottom: 1px solid var(--border);
  align-items: center;
}
.anomaly-item:hover { background: rgba(255, 71, 87, .06); }
.anomaly-dt       { color: var(--dim); }
.anomaly-mag      { color: var(--amber); font-weight: 600; }
.anomaly-p        { color: #ff4757; }
.anomaly-logscore { color: var(--text); }
#anomaly-list {
  max-height: 200px;
  overflow-y: auto;
  margin-top: 14px;
}
#anomaly-list::-webkit-scrollbar { width: 3px; }
#anomaly-list::-webkit-scrollbar-thumb { background: var(--border); }
.anomaly-list-header {
  display: grid;
  grid-template-columns: 180px 60px 90px 1fr;
  gap: 8px;
  padding: 4px 10px;
  font-family: var(--mono);
  font-size: .62rem;
  color: var(--dim);
  letter-spacing: 1px;
  text-transform: uppercase;
  border-bottom: 1px solid var(--border);
}

/* ── 33. JMA 更新チェッカー ─────────────────────────────────── */
#jma-checker {
  max-width: 560px;
  margin: 20px auto 0;
  border-radius: 10px;
  font-family: var(--mono);
  font-size: .78rem;
  overflow: hidden;
  border: 1px solid var(--border);
  background: rgba(10, 16, 30, .7);
}
#jma-checker-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  cursor: pointer;
  user-select: none;
  background: rgba(26, 37, 64, .6);
}
#jma-checker-header:hover { background: rgba(26, 37, 64, .9); }
#jma-checker-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--dim);
}
#jma-checker-dot.ok      { background: var(--green); }
#jma-checker-dot.warn    { background: var(--amber); animation: pulse 1.5s infinite; }
#jma-checker-dot.error   { background: #ff4757; }
#jma-checker-dot.loading { background: var(--cyan); animation: pulse 1s infinite; }
#jma-checker-label  { color: var(--dim); flex: 1; }
#jma-checker-toggle { color: var(--dim); font-size: .7rem; }
#jma-checker-body {
  padding: 12px 14px;
  border-top: 1px solid var(--border);
  display: none;
}
#jma-checker-body.open { display: block; }
.jma-entry {
  margin-bottom: 10px;
  padding: 8px 10px;
  border-radius: 6px;
  background: rgba(255, 165, 2, .08);
  border-left: 3px solid var(--amber);
}
.jma-entry-date  { color: var(--amber); font-weight: bold; margin-bottom: 3px; }
.jma-entry-kind  { color: var(--dim); font-size: .7rem; }
.jma-entry-desc  { color: var(--text); margin-top: 4px; line-height: 1.6; word-break: break-all; }
.jma-entry-years {
  margin-top: 5px; padding: 3px 7px;
  background: rgba(255, 71, 87, .15);
  border-radius: 4px;
  color: #ff4757; font-size: .7rem;
}
.jma-entry-link { color: var(--cyan); font-size: .7rem; }
#jma-checker-footer { margin-top: 8px; color: var(--dim); font-size: .68rem; }

/* ── 34. Upload / Drop zone ─────────────────────────────────── */
.upload-box {
  border: 1px dashed var(--cyan);
  border-radius: 4px;
  padding: 60px 80px;
  text-align: center;
  cursor: pointer;
  background: rgba(0, 212, 255, .03);
  transition: all .25s;
  max-width: 560px;
  width: 100%;
  position: relative;
}
.upload-box:hover,
.upload-box.drag {
  background: rgba(0, 212, 255, .07);
  border-color: #00aaff;
  box-shadow: 0 0 30px rgba(0, 212, 255, .15);
}
.upload-icon {
  font-size: 3rem;
  color: var(--cyan);
  display: block;
  margin-bottom: 16px;
  animation: pulse 2.5s ease-in-out infinite;
}
.upload-title { font-size: 1.2rem; font-weight: 600; margin-bottom: 8px; }
.upload-sub   { color: var(--dim); font-size: .85rem; line-height: 1.8; }

/* ── 35. sim-legend ─────────────────────────────────────────── */
.sim-legend {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 10px;
  font-family: var(--mono);
  font-size: .72rem;
  color: var(--dim);
}
.sim-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  display: inline-block;
  margin-right: 5px;
}

/* ── 36. レスポンシブ ───────────────────────────────────────── */
@media (max-width: 700px) {
  .arr-hdr-row,
  .arrival-row {
    grid-template-columns: 7rem 1fr 1fr 6rem;
  }
  .arr-note { padding-left: 8rem; }
}
@media (max-width: 30rem) {
  .big-number { font-size: clamp(1.6rem, 9vw, 2.6rem); }
  .arrival-row,
  .arr-hdr-row { grid-template-columns: 6rem 1fr 5.5rem; }
  .arr-abs { display: none; }
}

/* ═══════════════════════════════════════════════════════════════
   § RTM  強震モニタ リアルタイム震度マップ
   quakeview.css への追加ブロック（末尾に append すること）
   ─────────────────────────────────────────────────────────────
   Prefix   : rtm-
   依存      : quakeview.css の Design Tokens のみ使用
   追加Token : なし（--red / --green / --amber / --cyan /
               --text / --text-mid / --text-dim / --mono /
               --surface / --border / --bg を再利用）
   ─────────────────────────────────────────────────────────────
   Structure:
     RTM-1. Design Tokens  ← 追加トークンなし（既存変数を明記）
     RTM-2. Layout         ← body / header / main / sidebar
     RTM-3. Components     ← button states / indicator / legend
                              alert / stats / detail
     RTM-4. Utilities      ← error-msg / placeholder / divider
     RTM-5. MapLibre       ← tooltip / popup
═══════════════════════════════════════════════════════════════ */

/* ── RTM-1. Design Tokens ──────────────────────────────────── */
/*
  追加トークンなし。以下の既存変数を使用:
    --bg           ページ背景
    --surface      サイドバー背景
    --border       区切り線
    --cyan         強調値・stat-val
    --green        OK インジケーター・音声ON
    --red          エラー・アラート枠
    --amber        stale インジケーター
    --text         本文テキスト
    --text-mid     ラベルテキスト
    --text-dim     プレースホルダー
    --mono         等幅フォント
*/

/* ── RTM-2. Layout ─────────────────────────────────────────── */

/* 全画面フレックスコンテナ: <body class="rtm-body"> に付与 */
.rtm-body {
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}


/* ヘッダー内の水平レイアウト（quakeview の header 要素に重ねる） */
.rtm-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0 1rem;
  height: var(--header-h);
}

/* ステータスバー（右揃え） */
.rtm-status-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: auto;
}

/* マップ ＋ サイドバーの水平分割 */
.rtm-main {
  display: flex;
  flex: 1;
  overflow: hidden;
}

/* マップ + 凡例オーバーレイのラッパー */
.rtm-map-wrap {
  flex: 1;
  min-width: 0;
  position: relative;
}

/* MapLibre マップ描画領域 */
.rtm-map-area {
  width: 100%;
  height: 100%;
}

/* 凡例オーバーレイ（地図右下） */
.rtm-legend-overlay {
  position: absolute;
  bottom: 28px;
  right: 10px;
  z-index: 500;
  padding: 8px 10px;
  border-radius: 4px;
  background: transparent;
  pointer-events: none;
}

.rtm-legend-overlay-title {
  display: block;
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: .2em;
  color: rgba(219, 230, 247, 0.88);
  text-transform: uppercase;
  margin-bottom: 4px;
  text-shadow: 0 0 4px rgba(0, 0, 0, 0.9);
}

/* 左サイドバー */
.rtm-sidebar {
  width: 240px;
  flex-shrink: 0;
  background: var(--surface);
  border-left: 1px solid var(--border);
  padding: 12px 8px;
  overflow-y: auto;
  font-size: 11px;
}

/* ── RTM-3. Components ─────────────────────────────────────── */

/* ─ 音声トグルボタン状態（quakeview .btn を拡張） ─ */
.rtm-audio-btn.enabled  { border-color: var(--green); color: var(--green); }
.rtm-audio-btn.alerting { border-color: var(--red);   color: var(--red);   }

/* ─ フェッチインジケータードット ─ */
.rtm-indicator {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--green);
  flex-shrink: 0;
  transition: background 0.2s;
}
.rtm-indicator.error { background: var(--red);   }
.rtm-indicator.stale { background: var(--amber); }

/* ─ アラートブロック ─ */
.rtm-alert-block {
  margin-top: 8px;
  padding: 6px 8px;
  border: 1px solid var(--red);
  border-radius: 3px;
}
.rtm-alert-msg {
  color: var(--green);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  margin-top: 4px;
}

/* ─ 凡例アイテム ─ */
.rtm-legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 2px 0;
}
.rtm-legend-item--grad { align-items: flex-start; }

.rtm-legend-swatch {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex-shrink: 0;
  border: 1px solid rgba(255, 255, 255, 0.12);
}
.rtm-legend-label {
  font-size: 10px;
  color: var(--text);
  text-shadow: 0 0 4px rgba(0, 0, 0, 0.95), 0 0 8px rgba(0, 0, 0, 0.8);
}
/* S-net（海底・直前10分の最大）。地図の点と同じく白い縁で陸の観測点と見分ける */
.rtm-legend-swatch.rtm-legend-swatch--snet {
  background: var(--blue);
  border: 2px solid var(--text);
}

/* グラデーションバー（SI -3 〜 0、NIEDカラーマップ準拠） */
.rtm-legend-grad {
  width: 12px;
  height: 48px;
  border-radius: 2px;
  flex-shrink: 0;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: linear-gradient(
    to bottom,
    rgb(56, 245, 62),
    rgb(0, 208, 139),
    rgb(0, 72, 250),
    rgb(0, 0, 205)
  );
}
.rtm-legend-grad-labels {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 48px;
  font-size: 10px;
  color: var(--text);
}

/* 目盛が多いモニタ（最大加速度など）用にカラーバー全域を示す縦長バリアント。
   グラデーション自体はカラーマップから動的に生成して style 属性で与える */
.rtm-legend-grad--full        { height: 168px; }
.rtm-legend-grad-labels--full {
  height: 168px;
  font-size: 9px;
  line-height: 1;
}

/* ─ 統計パネル行 ─ */
.rtm-stat-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 2px 0;
  color: var(--text);
}
.rtm-stat-val {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  color: var(--cyan);
}

/* ─ 観測点詳細行 ─ */
.rtm-detail-row {
  display: flex;
  align-items: baseline;
  gap: 4px;
  padding: 2px 0;
  font-size: 10px;
  color: var(--text);
}
.rtm-detail-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rtm-detail-si {
  font-family: var(--mono);
  font-weight: 700;
  font-size: 11px;
  flex-shrink: 0;
}

/* ── RTM-4. Utilities ──────────────────────────────────────── */

/* 通信エラーテキスト（ヘッダー右端） */
.rtm-error-msg {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--red);
  max-width: 280px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 詳細パネルのデフォルトテキスト */
.rtm-placeholder {
  color: var(--text-dim);
  font-style: italic;
  font-size: 10px;
}

/* サイドバーのセクション区切り線 */
.rtm-divider {
  margin: 10px 0;
  border: none;
  border-top: 1px solid var(--border);
}

/* ── RTM-5. MapLibre Overrides ──────────────────────────────── */

/* マップ背景（quakeview の #08111a を --bg で上書き） */
.rtm-map-area .maplibregl-map { background: var(--bg); }

/* 観測点ホバー用ツールチップ（三角突起を非表示・デザイン統一）
   観測点コードラベルは symbol レイヤ描画に移行したため CSS 不要 */
.qv-tip .maplibregl-popup-tip { display: none; }
.qv-tip .maplibregl-popup-content {
  background: rgba(16, 20, 26, 0.92);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 3px;
  padding: 4px 8px;
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.5;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

/* ═══════════════════════════════════════════════════════════════
   § PERSONAL  アプリ（app/ 一般向け）ナビゲーション
   ─────────────────────────────────────────────────────────────
   Prefix   : personal-
   依存      : quakeview.css の Design Tokens のみ使用
   追加Token : なし
   ─────────────────────────────────────────────────────────────
   Structure:
     PERSONAL-1. Layout    ← nav bar コンテナ
     PERSONAL-2. Components ← nav link states
═══════════════════════════════════════════════════════════════ */

/* ── PERSONAL-1. Layout ─────────────────────────────────────── */

/*
  アプリ（app/）のナビバー。
  rtm-header と同じ flex + height: var(--header-h) を継承しつつ、
  z-index で他ヘッダーより前面に配置する。
  <nav class="rtm-header personal-nav-bar"> に付与。
*/
.personal-nav-bar {
  z-index: 100;
  border-bottom: 1px solid var(--border);
  gap: 8px;
}

/* ── PERSONAL-2. Components ─────────────────────────────────── */

/* ナビリンク共通（<a class="btn personal-nav-link"> に付与） */
.personal-nav-link {
  text-decoration: none;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .08em;
  transition: background .2s, border-color .2s, color .2s;
}

/* 現在ページ（aria-current="page"） */
.personal-nav-link--active {
  border-color: var(--cyan);
  color: var(--cyan);
  background: rgba(0, 212, 255, .08);
}

/* 未作成ページ */
.personal-nav-link--wip {
  opacity: .4;
  cursor: not-allowed;
  pointer-events: none;
}


/* ═══════════════════════════════════════════════════════════════
   § HYPO  震源速報ビューア                    Added: 2026-05-10
   ─────────────────────────────────────────────────────────────
   Prefix   : hypo-
   依存      : quakeview.css Design Tokens のみ
   追加Token : なし
   ─────────────────────────────────────────────────────────────
   Structure:
     HYPO-1. Page layout
     HYPO-2. Date nav bar
     HYPO-3. Controls bar
     HYPO-4. Map / table split
     HYPO-5. Table pane
     HYPO-6. Collapse & resize
     HYPO-7. Responsive
═══════════════════════════════════════════════════════════════ */

/* ── HYPO-1. Page layout ────────────────────────────────────── */

.hypo-page,
.hypo-page body { height: 100%; }

.hypo-page #app {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.hypo-page header {
  padding: 13px 22px 10px;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 10px;
}

/* ── HYPO-2. Date nav bar ───────────────────────────────────── */

.hypo-date-bar {
  flex-shrink: 0;
  background: var(--surface2);
  border-bottom: 1px solid var(--border);
  padding: 7px 22px;
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
}

.hypo-date-label {
  font-family: var(--mono);
  font-size: 9px;
  color: var(--text-dim);
  letter-spacing: .15em;
  margin-right: 2px;
}

.hypo-date-btn {
  font-family: var(--mono);
  font-size: 10px;
  padding: 3px 9px;
  border: 1px solid var(--border2);
  border-radius: 2px;
  cursor: pointer;
  background: transparent;
  color: var(--text-mid);
  transition: all .15s;
  white-space: nowrap;
}
.hypo-date-btn:hover  { border-color: var(--cyan-dim); color: var(--cyan); }
.hypo-date-btn.active { border-color: var(--cyan); color: var(--cyan); background: rgba(0,212,255,.08); }

/* ── HYPO-3. Controls bar ───────────────────────────────────── */

.hypo-controls {
  flex-shrink: 0;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  padding: 8px 22px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.hypo-ctrl-group { display: flex; align-items: center; gap: 6px; }

.hypo-ctrl-label {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .2em;
  color: var(--text-dim);
  white-space: nowrap;
}

/* ── HYPO-4. Map / table split ──────────────────────────────── */

.hypo-page #main {
  flex: 1;
  display: flex;
  overflow: hidden;
}

.hypo-page #map-pane {
  flex: 1;
  min-width: 0;
  position: relative;
}

.hypo-page #map {
  width: 100%;
  height: 100%;
  background: #08111a;
}

/* ── HYPO-5. Table pane ─────────────────────────────────────── */

.hypo-page #table-pane {
  width: 460px;
  flex-shrink: 0;
  border-left: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: width .25s cubic-bezier(.4,0,.2,1);
}

.hypo-tbl-header {
  flex-shrink: 0;
  padding: 6px 12px;
  background: var(--surface2);
  border-bottom: 1px solid var(--border);
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .2em;
  color: var(--text-dim);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.hypo-tbl-scroll {
  flex: 1;
  overflow-y: auto;
  overflow-x: auto;
}

#quake-tbl thead tr { background: var(--surface); border-bottom: 1px solid var(--cyan-dim); }
#quake-tbl th       { font-size: 8px; letter-spacing: .2em; color: var(--text-dim); padding: 7px 8px; }
#quake-tbl td       { padding: 6px 8px; }
#quake-tbl tbody tr { border-bottom: 1px solid rgba(24,37,53,.8); animation: rowIn .2s ease both; }

/* ── HYPO-6. Collapse & resize ──────────────────────────────── */

.hypo-page #table-pane.collapsed                            { width: 30px !important; min-width: 30px; }
.hypo-page #table-pane.collapsed .hypo-tbl-scroll          { display: none; }
.hypo-page #table-pane.collapsed .hypo-tbl-header-title    { display: none; }
.hypo-page #table-pane.collapsed #table-count              { display: none; }
.hypo-page #table-pane.collapsed .hypo-tbl-header          { justify-content: center; padding: 6px 4px; }

#btn-collapse-panel {
  background: transparent;
  border: 1px solid var(--border2);
  border-radius: 2px;
  color: var(--text-dim);
  font-size: 10px;
  cursor: pointer;
  padding: 1px 5px;
  line-height: 1;
  transition: border-color .15s, color .15s;
  flex-shrink: 0;
}
#btn-collapse-panel:hover { border-color: var(--cyan-dim); color: var(--cyan); }

#resizer {
  width: 5px;
  background: var(--border);
  cursor: col-resize;
  flex-shrink: 0;
  transition: background .2s;
}
#resizer:hover { background: var(--cyan-dim); }

/* ── HYPO-7. Responsive ─────────────────────────────────────── */

@media (max-width: 700px) {
  .hypo-page #main       { flex-direction: column; }
  /* flex:1 のままだと min-content が数千 px ある #table-pane に押し負けて
     height:45vh が無視され、地図の高さが 0 になる */
  .hypo-page #map-pane   { flex: none; height: 45vh; min-height: 220px; }
  .hypo-page #resizer    { display: none; }
  .hypo-page #table-pane {
    width: 100%;
    flex: 1;
    min-height: 0;
    border-left: none;
    border-top: 1px solid var(--border);
  }
}


/* ═══════════════════════════════════════════════════════════════
   § VIZ  地震データ可視化ダッシュボード        Added: 2026-05-10
   ─────────────────────────────────────────────────────────────
   Prefix   : viz-
   依存      : quakeview.css Design Tokens のみ
   追加Token : --accent2: #ff4757 (エラー/警告赤)
   ─────────────────────────────────────────────────────────────
   Structure:
     VIZ-1.  Token overrides
     VIZ-2.  Header
     VIZ-3.  Upload section
     VIZ-4.  Mapping modal
     VIZ-5.  Tab panes / ETAS
     VIZ-6.  Dashboard layout
     VIZ-7.  Filter sidebar
     VIZ-8.  Chart grid & map
     VIZ-9.  Data table
     VIZ-10. Quick buttons
═══════════════════════════════════════════════════════════════ */

/* ── VIZ-1. Token overrides ─────────────────────────────────── */

.viz-page { --accent2: #ff4757; }

/* ── VIZ-2. Header ──────────────────────────────────────────── */

.viz-page header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  position: fixed;
  top: 0;
  z-index: 1100;
  width: 100%;
  box-sizing: border-box;
}

.viz-page #stats-bar {
  display: flex;
  gap: 28px;
  align-items: center;
  font-family: var(--mono);
  font-size: .78rem;
}

.viz-page .stat           { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.viz-page .stat-label     { color: var(--dim); font-size: .62rem; letter-spacing: 1px; line-height: 1; }
.viz-page .stat-value     { color: var(--cyan); font-size: 1.0rem; line-height: 1; }
.viz-page .stat-value--sm { font-size: .88rem; line-height: 1; }

.viz-page #header-tabs {
  display: flex;
  gap: 4px;
  background: rgba(0,0,0,.2);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 3px;
}

.viz-page .header-tab-btn {
  padding: 5px 18px;
  background: transparent;
  border: none;
  border-radius: 2px;
  color: var(--dim);
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: 2px;
  cursor: pointer;
  transition: all .2s;
  text-transform: uppercase;
}
.viz-page .header-tab-btn.active          { background: rgba(0,212,255,.12); color: var(--cyan); }
.viz-page .header-tab-btn:hover:not(.active) { color: var(--text); }

.viz-page #reload-btn {
  font-family: var(--mono);
  font-size: .72rem;
  color: var(--dim);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 6px 14px;
  cursor: pointer;
  letter-spacing: 1px;
  transition: all .2s;
}
.viz-page #reload-btn:hover { border-color: var(--cyan); color: var(--cyan); }

/* ── VIZ-3. Upload section ──────────────────────────────────── */

.viz-page #upload-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 96px 40px 60px;
  transition: all .4s ease;
}
.viz-page #upload-section.hidden { display: none; }

/* ── VIZ-4. Mapping modal ───────────────────────────────────── */

.viz-page #mapping-modal {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.8);
  backdrop-filter: blur(4px);
  z-index: 9000;
  align-items: center;
  justify-content: center;
}
.viz-page #mapping-modal.open { display: flex; }

.modal-box {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 36px 40px;
  width: 520px;
  max-width: 95vw;
  box-shadow: 0 20px 60px rgba(0,0,0,.6);
}

.modal-title {
  font-family: var(--mono);
  color: var(--cyan);
  letter-spacing: 2px;
  font-size: .85rem;
  text-transform: uppercase;
  margin-bottom: 24px;
}

.map-row   { display: flex; align-items: center; margin-bottom: 14px; gap: 12px; }
.map-label { color: var(--dim); font-size: .82rem; width: 120px; flex-shrink: 0; }
.map-row select {
  flex: 1;
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 7px 10px;
  border-radius: 3px;
  font-family: var(--mono);
  font-size: .8rem;
  outline: none;
}
.map-row select:focus { border-color: var(--cyan); }

/* ── VIZ-5. Tab panes / ETAS ────────────────────────────────── */

.tab-pane        { display: none; width: 100%; }
.tab-pane.active { display: block; width: 100%; }

.etas-load-box {
  border: 1px dashed var(--amber);
  border-radius: 4px;
  padding: 48px 40px;
  text-align: center;
  background: rgba(255,165,2,.03);
  cursor: pointer;
  transition: all .2s;
  max-width: 600px;
  margin: 60px auto;
  width: 100%;
  box-sizing: border-box;
}
.etas-load-box:hover { background: rgba(255,165,2,.07); }

/* ── VIZ-6. Dashboard layout ────────────────────────────────── */

.viz-page #dashboard         { display: none; width: 100%; max-width: 100%; box-sizing: border-box; padding-top: 56px; }
.viz-page #dashboard.visible { display: block; }
.viz-page .etas-inner        { padding: 24px 5%; width: 100%; box-sizing: border-box; }
.viz-page #viz-layout        { display: flex; align-items: stretch; width: 100%; min-height: calc(100vh - 56px); }

/* ── VIZ-7. Filter sidebar ──────────────────────────────────── */

.viz-page #filter-bar {
  width: 220px;
  min-width: 220px;
  background: var(--surface);
  border-right: 1px solid var(--border);
  padding: 20px 14px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 0;
  position: fixed;
  top: 56px;
  left: 0;
  height: calc(100vh - 56px);
  overflow-y: auto;
  z-index: 100;
}
.viz-page #filter-bar::-webkit-scrollbar       { width: 3px; }
.viz-page #filter-bar::-webkit-scrollbar-thumb { background: var(--border); }

.viz-page #viz-main {
  flex: 1;
  margin-left: 220px;
  min-width: 0;
  width: calc(100% - 220px);
  padding: 24px 20px;
  box-sizing: border-box;
  overflow-x: hidden;
}

.viz-page .filter-row { display: flex; flex-direction: column; gap: 0; flex: 1; }

.viz-page .filter-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
}
.viz-page .filter-section:last-of-type { border-bottom: none; }

.filter-section-label {
  color: var(--amber);
  font-family: var(--mono);
  font-size: .62rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 2px;
}

.viz-page .filter-section--btns {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 16px;
  margin-top: auto;
}

.viz-page #apply-filter {
  padding: 8px;
  background: transparent;
  border: 1px solid var(--cyan);
  color: var(--cyan);
  border-radius: 3px;
  cursor: pointer;
  font-family: var(--mono);
  font-size: .75rem;
  letter-spacing: 1px;
  transition: all .2s;
  width: 100%;
}
.viz-page #apply-filter:hover { background: rgba(0,212,255,.1); }

.viz-page #reset-btn {
  padding: 8px;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--dim);
  border-radius: 3px;
  cursor: pointer;
  font-family: var(--mono);
  font-size: .75rem;
  letter-spacing: 1px;
  transition: all .2s;
  width: 100%;
}
.viz-page #reset-btn:hover { border-color: var(--accent2); color: var(--accent2); }

.viz-page #csv-export-btn {
  margin-left: 16px;
  padding: 4px 14px;
  background: transparent;
  border: 1px solid var(--green);
  color: var(--green);
  border-radius: 3px;
  cursor: pointer;
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: 1px;
  transition: all .2s;
}
.viz-page #csv-export-btn:hover { background: rgba(46,213,115,.12); }

/* ── VIZ-8. Chart grid & map ────────────────────────────────── */

.viz-page .grid-2    { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 20px; }
.viz-page .grid-3    { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 20px; margin-bottom: 20px; }
.viz-page .full-width { margin-bottom: 24px; width: 100%; box-sizing: border-box; }

.viz-page #map                   { height: 82vh; min-height: 400px; width: 100%; }
.viz-page .chart-wrap            { position: relative; height: 52vh; min-height: 330px; width: 100%; }
.viz-page .chart-wrap-wide       { position: relative; height: 75vh; min-height: 390px; width: 100%; }
.viz-page .chart-wrap-timeseries { position: relative; height: 75vh; min-height: 390px; width: 100%; }

/* ── VIZ-9. Data table ──────────────────────────────────────── */

.viz-page #table-wrap { max-height: 45vh; overflow-y: auto; }
.viz-page #table-wrap::-webkit-scrollbar       { width: 4px; }
.viz-page #table-wrap::-webkit-scrollbar-track { background: var(--bg); }
.viz-page #table-wrap::-webkit-scrollbar-thumb { background: var(--border); }

.viz-page #data-table thead th {
  background: var(--bg);
  color: var(--dim);
  font-size: .65rem;
  letter-spacing: 1px;
  padding: 8px 12px;
  text-align: left;
  position: sticky;
  top: 0;
}
.viz-page #data-table tbody tr       { border-bottom: 1px solid var(--border); transition: background .15s; }
.viz-page #data-table tbody tr:hover { background: rgba(0,212,255,.04); }
.viz-page #data-table tbody td       { padding: 7px 12px; color: var(--text); }

/* ── VIZ-10. Quick buttons ──────────────────────────────────── */

.viz-quick-btn {
  flex: 1 1 auto;
  min-width: 0;
  padding: 4px 6px;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-dim);
  border-radius: 3px;
  font-family: var(--mono);
  font-size: .62rem;
  letter-spacing: .5px;
  cursor: pointer;
  transition: border-color .15s, color .15s, background .15s;
  white-space: nowrap;
}
.viz-quick-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: rgba(0,212,255,.07);
}

.viz-page #db-requery-section .filter-group { margin-bottom: 6px; }


/* ═══════════════════════════════════════════════════════════════
   § ET  経過タイマー・波面伝播モニタ           Added: 2026-05-10
   ─────────────────────────────────────────────────────────────
   Prefix   : et-
   依存      : quakeview.css Design Tokens のみ
   追加Token : --accent2: #ff6b35 (オレンジアクセント)
               --et-phase-color  (JSから動的に設定)
               --et-mag-color    (JSから動的に設定)
               --et-badge-color  (JSから動的に設定)
               --et-line-color   (HTML style属性から設定)
   ─────────────────────────────────────────────────────────────
   Structure:
     ET-1. Page layout
     ET-2. XML import カード
     ET-3. イベントリスト
     ET-4. イベント行
     ET-5. マグニチュードバッジ
     ET-6. マップカード & 凡例
     ET-7. 到着時刻リスト
     ET-8. コントロール
     ET-9. Responsive
═══════════════════════════════════════════════════════════════ */

/* ── ET-1. Page layout ──────────────────────────────────────── */

.et-page {
  --accent2: #ff6b35;
  display: grid;
  gap: 1rem;
  padding: 1.25rem clamp(.75rem, 3vw, 2rem);
  background-image:
    linear-gradient(rgba(0,229,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,229,255,.025) 1px, transparent 1px);
  background-size: 40px 40px;
}

/* ── ET-2. XML import カード ────────────────────────────────── */

.et-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: .6rem;
}

.et-btn-group { display: flex; align-items: center; gap: .4rem; }

.et-btn-sm {
  padding: 3px 10px;
  font-size: .7rem;
  letter-spacing: .5px;
}

.et-or-sep {
  font-family: var(--mono);
  font-size: .65rem;
  color: var(--dim);
}

.et-file-label {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: 3px 10px;
  border: 1px solid var(--border);
  border-radius: 3px;
  font-family: var(--mono);
  font-size: .7rem;
  color: var(--text-mid);
  cursor: pointer;
  transition: border-color .15s, color .15s;
}
.et-file-label:hover { border-color: var(--cyan-dim); color: var(--cyan); }

.et-url-row {
  display: flex;
  gap: .4rem;
  align-items: center;
  margin-bottom: .4rem;
}

.et-status-text {
  font-family: var(--mono);
  font-size: .68rem;
  color: var(--text-dim);
  margin-top: .3rem;
  min-height: 1.2em;
}

/* ── ET-3. イベントリスト ───────────────────────────────────── */

.et-event-list {
  display: flex;
  flex-direction: column;
  gap: .25rem;
  max-height: 14rem;
  overflow-y: auto;
  margin-top: .4rem;
}
.et-event-list::-webkit-scrollbar       { width: 3px; }
.et-event-list::-webkit-scrollbar-thumb { background: var(--border); }

.et-event-placeholder {
  font-family: var(--mono);
  font-size: .72rem;
  color: var(--dim);
  padding: .5rem 0;
}

/* ── ET-4. イベント行 ───────────────────────────────────────── */

.et-event-row {
  display: flex;
  flex-direction: column;
  gap: .18rem;
  padding: .42rem .55rem;
  border: 1px solid var(--border);
  border-radius: 3px;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.et-event-row:hover { border-color: var(--cyan-dim); background: rgba(0,212,255,.04); }
.et-selected        { border-color: var(--cyan); background: rgba(0,212,255,.07); }

@keyframes etFlash {
  0%, 100% { background: transparent; }
  30%       { background: rgba(0,212,255,.18); }
}
.et-flash { animation: etFlash .6s ease; }

.et-event-top {
  display: flex;
  align-items: center;
  gap: .45rem;
  flex-wrap: wrap;
}

.et-event-mag {
  font-family: var(--mono);
  font-size: .95rem;
  font-weight: 600;
  color: var(--et-mag-color, var(--cyan));
  line-height: 1;
  flex-shrink: 0;
}

.et-event-time {
  font-family: var(--mono);
  font-size: .68rem;
  color: var(--text-dim);
}

.et-event-region {
  font-size: .78rem;
  color: var(--text);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 震央地名を1行に収めず折り返す（行を分けて表示するレイアウト用） */
.et-event-region--wrap {
  flex: none;
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: 1.35;
}

/* マグニチュード行に並べたバッジは上マージンを詰める */
.et-event-top .et-mag-badges { margin-top: 0; }

.et-event-meta { display: flex; gap: .6rem; flex-wrap: wrap; }

.et-event-meta-item {
  font-family: var(--mono);
  font-size: .62rem;
  color: var(--text-dim);
}

/* ── ET-5. マグニチュードバッジ ─────────────────────────────── */

.et-mag-badges { display: flex; gap: .25rem; flex-wrap: wrap; margin-top: .1rem; }

.et-mag-badge {
  font-family: var(--mono);
  font-size: .6rem;
  padding: 1px 5px;
  border: 1px solid var(--et-badge-color, var(--border));
  border-radius: 2px;
  color: var(--et-badge-color, var(--text-dim));
  line-height: 1.4;
}
.et-mag-badge--main { font-weight: 600; background: rgba(0,212,255,.1); }

/* 代表値に採らなかった参考値（1点推定・他種別と整合しない値） */
.et-mag-badge--weak { opacity: .45; border-style: dashed; }

/* ── ET-6. マップカード & 凡例 ──────────────────────────────── */

#map-card { padding: .85rem 1rem; }

#wavefront-map {
  height: clamp(16rem, 55vh, 52rem);
  border-radius: 3px;
  border: 1px solid var(--border);
}

.et-map-legend {
  display: flex;
  gap: .6rem;
  flex-wrap: wrap;
  align-items: center;
}

.et-legend-item {
  display: flex;
  align-items: center;
  gap: .3rem;
  font-family: var(--mono);
  font-size: .65rem;
  color: var(--text-dim);
}

.et-legend-line {
  display: inline-block;
  width: 20px;
  height: 2px;
  background: var(--et-line-color, var(--border));
  border-radius: 1px;
  flex-shrink: 0;
}

.et-map-status {
  font-family: var(--mono);
  font-size: .68rem;
  color: var(--text-dim);
  margin-top: .3rem;
  min-height: 1em;
}

/* ── ET-7. 到着時刻リスト ───────────────────────────────────── */

.et-arr-hdr    { font-family: var(--mono); font-size: .65rem; letter-spacing: .1em; color: var(--text-dim); }
.et-text-right { text-align: right; }

/* 到着行の左ボーダーに phase color を適用 */
.et-page .arrival-row { border-left: 2px solid var(--et-phase-color, var(--border)); }

/* ── ET-8. コントロール ─────────────────────────────────────── */

.et-page .controls-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: .6rem;
}

.et-page .input-row {
  display: flex;
  gap: .4rem;
  align-items: center;
  margin-bottom: .38rem;
}

/* 行内の入力欄は均等分割（幅 0 起点にしないと狭い画面でカードからはみ出す）。
   max-width は広い画面で入力欄が間延びしないための上限 */
.et-page .input-row input[type="number"],
.et-page .input-row input[type="datetime-local"] {
  flex: 1;
  width: 0;
  min-width: 0;
  max-width: 12rem;
  font-size: .78rem;
  padding: .38rem .58rem;
}

.et-page hr.divider { border: none; border-top: 1px solid var(--border); margin: .6rem 0; }

.et-page .breakdown {
  display: flex;
  justify-content: center;
  gap: .8rem;
  flex-wrap: wrap;
  margin: .45rem 0 .6rem;
}
.et-page .unit     { text-align: center; }
.et-page .unit-val {
  font-family: var(--mono);
  font-size: clamp(.85rem, 1.8vw, 1.1rem);
  color: var(--text);
  display: block;
}
.et-page .unit-lbl { font-size: .5rem; letter-spacing: .15em; color: var(--dim); text-transform: uppercase; }
.et-page .unit-sep {
  font-family: var(--mono);
  font-size: clamp(.85rem, 1.8vw, 1.1rem);
  color: var(--text-dim);
  align-self: flex-start;
}

.et-origin-display {
  font-family: var(--mono);
  font-size: .75rem;
  color: var(--cyan);
  margin: .25rem 0;
}

.et-mt-sm { margin-top: .4rem; }

.et-btn-auto-active {
  border-color: var(--cyan) !important;
  color: var(--cyan) !important;
  background: rgba(0,212,255,.1) !important;
}

#xml-card input[type="text"] {
  flex: 1;
  min-width: 0;
  font-size: .72rem;
  padding: .38rem .58rem;
}

/* ── ET-9. Responsive ───────────────────────────────────────── */

@media (max-width: 44rem) {
  .et-page .controls-row { grid-template-columns: 1fr; }
}

/* ── MAP-Scale. 緯度経度デュアルスケールバー ────────────────── */
.ds-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 5px 7px 3px;
  background: transparent;
  border: none;
  border-radius: 4px;
  pointer-events: none;
  user-select: none;
}
.ds-lat-label {
  font-family: var(--mono);
  font-size: 0.60rem;
  color: var(--text-dim);
  white-space: nowrap;
  padding-left: 4px;
  margin-bottom: 2px;
}
.ds-L {
  border-left: 2px solid rgba(200, 216, 240, 0.55);
  border-bottom: 2px solid rgba(200, 216, 240, 0.55);
  /* width / height set by JS */
}
.ds-lon-label {
  font-family: var(--mono);
  font-size: 0.60rem;
  color: var(--text-dim);
  white-space: nowrap;
  text-align: right;
  margin-top: 2px;
  padding-left: 2px;
  /* width set by JS to match horizontal bar */
}

/* ── MAP-Graticule. 緯度経度グリッド ────────────────────────── */
/* グリッド線・ラベルは MapLibre の line / symbol レイヤで描画するため
   CSS は持たない（色は js/qv_map.js の createGraticule 引数で指定）。 */

/* ── MAP-Marker. HTML マーカー（震源の × 印など） ───────────── */
.qv-html-marker {
  line-height: 0;
  pointer-events: auto;
  user-select: none;
}

/* 現在地マーカー（波面マップ。旧 elapsed_timer 由来） */
.et-station-dot {
  display: block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #0a0c0f;
  border: 2px solid var(--cyan);
  box-sizing: border-box;
}

/* ── MAP-Ctrl. MapLibre 標準 UI のダークテーマ化 ─────────────── */
.maplibregl-ctrl-group {
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: none;
}
.maplibregl-ctrl-group button + button { border-top: 1px solid var(--border); }
.maplibregl-ctrl-group button:hover    { background: var(--surface2); }
/* MapLibre のアイコンは暗色 SVG のため、暗背景では反転して使う */
.maplibregl-ctrl-group button .maplibregl-ctrl-icon { filter: invert(1) brightness(0.85); }

.maplibregl-ctrl-attrib {
  background: rgba(10, 14, 20, 0.72);
  color: var(--text-dim);
  font-family: var(--sans);
  font-size: 10px;
}
.maplibregl-ctrl-attrib a { color: var(--text-mid); }
.maplibregl-ctrl-attrib-button { filter: invert(1) brightness(0.85); }


/* ═══════════════════════════════════════════════════════════════
   § EEW  緊急地震速報パネル                    Added: 2026-05-19
                                                 Updated: 2026-08-09
   ─────────────────────────────────────────────────────────────
   Prefix   : eew-
   依存      : quakeview.css Design Tokens のみ
   追加Token : なし
   ─────────────────────────────────────────────────────────────
   Structure:
     EEW-1. Panel container & color states
     EEW-2. Header row（報数 / 発生・発表時刻）
     EEW-3. Main row（震度ボックス / マグニチュード）
     EEW-4. Footer（震源地 + 緯度経度 + 深さ）
     EEW-5. Unimplemented placeholder
     EEW-6. Top-5 observation list
═══════════════════════════════════════════════════════════════ */

/* ── EEW-1. Panel container & color states ──────────────────── */

.eew-panel {
  border: 2px solid var(--border2);
  border-radius: 5px;
  padding: 8px 10px;
  margin-bottom: 8px;
  background: var(--surface);
  transition: border-color .3s, box-shadow .3s;
}
.eew-panel--none  { border-color: var(--border2); }
.eew-panel--yoho  { border-color: var(--yellow); }
.eew-panel--keiho {
  border-color: var(--red);
  box-shadow: 0 0 10px rgba(255, 76, 76, .25);
}

/* ── EEW-2. Header row（報数 / 発生・発表時刻） ───────────────── */

.eew-header-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: 2px 8px;
  margin-bottom: 6px;
}

.eew-report-num {
  flex-shrink: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--mono);
  font-size: .75rem;
  color: var(--text-mid);
}

.eew-time-col {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  /* 行が足りないときは報数の下に折り返す。折り返しても右寄せを保つ */
  margin-left: auto;
}

.eew-time-row {
  display: flex;
  align-items: baseline;
  gap: 4px;
}

.eew-time-val {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--text);
}

.eew-time-label {
  font-family: var(--sans);
  font-size: 9px;
  color: var(--text-dim);
}

/* ── EEW-3. Main row（震度ボックス / マグニチュード） ─────────── */

.eew-main-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}

.eew-intensity-box {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border2);
  border-radius: 4px;
  padding: 6px;
  background: rgba(0, 0, 0, .2);
}

.eew-intensity {
  font-family: var(--mono);
  font-size: 1.7rem;
  font-weight: 700;
  line-height: 1;
  color: var(--text-mid);
  transition: color .3s;
}
.eew-panel--yoho  .eew-intensity { color: var(--yellow); }
.eew-panel--keiho .eew-intensity { color: var(--red); text-shadow: 0 0 8px rgba(255, 76, 76, .5); }

.eew-mag {
  flex: 1;
  min-width: 0;
  font-family: var(--mono);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text);
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── EEW-4. Footer（震源地 + 緯度経度 + 深さ） ────────────────── */

.eew-footer {
  font-family: var(--sans);
  font-size: .68rem;
  line-height: 1.4;
  color: var(--text-dim);
  text-align: center;
  /* 240px サイドバーでは1行に収まらないことがあるため、省略せず折り返す
     （震源地・緯度経度・深さは省略したくない情報のため） */
  white-space: normal;
  word-break: break-word;
}

/* 震央地名は EEW で最も読ませたい情報のため、footer 内で単独行にして強調する */
.eew-region {
  display: block;
  font-size: .95rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: .02em;
  color: var(--text);
}
.eew-panel--yoho  .eew-region { color: var(--yellow); }
.eew-panel--keiho .eew-region { color: var(--red); text-shadow: 0 0 8px rgba(255, 76, 76, .5); }

/* 緯度経度・深さは補助情報なので従来どおり控えめに */
.eew-coords {
  display: block;
  margin-top: 2px;
  font-family: var(--mono);
  font-size: .66rem;
  color: var(--text-dim);
}

/* ── EEW-5. Unimplemented placeholder ───────────────────────── */

.eew-unimpl-panel {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
}

.eew-unimpl-text {
  font-family: var(--sans);
  font-size: .72rem;
  color: var(--text-dim);
  text-align: center;
  line-height: 1.6;
}

/* ── EEW-6. Top-5 observation list ─────────────────────────── */

.rtm-top5-item {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 2px 0;
}

.rtm-top5-swatch {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  border: 1px solid rgba(255, 255, 255, .1);
}

.rtm-top5-name {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* 区域名: 左詰め・省略しない（サイズは現状維持、視認性のため薄色にしない） */
.rtm-top5-area {
  flex-shrink: 0;
  font-size: 10px;
  color: var(--text);
  white-space: nowrap;
}

/* 観測点名: 左詰め・区域名からはみ出た分は自身の領域内で省略する */
.rtm-top5-loc {
  flex: 1;
  min-width: 0;
  font-size: 15px;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 観測網名（K-NET / KiK-net）: 地点名の前に小さく添える。
   地点名と同じ15pxだと横幅を食って地点名が省略されるため一段小さくする */
.rtm-top5-net {
  font-size: 10px;
  color: var(--text-mid);
  margin-right: 3px;
}

/* 震度値: 符号の有無で末尾がずれないよう固定幅・右詰め */
.rtm-top5-val {
  font-family: var(--mono);
  font-size: 15px;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
  width: 34px;
  text-align: right;
}

/* 行の右端に併記する副次値（震度ランキングに最大加速度を並べる等）。
   文字サイズは区域名に揃える。色は値に応じてカラーマップから
   style 属性で与えるため、ここでは指定しない（未指定時のみ --text） */
.rtm-top5-sub {
  flex-shrink: 0;
  margin-left: auto;
  padding-left: 6px;
  font-family: var(--mono);
  font-size: 10px;
  font-variant-numeric: tabular-nums;
  color: var(--text);
  white-space: nowrap;
  text-align: right;
}

/* カラーマップ上端の濃い赤は輝度が低く暗色背景に沈むため、白で縁取って読ませる。
   text-stroke と違い text-shadow の4方向オフセットは字画を細らせないので、
   10px の小さな数字でも潰れない */
.rtm-top5-sub--outlined {
  text-shadow:
     1px  0    0 var(--text),
    -1px  0    0 var(--text),
     0    1px  0 var(--text),
     0   -1px  0 var(--text);
}

/* 単位付きの値（最大加速度など）: 数値と単位を必ず1行に収める。
   単位は小さめにして観測点名の欄を圧迫しないようにする */
.rtm-top5-val--unit {
  width: 58px;
  white-space: nowrap;
}
.rtm-top5-unit {
  font-family: var(--sans);
  font-size: 10px;
  margin-left: 2px;
}


/* ═══════════════════════════════════════════════════════════════
   § LMONI  長周期地震動モニタ                   Added: 2026-05-20
   ─────────────────────────────────────────────────────────────
   Prefix   : lmoni-
   依存      : quakeview.css Design Tokens のみ
   追加Token : なし
   ─────────────────────────────────────────────────────────────
   Structure:
     LMONI-1. 参照画像ウィジェット
     LMONI-2. ヘッダー タイムスタンプ
═══════════════════════════════════════════════════════════════ */

/* ── LMONI-1. 参照画像ウィジェット ─────────────────────────── */

.lmoni-ref-wrap {
  margin: 4px 0;
}

.lmoni-ref-img {
  width: 100%;
  display: block;
  border: 1px solid var(--border);
  border-radius: 2px;
  background: var(--bg);
  image-rendering: pixelated;
}

/* ── LMONI-2. 検出色パレット ────────────────────────────────── */

.lmoni-palette {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  margin: 4px 0;
}

.lmoni-palette-swatch {
  width: 12px;
  height: 12px;
  border-radius: 1px;
  flex-shrink: 0;
  cursor: default;
  border: 1px solid rgba(0, 0, 0, 0.35);
}

/* ── LMONI-3. ヘッダー タイムスタンプ ──────────────────────── */

.lmoni-img-time {
  font-family: var(--mono);
  font-size: 9px;
  color: var(--text-dim);
  white-space: nowrap;
  letter-spacing: .02em;
}


/* ═══════════════════════════════════════════════════════════════
   § MOBILE  スマホ向けレスポンシブレイヤー         Added: 2026-05-22
   ─────────────────────────────────────────────────────────────
   Breakpoints:
     600px  スマートフォン縦持ち（主ターゲット）
     900px  タブレット / スマートフォン横持ち補助
   ─────────────────────────────────────────────────────────────
   対象ページ: RTM / LMONI / HYPO / VIZ / ET
   原則: 構造変更は flex order で、JS・HTML は変更しない
═══════════════════════════════════════════════════════════════ */

/* ── MOB-1. 共通 header ─────────────────────────────────────── */
@media (max-width: 600px) {
  header {
    flex-wrap: wrap;
    gap: 4px 10px;
  }
  h1 {
    font-size: 13px;
    letter-spacing: .02em;
  }
  h1 small { display: none; }
  .logo-tag { display: none; }
  .header-divider { margin: 0 8px 2px; height: 20px; }
  .header-right { margin-left: auto; }
}

/* ── MOB-2. RTM / LMONI — マップ + サイドバー ──────────────── */
@media (max-width: 600px) {
  /* body: 100vh フルスクリーンを維持（スクロール不要） */
  /* .rtm-body は変更なし: height:100vh; overflow:hidden; を保持 */

  /* main: 横並び → 縦積みに変更（フルハイトは維持） */
  .rtm-main {
    flex-direction: column;
    overflow: hidden;
  }
  /* マップを先頭に（DOM順がサイドバー→マップのため order で逆転） */
  .rtm-map-wrap {
    order: 1;
    flex: none;
    height: 65vh;
    min-height: 240px;
    position: relative;
  }
  .rtm-map-area { height: 100%; }
  /* .rtm-map-wrap を挟まず .rtm-map-area を直接 .rtm-main の子に置くページ
     （app/realtime.html）向け。上のラッパー用ルールが効かず
     サイドバーが 21px まで潰れるため、同等の高さ配分をここで与える */
  .rtm-main > .rtm-map-area {
    order: 1;
    flex: none;
    height: 55vh;
    min-height: 240px;
  }
  /* サイドバー: 全幅・残りスペースを埋める */
  .rtm-sidebar {
    order: 2;
    flex: 1;
    width: 100%;
    border-left: none;
    border-top: 1px solid var(--border);
    overflow-y: auto;
    padding: 10px 12px;
  }
  /* ヘッダー */
  .rtm-header {
    height: auto;
    min-height: var(--header-h-mob);
    padding: .38rem .62rem;
    flex-wrap: wrap;
    gap: .25rem .5rem;
  }
  .rtm-status-bar {
    gap: 6px;
    flex-wrap: wrap;
    margin-left: auto;
  }
  #rtm-clock,
  #lmoni-clock { font-size: 10px; }
  .rtm-audio-btn { font-size: 9px; padding: 2px 7px; }
  .lmoni-img-time { font-size: 8px; }
}

/* ── MOB-3. HYPO — コントロールバー折り返し ─────────────────── */
@media (max-width: 700px) {
  .hypo-page header {
    padding: 8px 14px;
    flex-wrap: wrap;
    gap: 6px;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  /* コントロール行を折り返し */
  .hypo-controls {
    flex-wrap: wrap;
    padding: 8px 12px;
    gap: 6px 10px;
    height: auto;
  }
  /* datetime-local を圧縮（inline style を上書き） */
  .hypo-controls input[type="datetime-local"] {
    width: 9rem !important;
    font-size: 9px;
  }
  #count-info { margin-left: 0; }

  /* 震源テーブル: 既定パディングだと 400px になり 375px 画面に収まらない
     （震度列が横スクロールしないと見えない）ため詰めて 1 画面に収める */
  #quake-tbl          { width: 100%; }
  #quake-tbl th,
  #quake-tbl td       { padding: 6px 4px; }
  #quake-tbl td:nth-child(2) {
    max-width: 8.5rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

/* ── MOB-4. VIZ — ヘッダー + フィルタバー ───────────────────── */
@media (max-width: 600px) {
  /* fixed ヘッダーを折り返し可能に */
  .viz-page header {
    flex-wrap: wrap;
    gap: 6px 10px;
    padding: 8px 12px;
    height: auto;
    min-height: 48px;
  }
  /* 統計バーは非表示（モバイルには幅不足） */
  .viz-page #stats-bar { display: none; }
  /* ダッシュボードのオフセットを合わせる */
  .viz-page #dashboard { padding-top: 52px; }
  .viz-page #header-tabs { order: 2; }
  .viz-page #reload-btn  { margin-left: 0; order: 3; }

  /* フィルタバー: 固定サイドバー → 通常フローの上部スクロール帯に。
     position:fixed と #viz-main の margin-left:220px を解除しないと
     本文が 155px 幅に潰れてグラフが読めなくなる */
  .viz-page #viz-layout {
    flex-direction: column;
    min-height: 0;
  }
  .viz-page #filter-bar {
    position: static;
    width: 100%;
    min-width: 0;
    height: auto;
    max-height: 200px;
    overflow-y: auto;
    border-right: none;
    border-bottom: 1px solid var(--border);
  }
  .viz-page #viz-main {
    margin-left: 0;
    width: 100%;
    padding: 12px;
  }

  /* チャートグリッドを1カラムに */
  .viz-page .grid-2,
  .viz-page .grid-3 { grid-template-columns: 1fr; gap: 14px; }

  /* 地図・グラフ高さ: 75〜82vh のままだと幅 309px に対して縦 609px の
     極端な縦長になるため、横長寄りに詰める */
  .viz-page #map {
    height: 55vh;
    min-height: 300px;
  }
  .viz-page .chart-wrap,
  .viz-page .chart-wrap-wide,
  .viz-page .chart-wrap-timeseries {
    height: 38vh;
    min-height: 230px;
  }

  /* アップロードセクション */
  .viz-page #upload-section {
    flex-direction: column;
    align-items: stretch;
    padding: 14px 12px;
    gap: 12px;
  }
  /* DB クエリパネル内グリッドを1カラム化 */
  .viz-page .panel-body .filter-group { width: 100%; }

  /* datetime-local は UA 既定の最小幅が広く、grid の 1fr トラック
     （= minmax(auto,1fr)）を押し広げて画面外にはみ出すため縮小を許可する */
  .viz-page .filter-group { min-width: 0; }
  .viz-page .filter-group input,
  .viz-page .filter-group select {
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }
}

/* ── MOB-5. ET — 到着フェーズ列調整 ─────────────────────────── */
/* section 36 の既存ブレークポイントを補完 */
@media (max-width: 480px) {
  .et-page {
    padding: .75rem .6rem;
  }
  /* マップ高さを圧縮 */
  #wavefront-map {
    height: clamp(14rem, 50vw, 20rem);
  }
}

/* ── 37. 潮位観測ビューア (tide_viewer) ─────────────────────── */

/* Layout */
.tide-body {
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
}
.tide-header {
  padding: 10px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-shrink: 0;
  flex-wrap: wrap;
}
.tide-main {
  display: flex;
  flex: 1;
  overflow: hidden;
}

/* Sidebar */
.tide-sidebar {
  width: 220px;
  flex-shrink: 0;
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--surface);
}
.tide-content {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Source tabs */
.tide-tabs {
  display: flex;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.tide-tab {
  flex: 1;
  padding: 9px 4px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .08em;
  color: var(--text-mid);
  cursor: pointer;
  border: none;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  background: transparent;
  transition: color .15s, border-color .15s;
}
.tide-tab:hover { color: var(--text); background: transparent; }
.tide-tab.active {
  color: var(--cyan);
  border-bottom-color: var(--cyan);
}

/* Search */
.tide-search-wrap {
  padding: 8px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.tide-search {
  width: 100%;
  box-sizing: border-box;
  font-size: 11px;
  padding: 5px 8px;
}

/* Station list */
.tide-station-list {
  overflow-y: auto;
  flex: 1;
}
.tide-region-header {
  padding: 5px 10px 3px;
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: .2em;
  color: var(--text-dim);
  text-transform: uppercase;
  background: var(--bg);
  border-top: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 1;
}
.tide-station-item {
  padding: 6px 12px;
  font-size: 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  transition: background .1s;
  border-left: 2px solid transparent;
}
.tide-station-item:hover { background: rgba(0, 212, 255, .05); }
.tide-station-item.selected {
  background: rgba(0, 212, 255, .1);
  border-left-color: var(--cyan);
  color: var(--cyan);
}
.tide-station-id {
  font-family: var(--mono);
  font-size: 9px;
  color: var(--dim);
  flex-shrink: 0;
}

/* Content area — empty state */
.tide-empty {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 10px;
  color: var(--dim);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .1em;
}
.tide-empty-icon {
  font-size: 2.4rem;
  opacity: .4;
}

/* パネル本体（js/qv_tide_panel.js が組み立てる）
   hidden 属性で出し分けるため display を持つ要素には打ち消しを添える */
.tide-panel-detail { display: flex; flex-direction: column; gap: 16px; }
.tide-panel-detail[hidden],
.tide-empty[hidden],
.tide-graph-section[hidden] { display: none; }

/* Station info bar */
.tide-info-bar {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  padding: 10px 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 4px;
}
.tide-info-item { display: flex; flex-direction: column; gap: 2px; }
.tide-info-label {
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: .2em;
  color: var(--dim);
  text-transform: uppercase;
}
.tide-info-value {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--cyan);
  letter-spacing: .05em;
}
.tide-info-value.small { font-size: 11px; color: var(--text); }
.tide-source-link {
  margin-left: auto;
  font-family: var(--mono);
  font-size: 9px;
  color: var(--teal);
  text-decoration: none;
  letter-spacing: .08em;
  padding: 4px 10px;
  border: 1px solid rgba(0, 196, 154, .35);
  border-radius: 3px;
  transition: background .15s, border-color .15s;
}
.tide-source-link:hover {
  background: rgba(0, 196, 154, .1);
  border-color: var(--teal);
}

/* Graph section */
.tide-graph-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.tide-graph-label {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .18em;
  color: var(--text-mid);
  text-transform: uppercase;
}
.tide-graph-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  max-width: 900px;
  flex-wrap: wrap;
}
.tide-chart {
  width: 100%;
  max-width: 900px;
  height: auto;
  display: block;
  border: 1px solid var(--border);
  border-radius: 3px;
  background: var(--surface2);
  touch-action: pan-y;
}

/* 凡例 */
.tide-legend {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--mono);
  font-size: 9px;
  color: var(--text-mid);
}
.tide-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.tide-swatch {
  width: 14px;
  height: 0;
  border-top: 2px solid var(--text-mid);
  display: inline-block;
}
.tide-swatch--obs  { border-top-color: var(--cyan); }
.tide-swatch--pred { border-top-style: dashed; border-top-color: var(--amber); }
.tide-swatch--dev  { border-top-color: var(--orange); }

/* カーソル読み取り */
.tide-readout {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  max-width: 900px;
  min-height: 26px;
  padding: 6px 12px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 3px;
}
.tide-readout-time {
  color: var(--cyan);
  letter-spacing: .08em;
}
.tide-readout-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.tide-readout-hint {
  color: var(--text-dim);
  font-size: 9px;
  letter-spacing: .06em;
}

/* 読み込み中・エラー */
.tide-msg {
  display: none;
  max-width: 900px;
  padding: 10px 14px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-mid);
  background: var(--surface2);
  border: 1px dashed var(--border);
  border-radius: 3px;
  line-height: 1.6;
}
.tide-msg--error {
  color: var(--amber);
  border-color: var(--border2);
}

/* 潮位・偏差のチャート線（色はここだけで決める） */
.tide-line--obs  { stroke: var(--cyan);   stroke-width: 1.6; }
.tide-line--pred { stroke: var(--amber);  stroke-width: 1.2; stroke-dasharray: 5 4; opacity: .85; }
.tide-line--dev  { stroke: var(--orange); stroke-width: 1.4; }
.tide-area--dev  { fill: var(--orange); opacity: .14; }
.tide-marker--now { stroke: var(--teal); }
.tide-dot--obs   { fill: var(--cyan); }
.tide-dot--pred  { fill: var(--amber); }
.tide-dot--dev   { fill: var(--orange); }

.tide-value--high { color: var(--red); }
.tide-value--low  { color: var(--blue); }
.tide-datum { color: var(--text-mid); }

/* Status / refresh bar */
.tide-status-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--mono);
  font-size: 9px;
  flex-wrap: wrap;
}
.tide-live {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--teal);
  letter-spacing: .1em;
}
.tide-countdown { color: var(--amber); }
.tide-updated   { color: var(--dim); }

/* Responsive */
@media (max-width: 640px) {
  .tide-sidebar { width: 160px; }
  .tide-content { padding: 12px; }
  .tide-info-bar { gap: 12px; }
  .tide-source-link { display: none; }
  .tide-readout { gap: 10px; font-size: 10px; }
  .tide-readout-hint { display: none; }
}

/* スマホ縦持ち: 横並びだと潮汐グラフ側が 215px しか残らないため縦積みにする */
@media (max-width: 600px) {
  .tide-main { flex-direction: column; }
  .tide-sidebar {
    width: 100%;
    max-height: 38vh;
    border-right: none;
    border-bottom: 1px solid var(--border);
  }
  .tide-content { min-height: 0; }
}

/* ── 38. 時系列チャート (qv_timeseries.js) ──────────────────── */

/* 線の色は呼び出し側が spec.series[].cls で足す。ここは骨格だけ決める */
.qvts-axes,
.qvts-series,
.qvts-markers,
.qvts-cursor { pointer-events: none; }

.qvts-gridline {
  stroke: var(--border);
  stroke-width: .5;
  opacity: .7;
}
.qvts-zeroline {
  stroke: var(--text-mid);
  stroke-width: .8;
  stroke-dasharray: 3 3;
}
.qvts-frame {
  fill: none;
  stroke: var(--border2);
  stroke-width: .8;
}
.qvts-tick {
  font-family: var(--mono);
  font-size: 9px;
  fill: var(--text-mid);
}
.qvts-tick--y { text-anchor: end; }
.qvts-tick--x { text-anchor: middle; }
.qvts-axis-title {
  font-family: var(--mono);
  font-size: 9px;
  fill: var(--text-dim);
  letter-spacing: .08em;
}

.qvts-line {
  fill: none;
  stroke: var(--text-mid);
  stroke-width: 1.4;
  stroke-linejoin: round;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}
.qvts-area { stroke: none; }

.qvts-marker {
  stroke: var(--teal);
  stroke-width: .8;
  stroke-dasharray: 4 3;
}
.qvts-marker-label {
  font-family: var(--mono);
  font-size: 8px;
  fill: var(--teal);
  stroke: none;
  text-anchor: end;
  letter-spacing: .1em;
}

.qvts-cursor-line {
  stroke: var(--text);
  stroke-width: .6;
  opacity: .5;
}
.qvts-cursor-dot {
  stroke: var(--bg);
  stroke-width: 1;
}
/* 散布図の点（renderDots）。色は点ごとのデータなので style 属性で入る */
.qvts-dots { pointer-events: none; }
.qvts-dot { stroke: rgba(0, 0, 0, 0.5); stroke-width: 0.5; }
.qvts-stem { stroke: var(--border2); stroke-width: 1; }

/* ═══════════════════════════════════════════════════════════════
   § PRED  震度分布予測ビューア
   ─────────────────────────────────────────────────────────────
   Prefix   : pred-
   依存      : quakeview.css の Design Tokens + rtm- レイアウト
   追加Token : なし
   ─────────────────────────────────────────────────────────────
   Structure:
     PRED-1. 震度帯バー行
     PRED-2. 震源アイコン (HTML マーカー)
     PRED-3. 2枚地図の比較レイアウト（AI予測 / 距離減衰式）
     PRED-4. レスポンシブ
═══════════════════════════════════════════════════════════════ */

/* ── PRED-1. 震度帯バー行 ───────────────────────────────────── */
.pred-band-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 2px 0;
  font-size: 10px;
}
.pred-band-swatch {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
}
.pred-band-label {
  font-family: var(--mono);
  color: var(--text-mid);
  width: 34px;
  flex-shrink: 0;
  font-size: 10px;
}
.pred-band-count {
  font-family: var(--mono);
  color: var(--text);
  width: 36px;
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}
.pred-band-bar {
  height: 3px;
  border-radius: 2px;
  min-width: 2px;
  flex-shrink: 0;
  opacity: 0.75;
}

/* ── PRED-2. 震源アイコン ────────────────────────────────────── */
.pred-epicenter {
  font-size: 22px;
  line-height: 1;
  text-shadow: 0 0 8px rgba(255, 220, 0, 0.9),
               0 0 16px rgba(255, 150, 0, 0.6);
  cursor: default;
  user-select: none;
}

/* ── PRED-3. 2枚地図の比較レイアウト ─────────────────────────── */
.pred-dual-maps {
  display: flex;
  flex: 1;
  min-width: 0;
  gap: 1px;
  background: var(--border);
  overflow: hidden;
}
.pred-map-title {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 500;
  padding: 3px 8px;
  border-radius: 3px;
  background: rgba(10, 12, 15, 0.75);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .03em;
  color: var(--text);
  pointer-events: none;
}
/* 見出しは地図を畳むボタンを兼ねる（qv_fold.js）。§44 の帯状ボタンの形を見出しの札へ戻す */
.pred-map-title.qv-fold-toggle {
  left: 46px;                       /* 押せるようになったので、左上のズームボタンを避ける */
  width: auto;
  max-width: calc(100% - 54px);
  gap: 6px;
  padding: 3px 8px;
  border: none;
  background: rgba(10, 12, 15, 0.75);
  font-family: var(--mono);
  font-size: 10px;
  color: var(--text);
  pointer-events: auto;
}
.pred-map-title.qv-fold-toggle:hover { color: var(--cyan); }

/* ── PRED-4. レスポンシブ ────────────────────────────────────── */
@media (max-width: 600px) {
  /* flex:1 のままだと親（.rtm-main）の余白配分で height 指定が無視され、
     2枚目の地図が overflow:hidden で切れるため flex:none で高さを固定する */
  .pred-dual-maps {
    order: 1;
    flex: none;
    flex-direction: column;
    height: 60vh;
    min-height: 240px;
  }
  .pred-dual-maps .rtm-map-wrap {
    flex: 1;
    height: auto;
    min-height: 0;
  }
  /* 縦積みでは帯にせず、見出しの1行だけ残す（qv_fold.js） */
  .pred-dual-maps .rtm-map-wrap.qv-fold--collapsed { flex: none; width: 100%; min-width: 0; }
  .pred-dual-maps .qv-fold--collapsed > .qv-fold-toggle { flex: none; flex-direction: row; padding: 6px 10px; }
  .pred-dual-maps .qv-fold--collapsed .qv-fold-label { writing-mode: horizontal-tb; letter-spacing: normal; }
  .pred-dual-maps .qv-fold .qv-fold-icon::before { content: '▲'; }
  .pred-dual-maps .qv-fold.qv-fold--collapsed .qv-fold-icon::before { content: '▼'; }
}

/* ═══════════════════════════════════════════════════════════════
   § MHV  強震モニタ 履歴再生（自動記録リプレイ）
   ─────────────────────────────────────────────────────────────
   Prefix   : mhv-
   依存      : Design Tokens + rtm- / dual- レイアウトを再利用
   追加Token : なし
   ─────────────────────────────────────────────────────────────
   Structure:
     MHV-1.  取得フォーム（サイドバー）
     MHV-1a. K-NET 公開波形（ダウンロードできる地震の一覧）
     MHV-1b. 自動記録EEWリスト
     MHV-1c. 3画面（震度・加速度・長周期の同時再生）
     MHV-3.  トランスポート（再生コントロール）
═══════════════════════════════════════════════════════════════ */

/* ── MHV-1. 取得フォーム ─────────────────────────────────────── */
.mhv-form {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.mhv-field {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.mhv-field-label {
  font-size: 9px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.mhv-field select,
.mhv-field input {
  width: 100%;
}
.mhv-download-btn {
  margin-top: 4px;
  padding: 7px;
  font-size: 11px;
  letter-spacing: 1px;
}
.mhv-load-btn {
  width: 100%;
  padding: 6px;
  text-align: center;
}
.mhv-form select { width: 100%; }
/* ── MHV-1a. K-NET 公開波形（一覧 → 選択 → ダウンロード・再現） ──────── */
.mhv-knet-panel {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.mhv-knet-panel[hidden] { display: none; }
.mhv-knet-range {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}
.mhv-knet-list {
  max-height: 260px;
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--surface);
}
.mhv-knet-list:empty { display: none; }
.mhv-knet-item {
  display: grid;
  grid-template-columns: 10px 1fr auto;
  column-gap: 6px;
  row-gap: 1px;
  align-items: center;
  padding: 5px 7px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
}
.mhv-knet-item:last-child { border-bottom: none; }
.mhv-knet-item:hover { background: var(--surface2); }
.mhv-knet-item--selected,
.mhv-knet-item--selected:hover {
  background: var(--accent-dim);
  box-shadow: inset 2px 0 0 var(--accent);
}
.mhv-knet-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
}
.mhv-knet-time {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text);
}
.mhv-knet-tag {
  font-size: 9px;
  color: var(--text-dim);
  border: 1px solid var(--border2);
  border-radius: 3px;
  padding: 0 4px;
}
.mhv-knet-item--done .mhv-knet-tag { color: var(--green); border-color: var(--green); }
.mhv-knet-main,
.mhv-knet-sub {
  grid-column: 2 / 4;
  font-size: 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mhv-knet-main { color: var(--text-mid); }
.mhv-knet-sub  { color: var(--text-dim); font-family: var(--mono); }
/* ── MHV-1b. 自動記録EEWリスト（再生中の時間帯に出ていた報） ──────── */
.mhv-eew-item {
  display: flex;
  align-items: baseline;
  gap: 5px;
  padding: 3px 0;
  border-bottom: 1px solid var(--border);
}
.mhv-eew-item:last-child { border-bottom: none; }
.mhv-eew-time {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--text-dim);
  flex-shrink: 0;
}
.mhv-eew-main {
  flex: 1;
  font-size: 11px;
  color: var(--text);
}
.mhv-eew-seq {
  font-size: 10px;
  color: var(--amber);
  flex-shrink: 0;
}
/* 現在フレームの時刻より後に出た報（まだ発表されていない） */
.mhv-eew-item--pending { opacity: .35; }
/* 取消報 */
.mhv-eew-item--cancel .mhv-eew-main { color: var(--text-dim); text-decoration: line-through; }
.mhv-eew-item--cancel .mhv-eew-seq  { color: var(--text-dim); }

.mhv-record-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 5px;
  border-radius: 50%;
  background: var(--red);
  vertical-align: middle;
  animation: mhv-record-pulse 1.6s ease-in-out infinite;
}
@keyframes mhv-record-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: .35; }
}

.mhv-status-text {
  margin-top: 6px;
  font-size: 10px;
  line-height: 1.6;
  color: var(--text-mid);
}
.mhv-clock {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  color: var(--cyan);
}

/* ── MHV-1c. 3画面（震度・加速度・長周期の同時再生） ──────────────── */
/* 各画面のヘッダーに出す状態表示（最大値 / データなし） */
.mhv-screen-status {
  margin-left: auto;
  font-family: var(--mono);
  font-size: 10px;
  color: var(--text-mid);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mhv-screen-status--none { color: var(--text-dim); }

/* 右カラム下部: 3画面それぞれの上位5位を横に並べる。
   § DUAL の .dual-ext-panel（縦並び・overflow:hidden）を上書きするため
   2クラスの詳細度で指定する */
.dual-ext-panel.mhv-top5-panel {
  flex-direction: row;
  gap: 10px;
  padding: 8px 10px;
  overflow: auto;
  overscroll-behavior: contain;
}
.mhv-top5-col {
  flex: 1;
  min-width: 0;
}
.mhv-top5-col .section-label { margin-bottom: 4px; }

/* 1列 240px 前後しかないので、観測点名は列の中で省略する。
   値（単位付きで最大58px）は必ず1行で右端に残す */
.mhv-top5-col .rtm-top5-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
  font-size: 12px;
}
.mhv-top5-col .rtm-top5-val {
  font-size: 12px;
  white-space: nowrap;
}

@media (max-width: 900px) {
  .dual-ext-panel.mhv-top5-panel { flex-direction: column; }
}

/* ── MHV-3. トランスポート ───────────────────────────────────── */
.mhv-transport {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  height: 44px;
  padding: 0 14px;
  background: var(--surface);
  border-top: 1px solid var(--border);
}
.mhv-transport-btn {
  font-size: 13px;
  line-height: 1;
  padding: 4px 10px;
}
.mhv-play-btn--on {
  border-color: var(--green);
  color: var(--green);
}
.mhv-slider {
  flex: 1;
  min-width: 80px;
}
.mhv-frame-time {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 13px;
  color: var(--cyan);
  min-width: 72px;
  text-align: right;
}
.mhv-counter {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 11px;
  color: var(--text-dim);
  min-width: 70px;
  text-align: right;
}
.mhv-speed-field {
  display: flex;
  align-items: center;
  gap: 6px;
}
.mhv-speed-field .mhv-field-label { color: var(--text-mid); }
.mhv-loop-field {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  color: var(--text-mid);
  white-space: nowrap;
}

/* ── MHV-4. レスポンシブ ─────────────────────────────────────── */
@media (max-width: 720px) {
  .mhv-transport {
    flex-wrap: wrap;
    height: auto;
    padding: 8px 12px;
    gap: 8px;
  }
  .mhv-slider { order: 5; flex-basis: 100%; }
}

/* ── TSU-1. 津波シミュレータ レイアウト ─────────────────────── */
.tsu-wrap {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  padding: 12px 16px 20px;
  align-items: flex-start;
}

.tsu-canvas-wrap {
  flex: 1;
  min-width: 260px;
}

.tsu-canvas {
  width: 100%;
  display: block;
  border: 1px solid var(--border2);
  border-radius: 6px;
  cursor: crosshair;
}

.tsu-status {
  font-size: 11px;
  color: var(--text-mid);
  margin-top: 4px;
  min-height: 14px;
}

.tsu-ctrl {
  width: 192px;
  flex-shrink: 0;
}

/* ── TSU-2. コントロール部品 ────────────────────────────────── */
.tsu-sec { margin-bottom: 14px; }

.tsu-sec-head {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--text-mid);
  margin: 0 0 5px;
}

.tsu-btn {
  display: block;
  width: 100%;
  text-align: left;
  font-size: 11px;
  padding: 5px 8px;
  margin-bottom: 2px;
}

.tsu-row {
  display: flex;
  justify-content: space-between;
  gap: 4px;
  padding: 3.5px 0;
  border-bottom: 1px solid var(--border);
  font-size: 12.5px;
}

/* 到達時間セル。30分未満=is-urgent / 60分未満=is-caution を JS が付与する */
.tsu-time {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  color: var(--text-mid);
  min-width: 58px;
  text-align: right;
}
.tsu-time.is-urgent  { color: var(--orange); }
.tsu-time.is-caution { color: var(--green); }

/* ── TSU-3. 凡例・注記 ──────────────────────────────────────── */
.tsu-legend-bar {
  display: flex;
  height: 10px;
  border-radius: 4px;
  overflow: hidden;
  margin: 4px 0 3px;
}

.tsu-legend-scale {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  color: var(--text-mid);
}

.tsu-note {
  font-size: 10.5px;
  color: var(--text-mid);
  margin: 0;
  line-height: 1.65;
}

/* ── TSU-4. レスポンシブ ────────────────────────────────────── */
@media (max-width: 700px) {
  .tsu-ctrl { width: 100%; }
}

/* スマホ縦持ち: トランスポートバーが 90px 前後を占めるため、
   section 36 の 65vh のままだとダウンロード操作パネルが 150px しか残らない */
@media (max-width: 600px) {
  .mhv-page .rtm-map-wrap { height: 50vh; }
}

/* ═══════════════════════════════════════════════════════════════
   § DUAL  強震モニタ + 長周期/最大加速度モニタ デュアルビュー   Added: 2026-08-04
   ─────────────────────────────────────────────────────────────
   Prefix   : dual-
   依存      : Design Tokens + rtm- レイアウト（rtm-body / rtm-main / rtm-sidebar /
               rtm-map-wrap 等）・eew- パネルを再利用
   追加Token : なし
   ─────────────────────────────────────────────────────────────
   Structure:
     DUAL-1. 左サイドバー（ランキング幅）
     DUAL-2. 右カラム（最大加速度モニタ + 長周期モニタ横並び + 未実装パネル）
     DUAL-3. レスポンシブ
═══════════════════════════════════════════════════════════════ */

/* ── DUAL-1. 左サイドバー ────────────────────────────────────── */

/* 左サイドバーだけ px 固定、中央と右カラムは割合で持つ。
     左サイドバー 320px 固定 : 右カラム 45% : 中央 強震モニタ 残り
   左を割合（15%）にすると 1366px 級のPCで 200px まで痩せ、
   ランキングの「区域名 + 観測網名 + 地点名」が … で省略されてしまう。
   320px は全観測点（1749点）の地点名が省略なしで収まる幅なので、
   ここは画面幅に連動させず固定する。
   min-width:0 は content ベースの最小幅（min-width:auto）で
   幅を押し広げられないようにするため */
.rtm-main.dual-main > .rtm-sidebar {
  width: 320px;
  min-width: 0;
}

/* ── DUAL-2. 右カラム ────────────────────────────────────────── */

/* 左サイドバーを引いた残りを、中央の強震モニタと半々に分ける。
   § RTM の .rtm-map-wrap も flex:1（basis 0）なので、両者が
   同じ比率で残りを取り合う ＝ 画面幅によらず常に 1:1 になる。
   px 固定にしないのは、幅の違うPCで中央だけが伸び縮みするのを避けるため */
.dual-right-col {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  border-left: 1px solid var(--border);
  overflow: hidden;
}

/* 最大加速度モニタ・長周期モニタを横並びにする行 */
.dual-top-row {
  flex: none;
  display: flex;
  border-bottom: 1px solid var(--border);
}

.dual-acm-panel,
.dual-lmoni-panel {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  position: relative;
}

.dual-acm-panel {
  border-right: 1px solid var(--border);
}

.dual-lmoni-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  flex-shrink: 0;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}

/* 長周期モニタ・最大加速度モニタのマップ領域: ヘッダーを除いた高さを 50vh に固定 */
.dual-lmoni-map-wrap {
  flex: none;
  height: 50vh;
}

.dual-unimpl-panel {
  flex: 1;
  min-height: 0;
  margin: 0;
  border-radius: 0;
  border-width: 0;
}

/* 拡張パネルのスロット。中身は JS（QVRtSearch など）がマウントする。
   何もマウントされていないときだけ未使用と表示する */
.dual-ext-panel {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.dual-ext-panel:empty {
  align-items: center;
  justify-content: center;
}
.dual-ext-panel:empty::after {
  content: '拡張パネル（未使用）';
  color: var(--text-dim);
  font-size: 11px;
}

/* ── DUAL-3. レスポンシブ ────────────────────────────────────── */
@media (max-width: 900px) {
  .rtm-main.dual-main { flex-direction: column; overflow: auto; }
  .rtm-main.dual-main .rtm-map-wrap { flex: none; height: 60vh; min-height: 260px; }
  /* 縦積みでは flex:1 1 0 の basis 0 が「高さ」に効き、中身（50vh の地図2枚 +
     拡張パネル）が潰れてしまうため、内容なりの高さに戻す */
  .dual-right-col {
    flex: none;
    width: 100%;
    border-left: none;
    border-top: 1px solid var(--border);
  }
  .dual-top-row { flex-direction: column; }
  .dual-acm-panel { border-right: none; border-bottom: 1px solid var(--border); }
  .rtm-main.dual-main .dual-lmoni-map-wrap { height: 42vh; }

  /* 表示順を 強震モニタ地図 → 左サイドバー → 右カラム(長周期/最大加速度モニタ) に固定
     （section 36 の汎用 order 指定のままだと order:0 の .dual-right-col が先頭に来る）。
     サイドバーはランキング 25 件で 700px 近くになるため、先頭に置くと
     主コンテンツである強震モニタ地図がファーストビューから完全に外れる。
     サイドバー先頭に戻す場合は sidebar:1 / map-wrap:2 に入れ替える */
  .rtm-main.dual-main > .rtm-map-wrap { order: 1; }
  .rtm-main.dual-main > .rtm-sidebar  { order: 2; }
  .rtm-main.dual-main > .dual-right-col { order: 3; }

  /* section 36 の .rtm-sidebar{flex:1} のままだと高さを固定した地図群に押されて
     21px まで潰れるため、内容なりの高さにして #main 側でスクロールさせる */
  .rtm-main.dual-main > .rtm-sidebar {
    flex: none;
    width: 100%;
    height: auto;
    overflow: visible;
  }
}


/* ═══════════════════════════════════════════════════════════════
   § GM  全世界地震モニタ (Global Quake Monitor)   Added: 2026-08-06
   ─────────────────────────────────────────────────────────────
   Prefix   : gm-
   依存      : quakeview.css Design Tokens のみ（.et-* イベント行
              スタイルを左パネルのイベントカードに再利用する）
   追加Token : なし
   ─────────────────────────────────────────────────────────────
   Structure:
     GM-1. Page layout（イベントリスト / 地図 / USGS の3カラム）
     GM-2. パネル共通（ヘッダー・フッター）
     GM-3. イベント行の到達時刻表示
     GM-4. USGSパネル・行
     GM-5. マップステータス
     GM-6. Responsive
═══════════════════════════════════════════════════════════════ */

/* ── GM-1. Page layout ──────────────────────────────────────── */

.gm-page,
.gm-page body { height: 100%; }

.gm-page #app {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.gm-page header {
  /* 他セクションの .rtm-header と同じ高さの1段に揃える。
     右側（音声・時計・LIVE）を縦積みにすると JST/UTC の2段時計で
     ヘッダーが 100px 超まで太るため、横並びにして右端へ寄せる */
  min-height: var(--header-h);
  padding: .25rem 1.4rem;
  display: flex;
  align-items: center;
  gap: .9rem;
}
.gm-page header .header-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: .9rem;
}
.gm-page header .live { margin-top: 0; white-space: nowrap; }

.gm-page #main {
  flex: 1;
  display: flex;
  overflow: hidden;
}

.gm-page #panel-events,
.gm-page #panel-usgs {
  width: 340px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--surface);
}
.gm-page #panel-events { border-right: 1px solid var(--border); }
.gm-page #panel-usgs   { border-left:  1px solid var(--border); }

.gm-page #panel-map {
  flex: 1;
  min-width: 0;
  position: relative;
}

.gm-page #map {
  width: 100%;
  height: 100%;
  background: #08111a;
}

/* ── GM-2. パネル共通 ──────────────────────────────────────── */

.gm-panel-header {
  flex-shrink: 0;
  padding: 8px 12px;
  background: var(--surface2);
  border-bottom: 1px solid var(--border);
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .2em;
  color: var(--text-dim);
  text-transform: uppercase;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.gm-panel-body {
  flex: 1;
  overflow-y: auto;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.gm-panel-body::-webkit-scrollbar       { width: 3px; }
.gm-panel-body::-webkit-scrollbar-thumb { background: var(--border); }

.gm-panel-footer {
  flex-shrink: 0;
  padding: 8px 12px;
  border-top: 1px solid var(--border);
  background: var(--surface2);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* 緯度・経度の2つの入力欄を1行に収める（狭いサイドバーでも折り返さないよう均等分割） */
.gm-panel-footer .input-row {
  display: flex;
  gap: .4rem;
}
.gm-panel-footer .input-row input[type="number"] {
  flex: 1;
  width: 0;
  min-width: 0;
}

.gm-panel-placeholder {
  font-family: var(--mono);
  font-size: .72rem;
  color: var(--dim);
  padding: .5rem 0;
  text-align: center;
}
/* Early-est の注意書き（公開版の入口 app/index.html・QVGlobalMonitor.mount の earlyestNote） */
.gm-ee-note {
  flex: 0 0 auto;
  padding: 6px 10px;
  border-left: 3px solid var(--amber);
  background: var(--surface2);
  font-size: 11px;
  line-height: 1.6;
  color: var(--text-mid);
}

/* ── GM-3. イベント行 到達時刻 ─────────────────────────────── */

.gm-arr-row {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-family: var(--mono);
  font-size: .64rem;
  margin-top: .1rem;
}
.gm-arr-label { color: var(--text-dim); }
.gm-arr-value { color: var(--text-mid); }
.gm-arr-value.waiting { color: var(--cyan); }
.gm-arr-value.arrived { color: var(--dim); }

/* ── GM-4. USGSパネル・行 ──────────────────────────────────── */

.gm-usgs-row {
  display: flex;
  flex-direction: column;
  gap: .18rem;
  padding: .42rem .55rem;
  border: 1px solid var(--border);
  border-radius: 3px;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.gm-usgs-row:hover     { border-color: var(--cyan-dim); background: rgba(0,212,255,.04); }
.gm-usgs-row.gm-selected { border-color: var(--cyan); background: rgba(0,212,255,.07); }

.gm-usgs-top {
  display: flex;
  align-items: center;
  gap: .45rem;
  flex-wrap: wrap;
}
.gm-usgs-mag {
  font-family: var(--mono);
  font-size: .9rem;
  font-weight: 600;
  color: var(--gm-mag-color, var(--cyan));
  line-height: 1;
  flex-shrink: 0;
}
.gm-usgs-time  { font-family: var(--mono); font-size: .66rem; color: var(--text-dim); }
.gm-usgs-place {
  font-size: .76rem;
  color: var(--text);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.gm-usgs-meta {
  display: flex;
  gap: .6rem;
  flex-wrap: wrap;
  font-family: var(--mono);
  font-size: .6rem;
  color: var(--text-dim);
}

/* ── GM-5. マップステータス ───────────────────────────────── */

.gm-map-status {
  position: absolute;
  left: 10px;
  bottom: 10px;
  font-family: var(--mono);
  font-size: 9px;
  color: var(--text-mid);
  background: rgba(10,14,16,.7);
  padding: 3px 8px;
  border-radius: 2px;
  pointer-events: none;
}

.gm-station-dot {
  display: block;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--green);
  border: 2px solid #fff;
  box-shadow: 0 0 8px var(--green);
}

/* ── GM-6b. 時計（日本時間 + 世界時間）─────────────────────
   全世界が対象なので JST と UTC を2行で並べる。
   ラベル幅を固定して数字の桁が揃うようにする（tabular-nums 併用） */

.gm-clock {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: .1rem;
}
.gm-clock-row {
  display: flex;
  align-items: baseline;
  gap: .4rem;
}
.gm-clock-zone {
  font-family: var(--mono);
  font-size: .5rem;
  letter-spacing: .12em;
  color: var(--text-dim);
  min-width: 1.8rem;
  text-align: right;
}
.gm-clock-time {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: .69rem;
  color: var(--amber);
  white-space: nowrap;
}
/* 世界時間は補助情報なので一段落とす */
.gm-clock-row--utc .gm-clock-time { color: var(--text-mid); }


/* ── GM-7. スクロールスナップのセクションとして載せる場合 ──────
   単体ページでは <body class="gm-page"> だが、統合ページでは
   <section class="qv-snap-section gm-page"> になる。
   #app の height:100vh をセクション高さ（= 100%）へ落とす */

.qv-snap-section.gm-page {
  display: block;
}
.qv-snap-section.gm-page #app {
  height: 100%;
}
/* 統合ページではページ上部のナビに QuakeView ロゴがあるので、
   セクション側のロゴと区切り線は出さない（単体ページでは残す） */
.qv-snap-section.gm-page header .nav-logo,
.qv-snap-section.gm-page header .header-divider {
  display: none;
}

/* ── GM-6. Responsive ─────────────────────────────────────── */

@media (max-width: 600px) {
  /* 1段に収まらないので、タイトル行と「音声・時計・LIVE」行の2段にする。
     詰めたまま横に並べると日付や LIVE 表示が途中で折り返して崩れる */
  .gm-page header {
    flex-wrap: wrap;
    row-gap: .3rem;
    padding: .38rem .62rem;
  }
  .gm-page header .header-right {
    width: 100%;
    justify-content: space-between;
    gap: .5rem;
  }
  /* 状態表示は長いと右端からはみ出すので、残り幅で省略記号にする */
  .gm-page header .live { min-width: 0; }
  .gm-page header #ee-status {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

@media (max-width: 900px) {
  .gm-page #main { flex-direction: column; overflow-y: auto; }
  .gm-page #panel-events,
  .gm-page #panel-usgs {
    width: 100%;
    max-height: 34vh;
    border: none;
    border-top: 1px solid var(--border);
  }
  /* flex:1 のままだと height:42vh が無視され 240px まで潰れる */
  .gm-page #panel-map {
    flex: none;
    height: 42vh;
    min-height: 240px;
  }
}


/* ═══════════════════════════════════════════════════════════════
   § SNAP  スクロールスナップ・コンテナ            Added: 2026-08-21
   ─────────────────────────────────────────────────────────────
   Prefix   : qv-snap-
   依存      : Design Tokens のみ
   追加Token : なし
   ─────────────────────────────────────────────────────────────
   複数の 100vh 画面（統合モニタ / リアルタイム検索 …）を1ページに
   縦に並べ、1スクロールで隣の画面へ送るためのレイアウト。

   scroll-snap-type は y mandatory を使う。
   proximity は Chrome ではスナップ点に十分近いときしか吸着せず、
   ホイール操作ではほぼ発火しない（＝スナップしていないように見える）。
   mandatory が危険なのは「スナップ点の間にコンテナより高い内容があって
   到達できなくなる」場合だが、各セクションはちょうどコンテナ高さなので該当しない。
   セクション内のリストは独立したスクローラで、そこを回してもコンテナの
   スクロール位置は動かないため、mandatory と競合しない。

   ただし縦に伸びるレイアウト（モバイル）では上記の前提が崩れるので、
   SNAP-3 で scroll-snap-type:none に落としている。
   ─────────────────────────────────────────────────────────────
   Structure:
     SNAP-1. コンテナとセクション
     SNAP-2. セクションヘッダ・ナビゲータ
     SNAP-3. Responsive
═══════════════════════════════════════════════════════════════ */

/* ── SNAP-1. コンテナとセクション ───────────────────────────── */

/* <body class="qv-snap-body"> に付与する */
.qv-snap-body {
  height: 100vh;
  overflow: hidden;
}

.qv-snap-container {
  height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
  scroll-snap-type: y mandatory;
  scroll-behavior: smooth;
}

/* ページ上部に固定ナビ（.rtm-header は --header-h）を置く構成。
   セクションの 100vh からナビ分を差し引いて縦スクロールの二重化を防ぐ。
   ナビの高さが rem 基準なので、ここも同じトークンを引いて必ず一致させる */
.qv-snap-container--with-nav          { height: calc(100vh - var(--header-h)); }
.qv-snap-container--with-nav .qv-snap-section { height: calc(100vh - var(--header-h)); }

.qv-snap-section {
  height: 100vh;
  scroll-snap-align: start;
  /* 勢いよく回したときにセクションを飛び越えないよう1枚ずつ止める。
     セクションが増えても「1スクロール＝1画面」を保つため */
  scroll-snap-stop: always;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-bottom: 1px solid var(--border);
}
.qv-snap-section:last-child { border-bottom: none; }

/* セクション内でスクロールさせたい領域のうち、
   「必ず内容が溢れる」と分かっている場所にだけ付ける。
   中身が短いときは自分もスクロールできず親への伝播も止まるため、
   その領域がホイールの死角になる。迷ったら付けないこと */
.qv-snap-scroll {
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* ── SNAP-2. セクションヘッダ・ナビゲータ ───────────────────── */

.qv-snap-nav {
  position: fixed;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 60;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.qv-snap-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 1px solid var(--border2);
  background: var(--surface);
  cursor: pointer;
  padding: 0;
  transition: background 0.15s, border-color 0.15s;
}
.qv-snap-dot:hover      { border-color: var(--cyan); }
.qv-snap-dot--active    { background: var(--cyan); border-color: var(--cyan); }

/* ── SNAP-3. Responsive ─────────────────────────────────────── */

@media (max-width: 900px) {
  /* 縦に長い内容をセクション高さへ押し込むと読めないため、
     モバイルではスナップを解いて素直な縦スクロールにする */
  .qv-snap-container,
  .qv-snap-container--with-nav { scroll-snap-type: none; }
  /* --with-nav の height:calc() より詳細度を上げないと height:auto が効かず、
     内容がセクション高さを超えたときに overflow:hidden で切れてしまう */
  .qv-snap-section,
  .qv-snap-container--with-nav .qv-snap-section {
    height: auto;
    min-height: 100vh;
    overflow: visible;
  }
  .qv-snap-nav { display: none; }
}


/* ═══════════════════════════════════════════════════════════════
   § RTS  リアルタイム検索 (Realtime Search)        Added: 2026-08-21
   ─────────────────────────────────────────────────────────────
   Prefix   : rts-
   依存      : Design Tokens + § SNAP
   追加Token : なし
   ─────────────────────────────────────────────────────────────
   DOM は js/qv_rtsearch.js が組み立てる。HTML 側は空の受け皿を
   1つ置くだけでよい。

   1つのマークアップを2つのレイアウトで使う：
     .rts-root--compact … 統合モニタの拡張パネル
                          概要だけ（LIVE + 4カテゴリの要点）。リストは持たない
     .rts-root--full    … スクロールスナップの1セクション（100vh）
                          地図 + 4ペイン同時表示。リストはこちらに集約する
   ─────────────────────────────────────────────────────────────
   Structure:
     RTS-1. ルートレイアウト（compact / full）
     RTS-2. 検索条件バー
     RTS-3. LIVE ストリップ（AQUA / J-RISQ）
     RTS-4. 概要ストリップ（両レイアウト共通）
     RTS-5. タブとバッジ
     RTS-6. ペイン共通（プレースホルダ・注記）
     RTS-7. 履歴リスト
     RTS-8. 震度ヒストグラム・サマリ
     RTS-9. メカタブ
     RTS-10. 津波タブ
     RTS-11. Responsive
═══════════════════════════════════════════════════════════════ */

/* ── RTS-1. ルートレイアウト ────────────────────────────────── */

.rts-root {
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--surface);
  color: var(--text);
  font-family: var(--sans);
  font-size: 11px;
}

.rts-root--compact {
  flex: 1;
  overflow: hidden;
}

.rts-root--full {
  flex: 1;
  height: 100%;
}

/* スナップセクション内で full レイアウトを縦いっぱいに伸ばす受け皿 */
.rts-section-body {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.rts-body {
  display: flex;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

/* full は 地図 : デッキ = 1 : 1 の横並び */
.rts-root--full .rts-mapwrap {
  flex: 1;
  min-width: 0;
  position: relative;
  border-right: 1px solid var(--border);
}
.rts-root--full .rts-map { position: absolute; inset: 0; }

.rts-deck {
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
}
.rts-root--full    .rts-deck { width: 50%; max-width: none; }

/* ── RTS-2. 検索条件バー ────────────────────────────────────── */

.rts-ctxbar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  padding: 5px 10px;
  background: var(--surface2);
  border-bottom: 1px solid var(--border);
  font-family: var(--mono);
  font-size: 11px;
  white-space: nowrap;
  overflow-x: auto;
  /* 横スクロール専用の帯。両軸 contain にすると縦ホイールまで飲み込んでしまい、
     この帯の上にカーソルがある間ページがスクロールできなくなる */
  overscroll-behavior-x: contain;
}

.rts-ctx-origin {
  color: var(--cyan);
  font-weight: 600;
  letter-spacing: 0.02em;
}
.rts-ctx-origin--none { color: var(--text-mid); font-weight: 400; }

.rts-ctx-place {
  color: var(--text);
  font-family: var(--sans);
  overflow: hidden;
  text-overflow: ellipsis;
}
.rts-ctx-place:empty { display: none; }

.rts-ctx-source {
  color: var(--amber);
  font-size: 10px;
  padding: 1px 5px;
  border: 1px solid var(--border2);
  border-radius: 3px;
}
.rts-ctx-source:empty { display: none; }
/* 配信が途切れた後もそのまま使い続けている震源 */
.rts-ctx-source--held { color: var(--text-mid); }

.rts-spacer { flex: 1; }

.rts-field {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.rts-field-label { color: var(--text-mid); font-size: 10px; }

.rts-sel {
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border2);
  border-radius: 3px;
  padding: 2px 4px;
  font-family: var(--mono);
  font-size: 10px;
  cursor: pointer;
}
.rts-sel:focus { outline: 1px solid var(--cyan); }

.rts-pin {
  background: var(--bg);
  border: 1px solid var(--border2);
  border-radius: 3px;
  padding: 1px 5px;
  cursor: pointer;
  filter: grayscale(1) opacity(0.5);
  transition: filter 0.15s, border-color 0.15s;
}
.rts-pin--on {
  filter: none;
  border-color: var(--amber);
}

/* ── RTS-3. LIVE ストリップ ─────────────────────────────────── */

/* タブで隠さず常時表示する。勝手に変化するのはこの2つだけなので、
   「見逃さないための面」はここに限る */
.rts-live {
  display: flex;
  flex-shrink: 0;
  border-bottom: 1px solid var(--border);
  background: var(--bg);
}

.rts-live-cell {
  flex: 1;
  min-width: 0;
  padding: 5px 10px 7px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.rts-live-cell--aqua { border-right: 1px solid var(--border); }

/* EEW セル。配信が途切れても消さず、いつの発表かは時刻で読ませる
   （薄く落とすと直近の発表まで読みにくくなるため区別の印は付けない） */
.rts-live-cell--eew {
  flex: 1.4;
  border-right: 1px solid var(--border);
}
.rts-live-cell--alert .rts-live-title { color: var(--red); }

.rts-live-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.rts-live-title {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--teal);
}
.rts-live-time {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--text);
  margin-left: auto;
}

.rts-live-main {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 46px;
}
.rts-live-meca { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

.rts-live-row {
  display: flex;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
  font-size: 11px;
}
.rts-live-seq   { font-family: var(--mono); color: var(--amber); flex-shrink: 0; }
.rts-live-place { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rts-live-mag   { font-family: var(--mono); color: var(--text-mid); flex-shrink: 0; }
.rts-live-key   { font-size: 10px; color: var(--text-mid); }
.rts-live-val   { font-family: var(--mono); font-size: 15px; font-weight: 600; color: var(--text); }
.rts-live-val--strong { color: var(--red); }
.rts-live-none  { font-size: 10px; color: var(--text-dim); }
.rts-live-tag {
  font-family: var(--mono);
  font-size: 9px;
  flex-shrink: 0;
  padding: 0 4px;
  border: 1px solid var(--border2);
  border-radius: 3px;
  color: var(--text-mid);
}
.rts-live-tag--alert  { color: var(--red); border-color: var(--red); }
.rts-live-tag--cancel { color: var(--text-dim); }
.rts-dim        { color: var(--text-mid); font-family: var(--mono); font-size: 10px; }

.rts-beachball {
  flex-shrink: 0;
  border-radius: 50%;
  border: 1px solid var(--border2);
  background: var(--surface2);
}

/* ── RTS-4. 概要ストリップ ──────────────────────────────────── */

/* 4カテゴリの要点だけを並べる帯。リストは full セクションが持ち、
   compact（拡張パネル）はこのストリップで終わる。
   カードを押すとそのカテゴリを開いた状態でセクションへ移る */
.rts-overview {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 1px;
  flex-shrink: 0;
  background: var(--border);
  border-top: 1px solid var(--border);
}

.rts-ov-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 3px;
  min-width: 0;
  padding: 8px 10px;
  background: var(--surface);
  border: none;
  text-align: left;
  font-family: var(--sans);
  cursor: pointer;
  transition: background 0.15s;
}
.rts-ov-card:hover { background: var(--surface2); }

.rts-ov-label {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  color: var(--teal);
}
.rts-ov-val {
  font-family: var(--mono);
  font-size: 16px;
  line-height: 1.2;
  color: var(--text);
}
/* 値が入っていない（待機・該当なし）ときは小さく落とす */
.rts-ov-val--dim { font-size: 13px; color: var(--text-dim); }

.rts-ov-note {
  max-width: 100%;
  font-size: 10px;
  color: var(--text-mid);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* セクションへの導線 */
.rts-ov-foot {
  display: flex;
  justify-content: flex-end;
  flex-shrink: 0;
  padding: 6px 10px;
}

/* compact は概要で終わるので、余った高さは概要カードに配る */
.rts-root--compact .rts-overview { flex: 1; min-height: 0; }

/* full は概要そのものを出さない。
   概要は強震モニタ側（compact）、リストは検索セクション（full）という分担。
   同じ数字を2画面に出すより、空いた高さをリストに回す。
   カードの正本はモジュール側に1つだけ置き、ここでは隠すだけにする */
.rts-root--full .rts-overview { display: none; }
.rts-root--full .rts-ov-foot  { display: none; }
/* EEW・AQUA・J-RISQ（防災科研の配信）を使わない画面（公開版の入口 app/index.html・liveSources:false） */
.rts-root--nolive .rts-live   { display: none; }

/* ── RTS-5. タブとバッジ ────────────────────────────────────── */

.rts-tabs {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
  padding: 0 8px;
  background: var(--surface2);
  border-bottom: 1px solid var(--border);
}

.rts-tab {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--text-mid);
  font-family: var(--sans);
  font-size: 11px;
  padding: 6px 9px;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}
.rts-tab:hover        { color: var(--text); }
.rts-tab--active      { color: var(--cyan); border-bottom-color: var(--cyan); }

/* 件数バッジ。タブを開かなくても情報量が分かるようにするための要 */
.rts-badge {
  font-family: var(--mono);
  font-size: 9px;
  line-height: 1;
  padding: 2px 4px;
  border-radius: 7px;
  background: var(--cyan-dim);
  color: var(--text);
}
.rts-badge:empty      { display: none; }
.rts-badge--zero      { background: var(--border); color: var(--text-mid); }

.rts-openfull {
  background: none;
  border: 1px solid var(--border2);
  border-radius: 3px;
  color: var(--text-mid);
  font-family: var(--sans);
  font-size: 10px;
  padding: 2px 7px;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}
.rts-openfull:hover { color: var(--cyan); border-color: var(--cyan); }

/* full ではタブは見出しの役目だけなので、切替ボタンと導線を隠す */
.rts-root--full .rts-tabs { display: none; }

/* ── RTS-6. ペイン共通 ──────────────────────────────────────── */

.rts-panes {
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.rts-pane {
  min-height: 0;
  flex-direction: column;
}
.rts-pane-title {
  flex-shrink: 0;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--teal);
  padding: 5px 10px 3px;
}
.rts-pane-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 0 10px 8px;
}
/* ペインに overscroll-behavior:contain を付けてはいけない。
   overflow-y:auto はスクロールコンテナを作るので、中身がボックスより短い
   （＝自分ではスクロールできない）ペインでも contain は親への伝播を止めてしまい、
   その領域がホイールの完全な死角になる。full の 2x2 は4枠ぜんぶが死角になっていた。
   リスト末尾でページが送られるのは通常の連鎖動作で、
   scroll-snap-stop:always があるので1セクションずつしか進まない。 */

/* full: 4ペインを 2x2 で同時に見せる */
.rts-root--full .rts-panes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 1px;
  background: var(--border);
}
.rts-root--full .rts-pane {
  display: flex;
  background: var(--surface);
  overflow: hidden;
}

.rts-placeholder {
  color: var(--text-dim);
  font-size: 10px;
  line-height: 1.6;
  padding: 10px 0;
}
.rts-placeholder--loading { color: var(--cyan); }
.rts-placeholder--error   { color: var(--red); }

.rts-note {
  color: var(--text-dim);
  font-size: 9px;
  line-height: 1.5;
  padding-top: 8px;
}

/* ── RTS-7. 履歴リスト ──────────────────────────────────────── */

.rts-list { display: flex; flex-direction: column; }

.rts-row {
  display: grid;
  grid-template-columns: 10px 104px 44px 42px 1fr;
  align-items: center;
  gap: 6px;
  padding: 3px 4px;
  border-bottom: 1px solid var(--border);
  font-family: var(--mono);
  font-size: 10px;
  cursor: pointer;
  transition: background 0.1s;
}
.rts-row:hover     { background: var(--surface2); }
.rts-row--sel      { background: var(--cyan-dim); }

.rts-row-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 1px solid var(--bg);
}
.rts-row-time  { color: var(--text-mid); }
.rts-row-mag   { color: var(--text); font-weight: 600; }
.rts-row-depth { color: var(--text-mid); }
.rts-row-place {
  color: var(--text);
  font-family: var(--sans);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rts-more {
  width: 100%;
  margin-top: 6px;
  background: none;
  border: 1px dashed var(--border2);
  border-radius: 3px;
  color: var(--text-mid);
  font-family: var(--sans);
  font-size: 10px;
  padding: 4px;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}
.rts-more:hover { color: var(--cyan); border-color: var(--cyan); }

/* ── RTS-8. 震度ヒストグラム・サマリ ────────────────────────── */

.rts-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 4px 0 8px;
}
.rts-kv   { display: inline-flex; align-items: baseline; gap: 4px; }
.rts-kv-k { font-size: 9px;  color: var(--text-mid); }
.rts-kv-v { font-family: var(--mono); font-size: 12px; color: var(--text); }

.rts-hist { display: flex; flex-direction: column; gap: 3px; }

.rts-hist-row {
  display: grid;
  grid-template-columns: 62px 1fr 26px;
  align-items: center;
  gap: 6px;
  font-family: var(--mono);
  font-size: 9px;
}
.rts-hist-label { color: var(--text-mid); }
.rts-hist-track {
  height: 8px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 2px;
  overflow: hidden;
}
.rts-hist-fill {
  display: block;
  height: 100%;
  background: var(--cyan);
  opacity: 0.7;
}
.rts-hist-count { color: var(--text); text-align: right; }

/* ── RTS-9. メカタブ（気象庁 メカニズム解カタログ） ──────────── */

/* 過去地震の発震機構解をビーチボールのタイルで並べる面。
   タイルを押すと履歴リストと同じ selectedKey が立つので、選択の見た目も揃える */
.rts-meca-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 6px;
}

.rts-meca-tile {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 6px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--surface);
  cursor: pointer;
  transition: background 0.1s, border-color 0.1s;
}
.rts-meca-tile:hover { background: var(--surface2); }
.rts-meca-tile--sel  { background: var(--cyan-dim); border-color: var(--cyan); }

.rts-meca-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.rts-meca-row {
  display: flex;
  align-items: baseline;
  gap: 5px;
  min-width: 0;
  font-family: var(--mono);
  font-size: 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* モーメントマグニチュード。気象庁Mと別物なので色でも分ける */
.rts-meca-mw { font-family: var(--mono); color: var(--amber); flex-shrink: 0; }

.rts-meca-cat {
  font-family: var(--mono);
  font-size: 9px;
  flex-shrink: 0;
  padding: 0 4px;
  border: 1px solid var(--border2);
  border-radius: 3px;
  color: var(--text-mid);
}

/* 断層型の1行だけは折り返してよい（「横ずれ成分を伴う逆断層型」が入る） */
.rts-meca-style {
  font-family: var(--sans);
  font-size: 11px;
  color: var(--text);
  white-space: normal;
}

/* ── RTS-10. 津波タブ（気象庁 津波データベース） ─────────────── */
/*  上段が検潮所別の最大の高さ、下段が津波イベント一覧。            */
/*  行を押すとそのイベントの内訳に差し替わる（同じ枠を使い回す）    */

.rts-subtitle {
  color: var(--text-mid);
  font-size: 9px;
  letter-spacing: 0.04em;
  padding: 8px 0 4px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 4px;
}

.rts-tstations { display: flex; flex-direction: column; gap: 3px; }

.rts-tst-row {
  display: grid;
  grid-template-columns: 88px 1fr 62px;
  align-items: center;
  gap: 6px;
  font-family: var(--mono);
  font-size: 9px;
}
.rts-tst-name {
  color: var(--text-mid);
  font-family: var(--sans);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rts-tst-track {
  height: 8px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 2px;
  overflow: hidden;
}
.rts-tst-fill {
  display: block;
  height: 100%;
  background: var(--blue);
  opacity: 0.75;
}
/* 計測範囲外＝実際はもっと高い。振り切っていることが分かる色にする */
.rts-tst-fill--over { background: var(--red); opacity: 0.85; }
.rts-tst-val { color: var(--text); text-align: right; }

.rts-trow {
  display: grid;
  grid-template-columns: 58px 74px 40px 1fr 62px;
  align-items: center;
  gap: 6px;
  padding: 3px 4px;
  border-bottom: 1px solid var(--border);
  font-family: var(--mono);
  font-size: 10px;
  cursor: pointer;
  transition: background 0.1s;
}
.rts-trow:hover { background: var(--surface2); }
.rts-trow--sel  { background: var(--cyan-dim); }

.rts-tgrade {
  font-size: 8px;
  text-align: center;
  padding: 1px 0;
  border-radius: 2px;
  border: 1px solid var(--border2);
  color: var(--text-mid);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rts-tgrade--major    { background: var(--red);    color: var(--bg); border-color: var(--red); }
.rts-tgrade--warn     { background: var(--orange); color: var(--bg); border-color: var(--orange); }
.rts-tgrade--advisory { background: var(--yellow); color: var(--bg); border-color: var(--yellow); }
.rts-tgrade--none     { background: none; }

.rts-trow-date  { color: var(--text-mid); }
.rts-trow-mag   { color: var(--text); font-weight: 600; }
.rts-trow-place {
  color: var(--text);
  font-family: var(--sans);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rts-trow-height       { color: var(--text-dim); text-align: right; }
.rts-trow-height--obs  { color: var(--cyan); }

/* ── RTS-11. Responsive ──────────────────────────────────────── */

@media (max-width: 900px) {
  /* full の横並び（地図｜デッキ）を縦積みにする */
  .rts-root--full .rts-body { flex-direction: column; }
  .rts-root--full .rts-mapwrap {
    flex: none;
    height: 45vh;
    min-height: 220px;
    border-right: none;
    border-bottom: 1px solid var(--border);
  }
  .rts-root--full .rts-deck { width: 100%; max-width: none; flex: 1; }
  /* 2x2 では1枠が狭すぎるため1列に伸ばし、デッキ側でスクロールさせる */
  .rts-root--full .rts-panes {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    grid-auto-rows: minmax(180px, auto);
    overflow-y: auto;
  }
  /* 狭い画面では震源地の列を落として時刻・M・距離を優先する */
  .rts-row { grid-template-columns: 10px 1fr 44px 42px; }
  .rts-row-place { display: none; }
  /* 津波は「いつ・どのグレード・どれだけ上がったか」が主。震央地名を落とす */
  .rts-trow { grid-template-columns: 54px 1fr 38px 58px; }
  .rts-trow-place { display: none; }
  .rts-tst-row { grid-template-columns: 72px 1fr 56px; }
}

/* ── 39. 検知レベル表示（統合モニタ 左サイドバー） ────────────── */
/*  判定はサーバ側（/api/detect）が正本。ここは結果を出すだけ        */
.detect-level-panel {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 6px 8px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 4px;
}

.detect-level-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.detect-level-name {
  flex: 0 0 3.2em;
  font-family: var(--sans);
  font-size: 0.78rem;
  color: var(--text-dim);
}

.detect-level-badge {
  flex: 0 0 auto;
  min-width: 1.6em;
  padding: 1px 6px;
  border-radius: 3px;
  font-family: var(--mono);
  font-size: 0.9rem;
  font-weight: 700;
  text-align: center;
  color: var(--text-dim);
  background: var(--surface);
  border: 1px solid var(--border2);
}

.detect-level-badge--l0 { color: var(--bg); background: var(--teal);   border-color: var(--teal); }
.detect-level-badge--l1 { color: var(--bg); background: var(--amber);  border-color: var(--amber); }
.detect-level-badge--l2 { color: var(--bg); background: var(--red);    border-color: var(--red); }

.detect-level-detail {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--sans);
  font-size: 0.74rem;
  color: var(--text-mid);
}

/* ═══════════════════════════════════════════════════════════════
   40. 津波情報ビューア（電文リスト・詳細。js/qv_tsunami_view.js が使う。旧 dev/tsunami_info.html 由来）
   ────────────────────────────────────────────────────────────
   気象庁防災情報XML（津波警報・注意報・予報／津波情報／沖合の津波観測）
   の1電文を「電文リスト｜津波予報区マップ｜詳細」の3ペインで読む画面。
   追加Token : --tsi-g4 … --tsi-g0（津波警報等の深刻度色）
               js/qv_tsunami_xml.js の GRADES と対で維持すること
═══════════════════════════════════════════════════════════════ */

/* ── TSI-1. ページ骨格 ───────────────────────────────────────── */
.tsi-page {
  /* 気象庁の標準配色に合わせた警報等の深刻度色 */
  --tsi-g4: #c800c8;   /* 大津波警報 */
  --tsi-g3: #ff2800;   /* 津波警報   */
  --tsi-g2: #ffe600;   /* 津波注意報 */
  --tsi-g1: #00b4ff;   /* 津波予報   */
  --tsi-g0: #5c6b7a;   /* 解除・津波なし */
  height: 100%;
  overflow: hidden;
}
.tsi-page body { height: 100%; }

.tsi-page #app {
  display: flex;
  flex-direction: column;
  height: 100vh;
}
.tsi-page header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding: 8px 14px 7px;
}

.tsi-main {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: 17rem 1fr 24rem;
}

/* ── TSI-2. ペイン共通 ───────────────────────────────────────── */
.tsi-pane {
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
  background: var(--surface);
  border-left: 1px solid var(--border);
}
.tsi-pane:first-child {
  border-left: 0;
  border-right: 1px solid var(--border);
}

.tsi-pane-head {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  background: var(--surface2);
  border-bottom: 1px solid var(--border);
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: .12em;
  color: var(--text-dim);
  text-transform: uppercase;
}
.tsi-pane-head-title { color: var(--cyan); }
.tsi-pane-head-spacer { flex: 1 1 auto; }

.tsi-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.tsi-empty {
  padding: 18px 12px;
  font-size: 0.74rem;
  line-height: 1.7;
  color: var(--text-dim);
  text-align: center;
}

.tsi-note {
  padding: 7px 10px;
  border-top: 1px solid var(--border);
  font-size: 0.66rem;
  line-height: 1.6;
  color: var(--text-dim);
}
.tsi-note a { color: var(--cyan); }

/* ── TSI-3. 深刻度バッジ ─────────────────────────────────────── */
.tsi-badge {
  display: inline-block;
  flex-shrink: 0;
  padding: 1px 6px;
  border-radius: 2px;
  font-family: var(--mono);
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: .04em;
  white-space: nowrap;
  color: var(--bg);
  background: var(--tsi-g0);
}
.tsi-badge--g4 { background: var(--tsi-g4); color: #fff; }
.tsi-badge--g3 { background: var(--tsi-g3); color: #fff; }
.tsi-badge--g2 { background: var(--tsi-g2); }
.tsi-badge--g1 { background: var(--tsi-g1); }
.tsi-badge--g0 { background: var(--tsi-g0); color: var(--text); }

/* 情報形態（訂正・取消）やサンプル電文の注記に使う枠線だけのバッジ */
.tsi-tag {
  display: inline-block;
  flex-shrink: 0;
  padding: 0 5px;
  border: 1px solid var(--border2);
  border-radius: 2px;
  font-family: var(--mono);
  font-size: 0.62rem;
  color: var(--text-dim);
}
.tsi-tag--warn { border-color: var(--amber); color: var(--amber); }

/* ── TSI-4. 電文リスト ───────────────────────────────────────── */
.tsi-entry {
  display: block;
  width: 100%;
  padding: 8px 10px;
  border: 0;
  border-bottom: 1px solid var(--border);
  border-left: 3px solid transparent;
  border-radius: 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.tsi-entry:hover { background: rgba(0, 212, 255, .06); }
.tsi-entry.is-active {
  background: rgba(0, 212, 255, .1);
  border-left-color: var(--cyan);
}

.tsi-entry-top {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 3px;
}
.tsi-entry-title {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--sans);
  font-size: 0.74rem;
  color: var(--text);
}
.tsi-entry-time {
  font-family: var(--mono);
  font-size: 0.64rem;
  color: var(--amber);
}
.tsi-entry-content {
  font-family: var(--sans);
  font-size: 0.68rem;
  line-height: 1.5;
  color: var(--text-dim);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ── TSI-5. 地図ペイン ───────────────────────────────────────── */
.tsi-map-pane {
  position: relative;
  min-width: 0;
  min-height: 0;
}
.tsi-map { position: absolute; inset: 0; }

.tsi-legend {
  position: absolute;
  left: 10px;
  bottom: 26px;
  z-index: 2;
  padding: 7px 9px;
  border: 1px solid var(--border2);
  border-radius: 3px;
  background: rgba(10, 12, 15, .84);
  font-family: var(--mono);
  font-size: 0.63rem;
  color: var(--text-mid);
}
.tsi-legend-title {
  margin-bottom: 4px;
  letter-spacing: .12em;
  color: var(--text-dim);
}
.tsi-legend-row {
  display: flex;
  align-items: center;
  gap: 6px;
  line-height: 1.7;
}
.tsi-legend-bar {
  width: 16px;
  height: 3px;
  border-radius: 2px;
  background: var(--tsi-g0);
}
.tsi-legend-bar--g4 { background: var(--tsi-g4); }
.tsi-legend-bar--g3 { background: var(--tsi-g3); }
.tsi-legend-bar--g2 { background: var(--tsi-g2); }
.tsi-legend-bar--g1 { background: var(--tsi-g1); }
.tsi-legend-bar--g0 { background: var(--tsi-g0); opacity: .4; }

/* 地図右上の状態表示（読込中・エラー） */
.tsi-map-status {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  padding: 4px 9px;
  border: 1px solid var(--border2);
  border-radius: 3px;
  background: rgba(10, 12, 15, .84);
  font-family: var(--mono);
  font-size: 0.63rem;
  color: var(--text-dim);
}
.tsi-map-status--error { border-color: var(--red); color: var(--red); }

/* 震源マーカー（QVMap.addHtmlMarker） */
.tsi-epicenter {
  width: 26px;
  height: 26px;
  color: var(--tsi-g3);
  filter: drop-shadow(0 0 6px rgba(255, 40, 0, .8));
  pointer-events: none;
}

/* ── TSI-6. 詳細ペイン ───────────────────────────────────────── */
.tsi-banner {
  flex-shrink: 0;
  padding: 9px 11px;
  border-bottom: 1px solid var(--border);
  background: var(--surface2);
  border-left: 4px solid var(--tsi-g0);
}
.tsi-banner--g4 { border-left-color: var(--tsi-g4); }
.tsi-banner--g3 { border-left-color: var(--tsi-g3); }
.tsi-banner--g2 { border-left-color: var(--tsi-g2); }
.tsi-banner--g1 { border-left-color: var(--tsi-g1); }

.tsi-banner-top {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 5px;
}
.tsi-banner-title {
  font-family: var(--mono);
  font-size: 0.8rem;
  color: var(--text);
}
.tsi-banner-meta {
  font-family: var(--mono);
  font-size: 0.64rem;
  color: var(--text-dim);
}
.tsi-banner-text {
  margin-top: 5px;
  font-size: 0.72rem;
  line-height: 1.65;
  color: var(--text-mid);
}

.tsi-sec { border-bottom: 1px solid var(--border); }
.tsi-sec-head {
  padding: 6px 11px;
  background: var(--surface2);
  font-family: var(--mono);
  font-size: 0.63rem;
  letter-spacing: .12em;
  color: var(--text-dim);
  text-transform: uppercase;
}
.tsi-sec-body { padding: 8px 11px; }

/* 地震要素などの ラベル / 値 の2列 */
.tsi-kv {
  display: grid;
  grid-template-columns: 5.5rem 1fr;
  gap: 3px 8px;
  font-size: 0.72rem;
  line-height: 1.55;
}
.tsi-kv dt { color: var(--text-dim); }
.tsi-kv dd { font-family: var(--mono); color: var(--text); word-break: break-word; }

/* 予報区・観測点の1行 */
.tsi-row {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  padding: 5px 11px;
  border-bottom: 1px solid var(--border);
}
.tsi-row:last-child { border-bottom: 0; }
.tsi-row-main { flex: 1 1 auto; min-width: 0; }
.tsi-row-name { font-size: 0.74rem; color: var(--text); }
.tsi-row-sub {
  margin-top: 2px;
  font-family: var(--mono);
  font-size: 0.64rem;
  line-height: 1.55;
  color: var(--text-dim);
}
.tsi-row-side {
  flex-shrink: 0;
  text-align: right;
  font-family: var(--mono);
}
.tsi-row-height {
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--text);
}
.tsi-row-height--g4 { color: var(--tsi-g4); }
.tsi-row-height--g3 { color: var(--tsi-g3); }
.tsi-row-height--g2 { color: var(--tsi-g2); }
.tsi-row-height--g1 { color: var(--tsi-g1); }
.tsi-row-time {
  font-size: 0.64rem;
  color: var(--amber);
}
.tsi-row.is-important { background: rgba(255, 40, 0, .08); }

.tsi-body-text {
  padding: 8px 11px;
  font-size: 0.71rem;
  line-height: 1.7;
  color: var(--text-mid);
  white-space: pre-wrap;
}

/* ── TSI-7. Responsive ───────────────────────────────────────── */
@media (max-width: 1100px) {
  .tsi-main { grid-template-columns: 15rem 1fr 20rem; }
}

@media (max-width: 860px) {
  .tsi-page, .tsi-page body { height: auto; overflow: visible; }
  .tsi-page #app { height: auto; min-height: 100vh; }
  .tsi-main {
    grid-template-columns: 1fr;
    grid-template-rows: auto 60vh auto;
  }
  .tsi-pane, .tsi-pane:first-child {
    border-left: 0;
    border-right: 0;
    border-top: 1px solid var(--border);
  }
  .tsi-pane--list .tsi-scroll { max-height: 32vh; }
  .tsi-legend { bottom: 10px; }
}

/* ═══════════════════════════════════════════════════════════════
   41. 津波監視ボード (js/qv_tsunami_watch.js・app/realtime.html §4)
   ────────────────────────────────────────────────────────────
   津波情報（§40 の tsi-*）と潮位観測（§37 の tide-*）を1画面に束ねる
   レイアウト専用のセクション。中身の見た目は両セクションを再利用し、
   ここではペインの並べ方と地図上の検潮所まわりだけを決める。
═══════════════════════════════════════════════════════════════ */

/* ── TW-1. ページ骨格 ───────────────────────────────────────── */
.tw-page {
  /* 警報等の深刻度色は §40 と同じ。片方だけ直さないこと */
  --tsi-g4: #c800c8;   /* 大津波警報 */
  --tsi-g3: #ff2800;   /* 津波警報   */
  --tsi-g2: #ffe600;   /* 津波注意報 */
  --tsi-g1: #00b4ff;   /* 津波予報   */
  --tsi-g0: #5c6b7a;   /* 解除・津波なし */
  height: 100%;
  overflow: hidden;
}
.tw-page body { height: 100%; }

.tw-page .tw-app {
  display: flex;
  flex-direction: column;
  height: 100vh;
}
.tw-page header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding: 8px 14px 7px;
}

.tw-main {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: 21rem 1fr;
}

/* ── TW-2. 左カラム（電文リスト + 津波情報の詳細） ───────────── */
.tw-side {
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
  background: var(--surface);
  border-right: 1px solid var(--border);
}
/* 電文リストは上に固定枠、詳細が残りを取る */
.tw-side-list {
  flex: 0 0 auto;
  max-height: 34%;
  min-height: 5rem;
}
.tw-side-detail { flex: 1 1 auto; }

/* ── TW-3. 右カラム（地図と潮位パネルを横並び） ─────────────────
   縦積みにすると潮位パネルの高さが足りず、波形が潰れて読めなくなる。
   PC では横に並べてパネルに画面の高さを丸ごと使わせる
   （縦に伸びるモバイルでは TW-5 で縦積みへ戻す）。          */
.tw-stage {
  display: flex;
  flex-direction: row;
  min-height: 0;
  min-width: 0;
}
.tw-map-pane {
  position: relative;
  flex: 1 1 auto;
  min-width: 12rem;
  min-height: 0;
}
.tw-map { position: absolute; inset: 0; }

.tw-tide-pane {
  flex: 0 0 27rem;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  border-left: 1px solid var(--border);
  background: var(--surface);
}
/* たたむと見出しだけ残る（地図を広く使いたいとき）。
   横並びでは幅が、縦積みでは高さが縮む */
.tw-tide-pane.is-collapsed { flex: 0 0 auto; }
.tw-tide-pane.is-collapsed .tw-tide-body,
.tw-tide-pane.is-collapsed .tw-tide-label { display: none; }

/* たたむボタンの向きは並び方で変わる。文字は JS が入れるので
   矢印だけ CSS 側で出し分ける（textContent を上書きしても消えない） */
.tw-tide-toggle::before { content: '◀ '; }
.tw-tide-pane.is-collapsed .tw-tide-toggle::before { content: '▶ '; }

.tw-tide-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}
/* パネル本体（qv_tide_panel.js）は tide_viewer と同じ余白で置く */
.tw-tide-body .tide-content,
.tw-tide-host {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 12px 14px;
}
/* 幅が狭い列に6項目並ぶので、情報バーだけ詰めて折り返す */
.tw-tide-pane .tide-info-bar { gap: 9px 14px; padding: 8px 11px; }
.tw-tide-pane .tide-graph-head,
.tw-tide-pane .tide-chart,
.tw-tide-pane .tide-readout,
.tw-tide-pane .tide-msg { max-width: none; }

/* ── TW-4. 地図の凡例・状態表示 ─────────────────────────────── */
.tw-legend {
  position: absolute;
  left: 10px;
  bottom: 26px;
  z-index: 2;
  padding: 7px 9px;
  border: 1px solid var(--border2);
  border-radius: 3px;
  background: rgba(10, 12, 15, .84);
  font-family: var(--mono);
  font-size: 0.63rem;
  color: var(--text-mid);
}
.tw-legend-title {
  margin-bottom: 4px;
  letter-spacing: .12em;
  color: var(--text-dim);
}
.tw-legend-row {
  display: flex;
  align-items: center;
  gap: 6px;
  line-height: 1.7;
}
.tw-legend-sep {
  margin: 5px 0 3px;
  padding-top: 4px;
  border-top: 1px solid var(--border);
  letter-spacing: .12em;
  color: var(--text-dim);
}
.tw-legend-dot {
  width: 8px; height: 8px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--teal);
}
/* 検潮所は設置機関の6分類で塗り分ける
   （js/qv_tsunami_watch.js の AGENCY_COLOR と対で維持すること） */
.tw-legend-dot--jma   { background: var(--teal); }     /* 気象庁     */
.tw-legend-dot--jcg   { background: var(--amber); }    /* 海上保安庁 */
.tw-legend-dot--gsi   { background: var(--green); }    /* 国土地理院 */
.tw-legend-dot--port  { background: var(--blue); }     /* 港湾局     */
.tw-legend-dot--river { background: var(--purple); }   /* 国土保全局 */
.tw-legend-dot--local { background: var(--pink); }     /* 自治体等   */
/* 電文に観測値がある地点は塗りを変えず輪で示す（機関の色を潰さないため） */
.tw-legend-dot--hit {
  background: transparent;
  border: 2px solid var(--red);
  box-shadow: 0 0 6px rgba(255, 76, 76, .8);
}

.tw-map-status {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  padding: 4px 9px;
  border: 1px solid var(--border2);
  border-radius: 3px;
  background: rgba(10, 12, 15, .84);
  font-family: var(--mono);
  font-size: 0.63rem;
  color: var(--text-dim);
}
.tw-map-status--error { border-color: var(--red); color: var(--red); }

/* 時計。単体ページ時代は #clock（§10）だったが、統合ページでは
   全世界地震モニタの #clock と同じ文書に並ぶので id を tw- に改めた */
.tw-clock {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--amber);
}

/* ── TW-6. スクロールスナップのセクションとして載せる場合 ──────
   単体ページでは <body class="tw-page"> だが、統合ページ
   （app/realtime.html §4）では <section class="qv-snap-section tw-page">
   になる。#app の height:100vh をセクション高さ（= 100%）へ落とす */
.qv-snap-section.tw-page { display: block; }
.qv-snap-section.tw-page .tw-app { height: 100%; }
/* 統合ページではページ上部のナビに QuakeView ロゴがあるので、
   セクション側のロゴと区切り線は出さない（単体ページでは残す） */
.qv-snap-section.tw-page header .nav-logo,
.qv-snap-section.tw-page header .header-divider { display: none; }

/* ── TW-5. Responsive ───────────────────────────────────────── */
@media (max-width: 1280px) {
  .tw-main      { grid-template-columns: 18rem 1fr; }
  .tw-tide-pane { flex-basis: 23rem; }
}

/* 縦に伸びるモバイルレイアウトでは横並びをやめて縦積みに戻す */
@media (max-width: 860px) {
  .tw-page, .tw-page body { height: auto; overflow: visible; }
  .tw-page .tw-app { height: auto; min-height: 100vh; }
  .tw-main {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
  }
  .tw-side {
    border-right: 0;
    border-bottom: 1px solid var(--border);
  }
  .tw-side-list   { max-height: 26vh; }
  .tw-side-detail { max-height: 40vh; }

  .tw-stage     { flex-direction: column; }
  .tw-map-pane  { height: 55vh; }
  .tw-tide-pane {
    flex: 0 0 auto;
    border-left: 0;
    border-top: 1px solid var(--border);
  }
  .tw-tide-body { overflow-y: visible; }
  .tw-tide-toggle::before { content: '▼ '; }
  .tw-tide-pane.is-collapsed .tw-tide-toggle::before { content: '▲ '; }
  .tw-legend { bottom: 10px; }
}

/* ── 40. ビーチボール（発震機構解・qv_beachball.js） ──────────── */

/* 下半球等積投影の円。押し（圧縮）は canvas 側で塗るので、
   ここが持つのは縁と地の色だけ。リアルタイム検索は .rts-beachball を使う */
.qv-beachball {
  flex-shrink: 0;
  border-radius: 50%;
  border: 1px solid var(--border2);
  background: var(--surface2);
}

/* 地図に重ねるビーチボール（earthquake_viz）。影で背景から浮かせる */
.qv-beachball--map {
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.6);
  cursor: pointer;
}

/* 震源マップのヘッダに置くトグル */
.mech-toggle { margin-left: 10px; }

/* データテーブルの発震機構列 */
.mech-cell-inner {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

/* カタログの別（CMT解 / 初動解）。決め方が違うだけでどちらも正しい解 */
.mech-cat {
  font-family: var(--mono);
  font-size: 9px;
  flex-shrink: 0;
  padding: 0 4px;
  border: 1px solid var(--border2);
  border-radius: 3px;
  color: var(--text-mid);
}

/* モーメントマグニチュード。気象庁Mと別物なので色でも分ける */
.mech-mw { font-family: var(--mono); color: var(--amber); }

/* 地図ポップアップに足す発震機構の行 */
.mech-popup {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid var(--border);
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.6;
  color: var(--text);
}

/* ── 41. 座標入力（10進・60進の両対応・qv_coord.js） ──────────────
   type="text" の緯度経度欄。読めない値は枠を赤くし、60進で入れた値は
   .coord-hint に10進へ直した値を出す（何として読んだかを見せる）
─────────────────────────────────────────────────────────────── */
.coord-input { width: 11em; }
.coord-input--invalid,
.coord-input--invalid:hover,
.coord-input--invalid:focus { border-color: var(--red) !important; }
.coord-hint {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--text-mid);
  white-space: nowrap;
}
.coord-hint--error { color: var(--red); }

/* ── 43. 仮想スクロールの一覧 (qv_vlist.js) ────────────────
   土台（.qvl-spacer）が全件分の高さを持ち、窓（.qvl-window）に見えている行だけを載せる。
   行の高さは使う側の CSS（.idb-ev など）が決める。ここでは流し込む器だけを用意する */
.qvl-spacer { position: relative; width: 100%; }
.qvl-window {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  will-change: transform;
}

/* ── 42. 計測震度データベース検索（dev/intensity_db・qv_intensity_db.js） ──
   気象庁 震度データベース検索と同じ3列構成
   （左: 地震の一覧 / 中央: 地図 / 右: 検索条件）。
   計測震度の色は Turbo（qv_intensity_color.js）で、値ごとに style 属性で与える
─────────────────────────────────────────────────────────────── */

/* ─ 3列レイアウト ─ */
.idb-side {
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.idb-side--list {
  width: 340px;
  border-left: none;
  border-right: 1px solid var(--border);
  padding: 0;
  overflow: hidden;
}
.idb-side--cond {
  width: 270px;
  padding: 0;
  overflow: hidden;
  transition: width .15s;
}

/* ─ 検索条件の開閉（右サイドバー） ─ */
.idb-cond-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  width: 100%;
  padding: 8px 10px;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--border);
  color: var(--text-mid);
  font-family: var(--sans);
  font-size: 11px;
  text-align: left;
  cursor: pointer;
}
.idb-cond-toggle:hover { color: var(--cyan); background: var(--surface2); }
.idb-cond-toggle-icon {
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1;
  color: var(--cyan);
}
.idb-cond-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 10px 8px 12px;
}

/* 畳んだ状態: 細い帯だけ残し、縦書きの見出しを押すと開く */
.idb-side--cond.idb-side--collapsed { width: 30px; }
.idb-side--collapsed .idb-cond-body { display: none; }
.idb-side--collapsed .idb-cond-toggle {
  flex: 1;
  flex-direction: column;
  justify-content: flex-start;
  padding: 10px 0;
  border-bottom: none;
}
.idb-side--collapsed .idb-cond-toggle-label {
  writing-mode: vertical-rl;
  letter-spacing: .2em;
}

/* ─ タブ（地震の一覧 / 観測点の震度） ─ */
.idb-tabs {
  display: flex;
  flex-shrink: 0;
  border-bottom: 1px solid var(--border);
}
.idb-tab {
  flex: 1;
  padding: 8px 4px;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--text-mid);
  font-family: var(--sans);
  font-size: 11px;
  cursor: pointer;
}
.idb-tab:hover { color: var(--text); }
.idb-tab--on {
  color: var(--cyan);
  border-bottom-color: var(--cyan);
}
.idb-tab-n {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--text-dim);
}

.idb-pane {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  padding: 8px;
}
.idb-pane[hidden] { display: none; }

.idb-count {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--text-mid);
  padding: 0 2px 6px;
}
.idb-count--over { color: var(--amber); }

.idb-list-head {
  display: grid;
  grid-template-columns: 1fr 44px 52px;
  gap: 6px;
  padding: 0 6px 4px;
  font-size: 9px;
  color: var(--text-dim);
  border-bottom: 1px solid var(--border);
}
.idb-list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  outline: none;
}

/* ─ 地震の行 ─ */
.idb-ev {
  display: grid;
  grid-template-columns: 1fr 44px 52px;
  gap: 6px;
  align-items: center;
  width: 100%;
  padding: 5px 6px;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--border);
  border-left: 2px solid transparent;
  color: var(--text);
  text-align: left;
  cursor: pointer;
}
.idb-ev:hover { background: var(--surface2); }
.idb-ev--on {
  background: var(--accent-dim);
  border-left-color: var(--cyan);
}
.idb-ev-main {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.idb-ev-time {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--text-mid);
  font-variant-numeric: tabular-nums;
}
.idb-ev-place {
  font-size: 11px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.idb-ev-sub {
  font-family: var(--mono);
  font-size: 10px;
  line-height: 1.3;
  color: var(--text-mid);
  text-align: right;
}

/* 最大計測震度のバッジ（枠と文字の色は Turbo を style で与える） */
.idb-si {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 46px;
  padding: 1px 4px;
  border: 1px solid;
  border-radius: 3px;
  background: var(--bg);
  line-height: 1.1;
}
.idb-si b {
  font-family: var(--mono);
  font-size: 13px;
}
.idb-si small {
  font-size: 9px;
  color: var(--text-mid);
}

/* ─ 観測点の震度 ─ */
.idb-classes { flex-shrink: 0; padding-bottom: 6px; }
.idb-class-row {
  display: grid;
  grid-template-columns: 52px 1fr 44px;
  gap: 6px;
  align-items: center;
  padding: 1px 0;
  font-size: 10px;
}
.idb-class-label { color: var(--text); }
.idb-class-bar {
  height: 6px;
  background: var(--surface2);
  border-radius: 2px;
  overflow: hidden;
}
.idb-class-bar span { display: block; height: 100%; }
.idb-class-n {
  font-family: var(--mono);
  color: var(--text-mid);
  text-align: right;
}

/* 計測震度の分布（折れ線・qv_timeseries.js で描く） */
.idb-hist {
  flex-shrink: 0;
  margin: 2px 0 8px;
  padding-top: 6px;
  border-top: 1px solid var(--border);
}
.idb-hist[hidden] { display: none; }
.idb-hist-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 6px;
  font-size: 10px;
  margin-bottom: 2px;
}
.idb-hist-title { color: var(--text-dim); letter-spacing: .06em; }
.idb-hist-note {
  font-family: var(--mono);
  color: var(--cyan);
  white-space: nowrap;
}
.idb-hist-svg {
  display: block;
  width: 100%;
  height: auto;
}
.idb-line--si { stroke: var(--cyan); stroke-width: 1.4; }
.idb-area--si { fill: var(--cyan); opacity: .16; }
.idb-dot--si  { fill: var(--cyan); }   /* カーソルの点は塗り。線のクラスを使い回すと塗りが黒になる */

.idb-st-filter { margin: 0 0 6px; width: 100%; flex-shrink: 0; }

.idb-st {
  display: grid;
  grid-template-columns: 10px 58px 1fr 34px;
  gap: 6px;
  align-items: center;
  width: 100%;
  padding: 3px 4px;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--border);
  color: var(--text);
  font-size: 11px;
  text-align: left;
  cursor: pointer;
}
.idb-st:hover { background: var(--surface2); }
.idb-st--nocoord { cursor: default; opacity: .6; }
.idb-st-swatch { width: 10px; height: 10px; border-radius: 50%; }
.idb-st-pref {
  font-size: 10px;
  color: var(--text-mid);
  overflow: hidden;
  white-space: nowrap;
}
.idb-st-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.idb-st-si {
  font-family: var(--mono);
  font-weight: 700;
  text-align: right;
}

/* ─ 地図に重ねる選択中の地震カード ─ */
.idb-card {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 500;
  width: 240px;
  padding: 8px 10px;
  background: var(--surface);
  border: 1px solid var(--border2);
  border-radius: 4px;
  font-size: 11px;
  opacity: .94;
}
.idb-card[hidden] { display: none; }
.idb-card-head {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 6px;
}
.idb-card-time {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--text-mid);
}
.idb-card-place { font-size: 12px; color: var(--text); }

/* 選んだ地震の震央 */
.idb-epicenter {
  font-family: var(--mono);
  font-size: 26px;
  font-weight: 700;
  line-height: 1;
  color: var(--text);
  text-shadow: 0 0 3px var(--bg), 0 0 6px var(--bg);
  user-select: none;
}

/* ─ 検索条件フォーム ─ */
.idb-form { display: flex; flex-direction: column; gap: 8px; }
.idb-field {
  min-width: 0;   /* fieldset の既定 min-inline-size: min-content だと列からはみ出す */
  margin: 0;
  padding: 6px 8px 8px;
  border: 1px solid var(--border);
  border-radius: 3px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.idb-field legend {
  padding: 0 4px;
  font-size: 10px;
  color: var(--text-mid);
}
.idb-row {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
}
.idb-row > input { flex: 1; min-width: 0; }
/* time 入力は §12 に無いので date と同じ見た目をここで与える */
.idb-form input[type="time"] {
  flex: 0 0 92px;
  background: var(--bg);
  border: 1px solid var(--border2);
  color: var(--text);
  font-family: var(--mono);
  font-size: 10px;
  padding: 3px 4px;
  border-radius: 2px;
  outline: none;
  color-scheme: dark;
}
.idb-row-label {
  flex: 0 0 48px;
  font-size: 10px;
  color: var(--text-dim);
}
.idb-sep { color: var(--text-dim); flex-shrink: 0; }
.idb-wide { width: 100%; min-width: 0; }
.idb-presets { display: flex; flex-wrap: wrap; gap: 4px; }
.idb-presets .btn { padding: 2px 8px; }
.idb-actions { display: flex; gap: 6px; }
.idb-actions .btn { flex: 1; padding: 6px 8px; font-size: 11px; }

.idb-status {
  min-height: 1.4em;
  font-family: var(--mono);
  font-size: 10px;
  color: var(--text-mid);
}
.idb-status--busy  { color: var(--amber); }
.idb-status--ok    { color: var(--teal); }
.idb-status--error { color: var(--red); }

.idb-info { font-size: 11px; }
.idb-note {
  margin-top: 6px;
  font-size: 10px;
  line-height: 1.5;
  color: var(--text-dim);
}

/* ─ レスポンシブ: 860px 以下は地図 → 一覧 → 条件の縦積み ─ */
@media (max-width: 860px) {
  .rtm-body:has(.idb-main) { height: auto; min-height: 100vh; overflow: auto; }
  .idb-main { flex-direction: column; overflow: visible; }
  .idb-main > .rtm-map-wrap { order: 1; flex: none; height: 60vh; min-height: 260px; }
  .idb-main > .idb-side--list {
    order: 2; width: 100%; height: 70vh; flex: none;
    border-right: none; border-top: 1px solid var(--border);
  }
  .idb-main > .idb-side--cond,
  .idb-main > .idb-side--cond.idb-side--collapsed {
    order: 3; width: 100%; flex: none; overflow: visible; transition: none;
    border-left: none; border-top: 1px solid var(--border);
  }
  .idb-cond-body { overflow: visible; }
  /* 縦積みでは帯にせず、見出しの行だけ残す */
  .idb-side--collapsed .idb-cond-toggle { flex-direction: row; padding: 8px 10px; }
  .idb-side--collapsed .idb-cond-toggle-label { writing-mode: horizontal-tb; letter-spacing: normal; }
  .idb-card { width: 200px; }
}


/* ── 43. 気象庁 地震情報ビューア（dev/jma_quake_info・qv_quake_info.js） ──
   左: 情報の一覧 / 中央: 地図（細分区域の塗り＋震度観測点）/ 右: 電文の詳細。
   震度の色は QVIntensityColor（階級の代表計測震度）から来るので、
   バッジと区域の色は style 属性で流し込む。ここでは形だけを持つ。
────────────────────────────────────────────────────────────── */

/* ── JQ-1. ページ骨格 ───────────────────────────────────────── */
.jq-main {
  overflow: hidden;
}

.jq-side {
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 0;
  overflow: hidden;
}
.jq-side--list {
  width: 19rem;
  border-left: 0;
  border-right: 1px solid var(--border);
}
.jq-side--detail {
  width: 23rem;
}

/* ── JQ-2. 一覧（左） ───────────────────────────────────────── */
.jq-filter {
  flex-shrink: 0;
  display: flex;
  gap: 6px;
  padding: 8px;
  border-bottom: 1px solid var(--border);
  background: var(--surface2);
}
.jq-select {
  flex: 1 1 0;
  min-width: 0;
  padding: 3px 4px;
  background: var(--bg);
  border: 1px solid var(--border2);
  border-radius: 3px;
  color: var(--text);
  font-family: var(--sans);
  font-size: 11px;
}

.jq-listhead {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 10px;
  border-bottom: 1px solid var(--border);
  font-family: var(--mono);
  font-size: 10px;
  color: var(--text-dim);
}
.jq-listhead-spacer { flex: 1 1 auto; }
.jq-listhead .live { margin-top: 0; }

.jq-list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.jq-note {
  flex-shrink: 0;
  padding: 7px 10px;
  border-top: 1px solid var(--border);
  font-size: 10px;
  line-height: 1.6;
  color: var(--text-dim);
}
.jq-note a { color: var(--cyan); }

/* ─ 一覧の1行 ─ */
.jq-entry {
  display: block;
  width: 100%;
  padding: 7px 10px;
  border: 0;
  border-bottom: 1px solid var(--border);
  border-left: 3px solid transparent;
  border-radius: 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.jq-entry:hover { background: rgba(0, 212, 255, .06); }
.jq-entry.is-active {
  background: rgba(0, 212, 255, .1);
  border-left-color: var(--cyan);
}

.jq-entry-top {
  display: flex;
  align-items: center;
  gap: 6px;
}
.jq-entry-place {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--sans);
  font-size: 12px;
  color: var(--text);
}
.jq-entry-mag {
  flex-shrink: 0;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--amber);
}
.jq-entry-sub {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 3px;
  padding-left: 30px;
}
.jq-entry-time {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--text-mid);
}

/* ── JQ-3. 震度バッジ・タグ ─────────────────────────────────── */
.jq-int {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 24px;
  height: 20px;
  border-radius: 3px;
  background: var(--surface2);
  color: var(--text-dim);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
}
.jq-int--sm {
  width: 20px;
  height: 16px;
  font-size: 9.5px;
}
.jq-int--none {
  border: 1px solid var(--border2);
  background: transparent;
}

.jq-tag {
  display: inline-block;
  flex-shrink: 0;
  padding: 0 5px;
  border: 1px solid var(--border2);
  border-radius: 2px;
  font-family: var(--mono);
  font-size: 9.5px;
  line-height: 1.5;
  color: var(--text-dim);
}
.jq-tag--warn { border-color: var(--amber); color: var(--amber); }

/* ── JQ-4. 地図 ─────────────────────────────────────────────── */
.jq-map-status {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 500;
  padding: 5px 12px;
  border: 1px solid var(--border2);
  border-radius: 3px;
  background: var(--surface);
  font-family: var(--mono);
  font-size: 10px;
  color: var(--text-mid);
  opacity: .95;
}
.jq-map-status[hidden] { display: none; }
.jq-map-status--error { border-color: var(--red); color: var(--red); }

.jq-epicenter {
  font-family: var(--mono);
  font-size: 26px;
  font-weight: 700;
  line-height: 1;
  color: var(--text);
  text-shadow: 0 0 3px var(--bg), 0 0 6px var(--bg);
  user-select: none;
}

/* ── JQ-5. 詳細（右） ───────────────────────────────────────── */
.jq-detail {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 10px;
  font-size: 11px;
}

.jq-detail-head {
  padding-bottom: 7px;
  border-bottom: 1px solid var(--border);
}
.jq-detail-title {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  font-family: var(--sans);
  font-size: 13px;
  color: var(--cyan);
}
.jq-detail-meta {
  margin-top: 3px;
  font-family: var(--mono);
  font-size: 10px;
  color: var(--text-dim);
}
.jq-detail-foot {
  margin-top: 12px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
}

.jq-headline {
  margin: 8px 0 0;
  line-height: 1.7;
  color: var(--text);
}

.jq-maxint {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-mid);
}
.jq-maxint-note { color: var(--text-dim); }

.jq-section-title {
  margin: 12px 0 5px;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .18em;
  color: var(--text-dim);
  text-transform: uppercase;
}

/* ─ 震源要素の表 ─ */
.jq-table {
  width: 100%;
  margin-top: 8px;
  border-collapse: collapse;
  font-size: 11px;
}
.jq-table th,
.jq-table td {
  padding: 3px 4px;
  border-bottom: 1px solid var(--border);
  text-align: left;
  vertical-align: top;
}
.jq-table th {
  width: 5.5rem;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 400;
  color: var(--text-dim);
}
.jq-table td {
  font-family: var(--mono);
  color: var(--text);
}

/* ─ 階級ごとの件数 ─ */
.jq-counts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}
.jq-count-row {
  display: flex;
  align-items: center;
  gap: 3px;
}
.jq-count-n {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--text-mid);
}

/* ─ 震度の内訳ツリー ─ */
.jq-tree { border-top: 1px solid var(--border); }
.jq-pref { border-bottom: 1px solid var(--border); padding-bottom: 3px; }
.jq-area { margin-left: 6px; }
.jq-city { margin-left: 6px; }

.jq-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 2px 0;
  line-height: 1.4;
}
.jq-row--pref { margin-top: 5px; }
.jq-row--area { color: var(--text-mid); }
.jq-row--city { cursor: pointer; list-style: none; }
.jq-row--city::-webkit-details-marker { display: none; }
.jq-row--city:hover { color: var(--cyan); }
.jq-row--st { margin-left: 12px; color: var(--text-dim); }

.jq-row-name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.jq-row-note {
  flex-shrink: 0;
  font-family: var(--mono);
  font-size: 9.5px;
  color: var(--text-dim);
}

/* ─ 注釈・本文 ─ */
.jq-comment {
  margin: 4px 0;
  line-height: 1.6;
  color: var(--text-mid);
}
.jq-comment-label {
  display: inline-block;
  margin-right: 5px;
  padding: 0 4px;
  border: 1px solid var(--border2);
  border-radius: 2px;
  font-family: var(--mono);
  font-size: 9.5px;
  color: var(--text-dim);
}
.jq-free {
  margin: 0;
  max-height: 20rem;
  overflow-y: auto;
  padding: 7px 8px;
  border: 1px solid var(--border);
  border-radius: 3px;
  background: var(--surface2);
  font-family: var(--sans);
  font-size: 10.5px;
  line-height: 1.7;
  color: var(--text-mid);
  white-space: pre-wrap;
  word-break: break-word;
}

/* ─ 同じ地震の他の報 ─ */
.jq-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.jq-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 6px;
  border: 1px solid var(--border2);
  border-radius: 3px;
  background: transparent;
  color: var(--text-mid);
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: normal;
  cursor: pointer;
}
.jq-chip:hover { border-color: var(--cyan); color: var(--cyan); }
.jq-chip-time { font-family: var(--mono); font-size: 9.5px; color: var(--text-dim); }

/* ── JQ-6. Responsive ───────────────────────────────────────── */
/* 860px 以下は地図 → 一覧 → 詳細の縦積み（横3列は収まらない） */
@media (max-width: 860px) {
  .rtm-body:has(.jq-main) { height: auto; min-height: 100vh; overflow: auto; }
  .jq-main { flex-direction: column; overflow: visible; }
  .jq-main > .rtm-map-wrap { order: 1; flex: none; height: 60vh; min-height: 260px; }
  .jq-main > .jq-side--list {
    order: 2; width: 100%; height: 60vh; flex: none;
    border-right: none; border-top: 1px solid var(--border);
  }
  .jq-main > .jq-side--detail {
    order: 3; width: 100%; height: auto; flex: none; overflow: visible;
    border-left: none; border-top: 1px solid var(--border);
  }
  .jq-detail { overflow: visible; }
  /* 縦積みでは帯にせず、見出しの1行だけ残す（qv_fold.js） */
  .jq-main > .jq-side.qv-fold--collapsed { flex: none; width: 100%; height: auto; min-width: 0; }
  .jq-side.qv-fold--collapsed > .qv-fold-toggle { flex: none; flex-direction: row; padding: 7px 10px; }
  .jq-side.qv-fold--collapsed .qv-fold-label { writing-mode: horizontal-tb; letter-spacing: normal; }
  .jq-main > .jq-side.qv-fold .qv-fold-icon::before { content: '▲'; }
  .jq-main > .jq-side.qv-fold.qv-fold--collapsed .qv-fold-icon::before { content: '▼'; }
}


/* ── 44. 畳める区画（qv_fold.js） ───────────────────────────────
   区画に .qv-fold、開閉ボタンに .qv-fold-toggle を付ける。
   畳むとボタン以外の子をすべて隠し、細い帯（縦書きの見出し）だけ残す。
   帯の側は修飾クラスで決める（--left: 左端の区画 / --right: 右端の区画）。
   地図を含む区画は幅が変わるので、呼び出し側が map.resize() する
─────────────────────────────────────────────────────────────── */
.qv-fold-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  width: 100%;
  padding: 7px 10px;
  background: var(--surface2);
  border: none;
  border-bottom: 1px solid var(--border);
  color: var(--text-mid);
  font-family: var(--sans);
  font-size: 11px;
  text-align: left;
  cursor: pointer;
}
.qv-fold-toggle:hover { color: var(--cyan); }
.qv-fold-label {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.qv-fold-icon {
  flex-shrink: 0;
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1;
  color: var(--cyan);
}
/* 矢印は「押すとどちらへ動くか」。左端の区画は左へ畳まれ、右端は右へ畳まれる */
.qv-fold--left  .qv-fold-icon::before { content: '«'; }
.qv-fold--right .qv-fold-icon::before { content: '»'; }
.qv-fold--left.qv-fold--collapsed  .qv-fold-icon::before { content: '»'; }
.qv-fold--right.qv-fold--collapsed .qv-fold-icon::before { content: '«'; }

/* 畳んだ状態: 幅30pxの帯。見出しを縦書きにして帯全体をボタンにする */
.qv-fold.qv-fold--collapsed {
  display: flex;
  flex-direction: column;
  flex: 0 0 30px;
  width: 30px;
  min-width: 30px;
  padding: 0;
  overflow: hidden;
}
.qv-fold--collapsed > :not(.qv-fold-toggle) { display: none; }
.qv-fold--collapsed > .qv-fold-toggle {
  position: static;
  flex: 1 1 auto;
  flex-direction: column;
  justify-content: flex-start;
  width: 100%;
  padding: 10px 0;
  border: none;
  border-radius: 0;
  background: var(--surface);
}
.qv-fold--collapsed > .qv-fold-toggle:hover { background: var(--surface2); }
.qv-fold--collapsed .qv-fold-label {
  flex: 0 1 auto;
  writing-mode: vertical-rl;
  letter-spacing: .2em;
  overflow: visible;
}

/* ── 45. 緊急地震速報 × 震度分布予測AI（いまは dev/quake_predict・qv_quake_predict.js が使う） ──
   左: 地図（観測点ごとの予測震度）/ 右: 速報・予測の要約・報ごとの推移・テスト入力。
   震度の色は QVIntensityColor から来るので、見本の色は style 属性で流し込む。
   ここでは形だけを持つ。
────────────────────────────────────────────────────────────── */

/* ── EP-1. ページ骨格 ───────────────────────────────────────── */
.ep-main { overflow: hidden; }

.ep-side {
  display: flex;
  flex-direction: column;
  width: 22rem;
  min-height: 0;
  padding: 0;
  overflow: hidden;
}
.ep-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 10px;
}

.ep-map-status {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 500;
  padding: 5px 12px;
  border: 1px solid var(--border2);
  border-radius: 3px;
  background: var(--surface);
  font-family: var(--mono);
  font-size: 10px;
  color: var(--text-mid);
  opacity: .95;
}
.ep-map-status[hidden] { display: none; }

/* ── EP-2. 状態の帯 ─────────────────────────────────────────── */
.ep-status {
  margin-bottom: 10px;
  padding: 7px 10px;
  border: 1px solid var(--border2);
  border-left-width: 4px;
  border-radius: 3px;
  background: var(--surface2);
  font-size: 12px;
  line-height: 1.5;
  color: var(--text);
}
.ep-status--idle   { border-left-color: var(--dim);   color: var(--text-dim); }
.ep-status--active { border-left-color: var(--amber); }
.ep-status--warn   { border-left-color: var(--red);   color: var(--red); font-weight: 600; }
.ep-status--ended  { border-left-color: var(--text-dim); }
.ep-status--cancel { border-left-color: var(--text-dim); color: var(--text-dim); }
.ep-status--past   { border-left-color: var(--blue); }
.ep-status--test   { border-left-color: var(--purple); color: var(--purple); }

/* ── EP-3. 区画 ─────────────────────────────────────────────── */
.ep-block {
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}
.ep-h {
  margin: 0 0 6px;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .08em;
  color: var(--text-dim);
}
.ep-dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 3px 10px;
  margin: 0;
  font-size: 11px;
}
.ep-dl dt { color: var(--text-dim); }
.ep-dl dd { margin: 0; color: var(--text); font-family: var(--mono); }

.ep-toggle { display: flex; gap: 6px; margin-bottom: 8px; }
.ep-toggle-btn { flex: 1 1 0; font-size: 11px; opacity: .5; }
.ep-toggle-btn--on { opacity: 1; background: var(--cyan-dim); border-color: var(--cyan); color: var(--text); }

.ep-counts { display: flex; flex-wrap: wrap; gap: 4px; margin: 8px 0; }
.ep-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 6px;
  border: 1px solid var(--border2);
  border-radius: 3px;
  font-size: 10.5px;
  color: var(--text-mid);
}
.ep-chip b { color: var(--text); font-family: var(--mono); font-weight: 400; }
.ep-chip-sw {
  display: inline-block;
  flex-shrink: 0;
  width: 9px;
  height: 9px;
  border-radius: 2px;
}

.ep-top { margin: 0; padding: 0; list-style: none; font-size: 11px; }
.ep-top li { display: flex; align-items: center; gap: 6px; padding: 2px 0; }
.ep-top-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ep-top-si { font-family: var(--mono); color: var(--text-mid); }

/* ── EP-4. 報ごとの推移 ─────────────────────────────────────── */
.ep-hist-wrap { max-height: 14rem; overflow-y: auto; overscroll-behavior: contain; }
.ep-hist { width: 100%; border-collapse: collapse; font-family: var(--mono); font-size: 10.5px; }
.ep-hist th {
  position: sticky;
  top: 0;
  padding: 3px 4px;
  background: var(--surface);
  color: var(--text-dim);
  font-weight: 400;
  text-align: right;
}
.ep-hist td { padding: 2px 4px; border-top: 1px solid var(--border); text-align: right; color: var(--text); }
.ep-hist th:first-child, .ep-hist td:first-child { text-align: left; }
.ep-hist-cancel td { color: var(--text-dim); text-decoration: line-through; }
.ep-hist-empty { text-align: center; color: var(--text-dim); }

/* ── EP-5. テスト入力 ───────────────────────────────────────── */
.ep-test { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.ep-test label { display: flex; flex-direction: column; gap: 2px; font-size: 10px; color: var(--text-dim); }
.ep-test .btn { grid-column: 1 / -1; }
.ep-in {
  padding: 3px 5px;
  background: var(--bg);
  border: 1px solid var(--border2);
  border-radius: 3px;
  color: var(--text);
  font-family: var(--mono);
  font-size: 11px;
}
.ep-note { margin: 6px 0 0; font-size: 10px; line-height: 1.6; color: var(--text-dim); }

/* ── EP-6. Responsive ───────────────────────────────────────── */
/* 860px 以下は地図 → 右の区画の縦積み */
@media (max-width: 860px) {
  .rtm-body:has(.ep-main) { height: auto; min-height: 100vh; overflow: auto; }
  .ep-main { flex-direction: column; overflow: visible; }
  .ep-main > .rtm-map-wrap { order: 1; flex: none; height: 60vh; min-height: 260px; }
  .ep-main > .ep-side {
    order: 2; width: 100%; height: auto; flex: none; overflow: visible;
    border-left: none; border-top: 1px solid var(--border);
  }
  .ep-body { overflow: visible; }
  .ep-main > .ep-side.qv-fold--collapsed { flex: none; width: 100%; height: auto; min-width: 0; }
  .ep-side.qv-fold--collapsed > .qv-fold-toggle { flex: none; flex-direction: row; padding: 7px 10px; }
  .ep-side.qv-fold--collapsed .qv-fold-label { writing-mode: horizontal-tb; letter-spacing: normal; }
}

/* ── 46. 震源の凡例（深さの色・Mの大きさ・qv_hypo_style.js） ──────────
   色は style 属性で流し込む（深さの節は JS 側が正本）。ここでは形だけを持つ。
   地図の上に重ねるので、面を持たせて下の地図に埋もれないようにする
─────────────────────────────────────────────────────────────── */
.hs-legend {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: 3px;
  background: var(--surface);
  opacity: .92;
}
.hs-legend-row {
  display: flex;
  align-items: flex-end;
  gap: 8px;
}
.hs-legend-label {
  flex: 0 0 4.2em;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .08em;
  color: var(--text-dim);
}
.hs-depth {
  position: relative;
  width: 150px;
  padding-bottom: 12px;
}
.hs-depth-bar {
  height: 8px;
  border: 1px solid var(--border2);
  border-radius: 2px;
}
.hs-depth-ticks {
  position: absolute;
  top: 11px;
  right: 0;
  left: 0;
  height: 12px;
}
.hs-tick {
  position: absolute;
  transform: translateX(-50%);
  font-family: var(--mono);
  font-size: 8px;
  color: var(--text-mid);
}
.hs-mags {
  display: flex;
  align-items: flex-end;
  gap: 10px;
}
.hs-mag {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  font-family: var(--mono);
  font-size: 9px;
  color: var(--text-mid);
}
.hs-mag-dot {
  display: block;
  border: 1px solid var(--text-mid);
  border-radius: 50%;
}
/* 狭い画面では地図を覆いすぎるので、Mの大きさの見本（大きい丸）は隠して深さの色だけ残す */
@media (max-width: 600px) {
  .hs-legend-row:nth-child(2) { display: none; }
  .hs-depth { width: 130px; }
}

/* ── 47. タイムバー付き震源マップ（dev/hypo_timeline・qv_hypo_timeline.js） ──
   左: 取得条件（畳める）/ 中央: 地図とタイムバー。
   タイムバーは件数の分布（QVTimeSeries の SVG）の上に、いま描いている窓（帯）と
   カーソル（縦線）を重ねる。窓とカーソルの位置は JS が % で入れる
─────────────────────────────────────────────────────────────── */

/* ── HTL-1. ページ骨格 ─────────────────────────────────────── */
.htl-main { overflow: hidden; }

.htl-side {
  display: flex;
  flex-direction: column;
  width: 250px;
  min-height: 0;
  padding: 0;
  overflow: hidden;
  border-right: 1px solid var(--border);
  border-left: none;
}
.htl-side-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 10px 8px 12px;
}

.htl-stage {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
}
.htl-stage > .rtm-map-wrap { flex: 1 1 0; min-height: 0; }
/* 縦に並べた flex 子の % 高さは環境で解決されないことがあるので、地図は枠いっぱいに敷く */
.htl-stage .rtm-map-area { position: absolute; inset: 0; width: auto; height: auto; }

.htl-map-msg {
  position: absolute;
  top: 10px;
  left: 50%;
  z-index: 500;
  transform: translateX(-50%);
  padding: 5px 12px;
  border: 1px solid var(--border2);
  border-radius: 3px;
  background: var(--surface);
  font-family: var(--mono);
  font-size: 10px;
  color: var(--text-mid);
  opacity: .95;
  pointer-events: none;
}
.htl-map-msg[hidden] { display: none; }

/* ── HTL-2. 取得条件 ───────────────────────────────────────── */
.htl-form { display: flex; flex-direction: column; gap: 10px; }
.htl-field {
  min-width: 0;
  padding: 4px 8px 8px;
  border: 1px solid var(--border);
  border-radius: 3px;
}
.htl-field legend {
  padding: 0 4px;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .1em;
  color: var(--text-dim);
}
.htl-row { display: flex; align-items: center; gap: 6px; margin-top: 6px; }
.htl-row-label { flex: 0 0 4.6em; font-size: 10px; color: var(--text-mid); }
.htl-row input,
.htl-row select { flex: 1 1 0; width: 100%; min-width: 0; }
.htl-sep { flex: 0 0 auto; color: var(--text-dim); }
.htl-presets { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; }
.htl-preset { padding: 3px 8px; font-size: 10px; }
.htl-actions .btn { width: 100%; padding: 6px 12px; }

.htl-status {
  min-height: 1.5em;
  font-size: 10px;
  line-height: 1.5;
  color: var(--text-mid);
  white-space: pre-line;
}
.htl-status--busy  { color: var(--cyan); }
.htl-status--ok    { color: var(--green); }
.htl-status--warn  { color: var(--amber); }
.htl-status--error { color: var(--red); }

.htl-stats {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 3px 10px;
  margin: 0;
  font-size: 11px;
}
.htl-stats dt { color: var(--text-dim); }
.htl-stats dd { margin: 0; font-family: var(--mono); color: var(--text); text-align: right; }

/* ── HTL-3. タイムバー（地図の下） ─────────────────────────── */
.htl-dock {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 8px;
  padding: 8px 14px 10px;
  border-top: 1px solid var(--border);
  background: var(--surface);
}
.htl-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }

.htl-transport { display: flex; gap: 4px; }
.htl-tp {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 26px;
  padding: 0;
}
.htl-tp--play { width: 42px; }
.htl-tp svg { display: block; width: 14px; height: 14px; fill: currentColor; }
.htl-play-icon,
.htl-pause-icon { display: inline-flex; }
.htl-play-icon[hidden],
.htl-pause-icon[hidden] { display: none; }

.htl-inline {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--text-mid);
  white-space: nowrap;
}
.htl-inline[hidden] { display: none; }
.htl-inline input[type="checkbox"] { accent-color: var(--cyan); }
.htl-inline input[type="number"] { width: 4.6em; }

.htl-now { display: flex; align-items: baseline; gap: 8px; margin-left: auto; }
.htl-now-label {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .15em;
  color: var(--text-dim);
}
.htl-now-time {
  font-family: var(--mono);
  font-size: 15px;
  color: var(--cyan);
  font-variant-numeric: tabular-nums;
}

/* 描画モード（3択） */
.htl-seg {
  display: inline-flex;
  overflow: hidden;
  border: 1px solid var(--border2);
  border-radius: 3px;
}
.htl-seg-btn {
  padding: 4px 12px;
  border: none;
  border-right: 1px solid var(--border2);
  background: transparent;
  color: var(--text-mid);
  font-family: var(--sans);
  font-size: 11px;
  cursor: pointer;
}
.htl-seg-btn:last-child { border-right: none; }
.htl-seg-btn:hover { color: var(--text); }
.htl-seg-btn--on { background: var(--cyan-dim); color: var(--text); }

.htl-window-info {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-left: auto;
  font-size: 11px;
  color: var(--text-mid);
}
.htl-window-range { font-family: var(--mono); font-size: 10px; }
.htl-window-count { font-family: var(--mono); font-weight: 400; color: var(--text); }

/* タイムバー本体: 分布の SVG の上に track（描画領域と同じ位置・大きさ）を重ね、
   その中に窓（帯）とカーソル（縦線）を % で置く */
.htl-bar {
  position: relative;
  border: 1px solid var(--border2);
  border-radius: 3px;
  background: var(--bg);
  outline: none;
  cursor: ew-resize;
  touch-action: none;
  user-select: none;
}
.htl-bar:focus-visible { border-color: var(--cyan); }
.htl-chart { display: block; width: 100%; height: 76px; }
.htl-count-line { stroke: var(--cyan); stroke-width: 1; }
.htl-count-area { fill: var(--cyan); opacity: .28; }

.htl-track { position: absolute; pointer-events: none; }
.htl-window {
  position: absolute;
  top: 0;
  bottom: 0;
  min-width: 2px;
  border-right: 1px solid var(--cyan);
  border-left: 1px solid var(--cyan);
  background: var(--cyan-dim);
  opacity: .55;
}
.htl-thumb {
  position: absolute;
  top: -1px;
  bottom: -1px;
  width: 2px;
  margin-left: -1px;
  background: var(--amber);
}
.htl-thumb::before {
  content: "";
  position: absolute;
  top: -5px;
  left: 50%;
  width: 10px;
  height: 10px;
  margin-left: -5px;
  border-radius: 50%;
  background: var(--amber);
}

.htl-hint { min-height: 1.5em; font-size: 10px; line-height: 1.5; color: var(--text-dim); }

/* ── HTL-4. Responsive ─────────────────────────────────────── */
/* 860px 以下は 地図とタイムバー → 取得条件 の縦積み */
@media (max-width: 860px) {
  .rtm-body:has(.htl-main) { height: auto; min-height: 100vh; overflow: auto; }
  .htl-main { flex-direction: column; overflow: visible; }
  .htl-main > .htl-stage { order: 1; flex: none; }
  /* 600px 以下の共通規則（.rtm-map-wrap { order: 1 }）は、地図を先頭に出すためのもの。
     ここでは地図と dock を1つの区画（.htl-stage）に入れてあり、地図→dock の順に戻す */
  .htl-stage > .rtm-map-wrap { order: 0; flex: none; height: 55vh; min-height: 280px; }
  .htl-main > .htl-side {
    order: 2; width: 100%; height: auto; flex: none; overflow: visible;
    border-right: none; border-top: 1px solid var(--border);
  }
  .htl-side-body { overflow: visible; }
  .htl-main > .htl-side.qv-fold--collapsed { flex: none; width: 100%; height: auto; min-width: 0; }
  .htl-side.qv-fold--collapsed > .qv-fold-toggle { flex: none; flex-direction: row; padding: 7px 10px; }
  .htl-side.qv-fold--collapsed .qv-fold-label { writing-mode: horizontal-tb; letter-spacing: normal; }
  .htl-now, .htl-window-info { margin-left: 0; }
}

/* ── 48. 群発地震ビューア（dev/swarm_viewer・qv_swarm_viewer.js） ──
   左: 群発の一覧（畳める）/ 中央: 地図 / 右: 選んだ群発の詳細（M-T 図・累積件数・構成地震）。
   絞り込みの入れ物は § 47 の htl-field / htl-row / htl-status を使い回す
─────────────────────────────────────────────────────────────── */

/* ── SWV-1. ページ骨格 ─────────────────────────────────────── */
.swv-main { overflow: hidden; }

.swv-side {
  display: flex;
  flex-direction: column;
  width: 290px;
  min-height: 0;
  padding: 0;
  overflow: hidden;
  border-right: 1px solid var(--border);
  border-left: none;
}
.swv-side-body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 8px;
  min-height: 0;
  padding: 10px 8px 0;
}

.swv-stage { display: flex; flex: 1 1 auto; min-width: 0; min-height: 0; }
.swv-stage .rtm-map-area { position: absolute; inset: 0; width: auto; height: auto; }

.swv-detail {
  display: flex;
  flex-direction: column;
  width: 400px;
  min-height: 0;
  padding: 0;
  overflow: hidden;
}
.swv-detail[hidden] { display: none; }
.swv-detail-head {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
}
.swv-detail-title { flex: 1 1 auto; min-width: 0; font-size: 13px; color: var(--text); }
.swv-detail-title small { margin-left: 8px; font-family: var(--mono); font-size: 10px; color: var(--text-dim); }
.swv-close { flex: 0 0 auto; padding: 2px 9px; font-size: 13px; line-height: 1.2; }
.swv-detail-body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 6px;
  min-height: 0;
  padding: 8px 10px 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* ── SWV-2. 絞り込み・一覧 ─────────────────────────────────── */
.swv-types { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 6px; }
.swv-type { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; color: var(--text-mid); cursor: pointer; }
.swv-type-dot { width: 9px; height: 9px; border-radius: 50%; }
.swv-type-dot--swarm { background: var(--cyan); }
.swv-type-dot--weak  { border: 1px solid var(--text-dim); background: transparent; }

.swv-list {
  flex: 1 1 0;
  min-height: 120px;
  margin: 0 -8px;
  overflow-y: auto;
  overscroll-behavior: contain;
  border-top: 1px solid var(--border);
}
.swv-empty { padding: 12px; font-size: 11px; color: var(--text-dim); }

/* 行の高さは全行揃える（QVVList が1行目から実測する）。地名は省略して改行させない */
.swv-row {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 100%;
  padding: 5px 10px;
  border: none;
  border-bottom: 1px solid var(--border);
  border-left: 3px solid transparent;
  background: transparent;
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.swv-row:hover { background: var(--surface2); }
.swv-row--sel { border-left-color: var(--cyan); background: var(--surface2); }
.swv-row-top { display: flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 11px; white-space: nowrap; }
.swv-row-date { color: var(--text); }
.swv-row-n { margin-left: auto; color: var(--text-mid); }
.swv-row-m { min-width: 3.4em; color: var(--amber); text-align: right; }
.swv-row-place {
  overflow: hidden;
  font-size: 10px;
  color: var(--text-mid);
  white-space: nowrap;
  text-overflow: ellipsis;
}
.swv-row-dur { color: var(--text-dim); }

.swv-badge {
  display: inline-block;
  padding: 0 5px;
  border: 1px solid currentColor;
  border-radius: 2px;
  font-family: var(--sans);
  font-size: 9px;
  line-height: 1.5;
}
.swv-badge--swarm { color: var(--cyan); }
.swv-badge--weak  { color: var(--text-dim); }

/* ΔAIC による検算（swarm_detect.py verify）。強い＝水色、弱い＝琥珀、なし＝灰 */
.swv-verify { margin-bottom: 2px; }
.swv-types-label { font-family: var(--mono); font-size: 10px; color: var(--text-dim); }
.swv-vdot { width: 9px; height: 9px; border-radius: 2px; }
.swv-vdot--strong { background: var(--cyan); }
.swv-vdot--weak   { background: var(--amber); }
.swv-vdot--none   { background: var(--text-dim); }
.swv-vdot--few    { border: 1px dashed var(--text-dim); }
.swv-vbadge {
  display: inline-block;
  min-width: 3.6em;
  padding: 0 4px;
  border-radius: 2px;
  font-family: var(--mono);
  font-size: 9px;
  line-height: 1.6;
  text-align: right;
}
.swv-vbadge--strong { background: var(--cyan-dim); color: var(--text); }
.swv-vbadge--weak   { border: 1px solid var(--amber); color: var(--amber); }
.swv-vbadge--none   { border: 1px solid var(--border2); color: var(--text-dim); }
.swv-vbadge--few    { border: 1px dashed var(--border2); color: var(--text-dim); }
.swv-box-mark { stroke: var(--cyan); fill: var(--cyan); }

/* ── SWV-3. 詳細（諸元・図・構成地震） ─────────────────────── */
.swv-facts { font-size: 10px; }
.swv-facts dd { text-align: left; font-size: 10px; }
.swv-inline { display: flex; align-items: center; gap: 6px; font-size: 10px; color: var(--text-mid); }

.swv-chart { display: block; width: 100%; flex: 0 0 auto; }
.swv-chart--mt  { height: 150px; }
.swv-chart--cum { height: 100px; }
.swv-stem { stroke: var(--border2); stroke-width: 1; }
.swv-cum-line { stroke: var(--cyan); stroke-width: 1.4; }
.swv-cum-area { fill: var(--cyan-dim); opacity: .35; }

.swv-members {
  flex: 0 0 auto;
  height: 260px;
  margin: 0 -10px;
  overflow-y: auto;
  overscroll-behavior: contain;
  border-top: 1px solid var(--border);
}
.swv-mrow {
  display: grid;
  grid-template-columns: 13.6em 3.4em 3.4em 1fr;
  gap: 6px;
  align-items: center;
  width: 100%;
  padding: 3px 10px;
  border: none;
  border-bottom: 1px solid var(--border);
  background: transparent;
  color: var(--text);
  font-family: var(--mono);
  font-size: 10px;
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
}
.swv-mrow:hover { background: var(--surface2); }
.swv-mrow--sel { background: var(--surface2); box-shadow: inset 3px 0 0 var(--cyan); }
.swv-mrow--max .swv-mrow-m { color: var(--amber); font-weight: 600; }
.swv-mrow-dep { color: var(--text-mid); text-align: right; }
.swv-mrow-place { overflow: hidden; font-family: var(--sans); color: var(--text-mid); text-overflow: ellipsis; }

/* ── SWV-4. Responsive ─────────────────────────────────────── */
/* 1200px 以下は詳細欄を細く、860px 以下は 地図 → 詳細 → 一覧 の縦積み */
@media (max-width: 1200px) {
  .swv-detail { width: 340px; }
  .swv-side { width: 250px; }
}
@media (max-width: 860px) {
  .rtm-body:has(.swv-main) { height: auto; min-height: 100vh; overflow: auto; }
  .swv-main { flex-direction: column; overflow: visible; }
  .swv-main > .swv-stage { order: 1; flex: none; height: 55vh; min-height: 280px; }
  /* 600px 以下の共通規則が .rtm-map-wrap の幅・高さを変えるので、区画いっぱいに戻す */
  .swv-stage > .rtm-map-wrap { flex: 1 1 auto; width: 100%; height: auto; min-height: 0; }
  .swv-main > .swv-detail { order: 2; width: 100%; flex: none; border-top: 1px solid var(--border); }
  .swv-detail-body { overflow: visible; }
  .swv-main > .swv-side {
    order: 3; width: 100%; height: auto; flex: none; overflow: visible;
    border-right: none; border-top: 1px solid var(--border);
  }
  .swv-list { flex: none; height: 50vh; }
  .swv-main > .swv-side.qv-fold--collapsed { flex: none; width: 100%; height: auto; min-width: 0; }
  .swv-side.qv-fold--collapsed > .qv-fold-toggle { flex: none; flex-direction: row; padding: 7px 10px; }
  .swv-side.qv-fold--collapsed .qv-fold-label { writing-mode: horizontal-tb; letter-spacing: normal; }
}

/* ── SWV-9. 開いたときの説明（注意・解析手法・参考文献。<dialog>） ── */
.swv-info-open {
  flex: 0 0 auto;
  width: 100%;
  padding: 6px 8px;
  font-size: 12px;
  border-left: 3px solid var(--amber);
}
.swv-info {
  width: min(760px, calc(100vw - 32px));
  max-height: calc(100vh - 48px);
  margin: auto;                 /* § 2 の Reset が margin を 0 にするので、中央に戻す */
  padding: 0;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border2);
  border-radius: 6px;
  font-family: var(--sans);
}
.swv-info[open] { display: flex; flex-direction: column; }
.swv-info::backdrop { background: rgba(0, 0, 0, 0.6); }
.swv-info-head {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
}
.swv-info-head h2 { flex: 1 1 auto; margin: 0; font-size: 15px; font-weight: 500; }
.swv-info-body {
  flex: 1 1 auto;
  min-height: 0;
  padding: 4px 18px 12px;
  overflow-y: auto;
  overscroll-behavior: contain;
  font-size: 13px;
  line-height: 1.75;
}
.swv-info-sec { margin-top: 14px; }
.swv-info-sec h3 {
  margin: 0 0 6px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--cyan);
}
.swv-info-sec h4 { margin: 10px 0 4px; font-size: 13px; font-weight: 500; color: var(--text); }
.swv-info-sec p { margin: 0 0 6px; color: var(--text-mid); }
.swv-info-sec ul, .swv-info-sec ol { margin: 0 0 6px; padding-left: 20px; color: var(--text-mid); }
.swv-info-sec li { margin: 2px 0; }
.swv-info-sec b { color: var(--text); font-weight: 500; }
.swv-info-sec--warn {
  padding: 8px 12px;
  border: 1px solid var(--border2);
  border-left: 3px solid var(--amber);
  background: var(--surface2);
}
.swv-info-sec--warn h3 { color: var(--amber); }
.swv-info-refs { font-size: 12px; line-height: 1.6; }
.swv-info-refs li { margin: 4px 0; }
.swv-info-note { font-size: 12px; color: var(--text-dim); }
.swv-info-foot {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 14px;
  border-top: 1px solid var(--border);
}
.swv-info-ok { padding: 6px 14px; }

/* ── 49. 震源要素自動推定パネル（統合モニタ 左サイドバー・qv_rtm_monitor.js） ──
   Prefix: hypo-
   器は EEW パネル（.eew-panel と .eew-*）をそのまま使い、ここは状態の色と補足行だけを足す。
   紫は地図の＋印・誤差の円（qv_rtm_monitor.js の HYPO_MARKER_COLOR）と揃えてある。
   片方だけ直さないこと */
.detect-level-panel + .section-label { margin-top: 10px; }

.hypo-panel--active { border-color: var(--purple); }
.hypo-panel--active .eew-region { color: var(--purple); }

/* 確からしさが低い推定（場所がまだ決まっていない）は、値を薄くして参考値だと分かるようにする */
.hypo-panel--low .eew-mag,
.hypo-panel--low .eew-region { color: var(--text-dim); }

.hypo-depth {
  font-size: .82rem;
  font-weight: 600;
  color: var(--text-mid);
}

.hypo-note { color: var(--text-mid); }

/* ── 50. K-NET / KiK-net 強震記録ビューア（dev/knet_viewer・qv_knet_viewer.js） ──
   Prefix: knv-
   防災科研 SMDA2 相当。左: 地震・観測点の一覧 / 中央: 地図＋波形・スペクトル・ペーストアップ /
   右: 処理条件・計測震度・最大値。線の色は成分ごとに NS=シアン・EW=オレンジ・UD=緑（波形・スペクトル共通）。
   波形・スペクトルの描画は qv_timeseries.js（§38 qvts-）で、線の色はここのクラスで与える
─────────────────────────────────────────────────────────────── */

/* ─ 3列レイアウト ─ */
.knv-main { min-width: 0; }
.knv-side {
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.knv-side--list {
  width: 340px;
  border-left: none;
  border-right: 1px solid var(--border);
  padding: 0;
  overflow: hidden;
}
.knv-side--proc { width: 280px; }
.knv-center {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.knv-map-wrap { flex: 0 0 34%; min-height: 160px; }
.knv-analysis {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--border);
  background: var(--surface);
}

/* ─ 左: タブ・一覧 ─ */
.knv-tabs { display: flex; flex-shrink: 0; border-bottom: 1px solid var(--border); }
.knv-tab {
  flex: 1;
  padding: 8px 4px;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--text-mid);
  font-family: var(--sans);
  font-size: 11px;
  cursor: pointer;
}
.knv-tab:hover { color: var(--text); }
.knv-tab--on { color: var(--cyan); border-bottom-color: var(--cyan); }
.knv-tab-n { font-family: var(--mono); font-size: 10px; color: var(--text-dim); }

.knv-pane {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  padding: 8px;
  gap: 6px;
}
.knv-pane[hidden] { display: none; }

.knv-src { display: flex; gap: 6px; flex-shrink: 0; }
.knv-src .btn { flex: 1; }
.knv-range {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}
.knv-range[hidden], .knv-presets[hidden] { display: none; }
.knv-range input[type="date"] { flex: 1; min-width: 0; }
.knv-sep { color: var(--text-dim); font-size: 10px; }
.knv-presets { display: flex; gap: 4px; flex-shrink: 0; }
.knv-preset { flex: 1; padding: 3px 4px; }
.knv-note {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--text-mid);
  min-height: 1em;
}
.knv-note--error { color: var(--amber); }

.knv-list-head {
  display: grid;
  gap: 6px;
  flex-shrink: 0;
  padding: 0 6px 4px;
  font-size: 9px;
  color: var(--text-dim);
  border-bottom: 1px solid var(--border);
}
.knv-ev-head { grid-template-columns: 1fr 56px 52px; }
.knv-list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  outline: none;
}

/* 地震の行（高さは全行そろえる＝仮想スクロールの前提） */
.knv-ev {
  display: grid;
  grid-template-columns: 1fr 56px 52px;
  gap: 6px;
  align-items: center;
  width: 100%;
  height: 46px;
  padding: 0 6px;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--border);
  border-left: 2px solid transparent;
  color: var(--text);
  text-align: left;
  cursor: pointer;
}
.knv-ev:hover { background: var(--surface2); }
.knv-ev--on { background: var(--accent-dim); border-left-color: var(--cyan); }
.knv-ev-main { display: flex; flex-direction: column; min-width: 0; }
.knv-ev-time {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.knv-ev-sub { font-family: var(--mono); font-size: 9px; color: var(--text-dim); }
.knv-ev-mag { font-family: var(--mono); font-size: 11px; line-height: 1.3; }
.knv-ev-mag small { display: block; font-size: 9px; color: var(--text-dim); }

.knv-chip {
  margin-left: 4px;
  padding: 0 4px;
  border: 1px solid var(--border2);
  border-radius: 2px;
  font-family: var(--sans);
  font-size: 8px;
  color: var(--text-mid);
}
.knv-chip--ok { color: var(--teal); border-color: var(--teal); }
.knv-chip--saved { color: var(--blue); border-color: var(--blue); }

/* 計測震度のバッジ（枠と文字の色は Turbo を style で与える） */
.knv-si {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  padding: 1px 4px;
  border: 1px solid;
  border-radius: 3px;
  background: var(--bg);
  line-height: 1.1;
}
.knv-si b { font-family: var(--mono); font-size: 13px; }
.knv-si small { font-size: 9px; color: var(--text-mid); }
.knv-si--none { border-color: var(--border2); color: var(--text-dim); }

/* 観測点の行 */
.knv-wide { width: 100%; flex-shrink: 0; }
.knv-row { display: flex; gap: 6px; align-items: center; flex-shrink: 0; }
.knv-row select { flex: 1; min-width: 0; }
.knv-st {
  display: grid;
  grid-template-columns: 10px 1fr 40px;
  gap: 8px;
  align-items: center;
  width: 100%;
  height: 40px;
  padding: 0 6px;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--border);
  border-left: 2px solid transparent;
  color: var(--text);
  text-align: left;
  cursor: pointer;
}
.knv-st:hover { background: var(--surface2); }
.knv-st--on { background: var(--accent-dim); border-left-color: var(--cyan); }
.knv-st-swatch { width: 10px; height: 10px; border-radius: 50%; }
.knv-st-main { display: flex; flex-direction: column; min-width: 0; }
.knv-st-name {
  font-size: 11px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.knv-st-sub {
  font-family: var(--mono);
  font-size: 9px;
  color: var(--text-dim);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.knv-st-si { font-family: var(--mono); font-weight: 700; text-align: right; }

/* ─ 地図に重ねるもの ─ */
.knv-card {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 500;
  min-width: 190px;
  padding: 8px 10px;
  background: var(--surface);
  border: 1px solid var(--border2);
  border-radius: 4px;
  font-size: 11px;
  opacity: .94;
}
.knv-card[hidden], .knv-busy[hidden] { display: none; }
.knv-card-time { font-family: var(--mono); font-size: 10px; color: var(--text-mid); }
.knv-card-main { display: flex; gap: 10px; align-items: baseline; margin: 2px 0; }
.knv-card-main b { font-family: var(--mono); font-size: 18px; color: var(--text); }
.knv-card-sub { font-family: var(--mono); font-size: 10px; color: var(--text-mid); }
.knv-busy {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 600;
  transform: translate(-50%, -50%);
  padding: 10px 18px;
  background: var(--surface);
  border: 1px solid var(--cyan);
  border-radius: 4px;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--cyan);
}
.knv-epicenter {
  font-family: var(--mono);
  font-size: 26px;
  font-weight: 700;
  line-height: 1;
  color: var(--text);
  text-shadow: 0 0 3px var(--bg), 0 0 3px var(--bg);
}

/* ─ 中央下: 解析の画面 ─ */
.knv-view-tabs {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  border-bottom: 1px solid var(--border);
}
.knv-vtab {
  padding: 8px 14px;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--text-mid);
  font-family: var(--sans);
  font-size: 11px;
  cursor: pointer;
}
.knv-vtab:hover { color: var(--text); }
.knv-vtab--on { color: var(--cyan); border-bottom-color: var(--cyan); }
.knv-rec-title {
  margin-left: auto;
  padding: 0 12px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-mid);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.knv-view {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 6px 10px 10px;
}
.knv-view[hidden] { display: none; }
/* 図の枠が画面の残りの高さを分け合う（SVG は枠の実寸で描く。qv_knet_viewer.js の measureSize）。
   枠より下限が大きい低い画面だけスクロールになる */
.knv-view > * { flex-shrink: 0; }
.knv-view > .knv-fig-wrap { flex: 1 1 0; min-height: 220px; }
.knv-charts { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; gap: 2px; }
.knv-chart { flex: 1 1 0; min-height: 90px; display: flex; flex-direction: column; }
.knv-chart > .knv-chart-head { flex-shrink: 0; }
.knv-chart > .knv-fig-wrap { flex: 1 1 0; min-height: 0; }

.knv-readout {
  min-height: 1.4em;
  padding: 2px 0 4px;
  font-family: var(--mono);
  font-size: 10px;
  color: var(--text-mid);
}
.knv-chart[hidden] { display: none; }
.knv-chart-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-family: var(--mono);
  font-size: 10px;
  color: var(--text-mid);
}
.knv-fig-wrap {
  position: relative;
  cursor: crosshair;
  user-select: none;
  touch-action: pan-y;
}
.knv-svg { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.knv-svg .qvts-tick, .knv-svg .qvts-axis-title { font-size: 10px; }
.knv-select {
  position: absolute;
  top: 0;
  bottom: 0;
  background: color-mix(in srgb, var(--cyan) 18%, transparent);
  border-left: 1px solid var(--cyan);
  border-right: 1px solid var(--cyan);
  pointer-events: none;
}
.knv-select[hidden] { display: none; }

/* 成分の色（波形・スペクトル・ペーストアップ・凡例で共通） */
.knv-comp { font-weight: 700; }
.knv-comp--NS { color: var(--cyan); }
.knv-comp--EW { color: var(--orange); }
.knv-comp--UD { color: var(--green); }
.knv-line--NS { stroke: var(--cyan); stroke-width: 1; }
.knv-line--EW { stroke: var(--orange); stroke-width: 1; }
.knv-line--UD { stroke: var(--green); stroke-width: 1; }
.knv-dot--NS { fill: var(--cyan); }
.knv-dot--EW { fill: var(--orange); }
.knv-dot--UD { fill: var(--green); }
.knv-dot--peak { fill: var(--red); }

.knv-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  align-items: center;
  padding-bottom: 6px;
  font-size: 11px;
  color: var(--text-mid);
}
.knv-controls label { display: inline-flex; align-items: center; gap: 5px; }
.knv-controls label[hidden] { display: none; }
.knv-controls input[type="number"] { width: 64px; }
.knv-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  padding-top: 4px;
  font-family: var(--mono);
  font-size: 10px;
  color: var(--text-mid);
}
.knv-legend small { color: var(--text-dim); }
.knv-axis-note { color: var(--text-dim); }

/* ─ 右: 処理条件・結果 ─ */
.knv-form { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
.knv-field { display: flex; flex-direction: column; gap: 3px; font-size: 10px; color: var(--text-mid); }
.knv-field select { width: 100%; }
.knv-filter-fc {
  flex-wrap: wrap;
  gap: 6px;
  font-size: 10px;
  color: var(--text-mid);
}
.knv-filter-fc[hidden] { display: none; }
.knv-filter-fc label { display: inline-flex; align-items: center; gap: 4px; }
.knv-filter-fc label[hidden] { display: none; }
.knv-filter-fc input[type="number"] { width: 58px; }
.knv-unit { font-size: 10px; color: var(--text-dim); }
.knv-check { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--text-mid); }
.knv-comps { display: flex; gap: 12px; }

.knv-ri-main { display: flex; align-items: baseline; gap: 12px; margin: 4px 0; }
.knv-ri-class {
  padding: 1px 8px;
  border: 1px solid;
  border-radius: 3px;
  font-size: 13px;
  font-weight: 700;
}
.knv-ri-si { font-family: var(--mono); font-size: 22px; font-weight: 700; }
.knv-peak-row {
  display: grid;
  grid-template-columns: 32px auto 1fr;
  gap: 6px;
  align-items: baseline;
  padding: 2px 0;
  font-family: var(--mono);
  font-size: 11px;
}
.knv-peak-row b { color: var(--text); }
.knv-peak-row small { color: var(--text-dim); font-size: 9px; }
.knv-dl {
  display: grid;
  grid-template-columns: 70px 1fr;
  gap: 3px 8px;
  margin: 4px 0 0;
  font-size: 10px;
}
.knv-dl dt { color: var(--text-dim); }
.knv-dl dd { margin: 0; color: var(--text); font-family: var(--mono); word-break: break-all; }
.knv-credit { margin-top: 12px; font-size: 9px; color: var(--text-dim); line-height: 1.5; }

@media (max-width: 860px) {
  .knv-main { flex-direction: column; overflow: visible; }
  .knv-side--list, .knv-side--proc { width: 100%; height: auto; flex: none; border: none; }
  .knv-side--list { order: 1; }
  .knv-center { order: 2; flex: none; }
  .knv-side--proc { order: 3; border-top: 1px solid var(--border); }
  .knv-list { flex: none; height: 40vh; }
  .knv-map-wrap { flex: none; height: 45vh; }
  .knv-analysis { flex: none; }
  .knv-view { overflow: visible; }
  /* 縦に伸びる配置では分け合う高さが無いので固定の高さ */
  .knv-chart { flex: none; }
  .knv-chart > .knv-fig-wrap { flex: none; height: 150px; }
  .knv-view > .knv-fig-wrap { flex: none; height: 360px; }
}

/* ── 51. 津波データベースビューア（dev/tsunami_db・qv_tsunami_db.js） ──
   Prefix: tdb-
   左: データ元の切替＋絞り込み＋津波の一覧（畳める）/ 中央: 地図 / 右: 選んだ津波の詳細（諸元・観測点）。
   絞り込みの入れ物は § 47 の htl-field / htl-row / htl-status を使い回す。
   丸の色（最大の高さの段階）は js/qv_tsunami_db.js の HEIGHT_STEPS が正本で、style 属性で流し込む
─────────────────────────────────────────────────────────────── */

/* ── TDB-1. ページ骨格 ─────────────────────────────────────── */
.tdb-main { overflow: hidden; }

.tdb-side {
  display: flex;
  flex-direction: column;
  width: 300px;
  min-height: 0;
  padding: 0;
  overflow: hidden;
  border-right: 1px solid var(--border);
  border-left: none;
}
.tdb-side-body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 8px;
  min-height: 0;
  padding: 10px 8px 0;
}

.tdb-stage { display: flex; flex: 1 1 auto; min-width: 0; min-height: 0; }
.tdb-stage .rtm-map-area { position: absolute; inset: 0; width: auto; height: auto; }

.tdb-detail {
  display: flex;
  flex-direction: column;
  width: 380px;
  min-height: 0;
  padding: 0;
  overflow: hidden;
}
.tdb-detail[hidden] { display: none; }
.tdb-detail-head {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
}
.tdb-detail-title { flex: 1 1 auto; min-width: 0; font-size: 13px; color: var(--text); }
.tdb-detail-title small { margin-left: 8px; font-family: var(--mono); font-size: 10px; color: var(--text-dim); }
.tdb-close { flex: 0 0 auto; padding: 2px 9px; font-size: 13px; line-height: 1.2; }
.tdb-detail-body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 6px;
  min-height: 0;
  padding: 8px 10px 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* ── TDB-2. データ元の切替・絞り込み・一覧 ─────────────────── */
.tdb-tabs { display: flex; gap: 4px; }
.tdb-tab {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  min-width: 0;
  padding: 5px 4px;
  border: 1px solid var(--border);
  border-radius: 3px;
  background: transparent;
  color: var(--text-mid);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}
.tdb-tab small { font-family: var(--mono); font-size: 9px; color: var(--text-dim); }
.tdb-tab:hover { background: var(--surface2); }
.tdb-tab--on { border-color: var(--cyan); background: var(--surface2); color: var(--text); }
.tdb-tab--on small { color: var(--text-mid); }

.tdb-check { display: flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 10px; color: var(--text-mid); cursor: pointer; }
.tdb-check[hidden], .htl-row[hidden] { display: none; }

.tdb-list {
  flex: 1 1 0;
  min-height: 120px;
  margin: 0 -8px;
  overflow-y: auto;
  overscroll-behavior: contain;
  border-top: 1px solid var(--border);
}
.tdb-empty { padding: 12px; font-size: 11px; color: var(--text-dim); }

/* 行の高さは全行揃える（QVVList が1行目から実測する）。地名は省略して改行させない */
.tdb-row {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 100%;
  padding: 5px 10px;
  border: none;
  border-bottom: 1px solid var(--border);
  border-left: 3px solid transparent;
  background: transparent;
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.tdb-row:hover { background: var(--surface2); }
.tdb-row--sel { border-left-color: var(--cyan); background: var(--surface2); }
.tdb-row-top { display: flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 11px; white-space: nowrap; }
.tdb-dot { flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; }
.tdb-row-date { color: var(--text); }
.tdb-nopos { font-family: var(--sans); font-size: 9px; color: var(--text-dim); }
.tdb-row-m { margin-left: auto; min-width: 3em; color: var(--amber); text-align: right; }
.tdb-row-h { min-width: 4.6em; text-align: right; }
.tdb-row-place {
  overflow: hidden;
  font-size: 11px;
  color: var(--text);
  white-space: nowrap;
  text-overflow: ellipsis;
}
.tdb-row-sub { font-size: 10px; color: var(--text-dim); }

/* ── TDB-3. 詳細（諸元・観測点の一覧） ─────────────────────── */
.tdb-facts { font-size: 10px; }
.tdb-facts dd { text-align: left; font-size: 10px; word-break: break-word; }
.tdb-facts small { color: var(--text-dim); }
.tdb-note { font-size: 10px; line-height: 1.5; color: var(--text-dim); }
.tdb-inline { display: flex; align-items: center; gap: 6px; font-size: 10px; color: var(--text-mid); }

.tdb-ctabs { display: flex; gap: 4px; margin-top: 4px; }
.tdb-ctab {
  padding: 3px 9px;
  border: 1px solid var(--border);
  border-radius: 3px;
  background: transparent;
  color: var(--text-mid);
  font: inherit;
  font-size: 11px;
  cursor: pointer;
}
.tdb-ctab small { margin-left: 5px; font-family: var(--mono); font-size: 9px; color: var(--text-dim); }
.tdb-ctab:hover { background: var(--surface2); }
.tdb-ctab--on { border-color: var(--cyan); background: var(--surface2); color: var(--text); }

.tdb-clist {
  flex: 0 0 auto;
  height: 320px;
  margin: 0 -10px;
  overflow-y: auto;
  overscroll-behavior: contain;
  border-top: 1px solid var(--border);
}
.tdb-crow {
  display: grid;
  grid-template-columns: 4.8em 1fr auto;
  gap: 8px;
  align-items: center;
  width: 100%;
  padding: 4px 10px;
  border: none;
  border-bottom: 1px solid var(--border);
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 11px;
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
}
.tdb-crow:hover { background: var(--surface2); }
.tdb-crow--sel { background: var(--surface2); box-shadow: inset 3px 0 0 var(--cyan); }
.tdb-crow--nopos .tdb-crow-name { opacity: .75; }
.tdb-crow-h { font-family: var(--mono); text-align: right; }
.tdb-crow-name { overflow: hidden; text-overflow: ellipsis; }
.tdb-crow-name small { margin-left: 6px; font-size: 10px; color: var(--text-dim); }
.tdb-crow-r { font-family: var(--mono); font-size: 10px; color: var(--text-mid); }

/* ── TDB-4. 凡例（地図右下） ───────────────────────────────── */
.tdb-legend {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: 3px;
  background: rgba(16, 20, 26, 0.82);
}
.tdb-lg-row { display: flex; align-items: center; gap: 8px; }
.tdb-lg-label { flex: 0 0 auto; min-width: 9.5em; font-family: var(--mono); font-size: 9px; color: var(--text-dim); }
.tdb-lg-items { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; }
.tdb-lg-item { display: inline-flex; align-items: center; gap: 4px; font-family: var(--mono); font-size: 9px; color: var(--text-mid); }
.tdb-lg-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; }
.tdb-lg-dot--mag { border: 1px solid var(--text-dim); background: transparent; }

/* ── TDB-5. Responsive ─────────────────────────────────────── */
/* 1200px 以下は詳細欄を細く、860px 以下は 地図 → 詳細 → 一覧 の縦積み */
@media (max-width: 1200px) {
  .tdb-detail { width: 330px; }
  .tdb-side { width: 260px; }
}
@media (max-width: 860px) {
  .rtm-body:has(.tdb-main) { height: auto; min-height: 100vh; overflow: auto; }
  .tdb-main { flex-direction: column; overflow: visible; }
  .tdb-main > .tdb-stage { order: 1; flex: none; height: 55vh; min-height: 280px; }
  /* 600px 以下の共通規則が .rtm-map-wrap の幅・高さを変えるので、区画いっぱいに戻す */
  .tdb-stage > .rtm-map-wrap { flex: 1 1 auto; width: 100%; height: auto; min-height: 0; }
  .tdb-main > .tdb-detail { order: 2; width: 100%; flex: none; border-top: 1px solid var(--border); }
  .tdb-detail-body { overflow: visible; }
  .tdb-main > .tdb-side {
    order: 3; width: 100%; height: auto; flex: none; overflow: visible;
    border-right: none; border-top: 1px solid var(--border);
  }
  .tdb-list { flex: none; height: 50vh; }
  .tdb-lg-label { min-width: 0; }
  .tdb-main > .tdb-side.qv-fold--collapsed { flex: none; width: 100%; height: auto; min-width: 0; }
  .tdb-side.qv-fold--collapsed > .qv-fold-toggle { flex: none; flex-direction: row; padding: 7px 10px; }
  .tdb-side.qv-fold--collapsed .qv-fold-label { writing-mode: horizontal-tb; letter-spacing: normal; }
}

/* ── 52. ばねブロックモデル（dev/spring_block・qv_spring_block_viewer.js） ──
   左: モデルの条件（畳める）/ 中央: ブロックとばねの模式図・時空間図（canvas）/
   右: 規模別の累積度数・M-T 図・平均応力・地震の一覧（QVTimeSeries の SVG）。
   条件の入れ物と再生ボタンは § 47 の htl- を使い回す。canvas の色は JS が CSS 変数から読む
─────────────────────────────────────────────────────────────── */

/* ── SBV-1. ページ骨格 ─────────────────────────────────────── */
.sbv-main { overflow: hidden; }

.sbv-side {
  display: flex;
  flex-direction: column;
  width: 260px;
  min-height: 0;
  padding: 0;
  overflow: hidden;
  border-right: 1px solid var(--border);
  border-left: none;
}
.sbv-side-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 10px 8px 12px;
}
.sbv-row-label { flex-basis: 6.2em; }
.sbv-note {
  margin: 6px 0 0;
  font-size: 10px;
  line-height: 1.5;
  color: var(--text-dim);
}
.sbv-note--model {
  margin-top: 12px;
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: 3px;
  font-family: var(--mono);
}

.sbv-stage {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  min-height: 0;
  padding: 8px 10px 10px;
}
.sbv-controls { flex: 0 0 auto; }

.sbv-panel {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  min-height: 0;
  border: 1px solid var(--border);
  border-radius: 3px;
  background: var(--surface);
}
.sbv-panel--grow { flex: 1 1 0; }
.sbv-panel-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  padding: 6px 10px;
  border-bottom: 1px solid var(--border);
  font-size: 12px;
  color: var(--text);
}
.sbv-panel-head small { font-size: 10px; color: var(--text-dim); }
.sbv-live {
  margin-left: auto;
  font-family: var(--mono);
  font-size: 10px;
  color: var(--amber);
}

.sbv-canvas { display: block; width: 100%; }
.sbv-canvas--blocks { height: 200px; font-family: var(--mono); }
.sbv-canvas--st { flex: 1 1 0; min-height: 120px; image-rendering: pixelated; }

.sbv-cbar-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 10px 7px;
}
.sbv-cbar {
  flex: 0 1 220px;
  height: 8px;
  border-radius: 2px;
  background: linear-gradient(to right, var(--blue), var(--cyan), var(--green), var(--yellow), var(--orange), var(--red));
}
.sbv-cbar-label { font-family: var(--mono); font-size: 10px; color: var(--text-dim); }

.sbv-detail {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 400px;
  min-height: 0;
  padding: 8px 10px 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  border-left: 1px solid var(--border);
  background: var(--surface);
}

/* ── SBV-2. 図と一覧 ───────────────────────────────────────── */
.sbv-chart-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 8px;
  margin-top: 4px;
  font-size: 11px;
  color: var(--text-mid);
}
.sbv-chart-head small { font-family: var(--mono); font-size: 10px; color: var(--text-dim); }
.sbv-chart { display: block; width: 100%; flex: 0 0 auto; }
.sbv-chart--gr     { height: 200px; }
.sbv-chart--mt     { height: 150px; }
.sbv-chart--stress { height: 130px; }

.sbv-line--gr     { stroke: var(--cyan); stroke-width: 1; }
.sbv-line--fit    { stroke: var(--orange); stroke-width: 1.4; stroke-dasharray: 5 3; }
.sbv-line--stress { stroke: var(--amber); stroke-width: 1; }
.sbv-dot--gr      { fill: var(--cyan); stroke: none; }
.sbv-dot--mt      { fill: var(--red); stroke: none; }
.sbv-stem         { stroke: var(--red); stroke-opacity: .45; }
.qvts-marker.sbv-marker       { stroke: var(--orange); }
.qvts-marker-label.sbv-marker { fill: var(--orange); }

.sbv-list-wrap { flex: 0 0 auto; padding-bottom: 10px; }
.sbv-list {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--mono);
  font-size: 10px;
  font-variant-numeric: tabular-nums;
}
.sbv-list th,
.sbv-list td {
  padding: 2px 4px;
  border-bottom: 1px solid var(--border);
  text-align: right;
  white-space: nowrap;
}
.sbv-list th { font-weight: 400; color: var(--text-dim); }
.sbv-list td { color: var(--text-mid); }

/* ── SBV-3. Responsive ─────────────────────────────────────── */
/* 1100px 以下は右の図を下へ回す。860px 以下はページごと縦に流す */
@media (max-width: 1100px) {
  .rtm-body:has(.sbv-main) { height: auto; min-height: 100vh; overflow: auto; }
  .sbv-main { flex-wrap: wrap; overflow: visible; }
  .sbv-stage { flex: 1 1 0; }
  .sbv-panel--grow { flex: none; height: 360px; }
  .sbv-detail { width: 100%; overflow: visible; border-left: none; border-top: 1px solid var(--border); }
}
@media (max-width: 860px) {
  .sbv-main { flex-direction: column; }
  .sbv-main > .sbv-stage { order: 1; flex: none; }
  .sbv-main > .sbv-detail { order: 2; }
  .sbv-main > .sbv-side {
    order: 3; width: 100%; height: auto; flex: none; overflow: visible;
    border-right: none; border-top: 1px solid var(--border);
  }
  .sbv-side-body { overflow: visible; }
  .sbv-main > .sbv-side.qv-fold--collapsed { flex: none; width: 100%; height: auto; min-width: 0; }
  .sbv-side.qv-fold--collapsed > .qv-fold-toggle { flex: none; flex-direction: row; padding: 7px 10px; }
  .sbv-side.qv-fold--collapsed .qv-fold-label { writing-mode: horizontal-tb; letter-spacing: normal; }
  .sbv-canvas--blocks { height: 170px; }
}

/* ── SBV-4. 実寸・区間・大森則（2026-10-13 追加） ──────────── */
.sbv-check { margin: 4px 0 2px; white-space: normal; }
.sbv-check input { accent-color: var(--cyan); }
.htl-row input:disabled { opacity: .45; }

.sbv-seg-table { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; }
.sbv-seg-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 3.4em 3.4em 3.2em 1.8em;
  gap: 3px;
  align-items: center;
}
.sbv-seg-row input { width: 100%; min-width: 0; font-size: 10px; }
.sbv-seg-row--head span { font-size: 9px; color: var(--text-dim); }
.sbv-seg-del { padding: 1px 0; font-size: 11px; line-height: 1.2; }
.sbv-seg-actions { display: flex; gap: 4px; margin-top: 6px; }

.sbv-chart--omori  { height: 170px; }
.sbv-line--bg      { stroke: var(--text-dim); stroke-width: 1; stroke-dasharray: 2 3; }
.sbv-dot--omori    { fill: var(--purple); stroke: none; }

.sbv-list--rec td { text-align: right; }
.sbv-list--rec .sbv-td-name { text-align: left; color: var(--text); }
.sbv-list--rec .sbv-td-ref {
  max-width: 150px;
  overflow: hidden;
  font-family: var(--sans);
  text-align: left;
  text-overflow: ellipsis;
  color: var(--text-dim);
}
.sbv-list--rec .sbv-td-ref:hover { white-space: normal; }

/* ── SBV-5. 再生の速さのスライダー（2026-10-13 追加） ───────── */
.sbv-rate input[type="range"] { width: 130px; accent-color: var(--cyan); }
.sbv-rate-text { min-width: 15em; font-family: var(--mono); font-size: 10px; color: var(--text-dim); }

/* ── SBV-6. 位置の説明（震央地名・2026-10-13 追加） ─────────── */
.sbv-hover {
  min-height: 1.7em;
  padding: 3px 10px 4px;
  overflow: hidden;
  font-family: var(--mono);
  font-size: 10px;
  color: var(--text-mid);
  white-space: nowrap;
  text-overflow: ellipsis;
  border-top: 1px solid var(--border);
}
.sbv-list-wrap { overflow-x: auto; }
.sbv-list .sbv-td-name { text-align: left; color: var(--text); font-family: var(--sans); }


/* ── 53. 震度予測AI × フィードバック予測（いまは dev/quake_predict・qv_quake_predict.js が使う） ──
   骨格・区画・状態の帯・表は §45（ep-）を使い回す。ここは再生の操作・表示の切り替え・
   観測の種類の凡例・気象庁の震央の印だけを持つ。震度の色は QVIntensityColor から来る。
────────────────────────────────────────────────────────────── */
.fbp-row { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
.fbp-minmag { flex: 0 0 auto; }
.fbp-select { flex: 1 1 auto; min-width: 0; }
.fbp-play { flex: 0 0 auto; min-width: 2.4rem; font-size: 11px; }
.fbp-range { flex: 1 1 auto; min-width: 0; accent-color: var(--cyan); }
.fbp-time { flex: 0 0 3.2rem; font-family: var(--mono); font-size: 11px; color: var(--text); text-align: right; }

.fbp-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin-bottom: 6px; }
.fbp-fields .ep-toggle-btn { font-size: 10.5px; }
.fbp-check { display: flex; align-items: center; gap: 5px; font-size: 10.5px; color: var(--text-mid); }

.fbp-kind-legend { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-top: 6px; font-size: 10px; color: var(--text-mid); }
.fbp-kind-legend[hidden] { display: none; }
.fbp-kind-legend span { display: inline-flex; align-items: center; gap: 4px; }
.fbp-kind-sw {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--surface2);
  border: 1.5px solid var(--border2);
}
.fbp-kind-sw--exact { border-color: var(--text); }
.fbp-kind-sw--lower { border-color: var(--amber); }
.fbp-kind-sw--quiet { width: 5px; height: 5px; background: var(--dim); border: none; }

.fbp-cat-epi {
  font-size: 20px;
  line-height: 1;
  color: var(--cyan);
  text-shadow: 0 0 6px var(--bg);
  cursor: default;
  user-select: none;
}


/* ── 54. 過去事例 × 震度予測AI 地図（dev/analog_map・qv_analog_map.js） ──
   左: 条件（升の分け方・大きさ・M・距離・塗り。畳める）/ 中央: 升を塗った地図。
   入れ物は § 47 の htl-field / htl-row / htl-status を使い回す
─────────────────────────────────────────────────────────────── */

/* ── ANM-1. ページ骨格 ─────────────────────────────────────── */
.anm-main { overflow: hidden; }

.anm-side {
  display: flex;
  flex-direction: column;
  width: 270px;
  min-height: 0;
  padding: 0;
  overflow: hidden;
  border-right: 1px solid var(--border);
  border-left: none;
}
.anm-side-body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 8px;
  min-height: 0;
  padding: 10px 8px 10px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.anm-stage { display: flex; flex: 1 1 auto; min-width: 0; min-height: 0; }
.anm-stage .rtm-map-area { position: absolute; inset: 0; width: auto; height: auto; }

/* ── ANM-2. 凡例・注記 ─────────────────────────────────────── */
.anm-legend { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--text); }
.anm-legend-row { display: flex; align-items: center; gap: 6px; }
.anm-legend-n { margin-left: auto; font-family: var(--mono); color: var(--text-mid); }
.anm-legend-sub { font-size: 11px; color: var(--text-dim); }
.anm-note { font-size: 11px; line-height: 1.6; color: var(--text-dim); }

.anm-dot {
  display: inline-block;
  flex: 0 0 auto;
  width: 10px;
  height: 10px;
  margin-right: 4px;
  vertical-align: -1px;
  border-radius: 2px;
}
.anm-dot--at     { background: var(--amber); }
.anm-dot--ai     { background: var(--cyan); }
.anm-dot--analog { background: var(--green); }
.anm-dot--hybrid { background: var(--purple); }
.anm-dot--better { background: var(--blue); }
.anm-dot--worse  { background: var(--red); }

/* ── ANM-3. 升のポップアップ ───────────────────────────────── */
.anm-pop { font-size: 12px; }
.anm-pop-sub { margin: 2px 0 6px; font-size: 11px; color: var(--text-dim); }
.anm-pop-table { width: 100%; border-collapse: collapse; font-family: var(--mono); font-size: 11px; }
.anm-pop-table th { font-weight: 400; color: var(--text-dim); text-align: right; }
.anm-pop-table td { padding: 1px 4px; text-align: right; }
.anm-pop-table td:first-child { font-family: var(--sans); text-align: left; }
.anm-pop-win td { color: var(--text); font-weight: 600; }

/* ── ANM-4. 狭い画面 ───────────────────────────────────────── */
@media (max-width: 860px) {
  .rtm-body:has(.anm-main) { height: auto; min-height: 100vh; overflow: auto; }
  .anm-main { flex-direction: column; overflow: visible; }
  .anm-main > .anm-stage { order: 1; flex: none; height: 60vh; min-height: 300px; }
  .anm-stage > .rtm-map-wrap { flex: 1 1 auto; width: 100%; height: auto; min-height: 0; }
  .anm-main > .anm-side { order: 2; width: 100%; flex: none; border-right: none; border-top: 1px solid var(--border); }
  .anm-main > .anm-side.qv-fold--collapsed { flex: none; width: 100%; height: auto; min-width: 0; }
}

/* ── 55. 長周期地震動データベース（dev/ltpgm_db・qv_ltpgm_db.js） ──
   Prefix: lpd-
   骨格（左の一覧・中央の地図・右の詳細・行・凡例）は § 51 の tdb- を、絞り込みは § 47 の htl- を使い回す。
   ここに置くのは階級のバッジ・周期帯の升・スペクトルの図・観測点の履歴だけ。
   階級の色は js/qv_ltpgm_query.js の LG_COLORS が正本で、style 属性で流し込む（ここは階級0・不明の既定だけ）
─────────────────────────────────────────────────────────────── */

/* ── LPD-1. 階級のバッジ・周期帯の升 ───────────────────────── */
.lpd-lg {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 16px;
  padding: 0 3px;
  border: 1px solid var(--border2);
  border-radius: 3px;
  background: var(--surface2);
  color: var(--text-dim);
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  line-height: 1;
}
.lpd-cat {
  padding: 0 4px;
  border: 1px solid var(--border2);
  border-radius: 2px;
  font-family: var(--sans);
  font-size: 9px;
  color: var(--text-dim);
}
.lpd-sub { font-size: 10px; color: var(--text-dim); letter-spacing: .04em; }

.lpd-bands { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.lpd-band {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  padding: 3px 0;
  border: 1px solid var(--border2);
  border-radius: 3px;
  background: var(--surface2);
  color: var(--text-dim);
  font-family: var(--mono);
}
.lpd-band-label { font-size: 8px; opacity: .85; }
.lpd-band-v { font-size: 13px; font-weight: 600; line-height: 1.1; }
.lpd-band-n { font-size: 8px; opacity: .85; }
.lpd-bands--small .lpd-band { padding: 2px 0; }
.lpd-bands--small .lpd-band-v { font-size: 11px; }

/* ── LPD-2. 選んだ観測点（見出し・スペクトル・履歴） ──────────── */
.lpd-station {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 4px;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: 3px;
  background: var(--surface);
}
.lpd-station[hidden], .lpd-chart-wrap[hidden] { display: none; }
.lpd-st-head { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text); }
.lpd-st-head small { font-size: 10px; color: var(--text-dim); }
.lpd-st-head .tdb-close { margin-left: auto; }

.lpd-chart-ctl { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.lpd-chart-ctl select { font-size: 10px; }
.lpd-chart { display: block; width: 100%; height: auto; }
.lpd-chart-note { min-height: 1.4em; font-family: var(--mono); font-size: 9px; color: var(--text-mid); white-space: pre-wrap; }

/* 線の色。水平合成（階級の判定に使う量）を太く、3成分は細く */
.lpd-line--hz { stroke: var(--cyan); stroke-width: 2; }
.lpd-line--ns { stroke: var(--amber); stroke-width: 1; opacity: .8; }
.lpd-line--ew { stroke: var(--green); stroke-width: 1; opacity: .8; }
.lpd-line--ud { stroke: var(--purple); stroke-width: 1; opacity: .7; }
/* 階級1〜4の下限（5 / 15 / 50 / 100 cm/s） */
.lpd-line--th { stroke: var(--text-dim); stroke-width: .8; stroke-dasharray: 3 3; opacity: .8; }
.lpd-marker { stroke: var(--text-dim); stroke-dasharray: 2 3; }

.lpd-hist {
  max-height: 220px;
  margin: 0 -8px -8px;
  overflow-y: auto;
  overscroll-behavior: contain;
  border-top: 1px solid var(--border);
}
.lpd-hrow {
  display: grid;
  grid-template-columns: auto 8.4em 1fr auto;
  gap: 6px;
  align-items: center;
  width: 100%;
  padding: 3px 8px;
  border: none;
  border-bottom: 1px solid var(--border);
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 10px;
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
}
.lpd-hrow:hover { background: var(--surface2); }
.lpd-hrow--cur { background: var(--surface2); box-shadow: inset 3px 0 0 var(--cyan); }
.lpd-hrow-date { font-family: var(--mono); color: var(--text-mid); }
.lpd-hrow-place { overflow: hidden; text-overflow: ellipsis; }
.lpd-hrow-v { font-family: var(--mono); color: var(--text-mid); }

/* ── LPD-3. 観測点の一覧 ─────────────────────────────────── */
.lpd-st-ctl { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 6px; }
.lpd-st-ctl select { font-size: 10px; }
.lpd-crow { grid-template-columns: 6.2em 1fr auto; }
.lpd-crow .tdb-crow-h { display: flex; align-items: center; justify-content: space-between; gap: 4px; }


/* ── 56. 遠地の地震の推定（§5 全世界地震モニタの一覧・qv_teleseism.js） ──────────
   長周期モニタから出した遠地の地震の震央・M。行の形は Early-est の一覧（.et-event-row）と同じ */
.tele-list {
  flex: 0 0 auto;
  max-height: 38%;
  border-bottom: 1px solid var(--border);
}
.tele-row--active { border-color: var(--orange); }
.tele-badge {
  font-family: var(--mono);
  font-size: .6rem;
  padding: 1px 5px;
  border: 1px solid var(--border2);
  border-radius: 3px;
  color: var(--text-mid);
  white-space: nowrap;
}
.tele-badge--high { border-color: var(--green);  color: var(--green); }
.tele-badge--mid  { border-color: var(--amber);  color: var(--amber); }
.tele-badge--low  { border-color: var(--border2); color: var(--dim); }
.tele-badge--ext  { border-color: var(--cyan);   color: var(--cyan); }
.tele-badge--live { border-color: var(--orange); color: var(--orange); }
.tele-note {
  font-family: var(--mono);
  font-size: .6rem;
  color: var(--text-dim);
}


/* ── 57. 統合ビューア（app/viewer・qv_viewer.js） ──────────────────
   3列の骨組み・一覧・検索条件フォームは §42 idb- を使い回す。ここは追加分だけ。
   左サイドバーは「検索結果」と「この地震」（詳細タブ）の2枚。
   記録の有無の印: on＝同一の記録あり / cand＝候補 / off＝記録なし / out＝収録期間の外
─────────────────────────────────────────────────────────────── */

.qvv-main > .idb-side--list { width: 470px; }   /* 第2段で U・E の印が増えたので 420 → 470 */

/* ─ 一覧の見出しと行（右端に記録の印） ─ */
.qvv-list-head {
  display: grid;
  grid-template-columns: 1fr 44px 166px;
  gap: 6px;
  padding: 0 6px 4px;
  font-size: 9px;
  color: var(--text-dim);
  border-bottom: 1px solid var(--border);
}
.qvv-ev {
  display: grid;
  grid-template-columns: 1fr 44px 166px;
  gap: 6px;
  align-items: center;
  width: 100%;
  padding: 5px 6px;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--border);
  border-left: 2px solid transparent;
  color: var(--text);
  text-align: left;
  cursor: pointer;
}
.qvv-ev:hover { background: var(--surface2); }
.qvv-ev--on {
  background: var(--accent-dim);
  border-left-color: var(--cyan);
}

.qvv-badges {
  display: flex;
  gap: 2px;
  justify-content: flex-end;
}
.qvv-b {
  min-width: 22px;
  padding: 1px 3px;
  border: 1px solid var(--border2);
  border-radius: 2px;
  font-family: var(--mono);
  font-size: 9px;
  line-height: 1.3;
  text-align: center;
  white-space: nowrap;
}
.qvv-b--on   { color: var(--cyan); border-color: var(--cyan); background: var(--bg); }
.qvv-b--cand { color: var(--amber); border-color: var(--amber); border-style: dashed; }
.qvv-b--off  { color: var(--dim); border-color: var(--border); }
.qvv-b--out  { color: var(--border2); border-color: transparent; text-decoration: line-through; }
.qvv-b--load { color: var(--text-dim); border-color: transparent; }
.qvv-b--src  { color: var(--purple); border-color: var(--purple); min-width: 36px; }   /* USGS・EMSC の行の機関名 */

/* ─ この地震（見出し・詳細タブ・本文） ─ */
.qvv-detail { padding: 0; }
.qvv-head {
  flex-shrink: 0;
  padding: 8px 10px 6px;
  border-bottom: 1px solid var(--border);
}
.qvv-head-time {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-mid);
}
.qvv-head-id { color: var(--text-dim); font-size: 10px; }
.qvv-head-place { font-size: 13px; color: var(--text); margin: 2px 0; }
.qvv-head-sub {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--text-mid);
}

.qvv-dtabs {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  flex-shrink: 0;
  padding: 6px 8px;
  border-bottom: 1px solid var(--border);
}
.qvv-dtab {
  padding: 3px 8px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 3px;
  color: var(--text-mid);
  font-family: var(--sans);
  font-size: 11px;
  cursor: pointer;
}
.qvv-dtab:hover { color: var(--text); border-color: var(--border2); }
.qvv-dtab--on { color: var(--cyan); border-color: var(--cyan); background: var(--accent-dim); }
.qvv-dtab--none { opacity: .45; }

.qvv-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 8px 10px 12px;
  font-size: 11px;
}
.qvv-sec {
  padding: 6px 0 8px;
  border-bottom: 1px solid var(--border);
}
.qvv-sec:last-child { border-bottom: none; }
.qvv-sec-title {
  margin-bottom: 4px;
  font-size: 10px;
  color: var(--text-dim);
  letter-spacing: .06em;
}
.qvv-dim { color: var(--text-dim); font-size: 10px; }
.qvv-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-top: 6px;
}
.qvv-links .btn { padding: 3px 8px; font-size: 10px; }
.qvv-link { color: var(--cyan); font-size: 10px; text-decoration: none; }
.qvv-link:hover { text-decoration: underline; }

/* 概要のデータベースごとの行 */
.qvv-src {
  display: grid;
  grid-template-columns: 78px 74px 1fr;
  gap: 4px 6px;
  align-items: baseline;
  padding: 3px 0;
}
.qvv-src .qvv-link { grid-column: 3; }
.qvv-src .qvv-state { justify-self: start; }   /* 札をマスの幅に伸ばさない */
.qvv-src-name { color: var(--text-mid); font-size: 10px; }
.qvv-src-val { font-size: 11px; min-width: 0; }

/* 状態の札 */
.qvv-state {
  display: inline-block;
  padding: 0 5px;
  border: 1px solid var(--border2);
  border-radius: 2px;
  font-size: 9px;
  line-height: 1.5;
  white-space: nowrap;
  color: var(--text-mid);
}
.qvv-state--same  { color: var(--cyan); border-color: var(--cyan); }
.qvv-state--cand,
.qvv-state--multi { color: var(--amber); border-color: var(--amber); border-style: dashed; }
.qvv-state--none  { color: var(--dim); }
.qvv-state--out   { color: var(--text-dim); border-color: transparent; }
.qvv-state--err   { color: var(--red); border-color: var(--red); }

/* 観測点などの1行（色の見本・地域・名前・値） */
.qvv-trow {
  display: grid;
  grid-template-columns: 10px 64px 1fr 56px;
  gap: 6px;
  align-items: center;
  padding: 2px 0;
  border-bottom: 1px solid var(--border);
}
.qvv-swatch { width: 10px; height: 10px; border-radius: 50%; }
.qvv-trow-sub {
  font-size: 10px;
  color: var(--text-mid);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.qvv-trow-name {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.qvv-trow-val {
  font-family: var(--mono);
  font-weight: 700;
  text-align: right;
}

/* メカニズム解（ビーチボール＋文字） */
.qvv-mech { display: flex; gap: 10px; align-items: flex-start; }
.qvv-bb { flex-shrink: 0; }
.qvv-mech-text { font-family: var(--mono); font-size: 10px; line-height: 1.6; }
.qvv-mech-kind { font-family: var(--sans); font-size: 12px; color: var(--text); }

/* 候補が複数のとき・K-NET の候補 */
.qvv-cand {
  display: flex;
  justify-content: space-between;
  gap: 6px;
  padding: 3px 0;
  border-bottom: 1px solid var(--border);
}
.qvv-knet-progress { min-height: 1.2em; margin-top: 4px; }

/* 機関タブ（気象庁・USGS・EMSC の値を並べる） */
.qvv-agrow {
  display: grid;
  grid-template-columns: 70px 1fr 92px 62px auto;
  gap: 6px;
  align-items: center;
  padding: 4px 0;
  border-bottom: 1px solid var(--border);
  font-size: 10px;
}
.qvv-agrow--base { background: var(--accent-dim); }
.qvv-ag-src { color: var(--text); font-size: 11px; }
.qvv-ag-src .qvv-state { margin-left: 2px; }
.qvv-ag-time, .qvv-ag-pos, .qvv-ag-num { font-family: var(--mono); line-height: 1.35; }
.qvv-ag-num { text-align: right; }
.qvv-ag-num .qvv-dim { margin-left: 3px; }
.qvv-ag-act { display: flex; flex-direction: column; gap: 2px; align-items: flex-end; }
.qvv-ag-act .btn { padding: 1px 6px; font-size: 10px; }
.qvv-ag-none { grid-column: 2 / -1; color: var(--text-dim); }

/* 周辺の地震（押すと開く） */
.qvv-near {
  display: grid;
  grid-template-columns: 130px 1fr 44px;
  gap: 6px;
  align-items: center;
  width: 100%;
  padding: 3px 0;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--border);
  color: var(--text);
  font-size: 11px;
  text-align: left;
  cursor: pointer;
}
.qvv-near:hover { background: var(--surface2); }

/* 記録で絞るのチェックボックス */
.qvv-check {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--text);
}

/* 凡例（長周期・津波） */
.qvv-legend { display: flex; flex-direction: column; gap: 2px; font-size: 10px; }
.qvv-legend-item { display: flex; align-items: center; gap: 6px; }
.qvv-legend-item i { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }

@media (max-width: 860px) {
  .qvv-main > .idb-side--list { width: 100%; }
}


/* ── 58. 学習結果の検証マップ（dev/verify_map・qv_verify_map.js） ──────────────
   骨格・区画・状態の帯・表は §45（ep-）、気象庁の震央の印は §53（fbp-cat-epi）を使い回す。
   方式の色（AI=orange・距離減衰式=cyan・フィードバック=green）は地図の点も同じ CSS 変数から読む
   （qv_verify_map.js の readPalette()）。ここを変えたら地図の色も一緒に変わる
─────────────────────────────────────────────────────────────── */
.vmap-row { display: flex; align-items: center; gap: 6px; margin: 6px 0; }
.vmap-row[hidden] { display: none; }
.vmap-select { width: 100%; min-width: 0; }

.vmap-grid {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 4px 8px;
  font-size: 10.5px;
  color: var(--text-mid);
}
.vmap-grid select { min-width: 0; }

.vmap-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.vmap-fields .ep-toggle-btn { font-size: 10.5px; }

.vmap-legend { display: flex; flex-direction: column; gap: 3px; font-size: 10px; color: var(--text-mid); }
.vmap-lg { display: inline-flex; align-items: center; gap: 5px; }

.vmap-sw {
  display: inline-block;
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  margin-right: 4px;
  border-radius: 50%;
  vertical-align: middle;
}
.vmap-sw--ai    { background: var(--orange); }
.vmap-sw--atten { background: var(--cyan); }
.vmap-sw--fb    { background: var(--green); }
.vmap-sw--tie   { background: var(--dim); }

.vmap-bar { width: 180px; height: 9px; border-radius: 2px; }
.vmap-bar--ai-atten { background: linear-gradient(90deg, var(--orange), var(--border2), var(--cyan)); }
.vmap-bar--fb-ai    { background: linear-gradient(90deg, var(--green), var(--border2), var(--orange)); }
.vmap-bar--fb-atten { background: linear-gradient(90deg, var(--green), var(--border2), var(--cyan)); }
.vmap-bar--err      { background: linear-gradient(90deg, var(--blue), var(--border2), var(--red)); }
.vmap-bar--mae      { background: linear-gradient(90deg, var(--teal), var(--yellow), var(--red)); }
.vmap-bar-ends {
  display: flex;
  justify-content: space-between;
  width: 180px;
  font-family: var(--mono);
  font-size: 9px;
  color: var(--text-dim);
}

.ep-hist tr.vmap-best td { color: var(--text); font-weight: 600; }

/* ── 59. マグニチュードと最大計測震度（dev/mag_intensity・qv_mag_intensity.js） ──
   左に集計の条件（フォームは §42 idb- を使い回す）、右に積み上げ棒グラフと表。
   震度の色は QVIntensityColor（Turbo）から style で与える。ここに震度の色を書かない
─────────────────────────────────────────────────────────────── */
.mgi-side { width: 280px; border-left: none; border-right: 1px solid var(--border); }
.mgi-form { margin-bottom: 10px; }
.mgi-notes {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 10px;
  line-height: 1.55;
  color: var(--text-dim);
}
.mgi-notes p { margin: 0; }
.mgi-notes b { color: var(--text-mid); font-weight: 500; }

.mgi-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 14px 12px;
  overflow-y: auto;
}

.mgi-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; }
.mgi-tg { display: inline-flex; align-items: center; gap: 4px; }
.mgi-tg-label { font-size: 10px; color: var(--text-dim); margin-right: 2px; }
.mgi-tg-btn { padding: 2px 10px; font-size: 11px; opacity: .55; }
.mgi-tg-btn--on { opacity: 1; background: var(--cyan-dim); border-color: var(--cyan); color: var(--text); }
.mgi-check { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; color: var(--text-mid); cursor: pointer; }

.mgi-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  font-size: 11px;
  color: var(--text-mid);
}
.mgi-summary b { font-family: var(--mono); font-weight: 400; color: var(--text); }
.mgi-summary-out { color: var(--text-dim); }

/* グラフの枠（SVG はこの実寸で組む） */
.mgi-chart {
  position: relative;
  flex: 0 0 auto;
  height: min(56vh, 520px);
  min-height: 240px;
  border: 1px solid var(--border);
  border-radius: 3px;
  background: var(--surface);
  overflow: hidden;
}
.mgi-svg { display: block; }
.mgi-grid { stroke: var(--border); stroke-width: 1; }
.mgi-grid--base { stroke: var(--border2); }
.mgi-axis { fill: var(--text-dim); font-family: var(--mono); font-size: 10px; }
.mgi-axis--title { font-family: var(--sans); fill: var(--text-mid); }
.mgi-count { fill: var(--text-dim); font-family: var(--mono); font-size: 9px; }
/* 区分の境目はグラフの地の色で切る（隣り合う色が混ざって見えないように） */
.mgi-seg { stroke: var(--surface); stroke-width: 0.75; }
.mgi-hover { fill: var(--text); opacity: .07; pointer-events: none; }
.mgi-hatch-bg { fill: var(--surface2); }
.mgi-hatch { stroke-width: 2; }
.mgi-hatch--nosi { stroke: var(--text-mid); }
.mgi-hatch--unk  { stroke: var(--amber); }

/* ホバーの内訳 */
.mgi-tip {
  position: absolute;
  z-index: 2;
  min-width: 190px;
  padding: 6px 8px;
  background: var(--surface2);
  border: 1px solid var(--border2);
  border-radius: 3px;
  font-size: 10.5px;
  color: var(--text-mid);
  pointer-events: none;
}
.mgi-tip[hidden] { display: none; }
.mgi-tip-head { font-family: var(--mono); font-size: 12px; color: var(--text); }
.mgi-tip-sub { margin: 2px 0 4px; color: var(--text-dim); }
.mgi-tip-table { border-collapse: collapse; width: 100%; }
.mgi-tip-table td { padding: 1px 0; }
.mgi-tip-table td + td { padding-left: 10px; text-align: right; font-family: var(--mono); color: var(--text); }

/* 凡例と色見本（模様の区分は斜線で示す） */
.mgi-legend { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 10.5px; color: var(--text-mid); }
.mgi-lg { display: inline-flex; align-items: center; gap: 5px; }
.mgi-sw {
  display: inline-block;
  flex: 0 0 auto;
  width: 10px;
  height: 10px;
  margin-right: 4px;
  border-radius: 2px;
  vertical-align: middle;
}
.mgi-sw[data-pattern="nosi"] { background: repeating-linear-gradient(45deg, var(--text-mid) 0 2px, var(--surface2) 2px 4px) !important; }
.mgi-sw[data-pattern="unk"]  { background: repeating-linear-gradient(135deg, var(--amber) 0 2px, var(--surface2) 2px 4px) !important; }

/* 表（M の大きい順） */
.mgi-table-wrap { overflow-x: auto; overscroll-behavior-x: contain; }
.mgi-table { border-collapse: collapse; font-size: 10.5px; white-space: nowrap; }
.mgi-table th, .mgi-table td { padding: 3px 8px; border-bottom: 1px solid var(--border); text-align: right; }
.mgi-table thead th {
  position: sticky;
  top: 0;
  background: var(--surface);
  color: var(--text-mid);
  font-weight: 400;
}
.mgi-table tbody th { color: var(--text); font-family: var(--mono); font-weight: 400; text-align: left; }
.mgi-table td { font-family: var(--mono); color: var(--text); font-variant-numeric: tabular-nums; }
.mgi-table td.mgi-zero { color: var(--dim); }
.mgi-table tbody tr:hover { background: var(--surface2); }

@media (max-width: 860px) {
  .rtm-body:has(.mgi-root) { height: auto; min-height: 100vh; overflow: auto; }
  .mgi-root { flex-direction: column; overflow: visible; }
  .mgi-side { width: auto; border-right: none; border-bottom: 1px solid var(--border); overflow: visible; }
  .mgi-main { overflow: visible; padding: 10px 16px; }
  .mgi-chart { height: 60vh; }
}
/* ── 60. §3 リアルタイム検索の「地震情報」枠（qv_quake_info.js mountPanel） ──
   full の4枠（2×2）の右に縦長の枠を1つ足す。中身は §43 jq- の一覧・詳細を使い回し、
   ここは枠の骨格だけを持つ。スナップのページの中なので overscroll-behavior は付けない。
────────────────────────────────────────────────────────────── */

.rts-root--full .rts-deck { width: 60%; }
.rts-root--full .rts-panes { grid-template-columns: 1fr 1fr 1.15fr; }
.rts-root--full .rts-pane[data-tab="jmainfo"] {
  grid-column: 3;
  grid-row: 1 / span 2;
}
.rts-pane[data-tab="jmainfo"] .rts-pane-body {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0;
}

.jqp-root {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}
.jqp-head {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px;
  border-bottom: 1px solid var(--border);
  font-family: var(--mono);
  font-size: 10px;
  color: var(--text-dim);
}
.jqp-head .jq-select { flex: 0 0 auto; }
.jqp-head .live { margin: 0 0 0 auto; }
.jqp-list {
  flex: 0 0 38%;
  min-height: 0;
  overflow-y: auto;
  border-bottom: 1px solid var(--border2);
}
.jqp-detail {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 8px 10px;
  font-size: 11px;
}

@media (max-width: 900px) {
  .rts-root--full .rts-deck { width: 100%; }
  .rts-root--full .rts-panes { grid-template-columns: 1fr; }
  .rts-root--full .rts-pane[data-tab="jmainfo"] {
    grid-column: auto;
    grid-row: auto;
    min-height: 420px;
  }
}


/* ── 61. 震度予測AI（dev/quake_predict・qv_quake_predict.js） ──
   緊急地震速報（§45 ep-）とフィードバック予測（§53 fbp-）を1画面にしたもの。骨格・区画・表は
   その2つを使い回し、ここは入口の切り替え・観測点の形の凡例・小見出しだけを持つ。
────────────────────────────────────────────────────────────── */
.qp-src { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.qp-src .ep-toggle-btn { font-size: 10.5px; padding-left: 2px; padding-right: 2px; }
.qp-sub { margin: 6px 0 3px; font-size: 10px; color: var(--text-dim); }
.qp-showall { margin: 0 0 10px; }

.qp-shape-legend { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-top: 6px; font-size: 10px; color: var(--text-mid); }
.qp-shape-legend span { display: inline-flex; align-items: center; gap: 4px; }
.qp-shape-sw {
  display: inline-block;
  width: 9px;
  height: 9px;
  background: var(--text-mid);
  border: 1px solid var(--bg);
}
.qp-shape-sw--circle { border-radius: 50%; }
.qp-shape-sw--square { border-radius: 1px; }


/* ── 62. 体感から震度を判定（dev/felt_intensity・qv_felt_intensity_viewer.js） ──
   左＝問い（区分ごとに畳める）、右＝判定（震度○相当・階級ごとの確からしさ・答えの当てはまり）。
   色は --fiv-color に QVIntensityColor の色を JS が入れる
──────────────────────────────────────────────────────────── */
.fiv-main { overflow: hidden; }

/* ── FIV-1. 問い ── */
.fiv-form {
  flex: 1 1 0;
  min-width: 0;
  overflow-y: auto;
  padding: 12px 16px 24px;
}
.fiv-ctx {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  align-items: center;
  padding: 10px 12px;
  margin-bottom: 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 4px;
}
.fiv-ctx-row { display: flex; align-items: center; gap: 8px; }
.fiv-ctx-row[hidden] { display: none; }
.fiv-ctx-label { font-size: 11px; color: var(--text-dim); }
.fiv-select {
  background: var(--surface2);
  color: var(--text);
  border: 1px solid var(--border2);
  border-radius: 3px;
  padding: 4px 6px;
  font-family: var(--sans);
  font-size: 12px;
}
.fiv-ctx-note { flex-basis: 100%; margin: 0; font-size: 11px; color: var(--text-dim); }

.fiv-group {
  margin-bottom: 10px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--surface);
}
.fiv-group-title {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  cursor: pointer;
  font-size: 13px;
  color: var(--accent);
  border-bottom: 1px solid var(--border);
}
.fiv-group:not([open]) > .fiv-group-title { border-bottom: none; }
.fiv-group-n { margin-left: auto; font-family: var(--mono); font-size: 10px; color: var(--text-mid); }
.fiv-empty { margin: 0; padding: 10px 12px; font-size: 11px; color: var(--text-dim); }

.fiv-item {
  margin: 0;
  padding: 8px 12px 10px;
  border: none;
  border-top: 1px solid var(--border);
  min-width: 0;
}
.fiv-group-title + .fiv-item { border-top: none; }
.fiv-item-title { padding: 0; margin-bottom: 4px; font-size: 12px; color: var(--text); }
.fiv-item--answered .fiv-item-title { color: var(--accent); }
.fiv-opt {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 3px 4px;
  border-radius: 3px;
  font-size: 12px;
  color: var(--text-mid);
  cursor: pointer;
}
.fiv-opt:hover { background: var(--surface2); }
.fiv-opt input { flex: none; margin: 0; accent-color: var(--accent); }
.fiv-opt-text { flex: 1 1 auto; min-width: 0; }
.fiv-opt--skip { color: var(--text-dim); }
.fiv-opt:has(input:checked) { background: var(--accent-dim); color: var(--text); }
.fiv-opt--skip:has(input:checked) { background: none; color: var(--text-dim); }

/* ── FIV-2. 判定 ── */
.fiv-result {
  width: 380px;
  flex: none;
  overflow-y: auto;
  padding: 12px 16px 24px;
  border-left: 1px solid var(--border);
  background: var(--surface);
}
.fiv-result-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.fiv-badge {
  --fiv-color: var(--border2);
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  padding: 6px 14px;
  border-radius: 4px;
  border: 2px solid var(--fiv-color);
  background: var(--surface2);
}
.fiv-badge-k, .fiv-badge-s { font-size: 12px; color: var(--text-mid); }
.fiv-badge-v { font-family: var(--mono); font-size: 34px; font-weight: 600; color: var(--fiv-color); line-height: 1; }
.fiv-summary { flex: 1 1 160px; font-size: 11.5px; color: var(--text-mid); line-height: 1.6; }
.fiv-summary b { color: var(--text); font-weight: 500; }
.fiv-actions { display: flex; gap: 8px; flex: 1 1 100%; }
.fiv-judge { flex: 1 1 auto; border-color: var(--accent); color: var(--accent); }
.fiv-judge:disabled { opacity: 0.4; cursor: not-allowed; }
.fiv-reset { flex: none; }
.fiv-sub { margin: 16px 0 6px; font-size: 10px; letter-spacing: 0.08em; color: var(--text-dim); }

.fiv-bars { display: flex; flex-direction: column; gap: 3px; }
.fiv-bar { display: grid; grid-template-columns: 30px 1fr 44px; align-items: center; gap: 6px; }
.fiv-bar-k { font-family: var(--mono); font-size: 11px; color: var(--text-dim); text-align: right; }
.fiv-bar-track { height: 12px; background: var(--surface2); border-radius: 2px; overflow: hidden; }
.fiv-bar-fill { display: block; height: 100%; background: var(--fiv-color); opacity: 0.55; }
.fiv-bar-p { font-family: var(--mono); font-size: 10px; color: var(--text-dim); text-align: right; }
.fiv-bar--range .fiv-bar-k { color: var(--text-mid); }
.fiv-bar--range .fiv-bar-fill { opacity: 0.8; }
.fiv-bar--best .fiv-bar-k, .fiv-bar--best .fiv-bar-p { color: var(--text); }
.fiv-bar--best .fiv-bar-fill { opacity: 1; }

.fiv-evidence { list-style: none; margin: 0; padding: 0; }
.fiv-ev {
  display: grid;
  grid-template-columns: 72px 1fr auto;
  gap: 6px;
  align-items: baseline;
  padding: 4px 0;
  border-bottom: 1px solid var(--border);
  font-size: 11px;
  color: var(--text-mid);
}
.fiv-ev-cls { font-family: var(--mono); font-size: 10px; color: var(--text-dim); }
.fiv-ev-tag { font-size: 10px; }
.fiv-ev--fit .fiv-ev-tag { color: var(--green); }
.fiv-ev--near .fiv-ev-tag { color: var(--amber); }
.fiv-ev--conflict .fiv-ev-tag { color: var(--red); }
.fiv-ev--conflict .fiv-ev-text { color: var(--text); }

.fiv-notes { margin-top: 16px; font-size: 11px; color: var(--text-mid); }
.fiv-notes summary { cursor: pointer; color: var(--text-dim); }
.fiv-notes ul { margin: 6px 0 0; padding-left: 18px; line-height: 1.6; }
.fiv-notes li { margin-bottom: 4px; }

@media (max-width: 860px) {
  .rtm-body:has(.fiv-main) { height: auto; min-height: 100vh; overflow: auto; }
  .fiv-main { flex-direction: column; overflow: visible; }
  .fiv-form { overflow: visible; padding: 10px 16px; }
  .fiv-result {
    width: auto;
    overflow: visible;
    border-left: none;
    border-bottom: 1px solid var(--border);
  }
}

/* ── 63. 公開版の入口（app/index・server/quakeview_public.py） ──────────
   手元のトップ（index.html）は自前の <style> を持つ古い作り。公開版の入口はこちらで組む */
.pub-body {
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  overflow-x: hidden;
}
.pub-page { max-width: 1080px; margin: 0 auto; padding: 0 16px 48px; }
.pub-header {
  display: flex; align-items: center; gap: 12px;
  padding: 24px 0 18px;
  border-bottom: 1px solid var(--border);
}
.pub-logo { width: 36px; height: 36px; flex: none; }
.pub-title { font-family: var(--mono); font-size: 22px; font-weight: 600; letter-spacing: 0.04em; }
.pub-title span { color: var(--cyan); }
.pub-lead { margin: 18px 0 8px; font-size: 14px; line-height: 1.8; color: var(--text-mid); }
.pub-notice {
  margin: 12px 0 0; padding: 10px 14px;
  border: 1px solid var(--border2); border-left: 3px solid var(--amber);
  background: var(--surface);
  font-size: 13px; line-height: 1.7; color: var(--text);
}
/* 公開版の入口 app/index.html のナビの右端の注意（狭い画面では隠す。入口ページと各セクションにも同じ趣旨を書いている） */
.pub-live-note {
  margin-left: auto;
  font-size: 11px;
  color: var(--amber);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (max-width: 860px) { .pub-live-note { display: none; } }
/* 入口ページの最後のセクション（画面の一覧・出典）。セクションの高さに収まらないので中でスクロールする */
.pub-snap-portal {
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
}
@media (max-width: 860px) { .pub-snap-portal { overflow-y: visible; } }
.pub-section-label {
  margin: 32px 0 12px;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em;
  color: var(--text-dim); text-transform: uppercase;
}
.pub-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.pub-card {
  display: flex; flex-direction: column; gap: 8px;
  padding: 16px 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-top: 2px solid var(--pub-accent, var(--cyan));
  border-radius: 6px;
  color: var(--text); text-decoration: none;
  transition: border-color 0.15s, background 0.15s;
}
.pub-card:hover { background: var(--surface2); border-color: var(--pub-accent, var(--cyan)); }
.pub-card--cyan   { --pub-accent: var(--cyan); }
.pub-card--orange { --pub-accent: var(--orange); }
.pub-card--green  { --pub-accent: var(--green); }
.pub-card-tag {
  align-self: flex-start;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em;
  color: var(--pub-accent, var(--cyan));
  border: 1px solid var(--pub-accent, var(--cyan)); border-radius: 3px; padding: 1px 6px;
}
.pub-card-title { font-size: 16px; font-weight: 500; }
.pub-card-desc { font-size: 12.5px; line-height: 1.7; color: var(--text-mid); }
.pub-card-meta { margin-top: auto; font-family: var(--mono); font-size: 10.5px; color: var(--text-dim); }
.pub-credits { font-size: 12.5px; line-height: 1.8; color: var(--text-mid); }
.pub-credits ul { margin: 0; padding-left: 18px; }
.pub-credits a { color: var(--cyan); }
.pub-footer {
  margin-top: 40px; padding-top: 14px; border-top: 1px solid var(--border);
  font-family: var(--mono); font-size: 11px; color: var(--text-dim);
}
@media (max-width: 640px) {
  .pub-grid { grid-template-columns: 1fr; }
  .pub-title { font-size: 19px; }
}