:root{
  --ground:#E9EFF2; --surface:#F9FBFC; --raise:#E2EAEE;
  --ink:#102A3A; --muted:#5E7480; --line:#BDCCD3;
  --accent:#007C91; --accent-soft:#D5EDF0; --accent-ink:#FFFFFF;
  --signal:#F2A900; --console:#092C3C; --console-2:#0E4154;
  --lv0:#82949D; --lv1:#C94B3A; --lv1s:#F9E3DF;
  --lv2:#B97800; --lv2s:#F7E9C9; --lv3:#16825B; --lv3s:#DCEFE7;
  --lv4:#176DA5; --lv4s:#DDEAF3;
  --font-jp:"Hiragino Sans","Hiragino Kaku Gothic ProN","Noto Sans JP","Yu Gothic UI","Yu Gothic",Meiryo,system-ui,sans-serif;
  --font-mono:ui-monospace,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;
  --r:4px;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --ground:#07151C; --surface:#0E222C; --raise:#15323E;
    --ink:#E7F0F3; --muted:#91A6AF; --line:#294651;
    --accent:#40C7D4; --accent-soft:#123B45; --accent-ink:#041519;
    --signal:#FFC247; --console:#04151D; --console-2:#0B3445;
    --lv0:#4A585F; --lv1:#FF8B76; --lv1s:#331812;
    --lv2:#EBB44E; --lv2s:#33280F; --lv3:#5FCE97; --lv3s:#11301F;
    --lv4:#77AEF5; --lv4s:#152740;
  }
}
:root[data-theme="dark"]{
  --ground:#07151C; --surface:#0E222C; --raise:#15323E;
  --ink:#E7F0F3; --muted:#91A6AF; --line:#294651;
  --accent:#40C7D4; --accent-soft:#123B45; --accent-ink:#041519;
  --signal:#FFC247; --console:#04151D; --console-2:#0B3445;
  --lv0:#4A585F; --lv1:#FF8B76; --lv1s:#331812;
  --lv2:#EBB44E; --lv2s:#33280F; --lv3:#5FCE97; --lv3s:#11301F;
  --lv4:#77AEF5; --lv4s:#152740;
}

*{box-sizing:border-box}
/* ページ自体はスクロールさせない。スクロールは必ず .body / .uscroll の内側で起きる。
   ここを緩めると下部タブが一緒に流れて消える */
html{height:100%}
body{margin:0; height:100%; overflow:hidden; background-color:var(--ground); color:var(--ink);
  background-image:linear-gradient(rgba(9,44,60,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(9,44,60,.035) 1px,transparent 1px);
  background-size:20px 20px;
  font-family:var(--font-jp); line-height:1.7; -webkit-text-size-adjust:100%}
button{font:inherit; color:inherit; cursor:pointer; background:none; border:0}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:4px}

/* min-height ではなく height。min- だと中身の長さでコンテナが伸びてしまい、
   .body の overflow が効かず、下部タブがページごと流れて消える。

   高さは3段構え。--appH は JS が window.innerHeight から毎回入れる実測値で、
   これが最も確実。dvh は iOS 15.4 / Chrome 108 より前では効かず、
   そこで 100vh に落ちると iOS Safari では表示領域より縦に大きくなり、
   下部タブが画面外へ出る。JSが動く限り --appH がそれを防ぐ。 */
.phone{width:100%; max-width:520px; margin:0 auto; height:100vh; height:var(--appH, 100dvh);
  display:flex; flex-direction:column; background:var(--ground);
  border-left:1px solid var(--line); border-right:1px solid var(--line);
  box-shadow:0 0 45px rgba(9,44,60,.13)}
/* PCでもスマホに近い読み幅に収める。本文・図・上下の操作枠を同じ列に保つ。
   520px以下では画面幅を使い切り、高さ機構（下部タブ固定の3条件）は変えない。 */
@media (max-width:520px){ .phone{border:0; box-shadow:none} }
/* min-height:0 がないと flex項目は中身より縮めず、やはり内側でスクロールしない */
.body{flex:1; min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain; padding-bottom:8px}
/* ユニット画面は上下が枠。本文だけがスクロールする */
.body.frame{overflow:hidden; display:flex; flex-direction:column; padding-bottom:0}
.body.frame>.uscroll{flex:1; min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain}
.body.frame>.foot{position:static}