/* lesson.css — レッスン詳細ページ */
.lesson-head{margin-bottom:var(--space-5)}
.lesson-head .cluster{margin-bottom:var(--space-3)}
.lesson-goal{
  font-size:1rem;color:var(--color-text-muted);background:var(--color-bg-section);
  border-left:4px solid var(--color-primary);padding:.8em 1.1em;border-radius:0 var(--radius-sm) var(--radius-sm) 0;
  margin-top:var(--space-3);
}
/* 最終更新表示(2026-07-25 AIOスコア引き上げ第3弾 P1-1追加)。lesson-goalの直下に控えめな1行。 */
.lesson-updated-note{
  margin:.5em 0 0;font-size:.78rem;color:var(--color-text-faint);
}
.lesson-body{margin-top:var(--space-6)}

/* 「この記事の要点」(2026-07-25 AIOスコア引き上げ第3弾 P1-3追加)。H1直下・本文/アイキャッチより
   前に置く回答ファーストブロック。summary-boxと役割を混同しないよう、色相はaccent(青)側に寄せ、
   アイコン付きの短い見出し+ドットリストのみに留める(過剰装飾を避ける)。 */
.lesson-key-points{
  margin-top:var(--space-4);background:#fff;border:1px solid var(--color-border);
  border-left:4px solid var(--color-accent);border-radius:var(--radius-md);
  padding:1.05em 1.3em;
}
.lesson-key-points-head{display:flex;align-items:center;gap:.55em;margin-bottom:.6em}
.lesson-key-points-icon{flex:none;width:19px;height:19px;color:var(--color-accent)}
.lesson-key-points-icon svg{width:100%;height:100%}
.lesson-key-points-heading{margin:0;font-size:.96rem;font-weight:800;color:var(--color-primary-dark);letter-spacing:.02em}
.lesson-key-points-list{list-style:none;margin:0;padding:0}
.lesson-key-points-list li{
  position:relative;padding-left:1.4em;margin-bottom:.42em;color:var(--color-navy);
  font-size:.93rem;line-height:1.65;
}
.lesson-key-points-list li:last-child{margin-bottom:0}
.lesson-key-points-list li::before{
  content:"";position:absolute;left:.05em;top:.62em;width:6px;height:6px;border-radius:50%;
  background:var(--color-accent);
}
.lesson-stub{
  background:var(--color-bg-section);border:1px dashed #c9d8ec;border-radius:var(--radius-md);
  padding:var(--space-5);color:var(--color-text-muted);
}
.lesson-stub h4{margin-top:0}
.lesson-stub ul{margin:.6em 0 0}
.lesson-draft-footnote{
  margin-top:var(--space-5);padding-top:var(--space-4);border-top:1px dashed var(--color-border);
  color:var(--color-text-faint);font-size:.85rem;
}
.material-link-card{
  display:flex;align-items:center;gap:var(--space-4);padding:var(--space-4);margin-top:var(--space-4);
  border:1px solid var(--color-border);border-radius:var(--radius-md);background:#fff;
}
.material-link-card .material-icon{
  flex:none;width:48px;height:48px;border-radius:var(--radius-sm);background:var(--color-secondary-light);
  display:flex;align-items:center;justify-content:center;color:var(--color-primary);
}
.material-link-card .material-body{flex:1;min-width:0}
.material-link-card .material-body h4{margin:0 0 .2em}
.material-link-card .material-body p{margin:0;font-size:.85rem;color:var(--color-text-faint)}
.material-link-card .material-icon img{width:26px;height:26px;object-fit:contain}
.tag-row{margin-top:var(--space-4)}

/* 監修者表記(2026-07-25 AIOスコア引き上げP0-4追加)。本文末尾・タグ行の直前に1行で出す控えめな表記。 */
.lesson-supervisor-note{
  margin-top:var(--space-4);font-size:.85rem;color:var(--color-text-faint);
}
.lesson-supervisor-note a{color:var(--color-text-muted);text-decoration:underline}

/* ================= ツールブランド帯(編VIレッスンヘッダ・公式ロゴ表示) ================= */
.lesson-tool-brand{
  display:inline-flex;align-items:center;gap:.55em;margin:.2em 0 .7em;padding:.35em .8em .35em .5em;
  background:var(--color-bg-section);border:1px solid var(--color-border);border-radius:var(--radius-pill);
  font-size:.82rem;font-weight:700;color:var(--color-text-muted);
}
.lesson-tool-brand img{width:20px;height:20px;object-fit:contain;flex:none}

/* ================= 本文タイポグラフィ強化(2026-07-22) ================= */
/* 見出し階層の視覚差: 本文小見出し(h3)に色バーを添えてh1/h2/h4と明確に区別する */
.lesson-body h3{position:relative;padding-left:.9em;margin-top:2.3em}
.lesson-body h3:first-child{margin-top:0}
.lesson-body h3::before{
  content:"";position:absolute;left:0;top:.14em;bottom:.14em;width:4px;border-radius:2px;
  background:linear-gradient(180deg,var(--color-primary),var(--color-accent));
}

/* リード文: 見出しより前の最初の1段落だけをやや大きく・濃く見せて本文への導入を作る */
.lesson-body .lead-paragraph{
  font-size:1.12rem;line-height:1.9;color:var(--color-navy);font-weight:500;margin-bottom:1.3em;
}

/* リスト読みやすさ: 独自ドットマーカー(単色)で既定のブラウザマーカーより視認性を上げる */
.lesson-body ul{list-style:none;padding-left:0;margin:0 0 1.15em}
.lesson-body ul li{position:relative;padding-left:1.5em;margin-bottom:.5em}
.lesson-body ul li:last-child{margin-bottom:0}
.lesson-body ul li::before{
  content:"";position:absolute;left:.1em;top:.6em;width:7px;height:7px;border-radius:50%;
  background:var(--color-accent);
}
/* :not(.lfig-steps):not(.lfig-flow) = 2026-07-24追加の図解DSL(```diagram)が出力する<ol>を
   このジェネリック番号リスト装飾から除外する(lfig-*は専用CSSでレイアウトを完全に自前定義するため)。
   既存コンテンツはこの2クラスを持たないため、この追加自体は既存228本の見た目に一切影響しない。 */
.lesson-body ol:not(.step-list):not(.lfig-steps):not(.lfig-flow){padding-left:1.35em;margin:0 0 1.15em}
.lesson-body ol:not(.step-list):not(.lfig-steps):not(.lfig-flow) li{margin-bottom:.5em;padding-left:.3em}
.lesson-body ol:not(.step-list) li:last-child{margin-bottom:0}

/* 「実践ステップ」直後の番号リスト → ステップカード化(丸番号バッジ＋カード) */
.step-list{list-style:none;padding-left:0;margin:1em 0 1.6em;display:flex;flex-direction:column;gap:.85em}
.step-item{
  display:flex;align-items:flex-start;gap:1em;padding:.95em 1.15em;
  background:var(--color-bg-section);border:1px solid var(--color-border);
  border-left:4px solid var(--color-primary);border-radius:var(--radius-md);
}
.step-num{
  flex:none;width:30px;height:30px;border-radius:50%;color:#fff;font-weight:800;font-size:.95rem;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--color-primary),var(--color-accent));
  box-shadow:0 2px 6px rgba(29,95,168,.25);
}
.step-text{padding-top:.22em;color:var(--color-text);flex:1;min-width:0}

/* 「まとめ」セクション → ハイライトボックス化(見出し＋本文を1つの箱にまとめる) */
.summary-box{
  margin:1.9em 0 1.3em;border:1px solid #cfe0f5;border-left:4px solid var(--color-primary);
  background:var(--color-secondary-light);border-radius:var(--radius-md);padding:1.15em 1.35em;
}
.summary-box-head{display:flex;align-items:center;gap:.55em;margin-bottom:.55em}
.summary-box-icon{flex:none;width:21px;height:21px;color:var(--color-primary)}
.summary-box-icon svg{width:100%;height:100%}
.summary-box-label{margin:0;font-weight:800;color:var(--color-primary-dark);font-size:1.02rem;letter-spacing:.02em}
.summary-box-body p{margin:0 0 .6em;color:var(--color-navy)}
.summary-box-body p:last-child{margin-bottom:0}

/* 「※要確認」「※〜」注記 → 注記スタイル(段落全体が※開始の場合はボックス化・文中埋め込みは強調のみ) */
.note-callout{
  display:flex;gap:.6em;align-items:flex-start;background:var(--color-warning-bg);
  border:1px solid #f0ddb8;border-left:4px solid var(--color-warning);border-radius:var(--radius-sm);
  padding:.8em 1.05em;margin:1.1em 0;font-size:.92em;
}
.note-callout-icon{flex:none;width:16px;height:16px;margin-top:.2em;color:var(--color-warning)}
.note-callout-icon svg{width:100%;height:100%}
.note-callout-text{color:#8a5a12;line-height:1.75}
.note-inline{color:#8a5a12;font-weight:700}

/* 「==text==」マーカー記法 → 蛍光ペン風ハイライト(2026-07-22 ビジュアル実装第2弾)。
   単色文字(既存のテキスト色をそのまま継承・colorは変更しない)＋ライトイエロー系の背景のみで表現する。
   background-clip:textによるグラデ文字は使用しない(CLAUDE.md/base.css方針・単色文字のみ)。
   ライトイエローはWEBMARKSブルー(--color-primary)と対比が強すぎないよう彩度を抑えた暖色にしている。 */
.lesson-body mark.hl{
  background:#FDF0A5;color:inherit;font-weight:inherit;
  padding:.05em .3em;margin:0 -.05em;border-radius:.3em;
  box-decoration-break:clone;-webkit-box-decoration-break:clone;
}
/* 太字の中にマーカーがネストした場合(**==text==**)も、太字の色(navy)を保ったまま背景だけ乗る */
.lesson-body strong mark.hl{color:inherit}

/* ================= フェンス付きコードブロック(```〜```・2026-07-23 AIO CAMP技術レッスン対応) =================
   robots.txt・JSON-LD・GA4正規表現・llms.txt等のコード例表示用(build.py convert_markdown_to_html()が
   ```〜```を<pre class="code-block"><code>…</code></pre>に変換して出力する。中身は事前にhtml.escape
   済みでインライン変換(太字/マーカー/リンク等)は適用されていない)。
   prompts.cssの.prompt-body(ダークネイビー基調・コピー用プロンプト専用)とは用途が異なるため流用せず、
   本文(白基調)と地続きのライトトーンで別途実装する。既存デザイントークンに合わせ、背景=bg-section・
   枠線=border・角丸=radius-sm(8px)を使用する。 */
.lesson-body .code-block{
  margin:1.3em 0;background:var(--color-bg-section);border:1px solid var(--color-border);
  border-radius:var(--radius-sm);padding:14px 16px;overflow-x:auto;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:13.5px;line-height:1.6;color:var(--color-navy);white-space:pre;
}
/* base.cssのグローバルcode{}(チップ風の背景/角丸/padding/配色)を打ち消し、
   コードブロック内では地の文と一体化した表示にする(prompts.cssの.prompt-body codeと同じ考え方)。 */
.lesson-body .code-block code{
  background:transparent;color:inherit;padding:0;font-size:inherit;font-family:inherit;border-radius:0;
}

/* ================= 図解DSL(```diagram・2026-07-24 ブラッシュアップPhase 1追加) =================
   draft本文の```diagram フェンスをbuild.py(_emit_diagram_html)がこの構造化HTMLへ変換する
   (自由HTML直書きは通さない＝XSS/崩れ防止。全テキストはescape後にconvert_inline適用済み)。
   4タイプ共通の外枠は<figure class="lesson-figure" data-figure-type="…">。
   クラス名は"lfig-"(lesson-figure)接頭辞で統一し、既存の.flow-diagram(curriculum.css・編の学習フロー
   SVG)や.step-list(「実践ステップ」見出し自動検出)とは完全に別物であることを名前でも明確にする。 */
.lesson-figure{margin:1.5em 0}
.lesson-figure-caption{
  font-size:.82rem;font-weight:800;color:var(--color-text-faint);letter-spacing:.04em;
  margin:0 0 .7em;text-align:center;
}

/* --- steps: 縦の手順図(番号バッジ＋コネクタ線) --- */
.lesson-body ol.lfig-steps{list-style:none;padding-left:0;margin:0;position:relative}
.lfig-steps::before{
  content:"";position:absolute;left:17px;top:2px;bottom:2px;width:2px;
  background:linear-gradient(180deg,var(--color-primary),var(--color-accent));opacity:.3;
}
.lfig-steps-item{position:relative;display:flex;align-items:flex-start;gap:1em;padding:.5em 0}
.lfig-steps-num{
  position:relative;flex:none;width:36px;height:36px;border-radius:50%;color:#fff;
  font-weight:800;font-size:.92rem;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--color-primary),var(--color-accent));
  box-shadow:0 2px 6px rgba(29,95,168,.25);
}
.lfig-steps-text{padding-top:.5em;color:var(--color-text);flex:1;min-width:0;font-size:.95rem}

/* --- flow: 横の流れ図(矢印チェーン。SPは縦落ち) ---
   矢印は既存のサイドバー展開シェブロン(components.css .sidebar details>summary::after)と同じ
   「border-right+border-bottom を rotate」技法を再利用する(横向き=rotate(-45deg)・
   下向き=rotate(45deg)。この2値の組み合わせは既にこのコードベースで実証済み)。 */
.lesson-body ol.lfig-flow{
  list-style:none;padding-left:0;margin:0;display:flex;flex-wrap:wrap;align-items:stretch;gap:0;
}
.lfig-flow-item{
  flex:1 1 110px;min-width:100px;margin-right:28px;padding:.85em 1em;
  background:var(--color-bg-section);border:1px solid var(--color-border);border-radius:var(--radius-md);
  display:flex;align-items:center;justify-content:center;text-align:center;
  font-weight:700;font-size:.88rem;color:var(--color-navy);position:relative;
}
.lfig-flow-item:last-child{margin-right:0}
.lfig-flow-item:not(:last-child)::after{
  content:"";position:absolute;top:50%;right:-19px;width:10px;height:10px;
  border-right:2px solid var(--color-accent);border-bottom:2px solid var(--color-accent);
  transform:translateY(-50%) rotate(-45deg);
}
@media (max-width:640px){
  .lesson-body ol.lfig-flow{flex-direction:column}
  /* flex-direction:columnではflexショートハンドの第3項(flex-basis)が「幅」ではなく「高さ」の
     目安になる。デスクトップ側の"flex:1 1 110px"をそのまま引き継ぐと各アイテムが110px一律の
     縦長ボックスになってしまう(2026-07-24 Browser目視QAで発覚)ため、ここでflex-basisをautoに
     戻し、内容に応じた自然な高さに戻す。 */
  .lfig-flow-item{flex:0 0 auto;margin-right:0;margin-bottom:28px;width:100%}
  .lfig-flow-item:last-child{margin-bottom:0}
  .lfig-flow-item:not(:last-child)::after{
    top:auto;right:auto;left:50%;bottom:-19px;transform:translateX(-50%) rotate(45deg);
  }
}

/* --- compare: 2カラム比較(vs構図)。左列=primary/右列=accentの2トーンで対比させる --- */
.lfig-compare{display:grid;grid-template-columns:1fr auto 1fr;gap:var(--space-4)}
.lfig-compare-col{
  background:var(--color-bg-section);border:1px solid var(--color-border);border-top:3px solid var(--color-accent);
  border-radius:var(--radius-md);padding:1.1em 1.3em;
}
.lfig-compare-col:first-child{border-top-color:var(--color-primary)}
.lfig-compare-heading{margin:0 0 .6em;font-size:.96rem;text-align:center;color:var(--color-navy)}
.lfig-compare-col ul{margin-bottom:0}
.lfig-compare-vs{
  align-self:center;width:38px;height:38px;border-radius:50%;background:#fff;
  border:2px solid var(--color-border);display:flex;align-items:center;justify-content:center;
  font-size:.68rem;font-weight:800;color:var(--color-text-faint);box-shadow:var(--shadow-card);
}
@media (max-width:640px){
  .lfig-compare{grid-template-columns:1fr}
  .lfig-compare-vs{justify-self:center;margin:-.2em 0}
}

/* --- cards: 要点カードグリッド(auto-fitで2〜3列。項目が少ない時は自動的にその数ぶんの列になる) --- */
.lfig-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:var(--space-3)}
.lfig-cards-item{
  background:var(--color-bg-section);border:1px solid var(--color-border);border-left:3px solid var(--color-primary);
  border-radius:var(--radius-md);padding:1em 1.2em;
}
.lfig-cards-title{margin:0 0 .35em;font-size:.94rem;font-weight:800;color:var(--color-navy)}
.lfig-cards-desc{margin:0;font-size:.85rem;color:var(--color-text-muted)}

/* ================= 意味付きボックス4種(```point/caution/term/example・2026-07-24追加) =================
   色は必ず既存CSS変数の実績ペアを再利用し、新規カラー値は追加しない(仕様書の「色の役割固定」を実装で担保):
     point   = .summary-boxと同じ配色(border-left primary・bg secondary-light・label primary-dark)
     caution = .note-calloutと同じ配色(border-left warning・bg warning-bg・label #8a5a12)
     term    = ネイビー系(border-left navy・bg bg-section・label navy)。非エンジニア向け用語解説の核
     example = badge-status-doneと同じ配色(border-left success・bg success-bg・label success) */
.info-box{
  margin:1.3em 0;border:1px solid var(--color-border);border-left:4px solid var(--color-border);
  border-radius:var(--radius-md);padding:1.05em 1.3em;
}
.info-box-head{display:flex;align-items:center;gap:.55em;margin-bottom:.5em}
.info-box-icon{flex:none;width:19px;height:19px}
.info-box-icon svg{width:100%;height:100%}
.info-box-label{margin:0;font-weight:800;font-size:.95rem;letter-spacing:.02em}
.info-box-body p{margin:0 0 .6em;color:var(--color-text)}
.info-box-body p:last-child{margin-bottom:0}

.info-box-point{border-color:#cfe0f5;border-left-color:var(--color-primary);background:var(--color-secondary-light)}
.info-box-point .info-box-icon{color:var(--color-primary)}
.info-box-point .info-box-label{color:var(--color-primary-dark)}

.info-box-caution{border-color:#f0ddb8;border-left-color:var(--color-warning);background:var(--color-warning-bg)}
.info-box-caution .info-box-icon{color:var(--color-warning)}
.info-box-caution .info-box-label{color:#8a5a12}

.info-box-term{border-color:var(--color-border);border-left-color:var(--color-navy);background:var(--color-bg-section)}
.info-box-term .info-box-icon{color:var(--color-navy)}
.info-box-term .info-box-label{color:var(--color-navy)}

.info-box-example{border-color:#cdeadb;border-left-color:var(--color-success);background:var(--color-success-bg)}
.info-box-example .info-box-icon{color:var(--color-success)}
.info-box-example .info-box-label{color:var(--color-success)}

/* ================= レッスン内スライドビューア(2026-07-24・旧<video>埋め込みの後継) =================
   スライド仕様準拠。スライド原稿が存在するレッスンだけ、
   旧.video-placeholderの位置にこのビューアが差し込まれる(build.py render_slide_viewer_html())。
   JSはlesson.js setupSlideViewers()が.slide-paneの[hidden]属性を付け替えるだけの薄い実装
   (キーボード左右キーには反応しない・既存のレッスン間ページャーとの衝突を避けるため仕様書で明示)。 */
.slide-viewer{margin-bottom:var(--space-5)}

.slide-viewer-frame{
  position:relative;aspect-ratio:16/9;border-radius:var(--radius-lg);overflow:hidden;
  border:1px solid var(--color-border);background:var(--color-bg);box-shadow:var(--shadow-card);
  cursor:pointer;
}
/* 左右タップ移動(2026-07-24・鈴木さん要望)のカーソル表現: 左1/3=前へ・右2/3=次へだが、
   マウス移動を監視するJSやゾーン別の重ね要素を追加してまでw-resize/e-resizeを出し分けるのは
   過剰と判断し(タッチ端末ではカーソル自体が出ないため恩恵が無いことも理由)、frame全体を
   pointerで統一する(仕様書「pointerで統一可・実装judgment可」に基づく判断)。 */
/* モバイルは「CSSのみで16:9維持（縦積みに自然縮小）」(仕様書§ビューアの要件)の実装:
   16:9を固定し続けると狭幅で極端に低く(例: 320px幅で高さ約180px)なり、diagram/bulletsの情報量を
   収めきれなくなるため、640px以下ではaspect-ratioを外し内容に応じた自然な高さへフォールバックする
   (=中身が縦に自然に積み上がる。デスクトップ/タブレットは16:9を維持=JSで比率を作り直したりはしない)。 */
@media (max-width:640px){
  .slide-viewer-frame{aspect-ratio:auto}
  .slide-pane{height:auto}
}

.slide-pane{display:flex;flex-direction:column;width:100%;height:100%}
/* [hidden]属性は同程度のspecificityを持つCSSクラスセレクタで上書きされてしまう既知の罠がある
   (author由来の.slide-pane{display:flex}がUA既定の[hidden]{display:none}に勝ってしまう)ため、
   明示的にdisplay:noneへ戻す。JS(setupSlideViewers)はこの属性の付け外しだけで表示制御する。 */
.slide-pane[hidden]{display:none}

.slide-pane-chrome{
  flex:none;display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);
  padding:.5em .9em;border-bottom:1px solid var(--color-border);background:var(--color-bg-section);
  font-size:.66rem;
}
.slide-pane-kicker{font-weight:700;letter-spacing:.03em;color:var(--color-text-faint)}
.slide-pane-lid{margin-left:.55em;color:var(--color-primary);font-weight:800}
.slide-pane-page{color:var(--color-text-faint);font-variant-numeric:tabular-nums}

.slide-pane-body{
  flex:1;min-height:0;display:flex;flex-direction:column;justify-content:center;overflow-y:auto;
  padding:clamp(1em,3.2vw,1.8em) clamp(1.1em,4vw,2.3em);
}

/* --- title layout(表紙・および区切り/統計ハイライトへの再利用) --- */
.slide-pane-body-title{align-items:center;text-align:center;gap:.5em}
.slide-title-heading{
  margin:0;font-size:clamp(1.7rem,5.4vw,2.7rem);font-weight:800;color:var(--color-navy);line-height:1.28;
}
.slide-title-sub{margin:0;font-size:clamp(1.05rem,3vw,1.32rem);color:var(--color-text-muted);max-width:30em;line-height:1.55}

/* --- bullets / diagram 共通見出し(本文h3と同じ色バー方式で視覚言語を揃える) --- */
.slide-bullets-heading{
  margin:0 0 .6em;padding-left:.75em;position:relative;flex:none;
  font-size:clamp(1.3rem,4vw,1.8rem);font-weight:800;color:var(--color-navy);
}
.slide-bullets-heading::before{
  content:"";position:absolute;left:0;top:.14em;bottom:.14em;width:4px;border-radius:2px;
  background:linear-gradient(180deg,var(--color-primary),var(--color-accent));
}

/* --- bullets layout --- */
.slide-bullets-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.7em;overflow-y:auto}
.slide-bullets-list li{
  position:relative;padding-left:1.25em;font-size:clamp(1.05rem,2.9vw,1.38rem);line-height:1.6;color:var(--color-text);
}
.slide-bullets-list li::before{
  content:"";position:absolute;left:0;top:.6em;width:7px;height:7px;border-radius:50%;
  background:var(--color-accent);
}

/* --- summary layout: 色違い(仕様書「まとめ・色違い」)。--color-primary→--color-primary-dark の
   単色グラデ(白文字)。両端とも白文字コントラストを計算済み(#1D5FA8上=6.47:1 / #154880上=9.24:1、
   いずれもAA(4.5:1)を大きく上回るため、.video-placeholderのような追加スクリム層は不要)。
   ドットグリッド地紋だけ.video-placeholderと共通の技法を薄く重ねてブランドの一貫性を出す。 */
.slide-pane[data-layout="summary"] .slide-pane-body{
  background:
    radial-gradient(circle at 1.5px 1.5px,rgba(255,255,255,.14) 1.5px,transparent 0) 0 0/22px 22px,
    linear-gradient(135deg,var(--color-primary) 0%,var(--color-primary-dark) 100%);
}
.slide-pane[data-layout="summary"] .slide-bullets-heading{color:#fff}
.slide-pane[data-layout="summary"] .slide-bullets-heading::before{background:#fff;opacity:.85}
.slide-pane[data-layout="summary"] .slide-bullets-list li{color:rgba(255,255,255,.94)}
.slide-pane[data-layout="summary"] .slide-bullets-list li::before{background:#fff}
.slide-pane[data-layout="summary"] .slide-pane-chrome{background:rgba(255,255,255,.1);border-bottom-color:rgba(255,255,255,.2)}
.slide-pane[data-layout="summary"] .slide-pane-kicker,
.slide-pane[data-layout="summary"] .slide-pane-page{color:rgba(255,255,255,.92)}
.slide-pane[data-layout="summary"] .slide-pane-lid{color:#fff}

/* --- diagram layout(2026-07-24 v1.1「ビジュアル第一原則」・主役レイアウト) ---
   本文の```diagram(_emit_diagram_html)と全く同じHTML(.lesson-figure/.lfig-*)をそのまま流用し、
   .slide-diagram-stageの中でスケールアップする。lesson-body側の既存ルール自体は無改修のまま
   フォントサイズ・余白だけをスライド用に拡大再定義する(本文側227本のdiagram DSL表示に影響ゼロ)。 */
.slide-pane-body-diagram{gap:.4em}
.slide-diagram-stage{
  flex:1;min-height:0;display:flex;align-items:center;justify-content:center;overflow-y:auto;
}
.slide-diagram-stage .lesson-figure{margin:0;width:100%}
.slide-diagram-stage .lesson-figure-caption{font-size:1rem}

/* 【重要】.lfig-steps/.lfig-flowの土台(display:flex等)はbase側で「.lesson-body ol.lfig-steps」
   「.lesson-body ol.lfig-flow」と .lesson-body祖先必須で定義されている(本文プローズ内でのみ
   diagram DSLが使われる前提だったため)。スライドビューアは.lesson-bodyの外(.slide-diagram-stage配下)
   にこの同じHTMLを描画するため、祖先条件が一致せずdisplay:flexが丸ごと無効になり<ol>が既定の
   display:blockへ落ちて縦積みが崩れる不具合があった(2026-07-24 Browser目視QAで発見・是正)。
   ここで.slide-diagram-stage祖先版を追加定義し、本文側の定義(:not(.lfig-steps):not(.lfig-flow)の
   除外ルールも含め)には一切触れずスライド側だけを補う。 */
.slide-diagram-stage ol.lfig-steps{list-style:none;padding-left:0;margin:0;position:relative}
.slide-diagram-stage ol.lfig-flow{list-style:none;padding-left:0;margin:0;display:flex;flex-wrap:wrap;align-items:stretch;gap:0}

.slide-diagram-stage .lfig-steps-item{padding:.6em 0}
.slide-diagram-stage .lfig-steps-num{width:48px;height:48px;font-size:1.15rem}
.slide-diagram-stage .lfig-steps-text{font-size:clamp(1.05rem,2.9vw,1.35rem);padding-top:.45em;line-height:1.55}

.slide-diagram-stage .lfig-flow-item{font-size:clamp(1rem,2.7vw,1.26rem);padding:1.05em 1.2em}
@media (max-width:640px){
  .slide-diagram-stage ol.lfig-flow{flex-direction:column}
}

.slide-diagram-stage .lfig-compare-col{padding:1.3em 1.5em}
.slide-diagram-stage .lfig-compare-heading{font-size:clamp(1.2rem,3.4vw,1.5rem);font-weight:800}
.slide-diagram-stage .lfig-compare-col ul li{font-size:clamp(1rem,2.7vw,1.26rem);line-height:1.55}
.slide-diagram-stage .lfig-compare-vs{width:54px;height:54px;font-size:.92rem}

.slide-diagram-stage .lfig-cards{gap:var(--space-4)}
.slide-diagram-stage .lfig-cards-item{padding:1.3em 1.5em}
.slide-diagram-stage .lfig-cards-title{font-size:clamp(1.15rem,3.2vw,1.45rem)}
.slide-diagram-stage .lfig-cards-desc{font-size:clamp(1rem,2.6vw,1.22rem);line-height:1.55}

/* --- 送り操作(◀▶ボタン・カウンター・ドット) --- */
.slide-viewer-controls{display:flex;align-items:center;gap:var(--space-3);margin-top:var(--space-3)}
.slide-nav-btn{
  flex:none;width:46px;height:46px;border-radius:50%;border:1px solid var(--color-border);
  background:#fff;color:var(--color-primary);display:flex;align-items:center;justify-content:center;
  cursor:pointer;padding:0;
}
.slide-nav-btn svg{width:21px;height:21px}
.slide-nav-btn:hover:not(:disabled){background:var(--color-secondary-light);border-color:var(--color-primary)}
.slide-nav-btn:disabled{opacity:.35;cursor:default}
.slide-viewer-progress{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:.4em}
.slide-counter{font-size:1rem;font-weight:700;color:var(--color-text-muted);font-variant-numeric:tabular-nums}
.slide-dots{display:flex;flex-wrap:wrap;justify-content:center;gap:.4em;max-width:100%}
.slide-dot{width:10px;height:10px;border-radius:50%;border:0;padding:0;background:var(--color-border);cursor:pointer}

/* --- ジャーナル関連記事枠(2026-07-24 TASK-167 WP-C3) --- */
.related-articles{
  margin-top:var(--space-6);padding:1.2em 1.4em;background:var(--color-bg-section);
  border:1px solid var(--color-border);border-left:4px solid var(--color-accent);
  border-radius:0 var(--radius-md) var(--radius-md) 0;
}
.related-articles-heading{margin:0 0 .3em;font-size:1.05rem;font-weight:800;color:var(--color-navy)}
.related-articles-note{margin:0 0 .8em;font-size:.82rem;color:var(--color-text-faint)}
.related-articles-list{list-style:none;margin:0;padding:0;display:grid;gap:.55em}
.related-articles-item a{
  display:flex;align-items:center;gap:.5em;padding:.6em .85em;border-radius:var(--radius-sm);
  background:#fff;border:1px solid var(--color-border);color:var(--color-primary);font-weight:600;
  font-size:.92rem;line-height:1.5;text-decoration:none;
}
.related-articles-item a:hover{border-color:var(--color-primary);background:var(--color-secondary-light)}
.related-articles-item a svg{flex:none;width:15px;height:15px}
/* JOURNAL_LIVE=False時(build.py参照)の非リンク表示。<a>と同じ見た目の箱をベースに、
   カーソル・ホバー色を外して「押せない」ことを視覚的にも伝え、右側に「近日公開」バッジを添える。 */
.related-articles-item--pending .related-articles-pending-link{
  display:flex;align-items:center;gap:.5em;padding:.6em .85em;border-radius:var(--radius-sm);
  background:#fff;border:1px solid var(--color-border);color:var(--color-text-muted);font-weight:600;
  font-size:.92rem;line-height:1.5;
}
.related-articles-item--pending svg{flex:none;width:15px;height:15px;opacity:.55}
.related-articles-soon-badge{
  margin-left:auto;flex:none;font-size:.68rem;font-weight:800;letter-spacing:.02em;
  padding:.25em .65em;border-radius:var(--radius-pill);white-space:nowrap;
  background:var(--color-warning-bg);color:var(--color-warning);border:1px solid #f0dcb8;
}
.slide-dot.is-active{background:var(--color-primary);width:26px;border-radius:5px}

/* ================= NotebookLM自動生成素材(トライアル)埋め込み(2026-07-25導入) =================
   src/assets/nblm/{lesson_id}/ 配下の素材(eyecatch/slides/audio/video)を検出したレッスンだけ、
   build.py render_nblm_*_html()がこのブロックを出力する(未検出レッスンはHTML自体が出ないため
   このCSSも実質発火しない)。既存.slide-viewer系とは完全に独立したクラス名(nblm-*)を用い、
   JS(lesson.js末尾に別IIFEで追記)も既存setupSlideViewers()と衝突しない。 */
.nblm-badge{
  display:inline-flex;align-items:center;gap:.4em;padding:.3em .75em;margin-bottom:.6em;
  background:var(--color-warning-bg);color:var(--color-warning);border:1px solid #f0dcb8;
  border-radius:var(--radius-pill);font-size:.72rem;font-weight:700;letter-spacing:.02em;
}

/* --- ①アイキャッチ(本文最上部・既存アイキャッチ帯/スライドビューアより上に大きく表示) --- */
.nblm-eyecatch{margin-bottom:var(--space-4)}
.nblm-eyecatch img{
  display:block;width:100%;max-height:420px;object-fit:cover;border-radius:var(--radius-lg);
  border:1px solid var(--color-border);box-shadow:var(--shadow-card);
}

/* --- ②画像スライドビューア(既存.slide-viewerと同じ見た目の枠・独立クラス名・<img>切替式) --- */
.nblm-slides{margin-bottom:var(--space-5)}
.nblm-slide-frame{
  position:relative;aspect-ratio:16/9;border-radius:var(--radius-lg);overflow:hidden;
  border:1px solid var(--color-border);background:var(--color-bg-section);box-shadow:var(--shadow-card);
}
.nblm-slide-pane{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.nblm-slide-pane[hidden]{display:none}
.nblm-slide-pane img{width:100%;height:100%;object-fit:contain;background:#0b1b2e}
@media (max-width:640px){
  .nblm-slide-frame{aspect-ratio:4/3}
}
.nblm-slide-controls{display:flex;align-items:center;gap:var(--space-3);margin-top:var(--space-3)}
.nblm-slide-nav{
  flex:none;width:46px;height:46px;border-radius:50%;border:1px solid var(--color-border);
  background:#fff;color:var(--color-primary);display:flex;align-items:center;justify-content:center;
  cursor:pointer;padding:0;
}
.nblm-slide-nav svg{width:21px;height:21px}
.nblm-slide-nav:hover:not(:disabled){background:var(--color-secondary-light);border-color:var(--color-primary)}
.nblm-slide-nav:disabled{opacity:.35;cursor:default}
.nblm-slide-progress{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:.4em}
.nblm-slide-counter{font-size:1rem;font-weight:700;color:var(--color-text-muted);font-variant-numeric:tabular-nums}
.nblm-slide-dots{display:flex;flex-wrap:wrap;justify-content:center;gap:.4em;max-width:100%}
.nblm-slide-dot{width:10px;height:10px;border-radius:50%;border:0;padding:0;background:var(--color-border);cursor:pointer}
.nblm-slide-dot.is-active{background:var(--color-primary);width:26px;border-radius:5px}

/* --- ③音声/動画プレーヤー(本文最後・前後レッスンナビの前) --- */
.nblm-media{margin-top:var(--space-6);padding-top:var(--space-5);border-top:1px dashed var(--color-border)}
.nblm-media-item{margin-top:var(--space-3)}
.nblm-media-item:first-of-type{margin-top:var(--space-2)}
.nblm-media-label{margin:0 0 .4em;font-size:.85rem;font-weight:700;color:var(--color-text-muted)}
.nblm-media-item audio{width:100%}
.nblm-media-item video{
  display:block;width:100%;max-width:100%;border-radius:var(--radius-md);
  border:1px solid var(--color-border);background:#000;
}