/* 第4の見た目「エレガント」。シャンパンゴールドと深い宝石色。
   テーマ属性だけで切り替え、既存3テーマと学習の処理には適用しない。 */
html[data-math-look="elegant"] {
  --elegant-ink: #25324b;
  --elegant-muted: #6d675c;
  --elegant-gold: #98732e;
  --elegant-gold-light: #ebd39b;
  --elegant-paper: #fffdf7;
  --elegant-soft: #f7eedb;
  --elegant-border: #c9ab67;
  --elegant-success: #246445;
  --elegant-danger: #b1314b;
  color-scheme: light;
}
html[data-math-look="elegant"] body {
  color: var(--elegant-ink); background-color: #f5eddc;
  background-image: radial-gradient(ellipse at 50% 0, #fffefb 0, #fff9edc9 26%, transparent 65%),
    repeating-linear-gradient(135deg, transparent 0 72px, #b9955010 72px 73px, transparent 73px 145px),
    linear-gradient(120deg, #ebd9b6, #fbf5e9 28%, #f6eedc 72%, #ead6ad);
  background-size: auto;
}
html[data-math-look="elegant"] h1 {
  color: #886323; background: none; -webkit-text-fill-color: currentColor;
  -webkit-text-stroke: 0; filter: none;
  font-family: 'Yu Mincho', 'Hiragino Mincho ProN', 'Noto Serif JP', serif;
  font-size: clamp(27px, 4.5vw, 40px); font-weight: 800;
  letter-spacing: .055em; line-height: 1.6; text-shadow: 0 1px 0 #fff8e2, 0 3px 12px #ac874b22;
  margin: 0 auto 14px;
}
html[data-math-look="elegant"] .h1-prefix {
  color: var(--elegant-muted); font-family: 'Helvetica Neue', Arial, 'Hiragino Kaku Gothic ProN', sans-serif;
  font-size: 12px; letter-spacing: .16em; font-weight: 600;
  -webkit-text-fill-color: currentColor; text-shadow: none; margin: 0 0 7px;
}
html[data-math-look="elegant"] .subtitle { color: var(--elegant-muted); opacity: 1; line-height: 1.8; }
html[data-math-look="elegant"] .rotate-hint { color: var(--elegant-muted); }
html[data-math-look="elegant"] #appearance-toggle {
  color: #73541f; background: linear-gradient(120deg, #fffcf3, #f5e6c4, #fffdf7);
  border: 1px solid #b89955; border-radius: 999px;
  box-shadow: inset 0 0 0 2px #fffaf0, 0 3px 10px #70552416; font-weight: 700;
}
html[data-math-look="elegant"] #appearance-toggle:hover { background: #fffae8; }
html[data-math-look="elegant"] #appearance-name { color: #80612d; }
html[data-math-look="elegant"] .usage-wrap :is(.home-btn, #sfx-toggle, #ruby-toggle, #fx-toggle) {
  color: var(--elegant-ink) !important; background: #fffdf7f2 !important;
  border: 1px solid var(--elegant-border) !important;
  box-shadow: inset 0 1px #fff, 0 3px 9px #53401d12;
}

html[data-math-look="elegant"] .grade-row { gap: 9px; margin-bottom: 18px; }
html[data-math-look="elegant"] .grade-btn {
  color: #725b34; background: #fffdf7; border: 1px solid var(--elegant-border);
  border-radius: 9px; min-height: 42px; padding: 9px 20px;
  box-shadow: inset 0 0 0 2px #fffaf0, 0 3px 9px #53401d12;
}
html[data-math-look="elegant"] .grade-btn.active {
  color: #ffebbe; background: linear-gradient(145deg, #344660, #1d2a40);
  border-color: #d2b270; box-shadow: inset 0 0 0 2px #26344b, inset 0 0 0 3px #a891613d, 0 4px 12px #25324b26;
}
html[data-math-look="elegant"] .mode-grid { gap: 13px; margin-bottom: 19px; }
html[data-math-look="elegant"] .mode-btn {
  --jewel-top: #3d506d; --jewel-base: #223249;
  color: #fff8e7; background: linear-gradient(140deg, var(--jewel-top), var(--jewel-base));
  border: 1px solid #c6a565; border-radius: 11px; min-height: 66px; padding: 15px 9px;
  box-shadow: inset 0 0 0 3px var(--jewel-base), inset 0 0 0 4px #e7cf963d, 0 5px 0 #172239, 0 9px 16px #25324b20;
  text-shadow: 0 1px 1px #142035; filter: none; line-height: 1.6;
  transition: transform .16s, filter .16s;
}
html[data-math-look="elegant"] .mode-1 { --jewel-top: #735746; --jewel-base: #483a32; }
html[data-math-look="elegant"] .mode-4 { --jewel-top: #655375; --jewel-base: #40334e; }
html[data-math-look="elegant"] .mode-2 { --jewel-top: #835463; --jewel-base: #542f3d; }
html[data-math-look="elegant"] .mode-5 { --jewel-top: #426172; --jewel-base: #263e50; }
html[data-math-look="elegant"] .mode-3 { --jewel-top: #426754; --jewel-base: #254537; }
html[data-math-look="elegant"] .mode-5 { --jewel-top: #455b7d; --jewel-base: #2b3d5b; }
html[data-math-look="elegant"] .mode-6 {
  color: #503812; background: linear-gradient(125deg, #ac8034, #f4dda2 28%, #fff0c0 46%, #dfbd70 72%, #bb9345);
  border-color: #9c772f; text-shadow: 0 1px #fff1cb;
  box-shadow: inset 0 0 0 3px #f1d795, inset 0 0 0 4px #9c772f66, 0 5px 0 #94702f, 0 10px 16px #85612b26;
}
html[data-math-look="elegant"] .mode-btn:hover { filter: brightness(1.09); transform: translateY(-2px); }
html[data-math-look="elegant"] .mode-btn.active {
  filter: none; outline: 2px solid #b28a3d; outline-offset: 3px;
}
html[data-math-look="elegant"] .mode-btn ruby.oj-rb rt { opacity: 1; color: inherit; }
html[data-math-look="elegant"] #prev-btn { color: #725b34 !important; }
html[data-math-look="elegant"] #prev-btn .nav-shape path { fill: #fffdf7; stroke: #c9ab67; stroke-width: 1.5; }
html[data-math-look="elegant"] #btn-restart-top {
  color: #725b34 !important; background: linear-gradient(#fffdf7, #f8efd9) !important;
  border: 1px solid #c9ab67 !important; border-radius: 11px !important;
  box-shadow: inset 0 0 0 2px #fffaf0, 0 3px 8px #7153231a !important;
}
html[data-math-look="elegant"] .shape-nav-next { color: #503812 !important; }
html[data-math-look="elegant"] .shape-nav-next .nav-shape path {
  fill: url(#shapeNavNextGrad); stroke: #a17b34; stroke-width: 1.5; filter: drop-shadow(0 2px 0 #a7874e);
}
html[data-math-look="elegant"] #shapeNavNextGrad stop:first-child { stop-color: #fff0c0; }
html[data-math-look="elegant"] #shapeNavNextGrad stop:last-child { stop-color: #d4ae61; }

html[data-math-look="elegant"] :is(.oj-kaisetsu-wrap, .app-about) {
  color: var(--elegant-muted) !important; background: #fffdf7ed !important;
  border: 1px solid var(--elegant-border) !important; border-radius: 16px;
  box-shadow: inset 0 0 0 4px #fffaf0, 0 5px 18px #79613414;
}
html[data-math-look="elegant"] :is(.app-about h2, .oj-kaisetsu-sum, .oj-kaisetsu h3) { color: #72541f !important; }
html[data-math-look="elegant"] .oj-kaisetsu-sum { padding: 15px 18px; }
html[data-math-look="elegant"] .oj-kaisetsu-sum::before { color: #a47d31; }
html[data-math-look="elegant"] .oj-kaisetsu { color: var(--elegant-muted); }
html[data-math-look="elegant"] .oj-kaisetsu h3 { border-left-color: var(--elegant-border); }
html[data-math-look="elegant"] .oj-q { color: var(--elegant-ink); background: var(--elegant-soft); }
html[data-math-look="elegant"] .oj-a { color: #7c5926; }
html[data-math-look="elegant"] .oj-caution { color: var(--elegant-danger); }
html[data-math-look="elegant"] .related-app-btn {
  color: #715321; background: linear-gradient(#fffdf7, #f8efd9);
  border: 1px solid var(--elegant-border); border-radius: 12px; box-shadow: 0 3px 9px #53401d16;
}
html[data-math-look="elegant"] .related-app-btn::before { background: var(--elegant-border); }
html[data-math-look="elegant"] .bug-report-btn {
  color: #725b34 !important; background: #fffdf7 !important; border-color: var(--elegant-border) !important;
}
html[data-math-look="elegant"] :is(.work-footer, .work-footer a, footer, footer a) { color: var(--elegant-muted) !important; }
html[data-math-look="elegant"] :is(button, a, summary):focus-visible { outline: 3px solid #9b7128; outline-offset: 4px; }

@media (max-width: 600px) {
  html[data-math-look="elegant"] h1 { font-size: clamp(21px, 5.5vw, 30px); letter-spacing: .015em; }
  html[data-math-look="elegant"] .h1-prefix { font-size: 12px; margin: 5px 0; }
  html[data-math-look="elegant"] .appearance-switch { margin: 12px auto 24px; }
  html[data-math-look="elegant"] .grade-row { gap: 7px; }
  html[data-math-look="elegant"] .grade-btn { flex: 1; min-width: 0; padding: 7px 4px; }
  html[data-math-look="elegant"] .mode-btn { padding-inline: 6px; font-size: clamp(.78rem, 3.35vw, .95rem); }
  html[data-math-look="elegant"] .mode-grid > #mode-challenge { grid-column: 1 / -1; }
  html[data-math-look="elegant"] .nav-row { flex-wrap: nowrap; gap: 7px; }
  html[data-math-look="elegant"] .nav-row > button {
    flex: 1; width: auto !important; min-width: 0 !important; font-size: .76em !important; padding: 8px 6px !important;
  }
  html[data-math-look="elegant"] body.sp-ui .sp-mode-bar { padding: 8px 5px 14px; gap: 13px; }
}
@media (max-width: 360px) {
  html[data-math-look="elegant"] .grade-row { gap: 4px; }
  html[data-math-look="elegant"] .grade-btn { padding-inline: 1px; white-space: nowrap; }
}
@media (prefers-reduced-motion: reduce) {
  html[data-math-look="elegant"] .mode-btn { transition: none; }
}

/* KaTeXの透明な高さ調整文字には影を描かない。 */
html[data-math-look="elegant"] .katex :is([style*="color:transparent"], [style*="color: transparent"]) { text-shadow:none; }