/* 中学理科 音声教材 — 弱視配慮（大きな文字・高コントラスト）モバイル優先 */
:root{
  --fs: 20px;             /* 基準文字サイズ（JSで拡大縮小） */
  --bg:#0e1512; --fg:#f3f7f4; --muted:#9fb3aa;
  --acc:#2bb673; --acc2:#1c7a4e; --card:#172420; --line:#2c3f37;
  --hi:#ffe27a; --hibg:#5a4a00;
}
html[data-theme="light"]{
  --bg:#fbfdfb; --fg:#10221b; --muted:#4f6b60;
  --acc:#0c8a4e; --acc2:#0a6e3e; --card:#ffffff; --line:#cfe0d7;
  --hi:#1b5e20; --hibg:#fff2b0;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--fg);
  font-family:"Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,system-ui,sans-serif;
  font-size:var(--fs); line-height:1.85; -webkit-text-size-adjust:100%;}
h1,h2{line-height:1.4}

/* 上部バー */
#topbar{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:.5rem;
  padding:.5rem .6rem;background:var(--acc2);color:#fff;flex-wrap:wrap;
  padding-top:max(.5rem,env(safe-area-inset-top));}
#appTitle{font-size:1.05rem;margin:0;flex:1;min-width:8rem;font-weight:700}
.topctrls{display:flex;align-items:center;gap:.35rem;flex-wrap:wrap}
.iconbtn{font-size:1rem;padding:.5rem .7rem;min-height:44px;border:0;border-radius:.6rem;
  background:rgba(255,255,255,.16);color:#fff;font-weight:700;cursor:pointer}
.iconbtn:active{transform:scale(.96)}
.ctl{display:flex;align-items:center;gap:.3rem;font-size:.85rem;color:#fff}
select{font-size:1rem;padding:.45rem;border-radius:.5rem;border:1px solid var(--line);
  background:var(--card);color:var(--fg);min-height:44px}

/* 目次パネル（スライドイン） */
#toc{position:fixed;top:0;left:0;height:100%;width:min(86vw,420px);z-index:40;
  background:var(--card);border-right:1px solid var(--line);overflow-y:auto;
  transform:translateX(-105%);transition:transform .25s ease;padding:1rem .6rem 4rem;
  padding-top:max(1rem,env(safe-area-inset-top));}
#toc.open{transform:translateX(0)}
#scrim{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:35}
.book>summary{font-size:1.15rem;font-weight:800;color:var(--acc);padding:.7rem .4rem;
  cursor:pointer;border-radius:.5rem}
.unit>summary{font-size:1rem;font-weight:700;padding:.55rem .8rem;cursor:pointer;color:var(--fg)}
details{border-bottom:1px solid var(--line)}
.chap{display:block;width:100%;text-align:left;padding:.7rem 1.1rem;margin:.15rem 0;
  font-size:1rem;border:0;border-radius:.5rem;background:transparent;color:var(--fg);cursor:pointer}
.chap:hover{background:var(--bg)}
.chap.active{background:var(--acc);color:#04130c;font-weight:800}

/* 本文 */
#reader{max-width:760px;margin:0 auto;padding:1rem 1.1rem 11rem}
.welcome{padding:2rem .5rem;color:var(--muted)}
.welcome h2{color:var(--fg)}
.hint{font-size:.9em}
#chapterText{white-space:pre-wrap;word-break:normal;overflow-wrap:break-word}
#chapterText .h{display:block;font-weight:800;color:var(--acc);margin:1.5rem 0 .4rem;font-size:1.12em}
#chapterText .sent{cursor:pointer}
#chapterText .sent.cur{background:var(--hibg);color:var(--hi);border-radius:.25rem;
  box-shadow:0 0 0 .15rem var(--hibg)}

/* 再生バー */
#player{position:fixed;left:0;right:0;bottom:0;z-index:30;background:var(--card);
  border-top:1px solid var(--line);padding:.5rem .7rem;
  padding-bottom:max(.5rem,env(safe-area-inset-bottom));box-shadow:0 -4px 18px rgba(0,0,0,.3)}
.nowtitle{font-weight:700;font-size:.95rem;margin:.1rem 0 .35rem;text-align:center;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--fg)}
.seekrow{display:flex;align-items:center;gap:.5rem}
.t{font-variant-numeric:tabular-nums;font-size:.85rem;color:var(--muted);min-width:2.8rem;text-align:center}
#seek{flex:1;height:34px;accent-color:var(--acc)}
.btnrow{display:flex;align-items:center;justify-content:center;gap:.4rem;margin-top:.35rem;flex-wrap:wrap}
.pbtn{font-size:1.1rem;min-width:56px;min-height:52px;border:0;border-radius:.7rem;
  background:var(--bg);color:var(--fg);font-weight:700;cursor:pointer}
.pbtn.play{background:var(--acc);color:#04130c;min-width:76px;font-size:1.4rem}
.pbtn:active{transform:scale(.95)}
.speed{margin-left:.4rem;color:var(--fg)}
@media(min-width:700px){ :root{--fs:21px} .btnrow{gap:.6rem} }