/* エレガント：学習面はシャンパンアイボリー、文字は濃紺、縁に金を添える。
   出題・表示条件・数式の書体・ドラッグ位置・手書き履歴は変更しない。 */
html[data-iroiro-pop="elegant"] { --elegant-work-gold-ink: #7b591e; }

html[data-iroiro-pop="elegant"] .question-box,
html[data-iroiro-pop="elegant"] .answer-box {
  color: var(--elegant-ink); background: linear-gradient(145deg, #fffefb, var(--elegant-paper) 65%, #faf1df);
  border: 2px solid var(--elegant-border); border-radius: 22px;
  box-shadow: inset 0 0 0 4px var(--elegant-paper), inset 0 0 0 5px #e9d8b1,
    0 9px 26px #4b3a2017, 0 2px 3px #4b3a2010;
}
html[data-iroiro-pop="elegant"] .question-box,
html[data-iroiro-pop="elegant"] body.sp-ui .question-box { padding-top: 62px; }
html[data-iroiro-pop="elegant"] .answer-box { padding-top: 60px; }
html[data-iroiro-pop="elegant"] :is(.q-text, .choice-title) { color: var(--elegant-ink); }
html[data-iroiro-pop="elegant"] :is(.q-note, .calc-note, .calc-note-sub) { color: var(--elegant-muted); }
/* 問題文の中の直書きの色（「（長さの単位は cm）」の白 60% など）と、文字 x のオレンジは、明るい紙では読めない。ポップ・シンプルと同じ扱いに（2026-09-25） */
html[data-iroiro-pop="elegant"] .q-text [style*="color"] { color: var(--elegant-muted) !important; }
html[data-iroiro-pop="elegant"] .mvar-plain { color: #9a4a10; }
html[data-iroiro-pop="elegant"] :is(.q-hint, .choice-wrong-hint, #step-results) { color: var(--elegant-work-gold-ink); }
html[data-iroiro-pop="elegant"] .calc-note [style*="color"] { color: var(--elegant-ink) !important; }
html[data-iroiro-pop="elegant"] .calc-note > [style*="color"] { color: var(--elegant-work-gold-ink) !important; }
html[data-iroiro-pop="elegant"] :is(.q-hint, .choice-wrong-hint, #step-results) [style*="color"] { color: var(--elegant-work-gold-ink) !important; }
html[data-iroiro-pop="elegant"] .hint-text { color: var(--elegant-work-gold-ink) !important; }
html[data-iroiro-pop="elegant"] .hint-text [style*="color"] { color: var(--elegant-work-gold-ink) !important; }
html[data-iroiro-pop="elegant"] .hint-text:is([style*="#6ee7b7"], [style*="110, 231, 183"]) { color: var(--elegant-success) !important; }
html[data-iroiro-pop="elegant"] .hint-text:is([style*="#fca5a5"], [style*="252, 165, 165"]) { color: var(--elegant-danger) !important; }

/* 小さなラベルと問題の道具。金の面にも濃い文字を置く。 */
html[data-iroiro-pop="elegant"] .mode-chip {
  color: var(--elegant-ink); background: linear-gradient(135deg, #fbf2d7, #ebd39b);
  border: 1px solid var(--elegant-border); border-radius: 9px;
  box-shadow: inset 0 1px #fffaf0, 0 2px 5px #7b591e1c;
}
html[data-iroiro-pop="elegant"] :is(.answer-btn, .answer-input-btn, .tool-btn) {
  color: var(--elegant-ink); background: linear-gradient(180deg, #fffdf7, #f5e7c7);
  border: 1.5px solid var(--elegant-border); border-radius: 10px;
  box-shadow: inset 0 1px #fff, 0 2px 5px #7b591e17;
}
html[data-iroiro-pop="elegant"] .answer-btn { background: linear-gradient(135deg, #fff3ce, #e6c681); }
html[data-iroiro-pop="elegant"] :is(.answer-btn, .answer-input-btn, .tool-btn):hover { color: var(--elegant-ink); background: #f2dfb2; }
html[data-iroiro-pop="elegant"] :is(.answer-input-btn.active, .tool-btn.active) {
  color: #fff6df; background: var(--elegant-ink); border-color: var(--elegant-border);
}
html[data-iroiro-pop="elegant"] .answer-display {
  color: var(--elegant-work-gold-ink); background: var(--elegant-paper);
  border-color: var(--elegant-border); border-radius: 13px;
  box-shadow: inset 0 0 0 3px #f8efd9, 0 4px 12px #4b3a2021;
}
html[data-iroiro-pop="elegant"] .restart-btn {
  color: var(--elegant-ink); background: var(--elegant-paper);
  border-color: var(--elegant-border); border-radius: 9px;
  box-shadow: inset 0 1px #fff, 0 2px 5px #7b591e12;
}
html[data-iroiro-pop="elegant"] .restart-btn:hover:not(:disabled) { background: #f4e6c7; border-color: var(--elegant-gold); }
html[data-iroiro-pop="elegant"] .restart-btn:disabled,
html[data-iroiro-pop="elegant"] .restart-btn:disabled:hover { background: var(--elegant-paper); box-shadow: none; }

/* 選択肢はクリーム色の札。正解・不正解の意味は緑と赤で残す。 */
html[data-iroiro-pop="elegant"] .choice-btn {
  color: var(--elegant-ink); background: linear-gradient(180deg, #fffefb, #faf1dc);
  border: 1.5px solid var(--elegant-border); border-radius: 15px;
  box-shadow: inset 0 0 0 3px #fffdf4, inset 0 0 0 4px #ead9b7, 0 3px 8px #6c51211a;
}
html[data-iroiro-pop="elegant"] .choice-btn:hover:not(:disabled) {
  color: var(--elegant-ink); background: #f8e9c5; border-color: var(--elegant-gold);
}
html[data-iroiro-pop="elegant"] .choice-btn.correct {
  color: var(--elegant-success); background: #e7f4e9; border-color: #71977c;
  box-shadow: inset 0 0 0 3px #f6fff5, inset 0 0 0 4px #afccb2, 0 3px 8px #24644514;
}
html[data-iroiro-pop="elegant"] .choice-btn.wrong {
  color: var(--elegant-danger); background: #fbe8ec; border-color: #bf7181;
  box-shadow: inset 0 0 0 3px #fff7f8, inset 0 0 0 4px #e6bdc6, 0 3px 8px #b1314b14;
}
html[data-iroiro-pop="elegant"] .yakubun-btn {
  color: var(--elegant-work-gold-ink); background: #f8edcf; border-color: var(--elegant-border); border-radius: 9px;
}
html[data-iroiro-pop="elegant"] .yaku-line { background: var(--elegant-work-gold-ink); }
html[data-iroiro-pop="elegant"] .yaku-new { color: var(--elegant-work-gold-ink); }

/* SVG属性を保持したまま、時計・並び・表・補助図を読みやすい線へ置換する。 */
html[data-iroiro-pop="elegant"] :is(#figure, #tenkai-figure) [stroke="#e2e8f0"] { stroke: var(--elegant-ink); }
html[data-iroiro-pop="elegant"] :is(#figure, #tenkai-figure) [stroke="rgba(226,232,240,0.55)"] { stroke: #867b68; }
html[data-iroiro-pop="elegant"] :is(#figure, #tenkai-figure) :is([fill="#e2e8f0"], text[fill="#fff"]) { fill: var(--elegant-ink); }
html[data-iroiro-pop="elegant"] :is(#figure, #tenkai-figure) :is([stroke="#fbbf24"], [stroke="#fb923c"]) { stroke: var(--elegant-gold); }
html[data-iroiro-pop="elegant"] :is(#figure, #tenkai-figure) :is([fill="#fbbf24"], [fill="#fb923c"]) { fill: var(--elegant-gold); }
html[data-iroiro-pop="elegant"] :is(#figure, #tenkai-figure) :is(text[fill="#fbbf24"], text[fill="#fb923c"]) { fill: var(--elegant-work-gold-ink); }
html[data-iroiro-pop="elegant"] :is(#figure, #tenkai-figure) :is([fill="rgba(168,85,247,0.10)"], [fill="rgba(255,255,255,0.04)"]) { fill: var(--elegant-paper); }
html[data-iroiro-pop="elegant"] #figure ellipse[fill="rgba(168,85,247,0.10)"] { stroke: var(--elegant-border); }
html[data-iroiro-pop="elegant"] :is(#figure, #tenkai-figure) [fill="rgba(168,85,247,0.14)"] { fill: #f5e7c8; }
html[data-iroiro-pop="elegant"] :is(#figure, #tenkai-figure) [fill="rgba(168,85,247,0.22)"] { fill: #ecdbb1; }
html[data-iroiro-pop="elegant"] :is(#figure, #tenkai-figure) [fill="rgba(56,189,248,0.18)"] { fill: #eaf0f4; }
html[data-iroiro-pop="elegant"] :is(#figure, #tenkai-figure) [fill="rgba(251,146,60,0.55)"] { fill: #ecc781; }
html[data-iroiro-pop="elegant"] :is(#figure, #tenkai-figure) [fill="rgba(251,146,60,0.30)"] { fill: #ffedb6; }

/* 手書きは黒と明るい赤。履歴の実データと消しゴム動作は元のまま。 */
html[data-iroiro-pop="elegant"] body > canvas[style*="z-index: 9998"] { filter: var(--oj-light-ink-filter); }
html[data-iroiro-pop="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-iroiro-pop="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-iroiro-pop="elegant"] body.sp-hw-on .sp-hw-main { background: #ead092 !important; }
html[data-iroiro-pop="elegant"] .sp-hw-clear::before { filter: brightness(0) saturate(100%) opacity(.8); }
html[data-iroiro-pop="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-iroiro-pop="elegant"] button[aria-label="手書き色を切り替え"] {
  background: #fff !important; border-color: var(--elegant-border) !important; box-shadow: none !important;
}
html[data-iroiro-pop="elegant"] button[aria-label="手書き色を切り替え"] > span { filter: var(--oj-light-ink-filter); }

@media (max-width: 600px) {
  html[data-iroiro-pop="elegant"] :is(.question-box, .answer-box) { border-radius: 18px; }
  html[data-iroiro-pop="elegant"] .q-text { padding-inline: 4px; }
  html[data-iroiro-pop="elegant"] .q-text .q-text-line { max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
  html[data-iroiro-pop="elegant"] .choice-btn { border-radius: 13px; }
}