/* ダークモード（2026-10-01）。theme.js が <html data-mode="dark"> を付けたときだけ効く上書き。ライトの見た目は style.css のまま変えない。
   本文の文字と背景のコントラスト比は 4.5:1 以上（小さい文字も）。正解＝緑系、不正解＝赤系の意味は保つ。
   色の役割: 背景 #0f1614 ／ 面（カード） #18221f ／ 面 2（チップ・選択中） #213029 ／ 線 #2c3b37 ／ 文字 #e6eeea ／ 補助の文字 #a9b8b2 ／ 緑の文字 #7fd0ab ／ 緑のボタン #1c6650 */
html[data-mode="dark"]{color-scheme:dark;--ink:#e6eeea;--muted:#a9b8b2;--green:#7fd0ab;--line:#2c3b37;--bg:#0f1614;--gold:#dcb872;--surface:#18221f;--surface2:#213029;--green-strong:#1c6650;--good:#4fb584;--good-bg:#173a2b;--bad:#e0806a;--bad-bg:#3b211c;--warn-bg:#2d2513;--warn-line:#6e5626;--warn-ink:#f3d59a}
html[data-mode="dark"] body{background:var(--bg);color:var(--ink)}

/* 枠・面 */
html[data-mode="dark"] aside,html[data-mode="dark"] .stat,html[data-mode="dark"] .card,html[data-mode="dark"] .option,html[data-mode="dark"] .empty,html[data-mode="dark"] .listrow,html[data-mode="dark"] .mini-hero,html[data-mode="dark"] .past-card,html[data-mode="dark"] .past-answer,html[data-mode="dark"] .exam-submit,html[data-mode="dark"] .explain,html[data-mode="dark"] .ad-slot,html[data-mode="dark"] .question-image,html[data-mode="dark"] .bill-toggle,html[data-mode="dark"] #navToggle{background:var(--surface);border-color:var(--line)}
html[data-mode="dark"] .secondary,html[data-mode="dark"] .bookmark,html[data-mode="dark"] .card button.secondary,html[data-mode="dark"] .lang-select,html[data-mode="dark"] .lang-option,html[data-mode="dark"] .theme-toggle{background:var(--surface2);border-color:var(--line);color:var(--ink)}
html[data-mode="dark"] .bookmark{color:var(--green)}
html[data-mode="dark"] input[type=search],html[data-mode="dark"] select,html[data-mode="dark"] input[type=email],html[data-mode="dark"] #loginOtp,html[data-mode="dark"] #loginEmail{background:var(--surface2);border:1px solid var(--line);color:var(--ink)}
html[data-mode="dark"] input::placeholder{color:#8d9c96}
html[data-mode="dark"] .card.plan-notes .secondary{background:var(--surface2);color:var(--ink)}
html[data-mode="dark"] button:focus-visible,html[data-mode="dark"] a:focus-visible,html[data-mode="dark"] input:focus-visible,html[data-mode="dark"] select:focus-visible{outline-color:#e0b25c}

/* ボタン（緑の面に白い文字） */
html[data-mode="dark"] .primary,html[data-mode="dark"] .card button.primary,html[data-mode="dark"] .card .plan-action .primary{background:var(--green-strong);color:#fff}
html[data-mode="dark"] .logo{background:var(--green-strong);color:#fff}
html[data-mode="dark"] .hero .primary{background:#f4e7c8;color:#31463b}

/* サイドバー・下のメニュー */
html[data-mode="dark"] nav button{color:var(--muted)}
html[data-mode="dark"] nav button.active{background:var(--surface2);color:var(--green)}
html[data-mode="dark"] .navlabel,html[data-mode="dark"] .ad-label{color:var(--muted)}
html[data-mode="dark"] .dot{background:var(--good)}
@media(max-width:850px){
 html[data-mode="dark"] aside{background:var(--surface);border-bottom-color:var(--line)}
 html[data-mode="dark"] nav{background:var(--surface);border-top-color:var(--line);box-shadow:0 -3px 20px rgba(0,0,0,.45)}
 html[data-mode="dark"] nav button{color:var(--muted)}
 html[data-mode="dark"] nav button.active{background:var(--surface2);color:var(--green)}
 html[data-mode="dark"] .actions{background:var(--bg);border-top-color:var(--line);box-shadow:0 -8px 18px var(--bg)}
}

/* チップ・進み具合のバー */
html[data-mode="dark"] .chip{background:var(--surface2);color:var(--green)}
html[data-mode="dark"] .bar{background:var(--surface2)}
html[data-mode="dark"] .bar span{background:var(--good)}

/* 大きな帯（ヒーロー）・採点結果 */
html[data-mode="dark"] .hero,html[data-mode="dark"] .past-result{background:#173d31;color:#fff}
html[data-mode="dark"] .hero p{color:#d3e6dc}
html[data-mode="dark"] .hero .eyebrow{color:#a8d8c0}
html[data-mode="dark"] .past-result div span{color:#c7ddd4}
html[data-mode="dark"] .past-result p{color:#d5e6df}

/* 選択肢（選択中・正解・不正解） */
html[data-mode="dark"] .option .option-number,html[data-mode="dark"] .explain-choices .explain-num{background:var(--surface2);color:var(--ink)}
html[data-mode="dark"] .option.selected{border-color:var(--green);background:var(--surface2)}
html[data-mode="dark"] .option.correct{border-color:var(--good);background:var(--good-bg)}
html[data-mode="dark"] .option.incorrect{border-color:var(--bad);background:var(--bad-bg)}
html[data-mode="dark"] .option-status{color:#8fe0b5}
html[data-mode="dark"] .option:disabled{color:var(--ink)}
html[data-mode="dark"] .feedback{background:var(--good-bg);border-left-color:var(--good);color:var(--ink)}
html[data-mode="dark"] .feedback.bad{background:var(--bad-bg);border-color:var(--bad)}

/* 問題演習（50 問の回） */
html[data-mode="dark"] .past-answer button{background:var(--surface2);border-color:var(--line);color:var(--ink)}
html[data-mode="dark"] .past-answer button.selected{border-color:var(--green);background:#1d3d31;color:var(--green)}
html[data-mode="dark"] .past-answer.correct{border-color:var(--good);background:var(--good-bg)}
html[data-mode="dark"] .past-answer.incorrect{border-color:var(--bad);background:var(--bad-bg)}
html[data-mode="dark"] .past-answer.unanswered{border-color:#c99e4c;background:var(--warn-bg)}
html[data-mode="dark"] .past-answer.void{background:#1b2220}
html[data-mode="dark"] .map-correct{background:var(--good-bg)!important}
html[data-mode="dark"] .map-wrong{background:var(--bad-bg)!important}
html[data-mode="dark"] .exam-submit{box-shadow:0 8px 30px rgba(0,0,0,.5)}
html[data-mode="dark"] .exam-guide{background:var(--surface2)}
html[data-mode="dark"] .exam-guide p{color:var(--muted)}

/* 解説 */
html[data-mode="dark"] .explain-choices li.is-answer{background:var(--good-bg)}
html[data-mode="dark"] .explain-choices li.is-answer .explain-num{background:#24573f;color:#d9f5e6}
html[data-mode="dark"] .explain-note{background:var(--warn-bg);color:var(--ink)}

/* お知らせ・注意の帯 */
html[data-mode="dark"] #notice:not(:empty){background:#3a2f16;color:var(--ink)}
html[data-mode="dark"] .exam-countdown{background:var(--warn-bg);border-color:var(--warn-line);color:var(--warn-ink)}
html[data-mode="dark"] .legal-note,html[data-mode="dark"] .lang-note{background:var(--warn-bg);border-color:var(--warn-line);color:var(--ink)}
html[data-mode="dark"] .plan-card p.plan-soon,html[data-mode="dark"] .bill-toggle button small{background:var(--warn-bg);color:var(--warn-ink)}
html[data-mode="dark"] .bill-toggle button{color:var(--muted)}
html[data-mode="dark"] .bill-toggle button.active{background:var(--surface2);color:var(--green)}
html[data-mode="dark"] .plan-card.is-current{border-color:var(--green);box-shadow:0 0 0 2px rgba(127,208,171,.25)}
html[data-mode="dark"] .lang-chooser{border-color:var(--line)}

/* 広告枠（リンクの赤は暗い面でも読める明るさに） */
html[data-mode="dark"] .ad-slot{border-color:var(--line)}
html[data-mode="dark"] .ad-link{border-color:#ff9c8f;color:#ff9c8f}
html[data-mode="dark"] .ad-link:hover{background:#bf0000;color:#fff}

/* 画面上部の色の切り替えボタン */
html[data-mode="dark"] .theme-toggle .icon-moon{display:none}
html[data-mode="dark"] .theme-toggle .icon-sun{display:block}

/* アプリ版の案内（app.html）と、特商法・プライバシー（legal/*.html）。どちらも自前の <style> を持つ */
html[data-mode="dark"] .wrap .card{background:var(--surface);border-color:var(--line)}
html[data-mode="dark"] .wrap .brand,html[data-mode="dark"] .wrap h1,html[data-mode="dark"] .wrap h2{color:var(--ink)}
html[data-mode="dark"] .wrap .btn{background:var(--green-strong);color:#fff}
html[data-mode="dark"] .wrap .btn.sub{background:var(--surface2);color:var(--green);border-color:var(--green)}
html[data-mode="dark"] .wrap .note{background:var(--warn-bg);border-color:var(--warn-line);color:var(--ink)}
html[data-mode="dark"] .wrap .tag,html[data-mode="dark"] .wrap a{color:var(--green)}
html[data-mode="dark"] .wrap footer{border-color:var(--line)}
html[data-mode="dark"] body.legal{background:var(--bg);color:var(--ink)}
html[data-mode="dark"] body.legal h1{border-bottom-color:var(--green)}
html[data-mode="dark"] body.legal a{color:var(--green)}
html[data-mode="dark"] body.legal table{background:var(--surface)}
html[data-mode="dark"] body.legal th,html[data-mode="dark"] body.legal td{border-color:var(--line)}
html[data-mode="dark"] body.legal thead th{background:var(--surface2)}
html[data-mode="dark"] body.legal tbody th{background:#1b2521}