/* ============================================================
   theme/ampl-logic.css — テック解説スライド
   純白背景 + 黒文字 + 薄グレー破線。学術発表・スキル解説向け。
   ■マーカー見出し / 右上「?!」マスコット / 左下シグネチャ
   ============================================================ */

@import url('../shared/ampl-base.css');

:root {
  --head-top: 64px; --head-kick: 0px;
  /* 文字基準v3（2026-07-02 本人確定）: 本文17pt・読ませる文字14pt下限・見出しは抑制 */
  --color-chrome:  #ededed;
  --color-bg:      #ffffff;
  --color-fg:      #131313;
  --color-muted:   #555555;
  --color-faint:   #767676;   /* 共通層と同じ。白地で約4.5:1（#999 は2.85:1で届かなかった・2026-09-28） */
  --color-line:    #cccccc;
  --color-line-dk: #888888;
  --color-card-bg: #fafafa;
  --color-code-bg: #f7f7f7;
  --color-accent:  #131313;

  --font-mono: var(--font-code);

  --border: 1px solid var(--color-line);
  --border-dashed: 1.5px dashed var(--color-line);
}

body { font-family: var(--font-sans); color: var(--color-fg); }

/* ── ベースタグ ── */
.slide h1 {
  font-size: var(--text-3xl); font-weight: var(--weight-black); line-height: 1.25;
  letter-spacing: -.01em; color: var(--color-fg);
}
.slide h2 {
  font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 900; line-height: 1.2;
  letter-spacing: 0; color: var(--color-fg);
  display: flex; align-items: center; gap: .55rem;
}
/* ■マーカー（見出しの先頭） */
.slide h2::before {
  content: ''; display: inline-block;
  width: .25rem; height: 1.6rem; background: var(--color-fg);
  flex-shrink: 0; transform: translateY(.05rem);
}
.slide h3 {
  font-size: var(--text-lg); font-weight: var(--weight-bold); line-height: 1.35;
  color: var(--color-fg);
}
.slide p {
  font-size: var(--text-md); line-height: 1.85; color: var(--color-muted);
}

/* ── ページ種別 ── */

/* 表紙 */
.slide-title {
  justify-content: center; gap: var(--sp-md);
  padding-left: calc(var(--sp-xl) + 1.5rem);
}
.slide-title .label {
  font-family: var(--font-mono); font-size: var(--text-sm);
  letter-spacing: .12em; color: var(--color-faint); text-transform: uppercase;
}
.slide-title h1 {
  font-size: 4.4rem; max-width: 920px; line-height: 1.15;
}
.slide-title h1::before { display: none; }
.slide-title .sub {
  font-size: var(--text-lg); color: var(--color-muted);
  max-width: 720px; line-height: 1.7;
}

/* コンテンツ */
.slide-content { gap: 0; }
.slide-content .body {
  display: flex; flex-direction: column; flex: 1;
  gap: 0 !important;
}
/* h2は上部固定（常に同じ高さ） */
.slide-content .body > h2 { flex-shrink: 0; margin-bottom: var(--sp-sm); }
/* leadはh2にくっつける */
.slide-content .body > .lead {
  font-size: var(--text-base); color: var(--color-muted); line-height: 1.85;   /* 旧 Logic の 1.35rem に最も近い本文サイズ（共通層の md=1.6rem では3行に膨らんだ） */
  max-width: 1080px; margin-bottom: 0; flex-shrink: 0;
}
/* 見出し後の中央配置は shared/ampl-base.css が担当する。 */

/* 章扉 */
.slide-section {
  justify-content: center; align-items: flex-start; gap: var(--sp-sm);
  padding-left: calc(var(--sp-xl) + 1rem);
}
.slide-section .num {
  font-family: var(--font-mono); font-size: var(--text-lg);
  color: var(--color-faint); letter-spacing: .15em;
}
.slide-section h2 { font-size: var(--text-3xl); }
.slide-section h2::before { width: .8rem; height: 2rem; }

/* エンディング */
.slide-end {
  justify-content: center; align-items: center; text-align: center; gap: var(--sp-md);
}
.slide-end h2 { font-size: var(--text-2xl); justify-content: center; }
.slide-end h2::before { display: none; }
.slide-end .mark { width: 36px; height: 2px; background: var(--color-fg); }

/* 表紙とエンディングにはページ番号を入れない */
.slide-title .slide-page-num,
.slide-end .slide-page-num { display: none !important; }

/* ── 共通ユーティリティ ── */
.muted { color: var(--color-muted); }
.faint { color: var(--color-faint); }
.bold  { font-weight: var(--weight-bold); }
.mono  { font-family: var(--font-mono); }
.italic { font-family: var(--font-display); font-style: italic; }
.divider { width: 100%; height: 1px; background: var(--color-line); }

/* ── テキスト+画像（左右並び） ── */
.text-img { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-lg); flex: 1; align-items: center; }
.text-img .text { display: flex; flex-direction: column; gap: var(--sp-sm); }
.text-img .img-box { border-radius: var(--radius); overflow: hidden; }
.text-img .img-box img { width: 100%; height: auto; object-fit: contain; }

/* ── グリッド ── */
.cols-2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-lg); }   /* 折り返さない ASCII ツリーが片側を押し広げないよう minmax(0,…) */
.cols-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-md); }
.cols-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-md); }

/* ── リスト ── */
.list { display: flex; flex-direction: column; gap: var(--sp-sm); list-style: none; }
.list li {
  display: flex; align-items: baseline; gap: .6rem;
  font-size: var(--text-md); color: var(--color-fg); line-height: 1.7;
  word-break: keep-all; line-break: strict; overflow-wrap: normal;
}
.list li::before {
  content: '・'; flex-shrink: 0; color: var(--color-fg);
}
.list-sub li::before { content: '◦'; color: var(--color-muted); }

/* 全テキスト要素に日本語の行頭禁則を効かせる（英単語は壊さない） */
.slide p, .slide .lead, .slide .desc, .slide .head,
.slide .finding p, .slide .group-box p {
  word-break: auto-phrase;
  line-break: strict;
  overflow-wrap: normal;
}

/* ── アジェンダ（agenda レイアウト） ── */
.agenda { display: flex; flex-direction: column; gap: 1.7rem; margin: var(--sp-md) 0; }
.agenda-item { display: flex; gap: 1rem; align-items: flex-start; }
.agenda-item::before {
  content: ''; flex-shrink: 0;
  width: .85rem; height: .85rem; background: var(--color-fg);
  margin-top: .55rem;
}
.agenda-item .head {
  font-size: var(--text-xl); font-weight: var(--weight-bold); color: var(--color-fg);
  line-height: 1.4;
}
.agenda-item .desc {
  font-size: var(--text-sm); color: var(--color-muted); margin-top: .2rem; line-height: 1.7;
}

/* ── カラム比較（compare レイアウト） ── */
.compare { display: flex; flex-direction: column; gap: var(--sp-md); }
.compare-shared {
  display: flex; align-items: baseline; gap: .55rem;
  padding: .65rem 1rem; background: var(--color-card-bg);
  border-radius: var(--radius); border: var(--border);
  font-size: var(--text-sm); color: var(--color-fg);
}
.compare-shared::before {
  content: '●'; color: var(--color-fg); font-size: .7rem;
}
.compare-cols { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--sp-md); }
.compare-col h3 {
  font-size: var(--text-md); margin-bottom: .55rem;
  display: flex; align-items: center; gap: .45rem;
}
.compare-col h3::before {
  content: ''; width: .5rem; height: .85rem; background: var(--color-fg);
}

/* ── 2x2 ファインディング ── */
.grid-2x2 {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-md);
}
.finding {
  border: var(--border); border-radius: var(--radius);
  padding: 1.15rem 1.35rem; background: var(--color-bg);
  display: flex; flex-direction: column; gap: .5rem;
}
.finding h3 { font-size: var(--text-md); }
.finding p { font-size: var(--text-sm); line-height: 1.75; color: var(--color-muted); }
.finding .ref { font-size: .65rem; color: var(--color-faint); vertical-align: super; }

/* ── グルーピング枠（破線ボックス） ── */
.group-box {
  border: var(--border-dashed); border-radius: var(--radius);
  padding: 1rem 1.2rem; position: relative;
  background: var(--color-bg);
}
.group-box .group-label {
  position: absolute; top: -.65rem; left: 1rem;
  background: var(--color-bg); padding: 0 .55rem;
  font-size: var(--text-xs); color: var(--color-muted); font-family: var(--font-mono);
}

/* ── フロー図（自由配置） ── */
.flow-diagram {
  position: relative; min-height: 380px; padding: 1rem 0;
}
.flow-node {
  display: inline-flex; flex-direction: column; align-items: center; gap: .35rem;
  text-align: center;
}
.flow-node .icon {
  width: 56px; height: 56px;
  display: flex; align-items: center; justify-content: center;
}
.flow-node .icon svg { width: 100%; height: 100%; }
.flow-node .label { font-size: var(--text-sm); color: var(--color-fg); font-weight: 500; }
.flow-node .sub { font-size: .7rem; color: var(--color-muted); }
.flow-arrow-svg { position: absolute; pointer-events: none; }
.arrow-label {
  position: absolute; font-size: .68rem;
  color: var(--color-muted); background: var(--color-bg);
  padding: 1px 5px; white-space: nowrap;
}

/* ── ASCIIツリー ── */
.ascii-tree {
  font-family: var(--font-code); font-size: .8rem; line-height: 1.85;
  color: var(--color-fg); white-space: pre;
}
.ascii-tree .note {
  color: var(--color-muted); font-size: .72rem; margin-left: .8rem;
}

/* ── コードプレビュー ── */
.code-preview {
  background: var(--color-code-bg); border: var(--border); border-radius: var(--radius-sm);
  padding: .9rem 1.1rem; font-family: var(--font-code);
  font-size: .55rem; line-height: 1.6; color: #333;
  overflow: hidden; max-height: 100%;
}
.code-preview .ttl {
  font-size: .65rem; color: var(--color-muted); margin-bottom: .35rem;
  font-family: var(--font-sans);
}
.code-preview pre { white-space: pre-wrap; word-break: break-all; }
.code-preview .kw { color: #a04060; }
.code-preview .str { color: #2a6e2a; }
.code-preview .com { color: #888; }

/* ── ベン図 ── */
.venn-eq {
  display: flex; align-items: center; gap: 1.5rem; justify-content: center;
  flex: 1;
}
.venn {
  width: 280px; height: 280px; position: relative;
  display: flex; align-items: center; justify-content: center;
}
.venn .outer {
  width: 100%; height: 100%; border: 1.5px solid var(--color-fg);
  border-radius: 50%; position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center;
  padding-top: 2.2rem;
}
.venn .inner {
  width: 56%; height: 56%; border: 1.5px solid var(--color-fg);
  border-radius: 50%; position: absolute;
  bottom: 1rem; left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.venn .label {
  font-size: var(--text-md); font-weight: var(--weight-bold); color: var(--color-fg);
}
.venn .desc {
  font-size: .68rem; color: var(--color-muted); text-align: center;
  max-width: 80%; margin-top: .2rem; line-height: 1.5;
}
.venn-eq .equals {
  font-size: 3rem; font-weight: var(--weight-bold); color: var(--color-fg);
}
.venn-eq .result {
  font-size: var(--text-2xl); font-weight: var(--weight-bold); color: var(--color-fg);
}

/* ── マスコット（右上 ?!）── */
.mascot {
  position: absolute; top: 1.6rem; right: 1.8rem;
  width: 56px; height: 56px;
  pointer-events: none; opacity: .85;
}
.mascot svg { width: 100%; height: 100%; }

/* ── シグネチャ（左下 岡本賢, 2026） ── */
.signature {
  position: absolute; bottom: 1.4rem; left: 2rem;
  font-size: .65rem; color: var(--color-faint);
  font-family: var(--font-sans); letter-spacing: .04em;
  pointer-events: none;
}

/* ── ナビUI(prev/next/pdf/fs)は非表示。page-num は engine が注入するので活用 ── */
.slide-ui { display: none !important; }

/* engine が注入する .slide-page-num をテーマ色・位置・フォントで上書き */
.slide-page-num {
  bottom: 1.4rem !important;
  right: 2rem !important;
  font-family: var(--font-mono) !important;
  font-size: .78rem !important;
  color: var(--color-faint) !important;
  letter-spacing: .15em !important;
}

/* ── タイトル/章扉ではマスコットを大きく ── */
.slide-title .mascot { width: 72px; height: 72px; opacity: .9; }

/* ============================================================
   追加パターン（trend-report / 梶谷スタイルからの移植）
   白背景に最適化
   ============================================================ */

/* ── ツーカラム（テキスト55% + 画像45%） ── */
.slide-two-col {
  flex-direction: row;
  padding: 0;
  gap: 0;
}
.slide-two-col .col-text {
  flex: 0 0 55%;
  padding: var(--sp-xl);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--sp-md);
}
.slide-two-col .col-text h2::before { display: none; }
.slide-two-col .col-img {
  flex: 0 0 45%;
  position: relative;
  overflow: hidden;
}
.slide-two-col .col-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ── フルスクリーン画像 + オーバーレイ ── */
.slide-fullimg {
  padding: 0;
  position: relative;
}
.slide-fullimg img.bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.slide-fullimg .overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,.85) 0%, rgba(255,255,255,.4) 50%, rgba(255,255,255,.7) 100%);
  z-index: 1;
}
.slide-fullimg .content {
  position: relative;
  z-index: 2;
  padding: var(--sp-xl);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: 100%;
  gap: var(--sp-sm);
}
.slide-fullimg h2::before { display: none; }

/* ── ヒーロー（中央揃え大タイトル） ── */
.slide-hero {
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: var(--sp-md);
}
.slide-hero h1 {
  font-size: var(--text-4xl);
  max-width: 1000px;
}
.slide-hero h1::before { display: none; }
.slide-hero p {
  font-size: var(--text-xl);
  max-width: 700px;
}

/* ── 番号付きリスト（自動採番） ── */
.num-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-sm);
  list-style: none;
  counter-reset: num-list;
}
.num-list li {
  counter-increment: num-list;
  display: flex;
  align-items: baseline;
  gap: var(--sp-md);
  font-size: var(--text-md);
  color: var(--color-fg);
  line-height: 1.7;
}
.num-list li::before {
  content: counter(num-list, decimal-leading-zero);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  color: var(--color-faint);
  flex-shrink: 0;
  min-width: 2em;
}

/* ── KPI大数字（単独） ── */
.kpi-solo {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  text-align: center;
  gap: var(--sp-sm);
}
.kpi-solo .number {
  font-size: clamp(5rem, 10vw, 8rem);
  font-weight: var(--weight-black);
  color: var(--color-fg);
  font-family: var(--font-mono);
  line-height: 1;
}
.kpi-solo .unit {
  font-size: var(--text-xl);
  color: var(--color-muted);
}
.kpi-solo .desc {
  font-size: var(--text-md);
  color: var(--color-muted);
}

/* ── KPI 横並び ── */
.stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-xs);
}
.stat .number {
  font-size: var(--text-3xl);
  font-weight: var(--weight-black);
  color: var(--color-fg);
  font-family: var(--font-mono);
  line-height: 1;
}
.stat .label {
  font-size: var(--text-sm);
  color: var(--color-muted);
}

/* ── 横タイムライン ── */
.timeline-h {
  display: flex;
  align-items: flex-start;
  gap: 0;
  flex: 1;
  position: relative;
}
.timeline-h::before {
  content: '';
  position: absolute;
  top: 7px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--color-fg);
}
.timeline-h-item {
  flex: 1;
  position: relative;
  padding-top: var(--sp-lg);
  text-align: center;
}
.timeline-h-item::before {
  content: '';
  position: absolute;
  top: 3px;
  left: 50%;
  transform: translateX(-50%);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--color-fg);
  border: 2px solid var(--color-bg);
}
.timeline-h-item h3 { font-size: var(--text-base); margin-bottom: var(--sp-xs); }
.timeline-h-item p  { font-size: var(--text-sm); color: var(--color-muted); }

/* ── 縦タイムライン ── */
.timeline {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding-left: var(--sp-md);
  border-left: 2px solid var(--color-fg);
  flex: 1;
}
.timeline-item {
  position: relative;
  padding: var(--sp-xs) 0 var(--sp-md) var(--sp-md);
}
.timeline-item::before {
  content: "";
  position: absolute;
  left: calc(-1 * var(--sp-md) - 5px);
  top: .6em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-fg);
}
.timeline-item h3 { font-size: var(--text-md); margin-bottom: var(--sp-xs); }
.timeline-item p  { font-size: var(--text-sm); color: var(--color-muted); }

/* ── 画像グリッド ── */
.img-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-sm);
  flex: 1;
}
.img-grid-2 img {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  border-radius: var(--radius);
  display: block;
}
.img-grid-3 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--sp-sm);
  flex: 1;
}
.img-grid-3 img {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  border-radius: var(--radius);
  display: block;
}

/* ── 動画埋め込み ── */
.video-box {
  border-radius: var(--radius);
  overflow: hidden;
  flex: 1;
  min-height: 0;
  position: relative;
  aspect-ratio: 16/9;
}
.video-box video,
.video-box iframe {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border: none;
}

/* ── 画像ボックス ── */
.img-box {
  border-radius: var(--radius);
  overflow: hidden;
  flex: 1;
  min-height: 0;
}
.img-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ── カード ── */
.card {
  background: var(--color-card-bg);
  border: var(--border);
  border-radius: var(--radius);
  padding: var(--sp-md);
  display: flex;
  flex-direction: column;
  gap: var(--sp-xs);
}
.card h3 { font-size: var(--text-md); }
.card p  { font-size: var(--text-sm); color: var(--color-muted); }

/* アクセント強調カード */
.card.accent-border {
  border: 1px solid rgba(0,0,0,.12); border-radius: var(--radius);
}

/* ── フローチャート（横並び） ── */
.flow {
  display: flex;
  align-items: center;
  gap: 0;
  flex: 1;
}
.flow-step {
  flex: 1;
  text-align: center;
  padding: var(--sp-md);
  background: var(--color-card-bg);
  border: var(--border);
  border-radius: var(--radius);
}
.flow-step h3 { font-size: var(--text-md); margin-bottom: var(--sp-xs); }
.flow-step p  { font-size: var(--text-sm); color: var(--color-muted); }
.flow-arrow {
  flex-shrink: 0;
  width: 40px;
  text-align: center;
  font-size: var(--text-xl);
  color: var(--color-fg);
}

/* ── テーブル ── */
.slide table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}
.slide table th {
  text-align: left;
  font-weight: var(--weight-bold);
  font-size: var(--text-sm);
  color: var(--color-fg);
  padding: var(--sp-xs) var(--sp-sm);
  border-bottom: 2px solid var(--color-fg);
  letter-spacing: .03em;
}
.slide table td {
  padding: var(--sp-xs) var(--sp-sm);
  border-bottom: 1px solid var(--color-line);
  color: var(--color-muted);
  font-size: var(--text-sm);
  line-height: 1.5;
}
.slide table tr:last-child td { border-bottom: none; }
.slide table tr.highlight td {
  background: var(--color-card-bg);
  color: var(--color-fg);
}

/* ── 引用・コールアウト ── */
.callout {
  border: 1px solid rgba(0,0,0,.12);
  padding: var(--sp-md) var(--sp-lg);
  background: var(--color-card-bg);
  border-radius: 0 var(--radius) var(--radius) 0;
}
.callout p {
  font-size: var(--text-lg);
  font-style: italic;
  color: var(--color-fg);
  line-height: 1.6;
}
.callout .attribution {
  font-size: var(--text-sm);
  color: var(--color-muted);
  margin-top: var(--sp-sm);
  font-style: normal;
}

/* ── VS比較テーブル ── */
.vs-table {
  display: grid;
  grid-template-columns: 1fr 48px 1fr;
  gap: 0;
  flex: 1;
  align-items: stretch;
}
.vs-table .vs-left,
.vs-table .vs-right {
  padding: var(--sp-md);
  display: flex;
  flex-direction: column;
  gap: var(--sp-sm);
}
.vs-table .vs-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-md);
  font-weight: var(--weight-bold);
  color: var(--color-fg);
  background: var(--color-card-bg);
}

/* ── ステップカード（自動採番） ── */
.step-cards {
  display: flex;
  flex-direction: column;
  gap: var(--sp-sm);
  counter-reset: step-card;
  flex: 1;
}
.step-card {
  counter-increment: step-card;
  display: flex;
  align-items: flex-start;
  gap: var(--sp-md);
  padding: var(--sp-sm) var(--sp-md);
  background: var(--color-card-bg);
  border: var(--border);
  border-radius: var(--radius);
}
.step-card::before {
  content: counter(step-card, decimal-leading-zero);
  font-family: var(--font-mono);
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  color: var(--color-fg);
  line-height: 1;
  flex-shrink: 0;
  min-width: 2em;
}
.step-card h3 { font-size: var(--text-md); }
.step-card p  { font-size: var(--text-sm); color: var(--color-muted); }

/* ── タグ・ラベル ── */
.tag {
  display: inline-block;
  font-size: var(--text-xs);
  font-family: var(--font-mono);
  color: var(--color-fg);
  border: 1px solid var(--color-line-dk);
  border-radius: var(--radius-sm);
  padding: .15rem .5rem;
  letter-spacing: .05em;
}
.badge {
  display: inline-block;
  font-size: var(--text-xs);
  font-family: var(--font-mono);
  color: #fff;
  background: var(--color-fg);
  border-radius: var(--radius-sm);
  padding: .2rem .6rem;
  letter-spacing: .04em;
  font-weight: var(--weight-bold);
}
.chip {
  display: inline-block;
  font-size: var(--text-sm);
  color: var(--color-muted);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-pill);
  padding: .25rem .75rem;
}

/* ── 2x2マトリクス ── */
.matrix-2x2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 2px;
  flex: 1;
  background: var(--color-line);
}
.matrix-2x2 > div {
  background: var(--color-bg);
  padding: var(--sp-md);
  display: flex;
  flex-direction: column;
  gap: var(--sp-xs);
}
.matrix-2x2 > div h3 { font-size: var(--text-md); }
.matrix-2x2 > div p  { font-size: var(--text-sm); color: var(--color-muted); }

/* ── サイクル図 ── */
.cycle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  flex: 1;
}
.cycle-step {
  width: 140px;
  height: 140px;
  border-radius: 50%;
  border: 2px solid var(--color-fg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--sp-sm);
  background: var(--color-bg);
}
.cycle-step h3 { font-size: var(--text-base); margin-bottom: 2px; }
.cycle-step p  { font-size: var(--text-xs); color: var(--color-muted); }
.cycle-arrow {
  font-size: var(--text-xl);
  color: var(--color-fg);
  padding: 0 var(--sp-xs);
}

/* ── ピラミッド ── */
.pyramid {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  flex: 1;
  justify-content: center;
}
.pyramid-level {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--sp-sm) var(--sp-md);
  background: var(--color-card-bg);
  border: 1px solid var(--color-line);
  color: var(--color-fg);
}
.pyramid-level:nth-child(1) { width: 40%; border-radius: var(--radius) var(--radius) 0 0; border-bottom: 2px solid var(--color-fg); }
.pyramid-level:nth-child(2) { width: 65%; }
.pyramid-level:nth-child(3) { width: 90%; border-radius: 0 0 var(--radius) var(--radius); }
.pyramid-level h3 { font-size: var(--text-base); }
.pyramid-level p  { font-size: var(--text-xs); color: var(--color-muted); }

/* ── Before/After ── */
.before-after {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 0;
  align-items: stretch;
  flex: 1;
}
.before-after .before,
.before-after .after {
  padding: var(--sp-md);
  display: flex;
  flex-direction: column;
  gap: var(--sp-sm);
}
.before-after .before { background: var(--color-card-bg); border-radius: var(--radius) 0 0 var(--radius); }
.before-after .after  { background: #f0f0f0; border-radius: 0 var(--radius) var(--radius) 0; }
.before-after .arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-2xl);
  color: var(--color-fg);
  padding: 0 var(--sp-sm);
}

/* ── アイコン付きリスト ── */
.icon-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-md);
  list-style: none;
}
.icon-list li {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-md);
  font-size: var(--text-md);
  color: var(--color-muted);
  line-height: 1.5;
}
.icon-list .icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--color-card-bg);
  border: 1px solid var(--color-line);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-md);
  color: var(--color-fg);
}

/* ── ランディング（slide-landingがなかったので追加） ── */
.slide-landing {

  justify-content: center;
  align-items: flex-start;
  padding-left: calc(var(--sp-xl) - 3px);
}
.slide-landing h2 {
  font-size: var(--text-3xl);
  max-width: 900px;
  line-height: 1.3;
}
.slide-landing h2::before { display: none; }

/* 署名色は強調語・単位・小ノードだけに使う。 */
.lead strong, .lead em, .lead .accent,
.kpi-solo .unit, .stat .unit { color: var(--color-blue); }
.timeline-h-item::before, .timeline-item::before { background: var(--color-blue); }