@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; }
#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; }
#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; 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: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; }

/* ===== 専門用語（用語集タップ解説） ===== */
#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:var(--ink); 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 #000; 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 #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; }

/* ============================================================
   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 #progressText,
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); }
/* 「黒枠・黒文字」で固定していた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 #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);
}
/* 用語リンク（紫）を暗地向けに */
html[data-theme="dark"] #my-quiz-app .gloss-term{ color:#C4A9F7; }
html[data-theme="dark"] #my-quiz-app .gloss-term:hover{ background:#332B47; }
/* 用語解説モーダル：タイトルの深紅は暗地で沈むため用語リンクと同じ藤紫へ */
html[data-theme="dark"] #my-quiz-app .gloss-modal-title{ color:#C4A9F7; }
/* 夜間：枠線ボタンの枠をネオン（シアン）に。ほのかに発光（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; }