/* ============================================================
   theme/sample.css — テーマ層
   ここだけ変更してデザインをカスタマイズする
   ============================================================ */

:root {
  /* ── カラー（ウォームライトテーマ） ── */
  --color-chrome:  #f0ebe6;          /* deckの外側（ブラウザ背景） */
  --color-bg:      #ffffff;          /* スライド背景 */
  --color-fg:      #3d2e2a;          /* テキスト（濃い茶色） */
  --color-muted:   rgba(61,46,42,.6);     /* テキスト（サブ） */
  --color-accent:  #e05a20;          /* アクセント色（ビビッドオレンジ） */
  --color-border:  rgba(61,46,42,.12);
  --color-num:     rgba(61,46,42,.2);     /* スライド番号 */
  --color-card-bg: rgba(224,90,32,.08);   /* カード・ボックス背景 */
  --color-accent-soft: rgba(224,90,32,.14);     /* ハイライト背景 */
  --color-accent-border: rgba(224,90,32,.45);   /* ハイライト枠線 */
  --color-code-bg: #2d2019;          /* コードブロック背景 */

  /* ── タイポグラフィ ── */
  --font-sans: "Helvetica Neue", "Hiragino Sans", "Yu Gothic", "Noto Sans JP", sans-serif;
  --font-mono: "SF Mono", "Fira Code", "Consolas", monospace;

  --text-xs:   .75rem;    /* 12px */
  --text-sm:   .875rem;   /* 14px */
  --text-base: 1rem;      /* 16px */
  --text-lg:   1.25rem;   /* 20px */
  --text-xl:   1.75rem;   /* 28px */
  --text-2xl:  2.5rem;    /* 40px */
  --text-3xl:  3.5rem;    /* 56px */
  --text-4xl:  5rem;      /* 80px */

  --weight-normal: 400;
  --weight-medium: 500;
  --weight-bold:   700;

  /* ── スペーシング ── */
  --sp-xs:  .5rem;
  --sp-sm:  1rem;
  --sp-md:  1.5rem;
  --sp-lg:  2.5rem;
  --sp-xl:  4rem;

  /* ── その他 ── */
  --radius: 4px;
  --border: 1px solid var(--color-border);
}

/* ── ベースタイポグラフィ ── */
body { font-family: var(--font-sans); }

/* ── 背景Claudeロゴ（右上に大きく薄く配置） ── */
.slide::before {
  content: '';
  position: absolute;
  top: -80px;
  right: -60px;
  width: 560px;
  height: 560px;
  background: url('../shared/logo/claude.svg') no-repeat center / contain;
  opacity: .14;
  pointer-events: none;
  z-index: 0;
}
.slide > * {
  position: relative;
  z-index: 1;
}

.slide h1 {
  font-size: var(--text-4xl);
  font-weight: var(--weight-bold);
  line-height: 1.1;
  letter-spacing: -.025em;
  word-break: keep-all;
  overflow-wrap: break-word;
}
.slide h2 {
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  line-height: 1.2;
  letter-spacing: -.015em;
}
.slide h3 {
  font-size: var(--text-xl);
  font-weight: var(--weight-medium);
  line-height: 1.3;
}
.slide p {
  font-size: 1.875rem; /* 受講者向けに大きめ。30px相当 */
  line-height: 1.6;
  color: var(--color-fg);
}

/* リスト・テーブル・コードの本文サイズも統一 */
.slide ul li,
.slide ol li,
.slide ul.list li,
.slide ul.checklist li {
  font-size: 1.75rem;
  line-height: 1.65;
}
.slide table {
  font-size: 1.5rem;
}
.slide table th,
.slide table td {
  padding: 0.75rem 1rem;
}

/* card / steps コンポーネント内は狭いので少し小さめに */
.slide .card p {
  font-size: 1.4rem;
  line-height: 1.55;
}
.slide .card h3 {
  font-size: 1.75rem;
}
.slide .steps-item p {
  font-size: 1.2rem;
  line-height: 1.5;
}
.slide .steps-item h3 {
  font-size: 1.4rem;
}

/* 注釈・補足は小さく */
.slide p.small,
.slide .small {
  font-size: 1.25rem;
}

/* ============================================================
   スライドタイプ（index.html の class で指定する）
   ============================================================ */

/* ① title — タイトルスライド */
.slide-title {
  justify-content: flex-end;
  gap: var(--sp-md);
  border-bottom: 2px solid var(--color-accent);
  padding-bottom: calc(var(--sp-xl) + 8px);
}
.slide-title .label {
  font-size: var(--text-sm);
  font-family: var(--font-mono);
  letter-spacing: .15em;
  color: var(--color-accent);
  text-transform: uppercase;
}
.slide-title h1 { max-width: 860px; }
.slide-title .sub {
  font-size: var(--text-lg);
  color: var(--color-muted);
  max-width: 640px;
  line-height: 1.6;
}

/* ② content — 汎用コンテンツスライド */
.slide-content { gap: var(--sp-lg); }
.slide-content .body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--sp-md);
  flex: 1;
  position: relative;
  z-index: 1;
}

/* ③ landing — 核心の一文（全画面ステートメント） */
.slide-landing {
  justify-content: center;
  align-items: flex-start;
  border-left: 3px solid var(--color-accent);
  padding-left: calc(var(--sp-xl) - 3px);
}
.slide-landing h2 {
  font-size: var(--text-3xl);
  max-width: 900px;
  line-height: 1.3;
}

/* ④ end — エンディング */
.slide-end {
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: var(--sp-md);
}
.slide-end .mark {
  width: 40px;
  height: 2px;
  background: var(--color-accent);
  margin: 0 auto;
}

/* ⑤ section — セクション区切り */
.slide-section {
  justify-content: center;
  gap: var(--sp-sm);
}
.slide-section h2 {
  font-size: var(--text-3xl);
  font-weight: var(--weight-bold);
}
.slide-section p {
  font-size: var(--text-lg);
  color: var(--color-muted);
  max-width: 640px;
}

/* ⑤b section-summary — セクション末のまとめスライド */
.slide-section-summary {
  justify-content: center;
  gap: var(--sp-sm);
}
.slide-section-summary h2 {
  font-size: var(--text-3xl);
  font-weight: var(--weight-bold);
}
.slide-section-summary p {
  font-size: var(--text-lg);
  color: var(--color-muted);
  max-width: 640px;
}

/* ⑥ index — 目次スライド */
.slide-index {
  gap: var(--sp-lg);
}
.slide-index .index-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-xs);
  margin: auto 0;
  max-width: 800px;
}
.slide-index .index-item {
  display: flex;
  align-items: center;
  gap: var(--sp-md);
  padding: var(--sp-sm) var(--sp-md);
  border-radius: var(--radius);
  border-left: 3px solid transparent;
}
.slide-index .index-item.is-active {
  background: var(--color-card-bg);
  border-left-color: var(--color-accent);
}
.slide-index .index-num {
  font-family: var(--font-mono);
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  color: var(--color-accent);
  min-width: 2rem;
}
.slide-index .index-item h3 {
  font-size: var(--text-xl);
  font-weight: var(--weight-medium);
}
/* 進行表示: is-active がある場合、非アクティブ項目をmuted化 */
.slide-index .index-list:has(.is-active) .index-item:not(.is-active) h3 {
  color: var(--color-muted);
}
.slide-index .index-list:has(.is-active) .index-item:not(.is-active) .index-num {
  opacity: .4;
}

/* ⑦ profile — プロフィール/自己紹介スライド */
.slide-profile {
  gap: var(--sp-lg);
}
.slide-profile .profile {
  display: flex;
  align-items: center;
  gap: var(--sp-xl);
  margin: auto 0;
}
.slide-profile .profile-photo {
  width: 320px;
  height: 320px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 2px solid var(--color-border);
}
.slide-profile .profile-info {
  display: flex;
  flex-direction: column;
  gap: var(--sp-xs);
}
.slide-profile .profile-name {
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
}
.slide-profile .profile-role {
  font-size: var(--text-lg);
  color: var(--color-muted);
}
.slide-profile .profile-desc {
  font-size: var(--text-base);
  color: var(--color-muted);
  max-width: 600px;
  line-height: 1.7;
  margin-top: var(--sp-xs);
}

/* ⑧ compare — 比較スライド（AS-IS/TO-BE） */
.slide-compare {
  gap: var(--sp-lg);
}
.slide-compare .compare-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-lg);
  flex: 1;
}
.slide-compare .compare-col {
  display: flex;
  flex-direction: column;
  gap: var(--sp-md);
  padding: var(--sp-md);
  border-radius: var(--radius);
}
.slide-compare .compare-col.is-before {
  background: var(--color-card-bg);
  border: var(--border);
}
.slide-compare .compare-col.is-after {
  background: var(--color-accent-soft);
  border: 1px solid var(--color-accent-border);
}
.slide-compare .compare-label {
  font-size: var(--text-sm);
  font-family: var(--font-mono);
  letter-spacing: .1em;
  text-transform: uppercase;
}
.slide-compare .compare-col.is-before .compare-label {
  color: var(--color-muted);
}
.slide-compare .compare-col.is-after .compare-label {
  color: var(--color-accent);
}
.slide-compare .compare-col h3 {
  font-size: var(--text-xl);  /* 1.75rem — card h3 と同水準 */
}
.slide-compare .compare-col p {
  font-size: 1.4rem;           /* card p と同水準 */
}


/* ============================================================
   ユーティリティクラス
   ============================================================ */
.accent  { color: var(--color-accent); }
.muted   { color: var(--color-muted); }
.mono    { font-family: var(--font-mono); }
.bold    { font-weight: var(--weight-bold); }
.text-center { text-align: center; }
.small   { font-size: var(--text-sm); }

/* 区切り線 */
.divider {
  width: 100%;
  height: 1px;
  background: var(--color-border);
}

/* 2カラムレイアウト */
.cols-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-lg);
}

/* 3カラムレイアウト */
.cols-3 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--sp-lg);
  margin-block: auto;
}

/* 4カラムレイアウト */
.cols-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-lg);
  margin-block: auto;
}

/* 箇条書き（行頭にアクセント色の棒） */
.list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-sm);
  list-style: none;
}
.list li {
  display: flex;
  align-items: center;
  gap: var(--sp-sm);
  font-size: var(--text-lg);
  color: var(--color-fg);
  line-height: 1.6;
}
.list li::before {
  content: '';
  display: inline-block;
  flex-shrink: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-accent);
}

/* ── カード ── */
.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-lg); }
.card p  { font-size: var(--text-base); }

/* ── フローチャート ── */
.flow {
  display: flex;
  align-items: center;
  gap: 0;
}
.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-lg); margin-bottom: var(--sp-xs); }
.flow-step p  { font-size: var(--text-base); color: var(--color-muted); margin-top: var(--sp-xs); }
.flow-arrow {
  flex-shrink: 0;
  width: 40px;
  text-align: center;
  font-size: var(--text-xl);
  color: var(--color-accent);
}

/* フロー + 詳細説明（カードの下に説明文が出る） */
.flow:has(.flow-card) {
  align-items: center;
}
.flow-step:has(.flow-card) {
  background: none;
  border: none;
  padding: 0;
  text-align: left;
  gap: var(--sp-lg);
}
.flow-card {
  background: var(--color-card-bg);
  border: var(--border);
  border-radius: var(--radius);
  padding: var(--sp-lg) var(--sp-md);
  text-align: center;
  width: 100%;
}
.flow-card h3 {
  font-size: var(--text-xl);
  margin-bottom: 0;
}
.flow-card p {
  font-size: var(--text-sm);
  color: var(--color-muted);
  margin-top: var(--sp-xs);
}

/* ── 数字ハイライト（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-bold);
  color: var(--color-accent);
  font-family: var(--font-mono);
  line-height: 1;
}
.stat .label {
  font-size: var(--text-sm);
  color: var(--color-muted);
}

/* ── ハイライトボックス ── */
.highlight-box {
  background: var(--color-accent-soft);
  border: 1px solid var(--color-accent-border);
  border-radius: var(--radius);
  padding: var(--sp-md) var(--sp-lg);
  text-align: center;
}
.highlight-box p {
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  color: var(--color-fg);
  line-height: 1.5;
}

/* ── 引用ボックス ── */
.quote-box {
  border-left: 3px solid var(--color-accent);
  padding: var(--sp-md) var(--sp-lg);
  background: var(--color-card-bg);
  border-radius: 0 var(--radius) var(--radius) 0;
}
.quote-box p {
  font-size: var(--text-lg);
  color: var(--color-fg);
  line-height: 1.7;
}

/* ── タイムライン ── */
.timeline {
  display: flex;
  flex-direction: column;
  gap: 0;
  position: relative;
  padding-left: var(--sp-lg);
}
.timeline::before {
  content: '';
  position: absolute;
  left: 6px;
  top: 8px;
  bottom: 8px;
  width: 2px;
  background: var(--color-border);
}
.timeline-item {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-md);
  padding: var(--sp-xs) 0;
  position: relative;
}
.timeline-item::before {
  content: '';
  position: absolute;
  left: calc(-1 * var(--sp-lg) + 2px);
  top: calc(var(--sp-xs) + 6px);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--color-accent);
  flex-shrink: 0;
}
.timeline-item .year {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--color-accent);
  min-width: 60px;
  font-weight: var(--weight-bold);
}
.timeline-item .event {
  font-size: var(--text-base);
  color: var(--color-muted);
  line-height: 1.5;
}

/* ── 2カラムタイムライン（左右交互配置） ── */
.timeline-2col {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--sp-sm);
  padding: 0;
}
.timeline-2col::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--color-border);
  transform: translateX(-50%);
}
.timeline-2col .tl-item {
  display: flex;
  align-items: center;
  position: relative;
  width: 100%;
}
/* ドット */
.timeline-2col .tl-item::before {
  content: '';
  position: absolute;
  left: 50%;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--color-accent);
  transform: translateX(-50%);
  z-index: 1;
}
/* 左配置（奇数行） */
.timeline-2col .tl-item:nth-child(odd) {
  justify-content: flex-end;
  padding-left: 0;
  padding-right: calc(50% + var(--sp-sm));
}
.timeline-2col .tl-item:nth-child(odd) .tl-card {
  text-align: right;
}
/* 右配置（偶数行） */
.timeline-2col .tl-item:nth-child(even) {
  justify-content: flex-start;
  padding-right: 0;
  padding-left: calc(50% + var(--sp-sm));
}
.tl-card {
  background: var(--color-card-bg);
  border: var(--border);
  border-radius: var(--radius);
  padding: var(--sp-xs) var(--sp-sm);
}
.tl-card .year {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--color-accent);
  font-weight: var(--weight-bold);
}
.tl-card p {
  font-size: var(--text-sm);
  color: var(--color-muted);
  line-height: 1.4;
}

/* ── 対応表 / マッピング図（比喩・対比の可視化） ── */
.mapping {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: var(--sp-sm);
  flex: 1;
  align-items: stretch;
}
.mapping-col {
  display: flex;
  flex-direction: column;
  gap: var(--sp-sm);
}
.mapping-arrows {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  color: var(--color-accent);
  font-size: var(--text-lg);
  padding: 0 var(--sp-xs);
}
.mapping-item {
  background: var(--color-card-bg);
  border: var(--border);
  border-radius: var(--radius);
  padding: var(--sp-sm) var(--sp-md);
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  justify-content: center;
}
.mapping-item h3 { font-size: var(--text-base); }
.mapping-item p  { font-size: var(--text-xs); }
.mapping-item.is-highlight {
  background: var(--color-accent-soft);
  border-color: var(--color-accent-border);
}

/* ── テーブル ── */
.slide table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-base);
}
.slide th,
.slide td {
  padding: var(--sp-xs) var(--sp-sm);
  text-align: left;
  border-bottom: 1px solid var(--color-border);
}
.slide th {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-muted);
  letter-spacing: .05em;
}
.slide td {
  color: var(--color-fg);
}

/* ── 階段式ステップ ── */
.steps {
  display: flex;
  align-items: stretch;
  gap: var(--sp-xs);
  flex: 1;
  position: relative;
}
.steps-item {
  flex: 1;
  padding: var(--sp-sm) var(--sp-md);
  background: var(--color-card-bg);
  display: flex;
  flex-direction: column;
  border: var(--border);
  border-radius: var(--radius);
  text-align: center;
  min-height: 80px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--sp-xs);
  position: relative;
  z-index: 1;
}
.steps-item .step-num {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--color-accent);
  font-weight: var(--weight-bold);
}
.steps-item h3 { font-size: var(--text-lg); }
.steps-item p  { font-size: var(--text-sm); color: var(--color-muted); }
.steps-item:nth-child(1) { margin-top: 120px; }
.steps-item:nth-child(2) { margin-top: 80px; }
.steps-item:nth-child(3) { margin-top: 40px; }
.steps-item:nth-child(4) { margin-top: 0; }
.steps-item:nth-child(5) { margin-top: 0; }

/* 階段式 + リッチコンテンツ（箇条書き付き） */
.step-detail {
  text-align: left;
  padding-top: var(--sp-xs);
  border-top: 1px solid var(--color-border);
  margin-top: var(--sp-xs);
}
.step-detail ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0;
  padding: 0;
}
.step-detail li {
  font-size: var(--text-xs);
  color: var(--color-muted);
  line-height: 1.5;
  display: flex;
  align-items: baseline;
  gap: .4em;
}
.step-detail li::before {
  content: '●';
  color: var(--color-accent);
  font-size: .45em;
  flex-shrink: 0;
  margin-top: .3em;
}

/* ── ドーナツチャート ── */
.donut {
  width: 220px;
  height: 220px;
  border-radius: 50%;
  /* セグメントは inline style の --seg1, --seg2, --seg3 で指定 */
  background: conic-gradient(
    var(--color-accent) 0% var(--seg1, 50%),
    rgba(210,132,90,.35) var(--seg1, 50%) var(--seg2, 75%),
    rgba(61,46,42,.12) var(--seg2, 75%) var(--seg3, 90%),
    rgba(61,46,42,.04) var(--seg3, 90%) 100%
  );
  position: relative;
  flex-shrink: 0;
}
.donut::after {
  content: '';
  position: absolute;
  inset: 20%;
  border-radius: 50%;
  background: var(--color-bg);
}
.donut-label {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 1;
}
.donut-label .number {
  font-family: var(--font-mono);
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  color: var(--color-fg);
  line-height: 1;
}
.donut-label .label {
  font-size: var(--text-xs);
  color: var(--color-muted);
  margin-top: var(--sp-xs);
}

/* チャート + 周辺説明カード（円グラフの四方に詳細カード） */
.chart-surround {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  grid-template-rows: 1fr 1fr;
  gap: var(--sp-sm);
  flex: 1;
  align-items: stretch;
}
.chart-surround > .donut {
  grid-column: 2;
  grid-row: 1 / -1;
  align-self: center;
  width: 200px;
  height: 200px;
}
.chart-detail {
  background: var(--color-card-bg);
  border: var(--border);
  border-radius: var(--radius);
  padding: var(--sp-sm);
  display: flex;
  flex-direction: column;
  gap: 2px;
  justify-content: center;
}
.chart-detail h3 { font-size: var(--text-base); }
.chart-detail .number {
  font-family: var(--font-mono);
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  color: var(--color-accent);
  line-height: 1.2;
}
.chart-detail p { font-size: var(--text-xs); line-height: 1.5; }

/* ドーナツ + 凡例のレイアウト */
.chart-with-legend {
  display: flex;
  align-items: center;
  gap: var(--sp-xl);
  flex: 1;
}
.chart-legend {
  display: flex;
  flex-direction: column;
  gap: var(--sp-sm);
}
.legend-item {
  display: flex;
  align-items: center;
  gap: var(--sp-sm);
}
.legend-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex-shrink: 0;
}
.legend-item span:last-child {
  font-size: var(--text-base);
  color: var(--color-muted);
}
.legend-item .bold {
  color: var(--color-fg);
}

/* ── 円グラフ（穴なし）── donut に .pie を追加すると穴が消える */
.donut.pie::after { display: none; }

/* ── 縦棒グラフ ── */
.bar-v {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: var(--sp-xs);
  flex: 1;
  min-height: 120px;
}
.bar-v-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  max-width: 36px;
}
.bar-v-fill {
  width: 100%;
  background: var(--color-accent);
  border-radius: 2px 2px 0 0;
  /* height は inline style で指定 */
}
.bar-v-fill.muted {
  background: rgba(61,46,42,.1);
}
.bar-v-value {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-muted);
  white-space: nowrap;
}
.bar-v-label {
  font-size: var(--text-xs);
  color: var(--color-muted);
}

/* ── 横棒グラフ ── */
.bar-chart {
  display: flex;
  flex-direction: column;
  gap: var(--sp-sm);
  flex: 1;
}
.bar-item {
  display: flex;
  align-items: center;
  gap: var(--sp-sm);
}
.bar-label {
  min-width: 120px;
  font-size: var(--text-sm);
  color: var(--color-muted);
  text-align: right;
  flex-shrink: 0;
}
.bar-track {
  flex: 1;
  height: 24px;
  background: rgba(61,46,42,.06);
  border-radius: 2px;
  overflow: hidden;
}
.bar-fill {
  height: 100%;
  background: var(--color-accent);
  border-radius: 2px;
  /* width は inline style で指定 */
}
.bar-value {
  min-width: 50px;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  color: var(--color-fg);
}

/* ── マトリクス / 4象限 ── */
.matrix {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 2px;
  flex: 1;
  position: relative;
  margin-left: var(--sp-lg);
  margin-bottom: var(--sp-lg);
}
.matrix-cell {
  background: var(--color-card-bg);
  padding: var(--sp-md);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-xs);
  text-align: center;
}
.matrix-cell h3 { font-size: var(--text-lg); }
.matrix-cell p  { font-size: var(--text-sm); color: var(--color-muted); }
.matrix-cell.is-highlight {
  background: var(--color-accent-soft);
  border: 2px solid var(--color-accent);
  box-shadow: inset 0 0 0 1px rgba(192,106,58,.1);
}
.matrix-cell.is-highlight h3 {
  color: var(--color-accent);
}
.matrix-axis-y {
  position: absolute;
  left: calc(-1 * var(--sp-lg));
  top: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  writing-mode: vertical-rl;
  font-size: var(--text-xs);
  color: var(--color-muted);
  letter-spacing: .1em;
}
.matrix-axis-x {
  position: absolute;
  bottom: calc(-1 * var(--sp-md));
  left: 0;
  right: 0;
  text-align: center;
  font-size: var(--text-xs);
  color: var(--color-muted);
  letter-spacing: .1em;
}

/* ── 同心円 (TAM/SAM/SOM) ── */
.concentric {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 280px;
  height: 280px;
  flex-shrink: 0;
}
.concentric-ring {
  position: absolute;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: center;
}
.concentric-ring:nth-child(1) {
  width: 100%; height: 100%;
  background: rgba(61,46,42,.03);
}
.concentric-ring:nth-child(2) {
  width: 65%; height: 65%;
  background: rgba(61,46,42,.04);
}
.concentric-ring:nth-child(3) {
  width: 35%; height: 35%;
  background: var(--color-accent-soft);
  border-color: var(--color-accent-border);
}
.concentric-ring .ring-label {
  font-size: var(--text-xs);
  font-family: var(--font-mono);
  font-weight: var(--weight-bold);
  color: var(--color-accent);
  text-align: center;
  line-height: 1.2;
}
.concentric-ring:nth-child(1) .ring-label {
  position: absolute;
  top: var(--sp-sm);
  right: var(--sp-sm);
  color: var(--color-muted);
}
.concentric-ring:nth-child(2) .ring-label {
  position: absolute;
  top: var(--sp-xs);
  color: var(--color-muted);
}

/* ── チェックリスト ── */
.checklist {
  display: flex;
  flex-direction: column;
  gap: var(--sp-sm);
  list-style: none;
}
.checklist li {
  display: flex;
  align-items: center;
  gap: var(--sp-sm);
  font-size: var(--text-lg);
  color: var(--color-muted);
  line-height: 1.6;
  padding: var(--sp-xs) var(--sp-sm);
  background: var(--color-card-bg);
  border-radius: var(--radius);
  border: var(--border);
}
.checklist li::before {
  content: '□';
  flex-shrink: 0;
  color: var(--color-accent);
  font-size: var(--text-lg);
  line-height: 1;
}

/* ── ツリー図（縦方向・横方向） ── */
.tree {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
}
.tree-node {
  background: var(--color-card-bg);
  border: var(--border);
  border-radius: var(--radius);
  padding: var(--sp-xs) var(--sp-sm);
  text-align: center;
  font-size: var(--text-sm);
  position: relative;
  z-index: 1;
}
.tree-node.is-highlight {
  background: var(--color-accent-soft);
  border-color: var(--color-accent-border);
}
.tree-node h3 { font-size: var(--text-sm); font-weight: var(--weight-medium); }
.tree-node .number {
  font-family: var(--font-mono);
  font-weight: var(--weight-bold);
  color: var(--color-accent);
}

/* 縦の接続線（親→分岐バー） */
.tree-down {
  width: 2px;
  height: 20px;
  background: var(--color-border);
  flex-shrink: 0;
}

/* 分岐コンテナ（縦ツリー用） */
.tree-branch {
  display: flex;
  gap: var(--sp-sm);
}
.tree-branch-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  padding-top: 20px;
  min-width: 0;
}
/* 各子ノードへの縦線（分岐バーから下へ） */
.tree-branch-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  width: 2px;
  height: 20px;
  background: var(--color-border);
  transform: translateX(-50%);
}
/* 水平接続線: gap分だけはみ出して隣と繋げる */
.tree-branch-item::after {
  content: '';
  position: absolute;
  top: 0;
  height: 2px;
  background: var(--color-border);
}
.tree-branch-item:first-child::after {
  left: 50%;
  right: calc(-0.5 * var(--sp-sm));
}
.tree-branch-item:last-child::after {
  left: calc(-0.5 * var(--sp-sm));
  right: 50%;
}
.tree-branch-item:not(:first-child):not(:last-child)::after {
  left: calc(-0.5 * var(--sp-sm));
  right: calc(-0.5 * var(--sp-sm));
}
.tree-branch-item:only-child::after {
  display: none;
}

/* ネスト用: branch-item の中にさらに tree-down + tree-branch を入れられる */
.tree-branch-item > .tree-down {
  flex-shrink: 0;
}

/* ── 横方向ツリー ── */
.tree-h {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex: 1;
}
.tree-right {
  height: 2px;
  width: 20px;
  background: var(--color-border);
  flex-shrink: 0;
}
.tree-branch-h {
  display: flex;
  flex-direction: column;
  gap: var(--sp-sm);
}
.tree-branch-h-item {
  flex: 1;
  display: flex;
  flex-direction: row;
  align-items: center;
  position: relative;
  padding-left: 20px;
}
.tree-branch-h-item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  height: 2px;
  width: 20px;
  background: var(--color-border);
  transform: translateY(-50%);
}
.tree-branch-h-item::after {
  content: '';
  position: absolute;
  left: 0;
  width: 2px;
  background: var(--color-border);
}
.tree-branch-h-item:first-child::after {
  top: 50%;
  bottom: calc(-0.5 * var(--sp-sm));
}
.tree-branch-h-item:last-child::after {
  top: calc(-0.5 * var(--sp-sm));
  bottom: 50%;
}
.tree-branch-h-item:not(:first-child):not(:last-child)::after {
  top: calc(-0.5 * var(--sp-sm));
  bottom: calc(-0.5 * var(--sp-sm));
}
.tree-branch-h-item:only-child::after {
  display: none;
}

/* ── フローチャート（条件分岐あり） ── */

/* 横フローチャート */
.flowchart {
  display: flex;
  align-items: center;
  gap: 0;
  flex: 1;
}
.fc-node {
  background: var(--color-card-bg);
  border: var(--border);
  border-radius: var(--radius);
  padding: var(--sp-xs) var(--sp-sm);
  text-align: center;
  font-size: var(--text-sm);
  position: relative;
  z-index: 1;
  flex-shrink: 0;
}
.fc-node h3 { font-size: var(--text-sm); font-weight: var(--weight-medium); }
.fc-node p  { font-size: var(--text-xs); color: var(--color-muted); }
/* 開始・終了ノード（角丸大きめ） */
.fc-node.is-terminal {
  border-radius: 999px;
  padding: var(--sp-xs) var(--sp-md);
  background: var(--color-accent-soft);
  border-color: var(--color-accent-border);
}
/* 条件分岐ノード（ひし形風） */
.fc-node.is-decision {
  border-radius: 2px;
  transform: rotate(0deg);
  background: var(--color-accent-soft);
  border: 2px solid var(--color-accent);
  padding: var(--sp-sm);
}
/* 処理ノード */
.fc-node.is-process {
  border-radius: var(--radius);
}
/* 矢印（横） */
.fc-arrow {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 0 var(--sp-xs);
  color: var(--color-accent);
  font-size: var(--text-lg);
}
.fc-arrow .fc-label {
  font-size: var(--text-xs);
  color: var(--color-muted);
  white-space: nowrap;
}

/* 縦フローチャート */
.flowchart-v {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  flex: 1;
}
.flowchart-v .fc-arrow {
  padding: var(--sp-xs) 0;
  flex-direction: row;
  gap: var(--sp-xs);
}
/* 縦フローの分岐（横に広がる） */
.fc-branch {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-lg);
  width: 100%;
  justify-content: center;
}
.fc-branch-path {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}
.fc-branch-label {
  font-size: var(--text-xs);
  color: var(--color-accent);
  font-weight: var(--weight-bold);
  margin-bottom: var(--sp-xs);
}

/* ── マインドマップ ── */
.mindmap {
  display: flex;
  align-items: center;
  flex: 1;
  gap: 0;
}
.mm-node {
  background: var(--color-card-bg);
  border: var(--border);
  border-radius: 20%;
  padding: var(--sp-sm) var(--sp-md);
  text-align: center;
  font-size: var(--text-sm);
  position: relative;
  z-index: 1;
  flex-shrink: 0;
}
.mm-node h3 { font-size: var(--text-base); font-weight: var(--weight-bold); }
.mm-node p  { font-size: var(--text-xs); color: var(--color-muted); }
.mm-node.is-center {
  background: var(--color-accent);
  color: #fff;
  border-color: var(--color-accent);
  border-radius: 50%;
  padding: var(--sp-md);
  min-width: 100px;
  min-height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mm-node.is-center h3 { color: #fff; font-size: var(--text-lg); }
/* マインドマップの分岐コンテナ（tree-branch-h を流用） */
.mm-branch {
  display: flex;
  flex-direction: column;
  gap: var(--sp-sm);
}
.mm-branch-item {
  display: flex;
  align-items: center;
  position: relative;
  padding-left: 20px;
}
.mm-branch-item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  height: 2px;
  width: 20px;
  background: var(--color-border);
}
.mm-branch-item::after {
  content: '';
  position: absolute;
  left: 0;
  width: 2px;
  background: var(--color-border);
}
.mm-branch-item:first-child::after {
  top: 50%;
  bottom: calc(-0.5 * var(--sp-sm));
}
.mm-branch-item:last-child::after {
  top: calc(-0.5 * var(--sp-sm));
  bottom: 50%;
}
.mm-branch-item:not(:first-child):not(:last-child)::after {
  top: calc(-0.5 * var(--sp-sm));
  bottom: calc(-0.5 * var(--sp-sm));
}
.mm-branch-item:only-child::after {
  display: none;
}
/* マインドマップの右接続線 */
.mm-right {
  height: 2px;
  width: 20px;
  background: var(--color-border);
  flex-shrink: 0;
}
/* 左側の分岐（右から左へ） */
.mm-branch-left {
  display: flex;
  flex-direction: column;
  gap: var(--sp-sm);
}
.mm-branch-left .mm-branch-item {
  padding-left: 0;
  padding-right: 20px;
  flex-direction: row-reverse;
}
.mm-branch-left .mm-branch-item::before {
  left: auto;
  right: 0;
}
.mm-branch-left .mm-branch-item::after {
  left: auto;
  right: 0;
}
.mm-left {
  height: 2px;
  width: 20px;
  background: var(--color-border);
  flex-shrink: 0;
}

/* ── ロードマップ ── */
.roadmap {
  display: grid;
  gap: 2px;
  flex: 1;
}
.roadmap-header {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  color: var(--color-muted);
  padding: var(--sp-xs);
  border-bottom: 2px solid var(--color-border);
  text-align: center;
}
.roadmap-bar {
  background: var(--color-card-bg);
  border: var(--border);
  border-radius: var(--radius);
  padding: var(--sp-xs) var(--sp-sm);
  font-size: var(--text-xs);
  color: var(--color-fg);
  display: flex;
  align-items: center;
  min-height: 32px;
}
.roadmap-bar.is-highlight {
  background: var(--color-accent-soft);
  border-color: var(--color-accent-border);
}
.roadmap-category {
  background: var(--color-card-bg);
  border: var(--border);
  border-radius: var(--radius);
  padding: var(--sp-xs) var(--sp-sm);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}


/* ── 画像ボックス ── */
.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;
}

/* テキスト+画像の横並び */
.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); }

/* ── タグ ── */
.tag {
  display: inline-block;
  font-size: 1.2rem;
  font-family: var(--font-mono);
  color: var(--color-accent);
  border: 1px solid var(--color-accent);
  border-radius: 2px;
  padding: .2rem .6rem;
  letter-spacing: .05em;
}

/* ============================================================
   追加スライドタイプ
   ============================================================ */

/* ── 注釈テキスト ── */
.note {
  font-size: var(--text-xs);
  color: var(--color-muted);
  line-height: 1.5;
}
.note::before {
  content: '※ ';
}

/* ── 動画埋め込み（コンテンツ内） ── */
.video-box {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius);
  overflow: hidden;
  background: rgba(61,46,42,.04);
  flex: 1;
  min-height: 0;
}
.video-box iframe,
.video-box video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
}

/* ⑫ slide-video — 動画のみスライド
   使い方:
   <section class="slide slide-video">
     <video controls preload="metadata">
       <source src="assets/video.mp4" type="video/mp4">
     </video>
   </section>
   ---------------------------------------------------------------- */
.slide-video {
  padding: var(--sp-md);
  align-items: center;
  justify-content: center;
  background: #000;
}
.slide-video video {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 0;
}

/* ⑨ workshop — 実習スライド（外枠にアクセント色の太ボーダー） */
.slide-workshop {
  border: 4px solid var(--color-accent);
  gap: var(--sp-lg);
}
.slide-workshop .body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--sp-md);
  flex: 1;
  position: relative;
  z-index: 1;
}

/* ⑩ citation — 出典専用スライド */
.slide-citation {
  justify-content: center;
  gap: var(--sp-md);
}
.slide-citation h2 {
  font-size: var(--text-2xl);
}

/* ============================================================
   追加ユーティリティ
   ============================================================ */

/* ── コードブロック ── */
.code-block {
  background: var(--color-code-bg);
  color: #e8d5c4;
  font-family: var(--font-mono);
  font-size: var(--text-base);
  padding: var(--sp-sm) var(--sp-md);
  border-radius: var(--radius);
  overflow-x: auto;
  line-height: 1.5;
  tab-size: 2;
}
.code-block pre { margin: 0; white-space: pre; }
.code-block .kw  { color: #e0956a; }  /* keyword — アクセント系 */
.code-block .str { color: #c9a87c; }  /* string — ウォームイエロー */
.code-block .cm  { color: #7a6a5f; }  /* comment — muted */
.code-block .fn  { color: #d4c4a8; }  /* function name */
.code-block .num { color: #c9a87c; }  /* number */
.code-block .op  { color: #a08878; }  /* operator */

/* ── 出典エリア（スライド下部） ── */
/* 使い方: <p class="citation">※ 出典: 〜</p> をスライドの最下部に置く */
.slide .citation {
  margin-top: auto;
  font-size: 0.875rem;
  color: var(--color-muted);
  border-top: 1px dashed var(--color-border);
  padding-top: var(--sp-sm);
  line-height: 1.5;
}
.slide .citation a {
  color: var(--color-accent);
  text-decoration: none;
}
.slide .citation a:hover {
  text-decoration: underline;
}
/* 出典リスト */
.citation-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-sm);
  list-style: none;
}
.citation-list li {
  font-size: var(--text-sm);
  color: var(--color-muted);
  line-height: 1.6;
  padding-left: var(--sp-md);
  position: relative;
}
.citation-list li::before {
  content: attr(data-num);
  position: absolute;
  left: 0;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-accent);
  font-weight: var(--weight-bold);
}
.citation-list .cite-title {
  color: var(--color-fg);
  font-weight: var(--weight-medium);
}
.citation-list .cite-url {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  word-break: break-all;
}

/* ============================================================
   スクリーンショット表示パターン
   ============================================================ */

/* ① screen-single — 単体スクショをシャドウ付きで中央表示
   使い方:
   <div class="screen-single">
     <img src="assets/app.png" alt="アプリ画面">
   </div>
   オプション: .screen-single.wide  → 横幅を広げる（デフォルトは80%）
              .screen-single.full  → 幅100%
   ---------------------------------------------------------------- */
.screen-single {
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 1;
  min-height: 0;
}
.screen-single img {
  max-width: 80%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 8px 48px rgba(61,46,42,.18), 0 2px 8px rgba(61,46,42,.08);
  display: block;
}
.screen-single.wide img  { max-width: 92%; }
.screen-single.full img  { max-width: 100%; }

/* ② screen-frame — ブラウザ風フレームで包む
   使い方:
   <div class="screen-frame">
     <div class="frame-bar">
       <div class="frame-dots"><span></span><span></span><span></span></div>
       <div class="frame-url">https://example.com</div>
     </div>
     <img src="assets/app.png" alt="アプリ画面">
   </div>
   オプション: .screen-frame.dark  → ダークモードフレーム
   ---------------------------------------------------------------- */
.screen-frame {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 8px 48px rgba(61,46,42,.18), 0 2px 8px rgba(61,46,42,.08);
}
.screen-frame .frame-bar {
  background: #e8e3de;
  padding: .55rem 1rem;
  display: flex;
  align-items: center;
  gap: .75rem;
  flex-shrink: 0;
  border-bottom: 1px solid rgba(0,0,0,.06);
}
.screen-frame.dark .frame-bar {
  background: #2a2a2a;
  border-bottom-color: rgba(255,255,255,.08);
}
.screen-frame .frame-dots {
  display: flex;
  gap: .35rem;
  flex-shrink: 0;
}
.screen-frame .frame-dots span {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: rgba(61,46,42,.18);
  display: block;
}
.screen-frame .frame-dots span:nth-child(1) { background: #ff5f57; }
.screen-frame .frame-dots span:nth-child(2) { background: #febc2e; }
.screen-frame .frame-dots span:nth-child(3) { background: #28c840; }
.screen-frame .frame-url {
  flex: 1;
  max-width: 480px;
  margin: 0 auto;
  background: rgba(255,255,255,.75);
  border-radius: 5px;
  padding: .2rem .8rem;
  font-size: var(--text-xs);
  font-family: var(--font-mono);
  color: var(--color-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
}
.screen-frame.dark .frame-url {
  background: rgba(255,255,255,.1);
  color: rgba(255,255,255,.5);
}
.screen-frame img {
  width: 100%;
  flex: 1;
  object-fit: cover;
  object-position: top;
  min-height: 0;
  display: block;
}

/* ③ screen-scroll — 縦長スクショをクリップして下端フェード
   縦長のダッシュボード・レポートページを見せるときに使う
   使い方:
   <div class="screen-scroll">
     <img src="assets/dashboard.png" alt="ダッシュボード">
   </div>
   ---------------------------------------------------------------- */
.screen-scroll {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  border-radius: 8px;
  box-shadow: 0 8px 48px rgba(61,46,42,.18), 0 2px 8px rgba(61,46,42,.08);
}
.screen-scroll img {
  width: 100%;
  display: block;
  object-fit: cover;
  object-position: top;
  height: 100%;
}
.screen-scroll::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 72px;
  background: linear-gradient(transparent, rgba(255,255,255,.92));
  pointer-events: none;
}

/* ④ text-screen — テキスト左・スクショ右（グリッド分割）
   両サイドを比率で分割するグリッドレイアウト
   使い方:
   <div class="text-screen">
     <div class="text">
       <h3>機能タイトル</h3>
       <p>説明文</p>
       <ul class="list">…</ul>
     </div>
     <div class="screen">
       <img src="assets/app.png" alt="画面">
     </div>
   </div>
   オプション: .text-screen.reverse  → スクショ左・テキスト右
              .text-screen.wide     → スクショ側を広くする（2fr 3fr → 1fr 2fr）
   ---------------------------------------------------------------- */
.text-screen {
  display: grid;
  grid-template-columns: 2fr 3fr;
  gap: var(--sp-lg);
  flex: 1;
  align-items: center;
  min-height: 0;
}
.text-screen.wide    { grid-template-columns: 1fr 2fr; }
.text-screen.reverse { direction: rtl; }
.text-screen.reverse > * { direction: ltr; }
.text-screen .text {
  display: flex;
  flex-direction: column;
  gap: var(--sp-sm);
}
.text-screen .screen {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  min-height: 0;
}
.text-screen .screen img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 8px 48px rgba(61,46,42,.18), 0 2px 8px rgba(61,46,42,.08);
  display: block;
}

/* ④-b screen-right — テキストが残り幅全体・スクショが右に固定幅で収まるパターン
   「画像を除いた最大幅」でテキストを表示したいときはこちら。
   画像は右端に余白付きで配置され、テキストは自然に伸びて残りスペースを占める。
   使い方:
   <div class="screen-right">
     <div class="text">
       <h3>機能タイトル</h3>
       <p>説明文</p>
       <ul class="list">…</ul>
     </div>
     <div class="screen">
       <img src="assets/app.png" alt="画面">
     </div>
   </div>
   オプション: --screen-w でスクショ幅を上書き（デフォルト 44%）
              .screen-right.narrow → スクショ幅 36%
              .screen-right.wide   → スクショ幅 52%
   ---------------------------------------------------------------- */
.screen-right {
  --screen-w: 44%;
  display: flex;
  align-items: center;
  gap: var(--sp-lg);
  flex: 1;
  min-height: 0;
}
.screen-right.narrow { --screen-w: 36%; }
.screen-right.wide   { --screen-w: 52%; }
.screen-right .text {
  flex: 1;                  /* 画像を除いた残り幅いっぱいに広がる */
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-sm);
}
.screen-right .screen {
  flex-shrink: 0;
  width: var(--screen-w);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-sm);   /* 画像まわりの余白 */
  min-height: 0;
}
.screen-right .screen img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 8px 48px rgba(61,46,42,.18), 0 2px 8px rgba(61,46,42,.08);
  display: block;
}

/* ⑤ screen-split — 複数スクショを横並び（ラベル付き対応）
   使い方:
   <div class="screen-split">
     <div class="screen-item">
       <img src="assets/screen1.png" alt="画面1">
       <span class="screen-label">ラベル</span>
     </div>
     <div class="screen-item">
       <img src="assets/screen2.png" alt="画面2">
       <span class="screen-label">ラベル</span>
     </div>
   </div>
   オプション: .screen-split.cols-3  → 3列に変更
   ---------------------------------------------------------------- */
.screen-split {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-md);
  flex: 1;
  min-height: 0;
  align-items: start;
}
.screen-split.cols-3 { grid-template-columns: repeat(3, 1fr); }
.screen-split .screen-item {
  display: flex;
  flex-direction: column;
  gap: var(--sp-xs);
}
.screen-split .screen-item img {
  width: 100%;
  border-radius: 8px;
  box-shadow: 0 4px 24px rgba(61,46,42,.14), 0 1px 4px rgba(61,46,42,.06);
  display: block;
  object-fit: cover;
  object-position: top;
}
.screen-split .screen-label {
  font-size: var(--text-sm);
  color: var(--color-muted);
  text-align: center;
}

/* ⑥ screen-caption — スクショ + キャプションテキスト
   スクショの下にキャプションを添える
   使い方:
   <figure class="screen-caption">
     <img src="assets/app.png" alt="画面">
     <figcaption>キャプション文</figcaption>
   </figure>
   ---------------------------------------------------------------- */
.screen-caption {
  display: flex;
  flex-direction: column;
  gap: var(--sp-xs);
  flex: 1;
  min-height: 0;
  align-items: center;
}
.screen-caption img {
  max-width: 100%;
  flex: 1;
  min-height: 0;
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 8px 48px rgba(61,46,42,.18), 0 2px 8px rgba(61,46,42,.08);
  display: block;
}
.screen-caption figcaption {
  font-size: var(--text-sm);
  color: var(--color-muted);
  text-align: center;
  line-height: 1.5;
}

/* ── ナビUI ライトテーマ上書き ── */
.slide-counter {
  color: rgba(61,46,42,.3) !important;
}
.slide-nav button {
  background: rgba(61,46,42,.06) !important;
  border-color: rgba(61,46,42,.12) !important;
  color: rgba(61,46,42,.5) !important;
}
.slide-nav button:hover {
  background: rgba(61,46,42,.12) !important;
  color: rgba(61,46,42,.8) !important;
}