/* ケアマネ試験アプリ（Web版）の見た目。
   デスクトップ版（JavaFX）の画面に合わせてある。色・角丸・判定の塗り分けは
   src/main/resources/css/style.css（JavaFX側）と同じ値を使う。両方を並べて
   使うので、見た目が違うと同じ操作でも迷う。

   JavaFX 側には配色の切り替えが無いので、こちらも OS のダークモードには
   追従しない。追従させると濃紺のヘッダーだけが浮いて、かえって読みにくい。

   スマートフォンからも開くため、幅の狭い画面では1カラムに落とす。 */

:root {
    /* JavaFX style.css と同じ値 */
    --bg: #f5f5f5;            /* .root の背景 */
    --panel: #ffffff;         /* .content-area */
    --line: #ddd;             /* 枠線 */
    --line-strong: #bdc3c7;   /* 入力欄・ステータスバーの枠 */
    --text: #333;             /* 本文 */
    --heading: #2c3e50;       /* 見出し・ヘッダーの濃紺 */
    --muted: #7f8c8d;         /* .info-label */
    --strip: #ecf0f1;         /* 見出し帯・ステータスバー */
    --field: #f9f9f9;         /* 問題文・解説の下地 */

    --accent: #3498db;        /* .primary-button */
    --accent-dark: #2980b9;
    --secondary: #95a5a6;     /* .secondary-button */
    --secondary-dark: #7f8c8d;
    --ng: #e74c3c;            /* .danger-button / .select-count */
    --ng-dark: #c0392b;

    /* 判定の塗り分け（正解=緑 / 不正解=赤 / 取りこぼし=黄） */
    --ok-bg: #d4edda;
    --ok-text: #155724;
    --ok-border: #28a745;
    --ok-line: #c3e6cb;
    --wrong-bg: #f8d7da;
    --wrong-text: #721c24;
    --wrong-border: #dc3545;
    --wrong-line: #f5c6cb;
    --miss-bg: #fff3cd;
    --miss-text: #856404;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    /* JavaFX は Meiryo UI 指定。Windows では同じ字面になり、
       Mac/iOS では Hiragino に落ちる */
    font-family: "Meiryo UI", "メイリオ", Meiryo, "Hiragino Sans",
                 "Noto Sans JP", -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 15px;
    background: var(--bg);
    color: var(--text);
    line-height: 1.7;
    /* ステータスバー（footer）を最下部に落とす */
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* ==================================================================
   メニュー（JavaFX の .top-bar / .header に代わるもの）
   ------------------------------------------------------------------
   濃紺の帯は置かない。帯はアプリ名とナビで上下2段になり、狭い画面では
   その分だけ問題文が下がっていた。画面に出しておくのは右上のボタン
   ひとつだけにして、各画面への切り替えは押したときだけ前面に出す。
   ボタンは position:fixed。場所を取らず、送っても同じ位置に残る。
   ================================================================== */
.menu-toggle {
    position: fixed;
    top: 0.5rem;
    right: 0.6rem;
    z-index: 20;
    /* 下の内容が白でも濃紺でも読めるよう、帯と同じ色の的にする */
    background: var(--heading);
    border-color: var(--heading);
    color: #fff;
    font-size: 1.15rem;
    line-height: 1;
    padding: 0.4rem 0.7rem;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}

.menu-toggle:hover { background: #3d566e; }

/* 開いた中身。ボタンの真下に出す */
.menu {
    position: fixed;
    top: 3rem;
    right: 0.6rem;
    z-index: 19;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 11rem;
    max-width: calc(100vw - 1.2rem);
    padding: 0.4rem;
    background: var(--heading);
    border-radius: 5px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
}

/* display:flex を付けたので、閉じている間は自分で隠す
   （dialog.sheet と同じ理由。hidden の既定が上書きされる） */
.menu[hidden] { display: none; }

/* アプリ名はメニューの見出しを兼ねる。押せばトップへ戻る */
.menu .brand {
    font-weight: 700;
    font-size: 1.05rem;
    color: #fff;
    text-decoration: none;
    padding: 0.3rem 0.8rem 0.5rem;
    margin-bottom: 0.15rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

/* JavaFX のメニュー項目に合わせ、ふだんは薄い白、選択中は青地の白 */
.menu a {
    color: #ecf0f1;
    text-decoration: none;
    padding: 0.45rem 0.8rem;
    border-radius: 5px;
    white-space: nowrap;
}

.menu a:hover {
    background: rgba(52, 152, 219, 0.25);
    color: #fff;
}

.menu a.on {
    background: var(--accent);
    color: #fff;
    font-weight: 700;
}

/* ログアウトだけ form なので、リンクと同じ幅・同じ寄せに揃える */
.menu .logout-form { display: block; }
.menu .logout-form .linklike { display: block; width: 100%; text-align: left; }

main {
    /* JavaFX はウィンドウ全面を使う。Web でも横を広く取り、
       学習画面の左右2カラムが成立する幅を確保する */
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding: 1.2rem 1.2rem 2.5rem;
    flex: 1 0 auto;
}

/* ステータスバー（JavaFX の .status-bar）。画面の一番下に灰色の帯 */
footer {
    flex: 0 0 auto;
    background: var(--strip);
    border-top: 1px solid var(--line-strong);
    color: var(--heading);
    font-size: 0.85rem;
    padding: 0.6rem 1.2rem;
}

/* 左に状態、右に利用者名（JavaFX の statusLabel / progressLabel と同じ並び） */
.statusbar {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
}

h1 {
    font-size: 1.35rem;
    color: var(--heading);
    margin: 0 0 1rem;
    /* 右上のメニューボタンは内容の上に浮いている。各画面の見出しは
       いちばん上の行なので、そこだけボタンのぶん右を空ける */
    padding-right: 3rem;
}

h2 {
    font-size: 1.05rem;
    color: var(--heading);
    margin: 1.6rem 0 0.7rem;
}

/* ==================================================================
   枠（JavaFX の .section-box / .content-area）
   ================================================================== */
.panel {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 5px;
    padding: 1rem 1.1rem;
    margin-bottom: 0.9rem;
}

/* 枠の中の見出し。JavaFX の .section-title に合わせて濃紺の太字 */
.panel > h2:first-child,
.panel-title {
    margin-top: 0;
    font-size: 1rem;
    font-weight: 700;
    color: var(--heading);
}

.muted { color: var(--muted); }
.small { font-size: 0.88rem; }

/* 「3つ選べ」など、取り違えると失点する情報は赤の太字（.select-count） */
.select-count { color: var(--ng); font-weight: 700; }

/* --- お知らせ --- */
.flash {
    padding: 0.7rem 1rem;
    border-radius: 5px;
    margin-bottom: 1rem;
    border: 1px solid transparent;
}
.flash.ok { background: var(--ok-bg); color: var(--ok-text); border-color: var(--ok-line); }
.flash.ng { background: var(--wrong-bg); color: var(--wrong-text); border-color: var(--wrong-line); }

/* ==================================================================
   操作（JavaFX の各ボタン）
   ================================================================== */
button, .btn {
    font: inherit;
    font-weight: 700;
    padding: 0.45rem 1rem;
    border-radius: 5px;
    border: 1px solid var(--line-strong);
    background: #ececec;
    color: var(--text);
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
    line-height: 1.5;
}

button:hover, .btn:hover { background: #dfe3e4; }

button.primary, .btn.primary {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}
button.primary:hover, .btn.primary:hover {
    background: var(--accent-dark);
    border-color: var(--accent-dark);
}

button.secondary, .btn.secondary {
    background: var(--secondary);
    border-color: var(--secondary);
    color: #fff;
}
button.secondary:hover, .btn.secondary:hover {
    background: var(--secondary-dark);
    border-color: var(--secondary-dark);
}

button.danger, .btn.danger {
    background: var(--ng);
    border-color: var(--ng);
    color: #fff;
}
button.danger:hover, .btn.danger:hover {
    background: var(--ng-dark);
    border-color: var(--ng-dark);
}

button:disabled, .btn:disabled {
    background: var(--line-strong);
    border-color: var(--line-strong);
    color: #fff;
    opacity: 0.6;
    cursor: default;
}

select,
input[type=text],
input[type=password],
input[type=number],
input[type=date],
textarea {
    font: inherit;
    padding: 0.4rem 0.6rem;
    border: 1px solid var(--line-strong);
    border-radius: 5px;
    background: #fff;
    color: var(--text);
    max-width: 100%;
}

select:focus,
input:focus,
textarea:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.25);
}

textarea { width: 100%; min-height: 7rem; resize: vertical; }

/* 複数選べる一覧（タグ絞り込み）。既定だと行が途中で切れて読めない */
select[multiple] { padding: 0.25rem; line-height: 1.5; }
select[multiple] option { padding: 0.1rem 0.3rem; }

.controls {
    display: flex;
    gap: 0.8rem;
    flex-wrap: wrap;
    align-items: flex-end;
}

.field { display: flex; flex-direction: column; gap: 0.2rem; }
/* .field-label は、入力欄が1つに定まらないとき（色の選択など）の見出し */
.field label,
.field .field-label { font-size: 0.82rem; font-weight: 700; color: var(--heading); }

/* ==================================================================
   学習画面の2カラム（JavaFX の SplitPane）
   左に問題一覧、右に問題本体。狭い画面では縦に積む。
   ================================================================== */
.study-layout {
    display: grid;
    grid-template-columns: 250px minmax(0, 1fr);
    gap: 0.9rem;
    align-items: start;
}

/* 左ペイン。JavaFX の .question-list-vertical */
.qlist {
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: 5px;
    overflow: hidden;
    position: sticky;
    /* 上に帯が無くなったので、画面のすぐ上まで寄せてよい */
    top: 0.8rem;
    max-height: calc(100vh - 2rem);
    display: flex;
    flex-direction: column;
}

/* 見出し帯（JavaFX では #ecf0f1 の細い帯）。ここが開閉の取っ手も兼ねる。
   display は list-item のままにしておく（block にすると三角が消える） */
.qlist-head {
    background: var(--strip);
    border-bottom: 1px solid var(--line);
    padding: 0.4rem 0.7rem;
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--heading);
    cursor: pointer;
    /* 帯の中に三角を収める。外に置くと帯からはみ出す */
    list-style-position: inside;
}

.qlist-head::marker { color: var(--muted); }

/* 畳んだときは帯だけが残る。下の線は宙に浮くので消す */
.qlist:not([open]) > .qlist-head { border-bottom: none; }

/* 畳んでいる間は段組みをやめ、帯を問題本体の上に真ん中で置く。
   左右どちらかの端に貼り付いたままだと、問題文の脇で目に入り続けて邪魔になる。
   開いたときだけ元の2段（左に一覧・右に本体）へ戻す。
   :has が効かない環境では 250px の段が残るだけで、開き閉じそのものは効く */
.study-layout:has(> .qlist:not([open])) {
    grid-template-columns: minmax(0, 1fr);
}

.study-layout:has(> .qlist:not([open])) > .qlist {
    /* 帯の幅は中の字のぶんだけ。残りは空けて真ん中に置く */
    width: max-content;
    max-width: 100%;
    margin: 0 auto;
    /* 段が1つになるので画面に貼り付ける必要は無い。
       付いて回ると、送った先で問題文の上に乗ってしまう */
    position: static;
    max-height: none;
}

.qlist-note {
    background: #f8f9fa;
    border-bottom: 1px solid var(--line);
    padding: 0.35rem 0.7rem;
    font-size: 0.78rem;
    color: var(--muted);
}

.qlist-body {
    padding: 0.5rem;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    /* 一覧の中で回したホイールを、親のページへ渡さない。
       既定では一覧が端まで来た時点で続きがページへ流れ、右の問題文ごと
       動いてしまう（左を読んでいるだけなのに画面が送られる）。
       contain にすると連鎖だけ止まり、一覧自身の上下の動きはそのまま効く */
    overscroll-behavior: contain;
    /* flex の高さが届かない環境でも、画面から溢れる前に自分で止まる。
       引いている 6.5rem は上の帯（見出し＋注記）と .qlist の余白ぶん。
       狭い画面では後段のメディアクエリが 12rem / 10.5rem で上書きする */
    max-height: calc(100vh - 6.5rem);
}

/* 新しめの Chrome は details の中身を ::details-content という箱で包む。
   包まれると .qlist-body は .qlist の直接の子（＝flex の項目）ではなくなり、
   縦の高さが渡らず一覧が伸び切って、広い画面でスクロールできなくなる。
   包みも縦の flex にして、max-height を中まで通す。
   この擬似要素を知らない環境ではこの塊ごと読み飛ばされ、
   従来どおり .qlist-body が直接の項目として並ぶ */
.qlist::details-content {
    display: flex;
    flex-direction: column;
    /* flex の項目としての最小高さ（auto）を外さないと縮まない */
    min-height: 0;
}

.qlist[open]::details-content { overflow: hidden; }

/* 一覧の中の年度見出し。flex の行を1つ使い切って区切りにする */
.qlist-year {
    flex: 0 0 100%;
    margin: 0.5rem 0 0.15rem;
    padding-bottom: 0.15rem;
    border-bottom: 1px solid var(--line);
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--muted);
}

.qlist-year:first-child { margin-top: 0; }

.study-main { min-width: 0; }

/* 横のフリックの案内。マウスの画面では要らない（払う指が無い）ので、
   荒い指し手＝指で触る画面のときだけ出す */
.swipe-hint { display: none; }

@media (pointer: coarse) {
    .swipe-hint { display: inline; margin-left: 0.5rem; }
}

/* ==================================================================
   問題（JavaFX の .question-text / .option-container）
   ================================================================== */

/* 問題の見出し。JavaFX の .question-title（18px 太字の濃紺） */
.question-head {
    display: flex;
    align-items: baseline;
    gap: 0.7rem;
    flex-wrap: wrap;
    margin-bottom: 0.6rem;
}

.question-head .title {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--heading);
}

/* 問題文は下地を敷いた読み物。JavaFX の TextArea に合わせる */
.question-text {
    font-size: 1.05rem;
    color: var(--text);
    background: var(--field);
    border-radius: 5px;
    padding: 0.8rem 0.9rem;
    margin-bottom: 1rem;
}

.options { list-style: none; padding: 0; margin: 0; }

/* 未採点の選択肢 */
.options li {
    background: var(--field);
    border: 1px solid var(--line);
    border-radius: 5px;
    margin-bottom: 0.5rem;
    padding: 0.6rem 0.8rem;
}

.options li:hover { background: #f0f0f0; }

/* 採点後。JavaFX は枠を 3px にして塗りを変える
   ・correct … 正解を選べた
   ・wrong   … 誤って選んだ
   ・missed  … 正解だが選べなかった（黄色地に緑枠） */
.options li.correct,
.options li.wrong,
.options li.missed {
    border-width: 3px;
    padding: calc(0.6rem - 2px) calc(0.8rem - 2px);
}

.options li.correct { border-color: var(--ok-border); background: var(--ok-bg); }
.options li.correct:hover { background: var(--ok-bg); }

.options li.wrong { border-color: var(--wrong-border); background: var(--wrong-bg); }
.options li.wrong:hover { background: var(--wrong-bg); }

.options li.missed { border-color: var(--ok-border); background: var(--miss-bg); }
.options li.missed:hover { background: var(--miss-bg); }

/* 判定した選択肢の本文は太字にして、流し読みでも目に留まるようにする */
.options li.correct > div { color: var(--ok-text); font-weight: 700; }
.options li.wrong > div { color: var(--wrong-text); font-weight: 700; }
.options li.missed > div { color: var(--miss-text); font-weight: 700; }

/* ただし解説は長文なので、太字を引き継がせない（読み通せなくなる） */
.options li.correct > .explanation,
.options li.wrong > .explanation,
.options li.missed > .explanation { color: var(--text); font-weight: 400; }

.options label { display: flex; gap: 0.6rem; align-items: flex-start; cursor: pointer; }
.options .num { font-weight: 700; min-width: 1.4rem; }

/* 解説。JavaFX の .explanation-area（白地の枠）。
   以前は薄い灰色にしていたが、いちばん読む所なので本文と同じ濃さにする */
.explanation {
    margin-top: 0.6rem;
    padding: 0.6rem 0.7rem;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 5px;
    font-size: 0.95rem;
    font-weight: 400;
    color: var(--text);
    line-height: 1.75;
}

/* 正解/不正解の表示。JavaFX の .result-label */
.verdict {
    display: inline-block;
    font-size: 1.1rem;
    font-weight: 700;
    padding: 0.25rem 1rem;
    border-radius: 5px;
    border: 1px solid transparent;
    margin-bottom: 0.7rem;
}
.verdict.ok { background: var(--ok-bg); color: var(--ok-text); border-color: var(--ok-line); }
.verdict.ng { background: var(--wrong-bg); color: var(--wrong-text); border-color: var(--wrong-line); }

/* 採点結果のすぐ下に出す「何秒かかったか」。ふだんは灰色の1行で、
   しきい値を超えた時だけ黄で出す。正解の緑の隣で赤を使うと
   「間違えている」と読めてしまうので、警告ではなく注意の色にする */
.time-note {
    font-size: 0.82rem;
    color: var(--muted);
    margin: -0.3rem 0 0.7rem;
}
.time-note.ng {
    color: var(--miss-text);
    background: var(--miss-bg);
    border-left: 3px solid #d68910;
    padding: 0.4rem 0.6rem;
    border-radius: 0 4px 4px 0;
}

/* --- 採点後の読み解き（種類・なぜ・根拠・注意点） ---
   問題文と選択肢一覧の間に、畳まずに置く。いちばん読む所なので下地は白のままにし、
   左に太い線を1本入れて「問題そのものではなく、その説明」だと分かるようにする。

   項目名は左、中身は右。広い画面では見出しの幅を揃えて縦に並べ、
   狭い画面（〜700px）では上下に落とす（見出しの分だけ本文が細くなるのを避ける）。 */
.question-brief {
    border: 1px solid var(--line);
    border-left: 4px solid var(--accent);
    border-radius: 5px;
    background: #fff;
    padding: 0.9rem 1rem;
    margin-bottom: 1rem;
}

.brief-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--heading);
    margin: 0 0 0.7rem;
}

.brief-row {
    display: flex;
    gap: 0.9rem;
    padding: 0.6rem 0;
    border-top: 1px solid var(--line);
}

.brief-row:first-of-type { border-top: none; padding-top: 0; }

/* 項目名。4つが同じ幅で縦に揃っていれば、読みたい所だけを拾って読める */
.brief-label {
    flex: 0 0 9.5rem;
    font-weight: 700;
    color: var(--heading);
    font-size: 0.92rem;
}

.brief-body { flex: 1 1 auto; min-width: 0; }

.brief-kinds { display: flex; flex-wrap: wrap; gap: 0.35rem; }

.brief-lead { font-weight: 700; color: var(--heading); }

/* 正解の選択肢1つ分。番号と本文を1行目に、理由をその下に落とす */
.brief-reason { margin-top: 0.6rem; }
.brief-reason:first-of-type { margin-top: 0.4rem; }

.brief-reason-head {
    display: flex;
    gap: 0.4rem;
    align-items: baseline;
    font-weight: 700;
    color: var(--ok-text);
}

.brief-reason-head .num { min-width: 1.4rem; }

.brief-reason-body {
    margin-top: 0.2rem;
    padding-left: 1.8rem;
    line-height: 1.75;
}

/* 根拠。条文・ページを1件ずつ拾って読む所なので、点を付けて短く並べる */
.brief-grounds {
    margin: 0;
    padding-left: 1.2rem;
}

.brief-grounds li { margin: 0.1rem 0; }

.brief-caution {
    display: flex;
    gap: 0.5rem;
    align-items: baseline;
    margin-top: 0.45rem;
}

.brief-caution:first-of-type { margin-top: 0; }

/* 注意の種類（選べなかった正解 / 誤って選んだ / 取り違えやすい …）。
   .badge と同じ形だが、こちらは黄色にして注意だと分かるようにする */
.brief-tag {
    flex: 0 0 auto;
    display: inline-block;
    padding: 0.05rem 0.5rem;
    border-radius: 5px;
    font-size: 0.78rem;
    font-weight: 700;
    background: var(--miss-bg);
    color: var(--miss-text);
    border: 1px solid #f0d78c;
}

/* --- メモ本文 --- */
/* デスクトップ版由来の書式付きメモ。フォント指定や色は変換時に落としているので、
   見出し・箇条書き・表の間隔だけここで整える。 */
.memo-body { line-height: 1.75; overflow-wrap: anywhere; }
.memo-body > :first-child { margin-top: 0; }
.memo-body > :last-child { margin-bottom: 0; }
.memo-body p { margin: 0 0 0.7rem; }

.memo-body h1,
.memo-body h2,
.memo-body h3,
.memo-body h4,
.memo-body h5,
.memo-body h6 {
    font-size: 1.05rem;
    color: var(--heading);
    margin: 1.2rem 0 0.5rem;
}

.memo-body ul, .memo-body ol { margin: 0 0 0.7rem; padding-left: 1.4rem; }
.memo-body li { margin-bottom: 0.25rem; }

.memo-body blockquote {
    margin: 0 0 0.7rem;
    padding: 0.2rem 0 0.2rem 0.8rem;
    border-left: 3px solid var(--line);
    color: var(--muted);
}

.memo-body pre {
    margin: 0 0 0.7rem;
    padding: 0.6rem 0.8rem;
    background: var(--field);
    border: 1px solid var(--line);
    border-radius: 5px;
    overflow-x: auto;
}
.memo-body code { font-size: 0.9em; }
.memo-body table { margin-bottom: 0.7rem; }
.memo-body hr { border: 0; border-top: 1px solid var(--line); margin: 1rem 0; }

/* 一覧では長いメモで画面が流れないよう、枠の中で送る */
.memo-body.boxed { max-height: 22rem; overflow-y: auto; }

/* ==================================================================
   一覧（JavaFX の .list-view / .list-cell）
   ================================================================== */
table { width: 100%; border-collapse: collapse; }

th, td {
    text-align: left;
    padding: 0.5rem 0.6rem;
    border-bottom: 1px solid #eee;
    vertical-align: top;
}

th {
    background: var(--strip);
    color: var(--heading);
    font-weight: 700;
    font-size: 0.85rem;
    border-bottom: 1px solid var(--line);
}

tbody tr:hover { background: var(--strip); }

.table-wrap { overflow-x: auto; }

/* --- 印 --- */
.badge {
    display: inline-block;
    padding: 0.05rem 0.5rem;
    border-radius: 5px;
    font-size: 0.78rem;
    font-weight: 700;
    border: 1px solid var(--line-strong);
    color: var(--heading);
    background: #fff;
}
.badge.ok { background: var(--ok-bg); color: var(--ok-text); border-color: var(--ok-line); }
.badge.ng { background: var(--wrong-bg); color: var(--wrong-text); border-color: var(--wrong-line); }
.badge.todo { color: var(--muted); }

/* --- 進捗の棒 --- */
.bar {
    height: 10px;
    background: #e4e7e9;
    border: 1px solid var(--line);
    border-radius: 5px;
    overflow: hidden;
    min-width: 120px;
}
.bar > span { display: block; height: 100%; background: var(--accent); }

/* --- ログイン画面 ---
   ログイン前は各画面へのナビが無いので、中央に寄せた単独の見た目にする */
.login-body { display: block; }

.login-main {
    max-width: 24rem;
    margin: 0 auto;
    padding: 3rem 1.2rem;
}

.login-title {
    text-align: center;
    margin-bottom: 1.5rem;
}

/* チェックボックスと説明を横に並べる（ログイン保持など） */
.check {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
}

.check input[type=checkbox] { width: 1.1rem; height: 1.1rem; }

/* ナビの中のログアウト。form だが見た目はリンクに合わせる */
.logout-form { display: inline; margin: 0; }

.linklike {
    background: none;
    border: none;
    padding: 0.35rem 0.8rem;
    color: #ecf0f1;
    font: inherit;
    font-weight: 400;
    cursor: pointer;
    min-height: 0;
    border-radius: 5px;
}

.linklike:hover { background: rgba(52, 152, 219, 0.25); color: #fff; }

/* 折りたためる枠（学習画面の絞り込み） */
.collapsible > summary {
    cursor: pointer;
    font-weight: 700;
    color: var(--heading);
    /* 既定の三角は残す。畳めることが分かる目印になる */
    list-style-position: inside;
}

.collapsible > summary::marker { color: var(--muted); }

.collapsible[open] > summary {
    margin-bottom: 0.9rem;
    padding-bottom: 0.6rem;
    border-bottom: 1px solid var(--line);
}

/* ==================================================================
   前面に出す枠（iOS版のシート）
   ------------------------------------------------------------------
   メモは並べて置いておくと、問題を解いている最中に自分の書いた答えが
   目に入る。押したときだけ前面に出し、閉じるまで背後を触らせない。
   見出し・本文・操作の3段に分け、長いメモでは本文だけを送る。
   ================================================================== */
/* 画面いっぱいまで広げる。メモは書式付きで長いものがあり、38rem では
   何度も送らないと読めなかった。溢れる分は本文の段（.sheet-body）だけで
   送るので、見出しと操作はいつも同じ所に見えている。
   ただし際限なく広げると一行が長くなって目が戻れないので、上限は置く。 */
dialog.sheet {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    margin: auto;
    width: min(80rem, 100% - 2rem);
    height: calc(100vh - 2rem);
    /* iOS/Android は上下の道具箱の分だけ 100vh が画面より高い。
       対応している端末では実際に見えている高さ（dvh）を使う */
    height: calc(100dvh - 2rem);
    padding: 0;
    border: 1px solid var(--line-strong);
    border-radius: 5px;
    background: var(--panel);
    color: var(--text);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.3);
}

/* display: flex を付けたので、閉じている間は自分で隠す */
dialog.sheet:not([open]) { display: none; }

dialog.sheet::backdrop { background: rgba(0, 0, 0, 0.45); }

.sheet-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex: 0 0 auto;
    padding: 0.6rem 0.9rem;
    background: var(--strip);
    border-bottom: 1px solid var(--line);
}

.sheet-title { font-weight: 700; color: var(--heading); }

/* 溢れる分を受け持つ段。flex の既定では中身の高さより縮まないので、
   min-height を外して残りの高さに収まるようにする */
.sheet-body {
    flex: 1 1 auto;
    min-height: 0;
    padding: 0.9rem;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

/* 書いている間は、編集欄を枠の余った高さいっぱいまで伸ばす。
   高さを決め打ちにすると、枠が画面いっぱいなのに編集欄だけ 12rem で、
   下に何も無い余白が残っていた。ラベル・色の選択は元の高さのまま置き、
   残り全部を本文の編集欄に渡す。
   （縦に伸ばす連鎖は途中で min-height: auto に止められるので、
     間の入れ物すべてで min-height を外しておく） */
.sheet.editing .sheet-body { display: flex; flex-direction: column; }

.sheet.editing .memo-edit,
.sheet.editing #memoForm {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

/* 枠が画面の高さいっぱいになったぶん、編集欄も広く取る。
   狭くなりすぎたときは下限で止め、はみ出す分は .sheet-body 側で送る */
.sheet-body textarea {
    flex: 1 1 auto;
    min-height: 12rem;
}

/* 断り書き・ラベル・色は縮めない。縮むと文字が切れる。
   伸び縮みするのは編集欄だけにして、入りきらない分は .sheet-body が送る */
.sheet.editing .memo-edit > :not(#memoForm),
.sheet.editing #memoForm > :not(textarea) { flex: 0 0 auto; }

/* --- メモの「見る」と「書く」の入れ替え ---
   両方を縦に並べると、編集欄・ラベル・色の選択が場所を取り、狭い画面では
   本文が数行しか見えない。開いた直後は本文だけに場所を使い、「編集」を
   押したときに入れ替える。出し分けはここだけが持ち、JavaScript は
   枠に editing を付け外しするだけにする。
   メモがまだ無いときはテンプレートが最初から editing を付けて出す。 */
.sheet .memo-edit,
.sheet .memo-when-editing { display: none; }

.sheet.editing .memo-view,
.sheet.editing .memo-when-viewing { display: none; }

/* .memo-edit は上で display: flex にしてある（編集欄を高さいっぱいに
   伸ばすため）ので、ここで block に戻さない */
.sheet.editing .memo-when-editing { display: block; }

.sheet-foot {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.6rem;
    flex: 0 0 auto;
    padding: 0.7rem 0.9rem;
    background: var(--strip);
    border-top: 1px solid var(--line);
}

/* 削除は取り消せない。保存の隣に置かず、左端へ寄せる */
.sheet-foot form { margin: 0 auto 0 0; }

/* --- 問題の見出しの下の操作（iOS版の actionRow） --- */
.question-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 0.7rem;
}

.memo-open,
.copy-question,
.speak-explanation { font-size: 0.88rem; padding: 0.3rem 0.9rem; }

/* 写したあとに「コピーしました」へ書き換わる。幅が変わって隣がずれないよう、
   長い方の文字に合わせた幅を先に取っておく */
.copy-question { min-width: 11em; text-align: center; }

/* 読み上げ。押すと「読み上げを止める」に変わるので、長い方に幅を合わせておく
   （変わるたびに隣のボタンがずれない）。読んでいる間は塗って、
   今そこから音が出ていることを画面の側にも出す */
.speak-explanation { min-width: 11em; text-align: center; }

.speak-explanation.on {
    background: var(--accent);
    border-color: var(--accent-dark);
    color: #fff;
}
.speak-explanation.on:hover { background: var(--accent-dark); }

/* 今読んでいる所。選択肢は正誤で塗り分けてあるので、下地には手を付けず
   外側に枠を出す。outline は場所を取らないので、行が動いて読む所がずれない。
   狭い画面ではメニューのボタン（右上に固定）が上端に居るので、
   送った先が隠れないよう上に余裕を取る */
.speaking {
    outline: 3px solid var(--accent);
    outline-offset: 3px;
    border-radius: 4px;
    scroll-margin-top: 3.5rem;
    scroll-margin-bottom: 1rem;
}

/* 書いてあるときは色を変える。開かなくても有無が分かる（iOS版は橙にしている） */
.memo-open.has {
    background: var(--miss-bg);
    border-color: #d68910;
    color: var(--miss-text);
}
.memo-open.has:hover { background: #ffeaa7; }

/* --- 新しい版になったことの知らせ ---
   デプロイのあと、開いたままの画面に出す。押すまで何も起きない（js/app.js）。
   下から出すのは、上に出すと見出しやメニューのボタンと重なるため */
.update-bar {
    position: fixed;
    left: 0.6rem;
    right: 0.6rem;
    bottom: 0.6rem;
    z-index: 60;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    padding: 0.7rem 0.9rem;
    background: var(--heading);
    color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
    font-size: 0.9rem;
}

.update-bar button {
    min-height: 2.2rem;
    padding: 0.3rem 0.9rem;
}

/* 「あとで」は目立たせない。押してほしいのは更新の方 */
.update-bar button:not(.primary) {
    background: transparent;
    color: #fff;
    border-color: rgba(255, 255, 255, 0.5);
}

/* --- 管理者が共有した解説 ---
   自分のメモ（押したときに出る枠）とは別物だと分かるようにする */
/* 問題文と選択肢一覧の間に、枠を持たずに置く。地の色を薄く敷いて
   自動で組み立てた読み解きと区別できるようにする */
.shared-note {
    border-left: 4px solid var(--accent);
    background: var(--field);
    border-radius: 0 5px 5px 0;
    padding: 0.7rem 0.9rem;
    margin: 0 0 1rem;
}

.shared-note-head {
    font-weight: 700;
    color: var(--heading);
    margin-bottom: 0.5rem;
}

.explanation.shared { border-left: 3px solid var(--accent); }

.shared-label {
    display: inline-block;
    font-size: 0.72rem;
    color: var(--accent-dark);
    border: 1px solid var(--accent);
    border-radius: 3px;
    padding: 0 0.3rem;
    margin-right: 0.4rem;
    vertical-align: 1px;
}

/* --- 自分だけの印（理解度・★） ---
   問題は全員で共有し、この行だけが人ごとに変わる。押した結果は自分にしか出ない */
.marks {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
    margin-bottom: 0.8rem;
}

.marks-label { color: var(--muted); font-size: 0.8rem; margin-right: 0.2rem; }

.mark-btn {
    font-size: 0.82rem;
    padding: 0.25rem 0.7rem;
    background: #fff;
}

/* 選ばれている段だけ色を持たせる。採点の3色と揃える
   （わかる=緑 / あやふや=黄 / わからない=赤） */
.mark-btn.on.u3 { background: var(--ok-bg); border-color: var(--ok-border); color: var(--ok-text); }
.mark-btn.on.u2 { background: var(--miss-bg); border-color: #d68910; color: var(--miss-text); }
.mark-btn.on.u1 { background: var(--wrong-bg); border-color: var(--wrong-border); color: var(--wrong-text); }
.mark-btn.star.on { border-color: #d68910; color: #b9770e; font-weight: 700; }

/* 一覧のマス目に出す印。正誤（背景色）と重ならないよう、
   理解度は下の線、★は右上の点で出す */
.grid a { position: relative; }
.grid a.u-known  { box-shadow: inset 0 -3px 0 var(--ok-border); }
.grid a.u-unsure { box-shadow: inset 0 -3px 0 #d68910; }
.grid a.u-unknown { box-shadow: inset 0 -3px 0 var(--wrong-border); }

.grid a.starred::after {
    content: "★";
    position: absolute;
    top: -0.35rem;
    right: -0.1rem;
    font-size: 0.62rem;
    color: #b9770e;
}
.grid a.current.starred::after { color: #ffe08a; }

/* 直近の解答に時間がかかった問題。正誤（背景色）・理解度（下の線）・★（右上）の
   どれとも重ならないよう、左上に点を置く。正解の緑と並んでいても目に留まるよう、
   「あやふや」と同じ黄で出す（間違いではないが、そのままにはできない、の段） */
.grid a.slow::before {
    content: "";
    position: absolute;
    top: 0.12rem;
    left: 0.12rem;
    width: 0.32rem;
    height: 0.32rem;
    border-radius: 50%;
    background: #d68910;
}
.grid a.current.slow::before { background: #ffe08a; }

/* --- 横並びの選択（メモの色。iOS版の segmented picker） ---
   ラジオボタン自体は隠し、札を押す形にする */
.segmented { display: flex; flex-wrap: wrap; gap: 0.3rem; }

.segmented label { font-size: 0.9rem; font-weight: 400; color: var(--text); }

.segmented input { position: absolute; width: 0; height: 0; opacity: 0; }

.segmented span {
    display: inline-block;
    min-width: 2.6rem;
    padding: 0.3rem 0.6rem;
    text-align: center;
    border: 1px solid var(--line-strong);
    border-radius: 5px;
    background: #fff;
    cursor: pointer;
}

.segmented input:checked + span {
    background: var(--accent);
    border-color: var(--accent-dark);
    color: #fff;
    font-weight: 700;
}

/* ラジオを隠したぶん、キーボード操作でどこにいるか分かるようにする */
.segmented input:focus-visible + span {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.35);
}

/* 「解答する」「次の問題」など、その画面で次にやることの並び */
.actions {
    display: flex;
    gap: 0.6rem;
    flex-wrap: wrap;
    align-items: center;
}

/* 主要な操作は JavaFX と同じく大きめの的にする（幅120 高さ40 相当） */
.actions button, .actions .btn {
    min-width: 7rem;
    min-height: 2.6rem;
    text-align: center;
}

.stat-row { display: flex; gap: 2rem; flex-wrap: wrap; }
.stat { min-width: 8rem; }
.stat .value { font-size: 1.7rem; font-weight: 700; color: var(--heading); }
.stat .label { color: var(--muted); font-size: 0.8rem; }

/* --- 問題の一覧（番号のマス目） --- */
.grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.grid a {
    display: block;
    min-width: 2.3rem;
    text-align: center;
    padding: 0.3rem 0.2rem;
    border: 1px solid var(--line-strong);
    border-radius: 5px;
    background: #fff;
    text-decoration: none;
    color: var(--text);
    font-size: 0.85rem;
}

.grid a:hover { background: var(--strip); }

.grid a.done-ok { border-color: var(--ok-border); background: var(--ok-bg); color: var(--ok-text); }
.grid a.done-ng { border-color: var(--wrong-border); background: var(--wrong-bg); color: var(--wrong-text); }

/* 表示中の問題。JavaFX の .list-cell:selected（青地に白抜き） */
.grid a.current {
    background: var(--accent);
    border-color: var(--accent-dark);
    color: #fff;
    font-weight: 700;
}

/* ==================================================================
   暗記集
   ------------------------------------------------------------------
   解かずに読み通す画面。学習画面の部品（.question-head / .options /
   .explanation）をそのまま使い、ここでは並べ方と、読み上げテキストの
   取り出し口の見た目だけを足す。
   ================================================================== */

/* 読み上げ用テキストの取り出し口。青の下地で、読み物（問題）と区別する */
.speech-box {
    border-left: 4px solid var(--accent);
}

.speech-head {
    font-weight: 700;
    color: var(--heading);
    margin-bottom: 0.4rem;
}

.speech-box p { margin: 0 0 0.5rem; }

.speech-box code {
    background: var(--strip);
    border-radius: 3px;
    padding: 0 0.25rem;
}

/* 分野の選び場。1行に「分野名＋問題数」と、その分野だけを保存するボタン */
.mem-picker { list-style: none; padding: 0; margin: 0; }

.mem-picker li {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    border: 1px solid var(--line);
    border-radius: 5px;
    margin-bottom: 0.5rem;
    padding: 0.5rem 0.7rem;
    background: var(--field);
}

.mem-picker-main {
    flex: 1;
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
    text-decoration: none;
    color: var(--heading);
    font-weight: 700;
    min-height: 2.2rem;
}

.mem-picker-main:hover { text-decoration: underline; }

/* 1問ぶんの枠。何十問も続くので、間を空けて切れ目を作る */
.mem-card { margin-bottom: 1.2rem; }

/* 正解の番号。選択肢を読む前に置く */
.mem-answer {
    display: inline-flex;
    align-items: baseline;
    gap: 0.5rem;
    background: var(--ok-bg);
    color: var(--ok-text);
    border: 1px solid var(--ok-line);
    border-radius: 5px;
    padding: 0.25rem 0.8rem;
    margin-bottom: 0.8rem;
    font-weight: 700;
}

.mem-answer-label { font-size: 0.8rem; }

.mem-link { margin: 0.8rem 0 0; }

/* ==================================================================
   画面幅で段を落とす
   ------------------------------------------------------------------
   1000px を切ると左ペインが狭すぎて番号が2桁で折り返す。1カラムにする。
   ================================================================== */
@media (max-width: 1000px) {
    .study-layout { grid-template-columns: minmax(0, 1fr); }

    .qlist {
        position: static;
        max-height: none;
    }

    .qlist-body { max-height: 12rem; }
}

/* ==================================================================
   スマートフォン
   ------------------------------------------------------------------
   この学習アプリは電車の中で片手で解く使い方を想定している。そのため
   「指で押せる大きさ」と「横に見切れないこと」を最優先にする。

   横幅の目安: 360px（一般的なAndroid）〜 390px（iPhone）。
   本文の余白を引くと使える幅は 330px 前後しか無いので、
   テンプレートに直接書いた min-width（18rem = 288px など）は
   ここで打ち消す。打ち消さないと入力欄が画面からはみ出す。
   ================================================================== */

@media (max-width: 640px) {

    main { padding: 1rem 0.8rem 2rem; }

    h1 { font-size: 1.25rem; }
    h2 { font-size: 1rem; }

    /* --- メニュー ---
       画面に出ているのはボタンだけ。指で押せる大きさにし、
       開いた中身は右端から画面幅いっぱい手前まで広げる */
    .menu-toggle {
        min-height: 44px;
        padding: 0.5rem 0.9rem;
    }

    .menu {
        top: 3.4rem;
        left: 0.6rem;
        min-width: 0;
    }

    .menu a { padding: 0.6rem 0.8rem; }

    /* --- 入力: 縦に積む ---
       横並びのままだと1つあたり100px程度になり、年度も分野も読めない */
    .controls {
        flex-direction: column;
        align-items: stretch;
        gap: 0.7rem;
    }

    .field { width: 100%; }

    /* --- 読み解き: 項目名を中身の上に落とす ---
       横並びのままだと項目名（「なぜこの答えになるのか」）で 9.5rem を取られ、
       残りが画面の半分ほどしか無くなる。長い解説がそこに流れると読み進められない */
    .question-brief { padding: 0.8rem 0.85rem; }

    .brief-row {
        flex-direction: column;
        gap: 0.25rem;
    }

    .brief-label { flex: none; }

    /* 番号の分の字下げも詰める（画面が狭いと1文字あたりの割が大きい） */
    .brief-reason-body { padding-left: 0.9rem; }

    /* テンプレート側の min-width（20rem 等）を打ち消す。
       これが無いと絞り込みフォームが画面外へ出る */
    input[type=text],
    input[type=password],
    input[type=number],
    input[type=date],
    select,
    textarea {
        width: 100%;
        min-width: 0;
        /* iOS は 16px 未満の入力欄に焦点が当たると画面を勝手に拡大する。
           拡大されると元の倍率に戻せず操作しづらくなるため 16px を下回らせない */
        font-size: 16px;
        padding: 0.6rem;
    }

    input[type=color] { width: 4rem; height: 2.6rem; }

    /* --- 押せる大きさ ---
       Apple/Google とも最小 44px を目安にしている */
    button, .btn {
        min-height: 44px;
        padding: 0.6rem 1rem;
    }

    /* 絞り込みや保存のボタンは横幅いっぱいに。押し間違いが減る */
    .controls button, .controls .btn {
        width: 100%;
        text-align: center;
    }

    /* 一覧の中の小さいボタン（削除など）は幅いっぱいにしない */
    td button, td .btn {
        width: auto;
        min-height: 38px;
    }

    /* ナビの中のログアウトはリンクのまま。ボタンとして大きくしない */
    .linklike { width: auto; min-height: 0; padding: 0.35rem 0.6rem; }

    .login-main { padding: 2rem 0.8rem; }

    /* --- 選択肢: 行全体を押せるようにする ---
       チェックボックスだけが的だと小さすぎて押し損ねる */
    .options li { padding: 0; }

    .options li.correct,
    .options li.wrong,
    .options li.missed { padding: 0; }

    .options label {
        padding: 0.8rem 0.7rem;
        gap: 0.7rem;
        align-items: flex-start;
        min-height: 44px;
    }

    .options label input[type=checkbox] {
        width: 1.3rem;
        height: 1.3rem;
        margin-top: 0.15rem;
        flex-shrink: 0;
    }

    /* 採点後の表示は label が無いので、こちらに余白を持たせる */
    .options li > div { padding: 0.7rem; }
    .options li > .explanation { margin: 0 0.5rem 0.6rem; padding: 0.6rem 0.7rem; }
    .options li > form { padding: 0 0.7rem 0.7rem; }

    /* --- 問題番号のマス目: 指で押せる正方形に --- */
    .grid { gap: 0.4rem; }

    .grid a {
        min-width: 2.8rem;
        min-height: 2.8rem;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.9rem;
    }

    /* 年度の一覧など、幅を指定したマスは横幅いっぱいに */
    .grid a[style] { min-width: 100% !important; }

    /* 問題番号のマス目は最大194個ある。全部並べると問題本体まで
       延々スクロールすることになるので、高さを区切って中で流す */
    .qlist-body { max-height: 10.5rem; }

    /* 次にやること（解答する / 次の問題）は横並びのまま大きく。
       縦に積むより、親指の届く位置に2つ並ぶ方が押しやすい */
    .actions { flex-wrap: nowrap; }
    .actions button, .actions .btn {
        flex: 1;
        min-width: 0;
        text-align: center;
    }

    /* --- 表: 横スクロール ---
       列を減らすより、そのまま横に流せる方が情報が落ちない */
    .table-wrap {
        -webkit-overflow-scrolling: touch;
        /* 右に続きがあることを影で示す */
        background:
            linear-gradient(to right, var(--panel) 30%, transparent),
            linear-gradient(to left, var(--panel) 30%, transparent) 100% 0;
        background-size: 40px 100%, 40px 100%;
        background-repeat: no-repeat;
        background-attachment: local, local;
    }

    th, td { padding: 0.5rem 0.4rem; }

    /* --- 数字の並び --- */
    .stat-row { gap: 1.2rem; }
    .stat { min-width: 6rem; }
    .stat .value { font-size: 1.4rem; }

    .panel { padding: 0.9rem; }

    .question-text { font-size: 1.02rem; }

    /* --- 前面の枠: 画面いっぱいに近づける ---
       余白を残すより、メモ本文と編集欄が一度に見える方が使いやすい。
       狭い画面では外側の余白をさらに詰める */
    dialog.sheet {
        width: calc(100% - 1rem);
        height: calc(100vh - 1rem);
        height: calc(100dvh - 1rem);
    }

    /* 画面が狭いぶん、編集欄は本文を押し出さない高さに戻す */
    .sheet-body textarea { min-height: 8rem; }

    .sheet-body { padding: 0.8rem; }

    /* 色の札も指で押せる大きさに */
    .segmented span {
        display: flex;
        align-items: center;
        justify-content: center;
        min-width: 3.2rem;
        min-height: 44px;
    }
}

/* 特に幅の狭い端末（iPhone SE 等） */
@media (max-width: 380px) {
    main { padding: 0.8rem 0.6rem 2rem; }
    .stat-row { gap: 0.9rem; }
    .stat { min-width: 5rem; }
    .grid a { min-width: 2.5rem; min-height: 2.5rem; }
}

/* 指で操作する端末では、ホバー前提の装飾を出さない */
@media (hover: none) {
    button:hover, .btn:hover { background: #ececec; }
    button.primary:hover, .btn.primary:hover { background: var(--accent); }
    button.secondary:hover, .btn.secondary:hover { background: var(--secondary); }
    button.danger:hover, .btn.danger:hover { background: var(--ng); }
    .memo-open.has:hover { background: var(--miss-bg); }
    .options li:hover { background: var(--field); }
    tbody tr:hover { background: transparent; }
    .grid a:hover { background: #fff; }
}

/* ==================================================================
   毎朝の暗記集（/drill）
   ------------------------------------------------------------------
   記述1つを〇×で答える画面。朝に片手で回すので、押す所を大きく取り、
   画面に出すものを「前提・記述・〇×」の3つだけに絞る。
   ================================================================== */
.drill-head {
    display: flex;
    align-items: baseline;
    gap: 0.8rem;
    margin-bottom: 0.5rem;
}

.drill-count {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--heading);
    margin-right: auto;
}

/* 元の問題文。前提として添えるだけなので、記述より小さく・薄く出す */
.drill-lead {
    border-left: 3px solid var(--line);
    padding: 0.1rem 0 0.1rem 0.7rem;
    margin: 0.5rem 0 0.9rem;
}

/* 〇×で問う記述そのもの。ここだけを読めば答えられる大きさにする */
.drill-statement {
    background: var(--field);
    border: 1px solid var(--line);
    border-radius: 4px;
    padding: 0.9rem 1rem;
    font-size: 1.15rem;
    line-height: 1.8;
}

.drill-statement.small { font-size: 1rem; }

.drill-tags { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; }

/* 直前の答え合わせ。次の記述の上に残す */
.drill-just { border-left: 4px solid var(--accent); }

.drill-choice {
    display: flex;
    gap: 0.8rem;
    margin-top: 1.1rem;
}

.drill-choice button {
    flex: 1 1 0;
    /* 指で押す所。1件ずつ何十回も押すので、行の高さより面積を優先する */
    min-height: 3.4rem;
    font-size: 1.15rem;
    font-weight: 700;
}

.drill-yes {
    background: var(--ok-bg);
    color: var(--ok-text);
    border-color: var(--ok-border);
}
.drill-yes:hover { background: #c3e6cb; }

.drill-no {
    background: var(--wrong-bg);
    color: var(--wrong-text);
    border-color: var(--wrong-border);
}
.drill-no:hover { background: #f5c6cb; }

/* 済んだあとの「間違えた記述」。1件ずつ区切って読ませる */
.drill-review {
    padding: 0.9rem 0;
    border-top: 1px solid var(--line);
}
.drill-review:first-of-type { border-top: none; padding-top: 0; }

/* 内訳の表。記述は長いので、その列だけ折り返しを許す */
.drill-cell { min-width: 14rem; overflow-wrap: anywhere; }

/* ホームの案内 */
.drill-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    border-left: 4px solid var(--accent);
}
.drill-card-main { flex: 1 1 14rem; }
.drill-card-title { font-weight: 700; color: var(--heading); font-size: 1.05rem; }

@media (max-width: 640px) {
    .drill-statement { font-size: 1.05rem; padding: 0.8rem; }
    .drill-choice { gap: 0.6rem; }
    .drill-card .btn { width: 100%; text-align: center; }
}

/* ==================================================================
   分野別問題集（/sets）
   ------------------------------------------------------------------
   分野をひとつ選んで詰める画面。出す部品は暗記集（.drill-*）と同じで、
   ここで足すのは「どこまで進んだか」を分野ごとに並べる枠だけ。
   1問1答そのものの見た目は .drill-* をそのまま使う（同じ〇×なので、
   画面が変わるたびに押す所の位置が動かない方がよい）。
   ================================================================== */
.set-card { border-left: 4px solid var(--accent); }

.set-card-head {
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
    flex-wrap: wrap;
    margin-bottom: 0.7rem;
}

.set-card-title {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--heading);
    text-decoration: none;
}
.set-card-title:hover { text-decoration: underline; }

/* 進み具合の1行（見出し＋数字＋帯）。過去問と1問1答で2本並ぶ */
.set-line { margin-bottom: 0.8rem; }

.set-line-head {
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
    flex-wrap: wrap;
    margin-bottom: 0.25rem;
}

/* 数えているものが「問題」か「記述」かは、この見出しでしか区別が付かない。
   薄くしすぎないこと */
.set-line-name {
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--heading);
    min-width: 4.5rem;
}

/* 出し方を選ぶ列。並び・年度を選んでから、押したボタンがそのまま出し方になる */
.oneshot-start { align-items: flex-end; }

/* いま選んでいる出し方 */
.btn.on {
    border-color: var(--accent);
    color: var(--accent);
    font-weight: 700;
}

/* キーの案内。触って使う端末には要らないので、細い画面では出さない */
@media (max-width: 640px) {
    .oneshot-keys { display: none; }
}

/* ==================================================================
   思い出す（/recall）
   ------------------------------------------------------------------
   ほかの画面は「正しい記述を見せて選ばせる」ので、目が行く先は選択肢だった。
   ここは逆で、出すのは題材ひとつだけ、書くのは利用者である。だから
   ・題材を大きく（.recall-term）
   ・入力欄を広く（.recall-form textarea）
   ・採点は見出しごとに区切って読ませる（.recall-block）
   の3つに寄せてある。答え合わせが長いので、見出し（.recall-label）を
   薄くしすぎると、どこを読んでいるか分からなくなる。
   ================================================================== */
.recall-head { padding-bottom: 0.8rem; }

.recall-counts {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    align-items: center;
    margin-bottom: 0.5rem;
}

/* 出し方の切り替え。押した方が accent 色で残る（.btn.on と同じ見せ方） */
.recall-mode {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.7rem;
}
.recall-mode button.on {
    border-color: var(--accent);
    color: var(--accent);
    font-weight: 700;
}

.recall-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    align-items: center;
    margin-bottom: 0.7rem;
}

/* 題材。ここだけを見て思い出すので、いちばん大きくする */
.recall-term {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--heading);
    line-height: 1.5;
    padding: 0.9rem 0 0.3rem;
    overflow-wrap: anywhere;
}

/* 単語のほかに問い方が付いているとき。題材の下に置く */
.recall-ask {
    font-size: 1.05rem;
    color: var(--text);
    margin: 0.2rem 0 0.7rem;
}

.recall-question {
    font-size: 1.1rem;
    line-height: 1.9;
    padding: 0.8rem 0 0.4rem;
    overflow-wrap: anywhere;
}

.recall-choices {
    margin: 0.3rem 0 0.8rem;
    padding-left: 1.6rem;
    line-height: 1.9;
}
.recall-choices li { margin-bottom: 0.2rem; }

.recall-form { margin-top: 0.6rem; }
.recall-form textarea { min-height: 9rem; }
.recall-actions { margin-top: 0.6rem; }

/* --- 答え合わせ --- */
.recall-just { border-left: 4px solid var(--accent); }

.recall-verdict {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}
.recall-verdict .verdict { margin-bottom: 0; }

/* 見出しと本文の組。見出しは濃紺の太字にして、読み飛ばす所を作らない */
.recall-block {
    border-top: 1px solid var(--line);
    padding-top: 0.7rem;
    margin-top: 0.7rem;
}

.recall-label {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--heading);
    margin: 0 0 0.35rem;
}

.recall-body {
    line-height: 1.9;
    overflow-wrap: anywhere;
}

/* 自分が書いたもの。採点の文と混ざらないよう地を敷く */
.recall-written {
    background: var(--strip);
    border-radius: 5px;
    padding: 0.6rem 0.7rem;
}

.recall-traps {
    margin: 0;
    padding-left: 1.3rem;
    line-height: 1.9;
}
.recall-traps li { margin-bottom: 0.35rem; }

/* 覚え方は最後に読む所。ここだけ色を付けて終わりが分かるようにする */
.recall-tip .recall-body {
    background: var(--ok-bg);
    border: 1px solid var(--ok-line);
    border-radius: 5px;
    padding: 0.6rem 0.7rem;
}

.recall-related .recall-picks {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

/* --- 履歴 --- */
.recall-log-head {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    margin-bottom: 0.4rem;
}

.recall-log-body {
    line-height: 1.8;
    margin-bottom: 0.3rem;
    overflow-wrap: anywhere;
}

@media (max-width: 640px) {
    .recall-term { font-size: 1.35rem; }
    .recall-mode { flex-direction: column; }
    .recall-actions .btn { width: 100%; text-align: center; }
}

/* ==================================================================
   問題の修正（/admin/questions）
   ------------------------------------------------------------------
   選択肢を1件ずつ枠に入れる。表に押し込むと、狭い画面で解説の欄が
   1行分まで潰れ、いちばん直したい所が読めなくなる。
   足すための空行は、既にある選択肢と同じ見た目にしない（点線）。
   ================================================================== */
.edit-option {
    border: 1px solid var(--line);
    border-radius: 5px;
    padding: 0.7rem 0.8rem;
    margin-bottom: 0.8rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

/* まだ DB に無い行。書かなければ何も起きないことを見た目でも示す */
.edit-option.is-new {
    border-style: dashed;
    background: var(--field);
}

.edit-option-head {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
    align-items: center;
}

.edit-option-head .num { font-weight: 700; min-width: 1.4rem; }

/* 「消す」は取り返しがつかないので、正解の印と同じ濃さで並べない */
.edit-option-head .check:last-of-type span { color: var(--muted); }

@media (max-width: 640px) {
    .edit-option-head { gap: 0.5rem; }
}

/* ==================================================================
   模擬試験（本番形式）
   ------------------------------------------------------------------
   本試験と同じ形で60問を通しで解く画面。学習画面と違って正誤も解説も
   出さないかわりに、「残りどれだけか」「どこを塗り残しているか」が
   常に見えている必要がある。
   ================================================================== */

/* 残り時間と現在地の帯。画面の一番上に置き、送っても位置が変わらないようにする */
.exam-bar {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: var(--strip);
    border: 1px solid var(--line-strong);
    border-radius: 6px;
    padding: 0.6rem 0.9rem;
    margin-bottom: 1rem;
    /* 右上のメニューボタンと重ならないよう、その分だけ空ける */
    padding-right: 3.4rem;
}

.exam-clock {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--heading);
    /* 桁が動くたびに幅が変わると目が滑るので、数字の幅をそろえる */
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
}

/* 残り5分を切ったら赤。本番の「あと5分です」の合図にあたる */
.exam-clock.warn { color: var(--wrong-text); }

.exam-meta { font-size: 0.85rem; color: var(--muted); line-height: 1.5; }

/* 問題番号のマス目。学習画面の .grid と見た目をそろえるが、
   こちらは押すと下書きを保存して移動するので button でも並ぶ */
.qpalette {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.qpalette a,
.qpalette button {
    position: relative;
    display: block;
    min-width: 2.3rem;
    text-align: center;
    padding: 0.3rem 0.2rem;
    border: 1px solid var(--line-strong);
    border-radius: 5px;
    background: #fff;
    text-decoration: none;
    color: var(--text);
    font-size: 0.85rem;
    font-weight: 400;
    cursor: pointer;
}

.qpalette a:hover,
.qpalette button:hover { background: var(--strip); }

/* 何か選んである問題。正誤は出さないので、色は「済んだ」印としてだけ使う */
.qpalette a.done,
.qpalette button.done {
    border-color: var(--ok-border);
    background: var(--ok-bg);
    color: var(--ok-text);
}

/* あとで見直す印。解答済みかどうかと重ならないよう右上の点で出す */
.qpalette a.flag::after,
.qpalette button.flag::after {
    content: "●";
    position: absolute;
    top: -0.3rem;
    right: -0.15rem;
    font-size: 0.55rem;
    color: #d68910;
}

/* いま出している問題（JavaFX の .list-cell:selected と同じ青地に白抜き） */
.qpalette button.current {
    background: var(--accent);
    border-color: var(--accent-dark);
    color: #fff;
    font-weight: 700;
}

.qpalette button.current.flag::after { color: #ffe08a; }

/* 分野ごとの得点（結果画面）。基準点に届いたかどうかを1行で読ませる */
.section-score {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.6rem;
    padding: 0.7rem 0;
    border-top: 1px solid var(--line);
}

.section-score:first-of-type { border-top: none; }

.section-score .name { font-weight: 700; color: var(--heading); min-width: 14rem; }

.section-score .points { font-size: 1.3rem; font-weight: 700; color: var(--heading); }

.section-score .points.short { color: var(--wrong-text); }

/* ==================================================================
   出題傾向（/trends）
   ================================================================== */
.trend-table th.num, .trend-table td.num { text-align: right; white-space: nowrap; }
.trend-table td.cell { text-align: center; color: var(--muted); padding-left: 0.3rem; padding-right: 0.3rem; }
.trend-table td.cell.hit { color: var(--heading); font-weight: 700; background: var(--ok-bg); }
.trend-table tr.muted td { color: var(--muted); }
.trend-dist { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 1rem; }
.trend-dist table { margin-bottom: 0.8rem; }
.trend-dist td.num, .trend-dist th.num { text-align: right; }