/* ---- 1) 解答後の2列は quiz.css の .qz-page--split が受け持つ（2026-10-06: 1440px 以上も同じ割り当て。右=次へ・みんなの解説・自分の解説・解説、左=問題・初心者カード・下の次へ。2026-10-07 に解説を右へ） ---- */
/* 2026-10-16 区間6（関所F Q4 d）: 出題は答える前から2列（.qz-page--before。右の列は案内の1行と「わからない」の箱 .qz-wait）。列の幅は dpg-answer.css の 7)、箱は quiz.css。 */

/* ---- 2) 選択肢の数字の札（マウスとキーボードの端末だけ。スマホ・iPhone では出ない） ---- */
/* 設定の「キーの札を表示」の行は、マウスの端末でないときは出さない（下の @media の中で出す） */
.qz-key-hints-setting { display: none; }
/* 2026-10-16 周8（批評役 PC「キーの丸文字がボタンの角に刺さって見える」）: 札はボタンの角（左上 -7px）に乗せるのをやめ、
   ボタンの中のラベルの後ろに小さなキーの形（角の丸い四角・下の線の影・14px・薄い色）で置く。選択肢の数字・見出しの E・選択肢の A〜D も同じ形。
   色は押す物の文字の色（currentColor）から薄めて作る（白地のボタンは薄い墨・紫、紫の塗りのボタンは薄い白）。キーの働き・出る条件は変えない。 */
@media (hover: hover) and (pointer: fine) {
  html.dpg-keys .qz-choices { counter-reset: dpgk; }
  html.dpg-keys .qz-choices > .qz-choice { counter-increment: dpgk; position: relative; }
  /* 選択肢の数字（記号の札を出さない形・5個目から）。選択肢の中の左（記号の札と同じ所）に並べる（.qz-choice は横並び・gap あり） */
  html.dpg-keys .qz-choices > .qz-choice::after {
    content: counter(dpgk);
    order: -1;
  }
  /* 記号の札（A〜D）がある形の5個目から: 左は記号の札なので、数字は右の端 */
  html.dpg-keys .qz-choices--marked > .qz-choice::after { order: 99; margin-left: auto; }
  /* 9個目より後ろと、答え合わせのあと（正解・不正解・薄く表示）には札を出さない */
  html.dpg-keys .qz-choices > .qz-choice:nth-child(n+10)::after,
  html.dpg-keys .qz-choices > .qz-choice--correct::after,
  html.dpg-keys .qz-choices > .qz-choice--wrong::after,
  html.dpg-keys .qz-choices > .qz-choice--dim::after { content: none; }

  /* ボタンの札（2026-10-06）。desktop-keys.js が押せるボタンに data-dpgk="F" を付ける。
     2026-10-16 周8: ::before（左上に重ねる）→ ::after（ラベルの後ろ。横並びのボタンは最後の並び、格子のボタンは1行目の右の列）。
     解説へ（E）の着地点の見出しだけは、周7 のまま字の前（::before）。 */
  html.dpg-keys [data-dpgk]:not(.qz-explain__head)::after { content: attr(data-dpgk); order: 99; margin-left: var(--g-s1, 8px); grid-row: 1; grid-column: -1 / span 1; align-self: center; justify-self: start; }
  html.dpg-keys .qz-explain__head[data-dpgk]::before { content: attr(data-dpgk); margin-right: var(--g-s1, 8px); }
  /* キーの形（上の3つで同じ見た目） */
  html.dpg-keys .qz-choices > .qz-choice::after,
  html.dpg-keys [data-dpgk]:not(.qz-explain__head)::after,
  html.dpg-keys .qz-explain__head[data-dpgk]::before {
    position: static;
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-width: 22px;
    height: 22px;
    padding: 0 4px;
    border: 1px solid color-mix(in srgb, currentColor 30%, transparent);
    border-radius: 6px;
    background: color-mix(in srgb, currentColor 5%, transparent);
    box-shadow: inset 0 -2px 0 color-mix(in srgb, currentColor 18%, transparent);
    color: color-mix(in srgb, currentColor 62%, transparent);
    font-family: inherit;
    font-size: var(--g-fs-small, 14px);
    font-weight: 700;
    font-style: normal;
    line-height: 1;
    letter-spacing: 0;
    text-align: center;
    text-decoration: none;
    text-transform: none;
    text-shadow: none;
    white-space: nowrap;
    vertical-align: middle;
    pointer-events: none;
  }
  /* 「わからないときは」の3つ（格子。正解のときは1行に3つで幅が 150px ほど）: 間は格子の間だけにして、名前（解説を聴く）を折り返さない。
     段が狭くて絵を名前の上に置く形（dpg-answer.css の 400px 未満）では、札をボタンの中の右上に置く（絵と名前に重ならない所）。 */
  html.dpg-keys .qz-help__btn[data-dpgk]::after { margin-left: 0; }
  html.dpg-keys .qz-page--answered .qz-help--compact .qz-help__btn[data-dpgk] { column-gap: 6px; }
  @container (max-width: 399.98px) {
    html.dpg-keys .qz-page--answered .qz-help--compact .qz-help__btn[data-dpgk] { position: relative; }
    html.dpg-keys .qz-page--answered .qz-help--compact .qz-help__btn[data-dpgk]::after { position: absolute; top: 4px; right: 4px; }
  }
  /* 2026-10-16 区間6の組み込み: PC の2列の右の列は 1280px で 400px（dpg-answer.css の 7)）。正解のときの1行の3つは段の幅 400〜459px だと
     1つが 128px ほどで、絵・名前・札（22px）が1行に入りきらず「解説を聴／く」と語の途中で折れる。この幅のときだけ札をボタンの中に出さない
     （C・P のキーは効いたまま。キー一覧（?）にも出る。599px 以下で札を出さないのと同じ考え方）。400px 未満（絵が上・札は右上）と
     460px 以上（名前の後ろ）、不正解のときの縦の3つ（幅いっぱい）は今までどおり札を出す。 */
  @container (min-width: 400px) and (max-width: 459.98px) {
    html.dpg-keys .qz-page--answered .qz-help--compact .qz-help__btn[data-dpgk]::after { content: none; }
  }
  /* 選択肢の記号の札（A〜D。dpg-answer.css の白地に線と下の影のキーの形）も、答える前は同じ角の丸い四角に（答えた後は今の丸のまま） */
  html.dpg-keys:not(.dpgk-hints-off) .qz-app[data-screen="quiz"] .qz-choices--marked > .qz-choice:not(:disabled):nth-child(-n+4) .qz-choice__mark:not(#_) { border-radius: 6px; }
  /* 設定の「キーの札を表示」をオフにしたら、ボタンの札も選択肢の数字の札も消す（キー操作は効いたまま）。 */
  html.dpgk-hints-off.dpg-keys .qz-choices > .qz-choice::after,
  html.dpgk-hints-off.dpg-keys [data-dpgk]::after,
  html.dpgk-hints-off.dpg-keys [data-dpgk]::before { content: none; }
  /* 解説へ（E）の札の着地点は解説カードの見出し（.qz-explain__head）。見出しはボタンと違って枠も内側の余白も無いので、
     左上に重ねると「解説」の字にかかる（2026-10-16 周7 批評役 PC）。見出しの札だけは重ねずに、字の前に並べる。
     開け閉めの見出し（中に押せるボタン）は横に並べる形にして、札をボタンの左に置く。キーの働きと札の文字は変えない。 */
  html.dpg-keys .qz-explain__head.qz-fold__head[data-dpgk] { display: flex; align-items: center; }
  html.dpg-keys .qz-explain__head.qz-fold__head[data-dpgk] > .qz-fold__btn { flex: 1 1 auto; min-width: 0; }
  /* 設定の行もマウスの端末だけに出す（札が出ない端末で切り替えても何も変わらないため） */
  .qz-key-hints-setting { display: block; }
}
/* 2026-10-16 周8: 札は ::after に移したので、599px 以下で出さない決まり（dpg-guide.css の 5)。そちらは ::before と選択肢の数字）をこちらでも足す。
   上の札の規則（:not(.qz-explain__head) などでクラス1つ分強い）に負けないよう :not(#_) で強める（体験ガイドの係「マウスで 390 を見ると F・C・P が出て結果の主ボタンが2行に」）。 */
@media (max-width: 599.98px) {
  html.dpg-keys [data-dpgk]:not(#_)::after,
  html.dpg-keys [data-dpgk]:not(#_)::before,
  html.dpg-keys .qz-choices > .qz-choice:not(#_)::after { content: none; }
}

/* ---- 3) キー一覧・探して開く・案内 ---- */
.dpgk-help,
.dpgk-palette {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 10vh 16px 16px;
  background: color-mix(in srgb, var(--text, #292622) 28%, transparent);
}
.dpgk-help__panel,
.dpgk-palette__panel {
  width: min(560px, 100%);
  max-height: 76vh;
  overflow: auto;
  border-radius: var(--r-lg, 24px);
  border: 1px solid var(--separator);
  background: var(--surface, #fff);
  color: var(--text, #292622);
  box-shadow: var(--shadow-card, 0 12px 32px rgba(0, 0, 0, .18));
  outline: none;
}
.dpgk-help__panel { padding: 20px 24px; width: min(760px, 100%); }

/* ヘルプの先頭のキーボードの図（2026-10-06）。幅が狭いときは viewBox ごと縮む。 */
.dpgk-kb { margin: 4px 0 8px; }
.dpgk-kb__svg { display: block; width: 100%; max-width: 100%; height: auto; }
.dpgk-kb__key rect { fill: var(--surface, #fff); stroke: var(--separator, #d9d2c8); stroke-width: 1.5; }
.dpgk-kb__key text { fill: var(--text-3, #8a7f73); font-weight: 700; }
.dpgk-kb__key.is-on rect { fill: var(--accent-soft, #efe7fb); stroke: var(--accent, #6535b5); stroke-width: 2; }
.dpgk-kb__key.is-on .dpgk-kb__cap { fill: var(--accent, #6535b5); font-weight: 800; }
.dpgk-kb__key.is-on .dpgk-kb__role { fill: var(--text, #292622); font-weight: 700; }
.dpgk-kb__note { margin: 6px 0 0; font-size: 13px; color: var(--text-3); }
.dpgk-help__title { margin: 0 0 8px; font-size: 18px; }
.dpgk-help__group { margin: 14px 0 6px; font-size: 14px; color: var(--text-3); }
.dpgk-help__list { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 0; }
.dpgk-help__list dt { margin: 0; }
.dpgk-help__list dd { margin: 0; font-size: 14px; }
.dpgk-help kbd {
  display: inline-block;
  padding: 1px 8px;
  border-radius: var(--r-sm, 10px);
  border: 1px solid var(--control-border, #ad8973);
  background: var(--bg, #fffcf7);
  font: inherit;
  font-size: 14px;
  font-weight: 700;
}
.dpgk-help__foot { margin: 14px 0 0; font-size: 14px; color: var(--text-3); }

.dpgk-palette__input {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 14px 18px;
  border: 0;
  border-bottom: 1px solid var(--separator);
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 16px;
  outline: none;
}
.dpgk-palette__list { list-style: none; margin: 0; padding: 6px; }
.dpgk-palette__item,
.dpgk-palette__empty { padding: 10px 12px; border-radius: var(--r-sm, 10px); font-size: 15px; }
.dpgk-palette__item { cursor: pointer; }
.dpgk-palette__item.is-active { background: var(--accent-soft, #efe7fb); color: var(--accent, #6535b5); font-weight: 700; }
.dpgk-palette__empty { color: var(--text-3); }

/* G の知らせ（app.js の askToast・2026-10-11 本人決定「直す」）。上の中央だと出題中のヘッダー（⚙ など）に重なり、
   知らせが出ている間は ⚙ を1回押しても知らせが消えるだけだった。押した操作は下へ素通りさせ、PC 幅では画面の右下へ出す。
   文言と消え方（次のキー・画面に触れたら消える）は app.js のまま。 */
.sw-toast[data-role="ask-toast"] { pointer-events: none; }
@media (hover: hover) and (pointer: fine) and (min-width: 900px) {
  /* 2026-10-16 すり合わせ f2 Q3（本人: 右下は答えた後の右の列のパネルの中のボタン（依頼文の切り替えなど）に重なる）:
     右下をやめ、上の帯（.qz-quiz-head）のすぐ下・帯と同じ幅へ。dpg-tabs.css の道具の知らせ（tool-toast）と同じ場所。
     値は G を押したとき desktop-keys.js の placeAskToast が帯の位置から <html> に入れる（無いときの top は 96px）。
     本文の字は今までどおり（長いときは2〜3行に折れる）。qa-desktop-browser の「G の知らせ」が重なり 0 を見ている。 */
  .sw-toast[data-role="ask-toast"] { top: var(--dpg-ask-toast-top, 96px); bottom: auto; left: var(--dpg-ask-toast-left, 16px); right: var(--dpg-ask-toast-right, 16px); transform: none; width: auto; }
}

.dpgk-hint {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 2147482000;
  padding: 8px 14px;
  border-radius: var(--r-pill, 999px);
  border: 1px solid var(--separator);
  background: var(--surface, #fff);
  color: var(--text-2, #65594d);
  box-shadow: var(--shadow-card, 0 6px 16px rgba(0, 0, 0, .12));
  font: inherit;
  font-size: 14px;
  cursor: pointer;
}

/* 殻（html.is-desktop）では「ホーム画面に追加」の案内を出さない（殻そのものがアプリなので） */
html.is-desktop .dpg-install { display: none !important; }

.dpgk-close { margin: 12px; }
.dpgk-help__panel .dpgk-close { margin: 14px 0 0; }
.dpgk-palette__input:focus-visible, .dpgk-help__panel:focus-visible { outline: 2px solid var(--accent); outline-offset: -3px; }
@media (max-width: 480px) {
  .dpgk-help__panel { padding: 16px; }
  .dpgk-help__list { grid-template-columns: 1fr; gap: 4px; }
  .dpgk-help__list dd { margin-bottom: 10px; }
  .dpgk-hint { font-size: 14px; bottom: calc(env(safe-area-inset-bottom, 0px) + 80px); }
}

/* キー設定は一覧から開く。狭い画面でも入力欄を押し出さない。 */
.dpgk-custom { margin-top: 16px; border-top: 1px solid var(--separator); padding-top: 12px; }
.dpgk-custom summary { cursor: pointer; font-weight: 600; }
.dpgk-custom p { font-size: 14px; overflow-wrap: anywhere; }
.dpgk-custom__fields { display: grid; gap: 8px; }
.dpgk-custom__fields label { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 14px; }
.dpgk-custom__fields input { width: 56px; min-width: 56px; padding: 8px; text-align: center; background: var(--surface); color: var(--text); border: 1px solid var(--control-border, #ad8973); border-radius: var(--r-sm, 10px); }
.dpgk-custom__buttons { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
/* G で開くときの依頼文（2026-10-11）。キーの欄の下に、2つから選ぶ丸ボタン。 */
.dpgk-ask { margin: 12px 0 0; padding: 10px 12px; border: 1px solid var(--separator); border-radius: var(--r-sm, 10px); display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.dpgk-ask legend { padding: 0 4px; font-size: 14px; font-weight: 600; }
.dpgk-ask label { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; cursor: pointer; }
.dpgk-ask input { width: 18px; height: 18px; accent-color: var(--accent, #7c3aed); }
.dpgk-ask__note { flex-basis: 100%; margin: 0; font-size: 13px; color: var(--text-2, var(--muted)); }
.dpgk-custom__status { min-height: 1.5em; }
/* 編集画面（⚙ の「キーの割り当てを編集」・2026-10-11）。G の依頼文が先頭、保存は上と下。上の知らせは下の role=status の写し */
.dpgk-custom--edit { margin-top: 0; border-top: 0; padding-top: 0; }
.dpgk-custom--edit .dpgk-ask { margin-top: 4px; }
.dpgk-custom__echo { margin: 6px 0 0; min-height: 1.2em; font-size: 14px; }
.dpgk-custom__echo:empty { display: none; }
.qz-key-hints-setting .qz-key-edit-btn { margin: 4px 0 8px; }

/* 2026-10-18 区間11 D2（決まりの外の案。関所で採否を聞く）: PC（1280px 以上）の本棚の一覧を2列にし、右に「今日」の列（views.js の buildTodayColumn）。
   左は今のホーム（紫のカード・勉強中の棚・資格を探す・自分の問題集）のまま。右の列は幅 320px の白いカード（上に留める）。
   列がある間は、紫のカードの白い主ボタン（今日の残り）と今日の復習のチップを隠す（同じ物を2か所に出さない。紫の塗りのボタンは列の1つだけ）。
   1280px 未満では列を出さない（スマホ・小さい PC は紫のカードの中のまま）。 */
.dpg-tcol{display:none}
@media (min-width:1280px){
  :root[data-quiz-theme=paper] .qz-app[data-screen=home] .qz-page.dpg-page--today{display:grid;grid-template-columns:minmax(0,1fr) 320px;column-gap:var(--g-s4,32px);align-items:start}
  :root[data-quiz-theme=paper] .qz-app[data-screen=home] .qz-page.dpg-page--today > :not(.dpg-tcol){grid-column:1}
  :root[data-quiz-theme=paper] .qz-app[data-screen=home] .qz-page.dpg-page--today > .dpg-tcol{grid-column:2;grid-row:1/span 2;position:sticky;top:var(--g-s3,24px);display:grid;gap:var(--g-s2,16px);margin-top:var(--g-s3,24px);padding:var(--g-s3,24px);border-radius:var(--g-radius,16px);background:var(--surface);box-shadow:var(--g-card-shadow)}
  .dpg-page--today .qz-header > .dpg-hc :is(.dpg-hc__go,.dpg-hc__due){display:none}
  /* 左の列が狭くなる分、「自分の問題集」の作る帯は絵と見出しの下に3つの入口を並べる（スマホの帯と同じ並び） */
  :root[data-quiz-theme=paper] .qz-app[data-screen=home] .dpg-page--today .dpg-home-create{grid-template-columns:auto minmax(0,1fr);grid-template-areas:"mascot main" "actions actions" "quota quota"}
  .dpg-tcol__title{margin:0;font-size:var(--g-fs-title,22px);font-weight:800;line-height:1.3;color:var(--text)}
  .dpg-tcol__go{display:grid;gap:2px;justify-items:start;width:100%;min-height:64px;padding:var(--g-s1,8px) var(--g-s2,16px);border:1px solid var(--g-primary-border);border-radius:var(--g-radius-btn,14px);background:var(--g-primary-fill);box-shadow:var(--g-primary-shadow);color:#fff;font:inherit;text-align:left;cursor:pointer}
  .dpg-tcol__go-label{font-size:var(--g-fs-body,17px);font-weight:800;line-height:1.35}
  .dpg-tcol__go-label b{font-size:var(--g-fs-title,22px)}
  .dpg-tcol__go-meta{font-size:var(--g-fs-small,14px);font-weight:600;line-height:1.45;color:#efe8ff;overflow-wrap:anywhere}
  .dpg-tcol__go:hover{filter:brightness(1.06)}
  .dpg-tcol__sub{display:grid;gap:2px;justify-items:start;width:100%;min-height:56px;padding:var(--g-s1,8px) var(--g-s2,16px);border:1.5px solid var(--accent);border-radius:var(--g-radius-btn,14px);background:var(--surface);color:var(--accent);font:inherit;text-align:left;cursor:pointer}
  .dpg-tcol__sub:hover{background:var(--accent-soft)}
  .dpg-tcol__sub-label{font-size:var(--g-fs-body,17px);font-weight:800;line-height:1.35}
  .dpg-tcol__sub-meta{font-size:var(--g-fs-small,14px);font-weight:600;line-height:1.45;color:var(--text-2);overflow-wrap:anywhere}
  .dpg-tcol__note{margin:0;font-size:var(--g-fs-small,14px);line-height:1.6;color:var(--text-2)}
  .dpg-tcol__goal{display:grid;gap:var(--g-s1,8px);padding-top:var(--g-s2,16px);border-top:1px solid var(--separator)}
  .dpg-tcol__goal-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px var(--g-s1,8px);margin:0;font-size:var(--g-fs-body,17px);color:var(--text)}
  .dpg-tcol__goal-head span{font-weight:800;color:var(--accent)}
  .dpg-tcol__bar{display:block;height:8px;border-radius:4px;background:var(--h-track,#e9e3f0);overflow:hidden}
  .dpg-tcol__bar i{display:block;height:100%;border-radius:4px;background:var(--accent)}
  .dpg-tcol__link{display:inline-flex;align-items:center;min-height:44px;font-size:var(--g-fs-small,14px);font-weight:700;color:var(--accent);text-decoration:underline;text-underline-offset:4px;overflow-wrap:anywhere}
  .dpg-tcol :is(.dpg-tcol__go,.dpg-tcol__sub,.dpg-tcol__link):focus-visible{outline:3px solid var(--accent);outline-offset:2px}
}