/* ==========================================================================
   1. 問題番号付き 小見出し（淡い緑ベース / バランス最適化版）
   ========================================================================== */
.law-subtitle {
  /* タイトル全体のフォントサイズをやや引き締め、他要素との比率を最適化 */
  font-size: 1.1rem; 
  font-weight: 700;
  color: #0f172a;
  
  /* 彩度を極限まで落とした、目に優しい淡い緑 */
  background-color: #f2f6f3; 
  /* 左側の引き締め線 */
  border-left: 4px solid #2e4a3f; 
  
  border-radius: 0 6px 6px 0;
  margin: 16px 0 16px 0;
  
  /* 上下の余白（12px）と左右の余白（16px）を均等に整え、箱としての安定感を付与 */
  padding: 12px 16px; 
  
  display: flex;
  justify-content: space-between;
  align-items: center; /* 子要素を縦方向の完全に中央に配置 */
  box-sizing: border-box;
}

/* 見出し左側のテキスト（問題番号とタイトル）を美しく整列 */
.subtitle-main {
  display: flex;
  align-items: center; /* ラベルとテキストの文字軸を中央に完全に同期 */
  gap: 12px;
  flex: 1;
  min-width: 0;
}

/* 「問題（1）」などのラベルスタイル（フォントと余白を再計算） */
.question-label {
  background-color: #2e4a3f; 
  color: #ffffff;
  font-size: 0.8rem; /* 少し小さくして上品に */
  font-weight: 700;
  
  /* 上下4px・左右8pxの細かな調整で、文字が潰れず箱としてスマートな比率に */
  padding: 4px 8px; 
  border-radius: 4px;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  
  line-height: 1.2; /* ラベル内文字の上下のブレを無くす */
  flex-shrink: 0;
}

/* 小見出しの中にインライン数式（ \( R_m \) など）が入った場合の微調整 */
.law-subtitle .math-inline {
  font-weight: normal;
}


/* ==========================================================================
   2. クリーンな解答コンポーネント（正解バッジ / 縦横比率最適化版）
   ========================================================================== */
.answer-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px; /* 内側の「正解」と「（ヨ）」の間隔を適度に広げて視認性向上 */
  background-color: #d97706; 
  color: #ffffff;
  font-size: 0.85rem;
  font-weight: 700;
  
  /* 上下5px・左右12pxに調整し、左側の問題ラベルとの全体の高さを視覚的に同期 */
  padding: 5px 12px; 
  border-radius: 20px;
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.1);
  white-space: nowrap;
  flex-shrink: 0;
  line-height: 1.2;
}

/* バッジ内の「正解」の四角ミニラベル */
.answer-badge .badge-label {
  background-color: rgba(255, 255, 255, 0.2);
  
  /* 内側ミニバッジのパディングを微細化し、不自然な膨らみを解消 */
  padding: 2px 6px; 
  border-radius: 12px;
  font-size: 0.75rem;
  line-height: 1;
  display: inline-block;
}

/* ==========================================================================
   3. 洗練された数式ブロック（淡い水色ベース / スクロールバー最適化版）
   ========================================================================== */
.math-block-wrapper {
  width: 100%;
  box-sizing: border-box;
  
  /* 清潔感のある、ごく淡い水色（ペールブルー） */
  background-color: #f0f7f9; 
  /* 左側の引き締め線：水色にスマートに馴染むスレートブルー */
  border-left: 4px solid #5a7b9a; 
  
  padding: 24px 32px;
  margin: 24px 0;
  border-radius: 0 8px 8px 0;
  
  /* スクロールバーの挙動エラーを完全にシャットアウト */
  overflow-y: hidden; /* 縦方向の謎のスクロールバーを完全に非表示 */
  overflow-x: auto;   /* スマートフォンなどの画面幅で数式がはみ出たときだけ、安全に横スクロールさせる */
}

/* MathJaxが自動生成する数式外側のデフォルトマージン（縦を押し広げる原因）をリセット */
.math-block-wrapper .MathJax_Display,
.math-block-wrapper .MathJax {
  margin: 0 !important;
  padding: 0 !important;
}

/* MathJaxの表示フォントサイズ・文字色の最適化 */
.math-block-wrapper .mjx-chtml {
  font-size: 1.05rem !important;
  color: #0f172a !important;
}

/* 複数行にわたる計算展開（\begin{aligned}など）の各行に上品な縦の余白を付与 */
.math-block-wrapper .mjx-mtable .mjx-mtr {
  padding-top: 12px !important;
  padding-bottom: 12px !important;
}


/* ==========================================================================
   4. 共通：本文中のインライン数式用（文字に自然に馴染ませる）
   ========================================================================== */
.math-inline {
  color: #0f172a;
  padding: 0 2px;
}

/* ==========================================================================
       一体型 正解・解答一覧セクション（ヘッダードッキング版）
       ========================================================================== */
    /* 全体を包むメインコンテナ（枠線と角丸をここに集約） */
    .answer-summary-container {
      width: 100%;
      box-sizing: border-box;
      border: 1px solid #cce0d6; /* 淡いグリーンの枠線 */
      border-radius: 12px;
      margin: 32px 0;
      overflow: hidden; /* 子要素の角丸がはみ出さないようにマスク */
      box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.01);
    }

    /* 上部にピタッとくっつくヘッダー部分 */
    .answer-summary-header {
      background-color: #2e4a3f; /* 小見出しのキーカラーである深緑 */
      color: #ffffff;            /* 文字はクリーンな白 */
      font-size: 1.05rem;
      font-weight: 700;
      padding: 14px 20px;
      margin: 0;                 /* 隙間を完全にゼロにする */
      display: flex;
      align-items: center;
    }

    /* 下部の解答リストを包むボックス（余白をコントロール） */
    .answer-summary-body {
      background-color: #ffffff;
      padding: 20px;
    }

    /* 解答アイテムを並べるリスト */
    .answer-list {
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    /* 各解答行（淡いグリーンベースのミニカード） */
    .answer-item {
      display: flex;
      align-items: center;
      background-color: #f2f6f3; /* 目に優しい淡いグリーン */
      border: 1px solid #e1ebe5;
      border-radius: 8px;
      padding: 12px 16px;
      transition: all 0.2s ease;
      box-sizing: border-box;
    }

    /* ホバー時のフィードバック */
    .answer-item:hover {
      border-color: #cbdcd1;
      background-color: #e8efe9;
    }

    /* 問題番号部分（例：(1), (2)） */
    .answer-num {
      font-size: 0.95rem;
      font-weight: 700;
      color: #2e4a3f;
      width: 36px;
      flex-shrink: 0;
    }

    /* 記号部分（例：ヨ, ソ） */
    .answer-symbol {
      background-color: #dbe7e0;
      color: #1e332a;
      font-size: 0.85rem;
      font-weight: 700;
      padding: 4px 10px;
      border-radius: 4px;
      margin-right: 18px;
      min-width: 24px;
      text-align: center;
      line-height: 1.2;
      flex-shrink: 0;
    }

    /* 数値や用語などのテキスト部分 */
    .answer-value {
      font-size: 1rem;
      font-weight: 600;
      color: #0f172a;
      flex: 1;
      line-height: 1.5;
    }