/* dpg-result.css — 関所B の試作（2026-10-15 Cowork）。dpg-guide.css の決まり（トークン）を使う。
   結果の画面（本人選択 T2 案1「その時に役立つ機能を、その場に1つだけ大きく出す」）。
   形は views.js の buildResult / buildResultActions / buildRecentRetryResult / buildPracticeResult が作る:
     .qz-page.qz-result > h1.qz-page__title + .qz-result__body（.qz-result__summary ＋ .qz-result-actions）+ .qz-wrong-list
   スマホは1列（得点 → 主 → 2番手 → 文字のリンク → ほかの解き方 → 一覧）。PC（1024px 以上）は得点と操作を左右に並べる。
   詳細度: theme-dpg.css の :root[data-quiz-theme="paper"] .qz-…（0,3,0）より後で読むので、同じか1つ上の詳細度で上書きする。 */

/* ---- 全体の幅と間隔 ---- */
.qz-result { gap: var(--g-s3); }
.qz-result__body { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--g-s3); align-items: start; }
.qz-result__summary { display: flex; flex-direction: column; gap: var(--g-s2); min-width: 0; }
@media (min-width: 600px) and (max-width: 1023.98px) {
  /* タブレットの幅では1列のまま、ボタンが横に伸びすぎないよう真ん中にまとめる */
  .qz-result { width: 100%; max-width: 640px; margin-inline: auto; }
}
@media (min-width: 1024px) {
  /* PC: 左に得点のまとまり、右に操作。どちらも画面の上の方に収まり、下へ動かさずに主ボタンへ届く */
  .qz-result { width: 100%; max-width: 960px; margin-inline: auto; }
  .qz-result__body { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--g-s4); }
}

/* ---- 冊の名前 ----
   2026-10-15 周3: 22px → 17px（本文の段）。この画面の主役は得点なので、得点の次に大きい文字（見出しの 22px）を画面から外す
   （批評役「いちばん大きい物が点数になっていない」）。太字のまま、どの冊の結果かは読める。 */
:root[data-quiz-theme="paper"] .qz-result > .qz-page__title {
  font-size: var(--g-fs-body); font-weight: 800; line-height: 1.45; letter-spacing: 0; color: var(--text);
}

/* ---- 得点のカード（線なし・白い面・やわらかい影。数字は紫、補足は 14px） ----
   2026-10-15 周3: 得点を画面の主役にする。数字は 40px のまま、いちばん太く（900）し、カードの上下の余白を 24 → 32px（PC 40px）に広げ、
   数字の上下を 8px ずつ空ける。小さい文字（14px）は数字から離して、数字だけが浮いて見えるようにする。 */
:root[data-quiz-theme="paper"] .qz-result .qz-result-hero {
  min-height: 0; padding: var(--g-s4) var(--g-s3); border-color: transparent; border-radius: var(--g-radius);
  box-shadow: var(--g-card-shadow); text-align: center;
}
:root[data-quiz-theme="paper"] .qz-result .qz-result-hero__label {
  margin: 0; font-size: var(--g-fs-small); font-weight: 700; color: var(--text-2);
}
/* 2026-10-15 周2: 得点の数字は文字の4段の一番上（--g-fs-hero 40px）にそろえる（批評役「点数が約50px」。スマホもPCも同じ）。
   数え上げ（dpg-feel.js）は .qz-result-hero__score の最初の数字の文字を差し替えるだけなので、大きさを変えても崩れない。 */
:root[data-quiz-theme="paper"] .qz-result .qz-result-hero__score {
  margin: var(--g-s1) 0; font-size: var(--g-fs-hero); font-weight: 900; line-height: 1.1;
  letter-spacing: 0; color: var(--accent); font-variant-numeric: tabular-nums;
}
:root[data-quiz-theme="paper"] .qz-result .qz-result-hero__slash { margin: 0 .14em; font-weight: 400; color: var(--text-3); }
:root[data-quiz-theme="paper"] .qz-result .qz-result-hero__pct {
  margin: 0; font-size: var(--g-fs-small); font-weight: 700; color: var(--text);
}
:root[data-quiz-theme="paper"] .qz-result .qz-result-hero__time {
  margin: var(--g-s2) 0 0; padding: 0; border: 0; font-size: var(--g-fs-small); color: var(--text-2);
}
:root[data-quiz-theme="paper"] .qz-result .qz-result-hero__slowest {
  margin: 0; font-size: var(--g-fs-small); color: var(--text-2);
}
/* 2026-10-16 周7: 所要時間と「今回の学習」を1行に（views.js の buildScoreHero）。間の「／」は一段薄く、折れる時はここで折れる */
.qz-result-hero__sep { color: var(--text-3); }
@media (min-width: 1024px) {
  :root[data-quiz-theme="paper"] .qz-result .qz-result-hero { padding: var(--g-s5) var(--g-s3); }
}

/* ---- 惜しい（あと1問）: 金の淡い面に1行。線は引かない ---- */
:root[data-quiz-theme="paper"] .qz-result .qz-result__nearmiss {
  margin: 0; padding: var(--g-s1) var(--g-s2); border: 0; border-radius: var(--g-radius);
  background: var(--dpg-gold-soft); color: var(--dpg-gold-ink);
  font-size: var(--g-fs-body); font-weight: 800; text-align: center;
}

/* ---- 満点のキャラ（既存の絵）: 得点の下に小さく横並び ---- */
.qz-result .dpg-mascot-result { justify-content: center; gap: var(--g-s2); padding: 0; text-align: left; }
.qz-result .dpg-mascot--result { width: 88px; height: 88px; border-radius: var(--g-radius); }
.qz-result .dpg-mascot-result__copy p { font-size: var(--g-fs-small); line-height: 1.6; }
/* theme-dpg.css が !important で 24px にしているので、見出しの段（22px）へ戻すのにだけ !important を使う */
.qz-result .dpg-mascot-result__message { font-size: var(--g-fs-title) !important; line-height: 1.4; }
@media (min-width: 1024px) {
  .qz-result .dpg-mascot--result { width: 112px; height: 112px; }
}

/* ---- 解き終えた・復習の進み（白い面＋影。線なし） ---- */
:root[data-quiz-theme="paper"] .qz-result :is(.qz-complete, .qz-review-summary) {
  padding: var(--g-s2) var(--g-s3); border-color: transparent; border-radius: var(--g-radius); box-shadow: var(--g-card-shadow);
}
:root[data-quiz-theme="paper"] .qz-result .qz-complete__head { margin: 0 0 4px; font-size: var(--g-fs-body); font-weight: 800; }
:root[data-quiz-theme="paper"] .qz-result :is(.qz-complete__body, .qz-review-summary__body) { font-size: var(--g-fs-small); color: var(--text-2); }

/* ---- 操作: 主（紫の塗り）→ 2番手（白地に紫の枠）→ 文字のリンク → ほかの解き方 → 勉強ログの1行（2026-10-15 周4 の直しで、得点の下からここへ） ---- */
/* 主と2番手の間は 16px、その下（文字のリンク・勉強ログの1行・ほかの解き方）は 8px で詰める */
:root[data-quiz-theme="paper"] .qz-result-actions { gap: var(--g-s1); }
:root[data-quiz-theme="paper"] .qz-result-actions > .qz-result-actions__second { margin-top: var(--g-s1); }
:root[data-quiz-theme="paper"] :is(.qz-result, .qz-practice-result) .qz-btn[data-guide="primary"] {
  min-height: var(--g-btn-h); border-radius: var(--g-radius-btn); font-size: var(--g-fs-body); font-weight: 800;
}
:root[data-quiz-theme="paper"] .qz-result .qz-btn.qz-result-actions__second {
  min-height: var(--g-btn-h); border: 2px solid var(--g-outline); border-radius: var(--g-radius-btn);
  background: var(--g-outline-bg); color: var(--g-outline); box-shadow: none;
  font-size: var(--g-fs-body); font-weight: 800;
}
:root[data-quiz-theme="paper"] .qz-result .qz-btn.qz-result-actions__second:hover:not(:disabled) { background: var(--accent-soft); }
/* 2026-10-15 周3: 主ボタンの2段（「間違えた N 問を解き直す」17px ＋ 範囲の補足 14px）。上下の余白を詰めて、高さは 1段の時とほぼ同じ（約 56px）に保つ
   （ボタンが得点より大きく見えないように）。補足は塗りの上の白い文字を少し薄く */
:root[data-quiz-theme="paper"] .qz-result .qz-btn.qz-result-actions__main--sub {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0;
  padding: 6px var(--g-s2); line-height: 1.3; text-align: center;
}
.qz-result-actions__label { font-size: var(--g-fs-body); font-weight: 800; line-height: 1.3; }
.qz-result-actions__sub { font-size: var(--g-fs-small); font-weight: 600; line-height: 1.4; opacity: .92; }
/* 2026-10-16 関所E: 2番手（枠）の2段「この周の間違いを選んで復習」＋「時間を決められる」（views.js の buildResultAction・secondSub）。
   高さは1段の時（56px）とほぼ同じに保ち、補足は墨の薄い色（枠のボタンの紫の文言と重さを分ける） */
:root[data-quiz-theme="paper"] .qz-result .qz-btn.qz-result-actions__second--sub {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0;
  padding: var(--g-s1) var(--g-s2); line-height: 1.3; text-align: center;
}
.qz-result-actions__second--sub .qz-result-actions__sub { color: var(--text-2); opacity: 1; }

/* 3番手と「トップへ」: 文字のリンク（押せる高さは 44px 以上のまま） */
.qz-result-actions__links { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0 var(--g-s3); }
:root[data-quiz-theme="paper"] .qz-btn.qz-result-actions__link {
  min-height: var(--g-hit); padding: 0 var(--g-s1); border: 0; background: none; box-shadow: none;
  color: var(--text-2); font-size: var(--g-fs-body); font-weight: 700;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px;
}
/* 3番手（続きへ進む・復習）は紫の文字。「トップへ」（離れる）は墨の薄い色のまま。
   2026-10-15 周4: 読んで覚えるの画面の「← 読んで覚えるの棚へ」（practice-shelf。抜ける操作）も墨の薄い色 */
:root[data-quiz-theme="paper"] .qz-btn.qz-result-actions__link:not([data-role="home"]):not([data-role="practice-result-home"]):not([data-role="practice-shelf"]) { color: var(--accent); }
:root[data-quiz-theme="paper"] .qz-btn.qz-result-actions__link:hover { background: none; text-decoration-thickness: 2px; }
:root[data-quiz-theme="paper"] .qz-btn.qz-result-actions__link:active { transform: none; }
/* 2026-10-15 周3: 「この周の間違いを選んで復習 時間を計れる」（filter-review）。同じ段の最後で1行を占める（スマホもPCも同じ並び）。
   下線は文言だけに引き、「時間を計れる」は 14px の添え書き（墨の薄い色・下線なし）。狭くて入らない時は添え書きだけ次の行へ */
:root[data-quiz-theme="paper"] .qz-btn.qz-result-actions__link[data-role="filter-review"] {
  flex: 1 0 100%; flex-wrap: wrap; align-items: baseline; align-content: center; column-gap: var(--g-s1); row-gap: 0;
  text-decoration: none;
}
.qz-result-actions__linklabel { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.qz-result-actions__link:hover .qz-result-actions__linklabel { text-decoration-thickness: 2px; }
.qz-result-actions__linknote { font-size: var(--g-fs-small); font-weight: 700; color: var(--text-2); }

/* 勉強ログの1行（13px → 補足の 14px） */
.qz-result .qz-autolog, .qz-result .qz-autolog__link { font-size: var(--g-fs-small); }
/* 2026-10-15 周4 の直し: 勉強ログの1行は操作の列の最後（ほかの解き方の下。views.js の buildResultActions）。出口（塗り・枠・紫の文字のリンク）と
   重さを分けるため、リンクも墨の薄い色・下線だけにする（押せる高さ 44px は home-v3.css のまま） */
:root[data-quiz-theme="paper"] .qz-result-actions .qz-autolog__link { color: var(--text-2); font-weight: 600; }
:root[data-quiz-theme="paper"] .qz-result-actions .qz-autolog__link:hover { color: var(--accent); }

/* ---- ほかの解き方 ▾（<details>。中は今までの操作を文字のリンクの行で並べる） ---- */
.qz-result-more { min-width: 0; }
.qz-result-more__toggle {
  display: flex; align-items: center; justify-content: center; gap: var(--g-s1);
  min-height: var(--g-hit); padding: 0 var(--g-s2); border-radius: var(--g-radius-btn);
  color: var(--text-2); font-size: var(--g-fs-body); font-weight: 700; cursor: pointer; list-style: none;
}
.qz-result-more__toggle::-webkit-details-marker { display: none; }
.qz-result-more__toggle::marker { content: ""; }
.qz-result-more__toggle:hover { color: var(--accent); }
.qz-result-more__toggle:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.qz-result-more__chev { display: inline-block; font-size: var(--g-fs-small); transition: transform var(--dur, 220ms) ease; }
.qz-result-more[open] .qz-result-more__chev { transform: rotate(180deg); }
.qz-result-more__body {
  display: flex; flex-direction: column; gap: 0; margin-top: var(--g-s1); padding: var(--g-s1) var(--g-s2);
  border-radius: var(--g-radius); background: var(--surface); box-shadow: var(--g-card-shadow);
}
.qz-result-more__body > .qz-setup__group { padding: var(--g-s1) 0 var(--g-s2); gap: var(--g-s1); }
:root[data-quiz-theme="paper"] .qz-result-more__body .qz-setup__label { margin: 0; font-size: var(--g-fs-small); font-weight: 700; color: var(--text-2); }
:root[data-quiz-theme="paper"] .qz-result-more__body .qz-pill { min-height: 44px; font-size: var(--g-fs-small); }
.qz-result-more__body .qz-btn-row { flex-direction: column; gap: 0; }
/* 中のボタンは「文字のリンクの行」: 左寄せ・紫の文字・右に › 。ボタンが続く所だけ、行の間に細い線（カードの中の区切り） */
:root[data-quiz-theme="paper"] .qz-result-more__body .qz-btn {
  justify-content: space-between; gap: var(--g-s1); width: 100%; min-height: var(--g-hit); padding: var(--g-s1) 0;
  border: 0; border-radius: 0; background: none; box-shadow: none;
  color: var(--accent); font-size: var(--g-fs-body); font-weight: 700; text-align: left; text-wrap: pretty;
}
:root[data-quiz-theme="paper"] .qz-result-more__body :is(.qz-btn + .qz-btn, .qz-btn-row + .qz-btn, .qz-setup__group + .qz-btn,
  .qz-btn-row > .qz-btn + .qz-btn, :is(.qz-btn, .qz-setup__group) + .qz-btn-row > .qz-btn:first-child) { border-top: 1px solid var(--separator); }
/* 2026-10-15 周4: 先頭の「この周の間違いを選んで復習」の下に問題数の札が続く時も、同じ細い線で区切る */
:root[data-quiz-theme="paper"] .qz-result-more__body > .qz-btn + .qz-setup__group { border-top: 1px solid var(--separator); padding-top: var(--g-s2); }
:root[data-quiz-theme="paper"] .qz-result-more__body .qz-btn::after { content: "›"; flex: none; font-size: var(--g-fs-title); line-height: 1; color: var(--accent); }
:root[data-quiz-theme="paper"] .qz-result-more__body .qz-btn:hover:not(:disabled) { background: var(--accent-soft); }
:root[data-quiz-theme="paper"] .qz-result-more__body .qz-btn:active { transform: none; }
.qz-result-more__body .qz-result-actions__sep { height: 1px; margin: var(--g-s1) 0; background: var(--separator); }
/* 2026-10-15 周2: 行の中身は「文言（17px・紫）」と、その下の「範囲の補足（14px・墨の薄い色）」の2段（views.js の resultMoreText） */
.qz-result-more__text { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; }
.qz-result-more__name { font-size: var(--g-fs-body); font-weight: 700; line-height: 1.45; color: var(--accent); }
.qz-result-more__note { font-size: var(--g-fs-small); font-weight: 400; line-height: 1.5; color: var(--text-2); }
/* 行の組（qz-btn-row）の中のボタンは quiz.css の flex: 1 1 0（横に並べる時の決まり）のままだと、縦に並べた時に高さが中身より低く潰れる */
.qz-result-more__body .qz-btn-row > .qz-btn { flex: none; }
:root[data-quiz-theme="paper"] .qz-result-more__body .qz-result-actions__wrong { margin: var(--g-s1) 0 0; font-size: var(--g-fs-small); color: var(--text-2); }

/* ---- 間違えた問題（白い面＋影。線なし） ---- */
:root[data-quiz-theme="paper"] .qz-result .qz-wrong-list {
  padding: var(--g-s1) var(--g-s3); border-color: transparent; border-radius: var(--g-radius); box-shadow: var(--g-card-shadow);
}
:root[data-quiz-theme="paper"] .qz-result .qz-wrong-list--open { padding-bottom: var(--g-s3); }
.qz-result .qz-wrong-list__toggle { min-height: var(--g-hit); font-size: var(--g-fs-body); }
.qz-result .qz-wrong-list__count,
.qz-result .qz-wrong-list__chev,
.qz-result .qz-wrong-list__item,
.qz-result .qz-wrong-list__no,
.qz-result .qz-miss-badge { font-size: var(--g-fs-small); }

/* ---- 読んで覚える（練習）の結果: 同じ決まり（塗りは1つ・数字は紫・トップへは文字のリンク） ---- */
:root[data-quiz-theme="paper"] .qz-practice-result .qz-card { border-color: transparent; border-radius: var(--g-radius); box-shadow: var(--g-card-shadow); }
:root[data-quiz-theme="paper"] .qz-practice-result .qz-practice-result__score {
  font-size: var(--g-fs-hero); font-weight: 800; line-height: 1.2; color: var(--accent);
}
:root[data-quiz-theme="paper"] .qz-practice-result .qz-practice-result__head { font-size: var(--g-fs-body); }
:root[data-quiz-theme="paper"] .qz-practice-result :is(.qz-practice-totals__label, .qz-practice-result__list-count, .qz-practice-result__no, .qz-practice-result__times, .qz-setup__note) { font-size: var(--g-fs-small); }
@media (min-width: 600px) {
  .qz-practice-result { width: 100%; max-width: 640px; margin-inline: auto; }
}

/* ---- 出題の設定の画面（本番・復習・まとめ・読んで覚える。views.js の buildSetup。2026-10-15 周2） ----
   並び: ← 戻る → 冊の名前 → カード［（警告）→ はじめる（紫の塗り・この画面でただ1つ）→ 説明 14px → 細い線 → 設定（変えなくても始められます）→ 選ぶ物］
   「はじめる」が上にあるので、スマホ（390x844）でも1画面目で押せる。選ぶ物の段の間は 16px（8 の倍数）。
   （2026-10-15 関所D から、スマホ（600px 未満）では「はじめる」を見た目だけ画面の下に張り付ける。この段の最後） */
:root[data-quiz-theme="paper"] .qz-setup { gap: var(--g-s2); }
:root[data-quiz-theme="paper"] .qz-setup > .qz-setup__start {
  min-height: var(--g-btn-h); border-radius: var(--g-radius-btn); font-size: var(--g-fs-body); font-weight: 800;
}
:root[data-quiz-theme="paper"] .qz-setup > .qz-setup__lead { margin: calc(var(--g-s1) * -1) 0 0; line-height: 1.6; }
:root[data-quiz-theme="paper"] .qz-setup > .qz-setup__warn { margin: 0; font-size: var(--g-fs-small); line-height: 1.6; }
.qz-setup__options-head {
  margin: 0; padding-top: var(--g-s2); border-top: 1px solid var(--separator);
  font-size: var(--g-fs-small); font-weight: 700; color: var(--text-2);
}
/* 2026-10-16 周7（批評役「390 では制限時間の選択が3段に折れ、『300秒』が1つだけ取り残される」）:
   制限時間の札（オフ・10・20・30・60・120・180・300秒の8つ。views.js の pushLimitGroup・buildPracticeSetup が qz-pills--limit を付ける）は、
   1024px 未満（スマホ・タブレット）では 4列×2段のグリッドにそろえる（8つなので割り切れて、1つだけ次の段に残らない）。幅は「はじめる」と同じ 440px まで。
   札の中の左右の余白を 16 → 4px に詰め、いちばん長い「120秒」も 1マス（390 で約70px）に収める。押せる高さ 44px はそのまま。
   PC（1024px 以上）は今までどおり1行に8つ並ぶ（dpg-tabs.css の白地のセグメント）。
   詳細度: dpg-tabs.css の .qz-pills:not(#_)（1,3,0）が後から読まれるので、クラスを足して（1,5,0）にする。 */
@media (max-width: 1023.98px) {
  :root[data-quiz-theme="paper"] .qz-setup .qz-pills.qz-pills--limit:not(#_) {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); width: 100%; max-width: 440px;
  }
  :root[data-quiz-theme="paper"] .qz-setup .qz-pills--limit > .qz-pill:not(#_) {
    min-width: 0; padding-inline: 4px; justify-content: center; text-align: center;
  }
}
/* 2026-10-18 区間13 FIX: 200% 拡大（187px）では 4列だと札が幅 20px になり、「オフ」「120秒」が縦に折れて重なっていた（押す所の幅も 44px 未満）。
   300px 未満だけ、1つの幅を 64px 以上（「120秒」が1行に入る幅）にして、入る数だけ並べる（187px では1列）。320px 以上は上の 4列×2段のまま。 */
@media (max-width: 299.98px) {
  :root[data-quiz-theme="paper"] .qz-setup .qz-pills.qz-pills--limit:not(#_) { grid-template-columns: repeat(auto-fit, minmax(64px, 1fr)); }
}
/* 2026-10-16 周8（批評役「1ブロックの問題数の7つの札が2段に折れ、PC では『全問』だけが2段目」。結果のほかの解き方の右の列で起きていた）:
   問題数の札（5・10・20・30・40・80問・全問。views.js が qz-pills--batch を付ける）は、PC（1024px 以上）では折り返さず1行に並べる。
   札の中の左右の余白を 16 → 8px に詰める（7つで約370px。右の列の約430px に収まる）。押せる大きさ 44px 以上（幅も）・文字 14px はそのまま。
   スマホ（1024px 未満）は今までどおり折り返す（390 では 4＋3）。詳細度は上の制限時間と同じ考え（dpg-tabs.css の 1,3,0 より上）。 */
@media (min-width: 1024px) {
  :root[data-quiz-theme="paper"] .qz-pills.qz-pills--batch:not(#_) { flex-wrap: nowrap; }
  :root[data-quiz-theme="paper"] .qz-pills--batch > .qz-pill:not(#_) {
    flex: 0 1 auto; min-width: 44px; padding-inline: 8px; justify-content: center; text-align: center;
  }
}
/* 2026-10-16 周10（批評役 トップ3「390 で『今日の復習（理解して1・3・7日）』だけが中央寄せの2行に崩れる」）:
   読んで覚えるの対象の札（views.js の buildPracticeSetup が qz-pills--scope を付ける）は、どれも左寄せの1行の同じ形にそろえる。
   1024px 未満は縦に1列（幅はどれも同じ。「はじめる」と同じ 440px まで）。PC は今までどおり横に並ぶ（名前が短くなったので1行に収まる）。 */
:root[data-quiz-theme="paper"] .qz-setup .qz-pills--scope > .qz-pill:not(#_) { justify-content: flex-start; text-align: left; }
@media (max-width: 1023.98px) {
  :root[data-quiz-theme="paper"] .qz-setup .qz-pills.qz-pills--scope:not(#_) {
    flex-direction: column; flex-wrap: nowrap; width: 100%; max-width: 440px;
  }
}
/* 最初からやり直す（変更の画面だけ・破壊的な操作）は今までどおり一番下。選ぶ物との間を 8px 足して離す */
:root[data-quiz-theme="paper"] .qz-setup > [data-role="setup-restart"] { margin-top: var(--g-s1); }
/* 2026-10-15 周4（批評役 周3「PC で出題の設定・復習の設定・読んで覚えるの設定の『はじめる』が約920pxと横に長すぎる」）:
   600px 以上では「はじめる」の幅を 440px までにして左に寄せる（下の札・見出しと同じ左の線にそろえる）。スマホ（600px 未満）は今までどおり横いっぱい。 */
@media (min-width: 600px) {
  :root[data-quiz-theme="paper"] .qz-setup > .qz-setup__start { width: 100%; max-width: 440px; align-self: flex-start; }
}
/* 2026-10-15 関所D（本人選択「復習の準備（スマホ）: 下にも『はじめる』」。使い込んでいる人役「スマホは『はじめる』が上、時間が下（メニュー帯の裏）」）:
   スマホ（600px 未満）では「はじめる」（setup-start）を見た目だけカードの最後（選ぶ物の下）へ回し、画面の下（下のメニューの帯の上 8px）に張り付ける。
   来た時から画面の下に見えていて、時間などを選んだ指のまま押せる。カードの最後まで下げると、選ぶ物のすぐ下に収まる（答えた後の「次の問題へ」と同じ作り）。
   ボタンは1つのまま（紫の塗りは1画面に1つ）。最初からやり直す（setup-restart）はその下＝一番下のまま。説明（.qz-setup__lead）はカードの頭に残る。
   出題の設定・復習の準備・読んで覚えるの設定（どれも views.js の buildSetup）に同じく効く。600px 以上（タブレット・PC）は今までどおり上。 */
@media (max-width: 599.98px) {
  .qz-setup > .qz-setup__start {
    order: 1; position: sticky; z-index: 8;
    bottom: calc(var(--dpg-nav-gap, 10px) + var(--dpg-nav-h, 58px) + var(--g-s1) + env(safe-area-inset-bottom, 0px));
  }
  /* 張り付いている間、ボタンと下のメニューの帯の間（8px）から後ろの札がのぞかないよう、カードと同じ白の縁を 8px 付ける
     （カードの中にいる間は白の上の白なので見えない）。上の2つの影は今の紫の塗りの影（--g-primary-shadow）のまま */
  :root[data-quiz-theme="paper"] .qz-setup > .qz-setup__start { box-shadow: var(--g-primary-shadow), 0 0 0 var(--g-s1) var(--surface); }
  .qz-setup > [data-role="setup-restart"] { order: 2; }
  /* 「はじめる」のすぐ下に寄せていた負の余白を戻す（ボタンが下へ回ったので、説明はカードの頭） */
  :root[data-quiz-theme="paper"] .qz-setup > .qz-setup__lead { margin-top: 0; }
  /* 警告も説明も無い画面（出題の設定）では「設定（変えなくても…）」がカードの頭になるので、上の細い線を引かない */
  :root[data-quiz-theme="paper"] .qz-setup > .qz-setup__start:first-child + .qz-setup__options-head { padding-top: 0; border-top: 0; }
  /* 2026-10-16 周6（使い込んでいる人役「スマホの復習の準備: 『制限時間』が下に貼り付いた『はじめる』とメニュー帯の裏にある」）:
     カードの最後に、張り付いた「はじめる」が画面の下から浮いている分（メニュー帯の高さ＋下の隙間＋8px。上の bottom と同じ式）の余白を足す。
     ページの下に何も無い時でも、最後まで送れば「はじめる」は元の位置（最後の段のすぐ下）に戻り、最後の段が「はじめる」とメニュー帯の裏に残らない。
     復習の準備では、制限時間の段をこの余白に頼らず選ぶ物の先頭へ置いた（views.js の buildReviewSetupGroups）。PC（600px 以上）は今のまま */
  :root[data-quiz-theme="paper"] .qz-card.qz-setup {
    padding-bottom: calc(var(--dpg-nav-gap, 10px) + var(--dpg-nav-h, 58px) + var(--g-s1) + env(safe-area-inset-bottom, 0px));
  }
}
/* 2026-10-19 区間16 FIX6（本人「この設定のやつも謎に右によってるから中心にした方がいいんじゃない？」。写真は PC の幅 約870px の読んで覚えるの設定）:
   600px 以上（「はじめる」が張り付かない幅）では、白いカードは広いのに、中身（はじめる・対象の一覧・制限時間の札＝440px）が左に寄り、右が大きく空いていた。
   戻る・見出し・カードを、中身の幅の1つの列（カードの中 440px＝前の「はじめる」と同じ幅。カードの左右の余白 20px＋線 1px）にして、画面の真ん中に置く。
   カードの中の物は、どれも列の幅いっぱいか、列の左の線にそろう: はじめる・対象の一覧（縦に1列）・制限時間（4列×2段）・範囲は列の幅、
   問題数の7つは1行（左右の余白 8px。前の PC と同じ）、出題順などの短い札は左の線から。説明の字は語のまとまりで折る（Chrome 119 以上。効かない所は前の折り方）。
   出題の設定・解き直しの準備・読んで覚えるの設定・まとめの設定（どれも views.js の buildSetup・data-screen="setup"）に同じく効く。
   599px 以下（スマホ・200%）は今のまま（1列・張り付いた［はじめる］）。 */
@media (min-width: 600px) {
  :root[data-quiz-theme="paper"] .qz-app[data-screen="setup"] > .qz-page { width: 100%; max-width: 482px; margin-inline: auto; }
  :root[data-quiz-theme="paper"] .qz-setup > .qz-setup__start { max-width: none; align-self: stretch; }
  :root[data-quiz-theme="paper"] .qz-setup .qz-pills.qz-pills--scope:not(#_) { flex-direction: column; flex-wrap: nowrap; width: 100%; max-width: none; }
  :root[data-quiz-theme="paper"] .qz-setup .qz-pills.qz-pills--limit:not(#_) { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); width: 100%; max-width: none; }
  :root[data-quiz-theme="paper"] .qz-setup .qz-pills--limit > .qz-pill:not(#_) { min-width: 0; padding-inline: 4px; justify-content: center; text-align: center; }
  :root[data-quiz-theme="paper"] .qz-setup .qz-pills.qz-pills--batch:not(#_) { flex-wrap: nowrap; }
  :root[data-quiz-theme="paper"] .qz-setup .qz-pills--batch > .qz-pill:not(#_) { flex: 0 1 auto; min-width: 44px; padding-inline: 8px; justify-content: center; text-align: center; }
  /* 解き直しの準備の「間違いの回数」（すべて・1回だけ・2回以上・3回以上。data-role="class-…"）も、数が2〜3桁になると 440px で「3回以上」だけが2段目に落ちる。問題数と同じ1行にする */
  :root[data-quiz-theme="paper"] .qz-setup .qz-pills:has(> .qz-pill[data-role^="class-"]):not(#_) { flex-wrap: nowrap; }
  :root[data-quiz-theme="paper"] .qz-setup .qz-pills:has(> .qz-pill[data-role^="class-"]) > .qz-pill:not(#_) { flex: 0 1 auto; min-width: 44px; padding-inline: 8px; justify-content: center; text-align: center; }
  :root[data-quiz-theme="paper"] .qz-setup > :is(.qz-setup__note, .qz-setup__warn),
  :root[data-quiz-theme="paper"] .qz-setup > .qz-setup__group > .qz-setup__note { word-break: auto-phrase; overflow-wrap: anywhere; text-wrap: pretty; }
}
/* 650px 以下はカードの左右の余白が 18px（theme-dpg.css）なので、列の幅を 4px 詰めて、カードの中を同じ 440px にする */
@media (min-width: 600px) and (max-width: 650px) {
  :root[data-quiz-theme="paper"] .qz-app[data-screen="setup"] > .qz-page { max-width: 478px; }
}
/* 2026-10-19 関所R（本人の選択「C3 表の形」。見本は 関所R の PCの設定の案_ChatGPT/C3_表の形.png）:
   PC（1024px 以上・左のメニューがある幅）では、上の 482px の列をやめ、パソコンの設定画面のような表にする。
   見出しの段: 左に ← 戻る と冊の名前、右に［はじめる］（紫の塗りはこの1つ）とその説明。押すと何が消えるかの警告は［はじめる］の上（今の順のまま）。
   表の段: 白いカードに「設定（変えなくても始められます）」と、1行に1つの項目（左に項目名 200px・細い縦の線・右に選択肢を横一列）。
   選択肢の説明（対象の説明・制限時間の説明）は、その行の選択肢の下。札の見た目（白地のセグメント・選択中は薄紫の面＋紫の線）は今のまま。
   HTML（views.js の buildSetup）は変えない: カード（.qz-setup）を display: contents にして、中身を .qz-page の grid に直接並べる。
   カードの白い面は .qz-setup::before を表の段（4本目の線から下）に絶対配置で敷く（grid の外なので、ほかの物の並びを押さない）。
   DOM の並び＝Tab の順（戻る → はじめる → 選択肢 → 最初からやり直す）も、data-role も今のまま。
   600〜1023px（タブレット・折りたたみ）と 599px 以下（スマホ・200%）は今のまま（482px の列・張り付いた［はじめる］）。 */
@media (min-width: 1024px) {
  :root[data-quiz-theme="paper"] .qz-app[data-screen="setup"] > .qz-page:has(> .qz-setup) {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 360px); column-gap: 32px; row-gap: 0;
    align-items: start; max-width: none; position: relative; isolation: isolate;
  }
  :root[data-quiz-theme="paper"] .qz-app[data-screen="setup"] > .qz-page > .qz-back { grid-column: 1; grid-row: 1; justify-self: start; }
  :root[data-quiz-theme="paper"] .qz-app[data-screen="setup"] > .qz-page > .qz-page__title { grid-column: 1; grid-row: 2 / span 2; margin: var(--g-s1) 0 24px; }
  :root[data-quiz-theme="paper"] .qz-app[data-screen="setup"] > .qz-page > .qz-card.qz-setup { display: contents; }
  :root[data-quiz-theme="paper"] .qz-app[data-screen="setup"] > .qz-page > .qz-setup::before {
    content: ""; position: absolute; inset: 0; z-index: -1; grid-column: 1 / -1; grid-row: 4 / auto;
    background: var(--surface); border: 1px solid transparent; border-radius: 24px; box-shadow: var(--g-card-shadow);
  }
  /* 見出しの段の右の列（警告 → はじめる → 説明。警告が無ければ はじめる が1段目） */
  :root[data-quiz-theme="paper"] .qz-setup > .qz-setup__warn { grid-column: 2; grid-row: 1; margin: 0 0 var(--g-s1); }
  :root[data-quiz-theme="paper"] .qz-setup > .qz-setup__start { grid-column: 2; grid-row: 1; width: 100%; max-width: none; align-self: start; }
  :root[data-quiz-theme="paper"] .qz-setup > .qz-setup__warn ~ .qz-setup__start { grid-row: 2; }
  :root[data-quiz-theme="paper"] .qz-setup > .qz-setup__lead { grid-column: 2; grid-row: 2; margin: var(--g-s1) 0 24px; }
  :root[data-quiz-theme="paper"] .qz-setup > .qz-setup__warn ~ .qz-setup__lead { grid-row: 3; }
  /* 表の段: カードの中（左右 24px）に幅いっぱいで1行ずつ */
  :root[data-quiz-theme="paper"] .qz-setup > :not(.qz-setup__warn, .qz-setup__start, .qz-setup__lead) { grid-column: 1 / -1; margin-inline: 24px; }
  :root[data-quiz-theme="paper"] .qz-setup > .qz-setup__options-head {
    margin-top: 24px; padding: 0 0 var(--g-s2); border-top: 0; border-bottom: 1px solid var(--separator);
    font-size: var(--g-fs-body); font-weight: 800; color: var(--text);
  }
  :root[data-quiz-theme="paper"] .qz-setup > .qz-setup__group {
    display: grid; grid-template-columns: 200px minmax(0, 1fr); column-gap: 24px; row-gap: var(--g-s1); align-items: start;
    padding-block: var(--g-s2); border-top: 1px solid var(--separator);
    background: linear-gradient(var(--separator), var(--separator)) 212px 0 / 1px 100% no-repeat;
  }
  :root[data-quiz-theme="paper"] .qz-setup > .qz-setup__options-head + .qz-setup__group { border-top: 0; }
  :root[data-quiz-theme="paper"] .qz-setup > .qz-setup__group > .qz-setup__label {
    grid-column: 1; grid-row: 1; display: flex; align-items: center; min-height: 52px; margin: 0;
    font-size: var(--g-fs-body); font-weight: 800; line-height: 1.4; color: var(--text);
  }
  :root[data-quiz-theme="paper"] .qz-setup > .qz-setup__group > :not(.qz-setup__label) { grid-column: 2; }
  /* 行の選択肢の説明は、選択肢の下（右の列）に続ける。縦の線もつなぐ */
  :root[data-quiz-theme="paper"] .qz-setup > .qz-setup__group:has(+ .qz-setup__note) { padding-bottom: var(--g-s1); }
  :root[data-quiz-theme="paper"] .qz-setup > .qz-setup__group + .qz-setup__note {
    margin-top: 0; padding: 0 0 var(--g-s2) 224px;
    background: linear-gradient(var(--separator), var(--separator)) 212px 0 / 1px 100% no-repeat;
  }
  :root[data-quiz-theme="paper"] .qz-setup > .qz-practice-range > .qz-practice-range__controls { max-width: 440px; }
  /* 最初からやり直す（変更の画面だけ）は表の下、右の列の頭から言葉の幅で */
  :root[data-quiz-theme="paper"] .qz-setup > [data-role="setup-restart"] {
    justify-self: start; width: auto; margin: var(--g-s1) 24px 0 calc(24px + 224px); padding-inline: 24px;
  }
  /* カードの下の余白（最後の行の下 16px＋8px） */
  :root[data-quiz-theme="paper"] .qz-setup > :last-child { margin-bottom: var(--g-s1); }
  :root[data-quiz-theme="paper"] .qz-setup > [data-role="setup-restart"]:last-child { margin-bottom: 24px; }
  /* 選択肢は横一列。対象（5つ）と制限時間（8つ）は行の幅いっぱいに分け、入らない時だけ白い面の中で折り返す
     （対象の名前は語のまとまりで2行まで。1つの幅は名前の最も長い語より狭くならない） */
  :root[data-quiz-theme="paper"] .qz-setup .qz-pills.qz-pills--scope:not(#_) {
    display: flex; flex-direction: row; flex-wrap: wrap; width: 100%; max-width: none;
  }
  :root[data-quiz-theme="paper"] .qz-setup .qz-pills--scope > .qz-pill:not(#_) {
    flex: 1 1 0; min-width: auto; padding-inline: 12px; justify-content: center; text-align: center;
  }
  /* 制限時間（8つ）は等分の8列。行が狭い時（1024px でメニューを開いている時など。右の列 約500px）は、1つだけ次の段に残らないよう 4列×2段（スマホと同じ） */
  :root[data-quiz-theme="paper"] .qz-setup > .qz-setup__group:has(> .qz-pills--limit) { container: dpg-setup-row / inline-size; }
  :root[data-quiz-theme="paper"] .qz-setup .qz-pills.qz-pills--limit:not(#_) {
    display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); width: 100%; max-width: none;
  }
  :root[data-quiz-theme="paper"] .qz-setup .qz-pills--limit > .qz-pill:not(#_) { min-width: 0; padding-inline: 4px; justify-content: center; text-align: center; }
  @container dpg-setup-row (max-width: 819.98px) {
    :root[data-quiz-theme="paper"] .qz-setup .qz-pills.qz-pills--limit:not(#_) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  }
  /* 語のまとまり（.nobr。home-v3.css で inline-block）の中では折らない（「10／秒」と1字ずつ折れない）。
     札の幅は最も長いまとまりより狭くならず、対象の名前が折れるのは「（」の前だけ */
  :root[data-quiz-theme="paper"] .qz-setup :is(.qz-pills--scope, .qz-pills--limit) > .qz-pill > .nobr { white-space: nowrap; }
}

/* ---- 読んで覚えるの画面（views.js の buildPracticeStudy。2026-10-15 周4） ----
   「理解した」（紫の塗り）の下に「← 読んで覚えるの棚へ」（文字のリンク・墨の薄い色）。上の「トップへ」はホームへ行くので、読んで覚えるの棚へ戻る道はここ */
:root[data-quiz-theme="paper"] .qz-practice-study__links { margin-top: calc(var(--g-s1) * -1); }

/* 動きを減らす設定では、矢印の回転も止める */
@media (prefers-reduced-motion: reduce) {
  .qz-result-more__chev { transition: none; }
}

/* ===== 今日の目安の達成の帯（2026-10-18 区間11 LOOK・提案 P7「溜め→止め→解放」。2026-10-19 区間13 P7 で1から作り直し: 案1「満ちて、判を1つ」） =====
   views.js の buildGoalCheer が、この回で今日の目安を達成した時だけ、結果の見出しのすぐ下に置く（.dpg-goalcheer・data-role="goal-cheer"）。
   問題が何問でも形は同じ（ゲージ1本・判1つ・キャラ1人。数は字だけ）。前の案A（金のゲージ・キャラが飛び出す）と案B（判を押す）の良い所を合わせた。
   段階のクラス: --wait（始める前。満点の演出を待つ間も）→ --play（1.5秒の動き。描き直したら --gc-t の負の遅れで続きから）→ --done（最後の形）。
   時間（全部で 1500ms。% は 1500ms に対して）:
     溜め  0〜42.67%（0〜640ms）     … ゲージが「この回の前」（--gc-from）から満ちる（だんだん速く）。帯が 1.5% だけ縮む。下からのぞくキャラが沈んで構える。満ちたら判の枠が金に光る
     止め 42.67〜53.33%（640〜800ms）… 「達成」の判を枠の上に持ち上げ、影を落としたまま止まる（ヒットストップ）
     解放 53.33〜73.33%（800〜1100ms）… 判が押される（帯が縦に1回つぶれて戻る）・地が薄い金に・キャラが帯の上へ飛び出す・輪が1つ
     余韻 73.33〜100%（1100〜1500ms）… 輪が広がって消え、キャラと判が落ち着く
   紙吹雪・飛び散る粒は使わない。輪は金と紫の2重（クリームの地でも見える）。満点の演出の後（--after）は帯の弾みを小さく、輪を出さない。
   キャラの窓（__poseslot）は帯の上へ 24px だけはみ出せて、下は帯の縁で切る（キャラの絵の下の切り口が帯の縁に重なる）。
   色: 金＝自分が取った物（区間11 P9）。字は藍（白で 13:1・薄い金の地で 11:1 以上）。地はライト（白 → 薄い金）。字は 14・17・22px の段だけ。 */
.dpg-goalcheer {
  --gc-gold: #F2B705; --gc-edge: #B8860B; --gc-ink: #1F2A5C; --gc-violet: rgb(101 53 181 / 34%);
  --gc-fill: linear-gradient(90deg, #FFD95A 0%, #F2B705 60%, #E2A300 100%);
  --gc-wash: linear-gradient(100deg, #FFFBEA 0%, #FFF0BF 100%);
  --gc-pose: 88px; --gc-seal: 56px;
  --gc-from: 0%; --gc-t: 0ms;
  position: relative; isolation: isolate; display: flex; align-items: center; gap: var(--g-s1) var(--g-s2);
  min-height: 72px; margin: 0; padding: 12px 14px 12px calc(var(--gc-pose) + 16px);
  border: 2px solid rgb(31 42 92 / 10%); border-radius: var(--g-radius);
  background: var(--surface, #fff); box-shadow: var(--g-card-shadow); color: var(--gc-ink);
  cursor: pointer; -webkit-tap-highlight-color: transparent; user-select: none;
}
.dpg-goalcheer::before {   /* 解放で出る薄い金の地 */
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: calc(var(--g-radius) - 2px);
  background: var(--gc-wash); opacity: 0;
}
.dpg-goalcheer__poseslot {
  position: absolute; left: 10px; bottom: 0; z-index: 1; width: var(--gc-pose); height: calc(100% + 24px);
  overflow: hidden; border-bottom-left-radius: 10px; pointer-events: none;
}
.dpg-goalcheer__pose {
  position: absolute; left: 0; bottom: 0; width: var(--gc-pose); height: var(--gc-pose);
  object-fit: contain; object-position: center bottom; transform: translateY(30%) rotate(0deg);   /* 始める前は下から顔とこぶしがのぞく */
}
.dpg-goalcheer__main { flex: 1 1 auto; min-width: 0; }
.dpg-goalcheer__text { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--g-s1); margin: 0; line-height: 1.3; }
.dpg-goalcheer__label { font-size: var(--g-fs-small); font-weight: 800; }
.dpg-goalcheer__num { font-size: var(--g-fs-title); font-weight: 900; font-variant-numeric: tabular-nums; }
.dpg-goalcheer__more { font-size: var(--g-fs-small); font-weight: 700; }
.dpg-goalcheer__bar { position: relative; display: block; height: 12px; margin-top: 8px; border-radius: 999px; background: rgb(31 42 92 / 10%); overflow: hidden; }
.dpg-goalcheer__bar i { position: absolute; left: 0; top: 0; bottom: 0; width: var(--gc-from); border-radius: inherit; background: var(--gc-fill); }
.dpg-goalcheer__seal { position: relative; flex: none; width: var(--gc-seal); height: var(--gc-seal); }
.dpg-goalcheer__socket { position: absolute; inset: 0; border: 2px dashed rgb(31 42 92 / 30%); border-radius: 50%; }
.dpg-goalcheer__stamp {
  position: absolute; inset: 0; display: grid; place-items: center; border-radius: 50%;
  background: var(--gc-ink); color: #FFD95A; box-shadow: inset 0 0 0 3px #FFD95A, 0 2px 0 rgb(20 27 61 / 30%);
  font-size: var(--g-fs-body); font-weight: 900; letter-spacing: .04em; line-height: 1;
  opacity: 0; transform: translateY(-6px) scale(1.7) rotate(-14deg);
}
.dpg-goalcheer__ring {
  position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
  box-shadow: 0 0 0 3px #FFD95A, 0 0 0 7px var(--gc-violet); opacity: 0;
}

/* 最後の形（消音・動きを減らす設定・押した時・動きの後） */
.dpg-goalcheer--done { border-color: var(--gc-gold); cursor: default; }
.dpg-goalcheer--done::before { opacity: 1; }
.dpg-goalcheer--done .dpg-goalcheer__pose { transform: none; }
.dpg-goalcheer--done .dpg-goalcheer__bar { background: rgb(184 134 11 / 18%); }
.dpg-goalcheer--done .dpg-goalcheer__bar i { width: 100%; }
.dpg-goalcheer--done .dpg-goalcheer__socket { opacity: 0; }
.dpg-goalcheer--done .dpg-goalcheer__stamp { opacity: 1; transform: translateY(0) scale(1) rotate(-8deg); }

/* 動き（--play）。どれも 1500ms・同じ遅れ（--gc-t）で、最後のコマ＝上の最後の形 */
.dpg-goalcheer--play { animation: dpg-gc-band 1500ms linear var(--gc-t) both, dpg-gc-edge 1500ms linear var(--gc-t) both; }
.dpg-goalcheer--play::before { animation: dpg-gc-wash 1500ms linear var(--gc-t) both; }
.dpg-goalcheer--play .dpg-goalcheer__bar i { animation: dpg-gc-fill 1500ms linear var(--gc-t) both; }
.dpg-goalcheer--play .dpg-goalcheer__socket { animation: dpg-gc-socket 1500ms linear var(--gc-t) both; }
.dpg-goalcheer--play .dpg-goalcheer__stamp { animation: dpg-gc-stamp 1500ms linear var(--gc-t) both; }
.dpg-goalcheer--play .dpg-goalcheer__ring { animation: dpg-gc-ring 1500ms linear var(--gc-t) both; }
.dpg-goalcheer--play .dpg-goalcheer__pose { animation: dpg-gc-pose 1500ms linear var(--gc-t) both; }
.dpg-goalcheer--play.dpg-goalcheer--after { animation-name: dpg-gc-band-small, dpg-gc-edge; }
.dpg-goalcheer--play.dpg-goalcheer--after .dpg-goalcheer__ring { animation: none; }

@keyframes dpg-gc-band {
  0% { transform: scale(1, 1); animation-timing-function: cubic-bezier(.5, 0, .9, .5); }
  42.67%, 53.33% { transform: scale(.985, .985); animation-timing-function: cubic-bezier(.6, 0, .9, .4); }
  57.33% { transform: scale(1.012, .955); animation-timing-function: cubic-bezier(.2, 1.5, .5, 1); }
  65.33% { transform: scale(.996, 1.012); animation-timing-function: ease-out; }
  73.33%, 100% { transform: scale(1, 1); }
}
@keyframes dpg-gc-band-small {
  0% { transform: scale(1, 1); }
  42.67%, 53.33% { transform: scale(.993, .993); animation-timing-function: cubic-bezier(.6, 0, .9, .4); }
  57.33% { transform: scale(1.004, .985); animation-timing-function: ease-out; }
  70.67%, 100% { transform: scale(1, 1); }
}
@keyframes dpg-gc-edge { 0%, 53.33% { border-color: rgb(31 42 92 / 10%); } 57.33%, 100% { border-color: #F2B705; } }
@keyframes dpg-gc-wash { 0%, 53.33% { opacity: 0; } 58.67%, 100% { opacity: 1; } }
@keyframes dpg-gc-fill {
  0% { width: var(--gc-from); filter: none; animation-timing-function: cubic-bezier(.55, 0, .85, .35); }
  42.67%, 53.33% { width: 100%; filter: brightness(1.16) saturate(1.15); }
  61.33%, 100% { width: 100%; filter: none; }
}
@keyframes dpg-gc-socket {
  0%, 34.67% { transform: scale(1); border-color: rgb(31 42 92 / 30%); background: rgb(255 255 255 / 0%); opacity: 1; }
  42.67%, 53.33% { transform: scale(1.08); border-color: #F2B705; background: #FFF4C7; opacity: 1; }
  55.33%, 100% { transform: scale(1.08); border-color: #F2B705; background: #FFF4C7; opacity: 0; }
}
@keyframes dpg-gc-stamp {
  0%, 40% { opacity: 0; transform: translateY(-14px) scale(1.6) rotate(-16deg); box-shadow: inset 0 0 0 3px #FFD95A, 0 16px 18px rgb(31 42 92 / 0%); }
  46.67%, 53.33% { opacity: 1; transform: translateY(-12px) scale(1.32) rotate(-14deg); box-shadow: inset 0 0 0 3px #FFD95A, 0 16px 18px rgb(31 42 92 / 30%); animation-timing-function: cubic-bezier(.6, 0, .9, .4); }
  57.33% { opacity: 1; transform: translateY(0) scale(.86) rotate(-8deg); box-shadow: inset 0 0 0 3px #FFD95A, 0 1px 0 rgb(20 27 61 / 30%); animation-timing-function: ease-out; }
  62.67% { opacity: 1; transform: translateY(0) scale(1.06) rotate(-8deg); box-shadow: inset 0 0 0 3px #FFD95A, 0 2px 0 rgb(20 27 61 / 30%); animation-timing-function: ease-in-out; }
  69.33%, 100% { opacity: 1; transform: translateY(0) scale(1) rotate(-8deg); box-shadow: inset 0 0 0 3px #FFD95A, 0 2px 0 rgb(20 27 61 / 30%); }
}
@keyframes dpg-gc-ring {
  0%, 54.67% { opacity: 0; transform: scale(.8); }
  57.33% { opacity: 1; transform: scale(.92); animation-timing-function: cubic-bezier(.1, .7, .3, 1); }
  92%, 100% { opacity: 0; transform: scale(1.6); }
}
@keyframes dpg-gc-pose {
  0% { transform: translateY(30%) rotate(0deg); animation-timing-function: ease-in; }
  42.67%, 53.33% { transform: translateY(40%) rotate(2deg); animation-timing-function: cubic-bezier(.2, 1.3, .5, 1); }   /* 溜め: 沈んで構える */
  62.67% { transform: translateY(-5%) rotate(-3deg); animation-timing-function: ease-in-out; }
  72% { transform: translateY(2%) rotate(1deg); animation-timing-function: ease-out; }
  80%, 100% { transform: translateY(0) rotate(0deg); }
}

/* 広い幅（PC）: 帯の字が1行に収まって帯が低くなるので、キャラを少し大きく（帯の上へ 16px ほど飛び出す。見出しとの間は 24px） */
@media (min-width: 900px) {
  .dpg-goalcheer { --gc-pose: 96px; }
}
/* 狭い幅（320px・200% 拡大）: キャラの窓を外し、判を小さく。帯は折り返して横にはみ出さない */
@media (max-width: 340px) {
  .dpg-goalcheer { --gc-seal: 48px; padding: 10px 10px; gap: var(--g-s1); }
  .dpg-goalcheer__poseslot { display: none; }
}
/* 2026-10-19 区間15 FIX3（評価役 EVAL の直す所2）: 設定を2倍に拡大した幅（187px。帯は約 136px）では、判が右に残ると字が約 56px の列に押し込まれ、
   「（今日 5／問）」と数と単位が別の行に割れていた。280px 未満の幅では、判を字の下へ回して字の列を帯の幅いっぱいにし、「（今日 5問）」は1つのまとまり
   （折らずに次の行へ）にする。判は左（前の形と同じ）。320・390・1280 の幅は変えない。 */
@media (max-width: 279.98px) {
  .dpg-goalcheer { flex-wrap: wrap; align-items: flex-start; }
  .dpg-goalcheer__main { flex: 1 1 100%; }
  .dpg-goalcheer__more { white-space: nowrap; }
}
/* 動きを減らす設定: 動かさず最後の形（views.js も始めから --done にする） */
@media (prefers-reduced-motion: reduce) {
  .dpg-goalcheer, .dpg-goalcheer::before, .dpg-goalcheer * { animation: none !important; transition: none !important; }
}

/* ===================================================================================
   本番形式の結果（2026-10-22・本人承認の見本 mock3。views.js の buildMockResult）。
   白いカード: 合格（緑の札）／不合格（灰の札）→ 大きい「38 / 50」→ 合格点と余裕・かかった時間・前回との差（今回は紫の太字）。
   その下に「分野ごと」の棒のカード → ［間違えたN問を解説つきで見直す］（紫の塗り）→［全問の答えと解説を見る］（紫の枠）→ トップへ。
   =================================================================================== */
.dpg-mock-result .dpg-mock-result__hero{position:relative;text-align:center;padding:var(--g-s3,24px) var(--g-s2,16px)}
.dpg-mock-result__verdict{display:inline-block;margin:0 0 4px;padding:6px 26px;border-radius:999px;font-size:var(--g-fs-title,22px);font-weight:800;line-height:1.3;color:#fff}
.dpg-mock-result__verdict--pass{background:#2f9e4f}
.dpg-mock-result__verdict--fail{background:#8b8590}
.dpg-mock-result__score{margin:0 0 8px;line-height:1}
.dpg-mock-result__got{font-size:clamp(64px,20vw,96px);font-weight:900;color:var(--accent,#6535b5);font-variant-numeric:tabular-nums}
.dpg-mock-result__of{font-size:clamp(32px,10vw,48px);font-weight:800;color:var(--text-2,#6b5f5a);font-variant-numeric:tabular-nums}
.dpg-mock-result__line{margin:4px 0 0;color:var(--text-2,#6b5f5a);line-height:1.6}
.dpg-mock-result__now{color:var(--accent,#6535b5);font-weight:800}
.dpg-mock-result .dpg-mock-result__hero .dpg-result-joy__pose{width:72px;height:72px}
.dpg-mock-result__domains{padding:var(--g-s2,16px) var(--g-s2,16px) 4px}
.dpg-mock-result__domains-head{margin:0 0 4px;font-size:var(--g-fs-body,17px);font-weight:800}
.dpg-mock-result__domain{display:grid;grid-template-columns:7.5em minmax(0,1fr) auto;align-items:center;gap:12px;min-height:48px;border-bottom:1px solid var(--separator,#ece6e2)}
.dpg-mock-result__domain:last-child{border-bottom:0}
.dpg-mock-result__domain-name{font-weight:700;font-size:var(--g-fs-small,14px)}
.dpg-mock-result__bar{display:block;height:10px;border-radius:999px;background:var(--h-track,#e9e3f0);overflow:hidden}
.dpg-mock-result__fill{display:block;height:100%;border-radius:999px;background:var(--accent,#6535b5);opacity:.75}
.dpg-mock-result__domain-score{min-width:4.2em;text-align:right;color:var(--text-2,#6b5f5a);font-variant-numeric:tabular-nums}
.dpg-mock-result__domain-score strong{font-size:var(--g-fs-body,17px);color:var(--accent,#6535b5)}
.dpg-mock-result__actions{display:flex;flex-direction:column;gap:12px}
.dpg-mock-result__actions > .qz-btn{margin:0}
.dpg-mock-result__home{align-self:center;min-height:44px;font-weight:700;text-decoration:underline}
.dpg-mock-result__note{margin:0;font-size:var(--g-fs-small,14px);color:var(--text-2,#6b5f5a);text-align:center}
.dpg-mock-result .qz-result__summary{display:flex;flex-direction:column;gap:var(--g-s2,16px)}
.dpg-mock-result .qz-result__summary > .qz-card{margin:0}