/* dpg-answer.css — 関所B の試作（2026-10-15 Cowork）。dpg-guide.css の決まり（トークン）を使う。
   答えた後の画面（本人選択の案C「結論 → 次へ → 深掘り」）と、出題画面のカードの影・文字の段。
   ・答えた後の画面だけに効く規則は .qz-page--answered（views.js の withQuizOverlays が付ける）の中に限る。
   ・答える前は「文字の段・余白・カードの影」だけ（上の道具＝音・計算・独り言・設定・トップへ は別の担当なので触らない）。
   ・色は直書きしない（theme-dpg.css と dpg-guide.css の変数）。紫の塗り（.qz-btn--primary）はこの画面では「次の問題へ」だけ。
   ・詳細度: 既存の quiz.css（.qz-app[data-screen] .qz-page.qz-page--split > … ＝ 0,5,0 まで）・theme-dpg.css（:root[data-quiz-theme] … ＝ 0,3,0〜）に
     勝つよう、頭を :root .qz-app[data-screen] にそろえる。 */

:root {
  /* スマホの下のメニュー（nav-compact.css の .appnav。画面の下から --dpg-nav-gap 浮いた高さ --dpg-nav-h の帯）の上に「次の問題へ」を置く高さ */
  --a-nav-clear: calc(var(--dpg-nav-gap, 10px) + var(--dpg-nav-h, 58px));
  /* 結論の ✓ ✕ の丸の大きさ */
  --a-mark: 40px;
  /* PC の2列で、左の列の「わからないときは」と道具の箱の間（カードの間より詰めて、ひとまとまりに見せる） */
  --a-joined: var(--g-s1);
}

/* ===== 出題画面のカード（答える前も同じ）: 線なし・白い面・やわらかい影。余白は 8 の倍数 ===== */
/* カードの間は 16px。★ row-gap だけ ★ PC の2列・見開きの格子は quiz.css が row-gap:0 にしている（空の行にも隙間が積まれて
   下に余白が溜まるため）ので、下の @media で 0 に戻す。列の間（column-gap: 24px・見開きの溝）には触らない。 */
:root .qz-app[data-screen="quiz"] .qz-page {
  row-gap: var(--g-s2);
}
@media (min-width: 1000px) {
  :root .qz-app[data-screen="quiz"] .qz-page.qz-page--split { row-gap: 0; }
}
@media (min-width: 820px) and (max-width: 999.98px) and (min-height: 560px) and (orientation: landscape) and (pointer: coarse) {
  :root .qz-app[data-screen="quiz"] .qz-page.qz-page--fold { row-gap: 0; }
}
:root .qz-app[data-screen="quiz"] .qz-page > .qz-progress-row,
:root .qz-app[data-screen="quiz"] .qz-page > .qz-card,
:root .qz-app[data-screen="quiz"] .qz-page > .qz-side > .qz-card,
:root .qz-app[data-screen="quiz"] .qz-page .qz-answer-panel > .qz-card {
  border: 0;
  border-radius: var(--g-radius);
  background: var(--surface);
  box-shadow: var(--g-card-shadow);
}
:root .qz-app[data-screen="quiz"] .qz-page > .qz-card.qz-question {
  padding: var(--g-s3) var(--g-s2);
  gap: var(--g-s2);
}
/* 文字の段（4段だけ・14px 未満を使わない）: 問題の頭の小さな字と出典は補足（14px）、選択肢は本文（17px） */
:root .qz-app[data-screen="quiz"] .qz-question__meta,
:root .qz-app[data-screen="quiz"] .qz-question__domain,
:root .qz-app[data-screen="quiz"] .qz-question__no,
:root .qz-app[data-screen="quiz"] .qz-type-badge,
:root .qz-app[data-screen="quiz"] .qz-question__source {
  font-size: var(--g-fs-small);
  line-height: 1.5;
}
:root .qz-app[data-screen="quiz"] .qz-progress-label { font-size: var(--g-fs-small); }
/* 行の間だけ 16px。列の間は theme-dpg.css の 14px のまま（2026-10-16 組み込み: 82cbb621 の2列の式 calc((100% - 14px) / 2) は列の間 14px が前提で、
   gap を 16px にすると2列が入らず、答える前もいつも1列になっていた） */
:root .qz-app[data-screen="quiz"] .qz-choices { row-gap: var(--g-s2); }
/* 選択肢と解説の本文を本文の段（17px）にそろえるのは、文字の大きさの設定が「ふつう」のときだけ。
   「小さめ」「大きめ」は quiz.css の設定の規則（:root[data-quiz-text] …）のまま（本人の設定を上書きしない）。 */
:root:not([data-quiz-text="small"]):not([data-quiz-text="large"]) .qz-app[data-screen="quiz"] .qz-choice { font-size: var(--g-fs-body); }
:root .qz-app[data-screen="quiz"] .qz-choice__status { font-size: var(--g-fs-small); }
@media (min-width: 651px) {
  :root .qz-app[data-screen="quiz"] .qz-page > .qz-card.qz-question { padding: var(--g-s4); }
}

/* ===== 答えた後: 結論のカード（data-role="conclusion"） ===== */
:root .qz-app[data-screen] .qz-page--answered .qz-conclusion {
  display: grid;
  gap: var(--g-s1);
  padding: var(--g-s3) var(--g-s2);
}
@media (min-width: 651px) {
  :root .qz-app[data-screen] .qz-page--answered .qz-conclusion { padding: var(--g-s3); }
}
:root .qz-app[data-screen] .qz-page--answered .qz-conclusion__head {
  display: flex;
  align-items: center;
  gap: var(--g-s2);
  min-width: 0;
}
:root .qz-app[data-screen] .qz-page--answered .qz-conclusion__mark {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: var(--a-mark);
  height: var(--a-mark);
  border-radius: 50%;
  font-size: var(--g-fs-title);
  font-weight: 800;
  line-height: 1;
}
:root .qz-app[data-screen] .qz-page--answered .qz-conclusion--ok .qz-conclusion__mark { background: var(--success-soft); color: var(--success); }
:root .qz-app[data-screen] .qz-page--answered .qz-conclusion--ng .qz-conclusion__mark { background: var(--danger-soft); color: var(--danger); }
:root .qz-app[data-screen] .qz-page--answered .qz-conclusion__title {
  min-width: 0;
  margin: 0;
  font-size: var(--g-fs-title);
  font-weight: 800;
  line-height: 1.4;
  letter-spacing: 0;
  overflow-wrap: anywhere;
}
:root .qz-app[data-screen] .qz-page--answered .qz-conclusion--ok .qz-conclusion__title { color: var(--success); }
:root .qz-app[data-screen] .qz-page--answered .qz-conclusion--ng .qz-conclusion__title { color: var(--danger); }
:root .qz-app[data-screen] .qz-page--answered .qz-conclusion__reason {
  margin: 0;
  font-size: var(--g-fs-body);
  font-weight: 400;
  line-height: 1.7;
  color: var(--text);
  overflow-wrap: anywhere;
}
:root .qz-app[data-screen] .qz-page--answered .qz-conclusion__reason + .qz-conclusion__reason { color: var(--text-2); }
/* 理由の1文も、文字の大きさの設定（小さめ・大きめ）に合わせる（解説の本文と同じ大きさ。quiz.css の設定の規則と同じ値） */
:root[data-quiz-text="small"] .qz-app[data-screen] .qz-page--answered .qz-conclusion__reason { font-size: var(--g-fs-small); }
:root[data-quiz-text="large"] .qz-app[data-screen] .qz-page--answered .qz-conclusion__reason { font-size: calc(var(--g-fs-body) + 1px); }
/* 判定行（.qz-verdict）はカードの中。
   2026-10-16 周7（この版の決まり「赤と緑は正誤の印だけ」）: 不正解・わからない・時間切れで正しい答えを言えるときは、判定行を ✕ の丸の右
   （.qz-conclusion__head の中）に判定の短い札として出す（赤はここと ✕ の丸だけ）。「正解は Ⓐ …」はその下の h2（.qz-conclusion__title--answer）で墨の字、
   頭に緑の小さな ✓。正解のときは見出し（✓ 正解！）と同じことを言うので、見た目では出さず読み上げだけに残す（role="status"）。
   正しい答えを言えないとき（見出しが「不正解」だけ）は前のまま: 不正解は読み上げだけ、わからない・時間切れは見出しの下に小さな字。 */
:root .qz-app[data-screen] .qz-page--answered .qz-conclusion .qz-verdict {
  display: flex;
  align-items: baseline;
  gap: var(--g-s1);
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--danger);
  font-size: var(--g-fs-small);
  font-weight: 700;
  line-height: 1.5;
}
:root .qz-app[data-screen] .qz-page--answered .qz-conclusion .qz-verdict__icon { color: inherit; font-size: var(--g-fs-small); }
:root .qz-app[data-screen] .qz-page--answered .qz-conclusion > .qz-verdict--correct,
:root .qz-app[data-screen] .qz-page--answered .qz-conclusion > .qz-verdict--wrong {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
:root .qz-app[data-screen] .qz-page--answered .qz-conclusion { position: relative; }
/* 周7: ✕ の丸の右の判定の札。「不正解」は正解のときの「正解！」と同じ段（見出しの大きさ・太字）。わからない・時間切れの
   「わからない（未選択）→ 不正解として記録」は長いので本文の大きさ。✕ は丸が言うので、判定行の中の印は見た目では出さない（読み上げも元から読まない）。 */
:root .qz-app[data-screen] .qz-page--answered .qz-conclusion__head > :is(.qz-verdict, .qz-conclusion__judge) {
  min-width: 0;
  margin: 0;
  color: var(--danger);
  font-size: var(--g-fs-title);
  font-weight: 800;
  line-height: 1.4;
  overflow-wrap: anywhere;
}
:root .qz-app[data-screen] .qz-page--answered .qz-conclusion__head > :is(.qz-verdict--dontknow, .qz-verdict--timeout) {
  font-size: var(--g-fs-body);
  line-height: 1.5;
}
:root .qz-app[data-screen] .qz-page--answered .qz-conclusion__head > .qz-verdict .qz-verdict__icon { display: none; }
/* 周7: 「正解は Ⓐ …」の行（不正解のとき）。墨の字・本文の大きさの太字（判定の札より一段下げて、3行の太い見出しにしない）。
   頭の ✓ だけ緑（正誤の印）。記号の札は線の丸のまま（色は字と同じ墨）、本文の大きさに合わせて選択肢の札と同じ 28px。
   文字の大きさの設定（小さめ・大きめ）は理由の1文と同じに合わせる。 */
:root .qz-app[data-screen] .qz-page--answered .qz-conclusion--ng > .qz-conclusion__title--answer {
  color: var(--text);
  font-size: var(--g-fs-body);
  font-weight: 700;
  line-height: 1.6;
}
:root[data-quiz-text="small"] .qz-app[data-screen] .qz-page--answered .qz-conclusion--ng > .qz-conclusion__title--answer { font-size: var(--g-fs-small); }
:root[data-quiz-text="large"] .qz-app[data-screen] .qz-page--answered .qz-conclusion--ng > .qz-conclusion__title--answer { font-size: calc(var(--g-fs-body) + 1px); }
:root .qz-app[data-screen] .qz-page--answered .qz-conclusion__title--answer .qz-conclusion__ok {
  margin: 0 var(--g-s1) 0 0;
  color: var(--success);
  font-weight: 800;
}
:root .qz-app[data-screen] .qz-page--answered .qz-conclusion__title--answer .qz-conclusion__letter {
  min-width: 28px;
  height: 28px;
  font-size: var(--g-fs-small);
  vertical-align: 1px;
}

/* ===== 答えた後: 「わからないときは」の段（data-role="help-row"） =====
   3つは同じ形・同じ大きさ（白地に紫の枠＝2番手）。狭い所（390px）では縦に3つ、広い所（PC の左の列など）では横に3つ。
   正解のとき（.qz-help--compact）は同じ場所に1行で小さめ（小さな字は出さない）。 */
:root .qz-app[data-screen] .qz-page--answered .qz-help {
  container-type: inline-size;
  display: grid;
  gap: var(--g-s1);
  margin: 0;
}
:root .qz-app[data-screen] .qz-page--answered .qz-help__title {
  margin: 0;
  font-size: var(--g-fs-small);
  font-weight: 700;
  line-height: 1.5;
  color: var(--text-2);
}
:root .qz-app[data-screen] .qz-page--answered .qz-help__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--g-s1);
}
:root .qz-app[data-screen] .qz-page--answered .qz-help__btn {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  column-gap: var(--g-s1);
  min-height: var(--g-btn-h);
  margin: 0;
  padding: var(--g-s1) var(--g-s2);
  border: 1.5px solid var(--g-outline);
  border-radius: var(--g-radius-btn);
  background: var(--g-outline-bg);
  color: var(--accent);
  font: inherit;
  font-size: var(--g-fs-body);
  font-weight: 700;
  line-height: 1.4;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
@media (hover: hover) {
  :root .qz-app[data-screen] .qz-page--answered .qz-help__btn:hover { background: var(--accent-soft); }
  :root .qz-app[data-screen] .qz-page--answered .qz-answer-tab:hover { color: var(--accent); }
}
:root .qz-app[data-screen] .qz-page--answered .qz-help__btn:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
:root .qz-app[data-screen] .qz-page--answered .qz-help__btn[aria-expanded="true"] { background: var(--accent-soft); }
:root .qz-app[data-screen] .qz-page--answered .qz-help__icon {
  font-size: var(--g-fs-title);
  line-height: 1;
}
/* 2026-10-16 区間6（関所F Q4 f）: 絵は線の絵（views.js の lineIcon。前は 💬 🎧 🎙️）。大きさは今までの絵の字の大きさ（1em＝22px、
   正解のとき・PC の右の列は 17px）のまま。線の色はボタンの字の色（紫）。 */
.qz-help__icon .dpg-ico { display: block; width: 1em; height: 1em; }
:root .qz-app[data-screen] .qz-page--answered .qz-help__label { min-width: 0; overflow-wrap: anywhere; }
:root .qz-app[data-screen] .qz-page--answered .qz-help__sub {
  font-size: var(--g-fs-small);
  font-weight: 600;
  line-height: 1.4;
  color: var(--text-2);
  text-align: right;
}
/* 押したあとの知らせ（app.js の flashButton が「コピーしました」に書き換えている間）。緑と赤は正誤だけに使うので、紫のまま。小さな字は隠す。 */
:root .qz-app[data-screen] .qz-page--answered .qz-help__btn[data-state="done"],
:root .qz-app[data-screen] .qz-page--answered .qz-help__btn[data-state="fail"] { background: var(--accent-soft); }
:root .qz-app[data-screen] .qz-page--answered .qz-help__btn[data-state="done"] .qz-help__sub,
:root .qz-app[data-screen] .qz-page--answered .qz-help__btn[data-state="fail"] .qz-help__sub { display: none; }
/* ［音声解説］の小さな字は、音声解説の帯（explain-audio.js の .qz-explain-audio[data-state]）の今の状態に合わせて1つだけ出す */
:root .qz-app[data-screen] .qz-page--answered .qz-help__sub--stop,
:root .qz-app[data-screen] .qz-page--answered .qz-help__sub--resume { display: none; }
:root .qz-app[data-screen] .qz-page--answered:has(.qz-explain-audio:is([data-state="playing"], [data-state="waiting"])) .qz-help__sub--play,
:root .qz-app[data-screen] .qz-page--answered:has(.qz-explain-audio[data-state="paused"]) .qz-help__sub--play { display: none; }
:root .qz-app[data-screen] .qz-page--answered:has(.qz-explain-audio:is([data-state="playing"], [data-state="waiting"])) .qz-help__sub--stop { display: inline; }
:root .qz-app[data-screen] .qz-page--answered:has(.qz-explain-audio[data-state="paused"]) .qz-help__sub--resume { display: inline; }
:root .qz-app[data-screen] .qz-page--answered:has(.qz-explain-audio:is([data-state="playing"], [data-state="waiting"])) [data-role="help-audio"] { background: var(--accent-soft); }
/* 広い所（段の幅が 520px 以上・1列の PC など）: 横に3つ。絵と名前を1行目、小さな字を2行目に。
   2026-10-15 周2: 480px では1つが 155px ほどになり、いちばん長い小さな字（話して聞く・プラス＝14px×9字＋余白）が「プラ／ス」と折れていた。
   折れない幅（3つ×161px＋間 16px＝499px）に余裕を足して 520px から横にする。それより狭い所（PC の2列の右の列など）は縦に3つ。 */
@container (min-width: 520px) {
  :root .qz-app[data-screen] .qz-page--answered .qz-help:not([data-count="1"]) .qz-help__row { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
  :root .qz-app[data-screen] .qz-page--answered .qz-help:not([data-count="1"]) .qz-help__btn {
    grid-template-columns: auto auto;
    justify-content: center;
    row-gap: 0;
    text-align: center;
  }
  :root .qz-app[data-screen] .qz-page--answered .qz-help:not([data-count="1"]) .qz-help__sub { grid-column: 1 / -1; text-align: center; }
}
/* 正解のとき: 1行に小さめ（高さは押せる大きさ 48px のまま。小さな字は出さない） */
:root .qz-app[data-screen] .qz-page--answered .qz-help--compact .qz-help__row { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
:root .qz-app[data-screen] .qz-page--answered .qz-help--compact .qz-help__btn {
  grid-template-columns: auto auto;
  justify-content: center;
  min-height: var(--g-hit);
  padding: var(--g-s1);
  font-size: var(--g-fs-small);
  text-align: center;
}
:root .qz-app[data-screen] .qz-page--answered .qz-help--compact .qz-help__icon { font-size: var(--g-fs-body); }
:root .qz-app[data-screen] .qz-page--answered .qz-help--compact .qz-help__sub { display: none !important; }
:root .qz-app[data-screen] .qz-page--answered .qz-help__orig { display: none; }

/* 同じボタンが2か所にあると迷うので、「わからないときは」と同じ処理の元のボタンは見た目では出さない（DOM には残す。キーの C／P は
   desktop-keys.js がこの段のボタンを押す）。帯の［再生］は、流れている間の［停止］だけ帯に出す（スマホで解説を読み進めても止められるように）。 */
:root .qz-app[data-screen] .qz-page--answered [data-role="copy-ask-ai"] { display: none; }
:root .qz-app[data-screen] .qz-page--answered .qz-explain-audio__toggle[data-role="explain-audio-play"] { display: none; }
/* 帯が画面の上に張り付く（v4 の sticky）のは流れている間だけ。止まっている帯は［再生］を「わからないときは」へ移したので、
   張り付いても本文を隠すだけになる（流れている間は今までどおり張り付き、［停止］が押せる）。 */
:root .qz-app[data-screen] .qz-page--answered .qz-explain-audio.audio--stopped { position: static; }
/* 帯のボタンも白地の枠（この画面の塗りは「次の問題へ」だけ） */
:root .qz-app[data-screen] .qz-page--answered .qz-explain-audio .btn--primary {
  background: var(--g-outline-bg);
  border-color: var(--g-outline);
  box-shadow: none;
  color: var(--accent);
}
:root .qz-app[data-screen] .qz-page--answered .qz-explain-audio .btn { font-size: var(--g-fs-body); }

/* ===== 答えた後: 深掘りのタブ（data-role="answer-tabs"）と中身 ===== */
:root .qz-app[data-screen] .qz-page--answered .qz-answer-tabs {
  display: flex;
  align-items: stretch;
  gap: 0;
  margin: 0;
  border-bottom: 1px solid var(--separator);
}
:root .qz-app[data-screen] .qz-page--answered .qz-answer-tab {
  flex: 1 1 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 0;
  min-height: var(--g-hit);
  margin: 0 0 -1px;
  padding: 0 4px;
  border: 0;
  border-bottom: 3px solid transparent;
  background: none;
  color: var(--text-2);
  font: inherit;
  font-size: var(--g-fs-body);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0;
  text-align: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
:root .qz-app[data-screen] .qz-page--answered .qz-answer-tab[aria-selected="true"] {
  color: var(--accent);
  border-bottom-color: var(--accent);
}
:root .qz-app[data-screen] .qz-page--answered .qz-answer-tab:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; border-radius: 8px 8px 0 0; }
:root .qz-app[data-screen] .qz-page--answered .qz-answer-tab__count {
  min-width: 20px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: var(--g-fs-small);
  line-height: 20px;
}
:root .qz-app[data-screen] .qz-page--answered .qz-answer-panel {
  display: flex;
  flex-direction: column;
  gap: var(--g-s2);
  min-width: 0;
  margin: 0;
}
:root .qz-app[data-screen] .qz-page--answered .qz-answer-panel[hidden] { display: none !important; }
:root .qz-app[data-screen] .qz-page--answered .qz-answer-panel > .qz-card {
  margin: 0;
  padding: var(--g-s3) var(--g-s2);
}
@media (min-width: 651px) {
  :root .qz-app[data-screen] .qz-page--answered .qz-answer-panel > .qz-card { padding: var(--g-s3); }
}
/* 中身の文字の段: 見出しは本文の大きさの太字、本文 17px、補足 14px（14px 未満は使わない） */
:root .qz-app[data-screen] .qz-page--answered .qz-answer-panel :is(.qz-explain__head, .qz-notes__head) {
  margin: 0;
  font-size: var(--g-fs-body);
  font-weight: 800;
  line-height: 1.5;
}
:root .qz-app[data-screen] .qz-page--answered .qz-answer-panel .qz-explain__headrow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--g-s1);
  margin: 0 0 var(--g-s2);
}
:root .qz-app[data-screen] .qz-page--answered .qz-answer-panel .qz-explain__head { margin: 0 0 var(--g-s1); }
:root .qz-app[data-screen] .qz-page--answered .qz-answer-panel .qz-explain__headrow .qz-explain__head { margin: 0; min-height: 0; }
/* 解答時間（「この問題 1秒」。views.js の buildExplainCard）。2026-10-16 周12 X2: 名前を付けたので、札の地の色をやめて小さな薄い字にする（目立たせない） */
:root .qz-app[data-screen] .qz-page--answered .qz-answer-panel .qz-explain__time {
  font-size: var(--g-fs-small);
  font-weight: 400;
  line-height: 1.5;
  padding: 0;
  border-radius: 0;
  background: none;
  color: var(--text-2);
  white-space: nowrap;
}
:root .qz-app[data-screen] .qz-page--answered .qz-answer-panel .qz-explain__body { line-height: 1.8; }
:root:not([data-quiz-text="small"]):not([data-quiz-text="large"]) .qz-app[data-screen] .qz-page--answered .qz-answer-panel .qz-explain__body { font-size: var(--g-fs-body); }
:root .qz-app[data-screen] .qz-page--answered .qz-answer-panel :is(.qz-share__hint, .qz-share__prompt, .qz-share__note, .qz-share__memo-hint, .qz-notes__empty, .qz-notes__status, .qz-notes__count, .qz-notes__share-status, .qz-scratch-memo__hint, .ex__legend),
:root .qz-app[data-screen] .qz-page--answered .qz-left-tools :is(.qz-share__hint, .qz-share__prompt, .qz-share__note, .qz-share__memo-hint) {
  font-size: var(--g-fs-small);
  line-height: 1.6;
}
:root .qz-app[data-screen] .qz-page--answered :is(.qz-answer-panel, .qz-left-tools) .qz-share__btn { font-size: var(--g-fs-small); }
/* みんなの解説（v4 の .ex・ドパガキAI の .xai）の中の小さな字も 14px まで上げる（読む字は 14px 未満を使わない）。押す物は 44px 以上。
   丸の中の記号（.xai__steps-mark・.xai__avatar）は絵の扱いなのでそのまま。 */
:root .qz-app[data-screen] .qz-page--answered .qz-answer-panel .qz-community :is(.xai-line, .xai__msg, .xai__report-msg, .xai__prog-meta, .xai__btn, .xai__steps, .xai__slot-pct, .xai__skel-text, .xai__badge, .note__body--imgonly, .qz-community__badge, .xnote__me) {
  font-size: var(--g-fs-small);
}
:root .qz-app[data-screen] .qz-page--answered .qz-answer-panel .qz-community .xai__btn { min-height: 44px; }
/* 「自分の解説を追加」「保存」も白地に紫の枠（この画面の塗りは「次の問題へ」だけ。保存は押し間違えると困るので 44px のまま） */
:root .qz-app[data-screen] .qz-page--answered .qz-notes .qz-btn--primary {
  background: var(--g-outline-bg);
  border: 1.5px solid var(--g-outline);
  box-shadow: none;
  color: var(--accent);
  filter: none;
}
@media (hover: hover) {
  :root .qz-app[data-screen] .qz-page--answered .qz-notes .qz-btn--primary:hover:not(:disabled) { background: var(--accent-soft); }
}
:root .qz-app[data-screen] .qz-page--answered .qz-notes [data-role="note-edit"].qz-btn--block { min-height: var(--g-btn-h); font-size: var(--g-fs-body); }

/* ===== 答えた後: 次へ ===== */
/* 上の「次へ」（next-top）は、1列（スマホ）では見た目で出さない（下に固定した「次の問題へ」と同じ処理）。PC の2列・見開きでは下の規則で出す。 */
:root .qz-app[data-screen] .qz-page--answered [data-role="next-top"] { display: none; }
/* 「次の問題へ」（next）。この画面でただ1つの紫の塗り。DOM では「わからないときは」のすぐ後（読み上げ・Tab の順は 結論 → 次へ → 深掘り）。
   見た目は order でページの最後に回し、1列では画面の下（下のメニューの上）に固定する（sticky は最後にあるときだけ、読み進める間ずっと下に残る）。 */
:root .qz-app[data-screen] .qz-page--answered > [data-role="next"] {
  order: 2;
  position: sticky;
  bottom: calc(var(--a-nav-clear) + var(--g-s1) + env(safe-area-inset-bottom, 0px));
  z-index: 8;
  min-height: var(--g-btn-h);
  margin: 0;
  font-size: var(--g-fs-body);
}
@media (min-width: 1024px) {
  :root .qz-app[data-screen] .qz-page--answered > [data-role="next"] { bottom: var(--g-s2); }
}
/* 自分の解説を書いている間は固定しない（指の下に「次の問題へ」が来て、押し間違いで書きかけから離れないように）。ページの最後に戻るだけ。 */
:root .qz-app[data-screen] .qz-page--answered:has([data-role="note-textarea"]) > [data-role="next"] { position: static; }

/* ===== PC の2列（1000px 以上・.qz-page--split）: 左＝問題・結論・わからないとき（＋道具の箱）・次へ、右＝次へ（枠）とタブと中身 ===== */
@media (min-width: 1000px) {
  /* 縦の間は子の margin-bottom（quiz.css と同じ作り）。次へは order で最後に回しているので、DOM の最後の子ではなく次への下を 0 にする。 */
  :root .qz-app[data-screen] .qz-page.qz-page--split.qz-page--answered > * { margin-bottom: var(--g-s2); }
  :root .qz-app[data-screen] .qz-page.qz-page--split.qz-page--answered > [data-role="next"] { margin-bottom: 0; }
  /* 格子の中では sticky が自分の行の中でしか動かない（下に固定できない）ので、次へはふつうの位置。代わりに右の列の一番上に次へ（枠）を出す。 */
  :root .qz-app[data-screen] .qz-page.qz-page--split.qz-page--answered > [data-role="next"] { position: static; }
  :root .qz-app[data-screen] .qz-page.qz-page--split.qz-page--answered > .qz-side > [data-role="next-top"] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: var(--g-btn-h);
    border: 1.5px solid var(--g-outline);
    background: var(--g-outline-bg);
    color: var(--accent);
    font-size: var(--g-fs-body);
  }
  :root .qz-app[data-screen] .qz-page.qz-page--split.qz-page--answered > .qz-side { gap: var(--g-s2); }
  /* 右の列は枠の中でスクロールするので、タブは列の上に張り付かせる（長い解説を読んだまま、ほかのタブへ移れる） */
  :root .qz-app[data-screen] .qz-page.qz-page--split.qz-page--answered > .qz-side > .qz-answer-tabs {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--bg);
  }
  /* 左の列の並び: 問題 → やさしい解説 → 自分の計算 →（次へ。見た目では出さない）。
     格子の置き方は DOM の順（order を足した順）なので、自分の計算（DOM では問題のすぐ下）を次へのすぐ上へ回す。
     2026-10-15 周2: 結論と「わからないときは」は desktop-keys.js の DpgSplitTools が右の列の上へ移す（下の「周2・PC の2列の答えた後」）。
     コピーの欄・音声の帯（以前の左の道具の箱 .qz-left-tools）も、答えた後は左へ出さず、くわしい解説のタブの中（本文の後ろ）に置く。 */
  :root .qz-app[data-screen] .qz-page.qz-page--split.qz-page--answered > .qz-scratch-memo { order: 1; }
}

/* ===== 見開き（折りたたみの端末・820〜999px の横向き）: 右ページの上に次へ（枠）。次へは格子の中なので固定しない ===== */
@media (min-width: 820px) and (max-width: 999.98px) and (min-height: 560px) and (orientation: landscape) and (pointer: coarse) {
  :root .qz-app[data-screen] .qz-page.qz-page--fold.qz-page--answered > * { margin-bottom: var(--g-s2); }
  :root .qz-app[data-screen] .qz-page.qz-page--fold.qz-page--answered > [data-role="next"] { position: static; margin-bottom: 0; }
  :root .qz-app[data-screen] .qz-page.qz-page--fold.qz-page--answered > .qz-side > [data-role="next-top"] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: var(--g-btn-h);
    border: 1.5px solid var(--g-outline);
    background: var(--g-outline-bg);
    color: var(--accent);
    font-size: var(--g-fs-body);
  }
}

/* 動きを減らす設定: この画面で足した動き（ボタンの色の移り変わりなど）は無い。念のため止める。 */
@media (prefers-reduced-motion: reduce) {
  :root .qz-app[data-screen] .qz-page--answered :is(.qz-help__btn, .qz-answer-tab) { transition: none; }
}

/* ===== 周1の直し（評価役B トップ1・評価役A）===== */
/* くわしい解説のタブ: 本文（正解：… と理由）を先に、AI に頼む道具と音声の帯は本文の後へ（1列のとき。PC は DpgSplitTools が左へ出す） */
:root .qz-app[data-screen] .qz-page--answered .qz-explain { display: flex; flex-direction: column; }
:root .qz-app[data-screen] .qz-page--answered .qz-explain > :is(.qz-share, .qz-explain-audio) { order: 3; margin-top: var(--g-s2); }
:root .qz-app[data-screen] .qz-page--answered .qz-explain > .qz-refs { order: 2; }
/* PC の2列: 「次の問題へ」は右の列の上（列ごと画面に張り付く）の1つだけにして、紫の塗りにする。左の列の下の次へは見た目では出さない（キー操作・読み上げの順はそのまま）。
   2026-10-19 区間17 QUIZ3（関所Q の Q6「選択肢の下の［次へ］は紫の塗り」・Q2「紫の塗りは1画面に1つ」）: 塗りは選択肢の下の次へ（next。下の 24)）へ移し、
   右の列の上の次へ（next-top）は白地に紫の枠（2番手。上の 443 行の形のまま）にした。ここで next-top に塗りを重ねる規則は外した。 */
@media (min-width: 1000px) {
  :root .qz-app[data-screen] .qz-page.qz-page--split.qz-page--answered > [data-role="next"] { display: none; }
}

/* ===== 周2（2026-10-15）: 選択肢の記号の札・話して質問・出題の上の段 ===== */

/* ---- 1) 選択肢の左の丸の札（A〜D。本人が選んだ逸脱提案。views.js の buildChoiceMark）----
   記号は AI への依頼文・結論の「正解は A. …」と同じ（app.js の choiceLetter）。中身が「a，b」のような組み合わせでも混ざらないよう、
   札は大文字・太字・面の色の丸で、中身の文字とは形で分ける。答えた後は正誤の色（緑・赤は正誤だけ）。 */
:root .qz-app[data-screen="quiz"] .qz-choice__mark {
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  box-sizing: border-box;
  min-width: 28px;
  height: 28px;
  padding: 0 4px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--text-2);
  font-size: var(--g-fs-small);
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0;
}
:root .qz-app[data-screen="quiz"] .qz-choice--selected .qz-choice__mark { background: var(--accent-soft); color: var(--accent); }
:root .qz-app[data-screen="quiz"] .qz-choice--correct .qz-choice__mark { background: var(--success-soft); color: var(--success); }
:root .qz-app[data-screen="quiz"] .qz-choice--wrong .qz-choice__mark { background: var(--danger-soft); color: var(--danger); }
/* PC（キーのある端末・600px 以上）: 札の記号がそのままキー（A〜D で選べる。desktop-keys.js）。数字の札（desktop-layout.css の ::after）は
   記号の札と2つの名前にならないよう 1〜4 個目では出さない（5 個目からは E〜 のキーが無いので数字の札のまま）。
   答える前の札はキーの形（白地に線と下の影）にして、押せるキーだと分かるように。キーの札をオフにした設定では形を変えない。 */
@media (hover: hover) and (pointer: fine) and (min-width: 600px) {
  html.dpg-keys .qz-choices--marked > .qz-choice:nth-child(-n+4)::after { content: none; }
  html.dpg-keys:not(.dpgk-hints-off) .qz-app[data-screen="quiz"] .qz-choices--marked > .qz-choice:not(:disabled):nth-child(-n+4):not(.qz-choice--selected) .qz-choice__mark {
    border-color: var(--separator);
    background: var(--surface);
    box-shadow: inset 0 -2px 0 var(--separator);
  }
}

/* ---- 2) 結論の「正解は A. …」の記号も同じ丸の札（線の丸。色は見出しの色＝正誤の色）---- */
:root .qz-app[data-screen] .qz-page--answered .qz-conclusion__letter {
  display: inline-grid;
  place-items: center;
  box-sizing: border-box;
  min-width: 32px;
  height: 32px;
  margin: 0 var(--g-s1) 0 0;
  padding: 0 4px;
  border: 2px solid currentColor;
  border-radius: 999px;
  font-size: var(--g-fs-body);
  font-weight: 800;
  line-height: 1;
  vertical-align: 2px;
}
:root .qz-app[data-screen] .qz-page--answered .qz-conclusion__sep { margin: 0 var(--g-s1) 0 0; }

/* ---- 3) 話して質問（help-voice）の会話欄: 1200px 未満では画面の下に重ねて開く ----
   voice-chat.js は会話欄を #app の外（ページの最後）に置き、1200px 未満では開いたときに会話欄までページを送っていた（答えた所から
   ページの最下部へ飛ぶ）。1200px 以上は voice-chat.css が右に重ねる形なので、1200px 未満も同じく「重ねる」形にして、今の位置のまま開く。
   ・会話欄の中の作り（−で丸に畳む・×で閉じる・開始と終了）は voice-chat.js のまま。重ねて置くので voice-chat.js の送り（revealActions）は
     会話欄が画面に入っていて動かない。閉じる（×）と、押した［話して質問］へフォーカスが戻る（voice-chat.js）。
   ・開いている間は、ページの下に会話欄の高さの余白を足す（下の本文も会話欄の上まで送って読める。計算用紙の下のシートと同じやり方）。 */
:root { --a-voice-sheet: min(64dvh, 560px); }
@media (max-width: 1199.98px) {
  html.has-voice-chat:not(.has-voice-chat-collapsed) .dpg-voice-chat:not(.dpg-voice-chat--collapsed) {
    position: fixed;
    z-index: 60;
    top: auto;
    right: 0;
    bottom: 0;
    left: 0;
    width: auto;
    max-width: 700px;
    max-height: var(--a-voice-sheet);
    margin: 0 auto;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    border-radius: var(--g-radius) var(--g-radius) 0 0;
    box-shadow: var(--g-card-shadow-lift);
  }
  html.has-voice-chat:not(.has-voice-chat-collapsed) .dpg-voice-chat:not(.dpg-voice-chat--collapsed) .dpg-voice-chat__conversation { max-height: min(22dvh, 200px); }
  html.has-voice-chat:not(.has-voice-chat-collapsed) .qz-app.qz-app[data-screen="quiz"] { padding-bottom: calc(var(--a-voice-sheet) + var(--g-s3)); }
}

/* ---- 4) スマホの「次の問題へ」の高さ: 出題中は下のメニューを出さない（nav-compact.css が body で --dpg-nav-h を 0 にする）ので、
   その値をこの要素で読み直して、画面の下から 8px に置く（:root で計算した --a-nav-clear は 0 にならず、82px 浮いていた）。 */
@media (max-width: 1023.98px) {
  :root .qz-app[data-screen] .qz-page--answered > [data-role="next"] {
    bottom: calc(var(--dpg-nav-gap, 10px) + var(--dpg-nav-h, 58px) + var(--g-s1) + env(safe-area-inset-bottom, 0px));
  }
}

/* ---- 5) 出題の上の段を詰める（答える前も後も同じ。問題文と選択肢を上へ）----
   上の道具（音・計算・独り言・設定・トップへ）の見た目は別の担当の直し方なので変えない。変えるのは段の高さと余白だけ。
   ・画面の上の余白 20〜32px → 8px（PC 16px）。道具の段の上下の余白を 8px に。
   ・「第1ブロック・1/10問」の段は、文字と進みの線を1行に並べる（2段・84px → 1行・48px）。COMBO・リーチは線の右。
     高さはコンボの札（いちばん小さい段）と同じ 32px を文字の行の高さにして、札が出ても段の高さが変わらない。
   ・道具の段との間は 8px（ひとまとまり）、問題のカードとの間は今の 16px。問題のカードの上下の余白 24px → 16px（PC 32px → 24px）。 */
:root .qz-app.qz-app[data-screen="quiz"] { padding-top: var(--g-s1); }
:root .qz-app[data-screen="quiz"] .qz-quiz-head { padding-top: var(--g-s1); }
:root .qz-app[data-screen="quiz"] .qz-page > .qz-progress-row {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  column-gap: var(--g-s2);
  row-gap: var(--g-s1);
  margin-top: calc(-1 * var(--g-s1));
  padding: var(--g-s1) var(--g-s2);
}
:root .qz-app[data-screen="quiz"] .qz-page > .qz-progress-row > .qz-progress-row__head { display: contents; }
:root .qz-app[data-screen="quiz"] .qz-page > .qz-progress-row .qz-progress-label { order: 0; line-height: 32px; white-space: nowrap; }
:root .qz-app[data-screen="quiz"] .qz-page > .qz-progress-row > .qz-progress-bar { order: 1; flex: 1 1 96px; height: 8px; margin: 0; }
:root .qz-app[data-screen="quiz"] .qz-page > .qz-progress-row :is(.qz-combo, .qz-reach) { order: 2; margin-left: 0; }
:root .qz-app[data-screen="quiz"] .qz-page > .qz-card.qz-question { padding-top: var(--g-s2); padding-bottom: var(--g-s2); }
@media (min-width: 651px) {
  :root .qz-app[data-screen="quiz"] .qz-page > .qz-card.qz-question { padding: var(--g-s3) var(--g-s4); }
}
@media (min-width: 1000px) {
  :root .qz-app.qz-app[data-screen="quiz"] { padding-top: var(--g-s2); }
  :root .qz-app[data-screen="quiz"] .qz-quiz-head { padding-top: var(--g-s1); padding-bottom: var(--g-s1); }
}

/* ---- 6) 正解のとき（.qz-help--compact）の1行の3つ: 名前が5文字（解説を聴く・話して質問）になったので、狭い所（段の幅 400px 未満・
   スマホ）では絵を名前の上に置く（名前を途中で折り返さない。押せる高さは 48px 以上のまま）。 ----
   2026-10-16 すり合わせ（小さな直し）: 名前を折らないのは「まとまり」の単位。ふつうの名前（解説を聴く・声で質問）は丸ごと1行、
   語のまとまり（views.js の phraseNodes が .nobr に分けた「外部の」「AIに聞く」）の名前は、まとまりの中では折らず、まとまりの間では折れる
   （views.js が help-ai の名前に付けていた inline の white-space: normal の代わり）。 */
@container (max-width: 399.98px) {
  :root .qz-app[data-screen] .qz-page--answered .qz-help--compact .qz-help__btn {
    grid-template-columns: auto;
    justify-items: center;
    row-gap: 0;
  }
  :root .qz-app[data-screen] .qz-page--answered .qz-help--compact .qz-help__label { white-space: nowrap; }
  :root .qz-app[data-screen] .qz-page--answered .qz-help--compact .qz-help__label:has(> .nobr) { white-space: normal; }
  :root .qz-app[data-screen] .qz-page--answered .qz-help--compact .qz-help__label > .nobr { white-space: nowrap; }
}

/* ===== 周2（2026-10-15 夕）: PC の2列の答えた後・「AIに聞く」の後の1行 ===== */

/* ---- 7) PC の2列（1000px 以上・.qz-page--split）----
   ・選択肢は1列に縦（theme-dpg.css の 720px 以上の2列は、半分の幅の左の列では1つが 200px 足らずになり「企業内／に蓄積／された…」と細切れになっていた）。
     答える前の画面（1列・2つ並び）の1つの幅（およそ 440px）に近い幅で読める。
   ・右の列（.qz-side）の上: 次の問題へ（紫の塗り・DOM では結論の後ろ）→ 結論 → わからないときは → タブと中身。
     結論と「わからないときは」は desktop-keys.js の DpgSplitTools が右の列へ移す（1000px 未満では元の場所＝スマホの並びのまま）。
     次へ（next-top）は DOM では結論の後ろ（読み上げは 結論 → 次へ → わからないとき → 深掘り）なので、order で列の一番上に出す。 */
@media (min-width: 1000px) {
  /* 選択肢の列の数は theme-dpg.css（82cbb621）の「格子の中が 560px 以上なら2列」に任せる（2026-10-16 組み込み。1列の固定はやめた） */
  /* 1列にした選択肢を1行16字以上で読めるように、左の列を少し広げる: 右の列の初めの幅 50% → 46%（つまみで変えた幅はそのまま）、
     問題のカードの左右の余白 32px → 24px。1280px で、正誤の札（不正解）が付いた選択肢も1行 16〜17 字（以前は 15 字で折れていた）。 */
  :root .qz-app[data-screen] .qz-page.qz-page--split.qz-page--answered { --dpg-split-col: clamp(300px, var(--dpg-split-w, 46%), calc(100% - 444px)); }
  /* 2026-10-16 区間6（関所F Q4 d・評価役B「答える前は1行が約50字と長い」）: 出題は答える前から2列（.qz-page--before）。左の列の初めの幅は、
     問題文が1行 約36字（文字の大きさの設定の字の大きさ × 36 ＋ カードの左右の余白）で読める幅を先に取り、右の列は残り（350px より狭くしない。右が 400px に満たないときの扱いは下の組み込みの直し）。
     答える前と後で同じ式なので、選択肢の位置と並び（縦1列）は答えても変わらない。つまみで変えた幅（--dpg-split-w）はそのまま効く。
     2026-10-16 区間6の組み込み: 1280px で右の列が 350px になり、正解のときの3つのボタンが「絵が上」の形（6) の 400px 未満の形）に
     切り替わり、タブ（くわしい解説・みんなの解説・自分のメモ）の字の間が 13px ほどに詰まっていた。左の列は 36字が基本のまま、
     右の列が 400px に満たないときだけ左の列を 31字まで縮めて右の列を 400px まで広げる（それでも 350px に満たないときは 350px）。
       1280px … 右 400px・左の問題文は1行 約32字（スクロールバーで幅が 15px ほど減る端末でも右 400px・左 約31字）
       1440px … 今までどおり 右 477px・左 36字 ／ 1000px … 今までどおり 右 350px（左を 31字にしても右が 350px に届かないため）
     1000px で右を 400px にすると、左の列が 488px になって選択肢が答えた後（✓と「正解」の札）にもう1行折れ、下の選択肢が動いていた。 */
  :root .qz-app[data-screen="quiz"] .qz-page.qz-page--split:is(.qz-page--answered, .qz-page--before) {
    --a-read-fs: 17px;
    --dpg-split-col: clamp(300px, var(--dpg-split-w, max(
      clamp(350px, calc(100% - 31 * var(--a-read-fs) - 2 * var(--g-s3) - 24px), 400px),
      calc(100% - 36 * var(--a-read-fs) - 2 * var(--g-s3) - 24px))), calc(100% - 444px));
  }
  :root[data-quiz-text="small"] .qz-app[data-screen="quiz"] .qz-page.qz-page--split:is(.qz-page--answered, .qz-page--before) { --a-read-fs: 15px; }
  :root[data-quiz-text="large"] .qz-app[data-screen="quiz"] .qz-page.qz-page--split:is(.qz-page--answered, .qz-page--before) { --a-read-fs: 20px; }
  /* 答える前の左の列の縦の間も、答えた後（上の 428 行）と同じ 16px（答えても問題のカード・選択肢が上下に動かない） */
  :root .qz-app[data-screen="quiz"] .qz-page.qz-page--split.qz-page--before > * { margin-bottom: var(--g-s2); }
  :root .qz-app[data-screen="quiz"] .qz-page.qz-page--split.qz-page--before > .qz-wait { margin-bottom: 0; }
  :root .qz-app[data-screen="quiz"] .qz-page.qz-page--split > .qz-card.qz-question { padding-left: var(--g-s3); padding-right: var(--g-s3); }
  :root .qz-app[data-screen] .qz-page.qz-page--split.qz-page--answered > .qz-side > [data-role="next-top"] { order: -1; }
  /* 右の列の中の結論のカードと「わからないときは」は、列の中の間（16px）で積む（ページの直下の子の margin-bottom は使わない） */
  :root .qz-app[data-screen] .qz-page.qz-page--split.qz-page--answered > .qz-side > :is(.qz-conclusion, .qz-help) { margin: 0; }
}

/* ---- 8) ［AIに聞く］を押した後に残す1行（data-role="help-ai-status"。views.js の askAiAndTell が書く。次の問題で消える）----
   空の間は見えない形（読み上げの入れ物としては置いたまま。段の高さ・間は変えない）。 */
:root .qz-app[data-screen] .qz-page--answered .qz-help__status {
  margin: 0;
  padding: var(--g-s1) var(--g-s2);
  border-radius: var(--g-radius-btn);
  background: var(--accent-soft);
  color: var(--text);
  font-size: var(--g-fs-small);
  font-weight: 600;
  line-height: 1.6;
  overflow-wrap: anywhere;
}
:root .qz-app[data-screen] .qz-page--answered .qz-help__status:empty {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
:root .qz-app[data-screen] .qz-page--answered .qz-help { position: relative; }
/* はじめての5問の案内が「AIに聞く」の吹き出し（同じことを言う）を出している間は、段の下の1行は出さない（吹き出しが言う） */
:root .qz-app[data-screen] .qz-page--answered .qz-help:has(.dpg-coach[data-step="help"]) .qz-help__status:not(:empty),
:root .qz-app[data-screen] .qz-page--answered .qz-help:has(+ .dpg-coach[data-step="help"]) .qz-help__status:not(:empty) { display: none; }

/* ---- 9) くわしい解説の本文の後ろの「わからないときは AIに聞く」（3番手＝文字リンク。押せる高さは 48px）---- */
:root .qz-app[data-screen] .qz-page--answered .qz-explain__ask {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: var(--g-s2);
  margin: var(--g-s1) 0 0;
  font-size: var(--g-fs-body);
  line-height: 1.5;
}
:root .qz-app[data-screen] .qz-page--answered .qz-explain__ask-link {
  display: inline-flex;
  align-items: center;
  min-height: var(--g-hit);
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--text-2);
  font: inherit;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
:root .qz-app[data-screen] .qz-page--answered .qz-explain__ask-name {
  margin-left: 4px;
  color: var(--accent);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 4px;
}
/* 2026-10-16: 名前を語のまとまり（.nobr ＝ home-v3.css の inline-block）に分けたら、親の下線が中まで届かず消えた。まとまりの箱にも同じ下線を引く */
:root .qz-app[data-screen] .qz-page--answered .qz-explain__ask-name > .nobr { text-decoration: inherit; text-decoration-line: underline; text-underline-offset: 4px; }
@media (hover: hover) {
  :root .qz-app[data-screen] .qz-page--answered .qz-explain__ask-link:hover .qz-explain__ask-name,
  :root .qz-app[data-screen] .qz-page--answered .qz-explain__ask-link:hover .qz-explain__ask-name > .nobr { text-decoration-thickness: 2px; }
}
:root .qz-app[data-screen] .qz-page--answered .qz-explain__ask-link:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 8px; }
:root .qz-app[data-screen] .qz-page--answered .qz-explain__ask-status {
  flex: 1 1 100%;
  color: var(--text);
  font-size: var(--g-fs-small);
  font-weight: 600;
  line-height: 1.6;
}
:root .qz-app[data-screen] .qz-page--answered .qz-explain__ask-status:empty { display: none; }

/* ===== 周3（2026-10-15）の直し ===== */

/* ---- 9) 結論のカードの［くわしい解説を読む ↓］（data-role="conclusion-more"。views.js の buildConclusionCard / openExplainTab）----
   初めての人役「解説はこれで全部？」（理由の1文が「…」で切れ、くわしい解説は下に固定した「次の問題へ」の下に隠れる）。
   3番手の文字リンク（紫の字・下線。塗りも枠も無し）。字は 17px、押せる高さは 48px。カードの下の余白に少し食い込ませて、カードを高くしすぎない。 */
:root .qz-app[data-screen] .qz-page--answered .qz-conclusion__more {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  gap: 4px;
  min-height: var(--g-hit);
  margin: 0 0 calc(-1 * var(--g-s1));
  padding: 0;
  border: 0;
  background: none;
  color: var(--accent);
  font: inherit;
  font-size: var(--g-fs-body);
  font-weight: 700;
  line-height: 1.4;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
:root .qz-app[data-screen] .qz-page--answered .qz-conclusion__more-label { text-decoration: underline; text-underline-offset: 3px; }
:root .qz-app[data-screen] .qz-page--answered .qz-conclusion__more:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
/* 移った先: くわしい解説の中身の頭を、タブの1段（48px）と間を空けた所に止める（1列ではタブが見えたまま、PC の2列では張り付いたタブの下）。 */
:root .qz-app[data-screen] .qz-page--answered .qz-answer-panel { scroll-margin-top: calc(var(--g-hit) + var(--g-s3)); }
/* 中身へはフォーカスを移すだけ（読み上げ用）。中身の大きな枠は出さない（キーボードの人には、上のタブの選ばれた印で位置が分かる）。 */
:root .qz-app[data-screen] .qz-page--answered .qz-answer-panel[tabindex="-1"]:focus { outline: none; }

/* ---- 10) スマホ・タブレット（1000px 未満）の「わからないときは」は、正解でも不正解でも同じ形（3つ並び・同じ大きさ）----
   使い込んでいる人役「正解か不正解かで場所が動くので手が覚えられない」。正解のときの形（.qz-help--compact: 1行に3つ・押せる高さ 48px・
   小さな字は出さない。狭い所では絵を名前の上）に、不正解・わからない・時間切れもそろえる（クラスはそのまま。見た目だけ同じにする）。
   PC（1000px 以上）は周12 X2 から views.js が正誤どちらにも .qz-help--compact を付けるので、同じ1行の形（下の 17)）。 */
@media (max-width: 999.98px) {
  :root .qz-app[data-screen] .qz-page--answered .qz-help .qz-help__row { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
  :root .qz-app[data-screen] .qz-page--answered .qz-help .qz-help__btn {
    grid-template-columns: auto auto;
    justify-content: center;
    min-height: var(--g-hit);
    padding: var(--g-s1);
    font-size: var(--g-fs-small);
    text-align: center;
  }
  :root .qz-app[data-screen] .qz-page--answered .qz-help .qz-help__icon { font-size: var(--g-fs-body); }
  :root .qz-app[data-screen] .qz-page--answered .qz-help .qz-help__sub { display: none !important; }
  @container (max-width: 399.98px) {
    :root .qz-app[data-screen] .qz-page--answered .qz-help .qz-help__btn { grid-template-columns: auto; justify-items: center; row-gap: 0; }
    /* 名前を折らないのは「まとまり」の単位（6) と同じ）: ふつうの名前は丸ごと1行、.nobr の名前（外部の／AIに聞く）はまとまりの中では折らず、まとまりの間では折れる */
    :root .qz-app[data-screen] .qz-page--answered .qz-help .qz-help__label { white-space: nowrap; }
    :root .qz-app[data-screen] .qz-page--answered .qz-help .qz-help__label:has(> .nobr) { white-space: normal; }
    :root .qz-app[data-screen] .qz-page--answered .qz-help .qz-help__label > .nobr { white-space: nowrap; }
  }
}

/* ===== 関所C（2026-10-15）の直し ===== */

/* ---- 11) 出題の上の道具の札（views.js の headButtonParts）----
   2026-10-15 関所D（本人の箇所への意見 p1「こっちの方がいいんじゃない？」）: 関所Cの形に戻した。切ったときは名前の代わりに赤い「オフ」
   （.qz-sound-btn__name--off は quiz.css の赤・太字のまま）。関所Cの後に足した「名前（灰色）＋赤いオフ」の規則（字送りの palt・名前の灰色・
   .qz-sound-btn__state・道具の左右の余白を詰める規則）は外した。赤い斜線はそのまま（quiz.css）。
   題名は語の切れ目（空白・「・」）で折る（収まらない長い語だけ途中で折る）。「— 1周目」は1まとまり（PC の答えた後の左の列で「— 1／周目」と折れないように）。 */
:root .qz-app[data-screen="quiz"] .qz-quiz-head .qz-quiz-head__title { word-break: keep-all; overflow-wrap: anywhere; }
:root .qz-app[data-screen="quiz"] .qz-quiz-head .qz-quiz-head__suffix { white-space: nowrap; } /* 「— 1周目」は1まとまり（views.js の quizTitleParts） */

/* ---- 12) 「わからないときは」の小さな字は1つのボタンに1つまで（本人の Q2「下の文字が多すぎても見づらい」）----
   ［声で質問］の「プラス」（プラスでない人だけ）は、「1回無料」の札（dpg-trial.js。付いている間はボタンに data-trial-float）が
   出ている間は見た目では出さない（札が1つの補足。「プラス」は title に残る）。 */
:root .qz-app[data-screen] .qz-page--answered .qz-help__btn[data-trial-float] .qz-help__sub--plus { display: none; }

/* ===== 関所D（2026-10-15）の直し ===== */

/* ---- 13) 出題中の見出しは資格名から（本人の Q5。app.js の screenSetTitle）----
   「ITパスポート・令和6年度 Part3 — 1周目」のように長くなったので、1000px 未満（題名が上の段の全幅）でも1行で末尾「…」にせず、
   2行まで折り返す（それより長いときだけ「…」）。折れるのは語の切れ目だけ（views.js の titleWords が「・」の後ろ・空白で .nobr に分ける）。 */
@media (max-width: 999.98px) {
  :root .qz-app[data-screen="quiz"] .qz-quiz-head .qz-quiz-head__title {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    white-space: normal;
  }
}

/* ---- 14) （2026-10-16 関所E で外した）「わからないときは」を結論のカードの中に入れたときの間の規則。
   本人の Q2 で段をカードの後ろ（関所Dの並び）に戻したので、カードの中の段の規則は要らなくなった（views.js の buildQuiz）。
   2026-10-16 区間6（関所F Q3・本人「正誤のカードのすぐ下へ（関所Dの形）」）: 段をカードの中の判定の段のすぐ後（理由の文の前）へ戻したので、
   間の規則も戻す。段の上下はカードの中の間（8px）に 8px を足して 16px（判定と理由の文から少し離して、ひとまとまりに見せる）。
   PC の2列（1000px 以上）は desktop-keys.js がカードの外（右の列の 結論 → 次へ → わからないとき）へ出すので、この規則は効かない。 */
:root .qz-app[data-screen] .qz-page--answered .qz-conclusion > .qz-help { margin: var(--g-s1) 0; }

/* ---- 15) 読んで覚える（data-screen="practice-study"）の見出しも資格名から（本人の Q5）----
   「ITパスポート・令和8年度 Part1 — 読んで覚える」は、390px で道具の横の2行に収まらず「…」で切れていた。1000px 未満では出題画面と同じく
   題名を上の段の全幅（2行まで）に置き、道具は2段目に右寄せ（押せる所は 44px のまま。1000px 以上は今のまま題名の横）。 */
@media (max-width: 999.98px) {
  :root .qz-app[data-screen="practice-study"] .qz-quiz-head { flex-wrap: wrap; justify-content: flex-end; row-gap: 0; }
  :root .qz-app[data-screen="practice-study"] .qz-quiz-head .qz-quiz-head__title { flex: 1 0 100%; }
}

/* ===== 関所E（2026-10-16）の直し ===== */

/* ---- 16) 「1回無料」の札（dpg-trial.js。札が付いている間はボタンに data-trial-float）は、ボタンの上の縁の横の真ん中（dpg-trial.css）----
   本人の箇所への意見 p4「『1回無料』のところが真ん中にない」。札（高さ約 20px）は上の縁から 10px 下まで入るので、そのボタンだけ上の余白を 8px → 16px にして、
   絵（🎙️）と名前を札の下へ逃がす（横に3つ並ぶ形では、同じ段のほかの2つも同じ高さにそろう）。
   PC の右の列のように縦に積む形では、札が上のボタン（解説を聴く）の下の縁に掛からないよう、札のある段だけ縦の間を 8px → 16px にする
   （横に並ぶ形は1段なので、縦の間は効かない）。お試しを使った後は札と data-trial-float が外れ、元の余白・間に戻る。 */
:root .qz-app[data-screen] .qz-page--answered .qz-help .qz-help__btn[data-trial-float] { padding-top: var(--g-s2); }
:root .qz-app[data-screen] .qz-page--answered .qz-help .qz-help__row:has(> .qz-help__btn[data-trial-float]) { row-gap: var(--g-s2); }
/* 1000px 未満（3つが横に1段）: 同じ段のほかの2つも上の余白を 16px にそろえ、3つの絵と名前の高さを1本の線にそろえる */
@media (max-width: 999.98px) {
  :root .qz-app[data-screen] .qz-page--answered .qz-help .qz-help__row:has(> .qz-help__btn[data-trial-float]) > .qz-help__btn { padding-top: var(--g-s2); }
}

/* ---- 17) 答えた後に音声解説を流している間の小さな［停止］（2026-10-16 本人決定・すり合わせ Q2）----
   帯の［停止］が画面の外・隠れたタブの中にあるときだけ explain-audio.js が body の直下に出す（hidden で出し入れ）。tools/qa-explain-audio.mjs の「小さな［停止］」で見る。
   この画面の紫の塗りは「次の問題へ」だけなので、白地に紫の枠（2番手）。1列は画面の下の真ん中で、下に固定した「次の問題へ」（4) と同じ高さ）の上に 8px 空ける。
   PC の2列・見開きは右の列の下の真ん中（JS が列の真ん中 --ea-mini-x と、列の下の端から画面の下の端まで --ea-mini-bottom を入れる）。 */
:root .qz-explain-audio-mini {
  position: fixed;
  z-index: 20;
  left: var(--ea-mini-x, 50%);
  bottom: calc(max(var(--dpg-nav-gap, 10px) + var(--dpg-nav-h, 58px) + var(--g-s1) + var(--g-btn-h) + var(--g-s1), var(--dpg-fixed-bottom, 0px)) + env(safe-area-inset-bottom, 0px));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 96px;
  min-height: var(--g-hit);
  margin: 0;
  padding: 0 var(--g-s2);
  border: 2px solid var(--g-outline);
  border-radius: 999px;
  background: var(--g-outline-bg);
  box-shadow: var(--g-card-shadow-lift);
  color: var(--accent);
  font: inherit;
  font-size: var(--g-fs-body);
  font-weight: 800;
  line-height: 1.2;
  white-space: nowrap;
  transform: translateX(-50%);
  cursor: pointer;
}
:root .qz-explain-audio-mini[hidden] { display: none; }
:root .qz-explain-audio-mini svg { width: 18px; height: 18px; flex: none; }
:root .qz-explain-audio-mini:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
@media (hover: hover) {
  :root .qz-explain-audio-mini:hover { background: var(--accent-soft); }
}
/* 1列の PC（sim の問題など）: 「次の問題へ」は画面の下から 16px（4) の 1024px 以上） */
@media (min-width: 1024px) {
  :root .qz-explain-audio-mini { bottom: calc(var(--g-s2) + var(--g-btn-h) + var(--g-s1) + env(safe-area-inset-bottom, 0px)); }
}
/* PC の2列・見開き: 「次の問題へ」は右の列の上なので、右の列の下の端から 16px */
:root .qz-explain-audio-mini[data-col="side"] { bottom: calc(var(--ea-mini-bottom, 0px) + var(--g-s2) + env(safe-area-inset-bottom, 0px)); }
/* 出るときは下から少し浮かぶ（200ms）。動きを減らす設定ではふわっと出さない（その場に出る） */
@media (prefers-reduced-motion: no-preference) {
  :root .qz-explain-audio-mini:not([hidden]) { animation: ea-mini-in .2s ease-out; }
}
/* 2026-10-16: 出方は位置だけ動かす（opacity は使わない）。薄い途中の色を、スマホの総点検（axe の color-contrast）が字の薄さとして測ってしまうため（tools/qa-quiz-mobile-sweep.mjs） */
@keyframes ea-mini-in {
  from { transform: translate(-50%, 8px); }
  to { transform: translateX(-50%); }
}

/* ---- 18) 段の幅が狭いとき（240px 未満。200% 拡大の約 187px など）は、「わからないときは」の3つを縦に積む（2026-10-16 すり合わせ・小さな直し）----
   3つ並びのまま細くすると、1つが約 34〜52px になり、「外部のAIに聞く」が1文字ずつ折れてボタンが約 170px の縦長になり、
   「解説を聴く」「声で質問」は枠から 12〜19px はみ出していた（直す前から）。2026-09 の決まり（R3「横2枚だと文字が1語ずつ折れる」）と同じ考えで、縦に積む。
   決め手は画面の幅（@media）ではなく段の入れ物の幅（@container。.qz-help が container-type: inline-size）。PC の右の列や、
   documentElement.style.zoom の拡大でも、段の幅が同じなら同じ形になる。ふつうの幅は変えない（390px は約 322px、320px は約 252px）。
   正解のとき（--compact）・不正解のときの両方に効く（6) 10) より後ろに置いて、同じ強さの規則に勝たせる）。 */
@container (max-width: 239.98px) {
  :root .qz-app[data-screen] .qz-page--answered .qz-help .qz-help__row { grid-template-columns: minmax(0, 1fr); grid-auto-flow: row; grid-auto-columns: auto; }
  :root .qz-app[data-screen] .qz-page--answered .qz-help .qz-help__btn {
    grid-template-columns: auto minmax(0, 1fr);
    justify-content: stretch;
    justify-items: start;
    column-gap: var(--g-s1);
    min-height: var(--g-hit);
    text-align: left;
  }
  /* 押した直後の「コピーしました」（名前の所が1.6秒だけ入れ替わる）が約 72px に収まらず折れるとき、「コピーしま／した」と2文字が取り残されないよう行の長さをそろえる */
  :root .qz-app[data-screen] .qz-page--answered .qz-help .qz-help__label { white-space: normal; text-wrap: balance; }
}

/* ===== 周12 X2（2026-10-16・評価役B トップ1「答えた後」と番人C NG2）の直し ===== */

/* ---- 19) PC（1000px 以上）の3つのボタンも、正解でも不正解でも1行に3つ（views.js の buildHelpRow が常に .qz-help--compact を付ける）----
   前は不正解のときだけ全幅の3行（小さな字・キーの札つき）で、正誤で形が変わっていた。1行の形は 1000px 未満と同じ。
   「1回無料」の札で上の余白を 16px にしたボタンがあるときは、同じ段のほかの2つもそろえる（上の 16) の 1000px 未満の規則を PC にも）。 */
:root .qz-app[data-screen] .qz-page--answered .qz-help--compact .qz-help__row:has(> .qz-help__btn[data-trial-float]) > .qz-help__btn { padding-top: var(--g-s2); }

/* ---- 20) PC の2列（1000px 以上）は、結論のカードのすぐ下にタブ（くわしい解説）があるので［くわしい解説を読む ↓］は出さない（スマホは今のまま）。
   DOM には残す（1000px 未満へ戻すと出る）。 ---- */
@media (min-width: 1000px) {
  :root .qz-app[data-screen] .qz-page.qz-page--split.qz-page--answered [data-role="conclusion-more"] { display: none; }
}

/* ---- 21) 不正解の「✓ 正解は …」: 札のある形式は「✓ 正解は Ⓓ」で止める（views.js。選択肢の文は読み上げだけ）。
   札の無い形式（記号なしの設定・単語の冊）で選択肢の文で言うときは、1行で切る（末尾「…」。全文は上の緑の選択肢。読み上げは全文）。
   結論のカードの列は minmax(0, 1fr)（1行に切った見出しが列を広げてカードからはみ出さないように）。 ---- */
:root .qz-app[data-screen] .qz-page--answered .qz-conclusion { grid-template-columns: minmax(0, 1fr); }
:root .qz-app[data-screen] .qz-page--answered .qz-conclusion--ng > .qz-conclusion__title--line {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow-wrap: normal;
}

/* ---- 22) 音声の帯（explain-audio.js）: 答えた後は流す入口を上の［解説を聴く］1つにする（帯の［再生］は 287 行で隠している）。
   まだ流していない帯（data-state="idle"）は［最初から］も出さない（流していない時の「最初から」は［解説を聴く］と同じ働きで、入口が2つに見える）。
   帯の文は「約73秒・上の［解説を聴く］で流れます」（explain-audio.js の playName）。流している間・止めた後・最後まで流した後は、今までどおり
   ［停止］／［最初から］を帯に出す。R（最初から）のキーは、帯の［最初から］が無い時は［解説を聴く］を押す（desktop-keys.js）。 ---- */
:root .qz-app[data-screen] .qz-page--answered .qz-explain-audio[data-state="idle"] .audio__acts { display: none; }
/* 帯の小さな字の「どう流すか」（explain-audio.js の .audio__how）は、ひとまとまりで折る（「流／れます」と語の途中で折れない。狭いときは中で折れる） */
.qz-explain-audio .audio__how { display: inline-block; max-width: 100%; }

/* ---- 23) 390 などで答えた後、Tab で送ると「画像で解説」「依頼文 ▾」が、下に張り付いた「次の問題へ」の裏に隠れる（番人C 周12 NG2）----
   Tab・scrollIntoView で出すときの下の余白（nav-compact.css の --dpg-fixed-bottom → html の scroll-padding-bottom）に、張り付いた
   「次の問題へ」（下から 8px・高さ 52px）と、その上の隙間 16px を足す（読んで覚えるの［理解した］と同じ作り）。焦点の物は帯の上まで送られる。
   （押せる物に scroll-margin-bottom を付けるだけでは足りない: ブラウザは焦点の物が画面の中にあると、帯の裏でも動かさないため。）
   はじめての5問の吹き出し（dpg-guide.js）は、自分で「帯の高さ＋16px」の scroll-margin-bottom を付けて帯のすぐ上へ動かすので、この間だけ
   吹き出しの分は 16px にする（html の余白に帯の分が入ったので、二重にすると帯から離れて止まる。止まる所は前と同じ＝下から 92px）。
   1000px 以上（2列）は「次の問題へ」が右の列の上なので足さない。自分のメモを書いている間は張り付かない（上の 426 行）ので足さない。 */
@media (max-width: 999.98px) {
  html:has(#app[data-screen="quiz"] .qz-page--answered > [data-role="next"]):not(:has([data-role="note-textarea"])) {
    --dpg-fixed-bottom: calc(var(--g-s1, 8px) + var(--g-btn-h, 52px) + var(--g-s2, 16px));
  }
  html:has(#app[data-screen="quiz"] .qz-page--answered > [data-role="next"]):not(:has([data-role="note-textarea"])) .dpg-coach {
    scroll-margin-bottom: var(--g-s2, 16px) !important;
  }
}

/* ---- 24) 2026-10-19 区間16 QUIZ（本人の頼み R6・PC の出題の2列＝1000px 以上・.qz-page--split）----
   ・答えた後の右の列の「正解！」の板（結論のカード）と、そこに出していた解説の頭（「…」で切って下へ続く形）はやめる。
     正誤は左の選択肢の印（✓ 正解・✕）で分かる。カードは DOM に残し（data-role="conclusion"・"verdict" は検査の読み先）、見えない形にする。
     読み上げには正誤（判定の行 role="status"・見出し「正解！」／「正解は A. …」）を残し、理由の頭（解説の本文と同じ文）は読まない。
     解説のタブの本文は頭から全部（views.js の answerSplitWide）。1000px 未満（スマホの1列）は今までどおり。
   ・左の列の選択肢の下に、右の列の上の［次へ］／［結果を見る］（next-top）と同じ働きのボタン（next。vm.onNext）を出す。
     この画面の塗りは右の列の上の1つのままにして、左は白地に紫の枠（2番手）。スマホは今までどおり下に固定の1つだけ。 ---- */
@media (min-width: 1000px) {
  :root .qz-app[data-screen] .qz-page.qz-page--split.qz-page--answered > [data-role="conclusion"] {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }
  :root .qz-app[data-screen] .qz-page.qz-page--split.qz-page--answered > [data-role="conclusion"] .qz-conclusion__reason { display: none; }
  /* 2026-10-19 区間17 QUIZ3（関所Q の Q6）: 選択肢の下の次へを紫の塗り（この画面のただ1つの塗り）に。右の列の上の次へは白地に紫の枠（上の 443 行）。 */
  :root .qz-app[data-screen] .qz-page.qz-page--split.qz-page--answered > [data-role="next"] {
    display: flex;
    align-items: center;
    justify-content: center;
    order: 0;
    position: static;
    min-height: var(--g-btn-h);
    border: 1px solid var(--g-primary-border);
    background: var(--g-primary-fill);
    box-shadow: var(--g-primary-shadow);
    color: var(--qz-on-accent);
    font-size: var(--g-fs-body);
  }
}

/* ---- 25) 2026-10-19 区間17 QUIZ3（関所Q の Q5「問題解く時は右に無駄なスペースを入れるのやめて中央に配置できない？」・Q6・写真への意見）----
   ・答える前（PC の2列の幅＝1000px 以上・.qz-page--before）: 右の列（.qz-wait）とつまみは出さず、問題の列を真ん中に置く。
     列の幅は答えた後の左の列と同じ（全体 − 右の列の幅 --dpg-split-col − 列の間 24px）。3つの列（空き・問題・空き）にして、左右の空きを
     （右の列の幅 + 24px）÷ 2 ずつにする。答えても字の折り返しは変わらず、答えた瞬間に desktop-keys.js（DpgSplitTools の slideFromCenter）が
     問題の列を真ん中から左へ 0.2秒で動かす（動きを減らす設定では動かさない）。右の列の幅の式（7) の --dpg-split-col）は変えていない。
   ・計算用紙を右に出している間（quiz.css の「答える前は1列」）は今までどおり全幅の1列（下の規則で列を 1 に戻す）。
   ・答えた後の次へ: 選択肢の下（next）が紫の塗り（24)）、右の列の上（next-top）は白地に紫の枠（443 行）。
   ・キーの案内（desktop-keys.js の .dpgk-hint。出題の画面だけ .dpgk-hint--line）: 右下に浮かせた箱をやめ、ページの最後（問題のカード・次へ の下）の
     小さな1行（14px・灰色の字・枠なし）。押すと今までどおりキーの一覧が開く（押せる高さは 44px）。マウスの端末だけ（desktop-keys.js の hintWanted）。 */
@media (min-width: 1000px) {
  :root .qz-app[data-screen="quiz"] .qz-page.qz-page--split.qz-page--before {
    grid-template-columns: calc((var(--dpg-split-col) + 24px) / 2) minmax(0, 1fr) calc((var(--dpg-split-col) + 24px) / 2);
    column-gap: 0;
  }
  :root .qz-app[data-screen="quiz"] .qz-page.qz-page--split.qz-page--before > * { grid-column: 2; }
  :root .qz-app[data-screen="quiz"] .qz-page.qz-page--split.qz-page--before > :is(.qz-wait, .qz-split-handle) { display: none; }
}
@media (min-width: 1000px) and (hover: hover) and (pointer: fine) {
  html.has-scratch:not(.has-scratch-float) .qz-app[data-screen="quiz"] .qz-page.qz-page--split.qz-page--before > * { grid-column: 1; }
}
:root .qz-app[data-screen="quiz"] .qz-page > .dpgk-hint--line {
  position: static;
  z-index: auto;
  order: 9;
  align-self: center;
  justify-self: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  min-height: var(--g-hit, 44px);
  margin: 0;
  padding: 0 var(--g-s2, 16px);
  border: 0;
  border-radius: var(--g-radius-btn, 12px);
  background: none;
  box-shadow: none;
  color: var(--text-2);
  font: inherit;
  font-size: var(--g-fs-small, 14px);
  font-weight: 600;
  line-height: 1.5;
  text-align: center;
  white-space: normal;
  cursor: pointer;
}
@media (hover: hover) {
  :root .qz-app[data-screen="quiz"] .qz-page > .dpgk-hint--line:hover { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
}
:root .qz-app[data-screen="quiz"] .qz-page > .dpgk-hint--line:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
/* 599px 以下では出さない（dpg-guide.css の 5)「キーの案内も同じ幅では出さない」と同じ。? で開く一覧は使える） */
@media (max-width: 599.98px) {
  :root .qz-app[data-screen="quiz"] .qz-page > .dpgk-hint--line { display: none; }
}

/* ===================================================================================
   本番形式の解いている画面（2026-10-22・本人承認の見本 mock2。views.js の buildMockBar・buildMockFlag・buildMockNav・buildMockList・buildMockConfirm）。
   見出しの右に小さい［解答を終える］→ 白い帯（◷ 残り 1:42:15｜解答 17/50｜［☰ 問題の一覧］）→ 問題カード（右上に［あとで見直す］）→
   丸の列（解答済み＝紫・いま＝紫の輪・見直し＝橙の旗・まだ＝灰）→ ［‹ 前の問題］［次の問題 ›］（スマホは画面の下に固定）。
   正誤の色は使わない（選んだ肢は紫の枠＝今の qz-choice--selected と同じ）。
   =================================================================================== */
/* 見出しの［解答を終える］。1000px 未満（題名が上の段の全幅）は題名の行の右（見本どおり）、道具の段（音・計算・設定・トップへ）はそのまま下の行。
   1000px 以上（題名と道具が1行）は題名のすぐ右に並べる（DOM の並びのまま）。 */
:root .qz-app[data-screen="quiz"] .qz-quiz-head .dpg-mock-finish-head{
  flex:0 0 auto;min-height:44px;margin-right:var(--g-s2,16px);padding:0 4px 0 12px;border:0;border-left:1px solid var(--separator,#ddd);border-radius:0;
  background:none;color:var(--accent,#6535b5);font:inherit;font-size:var(--g-fs-small,14px);font-weight:700;white-space:nowrap;cursor:pointer}
@media (max-width:999.98px){
  :root .qz-app[data-screen="quiz"] .qz-quiz-head:has(.dpg-mock-finish-head){position:relative}
  :root .qz-app[data-screen="quiz"] .qz-quiz-head:has(.dpg-mock-finish-head) .qz-quiz-head__title{padding-right:7.5em}
  :root .qz-app[data-screen="quiz"] .qz-quiz-head .dpg-mock-finish-head{position:absolute;top:6px;right:10px;margin-right:0}
}
/* 本番形式の問題カードは種類の札（単一選択）を出さず、［あとで見直す］を見出しの行に収める（見本どおり。宅建士は全問4択） */
:root .qz-app[data-screen="quiz"] .qz-question__meta:has(.dpg-mock-flag) .qz-type-badge{display:none}
.dpg-mock-bar{display:flex;align-items:center;gap:12px;margin-bottom:var(--g-s2,16px);padding:12px var(--g-s2,16px);
  border-radius:var(--g-radius,16px);background:var(--surface,#fff);box-shadow:var(--g-card-shadow)}
.dpg-mock-bar__clock{display:flex;align-items:center;gap:8px;padding-right:12px;border-right:1px solid var(--separator,#ece6e2)}
.dpg-mock-bar__icon{font-size:24px;line-height:1;color:var(--text,#2c211e)}
.dpg-mock-bar__cell{display:flex;flex-direction:column;line-height:1.15}
.dpg-mock-bar__label{font-size:12px;color:var(--text-2,#6b5f5a)}
.dpg-mock-bar__num{font-size:clamp(20px,5.6vw,30px);font-weight:800;letter-spacing:.01em;color:var(--text,#2c211e);font-variant-numeric:tabular-nums}
.dpg-mock-bar__clock[data-level="warn"] .dpg-mock-bar__num,.dpg-mock-bar__clock[data-level="warn"] .dpg-mock-bar__icon{color:var(--danger,#b3261e)}
.dpg-mock-bar__list{margin-left:auto;flex:0 1 auto;min-width:0;min-height:44px;padding:0 10px;border:1.5px solid var(--accent,#6535b5);border-radius:12px;
  background:var(--accent-soft,#efe8fb);color:var(--accent,#6535b5);font:inherit;font-size:var(--g-fs-small,14px);font-weight:700;white-space:nowrap;cursor:pointer}
.dpg-mock-bar__list[aria-expanded="true"]{background:var(--accent,#6535b5);color:#fff}
/* 問題カードの右上の［あとで見直す］（見出しの行の右端） */
:root .qz-app[data-screen="quiz"] .qz-question__meta .dpg-mock-flag{
  margin-left:auto;display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 12px;border:1px solid var(--separator,#ddd);border-radius:12px;
  background:var(--surface,#fff);color:var(--text,#2c211e);font:inherit;font-size:var(--g-fs-small,14px);font-weight:700;white-space:nowrap;cursor:pointer}
:root .qz-app[data-screen="quiz"] .qz-question__meta .dpg-mock-flag.is-on{border-color:#e08a00;background:#fff4e0;color:#8a5200}
.dpg-mock-flag__icon{font-size:16px;line-height:1}
/* 丸と旗（一覧・丸の列・凡例で共通） */
.dpg-mock-dot{display:inline-block;width:12px;height:12px;border-radius:50%;background:#d9d5dc;box-sizing:border-box}
.dpg-mock-dot.is-done{background:var(--accent,#6535b5)}
.dpg-mock-dot.is-current{background:var(--surface,#fff);border:2.5px solid var(--accent,#6535b5)}
.dpg-mock-dot.is-done.is-current{background:var(--accent,#6535b5);box-shadow:0 0 0 2px var(--surface,#fff),0 0 0 4px var(--accent,#6535b5)}
.dpg-mock-flagmark{display:inline-block;width:10px;height:12px;background:linear-gradient(#e08a00,#e08a00) left/2px 100% no-repeat;position:relative}
.dpg-mock-flagmark::after{content:"";position:absolute;left:2px;top:0;width:8px;height:6px;background:#f2a000;clip-path:polygon(0 0,100% 50%,0 100%)}
.dpg-mock-legend{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:4px 12px;margin:0;font-size:12px;color:var(--text-2,#6b5f5a)}
.dpg-mock-legend__item{display:inline-flex;align-items:center;gap:5px}
/* 下の丸の列（見るだけ）。スマホは1行に25個、PC は1行に25個のまま広く */
.dpg-mock-strip{margin-bottom:var(--g-s2,16px);padding:12px var(--g-s2,16px);border-radius:var(--g-radius,16px);background:var(--surface,#fff);box-shadow:var(--g-card-shadow)}
.dpg-mock-strip__head{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;margin-bottom:8px}
.dpg-mock-strip__range{font-size:var(--g-fs-small,14px);font-weight:700;white-space:nowrap}
.dpg-mock-strip__dots{display:grid;grid-template-columns:repeat(25,minmax(0,1fr));row-gap:6px;margin:0;padding:0;list-style:none}
.dpg-mock-strip__cell{position:relative;display:flex;flex-direction:column;align-items:center;gap:2px;padding-top:12px;min-width:0}
.dpg-mock-strip__cell > .dpg-mock-flagmark{position:absolute;top:0;left:calc(50% - 2px)}
.dpg-mock-strip__no{font-size:10px;line-height:1;color:var(--text-2,#6b5f5a);font-variant-numeric:tabular-nums}
.dpg-mock-strip__cell.is-current .dpg-mock-strip__no{color:var(--accent,#6535b5);font-weight:800}
@media (max-width:599.98px){
  .dpg-mock-strip__cell:not(.is-tick):not(.is-current) .dpg-mock-strip__no{visibility:hidden}
  .dpg-mock-strip__no{white-space:nowrap}
}
@media (max-width:359.98px){ .dpg-mock-strip__no{font-size:8px} .dpg-mock-dot{width:10px;height:10px} }
/* ［‹ 前の問題］［次の問題 ›］: スマホ（1023px 以下）は画面の下に固定（下のメニューは出題中は出ない＝答えた後の「次の問題へ」と同じ高さ） */
.dpg-mock-nav__buttons{display:grid;grid-template-columns:1fr 1fr;gap:var(--g-s2,16px);margin-bottom:0}
.dpg-mock-nav__buttons > .qz-btn{min-height:var(--g-btn-h,52px);margin:0;font-size:var(--g-fs-body,17px)}
@media (max-width:1023.98px){
  :root .qz-app[data-screen="quiz"] .qz-page > .dpg-mock-nav__buttons{
    position:sticky;z-index:8;bottom:calc(var(--dpg-nav-gap,10px) + var(--dpg-nav-h,58px) + var(--g-s1,8px) + env(safe-area-inset-bottom,0px));
    padding:10px;border-radius:calc(var(--g-radius,16px) + 6px);background:var(--surface,#fff);box-shadow:0 6px 24px rgba(40,20,70,.16)}
}
/* 問題の一覧（押すとその問へ） */
.dpg-mock-list{margin-bottom:var(--g-s2,16px)}
.dpg-mock-list__head{margin:0 0 10px;font-weight:700}
.dpg-mock-list__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(48px,1fr));gap:8px}
.dpg-mock-list__item{position:relative;display:flex;align-items:center;justify-content:center;min-height:48px;border:1.5px solid #d9d5dc;border-radius:50%;aspect-ratio:1;
  background:var(--surface,#fff);color:var(--text,#2c211e);font:inherit;font-weight:700;cursor:pointer}
.dpg-mock-list__item.is-done{border-color:var(--accent,#6535b5);background:var(--accent,#6535b5);color:#fff}
.dpg-mock-list__item.is-current{box-shadow:0 0 0 3px var(--surface,#fff),0 0 0 5px var(--accent,#6535b5)}
.dpg-mock-list__item > .dpg-mock-flagmark{position:absolute;top:-2px;right:2px}
.dpg-mock-list__item:focus-visible,.dpg-mock-bar__list:focus-visible,.dpg-mock-flag:focus-visible,.dpg-mock-finish-head:focus-visible{outline:3px solid var(--accent,#6535b5);outline-offset:2px}
.dpg-mock-list .dpg-mock-legend{justify-content:flex-start;margin-top:12px}
/* 解答を終える前の確かめ */
:root .qz-app[data-screen="quiz"] .dpg-mock-confirm{margin-bottom:var(--g-s2,16px);box-shadow:0 0 0 2px var(--accent,#6535b5),var(--g-card-shadow)}
.dpg-mock-confirm__title{margin:0 0 8px;font-size:var(--g-fs-body,17px);font-weight:800}
.dpg-mock-confirm__text{margin:0 0 6px;line-height:1.6}
.dpg-mock-confirm__actions{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:12px}
.dpg-mock-confirm__actions > .qz-btn{min-height:var(--g-btn-h,52px);margin:0}
@media (max-width:374.98px){ .dpg-mock-bar__icon{display:none} .dpg-mock-bar{padding:10px 12px} }