/* dispatch 083: トップ再構成 v7 専用 CSS。
   master flag `top_conclusion_first` が on のときだけ top.html head_extras から
   <link> される (flag off は一切読み込まれない = 現状トップと完全同一)。
   正典モック: design/top_redesign_mock_v7_2026-06-28.html。

   汚染防止: 新規 v7 バンド (時系列 F3 / 物語 / 探索行表示 / フッタ) のみを対象に、
   palette 変数と全セレクタを `.v7-scope` 配下にスコープする。既存 main.css の
   :root 変数・再利用パーシャル (site_header / treemap / weekly) には影響しない。 */

.v7-scope{
  --v7-panel:#fff; --v7-text:#16243d; --v7-text-sub:#48566c; --v7-muted:#8c95a4;
  --v7-border:#e4e8ef; --v7-bg:#eef1f5;
  --A:#2c5b8c; --A-light:#4a7eb8; --A-soft:#ccdcec;
  --B:#5a3c8c; --B-light:#7c5fa8; --B-soft:#d0c6e6;
  --C:#2c7a4d; --C-light:#4a9c70; --C-soft:#c8dfd1;
  --hot:#cf4636; --hot-soft:#f7e0dd;
  --official:#a37b3e; --official-soft:#f5ecd9;
  --primary:#2563eb; --primary-soft:#e8f0fe;
  /* dispatch 094: ストーリー色 (ev1/2/3) は番号化で廃止。solo 中立ラベル色のみ残す。 */
  --ev-solo:#9aa3b0;
  color:var(--v7-text);
}
.v7-scope .mono{font-family:"IBM Plex Mono",Consolas,monospace;}

.v7-scope .sect{margin:0 0 24px;}
.v7-scope .sect-head{display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; margin-bottom:14px;}
.v7-scope .sect-head h2{margin:0; font-size:16px; font-weight:700;}
.v7-scope .sect-head .sub{font-size:12px; color:var(--v7-muted);}
.v7-scope .sect-head .meta{font-size:11px; color:var(--v7-muted); font-family:"IBM Plex Mono",monospace;}
.v7-scope .panel{background:#fff; border:1px solid var(--v7-border); border-radius:8px; padding:16px 18px;}

/* ---- 今週の物語 ---- */
.v7-scope .stories{display:grid; grid-template-columns:repeat(3,1fr); gap:14px;}
/* dispatch 094: 色枠 (.story.e*) を廃し、番号バッジ (.num) でカードを識別。中立スタイルに統一。 */
.v7-scope .story{position:relative; background:#fff; border:1px solid var(--v7-border); border-radius:8px; padding:13px 15px; display:flex; flex-direction:column; text-decoration:none; color:inherit;}
.v7-scope .story .num{position:absolute; top:-11px; left:14px; width:26px; height:26px; border-radius:50%; background:var(--v7-text); color:#fff; font-size:14px; font-weight:700; display:flex; align-items:center; justify-content:center;}
.v7-scope a.story:hover{box-shadow:0 2px 10px rgba(22,36,61,.08);}
.v7-scope .story .topic{font-size:11px; color:var(--A); font-weight:600; margin-top:6px;}
.v7-scope .story h3{margin:4px 0 6px; font-size:15px; font-weight:600;}
.v7-scope .story .said{font-size:13px; color:var(--v7-text-sub); margin:0 0 8px;}
/* dispatch 112: 俯瞰まとめ (h3 直下・左うすボーダー) + solo をメイングリッドに統合。
   design/top_story_cards_overview_mock_2026-07-24.html「改修後」の .story .summary /
   .story.is-solo / .solo-lbl に準拠。 */
.v7-scope .story .summary{font-size:12.5px; color:#5b6270; line-height:1.65; margin:0 0 10px; border-left:2px solid #e8f0f9; padding-left:9px;}
.v7-scope .story.is-solo{background:#fbfbfc; border-style:dashed;}
/* dispatch 113: recent 充填カード (今週スパイク外の直近 published)。solo (破線・濃いめ) と
   見分くため通常枠ベースの薄い区別 (mock「改修後(B)」の .is-recent)。 */
.v7-scope .story.is-recent{background:#fbfcff; border-style:dashed; border-color:#cdd8e6;}
.v7-scope .story .solo-lbl{font-size:10px; color:var(--v7-muted); font-weight:700; margin:0 0 4px;}
.v7-scope .integ{font-size:11px; background:var(--v7-bg); border:1px solid var(--v7-border); border-radius:6px; padding:5px 8px; margin:0 0 8px; color:var(--v7-text-sub);}
.v7-scope .sk{display:inline-block; background:#fff; border:1px solid var(--v7-border); border-radius:4px; padding:1px 6px; margin:2px 4px 0 0; font-size:10.5px;}
.v7-scope .story .sk .tri{color:var(--v7-text); font-weight:700;}
.v7-scope .story .meta{font-size:11px; color:var(--v7-muted); margin-bottom:8px;}
.v7-scope .layer{font-size:12.5px; border-top:1px solid var(--v7-border); padding-top:8px;}
.v7-scope .layer .off{margin:3px 0;} .v7-scope .layer .off b{font-weight:600; color:var(--A); font-size:10px; background:var(--A-soft); border-radius:3px; padding:0 4px; margin-right:5px;}
.v7-scope .layer .fold{color:var(--v7-muted); margin-top:6px;}
.v7-scope .story .foot{margin-top:auto; padding-top:10px; display:flex; align-items:center; gap:8px; font-size:11px; color:var(--v7-muted); flex-wrap:wrap;}
.v7-scope .chip{background:var(--A-soft); color:var(--A); border-radius:4px; padding:2px 7px; font-weight:600;}
.v7-scope .slug{font-family:"IBM Plex Mono",monospace; font-size:10px; color:var(--v7-muted);}
.v7-scope .solo-band{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:14px;}
.v7-scope .solo-card{background:#fff; border:1px dashed #c8cdd6; border-radius:8px; padding:11px 14px; text-decoration:none; color:inherit; display:block;}
.v7-scope .solo-card .lbl{font-size:11px; color:var(--ev-solo); font-weight:700; margin-bottom:3px;}
.v7-scope .solo-card h4{margin:0 0 3px; font-size:13.5px; font-weight:600;}
.v7-scope .solo-card .said{font-size:12px; color:var(--v7-text-sub); margin:0;}
/* dispatch 088: ストーリー アーカイブへの導線 (今週の物語バンド下)。 */
.v7-scope .stories-all{margin:14px 0 0; text-align:right;}
.v7-scope .stories-all a{font-size:13px; font-weight:600; color:var(--primary); text-decoration:none;}
.v7-scope .stories-all a:hover{text-decoration:underline;}

/* ---- dispatch 092: 📡先行指標バンド (mock v8 .lead-wrap/.lead-row 行リスト型・クリック可) ---- */
.v7-scope .lead-wrap{background:#fff; border:1px solid var(--v7-border); border-left:3px solid var(--hdr-bg, #16243d); border-radius:8px; padding:6px 16px;}
.v7-scope .lead-row{display:flex; align-items:center; gap:12px; padding:11px 6px; border-bottom:1px solid var(--v7-border); font-size:13.5px; text-decoration:none; color:var(--v7-text); border-radius:4px;}
.v7-scope .lead-row:last-child{border-bottom:none;}
.v7-scope .lead-row:hover{background:var(--primary-soft);}
.v7-scope .lead-row .ent{font-weight:700; min-width:120px;}
.v7-scope .lead-row .mag{min-width:150px; font-weight:600; color:var(--A);}
.v7-scope .lead-row .txt{color:var(--v7-text-sub); flex:1; min-width:0;}
.v7-scope .lead-row .lab{font-size:11px; font-weight:700; padding:2px 9px; border-radius:20px; white-space:nowrap;}
.v7-scope .lead-row .lab-ok{background:#e8f4ee; color:#2c7a4d;}
.v7-scope .lead-row .lab-un{background:#fbf0df; color:#b06a1f;}
.v7-scope .lead-row .arrow{color:var(--v7-muted); font-size:14px; margin-left:2px;}
.v7-scope .signals-all{margin:14px 0 0; text-align:right;}
.v7-scope .signals-all a{font-size:13px; font-weight:600; color:var(--primary); text-decoration:none;}
.v7-scope .signals-all a:hover{text-decoration:underline;}
@media (max-width:768px){
  .v7-scope .lead-row{flex-wrap:wrap; gap:4px 10px;}
  .v7-scope .lead-row .ent, .v7-scope .lead-row .mag{min-width:auto;}
  /* dispatch 097: 見出し(.txt)をフル幅の独立行に。メタ chip (sub_axis/magnitude/確信度) を
     上段1行にまとめ、見出しが列に挟まれて 1 単語ずつ折り返す崩れを解消。desktop は不変。 */
  .v7-scope .lead-row .ent{order:1;}
  .v7-scope .lead-row .mag{order:2;}
  .v7-scope .lead-row .lab{order:3;}
  .v7-scope .lead-row .txt{order:4; flex:1 1 100%;}
  .v7-scope .lead-row .arrow{display:none;}
}

/* ---- F3 イベント色タイムライン ---- */
/* dispatch 103a: chart-head = 左に色の凡例 / 右に期間ボタン (margin-left:auto で右端維持)。
   flex-wrap でモバイルは凡例が1行目・期間ボタンが2行目右端に落ちる (下の 700px BP)。 */
.v7-scope .chart-head{display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:6px;}
.v7-scope .period-buttons{display:inline-flex; gap:4px; margin-left:auto;}
/* dispatch 103a: 時系列凡例 (案B改コンパクト体裁 = キャプション無し・スウォッチ+名前)。 */
.v7-scope .tl-legend{display:flex; align-items:center; gap:13px; flex-wrap:wrap; font-size:11.5px; color:var(--v7-muted);}
.v7-scope .tl-legend .it{display:inline-flex; align-items:center; gap:5px; white-space:nowrap;}
.v7-scope .tl-legend .sw{width:11px; height:11px; border-radius:2px; flex:none;}
.v7-scope .tl-legend .sw.a{background:linear-gradient(180deg,var(--grp-a-mid),var(--grp-a));}
.v7-scope .tl-legend .sw.b{background:linear-gradient(180deg,var(--grp-b-mid),var(--grp-b));}
.v7-scope .tl-legend .sw.c{background:linear-gradient(180deg,var(--grp-c-mid),var(--grp-c));}
.v7-scope .tl-legend .sw.u{background:#9ca3af;}
.v7-scope .period-buttons a{font-family:inherit; font-size:12px; font-weight:600; padding:5px 12px; border:1px solid var(--v7-border); background:#fff; color:var(--v7-text-sub); border-radius:4px; cursor:pointer; text-decoration:none;}
.v7-scope .period-buttons a.active{background:var(--primary); color:#fff; border-color:var(--primary);}
.v7-scope .period-buttons span.disabled{font-size:12px; font-weight:600; padding:5px 12px; border:1px solid var(--v7-border); background:#f6f7f9; color:var(--v7-muted); border-radius:4px;}
.v7-scope .timeline-svg-desktop{width:100%; height:auto; display:block;}
.v7-scope .timeline-svg-mobile{width:100%; height:auto; display:none;}
.v7-scope .spike-row{display:flex; align-items:center; gap:12px; flex-wrap:wrap; padding-top:12px; margin-top:6px; border-top:1px solid var(--v7-border);}
.v7-scope .spike-row-label{font-size:12px; color:var(--v7-muted); font-weight:600;}
/* dispatch 094: 色分類 (.spike-item.e*) を廃し、番号バッジ (.num-inline) で ▲→物語を識別 (中立色統一)。 */
.v7-scope .spike-item{display:inline-flex; align-items:center; gap:8px; padding:6px 11px; border-radius:5px; font-size:12px; text-decoration:none; background:var(--v7-bg); border-left:3px solid var(--v7-text);}
.v7-scope .spike-item .num-inline{flex-shrink:0; width:17px; height:17px; border-radius:50%; background:var(--v7-text); color:#fff; font-size:11px; font-weight:700; display:inline-flex; align-items:center; justify-content:center;}
.v7-scope .spike-item .tri{font-family:"IBM Plex Mono",monospace; font-weight:700; color:var(--v7-text);}
.v7-scope .spike-item .date{font-family:"IBM Plex Mono",monospace; font-size:11.5px; color:var(--v7-text-sub);}
.v7-scope .spike-item .lnk{font-weight:600; color:var(--v7-text);}

/* ---- 探索ゾーン: group-label / 継続トレンド行表示 / ホットワード ---- */
.v7-scope .group-label{margin:30px 0 16px; display:flex; align-items:center; gap:10px;}
.v7-scope .group-label .lbl{display:inline-flex; align-items:center; gap:7px; font-family:"IBM Plex Mono",monospace; font-size:11px; letter-spacing:1.2px; text-transform:uppercase; font-weight:600; padding:4px 10px; border-radius:4px; background:var(--primary-soft); color:var(--primary);}
.v7-scope .group-label .lbl .dot{width:6px; height:6px; border-radius:3px; background:var(--primary);}
.v7-scope .group-label .line{flex:1; height:1px; background:var(--v7-border); min-width:20px;}
.v7-scope .tag-area{display:grid; grid-template-columns:1fr; gap:16px; align-items:start;}
.v7-scope .panel-head h3{margin:0 0 10px; font-size:15px; font-weight:600;}
.v7-scope .panel-head .sub{font-size:11.5px; color:var(--v7-muted); font-weight:400; margin-left:6px;}
.v7-scope .hw-cloud{display:flex; flex-wrap:wrap; align-items:baseline; gap:8px 14px;}
.v7-scope .hw{display:inline-flex; align-items:center; gap:5px; font-weight:700; line-height:1; text-decoration:none; color:var(--v7-text);}
.v7-scope .hw .dot{width:6px; height:6px; border-radius:3px;}
.v7-scope .hw .dot.up{background:var(--hot);} .v7-scope .hw .dot.stable{background:var(--primary);} .v7-scope .hw .dot.steady{background:var(--v7-muted);}
.v7-scope .hw.size-1{font-size:13px; font-weight:500; color:var(--v7-text-sub);} .v7-scope .hw.size-2{font-size:15px; font-weight:500; color:var(--v7-text-sub);} .v7-scope .hw.size-3{font-size:18px;} .v7-scope .hw.size-4{font-size:23px;}

.v7-scope .trend-rows{display:flex; flex-direction:column;}
.v7-scope .trend-row{display:flex; align-items:flex-start; gap:16px; padding:14px 2px; border-top:1px solid var(--v7-border); border-left:3px solid transparent; padding-left:12px; text-decoration:none; color:inherit;}
.v7-scope .trend-row:first-child{border-top:none;}
.v7-scope .trend-row.cat-a{border-left-color:var(--A);} .v7-scope .trend-row.cat-b{border-left-color:var(--B);} .v7-scope .trend-row.cat-c{border-left-color:var(--C);}
.v7-scope .tr-rank{font-family:"IBM Plex Mono",monospace; font-size:22px; font-weight:800; color:var(--primary); min-width:24px; line-height:1.15; flex-shrink:0;}
.v7-scope .tr-main{flex:1; min-width:0;}
.v7-scope .tr-head{display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:5px;}
.v7-scope .tr-title{font-size:14.5px; font-weight:700; line-height:1.4;}
.v7-scope .tr-summary{font-size:12.5px; color:var(--v7-text-sub); line-height:1.65; margin:0;}
.v7-scope .tr-sample{font-size:11.5px; color:var(--v7-text-sub); border-left:2px solid var(--v7-border); padding-left:8px; margin-top:6px;}
.v7-scope .tr-sample .sample-label{font-family:"IBM Plex Mono",monospace; color:var(--v7-muted); margin-right:6px; font-size:10px;}
.v7-scope .tr-side{flex-shrink:0; width:188px; display:flex; flex-direction:column; align-items:flex-end; gap:7px;}
.v7-scope .tr-side .count{display:inline-flex; align-items:baseline; gap:4px; font-family:"IBM Plex Mono",monospace; font-size:18px; font-weight:700;}
.v7-scope .tr-side .count .up{color:var(--C);} .v7-scope .tr-side .count .dn{color:var(--hot);} .v7-scope .tr-side .count .unit{font-size:10px; color:var(--v7-muted); font-weight:400;} .v7-scope .tr-side .count .delta.up{color:var(--C); font-size:11.5px;} .v7-scope .tr-side .count .delta.dn{color:var(--hot); font-size:11.5px;}
.v7-scope .tr-src{display:flex; gap:5px; flex-wrap:wrap; justify-content:flex-end;}
.v7-scope .tc-cat-pill{display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:600; padding:3px 9px; border-radius:4px;}
.v7-scope .tc-cat-pill.cat-a{background:var(--A-soft); color:var(--A);} .v7-scope .tc-cat-pill.cat-b{background:var(--B-soft); color:var(--B);} .v7-scope .tc-cat-pill.cat-c{background:var(--C-soft); color:var(--C);}
.v7-scope .tc-tag{font-size:12px; font-weight:600; color:var(--hot); background:var(--hot-soft); padding:3px 9px; border-radius:4px;}
.v7-scope .src-pill{display:inline-flex; align-items:center; gap:4px; font-size:10.5px; font-weight:600; padding:2px 7px; border-radius:4px;}
.v7-scope .src-pill.official{background:var(--official-soft); color:var(--official);} .v7-scope .src-pill.academic{background:#dcefee; color:#2f8f8a;} .v7-scope .src-pill.community{background:#fdeede; color:#b5731f;}
.v7-scope .src-pill .n{font-family:"IBM Plex Mono",monospace; font-weight:700;}
.v7-scope .empty-state{color:var(--v7-muted); font-size:13px; padding:18px 4px;}

/* dispatch 101 §1-6 (2026-07-11): v7 専用フッタ (.v7-footer) は撤去。全ページ共通の濃紺
   フッタバンド (main.css の footer.app-footer / .footer-band-*) に統合したため、旧
   .v7-footer / .f-brand / .f-links / .f-copy と §1-5 の .line-follow override は全削除
   (top.html が .v7-footer を描画しなくなったため dead CSS)。 */

/* ---- dispatch 090: ヘッダ A/B/C バー見切れ修正 + カテゴリ活発度の集計行 (cat-summary) ---- */
/* (1) header バー: desktop 横並び時のみカテゴリ名 (.cat-name) を隠し「A 48%」に短縮し、
   narrow seg の overflow (見切れ) を防ぐ。名前は下段 cat-summary に委譲。mobile (≤700px、
   main.css で縦組み full-width) は room があるため従来どおり名前も表示。top_v7.css は
   flag on 時のみロードのため flag off は完全不変。 */
@media (min-width:701px){
  .site-header .axis-bar .seg{min-width:0; justify-content:center; gap:7px;}
  .site-header .axis-bar .seg .cat-name{display:none;}
}
/* dispatch 099-b: flag on モバイル (≤700px、main.css で縦組み full-width) の A/B/C バーを
   0-(max+20pt) スケールで塗る。main.css の --seg-pct 参照グラデを --seg-scaled で上書き
   (specificity: .site-header .axis-bar .seg.a > .axis-bar .seg.a)。誤読防止に scalebar
   上限注記を表示 (mock design/header_abc_scale_mock_2026-07-08.html .scalebar 準拠)。
   flag off は top_v7.css 非ロードで --seg-pct のまま完全不変、desktop も min-width:701px
   の合成バーで不変。 */
@media (max-width:700px){
  .site-header .axis-bar .seg.a{
    background:linear-gradient(to right,
      var(--grp-a-mid) 0,
      var(--grp-a) var(--seg-scaled, 100%),
      var(--bg-alt) var(--seg-scaled, 100%),
      var(--bg-alt) 100%);
  }
  .site-header .axis-bar .seg.b{
    background:linear-gradient(to right,
      var(--grp-b-mid) 0,
      var(--grp-b) var(--seg-scaled, 100%),
      var(--bg-alt) var(--seg-scaled, 100%),
      var(--bg-alt) 100%);
  }
  .site-header .axis-bar .seg.c{
    background:linear-gradient(to right,
      var(--grp-c-mid) 0,
      var(--grp-c) var(--seg-scaled, 100%),
      var(--bg-alt) var(--seg-scaled, 100%),
      var(--bg-alt) 100%);
  }
  .site-header .axis-scalebar{
    display:flex; justify-content:space-between; align-items:center;
    font-size:10px; color:#9fb6d6; margin-top:8px; padding-top:6px;
    border-top:1px dashed rgba(255,255,255,.18);
  }
  /* dispatch 103a: モバイルは凡例が1行目 (全幅)・期間ボタンが2行目の右端。凡例 4 項目は
     各 .it が white-space:nowrap のため 375px では折り返しても単語割れは起きない。 */
  .v7-scope .chart-head{gap:8px;}
  .v7-scope .tl-legend{flex:1 1 100%; gap:10px; font-size:11px; order:1;}
  .v7-scope .period-buttons{flex:0 0 auto; margin-left:auto; order:2;}
}
/* (2) cat-summary: treemap の上に A/B/C の件数 + 構成比 (mock v8 §cat-summary)。 */
.cat-summary{display:flex; gap:16px; flex-wrap:wrap; align-items:center; margin:0 0 14px;}
.cat-summary-item{display:inline-flex; align-items:baseline; gap:7px;}
.cat-summary-item .dot{width:10px; height:10px; border-radius:3px; align-self:center;}
.cat-summary-item .dot.a{background:var(--grp-a);}
.cat-summary-item .dot.b{background:var(--grp-b);}
.cat-summary-item .dot.c{background:var(--grp-c);}
.cat-summary-item .lbl{font-size:13px; color:#48566c; font-weight:500;}
/* mock v8 §cat-summary L96: 件数/構成比は等幅 (IBM Plex Mono)。cat-summary は
   .v7-scope 外に描画されるため .v7-scope .mono は効かず、ここで直接指定する。 */
.cat-summary-item .n{font-family:"IBM Plex Mono",monospace; font-size:14px; font-weight:700; color:#16243d;}
.cat-summary-item .pct{font-family:"IBM Plex Mono",monospace; font-size:12px; color:#8c95a4;}

/* ---- レスポンシブ: PC 横型 → モバイル(≤768px) 縦型 ---- */
@media (max-width:768px){
  .v7-scope .stories{grid-template-columns:1fr; gap:12px;}
  .v7-scope .solo-band{grid-template-columns:1fr;}
  .v7-scope .tag-area{grid-template-columns:1fr;}
  .v7-scope .trend-row{flex-wrap:wrap; gap:8px;}
  .v7-scope .tr-side{width:100%; flex-direction:row; align-items:center; justify-content:space-between; gap:10px; border-top:1px dashed var(--v7-border); padding-top:8px;}
  .v7-scope .tr-src{justify-content:flex-start;}
  .v7-scope .group-label .line{display:none;}
  .v7-scope .spike-row{display:block;} .v7-scope .spike-item{display:flex; margin-bottom:6px;} .v7-scope .spike-item .lnk{margin-left:auto;}
  .v7-scope .timeline-svg-desktop{display:none;} .v7-scope .timeline-svg-mobile{display:block;}
}