/* 三平方の金色テーマ。数式と操作位置は元のまま。 */
html[data-math-look="elegant"] {
  --look-bg: #f5eddc; --look-ink: #25324b; --look-muted: #6d675c;
  --look-surface: #fffdf7; --look-soft: #f7eedb; --look-border: #c9ab67;
  --look-accent: #7b591e; --look-accent-soft: #f2e2b9;
  --look-warm: #7b591e; --look-warm-soft: #fff3d5;
  --look-success: #246445; --look-success-soft: #e5f1e5;
  --look-danger: #b1314b; --look-danger-soft: #fae4e7; --look-shadow: #ddcda9;
  --bg: var(--look-bg); --surface: var(--look-surface); --border: var(--look-border);
  --text: var(--look-ink); --subtle: var(--look-muted); --accent: var(--look-accent);
  /* 共通テーマの金属色。 */
  --work-positive-ink: #4b3612; --work-positive-border: #a27c35;
  --work-positive-bg: linear-gradient(135deg, #d3af62, #fff1c2 26%, #ead091 49%, #fff5cf 67%, #d1ad60);
  --work-negative-ink: #62301f; --work-negative-border: #a26b4c;
  --work-negative-bg: linear-gradient(135deg, #c78f6c, #ffe1cd 26%, #e3b18e 49%, #ffe9d8 67%, #c58b68);
  --work-zero-ink: #303f54; --work-zero-border: #8793a4;
  --work-zero-bg: linear-gradient(135deg, #b8c2cf, #f6f8fb 26%, #d4dce5 49%, #fff 67%, #b7c2d0);
  --work-card-radius: 16px; --work-card-shadow: 0 3px 0 #bca77e;
  --work-card-hover-shadow: 0 5px 0 #aa9267; --work-button-radius: 10px;
  --work-choice-bg: linear-gradient(#fffdf7, #faf2df); --work-choice-hover: #f4e5bf; --work-choice-border: #c9ab67;
  --tool-frame: #c9ab67; --tool-radius: 20px; --tool-key-radius: 11px;
  --tool-panel: linear-gradient(145deg, #fffefa, #f0e6cf 76%, #fffaf0);
  --tool-paper: #fffdf7; --tool-display: #fffef9;
  --tool-shadow: inset 0 0 0 2px #fffdf3, 0 5px 0 #b7a078, 0 12px 24px #3c352326;
  --tool-card-shadow: 0 4px 0 #ddcda9;
  --tool-key: linear-gradient(#fff, #faf5e8); --tool-key-frame: #bda26e; --tool-key-shadow: 0 3px 0 #bfaa80;
  --tool-special: #25324b; --tool-special-ink: #f7e5b5;
  --tool-action: var(--work-negative-bg); --tool-action-ink: #62301f;
  --tool-primary: linear-gradient(135deg,#b99246 0%,#f9e8b7 27%,#dec17a 53%,#fff2c9 72%,#c5a05b 100%);
  --tool-primary-ink: #493516; --tool-hint: #f7eedb; --tool-hint-ink: #7b591e;
  --tool-answer: var(--tool-primary); --tool-answer-ink: #493516;
  --tool-dialog-border: #c9ab67; --tool-dialog-shadow: 0 10px 35px #25324b40;
}
html[data-math-look="elegant"] :is(.question-box, .answer-panel, .steps-box) {
  color: var(--look-ink); background: linear-gradient(145deg, #fffefb, #fffdf7 65%, #faf1df);
  border: 2px solid #c9ab67; border-radius: 22px;
  box-shadow: inset 0 0 0 4px #fffdf7, inset 0 0 0 5px #e9d8b1, 0 9px 26px #4b3a2017;
}
html[data-math-look="elegant"] .mode-chip {
  color: #493516; background: var(--tool-primary); border: 1px solid #c9ab67; box-shadow: 0 2px 0 #ad9159;
}
html[data-math-look="elegant"] :is(.btn-undo, .btn-forward) {
  color: #72541f; background: linear-gradient(#fffdf7, #f8efd9); border: 1px solid #c9ab67; box-shadow: 0 2px 0 #c7b38c;
}
html[data-math-look="elegant"] .mode-4 { --jewel-top: #426754; --jewel-base: #254537; }
html[data-math-look="elegant"] .mode-3 { --jewel-top: #735746; --jewel-base: #483a32; }
html[data-math-look="elegant"] .current-mode-label { color: var(--look-muted); }
/* 完了カードには濃紺と金。カード内だけ、説明文も明るい色に切り替える。 */
html[data-math-look="elegant"] :is(.solved-card, .challenge-intro-overlay > div, .kiroku-overlay > div) {
  --look-ink: #fff4d6; --look-muted: #e0d2b2; --look-accent: #f2d48b;
  --look-warm: #f2d48b; --look-success: #b7e3c3;
  --look-accent-soft: #33466a; /* ボタンにマウスを乗せたときの背景。紙の色のままだと金の字がとける（2026-09-25） */
  color: #fff4d6 !important; background: linear-gradient(145deg, #354563, #1b2942) !important;
  border: 3px solid #d8b86e !important; box-shadow: inset 0 0 0 4px #23314a, inset 0 0 0 5px #b99b6155, 0 15px 40px #17213755 !important;
}
@media (max-width: 600px) {
  html[data-math-look="elegant"] :is(.question-box, .answer-panel, .steps-box) { border-radius: 18px; }
}

/* 手書きは黒と明るい赤。履歴の実データと消しゴム動作は元のまま。 */
html[data-math-look="elegant"] body > canvas[style*="z-index: 9998"] { filter: var(--oj-light-ink-filter); }
html[data-math-look="elegant"] .sp-hw-tray {
  background: var(--elegant-paper); border-color: var(--elegant-border);
  box-shadow: inset 0 0 0 2px #fbf3df, 0 4px 14px #4b3a2021;
}
html[data-math-look="elegant"] :is(.sp-hw-main, .sp-hw-tool) {
  color: var(--elegant-ink) !important; background: var(--elegant-paper) !important;
  border-color: var(--elegant-border) !important; box-shadow: 0 2px 6px #4b3a2017 !important;
}
html[data-math-look="elegant"] body.sp-hw-on .sp-hw-main { background: #ead092 !important; }
html[data-math-look="elegant"] .sp-hw-clear::before { filter: brightness(0) saturate(100%) opacity(.8); }
html[data-math-look="elegant"] button[aria-label="消しゴム（部分消し）に切り替え"]:is([style*="background: rgb(255, 255, 255)"], [style*="background: #fff"]) {
  background: #ead092 !important; border-color: var(--elegant-gold) !important;
}
html[data-math-look="elegant"] button[aria-label="手書き色を切り替え"] {
  background: #fff !important; border-color: var(--elegant-border) !important; box-shadow: none !important;
}
html[data-math-look="elegant"] button[aria-label="手書き色を切り替え"] > span { filter: var(--oj-light-ink-filter); }