/* ============================================================
   国語ラインマーカー（部屋方式） スタイルシート
   プレフィックス: klm-
============================================================ */
.klm-root{
  --navy:#1e3a5f;
  --navy-light:#2c5183;
  --navy-pale:#eef2f7;
  --gold:#d4af37;
  --gold-dark:#b8941f;
  --white:#ffffff;
  --gray:#6b7280;
  --line:#dbe2ea;
  --danger:#c0392b;
  /* 修正: 白文字とのコントラストがWCAG AA未達だったため少し濃くした（Q2はJS側で文字色をネイビーに変更） */
  --q1:#3678b4;
  --q2:#e0b400;
  --q3:#de2f22;
  --q4:#2f8448;
  --q5:#9b59b6;

  /* 修正: 980pxだと大きめのモニターや電子黒板では画面の両側に大きな
     余白ができてしまい、特に縦書き＋横スクロールでは1度に見える列数が
     少なくなって横スクロールの回数が増えてしまっていた。全画面表示
     （max-width:none）にしなくても画面をよく使えるよう、通常表示の
     上限も広げる。 */
  max-width:1400px;
  width:100%;
  margin:0 auto;
  background:var(--white);
  box-shadow:0 0 24px rgba(30,58,95,.08);
  font-family:'BIZ UDGothic','M PLUS Rounded 1c','Hiragino Maru Gothic ProN','Hiragino Sans',sans-serif;
  color:#1a1a1a;
  -webkit-tap-highlight-color:transparent;
}
.klm-root *{box-sizing:border-box;}

/* ===== ヘッダー ===== */
.klm-header{
  background:var(--navy);
  color:var(--white);
  padding:14px 18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
}
.klm-header h1{font-size:1.15rem;margin:0;letter-spacing:.02em;}
.klm-header h1 small{display:block;font-size:.65rem;font-weight:400;color:#cfd9e6;margin-top:2px;}
.klm-headerctrl{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.klm-headerctrl .klm-btn.ghost{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.4);color:#fff;}
.klm-headerctrl .klm-btn.ghost:hover{background:rgba(255,255,255,.2);}

/* ===== 共通パーツ ===== */
/* 修正: 以前は画面下いっぱいの横長ドックと本文が重ならないよう
   padding-bottom:90px で余白を確保していたが、右下フロートの丸ボタンに
   変更した今は、本文欄の高さをJS(fitHeatmapBoxHeight/fitStudentBodyBox)側で
   画面の下端まで正確に計算するようにしている。この固定90pxが残ったままだと、
   本文欄の下にさらに90px分の余白ができて画面からはみ出し、使っていない
   縦スクロールや、先生画面で本文を再描画するたびに余白ぶんだけ縦位置が
   ずれてスクロールが伸びるように見える不具合の原因になっていたため、
   固定値の下余白は無くす（必要な余白はJS側のGAP定数で管理する）。 */
.klm-main{flex:1;min-height:0;padding:16px;}
.klm-card{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:14px;
  padding:16px;
  margin-bottom:14px;
}
.klm-card h2{margin:0 0 10px;font-size:1rem;color:var(--navy);border-left:5px solid var(--gold);padding-left:8px;}
.klm-btn{
  font-family:inherit;
  border:none;
  border-radius:999px;
  padding:10px 20px;
  font-size:.9rem;
  font-weight:700;
  cursor:pointer;
  background:var(--navy);
  color:var(--white);
}
.klm-btn:hover{background:var(--navy-light);}
.klm-btn.gold{background:var(--gold);color:var(--navy);}
.klm-btn.gold:hover{background:var(--gold-dark);}
.klm-btn.ghost{background:var(--white);color:var(--navy);border:1.5px solid var(--navy);}
.klm-btn.danger{background:var(--white);color:var(--danger);border:1.5px solid var(--danger);}
.klm-btn:disabled{opacity:.4;cursor:not-allowed;}
.klm-field{margin-bottom:10px;}
.klm-field label{display:block;font-size:.8rem;color:var(--gray);margin-bottom:4px;font-weight:700;}
.klm-field input[type=text],
.klm-field textarea,
.klm-field select,
.klm-field input[type=number]{
  width:100%;
  font-family:inherit;
  border:1.5px solid var(--line);
  border-radius:8px;
  padding:9px 10px;
  font-size:.95rem;
  background:var(--white);
}
.klm-field textarea{min-height:120px;resize:vertical;}
.klm-radiorow{display:flex;gap:14px;}
.klm-radiorow label{display:flex;align-items:center;gap:5px;font-weight:400;color:#1a1a1a;font-size:.9rem;}
.klm-hint{font-size:.78rem;color:var(--gray);margin-top:4px;}
.klm-empty{color:var(--gray);font-size:.85rem;padding:18px 4px;text-align:center;}

.klm-panel{display:none;}
.klm-panel.active{display:block;}

/* ===== 操作フロート共通（丸ボタン / .klm-fab） =====
   修正: 画面下いっぱいの横長ドックをやめ、右下に縦積みする丸ボタン群に変更。
   .klm-root には上限幅があり中央寄せなので、画面が広いときは右側の余白部分に
   ボタンが収まり、本文表示エリアと重ならない（狭い画面では重なりうるため、
   JS側 fitHeatmapBoxHeight() で本文と横方向に重なる場合だけ高さを詰める）。 */
.klm-fab{
  font-family:inherit;
  border:2px solid transparent;
  border-radius:50%;
  width:44px;
  height:44px;
  flex:none;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  cursor:pointer;
  color:#fff;
  font-weight:700;
  font-size:.78rem;
  line-height:1;
  background:var(--navy);
  box-shadow:0 2px 8px rgba(30,58,95,.3);
}
.klm-fab:not(:disabled):hover{background:var(--navy-light);}
.klm-fab:disabled{opacity:.35;cursor:not-allowed;}
.klm-fab-sm{width:36px;height:36px;background:var(--white);color:var(--navy);border:1.5px solid var(--line);box-shadow:0 1px 4px rgba(0,0,0,.1);}
.klm-fab-sm:not(:disabled):hover{background:var(--navy-pale);}
.klm-fab-sep{width:28px;height:1px;background:rgba(255,255,255,.6);border-top:1px solid var(--line);flex:none;}

/* ===== 児童画面：送信・選択解除（右下フロートの丸ボタン） =====
   修正: 画面下いっぱいの横並びボタンから、先生画面と同じ右下フロートに変更。
   「送信」は主操作として一回り大きく金色に、「解除」は控えめな白丸にして
   誤タップしにくくしている。 */
.klm-fab-primary{width:60px;height:60px;font-size:.85rem;background:var(--gold);color:var(--navy);box-shadow:0 4px 14px rgba(180,148,31,.45);}
.klm-fab-primary:not(:disabled):hover{background:var(--gold-dark);}
.klm-fab-ghost{background:var(--white);color:var(--navy);border:1.5px solid var(--navy);box-shadow:0 1px 4px rgba(0,0,0,.15);}
.klm-fab-ghost:not(:disabled):hover{background:var(--navy-pale);}

/* ===== 質問切替（Q1〜Q5・全てをループする1個のボタン） =====
   修正: 6個の丸ボタンを並べる方式から、.klm-fab 1個をタップするたびに
   Q1→Q2→Q3→Q4→Q5→全て→Q1…とループする方式に変更したため、専用の
   ボタン見た目は不要になった（色はJS側で.klm-fabに直接指定する）。
   ラベルの文字だけは引き続き .qb-label を使うので、そのスタイルは残す。 */
.qb-label{display:block;white-space:nowrap;}

/* ===== 表示切替（ヒートマップ／注目ワード・児童一覧） ===== */
.klm-viewtoggle{display:flex;flex-direction:column;gap:8px;flex:none;}
.klm-viewtoggle button.klm-fab{background:var(--white);color:var(--navy);border:1.5px solid var(--line);}
.klm-viewtoggle button.klm-fab:hover{background:var(--navy-pale);}
.klm-viewtoggle button.klm-fab.active{
  background:var(--navy);
  border-color:var(--navy);
  color:#fff;
}

/* ===== フィルタ行 ===== */
.klm-filterrow{display:flex;align-items:center;gap:10px;margin-bottom:12px;flex-wrap:wrap;}
.klm-filterrow select{font-family:inherit;border:1.5px solid var(--line);border-radius:8px;padding:7px 10px;font-size:.85rem;}

/* ===== ステータスバー ===== */
.klm-statusbar{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  background:var(--navy-pale);
  border:1px solid var(--line);
  border-radius:999px;
  padding:8px 16px;
  margin-bottom:12px;
  font-size:.85rem;
  color:var(--navy);
  font-weight:700;
}
.klm-statusbar .sb-dot{width:10px;height:10px;border-radius:50%;display:inline-block;flex:none;}
.klm-statusbar:empty{display:none;}
.klm-statusbar .sb-sep{color:var(--line);}
/* 修正: 配布中の教材・送信状況の表示を本文エリア上部からヘッダーへ移動したため、
   紺色のヘッダーの上でも読みやすい配色に変える（枠線・背景を白の半透明にする）。 */
.klm-header .klm-statusbar{
  background:rgba(255,255,255,.1);
  border-color:rgba(255,255,255,.35);
  color:#fff;
  margin-bottom:0;
}
.klm-header .klm-statusbar .sb-sep{color:rgba(255,255,255,.45);}

/* ===== 操作ドック（右下フロート・縦積み） =====
   修正: 画面下いっぱいの横長ドックから、右下に丸ボタンを縦に積む形へ変更。
   position:fixed の起点を right/bottom にし、内部も縦方向(column)に並べる。
   端末の縦幅が狭い場合に画面からはみ出さないよう max-height + overflow-y で
   その場合だけ自前スクロールさせる。 */
.klm-floatstack{
  position:fixed;
  right:14px;
  bottom:14px;
  z-index:40;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  max-height:92vh;
  overflow-y:auto;
  overflow-x:visible;
  padding:4px 2px;
}
.klm-zoomctrl{display:flex;flex-direction:column;align-items:center;gap:4px;flex:none;}
.klm-fab-zoomlabel{font-size:.7rem;color:var(--gray);font-weight:700;text-align:center;line-height:1;background:var(--white);border-radius:8px;padding:2px 4px;}
/* 修正: max-width が残ったままだと全画面表示にしても電子黒板の
   横幅を活かせなかったため、全画面表示中だけ解除する */
.klm-teacher-root:fullscreen,
.klm-teacher-root:-webkit-full-screen{
  background:var(--white);
  width:100vw;
  max-width:none;
  height:100vh;
  overflow-y:auto;
  padding:20px;
}

/* ===== ポップアップ（QR・教材設定共通） ===== */
.klm-modal-backdrop{position:fixed;inset:0;background:rgba(20,35,55,.55);z-index:80;}
.klm-modal{
  position:fixed;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  width:min(620px, 92vw);
  max-height:88vh;
  overflow-y:auto;
  background:var(--white);
  border-radius:16px;
  z-index:90;
  box-shadow:0 16px 48px rgba(0,0,0,.28);
}
.klm-modal-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 18px;
  border-bottom:1px solid var(--line);
  position:sticky;
  top:0;
  background:var(--white);
  border-radius:16px 16px 0 0;
}
.klm-modal-header h2{margin:0;font-size:1.05rem;color:var(--navy);}
.klm-modal-body{padding:16px 18px;}

/* ===== 回答一覧（折りたたみ） ===== */
.klm-details-summary{cursor:pointer;font-weight:700;color:var(--navy);list-style:none;}
.klm-details-summary::-webkit-details-marker{display:none;}

/* ===== テーブル ===== */
table.klm-table{width:100%;border-collapse:collapse;font-size:.85rem;}
table.klm-table th,table.klm-table td{border-bottom:1px solid var(--line);padding:8px 6px;text-align:left;}
table.klm-table th{color:var(--navy);font-weight:700;background:var(--navy-pale);}

/* ===== 児童一覧 バッジ ===== */
.klm-badge{display:inline-block;padding:2px 10px;border-radius:999px;font-size:.75rem;font-weight:700;}
.klm-badge.done{background:#e3f5e9;color:#1d7a3e;}
.klm-badge.todo{background:#f1f1f1;color:#888;}

/* ===== 本文表示 ===== */
.klm-bodywrap{
  border:1.5px solid var(--line);
  border-radius:10px;
  padding:16px;
  background:#fcfcfb;
  line-height:2.1;
  font-size:1.15rem;
  overflow:auto;
  resize:vertical;
  min-height:160px;
  user-select:none;
  /* 修正: 本文欄の中でスクロールしているつもりが、端まで来た分の
     スクロール量がそのままページ全体のスクロールに伝わってしまい
     (スクロールチェイニング)、本文とページが同時に動いて見える
     不具合があった。本文欄の中でのスクロールをそこで止める。
     横方向書き（この基本クラス）は縦スクロールが実際に使われるので
     縦方向だけ止める。横方向は使わないため auto のままにしておく
     （両方向を一律 contain にすると、実際にはスクロールしない軸まで
     ブラウザが「せき止める」対象にしてしまい、枠の上で行うスクロール
     操作そのものが効かなくなる端末があったため、軸ごとに分ける）。 */
  overscroll-behavior-y:contain;
  overscroll-behavior-x:auto;
}
.klm-bodywrap.vertical{
  writing-mode:vertical-rl;
  width:100%;
  height:420px; /* JSで実測して上書きされるまでの初期値 */
  overflow-x:auto;
  overflow-y:hidden;
  line-height:2.3;
  /* 修正: 縦書き（このクラス）は横方向にしかスクロールしないため、
     止めるのも横方向だけにする。縦方向は元々スクロールしない
     (overflow-y:hidden)ため、縦方向まで contain にしてしまうと
     枠の上で縦方向のスクロール操作をしたときに、枠にも・ページにも
     まったく反応しなくなってしまう（「スクロールが枠外でしかきかない」
     不具合の原因だった）。 */
  overscroll-behavior-x:contain;
  overscroll-behavior-y:auto;
}
/* 修正: ヒートマップ表示・児童の読み取り画面はどちらも、高さをJS
   （fitHeatmapBoxHeight / fitStudentBodyBox）で実測して自動調整する。
   手動リサイズは5秒ごとの再描画・ポーリングのたびに毎回リセットされて
   意味をなさないため、どちらも無効化する。 */
#klm-heatmap-wrap .klm-bodywrap.vertical,
#klm-stu-bodywrap{
  resize:none;
}
.klm-root .ws-char{display:inline;border-radius:2px;}
.klm-root ruby{ruby-position:over;}
.klm-root rt{font-size:.5em;color:var(--gray);font-weight:400;user-select:none;}

/* ===== ランキング ===== */
.klm-ranklist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;}
.klm-ranklist li{display:flex;align-items:center;gap:12px;border:1.5px solid var(--line);border-radius:10px;padding:10px 14px;}
.klm-rankno{
  flex:none;width:32px;height:32px;border-radius:50%;
  background:var(--navy);color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:.85rem;
}
.klm-rankno.top1{background:var(--gold);color:var(--navy);}
.klm-rankword{font-weight:700;color:var(--navy);flex:1;}
.klm-rankcount{font-size:.78rem;color:var(--gray);}

/* ===== トースト通知 ===== */
.klm-toast{
  position:fixed;
  bottom:24px;
  left:50%;
  transform:translateX(-50%) translateY(20px);
  background:var(--navy);
  color:#fff;
  padding:10px 22px;
  border-radius:999px;
  font-size:.85rem;
  font-weight:700;
  opacity:0;
  pointer-events:none;
  transition:opacity .25s, transform .25s;
  z-index:50;
}
.klm-toast.show{opacity:1;transform:translateX(-50%) translateY(0);}

/* ===== 児童画面 ===== */
.mt-pages{font-size:.85rem;color:var(--gray);margin-bottom:10px;}
.klm-currentq{
  display:inline-flex;
  align-items:center;
  gap:8px;
  border-radius:999px;
  padding:8px 16px;
  font-weight:700;
  color:#fff;
  margin-bottom:12px;
}
.klm-currentq .dot{width:10px;height:10px;border-radius:50%;background:#fff;}
/* 修正: 教材タイトルと現在の質問（Q1など）をヘッダーへ移動。
   ヘッダー内では縦の余白が不要なうえ、行の高さも揃えたいので
   margin-bottom を打ち消す。 */
.klm-header .klm-currentq{margin-bottom:0;}
.klm-header-mattitle{color:#fff;font-weight:700;font-size:.95rem;}
/* 修正: 退室リンク（出席番号変更・部屋の入り直し用） */
.klm-root #klm-stu-leave{color:var(--navy);}
/* 修正: 送信状況・退室リンクがフロートの下に隠れたり、それを見るためだけに
   ページ全体をスクロールしないといけなくなったりしないよう、以前はここに
   固定値のpadding-bottomを入れていたが、今はJS(fitStudentBodyBox)側で
   本文欄の高さを計算する際に、フロートや送信状況・退室リンクの分の余白を
   正確に差し引くようにしたため、ここで固定の余白を足す必要はない
   （むしろ二重に余白ができて画面に収まらなくなってしまう）。
   なお .klm-main 自体の固定padding-bottomは上ですでに0にしてあるため、
   ここでの個別指定は不要になった。 */

@media (max-width:560px){
  .klm-header{flex-direction:column;align-items:flex-start;}
  .klm-bodywrap{font-size:1.05rem;}
}

/* ============================================================
   修正: 心情曲線モード
   本文の上に透明な層（.klm-curve-layer）を重ね、その中のSVGに曲線を描く。
   層は本文と同じ入れ物（.klm-curve-inner）の中にあるので、
   本文をスクロールすると線もいっしょに動く。
============================================================ */
.klm-curve-inner{position:relative;}
.klm-curve-layer{
  position:absolute;
  top:0;left:0;
  width:100%;height:100%;
  z-index:2;
  /* 修正: 層の下にある本文の文字をなぞって線を引けるように、層はタッチを素通りさせる */
  pointer-events:none;
}
.klm-curve-layer svg{display:block;writing-mode:horizontal-tb;overflow:visible;}
/* 児童画面：線をかくモードでは本文欄の余白部分をなぞってもスクロールしない */
#klm-stu-bodywrap.klm-curve-mode:not(.klm-pan-mode){touch-action:none;}
.klm-curve-mode .ws-char{color:#4b5563;}
.klm-curve-zero{stroke:#9aa5b1;stroke-width:1.5;stroke-dasharray:6 5;}
.klm-curve-lbl{font-size:13px;font-weight:700;paint-order:stroke;stroke:#fff;stroke-width:4px;stroke-linejoin:round;font-family:inherit;}
.klm-curve-lbl.plus{fill:#c2255c;}
.klm-curve-lbl.minus{fill:#2c5183;}
.klm-curve-lbl.zero{fill:#6b7280;}
/* 修正: 折れ線は高さで色が変わる（上がると赤・下がると青・境目はグラデーション）。
   グラデーションはJS側 buildCurveSvg() の <linearGradient id="klm-updown-grad"> */
.klm-curve-mine{fill:none;stroke:url(#klm-updown-grad);stroke-width:4;stroke-linecap:round;stroke-linejoin:round;}
.klm-curve-stu{fill:none;stroke:url(#klm-updown-grad);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;}
.klm-curve-focus{fill:none;stroke:url(#klm-updown-grad);stroke-width:6;stroke-linecap:round;stroke-linejoin:round;}
.klm-curve-avg{fill:none;stroke:var(--navy);stroke-width:5;stroke-dasharray:10 6;stroke-linecap:round;stroke-linejoin:round;opacity:.9;}

/* 凡例（どっちが＋か、お話がどっちへ進むか） */
.klm-curvebar{
  display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;
  font-size:.82rem;font-weight:700;margin-bottom:8px;
}
.klm-curvebar:empty{display:none;}
.klm-lg-plus{color:#c2255c;}
.klm-lg-minus{color:#2c5183;}
.klm-lg-dir{color:var(--gray);font-weight:400;}
.klm-lg-hint{color:var(--gray);font-weight:400;flex-basis:100%;font-size:.78rem;}

/* 先生画面：表示切替・児童番号のボタン */
.klm-curve-ctrl{margin-bottom:10px;}
.klm-chiprow{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;margin-bottom:8px;}
.klm-chiprow-inner{display:flex;flex-wrap:wrap;gap:6px;}
.klm-chip{
  font-family:inherit;font-size:.8rem;font-weight:700;
  border:1.5px solid var(--line);background:var(--white);color:var(--navy);
  border-radius:999px;padding:5px 12px;cursor:pointer;
}
.klm-chip.active{background:var(--navy);border-color:var(--navy);color:#fff;}
.klm-chip-stu{min-width:36px;padding:5px 8px;border-color:var(--stu);color:var(--stu);}
.klm-chip-stu.active{background:var(--stu);border-color:var(--stu);color:#fff;}
.klm-curve-labeledit summary{cursor:pointer;font-size:.8rem;color:var(--navy);font-weight:700;}
.klm-curvelabelrow{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:6px;}
.klm-curvelabelrow input[type=text]{
  width:9em;flex:1 1 8em;font-family:inherit;border:1.5px solid var(--line);
  border-radius:8px;padding:7px 9px;font-size:.9rem;
}
.klm-curvelabel-tag{font-weight:700;font-size:1rem;width:1.2em;text-align:center;}
.klm-curvelabel-tag.plus{color:#c2255c;}
.klm-curvelabel-tag.minus{color:#2c5183;}

/* 児童画面：「線をかく」モードのときはボタンを色付きにして、今どちらかを分かりやすく */
.klm-fab-ghost.klm-fab-on{background:#fde8ef;border-color:#d6336c;}

/* 修正: 目印つき・自由にかく方式 */
.klm-curve-mark{stroke:#d6336c;stroke-width:2;stroke-dasharray:4 4;opacity:.85;}
.klm-curve-marknum{fill:#d6336c;font-size:13px;font-weight:700;font-family:inherit;paint-order:stroke;stroke:#fff;stroke-width:4px;}
#klm-stu-bodywrap.klm-draw-mode{cursor:crosshair;}
/* 修正: 折れ線グラフの点 */
.klm-pt-dot{fill:var(--pt,url(#klm-updown-grad));stroke:#fff;stroke-width:2;}
.klm-pt-hit{fill:transparent;stroke:none;}
.klm-draw-mode .klm-pt-handle{pointer-events:all;cursor:grab;}
.klm-pt-handle.selected .klm-pt-dot{stroke:#1e3a5f;stroke-width:3.5;}
/* 道具ボタン（線／かく／動かす） */
#klm-stu-pan{width:52px;height:52px;flex-direction:column;gap:1px;}
.klm-tool-ic{font-size:1.05rem;line-height:1;}
.klm-tool-tx{font-size:.62rem;line-height:1;}
/* 先生画面：目立たせた子が線を引いたところの一覧 */
.klm-curve-detail{border:1.5px solid var(--line);border-radius:10px;padding:8px 12px;margin-bottom:8px;display:flex;flex-direction:column;gap:4px;}
.klm-curve-detail-head{font-weight:700;font-size:.85rem;}
.klm-curve-detail-row{display:flex;align-items:center;gap:8px;font-size:.9rem;}
.klm-cd-no{flex:none;width:22px;height:22px;border-radius:50%;color:#fff;font-weight:700;font-size:.75rem;display:flex;align-items:center;justify-content:center;}
.klm-cd-text{flex:1;color:#1a1a1a;}
.klm-cd-val{font-weight:700;white-space:nowrap;}
.klm-cd-val.plus{color:#c2255c;}
.klm-cd-val.minus{color:#2c5183;}

/* ============================================================
   修正: 右下ボタンの整理・設定ポップアップ・Material Symbols アイコン
============================================================ */
.klm-ic{display:block;flex:none;}
.klm-fab-icon{padding:0;}
.klm-fab-icon.active{background:var(--gold);color:var(--navy);}
.klm-viewtoggle button.klm-fab.klm-fab-icon{background:var(--navy);color:#fff;border-color:transparent;}
.klm-viewtoggle button.klm-fab.klm-fab-icon.active{background:var(--gold);color:var(--navy);}
.klm-settings-pop{
  position:fixed;
  right:72px;
  bottom:14px;
  z-index:45;
  width:min(360px, calc(100vw - 96px));
  background:var(--white);
  border:1.5px solid var(--line);
  border-radius:14px;
  box-shadow:0 8px 28px rgba(30,58,95,.22);
  padding:12px 14px;
  display:flex;
  flex-direction:column;
  gap:12px;
}
.klm-settings-pop[hidden]{display:none;}
#klm-set-curve{display:flex;flex-direction:column;gap:12px;}
.klm-set-row{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;}
.klm-set-col{flex-direction:column;align-items:stretch;}
.klm-set-lbl{font-size:.8rem;font-weight:700;color:var(--navy);}
.klm-zoomrow{display:flex;align-items:center;gap:8px;}
.klm-zoomrow .klm-fab-zoomlabel{min-width:44px;}
.klm-curve-ctrl .klm-chiprow-inner:empty{display:none;}
.klm-curve-ctrl .klm-chiprow-inner{margin-bottom:8px;}
/* 児童画面：道具ボタンの文字（線・点） */
.klm-tool-big{font-size:1.05rem;font-weight:700;line-height:1;}
/* 児童画面：使い方ポップアップ */
.klm-stu-help-pop{font-size:.85rem;gap:6px;}
.klm-help-title{font-weight:700;color:var(--navy);margin-bottom:2px;}
.klm-help-row{display:flex;align-items:center;gap:8px;line-height:1.5;}
.klm-help-row.plus{color:#c2255c;font-weight:700;}
.klm-help-row.minus{color:#2c5183;font-weight:700;}
.klm-help-row.dim{color:var(--gray);}
.klm-help-key{flex:none;min-width:30px;height:24px;border-radius:12px;background:var(--navy-pale);color:var(--navy);font-weight:700;display:flex;align-items:center;justify-content:center;padding:0 6px;}
.klm-help-sep{height:1px;background:var(--line);margin:2px 0;}
/* 修正: display を指定したクラスが付いていても、hidden 属性の要素は必ず隠す */
.klm-root [hidden],
.klm-settings-pop[hidden]{display:none !important;}

/* ============================================================
   修正: QRポップアップの「部屋を終了する」押し間違い対策
============================================================ */
.klm-modal .klm-qr-close-big{display:block;width:min(320px,100%);margin:18px auto 6px;padding:14px 20px;font-size:1.05rem;}
.klm-endroom{margin-top:22px;padding-top:12px;border-top:1px solid var(--line);text-align:left;}
.klm-endroom summary{cursor:pointer;font-size:.8rem;color:var(--gray);font-weight:700;width:max-content;}
.klm-endroom-warn{color:var(--danger);line-height:1.6;}
.klm-root .klm-hold-btn,
.klm-modal .klm-hold-btn{
  position:relative;
  overflow:hidden;
  display:block;
  margin:10px 0 0 auto;
  font-family:inherit;
  font-size:.85rem;
  font-weight:700;
  color:var(--danger);
  background:var(--white);
  border:1.5px solid var(--danger);
  border-radius:999px;
  padding:9px 18px;
  cursor:pointer;
  user-select:none;
  -webkit-user-select:none;
  -webkit-touch-callout:none;
  touch-action:none;
}
.klm-hold-fill{position:absolute;left:0;top:0;bottom:0;width:0;background:var(--danger);transition:width .15s ease-out;}
.klm-hold-btn.holding .klm-hold-fill{width:100%;transition:width 1.5s linear;}
.klm-hold-label{position:relative;z-index:1;}
.klm-hold-btn.holding .klm-hold-label{color:#fff;}
/* 修正: QRポップアップは .klm-root の外に置かれているため、色の変数（--white・--danger など）が
   届かず、背景が透けたり、終了ボタンが枠も色も無いただの文字に見えて押し間違えやすくなっていた。
   ポップアップ側にも同じ変数を定義する。 */
.klm-modal,
.klm-modal-backdrop,
.klm-toast{
  --navy:#1e3a5f;
  --navy-light:#2c5183;
  --navy-pale:#eef2f7;
  --gold:#d4af37;
  --gold-dark:#b8941f;
  --white:#ffffff;
  --gray:#6b7280;
  --line:#dbe2ea;
  --danger:#c0392b;
}
.klm-modal{font-family:'BIZ UDGothic','M PLUS Rounded 1c','Hiragino Maru Gothic ProN','Hiragino Sans',sans-serif;color:#1a1a1a;}
.klm-modal *{box-sizing:border-box;}
.klm-modal .klm-btn{font-family:inherit;border:none;border-radius:999px;padding:10px 20px;font-size:.9rem;font-weight:700;cursor:pointer;background:var(--navy);color:var(--white);}
.klm-modal .klm-btn.gold{background:var(--gold);color:var(--navy);}
.klm-modal .klm-btn.gold:hover{background:var(--gold-dark);}
.klm-modal .klm-btn.ghost{background:var(--white);color:var(--navy);border:1.5px solid var(--navy);}
.klm-modal .klm-hint{font-size:.78rem;color:var(--gray);margin-top:4px;}
.klm-modal .klm-field input[type=text]{width:100%;font-family:inherit;border:1.5px solid var(--line);border-radius:8px;padding:9px 10px;background:var(--white);}
.klm-toast{z-index:95;} /* 修正: ポップアップの上にも知らせが見えるように */

/* ============================================================
   修正: 電子黒板モード（部屋を作らない）
============================================================ */
#klm-board-wrap:not(.klm-pan-mode){touch-action:none;}
#klm-board-wrap.klm-draw-mode{cursor:crosshair;}
#klm-board-wrap{resize:none;}
.klm-root .ws-char.klm-board-sel{outline:2px solid var(--navy);outline-offset:1px;}
#klm-board-tool{width:52px;height:52px;flex-direction:column;gap:1px;}
#klm-board-mode .qb-label{font-size:.72rem;}

/* ============================================================
   修正: 起動画面（教材入力）の整理
============================================================ */
.klm-labelrow{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:4px;}
.klm-labelrow label{margin-bottom:0;}
.klm-root .klm-btn-xs{padding:4px 12px;font-size:.75rem;}
.klm-optrow{display:flex;align-items:center;gap:10px 24px;flex-wrap:wrap;margin:4px 0 12px;}
.klm-checklabel{display:flex;align-items:center;gap:6px;font-size:.9rem;color:#1a1a1a;}
.klm-more{border:1px solid var(--line);border-radius:10px;padding:8px 12px;background:var(--navy-pale);}
.klm-more summary{cursor:pointer;font-size:.85rem;font-weight:700;color:var(--navy);}
.klm-more[open] summary{margin-bottom:10px;}
.klm-more .klm-field input[type=text],
.klm-more .klm-curvelabelrow input[type=text]{background:var(--white);}
.klm-startchoice{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
@media (max-width:560px){.klm-startchoice{grid-template-columns:1fr;}}
.klm-root .klm-choice{
  font-family:inherit;text-align:left;cursor:pointer;
  display:flex;flex-direction:column;gap:4px;
  padding:14px 16px;border-radius:14px;
  border:2px solid var(--navy);background:var(--white);color:var(--navy);
}
.klm-root .klm-choice:hover{background:var(--navy-pale);}
.klm-root .klm-choice.gold{background:var(--gold);border-color:var(--gold);}
.klm-root .klm-choice.gold:hover{background:var(--gold-dark);}
.klm-root .klm-choice:disabled{opacity:.5;cursor:not-allowed;}
.klm-choice-title{font-size:1.05rem;font-weight:700;}
.klm-choice-desc{font-size:.78rem;color:#334155;line-height:1.5;}
.klm-root .klm-resume-link{
  display:block;width:100%;margin-bottom:12px;padding:10px 14px;text-align:left;cursor:pointer;
  font-family:inherit;font-size:.85rem;font-weight:700;color:var(--navy);
  background:#fdf6e3;border:1.5px solid var(--gold);border-radius:10px;
}

/* ============================================================
   修正: 「動かす」ボタンをなくし、指でそのままスクロールできるようにした。
   読む方向（縦書き＝上下／横書き＝左右）は「なぞって線を引く」に使い、
   それと直角の向き（縦書き＝左右／横書き＝上下）はブラウザのスクロールにまかせる。
============================================================ */
#klm-stu-bodywrap.klm-curve-mode.vertical,
#klm-board-wrap.vertical{touch-action:pan-x;}
#klm-stu-bodywrap.klm-curve-mode:not(.vertical),
#klm-board-wrap:not(.vertical){touch-action:pan-y;}
.klm-pt-handle,
.klm-pt-handle *{touch-action:none;}

/* ============================================================
   修正: 心情曲線の目盛り（＋のことば・0・－のことば）を本文欄の外に出す
============================================================ */
.klm-axis-parent{position:relative;}
.klm-bodywrap.klm-axis-v{margin-left:44px;width:calc(100% - 44px);}
.klm-bodywrap.klm-axis-h{margin-top:28px;}
.klm-curve-axis{
  position:absolute;
  z-index:3;
  pointer-events:none;
  font-weight:700;
  font-size:.8rem;
  line-height:1.2;
}
.klm-curve-axis .ax-plus{color:#c2255c;}
.klm-curve-axis .ax-minus{color:#2c5183;}
.klm-curve-axis .ax-zero{color:var(--gray,#6b7280);}
.klm-curve-axis.v{
  display:flex;flex-direction:column;align-items:center;justify-content:space-between;
  border-right:2px solid var(--line,#dbe2ea);
}
.klm-curve-axis.v span{writing-mode:vertical-rl;white-space:nowrap;}
.klm-curve-axis.v .ax-zero{writing-mode:horizontal-tb;}
.klm-curve-axis.h{
  display:flex;flex-direction:row;align-items:center;justify-content:space-between;
  border-bottom:2px solid var(--line,#dbe2ea);
}
.klm-curve-axis.h span{white-space:nowrap;}

/* ============================================================
   修正: 心情曲線は、文字の大きさを変えても「高さ（＋／－の位置）」が変わらないようにする。
   文字を大きくすると本文があふれてスクロールバーが出て、その太さ（Windowsでは約17px）の分だけ
   曲線をかく範囲が縮み、点の高さが少しずれてしまっていた。
   心情曲線のときはスクロールバーの場所を最初から確保しておき、文字の大きさに関係なく
   曲線をかく範囲（高さ）が一定になるようにする。
============================================================ */
.klm-bodywrap.klm-curve-mode.vertical{overflow-x:scroll;overflow-y:hidden;}
.klm-bodywrap.klm-curve-mode:not(.vertical){overflow-y:scroll;overflow-x:hidden;}

/* ============================================================
   修正: 「グラフだけ表示」（心情曲線だけを1画面で表示）
============================================================ */
.klm-chart-view{position:relative;width:100%;min-height:240px;border:1.5px solid var(--line);border-radius:10px;background:#fcfcfb;overflow:hidden;}
.klm-chart-view svg{display:block;}
.klm-chart-frame{fill:#fff;stroke:var(--line);stroke-width:1;}
.klm-chart-para{stroke:#e5e7eb;stroke-width:1;}
.klm-chart-lbl{font-size:13px;font-weight:700;font-family:inherit;}
.klm-chart-lbl.plus{fill:#c2255c;}
.klm-chart-lbl.minus{fill:#2c5183;}
.klm-chart-lbl.zero{fill:var(--gray);}
.klm-chart-dir{font-size:12px;fill:var(--gray);font-family:inherit;}
.klm-chart-line{fill:none;stroke:url(#klm-chart-grad);stroke-linecap:round;stroke-linejoin:round;}
.klm-chart-dot{fill:url(#klm-chart-grad);stroke:#fff;stroke-width:2;}
.klm-chart-hit{fill:transparent;}
.klm-chart-pt{cursor:pointer;}
.klm-chart-pt.active .klm-chart-dot{stroke:var(--navy);stroke-width:3.5;}
.klm-chart-tip{
  position:absolute;z-index:5;
  background:#fff;border:1.5px solid var(--navy);border-radius:10px;
  box-shadow:0 6px 18px rgba(30,58,95,.2);
  padding:8px 12px;font-size:.9rem;line-height:1.6;pointer-events:none;
}
.klm-chart-tip-head{font-weight:700;color:var(--navy);display:flex;gap:10px;align-items:center;font-size:.8rem;}
.klm-chart-tip-head .plus{color:#c2255c;}
.klm-chart-tip-head .minus{color:#2c5183;}
.klm-chart-tip-text{color:#1a1a1a;}
.klm-root .klm-fab-chart{font-size:.72rem;background:var(--white);color:var(--navy);border:1.5px solid var(--navy);}
.klm-root .klm-fab-chart.active{background:var(--navy);color:#fff;}

/* ============================================================
   修正: ヘッダーを低くする（本文やグラフに使える高さを増やす）
============================================================ */
.klm-header{padding:6px 14px;gap:8px;min-height:0;}
.klm-header h1{font-size:1rem;line-height:1.3;}
.klm-header h1 small{display:none;}
.klm-header .klm-statusbar{padding:3px 12px;font-size:.8rem;}
.klm-headerctrl .klm-btn{padding:4px 14px;font-size:.8rem;}
.klm-header .klm-currentq{padding:3px 12px;font-size:.85rem;}
.klm-header-mattitle{font-size:.85rem;}
/* 本文まわりの余白も少しつめる */
.klm-main{padding:10px 12px;}
.klm-card{padding:12px;margin-bottom:10px;}
#klm-teacher-live .klm-card,
#klm-board-area .klm-card{margin-bottom:0;}
@media (max-width:560px){
  .klm-header{flex-direction:row;align-items:center;}
}

/* 共通可変道具BOX v1.1.0 */
/* 移動・可変の道具BOX */
.vtb-host .atb-toolbox{display:flex;position:fixed;right:16px;bottom:84px;width:244px;height:380px;max-width:calc(100vw - 16px);max-height:calc(100dvh - 64px);padding:0;gap:0;align-items:stretch;flex-direction:column;background:#f5f7fc;border:2px solid #c8d3e3;border-radius:16px;box-shadow:0 6px 24px #13274240;overflow:hidden;z-index:1000;box-sizing:border-box;container-type:inline-size}
.vtb-host .atb-toolbox-head{display:flex;flex-shrink:0;height:44px;background:var(--navy,#1e3a5f);color:white;align-items:center}
.vtb-host .atb-toolbox-head button{border:0;background:transparent;color:white;height:44px;margin:0;padding:0 12px;font-family:inherit;font-size:16px;font-weight:bold;box-shadow:none;border-radius:0}
.vtb-host .atb-toolbox-grip{flex:1;text-align:left;cursor:move;touch-action:none;user-select:none}
.vtb-host .atb-toolbox-fold{width:40px;font-size:24px!important;cursor:pointer}
.vtb-host .atb-toolbox-body{display:grid;grid-template-columns:repeat(auto-fit,minmax(94px,1fr));align-content:start;gap:8px;padding:10px 10px 24px;overflow:auto;min-height:0;flex:1}
.vtb-host .atb-toolbox .atb-toolbar-group{display:contents;border-radius:0;box-shadow:none}
.vtb-host .atb-toolbox-body button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;width:100%;height:68px;min-height:48px;margin:0;padding:6px;border:1px solid #d7dfeb;border-radius:12px;background:white;color:var(--navy,#1e3a5f);box-shadow:0 2px 4px #13274212;cursor:pointer;font-family:inherit}
.vtb-host .atb-toolbox-body button.mode-on{background:var(--gold,#d4af37);border-color:var(--gold,#d4af37)}
.vtb-host .atb-toolbox-body button:disabled{opacity:.35;cursor:default}
.vtb-host .atb-toolbox-body .atb-tool-icon{width:26px;height:26px;flex-shrink:0}
.vtb-host .atb-toolbox-body .atb-tool-label{font-size:13px;font-weight:bold;line-height:1.2;white-space:normal;text-align:center}
.vtb-host .atb-toolbox-resize{position:absolute;right:0;bottom:0;width:26px;height:24px;border:0;background:#e4eaf4;color:var(--navy,#1e3a5f);font-size:20px;cursor:nwse-resize;touch-action:none;padding:0;margin:0}
.vtb-host .atb-toolbox.atb-toolbox-compact .atb-toolbox-body{grid-template-columns:repeat(auto-fit,minmax(44px,1fr));padding:6px 6px 24px}
.vtb-host .atb-toolbox.atb-toolbox-compact .atb-toolbox-body button{width:44px;height:44px;min-height:44px;border-radius:50%;justify-self:center;gap:0}
.vtb-host .atb-toolbox.atb-toolbox-compact .atb-tool-label{display:none}
.vtb-host .atb-toolbox.atb-toolbox-compact button:has(img[hidden]) .atb-tool-label{display:block;font-size:10px}
.vtb-host .atb-toolbox-closed{height:44px!important;min-height:44px}
.vtb-host .atb-toolbox-closed .atb-toolbox-body,
.vtb-host .atb-toolbox-closed .atb-toolbox-resize{display:none}
.vtb-host .atb-toolbox button:focus-visible{outline:3px solid #4d97ff;outline-offset:-3px}


.vtb-host .atb-toolbox-layouts{display:flex;flex-shrink:0;gap:4px;padding:5px;background:#e7edf6}
.vtb-host .atb-toolbox-layouts button{flex:1;min-width:0;height:32px;margin:0;padding:2px;border:1px solid #c7d2e3;border-radius:7px;background:white;color:var(--navy,#1e3a5f);font-family:inherit;font-size:12px;font-weight:bold;cursor:pointer}
.vtb-host .atb-toolbox-layouts button[aria-pressed="true"]{background:var(--gold,#d4af37);border-color:var(--gold,#d4af37)}
.vtb-host .atb-toolbox[data-layout] .atb-toolbox-body{grid-template-columns:repeat(var(--atb-tool-columns),minmax(0,1fr))}
.vtb-host .atb-toolbox-closed .atb-toolbox-layouts{display:none}

/* 役割ごとの固定色。丸形・文字付きで共通。 */
.vtb-host .atb-toolbox-body button{--tool-bg:#eef1f5;--tool-border:#cbd2dc;--tool-ink:#394657;--tool-active:#465568;background:var(--tool-bg);border-color:var(--tool-border);color:var(--tool-ink)}
.vtb-host .atb-toolbox-body button[data-color="blue"]{--tool-bg:#e0edff;--tool-border:#9abce9;--tool-ink:#184d91;--tool-active:#245fa8}
.vtb-host .atb-toolbox-body button[data-color="orange"]{--tool-bg:#ffead4;--tool-border:#e6b07a;--tool-ink:#8b420c;--tool-active:#a64c10}
.vtb-host .atb-toolbox-body button[data-color="green"]{--tool-bg:#dcf2e5;--tool-border:#91c7a8;--tool-ink:#1d6342;--tool-active:#24734d}
.vtb-host .atb-toolbox-body button[data-color="purple"]{--tool-bg:#ede4fb;--tool-border:#bda2df;--tool-ink:#654091;--tool-active:#7045a1}
.vtb-host .atb-toolbox-body button[data-color="navy"]{--tool-bg:#e3eaf4;--tool-border:#9eafc7;--tool-ink:#1e3a5f;--tool-active:#1e3a5f}
.vtb-host .atb-toolbox-body button:hover:not(:disabled){box-shadow:0 0 0 2px var(--tool-border)}
.vtb-host .atb-toolbox-body button.mode-on{background:var(--tool-active);border-color:var(--tool-active);color:#fff;box-shadow:inset 0 0 0 2px #ffffff80}
.vtb-host .atb-toolbox-body button.mode-on img.atb-tool-icon{filter:brightness(0) invert(1)}


.vtb-host .atb-tool-icon{width:26px;height:26px;display:block;fill:currentColor}.vtb-host .atb-toolbox-settings svg{fill:currentColor}

.vtb-host .atb-toolbox [hidden]{display:none!important}
.vtb-host .atb-toolbox-grip{font-size:15px!important;line-height:1.2!important;min-width:0;white-space:normal}
.vtb-host .atb-toolbox-body>label,.vtb-host .atb-toolbox-body>select,.vtb-host .atb-toolbox-body>.tool-options,.vtb-host .atb-toolbox-body>.tool-info{grid-column:1/-1;min-width:0;margin:0;padding:6px;position:static;transform:none;background:transparent;box-shadow:none}
.vtb-host .atb-toolbox-body label{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:14px;color:#1e3a5f}
.vtb-host .atb-toolbox-body select{min-width:0;max-width:100%;width:100%;height:44px;background:white;color:#1e3a5f;border:1px solid #c7d2e3;border-radius:8px;font-size:14px}
.vtb-host .atb-toolbox-body .tool-options{display:flex;flex-direction:column;gap:8px}
.vtb-host .atb-toolbox-body :is(.atb-toolbar-group,.piece-tools,nav){display:contents;position:static;transform:none;padding:0;background:none;box-shadow:none}
.vtb-host .atb-toolbox-body button{border-radius:12px!important;font-size:14px;line-height:1.3!important}
.vtb-host .atb-toolbox-body img.atb-tool-icon,.vtb-host .atb-toolbox-body svg.atb-tool-icon{width:26px!important;height:26px!important;fill:currentColor;stroke:none;touch-action:auto}
.vtb-host .atb-toolbox-head svg{width:24px!important;height:24px!important;fill:currentColor}
.vtb-host .atb-toolbox-compact .atb-toolbox-body button{border-radius:50%!important}
.vtb-host .atb-toolbox-body .tool-info{font-size:13px;text-align:center;color:#1e3a5f}
.vtb-host .atb-toolbox-body [aria-pressed=true]{background:var(--tool-active,#245fa8);color:white}
@media print{.vtb-host .atb-toolbox{display:none!important}}

.vtb-host .atb-toolbox-body .klm-zoomctrl{display:contents}.vtb-host .atb-toolbox-body .klm-fab{width:auto;min-width:0;height:60px;border-radius:12px}.vtb-host .atb-toolbox-body .klm-fab-zoomlabel{display:none}.vtb-host .atb-toolbox{z-index:10000}.klm-settings-pop{z-index:10002!important}.klm-reception{grid-column:1/-1;font-weight:bold;padding:6px;text-align:center}.klm-tool-choice{background:#e3eaf4!important;color:#1e3a5f!important}.atb-toolbox-body .klm-tool-choice[aria-pressed="true"]{outline:3px solid #597cd8}.klm-accept-btn{grid-column:1/-1}.klm-settings-pop{max-width:calc(100vw - 24px)}

.vtb-host .atb-toolbox-body>.tool-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}.vtb-host .atb-toolbox-head .klm-box-fullscreen{width:32px;height:32px;min-height:32px;border:0;background:transparent;color:white;padding:4px;flex:none}.vtb-host .atb-toolbox-head .klm-box-fullscreen .atb-tool-label{display:none}.vtb-host .atb-toolbox-body button{white-space:normal}.vtb-host .atb-toolbox-body .klm-tool-choice{min-height:44px}


.klm-root .atb-card-auth{width:100%}.klm-root .atb-card-sequence{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:12px 0}.klm-root .atb-card-choices{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}.klm-root .atb-pin-card{min-width:0;border:1px solid #cbd5e1;border-radius:12px;padding:8px;text-align:center;cursor:pointer}.klm-root .atb-pin-mark{width:36px;height:36px;fill:currentColor;display:block;margin:auto}.klm-root .atb-pin-name{display:block;font-size:12px}.klm-root .atb-pin-order{font-size:11px}.klm-root #klm-number-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px;margin:12px 0}.klm-root #klm-number-grid button{min-height:44px;background:#e4efff;border:1px solid #9abce9;border-radius:8px}.klm-root #klm-number-grid button[aria-pressed="true"]{outline:3px solid #345bc4}.klm-root #klm-number-grid button:disabled{opacity:.35}.klm-room-info{display:grid!important;grid-template-columns:1fr auto!important}.klm-room-info>div{grid-column:1/-1}.klm-room-info .atb-pin-mark{width:24px;height:24px}.klm-room-info .atb-pin-name{font-size:10px}#klm-qr-cards .atb-pin-mark{width:56px;height:56px}

/* 国語用道具箱：課題・表示・ルームをまとめる */
#klm-floatdock .atb-toolbox-body{display:flex;flex-direction:column;gap:8px;padding:10px 10px 22px}
#klm-floatdock .klm-tool-section{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;border-bottom:1px solid #dbe3ef;padding:0 0 9px;min-width:0}
#klm-floatdock .klm-tool-section h3{grid-column:1/-1;font-size:12px;color:#52647e;margin:0;padding:0;font-weight:700;line-height:1.3}
#klm-floatdock .klm-task-section{grid-template-columns:repeat(3,minmax(0,1fr))}
#klm-floatdock .atb-toolbox-body button{height:44px;min-height:44px;box-shadow:none;font-size:13px;padding:5px;gap:2px}
#klm-floatdock .klm-accept-section{grid-template-columns:1fr 1fr;align-items:center}
#klm-floatdock .klm-accept-section .klm-reception,#klm-floatdock .klm-accept-btn{grid-column:auto;font-size:14px;padding:4px}
#klm-floatdock .klm-room-info{grid-column:1/-1;padding:0}
#klm-floatdock .klm-room-info>strong{font-size:16px;align-self:center}
#klm-floatdock .klm-room-info .atb-card-sequence{margin:4px 0;gap:4px}
#klm-floatdock .klm-room-info .atb-pin-card{padding:4px;position:relative}
#klm-floatdock .klm-room-info .atb-pin-name{font-size:9px}
#klm-floatdock .klm-room-info .atb-pin-order{position:absolute;right:3px;top:1px;font-size:9px}
#klm-floatdock .klm-room-controls{grid-column:1/-1;font-size:12px}
#klm-floatdock .klm-room-controls summary{cursor:pointer;padding:5px}
#klm-floatdock .klm-room-controls button{margin-top:5px}
#klm-floatdock .klm-tool-section .klm-zoomctrl{display:contents}
#klm-floatdock .atb-toolbox-body>.tool-options:empty{display:none}
#klm-floatdock[data-layout="1"] .klm-tool-section{grid-template-columns:1fr}
#klm-floatdock.atb-toolbox-compact .atb-toolbox-body button{width:100%;border-radius:10px!important}
#klm-floatdock.atb-toolbox-compact .klm-tool-section{grid-template-columns:1fr}
#klm-floatdock.atb-toolbox-compact .klm-room-info{display:flex!important;flex-direction:column}
#klm-floatdock.atb-toolbox-compact .klm-room-info .atb-pin-name{display:none}
#klm-floatdock.atb-toolbox-compact .klm-room-info .atb-pin-mark{width:18px;height:18px}
#klm-floatdock .atb-toolbox-head .atb-tool-label{display:none}
#klm-settings-btn{display:none!important}
.klm-root [hidden]{display:none!important}

/* 等積変形と共通のルーム情報表示 */
#klm-qr-modal{width:min(1150px,calc(100vw - 32px));max-width:1150px;max-height:calc(100dvh - 48px);border-radius:24px;color:#1e3a5f;background:white;padding:24px;box-sizing:border-box;overflow:auto}
#klm-qr-modal[hidden]{display:none!important}
#klm-qr-modal .klm-modal-header{display:block;text-align:center;border:0;padding:0}
#klm-qr-modal h2{font-size:clamp(24px,3vw,34px);color:#1e3a5f;margin:0 0 20px;font-weight:700}
#klm-close-qr{display:none}
#klm-qr-modal .klm-modal-body{padding:0}
#klm-qr-modal .klm-room-caption{font-size:18px;color:#607796;margin:14px 0}
#klm-room-code-display{background:#edf2fc;border-radius:16px;font-family:monospace;font-size:clamp(44px,7vw,82px);font-weight:700;letter-spacing:.12em;line-height:1.4;padding:12px 10px;color:#163d68;text-align:center}
#klm-qr-modal .klm-room-instruction{font-size:clamp(16px,2vw,23px);margin:14px 0 22px;color:#1e3a5f}
#klm-qr-cards .atb-card-auth{width:100%}
#klm-qr-cards .atb-card-sequence{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;max-width:650px;margin:0 auto 24px}
#klm-qr-cards .atb-pin-card{position:relative;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:10px;min-height:138px;border:0;border-radius:18px;padding:22px 6px 14px;box-shadow:0 3px 6px #17365d10;box-sizing:border-box}
#klm-qr-cards .atb-pin-mark{width:58px;height:58px;fill:currentColor;display:block}
#klm-qr-cards .atb-pin-name{font-size:16px;color:#1e3a5f}
#klm-qr-cards .atb-pin-order{position:absolute;top:7px;right:8px;background:#1e3a5f;color:white;width:29px;height:29px;display:grid;place-items:center;border-radius:50%;font-size:18px}
#klm-qr-modal #klm-close-qr2{display:block;width:auto;margin:28px auto 4px;padding:15px 30px;border:0;border-radius:16px;background:#dfedf5;color:#1e3a5f;font-size:19px;font-weight:700;cursor:pointer}
#klm-qr-modal .klm-room-qr-details{font-size:13px;color:#607796;margin-top:14px;text-align:center}
#klm-qr-modal .klm-room-qr-details summary{cursor:pointer}
#klm-qr-modal #klm-qrcode{display:inline-block;margin-top:12px;background:white;padding:12px}
#klm-qr-modal #klm-join-url-display{width:100%;box-sizing:border-box;text-align:center;font-size:12px;padding:8px}
#klm-floatdock .klm-room-info .atb-card-sequence{display:flex;gap:5px;justify-content:center}
#klm-floatdock .klm-room-info .atb-pin-card{width:34px;height:34px;min-height:34px;padding:4px;border:0;border-radius:7px;box-sizing:border-box}
#klm-floatdock .klm-room-info .atb-pin-mark{width:26px;height:26px}
#klm-floatdock .klm-room-info .atb-pin-name,#klm-floatdock .klm-room-info .atb-pin-order{display:none}
@media(max-width:600px){#klm-qr-modal{padding:20px 14px}#klm-qr-cards .atb-card-sequence{gap:7px}#klm-qr-cards .atb-pin-card{min-height:100px;padding:25px 4px 10px;gap:5px;border-radius:12px}#klm-qr-cards .atb-pin-mark{width:38px;height:38px}#klm-qr-cards .atb-pin-name{font-size:12px}#klm-qr-cards .atb-pin-order{width:21px;height:21px;font-size:13px;top:4px;right:5px}}

/* 低頻度の操作はヘッダーの設定に集約 */
#klm-settings-pop,#klm-board-settings,#klm-student-settings{width:min(340px,calc(100vw - 24px));max-height:calc(100dvh - 32px);overflow:auto;box-sizing:border-box;gap:12px}
#klm-settings-pop h2,#klm-student-settings h2{font-size:18px;margin:0;color:#1e3a5f;line-height:1.4}
.klm-setting-section{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.klm-setting-section h3{grid-column:1/-1;font-size:13px;margin:0;color:#607796}
#klm-settings-pop .klm-zoomctrl,#klm-board-settings .klm-zoomctrl,#klm-student-settings .klm-zoomctrl{display:flex;grid-column:1/-1;gap:8px;position:static;justify-content:center;align-items:center}
#klm-settings-pop button,#klm-board-settings button,#klm-student-settings button{min-height:44px;height:auto;min-width:0;width:auto;border-radius:10px;padding:8px 12px;font:inherit;font-size:14px;line-height:1.4;box-sizing:border-box}
#klm-settings-pop .klm-fab,#klm-board-settings .klm-fab,#klm-student-settings .klm-fab{background:#e2edff;border:1px solid #aac4e9;color:#1e3a5f;box-shadow:none}
#klm-settings-pop .klm-room-controls{border-top:1px solid #dbe3ef;padding-top:10px;font-size:14px}
#klm-settings-pop .klm-room-controls summary{cursor:pointer;padding:6px 0}
#klm-settings-pop .klm-room-controls>button{display:block;width:100%;margin:6px 0;background:#f0f3fa;border:1px solid #cbd5e1;color:#1e3a5f}
#klm-floatdock .klm-display-section{grid-template-columns:1fr}
#klm-student-settings #klm-stu-leavewrap{margin:0!important;font-size:13px}
#klm-student-settings #klm-stu-help{background:#e2edff}
#klm-settings-pop [hidden],#klm-board-settings [hidden],#klm-student-settings [hidden]{display:none!important}

/* 児童の主要操作と設定内のボタン配置 */
#klm-stu-floatstack .atb-toolbox-body{display:flex;flex-direction:column;gap:8px;padding:10px 10px 22px}
#klm-stu-floatstack .atb-toolbox-body>button{width:100%;height:52px;min-height:44px;font-size:15px;box-shadow:none;border-radius:12px!important}
#klm-stu-floatstack #klm-stu-submit{background:#daf1e5;border:1px solid #91c7a8;color:#1d6342;font-weight:700}
#klm-stu-floatstack #klm-stu-clear{background:#e5edfa;border:1px solid #b2c5e5;color:#1e3a5f;font-weight:500}
#klm-student-settings{width:min(300px,calc(100vw - 24px));gap:10px;padding:16px}
#klm-student-settings h3{font-size:12px;font-weight:700;margin:6px 0 0;padding:10px 0 0;border-top:1px solid #dce4ef;color:#607796;line-height:1.4}
#klm-student-settings h2+h3{border-top:0;padding-top:0}
#klm-settings-pop .klm-zoomctrl,#klm-board-settings .klm-zoomctrl,#klm-student-settings .klm-zoomctrl{flex-direction:row!important;align-items:center;justify-content:center;gap:10px}
#klm-student-settings .klm-zoomctrl{display:grid!important;grid-template-columns:52px minmax(55px,1fr) 52px;width:100%;box-sizing:border-box}
#klm-student-settings .klm-zoomctrl button{width:52px;height:44px;padding:0;font-size:22px;border-radius:10px}
#klm-student-settings .klm-fab-zoomlabel{display:block;min-width:0;width:auto;text-align:center;font-size:15px;color:#1e3a5f}
#klm-student-settings .klm-withdraw-answer{width:100%;background:#fff0df;border:1px solid #e4bd8c;color:#875019;font-size:14px}
#klm-student-settings #klm-stu-leave{display:block;text-align:center;padding:11px 8px;border-radius:10px;background:#edf2f9;border:1px solid #c7d3e5;color:#1e3a5f;text-decoration:none;line-height:1.4}
#klm-student-settings #klm-stu-help{width:100%;text-align:center}
#klm-student-settings #klm-stu-help .atb-tool-label{display:inline}
#klm-student-settings #klm-stu-chart-btn{width:100%}

/* 先生の道具箱・設定のボタン寸法を統一 */
#klm-floatdock .atb-toolbox-grip{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:14px!important}
#klm-floatdock .atb-toolbox-head{height:44px;min-height:44px}
#klm-floatdock .atb-toolbox-head button:not(.atb-toolbox-grip){width:32px;min-width:32px;padding:0 4px}
#klm-floatdock .atb-toolbox-layouts{gap:6px;padding:8px}
#klm-floatdock .atb-toolbox-layouts button{height:36px;min-height:36px;border-radius:9px;font-size:13px;line-height:1.3}
#klm-floatdock .atb-toolbox-body{gap:10px;padding:10px 12px 24px}
#klm-floatdock .klm-tool-section{gap:7px;padding-bottom:10px}
#klm-floatdock .klm-tool-section h3{font-size:11px;letter-spacing:.03em;color:#657890}
#klm-floatdock .atb-toolbox-body button{border:1px solid #b8cce7;border-radius:10px!important;font-size:13px;font-weight:600;min-height:44px;height:44px;line-height:1.3;white-space:normal;box-shadow:none}
#klm-floatdock .klm-tool-choice{display:flex;flex-direction:row;gap:5px;background:#eef3fb!important;border-left-width:1px!important;color:#254567!important;padding:5px}
#klm-floatdock .klm-tool-choice[data-question^="Q"]:before{content:'';width:8px;height:8px;flex:none;border-radius:50%;background:var(--question-color)}
#klm-floatdock .klm-tool-choice[aria-pressed="true"]{outline:none;background:#dce9fa!important;border:2px solid #517eb9;box-shadow:inset 0 0 0 1px #ffffff}
#klm-floatdock .klm-accept-section{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px}
#klm-floatdock .klm-reception{font-size:13px;color:#466079;font-weight:600;text-align:left}
#klm-floatdock .klm-accept-btn{background:#e0f2e7;color:#256346;border-color:#a5d1b8}
#klm-floatdock #klm-list-btn{display:flex;flex-direction:row;gap:8px;color:#28578c;background:#e6effb}
#klm-floatdock #klm-list-btn .klm-ic{width:20px;height:20px;flex:none}
#klm-floatdock #klm-list-btn .atb-tool-label{font-size:13px;line-height:1.3}
#klm-floatdock .klm-room-info>strong{font-size:15px;white-space:nowrap}
#klm-floatdock .klm-room-info>button{height:36px;min-height:36px;font-size:12px;padding:5px 9px}
#klm-settings-pop{width:min(310px,calc(100vw - 24px));padding:18px;border:1px solid #d4deeb;border-radius:16px;gap:14px;box-shadow:0 10px 30px #17365d26}
#klm-settings-pop h2{font-size:18px;margin:0;line-height:1.4}
#klm-settings-pop .klm-setting-section{grid-template-columns:1fr;gap:10px}
#klm-settings-pop .klm-setting-section h3{font-size:12px;color:#657890;margin:0}
#klm-settings-pop #klm-zoom-wrap{display:grid!important;grid-template-columns:48px minmax(60px,1fr) 48px;gap:8px;width:100%;margin:0;align-items:center;flex-direction:row}
#klm-settings-pop #klm-zoom-wrap[style*="display: none"]{display:none!important}
#klm-settings-pop #klm-zoom-in,#klm-settings-pop #klm-zoom-out{width:48px;height:44px;min-height:44px;padding:0;font-size:22px;background:#e6effb;border:1px solid #b8cce7;border-radius:10px}
#klm-settings-pop #klm-zoom-label{display:block;min-width:0;text-align:center;font-size:15px;color:#284763;font-weight:600}
#klm-settings-pop .klm-setting-section>button{width:100%;height:44px;min-height:44px;background:#edf3fb!important;color:#284763!important;border:1px solid #b8cce7;border-radius:10px;font-size:13px;padding:8px 12px;outline:none;box-shadow:none}
#klm-settings-pop .klm-setting-section>button[aria-pressed="true"]{background:#dce9fa!important;border-color:#517eb9}
#klm-settings-pop .klm-room-controls{padding-top:10px;margin:0;border-top:1px solid #dde5ef}
#klm-settings-pop .klm-room-controls>summary{padding:5px 0;font-size:13px;color:#466079}
#klm-settings-pop .klm-room-controls>button{height:44px;border-radius:10px;font-size:13px}

.klm-ab-panel{width:min(350px,calc(100vw - 24px));position:fixed;z-index:10003!important;padding:16px;border-radius:16px}
.klm-ab-panel h2{margin:0;font-size:18px;color:#1e3a5f}.klm-ab-hint{font-size:12px;color:#607796;margin:0}.klm-ab-status{font-size:13px;color:#466079}.klm-ab-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}.klm-ab-actions button{min-height:44px;border:1px solid #b8cce7;border-radius:10px;background:#e5effc;color:#1e3a5f;font:inherit;font-size:13px;padding:8px;cursor:pointer}.klm-ab-actions button:disabled{opacity:.45}.klm-ab-panel [hidden]{display:none!important}.klm-ab-teacher-count{font-size:14px;color:#1e3a5f;font-weight:700}.klm-ab-results:empty{display:none}
.klm-student-ab{margin-bottom:10px;padding:10px 14px;border:1px solid #cfdaeb;background:#f5f8fd;border-radius:12px;color:#1e3a5f}.klm-ab-top{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:8px}.klm-ab-top strong{font-size:14px}.klm-ab-choices{display:grid;grid-template-columns:1fr 1fr;gap:10px;max-width:420px;margin:0 auto}.klm-ab-choice{min-height:48px;border:1px solid #abc1df;border-radius:10px;font-size:24px;font-weight:700;color:#24496e;cursor:pointer}.klm-ab-choice.ab-a{background:#dfedff}.klm-ab-choice.ab-b{background:#fbe4d7}.klm-ab-choice[aria-pressed="true"]{outline:3px solid #426daa;outline-offset:-3px;box-shadow:inset 0 0 0 5px #fff8}.klm-ab-choice:disabled{cursor:default;opacity:.65}.klm-ab-bar{display:flex;width:100%;height:18px;border-radius:8px;overflow:hidden;background:#e6eaf0;margin:12px 0 6px}.klm-ab-bar .ab-a{background:#668fd0}.klm-ab-bar .ab-b{background:#df9b70}.klm-ab-counts{display:flex;gap:10px;justify-content:space-between;font-size:13px;flex-wrap:wrap}#klm-floatdock #klm-survey-btn{background:#eee6fa;color:#64498a;border-color:#c7b3e0}

/* A・Bの回答済み状態は色と文字の両方で明示 */
.klm-root .klm-ab-choice{display:flex;align-items:center;justify-content:center;gap:12px;min-height:58px;border:2px solid transparent;transition:background-color .12s,color .12s;position:relative}
.klm-root .klm-ab-choice.ab-a{background:#e4efff;border-color:#b4cae9;color:#335b88}
.klm-root .klm-ab-choice.ab-b{background:#fff0e4;border-color:#e8c9ad;color:#865632}
.klm-root .klm-ab-choice .klm-ab-letter{font-size:27px;font-weight:800;line-height:1.1}
.klm-root .klm-ab-choice[aria-pressed="true"]{outline:0;box-shadow:0 0 0 3px #ffffff,0 0 0 5px #284f7a;transform:none}
.klm-root .klm-ab-choice.ab-a[aria-pressed="true"]{background:#285f9f;border-color:#285f9f;color:white}
.klm-root .klm-ab-choice.ab-b[aria-pressed="true"]{background:#99531f;border-color:#99531f;color:white}
.klm-root .klm-ab-choice .klm-ab-selected{display:inline-flex;align-items:center;padding:4px 8px;border-radius:7px;background:#ffffff24;font-size:13px;font-weight:700;line-height:1.3;white-space:nowrap;color:white}
.klm-root .klm-ab-choice:disabled[aria-pressed="true"]{opacity:1}
.klm-root .klm-ab-choice:focus-visible{outline:3px solid #153d67;outline-offset:5px}
@media(max-width:420px){.klm-root .klm-ab-choice{gap:7px}.klm-root .klm-ab-choice .klm-ab-selected{padding:4px;font-size:12px}}

.klm-root .klm-ab-confirm{display:block;width:min(420px,100%);min-height:44px;margin:12px auto 0;padding:10px 16px;border:1px solid #8bb99e;border-radius:10px;background:#d9efdf;color:#245c3b;font:inherit;font-size:15px;font-weight:700;cursor:pointer}
.klm-root .klm-ab-confirm:disabled{background:#e8ebf0;border-color:#d0d6df;color:#818b98;cursor:default}
.klm-root .klm-ab-confirm:focus-visible{outline:3px solid #284f7a;outline-offset:3px}
#klm-stu-floatstack #klm-stu-submit:disabled{background:#e6e9ef;border-color:#d0d6df;color:#818b98;opacity:1}

/* ============================================================
   修正: 読む範囲（段落）
   本文は段落ごとに .klm-para で囲んである。範囲外の段落に .klm-out が付く。
============================================================ */
.klm-root .klm-para{display:inline;}
.klm-range-hide .klm-para.klm-out{display:none;}
.klm-range-dim .klm-para.klm-out{opacity:.25;pointer-events:none;}
.klm-range-note{
  display:inline-block;margin:0 0 8px;padding:4px 12px;border-radius:999px;
  background:#fff4d6;border:1.5px solid #e8c25a;color:#6b4e00;font-weight:700;font-size:.95rem;
}
.klm-range-note[hidden]{display:none;}
/* 先生の設定の中の「読む範囲」 */
#klm-settings-pop .klm-range-section .klm-range-row{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:6px;align-items:center;}
#klm-settings-pop .klm-range-section select{width:100%;min-width:0;height:40px;border:1px solid #b8cce7;border-radius:10px;padding:0 6px;font-size:13px;background:#fff;color:#284763;}
#klm-settings-pop .klm-range-section .klm-seg{display:grid;grid-template-columns:1fr 1fr;gap:6px;}
#klm-settings-pop .klm-range-section .klm-range-status{margin:0;font-size:12px;color:#607796;line-height:1.5;}
#klm-settings-pop .klm-range-section[hidden]{display:none;}

/* 切替ボタン（先生の範囲・児童の読みやすさで共通） */
.klm-root .klm-seg{display:flex;flex-wrap:wrap;gap:6px;}
.klm-root .klm-seg button{
  flex:1 1 auto;min-height:40px;padding:6px 8px;border:1px solid #b8cce7;border-radius:10px;
  background:#f4f7fb;color:#284763;font-size:13px;font-weight:600;cursor:pointer;
}
.klm-root .klm-seg button[aria-pressed="true"]{background:#dce9fa;border-color:#517eb9;color:#16325a;box-shadow:inset 0 0 0 1px #517eb9;}

/* ============================================================
   修正: 読みやすさの設定（児童画面）
============================================================ */
.klm-readprefs{display:flex;flex-direction:column;gap:10px;}
.klm-readprefs[hidden]{display:none;}
.klm-readrow{display:flex;flex-direction:column;gap:4px;}
.klm-readlabel{font-size:12px;color:#607796;font-weight:700;}
/* 行の間 */
.klm-student-root.klm-rd-lh-1 #klm-stu-bodywrap{line-height:2.8;}
.klm-student-root.klm-rd-lh-1 #klm-stu-bodywrap.vertical{line-height:3.0;}
.klm-student-root.klm-rd-lh-2 #klm-stu-bodywrap{line-height:3.4;}
.klm-student-root.klm-rd-lh-2 #klm-stu-bodywrap.vertical{line-height:3.6;}
/* 文字の間 */
.klm-student-root.klm-rd-ls-1 #klm-stu-bodywrap{letter-spacing:.15em;}
/* 書体（端末に入っている書体だけが使われる） */
.klm-student-root.klm-rd-font-1 #klm-stu-bodywrap{font-family:"UD デジタル 教科書体 N-R","UD Digi Kyokasho N-R","UD デジタル 教科書体 NK-R","UD Digi Kyokasho NK-R","YuKyokasho","教科書体",serif;}
.klm-student-root.klm-rd-font-2 #klm-stu-bodywrap{font-family:"BIZ UDPゴシック","BIZ UDPGothic","BIZ UDゴシック","BIZ UDGothic","Hiragino Sans","Meiryo",sans-serif;}
/* 背景 */
.klm-student-root.klm-rd-bg-1 #klm-stu-bodywrap{background:#fff8e1;}
.klm-student-root.klm-rd-bg-2 #klm-stu-bodywrap{background:#e8f4fd;}
.klm-student-root.klm-rd-bg-3 #klm-stu-bodywrap{background:#1f2937;color:#f3f4f6;border-color:#374151;}
.klm-student-root.klm-rd-bg-3 #klm-stu-bodywrap rt{color:#cbd5e1;}
.klm-student-root.klm-rd-bg-3 #klm-stu-bodywrap.klm-curve-mode .ws-char{color:#e5e7eb;}

/* ============================================================
   修正: 児童のタブレットで線を引くと、すぐに途切れてしまう不具合。
   指を動かした瞬間にブラウザが「スクロールの操作」と判断して
   ジェスチャーを取り上げ（pointercancel）、線引きが2文字ほどで止まっていた。
   心情曲線と同じく、読む方向（縦書き＝上下／横書き＝左右）は線引きに使い、
   それと直角の向き（縦書き＝左右／横書き＝上下）だけをブラウザのスクロールにまかせる。
   （心情曲線モードの指定は、より詳しいセレクタなのでそちらが優先される）
============================================================ */
#klm-stu-bodywrap.vertical{touch-action:pan-x;}
#klm-stu-bodywrap:not(.vertical){touch-action:pan-y;}

/* ============================================================
   修正: みんなの注目（★）
   いちばん多くの児童が線を引いた段落に★と、うすい黄色の目印をつける。
============================================================ */
.klm-root .klm-para.klm-star{background:rgba(255,204,0,.16);border-radius:6px;}
.klm-root .klm-para.klm-star::before{
  content:"★";color:#f0a500;font-weight:900;margin:0 .2em;
  text-shadow:0 0 2px #fff,0 0 6px rgba(240,165,0,.55);
}
.klm-focus-note{
  display:inline-block;margin:0 0 8px 6px;padding:4px 12px;border-radius:999px;
  background:#fff8db;border:1.5px solid #f0c040;color:#6b4e00;font-weight:700;font-size:.95rem;
}
.klm-focus-note[hidden]{display:none;}
.klm-student-root.klm-rd-bg-3 #klm-stu-bodywrap .klm-para.klm-star{background:rgba(255,204,0,.22);}

/* ============================================================
   修正: 先生の「使われている番号」一覧（番号の利用を解除）
============================================================ */
.klm-member-panel{right:auto;bottom:auto;width:min(460px,calc(100vw - 24px));max-height:calc(100dvh - 32px);overflow:auto;z-index:10003!important;padding:16px;border-radius:16px;}
.klm-member-panel h2{margin:0;font-size:18px;color:#1e3a5f;}
.klm-member-hint{margin:0;font-size:12px;color:#607796;line-height:1.6;}
.klm-member-idle-key{display:inline-block;padding:0 6px;border-radius:6px;background:#fde8d7;color:#9a4a0b;font-weight:700;}
.klm-member-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(52px,1fr));gap:6px;}
.klm-mem{min-height:48px;border-radius:10px;font-size:16px;font-weight:700;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;padding:2px;cursor:pointer;}
.klm-mem.free{background:#f3f5f8;border:1px dashed #d2dae5;color:#b3bfcd;cursor:default;}
.klm-mem.used{background:#e5effc;border:1.5px solid #517eb9;color:#1e3a5f;}
.klm-mem.used.idle{background:#fde8d7;border-color:#e08a3c;color:#7a3a05;}
.klm-mem small{font-size:9px;font-weight:700;line-height:1;}
.klm-member-close{min-height:44px;border:1px solid #b8cce7;border-radius:10px;background:#edf3fb;color:#284763;font:inherit;font-size:14px;cursor:pointer;}
/* 児童：番号が押せないときの案内 */
.klm-number-hint{margin:6px 0 0;font-size:.85rem;color:#607796;}

/* ============================================================
   修正: 児童一覧・回答の詳細一覧をカード式に
============================================================ */
.klm-roster-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px;margin-bottom:10px;}
.klm-roster-count{font-size:.95rem;color:var(--navy,#1e3a5f);}
.klm-roster-count b{font-size:1.3rem;}
.klm-roster-filter{display:flex;flex-wrap:wrap;gap:6px;}
.klm-roster-filter button{min-height:36px;padding:4px 12px;border:1px solid #b8cce7;border-radius:999px;background:#f4f7fb;color:#284763;font-size:.85rem;font-weight:700;cursor:pointer;}
.klm-roster-filter button[aria-pressed="true"]{background:#dce9fa;border-color:#517eb9;color:#16325a;}
.klm-roster-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;align-items:start;}
.klm-roster-card{display:flex;flex-direction:column;gap:4px;padding:8px 10px;border:1.5px solid var(--line,#dbe2ea);border-radius:12px;background:#fff;min-height:64px;}
.klm-roster-card.done{border-left:6px solid var(--qc,#3b82f6);background:#fbfdff;}
.klm-roster-card.todo{background:#f7f8fa;border-style:dashed;}
.klm-rc-top{display:flex;align-items:center;justify-content:space-between;gap:6px;}
.klm-rc-no{font-size:1.4rem;font-weight:800;color:var(--navy,#1e3a5f);line-height:1;}
.klm-rc-no small{font-size:.7rem;font-weight:700;margin-left:2px;color:#607796;}
.klm-roster-card.todo .klm-rc-no{color:#9aa6b5;}
.klm-rc-text{font-size:.85rem;line-height:1.5;color:#333;word-break:break-all;}
.klm-rc-time{font-size:.72rem;color:#8a97a8;}
.klm-answer-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:8px;margin-top:8px;align-items:start;}
.klm-answer-card{display:flex;flex-direction:column;gap:6px;padding:10px 12px;border:1.5px solid var(--line,#dbe2ea);border-left:6px solid var(--qc,#3b82f6);border-radius:12px;background:#fff;}
.klm-ac-top{display:flex;align-items:center;gap:8px;}
.klm-ac-top .klm-rc-time{margin-left:auto;}
.klm-ac-q{display:inline-block;padding:2px 10px;border-radius:999px;font-size:.75rem;font-weight:700;}
.klm-ac-text{font-size:.9rem;line-height:1.6;color:#333;word-break:break-all;}

/* ============================================================
   修正: 本文の段落番号
   段落の先頭に、紺色の小さな番号を表示する（文字の位置には影響しない）。
============================================================ */
.klm-root .klm-pno{
  display:inline-block;min-width:1.5em;padding:0 .3em;margin:0 .35em 0 0;
  border-radius:.45em;background:#1e3a5f;color:#fff;
  font-size:.62em;font-weight:800;line-height:1.6;text-align:center;letter-spacing:0;
  vertical-align:.15em;user-select:none;-webkit-user-select:none;pointer-events:none;
}
/* 縦書き：番号は横向きの数字を立てて表示し、下に少し間をあける */
.klm-root .vertical .klm-pno{
  text-combine-upright:all;-webkit-text-combine:horizontal;
  min-width:0;min-height:1.5em;padding:.25em 0;margin:0 0 .35em 0;vertical-align:baseline;
}
.klm-root.klm-hide-pno .klm-pno,
.klm-student-root.klm-rd-pno-1 .klm-pno{display:none;}
/* 範囲外の段落（うすく表示）では番号もうすく */
.klm-root .klm-range-dim .klm-para.klm-out .klm-pno{background:#8a97a8;}

/* ============================================================
   修正: 読む範囲を「段落番号の丸ボタン」で選ぶ
============================================================ */
#klm-settings-pop .klm-range-howto{margin:0;font-size:12px;color:#607796;line-height:1.5;}
#klm-settings-pop .klm-pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(54px,1fr));gap:6px;max-height:220px;overflow:auto;padding:2px;}
#klm-settings-pop .klm-pbtn{
  position:relative;display:flex;flex-direction:column;align-items:center;gap:3px;
  min-height:60px;padding:6px 2px 4px;border:1px solid #c9d6e8;border-radius:12px;
  background:#f7f9fc;color:#284763;cursor:pointer;font:inherit;
}
#klm-settings-pop .klm-pbtn-no{
  display:flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;
  border:2px solid #1e3a5f;color:#1e3a5f;background:#fff;font-size:15px;font-weight:800;line-height:1;
}
#klm-settings-pop .klm-pbtn-head{font-size:9px;line-height:1.2;color:#7a8799;max-width:100%;overflow:hidden;white-space:nowrap;text-overflow:clip;}
#klm-settings-pop .klm-pbtn.sel{background:#dce9fa;border-color:#517eb9;}
#klm-settings-pop .klm-pbtn.end .klm-pbtn-no{background:#1e3a5f;color:#fff;}
/* いま児童に配っている範囲（小さなオレンジの点） */
#klm-settings-pop .klm-pbtn.live::after{content:"";position:absolute;top:5px;right:6px;width:8px;height:8px;border-radius:50%;background:#f08c00;box-shadow:0 0 0 2px #fff;}
#klm-settings-pop .klm-range-draft{margin:0;font-size:13px;font-weight:700;color:#1e3a5f;line-height:1.5;}

/* ============================================================
   修正: 児童の入室画面
   画面いっぱいの横長から、先生の「ルーム情報」と同じような
   中央にまとまったカードに変更。「入る」ボタンも横いっぱいにしない。
============================================================ */
.klm-student-root #klm-join-area .klm-card{
  max-width:760px;margin:28px auto;padding:28px 32px 24px;border-radius:24px;text-align:center;
  box-shadow:0 6px 24px rgba(23,54,93,.08);box-sizing:border-box;
}
.klm-student-root #klm-join-area .klm-card h2{
  border-left:0;padding-left:0;margin:0 0 18px;font-size:1.9rem;font-weight:800;color:#1e3a5f;letter-spacing:.05em;
}
.klm-student-root #klm-join-area .klm-field{display:flex;flex-direction:column;align-items:center;gap:8px;margin-bottom:14px;}
.klm-student-root #klm-join-area .klm-field label{font-size:1rem;color:#607796;font-weight:700;}
.klm-student-root #klm-join-area #klm-input-roomcode{
  width:100%;max-width:520px;height:84px;box-sizing:border-box;border:2px solid transparent;border-radius:20px;
  background:#eef3fb;color:#1e3a5f;font-size:2.6rem !important;font-weight:800;letter-spacing:.25em !important;text-align:center;
}
.klm-student-root #klm-join-area #klm-input-roomcode:focus{outline:none;border-color:#517eb9;background:#fff;}
.klm-student-root #klm-join-area #klm-input-roomcode::placeholder{color:#a9b6c7;font-weight:600;letter-spacing:.1em;font-size:1.6rem;}
.klm-student-root #klm-card-stage > p{margin:6px 0 2px;font-size:1.05rem;color:#1e3a5f;font-weight:700;}
/* 選んだ4枚（左から順番） */
.klm-student-root #klm-card-stage .atb-card-sequence{grid-template-columns:repeat(4,minmax(0,120px));justify-content:center;gap:12px;margin:14px 0;}
.klm-student-root #klm-card-stage .atb-sequence-card{position:relative;min-height:110px;border-radius:18px;border:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;}
.klm-student-root #klm-card-stage .atb-sequence-card .atb-pin-mark{width:46px;height:46px;}
.klm-student-root #klm-card-stage .atb-sequence-card .atb-pin-name{font-size:14px;color:#1e3a5f;}
.klm-student-root #klm-card-stage .atb-sequence-card .atb-pin-order{position:absolute;top:7px;right:8px;width:26px;height:26px;display:grid;place-items:center;border-radius:50%;background:#1e3a5f;color:#fff;font-size:14px;font-weight:700;}
.klm-student-root #klm-card-stage .atb-pin-empty{border:2px dashed #c9d6e8 !important;background:#f7f9fc;color:#b3bfcd;font-size:1.8rem;font-weight:800;cursor:default;}
/* えらぶカード（5種類） */
.klm-student-root #klm-card-stage .atb-card-choices{grid-template-columns:repeat(5,minmax(0,110px));justify-content:center;gap:10px;}
.klm-student-root #klm-card-stage .atb-card-choices .atb-pin-card{min-height:92px;border:0;border-radius:16px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;box-shadow:0 2px 6px rgba(23,54,93,.08);}
.klm-student-root #klm-card-stage .atb-card-choices .atb-pin-card:active{transform:scale(.96);}
.klm-student-root #klm-card-stage .atb-card-choices .atb-pin-mark{width:40px;height:40px;}
.klm-student-root #klm-card-stage .atb-card-choices .atb-pin-name{font-size:13px;color:#1e3a5f;}
/* 出席番号 */
.klm-student-root #klm-number-grid{max-width:560px;margin:12px auto !important;}
.klm-student-root #klm-number-grid button{min-height:50px;font-size:1.1rem;font-weight:700;color:#1e3a5f;border-radius:12px;}
.klm-student-root #klm-join-area #klm-input-studentid{width:100%;max-width:200px;height:56px;border-radius:14px;box-sizing:border-box;}
.klm-student-root .klm-number-hint{text-align:center;}
/* 入るボタン：横いっぱいにしない */
.klm-student-root #klm-join-btn{display:block;width:auto;min-width:260px;max-width:100%;height:56px;margin:20px auto 0;padding:0 40px;border-radius:999px;font-size:1.25rem;font-weight:800;letter-spacing:.1em;}
.klm-student-root #klm-join-error{text-align:center;}
@media (max-width:600px){
  .klm-student-root #klm-join-area .klm-card{margin:12px auto;padding:20px 14px;border-radius:18px;}
  .klm-student-root #klm-join-area .klm-card h2{font-size:1.5rem;}
  .klm-student-root #klm-join-area #klm-input-roomcode{height:68px;font-size:2rem !important;}
  .klm-student-root #klm-card-stage .atb-card-sequence{gap:7px;}
  .klm-student-root #klm-card-stage .atb-sequence-card{min-height:84px;}
  .klm-student-root #klm-card-stage .atb-card-choices{gap:6px;}
  .klm-student-root #klm-card-stage .atb-card-choices .atb-pin-card{min-height:76px;}
  .klm-student-root #klm-join-btn{min-width:200px;}
}

/* ============================================================
   修正: 児童の入室画面に縦スクロールが出ないようにする
   部品の大きさを画面の高さ（vh）に合わせて縮め、1画面に収める。
   出席番号は1行に多く並べ（4行ほどに収める）、番号の欄は横並びにする。
============================================================ */
.klm-student-root #klm-join-area .klm-card{margin:clamp(8px,2vh,28px) auto;padding:clamp(14px,2.6vh,28px) clamp(16px,3vw,32px) clamp(12px,2.2vh,24px);}
.klm-student-root #klm-join-area .klm-card h2{font-size:clamp(1.3rem,3.6vh,1.9rem);margin-bottom:clamp(6px,1.6vh,18px);}
.klm-student-root #klm-join-area .klm-field{gap:4px;margin-bottom:clamp(6px,1.4vh,14px);}
.klm-student-root #klm-join-area #klm-input-roomcode{height:clamp(54px,9vh,84px);font-size:clamp(1.7rem,5vh,2.6rem) !important;}
.klm-student-root #klm-card-stage > p{margin:clamp(2px,.6vh,6px) 0 0;font-size:clamp(.9rem,2vh,1.05rem);}
.klm-student-root #klm-card-stage .atb-card-sequence{margin:clamp(6px,1.4vh,14px) 0;}
.klm-student-root #klm-card-stage .atb-sequence-card{min-height:clamp(66px,11.5vh,110px);gap:4px;}
.klm-student-root #klm-card-stage .atb-sequence-card .atb-pin-mark{width:clamp(30px,5vh,46px);height:clamp(30px,5vh,46px);}
.klm-student-root #klm-card-stage .atb-card-choices .atb-pin-card{min-height:clamp(60px,9.5vh,92px);gap:4px;}
.klm-student-root #klm-card-stage .atb-card-choices .atb-pin-mark{width:clamp(28px,4.4vh,40px);height:clamp(28px,4.4vh,40px);}
.klm-student-root #klm-join-btn{height:clamp(44px,6.5vh,56px);margin-top:clamp(10px,2vh,20px);}
/* 出席番号を選ぶ画面 */
.klm-student-root #klm-number-grid{max-width:680px;grid-template-columns:repeat(auto-fill,minmax(48px,1fr)) !important;gap:6px;margin:clamp(6px,1.4vh,12px) auto !important;}
.klm-student-root #klm-number-grid button{min-height:clamp(38px,6vh,50px);font-size:clamp(.95rem,2.2vh,1.1rem);}
.klm-student-root .klm-number-hint{margin:2px 0 clamp(6px,1.4vh,12px);font-size:.85rem;}
.klm-student-root #klm-number-stage .klm-field{flex-direction:row;justify-content:center;align-items:center;gap:10px;margin-bottom:0;}
.klm-student-root #klm-number-stage .klm-field label{margin:0;}
.klm-student-root #klm-join-area #klm-input-studentid{max-width:120px;height:clamp(40px,6vh,52px);font-size:1.3rem !important;}

/* 修正: 入室画面はアプリを画面の下まで伸ばし、カードを上下の真ん中に置く（高さはJSで指定） */
.klm-student-root.klm-joining{display:flex;flex-direction:column;box-sizing:border-box;}
.klm-student-root.klm-joining .klm-main{flex:1;display:flex;flex-direction:column;justify-content:center;}
.klm-student-root.klm-joining #klm-join-area{width:100%;}

/* ============================================================
   修正: ヘッダー（紺色の帯）をなくした
   先生：配布中の教材・課題・送信状況 → 道具箱の「ルーム」の中
   児童：教材名・いまの課題          → 道具箱のいちばん上
============================================================ */
.klm-root > .klm-header{display:none !important;}
.klm-root .klm-tool-status{
  display:flex !important;flex-direction:column;align-items:stretch;gap:4px;
  grid-column:1/-1;width:100%;box-sizing:border-box;order:2;
  margin:6px 0 0;padding:8px 10px;border-radius:10px;background:#eef3fb;border:0;
  color:#1e3a5f;font-size:12px;font-weight:700;line-height:1.4;box-shadow:none;
}
.klm-root .klm-tool-status:empty{display:none !important;}
.klm-root .klm-tool-status .sb-title{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13px;}
.klm-root .klm-tool-status .sb-q{display:flex;align-items:center;gap:6px;}
.klm-root .klm-tool-status .sb-count{color:#466079;}
.klm-root .klm-tool-status .sb-count b{font-size:15px;color:#1e3a5f;}
.klm-root .klm-tool-stuinfo{flex-direction:column;align-items:stretch;gap:6px;margin:0 0 4px;}
.klm-root .klm-tool-stuinfo .klm-header-mattitle{color:#1e3a5f;font-size:13px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:center;}
.klm-root .klm-tool-stuinfo .klm-currentq{justify-content:center;margin:0;padding:6px 10px;font-size:13px;}

/* ============================================================
   修正: 道具箱の「ルームを終了」（長押し）
============================================================ */
.vtb-host .atb-toolbox-body .klm-hold-btn.klm-tool-end{
  grid-column:1/-1;order:3;display:block;position:relative;overflow:hidden;width:100%;height:44px;min-height:44px;
  margin:6px 0 0;padding:0 10px;border:1.5px solid #c0392b;border-radius:999px;background:#fff !important;
  color:#c0392b !important;font-size:13px;font-weight:700;box-shadow:none;touch-action:none;
}
.vtb-host .atb-toolbox-body .klm-hold-btn.klm-tool-end .klm-hold-fill{background:#c0392b;}
.vtb-host .atb-toolbox-body .klm-hold-btn.klm-tool-end.holding .klm-hold-label{color:#fff;}

/* ============================================================
   修正: 配布後に本文を修正する画面
============================================================ */
#klm-settings-pop .klm-edit-section>button{width:100%;}
.klm-edit-modal{display:flex;align-items:center;justify-content:center;padding:16px;box-sizing:border-box;z-index:10010 !important;}
.klm-edit-modal[hidden]{display:none !important;}
.klm-edit-box{
  width:min(860px,100%);max-height:calc(100dvh - 32px);display:flex;flex-direction:column;gap:8px;
  background:#fff;border-radius:20px;padding:20px 22px;box-sizing:border-box;box-shadow:0 12px 40px rgba(20,35,55,.3);
}
.klm-edit-box h2{margin:0;font-size:1.3rem;color:#1e3a5f;}
.klm-edit-note{margin:0;font-size:12px;color:#607796;line-height:1.6;}
.klm-edit-label{font-size:12px;font-weight:700;color:#52647e;margin-top:4px;}
.klm-edit-box input,.klm-edit-box textarea{width:100%;box-sizing:border-box;border:1.5px solid #c9d6e8;border-radius:10px;padding:8px 10px;font:inherit;font-size:15px;color:#1e2a3a;}
.klm-edit-box textarea{flex:1;min-height:200px;height:45vh;resize:vertical;line-height:1.8;}
.klm-edit-count{margin:0;text-align:right;font-size:12px;color:#8a97a8;}
.klm-edit-actions{display:flex;justify-content:flex-end;gap:10px;}
.klm-edit-actions button{min-height:44px;padding:0 22px;border-radius:999px;font:inherit;font-size:14px;font-weight:700;cursor:pointer;}
.klm-edit-cancel{background:#fff;border:1.5px solid #b8cce7;color:#284763;}
.klm-edit-save{background:#d4af37;border:0;color:#1e3a5f;}
.klm-edit-save:disabled{opacity:.5;}

/* 修正: 「ルームを終了」は設定の「ルーム管理」の中へ */
#klm-settings-pop .klm-room-controls .klm-end-warn{margin:10px 0 0;font-size:12px;color:#c0392b;line-height:1.5;}
#klm-settings-pop .klm-room-controls .klm-hold-btn.klm-pop-end{position:relative;overflow:hidden;display:block;width:100%;height:44px;margin:6px 0 0;padding:0 12px;font-size:13px;font-weight:700;background:#fff !important;color:#c0392b !important;border:1.5px solid #c0392b !important;border-radius:999px;box-shadow:none;}
#klm-settings-pop .klm-room-controls .klm-hold-btn.klm-pop-end .klm-hold-fill{background:#c0392b;}
#klm-settings-pop .klm-room-controls .klm-hold-btn.klm-pop-end.holding .klm-hold-label{color:#fff;}

/* ============================================================
   修正: 設定の整理（A案）「見え方」「児童に配る」「ルーム」
============================================================ */
#klm-settings-pop .klm-setgroup{display:flex;flex-direction:column;gap:12px;padding:12px;border-radius:14px;border:1px solid #dbe3ef;}
#klm-settings-pop .klm-setgroup-view{background:#f7f9fc;}
#klm-settings-pop .klm-setgroup-send{background:#fff8ec;border-color:#f0d9a8;}
#klm-settings-pop .klm-setgroup-room{background:#fff;}
#klm-settings-pop .klm-setgroup-title{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;font-size:15px;font-weight:800;color:#1e3a5f;}
#klm-settings-pop .klm-setgroup-title small{font-size:11px;font-weight:600;color:#7a8799;}
#klm-settings-pop .klm-setgroup-send .klm-setgroup-title{color:#8a5a00;}
#klm-settings-pop .klm-setgroup .klm-room-controls{border-top:0;padding-top:0;}
#klm-settings-pop .klm-setgroup #klm-set-curve{display:flex;flex-direction:column;gap:8px;}
#klm-settings-pop .klm-curve-labels-section .klm-set-lbl{font-size:12px;color:#657890;font-weight:700;}

/* ============================================================
   修正: 文字検索
   見つかった文字は黄色、いま見ている場所はオレンジの枠で表示する
   （ヒートマップや選んだ線の色の上に重ねて見えるよう、inset の影で塗る）
============================================================ */
.klm-search-panel{
  position:fixed;top:12px;left:50%;transform:translateX(-50%);z-index:10005;
  display:flex;align-items:center;gap:6px;width:min(460px,calc(100vw - 24px));box-sizing:border-box;
  padding:8px 10px;border-radius:14px;background:#fff;border:1.5px solid #c9d6e8;box-shadow:0 8px 24px rgba(23,54,93,.18);
}
.klm-search-panel[hidden]{display:none;}
.klm-search-panel .klm-search-input{flex:1;min-width:0;height:40px;box-sizing:border-box;border:1.5px solid #c9d6e8;border-radius:10px;padding:0 10px;font:inherit;font-size:16px;color:#1e2a3a;}
.klm-search-panel .klm-search-input:focus{outline:none;border-color:#517eb9;}
.klm-search-panel .klm-search-count{flex:none;min-width:4.5em;text-align:center;font-size:12px;font-weight:700;color:#52647e;white-space:nowrap;}
.klm-search-panel button{flex:none;width:38px;height:38px;border:1px solid #b8cce7;border-radius:10px;background:#edf3fb;color:#1e3a5f;font-size:14px;cursor:pointer;padding:0;}
.klm-search-panel .klm-search-close{background:#fff;}
.klm-root .ws-char.klm-hit{box-shadow:inset 0 0 0 100px rgba(255,221,0,.45);}
.klm-root .ws-char.klm-hit-cur{box-shadow:inset 0 0 0 100px rgba(255,150,0,.55);outline:2px solid #e67700;outline-offset:0;}

/* ============================================================
   修正: 道具箱の見た目を整える
   ・横にはみ出して横スクロールバーが出ないようにする
   ・教材名は2行までで折り返す（ふりがなの記法はJSで外して表示）
   ・使っていない区切り線をかくす／「文字を検索」は横いっぱいに
============================================================ */
.vtb-host .atb-toolbox-body{overflow-x:hidden;}
.vtb-host .atb-toolbox-body > *{min-width:0;}
.vtb-host .atb-toolbox-body .klm-fab-sep{display:none !important;}
/* 先生：ルームの状況 */
.klm-root .klm-tool-status{min-width:0;}
.klm-root .klm-tool-status .sb-title{
  white-space:normal;overflow:hidden;text-overflow:clip;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  word-break:break-all;line-height:1.4;
}
.klm-root .klm-tool-status .sb-q{flex-wrap:wrap;}
#klm-floatdock .klm-text-section > button{grid-column:1/-1;}
/* 児童：教材名といまの課題 */
.klm-root .klm-tool-stuinfo{display:flex;width:100%;min-width:0;box-sizing:border-box;padding:8px;border-radius:12px;background:#eef3fb;}
.klm-root .klm-tool-stuinfo .klm-header-mattitle{
  white-space:normal;text-overflow:clip;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  word-break:break-all;line-height:1.4;font-size:12px;
}
.klm-root .klm-tool-stuinfo .klm-currentq{
  display:flex;width:100%;box-sizing:border-box;flex-wrap:wrap;justify-content:center;gap:6px;
  white-space:normal;text-align:center;line-height:1.3;padding:6px 8px;font-size:12px;
}
.klm-root .klm-tool-stuinfo .klm-currentq .dot{flex:none;}

/* 修正: 文字検索ボタンは設定の中 */
#klm-settings-pop .klm-search-section>button{width:100%;}
.klm-root .klm-settings-pop .klm-pop-search{
  display:block;width:100%;min-height:44px;border:1px solid #b8cce7;border-radius:10px;background:#edf3fb;color:#284763;
  font:inherit;font-size:14px;font-weight:700;cursor:pointer;
}

/* ============================================================
   修正: ★（みんなの注目）の見せ方を変更
   段落全体に「★ はじめ ── 線 ── 終わり ★」をつける（うすい黄色の背景はやめた）。
   線は文字の横（縦書きは右側、横書きは下）に引くので、文字そのものは目立たせない。
============================================================ */
.klm-root .klm-para.klm-star{
  background:none !important;
  text-decoration-line:underline;text-decoration-style:solid;text-decoration-color:#f0a500;
  text-decoration-thickness:3px;text-underline-offset:.35em;text-decoration-skip-ink:none;
}
.klm-root .vertical .klm-para.klm-star{text-underline-position:right;}
.klm-root .klm-para.klm-star .klm-pstart::before,
.klm-root .klm-para.klm-star .klm-pend::before{
  content:"★";color:#f0a500;font-weight:900;margin:0 .15em;text-decoration:none;display:inline-block;
  text-shadow:0 0 2px #fff,0 0 6px rgba(240,165,0,.55);
}
.klm-root .klm-para.klm-star::before{content:none !important;} /* はじめの★は .klm-pstart で出す */
.klm-root .klm-para.klm-star rt,.klm-root .klm-para.klm-star .klm-pno{text-decoration:none;}
.klm-student-root.klm-rd-bg-3 #klm-stu-bodywrap .klm-para.klm-star{background:none !important;}
/* 修正: 縦書きでは「はじめの★」が段落番号の下にかくれないよう、間をあけて手前に出す */
.klm-root .klm-para.klm-star .klm-pstart::before,
.klm-root .klm-para.klm-star .klm-pend::before{position:relative;z-index:1;line-height:1;}
.klm-root .vertical .klm-para.klm-star .klm-pstart::before,
.klm-root .vertical .klm-para.klm-star .klm-pend::before{display:inline;margin:0;padding:0;content:"★\2002";}
.klm-root .vertical .klm-para.klm-star .klm-pno{margin-top:.35em;}

/* 修正: 終わりの★は「最後の文字がある列（行）の先頭」に置く（JSの placeEndStars）。
   置けないとき（段落が1列だけ など）だけ、最後の文字のあとに出す */
.klm-root .klm-para.klm-star .klm-pend::before{content:none;}
.klm-root .klm-para.klm-star.klm-endafter .klm-pend::before{content:"★";}
.klm-root .vertical .klm-para.klm-star.klm-endafter .klm-pend::before{content:"★\2002";}
.klm-root .klm-colstar{
  display:inline;color:#f0a500;font-weight:900;margin:0 .15em 0 0;text-decoration:none;
  text-shadow:0 0 2px #fff,0 0 6px rgba(240,165,0,.55);user-select:none;-webkit-user-select:none;pointer-events:none;
}
.klm-root .vertical .klm-colstar{margin:0;}
.klm-root .vertical .klm-colstar::after{content:"\2002";}
.klm-root .vertical .klm-para.klm-star:not(.klm-endafter) .klm-pend::before{content:none;}

/* 修正: 句点（。）のあとの★は出さない（終わりの★は「最後の文字がある列の先頭」だけ）。
   列の先頭に置けないとき（段落が1列だけ など）は、はじめの★だけにする */
.klm-root .klm-para.klm-star .klm-pend::before,
.klm-root .klm-para.klm-star.klm-endafter .klm-pend::before,
.klm-root .vertical .klm-para.klm-star.klm-endafter .klm-pend::before,
.klm-root .vertical .klm-para.klm-star .klm-pend::before{content:none !important;}

/* 修正: 段落番号ボタンは番号だけ（書き出しの文字はなくした） */
#klm-settings-pop .klm-pgrid{grid-template-columns:repeat(auto-fill,minmax(46px,1fr));max-height:none;overflow:visible;}
#klm-settings-pop .klm-pbtn{min-height:46px;padding:6px 2px;justify-content:center;}
#klm-settings-pop .klm-pbtn-head{display:none;}

/* ============================================================
   修正: 検索欄は道具箱の中に出す／アイコンはSVG
============================================================ */
.klm-search-ico{flex:none;vertical-align:middle;}
.klm-root .klm-pop-search,#klm-settings-pop .klm-search-section>button{display:flex !important;align-items:center;justify-content:center;gap:6px;}
.klm-search-panel.klm-search-in-box{
  position:static;transform:none;width:100%;box-sizing:border-box;z-index:auto;
  display:flex;flex-direction:column;align-items:stretch;gap:6px;grid-column:1/-1;order:-1;
  padding:8px;border-radius:12px;background:#fff;border:1.5px solid #9abce9;box-shadow:none;
}
.klm-search-panel.klm-search-in-box[hidden]{display:none !important;}
.klm-search-panel .klm-search-row{display:flex;align-items:center;gap:6px;min-width:0;}
.klm-search-panel .klm-search-row .klm-search-ico{color:#1e3a5f;}
.klm-search-panel.klm-search-in-box .klm-search-input{height:38px;font-size:15px;}
.klm-search-panel .klm-search-nav .klm-search-count{flex:1;text-align:left;min-width:0;}
.klm-search-panel.klm-search-in-box button{width:34px;height:34px;min-height:34px;display:flex;align-items:center;justify-content:center;flex:none;margin:0;padding:0;box-shadow:none;}
/* 道具箱のふつうのボタンの見た目（大きな縦長ボタン）を、検索欄の中のボタンには使わない */
.vtb-host .atb-toolbox-body .klm-search-panel button{flex-direction:row;height:34px;min-height:34px;width:34px;border-radius:8px;font-size:13px;gap:0;}
.vtb-host .atb-toolbox-body .klm-search-panel button{width:30px;height:30px;min-height:30px;font-size:12px;}
.klm-search-panel.klm-search-in-box .klm-search-nav{gap:4px;}
.klm-search-panel.klm-search-in-box .klm-search-count{font-size:11px;min-width:0;white-space:nowrap;}

/* ============================================================
   修正: 道具箱の「選択中の課題」ボタンを、その課題の色でぬりつぶして目立たせる
   （以前はうすい青で、ほかのボタンと見分けにくかった）
============================================================ */
#klm-floatdock .klm-tool-choice[aria-pressed="true"]{
  background:var(--question-color,#1e3a5f) !important;color:var(--question-on,#fff) !important;
  border:2px solid var(--question-color,#1e3a5f) !important;box-shadow:0 2px 6px rgba(23,54,93,.25);font-weight:800;
}
#klm-floatdock .klm-tool-choice[aria-pressed="true"]:before{background:var(--question-on,#fff) !important;}

/* ============================================================
   修正: ★は段落のはじめだけ。文字の横の線もなくした
============================================================ */
.klm-root .klm-para.klm-star{text-decoration:none !important;}
.klm-root .klm-colstar{display:none !important;}
/* ヒートマップを見せている間のボタン */
#klm-floatdock #klm-heat-btn[aria-pressed="true"]{background:#1e3a5f !important;color:#fff !important;border-color:#1e3a5f !important;}

/* ============================================================
   修正: みんなの注目は★ではなく「段落番号の色（オレンジ）」で示す
   段落番号をかくす設定にしていても、注目の段落の番号だけは表示する
============================================================ */
.klm-root .klm-para.klm-star .klm-pstart::before{content:none !important;}
.klm-root .klm-para.klm-star .klm-pno{
  display:inline-block !important;background:#f08c00;color:#fff;
  box-shadow:0 0 0 2px #fff,0 0 0 4px #f08c00;
}
.klm-root .vertical .klm-para.klm-star .klm-pno{margin-top:.25em;}
.klm-focus-note .klm-focus-swatch{display:inline-block;padding:0 6px;border-radius:6px;background:#f08c00;color:#fff;}

/* ============================================================
   修正: 段落ごとの人数（先生の画面だけ）と、見せる数の切り替え
============================================================ */
.klm-root .klm-pcount{
  display:inline-block;margin:0 .35em 0 0;padding:0 .35em;border-radius:.45em;
  background:#fff1dc;color:#8a4b00;border:1px solid #f0b060;
  font-size:.55em;font-weight:800;line-height:1.6;vertical-align:.15em;letter-spacing:0;
  user-select:none;-webkit-user-select:none;pointer-events:none;text-decoration:none;
}
.klm-root .klm-pcount b{font-weight:900;}
.klm-root .vertical .klm-pcount{display:inline;margin:0 0 .35em 0;padding:.2em .1em;vertical-align:baseline;line-height:1.3;}
.klm-root .vertical .klm-pcount b{text-combine-upright:all;-webkit-text-combine:horizontal;}
/* 道具箱：見せる数（1位／2位まで／3位まで） */
#klm-floatdock .klm-focus-top{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;}
#klm-floatdock .klm-focus-top button{
  height:32px;min-height:32px;padding:0;border:1px solid #e6b07a;border-radius:8px;background:#fff7ee;color:#8b420c;
  font-size:12px;font-weight:700;box-shadow:none;display:flex;align-items:center;justify-content:center;flex-direction:row;
}
#klm-floatdock .klm-focus-top button[aria-pressed="true"]{background:#f08c00;border-color:#f08c00;color:#fff;}

/* ============================================================
   修正: 段落ごとの人数は、段落番号の右上に重ねるバッジで表示する
   （段落番号の中に置き、絶対位置で右上へ。文字の並びには影響しない）
============================================================ */
.klm-root .klm-pno{position:relative;overflow:visible;}
.klm-root .klm-pno .klm-pcount{
  position:absolute;top:-.85em;right:-1.05em;left:auto;bottom:auto;margin:0;
  display:flex;align-items:center;justify-content:center;
  min-width:1.6em;height:1.6em;padding:0 .3em;box-sizing:border-box;border-radius:999px;
  background:#e8590c;color:#fff;border:2px solid #fff;box-shadow:0 1px 3px rgba(0,0,0,.25);
  font-size:.9em;font-weight:900;line-height:1;letter-spacing:0;
  writing-mode:horizontal-tb;text-combine-upright:none;-webkit-text-combine:none;
  z-index:2;pointer-events:none;
}
.klm-root .vertical .klm-pno .klm-pcount{top:-.75em;right:-1.1em;}
.klm-root .klm-pno .klm-pcount{font-size:1.05em;min-width:1.7em;height:1.7em;}
/* 横書き：バッジが本文の最初の文字に重ならないよう、人数があるときは段落番号のあとを少しあける */
.klm-root .klm-bodywrap:not(.vertical) .klm-pno:has(.klm-pcount){margin-right:1.1em;}
.klm-root .klm-bodywrap:not(.vertical) .klm-pno .klm-pcount{top:-.95em;right:-1.25em;}

/* ============================================================
   修正: 「ラグい」対策（いちばん効いたもの）
   本文全体がひとつながりの文章（1つのインライン整形）になっていたため、
   1文字の色を変えるだけで、ブラウザが本文全部（約2,700文字）の並びを計算し直していた。
   段落ごとにブロック（ひとかたまり）にすると、計算し直すのはその段落だけになり、約10倍速くなる。
   段落の終わりの改行は、ブロックにしたことで不要になるのでかくす（空行の改行は残る）。
============================================================ */
.klm-root .klm-bodywrap .klm-para{display:block;}
.klm-root .klm-bodywrap .klm-para > br:last-child{display:none;}
.klm-root .klm-range-hide .klm-para.klm-out{display:none;}