/*
 * lms-doc.css — LMSドキュメントHTML 共通スタイル（Phase A）
 *
 * 集約元:
 *   - .claude/rules/internal-document-html.md §4 カラーシステム（:root）
 *   - .claude/rules/internal-document-html.md §5 レイアウト・基盤CSS
 *   - .claude/rules/internal-document-html.md §6.8 ハブCSS
 *   - .claude/rules/internal-document-html.md §6.9 機能IDポップアップCSS
 *   - .claude/rules/internal-document-html.md §5.1 Phase B 拡張（デザインシステム・本ファイル末尾）
 *
 * 改変禁止（§9-3）。各ブロックはコメント構造・順序を含めて正本と1:1。
 */

/* ============================================================
 * §4 カラーシステム（:root）
 * ============================================================ */

:root {
  /* ===== 背景・面 ===== */
  --doc-bg: #F1F5F9;            /* ページ背景 */
  --doc-surface: #FFFFFF;       /* カード・テーブル・バー背景 */
  --doc-surface-alt: #F8FAFC;   /* テーブルヘッダ・ホバー・淡い面 */

  /* ===== テキスト ===== */
  --doc-text: #1F2937;          /* 本文・見出し */
  --doc-text-secondary: #4B5563;/* 補足・テーブル本文 */
  --doc-text-muted: #94A3B8;    /* メタ情報・プレースホルダー */

  /* ===== ボーダー ===== */
  --doc-border: #E5E7EB;        /* 標準境界 */
  --doc-border-strong: #CBD5E1; /* 強調境界（テーブルヘッダ下線等） */

  /* ===== アクセント（リンク・現在地・節番号） ===== */
  --doc-accent: #2563EB;
  --doc-accent-soft: #EFF6FF;

  /* ===== フェーズ識別 ===== */
  --ph1-bg: #DBEAFE; --ph1-text: #1D4ED8; --ph1-bd: #93C5FD;
  --ph2-bg: #FEF3C7; --ph2-text: #B45309; --ph2-bd: #FCD34D;
  --ph3-bg: #EDE9FE; --ph3-text: #6D28D9; --ph3-bd: #C4B5FD;

  /* ===== 注記ボックス ===== */
  --note-bg: #F8FAFC; --note-bd: #2563EB;
  --warn-bg: #FFFBEB; --warn-bd: #D97706;

  /* ===== レイアウト寸法 ===== */
  --doc-topbar-h: 56px;
  --doc-toc-w: 280px;
  --doc-content-maxw: 980px;

  /* ===== 角丸・影 ===== */
  --doc-radius: 8px;
  --doc-radius-sm: 5px;
  --doc-shadow-sm: 0 1px 2px rgba(15,23,42,.06);
  --doc-shadow: 0 1px 3px rgba(15,23,42,.08), 0 1px 2px rgba(15,23,42,.04);
}

/* ============================================================
 * §5 レイアウト・基盤CSS
 * ============================================================ */

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--doc-topbar-h) + 16px); }
body {
  margin: 0;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 15px; line-height: 1.8;
  color: var(--doc-text); background: var(--doc-bg);
  -webkit-font-smoothing: antialiased;
}

/* ===== トップバー ===== */
.doc-topbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  height: var(--doc-topbar-h);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 20px; background: var(--doc-surface);
  border-bottom: 1px solid var(--doc-border); box-shadow: var(--doc-shadow-sm);
}
.doc-topbar-title { font-size: 15px; font-weight: 700; display: flex; align-items: center; gap: 10px; }
.doc-topbar-title .doc-tag {
  font-size: 11px; font-weight: 600; color: var(--doc-text-muted);
  border: 1px solid var(--doc-border-strong); border-radius: 999px; padding: 2px 10px;
}
.doc-topbar-right { display: flex; align-items: center; gap: 14px; }
.doc-topbar-meta { font-size: 12px; color: var(--doc-text-muted); }
.doc-toc-toggle {
  display: none; border: 1px solid var(--doc-border-strong); background: var(--doc-surface);
  border-radius: var(--doc-radius-sm); padding: 6px 10px; font-size: 13px;
  cursor: pointer; font-family: inherit; color: var(--doc-text);
}
.doc-home-link {
  font-size: 13px; color: var(--doc-text-secondary); text-decoration: none; white-space: nowrap;
  border: 1px solid var(--doc-border-strong); background: var(--doc-surface);
  border-radius: var(--doc-radius-sm); padding: 5px 10px;
}
.doc-home-link:hover { background: var(--doc-surface-alt); color: var(--doc-text); }

/* ===== レイアウト ===== */
.doc-layout { display: flex; padding-top: var(--doc-topbar-h); }

/* ===== サイドTOC ===== */
.doc-toc {
  position: fixed; top: var(--doc-topbar-h); left: 0;
  width: var(--doc-toc-w); height: calc(100vh - var(--doc-topbar-h));
  overflow-y: auto; padding: 24px 16px 48px;
  background: var(--doc-surface); border-right: 1px solid var(--doc-border);
}
.doc-toc h2 {
  font-size: 11px; font-weight: 700; letter-spacing: .08em;
  color: var(--doc-text-muted); margin: 0 0 12px 8px;
}
.doc-toc ul { list-style: none; margin: 0; padding: 0; }
.doc-toc > ul > li > a { font-weight: 600; }
.doc-toc a {
  display: block; padding: 5px 10px; border-radius: var(--doc-radius-sm);
  font-size: 13px; color: var(--doc-text-secondary); text-decoration: none;
  border-left: 2px solid transparent;
}
.doc-toc a:hover { background: var(--doc-surface-alt); color: var(--doc-text); }
.doc-toc a.active {
  background: var(--doc-accent-soft); color: var(--doc-accent);
  border-left-color: var(--doc-accent); font-weight: 600;
}
.doc-toc ul ul a { padding-left: 22px; font-size: 12.5px; font-weight: 400; }

/* ===== メイン ===== */
.doc-main { flex: 1; min-width: 0; margin-left: var(--doc-toc-w); }
.doc-content { max-width: var(--doc-content-maxw); margin: 0 auto; padding: 36px 40px 80px; }

/* ===== ドキュメントヘッダー ===== */
.doc-header { margin-bottom: 28px; padding-bottom: 24px; border-bottom: 2px solid var(--doc-border); }
.doc-header h1 { font-size: 28px; font-weight: 700; line-height: 1.4; margin: 0 0 8px; }
.doc-header .doc-subtitle { font-size: 15px; color: var(--doc-text-secondary); margin: 0 0 16px; }
.doc-meta-list { display: flex; flex-wrap: wrap; gap: 6px 20px; font-size: 13px; color: var(--doc-text-muted); }
.doc-meta-list span strong { color: var(--doc-text-secondary); font-weight: 600; margin-right: 4px; }

/* ===== セクション・見出し ===== */
.doc-content section { scroll-margin-top: calc(var(--doc-topbar-h) + 16px); }
.doc-content h2 {
  font-size: 22px; font-weight: 700; margin: 40px 0 16px;
  padding-bottom: 8px; border-bottom: 1px solid var(--doc-border);
}
.doc-content h2 .sec-no { color: var(--doc-accent); margin-right: 8px; }
.doc-content h3 { font-size: 17px; font-weight: 700; margin: 28px 0 12px; }
.doc-content h4 { font-size: 15px; font-weight: 700; margin: 20px 0 8px; color: var(--doc-text-secondary); }
.doc-content p { margin: 0 0 14px; }

/* 領域見出し（フェーズ分類等） */
.area-heading { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.area-tag {
  font-size: 12px; font-weight: 600; color: var(--doc-text-secondary);
  background: var(--doc-surface-alt); border: 1px solid var(--doc-border);
  border-radius: 999px; padding: 2px 12px;
}

/* ===== テーブル ===== */
.doc-table-wrap {
  overflow-x: auto; margin: 0 0 20px;
  border: 1px solid var(--doc-border); border-radius: var(--doc-radius);
  box-shadow: var(--doc-shadow-sm);
}
table.doc-table { width: 100%; border-collapse: collapse; font-size: 13.5px; background: var(--doc-surface); }
table.doc-table thead th {
  background: var(--doc-surface-alt); text-align: left; font-weight: 600;
  font-size: 12.5px; color: var(--doc-text-secondary); white-space: nowrap;
  padding: 10px 14px; border-bottom: 2px solid var(--doc-border-strong);
}
table.doc-table tbody td { padding: 10px 14px; border-bottom: 1px solid var(--doc-border); vertical-align: top; }
table.doc-table tbody tr:last-child td { border-bottom: none; }
table.doc-table tbody tr:hover { background: var(--doc-surface-alt); }
table.doc-table td.num, table.doc-table th.num { text-align: right; white-space: nowrap; }
.doc-content code, table.doc-table code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .88em; background: var(--doc-surface-alt);
  border: 1px solid var(--doc-border); border-radius: 4px; padding: 1px 5px;
}

/* ===== バッジ ===== */
.fid {
  display: inline-block; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px; font-weight: 600; color: var(--doc-text-secondary);
  background: var(--doc-surface-alt); border: 1px solid var(--doc-border);
  border-radius: var(--doc-radius-sm); padding: 1px 7px; white-space: nowrap;
}
.ph {
  display: inline-block; font-size: 12px; font-weight: 700;
  border-radius: 999px; padding: 1px 10px; border: 1px solid transparent; white-space: nowrap;
}
.ph-1 { background: var(--ph1-bg); color: var(--ph1-text); border-color: var(--ph1-bd); }
.ph-2 { background: var(--ph2-bg); color: var(--ph2-text); border-color: var(--ph2-bd); }
.ph-3 { background: var(--ph3-bg); color: var(--ph3-text); border-color: var(--ph3-bd); }

/* ===== 凡例 ===== */
.doc-legend {
  display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center;
  padding: 14px 18px; margin: 0 0 24px; background: var(--doc-surface);
  border: 1px solid var(--doc-border); border-radius: var(--doc-radius); font-size: 13px;
}
.doc-legend .legend-label { font-weight: 600; color: var(--doc-text-secondary); }
.doc-legend .legend-item { display: flex; align-items: center; gap: 6px; }

/* ===== 注記ボックス ===== */
.doc-note {
  padding: 12px 16px; margin: 0 0 20px; background: var(--note-bg);
  border-left: 4px solid var(--note-bd); border-radius: 0 var(--doc-radius-sm) var(--doc-radius-sm) 0;
  font-size: 13.5px; color: var(--doc-text-secondary);
}
.doc-note.warn { background: var(--warn-bg); border-left-color: var(--warn-bd); }
.doc-note strong { color: var(--doc-text); }

/* ===== フッター ===== */
.doc-footer { margin-top: 48px; padding-top: 20px; border-top: 1px solid var(--doc-border); font-size: 12px; color: var(--doc-text-muted); }

/* ===== コードブロック（Phase A 拡張）=====
 * .doc-content code のインラインスタイル（背景・ボーダー・padding）が
 * <pre><code> 内にも継承されて複数行が単一の色塊に見える問題への対応。
 * pre はブロックレベル・overflow-x スクロール、内部 code はインラインスタイル打ち消し。
 */
.doc-content pre {
  background: var(--doc-surface-alt);
  border: 1px solid var(--doc-border);
  border-radius: var(--doc-radius);
  padding: 14px 16px;
  margin: 0 0 20px;
  overflow-x: auto;
  font-size: 12.5px;
  line-height: 1.6;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color: var(--doc-text-secondary);
}
.doc-content pre code {
  background: transparent;
  border: none;
  padding: 0;
  color: inherit;
  font-size: inherit;
  font-family: inherit;
  white-space: pre;
  display: block;
}

/* ===== テーブル列別クラス（Phase A 拡張）=====
 * 折り返してほしくない列（No・タグ・コード風値）と、極端に潰れてほしくない列（説明主体）を
 * クラスで明示制御する。正本 §6.3.1 の選択指針に従って各テーブルに付与する。
 * `.num`（既存）は `.col-num` のエイリアス。互換のため両方受ける。
 */
table.doc-table th.col-num, table.doc-table td.col-num,
table.doc-table th.num,     table.doc-table td.num     { white-space: nowrap; text-align: right; }
table.doc-table th.col-tag, table.doc-table td.col-tag { white-space: nowrap; }
table.doc-table th.col-code, table.doc-table td.col-code { white-space: nowrap; }
table.doc-table th.col-desc, table.doc-table td.col-desc { min-width: 280px; }

/* 広テーブル：5列以上または長文列を複数持つテーブルに <table class="doc-table doc-table-wide"> で付与。
 * min-width で最低幅を確保し、.doc-table-wrap の overflow-x: auto に横スクロールを委ねる。
 */
table.doc-table.doc-table-wide { min-width: 1200px; }

/* ===== レスポンシブ ===== */
@media (max-width: 920px) {
  .doc-toc { transform: translateX(-100%); transition: transform .2s ease; z-index: 90; box-shadow: var(--doc-shadow); }
  .doc-toc.open { transform: translateX(0); }
  .doc-main { margin-left: 0; }
  .doc-toc-toggle { display: inline-block; }
  .doc-content { padding: 24px 18px 64px; }
  .doc-header h1 { font-size: 23px; }
  /* モバイルでは広テーブルの min-width を無効化しない（横スクロールで対応） */
  table.doc-table th.col-desc, table.doc-table td.col-desc { min-width: 200px; }
}

/* ===== 印刷 ===== */
@media print {
  .doc-topbar, .doc-toc, .doc-toc-toggle { display: none; }
  .doc-main { margin-left: 0; }
  .doc-layout { padding-top: 0; }
  body { background: #fff; font-size: 11pt; line-height: 1.6; }
  .doc-table-wrap { box-shadow: none; overflow: visible; }
  .doc-content { max-width: none; padding: 0; }
  table.doc-table tbody tr:hover { background: transparent; }
}

/* ============================================================
 * §6.8 ハブCSS（上位ハブ・サブハブ共通）
 * ============================================================ */

.hub { max-width: 900px; margin: 0 auto; padding: calc(var(--doc-topbar-h) + 48px) 40px 80px; }
.hub-header { margin-bottom: 36px; padding-bottom: 24px; border-bottom: 2px solid var(--doc-border); }
.hub-header h1 { font-size: 30px; font-weight: 700; line-height: 1.4; margin: 0 0 10px; }
.hub-header p { font-size: 15px; color: var(--doc-text-secondary); margin: 0; }
.hub-section-label { font-size: 11px; font-weight: 700; letter-spacing: .08em; color: var(--doc-text-muted); margin: 24px 0 14px 2px; }
.hub-section-label:first-of-type { margin-top: 0; }
.hub-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; margin-bottom: 12px; }
.hub-card {
  display: flex; flex-direction: column; gap: 10px; padding: 24px;
  background: var(--doc-surface); border: 1px solid var(--doc-border); border-radius: var(--doc-radius);
  text-decoration: none; color: inherit; box-shadow: var(--doc-shadow-sm);
}
.hub-card:hover { border-color: var(--doc-accent); box-shadow: var(--doc-shadow); }
.hub-card h2 { font-size: 18px; font-weight: 700; margin: 0; }
.hub-card .hub-card-desc { font-size: 13.5px; color: var(--doc-text-secondary); margin: 0; line-height: 1.7; }
.hub-card .hub-card-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.hub-card .hub-card-meta {
  margin-top: auto; padding-top: 12px; border-top: 1px solid var(--doc-border);
  font-size: 12px; color: var(--doc-text-muted);
  display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap;
}
.hub-card .hub-card-arrow { color: var(--doc-accent); font-weight: 600; font-size: 13px; }
.hub-card .hub-status { font-weight: 600; }
.hub-card .hub-status.st-open { color: var(--warn-bd); }         /* ⏳ 確認中 */
.hub-card .hub-status.st-partial { color: var(--doc-accent); }   /* 🔄 一部解決 */
.hub-card .hub-status.st-done { color: var(--ok-text); }         /* ✅ 解決済み（意味色トークン・§4.2） */
.hub-card .hub-status.st-decision { color: var(--doc-text-secondary); } /* 📑 DEC */
.hub-footer { margin-top: 48px; padding-top: 20px; border-top: 1px solid var(--doc-border); font-size: 12px; color: var(--doc-text-muted); }

/* ============================================================
 * §6.9 機能IDポップアップ（新規）
 *   .fid-link : .fid をボタン化した対話可能バッジ
 *   .fid-popup: バッジ直下に開くドロップダウン
 * ============================================================ */

/* .fid-link は .fid のスタイルを継承しつつ、button 要素のブラウザ既定装飾を潰す */
button.fid-link {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px; font-weight: 600; color: var(--doc-text-secondary);
  background: var(--doc-surface-alt); border: 1px solid var(--doc-border);
  border-radius: var(--doc-radius-sm); padding: 1px 7px; white-space: nowrap;
  cursor: pointer; line-height: 1.5;
  transition: background .12s ease, border-color .12s ease, color .12s ease;
}
button.fid-link:hover {
  background: var(--doc-accent-soft);
  border-color: var(--doc-accent);
  color: var(--doc-accent);
}
button.fid-link:focus-visible {
  outline: 2px solid var(--doc-accent);
  outline-offset: 1px;
}
button.fid-link[aria-expanded="true"] {
  background: var(--doc-accent-soft);
  border-color: var(--doc-accent);
  color: var(--doc-accent);
}

/* ポップアップ本体（lms-doc.js が </body> 直前に1つだけ動的挿入） */
.fid-popup {
  position: absolute; z-index: 200;
  min-width: 320px; max-width: 480px;
  background: var(--doc-surface);
  border: 1px solid var(--doc-border-strong);
  border-radius: var(--doc-radius);
  box-shadow: var(--doc-shadow), 0 12px 24px rgba(15,23,42,.08);
  padding: 0;
  font-size: 13px;
  color: var(--doc-text);
}
.fid-popup[hidden] { display: none; }

.fid-popup-header {
  padding: 10px 14px 8px;
  border-bottom: 1px solid var(--doc-border);
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.fid-popup-fid {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px; font-weight: 700;
  background: var(--doc-accent-soft); color: var(--doc-accent);
  border: 1px solid var(--doc-accent);
  border-radius: var(--doc-radius-sm); padding: 1px 7px;
}
.fid-popup-label {
  font-size: 13px; font-weight: 600; color: var(--doc-text);
}

.fid-popup-body { padding: 6px 0; }
.fid-popup-empty {
  padding: 14px; text-align: center;
  color: var(--doc-text-muted); font-size: 12.5px;
}

.fid-popup-item {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 8px 14px;
  text-decoration: none; color: var(--doc-text);
  border-left: 3px solid transparent;
}
.fid-popup-item:hover {
  background: var(--doc-surface-alt);
  border-left-color: var(--doc-accent);
}
.fid-popup-item-kind {
  flex: 0 0 auto;
  font-size: 10.5px; font-weight: 700; letter-spacing: .04em;
  padding: 2px 8px; border-radius: 999px;
  background: var(--doc-surface-alt);
  border: 1px solid var(--doc-border);
  color: var(--doc-text-secondary);
  white-space: nowrap;
  margin-top: 2px;
}
.fid-popup-item-kind.kind-impl-spec { background: #E0E7FF; border-color: #A5B4FC; color: #3730A3; }
.fid-popup-item-kind.kind-wireframe { background: #F0FDF4; border-color: #86EFAC; color: #166534; }
.fid-popup-item-kind.kind-client    { background: var(--warn-bg); border-color: var(--warn-bd); color: var(--warn-bd); }
.fid-popup-item-kind.kind-dec       { background: var(--ph3-bg); border-color: var(--ph3-bd); color: var(--ph3-text); }
.fid-popup-item-kind.kind-specs     { background: var(--doc-surface-alt); border-color: var(--doc-border-strong); color: var(--doc-text-secondary); }

.fid-popup-item-body {
  flex: 1 1 auto; min-width: 0;
}
.fid-popup-item-title {
  font-size: 13px; color: var(--doc-text);
  line-height: 1.4;
  overflow: hidden; text-overflow: ellipsis;
}
.fid-popup-item-status {
  display: inline-block;
  margin-left: 6px;
  font-size: 10.5px; font-weight: 600;
  padding: 1px 6px; border-radius: 4px;
  border: 1px solid transparent;
}
.fid-popup-item-status.st-open     { background: var(--warn-bg); color: var(--warn-bd); border-color: var(--warn-bd); }
.fid-popup-item-status.st-partial  { background: var(--doc-accent-soft); color: var(--doc-accent); border-color: var(--doc-accent); }
.fid-popup-item-status.st-done     { background: var(--ok-bg); color: var(--ok-text); border-color: var(--ok-bd); }
.fid-popup-item-status.st-decision { background: var(--doc-surface-alt); color: var(--doc-text-secondary); border-color: var(--doc-border-strong); }

/* L3例外条項（§7-8b）で許可される「派生値」の見た目マーカー */
.doc-derived::after {
  content: "*";
  font-size: .78em;
  color: var(--doc-text-muted);
  margin-left: 2px;
}

/* モバイル時のポップアップ */
@media (max-width: 920px) {
  .fid-popup { min-width: 260px; max-width: calc(100vw - 32px); }
}

/* 印刷時：ポップアップ非表示 */
@media print {
  .fid-popup { display: none !important; }
  button.fid-link { background: transparent; border: none; color: var(--doc-text-secondary); padding: 0; }
}

/* ============================================================
 * Phase B 拡張 — デザインシステム
 *   意味色トークン・ステータスバナー・設問カード・確定ボックス・
 *   フロー・簡易ガント・可否セル・ビュートグル
 * 使い方の正本: .claude/rules/internal-document-html.md §4.2〜§4.4・§6.10〜§6.12
 * ============================================================ */

/* ===== 意味色トークン（§4.2）===== */
:root {
  --ok-bg: #ECFDF5; --ok-text: #047857; --ok-bd: #6EE7B7;   /* 可・完了・解決済み */
  --ng-bg: #FEF2F2; --ng-text: #B91C1C; --ng-bd: #FCA5A5;   /* 却下・見送り・エラー専用（可否の×には使わない） */
}

/* ===== ステータスバナー（§6.10.1）===== */
.doc-status-banner {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 12px 18px; margin: 0 0 24px;
  border: 1px solid transparent; border-radius: var(--doc-radius);
  font-size: 14px; font-weight: 700;
}
.doc-status-banner .status-date { font-size: 12.5px; font-weight: 400; color: var(--doc-text-secondary); }
.doc-status-banner.st-open    { background: var(--warn-bg); border-color: var(--warn-bd); color: var(--warn-bd); }
.doc-status-banner.st-partial { background: var(--doc-accent-soft); border-color: var(--doc-accent); color: var(--doc-accent); }
.doc-status-banner.st-done    { background: var(--ok-bg); border-color: var(--ok-bd); color: var(--ok-text); }

/* ===== 設問カード（§6.10.2）===== */
.doc-question {
  background: var(--doc-surface); border: 1px solid var(--doc-border);
  border-radius: var(--doc-radius); box-shadow: var(--doc-shadow-sm);
  margin: 0 0 20px; overflow: hidden;
}
.doc-question-header {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 10px 16px; background: var(--doc-surface-alt);
  border-bottom: 1px solid var(--doc-border);
  font-size: 14px; font-weight: 700;
}
.doc-question-no {
  flex: 0 0 auto; font-size: 12px; font-weight: 700;
  background: var(--doc-accent-soft); color: var(--doc-accent);
  border: 1px solid var(--doc-accent); border-radius: 999px;
  padding: 1px 10px; white-space: nowrap;
}
.doc-question-body { padding: 14px 16px 8px; }
.doc-option {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px 12px; margin: 0 0 8px;
  border: 1px solid var(--doc-border); border-radius: var(--doc-radius-sm);
  font-size: 13.5px; line-height: 1.7;
}
.doc-option-key {
  flex: 0 0 auto; font-size: 12px; font-weight: 700; margin-top: 2px;
  background: var(--doc-surface-alt); color: var(--doc-text-secondary);
  border: 1px solid var(--doc-border-strong); border-radius: var(--doc-radius-sm);
  padding: 1px 8px; white-space: nowrap;
}
.doc-option.recommended { border-color: var(--doc-accent); background: var(--doc-accent-soft); }
.doc-option.recommended .doc-option-key { background: var(--doc-surface); color: var(--doc-accent); border-color: var(--doc-accent); }
.doc-option.decided { border-color: var(--ok-bd); background: var(--ok-bg); }
.doc-option.decided .doc-option-key { background: var(--doc-surface); color: var(--ok-text); border-color: var(--ok-bd); }

/* ===== 回答・確定事項ボックス（§6.10.3）===== */
.doc-answer {
  border: 1px solid var(--ok-bd); border-left-width: 4px;
  border-radius: var(--doc-radius); background: var(--ok-bg);
  padding: 14px 16px 4px; margin: 0 0 20px;
}
.doc-answer-label { font-size: 13.5px; font-weight: 700; color: var(--ok-text); margin: 0 0 10px; }
.doc-answer .doc-table-wrap { background: var(--doc-surface); }

/* ===== フロー（§6.11.1）===== */
.doc-flow { display: flex; flex-wrap: wrap; align-items: stretch; gap: 8px; margin: 0 0 20px; }
.doc-flow-step {
  flex: 1 1 160px; min-width: 140px;
  display: flex; align-items: flex-start; gap: 8px;
  background: var(--doc-surface); border: 1px solid var(--doc-border);
  border-radius: var(--doc-radius); box-shadow: var(--doc-shadow-sm);
  padding: 10px 12px; font-size: 12.5px; line-height: 1.6;
}
.doc-flow-step .step-no {
  flex: 0 0 auto; width: 20px; height: 20px; border-radius: 50%; margin-top: 1px;
  display: flex; align-items: center; justify-content: center;
  background: var(--doc-accent-soft); color: var(--doc-accent);
  font-size: 11px; font-weight: 700;
}
.doc-flow-arrow { flex: 0 0 auto; align-self: center; color: var(--doc-text-muted); font-weight: 700; }
.doc-flow.vertical { flex-direction: column; align-items: stretch; }
.doc-flow.vertical .doc-flow-arrow { align-self: center; }
.doc-flow-branch { flex-basis: 100%; padding: 2px 4px 2px 24px; font-size: 12px; color: var(--doc-text-secondary); }

/* ===== 簡易ガント（§6.11.2）===== */
table.doc-table.doc-gantt td.bar-1,
table.doc-table.doc-gantt td.bar-2,
table.doc-table.doc-gantt td.bar-3 { padding: 6px 4px; }
table.doc-table.doc-gantt td.bar-1::after,
table.doc-table.doc-gantt td.bar-2::after,
table.doc-table.doc-gantt td.bar-3::after { content: ""; display: block; height: 14px; border-radius: 4px; }
table.doc-table.doc-gantt td.bar-1::after { background: var(--ph1-bg); box-shadow: inset 0 0 0 1px var(--ph1-bd); }
table.doc-table.doc-gantt td.bar-2::after { background: var(--ph2-bg); box-shadow: inset 0 0 0 1px var(--ph2-bd); }
table.doc-table.doc-gantt td.bar-3::after { background: var(--ph3-bg); box-shadow: inset 0 0 0 1px var(--ph3-bd); }

/* ===== 可否セル（§6.11.3）===== */
table.doc-table td.cell-ok,
table.doc-table td.cell-no,
table.doc-table td.cell-limited { text-align: center; font-weight: 600; white-space: nowrap; }
table.doc-table td.cell-ok      { background: var(--ok-bg); color: var(--ok-text); }
table.doc-table td.cell-no      { background: var(--doc-surface-alt); color: var(--doc-text-muted); }
table.doc-table td.cell-limited { background: var(--warn-bg); color: var(--warn-bd); }

/* ===== ビュートグル（§6.12）===== */
.doc-view-toggle {
  display: inline-flex; margin: 0 0 12px;
  border: 1px solid var(--doc-border-strong); border-radius: var(--doc-radius-sm);
  overflow: hidden;
}
.doc-view-toggle button {
  border: none; background: var(--doc-surface); cursor: pointer;
  padding: 5px 14px; font-size: 12.5px; font-family: inherit;
  color: var(--doc-text-secondary);
}
.doc-view-toggle button + button { border-left: 1px solid var(--doc-border); }
.doc-view-toggle button[aria-pressed="true"] {
  background: var(--doc-accent-soft); color: var(--doc-accent); font-weight: 600;
}
.doc-view-panel[hidden] { display: none; }

/* Phase B の印刷調整 */
@media print {
  .doc-view-toggle { display: none; }
}