/* 算数計算マスター：明るいテーマの問題・筆算・解答入力。
   計算の位置、表示順、スクロール、ドラッグには手を加えず配色だけを切り替える。 */
html:is([data-iroiro-pop="game"], [data-iroiro-pop="pop"], [data-iroiro-pop="elegant"], [data-iroiro-pop="simple"]) {
  --calc-step-bg: #fff2cb;
  --calc-success-bg: #e6f6df;
  --calc-danger-bg: #fff0ed;
  --calc-pair-blue: #0878b3;
  --calc-pair-purple: #8844bc;
  --calc-pair-orange: #b65b08;
}

/* このアプリの問題ボタンは通常の行にあるため、他アプリ用の上余白は不要。 */
html:is([data-iroiro-pop="game"], [data-iroiro-pop="pop"], [data-iroiro-pop="elegant"], [data-iroiro-pop="simple"]) .question-box,
html:is([data-iroiro-pop="game"], [data-iroiro-pop="pop"], [data-iroiro-pop="elegant"], [data-iroiro-pop="simple"]) body.sp-ui .question-box { padding-top: 14px; }
html:is([data-iroiro-pop="game"], [data-iroiro-pop="pop"], [data-iroiro-pop="elegant"], [data-iroiro-pop="simple"]) :is(.question-expr, .q-op, .work-area) { color: var(--calc-ink); }
html:is([data-iroiro-pop="game"], [data-iroiro-pop="pop"], [data-iroiro-pop="elegant"], [data-iroiro-pop="simple"]) .mode-chip {
  color: var(--calc-accent); background: var(--calc-soft);
}
html:is([data-iroiro-pop="game"], [data-iroiro-pop="pop"], [data-iroiro-pop="elegant"], [data-iroiro-pop="simple"]) .oj-sample-tag { color: var(--calc-warm); }
html:is([data-iroiro-pop="game"], [data-iroiro-pop="pop"], [data-iroiro-pop="elegant"], [data-iroiro-pop="simple"]) :is(.btn-answer, .btn-ansin) {
  color: var(--calc-ink); background: var(--calc-soft); border-color: var(--calc-border);
}
html:is([data-iroiro-pop="game"], [data-iroiro-pop="pop"], [data-iroiro-pop="elegant"], [data-iroiro-pop="simple"]) .btn-answer,
html:is([data-iroiro-pop="game"], [data-iroiro-pop="pop"], [data-iroiro-pop="elegant"], [data-iroiro-pop="simple"]) .btn-answer:hover {
  color: var(--calc-warm); background: var(--calc-step-bg); border-color: #bc8832;
}
/* カーソルをのせても薄くしない：もとの色のまま少し暗く（前は白に近いパネルの色に変わって薄く見えた。2026-10-07の指示） */
html:is([data-iroiro-pop="game"], [data-iroiro-pop="pop"], [data-iroiro-pop="elegant"], [data-iroiro-pop="simple"]) .btn-ansin:hover { filter: brightness(0.95); }
html:is([data-iroiro-pop="game"], [data-iroiro-pop="pop"], [data-iroiro-pop="elegant"], [data-iroiro-pop="simple"]) .btn-ansin.active {
  color: var(--calc-danger); background: var(--calc-danger-bg); border-color: var(--calc-danger);
}
html:is([data-iroiro-pop="game"], [data-iroiro-pop="pop"], [data-iroiro-pop="elegant"], [data-iroiro-pop="simple"]) .answer-reveal {
  color: var(--calc-warm); background: #fff9e8; border-color: #bc8832;
  box-shadow: 0 4px 10px var(--calc-shadow);
}

/* 筆算の紙面。薄い背景と濃い数字で、途中の色分けも読みやすくする。 */
html:is([data-iroiro-pop="game"], [data-iroiro-pop="pop"], [data-iroiro-pop="elegant"], [data-iroiro-pop="simple"]) .work-wrap {
  color: var(--calc-ink); background: var(--calc-panel); border-color: var(--calc-border);
  box-shadow: 0 5px 0 var(--calc-shadow);
}
html:is([data-iroiro-pop="game"], [data-iroiro-pop="simple"]) .work-wrap { border: 3px solid var(--calc-ink); border-radius: 13px; box-shadow: 5px 5px 0 var(--calc-shadow); }
html[data-iroiro-pop="pop"] .work-wrap { border-width: 2px; border-radius: 24px; }
html:is([data-iroiro-pop="game"], [data-iroiro-pop="pop"], [data-iroiro-pop="elegant"], [data-iroiro-pop="simple"]) :is(.work-title, .block-label, .work-footer, .tap-hint, .div-methods .dm-label) { color: var(--calc-muted); }
html:is([data-iroiro-pop="game"], [data-iroiro-pop="pop"], [data-iroiro-pop="elegant"], [data-iroiro-pop="simple"]) :is(.wbtn, .dm-btn) {
  color: var(--calc-ink); background: var(--calc-soft); border-color: var(--calc-border);
}
html:is([data-iroiro-pop="game"], [data-iroiro-pop="pop"], [data-iroiro-pop="elegant"], [data-iroiro-pop="simple"]) :is(.wbtn:hover:not(:disabled), .dm-btn:hover) { filter: brightness(0.95); }
html:is([data-iroiro-pop="game"], [data-iroiro-pop="pop"], [data-iroiro-pop="elegant"], [data-iroiro-pop="simple"]) :is(.wbtn.primary, .wbtn.primary:hover:not(:disabled), .btn-worknext) {
  color: #573100; background: #ffcf72; border-color: #bc8832; box-shadow: 0 3px 0 var(--calc-shadow);
}
html:is([data-iroiro-pop="game"], [data-iroiro-pop="pop"], [data-iroiro-pop="elegant"], [data-iroiro-pop="simple"]) .dm-btn.active {
  color: #fff; background: var(--calc-accent); border-color: var(--calc-accent); box-shadow: 0 3px 0 var(--calc-shadow);
}
html:is([data-iroiro-pop="game"], [data-iroiro-pop="pop"], [data-iroiro-pop="elegant"], [data-iroiro-pop="simple"]) :is(.fude-cell.op, .fm-wrap, .fm-small, .fm-miniden, .fude-smallcarry, .fude-carryin) { color: var(--calc-ink); }
html:is([data-iroiro-pop="game"], [data-iroiro-pop="pop"], [data-iroiro-pop="elegant"], [data-iroiro-pop="simple"]) :is(.fude-cell.cur, .fude-cell.cur-w, .fude-cell .count-mark, .fm-small.cur, .fm-cell.fm-cur, .fm-miniden.cur, .fude-smallcarry.cur-small, .fude-carryin.cur-small, .q-above, .cmb-hi, .done-answer, .fg-num-factor, .fg-den-factor) {
  color: var(--calc-warm); text-shadow: none;
}
html:is([data-iroiro-pop="game"], [data-iroiro-pop="pop"], [data-iroiro-pop="elegant"], [data-iroiro-pop="simple"]) .fude-cell.cur::after { border-color: #bd790e; }
html:is([data-iroiro-pop="game"], [data-iroiro-pop="pop"], [data-iroiro-pop="elegant"], [data-iroiro-pop="simple"]) :is(.fude-cell.green, .fude-borrow1, .fude-smallcarry.green, .green-note, .done-badge) { color: var(--calc-success); }
html:is([data-iroiro-pop="game"], [data-iroiro-pop="pop"], [data-iroiro-pop="elegant"], [data-iroiro-pop="simple"]) .fm-green { color: var(--calc-success) !important; }
html:is([data-iroiro-pop="game"], [data-iroiro-pop="pop"], [data-iroiro-pop="elegant"], [data-iroiro-pop="simple"]) :is(.fude-cell.struck-big, .fude-smallcarry.struck) { color: var(--calc-muted); }
html:is([data-iroiro-pop="game"], [data-iroiro-pop="pop"], [data-iroiro-pop="elegant"], [data-iroiro-pop="simple"]) :is(.fude-cell.struck-big, .fude-smallcarry.struck, .div-strike, .dot.struck)::after { background: var(--calc-danger); }
html:is([data-iroiro-pop="game"], [data-iroiro-pop="pop"], [data-iroiro-pop="elegant"], [data-iroiro-pop="simple"]) .fude-cell .dot.struck::after { background: var(--calc-danger); }
html:is([data-iroiro-pop="game"], [data-iroiro-pop="pop"], [data-iroiro-pop="elegant"], [data-iroiro-pop="simple"]) :is(.dot.cur, .fude-cell .dot.cur, .fm-minibar.cur) { background: var(--calc-warm); box-shadow: none; }
html:is([data-iroiro-pop="game"], [data-iroiro-pop="pop"], [data-iroiro-pop="elegant"], [data-iroiro-pop="simple"]) :is(.q-above.cur, .fude-cell .count-mark.cur) { text-shadow: none; }
html:is([data-iroiro-pop="game"], [data-iroiro-pop="pop"], [data-iroiro-pop="elegant"], [data-iroiro-pop="simple"]) :is(.fude-line, .fm-bar, .fm-minibar) { background: var(--calc-ink); }
html:is([data-iroiro-pop="game"], [data-iroiro-pop="pop"], [data-iroiro-pop="elegant"], [data-iroiro-pop="simple"]) .fm-minibar.cur { background: var(--calc-warm); }
html:is([data-iroiro-pop="game"], [data-iroiro-pop="pop"], [data-iroiro-pop="elegant"], [data-iroiro-pop="simple"]) .div-bracket .div-curve path { stroke: var(--calc-ink); }
html:is([data-iroiro-pop="game"], [data-iroiro-pop="pop"], [data-iroiro-pop="elegant"], [data-iroiro-pop="simple"]) .div-arc-svg path { stroke: var(--calc-warm); }
html:is([data-iroiro-pop="game"], [data-iroiro-pop="pop"], [data-iroiro-pop="elegant"], [data-iroiro-pop="simple"]) .div-arc-num { color: var(--calc-warm); }
/* 小数を分数に直すときの「小数点をうつす」弧（.shift-arc）は style に #fbbf24 の直書きで、白地に黄色で見えなかった
   （2026-10-04 本人の指摘・6.5 − 4/3 の「分母の小数点も右に 1 けたうつそう」）。わり算の弧と同じ色に */
html:is([data-iroiro-pop="game"], [data-iroiro-pop="pop"], [data-iroiro-pop="elegant"], [data-iroiro-pop="simple"]) .shift-arc { border-color: var(--calc-warm) !important; }
html:is([data-iroiro-pop="game"], [data-iroiro-pop="pop"], [data-iroiro-pop="elegant"], [data-iroiro-pop="simple"]) :is(.col-highlight, .div-qbox) { border-color: #bd790e; background: #f8c44d1c; }
html:is([data-iroiro-pop="game"], [data-iroiro-pop="pop"], [data-iroiro-pop="elegant"], [data-iroiro-pop="simple"]) :is(.fm-box, .fm-small.fm-box-sm, .fm-miniden.fm-box-sm) { outline-color: #bd790e; background: var(--calc-step-bg); }

/* 約分の対応する組は赤・青・紫・橙の区別を保つ。 */
html:is([data-iroiro-pop="game"], [data-iroiro-pop="pop"], [data-iroiro-pop="elegant"], [data-iroiro-pop="simple"]) .fm-strike { background: var(--calc-danger); box-shadow: none; }
html:is([data-iroiro-pop="game"], [data-iroiro-pop="pop"], [data-iroiro-pop="elegant"], [data-iroiro-pop="simple"]) .fm-strike.green { background: var(--calc-success) !important; }
html:is([data-iroiro-pop="game"], [data-iroiro-pop="pop"], [data-iroiro-pop="elegant"], [data-iroiro-pop="simple"]) .fm-strike.pair-1 { background: var(--calc-danger) !important; }
html:is([data-iroiro-pop="game"], [data-iroiro-pop="pop"], [data-iroiro-pop="elegant"], [data-iroiro-pop="simple"]) .fm-strike.pair-2 { background: var(--calc-pair-blue) !important; }
html:is([data-iroiro-pop="game"], [data-iroiro-pop="pop"], [data-iroiro-pop="elegant"], [data-iroiro-pop="simple"]) .fm-strike.pair-3 { background: var(--calc-pair-purple) !important; }
html:is([data-iroiro-pop="game"], [data-iroiro-pop="pop"], [data-iroiro-pop="elegant"], [data-iroiro-pop="simple"]) .fm-strike.pair-4 { background: var(--calc-pair-orange) !important; }
html:is([data-iroiro-pop="game"], [data-iroiro-pop="pop"], [data-iroiro-pop="elegant"], [data-iroiro-pop="simple"]) .fm-strike.cur { box-shadow: none; }
html:is([data-iroiro-pop="game"], [data-iroiro-pop="pop"], [data-iroiro-pop="elegant"], [data-iroiro-pop="simple"]) .frac-arrow-path { stroke: var(--calc-danger); }
html:is([data-iroiro-pop="game"], [data-iroiro-pop="pop"], [data-iroiro-pop="elegant"], [data-iroiro-pop="simple"]) .frac-arrow-svg marker path { fill: var(--calc-danger); }
html:is([data-iroiro-pop="game"], [data-iroiro-pop="pop"], [data-iroiro-pop="elegant"], [data-iroiro-pop="simple"]) body > .fm-cell { color: var(--calc-warm) !important; text-shadow: none !important; }

html:is([data-iroiro-pop="game"], [data-iroiro-pop="pop"], [data-iroiro-pop="elegant"], [data-iroiro-pop="simple"]) :is(.inline-cap, .work-caption, .tap-hint.done-state) { color: var(--calc-warm); }
html:is([data-iroiro-pop="game"], [data-iroiro-pop="pop"], [data-iroiro-pop="elegant"], [data-iroiro-pop="simple"]) .work-caption { background: var(--calc-step-bg); }
html:is([data-iroiro-pop="game"], [data-iroiro-pop="pop"], [data-iroiro-pop="elegant"], [data-iroiro-pop="simple"]) .green-note .gn-em { background: var(--calc-success-bg); }
/* 既存の計算処理が生成する説明文の直接指定色も、その意味を保って置き換える。 */
html:is([data-iroiro-pop="game"], [data-iroiro-pop="pop"], [data-iroiro-pop="elegant"], [data-iroiro-pop="simple"]) :is(.work-area, .work-caption) :is([style*="color:#fff"], [style*="color: #fff"], [style*="color: rgb(255, 255, 255)"]) { color: var(--calc-ink) !important; }
html:is([data-iroiro-pop="game"], [data-iroiro-pop="pop"], [data-iroiro-pop="elegant"], [data-iroiro-pop="simple"]) .work-area > [style*="color: rgba(255, 255, 255"] { color: var(--calc-muted) !important; }
html:is([data-iroiro-pop="game"], [data-iroiro-pop="pop"], [data-iroiro-pop="elegant"], [data-iroiro-pop="simple"]) :is(.work-area, .work-caption, .tap-hint) :is([style*="#fde047"], [style*="253, 224, 71"]) { color: var(--calc-warm) !important; }
html:is([data-iroiro-pop="game"], [data-iroiro-pop="pop"], [data-iroiro-pop="elegant"], [data-iroiro-pop="simple"]) :is(.work-area, .work-caption, .tap-hint) :is([style*="#4ade80"], [style*="74, 222, 128"]) { color: var(--calc-success) !important; }
html:is([data-iroiro-pop="game"], [data-iroiro-pop="pop"], [data-iroiro-pop="elegant"], [data-iroiro-pop="simple"]) :is(.question-expr, .work-area) :is([style*="#fca5a5"], [style*="252, 165, 165"]) { color: var(--calc-danger) !important; }
/* 分数の計算の最後の「完了！☑️」（緑）と、0や1の計算の一言（黄）は、計算の枠の外の #tap-hint に直書きの色で出る。
   上の2つの規則に .tap-hint を足した（2026-10-04 点検。白地に薄い緑・黄で読みにくかった） */
/* ステップ入力の答えの枠（.stepin-box）の正解・まちがいの色。暗い見た目用の薄い緑・赤のままだと白地で枠が見えない（2026-10-04 点検） */
html:is([data-iroiro-pop="game"], [data-iroiro-pop="pop"], [data-iroiro-pop="elegant"], [data-iroiro-pop="simple"]) .stepin-box.ok { border-color: var(--calc-success); background: var(--calc-success-bg); }
html:is([data-iroiro-pop="game"], [data-iroiro-pop="pop"], [data-iroiro-pop="elegant"], [data-iroiro-pop="simple"]) .stepin-box.err { border-color: var(--calc-danger); background: var(--calc-danger-bg); }
/* 筆算の中の ？（.stepin-cellbox）も同じ。明るい見た目のふだんの色の規則（index.html）のほうが強く、正解・まちがいの色が出なかった */
html:is([data-iroiro-pop="game"], [data-iroiro-pop="pop"], [data-iroiro-pop="elegant"], [data-iroiro-pop="simple"]) .stepin-cellbox.ok { border-color: var(--calc-success); color: var(--calc-success); background: var(--calc-success-bg); }
html:is([data-iroiro-pop="game"], [data-iroiro-pop="pop"], [data-iroiro-pop="elegant"], [data-iroiro-pop="simple"]) .stepin-cellbox.err { border-color: var(--calc-danger); color: var(--calc-danger); background: var(--calc-danger-bg); }

/* 答え入力のテンキー。位置やドラッグ用のスタイルは元のまま。 */
html:is([data-iroiro-pop="game"], [data-iroiro-pop="pop"], [data-iroiro-pop="elegant"], [data-iroiro-pop="simple"]) #ans-tenkey .ansk-content {
  color: var(--calc-ink); background: var(--calc-soft); border-color: var(--calc-border);
  box-shadow: 0 6px 0 var(--calc-shadow), 0 12px 24px #23304a18;
}
html:is([data-iroiro-pop="game"], [data-iroiro-pop="simple"]) #ans-tenkey .ansk-content { border: 3px solid var(--calc-ink); border-radius: 13px; }
html[data-iroiro-pop="pop"] #ans-tenkey .ansk-content { border-width: 2px; border-radius: 22px; }
html:is([data-iroiro-pop="game"], [data-iroiro-pop="pop"], [data-iroiro-pop="elegant"], [data-iroiro-pop="simple"]) #ans-tenkey :is(.ansk-title, .ansk-close, .ansk-disp) { color: var(--calc-ink); }
html:is([data-iroiro-pop="game"], [data-iroiro-pop="pop"], [data-iroiro-pop="elegant"], [data-iroiro-pop="simple"]) #ans-tenkey .ansk-expr { color: var(--calc-accent); }
html:is([data-iroiro-pop="game"], [data-iroiro-pop="pop"], [data-iroiro-pop="elegant"], [data-iroiro-pop="simple"]) #ans-tenkey .ansk-disp-wrap { background: #fff; border-color: var(--calc-border); }
html:is([data-iroiro-pop="game"], [data-iroiro-pop="pop"], [data-iroiro-pop="elegant"], [data-iroiro-pop="simple"]) #ans-tenkey .ansk-disp-wrap.error { background: var(--calc-danger-bg); border-color: var(--calc-danger); }
html:is([data-iroiro-pop="game"], [data-iroiro-pop="pop"], [data-iroiro-pop="elegant"], [data-iroiro-pop="simple"]) #ans-tenkey .ansk-disp-wrap.success { background: var(--calc-success-bg); border-color: var(--calc-success); }
html:is([data-iroiro-pop="game"], [data-iroiro-pop="pop"], [data-iroiro-pop="elegant"], [data-iroiro-pop="simple"]) #ans-tenkey .ansk-btn,
html:is([data-iroiro-pop="game"], [data-iroiro-pop="pop"], [data-iroiro-pop="elegant"], [data-iroiro-pop="simple"]) #ans-tenkey .ansk-btn:active {
  color: var(--calc-ink); background: #fff; border-color: var(--calc-border); box-shadow: 0 2px 0 var(--calc-shadow);
}
html:is([data-iroiro-pop="game"], [data-iroiro-pop="pop"], [data-iroiro-pop="elegant"], [data-iroiro-pop="simple"]) #ans-tenkey .ansk-btn:hover { filter: brightness(0.95); }
html:is([data-iroiro-pop="game"], [data-iroiro-pop="pop"], [data-iroiro-pop="elegant"], [data-iroiro-pop="simple"]) #ans-tenkey .ansk-btn.act,
html:is([data-iroiro-pop="game"], [data-iroiro-pop="pop"], [data-iroiro-pop="elegant"], [data-iroiro-pop="simple"]) #ans-tenkey .ansk-btn.act:active {
  color: var(--calc-accent); background: var(--calc-panel);
}
html:is([data-iroiro-pop="game"], [data-iroiro-pop="pop"], [data-iroiro-pop="elegant"], [data-iroiro-pop="simple"]) #ans-tenkey .ansk-btn.rem-key,
html:is([data-iroiro-pop="game"], [data-iroiro-pop="pop"], [data-iroiro-pop="elegant"], [data-iroiro-pop="simple"]) #ans-tenkey .ansk-btn.rem-key:is(:hover, :active) {
  color: #13566d; background: #d5f3ff; border-color: #67a6bb;
}
html:is([data-iroiro-pop="game"], [data-iroiro-pop="pop"], [data-iroiro-pop="elegant"], [data-iroiro-pop="simple"]) #ans-tenkey .ansk-win-label { color: var(--calc-success); }
html:is([data-iroiro-pop="game"], [data-iroiro-pop="pop"], [data-iroiro-pop="elegant"], [data-iroiro-pop="simple"]) #ans-tenkey .ansk-win-main { color: #573100; background: #ffcf72; }
html:is([data-iroiro-pop="game"], [data-iroiro-pop="pop"], [data-iroiro-pop="elegant"], [data-iroiro-pop="simple"]) #ans-tenkey .ansk-win-sub { color: var(--calc-danger); background: var(--calc-danger-bg); }
html:is([data-iroiro-pop="game"], [data-iroiro-pop="pop"], [data-iroiro-pop="elegant"], [data-iroiro-pop="simple"]) #ans-tenkey .ansk-win-close { color: var(--calc-ink); background: #fff; }
html:is([data-iroiro-pop="game"], [data-iroiro-pop="pop"], [data-iroiro-pop="elegant"], [data-iroiro-pop="simple"]) #ans-tenkey .ansk-win-hint { color: var(--calc-muted); }

/* 式と説明文の枠。基本解説は通常どおり開閉できる。 */
html:is([data-iroiro-pop="game"], [data-iroiro-pop="pop"], [data-iroiro-pop="elegant"], [data-iroiro-pop="simple"]) .oj-explain {
  color: var(--calc-ink); background: #fffaf0; border-color: #bc8832;
}
html:is([data-iroiro-pop="game"], [data-iroiro-pop="pop"], [data-iroiro-pop="elegant"], [data-iroiro-pop="simple"]) .oj-explain :is(.ai-steps, .ai-line .katex) { color: var(--calc-ink); }
html:is([data-iroiro-pop="game"], [data-iroiro-pop="pop"], [data-iroiro-pop="elegant"], [data-iroiro-pop="simple"]) .oj-explain .ai-reason { color: var(--calc-warm); }
html:is([data-iroiro-pop="game"], [data-iroiro-pop="pop"], [data-iroiro-pop="elegant"], [data-iroiro-pop="simple"]) :is(.ai-explain-btn, .oj-explain .oj-explain-x, .oj-explain .oj-explain-x:hover) {
  color: var(--calc-accent); background: var(--calc-soft); border-color: var(--calc-border);
}
html:is([data-iroiro-pop="game"], [data-iroiro-pop="pop"], [data-iroiro-pop="elegant"], [data-iroiro-pop="simple"]) .oj-q { color: var(--calc-ink); background: var(--calc-soft); }
html:is([data-iroiro-pop="game"], [data-iroiro-pop="pop"], [data-iroiro-pop="elegant"], [data-iroiro-pop="simple"]) .oj-a { color: var(--calc-warm); }
html:is([data-iroiro-pop="game"], [data-iroiro-pop="pop"], [data-iroiro-pop="elegant"], [data-iroiro-pop="simple"]) .oj-caution { color: var(--calc-danger); }