/* qa.css — QAテスト(スタッフ向け理解度チェック)モジュール固有スタイル
 *
 * 2026-09-04(v60): 発注者却下(「デザイン、アニメーション、全てにおいて失格」「ダサすぎる」
 * 「背景もおかしい」)を受けた市場再設計(research/design-brief.md §3〜§10)の実装。
 * design.css の v60 トークン(--navy-900 等、brief-common.md 裁定4)と
 * v60-base.css の共通部品(.v60-btn / .v60-card / .v60-mascot / [data-reveal] 等)の上に
 * このページ固有の部品だけを積む。旧版が使っていた --brand/--accent/--surface* 系の
 * clinical-learning スコープ変数(design.css 988行付近)は、他画面(肌診断)とも共有する
 * 古い配色前提なので、この画面では使わない。かわりに --navy-900/700/500/100・--ink・--ink-2・
 * --gold-line・--gold-text・--gold-soft・--paper・--cream・--line-1 を直接使う。
 *
 * 色トークンの祖先解決について(ui-readability-contract.test.js 向けの注記):
 * このテストは「セレクタ文字列を静的に見て祖先の背景を推測する」ため、暗い面の子孫に
 * color を書くときは、その面のクラス(.qa-result-hero など)自身にも background 宣言を
 * 持たせ、セレクタの祖先トークンとして解決できるようにしてある。白文字はどこにも
 * color 宣言を書かず、その面の color:#fff からの継承に任せている
 * (宣言が無ければ検査対象にもならない)。
 *
 * 角丸は 0 / var(--r-card)=12px / var(--r-pill)=999px の3種だけ。影は既定で使わない。
 *
 * 2026-09-04(v61) 発注者「無駄しかない・わかりづらい」への対応: ホームの紺ヒーロー・
 * 開始前確認の紺ヒーロー・SP固定バー/PC浮遊CTA・英字eyebrow・data-revealを廃した
 * (画面を「道具」として作り直す市場再設計 v61)。結果ヒーロー(quiz.js内、合否マスコット
 * 付き)だけは機能的な合否表示として残す。
 *
 * 並びは1回だけ: ページ地 → モードカード → 分野一覧(cream) →
 * クイズ(開始前確認 → 進行 → 問題カード → 選択肢 → フィードバック) → 結果ヒーロー →
 * 分野別正答率 → 振り返り → 記録表 → 印刷 → レスポンシブ → reduced-motion。
 */

/* ══ ページの地 ══════════════════════════════════════════════════════
 * 2026-09-04夜(v62)発注者「背景がなさ過ぎてみずらい」への対応: body(qa-page)に
 * 直接 background を持たせると、v60-base.css が body::before で描く紺金の帯
 * (html は cream / body は transparent の前提)を覆い隠してしまう(home.css で
 * 実際に踏んだ不具合と同じ原因)。ページの地色そのものはここでは持たず、
 * html の cream と body::before の帯に任せる。 */
/* 中身が画面より短いとき、フッターの下に白地が残っていた
   (実測: 1080x1920 の設問画面で917px、1920x1080 で149px、768x1024 で73px)。
   本文を縦に伸ばして、フッターを必ず画面の下端まで下げる。 */
.qa-page { display: flex; flex-direction: column; min-height: 100vh; }
.qa-page > .v61-foot { margin-top: auto; }
.qa-home-container, #qa-quiz-root { position: relative; }
/* 本文コンテナの左右余白を、ヘッダー(.app-header-inner)が使う --gutter/--gutter-sp に
   合わせる。design.css の .container は別系統の --page-gutter(16/20/18/15px)を使うため、
   そろえないとヘッダーと本文カードの左端がずれる。 */
.qa-page .container { --page-gutter: var(--gutter-sp); }
@media (min-width: 640px) { .qa-page .container { --page-gutter: var(--gutter); } }
/* 2026-09-04夜(v62・リーダー通知反映): .v62-lift は position:relative; z-index:1 だけ
 * (負のマージンは撤去済み。質問チャットでヘッダーに潜って案内役の頭が切れた事故を受けた
 * 共有側の是正)。このページでは最初のカードがヘッダーの24〜40px下から始まるよう、
 * ページ自身の上余白で帯に重ねる(design.cssの既定18〜22pxを32pxへ引き上げるだけで、
 * 負のマージンは足さない)。カードの高さで帯下辺(PC272px/SP200px)をまたげばよい。 */
.qa-page .qa-home-container { padding-top: 32px; }

/* 共通 .btn(design.css)はこの画面の外(業務画面)でも使う汎用ボタンで、角丸10px・
   既定の影付きのまま。design-brief §3-4/§9-7(角丸は0/12/999のみ・影は既定なし)に
   合わせるため、quiz.js/home.js の多数のボタンを1つずつ書き換える代わりに、
   この画面の中でだけピル+影なしへ上書きする。 */
.qa-page .btn, .qa-page .btn--primary, .qa-page .btn--secondary, .qa-page .btn--quiet, .qa-page .btn--danger {
  border-radius: var(--r-pill);
  box-shadow: none;
}
.qa-page .btn:hover, .qa-page .btn--primary:hover { box-shadow: none; }
/* 同様に共通 .card(角丸16px・既定の影)も、この画面の中でだけ角丸12px・影なしへ
   揃える。個々のカード(.qa-qcard 等)は背景・枠線だけをこの下で追加宣言する。 */
.qa-page .card { border-radius: var(--r-card); box-shadow: none; }

/* 動き(進行・切替・回答マーク)。時間はdesign-brief.md §5に合わせる。 */
/* 2026-09-15(発注者「なぞのアニメーション…意味が分からない」): qa-rise(カード段差出現)
 * は削除。qa-question-in は 8px/250ms 以下に弱め、qa-mark-in は行き過ぎ(scale(0)始まり)
 * を外して不透明度だけの「選択の印」にする(操作への反応、行き過ぎ無し)。 */
@keyframes qa-question-in { from { opacity: 0; transform: translateX(8px); } to { opacity: 1; transform: none; } }
@keyframes qa-mark-in { from { opacity: 0; } to { opacity: 1; } }

/* ══ ホーム: 2枚のモードカード(ヘッダー直下。作業領域が開いた瞬間に見える) ═══════
 * 2026-09-04(v61): 紺のヒーローを廃したので、#qa-home の最初の子として通常の
 * フロー内に置く(負のmargin-topで紺面へ重ねる旧方式は廃止)。 */
/* 2026-09-04(v61追加是正) 発注者「下の分野一覧がまだcream帯」への対応: モードカードと
   分野一覧の間の余白は、直後の .qa-category-section 自身の上パディング(24〜32px)だけに
   一本化する(ここに margin-bottom を足すと二重に空く)。 */
/* v83是正(grok #11): 見出し(h1「QAテスト」)直下の1文。分野別=合否なし・総合=100点合格を
   最初に伝える(フッターの保存範囲の注記=.v61-footのpとは役割が別。qa-briefing-leadと
   同じ「地の色+15px」の扱いに揃える)。 */
.qa-home-intro { margin: 0 0 20px; color: var(--ink-2); font-family: var(--font-sans); font-size: 15px; line-height: 1.6; }
/* v83是正(grok 依頼5 B5): 375で「（合否なし）」が語の途中で改行するため、その語だけ折り返さない(文言不変)。 */
.qa-home-intro-nowrap { white-space: nowrap; }

.qa-mode-card-grid-wrap { margin-bottom: 0; }

.qa-mode-card-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 640px) { .qa-mode-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; } }

/* カード自体は影なし・角丸12・1px線(design-brief §3-4/§9-7)。ホバーで枠だけ変える
 * (カード自体は動かさない=浮かせない、という §5 の「カードhover」規約どおり)。 */
.qa-mode-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  padding: 24px 22px 22px;
  border: 1px solid var(--line-1);
  border-radius: var(--r-card);
  background: var(--paper);
  color: var(--ink);
  text-decoration: none;
  transition: border-color var(--dur-hover) var(--ease-out), background-color var(--dur-hover) var(--ease-out);
}
.qa-mode-card:hover { border-color: var(--navy-700); background: var(--navy-100); color: var(--ink); text-decoration: none; }
.qa-mode-card:active { transform: scale(.995); }
.qa-mode-card:focus-visible { outline: 3px solid var(--navy-500); outline-offset: 2px; }
.qa-mode-card.official { border-color: color-mix(in srgb, var(--gold-line) 55%, var(--line-1)); }

/* 2026-09-04夜(v62)発注者「画像が少ない」への対応: 総合カードの案内役
 * (mascot-tablet)はカード右上に絶対配置する(.qa-mode-cardは既にposition:relative)。
 * 通常の流れに置くと96px分だけ行の高さが伸び、案内役を持たない練習カードと
 * 見出しの開始位置がずれるため(実測)、フローから外して重ねる。きっかけ帯(kicker)・
 * 見出し・数字はどれも左詰め・案内役は幅96pxの右上なので、テキストが伸びても
 * (最長の「総合QAテスト」「47問」でも)重ならない。 */
.qa-mode-card-mascot { position: absolute; top: 20px; right: 20px; }
@media (min-width: 640px) { .qa-mode-card-mascot { top: 24px; right: 22px; } }

.qa-mode-kicker {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  min-height: 24px;
  padding: 3px 12px;
  border-radius: var(--r-pill);
  background: var(--navy-100);
  color: var(--navy-700);
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  line-height: 1.4;
}
/* gold-soft地にgold-textを乗せると4.26:1でAA未達(実測)。地を白へ戻し、金は
   枠線と文字だけに使う(design-brief §7-7「金は線・文字・数字だけ」の規律どおり)。 */
.qa-mode-card.official .qa-mode-kicker { border: 1px solid var(--gold-line); background: var(--paper); color: var(--gold-text); }
.qa-mode-card-title { display: block; margin: 12px 0 0; color: var(--ink); font-family: var(--font-serif); font-size: 19px; font-weight: 700; line-height: 1.4; }
/* 数字(47問。2026-09-06以降は練習・総合とも問題バンクの全問数で同じ値)。
 * design-brief §3-2 num、装飾(aria-hidden)なので色は読みやすさだけ考える。 */
.qa-mode-num {
  display: block;
  margin: 6px 0 0;
  color: var(--gold-text);
  font-family: var(--font-sans);
  font-size: 40px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
  line-height: 1;
}
.qa-mode-description { display: block; margin: 10px 0 0; color: var(--ink-2); font-family: var(--font-sans); font-size: 14px; font-weight: 400; line-height: 1.6; }
.qa-mode-card .qa-mode-card-action { width: 100%; min-height: 44px; margin-top: 16px; box-sizing: border-box; }

/* 2026-09-15: 段差出現(qa-rise)を削除。最初から静止して表示する。 */

/* QAトップの「続きから」導線。中断中だけ現れる。モードカードの直後、分野一覧の前。 */
.qa-resume-card {
  position: relative;
  display: grid;
  gap: 3px;
  margin: 24px auto 0;
  max-width: var(--container);
  padding: 18px 20px;
  border: 1px solid var(--line-1);
  border-radius: var(--r-card);
  background: var(--navy-100);
  color: var(--ink);
  text-decoration: none;
  transition: border-color var(--dur-hover) var(--ease-out);
}
.qa-resume-card:hover { border-color: var(--navy-700); color: var(--ink); text-decoration: none; }
.qa-resume-card:focus-visible { outline: 3px solid var(--navy-500); outline-offset: 2px; }
.qa-resume-card-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--navy-700);
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
}
.qa-resume-card-kicker::before { content: ""; flex: 0 0 auto; width: 16px; height: 2px; border-radius: 2px; background: var(--gold-text); }
.qa-resume-card-title { color: var(--ink); font-family: var(--font-sans); font-size: 16px; font-weight: 700; line-height: 1.4; }
.qa-resume-card-meta { color: var(--ink-2); font-size: 13px; font-variant-numeric: tabular-nums; }
.qa-resume-card-action { justify-self: start; min-height: 44px; margin-top: 10px; }

/* ══ ホーム: 分野を選ぶ(白地のまま、上の2枚のモードカードと同じコンテナ幅で続く) ══
 * 2026-09-04(v61追加是正) 発注者「下の帯(全幅cream+大見出し+リード文+大きな写真)は
 * 却下されたヒーロー面と同じ」への対応: 全幅100vw化・cream地・72/120px余白・
 * 26/36pxの明朝見出し・リード文・アスペクト比4:3の大きな写真をすべて廃した。
 * home.js側の .container(--page-max 1200)にそのまま収まる通常フローの1節にし、
 * 上下の余白だけ持つ(SP24px/PC28px、旧値の1/3〜1/4)。 */
.qa-category-section { padding: 24px 0 24px; background: transparent; color: var(--ink); }
@media (min-width: 640px) { .qa-category-section { padding: 28px 0 32px; } }

/* 2026-09-04夜(v62)発注者「画像が少ない」への対応: PC(769px以上)は見出し+一覧の
 * 右側にスタッフ写真(.v62-art--md、240px)を添える。v61追加是正2回目で消した写真とは
 * 別物(あちらは見出し脇の小さな断片、こちらは節全体の右カラム)。
 * v81 是正 C(2026-09-14): 上の v62 の判断(SPは幅が足りないため出さない)を改める。
 * 実測 2026-09-14: 挿絵は 1280 で 240x180、375/768(769px未満のため)は display:none = 0x0
 * (両院)。発注者は繰り返し「画像が少ない」と言っており、public/faq/faq.css の P-01是正
 * (v80、faq-intro-art)と同じ理由・同じ扱いにする: 横並びをやめて縦積みにし、絵は本文の
 * 下へ 1 つ(PCと同じ 240x180 のカード大のまま、大きくしない= v60/v61 の判定を保つ)。 */
.qa-category-layout { display: flex; align-items: flex-start; gap: 24px; }
.qa-category-main { flex: 1 1 auto; min-width: 0; }
.qa-category-art { display: block; flex: 0 0 auto; }
@media (max-width: 768px) {
  .qa-category-layout { flex-wrap: wrap; }
  .qa-category-main { flex: 1 1 100%; }
  .qa-category-art { width: min(240px, 64vw); margin-inline: auto; }
}

/* 見出しは18〜20pxのゴシック(旧: 26/36pxの明朝)。 */
.qa-category-head { margin: 0 0 16px; }
.qa-category-head h2 { margin: 0; color: var(--ink); font-family: var(--font-sans); font-size: 18px; font-weight: 700; line-height: 1.4; }
@media (min-width: 640px) { .qa-category-head h2 { font-size: 20px; } }

.qa-category-card-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.qa-category-card {
  position: relative;
  display: grid;
  /* v64(2026-09-05 夕方): 分野アイコンを 56→64px(発注者「イラストなどもっとわかりやすくして」)。 */
  grid-template-columns: 64px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  min-width: 0;
  min-height: 88px;
  padding: 14px 16px;
  overflow: hidden;
  border: 1px solid var(--line-1);
  border-radius: var(--r-card);
  background: var(--paper);
  color: var(--ink);
  text-decoration: none;
  transition: border-color var(--dur-hover) var(--ease-out), background-color var(--dur-hover) var(--ease-out);
}
.qa-category-card:hover { border-color: var(--navy-700); background: var(--navy-100); color: var(--ink); text-decoration: none; }
.qa-category-card:active { transform: scale(.995); }
.qa-category-card:focus-visible { outline: 3px solid var(--navy-500); outline-offset: 2px; }
.qa-category-icon {
  position: relative;
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  min-height: 64px;
  border-radius: var(--r-card);
  background: var(--navy-100);
  color: var(--navy-700);
  overflow: hidden;
  transition: background var(--dur-hover) var(--ease-out);
}
/* アイコン自体はホバーで色を変えない(gold-soft地にgold-textを乗せると4.26:1で
   AA未達=実測)。ホバーの手応えはカード自身の枠・地の変化(上のルール)で十分に伝わる。 */
.qa-category-card:hover .qa-category-icon { background: var(--paper); }
/* v63: 生成アイコン(navy×goldのイラスト、cream地)。線アイコンの上に重ねて覆う。
   画像が無い間(onerrorで自身を除去)は下の線アイコンがそのまま見える。
   拡大は共有の.v62-art imgと同じ600ms/1.04倍(brief-v63 §Q3)。 */
.qa-category-icon-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background: var(--cream);
  object-fit: cover;
  transition: transform 600ms var(--ease-out);
}
.qa-category-card:hover .qa-category-icon-img,
.qa-category-card:focus-visible .qa-category-icon-img { transform: scale(1.04); }
@media (prefers-reduced-motion: reduce) {
  .qa-category-icon-img { transition: none; }
  .qa-category-card:hover .qa-category-icon-img,
  .qa-category-card:focus-visible .qa-category-icon-img { transform: none; }
}
.qa-category-icon svg,
.qa-question-visual svg {
  width: 28px;
  height: 28px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.qa-category-card-copy { display: grid; min-width: 0; }
.qa-category-card-name { color: var(--ink); font-family: var(--font-sans); font-size: 15px; font-weight: 700; }
.qa-category-card-meta { margin-top: 3px; color: var(--ink-2); font-size: 12px; font-variant-numeric: tabular-nums; }

/* ホーム末尾: 結果表リンクと一言注記(白地に戻る)。 */
.qa-home-footer { margin: 40px auto 0; max-width: var(--container); text-align: center; }
.qa-home-footnote { margin: 16px 0 0; }

/* ══ クイズ: 開始前の確認 ═════════════════════════════════════════════ */
.qa-quiz-page { --page-max: 920px; }

/* 2026-09-04(v61) 発注者「無駄しかない・わかりづらい」への対応: 紺の全幅ヒーロー+
   英字eyebrow(EXAM/PRACTICE/RETRY)を廃し、装飾なしの見出し+リード文にした。
   2026-09-05(v63 検査役是正): v62で足した全画面共通の紺帯(body::before)により
   「ヘッダー直下、ページ地(白)の上」という前提が崩れ、帯に直置きだった見出し・リードが
   帯とほぼ同色になり不可視化していた(実測)。quiz.js側でこの2つを.qa-briefing-bodyの
   最初の子要素に移し、.qa-formal-result-head h2と同じ「白カードの中」に戻したので、
   以後は.qa-briefing-bodyの白背景の中の見出しとして扱う(色宣言はどちらも持たず、
   var(--ink)/var(--ink-2)の継承のまま=白地なら安全)。 */
.qa-briefing-head { margin: 0 0 20px; }
.qa-briefing-title { margin: 0; font-family: var(--font-serif); font-size: 22px; font-weight: 700; letter-spacing: -.01em; }
@media (min-width: 640px) { .qa-briefing-title { font-size: 26px; } }
.qa-briefing-lead { margin: 10px 0 0; color: var(--ink-2); font-family: var(--font-sans); font-size: 15px; font-weight: 400; line-height: 1.6; }
/* v63(2026-09-05 検査役是正): 見出しを移して1枚のカードになったので、他画面の
   最初のカード(.v62-card、影+枠+角丸12)と同じ処方を足す。.v62-card自体を付けると
   display:flexが.qa-briefing-back(戻るリンク)をstretchで全幅化してしまう
   (フォーカスリングが不自然に伸びる)ため、必要な3つの宣言だけをここに直接書く。 */
.qa-briefing-body {
  padding: 28px 26px;
  background: var(--paper);
  border: 1px solid var(--line-1);
  border-radius: var(--r-card);
  box-shadow: 0 10px 30px rgba(11, 23, 48, .10), 0 1px 2px rgba(11, 23, 48, .05);
}
@media (min-width: 640px) { .qa-briefing-body { padding: 32px; } }
@media print { .qa-briefing-body { box-shadow: none; } }
.qa-briefing-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: auto auto;
  grid-auto-flow: column;
  gap: 16px;
  margin: 0 0 16px;
  padding: 0 0 20px;
  border-bottom: 1px solid var(--line-1);
}
.qa-briefing-grid dt { margin: 0; font-size: 12px; font-weight: 700; letter-spacing: .03em; }
.qa-briefing-body .qa-briefing-grid dt { color: var(--gold-text); }
.qa-briefing-grid dd { margin: 4px 0 0; color: var(--ink); font-size: 16px; font-weight: 700; line-height: 1.4; }
.qa-briefing-record { margin: 0 0 20px; color: var(--ink-2); font-size: 13px; line-height: 1.7; }
/* v83是正(gemini文言監査 #24): 136字前後の1段落を箇条書きに分けた(quiz.jsのbriefingRecordItems)。
   文字の大きさ・色・行間は上のpのときと同じ規則を使い、ここではリストの見た目だけを足す
   (skin.cssのul.sk-plan-risk-note=v83 P-23と同じ考え方)。 */
ul.qa-briefing-record { padding-left: 1.2em; list-style: disc; }
ul.qa-briefing-record > li { margin: 0 0 4px; }
ul.qa-briefing-record > li:last-child { margin-bottom: 0; }
.qa-briefing-form { display: flex; flex-direction: column; align-items: center; }
.qa-briefing-start { min-width: 240px; }
/* 2026-09-20: 途中の総合QAテストがあるときの 2 択(続きから再開する/新しく始める)。釦を縦に 2 つ並べる。 */
.qa-resume-choice-actions { gap: 12px; }
.qa-briefing-back { display: inline-block; margin-top: 16px; }
.qa-candidate-block {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(150px, .65fr);
  gap: 10px 12px;
  width: 100%;
  margin: 0 0 20px;
}
.qa-name-field-group, .qa-date-field-group, .qa-store-field-group { min-width: 0; }
.qa-store-field-group { grid-column: 1 / -1; }
.qa-name-field-group > label, .qa-date-field-group > label, .qa-store-field-group > label { display: block; color: var(--ink); font-size: 13px; font-weight: 700; }
.qa-candidate-input {
  display: block;
  width: 100%;
  min-height: 48px;
  box-sizing: border-box;
  margin-top: 7px;
  padding: 10px 12px;
  border: 1px solid var(--line-1);
  border-radius: var(--r-card);
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  transition: border-color var(--dur-hover) var(--ease-out);
}
.qa-candidate-input:hover { border-color: var(--navy-500); }
.qa-candidate-input[readonly] { color: var(--ink-2); background: var(--navy-100); cursor: not-allowed; font-variant-numeric: tabular-nums; }
.qa-candidate-input[readonly]:hover { border-color: var(--line-1); }
.qa-candidate-input:focus-visible { outline: 3px solid var(--navy-500); outline-offset: 1px; }
.qa-candidate-help, .qa-candidate-status { grid-column: 1 / -1; margin: 0; font-size: 13px; line-height: 1.5; }
.qa-candidate-help { color: var(--ink-2); }
.qa-candidate-status:not(:empty) { color: var(--text-status-danger); font-weight: 700; }
.qa-briefing-error {
  margin: 0 0 16px;
  padding: 12px 14px;
  border-left: 3px solid var(--err);
  border-radius: 0 var(--r-card) var(--r-card) 0;
  background: var(--err-soft);
  color: var(--text-status-danger);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.6;
}

/* ══ クイズ: 進行(上部の帯・金の進捗バー) ═══════════════════════════════
   発注者フィードバック(2026-09-04): 進捗の枠付きカード+設問の枠付きカードの
   二重箱が旧デザインのままと指摘された。ここは枠・地色を持たない帯にする。 */
.qa-topbar { margin-bottom: 20px; }
.qa-return-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
/* 2026-09-21: 結果表(results.html)の戻る釦。表・件数の注記の下に少し間を空けて置く。 */
.qa-results-return { margin-top: 14px; justify-content: center; flex-wrap: wrap; }
.qa-site-home-link { flex: 0 0 auto; white-space: nowrap; min-height: 40px !important; padding-inline: 12px !important; }

/* 2026-09-22(発注者「閉じて戻るボタンを足す」)是正 低-2/低-3: 別タブで開かれた直後だけ出る釦。
   表示するかどうかは close-return-detect.js が body より前に付ける印
   (:root[data-close-return="1"])で決める。position:fixed でふつうの流れの外に置くので、
   出す/出さないで他の要素の高さ・位置が一切変わらない(記録が多くてもスクロール不要)。
   独立検査是正 低-3(2回目): 下の並び(.qa-results-return)にも同じ釦を重複して置いていたが、
   1箇所に絞った(この浮かせた釦だけ)。 */
.qa-close-return-float {
  display: none;
  position: fixed;
  top: 12px;
  right: 12px;
  z-index: 60;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}
:root[data-close-return="1"] .qa-close-return-float { display: flex; }
/* 2026-09-22是正(独立検査 低-1): hidden属性は使わない。中身が空の間はテキストノードが
   無いので行ボックスが生まれず高さ0(margin/padding/borderも0のまま=余白・枠も無い)。
   results.js が300ms後に textContent を入れると初めて、釦の近くへ重ねる小さな札になる。 */
.qa-close-return-note { margin: 0; color: var(--ink-2); font-size: 12px; line-height: 1.5; text-align: right; }
.qa-close-return-note:not(:empty) {
  background: var(--paper);
  padding: 6px 10px;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(16, 32, 63, .18);
}
@media (max-width: 767px) {
  /* 2026-09-22是正(独立検査 低-3)→2026-09-23(独立検査 481pxの重なり、top:92pxへ)
     →2026-09-23是正(独立検査 中-1、同じ重なりの指摘が2回目のためtopの微調整はやめて
     方法を変える): 767px以下では重ねて置かない。position:staticでふつうの流れへ戻し、
     HTML上の位置(#app-headerの直後・.containerより前=H2より前)はそのままに、
     浮かせるのをやめるだけで自然に「見出しの上」の1行になる。後続の要素を押し下げるだけ
     なので、記録が0件・1件・多数件のどれでも構造上重なりが起きない(320〜1280pxを
     細かく実測)。.containerと同じ最大幅・左右余白に揃えて縦の線を合わせる。 */
  .qa-close-return-float {
    position: static;
    max-width: var(--page-max, 760px);
    margin: 10px auto 0;
    padding-inline: var(--page-gutter, 20px);
    box-sizing: border-box;
  }
}
/* v103(2026-09-21 発注者指示「QAの何ページみたいなやついらない」): 帯の出典の札
   (qa-source-chip)を画面から外したので、その書式もここから削除した。 */
/* 進捗バーは design-brief §4-4 のとおり金。
   2026-09-04夜(v62): 共有の.v62-bar(高さ8px・navy-100地・<i>の幅を600msで伸ばす)に
   乗せ替え、塗り色だけこのページで金へ上書きする(形・動きの実装は共有部品に委ねる)。 */
.qa-topbar .q-progress > i { background: var(--gold-line); }
.qa-topbar-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 10px; font-size: 13px; }
/* 2026-09-04夜(v62・司令塔指摘): .qa-topbarは常に帯(body::before、地色#0b1730相当)の
 * 上に乗る(PC/SPとも、質問カードは.v62-lift対象外なのでこの行の上余白は帯の内側)。
 * 通常の--ink/--ink-2は暗色地では読めない(実測)。home.css .home-title と同じ処方
 * (白+text-shadow、実測17.4:1)にする。 */
/* v65(2026-09-05 夜、発注者「もっと明るい、見やすい、わかりやすいにして」): 帯を明るい生成りの絹に
   変えたので、帯の上の文字は白+影から濃紺(--navy-900)+白の薄い縁取りに。 */
.qa-qcount { color: var(--navy-900); font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; text-shadow: 0 1px 0 rgba(255, 255, 255, .7); }
.qa-remaining { color: var(--navy-900); font-variant-numeric: tabular-nums; text-shadow: 0 1px 0 rgba(255, 255, 255, .7); }
.qa-progress-steps { display: flex; flex-wrap: wrap; gap: 4px; margin-left: auto; }
/* 6px・薄く(発注者フィードバック): 旧8px・濃い輪郭から控えめな粒へ。 */
.qa-progress-step { width: 6px; height: 6px; border: 1px solid var(--line-1); border-radius: 50%; background: var(--paper); transition: background-color var(--dur-hover) var(--ease-out), width var(--dur-hover) var(--ease-out); }
.qa-progress-step.done { border-color: var(--line-1); background: var(--navy-100); }
.qa-progress-step.current { width: 14px; border-radius: 999px; border-color: var(--gold-line); background: var(--gold-soft); }

/* 中断からの再開バナー */
.qa-resume-notice {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  padding: 12px 14px;
  border: 1px solid var(--line-1);
  border-radius: var(--r-card);
  background: var(--navy-100);
  color: var(--ink);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.5;
}
.qa-resume-text { flex: 1 1 auto; min-width: 0; }
.qa-resume-mark { flex: 0 0 auto; padding: 3px 10px; border-radius: 999px; background: var(--navy-700); color: #ffffff; font-size: 11px; font-weight: 700; letter-spacing: .05em; }
.qa-resume-restart {
  flex: 0 0 auto;
  min-height: 44px;
  padding: 8px 14px;
  border: 1px solid var(--line-1);
  border-radius: 999px;
  background: var(--paper);
  color: var(--navy-700);
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: border-color var(--dur-hover) var(--ease-out), background-color var(--dur-hover) var(--ease-out);
}
.qa-resume-restart:hover { border-color: var(--navy-700); background: var(--paper); }
.qa-resume-restart:focus-visible { outline: 3px solid var(--navy-500); outline-offset: 2px; }

/* ══ クイズ: 問題ブロック ═══════════════════════════════════════════════
   発注者フィードバック(2026-09-04): 進捗の枠付きカード+設問の枠付きカードの
   二重箱が旧デザインのままと指摘された。ここも枠・地色を持たない。 */
/* v83是正(grok #12、実測 v83/qa-lane: 全7問中7問で再現): 前の設問で下までスクロールした
   位置が次の(短い)設問にも残り、カード上端が粘着ヘッダー(.app-header、72/89px)の下に
   隠れていた。quiz.jsの設問本文フォーカスをスクロール込みに戻した分、ここでヘッダー分の
   余白を確保する(skin.cssの#skin-app h2, button, summaryと同じ値・同じ考え方)。 */
#qa-quiz-root .qa-qcard, #qa-quiz-root #qa-question-body, #qa-quiz-root button, #qa-quiz-root summary { scroll-margin-top: 126px; }

.qa-qcard {
  position: relative;
  margin-bottom: 20px;
  /* 実際にはページ地(白)と同色で見た目は変わらないが、静的コントラスト検査が
     祖先の地色を解決できるよう明示しておく(qa-result-heroと同じ理由)。 */
  background: var(--paper);
  /* 2026-09-15: fill-mode を both→backwards に(実測: bothは完了後もfinished状態で
     document.getAnimations()に残り続けるため。to側はopacity:1/transform:noneで
     既定値と同じなのでforwardsを外しても表示は変わらない)。 */
  animation: qa-question-in 250ms var(--ease-out) backwards;
}
/* 2026-09-04夜(v62)発注者「背景がなさ過ぎてみずらい」への対応: 設問カードを白カード
 * (.v62-card、影+枠+角丸12)にした。.v62-card自体はpaddingを持たないため、ここで
 * 内側の余白だけ足す。 */
.qa-qcard.v62-card { padding: 22px 20px 20px; }
@media (min-width: 640px) { .qa-qcard.v62-card { padding: 26px 24px; } }
.qa-badges { margin-bottom: 10px; gap: 6px; }
.qa-question-visual-row { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 16px; }
.qa-question-visual { display: grid; width: 40px; height: 40px; place-items: center; border-radius: var(--r-card); background: var(--navy-100); color: var(--navy-700); }
.qa-question-visual svg { width: 22px; height: 22px; }
.qa-question-visual-copy { min-width: 0; }
/* .v60-eyebrowと同じ語彙(金12px・字間広め)。祖先が紺面ではないのでgold-textを使う。 */
.qa-question-visual-label { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 10px; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.qa-qcard .qa-question-visual-label { color: var(--gold-text); }
.qa-question-visual-label::before { content: ""; flex: 0 0 auto; width: 14px; height: 1px; background: currentColor; }
.qa-question-text { min-width: 0; color: var(--ink); font-family: var(--font-serif); font-size: 24px; font-weight: 700; line-height: 1.5; letter-spacing: -.01em; }

.qa-key-hint { margin: 16px 0 10px; color: var(--ink-2); font-size: 13px; transition: color var(--dur-hover) var(--ease-out); }
#qa-quiz-root:has(.qa-options .q-option:focus-visible) .qa-key-hint { color: var(--navy-700); font-weight: 700; }
@media (any-hover: none) and (any-pointer: coarse) {
  .qa-key-hint { display: none; }
}
/* v84 依頼 12(grok v83 依頼 5 の表 A No.12、2026-09-16): 375 でもこの注記が残っていた。
   上の P-11 の判定(タッチなら出さない)は端末の指標だけを見るので、マウス相当で
   見たとき(検査ツールや幅を狭めた PC)は 375 でも出ていた。その幅で開く人はほぼ
   タッチで、数字キーの案内は読むだけ無駄になるため、560px 以下は指標に関わらず出さない。
   561px 以上は P-11 のまま(タッチは非表示・マウスは表示)。
   キーボード操作そのもの(1〜4 で選択肢へ移り、Enter で押す。本番はそこから「次へ」で送る。
   quiz.js の bindOptionShortcuts)は変えない。 */
@media (max-width: 560px) {
  .qa-key-hint { display: none; }
}

.qa-options { margin-bottom: 14px; gap: 10px; }
.qa-options .q-option {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 58px;
  padding: 14px 18px;
  border: 1px solid var(--line-1);
  border-radius: var(--r-card);
  background: var(--paper);
  color: var(--ink);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.6;
  text-align: left;
  transition: border-color var(--dur-hover) var(--ease-out), background-color var(--dur-hover) var(--ease-out);
}
/* v82(2a、発注者2026-09-15「選んでないのに既に選択中の色になっている」への対応):
   hoverのbackgroundが.qa-option-selected(下)と同じ--navy-100だった。hoverは
   枠線だけにしbackgroundは変えない。(hover: hover) and (pointer: fine)で囲み
   タッチ端末には最初から効かせない(:focus-visibleはキーボード操作の印なので
   選択中と紛らわしくならず、hover非対応端末でも要るため据え置き)。 */
@media (hover: hover) and (pointer: fine) {
  .qa-options .q-option:not(:disabled):hover { border-color: var(--navy-700); }
}
.qa-options .q-option:not(:disabled):active { transform: scale(.994); }
.qa-options .q-option:focus-visible { outline: 3px solid var(--navy-500); outline-offset: 2px; }
.qa-options .q-option:not(:disabled):focus-visible { border-color: var(--navy-700); background: var(--navy-100); }
.qa-option-key {
  display: grid;
  flex: 0 0 30px;
  width: 30px;
  height: 30px;
  place-items: center;
  border: 1px solid var(--line-1);
  border-radius: var(--r-card);
  background: var(--cream);
  color: var(--ink-2);
  font-size: 13px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  transition: border-color var(--dur-hover) var(--ease-out), background-color var(--dur-hover) var(--ease-out), color var(--dur-hover) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .qa-options .q-option:not(:disabled):hover .qa-option-key { border-color: var(--navy-700); background: var(--paper); color: var(--navy-700); }
}
.qa-options .q-option:not(:disabled):focus-visible .qa-option-key { border-color: var(--navy-700); background: var(--paper); color: var(--navy-700); }
.qa-option-text { min-width: 0; flex: 1 1 auto; }
.qa-options .q-option:disabled .qa-option-key { display: none; }
.qa-options .q-option.correct { border-color: var(--ok); border-width: 2px; background: var(--ok-soft); color: var(--ink); }
.qa-options .q-option.wrong { border-color: var(--err); border-width: 2px; background: var(--err-soft); color: var(--ink); animation: shake .3s var(--ease-out); }
.qa-options .q-option.correct .qa-option-mark { color: var(--text-status-success); }
.qa-options .q-option.wrong .qa-option-mark { color: var(--text-status-danger); }
.qa-options .q-option:disabled:not(.correct):not(.wrong):not(.qa-option-selected) { opacity: .72; }
.qa-options .q-option:disabled:not(.correct):not(.wrong):not(.qa-option-selected)::before { flex: 0 0 1.6rem; width: 1.6rem; content: ""; }
/* 2026-09-08(v74): 総合QAテスト本番は正誤(correct/wrong)を付けないため、選んだ選択肢
   だけこの中立の紺で示す(4択とも同じ見た目になって選んだものが分からなくなるのを防ぐ)。
   v103(2026-09-21): 本番は「次へ」を押すまで選び直せるので、この印は送る前の選択中の印にも
   なった(押すたびに1つだけへ付け替える。読み上げには aria-pressed で伝える)。 */
.qa-options .q-option.qa-option-selected { opacity: 1; border-color: var(--navy-700); border-width: 2px; background: var(--navy-100); color: var(--ink); }
/* ○×の幅ぶんの詰め物は、送った後(4択とも押せなくなり、数字の札が消えた後)だけ。
   v103 の「送る前の選択中」は数字の札が出ているので、ここで詰め物を足すと
   選んだ選択肢の文だけ 1.6rem 右へずれる(実測 375)。 */
.qa-options .q-option:disabled.qa-option-selected::before { flex: 0 0 1.6rem; width: 1.6rem; content: ""; }
.qa-option-mark { flex: 0 0 1.6rem; width: 1.6rem; font-size: 1.35rem; font-weight: 700; line-height: 1; text-align: center; animation: qa-mark-in 200ms var(--ease-out); }

/* 2026-09-04夜(v62)発注者「アニメーションどこ」への対応: 押した瞬間の手応え
 * (結果が届く前に1回だけ1.02倍→戻る)。.qa-page * の一括reduce-motion停止で
 * reduced-motion環境では動かない。 */
@keyframes qa-option-pick { 0% { transform: scale(1); } 50% { transform: scale(1.02); } 100% { transform: scale(1); } }
.qa-options .q-option.qa-option-picked { animation: qa-option-pick 220ms var(--ease-out); }
/* 2026-09-21(v102 目視 低-1): 混雑で待つ間・諦めの面では 4 択とも disabled(上の .72 の薄さ)になり、
   押した 1 つが 220ms の動きの後は見分けられなかった。押した選択肢(qa-option-picked は押した釦にだけ付く)
   に選択色(qa-option-selected と同じ紺)を残す。correct/wrong/selected が付いたらそちらの色に譲る。
   未選択の 3 つには何も付かない= 2026-09-15 の「未選択が選択色になる」不具合とは無縁。 */
.qa-options .q-option.qa-option-picked:not(.correct):not(.wrong):not(.qa-option-selected) { opacity: 1; border-color: var(--navy-700); border-width: 2px; background: var(--navy-100); color: var(--ink); }

/* ══ クイズ: 回答後のフィードバック ═══════════════════════════════════ */
.q-feedback { padding: 20px; border: 1px solid var(--line-1); border-radius: var(--r-card); background: var(--paper); }
.q-feedback.ok { border-color: color-mix(in srgb, var(--ok) 45%, var(--line-1)); }
.q-feedback.ng { border-color: color-mix(in srgb, var(--err) 45%, var(--line-1)); }
.qa-feedback-title { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; color: var(--ink); font-size: 17px; font-weight: 700; }
.qa-feedback-mark { flex: 0 0 46px; width: 46px; text-align: center; font-size: 42px; font-weight: 700; line-height: 1; animation: qa-mark-in 200ms var(--ease-out); }
.q-feedback.ok .qa-feedback-mark { color: var(--text-status-success); }
.q-feedback.ng .qa-feedback-mark { color: var(--text-status-danger); }
.qa-feedback-label { color: var(--ink); line-height: 1.35; }
.qa-feedback-body { color: var(--ink); font-size: 15px; line-height: 1.75; white-space: pre-line; }
.qa-feedback-safety { margin: 12px 0 0; padding-top: 10px; border-top: 1px solid var(--line-1); color: var(--ink-2); font-size: 13px; line-height: 1.6; }
/* v103(2026-09-21): 本番の回答直後の受付表示(qa-exam-ack)は無くなった。本番は「次へ」を
   押した時に送り、受け付けられたらそのまま次の設問へ進む(間に面を挟まない)。
   出典の行(qa-feedback-reference)も発注者指示で外した。 */
/* 「次へ」は本番では選択肢の下に最初から置き、選ぶまで押せない(design.cssの:disabled)。 */
/* その上の 1 行(選び直せる案内)は、キーの案内と違って狭い画面・触る画面でも隠さない。 */
.qa-reselect-note { margin: 0; font-size: 13px; line-height: 1.6; }
.qa-next-btn { margin-top: 14px; min-height: 50px; }
.qa-answer-recovery { margin-top: 12px; }

/* ══ 結果: 合否カード(白地。2026-09-04 夕方 v61 納品前検査の裁定) ═══════════════
 * 直前の版はここが「全幅(100vw)・高さ400px・紺地+放射グラデ・スコア96px金・
 * 右端に200pxの立ち絵」のヒーロー面だった(実測 1920×400 / rgb(16,32,63))。
 * 発注者却下(brief-v61 §0「2枚目の場所いらない/3枚目もいらない」)と §1-2
 * 「ヒーロー面(全幅の紺面+大見出し)」「大きな立ち絵」「装飾背景」の禁止に該当する。
 * 20問を解き終えた後にしか出ないため v61 の静的検査をすり抜けていた。
 * 白地のカード1枚に戻す。
 * 2026-09-04夜(v62)発注者「画像が少ない」への対応: 合否の印を、v50-visual.css が
 * ::after の背景画像で描く48px版から、実imgの.v62-mascot(96px)へ差し替えた
 * (quiz.js .qa-result-head)。v50-visual.css は共有ファイルなので触らず、旧::afterは
 * 下の.qa-result-hero.pass/.fail/.done::afterで content:none にして消す
 * (.qa-pageを足して同点の詳細度勝負を避け、確実に上書きする)。 */
.qa-result-hero {
  position: relative;
  isolation: isolate;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 28px 20px 24px;
  border: 1px solid var(--line-1);
  border-radius: var(--r-card);
  background: var(--paper);
  text-align: center;
}
@media (min-width: 640px) { .qa-result-hero { padding: 32px 24px 28px; } }
/* 案内役を右下に置くぶんだけ、右側の内容が重ならないよう余白を確保する。 */
/* 案内役は 48px の印なので、内容は面の中央に置いたままで重ならない
   (中央の文字列は最大でも約 210px、カードは 856px)。padding で右へ逃がすと
   点数と合否のバッジだけが左へずれて見えたため、逃げは作らない。 */
/* design.css の h1,h2,h3 { color: var(--text) } は要素セレクタで勝つため、
   白地に戻した今も見出しの色はここで明示しておく(値は本文色と同じ)。 */
.qa-result-hero :is(h1, h2, h3, .qa-result-title) { color: var(--ink); }
/* v50-visual.css の旧::after(48px・背景画像の合否マーク)は使わない。実imgへ
 * 差し替えたため消す(共有ファイルは触らず、こちらの.qa-pageで詳細度を上回る)。 */
.qa-page .qa-result-hero.pass::after,
.qa-page .qa-result-hero.fail::after,
.qa-page .qa-result-hero.done::after { content: none; }
/* 見出し+案内役(.v62-mascot)を1行に。狭い幅ではCJK見出しの行内改行で自然に収まる
 * (最小幅ではmascot 96px+gap 14pxを差し引いた分だけ見出しが折り返す)。 */
.qa-result-head { display: flex; align-items: center; justify-content: center; gap: 14px; margin-bottom: 12px; }
.qa-result-head .qa-result-headline { margin-bottom: 0; min-width: 0; }
.qa-result-mascot { flex: 0 0 auto; }
.qa-result-headline { margin-bottom: 12px; font-family: var(--font-sans); font-size: 20px; font-weight: 700; letter-spacing: .01em; }
@media (min-width: 640px) { .qa-result-headline { font-size: 22px; } }
/* 2026-09-06(発注者指示): 47問化で正答数と100点換算スコアが一致しなくなったため、
 * 大きな数字が「100点換算」であることを示す小さなきっかけ帯を上に添える。 */
.qa-result-score-kicker { font-size: 12px; letter-spacing: .04em; }
/* v82 JX-M3(発注者不具合報告、2026-09-15): 正答率モードで「67」と単位「%」が別行に分かれ
   読みにくかった。「67%」を1語として同じ行に並べる(quiz.jsが%モードのときだけ
   .q-score-unit-inlineを添える。100点換算モードは元どおり数字だけ)。 */
.qa-result-hero .q-score-big {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 1px;
  font-family: var(--font-sans);
  font-size: 48px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
  line-height: 1;
}
/* em はテスト(test/ui-readability-contract.test.js)が16px基準で静的判定するため使わない
   (実際は48/56px親の中で.48em=23/27pxだが、そのnestingまでは見ていない)。px直書きで揃える。 */
.qa-result-hero .q-score-big .q-score-unit-inline { font-size: 22px; font-weight: 700; }
@media (min-width: 640px) {
  .qa-result-hero .q-score-big { font-size: 56px; }
  .qa-result-hero .q-score-big .q-score-unit-inline { font-size: 26px; }
}
/* design.css の共通 .q-score-big は背景グラデーションを文字へ切り抜く演出
   (-webkit-text-fill-color: transparent)を持つため、color だけ上書きしても
   文字はグラデーションのまま変わらない。切り抜きを解除してから色を敷く。
   #8a6a2b on #ffffff = 5.06:1(実測)。 */
.qa-result-hero .q-score-big {
  background: none;
  -webkit-background-clip: initial;
  background-clip: initial;
  -webkit-text-fill-color: currentColor;
  color: var(--gold-text);
}
.qa-result-unit { margin-top: 4px; font-size: 13px; }
.qa-result-hero .qa-result-unit { color: var(--ink-2); }
.qa-result-badge { margin-top: 14px; }
.qa-result-badge-big { min-height: 32px; padding: 7px 18px; font-size: 13px; }
.qa-result-record-note { margin-top: 14px; text-align: center; }

.qa-result-stats { margin-top: 16px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* v82 JX-M4(発注者不具合報告、2026-09-15): 正答率モードは大見出し(正答率67%・3問中2問正解)と
   重複する「正答数」「正答率」タイルをquiz.js側で出さなくした(残るのは「初回不正解」1枚)。
   3列グリッドのままだと1枚だけ左寄りになるため、その時だけ中央1列にする。 */
.qa-result-stats.qa-result-stats--single { grid-template-columns: minmax(0, 200px); justify-content: center; }
.qa-result-stats .stat { padding: 16px 12px; border: 1px solid var(--line-1); border-radius: var(--r-card); text-align: center; }
.qa-result-stats .stat::after { display: none; }
.qa-result-stats .stat-num { color: var(--navy-700); font-variant-numeric: tabular-nums; }
.qa-result-stats .stat-label { color: var(--ink-2); }

/* 分野別の正答率 */
.qa-category-scores { margin-top: 16px; padding: 20px; border: 1px solid var(--line-1); border-radius: var(--r-card); background: var(--paper); }
.qa-category-score-title { display: flex; align-items: center; gap: 10px; margin: 0; color: var(--ink); font-family: var(--font-serif); font-size: 18px; font-weight: 700; }
.qa-category-score-lead { margin: 8px 0 14px; color: var(--ink-2); font-size: 13px; line-height: 1.6; }
.qa-category-score-list { display: grid; gap: 12px; }
/* 全分野 100% で説明の行を出さない時も、見出しと一覧の間を同じだけ空ける(2026-09-23) */
.qa-category-score-title + .qa-category-score-list { margin-top: 14px; }
.qa-category-score-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.qa-category-score-name { color: var(--ink); font-size: 14px; font-weight: 700; }
.qa-category-score-value { color: var(--ink-2); font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* 2026-09-04夜(v62): 共有の.v62-bar(高さ8px・navy-100地・<i>の幅を600msで伸ばす)に
 * 乗せ替えた。マークアップは .v62-bar.qa-category-score-bar > i。 */
.qa-category-score.mid .qa-category-score-bar > i { background: var(--gold-line); }
.qa-category-score.low .qa-category-score-bar > i { background: var(--err); }

/* ══ 結果: 振り返り ═══════════════════════════════════════════════════ */
.qa-review-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-top: 24px; }
.qa-review-title { margin: 0; color: var(--ink); font-family: var(--font-serif); font-size: 18px; font-weight: 700; }
.qa-review-filter { display: flex; flex-wrap: wrap; gap: 8px; }
.qa-review-filter-btn {
  min-height: 44px;
  padding: 8px 16px;
  border: 1px solid var(--line-1);
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink-2);
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: border-color var(--dur-hover) var(--ease-out), background-color var(--dur-hover) var(--ease-out), color var(--dur-hover) var(--ease-out);
}
.qa-review-filter-btn:hover { border-color: var(--navy-700); color: var(--navy-700); }
.qa-review-filter-btn:focus-visible { outline: 3px solid var(--navy-500); outline-offset: 2px; }
.qa-review-filter-btn.is-selected { border-color: var(--navy-700); background: var(--navy-700); color: #ffffff; }
.qa-review-empty { margin: 10px 0 0; color: var(--ink-2); font-size: 14px; }
.qa-review-list { margin-top: 12px; }
.qa-review-card { margin-bottom: 10px; padding: 18px 20px; border: 1px solid var(--line-1); border-radius: var(--r-card); background: var(--paper); }
.qa-review-card.ok { border-left: 3px solid var(--text-status-success); }
.qa-review-card.ng { border-left: 3px solid var(--text-status-danger); }
.qa-review-status { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 9px; }
.qa-review-mark { flex: 0 0 28px; width: 28px; color: var(--ink); font-size: 26px; font-weight: 700; line-height: 1; text-align: center; }
.qa-review-card.ok .qa-review-mark { color: var(--text-status-success); }
.qa-review-card.ng .qa-review-mark { color: var(--text-status-danger); }
.qa-review-label { color: var(--ink); font-size: 15px; }
.qa-review-question { color: var(--ink); font-size: 14px; font-weight: 700; line-height: 1.55; }
.qa-review-details { display: grid; gap: 6px; margin: 12px 0 0; }
.qa-review-details > div { display: grid; grid-template-columns: 7.5em minmax(0, 1fr); gap: 8px; }
.qa-review-details dt { color: var(--ink-2); font-size: 12px; font-weight: 700; }
/* 目視の検査 #7(2026-09-23): 「自分の回答（正答）」が 1280 でも「（正/答）」と語の途中で折れていた。
   （正答）はひとかたまりで送り、広い画面では見出しの列を広げて 1 行に収める。 */
.qa-review-dt-note { display: inline-block; }
/* 目視の再確認 L1(2026-09-23): 9em では印(○)と「自分の回答（正答）」が収まらず、1280 でも「（正答）」が 2 行目に落ちて
   ○ の下から始まっていた。列を印と文字が 1 行に収まる幅にし、それでも折れる時(文字の拡大など)は 2 行目を文字の頭にそろえる。 */
.qa-review-details dt { display: flex; align-items: baseline; }
.qa-review-details dt .qa-review-inline-mark { flex: none; }
.qa-review-dt-text { min-width: 0; }
@media (min-width: 600px) { .qa-review-details > div { grid-template-columns: 10.5em minmax(0, 1fr); } }
.qa-review-details dd { margin: 0; color: var(--ink); font-size: 13px; line-height: 1.5; }
/* v103(2026-09-21): 振り返りの「資料」(出典)の行は発注者指示で画面から外したので、書式も持たない。 */
.qa-review-details .qa-review-explanation-row { padding-top: 8px; border-top: 1px solid var(--line-1); }
.qa-review-details .qa-review-explanation-row dd { white-space: pre-line; }
.qa-review-inline-mark { display: inline-block; width: 1.45rem; margin-right: 4px; font-size: 1.05rem; font-weight: 700; text-align: center; }
.qa-review-answer-ok .qa-review-inline-mark { color: var(--text-status-success); }
.qa-review-answer-ng .qa-review-inline-mark { color: var(--text-status-danger); }
.qa-result-actions { margin-top: 8px; }
/* 2026-09-20: 再挑戦の釦の直下の一言(離れると途中経過が消える)。釦との間は詰め、次の釦との間は .stack の間隔のまま。 */
.qa-result-actions > .qa-retry-note { margin-top: 8px; font-size: 13px; line-height: 1.6; text-align: center; }

/* ══ 記録表(受験直後の記録表とresults.htmlで共通) ═══════════════════════ */
/* results.html の記録カードは results.js が非同期で差し込むので、motion.js の
   初回観測([data-reveal])に間に合わない。home.js 側と同じく無条件のCSSアニメで出す
   (§5 のカード出現)。reduced-motion では下の一括 animation:none が効く。 */
/* 2026-09-15: 段差出現(qa-rise)を削除。最初から静止して表示する。 */
.qa-current-result { margin-top: 16px; padding: 20px; border: 1px solid var(--line-1); border-radius: var(--r-card); background: var(--paper); }
.qa-current-result h2 { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; color: var(--ink); font-family: var(--font-serif); font-size: 18px; font-weight: 700; }
.qa-formal-result-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
/* 目視の検査 #6(2026-09-23): 集計の頁の QA の枠(375 で 347px)で「不合/格」と 2 行に折れていた */
.qa-formal-result-head .badge { flex-shrink: 0; white-space: nowrap; }
/* 2026-09-04夜(v62)発注者「画像が少ない」への対応: 記録がまだ無いときの空表示に
 * mascot-think(96px)を添える。 */
.qa-result-empty { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 12px 0 4px; text-align: center; }
.qa-result-empty p { margin: 0; }
/* v63: 案内役の上に挿絵(art-empty、4:3)を1点だけ足す。.v62-artが縦横比・角丸・
   hover拡大(共有v60-base.css)を持つので、ここでは幅だけ絞る。画像が無ければ
   results.jsのonerrorで枠ごと消え、レイアウトは元(案内役+文)のまま。 */
.qa-result-empty-art { width: 180px; max-width: 60%; }
/* 狭い画面でも「表」のまま横に送る。1件を縦積みのカードに崩すと、受験日・氏名・
   点数を縦に読むことになり、名簿として比べられなくなる(発注者指示2026-09-03)。 */
/* 外側の .qa-current-result が1px枠を持つので、ここに枠を重ねると「枠の中の枠」に
   なる(§9-6)。表の輪郭は thead の cream 帯と行の罫線が担う。 */
.qa-result-table-wrap { overflow-x: auto; border: 0; border-radius: 0; background: var(--paper); }
.qa-result-table-wrap::-webkit-scrollbar { height: 10px; }
.qa-result-table-wrap::-webkit-scrollbar-track { border-radius: 999px; background: var(--cream); }
.qa-result-table-wrap::-webkit-scrollbar-thumb { border: 2px solid var(--cream); border-radius: 999px; background: var(--line-1); }
.qa-result-table-wrap::-webkit-scrollbar-thumb:hover { background: var(--navy-500); }
.qa-result-table-wrap:focus-visible { outline: 3px solid var(--navy-500); outline-offset: 2px; }
.qa-result-table { width: 100%; min-width: 580px; border-collapse: collapse; background: transparent; }
.qa-result-table th, .qa-result-table td { height: 44px; padding: 10px 14px; border-bottom: 1px solid var(--line-1); font-size: 13px; line-height: 1.5; text-align: left; vertical-align: middle; }
.qa-result-table thead th { border-bottom: 1px solid var(--line-1); background: var(--cream); color: var(--ink-2); font-size: 12px; font-weight: 700; letter-spacing: .04em; white-space: nowrap; }
.qa-result-table thead th:nth-child(4) { text-align: right; }
.qa-result-table tbody tr:nth-child(even) td { background: color-mix(in srgb, var(--cream) 55%, transparent); }
.qa-result-table tbody tr:last-child td { border-bottom: 0; }
.qa-result-table .qa-result-score-cell { color: var(--navy-700); font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.qa-result-table .qa-result-date-cell { color: var(--ink-2); font-size: 13px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.qa-result-table .qa-result-name-cell { color: var(--ink); font-size: 14px; font-weight: 700; }
.qa-result-store-cell { white-space: nowrap; }
.qa-results-filters { display: flex; flex-wrap: wrap; gap: 12px; margin: 16px 0; }
.qa-results-filter-field { flex: 1 1 200px; min-width: 0; }
.qa-results-filter-field > label { display: block; font-size: 13px; font-weight: 700; }
.qa-result-table .qa-result-judge-cell { width: 1%; white-space: nowrap; }
.qa-result-judge-cell .badge { min-width: 4.6em; justify-content: center; font-size: 13px; }
@media (hover: hover) {
  .qa-result-table tbody tr:hover td { background: var(--navy-100); }
}
.qa-result-table-note { margin: 10px 0 0; color: var(--ink-2); font-size: 13px; line-height: 1.6; }
/* 2026-09-21是正: 保存件数の上限を外したため「さらに表示」を足した。釦は共通.btnのまま
   (.qa-page内でピル化・影なしは既に上書き済み、高さは--control-height=48pxで44px以上)。 */
.qa-result-load-more-wrap { margin-top: 14px; text-align: center; }
.qa-result-load-more-error { margin: 8px 0 0; color: var(--text-status-danger); font-size: 13px; font-weight: 700; line-height: 1.5; }
/* 表が横に収まる幅では出さない。収まらない幅(560px以下 = 枠 480px 未満)でだけ、
   隠れている点数・合否の列があることを文章で知らせる(モバイルの overlay
   スクロールバーは触るまで出ないため、線や影だけでは気づけない)。 */
.qa-result-scroll-hint { display: none; }
@media (max-width: 560px) {
  .qa-result-scroll-hint { display: block; margin: 0 0 8px; color: var(--ink-2); font-size: 13px; line-height: 1.6; }
}

/* 印刷用紙。画面では出さず、印刷時だけ1枚として出す。 */
.qa-print-sheet { display: none; }
.qa-print-btn { margin-top: 4px; }

/* ══ 戻る文字リンク(qa-briefing-back「QAトップに戻る」) ══════════════════
   2026-09-04(v61): SP固定バー/PC浮遊CTA(旧 .v60-fixed-bar/.v60-fixed-fab)は
   重複導線として廃止した。枠なしの文字リンクの見た目だけ残す。 */
.qa-briefing-back { color: var(--navy-700); font-size: 14px; font-weight: 700; text-decoration: none; padding: 10px 4px; min-height: 44px; display: inline-flex; align-items: center; }
.qa-briefing-back:focus-visible { outline: 3px solid var(--navy-500); outline-offset: 2px; border-radius: 4px; }
@media (hover: hover) { .qa-briefing-back:hover { color: var(--navy-900); text-decoration: underline; } }
/* design.cssの.btn系disabledに相当する見た目をv60-btnにも用意する(開始前ボタン用)。 */
.qa-page .v60-btn:disabled { cursor: default; background: var(--surface-3); color: var(--muted-strong); border-color: transparent; box-shadow: none; }

/* ══ レスポンシブ(共有基盤の768/560/480に合わせる) ═══════════════════════ */
@media (max-width: 768px) {
  .qa-quiz-page { --page-max: 100%; }

  .qa-category-card-grid { grid-template-columns: 1fr; }

  .qa-progress-steps { margin-left: 0; flex-basis: 100%; }

  .qa-briefing-body { padding: 20px; }
  .qa-candidate-block { grid-template-columns: 1fr; }
  .qa-name-field-group, .qa-date-field-group, .qa-store-field-group { grid-column: 1; }

  /* 設問と選択肢は読む対象そのもの。design-brief §3-2(SP本文15px)・§9-4
     「本文を16px未満にしない(注記だけ13px)」の下限を割らない。旧値は19/14px。 */
  .qa-question-text { font-size: 20px; }
  .qa-options .q-option { gap: 10px; padding: 13px 15px; font-size: 15px; }
  .qa-option-key { flex-basis: 26px; width: 26px; height: 26px; }

  .qa-category-scores { padding: 16px; }
  .qa-review-head { align-items: flex-start; }
  .qa-review-details > div { grid-template-columns: 1fr; gap: 1px; }
}

@media (max-width: 560px) {
  .qa-briefing-body { padding: 18px; }
  .qa-briefing-grid { grid-template-columns: 1fr; grid-template-rows: none; grid-auto-flow: row; gap: 10px; text-align: left; }
  .qa-briefing-grid dt { display: inline; }
  .qa-briefing-grid dd { display: inline; margin: 0 0 0 6px; }

  .qa-result-table-wrap { overflow-x: scroll; }
}

@media (max-width: 480px) {
  .qa-return-actions { align-items: flex-start; }
  .qa-site-home-link { min-height: 40px !important; padding-inline: 10px !important; font-size: 12px !important; }

  .qa-question-visual-row { align-items: flex-start; gap: 12px; }
  .qa-question-visual { width: 36px; height: 36px; }
  .qa-question-visual svg { width: 20px; height: 20px; }
  .qa-question-text { font-size: 19px; }

  .qa-current-result .qa-result-table-wrap { margin-inline: -18px; }

  /* 独立検査(v64、司令塔許可の寸法是正): 56→64px化(発注者「イラストなどもっとわかりやすく」)が
     このモバイル専用の分岐に反映されておらず、390px幅では旧サイズ(48px)のまま取り残されていた
     (2026-09-05実測)。56→64の比率(8/7)を旧モバイル値に当て、48→56pxにする。 */
  .qa-category-card { grid-template-columns: 56px minmax(0, 1fr); }
  .qa-category-icon { width: 56px; height: 56px; min-height: 56px; }
  .qa-category-icon svg { width: 24px; height: 24px; }

  .qa-result-hero { padding: 24px 16px 20px; }
  .qa-result-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .qa-result-stats .stat { padding: 12px 6px; }
  .qa-result-stats .stat .stat-num { font-size: 20px; }
  .qa-result-stats .stat .stat-label { font-size: 12px; }

  .qa-return-actions { flex-direction: column; align-items: stretch; }
  .qa-return-actions .btn { width: 100%; box-sizing: border-box; }
}

/* ══ 印刷 ═════════════════════════════════════════════════════════════ */
@media print {
  #qa-quiz-root:has(.qa-print-sheet) > *:not(.qa-print-sheet),
  .qa-home-container:has(.qa-print-sheet) > *:not(.qa-print-sheet) { display: none !important; }
  .qa-page { background: #fff; }
  #qa-quiz-root > .qa-print-sheet,
  .qa-print-sheet { display: block !important; padding: 0; border: 0; }
  .qa-print-sheet, .qa-print-sheet * { color: #000; }
  .qa-print-title { margin: 0 0 18pt; padding-bottom: 8pt; border-bottom: 1.5pt solid #000; font-size: 16pt; font-weight: 700; letter-spacing: .04em; }
  .qa-print-grid { display: block; margin: 0 0 16pt; }
  .qa-print-row { display: flex; align-items: baseline; gap: 12pt; padding: 9pt 2pt; border-bottom: .75pt solid #666; }
  .qa-print-label { flex: 0 0 70pt; font-size: 10pt; font-weight: 700; }
  .qa-print-value { font-size: 13pt; font-weight: 700; }
  .qa-print-row.pass .qa-print-value,
  .qa-print-row.fail .qa-print-value { font-size: 15pt; font-weight: 700; }
  .qa-print-note { margin: 0 0 22pt; font-size: 8.5pt; line-height: 1.6; }
  .qa-print-sign { display: flex; align-items: flex-end; gap: 10pt; font-size: 10pt; }
  .qa-print-sign-line { flex: 1 1 auto; border-bottom: .75pt solid #000; min-height: 22pt; }
  /* 目視の検査 #5(2026-09-23): 用紙と頁の下の説明で「保存するのは…」が 2 回刷られていた */
  body:has(.qa-print-sheet) .v61-foot { display: none !important; }
}

/* ══ 動きを減らす設定 ═════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  /* animation: none(duration短縮ではなく完全停止)にする: qa-rise等はfrom側だけ
     opacity:0を持ち、base(未指定時)は初期値のopacity:1・transform:noneなので、
     アニメーション自体を止めても最終状態と同じ見た目のまま表示される。
     duration: .01ms だけの短縮だと fill-mode: both の完了後アニメーションが
     document.getAnimations() に残り続け(仕様どおりだが)、design-brief §5の
     「reduce環境でdocument.getAnimations().lengthが0」を満たせない(実測)。 */
  .qa-page *,
  .qa-page *::before,
  .qa-page *::after {
    animation: none !important;
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
  }
  .qa-page .qa-category-score-bar > i { transition: none; }
  .qa-options .q-option:not(:disabled):active,
  .qa-review-filter-btn:active,
  .qa-mode-card:active,
  .qa-category-card:active { transform: none; }
}

/* ══ v61 見出しの統一(2026-09-04 夕方 納品前検査 R6・司令塔裁定)═══════════════
 * 画面名は共通ヘッダーの .hd-title(全画面同寸)。本文の最初の見出しは
 * 22px / var(--font-sans) / 700 / var(--ink) に揃える。直前は 8 画面で
 * 13px ゴシック金(質問チャット)〜36px 明朝(埋め込み案内)までばらけており、
 * 質問チャットは自分の h1 が直下の h2 より小さい逆転が起きていた(実測)。
 * 節の見出しはその下(18px)に置いて階層を1段だけ作る。 */
.qa-briefing-title,
.qa-formal-result-head h2,
.qa-result-headline {
  font-family: var(--font-sans);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.4;
}
@media (min-width: 640px) {
  .qa-briefing-title,
  .qa-formal-result-head h2,
  .qa-result-headline { font-size: 22px; }
}
/* 節の見出し(分野別に学ぶ など)は1段下げる。 */
.qa-category-head h2, .qa-category-score-title { font-family: var(--font-sans); font-size: 18px; letter-spacing: 0; }
/* 2026-09-05 v63.1 独立検査の指摘を司令塔が是正: 帯(body::before)は印刷で消えるので、帯の上の
   白い問題番号・残り数(.qa-qcount/.qa-remaining、397〜400行目)は印刷では黒に戻す。 */
@media print {
  .qa-qcount, .qa-remaining { color: #000; text-shadow: none; }
}
/* 2026-09-05 v63.2 独立検査の指摘(司令塔が是正): 生成アイコンの角が不透明の白だと、カードのホバー地
   (#e9eef8)の上で白い四角として浮いた。アイコン画像は円の外を透明にして配信し(v63 の icon-qa-*.webp は
   RGBA)、画像の地も透明にして枠(.qa-category-icon、通常 navy-100 / ホバー paper)の地をそのまま見せる。 */
.qa-category-icon-img { background: transparent; }
/* 2026-09-05 v64 独立検査の指摘(司令塔が是正): design.css の `a:not(.btn,.tile,.ui-card--action):hover`
   (0,2,1)が `.qa-category-card:hover`(0,2,0)より強く、ホバーでカード全体に下線が付いていた。
   同じ詳細度(a + class + :hover)で後勝ちにして打ち消す。 */
a.qa-category-card:hover, a.qa-category-card:focus-visible { text-decoration: none; }

/* 2026-09-23(発注者の裁定 B74): 本番の結果の「間違えた問題」= 番号と分野だけの一覧(正答・解説は出さない)。 */
.qa-exam-wrong { margin: 20px 0 0; }
.qa-exam-wrong-list { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 0; padding: 0; list-style: none; }
.qa-exam-wrong-item { display: inline-flex; align-items: baseline; gap: 6px; padding: 6px 12px; border: 1px solid var(--line, #d9dee8); border-radius: 999px; background: var(--paper, #fff); color: var(--ink); font-size: 14px; font-weight: 700; }
.qa-exam-wrong-category { color: var(--ink-2); font-size: 12.5px; font-weight: 400; }
.qa-exam-wrong-note { margin: 10px 0 0; color: var(--ink-2); font-size: 13px; }