/*
 * YURAI ／ Insight 記事の誌面（Editorial surface）
 *
 * 読む順は tokens.css → base.css → lp.css → このファイル。
 * **sections.css は読まない**（旧セクションの見た目しか入っておらず、
 * 新デザインとは競合するだけ）。
 *
 * 使うのは lp.css の**役割トークン**（--background / --foreground / --muted /
 * --subtle / --surface / --surface-2 / --border / --border-soft / --accent）と
 * レイアウト変数（--m-gut / --m-pad / --m-nav-h / --m-r）だけ。
 * **新しい色を作らない。** 面（.m-paper / .m-dark）を着せれば自動で追随する。
 *
 * lp.css へは書かない。あれは tools/port_lp.py の生成物で、手で足したルールは
 * 次の実行で消え、tests/test_lp_integration.py が赤くなる。
 *
 * base.css の要素セレクタが新LPでも生きていることに注意（実測）：
 *   h2/h3 は clamp と旧藍 #12203a と 700 を持っている → 必ず上書きする
 *   a:hover は #c8102e を持っている（詳細度で lp.css に勝つ）→ 明示的に書く
 *   body の font-size / line-height / background は lp.css が後勝ちしている
 *
 * CSP `style-src 'self'` を維持するため、HTML 側に style 属性を書かない。
 */

/* ═══════════════════════════════════════════════════════════
   記事の骨格

   新LPに中央寄せコンテナは無い（.m-sec はガター付きの全幅）。
   **読み幅は記事側で作る。**
   ═══════════════════════════════════════════════════════════ */

/* **変数は記事と締めCTAの両方に置く。**
   締めCTAは `<article class="m-ed">` の**兄弟**なので、`.m-ed` にだけ
   定義すると CTA 側で `var(--m-ed-col)` が未定義になり、`max-width` が
   まるごと無効（＝`none`）になる。実測で気付いた：CTAの文が本文の縦線に
   乗らず、全幅（1198px）に広がっていた。 */
.m-ed,
.m-ed__cta {
  /* **単位は rem。** em だと h1（大きい字）と本文（小さい字）で同じ指定から
     違う幅が出て、左端が縦に揃わない。 */
  /* LPの紙面本文は 17.92px / 33字。**読ませるページの方が字が小さく行が長い**
     状態にしない。1280 で 17.28px / 656px ＝ 約38字。 */
  --m-ed-col: 41rem;      /* 656px */
  --m-ed-wide: 54rem;     /* 864px。図解と表だけ少し外へ出す */
  --m-ed-fs: clamp(16px, 1.35vw, 18px);
  /* 見出しへ飛ぶ回数が多いので、逃げ幅は**実測のヘッダ高**に合わせる。
     :root の --m-nav-h を書き換えると .m-hero の min-height 式まで動くので、
     記事のスコープに閉じる。1080px 以下でヘッダは2段になる（実測 117px）。 */
  --m-ed-nav: 69px;
}

.m-ed { display: block; }

.m-ed__top {
  padding-bottom: clamp(20px, 2.6vw, 34px);
}

.m-ed__top > * {
  max-width: var(--m-ed-col);
  margin-left: auto;
  margin-right: auto;
}

.m-ed__top h1 {
  margin-top: clamp(12px, 1.6vw, 20px);
  font-size: clamp(27px, 3.2vw, 44px);
  line-height: 1.4;
  font-weight: 600;                 /* base.css の 700 を下げる */
  letter-spacing: -.02em;
  color: var(--foreground);         /* base.css の旧藍 #12203a を上書き */
  text-wrap: pretty;
}

.m-ed__byline {
  margin-top: clamp(14px, 1.6vw, 20px);
  padding-top: clamp(12px, 1.4vw, 16px);
  border-top: 1px solid var(--border-soft);
  font-size: 12px;
  letter-spacing: .04em;
  color: var(--subtle);
}

.m-ed__byline time { font-variant-numeric: tabular-nums; }

/* 本文は1本の列に揃え、画面の中央に置く */
.m-ed__body > * {
  max-width: var(--m-ed-col);
  margin-left: auto;
  margin-right: auto;
}

/* ═══════════════════════════════════════════════════════════
   本文のリズム
   ═══════════════════════════════════════════════════════════ */

/* **地の文は「本文カラムの直下」だけを対象にする。**
   `.m-ed__body p` と広く書くと、詳細度 (0,1,1) が図解の部品
   （`.m-win__t` などは (0,1,0)）に勝ち、**濃紺の窓の中の文字まで
   --muted に塗り替えて読めなくなる**（実測：#444a6b が #0d0d52 の上で 1.6:1）。
   同じ理由でリスト・強調・リンクも直下に限る。 */
.m-ed__body > p {
  margin-top: 1.35em;
  font-size: var(--m-ed-fs);
  line-height: 1.98;
  color: var(--muted);              /* 紙の上 7.90:1。新LPが本文に使う段 */
}

.m-ed__lead > p {
  margin-top: 1.1em;
  font-size: calc(var(--m-ed-fs) + 1px);
  line-height: 1.98;
  color: var(--foreground);
}

.m-ed__lead > p:first-child { margin-top: 0; }

.m-ed__body > p b,
.m-ed__body > p strong,
.m-ed__body > ul > li b,
.m-ed__body > ol > li b,
.m-ed__lead > p b,
.m-ed-key > p b,
.m-ed-caveat > p b {
  font-weight: 700;
  color: var(--foreground);         /* 強調は濃さで言う。**赤にしない** */
}

/* 本文のリンク。base.css の `a:hover{color:#c8102e}` が詳細度で勝つので、
   明るい面では明示的に書く。 */
.m-ed__body > p a,
.m-ed__body > ul > li a,
.m-ed__body > ol > li a,
.m-ed__lead > p a {
  color: var(--p-brand);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.m-ed__body > p a:hover,
.m-ed__body > ul > li a:hover,
.m-ed__body > ol > li a:hover,
.m-ed__lead > p a:hover { color: var(--accent); }

/* ── 節見出し ─────────────────────────────────
   .m-h2（最大 58px）は使わない。9節に58pxが9回出ると、記事が
   「LPが9個縦に並んだもの」に見える。 */

.m-ed__body { counter-reset: m-ed-sec; }

.m-ed__body h2 {
  counter-increment: m-ed-sec;
  margin-top: clamp(52px, 6vw, 78px);
  padding-top: clamp(20px, 2.2vw, 26px);
  border-top: 1px solid var(--border-soft);
  /* vw を 3.4 にしてある。2.1vw だと 768px で床（21px）に落ち、本文の
     1.31倍しかなくなって節見出しが本文に埋もれた（実測）。 */
  font-size: clamp(21px, 3.4vw, 30px);
  line-height: 1.5;
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--foreground);
  text-wrap: pretty;
  scroll-margin-top: calc(var(--m-ed-nav) + 20px);
}

/* 節番号は .m-eyebrow と同じ仕様（11px / 700 / .24em / accent）。
   数字はゴシックへ戻す（明朝の数字は本文の中で浮く）。 */
.m-ed__body h2::before {
  content: counter(m-ed-sec, decimal-leading-zero);
  display: block;
  margin-bottom: 9px;
  font-family: var(--yu-gothic);
  font-feature-settings: normal;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .24em;
  color: var(--accent);
}

.m-ed__body h3 {
  margin-top: 2.1em;
  font-size: clamp(17px, 1.6vw, 20px);
  line-height: 1.55;
  font-weight: 600;
  color: var(--foreground);
  scroll-margin-top: calc(var(--m-ed-nav) + 20px);
}

.m-ed__body > h2 + p,
.m-ed__body > h3 + p { margin-top: .9em; }

/* ── リスト ─────────────────────────────────
   lp.css と base.css が list-style と padding を消しているので戻す。
   **本文カラムの直下だけを対象にする。** 広く書くと図解や目次の中の
   リストにも点が付き、あとから none を書いても詳細度で勝てない。 */

.m-ed__body > ul,
.m-ed__body > ol {
  margin-top: 1.2em;
  padding-left: 1.4em;
}

.m-ed__body > ul { list-style: disc; }
.m-ed__body > ol { list-style: decimal; }

.m-ed__body > ul > li,
.m-ed__body > ol > li {
  margin-top: .55em;
  padding-left: .2em;
  font-size: var(--m-ed-fs);
  line-height: 1.9;
  color: var(--muted);
}

.m-ed__body > ul > li::marker,
.m-ed__body > ol > li::marker { color: var(--subtle); }

/* ═══════════════════════════════════════════════════════════
   目次（tools/build_insights.py が h2 から作る）

   **カードにしない。** 新デザインは角丸のカードを並べない。
   罫のリスト（.m-guide__toc と同じ文法）で置く。
   ═══════════════════════════════════════════════════════════ */

.m-ed-toc {
  max-width: var(--m-ed-col);
  margin: clamp(30px, 3.4vw, 44px) auto 0;
}

.m-ed-toc__h {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .24em;
  color: var(--subtle);
}

.m-ed-toc__list {
  margin-top: clamp(8px, 1vw, 14px);
  padding-left: 0;
  list-style: none;
  border-top: 1px solid var(--border);
}

.m-ed-toc__list li {
  margin-top: 0;
  display: grid;
  grid-template-columns: 2.4em minmax(0, 1fr);
  align-items: baseline;
  border-bottom: 1px solid var(--border-soft);
}

/* **最終行の罫を消す。** 直後の h2 も上罫を引くので、
   罫・空白104px・罫 の並びになって孤立した線に見える（実測）。 */
.m-ed-toc__list li:last-child { border-bottom: 0; }

.m-ed-toc__list a {
  grid-column: 2;
  display: block;
  padding: clamp(9px, .9vw, 12px) 0;
  font-size: clamp(14.5px, 1.35vw, 16.5px);
  line-height: 1.6;
  color: var(--foreground);
}

.m-ed-toc__list a:hover { color: var(--accent); }

.m-ed-toc__n {
  grid-column: 1;
  padding-top: clamp(10px, 1.2vw, 14px);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--subtle);
  font-variant-numeric: tabular-nums;
}

/* ═══════════════════════════════════════════════════════════
   引き立て（要点・限界）

   **囲わない。赤い面を作らない。**
   紙(#f7f5ef)と白(#fff)の差は 1.09:1 で境目が見えないので、面では言えない。
   左の3px罫で言う（.m-step[data-human] と同じ文法）。
   赤は「AI」ロゴと要確認マーカーだけ（docs/BRAND.md §4）。
   ═══════════════════════════════════════════════════════════ */

.m-ed-key,
.m-ed-caveat {
  max-width: var(--m-ed-col);
  margin: 1.9em auto 0;
  padding: clamp(14px, 1.6vw, 20px) 0 clamp(14px, 1.6vw, 20px) clamp(16px, 1.8vw, 24px);
}

.m-ed-key { border-left: 3px solid var(--foreground); }

/* 限界の話は「別の種類の話」。**赤ではなく破線で言う。** */
.m-ed-caveat { border-left: 3px dashed var(--border); }

.m-ed-key__k {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .2em;
  color: var(--subtle);
  margin-bottom: 10px;
}

.m-ed-key > p,
.m-ed-caveat > p {
  margin-top: 0;
  font-size: var(--m-ed-fs);
  line-height: 1.9;
  color: var(--foreground);
}

.m-ed-key > p + p,
.m-ed-caveat > p + p { margin-top: .85em; }

.m-ed-caveat > p { color: var(--muted); }

.m-ed-note {
  max-width: var(--m-ed-col);
  margin: 1.5em auto 0;
  font-size: 12.5px;
  line-height: 1.85;
  color: var(--subtle);
}

/* ═══════════════════════════════════════════════════════════
   図解

   器は lp.css の .m-fig（--surface ＋ 1px --border-soft ＋ --m-r）。
   キャプションは .m-fig__c（図の上・下に罫）。
   **画像を使わない。** HTML と CSS だけで組み、375px では縦に積む。
   矢印はインライン SVG。CSS の rotate は prefers-reduced-motion で
   base.css の transform:none!important に消される（svg は除外されている）。
   ═══════════════════════════════════════════════════════════ */

.m-ed-fig {
  max-width: var(--m-ed-wide);
  margin: clamp(26px, 3vw, 40px) auto 0;
}

.m-ed-arrow {
  display: flex;
  justify-content: center;
  margin: clamp(6px, .8vw, 10px) 0;
  color: var(--subtle);
}

.m-ed-arrow svg { display: block; }

/* ── 図1：業務の流れ ───────────────────────────── */

.m-ed-flow__band {
  padding-left: clamp(12px, 1.4vw, 18px);
  border-left: 3px solid transparent;
}

/* AI が担う範囲は破線で囲みの代わりにする（面を塗らない） */
.m-ed-flow__band--ai { border-left-color: var(--border); border-left-style: dashed; }

.m-ed-flow__band--rule { border-left-color: var(--border); }

/* **光っているのは人のほう。** 3px の実線＋accent は
   「人が決める／要確認」のための印（lp.css の .m-step[data-human] と同じ）。 */
.m-ed-flow__band--human { border-left-color: var(--accent); }

.m-ed-flow__k {
  font-size: 11px;
  font-weight: 400;
  letter-spacing: .1em;
  color: var(--subtle);
  margin-bottom: 9px;
}

.m-ed-flow__k b { font-weight: 700; color: var(--foreground); letter-spacing: .16em; }

/* **AIの担当範囲を赤で言わない。** 同じ図の中で「人が決める」の帯に
   赤の3px罫を使っている（LP の .m-step[data-human] と同じ印）。
   1つの図で赤が2つの意味を持つと、印としての意味が消える。
   AIの範囲は破線の罫とラベルの語で言う。 */

.m-ed-flow__steps {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-left: 0;
  list-style: none;
}

.m-ed-flow__steps li {
  margin-top: 0;
  flex: 1 1 150px;
  padding: clamp(9px, 1vw, 12px) clamp(10px, 1.1vw, 14px);
  font-size: clamp(12.5px, 1.1vw, 14px);
  line-height: 1.55;
  color: var(--muted);
  background: var(--surface-2);
  border: 1px solid var(--border-soft);
  border-radius: var(--m-r);
}

.m-ed-flow__steps li b {
  display: block;
  margin-bottom: 3px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--subtle);
  font-variant-numeric: tabular-nums;
}

.m-ed-flow__band--human .m-ed-flow__steps li {
  background: var(--p-brand);
  border-color: var(--p-brand);
  color: #fff;
}

/* 濃紺の上の小さい文字。**パレット値を手打ちしない**（LP側の色を変えても
   記事が追随しなくなる）。白の不透明度で言う。 */
.m-ed-flow__band--human .m-ed-flow__steps li b { color: rgba(255, 255, 255, .72); }

/* ── 図2：候補が絞れないとき ─────────────────────── */

.m-ed-fork { text-align: center; }

.m-ed-fork__in {
  display: inline-block;
  padding: clamp(9px, 1vw, 12px) clamp(12px, 1.4vw, 18px);
  font-size: clamp(12.5px, 1.1vw, 14px);
  line-height: 1.55;
  color: var(--foreground);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--m-r);
}

.m-ed-fork__cands {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-top: 0;
  padding-left: 0;
  list-style: none;
}

.m-ed-fork__cands li {
  margin-top: 0;
  flex: 1 1 160px;
  max-width: 15rem;
  padding: clamp(10px, 1.1vw, 13px) clamp(10px, 1.1vw, 14px);
  font-size: clamp(12px, 1.05vw, 13.5px);
  line-height: 1.55;
  text-align: left;
  color: var(--muted);
  /* **破線＝まだ決まっていない。** 実線で囲むと確定して見える。 */
  border: 1px dashed var(--border);
  border-radius: var(--m-r);
}

.m-ed-fork__cands li b {
  display: block;
  margin-bottom: 3px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--subtle);
}

.m-ed-fork__win {
  max-width: 26rem;
  margin: 0 auto;
  text-align: left;
}

/* ═══════════════════════════════════════════════════════════
   表

   新LPに table の規定は1行も無い。台帳の文法（2px の天 ＋ 1px の行罫 ＋
   囲わない）で組む。価格の専用イディオム（大きな明朝）は使わない。
   ═══════════════════════════════════════════════════════════ */

.m-ed-tablewrap {
  max-width: var(--m-ed-wide);
  margin: clamp(24px, 2.6vw, 34px) auto 0;
  overflow-x: auto;
}

.m-ed-table {
  width: 100%;
  min-width: 30rem;
  border-collapse: collapse;
  font-size: clamp(13px, 1.15vw, 14.5px);
  border-top: 2px solid var(--foreground);
  text-align: left;
}

.m-ed-table th,
.m-ed-table td {
  padding: clamp(11px, 1.2vw, 15px) clamp(10px, 1.1vw, 14px);
  text-align: left;
  vertical-align: top;
  line-height: 1.75;
  border-bottom: 1px solid var(--border-soft);
}

.m-ed-table thead th {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .16em;
  color: var(--subtle);
  border-bottom-color: var(--border);
}

.m-ed-table tbody th {
  width: 30%;
  font-weight: 700;
  color: var(--foreground);
}

.m-ed-table td { color: var(--muted); }

/* 段の連番。**LP の .m-step__n と同じ灰色にする。**
   LPは同じ4段を --subtle で組んでいる。記事だけ赤にすると、
   「赤はAIロゴと要確認の印だけ」（docs/BRAND.md §4）から外れる。 */
.m-ed-table__n {
  display: block;
  margin-bottom: 5px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .16em;
  color: var(--subtle);
  font-variant-numeric: tabular-nums;
}

/* ═══════════════════════════════════════════════════════════
   締めのCTA（面を反転して「読み終わり」を言う）
   ═══════════════════════════════════════════════════════════ */

.m-ed__cta > * {
  max-width: var(--m-ed-col);
  margin-left: auto;
  margin-right: auto;
}

/* .m-h2 の max-width: 22em を本文の列に合わせる */
.m-ed__cta .m-h2 {
  max-width: var(--m-ed-col);
  font-size: clamp(23px, 2.6vw, 36px);
}

.m-ed__cta-lede {
  margin-top: clamp(14px, 1.6vw, 22px);
  font-size: var(--m-ed-fs);
  line-height: 1.9;
  color: var(--muted);
}

.m-ed__cta-acts {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: clamp(22px, 2.6vw, 34px);
}

/* ═══════════════════════════════════════════════════════════
   図解その3：2つのやり方を並べる（.m-ed-vs）

   「全部ひとつに任せる」と「役割を分ける」を左右に置く。
   **赤で×を書かない。** 危ない側は面を沈めるだけにして、読む人が
   自分で比べられるようにする（断定の記号を足すと図が主張になる）。
   狭い画面では縦に積む。**左が上**（危ない側→分けた側の順で読ませる）。
   ═══════════════════════════════════════════════════════════ */

.m-ed-vs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(16px, 2.2vw, 30px);
}

.m-ed-vs__side {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.m-ed-vs__k {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--subtle);
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border-soft);
}

.m-ed-vs__k--risk { color: var(--muted); }

/* ひとつの箱に仕事が全部入っている絵。**中の順番を見せない**
   （順番が見えないことがこの図の言いたいこと）。 */
.m-ed-vs__box {
  margin-top: 12px;
  padding: clamp(14px, 1.6vw, 20px);
  background: var(--surface-2);
  border: 1px solid var(--border-soft);
  border-radius: var(--m-r);
}

.m-ed-vs__ai {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--muted);
}

.m-ed-vs__jobs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
}

.m-ed-vs__jobs li {
  padding: 5px 10px;
  background: var(--p-white);
  border: 1px solid var(--border-soft);
  border-radius: var(--m-r);
  font-size: 13px;
  line-height: 1.6;
  color: var(--muted);
}

/* 返ってきた1文。**引用の形で見せる**（もっともらしいことが要点なので、
   否定の記号を添えずにそのまま置く）。 */
.m-ed-vs__quote {
  padding: 10px 14px;
  border-left: 2px solid var(--border);
  font-size: 13.5px;
  line-height: 1.8;
  color: var(--foreground);
}

.m-ed-vs__out {
  margin-top: 12px;
  font-size: 13px;
  line-height: 1.8;
  color: var(--muted);
  text-wrap: pretty;
}

.m-ed-vs__out b { color: var(--foreground); }

.m-ed-vs__risks {
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
}

.m-ed-vs__risks li {
  position: relative;
  padding-left: 15px;
  font-size: 13px;
  line-height: 1.85;
  color: var(--muted);
  text-wrap: pretty;
}

.m-ed-vs__risks li + li { margin-top: 4px; }

/* 短い横棒。**赤の点にしない**（危ない側を記号で断じない）。 */
.m-ed-vs__risks li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .95em;
  width: 8px;
  height: 1px;
  background: var(--border);
}

/* 分けた側の流れは既存の .m-ed-flow を使う。**新しい絵の言葉を増やさない。**
   ただし列が狭いので、帯の中の段だけ詰める。 */
.m-ed-vs .m-ed-flow { margin-top: 12px; }
.m-ed-vs .m-ed-flow__steps li { flex: 1 1 100%; }

/* 案内窓は列の幅いっぱいに置く。既定の中央寄せのままだと、上の一覧と
   左端が揃わない（実測 30px 内側に入った）。 */
.m-ed-vs .m-ed-fork__win {
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}

/* ── 候補の一覧（.m-ed-cand）───────────────────────────
   「値」と「それがどこにあったか」を並べる。**値を強く、意味を弱く**
   置く（この図の言いたいことは、値が読み取りの結果だということ）。 */

.m-ed-cand {
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}

.m-ed-cand li {
  display: grid;
  grid-template-columns: 4.6em auto minmax(0, 1fr);
  align-items: baseline;
  gap: 4px 10px;
  padding: 9px 12px;
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--m-r);
  font-size: 13px;
  line-height: 1.7;
}

.m-ed-cand li + li { margin-top: 5px; }

.m-ed-cand__n {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--subtle);
  font-variant-numeric: tabular-nums;
}

.m-ed-cand__v {
  font-weight: 600;
  font-size: 15px;
  color: var(--foreground);
  font-variant-numeric: tabular-nums;
}

.m-ed-cand__p { color: var(--subtle); font-size: 12px; }

/* 意味づけの側は列を2つに畳む（位置は左の表にしか無い） */
.m-ed-cand--map li { grid-template-columns: 4.6em minmax(0, 1fr); }

.m-ed-cand--map .m-ed-cand__v {
  font-size: 14px;
  font-weight: 600;
}

/* ═══════════════════════════════════════════════════════════
   図解その4：基準が変わったとき、どこを直すか（.m-ed-swap）

   4段のうち**1段だけが濃く**なる。直す場所が1つだと分かれば図の役目は済む。
   ═══════════════════════════════════════════════════════════ */

.m-ed-swap__in {
  padding: clamp(12px, 1.4vw, 16px) clamp(14px, 1.6vw, 20px);
  background: var(--surface-2);
  border: 1px solid var(--border-soft);
  border-radius: var(--m-r);
  font-size: 14px;
  line-height: 1.7;
  color: var(--foreground);
  text-align: center;
}

.m-ed-swap__rows {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* 3列を明示する。**匿名のテキストを段に混ぜない**（`<b>` と地の文と
   タグの3つが2列に入り、タグが次の行へ落ちた）。 */
.m-ed-swap__rows li {
  display: grid;
  grid-template-columns: minmax(0, 13em) minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 6px clamp(12px, 1.6vw, 24px);
  padding: clamp(11px, 1.2vw, 15px) clamp(12px, 1.4vw, 18px);
  border: 1px solid var(--border-soft);
  border-radius: var(--m-r);
  font-size: 14px;
  line-height: 1.7;
  color: var(--muted);
}

.m-ed-swap__rows li + li { margin-top: 6px; }

.m-ed-swap__rows b {
  font-weight: 600;
  color: var(--foreground);
}

.m-ed-swap__what { color: var(--muted); }

.m-ed-swap__tag {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--subtle);
  white-space: nowrap;
}

/* 直す1段。**濃紺の面**で言う（赤は使わない）。 */
.m-ed-swap__rows li.m-ed-swap__row--edit {
  background: var(--p-brand);
  border-color: var(--p-brand);
  color: #d9dcf5;
}

.m-ed-swap__rows li.m-ed-swap__row--edit b { color: var(--p-white); }
.m-ed-swap__rows li.m-ed-swap__row--edit .m-ed-swap__what { color: #d9dcf5; }
.m-ed-swap__rows li.m-ed-swap__row--edit .m-ed-swap__tag { color: #b9bdf0; }

/* ═══════════════════════════════════════════════════════════
   現在の位置（.m-ed-crumb）

   **記事の顔を汚さない。** 赤の eyebrow より弱く、題よりずっと弱く。
   区切りの記号は CSS で足す（文字として書くと読み上げに混ざる）。
   狭い画面では折り返して読ませる。**省略記号で切らない**
   （切ると、どのページに居るのかが分からなくなる）。
   ═══════════════════════════════════════════════════════════ */

.m-ed-crumb {
  margin-bottom: clamp(10px, 1.2vw, 16px);
  font-size: 11.5px;
  line-height: 1.7;
  letter-spacing: .02em;
}

.m-ed-crumb ol {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.m-ed-crumb li { color: var(--subtle); }

/* いま見ているページ。**リンクにしない。** */
.m-ed-crumb li[aria-current="page"] {
  color: var(--muted);
  max-width: 100%;
  overflow-wrap: anywhere;
}

.m-ed-crumb li + li::before {
  content: "\203A";                 /* › */
  margin-right: 6px;
  color: var(--border);
}

.m-ed-crumb a {
  color: var(--subtle);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.m-ed-crumb a:hover {
  color: var(--p-brand);
  border-bottom-color: var(--border);
}

/* ═══════════════════════════════════════════════════════════
   記事の足元：一覧へ戻る

   **CTAより弱く見せる。** 次に見てほしいのは下の締めCTAで、これは
   「他にもある」と分かればよい文字リンク。
   ═══════════════════════════════════════════════════════════ */

.m-ed__back {
  max-width: var(--m-ed-col);
  margin: clamp(34px, 4vw, 56px) auto 0;
  padding-top: clamp(14px, 1.6vw, 20px);
  border-top: 1px solid var(--border-soft);
  font-size: 13px;
  letter-spacing: .01em;
}

.m-ed__back a {
  color: var(--subtle);
  text-decoration: none;
  border-bottom: 1px solid var(--border);
  padding-bottom: 1px;
}

.m-ed__back a:hover {
  color: var(--p-brand);
  border-bottom-color: var(--p-brand);
}

/* ═══════════════════════════════════════════════════════════
   YURAI Insights の一覧（/insights/）

   **販売LPの面ではない。** 動くもの・大きな絵を置かず、余白と書体と
   カテゴリの色だけで「読み物の入口」を出す。記事の誌面（.m-ed）と
   同じ変数を使うので、読み幅と行の呼吸が記事と揃う。
   ═══════════════════════════════════════════════════════════ */

.m-hub__top,
.m-hub__list {
  /* .m-ed と同じ列幅を使う。**一覧だけ別の読み幅にしない。** */
  --m-ed-col: 41rem;
  --m-ed-wide: 54rem;
}

/* 柱は1枚。中の要素は幅が違っても左端が揃う。 */
.m-hub__top-in {
  max-width: var(--m-ed-wide);
  margin-left: auto;
  margin-right: auto;
}

.m-hub__top { padding-bottom: clamp(40px, 5vw, 84px); }
.m-hub__list { padding-top: clamp(44px, 5vw, 86px); }

.m-hub__top h1 {
  margin-top: clamp(12px, 1.6vw, 20px);
  font-size: clamp(30px, 4.4vw, 60px);
  line-height: 1.24;
  font-weight: 600;                 /* base.css の 700 を下げる */
  letter-spacing: -.02em;
  color: var(--foreground);         /* base.css の旧藍を上書き */
}

.m-hub__lede {
  margin-top: clamp(16px, 2vw, 26px);
  max-width: 24em;
  font-size: clamp(18px, 1.9vw, 25px);
  line-height: 1.62;
  font-weight: 600;
  letter-spacing: -.005em;
  color: var(--foreground);
  text-wrap: pretty;
}

.m-hub__sub {
  margin-top: clamp(12px, 1.4vw, 18px);
  max-width: var(--m-ed-col);
  font-size: var(--m-ed-fs);
  line-height: 1.95;
  color: var(--muted);
  text-wrap: pretty;
}

/* ── テーマ ──────────────────────────────────────────
   **並べるだけ。** 押しても何も起きない見出しなので、ボタンに見せない
   （囲みも影も付けない。押せそうな形にして押せないのが一番よくない）。 */

.m-hub__themes {
  margin-top: clamp(30px, 3.6vw, 50px);
  padding-top: clamp(16px, 1.8vw, 22px);
  border-top: 1px solid var(--border-soft);
}

.m-hub__themes-h {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .2em;
  color: var(--subtle);
}

.m-hub__theme-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px clamp(16px, 2.4vw, 34px);
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}

.m-hub__theme-list li {
  position: relative;
  padding-left: 13px;
  font-size: 14px;
  line-height: 1.7;
  color: var(--muted);
}

/* カテゴリの印。赤は**この小さな点だけ**に使う（面や太い線には使わない）。 */
.m-hub__theme-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .62em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
}

/* ── 記事カード ───────────────────────────────────── */

.m-hub__list > .m-h2 {
  max-width: var(--m-ed-wide);
  margin-left: auto;
  margin-right: auto;
  font-size: clamp(20px, 2vw, 27px);
  letter-spacing: .01em;
}

.m-hub__cards {
  max-width: var(--m-ed-wide);
  margin: clamp(22px, 2.6vw, 36px) auto 0;
  padding: 0;
  list-style: none;
}

.m-hub__cards > li + li { margin-top: clamp(14px, 1.6vw, 20px); }

/* カード全体が1つのリンク。**行送りと余白で押せることを言う**
   （下線や矢印を足さず、hover で面と罫だけが動く）。 */
.m-hub__card {
  display: block;
  padding: clamp(20px, 2.4vw, 32px) clamp(18px, 2.2vw, 30px);
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--m-r);
  color: inherit;
  text-decoration: none;
  transition: border-color .18s ease, background .18s ease;
}

.m-hub__card:hover {
  background: var(--p-white);
  border-color: var(--border);
  color: inherit;                   /* base.css の a:hover（赤）を止める */
}

.m-hub__card:focus-visible {
  outline: 2px solid var(--p-brand);
  outline-offset: 2px;
}

/* 番号とカテゴリ。LPの `01 ／ READ` と同じ小さな見出し行。 */
.m-hub__k {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .18em;
  color: var(--accent);
}

.m-hub__n {
  margin-right: .55em;
  color: var(--subtle);
  font-variant-numeric: tabular-nums;
}

.m-hub__t {
  margin: 8px 0 0;
  max-width: 30em;
  font-size: clamp(19px, 1.95vw, 26px);
  line-height: 1.48;
  font-weight: 600;
  letter-spacing: -.015em;
  color: var(--foreground);         /* base.css の h3 の色と太さを上書き */
  text-wrap: pretty;
}

.m-hub__s {
  margin-top: 10px;
  max-width: 40em;
  font-size: 15px;
  line-height: 1.92;
  color: var(--muted);
  text-wrap: pretty;
}

.m-hub__go {
  margin-top: 14px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .14em;
  color: var(--p-brand);
}

.m-hub__card:hover .m-hub__go { color: var(--p-red); }

/* ═══════════════════════════════════════════════════════════
   狭い画面

   lp.css の 1080 / 900 / 640 と足並みを揃える。
   .m-btn は ≤640px で lp.css が width:100% / min-height:52px にする。
   ═══════════════════════════════════════════════════════════ */

/* 目次は広い画面だけ2列。9行を1列で置くと最初の節まで1.6画面ある（実測）。
   **900px 以下では1列に倒す**（新LPの横並びと同じ畳み方）。 */
@media (min-width: 901px) {
  .m-ed-toc__list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: clamp(24px, 3vw, 48px);
  }
  /* 2列目の先頭にも天の罫が要る（1列目だけに引くと片側が浮く） */
  .m-ed-toc__list li { border-top: 0; }
}

@media (max-width: 1080px) {
  /* ヘッダが2段になる（実測 117px）。見出しの逃げ幅を合わせる。 */
  .m-ed,
  .m-ed__cta { --m-ed-nav: 117px; }
  /* 締めCTAがフッタより低いと、読み終わりの帯がフッタの一部に見える（実測） */
  .m-ed__cta { padding-top: 72px; padding-bottom: 72px; }
}

@media (max-width: 640px) {
  /* 破線の左罫が700px 続くとノイズになる。狭い面では面で言う。 */
  .m-ed-caveat {
    border-left: 0;
    background: var(--surface-2);
    padding: 18px;
    border-radius: var(--m-r);
  }
  .m-ed-flow__steps li { flex: 1 1 100%; }
  /* 左右の比較は縦に積む。**危ない側が上**（そのまま読み下せる順）。 */
  .m-ed-vs { grid-template-columns: minmax(0, 1fr); }
  .m-ed-swap__rows li { grid-template-columns: minmax(0, 1fr); }
  /* 候補は「番号／値」で1行、位置は次の行へ回す（3列だと値が潰れる） */
  .m-ed-cand li { grid-template-columns: 4.6em minmax(0, 1fr); }
  .m-ed-cand__p { grid-column: 1 / -1; }
  .m-ed-fork__cands li { flex: 1 1 100%; max-width: none; }
  .m-ed-fork__win { max-width: none; }
  .m-ed-toc__list li { grid-template-columns: 2.1em minmax(0, 1fr); }
  .m-ed__cta-acts { flex-direction: column; }
}

/* 表は横スクロールさせず折り返して収める。**セルの display は変えない**
   （表としての読み上げを壊さない）。 */
@media (max-width: 560px) {
  .m-ed-table { min-width: 0; font-size: 12.8px; }
  .m-ed-table th,
  .m-ed-table td { padding: 10px 8px; line-height: 1.7; }
  .m-ed-table tbody th { width: 34%; }
}