@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@400;700&display=swap');

/* ============================================================
   1次クイズ 共通スタイル（和風・落款テーマ / Claude Design トークン）
   ※ app.html の ID / script.js が生成するクラスに合わせてスタイルのみ刷新。
     機能・DOM構造は不変（見た目だけ差し替え）。
============================================================ */

/* ページ地：畳の間。中央の紙面は #my-quiz-app 側に持たせる。
   畳の表現（CSSのみ）：上から順に
   ①継ぎ目（約1畳幅ごとの影＋光の2本線）②イ草の縦の織り目
   ③緯糸の横の凹凸 ④全体の照り（上からの光）。
   ※htmlは無指定にして body の背景をキャンバス全体へ伝播させる */
body {
  background-color:#DCE0BA;
  background-image:
    /* 緯糸の横の凹凸（畳縁の上にも重ねて布の質感を出す） */
    repeating-linear-gradient(0deg,
      rgba(255,255,255,.07) 0 1px,
      transparent 1px 3px,
      rgba(88,98,50,.045) 3px 4px,
      transparent 4px 12px),
    /* イ草の縦の織り目 */
    repeating-linear-gradient(90deg,
      rgba(255,255,255,.09) 0 1px,
      rgba(96,106,54,.06) 1px 2px,
      transparent 2px 4px),
    /* 畳縁：濃紺茶の帯（約1畳幅ごと・両端に影と光の縁取り） */
    repeating-linear-gradient(90deg,
      rgba(40,38,30,.45) 0 1px,
      #34332B 1px 3px,
      #4A473B 3px 6px,
      #403E33 6px 11px,
      #4A473B 11px 14px,
      #34332B 14px 16px,
      rgba(255,255,255,.30) 16px 17px,
      transparent 17px 340px),
    /* 全体の照り（上からの光） */
    linear-gradient(180deg, #E5E8C8 0%, #DBDFB6 55%, #D2D7A9 100%);
}
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; }

#my-quiz-app {
  /* --- デザイントークン（和風） --- */
  --color-primary:#B0402C; --color-primary-hover:#9C3826; --color-primary-deep:#8C2F1E; --color-primary-tint:#FBEAE6;
  --color-navy:#2C3150; --color-navy-hover:#1E2238; --color-navy-border:#000; --color-navy-tint:#EEF0E0;
  /* 面の色：畳はページ地（html/body）の大枠のみ。中の面は目に優しいオフホワイト */
  --bg-base:#F8F7F1; --bg-card:#FCFBF6; --bg-inset:#FFFEFA; --bg-tatami-a:#E0E3C6; --bg-tatami-b:#D3D7B3;
  --ink:#2B2118; --ink-sub:#3E3E3E; --ink-muted:#4E4E4E; /* 補助文字は茶を廃止しニュートラルな濃グレー */
  --line:#000; --line-soft:#000; --cream:#E4E6CF; --question:#2C3150; /* 問題文の茶→紺 */
  --font-serif:'Noto Serif JP','Hiragino Mincho ProN','Yu Mincho','MS Mincho',serif;
  --radius-btn:0; --radius-card:0; --radius-pill:99px; /* 畳＝角のない矩形（進捗バーのみpill維持） */
  --shadow-card:0 2px 8px rgba(60,70,30,.12); --shadow-hanko:0 3px 0 var(--color-primary-deep);
  --btn:#5B7539; --btn-hover:#4D6330; --btn-deep:#3B4C22; /* 主要ボタンの色（朱→緑） */
  /* 互換：script.js 内のインライン var(--accent) 等が解決できるように */
  --accent:var(--color-primary); --accent-ink:var(--color-primary-deep);
  --ok:#3E7D5A; --ng:var(--color-primary); --border:var(--line); --muted:var(--ink-muted);
  --card:var(--bg-card); --bg:var(--bg-base); --chip:var(--bg-inset);

  /* 紙面：畳の目（縦の織り目）＋浮かせる影（2次の .page と同じ意匠） */
  font-family:var(--font-serif); color:var(--ink);
  background:var(--bg-base);
  background-image:repeating-linear-gradient(90deg,rgba(120,130,80,.03) 0 1px,transparent 1px 7px);
  box-shadow:0 6px 30px rgba(40,45,25,.25);
  max-width:1060px; margin:18px auto 34px; padding:24px 28px 44px; -webkit-font-smoothing:antialiased;
}
@media (max-width:720px){ #my-quiz-app{ margin:10px auto 20px; padding:16px 12px 32px; } }
#my-quiz-app a { color: var(--color-navy); }
#my-quiz-app a:hover { text-decoration: underline; }
#my-quiz-app .muted { color: var(--ink-muted); }

/* --- ヘッダー（トップバー） --- */
#my-quiz-app .quiz-header{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  background:var(--bg-card); border:1px solid var(--line); border-top:6px solid var(--color-navy); border-radius:0;
  padding:12px 18px; margin-bottom:16px; flex-wrap:wrap;
}
#my-quiz-app #userInfo{ font-size:14px; color:var(--ink-sub); word-break:break-all; }
#my-quiz-app .toolbar{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; }

/* --- 入力 --- */
#my-quiz-app .input{
  background:var(--bg-inset); border:1px solid var(--line); color:var(--ink);
  border-radius:var(--radius-btn); padding:9px 12px; font-size:16px; font-family:var(--font-serif); /* 16px未満だとiOS Safariがフォーカス時に自動ズームする */
}
#my-quiz-app .input::placeholder{ color:#A8A8A8; }
#my-quiz-app .input:focus{ outline:none; border-color:var(--color-navy); }
#my-quiz-app .input.setting-on{ border:1px dashed var(--color-primary); background:var(--color-primary-tint); }
/* 白抜き文字の入力欄：入力した文字は黒で見やすく */
#my-quiz-app #userHighlightInput{ color:#000; border-color:#000; }

/* --- ボタン共通 --- */
#my-quiz-app .btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  background:var(--btn); color:#fff; border:none; cursor:pointer;
  font-family:var(--font-serif); font-weight:700; letter-spacing:.08em; font-size:15px;
  padding:10px 18px; border-radius:var(--radius-btn); box-shadow:0 3px 0 var(--btn-deep);
  text-decoration:none; transition:transform .12s ease, box-shadow .12s ease, background .15s;
}
#my-quiz-app .btn:hover{ background:var(--btn-hover); transform:translateY(2px); box-shadow:0 1px 0 var(--btn-deep); }
#my-quiz-app .btn:disabled{ opacity:.5; cursor:not-allowed; box-shadow:none; transform:none; }
/* ghost = 白地・紺アウトライン（小） */
#my-quiz-app .btn.ghost{
  background:var(--bg-inset); color:var(--color-navy); border:1px solid var(--color-navy-border);
  box-shadow:none; font-size:15px; padding:9px 16px;
}
#my-quiz-app .btn.ghost:hover{ background:var(--color-navy-tint); transform:none; box-shadow:none; }
#my-quiz-app .btn.ghost:disabled{ opacity:.5; }
/* secondary = 紺ソリッド */
#my-quiz-app .btn.secondary{ background:var(--color-navy); box-shadow:0 3px 0 var(--color-navy-hover); }
#my-quiz-app .btn.secondary:hover{ background:var(--color-navy-hover); box-shadow:0 1px 0 var(--color-navy-hover); }
/* lg = 大きめ（クイズ開始・次へ） */
#my-quiz-app .btn.lg{ font-size:16px; letter-spacing:.2em; padding:14px 40px; border-radius:var(--radius-card); }
/* 記録初期化＝控えめ */
#my-quiz-app #btnReset{ color:var(--ink-muted); border-color:var(--line); }
#my-quiz-app #btnReset:hover{ background:var(--bg-inset); }
/* 前の問題/次の問題：選択肢・要復習などと同じ「浮き上がる」ホバー
   （次の問題は押し込み影を残したまま浮かせる。無効時は動かさない） */
#my-quiz-app #btnPrev:hover:not(:disabled){
  transform:translateY(-3px); box-shadow:0 6px 14px rgba(60,70,30,.16);
}
#my-quiz-app #btnNext:hover:not(:disabled){
  transform:translateY(-3px); box-shadow:0 3px 0 var(--btn-deep), 0 6px 14px rgba(60,70,30,.16);
}

/* --- カード（畳の「部屋」＝紺の上縁） --- */
#my-quiz-app .card{
  background:var(--bg-card); border:1px solid var(--line); border-top:6px solid var(--color-navy); border-radius:0;
  padding:22px 26px; box-shadow:none;
}
#my-quiz-app .card + .card{ margin-top:16px; }
/* フィルタ／問題カードは朱色の上縁で主役を示す */
#my-quiz-app #home > .card:first-child, #my-quiz-app #play{ border-top:6px solid var(--color-primary); }

/* --- セクション見出し --- */
#my-quiz-app .section-title{
  font-size:16px; letter-spacing:.3em; color:#000; font-weight:700; margin:2px 0 16px;
}

/* --- グリッド --- */
#my-quiz-app .grid{ display:grid; gap:16px; }
#my-quiz-app .grid.cols-1{ grid-template-columns:minmax(0,1fr); }
#my-quiz-app .grid.cols-2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
@media (max-width:720px){ #my-quiz-app .grid.cols-2{ grid-template-columns:minmax(0,1fr); } }

/* --- フィルタ --- */
#my-quiz-app .filter-group{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px 24px; }
@media (max-width:720px){ #my-quiz-app .filter-group{ grid-template-columns:minmax(0,1fr); } }
#my-quiz-app label{ display:block; font-size:13px; color:var(--ink-muted); letter-spacing:.1em; margin-bottom:6px; }
#my-quiz-app select{
  width:100%; appearance:none; -webkit-appearance:none;
  border:1px solid var(--ink); border-radius:var(--radius-btn); background-color:var(--bg-inset); color:var(--ink);
  padding:11px 36px 11px 14px; font-size:15px; font-family:var(--font-serif); cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--ink-muted) 50%),linear-gradient(135deg,var(--ink-muted) 50%,transparent 50%);
  background-position:calc(100% - 18px) 50%,calc(100% - 13px) 50%; background-size:5px 5px,5px 5px; background-repeat:no-repeat;
}
#my-quiz-app select:disabled{ background-color:#F1F0E8; color:#9AA07C; cursor:not-allowed; }
#my-quiz-app #search{ width:100%; box-sizing:border-box; }

/* 人気タグ chips */
#my-quiz-app .chips{ display:flex; flex-wrap:wrap; gap:8px; }
#my-quiz-app .chip{
  font-size:13px; color:var(--color-navy); background:var(--bg-inset); border:1px solid var(--color-navy-border);
  border-radius:0; padding:5px 12px; letter-spacing:.05em; cursor:pointer; font-family:var(--font-serif);
}
#my-quiz-app .chip:hover{ background:var(--color-navy-tint); }
#my-quiz-app .chip .muted{ color:var(--ink-muted); }

/* ヒット件数 */
#my-quiz-app .meta{ display:flex; align-items:center; justify-content:space-between; color:var(--ink-muted); font-size:14px; flex-wrap:wrap; gap:12px; }
/* 白抜きバー：常に1行。入力欄だけが余白に合わせて伸縮し、ボタンは折り返さない
   （min-width:0 が肝：これが無いとinputは既定の最小幅より縮まず、狭い画面で適用ボタンが2段目に落ちる） */
#my-quiz-app .highlight-bar{ flex-wrap:nowrap; justify-content:flex-start; }
#my-quiz-app .highlight-bar #userHighlightInput{ flex:1 1 0; min-width:0; }
#my-quiz-app .highlight-bar .btn{ flex:0 0 auto; white-space:nowrap; }
/* スマホ幅：1行だと「要復習（解除）」の長さで入力欄が潰れ「適用」がはみ出すので、
   1段目＝要復習・除外、2段目＝白抜きの入力欄・適用 に分ける。前／次の問題は横に同じ幅で並べる */
@media (max-width:720px){
  #my-quiz-app .highlight-bar{ display:grid; grid-template-columns:1fr 1fr auto; gap:8px; }
  #my-quiz-app .highlight-bar #btnMaster{ grid-column:2 / 4; }
  #my-quiz-app .highlight-bar #userHighlightInput{ grid-column:1 / 3; }
  #my-quiz-app .highlight-bar .btn{ font-size:17px!important; }
  #my-quiz-app .navbtns{ display:flex; gap:10px; width:100%; }
  #my-quiz-app .navbtns .btn{ flex:1 1 0; padding:14px 8px; letter-spacing:.1em; font-size:17px; }
}
#my-quiz-app #count{ color:#22A84F; font-weight:700; font-size:23px; letter-spacing:.03em; } /* ヒット件数は緑 */

/* プレビュー一覧（#list の各カード） */
#my-quiz-app #list .card{
  background:var(--bg-inset); border:1px solid var(--line); border-radius:0;
  padding:16px 18px; box-shadow:none;
}
#my-quiz-app #list .card:hover{ border-color:var(--color-primary); }
#my-quiz-app .quiznum{ color:#2F7FE8; font-weight:700; } /* 問題番号は夜間と同系の青 */
#my-quiz-app #list .qtitle{ color:#1A1A1A; font-weight:700; line-height:1.9; font-size:14px; }
#my-quiz-app #list .qtitle .angle{ color:#1A1A1A; }
#my-quiz-app #list .quiznum{ color:#2F7FE8; }
/* プレビューの最終回答日だけ 紺の太字 */
#my-quiz-app #list .card .muted{ color:var(--color-navy); font-weight:700; }
#my-quiz-app #list .card .text-yellow{ color:var(--color-navy); font-weight:700; }

/* --- 問題表示 --- */
#my-quiz-app .qwrap{ display:flex; flex-direction:column; gap:16px; }
#my-quiz-app .qtitle{ font-size:19px; line-height:2.2; color:var(--question); font-weight:700; white-space:pre-wrap; margin:0; }
#my-quiz-app #explain, #my-quiz-app #list .qtitle{ white-space:pre-wrap; }
#my-quiz-app .qtitle mark{ background:#E7D8B4; color:transparent; border-radius:.2em; padding:0 .3em; cursor:pointer; transition:color .15s; }
#my-quiz-app .qtitle mark:hover, #my-quiz-app .qtitle mark.revealed{ color:#000; }
/* 白抜きした語にルビがあるとき、読みも一緒に隠す（印を開くと読みも出る）。2026-10-22 */
#my-quiz-app .qtitle ruby:has(mark:not(.revealed)) rt{ color:transparent; }
#my-quiz-app .qtitle .angle{ color:var(--color-primary); font-weight:700; }
/* ルビ（読み仮名）：rtは相対サイズ。※ruby の inline-block 化はPCでベース文字が消える不具合が出たため不採用 */
#my-quiz-app ruby rt{ font-size:.55em; line-height:1.1; color:var(--ink); font-weight:400; }
#my-quiz-app u{ text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:3px; }

/* 問題文：お題(＜＞内)を巻物に、続く本文は黒。#play のみ（プレビュー#listは対象外）。
   ＜＞は script.js 側で除去し、お題=.odai / 本文=.qbody に分割描画。 */
#my-quiz-app #qtitle .odai{
  position:relative;
  margin:0 46px 22px;
  padding:20px 38px;
  font-size:19px; line-height:2.2; font-weight:700;
  color:#1A1A1A; background:#FAF4E2; /* お題の文字は黒（本文と同色） */
  border-top:1px solid #E3D6B4; border-bottom:1px solid #E3D6B4;
  box-shadow:
    inset 30px 0 20px -16px rgba(122,95,50,.45),
    inset -30px 0 20px -16px rgba(122,95,50,.45),
    0 3px 5px rgba(90,70,40,.18);
}
#my-quiz-app #qtitle .odai::before,
#my-quiz-app #qtitle .odai::after{
  content:""; position:absolute; top:-12px; bottom:-12px; width:20px;
  border-radius:10px; box-shadow:0 2px 4px rgba(60,45,25,.35);
}
#my-quiz-app #qtitle .odai::before{ left:-34px; background:linear-gradient(90deg,#4A3524,#8A6F4F 45%,#5F452F); }
#my-quiz-app #qtitle .odai::after{ right:-34px; background:linear-gradient(270deg,#4A3524,#8A6F4F 45%,#5F452F); }
#my-quiz-app #qtitle .qbody{ margin:0; font-size:19px; line-height:2.15; font-weight:400; color:#1A1A1A; }
@media (max-width:720px){
  #my-quiz-app #qtitle .odai{ font-size:19px; line-height:2.1; margin:0 30px 18px; padding:16px 22px; }
  #my-quiz-app #qtitle .odai::before, #my-quiz-app #qtitle .odai::after{ width:14px; top:-8px; bottom:-8px; border-radius:7px; }
  #my-quiz-app #qtitle .odai::before{ left:-24px; }
  #my-quiz-app #qtitle .odai::after{ right:-24px; }
  #my-quiz-app #qtitle .qbody{ font-size:19px; line-height:2.05; }
}

/* 進捗バー */
#my-quiz-app .progress{ height:7px; background:var(--bg-tatami-b); border:none; border-radius:var(--radius-pill); overflow:hidden; }
#my-quiz-app .bar{ height:100%; background:var(--color-primary); border-radius:var(--radius-pill); width:0%; }
#my-quiz-app #progressText{ color:var(--color-navy); letter-spacing:.1em; }

/* 画像 */
#my-quiz-app #qimage{ max-width:100%; height:auto; margin:0 auto; border-radius:var(--radius-btn); border:1px solid var(--line); }
#my-quiz-app .qimage-wrap{ margin-top:-4px; }

/* 選択肢 */
#my-quiz-app .choices{ display:grid; gap:10px; }
#my-quiz-app .choices.tf{ grid-template-columns:1fr 1fr; }
@media (max-width:720px){ #my-quiz-app .choices.tf{ grid-template-columns:1fr; } }
/* 問題文の表（技術士1次。script.js の qTables） */
#my-quiz-app .qtable-wrap{ overflow-x:auto; margin:6px 0; white-space:normal; }
#my-quiz-app .qtable{ border-collapse:collapse; font-size:17px; line-height:1.6; }
#my-quiz-app .qtable th, #my-quiz-app .qtable td{ border:1px solid #000; padding:4px 10px; text-align:center; }
#my-quiz-app .qtable th{ font-weight:700; }
html[data-theme="dark"] #my-quiz-app .qtable th, html[data-theme="dark"] #my-quiz-app .qtable td{ border-color:#fff; }
/* 5択（技術士1次の計算・組合せ問題）：番号を太字で頭に。選択肢の文は折り返して読ませる */
#my-quiz-app .choices.multi .choice{ display:flex; gap:10px; align-items:baseline; line-height:1.8; white-space:normal; }
#my-quiz-app .choices.multi .choice-no{ font-weight:700; flex:none; }
#my-quiz-app .choice{
  position:relative; text-align:left; padding:14px 16px; border-radius:0;
  background:var(--bg-inset); border:1px solid var(--line); color:var(--ink); cursor:pointer;
  font-size:17px; font-family:var(--font-serif);
  transition:transform .12s ease, box-shadow .12s ease, border-color .15s;
}
/* ホバーは「色」ではなく「少し浮く」だけ（＝正誤判定の色と役割が被らない） */
#my-quiz-app .choice:hover{ transform:translateY(-3px); box-shadow:0 6px 14px rgba(90,70,40,.16); }
/* ○×（妥当である/誤りである）。TF選択肢は固定順 [妥当である, 誤りである]。回答前は枠・文字とも黒（判定後の色分けは下のcorrect/wrongで表現） */
#my-quiz-app .choices.tf .choice{ text-align:center; font-weight:700; letter-spacing:.15em; padding:17px 0; }
#my-quiz-app .choices.tf .choice:first-child{ border:1.5px solid #000; color:#000; }
#my-quiz-app .choices.tf .choice:last-child{ border:1.5px solid #000; color:#000; }
/* 正誤フィードバック：淡いtint＋色枠＋色ラベル（以前のクイズの見た目）。ホバーは浮上のみなので色が被らない。
   判定後は選択肢の文字色を黒系に統一し、妥当(紺)/誤り(朱)の文字色が判定背景と喧嘩しないようにする。
   pointer-events:none で判定後はホバー（浮上）も止める。 */
#my-quiz-app .choice.correct{ outline:2px solid var(--ok); outline-offset:2px; background:rgba(62,125,90,.12); border-color:var(--ok); }
#my-quiz-app .choice.wrong{ outline:2px solid var(--color-primary); outline-offset:2px; background:var(--color-primary-tint); border-color:var(--color-primary); }
#my-quiz-app .choices.tf .choice.correct, #my-quiz-app .choices.tf .choice.wrong{ color:var(--ink); }
#my-quiz-app .choice.correct, #my-quiz-app .choice.wrong{ pointer-events:none; }
#my-quiz-app .result-label{ position:absolute; top:50%; right:14px; transform:translateY(-50%); font-weight:700; font-size:22px; }
#my-quiz-app .result-label.ok{ color:var(--ok); }
#my-quiz-app .result-label.ng{ color:var(--color-primary); }

/* ツール行（要復習・除外） */
#my-quiz-app .btn.bookmark{ font-size:16px; padding:11px 18px; }
/* ツールバー(要復習/除外/適用)：枠と文字を黒に統一（ON状態の色枠・placeholderは別ルールで維持） */
#my-quiz-app .btn.bookmark, #my-quiz-app #btnSaveHighlight{ border-color:#000; color:#000; }
/* ホバーは色ではなく「少し浮く」＝妥当である/誤りであるボタンと同じ挙動に統一 */
#my-quiz-app .btn.bookmark:hover, #my-quiz-app #btnSaveHighlight:hover{ background:var(--bg-inset); transform:translateY(-3px); box-shadow:0 6px 14px rgba(60,70,30,.16); }
/* ON は白地＋破線の色枠＋色文字（以前の仕様）。要復習=緑系 / 除外=橙系 で役割を色分け。 */
#my-quiz-app .btn.bookmark.on{ background:#fff; border:2.5px solid #1CA39A; color:#000; box-shadow:none; }
#my-quiz-app .btn.bookmark.master-on{ background:#fff; border:2.5px solid #E0912A; color:#000; box-shadow:none; }

/* 解説ボックス */
#my-quiz-app .explain{
  padding:18px 20px; color:var(--ink-sub); font-size:19px; line-height:2;
  background:var(--bg-inset); border:1px solid var(--line-soft); border-left:3px solid var(--color-primary);
  border-radius:var(--radius-btn);
}
#my-quiz-app .explain{ color:#1A1A1A; }

/* 保存メッセージ・結果画面 */
#my-quiz-app #saveNotice{ color:var(--ink-muted); }
#my-quiz-app #result h2{ margin-top:0; font-weight:700; letter-spacing:.1em; }
#my-quiz-app #resultSummary{ color:var(--ink-sub); }
#my-quiz-app #wrongList .chip{ cursor:default; }
#my-quiz-app .text-yellow{ color:var(--color-primary); font-weight:600; }

/* ===== AI解説・チャット ===== */
#my-quiz-app .ai-box{ margin-top:16px; padding:16px; background:var(--bg-inset); border:1px solid var(--line-soft); border-radius:var(--radius-btn); }
#my-quiz-app .btn.ai-btn{ background:var(--color-navy); box-shadow:0 3px 0 var(--color-navy-hover); }
#my-quiz-app .btn.ai-btn:hover{ background:var(--color-navy-hover); box-shadow:0 1px 0 var(--color-navy-hover); }
#my-quiz-app #ai-response{ margin-top:12px; font-size:18px; color:#1A1A1A; }
#my-quiz-app .ai-loading{ color:var(--color-primary); font-weight:bold; font-size:15px; animation:pulse 1.5s infinite; }
@keyframes pulse{ 0%{opacity:1} 50%{opacity:.5} 100%{opacity:1} }
#my-quiz-app .chat-history{ display:flex; flex-direction:column; gap:12px; margin-bottom:12px; }
#my-quiz-app .chat-bubble{ padding:12px 16px; border-radius:12px; line-height:1.9; max-width:85%; white-space:pre-wrap; font-size:18px; }
#my-quiz-app .chat-bubble.ai{ background:var(--bg-inset); border:1px solid var(--line); align-self:flex-start; border-bottom-left-radius:3px; color:#1A1A1A; }
#my-quiz-app .chat-bubble.user{ background:var(--color-primary); color:#fff; align-self:flex-end; border-bottom-right-radius:3px; }
#my-quiz-app .chat-input-area{ display:flex; gap:8px; align-items:center; }
#my-quiz-app .ai-actions{ display:flex; flex-wrap:wrap; gap:10px; }

/* ===== はみ出し対策・MathJax ===== */
#my-quiz-app .explain,
#my-quiz-app #explain,
#my-quiz-app .chat-bubble,
#my-quiz-app .chat-history{ overflow-wrap:anywhere; word-break:break-word; max-width:100%; }
#my-quiz-app mjx-container{ max-width:100%; }
#my-quiz-app mjx-container[display="true"]{ display:block; overflow-x:auto; overflow-y:hidden; max-width:100%; -webkit-overflow-scrolling:touch; }
#my-quiz-app mjx-container.mjx-wide{ display:inline-block; overflow-x:auto; overflow-y:hidden; max-width:100%; vertical-align:middle; padding:4px 0; -webkit-overflow-scrolling:touch; }

/* ===== 購入パネル（未購入/期限切れ時） ===== */
.purchase-overlay{
  position:fixed; inset:0; z-index:10000;
  background:rgba(43,33,24,.55); backdrop-filter:blur(2px);
  display:flex; align-items:center; justify-content:center; padding:20px; box-sizing:border-box;
}
.purchase-overlay .purchase-box{
  background:#FDFAF2; color:#2B2118; width:100%; max-width:460px;
  border-radius:8px; padding:32px 26px; text-align:center;
  box-shadow:0 24px 70px rgba(0,0,0,.35); border:1px solid #000; border-top:4px solid #B23A2A;
  max-height:90vh; overflow:auto; font-family:var(--font-serif);
}
/* 補償の項目購入（/jccacart.js）は、PC では項目とカレンダーを横に並べるので広く取る */
.purchase-overlay .purchase-box.wide{ max-width:1080px; }
.purchase-overlay .purchase-title{ margin:0 0 10px; font-size:23px; font-weight:800; }
.purchase-overlay .buy-lead{ color:#5A4C36; font-size:15px; margin:0 0 22px; line-height:1.8; }
.purchase-overlay .buy-plans{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-bottom:20px; }
.purchase-overlay .buy-plan{
  flex:1 1 110px; min-width:100px; cursor:pointer;
  background:#F3EDE0; border:2px solid #000; border-radius:6px;
  padding:16px 10px; display:flex; flex-direction:column; align-items:center; gap:4px;
  transition:transform .12s ease, border-color .12s ease, box-shadow .12s ease;
}
.purchase-overlay .buy-plan:hover{ transform:translateY(-3px); border-color:#B23A2A; box-shadow:0 10px 24px rgba(178,58,42,.18); }
.purchase-overlay .buy-plan:disabled{ opacity:.6; cursor:default; transform:none; }
.purchase-overlay .buy-months{ font-size:16px; font-weight:700; color:#3D4D70; }
.purchase-overlay .buy-price{ font-size:23px; font-weight:800; color:#2B2118; }
.purchase-overlay .buy-tax{ font-size:12px; color:#6F6148; }
.purchase-overlay .buy-fine{ font-size:13px; color:#6F6148; margin:0 0 16px; line-height:1.6; }
.purchase-overlay .buy-fine b{ color:#5A4C36; }
.purchase-overlay .buy-actions{ display:flex; flex-direction:column; gap:10px; align-items:stretch; }
.purchase-overlay .buy-continue{
  display:inline-flex; align-items:center; justify-content:center;
  background:#B23A2A; color:#fff; font-weight:700; font-size:16px;
  padding:12px 18px; border-radius:4px; border:none; cursor:pointer; box-shadow:0 3px 0 #7E2418; transition:background .15s;
}
.purchase-overlay .buy-continue:hover{ background:#9C3021; }
/* 日数プランの購入カレンダーの見た目は daycal.js が持つ（模擬面接の画面でも使うため） */

/* ============================================================
   Claude Design 追加調整（サンドボックスで確定した見た目）
   ※ ファイル末尾に置くことで元ルールへ後勝ちさせる（IDハック不要）。
============================================================ */
/* ログイン／キーワードの入力枠は黒（フォーカス時も黒） */
#my-quiz-app #email, #my-quiz-app #password, #my-quiz-app #search{ border-color:#000; }
#my-quiz-app #email:focus, #my-quiz-app #password:focus, #my-quiz-app #search:focus{ border-color:#000; }
/* ログイン行を一段に収める：入力欄を細めに（折り返しは元の flex-wrap:wrap に任せる） */
#my-quiz-app #email, #my-quiz-app #password{ width:150px; }
/* 上部に表示されるログイン中メールアドレスは太字の黒・16px（成績ダッシュボードと統一） */
#my-quiz-app #userInfo{ color:#000; font-weight:700; font-size:16px; }

/* 新規登録ボタンは赤（--color-primary） */
#my-quiz-app #btnSignup{ background:var(--color-primary); box-shadow:0 3px 0 var(--color-primary-deep); }
#my-quiz-app #btnSignup:hover{ background:var(--color-primary-hover); box-shadow:0 1px 0 var(--color-primary-deep); }

/* トップページ／ホーム／ログアウト／記録初期化：文字も枠も黒＋ログイン風の押し込みホバー */
#my-quiz-app #btnTop, #my-quiz-app #btnHome, #my-quiz-app #btnLogout, #my-quiz-app #btnReset, #my-quiz-app #btnTheme{
  color:#000; border-color:#000; box-shadow:0 3px 0 #000;
}
#my-quiz-app #btnTop:hover, #my-quiz-app #btnHome:hover, #my-quiz-app #btnLogout:hover, #my-quiz-app #btnReset:hover, #my-quiz-app #btnTheme:hover{
  color:#000; background:var(--color-navy-tint);
  transform:translateY(2px); box-shadow:0 1px 0 #000;
}

/* フィルタの文字サイズを16pxで統一（並び替えの太字/特大はやめて他と揃える） */
#my-quiz-app .filter-group select, #my-quiz-app .filter-group .input{ font-size:16px; font-weight:400; }
#my-quiz-app #sort{ font-size:16px; font-weight:400; padding-top:11px; padding-bottom:11px; }

/* 人気タグ chip の文字色は黒（件数の数字は従来どおり薄グレー） */
#my-quiz-app #hotTags .chip{ color:#000; }

/* プレビューの「最終回答」行は明るい緑・極太（未回答ラベル=.muted / 日付=.text-yellow の両方） */
#my-quiz-app #list .card .muted{ color:#22A84F; font-weight:800; }
#my-quiz-app #list .card .text-yellow{ color:#22A84F; font-weight:800; }

/* 出題ツール行（要復習/除外/白抜き文字/適用）：文字も枠も黒
   ※ 要復習ON=緑・除外ON=赤 の状態色は残すため :not() で除外 */
#my-quiz-app #btnBookmark:not(.on),
#my-quiz-app #btnMaster:not(.master-on),
#my-quiz-app #btnSaveHighlight,
#my-quiz-app #userHighlightInput{ color:#000; border-color:#000; }
#my-quiz-app #userHighlightInput:focus{ border-color:#000; }
/* ホバーは「妥当である」ボタンと同じ浮上アクション */
#my-quiz-app #btnBookmark:hover,
#my-quiz-app #btnMaster:hover,
#my-quiz-app #btnSaveHighlight:hover{
  transform:translateY(-3px); box-shadow:0 6px 14px rgba(60,70,30,.16); background:var(--bg-inset);
}
/* ON時の枠色：要復習=緑（明るさを落としたteal）/ 除外=赤。枠は実線・太め、文字は黒で統一 */
#my-quiz-app #btnBookmark.on{ border-color:#157A72; color:#000; }
#my-quiz-app #btnMaster.master-on{ border-color:var(--color-primary); color:#000; }

/* ============================================================
   ダークモード（夜の道場）。app.html のボタンで html[data-theme="dark"] を切替。
   ファイル末尾＝全ルールへ後勝ち。畳の意匠はそのまま暗いトーンに置き換える。
============================================================ */
/* 畳の間（夜）：レイヤー構成は昼と同一 */
html[data-theme="dark"] body{
  background-color:#313426;
  background-image:
    repeating-linear-gradient(0deg,rgba(255,255,255,.035) 0 1px,transparent 1px 3px,rgba(0,0,0,.12) 3px 4px,transparent 4px 12px),
    repeating-linear-gradient(90deg,rgba(255,255,255,.045) 0 1px,rgba(0,0,0,.10) 1px 2px,transparent 2px 4px),
    repeating-linear-gradient(90deg,rgba(0,0,0,.5) 0 1px,#191813 1px 3px,#26241C 3px 6px,#1F1D16 6px 11px,#26241C 11px 14px,#191813 14px 16px,rgba(255,255,255,.07) 16px 17px,transparent 17px 340px),
    linear-gradient(180deg,#3A3D2C 0%,#31342A 55%,#292C1E 100%);
}
/* 配色トークンの暗色化（変数参照している面・文字はこれだけで反転する） */
html[data-theme="dark"] #my-quiz-app{
  /* クイズ画面は緑がからないニュートラルな黒基調。文字も茶系を廃止 */
  --bg-base:#161616; --bg-card:#1E1E1E; --bg-inset:#292929;
  --ink:#F0F0EC; --ink-sub:#D4D4CE; --ink-muted:#ACACA4;
  --line:#585858; --line-soft:#474747;
  --question:#FFFFFF; /* 問題文は黒地に真っ白 */
  --color-navy-tint:#2B2F42; --color-navy-border:#5C6280;
  --color-primary-tint:#42281F;
  --accent:#F0937A; /* インラインの朱文字（ログイン案内など）は暗地で沈むため明るい朱へ */
  --bg-tatami-b:#3A3A3A;
  background-image:repeating-linear-gradient(90deg,rgba(255,255,255,.035) 0 1px,transparent 1px 7px);
  box-shadow:0 6px 30px rgba(0,0,0,.55);
}
/* 紺系の文字・枠は暗地では読めないため明るい藤紺へ */
html[data-theme="dark"] #my-quiz-app a,
html[data-theme="dark"] #my-quiz-app .quiznum,
html[data-theme="dark"] #my-quiz-app .chip,
html[data-theme="dark"] #my-quiz-app .btn.ghost{ color:#BCC5EA; }
html[data-theme="dark"] #my-quiz-app .btn.ghost{ border-color:var(--color-navy-border); }
/* 「36 / 353」の問題数は強調色ではないので白（2026-10-17 ユーザー指示） */
html[data-theme="dark"] #my-quiz-app #progressText{ color:#fff; }
/* 「黒枠・黒文字」で固定していたUIは生成りへ（ON状態の色は昼と共通なので触らない） */
html[data-theme="dark"] #my-quiz-app .choices.tf .choice:first-child,
html[data-theme="dark"] #my-quiz-app .choices.tf .choice:last-child,
html[data-theme="dark"] #my-quiz-app .btn.bookmark,
html[data-theme="dark"] #my-quiz-app #btnSaveHighlight,
html[data-theme="dark"] #my-quiz-app #btnBookmark:not(.on),
html[data-theme="dark"] #my-quiz-app #btnMaster:not(.master-on),
html[data-theme="dark"] #my-quiz-app #userHighlightInput,
html[data-theme="dark"] #my-quiz-app #userInfo,
html[data-theme="dark"] #my-quiz-app #hotTags .chip,
html[data-theme="dark"] #my-quiz-app #btnTop,
html[data-theme="dark"] #my-quiz-app #btnHome,
html[data-theme="dark"] #my-quiz-app #btnLogout,
html[data-theme="dark"] #my-quiz-app #btnReset,
html[data-theme="dark"] #my-quiz-app #btnTheme{ color:var(--ink); border-color:#8E8E88; }
html[data-theme="dark"] #my-quiz-app #btnTop:hover,
html[data-theme="dark"] #my-quiz-app #btnHome:hover,
html[data-theme="dark"] #my-quiz-app #btnLogout:hover,
html[data-theme="dark"] #my-quiz-app #btnReset:hover,
html[data-theme="dark"] #my-quiz-app #btnTheme:hover{ color:var(--ink); }
/* 使い方の動画のボタン：夜間は文字を白に（枠は他の枠線ボタンと同じシアン） */
html[data-theme="dark"] #my-quiz-app #btnHowto,
html[data-theme="dark"] #my-quiz-app #btnHowto:hover{ color:var(--ink); }
html[data-theme="dark"] #my-quiz-app #email,
html[data-theme="dark"] #my-quiz-app #password,
html[data-theme="dark"] #my-quiz-app #search,
html[data-theme="dark"] #my-quiz-app #email:focus,
html[data-theme="dark"] #my-quiz-app #password:focus,
html[data-theme="dark"] #my-quiz-app #search:focus,
html[data-theme="dark"] #my-quiz-app #userHighlightInput:focus{ border-color:#8E8E88; }
/* 本文・解説・一覧などインク固定（#1A1A1A）だった文字 */
html[data-theme="dark"] #my-quiz-app #qtitle .qbody,
html[data-theme="dark"] #my-quiz-app #list .qtitle,
html[data-theme="dark"] #my-quiz-app #list .qtitle .angle,
html[data-theme="dark"] #my-quiz-app #list .quiznum,
html[data-theme="dark"] #my-quiz-app .explain,
html[data-theme="dark"] #my-quiz-app #ai-response,
html[data-theme="dark"] #my-quiz-app .chat-bubble.ai{ color:var(--ink); }
html[data-theme="dark"] #my-quiz-app #qClassDisplay{ color:var(--ink) !important; }
/* お題：夜はネオン看板（白文字はそのまま・シアンの発光枠）。巻物の木軸は夜だけ非表示 */
html[data-theme="dark"] #my-quiz-app #qtitle .odai{
  color:#FFFFFF; background:#1E1E1E;
  border:2px solid #FFE135; border-radius:8px;
  box-shadow:0 0 10px rgba(255,225,53,.55), inset 0 0 12px rgba(255,225,53,.18);
  text-shadow:0 0 6px rgba(255,255,255,.35);
}
html[data-theme="dark"] #my-quiz-app #qtitle .odai::before,
html[data-theme="dark"] #my-quiz-app #qtitle .odai::after{ display:none; }
/* 夜間：前の問題/次の問題は押せないとき、要復習・除外と同じ「グレー枠＋ぼやっとした発光」に。
   共通の .btn:disabled{opacity:.5} が発光と文字まで薄くするため opacity:1 で打ち消し、
   文字は白ではっきり。次の問題は緑の塗りを落として無効が分かるようにする */
html[data-theme="dark"] #my-quiz-app #btnPrev:disabled,
html[data-theme="dark"] #my-quiz-app #btnNext:disabled{
  opacity:1; color:#FFF; background:var(--bg-inset);
  border:1px solid #8E8E88;
  box-shadow:0 0 7px rgba(0,229,255,.45), inset 0 0 5px rgba(0,229,255,.18);
}
/* 前の問題は押せるようになっても白文字のまま（.btn.ghost の藤紺に落とさない） */
html[data-theme="dark"] #my-quiz-app #btnPrev{ color:#FFF; }
/* 白地固定だったON状態ボタンの地 */
html[data-theme="dark"] #my-quiz-app .btn.bookmark.on,
html[data-theme="dark"] #my-quiz-app .btn.bookmark.master-on{ background:var(--bg-inset); }
/* 夜間：要復習ONは明るいネオングリーン枠（文字は白のまま・実線＋発光） */
html[data-theme="dark"] #my-quiz-app #btnBookmark.on{
  border:2px solid #39FF14; color:var(--ink);
  box-shadow:0 0 8px rgba(57,255,20,.5), inset 0 0 5px rgba(57,255,20,.2);
}
/* 夜間：除外ONは明るいネオンピンク枠（文字は白のまま・実線＋発光） */
html[data-theme="dark"] #my-quiz-app #btnMaster.master-on{
  border:2px solid #FF2D95; color:var(--ink);
  box-shadow:0 0 8px rgba(255,45,149,.5), inset 0 0 5px rgba(255,45,149,.2);
}
/* 夜間：○×ボタンは 妥当である=ネオンブルー枠 / 誤りである=ネオンピンク枠（実線＋発光）。
   判定後（correct/wrong）は従来の正誤色を優先するため :not() で除外 */
html[data-theme="dark"] #my-quiz-app .choices.tf .choice:first-child:not(.correct):not(.wrong){
  border:2px solid #00B3FF;
  box-shadow:0 0 8px rgba(0,179,255,.5), inset 0 0 5px rgba(0,179,255,.2);
}
html[data-theme="dark"] #my-quiz-app .choices.tf .choice:last-child:not(.correct):not(.wrong){
  border:2px solid #FF2D95;
  box-shadow:0 0 8px rgba(255,45,149,.5), inset 0 0 5px rgba(255,45,149,.2);
}
/* 夜間：枠線ボタンの枠をネオン（シアン）に。ほのかに発光（ON状態のボタン色は昼と共通のため除外） */
html[data-theme="dark"] #my-quiz-app .btn.ghost:not(.on):not(.master-on),
html[data-theme="dark"] #my-quiz-app #btnTop,
html[data-theme="dark"] #my-quiz-app #btnHome,
html[data-theme="dark"] #my-quiz-app #btnLogout,
html[data-theme="dark"] #my-quiz-app #btnReset,
html[data-theme="dark"] #my-quiz-app #btnTheme,
html[data-theme="dark"] #my-quiz-app #btnSaveHighlight,
html[data-theme="dark"] #my-quiz-app #userHighlightInput,
html[data-theme="dark"] #my-quiz-app #userHighlightInput:focus,
html[data-theme="dark"] #my-quiz-app select:not(:disabled),
html[data-theme="dark"] #my-quiz-app #search,
html[data-theme="dark"] #my-quiz-app #search:focus,
html[data-theme="dark"] #my-quiz-app #hotTags .chip,
html[data-theme="dark"] #my-quiz-app .choices.tf .choice:not(.correct):not(.wrong){
  border-color:#00E5FF; border-width:2px;
  box-shadow:0 0 7px rgba(0,229,255,.45), inset 0 0 5px rgba(0,229,255,.18);
}
/* 次の問題：夜間は緑の塗りを使わず、前の問題と同じ「暗い地＋ネオン枠＋白文字」にする
   （押せるようになったことは、枠がグレー→シアンに変わることで示す） */
html[data-theme="dark"] #my-quiz-app #btnNext{
  background:var(--bg-inset); color:#FFF;
  border:2px solid #00E5FF;
  box-shadow:0 0 7px rgba(0,229,255,.45), inset 0 0 5px rgba(0,229,255,.18);
}
/* ホバーでも緑（.btn:hover）と押し込み影に戻さない */
html[data-theme="dark"] #my-quiz-app #btnNext:hover:not(:disabled){
  background:var(--color-navy-tint);
  box-shadow:0 0 7px rgba(0,229,255,.45), inset 0 0 5px rgba(0,229,255,.18);
}
/* セレクト無効時 */
html[data-theme="dark"] #my-quiz-app select:disabled{ background-color:#242424; color:#7C7C74; }
/* プレビューの最終回答日：夜間は黄色が読みやすい */
html[data-theme="dark"] #my-quiz-app #list .card .muted,
html[data-theme="dark"] #my-quiz-app #list .card .text-yellow{ color:#F5D76E; }
/* 問題文（本文・プレビュー本文・部門）は真っ白 */
html[data-theme="dark"] #my-quiz-app .qtitle,
html[data-theme="dark"] #my-quiz-app #qtitle .qbody,
html[data-theme="dark"] #my-quiz-app #list .qtitle,
html[data-theme="dark"] #my-quiz-app #list .qtitle .angle{ color:#FFFFFF; }
html[data-theme="dark"] #my-quiz-app #qClassDisplay{ color:#FFFFFF !important; }
/* 問題タイトル（問題番号）は夜間は青 */
html[data-theme="dark"] #my-quiz-app .quiznum,
html[data-theme="dark"] #my-quiz-app #list .quiznum{ color:#6FB1FF; }
/* 正誤フィードバック：判定色は暗地で沈むため明るい緑・朱に置き換え */
/* 夜間：正解＝ネオングリーン / 不正解＝ネオンピンク（要復習ON・除外ONと同系色） */
html[data-theme="dark"] #my-quiz-app .choice.correct{
  outline-color:#39FF14; border-color:#39FF14; background:rgba(57,255,20,.10);
  box-shadow:0 0 8px rgba(57,255,20,.45), inset 0 0 5px rgba(57,255,20,.15);
}
html[data-theme="dark"] #my-quiz-app .choice.wrong{
  outline-color:#FF2D95; border-color:#FF2D95; background:rgba(255,45,149,.10);
  box-shadow:0 0 8px rgba(255,45,149,.45), inset 0 0 5px rgba(255,45,149,.15);
}
html[data-theme="dark"] #my-quiz-app .result-label.ok{ color:#39FF14; }
html[data-theme="dark"] #my-quiz-app .result-label.ng{ color:#FF2D95; }
/* 朱色の文字（強調・お題の山括弧など）も暗地向けに明るく */
html[data-theme="dark"] #my-quiz-app .text-yellow,
html[data-theme="dark"] #my-quiz-app .ai-loading,
html[data-theme="dark"] #my-quiz-app .qtitle .angle{ color:#F0937A; }
/* セクション見出しは夜間＝白、ヒット件数は昼夜とも同じ緑 */
html[data-theme="dark"] #my-quiz-app .section-title{ color:#FFF; }
html[data-theme="dark"] #my-quiz-app #count{ color:#22A84F; }

/* ============================================================
   タッチ端末（スマホ・タブレット）：hoverがタップ後も固着するため、
   「浮く/押し込む」ホバー演出を無効化（崩れて見える原因）。
============================================================ */
@media (hover:none){
  #my-quiz-app .btn:hover{ transform:none; box-shadow:0 3px 0 var(--btn-deep); }
  #my-quiz-app .btn.ghost:hover{ box-shadow:none; background:var(--bg-inset); }
  /* 前の問題/次の問題の浮上ホバーも無効化（IDセレクタのため個別に打ち消す） */
  #my-quiz-app #btnPrev:hover:not(:disabled){ transform:none; box-shadow:none; }
  #my-quiz-app #btnNext:hover:not(:disabled){ transform:none; box-shadow:0 3px 0 var(--btn-deep); }
  #my-quiz-app .choice:hover{ transform:none; box-shadow:none; }
  #my-quiz-app .btn.bookmark:hover,
  #my-quiz-app #btnSaveHighlight:hover,
  #my-quiz-app #btnBookmark:hover,
  #my-quiz-app #btnMaster:hover{ transform:none; box-shadow:none; background:var(--bg-inset); }
  #my-quiz-app #btnTop:hover, #my-quiz-app #btnHome:hover,
  #my-quiz-app #btnLogout:hover, #my-quiz-app #btnReset:hover, #my-quiz-app #btnTheme:hover{
    transform:none; box-shadow:0 3px 0 #000; background:var(--bg-inset);
  }
}
/* 適用ボタンは幅を確保（入力欄に押されて潰れないように） */
#my-quiz-app #btnSaveHighlight{ flex:none; white-space:nowrap; }
/* 要復習/除外のON時も文字を折り返さない */
#my-quiz-app .btn.bookmark{ white-space:nowrap; }

/* 解説の図（2026-10-17。解説の文中の {{fig:…}} から script.js が出す）。図は白地のSVGなのでダークモードでも白地のまま */
#my-quiz-app .exp-fig{ margin:14px 0 4px; white-space:normal; text-align:center; }
#my-quiz-app .exp-fig img{ display:block; width:100%; max-width:640px; height:auto; margin:0 auto; background:#fff; border:1px solid #000; border-radius:6px; }
#my-quiz-app .exp-fig figcaption{ font-size:14px; margin-top:4px; color:#000; }
html[data-theme="dark"] #my-quiz-app .exp-fig figcaption{ color:#fff; }
/* 夜の表示では解説の図（自作の SVG）を明暗だけ反転する（2026-10-26）。白地→黒地・黒文字→白文字になり、
   hue-rotate で色相を戻すので赤・緑・紺は同じ色味のまま明るくなる。写真や PDF の切り抜き（png/jpg）は反転しない */
html[data-theme="dark"] #my-quiz-app .exp-fig img[src$=".svg"],
html[data-theme="dark"] .fig-zoom img[src$=".svg"]{ filter:invert(1) hue-rotate(180deg); border-color:#777; }
/* 図の拡大表示（script.js の openFigZoom。body の直下に出すので #my-quiz-app の外） */
.fig-zoom{ position:fixed; inset:0; z-index:10001; background:rgba(0,0,0,.85); display:flex; align-items:center; justify-content:center; padding:64px 12px 16px; box-sizing:border-box; overflow:auto; }
.fig-zoom img{ display:block; width:100%; max-width:1200px; height:auto; max-height:calc(100vh - 80px); object-fit:contain; margin:auto; background:#fff; border-radius:6px; }
.fig-zoom-close{ position:fixed; top:10px; right:10px; z-index:10002; min-height:44px; padding:8px 18px; font-size:17px; font-weight:700; color:#fff; background:#1F3A5F; border:2px solid #fff; border-radius:8px; cursor:pointer; }

/* 技術士一次：科目タブ（基礎｜適性｜専門。科目ごとに別のクイズ・別売り）。見た目＝インデックスタブ（2026-10-19 ユーザーが10案から案1）。決め事＝明るい地は黒文字・暗い地は白文字・17px以上 */
/* 計算ドリルの入口（クイズ開始の隣。script.js の renderDrillButton）：枠だけのボタン＝黒文字＋黒枠。PCは開始の左、スマホは開始の右に半分ずつ */
#my-quiz-app #btnDrill{ font-size:17px; color:#000; background:#fff; border:2px solid #000; box-shadow:none; }
#my-quiz-app #btnDrill:hover{ background:var(--color-navy-tint, #EEF0E0); transform:none; box-shadow:none; }
#my-quiz-app .toolbar.has-drill .btn.lg{ white-space:nowrap; }
@media (max-width:720px){
  #my-quiz-app .toolbar.has-drill{ width:100%; flex-wrap:nowrap; }
  #my-quiz-app .toolbar.has-drill .btn.lg{ flex:1 1 0; min-width:0; padding:14px 8px; letter-spacing:.1em; font-size:17px; }
  #my-quiz-app #btnDrill{ order:2; }
}
#my-quiz-app #btnDrill .drill-short{ display:none; }
@media (max-width:420px){
  #my-quiz-app #btnDrill.has-short .drill-long{ display:none; }
  #my-quiz-app #btnDrill.has-short .drill-short{ display:inline; }
}
html[data-theme="dark"] #my-quiz-app #btnDrill{ color:#fff; background:transparent; border-color:#fff; }
html[data-theme="dark"] #my-quiz-app #btnDrill:hover{ background:#1a1a1a; }

#ipejTabs.ipej-tabs{ max-width:1100px; margin:12px auto 0; padding:0 16px; box-sizing:border-box; }
#ipejTabs .ipej-tabrow{ display:flex; gap:6px; padding-left:8px; }
#ipejTabs .ipej-tabrow a{ flex:1 1 0; min-width:0; text-align:center; font-size:17px; font-weight:700; padding:10px 6px; color:#000; text-decoration:none;
  background:var(--bg-tatami-a, #E0E3C6); border:1px solid #000; border-bottom:none; border-radius:10px 10px 0 0; position:relative; top:1px; }
#ipejTabs .ipej-tabrow a.on{ background:var(--bg-inset, #FFFEFA); border-top:6px solid var(--color-primary, #B0402C); padding-top:6px; z-index:1; }
#ipejTabs .ipej-body{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; border:1px solid #000; background:var(--bg-inset, #FFFEFA); padding:12px 16px; font-size:17px; font-weight:700; color:#000; }
#ipejTabs .ipej-lab{ font-size:14px; font-weight:700; letter-spacing:.08em; margin-right:2px; }
#ipejTabs a.ipej-dept{ font-size:17px; font-weight:700; padding:5px 14px; color:#000; background:#fff; border:2px solid #000; border-radius:999px; text-decoration:none; }
#ipejTabs a.ipej-dept.on{ color:#fff; background:var(--color-navy, #2C3150); border-color:var(--color-navy, #2C3150); }
html[data-theme="dark"] #ipejTabs .ipej-tabrow a{ color:#fff; background:#000; border-color:#fff; }
html[data-theme="dark"] #ipejTabs .ipej-tabrow a.on{ background:#1a1a1a; border-top-color:var(--color-primary, #B0402C); }
html[data-theme="dark"] #ipejTabs .ipej-body{ color:#fff; background:#1a1a1a; border-color:#fff; }
html[data-theme="dark"] #ipejTabs a.ipej-dept{ color:#fff; background:transparent; border-color:#fff; }
html[data-theme="dark"] #ipejTabs a.ipej-dept.on{ color:#000; background:#fff; }

.purchase-overlay .ipej-buy{ text-align:left; color:#000; }
.purchase-overlay .ipej-buy-title{ font-size:17px; font-weight:800; margin:0 0 8px; }
.purchase-overlay .ipej-opt{ display:flex; gap:10px; align-items:flex-start; font-size:17px; line-height:1.6; padding:10px 12px; margin:0 0 8px;
  border:2px solid #000; border-radius:6px; background:#fff; cursor:pointer; }
.purchase-overlay .ipej-opt input{ margin-top:6px; width:18px; height:18px; flex:none; }
.purchase-overlay .ipej-opt:has(input:checked){ border-color:#B23A2A; background:#FFF6F2; }
.purchase-overlay .ipej-sub{ font-size:14px; color:#000; }
.purchase-overlay .ipej-opt select{ font-size:17px; color:#000; }

/* ============================================================
   成績表（クイズ画面の中の1画面。docs/共通/成績表の仕様.md）
   文字は明るい地で黒・暗い地で白（CLAUDE.md の重要ルール6）。本文19px・ボタン/表17px・注記14px以上。数値は途中で改行しない。
   3色の帯：できた＝緑・要復習＝朱・未着手＝地の色（黒枠）。
============================================================ */
#my-quiz-app .result-seiseki{ margin-top:22px; padding-top:18px; border-top:1px solid var(--line); }
#my-quiz-app .result-seiseki .btn{ font-size:17px; }
#my-quiz-app #seiseki{
  --sk-ink:#000; --sk-ok:#2F7A4F; --sk-ng:#B0402C; --sk-new:#fff; --sk-edge:#000; --sk-tint:#F3F1E7;
  color:var(--sk-ink); font-size:19px; line-height:1.7; border-top-color:var(--color-primary);
}
html[data-theme="dark"] #my-quiz-app #seiseki{ --sk-ink:#fff; --sk-ok:#4FB37A; --sk-ng:#E8705A; --sk-new:#1E1E1E; --sk-edge:#fff; --sk-tint:#292929; }
#my-quiz-app #seiseki .nb{ white-space:nowrap; }
#my-quiz-app .result-seiseki .sk-msg,
#my-quiz-app #seiseki .sk-msg{ font-size:19px; color:var(--sk-ink, #000); margin:0 0 12px; }
html[data-theme="dark"] #my-quiz-app .result-seiseki .sk-msg{ color:#fff; }
#my-quiz-app .sk-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:12px; }
#my-quiz-app .sk-title{ font-size:24px; margin:0; color:var(--sk-ink); letter-spacing:.1em; }
#my-quiz-app #seiseki .btn{ font-size:17px; }
#my-quiz-app #seiseki .btn.ghost{ color:var(--sk-ink); border-color:var(--sk-edge); }
/* 科目のタブ・資格／級のタブ */
#my-quiz-app .sk-tabs{ display:flex; flex-wrap:wrap; gap:8px; margin:0 0 16px; }
#my-quiz-app .sk-tab{
  display:inline-flex; align-items:center; gap:6px; font-size:17px; font-weight:700; line-height:1.4; padding:9px 16px;
  border:1.5px solid var(--sk-edge); background:var(--sk-new); color:var(--sk-ink); text-decoration:none; cursor:pointer; font-family:inherit;
}
#my-quiz-app a.sk-tab:hover, #my-quiz-app button.sk-tab:hover{ background:var(--sk-tint); text-decoration:none; }
#my-quiz-app .sk-tab.on{ background:var(--color-navy); border-color:var(--color-navy); color:#fff; cursor:default; }
html[data-theme="dark"] #my-quiz-app .sk-tab.on{ background:#fff; border-color:#fff; color:#000; }
#my-quiz-app .sk-tab.none{ border-style:dashed; color:#767676; border-color:#767676; cursor:not-allowed; } /* 押せない状態だけグレー可（ルール6） */
#my-quiz-app .sk-tab-note{ font-size:14px; font-weight:400; }
html[data-theme="dark"] #my-quiz-app a.sk-tab{ color:#fff; }
#my-quiz-app .sk-subtabs{ margin-top:-4px; }
/* 見出し・説明 */
#my-quiz-app .sk-h{ font-size:22px; margin:6px 0 6px; color:var(--sk-ink); border-left:6px solid var(--color-primary); padding-left:10px; }
#my-quiz-app .sk-lead{ font-size:17px; margin:0 0 12px; }
#my-quiz-app .sk-note{ font-size:14px; margin:14px 0 0; }
/* 弱い分野（いちばん上・3件） */
#my-quiz-app .sk-weak{ margin-bottom:26px; }
#my-quiz-app .sk-weak-list{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:12px; }
#my-quiz-app .sk-weak-item{
  display:flex; flex-direction:column; gap:8px; padding:14px 16px; background:var(--sk-new);
  border:2px solid var(--sk-edge); border-left:8px solid var(--sk-ng);
}
#my-quiz-app .sk-weak-name{ font-size:21px; font-weight:700; line-height:1.5; }
#my-quiz-app .sk-weak-num{ display:flex; flex-wrap:wrap; gap:4px 14px; font-size:17px; }
#my-quiz-app .sk-weak-num b{ color:var(--sk-ng); }
#my-quiz-app .sk-weak-item .sk-go{ margin-top:auto; align-self:stretch; }
/* 進み具合（部門・分野ごとの行） */
#my-quiz-app .sk-legend{ display:flex; flex-wrap:wrap; gap:6px 18px; font-size:14px; margin:4px 0 10px; }
#my-quiz-app .sk-legend span{ display:inline-flex; align-items:center; gap:6px; white-space:nowrap; }
#my-quiz-app .sk-sw{ display:inline-block; width:16px; height:16px; border:1.5px solid var(--sk-edge); }
#my-quiz-app .sk-sw.ok{ background:var(--sk-ok); }
#my-quiz-app .sk-sw.ng{ background:var(--sk-ng); }
#my-quiz-app .sk-sw.new{ background:var(--sk-new); }
#my-quiz-app .sk-row{
  display:grid; grid-template-columns:minmax(9em,1.2fr) minmax(140px,1.5fr) 16.5em 7.5em; align-items:center; gap:6px 16px; /* 数の欄は幅を固定（行ごとに帯の位置がずれないように） */
  padding:9px 0; border-bottom:1px solid var(--sk-edge);
}
#my-quiz-app .sk-row.sk-total{ font-weight:700; border-bottom-width:2px; }
#my-quiz-app .sk-name{ font-size:17px; line-height:1.5; }
#my-quiz-app .sk-n{ font-size:14px; font-weight:400; margin-left:8px; }
#my-quiz-app .sk-bar{ display:flex; height:18px; border:1.5px solid var(--sk-edge); background:var(--sk-new); overflow:hidden; }
#my-quiz-app .sk-bar-ok{ background:var(--sk-ok); }
#my-quiz-app .sk-bar-ng{ background:var(--sk-ng); }
#my-quiz-app .sk-nums{ display:flex; gap:12px; font-size:17px; justify-content:flex-end; font-variant-numeric:tabular-nums; }
#my-quiz-app .sk-row .sk-go{ padding:8px 10px; letter-spacing:.05em; }
#my-quiz-app .sk-pace{ font-size:17px; font-weight:700; margin:8px 0 4px; padding:8px 12px; background:var(--sk-tint); border-left:6px solid var(--color-navy); }
html[data-theme="dark"] #my-quiz-app .sk-pace{ border-left-color:#fff; }
/* 部門（開け閉めできる。最初は開いておく） */
#my-quiz-app .sk-group{ margin-top:10px; }
#my-quiz-app .sk-group > summary{ list-style:none; cursor:pointer; }
#my-quiz-app .sk-group > summary::-webkit-details-marker{ display:none; }
#my-quiz-app .sk-grow{ background:var(--sk-tint); padding-left:8px; padding-right:8px; font-weight:700; }
#my-quiz-app .sk-grow .sk-name::before{ content:"▼ "; font-size:14px; }
#my-quiz-app .sk-group:not([open]) .sk-grow .sk-name::before{ content:"▶ "; }
#my-quiz-app .sk-group > .sk-row{ padding-left:22px; }
/* スマホ：名前とボタンを1行目、帯を2行目、数を3行目に */
@media (max-width:720px){
  #my-quiz-app .sk-row, #my-quiz-app .sk-row.sk-total{
    grid-template-columns:minmax(0,1fr) auto; grid-template-areas:"name go" "bar bar" "nums nums";
  }
  #my-quiz-app .sk-row .sk-name{ grid-area:name; }
  #my-quiz-app .sk-row .sk-go{ grid-area:go; }
  #my-quiz-app .sk-row .sk-bar{ grid-area:bar; }
  #my-quiz-app .sk-row .sk-nums{ grid-area:nums; justify-content:flex-start; flex-wrap:wrap; gap:2px 14px; }
  #my-quiz-app .sk-row.sk-total{ grid-template-areas:"name name" "bar bar" "nums nums"; }
  #my-quiz-app .sk-group > .sk-row{ padding-left:10px; }
  #my-quiz-app .sk-title{ font-size:22px; }
}


/* ============================================================
   画面の刷新（2026-10-28。docs/共通/クイズ画面の刷新.md）
   見た目＝「和」（明朝・紺・朱・深緑は残し、畳の模様と巻物の飾りはやめる）。
   タブ＝スマホは画面の下、PC（900px 以上）は左の縦の列。上の帯は「〇〇 ▼」と「メニュー」だけ。
   文字は明るい地で黒・暗い地で白（CLAUDE.md の 6）。--qx-scale＝メニューの「文字の大きさ」（出題画面の中を zoom で丸ごと）。
   ファイル末尾なので、上の古いルールより後勝ち。夜の表示は html[data-theme="dark"] で下にまとめる。
============================================================ */
:root{ --qx-scale:1; }
body{ background:#ECE9DA; background-image:none; }
html #my-quiz-app.qx{
  --ink:#000; --ink-sub:#000; --ink-muted:#000; --question:#000;
  --qx-navy:#232A4A; --qx-paper:#FBFAF6; --qx-q:#F3EAD2; --qx-qbar:#6B5236;
  max-width:none; margin:0; padding:0; box-shadow:none; background:none; color:#000;
}
#my-quiz-app [hidden]{ display:none !important; }
#my-quiz-app .qx-main{ background:var(--qx-paper); min-height:100vh; padding:12px 16px 120px; }
#my-quiz-app .qx-main > *{ max-width:900px; margin-left:auto; margin-right:auto; }

/* --- タブ（スマホ＝下） --- */
#my-quiz-app .qx-tabs{ position:fixed; left:0; right:0; bottom:0; z-index:9000; display:flex; background:var(--qx-navy); border-top:2px solid #000; padding-bottom:env(safe-area-inset-bottom); }
#my-quiz-app .qx-tabs button{ flex:1; background:none; border:none; color:#fff; font-family:var(--font-serif); font-size:17px; font-weight:700; padding:8px 2px 12px; cursor:pointer; line-height:1.3; }
#my-quiz-app .qx-tabs button i{ display:block; font-style:normal; font-size:21px; }
#my-quiz-app .qx-tabs button.on{ background:var(--qx-paper); color:#000; }
#my-quiz-app .qx-railhead{ display:none; }
body.qx-at-play #my-quiz-app .qx-tabs{ display:none; }
/* --- PC：左の縦の列 --- */
@media (min-width:900px){
  #my-quiz-app .qx-shell{ display:grid; grid-template-columns:220px minmax(0,1fr); }
  #my-quiz-app .qx-tabs{ position:sticky; top:0; align-self:start; height:100vh; box-sizing:border-box; flex-direction:column; gap:6px; padding:20px 12px; border-top:none; border-right:2px solid #000; }
  #my-quiz-app .qx-tabs button{ flex:none; text-align:left; font-size:19px; padding:12px 14px; }
  #my-quiz-app .qx-tabs button i{ display:inline-block; width:2em; font-size:19px; }
  #my-quiz-app .qx-railhead{ display:block; color:#fff; font-weight:700; font-size:17px; padding:0 8px 14px; border-bottom:1px solid #fff; margin-bottom:8px; }
  body.qx-at-play #my-quiz-app .qx-tabs{ display:flex; }
  #my-quiz-app .qx-main{ padding:20px 40px 60px; }
}

/* --- 上の帯 --- */
#my-quiz-app .qx-top{ display:flex; justify-content:space-between; align-items:center; gap:10px; padding:4px 0 12px; border-bottom:2px solid #000; margin-bottom:16px; }
body.qx-at-play #my-quiz-app .qx-top{ display:none; }
#my-quiz-app .qx-pick, #my-quiz-app .qx-menubtn{ font-family:var(--font-serif); color:#000; background:#fff; border:2px solid #000; border-radius:4px; font-weight:700; cursor:pointer; }
#my-quiz-app .qx-pick{ font-size:19px; padding:7px 14px; text-align:left; }
#my-quiz-app .qx-pick.single{ border-color:transparent; background:none; padding-left:0; cursor:default; opacity:1; color:#000; }
#my-quiz-app .qx-menubtn{ font-size:17px; padding:7px 14px; flex:none; }

/* --- ホーム --- */
#my-quiz-app #home{ display:block; }
#my-quiz-app .qx-filters{ margin:0 0 4px; }
#my-quiz-app .qx-filters .filter-group{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px 14px; }
@media (min-width:900px){
  #my-quiz-app .qx-filters .filter-group{ grid-template-columns:repeat(auto-fit, minmax(190px, 1fr)); }
  #my-quiz-app .qx-filters .filter-group > div:last-child{ grid-column:1 / -1; } /* PC はキーワードを横いっぱい（スマホは並びの隣） */
}
#my-quiz-app .qx-filters label{ font-size:17px; color:#000; letter-spacing:0; margin-bottom:4px; }
#my-quiz-app .qx-filters select, #my-quiz-app .qx-filters .input{ font-size:17px; color:#000; width:100%; box-sizing:border-box; min-height:48px; }
#my-quiz-app .qx-filters #hotTags{ margin-top:10px; }
#my-quiz-app .qx-filters .chip{ font-size:17px; color:#000; }
#my-quiz-app .qx-filters .chip .muted{ color:#000; }
#my-quiz-app .qx-filters-foot{ display:flex; justify-content:space-between; align-items:center; gap:10px; margin-top:10px; }
/* 絞った件数（script.js の「N 件ヒット」）：以前と同じ緑の大きな文字（2026-10-28 ユーザー「ヒットした数が分かりやすく」） */
#my-quiz-app .qx-filters-foot #count{ font-size:26px; white-space:nowrap; }
#my-quiz-app .qx-filters-foot .qx-clear{ padding:6px 14px; }
#my-quiz-app #home[data-pane="drill"] .qx-filters{ display:none; }
#my-quiz-app .qx-big{ display:block; width:100%; box-sizing:border-box; text-align:center; text-decoration:none; background:var(--btn); color:#fff; border:none; border-radius:4px; box-shadow:0 3px 0 var(--btn-deep);
  font-family:var(--font-serif); font-size:23px; font-weight:700; letter-spacing:.1em; padding:16px 10px; margin:14px 0 8px; cursor:pointer; line-height:1.4; }
#my-quiz-app .qx-big small{ display:block; font-size:17px; font-weight:400; letter-spacing:.03em; white-space:nowrap; }
#my-quiz-app .qx-big.navy{ background:var(--qx-navy); box-shadow:0 3px 0 #11152a; }
#my-quiz-app .qx-big:hover{ transform:translateY(2px); box-shadow:0 1px 0 var(--btn-deep); text-decoration:none; }
#my-quiz-app a.qx-big, #my-quiz-app a.qx-big:hover{ color:#fff; }
#my-quiz-app .qx-desc{ font-size:17px; margin:4px 2px 0; }
#my-quiz-app #trialBar.qx-trial, #my-quiz-app #oralEntry.qx-trial{ position:static !important; margin:0 0 14px; border-radius:4px; }
/* 口述・実地の入口（quizui.js。タブには入れない＝案3）。スマホはホームの上の帯（インフラの口述プランの帯と同じ形）、PC は左の列の下 */
#my-quiz-app .qx-exam-entry{ background:#000; color:#fff; border-radius:4px; margin:0 0 14px; padding:4px 14px; }
#my-quiz-app .qx-exam-entry p{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px 14px; margin:0; padding:8px 0; font-size:17px; line-height:1.5; }
#my-quiz-app .qx-exam-entry p + p{ border-top:1px solid #fff; }
#my-quiz-app .qx-exam-entry a{ background:#0E7A55; color:#fff; border:2px solid #fff; border-radius:10px; padding:8px 22px; font-weight:900; font-size:17px; text-decoration:none; flex:none; }
#my-quiz-app .qx-railsep, #my-quiz-app .qx-railx{ display:none; }
@media (min-width:900px){
  #my-quiz-app .qx-exam-entry{ display:none; }
  #my-quiz-app .qx-railsep{ display:block; border-top:1px solid #fff; margin:10px 8px 4px; }
  #my-quiz-app .qx-railx{ display:block; color:#fff; font-family:var(--font-serif); font-size:17px; font-weight:700; text-decoration:none; padding:10px 14px; line-height:1.4; }
  #my-quiz-app .qx-railx small{ display:block; font-size:14px; font-weight:400; }
  #my-quiz-app .qx-railx:hover{ text-decoration:underline; }
}
#my-quiz-app #ipejTabs, #my-quiz-app #btnDrill{ display:none !important; }
/* 期間限定のお知らせの帯（kotae-banner.js）はホームだけ */
body:not(.qx-at-home) > div[role="note"]{ display:none; }

/* --- 窓（絞り込み・メニュー・切り替え） --- */
#my-quiz-app .qx-sheet{ position:fixed; inset:0; z-index:9600; background:rgba(0,0,0,.45); display:flex; align-items:flex-end; justify-content:center; }
#my-quiz-app .qx-sheet-in{ background:var(--qx-paper); width:100%; max-width:680px; max-height:90vh; overflow:auto; border-top:3px solid #000; border-radius:14px 14px 0 0; padding:14px 18px 22px; box-sizing:border-box; }
@media (min-width:900px){
  #my-quiz-app .qx-sheet{ align-items:center; }
  #my-quiz-app .qx-sheet-in{ border:2px solid #000; border-radius:6px; }
}
#my-quiz-app .qx-sheet-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; }
#my-quiz-app .qx-sheet-head b{ font-size:21px; }
#my-quiz-app .qx-close{ width:44px; height:44px; font-size:23px; line-height:1; background:#fff; color:#000; border:2px solid #000; border-radius:4px; cursor:pointer; }
#my-quiz-app .qx-lab{ font-size:17px; font-weight:700; margin:14px 0 6px; }
#my-quiz-app .qx-sheet label{ font-size:17px; color:#000; letter-spacing:0; }
#my-quiz-app .qx-sheet select, #my-quiz-app .qx-sheet .input{ font-size:17px; color:#000; }
#my-quiz-app .qx-sheet .chip{ font-size:17px; color:#000; }
#my-quiz-app .qx-sheet .chip .muted{ color:#000; }
#my-quiz-app .qx-sheet-foot{ display:flex; gap:10px; align-items:stretch; margin-top:16px; }
#my-quiz-app .qx-sheet-foot .qx-big{ flex:1; margin:0; font-size:19px; letter-spacing:.03em; }
#my-quiz-app .qx-n, #my-quiz-app .qx-n2{ white-space:nowrap; }
#my-quiz-app .qx-clear{ flex:none; background:#fff; color:#000; border:2px solid #000; border-radius:4px; font-family:var(--font-serif); font-size:17px; font-weight:700; padding:0 14px; cursor:pointer; }
#my-quiz-app .qx-item{ display:block; width:100%; text-align:left; background:#fff; color:#000; border:2px solid #000; border-radius:4px; font-family:var(--font-serif); font-size:19px; font-weight:700; padding:12px 16px; margin:8px 0; cursor:pointer; box-sizing:border-box; }
#my-quiz-app .qx-acct #userInfo{ display:block; font-size:17px; color:#000; margin:0 0 8px; word-break:break-all; }
#my-quiz-app .qx-login{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
#my-quiz-app .qx-login .input{ grid-column:1 / -1; width:100%; box-sizing:border-box; font-size:17px; }
#my-quiz-app .qx-login .btn{ font-size:17px; }
#my-quiz-app .qx-size{ background:#fff; border:2px solid #000; border-radius:4px; padding:10px 16px; margin:8px 0; }
#my-quiz-app .qx-size label{ display:flex; justify-content:space-between; font-size:19px; font-weight:700; margin:0 0 6px; }
#my-quiz-app .qx-size input{ width:100%; accent-color:var(--qx-navy); height:30px; }
#my-quiz-app .qx-size p{ margin:4px 0 0; font-size:calc(19px * var(--qx-scale)); font-family:var(--font-serif); }
#my-quiz-app .qx-picks{ display:grid; grid-template-columns:repeat(auto-fill, minmax(160px, 1fr)); gap:8px; }
#my-quiz-app .qx-pk{ display:block; background:#fff; color:#000; border:2px solid #000; border-radius:4px; padding:10px 14px; font-size:19px; font-weight:700; text-decoration:none; }
#my-quiz-app .qx-picks + .qx-picks{ margin-top:16px; }
#my-quiz-app #qClassDisplay.qx-dup{ display:none !important; }
#my-quiz-app .qx-pk small{ display:block; font-size:14px; font-weight:400; }
#my-quiz-app .qx-pk.on{ background:var(--qx-navy); color:#fff; border-color:var(--qx-navy); }
#my-quiz-app .qx-pk:hover{ text-decoration:none; transform:translateY(-2px); }
body.qx-sheet-open{ overflow:hidden; }

/* --- 出題 --- */
#my-quiz-app #play{ border:none; box-shadow:none; background:none; padding:0; }
/* 文字の大きさ（メニューのスライダー）：出題画面の中を丸ごと大きくする（部門・問題番号・ボタンも。2026-10-28 ユーザー）。横幅は変わらず中身が折り返す */
#my-quiz-app #play{ zoom:var(--qx-scale); }
#my-quiz-app .qx-playtop{ display:flex; justify-content:space-between; align-items:center; gap:10px; font-size:17px; padding:2px 0 8px; }
#my-quiz-app .qx-playtop b{ font-size:17px; }
#my-quiz-app #progressText{ color:#000; letter-spacing:0; white-space:nowrap; }
#my-quiz-app .qx-quit{ background:#fff; color:#000; border:2px solid #000; border-radius:4px; font-family:var(--font-serif); font-size:17px; font-weight:700; padding:4px 14px; cursor:pointer; flex:none; }
#my-quiz-app .progress{ margin-bottom:12px; }
#my-quiz-app .quiznum{ font-size:15px; color:#000; font-weight:700; }
#my-quiz-app #play:not(.qx-answered) .highlight-bar{ display:none; }
/* お題：巻物の飾りをやめ、生成りの帯に茶の縁（左右）だけ */
#my-quiz-app #qtitle .odai, #my-quiz-app #qtitle .odai.odai{
  margin:0 0 14px; padding:12px 16px; background:var(--qx-q); color:#000; border:none;
  border-left:8px solid var(--qx-qbar); border-right:8px solid var(--qx-qbar); border-radius:0; box-shadow:none;
  font-size:19px; line-height:2;
}
#my-quiz-app #qtitle .odai::before, #my-quiz-app #qtitle .odai::after{ display:none; }
#my-quiz-app #qtitle .qbody{ font-size:19px; line-height:2.05; color:#000; }
#my-quiz-app .choice{ font-size:17px; color:var(--ink); }
/* 正誤のラベル（右端の「正解」「不正解」）が選択肢の文字に重ならないよう、付いたら右を空ける */
#my-quiz-app .choices.multi .choice.correct, #my-quiz-app .choices.multi .choice.wrong{ padding-right:6em; }
/* ○×は正誤のラベルを「妥当である」の右隣に（2026-10-29 ユーザー）。端に寄せず文字の流れの中に置くので、文字の大きさ160%のスマホで入りきらなければ次の行へ回り、重ならない */
#my-quiz-app .choices.tf .result-label{ position:static; transform:none; display:inline-block; margin-left:.8em; letter-spacing:.05em; white-space:nowrap; }
/* 押印（2026-10-29 ユーザーが5案から1案に決定。見比べ＝assets_src/共通/クイズ画面の刷新/正解の演出の案.html）。
   選んだボタンの真ん中に〇／×をポンと押し、0.9秒で消える（script.js の choose が足し、終わったら消す）。目線が動かないので、そのまま解説へ読み進められる */
#my-quiz-app .qx-stamp{ position:absolute; left:50%; top:50%; width:84px; height:84px; margin:-42px 0 0 -42px; pointer-events:none; opacity:0; animation:qxStamp .9s ease-out forwards; }
#my-quiz-app .qx-stamp.ok{ border-radius:50%; border:9px solid var(--ok); box-sizing:border-box; }
#my-quiz-app .qx-stamp.ng::before, #my-quiz-app .qx-stamp.ng::after{ content:""; position:absolute; left:50%; top:50%; width:96px; height:10px; margin:-5px 0 0 -48px; background:var(--color-primary); border-radius:5px; }
#my-quiz-app .qx-stamp.ng::before{ transform:rotate(45deg); }
#my-quiz-app .qx-stamp.ng::after{ transform:rotate(-45deg); }
html[data-theme="dark"] #my-quiz-app .qx-stamp.ok{ border-color:#39FF14; }
html[data-theme="dark"] #my-quiz-app .qx-stamp.ng::before, html[data-theme="dark"] #my-quiz-app .qx-stamp.ng::after{ background:#FF2D95; }
@keyframes qxStamp{
  0%{ opacity:0; transform:scale(2.2) rotate(-12deg); }
  25%{ opacity:.95; transform:scale(.92) rotate(-6deg); }
  35%{ transform:scale(1) rotate(-6deg); }
  75%{ opacity:.9; }
  100%{ opacity:0; transform:scale(1) rotate(-6deg); }
}
@media (prefers-reduced-motion:reduce){ #my-quiz-app .qx-stamp{ animation-duration:.01s; } }
#my-quiz-app .choices.tf .choice{ font-size:19px; }
#my-quiz-app .explain{ font-size:19px; color:#000; }
/* AI の解説：枠の中の枠をやめ、解説の続きとして同じ幅で流す（2026-10-29 ユーザー「枠の中の枠でスペースが削られる」→案A）。
   上に区切り線と「AI の解説」、AI の答えは左の細い線だけ・幅いっぱい。自分の質問だけ右寄せの吹き出し */
#my-quiz-app .ai-box{ margin-top:18px; padding:14px 0 0; background:none; border:none; border-top:1px solid #000; border-radius:0; }
#my-quiz-app .ai-actions{ align-items:center; }
#my-quiz-app .ai-lab{ font-size:17px; font-weight:700; margin-right:4px; }
#my-quiz-app .ai-actions .btn{ font-size:17px; padding:10px 18px; }
/* スマホ：見出しを1行に、ボタン3つは同じ幅で横に並べる（折り返して段がずれないように。2026-10-29 ユーザー「スマホで崩れている」） */
@media (max-width:600px){
  #my-quiz-app .ai-actions{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:8px; }
  #my-quiz-app .ai-actions .ai-lab{ grid-column:1 / -1; margin:0; }
  #my-quiz-app .ai-actions .btn{ padding:10px 4px; white-space:nowrap; text-align:center; }
  #my-quiz-app .ai-quick{ display:grid; grid-template-columns:1fr 1fr; }
  #my-quiz-app .chat-input-area .btn{ flex:none; }
}
#my-quiz-app #ai-response{ font-size:19px; color:#000; }
#my-quiz-app .chat-bubble{ font-size:19px; }
#my-quiz-app .chat-bubble.ai{ background:none; border:none; border-left:3px solid #000; border-radius:0; max-width:none; align-self:stretch; padding:2px 0 2px 14px; color:#000; }
#my-quiz-app .chat-bubble.user{ font-size:17px; padding:8px 14px; }
#my-quiz-app .chat-bubble .ai-h{ display:inline-block; font-size:19px; margin-top:6px; }
html[data-theme="dark"] #my-quiz-app .ai-box{ border-top-color:#fff; }
html[data-theme="dark"] #my-quiz-app .chat-bubble.ai{ border-left-color:#fff; color:var(--ink); }
html[data-theme="dark"] #my-quiz-app #ai-response{ color:var(--ink); }
/* 問題の誤りを報告（AI の解説の下・右寄せの枠ボタン。押すと書く欄が開く。2026-10-30 自動化の計画の 8） */
#my-quiz-app .report-box{ margin-top:4px; text-align:right; }
#my-quiz-app .report-box .btn.ghost{ font-size:17px; color:#000; border-color:#000; }
#my-quiz-app #reportForm{ text-align:left; }
#my-quiz-app #reportText{ width:100%; box-sizing:border-box; font-size:17px; color:#000; }
#my-quiz-app .report-actions{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-top:8px; }
#my-quiz-app .report-actions .btn{ font-size:17px; }
#my-quiz-app #reportNote, #my-quiz-app .report-done{ font-size:17px; color:#000; }
html[data-theme="dark"] #my-quiz-app .report-box .btn.ghost{ color:#fff; border-color:#fff; }
html[data-theme="dark"] #my-quiz-app #reportText, html[data-theme="dark"] #my-quiz-app #reportNote, html[data-theme="dark"] #my-quiz-app .report-done{ color:var(--ink); }
/* 似た問題に答えるボタン（AI の問題の下） */
#my-quiz-app .ai-quick{ display:flex; gap:10px; flex-wrap:wrap; }
#my-quiz-app .ai-quick .btn{ font-size:17px; color:#000; border-color:#000; }
html[data-theme="dark"] #my-quiz-app .ai-quick .btn{ color:#fff; border-color:#fff; }
/* ふりがなが漢字より長いとき（縦覧＝じゅうらん）、漢字の間が空いて「縦　覧」と離れないように（2026-10-29 ユーザーの画面で見つけた） */
#my-quiz-app ruby{ ruby-align:center; }
#my-quiz-app .btn.lg{ font-size:17px; }
/* 出題・結果のボタンと入力欄もルール6に（17px・枠ボタンは黒文字黒枠） */
#my-quiz-app .btn.bookmark, #my-quiz-app #btnSaveHighlight, #my-quiz-app #userHighlightInput{ font-size:17px; }
#my-quiz-app #btnPrev, #my-quiz-app #result .btn.ghost{ color:#000; border-color:#000; }
#my-quiz-app #result .btn{ font-size:17px; }
#my-quiz-app #result #resultSummary{ font-size:19px; color:#000; }
#my-quiz-app #wrongList .chip{ font-size:15px; color:#000; }
/* メニューのログイン欄は横いっぱい（旧 #email・#password の 150px を打ち消す） */
#my-quiz-app #email, #my-quiz-app #password{ width:100%; }
/* 並びも他の絞り込みと同じ大きさ・高さ（旧 #sort の 16px・細字を打ち消す） */
#my-quiz-app .qx-filters #sort{ font-size:17px; padding-top:13px; padding-bottom:13px; }
/* 件数は緑（以前どおり）。生成りの地で読めるよう少し濃く */
#my-quiz-app .qx-filters-foot #count{ color:#1B7A3A; }
#my-quiz-app label{ font-size:17px; color:#000; }
@media (max-width:720px){
  #my-quiz-app #qtitle .odai{ margin:0 0 12px; padding:10px 12px; font-size:19px; }
  #my-quiz-app #qtitle .qbody{ font-size:19px; }
}

/* --- 夜の表示（メニューの「暗くする」） --- */
html[data-theme="dark"] body{ background:#0E0E0E; background-image:none; }
html[data-theme="dark"] #my-quiz-app.qx{ --ink:#fff; --ink-sub:#fff; --ink-muted:#fff; --question:#fff; --qx-paper:#161616; --qx-q:#262019; --qx-qbar:#8A6F4F;
  background:none; background-image:none; box-shadow:none; color:#fff; }
html[data-theme="dark"] #my-quiz-app .qx-tabs{ background:#000; border-color:#fff; }
html[data-theme="dark"] #my-quiz-app .qx-tabs button.on{ background:#fff; color:#000; }
html[data-theme="dark"] #my-quiz-app .qx-railhead{ border-color:#fff; }
html[data-theme="dark"] #my-quiz-app .qx-top{ border-color:#fff; }
html[data-theme="dark"] #my-quiz-app .qx-pick, html[data-theme="dark"] #my-quiz-app .qx-menubtn,
html[data-theme="dark"] #my-quiz-app .qx-flt, html[data-theme="dark"] #my-quiz-app .qx-item, html[data-theme="dark"] #my-quiz-app .qx-pk,
html[data-theme="dark"] #my-quiz-app .qx-quit, html[data-theme="dark"] #my-quiz-app .qx-close, html[data-theme="dark"] #my-quiz-app .qx-clear,
html[data-theme="dark"] #my-quiz-app .qx-size{ background:#242424; color:#fff; border-color:#fff; }
html[data-theme="dark"] #my-quiz-app .qx-pick.single{ background:none; border-color:transparent; color:#fff; }
html[data-theme="dark"] #my-quiz-app .qx-pk.on{ background:#fff; color:#000; }
html[data-theme="dark"] #my-quiz-app .qx-sheet-in{ border-color:#fff; }
html[data-theme="dark"] #my-quiz-app .qx-sheet label, html[data-theme="dark"] #my-quiz-app .qx-sheet .chip,
html[data-theme="dark"] #my-quiz-app .qx-sheet .chip .muted, html[data-theme="dark"] #my-quiz-app .qx-acct #userInfo,
html[data-theme="dark"] #my-quiz-app label, html[data-theme="dark"] #my-quiz-app .quiznum, html[data-theme="dark"] #my-quiz-app #progressText{ color:#fff; }
html[data-theme="dark"] #my-quiz-app .qx-big{ color:#fff; }
html[data-theme="dark"] #my-quiz-app .qx-filters label, html[data-theme="dark"] #my-quiz-app .qx-filters .chip, html[data-theme="dark"] #my-quiz-app .qx-filters .chip .muted,
html[data-theme="dark"] #my-quiz-app .qx-filters select, html[data-theme="dark"] #my-quiz-app .qx-filters .input{ color:#fff; }
/* 夜のネオン（2026-10-28 ユーザー「ダークモード用のネオンで囲って」）：枠のボタン・大きなボタンはシアン、柱書きは黄 */
html[data-theme="dark"] #my-quiz-app .qx-pick:not(.single), html[data-theme="dark"] #my-quiz-app .qx-menubtn, html[data-theme="dark"] #my-quiz-app .qx-item,
html[data-theme="dark"] #my-quiz-app .qx-pk, html[data-theme="dark"] #my-quiz-app .qx-quit, html[data-theme="dark"] #my-quiz-app .qx-close,
html[data-theme="dark"] #my-quiz-app .qx-clear, html[data-theme="dark"] #my-quiz-app .qx-size, html[data-theme="dark"] #my-quiz-app .qx-big{
  background:#1E1E1E; color:#fff; border:2px solid #00E5FF; box-shadow:0 0 7px rgba(0,229,255,.45), inset 0 0 5px rgba(0,229,255,.18); }
html[data-theme="dark"] #my-quiz-app .qx-big:hover{ transform:none; box-shadow:0 0 12px rgba(0,229,255,.7), inset 0 0 6px rgba(0,229,255,.25); }
html[data-theme="dark"] #my-quiz-app .qx-pk.on{ background:#00E5FF; color:#000; }

html[data-theme="dark"] #my-quiz-app #qtitle .odai, html[data-theme="dark"] #my-quiz-app #qtitle .odai.odai{
  color:#fff; background:#1E1E1E; border:2px solid #FFE135; border-radius:8px;
  box-shadow:0 0 10px rgba(255,225,53,.55), inset 0 0 12px rgba(255,225,53,.18); text-shadow:0 0 6px rgba(255,255,255,.35); }
html[data-theme="dark"] #my-quiz-app #qtitle .qbody, html[data-theme="dark"] #my-quiz-app .explain{ color:#fff; }
html[data-theme="dark"] #my-quiz-app #btnPrev, html[data-theme="dark"] #my-quiz-app #result .btn.ghost, html[data-theme="dark"] #my-quiz-app #result #resultSummary,
html[data-theme="dark"] #my-quiz-app #wrongList .chip{ color:#fff; }
html[data-theme="dark"] #my-quiz-app #result .btn.ghost{ border-color:#fff; }
html[data-theme="dark"] #my-quiz-app #btnPrev:not(:disabled){ border:2px solid #00E5FF; box-shadow:0 0 7px rgba(0,229,255,.45), inset 0 0 5px rgba(0,229,255,.18); }
html[data-theme="dark"] #my-quiz-app #btnPrev:disabled{ border-color:#8E8E88; }
html[data-theme="dark"] #my-quiz-app .qx-filters-foot #count{ color:#39D353; }
html[data-theme="dark"] #my-quiz-app .explain{ background:#1E1E1E; }