/* エレガント：白金の入力パネル、シャンパン色の解説、深紺と金の完了カード。
   位置、表示条件、ドラッグ、正誤判定、数式の書体は既存のまま使う。 */
html[data-iroiro-pop="elegant"] {
  --elegant-metal: linear-gradient(135deg, #b99246 0%, #f9e8b7 27%, #dec17a 53%, #fff2c9 72%, #c5a05b 100%);
  --elegant-metal-ink: #493516;
  --elegant-night: #1b2942;
}

/* 操作ボタンは白金、主ボタンは光の筋が入る金属色。 */
html[data-iroiro-pop="elegant"] :is(.answer-input-btn, .tool-btn) {
  color: var(--elegant-ink); background: linear-gradient(180deg, #fffefa, #f1e7d1);
  border: 1.5px solid var(--elegant-border); border-radius: 10px;
  box-shadow: inset 0 1px 0 #fff, 0 3px 7px #60451418;
}
html[data-iroiro-pop="elegant"] :is(.answer-input-btn:hover, .answer-input-btn.active, .tool-btn:hover, .tool-btn.active) {
  color: #fff2ce; background: linear-gradient(145deg, #354563, #1b2942); border-color: var(--elegant-border);
}
html[data-iroiro-pop="elegant"] .answer-btn {
  color: var(--elegant-metal-ink); background: var(--elegant-metal);
  border: 1.5px solid #9f7b38; border-radius: 10px;
  box-shadow: inset 0 1px 0 #fff5d6, 0 3px 0 #b09252, 0 5px 10px #70532324;
}
html[data-iroiro-pop="elegant"] .answer-btn:hover { background: linear-gradient(135deg, #d2b170, #fff4cd 35%, #e5cc94 65%, #f9e6b6); }
html[data-iroiro-pop="elegant"] .answer-display {
  color: #70531f; background: var(--elegant-paper); border-color: var(--elegant-border);
  border-radius: 12px; box-shadow: inset 0 0 0 2px #f6edda, 0 5px 16px #6045141a;
}

/* テンキーは不透明な白金の面。金縁と細い内側の光で立体感を付ける。 */
html[data-iroiro-pop="elegant"] .calc-pad {
  color: var(--elegant-ink); background: linear-gradient(145deg, #fffefa, #f0e6cf 76%, #fffaf0);
  border: 2px solid var(--elegant-border); border-radius: 20px;
  box-shadow: inset 0 0 0 2px #fffdf3, 0 5px 0 #b7a078, 0 12px 24px #3c352326;
}
html[data-iroiro-pop="elegant"] .calc-grip {
  color: #836833; background: linear-gradient(180deg, #f9efda, #dfc991);
  border-color: #c6ad74; border-radius: 9px; box-shadow: inset 0 1px 0 #fff6db;
}
html[data-iroiro-pop="elegant"] .calc-pad.dragging .calc-grip { background: #e1c98e; }
html[data-iroiro-pop="elegant"] :is(.num-display, .direct-display) {
  color: var(--elegant-ink); background: #fffef9;
  border: 2px solid #bca16c; border-radius: 12px;
  box-shadow: inset 0 2px 4px #75604418;
}
html[data-iroiro-pop="elegant"] :is(.num-unit, .direct-unit, .oj-tlab) { color: var(--elegant-muted); }
html[data-iroiro-pop="elegant"] .oj-tbox { border-color: #c7b899; background: #fffdf7; }
html[data-iroiro-pop="elegant"] .oj-tbox.active {
  color: var(--elegant-ink); border-color: var(--elegant-gold); background: #f6e4b4; box-shadow: 0 0 0 2px #d8bd7d55;
}
html[data-iroiro-pop="elegant"] .num-reject { color: var(--elegant-danger); }
html[data-iroiro-pop="elegant"] :is(.num-display.correct, .direct-display.correct) { color: var(--elegant-success); background: #e8f3e9; border-color: #609875; }
html[data-iroiro-pop="elegant"] :is(.num-display.wrong, .direct-display.wrong) { color: var(--elegant-danger); background: #ffedf0; border-color: #ca7b89; }
html[data-iroiro-pop="elegant"] .num-btn {
  color: var(--elegant-ink); background: linear-gradient(180deg, #fff, #faf5e8);
  border: 1.5px solid #c4ae80; border-radius: 11px;
  box-shadow: inset 0 1px 0 #fff, 0 3px 0 #bfaa80, 0 5px 8px #4d3c1d12;
}
html[data-iroiro-pop="elegant"] .num-btn:hover:not(:disabled) { color: #584018; background: #f6e6bd; border-color: #9f7b38; }
html[data-iroiro-pop="elegant"] .num-btn:active:not(:disabled) { box-shadow: inset 0 2px 4px #7d62352e, 0 1px 0 #bfaa80; }
html[data-iroiro-pop="elegant"] .num-btn.op-btn {
  color: #eeddaf; background: linear-gradient(145deg, #3a4a67, #23324c);
  border-color: #65728a; box-shadow: inset 0 1px 0 #778397, 0 3px 0 #17253c;
}
html[data-iroiro-pop="elegant"] .num-btn.op-btn:hover:not(:disabled) { color: #fff5d6; background: #3b4d6c; border-color: #9aabbc; }
/* クリア・削除などの操作ボタンを銅の光沢で統一する。 */
html[data-iroiro-pop="elegant"] .num-btn.clr-btn {
  color: #62301f; background: linear-gradient(135deg, #c78f6c, #ffe1cd 26%, #e3b18e 49%, #ffe9d8 67%, #c58b68); border-color: #a26b4c;
  box-shadow: inset 0 1px #fff0e0, 0 3px 0 #a26b4c;
}
html[data-iroiro-pop="elegant"] .num-btn.clr-btn:hover:not(:disabled) { color: #62301f; background: linear-gradient(135deg, #c78f6c, #ffe1cd 26%, #e3b18e 49%, #ffe9d8 67%, #c58b68); border-color: #a26b4c; filter: brightness(1.06); }
html[data-iroiro-pop="elegant"] .num-btn.clr-btn:active:not(:disabled) { transform: translateY(2px); box-shadow: inset 0 2px 3px #62301f33, 0 1px 0 #a26b4c; }
html[data-iroiro-pop="elegant"] .num-btn:is(.eq-btn, .submit-btn, .pi-btn) {
  color: var(--elegant-metal-ink); background: var(--elegant-metal); border: 1.5px solid #a78647;
  box-shadow: inset 0 1px 0 #fff6d7, 0 3px 0 #aa8949;
}
html[data-iroiro-pop="elegant"] .num-btn:is(.eq-btn, .submit-btn, .pi-btn):hover:not(:disabled) { color: var(--elegant-metal-ink); background: linear-gradient(135deg, #ecd29a, #fff6d4 45%, #d6b674); }

/* 解説は紙色に濃紺の式、濃い金の説明文。変数の書体には触れない。 */
html[data-iroiro-pop="elegant"] .oj-explain {
  color: var(--elegant-ink); background: var(--elegant-paper);
  border: 1.5px solid var(--elegant-border); border-radius: 18px;
  box-shadow: inset 0 0 0 3px #f7eedb, 0 6px 18px #60451416;
}
html[data-iroiro-pop="elegant"] .oj-explain :is(.ai-steps, .ai-line .katex) { color: var(--elegant-ink); }
html[data-iroiro-pop="elegant"] .oj-explain .ai-reason { color: #806024; }
html[data-iroiro-pop="elegant"] :is(.ai-explain-btn, .oj-explain .oj-explain-x) {
  color: #70531f; background: linear-gradient(180deg, #fff8e4, #eddfbb);
  border-color: var(--elegant-border); border-radius: 10px;
}
html[data-iroiro-pop="elegant"] :is(.ai-explain-btn:hover, .oj-explain .oj-explain-x:hover) { color: #493516; background: #eedca9; }
html[data-iroiro-pop="elegant"] .oj-explain .oj-alt-btn { color: #70531f !important; background: #f7eedb !important; border-color: var(--elegant-border) !important; }
html[data-iroiro-pop="elegant"] .oj-explain :is([style*="color:#fff"], [style*="color: #fff"], [style*="color: rgb(255, 255, 255)"]) { color: var(--elegant-ink) !important; }
html[data-iroiro-pop="elegant"] .oj-explain :is([style*="color:rgba(255,255,255"], [style*="color: rgba(255, 255, 255"]) { color: var(--elegant-muted) !important; }

/* 完了・チャレンジ・記録は、深紺の面を金属色の縁で囲む。 */
html[data-iroiro-pop="elegant"] :is(.solved-overlay, .challenge-intro-overlay, .kiroku-overlay) { background: #0d192bd1 !important; backdrop-filter: blur(5px); }
html[data-iroiro-pop="elegant"] :is(.solved-card, .challenge-intro-overlay > div, .kiroku-overlay > div) {
  color: #fff6e4 !important;
  border: 3px solid transparent !important; border-radius: 24px !important;
  background: radial-gradient(ellipse at 30% 0, #3a4b68, #1b2942 65%, #162136) padding-box,
    linear-gradient(130deg, #b58b3e, #fff1bd 28%, #b68c44 56%, #f4daa0 83%, #b78e46) border-box !important;
  box-shadow: inset 0 0 0 1px #f7db971f, 0 8px 0 #111b2d, 0 22px 55px #080f2459, 0 0 25px #d8b46524 !important;
}
/* 上で面を深紺にしたので、elegant-appearance.css が明るい面向けに決めていた見出し（茶）・説明（灰）・「どの問題で…」（茶）の字色を、深紺の上で読める金・生成りに直す（2026-09-25） */
html[data-iroiro-pop="elegant"] .challenge-intro-overlay > div > div:first-child { color: #f2d48b !important; text-shadow: 0 1px 1px #0d192b; }
html[data-iroiro-pop="elegant"] .challenge-intro-overlay > div > div:nth-child(2) { color: #e0d2b2 !important; }
html[data-iroiro-pop="elegant"] .challenge-intro-overlay > div > div:nth-child(3) { color: #fff4d6 !important; }
html[data-iroiro-pop="elegant"] .solved-label { color: var(--elegant-gold-light); font-weight: 800; }
html[data-iroiro-pop="elegant"] .solved-ans { color: #fff0bf; text-shadow: 0 2px 0 #111c31; }
html[data-iroiro-pop="elegant"] .solved-hint { color: #d3cdbf; }
html[data-iroiro-pop="elegant"] .solved-btn,
html[data-iroiro-pop="elegant"] :is(.challenge-intro-overlay, .kiroku-overlay) button,
html[data-iroiro-pop="elegant"] #challenge-solved-extra button {
  color: #f7e5b5 !important; background: linear-gradient(160deg, #354561, #24324c) !important;
  border: 1.5px solid #b39a61 !important; border-radius: 12px !important;
  box-shadow: inset 0 1px 0 #8290a033, 0 3px 0 #101d31 !important;
}
html[data-iroiro-pop="elegant"] .solved-btn:hover,
html[data-iroiro-pop="elegant"] :is(.challenge-intro-overlay, .kiroku-overlay) button:hover:not(:disabled),
html[data-iroiro-pop="elegant"] #challenge-solved-extra button:hover:not(:disabled) { background: #3f506d !important; color: #fff7dd !important; }
html[data-iroiro-pop="elegant"] .solved-btn.solved-btn-primary,
html[data-iroiro-pop="elegant"] .challenge-intro-overlay .challenge-intro-start,
html[data-iroiro-pop="elegant"] .kiroku-overlay .kiroku-retry-btn,
html[data-iroiro-pop="elegant"] #challenge-solved-extra button[style*="linear-gradient"] {
  color: var(--elegant-metal-ink) !important; background: var(--elegant-metal) !important;
  border-color: #f4dfaa !important; box-shadow: inset 0 1px 0 #fff7dc, 0 3px 0 #ad8a45, 0 6px 12px #0b142538 !important;
}
html[data-iroiro-pop="elegant"] :is(.solved-card, .challenge-intro-overlay, .kiroku-overlay) :is([style*="color:#ffd700"], [style*="color: rgb(255, 215, 0)"]) { color: #f4d894 !important; }
html[data-iroiro-pop="elegant"] .challenge-bar {
  color: #f2d897; background: linear-gradient(140deg, #35435c, #1b2942); border: 1.5px solid var(--elegant-border);
  border-radius: 12px; box-shadow: 0 3px 0 #b9a273;
}
html[data-iroiro-pop="elegant"] .challenge-giveup-btn {
  color: var(--elegant-ink); background: linear-gradient(180deg, #fffdf6, #efe2c2);
  border: 1.5px solid var(--elegant-border); border-radius: 12px; box-shadow: inset 0 1px 0 #fff, 0 3px 0 #baa274;
}
html[data-iroiro-pop="elegant"] .challenge-giveup-btn:hover { color: var(--elegant-ink); background: #f6e5ba; filter: none; }

/* 会員案内は深紺と金の同系色。入会・ログイン操作や表示条件は変えない。 */
html[data-iroiro-pop="elegant"] .lock-modal { background: #0d192bd1; }
html[data-iroiro-pop="elegant"] .lock-dialog {
  color: #fff6e4; background: linear-gradient(150deg, #344560, #1b2942 70%);
  border: 2px solid var(--elegant-border); border-radius: 22px;
  box-shadow: inset 0 0 0 3px #e8d29e14, 0 18px 45px #080f2459;
}
html[data-iroiro-pop="elegant"] :is(.lock-dialog-title, .lock-benefits-title, .lock-price, .lock-benefits li b) { color: #f3d997; }
html[data-iroiro-pop="elegant"] :is(.lock-dialog-lead, .lock-benefits-sub) { color: #e4d6b5; }
html[data-iroiro-pop="elegant"] .lock-benefits { background: #12203799; border-color: #bba06a66; }
html[data-iroiro-pop="elegant"] :is(.lock-btn-guide, .lock-btn-login) { color: #f0dfb9; background: #35455f; border-color: #b49b655c; }
html[data-iroiro-pop="elegant"] .lock-btn-primary { color: var(--elegant-metal-ink); background: var(--elegant-metal); box-shadow: inset 0 1px 0 #fff7dc, 0 3px 0 #aa8744; }
html[data-iroiro-pop="elegant"] .lock-btn-close { color: #d0c9b8; }