@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構造は不変（見た目だけ差し替え）。
============================================================ */

/* ページ地（app.html は単体ページ＝和紙の生成り背景） */
html, body { background: #F7F2E6; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; }

#my-quiz-app {
  /* --- デザイントークン（和風） --- */
  --color-primary:#B23A2A; --color-primary-hover:#9C3021; --color-primary-deep:#7E2418; --color-primary-tint:#FBEAE6;
  --color-navy:#3D4D70; --color-navy-hover:#2E3C5A; --color-navy-border:#9AA7C2; --color-navy-tint:#EEF1F7;
  --bg-base:#F7F2E6; --bg-card:#FDFAF2; --bg-inset:#F3EDE0; --bg-tatami-a:#EEE7D2; --bg-tatami-b:#E9E1C8;
  --ink:#2B2118; --ink-sub:#5A4C36; --ink-muted:#8A7A5C;
  --line:#D8CBAB; --line-soft:#E2D8C2; --cream:#E8DFC8; --question:#8A4A12;
  --font-serif:'Noto Serif JP','Hiragino Mincho ProN','Yu Mincho','MS Mincho',serif;
  --radius-btn:3px; --radius-card:4px; --radius-pill:99px;
  --shadow-card:0 2px 8px rgba(90,70,40,.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);

  font-family:var(--font-serif); color:var(--ink); background:transparent;
  max-width:1060px; margin:0 auto; padding:20px 24px 40px; -webkit-font-smoothing:antialiased;
}
#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-radius:var(--radius-card);
  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:#fff; border:1px solid var(--line); color:var(--ink);
  border-radius:var(--radius-btn); padding:9px 12px; font-size:14px; font-family:var(--font-serif);
}
#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:#fff; 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 .card{
  background:var(--bg-card); border:1px solid var(--line); border-radius:var(--radius-card);
  padding:22px 26px; box-shadow:var(--shadow-card);
}
#my-quiz-app .card + .card{ margin-top:16px; }
/* フィルタ／問題カードは朱色の上罫 */
#my-quiz-app #home > .card:first-child, #my-quiz-app #play{ border-top:4px solid var(--color-primary); }

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

/* --- グリッド --- */
#my-quiz-app .grid{ display:grid; gap:16px; }
#my-quiz-app .grid.cols-1{ grid-template-columns: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: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: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:#fff; 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:#f4efe3; color:#b3a68a; 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:#fff; border:1px solid var(--color-navy-border);
  border-radius:var(--radius-pill); 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; }
#my-quiz-app #count{ color:var(--color-primary); font-weight:700; font-size:23px; letter-spacing:.03em; }

/* プレビュー一覧（#list の各カード） */
#my-quiz-app #list .card{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius-btn);
  padding:16px 18px; box-shadow:none;
}
#my-quiz-app #list .card:hover{ border-color:var(--color-primary); }
#my-quiz-app .quiznum{ color:var(--color-navy); 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:#1A1A1A; }
/* プレビューの最終回答日だけ 紺の太字 */
#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:var(--question); }
#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:#7A3C0E; 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; 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; } }
#my-quiz-app .choice{
  position:relative; text-align:left; padding:14px 16px; border-radius:var(--radius-btn);
  background:#fff; 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選択肢は固定順 [妥当である, 誤りである]。回答前は枠と文字色で識別 */
#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 var(--color-navy); color:var(--color-navy); }
#my-quiz-app .choices.tf .choice:last-child{ border:1.5px solid var(--color-primary); color:var(--color-primary); }
/* 正誤フィードバック：淡い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:#fff; transform:translateY(-3px); box-shadow:0 6px 14px rgba(90,70,40,.16); }
/* ON は白地＋破線の色枠＋色文字（以前の仕様）。要復習=緑系 / 除外=橙系 で役割を色分け。 */
#my-quiz-app .btn.bookmark.on{ background:#fff; border:1.5px dashed #1CA39A; color:#1CA39A; box-shadow:none; }
#my-quiz-app .btn.bookmark.master-on{ background:#fff; border:1.5px dashed #E0912A; color:#E0912A; 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:#fff; 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; }

/* ===== 専門用語（用語集タップ解説） ===== */
#my-quiz-app .gloss-term{ color:#7c3aed; font-weight:700; cursor:pointer; text-decoration:none; transition:background .15s; }
#my-quiz-app .gloss-term:hover{ background:#f1ebff; }
#my-quiz-app .gloss-modal-overlay{ position:fixed; inset:0; background:rgba(43,33,24,.55); display:flex; align-items:center; justify-content:center; z-index:9999; padding:20px; box-sizing:border-box; }
#my-quiz-app .gloss-modal{ background:var(--bg-card); border-radius:var(--radius-card); max-width:520px; width:100%; max-height:80vh; overflow:auto; box-shadow:0 20px 60px rgba(0,0,0,.3); border:1px solid var(--line); }
#my-quiz-app .gloss-modal-header{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:16px 20px; border-bottom:1px solid var(--line-soft); background:var(--bg-inset); border-radius:var(--radius-card) var(--radius-card) 0 0; position:sticky; top:0; }
#my-quiz-app .gloss-modal-title{ font-size:19px; font-weight:bold; color:var(--color-primary-deep); }
#my-quiz-app .gloss-modal-close{ background:none; border:none; font-size:27px; line-height:1; color:var(--ink-muted); cursor:pointer; padding:0 4px; }
#my-quiz-app .gloss-modal-close:hover{ color:var(--ink); }
#my-quiz-app .gloss-modal-body{ padding:18px 20px; }
#my-quiz-app .gloss-explanation{ font-size:18px; line-height:1.9; color:#1A1A1A; white-space:pre-wrap; }
#my-quiz-app .gloss-note{ margin-top:12px; font-size:13px; color:var(--ink-muted); }
#my-quiz-app .gloss-chat-input{ display:flex; gap:8px; align-items:center; margin-top:14px; }

/* ===== はみ出し対策・MathJax ===== */
#my-quiz-app .explain,
#my-quiz-app #explain,
#my-quiz-app .chat-bubble,
#my-quiz-app .chat-history,
#my-quiz-app .gloss-modal-body,
#my-quiz-app .gloss-explanation{ 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; }

/* ===== 購入パネル（未購入/期限切れ時） ===== */
.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 #D8CBAB; border-top:4px solid #B23A2A;
  max-height:90vh; overflow:auto; font-family:var(--font-serif);
}
.purchase-overlay .purchase-emoji{ font-size:41px; margin-bottom:6px; }
.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 #E2D8C2; 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:#8A7A5C; }
.purchase-overlay .buy-fine{ font-size:13px; color:#8A7A5C; 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; }

/* ============================================================
   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; }
/* 上部に表示されるログイン中メールアドレスは太字の黒 */
#my-quiz-app #userInfo{ color:#000; font-weight:700; }

/* 新規登録ボタンは赤（--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{
  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{
  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(90,70,40,.16); background:#fff;
}
/* ON時の色：要復習=緑（明るさを落としたteal）/ 除外=赤（点線枠は維持） */
#my-quiz-app #btnBookmark.on{ border-color:#157A72; color:#157A72; }
#my-quiz-app #btnMaster.master-on{ border-color:var(--color-primary); color:var(--color-primary); }