/* ===========================================================================
   ドパガキ問題集 — assets/dpg-v-voice.css（2026-10-29 区間V1 担当V1「声の操作」。本人だけに見える 'v-voice'）
   部品の印（class）は voice-chat-control.js が札の時だけ付ける（札が無い時は、この CSS の物はどれも画面に無い＝今の画面のまま）。
   色は今の値だけ（design/dpg/00-tokens.css の --dpg-gold-soft・--dpg-gold。var() の後ろは今のトークンの値を写した物。新しい色は作っていない）。
   動きを減らす設定では色を変える動きを止める（最後の形だけ）。紙吹雪・光の粒は使わない。
   =========================================================================== */

/* 「なんで違う？」で動いた先の、その選択肢の理由の行（くわしい解説の「・<選択肢>：誤り。…」）を4秒だけ蛍光ペンの色にする。
   直し係V: 正解の選択肢を聞かれた時・2択の時は、結論のカードの理由の文（.qz-conclusion__reason）も同じ色で光らせる。
   行の大きさ・位置は変えない（外側の影で枠を描くので、字がずれない）。 */
.qz-explain__body.dpg-v1-hit,
.qz-stem-bullets.dpg-v1-hit,
.qz-conclusion__reason.dpg-v1-hit {
  background: var(--dpg-gold-soft, #fff0bf);
  box-shadow: 0 0 0 4px var(--dpg-gold-soft, #fff0bf), 0 0 0 6px var(--dpg-gold, #f6c744);
  border-radius: 4px;
  transition: background-color var(--dur-slow, 400ms) ease, box-shadow var(--dur-slow, 400ms) ease;
}

/* 1つの段の中に改行で並ぶ「ほかの選択肢」（宅建など）は、その行の字の範囲だけを塗る（CSS の印 ::highlight。字の大きさ・位置は変えない）。 */
::highlight(dpg-v1-hit) {
  background-color: var(--dpg-gold-soft, #fff0bf);
  text-decoration: underline 3px var(--dpg-gold, #f6c744);
}

/* 「画像解説」で、画像が見えている高さより大きい時だけ、声で見せている間はその高さに縮めて全体を見せる（max-height は JS が入れる）。
   次の問題へ進むと外す。試した 1:1・3:4・9:16 は 390px・1280px とも縮めずに入る（V0・V1 の測り）。 */
.xai__info-img.dpg-v1-img-fit,
.qz-community .xfig .qz-figure__img.dpg-v1-img-fit {
  width: 100%;
  height: auto;
  object-fit: contain;
}

@media (prefers-reduced-motion: reduce) {
  .qz-explain__body.dpg-v1-hit,
  .qz-stem-bullets.dpg-v1-hit,
  .qz-conclusion__reason.dpg-v1-hit { transition: none; }
}