/* 比例・反比例のグラフ・途中式・入力。位置と操作状態は元の指定を保つ。 */
/* 「いつもの」も上下の余白をそろえ、モードボタンに接しない位置へ。 */
.appearance-switch,
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .appearance-switch { margin: 0 0 20px; }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .mode-card { padding: 0; min-height: 92px; }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .mode-title { color: inherit; text-shadow: none; }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .mode-card.c6 .mode-title { color: inherit; }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .sub-btn { color: inherit; text-shadow: none; border-color: #ffffff66; }
/* 選択中は下側の太線ではなく、上・左右の内側の影で押し込みを表す。 */
.mode-card .sub-btn.active {
  box-shadow: inset 0 4px 6px #00000040, inset 2px 0 3px #00000024, inset -2px 0 3px #00000018, inset 0 -1px #ffffff66;
}
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .sub-btn.active {
  background: linear-gradient(#15364f24, #15364f0a), #ffffff55;
  box-shadow: inset 0 4px 6px #15364f55, inset 2px 0 3px #15364f30, inset -2px 0 3px #15364f20, inset 0 -1px #ffffff88;
}
html[data-math-look="pastel"] .sub-btn.active {
  background: linear-gradient(#79548424, #79548408), #ffffff66;
  box-shadow: inset 0 4px 6px #79548455, inset 2px 0 3px #79548430, inset -2px 0 3px #79548420, inset 0 -1px #ffffffbb;
}
html[data-math-look="elegant"] .sub-btn.active {
  background: linear-gradient(#111c2c44, #111c2c18), #ffffff25;
  box-shadow: inset 0 4px 7px #10182788, inset 2px 0 3px #10182755, inset -2px 0 3px #10182733, inset 0 -1px #e7cf9666;
}
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .mode-card.active { outline: 2px solid var(--look-accent); outline-offset: 3px; }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.question-text, .coord-target, .work-block, .work-trail-item, .eq-work-line) { color: var(--look-ink); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.q-instruction, .work-trail-title, .work-trail-item.dim, .eq-work-line.dim, .eq-hirei-note, .eq-autocalc-toggle, .solved-hint, .solved-tip) { color: var(--look-muted); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.q-hint, .hint-text, .step-prompt, .eq-work-line.final, .eq-shortcut-text, .eq-shortcut-formula, .eq-shortcut-formula .katex, .eq-shortcut-formula .katex *, .graph-read-fraction-part.active) { color: var(--look-warm); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.eq-shortcut-formula, .eq-work-line.shortcut) { border-color: var(--look-border); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .eq-shortcut-arrow, .eq-hirei-cancel-part::after { background: var(--look-warm); box-shadow: none; }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .eq-shortcut-arrow::before { border-right-color: var(--look-warm); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .eq-fly-token { color: var(--look-warm); text-shadow: 0 1px 0 var(--look-surface); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .eq-autocalc-sw { background: var(--look-border); border-color: var(--look-border); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .eq-autocalc-sw.on { background: var(--look-accent); border-color: var(--look-accent); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .eq-autocalc-sw-dot { background: #fff; }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .work-trail { background: var(--look-surface); border-color: var(--look-border); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.graph-read-hint-btn, .answer-input-btn) { color: var(--tool-special-ink); background: var(--tool-special); border: 2px solid #fff; border-radius: var(--tool-key-radius); box-shadow: var(--tool-control-shadow); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.graph-read-hint-btn, .answer-input-btn):active:not(:disabled) { transform: translateY(1px); box-shadow: var(--tool-control-pressed-shadow); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.graph-read-hint-btn, .answer-input-btn):disabled { box-shadow: none; }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.choice-btn, .eq-hirei-action) { color: var(--look-ink); background: var(--work-choice-bg); border-color: var(--work-choice-border); border-radius: var(--work-card-radius); box-shadow: var(--work-card-shadow); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.choice-btn, .eq-hirei-action):hover:not(:disabled) { color: var(--look-ink); background: var(--work-choice-hover); border-color: var(--look-accent); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .eq-hirei-action.data { color: var(--look-warm); background: var(--look-warm-soft); border-color: var(--look-border); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .eq-hirei-action.formula { color: var(--look-accent); background: var(--look-accent-soft); border-color: var(--look-border); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.eq-hirei-action.final, .choice-btn.correct) { color: var(--look-success); background: var(--look-success-soft); border-color: var(--look-success); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .choice-btn.wrong { color: var(--look-danger); background: var(--look-danger-soft); border-color: var(--look-danger); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .eq-hirei-action.is-inert { background: transparent; border-color: transparent; box-shadow: none; }
html[data-math-look="elegant"] .eq-hirei-action { background: var(--work-zero-bg); color: var(--work-zero-ink); border-color: var(--work-zero-border); }
html[data-math-look="elegant"] .eq-hirei-action.formula { background: var(--work-positive-bg); color: var(--work-positive-ink); border-color: var(--work-positive-border); }
html[data-math-look="elegant"] .eq-hirei-action.data { background: var(--work-negative-bg); color: var(--work-negative-ink); border-color: var(--work-negative-border); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.graph-read-tenkey, .eq-calc-tenkey) { color: var(--look-ink); background: var(--tool-panel); border: 2px solid var(--tool-frame); border-radius: var(--tool-radius); box-shadow: var(--tool-shadow); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.graph-read-tenkey-title, .eq-calc-tenkey-titlebar, .eq-calc-tenkey-close) { color: var(--look-accent); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.graph-read-tenkey-input, .eq-calc-tenkey-input) { color: var(--look-ink); background: var(--tool-display); border: 2px solid var(--look-border); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.graph-read-tenkey-btn, .eq-calc-tenkey-btn) { color: var(--look-ink); background: var(--tool-key); border-color: var(--tool-key-frame); border-radius: var(--tool-key-radius); box-shadow: var(--tool-key-shadow); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.graph-read-tenkey-btn, .eq-calc-tenkey-btn):is(.sign, .symbol) { color: var(--tool-special-ink); background: var(--tool-special); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.graph-read-tenkey-btn, .eq-calc-tenkey-btn).action { color: var(--tool-action-ink); background: var(--tool-action); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.graph-read-tenkey-btn, .eq-calc-tenkey-btn):hover { color: var(--look-ink); background: var(--look-soft); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.graph-read-tenkey-input, .eq-calc-tenkey-input).error { color: var(--look-danger); background: var(--look-danger-soft); border-color: var(--look-danger); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .graph-read-tenkey-input.ok { color: var(--look-success); background: var(--look-success-soft); border-color: var(--look-success); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.read-hint-box, .read-hint-box .hint-badge, .graph-line-label .pill) { color: var(--look-warm); background: var(--look-warm-soft); border-color: var(--look-border); box-shadow: 0 3px 0 var(--look-shadow); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.read-hint-box .hint-formula, .read-hint-box .hint-note) { color: var(--look-warm); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.solved-label, .solved-ans) { color: var(--look-success); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.graph, .question-box svg, .oj-explain svg) { background: var(--look-surface); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.graph, .question-box svg, .oj-explain svg) :is([stroke="rgba(255,255,255,0.15)"], [stroke="rgba(255,255,255,0.13)"]) { stroke: var(--look-border); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.graph, .question-box svg, .oj-explain svg) :is([stroke="rgba(255,255,255,0.7)"], [stroke="rgba(255,255,255,0.6)"], [stroke="#fff"], [stroke="#ffffff"]) { stroke: var(--look-ink); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.graph, .question-box svg, .oj-explain svg) [fill^="rgba(255,255,255"] { fill: var(--look-ink); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.graph, .question-box svg, .oj-explain svg) :is([stroke="#fbbf24"], [stroke="#ffd700"], [stroke="#ffd54a"]) { stroke: var(--look-warm); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.graph, .question-box svg, .oj-explain svg) :is([fill="#fbbf24"], [fill="#fde68a"], [fill="#ffd700"], [fill="#fff"], [fill="#ffffff"]) { fill: var(--look-warm); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.graph, .question-box svg, .oj-explain svg) [stroke="#22c55e"] { stroke: var(--look-success); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.graph, .question-box svg, .oj-explain svg) [fill="#22c55e"] { fill: var(--look-success); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.question-box, .answer-box, .eq-fly-token) :is([style*="color:rgba(255,255,255"], [style*="color: rgba(255, 255, 255"], [style*="color:#fff"], [style*="color: #fff"], [style*="color: rgb(255, 255, 255)"]) { color: var(--look-ink) !important; }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.question-box, .answer-box, .eq-fly-token) :is([style*="color:#ffd700"], [style*="color: #ffd700"], [style*="color: rgb(255, 215, 0)"], [style*="color:#fbbf24"], [style*="color: rgb(251, 191, 36)"]) { color: var(--look-warm) !important; }
@media (max-width: 600px) {
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .nav-row > button { width: auto !important; min-width: 0 !important; flex: 1; }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .mode-grid { gap: 10px; }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .mode-card { min-height: 82px; }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .eq-autocalc-toggle { gap: 4px; font-size: .68em; left: 10px; }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .answer-box-controls { gap: 5px; right: 10px; }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .answer-box-controls .btn-undo { padding-inline: 8px; font-size: .68em; }
}
/* 元ページの!important指定にも合わせ、明るいナビの文字を読める色へ。 */
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(#btn-prev, #btn-restart-top, .shape-nav-next) { color: var(--look-ink) !important; }
@media (max-width: 600px) {
  html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .question-box { padding-top: 64px; }
  html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .q-instruction { font-size: .85em !important; line-height: 1.7; }
  html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .q-instruction .katex { white-space: normal; }
  html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .q-instruction :is(.base, .mord.text, .mord.cjk_fallback) { display: inline; white-space: normal; }
}

/* 移項マスターと同じ、明るい面にも輪郭が残る再スタートボタン。 */
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="simple"]) #btn-restart-top {
  background: var(--look-surface) !important;
  border: 2px solid var(--look-border) !important;
  box-shadow: 0 3px 0 var(--look-shadow) !important;
}
/* 操作待ちの公式も読む対象なので、押せない状態でも文字は薄くしない。
   disabled属性・カーソル・押す順序・アニメーションはそのまま。 */
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="simple"]) .eq-hirei-action.formula:not(.final) { color: var(--look-ink); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .eq-hirei-action.formula:disabled:not(.is-inert) { opacity: 1; }

/* 正解の座標は見本と同じ明るい緑＋黒い縁。点の判定用属性は変更しない。 */
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="simple"]) :is(.graph, .question-box svg, .oj-explain svg) .dot[fill="#22c55e"] {
  fill: #22c55e;
  stroke: #000;
}

/* 方眼の上のヒント・解説の図（右に5／下に3 など）は「黄色い字＋濃紺のふちどり」＝暗い背景用。
   明るい見た目では字だけ見出し色に変わり、濃紺のふちどりが残って不自然だった。ふちどりは紙の色（白）にする（2026-09-25） */
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) svg text.oj-fig { stroke: #fff !important; }

/* グラフをよむ・かくのヒントで方眼に置く格子点の座標（水色 #67e8f9 の svg 文字）は暗い背景用。
   明るい見た目では強調色にして、方眼の線の上でも読めるよう白いふちどりを付ける（2026-09-25） */
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) svg text[fill="#67e8f9"] { fill: var(--look-accent); stroke: #fff; stroke-width: 4px; paint-order: stroke; stroke-linejoin: round; }
/* 座標をよむのヒントの「x座標」「y座標 ○」の字は、暗い背景用の濃紺のふちどりのまま字だけ茶に変わり、不自然で読みにくかった。
   ふちどりを紙の色にする（y=ax² と同じ。2026-09-28） */
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.graph, .question-box svg, .answer-display svg, .read-graph-wrap svg) text[stroke^="rgba(30,27,75"] { stroke: var(--look-surface); }