/* dpg-settings.css — 関所B の試作（2026-10-15 Cowork）。dpg-guide.css の決まり（トークン）を使う。
   設定（⚙）を2段にする（本人が選んだ形）。組み立ては views.js の buildSettingsPanel、開いている2段目は app.js の state.ui.settingsPane。
     1段目 … 今の値つきの一覧（.dpg-set__list。行は「アイコン・名前・今の値・›」）と「自動でやっていること」の枠（.dpg-set__auto）
     2段目 … 選んだ項目の今の操作（.dpg-set__pane。中の欄は前と同じ .qz-settings__* の部品）
   スマホは1段目と2段目を入れ替えて見せ、PC（1000px 以上。views.js の SETTINGS_WIDE_MQ と同じ）は左右に並べる。
   出題中の⚙シート（.qz-quiz-settings）は1段のまま。同じ部品（.qz-settings__*）の見た目の決まり（線なしのカード・文字の4段・札の色・ボタンの強弱）だけそろえる。
   色は既存の変数か下の :root の変数だけ。赤と緑は正誤だけに使う（オン・オフ、「自動」の札、記録を消すボタンにも使わない）。 */
:root {
  --set-line: var(--ring-track);          /* 行の間の薄い線（カードの枠線はやめた） */
  --set-hover: color-mix(in srgb, var(--accent-soft) 55%, var(--surface));  /* 行にマウスを載せたとき（選択中より淡い紫） */
  --set-current: var(--accent-soft);      /* PC で右に開いている行（紫＝選択中） */
  --set-auto-bg: var(--surface-2);        /* 「自動でやっていること」の枠の地（白いカードと分ける） */
  --set-badge-bg: var(--surface);         /* 「自動」の札（前は緑。緑は正解だけにする） */
  --set-badge-ink: var(--text-2);
  --set-strong-line: var(--text);         /* 「本当に全部消す」の枠と文字（前は赤。赤は不正解だけにする） */
  --set-icon: 28px;                       /* 行の頭の絵の幅 */
  --set-row-h: var(--g-hit);              /* 1段目の行の高さ（押せる大きさ 48px）。自分の音の行が増えても一覧が 390×844 の1画面に収まる高さ */
}

/* ---------- 消音中（2026-10-15 区間4・関所D の Q4） ----------
   「すべての音を消す」がオンの間、消音で止まる音の行（音量・効果音・声・自分の音・音声解説・演出）を薄く見せる（押せるまま）。
   段の上（出題中の⚙は「音と演出」の頭）に1行「消音中（解除すると、下の設定で鳴ります）」。 */
:root[data-quiz-theme] :is(.dpg-set, .qz-quiz-settings) .dpg-set__dim { opacity: .45; }
:root[data-quiz-theme] :is(.dpg-set, .qz-quiz-settings) .dpg-set__muted-line { margin: 0; font-weight: 700; color: var(--text); }

/* ---------- 出題中の⚙のシートの見出しの行（右上に［閉じる］。2026-10-15 区間4） ----------
   シートの中を下まで読んでも押せるよう、見出しの行はシートの上に貼り付ける（地はシートと同じ色）。 */
.qz-quiz-settings__head {
  position: sticky; top: calc(-1 * var(--g-s2)); z-index: 2;
  display: flex; align-items: center; justify-content: space-between; gap: var(--g-s2);
  margin: calc(-1 * var(--g-s2)) 0 0; padding: var(--g-s2) 0 var(--g-s1);
  background: inherit;
}
:root[data-quiz-theme] .qz-quiz-settings .qz-quiz-settings__head .qz-quiz-settings__title { margin: 0; }
:root[data-quiz-theme] .qz-quiz-settings .qz-quiz-settings__close:not(#_) { margin: 0 -6px 0 0; }

/* ---------- 開いている間は設定だけの画面にする ----------
   ホームの中身（紫のカード・作る帯・最近使った・本棚・お知らせ）を隠す。閉じれば元のホームがそのまま出る（DOM は毎回作り直し）。
   ⚙ も一緒に隠れるので、閉じるのは1段目の上の［閉じる］（⚙ と同じ toggleSettings）。 */
.qz-page:has(> .dpg-set) > :not(.dpg-set) { display: none !important; }

/* 外側の箱は飾らない（中のカードが白く見える）。2段にする前の .qz-settings の枠・余白・幅の上限を打ち消す。 */
:root[data-quiz-theme] .qz-settings.dpg-set {
  display: block; width: 100%; max-width: 640px; margin: 0 auto; padding: 0;
  border: 0; border-radius: 0; background: transparent; box-shadow: none;
}

/* 読み上げにだけ残す（1段目のまとまりの見出し・2段目の見出しと同じ名前の欄の見出し） */
.dpg-set .dpg-set__sr {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- 1段目 ---------- */
.dpg-set__list { display: flex; flex-direction: column; gap: var(--g-s2); min-width: 0; }
.dpg-set__head,
.dpg-set__pane-head { display: flex; align-items: center; justify-content: space-between; gap: var(--g-s2); min-height: var(--g-hit); }
.dpg-set__title,
.dpg-set__pane-title { margin: 0; min-width: 0; font-size: var(--g-fs-title); font-weight: 800; line-height: 1.3; color: var(--text); }
/* 見出しは開いた直後のフォーカスの置き場所（tabindex=-1）。押せる物ではないので輪は出さない
   （theme-dpg.css の :root[data-quiz-theme="paper"] :focus-visible より強くする）。 */
:root[data-quiz-theme] .dpg-set :is(.dpg-set__title, .dpg-set__pane-title):is(:focus, :focus-visible) { outline: none; }

/* ［閉じる］＝2番手（白地に紫の枠） */
.dpg-set__close {
  flex: none; min-height: var(--g-hit); padding: 0 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.2; cursor: pointer;
}
:root[data-quiz-theme] .dpg-set .dpg-set__close:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

/* まとまりごとの白いカード（線なし・やわらかい影） */
.dpg-set__group { overflow: hidden; border-radius: var(--g-radius); background: var(--surface); box-shadow: var(--g-card-shadow); }
.dpg-set__rows { margin: 0; padding: 0; list-style: none; }
.dpg-set__item { position: relative; container-type: inline-size; } /* container-type は下の R7（行の幅が狭いときの並べ替え）の入れ物 */
/* 行の間の線は、頭の絵の右から引く */
.dpg-set__item + .dpg-set__item::before {
  content: ""; position: absolute; top: 0; right: 0; left: calc(var(--g-s2) + var(--set-icon) + var(--g-s2));
  border-top: 1px solid var(--set-line); pointer-events: none;
}
.dpg-set__row {
  /* 頭の絵の列は絵の幅＋8px（絵と名前の間は 16px、名前・値・› の間は 8px） */
  display: grid; grid-template-columns: calc(var(--set-icon) + var(--g-s1)) minmax(0, 1fr) auto auto; align-items: center; column-gap: var(--g-s1);
  width: 100%; min-height: var(--set-row-h); margin: 0; padding: 0 var(--g-s2);
  border: 0; border-radius: 0; background: none; color: var(--text);
  font: inherit; font-size: var(--g-fs-body); line-height: 1.35; text-align: left; cursor: pointer;
}
.dpg-set__icon { display: grid; place-items: center; justify-self: start; width: var(--set-icon); font-size: var(--g-fs-title); font-weight: 800; line-height: 1; color: var(--text-2); }
/* 2026-10-16 区間6（関所F Q4 f）: 行の頭の絵は線の絵（views.js の lineIcon。前は 🔊 🎉 ⏱️ 🗑️ などの絵文字）。24px・線の色は紫1色
   （行は押せる物。右の › と同じ紫）。文字の大きさの「あ」（字のまま）も同じ紫にして、色の点を散らさない。 */
.dpg-set__icon { color: var(--accent); }
.dpg-set__icon .dpg-ico { display: block; width: 24px; height: 24px; }
/* 名前は語の途中で折らない（狭い画面でも「AI への依頼／文」にしない。空白と（ の手前で折る。入りきらない語だけは折る） */
.dpg-set__name,
.dpg-set__auto-name,
.dpg-set__title,
.dpg-set__pane-title { word-break: keep-all; overflow-wrap: anywhere; }
.dpg-set__name { min-width: 0; font-weight: 700; }
.dpg-set__value {
  display: inline-flex; align-items: center; gap: var(--g-s1); max-width: 12em; overflow: hidden;
  font-size: var(--g-fs-small); font-weight: 600; line-height: 1.4; color: var(--text-2); white-space: nowrap;
}
.dpg-set__chev { font-size: var(--g-fs-title); font-weight: 700; line-height: 1; color: var(--accent); }
/* 2026-10-16 後戻りの直し R7（設定を2倍に拡大した幅 187px で、1段目の行の名前の箱が幅0になり、右の値と重なった）: 行の幅が 240px 未満のときだけ、
   今の値を名前の下の段へ回し、› を右に残す（ふつうの幅の「名前・今の値・›」の1行は変えない）。値も折り返せるようにする。
   画面の幅ではなく行の幅（.dpg-set__item を入れ物にする）で決めるので、documentElement.style.zoom の拡大でも効く。
   tools/qa-ux-header-filter.mjs の「ホーム設定 ③ 文字が重ならない」（187px・大きめ）が見ている。 */
@container (max-width: 240px) {
  .dpg-set__row { grid-template-columns: calc(var(--set-icon) + var(--g-s1)) minmax(0, 1fr) auto; grid-template-areas: "icon name chev" "icon value chev"; padding: var(--g-s1) var(--g-s2); }
  .dpg-set__row > .dpg-set__icon { grid-area: icon; }
  .dpg-set__row > .dpg-set__name { grid-area: name; }
  .dpg-set__row > .dpg-set__value { grid-area: value; justify-self: start; flex-wrap: wrap; max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
  .dpg-set__row > .dpg-set__chev { grid-area: chev; }
}
/* 外枠の色の丸（色は mode-switch.css の --fc-… / 虹は .fc__rb の模様をそのまま使う） */
.dpg-set__swatch { flex: none; display: inline-block; width: 14px; height: 14px; border-radius: 50%; box-shadow: 0 0 0 1px var(--set-line); }
.dpg-set__swatch:not(.fc__rb) { background: var(--c, var(--accent)); }

/* 行はカードの角で切られないよう、輪を内側に描く */
:root[data-quiz-theme] .dpg-set :is(.dpg-set__row, .dpg-set__auto-row):focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; }
@media (hover: hover) {
  .dpg-set__row:hover,
  .dpg-set__auto-row:hover { background: var(--set-hover); }
}
/* PC で右に開いている項目（紫＝選択中） */
.dpg-set__row[aria-current="true"],
.dpg-set__auto-row[aria-current="true"] { background: var(--set-current); }
.dpg-set__row[aria-current="true"] .dpg-set__name,
.dpg-set__auto-row[aria-current="true"] .dpg-set__auto-name { color: var(--accent); }

/* キーの札の行はマウスの端末だけ（desktop-layout.css の .qz-key-hints-setting と同じ条件） */
.dpg-set__item--mouse { display: none; }
@media (hover: hover) and (pointer: fine) {
  .dpg-set__item--mouse { display: block; }
}

/* 「自動でやっていること（触らなくてOK）」の枠。白いカードと分けるため、地の色を変えて影は付けない。 */
.dpg-set__auto { padding: var(--g-s2) 0 var(--g-s1); border-radius: var(--g-radius); background: var(--set-auto-bg); }
.dpg-set__auto-title {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--g-s1);
  margin: 0; padding: 0 var(--g-s2) var(--g-s1);
  font-size: var(--g-fs-body); font-weight: 800; line-height: 1.4; color: var(--text);
}
.dpg-set__auto-sub { font-size: var(--g-fs-small); font-weight: 600; color: var(--text-2); }
.dpg-set__rows--auto > .dpg-set__item + .dpg-set__item::before { left: var(--g-s2); }
.dpg-set__auto-row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "name value" "note change"; align-items: baseline; gap: 0 var(--g-s2);
  width: 100%; min-height: calc(var(--g-s4) * 2); margin: 0; padding: var(--g-s1) var(--g-s2);
  border: 0; border-radius: 0; background: none; color: var(--text);
  font: inherit; text-align: left; cursor: pointer;
}
.dpg-set__auto-name { grid-area: name; min-width: 0; font-size: var(--g-fs-body); font-weight: 700; line-height: 1.4; }
/* 句のまとまりは入る幅では折らず、まとまりより狭い欄（187px・大きめ）では欄の中で折る（home-v3.css の .nobr と同じ。2026-10-20）。
   中はふつうの折り方に戻す（親の keep-all のままだと WebKit が「（」の直後で折り、括弧だけの行が残る）。 */
.dpg-set__nobr { display: inline-block; max-width: 100%; word-break: normal; }
.dpg-set__auto-value { grid-area: value; justify-self: end; font-size: var(--g-fs-small); font-weight: 600; color: var(--text-2); white-space: nowrap; }
.dpg-set__auto-note { grid-area: note; min-width: 0; font-size: var(--g-fs-small); line-height: 1.5; color: var(--text-2); }
/* 句に分けた説明（views.js の settingsAutoDefs）は <wbr> の所でだけ折る。句より狭い欄（187px）では句の中でも折り、はみ出さない。 */
.dpg-set__auto-note--phrases { word-break: keep-all; overflow-wrap: anywhere; }
.dpg-set__auto-change { grid-area: change; justify-self: end; font-size: var(--g-fs-small); font-weight: 700; color: var(--accent); white-space: nowrap; }

/* ---------- 2段目 ---------- */
.dpg-set__pane { display: flex; flex-direction: column; gap: var(--g-s2); min-width: 0; }
.dpg-set__pane-head { flex-direction: column; align-items: flex-start; justify-content: center; gap: 0; }
/* 「‹ 設定」＝3番手（文字のリンク）。押せる大きさは 48px。 */
.dpg-set__back {
  display: inline-flex; align-items: center; gap: var(--g-s1); min-height: var(--g-hit); margin: 0 0 0 calc(var(--g-s1) * -1); padding: 0 var(--g-s1);
  border: 0; border-radius: var(--g-radius-btn); background: none; color: var(--accent);
  font: inherit; font-size: var(--g-fs-body); font-weight: 700; line-height: 1; cursor: pointer;
}
.dpg-set__back-mark { font-size: var(--g-fs-title); line-height: 1; }
/* 2段目の上の行: 左に「‹ 設定」、右に［閉じる］（2026-10-15 区間4） */
/* 狭い幅（187px・文字「大きめ」）で出題中の⚙の「‹ 出題中の設定」と並ぶと［閉じる］がはみ出すので、入らないときは2行に折る（2026-10-21）。 */
.dpg-set__pane-nav { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--g-s2); align-self: stretch; }
:root[data-quiz-theme] .dpg-set .dpg-set__back:focus-visible { outline: 3px solid var(--accent); outline-offset: 0; }

/* ---------- 中の欄（2段目と出題中の⚙シートで同じ部品） ---------- */
/* カードは枠線をやめて白い面＋やわらかい影。項目の間の線は薄く。 */
:root[data-quiz-theme] :is(.dpg-set, .qz-quiz-settings__body) .qz-settings__card {
  padding: 0 var(--g-s2); border: 0; border-radius: var(--g-radius); background: var(--surface); box-shadow: var(--g-card-shadow);
}
:root[data-quiz-theme] :is(.dpg-set, .qz-quiz-settings__body) .qz-settings__card > * { padding: var(--g-s2) 0; }
:root[data-quiz-theme] :is(.dpg-set, .qz-quiz-settings__body) .qz-settings__card > * + * { border-top: 1px solid var(--set-line); }
/* 説明の1行（音量のすぐ下など）と音声解説の帯の見本は、前の項目にくっつけて読む（線を引かない）。2段にする前と同じ。 */
:root[data-quiz-theme] :is(.dpg-set, .qz-quiz-settings__body) .qz-settings__card > .qz-settings__note,
:root[data-quiz-theme] :is(.dpg-set, .qz-quiz-settings__body) .qz-settings__card > .set-preview { padding-top: 0; margin-top: calc(var(--g-s1) * -1); border-top: 0; }
/* マウスの端末でないとき、カードの先頭の「キーの札」は出ないので、その次を先頭として扱う（quiz.css と同じ考え。線を引かない） */
:root[data-quiz-theme] :is(.dpg-set, .qz-quiz-settings__body) .qz-settings__card > .qz-key-hints-setting:first-child + * { border-top: 0; }
@media (hover: hover) and (pointer: fine) {
  :root[data-quiz-theme] :is(.dpg-set, .qz-quiz-settings__body) .qz-settings__card > .qz-key-hints-setting:first-child + * { border-top: 1px solid var(--set-line); }
}

/* 文字は4段（見出し 22・本文とボタン 17・補足 14）。14px より小さくしない。 */
:root[data-quiz-theme] :is(.dpg-set, .qz-quiz-settings) .qz-settings__label { font-size: var(--g-fs-body); font-weight: 700; line-height: 1.4; color: var(--text); }
:root[data-quiz-theme] :is(.dpg-set, .qz-quiz-settings) .qz-settings__note { font-size: var(--g-fs-small); line-height: 1.6; color: var(--text-2); }
:root[data-quiz-theme] :is(.dpg-set, .qz-quiz-settings) .qz-settings__details > summary { font-size: var(--g-fs-small); font-weight: 700; color: var(--text-2); }
:root[data-quiz-theme] .qz-quiz-settings .qz-settings__heading { font-size: var(--g-fs-body); }
:root[data-quiz-theme] .qz-quiz-settings .qz-quiz-settings__title { font-size: var(--g-fs-title); }
:root[data-quiz-theme] :is(.dpg-set, .qz-quiz-settings) .dpg-sound-volume output { font-size: var(--g-fs-small); color: var(--text-2); }
/* 「自動」の札。緑をやめて、白い小さな札（触らなくてよい印。押せる物ではないので紫にもしない）。
   札は inline（quiz.css）なので、上下の余白で丸の高さを inline-block だった頃の 23px にそろえる（2026-10-20）。 */
:root[data-quiz-theme] .qz-settings__auto {
  padding: 3.5px var(--g-s1); border: 1px solid var(--set-line); border-radius: 999px;
  background: var(--set-badge-bg); color: var(--set-badge-ink); font-size: var(--g-fs-small); font-weight: 700;
}

/* 選ぶボタン（文字の大きさ・問題数・制限時間・外枠の色）。押せる大きさ 48px・文字 17px。選んでいる物は紫（今のまま）。 */
:root[data-quiz-theme] :is(.dpg-set, .qz-quiz-settings) .qz-pill,
:root[data-quiz-theme] :is(.dpg-set, .qz-quiz-settings) .qz-text-size__btn { min-height: var(--g-hit); font-size: var(--g-fs-body); }
:root[data-quiz-theme] :is(.dpg-set, .qz-quiz-settings) .qz-pills { gap: var(--g-s1); }
/* 選択肢の記号の4つ（2026-10-15 関所C・本人の Q1。2026-10-23 に冊ごと・数字・英字・文章だけの4つ。views.js の buildChoiceMarksGroup）。名前と（）を2行にして2つずつ2段に並べる
   （1行のままだと 390px では縦に積まれ、出題中の⚙シートが 1 欄で 140px ほど伸びる）。広い所でも 1 つを広げすぎない。 */
:root[data-quiz-theme] .qz-settings__choice-marks .qz-pills { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 440px; }
:root[data-quiz-theme] .qz-settings__choice-marks .qz-pill {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: var(--g-s1); line-height: 1.3; text-align: center;
}
:root[data-quiz-theme] .qz-settings__choice-marks :is(.qz-choice-marks__name, .qz-choice-marks__paren) { white-space: nowrap; }
/* 文字の大きさの3つは、17px にしても 390px で1行に収まるよう左右の余白だけ詰める */
:root[data-quiz-theme] :is(.dpg-set, .qz-quiz-settings) .qz-text-size__btn { gap: 4px; padding: var(--g-s1) 4px; }
/* 文字の大きさの見本の1行（2026-10-16 区間10。views.js の buildTextSizeGroup。設定の2段目と出題中の⚙シートで共通）。
   大きさは問題文と同じ（quiz.css・theme-dpg.css の .qz-question__stem: 小さめ 15px・標準 17px・大きめ 20px）。
   :root[data-quiz-text] で決めるので、選んだ直後（prefs.js が属性を替えた時点）に描き直しを待たずに変わる。
   クリームの地の面に置いて「問題の見本」と分かるようにする（線なし）。動きは足さない。 */
:root[data-quiz-theme] :is(.dpg-set, .qz-quiz-settings) .qz-text-size__preview {
  margin: var(--g-s1) 0 0; padding: var(--g-s1) var(--g-s2); border-radius: var(--g-radius-btn); overflow-wrap: anywhere;
  background: var(--bg); color: var(--text); font-size: 17px; font-weight: 400; line-height: 1.7;
}
:root[data-quiz-text="small"][data-quiz-theme] :is(.dpg-set, .qz-quiz-settings) .qz-text-size__preview { font-size: 15px; }
:root[data-quiz-text="large"][data-quiz-theme] :is(.dpg-set, .qz-quiz-settings) .qz-text-size__preview { font-size: 20px; }
:root[data-quiz-theme] .dpg-set .fc__face { min-height: var(--g-hit); font-size: var(--g-fs-body); }

/* 欄の中のボタン（音をカスタマイズ・依頼文を管理・キーの割り当てを編集・消音を解除・全ての記録を消す…・やめる）＝2番手（白地に紫の枠）。
   設定の中に紫の塗りは置かない（どの欄にも「これだけ押す」主役は無い）。 */
:root[data-quiz-theme] :is(.dpg-set, .qz-quiz-settings) .qz-settings__card :is(.qz-btn--ghost, .qz-btn--outline) {
  min-height: var(--g-hit); padding: 0 var(--g-s3);
  border: 1.5px solid var(--g-outline); border-radius: var(--g-radius-btn);
  background: var(--g-outline-bg); color: var(--accent);
  font-size: var(--g-fs-body); font-weight: 700; text-decoration: none;
}
:root[data-quiz-theme] :is(.dpg-set, .qz-quiz-settings) .qz-settings__card .qz-settings__group > .qz-btn:not(.qz-btn--block) { align-self: flex-start; }
:root[data-quiz-theme] :is(.dpg-set, .qz-quiz-settings) .qz-settings__card .qz-btn:disabled { opacity: .45; }
/* 「本当に全部消す」。赤をやめ、黒い枠と文字の白いボタン（紫の「やめる」と並べて、押す前に一度止まれる形）。
   塗りにしないのは quiz.css の .qz-btn--danger と同じ考え（カードの中で一番強いボタンを「消す」にしない）。 */
:root[data-quiz-theme] .dpg-set .qz-settings__card .qz-btn--danger {
  min-height: var(--g-hit); border: 1.5px solid var(--set-strong-line); border-radius: var(--g-radius-btn);
  background: var(--surface); color: var(--set-strong-line); font-size: var(--g-fs-body); font-weight: 800;
}
:root[data-quiz-theme] .dpg-set .qz-settings__reset { gap: var(--g-s1); }

/* ---------- スマホ: 1段目と2段目を入れ替える ---------- */
@media (max-width: 999.98px) {
  .dpg-set[data-pane-open="true"] > .dpg-set__list { display: none; }
  .dpg-set[data-pane-open="false"] > .dpg-set__pane { display: none; }
}

/* ---------- PC: 左に一覧、右に選んだ項目 ---------- */
@media (min-width: 1000px) {
  :root[data-quiz-theme] .qz-settings.dpg-set {
    display: grid; grid-template-columns: minmax(320px, 400px) minmax(0, 1fr); align-items: start;
    column-gap: var(--g-s4); max-width: 1040px;
  }
  /* 一覧が隣に見えているので「‹ 設定」は要らない（見出しだけ） */
  .dpg-set__back, .dpg-set__pane-close { display: none; }
  .dpg-set__pane { position: sticky; top: var(--g-s3); }
}

/* ---------- 動きを減らす設定のとき ----------
   設定の中では、スイッチのつまみ・押したときの縮みなどの動きを止める（新しい動きは足していない）。 */
@media (prefers-reduced-motion: reduce) {
  .dpg-set *, .dpg-set *::before, .dpg-set *::after,
  .qz-quiz-settings *, .qz-quiz-settings *::before, .qz-quiz-settings *::after { transition: none !important; animation: none !important; }
}

/* ===========================================================================
   出題中の⚙のシートを2段に（2026-10-21 本人「問題解く時の設定も階層構造的にわかりやすいUIで」。すり合わせ第3版の案F・H1）
   中身はホームの設定と同じ部品（.dpg-set__list・.dpg-set__pane）。スマホはシートの中で1段目と2段目を入れ替え、
   2段目ではシートの見出し（「出題中の設定」と［閉じる］）を隠して、2段目の「‹ 出題中の設定」と［閉じる］の行にする。
   PC（1000px 以上）は窓を約880pxに広げ、左に一覧・右に中身の2列。
   =========================================================================== */
.qz-quiz-set { display: flex; flex-direction: column; gap: var(--g-s2, 16px); min-width: 0; }
@media (max-width: 999.98px) {
  .qz-quiz-settings--tiers[data-pane-open="true"] > .qz-quiz-settings__head,
  .qz-quiz-settings--tiers[data-pane-open="true"] > .qz-quiz-settings__lead { display: none; }
  .qz-quiz-set[data-pane-open="true"] > .dpg-set__list { display: none; }
  .qz-quiz-set[data-pane-open="false"] > .dpg-set__pane { display: none; }
}
@media (min-width: 1000px) {
  :root[data-quiz-theme] .dpg-more-sheet.qz-quiz-settings--tiers:not(#_) { width: min(880px, 94vw); }
  .qz-quiz-set {
    display: grid; grid-template-columns: minmax(280px, 360px) minmax(0, 1fr); align-items: start;
    column-gap: var(--g-s4, 24px);
  }
  .qz-quiz-set .dpg-set__back, .qz-quiz-set .dpg-set__pane-close { display: none; }
  .qz-quiz-set .dpg-set__pane { position: sticky; top: 0; }
}