/* 三平方マスター：小学校向けアプリと共通のポップ・パステル。
   学習の処理・数式の書体・操作の配置は元のまま。 */
.appearance-switch {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: 10px; margin-top: 16px;
}
#appearance-toggle {
  padding: 7px 13px; border: 1px solid #9690af; border-radius: 8px;
  background: #ffffff0c; color: #e2e8f0; font: inherit; font-size: 12px; cursor: pointer;
}
#appearance-name { font-size: 12px; white-space: nowrap; }
#appearance-toggle:focus-visible { outline: 3px solid #a78bfa; outline-offset: 3px; }

html:is([data-math-look="pop"], [data-math-look="simple"]) {
  --look-bg: #edf8fc;
  --look-ink: #15364f; --look-muted: #426177;
  --look-surface: #f8fdff; --look-soft: #e3f3fb; --look-border: #7bafc5;
  --look-accent: #087bbd; --look-accent-soft: #a6e6ff;
  --look-warm: #925010; --look-warm-soft: #fff7d9;
  --look-success: #17683f; --look-success-soft: #ddf5b8;
  --look-danger: #bb2535; --look-danger-soft: #ffe0d2;
  --look-shadow: #b2cad4;
}
html[data-math-look="pastel"] {
  --look-bg: #f4deff;
  --look-ink: #583179; --look-muted: #795484;
  --look-surface: #fffaff; --look-soft: #f4e7fc; --look-border: #c8a7df;
  --look-accent: #8a3c9f; --look-accent-soft: #f1e2ff;
  --look-warm: #865017; --look-warm-soft: #fff7d9;
  --look-success: #17683f; --look-success-soft: #dcf8e9;
  --look-danger: #b52a56; --look-danger-soft: #ffe2ed;
  --look-shadow: #d5b6e7;
}
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="simple"]) {
  color-scheme: light;
  --bg: var(--look-bg); --surface: var(--look-surface); --border: var(--look-border);
  --text: var(--look-ink); --subtle: var(--look-muted); --accent: var(--look-accent);
}
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="simple"]) body {
  background: var(--look-bg); color: var(--look-ink);
}
html[data-math-look="pop"] body {
  background-image: radial-gradient(#70b8d638 1.25px, transparent 1.25px),
    linear-gradient(135deg, #f8fdff 0%, #e7f6fe 55%, #f0f9e8 100%);
  background-size: 18px 18px, auto;
}
html[data-math-look="pastel"] body {
  font-family: 'Hiragino Maru Gothic ProN', 'Arial Rounded MT Bold', 'Yu Gothic', sans-serif;
  background-image: radial-gradient(ellipse at 3% 4%, #ffcce5 0, transparent 47%),
    radial-gradient(ellipse at 100% 28%, #b9f3ff 0, transparent 50%),
    radial-gradient(ellipse at 5% 80%, #e4ceff 0, transparent 45%),
    linear-gradient(180deg, #fff0f9, #dce7ff 60%, #fce5f5);
}
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="simple"]) h1 {
  color: var(--look-accent); background: none; -webkit-text-fill-color: currentColor;
  -webkit-text-stroke: 3px #fff; paint-order: stroke fill; filter: none;
  font-size: clamp(26px, 4.6vw, 37px); letter-spacing: .015em; line-height: 1.55;
  text-shadow: 2px 3px 0 var(--look-ink); margin-bottom: 8px;
}
html[data-math-look="pastel"] h1 {
  color: #aa35c1; -webkit-text-stroke-width: 4px; letter-spacing: .025em;
  text-shadow: 0 4px 0 #d4b1e7, 0 7px 18px #b064c526;
}
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="simple"]) h1 .h1-prefix {
  color: var(--look-muted); font-size: 13px; margin-bottom: 7px;
  -webkit-text-stroke: 0; text-shadow: none; letter-spacing: .07em;
}
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="simple"]) .subtitle { color: var(--look-muted); line-height: 1.8; }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="simple"]) #appearance-toggle {
  color: var(--look-ink); background: var(--look-surface); border-color: var(--look-border);
}
html[data-math-look="pop"] #appearance-toggle {
  background: #fff; border: 2px solid var(--look-ink); border-radius: 8px;
  box-shadow: 2px 2px 0 var(--look-ink); font-weight: 800;
}
html[data-math-look="pastel"] #appearance-toggle {
  color: #765385; background: #ffffffb3; border: 1px dashed #b789cd; border-radius: 999px;
}
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="simple"]) #appearance-toggle:hover { background: var(--look-accent-soft); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="simple"]) #appearance-name { color: var(--look-muted); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="simple"]) .usage-wrap :is(.home-btn, #sfx-toggle, #ruby-toggle, #fx-toggle) {
  color: var(--look-ink) !important; background: var(--look-surface) !important;
  border: 1.5px solid var(--look-border) !important; border-radius: 8px !important;
  box-shadow: 0 3px 0 var(--look-shadow);
}
html[data-math-look="pop"] .usage-wrap :is(.home-btn, #sfx-toggle, #ruby-toggle, #fx-toggle) { border-color: var(--look-ink) !important; box-shadow: 2px 2px 0 #15364f30; }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="simple"]) :is(.rotate-hint, .current-mode-label) { color: var(--look-muted); }

/* 小学校向けと同じ、明るい色と立体感のあるモードボタン。 */
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="simple"]) .mode-btn {
  color: var(--mode-ink, var(--look-ink)); text-shadow: none; filter: none;
  transition: transform .14s, background-color .14s, box-shadow .14s;
}
html[data-math-look="pop"] .mode-btn {
  background: var(--mode-paper, #69c6ef); border: 3px solid var(--look-ink); border-radius: 10px;
  box-shadow: 3px 4px 0 var(--look-ink), inset 0 3px #ffffff66;
}
html[data-math-look="pop"] .mode-3 { --mode-paper: #b0e66f; }
html[data-math-look="pop"] .mode-1 { --mode-paper: #ffb65c; }
html[data-math-look="pop"] .mode-4 { --mode-paper: #c4ed48; }
html[data-math-look="pop"] .mode-5 { --mode-paper: #72c9fa; }
html[data-math-look="pop"] .mode-2 { --mode-paper: #73e1dd; }
html[data-math-look="pop"] .mode-6 { --mode-paper: #ffd24d; background-image: repeating-linear-gradient(-55deg, transparent 0 22px, #ffffff27 22px 32px); }
html[data-math-look="pastel"] .mode-btn {
  background: linear-gradient(180deg, var(--candy-top), var(--candy-bottom));
  border: 2px solid #fff; border-radius: 21px;
  box-shadow: 0 5px 0 var(--candy-shadow), 0 8px 14px #9155ab1f, inset 0 3px #ffffff55;
}
html[data-math-look="pastel"] .mode-3 { --candy-top: #e9fbf1; --candy-bottom: #dcf8e9; --candy-shadow: #d5a6d4; --mode-ink: #195d40; }
html[data-math-look="pastel"] .mode-1 { --candy-top: #fff7e9; --candy-bottom: #ffeace; --candy-shadow: #d5a6d4; --mode-ink: #865017; }
html[data-math-look="pastel"] .mode-4 { --candy-top: #f8efff; --candy-bottom: #f1e2ff; --candy-shadow: #d5a6d4; --mode-ink: #583179; }
html[data-math-look="pastel"] .mode-5 { --candy-top: #e7f3ff; --candy-bottom: #d7eaff; --candy-shadow: #d5a6d4; --mode-ink: #345a7e; }
html[data-math-look="pastel"] .mode-2 { --candy-top: #fff0f7; --candy-bottom: #ffe2ed; --candy-shadow: #d5a6d4; --mode-ink: #98436b; }
html[data-math-look="pastel"] .mode-6 { --candy-shadow: #d5a6d4; --mode-ink: #714717; background: linear-gradient(180deg, #fff0ac, #ffe68a); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="simple"]) .mode-btn:hover { transform: translateY(-2px); filter: brightness(1.04); }
html[data-math-look="pop"] .mode-btn:active { transform: translate(2px, 2px); box-shadow: 1px 2px 0 var(--look-ink); }
html[data-math-look="pastel"] .mode-btn:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--candy-shadow); }
html[data-math-look="pop"] body.sp-ui .sp-mode-bar .mode-btn { border-radius: 10px; }
html[data-math-look="pastel"] body.sp-ui .sp-mode-bar .mode-btn { border-radius: 19px; }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="simple"]) .btn-primary { background: var(--look-accent); }

html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="simple"]) :is(#prev-btn, .shape-nav-next, #btn-restart-top) {
  color: var(--look-ink); text-shadow: none;
}
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="simple"]) #prev-btn .nav-shape path {
  fill: var(--look-surface); stroke: var(--look-border); stroke-width: 2;
}
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="simple"]) .shape-nav-next .nav-shape path {
  fill: #ffcf63; stroke: #fff; stroke-width: 2; filter: drop-shadow(0 3px 0 #d39a36);
}
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="simple"]) #btn-restart-top {
  background: var(--look-surface); border: 2px solid var(--look-border); border-radius: 16px;
  box-shadow: 0 3px 0 var(--look-shadow);
}
html[data-math-look="pop"] #prev-btn .nav-shape path { stroke: var(--look-ink); }
html[data-math-look="pop"] .shape-nav-next .nav-shape path { fill: #c4ed48; stroke: var(--look-ink); filter: drop-shadow(0 3px 0 #15364f33); }
html[data-math-look="pop"] #btn-restart-top { border-color: var(--look-ink); border-radius: 8px; box-shadow: 2px 3px 0 #15364f33; }

/* 既存の解説とフッターも同じ紙色にそろえる。 */
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="simple"]) :is(.app-about, .oj-kaisetsu-wrap) {
  color: var(--look-muted) !important; background: var(--look-surface) !important;
  border: 2px solid var(--look-border) !important; border-radius: 22px !important; box-shadow: 0 4px 0 var(--look-shadow);
}
html[data-math-look="pop"] :is(.app-about, .oj-kaisetsu-wrap) { border-color: var(--look-ink) !important; border-radius: 12px !important; box-shadow: 3px 4px 0 var(--look-shadow); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="simple"]) :is(.app-about h2, .oj-kaisetsu-sum, .oj-kaisetsu h3) { color: var(--look-ink) !important; }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="simple"]) .oj-kaisetsu-sum::before { color: var(--look-accent); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="simple"]) .oj-kaisetsu { color: var(--look-muted); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="simple"]) .oj-kaisetsu h3 { border-left-color: var(--look-border); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="simple"]) .oj-q { color: var(--look-ink); background: var(--look-soft); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="simple"]) .oj-a { color: var(--look-accent); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="simple"]) .oj-caution { color: var(--look-danger); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="simple"]) :is(.work-footer, .work-footer a, footer, footer a) { color: var(--look-muted) !important; }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="simple"]) .related-app-btn {
  color: var(--look-accent); background: var(--look-surface); border: 2px solid var(--look-border); box-shadow: 0 4px 0 var(--look-shadow);
}
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="simple"]) .related-app-btn::before { background: var(--look-border); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="simple"]) .bug-report-btn {
  color: var(--look-muted) !important; background: var(--look-surface) !important; border-color: var(--look-border) !important;
}

/* 手書きの履歴は保持し、見える色だけ黒・明るい赤へ変換。 */
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="simple"]) body > canvas[style*="z-index: 9998"] { filter: var(--oj-light-ink-filter); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="simple"]) .sp-hw-tray {
  background: var(--look-surface); border-color: var(--look-border); box-shadow: 0 3px 12px var(--look-shadow);
}
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="simple"]) :is(.sp-hw-main, .sp-hw-tool) {
  color: var(--look-ink) !important; background: var(--look-surface) !important;
  border-color: var(--look-border) !important; box-shadow: none !important;
}
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="simple"]) body.sp-hw-on .sp-hw-main { background: var(--look-accent-soft) !important; }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="simple"]) .sp-hw-clear::before { filter: brightness(0); opacity: .65; }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="simple"]) button[aria-label="手書き色を切り替え"] > span { filter: var(--oj-light-ink-filter); }
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="simple"]) :is(button, a, summary):focus-visible { outline: 2px solid var(--look-accent); outline-offset: 3px; }

@media (max-width: 600px) {
  html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="simple"]) h1 { font-size: clamp(23px, 5.5vw, 30px); -webkit-text-stroke-width: 3px; }
  html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="simple"]) .nav-row { gap: 7px; }
  html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="simple"]) .nav-row > button {
    flex: 1; min-width: 0; width: auto; padding-inline: 6px; font-size: .76em;
  }
  html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="simple"]) .appearance-switch { margin-top: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="simple"]) .mode-btn { transition: none; }
}
/* OJ-TITLE-RING-START 見出し（◯◯マスター）の白いふちは、ふち取り（-webkit-text-stroke）でなく白い影を8方向に重ねて描く（2026-10-15）。
   ⚠️ 学校の電子黒板など古めのブラウザは「ふちを先に描いて字を上に重ねる」（paint-order: stroke fill）を文字に使えず、
      白いふちが字の上に乗って字の内側を削り、字が細く見えていた（本人が電子黒板で確かめて「なおった」）。影なら、どのブラウザでも字の外側にだけ付く。
   ⚠️ ファイルの最後に置く（上の @media の -webkit-text-stroke-width より後ろにしないと、ふち取りがもどる）。ふちの太さは、もとのふち取りの外側の半分。 */
html:is([data-math-look="pop"], [data-math-look="pastel"]) h1 { -webkit-text-stroke: 0; paint-order: normal; }
html[data-math-look="pop"] h1 { text-shadow: 1.5px 0 0 #fff, -1.5px 0 0 #fff, 0 1.5px 0 #fff, 0 -1.5px 0 #fff, 1.06px 1.06px 0 #fff, -1.06px 1.06px 0 #fff, 1.06px -1.06px 0 #fff, -1.06px -1.06px 0 #fff, 2px 3px 0 var(--look-ink); }
html[data-math-look="pastel"] h1 { text-shadow: 2px 0 0 #fff, -2px 0 0 #fff, 0 2px 0 #fff, 0 -2px 0 #fff, 1.41px 1.41px 0 #fff, -1.41px 1.41px 0 #fff, 1.41px -1.41px 0 #fff, -1.41px -1.41px 0 #fff, 0 4px 0 #d4b1e7, 0 7px 18px #b064c526; }
html:is([data-math-look="pop"], [data-math-look="pastel"]) h1 .h1-prefix { text-shadow: none; }
@media (max-width: 600px) {
  html[data-math-look="pastel"] h1 { text-shadow: 1.5px 0 0 #fff, -1.5px 0 0 #fff, 0 1.5px 0 #fff, 0 -1.5px 0 #fff, 1.06px 1.06px 0 #fff, -1.06px 1.06px 0 #fff, 1.06px -1.06px 0 #fff, -1.06px -1.06px 0 #fff, 0 4px 0 #d4b1e7, 0 7px 18px #b064c526; }
}
/* OJ-TITLE-FONT ポップの見出しの字の太さを、四則マスター（中１数学マスターの正負の数）にそろえる（2026-10-18 本人の指示。正は tools/apply_title_font.js） */
html[data-math-look="pop"] h1 { font-family: 'Helvetica Neue', Arial, sans-serif; }
/* OJ-BTN-FONT 縦スマホのポップでは、ページ全体の字の並びも四則マスターと同じに＝学年・単元のタブなどボタンの字の太さがそろう（2026-10-18 本人の指示「スマホ版で、中１の正負の数（ポップデザイン）だけ、ボタンの文字が太いが、他の章や学年も、この太さにしたい」） */
html[data-math-look="pop"] body.sp-ui { font-family: 'Helvetica Neue', Arial, sans-serif; }
/* OJ-TITLE-RING-END */