/* 過去問公開ページ(MPA)のスタイル。
   - デザイントークン(tokens.css)・サイトシェル(site.css = SiteHeader/SiteFooter の
     実 CSS)・択一 UI(mcq.css = MultipleChoiceQuestion.css)は SPA ソースの
     コミット済みコピーを共有する(scripts/exams/lib/shared-assets.mjs、
     npm run tokens:sync で同期)。SPA 側の変更が MPA 全ページへ自動追随する。
   - ここに置くのは MPA 固有のコンテンツ(問題・解説・一覧・エンジン)のスタイルと、
     共有 CSS への最小の補完のみ。SPA の global.css / App.css は取り込まない
     (html,body{overflow:hidden} 等のアプリ前提リセットが MPA を壊すため、
     reset はこのファイルの先頭で自前に持つ)。
   - テーマは SPA と同じ localStorage('theme')を exams.js が反映する。
   --kk-* は tokens 参照のエイリアス(移行互換。新規スタイルは var(--*) を直接
   使ってよい)。 */
@import './tokens.css';

:root {
  --kk-light: var(--color-light-bg);
  --kk-dark: var(--color-dark-bg);
  --kk-point1: var(--color-point-1);
  --kk-point2: var(--color-point-2);
  --kk-bg: var(--bg);
  --kk-fg: var(--fg);
  --kk-fg-muted: var(--fg-muted);
  --kk-border: var(--border-color);
  --kk-accent: var(--primary);
  --kk-surface: var(--eval-bg);
  --kk-ok: var(--ok);
  --kk-ng: var(--ng);
  --kk-max-width: var(--reading-max-width);
  /* SPA 画面部品 CSS(card.css / drill-page.css / question-pager.css)が参照する
     レイアウト変数。SPA では global.css が定義するが MPA は取り込まないため、
     ここで本文幅に合わせて与える */
  --content-max-width: 1050px;
  --content-padding: 16px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body.kk {
  background: var(--kk-bg);
  color: var(--kk-fg);
  font-family: var(--font-sans);
  line-height: 1.75;
  font-size: 16px;
}
/* リンク既定色は本文(kk-main)のみ。ヘッダ・フッタは site.css が全て決める */
.kk-main a { color: var(--kk-accent); }
.kk img { max-width: 100%; height: auto; }

/* MPA 固有のフッタ行(最終レビュー・データ版・誤り報告)。site-footer-notice と
   同じトーンで下に続ける */
.kk-footer-meta { margin-top: 1.25rem; font-size: 0.75rem; line-height: 1.7; opacity: 0.7; }
.kk-footer-meta a { color: inherit; }

.kk-main { max-width: var(--kk-max-width); margin: 0 auto; padding: 16px 16px 48px; }

/* 問題ページ・エンジン画面はSPAと同じ最大幅(1050px)にする */
.kk-page-question .kk-main,
.kk-page-article .kk-main,
.kk-page-practice .kk-main,
.kk-page-mock .kk-main {
  max-width: var(--content-max-width);
}
.kk-breadcrumb { font-size: 0.85rem; margin: 4px 0 16px; color: var(--kk-fg-muted); }
.kk-breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; gap: 4px; }
.kk-breadcrumb li + li::before { content: '›'; margin-right: 4px; }

/* MPA 汎用の見出しリズム。クラス付き見出し(section-title / drill-review-heading /
   app-title 等、SPA 共有部品が自前のスタイルを持つもの)には当てない。
   :where() は詳細度 0 のため、既存の上書き(.kk-engine-setup h2 等)の優先関係は
   変わらず、対象だけがクラス無し見出しに絞られる(#322/#327 と同根の
   「汎用リズムが共有部品 CSS に詳細度で勝つ」事故の根本封じ) */
.kk h1:where(:not([class])) { font-size: 1.65rem; line-height: 1.5; margin: 8px 0; }
.kk-question-header {
  margin: 0 0 16px;
}
.kk-question-header h1 {
  font-size: 1.25rem;
  margin: 0 0 8px;
  color: var(--kk-fg);
}
.kk h2:where(:not([class])) { font-size: 1.25rem; margin: 28px 0 10px; }

/* パディング付きボックスの先頭・末尾では、見出しリズム(上の h2 の
   margin-top: 28px)や UA 既定の p マージンがパディングと二重加算されて
   上下が非対称になる。ボックス系コンポーネントの先頭/末尾要素で打ち消す
   (:first-child は擬似クラス = クラス相当の詳細度なので、この 2 クラス分の
   詳細度(0,2,0)がリズム側(0,1,1)に勝つ) */
.kk-app-cta > :first-child,
.kk-progress > :first-child,
.kk-guide > :first-child,
.kk-figure > :first-child,
.kk-answer > :first-child,
.kk-purpose > :first-child,
.kk-engine-error > :first-child,
.kk-gloss-def > :first-child {
  margin-top: 0;
}
.kk-app-cta > :last-child,
.kk-progress > :last-child,
.kk-guide > :last-child,
.kk-figure > :last-child,
.kk-answer > :last-child,
.kk-purpose > :last-child,
.kk-engine-error > :last-child,
.kk-gloss-def > :last-child {
  margin-bottom: 0;
}

.kk-taxonomy { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 4px; }
.kk-chip {
  display: inline-block; font-size: 0.8rem; line-height: 1.4; padding: 2px 10px;
  border: 1px solid var(--kk-accent); border-radius: var(--radius-pill); text-decoration: none;
}
.kk-chip-category { background: var(--kk-accent); color: var(--kk-bg); border-color: var(--kk-accent); }

/* 出題時点の内容である旨の注意と改変表示(exam-data#9)。
   問題本文の直前に置く控えめな注記 */
.kk-notices { margin: 10px 0 0; }
.kk-notices p {
  margin: 0 0 4px; font-size: 0.8rem; line-height: 1.7; color: var(--kk-fg-muted);
}
.kk-notices p:last-child { margin-bottom: 0; }

.kk-body { margin: 16px 0; }
.kk-body p { margin: 0 0 10px; }

.kk-figure { margin: 16px 0; padding: 12px; border: 2px solid var(--kk-border); border-radius: var(--radius-card); }
.kk-figure figcaption { font-size: 0.85rem; color: var(--kk-fg-muted); margin-bottom: 6px; }
/* img は実 PNG の寸法を width/height 属性に持つ(CLS 対策)。表示は器に合わせて
   縮小し、アスペクト比は height:auto で維持する */
.kk-figure img { display: block; max-width: 100%; height: auto; }
/* 図選択肢(options[].figure): 記号の下に図を置き、本文図より控えめな枠にする */
.kk-option .option-text .kk-figure { margin: 6px 0 0; padding: 8px; }
.kk-option .option-text .kk-figure img { max-height: 320px; width: auto; }
.kk-figure-alt { font-size: 0.9rem; margin-top: 8px; }

.kk-blank { border-bottom: 2px solid var(--kk-accent); padding: 0 6px; font-weight: 700; }
.kk-u { text-decoration-thickness: 2px; }
.kk-u-label { font-weight: 700; margin-right: 2px; }

/* 選択肢: 構造・状態クラス(.options / .option / .selected / .correct-option /
   .wrong-selection / .disabled)は SPA と同一で、見た目は mcq.css が決める。 */
/* 判定マーク (.option.correct-option / wrong-selection で色付け) */
.kk-option-mark { flex: none; margin-left: auto; padding-left: 10px; align-self: center; font-weight: 700; white-space: nowrap; }
.option.correct-option .kk-option-mark { color: var(--kk-ok); }
.option.wrong-selection .kk-option-mark { color: var(--kk-ng); }

.kk-result { min-height: 1.5em; font-weight: 700; margin: 8px 0; }
.kk-result.is-ok { color: var(--kk-ok); }
.kk-result.is-ng { color: var(--kk-ng); }
.kk-retry { font: inherit; padding: 6px 16px; border-radius: var(--radius-pill); border: 2px solid var(--kk-border); background: var(--kk-bg); color: var(--kk-fg); cursor: pointer; }

.kk-answer { margin: 16px 0; border: 2px solid var(--kk-border); border-radius: var(--radius-card); padding: 12px 14px; }
.kk-answer summary { cursor: pointer; font-weight: 700; }
.kk-correct { margin: 10px 0; }
.kk-explanation { margin-top: 8px; }
.kk-explanation h3 { font-size: 1rem; margin: 16px 0 6px; }
.kk-explanation ul, .kk-explanation ol { padding-left: 1.4em; margin: 8px 0; }
.kk-explanation p { margin: 8px 0; }
.kk-explanation table { border-collapse: collapse; margin: 10px 0; display: block; overflow-x: auto; }
.kk-explanation th, .kk-explanation td { border: 1px solid var(--kk-border); padding: 4px 10px; }

.kk-related ul { list-style: none; display: grid; gap: 6px; }
.kk-related a { text-decoration: none; }

.kk-pager { display: flex; justify-content: space-between; gap: 8px; margin: 24px 0; font-size: 0.95rem; }

.kk-app-cta { margin: 28px 0 0; padding: 16px; border: 2px solid var(--kk-accent); border-radius: var(--radius-card); background: var(--kk-surface); }
/* CTA ピル。リンク(.kk-main a のリンク色)にもボタン(engine)にも使うため、
   a 要素側はリンク既定色に勝つ詳細度で塗り上の文字色を明示する
   (従来は .kk a が勝って accent 地に accent 文字=不可視になっていた) */
.kk-cta-button,
.kk .kk-main a.kk-cta-button {
  display: inline-block; background: var(--kk-accent); color: var(--kk-bg);
  border: 0; font: inherit; font-weight: 700; cursor: pointer;
  border-radius: var(--radius-pill); padding: 8px 22px; text-decoration: none;
}

/* 一覧ページ */
.kk-qlist { list-style: none; display: grid; gap: 8px; margin: 16px 0; }
.kk-qlist a {
  display: grid; grid-template-columns: auto 1fr auto; gap: 4px 10px; align-items: baseline;
  border: 2px solid var(--kk-border); border-radius: var(--radius-card); padding: 10px 12px; text-decoration: none; color: inherit;
}
.kk-qlist a:hover { border-color: var(--kk-accent); }
.kk-qnum { font-weight: 700; white-space: nowrap; }
.kk-qsnippet { color: var(--kk-fg-muted); font-size: 0.9rem; grid-column: 2; }
.kk-qtags { grid-column: 2; font-size: 0.8rem; color: var(--kk-accent); }
.kk-qstatus { grid-column: 3; grid-row: 1; font-size: 0.85rem; font-weight: 700; white-space: nowrap; }
.kk-qstatus.is-ok { color: var(--kk-ok); }
.kk-qstatus.is-ng { color: var(--kk-ng); }

.kk-exam-list, .kk-tag-list, .kk-org-list { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.kk-exam-list a, .kk-tag-list a, .kk-org-list a {
  display: inline-flex; gap: 6px; align-items: baseline; border: 1px solid var(--kk-border);
  border-radius: var(--radius-pill); padding: 6px 14px; text-decoration: none; color: inherit; font-size: 0.95rem;
}
.kk-exam-list a:hover, .kk-tag-list a:hover, .kk-org-list a:hover { border-color: var(--kk-accent); }
.kk-count { font-size: 0.8rem; color: var(--kk-fg-muted); }
/* 区分ハブ: 期(term)ごとのグループと時間区分フィルタ */
.kk-section-filter { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 4px; }
.kk-section-filter .kk-chip { cursor: pointer; font: inherit; font-size: 0.9rem; background: transparent; color: inherit; }
.kk-section-filter .kk-chip.is-active { background: var(--kk-accent); border-color: var(--kk-accent); color: var(--kk-bg); }
/* 期は同じ大きさのカード(期名+その中の時間区分リンク)。カードを横幅に応じて
   auto-fill の等幅グリッドに並べる。IPA(1 期 2〜3 リンク)と宅建(1 期 1 リンク)で
   同じ部品・同じ CSS。行ごとに高さが揃うのはグリッドの既定(align-items: stretch)
   (2026-08-21 フィードバック: 行の敷き詰めは無秩序に見える) */
.kk-term-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; margin: 12px 0; }
.kk-term-group {
  display: flex; flex-direction: column; margin: 0; padding: 10px 12px 12px;
  border: 2px solid var(--kk-border); border-radius: var(--radius-card);
}
.kk-term-group h3 { margin: 0 0 8px; font-size: 1rem; }
.kk-term-group .kk-exam-list { display: flex; flex-direction: column; gap: 4px; margin: 0; }
.kk-term-group .kk-exam-list a {
  display: flex; justify-content: space-between; align-items: baseline; gap: 8px;
  border: 0; border-radius: var(--radius-pill); padding: 5px 10px; font-size: 0.9rem; background: var(--kk-surface);
}
.kk-term-group .kk-exam-list a:hover { outline: 2px solid var(--kk-accent); outline-offset: -2px; }
.kk-term-group[hidden], .kk-exam-list li[hidden] { display: none; }
.kk-org-list a { border: 2px solid var(--kk-border); border-radius: var(--radius-card); }
.kk-category h3 { margin: 14px 0 4px; font-size: 1rem; }

/* ---- タグ記事(タグハブのヘッダ直下に描画する分野解説) ---- */
.kk-tag-article { margin: 16px 0 24px; padding-bottom: 12px; border-bottom: 1px solid var(--kk-border); }
.kk-tag-article h3 { font-size: 1.1rem; margin: 20px 0 8px; }
.kk-tag-article h4 { font-size: 1rem; margin: 14px 0 6px; }
.kk-tag-article p { margin: 8px 0; }
.kk-tag-article ul, .kk-tag-article ol { padding-left: 1.4em; margin: 8px 0; }

/* ---- 用語集(glossary)ページ ---- */
.kk-glossary header p, .kk-glossary-term header p { color: var(--kk-fg-muted); }
.kk-gloss-group h2 { font-size: 1.1rem; margin: 24px 0 8px; padding: 4px 10px; border-left: 4px solid var(--kk-accent); background: var(--kk-surface); }
.kk-gloss-list { display: grid; gap: 12px; margin: 12px 0; }
.kk-gloss-entry dt { font-weight: 700; }
.kk-gloss-yomi { font-weight: 400; font-size: 0.85rem; color: var(--kk-fg-muted); margin-left: 6px; }
.kk-gloss-entry dd { margin: 2px 0 0; }
.kk-gloss-entry dd p { margin: 0 0 4px; }
.kk-gloss-more { font-size: 0.9rem; }
.kk-gloss-aliases { font-size: 0.9rem; color: var(--kk-fg-muted); margin: 4px 0; }
.kk-glossary-term .kk-gloss-def { border: 2px solid var(--kk-border); border-radius: var(--radius-card); padding: 10px 14px; margin: 14px 0; }
.kk-gloss-def p { margin: 0; }
.kk-gloss-detail p { margin: 8px 0; }
.kk-gloss-detail ul, .kk-gloss-detail ol { padding-left: 1.4em; margin: 8px 0; }
.kk-gloss-related ul { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }
.kk-gloss-related li a {
  display: inline-block; border: 1px solid var(--kk-border); border-radius: var(--radius-pill);
  padding: 4px 12px; text-decoration: none; color: inherit; font-size: 0.9rem;
}
.kk-gloss-related li a:hover { border-color: var(--kk-accent); }
.kk-gloss-back { margin: 24px 0; }

/* ---- 用語ページの過去問リンク ----
   「問われた過去問」(人手で選んだ確定リスト)と「登場する過去問」(語が出てくる
   だけ。自動)を同じ体裁で並べ、主張の強さは見出しで区別する */
.kk-gloss-qlist { list-style: none; display: grid; gap: 8px; margin: 10px 0; padding: 0; }
.kk-gloss-qlist li { border: 1px solid var(--kk-border); border-radius: var(--radius-card); padding: 8px 12px; }
.kk-gloss-qlist li:hover { border-color: var(--kk-accent); }
.kk-gloss-qlist a { text-decoration: none; color: inherit; display: block; font-weight: 600; }
.kk-q-exam { color: var(--kk-fg-muted); font-weight: 400; font-size: 0.85rem; margin-right: 8px; }
.kk-q-snippet { display: block; margin-top: 4px; color: var(--kk-fg-muted); font-size: 0.85rem; }
.kk-gloss-appears-more, .kk-gloss-appears-many { font-size: 0.9rem; color: var(--kk-fg-muted); margin: 8px 0; }

/* ---- 用語ツールチップ(.glossary-term は本文中の用語リンク) ---- */
.kk-main .glossary-term {
  color: inherit; cursor: help;
  text-decoration: underline dotted var(--kk-accent); text-decoration-thickness: 2px; text-underline-offset: 3px;
}
.kk-gloss-pop {
  position: absolute; z-index: 20; max-width: 320px;
  background: var(--kk-bg); color: var(--kk-fg);
  border: 1px solid var(--kk-border); border-radius: var(--radius-card);
  padding: 10px 12px; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
  font-size: 0.9rem; line-height: 1.6;
}
.kk-gloss-pop-term { font-weight: 700; margin: 0 0 4px; }
.kk-gloss-pop-def p { margin: 0; }
.kk-gloss-pop-more { display: inline-block; margin-top: 6px; font-size: 0.85rem; color: var(--kk-accent); }

.kk-progress { border: 2px solid var(--kk-border); border-radius: var(--radius-card); padding: 12px 14px; margin: 16px 0; }
.kk-reset { font: inherit; font-size: 0.85rem; border: 2px solid var(--kk-ng); color: var(--kk-ng); background: none; border-radius: var(--radius-pill); padding: 4px 14px; cursor: pointer; }

@media (max-width: 480px) {
  .kk-pager { flex-wrap: wrap; }
}

/* 透過ドリル・模試エンジン(docs#97 §3b)。
   画面部品(カード・統計バー・操作ボタン・正誤バナー・移動 UI・タイマー・
   提出ボタン・結果一覧の行)は SPA の CSS(card.css / drill-page.css /
   drill-stats-bar.css / question-pager.css / app-header.css /
   drill-review-list.css のコミット済みコピー)を同一クラス名で使う。
   ここに残すのは MPA 固有の要素と共有 CSS への最小の補完のみ */
.kk-engine-links { display: grid; gap: 8px; margin: 16px 0; }
.kk-engine-link {
  display: grid; gap: 2px; border: 2px solid var(--kk-accent); border-radius: var(--radius-card);
  padding: 10px 14px; text-decoration: none; color: inherit;
}
.kk-engine-link strong { color: var(--kk-accent); }
/* org トップの区分カード 3 行目(収録量・単年構成)。説明文より一段控えめに */
.kk-engine-link-meta { font-size: 0.85rem; color: var(--kk-fg-muted); }
/* org トップの補助リンク行(デモ・用語集・ガイド等)。主役の選択を邪魔しない小導線 */
.kk-org-sublinks { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 18px 0; font-size: 0.9rem; }
/* 設定フォームは .card(共有)を器にし、中身は SPA DrillLauncher の部品
   (drill-tag-filter-* / tag-chip / drill-section-btn。CSS は drill-launcher.css /
   tag-chip.css を共有)で組む。ここは内側の間隔と共有 CSS への最小の補完のみ */
.kk-engine-setup { margin-top: 16px; }
/* margin は上 0 まで明示する(.kk h2 の見出しリズム margin-top:28px が同詳細度で
   先に効いており、margin-bottom だけの指定ではカード先頭に大きな余白が残る) */
.kk-engine-setup h2 { font-size: 1.05rem; margin: 0 0 8px; }
.kk-engine-row { margin: 12px 0; display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: baseline; }
/* 行ラベルは SPA DrillLauncher のセクション見出し(drill-new-header)と同トーン */
.kk-engine-row-label { font-size: 0.85rem; font-weight: 700; }
.kk-engine-row-head { margin: 10px 0 6px; }
/* SPA はパネル・ボタンを条件付きレンダリングするため [hidden] を持たない。
   MPA は hidden 属性で開閉するので、共有 CSS の display 指定に勝つ形で畳む */
.kk-engine-setup .drill-tag-filter-body[hidden] { display: none; }
.kk-engine-setup .drill-section-btn[hidden] { display: none; }
.kk-engine-setup .drill-section-btn:disabled { opacity: 0.6; cursor: default; }
/* 模試の試験選択: 区分(試験種別)ごとのグループ */
.kk-engine-exam-group { margin: 14px 0 0; }
.kk-engine-exam-heading { font-size: 0.85rem; font-weight: 700; margin: 0 0 6px; }
.kk-engine-more { margin-top: 6px; }
.kk-engine-start { margin: 14px 0 6px; }
.kk-engine-note { font-size: 0.85rem; color: var(--kk-fg-muted); }
/* 統計バー(.drill-stats-bar)・カード(.card)の縦間隔(SPA drill-page-inner の gap 相当) */
.kk-engine .drill-stats-bar { margin: 16px 0; }
/* 出典行のリンク色はリンク既定色ではなく SPA 同様の muted(色は drill-page.css) */
.kk-main .drill-exam-origin a { color: inherit; }
/* エンジン(ドリル/模試)開始後は SPA と同じ専用シェルへ切り替える。公開サイトの
   導入部は設定画面にだけ残し、演習中・採点後は問題へ集中できる内部スクロールにする。 */
.kk-engine-active {
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.kk-engine-active > .site-header,
.kk-engine-active > .site-footer,
.kk-engine-active .kk-breadcrumb,
.kk-engine-active .kk-engine > header {
  display: none;
}
.kk-engine-active .kk-main.app-main {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  max-width: none;
  overflow-y: auto;
  padding: 24px 20px 40px;
}
.kk-engine-active .kk-engine,
.kk-engine-active [data-kk-engine] {
  display: contents;
}
.kk-engine-appbar {
  flex: 0 0 auto;
}
.kk-engine-appbar .home-btn {
  text-decoration: none;
}
.kk .kk-engine-appbar .app-title {
  margin: 0;
  font-size: 1.1rem;
  line-height: normal;
}
.kk-engine-appbar .dropdown-item {
  text-decoration: none;
}
.kk-engine-appbar .dropdown-menu[hidden] {
  display: none;
}
.kk-engine-appbar .kk-engine-pause[hidden],
.kk-engine-appbar .kk-engine-score-btn[hidden],
.kk-mock-active .tag-visibility-bar[hidden] {
  display: none;
}
/* タグ行は回答後にだけ見せる(.kk-taxonomy の display:flex が hidden 属性に
   勝ってしまうため明示) */
.drill-question-tags[hidden] { display: none; }
/* ドリルシェル中、カード外の行(統計バー・操作列・CTA)も SPA drill-page-inner と
   同じ最大幅で中央寄せする(app-main は全幅のため) */
.kk-drill-active .drill-stats-bar,
.kk-drill-active .drill-actions,
.kk-drill-active .kk-app-cta {
  width: 100%;
  max-width: var(--content-max-width);
  margin-left: auto;
  margin-right: auto;
}
.kk-engine-timer.is-warning { color: var(--kk-ng); }
/* 受験 UI は SPA と同じ最大幅と余白を使う。 */
.kk-mock-active .qpager { margin-bottom: 16px; }
.kk-mock-active .tag-visibility-bar {
  width: 100%;
  max-width: var(--content-max-width);
  margin: 0 auto 4px;
  padding: 0 var(--content-padding);
}
.kk-engine-active .section-wrapper-card { max-width: var(--content-max-width); }
/* 大問・設問タイトルを SPA(App.css)と同じ寸法に戻す。汎用見出しリズム
   (.kk h2 の margin: 28px 0 10px)が App.css の .section-title より詳細度で
   勝ってしまうため、ここで打ち消す。kk と kk-mock-active はどちらも body に
   付くクラスなので、結合形(.kk.kk-mock-active)でないと一致しない
   (子孫形 .kk .kk-mock-active は何にも当たらない死にセレクタだった) */
.kk.kk-mock-active .section-title {
  font-size: 1.5rem;
  line-height: normal;
  margin: 0 0 1rem;
}
.kk.kk-mock-active .question-title {
  font-size: 1.25em;
  line-height: normal;
  margin: 0;
}
.kk-mock-active .kk-engine-question .drill-exam-origin { display: none; }
.kk-mock-active .kk-engine-question .instruction-section { margin-bottom: 0; }
.kk-mock-active .kk-engine-question .question-text { margin: 0 0 16px; }
.kk-mock-active .kk-engine-question .kk-answer { margin-top: 20px; }
.kk-option { font: inherit; text-align: left; }
.kk-option:focus-visible { outline: 2px solid var(--kk-accent); outline-offset: 2px; }
.kk-engine-result h2 { margin: 0 0 12px; }
.kk-engine-score { font-size: 1.15rem; margin: 10px 0; }
.kk-engine-tags ul { margin: 8px 0 8px 1.2em; }
.kk-engine-tags summary { cursor: pointer; font-weight: 700; }
/* 結果一覧の行は SPA 復習リスト(drill-review-list.css)。MPA は行クリックでは
   なくリンク+解説折りたたみのため、その補完のみ */
.kk-engine-review { margin: 8px 0 0; padding: 0; list-style: none; }
.kk-engine .drill-review-item { cursor: default; }
.kk-engine .drill-review-item.is-unscored { color: var(--kk-fg-muted); }
.kk-review-detail { flex-basis: 100%; font-size: 0.95rem; margin-top: 2px; }
.kk-review-detail summary { cursor: pointer; }
.kk-engine-error { color: var(--kk-ng); border: 2px solid var(--kk-ng); border-radius: var(--radius-card); padding: 10px 14px; margin: 16px 0; }

/* SPA と同じく、モバイルではカードを全幅にする(kk-main の横パディングを
   打ち消す。card.css 側が枠線・角丸を落とす) */
@media (max-width: 768px) {
  .kk-engine-active .kk-main.app-main { padding: 0 0 40px; }
  .kk-engine-mockbar.is-scored .header-center { flex: 0 1 236px; }
  /* SPA(Header.css)のモバイル題字サイズ。上の .kk .kk-engine-appbar .app-title が
     詳細度で勝ってしまうため、同じ値をここでも与える */
  .kk .kk-engine-appbar .app-title { font-size: 1rem; }
  .kk-engine .card,
  .kk-question .card,
  .kk-article .card { 
    margin-left: calc(-1 * var(--content-padding)); 
    margin-right: calc(-1 * var(--content-padding)); 
    width: auto; 
    max-width: none; 
  }
}

/* ---- 午後読み物ページ(docs#97 P3) ---- */
.kk-guide { border: 2px solid var(--kk-accent); border-radius: var(--radius-card); padding: 14px 16px; margin: 16px 0; background: var(--kk-surface); }
.kk-guide h2 { margin: 0 0 8px; font-size: 1.05rem; }
.kk-guide-intent-label { font-weight: 700; font-size: 0.9rem; margin: 10px 0 4px; }
.kk-guide-intent { padding-left: 1.4em; margin: 4px 0; font-size: 0.95rem; }
.kk-article-info { margin: 16px 0; }
.kk-info-list { display: grid; gap: 4px; margin: 8px 0; }
.kk-info-list > div { display: flex; gap: 10px; }
.kk-info-list dt { font-weight: 700; white-space: nowrap; color: var(--kk-fg-muted); }
.kk-info-list dd { margin: 0; }
.kk-purpose { font-size: 0.95rem; border: 2px solid var(--kk-border); border-radius: var(--radius-card); padding: 10px 14px; margin: 10px 0; }
.kk-purpose summary { cursor: pointer; font-weight: 700; }
.kk-article-passage { margin: 20px 0; }
.kk-article-passage table, .kk-article-item table, .kk-subq-instruction table { border-collapse: collapse; margin: 10px 0; display: block; overflow-x: auto; }
.kk-article-passage th, .kk-article-passage td, .kk-article-item th, .kk-article-item td { border: 1px solid var(--kk-border); padding: 4px 10px; }
.kk-article-subq { margin: 20px 0; }
.kk-article-subq h3 { font-size: 1.05rem; margin: 20px 0 8px; padding: 6px 10px; border-left: 4px solid var(--kk-accent); background: var(--kk-surface); }
.kk-article-item { margin: 14px 0 22px; padding-left: 12px; border-left: 2px solid var(--kk-border); }
.kk-item-label { font-size: 0.95rem; margin: 10px 0 4px; color: var(--kk-accent); }
.kk-article-options { list-style: none; display: grid; gap: 6px; margin: 10px 0; padding: 0; }
.kk-article-options .kk-option-label { display: inline-block; min-width: 1.8em; font-weight: 700; }
.kk-model-answer { border: 2px solid var(--kk-ok); border-radius: var(--radius-card); padding: 10px 14px; margin: 10px 0; }
.kk-model-answer h4, .kk-criteria h4, .kk-article-item .kk-explanation h4 { font-size: 0.9rem; margin: 0 0 6px; color: var(--kk-fg-muted); }
.kk-model-answer-text { font-weight: 700; margin: 4px 0; }
.kk-model-answer-missing { color: var(--kk-fg-muted); margin: 4px 0; }
.kk-criteria { border: 2px solid var(--kk-border); border-radius: var(--radius-card); padding: 10px 14px; margin: 10px 0; font-size: 0.95rem; }
.kk-criterion { margin: 6px 0; }
.kk-criterion-name { font-weight: 700; margin: 4px 0; }
.kk-criterion ul { padding-left: 1.4em; margin: 4px 0; }
.kk-item-points { font-size: 0.9rem; color: var(--kk-fg-muted); margin: 6px 0; }
.kk-subq-commentary { font-size: 0.9rem; color: var(--kk-fg-muted); border-top: 1px dashed var(--kk-border); padding-top: 6px; }
.kk-tag-articles h2 { margin-top: 28px; }
.kk-anchor { font-weight: 700; }