@charset "UTF-8";
/* ==========================================================================
   図解コンポーネント（.akb-fig）

   ■ これは何か
   AI記事生成パイプライン（seo-autopilot）が出力する図解を、
   **インラインstyleではなくクラスで**組み立てるための部品集。

   ■ なぜクラス方式にしたか（2026-07-16 運営者判断）
   インラインstyleはCSSより強く、テーマの意図を問答無用で上書きする。
   実際に旧方式では次の事故が起きていた:
     - 白地に白文字（1.15:1）
     - 濃い地の枠線が背景と同色になって消える（40記事・159箇所）
     - N/Aセルが 2.17:1 でほぼ判読不能
     - 図解だけ書体が Noto Sans JP で本文と不統一
   クラス方式ならこれらは**構造的に起こせない**。色もサイズも枠線もCSSが決める。
   デザインを変えたいときも記事を1文字も触らずに済む。

   ■ 旧記事との併存
   既存83個の図解はインラインのままなので inc/diagram-restyle.php が
   表示時に変換し続ける。新記事はこのクラス方式。両者は共存する。
   旧記事を作り直す予定は無いので、フィルタは当面残る。

   ■ 対応パターン（2026-07-16 運営者判断で 8→4 に整理）
   A: 比較表（タイトルあり） / B: 比較表（行ヘッダーあり） → 骨格「表」
   C: ケース図 / D: 原則図                                → 骨格「行」
   E(2カラム) F(ツリー) G(マトリックス) H(リスト分類) は廃止。
   AIが選択に迷うコストの方が、使用頻度の低いパターンを持つ利点を上回るため。

   ■ ルール
   - 色は style.css の :root トークンのみ。生の16進を書かない
   - 濃い地（--ink）の上の文字は --paper、枠線も --paper
   - 文字は12px以上
   - **3者を必ず同期すること**: このCSS / seo-autopilot の prompts/svg_prompt.txt /
     scripts/generate_article.py の _ALLOWED_FIG_CLASSES
   ========================================================================== */

/* ==========================================================================
   共通の外枠
   ========================================================================== */
.akb-article-body .akb-fig{
  background:var(--paper);
  border:var(--border);
  border-radius:12px;
  box-shadow:var(--shadow);
  overflow:hidden;
  margin:0;                       /* 余白は figure 側が持つ */
  min-width:min(560px, 100%);     /* 潰れ防止。超えた分は figure が横スクロール */
  font-size:14px;
  line-height:1.9;
  color:var(--ink);
}


/* ==========================================================================
   タイトル
   ========================================================================== */
/* 帯タイトル（全パターン共通・図解の先頭） */
.akb-article-body .akb-fig__title{
  background:var(--ink);
  color:var(--paper);
  font-weight:900;
  font-size:16px;
  line-height:1.6;
  padding:14px 20px;
  text-align:center;
  margin:0;
}


/* 注釈（※〜） */
.akb-article-body .akb-fig__note{
  font-size:12px;
  color:var(--ink-45);
  line-height:1.7;
  margin:10px 0 0;
}

/* ==========================================================================
   行型（ケース図 / 原則図）
   [バッジ][本文] を縦に積む
   ========================================================================== */
.akb-article-body .akb-fig__row{
  display:flex;
  align-items:flex-start;
  gap:18px;
  padding:18px 22px;
  border-bottom:1px solid var(--ink);
}
.akb-article-body .akb-fig__row:last-child{border-bottom:none;}

.akb-article-body .akb-fig__badge{
  flex-shrink:0;
  min-width:52px;
  border:2px solid var(--ink);
  border-radius:6px;
  padding:5px 7px;
  text-align:center;
  color:var(--orange-deep);
  background:var(--cream);
  font-size:12px;
  font-weight:900;
  line-height:1.5;
}

.akb-article-body .akb-fig__body{
  flex:1;
  min-width:0;
  font-size:14px;
  line-height:1.9;
  color:var(--ink);
}
/* 補足（本文より小さく薄い） */
.akb-article-body .akb-fig__sub{
  display:block;
  font-size:13px;
  color:var(--ink-45);
  margin-top:4px;
}
/* 結論（→ 〜） */
.akb-article-body .akb-fig__result{
  display:block;
  font-weight:900;
  color:var(--orange-deep);
  margin-top:6px;
}

/* ==========================================================================
   表（比較表）
   セルにクラスは要らない。要素セレクタで完結させる。
   ========================================================================== */
.akb-article-body .akb-fig__table{
  width:100%;
  border-collapse:collapse;
  font-size:14px;
  margin:0;
}
.akb-article-body .akb-fig__table th,
.akb-article-body .akb-fig__table td{
  border:1px solid var(--ink);
  padding:12px 16px;
  text-align:center;
  vertical-align:middle;
  line-height:1.7;
  color:var(--ink);
}
/* ヘッダー行：濃い地に白文字。枠線も白でないと区切りが消える */
.akb-article-body .akb-fig__table thead th{
  background:var(--ink);
  color:var(--paper);
  border-color:var(--paper);
  font-weight:900;
}
/* 行ヘッダー（左端の見出し列） */
.akb-article-body .akb-fig__table tbody th{
  background:var(--cream);
  font-weight:900;
  text-align:left;
}
/* 交互行 */
.akb-article-body .akb-fig__table tbody tr:nth-child(even) td{background:var(--cream);}
/* 該当なしのセル */
.akb-article-body .akb-fig__table .is-na{color:var(--ink-45);}
/* 強調セル */
.akb-article-body .akb-fig__table .is-accent{color:var(--orange-deep);font-weight:900;}

/* ==========================================================================
   スマホ
   ========================================================================== */
@media (max-width:479px){
  .akb-article-body .akb-fig{min-width:0;font-size:13px;}
  .akb-article-body .akb-fig__title{font-size:14px;padding:12px 14px;}
  .akb-article-body .akb-fig__row{padding:14px 16px;gap:12px;}
  .akb-article-body .akb-fig__badge{min-width:44px;font-size:12px;}
  .akb-article-body .akb-fig__table th,
  .akb-article-body .akb-fig__table td{padding:10px 8px;font-size:13px;}

}

/* === 角丸ボックスの一律四角化（2026-07-25「全て四角く」）。 === */
.akb-article-body .akb-fig{border-radius:0;}

/* === バッジも四角化（2026-07-25）。 === */
.akb-article-body .akb-fig__badge{border-radius:0;}