/* ST Toolbox / リハビリ教材キャビネット 共通スタイル
   設計方針:
   - シンプル最優先。装飾は最小、余白と文字サイズで整える
   - 画面と紙で完全に別レイアウト。紙には UI・広告を一切出さない
   - 広告は「生成・印刷ボタンから物理的に離す」ためのクラスを用意する
*/
:root{
  --bg:#fbf4ea; --panel:#fff; --ink:#3a3128; --muted:#8a7f70;
  --line:#e8ddcc; --blue:#4f95c9; --blue-ink:#2f6f9e; --ok:#34c277;
  --warn:#d9822b;
}
/* ---------- 書体 ----------
   webfont（Google Fonts の M PLUS Rounded 1c）はやめた。配信される Noto/M PLUS 系は
   Windows 用のヒント情報が入っていないので、96dpi の古いモニターだと
   輪郭がドットに乗らずガタつく（＝ガビガビに見える）。高解像度の画面では出ない。
   代わりに OS に入っている書体を使う:
     Mac  … ヒラギノ（丸ゴシック→角ゴシック）
     Win  … 画面（--ui）はメイリオを先に置く。Yu Gothic Regular は高dpi前提の設計で
            96dpi だと線が細く途切れる。指定しないと最後は MS Pゴシック＝
            埋め込みビットマップのギザギザに落ちる。

   ⚠️ 紙（--paper）は Yu Gothic を先のままにしてある。メイリオは字幅が広く、
      先頭に置いたらしりとりの紙が 120mm はみ出した（レベルスイープが検出）。
      紙の中身は固定mmで組んであって Yu Gothic の字幅で詰めてある。
      そもそもガビガビの原因は webfont で、それは画面側にしか掛かっていない。
      印刷は300dpi以上でラスタライズされるのでヒントの有無は関係しない。
      メイリオは Yu Gothic が無い古いWindows用の受け皿として後ろに置く。 */
:root{
  --ui:'Hiragino Maru Gothic ProN','Hiragino Kaku Gothic ProN',Meiryo,
       'Yu Gothic Medium','Yu Gothic','Noto Sans JP',sans-serif;
  --paper:'Hiragino Kaku Gothic ProN','Hiragino Sans','Yu Gothic',Meiryo,
          'Noto Sans JP',sans-serif;
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
html,body{margin:0; padding:0;}
body{
  font-family:var(--ui);
  color:var(--ink); background:var(--bg); line-height:1.7;
}
a{color:var(--blue-ink);}
.wrap{max-width:900px; margin:0 auto; padding:16px;}
.wrap-wide{max-width:1100px;}

/* ---------- ヘッダー ---------- */
header#app-header{
  background:var(--panel); border-bottom:1px solid var(--line);
  padding:10px 16px; display:flex; align-items:center; gap:12px;
  position:sticky; top:0; z-index:20;
}
.app-title{font-weight:800; font-size:18px; line-height:1.3;}
.app-title small{display:block; font-weight:500; font-size:11px; color:var(--muted);}
.app-title small a{color:var(--muted); text-decoration:none;}
.hdr-spacer{flex:1;}
.hdr-cabinet{
  display:inline-flex; align-items:center; gap:6px; text-decoration:none;
  background:#fff; border:1px solid var(--line); border-radius:999px;
  padding:6px 14px; font-weight:700; font-size:13px; color:var(--ink);
}
.hdr-cabinet .count{
  background:var(--blue); color:#fff; border-radius:999px;
  min-width:20px; text-align:center; font-size:12px; padding:0 6px;
}
.hdr-cabinet.empty .count{background:#c9bfae;}

/* ---------- パンくず ---------- */
.crumb{font-size:12px; color:var(--muted); padding:10px 0 0;}
.crumb a{color:var(--muted);}

/* ---------- 見出し ---------- */
h1{font-size:24px; margin:14px 0 6px; line-height:1.4;}
h2{font-size:19px; margin:28px 0 10px; padding-bottom:6px; border-bottom:2px solid var(--line);}
h3{font-size:16px; margin:20px 0 6px;}
.lead{color:var(--muted); font-size:14px; margin:0 0 18px;}

/* ---------- パネル（操作盤） ---------- */
.panel{
  background:var(--panel); border:1px solid var(--line); border-radius:12px;
  padding:16px; margin:16px 0;
}
.panel h2{margin-top:0; border:none; font-size:16px;}
.row{display:flex; flex-wrap:wrap; gap:14px 20px; align-items:flex-end;}
.field{display:flex; flex-direction:column; gap:4px; min-width:120px;}
.field label{font-size:12px; font-weight:700; color:var(--muted);}
select,input[type=number],input[type=text]{
  font:inherit; font-size:14px; padding:7px 10px;
  border:1px solid var(--line); border-radius:8px; background:#fff; color:var(--ink);
}
.chips{display:flex; flex-wrap:wrap; gap:6px;}
.chip{
  font-size:13px; padding:5px 12px; border:1px solid var(--line);
  border-radius:999px; background:#fff; cursor:pointer; user-select:none;
}
.chip.on{background:var(--blue); border-color:var(--blue); color:#fff; font-weight:700;}
.hint{font-size:12px; color:var(--muted); margin:8px 0 0;}
.warnbox{
  background:#fff6e9; border:1px solid #f0d9b5; border-radius:8px;
  padding:10px 12px; font-size:13px; margin:10px 0 0; color:#8a5a1a;
}

/* ---------- ボタン ---------- */
.btns{display:flex; flex-wrap:wrap; gap:10px; margin-top:16px;}
button{font:inherit; cursor:pointer;}
.btn{
  border:1px solid var(--line); background:#fff; color:var(--ink);
  border-radius:10px; padding:10px 18px; font-weight:700; font-size:14px;
}
.btn.primary{background:var(--blue); border-color:var(--blue); color:#fff;}
.btn.go{background:var(--ok); border-color:var(--ok); color:#fff;}
.btn:disabled{opacity:.45; cursor:not-allowed;}
.btn.sm{padding:6px 12px; font-size:13px; border-radius:8px;}
.btn.danger{color:#b0413e; border-color:#e8c4c3;}

/* ---------- ハブのカード一覧 ---------- */
.cards{
  display:grid; gap:12px; margin:14px 0 0;
  grid-template-columns:repeat(auto-fill,minmax(230px,1fr));
}
.card{
  display:block; text-decoration:none; color:inherit; background:var(--panel);
  border:1px solid var(--line); border-radius:12px; padding:14px 16px;
}
.card:hover{border-color:var(--blue); box-shadow:0 2px 10px rgba(79,149,201,.12);}
.card .t{font-weight:800; font-size:15px; margin-bottom:4px;}
.card .d{font-size:12.5px; color:var(--muted); line-height:1.6;}
.card .tag{
  display:inline-block; font-size:11px; font-weight:700; border-radius:4px;
  padding:1px 7px; margin-bottom:6px; background:#eef5fb; color:var(--blue-ink);
}
.card .tag.speech{background:#eaf6ef; color:#3f7a56;}
.card .tag.kouji{background:#f3eefb; color:#6b4fa8;}
.card .tag.calc{background:#fbf1e8; color:#9a6634;}
.card .tag.soon{background:#f2efe9; color:#8a7f70;}
/* 症状から探す入口。教材のタグ（棚の色）と別物だと分かるように濃いめ。 */
.card .tag.lp{background:#4f95c9; color:#fff;}

/* ---------- 用紙プレビュー ---------- */
.sheet-wrap{
  overflow:auto; background:#e9e1d4; border-radius:12px;
  padding:18px; margin:16px 0;
}
/* 画面の1枚＝A4そのもの（210×297mm）。
   紙では @page の余白（8mm/7mm）が外に出るので .sheet は 196×280mm になる。
   どちらでも「中身が入る箱」は 196mm 幅で一致する＝画面で見たとおりに刷れる。
   ここを揃えないと、生成器が固定mmで組んだ中身が紙の上で左に寄る。 */
.sheet{
  width:210mm; height:297mm; margin:0 auto; background:#fff;
  padding:0; box-shadow:0 2px 14px rgba(0,0,0,.14);
  font-family:var(--paper);
  color:#000; line-height:1.6;
}
.sheet + .sheet{margin-top:18px;}
/* 画面では最初の数枚だけ見せる。60枚ぶんのA4を並べると、スクロールが重くなるうえに、
   下の解説まで誰も到達しない。紙には全部出す＝印刷はこのDOMをそのまま刷るので、
   .folded を display:none のままにしてはいけない（@media print で戻している）。 */
.sheet.folded{display:none;}
.foldnote{ text-align:center; margin:16px 0 0; font-size:13px; color:var(--muted); }
.foldnote button{
  margin-left:10px; font:inherit; cursor:pointer; color:#2b4a8a;
  background:#fff; border:1px solid var(--line); border-radius:999px; padding:5px 14px;
}
.foldnote button:hover{ background:#f4f1ea; }
.sheet-inner{padding:8mm 7mm; height:100%; display:flex; flex-direction:column;}
.sheet-head{
  display:flex; align-items:flex-end; gap:12px;
  border-bottom:2px solid #000; padding-bottom:5px; margin-bottom:9mm;
}
.sheet-head .st{font-size:15pt; font-weight:700; flex:1;}
.sheet-head .sub{font-size:9pt; color:#444;}
.sheet-meta{display:flex; gap:14px; font-size:9pt; color:#333; margin-bottom:6mm;}
.sheet-meta span{border-bottom:1px solid #999; min-width:32mm; padding-bottom:2px;}
.sheet-foot{
  margin-top:7mm; padding-top:4px; border-top:1px solid #bbb;
  font-size:7.5pt; color:#777; display:flex; justify-content:space-between;
}
.sheet-note{font-size:9.5pt; color:#333; margin:0 0 6mm; padding:5px 8px; background:#f4f4f4;}

/* ---------- 用紙を縦にも埋める ----------
   本文は残りの高さを全部もらい、余った分を行間に配る。
   これが無いと中身は上から詰まって終わり＝下半分が白いプリントになる。 */
.sheet-body{
  flex:1 1 auto; min-height:0;
  display:flex; flex-direction:column; justify-content:space-between;
}
.sheet-body > .wgrid{flex:1 1 auto; align-content:space-between;}
/* 生成器側で「ここを伸ばす」と指定するための入れ物 */
.wfill{flex:1 1 auto; min-height:0; display:flex; flex-direction:column; justify-content:space-between;}
.wcenter{margin:auto 0;}
/* 全面SVG（迷路・順番つなぎ・線分・点つなぎ）を残りの高さいっぱいに伸ばす */
.wfit{flex:1 1 auto; min-height:0; position:relative;}
.wfit > svg{position:absolute; left:0; top:0; width:100%; height:100%;}

/* 解答面は「読む紙」で、書き込む余白が要らない。
   問題面と同じに引き伸ばすと6行が1枚に散らばって、目で追えない紙になる。
   枠（sheet-body）は伸ばしたまま＝フッターは紙の下に残し、中身だけ上に詰める。 */
.sheet.ansheet .sheet-body{justify-content:flex-start;}
.sheet.ansheet .sheet-body > .wgrid{flex:0 0 auto; align-content:start; gap:4mm 8mm;}
.sheet.ansheet .wfill{flex:0 0 auto; justify-content:flex-start;}
.sheet.ansheet .sheet-body > .pgrid{align-content:start; grid-auto-rows:auto;}
.sheet.ansheet .sheet-body > .pgrid .pimg{flex:0 0 auto; height:28mm;}

/* 用紙の中身 汎用 */
.wgrid{display:grid; gap:6mm 8mm;}
.wcell{font-size:15pt; letter-spacing:.06em;}
.wline{border-bottom:1px solid #999; display:inline-block; min-width:30mm;}
.big{font-size:20pt;} .bigger{font-size:26pt;} .huge{font-size:34pt;}

/* ---------- 絵つきの教材（絵と文字のマッチング・書称） ----------
   絵は /ecard/ の絵カードをそのまま参照する。
   alt は必ず空にすること。ここに語を書くと、答えがページのテキストに漏れる。 */
.pgrid{display:grid; gap:4mm 6mm;}
/* 行を space-between で散らすと、余白が行間に集まって絵だけが小さいまま残る。
   行そのものを引き伸ばし（1fr）、余った高さは絵に吸わせる＝紙いっぱいの絵になる。 */
.sheet-body > .pgrid{flex:1 1 auto; align-content:stretch; grid-auto-rows:1fr;}
.pcell{border:1px solid #ddd; border-radius:3px; padding:2.5mm 3mm; display:flex; flex-direction:column; min-height:0; overflow:hidden;}
.pcell .pn{font-size:9pt; color:#888; line-height:1;}
.pimg{width:100%; height:28mm; object-fit:contain; display:block; margin:1.5mm 0 2mm;}
/* 絵は「余った高さのぶんだけ」大きくする。flex-basis を auto にすると
   画像の実寸が基準になり、マスが紙からはみ出す（3行目が切れる）。 */
.sheet-body > .pgrid .pimg{flex:1 1 0; height:0; min-height:0;}
.pch{display:grid; grid-template-columns:1fr 1fr; gap:1.5mm 3mm; font-size:12pt;}
.pch span{white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.masurow{display:flex; gap:1.5mm; justify-content:center;}
.masu{
  width:9mm; height:9mm; border:1px solid #777; border-radius:1px;
  text-align:center; line-height:9mm; font-size:12pt; flex:0 0 auto;
}
.masuline{border-bottom:1px solid #777; height:9mm; margin:0 3mm;}

/* 線でむすぶ形 */
.lrow{display:flex; align-items:center; gap:3mm;}
.lp{display:flex; align-items:center; gap:2mm; width:56mm;}
.lp .ln{font-size:10pt; color:#888; width:5mm;}
.lpimg{width:40mm; height:26mm; object-fit:contain;}
.ldot{width:2.6mm; height:2.6mm; border:1px solid #333; border-radius:50%; flex:0 0 auto;}
.lgap{flex:1 1 auto;}
.lw{display:flex; align-items:center; gap:2.5mm; width:56mm;}
.lw .lb{font-size:11pt; color:#555;}
.lw .lt{font-size:15pt; font-weight:700;}

/* 文レベル（助詞・文章補完・文章音読） */
.sitem{display:flex; flex-wrap:wrap; align-items:baseline; gap:0 2mm;}
.sno{font-size:9.5pt; color:#888; width:6mm; flex:0 0 auto;}
.stext{font-size:13pt; line-height:1.75; flex:1 1 60%;}
.sblank{
  display:inline-block; min-width:14mm; border-bottom:1px solid #777;
  margin:0 1mm; vertical-align:-2px;
}
.sblank.wide{min-width:26mm;}
.schoice{
  flex:1 1 100%; margin-left:6mm; font-size:12pt; color:#222;
  display:flex; flex-wrap:wrap; gap:0 6mm;
}

/* なかまわけ */
.bank{
  border:1px solid #777; padding:2.5mm 3mm; margin-bottom:4mm;
  display:flex; flex-wrap:wrap; gap:1.5mm 5mm; font-size:12.5pt;
}
.bgrid{display:grid; gap:4mm 5mm;}
.sheet-body > .bgrid{flex:1 1 auto;}
.bbox{border:1px solid #999; border-radius:2px; padding:2mm 3mm; display:flex; flex-direction:column;}
.bbox .bh{font-size:11pt; font-weight:700; border-bottom:1px solid #ccc; padding-bottom:1mm; margin-bottom:2mm;}
.bbox .bl{border-bottom:1px dotted #aaa; height:7.5mm; flex:1 1 auto; min-height:6mm;}

/* 最小対語 */
.mrow{display:flex; align-items:baseline; gap:0 2mm;}
.mw{font-size:15pt; font-weight:700;}
.mk{font-size:10pt; color:#666;}
.mvs{font-size:12pt; color:#999; margin:0 1mm;}

/* 音節 */
.ogrid{display:grid; gap:5mm 4mm;}
/* 余白を行間に集めると、枠だけ小さいまま紙の中で散らばる。
   行そのものを引き伸ばして（1fr）、枠を大きくする＝離れて見ても読める紙になる。 */
.sheet-body > .ogrid{flex:1 1 auto; align-content:stretch; grid-auto-rows:1fr;}
.ocell{
  border:1px solid #ddd; border-radius:2px; text-align:center;
  font-size:19pt; font-weight:700; letter-spacing:.08em; padding:2mm 1mm;
  display:flex; align-items:center; justify-content:center; min-height:0;
}

/* ---------- 広告 ----------
   .adbox は「臨床解説の下」「一覧の下」にしか置かない。
   生成・印刷ボタンの近傍には絶対に置かないこと（誤クリック＝CTR異常＝配信停止の前兆）。 */
.adbox{
  margin:26px 0; padding-top:14px; border-top:1px dashed var(--line);
  min-height:100px; text-align:center;
}
.adbox .adlabel{
  font-size:10px; color:#b3a795; letter-spacing:.14em;
  text-align:left; margin-bottom:6px;
}
.adbox ins{display:block;}
/* ボタン群の直後に広告を置いてしまった場合に備えた最低離隔 */
.btns + .adbox{margin-top:56px;}

/* ---------- 臨床解説（各ページ下部の読み物・広告の受け皿） ---------- */
.guide{font-size:14.5px;}
.guide p{margin:10px 0;}
.guide ul{margin:10px 0; padding-left:22px;}
.guide li{margin:5px 0;}
.guide table{border-collapse:collapse; width:100%; font-size:13.5px; margin:12px 0;}
.guide th,.guide td{border:1px solid var(--line); padding:7px 9px; text-align:left;}
.guide th{background:#f6f0e6;}
.faq dt{font-weight:800; margin:14px 0 4px;}
.faq dd{margin:0; color:#4a4238;}

/* ---------- 左のナビ（rail） ----------
   JSが作る（rehab.js の Rehab.rail）。作られなければ body に .has-rail が付かず、
   本文は今までどおり中央のまま＝出なくても壊れない。
   1180px 未満では出さない。タブレット縦・スマホは本文の幅を優先する。 */
#rail{display:none;}
.lp-row{font-size:13.5px; color:var(--muted); margin:-6px 0 18px;}
.lp-row a{font-weight:700;}

@media (min-width:1180px){
  /* 画面の左端に貼りつける（left:0）。本文カラムからの相対位置で置くと、
     本文の幅（900px/1100px）や画面幅で居場所が動いて「右に寄ってる」ように見える。
     内側に padding を持たせて文字だけ端から離す＝箱は端に、字は端から。
     top と max-height は JS が実測で入れる（広告のアンカーが入るとページ全体が下にずれ、
     64px 決め打ちだとヘッダーに重なるため）。 */
  #rail{
    display:block; position:fixed; top:64px; left:0; width:252px; z-index:10;
    padding-left:14px; padding-right:2px;
    max-height:calc(100vh - 84px); overflow-y:auto; overscroll-behavior:contain;
    font-size:13px; padding-bottom:24px;
  }
  #rail::-webkit-scrollbar{width:8px;}
  #rail::-webkit-scrollbar-thumb{background:#d8cfc0; border-radius:4px;}
  /* 37本入る。ノートPC（高さ700px前後）だと入りきらないので、行を詰めて
     スクロールせずに見える本数を稼ぐ（余白より本数を優先する場所） */
  #rail a{
    display:block; padding:3px 8px; border-radius:6px; text-decoration:none;
    color:var(--ink); line-height:1.35;
  }
  #rail a:hover{background:#fff;}
  #rail a.on{background:var(--blue); color:#fff; font-weight:700;}
  #rail .rl-top{font-weight:800; font-size:13.5px; margin-bottom:10px; background:#fff;
    border:1px solid var(--line); padding:5px 8px;}
  #rail .rl-g{margin-bottom:10px;}
  #rail .rl-h{
    font-size:11px; font-weight:800; color:var(--muted); letter-spacing:.06em;
    padding:0 8px 4px; border-bottom:1px solid var(--line); margin-bottom:4px;
  }
  /* 本文はレール（右端252px）を避けるところまで。画面が広ければ中央に戻す。
     .wrap-wide（1100px）は狭い画面だとレールと衝突するので幅も詰める。 */
  body.has-rail .wrap{margin-left:max(272px, calc(50% - 450px));}
  body.has-rail .wrap-wide{
    margin-left:max(272px, calc(50% - 550px));
    max-width:min(1100px, calc(100vw - 300px));
  }
}

/* ---------- キャビネット ---------- */
/* ボックス（担当者ごとの引き出し）の切り替え */
.box-bar{
  display:flex; flex-wrap:wrap; gap:8px; align-items:center;
  padding:0 0 14px; margin-bottom:14px; border-bottom:1px solid var(--line);
}
.box-chip{
  display:inline-flex; align-items:center; gap:7px; cursor:pointer;
  background:#fff; border:1px solid var(--line); border-radius:999px;
  padding:6px 14px; font-weight:700; font-size:13px; color:var(--ink);
}
.box-chip .n{
  background:#eee8dc; color:var(--muted); border-radius:999px;
  min-width:20px; text-align:center; font-size:11px; padding:1px 6px;
}
.box-chip.on{background:var(--blue); border-color:var(--blue); color:#fff;}
.box-chip.on .n{background:rgba(255,255,255,.25); color:#fff;}
.box-chip.add{border-style:dashed; color:var(--muted); font-weight:600;}
.box-chip.add:disabled{opacity:.4; cursor:not-allowed;}
.box-note{font-size:12px; color:var(--muted); margin:0 0 4px; width:100%;}
.btns.sub{margin-top:10px; gap:8px;}
.btns.sub .btn{padding:6px 12px; font-size:12.5px; border-radius:8px;}
.hdr-cabinet .boxname{
  background:#eef5fb; color:var(--blue-ink); border-radius:6px;
  padding:1px 8px; font-size:12px; max-width:120px; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap;
}
.cab-list{list-style:none; margin:0; padding:0;}
.cab-item{
  background:var(--panel); border:1px solid var(--line); border-radius:10px;
  padding:12px 14px; margin:10px 0; display:flex; gap:12px; align-items:center;
}
.cab-item .ci-main{flex:1; min-width:0;}
.cab-item .ci-t{font-weight:800; font-size:15px;}
.cab-item .ci-d{font-size:12.5px; color:var(--muted); margin-top:2px;}
.cab-item .ci-n{
  font-size:13px; font-weight:700; background:#eef5fb; color:var(--blue-ink);
  border-radius:6px; padding:3px 9px; white-space:nowrap;
}
.empty-note{
  text-align:center; color:var(--muted); padding:34px 16px; font-size:14px;
  border:2px dashed var(--line); border-radius:12px;
}
.step-vis{display:flex; gap:4px; align-items:flex-end; height:26px; margin-top:6px;}
.step-vis i{
  display:block; width:11px; background:var(--blue); border-radius:2px 2px 0 0; opacity:.85;
}

/* ---------- 語彙リスト表 ---------- */
.vtable{border-collapse:collapse; width:100%; font-size:13.5px; background:#fff;}
.vtable th,.vtable td{border:1px solid var(--line); padding:6px 9px;}
.vtable th{background:#f6f0e6; position:sticky; top:56px; z-index:5;}
.vtable td.w{font-weight:700; font-size:15px;}
.vtable td.num{text-align:center; color:var(--muted);}
.tablewrap{max-height:70vh; overflow:auto; border:1px solid var(--line); border-radius:10px;}
.statline{font-size:13px; color:var(--muted); margin:10px 0;}
.matrix{border-collapse:collapse; font-size:12px; background:#fff;}
.matrix th,.matrix td{border:1px solid var(--line); padding:4px 8px; text-align:center;}
.matrix td.lv0{background:#faf3f2; color:#b0413e;}
.matrix td.lv1{background:#fdf6e8;}
.matrix td.lv2{background:#eefaf2;}

/* ---------- フッター ---------- */
footer.site{
  margin-top:40px; border-top:1px solid var(--line);
  padding:18px 0 40px; font-size:12.5px; color:var(--muted); text-align:center;
}
footer.site a{color:var(--muted);}
.disclaimer{
  font-size:12px; color:var(--muted); background:#f6f0e6;
  border-radius:8px; padding:10px 12px; margin:20px 0 0;
}

/* screen を明示する。付けないと印刷にも効いてしまう＝紙は 210mm（794px）前後で
   評価されるので、この 760px の指定を拾って縦に伸ばす仕組みが全部無効になる。 */
@media screen and (max-width:760px){
  .wrap{padding:12px;}
  h1{font-size:20px;}
  /* 画面が狭いときは実寸をあきらめる（プレビュー用途）。紙は @media print が決める */
  .sheet{width:100%; height:auto;}
  .sheet-inner{padding:7mm; height:auto; display:block;}
  .sheet-body{display:block;}
  .wfit{position:static;}
  .wfit > svg{position:static; height:auto;}
  .vtable th{top:52px;}
  /* 絵つき・なかまわけ・音節は狭い画面では1〜2列に落とす（紙の列数は印刷側が決める） */
  .pgrid, .bgrid{grid-template-columns:1fr !important;}
  .ogrid{grid-template-columns:repeat(4,1fr) !important;}
  .lrow{flex-wrap:wrap;}
  .lp, .lw{width:auto;}
  .lgap{flex-basis:8mm;}
}

/* ============ 印刷 ============
   紙には UI・広告・解説を一切出さない。用紙だけを出す。 */
@media print{
  @page{size:A4 portrait; margin:8mm 7mm;}
  html,body{background:#fff !important; width:auto;}
  header#app-header, footer.site, .panel, .btns, .crumb, .guide, .lead,
  .noprint, .adbox, ins.adsbygoogle, .hint, .warnbox, .disclaimer, .foldnote,
  h1, h2, .statline, .tablewrap{display:none !important;}
  .wrap{max-width:none; padding:0; margin:0;}
  /* 左ナビぶんの余白を紙に持ち込まない。画面用の body.has-rail .wrap のほうが
     詳細度が高いので、名指しで打ち消す（紙に左8cmの空白が出る事故を防ぐ） */
  body.has-rail .wrap, body.has-rail .wrap-wide{margin-left:0 !important; max-width:none;}
  .sheet-wrap{overflow:visible; background:none; padding:0; margin:0; border-radius:0;}
  /* 紙1枚ぶんの実寸。281mm ちょうどにすると丸め誤差で空白ページが1枚増えるので 280mm */
  .sheet{
    width:196mm; height:280mm; margin:0; padding:0; box-shadow:none;
    break-after:page; page-break-after:always;
  }
  /* 画面用の「紙と紙のすきま」(.sheet + .sheet) は .sheet より詳細度が高く、
     上の margin:0 では消えない。紙では 280mm+4.8mm となって1枚ごとに
     空白ページが挟まるので、ここで名指しで0に戻す */
  .sheet + .sheet{margin-top:0;}
  /* 画面で畳んでいた紙も、刷るときは全部出す */
  .sheet.folded{display:block !important;}
  .sheet:last-child{break-after:auto; page-break-after:auto;}
  .sheet-inner{padding:0; height:100%;}
  .printable,#printarea{display:block !important;}
}
/* 画面には出さず、印刷のときだけ出す入れ物（語彙リストの紙版など） */
#printarea{display:none;}