/* 色をまとめて定義しています。下の CSS から --accent のように呼び出せます。 */
:root { --ink:#18352f; --muted:#667771; --paper:#fffdf8; --cream:#f6f1e5; --accent:#e16b4f; --accent-dark:#c9533a; --line:#ded8c9; --green:#cce7db; }
* { box-sizing:border-box; }
body { margin:0; background:linear-gradient(135deg,#f6f1e5 0%,#eef5ee 100%); color:var(--ink); font-family:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Noto Sans JP",sans-serif; min-height:100vh; overflow-x:hidden; }
button,input,textarea,select { font:inherit; }
/* キーボード操作時に、今選んでいる場所がはっきり分かるようにします。 */
:focus-visible { outline:3px solid #176e9e; outline-offset:3px; }
button:disabled { cursor:not-allowed; opacity:.55; }
/* 読み上げソフトには伝えつつ、画面上では見せない文章です。 */
.sr-only { height:1px; margin:-1px; overflow:hidden; padding:0; position:absolute; clip:rect(0,0,0,0); white-space:nowrap; width:1px; }
/* index.html の class="site-header" に対応する、上部の見た目です。 */
.site-header { max-width:900px; margin:auto; padding:36px max(24px, env(safe-area-inset-right)) 20px max(24px, env(safe-area-inset-left)); display:flex; align-items:baseline; gap:16px; }
.brand { color:var(--ink); font-size:25px; font-weight:800; letter-spacing:.04em; text-decoration:none; }
.site-header p { color:var(--muted); font-size:14px; margin:0; }.privacy-link { background:transparent; border:0; color:var(--muted); cursor:pointer; font-size:13px; margin-left:auto; padding:8px; text-decoration:underline; text-underline-offset:3px; }
.app-shell { background:var(--paper); border:1px solid rgba(222,216,201,.75); border-radius:22px; box-shadow:0 18px 45px rgba(43,67,56,.10); max-width:900px; margin:0 auto 48px; overflow:hidden; }
/* index.html のタブと、JavaScript が付け外しする is-active の見た目です。 */
.tabs { display:flex; border-bottom:1px solid var(--line); background:#fcfaf4; }
.secondary-tabs { background:#f5f8f3; }.secondary-tabs .tab { font-size:13px; padding:12px 10px 10px; }
.tab { flex:1; background:transparent; border:0; border-bottom:3px solid transparent; color:var(--muted); cursor:pointer; min-height:48px; padding:18px 10px 15px; font-weight:700; }
.tab.is-active { border-bottom-color:var(--accent); color:var(--ink); }
.screen { display:none; padding:clamp(28px, 5vw, 42px); }.screen.is-active { display:block; }
.section-heading { margin-bottom:26px; }.eyebrow { color:var(--accent); font-size:12px; font-weight:800; letter-spacing:.1em; }.section-heading h1 { font-size:clamp(24px, 4vw, 28px); margin:7px 0; }.section-heading p { color:var(--muted); margin:0; }
/* 入力欄、問題、空の状態で共通して使うカードの見た目です。 */
.card { background:#fff; border:1px solid var(--line); border-radius:15px; padding:clamp(20px, 4vw, 28px); }
label { display:block; font-size:14px; font-weight:700; margin:0 0 8px; } input,textarea,select { border:1px solid #cfc8b9; border-radius:9px; color:var(--ink); margin:0 0 20px; min-height:46px; padding:12px; width:100%; } select { padding:12px; } textarea { line-height:1.7; min-height:120px; resize:vertical; }
.field-error { color:#a6402a; font-size:13px; font-weight:700; margin:-12px 0 18px; }.field-error:empty { display:none; } input[aria-invalid="true"],textarea[aria-invalid="true"] { border:2px solid #a6402a; }
/* 間違えた答えを、対応する入力欄の右側に表示するための見た目です。 */
.answer-feedback { color:#b43d2b; font-size:13px; font-weight:700; margin:5px 0 4px; padding-right:5px; text-align:right; }
.hint,.message { color:var(--muted); font-size:13px; margin:0 0 18px; }.message { color:#28745e; font-weight:700; margin-top:16px; }
.notice { background:#fff8df; border-left:4px solid #c8921b; border-radius:6px; color:#5e4a1c; font-size:13px; line-height:1.6; margin:0 0 18px; padding:10px 12px; }
.explanation { background:#fff8df; border-radius:9px; margin-top:14px; padding:14px; }.explanation strong { display:block; margin-bottom:5px; }
.button { border:0; border-radius:9px; cursor:pointer; font-weight:800; min-height:44px; padding:12px 18px; }.primary { background:var(--accent); color:white; }.primary:hover { background:var(--accent-dark); }.secondary { background:var(--green); color:var(--ink); }
.question-text { font-size:clamp(17px, 3.4vw, 19px); line-height:2.1; margin:0 0 24px; overflow-wrap:anywhere; white-space:pre-wrap; }.retry-guidance { display:grid; gap:10px; margin-top:20px; }.retry-guidance .result { margin-top:0; }.answer-reveal-button { align-self:start; background:transparent; border:1px solid var(--accent); color:var(--accent); padding:9px 14px; }.answer-reveal-button:hover { background:#e7f3ed; }.blank { background:#f2d6cb; border-radius:5px; color:transparent; display:inline-block; min-width:88px; padding:0 7px; vertical-align:middle; }.answer-grid { display:grid; gap:14px; }.answer-row { display:grid; gap:7px; }.answer-row input { margin:0; }.result { background:#edf8f1; border-radius:9px; margin-top:20px; padding:14px; }.result.wrong { background:#fff0ea; }.question-meta { color:var(--muted); font-size:13px; margin-top:0; }
.mistake-list { display:grid; gap:12px; }.mistake { align-items:center; background:#fff; border:1px solid var(--line); border-radius:13px; display:flex; gap:16px; justify-content:space-between; padding:19px 22px; }.mistake-word { font-size:18px; font-weight:800; }.count { background:#fff0ea; border-radius:999px; color:#a6402a; font-size:13px; font-weight:800; padding:7px 12px; }.zero { background:#edf8f1; color:#28745e; }.empty-state { color:var(--muted); text-align:center; }.empty-state .button { margin-top:8px; }
/* 問題一覧の1件ごとの表示と、削除ボタンの見た目です。 */
.question-list { display:grid; gap:12px; }.question-item { align-items:center; background:#fff; border:1px solid var(--line); border-radius:13px; display:flex; gap:18px; justify-content:space-between; padding:19px 22px; }.question-item h2 { font-size:17px; margin:0 0 5px; }.question-item p { color:var(--muted); font-size:14px; margin:0; }.question-score { color:#28745e !important; font-weight:700; margin-top:7px !important; }.delete-button { background:#fff0ea; color:#a6402a; }
.tag-list { display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }.tag { background:#eaf3ed; border-radius:999px; color:#28745e; font-size:12px; font-weight:700; padding:4px 9px; }.tag-filter { margin:0 0 18px; }
/* 編集の取り消し、問題編集、学習記録の見た目です。 */
.is-hidden { display:none; }.list-actions { display:flex; gap:8px; }.edit-button { background:var(--green); color:var(--ink); }.stats-grid { display:grid; gap:12px; grid-template-columns:repeat(3,1fr); }.stat-card { background:#fff; border:1px solid var(--line); border-radius:13px; padding:22px; text-align:center; }.stat-card strong { display:block; font-size:30px; margin-top:6px; }.stat-card span { color:var(--muted); font-size:13px; }.account-tools,.data-tools { margin-top:20px; }.account-tools h2,.data-tools h2 { font-size:18px; }.data-tools .button { margin-right:8px; }.account-user { background:#edf8f1; border-radius:9px; font-size:14px; font-weight:700; margin:0 0 16px; padding:12px; overflow-wrap:anywhere; }.sync-error { color:#a6402a; font-weight:700; }
/* 意見箱の迷惑投稿対策用入力欄です。画面には見せず、自動送信だけを判定します。 */
.honeypot { height:1px; left:-10000px; overflow:hidden; padding:0; position:absolute; top:auto; width:1px; }
/* プライバシーポリシー本文を読みやすく表示するための見た目です。 */
.policy-card { line-height:1.8; }.policy-card h2 { font-size:18px; margin:28px 0 8px; }.policy-card h2:first-child { margin-top:0; }.policy-card p,.policy-card li { color:#42564f; }.policy-card ul { margin:0; padding-left:1.4em; }.policy-card .button { margin-top:24px; }
/* 画面幅が狭いときに、スマホでも読みやすくする設定です。 */
/* iPadなど中くらいの画面では、余白を少し抑えて一覧を見やすくします。 */
@media (min-width:621px) and (max-width:900px) { .site-header { padding-inline:32px; }.app-shell { margin-inline:20px; }.screen { padding:34px; } }
/* iPhoneなど幅の狭い画面では、タブを横にスクロールできるようにします。 */
@media (max-width:620px) {
  .site-header { align-items:flex-start; flex-direction:column; gap:4px; padding-top:24px; }.privacy-link { margin-left:0; padding-left:0; }
  .app-shell { border-radius:0; border-inline:0; box-shadow:none; margin-bottom:0; }
  .tabs { overflow-x:auto; scrollbar-width:thin; }
  .tab { flex:0 0 auto; font-size:13px; padding-inline:14px; white-space:nowrap; }
  .primary-tabs .tab { min-width:120px; }
  .secondary-tabs .tab { min-width:112px; }
  .section-heading { margin-bottom:20px; }
  .stats-grid { grid-template-columns:1fr; }
  .question-item,.mistake { align-items:flex-start; flex-direction:column; }
  .question-item,.mistake { gap:12px; padding:17px; }
  .list-actions { flex-wrap:wrap; width:100%; }
  .list-actions .button { flex:1; }
  .data-tools .button { margin:0 0 10px; width:100%; }
  .card > .button { margin-bottom:10px; width:100%; }
  .answer-feedback { text-align:left; }
}
/* 動きを苦手とする人の設定を尊重します。 */
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto !important; transition-duration:.01ms !important; animation-duration:.01ms !important; animation-iteration-count:1 !important; } }

/* ホームでは「今日の復習」を最初に目に入る大きさで表示します。 */
.home-review-card { background:linear-gradient(135deg, #fff7ef, #fffdf8); border-color:#e7c2b6; }
.home-review-card h2,.home-action-card h2,.review-complete h2 { font-size:clamp(21px, 4vw, 26px); margin:8px 0; }
.home-review-summary { color:var(--muted); line-height:1.7; margin:0; }
.review-count { align-items:baseline; display:flex; gap:6px; margin:18px 0; }
.review-count strong { color:var(--accent); font-size:clamp(42px, 8vw, 56px); line-height:1; }
.review-count span { font-size:16px; font-weight:800; }
.home-review-button { font-size:17px; width:100%; }
.home-action-grid { display:grid; gap:16px; grid-template-columns:repeat(2, minmax(0, 1fr)); margin-top:16px; }
.home-action-card { display:flex; flex-direction:column; }
.home-action-card h2 { font-size:20px; }
.home-action-card p { color:var(--muted); flex:1; line-height:1.7; }
.review-complete { text-align:center; }
.review-complete .button { margin:8px 4px 0; }
#result .button { margin-top:12px; }
@media (max-width:620px) {
  .home-action-grid { grid-template-columns:1fr; }
  .review-complete .button { margin-inline:0; width:100%; }
}