/* ============================================================
   国語ラインマーカー（部屋方式） スタイルシート
   プレフィックス: 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;}
}