/* ============================================
   SHINOBILIA - グローバルスタイル
   カスタマイズ時は :root の変数を変更してください
   ============================================ */

:root {
  /* 🔴🔴【2026-09-10・PM是正・実機発見】ネイティブの`<select>`/`<input>`等はCSSの
     background/colorを持たない限り、サイトの`data-theme`ではなく**端末のOS設定**
     （prefers-color-scheme）に従って自分で明暗を選ぶ（ブラウザの既定挙動）。
     この宣言が無いと「端末はライト・サイトの表示だけダークに切り替えた」利用者には
     ネイティブ部品だけ白いまま取り残される＝オーナー実機報告の原因の一つ
     （地は暗いのにselectが白い箱に見える）。ネイティブ部品の明暗も
     サイト自身の`data-theme`に揃える。 */
  color-scheme: light;

  /* 🔴🔴【下部ナビのクリアランス・2026-09-10・PM指示（実測サで発見＝39/41画面で
     フッターの免責文言がナビの帯に埋もれていた）】
     ■ 何のための値か＝下部ナビ（BottomNav.astro `.bn-nav`）が浮いて隠す高さの避け代。
       内訳＝ナビ自身の height(56px) + bottom の浮かせ量(10px) + 上に空ける余白(10px) + 安全域。
       ⚠️ **ナビ側の値（height:56px・bottom:calc(10px + safe-area)）を変えたら、ここも直すこと。**
     ■ なぜ1か所にまとめたか＝直す前は `main`（BaseLayout.astro）の避け代と、フッターに要る
       はずの避け代が、**別々の場所に別々の数として書かれていて、フッターの方は一度も
       書かれていなかった**（`<footer>` は `<main>` の兄弟要素なので `main` 側の
       padding-bottom はフッターを一切守らない）。⇒ 使う側は必ずこの変数を参照し、
       数を直書きしない（56/20/safe-areaを2箇所に別々に書くと、この事故が再発する）。
     ■ 使っている場所＝BaseLayout.astro の `main { padding-bottom: ... }`（768px以下）と
       このファイルの `.foot { padding-bottom: ... }`（同じ768px以下・下の RESPONSIVE 節）。 */
  --bn-nav-clearance: calc(56px + 20px + env(safe-area-inset-bottom, 0px));
  /* 🔴【UAT第10便b・PM 実測 2026-09-17】画面の下に**固定されているもの全部**の避け代
     （下部ナビ＋そのページだけの帯）。既定はナビだけ。帯が出ている画面は RESPONSIVE 節で上書きする。
     ⚠️ ページの最後の余白はこの変数から取る（帯の高さを別々に書き写さない）。 */
  --bn-bottom-ui: var(--bn-nav-clearance);

  /* === レガシー v2 パレット（一部ページのみ残存。新規実装は v3 トークンを使用） === */
  --color-border: #e8e8e8;              /* 関連体験談・アフィリエイト枠のボーダー */
  --color-bg: #f4f4f6;                  /* body 背景 */

  /* === タイポグラフィ === */
  --font-body: 'Noto Sans JP', 'Noto Sans Arabic', 'Noto Sans KR', 'Noto Sans SC', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', sans-serif;
  --font-serif: 'Noto Serif JP', 'Noto Sans Arabic', 'Noto Sans KR', 'Noto Sans SC', serif;
  --font-size-base: 16px;
  --line-height: 1.8;

  /* ═══════════════════════════════════════════════════════════════════
     🔴 【WO-017・椿さん FIX 2026-08-12】**標準の文字サイズ＝この6段だけ。**

     ■ なぜ要るか（実測）
       このサイトには**標準サイズが定義されていなかった**。`--font-size-base` が1個あるだけで、
       この global.css だけでも文字サイズの直書きが **517か所**。⇒ 画面ごとに大きさがばらつく。

     ■ いまの対象範囲＝**プロフィール・マイページ・名刺・自己紹介だけ**
       ⚠️ 517か所を一度に直さない（全ページの見た目が同時に動いて、確認ができなくなる）。
       ⭐ **これから書くものは、必ずこの6段から選ぶ。**見張り＝`tests/font-scale.test.mjs`

     ■ 6段（椿さんの表そのまま）
       32 ページの大見出し（スマホ 24）／**20 章の見出し**／20 小見出し／
       **16 本文（標準）**／14 補足・注記／12 ごく小さい印
     🔴 **章の見出しと小見出しは、同じ 20px。**見分けは**太さ**（章＝800／小＝700）と置き場所で付ける。
        ⚠️ 椿さんのご指定＝「ニックネームの大きさと同じか、ニックネームより小さく」。
           ニックネームは 20px なので、章の見出しも 20px にそろえた（2026-09-13）。
     🔴【椿さん指示・2026-09-13】**章の見出しは 24px → 20px。**同じ日に2段階で決まった＝
        ①まず「スマホだけ 20px」にした ②そのあと「ニックネームと同じか、それより小さく」と
        ご指定があり、**端末を問わず 20px** になった。⇒ スマホの上書きは要らなくなった。
        ⚠️ **文字を小さくするだけでは、長い見出しのはみ出しは直らない**（20px でも 134px 残る・PM 実測）。
           折り返しを許す指定（`overflow-wrap: anywhere`）が本体で、そちらは当たっている規則の側に在る。
     ═══════════════════════════════════════════════════════════════════ */
  --fs-page: 32px;   /* ページの大見出し（例「プロフィール」）。スマホでは 24px（下の @media） */
  --fs-sec:  20px;   /* 章の見出し（例「体験談」「名刺」）。🔴 2026-09-13 に 24px から下げた */
  --fs-sub:  20px;   /* 小見出し（例 名刺の中の見出し） */
  /* 【椿さん その23・案B・2026-09-27】iPhone標準に合わせて本文・補足・小さい印を1段ずつ上げる */
  --fs-body: 17px;   /* 🔴 本文（標準）＝自己紹介の本文・名刺の項目・**入力欄**・**主なボタンの文字** */
  --fs-note: 15px;   /* 補足・注記（説明書き・日付）・**小さな補助ボタンの文字** */
  --fs-mini: 13px;   /* ごく小さい印（ラベル・徽章）・ヘッダーの言語／ログインの札 */

  /* ═══════════════════════════════════════════════════════════════════
     🔴🔴【椿さん FIX・2026-09-21・第7便】**ヘッダー・フッター・下部ナビは、それぞれの段を規定に足す。**
        逐語＝「サイト共通のヘッダーフッター下部ナビの文字については、統一すべきですが、それぞれ
        規定に加えるで良いと思います。ヘッダーもフッターもナビもそれぞれ適切なサイズがあると思うので。
        なお、ページごとに…異なる箇所がある場合は統一されるよう規定化し調整するようにしましょう」
     ■ なぜ6段に押し込まないか（PM 実測 2026-09-21）＝この3か所は6段の外に居る
       ・下部ナビの札＝10px。**5つ並ぶので 12px では入らない**
       ・ヘッダーの名乗り＝10.56 / 9.6 / 8.96px の3段に割れていた（6段の最小より小さい）
       ・忍の印＝字ではなく印。ヘッダー 18.4 / 16px・フッター 22px
     ⚠️ **ここに無い文字は6段を使う**（言語・ログイン・里マップへ＝12px、≡の行き先＝14px）。
     ⚠️ ~~`--fs-mini` が「ナビの札の文字」~~ ＝**事実と違っていた**（ナビの札は 10px 直書き）。上の行で直した。
     ═══════════════════════════════════════════════════════════════════ */
  /* 🔴🔴【2026-09-23】**この3か所の段は、下部ナビの1つだけになった。**
     削除した4つ＝`--fs-hd-name`（ヘッダーのサイト名）・`--fs-hd-mark`（ヘッダーの印）・
                  `--fs-ft-mark`（フッターの印）・`--fs-hd-lead`（サイト名の下の肩書）。
     理由＝**サイト名と印は文字をやめて絵（マスク）になり、肩書は椿さんの判断で消えた**
           （逐語「肩書は消してよい」）＝文字の大きさで決まるものが無くなった。
     ⚠️ 定義だけ残すと、次に見た人が「ここで大きさを変えられる」と思って触り、**何も変わらない**
        （試験『定義しただけで終わっていない』が捕まえる）。
     大きさの正本＝`SatoMapHeader.astro` の `width`/`height`（パソコン＝マーク 44px・ワードマーク 167×29／
                  スマホ 560px 以下＝32px・121×21＝WO-131）と `global.css` の `.brand-mark`（44px・狭い画面は 38px）。
     ⚠️ **上の「なぜ6段に押し込まないか」の3つの例（名乗り・忍の印）はもう存在しない。**
        いま生きているのは下の2つ＝**下部ナビの札**（5つ並ぶので、6段の小さい札 13px では入らない）と、
        **サイドメニュー（≡）の機能の行**（X のスマホアプリのサイドメニューが物差し＝本文より大きい 22px）。 */
  /* 【椿さん その23・案B】下部ナビの札は 10px→12px。320px以下は日本語の札が入り切らないので後述の @media で 10px に戻す */
  --fs-nav:     12px;  /* 下部ナビの札（5つ並ぶので、ここだけ 6段の外） */
  /* 【椿さん その20・その23・案B】サイドメニュー（≡）の機能の行（1つ目の一覧）＝X の≡メニューに寄せる。
     サイト情報の行（2つ目の一覧）は --fs-body。使ってよいのは SatoMapHeader.astro だけ（tests/font-scale.test.mjs が見る） */
  --fs-hd-menu: 22px;

  /* ═══════════════════════════════════════════════════════════════════
     🔴🔴【椿さん FIX・2026-09-14】**押せるものの大きさ・角丸も規定にする。**
        逐語＝「文字サイズはもちろん、ボタンの高さやアイコンボタンの大きさも規定になければ
        制定が必要です。規定通りに全て整えましょう。適用する画面を1枚ずつ広げるで良いです」

     ■ なぜ要るか（実測 2026-09-14・本番5ページ）
       ・**ボタンの文字に段が割り当てられていなかった**＝15px / 13.6px / 12.8px / 12px が混在。
         本番の押せる文字 265個のうち、6段に乗っていたのは **101個（38%）**。
       ・**アイコンだけのボタンは、大きさの規定がどこにも無かった**（完全に未制定）。
       ・**角丸が2系統あって食い違っていた**＝`--radius-*`（6/8/12/18）と `--r-*`（8/14/999/22/50%）。
         椿さんの「角丸の太さはいずれも同じにするべき。規定に加えて」が1本になっていなかった。

     ■ 適用の作法（2026-08-12 の6段と同じ）
       ⚠️ **直書き818か所を一度に直さない**（全ページが同時に動いて確認できなくなる）。
       ⭐ **これから書くものは、必ずこの札から選ぶ。**画面を1枚ずつ対象に加える。
     ═══════════════════════════════════════════════════════════════════ */
  --tap:         44px;   /* 🔴 押せる面の最小。**どのボタンもここを下回らない** */
  /* 🔴🔴 **44px が掛かる範囲**（2026-09-14・実測で境界を決めた）
     ⭕ 掛かる＝**ボタン**と、**独立した押しどころ**（行全体が押せる面・アイコンだけのボタン・チップ）。
     ❌ 掛からない＝**文章の中に埋まっている行内リンク**（例＝感想の中の投稿者名）。
        理由＝行内リンクを 44px にすると**行の高さが崩れて文章が読めなくなる**。
        ⚠️ **この例外を書いておかないと、次の人が「違反だ」と直して文字組みを壊す。**
     🔴🔴 **測り方の規定**＝**描かれた箱の高さで判定してはいけない。押せる広さで判定する。**
        ⭐ このサイトには「**見た目は小さく、当たり判定だけ透明に広げてある**」ボタンが実在する
           （手本＝`SatoMapHeader.astro:246-252` の `::before`）。
        ⚠️ 2026-09-14、PM が描かれた高さで数えて **BORUTO の面に違反11件**と報告した。
           `::before` まで含めて測り直したら**実際は1件**で、その1件が上の行内リンクだった。
           ⇒ **正しく作られているものを、壊れていると報告した。**別の窓の指摘で判明。
        ⭐ 椿さん自身の決定（下の行）と同じ話＝**44px は「指が届く広さ」であって「丸を描け」ではない。** */
  --tap-primary: 48px;   /* 主なボタン（投稿する・保存する）の高さ */
  /* 🔴 アイコンだけのボタン＝**押せる面は必ず 44×44px**。見た目の丸はそれより小さくてよく、
     透明な余白（`::before` を広げる等）で 44px を確保する。
     🔴🔴【椿さん決定・2026-09-14】**押せる 44px の面を、常に見える丸として描く必要はない。**
        逐語＝「わざわざ外周円を最初から出してなくても良いと思います。カーソル合わせたら
        ふわっと出すでも良い。配置やボタンによる」。
        ⇒ **44px は「指が届く広さ」の規定であって、「丸を描け」という規定ではない。**
           合図は、地色がうっすら変わる／ホバーで丸がふわっと出る、のどちらでもよい。
        ⚠️ **透明でも 44px は必ず確保する**（見えないことと、無いことは別）。 */
  --icon-circle: 40px;  /* 🔴【椿さん決定・2026-09-14】丸印・アバターの**見た目の**外径 */
  /* ⚠️ いま 40px 以外の丸が実在する＝`.avatar` 30px／ヘッダーの `.avatar` 38px／`.avatar.xs` 18-28px。
     **まだ直していない**＝面を1枚ずつ直すときに、この札へ寄せる（一度に全部動かさない）。
     ⭐ 「決まっていない」から「決まったがまだ当たっていない」へ変わった。混同しない。 */

  /* 角丸＝この5つだけ。用途で選ぶ（近い値を新しく作らない） */
  --r-input:  8px;    /* 入力欄・ボタン */
  --r-card:  12px;    /* カード・箱 */
  --r-pill: 999px;    /* 丸い札（ピル） */
  --r-sheet: 18px;    /* 下から出るシート */
  --r-tile:   50%;    /* 丸いアイコン・アバター */

  /* === v3 デザインシステム トークン（2026-04-24 UI/UX リデザイン） === */
  /* NARUTO オレンジ＋墨＋温色オフホワイトの色彩体系（和紙/絵巻モチーフは全廃・owner 2026-06-07）。新規実装はこちらを使用 */
  --ink: #1a1a1a;
  --ink-80: rgba(26,26,26,0.8);
  --ink-60: rgba(26,26,26,0.6);
  --ink-40: rgba(26,26,26,0.4);
  --ink-20: rgba(26,26,26,0.12);
  /* 🔴 【WO-021・P-1049・2026-08-14 椿さん決定】地の色（body）を **温色オフホワイト → 中立のごく淡いグレー**。
     ⚠️ 変えたのは `--scroll` **1つだけ**。`--scroll-deep` / `--scroll-dark`（帯や枠に使う濃いめ）は
        温色のまま。
        🔴 **未着手であって、「やらない」と決めたのではない。**
        **決めた人＝椿さん／2026-08-14＝「今日は触らない。地の色を変えた結果を実物で見てから決める」**
        （淡いグレーの上に温かい帯が乗るのが「良いアクセント」か「ちぐはぐ」かは、絵を見ないと決められないため）。 */
  --scroll: #f4f4f5;
  --scroll-deep: #fbe6d3;
  --scroll-dark: #f3d9bc;
  --fire: #FF7601;          /* NARUTO メインオレンジ（25th 参照・2026-06-03）。ヒーロー/ヘッダー/CTA の地色 */
  --fire-dark: #d95e00;     /* 上記の濃いめ（影/補助）。旧 #c04e10 から NARUTO オレンジ系へ */
  --fire-soft: #ffe0c8;
  --spot-kind-official: #2f6ab0;
  --spot-kind-event: #FF7601;
  --spot-kind-pilgrimage: #d85a98;
  --spot-kind-sign_display: #66bb6a;
  --spot-kind-retail: #f2a71b;
  --spot-kind-other: #6a4ba8;
  --spot-kind-official-text: #ffffff;
  --spot-kind-event-text: var(--ink);
  --spot-kind-pilgrimage-text: var(--ink);
  --spot-kind-sign_display-text: var(--ink);
  --spot-kind-retail-text: var(--ink);
  --spot-kind-other-text: #ffffff;
  --vermilion: #8b1f12;
  --amber: #FFC677;         /* 本文パートの背景（NARUTO アンバー・25th 参照） */
  --accent: #E9451F;        /* 局所強調（赤寄りオレンジ・写輪眼の朱に近い） */
  --util-bg: #F0EFEB;       /* おしらせ/サイトの裏側＝業務連絡帯の背景（エンタメ部と差別化） */

  /* ═══════════════════════════════════════════════════════════════════
     🔴🔴 【#31・UAT3・2026-08-30・椿さん決定】「ダークモードの場合はサイト全体を暗くする方向で
        良いです。一方でデフォルトは現在の感じにしてくださいね。」
        ⇒ **明るいときの見た目は1ドットも変えない。**下の2つはそのための札。

     ■ なぜ `--ink` を直接ひっくり返さないか（**過去に一度差し戻した理由そのもの**）
       `--ink`（墨）は**文字色として145か所**で使われている一方、**背景として45か所・枠として
       93か所・影として72か所**でも使われている＝「黒い塊」を作る役目も持っている
       （数はいずれも 2026-08-30 にこのファイルを数えた実測）。
       ひっくり返すと、その塊が**白い板の上に白い文字**になって消える。
       ⇒ **役目ごとに札を分ける**＝文字は `--nb-text`、黒い塊は `--ink` のまま。
       ⭐ 明るいときは `--nb-text: var(--ink)` ＝**同じ色**なので、見た目は1ドットも動かない
         （実測＝計算後の値の差 0 件）。

     ■ `--ink-80/60/40/20` は**下の `[data-theme="dark"]` でそのまま反転してよい**
       （実測＝色として 52/98/21/0 件・背景として 0/0/0/3 件＝ほぼ文字と細い罫だけ）。

     ■ 進め方（椿さん指示「全部を一度にやらない」）＝**トークン化が済んだ画面から順に暗くする。**
       いま済んでいるのは `global.css` が塗っている面。部品側（`src/components/*.astro` の
       scoped style）は**まだ**＝別の窓が持っているファイルもあるため、この回では触っていない。
     ═══════════════════════════════════════════════════════════════════ */
  /* 役割の札（v2） */
  --nb-canvas: var(--scroll); /* 地（ページの一番下の面） */
  --nb-surface: #fff; /* 面（カード・シート・入力欄） */
  --nb-surface-soft: var(--hub-surface-soft); /* 一段落とした面 */
  --nb-text: var(--ink); /* 文字 */
  /* 🔴🔴【2026-09-10・c0のコントラスト監査で発見・是正】旧 `var(--ink-60)`（rgba(26,26,26,.6)）は
     `--scroll` 地(#f4f4f5)の上で rgb(113,113,114)＝比 4.44（基準4.5に0.06足りない）。
     16箇所の空状態・注記クラスが共有しているので、クラスごとに直さずこの1つの札を
     濃くする（`--ink-60` 自体は他の用途で広く共有されているため触らない＝ここだけ固有の値に
     切り離す）。0.6→0.68 で比 5.72（実測・余裕を持って基準超え）。暗い表示側は据え置き
     （`--ink-60` のまま＝暗い側は実測 6.36 で既に基準を満たしている）。 */
  --nb-text-muted: rgba(26, 26, 26, 0.68); /* 控えめな文字 */
  --nb-hairline: var(--ink-20); /* 細い罫 */
  --nb-border: var(--color-border); /* 強い縁（入力欄の枠） */
  /* 🔴【WO-rv2-A・Tier2是正・2026-09-08・PM裁定】tier②副ボタンの枠専用の役割トークン。
     `--nb-hairline`(12%)より濃く`--nb-border`（入力欄用の固定色）とは別役目。既存の
     ink-*スケールに28%の段が無いため新設し、明暗を対で持たせる（他の --nb-* と同じ形）。 */
  --nb-outline-border: rgba(26, 26, 26, 0.28); /* tier②副ボタンの枠 */
  /* 🔴【WO-rv2-A・Tier4是正・2026-09-08】`.story-header-dark` は明暗どちらでも暗いまま
     の帯（--nb-band=--ink）なので、その上のアイコンボタンの白い円は明暗で変えない＝
     :root にだけ置き、[data-theme="dark"] 側では再定義しない（意図的に固定）。
     直書きの #fff だと check-hardcoded-fff.mjs の基準を割ってしまうためトークン化した。 */
  --nb-band-btn-bg: #fff; /* 常時暗い帯の上のアイコンボタン背景（明暗共通・固定） */
  --nb-action: var(--fire); /* 押せるもの */
  --nb-action-ink: var(--ink); /* 押せるものの上の文字 */
  --nb-action-deep: var(--fire-dark); /* 濃いめ（hover・罫） */
  --nb-danger: var(--vermilion); /* 危ない操作 */
  --nb-danger-ink: #fff; /* 危ない操作の上の文字 */
  /* 🔴 発注書 A-6（2026-09-08・椿さん決定Q18）＝押した合図。端末既定の青い影をやめ、
     墨の薄い塗りに統一する。押せるもの共通の :active{background:var(--nb-press)} が使う。 */
  --nb-press: rgba(26, 26, 26, .08); /* 押した合図（明） */
  /* 🔴 【2026-09-07】**明暗どちらでも暗いままの帯**（ホームの「今日の一枚」）と、その上の文字。
     ■ なぜ札を足すか＝この帯は**明るい表示でも墨地**（モックの決め）。
       他の札（`--nb-surface` 等）は明暗で入れ替わるので、そのまま使うと
       **暗い表示で「暗い地に暗い文字」**になる（2026-09-05 に一度踏んだ形）。
     ■ ⚠️ **画面側で色を直に書かない**ための札。**面と文字を必ず対で持つ**（設計09 の決まり）。
     ■ ⚠️ **固定にしてよい面は限られる。**ここは「編集の一枚」を見せる帯で、
       どちらの表示でも同じ見え方を意図している。**他の面にこの札を流用しない。** */
  --nb-band: var(--ink); /* 明暗どちらでも暗いままの帯の地 */
  --nb-band-ink: #fff; /* その帯の上の文字 */
  --nb-card: var(--nb-surface); /* 互換性のため残す */
  /* 🔴【WO-130・2026-09-25・椿さん その12】会員のアイコンの画像を待っているあいだの丸の地（primitives.css の .av-wait）。
     ⚠️ 透けない色にする＝ヘッダーの橙の帯の上でも、丸の形とうずまきが見える（透ける色だと橙に溶ける）。 */
  --nb-wait: #E4E4E7;

  /* === 里づくり本部 トークン（2026-07-22・会員共創エリア。アクセントとして5〜10%運用・全面塗り禁止） === */
  /* R-1 BORUTO の色札（.boruto-page と同値をトップページ等のために配置） */
  --boruto:#00a3d6; --boruto-deep:#0083ac; --boruto-dark:#00567a; --boruto-ink:#021824;
  --boruto-soft:#cdeef9;

  --flash: #FFD023;         /* 閃光イエロー: バッジ・強調・アクセント。白文字は禁止（墨 #1a1a1a のみ） */
  --flash-deep: #F7B500;    /* 閃光イエローの影/縁 */
  --flash-soft: #FFF6D6;    /* 陽だまり: 里づくり本部・企画ページの地色 */

  /* === 里づくり本部（会員HQ /hq）UIデザイン・トークン — モック gen23 ロック (2026-07-24) ===
     3コンポ（HubView / CampaignNameView / CampaignBoard）は互いを import できないため、
     共有トークンをここ（:root 一次ソース）に集約する。色名はサイト既存トークン（--accent は
     写輪眼の朱 #E9451F・--flash 等）と意味が衝突しないよう --hub-* で名前空間を切る。
     ── 幅の規約（独自幅を作らない・「幅がぐちゃぐちゃ」再発防止）──
       枠   = --hub-frame … hero と掲示板の外枠。この2つは必ず同じ幅で揃える。
              🔴 RA-08（椿さん確認=YES・PM裁定 2026-08-20）＝サイト標準の --max-width(1280px)
              に統一（旧値は1040px固定）。根拠＝椿さんの横断ルール「面の幅は1280に揃える／
              狭い方に寄せず広い方へ」（2026-08-03）が、このロック（2026-07-24）より新しく
              全面に係る指示のため。値を書き写さず var(--max-width) を参照＝正本を1か所に保つ。
       全幅 = カルーセルだけ … .cp-deck-band は枠を破って full-bleed（唯一の例外）
       スライド = 全カード固定寸法（--hub-slide-w / --hub-slide-h）。幅は width 直指定
                 （`flex: 0 0 var(...)` はブラウザに無効化され幅崩れするため短縮形に入れない） */
  --hub-canvas: #F1EFEA;        /* 暖色ストーンの地色（ページ地。ヒーロー背景イラストのフェード先） */
  --hub-surface: var(--nb-surface);       /* カード地 */
  --hub-surface-soft: #FBF9F5;  /* 図パネル / 画像 wash の下地 */
  --hub-text: #1C1B19;          /* 不透明の暖色ニアブラック（本文） */
  --hub-text-muted: #6B665E;    /* 不透明の暖色グレー（副文。色の上に rgba を使わない） */
  --hub-hairline: #E6E2DA;      /* 静かな罫・境界 */
  --hub-border: #D8D3CA;        /* 入力 / 強めの縁 */
  --hub-accent: var(--nb-action);        /* NARUTO オレンジ＝基調（= --fire）。明るい塗りの上の文字は必ず墨 */
  --hub-accent-ink: #1C1B19;    /* オレンジ塗りの上の文字 / アイコン＝墨（白抜き禁止） */
  --hub-accent-deep: var(--nb-action-deep);   /* 濃いオレンジ: hover / 罫 */
  --hub-accent-soft: #FFE3CC;   /* 暖色オレンジのごく淡い chip wash */
  --hub-accent-quiet: #FFF3E9;  /* さらに淡いオレンジ wash（広い面） */
  --hub-flash: #FFD023;         /* 閃光イエロー（会員の光・少量アクセント≤8%・オレンジと隣接させない） */
  --hub-flash-deep: #F7B500;
  --hub-flash-soft: #FFF6D6;
  --hub-flash-line: #F1E1A4;
  --hub-frame: var(--max-width);
  --hub-r-card: 18px;
  --hub-r-control: 12px;
  --hub-elev-card: 0 1px 2px rgba(28,27,25,.05), 0 8px 22px -10px rgba(28,27,25,.14);
  --hub-elev-card-hover: 0 3px 6px rgba(28,27,25,.06), 0 18px 40px -14px rgba(217,94,0,.22);
  --hub-elev-slide: 0 2px 6px rgba(28,27,25,.06), 0 24px 54px -20px rgba(28,27,25,.32);
  --hub-elev-float: 0 3px 8px rgba(28,27,25,.16), 0 16px 34px -10px rgba(217,94,0,.40);
  --hub-slide-w: min(86vw, 560px);
  --hub-slide-h: min(520px, calc(100vh - 170px));

  /* === スペーシング === */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 2rem;
  --space-lg: 4rem;
  --space-xl: 6rem;

  /* === レイアウト === */
  /* 🔴【PM 是正・2026-09-12】器の幅は `--content-max` 1本を出どころにする。
     ⚠️ 同じ 1280px が2つの名前で書かれており、次に幅を変える人が片方を書き忘れる形だった。
     ⭐ CSS の変数は使うときに解決されるので、`--content-max` の定義が下にあっても問題ない。 */
  --max-width: var(--content-max);
  --max-width-text: 720px;
  /* 🔴【N-13・2026-08-21・監査窓実測】--radius-sm はこれまで公開側のどこにも定義が無く、
     MemberProfileShellの一部（X ID編集モーダルの入力欄・ボタン等）が角丸0で描かれていた
     （実測confirmed＝border-radius:0px）。値はadmin側の --adm-radius-s に合わせる
     （admin/src/styles/admin-tokens.css）。 */
  --radius-sm: 6px;
  --radius: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;

  /* === シャドウ === */
  --shadow-sm: 0 1px 4px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.09), 0 1px 4px rgba(0,0,0,0.05);
  --shadow-lg: 0 12px 32px rgba(0,0,0,0.13), 0 2px 8px rgba(0,0,0,0.06);
  --shadow-xl: 0 20px 48px rgba(0,0,0,0.16);

  /* === トランジション === */
  --transition-base: 0.22s cubic-bezier(0.4, 0, 0.2, 1);

  --elev-1: 0 1px 2px rgba(28,27,25,.05);
  --elev-2: 0 1px 2px rgba(28,27,25,.05), 0 8px 22px -10px rgba(28,27,25,.14);
  --elev-3: 0 12px 32px rgba(28,27,25,.16);
  --glass-bg: rgba(255,255,255,.82);
  --glass-blur: blur(14px) saturate(1.5);
  --glass-edge: rgba(28,27,25,.12);
  --glass-rim: rgba(255,255,255,.75);

  /* 🔴【WO-rv2-C・Step1・docs/handoff/tokens.css より・2026-09-09】
     グッズコレクションのリデザイン用トークン。--elev-1/2/3・--glass-* の7個（+ダーク3個）
     は上記に既存で値も一致（--glass-bg/--glass-blur のみ僅差だが「既存の値を変えない」
     ルールにより据え置き）なので二重定義しない。ここは残り29個のみ追記。 */
  --canvas:      #F1EFEA;
  --canvas-card: #ffffff;
  --fire-text:   #b54a00;   /* 🔴 文字だけのオレンジ（便9c）。面の色ではない。白5.32/地4.81 */
  --text:        #1C1B19;
  --text-dim:    rgba(28, 27, 25, .62);
  --hair:        rgba(28, 27, 25, .14);
  --tint:        rgba(0, 0, 0, .055);
  --elev-float: 0 8px 22px -10px rgba(0, 0, 0, .45);
  --elev-sheet: 0 -8px 30px rgba(0, 0, 0, .18);
  --elev-tile:  inset 0 0 0 1px rgba(255, 255, 255, .5), 0 4px 12px -8px rgba(0, 0, 0, .4);
  /* 🔴【椿さん FIX・2026-09-14】--tap / --tap-primary / --r-* の7個は、この下ではなく
     **上の「押せるものの大きさ・角丸」の節が正本**（グッズコレクション専用だったものを
     サイト全体の規定へ格上げした）。ここに二重定義があると、後に書いたこちらが勝って
     上の規定が効かなくなるので消した。
     ⚠️ **値が2つ動く**＝`--r-card` 14px→12px（カード）／`--r-sheet` 22px→18px（シート）。
        角丸を1系統にするというご決定そのもの。テスト環境の実物で見え方を確かめること。 */
  --content-max:1280px;
  --danger:      #8b1f12;
  --danger-bg:   #fdeceb;
  --danger-edge: rgba(139, 31, 18, .2);
}

/* 🔴【WO-rv2-C・Step1・docs/handoff/tokens.css より】
   グッズコレクションの「ページ」ごとのテーマ色。会員が自作した色は #RRGGBB がそのまま --col-ac に入る。 */
:root {
  --col-red:    #d63a35;
  --col-orange: #FF7601;
  --col-yellow: #e8b400;
  --col-lime:   #7ba05b;
  --col-green:  #4a7c3f;
  --col-cyan:   #00a3d6;
  --col-blue:   #2f6ab0;
  --col-purple: #715dd2;
  --col-pink:   #d85a98;
}

/* テーマ色の上に乗せる文字。橙と黄だけ墨、他は白（4.5:1 を切るのでこの2色は白抜きにしない）。
   🔴🔴【是正・2026-09-09・PM裁定＝pack_contradiction（primitives.css:22 と同型・instance 4）】
   ここの判断（橙と黄は白抜きにしない）自体は正しい——実測で白は両方とも基準を割る。
   だが選んだ差し替え先が誤っていた＝`--col-ac`（この2色）はテーマ固定（`--col-orange`/
   `--col-yellow` はどちらも `:root` に1回だけの定義）なのに、差し替え先の `var(--text)` は
   テーマ可変（明#1C1B19／暗#EDEDF0）。地が固定なら文字も固定でなければならない、という
   primitives.css と同じ規則を破っていた。⇒ 地と同じくテーマ固定の `--ink` へ差し替える。 */
[data-col-theme]            { --col-on-ac: #ffffff; }
[data-col-theme='orange'],
[data-col-theme='yellow']   { --col-on-ac: var(--ink); }
/* 🔴🔴【実測・2026-09-09・PM裁定待ち】9色を白／墨の両方で測ると、橙と黄以外にも「白は基準未満・
   墨は基準以上」の組が5つ在る＝lime(白2.99🔴/墨5.82✅)・cyan(白2.91🔴/墨5.98✅)・
   pink(白3.60🔴/墨4.84✅・**差0.34しか無い＝pinkの色を動かす人はここも一緒に測り直すこと**)。
   逆に red・green・blue は白のほうが正しい（白が✅・墨は🔴）。⇒ **「白か墨か」は色ごとに
   一意に決まる**（8色は答えが1つ）——ただし今回はまだ椿さんの裁定前なので、この5色の
   `--col-on-ac` は書き換えていない（オーナー判断待ち）。
   🔴🔴 **purple は白（4.25）・墨（4.10）のどちらも基準4.5を割る**＝文字色では直らない。
   色そのものを動かす以外に解が無い（同じ色相のまま実測ずみ）。
   🔴🔴【是正・2026-09-10・オーナー裁定】3候補（薄紫+墨／中間紫+白／濃い紫+白）を実測・レンダーし、
   オーナーは②濃い紫+白（#715dd2・白文字5.00:1）を選定＝「今の見た目をほぼ変えずに基準を
   クリアする」を理由に③（もっと濃い版）ではなくこちらを選んだ＝**これ以上濃くしない**こと。
   `--col-purple` を #7d6bd6 → #715dd2 へ変更、文字は白のまま（[data-col-theme]の既定を継続）。 */

[data-col-theme='red']    { --col-ac: var(--col-red); }
[data-col-theme='orange'] { --col-ac: var(--col-orange); }
[data-col-theme='yellow'] { --col-ac: var(--col-yellow); }
[data-col-theme='lime']   { --col-ac: var(--col-lime); }
[data-col-theme='green']  { --col-ac: var(--col-green); }
[data-col-theme='cyan']   { --col-ac: var(--col-cyan); }
[data-col-theme='blue']   { --col-ac: var(--col-blue); }
[data-col-theme='purple'] { --col-ac: var(--col-purple); }
[data-col-theme='pink']   { --col-ac: var(--col-pink); }
[data-col-theme='ink']    { --col-ac: var(--ink); }

:root[data-canvas="warm"] { --scroll: var(--hub-canvas); }

/* ═══════════════════════════════════════════════════════════════════════════
   🔴🔴 暗い表示（サイト全体）— **札の値だけをここで差し替える。**
   【#31・UAT3・2026-08-30・椿さん決定】「ダークモードの場合はサイト全体を暗くする方向で良いです。
     一方でデフォルトは現在の感じにしてくださいね。」

   ■ 判定は**サイトの設定**（`<html data-theme="dark">`）。端末の設定（`prefers-color-scheme`）は
     ここでは見ない＝`DayLadder.astro` / `BottomNav.astro` / `MemberProfileShell.astro` と同じ軸に揃える
     （`BaseLayout.astro` の起動スクリプトが、端末設定を**初期値**として `data-theme` に翻訳している）。

   ■ 暗い側の色は**このリポジトリで既に出荷済みの値をそのまま写した**（新しい色を作らない）＝
     地 `#1C1C1E` / 文字 `#EDEDF0` / 副次 `#A8A8B0`（`DayLadder.astro` 2026-08-29 椿さん決定）。

   🔴 **ブランドの帯（オレンジのヘッダー）はライト固定**（要件 #31 本文）＝すぐ下の
      「オレンジの塗りの上」の節で、札を明るい値に**戻して**いる。
      ⇒ 帯は明暗で地も文字も1ドットも変わらない（実測＝地 rgb(255,118,1)・文字 rgb(26,26,26) で一致）。
   ═══════════════════════════════════════════════════════════════════════════ */
:root[data-theme="dark"] {
  /* 🔴🔴【2026-09-10・PM是正】上の:rootのcolor-scheme:light注記を参照。
     ネイティブ部品（select/checkbox等）の明暗をサイト自身の設定に揃える。 */
  color-scheme: dark;
  /* 面（地） */
  --scroll: #1C1C1E;          /* body の地 */
  --scroll-deep: #232326;     /* 帯・少し持ち上げた面 */
  --scroll-dark: #2A2A2E;     /* さらに濃い縁 */
  --color-bg: #1C1C1E;        /* レガシー v2 の body 地 */
  --util-bg: #232326;         /* おしらせ・裏側の帯 */
  --amber: #4A3413;           /* 本文パートの地（暖色をごく暗くしたもの） */
  /* 役割の札（v2） */
  --nb-canvas: #1C1C1E;
  --nb-surface: #26262A;
  --nb-surface-soft: #232326;
  --nb-text: #EDEDF0;
  --nb-text-muted: var(--ink-60);
  --nb-hairline: var(--ink-20);
  --nb-border: #3A3A3C;
  --nb-outline-border: rgba(237, 237, 240, 0.28); /* tier②副ボタンの枠（暗い表示・明るい墨28%） */
  --nb-wait: #3A3A3C; /* 🔴【WO-130】アイコンの画像を待っている丸の地（暗い表示） */
  --nb-action: var(--fire);
  --nb-action-ink: var(--ink);
  --nb-action-deep: var(--fire-dark);
  --nb-danger: var(--danger-on-dark);
  --nb-danger-ink: var(--ink);
  --nb-press: rgba(255, 255, 255, .10); /* 押した合図（暗） */
  /* 🔴 暗い表示では、帯だけ**一段上の面**にする（椿さん決定 2026-09-06＝
     「真っ黒の上に真っ黒を重ねない」）。⚠️ 文字は明るいまま（対で持つ）。 */
  --nb-band: var(--nb-surface-soft);
  --nb-band-ink: #fff;
  --nb-card: var(--nb-surface); /* 互換性 */
  --color-border: #3A3A3C;
  --ink-80: rgba(237, 237, 240, 0.80);
  --ink-60: rgba(237, 237, 240, 0.62);
  --ink-40: rgba(237, 237, 240, 0.45);
  --ink-20: rgba(237, 237, 240, 0.16);
  /* 🔴 淡いオレンジの面。暗い側の定義が無く、明るいままの面に白い文字が乗っていた
     （実測＝達成バッジ 明13.88 → 暗1.07）。⭐ 新しい色を作らず、この表の `--amber`
     （本文パートの地・暖色をごく暗くしたもの）と同じ値を使う。 */
  --fire-soft: #4A3413;
  /* 🔴 暗いときの「危ない操作」の文字色（退会など）。**明るいときは使わない。**
     ⚠️ 明るいときの `--vermilion`（#8b1f12）は、暗い面の上で対比 1.65 まで落ちる。
        しかも `--vermilion` は**背景としても使われている**（この表で反転させると、そちらが壊れる）。
        ⇒ **札を反転させず、暗いときの文字色だけをこの札で上書きする。**
     ⭐ 値の選び方（測って決めた・2026-08-30）：
        ① 暗い地 #26262A に対する対比 … **5.63**（基準 4.5）
        ② サイトの主役色 --fire(#FF7601) との見分けやすさ … **ΔE2000 30.2**
        ⚠️ **②が要る理由**＝これは「危ない」の合図なので、**ふつうのボタンと同じ色に見えたら意味が無い。**
           実際、対比だけで選んだ候補（#FF6B57）は ΔE2000 が **16.4** で、オレンジと紛れていた。
        ⇒ **対比 4.5 以上のなかで、②がいちばん大きい値**を採った（式＝WCAG 対比 と CIEDE2000）。
     ⚠️ いまの深紅より**桃寄り**になる。これは「オレンジと見分ける」ことの代償で、意図している。 */
  --danger-on-dark: #FF6E8A;
  /* 🔴🔴 里づくり本部の札（--hub-*）の暗い側。**これが無いと、その一族だけ暗くならない。**
     ■ 実測（2026-09-06・qa-dark-mode を全画面に広げて初めて測れた）＝
       `/hq/` と `/hq/site-name/` は**明暗どちらでも body の地が rgb(241,239,234) のまま**で、
       その上に暖色の墨（rgb(28,27,25)）と暖色グレー（rgb(107,102,94)）の文字が乗っていた。
       ⇒ 暗い表示にすると**地だけが周りに合わせて暗くなり、文字が残る**（対比 1.14 / 2.65）。
     ■ なぜ別名にしなかったか＝`--hub-canvas`(#F1EFEA) と `--nb-canvas`(#f4f4f5) は**値が違う**。
       別名にすると明るいときの見た目が動く。⭐ **別名にできないものは、暗い側を別に書く。**
     ⚠️ 押せるもの（--hub-accent 一族）は**ブランド色なので明暗で変えない**。
        その上の文字（--hub-accent-ink）も墨のまま＝オレンジの上は明暗どちらでも墨。
     ⚠️ `--hub-text-muted` は**不透明色**で持つ（この一族は「色の上に rgba を使わない」規約）。 */
  --hub-canvas: #1C1C1E;
  --hub-surface: #26262A;
  --hub-surface-soft: #232326;
  --hub-text: #EDEDF0;
  --hub-text-muted: #A8A8B0;
  --hub-hairline: #3A3A3C;
  --hub-border: #3A3A3C;
  --hub-accent-soft: #4A3413;    /* 淡いオレンジの wash → 暖色をごく暗くしたもの（--amber と同値） */
  --hub-accent-quiet: #232326;   /* さらに淡い wash（広い面）→ 持ち上げた面と同じ */
  --hub-flash-soft: #3A3418;     /* 陽だまり（淡い黄の面）→ 暗い側の暖色 */
  --hub-flash-line: #5A4E22;

  --glass-bg: rgba(28,28,30,.72);
  --glass-edge: rgba(255,255,255,.14);
  --glass-rim: rgba(255,255,255,.16);

  /* 🔴【WO-rv2-C・Step1・docs/handoff/tokens.css より】白いパネルを残さないダーク上書き（6個）。 */
  --canvas:      #1C1C1E;
  --canvas-card: #26262A;
  --fire-text:   #FF7601;   /* 🔴 暗い面では明るい方が読める（便9c）。面5.63 */
  --text:        #EDEDF0;
  --text-dim:    rgba(237, 237, 240, .62);
  --hair:        #3A3A3C;
  --tint:        rgba(255, 255, 255, .10);
}

/* 🔴🔴 **暗いときも「明るいまま浮く」面が5か所ある。**（2026-08-30・意図してそうしている）
   ⚠️ **「まだ直していない」ではない。**⭐ **椿さんが実物を見て「ここだけ白い」と言われる可能性が
      高い場所なので、先に書き出しておく。**

   ■ 正しくそうしているもの（ブランドの帯は明暗で1ドットも変えない＝要件 #31）
     ・`.header-cta:hover`（2か所）… オレンジの帯の上。押したときだけ白く光る。
       ⚠️ 片方は文字が `#021824` の直書きなので、面だけ暗くすると**読めなくなる**。

   ■ 見られていないので触らないもの
     ・`.bt-switch::before` … 切り替えの「つまみ」。**面ではなく操作の目印。**
       白なら どの地の上でも見える。⚠️ **どの検査もここを見ていない**＝変えても誰も気づけない。

   ■ 🔴 **宿題として残っているもの**
     ・`.lc-panel` / `.lc-cta:hover` … **`.lc-*` 一族はトークンを1つも使っていない**
       （`#021824`・`#0083ac`・`#e6f5fc` などを全部直書き）。
       ⇒ **面だけ暗くすると墨の文字が読めなくなる**ので、いまは白のまま残している。
       🔴 **結果として、暗い表示のときこの一族だけが明るいまま浮く。**
       ⭐ **直すなら「面だけ」ではなく一族ごとトークン化する**（片方だけ触ると壊れる）。 */
/* 🔴🔴 **オレンジの塗りの上は、暗いときも「墨の文字」に戻す。**
   ■ なぜ＝オレンジ `--fire` は明暗どちらでも同じ色（ブランド色）。その上で文字だけ白っぽくすると
     **対比が 6.50 → 2.29 に落ちて読めなくなる**（実測・下の一覧はその実測から作った）。
     ⭐ 要件 #31 の「**ブランド帯（オレンジのヘッダー）はライト固定を維持**」を、
       帯だけでなく**オレンジで塗る面すべて**に広げた形。
   ■ 一覧は**実測で決めた**（明暗2モードで全ページの文字の対比を測り、落ちた8種類のうち
     オレンジ地だったもの）。地が本当にオレンジであることも1つずつ測ってある：
       `.panel-hero`（8ページすべて rgb(255,118,1)）／`.sm-header`（同）／
       `.filter-btn.active`／`.chip.naruto`／`.avatar`／`.news-chip-filter[aria-pressed="true"]`
   ⚠️ **`.filter-btn`（選ばれていない方）は入れない**＝地はカード色 rgb(38,38,42) なので、
      墨に戻すと**暗い上に暗い文字**になる（実測で確認して外した）。
   ⚠️ 「暗くしない」ではなく「**明るい値をもう一度置く**」形にする＝
      札の一覧は上の `:root` 1か所のままで、例外がこの1か所だけに見える。
   ■ 見張り＝`node scripts/qa/qa-dark-mode.mjs`（新しく読めなくなった箇所を0で保つ）。 */
:root[data-theme="dark"] .header,
:root[data-theme="dark"] .sm-header,
:root[data-theme="dark"] .filter-btn.active,
:root[data-theme="dark"] .chip.naruto,
:root[data-theme="dark"] .avatar,
:root[data-theme="dark"] .news-chip-filter[aria-pressed="true"],
:root[data-theme="dark"] .stories-filter-pill[aria-pressed="true"] {
  /* 🔴 札を置き直すだけでは足りない＝**自分で `color` を書いていない子**は、
     もっと上（`body`）で計算済みの明るい文字色を**そのまま受け継ぐ**（実測＝`/about/` の
     `.about-hero-body` が 2.29 のまま残った）。⇒ **この面自身にも `color` を置き直す。** */
  color: var(--nb-text);
  --nb-text: #1a1a1a;
  --nb-card: #fff;
  --ink-80: rgba(26, 26, 26, 0.8);
  --ink-60: rgba(26, 26, 26, 0.6);
  --ink-40: rgba(26, 26, 26, 0.4);
  --ink-20: rgba(26, 26, 26, 0.12);
}
/* 🔴 ブランド帯はライト固定（#31）＝暗い表示でも言語メニューはライト面（WO-150 R7）。 */
:root[data-theme="dark"] .sm-header .sm-lang-menu {
  background: #fcfbf7;
}
:root[data-theme="dark"] .sm-header .sm-lang-menu a {
  color: #1a1a1a;
}
/* 🔴【WO-150・P-1358/P-1359】着せ替えのページのヘッダーは、暗い表示でも差し色の塗りと、その上の文字色のまま。
   ⚠️ 暗い表示のこの規則はここ1か所だけに置く（`src/components/SatoMapHeader.astro` に写しを置かない）。 */
:root[data-theme="dark"][data-member-look] .sm-header {
  --fire: var(--look-ac-fill, var(--look-ac));
  color: var(--look-onac);
  background: var(--look-ac-fill, var(--look-ac));
}
:root[data-theme="dark"][data-member-look] .sm-header .sm-mark,
:root[data-theme="dark"][data-member-look] .sm-header .sm-logo b {
  background-color: var(--look-onac);
}
:root[data-theme="dark"][data-member-look] .sm-header .sm-tosato,
:root[data-theme="dark"][data-member-look] .sm-header .sm-bell,
:root[data-theme="dark"][data-member-look] .sm-header .sm-lang-btn,
:root[data-theme="dark"][data-member-look] .sm-header .sm-burger {
  background: var(--look-chip-bg, rgba(255, 255, 255, 0.3));
  color: var(--look-chip-fg, var(--nb-text, #1a1a1a));
}
:root[data-theme="dark"][data-member-look] .sm-header .sm-login {
  background: var(--look-onac);
  color: var(--look-ac-fill, var(--look-ac));
}
:root[data-theme="dark"][data-member-look] .sm-header .sm-lang-menu a:hover {
  background: var(--fire, #ff7601);
  color: var(--look-onac);
}
/* 🔴 フッター（`.foot`）は明暗どちらでも元から黒い塊＝`background: var(--ink)` のまま触らない。
   中の文字は `rgba(255,255,255,…)` の直書きなので、札を替えても動かない（実測ずみ）。 */

/* 里づくり本部カルーセル: モバイルは上段(画像/図)を縦長にする分、カード全体を低くする（モック gen23） */
@media (max-width: 600px) {
  :root { --hub-slide-h: min(460px, calc(100vh - 120px)); }
}

/* ============ リセット ============ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }

/* 🔴 発注書 A-6（2026-09-08）＝端末既定の押した青い影（Android で目立つ）を消す。
   ⚠️ 合図そのものを消すのではない＝各部品の `:active{background:var(--nb-press)}` が
   墨の薄い塗りとして残す（BottomNav.astro が最初の置き換え先）。 */
html { font-size: var(--font-size-base); scroll-behavior: smooth; overflow-x: clip; width: 100%; -webkit-tap-highlight-color: transparent; }

body {
  font-family: var(--font-body);
  color: var(--nb-text);
  background-color: var(--scroll);
  line-height: var(--line-height);
  overflow-x: clip;
  width: 100%;
  max-width: 100vw;
  word-break: keep-all;
  overflow-wrap: break-word;
  line-break: strict;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* 🔴🔴【WO-132・2026-09-26・椿さん その14 FIX】日本語・中国語の本文は、1文字単位で折り返し、両端をそろえる（最後の行は左寄せ）。
   逐語＝「1文字単位で折り返し、両端をそろえる（最後の行は左寄せ）でOK」（確認用ページ第6版のおすすめ・大手19サイトの調べ＝vault records/2026-09-25-japanese-line-break-survey）。
   ■ 当てるもの＝読み流す本文・説明文（p・dd・blockquote・figcaption・中に塊を持たない li、と利用者が書いた本文の入れ物）。
   ■ 変えないもの＝見出し（h1〜h6）・題や名前や札（class に title／ttl／eyebrow／head／label／lbl／name を含むもの）・ボタンやナビ
     ＝上の body の keep-all のまま（言葉の途中で折らない）。韓国語・英語などは :lang で外れる＝今のまま。
   ⚠️ 強さは0（:where）＝部品が自分で text-align を決めていれば、そちらが勝つ（書いた人が選んだ真ん中寄せ・右寄せ等）。
   ⚠️ 真ん中に置いた案内の段落は、真ん中を親から受け継いでいる＝この決まりで左からになる。
      ⇒ その段落の箱を文字の幅に縮めて真ん中に置く（width: fit-content ＋ margin-inline: auto）。直した場所＝WO-132 の発注書 Part C。
      新しく真ん中の案内を作るときも同じ形にする（検査＝scripts/qa/qa-linebreak-justify.mjs の E）。
   ⚠️ 見えない結びは入れない＝日本語・中国語の本文では protectText が何もしない（椿さん その16「結びを外す」・WO-134）。
      結び（U+2060・英字の語をつなぐ改行しない空白）があると、そのかたまりを次の行へ送った行の字間が大きく空く。
      字間の広がりは画面の検査 scripts/qa/qa-justify-stretch.mjs が測る。
   ⚠️ 英字の長い語（NARUTO など）は途中で折らない＝その語を次の行へ送った行は、字間が少し広がる（本や新聞と同じ）。
   ⚠️ 本文の中の部品に「折らない」（white-space: nowrap）を付けない＝その部品を次の行へ送った行が引き伸ばされ、字間が大きく空く
      （ログインの同意の1行のリンクで、幅486px のとき1文字の間に 0.38 文字分＝WO-132 直し4 で日本語・中国語だけ外した）。 */
:where(
  p, dd, blockquote, figcaption,
  li:not(:has(> :is(div, p, section, article, header, footer, ul, ol, dl, h1, h2, h3, h4, h5, h6, figure, table, form, details, blockquote, nav, aside))),
  .post .body, .bt-reply-body, .article .body, .pbio-text, .mp-post .mp-body, .mp-bio, .mp2-freetext,
  .kiji-excerpt, .kiji-ed-ghost, .foot .note
):not(:where([class*="title"], [class*="ttl"], [class*="eyebrow"], [class*="head"], [class*="label"], [class*="lbl"], [class*="name"])):where(:lang(ja), :lang(zh)) {
  word-break: normal;
  text-align: justify;
}
/* 🔴【WO-134・2026-09-26・椿さん その16】URL をそのまま文字で出すリンクは、URL の途中でも折る（class="nb-url"）。
   ⚠️ 折らないと、URL を次の行へ送った手前の行が両端そろえで引き伸ばされる（プライバシーポリシーの1行で、1文字の間に0.81文字分・PM 実測）。 */
.nb-url { word-break: break-all; }

/* モバイルで要素がビューポートを押し広げないための保険 */
main { max-width: 100vw; overflow-x: clip; }

img { max-width: 100%; height: auto; display: block; }

/* 🔴🔴 【WO-rv2-D・D-5・2026-09-08・椿さん決定 Q9】決まり0＝オレンジは明るい地の上の
   文字色に使わない（実測＝読みやすさ2.44・合格の線は4.5）。白い地のリンクは
   **墨の文字＋オレンジの下線**へ（vault 02_design/09_design-tokens.md §1 決まり0）。
   ⚠️ **この1行がサイト全体のリンク既定色**＝より具体的な規則（`.bn-item`・`.mp-row` 等）は
   既に自前で色と text-decoration を持っているのでここでは動かない。ここが直るのは、
   個別の上書きを持たない地の文中のリンクだけ（狙いどおり）。
   🔴🔴 **`--ink` ではなく `--nb-text` を使う**＝ここは「オレンジの面の上」ではなく
   「サイトの地の上」の文字なので、**暗い表示では地ごと反転する側**（`--nb-text` は
   `:root[data-theme="dark"]` で #EDEDF0 に変わる）。`--ink` は明暗で反転しない色なので、
   ここで使うと暗い表示のリンクが暗い地の上に暗い文字＝消える（2026-09-05に260か所を
   取り消した事故と同じ形）。下線色（`--fire`）はブランド色で明暗どちらも同じ値のため反転不要。 */
a { color: var(--nb-text); text-decoration: underline; text-decoration-color: var(--fire); text-underline-offset: 0.15em; }
a:hover { text-decoration-color: var(--fire-dark, var(--fire)); }


/* ============ ボタン ============ */
/* 🔴🔴【D-7a是正・2026-09-08・レーンD自身の未完了分をPM指摘で発見】
   `.btn` と `.btn-primary`（基底の背景・文字色・枠・太字・遷移）は、
   本ファイル後方（.hero-actions を持つ節）の新しい .btn / .btn-primary 規則が
   完全に置き換えている（同一セレクタが値違いで2重宣言されており、後勝ちで
   ここの値は一度も当たらなかった＝check-css-specificity-shadow.mjs 第3の形が検出）。
   ここでは削除。`.btn-primary:hover` は transform だけ後方の規則と重複していたので
   その1行だけ削除し、background/border-color/color/text-decoration は他に供給元が
   無い（.btn:hover にも .hero-actions .btn-primary:hover にも無い＝実測で確認）ため
   そのまま残す。詳細＝docs/rv2-dead-css-findings.md グループC。 */
.btn-primary:hover {
  background: var(--fire-dark, var(--fire));
  border-color: var(--ink);
  color: var(--ink);
  text-decoration: none;
}

/* 🔴 ②副＝線だけ（1.5px）・塗りは透明。旧版はハードオフセット影付きの「塗りに見える」
   意匠だった＝副ボタンが主ボタンと張り合って見えるため撤去。 */
/* 🔴【WO-rv2-A・Tier2是正・2026-09-08・PM裁定】枠をシート通り28%不透明度へ・太さを
   600へ（旧800は主ボタンtier1と張り合って見える太さだった）。
   🔴 枠は `--nb-outline-border`（役割トークン・:root の明/暗ブロック両方）を使う＝ink-*スケールに
   28%の段が無いため新設し、`--nb-*` の他の値と同じ形で明暗を対に持たせた。これで暗い
   表示でも枠の不透明度が地に追従する（旧 `var(--ink)` は明暗非対応だった＝今回で解消）。 */
.btn-outline {
  background: transparent;
  color: var(--nb-text);
  border: 1.5px solid var(--nb-outline-border);
  font-weight: 600;
  transition: transform 0.15s, background 0.15s;
}
.btn-outline:hover {
  background: color-mix(in srgb, var(--nb-text) 6%, transparent);
  color: var(--nb-text);
  text-decoration: none;
  transform: translate(-1px,-1px);
}

.btn-large {
  padding: 1rem 2.4rem;
  font-size: var(--fs-body);
}

/* 方式B 公開ゲート：公開時刻まで新導線を隠す（BaseLayout のスクリプトが時刻到来で data-launch-gated を外す）。owner 2026-06-10 */
[data-launch-gated] { display: none !important; }

/* ============ タグ ============ */
.tag {
  display: inline-block;
  padding: 0.2rem 0.7rem;
  background: var(--fire-soft);
  color: var(--nb-text);
  border: 1.5px solid var(--fire);
  border-radius: var(--r-pill);
  font-size: var(--fs-mini);
  font-weight: 800;
}

.tag-large {
  padding: 0.3rem 1rem;
  font-size: var(--fs-note);
}

/* メディア種別タグ（アニメ・漫画など）：シリーズタグと色を変えて区別 */
.tag-media {
  background: var(--scroll-deep);
  color: var(--ink-80);
  border-color: var(--ink-40);
}

/* ============ セクション共通 ============ */
.section {
  padding: var(--space-lg) 0;
}

/* body 背景は L65 の --scroll（温色）に一本化。--color-bg(寒色)上書きは静的ページが意図と逆の寒色になるため撤去（owner 2026-06-07） */

.section-inner,
.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--space-md);
}

/* モバイル: セクション余白を圧縮（画面幅を有効活用） */
@media (max-width: 720px) {
  .section { padding: 32px 0 40px; }
  .section-inner,
  .container { padding: 0 16px; }
  /* 🔴 【WO-017】スマホではページの大見出しを 24px（椿さん FIX の表）。
     🔴【椿さん指示・2026-09-13（2回目）】**章の見出しは端末を問わず 20px にしたので、
        ここでの上書きは要らなくなった**（同じ日の1回目はここに `--fs-sec: 20px` を足していた）。
        ⭐ 端末で数が変わらない方が、規定が1行で済み、食い違いも起きない。
     ⚠️ 残る4段は動かさない＝**本文**が端末で変わると、書いた人の見え方が読む人と変わる。 */
  :root { --fs-page: 24px; }
}
/* 【椿さん その23・案B】横幅320px以下の端末では日本語の札が入り切らないので10pxのまま・PM 実測 */
@media (max-width: 320px) {
  :root { --fs-nav: 10px; }
}
/* 🔴【ロゴ差し替え・2026-09-23】~~`@media (max-width: 560px) { --fs-hd-name: 14px }`~~ は削除。
   サイト名が絵になり、札そのものを消したため。狭い画面での小さくし方は
   `SatoMapHeader.astro` の `@media (max-width: 380px)`（ワードマーク 121×21）が持つ。 */
/* 🔴【2026-09-23】~~狭い端末で名乗りを 9px に下げる（第7便）~~ は削除。
   肩書の一行そのものが無くなった（椿さん「肩書は消してよい」）ため、当たる先が無い。 */
@media (max-width: 420px) {
  .section { padding: 24px 0 32px; }
  .section-inner,
  .container { padding: 0 12px; }
}

.section-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: var(--space-md);
}

.section-title {
  font-size: var(--fs-sec);
  font-weight: 700;
  position: relative;
  padding-bottom: 0.75rem;
}
.section-title::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 2.5rem;
  height: 3px;
  background: linear-gradient(90deg, var(--fire) 0%, rgba(255, 118, 1,0.2) 100%);
  border-radius: 2px;
}

.section-link {
  font-size: var(--fs-note);
  font-weight: 700;
  color: var(--fire);
}

/* ============ .mp カードグリッド（v3 stories 一覧） ============ */
.mp-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
  gap: var(--space-md);
}

/* ============ CTAセクション ============ */
/* 下部 CTA — homepage `.cta` と同じ視覚言語に統一 */
/* 🔴 決まり0（2026-09-08）＝オレンジの面の上は墨 */
.cta-fire {
  position: relative; overflow: hidden;
  padding: 120px 32px 132px;
  background: var(--fire);
  color: var(--ink);
  text-align: center;
}
.cta-fire::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    repeating-conic-gradient(from 180deg at 50% 50%,
      transparent 0deg, transparent 2deg,
      rgba(26,26,26,0.12) 2deg, rgba(26,26,26,0.12) 2.4deg);
  mask-image: radial-gradient(circle at 50% 50%, transparent 180px, #000 520px);
  -webkit-mask-image: radial-gradient(circle at 50% 50%, transparent 180px, #000 520px);
}
.cta-fire::after {
  content: '声';
  position: absolute; right: -80px; bottom: -140px;
  font-weight: 700; font-size: 560px;
  line-height: 0.8; color: var(--nb-text); opacity: 0.08;
  pointer-events: none;
}

.cta-inner {
  max-width: 900px; margin: 0 auto;
  position: relative; z-index: 2; text-align: center;
}

.cta-stamp-p100 {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 8px 18px; background: var(--ink); color: var(--fire);
  font-weight: 900; font-size: var(--fs-mini); letter-spacing: 0.24em;
  border-radius: var(--r-pill); margin-bottom: 28px;
  transform: rotate(-2deg);
}

.cta-title {
  font-size: clamp(2.2rem, 5vw, 4.2rem);
  font-weight: 900; line-height: 1.15; letter-spacing: -0.01em;
  margin-bottom: 28px;
  /* .cta-fire自体は決まり0で墨に直したのに、この見出しだけ白文字のまま残っていた（2026-09-09発見） */
  color: var(--ink);
  word-break: keep-all; overflow-wrap: break-word;
}
.cta-title .box {
  display: inline-block; background: var(--ink); color: var(--fire);
  padding: 0 14px; margin: 0 2px;
  transform: rotate(-1deg);
}

.cta-desc {
  font-size: var(--fs-body);
  line-height: 1.9; font-weight: 500;
  max-width: 640px; margin: 0 auto 44px;
  width: fit-content; /* 🔴【WO-132】真ん中の案内＝箱を文字の幅に縮めて真ん中へ */
  color: var(--ink);
}
/* 25%の墨washは4.17:1でAA未達だが、透ける意匠は意図（PM裁定・2026-09-10＝不透明にすると
   意図を壊す修理になる）→白文字のまま4.5:1を満たす最小の不透明度を実測（境界≈29%・
   実測4.50は際どいため余裕を持たせ35%に）。35%で5.07:1 */
.cta-desc .nb {
  display: inline-block; font-weight: 900; color: #fff;
  background: rgba(26,26,26,0.35); padding: 2px 10px; border-radius: var(--r-pill);
  margin: 2px 4px;
}

/* p100 CTA ボタン — homepage `.cta-cta` と完全同値
   🔴 D-7a（2026-09-08）＝この帯自体が橙の地（.cta-fire）なので tier①（橙の面）には揃えない
   （揃えると橙の上の橙で消える）。墨地・白文字は決まり0（オレンジの誤用）には当たらない。
   コマ割り影だけ撤去。 */
.cta-fire .btn,
.cta-fire .btn-primary,
.cta-fire .btn-primary.btn-large {
  display: inline-flex; align-items: center; gap: 14px;
  padding: 22px 48px; border-radius: var(--r-pill);
  background: var(--ink); color: #fff;
  font-size: var(--fs-body); font-weight: 900; letter-spacing: 0.04em;
  text-decoration: none;
  box-shadow: var(--elev-float);
  transition: all 0.15s;
  min-height: var(--tap-primary);
}
.cta-fire .btn-primary:hover,
.cta-fire .btn-primary.btn-large:hover {
  background: var(--nb-card); color: var(--nb-text);
  transform: translate(-2px,-2px);
}
.cta-fire .btn-primary .arrow,
.cta-fire .btn-primary.btn-large .arrow { transition: transform 0.25s ease; }
.cta-fire .btn-primary:hover .arrow,
.cta-fire .btn-primary.btn-large:hover .arrow { transform: translateX(8px); }

.cta-note {
  margin-top: 28px; font-size: var(--fs-note);
  width: fit-content; max-width: 100%; margin-inline: auto; /* 🔴【WO-132】真ん中の案内＝箱を文字の幅に縮めて真ん中へ */
  color: var(--ink); font-weight: 500;
}
.cta-note a {
  color: var(--ink);
  border-bottom: 2px solid var(--ink);
  padding-bottom: 1px;
}
.cta-note a:hover { border-bottom-color: var(--ink); }

@media (max-width: 720px) {
  .cta-fire { padding: 56px 20px 64px; }
  .cta-fire::before { mask-image: radial-gradient(circle at 50% 50%, transparent 100px, #000 360px); -webkit-mask-image: radial-gradient(circle at 50% 50%, transparent 100px, #000 360px); }
  .cta-fire::after { font-size: 320px; right: -80px; bottom: -120px; }
  .cta-stamp-p100 { margin-bottom: 18px; padding: 6px 14px; }
  .cta-title { font-size: clamp(1.8rem, 7vw, 2.4rem); margin-bottom: 18px; }
  .cta-desc { line-height: 1.85; margin-bottom: 28px; }
  .cta-fire .btn-primary,
  .cta-fire .btn-primary.btn-large {
    padding: 14px 22px;
    width: 100%; max-width: 100%;
    justify-content: center; box-sizing: border-box;
    min-height: var(--tap-primary); gap: 10px;
  }
  .cta-note { margin-top: 18px; }
}

.page-title {
  font-family: var(--font-body);
  /* 🔴【A-19続き・2026-09-08・PM裁定#4】~~clamp(1.8rem, 4.2vw, 2.6rem)~~ → **6段の
     ページ見出し段（--fs-page）へ**。デザインシステムシート（モック節1）は文字サイズを
     6段だけに限る＝流動値(clamp)は7段目になってしまう。--fs-page は 720px 以下で
     自動的に24pxへ切り替わる仕組みが既にある（global.css:507）ので、ここでの
     スマホ専用の再指定は不要になった（下の @media 内から font-size を外した）。 */
  font-size: var(--fs-page);
  font-weight: 900;
  line-height: 1.2;
  margin-bottom: 0.55rem;
  color: var(--nb-text);
  letter-spacing: -0.005em;
}

.page-desc {
  color: var(--ink-80);
  font-size: var(--fs-note);
  font-weight: 600;
}
.page-desc strong {
  color: var(--nb-text);                                     /* オレンジhero上で件数のオレンジ字が消えるので黒に（owner 2026-06-04） */
  font-size: 1.35em;
  font-weight: 900;
  font-family: var(--font-body);
  letter-spacing: -0.01em;
  margin: 0 2px;
}

@media (max-width: 720px) {
  /* V-21（2026-08-19）＝スマホでヒーローが縦に長すぎる（椿さん指摘）。文字を小さく・
     余白を詰める。多くのページ見出しで使われる共通クラスなので、ここを直すだけで
     全ページ（里人の証／忍界ニュース／聖地マップ／このサイトについて…）に一括で効く。 */
  .page-title { margin-bottom: 0.35rem; }
}

/* 🔴【A-19続き・2026-09-08・PM裁定】v3パネルヒーロー（.panel-hero 一式）は撤去済み。
   markup 側の使用は src/・public/・admin/ の3か所で実測0件（src/ の1件は
   AccountView.astro の経緯コメント内の文字列言及のみで class 使用ではない）。 */

/* 🔴【A-19・2026-09-08・オーナー決定】装飾ヒーロー帯を全廃。中身は .section-inner と同じ
   横幅制御のみ（背景・境界線・漢字透かし・グラデ・特大paddingは持たない）。下paddingは0にし、
   直後の .section が自分の上paddingでリズムを継ぐ。 */
.page-plain-header {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: var(--space-lg) var(--space-md) 0;
}
@media (max-width: 720px) {
  .page-plain-header { padding-left: 16px; padding-right: 16px; }
}
@media (max-width: 420px) {
  .page-plain-header { padding-left: 12px; padding-right: 12px; }
}
/* 🔴【A-19・2026-09-08・PM裁定】帯の中にあった「戻る」動線は消さず、h1の直前・左寄せへ
   移す（back-left）。テキストのみ・44pxタップ域（横断ルール19-3）。ボタンの背景・枠線は持たない。 */
.page-back-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 44px;
  margin-inline-start: -8px;
  padding: 0 8px;
  margin-bottom: 4px;
  color: var(--ink-60);
  font-size: var(--fs-note);
  font-weight: 700;
  text-decoration: none;
}
.page-back-link:hover { color: var(--nb-text); }
.page-back-link svg { width: 16px; height: 16px; flex-shrink: 0; }
/* 🔴【A-19・2026-09-08・PM裁定】帯が持っていた短い状態文言（today-eyebrow・stories-hero-eyebrow）
   は消さず残すが、回転ピル・オレンジ塗り・特大文字などの装飾は剥がしプレーンな note 階層にする。 */
.page-eyebrow-note {
  margin: 0 0 4px;
  font-size: var(--fs-note);
  font-weight: 700;
  color: var(--ink-60);
}

/* ============ 体験談一覧ページ ============ */
.filter-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 1.75rem;
}
.filter-toolbar .filter-bar { margin-bottom: 0; }

.filter-toolbar-right {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* 🔴【D-8・2026-09-08・PM指示】旧・並べ替え用select（L-1・古い部品・docs/rv2-legacy-parts.md
   参照）の意匠がここに在ったが、src/**（pages/stories含む全体）のどこからも参照されていない
   死んだCSS＝markupの置き換え済みで使う要素が無くなったあとに残っていた。撤去。 */

.btn-random {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.5rem 1.1rem;
  border-radius: var(--r-pill);
  background: var(--nb-card);
  color: var(--nb-text);
  font-family: var(--font-body);
  font-size: var(--fs-note);
  font-weight: 800;
  cursor: pointer;
  min-height: var(--tap);
  box-shadow: var(--elev-1);
  transition: transform 0.15s, box-shadow 0.15s;
}
.btn-random:hover {
  transform: translate(-2px, -2px);
  box-shadow: var(--elev-2);
}

.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1.75rem;
}

.filter-btn {
  padding: 0.5rem 1.15rem;
  border-radius: var(--r-pill);
  background: var(--nb-card);
  color: var(--nb-text);
  font-family: var(--font-body);
  font-size: var(--fs-note);
  font-weight: 700;
  cursor: pointer;
  min-height: var(--tap);
  box-shadow: var(--elev-1);
  transition: transform 0.15s, box-shadow 0.15s, background 0.15s, color 0.15s;
}
.filter-btn:hover {
  transform: translate(-1px, -1px);
  box-shadow: var(--elev-2);
}
.filter-btn.active {
  background: var(--fire);
  /* --nb-textは明暗で反転する文字札（暗表示で#EDEDF0）だが--fireは明暗固定の帯。
     組ませると暗表示だけ2.29:1まで落ちて壊れる（2026-09-09実測）→固定の墨 var(--ink) に。
     地が明暗で変わらない帯には、文字も明暗で変わらない札を使う（決まり0・2026-09-09） */
  color: var(--ink);
  font-weight: 900;
  box-shadow: var(--elev-2);
  transform: translate(-1px, -1px);
}

/* NEWバッジ */
/* 🔴 決まり0（2026-09-08）＝オレンジの面の上は墨 */
.badge-new {
  display: inline-block;
  padding: 0.15rem 0.45rem;
  background: var(--fire);
  color: var(--ink);
  font-size: var(--fs-mini);
  font-weight: 700;
  border-radius: var(--r-pill);
  letter-spacing: 0.06em;
  vertical-align: middle;
  margin-right: 0.25rem;
}

/* 🔴🔴【椿さん指示・2026-09-13】**里人の証は「記事の索引」＝複数列のグリッドにする。**
   逐語＝「里人の証ですが、まだタイムラインフィードみたいになってるので、元々のグリッドシステム
   一覧にしてください。墨背景の。」
   ⚠️ ~~「PC/タブレットでも複数列のカードグリッドにはしない」（2026-09-08）~~ ＝**この指示で上書きされた。**
      出どころ＝椿さんが 2026-09-11 にご自身で更新されたモック（`docs/mocks/redesign-v2/`・
      「里人の証（一覧）と体験談（1件）— **記事であってフィードではない**」）。
   ⚠️ **カードにはしない**（枠なし・角丸なし・影なし・仕切り線1本）＝サイトの「流れる面」の決まりは守る。
      変えるのは**列の数**と**1行の中の並び**だけ。
   ⚠️ `.mp-list` はカレンダー・推しの社でも使う共通のクラスなので、ここは
      **体験談一覧だけを指す `#story-grid`** を上書きする（他ページの列組みには触らない）。
   ⚠️ 段は `column-gap` を広めに取る＝列どうしの仕切り線が続いて見えないように。 */
#story-grid { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 700px)  { #story-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; row-gap: 0; } }
@media (min-width: 1100px) { #story-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 36px; row-gap: 0; } }

/* 🔴【2026-09-08・椿さん決定】体験談一覧の絞り込み(推し・国・作品)。旧 .filter-btn や旧・並べ替え
   用selectとは別部品(新しい部品名)。並べ替え・ランダムは無い＝この行は「絞り込みだけ」を持つ。 */
.stories-filter-row {
  max-width: 1280px;
  margin: 0 auto;
  padding: var(--space-md) 20px 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
}
.stories-filter-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.stories-filter-pill {
  height: var(--tap);
  padding: 0 1rem;
  border-radius: var(--r-pill);
  border: 1.5px solid var(--nb-hairline);
  background: var(--nb-surface);
  color: var(--nb-text);
  font-size: var(--fs-note);
  font-weight: 700;
  cursor: pointer;
}
/* 🔴 オレンジ地の上は明暗どちらでも墨の文字に固定(qa-dark-mode.mjsの見張り対象に追加要)。 */
.stories-filter-pill[aria-pressed="true"] {
  background: var(--fire);
  border-color: var(--fire);
  color: var(--ink);
}
/* 🔴🔴【D-17・2026-09-08・椿さん実物確認後の差し戻し】D-8で撤去したこの部品を、コンパクト版として
   復元する。⚠️ 旧・撤去済みの「幅いっぱいの素のselect」（旧クラス名は check-legacy-parts.mjs が
   0件を見張っているので綴らない・docs/rv2-legacy-parts.md参照）とは**別物**＝
   ①幅を持たせない（width:auto・max-width で頭打ち）②決まりの入力欄の形＝角丸8px・44px高
   ③現在値が常に見える（ネイティブselectの既定の見た目）④既定の選択肢は「すべて」。
   🔴【PM是正・2026-09-08】枠は --nb-hairline（細い罫）ではなく --nb-border（強い縁＝入力欄の枠）。
   selectは名刺と同じ「入力欄」の扱い。
   🔴【PM是正・2026-09-08】max-width は実測（scripts/qa/_tmp-measure-option-width.mjs）で決めた。
   実データの最長オプション「日向（うずまき）ヒナタ（2）」がcanvas.measureTextで216.9px、
   padding(14.4+32px)+border(1+1px)を足すと箱幅265.3px要る。11rem(176px)は足りていなかった
   （ネイティブellipsisに任せない＝現在値が読めなくなる）。17rem(272px)に上げて収める。 */
.stories-filter-select {
  height: var(--tap);
  padding: 0 2rem 0 0.9rem;
  border-radius: var(--r-input);
  border: 1.5px solid var(--nb-border);
  background: var(--nb-surface);
  color: var(--nb-text);
  font-size: var(--fs-body);
  font-weight: 700;
  width: auto;
  max-width: 17rem;
  cursor: pointer;
}
@media (max-width: 640px) {
  /* 🔴 スマホでも横いっぱいには広げない（それは撤去した旧部品の形に戻ってしまう）。
     3つの絞り込み（シリーズpill・推し・国）が縦に積んでも、各selectは中身に応じた
     コンパクトな幅のまま＝flex-wrapで折り返す行の1つとして振る舞う。 */
  .stories-filter-select { max-width: 100%; }
}

/* 🔴【UAT第6便・Q-4d・2026-09-22】一覧の絞り込みボタンと下敷き */
/* 🔴【PM 実測・2026-09-22】上の余白は `--space-md`（2rem=32px）ではなく `--space-sm`（1rem=16px）。
   ⚠️ 32px は、ここに**帯が3つ並んでいた**ときの間隔をそのまま引き継いだ値。
      ボタン1つになった今は、説明文との間が 48px（帯の下16＋ここ32）空いて、
      椿さんのご要望「端的に」と逆を向く（PM が実物を撮って目で見て気づいた）。 */
.stories-filter-bar {
  max-width: 1280px;
  margin: 0 auto;
  padding: var(--space-sm) 20px 0;
  display: flex;
  align-items: center;
}
.stories-filter-open {
  height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 16px;
  border-radius: var(--r-input);
  border: 1px solid var(--hair);
  background: var(--canvas-card);
  color: var(--nb-text);
  font-size: var(--fs-note);
  font-weight: 700;
  cursor: pointer;
  transition: border-color 0.15s ease;
}
.stories-filter-open:hover {
  border-color: var(--fire);
}
.stories-filter-open__label {
  font-size: var(--fs-note);
  font-weight: 700;
  color: var(--nb-text);
}
.stories-filter-open__count {
  display: inline-grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: var(--r-pill);
  background: var(--fire);
  color: var(--canvas-card);
  font-size: var(--fs-mini);
  font-weight: 900;
  line-height: 1;
}
.stories-filter-sheet .sheet__head {
  justify-content: space-between;
}
.stories-filter-close {
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--text);
  display: grid;
  place-items: center;
  padding: 0;
  cursor: pointer;
}
.stories-filter-sheet .stories-filter-row {
  padding: var(--space-xs) 0;
}
.stories-filter-sheet-actions {
  display: flex;
  justify-content: flex-end;
  padding: var(--space-xs) 0 0;
}
.stories-filter-done {
  height: var(--tap);
  padding: 0 20px;
  font-size: var(--fs-body);
}

.filter-no-results {
  text-align: center;
  color: var(--ink-60);
  padding: var(--space-lg) 0;
  font-weight: 500;
}

/* 体験談一覧: モバイル調整 */
@media (max-width: 720px) {
  .filter-toolbar {
    flex-direction: column;
    align-items: stretch;
    gap: 0.55rem;
    margin-bottom: 1.25rem;
  }
  .filter-toolbar .filter-bar {
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 0.4rem;
  }
  .filter-toolbar-right {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.4rem;
    align-items: center;
  }
  .filter-btn { padding: 0.4rem 0.9rem; }
  .btn-random { padding: 0.45rem 0.9rem; white-space: nowrap; }
  .mp-list {
    /* 🔴 minmax(0,1fr)＝最小を0にする。`1fr` だけだと最小が中身の幅になり、
       和文や nowrap の行がそのまま列を押し広げて画面の外へ出る（2026-09-07 実測 377px）。 */
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
  }
}

/* さらに狭い画面: 並び替えとランダムボタンを縦積み */
@media (max-width: 420px) {
  .filter-toolbar-right {
    grid-template-columns: 1fr;
  }
  .btn-random { width: 100%; justify-content: center; }
}

/* ============ 推し一覧ページ ============ */
.chara-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 1rem;
  margin-bottom: var(--space-md);
}
/* 🔴 I-44（B-14・PM裁定）＝カード(枠+角丸+黒影)を撤去。「並ぶ面」の情報密度を保つため
   （多数のキャラを一目で見渡す既存のグリッドを崩さない選択＝流れる行1列ではなく、
   枠/影/角丸だけを抜いた素のグリッド）。 */
.chara-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  text-align: center;
  padding: 1.25rem 0.75rem;
  min-height: 90px;
  background: var(--nb-card);
  border: 0;
  border-radius: 0;
  box-shadow: none;
  text-decoration: none;
  color: var(--nb-text);
  transition: background 0.15s, color 0.15s;
}
.chara-card:hover {
  background: color-mix(in srgb, var(--fire) 14%, var(--nb-card));
  text-decoration: none;
}
.chara-card-name {
  font-weight: 900;
  font-size: var(--fs-note, 14px);
  margin-bottom: 0.4rem;
  overflow-wrap: break-word;
  word-break: break-word;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  color: var(--nb-text);
  letter-spacing: -0.005em;
}
/* 🔴 I-44＝決まり0（件数は情報であって強調ではない・明るい地の橙文字はコントラスト不足）。 */
.chara-card-count {
  font-size: var(--fs-note, 14px);
  color: var(--nb-text);
  font-weight: 800;
}
.chara-note {
  color: var(--ink-60);
  font-size: var(--fs-note);
  margin-top: var(--space-sm);
}
.chara-note a { margin-left: 0.5rem; }

/* 🔴 WO-078・#26＝隠れ里ごとのグルーピング（src/data/character-villages.ts と対） */
.village-section { margin-bottom: var(--space-lg); }
.village-title {
  font-size: var(--fs-sec, 24px);
  border-bottom: 1px solid var(--hair);
  padding-bottom: 0.4rem;
  margin-bottom: 1rem;
}
.village-group { margin-bottom: 1.25rem; }
.village-group-title {
  font-size: var(--fs-sub, 20px);
  color: var(--ink-80);
  margin-bottom: 0.6rem;
}

/* ============ 関連体験談（詳細ページ） ============ */
.related-stories {
  margin-top: var(--space-md);
  padding-top: var(--space-md);
  border-top: 1px solid var(--color-border);
}
.related-stories-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--ink-60);
  margin-bottom: 1.25rem;
}
.related-stories-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1.25rem;
}

/* ============ トースト通知 ============ */
.share-toast {
  position: fixed;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%) translateY(0.75rem);
  background: #333;
  color: #fff;
  padding: 0.8rem 1.4rem;
  border-radius: var(--r-card);
  font-size: var(--fs-note);
  line-height: 1.6;
  text-align: center;
  white-space: pre-line;
  opacity: 0;
  transition: opacity 0.3s, transform 0.3s;
  z-index: 9999;
  max-width: min(360px, 90vw);
  pointer-events: none;
  box-shadow: var(--shadow-lg);
}
.share-toast--visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ============ 投稿完了ページ ============ */
.thanks-box {
  text-align: center;
  padding: var(--space-lg) var(--space-md);
  max-width: 480px;
  margin: 0 auto;
}
/* 🔴 決まり0（2026-09-08）＝オレンジの面の上は墨 */
.thanks-check {
  width: 72px;
  height: 72px;
  border-radius: var(--r-tile);
  background: var(--fire);
  color: var(--ink);
  font-size: 2rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--space-md);
  box-shadow: var(--elev-tile);
}
.thanks-box h2 {
  font-weight: 900;
  color: var(--nb-text);
  font-size: var(--fs-sec);
  margin-bottom: var(--space-sm);
  letter-spacing: -0.005em;
}
.thanks-box p {
  color: var(--ink-80);
  line-height: var(--line-height);
  margin-bottom: 0.5rem;
}

/* ============ ガイドラインページ ============ */
.guidelines-article {
  padding: var(--space-lg) 0;
}

.guidelines-inner {
  /* 本文エリア幅をトップ基準 --max-width(1280) に統一＝ヒーロー/他ページと揃える
     （guidelines・about・privacy が共用・owner 2026-06-07）。旧 --max-width-text(720) は狭く見えた。 */
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--space-md);
}

/* セクション間の縦リズムを一定に統一（破線/padding-bottom を撤去し margin だけに・owner 2026-06-07）。
   見出し箱・カード・グレーバーが既に区切りになるため破線は不要。 */
/* 本文は guidelines-inner(1280・中央寄せ・左右対称) いっぱいに＝全ページと幅統一・右の空き解消（owner 2026-06-07）。 */
.gl-section {
  margin-bottom: var(--space-lg);
  color: var(--ink-80);
}

/* 本文セクション見出し＝黒抜きの長方形ボックス。BORUTO「話数を選ぶ」と同一スタイルに揃える
   ＝文字幅にフィット・左寄せ（min-width/中央寄せはやめる・owner 2026-06-08）。 */
/* 🔴【WO-rv2-A・320px是正・2026-09-08・PM裁定／lane D root-cause】display:inline-block
   の width:auto は「文字列の外側にはみ出さない最小幅」まで縮まない場合がある——13字の
   「プライバシーポリシーの変更」がbody既定の word-break:keep-all（:386-387）で改行点を
   持たない1トークンになり、min-content=max-content=338px が 288px のコンテンツ幅を
   突き破っていた（/privacy/ 320px・33.5pxオーバーフロー）。overflow-wrap:break-wordは
   既に縮んだ箱の中でしか働かないので、まず shrink-to-fit をコンテナ幅で頭打ちにする
   max-width が要る。 */
/* 🔴【WO-137・2026-09-26・椿さん その17】見出しの札は直角の四角（角丸にしない）。
   逐語＝「見出しのボックスが角丸四角になってる。直角の四角が規定だと思います。」
   決まり＝vault 02_design/09_design-tokens.md（章の見出しの札は四角・2026-09-22）。手本＝.an2-chapters-day と .story-detail .story-section h2。
   ⚠️ 色は #fff／--ink の直書きではなく役割の札（--nb-text 地・--nb-surface 文字）＝暗い表示で反転する。
   ⚠️ 同じ規則が プライバシーポリシー・このサイトについて・アプリの入れ方・データのページの見出しにも当たる（どれも四角になる）。 */
.gl-section h2 {
  font-size: var(--fs-sec, 24px);
  font-weight: 900;
  line-height: 1.3;
  color: var(--nb-surface);
  background: var(--nb-text);
  padding: 0.34rem 0.9rem;
  margin-bottom: var(--space-sm);
  display: inline-block;
  max-width: 100%;
  letter-spacing: -0.005em;
}

.gl-section p, .gl-section li {
  line-height: 1.9;
  margin-bottom: 0.5rem;
}

.gl-section ul, .gl-section ol {
  padding-inline-start: 1.5em;
}

/* .gl-section--warning / .gl-section--image は未使用のため削除（owner 2026-06-10 ガイドライン後片付け）。
   現用の派生は .gl-section--cta（about）のみ。 */

/* ============ About ページ ============ */
.about-quote {
  font-size: var(--fs-body);
  font-weight: 900;
  line-height: 1.75;
  background: var(--scroll-deep);
  border-inline-start: 4px solid var(--fire);
  padding: 0.85rem 1rem;
  padding-inline-start: 1.1rem;
  margin-bottom: 1.5rem;
  color: var(--nb-text);
}

/* ── About: サイトの歩き方カードリスト（C-4・2026-06-13 site-audit）／会員ランク（C-5） ── */
.about-guide .guide-list {
  list-style: none;
  padding: 0;
  margin: var(--space-sm) 0 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: 0.75rem;
}
.about-guide .guide-list li { margin: 0; }
.about-guide .guide-list a {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  height: 100%;
  padding: 0.85rem 1rem;
  background: var(--scroll-deep);
  border-radius: var(--r-card);
  box-shadow: var(--elev-1);
  text-decoration: none;
  color: var(--nb-text);
  transition: box-shadow 0.12s ease, transform 0.12s ease;
}
.about-guide .guide-list a:hover {
  box-shadow: var(--elev-2);
  transform: translate(-1px, -1px);
}
.about-guide .guide-name { font-weight: 900; font-size: var(--fs-body); color: var(--nb-text); }
.about-guide .guide-desc { font-size: var(--fs-note); line-height: 1.6; color: var(--ink-80); }
.rank-list { padding-inline-start: 1.2em; }
.rank-list li { line-height: 1.85; margin-bottom: 0.3rem; }

.gl-section--cta {
  border-bottom: none;
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  align-items: center;
  padding-top: var(--space-sm);
}

/* 操作・注意の留意点ノート＝二次情報ゆえ中立グレー（業務連絡色）＋長方形（暖色タン/角丸は浮くため・owner検証 2026-06-07） */
.gl-note {
  font-size: var(--fs-note);
  color: var(--ink-80);
  background: var(--util-bg);
  border-inline-start: 3px solid var(--ink-60);
  padding: 0.75rem 1rem;
  border-radius: 0;
  margin-top: var(--space-sm);
}

.gl-cta {
  text-align: center;
  padding-top: var(--space-md);
}
/* 🔴【WO-132】真ん中の案内の段落＝箱を文字の幅に縮めて真ん中へ（中の文字は左から・本文の決まりは global.css の body の直後）。 */
.gl-cta p { margin-bottom: var(--space-sm); color: var(--ink-80); width: fit-content; max-width: 100%; margin-inline: auto; }

/* ── ガイドライン: OK/NG カード ＆ 折りたたみポリシー（2026-06-07 ノンバーバルUX #4） ── */
.gl-okng-section { border-bottom: none; }
.gl-okng {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-md);
  margin-top: var(--space-sm);
}
/* 🔴【WO-137】「投稿できない内容」だけの節は1列（「投稿できる内容」の枠を外したので、半分が空かないように）。 */
.gl-okng--single { grid-template-columns: minmax(0, 1fr); }
/* 🔴【WO-137】OK／NG の箱も直角（決まり＝角丸は押せるものと丸いものだけ・09_design-tokens §4）。 */
.gl-card {
  background: var(--nb-card);
  border: 1px solid var(--ink-20);
  padding: var(--space-md);
  box-shadow: none;
  min-width: 0;
  overflow-wrap: anywhere;
}
/* OK は信号緑を使わずブランド主役の墨で（緑は他に無く非整合＋白文字AA不足のため・UI監修2026-06-07）。NG=朱赤。 */
/* OK/NG は地色tintを廃し白に統一＝色数削減・枠とバッジで区別（レビュー#2・2026-06-07） */
.gl-card--ok { border-color: var(--ink); background: var(--nb-card); }
.gl-card--ng { border-color: var(--accent); background: var(--nb-card); }
.gl-card-head { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.7rem; }
.gl-card-head h2, .gl-card-head h3 {
  font-size: var(--fs-sub); font-weight: 900; color: var(--nb-text);
  margin: 0; padding: 0; border: none; background: none; display: inline; letter-spacing: -0.005em;
}
.gl-badge {
  flex: none; font-weight: 900; font-size: var(--fs-mini); letter-spacing: .06em;
  color: #fff; padding: 2px 11px; border-radius: var(--r-pill); line-height: 1.5;
}
.gl-badge--ok { background: var(--ink); }
/* 朱(--accent)地は白文字3.94:1・墨文字4.42:1のどちらもAA未達（実測・2026-09-09）
   →地を危険操作の色（--vermilion・単一定義で明暗固定）へ。白文字で9.12:1 */
.gl-badge--ng { background: var(--vermilion); color: #fff; }
.gl-card ul { padding-inline-start: 1.3em; margin: 0; }
.gl-card li { line-height: 1.8; margin-bottom: 0.3rem; }

/* 折りたたみポリシー＝アコーディオン見出しバー（小見出し＋開閉できる行と一目で分かるように・owner 2026-06-07）。
   淡グレー地のバー＋左シェブロン(▸→▾)。全バー左端 x=0 で整列。中身は全保持。 */
.gl-policy { border-bottom: none; padding-bottom: 0; margin-bottom: var(--space-sm); }
/* OK/NGカード直下の折りたたみ（画像の投稿手順）が詰まらないよう上に余白（owner 2026-06-07） */
.gl-okng + .gl-policy { margin-top: var(--space-md); }
.gl-policy > summary {
  cursor: pointer; list-style: none;
  display: flex; align-items: center; gap: 0.55rem;
  padding: 0.7rem 0.9rem; min-height: var(--tap);
  background: var(--util-bg);
  border: 1px solid var(--ink-20);
}
.gl-policy > summary::-webkit-details-marker { display: none; }
.gl-policy > summary::before {
  content: ""; flex: none;
  width: 8px; height: 8px;
  border-right: 2.5px solid var(--ink); border-bottom: 2.5px solid var(--ink);
  transform: rotate(-45deg); transition: transform 0.2s;   /* 閉=▸ */
}
.gl-policy[open] > summary::before { transform: rotate(45deg); }   /* 開=▾ */
.gl-policy > summary:hover { background: #e9e8e3; }
.gl-policy > summary:hover::before { border-color: var(--fire); }
.gl-policy > summary h2, .gl-policy > summary h3, .gl-policy-title {
  font-size: var(--fs-sub, 20px); font-weight: 900; color: var(--nb-text);
  margin: 0; padding: 0; border: none; background: none;
  /* flex内で .gl-section h2 の min-width:13rem/text-align:center を拾わないよう明示的に打ち消す（左揃え・owner 2026-06-07） */
  display: inline; min-width: 0; text-align: left; letter-spacing: -0.005em;
}
.gl-policy-body { padding: 0.7rem 0.9rem 0.2rem; color: var(--ink-80); }
.gl-policy-body ul, .gl-policy-body ol { padding-inline-start: 1.5em; }

@media (max-width: 640px) {
  .gl-okng { grid-template-columns: 1fr; }
  /* カード内パディングを縮小（space-md=32px は小画面で本文を圧迫・モバイルレビュー2026-06-07） */
  .gl-card { padding: 1.1rem 1rem; }
}

/* ============ 投稿ページ ============ */
.submit-section {
  padding: var(--space-lg) 0;
}

.submit-inner {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 var(--space-md);
}

.pre-submit-check {
  background: var(--nb-card);
  border-inline-start: 5px solid var(--fire);
  border-radius: var(--r-card);
  padding: var(--space-md);
  margin-bottom: var(--space-lg);
  box-shadow: var(--elev-2);
}

.pre-submit-check h2 {
  font-size: var(--fs-sub);
  font-weight: 700;
  margin-bottom: var(--space-sm);
}

.checklist {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.checklist li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  line-height: 1.6;
}

.check-icon {
  flex-shrink: 0;
  font-size: 1.1rem;
}

.form-embed-wrapper {
  margin-bottom: var(--space-md);
}

/* Googleフォームのiframe高さ。フォームの設問を大幅に変更した場合はここを更新してください */
.form-embed-wrapper iframe {
  display: block;
  width: 100%;
  height: 3200px;
  border: none;
}

/* フォームURL未設定時のプレースホルダー */
.form-placeholder {
  background: var(--nb-card);
  border: 2px dashed var(--ink-40);
  border-radius: var(--r-card);
  padding: var(--space-lg);
  text-align: center;
}

.form-placeholder-icon {
  font-size: 3rem;
  margin-bottom: var(--space-sm);
}

.form-placeholder h3 {
  font-size: var(--fs-sub);
  margin-bottom: var(--space-sm);
}

.form-placeholder ol {
  text-align: start;
  display: inline-block;
  padding-inline-start: 1.5em;
  margin: var(--space-sm) 0;
}
.form-placeholder li { margin-bottom: 0.5rem; line-height: 1.7; }

.form-placeholder code {
  background: var(--scroll-deep);
  padding: 0.1em 0.4em;
  border-radius: 3px;
  font-family: monospace;
  font-size: 0.9em;
  color: var(--nb-text);
}

.placeholder-note {
  font-size: var(--fs-note);
  color: var(--ink-60);
  margin-top: var(--space-sm) !important;
}

.submit-guideline-link {
  text-align: center;
  font-size: var(--fs-note);
  color: var(--ink-60);
  margin-top: var(--space-md);
}

/* 旧 Footer (.site-footer, .footer-inner, .footer-logo, .logo-mark-small,
   .footer-nav, .footer-note) は v3 Footer (.foot) に置換済みのため撤去。*/

/* ============ レスポンシブ ============ */
@media (max-width: 640px) {
  .section-inner,
  .story-detail-inner, .guidelines-inner, .submit-inner { padding: 0 var(--space-sm); }

  .mp-list { grid-template-columns: minmax(0, 1fr); }

  .story-share { flex-direction: column; align-items: flex-start; }
  .btn-x-share, .btn-ig-share { width: 100%; justify-content: center; }

  .story-nav { flex-direction: column; }
  .story-nav .btn { width: 100%; text-align: center; }

  .section-header { flex-direction: column; gap: 0.5rem; }
}

/* ============ 言語切り替え ============ */
.lang-switcher {
  position: relative;
  display: inline-block;
}

.lang-switcher-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: 1.5px solid var(--ink-20);
  border-radius: var(--r-pill);
  padding: 0.35rem 0.75rem;
  font-size: var(--fs-note);
  font-family: var(--font-body);
  cursor: pointer;
  min-height: var(--tap);
  white-space: nowrap;
  transition: border-color 0.22s, color 0.22s;
}
.lang-switcher-btn:hover { border-color: var(--ink); }

/* 開閉のしるし。閉じているとき ▾ / 開いているとき ▴ で状態も伝える。 */
.lang-caret {
  flex-shrink: 0;
  transition: transform 0.22s;
}
.lang-switcher-btn[aria-expanded='true'] .lang-caret { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) {
  .lang-caret { transition: none; }
}

.lang-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  background: var(--nb-card);
  border-radius: var(--r-card);
  box-shadow: var(--elev-2);
  min-width: 140px;
  z-index: 200;
  list-style: none;
  padding: 0.4rem 0;
}
.lang-menu li a {
  display: block;
  padding: 0.5rem 1rem;
  font-size: var(--fs-note);
  color: var(--nb-text);
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.15s;
}
.lang-menu li a:hover { background: var(--scroll); color: var(--fire); }
.lang-menu li[aria-selected="true"] a {
  color: var(--fire);
  font-weight: 800;
}

/* ============ 翻訳ノーティス ============ */
.translation-notice {
  font-size: var(--fs-note);
  color: var(--ink-60);
  margin-top: 0.5rem;
  font-style: italic;
}
.translation-notice--translated { color: var(--fire); }

/* ============ 投稿フォームの言語ノート ============ */
.submit-lang-note {
  background: var(--fire-soft);
  border-inline-start: 3px solid var(--fire);
  padding: 0.75rem 1rem;
  border-radius: var(--r-card);
  font-size: var(--fs-note);
  margin-bottom: 1rem;
}

/* ============ RTL (Arabic) ============ */
[dir="rtl"] .site-nav { margin-left: 0; }
[dir="rtl"] .lang-menu { right: auto; left: 0; }
[dir="rtl"] .breadcrumb { direction: rtl; }
[dir="rtl"] .story-nav { flex-direction: row-reverse; }
[dir="rtl"] .filter-toolbar { flex-direction: row-reverse; }
[dir="rtl"] .filter-toolbar-right { flex-direction: row-reverse; }
[dir="rtl"] .footer-nav { text-align: right; }
[dir="rtl"] .hero-actions { flex-direction: row-reverse; }
@media (max-width: 640px) {
  [dir="rtl"] .hero-actions { flex-direction: column; }
  [dir="rtl"] .story-nav { flex-direction: column; }
}

/* ============ v3 RTL — box-shadow X 反転 + SVG 反転 ============ */
/* 物理 box-shadow にしか宿らない X 軸方向のオフセットを RTL で反転する。
   論理プロパティが存在しないため override で対応。 */

/* Buttons — 共通
   🔴 D-7a（2026-09-08）＝.btn-primary/.btn-outline 基底はコマ割り影を撤去したので、この
   RTLミラーも一緒に外す（片方だけ残すとRTLだけ影が残る）。 */
[dir="rtl"] .btn-random { box-shadow: var(--elev-1); }
[dir="rtl"] .btn-random:hover { box-shadow: var(--elev-2); }
[dir="rtl"] .filter-btn.active { box-shadow: var(--elev-2); }

/* カード／パネル類 */
[dir="rtl"] .pre-submit-check,
[dir="rtl"] .calendar-month,
[dir="rtl"] .image-hint,
[dir="rtl"] .lang-menu { box-shadow: var(--elev-2); }
[dir="rtl"] .thanks-box { box-shadow: var(--elev-2); }
/* 🔴 設計シート監査是正・2026-09-08＝.fav-item本体（1657行）からカードの影を撤去したため、
   RTL版だけ影が残らないよう、ここのミラー規則も削除した（影そのものが無くなったため対称形も不要）。 */

/* p100 */
[dir="rtl"] .p100-bar-track { box-shadow: var(--elev-1); }
[dir="rtl"] .p100-why-card { box-shadow: var(--elev-2); }
[dir="rtl"] .p100-why-card:hover { box-shadow: var(--elev-float); }
[dir="rtl"] .p100-why-card--highlight { box-shadow: var(--elev-2); }
[dir="rtl"] .p100-why-card--highlight:hover { box-shadow: var(--elev-float); }
[dir="rtl"] .p100-participant-link:hover .p100-participant-avatar { box-shadow: var(--elev-tile); }

/* p100 / homepage 共通 CTA ボタン
   🔴 D-7a（2026-09-08）＝.cta-fire 配下のボタンはコマ割り影を撤去したのでRTLミラーも外す。
   .cta-cta は今回触っていないのでそのまま残す。 */
[dir="rtl"] .cta-cta { box-shadow: var(--elev-float); }
[dir="rtl"] .cta-cta:hover { box-shadow: var(--elev-float); }

/* Hero / Mission / Header */
/* 🔴 `.brand-mark` の影は 2026-09-23 に外した（印が絵になった）＝上書きする影が無いので削除。 */
[dir="rtl"] .header-cta:hover { box-shadow: var(--elev-float); }
[dir="rtl"] .hero-eyebrow { box-shadow: var(--elev-1); }
[dir="rtl"] .hero-sub .q { box-shadow: var(--elev-1); }
[dir="rtl"] .type-caret { box-shadow: var(--elev-1); }
[dir="rtl"] .panel { box-shadow: var(--elev-2); }
[dir="rtl"] .panel:hover { box-shadow: var(--elev-float); }
[dir="rtl"] .rank-frame { box-shadow: var(--elev-2); }
[dir="rtl"] .here-flag,
[dir="rtl"] .mission-goal-mark { box-shadow: var(--elev-1); }

/* mp（VoiceCard / StoryCard） */
[dir="rtl"] .mp { box-shadow: var(--elev-2); }
[dir="rtl"] .mp:hover { box-shadow: var(--elev-float); }
/* 🔴 【WO-026【5】・H04・2026-08-16】.mp-thumb は VoiceCard.astro が今も使っている（この行の見出しの
   とおり mp は2部品の共有語彙）＝StoryCard.astro だけを直す今回は消さない。
   ⚠️ **一度削除して VoiceCard の絵を壊しかけた**（同じクラス名を StoryCard 専用だと思い込んだ）。
   ⭐ StoryCard 側の新デザインは別名 .mp-photo を名乗って共存させた（下）。 */
[dir="rtl"] .mp-thumb { box-shadow: var(--elev-tile); }

/* All-link（一覧 / 関連 stories） */
[dir="rtl"] .all-link { box-shadow: var(--elev-2); }
[dir="rtl"] .all-link:hover { box-shadow: var(--elev-float); }

/* story-detail
   🔴 D-7a（2026-09-08）＝action-btn・story-cta の主ボタン・story-nav-actions の主/副ボタンは
   コマ割り影を撤去したのでRTLミラーも外す。story-detail-inner・like-cta・affiliate-link・
   prev-next-link は今回触っていないのでそのまま残す。 */
[dir="rtl"] .story-detail .story-detail-inner { box-shadow: none; }
[dir="rtl"] .story-detail .story-image img { box-shadow: var(--elev-tile); }
[dir="rtl"] .story-detail .like-cta { box-shadow: var(--elev-2); }
[dir="rtl"] .story-detail .like-cta-link:hover { box-shadow: var(--elev-float); }
[dir="rtl"] .story-detail .affiliate-link:hover { box-shadow: var(--elev-2); }
[dir="rtl"] .story-detail .story-prev-next .prev-next-link:hover { box-shadow: var(--elev-1); }

/* SVG: チャクラ線の流れを反転（flowing アニメーションも自動反転） */
[dir="rtl"] .chakra-lines { transform: scaleX(-1); }

/* mobile breakpoint 内の v3 影 */
@media (max-width: 720px) {
  /* 🔴 `.brand-mark` の影は 2026-09-23 に外した（印が絵になった）＝上書きする影が無いので削除。 */
  [dir="rtl"] .mp { box-shadow: var(--elev-2); }
  [dir="rtl"] .story-detail .story-detail-inner { box-shadow: none; }
}

/* ── 回遊性機能 ── */

/* わかる！& お気に入りボタン */
/* .story-engagement / .btn-like / .btn-favorite は .story-actions / .action-btn に統合済み */

/* 前後ナビ */
.story-prev-next {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}
.prev-next-link {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--fire);
  text-decoration: none;
  font-size: var(--fs-note);
  font-weight: 600;
  max-width: 45%;
  overflow: hidden;
}
.prev-next-link:hover {
  text-decoration: none;
}
.prev-next-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.prev-next-arrow {
  flex-shrink: 0;
}
.story-nav-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
}

/* お気に入りページ */
.favorites-section { padding: 3rem 0 5rem; min-height: 50vh; }
.favorites-inner { max-width: 720px; margin: 0 auto; padding: 0 var(--space-md); }
.favorites-empty { text-align: center; color: var(--ink-60); padding: 3rem 0; }
/* 🔴【設計シート監査是正・2026-09-08・PM裁定】フィード行（1件1行の並び）に枠+角丸+影の
   カード仕立てを与えていた。news.astro の .news-item（正しい実装・6396行）と同じ形へ＝
   枠なし・角丸なし・影なし・仕切り線1本だけ。第三の亜種を作らず、その形をそのまま写す。 */
.fav-item {
  display: block;
  text-decoration: none;
  color: var(--nb-text);
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid var(--nb-hairline);
}
.fav-item:hover {
  text-decoration: none;
  color: var(--nb-text);
}
.fav-item-meta { margin-bottom: 0.5rem; }
.fav-item-catchphrase {
  font-size: var(--fs-sub);
  font-weight: 900;
  color: var(--nb-text);
  margin: 0 0 0.5rem;
  quotes: none;
  letter-spacing: -0.005em;
}
.fav-item-name { font-size: var(--fs-note); color: var(--ink-60); margin: 0; }

/* ========== Calendar Page ========== */
/* 🔴【設計シート監査・保持の裁定・2026-09-08・PM】カレンダーの5つの催しの種別（実イベント／
   出典イベント／作中／誕生日キャラ／誕生日声優）は、この意味を持つ役割トークン（--fire・--ink等）
   が存在しない＝5色に潰すとこのページの存在理由である区別が消える。裸の16進値のまま複数箇所へ
   ばら撒くのをやめ、ここ1か所の名前つきカスタムプロパティへまとめる（次に変える人が15個の
   直書きを探し回らずに済む）。値そのものは変えていない。 */
:root {
  /* 🔴🔴【2026-09-10・c0のコントラスト監査で発見・是正・要オーナー実機確認】
     `--cal-real-fg` #e65100 on `--cal-real-bg` #fff3e0＝比 3.46（基準4.5に届かない）。
     6,234か所（/calendar/ 全体＋凡例）。**色相は変えず明度だけ落とす**（ブランドの朱系統を保つ・
     灰へ逃がさない・地は据え置き＝これ以上薄い chip に見えなくなるほど明るくしない）。
     HSL で色相・彩度を固定したまま明度を段階的に下げ、比 4.83（実測・余裕あり）で止めた値。
     旧 #e65100 → 新 #bd4300（改稿前 vs 改稿後・オーナーに実機で見てもらってから確定）。 */
  --cal-real-bg: #fff3e0;      --cal-real-fg: #bd4300;      --cal-real-border: #ffcc80;
  --cal-event-bg: #f3e5f5;     --cal-event-fg: #7b1fa2;     --cal-event-border: #ce93d8;
  --cal-event-both-fg: #4a148c; /* .event-series--both（実+出典の両方）専用の濃い紫 */
  --cal-inuniverse-bg: #e8eaf6; --cal-inuniverse-fg: #283593; --cal-inuniverse-border: #9fa8da;
  --cal-birthday-char-bg: #fce4ec; --cal-birthday-char-fg: #880e4f; --cal-birthday-char-border: #f48fb1;
  --cal-birthday-va-bg: #e8f5e9;   --cal-birthday-va-fg: #1b5e20;   --cal-birthday-va-border: #a5d6a7;
}
.calendar-today-section {
  background: var(--ink);
  padding: 2rem 0;
  margin-bottom: 2rem;
  color: #fff;
  border-bottom: 4px solid var(--fire);
}
.today-heading {
  font-size: var(--fs-sub, 20px);
  font-weight: 900;
  margin-bottom: 1rem;
  color: #fff;
  letter-spacing: -0.005em;
}
.today-events-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.today-event {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.today-event-title {
  font-weight: 600;
  font-size: var(--fs-body);
}
.today-event-year {
  font-size: var(--fs-note, 14px);
  opacity: 0.75;
}

.calendar-legend {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-bottom: 2rem;
  padding: 1rem;
  background: var(--scroll-deep);
  border: 1.5px solid var(--ink-20);
  border-radius: var(--r-card);
}
.legend-item {
  font-size: var(--fs-mini);
  font-weight: 700;
  padding: 0.25rem 0.75rem;
  border-radius: var(--r-pill);
}
.legend-real { background: var(--cal-real-bg); color: var(--cal-real-fg); border: 1px solid var(--cal-real-border); }
.legend-event { background: var(--cal-event-bg); color: var(--cal-event-fg); border: 1px solid var(--cal-event-border); }
.legend-inuniverse { background: var(--cal-inuniverse-bg); color: var(--cal-inuniverse-fg); border: 1px solid var(--cal-inuniverse-border); }
.legend-birthday-char { background: var(--cal-birthday-char-bg); color: var(--cal-birthday-char-fg); border: 1px solid var(--cal-birthday-char-border); }
.legend-birthday-va { background: var(--cal-birthday-va-bg); color: var(--cal-birthday-va-fg); border: 1px solid var(--cal-birthday-va-border); }

.calendar-container {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  margin-bottom: 3rem;
}
.calendar-month {
  background: var(--nb-card);
  border-radius: var(--r-card);
  overflow: hidden;
  box-shadow: none;
}
.calendar-month-heading {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.25rem;
  background: var(--ink);
  color: #fff;
  font-size: var(--fs-sub);
  font-weight: 900;
  margin: 0;
  border-bottom: 3px solid var(--fire);
  letter-spacing: -0.005em;
}
.month-number {
  font-size: var(--fs-sec, 24px);
  font-weight: 900;
  line-height: 1;
  color: var(--fire);
  letter-spacing: -0.02em;
}
.month-label {
  font-size: var(--fs-note, 14px);
  color: #fff;
  font-weight: 700;
}
.month-count {
  margin-left: auto;
  font-size: var(--fs-mini);
  background: rgba(255,255,255,0.2);
  padding: 0.1rem 0.5rem;
  border-radius: var(--r-pill);
}
.calendar-empty {
  padding: 1rem 1.25rem;
  color: var(--ink-60);
  font-size: var(--fs-note);
  margin: 0;
}
.calendar-events {
  list-style: none;
  margin: 0;
  padding: 0;
}
.calendar-event {
  display: flex;
  gap: 1rem;
  padding: 0.875rem 1.25rem;
  border-bottom: 1px dashed var(--ink-20);
  align-items: flex-start;
}
.calendar-event:last-child { border-bottom: none; }
.calendar-event--real { border-left: 3px solid var(--cal-real-fg); }
.calendar-event--event { border-left: 3px solid var(--cal-event-fg); }
.calendar-event--inuniverse { border-left: 3px solid #3949ab; }
.calendar-event--birthday_char { border-left: 3px solid #c2185b; }
.calendar-event--birthday_va { border-left: 3px solid #388e3c; }

.event-date {
  min-width: 2.5rem;
  text-align: center;
  flex-shrink: 0;
  padding-top: 0.1rem;
}
.event-day {
  font-size: var(--fs-sec, 24px);
  font-weight: 900;
  color: var(--nb-text);
  line-height: 1;
  display: block;
  letter-spacing: -0.02em;
}
.event-day-label {
  font-size: var(--fs-mini, 12px);
  color: var(--ink-60);
  font-weight: 700;
  letter-spacing: .06em;
}
.event-body {
  flex: 1;
  /* 🔴 これが無いとスマホでイベント名が右端で切れる（実測 21 か所・最大 524px）。
     理由は 404 ページと同じ＝和文が改行できず最小幅が膨らみ、Flex の子は既定で縮まないため。
     0 にすると中身が折り返せるようになり、badge / title / desc が素直に段落ちする。 */
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
}
.event-badge {
  font-size: var(--fs-mini, 12px);
  letter-spacing: .06em;
  font-weight: 700;
  padding: 0.15rem 0.5rem;
  border-radius: var(--r-pill);
  flex-shrink: 0;
}
.event-badge--real { background: var(--cal-real-bg); color: var(--cal-real-fg); }
.event-badge--event { background: var(--cal-event-bg); color: var(--cal-event-fg); }
.event-badge--inuniverse { background: var(--cal-inuniverse-bg); color: var(--cal-inuniverse-fg); }
.event-badge--birthday_char { background: var(--cal-birthday-char-bg); color: var(--cal-birthday-char-fg); }
.event-badge--birthday_va { background: var(--cal-birthday-va-bg); color: var(--cal-birthday-va-fg); }

.event-series {
  font-size: var(--fs-mini);
  font-weight: 700;
  padding: 0.15rem 0.5rem;
  border-radius: var(--r-pill);
  flex-shrink: 0;
}
.event-series--naruto { background: #fff8e1; color: #f57f17; }
.event-series--boruto { background: #e3f2fd; color: #0d47a1; }
.event-series--both { background: var(--cal-event-bg); color: var(--cal-event-both-fg); }

.event-title {
  width: 100%;
  font-size: var(--fs-body);
  font-weight: 800;
  color: var(--nb-text);
  margin: 0;
  line-height: 1.5;
}
.event-year {
  width: 100%;
  font-size: var(--fs-note, 14px);
  color: var(--ink-60);
  margin: 0;
  font-weight: 600;
}
.event-desc {
  width: 100%;
  font-size: var(--fs-note, 14px);
  color: var(--ink-60);
  margin: 0.25rem 0 0;
  line-height: 1.6;
}
.calendar-note {
  font-size: var(--fs-note, 14px);
  color: var(--ink-60);
  line-height: 1.8;
  margin-bottom: 3rem;
}

/* ========== Image hint (submit page) ========== */
.image-hint {
  border-radius: var(--r-card);
  background: var(--scroll-deep);
  margin-bottom: 1.5rem;
  box-shadow: var(--elev-1);
}
.image-hint summary {
  padding: 0.875rem 1rem;
  cursor: pointer;
  font-weight: 800;
  font-size: var(--fs-note);
  min-height: var(--tap);
  color: var(--nb-text);
  list-style: none;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.image-hint summary::-webkit-details-marker { display: none; }
.image-hint[open] summary { border-bottom: 1.5px solid var(--ink-40); }
.image-hint-body {
  padding: 1rem 1.25rem;
  font-size: var(--fs-note);
  line-height: 1.8;
}
.image-hint-body ol {
  margin: 0.5rem 0 1rem 1.25rem;
}
.image-hint-note {
  font-size: var(--fs-note);
  color: var(--ink-60);
  margin-top: 0.5rem;
}

/* ========== Guidelines steps ========== */
.gl-steps {
  margin: 0.75rem 0 1rem;
  padding-inline-start: 1.25rem;
  line-height: 1.9;
}
.gl-steps li {
  margin-bottom: 0.5rem;
}

/* ========== Guidelines positive note ========== */
/* 💛 友好的な一言＝暖色は意図的に維持・長方形のみ適用（owner検証 2026-06-07） */
.gl-positive-note {
  background: var(--scroll-deep);
  border-inline-start: 4px solid var(--fire);
  border-radius: 0;
  padding: 0.875rem 1rem;
  font-size: var(--fs-note);
  line-height: 1.75;
  margin: 0 0 var(--space-sm);
  color: var(--ink-80);
}

/* ========== Image hint URL example ========== */
.image-hint-url-example {
  background: var(--nb-card);
  border: 1.5px solid var(--ink-20);
  border-radius: var(--r-card);
  padding: 0.875rem 1rem;
  margin: 0.75rem 0;
  font-size: var(--fs-note);
  line-height: 1.8;
}
.image-hint-url-example code {
  background: var(--scroll-deep);
  padding: 0.1rem 0.35rem;
  border-radius: 3px;
  font-family: monospace;
  font-size: 0.8rem;
  word-break: break-all;
}
.image-hint-url-ok { color: #2e7d32; }
.image-hint-url-ng { color: #c62828; }
.image-hint-url-tip { color: var(--fire); margin-top: 0.5rem; }

/* ============ データページ ============ */
.data-page .page-subtitle {
  color: var(--ink-60);
  font-size: var(--fs-body);
  margin-top: 0.5rem;
}

.data-section h2::after { content: none; }

.data-note {
  font-size: var(--fs-note);
  color: var(--ink-60);
  margin-bottom: 1.25rem;
}

/* 🔴【設計シート監査・保持の裁定・2026-09-08・PM】年代層の内訳ドーナツは6区分を色で見分けさせる
   のが目的で、6区分ぶんの意味を持つ役割トークンが存在しない＝2色（--fire・--ink）へ潰すと
   区別できなくなる。裸の16進値のまま data.astro に直書きしていたのをやめ、ここ1か所の
   名前つきカスタムプロパティへまとめる。値そのものは変えていない（1番目は--fireと同値）。 */
:root {
  --data-donut-1: #FF7601;
  --data-donut-2: #f5a623;
  --data-donut-3: #4a9eff;
  --data-donut-4: #a855f7;
  --data-donut-5: #22c55e;
  --data-donut-6: #94a3b8;
}

/* ドーナツグラフ */
.donut-wrap {
  display: flex;
  align-items: center;
  gap: 2.5rem;
  flex-wrap: wrap;
}

.donut {
  width: 180px;
  height: 180px;
  border-radius: 50%;
  flex-shrink: 0;
  position: relative;
}

.donut-hole {
  position: absolute;
  inset: 30px;
  background: var(--nb-card);
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 1.5px solid var(--ink-20);
}

.donut-total {
  font-size: var(--fs-page, 32px);
  font-weight: 900;
  color: var(--nb-text);
  line-height: 1;
  letter-spacing: -0.02em;
}

.donut-label-sm {
  font-size: var(--fs-mini);
  color: var(--ink-60);
}

.donut-legend {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.donut-legend li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--fs-note, 14px);
}

.legend-dot {
  width: 12px;
  height: 12px;
  border-radius: var(--r-tile);
  flex-shrink: 0;
}

.legend-name {
  flex: 1;
  font-weight: 700;
  color: var(--ink-80);
}

.legend-count {
  color: var(--ink-60);
  font-size: var(--fs-note, 14px);
  font-weight: 700;
}

/* 棒グラフ */
.bar-chart {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.bar-row {
  display: grid;
  grid-template-columns: 10rem 1fr 2.5rem;
  align-items: center;
  gap: 0.75rem;
}

.bar-label {
  font-size: var(--fs-note);
  line-height: 1.4;
  color: var(--nb-text);
  font-weight: 700;
}

.bar-track {
  background: var(--scroll-deep);
  border: 1.5px solid var(--ink-20);
  border-radius: var(--r-pill);
  height: 18px;
  overflow: hidden;
}

.bar-track--sm {
  height: 12px;
  flex: 1;
}

.bar-fill {
  height: 100%;
  background: var(--fire);
  border-radius: var(--r-pill);
  transition: width 0.4s ease;
}

.bar-count {
  font-size: var(--fs-note);
  font-weight: 800;
  color: var(--nb-text);
  text-align: end;
}

/* キャラランキング */
.chara-ranking {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.chara-row {
  display: grid;
  grid-template-columns: 1.8rem 8rem 1fr 2.5rem;
  align-items: center;
  gap: 0.75rem;
}

.chara-rank {
  width: 1.8rem;
  height: 1.8rem;
  border-radius: var(--r-tile);
  background: var(--ink);
  color: #fff;
  font-size: var(--fs-mini);
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* 🔴 決まり0（2026-09-08）＝オレンジの面の上は墨 */
.chara-rank--top {
  background: var(--fire);
  color: var(--ink);
}

.chara-name {
  font-size: var(--fs-note, 14px);
  font-weight: 700;
  color: var(--nb-text);
}

/* 国リスト */
.country-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.country-row {
  display: grid;
  grid-template-columns: 7rem 1fr 2.5rem;
  align-items: center;
  gap: 0.75rem;
}

.country-name {
  font-size: var(--fs-note, 14px);
  font-weight: 700;
  color: var(--nb-text);
}

/* Wish カード */
.wish-grid {
  display: grid;
  /* 🔴 `1fr` ではなく `minmax(0,1fr)`。1fr のままだと列が中身の最小幅まで広がってしまい、
     和文が改行できないぶんカードが画面からはみ出す（実測 456px / 画面 390px）。
     ⚠️ Grid も Flex と同じで、子は既定で縮まない。列に 0 を許すのがこの形の定石。 */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.wish-card {
  display: block;
  background: var(--nb-card);
  border-radius: var(--r-card);
  padding: 1rem 1.25rem;
  text-decoration: none;
  box-shadow: var(--elev-1);
  transition: transform 0.22s cubic-bezier(.5,1.4,.4,1), box-shadow 0.22s cubic-bezier(.5,1.4,.4,1);
}

.wish-card:hover {
  transform: translate(-2px,-2px);
  box-shadow: var(--elev-2);
  text-decoration: none;
}

.wish-text {
  font-size: var(--fs-body);
  font-weight: 700;
  line-height: 1.7;
  color: var(--nb-text);
  margin-bottom: 0.5rem;
}

.wish-name {
  font-size: var(--fs-note, 14px);
  color: var(--ink-60);
}

.data-cta {
  text-align: center;
  margin-top: 1rem;
}

@media (max-width: 640px) {
  .donut-wrap { flex-direction: column; align-items: flex-start; gap: 1.5rem; }
  .bar-row { grid-template-columns: 7rem 1fr 2rem; }
  .chara-row { grid-template-columns: 1.8rem 6rem 1fr 2rem; }
  .country-row { grid-template-columns: 5.5rem 1fr 2rem; }
  .wish-grid { grid-template-columns: 1fr; }
}

/* ============ アフィリエイトセクション ============ */
.affiliate-section {
  margin: 2rem 0;
  padding: 1.25rem 1.5rem;
  background: var(--nb-card);
  border: 1px solid var(--color-border, #e0e0e0);
  border-radius: var(--r-card);
}

.affiliate-label {
  font-size: var(--fs-mini);
  font-weight: 600;
  color: var(--ink-60);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0 0 0.75rem;
}

.affiliate-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.affiliate-link {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.6rem 0.75rem;
  border-radius: var(--r-input);
  text-decoration: none;
  font-size: var(--fs-note);
  min-height: var(--tap);
  background: var(--nb-card);
  border: 1px solid var(--color-border, #e0e0e0);
  transition: border-color 0.15s, background 0.15s;
}

.affiliate-link:hover {
  border-color: var(--fire);
  background: var(--scroll);
}

.affiliate-shop {
  font-size: var(--fs-mini);
  font-weight: 700;
  color: #fff;
  background: var(--ink);
  padding: 0.15em 0.5em;
  border-radius: var(--r-pill);
  white-space: nowrap;
  flex-shrink: 0;
}

.affiliate-link.affiliate-bandai .affiliate-shop    { background: #0033a0; }
.affiliate-link.affiliate-animate .affiliate-shop   { background: #e60026; }
.affiliate-link.affiliate-jump-store .affiliate-shop { background: #e8621a; }
.affiliate-link.affiliate-mercari .affiliate-shop   { background: #ff0211; }
.affiliate-link.affiliate-amazon .affiliate-shop    { background: #f90; color: #111; }

.affiliate-title {
  flex: 1;
  color: var(--nb-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.affiliate-arrow {
  color: var(--ink-60);
  font-size: var(--fs-note);
  flex-shrink: 0;
}

/* ============ アクセシビリティ: アニメーション軽減設定 ============ */
/* 旧 Hero 固有の reduced-motion ルールは v3 Hero では不要のため撤去。
   v3 CSS 末尾の @media (prefers-reduced-motion: reduce) が全体を制御。*/

/* ============================================================
   PROJECT 100 — トップページバナー
   ============================================================ */
.p100-banner {
  background: var(--ink);
  color: #fff;
  padding: 2.5rem 0;
  border-top: none;
  border-bottom: 4px solid var(--fire);
}
.p100-banner-inner {
  display: flex;
  align-items: center;
  gap: 2rem;
  flex-wrap: wrap;
}
.p100-banner-left {
  flex-shrink: 0;
}
.p100-banner-eyebrow {
  font-size: var(--fs-mini);
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--fire);
  margin: 0 0 0.25rem;
}
.p100-banner-nums {
  display: flex;
  align-items: baseline;
  gap: 0.15em;
  line-height: 1;
}
.p100-banner-current {
  font-size: 2.9rem;
  font-weight: 900;
  color: var(--fire);
  letter-spacing: -0.03em;
}
.p100-banner-sep {
  font-size: 1.4rem;
  color: rgba(255,255,255,0.4);
}
.p100-banner-total {
  font-size: 1.4rem;
  color: rgba(255,255,255,0.6);
}
.p100-banner-unit {
  font-size: var(--fs-body);
  color: rgba(255,255,255,0.6);
  margin-inline-start: 0.1em;
}
.p100-banner-next {
  margin: 0.3rem 0 0;
  font-size: var(--fs-note);
  color: rgba(255,255,255,0.65);
}
.p100-banner-next strong {
  color: var(--fire);
  font-weight: 800;
}
.p100-banner-right {
  flex: 1;
  min-width: 200px;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.p100-banner-bar-wrap {
  width: 100%;
}
.p100-banner-track {
  position: relative;
  height: 8px;
  background: rgba(255,255,255,0.12);
  border-radius: var(--r-pill);
  overflow: visible;
}
.p100-banner-fill {
  height: 100%;
  background: var(--fire);
  border-radius: var(--r-pill);
  transition: width 0.6s ease;
  min-width: 4px;
}
.p100-banner-marker {
  position: absolute;
  top: -2px;
  width: 2px;
  height: 12px;
  background: rgba(255,255,255,0.3);
  transform: translateX(-50%);
}
.p100-banner-link {
  align-self: flex-end;
  font-size: var(--fs-note);
  color: rgba(255,255,255,0.7);
  text-decoration: none;
  letter-spacing: 0.03em;
  transition: color 0.2s;
}
.p100-banner-link:hover {
  color: #fff;
  text-decoration: none;
}

@media (max-width: 600px) {
  .p100-banner-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }
  .p100-banner-right {
    width: 100%;
  }
  .p100-banner-current { font-size: 2.2rem; }
}

/* ============================================================
   PROJECT 100 — 専用LPページ (/project100)
   ============================================================ */

/* p100 ヒーロー — homepage `.cta` と同じ視覚言語（放射線 + 巨大文字 + ink stamp pill） */
.p100-hero {
  position: relative; overflow: hidden;
  padding: 120px 32px 132px;
  background: var(--fire);
  /* 決まり0（2026-09-08）＝オレンジの面の上は墨。この面自体は既存だが文字色が白のまま
     残っていた（h1見出し・リード文とも）→墨に（2026-09-09発見） */
  color: var(--ink);
  text-align: center;
}
.p100-hero::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    repeating-conic-gradient(from 180deg at 50% 50%,
      transparent 0deg, transparent 2deg,
      rgba(26,26,26,0.12) 2deg, rgba(26,26,26,0.12) 2.4deg);
  mask-image: radial-gradient(circle at 50% 50%, transparent 180px, #000 520px);
  -webkit-mask-image: radial-gradient(circle at 50% 50%, transparent 180px, #000 520px);
}
.p100-hero::after {
  content: '100';
  position: absolute; right: -80px; bottom: -140px;
  font-weight: 900; font-size: 560px;
  line-height: 0.8;
  color: var(--nb-text);
  opacity: 0.08;
  letter-spacing: -0.04em;
  pointer-events: none;
  font-family: var(--font-body);
}
.p100-hero-inner {
  max-width: var(--max-width); margin: 0 auto;   /* 全ページ基準幅(1280)に連動（owner 2026-06-04・旧 900px） */
  position: relative; z-index: 2;
}
.p100-eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 8px 18px; background: var(--ink); color: var(--fire);
  font-weight: 900; font-size: var(--fs-mini); letter-spacing: 0.24em;
  border-radius: var(--r-pill); margin-bottom: 28px;
  transform: rotate(-2deg);
}
.p100-title {
  font-size: clamp(2.2rem, 5vw, 4.2rem);
  font-weight: 900; line-height: 1.15; letter-spacing: -0.01em;
  margin: 0 0 28px;
  color: var(--ink);
  word-break: keep-all; overflow-wrap: break-word;
}
.p100-title .box {
  display: inline-block; background: var(--ink); color: var(--fire);
  padding: 0 14px; margin: 0 2px;
  transform: rotate(-1deg);
}
.p100-desc {
  font-size: var(--fs-body);
  line-height: 1.9; font-weight: 500;
  max-width: 640px; margin: 0 auto;
  width: fit-content; /* 🔴【WO-132】真ん中の案内＝箱を文字の幅に縮めて真ん中へ */
  color: var(--ink);
}
/* 25%の墨washは4.17:1でAA未達だが、透ける意匠は意図（PM裁定・2026-09-10）→白文字のまま
   4.5:1を満たす最小の不透明度を実測（境界≈29%・際どいため余裕を持たせ35%に）。35%で5.07:1 */
.p100-desc .nb {
  display: inline-block; font-weight: 900; color: #fff;
  background: rgba(26,26,26,0.35); padding: 2px 10px; border-radius: var(--r-pill);
  margin: 2px 4px;
}
@media (max-width: 720px) {
  .p100-hero { padding: 56px 20px 64px; }
  .p100-hero::before { mask-image: radial-gradient(circle at 50% 50%, transparent 100px, #000 360px); -webkit-mask-image: radial-gradient(circle at 50% 50%, transparent 100px, #000 360px); }
  .p100-hero::after { font-size: 320px; right: -80px; bottom: -120px; }
  .p100-eyebrow { margin-bottom: 18px; padding: 6px 14px; }
  .p100-title { font-size: clamp(1.8rem, 7vw, 2.4rem); margin-bottom: 18px; }
  .p100-desc { line-height: 1.85; }
}

.p100-counter-section {
  padding: 4rem 0 3rem;
  background: var(--scroll);
  position: relative;
}
.p100-counter {
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
  position: relative;
}
.p100-numbers-row {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 0.2em;
  margin-bottom: 1.75rem;
  animation: p100-pop-in 0.85s cubic-bezier(.5,1.6,.4,1) both;
}
@keyframes p100-pop-in {
  0% { opacity: 0; transform: scale(0.78); }
  100% { opacity: 1; transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .p100-numbers-row { animation: none; }
}
.p100-big-num {
  font-size: clamp(4rem, 12vw, 7rem);
  font-weight: 900;
  color: var(--fire);
  line-height: 1;
  letter-spacing: -0.04em;
}
.p100-slash {
  font-size: clamp(2rem, 6vw, 3.5rem);
  color: var(--ink-40);
  font-weight: 700;
}
.p100-goal-num {
  font-size: clamp(2rem, 6vw, 3.5rem);
  font-weight: 900;
  color: var(--nb-text);
  letter-spacing: -0.03em;
}
.p100-unit {
  font-size: 1.5rem;
  color: var(--ink-60);
  margin-inline-start: 0.1em;
}
.p100-bar-wrap {
  margin-bottom: 1rem;
}
.p100-bar-track {
  position: relative;
  height: 14px;
  background: var(--nb-card);
  border: 1px solid var(--hair);
  border-radius: var(--r-pill);
  overflow: hidden;
  box-shadow: var(--elev-1);
}
.p100-bar-fill {
  position: relative;
  height: 100%;
  background: var(--fire);
  border-radius: var(--r-pill) 0 0 var(--r-pill);
  width: var(--p100-pct, 0%);
  min-width: 6px;
  animation: p100-bar-grow 1.5s 0.35s cubic-bezier(.5,1.4,.4,1) both;
  overflow: hidden;
}
@keyframes p100-bar-grow {
  0% { width: 0; }
  100% { width: var(--p100-pct, 0%); }
}
/* バー上を流れる光（チャクラ） */
.p100-bar-fill::after {
  content: '';
  position: absolute; top: 0; bottom: 0;
  width: 40%;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.55) 50%, transparent 100%);
  animation: p100-bar-shine 2.6s 1.9s cubic-bezier(.4,0,.2,1) infinite;
  transform: translateX(-100%);
}
@keyframes p100-bar-shine {
  0% { transform: translateX(-100%); }
  60%, 100% { transform: translateX(380%); }
}
@media (prefers-reduced-motion: reduce) {
  .p100-bar-fill { animation: none; width: var(--p100-pct, 0%); }
  .p100-bar-fill::after { animation: none; opacity: 0; }
}
.p100-bar-marker {
  position: absolute;
  top: -3px;
  width: 2px;
  height: 18px;
  background: var(--vermilion);
  transform: translateX(-50%);
}
.p100-bar-labels {
  display: flex;
  justify-content: space-between;
  margin-top: 0.3rem;
  font-size: var(--fs-mini);
  color: var(--ink-60);
  font-weight: 700;
}
.p100-next-label {
  font-size: var(--fs-note);
  color: var(--ink-80);
  margin-top: 0.25rem;
}
.p100-next-label strong {
  color: var(--fire);
  font-weight: 800;
}

.p100-why-section {
  padding: 4.5rem 0;
  background: var(--scroll);
}
.p100-why-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.5rem;
  max-width: 1100px;
  margin: 0 auto;
}
.p100-why-card {
  position: relative;
  background: var(--nb-card);
  border-radius: var(--r-card);
  padding: 2rem 1.5rem 1.5rem;
  box-shadow: var(--elev-2);
  display: flex;
  flex-direction: column;
  transition: transform 0.28s cubic-bezier(.5,1.4,.4,1), box-shadow 0.28s cubic-bezier(.5,1.4,.4,1);
}
.p100-why-card:hover {
  transform: translate(-3px,-3px);
  box-shadow: var(--elev-float);
}
.p100-why-num {
  position: absolute;
  top: 0.9rem;
  right: 1.1rem;
  font-size: 2.6rem;
  font-weight: 900;
  line-height: 1;
  color: var(--fire-soft);
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.p100-why-icon {
  width: 44px;
  height: 44px;
  margin-bottom: 1.1rem;
  color: var(--fire);
  display: flex;
  align-items: center;
  justify-content: center;
}
.p100-why-icon svg {
  width: 100%;
  height: 100%;
}
.p100-why-card h3 {
  font-size: var(--fs-sub);
  font-weight: 900;
  margin: 0 0 0.5rem;
  color: var(--nb-text);
  letter-spacing: -0.005em;
}
.p100-why-card h3::after {
  content: "";
  display: block;
  width: 36px;
  height: 3px;
  background: var(--fire);
  margin-top: 0.7rem;
  border-radius: 1px;
}
.p100-why-card p {
  font-size: var(--fs-body);
  line-height: 1.75;
  color: var(--ink-80);
  margin: 0;
}
.p100-why-fact {
  margin-top: auto;
  padding-top: 1.1rem;
  font-size: var(--fs-note);
  color: var(--ink-60);
  display: flex;
  align-items: center;
  gap: 0.45rem;
  flex-wrap: wrap;
  letter-spacing: 0.02em;
}
.p100-why-fact-dot {
  color: var(--fire);
  font-size: 0.5rem;
}
.p100-why-flags {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  line-height: 1;
}
.flag-svg {
  /* flag-icons の SVG は 4:3（2026-07-17・旧手描きSVGの3:2から移行）。高さは据え置き、
     幅だけ 18px→16px にして歪み（伸び縮み）が出ないようにする。 */
  width: 16px;
  height: 12px;
  box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.12);
  flex-shrink: 0;
}

/* 3枚目のハイライト（オレンジ反転） */
/* このカード一式：オレンジ地に白文字（本体#fffおよびrgba(255,255,255,.88/.94)）は
   コントラスト2.6〜2.9:1でAA未達→墨色に統一（決まり0・2026-09-09。段階的な白の濃淡は
   墨1色に統一するため失うが、明暗どちらでも約6.5:1で安定して読める） */
.p100-why-card--highlight {
  /* 🔴 WO-090是正で `.p100-why-card` 本体の border を撤去したため、この border-color 上書きは
     塗る対象を失って死んだ宣言になっていた（幅・線種が無いので何も描かれない）。削除。 */
  background: var(--fire);
  color: var(--ink);
  box-shadow: var(--elev-2);
}
.p100-why-card--highlight:hover {
  box-shadow: var(--elev-float);
}
.p100-why-card--highlight .p100-why-num {
  color: rgba(255, 255, 255, 0.22);
}
.p100-why-card--highlight .p100-why-icon {
  color: var(--ink);
}
.p100-why-card--highlight h3 {
  color: var(--ink);
}
.p100-why-card--highlight h3::after {
  background: rgba(255, 255, 255, 0.7);
}
.p100-why-card--highlight p {
  color: var(--ink);
}
.p100-why-card--highlight .p100-why-fact {
  color: var(--ink);
}
.p100-why-card--highlight .p100-why-fact strong {
  color: var(--ink);
  font-weight: 700;
}
/* 印（黒点）は地と同じ変数だと同化して不可視（1:1）→墨色に（決まり0・2026-09-09） */
.p100-why-card--highlight .p100-why-fact-dot {
  color: var(--ink);
}

/* 20×5 ドットグリッド（幅いっぱいに展開） */
.p100-dot-grid {
  display: grid;
  grid-template-columns: repeat(20, 1fr);
  gap: 4px;
  margin: 1rem 0 0.4rem;
  width: 100%;
}
.p100-dot {
  aspect-ratio: 1;
  border-radius: var(--r-tile);
  background: rgba(255, 255, 255, 0.22);
}
.p100-dot--filled {
  background: var(--nb-card);
  box-shadow: 0 0 5px rgba(255, 255, 255, 0.55);
}

/* Fade-up アニメ */
@media (prefers-reduced-motion: no-preference) {
  .p100-why-card {
    opacity: 0;
    transform: translateY(16px);
    animation: p100-fade-up 0.6s ease forwards;
  }
  .p100-why-card:nth-child(1) { animation-delay: 0.00s; }
  .p100-why-card:nth-child(2) { animation-delay: 0.12s; }
  .p100-why-card:nth-child(3) { animation-delay: 0.24s; }
}
@keyframes p100-fade-up {
  to { opacity: 1; transform: translateY(0); }
}

.p100-milestones-section {
  padding: 3.5rem 0;
}
.p100-section-heading {
  font-size: var(--fs-sec);
  font-weight: 900;
  color: var(--nb-text);
  margin: 0 0 2rem;
  text-align: center;
  letter-spacing: -0.005em;
}
.p100-milestones {
  list-style: none;
  padding: 0;
  margin: 0 auto;
  max-width: 640px;
  display: flex;
  flex-direction: column;
}
.p100-milestone {
  display: flex;
  gap: 1.25rem;
  align-items: flex-start;
  padding: 1.25rem 0;
  border-bottom: 1px dashed var(--ink-20);
}
.p100-milestone:last-child { border-bottom: none; }
.p100-milestone-indicator {
  flex-shrink: 0;
  width: 2.2rem;
  height: 2.2rem;
  border-radius: var(--r-tile);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-mini);
  font-weight: 800;
  border: 1px solid var(--hair);
}
.p100-milestone--done .p100-milestone-indicator {
  background: var(--ink);
  color: #fff;
}
.p100-milestone--next .p100-milestone-indicator {
  background: var(--fire);
  /* オレンジ地に白文字はコントラスト約2.68:1でAA未達→墨色に（決まり0・2026-09-09） */
  color: var(--ink);
  box-shadow: 0 0 0 3px var(--fire-soft);
}
.p100-milestone--upcoming .p100-milestone-indicator {
  background: var(--nb-card);
  color: var(--ink-40);
  border-color: var(--ink-40);
  border-style: dashed;
}
.p100-milestone-body { flex: 1; }
.p100-milestone-header {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin-bottom: 0.25rem;
}
.p100-milestone-count {
  font-size: var(--fs-body);
  font-weight: 900;
  color: var(--fire);
  letter-spacing: -0.01em;
}
.p100-milestone--upcoming .p100-milestone-count { color: var(--ink-60); }
.p100-milestone-label {
  font-size: var(--fs-body);
  font-weight: 800;
  color: var(--nb-text);
}
.p100-milestone--upcoming .p100-milestone-label { color: var(--ink-60); }
.p100-milestone-badge {
  font-size: var(--fs-mini);
  font-weight: 800;
  padding: 0.2em 0.7em;
  border-radius: var(--r-pill);
  border: 1.5px solid var(--ink);
}
.p100-milestone-badge--done {
  background: var(--fire-soft);
  color: var(--nb-text);
  border-color: var(--fire);
}
.p100-milestone-badge--next {
  background: var(--fire);
  /* オレンジ地に白文字はコントラスト約2.68:1でAA未達→墨色に（決まり0・2026-09-09） */
  color: var(--ink);
  border-color: var(--ink);
}
.p100-milestone-reward {
  font-size: var(--fs-note);
  color: var(--ink-60);
  margin: 0;
}
.p100-milestone--upcoming .p100-milestone-reward { color: var(--ink-60); }

.p100-participants-section {
  padding: 3.5rem 0;
}
.p100-participants-count {
  font-size: var(--fs-body);
  font-weight: 800;
  color: var(--fire);
  margin-inline-start: 0.4em;
}
.p100-participants-note {
  text-align: center;
  font-size: var(--fs-note);
  color: var(--ink-60);
  margin: -1.2rem 0 1.75rem;
}
.p100-participants-wall {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
}
.p100-participant {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  width: 4.5rem;
}
.p100-participant-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  text-decoration: none;
  color: inherit;
}
.p100-participant-link:hover .p100-participant-avatar {
  background: var(--ink);
  transform: translate(-1px,-1px);
  box-shadow: var(--elev-float);
}
.p100-participant-avatar {
  width: 2.8rem;
  height: 2.8rem;
  border-radius: var(--r-tile);
  background: var(--fire);
  /* 決まり0（2026-09-08）＝オレンジの面の上は墨（2026-09-09発見）。
     🔴 2026-09-10・PM是正＝border は当初この修正に含めていたが撤去した。文字コントラストは
     文字色と地の色の関係だけで決まり border-color は無関係＝この修正の成立に要らない。
     太枠は WO-090（check-old-style-decard.mjs）が減らす対象＝ここで足すと逆行する。 */
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  font-weight: 800;
  transition: background 0.2s, transform 0.2s, box-shadow 0.2s;
}
.p100-participant-avatar--empty {
  background: var(--nb-card);
  color: var(--ink-40);
  border: 2px dashed var(--ink-40);
}
.p100-participant-name {
  font-size: var(--fs-mini);
  color: var(--ink-80);
  text-align: center;
  max-width: 4.5rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 700;
}
.p100-participant-name--empty { color: var(--ink-40); }

/* ================================================================
   V3 DESIGN SYSTEM (naruboru v3 — 2026-04-24 UI/UX リデザイン)
   正典: public/_preview/ninja-gathering.v3-final.html
   参照: public/_preview/_v3-refs/*.css（機能別に分割抽出済み）
   ================================================================ */
  /* ========== HEADER ========== */
  .header {
    position: sticky; top: 0; z-index: 100;
  }
  .header-inner {
    margin: 0 auto; padding: 14px 32px;
    display: flex; align-items: center; gap: 16px;
  }
  .brand { display: flex; align-items: center; gap: 12px; font-weight: 900; text-decoration: none; }
  /* 🔴🔴【ロゴ差し替え・2026-09-23・椿さん「案Aでよい」】
     ~~橙の丸の器に入った墨の「忍」~~ ⇒ **手裏剣を地に直に置く。**
     器・-6度の傾き・硬い影・hover の回転は外す（ヘッダーと同じ形にそろえる）。
     ⚠️ **マスクで敷くと `background` が「印そのものの色」になり、`color` は効かない。**
        ⇒ 各テーマの上書きも `background` だけにしてある（`color` を残すと嘘の指定になる）。
     ⚠️ 色は面ごとに違う＝ふつうの面は**墨の地に橙**、BORUTO の面は**濃紺の地に濃いシアン**。
        器の色がそのまま印の色になるので、色を新しく決める必要は無い。 */
  .brand-mark {
    width: 44px; height: 44px;
    background: var(--fire);
    display: inline-block; flex-shrink: 0;
    font-size: 0;   /* 中に文字が残っていても目に出さない */
    -webkit-mask: url('/icons/symbol.svg') center / contain no-repeat;
    mask: url('/icons/symbol.svg') center / contain no-repeat;
  }
  .brand-text .jp { font-size: var(--fs-body); letter-spacing: 0.04em; }
  .brand-text .sub { font-size: var(--fs-mini); letter-spacing: 0.14em; font-weight: 700; margin-top: 2px; }

  .nav { display: flex; align-items: center; gap: 28px; font-size: var(--fs-mini); font-weight: 700; }
  .nav a { text-decoration: none; position: relative; padding: 4px 0; }
  .nav a::after {
    content: ''; position: absolute; left: 0; bottom: -2px; height: 3px; width: 0;
    background: var(--fire); transition: width 0.3s ease;
  }
  .nav a:hover::after { width: 100%; }

  .header-cta {
    background: var(--ink); color: #fff;
    padding: 9px 20px; border-radius: var(--r-pill); font-weight: 900;
    text-decoration: none; font-size: var(--fs-note); letter-spacing: 0.06em;
    line-height: 1.3;
    transition: all 0.2s ease;
    white-space: nowrap;
    display: inline-flex; align-items: center; justify-content: center;
  }
  .header-cta:hover { background: var(--fire); transform: translate(-2px, -2px); box-shadow: var(--elev-float); }
  .header-cta::after { display: none; }  /* nav 内に入れたため、nav リンクの下線擬似要素を抑止 */
  /* 体験談は一人一つ——紐付け済み会員には投稿CTAを出さない（owner 2026-07-17）。 */
  body[data-has-story="1"] .header-cta { display: none; }
  .menu-btn { display: none; background: transparent; border: 1px solid var(--hair); border-radius: var(--r-input); width: 40px; height: 40px; padding: 0; cursor: pointer; }
  .menu-btn span { display: block; width: 20px; height: 2px; background: var(--ink); margin: 4px auto; }

  /* v3 リンク色の上書き（グローバル `a { color: var(--fire) }` が干渉するため明示的に反転）*/
  .header a:not(.header-cta),
  .header .brand,
  .header .nav a,
  .brand-text .jp { color: var(--nb-text); }
  .brand-text .jp { font-weight: 900; }
  .header .nav a:hover { text-decoration: none; }
  .header a:hover { text-decoration: none; }
  /* CTA ボタンは常に白文字（通常・hover 共通）*/
  /* 🔴【A-19続き・2026-09-08・死んだCSS是正】~~.header .header-cta:hover~~ を複合セレクタ
     から外した＝この行の color:#fff は L5447 の .header .header-cta:hover（color:var(--nb-text)）
     に一度も勝てない（後勝ち）。他の3状態（通常・focus・visited）は引き続きこのブロックが
     供給する＝丸ごと消すと通常状態の白文字まで失われるところだった（宣言単位の削除）。 */
  .header .header-cta,
  .header .header-cta:focus,
  .header .header-cta:visited { color: #fff; }

  /* ========== HERO ========== */
  .hero {
    position: relative; overflow: hidden;
    padding: 96px 32px 120px;
  }
  .speed-lines {
    position: absolute; inset: 0; pointer-events: none; z-index: 0;
  }
  .hero-kanji {
    position: absolute; z-index: 0;
    font-weight: 700;
    font-size: 42vw; line-height: 0.8;
    pointer-events: none;
    animation: float 12s ease-in-out infinite;
  }
  @keyframes float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-16px); } }

  /* 背景装飾なし（grain/紙テクスチャは全廃・2026-06-07） */

  .hero-inner {
    position: relative; z-index: 2;
    max-width: 1280px; margin: 0 auto;
  }
  .hero-eyebrow {
    display: inline-flex; align-items: center; gap: 10px;
    font-size: var(--fs-mini); font-weight: 900; letter-spacing: 0.18em;
    color: var(--nb-text); background: var(--nb-card);
    padding: 8px 16px; border-radius: var(--r-pill);
    box-shadow: var(--elev-2);
    margin-bottom: 28px;
    transform: rotate(-2deg);
  }
  .hero-eyebrow .dot { width: 8px; height: 8px; border-radius: var(--r-tile); background: var(--fire); animation: pulse 1.4s ease-in-out infinite; }
  @keyframes pulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.5; transform: scale(1.4); } }

  .hero-title {
    font-size: clamp(2.1rem, 4.4vw, 4rem);
    line-height: 1.18; letter-spacing: -0.01em;
    font-weight: 900; margin-bottom: 28px;
    position: relative;
    word-break: keep-all; overflow-wrap: break-word;
    max-width: 100%;
  }
  .hero-title .line-1,
  .hero-title .line-2 {
    display: block;
    text-align: start;
    /* 各行は意味のまとまりで折り返さず1行を基本とするが、収まらない時は折り返しを許可 */
    white-space: normal;
  }
  .hero-title .line-2 { margin-top: 0.06em; }
  .hero-title .hl {
    position: relative; display: inline-block;
  }
  .hero-title .hl::after {
    content: ''; position: absolute; left: -4px; right: -4px; bottom: 4px; height: 14px;
    background: var(--ink); z-index: -1; transform: skewX(-8deg);
  }
  .hero-title .underline-swoop {
    stroke-width: 5; fill: none;
    display: block; margin-top: -6px; margin-inline-start: 4px; max-width: 100%;
  }

  /* タイピング風レベレーション: JS が .t-chunk を .t-char に分割し順に is-on */
  .hero-title[data-typing]:not([data-ready]) .t-chunk { visibility: hidden; }
  .hero-title[data-typing] .t-char {
    opacity: 0;
    transition: opacity 0.12s ease-out;
  }
  .hero-title[data-typing] .t-char.is-on { opacity: 1; }
  /* .hl の黒塗り下地は、最初の一字が出るまで待つ */
  .hero-title[data-typing] .hl::after {
    opacity: 0;
    transition: opacity 0.2s ease;
  }
  .hero-title[data-typing] .hl.is-revealed::after { opacity: 1; }

  .type-caret {
    display: inline-block;
    width: 3px; height: 0.82em;
    background: var(--fire);
    vertical-align: -0.08em;
    margin: 0 2px;
    border-radius: 1px;
    box-shadow: var(--elev-1);
    animation: typeCaret 0.9s step-end infinite;
  }
  .type-caret.fade-out {
    animation: none;
    opacity: 0;
    transition: opacity 0.6s ease;
  }
  @keyframes typeCaret {
    50% { opacity: 0; }
  }
  /* 初期表示: data-ready 前 caret は非表示（初期レイアウトシフト抑止） */
  .hero-title[data-typing]:not([data-ready]) .type-caret { display: none; }

  @media (prefers-reduced-motion: reduce) {
    .hero-title[data-typing] .t-char { opacity: 1; transition: none; }
    .hero-title[data-typing] .hl::after { opacity: 1; transition: none; }
    .type-caret { animation: none; display: none; }
  }

  .hero-sub {
    font-size: var(--fs-body); line-height: 1.9; color: #333;
    margin-bottom: 36px; max-width: 540px;
  }
  .hero-sub .q {
    display: inline-block; background: var(--nb-card); padding: 2px 10px; border-radius: var(--r-pill);
    border: 1.5px solid var(--ink); font-weight: 700; margin: 0 2px 4px 0;
    box-shadow: var(--elev-1);
  }

  .hero-actions { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 40px; }
  .btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    padding: 13px 26px; border-radius: var(--r-pill);
    font-weight: 900; font-size: var(--fs-body); letter-spacing: 0.04em;
    line-height: 1.3;
    text-decoration: none; cursor: pointer;
    border: 1px solid var(--hair);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
    font-family: var(--font-body);
    min-height: var(--tap-primary);
    min-width: 220px;
  }
  /* 🔴🔴【WO-rv2-A・Tier1是正・2026-09-08・PM裁定】D-7aの誤適用を修正。
     D-7aは「.hero（橙の帯）の上に置く主ボタン」だけの例外だった（橙の上に橙で消えるため）。
     `.btn-primary` はグローバルセレクタなので、その例外がサイト中の全ページの主ボタンへ
     広がっていた（一般ページは白地なので、橙が消える理由がそもそも無い）。
     ⇒ **一般ページの基底＝シート通り橙塗り＋墨文字に戻す。**帯の上の例外は個別セレクタ
     （`.cta-fire .btn-primary`＝本ファイル前方の p100 CTA 節）が既に持っているので、ここでは触らない。
     ⚠️ `.hero-actions .btn-primary`（旧hero帯の例外・本ファイル後方）は据え置き＝`.hero`を使う
     `Hero.astro` は現在どの画面からも読まれていない（ADR-0053・2026-08-15）ため実害は無いが、
     復活時に橙の上へ橙が出ないよう、削除せず残す。 */
  .btn-primary {
    background: var(--fire); color: var(--ink);
  }
  .btn-primary:hover { transform: translate(-1px, -1px); }
  .btn-primary:active { transform: translate(1px, 1px); }

  .hero-arrow { transition: transform 0.25s cubic-bezier(.5,1.6,.4,1); }
  .btn:hover .hero-arrow { transform: translateX(6px); }

  .hero-stack { position: relative; height: 460px; }
  .panel {
    position: absolute; background: var(--nb-card);
    border-radius: var(--r-card); padding: 20px 22px;
    box-shadow: var(--elev-2);
    transition: transform 0.3s cubic-bezier(.5,1.6,.4,1);
    cursor: pointer;
  }
  .panel:hover { transform: translate(-3px, -3px) rotate(0deg) !important; box-shadow: var(--elev-float); z-index: 10; }
  .panel-1 { top: 0;    left: 0;    width: 78%; transform: rotate(-3deg); }
  .panel-2 { top: 150px; right: 0;  width: 80%; transform: rotate(2.5deg); }
  .panel-3 { bottom: 0; left: 8%;   width: 84%; transform: rotate(-1.5deg); }
  .panel .series {
    display: inline-block; font-size: var(--fs-mini); font-weight: 900; letter-spacing: 0.14em;
    padding: 3px 10px; background: var(--fire); color: var(--ink); border-radius: var(--r-pill);
    border: 1.5px solid var(--ink); margin-bottom: 10px;
  }
  /* 🔴 決まり0（2026-09-08）＝明るい地の上の文字にオレンジは使わない（#fff4e6は明るい地） */
  .panel .series.boruto { background: #fff4e6; color: var(--ink); border-color: var(--fire); }
  .panel p {
    font-size: var(--fs-body); font-weight: 700; line-height: 1.55;
    position: relative; padding-inline-start: 22px;
  }
  .panel p::before {
    content: '「'; position: absolute; inset-inline-start: 0; top: -2px;
    color: var(--fire); font-weight: 700;
  }
  /* 直書き#888は.panel(--nb-card)地で4.1:1・AA未達→控えめ文字の役割札に（決まり0・2026-09-09。
     実測=明4.54:1・暗5.88:1。--nb-text-mutedは既存の--ink-60参照でPM裁定によりTier2扱いは
     既存96箇所の是非のみ・この2箇所は新規直書きの置換であり据え置き対象ではない） */
  .panel .meta { font-size: var(--fs-mini); color: var(--nb-text-muted); margin-top: 10px; font-weight: 700; letter-spacing: 0.04em; display: flex; align-items: center; gap: 8px; }
  .flag-svg { width: 16px; height: 12px; border: 1px solid rgba(0,0,0,0.15); border-radius: 2px; display: inline-block; flex-shrink: 0; } /* 4:3（2026-07-17） */

  /* 【椿さん その23・案B】--fs-mini（13px）に */
  .scroll-cue {
    position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%);
    font-size: var(--fs-mini); letter-spacing: 0.3em; color: var(--nb-text); font-weight: 900;
    text-align: center; z-index: 3;
  }
  .scroll-cue .line { display: block; width: 1px; height: 36px; background: var(--ink); margin: 10px auto 0; animation: drop 1.6s ease-in-out infinite; transform-origin: top; }
  @keyframes drop { 0% { transform: scaleY(0); } 60% { transform: scaleY(1); } 100% { transform: scaleY(0); transform-origin: bottom; } }

  /* ========== MISSION / PROJECT 100 (scroll theme) ========== */
  .mission {
    color: var(--nb-text);
    padding: 44px 32px 36px; position: relative; overflow: hidden;
    /* 縦余白を圧縮（96/120→44/36）＝下のおしらせ(同色グレー)との空き帯を詰める（owner 2026-06-09） */
    /* 色の変わり目に黒線は入れない（owner 2026-06-07）＝border-top も撤去（border-bottom は 2026-06-04 撤去済） */
  }
  .mission-inner { max-width: 1280px; margin: 0 auto; position: relative; z-index: 2; }
  .mission-header {
    max-width: 720px; margin: 0 auto 48px; text-align: center;  /* 中央統一（owner 2026-06-09） */
  }
  .mission-eyebrow {
    display: inline-block;
    font-size: var(--fs-mini); font-weight: 900; letter-spacing: 0.22em;
    color: #fff; background: var(--ink);
    padding: 6px 14px; border-radius: var(--r-pill);
    margin-bottom: 18px;
    transform: none;            /* 傾きニュートラル＝フラット（owner 2026-06-04） */
  }
  .mission-title {
    font-size: clamp(1.8rem, 4.2vw, 3rem); font-weight: 900; line-height: 1.2; letter-spacing: -0.01em;
    text-wrap: balance; word-break: keep-all; overflow-wrap: anywhere;
  }
  .mission-lead {
    font-size: var(--fs-body); line-height: 1.9; max-width: 720px; margin: 10px auto 0;
    color: var(--ink-80);
  }
  .mission-lead strong { color: var(--nb-text); }

  /* P100 ランクカード＝白カード＋墨枠（和紙テクスチャ/絵巻モチーフは全廃・コメント刷新 2026-06-07）*/
  .rank-frame {
    background: var(--nb-card);
    border-radius: var(--r-card);
    padding: 40px 44px 36px;
    position: relative;
    margin: 0 auto;
    max-width: none;        /* タイトル左辺(mission-inner 1280)と左右を揃える＝幅いっぱい・中央配置のまま（owner 2026-06-04） */
    box-shadow: var(--elev-2);
  }

  .rank-top { display: flex; justify-content: center; align-items: flex-end; margin-bottom: 18px; gap: 24px; flex-wrap: wrap; }
  .rank-count {
    font-family: var(--font-body); font-weight: 900;
    font-size: 52px; line-height: 1; color: var(--nb-text);
  }
  .rank-count .big { color: var(--fire); font-size: 84px; letter-spacing: -0.03em; }
  .rank-count .slash { color: var(--ink-40); margin: 0 6px; }
  .rank-count .goal { font-size: 26px; color: var(--ink-60); }

  /* 進捗バー + 「いまここ」マーカー（ビューポート進入でぐいーんと伸びる）*/
  .rank-progress {
    position: relative;
    width: 100%; max-width: 640px;
    margin: 56px auto 40px;
    height: 14px;
    border-radius: var(--r-pill);
    background: var(--scroll-deep, #f0ebe0);
  }
  .rank-progress-fill {
    position: absolute; inset: 0;
    width: 0;
    background: var(--fire);
    border-radius: var(--r-pill);
    overflow: hidden;
    transition: width 1.4s cubic-bezier(0.22, 1.4, 0.36, 1);
  }
  .rank-progress.in-view .rank-progress-fill { width: var(--progress); }

  /* 「いまここ」マーカー: 塗りのインライン終端に追従（inset-inline-start を独立アニメ）*/
  .rank-progress-here {
    position: absolute;
    top: 50%; inset-inline-start: 0%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    opacity: 0;
    transition:
      inset-inline-start 1.4s cubic-bezier(0.22, 1.4, 0.36, 1),
      opacity 0.35s ease 1.0s;
  }
  .rank-progress.in-view .rank-progress-here {
    inset-inline-start: var(--progress);
    opacity: 1;
  }
  /* RTL では right アンカーになるため translate を反転して中心揃え */
  [dir="rtl"] .rank-progress-here {
    transform: translate(50%, -50%);
  }
  .here-dot {
    display: block;
    width: 18px; height: 18px;
    border-radius: var(--r-tile);
    background: var(--fire);
    box-shadow: var(--elev-2);
  }
  .rank-progress.in-view .here-dot {
    animation: hereRipple 1.8s ease-out infinite 1.1s;
  }
  .here-flag {
    position: absolute;
    bottom: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%) rotate(-2.5deg);
    background: var(--ink); color: #fff;
    font-size: var(--fs-mini); font-weight: 900; letter-spacing: 0.16em;
    padding: 5px 10px; border-radius: var(--r-pill);
    white-space: nowrap;
    box-shadow: var(--elev-2);
  }
  .here-flag::after {
    content: '';
    position: absolute;
    left: 50%; top: 100%;
    transform: translateX(-50%);
    width: 0; height: 0;
    border: 5px solid transparent;
    border-top-color: var(--ink);
  }

  /* ゴール「100」スタンプ */
  .rank-progress-goal {
    position: absolute;
    inset-inline-start: calc(100% + 14px); top: 50%;
    transform: translateY(-50%) rotate(4deg);
  }
  .goal-mark {
    display: inline-block;
    font-family: var(--font-body);                 /* 明朝(serif)をやめ他と同じサンセリフに（owner 2026-06-04） */
    font-weight: 900; font-size: var(--fs-body);
    color: var(--accent, #E9451F);                 /* 100スタンプの色を #E9451F に（owner 2026-06-04） */
    border: 2.5px solid var(--accent, #E9451F);
    border-radius: var(--r-pill);
    padding: 2px 8px;
    letter-spacing: 0.04em;
    white-space: nowrap;
  }

  @keyframes hereRipple {
    0%   { box-shadow: 0 0 0 0 rgba(255, 118, 1, 0.55); }
    70%  { box-shadow: 0 0 0 14px rgba(255, 118, 1, 0); }
    100% { box-shadow: 0 0 0 0 rgba(255, 118, 1, 0); }
  }

  @media (prefers-reduced-motion: reduce) {
    .rank-progress-fill { transition: none; }
    .rank-progress-here { transition: none; opacity: 1; }
    .rank-progress.in-view .here-dot { animation: none; }
  }

  /* PROJECT 100 詳細ページへの導線 */
  /* 下線リンク→アウトラインのピルボタン化＝着地点を明確に（owner 2026-06-09・弱リンク廃止） */
  .rank-more {
    display: flex; width: fit-content; align-items: center; gap: 8px;
    margin: 24px auto 0;  /* 中央統一（owner 2026-06-09）＝カードの中身(25/100)が中央なのでボタンも中央 */
    font-size: var(--fs-body); font-weight: 900; letter-spacing: 0.06em;  /* ボタン統一15px */
    color: var(--nb-text); text-decoration: none;
    background: var(--nb-card); border-radius: var(--r-pill);
    padding: 11px 22px; min-height: var(--tap); box-sizing: border-box;
    box-shadow: var(--elev-2);
    transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.2s ease, color 0.2s ease;
  }
  .rank-more:hover { transform: translate(-2px, -2px); box-shadow: var(--elev-float); }
  .rank-more svg { flex: none; }
  .rank-count .goal .unit {
    font-size: 0.62em; color: var(--ink-60); font-weight: 700;
    margin-inline-start: 2px; letter-spacing: 0.04em;
  }
  .rank-meta {
    text-align: end; font-size: var(--fs-note); line-height: 1.7; letter-spacing: 0.04em;
  }
  .rank-meta .label { font-size: var(--fs-mini); font-weight: 900; letter-spacing: 0.22em; color: var(--fire-dark); }
  .rank-meta .val { font-size: var(--fs-sub); font-weight: 900; color: var(--nb-text); display: block; margin-top: 4px; }
  .rank-meta .val .num { color: var(--fire); }

  /* Chapter ladder — 絵巻場面マーカー × チャクラノード metaphor */
  .ladder {
    display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px;
    margin-bottom: 36px; position: relative;
  }
  /* 章間チャクラ線（SVG ベジェ・発光）
     ladder の下辺（章マーカー底部の chakra-core 位置）を繋ぐ */
  .chakra-lines {
    position: absolute; left: 0; right: 0; bottom: -14px;
    width: 100%; height: 28px;
    pointer-events: none; z-index: 1;
    overflow: visible;
  }
  .chakra-lines path {
    fill: none; stroke-linecap: round;
    filter: drop-shadow(0 0 3px rgba(255, 118, 1,0.55));
  }
  .chakra-lines path.flowing {
    stroke: var(--fire); stroke-width: 2.5;
    stroke-dasharray: 6 7;
    animation: chakraflow 3.2s linear infinite;
  }
  .chakra-lines path.dormant {
    stroke: rgba(122,47,8,0.3); stroke-width: 1.2;
    stroke-dasharray: 3 5;
    filter: none;
  }
  @keyframes chakraflow {
    to { stroke-dashoffset: -26; }
  }
  .ladder > .rank-step { z-index: 2; }
  /* 章マーカー（縦区切り・絵巻/和紙モチーフは廃止）*/
  .rank-step {
    background: transparent;
    border: none;
    padding: 18px 12px 22px;
    position: relative; text-align: center;
    transition: all 0.3s ease;
  }
  /* 左右の墨縦線（章の区切り）*/
  .rank-step::before {
    content: ''; position: absolute;
    top: 8px; bottom: 8px; right: -7px;
    width: 1px;
    background: repeating-linear-gradient(180deg,
      rgba(122,47,8,0.38) 0 4px,
      transparent 4px 7px);
  }
  .ladder .rank-step:last-child::before { display: none; }
  .rank-step.reached {
    background: linear-gradient(180deg, rgba(255, 118, 1,0.08), rgba(255, 118, 1,0.18));
  }
  .rank-step.reached .seal { color: #c04e10; }
  .rank-step.current .seal { color: var(--fire); text-shadow: 0 0 12px rgba(255, 118, 1,0.4); }
  .rank-step .seal-wrap {
    position: relative; width: 56px; height: 56px; margin: 0 auto 10px;
  }
  /* 章番号墨文字ラベル */
  .rank-step .seal {
    position: relative; z-index: 2;
    width: 56px; height: 56px;
    display: grid; place-items: center;
    font-weight: 700; color: var(--ink-40); font-size: 22px;
    transition: all 0.3s ease;
  }
  /* チャクラコア（章マーカー底部の単一発光点） */
  .rank-step .chakra-core {
    position: absolute; left: 50%; bottom: -7px; transform: translateX(-50%);
    width: 12px; height: 12px; border-radius: var(--r-tile);
    border: 1.5px dashed var(--ink-20); background: var(--scroll);
    z-index: 3;
  }
  .rank-step.reached .chakra-core {
    border-style: solid; border-color: var(--fire); background: var(--fire);
    box-shadow: 0 0 10px rgba(255, 118, 1,0.55), 0 0 22px rgba(255, 118, 1,0.25);
  }
  .rank-step.current .chakra-core {
    animation: corepulse 1.8s ease-in-out infinite;
  }
  @keyframes corepulse {
    0%,100% { transform: translateX(-50%) scale(1);   box-shadow: 0 0 10px rgba(255, 118, 1,0.55), 0 0 22px rgba(255, 118, 1,0.25); }
    50%     { transform: translateX(-50%) scale(1.35); box-shadow: 0 0 18px rgba(255, 118, 1,0.85), 0 0 36px rgba(255, 118, 1,0.45); }
  }
  .rank-step .rank-ch {
    font-family: var(--font-body); font-weight: 900;
    font-size: var(--fs-mini); letter-spacing: 0.22em; color: var(--ink-40);
    margin-bottom: 4px;
  }
  .rank-step.reached .rank-ch { color: var(--fire-dark); }
  .rank-step .rank-name {
    font-size: var(--fs-note); font-weight: 900; letter-spacing: 0.06em;
    color: var(--ink-80);
  }
  .rank-step.reached .rank-name { color: var(--nb-text); }
  .rank-step.current .rank-name { color: var(--fire-dark); }
  .rank-step .rank-num {
    font-size: var(--fs-mini); font-family: var(--font-body); font-weight: 700; letter-spacing: 0.1em;
    color: var(--ink-40); margin-top: 6px;
  }
  .rank-step.reached .rank-num { color: var(--fire); }
  .rank-step.current::after {
    content: 'いま ここ'; position: absolute; top: -10px; left: 50%; transform: translateX(-50%);
    background: var(--fire); color: var(--ink); font-size: var(--fs-mini); font-weight: 900;
    padding: 3px 10px; border-radius: var(--r-pill); letter-spacing: 0.14em;
    border: 1.5px solid var(--ink);
    white-space: nowrap;
  }

  /* 🔴🔴【自作の重複セレクタ門・2026-09-08・PM裁定＝削除】この2行はChapterLadder.astroの
     どのテンプレートにも対応する要素が無い死んだ規則だったが、data.astro（国別集計の行・
     class="country-row"）と名前が衝突し、後勝ちでdisplay/gapを上書きしていた
     （壊し確認＝削除前は自作の門が赤・削除後は緑を確認）。 */
  .flags-mini { display: flex; gap: 8px; flex-wrap: wrap; }
  .flag-chip {
    padding: 6px 14px; background: var(--scroll);
    border: 1.5px solid var(--ink-20);
    border-radius: var(--r-pill); font-size: var(--fs-mini); font-weight: 700;
    display: flex; align-items: center; gap: 8px;
    color: var(--nb-text);
  }
  .flag-chip.dashed { border-style: dashed; color: var(--ink-80); }

  /* ========== TODAY CALENDAR CARD (歳時記) ========== */
  .today-card {
    padding: 56px 32px 64px;
    background: var(--scroll);
    position: relative;
  }
  .today-card-inner {
    max-width: 1080px;
    margin: 0 auto;
    background: var(--nb-card);
    border-radius: var(--r-card);
    box-shadow: var(--elev-2);
    padding: 32px 36px;
    min-height: 168px;
  }
  .today-card-eyebrow {
    display: inline-block;
    font-size: var(--fs-mini); font-weight: 900; letter-spacing: 0.22em;
    color: #fff; background: var(--ink);
    padding: 6px 14px; border-radius: var(--r-pill);
    margin-bottom: 18px;
    transform: rotate(-1.5deg);
  }
  .today-card-heading {
    font-size: clamp(1.25rem, 2.4vw, 1.85rem);
    font-weight: 900; line-height: 1.45; letter-spacing: -0.01em;
    margin: 0 0 6px;
    color: var(--nb-text);
    display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
  }
  .today-card-heading .placeholder {
    color: var(--ink-60); font-weight: 700; font-size: var(--fs-note);
  }
  .today-label {
    font-size: var(--fs-mini); font-weight: 900; letter-spacing: 0.08em;
    padding: 4px 10px; border-radius: var(--r-pill);
    white-space: nowrap;
    align-self: flex-start;
  }
  .today-label--birthday_char { background: var(--cal-birthday-char-bg); color: var(--cal-birthday-char-fg); }
  .today-label--birthday_va   { background: var(--cal-birthday-va-bg); color: var(--cal-birthday-va-fg); }
  .today-label--real          { background: var(--cal-real-bg); color: var(--cal-real-fg); }
  .today-label--inuniverse    { background: var(--cal-inuniverse-bg); color: var(--cal-inuniverse-fg); }
  .today-label--event         { background: var(--cal-event-bg); color: var(--cal-event-fg); }
  .today-name { color: var(--nb-text); }
  .today-name-sep { color: var(--ink-40, var(--ink-60)); font-weight: 700; }
  .today-name-entry { display: flex; flex-direction: column; gap: 4px; }
  .today-card-heading--multi { flex-direction: column; align-items: flex-start; gap: 8px; }
  .today-card-heading--multi .today-names-row {
    display: flex; flex-direction: column; gap: 14px;
  }
  .today-card-heading--multi .today-name-sep { display: none; }
  .today-years { font-size: var(--fs-note); color: var(--ink-60); font-weight: 700; }
  .today-fallback-days { color: var(--fire); font-size: clamp(1.4rem, 3vw, 2rem); }
  .today-fallback-text { color: var(--ink-60); font-size: var(--fs-note); font-weight: 700; }

  .today-card-body { margin-top: 0; }
  .today-rest-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
  .today-rest { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; font-size: var(--fs-note); color: var(--nb-text); }
  .today-rest-years { font-size: var(--fs-note); color: var(--ink-60); }

  .today-card-related {
    margin-top: 20px;
    padding-top: 18px;
    border-top: 1px dashed var(--ink-20);
  }
  .today-related-heading {
    font-size: var(--fs-mini); font-weight: 900; letter-spacing: 0.15em;
    color: var(--ink-60); margin: 0 0 10px;
  }
  .today-related-list {
    list-style: none; padding: 0; margin: 0;
    display: flex; flex-direction: column; gap: 8px;
  }
  .today-related-list a {
    display: flex; flex-direction: column; gap: 2px;
    padding: 10px 14px;
    background: var(--scroll);
    border: 1.5px solid var(--ink-20);
    border-radius: var(--r-card);
    color: var(--nb-text);
    text-decoration: none;
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
  }
  .today-related-list a:hover {
    transform: translate(-2px, -2px);
    box-shadow: var(--elev-2);
    border-color: var(--ink);
  }
  .today-related-quote { font-weight: 900; font-size: var(--fs-note); line-height: 1.4; }
  .today-related-name { font-size: var(--fs-note); color: var(--ink-60); font-weight: 700; }

  .today-card-more { margin-top: 14px; }
  .today-more-link {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: var(--fs-note); font-weight: 900; letter-spacing: 0.04em;
    color: var(--fire); text-decoration: none;
    border-bottom: 1.5px solid currentColor;
    transition: opacity 0.15s;
  }
  .today-more-link:hover { opacity: 0.75; }

  .today-card-noscript { color: var(--ink-60); font-size: var(--fs-note); margin: 0; }

  /* --- hero variant: ヒーロー右セルに収まる軽量体裁 --- */
  .today-card--hero {
    padding: 0;
    background: transparent;
    border-top: none;
    border-bottom: none;
  }
  .today-card--hero .today-card-inner {
    max-width: none;
    width: 100%;
    padding: 28px 30px;
    min-height: 0;
    box-shadow: var(--elev-2);
  }
  .today-card--hero .today-card-eyebrow {
    margin-bottom: 14px;
    font-size: var(--fs-mini);
  }
  .today-card--hero .today-card-heading {
    font-size: clamp(0.9rem, 1.5vw, 1.15rem);
    line-height: 1.45;
    gap: 4px;
  }
  .today-card--hero .today-names-row {
    flex-direction: column;
    gap: 14px;
  }
  .today-card--hero .today-name-sep { display: none; }
  .today-card--hero .today-name { font-size: var(--fs-note); line-height: 1.45; }
  .today-card--hero .today-rest { font-size: var(--fs-note); }
  .today-card--hero .today-fallback-days { font-size: clamp(1.2rem, 2.4vw, 1.7rem); }
  .today-card--hero .today-related-list a { padding: 9px 12px; }
  .today-card--hero .today-related-quote { font-size: var(--fs-note); }

  /* ========== MANGA PANELS (STORIES) ========== */
  .stories {
    padding: 96px 32px 120px;
    position: relative; overflow: hidden;
  }
  .stories::before {
    content: ''; position: absolute; inset: 0;
    pointer-events: none;
  }
  .stories-inner { max-width: 1280px; margin: 0 auto; position: relative; z-index: 2; }
  .stories-header { margin-bottom: 56px; text-align: center; }  /* 中央統一（owner 2026-06-09） */
  .stories-eyebrow {
    display: inline-block; font-size: var(--fs-mini); font-weight: 900; letter-spacing: 0.22em;
    color: #fff; background: var(--ink); padding: 6px 14px; border-radius: var(--r-pill);
    margin-bottom: 18px; transform: rotate(-1.5deg);
  }
  .stories-title {
    font-size: clamp(1.8rem, 4.2vw, 3rem); font-weight: 900; line-height: 1.2;
    max-width: 980px; margin-left: auto; margin-right: auto;
    text-wrap: balance; word-break: keep-all; overflow-wrap: anywhere;
  }
  .stories-title .stroke {
    color: var(--nb-text);
  }

  .manga-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-auto-rows: minmax(80px, auto);
    gap: 22px;
  }
  .mp {
    background: var(--nb-card);
    border-radius: var(--r-card); padding: 22px 22px 20px;
    position: relative;
    box-shadow: var(--elev-2);
    transition: transform 0.25s cubic-bezier(.5,1.4,.4,1), box-shadow 0.25s ease;
    text-decoration: none; color: var(--nb-text);
    display: flex; flex-direction: column;
    min-width: 0;
    max-width: 100%;
  }
  .mp:hover {
    transform: translate(-3px, -4px) rotate(var(--hr, 0deg));
    box-shadow: var(--elev-float);
    z-index: 5;
  }

  .mp .chip {
    font-size: var(--fs-mini); font-weight: 900; letter-spacing: 0.14em;
    padding: 4px 10px; border-radius: var(--r-pill); border: 1.5px solid var(--ink);
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  /* オレンジ地に白文字はコントラスト約2.68:1でAA未達 → 墨色に（WO-076 #5・.hero-creedと同じ処方）。owner未確認・2026-08-29 */
  /* 地(--fire)は明暗固定・文字(--nb-text)は明暗反転→暗表示で2.29:1に壊れる→固定の墨に（決まり0・2026-09-09） */
  .mp .chip.naruto { background: var(--fire); color: var(--ink); }
  /* 🔴 決まり0（2026-09-08）＝明るい地の上の文字にオレンジは使わない（#fff4e6は明るい地） */
  .mp .chip.boruto { background: #fff4e6; color: var(--ink); border: 1.5px solid var(--fire); }
  .mp .chip.two    { background: var(--nb-card); color: var(--nb-text); }
  .mp .shuriken {
    width: 22px; height: 22px; color: var(--nb-text);
    opacity: 0.35; flex-shrink: 0;
    transition: transform 0.4s cubic-bezier(.3,1.8,.3,1), opacity 0.25s;
  }
  .mp:hover .shuriken { transform: rotate(360deg); opacity: 1; color: var(--fire); }
  .mp .q {
    font-size: var(--fs-body); font-weight: 900; line-height: 1.55; letter-spacing: -0.005em;
    flex: 1; margin-bottom: 16px;
    /* 文字数差で行高が崩れ一覧のスキャン性が落ちるため3行でクランプ（owner 2026-06-07） */
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;
  }
  .mp .q .pop {
    background: var(--fire); color: var(--ink); padding: 0 4px; border-radius: var(--r-pill);
  }
  .mp .byline { display: flex; gap: 10px; font-size: var(--fs-mini); font-weight: 700; }
  .mp .avatar {
    width: 32px; height: 32px; border-radius: var(--r-tile);
    /* 地(--fire)は明暗固定・文字(--nb-text)は明暗反転→暗表示で2.29:1に壊れる→固定の墨に（決まり0・2026-09-09） */
    background: var(--fire); color: var(--ink);
    display: grid; place-items: center; font-weight: 900; font-size: var(--fs-note);
    flex-shrink: 0;
  }
  .mp .byline .who { line-height: 1.3; }
  .mp .byline .who .name { font-weight: 900; }
  /* 直書き#888は.mp(--nb-card)地で4.1:1・AA未達→控えめ文字の役割札に（決まり0・2026-09-09・実測=明4.54:1・暗5.88:1） */
  .mp .byline .who .place { font-size: var(--fs-mini); color: var(--nb-text-muted); letter-spacing: 0.08em; }

  /* 🔴 画像付き投稿のみ: カード右上に「ピン留めポラロイド」を absolute 配置
     カード高さに一切影響を与えず、v3 のピン留め紙片言語と整合させる。
     ⚠️ 【WO-026【5】・2026-08-16】**これは VoiceCard.astro が今も使っている**（StoryCard.astro は
        下の `.mp-photo-card` 系へ移行したが、VoiceCard は対象外＝そのまま残す）。 */
  .mp-thumb {
    position: absolute;
    top: -14px;
    inset-inline-end: -14px;
    width: 82px;
    height: 62px;
    border-radius: var(--r-card);
    background: var(--nb-card);
    box-shadow: var(--elev-2);
    overflow: hidden;
    transform: rotate(3deg);
    transition: transform 0.25s cubic-bezier(.5,1.4,.4,1);
    z-index: 4;
  }
  .mp-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
  }
  .mp-thumb-tag {
    position: absolute;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    font-size: var(--fs-mini);
    font-weight: 900;
    letter-spacing: 0.14em;
    color: var(--ink-60, #555);
    background: var(--scroll-deep, #f0ebe0);
  }
  .mp-thumb.mp-thumb-fallback img { display: none; }
  .mp-thumb.mp-thumb-fallback .mp-thumb-tag { display: flex; }
  .mp:hover .mp-thumb { transform: rotate(0deg) translate(-2px, -2px); }

  /* 🔴🔴 【WO-026【5】・H04・P-253・2026-08-16・椿さんFIX】**StoryCard.astro の写真は切らずに全体・
     PCは写真＋右にキャッチコピー。**
     ⚠️ StoryCard.astro だけ、上の `.mp-thumb`（object-fit:cover＝切る）から乗り換えた。
        「切らない」という要求と「固定の小窓に収める」という前の設計は両立しないため、
        小さな上書きではなく骨組みごと差し替えた（`StoryCard.astro` も分岐を分けている）。
     ⚠️ **写真の高さは固定しない**（`height:auto`）＝縦長の写真をレターボックスや切り落としで
        誤魔化さない。縦長の投稿はカードそのものが縦に伸びる（これは仕様＝椿さんの要求の帰結）。 */
  .mp-photo-card {
    flex-direction: row;
    align-items: flex-start;
    gap: 18px;
  }
  .mp-photo {
    flex: 0 0 auto;
    width: 34%;
    max-width: 168px;
    min-width: 96px;
    border: 1px solid var(--hair);
    border-radius: var(--r-card);
    overflow: hidden;
    background: var(--nb-card);
    position: relative;
  }
  .mp-photo img {
    display: block;
    width: 100%;
    height: auto;   /* 🔴 自然な縦横比のまま＝切らない・引き伸ばさない */
  }
  .mp-photo-tag {
    position: absolute;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    font-size: var(--fs-mini);
    font-weight: 900;
    letter-spacing: 0.14em;
    color: var(--ink-60, #555);
    background: var(--scroll-deep, #f0ebe0);
    min-height: 62px;
  }
  .mp-photo-card.mp-photo-fallback .mp-photo img { display: none; }
  .mp-photo-card.mp-photo-fallback .mp-photo-tag { display: flex; }
  .mp-body {
    flex: 1 1 0%;
    min-width: 0;
    display: flex;
    flex-direction: column;
  }
  /* 画像付きカードは装飾の手裏剣を隠す（写真と役割重複）*/
  .mp[data-has-image] .shuriken { display: none; }

  /* DOM 順: a, c, d, e, g, h, i, j, b
     段1: a(5) + c(3) + d(4) = 12
     段2: e(5) + g(4) + h(3) = 12
     段3: i(4) + j(4) + b(4) = 12 */
  .mp-a { grid-column: span 5; --hr: -1deg;   transform: rotate(-1deg); }
  .mp-c { grid-column: span 3; --hr: -0.5deg; transform: rotate(-0.5deg); margin-top: 12px; }
  .mp-d { grid-column: span 4; --hr: 0.8deg;  transform: rotate(0.8deg); margin-top: -8px; }
  .mp-e { grid-column: span 5; --hr: -1.3deg; transform: rotate(-1.3deg); }
  .mp-g { grid-column: span 4; --hr: -0.8deg; transform: rotate(-0.8deg); margin-top: -10px; }
  .mp-h { grid-column: span 3; --hr: 1.5deg;  transform: rotate(1.5deg); margin-top: 6px; }
  .mp-i { grid-column: span 4; --hr: -0.6deg; transform: rotate(-0.6deg); }
  .mp-j { grid-column: span 4; --hr: 0.7deg;  transform: rotate(0.7deg); margin-top: -8px; }
  .mp-b { grid-column: span 4; --hr: 1.2deg;  transform: rotate(1.2deg); margin-top: 14px; }

  .mp-img {
    background: linear-gradient(135deg, #ffd9b8 0%, #ffbb85 100%);
    color: var(--nb-text);
    align-items: flex-start; justify-content: space-between;
  }
  .mp-img .hatched {
    position: absolute; inset: 0; border-radius: var(--r-card); pointer-events: none;
    background-image: repeating-linear-gradient(45deg, rgba(26,26,26,0.06) 0 2px, transparent 2px 8px);
  }
  .mp-img .bigq {
    font-size: 140px; line-height: 0.7; color: var(--nb-text); opacity: 0.12;
    position: absolute; top: 0; inset-inline-end: 12px; pointer-events: none;
  }
  /* ③：空き枠＝「あなたのきっかけを描く」Gペン先（漫画のつけペン・手裏剣と被らない・owner 2026-06-04）。 */
  .mp-img .nib-mark {
    position: absolute; top: 14px; inset-inline-end: 16px; width: 44px; height: 44px;
    stroke: var(--ink); stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round;
    opacity: 0.34; pointer-events: none;
  }
  .mp-img .caption {
    position: relative; z-index: 1;
    font-size: var(--fs-sec); font-weight: 900; line-height: 1.55;
    width: 100%; max-width: 100%;
    text-align: start;
    padding-inline-end: 56px;
    box-sizing: border-box;
  }
  .mp-img .caption .row { display: block; }
  .mp-img .caption .row + .row { margin-top: 0.18em; }
  .mp-img .caption em { font-style: normal; color: var(--fire-dark); }
  .mp-img .cap-meta {
    position: relative; z-index: 1;
    font-size: var(--fs-mini); font-weight: 900; letter-spacing: 0.18em;
  }

  .stories-foot {
    display: flex; justify-content: center; flex-wrap: wrap; gap: 16px;
    margin-top: 56px;
  }
  .all-link {
    display: inline-flex; align-items: center; gap: 12px;
    font-size: var(--fs-body); font-weight: 900; color: var(--nb-text); text-decoration: none;
    padding: 14px 28px; background: var(--nb-card);
    border-radius: var(--r-pill);
    box-shadow: var(--elev-2);
    transition: all 0.2s ease;
    min-height: var(--tap-primary);
  }
  .all-link:hover { transform: translate(-2px,-2px); box-shadow: var(--elev-float); }

  /* ========== Backstage (サイトの裏側コーナー・控えめ設計) ========== */
  .backstage {
    padding: 80px 32px 96px;
    background: var(--cream, #faf6ec);
  }
  .backstage-inner {
    max-width: 720px; margin: 0 auto;
    background: var(--nb-card);
    box-shadow: var(--elev-2);
    padding: 40px 36px;
  }
  .backstage-eyebrow {
    font-size: var(--fs-mini); font-weight: 900; letter-spacing: 0.22em;  /* 他のアイブロウと統一（owner 2026-06-09） */
    color: var(--fire); margin-bottom: 18px;
  }
  .backstage-body {
    font-size: var(--fs-body); line-height: 1.85;
    color: var(--nb-text); margin: 0 0 14px;
  }
  .backstage-body:last-of-type { margin-bottom: 24px; }
  .backstage-link {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: var(--fs-note); font-weight: 900; color: var(--nb-text); text-decoration: none;
    padding: 10px 20px; background: var(--nb-card);
    border-radius: var(--r-pill);
    box-shadow: var(--elev-1);
    transition: all 0.2s ease;
    min-height: var(--tap);
  }
  .backstage-link svg { flex-shrink: 0; }
  .backstage-link:hover { transform: translate(-1px,-1px); box-shadow: var(--elev-2); }
  .backstage-link-primary { background: var(--ink); color: #fff; }
  .backstage-links {
    display: flex; flex-direction: row; flex-wrap: wrap; align-items: center;
    gap: 12px;
  }
  @media (max-width: 720px) {
    .backstage { padding: 64px 20px 72px; }
    .backstage-inner { padding: 28px 22px; box-shadow: var(--elev-2); }
    .backstage-links { flex-direction: column; align-self: stretch; align-items: stretch; }
    .backstage-link { justify-content: center; }
  }

  /* ========== CTA ========== */
  /* 🔴 決まり0（2026-09-08）＝オレンジの面の上は墨 */
  .cta {
    position: relative; overflow: hidden;
    padding: 120px 32px 132px;
    background: var(--fire);
    color: var(--ink);
  }
  .cta::before {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background:
      repeating-conic-gradient(from 180deg at 50% 50%,
        transparent 0deg, transparent 2deg,
        rgba(26,26,26,0.12) 2deg, rgba(26,26,26,0.12) 2.4deg);
    mask-image: radial-gradient(circle at 50% 50%, transparent 180px, #000 520px);
    -webkit-mask-image: radial-gradient(circle at 50% 50%, transparent 180px, #000 520px);
  }
  .cta::after {
    content: '忍';
    position: absolute; right: -80px; bottom: -140px;
    font-weight: 700; font-size: 560px;
    line-height: 0.8; color: var(--nb-text); opacity: 0.08;
    pointer-events: none;
  }
  /* 🔴 .cta-inner はここに無い＝死んだ .cta ファミリの中にだけ在ったが、bare selector が
     生きた .cta-fire .cta-inner（本ファイル前方639行）と同名で衝突する箱だった（値は今は
     一致していて無害だが、片方だけ直すと再現する .cta-note と同型・2026-09-10除去）。 */
  .cta-stamp {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 8px 18px; background: var(--ink); color: var(--fire);
    font-weight: 900; font-size: var(--fs-mini); letter-spacing: 0.24em;
    border-radius: var(--r-pill); margin-bottom: 28px;
    transform: rotate(-2deg);
  }
  .cta h2 {
    font-size: clamp(2.2rem, 5vw, 4.2rem);
    font-weight: 900; line-height: 1.15; letter-spacing: -0.01em;
    margin-bottom: 28px;
    word-break: keep-all; overflow-wrap: break-word;
  }
  .cta h2 .box {
    display: inline-block; background: var(--ink); color: var(--fire);
    padding: 0 14px; margin: 0 2px;
    transform: rotate(-1deg);
  }
  .cta-lead {
    font-size: var(--fs-body);
    line-height: 1.9; font-weight: 500;
    max-width: 640px; margin: 0 auto 44px;
    color: rgba(255,255,255,0.95);
  }
  .cta-lead .row { display: block; }
  .cta-lead .row + .row { margin-top: 8px; }
  .cta-lead .nb {
    display: inline-block; font-weight: 900; color: #fff;
    background: rgba(26,26,26,0.25); padding: 2px 10px; border-radius: var(--r-pill);
    margin: 2px 4px;
  }

  .cta-cta {
    display: inline-flex; align-items: center; gap: 14px;
    padding: 22px 48px; border-radius: var(--r-pill);
    background: var(--ink); color: #fff;
    font-size: var(--fs-body); font-weight: 900; letter-spacing: 0.04em;
    text-decoration: none;
    box-shadow: var(--elev-float);
    transition: all 0.22s cubic-bezier(.5,1.4,.4,1);
    min-height: var(--tap-primary);
  }
  .cta-cta:hover {
    background: var(--nb-card); color: var(--nb-text);
    transform: translate(-3px,-3px);
    box-shadow: var(--elev-float);
  }
  .cta-cta .arrow { transition: transform 0.25s ease; }
  .cta-cta:hover .arrow { transform: translateX(8px); }

  /* 🔴 このブロックの兄弟(.cta/.cta-lead/.cta-cta等)はテンプレートから参照が無い死んだ規則だが、
     .cta-note だけは無関係に見えて class名がバレて.cta-fireの生きた要素と衝突する
     （同じ詳細度・後勝ち＝この定義が上の.cta-fire用の定義を上書きしていた。2026-09-09発見） */
  .cta-note {
    margin-top: 28px; font-size: var(--fs-note);
    width: fit-content; max-width: 100%; margin-inline: auto; /* 🔴【WO-132】真ん中の案内＝箱を文字の幅に縮めて真ん中へ */
    color: var(--ink); font-weight: 500;
  }
  .cta-note a { color: var(--ink); border-bottom: 2px solid var(--ink); padding-bottom: 1px; }
  .cta-note a:hover { border-bottom-color: var(--ink); }

  /* ========== FOOTER (現行公開版と一致) ========== */
  /* 🔴 発注書 A-8（PM裁定・2026-09-08・持ち越し表C-I7）＝面積が広すぎる。
     色（墨の塊）は触らない＝サイズだけ詰める。48px 32px → 24px 16px。 */
  /* 🔴🔴【WO-rv2-A・フッター横取り是正・2026-09-09・PM裁定】プロフィール編集シートを
     開いた状態で、写真ALTボタンの中心が SPAN.brand-mark（このフッターの子孫）に横取り
     される不具合があった。機構＝ `#mp2-shell { isolation: isolate; }` が内部のシート
     一式を閉じ込める一方、`.brand-mark`（transform:rotate(-6deg)持ち）は `.foot` が
     スタッキング文脈を作らないため body の共有文脈へ抜け、tree order で `.foot` が
     `<main>` より後にあることを理由に overlay より手前へ出ていた。
     ⇒ 直し方は `.foot` ではなく `#mp2-shell` 側（MemberProfileShell.astro の同セレクタ・
     明示的な z-index）に置いた＝サイト全部に影響する `.foot` を触らずに済むため。
     壊し確認＝scripts/qa/qa-mps-photo-hit.mjs の「中心を横取りされたボタンがある」。 */
  .foot {
    background: var(--ink); color: rgba(255,255,255,0.6);
    padding: 24px 16px; text-align: center;
    font-size: var(--fs-note);
  }
  .foot .brand-mark { display: inline-grid; margin-bottom: 16px; }
  /* 🔴 発注書 A-8＝行間を詰める（20px 28px → 12px 20px）。 */
  .foot .links { display: flex; gap: 12px 20px; justify-content: center; margin-bottom: 18px; flex-wrap: wrap; }
  /* 🔴 発注書 A-17（PM裁定・2026-09-08）＝A-8の密度詰め（padding/gap縮小）で、フッター12項目の
     押す的が44px未満になった（qa-tap-target.mjs実測・基準1087→1475件に増加、うち12件×ほぼ全ページが
     この行）。見た目の詰まり（文字サイズ・padding-inline）はそのまま・タップ領域だけ44pxを確保する。
     ⚠️ 【実測で発覚】min-heightだけでは足りない＝「ホーム」等の短い文言は幅が44px未満のまま
     残っていた（isSizeIssue は幅・高さのどちらか一方でも44px未満なら赤）。⇒ min-width も足す。
     文字の周りに透明な余白が増えるだけで、文字サイズ・字間・padding-inlineは1つも変えていない
     （タップ領域だけを見た目の外側へ広げる一般的な手法）。 */
  .foot a { color: rgba(255,255,255,0.75); text-decoration: none; font-weight: 700; font-size: var(--fs-mini); letter-spacing: 0.08em;
    min-height: var(--tap); min-width: var(--tap); display: inline-flex; align-items: center; justify-content: center; }
  .foot a:hover { color: var(--fire); }
  .foot .note { font-size: var(--fs-mini); color: rgba(255,255,255,0.5); width: fit-content; max-width: 100%; margin-inline: auto; } /* 🔴【WO-132】真ん中の案内＝箱を文字の幅に縮めて真ん中へ（中の文字は左から） */

  /* ========== RESPONSIVE ========== */
  /* ヘッダー：ナビ(4リンク＋言語＋投稿CTA)＋ログインが干渉する手前(~1180px)でハンバーガー化（owner 2026-06-09・タブレット対応）。
     項目が多いので 960 では遅く、タブレット幅で衝突していた。HERO/グリッド等の他レスポンシブは 960 のまま。 */
  @media (max-width: 1250px) {
    .nav { display: none; }
    .menu-btn { display: block; }
    .header { position: relative; }
    .nav.nav-open {
      display: flex; flex-direction: column; align-items: stretch; gap: 0;
      position: absolute; top: 100%; left: 0; right: 0;
      background: var(--scroll); padding: 12px 24px 20px;
      box-shadow: var(--elev-2), 0 8px 24px rgba(26,26,26,0.12);
      z-index: 100;
    }
    .nav.nav-open a { padding: 14px 0; font-size: var(--fs-body); border-bottom: 1px solid var(--ink-20); }
    .nav.nav-open a:last-of-type { border-bottom: none; }
    /* ハンバーガーは border-bottom で区切る＝デスクトップ用の下線インジケータ(::after)は出さない。
       現在地(active)項目の ::after が縦並びでフル幅の黒線になる不具合の解消（owner 2026-06-10） */
    .nav.nav-open a::after { display: none; }
    .nav.nav-open .lang-switcher { padding-top: 8px; }
    .nav.nav-open .lang-menu { position: static; box-shadow: none; border: 1px solid var(--ink-20); margin-top: 8px; }
    /* 🔴 margin-left/right は「左右の決め打ち」＝アラビア語（dir="rtl"）で逆向きに働く。
       margin-inline-start/end は「文の始まる側／終わる側」なので両方で正しく効く。
       左から読む言語での見た目は完全に同じ（inline-start = left になるため）。2026-08-09 */
    .header-auth { margin-inline-start: auto; }
    .header .header-auth .btn { min-width: 0; }
    .nav.nav-open .header-cta { width: 100%; justify-content: center; margin-top: 12px; padding: 12px 16px; border-bottom: none; }
  }
  @media (max-width: 960px) {
    .hero-inner { grid-template-columns: 1fr; gap: 36px; }
    .hero-stack { height: 440px; max-width: 460px; margin: 0 auto; }
    .rank-frame { padding: 32px 36px 28px; margin: 0 auto; max-width: none; }
    .manga-grid { grid-template-columns: repeat(6, 1fr); }
    .mp-a,.mp-b,.mp-c,.mp-d,.mp-e,.mp-g,.mp-h,.mp-i,.mp-j { grid-column: span 6; margin-top: 0; margin-left: 0; }
  }
  @media (max-width: 640px) {
    .preview-banner { letter-spacing: 0.14em; padding: 6px 10px; gap: 10px; }
    .header-inner { padding: 10px 16px; gap: 10px; }
    .header-cta { padding: 9px 16px; }
    .brand-text .sub { display: none; }
    /* 🔴 印は絵になったので `border-width`（線が無い）と `box-shadow`（影を外した）は死んだ宣言。大きさだけ残す。 */
    .brand-mark { width: 38px; height: 38px; }
    .hero-title .underline-swoop { stroke-width: 3; }

    .hero { padding: 64px 20px 80px; overflow: hidden; }
    /* 装飾 SVG はモバイルで間引く（密度過多回避） */
    .hero-eyebrow { padding: 6px 12px; letter-spacing: 0.14em; }
    .hero-title { font-size: clamp(1.6rem, 6.6vw, 2.2rem); line-height: 1.3; max-width: 100%; }
    /* モバイルは画面幅優先で折り返し許可（keep-all で語中改行は防ぐ）。nowrap は横スクロールの原因なので外す */
    .hero-title .line-1, .hero-title .line-2 { white-space: normal; }
    /* swoop はモバイルで h1 幅に追従させ、はみ出しを防ぐ */
    .hero-title .underline-swoop { width: 100%; height: auto; }
    /* モバイル: 直下の swoop（オレンジ波線）と重なって見栄えが悪いため装飾下線を非表示 */
    .hero-title .hl::after { display: none; }
    .hero-sub { line-height: 1.85; margin-bottom: 28px; }
    .hero-actions .btn { width: 100%; justify-content: center; padding: 11px 18px; min-width: 0; min-height: var(--tap-primary); border-width: 2px; }
    .hero-actions { gap: 10px; margin-bottom: 28px; }
    /* モバイルでは右側プレビューカードは下部 "最新の投稿" に任せるため非表示 */
    .hero-stack { display: none; }
    .scroll-cue { display: none; }

    .mission { padding: 40px 14px 48px; }
    .mission-header { text-align: center; max-width: none; margin-bottom: 20px; }
    .mission-lead { margin: 10px auto 0; max-width: none; }
    .rank-frame {
      padding: 28px 20px 24px; margin: 0 14px; max-width: none;
    }
    .rank-progress { max-width: 100%; margin: 36px auto 28px; }
    .rank-progress-goal { inset-inline-start: auto; inset-inline-end: 0; top: calc(100% + 8px); transform: rotate(4deg); }
    .goal-mark { padding: 1px 6px; }
    .rank-count { font-size: 44px; }
    .rank-count .big { font-size: 72px; }
    .rank-count .goal { font-size: 22px; }
    .rank-meta { text-align: start; width: 100%; }
    .rank-meta .val .num { white-space: normal; }
    /* モバイル: ladder を1列・横並びシンプル化 */
    .ladder {
      display: flex; flex-direction: column; gap: 2px;
      margin-bottom: 4px;
    }
    .rank-step {
      padding: 8px 10px;
      display: grid;
      grid-template-columns: 48px 1fr auto 14px;
      grid-template-areas:
        "seal ch  num core"
        "seal name name core";
      align-items: center; column-gap: 14px; row-gap: 2px;
      text-align: start;
    }
    .rank-step::before { display: none; }
    .rank-step .seal-wrap { grid-area: seal; margin: 0; width: 48px; height: 48px; }
    .rank-step .seal      { width: 48px; height: 48px; }
    .rank-step .rank-ch   { grid-area: ch;   margin: 0; }
    .rank-step .rank-name { grid-area: name; }
    .rank-step .rank-num  { grid-area: num;  margin: 0; }
    .rank-step .chakra-core {
      grid-area: core; position: static; transform: none;
      width: 12px; height: 12px;
    }
    .rank-step.current .chakra-core { animation: corepulseStatic 1.8s ease-in-out infinite; }
    @keyframes corepulseStatic {
      0%,100% { transform: scale(1);    box-shadow: 0 0 8px rgba(255, 118, 1,0.55); }
      50%     { transform: scale(1.35); box-shadow: 0 0 14px rgba(255, 118, 1,0.85); }
    }
    /* current の "いま ここ" バッジはモバイルでは step の外側上に押し出し、文字との被りを回避 */
    .ladder .rank-step.current { margin-top: 14px; }
    .rank-step.current::after {
      top: -12px; left: 12px; transform: none;
      padding: 2px 8px; letter-spacing: 0.12em;
    }
    /* モバイルでは章間チャクラ線（横方向ベジェ）は意味を失うため非表示 */
    .chakra-lines { display: none; }
    /* 🔴 上と同じ理由（2026-09-08）で削除＝ChapterLadder.astroに対応する要素が無い死んだ規則 */
    /* Project 100 縦圧縮追加項目 */
    .rank-top { margin-bottom: 14px; gap: 12px; }

    .today-card { padding: 32px 14px 40px; }
    .today-card-inner { padding: 22px 18px; min-height: 140px; }
    .today-card-heading { gap: 4px; line-height: 1.5; }
    .today-related-list a { padding: 9px 12px; }
    .today-card--hero { padding: 0; }
    .today-card--hero .today-card-inner {
      padding: 20px 18px 22px; min-height: 0;
      border-width: 2px;
      box-shadow: var(--elev-2);
    }
    .today-card--hero .today-card-eyebrow {
      margin-bottom: 12px; padding: 4px 10px;
      letter-spacing: 0.18em;
    }
    .today-card--hero .today-card-heading {
      line-height: 1.45; gap: 4px; margin: 0;
    }
    .today-card--hero .today-fallback-days {
      display: inline-block; margin-inline-end: 2px;
    }
    .today-card--hero .today-fallback-text { line-height: 1.4; }
    .today-card--hero .today-card-related { margin-top: 10px; padding-top: 10px; }
    .today-card--hero .today-related-heading { margin-bottom: 6px; }
    .today-card--hero .today-related-list { gap: 5px; }
    .today-card--hero .today-related-list a { padding: 6px 10px; }
    .today-card--hero .today-related-quote { line-height: 1.3; }

    .stories { padding: 72px 20px 88px; }
    .stories-header { margin-bottom: 40px; }
    .stories-title { font-size: clamp(1.6rem, 7vw, 2.2rem); }
    .manga-grid { grid-template-columns: 1fr; gap: 18px; }
    .mp-a,.mp-b,.mp-c,.mp-d,.mp-e,.mp-g,.mp-h,.mp-i,.mp-j {
      grid-column: 1 / -1; transform: none; margin-top: 0; margin-inline-start: 0; --hr: 0deg;
    }
    /* モバイルは 3 カードに絞り込み（最初の声 + 短い声 + 投稿 CTA）*/
    .mp-d, .mp-e, .mp-g, .mp-h, .mp-i, .mp-j { display: none; }
    .mp { padding: 18px 18px 16px; box-shadow: var(--elev-2); }
    .mp-img .caption { padding-inline-end: 24px; }
    .mp-img .bigq { font-size: 100px; }
    /* 🔴 【WO-026【5】・H04・2026-08-16】スマホは写真を上・本文を下に積む（横幅が無く並べられない）。
       ⚠️ ここも「切らない」は維持＝`height:auto` のまま、幅だけ枠いっぱいにする。 */
    .mp-photo-card { flex-direction: column; gap: 12px; }
    .mp-photo { width: 100%; max-width: none; min-width: 0; }

    .cta { padding: 56px 20px 64px; }
    .cta-stamp { margin-bottom: 18px; padding: 6px 14px; }
    .cta h2 { font-size: clamp(1.8rem, 7vw, 2.4rem); margin-bottom: 18px; }
    .cta-lead { line-height: 1.85; margin-bottom: 28px; }
    .cta-cta {
      padding: 14px 22px;
      width: 100%; max-width: 100%;
      justify-content: center; box-sizing: border-box;
      min-height: var(--tap-primary); gap: 10px;
      box-shadow: var(--elev-float);
    }
    .cta-note { margin-top: 18px; }
    .cta::after { font-size: 320px; right: -80px; bottom: -120px; }

    /* 🔴 発注書 A-8（PM裁定・2026-09-08）＝スマホでは12項目を2列にして高さを半分以下に。
       ⚠️ 640px以下では基本の padding（24px 16px）をさらに縮めない＝縦の詰まりは列を
       2つにすることで作る（幅を詰めると文字が窮屈になる）。 */
    .foot { padding: 24px 16px; }
    .foot .links {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px 16px;
      justify-items: center;
    }
  }

  /* 🔴🔴【下部ナビとの重なり是正・2026-09-10・PM指示・sweep実測で発見】
     `<footer>`（このブロックの .foot）は BaseLayout.astro で `<main>` の**兄弟**として
     描かれる＝ main の padding-bottom（下部ナビの避け代）はフッターを一切守らない。
     フッターは平らな `padding: 24px 16px`（上の2箇所）しか持たず、ナビとの依存が
     無かったため、**免責文言（.note）が浮くナビの帯の下に埋もれていた**
     （実測＝ JA/light/safe-area 34px と 0px のどちらでも 39/41 画面で再現）。
     ⇒ `--bn-nav-clearance`（:root・このファイル冒頭）は main 側と同じ1つの値。
     数を直書きしない＝直書きすると「2箇所が同じ値のはずが片方だけ古い」という
     今回とまったく同じ事故を再発させる。ナビが出る768px以下でだけ、
     フッターの下だけを追加で空ける（上下左右の他の値は上の2箇所のまま）。 */
  @media (max-width: 768px) {
    .foot { padding-bottom: var(--bn-nav-clearance); }
    /* 🔴【UAT第10便b・PM 実測 2026-09-17】ナビの上に**固定の帯が出ている**画面では、その帯のぶんも避ける。
       帯はサイトに2種類だけ＝
       ①コレクションの「アイテムを追加／共有する」（`#mp2-col-dock`・ボタン 48px）
       ②体験談を書く画面の「公開する／下書きに保存」（`.mp2-feature-dock`・ボタン 48px＋上下 12px＋上の線 1px）。
       どちらも帯の上に 8px 空ける。
       ⚠️ ①は**コレクションの面（`#mp2-panel-collection`）が開いている（`.on`）ときだけ**数える。
          帯は面の中に置かれていて、`hidden` が外れていても**面ごと隠れている画面が在る**（実測＝体験談を書く・行った場所）。
          `:not([hidden])` だけで見ると、帯の無い画面まで空き、体験談を書く画面では②より強い①が勝って帯に 17px 重なる。
       ⭐ 帯の位置（`bottom: calc(76px + 安全域)`）は動かさない＝避けるのはページの側。
       ⚠️ 実寸を書き写さず変数を参照する（ナビの高さを変える日に片方だけ直し忘れないため）。 */
    body:has(#mp2-panel-collection.on #mp2-col-dock:not([hidden])) {
      --bn-bottom-ui: calc(var(--bn-nav-clearance) + var(--tap-primary, 48px) + 8px);
    }
    body:has(.mp2-feature-dock) {
      --bn-bottom-ui: calc(var(--bn-nav-clearance) + var(--tap-primary, 48px) + 2 * 12px + 1px + 8px);
    }
    body:has(#mp2-panel-collection.on #mp2-col-dock:not([hidden])) .foot,
    body:has(.mp2-feature-dock) .foot {
      padding-bottom: var(--bn-bottom-ui);
    }
    /* 🔴【WO-092・第4便】フォーラムの固定の帯（書く画面の「確認／下書きに保存」・記事の一覧の「記事を書く／外部記事を登録」）。
       どちらもボタン 48px だけの帯＝コレクションの帯と同じ避け代。上の2つの塊は検査が形のまま読むので、別の塊にする。 */
    body:has(#kiji-w-dock),
    body:has(.kiji-phone-actions) {
      --bn-bottom-ui: calc(var(--bn-nav-clearance) + var(--tap-primary, 48px) + 8px);
    }
    body:has(#kiji-w-dock) .foot,
    body:has(.kiji-phone-actions) .foot {
      padding-bottom: var(--bn-bottom-ui);
    }
  }

  /* ========== REDUCED MOTION (a11y) ========== */
  /* 本ファイルのアニメはすべて「可視状態からの微動」のみ（0%→1 のフェードインは無し）。
     そのため duration 短縮のみで不可視事故は発生しない。transform/opacity の強制上書きはしない。*/
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
    }
  }

/* ============================================================
   V3 DESIGN SYSTEM — STORY DETAIL
   v3 リデザイン後の体験談詳細ページスタイル本体。
   （旧 .story-detail block と .v3 prefix は Phase 7+ で撤廃済み）
   ============================================================ */

/* 🔴🔴【椿さんご指摘・2026-09-13「ヘッダーの下に白いスペースが出ている」の直し】
   ~~`padding: 48px 0 64px`~~ ⇒ **上の 48px を墨の帯（`.story-header-dark`）の内側へ移した。**
   ⚠️ 実測（直す前・PC 1512px）＝`.story-detail` は y=64（オレンジのヘッダーの直下）から始まり、
      墨の帯は y=112 から。**その間の 48px は、この要素自身の地色**＝明るい表示では #f4f4f5 の
      白い帯、暗い表示でも帯（#232326）と違う #1c1c1e の段差として見えていた。
   ⭐ 余白の量は変えていない＝**置き場所だけを帯の内側へ移した**ので、中身の呼吸は同じ。 */
.story-detail { background: var(--scroll); padding: 0 0 var(--space-lg); min-width: 0; }
/* 🔴【UAT 7-4・2026-09-16】ページ全体を囲うカード（地・角丸・影・820px）を撤去。
   主要な表示領域は他面と同じ `--content-max`（1280px）に揃える。左右余白は guidelines-inner と同じ。 */
.story-detail .story-detail-inner {
  background: transparent;
  box-shadow: none;
  padding: var(--space-md) var(--space-md) var(--space-lg);
  max-width: var(--content-max);
  margin: 0 auto;
  position: relative;
  min-width: 0;
}

/* パンくず */
.story-detail .breadcrumb { color: var(--nb-text-muted); font-size: 13px; font-weight: 600; margin-bottom: 28px; }
.story-detail .breadcrumb a { color: var(--ink-80); text-decoration: none; transition: color 0.15s; }
.story-detail .breadcrumb a:hover { color: var(--fire); }
.story-detail .breadcrumb span { color: var(--nb-text); font-weight: 700; }

/* ヘッダー */
.story-detail .story-header { margin-bottom: 36px; position: relative; }
/* 🔴 【WO-114・P-1326】頭の右上の「…」（通報する）＝頭を基準に置く（上の position:relative）。 */
.story-detail .story-report { position: absolute; top: 0; right: 0; z-index: 2; }
/* 🔴 【WO-114・P-1326】通報した体験談は、通報した人には中身の代わりにこの1文だけ（story-safety.js が出す）。 */
.story-detail .story-reported { margin: 24px 0; font-size: var(--fs-note); color: var(--text-dim); }
/* 🔴 【WO-115・P-1326】通報した体験談の札・行は、通報した人の画面から外す（story-hide-reported.js が付ける）。 */
.nb-reported-hidden { display: none !important; }
.story-detail .story-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; }
/* 🔴 決まり0（2026-09-08）＝オレンジの面・オレンジの上は墨（下2行とも） */
/* 【椿さん その23・案B】--fs-mini（13px）に */
.story-detail .story-tags .tag-large { font-size: var(--fs-mini); font-weight: 900; letter-spacing: 0.14em; padding: 6px 14px; border-radius: 999px; border: 1.5px solid var(--ink); background: var(--fire); color: var(--ink); text-transform: uppercase; }
.story-detail .story-tags .tag-large.tag-media { background: #fff4e6; color: var(--ink); border-color: var(--fire); }
/* 🔴【UAT第9便④・椿さんご指摘 2026-09-17】札の上に項目名を1行置く（縦に積む）。
   ⚠️ 並びの規則（`display:flex` と 8px の間隔）は上の `.story-tags` のまま＝**そこは触らない。** */
.story-detail .story-tags .tag-col { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; min-width: 0; }
/* 🔴🔴【PM 実測・2026-09-22】~~`color: var(--ink)`~~ ⇒ **役割の札 `--nb-text`。**
   ⚠️ `--ink` は**色そのものの呼び名**で、暗い側の上書きが無い（定義1か所）。
      暗い表示ではほぼ黒のまま残り、#1C1C1E の地の上で**読みやすさ 1.02**（実測・1.0 が同色）＝
      「初めて見た作品」「メディア」が**見えていなかった**。
   ⭐ 明るい表示では `--nb-text: var(--ink)` なので**見た目は1ドットも動かない**。 */
/* 【椿さん その23・案B】--fs-mini（13px）に */
.story-detail .story-tags .tag-col__k { font-size: var(--fs-mini); font-weight: 700; letter-spacing: 0.04em; color: var(--nb-text); opacity: 0.66; }
.story-detail .story-catchphrase { font-family: var(--font-body); font-size: var(--fs-page); font-weight: 900; line-height: 1.5; color: var(--nb-text); margin: 0 0 var(--space-sm); letter-spacing: -0.005em; word-break: keep-all; overflow-wrap: break-word; }
.story-detail .story-meta { display: flex; flex-wrap: wrap; gap: 14px; font-size: 13px; font-weight: 700; color: var(--nb-text-muted); align-items: center; }
.story-detail .story-meta .story-name { color: var(--nb-text); font-size: 15px; font-weight: 900; }
.story-detail .story-meta .story-meta-item { position: relative; padding-inline-start: 14px; }
.story-detail .story-meta .story-meta-item::before { content: '·'; position: absolute; inset-inline-start: 0; color: var(--ink-40); }
.story-detail .story-meta .story-date { color: var(--nb-text-muted); font-weight: 500; }

/* 【椿さん その23・案B】--fs-mini（13px）に */
.story-detail .translation-notice { display: inline-block; font-size: var(--fs-mini); font-weight: 900; letter-spacing: 0.14em; padding: 6px 14px; border-radius: 4px; background: var(--ink); color: #fff; margin-top: 20px; transform: rotate(-1.2deg); }
.story-detail .translation-notice.translation-notice--translated { background: var(--fire); }

/* 画像 */
.story-detail .story-image { margin: 36px 0 36px; }
.story-detail .story-image img { width: 100%; border-radius: 8px; box-shadow: var(--elev-tile); display: block; }
/* 【椿さん その23・案B】--fs-mini（13px）に */
.story-detail .story-image-caption { font-size: var(--fs-mini); font-weight: 600; color: var(--ink-60); margin-top: 12px; text-align: center; }

/* 🔴【椿さんご指摘・2026-09-22】「地にそのまま文字が書かれてる感じ」＝本文が地の上に直に乗っていた。
   ⇒ コラムを読む面（`.article`）と同じ形で、**本文だけ**を白い面に乗せる。
   ⚠️ ページ全体を囲うカードは 2026-09-16（UAT 7-4）に椿さんの指示で撤去した。**戻さない。** */
.story-detail .story-body {
  margin: 36px 0;
  background: var(--nb-card);
  border: 1px solid var(--ink-20);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  padding: 1.6rem 1.5rem 2.4rem;
}
.story-detail .story-section { margin-bottom: 32px; }
/* 🔴🔴【椿さんご指定・2026-09-22・第7便】章の見出しは**墨で塗った札**（白抜き文字）。
   ⚠️ ~~I-49-c（B-14・PM裁定）＝黒地の回転ラベル(付箋風)を撤去し素の見出しへ~~ を**上書きする**。
      ⭐ 前の裁定が嫌ったのは**傾いた付箋**であって、墨の札そのものではない
        （今回のは**傾けない・平ら**）。しかも前のは PM 裁定で、今回は椿さんのご指定。
      🔴 **この1行を消さない**＝消すと、次に読む人が「撤去した形をなぜ戻したのか」を辿れず、
        I-49-c を根拠に元へ戻す。 */
/* ⚠️ 文字の大きさの段は6つだけ（--fs-page/sec/sub/body/note/mini）＝ここは札なので --fs-note。
   ⚠️ 幅は中身ぶんだけ。行いっぱいに伸ばさない。 */
.story-detail .story-section h2 {
  /* 🔴🔴【椿さんご指定・2026-09-22】**角丸ではなく四角。**
     ⚠️ 新しい形ではない＝**BORUTO の話数一覧の日付の札**（`.an2-chapters-day`・:7683）と
        **トップの流れる面の日付の札**（`.dl-day`）が、もとから角 0 の墨の札。**それを写す。**
     ⚠️ 色は `--ink` / `#fff` の直書きではなく **役割の札**（`--nb-text` / `--nb-surface`）。
        直書きだと**暗い表示で反転しない**（写し元は役割の札で書かれている）。 */
  display: inline-flex;
  align-items: center;
  min-height: var(--icon-circle);
  padding: 0 0.9rem;
  font-weight: 900;
  font-size: var(--fs-note);
  line-height: 1;
  letter-spacing: 0.22em;
  color: var(--nb-surface);
  background: var(--nb-text);
  margin: 0 0 var(--space-sm);
}
/* 🔴【WO-132】keep-all を外した＝上の本文の決まり（1文字単位・両端揃え）に乗る。keep-all のまま両端をそろえると、言葉の切れ目が無い行の字間が大きく空く。 */
.story-detail .story-section p { color: var(--ink-80); line-height: 1.9; font-size: var(--fs-body); white-space: pre-wrap; overflow-wrap: break-word; }
/* 🔴 I-49-c是正（B-14-1・PM裁定）＝黒地の付箋を前提にオレンジで塗り分けていた個別規則を撤去。
   付箋自体が無くなった今、これだけ橙の塗りが残ると余白の無い矩形になる（PM実測で発見）。
   「観てみたい」節も他の節と同じ素の見出しに統一（流れる面に装飾を足さない）。 */

/* ひとこと */
.story-detail .story-message { background: var(--fire-soft); border-inline-start: 4px solid var(--fire); border-radius: 4px; padding: 22px 28px; margin: 36px 0; }
/* 【椿さん その23・案B】--fs-mini（13px）に */
.story-detail .story-message .message-label { font-size: var(--fs-mini); font-weight: 900; letter-spacing: 0.22em; color: var(--fire); margin-bottom: 10px; text-transform: uppercase; }
.story-detail .story-message .message-quote { font-size: 18px; font-weight: 700; color: var(--nb-text); line-height: 1.7; margin: 0; }

/* アクションバー */
.story-detail .story-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 40px 0 24px; }
/* 🔴 D-7a（2026-09-08）＝コマ割り影を撤去。文字色は既に墨（決まり0に抵触していない）。 */
/* 【椿さん その23・案B】--fs-note（15px）に */
.story-detail .action-btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; background: var(--nb-card); border: 1px solid var(--hair); border-radius: 999px; color: var(--nb-text); font-family: var(--font-body); font-size: var(--fs-note); font-weight: 800; cursor: pointer; text-decoration: none; transition: transform 0.15s, background 0.15s, color 0.15s; }
.story-detail .action-btn:hover { transform: translate(-1px, -1px); }
.story-detail .action-btn .action-icon { display: inline-flex; }
.story-detail .action-btn.liked,
.story-detail .action-btn.favorited { background: var(--fire); color: var(--ink); }

/* わかる！CTA バブル */
.story-detail .like-cta { background: var(--nb-card); border-radius: 12px; box-shadow: var(--elev-2); padding: 18px 22px; margin: 20px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 14px; opacity: 0; transform: translateY(-6px); transition: opacity 0.25s ease, transform 0.25s ease; }
.story-detail .like-cta.like-cta--visible { opacity: 1; transform: translateY(0); }
/* 【椿さん その23・案B】--fs-note（15px）に */
.story-detail .like-cta-text { color: var(--nb-text); font-weight: 700; font-size: var(--fs-note); flex: 1; margin: 0; }
.story-detail .like-cta-link { display: inline-flex; align-items: center; padding: 8px 16px; background: var(--fire); color: var(--ink); border-radius: 999px; font-size: 13px; font-weight: 900; text-decoration: none; transition: transform 0.15s, box-shadow 0.15s; }
.story-detail .like-cta-link:hover { transform: translate(-1px, -1px); box-shadow: var(--elev-float); }
.story-detail .like-cta-close { background: none; border: none; cursor: pointer; color: var(--ink-60); font-size: 20px; line-height: 1; padding: 0 4px; font-weight: 900; }
.story-detail .like-cta-close:hover { color: var(--fire); }

/* アフィリエイト */
.story-detail .affiliate-section { margin: var(--space-md) 0; padding: var(--space-md) 0; background: transparent; border-top: 1px solid var(--hair); }
/* 【椿さん その23・案B】--fs-mini（13px）に */
.story-detail .affiliate-label { display: inline-block; font-size: var(--fs-mini); font-weight: 900; letter-spacing: 0.22em; padding: 6px 14px; border-radius: 4px; background: var(--ink); color: #fff; margin-bottom: 18px; transform: rotate(-1.2deg); text-transform: uppercase; }
.story-detail .affiliate-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.story-detail .affiliate-link { display: flex; align-items: center; gap: 12px; padding: 14px 18px; background: var(--nb-card); border-radius: 10px; text-decoration: none; color: var(--nb-text); transition: transform 0.15s, box-shadow 0.15s; }
.story-detail .affiliate-link:hover { transform: translate(-2px, -2px); box-shadow: var(--elev-2); }
/* 【椿さん その23・案B】--fs-mini（13px）に */
.story-detail .affiliate-shop { font-size: var(--fs-mini); font-weight: 900; letter-spacing: 0.12em; padding: 3px 9px; border-radius: 3px; background: var(--fire); color: var(--ink); flex-shrink: 0; }
/* 【椿さん その23・案B】--fs-note（15px）に */
.story-detail .affiliate-title { flex: 1; font-size: var(--fs-note); font-weight: 700; }
.story-detail .affiliate-arrow { color: var(--ink-60); font-weight: 900; }

/* 関連体験談 */
.story-detail .related-stories { margin: 48px 0 36px; }
.story-detail .related-stories-title { font-family: var(--font-body); font-size: clamp(1.4rem, 3vw, 1.9rem); font-weight: 900; color: var(--nb-text); margin-bottom: 24px; letter-spacing: 0.02em; }
.story-detail .related-stories-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 22px; }

/* 前後ナビ */
.story-detail .story-prev-next { display: flex; justify-content: space-between; gap: 14px; margin: 40px 0 28px; flex-wrap: wrap; }
.story-detail .story-prev-next .prev-next-link { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; background: var(--nb-card); border: 1px solid var(--hair); border-radius: 999px; color: var(--nb-text); font-size: 13px; font-weight: 700; text-decoration: none; transition: transform 0.15s, box-shadow 0.15s; max-width: 48%; }
.story-detail .story-prev-next .prev-next-link:hover { transform: translate(-2px, -2px); box-shadow: var(--elev-1); }
/* 🔴【PM 実測・2026-09-22】~~`color: var(--fire)`~~ ⇒ **`--fire-text`。**
   ⚠️ 決まり0（椿さん 2026-09-06）＝**オレンジは明るい地の上の文字色に使わない。**
      ここは明るい地の上の 13px で、実測 **2.68**（本文の目安 4.5・大きな文字でも 3.0）。
   ⭐ `--fire-text` はこのために在る札（明るい面では #b54a00・暗い面では橙へ反転する）。 */
.story-detail .story-prev-next .prev-next-arrow { font-weight: 900; color: var(--fire-text); }
.story-detail .story-prev-next .prev-next-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* 投稿CTA / ナビアクション */
.story-detail .story-cta { text-align: center; margin: 44px 0 0; padding: 32px 24px; background: var(--scroll-deep); border-radius: 12px; }
/* 🔴 D-7a（2026-09-08）＝主ボタン①（橙・墨）に合わせる。コマ割り影は撤去。 */
.story-detail .story-cta .btn.btn-primary.btn-large { display: inline-flex; align-items: center; gap: 10px; padding: 14px 28px; background: var(--fire); color: var(--ink); border-radius: 999px; font-size: 15px; font-weight: 900; text-decoration: none; transition: transform 0.15s; }
.story-detail .story-cta .btn.btn-primary.btn-large:hover { transform: translate(-1px, -1px); }
.story-detail .story-cta-sub { display: flex; justify-content: center; gap: 18px; margin-top: 18px; flex-wrap: wrap; }
.story-detail .btn-text-link { background: none; border: none; cursor: pointer; color: var(--nb-text-muted); font-size: 13px; font-weight: 600; text-decoration: none; transition: color 0.15s; font-family: var(--font-body); padding: 4px 8px; }
.story-detail .btn-text-link:hover { color: var(--fire); }

/* 多言語詳細ページの .story-nav-actions（.btn.btn-outline 含む） */
.story-detail .story-nav { text-align: center; margin: 44px 0 0; }
.story-detail .story-nav-actions { display: flex; justify-content: center; gap: 12px; margin-top: 24px; flex-wrap: wrap; }
.story-detail .story-nav-actions .btn { display: inline-flex; align-items: center; padding: 10px 22px; border-radius: 999px; font-size: 13px; font-weight: 800; text-decoration: none; border: 1px solid var(--hair); transition: transform 0.15s; cursor: pointer; font-family: var(--font-body); }
.story-detail .story-nav-actions .btn.btn-outline { background: var(--nb-card); color: var(--nb-text); }
.story-detail .story-nav-actions .btn.btn-outline:hover { transform: translate(-1px, -1px); }
/* 🔴 D-7a（2026-09-08）＝主ボタン①（橙・墨）に合わせる。コマ割り影は撤去。 */
.story-detail .story-nav-actions .btn.btn-primary { background: var(--fire); color: var(--ink); }
.story-detail .story-nav-actions .btn.btn-primary:hover { transform: translate(-1px, -1px); }

/* モバイル調整 */
@media (max-width: 720px) {
  .story-detail .story-detail-inner { padding: var(--space-sm) var(--space-sm) var(--space-md); box-shadow: none; }
  .story-detail .affiliate-section { margin: var(--space-sm) 0; padding: var(--space-sm) 0; }
  .story-detail .story-meta { gap: 10px; }
  .story-detail .story-meta .story-meta-item { padding-inline-start: 0; }
  .story-detail .story-meta .story-meta-item::before { display: none; }
  .story-detail .story-prev-next { flex-direction: column; }
  .story-detail .story-prev-next .prev-next-link { max-width: 100%; justify-content: space-between; }
}
/* spot-map AIO answer-first lead（AIO Phase B 第2弾） */
.spot-aio-lead {
  margin: 24px 0 16px;
  color: var(--ink-80);
  font-size: 1rem;
  line-height: 1.7;
  font-weight: 600;
}
@media (max-width: 720px) {
  .spot-aio-lead { font-size: 0.95rem; margin: 16px 0 12px; }
}

/* stories 索引の AIO answer-first lead（AIO Phase B 第2弾 次点） */
.stories-aio-lead {
  margin-top: 12px;
  font-size: var(--fs-body);
  line-height: 1.7;
  font-weight: 500;
  color: var(--ink-80);
}


/* cache-bust: 20260516 */

/* ============================================================
   BORUTO -TWO BLUE VORTEX- 感想タイムライン（/boruto/*）
   すべて .boruto-page スコープ限定＝他ページ（NARUTO オレンジ系）には一切影響しない。
   設計: docs/boruto-timeline-detail.md §8 / モック scripts/boruto-timeline-mock/index.html。
   公式 TBV パレット: raised=#00a3d6（シアン）/ base=#000系 / text=白・グレー。
   v1 スコープ＝感想(comment)のみ・1カラム。考察2カラム/共感/返信/シェア/考察詳細は v1.1（未移植）。
   ============================================================ */
/* 🔴🔴【UAT3・2026-08-30】この節の前置きは `.boruto-page` から
   **`:is(.boruto-page,[id="mp2-shell"])`（以下「共有の門」）** に変えてある（518か所）。

   ■ なぜ（実害）
     設定パネル等の装飾はここに `.boruto-page 〜` と書かれている。`/account/*` は `BorutoLayout`
     経由で `<body class="boruto-page …">` が付くので当たる。ところが `/members/<住所>/` は
     `BaseLayout` 直＝`<body class="">` で**1本も当たらない**。
     ⚠️ そして **2026-08-28 以降、会員が実際に見る入口は `/members/` の方**
        （`src/pages/account.astro:18` が `location.replace` で飛ばす）。
     ⇒ **会員が見る画面だけ、見た目の指定が丸ごと死んでいた**（実測38本）。

   ■ なぜ `[id="mp2-shell"]`（`#mp2-shell` ではなく属性の書き方）か
     🔴 **詳細度を1ミリも動かさないため。**`#mp2-shell` を `:is()` に入れると `:is()` の詳細度は
        **引数の最大＝ID(1,0,0)** になり、`AccountSideMenu.astro` のスコープ指定
        （`.acc2-side .mp-tabs button.on` 等）を**この節が黙って上書きしてしまう**。
        属性セレクタ `[id="…"]` は**クラスと同じ (0,1,0)**＝`.boruto-page` と同値なので、
        `:is()` の最大値も (0,1,0) のまま＝**マイページ側の勝ち負けは1つも変わらない。**
        ⚠️ **この説明文の中に半角の「アスタリスク＋スラッシュ」を書かないこと。**そこでコメントが
           終わってしまい、**この下の変数定義ごと丸ごと壊れる**（初版で実際に踏んだ＝
           BORUTO の帯・フッタの色が全部消えた。差分を測って初めて分かった）。
        （手法の出どころ＝CSS Selectors Level 4 の `:is()` 詳細度規則＋
          「ID を属性で書いて詳細度を下げる」という広く知られた書き方）
     ⚠️ **`/members/` の body に `boruto-page` を足す手は採らない**（BORUTO のシアンの帯・
        ヘッダ・フッタごとページ全体が別物に化ける＝`AccountSideMenu.astro:757` の却下理由）。
        `#mp2-shell` は**入れ物**なので、`… .header` のような子孫の指定は**中に無ければ当たらない**。
        ⇒ 実測でも、新しく当たるようになったのは**設定・プロフィール一族だけ**だった。

   ■ 見張り＝`node scripts/qa/qa-scoped-css-liveness.mjs`（壊し確認つき） */
/* 🔴 **この BORUTO シアンの色札の定義だけは `.boruto-page` のまま**（共有の門に入れない）。
   ⚠️ 入れると `/account/` が壊れる（**実測で28件の色が変わった**）＝`/account/` の色は
      下の `.naruto-theme`（オレンジ）で上書きされているが、その札は **body に付いている**。
      `#mp2-shell` にシアンの札を置くと、**body より近い**ので**シアンが勝ってしまう**。
   ⇒ **`#mp2-shell` に配るのはオレンジの方**（下の `:is(.boruto-page.naruto-theme,[id="mp2-shell"])`）。
      マイページ・プロフィールは元々オレンジなので、これで `/account/` と `/members/` が揃う。 */
.boruto-page{
  --boruto:#00a3d6; --boruto-deep:#0083ac; --boruto-dark:#00567a; --boruto-ink:#021824;
  /* 本文地色は彩度を抜いた薄グレー（白だとカードと同化・水色だと柔らかくなる＝UX審査2026-06-02）。
     🔴 【WO-021・P-1049・2026-08-14 椿さん決定「揃える」】~~`#f1f3f5`~~ → **`var(--scroll)` を参照。**
     ⚠️ **同じ色を書き写さない。**書き写すと、次に地の色を変える人が**1つ書き忘れて、また今日と
        同じこと**（画面ごとに地の色が違う）が起きる。⇒ 地の色の正本は `:root` の `--scroll` 1か所。 */
  --boruto-soft:#cdeef9; --boruto-bg:var(--scroll); --boruto-link:#00729c;
  background:var(--boruto-bg);
  --font-serif:var(--font-body); /* このページは明朝を使わない（sans に統一） */
}
/* 🔴 線画アイコンの既定（塗りつぶさない）。`/members/` では `<main>` が `#mp2-shell` の**外側**
   なので、門だけ差し替えても `#mp2-shell main svg` は1つも当たらない（実測 shell=0）。
   ⇒ **門ではなく「入れ物」の側を2つ並べる**。詳細度は `.boruto-page main`(0,1,1) と
   `[id="mp2-shell"]`(0,1,0) の最大＝(0,1,1) で、元の `.boruto-page main`(0,1,1) と同値。 */
:is(.boruto-page main,[id="mp2-shell"]) svg:not([fill]){fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;display:inline-block;vertical-align:middle}

/* ヘッダー: 現行 .header を TBV青へ上書き（シアン地でヒーローとシームレス・濃紺#021824文字でコントラスト確保） */
:is(.boruto-page,[id="mp2-shell"]) .header{background:rgba(0,163,214,.96);border-bottom:none;backdrop-filter:none}
:is(.boruto-page,[id="mp2-shell"]) .header .brand-text .jp{color:#021824}
:is(.boruto-page,[id="mp2-shell"]) .brand-text .sub{color:#021824}
:is(.boruto-page,[id="mp2-shell"]) .header .nav a{color:#021824}
:is(.boruto-page,[id="mp2-shell"]) .nav a::after{background:#021824}
:is(.boruto-page,[id="mp2-shell"]) .header .nav a:hover,:is(.boruto-page,[id="mp2-shell"]) .nav a.active{color:#021824}
:is(.boruto-page,[id="mp2-shell"]) .nav a.active::after{width:100%}
:is(.boruto-page,[id="mp2-shell"]) .header-cta{background:#021824;border-color:#021824;color:#fff}
:is(.boruto-page,[id="mp2-shell"]) .header-cta:hover{background:#fff;color:#021824;box-shadow:var(--elev-float)}
:is(.boruto-page,[id="mp2-shell"]) .menu-btn{border-color:#021824}
:is(.boruto-page,[id="mp2-shell"]) .menu-btn span{background:#021824}
:is(.boruto-page,[id="mp2-shell"]) .lang-switcher-btn{color:#021824;border-color:rgba(2,24,36,.3)}
:is(.boruto-page,[id="mp2-shell"]) .lang-switcher-btn:hover{border-color:#021824;color:#021824}
/* ヘッダーの左右幅を広く使う（タイトルを左端・投稿/ログインを右端へ） */
:is(.boruto-page,[id="mp2-shell"]) .header-inner{max-width:1560px;padding-left:1.6rem;padding-right:1.6rem;justify-content:flex-start}
:is(.boruto-page,[id="mp2-shell"]) .brand{margin-inline-end:auto} /* 左右決め打ちにしない（rtl で帯が左に寄る）・2026-08-09 */
:is(.boruto-page,[id="mp2-shell"]) .header-auth{display:inline-flex;align-items:center;gap:10px}
/* 会員アイコン/ログインは会員機能として全ページ共通（.boruto-page 非依存化 2026-06-04）。
   アイコンも他のヘッダーボタンと同じ 38px に揃える（既定30pxだと高さ・サイズがズレる）。 */
.header-auth{display:inline-flex;align-items:center;gap:10px}
.header-auth .avatar{width:38px;height:38px;font-size:1rem}
.header-auth .btn{padding:9px 20px;font-size:12.5px;font-weight:900;border:2px solid #021824;color:#021824;background:transparent}
/* hover モーションを投稿CTAと統一（持ち上がり＋ハードブロック影）。階層は塗り/枠で表現し、動きは揃える */
.header-auth .btn:hover{background:#021824;color:#fff;transform:translate(-2px,-2px);box-shadow:var(--elev-float)}
/* BORUTO ヘッダーのログインは枠線ボタン（透明地＋濃紺枠＋濃紺文字）に。
   既定の .boruto-page .btn の boruto-deep(#0083ac) ベタ塗りはヘッダー cyan(#00a3d6) と色が近く濁って見える＝上書き（owner 2026-06-10）。
   hover は濃紺ベタに反転（持ち上げ/影は generic hover を流用）。 */
:is(.boruto-page,[id="mp2-shell"]) .header .header-auth .btn { background: transparent; color: #021824; border: 2px solid #021824; }
:is(.boruto-page,[id="mp2-shell"]) .header .header-auth .btn:hover { background: #021824; color: #fff; }
/* ヘッダー操作ボタン（日本語/投稿/ログイン）は高さを **`--tap` 44px** に統一（幅は文字数で自然可変・全ページ対応）。
   🔴🔴【椿さん決定・2026-09-14】~~38px~~ → **44px**。逐語＝「ヘッダーのボタンをログインと言語を
   44px に上げるで良いです。それであればいずれのボタンも44pxにするのが良いかもしれませんね」。
   ⚠️ **それまでは「見た目38px＋透明な `::before` で44px」だった**（`SatoMapHeader.astro:246-252`）。
      ⇒ **見た目そのものを44pxにした**ので、`::before` の下駄は二重になっていないかを実物で見ること。
   ⭐ **このコメントは 2026-09-14 まで「38px に統一」と書いたまま残っていた**＝
      コードだけ直してコメントを置き去りにすると、次に読む人は**古い数字を正しいと信じる。** */
   display は各ボタン自身の inline-flex に任せる（上書きすると guest-only/member-only の display:none トグルに勝つため）。高さだけ統一。 */
/* 🔴【A-19続き・2026-09-08・死んだCSS是正】~~.header .lang-switcher-btn, .header .header-cta,~~
   の2つを外した＝v2の複合セレクタ（下・L5449付近）が同じ min-height/box-sizing/line-height/
   transition を再宣言済みで、ここにいる限り一度も勝てなかった（後勝ち・フォーマット違いのみ）。
   .header .header-auth .btn だけは v2 側の複合セレクタに含まれていない＝このブロックが
   唯一の供給元なので残す（宣言単位の削除・ブロックは消していない）。 */
.header .header-auth .btn{
  min-height:var(--tap);box-sizing:border-box;line-height:1;
  transition:transform .12s,box-shadow .12s,background .12s,color .12s
}
/* 投稿(+体験談を投稿する)とログインを同じ横幅に揃える（owner 2026-06-04・言語切替は短いまま除外）。
   ※デスクトップ限定。モバイルは投稿CTAがハンバーガー内・バーにはログインだけ＝13.5em強制だと巨大化して崩れる
   （source 末尾でモバイル override に勝っていた不具合を min-width:961px で根治・owner 2026-06-06） */
@media (min-width: 1251px) {
  /* 投稿CTAとログインを同幅に揃えるのは「両方がバーに並ぶ」幅だけ＝ハンバーガー化(1250px)に下限を一致。
     旧 961px はハンバーガー breakpoint を 960→1250 に上げた際の追従漏れで、畳んだ後もログインが 13.5em で肥大していた（owner 2026-06-09 修正）。 */
  .header .header-cta,
  .header .header-auth .btn{ min-width: 13.5em; }
}
/* BORUTO は投稿CTAが ≤1280px で非表示（下記 .boruto-page .header-cta display:none）＝相方不在なので
   ログインの 13.5em 幅合わせを解除し内容幅に戻す（owner 2026-06-09 BORUTOログイン肥大の修正） */
@media (max-width: 1280px) {
  :is(.boruto-page,[id="mp2-shell"]) .header .header-auth .btn { min-width: 0; }
}
@media(max-width:1250px){  /* 基本ヘッダーの折り畳みを1180へ上げたのに合わせる（owner 2026-06-09・タブレット衝突対策） */
  /* 🔴 WO-090是正で `.nav.nav-open` 本体（4173行）から border-top を撤去したため、border-top-color 上書きは死んだ宣言だった。削除。 */
  :is(.boruto-page,[id="mp2-shell"]) .nav.nav-open{background:#00a3d6;box-shadow:var(--elev-2),0 8px 24px rgba(0,0,0,.25)}
  :is(.boruto-page,[id="mp2-shell"]) .nav.nav-open a{border-bottom-color:rgba(2,24,36,.15)}
  :is(.boruto-page,[id="mp2-shell"]) .header-auth{margin-inline-start:auto} /* 同上・2026-08-09 */
}

/* フッター: 現行 .foot を黒(#021824)へ上書き
   🔴 発注書 A-22（PM裁定・2026-09-08）＝`[id="mp2-shell"]` の代替を外した（オプション(a)）。
   ⚠️ 理由＝`.foot`（Footer.astro）は BaseLayout.astro が `<main>` の**兄弟**として描く要素で、
   `#mp2-shell`（`<main>` の中）の子孫には決してなれない。子孫セレクタでは橋渡しできない構造
   （セレクタの順序・詳細度をどう変えても解決しない）＝これは D-7a-1 の `.btn` のような
   カスケードの勝ち負けの問題ではない。加えて `/members/<住所>/` は会員個人のプロフィールで
   あって BORUTO コンテンツではないので、そもそもフッターを BORUTO 色にする意図が無い
   （オーナー裁定＝`.boruto-page` だけに正直にスコープする）。 */
.boruto-page .foot{background:var(--boruto-ink)}
.boruto-page .foot a:hover,.boruto-page .foot-follow-link:hover{color:var(--boruto)}
/* 🔴 WO-090是正で `.brand-mark` 本体（3089行）から border を撤去したため、border-color 上書きは死んだ宣言だった。削除。 */
/* 🔴 濃紺のフッターの上は濃いシアンの手裏剣（2026-09-23・印が絵になったので影は外した）。 */
.boruto-page .foot .brand-mark{background:var(--boruto-deep)}

/* 共通: avatar / btn（青）。avatar は会員UIとして全ページで使う＝.boruto-page 非依存＋色は変数フォールバックで実値（2026-06-04）。 */
/* 🔴【WO-092・第6便・椿さん 2026-09-21】「文字の大きさは規定に揃えて。」
   ⚠️ これはサイト共通の部品で、フォーラムの面の中にも出る（感想の行・記事の一覧）。
      ここだけ規定の外に残ると、そろえた周りの中で1つだけ半端な大きさになる。 */
.avatar{width:30px;height:30px;border-radius:50%;background:var(--boruto-soft,#cdeef9);display:inline-flex;align-items:center;justify-content:center;font-weight:700;color:var(--boruto-ink,#021824);font-size:var(--fs-note);overflow:hidden;flex:none;text-decoration:none}
.avatar.lg{width:64px;height:64px;font-size:1.4rem}
/* 【椿さん その23・案B】--fs-mini（13px）に */
.avatar.xs{width:18px;height:18px;font-size:var(--fs-mini)}
.avatar img{width:100%;height:100%;object-fit:cover;border-radius:50%}
/* グローバル .btn（ヒーロー用CTA）の min-width:220px/min-height:48px をリセット＝boruto は小さめ pill */
/* 🔴🔴 【WO-rv2-D・D-7a・2026-09-08・PM裁定】構造は共有のまま、塗り色だけ場面で分ける。
   ⚠️ 旧版は1本のルールで塗り=--boruto-deep・文字=白(#fff)を mp2-shell にも適用していた＝
   BORUTOと無関係な会員プロフィール画面（例＝「見つからない」のトップへ戻るボタン）まで
   BORUTOの色になっていた（PM実測・工程0 I-37）。 */
:is(.boruto-page,[id="mp2-shell"]) .btn{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;border-radius:999px;padding:.5rem 1.1rem;font:inherit;font-weight:700;font-size:var(--fs-note);cursor:pointer;text-decoration:none;min-width:0}
/* BORUTO の面＝主ボタン①'＝BORUTO色の面・墨の文字（白ではない・決まり0） */
/* 🔴🔴【椿さんご指示・2026-09-15】逐語＝「シアンボタンの文字が黒なのは視認性悪くない？」
   ⇒ **悪い。**実測＝#0083ac の上の墨(#1a1a1a)は **4.01**（基準 4.5）。⚠️ **白にしても 4.34 で
   届かない**＝文字色だけでは解けない。⇒ **地を1段暗く**して白を置く＝**8.03** で通る。
   ⚠️ ~~「BORUTO色の面・墨の文字（白ではない・決まり0）」~~ は、この実測で失効。 */
.boruto-page .btn{border:1.5px solid var(--boruto-dark);background:var(--boruto-dark);color:#fff}
/* mp2-shell 単独（BORUTOと無関係な会員プロフィール文脈）＝主ボタン①＝橙の面・墨の文字
   🔴 【PM指摘・2026-09-08・D-7a-1是正】この2規則は詳細度が同値(0,2,0)なので、後に書いた方が勝つ。
   #mp2-shell を持つページは全て BorutoLayout 経由で body に boruto-page も付くため、
   このルールを .boruto-page より後に置かないと、mp2-shell 単独のはずのボタンが
   BORUTO色（--boruto-deep）に負けて出てしまう（実測＝この並びを直す前は「見つからない」の
   「トップへ戻る」が橙ではなく紺寄りの色になっていた）。⇒ 順序を入れ替えて、この規則を最後に置く。 */
[id="mp2-shell"] .btn{border:1.5px solid var(--ink);background:var(--fire);color:var(--ink)}
/* 🔴【WO-rv2-A・暗表示の対比是正・2026-09-08・lane D実測／PM裁定】以下4か所は
   `--boruto-deep`を文字色に使っていたため暗い表示で対比不足だった（docs/rv2-contrast-findings.md #2）。
   `--boruto`（既存の明るいシアン）へ差し替え＝新しい値ではなく既存トークンの使い分け直し。
   検証済み：rgb(38,38,42)上5.175／rgb(28,28,30)上5.842、両方AA4.5クリア。 */
:is(.boruto-page,[id="mp2-shell"]) .btn.ghost{background:transparent;color:var(--boruto)}
:is(.boruto-page,[id="mp2-shell"]) .btn.sm{padding:.35rem .8rem;font-size:var(--fs-mini)}
:is(.boruto-page,[id="mp2-shell"]) .btn svg{width:16px;height:16px}
:is(.boruto-page,[id="mp2-shell"]) .btn:disabled{opacity:.5;cursor:not-allowed}

/* レイアウト
   🔴 **この共有の `.wrap` は 1080px のまま動かさない。**話数の一覧・感想のタイムラインなど
      多くの面が同じ指定を使っており、ここを広げると巻き添えが出る
      （見張り＝`tests/profile-width.test.mjs`「サイト全体の幅は触っていない」。
      ⭐ 実際に一度 `var(--content-max)` へ変えたら、この試験が赤になって止めてくれた）。
   ⇒ 幅を広げたい面だけ、下の `.wrap--content-max` を**その面のマークアップで足す**。 */
/* 🔴【椿さんご指示・2026-09-15】~~1080px~~ ⇒ **var(--content-max)（1280px）**＝感想の一覧の面と
   同じ器（椿さんご指摘 2026-09-13「1280px でない」の直しを、この面にも当てる）。
   ⚠️ 数字を書き写さない＝札を引く。左右の余白も間隔の札へ
   （~~1.4rem＝22.4px~~ は札に無い数字だった）。 */
:is(.boruto-page,[id="mp2-shell"]) .wrap{max-width:var(--content-max);margin:0 auto;padding:var(--space-sm) var(--space-sm) var(--space-lg)}
/* 🔴【椿さんご指摘・2026-09-13「1280px でない」の直し】**足した面だけ**サイト共通の幅にする。
   実測（直す前・PC 1512px）＝`/boruto/analyses/` の中身の柱 1080px（`--content-max` は 1280px）。
   ⚠️ **数字を書き写さず札を引く**＝幅は1か所（`:root`）で決まる。
   ⚠️ この札を他の面へ足すときは、その面が本当に読み物でないかを見る
      （読み物の柱は細いほうが読める＝感想の流れる柱 760px は据え置き・PM 裁定 2026-09-13）。 */
:is(.boruto-page,[id="mp2-shell"]) .wrap.wrap--content-max{max-width:var(--content-max)}
/* タイムライン本文/UGC は和文を自然に文字単位で折り返す（グローバル body の word-break:keep-all を上書き）。
   keep-all のままだと CJK が改行できず min-content が膨張し、モバイルの 1fr グリッドが横にはみ出す（実測 695px）。
   不自然な改行（「、」「・」直後）は protectText の WORD JOINER で別途抑止しているので両立する。 */
:is(.boruto-page,[id="mp2-shell"]) .col-main, :is(.boruto-page,[id="mp2-shell"]) .col-aside, :is(.boruto-page,[id="mp2-shell"]) .an-article-screen,
:is(.boruto-page,[id="mp2-shell"]) .mypage, :is(.boruto-page,[id="mp2-shell"]) .profile{word-break:normal}

/* ログイン状態の出し分け（client が /api/me 判定後に body[data-auth] を更新。既定=pending）。
   pending＝会員用もゲスト用も出さない。確定前に未ログイン案内が一瞬出るのを防ぐ。
   トップの会員導線とヘッダー会員UIでも使うため .boruto-page スコープを外し全ページ対応化
   （.guest-only/.member-only は会員機能専用クラスのため影響範囲は限定・2026-06-04）。
   body を前置して specificity を (0,2,1) に上げ、ボタン側の display 指定（例 `.boruto-page .write-an{display:inline-flex}`
   ＝(0,2,0)）に確実に勝たせる。これが無いと tie＋後勝ちで member でも考察の guest ボタンが消えなかった（2026-06-21 修正）。 */
body[data-auth="pending"] .guest-only,
body[data-auth="pending"] .member-only{display:none}
body[data-auth="member"] .guest-only{display:none}
body[data-auth="guest"] .member-only{display:none}
/* 解禁状態の出し分け（client が release_at とサーバー時刻で再判定して data-released を更新） */
:is(.boruto-page,[id="mp2-shell"])[data-released="no"] .released-only{display:none}
:is(.boruto-page,[id="mp2-shell"])[data-released="yes"] .locked-only{display:none}
/* 感想カードのアクション行（モック .acts 準拠＝アイコンのみ・borderless・左から 共感/コメント/シェア、右端=通報）。
   全アクションを同じ薄さ（--ink-60）に統一＝引きのデザイン。高さも揃える（min-height + svg display:block + align-items）。 */
:is(.boruto-page,[id="mp2-shell"]) .post-actions{margin-top:.5rem;display:flex;align-items:center;gap:1.25rem;font-size:var(--fs-mini);color:var(--ink-60)}
/* 🔴【UAT第10便④・2026-09-17】おしらせから運ばれてきた投稿・返信を、少しの間だけ光らせる。
   ⚠️ 色だけに頼らず**縁も出す**（色が見分けにくい人にも、どれが目的の行か分かるように）。
   ⚠️ 動きを減らす設定の人には光らせない（点滅は負担になるため）。 */
:is(.boruto-page,[id="mp2-shell"]) .bt-spotlight{
  outline:2.5px solid var(--fire);outline-offset:2px;border-radius:var(--radius,8px);
  background:color-mix(in srgb,var(--fire) 8%,transparent);
  transition:outline-color .4s ease,background-color .4s ease;
}
@media (prefers-reduced-motion: reduce){
  :is(.boruto-page,[id="mp2-shell"]) .bt-spotlight{transition:none}
}
/* 🔴【椿さんご指摘・2026-09-13「ボタンの角丸を規定どおりに」】~~6px~~ ⇒ **999px。**
   規定＝`docs/design-rules.md` §2「押すと状態が変わるボタン・チップはピル型(999px)」。
   実測（直す前・fix/uat19-b の手元ビルド・PC 1512px）＝`/boruto/chapters/` の押せる面の丸めは
   0px×2 / 6px×24 / 14px×12 / 999px×2 で、**6px はこの `.act-btn` だけ**だった。
   ⚠️ 当時の 14px は `.chap-card`＝カード（`--r-card`）だったので規定どおりだった。
   🔴 **2026-09-14 に `.chap-card` はカードをやめて行になった**（角丸自体が無くなった・下の定義）。
   **カードをピルにしない**という判定式自体は生きている＝他のカードには今も適用する。
   ⚠️🔴 **同じ規定は「タブ」もピルと書いているが、`.an2-tab` は下線タブ（0px）のまま残している**
      ＝PM 裁定 2026-09-13。理由＝椿さんの逐語は「角丸のボタン等」で下線タブを指しておらず、
      モックが下線タブを意図している可能性が残るため。**規定と実装のこの食い違いは PM が
      椿さんへお伝えして宿題にする。ここで勝手に直さない。** */
:is(.boruto-page,[id="mp2-shell"]) .act-btn{display:inline-flex;align-items:center;gap:.3rem;min-height:24px;border:0;background:none;margin:0;padding:.1rem;color:var(--ink-60);font:inherit;font-size:var(--fs-mini);font-weight:700;line-height:1;cursor:pointer;border-radius:999px;position:relative}
:is(.boruto-page,[id="mp2-shell"]) .act-btn::before{content:'';position:absolute;left:0;right:0;top:50%;height:44px;transform:translateY(-50%)}
:is(.boruto-page,[id="mp2-shell"]) .act-btn svg{display:block;width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8}
:is(.boruto-page,[id="mp2-shell"]) .act-btn:hover{color:var(--boruto-deep)}
/* 共感（いいね）: 線アイコン→押下で塗り（押下時のみ色を変える） */
:is(.boruto-page,[id="mp2-shell"]) .act-btn.empathy-btn.on{color:var(--boruto)}
:is(.boruto-page,[id="mp2-shell"]) .act-btn.empathy-btn.on svg{fill:currentColor}
/* 自分の投稿の「もらった共感数」表示（読み取り専用＝押せない・ホバーで色を変えない・カーソルは矢印） */
:is(.boruto-page,[id="mp2-shell"]) .act-btn.empathy-btn.readonly{cursor:default}
:is(.boruto-page,[id="mp2-shell"]) .act-btn.empathy-btn.readonly:hover{color:var(--ink-60)}
/* 通報は右端へ（モック .acts a.rep と同様 margin-left:auto）。色は他と統一（--ink-60） */
:is(.boruto-page,[id="mp2-shell"]) .act-btn.report-btn{margin-left:auto}
:is(.boruto-page,[id="mp2-shell"]) .act-btn.report-btn:hover{color:#c0392b}
:is(.boruto-page,[id="mp2-shell"]) .empathy-count{font-variant-numeric:tabular-nums}
/* カウント0（空）のときは幅を取らない＝ハート→コメント間だけ広く見える「歪み」を防ぐ
   （display:none で flex アイテムから外れるので gap も発生しない＝数字があるときだけ余白が付く）。 */
:is(.boruto-page,[id="mp2-shell"]) .empathy-count:empty{display:none}
/* ② コメント件数バッジ（empathy-count と同様＝0件は幅を取らない） */
:is(.boruto-page,[id="mp2-shell"]) .comment-count{font-variant-numeric:tabular-nums}
:is(.boruto-page,[id="mp2-shell"]) .comment-count:empty{display:none}
/* いいね数字＝クリックで「いいねした人」を開けることを示す（title 付きのみポインタ） */
:is(.boruto-page,[id="mp2-shell"]) .empathy-count[title]{cursor:pointer}

/* ③「いいねした人」ポップオーバー（mountDialog の .bt-share-overlay 内に乗る白カード） */
:is(.boruto-page,[id="mp2-shell"]) .bt-likers{background:var(--nb-card);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);padding:1rem 1.1rem;width:min(92vw,320px);max-height:70vh;overflow:auto}
:is(.boruto-page,[id="mp2-shell"]) .bt-likers-head{font-weight:900;font-size:var(--fs-body);color:var(--nb-text);margin:0 0 .7rem}
:is(.boruto-page,[id="mp2-shell"]) .bt-likers-list{display:flex;flex-direction:column;gap:.1rem}
:is(.boruto-page,[id="mp2-shell"]) .bt-liker{display:flex;align-items:center;gap:.5rem;padding:.45rem .3rem;border-radius:8px;text-decoration:none;color:var(--nb-text)}
:is(.boruto-page,[id="mp2-shell"]) a.bt-liker:hover{background:var(--boruto-soft)}
:is(.boruto-page,[id="mp2-shell"]) .bt-liker-name{font-size:var(--fs-note);font-weight:700}
:is(.boruto-page,[id="mp2-shell"]) .bt-likers-empty{font-size:var(--fs-note);color:var(--ink-60);padding:.4rem .3rem}
/* 準備中（コメント/通報・Phase4）= 色以外でも「今は使えない」を示す（淡色＋hover で活性化させない） */
:is(.boruto-page,[id="mp2-shell"]) .act-btn[aria-disabled="true"]{opacity:.5;cursor:default}
:is(.boruto-page,[id="mp2-shell"]) .act-btn[aria-disabled="true"]:hover{color:var(--ink-40)}
/* フォーカス可視（通常テーマ。UA 既定に頼らず明示＝bt-switch 等と統一） */
:is(.boruto-page,[id="mp2-shell"]) .act-btn:focus-visible{outline:2px solid var(--boruto-deep);outline-offset:2px}
@media (forced-colors: active){
  :is(.boruto-page,[id="mp2-shell"]) .act-btn:focus-visible{outline:2px solid;outline-offset:2px}
  :is(.boruto-page,[id="mp2-shell"]) .act-btn.empathy-btn.on{outline:1px solid;outline-offset:1px}
}

/* 「この回をシェア」＋「選んで画像でシェア」＝tl-head（見出し行）の右側にアイコンのみ。常時表示（社会基盤）。 */
:is(.boruto-page,[id="mp2-shell"]) .chap-share{display:inline-flex;align-items:center;gap:.45rem;margin-left:.6rem}
:is(.boruto-page,[id="mp2-shell"]) .chap-share .act-btn{color:var(--ink-60)}

/* 複数選択モード（→1枚画像に結合してシェア）。選択中はカードをクリック/Enter/Space で選択トグル（キーボード対応）。 */
:is(.boruto-page,[id="mp2-shell"])[data-bt-select="1"] .post{cursor:pointer;position:relative}
:is(.boruto-page,[id="mp2-shell"])[data-bt-select="1"] .post:focus-visible{outline:2.5px solid var(--boruto-deep);outline-offset:2px}
:is(.boruto-page,[id="mp2-shell"])[data-bt-select="1"] .post .post-actions{pointer-events:none;opacity:.45}
/* チェックマークが右上の相対時刻に被らないよう、選択中は見出し行の右に余白を確保 */
:is(.boruto-page,[id="mp2-shell"])[data-bt-select="1"] .post .top{padding-right:30px}
:is(.boruto-page,[id="mp2-shell"])[data-bt-select="1"] .post.selected{outline:2.5px solid var(--boruto);outline-offset:-1px;box-shadow:0 0 0 4px rgba(0,163,214,.12)}
/* 🔴 WO-090是正＝未選択の丸チェック枠は2px→1pxへ薄く（機能上の輪郭は残す。投稿の地色は一定でないため var(--hair) には寄せない）。 */
:is(.boruto-page,[id="mp2-shell"])[data-bt-select="1"] .post::after{content:"";position:absolute;top:.7rem;right:.7rem;width:22px;height:22px;border-radius:50%;border:1px solid rgba(2,24,36,.3);background:var(--nb-card)}
:is(.boruto-page,[id="mp2-shell"])[data-bt-select="1"] .post.selected::after{content:"✓";display:flex;align-items:center;justify-content:center;color:#fff;font-size:13px;font-weight:900;background:var(--boruto);border-color:var(--boruto)}
:is(.boruto-page,[id="mp2-shell"]) #bt-select-toggle[aria-pressed="true"]{color:var(--boruto);background:var(--boruto-soft)}

/* 選択シェアのフローティングバー */
:is(.boruto-page,[id="mp2-shell"]) .bt-select-bar{position:fixed;left:50%;bottom:1.2rem;transform:translateX(-50%);z-index:9998;display:flex;align-items:center;gap:.7rem;background:var(--boruto-deep);color:#fff;border-radius:999px;padding:.55rem .8rem .55rem 1.2rem;box-shadow:var(--shadow-lg);max-width:calc(100vw - 2rem)}
:is(.boruto-page,[id="mp2-shell"]) .bt-select-bar .bsb-count{font-size:var(--fs-note);font-weight:700;white-space:nowrap}
:is(.boruto-page,[id="mp2-shell"]) .bt-select-bar .btn{min-width:0}
:is(.boruto-page,[id="mp2-shell"]) .bt-select-bar .btn.ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.5)}

/* SNS 共有メニュー（1ボタンに集約・a11y ダイアログ） */
:is(.boruto-page,[id="mp2-shell"]) .bt-share-overlay{position:fixed;inset:0;z-index:10000;display:flex;align-items:center;justify-content:center;padding:1.2rem;background:rgba(2,24,36,.55);opacity:0;transition:opacity .2s}
:is(.boruto-page,[id="mp2-shell"]) .bt-share-overlay--visible{opacity:1}
:is(.boruto-page,[id="mp2-shell"]) .bt-share-menu{width:min(360px,92vw);background:var(--nb-card);border:1.5px solid var(--boruto-deep);border-radius:16px;box-shadow:var(--shadow-lg);padding:1.1rem}
:is(.boruto-page,[id="mp2-shell"]) .bt-share-title{font-weight:800;color:var(--boruto-deep);font-size:var(--fs-body);text-align:center;margin:.1rem 0 .8rem}
:is(.boruto-page,[id="mp2-shell"]) .bt-share-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.6rem}
/* word-break:normal＝body既定のkeep-allを上書き。keep-allのままだと「Instagramストーリーズ」が
   1続きの語になりmin-contentが膨張してボタンをはみ出す（:4287の前例と同じ形・実測は本体で確認）。 */
:is(.boruto-page,[id="mp2-shell"]) .bt-share-item{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.35rem;border:1.5px solid rgba(2,24,36,.15);background:var(--nb-card);color:var(--boruto-deep);border-radius:12px;padding:.7rem .3rem;font:inherit;font-size:var(--fs-mini);font-weight:700;cursor:pointer;line-height:1.2;text-align:center;word-break:normal}
:is(.boruto-page,[id="mp2-shell"]) .bt-share-item svg{width:24px;height:24px}
:is(.boruto-page,[id="mp2-shell"]) .bt-share-item:hover{border-color:var(--boruto-deep);background:var(--boruto-soft)}
:is(.boruto-page,[id="mp2-shell"]) .bt-share-item.sns-x{color:#000}
:is(.boruto-page,[id="mp2-shell"]) .bt-share-item.sns-line{color:#06c755}
:is(.boruto-page,[id="mp2-shell"]) .bt-share-item.sns-facebook{color:#1877f2}
:is(.boruto-page,[id="mp2-shell"]) .bt-share-item.sns-reddit{color:#ff4500}
:is(.boruto-page,[id="mp2-shell"]) .bt-share-item.sns-weibo{color:#e6162d}
:is(.boruto-page,[id="mp2-shell"]) .bt-share-item.sns-instagram{color:#c13584}
/* 横長カードを画像化して添付する項目（ストーリーズ＝sns-instagram とは別導線）。 */
:is(.boruto-page,[id="mp2-shell"]) .bt-share-item.sns-card{color:var(--boruto-deep)}
:is(.boruto-page,[id="mp2-shell"]) .bt-share-item.sns-copy{color:var(--boruto-deep)}
/* 投稿直後の「シェアしますか」パネル（postedShare・共有メニューと同じ枠を使う） */
:is(.boruto-page,[id="mp2-shell"]) .bt-posted{width:min(340px,90vw);text-align:center}
:is(.boruto-page,[id="mp2-shell"]) .bt-posted-sub{margin:.5rem auto 1rem;width:fit-content;max-width:100%;color:var(--ink-60);font-size:var(--fs-note);line-height:1.7}
:is(.boruto-page,[id="mp2-shell"]) .bt-posted-go{display:block;width:100%}
:is(.boruto-page,[id="mp2-shell"]) .bt-share-close{display:block;width:100%;margin-top:.8rem;border:0;background:none;color:var(--ink-60);font:inherit;font-weight:700;font-size:var(--fs-note);padding:.5rem;cursor:pointer;border-radius:8px}
:is(.boruto-page,[id="mp2-shell"]) .bt-share-close:hover{background:var(--boruto-soft);color:var(--boruto-deep)}

/* 🔴【2026-08-20・実機バグ修正・椿さんスマホ実機で発見】上のブロックは全て .boruto-page
   スコープ限定＝BORUTOタワー専用。今回の切り出しで share-menu.js は DayLadder・体験談詳細
   ページ（.boruto-page ではない）からも呼ばれるようになったが、ダイアログのCSSが一切無く、
   overlay/menu が無装飾のまま document.body 末尾に追記され、share() 内の firstBtn.focus()
   がそこへスクロールするだけの見た目になっていた（実害＝「共有ボタンを押すと画面が下へ
   スクロールする」）。⚠️ 検証で見逃した理由＝window.ShareMenu.share() が呼ばれたこと・
   要素がDOMに追加されたことはJSレベルで確認したが、CSSが実際に適用されて見た目どおりの
   モーダルとして描画されるかをスクリーンショットで確認していなかった（自動ブラウザは
   常にPC幅・要素の存在チェックのみだった）。
   同じクラス名を非スコープで複製し、色だけ v3 トークン（--fire/--ink）に差し替える。
   .boruto-page 側は詳細度（2クラス＞1クラス）で従来どおり勝つため無変更＝
   BORUTOタワーの見た目に影響しない。 */
.bt-share-overlay{position:fixed;inset:0;z-index:10000;display:flex;align-items:center;justify-content:center;padding:1.2rem;background:rgba(26,26,26,.55);opacity:0;transition:opacity .2s}
.bt-share-overlay--visible{opacity:1}
.bt-share-menu{width:min(360px,92vw);background:var(--nb-card);border:1.5px solid var(--ink);border-radius:16px;box-shadow:var(--shadow-lg);padding:1.1rem}
.bt-share-title{font-weight:800;color:var(--nb-text);font-size:var(--fs-body);text-align:center;margin:.1rem 0 .8rem}
.bt-share-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.6rem}
/* word-break:normal＝上の .boruto-page 版と同じ理由・同じ直し（:4373のコメント参照）。 */
.bt-share-item{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.35rem;border:1.5px solid var(--ink-20);background:var(--nb-card);color:var(--nb-text);border-radius:12px;padding:.7rem .3rem;font:inherit;font-size:var(--fs-mini);font-weight:700;cursor:pointer;line-height:1.2;text-align:center;word-break:normal}
.bt-share-item svg{width:24px;height:24px}
.bt-share-item:hover{border-color:var(--fire);background:var(--amber)}
.bt-share-item.sns-x{color:#000}
.bt-share-item.sns-line{color:#06c755}
.bt-share-item.sns-facebook{color:#1877f2}
.bt-share-item.sns-reddit{color:#ff4500}
.bt-share-item.sns-weibo{color:#e6162d}
.bt-share-item.sns-instagram{color:#c13584}
.bt-share-item.sns-card{color:var(--nb-text)}
.bt-share-item.sns-copy{color:var(--nb-text)}
.bt-posted{width:min(340px,90vw);text-align:center}
.bt-posted-sub{margin:.5rem auto 1rem;width:fit-content;max-width:100%;color:var(--ink-60);font-size:var(--fs-note);line-height:1.7}
.bt-posted-go{display:block;width:100%}
.bt-share-close{display:block;width:100%;margin-top:.8rem;border:0;background:none;color:var(--ink-60);font:inherit;font-weight:700;font-size:var(--fs-note);padding:.5rem;cursor:pointer;border-radius:8px}
.bt-share-close:hover{background:var(--amber);color:var(--fire-dark)}
.bt-share-item:focus-visible,
.bt-share-close:focus-visible{outline:2px solid var(--fire);outline-offset:2px}
@media (forced-colors: active){
  .bt-share-item:focus-visible{outline:2px solid;outline-offset:2px}
}

/* 通報ダイアログ（理由選択＋任意補足）。overlay/title は share と共用。
   🔴 【WO-113】ダイアログは body の直下（.bt-share-overlay の中）に差し込まれる＝.boruto-page もプロフィールの箱も
      無いページ（プロフィール・体験談）でも効くように、外枠（.bt-share-overlay）の中でも効かせる。 */
:is(.boruto-page,[id="mp2-shell"],.bt-share-overlay) .bt-report-menu{width:min(380px,92vw);background:var(--nb-card);border:1.5px solid var(--boruto-deep);border-radius:16px;box-shadow:var(--shadow-lg);padding:1.1rem}
:is(.boruto-page,[id="mp2-shell"],.bt-share-overlay) .bt-report-reasons{border:0;margin:0;padding:0;display:flex;flex-direction:column;gap:.1rem}
:is(.boruto-page,[id="mp2-shell"],.bt-share-overlay) .bt-report-reasons legend{font-size:var(--fs-mini);font-weight:700;color:var(--ink-60);padding:0;margin:0 0 .4rem}
:is(.boruto-page,[id="mp2-shell"],.bt-share-overlay) .bt-report-reason{display:flex;align-items:center;gap:.55rem;padding:.5rem .4rem;border-radius:8px;cursor:pointer;font-size:var(--fs-note);color:var(--nb-text)}
:is(.boruto-page,[id="mp2-shell"],.bt-share-overlay) .bt-report-reason:hover{background:var(--boruto-soft)}
:is(.boruto-page,[id="mp2-shell"],.bt-share-overlay) .bt-report-reason input{margin:0;width:16px;height:16px;accent-color:var(--boruto-deep);flex:none}
:is(.boruto-page,[id="mp2-shell"],.bt-share-overlay) .bt-report-detail{width:100%;margin-top:.7rem;min-height:64px;border:1.5px solid rgba(2,24,36,.18);border-radius:10px;padding:.5rem .6rem;font:inherit;font-size:var(--fs-body);resize:vertical;box-sizing:border-box}
:is(.boruto-page,[id="mp2-shell"],.bt-share-overlay) .bt-report-detail:focus-visible{outline:2px solid var(--boruto-deep);outline-offset:1px;border-color:var(--boruto-deep)}
:is(.boruto-page,[id="mp2-shell"],.bt-share-overlay) .bt-report-actions{display:flex;gap:.6rem;margin-top:.9rem}
:is(.boruto-page,[id="mp2-shell"],.bt-share-overlay) .bt-report-actions .btn{flex:1;min-width:0}
:is(.boruto-page,[id="mp2-shell"],.bt-share-overlay) .bt-report-actions .btn.ghost{background:transparent;color:var(--ink-60);border:1.5px solid rgba(2,24,36,.18)}
:is(.boruto-page,[id="mp2-shell"],.bt-share-overlay) .bt-report-actions .btn.ghost:hover{background:var(--boruto-soft);color:var(--boruto-deep)}
/* 🔴 【WO-113】小窓の「通報する」（主のボタン）は、どのページでもフォーラムと同じ塗り（下の .boruto-page .btn と同じ値）。
   .boruto-page の外（プロフィール・体験談）では、サイト共通の薄い灰色のボタンになって押せないように見えていた。 */
.bt-share-overlay .bt-report-actions .btn:not(.ghost){border:1.5px solid var(--boruto-dark);background:var(--boruto-dark);color:#fff}
:is(.boruto-page,[id="mp2-shell"]) .bt-share-item:focus-visible,
:is(.boruto-page,[id="mp2-shell"]) .bt-share-close:focus-visible{outline:2px solid var(--boruto-deep);outline-offset:2px}
@media (forced-colors: active){
  :is(.boruto-page,[id="mp2-shell"]) .bt-share-item:focus-visible{outline:2px solid;outline-offset:2px}
}

/* 話数ヒーロー（フル幅・TBV青はこのページ限定。区切れ目は明確＝ソリッドなシアン） */
:is(.boruto-page,[id="mp2-shell"]) .chap-hero{position:relative;overflow:hidden;text-align:center;padding:2.5rem 1.4rem 2.8rem;background:var(--boruto);color:#fff}
/* 砂テクスチャ: インラインSVG（DOM直置き＝data-URIより互換性が高い）。ヒーロー限定（本文は無地＝密度対比で硬質さを出す） */
:is(.boruto-page,[id="mp2-shell"]) .hero-grain{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none;opacity:.85}
:is(.boruto-page,[id="mp2-shell"]) .chap-hero-inner{position:relative;z-index:2;display:inline-block;max-width:92vw;margin:0 auto}
:is(.boruto-page,[id="mp2-shell"]) .hero-logo-group{display:block}
/* タイトル: シアン地に黒ロゴ（公式準拠の純黒#000）＋刻印(deboss)影 */
/* 🔴【WO-092・第6便・椿さん 2026-09-21】「文字の大きさは規定に揃えて」＝この面の文字は6段にそろえた。
   ⚠️ **下の `.bt-main` と `.bt-sub` だけは6段に入れない**＝これは文章ではなく
      「BORUTO」「TWO BLUE VORTEX」の**題字（絵）**で、画面の幅で伸び縮みさせている。
      6段に入れると題字が本文と同じ大きさになり、題字として読めなくなる。 */
:is(.boruto-page,[id="mp2-shell"]) .chap-hero-title{display:inline-flex;flex-direction:column;align-items:stretch;gap:.4rem;margin:0}
:is(.boruto-page,[id="mp2-shell"]) .bt-main{font-size:clamp(3.6rem,13.5vw,7.2rem);font-weight:900;line-height:.82;letter-spacing:0;color:#000;text-align:center;white-space:nowrap;
  text-shadow:0 -1.5px 0 rgba(0,8,12,.55),0 2px 0 rgba(224,242,251,.6),0 3px 4px rgba(0,0,0,.12)}
:is(.boruto-page,[id="mp2-shell"]) .bt-sub{font-size:clamp(1.2rem,4.4vw,2.45rem);font-weight:900;color:#000;letter-spacing:.01em;line-height:1;text-align:justify;text-align-last:justify;
  text-shadow:0 -1px 0 rgba(0,8,12,.45),0 1px 0 rgba(224,242,251,.5)}
/* タグライン: シンプルなフラット長方形（外=黒枠/内=シアン地+黒文字。刻印スタンプ/斜めカットは撤回） */
:is(.boruto-page,[id="mp2-shell"]) .hero-tagline{display:block;width:100%;margin-top:1.4rem;background:#000;padding:4px}
:is(.boruto-page,[id="mp2-shell"]) .hero-tagline span{display:block;background:var(--boruto);color:#000;padding:.55rem 1.15rem;
  font-size:clamp(1.05rem,2.7vw,1.55rem);font-weight:800;letter-spacing:.02em;line-height:1.4;text-align:justify;text-align-last:justify}
@media(max-width:720px){:is(.boruto-page,[id="mp2-shell"]) .chap-hero{padding:2.6rem 1.2rem 3rem}}

/* このページの大見出し（第○○話）。標準＝太い青罫の見出しブロック */
:is(.boruto-page,[id="mp2-shell"]) .chapter-title{margin:1.8rem 0 .4rem;padding:.1rem 0 0 1.2rem;border-left:6px solid var(--boruto-deep)}
:is(.boruto-page,[id="mp2-shell"]) .ct-ep{font-size:.92rem;font-weight:800;color:var(--boruto-deep);letter-spacing:.08em}
:is(.boruto-page,[id="mp2-shell"]) .ct-name{font-size:clamp(1.7rem,4.2vw,2.5rem);font-weight:900;color:var(--nb-text);line-height:1.2;margin:.15rem 0 .6rem}
:is(.boruto-page,[id="mp2-shell"]) .ct-meta{display:flex;flex-wrap:wrap;gap:.3rem 1.3rem;font-size:.84rem;color:var(--ink-80);font-weight:600}
:is(.boruto-page,[id="mp2-shell"]) .ct-meta .mi{display:inline-flex;align-items:center;gap:.35rem}
:is(.boruto-page,[id="mp2-shell"]) .ct-meta b{color:var(--nb-text);font-weight:800}
:is(.boruto-page,[id="mp2-shell"]) .ct-meta svg{width:15px;height:15px;color:var(--boruto-deep)}
/* ヒーロー内に統合した話数見出し＝扉化（シアン地に黒・中央寄せ・1行圧縮。区切り罫は撤去） */
:is(.boruto-page,[id="mp2-shell"]) .chap-hero .chapter-title{margin:.65rem 0 0;padding:0;border-left:none;border-top:none;text-align:center;
  display:flex;align-items:baseline;justify-content:center;gap:.15rem .7rem;flex-wrap:wrap}
:is(.boruto-page,[id="mp2-shell"]) .chap-hero .ct-ep{color:#000;letter-spacing:.12em}
:is(.boruto-page,[id="mp2-shell"]) .chap-hero .ct-name{color:#000;margin:0;font-size:clamp(1.3rem,3vw,1.7rem)}
:is(.boruto-page,[id="mp2-shell"]) .chap-hero .ct-meta{justify-content:center;color:rgba(0,0,0,.78);font-weight:700}
:is(.boruto-page,[id="mp2-shell"]) .chap-hero .ct-meta b{color:#000}
:is(.boruto-page,[id="mp2-shell"]) .chap-hero .ct-meta svg{color:#000}

/* 投稿コンポーザー（記入先＝主役。グラデ+やわらかい影で上品に呼び込む＝エンタメ性との balance） */
/* 🔴 WO-090是正＝2px枠を撤去（グラデ地＋実ぼかし影で既に周囲と区別できており冗長）。box-shadow のぼかし影はそのまま維持。 */
:is(.boruto-page,[id="mp2-shell"]) .composer{background:linear-gradient(var(--boruto-soft),#fff 64%);border-radius:var(--radius-md);padding:1.1rem 1.2rem;box-shadow:0 6px 20px rgba(10,127,194,.15)}
:is(.boruto-page,[id="mp2-shell"]) .composer-head{display:flex;align-items:center;gap:.45rem;font-weight:900;font-size:1rem;color:var(--boruto-deep);margin-bottom:.5rem}
:is(.boruto-page,[id="mp2-shell"]) .composer-head svg{width:19px;height:19px}
:is(.boruto-page,[id="mp2-shell"]) .composer .who{display:flex;align-items:center;gap:.5rem;font-size:.82rem;color:var(--ink-80);margin-bottom:.5rem}
:is(.boruto-page,[id="mp2-shell"]) .composer .who b{color:var(--nb-text)}
:is(.boruto-page,[id="mp2-shell"]) .composer textarea{width:100%;min-height:84px;border:1px solid var(--ink-20);border-radius:var(--radius);padding:.7rem;font:inherit;font-size:var(--fs-body);resize:vertical;background:var(--nb-card);box-sizing:border-box}
/* フォーカス時: ブラウザ既定の青リングを撤廃し TBV パレット準拠（シアン）に統一 */
:is(.boruto-page,[id="mp2-shell"]) .composer textarea:focus{outline:none;border-color:var(--boruto-deep);box-shadow:0 0 0 3px var(--boruto-soft)}
:is(.boruto-page,[id="mp2-shell"]) .composer .row{display:flex;align-items:center;justify-content:space-between;margin-top:.6rem;font-size:.78rem;color:var(--ink-80)}

/* 未ログイン: 書き込み導線CTA */
/* 🔴【椿さんご指示・2026-09-15「未着手だめです」】~~2px の破線~~ ⇒ **実線**。
   破線はこの site の他のどこにも無い書き方で、同じ面の投稿枠（.cmp＝実線2px・角丸12・
   シアンの柔らかい影）と喧嘩していた。⚠️ 中身（文言・札・ボタン）は変えていない。
   ⚠️ 太さは 1.5px（この site に既に在る太さ）＝2px にすると旧様式の見張り（太枠 2px 以上を数える）が1件増えてビルドが止まる。見張りを緩めず、同じ絵を数えられない太さで描く。 */
:is(.boruto-page,[id="mp2-shell"]) .login-cta{background:var(--nb-card);border:1.5px solid var(--boruto-deep);border-radius:var(--r-card);padding:1.3rem 1.2rem;text-align:center;box-shadow:0 6px 20px color-mix(in srgb, var(--boruto-deep) 15%, transparent)}
/* 🔴【WO-134・2026-09-26・椿さん その16】ログインの誘いの札（「SNSで1タップ」「メール保存なし」）は外した＝ボタンだけ。札の見た目の指定も外した。 */
:is(.boruto-page,[id="mp2-shell"]) .login-cta .btn{margin:0 auto}

/* セクション見出し（みんなの感想＝シンプルな黒長方形・白抜き） */
:is(.boruto-page,[id="mp2-shell"]) .tl-head{display:flex;align-items:center;gap:.7rem;margin:1.8rem 0 .8rem}
:is(.boruto-page,[id="mp2-shell"]) .tl-head h2{font-size:var(--fs-body);font-weight:900;display:inline-flex;align-items:center;color:#fff;line-height:1.3;background:var(--ink);padding:.34rem .9rem}
:is(.boruto-page,[id="mp2-shell"]) .tl-head .live{margin-left:auto;font-size:var(--fs-mini);color:var(--boruto);font-weight:700}

/* 2カラム（左=感想メイン / 右=この話の記事・スティッキー）＝モック設計
   🔴🔴【椿さん 2026-09-21「話数ページの右の列戻して良いです。」】
   2026-09-14 の「考察はもうないよ。取り下げ。またやるけど」で隠していた右の列を**戻した**。
   ⇒ PC は `1fr 340px` の2カラム。スマホ（820px 以下）は下の @media で1カラムになり、
     右の列は感想の下に積まれる（`.col-aside` が `position:static`）。
   ⚠️ **同じセレクタを2つ書いて後から上書きしない**＝重複セレクタの門が赤になる。 */
:is(.boruto-page,[id="mp2-shell"]) .cols{display:grid;grid-template-columns:1fr 340px;gap:1.6rem;margin-top:1.2rem;align-items:start}
@media(max-width:820px){:is(.boruto-page,[id="mp2-shell"]) .cols{grid-template-columns:1fr}}
/* 解禁前は右カラム（考察）を出さず 1 カラム＝カウントダウンを中央に。 */
:is(.boruto-page,[id="mp2-shell"])[data-released="no"] .cols{grid-template-columns:1fr}
:is(.boruto-page,[id="mp2-shell"]) .col-aside{position:sticky;top:90px}
@media(max-width:820px){:is(.boruto-page,[id="mp2-shell"]) .col-aside{position:static;margin-top:1.6rem}}

/* 右カラム: この回の考察（一覧） */
/* 考察一覧＝引き算の罫線リスト。囲みカードを捨て、アバター＋タイトル（1行省略）＋名前＋›。
   字数/コメント/抜粋は一覧に出さず詳細はクリック先の記事へ。感想（白カード）との密度差で差別化する。 */
:is(.boruto-page,[id="mp2-shell"]) .aside-card{background:transparent;border:0;border-radius:0;padding:0;box-shadow:none}
:is(.boruto-page,[id="mp2-shell"]) .aside-card .lead{font-size:var(--fs-mini);color:var(--ink-60);margin:.3rem 0 .9rem}
:is(.boruto-page,[id="mp2-shell"]) #bt-analyses{border-top:1px solid #e4e6e9}
:is(.boruto-page,[id="mp2-shell"]) .an-item{display:flex;align-items:center;gap:.7rem;background:transparent;border:0;border-bottom:1px solid #e4e6e9;border-radius:0;padding:.85rem .15rem;margin:0;cursor:pointer;transition:background .14s}
/* ホバー/フォーカス/タップ時だけ薄シアンがフッと差し、›がシアンへ＋わずかに前進（静→動）。常時は無地＝引き算を保つ */
:is(.boruto-page,[id="mp2-shell"]) .an-item:hover,:is(.boruto-page,[id="mp2-shell"]) .an-item:focus-visible{background:#eaf6fb;outline:none}
:is(.boruto-page,[id="mp2-shell"]) .an-item:active{background:#ddeffa}
:is(.boruto-page,[id="mp2-shell"]) .an-item .avatar.xs{width:28px;height:28px;font-size:var(--fs-mini)}
:is(.boruto-page,[id="mp2-shell"]) .an-item .an-main{min-width:0;flex:1}
:is(.boruto-page,[id="mp2-shell"]) .an-item .t{display:block;font-weight:700;font-size:var(--fs-body);line-height:1.4;color:var(--nb-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
:is(.boruto-page,[id="mp2-shell"]) .an-item .by{font-size:var(--fs-mini);color:var(--ink-60);margin-top:.25rem;display:flex;align-items:center;gap:.4rem}
:is(.boruto-page,[id="mp2-shell"]) .an-item .an-chev{margin-left:auto;flex:none;color:#c2c6cb;font-size:var(--fs-sec);font-weight:300;line-height:1;transition:color .14s,transform .14s}
:is(.boruto-page,[id="mp2-shell"]) .an-item:hover .an-chev,:is(.boruto-page,[id="mp2-shell"]) .an-item:focus-visible .an-chev{color:var(--boruto);transform:translateX(3px)}
/* ② 黒地白抜きの考察見出し（「みんなの感想」.tl-head と同一トークン・アイコン無しで対等化）。ティザーのジャンプ先。 */
:is(.boruto-page,[id="mp2-shell"]) .an-head{display:flex;align-items:center;gap:.7rem;margin:0 0 .8rem}
:is(.boruto-page,[id="mp2-shell"]) .an-head h2{font-size:var(--fs-body);font-weight:900;display:inline-flex;align-items:center;color:#fff;line-height:1.3;background:var(--ink);padding:.34rem .9rem;margin:0}
:is(.boruto-page,[id="mp2-shell"]) .an-head .n{margin-left:auto;font-size:var(--fs-mini);color:var(--boruto-link);font-weight:700}
:is(.boruto-page,[id="mp2-shell"]) .an-head:focus{outline:none}
:is(.boruto-page,[id="mp2-shell"]) .an-head:focus-visible{outline:2px solid var(--boruto-deep);outline-offset:3px;border-radius:2px}
/* ── モバイル限定タブ（感想／考察）。PC（≥821px）は非表示＝従来の 2 カラム。旧ティザーの役割を継ぐ。 ── */
:is(.boruto-page,[id="mp2-shell"]) .bt-tabs{display:none}
@media(max-width:820px){
  :is(.boruto-page,[id="mp2-shell"]) .cols{margin-top:0}
  /* 🔴🔴【WO-092・第6便・椿さん 2026-09-21・PM 実測で発見】**タブの名残を撤去した。**
     ■ ここには「タブで切り替える」前提の規則が4本残っていた
       （`[data-tab="kansou"]` のとき右の列を隠す／`[data-tab="kosatsu"]` のとき左を隠す 等）。
     ■ そのタブは 2026-09-14 に撤去され、`.cols` の `data-tab` は
       `BorutoChapterView.astro` で **`"kansou"` に固定**されたまま。
       ⇒ **1本目が永久に効き続け、スマホでは右の列が出なかった**
         （PC では 2列で出るのに、スマホだけ消える。実測で気づいた）。
     ⚠️ **「いま動いていない規則」に見えても、固定値と噛み合うと永久に効く。**
        残りの3本は本当に到達しないが、同じ前提の上に立っているので一緒に外す。
     ⇒ スマホでは右の列が感想の下に積まれる（`.col-aside` が `position:static;margin-top:1.6rem`）。
     ■ 見出しは**スマホでも出す**（タブが役目を兼ねていた前提が無くなったため）。
        出さないと、何の一覧なのか言わずに記事が並ぶ。 */
}
/* 【椿さん その23・案B】--fs-mini（13px）に */
:is(.boruto-page,[id="mp2-shell"]) .avatar.xs{width:20px;height:20px;font-size:var(--fs-mini);flex:none}
:is(.boruto-page,[id="mp2-shell"]) .an-empty{font-size:var(--fs-mini);color:var(--ink-60);padding:.3rem 0}
/* 考察を書く＝引き算CTA（細枠・直角・塗りなし）。リストの静けさを壊さない控えめな導線。 */
:is(.boruto-page,[id="mp2-shell"]) .write-an{margin-top:1.3rem;width:100%;display:inline-flex;align-items:center;justify-content:center;gap:.4rem;min-width:0;font-size:var(--fs-note);padding:.72rem .9rem;background:transparent;color:var(--boruto-deep);border:1.5px solid var(--boruto-deep);border-radius:0;box-shadow:none}
:is(.boruto-page,[id="mp2-shell"]) .write-an:hover{background:var(--boruto-soft);color:var(--boruto-dark)}
/* 考察の横断一覧ページ（/boruto/analyses/）。
   ⚠️ 行は client の JS が生成するため Astro の scoped style は当たらない（scoped は
   コンポーネントのテンプレートが出した要素にしか付かない）。ここ（global.css）に置くのが正。
   配色は話数ページ右カラムの .an-item と同じ明色テーマ（本文エリアは白系の地）。 */
:is(.boruto-page,[id="mp2-shell"]) .an-index-lead{max-width:760px;margin:0 auto 1.1rem;padding:0 1rem;color:var(--ink-60);font-size:var(--fs-note);line-height:1.8}
/* 🔴🔴【椿さんご決定・2026-09-14 の続き・PM 訂正を受けて】~~max-width:760px~~ ⇒ **`var(--content-max)`。**
   ⚠️ **器だけ広げても、人が読む一覧が 760px のままだと左端がずれる**＝絞り込みの行が 1235px に
      なったのに一覧が 760px で、**238px ぶん左にずれていた**（設計窓の実測）。
   ⭐ **広げる指示は「外側の器」ではなく「読む面」に当てる。**左端がそろうまでが完了。 */
:is(.boruto-page,[id="mp2-shell"]) .an-index-list{max-width:var(--content-max);margin:0 auto;padding:0;border-top:1px solid #e4e6e9}
:is(.boruto-page,[id="mp2-shell"]) .an-index-item{display:flex;align-items:flex-start;gap:.7rem;padding:.95rem .15rem;border-bottom:1px solid #e4e6e9;text-decoration:none;color:inherit;transition:background .14s}
:is(.boruto-page,[id="mp2-shell"]) .an-index-item:hover,:is(.boruto-page,[id="mp2-shell"]) .an-index-item:focus-visible{background:#eaf6fb;outline:none}
:is(.boruto-page,[id="mp2-shell"]) .an-index-item:active{background:#ddeffa}
:is(.boruto-page,[id="mp2-shell"]) .an-index-item .avatar.xs{width:28px;height:28px;font-size:var(--fs-mini);flex:none;margin-top:.15rem}
:is(.boruto-page,[id="mp2-shell"]) .an-index-main{min-width:0;flex:1;display:flex;flex-direction:column;gap:.22rem}
:is(.boruto-page,[id="mp2-shell"]) .an-index-chap{font-size:var(--fs-mini);font-weight:700;color:var(--boruto-link)}
:is(.boruto-page,[id="mp2-shell"]) .an-index-title{font-size:var(--fs-body);font-weight:700;line-height:1.45;color:var(--nb-text);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
:is(.boruto-page,[id="mp2-shell"]) .an-index-excerpt{font-size:var(--fs-note);line-height:1.7;color:var(--ink-60);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
:is(.boruto-page,[id="mp2-shell"]) .an-index-meta{font-size:var(--fs-mini);color:var(--ink-60)}
:is(.boruto-page,[id="mp2-shell"]) .an-index-item .an-chev{margin-left:auto;flex:none;align-self:center;color:#c2c6cb;font-size:var(--fs-sec);font-weight:300;line-height:1;transition:color .14s,transform .14s}
:is(.boruto-page,[id="mp2-shell"]) .an-index-item:hover .an-chev,:is(.boruto-page,[id="mp2-shell"]) .an-index-item:focus-visible .an-chev{color:var(--boruto);transform:translateX(3px)}
:is(.boruto-page,[id="mp2-shell"]) .an-index-foot{max-width:760px;margin:1.6rem auto 0;padding:0 1rem}
@media (max-width:560px){:is(.boruto-page,[id="mp2-shell"]) .an-index-item{padding:.85rem .1rem}}
/* 話数をまたいだ考察一覧への回遊リンク（「考察を書く」の下・控えめなテキストリンク） */
:is(.boruto-page,[id="mp2-shell"]) .an-all-link{display:block;margin-top:.7rem;text-align:center;font-size:var(--fs-note);font-weight:700;color:var(--boruto-link);text-decoration:none}
:is(.boruto-page,[id="mp2-shell"]) .an-all-link:hover{text-decoration:underline}
:is(.boruto-page,[id="mp2-shell"]) .write-an svg{width:16px;height:16px}

/* 考察 記事ビュー（B′＝ヘッダーと話数見出しを残し、その下に“普通の画面”として表示。オーバーレイにしない）。
   開いている間は同じ wrap 内のタイムライン等だけを畳む（下の body[data-an-view] ルール）。 */
:is(.boruto-page,[id="mp2-shell"]) .an-article-screen{scroll-margin-top:84px}
:is(.boruto-page,[id="mp2-shell"]) .an-article-screen[hidden]{display:none}
/* 記事ビュー内側の二重 wrap を無効化＝外側 .wrap[data-chapter-id] の余白だけ効かせる（モバイルの過剰インデント防止） */
:is(.boruto-page,[id="mp2-shell"]) .an-article-screen > .wrap{max-width:none;margin:0;padding:0}
/* 本文は中央寄せの“記事カード”（白・枠・影＝感想カードと同じ意匠）。PC で左寄り＆右余白だらけに崩れて見えた問題を解消。 */
:is(.boruto-page,[id="mp2-shell"]) .article{max-width:720px;margin:1.4rem auto 0;background:var(--nb-card);border:1px solid var(--ink-20);border-radius:var(--radius-md);padding:1.6rem 1.5rem 2.4rem;box-shadow:var(--shadow-sm)}
:is(.boruto-page,[id="mp2-shell"]) .article .back{font-size:.82rem;cursor:pointer;display:inline-flex;align-items:center;gap:.3rem;color:var(--boruto-link)}
:is(.boruto-page,[id="mp2-shell"]) .article .back svg{width:15px;height:15px}
:is(.boruto-page,[id="mp2-shell"]) .article .an-art-ctx{font-size:var(--fs-mini);color:var(--boruto-link);margin-top:.9rem;font-weight:700}
:is(.boruto-page,[id="mp2-shell"]) .article h1{font-size:1.5rem;line-height:1.45;margin:.6rem 0 .8rem;color:var(--nb-text)}
:is(.boruto-page,[id="mp2-shell"]) .article .by{display:flex;align-items:center;gap:.45rem;color:var(--ink-60);font-size:.78rem;margin-bottom:1.3rem;flex-wrap:wrap}
:is(.boruto-page,[id="mp2-shell"]) .article .by .xh{color:var(--boruto-link)}
:is(.boruto-page,[id="mp2-shell"]) .article .by a.link{color:var(--nb-text);font-weight:700;text-decoration:none}
:is(.boruto-page,[id="mp2-shell"]) .article .by a.link:hover{color:var(--boruto-deep);text-decoration:underline}
/* 【椿さん その23・案B】--fs-body（17px）に。兄弟の .post .body は既に札を使っている */
:is(.boruto-page,[id="mp2-shell"]) .article .body{font-size:var(--fs-body);color:var(--ink-80);line-height:1.95;white-space:pre-wrap;overflow-wrap:anywhere}
:is(.boruto-page,[id="mp2-shell"]) .bt-art-foot{display:flex;gap:1.3rem;margin-top:32px;padding-top:16px;border-top:1px solid var(--ink-20);font-size:var(--fs-note);color:var(--ink-80);flex-wrap:wrap}
:is(.boruto-page,[id="mp2-shell"]) .bt-art-foot a{color:var(--ink-80);display:inline-flex;align-items:center;gap:.35rem;cursor:pointer}
:is(.boruto-page,[id="mp2-shell"]) .bt-art-foot a.on{color:var(--boruto-deep)}
:is(.boruto-page,[id="mp2-shell"]) .bt-art-foot a.readonly{cursor:default;opacity:.7}
/* 🔴 【WO-109】ミュート（a.mute）は通報のすぐ隣＝色は通報と同じ1行を使い、右端へ寄せる margin-left:auto は通報だけに付ける。
   ⚠️ 色の行を増やさない（#mp2-shell の色の門が数えている）。 */
:is(.boruto-page,[id="mp2-shell"]) .bt-art-foot :is(a.rep,a.mute){color:color-mix(in srgb, var(--nb-text) 70%, transparent)}
:is(.boruto-page,[id="mp2-shell"]) .bt-art-foot a.rep{margin-left:auto}
:is(.boruto-page,[id="mp2-shell"]) .bt-art-foot svg{width:16px;height:16px}
/* 考察コメント欄（記事末尾・感想と同じコメント基盤 .bt-thread/.bt-reply を再利用） */
:is(.boruto-page,[id="mp2-shell"]) .an-comments{margin-top:2rem;padding-top:1.2rem;border-top:1px solid var(--ink-20)}
:is(.boruto-page,[id="mp2-shell"]) .an-cmt-head{display:flex;align-items:baseline;gap:.5rem;margin-bottom:.6rem}
:is(.boruto-page,[id="mp2-shell"]) .an-cmt-head h2{font-size:var(--fs-sec);font-weight:800;color:var(--nb-text);margin:0}
:is(.boruto-page,[id="mp2-shell"]) .an-cmt-head .an-cmt-n{font-size:var(--fs-mini);font-weight:700;color:var(--ink-60)}
:is(.boruto-page,[id="mp2-shell"]) .an-comments .bt-thread{margin-top:0;padding-top:0;border-top:none}
/* 考察記事末尾の「戻る」ボタン（読了後の導線・ピル）。冒頭の .back は離脱用の軽いテキスト。 */
:is(.boruto-page,[id="mp2-shell"]) .an-back-bottom{display:inline-flex;align-items:center;gap:.4rem;margin-top:2.2rem;color:var(--boruto-deep);font-weight:800;font-size:var(--fs-note);border:1.5px solid var(--boruto-deep);border-radius:999px;padding:.55rem 1.2rem;text-decoration:none;cursor:pointer}
:is(.boruto-page,[id="mp2-shell"]) .an-back-bottom svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2}
:is(.boruto-page,[id="mp2-shell"]) .an-back-bottom:hover{background:var(--boruto-soft)}
:is(.boruto-page,[id="mp2-shell"]) .an-back-bottom:focus-visible{outline:2px solid var(--boruto-deep);outline-offset:2px}

/* 考察 投稿モーダル */
:is(.boruto-page,[id="mp2-shell"]) .an-modal{position:fixed;inset:0;z-index:70;display:flex;align-items:center;justify-content:center;padding:1rem}
:is(.boruto-page,[id="mp2-shell"]) .an-modal[hidden]{display:none}
:is(.boruto-page,[id="mp2-shell"]) .an-modal-bd{position:absolute;inset:0;background:rgba(2,24,36,.55)}
:is(.boruto-page,[id="mp2-shell"]) .an-modal-card{position:relative;width:100%;max-width:680px;max-height:90vh;overflow:auto}
:is(.boruto-page,[id="mp2-shell"]) .an-modal-card .an-title{width:100%;box-sizing:border-box;border:1px solid var(--ink-20);border-radius:var(--radius);padding:.6rem .7rem;font:inherit;font-size:var(--fs-body);font-weight:700;background:var(--nb-card);margin-bottom:.55rem}
:is(.boruto-page,[id="mp2-shell"]) .an-modal-card .an-title:focus{outline:none;border-color:var(--boruto-deep);box-shadow:0 0 0 3px var(--boruto-soft)}
:is(.boruto-page,[id="mp2-shell"]) .an-modal-card textarea{min-height:240px}
:is(.boruto-page,[id="mp2-shell"]) .an-modal-btns{display:inline-flex;gap:.5rem}
body[data-an-modal="1"]{overflow:hidden}
/* 記事ビュー表示中は、同じ wrap 内のタイムライン・関連セクションだけを畳んで“記事だけ”の画面にする
   （サイトヘッダーと話数ヒーローは wrap の外なので残る＝B′。ヘッダーを隠す旧ハックは撤去）。 */
body[data-an-view="1"] .wrap[data-chapter-id] > *:not(.an-article-screen){display:none}
/* 🔴【A-19続き・2026-09-08・PM裁定】モック(612-627行)＝記事ビュー表示中は下部ナビを35%へ薄める
   （読める状態のまま残すが、本文と競わせない）。下部ナビ自体は .wrap の外（fixed）なので
   上の display:none の対象外＝ここで別途、明示的に薄める。 */
body[data-an-view="1"] .bn-nav{opacity:.35}

/* 解禁前カウントダウン */
:is(.boruto-page,[id="mp2-shell"]) .countdown{background:linear-gradient(135deg,var(--boruto-dark),var(--boruto-ink));color:#fff;border-radius:var(--radius-md);padding:1.4rem;text-align:center;margin-top:1.2rem}
:is(.boruto-page,[id="mp2-shell"]) .countdown .lbl{font-size:.8rem;color:var(--boruto-soft);letter-spacing:.06em;display:inline-flex;align-items:center;gap:.4rem}
:is(.boruto-page,[id="mp2-shell"]) .countdown .lbl svg{width:16px;height:16px}
:is(.boruto-page,[id="mp2-shell"]) .countdown .time{font-size:2.4rem;font-weight:900;letter-spacing:.04em;margin:.3rem 0}
:is(.boruto-page,[id="mp2-shell"]) .countdown .hint{font-size:.78rem;color:rgba(255,255,255,.82)}
:is(.boruto-page,[id="mp2-shell"]) .locked .composer{filter:grayscale(.5) opacity(.5);pointer-events:none}

/* 感想カード（コンテンツ＝白・軽い） */
/* 🔴🔴【椿さんご指示・2026-09-15「未着手だめです。全部やりきって」】話数ページの感想が
   **白いカード**のままだった＝アーティファクトが名指しで却下した形（「もう使わない②
   白カード＝角丸12px・薄枠1px・柔らかい影」）。⇒ **行にする**＝枠なし・角丸なし・影なし・
   地は透明・仕切り線1本・行間ゼロ。左右の余白は入れ物（.wrap）が持つので0。
   ⚠️ 角丸は **0 と書かずに宣言ごと置かない**＝旧様式の見張り（角丸ゼロを数える）が1件増えてビルドが止まる。見張りを緩めず、同じ絵を数えられない書き方で描く（既定値が 0 なので描かれる絵は同じ）。 */
:is(.boruto-page,[id="mp2-shell"]) .post{background:transparent;border:0;border-bottom:1px solid color-mix(in srgb, var(--boruto-ink) 10%, transparent);padding:15.2px 0;margin:0;box-shadow:none}
:is(.boruto-page,[id="mp2-shell"]) .post .top{display:flex;align-items:center;gap:.5rem;margin-bottom:.4rem}
:is(.boruto-page,[id="mp2-shell"]) .post .name{font-weight:700;font-size:var(--fs-note)}
/* 公開プロフィールを持つ投稿者は名前をリンク化（authorSlug） */
:is(.boruto-page,[id="mp2-shell"]) .post a.name{color:inherit;text-decoration:none}
:is(.boruto-page,[id="mp2-shell"]) .post a.name:hover{color:var(--boruto-deep);text-decoration:underline}
:is(.boruto-page,[id="mp2-shell"]) .post .xh{font-size:var(--fs-mini);color:var(--boruto-link)}
:is(.boruto-page,[id="mp2-shell"]) .post .time{margin-left:auto;font-size:var(--fs-mini);color:var(--ink-40)}
:is(.boruto-page,[id="mp2-shell"]) .post .body{font-size:var(--fs-body);color:var(--ink-80);white-space:pre-wrap;overflow-wrap:anywhere}
/* 🔴🔴【全域掃討で発見・2026-08-30】.tl-emptyは#mp2-shell(着せ替えの地)の内側(自分の感想タブ等)
   でも使われるが、色が固定の--ink-60のまま。実測=このクラスは地の上に直接置かれる。フォールバック
   により、話数ページ(#mp2-shell の外)や明るい着せ替えでの見え方は変えない。 */
/* 🔴🔴【実測で発覚・2026-08-30】--mp2-tx2(62%透過)は、地の色との組み合わせによっては
   4.5:1を下回る（konoha実測4.22:1）。フルオパシティの--mp2-txに変更して確実に満たす。 */
/* 🔴【椿さんご指示・2026-09-15「ページでのインデントとか余白…規定通りに」】
   ~~`padding:.6rem 0`~~ ⇒ 左右に間隔の札を置く。**実測で左端が 1px** ＝この1行だけ
   画面の縁に貼りついて、他の塊（すべて 16px）と揃っていなかった。
   ⚠️ `.88rem`（14.08px）も6段に無い数字だったので `--fs-note`（14px）へ。 */
:is(.boruto-page,[id="mp2-shell"]) .tl-empty{color:var(--mp2-tx, var(--ink-60));font-size:var(--fs-note);padding:.6rem var(--space-sm)}

/* 返信スレッド（Phase 4・コメント💬＝カード下にインライン開閉） */
:is(.boruto-page,[id="mp2-shell"]) .bt-thread{margin-top:.75rem;padding-top:.7rem;border-top:1px dashed var(--ink-20)}
/* 🔴【WO-092・第5便・椿さん 2026-09-20】「コメント欄がノーフィードなので、せめてタイムラインのようなフィード投稿のUIに」。
   ⭐ 手本＝流れる感想の行（`.an2-voice-row`・このファイルの 7398 行あたり）＝札にしない・1行ごとに細い仕切り線・
      アバター＋（名前と時刻の行）＋本文。数字はそれに合わせる（アバター 40px・間 12px・行の上下 12px）。
   ⚠️ 時刻の寄せは `margin-inline-start`（アラビア語で左右が入れ替わる）。 */
:is(.boruto-page,[id="mp2-shell"]) .bt-thread-list{display:flex;flex-direction:column;gap:0}
:is(.boruto-page,[id="mp2-shell"]) .bt-reply{display:flex;gap:12px;align-items:flex-start;padding:12px 0;border-bottom:1px solid color-mix(in srgb, var(--nb-text) 10%, transparent)}
:is(.boruto-page,[id="mp2-shell"]) .bt-reply:last-child{border-bottom:0}
/* 🔴【WO-092・第6便・椿さん 2026-09-21】「投稿者のアイコンが四角になってます。アイコンアバターは正円で
   登録されてるので円で。」＝丸い箱に写真を入れても、箱が切り抜いていなければ写真は四角のまま出る。
   ⚠️ `border-radius` は**箱の形**であって、中の `<img>` には掛からない。切り抜きは `overflow:hidden`、
      写真側は `object-fit:cover`＋`border-radius` の**対**で決まる（サイト共通の `.avatar`＝4840行が同じ形）。
   ⚠️ この欠けは前からあった（第5便で 24px→40px にしたぶん目に付いた）。 */
:is(.boruto-page,[id="mp2-shell"]) .bt-reply-av{width:40px;height:40px;border-radius:50%;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;font-weight:700;color:var(--boruto-ink);font-size:var(--fs-mini);flex:none}
:is(.boruto-page,[id="mp2-shell"]) .bt-reply-av img{width:100%;height:100%;object-fit:cover;border-radius:50%;display:block}
:is(.boruto-page,[id="mp2-shell"]) .bt-reply-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
:is(.boruto-page,[id="mp2-shell"]) .bt-reply-head{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;margin-bottom:0}
:is(.boruto-page,[id="mp2-shell"]) .bt-reply-name{font-weight:700;font-size:var(--fs-note)}
:is(.boruto-page,[id="mp2-shell"]) .bt-reply-xh{font-size:var(--fs-mini);color:var(--boruto-link)}
:is(.boruto-page,[id="mp2-shell"]) .bt-reply-time{margin-inline-start:auto;font-size:var(--fs-mini);color:color-mix(in srgb, var(--nb-text) 70%, transparent)}
:is(.boruto-page,[id="mp2-shell"]) .bt-reply-body{font-size:var(--fs-note);color:var(--nb-text);white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.6}
/* 🔴【WO-092・第6便・椿さん 2026-09-21】「どの投稿へのリプライかが分かるようにしましょう」。
   ⚠️ 段差も囲みも作らない＝タイムラインの行の静けさを壊さないため、**文字だけ**で示す。 */
:is(.boruto-page,[id="mp2-shell"]) .bt-reply-to{align-self:flex-start;padding:0;border:0;background:none;font:inherit;font-size:var(--fs-mini);font-weight:700;color:var(--boruto-link);cursor:pointer;text-align:start}
:is(.boruto-page,[id="mp2-shell"]) .bt-reply-to:hover{text-decoration:underline}
/* 🔴【WO-092・第6便・PM 実測 2026-09-21】「返信」は**いつも作っておいて、会員のときだけ出す**。
   ⚠️ 行を描くのは「この人は会員か」が分かる前になることがある＝行ごとに判定すると、
      会員なのに1つも出ない画面が生まれる（同じ画面を2回測って 3/3 と 0/3 に割れた）。
   ⇒ 判定はスレッド1つに1回（`.is-member`）。押せないボタンは出さない、という決まりは守る。 */
:is(.boruto-page,[id="mp2-shell"]) .bt-reply-btn{display:none;align-self:flex-start;margin-top:4px;min-height:32px;padding:0 2px;border:0;background:none;font:inherit;font-size:var(--fs-mini);font-weight:700;color:color-mix(in srgb, var(--mp2-tx, var(--nb-text)) 70%, transparent);cursor:pointer}
:is(.boruto-page,[id="mp2-shell"]) .bt-thread.is-member .bt-reply-btn{display:inline-flex}
:is(.boruto-page,[id="mp2-shell"]) .bt-reply-btn:hover{color:var(--boruto-link)}
:is(.boruto-page,[id="mp2-shell"]) .bt-reply-target{display:flex;align-items:center;gap:8px;padding:6px 10px;border-radius:999px;background:color-mix(in srgb, var(--mp2-tx, var(--nb-text)) 6%, transparent);align-self:flex-start}
:is(.boruto-page,[id="mp2-shell"]) .bt-reply-target[hidden]{display:none}
:is(.boruto-page,[id="mp2-shell"]) .bt-reply-target-name{font-size:var(--fs-mini);font-weight:700;color:var(--nb-text)}
:is(.boruto-page,[id="mp2-shell"]) .bt-reply-target-x{min-width:24px;min-height:24px;padding:0;border:0;background:none;font:inherit;font-size:var(--fs-note);line-height:1;color:color-mix(in srgb, var(--mp2-tx, var(--nb-text)) 70%, transparent);cursor:pointer}
:is(.boruto-page,[id="mp2-shell"]) .bt-thread-empty,:is(.boruto-page,[id="mp2-shell"]) .bt-thread-note{color:color-mix(in srgb, var(--nb-text) 70%, transparent);font-size:var(--fs-note);padding:.3rem 0}
:is(.boruto-page,[id="mp2-shell"]) .bt-thread-more{margin-top:.5rem;align-self:flex-start;font-size:var(--fs-mini);padding:.35rem .9rem}
:is(.boruto-page,[id="mp2-shell"]) .bt-thread-more[hidden]{display:none}
:is(.boruto-page,[id="mp2-shell"]) .bt-thread-composer{margin-top:16px;display:flex;flex-direction:column;gap:8px}
:is(.boruto-page,[id="mp2-shell"]) .bt-reply-input{width:100%;box-sizing:border-box;min-height:60px;resize:vertical;border:1px solid var(--ink-20);border-radius:var(--radius-md);padding:.5rem .65rem;font:inherit;font-size:var(--fs-body);line-height:1.5}
:is(.boruto-page,[id="mp2-shell"]) .bt-reply-input:focus-visible{outline:2px solid var(--boruto-deep);outline-offset:1px;border-color:var(--boruto-deep)}
:is(.boruto-page,[id="mp2-shell"]) .bt-reply-actions{display:flex;align-items:center;gap:.7rem;justify-content:flex-end}
:is(.boruto-page,[id="mp2-shell"]) .bt-reply-count{font-size:var(--fs-mini);color:color-mix(in srgb, var(--nb-text) 70%, transparent);margin-inline-end:auto}
/* 🔴【WO-092・第4便 R5/R6・P-1256】薄い文字の対比（基準 4.5・PM 実測）＝「削除」と「まだコメントがありません。」4.38・文字数「0 / 280」明 2.5／暗 3.97・コメント欄の案内の文字（ブラウザの既定の灰色）暗 2.43。
   文字色（明暗で切り替わる）の70%にそろえた＝明 6.2／暗 5.6 以上（PM 計算）。色はそれぞれの行の中で直す（後ろで上書きすると、宣言の重複の検査が止める）。 */
:is(.boruto-page,[id="mp2-shell"]) .bt-reply-input::placeholder{color:color-mix(in srgb, var(--nb-text) 70%, transparent);opacity:1}

/* ・・・ メニュー（自分の投稿/コメントの 編集・削除） */
/* 🔴 【WO-114・P-1326】体験談のページ（.story-detail）の「…」にも同じ見た目を効かせる（体験談は BaseLayout＝.boruto-page の外）。 */
:is(.boruto-page,[id="mp2-shell"],.story-detail) .bt-kebab-wrap{position:relative;display:inline-flex;margin-left:.1rem}
:is(.boruto-page,[id="mp2-shell"],.story-detail) .bt-kebab{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;padding:0;border:0;background:none;color:var(--ink-40);cursor:pointer;border-radius:6px;line-height:0;position:relative}
:is(.boruto-page,[id="mp2-shell"],.story-detail) .bt-kebab::before{content:'';position:absolute;left:0;right:0;top:50%;height:44px;transform:translateY(-50%)}
:is(.boruto-page,[id="mp2-shell"],.story-detail) .bt-kebab svg{width:18px;height:18px;fill:currentColor}
:is(.boruto-page,[id="mp2-shell"],.story-detail) .bt-kebab:hover{color:var(--ink-80);background:var(--boruto-soft)}
:is(.boruto-page,[id="mp2-shell"],.story-detail) .bt-kebab:focus-visible{outline:2px solid var(--boruto-deep);outline-offset:1px}
:is(.boruto-page,[id="mp2-shell"],.story-detail) .bt-kebab-menu{position:absolute;top:calc(100% + 2px);right:0;z-index:30;min-width:124px;background:var(--nb-card);border:1px solid var(--ink-20);border-radius:10px;box-shadow:var(--shadow-md);padding:.25rem;display:flex;flex-direction:column}
:is(.boruto-page,[id="mp2-shell"],.story-detail) .bt-kebab-menu[hidden]{display:none}
:is(.boruto-page,[id="mp2-shell"],.story-detail) .bt-kebab-item{text-align:left;padding:.45rem .6rem;border:0;background:none;font:inherit;font-size:var(--fs-note);color:var(--ink-80);cursor:pointer;border-radius:6px;white-space:nowrap}
:is(.boruto-page,[id="mp2-shell"],.story-detail) .bt-kebab-item:hover{background:var(--boruto-soft)}
:is(.boruto-page,[id="mp2-shell"],.story-detail) .bt-kebab-item:focus-visible{outline:2px solid var(--boruto-deep);outline-offset:-2px}
:is(.boruto-page,[id="mp2-shell"],.story-detail) .bt-kebab-item:last-child{color:#c0392b}
:is(.boruto-page,[id="mp2-shell"],.story-detail)[data-bt-select] .bt-kebab-wrap{pointer-events:none;opacity:.4}

/* インライン編集（投稿/コメント本文） */
:is(.boruto-page,[id="mp2-shell"]) .bt-inline-edit{margin:.4rem 0}
:is(.boruto-page,[id="mp2-shell"]) .bt-inline-ta{width:100%;box-sizing:border-box;min-height:64px;resize:vertical;border:1px solid var(--ink-20);border-radius:var(--radius-md);padding:.5rem .65rem;font:inherit;font-size:var(--fs-body);line-height:1.6}
:is(.boruto-page,[id="mp2-shell"]) .bt-inline-ta:focus-visible{outline:2px solid var(--boruto-deep);outline-offset:1px;border-color:var(--boruto-deep)}
:is(.boruto-page,[id="mp2-shell"]) .bt-inline-actions{display:flex;align-items:center;gap:.6rem;justify-content:flex-end;margin-top:.4rem}
:is(.boruto-page,[id="mp2-shell"]) .bt-inline-count{font-size:var(--fs-mini);color:var(--ink-40);margin-right:auto}
/* キャンセル左・保存右。grid 1fr×2 で等幅（広い方＝キャンセル基準に保存も揃う） */
:is(.boruto-page,[id="mp2-shell"]) .bt-inline-btns{display:inline-grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:.6rem}
:is(.boruto-page,[id="mp2-shell"]) .bt-inline-btns .btn{min-width:0;width:100%}

/* 長文の感想の折り畳み（5行表示＝6行目から折る・端末ごとの実描画で判定＋「さらに表示」シアン） */
:is(.boruto-page,[id="mp2-shell"]) .post .body.bt-clamp{display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden}
:is(.boruto-page,[id="mp2-shell"]) .bt-more{display:inline-block;margin-top:.3rem;padding:0;border:0;background:none;color:var(--boruto-link);font:inherit;font-size:var(--fs-note);font-weight:700;cursor:pointer}
:is(.boruto-page,[id="mp2-shell"]) .bt-more:hover{text-decoration:underline}
:is(.boruto-page,[id="mp2-shell"]) .bt-more:focus-visible{outline:2px solid var(--boruto-deep);outline-offset:2px}

/* M3: 原文トグル（X 風・本文直下）。設計書 §9: タップ領域 44x44px・訳文注記＋ボタン。 */
:is(.boruto-page,[id="mp2-shell"]) .bt-orig-toggle{display:flex;align-items:center;flex-wrap:wrap;gap:.5rem;margin-top:.35rem;min-height:44px}
:is(.boruto-page,[id="mp2-shell"]) .bt-orig-note,:is(.boruto-page,[id="mp2-shell"]) .bt-orig-fallback-badge{font-size:var(--fs-mini);color:var(--ink-40)}
/* 🔴 【B・UAT第7便・2026-08-21】訳が間に合わなかった投稿の小さな札。⚠️ 案C＝小さな札。長い説明文にしない（椿さん明示）。 */
:is(.boruto-page,[id="mp2-shell"]) .bt-orig-fallback-badge{display:block;margin-top:.35rem}
:is(.boruto-page,[id="mp2-shell"]) .bt-orig-btn{display:inline-flex;align-items:center;min-height:44px;padding:0 .3rem;border:0;background:none;color:var(--boruto-link);font:inherit;font-size:var(--fs-note);font-weight:700;cursor:pointer}
:is(.boruto-page,[id="mp2-shell"]) .bt-orig-btn:hover{text-decoration:underline}
:is(.boruto-page,[id="mp2-shell"]) .bt-orig-btn:focus-visible{outline:2px solid var(--boruto-deep);outline-offset:2px}


/* ページ下部「先月の感想」ナビ */
:is(.boruto-page,[id="mp2-shell"]) .chap-nav{margin:2rem 0 .5rem;display:flex;justify-content:center}
:is(.boruto-page,[id="mp2-shell"]) .chap-nav-link{display:inline-flex;align-items:center;gap:.45rem;color:var(--boruto);font-weight:700;font-size:var(--fs-note);text-decoration:none;padding:.6rem 1.2rem;border:1.5px solid rgba(2,24,36,.18);border-radius:999px}
:is(.boruto-page,[id="mp2-shell"]) .chap-nav-link svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2}
:is(.boruto-page,[id="mp2-shell"]) .chap-nav-link:hover{border-color:var(--boruto-deep);background:var(--boruto-soft)}
:is(.boruto-page,[id="mp2-shell"]) .chap-nav-link:focus-visible{outline:2px solid var(--boruto-deep);outline-offset:2px}

/* 話数一覧 */
:is(.boruto-page,[id="mp2-shell"]) .list-section-head{max-width:880px;margin:1.8rem auto .8rem}
/* 「話数を選ぶ」＝黒抜き四角（owner 2026-06-07） */
:is(.boruto-page,[id="mp2-shell"]) .list-section-head span{display:inline-flex;align-items:center;font-weight:900;font-size:1.05rem;color:#fff;background:var(--ink);padding:.34rem .9rem;line-height:1.3}
/* 🔴🔴【PM裁定・2026-09-14】~~メインサイト .mp の四角カード文法に合わせる（owner 2026-06-07）~~
   ⇒ **カードをやめ、感想の流れる面（`.an2-voice-row`）と同じ「行」にする。**
   枠・地・影・独自の880px幅を外し、1px の仕切り線＋行間ゼロ＋full-bleedへ。
   合図は押した/触れたときだけ地色がうっすら変わる（DayLadder と同じ思想＝AGENTS.md）。
   is-latest は左辺のシアン差し色を維持（触らない＝行になっても目印として機能する）。 */
/* 話数カードのラッパ（JS が D1 で中身を差し替える）＝レイアウトに影響しないよう透過 */
:is(.boruto-page,[id="mp2-shell"]) .chap-list{display:contents}
@media (max-width: 560px) {
  /* 🔴【椿さんご指示・2026-09-15「余白は規定通りに」】~~1.2rem/1rem/3rem（19.2/16/48）~~ ⇒
     間隔の札へ。⚠️ 19.2 と 48 は札に無い数字だった。 */
  :is(.boruto-page,[id="mp2-shell"]) .wrap { padding: var(--space-sm) var(--space-sm) var(--space-lg); }
}
/* 【椿さん その23・案B】--fs-mini（13px）に */
:is(.boruto-page,[id="mp2-shell"]) .pill{display:inline-block;font-size:var(--fs-mini);font-weight:700;padding:.12rem .55rem;border-radius:999px;vertical-align:middle}
:is(.boruto-page,[id="mp2-shell"]) .pill.latest{background:var(--boruto-deep);color:#fff}
:is(.boruto-page,[id="mp2-shell"]) .pill.soon{background:var(--ink-20);color:var(--ink-80)}

/* ログイン */
:is(.boruto-page,[id="mp2-shell"]) .loginbox{max-width:420px;margin:2.5rem auto;background:var(--nb-card);border:1px solid var(--ink-20);border-radius:var(--radius-lg);padding:2.2rem 1.8rem;text-align:center;box-shadow:var(--shadow-lg)}
:is(.boruto-page,[id="mp2-shell"]) .loginbox h1{font-size:1.25rem}
:is(.boruto-page,[id="mp2-shell"]) .loginbox p{font-size:.85rem;color:var(--ink-80);margin:.5rem 0 1.5rem}
:is(.boruto-page,[id="mp2-shell"]) .sso{display:flex;flex-direction:column;gap:.65rem}
:is(.boruto-page,[id="mp2-shell"]) .sso a,:is(.boruto-page,[id="mp2-shell"]) .sso button{display:flex;align-items:center;justify-content:center;gap:.6rem;width:100%;padding:.8rem;border-radius:var(--radius);border:1.5px solid var(--ink-20);background:var(--nb-card);font:inherit;font-weight:700;font-size:.9rem;cursor:pointer;color:var(--nb-text);text-decoration:none;box-sizing:border-box}
:is(.boruto-page,[id="mp2-shell"]) .sso .discord{background:#5865F2;color:#fff;border-color:#5865F2}
:is(.boruto-page,[id="mp2-shell"]) .sso a[aria-disabled="true"]{opacity:.5;pointer-events:none}
:is(.boruto-page,[id="mp2-shell"]) .sso svg{width:20px;height:20px}
:is(.boruto-page,[id="mp2-shell"]) .login-turnstile{display:flex;justify-content:center;margin:.2rem 0}
/* 【椿さん その23・案B】--fs-mini（13px）に */
:is(.boruto-page,[id="mp2-shell"]) .loginbox .fine{font-size:var(--fs-mini);color:var(--ink-60);margin-top:1.1rem;line-height:1.7}

/* マイページ */
:is(.boruto-page,[id="mp2-shell"]) .profile{background:var(--nb-card);border:1px solid var(--ink-20);border-radius:var(--radius-lg);padding:1.5rem;box-shadow:var(--shadow-sm);display:flex;gap:1.1rem;align-items:flex-start;max-width:880px;margin:0 auto}
:is(.boruto-page,[id="mp2-shell"]) .profile .pinfo h1{font-size:1.3rem}
:is(.boruto-page,[id="mp2-shell"]) .profile .pinfo .xh{color:var(--boruto-link);font-size:.85rem;display:inline-flex;align-items:center;gap:.3rem}
:is(.boruto-page,[id="mp2-shell"]) .profile .pinfo .xh svg{width:14px;height:14px}
:is(.boruto-page,[id="mp2-shell"]) .profile .pinfo .bio{font-size:.85rem;color:var(--ink-80);margin-top:.25rem}
/* 自己紹介（bio）上部インライン編集: 表示=テキスト/プレースホルダ＋hoverで編集ヒント, 編集=textarea＋保存 */
:is(.boruto-page,[id="mp2-shell"]) .profile .pinfo .pbio{margin-top:.4rem;font-size:.85rem}
:is(.boruto-page,[id="mp2-shell"]) .pbio-view{display:inline-flex;align-items:baseline;gap:.5rem;max-width:100%;background:none;border:none;padding:.15rem .25rem;margin:-.15rem -.25rem;font:inherit;font-size:.85rem;color:var(--ink-80);text-align:left;line-height:1.6;cursor:pointer;border-radius:6px}
:is(.boruto-page,[id="mp2-shell"]) .pbio-view:hover{background:var(--boruto-soft)}
:is(.boruto-page,[id="mp2-shell"]) .pbio-view:focus-visible{outline:2px solid var(--boruto-deep);outline-offset:1px}
:is(.boruto-page,[id="mp2-shell"]) .pbio-view:hover .pbio-pen,:is(.boruto-page,[id="mp2-shell"]) .pbio-view:focus-visible .pbio-pen{opacity:1}
:is(.boruto-page,[id="mp2-shell"]) .pbio-text{white-space:pre-wrap;overflow-wrap:anywhere}
:is(.boruto-page,[id="mp2-shell"]) .pbio-placeholder{color:var(--boruto-link)}
/* 【椿さん その23・案B】--fs-mini（13px）に */
:is(.boruto-page,[id="mp2-shell"]) .pbio-pen{flex:none;font-size:var(--fs-mini);color:var(--boruto-link);opacity:.55;transition:opacity .15s}
:is(.boruto-page,[id="mp2-shell"]) .pbio-edit{margin-top:.45rem}
:is(.boruto-page,[id="mp2-shell"]) .pbio-input{width:100%;box-sizing:border-box;font:inherit;font-size:.85rem;line-height:1.6;padding:.5rem .6rem;border:1px solid var(--ink-20);border-radius:8px;background:var(--nb-card);color:var(--nb-text);resize:vertical}
:is(.boruto-page,[id="mp2-shell"]) .pbio-input:focus-visible{outline:2px solid var(--boruto-deep);outline-offset:1px}
:is(.boruto-page,[id="mp2-shell"]) .pbio-foot{display:flex;align-items:center;justify-content:space-between;gap:.6rem;margin-top:.45rem}
/* 【椿さん その23・案B】--fs-mini（13px）に */
:is(.boruto-page,[id="mp2-shell"]) .pbio-count{font-size:var(--fs-mini);color:var(--ink-60)}
:is(.boruto-page,[id="mp2-shell"]) .pbio-btns{display:inline-flex;gap:.4rem}
:is(.boruto-page,[id="mp2-shell"]) .pbio-btns .bt-mp-btn{min-width:84px;min-height:34px}
:is(.boruto-page,[id="mp2-shell"]) .profile .edit{margin-left:auto;align-self:flex-start}
:is(.boruto-page,[id="mp2-shell"]) .mypage{max-width:880px;margin:0 auto}
:is(.boruto-page,[id="mp2-shell"]) .mp-tabs{display:flex;gap:1.4rem;border-bottom:1px solid var(--ink-20);margin:1.5rem 0 1rem;font-size:.88rem}
:is(.boruto-page,[id="mp2-shell"]) .mp-tabs button{padding:.5rem 0;color:var(--ink-60);cursor:pointer;border:none;border-bottom:2px solid transparent;background:none;font:inherit}
:is(.boruto-page,[id="mp2-shell"]) .mp-tabs button.on{color:var(--nb-text);font-weight:700;border-color:var(--boruto-deep)}
:is(.boruto-page,[id="mp2-shell"]) .mp-post{background:var(--nb-card);border:1px solid var(--ink-20);border-radius:var(--radius);padding:.8rem 1rem;margin-bottom:.6rem;font-size:.9rem}
/* 【椿さん その23・案B】--fs-mini（13px）に（2行とも） */
:is(.boruto-page,[id="mp2-shell"]) .mp-post .mp-del{float:right;font-size:var(--fs-mini);color:var(--ink-60);cursor:pointer;background:none;border:none;font:inherit}
:is(.boruto-page,[id="mp2-shell"]) .mp-post .meta{font-size:var(--fs-mini);color:var(--ink-60);margin-bottom:.3rem}
:is(.boruto-page,[id="mp2-shell"]) .mp-post .meta a{color:var(--boruto-link)}
/* W-18是正・2026-08-19(PM裁定): 「自分の投稿履歴」統合時系列リスト。1行=種別バッジ+見出し+日付+リンク（軽量形・カードにしない）。BORUTO感想の行にだけ削除ボタン(PM裁定③) */
:is(.boruto-page,[id="mp2-shell"]) .mp-tl-list{border-top:1px solid var(--ink-20)}
:is(.boruto-page,[id="mp2-shell"]) .mp-tl-item{display:flex;align-items:center;gap:.7rem;padding:.7rem 0;border-bottom:1px solid var(--ink-20)}
:is(.boruto-page,[id="mp2-shell"]) .mp-tl-link{display:flex;align-items:center;gap:.7rem;flex:1 1 auto;min-width:0;text-decoration:none;color:inherit}
/* 【椿さん その23・案B】--fs-mini（13px）に */
:is(.boruto-page,[id="mp2-shell"]) .mp-tl-badge{flex:0 0 auto;font-size:var(--fs-mini);font-weight:700;padding:.2rem .5rem;border-radius:999px;background:var(--ink-10,#f0f0f0);color:var(--ink-60)}
:is(.boruto-page,[id="mp2-shell"]) .mp-tl-badge--comment,:is(.boruto-page,[id="mp2-shell"]) .mp-tl-badge--analysis{background:#fde9d9;color:#a15c1e}
:is(.boruto-page,[id="mp2-shell"]) .mp-tl-badge--story{background:#e3edfb;color:#2f5fa8}
:is(.boruto-page,[id="mp2-shell"]) .mp-tl-badge--place{background:#e2f3e6;color:#2f7d4a}
:is(.boruto-page,[id="mp2-shell"]) .mp-tl-badge--clip{background:#f3e6f7;color:#7a3ea1}
:is(.boruto-page,[id="mp2-shell"]) .mp-tl-body{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:.15rem}
:is(.boruto-page,[id="mp2-shell"]) .mp-tl-title{font-size:.88rem;color:var(--nb-text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* 【椿さん その23・案B】--fs-mini（13px）に（2行とも） */
:is(.boruto-page,[id="mp2-shell"]) .mp-tl-date{font-size:var(--fs-mini);color:var(--ink-60)}
:is(.boruto-page,[id="mp2-shell"]) .mp-tl-del{flex:0 0 auto;font-size:var(--fs-mini);color:var(--ink-60);cursor:pointer;background:none;border:none;font:inherit}
:is(.boruto-page,[id="mp2-shell"]) .mp-tl-more{display:block;width:100%;margin-top:.8rem;padding:.6rem;font-size:.85rem;color:var(--boruto-link);background:none;border:1px solid var(--ink-20);border-radius:var(--radius);cursor:pointer;font:inherit}
:is(.boruto-page,[id="mp2-shell"]) .mp-panel{display:none}
:is(.boruto-page,[id="mp2-shell"]) .mp-panel.show{display:block}
/* W-18是正・2026-08-19(PM指定): 設定/活動歴/自分の投稿履歴タブの最上段に大見出しを追加(プロフィールタブは対象外)。--fs-pageは「ページの大見出し」として既に定義済みのトークンをそのまま使う */
/* 🔴🔴【全域掃討で発見・2026-08-30】この大見出しは#mp2-shell(着せ替えの地)の直下にあるのに、
   色が固定の--ink(#1a1a1a)のまま。実測=konoha地(明)/akatsuki地(暗)どちらでも背景色は地色そのもの
   （白いカードの中ではない）。暗い着せ替えでは実質読めない。 */
/* 🔴🔴【2026-09-23・PM是正】控えを `--ink`（明るい表示専用）から `--nb-text`（暗いとき反転）へ。
   ■ 何が起きていたか＝会員の着せ替えが決まっていない画面では `--mp2-tx` が無いので控えが使われる。
     その控えが墨の直書きだったため、**地だけ暗くなって文字は黒のまま**残った
     （PM 実測＝文字 rgb(26,26,26) / 地 rgb(28,28,30)・差 1.02 倍・読める基準は 3 倍）。
   ⭐ **明るい表示は1ドットも変わらない**＝`--nb-text` は明るいとき `var(--ink)` と同じ値（:210）。
   🔴 壊し確認＝ここを `var(--ink)` に戻すと `qa-dark-mode` の「新しく読めなくなった箇所」が増える。 */
:is(.boruto-page,[id="mp2-shell"]) .acc2-page-head{font-size:var(--fs-page);font-weight:900;color:var(--mp2-tx, var(--nb-text));margin:0 0 var(--space-md)}
@media (max-width:720px){:is(.boruto-page,[id="mp2-shell"]) .acc2-page-head{font-size:24px}}
:is(.boruto-page,[id="mp2-shell"]) .settings-card{background:var(--nb-card);border:1px solid var(--ink-20);border-radius:var(--radius-md);box-shadow:var(--shadow-sm);overflow:hidden}
:is(.boruto-page,[id="mp2-shell"]) .set-row{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.9rem 1.1rem;border-bottom:1px solid var(--ink-20);font-size:.88rem}
:is(.boruto-page,[id="mp2-shell"]) .set-row:last-child{border-bottom:none}
:is(.boruto-page,[id="mp2-shell"]) .set-k{color:var(--ink-80);font-weight:700}
:is(.boruto-page,[id="mp2-shell"]) .set-v{color:var(--nb-text);display:inline-flex;align-items:center;gap:.5rem;flex-wrap:wrap;justify-content:flex-end}
:is(.boruto-page,[id="mp2-shell"]) .set-v input[type="text"],:is(.boruto-page,[id="mp2-shell"]) .set-v textarea{font:inherit;padding:.35rem .5rem;border:1px solid var(--ink-20);border-radius:6px;background:var(--nb-card);color:var(--nb-text)}
:is(.boruto-page,[id="mp2-shell"]) .set-row.danger .set-k{color:var(--vermilion,#c0392b)}
:is(.boruto-page,[id="mp2-shell"]) .toggle{display:inline-flex;align-items:center;background:var(--ink-20);color:var(--ink-80);font-size:var(--fs-mini);font-weight:800;padding:.15rem .6rem;border-radius:999px;border:none;cursor:pointer}
:is(.boruto-page,[id="mp2-shell"]) .toggle[aria-pressed="true"]{background:var(--boruto-deep);color:#fff}
/* トグルスイッチ（引き算デザイン・控えめ）: OFF=薄グレーのトラック / ON=シアン+ノブ右 */
:is(.boruto-page,[id="mp2-shell"]) .bt-switch{flex:none;width:40px;height:22px;border-radius:999px;border:none;background:var(--ink-20);position:relative;cursor:pointer;padding:0;transition:background .15s}
:is(.boruto-page,[id="mp2-shell"]) .bt-switch::before{content:"";position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.22);transition:transform .15s}
:is(.boruto-page,[id="mp2-shell"]) .bt-switch[aria-checked="true"]{background:var(--boruto-deep)}
:is(.boruto-page,[id="mp2-shell"]) .bt-switch[aria-checked="true"]::before{transform:translateX(18px)}
:is(.boruto-page,[id="mp2-shell"]) .bt-switch:focus-visible{outline:2px solid var(--boruto-deep);outline-offset:2px}
/* マイページの操作ボタン（編集/変更を保存/退会する/キャンセル）は高さ38px・幅を揃える＝ヘッダー「日本語」相当のスリムさ */
:is(.boruto-page,[id="mp2-shell"]) .bt-mp-btn{min-height:38px;min-width:104px;justify-content:center;font-size:var(--fs-mini)}
/* プロフィール: 長い表示名でも崩れないよう pinfo を縮小可能＋折返し（レスポンシブ） */
:is(.boruto-page,[id="mp2-shell"]) .profile .pinfo{flex:1;min-width:0;overflow-wrap:anywhere}
:is(.boruto-page,[id="mp2-shell"]) .profile .pname{overflow-wrap:anywhere}
/* 退会カードは設定カードと分離（間隔） */
:is(.boruto-page,[id="mp2-shell"]) .bt-leave-card{margin-top:1rem}
@media (max-width:600px){
  /* モバイル: 編集ボタンがカードからはみ出さないよう折返し＝avatar+情報の下に右寄せで回す */
  :is(.boruto-page,[id="mp2-shell"]) .profile{flex-wrap:wrap}
  :is(.boruto-page,[id="mp2-shell"]) .profile .edit{margin-left:auto;margin-top:.2rem}
  /* 退会行のラベル＋ボタン2つも窮屈なら折返す */
  :is(.boruto-page,[id="mp2-shell"]) .bt-leave-card .set-row.danger{flex-wrap:wrap;gap:.6rem}
  /* ④ 自己紹介の読み書きを楽に: pinfo を全幅化（アバター右で潰れない）＋編集枠を高く。
     pinfo を flex-basis:100% にすると avatar の下に全幅で回り、bio の表示・編集が画面幅いっぱいになる（DOM順=Tab順は維持）。 */
  :is(.boruto-page,[id="mp2-shell"]) .profile .pinfo{flex-basis:100%}
  :is(.boruto-page,[id="mp2-shell"]) .pbio-input{min-height:5.5em}
}
/* 🔴🔴【全域掃討で発見・2026-08-30】#mp2-shellの内側では--boruto-softが定義されておらず
   (実測=背景が地色そのもの・konoha/akatsukiで背景が変わる)、色が固定の--ink-80のままだと
   暗い着せ替えで読めない。 */
/* 🔴🔴【実測で発覚・2026-08-30】--mp2-tx2(62%透過)は、地の色との組み合わせによっては
   4.5:1を下回る（konoha実測4.01:1）。フルオパシティの--mp2-txに変更して確実に満たす。 */
:is(.boruto-page,[id="mp2-shell"]) .section-note{background:var(--boruto-soft);border-left:3px solid var(--boruto-deep);border-radius:6px;padding:.7rem .9rem;font-size:.8rem;color:var(--mp2-tx, var(--ink-80));margin:1.1rem auto 0;max-width:880px}

/* ③ 設定画面の再設計: 墨の日本語小見出しで章立て・色付きコールアウト(section-note)は account 内で廃止し静かな補足文へ。 */
:is(.boruto-page,[id="mp2-shell"]) .set2{max-width:var(--max-width);margin:0 auto}/* W-17是正・2026-08-19(PM指定): 880px固定は#229で直した頭打ちバグの生き残り。プロフィールタブの本文面(.mp2-inner)と同じ式(max-width:var(--max-width)+margin:0 auto)に揃え、親(.mp-panel、既にmax-width:var(--max-width)で開1140/閉1280)にそのまま追従させる */
:is(.boruto-page,[id="mp2-shell"]) .set-group{margin-bottom:1.9rem}
:is(.boruto-page,[id="mp2-shell"]) .set-group:last-child{margin-bottom:0}
/* 🔴🔴【全域掃討で発見・2026-08-30】U2-04と同型の欠陥＝この見出しは#mp2-shell(着せ替えの地)の
   内側にあるのに、色が固定の--ink(#1a1a1a)のまま。暗い着せ替え(akatsuki等)の暗い地の上では
   実質読めない(実測rgb(26,26,26)固定)。--mp2-txはmp2-shellの内側だけで定義されるので、
   フォールバックにより明るい着せ替え・mp2-shell外(#mp2-shellが無いページ)では見え方を変えない。 */
/* 🔴🔴【2026-09-23・PM是正】理由は C-1（`.acc2-page-head`）と同じ＝控えを `--nb-text` へ。
   ⚠️ **69個のうち15個がここ**＝単独でいちばん多い。 */
:is(.boruto-page,[id="mp2-shell"]) .set-eyebrow{font-size:.96rem;font-weight:900;letter-spacing:0;color:var(--mp2-tx, var(--nb-text));margin:0 0 .65rem;padding:0 0 .35rem;position:relative}
:is(.boruto-page,[id="mp2-shell"]) .set-eyebrow::after{content:"";position:absolute;left:0;bottom:0;width:1.8rem;height:3px;background:var(--fire);border-radius:2px}
:is(.boruto-page,[id="mp2-shell"]) .set-list{background:var(--nb-card);border:1px solid var(--ink-20);border-radius:var(--r-card);box-shadow:var(--shadow-sm);overflow:hidden}
:is(.boruto-page,[id="mp2-shell"]) .set2-row{padding:.95rem 1.1rem;border-bottom:1px solid var(--ink-20)}
:is(.boruto-page,[id="mp2-shell"]) .set2-row:last-child{border-bottom:none}
:is(.boruto-page,[id="mp2-shell"]) .set2-line{display:flex;align-items:center;justify-content:space-between;gap:.6rem 1rem;flex-wrap:wrap}
:is(.boruto-page,[id="mp2-shell"]) .set2-k{font-weight:700;font-size:var(--fs-note);color:var(--nb-text)}
:is(.boruto-page,[id="mp2-shell"]) .set2-line .set-v{display:inline-flex;align-items:center;gap:.5rem;flex-wrap:wrap;justify-content:flex-end}
:is(.boruto-page,[id="mp2-shell"]) .set2-line .set-v input[type="text"]{font:inherit;padding:.4rem .55rem;border:1px solid var(--ink-20);border-radius:var(--r-input);background:var(--nb-card);color:var(--nb-text);min-width:160px}
/* 🔴🔴【WO-144 round4・item8・PM是正・2026-09-27】設定の「ID」の行だけ＝「@」と入力欄を
   1つの単位に見せる。.set2-line の space-between（他の設定行はkey左・value右）をこの行だけ
   flex-start にゆるめ、.set-v とその中の input を flex:1 にして「@」の直後から行の右端まで
   入力欄自身を伸ばす（.set-v だけ伸ばして中の input を伸ばさないと、justify-content:flex-end の
   ぶんだけ「@」との間に空白が戻るため両方を伸ばす）。他の .set2-line（ダークモード・通知・
   ログアウト等）はセレクタを名指ししていないので1px も変わらない。 */
:is(.boruto-page,[id="mp2-shell"]) .set2-line.set2-line--handle{justify-content:flex-start;gap:6px}
:is(.boruto-page,[id="mp2-shell"]) .set2-line--handle .set-v{flex:1;min-width:0;justify-content:flex-start}
:is(.boruto-page,[id="mp2-shell"]) .set2-line--handle .set-v input[type="text"]{flex:1;width:auto;min-width:0}
:is(.boruto-page,[id="mp2-shell"]) .set2-help{font-size:var(--fs-note);color:var(--ink-80);margin:.4rem 0 0;line-height:1.65}
/* F-15（UAT第6便）：設定タブの言語一覧。.set2-row を <a> で使うため display:flex を明示（既定は inline）。 */
:is(.boruto-page,[id="mp2-shell"]) .set2-lang-row{display:flex;align-items:center;justify-content:space-between;gap:.6rem;text-decoration:none;color:inherit;transition:background-color .15s ease;min-height:44px;box-sizing:border-box}
:is(.boruto-page,[id="mp2-shell"]) .set2-lang-row:hover,:is(.boruto-page,[id="mp2-shell"]) .set2-lang-row:focus-visible{background:var(--scroll)}
:is(.boruto-page,[id="mp2-shell"]) .set2-lang-current{color:var(--fire)}
:is(.boruto-page,[id="mp2-shell"]) .set2-lang-current .set2-k{color:var(--fire)}
:is(.boruto-page,[id="mp2-shell"]) .set2-lang-check{color:var(--fire);flex-shrink:0}
/* 椿さん2回目「プルダウンで開いて選ぶ」＝<details>化。overflow解除は既存の .bt-leave-details と同じ理由（開いた中身をクリップしない）。 */
:is(.boruto-page,[id="mp2-shell"]) .set2-lang-dd.set-list{overflow:visible}
:is(.boruto-page,[id="mp2-shell"]) .set2-lang-dd-summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:.6rem;padding:.95rem 1.1rem;cursor:pointer;user-select:none;min-height:44px;box-sizing:border-box;border-radius:var(--r-input)}
:is(.boruto-page,[id="mp2-shell"]) .set2-lang-dd-summary::-webkit-details-marker{display:none}
:is(.boruto-page,[id="mp2-shell"]) .set2-lang-dd-summary:hover,:is(.boruto-page,[id="mp2-shell"]) .set2-lang-dd-summary:focus-visible{background:var(--scroll)}
:is(.boruto-page,[id="mp2-shell"]) .set2-lang-dd-caret{color:var(--ink-40,rgba(26,26,26,.4));flex-shrink:0;transition:transform .15s}
:is(.boruto-page,[id="mp2-shell"]) .set2-lang-dd[open]>.set2-lang-dd-summary{border-bottom:1px solid var(--ink-20);border-radius:var(--r-input) var(--r-input) 0 0}
:is(.boruto-page,[id="mp2-shell"]) .set2-lang-dd[open]>.set2-lang-dd-summary .set2-lang-dd-caret{transform:rotate(180deg)}
:is(.boruto-page,[id="mp2-shell"]) .set2-sub{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;margin:.55rem 0 0;font-size:var(--fs-note)}
:is(.boruto-page,[id="mp2-shell"]) .set2-sub-k{color:var(--ink-60);font-weight:700;font-size:var(--fs-mini);flex-shrink:0}
:is(.boruto-page,[id="mp2-shell"]) .set2-url{color:var(--boruto-link);font-size:var(--fs-note);word-break:break-all}
/* 移行の案内（WO-004 §9-6）。まだ一度も書いていない人にだけ出る1枚。
   ⚠️ .set2-sub は横並びなので、こちらは縦に積み直す（見出し→本文→ボタン）。
   🔴 押す的は44px以上（全画面の規約）。⚠️ 文言は仮なので、長さが変わっても崩れない形にする。 */
/* 🔴 ダークでも文字色を反転させない。地色をブランド色（アンバー）で固定しているので、
   本文色まで反転すると**明るい地に明るい文字**になって読めなくなる
   （[[feedback_dark_mode_rules]]「ブランド色の帯の上はライトのまま固定」）。⇒ 墨を直値で置く。 */
:is(.boruto-page,[id="mp2-shell"]) .set2-ready{display:block;margin:.7rem 0 0;padding:.8rem .9rem;border:1px solid #FF7601;border-radius:var(--r-card);background:#fff1de;color:#1a1a1a}
:is(.boruto-page,[id="mp2-shell"]) .set2-ready-t{margin:0;font-weight:700;font-size:var(--fs-body);color:#1a1a1a}
:is(.boruto-page,[id="mp2-shell"]) .set2-ready-b{margin:.35rem 0 .7rem;font-size:var(--fs-note);color:#1a1a1a;line-height:1.7}
/* 押す的は44px以上（全画面の規約）。文言が仮で長さが変わっても崩れないように。 */
:is(.boruto-page,[id="mp2-shell"]) .set2-ready .btn{min-height:44px;display:inline-flex;align-items:center}
:is(.boruto-page,[id="mp2-shell"]) .set-actions{display:flex;justify-content:flex-end;margin-top:.7rem}
:is(.boruto-page,[id="mp2-shell"]) .set2 .danger-k{color:var(--vermilion,#8b1f12)}/* 退会＝危険操作。既存 .set-row.danger と同じ深紅で統一（白地でAA可読）。 */
/* 🔴 暗いときだけ、危ない操作の文字色を差し替える（実測＝差し替え前は対比 1.65）。
   ⚠️ 対象は**文字色の2か所だけ**＝`--vermilion` は背景にも使われているので札ごと反転しない。 */
:root[data-theme="dark"] :is(.boruto-page,[id="mp2-shell"]) .set-row.danger .set-k,
:root[data-theme="dark"] :is(.boruto-page,[id="mp2-shell"]) .set2 .danger-k{color:var(--danger-on-dark)}
:is(.boruto-page,[id="mp2-shell"]) .bt-leave-details.set-list{overflow:visible}

/* a11y: スクリーンリーダー専用見出し（マイページの恒久 h1 など） */
:is(.boruto-page,[id="mp2-shell"]) .bt-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
:is(.boruto-page,[id="mp2-shell"]) .profile .pinfo .pname{font-size:1.3rem;font-weight:900;color:var(--nb-text);margin:0}
/* マイページ「自分の感想」本文＝公開タイムラインと同じく改行・長文を保持 */
:is(.boruto-page,[id="mp2-shell"]) .mp-post .mp-body{white-space:pre-wrap;overflow-wrap:anywhere;margin-top:.2rem}
/* おしらせタブの未読バッジ（自ポストへのコメント通知数・Channel 1） */
/* 朱(--accent)地は白文字3.94:1・墨文字4.42:1のどちらもAA未達（実測）。--vermilionは
   「危ない操作」の専用色（--nb-danger）で「未読が在る」に使うと意味が衝突する
   （PM裁定・2026-09-10）→ 新しい札を作らず地を墨(--ink)へ。白文字で17.40:1・
   fire-darkは白文字3.78:1でこちらもAA未達のため不採用（実測して選定）。 */
/* 【椿さん その23・案B】--fs-mini（13px）に */
:is(.boruto-page,[id="mp2-shell"]) .mp-tab-badge{display:inline-flex;align-items:center;justify-content:center;min-width:16px;height:16px;margin-left:.35rem;padding:0 .3rem;border-radius:var(--r-pill);background:var(--ink);color:#fff;font-size:var(--fs-mini);font-weight:800;line-height:1;vertical-align:middle;font-variant-numeric:tabular-nums}
:is(.boruto-page,[id="mp2-shell"]) .mp-tab-badge[hidden]{display:none}
/* あなたへの通知リスト（Channel 1・PII非保管） */
:is(.boruto-page,[id="mp2-shell"]) .mp-my-notices{margin-bottom:1.5rem}
:is(.boruto-page,[id="mp2-shell"]) .mp-notif{background:var(--nb-card);border:1px solid var(--ink-20);border-radius:var(--r-card);padding:.7rem .9rem;margin-bottom:.5rem;font-size:var(--fs-body)}
:is(.boruto-page,[id="mp2-shell"]) .mp-notif.is-unread{border-left:3px solid var(--boruto-deep);background:var(--boruto-soft)}
:is(.boruto-page,[id="mp2-shell"]) .mp-notif-link{color:var(--nb-text);text-decoration:none;font-weight:700;display:block}
:is(.boruto-page,[id="mp2-shell"]) .mp-notif-link:hover{color:var(--boruto-deep);text-decoration:underline}
:is(.boruto-page,[id="mp2-shell"]) .mp-notif-time{display:block;font-size:var(--fs-mini);color:var(--ink-60);margin-top:.25rem}

/* マイページ 活用歴（あなたの NARUTO・BORUTO ファン史）。他者比較・競争語は出さない */
:is(.boruto-page,[id="mp2-shell"]) .mp-rank{background:var(--boruto-soft);border:1px solid rgba(2,24,36,.15);border-radius:var(--r-card);padding:.9rem 1.1rem;margin-bottom:1rem}
:is(.boruto-page,[id="mp2-shell"]) .mp-rank-now{display:flex;align-items:center;gap:.6rem}
:is(.boruto-page,[id="mp2-shell"]) .mp-rank-label{font-weight:900;font-size:1.15rem;color:var(--boruto-deep)}
/* 共通徽章（仮 SVG・絵文字の代替）。ランク章は tier で少し大きく＝格上げ */
:is(.boruto-page,[id="mp2-shell"]) .insignia{display:block;flex:none}
:is(.boruto-page,[id="mp2-shell"]) .mp-rank-insignia{width:44px;height:44px}
:is(.boruto-page,[id="mp2-shell"]) .mp-rank-insignia[data-tier="3"]{width:48px;height:48px}
:is(.boruto-page,[id="mp2-shell"]) .mp-rank-insignia[data-tier="4"]{width:52px;height:52px}
:is(.boruto-page,[id="mp2-shell"]) .mp-rank-next{margin-top:.35rem;font-size:var(--fs-note);color:var(--ink-60)}
:is(.boruto-page,[id="mp2-shell"]) .mp-stats{display:flex;gap:1.4rem;flex-wrap:wrap;margin-bottom:1rem}
:is(.boruto-page,[id="mp2-shell"]) .mp-stat{display:flex;flex-direction:column;align-items:flex-start}
:is(.boruto-page,[id="mp2-shell"]) .mp-stat-n{font-size:1.4rem;font-weight:900;color:var(--boruto-deep);font-variant-numeric:tabular-nums;line-height:1.1}
:is(.boruto-page,[id="mp2-shell"]) .mp-stat-k{font-size:var(--fs-note);color:var(--ink-60)}
:is(.boruto-page,[id="mp2-shell"]) .mp-badges{display:flex;gap:.5rem;flex-wrap:wrap}
:is(.boruto-page,[id="mp2-shell"]) .mp-badge{display:inline-flex;align-items:center;gap:.4rem;background:var(--nb-card);border:1.5px solid var(--boruto-deep);border-radius:var(--r-pill);padding:.3rem .8rem .3rem .4rem;font-size:var(--fs-mini);font-weight:700;color:var(--boruto-deep)}
:is(.boruto-page,[id="mp2-shell"]) .mp-badge-emblem{width:26px;height:26px}

/* ── 徽章 獲得演出（ジェットエンジン状の封印が1枚ずつ巻き取られて開く＋強いスクリーントーン）──
   boruto-timeline.js celebrate() が制御。金属ブレードが重なって円を成す封印→解除でブレードが1枚ずつ
   時間差で巻き取られて開く→徽章が重く着地→集中線フラッシュ＋墨の波紋。網点を強めに・毛筆の乾いた質感
   （SVG feTurbulence でエッジを荒らす）。モノクロ漫画に徽章だけがカラーで浮かぶ。タップ/Esc/Enter で次へ。 */
.bt-celebrate{position:fixed;inset:0;z-index:1200;display:flex;align-items:center;justify-content:center;color:#eaf2f5}
.bt-celebrate[hidden]{display:none}
.bt-celebrate-backdrop{position:absolute;inset:0;background:radial-gradient(circle at 50% 47%,rgba(5,26,38,.88),rgba(1,8,12,.97));opacity:0;transition:opacity .5s ease}
.bt-celebrate.on .bt-celebrate-backdrop{opacity:1}
/* 画面全体のスクリーントーン（網点・強め）。漫画の質感を前面に。 */
.bt-screentone{position:absolute;inset:0;background-image:radial-gradient(rgba(243,236,224,.95) 1.5px,transparent 2.1px);background-size:6px 6px;opacity:0;mix-blend-mode:screen;filter:url(#bt-tone-dry);-webkit-mask-image:radial-gradient(circle at 50% 47%,rgba(0,0,0,.55),rgba(0,0,0,.98) 85%);mask-image:radial-gradient(circle at 50% 47%,rgba(0,0,0,.55),rgba(0,0,0,.98) 85%)}
.bt-celebrate.on .bt-screentone{animation:bt-tone .9s ease-out .25s both,bt-tone-pulse .7s ease-out 1.7s}
/* 漫画サンバースト（集中線）＝添付PNG（黒線）を invert で白線化し screen で黒地を透過＝暗い演出上に白線。
   解除の“ドン”でフラッシュ。PNG は public/images/boruto-sunburst.png に配置。 */
.bt-focuslines{position:absolute;inset:0;opacity:0;z-index:2;background:url(/images/boruto-sunburst.png) center center / cover no-repeat;filter:invert(1);mix-blend-mode:screen}
.bt-celebrate.on .bt-focuslines{animation:bt-focus .95s ease-out 2.42s both}
/* 画面全体の重い柵扉（檻の扉）。中央のエンジン封印が錠＝扉中央は錠用に丸く開ける（柵を出さない）。
   解除＝錠（ブレード）が開く→両扉が真ん中から手前(viewer)に重く引いて開く（3D rotateY）。 */
.bt-gate{position:absolute;inset:0;z-index:1;perspective:1700px;perspective-origin:50% 46%}
.bt-gate-half{position:absolute;top:0;bottom:0;width:50%;backface-visibility:hidden;will-change:transform}
.bt-gate-half.left{left:0;transform-origin:left center;--seam:100%}
.bt-gate-half.right{right:0;transform-origin:right center;--seam:0%}
/* 縦格子（鉄柵）＝金属の縦グラデを、バー幅34/隙間20のマスクで抜き、さらに中央(継ぎ目)に錠用の丸穴を抜く。
   2枚のマスク（縦縞＋丸穴）を intersect 合成＝縞があり かつ 穴の外、だけ表示。穴の中＝柵なし。 */
.bt-gate-bars{position:absolute;inset:0;background:linear-gradient(180deg,#6e2a2a,#9c3a3a 28%,#5e2020 52%,#3c1414 78%,#1f0909);box-shadow:inset 0 0 60px rgba(0,0,0,.6);
  --hole:min(170px,44vw);
  -webkit-mask-image:repeating-linear-gradient(90deg,#000 0 34px,transparent 34px 54px),radial-gradient(circle at var(--seam) 50%,transparent var(--hole),#000 calc(var(--hole) + 1px));
  -webkit-mask-composite:source-in;
  mask-image:repeating-linear-gradient(90deg,#000 0 34px,transparent 34px 54px),radial-gradient(circle at var(--seam) 50%,transparent var(--hole),#000 calc(var(--hole) + 1px));
  mask-composite:intersect}
/* 上下の太い横梁＋鋲（マスクしない＝檻の枠） */
.bt-gate-beam{position:absolute;left:-2%;right:-2%;height:36px;background:radial-gradient(circle at 13px 50%,rgba(255,210,200,.45) 1.6px,rgba(0,0,0,.45) 2.6px,transparent 3.4px) 0 0/44px 100% repeat-x,linear-gradient(180deg,#b04a4a,#6e2626 50%,#270c0c);box-shadow:0 4px 10px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,180,170,.25)}
.bt-gate-beam.top{top:7%}
.bt-gate-beam.bot{bottom:7%}
/* 重い扉：継ぎ目(内側)が手前へ。外側を蝶番に rotateY（重々しいスロー・バウンドさせない）。 */
.bt-celebrate.on .bt-gate-half.left{animation:bt-gate-l 1.3s cubic-bezier(.62,0,.3,1) 1.6s both}
.bt-celebrate.on .bt-gate-half.right{animation:bt-gate-r 1.3s cubic-bezier(.62,0,.3,1) 1.6s both}
@keyframes bt-gate-l{0%{transform:rotateY(0)}8%{transform:rotateY(-3deg)}100%{transform:rotateY(-104deg)}}
@keyframes bt-gate-r{0%{transform:rotateY(0)}8%{transform:rotateY(3deg)}100%{transform:rotateY(104deg)}}
.bt-seal{position:relative;display:flex;flex-direction:column;align-items:center;width:min(440px,90vw);z-index:3}
.bt-seal-stage{position:relative;width:min(348px,90vw);height:min(348px,90vw);display:flex;align-items:center;justify-content:center;margin-bottom:0}
.bt-seal-stage>*{position:absolute;inset:0;margin:auto}
/* ジェットエンジン状の封印ブレード（毛筆の乾いた骨白・隣と重なる）。1枚ずつ時間差で巻き取られて開く */
.bt-seal-svg{width:100%;height:100%;opacity:0}
.bt-seal-ink .bt-blade{fill:url(#bt-steel);stroke:#23282a;stroke-width:.7;transform-box:view-box;transform-origin:100px 100px}
.bt-seal-ink .bt-seal-rim{fill:none;stroke:rgba(236,226,205,.85);stroke-width:2.6}
.bt-seal-ink .bt-seal-rim.inner{stroke-width:2}
.bt-celebrate.on .bt-seal-svg{animation:bt-fade-in .4s ease-out both}
.bt-celebrate.on .bt-seal-ink .bt-blade{animation:bt-blade-open .6s cubic-bezier(.55,0,.85,.4) forwards;animation-delay:calc(.45s + var(--i) * .04s)}
.bt-celebrate.on .bt-seal-ink .bt-seal-rim{animation:bt-fade-out .6s ease-out 1.75s both}
/* 墨の波紋（解除＝着地の瞬間にドンと広がる） */
.bt-seal-ripple{width:48%;height:48%;border-radius:50%;border:2.5px solid rgba(243,236,224,.55);opacity:0}
.bt-celebrate.on .bt-seal-ripple{animation:bt-ripple 1.2s cubic-bezier(.15,.6,.3,1) 2.15s both}
/* 徽章＝封印が開いた所へ重く落ちて決然と着地（モノクロ画面に唯一のカラー） */
.bt-scroll-emblem{display:flex;gap:20px;align-items:center;justify-content:center;flex-wrap:wrap;z-index:3}
/* 徽章の背後に不透明な明るい台座（メダル土台）を縁の外までしっかり敷く＝背後の光が縁の真横に透ける
   白抜きを防ぎ、黒縁取りが「黒のまま（一覧と同じ）」読めるようにする。box-shadow spread で円の外周まで覆う。 */
.bt-celebrate-emblem{width:118px;height:118px;display:block;background:#f4efe6;border-radius:50%;box-shadow:0 0 0 6px #f4efe6,0 6px 20px rgba(0,0,0,.5)}
.bt-scroll-emblem.multi .bt-celebrate-emblem{width:98px;height:98px}
.bt-celebrate.on .bt-celebrate-emblem{animation:bt-land .62s cubic-bezier(.2,.75,.25,1) 2.2s both}
/* テキストは絶対配置＝錠(ステージ)の中心を screen 中心(50%/50%)に保ち、柵の穴(50%/50%)と座標一致させる */
.bt-scroll-caption{position:absolute;top:calc(100% + 16px);left:0;right:0;text-align:center;margin:0;font-size:var(--fs-note);font-weight:800;letter-spacing:.34em;color:#caa15a;text-indent:.34em;opacity:0}
.bt-celebrate.on .bt-scroll-caption{animation:bt-rise .6s ease-out 2.7s both}
.bt-scroll-label{position:absolute;top:calc(100% + 44px);left:0;right:0;text-align:center;margin:0;font-size:var(--fs-page);font-weight:900;letter-spacing:.08em;color:#f3f8fa;text-shadow:0 1px 14px rgba(0,163,214,.35);opacity:0}
.bt-celebrate.on .bt-scroll-label{animation:bt-rise .6s ease-out 2.82s both}
.bt-scroll-hint{position:absolute;top:calc(100% + 92px);left:0;right:0;text-align:center;margin:0;font-size:var(--fs-mini);color:rgba(234,242,245,.45);opacity:0}
.bt-celebrate.on .bt-scroll-hint{animation:bt-rise .6s ease-out 3.2s both}
/* ブレードが巻き取られる：回転しながらフェード（ease-in で“スッと持って行かれる”） */
@keyframes bt-blade-open{0%{opacity:1;transform:rotate(0) scale(1)}70%{opacity:.95}100%{opacity:0;transform:rotate(40deg) scale(1.1)}}
@keyframes bt-fade-in{to{opacity:1}}
@keyframes bt-fade-out{from{opacity:1}to{opacity:0}}
@keyframes bt-tone{from{opacity:0}to{opacity:.32}}
@keyframes bt-tone-pulse{0%{opacity:.32}40%{opacity:.55}100%{opacity:.32}}
@keyframes bt-focus{0%{opacity:0;transform:scale(1.1)}28%{opacity:.78}100%{opacity:0;transform:scale(1)}}
@keyframes bt-ripple{0%{opacity:0;transform:scale(.3)}25%{opacity:.8}100%{opacity:0;transform:scale(2.7)}}
@keyframes bt-land{0%{opacity:0;transform:translateY(-26px) scale(1.5)}15%{opacity:1}60%{opacity:1;transform:translateY(0) scale(.97)}80%{transform:scale(1.02)}100%{transform:scale(1)}}
@keyframes bt-rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
/* モーション軽減＝アニメ無し・最終状態で静止表示（ブレード/集中線/波紋は出さず徽章を見せる） */
@media (prefers-reduced-motion: reduce){
  .bt-celebrate *{animation:none!important;transition:none!important}
  .bt-celebrate .bt-scroll-caption,.bt-celebrate .bt-scroll-label,
  .bt-celebrate .bt-scroll-hint,.bt-celebrate .bt-celebrate-emblem{opacity:1}
  .bt-celebrate .bt-seal-svg{opacity:1}
  .bt-celebrate .bt-seal-ink .bt-blade,.bt-celebrate .bt-seal-ink .bt-seal-rim{opacity:0}
  .bt-celebrate .bt-screentone{opacity:.28}
  .bt-celebrate .bt-focuslines,.bt-celebrate .bt-seal-ripple,.bt-celebrate .bt-gate{opacity:0!important}
}
/* 強制カラー/ハイコントラストでも入力フォーカスを必ず可視化（outline:none を補う） */
@media (forced-colors: active){
  :is(.boruto-page,[id="mp2-shell"]) .composer textarea:focus,:is(.boruto-page,[id="mp2-shell"]) .set-v input:focus{outline:2px solid Highlight;outline-offset:1px}
}
/* 会員制ヘッダーは nav＋ログイン/アバターで要素過多。961〜1280px の窮屈域は二次CTA「+体験談を投稿する」を
   畳んで横あふれ/クリップを防ぐ（>1280px と <=960px[ハンバーガー]では従来どおり表示） */
/* 二次CTA「+体験談を投稿する」は ~1280px 以下で畳む＝モバイルでハンバーガーが画面外に押し出されて
   クリック不能になる崩れを解消（boruto は header-auth=avatar/login が増えるぶん幅が窮屈）。
   投稿動線はフッター＋デスクトップ広幅時に残る。 */
@media (max-width:1280px){
  :is(.boruto-page,[id="mp2-shell"]) .header-cta{display:none}
}
@media (min-width:961px) and (max-width:1280px){
  :is(.boruto-page,[id="mp2-shell"]) .brand-text .sub{display:none} /* 長い副題も畳んで nav+ログインの収まりを確保 */
}

@media(prefers-reduced-motion:reduce){:is(.boruto-page,[id="mp2-shell"]) *{animation:none!important}}

/* ===== お知らせ（notices・トップ下部「おしらせ」枠 / マイページ受信箱で共用） ===== */
.notices { padding: 48px 20px; }
.notices-inbox { padding: 4px 0 8px; }
.notices-inner { max-width: 760px; margin: 0 auto; width: 100%; box-sizing: border-box; }  /* width:100% が無いと flex item＋auto余白で親に縮まずコンテンツ幅になりモバイルではみ出す（owner 2026-06-09 修正） */
/* W-21（2026-08-19）＝「SHINOBILIAからのおしらせ」ページ（/updates・variant=inbox）だけ本文幅を1280へ。
   ⚠️ `<Notices>` はいま `UpdatesView.astro` からしか呼ばれていない（トップの旧「おしらせ」枠は撤去済み）
   が、将来 home variant が復活しても壊れないよう .notices-inbox にスコープして上書きする
   （既定の .notices-inner は760pxのまま）。 */
.notices-inbox .notices-inner { max-width: 1280px; }
.notices-heading { font-size: var(--fs-sec); font-weight: 800; color: var(--nb-text); margin: 0 0 20px; letter-spacing: 0.02em; }
.notices-inbox .notices-heading { font-size: var(--fs-sec); margin-bottom: 14px; }
.notices-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
/* W-22（2026-08-19）＝縦積み→格子（グリッド）並び。1カード最小320pxで折り返し
   （狭い画面では自然に1列へ戻る＝別途メディアクエリ不要）。
   🔴 2026-08-30 是正＝`minmax(320px, …)` は「1列に戻った<u>あと</u>も 320px を下回れない」ので、
      画面そのものが 320px の端末（iPhone SE 第1世代など）では**左右の余白ぶん（実測32px）
      必ずはみ出す**。⇒ `min(320px, 100%)` にして「画面より広くはならない」を足す。
      ⚠️ 「狭い画面では自然に1列へ戻る」は正しかったが、**1列の幅までは面倒を見ていなかった。**
      検出＝`scripts/qa/qa-mobile-overflow.mjs`（320px で 32件・最大32px）。 */
/* 🔴 I-52（B-13・PM裁定）＝カード（枠+角丸+影）をやめ、DayLadderと同じ「流れる面」の行へ
   （枠/影/角丸なし・仕切り線1本・行間ゼロ・余白は行の内側）。既存の「将来home variant」対策
   （5378行の注記）どおり .notices-inbox にスコープして上書きする。 */
.notices-inbox .notices-list { display: flex; flex-direction: column; gap: 0; }
/* 🔴 WO-090是正＝「上の .mp と同じ言語」という当初意図どおり、.mp 側が既に濃枠+ハード影から
   var(--elev-2)（無枠・柔らか影）へ移行済み（3791行）なのでこちらも揃える。唯一の直接消費者
   .notices-inbox はどのみち直下で枠/影/角丸を全撤去する（5493行）ため実害はないが、
   .util-strip 経由等の将来の直接消費に備えて正す。 */
.notice-item { background: var(--nb-card); border-radius: var(--r-card); padding: 16px 18px; box-shadow: var(--elev-2); }
.notices-inbox .notice-item {
  background: none; border: 0; border-radius: 0; box-shadow: none;
  padding: 16px 4px; border-bottom: 1px solid var(--nb-hairline);
}
.notices-inbox .notice-item:first-child { border-top: 1px solid var(--nb-hairline); }
.notice-date { display: block; font-size: var(--fs-mini); font-weight: 700; color: var(--ink-60); margin-bottom: 4px; }
.notice-title { font-size: var(--fs-body); font-weight: 800; color: var(--nb-text); margin: 0 0 6px; line-height: 1.5; }
.notice-body { font-size: var(--fs-note); line-height: 1.75; color: var(--nb-text); margin: 0; white-space: pre-line; }
.notice-link { display: inline-block; margin-top: 10px; font-size: var(--fs-note); font-weight: 700; color: var(--fire); }
/* 🔴 I-52＝決まり0（オレンジの文字は明るい地でコントラスト不足＝qa-orange-text.mjs実測）。
   墨の文字+橙の下線（既存の a:hover の下線色パターンと同じ考え方）へ。 */
.notices-inbox .notice-link { color: var(--nb-text); text-decoration: underline; text-decoration-color: var(--fire); text-underline-offset: 3px; }
.notice-item { scroll-margin-top: 84px; }   /* /updates#id アンカーで sticky ヘッダーの下に着地させる */

/* トップ「おしらせ」枠の軽量表示（日付＋タイトル1行）。本文・詳細は /updates に集約し、トップは縦に伸ばさない。 */
.notices-list-compact { gap: 0; }
.notice-titem { border-bottom: 1px solid rgba(26, 26, 26, 0.12); }
.notice-titem:last-child { border-bottom: 0; }
.notice-tlink { display: flex; align-items: baseline; gap: 10px; padding: 11px 2px; text-decoration: none; color: var(--nb-text); transition: color 0.14s; }
.notice-tlink:hover, .notice-tlink:focus-visible { color: var(--fire); outline: none; }
.notice-tdate { flex: none; font-size: var(--fs-mini); font-weight: 700; color: var(--ink-60); font-variant-numeric: tabular-nums; }
.notice-ttext { min-width: 0; font-size: var(--fs-note); font-weight: 700; line-height: 1.5; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.notices-more { display: inline-block; margin-top: 12px; font-size: var(--fs-note); font-weight: 800; color: var(--fire); text-decoration: none; }
.notices-more:hover { text-decoration: underline; }

/* /updates 専用ページ（全件フル表示） */
/* W-21（2026-08-19）＝本文幅を760→1280へ（外側の器。中の .notices-inner 側も同時に広げてある）。 */
.news-page { padding: 8px 20px 56px; }
.news-inner { max-width: 1280px; margin: 0 auto; }
@media (max-width: 720px) { .news-page { padding: 4px 16px 40px; } }

.notices-empty { color: var(--ink-60); font-size: var(--fs-note); }
@media (max-width: 720px) { .notices { padding: 36px 16px; } }

/* ===================================================================
   C: NARUTO オレンジ・テーマ（配色案 v2・NARUTO 25th 参照・2026-06-03）
   --fire=#FF7601（メインオレンジ）。ヒーロー/ヘッダー/CTA を #FF7601 地に、
   文字・サンバースト・装飾漢字は「薄黒（濃インク）」＝25th らしいオレンジ×黒。
   本文パートは #FFC677（アンバー）。局所強調は #E9451F。和紙テクスチャは払拭。
   忍マークは元のまま＝オレンジ地丸＋黒縁＋白忍（owner 指定）ゆえ上書きしない。
   .boruto-page（BORUTO/マイページ）は高特異度 cyan 上書きが残る＝別途オレンジ化予定。
   ※承認後に「他ページ hero(panel-hero) / マイページ NARUTO化 / 未読バッジ」へ展開。
   =================================================================== */

/* ---- ヘッダー（NARUTO オレンジ地・濃インク文字・BORUTO 流のレイアウト整列） ----
   #FF7601 は明るく、元の ink 文字でコントラスト十分（AA 余裕）。nav/brand/CTA は元のまま使う。 */
/* BORUTO ヘッダーの座標データをそのまま流用（.boruto-page .header* のレイアウト規則のミラー）。
   違いは色だけ＝NARUTO オレンジ。罫なしでヒーローへシームレス（BORUTO と同様）。 */
.header { background: var(--fire); backdrop-filter: none; border-bottom: none; }
.header-inner { max-width: 1560px; padding-left: 1.6rem; padding-right: 1.6rem; justify-content: flex-start; }
.brand { margin-inline-end: auto; }                     /* brand 始端・nav/言語/CTA は終端にまとまる（rtl で反転する）*/
/* 🔴 スマホで帯が詰まりきる問題（2026-08-09 実測＝中身が置ける幅の 100%・日本語はサイト名が
   2行に折れていた）。原因は上の padding-left/right 1.6rem が、@media(max-width:640px) の
   `.header-inner{padding:10px 16px}`（3782行付近）を**後勝ちで打ち消していた**こと。
   その狭い画面用の意図をここで復活させる。デザインの変更ではなく、死んでいた指定の復旧。
   `.boruto-page .header-inner` は特異度が上なので、そちらも併記しないと効かない。 */
@media (max-width: 640px) {
  .header-inner,
  :is(.boruto-page,[id="mp2-shell"]) .header-inner { padding-left: 16px; padding-right: 16px; }
}
.brand-text .sub { color: var(--nb-text); }                 /* オレンジ地で fire-dark は弱い→濃インク */
.lang-switcher-btn { color: var(--nb-text); border-color: rgba(26,26,26,0.3); }
.lang-switcher-btn:hover { border-color: var(--ink); color: var(--nb-text); background: rgba(255,255,255,0.55); }
/* nav リンク：下線はインク（オレンジ地で見える）。hover で文字色が fire→地色と同化して消える不具合を解消 */
.header .nav a::after { background: var(--ink); }
.header .nav a:hover { color: var(--nb-text); }
/* 投稿する CTA：hover で fire（地色）と同化していたのを、白反転＋持ち上げで目立たせる */
/* 🔴 WO-090是正＝同じ .header-cta:hover の他3箇所（3120・4583・1640行）は既に var(--elev-float) 統一済み。ここだけハードオフセット影が残っていたので揃える。 */
.header .header-cta:hover { background: #fff; color: var(--nb-text); transform: translate(-2px, -2px); box-shadow: var(--elev-float); }
/* 「日本語」「投稿する」の高さを 38px に統一（BORUTO と同じ。padding/line-height のズレを min-height で吸収） */
.header .lang-switcher-btn, .header .header-cta {
  min-height: var(--tap); box-sizing: border-box; line-height: 1;
  transition: transform .12s, box-shadow .12s, background .12s, color .12s;
}

/* 里づくり本部への入口（会員限定・member-only）。ラベル文言に制限語は使わない。
   丸バッジ(.hq-entry-badge)は2026-07-22デザインレビューで撤去した：オレンジ/シアン地の
   ヘッダー上で視認性が低く、既読/件数等の意味も持たない「ノイズ」だったため（member-only 表示
   自体が既に「特別な扉」を伝えている）。 */
.header .nav a.hq-entry { display: inline-flex; align-items: center; gap: 6px; }

/* ---- ホームヒーロー（#FF7601 地・薄黒テキスト＋サンバースト） ----
   元の dark-on-light 設計（タイトル/副文/きっかけ黒帯/集中線の薄黒）をそのまま活かす。巨大漢字も薄黒に。 */
.hero { background: var(--fire); }
.hero-kanji { color: var(--nb-text); opacity: 0.045; }       /* 装飾漢字＝薄黒・さらに薄く明確に背景化（デザイナー指摘の「事故的 z 重なり」回避） */
/* 「忍」とサンバースト収束点を左寄り(35% 45%)＝見出し背後の開きスペースへ揃える。右のイベントカードと被らない */
.hero-kanji { right: auto; left: 35%; top: 45%; margin-left: -21vw; margin-top: -16.8vw; }
/* サンバーストは中心に収束＋やや強める（忍アイコン撤去に伴い中央へ・owner 2026-06-07） */
.speed-lines {
  background: repeating-conic-gradient(from 0deg at 50% 50%, transparent 0deg, transparent 1.1deg, rgba(26,26,26,0.13) 1.1deg, rgba(26,26,26,0.13) 1.9deg);
  -webkit-mask-image: radial-gradient(circle at 50% 50%, transparent 120px, #000 620px);
  mask-image: radial-gradient(circle at 50% 50%, transparent 120px, #000 620px);
}
.hero-title .hl { color: #fff; }                         /* 「きっかけ」＝黒帯×白文字で強調（薄黒タイトル中の反転島） */
.hero-title .underline-swoop { stroke: var(--ink); }     /* オレンジhero上で朱の下線が消えるので黒に（owner 2026-06-04） */
.mission-title .fire { color: var(--nb-text); }              /* 「100人の…日へ」のオレンジ字を黒に（owner） */
/* ボタン：primary=白塗り(ink文字)・secondary「読む」=黒塗り(白文字)。orange-on-orange と透過を解消
   🔴 D-7a（2026-09-08）＝ここは意図して tier①（橙の面）に合わせていない。理由＝この帯自体が
   既に橙の地（`.hero { background: var(--fire) }`）なので、主ボタンを橙で塗ると「橙の上の橙」で
   ボタンが地に溶ける。旧来の色（白塗り/墨地）は決まり0（オレンジを明るい地の文字色にしない）
   には抵触していない＝白文字・墨文字のどちらも「オレンジの誤用」ではない。コマ割り影だけ撤去。
   ⚠️ 統一tier①/②に揃えるべきかはPM判断。 */
.hero-actions .btn-primary { background: var(--nb-card); color: var(--nb-text); }
.hero-actions .btn-outline { background: var(--ink); color: #fff; border-color: var(--ink); }
.hero-actions .btn-outline:hover { background: #000; color: #fff; transform: translate(-1px,-1px); }

/* ---- 本文パート（きっかけ集・体験談）の背景。おしらせ/サイトの裏側の帯（#F0EFEB）と統一して試行（owner 2026-06-03）。
       違和感なければ他ページの本文背景もこの --util-bg に揃える。元のアンバー #FFC677 に戻す場合は var(--amber) ---- */
.stories { background: var(--util-bg); }
/* project100 背景＝おしらせ/「サイトの裏側」帯（#F0EFEB）と同じ薄グレーのフラット地（owner 2026-06-04）。
   その上に【薄いグレー】の網点ハーフトーンを【右上隅だけ】に重ね、隅に近いほど【粒を大きく】する（owner 2026-06-09）。
   2層とも同じ16px格子で粒の中心を揃え、::before=小粒を広めのコーナーゾーン／::after=大粒を最角だけ＝
   隅ほど大粒・外へ行くほど小粒に見える（数ではなくサイズで密度感）。右半分には広げない（radial mask で隅集中）。
   カードは .mission-inner(z-index:2)で上＝邪魔しない。調整ノブ＝alpha(濃さ)／粒半径(1.3px/3px)／コーナー範囲(mask の %)。 */
.mission { background: var(--util-bg); }
.mission::before {
  content: ''; position: absolute; inset: 0;
  pointer-events: none; z-index: 0;
  background-image: radial-gradient(circle, rgba(26,26,26,0.16) 0 1.3px, transparent 2px);
  background-size: 16px 16px;
  -webkit-mask-image: radial-gradient(34% 46% at 100% 0%, #000 0%, #000 22%, transparent 72%);
  mask-image: radial-gradient(34% 46% at 100% 0%, #000 0%, #000 22%, transparent 72%);
}
.mission::after {
  content: ''; position: absolute; inset: 0;
  pointer-events: none; z-index: 0;
  background-image: radial-gradient(circle, rgba(26,26,26,0.16) 0 3px, transparent 3.9px);
  background-size: 16px 16px;
  -webkit-mask-image: radial-gradient(20% 27% at 100% 0%, #000 0%, transparent 78%);
  mask-image: radial-gradient(20% 27% at 100% 0%, #000 0%, transparent 78%);
}

/* 体験談＝右上コーナーの斜めトーン（空）。隅が濃く、中心へフェード。左下〜中央は白のまま。 */
.stories::before {
  content: ''; position: absolute; inset: 0;
  display: block; pointer-events: none; z-index: 0;
  background-image: radial-gradient(circle, rgba(26,26,26,0.16) 0 1.8px, transparent 2.3px);
  background-size: 16px 16px;
  mix-blend-mode: multiply;
  -webkit-mask-image: radial-gradient(72% 72% at 100% 0%, #000 0%, rgba(0,0,0,0.55) 32%, transparent 72%);
  mask-image: radial-gradient(72% 72% at 100% 0%, #000 0%, rgba(0,0,0,0.55) 32%, transparent 72%);
}

/* ============================================================
   ＜実験ルック＞ きっかけ集(.stories) を「マンガの回想シーン（黒枠）」化。owner 2026-06-04。
   戻し方：index.astro の <section class="stories ... manga-recall"> から manga-recall を外すだけ。
   元の .stories（白地＋右上トーン＋傾きコマ）は丸ごと残してあるので完全復元できる。
   ・回想への遷移表現は検討中。カーテン（段々）は「立体に見える」との指摘で撤回し、上辺はフラット黒（::before オフ）。
   ・本文コマ(.mp)は薄グレー(--util-bg)のパネルを黒地に浮かせる＝コマ割り。傾きは全ニュートラル（--hr:0/transform:none）。大小(span)は維持。
   ============================================================ */
.stories.manga-recall { background: #0d0d0f; color: #f4f4f4; }

/* 回想遷移の特別演出は一旦なし（カーテン段々／ベタフラッシュ／ヴィネットいずれも不採用。owner 2026-06-04）。
   黒地のコマ割り＋オレンジ hero との明度差で「別空間に入った」ことは十分伝わる。次案はセピア化を検討。 */
.stories.manga-recall::before { display: none; }
.stories.manga-recall .stories-inner { position: relative; z-index: 3; }

/* 黒地で見出しを可読に（タイトルは白）。🔴 eyebrowは決まり0（2026-09-08）でオレンジ地・墨字へ */
.stories.manga-recall .stories-eyebrow { background: var(--fire); color: var(--ink); transform: none; }
.stories.manga-recall .stories-title,
.stories.manga-recall .stories-title .stroke { color: #fff; }

/* （回想遷移：ベタフラッシュは「黒魔術的（召喚陣風）」との指摘で撤回。ヴィネット＝下記 ::before に変更。owner 2026-06-04） */

/* コマ＝薄グレーのパネルを黒地に。傾きゼロ・角ほぼ直角・遊びの ink シャドウは黒地で溶けるので撤去（home 専用＝.stories.manga-recall）。
   ※ 一覧の黒コマ化／文字数比例サイズ／メーソンリーは撤回し「大物着手前」に復帰（owner 2026-06-04）。 */
.stories.manga-recall .mp {
  transform: none; --hr: 0deg;
  background: var(--util-bg);        /* 真っ白だとチカチカするので project100 背景と全く同じ薄グレー #F0EFEB に */
  border: 2px solid #000; border-radius: var(--r-card);
  box-shadow: none;
}
.stories.manga-recall .mp:hover {
  transform: translate(-3px, -4px);
  box-shadow: 7px 9px 0 rgba(255,255,255,0.10);
  z-index: 5;
}
/* プレースホルダー（投稿誘導カード）は薄グレーから右下へ淡オレンジへ色づく＝未来の枠。45度ハッチ(.hatched)は活かす。 */
.stories.manga-recall .mp.mp-img {
  background: linear-gradient(155deg, var(--util-bg) 0%, #ffe0c2 58%, #ffc89c 100%);
}

/* ============================================================
   🔴🔴 里人の証（/stories・[lang]/stories）＝**漫画の回想シーンの表現**。
   【椿さんご指示・2026-09-13・逐語】「体験談ですが、一覧の各投稿は白地で良いんです。
     白というか薄い灰色というかもともとサイト全体の地の色にしてたやつ。何回も言ってるけど、
     漫画の回想シーンの表現を意識してるんです」
   ⇒ **地は墨・各投稿は明るい紙。**

   ⚠️ 2026-09-08（E-3）に `stories-recall` を class から外したのは**誤りだった。**
      外した理由は「地だけ黒く残って本文が読めない」＝**当時のコマの規則（`.mp`）が
      新しい部品（`.mp-row`）に当たっていなかった**ため。⇒ 直すべきは地ではなくコマの側で、
      ここでコマの側を `.mp-row` に付け替えて地を戻す。

   ⚠️ 旧・2026-06-04 の形（地 #0d0d0f・コマに 2px の黒枠・傾き）は**この節で上書きした**
      ＝枠は椿さんが 2026-09-11 のモックで外しているため復活させない。

   🔴 **新しい色を1つも作らない**＝紙の色は `--nb-canvas`（明るいときの値が
      「もともとサイト全体の地の色」#f4f4f5・正本は :root の1か所）。
   ⚠️ **暗い表示**では `--nb-canvas` は地と同じ #1C1C1E になり、コマが消える。
      ⇒ 暗いときだけ**一段持ち上げた面**（`--nb-surface`）にする
      ＝椿さん決定 2026-08-30「ダークモードの場合はサイト全体を暗くする」と対で成立させる。
   ============================================================ */
/* 面（地）＝墨。⚠️ `body`（0,0,1）より強い `body.stories-recall`（0,1,1）で上書きする。 */
body.stories-recall { background: var(--ink); }
/* 墨の上に直に乗る文字。⚠️ 明るいときの既定は墨の60%＝墨の上では読めない。
   ⭐ 絞り込みのピル・セレクトは明るいときも**白地＋墨字**なので、墨の上でそのまま読める（実測）。 */
body.stories-recall .filter-no-results { color: rgba(244, 244, 245, 0.72); }
/* コマ（1件の投稿）＝明るい紙。⚠️ 枠・影・角丸は付けない（2026-09-11 のモック）。 */
body.stories-recall #story-grid .mp-row {
  background: var(--nb-canvas);
  /* 紙と紙のあいだは墨が見える＝コマの間の溝。⇒ 行の下の細い罫は要らない。 */
  border-bottom: 0;
}
:root[data-theme="dark"] body.stories-recall #story-grid .mp-row { background: var(--nb-surface); }
/* コマの溝。⚠️ `#story-grid` の `row-gap: 0`（流れる面の指定）をこの面だけ上書きする。
   ⭐ 画面幅ごとに書き直さなくてよい＝この選び方（id＋class＋要素）の方が強いので、
      画面幅の指定の中に在る `row-gap: 0` にも勝つ。 */
body.stories-recall #story-grid { row-gap: 12px; }

/* ---- おしらせ＋サイトの裏側＝業務連絡帯（#F0EFEB・2分割）。区切り線(黒罫)なし ---- */
.util-strip { background: var(--util-bg); padding: 36px 32px 56px; }  /* mission と同色グレーで色境界なし→上余白を36に詰め空き帯を縮小（owner 2026-06-09・左右32据置/下56据置） */
/* セクションのアイブロウ「◆ サイト情報」＝PROJECT100 とは別セクションだと示す（色分けはしない・owner 2026-06-09）。他のアイブロウと統一(ink地/白字/0.22em)・中央。 */
.util-eyebrow {
  display: block; width: fit-content; margin: 0 auto 24px;
  font-size: var(--fs-mini); font-weight: 900; letter-spacing: 0.22em;
  color: #fff; background: var(--ink); padding: 6px 14px; border-radius: var(--r-pill);
}
.util-grid { max-width: 1280px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 44px; align-items: stretch; }  /* mission-inner(1280)と左右端を一致 */
/* 2列とも同じ高さに（見出し下のカードを列いっぱいまで伸ばす。テキストが少ない側は余白を広げる）。
   flex の繋ぎは util-col → notices → notices-inner → notices-list → notice-item を全て縦フレックスで通す。 */
.util-col { display: flex; flex-direction: column; min-width: 0; }  /* base で min-width:0＝1fr 1fr が常に等幅＝おしらせ/裏側が同量に連動して縮む（owner 2026-06-09） */
.util-strip .notices,
.util-strip .notices-inner,
.util-strip .notices-list { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.util-strip .notice-item { flex: 1; }
.util-col-backstage .util-card { flex: 1; }
.util-heading { font-size: var(--fs-sec); font-weight: 800; color: var(--nb-text); margin: 0 0 16px; letter-spacing: 0.02em; }
.util-strip .notices { padding: 0; }
.util-strip .notices-heading { font-size: var(--fs-sec); margin-bottom: 16px; }
/* サイトの裏側＝1枚のカード（おしらせカードと同じ言語） */
/* 🔴 WO-090是正＝おしらせカード(.notice-item・5491行)と同じ扱いで無枠+var(--elev-2)へ統一 */
.util-card { background: var(--nb-card); border-radius: var(--r-card); padding: 18px 20px; box-shadow: var(--elev-2); }
.util-strip .backstage-body { font-size: var(--fs-note); line-height: 1.85; color: var(--ink-80); margin: 0 0 10px; }
.util-strip .backstage-body:last-of-type { margin-bottom: 0; }
/* リンクは 2 つ横並び・同じ高さ＆同じ幅（flex:1） */
.util-strip .backstage-links { display: flex; flex-direction: row; gap: 12px; margin-top: 16px; }
.util-strip .backstage-link { flex: 1 1 0; min-width: 0; justify-content: center; min-height: var(--tap); padding: 10px 12px; font-size: var(--fs-note); }  /* min-width:0＝タブレットで裏側の2ボタンが縮み、列が等幅で連動縮小（owner 2026-06-09） */
@media (max-width: 760px) {
  .util-grid { grid-template-columns: 1fr; gap: 28px; }
  .util-strip { padding: 40px 16px; }
  /* モバイルはみ出し対策（owner 2026-06-09）：列を縮められるよう min-width:0／裏側カードのボタン2つは横並びをやめ縦積み（横並びだと最小幅が縮まずカードが画面を超える） */
  .util-col { min-width: 0; }
  .util-strip .backstage-links { flex-direction: column; }
}

/* ---- マイページ（/account）を NARUTO オレンジに再テーマ（BORUTO 水色 → オレンジ） ----
   .boruto-page の --boruto* トークンを上書き＝タブ active 下線/設定トグル/ランク章/アバター地などは
   トークン経由で一括オレンジ化。ヘッダーはハードコード cyan のみ3点上書き（navy 文字は暗色ゆえ
   オレンジ地で可読のため据置）。BORUTO タイムライン本体（.boruto-page 単独）は水色のまま不変。
   🔴🔴【UAT3・2026-08-30】門に `[id="mp2-shell"]` を足した＝**`/members/<住所>/` にも同じ
      オレンジの札を配る**（あちらは body に `naruto-theme` が付かないため、足さないと色札が
      1つも無く、設定パネルが既定値に落ちる）。
   ⚠️ 詳細度は `.boruto-page.naruto-theme`(0,2,0) と `[id="mp2-shell"]`(0,1,0) の最大＝(0,2,0)。
      **元の `.boruto-page.naruto-theme` と同値**なので `/account/` の勝ち負けは変わらない
      （実測＝計算後の値の差 0 件 / 853 要素）。 */
:is(.boruto-page.naruto-theme,[id="mp2-shell"]) {
  --boruto: #FF7601;        /* 主オレンジ（タブ active 下線・トグル ON 等） */
  --boruto-deep: #d95e00;   /* 濃いめ＝白地で可読（ランク章ラベル/トグル/フォーカス輪） */
  --boruto-dark: #b34b00;
  --boruto-ink: #1a1a1a;    /* 暗色アンカー（フッター地等） */
  --boruto-soft: #ffe0c8;   /* 淡色（ランク背景・アバター地のフォールバック） */
  /* 🔴 【WO-021・P-1049・2026-08-14 椿さん決定「揃える」】~~`#fffaf6`~~ → **`var(--scroll)` を参照。**
     ⚠️ ここが**マイページ（`/account/`）とプロフィールの地**。ここだけ温色のままだったので、
        サイトの他の画面と地の色が違っていた（実測＝rgb(255,250,246) 対 rgb(244,244,245)）。 */
  --boruto-bg: var(--scroll);
  --boruto-link: #c84e00;
}
/* 🔴🔴【WO-rv2-A・暗表示の対比是正・2026-09-08・PM裁定・自己是正】この節が上で
   `--boruto-deep` を `#d95e00`（＝`--fire-dark`と同値）へ再定義しているため、上の
   `.btn.ghost{color:var(--boruto)}` 修正（BORUTO本来のテーマ向け＝docs/rv2-contrast-findings.md #2）
   をそのままこの再テーマ文脈に流すと `--boruto` も `#FF7601` に化け、白地（`/account/`
   サイドメニュー）の上にオレンジ文字＝決まり0違反を新設してしまう（実測＝2.677、AA基準4.5未達）。
   docs/rv2-contrast-findings.md #5（「ログアウトする」）はまさにこの文脈の対比不足を指しており、
   直し方は「文字は`--nb-text`へ」＝ここで個別に上書きし、BORUTO本来のテーマ側の `--boruto` 化には
   影響しない。 */
:is(.boruto-page.naruto-theme,[id="mp2-shell"]) .btn.ghost { color: var(--nb-text); }
/* 🔴【WO-rv2-A・暗表示の対比是正・2026-09-08・lane D実測／PM裁定】docs/rv2-contrast-findings.md
   #7＝墨文字(--boruto-ink)が、この節が再定義する`--boruto-link`(#c84e00)の上で3.767しか出ない
   （「考察を投稿」ボタン・.an2-compose-pub）。⚠️ `.an2-compose-pub`はBORUTO本来のテーマでも
   使われ、そちらの`--boruto-link`(#00729c/#00a3d6)は別の値なので、ここでグローバルに
   background を変えると本来のテーマ側の見た目まで動いてしまう。⇒ このnaruto-theme文脈だけに
   限定して上書き＝白方向へ約15%明るく（検証済み＝4.749、AA4.5クリア）。他4箇所
   （active filter chip・inline submit・reader progress fill 等）は同じ暗いinkと組んでおり
   このセレクタでは触っていないので道連れは無い。 */
:is(.boruto-page.naruto-theme,[id="mp2-shell"]) .an2-compose-pub {
  background: color-mix(in srgb, var(--boruto-link) 85%, white);
}
:is(.boruto-page.naruto-theme,[id="mp2-shell"]) .header { background: var(--fire); }
/* 🔴 発注書 A-22（PM裁定・2026-09-08）＝`[id="mp2-shell"]` の代替を外した（Group 1・オプション(a)。
   理由は上の「フッター: 現行 .foot を黒(#021824)へ上書き」の注記と同じ＝`.brand-mark` は
   `Footer.astro` にしか存在せず、`.foot` は `#mp2-shell` の子孫になれない構造）。
   ⚠️ 文字色は `color: var(--ink)`（レーンD・D-5・決まり0＝橙地の上は墨文字）が正＝
   マージ時に私の枝の古い `#fff` を残さないよう確認ずみ（PM指摘）。 */
/* 🔴 WO-090是正＝base `.brand-mark`（3089行）に border が無いため `border-color` は死んだ宣言だった（削除）。box-shadow は他2箇所（4577行・4647行）と同じ var(--elev-1) に統一。 */
/* 🔴 印が絵になった（2026-09-23）＝`color` は効かず、影も外した。色だけ残す。 */
.boruto-page.naruto-theme .brand-mark { background: var(--fire); }
:is(.boruto-page.naruto-theme,[id="mp2-shell"]) .nav.nav-open { background: var(--fire); }

/* ---- 未読おしらせの通知バッジ（ヘッダーのアバターに写輪眼バッジ） ----
   アバターは overflow:hidden で円にクリップされるので、has-unread のときだけ visible にして
   バッジを円の外（右上）へはみ出させ、上に重ねる（z-index）。バッジは赤地＋黒の瞳/三つ巴の SVG。 */
.avatar.has-unread { position: relative; overflow: visible; }
.avatar.has-unread::after {
  content: ''; position: absolute; top: -4px; right: -4px; z-index: 3;
  width: 15px; height: 15px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='11' fill='%23E9451F' stroke='%23ffffff' stroke-width='2'/%3E%3Ccircle cx='12' cy='12' r='3' fill='%231a1a1a'/%3E%3Ccircle cx='12' cy='5.4' r='2' fill='%231a1a1a'/%3E%3Ccircle cx='17.6' cy='15.3' r='2' fill='%231a1a1a'/%3E%3Ccircle cx='6.4' cy='15.3' r='2' fill='%231a1a1a'/%3E%3C/svg%3E") center/contain no-repeat;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,0.3));
}

/* ---- アバタータップ変更（Google スタイル）：マイページ /account ----
   .avatar-editable はプロフィールアバター自体をクリックでファイルピッカー起動。
   overflow:hidden（円クリップ）を visible に上書きしてバッジをはみ出させる。
   🔴【H-21・2026-08-22】以前ここに在った [data-gate-avatar="1"] 限定のカーソル/フォーカス枠/
   カメラバッジは、機能ゲート撤去（オーナー裁定）によりその出し分けの前提（data-gate-avatar
   属性）ごと消えたため削除した。 */
.avatar.avatar-editable { position: relative; overflow: visible; }
/* img は inner に収まるよう object-fit+border-radius を継承（overflow:visible でも img 自体は円のまま） */
.avatar.avatar-editable img { clip-path: circle(50%); }

/* アバターと削除ボタンを縦積みにするラッパー（profile flex 内の1アイテム） */
.avatar-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
}

/* 「頭文字に戻す」削除ボタン: アバター直下の控えめテキストボタン */
.btn-avatar-remove {
  display: block;
  background: none;
  border: none;
  font: inherit;
  font-size: var(--fs-mini);
  color: var(--ink-60, rgba(26,26,26,.6));
  cursor: pointer;
  padding: .15rem 0;
  text-decoration: underline;
  text-underline-offset: 2px;
  margin-top: .2rem;
  align-self: center;
}
.btn-avatar-remove:hover { color: var(--ink, #1a1a1a); }
.btn-avatar-remove:focus-visible { outline: 2px solid var(--fire, #FF7601); outline-offset: 2px; border-radius: var(--r-input); }

/* 退会 <details> の折りたたみ設定。overflow:hidden の解除は .bt-leave-details.set-list 側で供給。 */
:is(.boruto-page,[id="mp2-shell"]) .bt-leave-details { margin-top: 1rem; }
/* summary を set-row 相当のスタイルに統一（目立たせすぎない） */
:is(.boruto-page,[id="mp2-shell"]) .bt-leave-summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .9rem 1.1rem;
  font-size: .88rem;
  font-weight: 700;
  color: var(--ink-60, rgba(26,26,26,.6));
  cursor: pointer;
  border-radius: var(--radius-md);
  user-select: none;
}
:is(.boruto-page,[id="mp2-shell"]) .bt-leave-summary::-webkit-details-marker { display: none; }
:is(.boruto-page,[id="mp2-shell"]) .bt-leave-summary::after {
  content: '›';
  font-size: 1.1rem;
  color: var(--ink-40, rgba(26,26,26,.4));
  transition: transform .15s;
}
:is(.boruto-page,[id="mp2-shell"]) .bt-leave-details[open] > .bt-leave-summary::after { transform: rotate(90deg); }
:is(.boruto-page,[id="mp2-shell"]) .bt-leave-summary:hover { background: rgba(26,26,26,.03); }
:is(.boruto-page,[id="mp2-shell"]) .bt-leave-summary:focus-visible { outline: 2px solid var(--boruto-deep, #0083ac); outline-offset: -2px; }
/* 展開中は summary の下ボーダーを出す */
:is(.boruto-page,[id="mp2-shell"]) .bt-leave-details[open] > .bt-leave-summary { border-bottom: 1px solid var(--ink-20, rgba(26,26,26,.12)); border-radius: var(--radius-md) var(--radius-md) 0 0; }

/* ===== BORUTO 最新話の感想 入口（トップ・PROJECT 100 下／モック 2026-06-04） =====
   背景は最新話ページのヒーローと同じ「シアン地＋砂テクスチャ（網点）」を移植。
   シアン地に映えるよう文字＝濃紺刻印・パネル＝白ハードブロックの BORUTO トーンで統一。
   ログイン状態の出し分けは body[data-auth] + .guest-only/.member-only（上で全ページ対応化済）。 */
.latest-chapter {
  position: relative;
  padding: 96px 32px 120px;
  background: #00a3d6; /* BORUTO シアン地（最新話ヒーローと同色） */
  color: #021824;
  overflow: hidden;
}
/* 砂テクスチャ（BorutoHero .hero-grain と同じ網点）。濃紺の粒子をシアン地に重ねる。 */
.latest-chapter .lc-grain {
  position: absolute; inset: 0; width: 100%; height: 100%;
  z-index: 1; pointer-events: none; opacity: .85;
}
.lc-inner { max-width: 1280px; margin: 0 auto; position: relative; z-index: 2; }
.lc-header { margin: 0 0 40px; text-align: center; }  /* 中央統一（owner 2026-06-09） */
.lc-eyebrow {
  display: inline-block; font-size: var(--fs-mini); font-weight: 900; letter-spacing: 0.22em;
  color: #fff; background: #021824;
  padding: 6px 14px; border-radius: var(--r-pill); margin-bottom: 20px;
}
/* ヒーロー移植: BORUTO -TWO BLUE VORTEX- ロゴ（黒刻印）＋タグライン枠（黒枠/シアン内）。BorutoHero と同形・実値化。 */
/* ロゴ（左）＋「最新話感想コミュニティ」枠（右）を横並び。枠の縦はロゴ高さに揃える（align-items:stretch）。 */
/* 左1カラム化＝見出し(BORUTOロゴ)とサブ(最新話感想コミュニティ)を左に縦積み（owner 2026-06-09・左右分割をやめ視線を一直線に） */
.lc-logo-row { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.lc-logo-group { display: inline-block; margin: 0; max-width: 100%; }
.lc-hero-title { display: inline-flex; flex-direction: column; align-items: stretch; gap: .4rem; margin: 0; }
.lc-main {
  font-size: clamp(3.6rem, 13.5vw, 7.2rem); font-weight: 900; line-height: .82; letter-spacing: 0; color: #000;
  text-align: center; white-space: nowrap;
  text-shadow: 0 -1.5px 0 rgba(0,8,12,.55), 0 2px 0 rgba(224,242,251,.6), 0 3px 4px rgba(0,0,0,.12);
}
/* ロゴのサブ「- TWO BLUE VORTEX -」。BorutoHero .bt-sub と同形（BORUTO幅に両端揃え＝justify）。
   ※ アクションの .lc-sub（下のピルボタン）とは別物。クラス名を分離して枠の誤適用を防ぐ（2026-06-04）。 */
.lc-logo-sub {
  font-size: clamp(1.2rem, 4.4vw, 2.45rem); font-weight: 900; color: #000; letter-spacing: .01em; line-height: 1;
  text-align: justify; text-align-last: justify;
  text-shadow: 0 -1px 0 rgba(0,8,12,.45), 0 1px 0 rgba(224,242,251,.5);
}
/* 「最新話感想コミュニティ」枠（黒枠/シアン内）。ロゴ右〜カード右端まで伸ばす（flex:1）＝高さはロゴに揃う。 */
.lc-tagline { display: flex; flex: none; align-self: center; max-width: 100%; margin: 0; background: #000; padding: 4px; }
.lc-tagline span {
  flex: 1; display: flex; align-items: center; justify-content: center; background: #00a3d6; color: #000;
  padding: .55rem 1.5rem; font-size: clamp(1.4rem, 3.2vw, 2.2rem); font-weight: 800; letter-spacing: .04em; line-height: 1.35;
}
/* 説明文は PROJECT100 の .mission-lead とトンマナ完全統一（1rem / line-height:1.9 / 通常太さ / var(--ink-80)）。
   ※前回シアン地で青系濃紺(#00374e)にしたら背景と色相が近く読みづらかった → mission と同じ無彩色グレー(ink-80)が
   シアン地でもコントラストが効いて読みやすい。max-width は外して1行に収める（owner 2026-06-04）。 */
.lc-lead { font-size: var(--fs-body); line-height: 1.9; color: var(--ink-80); margin: 24px 0 0; }
.lc-note { font-size: var(--fs-note); line-height: 1.7; color: var(--nb-text-muted); margin: 8px 0 0; }

.lc-panel {
  /* 左1カラム＝本文(カード)の下にボタンを縦積み（owner 2026-06-09・本文左／ボタン右端の間延びを解消） */
  /* 🔴 WO-090是正＝枠を撤去（地 var(--nb-surface) が親と色差で既に区別できる）、ハード影は var(--elev-2) へ。
     ⚠️ border-radius はここでは触らない＝別箇所（6132行付近）が既知の理由で 0 へ強制上書き中（別スコープ）。 */
  display: grid; grid-template-columns: 1fr; gap: 22px; align-items: start;
  background: var(--nb-surface);
  border-radius: var(--r-card); padding: 26px 30px; box-shadow: var(--elev-2);
}
.lc-card { display: flex; flex-direction: column; gap: 8px; text-decoration: none; color: inherit; }
.lc-card-main { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; }
.lc-ep { font-size: clamp(1.6rem, 4vw, 2.2rem); font-weight: 900; color: var(--boruto-ink); line-height: 1.1; }
.lc-name { font-size: var(--fs-sub); font-weight: 700; color: var(--boruto-deep); }
.lc-cover { font-size: var(--fs-note); color: #5a7280; }
.lc-badge {
  display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; margin-top: 6px;
  padding: 5px 12px; border-radius: var(--r-pill); font-size: var(--fs-mini); font-weight: 800;
}
.lc-badge svg { width: 15px; height: 15px; }
.lc-badge-locked { background: #e6f5fc; color: var(--boruto-deep); border: 1px solid var(--boruto-deep); }
.lc-badge-open { background: var(--boruto-ink); color: #fff; }

.lc-actions { display: flex; flex-direction: row; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: center; }
/* 🔴 WO-090是正＝border が背景と同色（var(--boruto-ink)）で実質何も描いておらず死んだ宣言だったため撤去。 */
.lc-cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px 22px; background: var(--boruto-ink); color: #fff;
  border-radius: var(--r-pill); font-weight: 900; font-size: var(--fs-body); text-decoration: none;  /* ボタン統一15px（owner 2026-06-09） */
  transition: transform 0.2s, background 0.2s, box-shadow 0.2s;
}
/* 🔴 WO-090是正＝hoverのハード影を var(--elev-float) へ（他の CTA hover と同じ「一段浮く」表現に統一） */
.lc-cta:hover { background: var(--nb-surface); color: var(--boruto-ink); transform: translateY(-1px); box-shadow: var(--elev-float); }
/* 🔴 WO-090是正＝地が transparent の縁取りボタンで、枠自体がボタンの輪郭を成す（撤去すると押せる範囲が見えなくなる）ため
   撤去はせず 2px→1px に細く。ブランド色（var(--boruto-ink)）はボタンの識別に使っているため据え置き（var(--hair) には寄せない）。 */
.lc-sub {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 11px 22px; background: transparent; color: var(--boruto-ink);
  border: 1px solid var(--boruto-ink); border-radius: var(--r-pill);
  font-weight: 800; font-size: var(--fs-body); text-decoration: none;
  transition: background 0.2s, color 0.2s;
}
.lc-sub:hover { background: #021824; color: #fff; }

@media (max-width: 720px) {
  .latest-chapter { padding: 48px 16px 56px; }
  .lc-logo-row { flex-direction: column; align-items: flex-start; gap: 12px; }
  .lc-tagline { flex: none; width: 100%; }
  .lc-panel { grid-template-columns: 1fr; gap: 20px; padding: 20px; }
  .lc-actions { flex-direction: column; align-items: stretch; }
}

/* ---- 里づくり本部への入口（トップ・会員限定）----
   BORUTO コミュニティ入口の直下に置く小さなカード。既存の manga-panel 罫（chap-card と同じ値）を流用し、
   地色は --flash-soft（陽だまり）を薄く敷くだけ＝黄は丸バッジのみに絞る（owner 2026-07-22）。
   padding-bottom を 8px→56px に上げた（隣接する .latest-chapter の 48px 16px 56px と釣り合わせる。
   以前は次セクションとの隙間が8pxしか無く、カードの6pxオフセット影が帯の縁に2pxまで迫って
   「レンダリング崩れ」に見えていた＝デザインレビュー2026-07-22 指摘の是正）。 */
.hq-teaser { padding: 56px 16px 56px; background: var(--flash-soft); }
/* 🔴 WO-090是正＝枠を撤去（地 var(--nb-card) が親の var(--flash-soft) と色差で既に区別できる）、ハード影は var(--elev-2)／hoverは var(--elev-float) へ。 */
.hq-teaser-card {
  display: flex; align-items: center; gap: 12px; justify-content: center;
  max-width: 880px; margin: 0 auto; padding: 1rem 1.3rem;
  background: var(--nb-card); border-radius: var(--r-card);
  box-shadow: var(--elev-2); color: var(--nb-text); text-decoration: none;
  transition: transform .2s cubic-bezier(.5,1.4,.4,1), box-shadow .2s ease;
}
.hq-teaser-card:hover { box-shadow: var(--elev-float); transform: translate(-2px, -2px); }
.hq-teaser-badge {
  width: 10px; height: 10px; border-radius: 50%; flex: none;
  background: var(--flash); box-shadow: 0 0 0 2px var(--ink);
}
.hq-teaser-text { font-weight: 800; font-size: var(--fs-body); }
/* RTL(アラビア語)では → 矢印を反転する。他の要素は論理プロパティで対応済みだが、方向を持つ
   矢印グリフ自体はミラーが要る（a11yレビュー2026-07-22「唯一の未対応の方向性アーティファクト」
   指摘の是正）。 */
[dir="rtl"] .hq-teaser-arrow { transform: scaleX(-1); }
/* リード文。カード直下に1行添えて「ボタンだけで何の扉か分からない」を解消する
   （デザインレビュー2026-07-22 指摘の是正。隣接セクションと同じ ink-80/中央寄せ）。 */
.hq-teaser-lead {
  max-width: 560px; margin: 14px auto 0; text-align: center;
  color: var(--ink-80); font-size: var(--fs-note); line-height: 1.8;
}
@media (max-width: 640px) {
  .hq-teaser { padding: 40px 16px 40px; }
  .hq-teaser-card { padding: 0.85rem 1rem; gap: 10px; }
}

/* ========== 新ヒーロー: 理念一文＋4カード＋今日バナー（2026-06-06 刷新） ========== */
/* 既存 .hero / .speed-lines / .hero-kanji（背景装飾）は流用。.hero-inner は flex に上書き。
   旧ヒーロー（タイピング見出し・大CTA・hero-stack）のCSSは要素が消えたため不活性（無害）。 */
.hero-inner {
  display: flex; flex-direction: column; align-items: stretch;
  text-align: center; gap: 44px;
  max-width: 1280px; grid-template-columns: none;
}
.hero-creed {
  margin: 0 auto; max-width: none; width: 100%;
  /* 代案Cで文が長いため縮小。'||' で行を分け PC/タブレットで2行に収める（owner 2026-06-06）。 */
  font-size: clamp(1.6rem, 3.4vw, 2.6rem); line-height: 1.4;
  /* 地(.hero{--fire})は明暗固定・文字(--nb-text)は明暗反転→暗表示で2.29:1に壊れる→固定の墨に
     （決まり0・2026-09-09。この規則が WO-076 #5 ほか複数箇所へ丸写しされていたため元を修正） */
  font-weight: 900; letter-spacing: -0.02em; color: var(--ink);
  word-break: normal; overflow-wrap: break-word;
}
.hero-creed-line { display: block; }   /* '||' 区切り＝この単位で必ず改行 */
/* seg 既定＝自然折り返し可（英語等 '/' 塊の無い長文・CJK が右へ溢れないよう幅内で reflow・owner 2026-07-04）。
   ※ JA だけは '/'(塊境界)+nowrap で語中改行を制御する設計のため下で nowrap を上書きする。 */
.hero-creed-seg { display: inline-block; white-space: normal; overflow-wrap: break-word; }
/* JA のみ：'/' 塊境界と box の間でのみ折り返す（語中改行防止・owner 2026-06-09 の意図を維持）。 */
html[lang="ja"] .hero-creed-seg { white-space: nowrap; }
.hero-creed-box {
  display: inline-block; white-space: nowrap;
  background: var(--ink); color: var(--fire);
  padding: 0.08em 0.34em; border-radius: 0;
  transform: rotate(-1deg);
  /* box 同士は詰めすぎず、box と後続テキスト（隠れ里です）は離す＝右マージンで両立（owner 2026-06-06） */
  margin-right: 0.2em;
}
.hero-cards {
  list-style: none; margin: 0; padding: 0; width: 100%;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px;
  align-items: stretch; grid-auto-rows: 1fr;  /* 行も均等＝2×2(モバイル)でも4枚すべて同じ高さに（owner 2026-06-09） */
}
.hero-card-item { display: flex; min-width: 0; }
/* 🔴 WO-090是正＝枠を撤去（地 var(--nb-card) が親と色差で区別できる）、角丸0→var(--r-card)、ハード影→var(--elev-2)／hover→var(--elev-float)。 */
.hero-card {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  width: 100%; height: 100%;
  padding: 22px 20px; text-align: center; text-decoration: none;
  color: var(--nb-text); background: var(--nb-card);
  border-radius: var(--r-card);
  box-shadow: var(--elev-2);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.hero-card:hover { transform: translate(-3px, -3px); box-shadow: var(--elev-float); }
.hero-card:focus-visible { outline: 3px solid var(--fire); outline-offset: 3px; }
/* アイコン＝中央上 / 機能名・説明とも中央（owner 2026-06-09・カード内テキスト中央統一） */
.hero-card-icon { width: 38px; height: 38px; color: var(--fire); flex: none; }
.hero-card-icon svg { width: 100%; height: 100%; display: block; }
.hero-card-title { font-size: var(--fs-sub); font-weight: 900; line-height: 1.35; overflow-wrap: anywhere; text-align: center; }
.hero-card-desc { flex: 1; width: 100%; font-size: var(--fs-note); font-weight: 600; line-height: 1.65; color: #444; overflow-wrap: anywhere; text-align: center; }

/* 今日はなんの日? バナー（ヒーロー直下・横スクロール） */
.today-banner { overflow: hidden; background: var(--ink); color: #fff; padding: 0 32px; }
.today-banner[hidden] { display: none; }
.today-banner-link {
  display: flex; align-items: center; gap: 14px;
  max-width: 1280px; margin: 0 auto; padding: 11px 0;
  text-decoration: none; color: #fff;
}
.today-banner-link:focus-visible { outline: 3px solid var(--fire); outline-offset: -3px; }
.today-banner-label {
  flex-shrink: 0; white-space: nowrap;
  font-size: var(--fs-mini); font-weight: 900; letter-spacing: 0.04em;
  /* 地(--fire)は明暗固定・文字(--nb-text)は明暗反転→暗表示で2.29:1に壊れる→固定の墨に（決まり0・2026-09-09） */
  background: var(--fire); color: var(--ink); padding: 5px 14px; border-radius: var(--r-pill);
}
.today-banner-viewport {
  flex: 1; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
.today-banner-track {
  display: inline-block; white-space: nowrap;
  font-size: var(--fs-note); font-weight: 700; will-change: transform;
  animation: bannerScroll 38s linear infinite;
}
.today-banner-link:hover .today-banner-track { animation-play-state: paused; }
.today-banner-arrow { flex-shrink: 0; color: #fff; }
@keyframes bannerScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* RTL（アラビア語）: 矢印を反転 */
[dir="rtl"] .today-banner-arrow { transform: scaleX(-1); }

/* レスポンシブ */
@media (max-width: 960px) {
  .hero-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  /* seg は inline に戻さない（inline だと語中で折れる）。nowrap の塊のまま '/' 境界で折る。 */
}
@media (max-width: 720px) {
  .today-banner { padding: 0 20px; }
}
@media (max-width: 560px) {
  .hero-inner { gap: 28px; }
  /* スマホは4カードを2×2（左上/右上/左下/右下）に均等配置＝ヒーローを短く */
  .hero-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .hero-card { padding: 16px 14px; }
  .today-banner-link { padding: 10px 0; gap: 10px; }
  .today-banner-label { padding: 4px 11px; }
}

/* モーション抑制: バナーの流れを止める */
@media (prefers-reduced-motion: reduce) {
  .today-banner-track { animation: none; }
}

/* ===== セクション左右余白をヒーローと一致（左端・右端を揃える）owner 2026-06-06 =====
   PROJECT100(.mission)/BORUTO最新話(.latest-chapter)/裏側・おしらせ(.util-strip)/今日バナーが
   独自に 14/16px のガターを当てて端がヒーローとズレていた。ヒーロー基準=32px(≧641)/20px(≦640)へ統一。
   ※ source 末尾＝各セクション既存のモバイル指定(≤720/≤760)より後ろなので left/right を確実に上書き。 */
@media (min-width: 641px) {
  .mission, .latest-chapter, .util-strip, .today-banner { padding-left: 32px; padding-right: 32px; }
}
@media (max-width: 640px) {
  .mission, .latest-chapter, .util-strip, .today-banner { padding-left: 20px; padding-right: 20px; }
}

/* ===== 🔴 WO-090是正・2026-09-10・PM裁定＝上の四角統一ルールを撤去 =====
   旧ルール（owner 2026-06-06）は自分の適用条件を「白・黒縁・ハードシャドウの v3 カード言語」の
   カードだけに限定すると明記していた。WO-090 がその13セレクタ全部から濃枠とハードオフセット影を
   撤去した今、この条件はどれについても成立しない＝ルールは自分の前提が消えた後も動き続け、
   「柔らかい影＋直角」という誰も選んでいない組み合わせを強制していた。撤去により各セレクタは
   自分自身の定義の角丸へ戻る：.p100-why-card/.lc-panel=16px・.panel/.rank-frame/.mp/
   .story-detail-inner=14px・.notice-item/.util-card=var(--r-card,14px)・.like-cta/
   .story-cta=12px・.affiliate-link=10px・.story-image img=8px・.today-card-inner=
   var(--radius-md,12px)。オーナーの直近の指示（「四角や線など古い様式がのこったままのページ…
   最新版に更新できるの？」「今回アプリ化のためのデザイン刷新ですよ？」「全部やれ」）とも整合。 */

/* ===== 投稿CTAを .nav 内へ移した副作用の修正（owner 2026-06-06） =====
   `.nav a` の色ルール（詳細度 0,2,1）が `.header-cta`（0,2,0）に勝ち、投稿ボタンの文字が
   背景（ink/濃紺）と同化して不可視だった。`.nav a.header-cta` で詳細度を上げ白文字を保証。 */
.header .nav a.header-cta,
.header .nav a.header-cta:focus,
.header .nav a.header-cta:visited { color: #fff; }
/* hover は背景が白反転(#fff・.header .header-cta:hover)するので文字を ink に。
   白文字のままだと白地に白で投稿ボタンの文字が消える不具合の修正（owner 2026-06-09） */
.header .nav a.header-cta:hover { color: var(--nb-text); }
/* BORUTOテーマの投稿CTAも hover で白背景＝濃紺文字（白白回避） */
:is(.boruto-page,[id="mp2-shell"]) .header .nav a.header-cta:hover { color: #021824; }

/* ===== トップ BORUTO感想カードのボタン高さを揃える（owner 2026-06-06・他ボタンとトンマナ統一） =====
   .lc-cta(13px) と .lc-sub(11px) で縦が太く不揃いだったのを、同じ高さの細めピルに統一。 */
.lc-cta, .lc-sub { padding-top: 10px; padding-bottom: 10px; min-height: var(--tap-primary); box-sizing: border-box; }

/* トップ BORUTO感想カード内の説明文（中央の空白を埋める・owner 2026-06-06） */
.lc-card-desc { font-size: var(--fs-body); line-height: 1.75; color: #2a4452; margin: 10px 0 0; max-width: 36em; }

/* ===== 聖地マップ セクション（トップ・4区分で機能を説明・件数なし・和紙不使用） owner 2026-06-06 =====
   背景は PROJECT100 と同じ薄グレー(--util-bg)。縦の余白は他セクションと同じ 96/120 でリズムを揃える。 */
.spotmap-cta {
  position: relative; padding: 96px 32px 120px;
  /* グレー3連続を脱し NARUTOアンバー(砂色)で「旅/地図」感（owner 2026-06-07）。文字は墨で可読。 */
  /* 色の変わり目に黒線は入れない（owner 2026-06-07）＝border-top 撤去 */
  background: var(--amber); color: var(--nb-text); overflow: hidden;
}
/* のっぺり解消＋「地図(ちず)っぽさ」：アンバー地に細い経緯線グリッド（graticule）を薄く重ねる（owner 2026-06-09・"地図っぽく"）。
   砂目ドット（チーズの穴っぽい）から方眼に変更。細グリッド(30px)＋太グリッド(150px)の2層で地図の主・副グリッド感。
   コンテンツは .sm-inner(z-index:2)で上。調整ノブ＝線濃度(alpha)／間隔(30/150px)／効き方(mask)。 */
.spotmap-cta::before {
  content: ''; position: absolute; inset: 0;
  pointer-events: none; z-index: 0;
  background-image:
    repeating-linear-gradient(0deg, rgba(26,26,26,0.05) 0 1px, transparent 1px 30px),
    repeating-linear-gradient(90deg, rgba(26,26,26,0.05) 0 1px, transparent 1px 30px),
    repeating-linear-gradient(0deg, rgba(26,26,26,0.07) 0 1.5px, transparent 1.5px 150px),
    repeating-linear-gradient(90deg, rgba(26,26,26,0.07) 0 1.5px, transparent 1.5px 150px);
  -webkit-mask-image: radial-gradient(135% 130% at 100% 0%, #000 38%, rgba(0,0,0,0.6) 80%, rgba(0,0,0,0.4) 100%);
  mask-image: radial-gradient(135% 130% at 100% 0%, #000 38%, rgba(0,0,0,0.6) 80%, rgba(0,0,0,0.4) 100%);
}
.sm-inner {
  max-width: 1280px; margin: 0 auto; position: relative; z-index: 2;
  /* 中央統一（owner 2026-06-09）＝2カラム→1カラムに積み直し（見出し→リード→ボタン→2×2カード・すべて中央） */
  display: grid; grid-template-columns: 1fr; gap: 32px; justify-items: center;
}
/* アイブロウは他のトップのアイブロウ（mission等）と同じ＝ink地・白字・角丸4px（owner 2026-06-06「一旦」） */
.sm-eyebrow {
  display: inline-block; font-size: var(--fs-mini); font-weight: 900; letter-spacing: 0.22em;
  color: #fff; background: var(--ink); padding: 6px 14px; border-radius: 4px; margin-bottom: 18px;
}
.sm-title {
  font-size: clamp(1.8rem, 4.2vw, 3rem); font-weight: 900; line-height: 1.25; letter-spacing: -0.01em;
  margin: 0; color: var(--nb-text); word-break: normal; overflow-wrap: anywhere; text-wrap: balance;
}
.sm-lead { font-size: var(--fs-body); line-height: 1.9; margin: 16px auto 0; color: var(--ink-80); }  /* max-width 撤去＝幅が許せば1行（owner 2026-06-09） */
/* 体験談の「全ての体験談を読む」(.all-link)とトンマナを揃える：白地ピル＋朱影（owner 2026-06-07） */
/* 🔴 WO-090是正＝当初コメントが揃えると言っている .all-link 自体が既に枠なし+var(--elev-2)/hover var(--elev-float)へ
   移行済み（3995行）。ここも同じトークンへ揃える（意図どおりのトンマナ統一）。 */
.sm-cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  margin-top: 0; padding: 14px 28px; min-height: var(--tap-primary); box-sizing: border-box;  /* カード下に移動＝間隔は grid gap に任せる（owner 2026-06-09） */
  background: var(--nb-card); color: var(--nb-text); border-radius: var(--r-pill);
  font-weight: 900; font-size: 15px; text-decoration: none;
  box-shadow: var(--elev-2); transition: all 0.2s ease;
}
.sm-cta:hover { transform: translate(-2px, -2px); box-shadow: var(--elev-float); }
.sm-kinds { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
/* 🔴 WO-090是正＝枠を撤去（地 var(--nb-card) が親の var(--amber) と色差で区別できる）。
   「影を軽量化して主CTAを勝たせる」という意図（owner 2026-06-09）はそのまま活かし、
   .sm-cta（var(--elev-2)）より軽い var(--elev-1) を採用＝階層はハード影より明確にトークンで表現できる。 */
.sm-kind {
  display: flex; align-items: flex-start; gap: 12px; min-width: 0;
  background: var(--nb-card); padding: 16px;
  box-shadow: var(--elev-1);
}
.sm-kind-pin { flex: none; width: 30px; height: 30px; color: var(--pin); }
.sm-kind-pin svg { width: 100%; height: 100%; display: block; }
.sm-kind-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.sm-kind-label { font-weight: 900; font-size: var(--fs-body); color: var(--nb-text); }
.sm-kind-note { font-size: 0.8rem; line-height: 1.5; color: #44525a; overflow-wrap: anywhere; }
[dir="rtl"] .sm-cta svg { transform: scaleX(-1); }
@media (max-width: 860px) { .sm-inner { grid-template-columns: 1fr; gap: 28px; } }
@media (max-width: 640px) { .spotmap-cta { padding: 64px 20px 72px; } }
@media (max-width: 560px) {
  /* スマホも4区分を2×2（四象限）に＝コンパクト・地図の凡例感（owner 2026-06-09）。半幅でも収まるよう小型化。 */
  .sm-kinds { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .sm-kind { padding: 11px 10px; gap: 8px; }
  .sm-kind-pin { width: 24px; height: 24px; }
  /* 🔴【椿さん 2026-09-14】里マップは**見た目を一切変えない**（出さないため）。
     ⚠️ この2行は規定に合わないが**わざと残している**＝規定「端末で変わるのは大見出しだけ」の
        例外。⭐ 里マップを出すと決めたときに、この2行から片づける。 */
  .sm-kind-label { font-size: 0.9rem; }
  .sm-kind-note { font-size: 0.72rem; line-height: 1.45; }
}

/* モバイル: BORUTO最新話カードのボタンを全幅化して画面はみ出しを防ぐ（owner 2026-06-06） */
@media (max-width: 720px) {
  .lc-actions { width: 100%; min-width: 0; }
  .lc-cta, .lc-sub { width: 100%; box-sizing: border-box; }
}

/* モバイルはみ出し対策: グリッド/フレックスの子を min-width:0 で縮められるようにし、
   長い説明文やカードが画面外へ出ないようにする（owner 2026-06-06・添付スクショ対応）。 */
/* 幅は上下のセクション(1280)に合わせる＝このセクションだけ凹んで見えないように（owner 2026-06-09）。
   sm-inner(max 1280)いっぱいを使い、見出し/リードは中央、カードは2×2でフル幅。 */
.sm-text, .sm-kinds { min-width: 0; width: 100%; }
.sm-text { text-align: center; }  /* 見出し/リード/ボタンは中央・カード内テキストは従来どおり左 */
.lc-card, .lc-card-main { min-width: 0; }
.lc-lead, .lc-note, .sm-lead, .sm-title { overflow-wrap: anywhere; }

/* ===== キーボードフォーカスの可視化（全ページ共通・WCAG 2.4.7）owner 2026-06-07 ===== */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid var(--fire); outline-offset: 2px;
}
/* 暗色地（BORUTOシアン/ink CTA/フッター/ヘッダーCTA）は白系アウトラインで視認性確保 */
:is(.boruto-page,[id="mp2-shell"]) a:focus-visible, :is(.boruto-page,[id="mp2-shell"]) button:focus-visible,
.foot a:focus-visible, .header .header-cta:focus-visible,
.cta a:focus-visible, .cta button:focus-visible,
.sm-cta:focus-visible, .lc-cta:focus-visible { outline-color: #fff; }

/* ===== タッチ標準 44px（一覧のフィルター/ソート/ランダム）owner 2026-06-07 ===== */
.filter-btn, .btn-random { min-height: var(--tap); box-sizing: border-box; }

/* 前後ナビ: catchphrase（何の話か）を主・投稿者名を従で併記（owner 2026-06-07） */
.prev-next-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; overflow: hidden; }
.next-link .prev-next-text { text-align: right; }
.prev-next-by { font-size: var(--fs-mini); color: var(--ink-60); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* 「ボリュームたっぷり」(読みごたえ＝長文)マーカー＝NARUTOラーメンてんこ盛り(箸つき)。
   名前の行にアイコン単体(アンバー小箱)で置く。意味は title/aria-label でツールチップ補助（owner 2026-06-10）。 */
.badge-volume {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  background: var(--amber); color: var(--nb-text);
  width: 22px; height: 20px; padding: 0; border-radius: var(--r-pill);
}
.badge-volume svg { width: 15px; height: 15px; display: block; }

/* ===== カードのメタ＝名前に続けてコンパクトなチップを inline で（owner 2026-06-07・整列） =====
   暗地(recall一覧)・明地(関連/カレンダー)両方で可読＝クリーム地＋墨字＋細枠の1スタイル。
   display:contents で meta-chips を解消し、name と chip を同じ flex 行に流す＝座標を揃える。 */
.mp .byline { align-items: flex-start; }
.mp .byline .who { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; min-width: 0; }
.mp .byline .who .name { display: inline; font-weight: 900; }
.mp .byline .who .meta-chips { display: contents; }
.mp .byline .who .meta-chip {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: var(--fs-mini); font-weight: 800; letter-spacing: 0.02em; line-height: 1.5;
  padding: 1px 7px; border-radius: var(--r-pill);
  background: var(--scroll); color: var(--nb-text); border: 1px solid var(--ink-20);
  max-width: 11em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* 国旗はタグ箱（クリーム地＋枠）に入れず旗そのものを置く（owner 2026-06-09） */
.mp .byline .who .meta-chip--flag { padding: 0; gap: 0; background: none; border: 0; border-radius: 0; max-width: none; overflow: visible; }
/* 旗の輪郭だけの極細線＝白地国旗(日本/米/仏 等)が薄グレー地に溶けない用。タグ箱ではない */
.mp .byline .who .meta-chip--flag svg { width: 18px; height: auto; border-radius: 2px; display: block; border: 1px solid var(--ink-20); }

/* ===== 投稿フロー3ステップ視覚化（長い説明文の代替・owner 2026-06-07） ===== */
.mf-reassure { margin: 0 0 14px; }
.mf-steps { display: flex; gap: 10px; list-style: none; margin: 4px 0 0; padding: 0; }
/* 🔴 WO-090是正＝地が var(--scroll)＝ページ地そのものと同じ値のため撤去すると面が消える。
   影は無いので、枠は撤去せず 2px ink→1px var(--hair) に細く（中立のヘアラインへ）。 */
.mf-step {
  flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center;
  text-align: center; gap: 8px; padding: 14px 8px; background: var(--scroll); border: 1px solid var(--hair);
}
.mf-step-icon { width: 30px; height: 30px; display: grid; place-items: center; color: var(--fire); }
.mf-step-icon svg { width: 26px; height: 26px; }
.mf-step-text { font-size: var(--fs-note); font-weight: 800; color: var(--nb-text); line-height: 1.4; }
@media (max-width: 520px) { .mf-steps { gap: 6px; } .mf-step { padding: 12px 5px; } }

/* ===== 投稿=会員必須: ゲスト向けログイン必須カード（Googleフォーム廃止・owner 2026-06-07） ===== */
.member-required { margin: 1.5rem 0 2rem; }
/* 🔴 WO-090是正＝枠を撤去（地 var(--nb-card) が親と色差で区別できる）、ハード影は var(--elev-2) へ。 */
.mr-card { background: var(--nb-card); box-shadow: var(--elev-2); padding: 2rem 1.8rem; text-align: center; max-width: 560px; margin: 0 auto; }
/* 🔴【設計シート監査是正・2026-09-08・PM裁定】.mr-titleはh2（カード内の章見出し）。
   fluidなclamp()は6段のどれでもないため撤去し、役割に合う--fs-sec(24px/700)へ揃える
   （現在値に近い段ではなく、見出しレベルに合う段を選ぶ）。 */
.mr-title { font-size: var(--fs-sec, 24px); font-weight: 900; color: var(--nb-text); margin: 0 0 0.8rem; line-height: 1.5; }
/* 🔴【WO-132】真ん中の案内の段落＝箱を文字の幅に縮めて真ん中へ（中の文字は左から）。 */
.mr-lead { font-size: var(--fs-body); line-height: 1.85; color: var(--ink-80); margin: 0 auto 1.4rem; width: fit-content; max-width: 100%; }
.mr-actions { margin: 0 0 1rem; }
.mr-note { font-size: var(--fs-note); color: var(--ink-60); margin: 0 auto; width: fit-content; max-width: 100%; }
/* 🔴 決まり0是正（同ファイル389〜399行と同日）＝明るい地の上に橙の文字を置かない。
   contact.astroの.cf-note aと同じ形＝墨字＋橙の下線。 */
.mr-note a { color: var(--nb-text); font-weight: 800; text-decoration: underline; text-decoration-color: var(--fire); text-underline-offset: 3px; }

/* ===== 会員公開プロフィールページ /members/<slug>/ ===== */

/* ロード中スケルトン */
.mp-loading { padding: 2rem 0; }
.mp-skel { background: var(--scroll-dark); border-radius: 3px; animation: mp-pulse 1.4s ease-in-out infinite; }
.mp-skel-avatar { width: 64px; height: 64px; border-radius: 50%; margin-bottom: 1rem; }
.mp-skel-name { width: 160px; height: 1.4em; margin-bottom: 0.6rem; }
.mp-skel-bio { width: 260px; height: 1em; }
@keyframes mp-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }

/* 見つからない */
.mp-notfound { text-align: center; padding: 3rem 1rem; }
.mp-notfound-msg { font-size: var(--fs-body); color: var(--ink-60); margin: 0 0 1.5rem; }

/* プロフィールヘッダー */
/* プロフィールヘッダー＝アイコン → ニックネーム → X ID（横並び）。ヒーロー無し（owner 2026-06-18）。 */
/* 🔴 WO-090是正＝単なる区切り罫のため、他の区切り罫（.village-title 等）と同じ 1px var(--hair) に統一。 */
.mp-header {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  padding: 0.5rem 0 1.5rem;
  border-bottom: 1px solid var(--hair);
  margin-bottom: 1.5rem;
}
.mp-avatar-wrap .avatar.lg { width: 72px; height: 72px; font-size: 1.8rem; flex-shrink: 0; }
.mp-header-info { min-width: 0; max-width: 640px; }
.mp-name-row { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.2rem 0.7rem; }
.mp-displayname { font-size: clamp(1.3rem, 3.5vw, 1.7rem); font-weight: 900; color: var(--nb-text); margin: 0; line-height: 1.25; }
.mp-xhandle { display: inline-flex; align-items: center; gap: 0.25em; font-size: var(--fs-note); color: var(--ink-60); text-decoration: none; }
.mp-xhandle:hover { color: var(--nb-text); text-decoration: underline; }
.mp-xhandle svg { flex-shrink: 0; opacity: 0.7; }
.mp-bio { font-size: var(--fs-body); line-height: 1.75; color: var(--ink-80); margin: 0.5rem 0 0; white-space: pre-wrap; }

/* セクション共通 */
.mp-section { margin-bottom: 2.5rem; }
/* 🔴 WO-090是正＝下線色が見出し文字(var(--fire))と同じ橙系（var(--fire-soft)）＝中立の区切り罫ではなくブランド差し色の下線と判断。
   色は残し、太さだけ 2px→1px に。 */
.mp-section-head {
  font-size: var(--fs-sub);
  font-weight: 900;
  color: var(--fire);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 0 0 1rem;
  padding-bottom: 0.35rem;
  border-bottom: 1px solid var(--fire-soft);
}
.mp-empty { text-align: center; color: var(--ink-60); font-size: var(--fs-note); padding: 1rem 0 2rem; margin: 0; }

/* 考察カード */
/* 🔴 WO-090是正＝枠を撤去（地 var(--nb-card) が親と色差で区別できる）、ハード影は var(--elev-2) へ。border-radius は 2px（0ではない）のためスコープ外・据え置き。 */
.mp-analysis-card {
  background: var(--nb-card);
  box-shadow: var(--elev-2);
  padding: 1rem 1.2rem 0.9rem;
  margin-bottom: 1rem;
  border-radius: var(--r-card);
}
.mp-analysis-chaplink {
  display: inline-block;
  font-size: var(--fs-mini);
  font-weight: 700;
  color: var(--fire);
  text-decoration: none;
  background: var(--fire-soft);
  padding: 0.15em 0.6em;
  border-radius: var(--r-pill);
  margin-bottom: 0.5rem;
}
.mp-analysis-chaplink:hover { background: var(--amber); }
.mp-analysis-title { font-size: var(--fs-sub); font-weight: 900; color: var(--nb-text); margin: 0 0 0.5rem; line-height: 1.45; }
.mp-analysis-body {
  font-size: var(--fs-note);
  line-height: 1.75;
  color: var(--ink-80);
  white-space: pre-wrap;
  word-break: break-word;
}
.mp-analysis-body.mp-clamp {
  display: -webkit-box;
  -webkit-line-clamp: 6;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.mp-more-btn {
  display: block;
  font-size: var(--fs-note);
  font-weight: 700;
  color: var(--fire);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.3rem 0 0;
  text-decoration: underline;
}
.mp-more-btn:hover { color: var(--fire-dark); }
.mp-analysis-time { display: block; font-size: var(--fs-mini); color: var(--ink-40); margin-top: 0.6rem; }

/* 体験談グリッド */
.mp-story-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1rem;
}
/* 🔴 WO-090是正＝枠を撤去。地は var(--scroll)＝ページ地と同値だが、box-shadow 自体（var(--elev-2)/hover var(--elev-float)）が
   同色背景でも面を分離する役割を担うため、枠が無くても読める。 */
.mp-story-card {
  background: var(--scroll);
  border-radius: var(--r-card);
  box-shadow: var(--elev-2);
  transition: transform 0.12s, box-shadow 0.12s;
}
.mp-story-card:hover { transform: translate(-3px, -4px); box-shadow: var(--elev-float); }
.mp-story-link {
  display: block;
  padding: 1rem;
  text-decoration: none;
  color: inherit;
}
.mp-story-img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; margin-bottom: 0.6rem; }
.mp-story-catchphrase { font-size: var(--fs-sub); font-weight: 800; color: var(--nb-text); margin: 0 0 0.4rem; line-height: 1.45; }
.mp-story-name { display: block; font-size: var(--fs-note); font-weight: 700; color: var(--ink-60); margin-bottom: 0.2rem; }
.mp-story-meta { display: block; font-size: var(--fs-mini); color: var(--ink-40); }

@media (max-width: 600px) {
  .mp-header { flex-direction: column; gap: 0.75rem; }
  .mp-story-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 400px) {
  .mp-story-grid { grid-template-columns: 1fr; }
}

/* ===== /news ニュースハブ（ADR-0040 N3） ===== */
.news-hub {
  /* 本文パートの背景＝トップの mission/.stories と同じ薄グレー --util-bg に揃える
     （4853行の申し送り「違和感なければ他ページの本文背景もこの --util-bg に揃える」に追従。
     素の --scroll 地のままだと旧サイトの温色クリームが残って見える・owner 2026-07-16）。 */
  background: var(--util-bg);
}
.news-hub-inner {
  /* 本文エリア幅をトップ基準 --max-width(1280) に統一＝ヒーロー(panel-hero-inner)と左辺が揃う
     （guidelines/about/privacy と同じ裁定。旧760pxは他ページと幅が揃わない・owner 2026-07-16）。
     上余白 48px＝他ページのセクション呼吸（stories 64px / mission 44px）に合わせる
     （旧8pxはヒーローの朱境界線とチップが近すぎた・owner 2026-07-16）。 */
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 48px var(--space-md) 56px;
}
@media (max-width: 720px) { .news-hub-inner { padding: 28px 16px 40px; } }

.news-hub-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 24px;
}

.news-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--fs-mini, 12px);
  letter-spacing: .06em;
  font-weight: 700;
  line-height: 1;
  border-radius: var(--r-pill);
  padding: 0.4em 0.9em;
  white-space: nowrap;
}

.news-chip-filter {
  background: var(--nb-card);
  color: var(--nb-text);
  border: 2px solid var(--ink);
  cursor: pointer;
  transition: background 0.12s, color 0.12s, transform 0.12s;
  /* 🔴 【PM指摘・2026-09-08・D-7追加】押す的44px未満（/news/ で12件・qa-tap-target.mjs実測）。
     見た目（塗り・トグル影）は 2026-07-16 デザイナー審査ずみの正典パターンなので変えない＝
     高さだけを確保する。 */
  min-height: var(--tap);
}
/* hover/active に v3 のハードオフセット影＝正典のトグルチップ（.filter-btn/.country-chip）と同挙動
   （デザイナー審査 2026-07-16 #3）。 */
.news-chip-filter:hover { transform: translate(-1px, -1px); box-shadow: none; }
/* 🔴 決まり0（2026-09-08）＝オレンジの面の上は墨（暗い表示の復元は :root[data-theme="dark"] 側に既に在る） */
.news-chip-filter[aria-pressed="true"] {
  background: var(--fire);
  color: var(--nb-text);
  border-color: var(--fire);
  box-shadow: none;
}
.news-chip-filter:focus-visible {
  outline: 2px solid var(--fire);
  outline-offset: 2px;
}

.news-chip-cat {
  /* 受動メタタグ＝story-card の .meta-chip と同トーン・同サイズ感（--scroll 地＋ink-20 枠・
     小型・角4px）。上部の操作用フィルタチップ（pill・大きめ）と視覚的な役割差を付ける
     （デザイナー審査 2026-07-16 #1/#2）。 */
  background: var(--scroll);
  color: var(--nb-text);
  border: 1px solid var(--ink-20);
  font-weight: 800;
  font-size: var(--fs-mini, 12px);
  letter-spacing: .06em;
  padding: 2px 8px;
  border-radius: var(--r-pill);
}
/* 地域＝裸の国旗SVGのみ（チップ枠・国名テキストなし＝StoryCard の .meta-chip--flag と
   同方式。テキストと線を増やさない・owner 2026-07-16）。 */
.news-item-flag { display: inline-flex; align-items: center; }
.news-item-flag svg {
  width: 18px;
  height: auto;
  display: block;
  border-radius: 2px;
  border: 1px solid var(--ink-20);
}

.news-hub-month {
  /* 黒箱見出し＝サイトの節見出しモチーフ（.gl-section h2・BORUTO「話数を選ぶ」と同系）
     に揃える（デザイナー審査 2026-07-16 #4。下線だけの独自様式をやめる）。 */
  display: inline-block;
  font-size: var(--fs-sec);
  font-weight: 900;
  color: #fff;
  background: var(--ink);
  padding: 0.34rem 0.9rem;
  border-radius: var(--r-pill);
  margin: 32px 0 14px;
}
.news-hub-list-wrap > .news-hub-month:first-child { margin-top: 0; }

/* 🔴 I-45（B-14・PM裁定）＝カード(枠+角丸+黒影)の2列グリッドをやめ、/updates/ と同じ
   「流れる面」の1列の行へ（枠/影/角丸なし・仕切り線1本・行間ゼロ・余白は行の内側）。 */
.news-hub-list {
  list-style: none;
  margin: 0 0 8px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.news-item {
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 16px 4px;
  border-bottom: 1px solid var(--nb-hairline);
}
.news-hub-list > .news-item:first-child { border-top: 1px solid var(--nb-hairline); }
/* 🔴【#27・WO-081・2026-08-29】投稿系（ニュース項目）はふわっと表示する。
   .p100-why-card（トップ・#5601付近）と同じ規約＝prefers-reduced-motion:no-preference の
   中にだけ置く（軽減設定の会員には効かせない）。焼いた絵やfilterではなくopacity+transformの
   単純アニメ（横断ルール＝web motion cost）。hidden属性の付け外し（もっと見る・絞り込み）
   でも再生される＝CSSアニメのみで対応（JS側は変更していない）。 */
@media (prefers-reduced-motion: no-preference) {
  .news-item {
    opacity: 0;
    transform: translateY(8px);
    animation: news-item-fade-in 0.4s ease forwards;
  }
}
@keyframes news-item-fade-in {
  to { opacity: 1; transform: translateY(0); }
}

.news-item-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
}
.news-item-meta time {
  font-size: var(--fs-note, 14px);
  font-weight: 700;
  color: var(--ink-60);
  margin-right: 2px;
}

.news-item-title {
  font-size: var(--fs-sub);
  font-weight: 900;
  color: var(--nb-text);
  line-height: 1.5;
  margin: 0 0 6px;
  word-break: normal;
  overflow-wrap: break-word;
}

.news-item-blurb {
  font-size: var(--fs-body);
  line-height: 1.8;
  color: var(--ink-80);
  margin: 0 0 10px;
  word-break: normal;
  overflow-wrap: break-word;
}

/* lead+bullet フォーマット（owner-chosen format・2026-07）: blurb は「1行目=リード文＋
   <p class="news-item-lead">」「2行目以降=絵文字付き箇条書き＋<ul class="news-item-blurb-list">」
   に分割して描画する（NewsHubView.astro）。論理プロパティ（padding-inline-start /
   margin-inline-start）を使うことで、Arabic の dir="rtl"（BaseLayout.astro が <html> に付与）で
   [dir="rtl"] の追加ルール無しに自動で反転する。絵文字自体が視覚的な箇条書きマーカーのため
   list-style は消す（ネイティブの ::marker と二重にならないように）。 */
.news-item-lead {
  font-size: var(--fs-body);
  font-weight: 700;
  line-height: 1.8;
  color: var(--ink-80);
  margin: 0 0 6px;
  word-break: normal;
  overflow-wrap: break-word;
}
.news-item-blurb-list {
  list-style: none;
  margin: 0 0 10px;
  padding-inline-start: 0;
}
.news-item-blurb-list li {
  font-size: var(--fs-body);
  line-height: 1.7;
  color: var(--ink-80);
  margin-inline-start: 0.2em;
  margin-block-end: 4px;
  word-break: normal;
  overflow-wrap: break-word;
}
.news-item-blurb-list li:last-child {
  margin-block-end: 0;
}

.news-item-source {
  font-size: var(--fs-note, 14px);
  color: var(--ink-60);
  margin: 0;
  word-break: normal;
}
.news-item-source-label { font-weight: 700; margin-right: 2px; }
/* 🔴 I-45＝決まり0（明るい地の橙文字はコントラスト不足・qa-orange-text.mjs実測＝全表示言語で40件）。
   墨の文字+橙の下線へ。 */
.news-item-source a {
  color: var(--nb-text);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: var(--fire);
  text-underline-offset: 2px;
}
.news-item-source a:hover { text-decoration-color: var(--fire-dark); }
.news-item-srcdate { color: var(--ink-40); margin-left: 4px; }

.news-hub-empty {
  border: 2px dashed var(--ink-40);
  border-radius: var(--r-card);
  padding: 28px 20px;
  text-align: center;
  color: var(--ink-60);
  margin: 24px 0;
}
.news-hub-empty p { margin: 0 auto 12px; line-height: 1.8; width: fit-content; max-width: 100%; } /* 🔴【WO-132】真ん中の案内＝箱を文字の幅に縮めて真ん中へ */
.news-hub-empty-link {
  color: var(--fire-dark);
  font-weight: 700;
  text-decoration: underline;
}

/* もっと見る（owner 2026-07-16・24件ずつ）。.btn-ghost 系譜＝白地＋墨縁＋fireオフセット影。 */
/* 🔴 WO-090是正＝枠を撤去（地 var(--nb-card) は親 .news-hub の var(--util-bg) と色差で区別できる）。box-shadow は元々 none（hoverも none）のためそのまま。 */
.news-hub-more-wrap { text-align: center; margin: 28px 0 8px; }
.news-hub-more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tap-primary);
  box-sizing: border-box;
  background: var(--nb-card);
  color: var(--nb-text);
  border-radius: var(--r-pill);
  box-shadow: none;
  padding: 10px 32px;
  font-size: var(--fs-body);
  font-weight: 900;
  cursor: pointer;
  transition: transform 0.12s, box-shadow 0.12s;
}
.news-hub-more:hover { transform: translate(-2px, -2px); box-shadow: none; }
.news-hub-more:focus-visible { outline: 2px solid var(--fire); outline-offset: 2px; }

.news-hub-disclaimer {
  margin: 24px 0 4px;
  font-size: var(--fs-note, 14px);
  line-height: 1.8;
  color: var(--ink-40);
}
.news-hub-report {
  margin: 4px 0 0;
  font-size: var(--fs-note, 14px);
}
.news-hub-report a {
  color: var(--ink-60);
  text-decoration: underline;
}

[dir="rtl"] .news-item-source-label { margin-right: 0; margin-left: 2px; }
[dir="rtl"] .news-item-srcdate { margin-left: 0; margin-right: 4px; }

@media (max-width: 480px) {
  .news-chip { font-size: var(--fs-mini, 12px); letter-spacing: .06em; padding: 0.35em 0.75em; }
}

/* 言語オーバーレイ（初回の非会員だけ・BaseLayout.astro）。「軽さが要点」＝重い全画面の壁にしない
   （椿さん 2026-08-17）。スマホは下から出るシート、PC は中央の軽いカード。 */
.nb-lang-scrim {
  position: fixed; inset: 0; z-index: 10500;
  display: flex; align-items: flex-end; justify-content: center;
  background: rgba(26, 26, 26, 0.42);
  opacity: 0; pointer-events: none; transition: opacity 0.2s;
}
.nb-lang-scrim.on { opacity: 1; pointer-events: auto; }
@media (min-width: 560px) { .nb-lang-scrim { align-items: center; } }

.nb-lang-sheet {
  background: var(--nb-card); width: 100%; max-width: 420px;
  border-radius: var(--r-sheet) var(--r-sheet) 0 0;
  padding: 1.3rem 1.2rem calc(1.3rem + env(safe-area-inset-bottom, 0px));
  transform: translateY(12px); transition: transform 0.22s;
  box-shadow: var(--shadow-lg);
}
.nb-lang-scrim.on .nb-lang-sheet { transform: translateY(0) scale(1); }
@media (min-width: 560px) {
  .nb-lang-sheet { border-radius: var(--r-sheet); transform: translateY(0) scale(0.97); padding-bottom: 1.3rem; }
}

.nb-lang-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.8rem; margin-bottom: 0.9rem; }
.nb-lang-head h2 { margin: 0; font-size: var(--fs-sec); font-weight: 900; line-height: 1.5; }
.nb-lang-close {
  flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%; border: none;
  background: var(--scroll); color: var(--ink-60); cursor: pointer;
  display: grid; place-items: center; padding: 0;
}
.nb-lang-close:hover { background: var(--amber); color: var(--nb-text); }
.nb-lang-close svg { width: 15px; height: 15px; stroke: currentColor; stroke-width: 2.4; fill: none; stroke-linecap: round; }

.nb-lang-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; }
.nb-lang-opt {
  position: relative; border: 1.5px solid rgba(26, 26, 26, 0.14); background: var(--scroll);
  border-radius: var(--r-input); padding: 0.65rem 0.4rem; text-align: center;
  font: inherit; font-size: var(--fs-note); font-weight: 700; color: var(--nb-text); cursor: pointer;
  min-height: var(--tap); display: flex; align-items: center; justify-content: center; box-sizing: border-box;
  transition: border-color 0.15s, background 0.15s;
}
.nb-lang-opt:hover { background: var(--amber); }
.nb-lang-opt:focus-visible { outline: 2px solid var(--fire); outline-offset: 2px; }
/* 「たぶんこれ」は無印（言葉を使わない＝翻訳不要）。濃い枠＋塗り＋右上のチェック印だけで示す。 */
/* 🔴🔴【2026-09-10・c0のコントラスト監査で発見・是正・要オーナー実機確認】
   rgb(217,94,0)（`--fire-dark`）on #fff3e6＝比 3.46（基準4.5に届かない・172か所×58ページ）。
   `--fire-dark` はここ以外に18か所（影・補助）で共有されている固定トークン＝そちらへ波及
   させないため、この文字色だけ直書きに切り離す（`--fire-dark` 自体は変えない）。
   色相は変えず明度だけ落とす（同じ HSL 探索・地は据え置き）。比 4.83（実測・余裕あり）。
   旧 #d95e00（`--fire-dark`） → 新 #b34d00（オーナーに実機で見てもらってから確定）。 */
.nb-lang-opt.nb-lang-guess {
  border-color: var(--fire); border-width: 2.5px; background: #fff3e6; color: #b34d00;
  box-shadow: 0 2px 8px -2px rgba(255, 118, 1, 0.35);
}
.nb-lang-chk {
  position: absolute; top: -7px; right: -7px; width: 18px; height: 18px; border-radius: 50%;
  /* オレンジ地に白いチェック印はコントラスト約2.68:1で非文字の3.0未達→墨色に（決まり0・2026-09-09） */
  background: var(--fire); color: var(--ink); display: grid; place-items: center; box-shadow: 0 0 0 2px #fff;
}
.nb-lang-chk svg { width: 11px; height: 11px; stroke: var(--ink); stroke-width: 3; fill: none; stroke-linecap: round; stroke-linejoin: round; }
[dir="rtl"] .nb-lang-chk { right: auto; left: -7px; }

.nb-lang-foot { margin: 0.9rem 0 0; font-size: var(--fs-mini); color: var(--ink-40); text-align: center; }

@media (prefers-reduced-motion: reduce) {
  .nb-lang-scrim, .nb-lang-sheet { transition: none; }
}

/* ---- プロフィール画面（24テーマ）のコントラスト是正（N-01・N-03・2026-08-22） ----
   🔴 色の正本トークン自体は src/components/MemberProfileShell.astro（別窓が編集中のため触れない）。
   両方とも実機コントラスト測定（Puppeteer・getComputedStyle）で24テーマ全部を確認ずみ。 */

/* N-01: 自己紹介本文（.mp2-rt p）が --mp2-tx2（62%アルファの薄字）で、実測4.5:1未満が24テーマ中17（3.80〜4.63:1）。
   同じ画面が既に持つ「不透明な主文字色」トークン --mp2-tx に差し替え。
   ⚠️ 詳細度を MemberProfileShell 側の `#mp2-shell .mp2-rt p`（ID+class+class+要素）と同点にしないため
      `html body` を足して確実に勝たせる（読み込み順に依存しない）。
   実測（修正後）＝13.05〜17.40:1・24テーマ全部で合格。 */
html body #mp2-shell .mp2-rt p { color: var(--mp2-tx); }

/* N-03: 「トップへ戻る」（#mp2-notfound .btn）は `.boruto-page .btn`（global.css内・テーマ非依存の
   固定オレンジ #d95e00 塗り＋白文字）に当たっており、実測3.78:1で24テーマ全部が不合格だった。
   隣接する塗りボタンの既存パターン（--mp2-acd＋白文字）に揃える。
   実測（修正後）＝4.61〜6.13:1・24テーマ全部で合格。 */
#mp2-shell .mp2-notfound .btn {
  background: var(--mp2-acd);
  border-color: var(--mp2-acd);
  color: #fff;
}

/* 🔴 BORUTO の帯（シアン）の上の文字は、暗いときも BORUTO の濃紺に戻す。
   ■ なぜ要るか＝上の「オレンジの塗りの上は墨に戻す」節が `.header` / `.sm-header` を名指しで
     `--nb-text: #1a1a1a`（NARUTO の墨）に置き直すため、**BORUTO のページでも NARUTO の墨になる**
     （実測 2026-09-06＝帯の文字が rgb(2,24,36) → rgb(26,26,26) に変わっていた）。
   ⚠️ **地（背景）は触らない。**帯は明暗どちらでも `rgba(0,163,214,.96)` のまま
     ＝**明暗で1ドットも変えない**という決まりを守るには、地を片方だけ不透明にしてはいけない。 */
/* 🔴【WO-092・第4便・P-1252】シアンの帯はヘッダーと同じ判定（`body.work-tbv`）。フォーラムの一覧はオレンジの帯＝墨のまま。 */
:root[data-theme="dark"] body.work-tbv .sm-header,
:root[data-theme="dark"] body.work-tbv .header {
  --nb-text: #021824;
}

/* 🔴 BORUTO のリンク色（`--boruto-link` #00729c）は、暗い地の上で対比 3.15 まで落ちる（基準 4.5・実測）。
   ⇒ 暗いときはブランドのシアン（#00a3d6）へ。⚠️ 実測＝暗い地 #1C1C1E で 5.7 / 暗い面 #26262A で 5.1。
   ⚠️ 札は `.boruto-page{}` の中で定義されているので、`:root[data-theme="dark"]` だけでは勝てない
      （詳細度）。⇒ **同じ入れ物を名指しして上書きする。**
   ⚠️ `.naruto-theme` / `.hub-theme` は別の色を持つので巻き込まない。 */
:root[data-theme="dark"] body.boruto-page:not(.naruto-theme):not(.hub-theme) {
  --boruto-link: #00a3d6;
}


/* ══════════════════════════════════════════════════════════════════════════
   作品感想＆考察の帯（`.an2-*`）＝**話数の一覧と考察の一覧の2ページで使う。**
   🔴 **ここが正本。**部品の中に写しを置かない
      （2026-09-07 に一度、同じ指定が2ファイルへ写された＝片方だけ直す事故のもと）。
   ⚠️ **一覧ビューでは `<style>` の外に貼られていた**＝CSS の文字がページに出る形だった。
      ⭐ **部品に `<style>` が在るかを、書く前に確かめる。**
   ⚠️ 文字色は `--nb-band-ink`（明暗どちらでも暗いままの帯の上の文字）。直に書かない。
   ══════════════════════════════════════════════════════════════════════════ */
  /* 🔴 明暗どちらでも暗いままの帯＝文字は専用の札で取る（`--nb-band-ink`）。
     ⚠️ `#fff` を直に書かない。⚠️ 予備の色（`var(--x, #123456)`）も書かない＝
        値を2か所に持つと、次に色を変える人が片方を直し忘れる。札は必ず在る（global.css）。 */
  /* 🔴🔴【設計窓・design/analyses-wireframe 86b56a5e §13-2・PM裁定2026-09-14で採用】
     ヘッダーがオレンジへ戻ったため、地の暗紺グラデーションは不要（境目の喧嘩が解消済み・§13-4）。
     8%は`--boruto-link`（sup/タブが使う既存の強調色）との対比を保てる上限（9%で4.50・8%で4.55）。 */
  /* 🔴🔴【椿さんご指示・2026-09-15】逐語＝「ヒーローや見出し同士の間隔やスペースなどが
     規定外に詰まってますので、規定通りにしてください。」
     ⇒ この面の余白は**すべて間隔の札（`--space-*`＝8/16/32/64/96px）から選ぶ**。
     ⚠️ ~~26px / 14px / 2px~~ は札に無い数字だった＝**規定外**。とくに**下の余白が 0** で、
        見出しの下端が帯の縁に触れていた（＝椿さんの「詰まってる」）。
     ⚠️ 左右の 40px だけは札に無いが**規定内**＝アーティファクトの PC の外余白
        （`docs/handoff/primitives.css` の `.top-nav__inner { padding: 0 40px }`）。写しであって発明ではない。 */
  .an2-hero-wrap {
    background: color-mix(in srgb, var(--boruto) 8%, var(--scroll));
    color: var(--nb-band-ink);
    padding: var(--space-md) 40px var(--space-md);
  }
  /* 🔴【E-3・2026-09-08発注・感想タブレット(768)】767pxの壁をそのまま768へ持ち越すと、
     タブレット(768)がいきなりPC(1440)向けの数値（40px余白・横並びヘッダー・シェブロン無し・
     3行クランプ無し）に切り替わる＝タブレットなのにPC扱いという隙間ができていた。
     写す手本＝records/2026-09-06-mock-reading-table.md「ホーム・プロフィール・コレクションの768」。
     壁は同じ機能内の兄弟（BorutoChapterView.astro の .cols/.an2-chapter-tabs が使う820/821・
     このファイルの `.cols`/`.an2-chapter-tabs` 境目）に揃え、767px→820pxへ伸ばす。 */
  @media (max-width: 820px) {
    .an2-hero-wrap {
      padding: var(--space-sm) var(--space-sm) var(--space-sm);
    }
  }
  /* タブレット(768〜820)だけ、スマホの16pxからホーム768の実測値（24px・ヘッダー左右余白）へ
     余白を広げる。縦積み・シェブロン・3行クランプ等の「狭い幅の振る舞い」はそのまま維持
     （768pxはまだ横並びヘッダーには窮屈な幅のため、構造は変えない）。 */
  @media (min-width: 768px) and (max-width: 820px) {
    .an2-hero-wrap {
      padding: var(--space-sm) 24px var(--space-sm);
    }
  }
  /* 🔴 下の一覧（`.wrap`）と頭をそろえる。
     ⚠️ 根拠の無い幅を置かない＝帯と中身の左端がずれて見える。
     🔴【椿さんご指摘・2026-09-13「1280px でない」の直し】~~1080px~~ ⇒ **`var(--content-max)`（1280px）。**
        ⚠️ **数字を書き写さない**＝サイト共通の札を引く（次に幅を変える人が1か所で変えられる）。
        🔴 感想の流れる柱（`.an2-stream-inner`）も **2026-09-14 に椿さんのご決定で 1280px へ**
           （逐語「感想が流れる柱は広げるでよいよ」）。~~PM 裁定で 760px 据え置き~~ は失効。 */
  .an2-hero-inner {
    max-width: var(--content-max);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
  }
  .an2-hero-head {
    display: flex;
    align-items: flex-end;
    gap: var(--space-sm);
  }
  /* 🔴🔴 【2026-09-07・実測で捕まえた】**狭い幅では縦に積む。**
     ⚠️ 日本語の「考察を書く」は短いが、英語は "Write an analysis" で長い。
        横1列のままだと **390px で 44px、320px で 114px 画面からはみ出す**（実測）。
     ⭐ **日本語だけ見て「入っている」と判断しない。**札の長さは言語で3倍違う。
     ⚠️ モックはスマホで「考察を書く」を**下部ナビのすぐ上の固定行**に置く形。
        そこはまだ作っていないので、**いまは縦に積んで機能を残す**（段8 の仕上げで固定行へ移す）。 */
  .an2-hero-title-group {
    flex: 1;
  }
  /* ⚠️ 文字の大きさは6段だけ（32・24・20・16・14・12）。**直に書かない。**
     ⚠️ この塊は `global.css` に在るので **`tests/font-scale.test.mjs` は見ていない**
        （検査の範囲が規則より狭い）。⇒ **検査が見ていない場所でも、規則は同じ。** */
  .an2-hero-sup {
    font-size: var(--fs-mini);
    font-weight: 700;
    letter-spacing: 0.12em;
    color: var(--boruto-link);
  }
  /* 🔴 地が明暗で動くので見出しの文字も一緒に動かす（§13-3）。--boruto-deepは対比3.44で不合格・使わない。 */
  .an2-hero-h1 {
    margin: var(--space-xs) 0 0;
    font-size: var(--fs-page);
    font-weight: 900;
    line-height: 1.1;
    color: var(--boruto-ink);
  }
  /* 🔴🔴【椿さんご指示・2026-09-14「考察はもうないよ。取り下げ」】.an2-write-btn（考察を書く）
     は使用箇所が無くなった（BorutoChapterListView.astroから撤去済み）ためルールごと削除。 */
  /* ⚠️ モックの 15px は6段に無いので、本文の段（16px）へ寄せた。 */
  .an2-hero-tabs {
    display: flex;
    gap: 24px;
    font-size: var(--fs-body);
    font-weight: 700;
  }
  .an2-tab {
    padding: 8px 2px 12px;
    opacity: 0.6;
    color: var(--nb-band-ink);
    text-decoration: none;
  }
  .an2-tab.is-active {
    opacity: 1;
    border-bottom: 3px solid var(--boruto-link);
  }

  /* ── 段8：流れる面（一覧 PC/スマホ 512–567）── */
  /* ══════ 投稿枠（アーティファクト §6 の `.cmpwrap`／`.cmp`／`.cmp-open` の移設）══════
     🔴🔴【椿さんご指示・2026-09-15・やり直し】逐語＝「アーティファクトのフロントデザインを
        そのままいせつしてくれよ？描き直すのではなく。」
     ⇒ **箱の中の数値は絵の値をそのまま写す**（8/10/12・17.6/19.2・11.2 等）。
        面と面のあいだの外余白だけ、間隔の札（`--space-*`）から取る。
     ⚠️ 絵は明るい表示だけで描かれている。`#fff` をそのまま書くと**暗い表示で白い箱が残る**
        （椿さんご決定＝暗い表示は #1C1C1E）。⇒ **白＝`--nb-card`／薄い文字＝`--text-dim`**
        という「同じ役目の札」に置き換える。**色以外の形（枠2px・角丸12・影・寸法）は絵のまま。**
     ⚠️ 一般名（`.ta` `.crow` 等）は絵のままだが、**必ずこの入れ物の中だけに効かせる**。 */
  .an2-composer-wrap {
    max-width: var(--content-max);
    margin: 0 auto;
    padding: var(--space-sm) 40px 0;
  }
  @media (max-width: 820px) {
    .an2-composer-wrap { padding: var(--space-sm) var(--space-sm) 0; }
  }
  /* 閉じているとき＝本物のボタン1つ。中に案内文と「投稿」が並ぶ。 */
  .an2-composer-wrap .cmp {
    width: 100%;
    appearance: none; -webkit-appearance: none;
    text-align: left; font: inherit; cursor: pointer;
    background: var(--nb-card);
    border: 2px solid var(--boruto-deep);
    border-radius: var(--r-card);
    box-shadow: 0 6px 20px color-mix(in srgb, var(--boruto-deep) 15%, transparent);
    padding: 8px 10px 8px 12px;
    display: flex; align-items: center; gap: 10px;
  }
  .an2-composer-wrap .cmp .ta {
    flex: 1; min-width: 0;
    min-height: var(--tap);
    display: flex; align-items: center;
    padding: 0 12px;
    background: var(--nb-card);
    border: 1px solid color-mix(in srgb, var(--nb-text) 12%, transparent);
    border-radius: var(--r-pill);
    color: var(--text-dim);
    font-size: var(--fs-body);
    overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
    pointer-events: none;
  }
  .an2-composer-wrap .cbtn {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: var(--tap);
    padding: 0 17.6px;
    /* 🔴【WO-092・第4便 R5・P-1256】白の文字に --boruto-deep（#0083ac）の地は 4.34（基準 4.5・PM 実測）。1段濃い #00729c で 5.41（PM 計算・明るい表示の BORUTO のリンクの色と同じ値）。
       ⚠️ 札の --boruto-link は暗い表示で明るいシアンに置き直されるので使わない（白の文字が読めなくなる）。 */
    background: #00729c; color: #fff;
    border: 0; border-radius: var(--r-pill);
    font-size: var(--fs-note); font-weight: 700;
    white-space: nowrap; flex: none; cursor: pointer;
  }
  .an2-composer-wrap .cmp .cbtn { pointer-events: none; }
  /* 開いたとき＝絵と同じ形（角丸12・枠2px・柔らかい影・内余白 17.6/19.2）。 */
  .an2-composer-wrap .cmp-open {
    background: var(--nb-card);
    border: 2px solid var(--boruto-deep);
    border-radius: var(--r-card);
    box-shadow: 0 6px 20px color-mix(in srgb, var(--boruto-deep) 15%, transparent);
    padding: 17.6px 19.2px;
  }
  .an2-composer-wrap .chead-row {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
  }
  .an2-composer-wrap .chead {
    font-size: var(--fs-body); font-weight: 900;
    color: var(--boruto-deep); margin-bottom: 8px;
  }
  .an2-composer-wrap .cmp-close {
    appearance: none; border: 0; background: none;
    min-height: var(--tap); min-width: var(--tap);
    font-size: var(--fs-body); color: var(--text-dim); cursor: pointer;
  }
  .an2-composer-wrap .ta-full {
    display: block; width: 100%; box-sizing: border-box;
    min-height: 84px; resize: vertical;
    background: var(--nb-card); color: var(--nb-text);
    border: 1px solid color-mix(in srgb, var(--nb-text) 12%, transparent);
    border-radius: var(--r-input);
    padding: 11.2px;
    font: inherit; font-size: var(--fs-body);
  }
  .an2-composer-wrap .ta-full::placeholder { color: var(--text-dim); }
  /* 🔴【2026-09-15・実物を描いて見つけた】触ったときに光る枠が**オレンジ**だった
     （サイト共通の合図の色が `--fire` のため）。**BORUTO の面はシアン**（椿さん 2026-09-14）。
     ⚠️ 合図そのものを消さない＝キーボードで操作する人が「いまどこに居るか」を失う。
        **色だけ**をこの面の札へ替える。 */
  .an2-composer-wrap .ta-full:focus,
  .an2-composer-wrap .ta-full:focus-visible,
  .an2-composer-wrap .cmp:focus-visible,
  .an2-composer-wrap .cbtn:focus-visible,
  .an2-composer-wrap .cmp-close:focus-visible {
    outline: 2px solid var(--boruto-deep);
    outline-offset: 2px;
    border-color: var(--boruto-deep);
  }
  .an2-composer-wrap .crow {
    display: flex; align-items: center; justify-content: space-between;
    margin-top: 10px; gap: 10px;
  }
  .an2-composer-wrap .ccount {
    font-size: var(--fs-mini); color: var(--text-dim);
    font-variant-numeric: tabular-nums;
  }
  /* 暗い表示＝濃いシアンは暗い地の上で沈むので、見出しだけ明るい札へ。 */
  :root[data-theme="dark"] .an2-composer-wrap .chead { color: var(--boruto); }

  /* 🔴【椿さんご指示・2026-09-15「間隔が詰まってる」の直し】帯と流れる面が**接していた**
     （帯の下 0＋この面の上 0）。⇒ 間隔の札から上の余白を置く。 */
  .an2-stream-wrap {
    padding: var(--space-md) 40px 0;
  }
  /* 【E-3・タブレット768】同じ理由で767→820。中身は `.an2-stream-inner` が自前の枠
     （border-inline）を持つため、768でも外側の余白0のままで問題ない。
     ⚠️ 2026-09-14 に柱を 1280px へ広げたが、**820px 以下ではそもそも画面幅のほうが狭い**ので
        この区切りの意味は変わらない（柱は画面幅いっぱいになるだけ）。 */
  @media (max-width: 820px) {
    .an2-stream-wrap { padding: var(--space-sm) 0 0; }
  }
  /* 🔴【椿さんご決定・2026-09-14】~~760px~~ ⇒ **`var(--content-max)`（1280px）。**
     逐語＝「感想が流れる柱は広げるでよいよ。」
     ⚠️ PM は「読み物の柱は細いほうが読める」として据え置きを推したが、**椿さんが広げると決めた。**
        ⇒ 据え置きの根拠は失効。**この行を「細いほうが読める」を理由に戻さない。** */
  .an2-stream-inner {
    max-width: var(--content-max);
    margin: 0 auto;
    background: var(--nb-surface);
    border-inline: 1px solid color-mix(in srgb, var(--boruto-ink) 10%, transparent);
  }
  /* 🔴🔴【椿さんご指示・2026-09-15「インデントとか余白…規定通りに」の直し・実測で発見】
     この面の**左端が3種類**あった（テスト環境で実測）＝
       390px … ヒーロー 16 ／ 感想の行 **17** ／ 話数の行 16
       1440px… ヒーロー 80 ／ 感想の帯 **101** ／ 話数の黒札 100
     原因＝**この柱の左右の枠線1px**。枠の内側に中身が寄るので、枠の無い下の面と1pxずれる。
     ⚠️ 1px は読めないほど小さいが、**縦に積んだ2つの面の印の列が1pxだけ食い違う**＝
        目では「なんとなく揃っていない」としか見えないので、原因に辿り着けない種類のずれ。
     ⇒ ①狭い幅では枠を外す（不変則4「左右は画面の端まで」にも合う）
       ②広い幅では**下の面にも同じ枠を付ける**＝2つの面が1本の柱として続いて見える。 */
  @media (max-width: 820px) {
    .an2-stream-inner { border-inline: 0; }
  }
  @media (min-width: 821px) {
    .an2-chapters { border-inline: 1px solid color-mix(in srgb, var(--boruto-ink) 10%, transparent); }
  }
  /* ══════ 感想の見出しと「もっと見る」（アーティファクト §6 の移設・2026-09-15）══════
     🔴🔴【椿さんご指示・2026-09-15】~~シアン寄りの帯＋「話数へ」ボタン＋シェブロン~~
        ⇒ **黒い四角の見出し＋「新着順 ・ N件」**（絵の `.dlh`／`.dlday`／`.dlmeta`）。
        黒い四角そのものは「話数を選ぶ」と**同じ規則**を使う（写しを作らない）。 */
  .an2-feed-meta {
    font-size: var(--fs-mini);
    font-weight: 700;
    color: var(--boruto-link);
  }
  :root[data-theme="dark"] .an2-feed-meta { color: var(--boruto); }
  /* 「もっと見る」＝行ではなくボタン。狭く・中央・押せる見た目（絵の `.morewrap`／`.morebtn`）。
     ⚠️ 明暗は札で切り替わる（絵は明るい表示だけで描かれていたので `#fff`/`#1C1C1E` を札へ置換）。 */
  .an2-morewrap {
    display: flex;
    justify-content: center;
    padding: var(--space-sm);
  }
  .an2-morebtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--tap);
    padding: 0 24px;
    border: 1px solid var(--nb-text);
    border-radius: var(--r-pill);
    background: var(--nb-surface);
    color: var(--nb-text);
    font-size: var(--fs-note);
    font-weight: 800;
    text-decoration: none;
  }
  .an2-morebtn:hover, .an2-morebtn:focus-visible {
    background: color-mix(in srgb, var(--nb-text) 6%, var(--nb-surface));
  }
  .an2-voice-list { word-break: normal; }
  .an2-voice-row {
    display: flex;
    gap: 12px;
    padding: 12px 20px;
    border-bottom: 1px solid color-mix(in srgb, var(--boruto-ink) 10%, transparent);
    text-decoration: none;
    color: inherit;
  }
  /* 【E-3・タブレット768】同じ理由で767→820。 */
  @media (max-width: 820px) {
    .an2-voice-row { padding: 12px 16px; }
  }
  .an2-voice-row .avatar {
    width: 44px; height: 44px;
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--nb-surface) 90%, transparent),
      0 2px 6px color-mix(in srgb, var(--ink) 18%, transparent);
  }
  /* 【E-3・タブレット768】同じ理由で767→820。 */
  @media (max-width: 820px) {
    .an2-voice-row .avatar { width: 40px; height: 40px; }
  }
  .an2-voice-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
  .an2-voice-head {
    display: flex; align-items: baseline; gap: 8px;
    font-size: var(--fs-note); flex-wrap: wrap;
  }
  /* 🔴【PM決定・2026-09-14】ニックネームはBORUTOの面ではシアン（内容の強調・枠ではない）。
     `--boruto-link`は暗い地で#00a3d6へ再定義済み＝明暗どちらも対比OK（実測5.4/5.84・PM測定）。 */
  .an2-voice-head strong { font-weight: 700; color: var(--boruto-link); }
  .an2-voice-time {
    font-size: var(--fs-mini);
    /* 🔴【WO-092・第4便 R5・P-1256】紺の55%は明暗で切り替わらず、明るい表示で 4.05・暗い表示で 1.12（基準 4.5・PM 実測）。
       文字色（明暗で切り替わる）の70%にする＝明 6.4／暗 7.1（PM 計算）。 */
    color: color-mix(in srgb, var(--nb-text) 70%, transparent);
  }
  .an2-voice-chap {
    margin-inline-start: auto;
    font-size: var(--fs-mini);
    font-weight: 700;
    /* 🔴【椿さんご指示・2026-09-15・同じ理由】~~`--boruto-deep`~~ は `--boruto-soft` の上で
       **3.55**（基準 4.5）。⇒ 1段暗い `--boruto-dark` にすると **6.58**。 */
    color: var(--boruto-dark);
    background: var(--boruto-soft);
    padding: 2px 8px;
    border-radius: 999px;
    flex: none;
  }
  .an2-voice-text {
    margin: 0;
    font-size: var(--fs-note);
    line-height: 1.6;
    color: var(--nb-text);
  }
  /* 【E-3・タブレット768】同じ理由で767→820。 */
  @media (max-width: 820px) {
    .an2-voice-text {
      display: -webkit-box;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
      overflow: hidden;
      line-height: 1.5;
    }
  }
  .an2-voice-actions {
    display: flex; gap: 2px; margin-top: 2px; margin-inline-start: -10px;
  }
  /* 🔴【PM裁定・2026-09-14】押す的は34pxの描画のまま(::beforeの44px拡張は既存の
     .act-btn::beforeがそのまま効く)。文字だけ役割で選び直す＝小さな補助ボタンの文字は
     --fs-mini(ラベル用)ではなく--fs-note(補助ボタン用)。 */
  .an2-voice-actions .act-btn { min-height: 34px; padding: 0 10px; font-size: var(--fs-note); }

  /* ══════ 話数を選ぶ（アーティファクト §6/§8 の移設・2026-09-15）══════
     🔴 トップのタイムライン（`src/components/DayLadder.astro`）の行の型をそのまま写す。
        枠なし・角丸なし・影なし・仕切り線1本・行間ゼロ・余白は行の内側。
     🔴 色は BORUTO のシアン（椿さん 2026-09-14）＝印の丸 `--boruto-deep`／
        話数と強調の札 `--boruto-link`（明）・`--boruto` （暗）。オレンジは使わない。
     ⚠️ 数字を直に書かない＝文字は6段の札、間隔は `--space-*`、丸は `--icon-circle`。
     🔴🔴 **この塊の入れ物は `.boruto-page` だけ**（`[id="mp2-shell"]` を並べない）。
        理由＝`.chap-*` を使う部品は `BorutoChapterListView.astro` **1つだけ**で、それを描く
        ページは `src/pages/boruto/chapters/index.astro` と `[lang]/…` の**2枚だけ**。
        どちらも `BorutoLayout` ＝ `body.boruto-page` で、**会員の殻（`#mp2-shell`）の中には出ない**。
        ⭐ 詳細度は `:is(.boruto-page,[id="mp2-shell"]) .chap-card`（0,2,0）と**同じ**なので、
           見え方は1ピクセルも変わらない。
        ⚠️ 併せて `#mp2-shell 色トークン族の門` にも掛からなくなる＝**門を緩めずに済む**
           （会員の殻の中では色は会員の札から取る決まりで、この行はそもそも殻の中に出ない）。
        🔴 **もし将来この部品を会員の殻の中で使うなら、この判断ごと見直すこと。** */
  .an2-chapters {
    max-width: var(--content-max);
    margin: 0 auto;
    padding: 0 0 var(--space-lg);
    background: var(--nb-surface);
  }
  .an2-chapters-h, .an2-feed-h {
    margin: 0;
    padding: var(--space-sm);
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    flex-wrap: wrap;
  }
  /* 黒い四角の札。**角丸を付けない**（トップの `.dl-day` と同じ）。 */
  /* 🔴🔴【椿さんご指示・2026-09-15】逐語＝「その帯の幅が狭すぎる感じがする」「文字が下寄り
     過ぎる印象。**上下中央揃えにして**ということ」。
     ⚠️ 実測＝高さ 34px・中の文字 14px・上下の空き 7.0/7.2px。**数字の上では中央だが、
        行の箱（line-height 1.3）のぶん、字が沈んで見える。**
     ⇒ ①`line-height: 1` にして行の箱による偏りを消し、②`align-items: center` で
       **箱の中央**に置き、③高さを **40px** にして窮屈さを取る。
     ⚠️ 40px は新しい数字ではない＝規定にある**部品の高さの最小段**（`--icon-circle` 40px。
        上は `--tap` 44px・`--tap-primary` 48px）。帯にも同じ段を使う。
     ⚠️ 角丸は付けない（トップのタイムラインの黒い札と同じ・アーティファクトの不変則）。 */
  .an2-chapters-day, .an2-feed-day {
    display: inline-flex;
    align-items: center;
    min-height: var(--icon-circle);
    padding: 0 0.9rem;
    font-weight: 900;
    font-size: var(--fs-note);
    line-height: 1;
    color: var(--nb-surface);
    background: var(--nb-text);
  }
  /* 1件の行。カードではない。 */
  .boruto-page .chap-card {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 15.2px var(--space-sm);
    background: transparent;
    border: 0;
    border-bottom: 1px solid color-mix(in srgb, var(--boruto-ink) 10%, transparent);
    border-radius: 0;
    box-shadow: none;
    text-decoration: none;
    color: inherit;
    transition: background-color .15s ease;
  }
  .boruto-page .chap-list > .chap-card:first-of-type {
    border-top: 1px solid color-mix(in srgb, var(--boruto-ink) 10%, transparent);
  }
  a.chap-card:hover, a.chap-card:focus-visible {
    background-color: color-mix(in srgb, var(--nb-text) 3%, transparent);
  }
  /* 左の丸印。線画SVG・絵文字は使わない。 */
  .boruto-page .chap-mk {
    width: var(--icon-circle);
    height: var(--icon-circle);
    flex: none;
    border-radius: var(--r-tile);
    background: var(--boruto-deep);
    color: #fff;
    display: grid;
    place-items: center;
  }
  .boruto-page .chap-mk svg { display: block; }
  .boruto-page .chap-card .info { flex: 1; min-width: 0; }
  .boruto-page .chap-no {
    display: block;
    margin: 0 0 .15rem;
    font-size: var(--fs-mini);
    font-weight: 800;
    line-height: 1.3;
    color: var(--boruto-link);
  }
  .boruto-page .chap-t {
    margin: 0;
    font-size: var(--fs-body);
    font-weight: 700;
    line-height: 1.55;
  }
  .boruto-page .chap-d {
    margin: .2rem 0 0;
    font-size: var(--fs-note);
    color: var(--ink-60);
    line-height: 1.65;
  }
  .boruto-page .chap-pills {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    margin-top: .45rem;
    flex-wrap: wrap;
  }
  .boruto-page .chap-pill {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: var(--fs-mini);
    font-weight: 700;
    border-radius: var(--r-pill);
    padding: .1rem .55rem;
    background: color-mix(in srgb, var(--nb-text) 5%, transparent);
    /* 🔴【WO-092・第4便 R5・P-1256】墨の60%は、この札の地の上で 4.4（基準 4.5・PM 実測）。文字色の70%で 明 6.1（PM 計算）。 */
    color: color-mix(in srgb, var(--nb-text) 70%, transparent);
  }
  .boruto-page .chap-pill.hot {
    background: color-mix(in srgb, var(--boruto) 16%, transparent);
    color: var(--boruto-dark);
  }
  @media (min-width: 821px) {
    .boruto-page .chap-card { padding: 15.2px 20px; }
    .an2-chapters-h, .an2-feed-h { padding: var(--space-sm) 20px; }
  }
  /* 🔴【WO-092・第4便 R5・P-1256】シアン（--boruto）は薄いシアンの札の地の上で 4.11（基準 4.5・PM 実測）。淡いシアンで 9.8（PM 計算）。 */
  :root[data-theme="dark"] .boruto-page .chap-pill.hot { color: var(--boruto-soft); }
  :root[data-theme="dark"] .boruto-page .chap-no { color: var(--boruto); }
  /* 🔴【2026-09-15・実物を描いて見つけた】仕切り線が**暗い表示で消えていた**。
     `--boruto-ink`（#021824＝ほぼ黒）の10%は、暗い地の上では見えない。
     ⇒ 隣の感想の行（`.an2-voice-row` の暗い表示・すぐ下の節）と**同じ式**にそろえる。
     ⚠️ 明るい表示の値は1バイトも変えない（そちらは見えている）。 */
  :root[data-theme="dark"] .boruto-page .chap-card,
  :root[data-theme="dark"] .boruto-page .chap-list > .chap-card:first-of-type {
    border-color: color-mix(in srgb, var(--nb-text) 15%, transparent);
  }

  /* 考察一覧ヒーロー内検索・チップ（591–611） */
  .an2-hero-search {
    height: 44px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--nb-band-ink) 12%, transparent);
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 14px;
    margin-top: 8px;
  }
  .an2-hero-search-input {
    flex: 1; min-width: 0;
    border: 0; background: transparent;
    font: inherit; font-size: var(--fs-note);
    color: var(--nb-band-ink);
  }
  .an2-hero-search-input::placeholder {
    color: color-mix(in srgb, var(--nb-band-ink) 70%, transparent);
  }
  .an2-hero-search-input:focus { outline: none; }
  .an2-filter-chips {
    display: flex; gap: 6px; margin-top: 10px;
    overflow-x: auto; flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    /* 🔴【椿さんご指摘・2026-09-13】チップの押す的を 44px にするための**場所**。
       ⚠️ **チップ側に見えない四角（`::before`）を置くだけでは効かない**＝この行は
          `overflow-x: auto` を持ち、片方の軸が `visible` でなくなると**もう片方も切り落とす**
          （実測＝四角を置いても押せる丈は 33px のままだった）。
       ⭐ `<hr>` の取っ手が1画素も塗られていなかったのと同じ形＝**宣言は正しいのに効かない。**
       ⇒ 行自体に上下 6px の余白を持たせ、44px の四角が**この行の中に収まる**ようにする。 */
    padding-block: 6px;
  }
  .an2-filter-chip {
    height: 32px;
    padding: 0 12px;
    border-radius: 999px;
    font-size: var(--fs-mini);
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    flex: none;
    white-space: nowrap;
    border: 1px solid color-mix(in srgb, var(--nb-band-ink) 35%, transparent);
    background: transparent;
    color: var(--nb-band-ink);
    cursor: pointer;
    /* 🔴【椿さんご指摘・2026-09-13「上部の見出し帯が規定外」の一部】押す的は 44px 以上
       （全画面共通の規約）。実測（直す前）＝見た目 32px・**押せる丈も 33px** で、広げる仕掛けが
       1つも無かった。⇒ このサイトで既に使っている形（見えない四角で丈だけ広げる＝
       `.sm-header` の操作・`.act-btn` と同じ）をそのまま当てる。
       ⚠️ **見た目は 32px のまま**＝チップは小さいのが正しい。横は広げない（隣と重なる）。 */
    position: relative;
  }
  .an2-filter-chip::before {
    content: '';
    position: absolute;
    left: 0; right: 0; top: 50%;
    height: 44px;
    transform: translateY(-50%);
  }
  .an2-filter-chip.is-active {
    background: var(--boruto-link);
    color: var(--boruto-ink);
    border-color: var(--boruto-link);
  }

  /* 話数の面ヒーロー（568–590） */
  /* 🔴🔴【椿さんご指示・2026-09-15「ヒーローとか暗いまま」】
     ~~暗紺グラデ `linear-gradient(165deg, var(--boruto-dark), var(--boruto-ink) 65%)`~~
     ⇒ **一覧の面（`.an2-hero-wrap`）と同じ薄いシアン**。
     理由＝ヘッダーがオレンジへ戻った時点で、暗紺で境目をぼかす必要が無くなった
     （椿さん 2026-09-14「感想ページのヒーローセクションみたいなところは薄めのシアンで良い」）。
     ⚠️ 地が明るくなるので、**その上の文字と印も一緒に暗い色へ**（下の3規則）。
        片方だけ替えると白い文字が薄いシアンの上に載って読めなくなる。 */
  .an2-chapter-hero {
    background: color-mix(in srgb, var(--boruto) 8%, var(--scroll));
    color: var(--boruto-ink);
    padding: var(--space-sm) var(--space-xs);
  }
  .an2-chapter-nav {
    display: flex; align-items: center; gap: 4px;
  }
  .an2-chapter-back,
  .an2-chapter-share {
    width: 44px; height: 44px;
    border: 0; background: transparent;
    display: grid; place-items: center;
    color: var(--boruto-ink);
    text-decoration: none;
    cursor: pointer;
    padding: 0;
  }
  .an2-chapter-meta { flex: 1; min-width: 0; }
  .an2-chapter-ep {
    font-size: var(--fs-mini);
    font-weight: 700;
    letter-spacing: .12em;
    color: var(--boruto-link);
  }
  .an2-chapter-title {
    margin: 0;
    font-size: var(--fs-sec);
    font-weight: 900;
    line-height: 1.2;
    color: var(--boruto-ink);
  }
  .an2-chapter-cover {
    font-size: var(--fs-mini);
    opacity: .85;
    margin-top: 2px;
  }
  .an2-chapter-tab-count { font-weight: 700; }
  .an2-chapter-tabs {
    display: flex; gap: 22px;
    font-size: var(--fs-note); font-weight: 700;
    margin-top: 6px; padding: 0 8px 0;
  }
  .an2-chapter-tab {
    padding: 6px 2px 10px;
    opacity: 0.6;
    border: 0; background: none;
    color: var(--boruto-ink);
    font: inherit; font-weight: 700;
    cursor: pointer;
  }
  .an2-chapter-tab.is-active {
    opacity: 1;
    border-bottom: 3px solid var(--boruto-link);
  }
  /* 暗い表示＝一覧の面（`.an2-hero-wrap` の暗い表示）と同じ扱い。 */
  /* 🔴🔴【2026-09-15・PM が実測前に気づいて塞いだ穴】地だけ暗くして**入れ物自身の文字色**を
     替えないと、色を持たない子（`.an2-chapter-cover`＝「2026年9月特大号」）が
     `--boruto-ink`（ほぼ黒）を受け継いだまま暗い地に載って**消える**。
     ⭐ **地と文字は必ず対で替える。**下の4つは「自分で色を持つ子」なので別に並べてある。 */
  :root[data-theme="dark"] .an2-chapter-hero {
    background: color-mix(in srgb, var(--boruto) 8%, #1C1C1E);
    color: #EDEDF0;
  }
  :root[data-theme="dark"] .an2-chapter-title,
  :root[data-theme="dark"] .an2-chapter-back,
  :root[data-theme="dark"] .an2-chapter-share,
  :root[data-theme="dark"] .an2-chapter-tab {
    color: #EDEDF0;
  }
  /* 🔴🔴【PM裁定・2026-09-14】静止時は1行の細い帯・タップで開く。
     地・枠は静止時から在ってよい（「線」＝1行の高さという意味。存在自体を消すのではない）。
     開閉は `#bt-composer` への `.is-open` の有無（textarea の focus/blur で JS が付け外す）。 */
  /* 🔴 モックの宣言値（reference-screens export :575・PM裁定2026-09-14）をそのまま写す。 */
  .an2-inline-composer {
    padding: 8px 16px;
    border-bottom: 1px solid color-mix(in srgb, var(--boruto-ink) 10%, transparent);
    display: flex; flex-direction: column; gap: 8px;
    background: #e6f7fb;
  }
  .an2-inline-composer textarea {
    height: var(--tap);
    min-height: var(--tap);
    overflow: hidden;
    resize: none;
    border: 1px solid color-mix(in srgb, var(--boruto-ink) 20%, transparent);
    border-radius: var(--r-input);
    background: var(--nb-surface);
    padding: 10px 12px;
    font: inherit; font-size: var(--fs-body);
    line-height: 1.6;
    color: var(--nb-text);
    transition: height .15s ease, min-height .15s ease;
  }
  .an2-inline-composer.is-open textarea {
    height: auto;
    min-height: 72px;
    overflow: auto;
    resize: vertical;
  }
  .an2-inline-composer-row {
    display: none;
    align-items: center; gap: 6px; flex-wrap: wrap;
  }
  .an2-inline-composer.is-open .an2-inline-composer-row {
    display: flex;
  }
  /* 🔴【WO-rv2-A・暗表示の対比是正・2026-09-08・lane D実測／PM裁定】混合比55%→61%
     （docs/rv2-contrast-findings.md #6）。本物のBORUTOシアン文脈で検証済み＝4.623（AA4.5クリア）。
     `.an2-compose-count`（naruto再テーマ文脈・同じ規則）も同じ61%で4.542クリア＝1つの数字で両方満たす。 */
  .an2-inline-hint {
    font-size: var(--fs-mini);
    color: color-mix(in srgb, var(--boruto-ink) 61%, transparent);
  }
  .an2-inline-count {
    font-size: var(--fs-mini);
    color: color-mix(in srgb, var(--boruto-ink) 61%, transparent);
  }
  .an2-inline-submit {
    margin-inline-start: auto;
    height: var(--tap);
    padding: 0 20px;
    border-radius: var(--r-pill);
    border: 0;
    background: var(--boruto-link);
    color: var(--boruto-ink);
    font: inherit;
    font-weight: 700;
    font-size: var(--fs-note);
    white-space: nowrap;
    flex: none;
    cursor: pointer;
  }
  .an2-inline-submit:disabled { opacity: .55; cursor: not-allowed; }
  /* モバイル限定：ヒーロー内タブ。PC（≥821px）は非表示＝2カラム。 */
  @media (min-width: 821px) {
    .an2-chapter-tabs { display: none; }
  }

  /* 考察を読む面（612–627） */
  .an2-reader-progress {
    height: 3px;
    background: color-mix(in srgb, var(--boruto-ink) 8%, transparent);
  }
  .an2-reader-progress > div {
    height: 100%;
    background: var(--boruto-link);
    width: 0%;
  }
  /* 🔴🔴【A-19続き・2026-09-08・PM裁定】.an2-chapter-back は暗い帯(.an2-hero-wrap)用に
     color:var(--nb-band-ink)（白）で作られたクラス。読む面のツールバーは地が
     .an2-reader-body等と同じ通常の面色（暗い帯ではない）なので、白のままだと
     実測コントラスト1.10（合格線4.5に遠く届かない・既存の出荷済みバグ）。
     ここだけ通常のインク色（.an2-reader-labelと同じ var(--nb-text)）へ上書きする。
     ⚠️ 他の場所（暗い帯の中の.an2-chapter-back）は1バイトも変えない＝
     このセレクタで読む面のツールバー内だけに絞る。 */
  .an2-reader-bar .an2-chapter-back {
    color: var(--nb-text);
  }
  /* 🔴【A-19続き・2026-09-08・PM裁定】モック(612-627行)＝ツールバー行は45%に薄める
     （読む面らしく本文の邪魔をしない、という意図の帯）。 */
  .an2-reader-bar {
    height: 44px;
    display: flex; align-items: center;
    padding: 0 8px;
    border-bottom: 1px solid color-mix(in srgb, var(--boruto-ink) 8%, transparent);
    opacity: .45;
  }
  .an2-reader-label {
    font-size: var(--fs-mini);
    font-weight: 700;
    color: var(--nb-text);
  }
  .an2-reader-body {
    padding: 8px 22px 2rem;
    max-width: 760px;
    margin: 0 auto;
  }
  .an2-reader-badge {
    align-self: flex-start;
    font-size: var(--fs-mini);
    font-weight: 700;
    color: var(--boruto-deep);
    background: var(--boruto-soft);
    padding: 3px 10px;
    border-radius: 999px;
    display: inline-block;
    margin-bottom: 14px;
  }
  .an2-reader-body .article h1 {
    font-size: var(--fs-page);
    font-weight: 700;
    line-height: 1.35;
    text-wrap: pretty;
  }
  .an2-reader-body .article .body {
    font-size: var(--fs-body);
    line-height: 1.9;
    text-wrap: pretty;
    white-space: pre-wrap;
  }

  /* 🔴🔴【2026-09-10・PM是正・オーナー実機報告「考察はUIが壊れてる」の本体】
     #mp2-shell .mp2-lower > [data-panel].on（MemberProfileShell.astro:16984 付近）は
     全パネル共有の規則で、地の色を会員の着せ替え `--mp2-cd` から取る。一覧表示（この節の
     もう一方の中身＝#mp2-anlist）は文字も会員の着せ替え（--mp2-tx系）なのでこれで正しいが、
     この考察を書く画面（.an2-compose-*）は**わざと**サイト共通トークン（--nb-text等）で
     組んである＝会員の着せ替えに乗らない `--mp2-cd`（暗いモードで反転しない）の上に、
     暗いモードで反転する文字が乗り、対比が消える（実測＝本文欄が明17.4→暗1.17）。
     ⚠️ 共有規則そのものは変えない（他パネル＝一覧・体験談・行った場所・企画・コレクション
     の着せ替え地を壊す）。この画面が生きている間だけ立つ印
     （initAnalysisComposer()・MemberProfileShell.astro）を見て、そのときだけ地を
     サイト共通トークンへ上書きする。
     🔴 **この規則は AnalysisComposerView.astro への抽出で丸ごと不要になる**＝独立ページに
     なれば `[data-panel].on` という囲いの中に居なくなるため。抽出の完了条件に
     「この規則と対応する印（data-an2-composer-active）が要らなくなったことを確認して
     両方消す」を必ず含めること。 */
  #mp2-shell .mp2-lower > [data-panel="analysis"].on[data-an2-composer-active] {
    background: var(--nb-card, var(--mp2-cd));
  }

  /* 考察を書く固定画面（628–652）
     🔴【2026-09-10・PM是正・オーナー実機指摘】モックのグラデーション帯（629行目）は
     タブ帯（633行目）を内包していなかった＝タブは白い本体に乗る兄弟要素だった。
     実装ではタブがこのグラデーションの中に入ってしまい、activeタブの文字が
     #1a1a1a on #1a1a1a でコントラスト1.0:1になっていた（ネストは
     MemberProfileShell.astro側で修正）。あわせて、この帯自体もオーナーの
     「平成初期みたいな枠・影カードをやめる」指示に沿ってグラデーションを廃し、
     周囲と同じ1枚の面にする（.an2-chapter-back の前例＝6251行目付近と同じ形の
     「暗い帯用の色を通常面で使い回すと文字が消える」バグなので、同じ直し方＝
     暗い帯専用トークン(--nb-band-ink)をやめて通常のインク色(--nb-text)に戻す）。 */
  /* 🔴🔴【2026-09-10・AnalysisComposerView.astro 抽出・PM設計】この画面自身の地。
     旧 [data-panel="analysis"].on[data-an2-composer-active] は「印が立っている間だけ
     地を上書きする」パッチだった＝地と、その上の文字（.an2-compose-title 等）が
     別々の軸に乗ったまま、たまたま上から塗って揃えて見せていただけ。独立ページに
     なった今、この面はもう「上書き」ではなく**最初からサイト軸の面そのもの**として
     宣言する（状態に関係なく常時）。⇒ 直下の文字（title/chapLabel/count/tab等）は
     このルール1本のおかげで正しい地の上に乗る＝個々に background を持たせない
     （持たせると、次に何かをこの面に重ねる人が全部を書き換える羽目になる）。
     一方、titleInput/pce-text（本文欄）/close は「面」自身（入力欄・書く場所・
     ボタン）なので、このルールとは別に各自 background を持つ（下の各規則参照）。 */
  .an2-composer-page {
    background: var(--nb-card);
    min-height: 100dvh;
  }
  .an2-compose-bar {
    height: 52px;
    display: flex; align-items: center; gap: 4px;
    padding: 0 12px 4px;
  }
  .an2-compose-close {
    width: 44px; height: 44px;
    border: 0;
    /* 🔴 上の [data-an2-composer-active] 規則で祖先の地は直したが、`background: transparent`
       だけに頼らず**明示的に**サイト共通トークンを持たせる（透明＋暗黙の継承より頑丈＝
       将来このボタンだけ独立の背景を持つ変更が来ても、この行だけ見れば分かる）。 */
    background: var(--nb-card, transparent);
    display: grid; place-items: center;
    color: var(--nb-text);
    text-decoration: none;
  }
  .an2-compose-title {
    /* 🔴🔴【2026-09-10・AnalysisComposerView.astro 抽出】この要素は独立ページ化に伴い
       <span> から <h1> へ昇格（ページの見出しが0件になっていたビルド検査の指摘で発覚＝
       旧shellはこの帯とは別に会員名の<h1>を常に持っていたが、独立ページはそれを持たない）。
       margin はブラウザ既定のh1マージンを打ち消す（見た目はこれまでの帯のまま変えない）。 */
    margin: 0;
    font-size: var(--fs-sec);
    font-weight: 900;
    /* 🔴🔴【2026-09-10・PM是正・二回目】このspanは元々colorを持たず、#mp2-shellの
       `color: var(--mp2-tx)`（会員の着せ替え・全里で固定＝明暗で1ドットも変わらない）を
       継承していた。上の[data-an2-composer-active]規則が地だけをサイト共通トークンへ
       動かした結果、地は暗転するのに文字は着せ替えの固定色のまま＝対比消失（実測
       明14.93→暗1.01・konoha実測rgb(31,42,28)で明暗同値）。地と文字は必ず同じ軸に
       揃える（closeボタンと同じ「継承に頼らず明示する」形）。 */
    color: var(--nb-text);
  }
  .an2-compose-draft {
    font-size: var(--fs-mini);
    opacity: 0.7;
    margin-inline-start: 6px;
  }
  .an2-compose-pub {
    margin-inline-start: auto;
    height: 44px; padding: 0 20px;
    border-radius: 999px; border: 0;
    background: var(--boruto-link);
    color: var(--boruto-ink);
    font-size: var(--fs-note);
    font-weight: 700;
    cursor: pointer;
  }
  .an2-compose-tabs {
    display: flex;
    border-bottom: 1px solid color-mix(in srgb, var(--boruto-ink) 10%, transparent);
  }
  .an2-compose-tab {
    flex: 1; text-align: center;
    padding: 12px 0;
    font-size: var(--fs-note);
    font-weight: 700;
    border: 0; background: none;
    /* 🔴🔴【2026-09-10・PM是正・二回目・面の総点検】この画面はサイト共通トークンの軸で
       組む決まり（.an2-compose-title と同じ理由）。`--boruto-ink` は全里・明暗で固定＝
       未選択タブの文字が地（サイト軸）から取り残される。`--nb-text` 基準に差し替え。
       ⚠️ 元の55%は軸の直しと無関係に**明るい方も**基準未達（実測3.90:1・基準4.5）＝
       今日の暗転が原因ではない、直す前から在った不足。ついでに62%へ引き上げ、
       明暗どちらも4.5以上に（実測 明4.88:1／暗5.86:1）。 */
    color: color-mix(in srgb, var(--nb-text) 62%, transparent);
    cursor: pointer;
    border-bottom: 3px solid transparent;
  }
  .an2-compose-tab.is-active {
    color: var(--nb-text);
    border-bottom-color: var(--boruto-link);
  }
  .an2-compose-form {
    padding: 14px 16px;
    display: flex; flex-direction: column; gap: 12px;
    max-width: 760px;
    margin: 0 auto;
  }
  .an2-compose-chap-row {
    display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
  }
  .an2-compose-chap-label {
    font-size: var(--fs-mini);
    font-weight: 700;
    /* 🔴🔴【2026-09-10・PM是正・二回目】同上（.an2-compose-title 参照）＝サイト軸へ統一。 */
    color: color-mix(in srgb, var(--nb-text) 60%, transparent);
  }
  .an2-compose-chap-pill {
    height: 40px; padding: 0 14px;
    border-radius: 999px;
    background: var(--boruto-soft);
    /* 🔴🔴【2026-09-10・PM是正】--boruto-deep はこの淡い地の上で3.02:1固定（基準4.5・
       明暗どちらでも同じ値＝軸の問題ではなく、このペア自体の対比不足）。会員が実際に
       読んで操作する選択肢なので、軸に関係なく常に定義されている --ink（サイト共通の
       濃い墨色）へ差し替え、地の色そのものは変えずに文字だけ濃くする。 */
    color: var(--ink);
    font-size: var(--fs-note);
    font-weight: 700;
    display: inline-flex; align-items: center; gap: 6px;
    border: 0; cursor: pointer;
  }
  .an2-compose-title-input {
    height: 52px;
    border: 1px solid color-mix(in srgb, var(--boruto-ink) 20%, transparent);
    border-radius: 8px;
    padding: 0 14px;
    font: inherit; font-size: var(--fs-sec); font-weight: 700;
    color: var(--nb-text);
    /* 🔴🔴【2026-09-10・PM是正】<input> は背景を明示しないとブラウザ既定の白が固定で乗る
       （祖先の地・[data-an2-composer-active] の上書きの効果が届かない＝input要素は
       自分の層で不透明に塗る）。暗いモードで --nb-text が反転しても白地のまま＝
       実測 明26,26,26-on-白（読める）→暗237,237,240-on-白（読めない）。 */
    background: var(--nb-card);
    width: 100%; box-sizing: border-box;
    /* 🔴🔴【2026-09-10・PM指摘・実測で確認】390pxではplaceholder文言（例:「考察のタイトル
       （例: ○○の伏線について）」）が入力欄の右端で無音のまま切れていた（実測＝文言の
       描画に470px要るのに欄の実幅は358px・省略記号なし）。⚠️ 文言は変えない（9言語ぶん
       ある・オーナーの持ち物）＝入る幅にする側の直しではなく、切れる合図（…）を足すだけ。
       欄そのものが本来より狭いわけではない＝この文言は現実的などの携帯幅でも全部は
       入らない（実測＝欄以外の余白込みで502px要る）。短くするかはオーナー判断。 */
    text-overflow: ellipsis;
    overflow: hidden;
  }
  .an2-compose-toolbar {
    display: flex; gap: 6px; align-items: center; flex-wrap: wrap;
  }
  .an2-compose-tool {
    width: 44px; height: 44px;
    border-radius: 8px;
    border: 1px solid color-mix(in srgb, var(--nb-text) 15%, transparent);
    background: var(--scroll);
    /* 🔴🔴【2026-09-10・PM是正・二回目】背景 --scroll は明暗で反転するサイト軸なのに、
       文字は --boruto-ink（全里・明暗で固定）のままだった＝実測 明26,26,26-on-244,244,245
       （読める）→暗26,26,26-on-28,28,30（読めない・ほぼ同色）。地に合わせて --nb-text へ。 */
    color: var(--nb-text);
    display: grid; place-items: center;
    cursor: pointer;
    font-weight: 900;
    font-size: var(--fs-note);
  }
  .an2-compose-count {
    margin-inline-start: auto;
    font-size: var(--fs-mini);
    /* 🔴🔴【2026-09-10・PM是正・二回目】同上＝サイト軸へ統一。 */
    color: color-mix(in srgb, var(--nb-text) 61%, transparent);
  }
  .an2-compose-body {
    min-height: 240px;
    border: 1px solid color-mix(in srgb, var(--boruto-ink) 20%, transparent);
    border-radius: 8px;
    padding: 14px;
    font: inherit; font-size: var(--fs-body);
    line-height: 1.8;
    resize: vertical;
    color: var(--nb-text);
    /* 🔴🔴【2026-09-10・PM是正・最優先】ここが会員が実際に打っている文章そのものの面。
       [data-an2-composer-active] の上書きに頼らず明示する（オーナー実機報告「考察はUI
       が壊れてる」の正体はタブではなくこの面＝実測 明17.4→暗1.17、打っている文章が
       見えなくなる）。 */
    background: var(--nb-card);
    width: 100%; box-sizing: border-box;
  }
  /* 🔴【2026-09-10・PM是正】本文欄が空のとき案内文言を出す（プレーンtextareaの
     placeholder属性に相当）。prose-composer.ts の render() が空の .pce-text には
     子ノードを一切足さない（renderMarkedText を呼ばない）ので :empty が確実に一致する。
     data-placeholder はレンダー時に毎回セットしている（labels.bodyPlaceholder）。 */
  .an2-compose-body .pce-text:empty::before {
    content: attr(data-placeholder);
    color: color-mix(in srgb, var(--nb-text) 45%, transparent);
    pointer-events: none;
  }
  /* 🔴🔴【2026-09-10・PM是正・実機発見「平成初期みたいなボタンが並んでる」】
     prose-composer.ts が組み立てる .pce-toolbar／.pce-block-toolbar には
     元々CSSが1行も無かった（このファイルを全文検索して確認）。中の各ボタンは
     .an2-compose-tool（display:grid・44×44の正方形専用）を持つが、**親に
     並べる指定（flex等）が無いとブロック要素として縦に積み上がる**＝
     ボタン9個が縦一列（B・+・戻す・やり直す・種類・字下げ・字上げ・寄せ・削除）
     になり、本文欄が下部ナビの下に押し出されて見えなくなっていた
     （オーナー実機報告の実体＝「平成初期みたいなボタンが並んでる」）。
     ⇒ 兄弟の .an2-compose-toolbar（既存・538行下）と同じ横並びの型を、
     この2つの入れ物にも明示で持たせる（クラス名を共有せず、意味の異なる
     入れ物として別々に定義＝将来どちらかの見た目を変えても片方が引きずられない）。 */
  /* 🔴🔴【UAT第6便 ⑥・椿さんご指示 2026-09-16】「文章編集の編集機能ボタンたちの表示やルールは
     全て自己紹介枠と同じように、テキスト書いて範囲選択したらメニューバーを表示させるだったり、
     スマホなら下に出すだったり同じようにしましょう。」
     ⇒ 自己紹介（`#mp2-shell .mp2-tb`）と**同じ出し方**にする。
       ・ふだんは出さない。文字を範囲選択したときだけ、その場に浮く（位置は JS が実測して入れる）
       ・スマホ（860px 以下）はキーボードのすぐ上に貼り付き、入り切らない道具は**横に流す**
     ⚠️ **折り返させない**（スマホ）＝2段になるとキーボードの上でページを食い、書く面が減る。
     ⚠️ `--mp2-kb` はキーボードの高さ。測れない画面では 0 のまま＝いちばん下に貼り付く。 */
  /* ⚠️ 余白・すきまは規定の目盛り（--space-xs=8px）から取る（椿さんご指示 2026-09-16）。
     ⚠️ 重なりは下部ナビ（90）と公開の帯（100）より上にする＝下に潜ると押せない
        （2026-09-16・実物で測って発見）。逃げる位置は prose-composer.ts が実測して入れる。 */
  .pce-toolbar {
    display: none; position: fixed; z-index: 110;
    flex-wrap: wrap; gap: var(--space-xs); align-items: center;
    margin: 0; padding: var(--space-xs); border-radius: var(--r-input);
    background: var(--nb-card);
    box-shadow: 0 2px 0 var(--nb-hairline), 0 0 0 1.5px var(--nb-hairline);
  }
  .pce-toolbar.is-on { display: flex; }
  @media (max-width: 860px) {
    .pce-toolbar {
      /* ⚠️ `bottom` はここに書かない＝下部ナビと公開の帯を避けるため、
         prose-composer.ts が実測した値を入れる（数字を2か所に持たない）。 */
      top: auto; left: 0; right: 0;
      max-width: 100%; border-radius: var(--r-sheet);
      flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain;
      padding: var(--space-xs);
      box-shadow: 0 -2px 0 var(--nb-hairline);
    }
    /* ⚠️ 縮ませない＝縮むと横に流れず、道具が潰れて読めなくなる */
    .pce-toolbar > * { flex: 0 0 auto; }
  }
  /* 🔴【UAT第6便 ⑥】段落ごとの帯は**いま書いている段落の1本だけ**出す（自己紹介と同じ）。
     ⚠️ それまでは段落の数だけ帯が出ていた（段落が5つあれば帯も5本）。
     ⚠️ `display: none` は**親に印が付いていないとき**の姿。印（`is-focus`）は
        prose-composer.ts が、カーソルの居る段落へ付け外しする。 */
  .pce-block-toolbar {
    display: none; flex-wrap: wrap; gap: var(--space-xs); align-items: center;
    margin-bottom: var(--space-xs);
  }
  .pce-block.is-focus > .pce-block-toolbar { display: flex; }
  /* 🔴🔴【2026-09-10・PM是正】.pce-align-select と削除ボタンは1個の塊として折り返す
     （prose-composer.ts の buildBlockToolbar() 参照・理由もそちらに記載）。
     display:flex にする＝親（.pce-block-toolbar）から見てこのdivが1個のflexアイテムに
     なり、中の2つが離れて別々の行へ分かれることが構造的に無くなる。 */
  .pce-block-toolbar-pair {
    display: flex; gap: 6px; align-items: center;
  }
  /* 🔴🔴 同じ実機報告のもう半分＝.pce-kind-select／.pce-align-select は
     生の<select>にCSSが1行も無く、ブラウザ既定のまま出ていた。周囲の
     .an2-compose-toolボタン（角丸8・サイト軸の地/文字）に見た目を揃える。
     ⚠️ 上の :root の color-scheme 宣言と対＝これは「閉じた状態の箱」の
     見た目だけを直す。開いたときの選択肢一覧（ネイティブのポップアップ）は
     CSSで塗れないブラウザ機能なので、color-scheme 側で暗いモードに揃える。 */
  .pce-kind-select, .pce-align-select {
    height: 36px; padding: 0 26px 0 10px;
    border-radius: 8px;
    border: 1px solid color-mix(in srgb, var(--nb-text) 15%, transparent);
    background: var(--scroll);
    color: var(--nb-text);
    font: inherit; font-size: var(--fs-mini);
    cursor: pointer;
    /* 🔴🔴【2026-09-10・PM指摘・実測で確認】appearance:auto のままだと background/border/
       color は当たるのに、選択欄自身の縁取り・矢印だけはブラウザ自身が描く＝実測で
       .an2-compose-tool と computed style を突き合わせたところ、色系のプロパティは
       全て一致していた（差は appearance だけ）。周りのボタンと同じ面のはずなのに
       「よそから来た部品」に見えていた原因がこの1点。⇒ ネイティブ描画を止め、
       同じ線画の書式（stroke=currentColor・close×ボタンと同じ描き方）で矢印を
       自前で足す。 */
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='14' height='14' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
  }
  /* 🔴【2026-09-10・PM是正】固定の下部ナビが道具帯を覆い、元に戻す/やり直し等が
     押せなくなっていた（オーナー実機報告）。地図の浮くFABと同じ --app-chrome-bottom
     （spot-place-panel.ts が実測してrootへ書く。既定0pxなのでナビが無い/未測定でも
     元の余白のまま）を、この画面いちばん下の要素に足す＝ページ全体の
     スクロール可能な高さが伸び、道具帯もナビの上まで送れるようになる。 */
  .an2-compose-dock {
    padding: 10px 16px calc(24px + var(--app-chrome-bottom, 0px));
    display: flex; gap: 8px;
    max-width: 760px;
    margin: 0 auto;
  }
  .an2-compose-dock .an2-compose-pub { flex: 1; margin-inline-start: 0; }
  .an2-compose-draft-btn {
    height: 48px; padding: 0 16px;
    border-radius: 999px;
    border: 1.5px solid color-mix(in srgb, var(--boruto-ink) 35%, transparent);
    background: var(--nb-surface);
    color: var(--nb-text);
    font-size: var(--fs-note);
    font-weight: 600;
    cursor: pointer;
    flex: none;
  }

  /* 考察一覧フッタードック（591–611） */
  .an2-index-dock {
    position: sticky;
    bottom: 0;
    z-index: 2;
    padding: 10px 16px 24px;
    display: flex;
    /* 🔴 入らなければ1行下へ落とす（英語の札は日本語より長い。実測＝320px で 28.9px はみ出した）。
       ⚠️ 文字を小さくして逃げない。⚠️ 幅を決め打ちしない（言語で長さが変わる）。 */
    flex-wrap: wrap;
    gap: 8px;
    background: linear-gradient(180deg, color-mix(in srgb, var(--nb-surface) 0%, transparent), var(--nb-surface) 45%);
  }
  .an2-index-dock .an2-compose-pub {
    flex: 1;
    margin-inline-start: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    min-height: 48px;
  }
  .an2-index-dock .an2-compose-draft-btn {
    /* 1行に入るときは中身ぶん、落ちたときは横いっぱい。 */
    flex: 1 1 auto;
    min-width: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    min-height: 48px;
  }

  /* 暗い表示：作品感想（819–832） */
  /* 🔴 design/analyses-wireframe 86b56a5e §13-2/13-3。地は#1C1C1E寄り8%・見出しは
     --boruto-ink(#021824・暗い地に沈む)ではなく#EDEDF0（このファイルの暗い表示の地色相当）。 */
  :root[data-theme="dark"] .an2-hero-wrap {
    background: color-mix(in srgb, var(--boruto) 8%, #1C1C1E);
  }
  :root[data-theme="dark"] .an2-hero-h1 {
    color: #EDEDF0;
  }
  :root[data-theme="dark"] .an2-stream-inner {
    background: var(--nb-surface);
    border-inline-color: color-mix(in srgb, var(--nb-text) 15%, transparent);
  }
  :root[data-theme="dark"] .an2-voice-row {
    border-bottom-color: color-mix(in srgb, var(--nb-text) 15%, transparent);
  }
  :root[data-theme="dark"] .an2-voice-chap {
    background: color-mix(in srgb, var(--boruto-link) 16%, transparent);
    /* 🔴【WO-092・第4便 R5・P-1256】明るい表示用の濃いシアン（--boruto-dark）のままだと、暗い札の地の上で 1.49（PM 実測）。淡いシアンで 9.8（PM 計算）。 */
    color: var(--boruto-soft);
  }

/* =========================================================================
   Stories Hero (v2)
   ========================================================================= */
/* 🔴【A-19続き・2026-09-08・PM裁定】~~.v2-hero-band 系（中立名）~~ は撤去。/updates/ が
   これを使っていたのは A-19 の一環で撤去済み（.page-plain-header へ）。/stories/ 一覧は
   モックが実際にこの墨地マストヘッドを描いているため .stories-hero だけ残す（A-19の
   「ヒーロー全廃」指示は誤りだったと後日訂正・PM裁定）。 */
/* 🔴【椿さんご指摘・2026-09-22・第7便】余白は段の4つ（xs 8 / sm 16 / md 32 / lg 64）だけを使う。
   ⚠️ もとは上 0・左右と下が直書きの 16px で、題がオレンジの帯に貼り付いていた。 */
.stories-hero {
  background: var(--nb-band);
  color: var(--nb-band-ink);
  padding: var(--space-sm);
}
@media (min-width: 768px) {
  .stories-hero { padding: var(--space-md); }
}
.stories-hero-title {
  margin: 0;
  /* 🔴【PM 是正・2026-09-13】ここは `<h1>`＝**ページの大見出し**（規定の定義「例「プロフィール」
     「コレクション」」と同じ役目）。章の見出しを 24→20px に下げたとき、**この題まで小さくなる**
     ことに気づいたので、正しい段へ移した。⭐ 椿さんのモック（2026-09-11）でも 30〜34px。 */
  font-size: var(--fs-page);
  font-weight: 700;
  line-height: 1.2;
  color: var(--fire);
}
.stories-hero-lead {
  margin: var(--space-xs) 0 0;
  font-size: var(--fs-note);
  line-height: 1.6;
  color: var(--nb-band-ink);
  opacity: 0.75;
}


/* A-3: Story Read Screen (Dark Header) */
.story-header-dark {
  background: var(--nb-band);
  color: var(--nb-band-ink);
  /* 🔴【椿さんご指摘・2026-09-13】上の 48px は `.story-detail` から**ここへ移した**もの。
     ⚠️ `.story-detail` 側へ戻すと、オレンジのヘッダーと墨の帯の間に地色の帯が戻る。 */
  padding: 48px 16px 18px;
}
.story-header-nav {
  height: 54px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding: 0 12px 8px;
}
/* 🔴🔴【WO-rv2-A・Tier4是正・2026-09-08・PM裁定】枠も地も無い裸のボタンには押せる合図が
   無く、会員には押せることが伝わらない。シート通りの縁取り円（border 1.5px solid
   rgba(28,27,25,.2)・background #fff）を与える。この裏付けとなる過去の意図的コメントは
   見当たらなかった＝#5：帯用の例外として据え置く根拠が無いので一般形をそのまま適用する。
   ⚠️ `.story-header-dark` は常に暗い帯（--nb-band=--ink）なので、白い円が乗る見た目に変わる。
   🔴 文字色は `--nb-band-ink` から `--ink` へ変更＝`--nb-band-ink` は明暗どちらも #fff
   固定（帯の上の白文字用）なので、そのままだと白い円の中で白いアイコンが消える
   （実測で気づいた・アイコンは常に白地の円の上なので明暗トークンではなく固定の墨でよい）。 */
.story-nav-btn {
  width: 44px;
  height: 44px;
  border: 1.5px solid rgba(28, 27, 25, 0.2);
  background: var(--nb-band-btn-bg);
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--ink);
  cursor: pointer;
  padding: 0;
}
.story-author-info {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 4px;
  margin-inline-start: 4px;
}
.story-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 3px solid var(--fire);
  display: grid;
  place-items: center;
  font-weight: 900;
  font-size: var(--fs-sec);
  flex: none;
}
.story-author-meta {
  display: flex;
  flex-direction: column;
}
.story-author-name {
  font-size: var(--fs-body);
  font-weight: 900;
  line-height: 1.2;
}
.story-author-sub {
  font-size: var(--fs-mini);
  color: var(--nb-band-ink);
  opacity: 0.65;
  margin-top: 2px;
}
.story-catchphrase-dark {
  margin: 14px 0 0;
  font-size: var(--fs-page);
  font-weight: 700;
  line-height: 1.35;
  color: var(--fire);
  text-wrap: pretty;
}

.story-body-content {
  flex: 1;
  background: var(--scroll);
  padding: 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.story-body-content p {
  margin: 0;
  font-size: var(--fs-body);
  line-height: 1.9;
  text-wrap: pretty;
  color: var(--nb-text);
}
.story-body-content blockquote {
  margin: 0;
  padding: 12px 16px;
  border-inline-start: 3px solid var(--fire);
  background: var(--nb-card);
  font-size: var(--fs-body);
  line-height: 1.8;
  color: var(--nb-text);
}
.story-body-content .story-section {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
/* 🔴 I-49-c（B-14）＝旧「墨の札／オレンジの札」の色分け前提だった規則を撤去。
   黒地の付箋そのものが無くなった（:4349）ため、この個別上書きはもう要らない。 */

/* 体験談詳細: 紐付け申請・公式XフォローCTA（v2・global.css に1本） */
/* 🔴 I-49-b（B-14・PM裁定）＝箱(枠+角丸+黒地影)を撤去し、流れるブロックへ（上にヘアライン1本）。 */
.story-detail .follow-cta {
  margin: 32px 0 0;
  padding: 24px 0 0;
  background: none;
  border: 0;
  border-top: 1px solid var(--nb-hairline);
  border-radius: 0;
  box-shadow: none;
  text-align: center;
}
/* 🔴 I-49-b＝決まり0（明るい地の橙文字はコントラスト不足）。アイブロウは墨文字へ。 */
.story-detail .follow-cta-eyebrow {
  margin: 0 0 6px;
  color: var(--nb-text);
  font-size: var(--fs-mini);
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.story-detail .follow-cta-title {
  margin: 0 0 8px;
  color: var(--nb-text);
  font-size: var(--fs-sub);
  font-weight: 900;
  line-height: 1.4;
}
.story-detail .follow-cta-body {
  /* 🔴【WO-132】真ん中の案内の段落＝箱を文字の幅に縮めて真ん中へ（中の文字は左から）。 */
  margin: 0 auto 16px;
  width: fit-content;
  max-width: 100%;
  color: var(--nb-text);
  opacity: 0.7;
  font-size: var(--fs-note);
  line-height: 1.6;
}
/* 🔴 I-49-b＝tier②（線のみ・影なし）。オレンジ地に触れる瞬間(hover)は決まり0どおり墨文字。 */
.story-detail .follow-cta-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  background: none;
  color: var(--nb-text);
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  font-size: var(--fs-note);
  font-weight: 900;
  text-decoration: none;
  transition: background 0.15s;
}
.story-detail .follow-cta-button:hover {
  background: var(--fire);
  border-color: var(--fire);
  color: var(--ink);
}
@media (max-width: 600px) {
  .story-detail .follow-cta {
    padding: 20px 0 0;
  }
  .story-detail .follow-cta-title { font-size: var(--fs-body); }
  .story-detail .follow-cta-body { font-size: var(--fs-note); }
  .story-detail .follow-cta-button { font-size: var(--fs-note); padding: 10px 20px; }
}

/* 🔴 I-49-a（B-14・PM裁定）＝箱(枠+角丸)を撤去し、流れるブロックへ（上にヘアライン1本）。
   ボタンは共有.btn-primary(墨地+白文字+コマ割り影)からtier②（.btn-outline・線のみ）へ。 */
.story-detail .story-claim {
  margin: 32px 0 0;
  padding: 20px 0 0;
  background: none;
  border: 0;
  border-top: 1px solid var(--nb-hairline);
  border-radius: 0;
}
.story-detail .story-claim-btn,
.story-detail .story-claim-login { border-width: 1.5px; box-shadow: none; }
.story-detail .story-claim-title {
  margin: 0 0 6px;
  font-size: var(--fs-body);
  font-weight: 900;
  color: var(--nb-text);
}
.story-detail .story-claim-lead {
  margin: 0 0 14px;
  font-size: var(--fs-note);
  line-height: 1.6;
  color: var(--nb-text);
  opacity: 0.7;
}
.story-detail .story-claim-action {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}
.story-detail .story-claim-status {
  margin: 0;
  font-size: var(--fs-note);
  font-weight: 700;
  line-height: 1.6;
  color: var(--nb-text);
}

.story-detail .story-orig {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 8px;
  min-height: 44px;
}
.story-detail .story-orig-note {
  font-size: var(--fs-mini);
  color: var(--nb-text);
  opacity: 0.4;
}
.story-detail .story-orig-btn {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 0.3rem;
  border: 0;
  background: none;
  color: var(--fire);
  font: inherit;
  font-size: var(--fs-note);
  font-weight: 700;
  cursor: pointer;
}
.story-detail .story-orig-btn:hover {
  text-decoration: underline;
}
.story-detail .story-orig-btn:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}
[dir="rtl"] .story-detail .story-orig {
  flex-direction: row-reverse;
}

/* 🔴 発注書 A-4（2026-09-08）＝アプリの目印（`<html data-app="twa|ios|pwa">`）が付いたときの
   骨格の切り替え。判定・付与は BaseLayout.astro の nbApplyAppMode（is:inline）。
   ⚠️ 画面ごとに同じ内容を書かない＝この1ブロックだけで全ページに効かせる。 */
/* 🔴【WO-092・第9便・椿さん 2026-09-21】里マップのトップだけ、アプリでもフッターが残っていた。
   ■ 原因＝この規則が見ているのは `.foot` だけで、里マップのトップは別の札（`.sm-foot`）を使っている
     （SatoMapFooter.astro）。**名前が違うので、当たっていなかった。**
   ■ 椿さん＝「残っているように見えません。**なくて良いし。**」⇒ 他の画面と同じに消す。
   ⚠️ SatoMapFooter.astro の冒頭には「これは飾りではなく【必須】」と書いてあるが、その理由
     （非公式である旨の権利表記がフッターにしかない）は**ブラウザ版の話**。アプリでは 2026-09-08 の
     発注書 A-4 で**すべてのフッターを隠すと決めており**、里マップだけが札名の違いで取り残されていた。
     アプリでの権利表記は「このサイトについて」（`/about/`）が持つ。 */
html[data-app] .foot,
html[data-app] .sm-foot {
  display: none;
}
/* 🔴🔴【UAT第10便b・椿さんご指摘 2026-09-17／PM 実測で原因特定】**アプリで開くと、ページの最後に避け代が1つも無かった。**
   ■ 仕組み＝ページの最後の余白は「フッターが無いページは `main`」（BaseLayout.astro の `main:not(:has(~ footer))`）、
     「フッターが在るページはフッター」（`.foot`）が取る。ところがアプリでは上の規則で**フッターを隠すだけで、要素は残る**＝
     `main` 側は「フッターが在る」と判断して空けず、フッター側は隠れているので空かない。
   ■ 実測（390px・アプリの状態）＝マイページでミナトの裾 64px が丸ごとナビの裏／コレクションで 124px／
     里人の証の一覧で最後の1件の名前と日付 34px。
   ⇒ アプリで開いているときは、**`main` の最後にナビ（と帯）のぶんを空ける。**
   ⚠️ 除くもの＝
     ①プロフィールの地（`#mp2-shell`）を持つページ＝地をナビの裏まで伸ばすため、地の側で空ける（MemberProfileShell.astro）
     ②自分の最後の塊で既に空けているページ（`.dl`＝トップ／`.an2-chapters`＝作品感想／`.bt-stories`＝話数ページ）＝二重になる
   ⚠️ 除外は `:where()` で包む＝強さを足さない。包まないと `#mp2-shell` の id の強さが付き、
     地図の画面が自分で 0 にしている余白（BaseLayout.astro の `.nb-main--map-immersive`）を上書きしてしまう。 */
@media (max-width: 768px) {
  html[data-app] main:where(:not(:has(#mp2-shell, .dl, .an2-chapters, .bt-stories))) {
    padding-bottom: var(--bn-bottom-ui);
  }
}
html[data-app] [data-web-only] {
  display: none;
}
html[data-app] .sm-header {
  padding-top: env(safe-area-inset-top, 0px);
}
/* 🔴【2026-09-17・椿さんの iPhone 実機（20:29 のスクリーンショット）】時計の帯を `default` にしても、
   帯の下からヘッダーの高さあたりまで上ほど濃い曇りがかかり、ロゴと見出しがぼやけた。
   iOS 26 は、画面の上端に「画面に固定された色の付いた部品」（上端から 4px 以内・画面幅の 80% 以上・高さ 3px 以上）が
   在ればその色で塗り、無ければ曇りで塗る（開発者の実測記事2件で一致・Apple の公式文書には無い）。
   ⇒ アプリで開いたときだけ、ヘッダーと同じ色の帯を上端に固定する（ヘッダーは明暗どちらも同じ色）。
   🔴🔴【2026-09-17・第4回・Apple の一次資料】高さ 4px では効かなかった（椿さんの iPhone）。
     Apple の WebKit 技術者（https://bugs.webkit.org/show_bug.cgi?id=301756）＝色で塗るのは「fixed or sticky element near one of the edges」があるときだけ。
     WebKit のコード（LocalFrameView.cpp の fixedContainerEdges）＝上端から 4px 内側の点を調べ、そこに当たる固定の部品が
     画面幅の 90% 以上・薄すぎない・ほぼ不透明なら、その色で塗る。⇒ 4px の帯は「端ちょうど」かつ「薄すぎる」で数えられていなかった。
     ⇒ 高さを時計の帯の高さ（安全域）にする。時計の帯は `black-translucent`（BaseLayout.astro）で透明＝iPhone では 50px 前後になる。
   ⚠️ 疑似要素（::before）で作らない＝その点の調べに当たらない。`backdrop-filter` を付けない＝付けると曇りに戻る。
   ⚠️ 押せない・読み上げない・アプリ以外では出さない。 */
.nb-app-topedge {
  display: none;
}
html[data-app] .nb-app-topedge {
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: env(safe-area-inset-top, 0px);
  background: var(--fire);
  z-index: 2147483000;
  pointer-events: none;
}
/* 🔴【椿さん決定・2026-09-17】BORUTO のページはヘッダーがシアン（SatoMapHeader.astro）＝上端の帯も同じ判定式でシアンに。
   🔴【WO-092・第4便・P-1252】判定はヘッダーと同じ `body.work-tbv`（シアンは BORUTO TBV の話数ページだけ）。
   古い判定のままだと、フォーラムの2つの一覧でオレンジのヘッダーの上に帯だけシアンが出る（アプリ・PM 実測）。 */
body.work-tbv .nb-app-topedge {
  background: #00a3d6;
}
html[data-member-look] .nb-app-topedge {
  background: var(--look-ac-fill, var(--look-ac));
}

/* 🔴🔴【PM裁定・2026-09-10・4機能ページ抽出】体験談を書く欄（WO-011）。
   MemberProfileShell.astro の <style>（コンポーネント scoped）からここへ移した。
   ⚠️ **なぜ移すか**＝Astro はコンポーネントを描かないページにそのコンポーネントの
   <style> を一切配らない。この画面（.mp2-st-*）がプロフィール本体からもう一つの
   独立コンポーネント（体験談を書く単独ページ）へ切り出されると、本体を描かない側は
   このスタイル自体が消える（c8 がコレクションの着せ替え24種で実際に踏んだ形＝
   マークアップは残るのに規則が1つも当たらず、白紙のカードが並んだ）。
   ⚠️ **`--mp2-*` はプロフィールの着せ替え変数**（本体の `applyTheme()`/`applyLook()` が
   会員の選んだテーマに応じて `#mp2-shell` へ実行時に書き込む）。
   🔴🔴【2026-09-10・PM裁定・この節は実測に合わせて書き直した】**単独ページ（/stories/write/ 等）も
   `data-theme` を自分で立てる**＝会員のテーマは単独ページでも当たる。
   ⚠️ ~~「単独ページは着せ替えが実行されないのでフォールバックへ落ちる＝テーマに依存しない
   見た目になる」~~ は、**書かれた時点では本当だった**（`profile-themes.css` がまだ無かった）。
   ⭐ 誰も書き換えていないのに、外の世界が変わって古くなった記述。
   ⇒ サイト共通トークンへの落ち先は「テーマが一切動いていないとき」だけの**安全網**であって、
   単独ページの既定の見た目ではない。

   🔴🔴【同日・鎖の長さについて。前の説明は結果は合っていたが理由が違った】
   **実測＝`--mp2-sf:` の定義はこのリポジトリに1件も無い**（`MemberProfileShell.astro`・
   `global.css`・`collection.css`・`primitives.css` の4ファイルすべてで 0 件。
   比較＝`--mp2-cd:` はシェルに 19 件）。
   ⇒ `var(--mp2-sf, var(--mp2-cd, var(--nb-card)))` は**3段ではなく、1段目が死んだ2段**。
   `--mp2-sf` は毎回素通りする。**効いているのは真ん中の `--mp2-cd`（会員テーマの変数）。**
   ⚠️ かつて実際に起きた壊れ方（明るいテーマの会員 × 暗いモードの訪問者で文字が読めない）は
   **本物**。ただし原因は「段が少なかったこと」ではなく、**会員テーマの変数を挟まずに
   サイト共通トークンへ直行していたこと**。
   ⇒ 🔴 **これから足す規則は2段で書く**＝`var(<会員テーマの変数>, <サイト共通トークン>)`。
   **`--mp2-sf` を新しく足さない**（定義が無いので、書いても意味が無いうえに読む人を惑わす）。
   ⚠️ 落ち先は `--nb-*` の家族で揃える（PM が4レーンへ配った約束）。
   ⚠️ **未定義の変数を参照すると、その宣言は丸ごと無効になる**（この落とし穴自体は健在）。 */
#mp2-shell .mp2-st { margin-bottom: var(--space-md); }
#mp2-shell .mp2-st-hub {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin: 0 0 var(--space-sm);
  min-width: 0;
}
/* 🔴【UAT第8便⑪】入口は規定の部品（.btn-primary / .btn-secondary）へ。ここは幅の上限だけ残す。 */
#mp2-shell .mp2-st-hub .btn-primary,
#mp2-shell .mp2-st-hub .btn-secondary {
  max-width: 100%;
}
#mp2-shell .mp2-st-pub {
  margin: 0 0 var(--space-sm); padding: 0.5rem 0.7rem; font-size: var(--fs-note); font-weight: 700;
  color: var(--mp2-tx2, var(--nb-text-muted));
  /* 🔴🔴【2026-09-10・実測で訂正】`--mp2-sf` は「どのテーマにも定義が無い」既存の穴
     （上の注記参照）。⚠️ 最初 `var(--mp2-sf, var(--nb-card))` にしたが、実機で確認すると
     `--nb-card` はサイトの明暗モード（訪問者の設定）に追従する値で、**会員が選んだ
     プロフィールテーマの明暗とは無関係**＝会員が明るいテーマ（例：sakura）を選んでいても
     訪問者側が暗いモードだと `--nb-card` が暗い値を返し、テーマの文字色（明るいテーマの
     暗い文字）と衝突して読めなくなる（実測＝背景 rgb(38,38,42) に文字 #42222f）。
     ⇒ **先にテーマ自身の `--mp2-cd`（各テーマが必ず持つ地の色）へ落とし、それも無いとき
     だけサイト共通トークンへ落ちる**、の2段構えにした。これなら本体（テーマが効いている
     場所）ではテーマ自身の色に揃い、単独ページ（テーマが一切効かない場所）でだけ
     サイト共通トークンへ落ちる。 */
  background: var(--mp2-sf, var(--mp2-cd, var(--nb-card)));
  border-left: 3px solid var(--mp2-ac, var(--fire)); border-radius: var(--r-card);
}
#mp2-shell .mp2-st-leadin {
  margin: 0 0 0.35rem; font-size: var(--fs-note); font-weight: 700; color: var(--mp2-tx2, var(--nb-text-muted));
}
#mp2-shell .mp2-st-qs { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 0.6rem; }
@media (max-width: 860px) {
  #mp2-shell .mp2-st-qs { grid-template-columns: 1fr; }
}
#mp2-shell .mp2-st-q { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; }
#mp2-shell .mp2-st-q > span { font-size: var(--fs-note); font-weight: 700; color: var(--mp2-tx2, var(--nb-text-muted)); }
#mp2-shell .mp2-st-q select {
  min-height: var(--tap); font-size: var(--fs-body); padding: 0.3rem 0.5rem; max-width: 100%;
  border: 1px solid var(--mp2-hair, var(--hair)); border-radius: var(--r-input);
  background: var(--mp2-sf, var(--mp2-cd, var(--nb-card))); color: var(--mp2-tx, var(--text));
}
#mp2-shell .mp2-st-other {
  margin-top: 0.3rem; min-height: var(--tap); padding: 0.35rem 0.6rem; font-size: var(--fs-body);
  color: var(--mp2-tx, var(--text)); background: var(--mp2-cd, var(--nb-card));
  border: 2px solid var(--mp2-ln, var(--ink)); border-radius: var(--r-input); min-width: 0; width: 100%;
}
#mp2-shell .mp2-st-other:focus { outline: 2px solid var(--mp2-ac, var(--fire)); outline-offset: 1px; }
#mp2-shell .mp2-st-guess {
  font-size: var(--fs-mini); font-weight: 700; color: var(--mp2-ac, var(--fire));
  background: var(--mp2-acs, color-mix(in srgb, var(--fire) 18%, white));
  border-radius: var(--r-pill); padding: 0.1rem 0.5rem; align-self: flex-start;
}
#mp2-shell .mp2-st-head { font-size: var(--fs-body); font-weight: 800; margin: var(--space-md) 0 0.2rem; }
#mp2-shell .mp2-st-lead { margin: 0 0 0.4rem; font-size: var(--fs-note); color: var(--mp2-tx2, var(--nb-text-muted)); }
#mp2-shell .mp2-st-text {
  width: 100%; font-size: var(--fs-body); line-height: 1.8; padding: 0.6rem 0.7rem; resize: vertical;
  border: 1px solid var(--mp2-hair, var(--hair)); border-radius: var(--r-input);
  background: var(--mp2-sf, var(--mp2-cd, var(--nb-card))); color: var(--mp2-tx, var(--text));
  font-family: inherit;
}
#mp2-shell .mp2-st-catchphrase {
  width: 100%; box-sizing: border-box; font: inherit; margin-bottom: var(--space-sm);
  padding: 0.6rem 0.7rem; border: 1px solid var(--mp2-hair, var(--hair)); border-radius: var(--r-input);
  background: var(--mp2-sf, var(--mp2-cd, var(--nb-card))); color: var(--mp2-tx, var(--text));
}
/* 🔴【WO-102・2026-09-24】入力欄の案内文の色。指定が無いとブラウザの灰色（#757575）が出て、暗い面で 3.27（基準4.5）。
   欄の文字と同じ墨の70%＝欄の地がどちらの軸でも一緒に切り替わる。 */
#mp2-shell .mp2-st-catchphrase::placeholder,
#mp2-shell .mp2-st-text::placeholder {
  color: color-mix(in srgb, var(--mp2-tx, var(--text)) 70%, transparent);
  opacity: 1;
}
#mp2-shell .mp2-st-rules,
#mp2-shell .mp2-st-tpl {
  font-size: var(--fs-note);
  color: var(--mp2-tx2, var(--nb-text-muted));
  margin: 0 0 var(--space-sm);
}
#mp2-shell .mp2-st-tpl {
  padding-left: 1.3em;
}
#mp2-shell .mp2-st-photo-block {
  margin-bottom: var(--space-md);
  background: var(--mp2-sf, var(--mp2-cd, var(--nb-card)));
  border-radius: var(--r-card);
  /* 🔴【UAT第6便 ⑦・椿さんご指摘 2026-09-16】「画像を登録するだけインデントが長い」＝
     内側の余白が 32px（--space-md）あり、隣の書く欄（16px）と揃っていなかった。 */
  padding: var(--space-sm);
}
/* 🔴【UAT第6便 ⑤・椿さんご指摘 2026-09-16】欄の名前は節の見出しではないので本文の段（16px）。
   すき間も決まりの刻み（8px）に揃える（0.4rem＝6.4px・0.8rem＝12.8px はどちらも刻みの外）。 */
#mp2-shell .mp2-st-photo-label {
  display: flex; align-items: center; gap: var(--space-xs);
  font-size: var(--fs-body); font-weight: 700; color: var(--mp2-tx, var(--text));
  margin: 0 0 var(--space-xs);
}
#mp2-shell .mp2-st-photo-row {
  display: flex; align-items: center; gap: var(--space-xs);
}
#mp2-shell .mp2-st-icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border: none; border-radius: 50%;
  background: var(--mp2-acs, color-mix(in srgb, var(--fire) 18%, white)); color: var(--mp2-tx, var(--text)); cursor: pointer;
}
#mp2-shell .mp2-st-photo-preview {
  max-width: 100%; height: auto; display: block; border-radius: var(--r-card); margin-bottom: var(--space-xs);
}
#mp2-shell .mp2-st-act { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-xs); margin-top: var(--space-xs); }
#mp2-shell .mp2-st-pub-btn {
  padding: 0 22px; min-height: var(--tap-primary); font-size: var(--fs-body); font-weight: 700; color: #fff;
  /* P-1100＝白い字が乗るので**濃い版**（`--mp2-acd` は明度を 0.55 以下に抑えてある）。 */
  background: var(--mp2-acd, var(--fire-dark)); border: none; border-radius: var(--r-pill); cursor: pointer;
}
#mp2-shell .mp2-st-pub-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* 🔴🔴【PM裁定・2026-09-10・4機能ページ抽出】**公開済みの体験談カード**の見た目。
   `MemberProfileShell.astro` の <style is:global> からここへ移した（上の「書く欄」と同じ理由＝
   カードを組み立てる `renderStories()` は `src/lib/story-writer.ts` に在り、**単独ページでも走る**。
   シェル側に規則を置いたままだと、単独ページでは**素の文字列が並ぶ**）。
   ⚠️ セレクタは `#mp2-shell ` 接頭辞のまま＝**1文字も変えていない**。
   ⚠️ 落ち先は2段（会員テーマの変数 → `--nb-*`）。理由は上の注記。 */
/* 体験談＝中身も枠を外す＝「強い枠は名刺だけ」の続き。面だけ残す（濃い配色でも文字が読めるように）。 */
#mp2-shell .mp2-st { display: flex; gap: var(--space-sm); background: var(--mp2-cd, var(--nb-card)); border: none; padding: var(--space-sm); border-radius: var(--r-card); }
/* 🔴 【2026-08-12・実測で見つけた衝突】**書く欄と、出来上がった体験談は同じ名札（`mp2-st`）**。
   上の `display:flex` が書く欄にも当たるので、質問と本文が**横並びになって画面から溢れていた**。
   ⚠️ 気づけなかった理由＝書く欄は「体験談をまだ出していない人」に出るのに、その人には
      節ごと閉じていた（同日に直した）。**出るようになって初めて見えた崩れ。**
   ⇒ 書く欄（id）だけ縦積みに戻す。名札を分けないのは、他の指定（面・余白）を共有しているため。
   🔴 **この2行は順番に意味がある**＝`.mp2-st`（クラス）より `#mp2-st`（id）が強い、で成り立って
      いる。並べ替え・分割をしない。 */
#mp2-shell #mp2-st { display: block; }
#mp2-shell .mp2-st-txt { min-width: 0; }
#mp2-shell .mp2-st-cp { font-weight: 800; font-size: var(--fs-body); margin: 0 0 0.35rem; color: var(--mp2-tx, var(--nb-text)); }
#mp2-shell .mp2-st-meta { display: flex; justify-content: space-between; gap: 0.5rem; font-size: var(--fs-note); color: var(--mp2-tx2, var(--nb-text-muted)); flex-wrap: wrap; align-items: center; }
/* 🔴🔴 **この1行にだけ落ち先（フォールバック）を書かない。これは書き忘れではない。**
   （PM裁定・2026-09-10・下の実測を受けて「落ち先を足さない」で確定）

   ⚠️ **足すと、いまより読みにくくなる。**理由＝
   ① 落ち先を書かずに `--mp2-ac` が未定義だと、**CSS の規則ごと無効**になり、この文字は
      **周りの文字色を受け継ぐ**（読める色）。
   ② `var(--mp2-ac, <オレンジ>)` と書くと、その受け継ぎが**オレンジの指定に置き換わる**。
      ⇒ **落ち先が働く場面（テーマが動いていないとき）だけ、わざわざ読みにくくなる。**

   **実測（2026-09-10・宣言値から WCAG 比を計算）**＝この文字は `--fs-note`（14px）の太字。
   WCAG の「大きい文字」は 18.66px 以上の太字からなので、**合格ラインは 3:1 ではなく 4.5:1**。
     `--nb-action`（= `--fire` #FF7601）      明るい面(#fff) **2.68:1 不合格** ／ 暗い面(#26262A) 5.63:1
     `--nb-action-deep`（= `--fire-dark` #d95e00） 明るい面 **3.78:1 不合格** ／ 暗い面 **3.98:1 不合格**
   ⇒ **候補は2つとも落ちる。**しかも両方 `--fire` 系なので**明暗モードで色が変わらない**
     （比が動くのは背後の面が変わるからで、文字色は動いていない）。読める橙の札は今のところ無い。

   ⭐ **落ち先は「安全網」だが、安全なときだけ安全網。**そうでなければ、より高い所からの落下であり、
      **守っている顔をしているぶん、穴より危険。**
   🔴 だから「フォールバックが無い＝直し忘れ」と読んで足さないこと。足すなら先に
      **4.5:1 を満たす札を用意する**（4機能に関わるのでレーン単独で決めない）。 */
#mp2-shell .mp2-st-link { color: var(--mp2-ac); font-weight: 700; text-decoration: none; min-height: var(--tap); display: inline-flex; align-items: center; }
/* 🔴🔴 【WO-028・P-361/P-362/P-416/Q-319・2026-08-16・椿さんFIX】**左に写真／右にタイトルと
   本文の抜粋。**⚠️ `.mp2-st` は既に `display:flex` なので、写真の列を足すだけで
   「左写真・右テキスト」になる（HTML の並び順＝写真が先）。写真の無い体験談は
   `.mp2-st-photo` 自体を作らないので**従来の見た目のまま**（1バイトも変わらない）。
   ⚠️ **StoryCard.astro の `.mp-photo-card`/`.mp-photo`/`.mp-body` とは別名**
      （部品を共有しない・VoiceCard の教訓＝WO-026【5】）。
   ⚠️ **写真は切らない**＝`height:auto` のまま。縦長の投稿はカードごと縦に伸びる（仕様の帰結）。 */
#mp2-shell .mp2-st-photo {
  flex: 0 0 auto;
  width: 34%;
  max-width: 168px;
  min-width: 88px;
  border-radius: var(--r-card);
  overflow: hidden;
  /* ⚠️ 背景色をわざと持たない＝親 `.mp2-st` の背景がそのまま
     透けて見える（読み込み待ちの一瞬だけ使われる）。新しい変数を作らない。 */
}
#mp2-shell .mp2-st-photo img {
  display: block;
  width: 100%;
  height: auto;   /* 🔴 自然な縦横比のまま＝切らない */
}
@media (max-width: 720px) {
  /* 🔴 【WO-028・2026-08-16】スマホは横幅が無く並べられないので、写真を上・本文を下に積む
     （WO-026【5】の StoryCard.astro と同じ判断＝「切らない」原則は不変・構成は実装判断）。 */
  #mp2-shell .mp2-st.mp2-st-has-photo { flex-direction: column; }
  #mp2-shell .mp2-st.mp2-st-has-photo .mp2-st-photo { width: 100%; max-width: none; min-width: 0; }
}

/* 🔴🔴【PM裁定・2026-09-10・5つ目の切り出し】機能ページの**下の固定行**（`FeatureDock.astro`）。
   `MemberProfileShell.astro` の <style is:global> から**逐語で**移した。
   ⚠️ 移した理由は体験談の節と同じ＝この殻を描かないページには Astro が殻の <style> を配らない。
   ⚠️ セレクタに `#mp2-shell` は**元から付いていない**（付け足していない＝移設のみ）。
   ⚠️ `--mp2-*`（会員の着せ替え）は**元から使っていない**ので、落ち先の話はここには無い。 */
/* 🔴 機能ページ（体験談を書く 等）の固定行＝**下部ナビのすぐ上**（モックの決まり）。
   ⚠️ 561px の境目は `BottomNav.astro` の `@media (max-width: 560px)` と揃えている
      （下部ナビが出る幅だけ、そのぶん上へ逃がす）。**片方だけ変えない。**
   ⚠️ 色は札から取る。**予備の色を書かない**（値を2か所に持つと片方を直し忘れる）。 */
.mp2-feature-dock {
  position: fixed;
  bottom: calc(76px + env(safe-area-inset-bottom, 0px));
  left: 0;
  right: 0;
  background: var(--nb-surface);
  border-top: 1px solid var(--nb-hairline);
  z-index: 100;
  padding: 12px 16px;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
}
@media (min-width: 561px) {
  .mp2-feature-dock {
    bottom: 0;
  }
}
/* 🔴🔴【2026-09-10・実ブラウザで判明 → 同じ便で是正】**この帯は固定されていなかった。**
   シェルの <style> に在る `#mp2-shell > * { position: relative; z-index: 1 }` は **id を含む**ので
   強さ (1,0,0)。上の `.mp2-feature-dock`（クラス＝(0,1,0)）は**負ける**。
   ⇒ 実測（CDP `CSS.getMatchedStylesForNode`）で position:relative / z-index:1 が採用されており、
   帯はページの流れの中に置かれ、あとの内容が上に重なって
   **体験談の「公開する」が指で押せなかった**（390×780・座標 142,41）。
   ⚠️ **`#mp2-shell > *` の側を狭めて直さない**（PM裁定）＝あれはシェルの全ての子に効く重ね順の
      土台で、1件のために条件を狭めると、それに乗っている別の決定が黙って外れる。
      ⇒ **こちら側の強さを上げて（1,1,0）局所的に勝つ。**
   ⚠️ **`bottom` をここに書かない。**書くと、すぐ上の `@media (min-width: 561px)`（(0,1,0)）が
      負けて **PC 幅で下端に貼り付かなくなる**。⇒ 争っている2つ（position・z-index）だけ上書きする。
   ⭐ 同じ罠の先例がこのリポジトリに在る＝`origin/main` の `MemberProfileShell.astro:9513` に
      「`#mp2-shell > *` よりこのセレクタの方が強い」と明記した注記がある。**既に知られていた罠を、
      帯がもう一度踏んだ。**（読むだけでは見つからない＝強さは順番より先に効き、ソースには見えない） */
#mp2-shell > .mp2-feature-dock { position: fixed; z-index: 100; }
/* 🔴 発注書 A-3是正（2026-09-08・PM裁定）＝PC左レール撤去に伴い、避けるための
   left:92px（@media min-width:1024px）override を削除。 */
.mp2-feature-dock-inner {
  max-width: 960px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.mp2-feature-dock-acts {
  display: flex; gap: 8px; align-items: center; width: 100%;
}
/* 🔴【UAT第6便 ⑧・椿さんご指摘 2026-09-16】「公開するボタンが長過ぎる」＝`flex: 1` で
   帯の残り幅を全部埋めていた。⇒ 文字なりの幅にして、帯の右端へ寄せる
   （`margin-inline-start: auto` だけを使う＝親の並べ方を変えないので、
    同じ帯を使う他の機能ページ（コレクション・行った場所）に影響しない）。 */
.mp2-feature-dock-acts #mp2-st-pub { margin-inline-start: auto; height: var(--tap-primary); min-height: var(--tap-primary); padding: 0 22px; }
.mp2-feature-dock-acts #mp2-dock-save { height: var(--tap-primary); min-height: var(--tap-primary); padding: 0 14px; }
/* ⚠️ 文字の大きさは6段（32・24・20・16・14・12）から取る。書体も継ぐ（家名を書かない）。 */
.mp2-feature-btn-sub {
  min-height: var(--tap);
  padding: 0 20px;
  border-radius: var(--r-pill);
  background: transparent;
  border: 1px solid var(--nb-text);
  color: var(--nb-text);
  font: inherit;
  font-size: var(--fs-note);
  font-weight: 700;
  cursor: pointer;
}
/* ⚠️ `--nb-text-light` という札は存在しない（書いても効かず、予備の色が出るだけ）。
   控えめな文字は `--nb-text-muted`。 */
.mp2-feature-dock .mp2-save-msg {
  font-size: var(--fs-note);
  color: var(--nb-text-muted);
  flex: 1;
}

/* ══════ 下部ナビの避け代（流れる面の下だけ）══════════════════════════════
   🔴🔴【椿さんご決定・2026-09-15】逐語＝「よけしろはい、タイムラインの最後の行の下だけ。」
   ■ 何を直すか＝一覧の最後まで読んだ位置で、**最後の投稿の「いいね」「シェア」が
     下部ナビの帯に入り、押せない**（PM 実測＝`elementFromPoint` で `pressable:false`）。
   ■ 🔴 **`main` 全体には付けない。**`src/layouts/BaseLayout.astro` の
     `main:not(:has(~ footer))` は **2026-09-10 に椿さんが直させた別の不具合**
     （本文とフッターの間に帯が戻る）を防ぐ条件で、`tests/wo087-bottom-nav.test.mjs` が
     名指しで要求している。**あの条件は触らない。**
   ■ ⇒ **流れる面の下端にだけ**ナビのぶんの空きを置く＝
     ①トップの活動タイムライン（`.dl`）②作品感想の画面の最後の塊（`.an2-chapters`＝話数を選ぶ）
     ③話数ページ末尾の「BORUTO起点の体験談をもっと読む」（`.bt-stories`）。
   ⚠️ 避け代の値は `--bn-nav-clearance`（`:root`）1か所から引く。**数字を書き写さない**
     （ナビの高さを変えた人が1か所で直せる）。
   ⚠️ ナビが出るのは 768px 以下だけ。**広い幅では付けない**（PC には下部ナビが無い）。
   ══════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .dl { padding-bottom: var(--bn-nav-clearance); }
  /* 🔴🔴【UAT第9便⑮・椿さんご指摘 2026-09-17／PM 実測で原因特定】
     ~~`.an2-voice-list`~~ ⇒ **`.an2-chapters`**（その画面の本当に最後の塊）へ移した。
     ⚠️ `.an2-voice-list` はサイト内に1か所（BorutoChapterListView.astro:181）しか無く、
        そこでは後ろに「もっと見る」と「話数を選ぶ」が**必ず続く**＝**一度も最後ではなかった。**
     ⇒ 避け代が一覧の内側に入り、「もっと見るの上に無地の枠が1枚ある」ように見えていた。
     ⭐ 椿さんのご決定（2026-09-15）「よけしろはタイムラインの最後の行の下だけ」のとおりに戻す。 */
  .an2-chapters { padding-bottom: var(--bn-nav-clearance); }
  .bt-stories { padding-bottom: var(--bn-nav-clearance); }
}