:root{
  --pk-ink:#1d2340; --pk-blue:#2f6bff; --pk-yellow:#ffc933; --pk-coral:#ff7a66; --pk-mint:#3ed1a0; --pk-sky:#cfe0ff; --pk-sub:#4a5275;
  --ja:"M PLUS Rounded 1c","Zen Kaku Gothic New","Hiragino Sans","Noto Sans JP","Yu Gothic",sans-serif;
}
/* 明るい表示のときだけ色を替える（暗い表示は従来のまま。形と絵記号は共通） */
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]){
    --bg:#f3f5fb; --ink:#1d2340; --muted:#4a5275; --line:#cfd6ea;
    --accent:#2f6bff; --accent-soft:#cfe0ff; --green:#0f9a73; --green-dim:#d2f4e8;
    --red-dim:#ffdcd6; --warn:#fff0c2; --amber-dim:#ffefb8;
  }
}
:root[data-theme="light"]{
  --bg:#f3f5fb; --ink:#1d2340; --muted:#4a5275; --line:#cfd6ea;
  --accent:#2f6bff; --accent-soft:#cfe0ff; --green:#0f9a73; --green-dim:#d2f4e8;
  --red-dim:#ffdcd6; --warn:#fff0c2; --amber-dim:#ffefb8;
}
:root{--pk-edge:var(--ink)}
.pk{flex:none;vertical-align:middle}

/* ---------- 上のメニュー ---------- */
header.site{border-bottom:3px solid var(--pk-edge);gap:8px}
.brand-mark{font-family:var(--ja);font-stretch:100%;font-weight:800;font-size:24px;color:var(--accent)}
.gnav{align-items:center;gap:6px}
.gnav a,.gnav .gnavset{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:5px 12px 5px 8px;font-weight:700;color:var(--ink)}
.gnav a.on{background:var(--pk-yellow);color:#1d2340}
.gnav .gnavset{border:3px solid var(--pk-edge);background:var(--surface);color:var(--ink);padding:3px 12px 3px 8px}
.gnav .gnavset:hover{background:var(--accent-soft);color:var(--ink)}
.gnav .pk{width:22px;height:22px}

/* ---------- 上のメニュー（スマホ幅）：絵記号の下に名前を添えて、何のボタンか分かるように ---------- */
@media (max-width:700px){
  header.site{padding-left:12px;padding-right:8px;gap:4px}
  .brand-mark{font-size:22px}
  .gnav{gap:2px}
  .gnav a,.gnav .gnavset{flex-direction:column;justify-content:center;gap:0;min-width:52px;padding:3px 4px 2px;border:2px solid transparent;border-radius:14px;background:transparent;box-shadow:none;font-size:10px;font-weight:800;line-height:1.25;color:var(--ink)}
  .gnav a.on{background:var(--pk-yellow);border-color:var(--pk-edge)}
  .gnav .pk{width:24px;height:24px}
  .gnav .gl{display:block;white-space:nowrap}
}

/* ---------- ボタン ---------- */
.btn{border:3px solid var(--pk-edge);background:var(--pk-blue);color:#fff;border-radius:999px;box-shadow:0 3px 0 var(--pk-edge);font-weight:800}
.btn:active{transform:translateY(2px);box-shadow:0 1px 0 var(--pk-edge)}
.btn.ghost{background:var(--surface);color:var(--ink)}
.pill{border:3px solid var(--pk-edge);background:var(--pk-yellow);color:#1d2340;font-weight:800}
.pill.ghost{background:var(--surface);color:var(--ink)}

/* ---------- ホーム：探す・絞り込み ---------- */
.searchbar input{border:3px solid var(--pk-edge);border-radius:999px;padding:9px 16px;background:var(--surface)}
.searchbar .btn,.fopen{padding:7px 14px}
.fopen{background:var(--surface);color:var(--ink)}
.fcount{background:var(--pk-coral);color:#fff;border-radius:999px}
.achip,.pcchip,.sortopt{border-radius:999px}
.fchips label span{border:3px solid var(--pk-edge);border-radius:999px}
.fchips input:checked+span{background:var(--pk-yellow);color:#1d2340}

/* 英会話問答の帯（場面カードの絵はそのまま。外枠と文字の色だけ） */
.libwrap .kwstrip{background:var(--pk-blue);border:3px solid var(--pk-edge);border-radius:26px;box-shadow:0 4px 0 var(--pk-edge);padding:14px 0 12px}
.libwrap .kwst,.libwrap .kwst span,.libwrap .kwsall{color:#fff}
.libwrap .kwst b{font-size:20px}
.libwrap .kwsall{background:var(--pk-yellow);color:#1d2340;border:3px solid var(--pk-edge);border-radius:999px;padding:2px 12px}
.libwrap .kwsc{border:3px solid var(--pk-edge);border-radius:18px;box-shadow:0 4px 0 var(--pk-edge)}
.libwrap .kwsth{border:2px solid var(--pk-edge);border-radius:12px}
.libwrap .kwsm{color:#e0602e}

/* 教材のカード：絵を上に大きく */
.cards{gap:14px}
@media (min-width:700px){.cards{grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px}}
.card{border:3px solid var(--pk-edge);border-radius:22px;box-shadow:0 4px 0 var(--pk-edge);overflow:hidden}
.card-a{grid-template-columns:minmax(0,1fr);gap:0;padding:0}
.card-a .cover{width:100%;aspect-ratio:auto;height:128px;border-radius:0;border-bottom:3px solid var(--pk-edge)}
.card-a .cover img{object-position:50% 40%}
.card-a .cbody{padding:10px 14px 12px}
.card .star{top:8px;right:8px;width:38px;height:38px;border-radius:50%;background:var(--surface);border:3px solid var(--pk-edge);font-size:18px;line-height:1;display:grid;place-items:center;padding:0;color:#b9c0d8}
.card .star.on{background:var(--pk-yellow);color:#1d2340}
.newb{background:var(--pk-coral);color:#fff;border-radius:999px}
.pbar{height:10px;border:2px solid var(--pk-edge);border-radius:999px;background:var(--surface);overflow:hidden}
.pbar i{background:var(--pk-mint)}

/* ---------- 設定の窓（上の「設定」） ---------- */
.setsheet{border:3px solid var(--pk-edge);border-radius:26px}
.sethead{border-bottom:3px solid var(--pk-edge)}
.sethead h2{font-weight:800}
.setx{border:3px solid var(--pk-edge);background:var(--surface)}
.setgrp{border-bottom:2px dashed var(--line)}
.setgrp h3{color:var(--ink);font-size:14px;letter-spacing:.04em}
.seg{border:3px solid var(--pk-edge);border-radius:999px;background:var(--bg);padding:2px;gap:2px}
.seg button{border:0;border-radius:999px;background:transparent}
.seg button[aria-pressed="true"]{background:var(--pk-yellow);color:#1d2340}
.setfoot .pill{background:var(--pk-yellow)}

/* ---------- 単元（再生画面）：色と丸みだけ ---------- */
.player .act,.player button.act{border-radius:999px}

/* 設定の窓の見出しの絵記号（pict.js） */
.setgrp h3{align-items:center;gap:10px}
.pk-dot{flex:none;width:36px;height:36px;border-radius:50%;border:3px solid var(--pk-edge);display:inline-grid;place-items:center}
.setgrp h3{font-size:16px;font-weight:800;letter-spacing:0}
.setgrp h3::after{display:none}
.setsheet .seg{background:transparent;border:0;padding:0;gap:6px}
.setsheet .seg button{border:3px solid var(--pk-edge);background:var(--surface);padding:3px 13px}
.setsheet .seg button:last-child{border-right:3px solid var(--pk-edge)}
.setsheet .seg button:hover{border-color:var(--pk-edge);background:var(--accent-soft)}
.setsheet .seg button[aria-pressed="true"]{background:var(--pk-yellow);border-color:var(--pk-edge);color:#1d2340;font-weight:800}
.mbtn[aria-pressed="true"]{background:var(--pk-yellow);border-color:var(--pk-edge);color:#1d2340}
.setsheet .act,.setsheet .setx{border:3px solid var(--pk-edge);border-radius:999px}

/* 並べ替え・管理者の帯：選んでいるものは黄色 */
.sortopt{border:3px solid var(--pk-edge)}
.sortopt.on{box-shadow:none;border-color:var(--pk-edge)}
.sortopt.on .sortname{background:var(--pk-yellow);color:#1d2340}
.sortopt.on .sortarrow.on{background:var(--pk-sky);color:#1d2340!important}
.admbar .admseg a[aria-current="true"]{background:var(--pk-yellow);color:#1d2340}

/* ---------- 単元の画面の上の欄：字が切れないように ---------- */
.moderow .subseg{flex-wrap:wrap}
.moderow .subseg .seg{flex:1 1 200px;border-width:2px;border-radius:999px;padding:2px;gap:2px;overflow:visible;flex-wrap:wrap;border-color:var(--pk-edge)}
.moderow .subseg .seg button{flex:1 0 auto;min-width:max-content;border:0;border-radius:999px;color:var(--ink);padding:5px 10px;text-overflow:clip}
.moderow .subseg .seg button[aria-pressed="true"]{background:var(--pk-yellow);color:#1d2340;font-weight:800}
@media (max-width:560px){ .moderow .subseg{grid-column:1 / -1} }
.moderow .seg{border-color:var(--pk-edge);border-width:2px;border-radius:999px}
.moderow .seg button{border-radius:999px}
.moderow .seg button[aria-pressed="true"]{background:var(--pk-yellow);color:#1d2340;font-weight:800}

/* ---------- 単元（再生画面）：モック準拠の絵記号つき操作 ---------- */
.bar{border:3px solid var(--pk-edge);border-radius:26px;box-shadow:0 4px 0 var(--pk-edge);background:var(--surface)}
.chapbtn{border:3px solid var(--pk-edge);border-radius:999px;font-weight:800}
.chapgo,.chapops{border:3px solid var(--pk-edge);border-radius:999px;font-weight:800}
.chapgo{background:var(--pk-yellow);color:#1d2340}
.foldbar{border:3px solid var(--pk-edge);border-radius:999px;background:var(--pk-sky);color:#1d2340;font-weight:800}
.flowseg{border:3px solid var(--pk-edge);border-radius:999px;background:var(--bg);padding:2px;gap:2px;overflow:hidden}
.flowseg button{border:0;border-radius:999px;background:transparent;color:var(--ink);font-weight:700}
.flowseg button[aria-pressed="true"]{background:var(--pk-yellow);color:#1d2340;font-weight:800}
/* 下の操作ボタン：丸い絵記号。止めるは大きな緑 */
.barbtns{align-items:flex-end}
.bbtn{border:3px solid var(--pk-edge);border-radius:20px;background:var(--surface);color:#1d2340;font-weight:800;box-shadow:0 3px 0 var(--pk-edge);min-height:56px}
.bbtn:active:not(:disabled){transform:translateY(2px);box-shadow:0 1px 0 var(--pk-edge)}
.bbtn svg{width:22px;height:22px;padding:4px;box-sizing:content-box;border-radius:50%;background:var(--pk-sky);border:2px solid var(--pk-edge)}
.bbtn#resumeBtn svg{background:var(--pk-yellow)}
.bbtn.auto svg{background:var(--pk-mint)}
.bbtn.auto[aria-pressed="true"]{background:var(--pk-yellow)}
.bbtn.stop{background:var(--pk-mint);min-height:64px}
.bbtn.stop:disabled{background:var(--surface)}
.bbtn.stop:not(:disabled){border-color:var(--pk-edge);color:#1d2340}
.bbtn.stop svg{background:#fff}
.bbtn:disabled{opacity:.45}
/* 繰り返し・通しのタイル */
.pmodes{gap:8px}
.mbtn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;border:3px solid var(--pk-edge);border-radius:20px;background:var(--surface);color:#1d2340;font-weight:800;box-shadow:0 3px 0 var(--pk-edge);padding:8px 6px}
.mbtn svg{width:20px;height:20px;padding:5px;box-sizing:content-box;border-radius:50%;border:2px solid var(--pk-edge);background:var(--pk-sky)}
#contBtn svg{background:var(--pk-sky)} #rptOneBtn svg{background:var(--pk-yellow)} #rptAllBtn svg{background:var(--pk-mint)}
#shufBtn svg{background:#ffc9c1} #expBtn svg{background:#ffe9a8}
.mbtn[aria-pressed="true"]{background:var(--pk-yellow)}
.mbtn:disabled{opacity:.45}
.speed{border:3px solid var(--pk-edge);border-radius:20px;padding:8px 10px;background:var(--surface)}
.spstep{border:3px solid var(--pk-edge);border-radius:50%;background:var(--pk-yellow);color:#1d2340;font-weight:800}
/* 合図のランプ */
.lamp{font-weight:800;color:var(--ink)}
.lamp i{width:24px;height:24px;border:3px solid var(--pk-edge)}
.lamp.white.on i{background:var(--pk-yellow);box-shadow:none}.lamp.red.on i{background:var(--pk-coral);box-shadow:none}.lamp.green.on i{background:var(--pk-mint);box-shadow:none}
/* 例文のカード：太い縁、絵記号つきのボタン */
.line{border:3px solid var(--pk-edge);border-radius:22px;box-shadow:0 4px 0 var(--pk-edge)}
.line.is-playing,.line.q-active{border-color:var(--pk-edge);background:#fff9df;box-shadow:0 4px 0 var(--pk-edge),0 0 0 4px var(--pk-yellow)}
.line .act{border:3px solid var(--pk-edge);background:var(--surface);color:#1d2340;font-weight:800;border-radius:999px;box-shadow:0 3px 0 var(--pk-edge);padding:5px 14px 5px 6px;gap:8px}
.line .act:active{transform:translateY(2px);box-shadow:0 1px 0 var(--pk-edge)}
.line .act svg{width:16px;height:16px;padding:5px;box-sizing:content-box;border-radius:50%;border:2px solid var(--pk-edge);background:var(--pk-sky);fill:#1d2340}
.line .act.rep svg{background:var(--pk-mint)}
.line .act.exp-btn svg{background:#ffe9a8}
.line .act.mic svg{background:#ffc9c1}
.line .act.qa{background:var(--pk-blue);color:#fff}
.line .act.qa svg{background:var(--pk-yellow)}
.line .act.cnext{padding-left:14px}
.line .act.cnext svg{background:var(--pk-sky)}
/* 設定の窓：見出しごとにカード */
.setgrp{border:3px solid var(--pk-edge);border-radius:22px;background:var(--surface);padding:14px;margin:0 0 14px;box-shadow:0 4px 0 var(--pk-edge)}
.setgrp h3{margin:0 0 10px}

/* 「始める」「次の単元へ」など大きな出だしのボタン、小さな pill */
.qg{border:3px solid var(--pk-edge);border-radius:999px;box-shadow:0 4px 0 var(--pk-edge);font-weight:800}
.qg-start{background:var(--pk-blue);color:#fff}
.qg-start svg{background:var(--pk-yellow);color:#1d2340;fill:#1d2340;border-radius:50%;padding:4px;box-sizing:content-box;width:16px;height:16px;border:2px solid var(--pk-edge)}
.qg-next{background:#fff;color:#1d2340}
.pill{border:3px solid var(--pk-edge);background:var(--pk-blue);color:#fff;font-weight:800;box-shadow:0 3px 0 var(--pk-edge)}
.pill.ghost{background:#fff;color:#1d2340}
.pill.sm{box-shadow:0 2px 0 var(--pk-edge)}
.pill:active{transform:translateY(2px);box-shadow:0 1px 0 var(--pk-edge)}

/* ---------- 2026-10-05 英語指示書10 ---------- */
/* ① 畳める帯（流す言葉・解説／繰り返し・速さ）：開け閉めできると分かるように。
   NN/g の調査（Accordion Icons: Which Signifiers Work Best?）で最も伝わったのは「下向きの山形（caret）」を右端に置く形。
   開いたら上向きに回して「閉じられる」ことを示す。押せる丸の中に大きく描き、言葉（ひらく／とじる）も添える */
.foldbar{height:38px;padding:0 4px 0 14px;gap:8px}
.foldbar svg{order:3;width:16px;height:16px;padding:5px;box-sizing:content-box;border-radius:50%;background:var(--pk-yellow);border:2px solid var(--pk-edge);stroke-width:2.6;transition:transform .2s}
.foldbar svg path{stroke-width:2.6}
.foldbar::after{content:'ひらく';order:2;flex:none;font-size:11px;font-weight:800;color:#1d2340;letter-spacing:.02em}
.foldbar[aria-expanded="true"]::after{content:'とじる'}
.foldbar[aria-expanded="true"]{background:var(--pk-yellow)}
.foldbar[aria-expanded="true"] svg{background:#fff}
.foldbar .fs{order:1}
@media (hover:hover){ .foldbar:hover svg{transform:translateY(2px)} .foldbar[aria-expanded="true"]:hover svg{transform:rotate(180deg) translateY(2px)} }

/* ② 英訳チャレンジのカードと、カード外の操作ボタンも、例文のカードと同じ形に */
.chcard{border:3px solid var(--pk-edge);border-radius:22px;box-shadow:0 4px 0 var(--pk-edge)}
.chcard .act,.wpbtns .act,.fphead .act,.rnav .act{border:3px solid var(--pk-edge);background:var(--surface);color:#1d2340;font-weight:800;border-radius:999px;box-shadow:0 3px 0 var(--pk-edge);padding:5px 14px 5px 6px;gap:8px}
.chcard .act:active,.wpbtns .act:active,.fphead .act:active,.rnav .act:active{transform:translateY(2px);box-shadow:0 1px 0 var(--pk-edge)}
.chcard .act svg,.wpbtns .act svg,.fphead .act svg,.rnav .act svg{width:16px;height:16px;padding:5px;box-sizing:content-box;border-radius:50%;border:2px solid var(--pk-edge);background:var(--pk-sky);fill:#1d2340}
.chcard .act.hint svg,.line .act.hint svg{background:var(--pk-yellow)}
.chcard .act.eye svg{background:var(--pk-mint)}
.chcard .act.rep svg,.rnav .act svg{background:var(--pk-mint)}
.chcard .act.exp-btn svg{background:#ffe9a8}
.chcard .act.quit svg{background:#ffc9c1}
.chcard .act.cnext svg{background:var(--pk-sky)}
.chen.hidden[data-act]{border:3px dashed var(--pk-edge);border-radius:18px;background:var(--pk-sky);color:#1d2340}
.chen.hidden[data-act]:hover,.chen.hidden[data-act]:focus-visible{background:var(--pk-yellow)}
.chen.hidden[data-act]::after{color:#1d2340}
.chcard .grade button{border:3px solid var(--pk-edge);border-radius:999px;box-shadow:0 3px 0 var(--pk-edge);background:var(--surface);color:#1d2340;font-weight:800}
.chcard .grade .g-ok{background:var(--pk-mint)} .chcard .grade .g-meh{background:var(--pk-yellow)} .chcard .grade .g-ng{background:#ffc9c1}
.chcard .grade button:active{transform:translateY(2px);box-shadow:0 1px 0 var(--pk-edge)}
.line .act.rep svg{background:var(--pk-mint)}


:root{
  --pk-blue:#2a62ee;
  --pk-on-face:#1d2340;
  --pk-on-surface:var(--ink);
  --pk-hi-bg:#fff9df;
  --pk-hi-ink:var(--ink);
  --pk-hi-sub:var(--muted);
  --pk-fold-bg:var(--pk-sky);
  --pk-fold-ink:#1d2340;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --pk-edge:#5d6f88;
    --pk-on-surface:#e6ecf1;
    --pk-hi-bg:#3a3120;
    --pk-hi-ink:#f1f4f7;
    --pk-hi-sub:#c3cdd7;
    --pk-fold-bg:#22324a;
    --pk-fold-ink:#e6ecf1;
    --muted:#aab6c2;
  }
  :root:not([data-theme="light"]) body.player{--accent:color-mix(in srgb,var(--lesson-accent,#8db4e2) 58%,#fff)}
}
:root[data-theme="dark"]{
  --pk-edge:#5d6f88;
  --pk-on-surface:#e6ecf1;
  --pk-hi-bg:#3a3120;
  --pk-hi-ink:#f1f4f7;
  --pk-hi-sub:#c3cdd7;
  --pk-fold-bg:#22324a;
  --pk-fold-ink:#e6ecf1;
  --muted:#aab6c2;
}
:root[data-theme="dark"] body.player{--accent:color-mix(in srgb,var(--lesson-accent,#8db4e2) 58%,#fff)}
body.player{--accent:var(--lesson-accent,#2f6bff)}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) body.player{--accent:color-mix(in srgb,var(--lesson-accent,#8db4e2) 58%,#fff)} }

/* ① 暗い面の上の文字は --ink（濃紺固定をやめる） */
.mbtn,.bbtn,.line .act,.chcard .act,.wpbtns .act,.fphead .act,.rnav .act,.chcard .grade button,
.gnav .gnavset,.chapbtn,.chapops,.speed,.speed .spstep{color:var(--pk-on-surface)}
/* 選んでいる・固定色の面は、これまでどおり濃紺 */
.mbtn[aria-pressed="true"],.bbtn.auto[aria-pressed="true"],.bbtn.stop,.bbtn.stop:not(:disabled),
.chcard .grade .g-ok,.chcard .grade .g-meh,.chcard .grade .g-ng,
.gnav a.on,.chapgo,.line .act.hint,.fchips input:checked+span{color:var(--pk-on-face)}
.bbtn.stop:disabled{color:var(--pk-on-surface)}
.qg-next small{color:#4a5275}
/* 丸い絵記号（水色・黄・ミント・珊瑚・クリーム）の中の記号は常に濃紺 */
.mbtn svg,.bbtn svg,.line .act svg,.chcard .act svg,.wpbtns .act svg,.fphead .act svg,.rnav .act svg{color:var(--pk-on-face);fill:var(--pk-on-face)}
.mbtn svg [stroke],.bbtn svg [stroke],.line .act svg [stroke],.chcard .act svg [stroke]{stroke:#fff}
.gnav .pk{color:var(--pk-on-face)}
/* 設定の絵記号は、面の無い細い3本線（地の色に合わせる）。スマホ幅では地が透明なので --ink、パソコン幅では --surface の上なので --ink */
.gnav .pk-sliders{color:var(--pk-on-surface)}

/* ② 畳める帯：暗い表示は暗い面に明るい文字、開いた時は黄の面に濃紺 */
.foldbar{background:var(--pk-fold-bg);color:var(--pk-fold-ink)}
.foldbar .fl,.foldbar .fs,.foldbar::after{color:var(--pk-fold-ink)}
.foldbar[aria-expanded="true"]{background:var(--pk-yellow)}
.foldbar[aria-expanded="true"] .fl,.foldbar[aria-expanded="true"] .fs,.foldbar[aria-expanded="true"]::after,
.foldbar[aria-expanded="true"]:hover .fl{color:var(--pk-on-face)}
.foldbar svg{color:var(--pk-on-face)}

/* ③ いま読んでいる文のカード：面と文字を対に（暗い表示は暗い琥珀＋黄の枠） */
.line.is-playing,.line.q-active{background:var(--pk-hi-bg);color:var(--pk-hi-ink)}
.line.is-playing .ja,.line.q-active .ja,.line.is-playing .small,.line.q-active .small,
.line.is-playing .muted,.line.q-active .muted,.line.is-playing .exp,.line.q-active .exp{color:var(--pk-hi-sub)}
.line.is-playing .en-text,.line.q-active .en-text,.line.is-playing .en,.line.q-active .en{color:var(--pk-hi-ink)}

/* ④ 暗い表示の枠：太い明るい枠をやめ、2px の中間色に */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .bar,:root:not([data-theme="light"]) .line,:root:not([data-theme="light"]) .card,
  :root:not([data-theme="light"]) .setgrp,:root:not([data-theme="light"]) .speed{border-width:2px}
  :root:not([data-theme="light"]) header.site{border-bottom-width:2px}
}
:root[data-theme="dark"] .bar,:root[data-theme="dark"] .line,:root[data-theme="dark"] .card,
:root[data-theme="dark"] .setgrp,:root[data-theme="dark"] .speed{border-width:2px}
:root[data-theme="dark"] header.site{border-bottom-width:2px}

/* ⑤ ラベルが枠線にはみ出さない（明るい・暗い共通）：app.css がスマホ幅で .mbtn の高さを 42px に固定しているのを外す */
@media (max-width:860px){
  .pmodes .mbtn,.tailrow .pmodes .mbtn{height:auto;min-height:64px;padding:6px 3px 7px;gap:3px;justify-content:center;overflow:visible}
  .pmodes .mbtn span{font-size:11px;line-height:1.2;white-space:nowrap;letter-spacing:0}
  .pmodes .mbtn svg{width:16px;height:16px;padding:4px;border-width:2px}
}

/* ⑥ 明るい表示：地が明るいので、緑・琥珀・単元ごとの色を少し濃くして 4.5:1 を超える（暗い表示は上で明るくしている） */
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]){--green:#0a6f52;--amber:#8a5a0b}
  :root:not([data-theme="dark"]) body.player{--accent:color-mix(in srgb,var(--lesson-accent,#2f6bff) 78%,#000)}
}
:root[data-theme="light"]{--green:#0a6f52;--amber:#8a5a0b}
:root[data-theme="light"] body.player{--accent:color-mix(in srgb,var(--lesson-accent,#2f6bff) 78%,#000)}

/* ⑦ 他の画面（教材一覧・マイページ・管理・案内・編集・ログイン）の 4.5:1 未満（2026-10-06 全画面の実測で残った分）
   ・明るい表示の青 #2f6bff は白地で 4.499:1 とぎりぎり足りない → #1f50cc（白地 6.8:1・水色の面の上 5.1:1）
   ・「NEW」の白文字は珊瑚色の面で 2.55:1 → 濃紺（6.4:1）。英会話の帯の小さなオレンジ文字は白地で 3.6:1 → #b4471a（5.2:1） */
@media (prefers-color-scheme: light){ :root:not([data-theme="dark"]){--accent:#1f50cc} }
:root[data-theme="light"]{--accent:#1f50cc}
.newb{color:#1d2340}
.libwrap .kwsm{color:#b4471a}