/* 高校数学6アプリの共通テーマ。いつもの表示と学習ロジックはそのまま。 */
html[data-math-look="pop"] {
  --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[data-math-look="simple"] {
  color-scheme: light;
  --look-bg:#f6f7f5; --look-ink:#28323a; --look-muted:#626c75;
  --look-surface:#fff; --look-soft:#edf0f2; --look-border:#bbc3c9;
  --look-accent:#365e79; --look-accent-soft:#e6eef3;
  --look-warm:#365e79; --look-warm-soft:#edf3f7;
  --look-success:#32624d; --look-success-soft:#edf4ef;
  --look-danger:#98464b; --look-danger-soft:#fbefef; --look-shadow:#dfe3e6;

}
html[data-math-look="elegant"] {
  --look-bg:#faf3e4; --look-ink:#25324b; --look-muted:#6d675c;
  --look-surface:#fffdf7; --look-soft:#f7eedb; --look-border:#c9ab67;
  --look-accent:#886323; --look-accent-soft:#f3e4be;
  --look-warm:#7b591e; --look-warm-soft:#fff3d1;
  --look-success:#246445; --look-success-soft:#e5f1e3;
  --look-danger:#9a3f39; --look-danger-soft:#f7e5db; --look-shadow:#d5c6a1;
}
.appearance-switch { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:10px; margin:0 auto 22px; }
#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="pastel"],[data-math-look="elegant"],[data-math-look="simple"]) { color-scheme:light; }
html:is([data-math-look="pop"],[data-math-look="pastel"],[data-math-look="elegant"],[data-math-look="simple"]) body { color:var(--look-ink); background:var(--look-bg); }
html[data-math-look="pop"] body {
  background-image:radial-gradient(#70b8d638 1.25px,transparent 1.25px),linear-gradient(135deg,#f8fdff,#e7f6fe 55%,#f0f9e8);
  background-size:18px 18px,auto;
}
html[data-math-look="pastel"] body {
  background-image:radial-gradient(ellipse at 3% 4%,#ffcce5,transparent 47%),radial-gradient(ellipse at 100% 28%,#b9f3ff,transparent 50%),linear-gradient(180deg,#fff0f9,#dce7ff 60%,#fce5f5);
}
html[data-math-look="elegant"] body {
  background-image:radial-gradient(ellipse at 50% 0,#fffefb,transparent 65%),repeating-linear-gradient(135deg,transparent 0 72px,#b9955010 72px 73px,transparent 73px 145px),linear-gradient(120deg,#ebd9b6,#fbf5e9 28%,#f6eedc 72%,#ead6ad);
}
html:is([data-math-look="pop"],[data-math-look="pastel"],[data-math-look="elegant"],[data-math-look="simple"]) h1 { color:var(--look-accent); background:none; -webkit-text-fill-color:currentColor; text-shadow:none; }
html[data-math-look="pop"] h1 { -webkit-text-stroke:2px #fff; paint-order:stroke fill; text-shadow:2px 3px #15364f25; }
html[data-math-look="pastel"] h1 { color:#9651ac; text-shadow:0 3px #ddc5e9; }
html[data-math-look="elegant"] h1 { font-family:'Yu Mincho','Hiragino Mincho ProN',serif; letter-spacing:.055em; text-shadow:0 1px #fff8e2; }
html:is([data-math-look="pop"],[data-math-look="pastel"],[data-math-look="elegant"],[data-math-look="simple"]) :is(.h1-prefix,.subtitle,.current-mode-label,.rotate-hint,#appearance-name) { color:var(--look-muted); opacity:1; text-shadow:none; -webkit-text-stroke:0; }
html:is([data-math-look="pop"],[data-math-look="pastel"],[data-math-look="elegant"],[data-math-look="simple"]) :is(#appearance-toggle,.usage-wrap .home-btn,.usage-wrap #sfx-toggle,.usage-wrap #ruby-toggle,.usage-wrap #fx-toggle) { color:var(--look-ink)!important; background:var(--look-surface)!important; border-color:var(--look-border)!important; }
html[data-math-look="pop"] #appearance-toggle { border:2px solid var(--look-ink); box-shadow:2px 2px var(--look-ink); font-weight:800; }
html[data-math-look="pastel"] #appearance-toggle { border-style:dashed; border-radius:999px; }
html[data-math-look="elegant"] #appearance-toggle { background:linear-gradient(120deg,#fffcf3,#f5e6c4,#fffdf7)!important; border-radius:999px; box-shadow:inset 0 0 0 2px #fffaf0; }
/* 章の選択は押し込まれた状態で示し、節の問題ボタンと区別する。 */
html:is([data-math-look="pop"],[data-math-look="pastel"],[data-math-look="elegant"],[data-math-look="simple"]) .grade-row .grade-btn { color:var(--look-ink); background:var(--look-surface); border:1px solid var(--look-border); text-shadow:none; }
html:is([data-math-look="pop"],[data-math-look="pastel"],[data-math-look="elegant"],[data-math-look="simple"]) .grade-row .grade-btn.active { background:var(--look-accent-soft); border-color:var(--look-accent); box-shadow:inset 0 2px 4px #26374724; }
html[data-math-look="elegant"] .grade-row .grade-btn.active { color:#f7e5b5; background:#25324b; border-color:#b99955; }
/* 問題ボタンは小中学と共通の配色。節番号は文字色を継承する。 */
html:is([data-math-look="pop"],[data-math-look="pastel"],[data-math-look="elegant"],[data-math-look="simple"]) .mode-btn.sec-btn { color:var(--mode-ink,var(--look-ink)); text-shadow:none; filter:none; }
html:is([data-math-look="pop"],[data-math-look="pastel"],[data-math-look="elegant"],[data-math-look="simple"]) .mode-btn.sec-btn .sec-no { color:inherit; background:#ffffff38; border:1px solid currentColor; }
html[data-math-look="pop"] .mode-btn.sec-btn { --mode-paper:#ffb658; background:var(--mode-paper); border:3px solid #15364f; border-radius:11px; box-shadow:3px 5px #15364f,inset 0 3px #ffffff55; }
html[data-math-look="pop"] .mode-btn.sec-btn:is(.hue-1,.hue-5) { --mode-paper:#70ddd8; }
html[data-math-look="pop"] .mode-btn.sec-btn.hue-2 { --mode-paper:#72c8f5; }
html[data-math-look="pop"] .mode-btn.sec-btn:is(.hue-3,.hue-7) { --mode-paper:#b5e776; }
html[data-math-look="pop"] .mode-btn.sec-btn.hue-4 { --mode-paper:#ffacd1; }
html[data-math-look="pop"] .mode-btn.sec-btn.hue-6 { --mode-paper:#ffc07b; }
html[data-math-look="pop"] .mode-btn.sec-btn.sec-challenge { --mode-paper:#ffd84f; background-image:repeating-linear-gradient(-55deg,transparent 0 22px,#ffffff38 22px 32px); }
html[data-math-look="pastel"] .mode-btn.sec-btn { --mode-paper:#ffe6ad; --mode-ink:#714717; background:linear-gradient(#ffffff55,transparent),var(--mode-paper); border:3px solid #fff; border-radius:25px; box-shadow:0 5px #d5b6d9; }
html[data-math-look="pastel"] .mode-btn.sec-btn:is(.hue-1,.hue-7) { --mode-paper:#eadcf5; --mode-ink:#6c4587; }
html[data-math-look="pastel"] .mode-btn.sec-btn:is(.hue-2,.hue-5) { --mode-paper:#c5effa; --mode-ink:#30687e; }
html[data-math-look="pastel"] .mode-btn.sec-btn.hue-3 { --mode-paper:#dcf4e8; --mode-ink:#326a53; }
html[data-math-look="pastel"] .mode-btn.sec-btn:is(.hue-4,.hue-6) { --mode-paper:#f9dfeb; --mode-ink:#8d4566; }
html[data-math-look="elegant"] .mode-btn.sec-btn { --jewel-top:#735746; --jewel-base:#483a32; --mode-ink:#fff8e7; background:linear-gradient(140deg,var(--jewel-top),var(--jewel-base)); border:1px solid #c6a565; border-radius:11px; box-shadow:inset 0 0 0 3px var(--jewel-base),inset 0 0 0 4px #e7cf963d,0 5px #172239; }
html[data-math-look="elegant"] .mode-btn.sec-btn:is(.hue-1,.hue-7) { --jewel-top:#655375; --jewel-base:#40334e; }
html[data-math-look="elegant"] .mode-btn.sec-btn:is(.hue-2,.hue-5) { --jewel-top:#455b7d; --jewel-base:#2b3d5b; }
html[data-math-look="elegant"] .mode-btn.sec-btn.hue-3 { --jewel-top:#426754; --jewel-base:#254537; }
html[data-math-look="elegant"] .mode-btn.sec-btn:is(.hue-4,.hue-6) { --jewel-top:#835463; --jewel-base:#542f3d; }
html[data-math-look="elegant"] .mode-btn.sec-btn.sec-challenge { --mode-ink:#503812; background:linear-gradient(125deg,#ac8034,#f4dda2 28%,#fff0c0 46%,#dfbd70 72%,#bb9345); box-shadow:inset 0 0 0 3px #f1d795,inset 0 0 0 4px #9c772f66,0 5px #94702f; }
html[data-math-look="simple"] .mode-btn.sec-btn { --mode-paper:#e5eef3; --mode-ink:#365769; background:var(--mode-paper); border:1px solid #adbfcb; border-radius:8px; box-shadow:0 1px 2px #28323a12; }
html[data-math-look="simple"] .mode-btn.sec-btn:is(.hue-1,.hue-3,.hue-7) { --mode-paper:#e7eee5; --mode-ink:#46634f; border-color:#b1c1b0; }
html[data-math-look="simple"] .mode-btn.sec-btn:is(.hue-0,.hue-4,.hue-6,.sec-challenge) { --mode-paper:#f3ecdf; --mode-ink:#765d39; border-color:#cbbd9f; }
html:is([data-math-look="pop"],[data-math-look="pastel"],[data-math-look="elegant"],[data-math-look="simple"]) .mode-btn.sec-btn.active { outline:2px solid var(--look-accent); outline-offset:3px; }
html:is([data-math-look="pop"],[data-math-look="pastel"],[data-math-look="elegant"],[data-math-look="simple"]) .mode-btn.sec-btn:active { transform:translateY(2px); }
/* 前後の問題・今の問題は既存の形のまま。 */
html:is([data-math-look="pop"],[data-math-look="pastel"],[data-math-look="elegant"],[data-math-look="simple"]) :is(#btn-prev,.btn-next,#btn-restart-top) { color:var(--look-ink)!important; text-shadow:none; }
html:is([data-math-look="pop"],[data-math-look="pastel"],[data-math-look="elegant"],[data-math-look="simple"]) #btn-prev .nav-shape path { fill:var(--look-surface); stroke:var(--look-border); stroke-width:1.5; }
html:is([data-math-look="pop"],[data-math-look="pastel"],[data-math-look="elegant"],[data-math-look="simple"]) .btn-next .nav-shape path { fill:var(--look-accent-soft); stroke:var(--look-border); stroke-width:1.5; }
html:is([data-math-look="pop"],[data-math-look="pastel"],[data-math-look="elegant"],[data-math-look="simple"]) #btn-restart-top { background:var(--look-surface); border:2px solid var(--look-border); box-shadow:0 3px var(--look-shadow); }
html[data-math-look="pop"] .btn-next .nav-shape path { fill:#c4ed48; stroke:#15364f; }
html[data-math-look="elegant"] .btn-next .nav-shape path { fill:#ebd39b; stroke:#a17b34; }
html[data-math-look="simple"] #btn-restart-top { border-width:1px; box-shadow:none; }
html:is([data-math-look="pop"],[data-math-look="pastel"],[data-math-look="elegant"],[data-math-look="simple"]) :is(.work-footer,.work-footer a,footer,footer a,.app-about p,.app-about h2) { color:var(--look-muted)!important; }
html:is([data-math-look="pop"],[data-math-look="pastel"],[data-math-look="elegant"],[data-math-look="simple"]) :is(.app-about,.related-app-btn) { color:var(--look-ink); background:var(--look-surface); border:1px solid var(--look-border); box-shadow:0 3px var(--look-shadow); }
html:is([data-math-look="pop"],[data-math-look="pastel"],[data-math-look="elegant"],[data-math-look="simple"]) .related-app-btn::before { background:var(--look-accent); }
/* 前後のアプリのカード：サイトトップ（明るい見た目）と同じ色。数学Ⅰ・A＝だいだい、Ⅱ・B＝むらさき、Ⅲ・C＝水色（2026-10-06の指示） */
html:is([data-math-look="pop"],[data-math-look="pastel"],[data-math-look="elegant"],[data-math-look="simple"]) .related-app-btn.calc { --card-accent:#89561c; }
html:is([data-math-look="pop"],[data-math-look="pastel"],[data-math-look="elegant"],[data-math-look="simple"]) .related-app-btn.math { --card-accent:#71448b; }
html:is([data-math-look="pop"],[data-math-look="pastel"],[data-math-look="elegant"],[data-math-look="simple"]) .related-app-btn.math3 { --card-accent:#246782; }
html:is([data-math-look="pop"],[data-math-look="pastel"],[data-math-look="elegant"],[data-math-look="simple"]) .related-app-btn:is(.calc,.math,.math3) { color:var(--card-accent); }
html:is([data-math-look="pop"],[data-math-look="pastel"],[data-math-look="elegant"],[data-math-look="simple"]) .related-app-btn:is(.calc,.math,.math3)::before { background:var(--card-accent); }
/* 他のアプリのプルダウン：明るい見た目（サイトトップの明るい見た目と同じ色。2026-10-07） */
html:is([data-math-look="pop"],[data-math-look="pastel"],[data-math-look="elegant"],[data-math-look="simple"]) .oj-picker-menu { background: var(--look-surface); border: 1px solid var(--look-border); box-shadow: 0 14px 30px var(--look-shadow, rgba(0,0,0,0.16)); }
html:is([data-math-look="pop"],[data-math-look="pastel"],[data-math-look="elegant"],[data-math-look="simple"]) .oj-picker-item:hover, html:is([data-math-look="pop"],[data-math-look="pastel"],[data-math-look="elegant"],[data-math-look="simple"]) .oj-picker-item:focus-visible { background: rgba(0,0,0,0.05); }
html:is([data-math-look="pop"],[data-math-look="pastel"],[data-math-look="elegant"],[data-math-look="simple"]) .oj-picker-item.calc { --card-accent:#89561c; --card-soft:#fff0d7; }
html:is([data-math-look="pop"],[data-math-look="pastel"],[data-math-look="elegant"],[data-math-look="simple"]) .oj-picker-item.math { --card-accent:#71448b; --card-soft:#f1e5fa; }
html:is([data-math-look="pop"],[data-math-look="pastel"],[data-math-look="elegant"],[data-math-look="simple"]) .oj-picker-item.math3 { --card-accent:#246782; --card-soft:#dff2fb; }
html:is([data-math-look="pop"],[data-math-look="pastel"],[data-math-look="elegant"],[data-math-look="simple"]) .oj-picker-item:is(.calc,.math,.math3) { color: var(--card-accent); }
html:is([data-math-look="pop"],[data-math-look="pastel"],[data-math-look="elegant"],[data-math-look="simple"]) .related-app-btn.oj-picker-btn { color: var(--look-ink); }
/* OJ-TITLE-RING-START 見出し（◯◯マスター）の白いふちは、ふち取り（-webkit-text-stroke）でなく白い影を8方向に重ねて描く（2026-10-15）。
   ⚠️ 学校の電子黒板など古めのブラウザは「ふちを先に描いて字を上に重ねる」（paint-order: stroke fill）を文字に使えず、
      白いふちが字の上に乗って字の内側を削り、字が細く見えていた（本人が電子黒板で確かめて「なおった」）。影なら、どのブラウザでも字の外側にだけ付く。
   ⚠️ ファイルの最後に置く（上の @media の -webkit-text-stroke-width より後ろにしないと、ふち取りがもどる）。ふちの太さは、もとのふち取りの外側の半分。 */
html[data-math-look="pop"] h1 { -webkit-text-stroke:0; paint-order:normal; text-shadow: 1px 0 0 #fff, -1px 0 0 #fff, 0 1px 0 #fff, 0 -1px 0 #fff, 0.71px 0.71px 0 #fff, -0.71px 0.71px 0 #fff, 0.71px -0.71px 0 #fff, -0.71px -0.71px 0 #fff, 2px 3px #15364f25; }
html[data-math-look="pop"] h1 .h1-prefix { text-shadow: none; }
/* 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 */