/* 共通デザイン「シンプル」。白い面・細い枠に、控えめな青・緑・ベージュを添える。 */
html[data-iroiro-pop="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;
  --work-positive-ink:#32624d; --work-positive-bg:#f5f9f6; --work-positive-border:#aabfb0;
  --work-negative-ink:#98464b; --work-negative-bg:#fcf5f5; --work-negative-border:#ccafb1;
  --work-zero-ink:#365e79; --work-zero-bg:#f2f5f7; --work-zero-border:#aebec8;
  --work-card-radius:8px; --work-card-shadow:0 1px 2px #28323a12; --work-card-hover-shadow:0 2px 4px #28323a18;
  --work-button-radius:6px; --work-choice-bg:#fff; --work-choice-hover:#edf3f7; --work-choice-border:#bbc3c9;
  --tool-frame:#bbc3c9; --tool-radius:12px; --tool-key-radius:6px;
  --tool-panel:#f1f5f7; --tool-paper:#fff; --tool-display:#fff;
  --tool-shadow:0 4px 14px #28323a20; --tool-card-shadow:none;
  --tool-key:#fff; --tool-key-frame:#aeb8c0; --tool-key-shadow:0 1px 1px #28323a12;
  --tool-special:#e1edf3; --tool-special-ink:#334d60;
  --tool-action:#f2eeee; --tool-action-ink:#84474c;
  --tool-primary:#365e79; --tool-primary-ink:#fff;
  --tool-hint:#e4eef3; --tool-hint-ink:#365e79;
  --tool-answer:#365e79; --tool-answer-ink:#fff;
  --tool-dialog-border:#bbc3c9; --tool-dialog-shadow:0 8px 28px #28323a26;
  --tool-control-shadow:0 1px 2px #28323a12; --tool-control-pressed-shadow:inset 0 1px 2px #28323a20;
}
html[data-iroiro-pop="simple"] body { background:var(--look-bg); color:var(--look-ink); }
html[data-iroiro-pop="simple"] h1 {
  color:#365769; background:none; -webkit-text-fill-color:currentColor; -webkit-text-stroke:0;
  text-shadow:none; filter:none; font-weight:750; letter-spacing:.025em;
}
html[data-iroiro-pop="simple"] :is(.btn-gen,.btn-gen:hover) {
  color:var(--simple-mode-ink,#365769); background:var(--simple-mode-bg,#e5eef3);
  border:1px solid var(--simple-mode-border,#adbfcb); border-radius:8px;
  box-shadow:0 1px 2px #28323a0c; text-shadow:none; transform:none; filter:none;
}
html[data-iroiro-pop="simple"] :is(.btn-gen-soinsu,.btn-gen-addsub,.btn-gen-bunpai) {
  --simple-mode-bg:#e7eee5; --simple-mode-ink:#46634f; --simple-mode-border:#b1c1b0;
}
html[data-iroiro-pop="simple"] :is(.btn-gen-two,.btn-gen-pow,.btn-gen-challenge) {
  --simple-mode-bg:#f3ecdf; --simple-mode-ink:#765d39; --simple-mode-border:#cbbd9f;
}
html[data-iroiro-pop="simple"] .btn-gen:hover { border-color:var(--simple-mode-ink,#365769); box-shadow:inset 0 0 0 1px var(--simple-mode-border,#adbfcb); }
html[data-iroiro-pop="simple"] .btn-gen:active { box-shadow:inset 0 1px 3px #28323a20; }
html[data-iroiro-pop="simple"] .two-sub { color:#765d39; background:#ece2ce; border-color:#cbbd9f; text-shadow:none; }
html[data-iroiro-pop="simple"] .two-sub:hover { background:#e4d7bc; }
html[data-iroiro-pop="simple"] :is(.expr-display,.panel-wrap,.panel) {
  color:var(--look-ink); background:#fff; border:1px solid #c5cbd0; border-radius:12px; box-shadow:none;
}
html[data-iroiro-pop="simple"] .expr-wrap { margin-bottom:10px; }
html[data-iroiro-pop="simple"] .game-type-label {
  color:#46634f; background:#e7eee5; border:1px solid #bdcdbb; border-radius:5px; box-shadow:none;
}
html[data-iroiro-pop="simple"] :is(.answer-reveal-btn,.answer-manual-btn,.btn-undo,.btn-auto-forward,.tenkey-btn,.tenkey-input-view,.auto-calc-toggle-wrap) { border-width:1px; border-color:var(--tool-key-frame); }
html[data-iroiro-pop="simple"] :is(.btn-undo,.btn-auto-forward) { color:#334d60; background:#e4eef3; box-shadow:var(--tool-control-shadow); }
html[data-iroiro-pop="simple"] .btn-auto-forward { background:#dceaf1; border-color:#91a7b7; }
html[data-iroiro-pop="simple"] .btn-next .nav-shape path { fill:#e6eef3; stroke:#91a7b7; stroke-width:1.5; filter:none; }
html[data-iroiro-pop="simple"] #btn-prev .nav-shape path { stroke-width:1.5; }
html[data-iroiro-pop="simple"] #btn-restart-top { border-width:1px; border-radius:8px; box-shadow:none; }
html[data-iroiro-pop="simple"] :is(.tile,.ghost,.bunpai-choice-btn,.bunpai-trail,.tenkey-content) { border-width:1px; }
html[data-iroiro-pop="simple"] :is(.hint-bar.active,.bunpai-hint) { border-color:#bbc3c9; box-shadow:none; }
html[data-iroiro-pop="simple"] :is(.two-num-explain,.oj-explain) { background:#f8fafb; border-width:1px; box-shadow:none; }
html[data-iroiro-pop="simple"] :is(.app-about,.oj-kaisetsu-wrap) { border-width:1px !important; border-radius:10px !important; box-shadow:none; }
html[data-iroiro-pop="simple"] :is(.related-app-btn,.usage-wrap .home-btn) { border-width:1px; box-shadow:none; }
html[data-iroiro-pop="simple"] :is(.win-card,.challenge-intro-overlay > div,.kiroku-overlay > div) { border-width:1px !important; }
html[data-iroiro-pop="simple"] :is(.win-card,.challenge-intro-overlay,.kiroku-overlay) button { border-width:1px !important; }
/* game の共通指定を上書きし、5問チャレンジ案内も白い面・細い枠・影なしにする。 */
html[data-iroiro-pop="simple"] .challenge-intro-overlay {
  background:#28323a66 !important;
  -webkit-backdrop-filter:none; backdrop-filter:none;
}
html[data-iroiro-pop="simple"] .challenge-intro-overlay > div {
  color:var(--look-ink) !important; background:#fff !important;
  border:1px solid var(--look-border) !important; border-radius:10px !important;
  box-shadow:none !important;
}
html[data-iroiro-pop="simple"] .challenge-intro-overlay > div > div:first-child {
  color:var(--look-accent) !important; text-shadow:none;
}
html[data-iroiro-pop="simple"] .challenge-intro-overlay > div > div:nth-child(2) { color:var(--look-muted) !important; }
html[data-iroiro-pop="simple"] .challenge-intro-overlay > div > div:nth-child(3) { color:#46634f !important; }
html[data-iroiro-pop="simple"] .challenge-intro-dd .grade-preset-btn {
  color:var(--look-ink) !important; background:#fff !important;
  border:1px solid var(--look-border) !important; border-radius:6px !important;
  box-shadow:none !important;
}
html[data-iroiro-pop="simple"] .challenge-intro-dd .grade-preset-btn:hover,
html[data-iroiro-pop="simple"] .challenge-intro-dd .grade-preset-btn[aria-expanded="true"] {
  background:var(--look-accent-soft) !important; border-color:#91a7b7 !important;
}
html[data-iroiro-pop="simple"] .challenge-intro-dd .gp-caret { color:var(--look-accent); opacity:1; }
html[data-iroiro-pop="simple"] .challenge-intro-dd .grade-preset-menu {
  color:var(--look-ink) !important; background:#fff !important;
  border:1px solid var(--look-border) !important; border-radius:8px !important;
  box-shadow:none !important;
  -webkit-backdrop-filter:none; backdrop-filter:none;
}
html[data-iroiro-pop="simple"] .challenge-intro-dd .gp-grade { color:var(--look-muted) !important; }
html[data-iroiro-pop="simple"] .challenge-intro-dd .gp-grade:hover,
html[data-iroiro-pop="simple"] .challenge-intro-dd .gp-grade.open { background:#edf3f7 !important; }
html[data-iroiro-pop="simple"] .challenge-intro-dd .gp-item { color:var(--look-ink) !important; }
html[data-iroiro-pop="simple"] .challenge-intro-dd .gp-item:hover {
  color:#334d60 !important; background:#e1edf3 !important;
}
html[data-iroiro-pop="simple"] .challenge-intro-start {
  color:#334d60 !important; background:#e1edf3 !important;
  border:1px solid #91a7b7 !important; border-radius:6px !important;
  box-shadow:none !important;
}
html[data-iroiro-pop="simple"] .challenge-intro-start:hover:not(:disabled) { background:#d6e5ec !important; transform:none; }
html[data-iroiro-pop="simple"] .challenge-intro-start:disabled {
  color:#7b858c !important; background:#edf0f2 !important;
  opacity:.62 !important; cursor:not-allowed !important; box-shadow:none !important; transform:none !important;
}
html[data-iroiro-pop="simple"] :is(.challenge-intro-no,.challenge-intro-kiroku) {
  color:var(--look-ink) !important; background:#fff !important;
  border:1px solid var(--look-border) !important; border-radius:6px !important;
  box-shadow:none !important;
}
html[data-iroiro-pop="simple"] .challenge-intro-kiroku { color:#46634f !important; background:#e7eee5 !important; border-color:#b1c1b0 !important; }
html[data-iroiro-pop="simple"] :is(.challenge-intro-no,.challenge-intro-kiroku):hover { background:#edf3f7 !important; }
html[data-iroiro-pop="simple"] .katex :is([style*="color:transparent"],[style*="color: transparent"]) { text-shadow:none; }
@media(max-width:600px) {
  html[data-iroiro-pop="simple"] h1 { -webkit-text-stroke:0; }
}

/* アプリごとの問題ボタン・図・入力欄にも同じ配色を使う。 */
html[data-iroiro-pop="simple"] {
 --bg:var(--look-bg); --surface:var(--look-surface); --text:var(--look-ink); --subtle:var(--look-muted); --border:var(--look-border); --accent:var(--look-accent);
 --letter-ink:#46634f; --letter-bg:#e7eee5; --letter-border:#b1c1b0;
 --number-ink:#365769; --number-bg:#e5eef3; --number-border:#adbfcb;
 --game-ink:var(--look-ink); --game-blue:var(--look-accent); --game-lime:#e7eee5; --game-orange:#f3ecdf; --game-paper:#fff;
 --calc-ink:var(--look-ink); --calc-muted:var(--look-muted); --calc-panel:#fff; --calc-soft:#edf3f5; --calc-border:var(--look-border);
 --calc-accent:var(--look-accent); --calc-warm:#765d39; --calc-success:var(--look-success); --calc-danger:var(--look-danger); --calc-shadow:#dfe3e6;
 --calc-setting-selected:#e7eee5; --calc-setting-hover:#edf3f5; --calc-setting-primary:#e5eef3; --calc-setting-challenge:#f3ecdf;
 --calc-setting-radius:8px; --calc-setting-button-shadow:0 1px 2px #28323a12;
 --zfig-line:#365769; --zfig-line-rgb:54,87,105; --zfig-label:#765d39; --zfig-accent:#98464b; --zfig-height:#32624d; --zfig-sub-label:#365e79;
 --zfig-face-rgb:90,137,162; --zfig-second-rgb:106,150,125; --zfig-hole-rgb:93,109,120; --zfig-fold-rgb:106,120,136; --zfig-grid-rgb:130,145,156;
}
html[data-iroiro-pop="simple"] body { background:var(--look-bg); }
html[data-iroiro-pop="simple"] h1 { color:#365769; text-shadow:none; -webkit-text-stroke:0; filter:none; }
html[data-iroiro-pop="simple"] h1::after { display:none; }
html[data-iroiro-pop="simple"] :is(.h1-prefix,.subtitle,.tagline,#pop-look-name,#appearance-name) { color:var(--look-muted); text-shadow:none; }
/* 学年ボタン（.grade-btn）は ID 入りの :is() から外す。:is() は中でいちばん強いもの（ID）の強さになるので、
   下の .grade-btn.active（選んでいる学年）が負けて、選んだ学年がほかと同じ白に見えていた（2026-10-12） */
html[data-iroiro-pop="simple"] :is(#pop-look-toggle,#appearance-toggle) { color:var(--look-ink); background:#fff; border:1px solid var(--look-border); border-radius:8px; box-shadow:none; }
html[data-iroiro-pop="simple"] .grade-btn { color:var(--look-ink); background:#fff; border:1px solid var(--look-border); border-radius:8px; box-shadow:none; }
html[data-iroiro-pop="simple"] .grade-btn.active { color:#2f5236; background:#d9e8d5; border-color:#5f8a66; box-shadow:inset 0 0 0 1px #5f8a66; }
html[data-iroiro-pop="simple"] :is(.mode-btn,.mode-card,.combo-btn,.btn-gen) {
 color:var(--simple-mode-ink,#365769); background:var(--simple-mode-bg,#e5eef3); border:1px solid var(--simple-mode-border,#adbfcb);
 border-radius:8px; box-shadow:0 1px 2px #28323a0c; text-shadow:none; filter:none; transform:none;
}
html[data-iroiro-pop="simple"] :is(.mode-btn,.mode-card,.combo-btn,.btn-gen):nth-child(3n+1) { --simple-mode-bg:#e7eee5; --simple-mode-ink:#46634f; --simple-mode-border:#b1c1b0; }
html[data-iroiro-pop="simple"] :is(.mode-btn,.mode-card,.combo-btn,.btn-gen):nth-child(3n+2) { --simple-mode-bg:#f3ecdf; --simple-mode-ink:#765d39; --simple-mode-border:#cbbd9f; }
html[data-iroiro-pop="simple"] :is(.mode-btn,.mode-card,.combo-btn,.btn-gen):hover { transform:none; filter:none; box-shadow:inset 0 0 0 1px var(--simple-mode-border,#adbfcb); }
html[data-iroiro-pop="simple"] :is(.mode-btn,.mode-card,.combo-btn,.btn-gen):active { transform:none; box-shadow:inset 0 1px 3px #28323a20; }
html[data-iroiro-pop="simple"] :is(.mode-btn,.mode-card,.combo-btn,.btn-gen).active { outline:2px solid #708fa1; outline-offset:2px; }
html[data-iroiro-pop="simple"] :is(.sub-btn,.mode-sub-btn,.combo-sub,.mode-sub) { color:inherit; background:#ffffff38; border-color:#adbfcb; text-shadow:none; box-shadow:none; }
html[data-iroiro-pop="simple"] :is(.sub-btn,.mode-sub-btn,.combo-sub,.mode-sub).active { background:#d6e3e9; box-shadow:inset 0 2px 4px #28323a30; }
html[data-iroiro-pop="simple"] :is(.question-box,.answer-box,.answer-panel,.steps-box,.steps-panel,.work-wrap,.history-box,.settings) {
 color:var(--look-ink); background:#fff; border:1px solid #c5cbd0; border-radius:12px; box-shadow:none;
}
html[data-iroiro-pop="simple"] .question-box { margin-bottom:8px; }
html[data-iroiro-pop="simple"] :is(.mode-chip,.q-type-label,.game-type-label) { color:#46634f; background:#e7eee5; border:1px solid #bdcdbb; border-radius:5px; box-shadow:none; }
html[data-iroiro-pop="simple"] :is(.shape-nav-current,#btn-restart-top) { color:var(--look-ink)!important; background:#fff!important; border:1px solid var(--look-border)!important; border-radius:8px!important; box-shadow:none!important; }
html[data-iroiro-pop="simple"] :is(.shape-nav-next,.shape-nav-prev) { color:#365769!important; }
html[data-iroiro-pop="simple"] :is(.shape-nav-next,.shape-nav-prev,.btn-next,#btn-prev,#prev-btn) .nav-shape path { fill:#e5eef3; stroke:#91a7b7; stroke-width:1.5; filter:none; }
html[data-iroiro-pop="simple"] :is(.num-panel,.direct-panel,.calc-pad) { color:var(--look-ink); background:var(--tool-panel); border:1px solid var(--tool-frame); border-radius:12px; box-shadow:var(--tool-shadow); }
html[data-iroiro-pop="simple"] :is(.num-display,.direct-display,.calc-display) { color:var(--look-ink); background:#fff; border:1px solid var(--look-border); border-radius:6px; box-shadow:none; }
html[data-iroiro-pop="simple"] :is(.num-btn,.calc-key) { color:var(--look-ink); background:#fff; border:1px solid var(--tool-key-frame); border-radius:6px; box-shadow:var(--tool-key-shadow); }
html[data-iroiro-pop="simple"] :is(.num-btn.op-btn,.calc-key.op) { color:#334d60; background:var(--tool-special); }
html[data-iroiro-pop="simple"] :is(.num-btn.clr-btn,.calc-key.clear) { color:var(--tool-action-ink); background:var(--tool-action); }
html[data-iroiro-pop="simple"] .num-btn.submit-btn { color:#fff; background:var(--tool-primary); border:1px solid var(--tool-key-frame); }
html[data-iroiro-pop="simple"] :is(.tool-btn,.answer-input-btn,.btn-undo,.btn-forward,.restart-btn,.wbtn) { color:#365769; background:#e5eef3; border:1px solid #adbfcb; border-radius:6px; box-shadow:var(--tool-control-shadow); }
html[data-iroiro-pop="simple"] :is(.answer-btn,.btn-answer,.btn-worknext,.wbtn.primary) { color:#765d39; background:#f3ecdf; border:1px solid #cbbd9f; border-radius:6px; box-shadow:var(--tool-control-shadow); }
html[data-iroiro-pop="simple"] :is(.usage-wrap .home-btn,.usage-wrap #sfx-toggle,.usage-wrap #ruby-toggle,.usage-wrap #fx-toggle) { color:var(--look-ink)!important; background:#fff!important; border:1px solid var(--look-border)!important; box-shadow:0 1px 2px #28323a12; }
html[data-iroiro-pop="simple"] :is(.tile,.term-card,.var-x,.var-const,.group-tile,.dist-tile,.frac-block) { border-width:1px; box-shadow:var(--work-card-shadow); }
html[data-iroiro-pop="simple"] .mode-btn .katex [style*="transparent"] { color:transparent!important; text-shadow:none; }

/* アプリ固有の枠も、細い輪郭と白い面で統一。 */
html[data-iroiro-pop="simple"] :is(.op-panel,.game-area-wrap,.work-trail,.qbox-inner,.card-inner,.problem-box,.teiri-sheet,.choices-box,.kanyaku-interactive,.play-area) { color:var(--look-ink); background:#fff; border:1px solid #c5cbd0; border-radius:12px; box-shadow:none; }
html[data-iroiro-pop="simple"] .mode-label { color:#46634f; background:#e7eee5; border:1px solid #bdcdbb; border-radius:5px; box-shadow:none; }
html[data-iroiro-pop="simple"] .choice-btn { border-width:1px; border-color:var(--look-border); border-radius:8px; box-shadow:0 1px 2px #28323a12; }
html[data-iroiro-pop="simple"] :is(.mode-btn,.mode-card,.combo-btn,.btn-gen).active { box-shadow:none; }
html[data-iroiro-pop="simple"] :is(.solved-card,.lock-dialog,.bug-modal,.floating-manual-panel,.manual-calc-panel) { border-width:1px!important; box-shadow:var(--tool-shadow)!important; }
html[data-iroiro-pop="simple"] #ans-tenkey .ansk-content { border:1px solid var(--look-border); border-radius:12px; box-shadow:var(--tool-shadow); }

html[data-iroiro-pop="simple"] :is(#btn-undo,#back-btn,#undo-btn) { color:#365769; background:#e5eef3; border:1px solid #adbfcb; border-radius:6px; box-shadow:var(--tool-control-shadow); }
html[data-iroiro-pop="simple"] :is(#btn-forward,#forward-btn,#auto-forward-btn) { color:#765d39; background:#f3ecdf; border:1px solid #cbbd9f; border-radius:6px; box-shadow:var(--tool-control-shadow); }
html[data-iroiro-pop="simple"] .qbox-mode-label { color:#46634f; background:#e7eee5; border:1px solid #bdcdbb; border-radius:5px; box-shadow:none; }
html[data-iroiro-pop="simple"] body.sp-ui .sp-mode-bar :is(.mode-btn,.mode-card,.combo-btn).active { border-radius:8px; box-shadow:none; }

/* 手書き（えんぴつ）の入口と道具の帯。シンプルでも暗い紺の丸のままだった（2026-10-12）。
   中学・高校のアプリ（natural-appearance.css の明るいデザイン）と同じく、白い面・細い枠にする。
   書いているあいだのえんぴつは、薄い青で塗って「書ける」状態が分かるようにする。
   ⚠️ 線の色（黒・赤に見せる）は game-appearance.css／pop-appearance.css の oj-light-ink がもう受けもっている */
html[data-iroiro-pop="simple"] .sp-hw-tray {
  background: var(--look-surface); border-color: var(--look-border); box-shadow: 0 3px 12px var(--look-shadow);
}
html[data-iroiro-pop="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[data-iroiro-pop="simple"] body.sp-hw-on .sp-hw-main { background: var(--look-accent-soft) !important; border-color: var(--look-accent) !important; }
html[data-iroiro-pop="simple"] .sp-hw-clear::before { filter: brightness(0); opacity: .65; }