/* dpg-home.css — 関所B の試作（2026-10-15 Cowork）。dpg-guide.css の決まり（トークン）を使う。
   担当: ホーム（本棚の一覧）・資格を探す（シート）・棚の画面・「本番で解く／読んで覚える」の置き場所。
   T3 案1「今の色のまま、強弱の決まりを作る」:
     ・紫の塗りは1画面に1つ（ホームは紫のカード、棚の中は「次に解く1冊」の主ボタン）。2番手は白地に紫の枠、3番手以下は文字のリンク
     ・カードは線をやめて白い面＋やわらかい影（--g-card-shadow）
     ・文字は 40/22/17/14px の4段だけ（--g-fs-*）。余白は8の倍数（--g-s1〜5）。押す物は44px以上（--g-hit・--g-btn-h）
     ・紫＝押す物と選択中。赤と緑は正誤だけ（棚の「完了」も緑にしない）
   views.js の DOM（data-role・既存のクラス）は消していない。足したクラスは dpg- で始まる。
   home-v3.css・home-create.css・design/dpg/70-art.css（theme-dpg.css）の今の見た目に、この順で上書きする（index.html で最後の方に読む）。 */
:root{
  /* 進み具合のバーの残り（灰に少し紫）。完了の棚も紫のバーにする（緑は正解だけ） */
  --h-track:#e9e3f0;
  /* 紫のカードの上の白い道具（⚙・？・🔍）の影 */
  --h-tool-shadow:0 2px 8px rgb(42 11 122 / 20%);
  /* PC のホームの左右の余白（左の縦のメニューとの間）。前は 20px で窮屈だった */
  --h-pc-gutter:var(--g-s5,40px);
  /* 紫のカードの上の道具の大きさと、その3つぶんの幅（44px×3＋隙間8px×2）。「続きから」の字が道具の下に潜らないように空ける */
  --h-tool:44px;
  --h-tools-w:148px;
}

/* ===================================================================================
   0. 画面全体（ホームと棚の画面。#app[data-screen=home]）
   =================================================================================== */
:root[data-quiz-theme=paper] .qz-app[data-screen=home] .qz-page{gap:var(--g-s3,24px)}
:root[data-quiz-theme=paper] .qz-app[data-screen=home] .qz-header{gap:var(--g-s2,16px)}
:root[data-quiz-theme=paper] .qz-app[data-screen=home] .qz-solve-home,
:root[data-quiz-theme=paper] .qz-app[data-screen=home] .qz-practice-home{gap:var(--g-s3,24px)}

/* ===================================================================================
   1. ホーム（棚の一覧）の上: 紫のカード（続きから・⚙・？・🔍・今日の目安）とヒントの入れ物
   =================================================================================== */
:root[data-quiz-theme=paper] .qz-app[data-screen=home] .qz-header > .dpg-hc{gap:var(--g-s1,8px);padding:var(--g-s2,16px);align-content:space-between}
.qz-header > .dpg-hc > .dpg-hc__tools{top:var(--g-s2,16px);right:var(--g-s2,16px);gap:var(--g-s1,8px)}
/* 2026-10-16 区間6（関所F Q4 g）: 紫のカードの中で白く塗る面は「続きを解く」の札1つだけにする（評価役B「白い四角が5つあり、目が先に右上の四角へ行く」）。
   ⚙・？・🔍 は塗らない白い線の絵（views.js の lineIcon の gear・help と SEARCH_SVG。歯車は出題中の上の帯と同じ絵）。押せる大きさは 44px のまま、Tab の輪は白い実線（home-v3.css）のまま。
   マウスを載せた・開いている間だけ、白の薄い面（ほかの続きの行と同じ）を敷く */
:root[data-quiz-theme=paper] .qz-app[data-screen=home] .qz-header .dpg-hc__tool{width:var(--h-tool);height:var(--h-tool);background:none;box-shadow:none;color:var(--h-on-accent);font-size:var(--g-fs-title,22px)}
:root[data-quiz-theme=paper] .qz-app[data-screen=home] .qz-header .dpg-hc__tool .dpg-hc__tool-icon svg{width:24px;height:24px}
:root[data-quiz-theme=paper] .qz-app[data-screen=home] .qz-header .dpg-hc__tool:hover{background:var(--h-on-accent-panel-hover)}
:root[data-quiz-theme=paper] .qz-app[data-screen=home] .qz-header .dpg-hc__tool[aria-expanded="true"]{background:var(--h-on-accent-panel)}
/* 「今日の目安」も塗らない: 白い細い枠と白い字（押す所だと分かる枠は残す。行き先・data-role="home-goal" は今までどおり） */
:root[data-quiz-theme=paper] .qz-app[data-screen=home] .qz-header > .dpg-hc .dpg-today--chip{background:none;border:1.5px solid var(--h-on-accent-line);box-shadow:none;color:var(--h-on-accent)}
:root[data-quiz-theme=paper] .qz-app[data-screen=home] .qz-header > .dpg-hc .dpg-today--chip :is(.dpg-today__icon svg,.dpg-today__num){color:var(--h-on-accent)}
/* 前は「今日の目安」が墨・数が紫で分かれていた。白い字どうしでも読み分けられるよう、言葉は薄い白の細め・数は白の太字 */
:root[data-quiz-theme=paper] .qz-app[data-screen=home] .qz-header > .dpg-hc .dpg-today--chip b{color:var(--h-on-accent-soft);font-weight:600}
@media (hover:hover){:root[data-quiz-theme=paper] .qz-app[data-screen=home] .qz-header > .dpg-hc .dpg-today--chip:hover{background:var(--h-on-accent-panel-hover)}}
.qz-header > .dpg-hc .dpg-hc__kicker,
.qz-header > .dpg-hc .dpg-hc__empty{padding-right:calc(var(--h-tools-w) + var(--g-s1,8px))}
.qz-header > .dpg-hc .dpg-hc__kicker{font-size:var(--g-fs-small,14px)}
.qz-header > .dpg-hc .dpg-hc__title,
.qz-header > .dpg-hc .dpg-hc__empty{font-size:var(--g-fs-title,22px);line-height:1.35}
.qz-header > .dpg-hc .dpg-hc__meta{font-size:var(--g-fs-small,14px)}
.qz-header > .dpg-hc .dpg-today--chip b,
.qz-header > .dpg-hc .dpg-today--chip .dpg-today__num{font-size:var(--g-fs-small,14px)}
/* 道具が3つになったので、細い画面（320px 級）では「続きから」の字を道具の下の段へ下ろす（字が1字ずつ折れないように） */
@container (max-width:310px){
  .qz-header > .dpg-hc .dpg-hc__kicker{padding-right:0;margin-top:calc(var(--h-tool) + var(--g-s1,8px))}
  .qz-header > .dpg-hc .dpg-hc__empty{padding-right:0;margin-top:calc(var(--h-tool) + var(--g-s1,8px))}
  /* 資格名が「ITパス／ポート」と折れない大きさ（本文の大きさ）にする */
  .qz-header > .dpg-hc .dpg-hc__title{font-size:var(--g-fs-body,17px)}
}
/* 解きかけが無いときの「どれから解く？」は、道具の横に入りきらない幅（〜380px の画面）では本文の大きさにする */
@container (max-width:345px){
  .qz-header > .dpg-hc .dpg-hc__empty{font-size:var(--g-fs-body,17px)}
}
/* 「最近使った」（勉強中の棚がまだ無く、棚を開いた記録だけがあるとき。勉強中の棚があるときは勉強中の棚にまとめて出さない） */
.qz-header > .dpg-recent .dpg-recent__title{margin:0 0 var(--g-s1,8px);font-size:var(--g-fs-title,22px)}
.qz-header > .dpg-recent .dpg-recent__label{font-size:var(--g-fs-small,14px)}
/* 別の担当がヒントのカードを差し込む入れ物。空なら高さ0（格子の隙間も出さない） */
.dpg-hint-slot{min-width:0}
.dpg-hint-slot:empty{display:none}

/* ===================================================================================
   2. ホーム: 「勉強中の棚」「すべての資格」の見出し・棚の行・「資格を探す（24）」の行
   =================================================================================== */
:root[data-quiz-theme=paper] .qz-app[data-screen=home] .dpg-shelf-navigation .dpg-shelfhead{gap:var(--g-s1,8px) var(--g-s2,16px);margin:0}
:root[data-quiz-theme=paper] .qz-app[data-screen=home] .dpg-shelf-navigation .dpg-shelfhead h2{margin:0;font-size:var(--g-fs-title,22px);line-height:1.35}
:root[data-quiz-theme=paper] .qz-app[data-screen=home] .dpg-shelf-navigation .dpg-shelfhead p{font-size:var(--g-fs-small,14px);line-height:1.6;color:var(--text-2)}
:root[data-quiz-theme=paper] .qz-app[data-screen=home] .dpg-shelf-navigation:not(.dpg-shelf-navigation--open){display:grid;gap:var(--g-s2,16px)}
:root[data-quiz-theme=paper] .qz-app[data-screen=home] .dpg-shelf-navigation:not(.dpg-shelf-navigation--open) > .qz-link{justify-self:start}
/* 「＋ 本棚を作る」は2番手（白地に紫の枠） */
:root[data-quiz-theme=paper] .qz-app[data-screen=home] .dpg-mini{min-height:var(--g-hit,48px);padding:0 var(--g-s2,16px);border:1.5px solid var(--accent);background:var(--surface);color:var(--accent);font-size:var(--g-fs-small,14px)}
:root[data-quiz-theme=paper] .qz-app[data-screen=home] .dpg-mini:hover{background:var(--accent-soft)}
:root[data-quiz-theme=paper] .qz-app[data-screen=home] .dpg-mini__plus{font-size:var(--g-fs-body,17px)}
/* 見出しが h2 の焦点の受け皿（tabindex=-1）。輪は字の幅だけにする（横いっぱいの太い枠にしない） */
:root[data-quiz-theme=paper] .qz-app[data-screen=home] .dpg-shelf-navigation [data-role="shelf-title"]{width:fit-content;max-width:100%}
/* 周1: 棚の名前・勉強中の棚の見出しは読み上げの着地点（tabindex="-1"）で押せる物ではないので、枠を出さない（押せる箱に見えた） */
:root[data-quiz-theme=paper] .qz-app[data-screen=home] .dpg-shelf-navigation [data-role="shelf-title"]:is(:focus,:focus-visible){outline:none}

/* 分野の段（全部の棚の一覧・シートの中） */
:root[data-quiz-theme=paper] .qz-app[data-screen=home] .dpg-shelf-groups,
.dpg-search .dpg-shelf-groups{margin:0;gap:var(--g-s3,24px)}
:root[data-quiz-theme=paper] .qz-app[data-screen=home] .dpg-shelf-group__title,
.dpg-search .dpg-shelf-group__title{min-height:0;margin:0 0 var(--g-s1,8px);padding:0 4px;font-size:var(--g-fs-body,17px);line-height:1.4}

/* 棚の行（buildShelfRow）: 線をやめて白い面＋やわらかい影 */
.dpg-rows{gap:var(--g-s1,8px)}
:root[data-quiz-theme=paper] .dpg-row{min-height:80px;column-gap:var(--g-s2,16px);padding:12px var(--g-s2,16px) 12px 12px;border:0;border-radius:var(--g-radius,16px);background:var(--surface);box-shadow:var(--g-card-shadow);transition:box-shadow var(--dur-fast,140ms) ease-out}
@media (hover:hover){:root[data-quiz-theme=paper] .dpg-row:hover{background:var(--surface);box-shadow:var(--g-card-shadow-lift)}}
:root[data-quiz-theme=paper] .dpg-row__title{font-size:var(--g-fs-body,17px)}
:root[data-quiz-theme=paper] .dpg-row__meta{font-size:var(--g-fs-small,14px)}
:root[data-quiz-theme=paper] .dpg-row__prog--none{font-size:var(--g-fs-small,14px);color:var(--text-2)}
:root[data-quiz-theme=paper] .dpg-row__prog-text{font-size:var(--g-fs-small,14px)}
:root[data-quiz-theme=paper] .dpg-row__bar{height:8px;background:var(--h-track)}
/* 完了も紫のバー（緑は正解だけに使う）。字は濃い色の太字で「完了」と読ませる */
:root[data-quiz-theme=paper] .dpg-row__prog--done .dpg-row__bar-fill{background:var(--accent)}
:root[data-quiz-theme=paper] .dpg-row__prog--done .dpg-row__prog-text{color:var(--text);font-weight:800}
:root[data-quiz-theme=paper] .dpg-row .dpg-row__ribbon>span{font-size:var(--g-fs-small,14px)}
/* 2026-10-16 後戻りの直し R7（設定を2倍に拡大した幅 187px で、ホームの本棚の行の title・meta・進み具合・ribbon が右へ 7px はみ出し、ページの scrollWidth が 194 になった）:
   本文の箱（.dpg-row__body）の列は幅の決まらない暗黙の列で、中の「Part2〜6 有料」の札の幅（92px）に広がっていた。列を行の幅で縮められるようにする（ふつうの幅は変わらない）。
   さらに上の余白・隙間で本文の列が 11px まで潰れるので、行の並びの幅が 240px 未満のときだけ、表紙と › を1段目・本文を2段目に積む
   （画面の幅ではなく並びの幅で決めるので、documentElement.style.zoom の拡大でも効く）。
   tools/qa-ux-header-filter.mjs の「ページは横にはみ出さない」と「本棚の進み具合 ③」（187px）が見ている。 */
.dpg-row__body{grid-template-columns:minmax(0,1fr)}
.dpg-rows{container-type:inline-size}
@container (max-width:240px){
  :root[data-quiz-theme=paper] .dpg-row{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"cover chev" "body body";row-gap:var(--g-s1,8px);padding:var(--g-s1,8px) var(--g-s2,16px) var(--g-s2,16px) var(--g-s1,8px)}
  :root[data-quiz-theme=paper] .dpg-row > .dpg-row__cover{grid-area:cover}
  :root[data-quiz-theme=paper] .dpg-row > .dpg-row__body{grid-area:body}
  :root[data-quiz-theme=paper] .dpg-row > .dpg-row__chev{grid-area:chev}
}

/* 「資格を探す（24）」の行: 棚の行と同じ形で、2番手（白地に紫の枠）。左に虫めがね */
.dpg-findrow{display:grid;grid-template-columns:56px minmax(0,1fr) auto;align-items:center;column-gap:var(--g-s2,16px);width:100%;min-width:0;min-height:80px;margin:0;padding:12px var(--g-s2,16px) 12px 12px;border:1.5px solid var(--accent);border-radius:var(--g-radius,16px);background:var(--surface);color:var(--text);font:inherit;text-align:left;cursor:pointer}
@media (hover:hover){.dpg-findrow:hover{background:var(--accent-soft)}}
.dpg-findrow:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.dpg-findrow__icon{display:grid;place-items:center;width:56px;height:56px;border-radius:12px;background:var(--accent-soft);color:var(--accent)}
.dpg-findrow__icon svg{display:block;width:26px;height:26px}
.dpg-findrow__body{display:grid;gap:2px;min-width:0}
.dpg-findrow__title{font-size:var(--g-fs-body,17px);font-weight:800;line-height:1.35;color:var(--accent)}
.dpg-findrow__meta{font-size:var(--g-fs-small,14px);line-height:1.4;color:var(--text-2);overflow-wrap:anywhere}
/* 勉強中の棚の行の後ろ（同じ格子の最後のマス）。スマホは1列なので、棚の行との間を少しだけ空けて別の物だと分かるようにする */
.dpg-rows--studying > .dpg-findrow{margin-top:var(--g-s1,8px)}

/* 「自分の問題集」の段（勉強中の棚があるホームの下）: 自分の棚の行 → 「問題集を作る」の帯 → 「＋ 本棚を作る」「招待された問題集」 */
.dpg-home-own{display:grid;gap:var(--g-s2,16px);min-width:0;margin-top:var(--g-s2,16px)}
:root[data-quiz-theme=paper] .qz-app[data-screen=home] .qz-page .dpg-home-own > .dpg-home-create{margin:0}
:root[data-quiz-theme=paper] .qz-app[data-screen=home] .dpg-shelf-navigation .dpg-home-own__title{margin:0;font-size:var(--g-fs-title,22px);line-height:1.35}
.dpg-home-own__links{display:flex;flex-wrap:wrap;align-items:center;gap:var(--g-s1,8px) var(--g-s3,24px)}
:root[data-quiz-theme=paper] .qz-app[data-screen=home] .dpg-home-own__links .dpg-mini{order:0;margin-left:0}
.dpg-home-own .dpg-shelf-actions{margin:0}

/* 「問題集を作る」のタイル（スマホ。全部の棚の一覧の分野「自分の問題集」の段）: 白い面＋影。3つの入口は2番手（白地に紫の枠） */
:root[data-quiz-theme=paper] .qz-app[data-screen=home] .dpg-maketile{width:auto;max-width:none;aspect-ratio:auto;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--g-s1,8px);padding:var(--g-s2,16px);border:0;border-radius:var(--g-radius,16px);background:var(--surface);box-shadow:var(--g-card-shadow)}
:root[data-quiz-theme=paper] .qz-app[data-screen=home] .dpg-maketile p{grid-column:1/-1;margin:0;text-align:left;font-size:var(--g-fs-body,17px);font-weight:800;color:var(--accent)}
:root[data-quiz-theme=paper] .qz-app[data-screen=home] .dpg-maketile__btn{flex-direction:column;justify-content:center;gap:4px;min-height:64px;padding:8px 2px;border:1.5px solid var(--accent);border-radius:var(--g-radius-btn,14px);background:var(--surface);color:var(--accent);font-size:var(--g-fs-small,14px);text-align:center;letter-spacing:0}
:root[data-quiz-theme=paper] .qz-app[data-screen=home] .dpg-maketile__btn:hover{background:var(--accent-soft)}
:root[data-quiz-theme=paper] .qz-app[data-screen=home] .dpg-maketile__btn--locked{grid-column:1/-1;flex-direction:row}
:root[data-quiz-theme=paper] .qz-app[data-screen=home] .dpg-maketile__icon{background:var(--accent)}
:root[data-quiz-theme=paper] .qz-app[data-screen=home] .dpg-maketile__quota{font-size:var(--g-fs-small,14px)}

/* 「ほかのこと…」は3番手（文字のリンク） */
:root[data-quiz-theme=paper] .qz-app[data-screen=home] .dpg-home-more{font-size:var(--g-fs-small,14px)}

/* ===================================================================================
   3. 「問題集を作る」の帯: 2番手の白い面。置き場所は views.js が決める
      ・全部の棚を並べるホーム（勉強中の棚がまだ無い）… PC は紫のカードの右（スマホは隠して分野の段のタイル）
      ・勉強中の棚があるホーム … 下の「自分の問題集」の段（スマホも PC も）
      ・棚の画面 … 冊の並びの下
   =================================================================================== */
:root[data-quiz-theme=paper] .qz-app[data-screen=home] .qz-page .dpg-home-create{border:0;border-radius:var(--g-radius,16px);background:var(--surface);box-shadow:var(--g-card-shadow);padding:var(--g-s2,16px);column-gap:var(--g-s2,16px);row-gap:var(--g-s2,16px)}
:root[data-quiz-theme=paper] .qz-app[data-screen=home] .qz-page .dpg-home-create::after{display:none}
/* 「＋」の印は塗らない（紫の塗りは1画面に1つ） */
:root[data-quiz-theme=paper] .qz-app[data-screen=home] .qz-page .dpg-home-create__mark{background:var(--accent-soft);color:var(--accent);box-shadow:none}
:root[data-quiz-theme=paper] .qz-app[data-screen=home] .qz-page .dpg-home-create__label{font-size:var(--g-fs-title,22px);color:var(--accent)}
:root[data-quiz-theme=paper] .qz-app[data-screen=home] .qz-page .dpg-home-create__sub{font-size:var(--g-fs-small,14px)}
:root[data-quiz-theme=paper] .qz-app[data-screen=home] .qz-page .dpg-home-create__actions{padding:0;gap:var(--g-s1,8px);background:none}
:root[data-quiz-theme=paper] .qz-app[data-screen=home] .qz-page .dpg-home-create__action{min-height:64px;padding:8px 4px;border:1.5px solid var(--accent);border-radius:var(--g-radius-btn,14px);background:var(--surface);color:var(--accent);font-size:var(--g-fs-small,14px)}
:root[data-quiz-theme=paper] .qz-app[data-screen=home] .qz-page .dpg-home-create__action:hover{background:var(--accent-soft)}
:root[data-quiz-theme=paper] .qz-app[data-screen=home] .qz-page .dpg-home-create__icon{background:var(--accent)}
:root[data-quiz-theme=paper] .qz-app[data-screen=home] .qz-page .dpg-home-create__quota{background:var(--accent-soft);font-size:var(--g-fs-small,14px);color:var(--text-2)}
/* スマホのホーム（全部の棚を並べる形）では上の帯を隠す。同じ入口は分野の段「自分の問題集」のタイル（shelf-create-*）が担う */
@media (max-width:1023.98px){
  :root[data-quiz-theme=paper] .qz-app[data-screen=home] .qz-header:has(> .dpg-hc) > .dpg-home-create{display:none}
}
/* 棚の画面の帯（冊の並びの下）。上の余白は並びの間隔（24px）に任せる */
:root[data-quiz-theme=paper] .qz-app[data-screen=home] .qz-solve-home > .dpg-home-create{margin:0}

/* ===================================================================================
   4. 「資格を探す」のシート（🔍 と「資格を探す（24）」の行から開く。body の直下）
   =================================================================================== */
.dpg-search__sheet{width:min(720px,100%);max-height:min(88vh,100%);gap:var(--g-s2,16px);padding:calc(var(--g-s2,16px) + env(safe-area-inset-top,0px)) var(--g-s2,16px) var(--g-s2,16px);background:var(--bg)}
.dpg-search__input{min-height:var(--g-hit,48px);font-size:var(--g-fs-body,17px)}
.dpg-search__close{min-height:var(--g-hit,48px);font-size:var(--g-fs-body,17px)}
.dpg-search__status{font-size:var(--g-fs-small,14px)}
.dpg-search__status--empty{font-size:var(--g-fs-body,17px)}
.dpg-search .dpg-shelf-filter{margin:0}
.dpg-search .dpg-shelf-filter[hidden]{display:none}
.dpg-search .dpg-chip{min-height:var(--g-hit,48px);border:2px solid var(--separator);font-size:var(--g-fs-small,14px)}
/* 選んでいるチップは、棚の画面のタブ・周回と同じ「薄い紫＋紫の枠」（紫の塗りにしない） */
.dpg-search .dpg-chip[aria-pressed="true"]{border-color:var(--accent);background:var(--accent-soft);color:var(--accent)}
.dpg-search .dpg-shelf-filter__count{font-size:var(--g-fs-small,14px)}
/* 一覧はシートの中で縦に流れる（行の高さを潰さない）。焦点の輪が切れないように内側に少し余白 */
.dpg-search__list{display:grid;align-content:start;grid-auto-rows:max-content;flex:1 1 auto;min-height:0;margin:0 -4px;padding:4px}
.dpg-search__list.dpg-search__list--groups{display:block}
.dpg-search .dpg-row{min-height:80px}

/* ===================================================================================
   5. 棚の画面（棚を開いたあと）: 1画面目（390x844）に最初の冊の「はじめる」が入るように詰める
   =================================================================================== */
/* 「本番で解く／読んで覚える」（タブ）と ⚙ を1行に並べる（前は ⚙ が1行・タブが1行・作る帯が約250px） */
:root[data-quiz-theme=paper] .qz-app[data-screen=home] .qz-header:has(> .qz-home-cards):has(> .dpg-topline--gear){grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:var(--g-s1,8px);margin-top:var(--g-s1,8px)}
:root[data-quiz-theme=paper] .qz-app[data-screen=home] .qz-header:has(> .dpg-topline--gear) > .qz-home-cards{grid-column:1;grid-row:1;margin:0}
:root[data-quiz-theme=paper] .qz-app[data-screen=home] .qz-header:has(> .qz-home-cards) > .dpg-topline--gear{grid-column:2;grid-row:1}
/* タブは「選んでいる方だけ薄い紫＋紫の枠」の切り替え（塗りのボタンにしない。紫の塗りは冊の主ボタンに残す） */
:root[data-quiz-theme=paper] .qz-app[data-screen=home] .qz-header > .qz-home-cards > .qz-home-tabs{display:grid;grid-template-columns:1fr 1fr;gap:4px;height:auto;max-width:480px;margin:0;padding:4px;border:0;border-radius:var(--g-radius,16px);background:var(--surface);box-shadow:var(--g-card-shadow)}
:root[data-quiz-theme=paper] .qz-app[data-screen=home] .qz-header > .qz-home-cards > .qz-home-tabs .qz-home-tab{display:flex;align-items:center;justify-content:center;gap:0;min-width:0;min-height:var(--g-hit,48px);height:auto;padding:4px var(--g-s1,8px);border:2px solid transparent;border-radius:12px;background:none;box-shadow:none;color:var(--text-2);text-align:center}
:root[data-quiz-theme=paper] .qz-app[data-screen=home] .qz-header > .qz-home-cards > .qz-home-tabs .qz-home-tab__body{flex:0 1 auto}
:root[data-quiz-theme=paper] .qz-app[data-screen=home] .qz-header > .qz-home-cards > .qz-home-tabs .qz-home-tab__title{font-size:var(--g-fs-body,17px);line-height:1.3;color:inherit}
:root[data-quiz-theme=paper] .qz-app[data-screen=home] .qz-header > .qz-home-cards > .qz-home-tabs .qz-home-tab__icon,
:root[data-quiz-theme=paper] .qz-app[data-screen=home] .qz-header > .qz-home-cards > .qz-home-tabs .qz-home-tab__desc{display:none}
:root[data-quiz-theme=paper] .qz-app[data-screen=home] .qz-header > .qz-home-cards > .qz-home-tabs .qz-home-tab[aria-selected="true"]{border-color:var(--accent);background:var(--accent-soft);color:var(--accent);box-shadow:none}
:root[data-quiz-theme=paper] .qz-app[data-screen=home] .qz-header > .qz-home-cards > .qz-home-tabs .qz-home-tab[aria-selected="true"] .qz-home-tab__title{color:var(--accent)}
:root[data-quiz-theme=paper] .qz-app[data-screen=home] .qz-header > .qz-home-cards > .qz-home-tabs .qz-home-tab:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
/* ⚙ はタブの箱と同じ高さの白い四角 */
:root[data-quiz-theme=paper] .qz-app[data-screen=home] .qz-header > .dpg-topline--gear .qz-header__gear{width:56px;height:56px;border:0;border-radius:var(--g-radius,16px);background:var(--surface);box-shadow:var(--g-card-shadow);font-size:var(--g-fs-title,22px)}
:root[data-quiz-theme=paper] .qz-app[data-screen=home] .qz-header > .dpg-topline--gear .qz-header__gear:hover{background:var(--accent-soft)}

/* 棚の見出し: 小さい表紙を左に、右に「← 本棚の一覧」・資格名・冊数（表紙は横に小さく。前は回り込みの float） */
:root[data-quiz-theme=paper] .qz-app[data-screen=home] .dpg-shelf-navigation--open{display:grid;grid-template-columns:auto minmax(0,1fr);grid-auto-flow:row dense;align-items:center;column-gap:var(--g-s2,16px);row-gap:0}
:root[data-quiz-theme=paper] .qz-app[data-screen=home] .dpg-shelf-navigation--open > *{grid-column:1/-1;min-width:0}
:root[data-quiz-theme=paper] .qz-app[data-screen=home] .dpg-shelf-navigation--open > .qz-book-cover{grid-column:1;grid-row:span 3;align-self:start;float:none;width:56px;margin:4px 0 0}
:root[data-quiz-theme=paper] .qz-app[data-screen=home] .dpg-shelf-navigation--open > .qz-book-cover[hidden]{display:none}
:root[data-quiz-theme=paper] .qz-app[data-screen=home] .dpg-shelf-navigation--open > [data-role="shelf-back"],
:root[data-quiz-theme=paper] .qz-app[data-screen=home] .dpg-shelf-navigation--open > [data-role="collection-back"],
:root[data-quiz-theme=paper] .qz-app[data-screen=home] .dpg-shelf-navigation--open > h2,
:root[data-quiz-theme=paper] .qz-app[data-screen=home] .dpg-shelf-navigation--open > p{grid-column:2;justify-self:start}
:root[data-quiz-theme=paper] .qz-app[data-screen=home] .dpg-shelf-navigation--open > .qz-link{min-height:var(--h-tool);padding:0;font-size:var(--g-fs-small,14px);font-weight:700;color:var(--accent)}
:root[data-quiz-theme=paper] .qz-app[data-screen=home] .dpg-shelf-navigation--open > h2{margin:0;font-size:var(--g-fs-title,22px);line-height:1.35}
:root[data-quiz-theme=paper] .qz-app[data-screen=home] .dpg-shelf-navigation--open > p{margin:2px 0 0;font-size:var(--g-fs-small,14px);line-height:1.5;color:var(--text-2)}
/* 棚の上の「続きから」「間違えた問題」「まとめ…」: 2番手（白地に紫の枠） */
:root[data-quiz-theme=paper] .qz-app[data-screen=home] .dpg-shelf-navigation--open > .dpg-entry{gap:var(--g-s1,8px);margin:var(--g-s2,16px) 0 0}
:root[data-quiz-theme=paper] .qz-app[data-screen=home] .dpg-entry button{min-height:var(--g-hit,48px);padding: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-size:var(--g-fs-body,17px)}
:root[data-quiz-theme=paper] .qz-app[data-screen=home] .dpg-entry button:hover{background:var(--accent-soft)}

/* 周回（1〜3周目）: 冊の上のまま（「何周目を見ているか」が見えるように）。白い切り替え、選んだ周だけ薄い紫＋紫の枠 */
:root[data-quiz-theme=paper] .qz-app[data-screen=home] .qz-round-selector{gap:var(--g-s1,8px);padding:0}
:root[data-quiz-theme=paper] .qz-app[data-screen=home] .qz-round-selector__label{font-size:var(--g-fs-small,14px);font-weight:700;color:var(--text-2)}
:root[data-quiz-theme=paper] .qz-app[data-screen=home] .qz-round-selector__option{min-height:var(--h-tool);border:2px solid transparent;background:var(--surface);box-shadow:var(--g-card-shadow);color:var(--text-2);font-size:var(--g-fs-small,14px);font-weight:700}
:root[data-quiz-theme=paper] .qz-app[data-screen=home] .qz-round-selector__option[aria-pressed="true"]{border-color:var(--accent);background:var(--accent-soft);color:var(--accent)}

/* 冊のカード: 線をやめて白い面＋影。題は見出しの大きさ、数字は補足の大きさ */
:root[data-quiz-theme=paper] .qz-app[data-screen=home] .qz-set-list{gap:var(--g-s2,16px)}
/* 棚の中のまとまり（簿記3級の「仕訳」「表の問題」「模擬試験」。views.js の setGroups。2026-10-23）: 見出しは系統の見出しと同じクラス。まとまりの間だけ空ける */
.dpg-set-group + .dpg-set-group{margin-top:var(--g-s3,24px)}
:root[data-quiz-theme=paper] .qz-app[data-screen=home] .qz-set-card{gap:var(--g-s1,8px);padding:var(--g-s3,24px);border:0;border-radius:var(--g-radius,16px);background:var(--surface);box-shadow:var(--g-card-shadow)}
:root[data-quiz-theme=paper] .qz-app[data-screen=home] .qz-set-card--empty{border:1.5px dashed var(--separator);background:none;box-shadow:none}
:root[data-quiz-theme=paper] .qz-app[data-screen=home] .qz-set-card > .dpg-theme-scene:empty{display:none}
:root[data-quiz-theme=paper] .qz-app[data-screen=home] .qz-set-card__title{margin:0;font-size:var(--g-fs-title,22px);line-height:1.35}
:root[data-quiz-theme=paper] .qz-app[data-screen=home] .qz-set-card__meta,
:root[data-quiz-theme=paper] .qz-app[data-screen=home] .qz-set-card__wrong,
:root[data-quiz-theme=paper] .qz-app[data-screen=home] .qz-set-card__breakdown,
:root[data-quiz-theme=paper] .qz-app[data-screen=home] .qz-set-card__locked,
:root[data-quiz-theme=paper] .qz-app[data-screen=home] .qz-set-card__round{margin:0;font-size:var(--g-fs-small,14px)}
:root[data-quiz-theme=paper] .qz-app[data-screen=home] .qz-set-card .qz-btn{min-height:var(--g-btn-h,52px);border-radius:var(--g-radius-btn,14px);font-size:var(--g-fs-body,17px)}
/* 主ボタン（はじめる／続きから）の上は少し空ける（題と数字のかたまりから離す） */
:root[data-quiz-theme=paper] .qz-app[data-screen=home] .qz-set-card > .qz-btn--primary{margin-top:var(--g-s1,8px)}
/* 2番手: 白地に紫の枠（未挑戦の問題だけ・練習の続き・復習・まとめて学ぶ…） */
:root[data-quiz-theme=paper] .qz-app[data-screen=home] .qz-set-card .qz-btn--outline:not(:disabled){border:1.5px solid var(--accent);background:var(--surface);color:var(--accent)}
:root[data-quiz-theme=paper] .qz-app[data-screen=home] .qz-set-card .qz-btn--outline:not(:disabled):hover{background:var(--accent-soft)}
/* 3番手: 文字のリンク（設定を変える・まとめて復習・この練習をやめる…）。押せる高さは保つ */
:root[data-quiz-theme=paper] .qz-app[data-screen=home] .qz-set-card .qz-btn--ghost{min-height:var(--g-hit,48px);padding:4px var(--g-s1,8px);border:0;background:none;box-shadow:none;color:var(--accent);font-weight:700;text-decoration:underline;text-underline-offset:4px}
/* 記録を消す入口は目立たせない（文字のリンクのまま、色を落とす） */
:root[data-quiz-theme=paper] .qz-app[data-screen=home] .qz-set-card .qz-set-card__reset,
:root[data-quiz-theme=paper] .qz-app[data-screen=home] .qz-set-card .qz-practice-home__reset{margin-top:var(--g-s1,8px);padding-top:var(--g-s2,16px);border-top:1px solid var(--separator);border-radius:0;color:var(--text-2);font-size:var(--g-fs-small,14px);font-weight:600}
/* 「読んで覚える（答えを先に読む）」: 主ボタンのすぐ下の文字のリンク（3番手） */
:root[data-quiz-theme=paper] .qz-app[data-screen=home] .qz-set-card .dpg-set-practice{justify-content:center;min-height:var(--g-hit,48px);padding:0 var(--g-s1,8px);font-size:var(--g-fs-body,17px);font-weight:700;color:var(--accent);text-underline-offset:4px}
/* 練習のカードの「理解した N/M問」（出題中の進み具合と同じ部品）。カードの中では枠を外して、題の下の1行＋細いバーにする */
:root[data-quiz-theme=paper] .qz-app[data-screen=home] .qz-set-card > .qz-progress-row{padding:0;border:0;border-radius:0;background:none;box-shadow:none}
:root[data-quiz-theme=paper] .qz-app[data-screen=home] .qz-set-card > .qz-progress-row .qz-progress-label{font-size:var(--g-fs-small,14px)}
:root[data-quiz-theme=paper] .qz-app[data-screen=home] .qz-set-card > .qz-progress-row .qz-progress-bar{height:8px;margin-top:var(--g-s1,8px);background:var(--h-track)}
/* 「この問題集について」と出典の行（補足） */
:root[data-quiz-theme=paper] .qz-app[data-screen=home] .qz-set-card__about-toggle{font-size:var(--g-fs-small,14px)}
:root[data-quiz-theme=paper] .qz-app[data-screen=home] .qz-set-card__about-line,
:root[data-quiz-theme=paper] .qz-app[data-screen=home] .qz-set-card__about-desc{font-size:var(--g-fs-small,14px);line-height:1.6}
:root[data-quiz-theme=paper] .qz-app[data-screen=home] .qz-set-card__actions{margin-top:var(--g-s1,8px);padding-top:var(--g-s2,16px)}
/* 同梱の冊の出典の1行（views.js の buildDeckSource）: カードのいちばん下に、薄い色の小さな字（12px）で。線で区切らない（2026-10-18 本人「1番下に小さく」） */
:root[data-quiz-theme=paper] .qz-app[data-screen=home] .qz-set-card__source{margin:var(--g-s1,8px) 0 0;color:var(--text-2);font-size:12px;line-height:1.5;overflow-wrap:anywhere}
/* 2026-10-15 周4（批評役「出典文・この問題集について・読んで覚えるが各カードに毎回並び、縦に長い」）:
   ・棚の冊がみな同じ出典のときは、1回だけ出す（views.js の sharedLicenseLine → .dpg-shelf-source）
     2026-10-16 関所E（本人 p7「先頭に置くのは良くない。下に置いて」）: 冊の並びの前から、冊のカードの並びの直後へ移した。
     並びの間（.qz-solve-home の gap 24px）から上だけ 8px 詰め、冊のカードとの間 16px・下の帯（問題集を作る）との間 24px にして、
     冊の注として読めるようにする。14px の小さな文字のまま
   ・「読んで覚える（答えを先に読む）」は消さずに小さな1行（本人決定: 冊のカードに置く）
   ・「この問題集について」はカードの下の小さな文字リンク（色を落とす。押せる高さ 44px は保つ） */
:root[data-quiz-theme=paper] .qz-app[data-screen=home] .dpg-shelf-source{margin:calc(-1 * var(--g-s1,8px)) 0 0;color:var(--text-2);font-size:var(--g-fs-small,14px);line-height:1.6;overflow-wrap:anywhere}
/* 2026-10-15 関所D（本人 p3「みづらくなってない？」）: 「読んで覚える（答えを先に読む）」は小さな字（14px）をやめ、
   関所Cのときの大きさ（17px・押せる高さ 48px。上の .dpg-set-practice の規則）に戻す */
:root[data-quiz-theme=paper] .qz-app[data-screen=home] .qz-set-card__about{margin:0}
:root[data-quiz-theme=paper] .qz-app[data-screen=home] .qz-set-card__about-toggle{display:inline-flex;align-items:center;min-height:44px;padding:0 4px;color:var(--text-2);font-weight:600;text-underline-offset:4px}
/* 冊のカードの「続きから」（views.js の buildSetResumeButton）: 1行目「続きから 1/100」17px・2行目「収録順・10問ずつ」14px。
   上の帯（shelf-resume）と同じ続きでも、文字のリンクにせず白地に紫の枠（2番手。関所Cの形）。主（紫の塗り）は帯の1つのまま。
   1行目は折らない（折れるほど長い数は無い）。2行目は狭い所では折れてよい。上下の余白 8px・2行の間 0 */
:root[data-quiz-theme=paper] .qz-app[data-screen=home] .qz-set-card .dpg-set-card__resume{flex-direction:column;align-items:center;justify-content:center;gap:0;min-height:var(--g-btn-h,52px);padding:var(--g-s1,8px) var(--g-s2,16px);line-height:1.35;text-align:center}
:root[data-quiz-theme=paper] .qz-app[data-screen=home] .qz-set-card > .dpg-set-card__resume{margin-top:var(--g-s1,8px)}
/* 枠は dpg-guide.css の2番手と同じ（1px の線＋内側の影 1px で 2px に見せる。関所Cのカードの「続きから」と同じ形） */
:root[data-quiz-theme=paper] .qz-app[data-screen=home] .qz-set-card .dpg-set-card__resume.qz-btn--outline:not(:disabled){border:1px solid var(--g-outline,var(--accent));background:var(--g-outline-bg,var(--surface));color:var(--g-outline,var(--accent));box-shadow:inset 0 0 0 1px var(--g-outline,var(--accent))}
:root[data-quiz-theme=paper] .qz-app[data-screen=home] .qz-set-card .dpg-set-card__resume.qz-btn--outline:not(:disabled):hover{background:var(--accent-soft)}
:root[data-quiz-theme=paper] .qz-app[data-screen=home] .qz-set-card .dpg-set-card__resume-main{display:block;font-size:var(--g-fs-body,17px);font-weight:800;white-space:nowrap}
:root[data-quiz-theme=paper] .qz-app[data-screen=home] .qz-set-card .dpg-set-card__resume-sub{display:block;font-size:var(--g-fs-small,14px);font-weight:600;color:var(--text-2)}
:root[data-quiz-theme=paper] .qz-app[data-screen=home] .qz-set-card .qz-btn--primary:not(:disabled) .dpg-set-card__resume-sub{color:inherit}
:root[data-quiz-theme=paper] .qz-app[data-screen=home] .dpg-set-list--has-next > .qz-set-card:not(.dpg-set-card--next) .qz-btn--primary:not(:disabled) .dpg-set-card__resume-sub{color:var(--text-2)}
/* 2026-10-16 区間6（関所F Q4 h）: 冊のカードの右上の「…」（views.js の buildSetCardMenu）。カードの中の文字リンク
   （設定を変える・この問題集について・記録をリセット…）をここへまとめた（評価役B「カードにさらに文字リンクが3つ」）。
   「…」は 44px 角の白い面（表紙の絵の上でも見える）・墨の点3つ。題名は「…」に潜らないよう右を空ける。
   開いている間はカードの外を切らない（theme-dpg.css の overflow:hidden）＋後ろのカードより前に出す */
:root[data-quiz-theme=paper] .qz-app[data-screen=home] .qz-set-card.dpg-set-card--has-menu{position:relative}
:root[data-quiz-theme=paper] .qz-app[data-screen=home] .qz-set-card.dpg-set-card--has-menu > .qz-set-card__title{padding-right:calc(var(--h-tool) + var(--g-s1,8px))}
:root[data-quiz-theme=paper] .qz-app[data-screen=home] .qz-set-card.dpg-set-card--menu-open{overflow:visible;z-index:3}
:root[data-quiz-theme=paper] .qz-app[data-screen=home] .qz-set-card > .dpg-set-menu{position:absolute;z-index:2;top:var(--g-s2,16px);right:var(--g-s2,16px)}
:root[data-quiz-theme=paper] .qz-app[data-screen=home] .dpg-set-card__more{display:grid;place-items:center;width:var(--h-tool);height:var(--h-tool);padding:0;border:0;border-radius:var(--g-radius-btn,14px);background:var(--surface);color:var(--text-2);cursor:pointer}
:root[data-quiz-theme=paper] .qz-app[data-screen=home] .dpg-set-card__more svg{display:block;width:24px;height:24px}
:root[data-quiz-theme=paper] .qz-app[data-screen=home] .dpg-set-card__more[aria-expanded="true"]{background:var(--accent-soft);color:var(--accent)}
@media (hover:hover){:root[data-quiz-theme=paper] .qz-app[data-screen=home] .dpg-set-card__more:hover{background:var(--accent-soft);color:var(--accent)}}
:root[data-quiz-theme=paper] .qz-app[data-screen=home] .dpg-set-card__more:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
/* 小さなメニュー: 「…」の下・右寄せの白い面＋浮いた影。項目は本文の大きさ（17px）・押せる高さ 48px・墨の字（3番手の操作なので紫にしない）。
   「記録をリセット…」は細い線で区切ったいちばん下（押しても消えない1段目。消す・やめるはカードの下の2段目） */
:root[data-quiz-theme=paper] .qz-app[data-screen=home] .dpg-set-menu__pop{position:absolute;top:calc(100% + 4px);right:0;display:flex;flex-direction:column;min-width:13.5em;max-width:calc(100vw - var(--g-s5,40px));padding:var(--g-s1,8px);border-radius:var(--g-radius-btn,14px);background:var(--surface);box-shadow:var(--g-card-shadow-lift),0 0 0 1px var(--separator)}
:root[data-quiz-theme=paper] .qz-app[data-screen=home] .qz-set-card .dpg-set-menu .dpg-set-menu__item{display:flex;align-items:center;min-height:var(--g-hit,48px);margin:0;padding:0 var(--g-s2,16px);border:0;border-radius:10px;background:none;color:var(--text);font:inherit;font-size:var(--g-fs-body,17px);font-weight:600;line-height:1.35;text-align:left;text-decoration:none;white-space:nowrap;cursor:pointer}
:root[data-quiz-theme=paper] .qz-app[data-screen=home] .qz-set-card .dpg-set-menu .dpg-set-menu__item--sep{margin-top:var(--g-s1,8px);border-top:1px solid var(--separator);border-radius:0 0 10px 10px;color:var(--text-2)}
@media (hover:hover){:root[data-quiz-theme=paper] .qz-app[data-screen=home] .qz-set-card .dpg-set-menu .dpg-set-menu__item:hover{background:var(--accent-soft)}}
:root[data-quiz-theme=paper] .qz-app[data-screen=home] .qz-set-card .dpg-set-menu .dpg-set-menu__item:focus-visible{outline:3px solid var(--accent);outline-offset:-3px}
/* 作る入口の「打ち込む・貼る」: 狭いボタンでは「・」の後でだけ2行に折る（views.js の labelNodes） */
:root[data-quiz-theme=paper] .qz-app .dpg-label-keep{white-space:normal;word-break:keep-all;overflow-wrap:normal}

/* 紫の塗りは1画面に1つ: 棚の中では「次に解く1冊」（views.js の nextSetItem）の主ボタンだけを塗り、
   ほかの冊の主ボタン（と、有料の冊をまとめた枠の「購入して開く」）は白地に紫の枠（2番手）にする */
:root[data-quiz-theme=paper] .qz-app[data-screen=home] .dpg-set-list--has-next > .qz-set-card:not(.dpg-set-card--next) .qz-btn--primary:not(:disabled),
:root[data-quiz-theme=paper] .qz-app[data-screen=home] .dpg-set-list--has-next > .dpg-pack .qz-btn--primary:not(:disabled){border:1.5px solid var(--accent);background:var(--surface);box-shadow:none;color:var(--accent)}
:root[data-quiz-theme=paper] .qz-app[data-screen=home] .dpg-set-list--has-next > .qz-set-card:not(.dpg-set-card--next) .qz-btn--primary:not(:disabled):hover,
:root[data-quiz-theme=paper] .qz-app[data-screen=home] .dpg-set-list--has-next > .dpg-pack .qz-btn--primary:not(:disabled):hover{background:var(--accent-soft);filter:none}

/* 有料の冊をまとめた枠: 線をやめて白い面＋影 */
:root[data-quiz-theme=paper] .qz-app[data-screen=home] .dpg-pack{padding:var(--g-s3,24px);border:0;border-radius:var(--g-radius,16px);background:var(--surface);box-shadow:var(--g-card-shadow)}
:root[data-quiz-theme=paper] .qz-app[data-screen=home] .dpg-pack__head h3{font-size:var(--g-fs-title,22px);text-wrap:balance}
:root[data-quiz-theme=paper] .qz-app[data-screen=home] .dpg-pack__head p,
:root[data-quiz-theme=paper] .qz-app[data-screen=home] .dpg-pack__note,
:root[data-quiz-theme=paper] .qz-app[data-screen=home] .dpg-pack__list em,
:root[data-quiz-theme=paper] .qz-app[data-screen=home] .dpg-pack__price small{font-size:var(--g-fs-small,14px)}
:root[data-quiz-theme=paper] .qz-app[data-screen=home] .dpg-pack__list b{font-size:var(--g-fs-body,17px)}
:root[data-quiz-theme=paper] .qz-app[data-screen=home] .dpg-pack__price b{font-size:var(--g-fs-title,22px)}
:root[data-quiz-theme=paper] .qz-app[data-screen=home] .dpg-pack__buy{min-height:var(--g-btn-h,52px);font-size:var(--g-fs-body,17px)}
/* スマホは枠の中が狭い（「Part2・オリジナル問題」が「問／題」と折れる）ので、冊の名前は補足の大きさにする */
@media (max-width:479.98px){
  :root[data-quiz-theme=paper] .qz-app[data-screen=home] .dpg-pack{padding:var(--g-s2,16px)}
  :root[data-quiz-theme=paper] .qz-app[data-screen=home] .dpg-pack__list b{font-size:var(--g-fs-small,14px)}
}

/* ===================================================================================
   6. PC（1024px 以上）
   =================================================================================== */
@media (min-width:1024px){
  /* 左の縦のメニューとの間を広げる（20px → 40px） */
  :root[data-quiz-theme=paper] .qz-app[data-screen=home]{--pad-page:var(--h-pc-gutter)}
  /* ホームの上: 紫のカード｜作る帯（同じ高さ）→ ヒントの入れ物・最近使った（横いっぱい） */
  :root[data-quiz-theme=paper] .qz-app[data-screen=home] .qz-header:has(> .dpg-hc){grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);column-gap:var(--g-s3,24px);row-gap:var(--g-s3,24px);margin-top:var(--g-s3,24px)}
  :root[data-quiz-theme=paper] .qz-app[data-screen=home] .qz-header > .dpg-hint-slot{grid-column:1/-1}
  /* 勉強中の棚があるホームは、作る帯が下の「自分の問題集」の段へ移るので、上は紫のカードだけの1列（右に空きを作らない） */
  :root[data-quiz-theme=paper] .qz-app[data-screen=home] .qz-header:has(> .dpg-hc):not(:has(> .dpg-home-create)){grid-template-columns:minmax(0,1fr)}
  :root[data-quiz-theme=paper] .qz-app[data-screen=home] .qz-header:has(> .dpg-hc) > .dpg-home-create{grid-template-columns:minmax(0,1fr);grid-template-areas:"main" "actions" "quota";align-content:center;row-gap:var(--g-s2,16px);padding:var(--g-s2,16px) var(--g-s3,24px)}
  :root[data-quiz-theme=paper] .qz-app[data-screen=home] .qz-page .dpg-home-create__action{min-height:var(--g-btn-h,52px);font-size:var(--g-fs-small,14px)}
  /* 棚の行・勉強中の棚は2列（「資格を探す」の行は最後のマス）。全部の棚の一覧の上の「資格を探す」は左の1列ぶんの幅 */
  :root[data-quiz-theme=paper] .qz-app[data-screen=home] .dpg-rows{gap:var(--g-s2,16px) var(--g-s3,24px)}
  :root[data-quiz-theme=paper] .qz-app[data-screen=home] .dpg-shelf-navigation > .dpg-findrow{max-width:calc(50% - var(--g-s3,24px) / 2)}
  .dpg-rows--studying > .dpg-findrow{margin-top:0}
  .dpg-home-own{margin-top:var(--g-s3,24px)}
  /* 「問題集を作る」のタイルはスマホだけ（PC は紫のカードの右の帯が同じ入口。home-v3.css と同じ決まり） */
  :root[data-quiz-theme=paper] .qz-app[data-screen=home] .dpg-slot--make{display:none}
  /* 周回の切り替えはタブの箱と同じくらいの幅まで（横いっぱいに伸ばさない） */
  :root[data-quiz-theme=paper] .qz-app[data-screen=home] .qz-round-selector{max-width:560px}
  /* 棚の画面: タブの箱は 480px まで。表紙は少し大きく */
  :root[data-quiz-theme=paper] .qz-app[data-screen=home] .qz-header:has(> .qz-home-cards):has(> .dpg-topline--gear){margin-top:var(--g-s3,24px)}
  :root[data-quiz-theme=paper] .qz-app[data-screen=home] .dpg-shelf-navigation--open > .qz-book-cover{width:64px}
  /* 冊のカードは2列（PC の広い画面で、ボタンが横に 960px 伸びないように。1画面に入る冊が増える）。スマホは今までどおり全幅の縦並び。
     有料の枠の2列（.qz-set-list--pack）と同じ並べ方。高さは中身に合わせる（隣のカードの「この問題集について」を開いても伸びない） */
  :root[data-quiz-theme=paper] .qz-app[data-screen=home] .qz-set-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--g-s3,24px);align-items:start}
  /* シートは画面の上から少し離した中央の箱（角はすべて丸く）。行は2列 */
  .dpg-search__sheet{top:var(--g-s5,40px);width:min(720px,calc(100% - 48px));max-height:calc(100vh - 80px);border-radius:var(--g-radius,16px);padding:var(--g-s3,24px)}
  .dpg-search .dpg-rows,
  .dpg-search__list:not(.dpg-search__list--groups){grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:var(--g-s1,8px) var(--g-s2,16px)}
  .dpg-search .dpg-shelf-filter__chips{flex-wrap:wrap}
}

/* 動きを減らす設定では、影の移り変わりも止める */
@media (prefers-reduced-motion:reduce){
  :root[data-quiz-theme=paper] .dpg-row,
  .dpg-findrow,
  :root[data-quiz-theme=paper] .qz-app[data-screen=home] .qz-set-card .qz-btn{transition:none}
}

/* ===================================================================================
   7. 周2（2026-10-15）: 勉強中の棚から外す・続きからのカードを押せる形に・2冊目以降の続き・棚の中の続きを1つだけ主に
   =================================================================================== */
:root{
  /* 紫の面の上の白い文字・薄い文字（home-v3.css の続きからの小さい字と同じ色）・小さな行の面 */
  --h-on-accent:#fff;
  --h-on-accent-soft:#efe8ff;
  --h-on-accent-panel:rgb(255 255 255 / 14%);
  --h-on-accent-panel-hover:rgb(255 255 255 / 22%);
  /* 紫の面の上の白い細い枠（今日の目安。2026-10-16 区間6 関所F Q4 g） */
  --h-on-accent-line:rgb(255 255 255 / 72%);
  /* 「外しました［元に戻す］」の知らせ（墨の面に白い字） */
  --h-toast-bg:var(--text);
  --h-toast-text:var(--surface);
}

/* 7-1. 勉強中の棚の行＋「外す」（buildStudyingRow）。行と「外す」を1枚の白いカードに入れ、細い線で押す所を分ける */
.dpg-studyrow{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:stretch;min-width:0;border-radius:var(--g-radius,16px);background:var(--surface);box-shadow:var(--g-card-shadow);transition:box-shadow var(--dur-fast,140ms) ease-out}
:root[data-quiz-theme=paper] .dpg-studyrow > .dpg-row{border-radius:var(--g-radius,16px) 0 0 var(--g-radius,16px);background:transparent;box-shadow:none}
@media (hover:hover){
  :root[data-quiz-theme=paper] .dpg-studyrow > .dpg-row:hover{background:transparent;box-shadow:none}
  .dpg-studyrow:has(> .dpg-row:hover){box-shadow:var(--g-card-shadow-lift)}
}
/* 「外す」は3番手（文字のリンク）。記録は消えないので赤にしない。押せる大きさは 52×64px（行の高さいっぱい） */
.dpg-studyrow__hide{display:grid;place-items:center;min-width:52px;min-height:44px;margin:var(--g-s1,8px) 0;padding:0 var(--g-s2,16px);border:0;border-left:1px solid var(--separator);border-radius:0;background:none;color:var(--text-2);font:inherit;font-size:var(--g-fs-small,14px);font-weight:700;text-decoration:underline;text-underline-offset:4px;cursor:pointer}
@media (hover:hover){.dpg-studyrow__hide:hover{color:var(--accent)}}
.dpg-studyrow__hide:focus-visible{outline:3px solid var(--accent);outline-offset:-3px;border-radius:var(--g-radius-btn,14px)}

/* 知らせ（body の直下。role=status の入れ物は空なら高さ0）。スマホは下のメニューの上、PC は画面の下の真ん中 */
.dpg-toast-region{position:fixed;z-index:1000;left:0;right:0;bottom:calc(96px + env(safe-area-inset-bottom,0px));display:grid;justify-items:center;padding:0 var(--g-s2,16px);pointer-events:none}
.dpg-toast{display:flex;align-items:center;gap:var(--g-s2,16px);width:min(560px,100%);min-height:56px;padding:var(--g-s1,8px) var(--g-s1,8px) var(--g-s1,8px) var(--g-s2,16px);border-radius:var(--g-radius,16px);background:var(--h-toast-bg);color:var(--h-toast-text);box-shadow:var(--g-card-shadow-lift);font-size:var(--g-fs-small,14px);font-weight:700;line-height:1.5;pointer-events:auto}
.dpg-toast__text{flex:1 1 auto;min-width:0;overflow-wrap:anywhere}
.dpg-toast__undo{flex:none;min-height:44px;padding:0 var(--g-s2,16px);border:0;border-radius:var(--g-radius-btn,14px);background:none;color:var(--h-toast-text);font:inherit;font-size:var(--g-fs-body,17px);font-weight:800;text-decoration:underline;text-underline-offset:4px;cursor:pointer}
.dpg-toast__undo:focus-visible{outline:3px solid var(--h-toast-text);outline-offset:-3px}
@media (prefers-reduced-motion:no-preference){.dpg-toast{animation:dpg-toast-in var(--dur-fast,140ms) ease-out}}
@keyframes dpg-toast-in{from{opacity:0;transform:translateY(8px)}}
/* 作った・足した後に送った棚の行（views.js の showSavedToast。2026-10-16 周6）: 紫の薄い地と紫の縁で一瞬だけ強調し、もとの白い面に戻す。
   行は送り終わるまで強調したまま（初めの 40%）、その後ゆっくり戻す。動きを減らす設定では、色を替えるだけ（替わる途中は無し。2.4秒で外す） */
:root[data-quiz-theme=paper] :is(.dpg-row,.dpg-studyrow).dpg-row--saved{background:var(--accent-soft);box-shadow:0 0 0 2px var(--accent)}
@media (prefers-reduced-motion:no-preference){:root[data-quiz-theme=paper] :is(.dpg-row,.dpg-studyrow).dpg-row--saved{animation:dpg-row-saved 2.4s ease-out both}}
@media (prefers-reduced-motion:reduce){:root[data-quiz-theme=paper] :is(.dpg-row,.dpg-studyrow).dpg-row--saved{transition:none}}
@keyframes dpg-row-saved{0%,40%{background:var(--accent-soft);box-shadow:0 0 0 2px var(--accent)}100%{background:var(--surface);box-shadow:var(--g-card-shadow)}}

/* 7-2. 続きからのカード: 1冊目の右下に白い札「続きを解く ›」（カード全体がボタン。札は飾り） */
.qz-header > .dpg-hc .dpg-hc__slide{grid-template-areas:"cover kick kick" "cover main main" "cover cta ring";row-gap:var(--g-s1,8px)}
.qz-header > .dpg-hc .dpg-hc__cta{grid-area:cta;justify-self:start;display:inline-flex;align-items:center;gap:var(--g-s1,8px);min-height:44px;padding:0 var(--g-s2,16px);border-radius:var(--g-radius-btn,14px);background:var(--surface);color:var(--accent);font-size:var(--g-fs-body,17px);font-weight:800;line-height:1.2;box-shadow:var(--h-tool-shadow)}
.qz-header > .dpg-hc .dpg-hc__cta-chev{font-size:var(--g-fs-title,22px);line-height:1}
@media (hover:hover){.qz-header > .dpg-hc .dpg-hc__slide:hover .dpg-hc__cta{background:var(--accent-soft)}}
/* 2冊目以降: めくりをやめて、1冊目の下に「ほかの続き」の小さな行（表紙・資格名・どこまで・›）。点は出さない */
.qz-header > .dpg-hc .dpg-hc__slides--multi{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--g-s1,8px);overflow:visible;scroll-snap-type:none;border-radius:0}
.qz-header > .dpg-hc .dpg-hc__dots{display:none}
.qz-header > .dpg-hc .dpg-hc__others-label{margin:var(--g-s1,8px) 0 0;font-size:var(--g-fs-small,14px);font-weight:700;line-height:1.4;color:var(--h-on-accent-soft)}
.qz-header > .dpg-hc .dpg-hc__slide ~ .dpg-hc__slide{grid-template-columns:32px minmax(0,1fr) auto;grid-template-areas:"cover main chev";align-items:center;column-gap:var(--g-s2,16px);min-height:56px;padding:var(--g-s1,8px) var(--g-s2,16px) var(--g-s1,8px) var(--g-s1,8px);border-radius:12px;background:var(--h-on-accent-panel)}
.qz-header > .dpg-hc .dpg-hc__slide ~ .dpg-hc__slide::after{content:"›";grid-area:chev;font-size:var(--g-fs-title,22px);line-height:1}
.qz-header > .dpg-hc .dpg-hc__slide ~ .dpg-hc__slide :is(.dpg-hc__kicker,.dpg-hc__ring,.dpg-hc__cta){display:none}
.qz-header > .dpg-hc .dpg-hc__slide ~ .dpg-hc__slide .dpg-hc__cover{align-self:center;width:32px;height:43px;box-shadow:2px 0 0 var(--h-on-accent)}
.qz-header > .dpg-hc .dpg-hc__slide ~ .dpg-hc__slide .dpg-hc__title{font-size:var(--g-fs-body,17px)}
/* 2026-10-16 周8（使い込んでいる人役 #11「スマホの2つ目の続きの説明が『10/100・収…』で切れ、10問ずつが見えない」）:
   ほかの続きの行の説明（Part1・令和8年度・1/100・収録順・10問ずつ）は2行まで折り返す（home-v3.css の1行の切り詰めを2行に）。PC は1行に収まるので変わらない */
.qz-header > .dpg-hc .dpg-hc__slide ~ .dpg-hc__slide .dpg-hc__meta{-webkit-line-clamp:2;line-clamp:2;word-break:auto-phrase}
/* 2026-10-16 周10（使い込んでいる人役 #11「スマホの上の続きカードは『10問ずつ』が『…』で切れる」）: いちばん上の続き
   （views.js の buildResumeSlide の1枚目）の説明も、ほかの続きの行と同じく2行まで折り返す。PC（1024px〜）は1行に収まるので今までどおり */
@media (max-width:1023.98px){
  .qz-header > .dpg-hc .dpg-hc__slide .dpg-hc__meta{-webkit-line-clamp:2;line-clamp:2;word-break:auto-phrase}
}
@media (hover:hover){.qz-header > .dpg-hc .dpg-hc__slide ~ .dpg-hc__slide:hover{background:var(--h-on-accent-panel-hover)}}
/* 7-2b. 1冊目のすぐ下の「読んで覚える（答えを先に読む）」（2026-10-15 周3。data-role="resume-practice"）。
   紫のカードの上の2番手＝白い文字のリンク（白い札「続きを解く」より弱く、でも本文の大きさで見落とさない）。
   カード全体のボタンとは別のボタン。押し間違えないよう、上の1冊目との間を 8px 空け、押せる高さは 44px。
   文字の頭はスマホでは表紙の左、PC では札「続きを解く」の右端にそろえる（当たりの余白 8px ぶんを外へ出す） */
.qz-header > .dpg-hc .dpg-hc__slides--practice{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--g-s1,8px);overflow:visible;scroll-snap-type:none;border-radius:0}
.qz-header > .dpg-hc .dpg-hc__practice{justify-self:start;display:inline-flex;align-items:center;gap:var(--g-s1,8px);max-width:calc(100% + var(--g-s2,16px));min-height:44px;margin:0 calc(-1 * var(--g-s1,8px));padding:0 var(--g-s1,8px);border:0;border-radius:var(--g-radius-btn,14px);background:none;color:var(--h-on-accent);font:inherit;font-size:var(--g-fs-body,17px);font-weight:700;line-height:1.35;text-align:left;cursor:pointer}
.qz-header > .dpg-hc .dpg-hc__practice-label{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px;overflow-wrap:anywhere}
.qz-header > .dpg-hc .dpg-hc__practice-chev{flex:none;font-size:var(--g-fs-title,22px);line-height:1}
.qz-header > .dpg-hc .dpg-hc__practice:focus-visible{outline:3px solid var(--h-on-accent);outline-offset:2px}
@media (hover:hover){.qz-header > .dpg-hc .dpg-hc__practice:hover{background:var(--h-on-accent-panel-hover)}}

/* 7-3. 棚の画面の続き: いちばん最近の1つだけ紫の塗り（2行目に何の続きか）。ほかの続きは下に文字のリンク */
:root[data-quiz-theme=paper] .qz-app[data-screen=home] .dpg-entry .dpg-entry__main--detail{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"label chev" "detail chev";align-items:center;column-gap:var(--g-s2,16px);row-gap:2px;width:100%;min-height:var(--g-btn-h,52px);padding:var(--g-s1,8px) var(--g-s2,16px) var(--g-s1,8px) var(--g-s3,24px);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:var(--h-on-accent);text-align:left}
:root[data-quiz-theme=paper] .qz-app[data-screen=home] .dpg-entry .dpg-entry__main--detail:hover{background:var(--g-primary-fill);filter:brightness(1.06)}
:root[data-quiz-theme=paper] .qz-app[data-screen=home] .dpg-entry .dpg-entry__main--detail:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.dpg-entry__label{grid-area:label;font-size:var(--g-fs-body,17px);font-weight:800;line-height:1.35}
.dpg-entry__detail{grid-area:detail;font-size:var(--g-fs-small,14px);font-weight:600;line-height:1.45;color:var(--h-on-accent-soft);overflow-wrap:anywhere}
.dpg-entry__chev{grid-area:chev;font-size:var(--g-fs-title,22px);line-height:1}
.dpg-entry__others{display:flex;flex-wrap:wrap;align-items:center;column-gap:var(--g-s2,16px);width:100%;min-width:0}
.dpg-entry__others-label{font-size:var(--g-fs-small,14px);font-weight:700;color:var(--text-2)}
:root[data-quiz-theme=paper] .qz-app[data-screen=home] .dpg-entry .dpg-entry__other{min-height:44px;padding:0 4px;border:0;border-radius:var(--g-radius-btn,14px);background:none;box-shadow:none;color:var(--accent);font-size:var(--g-fs-small,14px);font-weight:700;text-align:left;text-decoration:underline;text-underline-offset:4px}
:root[data-quiz-theme=paper] .qz-app[data-screen=home] .dpg-entry .dpg-entry__other:hover{background:var(--accent-soft)}

@media (min-width:1024px){
  /* PC の続きからのカード: 札は右（輪の右隣）。ほかの続きは2列の小さな行 */
  .qz-header > .dpg-hc .dpg-hc__slide{grid-template-columns:56px minmax(0,1fr) auto auto;grid-template-areas:"cover kick kick kick" "cover main ring cta";column-gap:var(--g-s2,16px)}
  .qz-header > .dpg-hc .dpg-hc__cta{justify-self:end}
  .qz-header > .dpg-hc .dpg-hc__slides--multi{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--g-s2,16px)}
  .qz-header > .dpg-hc .dpg-hc__slides--multi > :is(.dpg-hc__slide:first-child,.dpg-hc__others-label,.dpg-hc__practice){grid-column:1/-1}
  /* 読んで覚える（周3）は札「続きを解く」の真下・右寄せ。続きが1冊だけ（タブ無し）のときは、今日の目安の行の右端に置く
     （その行の右は空いているので、カードの高さを1行ぶん増やさない。読み上げ・Tab の順は DOM のまま 続きを解く → 読んで覚える → 今日の目安） */
  .qz-header > .dpg-hc .dpg-hc__practice{justify-self:end}
  .qz-header > .dpg-hc:not(.dpg-hc--tabs):has(> .dpg-hc__foot > .dpg-today) .dpg-hc__slides--practice:not(.dpg-hc__slides--multi) > .dpg-hc__practice{position:absolute;right:var(--g-s2,16px);bottom:var(--g-s2,16px);margin:0 calc(-1 * var(--g-s1,8px)) 0 0}
  /* 棚の画面の主の続きは横いっぱいに伸ばさない */
  :root[data-quiz-theme=paper] .qz-app[data-screen=home] .dpg-entry .dpg-entry__main--detail{width:min(100%,560px)}
  /* 続きが無いとき（勉強中から外した・全部終えた…）の紫のカード（どれから解く？・⚙？🔍・今日の目安）は中身の高さにする
     （2026-10-16 周7 批評役 PC「続きが無いホームでは紫の大きな箱が空」）。前は右の「問題集を作る」の帯の高さまで伸びて、
     「どれから解く？」と今日の目安の間が大きく空いていた。カードの中身・data-role・並び（読み上げの順）は変えない。 */
  :root[data-quiz-theme=paper] .qz-app[data-screen=home] .qz-header > .dpg-hc:not(.dpg-hc--resume){align-self:start;align-content:start}
  /* 横いっぱいのとき（作る帯が下の「自分の問題集」の段へ移ったホーム）は、「どれから解く？」と今日の目安を1行に並べる（道具は右上のまま） */
  :root[data-quiz-theme=paper] .qz-app[data-screen=home] .qz-header:not(:has(> .dpg-home-create)) > .dpg-hc:not(.dpg-hc--resume){grid-template-columns:auto minmax(0,1fr);align-items:center;column-gap:var(--g-s2,16px)}
  .qz-header:not(:has(> .dpg-home-create)) > .dpg-hc:not(.dpg-hc--resume) .dpg-hc__empty{padding-right:0}
  .qz-header:not(:has(> .dpg-home-create)) > .dpg-hc:not(.dpg-hc--resume) > .dpg-hc__foot{padding-right:calc(var(--h-tools-w) + var(--g-s1,8px))}
  .qz-header:not(:has(> .dpg-home-create)) > .dpg-hc:not(.dpg-hc--resume) > .dpg-hc__foot ~ *{grid-column:1/-1}
}
@media (prefers-reduced-motion:reduce){
  .dpg-studyrow{transition:none}
  .dpg-toast{animation:none}
}

/* ===================================================================================
   8. 読んで覚えるの画面（解説を読む段。#app[data-screen=practice-study]）（2026-10-15 周3）
   くわしい解説のカードは、答えた後の画面（案C）のタブ「くわしい解説」と同じく本文（正解：… と理由）を先に、
   AI に頼む道具と音声の帯は本文の後へ（dpg-answer.css の .qz-page--answered .qz-explain と同じ並べ方。DOM の順は変えない）
   =================================================================================== */
:root .qz-app[data-screen="practice-study"] .qz-side > .qz-explain{display:flex;flex-direction:column}
:root .qz-app[data-screen="practice-study"] .qz-side > .qz-explain > :is(.qz-share,.qz-explain-audio){order:3;margin-top:var(--g-s2,16px)}
:root .qz-app[data-screen="practice-study"] .qz-side > .qz-explain > .qz-refs{order:2}

/* 2026-10-15 周3: 冊のカードの［時間・範囲を決めて復習］（data-role="filter-review"。以前の「絞る」。views.js の buildSetCard）。
   言葉が長くなったので、狭い所（スマホ）では［間違いN問を復習］の下の1行に回す（横に2つだと「時間・範囲を決め／て復習」と折れるため）。
   広い所では今までどおり横に2つ。どちらも白地に紫の枠（2番手）のまま。 */
:root .qz-set-card .qz-btn-row:has(> [data-role="filter-review"]) { flex-wrap: wrap; }
:root .qz-set-card .qz-btn-row > [data-role="review"] { flex: 1 1 11em; }
:root .qz-set-card .qz-btn-row > [data-role="filter-review"] { flex: 1 1 14em; }
/* 2026-10-17 夜2 P3 の残り: 冊のカードの復習の続き（data-role="continue-review"。ほこらで始めた回は「続き（1周目・テクノロジ系だけ・45問中2問目）」）。
   ［やめる］の横に並べたままだと 187px（200% 拡大）で 42px 幅に潰れて1〜2字ずつ折れていたので、11em に足りない時は［やめる］を下の行へ回す
   （上の［間違いN問を復習］と同じ作法。390px・PC は今までどおり横に2つ）。 */
:root .qz-set-card .qz-btn-row:has(> [data-role="continue-review"]) { flex-wrap: wrap; }
:root .qz-set-card .qz-btn-row > [data-role="continue-review"] { flex: 1 1 11em; }

/* ===================================================================================
   9. 2026-10-18 区間11（DAILY-A）P1・P2・P3: ホームから今日の分を1回で・復習の名前と入口を2つに・棚は今の冊を先頭に
   =================================================================================== */
/* 9-1. 紫のカードの白い主ボタン「今日の残り N問を解く」（data-role="home-today-go"。続きが無い日だけ。白く塗るのはこれ1つ）。
   1行目は本文の太字（数は見出しの大きさ）、2行目はどの冊をどの設定で（補足の大きさ）、下に今日の目安の進み（飾り） */
.qz-header > .dpg-hc .dpg-hc__go{display:grid;gap:2px;justify-items:start;width:100%;min-width:0;min-height:64px;margin:var(--g-s1,8px) 0 0;padding:var(--g-s1,8px) var(--g-s2,16px) var(--g-s2,16px);border:0;border-radius:var(--g-radius-btn,14px);background:var(--surface);color:var(--accent);box-shadow:var(--h-tool-shadow);font:inherit;text-align:left;cursor:pointer}
.qz-header > .dpg-hc .dpg-hc__go-label{font-size:var(--g-fs-body,17px);font-weight:800;line-height:1.35;overflow-wrap:anywhere}
.qz-header > .dpg-hc .dpg-hc__go-label b{font-size:var(--g-fs-title,22px);font-weight:800}
.qz-header > .dpg-hc .dpg-hc__go-meta{font-size:var(--g-fs-small,14px);font-weight:600;line-height:1.45;color:var(--text-2);overflow-wrap:anywhere}
.qz-header > .dpg-hc .dpg-hc__go-bar{display:block;width:100%;height:6px;margin-top:var(--g-s1,8px);border-radius:3px;background:var(--h-track);overflow:hidden}
.qz-header > .dpg-hc .dpg-hc__go-bar i{display:block;height:100%;border-radius:3px;background:var(--accent)}
.qz-header > .dpg-hc .dpg-hc__go:focus-visible{outline:3px solid var(--h-on-accent);outline-offset:2px}
@media (hover:hover){.qz-header > .dpg-hc .dpg-hc__go:hover{background:var(--accent-soft)}}
/* 9-2. 今日の復習のチップ（data-role="home-today-review"。0問の日は無い）。今日の目安のチップと同じ白い細い枠に、薄い白の面を敷いて先に目に入るように。
   2つのチップは折り返して並べる（狭い画面では縦に2つ） */
.qz-header > .dpg-hc .dpg-hc__foot--due{flex-wrap:wrap;justify-content:flex-start}
.qz-header > .dpg-hc .dpg-hc__due{flex:0 1 auto;display:inline-flex;align-items:center;gap:6px;min-width:0;min-height:44px;padding:0 12px;border:1.5px solid var(--h-on-accent-line);border-radius:12px;background:var(--h-on-accent-panel);color:var(--h-on-accent);font:inherit;cursor:pointer}
.qz-header > .dpg-hc .dpg-hc__due-icon svg{display:block;width:20px;height:20px}
.qz-header > .dpg-hc .dpg-hc__due b{font-size:var(--g-fs-small,14px);font-weight:700;line-height:1.3;white-space:nowrap}
.qz-header > .dpg-hc .dpg-hc__due-num{display:inline-grid;place-items:center;min-width:28px;padding:0 8px;border-radius:999px;background:var(--surface);color:var(--accent);font-size:var(--g-fs-small,14px);font-weight:800;line-height:1.6;white-space:nowrap}
.qz-header > .dpg-hc .dpg-hc__due:focus-visible{outline:3px solid var(--h-on-accent);outline-offset:2px}
@media (hover:hover){.qz-header > .dpg-hc .dpg-hc__due:hover{background:var(--h-on-accent-panel-hover)}}
/* 細い幅（200% 拡大・320px）では、チップの中の言葉も折り返してよい（はみ出さない） */
@container (max-width:240px){
  .qz-header > .dpg-hc .dpg-hc__due b,
  .qz-header > .dpg-hc .dpg-hc__foot--due .dpg-today--chip b,
  .qz-header > .dpg-hc .dpg-hc__foot--due .dpg-today--chip .dpg-today__num{white-space:normal}
  .qz-header > .dpg-hc .dpg-hc__due,
  .qz-header > .dpg-hc .dpg-hc__foot--due .dpg-today--chip{flex-wrap:wrap;padding:6px 10px}
}
@media (min-width:1024px){
  /* 主ボタンがあるカードは、横いっぱいでも1列（「どれから解く？」→ 主ボタン → チップの行）。道具は右上のまま */
  :root[data-quiz-theme=paper] .qz-app[data-screen=home] .qz-header > .dpg-hc.dpg-hc--go{grid-template-columns:minmax(0,1fr)!important}
  .qz-header > .dpg-hc.dpg-hc--go > .dpg-hc__foot{padding-right:0!important}
  .qz-header > .dpg-hc.dpg-hc--go .dpg-hc__go{max-width:640px}
}

/* 9-3. 棚の上の2つ（今日の復習・間違いの解き直し）。どちらも2番手（白地に紫の枠）。1行目は名前と数、2行目はどの冊から。
   広い所は横に2つ、入れ物が 360px 未満なら縦に積む */
:root[data-quiz-theme=paper] .qz-app[data-screen=home] .dpg-entry__pair{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--g-s1,8px);width:100%;min-width:0}
:root[data-quiz-theme=paper] .qz-app[data-screen=home] .dpg-entry__pair--two{grid-template-columns:repeat(auto-fit,minmax(min(100%,13em),1fr))}
:root[data-quiz-theme=paper] .qz-app[data-screen=home] .dpg-entry .dpg-entry__sub{display:grid;gap:2px;justify-items:start;align-content:center;width:100%;min-width:0;text-align:left}
.dpg-entry__sub-label{font-size:var(--g-fs-body,17px);font-weight:800;line-height:1.35;overflow-wrap:anywhere}
.dpg-entry__sub-detail{font-size:var(--g-fs-small,14px);font-weight:600;line-height:1.45;color:var(--text-2);overflow-wrap:anywhere}
@media (min-width:1024px){:root[data-quiz-theme=paper] .qz-app[data-screen=home] .dpg-entry__pair{max-width:760px}}

/* 9-4. 棚の画面の、この周を解き終えた冊の1行（data-role="set-done-toggle"。押すと今のカードが下に開く）。
   ✓ は紫（「完了」も緑にしない）。白い面にやわらかい影（冊のカードと同じ）。押せる高さは 56px */
.dpg-set-fold{display:grid;gap:var(--g-s1,8px);min-width:0}
.dpg-set-done{display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"check title chev" "check meta chev";align-items:center;column-gap:var(--g-s2,16px);row-gap:0;width:100%;min-width:0;min-height:56px;padding:var(--g-s1,8px) var(--g-s2,16px);border:0;border-radius:var(--g-radius,16px);background:var(--surface);box-shadow:var(--g-card-shadow);color:var(--text);font:inherit;text-align:left;cursor:pointer}
.dpg-set-done__check{grid-area:check;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--accent-soft);color:var(--accent);font-size:var(--g-fs-small,14px);font-weight:800}
.dpg-set-done__title{grid-area:title;min-width:0;font-size:var(--g-fs-body,17px);font-weight:800;line-height:1.35;overflow-wrap:anywhere}
.dpg-set-done__meta{grid-area:meta;min-width:0;font-size:var(--g-fs-small,14px);font-weight:600;line-height:1.45;color:var(--text-2);overflow-wrap:anywhere}
.dpg-set-done__chev{grid-area:chev;font-size:var(--g-fs-title,22px);line-height:1;color:var(--accent)}
.dpg-set-fold--open > .dpg-set-done .dpg-set-done__chev{transform:rotate(90deg)}
.dpg-set-done:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
@media (hover:hover){.dpg-set-done:hover{box-shadow:var(--g-card-shadow-lift)}}
/* 2026-10-18 区間13 FIX: 200% 拡大（187px）で崩れていた2つ（300px 未満だけ。320px 以上は今のまま）。
   ・棚の「周回」（1周目・2周目・3周目）: 名前の横に3つを等分すると1つが幅 28px になり「1／周／目」と縦に折れていた → 名前の下に、1つずつ1行で並べる
   ・「＋問題集を作る」のカード: 絵（64px）の横に名前を置くと名前が幅 24px（1字ずつ縦）、作る3つが幅 29px になっていた → 絵・名前・作る3つ・残りの枠を縦に1列で */
@media (max-width:299.98px){
  :root[data-quiz-theme=paper] .qz-round-selector:not(#_){flex-wrap:wrap}
  :root[data-quiz-theme=paper] .qz-round-selector > .qz-round-selector__options:not(#_){flex:1 1 100%;flex-wrap:wrap}
  :root[data-quiz-theme=paper] .qz-round-selector__options > .qz-round-selector__option:not(#_){flex:1 1 100%}
  :root[data-quiz-theme=paper] .dpg-home-create:not(#_){grid-template-columns:minmax(0,1fr);grid-template-areas:"mascot" "main" "actions" "quota"}
  :root[data-quiz-theme=paper] .dpg-home-create__actions:not(#_){grid-template-columns:minmax(0,1fr)}
}

/* ==== 2026-10-19 区間16 BTN 案4「色で役わけ＋小さな印」（棚の冊のカードのボタンの色と見た目だけ。配置・動作・data-role は変えない） ====
   一段上の案: 何をするボタンかを、字を読む前に色と印で分かるようにする（言葉より先に絵で分かる・色だけに頼らない）。
     解く（はじめる・続きから・未挑戦）＝紫の面と ▶ ／ 解き直す（間違いの解き直し）＝藍の面と ↻ ／ 読む（読んで覚える）＝緑青の面と本の印。
   どれも枠なしの淡い面。紫の塗りは今の決まりのまま1画面に1つ（上に主の帯が無い時の「次に解く1冊」の主だけ）。
   金（外の世界の主・D3）と赤（間違いの知らせだけ・D3）は使わない。印は data: の SVG（本物の CSP の img-src 'self' data: で読める）。 */
:root[data-quiz-theme=paper] #app[data-screen=home] .qz-set-card :is([data-role=start],[data-role=continue],[data-role=start-unattempted],[data-role=collection-start]){--btn-ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 4.6v14.8a1.2 1.2 0 0 0 1.8 1l11.6-7.4a1.2 1.2 0 0 0 0-2L8.8 3.6A1.2 1.2 0 0 0 7 4.6z'/%3E%3C/svg%3E")}
:root[data-quiz-theme=paper] #app[data-screen=home] .qz-set-card :is([data-role=review],[data-role=continue-review]){--btn-ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19.5 12.5a7.5 7.5 0 1 1-2.2-5.8'/%3E%3Cpath d='M19.5 3.8v4.7h-4.7'/%3E%3C/svg%3E")}
:root[data-quiz-theme=paper] #app[data-screen=home] .qz-set-card :is([data-role=continue-practice],.dpg-set-practice){--btn-ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.3' stroke-linejoin='round'%3E%3Cpath d='M2.8 5.6c2.9-1.6 6.3-1.5 9.2.6 2.9-2.1 6.3-2.2 9.2-.6v13.6c-2.9-1.6-6.3-1.5-9.2.6-2.9-2.1-6.3-2.2-9.2-.6z'/%3E%3Cpath d='M12 6.2v13.6'/%3E%3C/svg%3E")}
:root[data-quiz-theme=paper] #app[data-screen=home] .qz-set-card :is([data-role=start],[data-role=start-unattempted],[data-role=collection-start],[data-role=review],[data-role=continue-review])::before,
:root[data-quiz-theme=paper] #app[data-screen=home] .qz-set-card :is([data-role=continue],[data-role=continue-practice]) .dpg-set-card__resume-main::before,
:root[data-quiz-theme=paper] #app[data-screen=home] .qz-set-card .dpg-set-practice::before{content:"";display:inline-block;flex:none;width:.95em;height:.95em;margin-right:.4em;vertical-align:-.1em;background:currentColor;-webkit-mask:var(--btn-ic) center/contain no-repeat;mask:var(--btn-ic) center/contain no-repeat}
/* 解く: 主は濃いめの薄紫、未挑戦などの2番手は淡い薄紫 */
:root[data-quiz-theme=paper] #app[data-screen=home] .qz-set-card .qz-btn--primary:not(:disabled){border:0;background:#ebe3ff;box-shadow:none;color:#4318b5;font-weight:800}
:root[data-quiz-theme=paper] #app[data-screen=home] .qz-set-card .qz-btn--primary:not(:disabled):hover{border:0;background:#e1d5ff;color:#4318b5;filter:none}
:root[data-quiz-theme=paper] #app[data-screen=home] .qz-set-card .qz-btn--primary:not(:disabled) .dpg-set-card__resume-sub{color:#4318b5}
:root[data-quiz-theme=paper] #app[data-screen=home]:not(:has([data-guide="primary"])) .dpg-set-card--next .qz-btn--primary:not(:disabled),
:root[data-quiz-theme=paper] #app[data-screen=home]:not(:has([data-guide="primary"])) .dpg-set-card--next .qz-btn--primary:not(:disabled):hover{background:#6424ed;color:#fff}
:root[data-quiz-theme=paper] #app[data-screen=home]:not(:has([data-guide="primary"])) .dpg-set-card--next .qz-btn--primary:not(:disabled) .dpg-set-card__resume-sub{color:#fff}
:root[data-quiz-theme=paper] #app[data-screen=home] .qz-set-card .qz-btn--outline:not(:disabled){border:0;background:#f6f2ff;box-shadow:none;color:#4a1fc0}
:root[data-quiz-theme=paper] #app[data-screen=home] .qz-set-card .qz-btn--outline:not(:disabled):hover{background:#ece5ff}
/* 解き直す: 藍 */
:root[data-quiz-theme=paper] #app[data-screen=home] .qz-set-card .qz-btn--outline:is([data-role=review],[data-role=continue-review]):not(:disabled){background:#e8eefc;color:#1d3d94}
:root[data-quiz-theme=paper] #app[data-screen=home] .qz-set-card .qz-btn--outline:is([data-role=review],[data-role=continue-review]):not(:disabled):hover{background:#dce6fa}
/* 読む: 緑青（読んで覚えるの続き・答えを先に読むのリンク） */
:root[data-quiz-theme=paper] #app[data-screen=home] .qz-set-card .qz-btn--outline[data-role=continue-practice]:not(:disabled){background:#e3f3ef;color:#0b5c4d}
:root[data-quiz-theme=paper] #app[data-screen=home] .qz-set-card .qz-btn--outline[data-role=continue-practice]:not(:disabled):hover{background:#d5ece6}
:root[data-quiz-theme=paper] #app[data-screen=home] .qz-set-card .qz-btn--outline[data-role=continue-practice]:not(:disabled) .dpg-set-card__resume-sub{color:#2f5b52}
:root[data-quiz-theme=paper] #app[data-screen=home] .qz-set-card .dpg-set-practice{color:#0b5c4d;text-decoration-thickness:1px}
/* やめる（discard-review）は色を持たない生成り */
:root[data-quiz-theme=paper] #app[data-screen=home] .qz-set-card .qz-btn--outline[data-role=discard-review]:not(:disabled){background:#f5efe7;color:#2c211e}
/* 狭い幅（359px 以下＝320 の電話・187＝200% など）では印を出さない（字の幅を印に取られて折れが増えるため。色の役わけは残す） */
@media (max-width:359px){
  :root[data-quiz-theme=paper] #app[data-screen=home] .qz-set-card :is([data-role=start],[data-role=start-unattempted],[data-role=collection-start],[data-role=review],[data-role=continue-review])::before,
  :root[data-quiz-theme=paper] #app[data-screen=home] .qz-set-card :is([data-role=continue],[data-role=continue-practice]) .dpg-set-card__resume-main::before,
  :root[data-quiz-theme=paper] #app[data-screen=home] .qz-set-card .dpg-set-practice::before{content:none}
}
/* ==== BTN 案4 ここまで ==== */

/* ===================================================================================
   分野で解く（2026-10-22・本人承認の見本 caseB）。棚の周回の行の下・冊のカードの上（views.js の buildFieldTiles）。
   小さい見出し「分野で解く（年度をまたいで）」→ 白いカードのタイル 2×2（分野名・問題数・細い進み具合の棒・右下に紫の ›）→
   小さい見出し「年度で解く」。PC（1024px 以上）は4枚を1行に並べる。タイルは押す物なので48px以上・紫の線の焦点。
   =================================================================================== */
.dpg-ftiles{display:flex;flex-direction:column;gap:var(--g-s2,16px)}
.dpg-ftiles__head{margin:0;font-size:var(--g-fs-body,17px);font-weight:700;line-height:1.4;color:var(--text,#2c211e)}
.dpg-ftiles__head--years{margin-top:var(--g-s1,8px)}
.dpg-ftiles__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--g-s2,16px)}
.dpg-ftiles__tile{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:6px;min-height:var(--g-hit,48px);
  padding:var(--g-s2,16px) var(--g-s2,16px) 36px;border:0;border-radius:var(--g-radius,16px);background:var(--surface,#fff);
  box-shadow:var(--g-card-shadow);color:var(--text,#2c211e);font:inherit;text-align:left;cursor:pointer}
.dpg-ftiles__tile:hover{box-shadow:var(--g-card-shadow-lift)}
.dpg-ftiles__tile:focus-visible{outline:3px solid var(--accent,#6535b5);outline-offset:2px}
.dpg-ftiles__name{font-size:var(--g-fs-body,17px);font-weight:700;line-height:1.35}
.dpg-ftiles__count{font-size:var(--g-fs-small,14px);color:var(--text-2,#6b5f5a)}
.dpg-ftiles__bar{display:block;width:85%;height:6px;margin-top:6px;border-radius:999px;background:var(--h-track,#e9e3f0);overflow:hidden}
.dpg-ftiles__fill{display:block;height:100%;border-radius:999px;background:var(--accent,#6535b5)}
.dpg-ftiles__chev{position:absolute;right:var(--g-s2,16px);bottom:10px;font-size:var(--g-fs-title,22px);font-weight:700;line-height:1;color:var(--accent,#6535b5)}
.dpg-ftiles__resume{white-space:normal;line-height:1.4}
/* 設定の画面: 選んだ組み合わせの数（「宅建業法・令和2〜7年度 151問」）は年度の札のすぐ下に小さく */
.qz-setup__group .dpg-ftiles-count{margin:var(--g-s1,8px) 0 0}
/* 年度の札（すべて＋8年度）は、1024px 未満では見本 caseC と同じ 4列のグリッドにそろえる（制限時間の qz-pills--limit と同じ作り・同じ詳細度）。
   「令和3（12月）」は（ の手前で2行に折れる（phraseNodes）。300px 未満は1つ 64px 以上で入る数だけ並べる。 */
@media (max-width:1023.98px){
  :root[data-quiz-theme="paper"] .qz-setup .qz-pills.dpg-ftiles-years:not(#_){display:grid;grid-template-columns:repeat(4,minmax(0,1fr));width:100%;max-width:440px}
  :root[data-quiz-theme="paper"] .qz-setup .dpg-ftiles-years > .qz-pill:not(#_){min-width:0;padding-inline:4px;justify-content:center;text-align:center;line-height:1.3}
}
@media (max-width:299.98px){
  :root[data-quiz-theme="paper"] .qz-setup .qz-pills.dpg-ftiles-years:not(#_){grid-template-columns:repeat(auto-fit,minmax(64px,1fr))}
}
@media (min-width:1024px){
  .dpg-ftiles__grid{grid-template-columns:repeat(4,minmax(0,1fr))}
}

/* ===================================================================================
   本番形式（2026-10-22・本人承認の見本 mock1）。棚の周回の行の下・分野で解くのタイルの上（views.js の buildMockEntry）。
   小さい見出し「本番形式（50問・2時間・合格点つき）」→ 白いカード1枚に年度の行（左に年度と小さい字、右に前回の札と紫の ›）。
   札は 合格＝緑・不合格＝灰色・解きかけ＝薄紫。行は押す物なので48px以上・紫の線の焦点。
   =================================================================================== */
.dpg-mock-entry{display:flex;flex-direction:column;gap:var(--g-s1,8px)}
.dpg-mock-entry__head{margin:0;font-size:var(--g-fs-body,17px);font-weight:700;line-height:1.4;color:var(--text,#2c211e)}
.dpg-mock-entry__card{display:flex;flex-direction:column;padding:4px var(--g-s2,16px);border-radius:var(--g-radius,16px);background:var(--surface,#fff);box-shadow:var(--g-card-shadow)}
.dpg-mock-entry__row{display:flex;align-items:center;gap:12px;width:100%;min-height:var(--g-hit,48px);padding:12px 0;border:0;border-bottom:1px solid var(--separator,#ece6e2);
  background:none;color:var(--text,#2c211e);font:inherit;text-align:left;cursor:pointer}
.dpg-mock-entry__row:last-of-type{border-bottom:0}
.dpg-mock-entry__row:focus-visible,.dpg-mock-entry__more:focus-visible{outline:3px solid var(--accent,#6535b5);outline-offset:2px;border-radius:8px}
.dpg-mock-entry__text{display:flex;flex-direction:column;gap:2px;flex:1 1 auto;min-width:0}
.dpg-mock-entry__name{font-size:var(--g-fs-body,17px);font-weight:700;line-height:1.35}
.dpg-mock-entry__sub{font-size:var(--g-fs-small,14px);color:var(--text-2,#6b5f5a)}
.dpg-mock-entry__badge{flex:0 1 auto;padding:4px 12px;border-radius:999px;font-size:var(--g-fs-small,14px);font-weight:700;line-height:1.4;white-space:nowrap}
.dpg-mock-entry__badge--pass{background:var(--success-soft,#e8f4e9);color:var(--success,#276846)}
.dpg-mock-entry__badge--fail{background:#efedf0;color:#5c5560}
.dpg-mock-entry__badge--live{background:var(--accent-soft,#efe8fb);color:var(--accent,#6535b5)}
.dpg-mock-entry__chev{flex:0 0 auto;font-size:var(--g-fs-title,22px);font-weight:700;line-height:1;color:var(--accent,#6535b5)}
.dpg-mock-entry__more{align-self:center;min-height:var(--g-hit,48px);padding:0 var(--g-s2,16px);border:0;border-top:1px solid var(--separator,#ece6e2);width:100%;
  background:none;color:var(--text,#2c211e);font:inherit;font-size:var(--g-fs-small,14px);font-weight:700;cursor:pointer}
/* 年度の冊の設定画面の控えめの［本番形式で解く］（枠だけ）と、その下の小さい説明 */
.qz-setup .dpg-mock-start{margin-top:var(--g-s1,8px);white-space:normal;line-height:1.4}
/* PC の設定画面（dpg-result.css）は全幅の行に左右 24px の余白を付けるので、幅は 100% ではなく余白の内側いっぱいにする */
:root[data-quiz-theme="paper"] .qz-setup > .dpg-mock-start:not(#_){width:auto}
.qz-setup .dpg-mock-start__note{margin:4px 0 0}
/* 棚の行から入る始める前の画面（2026-10-22 本人「始める前に1画面挟む」。views.js の buildMockIntro）。設定画面と同じ白いカード・
   紫の塗りのボタン（.qz-setup > .qz-setup__start と同じ高さ・角・字）・下線のリンク。色や飾りは足さない。
   幅は設定画面の 600px 以上の列（dpg-result.css の data-screen="setup" > .qz-page 482px）にそのまま入る。PC でも表の形にはしない（短いので1列）。 */
.dpg-mock-intro{display:flex;flex-direction:column;gap:var(--g-s2,16px)}
.dpg-mock-intro__summary{margin:0;font-size:var(--g-fs-body,17px);font-weight:700;line-height:1.5;color:var(--text,#2c211e)}
.dpg-mock-intro__prev{margin:calc(var(--g-s1,8px) * -1) 0 0;font-size:var(--g-fs-small,14px);line-height:1.5;color:var(--text-2,#6b5f5a)}
.dpg-mock-intro__notes{display:flex;flex-direction:column;gap:var(--g-s1,8px);margin:0;padding:0 0 0 1.2em;line-height:1.6}
.dpg-mock-intro__notes > .qz-setup__note{font-size:var(--g-fs-small,14px)}
.dpg-mock-intro__start{min-height:var(--g-btn-h,52px);border-radius:var(--g-radius-btn,14px);font-size:var(--g-fs-body,17px);font-weight:800}
.dpg-mock-intro__cancel{align-self:center;margin-top:calc(var(--g-s1,8px) * -1);padding-inline:var(--g-s2,16px)}