/* /hormuz/ 本体の CSS。課題46 D2 で docs/hormuz/index.html の <style> から移した。
   D3 PR 4（2026-10-20）で地・面・罫・文字・書体を「鉄と錆止め」へ。色と書体は /assets/css/tokens.css（先に読む）。
   段は太い罫で切り、箱・角丸・影・グラデーションは使わない（tools/site-redesign-design.md §1・§3）。
   状態の色（赤・橙・黄・緑）と、状態に見える紫・桃の色は PR 5 で札にするので、ここでは値を残している（グラデーションだけ単色にした）。
   地図の色（タイル・線・印・ポップアップの中・凡例の線の色）は PR 6 */

/* ===== フォント・基本設定 ===== */
* {
  font-family: var(--f-body);
  box-sizing: border-box;
}

/* ===== モバイル ルートフォントサイズ底上げ ===== */
/* rem基準を16px→18pxに変更。全remベースのサイズが1.125倍にスケール */
@media (max-width: 768px) {
  html {
    font-size: 18px;
  }
}

/* ===== PC/タブレット ルートフォントサイズ底上げ（フェーズ0b / 2026-09-04 追加） =====
   スマホには上記の底上げがあるが、PC側には無かったため、本文相当のテキストが
   11〜12px相当で表示されていた（実測: ルートテーブル本文 12.16px）。
   一般的な可読下限を下回るため、スマホと同じ 18px 基準に揃える。

   これにより rem 指定の font-size 447箇所が一括で拡大する。
   今後サイズを調整する場合は、447箇所ではなくこの数値1箇所を変更する。

   検証: 1440px / 909px の双方で横スクロール0を確認（2026-09-04）。
   フェーズ2 2-a（2026-09-18 試作）: 18px → 20px。
   18px では文字量の約6割が 14px 未満（中央値 14px）だった。20px で 14px 未満は約1割、
   本文の中央値は 15〜16px になる。768px 以下（スマホ）は上の絶対ルールのまま変えない。 */
@media (min-width: 769px) {
  html {
    font-size: 20px;
  }
}

/* ===== 余白最適化（スマホ優先） ===== */
body {
  margin: 0;
  padding: 0 10px;
}

/* ===== コンテナ幅をフル活用 ===== */
.container, .source-wrap {
  max-width: 100% !important;
  padding-left: 10px !important;
  padding-right: 10px !important;
}
/* ===== スマホ最適化 ===== */
@media (max-width: 600px) {

  /* 全体余白を削減 */
  body {
    padding: 0 !important;
    margin: 0 !important;
  }

  .container,
  .source-wrap {
    padding-left: 4px !important;
    padding-right: 4px !important;
  }

  /* ルートテーブルは端まで広げる。
     親の #routes は body 直下で padding が 0 のため、以前あった
     margin -4px / width calc(100% + 8px) の打ち消しは過剰で、
     375px 幅で右に 4px はみ出していた（2026-09-05 実測）。 */
  .rtable-wrap {
    overflow-x: auto;
  }
  /* ティッカー余白削減 */
  .ticker {
    padding: 7px 10px !important;
  }

  /* カード系の余白削減 */
  .news-item {
    padding: 10px 12px !important;
  }
}
/* ===== 全体文字サイズ底上げ（スマホ最適化 v2） ===== */
/* html font-size: 18px により rem全体が底上げ済み。*/
/* 以下は追加の個別調整のみ。 */
@media (max-width: 768px) {
  body {
    line-height: 1.8;
  }
  /* ニュースアイテム行間 */
  .news-item,
  .news-item a {
    line-height: 1.7 !important;
  }
  /* シナリオ本文行間 */
  .sc-body, .sc-impact {
    line-height: 1.75 !important;
  }
}
/* ===== ニュースリスト余白最適化 ===== */
@media (max-width: 768px) {
  .news-item {
    padding: 10px 12px !important;
    font-size: 13px !important;
  }
}
* { margin:0; padding:0; box-sizing:border-box; }
/* 行間：BIZ UDPゴシックは line-height:normal だと約 1.0 で詰まる（Noto Sans JP は約 1.45 だった）。
   既定を 1.5 にして、指定のない所の行間をいままでに近づける（スマホの body は上の 1.8 のまま） */
html { line-height:1.5; }
body {
  background:var(--c-bg);
  color:var(--c-text);
  font-family:var(--f-body);
  min-height:100vh;
}
/* リンクは本文の色＋下線（Q1）。ボタンやカードの形のリンクは各クラスで下線を外す */
a { color:var(--c-text); text-decoration:underline; text-underline-offset:.18em; text-decoration-thickness:1px; }
a:hover { text-decoration-thickness:2px; }
a:focus-visible { outline:2px solid var(--c-accent); outline-offset:2px; }

/* HEADER（題字の帯。状態ではないので赤の面にしない） */
header {
  background:var(--c-bg);
  border-bottom:1px solid var(--c-rule);
  padding:10px 14px;
  display:flex; align-items:center;
  justify-content:space-between; flex-wrap:wrap; gap:8px;
}
header h1 { font-size:1.1rem; font-weight:700; color:var(--c-text); }
.badges { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.badge-item { padding:4px 12px; font-size:0.72rem; font-weight:600; }
/* 警戒レベル（2026-09-25 見直し）：点滅と赤い面をやめ、赤は先頭の点だけにする。
   中身は「警戒レベル：最高」の一語だけ。情勢の要約は30秒カラムに書く（ここに括弧書きで足さない） */
.badge-alert { display:inline-flex; align-items:center; gap:6px; background:var(--c-surface); color:var(--c-text); }
.badge-alert::before { content:""; width:7px; height:7px; border-radius:50%; background:var(--c-danger); flex-shrink:0; }
.badge-days  { border:1px solid var(--c-rule); color:var(--c-text); font-variant-numeric:tabular-nums; }
.badge-date  { border:1px solid var(--c-rule); color:var(--c-text-mute); }
@keyframes badgeBlink{0%,100%{opacity:1}50%{opacity:0.5}}

/* TICKER（速報の帯）。速報は状態ではないので、赤の帯をやめて面の帯に。「速報」の札は本文の色の面（反転）で目立たせる（D3 PR 5） */
.ticker {
  background:var(--c-surface);
  border-bottom:1px solid var(--c-rule);
  padding:9px 18px;
  display:flex; align-items:center; gap:12px; overflow:hidden;
}
.ticker-label { background:var(--c-text); color:var(--c-bg); font-size:0.68rem; font-weight:800; padding:3px 9px; white-space:nowrap; flex-shrink:0; }
.ticker-scroll { overflow:hidden; flex:1; }
.ticker-text { font-size:0.8rem; color:var(--c-text); white-space:nowrap; display:inline-block; animation:tickerScroll 50s linear infinite; will-change:transform; }
/* 50s は JS が動かないときの予備。fitTickerSpeed() が文字の長さから一定の速さ（px/秒）になるよう上書きする */
@keyframes tickerScroll{0%{transform:translate3d(100vw,0,0)}100%{transform:translate3d(-100%,0,0)}}

/* 状態の札（D3 PR 5・設計書 §1）：赤＝危険・橙＝警戒・黄＝注記・緑＝平常の色面、枠だけ＝判断なし。
   色面の上の文字は --c-on-*。色だけに頼らないよう、一覧の行頭の札には語を書く（CSS の content）。
   一覧の行（速報インシデント）のモディファイアと語：--danger 危険／--warning 注意／--positive 好転／--info は札なし。
   「主な動き」（.key-move）は二段表示 PR-A（2026-11-01）で外した */
.incident-item--danger .incident-tag::before, .incident-item--warning .incident-tag::before, .incident-item--positive .incident-tag::before {
  display:inline-block; margin-right:6px; padding:0 5px; font-size:0.78em; font-weight:700; line-height:1.5; vertical-align:0.08em; letter-spacing:0.04em; }
.incident-item--danger .incident-tag::before { content:"危険"; background:var(--c-danger); color:var(--c-on-danger); }
.incident-item--warning .incident-tag::before { content:"注意"; background:var(--c-warn); color:var(--c-on-warn); }
.incident-item--positive .incident-tag::before { content:"好転"; background:var(--c-ok); color:var(--c-on-ok); }

/* 分類の札（D3 PR 5b・設計書 §2-2）：海上・攻撃・軍事・原油・市場・外交・その他の6つ。状態ではないので枠だけ。
   語は HTML（日次）が書き、A のアイコンは ::before の mask（外交は文字だけ）。アイコンの値は下の印の間を tools/build_icons.py が書き出す */
.cat { display:inline-flex; align-items:center; gap:4px; margin-right:6px; padding:0 5px; border:1px solid var(--c-text-mute);
  color:var(--c-text); font-size:0.78em; font-weight:700; line-height:1.5; letter-spacing:0.04em; vertical-align:0.08em; white-space:nowrap; }
.cat::before { content:""; flex:none; width:1.6em; height:1.6em; margin-block:-0.15em; background:currentColor;
  -webkit-mask:var(--cat-icon) center / contain no-repeat; mask:var(--cat-icon) center / contain no-repeat; }
.cat-dip::before { display:none; }
/* cat-icons:begin（tools/build_icons.py が書き出す。手で書き換えない） */
.cat-sea { --cat-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' fill-rule='evenodd' d='M2 12.5V6.5H7.6V12.5ZM3 8H6.6V9.2H3Z'/%3E%3Cpath fill='%23000' d='M1.2 5.2H8.4V6.6H1.2ZM3 5.2V2.4H5.8L6.3 5.2Z'/%3E%3Cpath fill='%23000' d='M1 12.4H23L22 15.4H1.5ZM11.6 12.4V10.6H14.4V12.4ZM20.3 12.4V8.6H21.6V12.4Z'/%3E%3Cpath fill='%23000' d='M1.8 16.6H21.6L20.7 19Q20.5 19.6 19.7 19.6H3.4Q2.6 19.6 2.4 18.9Z'/%3E%3C/svg%3E"); }
.cat-attack { --cat-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='%23000'%3E%3Cpath fill-rule='evenodd' d='M12.0 0.8L13.7 6.1L17.1 5.1L16.1 8.5L21.0 10.2L16.1 11.9L16.9 15.1L13.7 14.3L12.0 19.6L10.3 14.3L6.9 15.3L7.9 11.9L3.0 10.2L7.9 8.5L7.1 5.3L10.3 6.1ZM12 8.2A2 2 0 1 1 12 12.2A2 2 0 1 1 12 8.2Z'/%3E%3Cpath d='M1.4 21H7.6V22.5H1.4ZM9.4 21H14.6V22.5H9.4ZM16.4 21H22.6V22.5H16.4Z'/%3E%3C/g%3E%3C/svg%3E"); }
.cat-mil { --cat-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M1 14.2L23.2 11.6L22 15.4H1.6Z'/%3E%3Cpath fill='%23000' d='M1.9 16.6H21.6L20.8 18.9Q20.6 19.4 19.9 19.4H3.4Q2.7 19.4 2.5 18.8Z'/%3E%3Cpath fill='%23000' d='M4.6 14V10.4H11V13.4ZM8.4 10.4L9 7.6H11.4L11.7 10.4ZM11 13.4V9.2H17.2V12.8ZM13.3 9.2V6.9H16.9L17.4 9.2ZM14.3 6.9L15.2 1.4L16.1 6.9ZM13.1 3.4H17.3V4.6H13.1ZM18.2 12.6V10.2H20.8L21.3 12.2ZM20.6 10.5H23.4V11.6H20.6Z'/%3E%3C/svg%3E"); }
.cat-oil { --cat-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='%23000'%3E%3Cpath d='M13.6 1.4H16.2V3.4H13.6Z'/%3E%3Crect x='4.6' y='2.8' width='14.8' height='2.2' rx='1.1'/%3E%3Crect x='4.6' y='19.6' width='14.8' height='2.2' rx='1.1'/%3E%3Cpath fill-rule='evenodd' d='M5.6 4H18.4V20.6H5.6ZM5.6 7.6H18.4V8.8H5.6ZM5.6 16.8H18.4V18H5.6ZM12 10C13.7 12 14.3 12.9 14.3 13.7A2.3 2.3 0 0 1 9.7 13.7C9.7 12.9 10.3 12 12 10Z'/%3E%3C/g%3E%3C/svg%3E"); }
.cat-other { --cat-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='%23000'%3E%3Cpath d='M12 1.8L15 6.2H9Z'/%3E%3Cpath d='M10.3 10.2L10.5 7.4H13.5L13.7 10.2ZM10 14.7L10.2 11.4H13.8L14 14.7Z'/%3E%3Cpath d='M3.6 19.5Q3.6 17.1 7.2 15.9H16.8Q20.4 17.1 20.4 19.5Z'/%3E%3Cpath d='M1.5 21H7.5V22.5H1.5ZM9 21H15V22.5H9ZM16.5 21H22.5V22.5H16.5Z'/%3E%3C/g%3E%3C/svg%3E"); }
/* cat-icons:end */

/* MAIN CONTAINER */
.container { padding:16px; max-width:1400px; margin:0 auto; display:flex; flex-direction:column; gap:14px; }

/* INCIDENT（速報インシデント・② PR1 2026-09-24）
   日次更新で項目を足すときは、この型（li.incident-item＋色のモディファイア）で書く。 */
.incident-headline-row { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.incident-headline { font-size:var(--fs-base); font-weight:800; color:var(--c-text); }
.incident-badge { font-size:var(--fs-2xs); color:var(--c-text-mute); padding:2px 8px; border:1px solid var(--c-rule); }
.incident-list { margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:10px; }
.incident-item { margin-bottom:8px; padding-bottom:8px; border-bottom:1px solid var(--c-rule); }
.incident-tag { font-weight:700; color:var(--c-text); }   /* 状態は行頭の札（上の「状態の札」）。文字は色分けしない */
.incident-body { color:var(--c-text); }

/* 二段表示の開閉（2026-11-01・二段表示 PR-A。設計 hormuz-ops/drafts/design/text-two-stage.md §2・§3-1）
   押す場所は要点・件名の箱（summary）全体。全文は箱の下に開くので、押す場所は動かない（開くのも閉じるのも同じ所）。
   30秒カラムは日次の HTML に <details class="glance-more"> を書く。速報インシデントは wrapIncidentDetails() が
   li.incident-item の中身を <details class="incident-more"> に包む（JS が無ければ今までどおり全文）。
   札の語は CSS が出す（HTML の札は aria-hidden の空の span）。札の文字は本文の 0.7倍・高さ 26px・左右 9px */
.glance-more, .incident-more { display:block; }
.glance-more > summary, .incident-more > summary { list-style:none; cursor:pointer; display:flex; flex-direction:column; gap:6px;
  min-height:44px; }
.glance-more > summary::-webkit-details-marker, .incident-more > summary::-webkit-details-marker { display:none; }
.glance-more > summary:focus-visible, .incident-more > summary:focus-visible { outline:2px solid var(--c-accent); outline-offset:2px; }
.more-chip { align-self:flex-end; display:inline-flex; align-items:center; min-height:26px; padding:0 9px;
  border:1px solid var(--c-text); color:var(--c-text); font-size:0.665rem; font-weight:700; line-height:1; white-space:nowrap; }   /* 本文（--fs-md）の 0.7倍 */
.glance-more .more-chip::before { content:"続きを読む ▼"; }
.incident-more .more-chip::before { content:"本文を読む ▼"; }
.glance-more[open] > summary .more-chip::before, .incident-more[open] > summary .more-chip::before { content:"閉じる ▲"; }
.glance-more > summary:hover .more-chip, .incident-more > summary:hover .more-chip { background:var(--c-bg); }
/* 30秒カラムの箱：面の上に地の色の箱。要点は本文の色の太字（キーワードの太字 markKeywords() は掛けない） */
.glance-more { flex:1 1 auto; min-width:0; background:var(--c-bg); border:1px solid var(--c-rule); }
.glance-more > summary { padding:8px 10px; }
.glance-lead { color:var(--c-text); font-size:var(--fs-md); font-weight:700; line-height:1.6; }
.glance-more > .glance-text { display:block; padding:8px 10px 12px; border-top:1px solid var(--c-rule); }
/* 「海峡の今」：数字の札4枚（ブレント・WTI・通航・封鎖の累計）＋要点の箱。札は既定2列・601px 以上4列 */
.glance-body { flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:8px; }
.glance-figs { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:8px; margin:0; }
.glance-fig { background:var(--c-bg); padding:8px 10px; display:flex; flex-direction:column; gap:2px; min-width:0; }
.glance-fig-label { font-size:var(--fs-xs); color:var(--c-text-mute); line-height:1.4; }
.glance-fig-val { line-height:1.1; white-space:nowrap; }
.glance-fig-num { font-family:var(--f-figure); font-size:1.5rem; font-weight:600; color:var(--c-figure); font-variant-numeric:tabular-nums; }   /* .stat-num と同じ作法 */
.glance-fig-unit { margin-left:2px; font-size:var(--fs-xs); color:var(--c-text); }
.glance-fig-sub { font-size:var(--fs-2xs); color:var(--c-text-mute); line-height:1.4; }
@media (min-width: 601px) {
  .glance-figs { grid-template-columns:repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .more-chip { font-size:0.616rem; }   /* スマホの本文 0.88rem の 0.7倍（約11px） */
}
/* 速報インシデント：件名だけを並べ、押すと本文。札（危険・注意・好転と分類）は件名の頭に残る */
.incident-more > summary .incident-tag { display:block; line-height:1.6; }
.incident-more > .incident-body { display:block; margin-top:6px; padding-top:8px; border-top:1px solid var(--c-rule); }

/* GLANCE（30秒カラム・② PR2 2026-09-25）
   日次更新は4行（いま何が・海峡の今・次の焦点・前回の裏取り）の要点と全文、海峡の今の数字の札を書き換える。
   「主な動き」（.key-moves）とステータスバッジ（.glance-badges）は二段表示 PR-A（2026-11-01）で外した（速報インシデントと重なるため）。
   いずれもインライン style を書かず、この型（クラス＋色のモディファイア）で書く。 */
.glance { width:100%; margin:0 0 14px 0; padding:0; }   /* 下は解説インフォグラフィック。上の空白を詰める（2026-10-21。もとは 28px） */
/* 30秒カラムは入口なので、ハブの入口（案 E4）と同じく面の帯の上に差し色の太い罫。箱の枠・角丸・影はやめた */
.glance-panel { background:var(--c-surface); border-top:4px solid var(--c-accent); padding:16px 12px; }
.sec-h2.glance-title { color:var(--c-text); border-top:0; padding-top:0; border-bottom:1px solid var(--c-rule); }
.glance-summary { display:flex; flex-direction:column; gap:6px; margin-bottom:10px; padding:4px 0 8px; border-bottom:1px solid var(--c-rule); }
.glance-row { display:flex; align-items:flex-start; gap:10px; }
/* 「いま何が」「海峡の今」「次の焦点」は段の名前で状態ではないので、3つとも枠だけ（D3 PR 5） */
.glance-label { border:1px solid var(--c-rule); color:var(--c-text-mute);
  font-size:var(--fs-sm); font-weight:700; padding:2px 8px; white-space:nowrap; }
/* 4行の箱の左端をそろえる（ラベルの幅を固定。二段表示 PR-A）。
   スマホはラベルを箱の上に置き、箱を全幅にする（横に置くと要点が4行になったため。2026-11-01・運営者） */
.glance-summary .glance-label { flex:0 0 7.2em; text-align:center; }
@media (max-width: 600px) {
  .glance-summary .glance-row { flex-direction:column; align-items:stretch; gap:4px; }
  .glance-summary .glance-label { flex:none; align-self:flex-start; }
}
.glance-text { color:var(--c-text); font-size:var(--fs-md); line-height:1.6; }
/* 今後の予定日（JS が /data/upcoming.json から「次の焦点」の直下に足す行。予定が無ければ行ごと出ない）。札は枠だけ */
.upcoming-item { display:inline-block; margin-right:14px; }
.upcoming-item strong { color:var(--c-text); }
/* 最終更新からの経過（JS がヘッダーの日時から計算。36時間を超えたら日時の横、72時間を超えたら注意書き） */
.badge-elapsed { margin-left:4px; padding:0 5px; background:var(--c-warn); color:var(--c-on-warn); }
.stale-notice { margin:0; padding:8px 16px; background:var(--c-warn); color:var(--c-on-warn); font-weight:700;
  font-size:var(--fs-sm); line-height:1.6; text-align:center; }

/* 30秒カラムの行き先（ボタン・ピルの1列。二段表示 PR-A で「主な動き」とバッジを外し、glance-links と glance-jump を1列にまとめた）。
   行き先の案内で状態ではないので、色分けをやめて枠だけにした */
.glance-jump { display:flex; flex-wrap:wrap; align-items:center; gap:8px; padding-top:10px; }
.glance-btn { display:inline-flex; align-items:center; gap:7px; min-height:32px; border:1px solid var(--c-text);
  color:var(--c-text); font-size:var(--fs-sm); font-weight:700; padding:5px 14px; text-decoration:none; letter-spacing:0.03em; white-space:nowrap; }
.glance-btn:hover { background:var(--c-bg); text-decoration:underline; text-underline-offset:.18em; }
.jump-pill { display:inline-flex; align-items:center; gap:5px; border:1px solid var(--c-rule); color:var(--c-text);
  font-size:var(--fs-sm); font-weight:700; padding:5px 14px; text-decoration:none; white-space:nowrap; }
.jump-pill:hover { border-color:var(--c-text); text-decoration:underline; text-underline-offset:.18em; }
.jump-pill-badge { font-size:0.62rem; font-weight:700; line-height:1; padding:3px 6px;
  background:var(--c-accent); color:var(--c-on-accent); letter-spacing:0.02em; }
.jump-map { margin-left:auto; display:inline-flex; align-items:center; gap:8px;
  background:var(--c-accent); color:var(--c-on-accent); font-size:var(--fs-md); font-weight:700; padding:7px 18px; text-decoration:none;
  letter-spacing:0.03em; white-space:nowrap; }
.jump-map:hover { text-decoration:underline; text-underline-offset:.18em; }

/* 深掘り分析記事：赤い枠の箱をやめ、細い罫で区切る。記事の色分けもやめた（状態ではない） */
.glance-special { margin-top:16px; padding-top:12px; border-top:1px solid var(--c-rule); }
.glance-special-head { font-size:var(--fs-md); font-weight:700; color:var(--c-accent); letter-spacing:0.06em; margin-bottom:10px;
  display:flex; align-items:center; gap:7px; }
.glance-special-sub { font-size:var(--fs-xs); font-weight:600; color:var(--c-text-mute); margin-left:4px; }
.glance-special-links { display:flex; flex-wrap:wrap; gap:6px; }
/* ピルの頭の A の絵（1色・--a）と、本編のカードの段の最後のコラムの一覧へのリンク（10/21・運営者） */
.pill-icon { width:18px; height:18px; flex-shrink:0; --a:var(--c-text); }
/* 見出しは本編の段へのリンク（<a>）。色は見出しのまま、触れたときだけ下線 */
a.glance-special-head { text-decoration:none; }
a.glance-special-head:hover { text-decoration:underline; text-underline-offset:.18em; }
.commentary-all { display:inline-block; margin-top:4px; font-size:var(--fs-sm); font-weight:700; color:var(--c-text); text-decoration:underline; text-underline-offset:.18em; }
.report-banner { display:flex; align-items:center; gap:10px; width:100%; margin-top:8px;
  border:1px solid var(--c-rule); overflow:hidden; text-decoration:none; }
.report-banner:hover { border-color:var(--c-text); }
.report-banner:hover .report-banner-title { text-decoration:underline; text-underline-offset:.18em; }
.report-banner-img { width:72px; height:56px; object-fit:cover; object-position:center 20%; flex-shrink:0; }
.report-banner-body { padding:6px 10px 6px 0; flex:1; min-width:0; }
.report-banner-kicker { font-size:var(--fs-2xs); font-weight:700; color:var(--c-text-mute); letter-spacing:0.06em; margin-bottom:2px; }
.report-banner-title { font-size:var(--fs-xs); font-weight:700; color:var(--c-text); line-height:1.4; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.report-banner-sub { font-size:var(--fs-2xs); color:var(--c-text-mute); margin-top:1px; }

/* 旧インライン style に当たっていた属性セレクタ（[style*="font-size:0.95rem"] 0.88rem・
   div[style*="font-size:0.7"] 0.8rem）の効果をクラスで引き継ぐ */
@media (max-width: 768px) {
  .report-banner-title { font-size:0.8rem; }
}
@media (max-width: 600px) {
  .glance-text,
  .glance-lead,
  .glance-special-head { font-size:0.88rem; }
}


/* MAP */
.map-wrap { overflow:hidden; border:1px solid var(--c-rule); position:relative; }
/* 地図の全画面表示（2026-10-21）。枠を画面いっぱいに広げる。モーダルと拡大画像（z-index 9999）はこの上に出る。
   上下左右は端末の切り欠き・ホームバーの分を空ける（地の色は海） */
.map-wrap.is-full { position:fixed; inset:0; z-index:5000; border:0; background:var(--map-sea);
  padding:env(safe-area-inset-top,0px) env(safe-area-inset-right,0px) env(safe-area-inset-bottom,0px) env(safe-area-inset-left,0px); }
.map-wrap.is-full #map { height:100%; }
html.map-full-open, html.map-full-open body { overflow:hidden; }
/* 全画面では凡例の中身を高くしてよい（ふだんは地図の高さ 400px・580px に合わせて低く抑えている） */
.map-wrap.is-full #map .map-legend.open .legend-body { max-height:min(60vh, 560px); max-height:min(60dvh, 560px); }
/* ボタン：Leaflet の拡大・縮小と同じ形。開くときは外向きの角、閉じるときは内向きの角 */
.map-full-btn { display:flex !important; align-items:center; justify-content:center; }
.map-full-btn svg path { fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:square; }
.map-full-btn .mf-close, .map-wrap.is-full .map-full-btn .mf-open { display:none; }
.map-wrap.is-full .map-full-btn .mf-close { display:inline; }
#map { height:580px; width:100%; background:var(--map-sea); }   /* 地の色は海（PR 6a。自前の地図は海を塗らない） */
.leaflet-tile-pane { filter: brightness(0.55) saturate(0.5) hue-rotate(190deg); }

/* マーカーズームスケーリング 2026-06-06 fix */
#map .leaflet-marker-icon:not(.country-label):not(.bm-label) > div {
  transform-origin: center center;
  transition: transform 0.25s ease;
}
#map.mz-far  .leaflet-marker-icon:not(.country-label):not(.bm-label) > div { transform: scale(0.35); }
#map.mz-mid  .leaflet-marker-icon:not(.country-label):not(.bm-label) > div { transform: scale(0.57); }
#map.mz-near .leaflet-marker-icon:not(.country-label):not(.bm-label) > div { transform: scale(0.78); }
/* /マーカーズームスケーリング */

/* MAP JUMP（地点ジャンプ） */
.map-jump {
  background:var(--c-bg) !important;
  border:1px solid var(--c-rule) !important;
  padding:8px 9px;
  color:var(--c-text);
  line-height:1.4;
}
.map-jump .mj-title {
  font-size:0.5rem;   /* 凡例と一緒に一段小さく（2026-10-21・運営者。もとは 0.62rem） */
  font-weight:700;
  color:var(--c-text-mute);
  letter-spacing:0.08em;
  margin-bottom:6px;
}
.map-jump .mj-btns { display:flex; flex-direction:column; gap:4px; }
.mj-btn {
  background:none;
  border:1px solid var(--c-rule);
  color:var(--c-text);
  font-family:inherit;
  font-size:0.54rem;   /* もとは 0.68rem（2026-10-21） */
  font-weight:700;
  padding:3px 9px;
  cursor:pointer;
  white-space:nowrap;
  text-align:left;
  transition:background 0.2s;
}
.mj-btn:hover { background:var(--c-surface); border-color:var(--c-text); }
.mj-btn.mj-reset { color:var(--c-text-mute); }
.mj-btn.mj-reset:hover { color:var(--c-text); }
@media (max-width: 600px) {
  /* スマホでは地図面積を優先し、枠ごと一段小さくする（2026-09-03 調整） */
  .map-jump { padding:5px 6px; }
  .map-jump .mj-title { font-size:0.42rem; margin-bottom:3px; }
  .map-jump .mj-btns { gap:3px; }
  .mj-btn { font-size:0.47rem; padding:2px 6px; }
}

/* MAP LEGEND */
.map-legend {
  background:var(--c-bg) !important;
  border:1px solid var(--c-rule) !important;
  padding:12px 15px;
  font-size:0.6rem;   /* 凡例の文字を全体に約3px 小さく（2026-10-21・運営者。もとは 0.75rem・幅 252px） */
  color:var(--c-text);
  min-width:220px;
  line-height:1.5;
}
.map-legend h3 { color:var(--c-text); font-size:0.65rem; margin-top:1.33em; margin-bottom:9px; font-weight:700; display:flex; justify-content:space-between; align-items:center; }
.legend-toggle-btn {
  display:inline-block;
  background:none;
  border:1px solid var(--c-text);
  color:var(--c-text);
  font-size:0.58rem;
  font-weight:700;
  padding:2px 8px;
  cursor:pointer;
}
.leg-row { display:flex; align-items:center; gap:8px; margin-bottom:6px; }
.leg-dash { width:30px; height:0; flex-shrink:0; border-top:3px dashed; }
.leg-row span { font-size:0.57rem; color:var(--c-text); }
.leg-section {
  font-size: 0.5rem;
  font-weight: 700;
  color: var(--c-text-mute);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 6px 0 4px;
}
.leg-emoji {
  font-size: 0.75rem;
  width: 20px;
  text-align: center;
  flex-shrink: 0;
}
.leg-note { margin-top:8px; padding-top:7px; border-top:1px solid var(--c-rule); font-size:0.52rem; color:var(--c-text-mute); }
/* スマホの凡例。基本の規則より後ろに置く（前にあったため .leg-section・.leg-note のスマホの指定が効いていなかった。2026-10-21） */
@media (max-width: 600px) {
  .map-legend { font-size: 0.55rem; }
  .leg-row span { font-size: 0.5rem; }
  .leg-section { font-size: 0.46rem; }
  .leg-note { font-size: 0.5rem; }
}
/* 閉じるボタンはパネル下端・右下に固定する。本文をスクロールさせても
   位置が動かないよう .legend-body の外に置いている */
.legend-close-wrap { display:none; }
.map-legend.open .legend-close-wrap { display:flex; justify-content:flex-end; margin-top:8px; }
.map-legend.open #legend-btn { display:none; }

/* 凡例ボディ折りたたみ（PC・スマホ共通） */
.legend-body {
  display: none;
}
.map-legend.open .legend-body {
  display: block;
  /* 凡例が地図（PC:580px / スマホ:400px）を縦にはみ出さないよう上限を設ける。
     閉じるボタンは .legend-body の外にあるため常に下端に残る（2026-09-03 調整） */
  max-height: 420px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* STATS */
.stats-row { display:grid; grid-template-columns:repeat(6,1fr); gap:12px; }
/* 主要指標：カードの面・角丸・浮き上がりをやめ、上の細い罫で区切る（ハブの主要数値と同じ作法）。数字は縦長の書体で鋼の色 */
.stat-card { border-top:1px solid var(--c-rule); padding:14px 4px; text-align:center; }
/* カードは5枚。備蓄のカードを2列ぶんにして、2列・3列・6列のどの並びでも端が空かないようにする */
.stats-row > .stat-card:first-child { grid-column: span 2; }
.stat-num   { font-family:var(--f-figure); font-size:1.6rem; font-weight:600; line-height:1; margin-bottom:4px; color:var(--c-figure); }
.stat-label { font-size:0.67rem; color:var(--c-text-mute); line-height:1.4; }
/* 数字の色分け（.c-*）は状態ではないのでやめ、すべて --c-figure にした（クラスは HTML に残る） */

/* ROUTE TABLE */

/* ===== セクション見出し（フェーズ1a-2 / 2026-09-05 追加） =====
   主要セクションの h2 はすべて .sec-h2 を使う。
   従来 0.75〜1.2rem の4サイズに散っていたものを1段階へ統一した。
   今後サイズを変えるときは各所ではなくこの1箇所を変更する。
   D3 PR 4（2026-10-20）：段は上の太い罫で切る（§1）。見出しの色分け（--red・--violet ほか）はやめ、すべて本文の色にした。 */
.sec-h2 {
  font-size: var(--fs-lg);
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--c-text);
  margin: 0 0 12px;
  padding-top: 10px;
  border-top: 3px solid var(--c-text);
}
/* セクション冒頭のリード文。見出しと同居していた長文をここへ分離する */
.sec-lead {
  font-size: var(--fs-sm);
  font-weight: 400;
  color: var(--c-text);
  line-height: var(--lh-body);
  margin: 0 0 12px;
}
/* 見出し内の補足（日付・サブタイトル）。見出し本体より小さく弱く出す */
.sec-h2 .sec-h2-sub {
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: 0;
  color: var(--c-text-mute);
  margin-left: 8px;
}
/* 3層ピラミッドの層ラベル。見出し(h1/h2/h3)ではなく視覚的なグルーピングとして置く。
   セクション見出しは .sec-h2 のまま据え置き、階層は文書構造に持ち込まない。 */
.layer-band {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 34px 16px 14px;
}
/* 層の帯は3つとも差し色（層ごとの色分けは状態ではないのでやめた）。番号は縦長の書体 */
.layer-band::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--c-rule);
}
.layer-band-num {
  font-family: var(--f-figure);
  font-size: var(--fs-2xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--c-on-accent);
  background: var(--c-accent);
  padding: 3px 8px;
  white-space: nowrap;
}
/* 第1層の帯はティッカーと30秒カラムの間。上下の空白を詰める（2026-10-21・運営者。もとは上 34px・下 14px＋.container の 16px） */
.layer-band--1 { margin:16px 16px 0; }
.layer-band-text {
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--c-accent);
}
.rtable { width:100%; border-collapse:separate; border-spacing:0 5px; font-size:0.76rem; }
/* 行は面と角丸をやめ、下の細い罫で区切る。1列目は「状態」の列の札と同じ色面（D3 PR 5・§1）。
   日次更新は「状態」の札（.pill-*）だけを書き、1列目は :has() でそれに合わせる（1列目は空のセル）。ルートの見分けは名前の文字と地図の線 */
.rtable th { text-align:left; color:var(--c-text-mute); font-size:0.68rem; font-weight:600; letter-spacing:0.07em; padding:0 10px 7px; }
.rtable td { padding:10px; color:var(--c-text); vertical-align:middle; border-bottom:1px solid var(--c-rule); }
.rtable tr.rtable-foot td:first-child { padding-left:13px; }
.rtable tbody tr:not(.rtable-foot) > td:first-child { border-left:1px solid var(--c-rule); }
.rtable tbody tr:has(.pill-r) > td:first-child { background:var(--c-danger); border-left-color:var(--c-danger); }
.rtable tbody tr:has(.pill-o) > td:first-child { background:var(--c-alert);  border-left-color:var(--c-alert); }
.rtable tbody tr:has(.pill-y) > td:first-child { background:var(--c-warn);   border-left-color:var(--c-warn); }
.rtable tbody tr:has(.pill-g) > td:first-child { background:var(--c-ok);     border-left-color:var(--c-ok); }
/* 状態の札：赤 危険・橙 警戒・黄 注記・緑 平常の色面。.pill-p（判断なし）は枠だけ */
.pill { display:inline-block; padding:2px 8px; font-size:0.67rem; font-weight:700; border:1px solid transparent; }
.pill-g{background:var(--c-ok);color:var(--c-on-ok)}
.pill-y{background:var(--c-warn);color:var(--c-on-warn)}
.pill-r{background:var(--c-danger);color:var(--c-on-danger)}
.pill-o{background:var(--c-alert);color:var(--c-on-alert)}
.pill-p{background:none;color:var(--c-text);border-color:var(--c-rule)}
/* ルート表の型（② PR3 / 2026-09-27）。インライン style を使わず、色は .t-* で付ける。
   「現況詳細」は 最新（.route-latest・<time> 付き・1件）→ 要点（.route-summary）→ 経緯（details.route-history）の順 */
.route-priority { background:var(--c-surface);
  padding:10px 16px; margin-bottom:12px; font-size:var(--fs-sm); color:var(--c-text); line-height:1.6; }
.rtable-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch; }
.rtable thead th { padding:8px 10px; font-size:var(--fs-xs); border-bottom:1px solid var(--c-text); }
.rtable th.rtable-th-icon { width:12px; padding:0; }
.rtable tbody tr:not(.rtable-foot) > td:first-child { width:12px; padding:0; }
/* 空のセルは table-layout:auto（スマホ幅）で 1px まで潰れるので、中に 12px の箱を置いて幅を支える */
.rtable tbody tr:not(.rtable-foot) > td:first-child::before { content:""; display:block; width:12px; }
.rtable th.rtable-th-state { text-align:center; }
.rtable th.jf-th { color:var(--c-accent); white-space:nowrap; min-width:90px; max-width:110px; }
.jf-th-sub { font-size:var(--fs-2xs); color:var(--c-text-mute); font-weight:400; }
.rtable td.jf-td { font-size:var(--fs-xs); white-space:nowrap; min-width:90px; }
.route-detail p { margin:0; }
.route-detail p + p, .route-detail p + details, .route-history p + p { margin-top:0.9em; }
.route-src { display:block; color:var(--c-text-mute); }
.route-history > summary { cursor:pointer; color:var(--c-text); font-size:var(--fs-xs); font-weight:600; margin-top:0.9em; }
.route-history[open] > summary { margin-bottom:0.6em; }
.rtable tr.rtable-foot td { font-size:var(--fs-xs); color:var(--c-text-mute); padding:8px 13px; text-align:right; }
.rtable tr.rtable-foot .route-history { text-align:left; }
/* 文中の強調は色分けしない（赤・黄・緑の文字をやめた・D3 PR 5）。状態は「状態」の列の札で示す */
.rtable .t-danger, .rtable .t-warning, .rtable .t-warning-soft, .rtable .t-positive{color:var(--c-text)}
.rtable .t-info{color:var(--c-text)} .rtable .t-neutral{color:var(--c-text-mute)} .rtable .t-bright, .jf-note .t-bright{color:var(--c-text)}
.rtable .t-mute{color:var(--c-text-mute)} .rtable .t-blue, .rtable .t-violet{color:var(--c-text)}
/* ルート名とサブタイトル（2026-10-11 運営者の指示）：ルート名は 4pt（約5px）、サブタイトルは 2pt（約3px）大きく、サブタイトルは明るく。
   親の文字サイズからの差で指定するので、PC・スマホとも同じ差で大きくなる */
.rtable .route-name { font-size:calc(1em + 5px); }
/* スマホはルート列を細いまま保つ（現況詳細の幅を優先）。ルート名は1文字ずつ折り返してよい（運営者の判断・2026-10-11） */
@media (max-width: 768px) { .rtable .route-name { word-break:break-all; } }
.rtable .route-name ~ small.t-mute { font-size:calc(0.8333em + 3px); color:var(--c-text-mute); }
.rtable .t-purple, .rtable .t-orange{color:var(--c-text)}
/* 日本向けの列の注記：黄の囲みをやめて面の帯に（状態ではない） */
.jf-note { font-size:var(--fs-xs); color:var(--c-text); margin-top:8px; padding:8px 12px;
  background:var(--c-surface); line-height:1.7; }
.jf-note-meta { font-size:var(--fs-xs); color:var(--c-text-mute); }
#jf-basis-date { color:var(--c-text); font-weight:700; }
.route-note { font-size:var(--fs-xs); color:var(--c-text-mute); margin-top:8px; padding:6px 10px; border-top:1px solid var(--c-rule); }

/* SCENARIOS */
.sc-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
/* シナリオ：札だけを状態の色面にする（A 緑・B 黄・C 橙・D 赤・§1・D3 PR 5）。札は id（sc-tag-A〜D）で決めるので、
   カードのクラス（sc-best・sc-mid・sc-worst）は色に関係しない。カードは上の細い罫で区切り、面は影響の帯だけ */
.sc-card { padding:12px 0 0; border-top:1px solid var(--c-rule); }
.sc-tag   { font-size:0.63rem; font-weight:800; letter-spacing:0.1em; padding:3px 9px; display:inline-block; margin-bottom:9px; }
.sc-title { font-size:0.83rem; font-weight:700; margin-bottom:7px; }
.sc-body  { font-size:0.73rem; color:var(--c-text-mute); line-height:1.65; }
.sc-impact{ margin-top:9px; padding:8px 10px; font-size:0.71rem; line-height:1.5; }
#sc-tag-A { background:var(--c-ok);     color:var(--c-on-ok); }
#sc-tag-B { background:var(--c-warn);   color:var(--c-on-warn); }
#sc-tag-C { background:var(--c-alert);  color:var(--c-on-alert); }
#sc-tag-D { background:var(--c-danger); color:var(--c-on-danger); }
.sc-tag .sc-trend { color:inherit; }
.sc-title { color:var(--c-text); }
.sc-impact { background:var(--c-surface); color:var(--c-text); }

/* シナリオの補足・注記・次の焦点（② PR4a・2026-09-29）。日次更新はクラスだけで書く（型は daily-site-update「シナリオの型」） */
.sec-h2--sky { color:var(--c-text); }
.label-scenario.sc-h2-label, .label-ai.sc-h2-label { margin-left:8px; font-size:var(--fs-xs); }
/* シナリオの補足：赤い破線の囲みをやめて面の帯に（状態ではない）。但し書きの黄の文字も本文の色の太字に（色だけで注意を示さない・§1） */
.sc-update { background:var(--c-surface); padding:12px 16px;
  margin-top:14px; margin-bottom:16px; font-size:var(--fs-sm); color:var(--c-text); line-height:1.8; }
.sc-update-head { margin:0 0 10px; font-size:var(--fs-sm); }
.sc-update-date { font-weight:700; color:var(--c-text); }
.sc-update-caveat { color:var(--c-text); font-weight:700; }
.sc-trend { color:var(--c-text-mute); }
.sc-tag-em { font-size:1.15em; font-weight:700; }
.sc-sync-note { font-size:var(--fs-sm); color:var(--c-text-mute); text-align:center; margin-top:8px; }
/* 判定日と複数回の推定の幅（JS が入れる。空のときは場所を取らない） */
.sc-horizon:not(:empty), .sc-range:not(:empty) { display:block; margin-top:2px; }
.sc-ai-note { margin-top:10px; padding:9px 13px; background:var(--c-surface);
  font-size:var(--fs-sm); color:var(--c-text); line-height:1.75; }
.sc-ai-note strong { color:var(--c-text); }
.sc-ai-meta { font-size:var(--fs-xs); color:var(--c-text-mute); }
.sc-ai-meta a { color:var(--c-text-mute); }
.sc-ai-variance { margin-top:7px; padding:6px 9px; border:1px solid var(--c-rule);
  font-size:var(--fs-xs); color:var(--c-text); line-height:1.65; }
/* 前提が古いときだけ syncScenarioFromDashboard() が style.display='block' で出す */
/* 前提が古いことの注意は状態（注記）なので黄の色面（D3 PR 5） */
.sc-ctx-note { display:none; margin-top:7px; padding:6px 9px; background:var(--c-warn);
  font-size:var(--fs-xs); color:var(--c-on-warn); line-height:1.65; }
.sc-footer { margin-top:10px; padding:10px 0 0; border-top:1px solid var(--c-rule);
  font-size:var(--fs-xs); color:var(--c-text-mute); display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
.sc-focus-h { font-size:var(--fs-md); font-weight:700; color:var(--c-accent); margin:0 0 10px; letter-spacing:0.05em; }
.sc-focus-list { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:6px; }
.sc-focus-list > li { font-size:var(--fs-base); color:var(--c-text); margin-bottom:5px; }
.sc-focus-list strong { color:var(--c-text); font-weight:700; }
/* キーワードの自動の色付け（markKeywords()・2026-10-11）。日次更新では手で書かない。
   対象は 30秒カラムの3行・シナリオの補足・次の焦点。数値と日付は本文の色の太字、但し書きは補助の色。
   被害の語・回復の語も、赤・緑の文字をやめて本文の色の太字にした（D3 PR 5。色だけで状態を示さない・§1） */
.kw-num   { color:var(--c-text); font-weight:700; }
.kw-date  { color:var(--c-text); font-weight:700; }
.kw-alert { color:var(--c-text); font-weight:700; }
.kw-ease  { color:var(--c-text); font-weight:700; }
.kw-hedge { color:var(--c-text-mute); }
/* 旧 div[style*="font-size:0.7"]（スマホで 0.8rem）の効果を引き継ぐ */
@media (max-width: 768px) {
  .sc-update, .sc-sync-note, .sc-ai-note, .sc-ai-variance, .sc-ctx-note, .sc-footer { font-size:0.8rem; }
}

/* 更新履歴（② PR4a・2026-09-29）。日次更新はクラスだけで書く（型は daily-site-update「更新履歴の型」）。
   日時の色は位置で決まる：常時表示の先頭（本日分）＝赤、常時表示の残り＝明るい灰、折りたたみの中＝灰 */
/* 日時の色は位置で決まる：本日分は差し色（状態ではないので赤をやめた）、常時表示の残りは本文、折りたたみの中は補助 */
.update-log { margin:20px 0 10px; padding:0; }
.update-log-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; gap:8px; flex-wrap:wrap; }
.update-log-head .sec-h2 { flex:1 1 100%; }
.log-recent { font-size:var(--fs-xs); color:var(--c-text); line-height:2; }
.log-older  { font-size:var(--fs-xs); color:var(--c-text-mute); line-height:2; }
.log-recent .log-date { color:var(--c-text); }
.log-recent > div:nth-child(2) .log-date { color:var(--c-accent); font-weight:700; }
.log-older .log-date { color:var(--c-text-mute); }
.log-tag { color:var(--c-accent); }
.log-sources-start { margin-top:10px; padding-top:8px; border-top:1px solid var(--c-rule); }
.log-older a { color:var(--c-text-mute); }
.log-toggle { text-align:center; margin:8px 0 4px; }
.log-toggle-btn { background:none; border:1px solid var(--c-rule); color:var(--c-text-mute); font-size:var(--fs-sm);
  padding:6px 18px; cursor:pointer; }
.log-toggle-btn:hover { border-color:var(--c-text); color:var(--c-text); }
/* 旧 div[style*="font-size:0.7"]（スマホで 0.8rem）の効果を引き継ぐ */
@media (max-width: 768px) {
  .log-recent, .log-older { font-size:0.8rem; }
}

/* 本文の残り（② PR4b-1・2026-10-01）：その他の検討中ルート・主要指標・特別解説コラム・第3層の外枠。
   日次更新は触らない区域。文字サイズは phase2-sections-design.md「#14 の割り振り」の対応表どおりトークンに寄せた（0.68・0.7→xs、0.75・0.8→sm、0.9・1→md、1.2→lg、1.4→xl） */
.sec-h2--red, .sec-h2--violet { color:var(--c-text); }
.sec-h2--spaced { margin-top:24px; }
.sec-block { width:100%; margin:24px 0 0; padding:0 16px; }
.sec-block--left { text-align:left; }
.sec-block--news { margin:24px 0; text-align:left; }
.loading-note { color:var(--c-text-mute); font-size:var(--fs-sm); padding:16px; }
.loading-note--error { color:var(--c-text); }

/* その他の検討中ルート（折りたたみ）。開閉の状態は onclick が #other-routes-body の style.display で読む */
.or-wrap { margin-top:16px; margin-bottom:8px; }
/* 開閉のボタンと、国ごとのカード。国ごとの色分け（紫・緑・黄・水色）は状態ではないのでやめ、上の細い罫で区切る */
.or-toggle { width:100%; background:none; border:1px solid var(--c-rule); color:var(--c-text);
  font-size:var(--fs-sm); font-weight:700; padding:12px 18px; cursor:pointer; text-align:left; letter-spacing:0.03em; }
.or-toggle:hover { border-color:var(--c-text); }
.or-toggle-em { color:var(--c-accent); }
.or-panel { margin-top:14px; }
.or-list { display:flex; flex-direction:column; gap:14px; }
.or-card { border-top:1px solid var(--c-rule); padding:14px 0 0; }
.or-head { display:flex; align-items:center; gap:8px; margin-bottom:8px; flex-wrap:wrap; }
.or-flag { font-size:var(--fs-md); }
.or-title { color:var(--c-text); font-size:var(--fs-base); }
.or-badge { font-size:var(--fs-xs); border:1px solid var(--c-rule); color:var(--c-text-mute);
  padding:2px 8px; margin-left:auto; }
.or-text { font-size:var(--fs-sm); color:var(--c-text-mute); line-height:1.75; }
.or-text strong { color:var(--c-text); }
.or-text .or-ok, .or-text .or-alert { color:var(--c-text); }
.or-note { font-size:var(--fs-xs); color:var(--c-text-mute); margin-top:6px; }

/* 主要指標 */
.stat-asof { font-size:var(--fs-2xs); color:var(--c-text-mute); margin-bottom:6px; font-weight:600; }
.stat-head { font-size:var(--fs-sm); color:var(--c-text); margin-bottom:8px; font-weight:700; }
.stat-num.stat-num--stock { font-size:var(--fs-xl); line-height:1.2; margin-bottom:6px; }
.stat-num.stat-num--wti { font-size:var(--fs-xl); }
.stat-unit { font-size:var(--fs-md); }
.stat-unit.stat-unit--sm { font-size:var(--fs-sm); }
.stat-label.stat-label--stock { font-size:var(--fs-xs); line-height:1.6; color:var(--c-text); }
.stat-label--stock strong { color:var(--c-text); }
.stat-label--stock small { color:var(--c-text-mute); }
.stat-sub { font-size:var(--fs-2xs); color:var(--c-text-mute); }
.stat-card.stat-card--wti { cursor:pointer; }

/* 特別解説コラムのカード。面・角丸と記事ごとの色分けをやめ、上の細い罫で区切る（記事一覧のカードと同じ作法）。
   HTML の col-card--{色} はそのまま残っているが、色は付けない */
.col-card { border-top:1px solid var(--c-rule); padding:14px 0 0; margin-bottom:20px; }
.col-card-head { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
/* コラムの入口の B の絵（課題46 D3 PR 5b-2・§2 の 28px 以上）。絵は /assets/icons/icons.svg の i-* */
.col-card-icon { width:40px; height:40px; flex-shrink:0; --a:var(--c-text); --b:var(--c-accent); --c2:var(--c-text-mute); --k:var(--c-bg); }
.col-card-titles { flex:1; min-width:0; }
.col-card-title { font-size:var(--fs-base); font-weight:700; color:var(--c-text); line-height:1.4; margin:0; }
.col-card-sub { font-size:var(--fs-xs); color:var(--c-text-mute); margin-top:2px; }
/* 日付は見出しの下の行に置く（「公開 …・更新 …」は長く、横に並べるとタイトルの幅を奪う） */
.col-card-date { flex-basis:100%; font-size:var(--fs-xs); color:var(--c-text-mute); }
.col-card-lead { margin-top:12px; font-size:var(--fs-sm); color:var(--c-text); line-height:1.75; }
.col-card-link { display:block; margin-top:12px; width:100%; text-align:center; background:none; border:1px solid var(--c-text);
  color:var(--c-text); font-size:var(--fs-sm); font-weight:700; padding:9px 0; text-decoration:none; letter-spacing:0.03em; }
.col-card-link:hover { text-decoration:underline; text-underline-offset:.18em; }
button.col-card-link { cursor:pointer; font-family:inherit; }   /* 全文をモーダルで開くカード（トランプ声明） */
.col-card-thumbrow { display:flex; align-items:center; gap:12px; margin-top:12px; }
.col-card-thumb { width:10%; min-width:52px; max-width:72px; height:auto; aspect-ratio:3/4; object-fit:cover; object-position:center 20%;
  flex-shrink:0; border:1px solid var(--c-rule); }
.col-card-link.col-card-link--inrow { flex:1; margin-top:0; width:auto; }

/* 数値の注記・日次アーカイブへのリンク */
.data-note { margin-top:12px; background:var(--c-surface); padding:12px 16px;
  font-size:var(--fs-xs); color:var(--c-text-mute); line-height:1.8; }
.data-note strong { color:var(--c-text); }
.archive-link-wrap { text-align:center; margin:0 16px 18px; }
.archive-link { display:inline-flex; align-items:center; gap:6px; font-size:var(--fs-sm); color:var(--c-text); text-decoration:none;
  border:1px solid var(--c-text); padding:8px 16px; }
.archive-link:hover { text-decoration:underline; text-underline-offset:.18em; }

/* 旧 div[style*="font-size:0.7"]（スマホで 0.8rem）の効果を引き継ぐ */
@media (max-width: 768px) {
  .or-text, .or-note, .stat-head, .col-card-sub, .data-note { font-size:0.8rem; }
  .col-card-lead { font-size:0.8rem; }   /* 長文。2-a のスマホ本文の下限（0.8rem）を割らない */
}

/* 部品の残り（② PR4b-2・2026-10-01）：ヘッダー・層の帯・SNS と動画の導線・速報インシデントの枠・地図のタンカー欄・
   データ監視・リアルタイム市場・トランプ声明（モーダルと比較ブロック）・出典の外枠・製油所モーダル。
   既存のクラスより後ろで定義されている規則（.bw-sec・.stat-row など）に勝つよう、上書きは複合セレクタで書く */
.h1-title { color:var(--c-text); font-size:var(--fs-lg); font-weight:700; letter-spacing:0.5px; }
.h1-sub { color:var(--c-text-mute); font-size:var(--fs-xs); font-weight:400; margin-left:0; display:block; }
.infographic-cta-row { display:flex; align-items:center; justify-content:center; gap:14px; flex-wrap:wrap; }
.infographic-thumb-link { display:block; line-height:0; overflow:hidden; border:1px solid var(--c-rule); flex-shrink:0; }
.infographic-thumb-link:hover { border-color:var(--c-text); }
.infographic-thumb-img { height:72px; width:auto; aspect-ratio:1672/941; display:block; }   /* 縦横比を CSS でも書く（画像が届く前から幅が決まり、届いたときに横の文がずれない・2026-10-22）。値は <img> の width・height と同じ */
.reload-btn { background:none; border:1px solid var(--c-rule); color:var(--c-text); font-size:var(--fs-xs); font-weight:700;
  padding:4px 14px; cursor:pointer; font-family:inherit; }
.reload-btn:hover { border-color:var(--c-text); }

.social-links { text-align:right; margin-bottom:6px; }
.social-link { display:inline-flex; align-items:center; gap:6px; border:1px solid var(--c-rule);
  color:var(--c-text-mute); font-size:var(--fs-sm); font-weight:600; padding:4px 12px; text-decoration:none; white-space:nowrap; letter-spacing:0.02em; }
.social-link:hover { color:var(--c-text); border-color:var(--c-text); }

.infographic-block { margin-top:0; padding-top:14px; border-top:1px solid var(--c-rule); }
.infographic-block-h { font-size:var(--fs-xs); font-weight:700; color:var(--c-text-mute); letter-spacing:0.06em; margin-bottom:10px; }
.infographic-thumb.infographic-thumb--quarter { width:25%; min-width:120px; }
.infographic-thumb-full { width:100%; height:auto; display:block; }
/* 速報インシデントの段：赤い枠の箱とグラデーションの見出しをやめ、ほかの段と同じく上の太い罫で切る */
.incident-box { overflow:hidden; }
.incident-head { width:100%; padding:0 0 10px;
  display:flex; flex-direction:column; align-items:flex-start; gap:8px; font-family:inherit; }
.sec-h2.sec-h2--incident { color:var(--c-text); width:100%; }

/* 地図のタンカー欄（地図に重ねる小さな表示なので px のまま） */
#tanker-stats .stat-row--breakdown { font-size:9px; color:var(--c-text-mute); padding-left:8px; margin-top:4px; border-top:1px solid var(--c-rule);
  padding-bottom:5px; margin-bottom:2px; }
#tanker-stats .stat-row-val { color:var(--c-text-mute); font-weight:bold; }
#t-total { color:var(--c-text); }
#tanker-note { font-size:7.5px; color:var(--c-text-mute); padding:2px 6px 0; line-height:1.4; }

.dash-frame { margin:20px auto; width:100%; overflow:hidden; border:1px solid var(--c-rule); }
#hormuz-dashboard { display:block; background:var(--c-bg); }
.sec-h2.sec-h2--green { color:var(--c-text); }
/* 市場の小窓（TradingView は isTransparent なので地がそのまま透ける） */
.market-widget { margin-top:8px; padding:12px 0 8px; display:flex; flex-direction:column; gap:8px;
  font-family:var(--f-body); border-top:1px solid var(--c-rule); }
.market-grid { display:grid; gap:16px; }
.market-grid--main { grid-template-columns:repeat(auto-fit, minmax(300px, 1fr)); }
.market-grid--sub  { grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); }
.market-cell { overflow:hidden; }
.market-note { text-align:right; font-size:var(--fs-sm); color:var(--c-text-mute); border-top:1px solid var(--c-rule); padding:6px 0 0; margin:2px 0 0; }

/* トランプ声明モーダル（灰色の節の見出し色は .modal-section.gray .modal-section-title が持つ） */
.modal-trans { color:var(--c-text); font-size:var(--fs-sm); line-height:1.8; }
.modal-trans strong { color:var(--c-text); }
.modal-interp-lead { color:var(--c-text-mute); font-size:var(--fs-xs); margin-bottom:10px; }
.i-text { font-size:var(--fs-xs); line-height:1.65; }
.i-text--a, .i-text--b { color:var(--c-text); }
.modal-ling { color:var(--c-text-mute); font-size:var(--fs-xs); line-height:1.75; }
.modal-ling strong { color:var(--c-text); }
.modal-ling .modal-em { color:var(--c-text); font-weight:700; }
.modal-ling .modal-alert { color:var(--c-text); }

/* トランプ声明の比較ブロック。#bw-timeline-detail・#bw-detail-body の display:none は toggle*() が読むのでインラインに残す */
.bw-flag.bw-flag--end { margin-left:auto; }
.bw-toggle { width:100%; background:none; border:1px solid var(--c-rule); color:var(--c-text);
  font-size:var(--fs-sm); font-weight:700; padding:8px 0; cursor:pointer; margin-bottom:8px; letter-spacing:0.03em; }
.bw-toggle:hover { border-color:var(--c-text); }
.bw-em { color:var(--c-text); }
.bw-sec.bw-sec--spaced { padding-top:14px; }

/* 出典・更新履歴の外枠（旧 [style*="max-width:960px"] の上書きをそのまま引き継ぐ：幅は 100%・左右の余白は .container と同じ） */
.source-wrap { margin:32px auto 0; padding-bottom:40px; }
.source-inner { border-top:1px solid var(--c-rule); padding-top:20px; }

/* 製油所モーダル。表示は開閉ボタンが style.display（none / flex）で切り替える */
/* 製油所モーダル：箱は地の色＋上に差し色の太い罫。地域ごとの見出しの色分けはやめた（状態ではない） */
.ref-modal { position:fixed; top:0; left:0; width:100%; height:100%; background:color-mix(in srgb, var(--c-bg) 88%, transparent); z-index:9999;
  align-items:flex-start; justify-content:center; overflow-y:auto; padding:20px 0; }
.ref-modal-box { background:var(--c-bg); border:1px solid var(--c-rule); border-top:4px solid var(--c-accent);
  max-width:780px; width:95%; margin:auto; padding:28px 24px; position:relative; }
.ref-modal-close { position:absolute; top:14px; right:16px; background:none; border:1px solid var(--c-rule);
  color:var(--c-text); font-size:var(--fs-md); width:32px; height:32px; cursor:pointer; }
.ref-modal-close:hover { border-color:var(--c-text); }
.ref-modal-title { font-size:var(--fs-md); font-weight:700; color:var(--c-text); margin-bottom:6px; }
.ref-modal-sub { font-size:var(--fs-sm); color:var(--c-text-mute); margin-bottom:20px; padding-bottom:14px; border-bottom:1px solid var(--c-rule); }
.ref-modal-lead { background:var(--c-surface); padding:12px 16px; margin-bottom:20px;
  font-size:var(--fs-sm); color:var(--c-text); line-height:1.7; }
.ref-modal-lead strong { color:var(--c-text); }
.ref-modal-h { font-size:var(--fs-sm); font-weight:700; color:var(--c-accent); margin-bottom:10px; letter-spacing:0.05em; }
.ref-area-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:10px; margin-bottom:20px; }
.ref-area { border-top:1px solid var(--c-rule); padding:12px 0 0; }
.ref-area--main { border-top:3px solid var(--c-text); }
.ref-area--bases { margin-bottom:20px; }
.ref-area-h { font-size:var(--fs-xs); font-weight:700; margin-bottom:8px; color:var(--c-text); }
.ref-area-list { font-size:var(--fs-xs); color:var(--c-text); line-height:1.8; }
.ref-base-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:4px; font-size:var(--fs-xs); color:var(--c-text-mute); line-height:1.9; }
.ref-modal-note { font-size:var(--fs-xs); color:var(--c-text-mute); line-height:1.6; padding-top:12px; border-top:1px solid var(--c-rule); }

/* 旧 div[style*="font-size:0.7"]（スマホで 0.8rem）の効果を引き継ぐ */
@media (max-width: 768px) {
  .infographic-block-h, .modal-trans, .modal-interp-lead, .i-text, .modal-ling,
  .ref-modal-sub, .ref-modal-h, .ref-area-h, .ref-area-list, .ref-base-grid, .ref-modal-note { font-size:0.8rem; }
  .ref-modal-lead { font-size:0.8rem; }   /* 長文。2-a のスマホ本文の下限（0.8rem）を割らない */
}
/* .market-note は旧インラインが「font-size: 0.75rem」（空白入り）で属性セレクタに当たっていなかったので引き継がない */

/* FOOTER */
footer {
  text-align:center; padding:16px;
  font-size:0.68rem; color:var(--c-text-mute);
  border-top:1px solid var(--c-rule); margin-top:8px;
}
.footer-legal {
  display:flex; flex-wrap:wrap; gap:6px 14px;
  justify-content:center; margin-bottom:10px;
}
.footer-legal a { color:var(--c-text-mute); text-decoration:none; font-size:0.72rem; }
.footer-legal a:hover { color:var(--c-text); text-decoration:underline; }

/* ===================== RESPONSIVE ===================== */
@media(max-width:1023px){
  header h1 { font-size:0.92rem; }
  #map { height:400px; }

  .map-legend {
    /* 閉じた状態の幅。見出し「🗺️ 凡 例」と「開く」ボタン（min-width:44px）が収まる幅にする
       （80px ではボタンが欠けて見えなかった。2026-10-07 調整） */
    min-width: 148px !important;
    max-width: 148px !important;
    padding: 8px 10px !important;
    transition: max-width 0.3s ease, min-width 0.3s ease, padding 0.3s ease;
    overflow: hidden;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
  }
  .map-legend.open {
    min-width: 250px !important;
    max-width: 290px !important;
    padding: 12px 14px !important;
  }
  .map-legend h3 {
    font-size: 13px !important;
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
  }
  .legend-toggle-btn {
    display: inline-block;
    pointer-events: auto;
    flex-shrink: 0;
    font-size: 11px !important;
    padding: 3px 8px !important;
    min-width: 44px;
    text-align: center;
  }
  .legend-body {
    display: none;
    margin-top: 8px;
  }
  .map-legend.open .legend-body {
    display: block;
    /* 凡例が地図（高さ400px）を縦にはみ出さないよう上限を設けて中身をスクロール。
       閉じるボタンは .legend-body の外にあるため常に下端に残る（2026-09-03 調整） */
    max-height: 236px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }
  /* 出典表示が折り返して凡例を上げたとき（index.html の liftBottomLeftOverAttribution）は、その分だけ低くする（2026-10-21） */
  #map.attr-lifted .map-legend.open .legend-body { max-height: 180px; }
  .leg-row { margin-bottom: 4px; gap: 6px; }
  .leg-note { margin-top: 6px; padding-top: 5px; }

  .rtable-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .rtable { min-width:600px; }
}
/* タブレットの幅（601〜1023px）は地図を高く（2026-10-21・運営者）。400px では縦向きのタブレットで凡例・タンカー欄・地点ジャンプが
   地図の大半を覆っていた。画面が低いとき（スマホの横向きなど）は前と同じ 400px より低くしない。
   凡例の中身の上限は、地図の高さから見出し・閉じるボタン・上下の余白の分（400px のときの 236px・180px と同じ差）を引く */
@media (min-width:601px) and (max-width:1023px){
  .map-wrap { --map-h: max(400px, min(560px, 70vh)); }
  #map { height: var(--map-h); }
  .map-legend.open .legend-body { max-height: calc(var(--map-h) - 164px); }
  #map.attr-lifted .map-legend.open .legend-body { max-height: calc(var(--map-h) - 220px); }
}
/* スマホの横向き（画面が低く、指で操作する）は、地図を画面の高さの 7 割に（2026-10-21・運営者の iPhone 17）。
   400px では画面（横向きで約 330〜400px）より高く、全画面を閉じたあと画面が地図だけになり、本編をスクロールさせる場所がなかった。
   上下に残る 3 割を指で送ればページが動く。svh はアドレスバーが出ているときの高さ（使えないブラウザは vh） */
@media (max-height:500px) and (pointer:coarse){
  .map-wrap { --map-h: 70vh; }
  @supports (height: 1svh) { .map-wrap { --map-h: 70svh; } }
  #map { height: var(--map-h); }
  .map-legend.open .legend-body { max-height: max(60px, calc(var(--map-h) - 164px)); }
  #map.attr-lifted .map-legend.open .legend-body { max-height: max(48px, calc(var(--map-h) - 220px)); }
  /* 日本関連船の欄は「地点へ移動」（右端から約 134px）の左へ。タンカーのボタンは左上のまま（下の端に置くと、幅の狭い横向き〈568px など〉で凡例と重なった） */
  .map-wrap #tanker-overlay { right: 142px; }
}
/* スマホでは日本向けの列を非表示にしてテーブル崩れを防ぐ
   （2-c: 以前は 860px 以下。タブレットでは表を横スクロールにして列を残す） */
@media(max-width:768px){
  .jf-col { display: none !important; }
}
@media(max-width:600px){
  header h1 { font-size:0.82rem; }
}
/* ===== スマホ ファーストビュー最適化 ===== */
@media (max-width: 600px) {

  /* ① ヘッダー padding 削減 */
  header {
    padding: 10px 14px !important;
  }

  /* ② ヘッダーh1 の題字・副題（② PR4b-2 でインライン style をクラスにしたので !important は不要） */
  .h1-title { font-size: 1.0rem; }
  .h1-sub { font-size: 0.8rem; margin-left: 4px; }

  /* ③ infographic CTAボタン: 1行に収める */
  .infographic-button {
    font-size: 14px !important;
    padding: 11px 14px !important;
  }
}

/* TRUMP STATEMENT MODAL */

/* モーダルオーバーレイ */
.modal-overlay {
  display:none;
  position:fixed;
  top:0; left:0;
  width:100%; height:100%;
  background:color-mix(in srgb, var(--c-bg) 88%, transparent);
  z-index:9999;
  overflow-y:auto;
  padding:20px;
}
.modal-overlay.open { display:flex; align-items:flex-start; justify-content:center; }
.modal-box {
  background:var(--c-bg);
  border:1px solid var(--c-rule);
  border-top:4px solid var(--c-accent);
  padding:24px 28px;
  max-width:780px;
  width:100%;
  margin:auto;
  position:relative;
}
.modal-close {
  position:absolute;
  top:14px; right:18px;
  background:none;
  border:1px solid var(--c-rule);
  color:var(--c-text);
  font-size:0.8rem;
  font-weight:700;
  padding:4px 12px;
  cursor:pointer;
  font-family:inherit;
}
.modal-close:hover { border-color:var(--c-text); }
.modal-title {
  font-size:1rem;
  font-weight:700;
  color:var(--c-text);
  margin-bottom:16px;
  padding-right:80px;
  line-height:1.4;
}
/* 節は色分けの箱をやめ、上の細い罫で区切る（節の色は状態ではない）。節の見出しは差し色 */
.modal-section {
  margin-bottom:16px;
  padding:14px 0 0;
  border-top:1px solid var(--c-rule);
  font-size:0.78rem;
  line-height:1.75;
}
.modal-section-title { font-size:0.8rem; font-weight:700; margin-bottom:8px; color:var(--c-accent); }
.modal-quote {
  font-size:0.76rem; color:var(--c-text); line-height:1.8;
  background:var(--c-surface); padding:12px 14px; margin-bottom:10px;
}
.modal-interp { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:10px; }
/* 2つの読み方の箱（赤・緑）は PR 5 で見直す。角丸だけやめた */
.modal-interp-box { padding:10px 12px; font-size:0.73rem; line-height:1.6; }
.modal-interp-box.a, .modal-interp-box.b { border-top:1px solid var(--c-rule); }   /* 2つの読み方は状態ではないので色分けしない（D3 PR 5） */
.modal-interp-box .i-title { font-weight:700; margin-bottom:5px; font-size:0.75rem; }
.modal-interp-box .i-title { color:var(--c-text); }
.modal-media { display:flex; gap:10px; margin-top:10px; flex-wrap:wrap; }
.modal-media-pill { padding:5px 12px; font-size:0.72rem; font-weight:700; }
.pill-optimist, .pill-cautious { border:1px solid var(--c-rule); color:var(--c-text); }   /* 媒体の論調の札。状態ではないので枠だけ */

@media(max-width:1023px){
  .modal-box { padding:18px 16px; }
  .modal-interp { grid-template-columns:1fr; }
}

/* NEWS COLUMN */
.news-section-title{font-size:1rem;font-weight:700;color:var(--c-text);margin:24px 0 12px;padding-top:10px;border-top:3px solid var(--c-text);}
.news-list{display:flex;flex-direction:column;gap:4px;}
/* 記事の行は面と角丸をやめ、下の細い罫で区切る */
.news-item{border-bottom:1px solid var(--c-rule);padding:8px 0;display:flex;flex-direction:column;gap:4px;min-height:unset;}
.news-item a{color:var(--c-text);text-decoration:none;font-size:0.78rem;line-height:1.5;flex:1;align-self:flex-start;}
.news-item a:hover{text-decoration:underline;text-underline-offset:.18em;}
.news-date{font-size:0.7rem;color:var(--c-text-mute);white-space:nowrap;}
.news-meta{display:flex;flex-direction:row;align-items:center;gap:8px;flex-wrap:wrap;flex-shrink:0;}
.news-date{font-size:0.65rem;color:var(--c-text-mute);white-space:nowrap;}
/* 媒体名の札：媒体ごとの色分けは状態ではないのでやめ、枠だけにした（HTML の badge-* はそのまま） */
.news-badge{font-size:0.62rem;font-weight:700;padding:2px 8px;white-space:nowrap;border:1px solid var(--c-rule);color:var(--c-text-mute);}
.news-hidden{display:none;}
.news-more-btn{width:100%;margin-top:8px;background:none;border:1px solid var(--c-rule);padding:8px;color:var(--c-text-mute);font-size:0.73rem;cursor:pointer;font-family:inherit;}
.news-more-btn:hover{border-color:var(--c-text);color:var(--c-text);}
@media(max-width:1023px){.news-meta{min-width:75px;}.news-item a{font-size:0.74rem;}}

/* ================================================
   タンカー1隻の価値 サムネイルボタン
================================================ */
/* どの幅でも題だけの小さなボタンにし、左上（拡大・縮小ボタンの右）に置く。押せば拡大画像が開く
   （スマホは 2026-10-21〈画像の縮小版が地図を覆い、隠せなかった〉、PC・タブレットも 2026-10-22 にそろえた・運営者） */
#tanker-value-thumb {
  position: absolute;
  top: 10px;
  left: 52px;
  z-index: 1000;
  cursor: pointer;
  background: var(--c-bg);
  border: 1px solid var(--c-rule);
  padding: 5px 8px;
  transition: border-color 0.2s;
  text-align: center;
  user-select: none;
}
#tanker-value-thumb:hover {
  border-color: var(--c-text);
}
#tanker-value-thumb .tv-label {
  font-size: 10px;
  color: var(--c-text);
  white-space: nowrap;
  line-height: 1.3;
  font-weight: bold;
  letter-spacing: 0.03em;
}

/* ================================================
   タンカー足止めオーバーレイ
================================================ */
#map { position: relative; }
#tanker-overlay {
  position: absolute; bottom: 30px; right: 10px; z-index: 1000; width: 260px;
  background: var(--c-bg); border: 1px solid var(--c-rule);
  padding: 10px 12px 8px; transition: width 0.3s ease;
}
/* 折畳ボタンは左寄せ。右上は「🧭 地点へ移動」コントロールと重なり、
   スマホ縦向きでタップできなくなるため（2026-09-03 修正） */
#tanker-title { display: flex; justify-content: flex-start; align-items: center; gap: 7px; margin-bottom: 5px; }
#tanker-title span { font-size: 11px; color: var(--c-text); font-weight: bold; letter-spacing: 0.04em; min-width: 0; }
/* 確認ログは既定2行までに省略し、タップで全文表示する */
#tanker-date-confirmed {
  font-size: 9px; color: var(--c-text-mute); margin-top: 2px; line-height: 1.45; cursor: pointer;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
}
#tanker-date-confirmed.expanded { -webkit-line-clamp: unset; overflow: visible; }
#tanker-toggle {
  background: none; border: 1px solid var(--c-rule); color: var(--c-text);
  font-size: 10px; padding: 1px 6px; cursor: pointer;
}
#tanker-toggle:hover { border-color: var(--c-text); }
/* 閉じているときは題の1行だけ（確認ログ・注記も隠す。2026-10-21・運営者「特にスマホ」）。幅も題に合わせて縮める */
#tanker-overlay.collapsed { width: auto; }
#tanker-overlay.collapsed > :not(#tanker-title) { display: none !important; }
#tanker-overlay.collapsed #tanker-title { margin-bottom: 0; }
@media (max-width: 600px) {
  /* 地図面積を確保するため枠ごと縮小する（2026-09-03 調整） */
  #tanker-overlay { width: 186px; padding: 7px 8px 6px; bottom: 24px; }
  #tanker-overlay.zoom-close { width: 186px; }
  #tanker-title { gap: 5px; margin-bottom: 3px; }
  #tanker-title span { font-size: 9px; letter-spacing: 0; }
  #tanker-toggle { font-size: 8px; padding: 1px 5px; }
  #tanker-date { font-size: 8px; margin-bottom: 3px; }
  #tanker-date-confirmed { font-size: 8px; }
  .ship-icon { font-size: 13px; }
  #ship-grid { max-height: 44px; gap: 2px; }
  #tanker-stats { font-size: 9px; margin-top: 5px; }
  #tanker-note { display: none; }   /* 注記は情報密度を優先して非表示 */
  /* 出典は2行に折り返し、欄の下半分を隠していた（2026-10-21）。出典の高さ（index.html が --attr-h に入れる）の上に出す */
  #tanker-overlay { bottom: calc(var(--attr-h, 18px) + 6px); }
}
#tanker-date { font-size: 10px; color: var(--c-text-mute); text-align: right; margin-bottom: 6px; }
#ship-grid {
  display: flex; flex-direction: row; flex-wrap: wrap; gap: 3px;
  justify-content: flex-start; align-content: flex-start; max-height: 130px; overflow: hidden;
}
.ship-icon {
  font-size: 17px; line-height: 1.1; cursor: default; transition: transform 0.15s;
  filter: drop-shadow(0 0 3px var(--c-text-mute)); user-select: none;   /* 以前は JS が rgba(148,163,184,0.9) を style で上書きしていた（D3 PR 7a でトークンに） */
}
/* 船の絵は A のタンカー（1色・--a）。大きさは font-size に合わせる（課題46 D3 PR 5b-2） */
.ship-icon svg { display:block; width:1.25em; height:1.25em; --a:var(--c-text); }
.ship-icon:hover { transform: scale(1.35); z-index: 1; }
#tanker-stats { margin-top: 7px; font-size: 10px; color: var(--c-text-mute); }
.stat-row { display: flex; justify-content: space-between; margin-bottom: 2px; }
/* 数字は本文の色。足止め・通過の別は行の名前の文字で書いてあり、色では示さない（D3 PR 5） */
.stat-row span:last-child { color: var(--c-text); font-weight: bold; }
.stat-row:last-child span:last-child { color: var(--c-text); }
/* 足止めの棒の色（赤）は状態なので PR 5。グラデーションだけ単色にした */
#tanker-progress-wrap { background: var(--c-rule); height: 5px; margin-top: 6px; overflow: hidden; }
#tanker-progress-bar { height: 100%; background: var(--c-danger); transition: width 0.8s ease; }
#tanker-overlay.zoom-close { width: 300px; }
#tanker-overlay.zoom-close .ship-icon { font-size: 20px; }
#tanker-overlay.zoom-close #ship-grid { max-height: 160px; }
/* スマホでは拡大時も枠を広げない。上の .zoom-close 定義より後に置かないと
   ソース順で負けるため、ここで打ち消す（2026-09-03 調整） */
@media (max-width: 600px) {
  #tanker-overlay.zoom-close { width: 186px; }
  #tanker-overlay.zoom-close .ship-icon { font-size: 13px; }
  #tanker-overlay.zoom-close #ship-grid { max-height: 44px; }
}
#tanker-overlay.zoom-far { width: 200px; }
#tanker-overlay.zoom-far .ship-icon { font-size: 13px; }
#tanker-overlay.zoom-far #ship-grid { max-height: 100px; }
/* 信頼ラベル */
/* 信頼ラベル：状態ではないので色面にせず枠だけ。違いは語と線の種類（事実・分析・シナリオは実線、AI推定・推定は破線、未確認は点線）（D3 PR 5） */
.label-fact, .label-analysis, .label-scenario, .label-unconfirmed, .label-ai, .label-estimate { display:inline-block; font-size:0.6rem; font-weight:800; letter-spacing:0.08em; padding:1px 7px; margin-right:6px; vertical-align:middle; border:1px solid var(--c-text-mute); color:var(--c-text); }
.label-ai, .label-estimate { border-style:dashed; }
.label-unconfirmed { border-style:dotted; color:var(--c-text-mute); }
/* 推定＝統計などからの試算（AI ではない）。AI が出した値は .label-ai（②' PR D） */
.label-ai.sc-pct-label { margin-left:6px; margin-right:0; }
.jf-th-sub .label-estimate { margin-right:0; }
/* ===== ルートテーブル列幅最適化 ===== */
.rtable { table-layout: fixed !important; }
.rtable th:nth-child(1), .rtable td:nth-child(1) { width: 12px; }   /* 状態の色面（D3 PR 5a。もとは 4%） */
/* 現況詳細が長いので、ほかの列を削ってそこへ回す（2026-10-21・運営者。もとは 14・13・11・29・18・15%） */
.rtable th:nth-child(2), .rtable td:nth-child(2) { width: 11%; }
.rtable th:nth-child(3), .rtable td:nth-child(3) { width: 10%; }
.rtable th:nth-child(4), .rtable td:nth-child(4) { width: 8%; }
.rtable th:nth-child(5), .rtable td:nth-child(5) { width: 49%; }
.rtable th:nth-child(6), .rtable td:nth-child(6) { width: 12%; }
.rtable th:nth-child(7), .rtable td:nth-child(7) { width: 10%; }

@media (max-width: 768px) {
  /* min-width:600px を解除して横スクロール強制を廃止 */
  /* fixed：auto だと札や語の長さで列が広がり、下の幅の配分が効かなかった（2026-10-21） */
  .rtable-wrap .rtable { min-width: 0 !important; width: 100% !important; table-layout: fixed !important; }

  /* フォント・セル余白を詰める */
  .rtable { font-size: 11px !important; }
  .rtable th, .rtable td { padding: 6px 4px !important; }

  /* 状態列のpillを小さく */
  .rtable .pill { font-size: 10px !important; padding: 2px 5px !important; }
  .rtable .pill { overflow-wrap: anywhere; }   /* 「9/28）」のような切れない語で、狭くした状態の列からはみ出さない（2026-10-21） */

  /* 6列の幅配分（合計100%） */
  /* 1:状態の色面 2:ルート 3:輸送能力 5:現況詳細 6:主なリスク 7:状態。1列目は 12px・余白なし（D3 PR 5a。もとは 4%、その分を現況詳細へ） */
  .rtable th:nth-child(1), .rtable td:nth-child(1) { width: 12px !important; }
  .rtable thead th:first-child, .rtable tbody tr:not(.rtable-foot) > td:first-child { padding: 0 !important; }
  /* 2026-10-21：現況詳細を広げる（もとは 14・13・34・25・14%） */
  .rtable th:nth-child(2), .rtable td:nth-child(2) { width: 14% !important; }
  .rtable th:nth-child(3), .rtable td:nth-child(3) { width: 13% !important; }
  .rtable th:nth-child(5), .rtable td:nth-child(5) { width: 44% !important; }
  .rtable th:nth-child(6), .rtable td:nth-child(6) { width: 16% !important; }
  .rtable th:nth-child(7), .rtable td:nth-child(7) { width: 13% !important; }
  /* fixed では <colgroup> の <col> の幅が効くので、スマホの配分は col にも当てる（col のインライン style は html-safe-edit の決まりで残す）。
     日本向けのセルが display:none だと列そのものが無くなり、4列目以降の col が1つずつ前にずれて当たる（4 → 現況詳細・5 → 主なリスク・6 → 状態。7 は余り） */
  .rtable col:nth-child(2) { width: 14% !important; }
  .rtable col:nth-child(3) { width: 13% !important; }
  .rtable col:nth-child(4) { width: 44% !important; }
  .rtable col:nth-child(5) { width: 16% !important; }
  .rtable col:nth-child(6) { width: 13% !important; }
  .rtable col:nth-child(7) { width: 0 !important; }
}
/* ================================================
   特別解説ウィジェット (briefing-widget)
   D3 PR 4：金の枠・グラデーション・影の箱をやめ、上の太い罫で切る。金の飾りは差し色に、青の飾りは本文の色に。
   比べる2つの声明（金・青）は、差し色と本文の色で見分ける
================================================ */
.briefing-widget {
  border-top: 3px solid var(--c-text);
  overflow: hidden;
}
.bw-banner {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: var(--c-surface);
  padding: 9px 16px;
}
.bw-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--c-accent); flex-shrink: 0;
  animation: badgeBlink 1.3s ease-in-out infinite;
}
.bw-flag { font-size: var(--fs-sm); font-weight: 700; line-height: 1; flex-shrink: 0; }   /* 国旗の絵文字をやめて国名の文字に（課題46 D3 PR 5b-2） */
/* 「原文英語＋日本語訳付」の札。状態ではないので枠だけ（D3 PR 5） */
.bw-badge {
  font-size: .65rem; font-weight: 800; letter-spacing: .15em;
  color: var(--c-text); border: 1px solid var(--c-rule); padding: 3px 10px;
}
.bw-sub {
  font-size: .68rem; color: var(--c-text-mute); letter-spacing: .05em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* 見出しは左寄せ（§3 中央寄せの見出しをなくす） */
.bw-header {
  padding: 22px 18px 16px;
  border-bottom: 1px solid var(--c-rule);
}
.bw-eyebrow {
  display: inline-block; font-family: var(--f-figure); font-size: .62rem; font-weight: 600;
  letter-spacing: .38em; color: var(--c-accent); margin-bottom: 12px;
}
.bw-title {
  font-size: 1.15rem; font-weight: 700; color: var(--c-text);
  letter-spacing: .06em; line-height: 1.65; margin-bottom: 8px;
}
.bw-meta { font-size: .66rem; color: var(--c-text-mute); }
.bw-meta em { color: var(--c-text); font-style: normal; margin: 0 4px; }
.bw-inner { padding: 0 18px 24px; }
.bw-sec {
  font-size: .62rem; font-weight: 700; letter-spacing: .3em; color: var(--c-accent);
  border-bottom: 1px solid var(--c-rule);
  padding: 16px 0 6px; margin-bottom: 12px;
}
/* 精査メモ：緑の箱と左の色帯をやめて面の帯に（状態ではない） */
.bw-analysis {
  background: var(--c-surface);
  padding: 12px 14px; margin-bottom: 16px;
}
.bw-analysis-head {
  font-size: .63rem; font-weight: 700; color: var(--c-text);
  letter-spacing: .15em; margin-bottom: 7px;
}
.bw-analysis p {
  font-size: .75rem; color: var(--c-text); line-height: 1.8;
}
.bw-analysis p + p { margin-top: 5px; }
.bw-analysis strong { color: var(--c-text); }
.bw-c-gold { color: var(--c-accent); }
.bw-c-blue { color: var(--c-text); }
/* タイムライン（赤・緑の点と日時は PR 5 で見直す） */
.bw-timeline { position: relative; padding-left: 22px; margin-bottom: 4px; }
.bw-timeline::before {
  content: ''; position: absolute; left: 5px; top: 6px; bottom: 6px; width: 1.5px;
  background: var(--c-rule);
}
.bw-tl { position: relative; margin-bottom: 13px; }
.bw-tl:last-child { margin-bottom: 0; }
.bw-tl::before {
  content: ''; position: absolute; left: -18px; top: 4px;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--c-bg); border: 1.5px solid var(--c-accent);
}
.bw-tl.tl-b::before { border-color: var(--c-text); }
/* 時系列の点・日時は色分けしない（実施・各国の反応は札の語で書いてある・D3 PR 5） */
.bw-tl-time { font-family: var(--f-figure); font-size: .62rem; color: var(--c-accent); letter-spacing: .07em; margin-bottom: 2px; }
.bw-tl.tl-b .bw-tl-time { color: var(--c-text); }
.bw-tl-body { font-size: .74rem; color: var(--c-text-mute); line-height: 1.7; }
/* 時系列の札（背景・声明①…）は分類で状態ではないので、ルート表の .pill-* の色面を打ち消して枠だけに（D3 PR 5） */
.bw-tl-body .pill { background: none; color: var(--c-text); border-color: var(--c-rule); }
/* 差分表：紫の箱と左の色帯をやめ、上下の細い罫だけに */
.bw-diff {
  border-top: 1px solid var(--c-rule); border-bottom: 1px solid var(--c-rule);
  padding: 12px 0; margin-bottom: 4px;
}
.bw-diff-head {
  font-size: .63rem; font-weight: 700; color: var(--c-text);
  letter-spacing: .15em; margin-bottom: 10px;
}
.bw-table {
  width: 100%; border-collapse: collapse;
  font-size: .7rem;
}
.bw-table th {
  text-align: left; color: var(--c-text-mute); font-weight: 600;
  padding: 4px 8px; border-bottom: 1px solid var(--c-rule);
}
.bw-table th:first-child { width: 26%; }
.bw-table td {
  padding: 6px 8px; border-bottom: 1px solid var(--c-rule);
  line-height: 1.6; vertical-align: top;
}
.bw-table tr:last-child td { border-bottom: none; }
.bw-table td:first-child { color: var(--c-text); font-weight: 700; }
.bw-table td:nth-child(2) { color: var(--c-accent); }
.bw-table td:nth-child(3) { color: var(--c-text); }
/* 声明カード：面・角丸・グラデーションをやめて細い罫の枠に。札（声明①・②）は差し色と本文の色で見分ける */
.bw-card {
  padding: 20px 20px 16px;
  margin-bottom: 20px; position: relative;
  border: 1px solid var(--c-rule);
}
.bw-card:last-of-type { margin-bottom: 0; }
.bw-card.bw-gold { border-top: 3px solid var(--c-accent); }
.bw-card.bw-blue { border-top: 3px solid var(--c-text); }
.bw-card-badge {
  position: absolute; top: -9px; left: 18px;
  font-size: .58rem; font-weight: 700; letter-spacing: .15em; padding: 0 8px;
  background: var(--c-bg);
}
.bw-card.bw-gold .bw-card-badge { color: var(--c-accent); }
.bw-card.bw-blue .bw-card-badge { color: var(--c-text); }
.bw-card-head { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 14px; }
.bw-card-num {
  display: flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%;
  font-family: var(--f-figure); font-size: .74rem; font-weight: 600; flex-shrink: 0;
}
.bw-card.bw-gold .bw-card-num { color: var(--c-accent); border: 1.5px solid var(--c-accent); }
.bw-card.bw-blue .bw-card-num { color: var(--c-text); border: 1.5px solid var(--c-text); }
.bw-card-title { font-size: .82rem; font-weight: 700; color: var(--c-text); margin-bottom: 3px; }
.bw-card-meta { font-size: .63rem; color: var(--c-text-mute); }
.bw-card-meta em { font-style: normal; margin: 0 3px; color: var(--c-text-mute); }
/* 原文ボックス：面の帯（原文の書体も本文の書体に） */
.bw-orig {
  background: var(--c-surface); padding: 11px 14px; margin-bottom: 12px;
}
.bw-orig-label {
  font-size: .56rem; font-weight: 700; letter-spacing: .22em;
  color: var(--c-text-mute); margin-bottom: 7px;
}
.bw-orig-text {
  font-size: .73rem; color: var(--c-text); line-height: 1.85;
}
.bw-orig-text p + p { margin-top: 7px; }
/* 翻訳ボックス：上の細い罫だけ */
.bw-trans { padding: 14px 0 0; border-top: 1px solid var(--c-rule); }
.bw-trans-label {
  font-size: .58rem; font-weight: 700; letter-spacing: .22em; margin-bottom: 10px;
}
.bw-card.bw-gold .bw-trans-label { color: var(--c-accent); }
.bw-card.bw-blue .bw-trans-label { color: var(--c-text); }
.bw-trans-body { font-size: .8rem; line-height: 2.05; color: var(--c-text); letter-spacing: .03em; }
.bw-trans-body p { margin-bottom: 1.1em; }
.bw-trans-body p:last-child { margin-bottom: 0; }
/* 引用の強調は左の罫（引用の作法）。赤の強調は PR 5 で見直す */
.bw-hl-gold { border-left: 2px solid var(--c-accent); padding-left: 11px; color: var(--c-text); }
.bw-hl-blue { border-left: 2px solid var(--c-text-mute); padding-left: 11px; color: var(--c-text); }
.bw-hl-red  { border-left: 2px solid var(--c-text); padding-left: 11px; color: var(--c-text); font-weight: 700; }   /* 強い言葉の引用。赤の文字をやめた（D3 PR 5） */
/* 出典 */
.bw-src {
  margin-top: 12px; padding: 10px 0 0; border-top: 1px solid var(--c-rule);
}
.bw-src-head {
  font-size: .57rem; font-weight: 700; letter-spacing: .22em;
  color: var(--c-text-mute); margin-bottom: 8px;
}
.bw-src-row { display: flex; gap: 8px; align-items: flex-start; margin-bottom: 6px; }
.bw-src-row:last-child { margin-bottom: 0; }
.bw-src-name { font-size: .65rem; color: var(--c-text-mute); margin-bottom: 1px; }
.bw-src-url { font-size: .63rem; }
.bw-src-url a { word-break: break-all; }
.bw-src-note { font-size: .59rem; color: var(--c-text-mute); margin-top: 1px; }
/* 区切り */
.bw-divider {
  display: flex; align-items: center; gap: 10px; padding: 2px 0 16px;
}
.bw-divider::before, .bw-divider::after {
  content: ''; flex: 1; height: 1px;
  background: var(--c-rule);
}
.bw-divider span { color: var(--c-text-mute); font-size: .66rem; }
/* フッター */
.bw-footer {
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 6px;
  border-top: 1px solid var(--c-rule);
  padding: 10px 18px;
}
.bw-footer-l { font-size: .6rem; color: var(--c-text-mute); }
.bw-footer-r { font-size: .6rem; color: var(--c-text-mute); letter-spacing: .1em; }
/* レスポンシブ */
@media (max-width: 1023px) {
  .bw-title { font-size: .95rem; }
  .bw-table th:first-child { width: 32%; }
  .bw-card { padding: 16px 14px 14px; }
  .bw-inner { padding: 0 12px 20px; }
}
@media (max-width: 600px) {
  .bw-title { font-size: .88rem; }
  .bw-trans-body { font-size: .76rem; }
  .bw-orig-text { font-size: .68rem; }
}

/* INFOGRAPHIC LIGHTBOX */
.infographic-thumb {
  cursor: pointer;
  overflow: hidden;
  border: 1px solid var(--c-rule);
  transition: border-color 0.2s;
}
.infographic-thumb:hover {
  border-color: var(--c-text);
}
#lightbox-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: color-mix(in srgb, var(--c-bg) 92%, transparent);
  z-index: 9999;
  align-items: center;
  justify-content: center;
  padding: 16px;
  cursor: zoom-out;
}
#lightbox-overlay.active { display: flex; }
#lightbox-overlay img {
  max-width: 100%;
  max-height: 90vh;
  cursor: default;
}
#lightbox-close {
  position: absolute;
  top: 16px;
  right: 20px;
  color: var(--c-text);
  font-size: 2rem;
  cursor: pointer;
  background: none;
  border: none;
  line-height: 1;
  z-index: 10000;
}

  .infographic-cta {
    margin: 24px auto 12px;
    text-align: center;
  }

  /* 図解への入口：立体の赤いキーをやめ、ハブの「開く」と同じ差し色の面のボタンに（状態の色面ではない） */
  .infographic-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 5px 28px;
    background: var(--c-accent);
    color: var(--c-on-accent);
    font-weight: 700;
    font-size: 13px;
    text-decoration: none;
    white-space: nowrap;
    letter-spacing: 0.04em;
    position: relative;
  }

  .infographic-button:hover {
    text-decoration: underline;
    text-underline-offset: .18em;
  }

  @media (max-width: 600px) {
    .infographic-button {
      font-size: 12px;
      padding: 5px 20px;
    }
  }

/* ============================================================
   フェーズ2：レイアウト・文字サイズ（2026-09-18 試作・未 push）
   HTML は変えず、この CSS だけで適用する。フェーズ2を戻すときは
   このブロックと上の html{font-size:20px} を戻せばよい。
   ============================================================ */

/* --- 2-a スマホ：本文系の文字の下限を 0.8rem（14.4px）へ ---
   スマホの 1rem は絶対ルールで 18px のまま。見出しやバッジは変えず、
   長い文章を含む要素だけ下限を引き上げる。
   以前は div[style*="font-size:0.7"] で 0.7〜0.78rem のインライン指定に当てていた
   （span・a・button のラベル類は対象外）。
   ② PR4b（2026-10-01）で HTML のインライン style を、②' PR E（2026-10-12）で JS が組み立てる HTML の
   インライン style をクラスにしたので、属性セレクタは外し、当たっていた3つのクラスを並べた。 */
@media (max-width: 768px) {
  .sc-body,
  .sc-impact,
  .news-item,
  .news-item a,
  .modal-section,
  .modal-quote,
  .modal-interp-box,
  .bw-analysis p,
  .bw-tl-body,
  .bw-trans-body,
  .src-pop-body,
  .news-stale-notice,
  .osint-en {
    font-size: 0.8rem !important;
  }
}

/* --- 2-b 長文の1行の長さ ---
   1行を 70ch（全角でおよそ35〜40字）までにする。左揃えのまま幅だけを制限する
   （見出しが左揃えなので、本文だけ中央寄せにすると視線の起点がずれるため）。
   インライン style だけの箱は、日次差分（tools/diffs-generation-rules.md）の old_str に
   引用されない親要素にクラスを付けて指定する（2026-09-23）。
   速報インシデントは ② PR1（2026-09-24）で li.incident-item に統一したため、p, li の指定で足りる。 */
p, li,
.sec-lead,
.news-body,
.jf-col,
.badges .badge-item,                       /* ヘッダーの警戒レベル */
.sc-section > div:not(.sc-grid),          /* シナリオの確率補足・次の焦点 */
.osint-card > div,                         /* 現地メディア視点の英語要約 */
.data-note,                                /* WTI の注記 */
.update-log > div > div {                  /* 更新履歴の各行（行を入れる箱の開始タグは日次差分の old_str に引用されるため、クラスは section に付ける） */
  max-width: var(--measure);
}
/* フッターは上罫線を全幅に保ったまま、文字の幅だけを余白で絞る。
   ルート表の脚注（td[colspan]）は、表のセルでは余白の % の基準が安定せず
   画面が広いほど狭くなったため、対象外とした（右揃えの小さな注記で読み物ではない） */
footer {                                   /* フッター（中央揃え・上罫線は全幅のまま） */
  padding-left: max(16px, calc((100% - var(--measure)) / 2));
  padding-right: max(16px, calc((100% - var(--measure)) / 2));
}

/* --- 2-c カラム ---
   〜600px 1列 ／ 601〜1023px 2列 ／ 1024px〜 3列。
   .sc-grid のインライン style（2列）は ② PR4a で外したので !important は不要。 */
.sc-grid  { grid-template-columns: 1fr; }
.stats-row { grid-template-columns: repeat(2, 1fr); }

@media (min-width: 601px) {
  .sc-grid { grid-template-columns: repeat(2, 1fr); }
  .stats-row { grid-template-columns: repeat(3, 1fr); }

  /* 関連最新ニュース：2列。「過去の記事を見る」で開く分も同じ並びにする */
  #news-latest-container,
  #news-latest-extra.is-open {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    align-items: start;
  }
  #news-latest-container > :not(.news-item) { grid-column: 1 / -1; }
  #news-latest-container .news-item { margin: 0; }

  /* 特別解説コラム：先頭の記事（機雷）を全幅、残りの記事カードを格子に並べる。
     （2026-09-23 まで2本目以降が先頭記事の箱の中に入れ子になっていたのを、
     .commentary-grid で包む構造に直した） */
  .commentary-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    align-items: start;
  }
  .commentary-grid > :first-child { grid-column: 1 / -1; }
  .commentary-grid > div { margin: 0 !important; }
}

@media (min-width: 1024px) {
  .stats-row { grid-template-columns: repeat(6, 1fr); }
  .commentary-grid { grid-template-columns: repeat(3, 1fr); }
}
/* ============================================================
   JS が組み立てる HTML のクラス（②' PR E・2026-10-12）
   地図のポップアップ・印・凡例・関連最新ニュース・現地メディア視点。
   以前は JS のテンプレートにインライン style で書いていた。値は変えていない。
   計算で決まる値（印の大きさ・色、データが持つ色）だけはテンプレートに style で残してある。
   ============================================================ */

/* 軍事レイヤー（renderMilitaryLayer） */
.mil-pop { min-width:200px; }
.mil-pop-name { display:inline-block; margin-bottom:4px; }
.mil-pop .p-badge { margin:0 0 6px; }
.mil-pop-detail { font-size:0.8rem; }
.mil-pop-src { color:var(--c-text-mute); }

/* 調達先・日本の受入拠点・南鳥島のポップアップ */
.src-pop { font-family:var(--f-body); min-width:200px; padding:4px; }
.src-pop--wide { min-width:220px; }
.src-pop-title { font-size:0.85rem; font-weight:800; margin-bottom:6px; }
.src-pop-body { font-size:0.75rem; color:var(--c-text); line-height:1.9; }
.src-pop-body--tight { line-height:1.8; }
.src-pop-body--japan { line-height:1.8; margin-bottom:6px; }
.src-pop-btn { width:100%; background:var(--c-bg); border:1px solid var(--c-text); color:var(--c-text); font-family:inherit; font-size:0.78rem; font-weight:700; padding:7px 0; cursor:pointer; letter-spacing:0.03em; }
.src-pop-btn:hover { background:var(--c-text); color:var(--c-bg); }

/* ポップアップのバッジ・注記・画像。札は状態の色面（D3 PR 6b-2。5a の札と同じ色）：赤＝危険・黄（amber）＝警戒・緑＝平常。
   状態ではないもの（ルートの拠点・計画段階・米軍の拠点）は枠だけ。military.json の状況は index.html の milStatus() が --danger ほかを付ける */
.p-badge { display:inline-block; margin-top:6px; padding:2px 7px; font-size:0.72rem; font-weight:700; line-height:1.5; border:1px solid var(--c-text-mute); color:var(--c-text); }
.p-badge--red, .p-badge--danger { background:var(--c-danger); border-color:var(--c-danger); color:var(--c-on-danger); }
.p-badge--amber, .p-badge--alert { background:var(--c-alert); border-color:var(--c-alert); color:var(--c-on-alert); }
.p-badge--warn { background:var(--c-warn); border-color:var(--c-warn); color:var(--c-on-warn); }
.p-badge--green, .p-badge--ok { background:var(--c-ok); border-color:var(--c-ok); color:var(--c-on-ok); }
.p-badge--amber-soft, .p-badge--blue, .p-badge--navy, .p-badge--none { background:none; }
.p-note { font-size:0.62rem; color:var(--c-text-mute); margin-top:5px; line-height:1.5; }
.p-img { width:100%; height:auto; margin-top:6px; border-radius:4px; cursor:zoom-in; }

/* 地図の印（D3 PR 6b-2・設計書 §2）：C 徽章。台（i-disc）の --a が台の色、--k が目盛りの色。中の絵（.mkb-ic・a-*）は --k の色で白抜き。
   状態の無い印は「枠だけ」：地の色の台に本文の色の縁（5a の札と同じ考え）。大きさは index.html の mkBadge()（危険 32px・ほか 26px） */
.mkb-wrap { line-height:0; cursor:pointer; }
.mkb { display:block; overflow:visible; }
.mkb .mkb-ic { --a: var(--k); }
.mkb--danger { --a: var(--c-danger); --k: var(--c-on-danger); }
.mkb--alert  { --a: var(--c-alert);  --k: var(--c-on-alert); }
.mkb--warn   { --a: var(--c-warn);   --k: var(--c-on-warn); }
.mkb--ok     { --a: var(--c-ok);     --k: var(--c-on-ok); }
.mkb--none   { --a: var(--c-bg);     --k: var(--c-text); }
.mkb--none   { border-radius:50%; box-shadow:0 0 0 1.5px var(--c-text); }   /* 縁（影ではなく 1.5px の線） */
/* 湖・貯水池は印をやめて地名だけ（§2-1）。地図の水の名前と同じ色・縁取り。押すと説明が開く */
.mk-name-icon { cursor:pointer; }
#map.mk-names-hidden .mk-name-icon { display:none; }   /* 拡大9段より手前では出さない（index.html の NAME_MIN_ZOOM） */
.mk-name { white-space:nowrap; color:var(--map-label-sea); font-family:var(--f-body); font-size:11px; font-style:italic; letter-spacing:.1em;
  text-shadow:0 0 3px var(--map-halo),0 0 3px var(--map-halo),0 0 2px var(--map-halo); }

/* 地図上の国名・海域名 */
.map-label { text-shadow:0 1px 4px rgba(0,0,0,0.95); white-space:nowrap; pointer-events:none; }
/* 国名・海域名の色は地図の色（PR 6）。書体だけ本文の書体に */
.map-label--country { color:rgba(180,210,235,0.85); font-size:11px; font-weight:700; font-family:var(--f-body); }
.map-label--sea { color:rgba(56,189,248,0.5); font-size:13px; font-weight:700; font-family:var(--f-body); }
/* 自前の地図の地名（PR 6a・assets/js/basemap.js）。上の .map-label は CARTO に戻したときだけ使う */
.bm-label { pointer-events:none; }
.bm-lb { white-space:nowrap; color:var(--map-label); font-family:var(--f-body); font-size:12px; line-height:16px; display:flex; align-items:center; gap:5px;
  text-shadow:0 0 3px var(--map-halo),0 0 3px var(--map-halo),0 0 2px var(--map-halo); }
.bm-lb::before { content:""; width:5px; height:5px; background:var(--map-label); flex:none; }
.bm-lb.cap { font-weight:700; font-size:13px; }
.bm-lb.cap::before { width:7px; height:7px; box-shadow:inset 0 0 0 2px var(--map-label); background:var(--map-halo); }
.bm-lb.own { color:var(--map-label-own); }
.bm-lb.own::before { background:var(--map-label-own); }
.bm-lb.sea, .bm-lb.riv { color:var(--map-label-sea); font-style:italic; letter-spacing:.25em; font-size:13px; justify-content:center; }
.bm-lb.riv { letter-spacing:.1em; font-size:11px; }
.bm-lb.sea::before, .bm-lb.riv::before, .bm-lb.cty::before { display:none; }
/* 国名：都市名と分けるため、明るい砂色・大きめ・字間を広く */
.bm-lb.cty { color:var(--map-label-country); font-weight:700; font-size:14px; letter-spacing:.3em; justify-content:center;
  text-shadow:0 0 3px var(--map-halo),0 0 3px var(--map-halo),0 0 4px var(--map-halo),0 0 6px var(--map-halo); }

/* 凡例 */
/* 凡例の線は地図の線と同じ色（PR 6b。tokens.css の --map-route-*） */
.leg-dash--a { border-color:var(--map-route-a); }
.leg-dash--b { border-color:var(--map-route-b); }
.leg-dash--c { border-color:var(--map-route-c); }
.leg-dash--c-gulf { border-color:var(--map-route-c); border-top-style:dotted; }
.leg-dash--c-sa { border-color:var(--map-route-c-sa); }
.leg-dash--ng { border-color:var(--map-route-ng); }
.leg-dash--ao { border-color:var(--map-route-ao); }
.leg-dash--d { border-color:var(--map-route-d); }
.leg-dash--old { border-color:var(--map-route-old); }
.leg-dash--canal { border-color:var(--map-route-canal); border-top-style:solid; }
.leg-section--gap { margin-top:8px; }
.leg-note--tight { margin-top:4px; }

/* 関連最新ニュース */
.news-stale-notice { background:var(--c-surface); padding:8px 14px; font-size:0.78rem; color:var(--c-text-mute); margin-bottom:10px; }
.news-archive-batch { margin-bottom:12px; }
.news-archive-label { font-size:0.68rem; font-weight:700; color:var(--c-text-mute); letter-spacing:0.08em; padding:6px 0; border-bottom:1px solid var(--c-rule); margin-bottom:8px; }
.news-more-btn--tight { margin-top:4px; }

/* 現地メディア視点。カードの地色・枠の色と媒体名の色は news_data.json が持つので style で渡す。
   #osint-extra の display:none は toggleOsint() が読むのでテンプレートに残す */
.osint-list { display:flex; flex-direction:column; gap:8px; }
/* カードの地色・枠と媒体名の色は news_data.json が持つ（style で渡る）。データの色は PR 5 で見直す。角丸だけやめた */
/* データ（news_data.json の cardBg・badgeColor など）が持つ色は使わない（D3 PR 5）。カードは細い罫、媒体名は枠だけの札 */
.osint-card { display:block; padding:12px 0; text-decoration:none; border-bottom:1px solid var(--c-rule); }
.osint-head { display:flex; align-items:center; gap:8px; margin-bottom:6px; }
.osint-country { font-size:0.85rem; }
.osint-media { font-size:0.68rem; font-weight:700; padding:2px 7px; border:1px solid var(--c-rule); color:var(--c-text); }
.osint-date { font-size:0.68rem; color:var(--c-text-mute); }
.osint-title { font-size:0.8rem; font-weight:700; color:var(--c-text); line-height:1.5; }
.osint-en { font-size:0.72rem; color:var(--c-text-mute); margin-top:3px; line-height:1.5; font-style:italic; }
#osint-extra { margin-top:8px; }

/* ============================================================
   地図のポップアップ・出典（D3 PR 6b-2・2026-10-21。Leaflet の白い地をやめて暗い地に）
   見出しの文字は色分けしない（状態は札で示す）。以前の見出しの色のクラス .tc-*（Tailwind の既定色14色）は D3 PR 7a で外した
   ============================================================ */
#map .leaflet-popup-content-wrapper { background:var(--c-surface); color:var(--c-text); border:1px solid var(--c-rule); border-radius:0; box-shadow:none; }
#map .leaflet-popup-tip { background:var(--c-surface); border:1px solid var(--c-rule); box-shadow:none; }
#map .leaflet-popup-content { font-family:var(--f-body); line-height:1.6; }
#map .leaflet-popup-content a { color:var(--c-text); text-decoration:underline; }
#map a.leaflet-popup-close-button { color:var(--c-text-mute); }
#map a.leaflet-popup-close-button:hover { color:var(--c-text); }
#map .leaflet-popup-content .p-src { color:var(--c-text-mute); }   /* 出典の行 */
#map .leaflet-popup-content .p-title, #map .leaflet-popup-content .src-pop-title { font-size:0.85rem; font-weight:700; margin-bottom:4px; }
#map .leaflet-popup-content .p-body { font-size:0.78rem; }
/* 出典：暗い地・補助の文字。リンクは本文の色＋下線（D3 Q1） */
#map .leaflet-control-attribution { background:var(--c-bg); color:var(--c-text-mute); }
#map .leaflet-control-attribution a { color:var(--c-text); text-decoration:underline; }
/* 凡例の印（地図と同じ徽章を小さく）・湖の色の見本・川の線。地点ジャンプのボタンの絵（A） */
.leg-mk { width:20px; flex-shrink:0; display:flex; justify-content:center; }
.leg-mk .mkb--none { box-shadow:0 0 0 1px var(--c-text); }
.leg-swatch { width:20px; flex-shrink:0; display:flex; justify-content:center; }
.leg-swatch--lake::before { content:""; width:16px; height:10px; background:var(--map-sea); box-shadow:inset 0 0 0 1px var(--map-river); }
.leg-dash--river { border-top-style:solid; border-color:var(--map-label-sea); border-top-width:2px; }
.mj-ic { width:1.35em; height:1.35em; vertical-align:-0.35em; margin-right:4px; fill:currentColor; --a: currentColor; }
@media (max-width: 600px) {
  /* スマホではポップアップの余白を詰める（右上の「地点へ移動」を避けて収まる幅にする） */
  #map .leaflet-popup-content { margin:10px 12px; }
  .src-pop--wide { min-width:200px; }
}