/* 資料専用：度数分布表・並べ替え・箱ひげ図の状態と計算は保ち、配色を切り替える。 */
.appearance-switch { margin: 0 0 20px; }
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"]) .subtitle { opacity: 1; }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.q-text, .chuou-instr, .prop-term, .calc-note.flow-note) { 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, .calc-note, .calc-note-sub, .num-deg, .data-unit, .chuou-unit, .sort-label, .sort-placeholder, .prop-guide, .hint-top, .hint-bot, .hint-colon, .hint-eq) { 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, .cell-popup-hint, .saihin-hint-note, .saihin-hint-note small, .prop-colon, .prop-eq, .pc-colon2, .pc-eq2) { color: var(--look-warm); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .q-prompt { color: var(--look-warm) !important; }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .prop-answer { color: var(--look-success); }
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; }
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; }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .mode-btn.active { outline: 2px solid var(--look-accent); outline-offset: 3px; filter: none; }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.formula-btn, .hint-btn, .sort-trigger-btn, .auto-sort-btn, #btn-direct-answer-input, #hyouhon-ans-btn, .prop-top-btn, .restart-btn, .mark-back-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"]) #hyouhon-ans-btn { color: var(--tool-answer-ink); background: var(--tool-answer); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.formula-btn, .hint-btn, .sort-trigger-btn, .auto-sort-btn, #btn-direct-answer-input, #hyouhon-ans-btn, .prop-top-btn, .restart-btn, .mark-back-btn):hover:not(:disabled) { color: var(--look-ink); background: var(--look-accent-soft); border-color: var(--look-accent); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.formula-btn, .hint-btn, .sort-trigger-btn, .auto-sort-btn, #btn-direct-answer-input, #hyouhon-ans-btn, .prop-top-btn, .restart-btn, .mark-back-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(.formula-btn, .hint-btn, .sort-trigger-btn, .auto-sort-btn, #btn-direct-answer-input, #hyouhon-ans-btn, .prop-top-btn, .restart-btn, .mark-back-btn):disabled { box-shadow: none; }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .hint-btn.active { color: var(--look-warm); background: var(--look-warm-soft); box-shadow: inset 0 2px 4px #00000025; }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) #btn-direct-answer-input.active { color: var(--look-danger); background: var(--look-danger-soft); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.calc-pad, .direct-answer-calc, .cell-popup) { 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(.calc-grip, .direct-answer-handle, .cell-popup-handle) { color: var(--look-muted); background: var(--look-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(.direct-answer-handle, .cell-popup-handle)::before { background: var(--look-border); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.num-display, .direct-answer-display, .cell-popup-display) { color: var(--look-ink); background: var(--tool-display); border: 2px solid var(--look-border); border-radius: var(--tool-key-radius); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .direct-answer-display .placeholder { color: var(--look-muted); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.num-btn, .cp-btn, .direct-answer-keypad button, .prop-keypad .key-btn, .prop-op-btn, .prop-solve-btn) { color: var(--look-ink); background: var(--tool-key); border: 2px solid 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(.num-btn.op-btn, .cp-btn.cp-op, .cp-btn.cp-del, .direct-answer-keypad .backspace) { 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(.num-btn.clr-btn, .cp-btn.cp-clear, .direct-answer-keypad .utility, .prop-keypad .key-btn.utility, .cell-popup-close) { color: var(--tool-action-ink); background: var(--tool-action); border-color: var(--tool-key-frame); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.num-btn.eq-btn, .cp-btn.cp-eq) { color: var(--look-success); background: var(--look-success-soft); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.num-btn.submit-btn, .cp-btn.cp-submit, .prop-keypad .key-btn.submit, .prop-op-btn.cross, .prop-solve-btn) { color: var(--tool-primary-ink); background: var(--tool-primary); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.num-btn, .cp-btn, .direct-answer-keypad button, .prop-keypad .key-btn, .prop-op-btn, .prop-solve-btn):hover:not(:disabled) { color: var(--look-ink); background: var(--look-accent-soft); border-color: var(--look-accent); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.num-btn, .cp-btn, .direct-answer-keypad button, .prop-keypad .key-btn, .prop-op-btn, .prop-solve-btn):active:not(:disabled) { transform: translateY(2px); box-shadow: none; }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.num-btn, .cp-btn, .direct-answer-keypad button, .prop-keypad .key-btn, .prop-op-btn, .prop-solve-btn):disabled { box-shadow: none; }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.num-display, .direct-answer-display, .cell-popup-display).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"]) :is(.num-display, .direct-answer-display, .cell-popup-display).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"]) :is(.freq-table, .heikin-table) th { color: var(--look-ink); 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(.freq-table, .heikin-table) td { color: var(--look-ink); 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(.freq-table, .heikin-table) tfoot td { color: var(--look-muted); background: var(--look-soft); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .freq-table .ask-cell { color: var(--look-warm); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .freq-table :is(.ask-row td, tr.hint-hl td:nth-child(2), td.soutai-ans-cell, tr.saihin-hint-row td) { color: var(--look-warm); background: var(--look-warm-soft); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .freq-table .saihin-border-arrow { color: var(--look-warm); text-shadow: 0 0 3px var(--look-surface); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .heikin-table .input-cell { color: var(--look-accent); background: var(--look-accent-soft); border-color: var(--look-border) !important; }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .heikin-table .input-cell.selected { color: var(--look-accent); background: var(--look-soft); border-color: var(--look-accent) !important; box-shadow: inset 0 0 0 2px var(--look-accent); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .heikin-table .input-cell.correct { color: var(--look-success) !important; background: var(--look-success-soft) !important; border-color: var(--look-success) !important; }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .heikin-table .input-cell.oj-shown { color: var(--look-warm) !important; background: var(--look-warm-soft) !important; border-color: var(--look-warm) !important; }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.soutai-formula, .hyouhon-hint-display) { 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"]) :is(.soutai-formula .sf-title, .soutai-formula .sf-eq) { color: var(--look-warm); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.chuou-data, .sorted-row) { color: var(--look-ink); background: var(--look-soft); border-color: var(--look-border); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .sort-area { border-color: var(--look-border); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.data-chip, .prop-slot, .pc-item, .pc-prod, .hint-slot) { color: var(--look-ink); background: var(--tool-key); border-color: var(--look-border); box-shadow: var(--work-card-shadow); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .hint-slot.empty { color: transparent; }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.data-chip.sorted, .chuou-data.sort-active .data-chip:hover) { color: var(--look-accent); background: var(--look-accent-soft); border-color: var(--look-accent); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.data-chip.reject, .prop-slot.reject) { color: var(--look-danger) !important; background: var(--look-danger-soft) !important; border-color: var(--look-danger) !important; }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .prop-slot.active { color: var(--tool-primary-ink); background: var(--tool-primary); border-color: var(--look-warm); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .pm.sl::after { color: var(--look-warm); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.data-chip.q-confirmed.q-q1, .q-memo.q-q1) { color: #146582 !important; background: #d5f3fb !important; border-color: #146582 !important; box-shadow: 0 2px 0 var(--look-shadow); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .quartile-divider.q-q1 { background: #146582; box-shadow: none; }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.data-chip.q-confirmed.q-q2, .q-memo.q-q2) { color: #805417 !important; background: #fff1bd !important; border-color: #805417 !important; box-shadow: 0 2px 0 var(--look-shadow); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .quartile-divider.q-q2 { background: #805417; box-shadow: none; }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.data-chip.q-confirmed.q-q3, .q-memo.q-q3) { color: #9e3063 !important; background: #ffe1ee !important; border-color: #9e3063 !important; box-shadow: 0 2px 0 var(--look-shadow); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .quartile-divider.q-q3 { background: #9e3063; box-shadow: none; }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .data-chip.q-dragging { color: var(--look-warm) !important; background: var(--look-warm-soft) !important; border-color: var(--look-warm) !important; }
/* 解説枠の図（中央値・四分位数の「数のならび」、箱ひげ図の5つの値、標本調査の「外項の積 ＝ 内項の積」）は、
   暗い背景用の色（白 8% の枠に薄い字・薄い黄・水色・桃）のままで、明るい見た目では数も見出しも紙にとけて読めなかった。
   ふつうの数は問題のカードと同じ白い枠、まん中（中央値）は見出し色、四分位数は問題の画面の色分け（上の q-q1〜q3）にそろえる（2026-09-26） */
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .oj-explain .oj-md-num { color: var(--look-ink); background: var(--tool-key); border-color: var(--look-border); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .oj-explain .oj-md-num.is-mid { color: var(--look-warm); background: var(--look-warm-soft); border-color: var(--look-warm); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .oj-explain :is(.oj-md-mark, .oj-md-cap) { color: var(--look-warm); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .oj-explain .oj-md-num.q-q1 { color: #146582; background: #d5f3fb; border-color: #146582; }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .oj-explain .oj-md-num.q-q2 { color: #805417; background: #fff1bd; border-color: #805417; }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .oj-explain .oj-md-num.q-q3 { color: #9e3063; background: #ffe1ee; border-color: #9e3063; }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .oj-explain :is(.oj-md-mark, .oj-md-cap span).q-q1 { color: #146582; }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .oj-explain :is(.oj-md-mark, .oj-md-cap span).q-q2 { color: #805417; }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .oj-explain :is(.oj-md-mark, .oj-md-cap span).q-q3 { color: #9e3063; }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .oj-explain .oj-hako-item { color: var(--look-muted); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .oj-explain .oj-hako-item.is-ask { color: var(--look-warm); }
html[data-math-look="elegant"] :is(.prop-slot, .pc-item, .pc-prod) { color: var(--work-zero-ink); background: var(--work-zero-bg); border-color: var(--work-zero-border); }
html[data-math-look="elegant"] .prop-slot.active { color: var(--work-positive-ink); background: var(--work-positive-bg); border-color: var(--work-positive-border); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) #hyouhon-area { color: var(--look-ink); background: var(--look-surface) !important; border: 2px solid var(--look-border) !important; box-shadow: var(--tool-card-shadow); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.question-box, .answer-box, #hyouhon-area, .cell-popup) :is([style*="color:#fff"], [style*="color: #fff"], [style*="color:rgba(255,255,255"], [style*="color: rgba(255, 255, 255"], [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, #hyouhon-area, .cell-popup) :is([style*="#fbbf24"], [style*="#fde68a"], [style*="251, 191, 36"], [style*="253, 230, 138"]) { color: var(--look-warm) !important; }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.question-box, .answer-box, #hyouhon-area, .cell-popup) :is([style*="#6ee7b7"], [style*="#86efac"], [style*="110, 231, 183"], [style*="134, 239, 172"]) { color: var(--look-success) !important; }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.question-box, .answer-box, #hyouhon-area, .cell-popup) :is([style*="#fca5a5"], [style*="252, 165, 165"]) { color: var(--look-danger) !important; }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .hako-fig :is([stroke="#e2e8f0"], [stroke^="rgba(255,255,255"] ) { stroke: var(--look-ink); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .hako-fig :is([stroke="#facc15"], [stroke^="rgba(251,191,36"] ) { stroke: var(--look-warm); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .hako-fig :is([fill="#e2e8f0"], [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"]) .hako-fig :is([fill="#facc15"], [fill^="rgba(251,191,36"] ) { fill: var(--look-warm); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .hako-fig [stroke="#38bdf8"] { stroke: var(--look-accent); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.bug-modal, .portrait-lock-card) { color: var(--look-ink); background: var(--look-surface); border: 2px solid var(--look-border); box-shadow: var(--tool-dialog-shadow); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .bug-modal h3 { color: var(--look-accent); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .bug-modal textarea { color: var(--look-ink); background: var(--look-soft); border-color: var(--look-border); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .bug-modal .btn-cancel { color: var(--look-ink); background: var(--look-soft); border-color: var(--look-border); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .portrait-lock { color: var(--look-ink); background: var(--look-bg); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.portrait-lock-title, .portrait-lock-app-title strong) { color: var(--look-accent); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.portrait-lock-app-title, .portrait-lock-text, .portrait-lock-continue span) { color: var(--look-muted); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .portrait-lock-continue { color: var(--tool-primary-ink); background: var(--tool-primary); border: 2px solid var(--tool-key-frame); box-shadow: var(--tool-key-shadow); }
@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: 70px; }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .answer-box { padding-top: 64px; }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .nav-row { gap: 6px; width: 100%; }
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; padding-inline: 6px !important; font-size: .76em !important; }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .mode-grid { gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) .mode-btn { padding: 12px 5px; font-size: .82em; }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) :is(.freq-table, .heikin-table) :is(th, td) { padding-inline: 4px; }
}

/* 数字パネルは銀、並べたパネルは金。四分位の確定色は優先する。 */
html[data-math-look="elegant"] .data-chip { color: var(--work-zero-ink); background: var(--work-zero-bg); border-color: var(--work-zero-border); }
html[data-math-look="elegant"] .data-chip.sorted { color: var(--work-positive-ink); background: var(--work-positive-bg); border-color: var(--work-positive-border); }
/* 標本調査の操作枠も、通常の操作枠と同じ輪郭と影にする。 */
html[data-math-look="pop"] #hyouhon-area { background: #e4f4fc !important; border: 3px solid var(--look-ink) !important; border-radius: 13px !important; box-shadow: 5px 5px 0 var(--look-shadow); }
html[data-math-look="pastel"] #hyouhon-area { background: linear-gradient(145deg, #fff2fb, #f5eeff) !important; border: 3px solid #fff !important; border-radius: 28px !important; box-shadow: 0 7px 0 #b399d2, 0 12px 22px #75559b24; }
html[data-math-look="elegant"] #hyouhon-area { background: linear-gradient(145deg, #fffefb, #fffdf7 65%, #faf1df) !important; border-radius: 22px !important; box-shadow: inset 0 0 0 4px #fffdf7, inset 0 0 0 5px #e9d8b1, 0 9px 26px #4b3a2017; }

/* エレガントのクリア・削除・閉じる操作は銅でそろえる。 */
html[data-math-look="elegant"] :is(.num-btn.clr-btn, .cp-btn.cp-clear, .direct-answer-keypad .utility, .prop-keypad .key-btn.utility, .cell-popup-close) {
  color: #62301f;
  background: linear-gradient(135deg, #c78f6c, #ffe1cd 26%, #e3b18e 49%, #ffe9d8 67%, #c58b68);
  border-color: #a26b4c;
  box-shadow: inset 0 1px 0 #fff0e0, 0 3px 0 #a26b4c;
}
html[data-math-look="elegant"] :is(.num-btn.clr-btn, .cp-btn.cp-clear, .direct-answer-keypad .utility, .prop-keypad .key-btn.utility, .cell-popup-close):hover:not(:disabled) { filter: brightness(1.06); }
html[data-math-look="elegant"] :is(.num-btn.clr-btn, .cp-btn.cp-clear, .direct-answer-keypad .utility, .prop-keypad .key-btn.utility, .cell-popup-close):active:not(:disabled) { box-shadow: inset 0 2px 3px #62301f33, 0 1px 0 #a26b4c; }

/* クリア・削除などの操作ボタンを銅の光沢で統一する。 */
html[data-math-look="elegant"] #btn-direct-answer-input.active {
  color: #62301f; background: var(--tool-action); border-color: #a26b4c;
  box-shadow: inset 0 1px #fff0e0, 0 3px 0 #a26b4c;
}
html[data-math-look="elegant"] #btn-direct-answer-input.active:hover:not(:disabled) { filter: brightness(1.06); }
html[data-math-look="elegant"] #btn-direct-answer-input.active:active:not(:disabled) { transform: translateY(2px); box-shadow: inset 0 2px 3px #62301f33, 0 1px 0 #a26b4c; }