/* ダークモード（2026-10-01 稲木さん「宅建と色彩はダークモードに出来るようにもしましょう」）。のときだけ効く（theme.js が付ける）。style.css 本体の規則は動かさず、ここで色だけを上書きする。ライトは 1px も変えない。文字と背景のコントラスト比は 4.5:1 以上（本文 #eee8f6／地 #16121f ＝ 15.6、補助 #bcb1cd／カード #221b2f ＝ 8.3、強調 #c7b2ff／カード＝ 8.2、主ボタンは元の #6b46c1 に白文字＝ 6.4）。 **問題の図版（.q-visual の SVG）と正解・不正解の色見本は、色を変えない**（フィルター・混色〔blend〕を掛けない）。図版は白い台紙に載せ、周りの暗い色に引っ張られないよう余白を広めに取る。着せ替えの絵と組み合わせたときは、暗い被せ（86%）で絵をうっすら見せ、文字は白系にする。 */ html[data-mode="dark"]{ --ink:#eee8f6;--muted:#bcb1cd;--accent:#c7b2ff;--accent-dark:#5a37ad;--soft:#30264a;--line:#3d3453;--bg:#16121f;--gold:#f2c979;--cream:#3a3020; --surface:#221b2f;--surface2:#2a2239;--btn:#6b46c1;--btn-hover:#7a55d8 } html[data-mode="dark"] body{background:var(--bg);color:var(--ink)} /* 枠（サイドバー・下のナビ・見出し） */ html[data-mode="dark"] aside,html[data-mode="dark"] nav{background:var(--surface)} html[data-mode="dark"] nav button{color:var(--muted)} html[data-mode="dark"] nav button.active{background:var(--soft);color:var(--accent)} html[data-mode="dark"] #navToggle{background:var(--surface2);color:var(--muted)} html[data-mode="dark"] .logo{color:#6b46c1} html[data-mode="dark"] header{color:var(--muted)} /* カード・面 */ html[data-mode="dark"] :is(.card,.stat,.mini-hero,.drill-card,.empty,.explain,.ad-slot,.exam-submit,.grade-tabs,.bill-toggle){background:var(--surface);border-color:var(--line)} html[data-mode="dark"] .stat b{color:var(--ink)} html[data-mode="dark"] :is(.card,.stat,.mini-hero,.drill-card,.explain,.exam-submit){box-shadow:0 6px 18px #0000004d} html[data-mode="dark"] .card p{color:var(--muted)} html[data-mode="dark"] .hero{background:linear-gradient(135deg,#2e2447 0%,#3b2440 55%,#3a3024 100%);box-shadow:0 8px 22px #0000004d} html[data-mode="dark"] .hero p,html[data-mode="dark"] .drill-result p,html[data-mode="dark"] .drill-result div span{color:var(--muted)} html[data-mode="dark"] .hero::after,html[data-mode="dark"] .hero::before{opacity:.25} html[data-mode="dark"] .drill-result{background:linear-gradient(135deg,#2e2447,#3b2440)} html[data-mode="dark"] .bar{background:#342a48} /* ボタン・入力 */ html[data-mode="dark"] :is(.primary,.card .primary,.card .plan-action .primary){background:var(--btn);color:#fff;box-shadow:0 4px 12px #0000004d} html[data-mode="dark"] :is(.primary,.card .primary):not(:disabled):hover{background:var(--btn-hover)} html[data-mode="dark"] :is(.secondary,.card .secondary,.tools a.secondary){background:var(--surface2);border-color:var(--line);color:var(--ink)} html[data-mode="dark"] .card.plan-notes .secondary{background:var(--soft);color:var(--ink)} html[data-mode="dark"] .card button{color:var(--accent)} html[data-mode="dark"] :is(input[type=search],input[type=email],#loginOtp,select,input){background:var(--surface2);color:var(--ink);border-color:var(--line)} html[data-mode="dark"] .grade-tabs button{color:var(--muted)} html[data-mode="dark"] .grade-tabs button.active{background:var(--btn);color:#fff} html[data-mode="dark"] .bill-toggle button{color:var(--muted)} html[data-mode="dark"] .bill-toggle button.active{background:var(--soft);color:var(--accent)} html[data-mode="dark"] .chip{background:var(--soft);color:var(--accent)} html[data-mode="dark"] .number{background:var(--cream);color:var(--gold)} html[data-mode="dark"] #notice:not(:empty){background:var(--cream);border-color:#6b5a2c;color:var(--ink)} /* 問題の画面（選択肢・正解・不正解・解説） */ html[data-mode="dark"] .option{background:var(--surface);border-color:#4a3f63;color:var(--ink)} html[data-mode="dark"] .option .option-number{background:var(--soft);color:var(--ink)} html[data-mode="dark"] .option.selected{background:#2f2645;border-color:var(--accent)} html[data-mode="dark"] .option.correct{background:#173326;border-color:#46c28c} html[data-mode="dark"] .option.incorrect{background:#3a1d1d;border-color:#f07a6b} html[data-mode="dark"] .feedback{background:#173326;border-color:#46c28c} html[data-mode="dark"] .feedback.bad{background:#3a1d1d;border-color:#f07a6b} html[data-mode="dark"] .explain-body{border-color:var(--line)} html[data-mode="dark"] .explain-answer{background:#173326} html[data-mode="dark"] .explain-num{background:#2a5c44;color:#c8f2dc} html[data-mode="dark"] .map-correct{background:#1d3a2b!important} html[data-mode="dark"] .map-wrong{background:#3d2020!important} html[data-mode="dark"] .actions{background:var(--bg);border-color:var(--line);box-shadow:0 -8px 18px var(--bg)} html[data-mode="dark"] .lang-note{background:var(--cream);border-color:#6b5a2c} html[data-mode="dark"] .lang-note .link-button{color:var(--accent)} /* 問題の図版: 白い台紙のまま（色は変えない）。暗い地から離すため、台紙の余白を広げ、縁を明るい灰にする */ html[data-mode="dark"] .q-visual{background:#fff;padding:16px;border-color:#d9d3e4} html[data-mode="dark"] .q-visual svg{color:#000} /* 広告・フッター */ html[data-mode="dark"] .ad-label{border-color:var(--line);color:var(--muted)} html[data-mode="dark"] .ad-link{border-color:#ff8f8f;color:#ff9d9d} html[data-mode="dark"] .ad-link:hover{background:#ff8f8f;color:#16121f} html[data-mode="dark"] footer{color:var(--muted)} html[data-mode="dark"] footer a,html[data-mode="dark"] a{color:var(--accent)} /* 表示の設定のボタンとパネル */ html[data-mode="dark"] .prefs-btn{background:var(--surface2);border-color:var(--line);color:var(--accent)} html[data-mode="dark"] .prefs-btn[aria-expanded="true"]{background:var(--soft)} html[data-mode="dark"] .prefs-panel{background:var(--surface);border-color:var(--line);box-shadow:0 10px 30px #00000080} html[data-mode="dark"] .prefs-opt{background:var(--surface2);border-color:var(--line);color:var(--ink)} html[data-mode="dark"] .prefs-opt.active{background:var(--soft);border-color:var(--accent);color:var(--accent)} html[data-mode="dark"] .dev-plans{border-color:var(--line)} /* 着せ替え × ダーク: 絵に暗い被せをかけて（86%）うっすら見せ、座布団と文字のにじみを暗くする */ html[data-mode="dark"][data-skin="dream"],html[data-mode="dark"][data-skin="meadow"],html[data-mode="dark"][data-skin="sunrise"]{--bg-veil:rgba(22,18,31,.86)} html[data-mode="dark"][data-skin="dream"] :is(main>header,.intro,.sectionhead,#app>h1,#app>h2,#app>p,.tools>.muted),html[data-mode="dark"][data-skin="meadow"] :is(main>header,.intro,.sectionhead,#app>h1,#app>h2,#app>p,.tools>.muted),html[data-mode="dark"][data-skin="sunrise"] :is(main>header,.intro,.sectionhead,#app>h1,#app>h2,#app>p,.tools>.muted){text-shadow:0 0 2px #16121f,0 0 8px #16121f,0 0 14px rgba(22,18,31,.9)} html[data-mode="dark"][data-skin="dream"] :is(main>header,.intro p,.sectionhead .muted,.sectionhead small,.sectionhead span,.tools>.muted),html[data-mode="dark"][data-skin="meadow"] :is(main>header,.intro p,.sectionhead .muted,.sectionhead small,.sectionhead span,.tools>.muted),html[data-mode="dark"][data-skin="sunrise"] :is(main>header,.intro p,.sectionhead .muted,.sectionhead small,.sectionhead span,.tools>.muted){color:var(--muted);border-bottom-color:var(--line)} html[data-mode="dark"][data-skin="dream"] :is(.quiz,footer,.doc-panel),html[data-mode="dark"][data-skin="meadow"] :is(.quiz,footer,.doc-panel),html[data-mode="dark"][data-skin="sunrise"] :is(.quiz,footer,.doc-panel){background:rgba(34,27,47,.92);box-shadow:0 6px 22px #0000004d} /* アプリ版の案内（app.html）・特商法・プライバシー（legal/*.html）。ページ内の