/* 修正: 100vh → 100dvh（モバイルのアドレスバー分のずれ・下部余白を解消） */
.koubaisuu-visual-root{display:block;position:relative;width:100%;height:100dvh;min-height:640px;overflow:hidden;background:#f5f7fb;isolation:isolate;}
/* 修正: WordPress管理画面の管理者バー分の高さを差し引く（ログイン時に下端が見切れる問題の対策） */
body.admin-bar .koubaisuu-visual-root{height:calc(100dvh - 32px);}
@media screen and (max-width:782px){
  body.admin-bar .koubaisuu-visual-root{height:calc(100dvh - 46px);}
}
/* 修正: 「下に白い/灰色の余白が残る」対策。
   これは大抵、アプリの箱自体が短いのではなく、テーマ側のページラッパーが
   アプリより背が高く、その余りが素の背景色のまま見えているケース（過去の
   「画面下の空白」調査と同じ現象）。html/bodyの高さを揃え、はみ出す分は
   アプリと同じ背景色で塗って目立たなくする */
html:has(.koubaisuu-visual-root),
body:has(.koubaisuu-visual-root){
  height:100%;
  margin:0;
}
body:has(.koubaisuu-visual-root){
  background:#f5f7fb;
}
.koubaisuu-visual-root *{box-sizing:border-box}
.koubaisuu-visual-root{
  --bg:#f5f7fb;
  --panel:#fff;
  --line:#d9dee8;
  --text:#1f2937;
  --muted:#6b7280;
  --blue:#2563eb;
  --blue-soft:#dbeafe;
  --red:#ef4444;
  --red-soft:#fee2e2;
  --green:#16a34a;
  --green-soft:#dcfce7;
  --grid:#cbd5e1;
  --tile:#c9f7c5;
  --tile-line:#2f7d45;
}
.koubaisuu-visual-root, .koubaisuu-visual-root{
  margin:0;
  width:100%;
  height:100%;
  overflow:hidden;
}
.koubaisuu-visual-root{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;
  background:var(--bg);
  color:var(--text);
}
.koubaisuu-visual-root button{font:inherit}
.koubaisuu-visual-root .app{
  /* 修正: 親要素(.koubaisuu-visual-root)が既に100dvh基準のため、ここは100%でよい */
  height:100%;
  display:grid;
  /* 修正: 公倍数/公約数タブをヘッダー内に統合したため、行はheader/mainの2段に戻す */
  grid-template-rows:70px minmax(0,1fr);
}
.koubaisuu-visual-root header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:0 20px;
  background:#fff;
  border-bottom:1px solid var(--line);
  flex-wrap:wrap;
}
.koubaisuu-visual-root .title h1{
  margin:0;
  font-size:21px;
}
.koubaisuu-visual-root .title p{
  margin:2px 0 0;
  font-size:12px;
  color:var(--muted);
}
.koubaisuu-visual-root .header-actions{
  display:flex;
  gap:8px;
}
.koubaisuu-visual-root .header-actions button{
  border:0;
  border-radius:11px;
  padding:9px 13px;
  background:#eef2f7;
  font-weight:700;
  cursor:pointer;
}
/* 修正: main の直接の子要素は #multipleMode と #divisorMode の2枚（表示切替用）。
   ここに「盤面1fr＋表162px」の行指定をしていたため、公約数モードが第2行(162px)に
   押し込められて潰れて表示されていた。main は単に残り高さいっぱいに広げるだけにし、
   行構成は各モードの中（.mode-view.active）側で持たせる */
.koubaisuu-visual-root main{
  min-height:0;
  padding:12px;
  display:block;
}
.koubaisuu-visual-root .mode-view{
  display:none;
}
.koubaisuu-visual-root .mode-view.active{
  display:grid;
  grid-template-rows:minmax(0,1fr) 162px;
  gap:12px;
  height:100%;
  min-height:0;
}
.koubaisuu-visual-root .workspace{
  min-height:0;
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:12px;
}
.koubaisuu-visual-root .board-panel, .koubaisuu-visual-root .side-panel, .koubaisuu-visual-root .table-panel{
  background:#fff;
  border:1px solid var(--line);
  border-radius:17px;
}
.koubaisuu-visual-root .board-panel{
  min-width:0;
  min-height:0;
  /* 修正: 「しきつめエリア」ヘッダー行を削除したので、盤面(board-area)1枚だけの構成にする */
  display:grid;
  grid-template-rows:minmax(0,1fr);
  overflow:hidden;
}
.koubaisuu-visual-root .board-area{
  min-width:0;
  min-height:0;
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  padding:26px;
  background:#fbfcfe;
}
.koubaisuu-visual-root .grid-board{
  display:grid;
  gap:0;
  background:#fff;
  box-sizing:content-box;
  border:3px solid #334155;
  outline:none;
  box-shadow:0 8px 24px rgba(15,23,42,.06);
}
.koubaisuu-visual-root .cell{
  background:#fff;
  border-right:1px solid var(--grid);
  border-bottom:1px solid var(--grid);
}
.koubaisuu-visual-root .cell.tile-filled{
  background:var(--tile);
}
.koubaisuu-visual-root .cell:last-child{
  border-right:0;
}
.koubaisuu-visual-root .cell.tile-right{
  border-right:2px solid var(--tile-line);
}
.koubaisuu-visual-root .cell.tile-bottom{
  border-bottom:2px solid var(--tile-line);
}
.koubaisuu-visual-root .grid-board.square{
  border-color:var(--green);
  outline:3px solid rgba(22,163,74,.18);
  outline-offset:3px;
}
.koubaisuu-visual-root .side-panel{
  padding:14px;
  display:flex;
  flex-direction:column;
  gap:11px;
  overflow:hidden;
}
.koubaisuu-visual-root .shape-card{
  border:1px solid #edf0f5;
  background:#f9fafb;
  border-radius:13px;
  padding:11px;
}
.koubaisuu-visual-root .shape-card > strong{font-size:14px}
.koubaisuu-visual-root .dims{
  display:flex;
  gap:8px;
  margin-top:8px;
}
.koubaisuu-visual-root .dim{
  flex:1;
  padding:7px;
  text-align:center;
  background:#fff;
  border:1px solid var(--line);
  border-radius:10px;
  font-size:12px;
}
.koubaisuu-visual-root .dim b{
  display:block;
  margin-top:1px;
  font-size:23px;
}
.koubaisuu-visual-root .instruction{
  background:#fff8e8;
  border:1px solid #f3e2b5;
  border-radius:13px;
  padding:10px 12px;
  line-height:1.55;
  font-size:13px;
}
.koubaisuu-visual-root .direction{
  border:1px solid #e7ebf1;
  border-radius:13px;
  padding:9px;
}
.koubaisuu-visual-root .direction-title{
  margin-bottom:7px;
  font-size:13px;
  font-weight:800;
}
.koubaisuu-visual-root .step-actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
}
.koubaisuu-visual-root .step-actions button{
  height:42px;
  border:0;
  border-radius:11px;
  font-weight:800;
  cursor:pointer;
}
.koubaisuu-visual-root .minus{
  background:var(--red-soft);
  color:#b91c1c;
}
.koubaisuu-visual-root .plus{
  background:var(--blue);
  color:#fff;
}
.koubaisuu-visual-root .check-btn{
  height:45px;
  border:0;
  border-radius:12px;
  background:#111827;
  color:#fff;
  font-weight:800;
  cursor:pointer;
}
.koubaisuu-visual-root .status{
  min-height:44px;
  background:#f3f4f6;
  border-radius:12px;
  padding:9px 11px;
  line-height:1.5;
  font-size:12px;
}
.koubaisuu-visual-root .table-panel{
  min-width:0;
  min-height:150px;
  overflow:hidden;
  padding:10px 12px 12px;
  display:block;
}
.koubaisuu-visual-root .table-head{
  height:25px;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
}
.koubaisuu-visual-root .table-head strong{font-size:15px}
.koubaisuu-visual-root .table-head span{font-size:11px;color:var(--muted)}
.koubaisuu-visual-root .table-wrap{
  width:100%;
  display:block;
  overflow:hidden;
}
.koubaisuu-visual-root .mult-table{
  width:100%;
  table-layout:fixed;
  border-collapse:collapse;
}
.koubaisuu-visual-root .mult-table th, .koubaisuu-visual-root .mult-table td{
  height:47px;
  border:1px solid #cfd6e0;
  text-align:center;
  font-weight:700;
}
.koubaisuu-visual-root .mult-table th{
  width:178px;
  padding:0 10px;
  text-align:left;
  font-size:13px;
}
.koubaisuu-visual-root .mult-table tr:first-child th{background:var(--red-soft)}
.koubaisuu-visual-root .mult-table tr:last-child th{background:var(--blue-soft)}
.koubaisuu-visual-root .mult-table td{
  font-size:18px;
  background:#fff;
}
.koubaisuu-visual-root .mult-table td.latest{
  background:#fffbeb;
  box-shadow:inset 0 0 0 2px #f59e0b;
}
.koubaisuu-visual-root .empty-cell{
  color:#c4cad3;
  font-weight:500!important;
}
.koubaisuu-visual-root .modal-backdrop{
  position:fixed;
  inset:0;
  z-index:1000;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
  background:rgba(17,24,39,.42);
}
.koubaisuu-visual-root .modal-backdrop.hidden{display:none}
.koubaisuu-visual-root .modal{
  width:min(430px,100%);
  padding:24px;
  background:#fff;
  border-radius:22px;
  box-shadow:0 24px 70px rgba(0,0,0,.22);
}
.koubaisuu-visual-root .modal h2{
  margin:0 0 6px;
  font-size:23px;
}
.koubaisuu-visual-root .modal p{
  margin:0 0 18px;
  color:var(--muted);
  font-size:14px;
  line-height:1.6;
}
.koubaisuu-visual-root .modal-row{
  display:grid;
  grid-template-columns:68px 1fr;
  gap:12px;
  align-items:center;
  margin:12px 0;
}
.koubaisuu-visual-root .modal-row label{font-weight:800}
.koubaisuu-visual-root .modal-stepper{
  display:grid;
  grid-template-columns:54px 1fr 54px;
  gap:8px;
}
.koubaisuu-visual-root .modal-stepper button{
  height:52px;
  border:0;
  border-radius:12px;
  background:#eef2f7;
  font-size:26px;
  cursor:pointer;
}
.koubaisuu-visual-root .modal-value{
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid var(--line);
  border-radius:12px;
  font-size:25px;
  font-weight:800;
}
.koubaisuu-visual-root .start-btn{
  width:100%;
  height:52px;
  margin-top:16px;
  border:0;
  border-radius:14px;
  background:var(--blue);
  color:#fff;
  font-weight:800;
  cursor:pointer;
}

.koubaisuu-visual-root .edge-label{
  position:absolute;
  z-index:4;
  font-size:14px;
  font-weight:800;
  color:#334155;
  pointer-events:none;
  white-space:nowrap;
}
.koubaisuu-visual-root .edge-label.top{
  transform:translate(-50%,-100%);
  padding-bottom:5px;
}
.koubaisuu-visual-root .edge-label.left{
  transform:translate(-100%,-50%);
  padding-right:7px;
}


.koubaisuu-visual-root .floating-controls{
  position:absolute;
  right:16px;
  bottom:16px;
  z-index:20;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.koubaisuu-visual-root .float-group{
  display:flex;
  align-items:center;
  gap:8px;
  padding:8px;
  background:rgba(255,255,255,.96);
  border:1px solid #d9dee8;
  border-radius:16px;
  box-shadow:0 8px 28px rgba(15,23,42,.14);
}
.koubaisuu-visual-root .float-label{
  min-width:36px;
  text-align:center;
  font-size:12px;
  font-weight:800;
  color:#475569;
}
.koubaisuu-visual-root .float-btn{
  width:46px;
  height:46px;
  border:0;
  border-radius:50%;
  font-size:24px;
  font-weight:800;
  cursor:pointer;
  box-shadow:0 4px 10px rgba(15,23,42,.10);
}
.koubaisuu-visual-root .float-btn.minus{
  background:#fee2e2;
  color:#b91c1c;
}
.koubaisuu-visual-root .float-btn.plus{
  background:#2563eb;
  color:#fff;
}
/* 右下操作ボタンを常に最前面へ */
.koubaisuu-visual-root .floating-controls{
  z-index:2147483000 !important;
}
.koubaisuu-visual-root .float-group,
.koubaisuu-visual-root .float-btn{
  position:relative;
  z-index:1;
}

/* ===== 公倍数 / 公約数 切替（ヘッダー内） ===== */
.koubaisuu-visual-root .mode-tabs{
  display:flex;
  gap:8px;
  /* 修正: 独立した帯ではなくヘッダー内に配置するため背景・上余白を廃止 */
}
.koubaisuu-visual-root .mode-tab{
  border:1px solid #d8e0ea;
  background:#f4f7fb;
  color:#475569;
  border-radius:999px;
  padding:8px 16px;
  font-size:13px;
  font-weight:900;
  cursor:pointer;
  white-space:nowrap;
}
.koubaisuu-visual-root .mode-tab.active{
  background:#0f172a;
  border-color:#0f172a;
  color:#fff;
}
/* 修正: display指定は上部の main 内ルールに統一済み（ここでの重複指定が
   「grid」→「block」に上書きしてレイアウト崩れを起こしていたため削除） */

/* ===== 公約数モード ===== */
.koubaisuu-visual-root #divisorMode{
  height:100%;
}
.koubaisuu-visual-root .divisor-panel{
  /* 修正: main側のpaddingとグリッドgapで余白を統一するため、個別marginは廃止 */
  overflow:visible;
  min-height:0;
  display:flex;
  flex-direction:column;
}
/* 修正: 見出し・説明文・変更ボタンの帯(.divisor-head)を削除したため、対応CSSも削除 */
.koubaisuu-visual-root .divisor-stage{
  position:relative;
  /* 修正: 高さを420px固定にしていたため、画面が高いときに下に余白が残り、
     低いときに盤面がはみ出す原因になっていた。親パネルの残り高さいっぱいに広げる */
  flex:1 1 auto;
  min-height:0;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#fbfdff;
  overflow:hidden;
}
.koubaisuu-visual-root .divisor-board-wrap{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
}
.koubaisuu-visual-root .divisor-board{
  display:grid;
  gap:0;
  background:#fff;
  border:3px solid #334155;
  box-shadow:0 10px 26px rgba(15,23,42,.08);
}
.koubaisuu-visual-root .divisor-cell{
  width:100%;
  height:100%;
  border-right:1px solid #cbd5e1;
  border-bottom:1px solid #cbd5e1;
  background:#dcfce7;
}
.koubaisuu-visual-root .divisor-cell.tile-right{
  border-right:2px solid #166534;
}
.koubaisuu-visual-root .divisor-cell.tile-bottom{
  border-bottom:2px solid #166534;
}
.koubaisuu-visual-root .divisor-cell.invalid{
  background:#fee2e2;
}
.koubaisuu-visual-root .divisor-board.invalid{
  border-color:#dc2626;
}
.koubaisuu-visual-root .divisor-board.valid{
  border-color:#16a34a;
}
.koubaisuu-visual-root .divisor-dimension{
  position:absolute;
  font-weight:900;
  color:#334155;
  font-size:14px;
  white-space:nowrap;
}
.koubaisuu-visual-root .divisor-dimension-top{
  left:50%;
  top:-30px;
  transform:translateX(-50%);
}
.koubaisuu-visual-root .divisor-dimension-left{
  left:-58px;
  top:50%;
  transform:translateY(-50%) rotate(-90deg);
}
.koubaisuu-visual-root .divisor-floating{
  position:absolute;
  right:16px;
  bottom:16px;
  z-index:2147483000 !important;
  display:flex;
  align-items:center;
  gap:8px;
  padding:9px;
  border-radius:16px;
  background:rgba(255,255,255,.97);
  border:1px solid #d8e0ea;
  box-shadow:0 10px 26px rgba(15,23,42,.16);
}
.koubaisuu-visual-root .divisor-floating strong{
  min-width:48px;
  text-align:center;
  font-size:16px;
}
.koubaisuu-visual-root .divisor-table-panel{
  /* 修正: divisor-panel と同様、個別marginを廃止しグリッドgapに統一 */
  padding:12px;
  overflow:auto;
  min-height:0;
}
.koubaisuu-visual-root .divisor-result-grid{
  display:grid;
  grid-template-columns:repeat(12,minmax(48px,1fr));
  border-left:1px solid #cfd8e4;
  border-top:1px solid #cfd8e4;
}
.koubaisuu-visual-root .divisor-result-item{
  min-height:52px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-right:1px solid #cfd8e4;
  border-bottom:1px solid #cfd8e4;
  font-weight:900;
  background:#fff;
}
.koubaisuu-visual-root .divisor-result-item.checked.valid{
  background:#e9fff4;
  color:#08784a;
}
.koubaisuu-visual-root .divisor-result-item.checked.invalid{
  background:#fff1f2;
  color:#b91c1c;
}
.koubaisuu-visual-root .divisor-result-item.current{
  box-shadow:inset 0 0 0 3px #f59e0b;
}
.koubaisuu-visual-root .divisor-modal{
  position:absolute;
  inset:0;
  z-index:2147483001;
  display:none;
  align-items:center;
  justify-content:center;
  background:rgba(15,23,42,.35);
}
.koubaisuu-visual-root .divisor-modal.show{display:flex}
.koubaisuu-visual-root .divisor-modal-card{
  width:min(420px,92%);
  background:#fff;
  border-radius:20px;
  padding:22px;
  box-shadow:0 18px 50px rgba(15,23,42,.22);
}
.koubaisuu-visual-root .divisor-modal-card h2{
  margin:0 0 16px;
  text-align:center;
}
.koubaisuu-visual-root .modal-size-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}
.koubaisuu-visual-root .modal-size-box{
  text-align:center;
  padding:14px;
  border:1px solid #dbe3ec;
  border-radius:14px;
}
.koubaisuu-visual-root .modal-stepper{
  display:grid;
  grid-template-columns:42px 1fr 42px;
  align-items:center;
  gap:8px;
  margin:10px 0 4px;
}
.koubaisuu-visual-root .modal-stepper button{
  height:42px;
  border:0;
  border-radius:12px;
  background:#eef3f8;
  font-weight:900;
  font-size:20px;
  cursor:pointer;
}
.koubaisuu-visual-root .modal-stepper strong{
  font-size:26px;
}
.koubaisuu-visual-root .modal-start{
  width:100%;
  margin-top:16px;
  height:48px;
  border:0;
  border-radius:14px;
  background:#2563eb;
  color:#fff;
  font-weight:900;
  cursor:pointer;
}


/* ===== 公約数モード：自分で正方形をはめる ===== */
.koubaisuu-visual-root .divisor-stage{
  position:relative;
  overflow:visible;
  min-height:0;
}
.koubaisuu-visual-root .divisor-board-wrap{
  position:relative;
  overflow:visible;
}
.koubaisuu-visual-root .divisor-board{
  display:none !important;
}
.koubaisuu-visual-root .divisor-board-shell{
  position:relative;
  box-sizing:content-box;
  border:3px solid #334155;
  background:#fff;
  overflow:visible;
  box-shadow:0 10px 26px rgba(15,23,42,.08);
  cursor:crosshair;
  touch-action:manipulation;
}
.koubaisuu-visual-root .divisor-grid{
  position:absolute;
  inset:0;
  display:grid;
  gap:0;
  overflow:hidden;
  background:#fff;
  z-index:1;
}
.koubaisuu-visual-root .divisor-grid-cell{
  border-right:1px solid #cbd5e1;
  border-bottom:1px solid #cbd5e1;
  background:#f8fbff;
}
.koubaisuu-visual-root .divisor-piece-layer{
  position:absolute;
  inset:0;
  overflow:visible;
  z-index:3;
  pointer-events:none;
}
.koubaisuu-visual-root .divisor-piece{
  position:absolute;
  box-sizing:border-box;
  border:3px solid #2563eb;
  background:rgba(96,165,250,.16);
  border-radius:4px;
  pointer-events:auto;
  cursor:pointer;
}
.koubaisuu-visual-root .divisor-piece-inside{
  position:absolute;
  inset:auto;
  background:rgba(96,165,250,.42);
  pointer-events:none;
}
.koubaisuu-visual-root .divisor-piece-label{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  z-index:2;
  padding:2px 5px;
  border-radius:6px;
  background:rgba(255,255,255,.88);
  color:#1e3a8a;
  font-size:12px;
  font-weight:900;
  white-space:nowrap;
  pointer-events:none;
}
.koubaisuu-visual-root .divisor-floating{
  position:absolute;
  right:16px;
  bottom:16px;
  z-index:2147483000 !important;
  display:flex;
  align-items:center;
  gap:8px;
}
.koubaisuu-visual-root .divisor-clear-btn{
  height:42px;
  border:0;
  border-radius:11px;
  padding:0 12px;
  background:#eef2f7;
  color:#334155;
  font-weight:900;
  cursor:pointer;
}
.koubaisuu-visual-root .divisor-tried-list{
  min-height:60px;
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  padding:8px 2px 2px;
}
.koubaisuu-visual-root .divisor-tried-chip{
  min-width:60px;
  height:44px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid #cbd5e1;
  border-radius:12px;
  background:#fff;
  color:#334155;
  font-weight:900;
}
.koubaisuu-visual-root .divisor-tried-empty{
  color:#94a3b8;
  font-size:13px;
}

/* 赤・緑などの正誤表示は使わない */
.koubaisuu-visual-root .divisor-result-item.checked.valid,
.koubaisuu-visual-root .divisor-result-item.checked.invalid,
.koubaisuu-visual-root .divisor-board.valid,
.koubaisuu-visual-root .divisor-board.invalid,
.koubaisuu-visual-root .divisor-cell.invalid{
  background:inherit !important;
  color:inherit !important;
  border-color:inherit !important;
  box-shadow:none !important;
}

/* 公約数：配置操作を確実に受け取り、置く位置をプレビュー */
.koubaisuu-visual-root .divisor-board-shell,
.koubaisuu-visual-root .divisor-grid,
.koubaisuu-visual-root .divisor-grid-cell{
  pointer-events:auto !important;
}
.koubaisuu-visual-root .divisor-piece-layer{
  pointer-events:none !important;
}
.koubaisuu-visual-root .divisor-piece{
  pointer-events:auto !important;
}
.koubaisuu-visual-root .divisor-piece-preview{
  position:absolute;
  box-sizing:border-box;
  border:3px dashed #2563eb;
  background:rgba(96,165,250,.16);
  z-index:10;
  pointer-events:none;
}

/* ===== 公約数モード：配置後の見やすさ改善 ===== */
.koubaisuu-visual-root .divisor-grid-cell{
  border-right:1px solid rgba(148,163,184,.24) !important;
  border-bottom:1px solid rgba(148,163,184,.24) !important;
  background:#fbfdff !important;
}

.koubaisuu-visual-root .divisor-piece{
  background:rgba(96,165,250,.16) !important;
  border:4px solid #2563eb !important;
  border-radius:2px !important;
  box-shadow:none !important;
  overflow:visible !important;
}

.koubaisuu-visual-root .divisor-piece-inside{
  background:rgba(96,165,250,.28) !important;
}

.koubaisuu-visual-root .divisor-piece-label{
  display:none !important;
}

.koubaisuu-visual-root .divisor-piece.dragging{
  opacity:.78;
  cursor:grabbing;
  z-index:50;
  box-shadow:0 8px 20px rgba(37,99,235,.18) !important;
}

.koubaisuu-visual-root .divisor-piece-preview{
  background:rgba(96,165,250,.06) !important;
  border:3px dashed rgba(37,99,235,.8) !important;
}

/* 配置済み正方形の枠線を細く */
.koubaisuu-visual-root .divisor-piece{
  border-width:2px !important;
}
.koubaisuu-visual-root .divisor-piece-preview{
  border-width:2px !important;
}

/* 公約数：自動で敷きつめる */
.koubaisuu-visual-root .divisor-auto-btn{
  height:42px;
  border:0;
  border-radius:11px;
  padding:0 14px;
  background:#0f172a;
  color:#fff;
  font-weight:900;
  cursor:pointer;
}
.koubaisuu-visual-root .divisor-auto-btn:hover{
  opacity:.9;
}

/* ===== わけるモード：図形を大きく表示 ===== */
.koubaisuu-visual-root #divisorMode{
  height:calc(100vh - 118px);
  min-height:560px;
}

.koubaisuu-visual-root #divisorMode .divisor-panel{
  height:100%;
  margin:12px;
  overflow:visible;
}

.koubaisuu-visual-root #divisorMode .divisor-stage{
  height:100%;
  min-height:0;
  padding:46px 110px 42px 82px;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:visible;
}

.koubaisuu-visual-root #divisorMode .divisor-board-wrap{
  max-width:100%;
  max-height:100%;
}

.koubaisuu-visual-root #divisorMode .divisor-floating{
  right:18px;
  bottom:18px;
  z-index:2147483000 !important;
}

@media (max-height:800px){
  .koubaisuu-visual-root #divisorMode{
    height:calc(100vh - 104px);
    min-height:500px;
  }
  .koubaisuu-visual-root #divisorMode .divisor-stage{
    padding-top:34px;
    padding-bottom:30px;
  }
}

/* ===== 100dvh 全画面レイアウト ===== */
.koubaisuu-visual-root{
  height:100dvh !important;
  min-height:100dvh !important;
  display:flex !important;
  flex-direction:column !important;
  overflow:hidden !important;
}

/* ヘッダー／モード切替は内容分だけ、残りをmainへ */
.koubaisuu-visual-root > header{
  flex:0 0 auto !important;
}

.koubaisuu-visual-root .mode-tabs{
  flex:0 0 auto !important;
}

.koubaisuu-visual-root > main{
  flex:1 1 auto !important;
  min-height:0 !important;
  height:auto !important;
  overflow:hidden !important;
  padding:0 !important;
}

/* わけるモードはmain全体を使用 */
.koubaisuu-visual-root #divisorMode{
  height:100% !important;
  min-height:0 !important;
}

.koubaisuu-visual-root #divisorMode .divisor-panel{
  height:100% !important;
  min-height:0 !important;
  margin:0 !important;
  border-radius:0 !important;
  display:flex !important;
  flex-direction:column !important;
  overflow:hidden !important;
}

.koubaisuu-visual-root #divisorMode .divisor-stage{
  flex:1 1 auto !important;
  height:auto !important;
  min-height:0 !important;
  padding:42px 120px 42px 92px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  overflow:visible !important;
  position:relative !important;
}

/* 画面内に収まる範囲で可能な限り拡大 */
.koubaisuu-visual-root #divisorMode .divisor-board-wrap{
  max-width:100% !important;
  max-height:100% !important;
}

/* 操作ボタンは作業エリア右下 */
.koubaisuu-visual-root #divisorMode .divisor-floating{
  position:absolute !important;
  right:18px !important;
  bottom:18px !important;
  z-index:2147483000 !important;
}

/* 旧100vh指定を無効化 */
.koubaisuu-visual-root #divisorMode{
  height:100% !important;
}

@media (max-height:800px){
  .koubaisuu-visual-root #divisorMode .divisor-stage{
    padding-top:28px !important;
    padding-bottom:28px !important;
  }
}

/* ===== わけるモード：旧下表用の予約行を完全に削除 ===== */
.koubaisuu-visual-root > main:has(#divisorMode.active){
  display:block !important;
  grid-template-rows:none !important;
  grid-template-columns:none !important;
  height:auto !important;
  min-height:0 !important;
  flex:1 1 auto !important;
  overflow:hidden !important;
}

/* わけるモードはmainの残り高さを100%使用 */
.koubaisuu-visual-root > main:has(#divisorMode.active) #divisorMode{
  display:block !important;
  width:100% !important;
  height:100% !important;
  min-height:0 !important;
}

/* 旧のmultipleMode側が占有しないよう明示 */
.koubaisuu-visual-root > main:has(#divisorMode.active) #multipleMode{
  display:none !important;
}

/* わけるのパネル・ステージも残り領域いっぱい */
.koubaisuu-visual-root > main:has(#divisorMode.active) #divisorMode .divisor-panel{
  height:100% !important;
  min-height:0 !important;
}

.koubaisuu-visual-root > main:has(#divisorMode.active) #divisorMode .divisor-stage{
  height:100% !important;
  min-height:0 !important;
  flex:1 1 auto !important;
}

/* ===== 画面の残り高さを正確に使う最終修正 ===== */
.koubaisuu-visual-root{
  min-height:0 !important;
  overflow:hidden !important;
}

.koubaisuu-visual-root > .app{
  height:100% !important;
  min-height:0 !important;
  display:flex !important;
  flex-direction:column !important;
  grid-template-rows:none !important;
  overflow:hidden !important;
}

.koubaisuu-visual-root > .app > header{
  flex:0 0 auto !important;
}

.koubaisuu-visual-root > .app > main{
  flex:1 1 0 !important;
  width:100% !important;
  height:auto !important;
  min-height:0 !important;
  padding:0 !important;
  overflow:hidden !important;
  display:block !important;
}

/* わける時はmainの全高をそのまま使用 */
.koubaisuu-visual-root > .app > main #divisorMode.active{
  display:block !important;
  width:100% !important;
  height:100% !important;
  min-height:0 !important;
}

.koubaisuu-visual-root > .app > main #divisorMode.active .divisor-panel{
  width:100% !important;
  height:100% !important;
  min-height:0 !important;
  margin:0 !important;
  border-radius:0 !important;
  display:flex !important;
  flex-direction:column !important;
  overflow:hidden !important;
}

.koubaisuu-visual-root > .app > main #divisorMode.active .divisor-stage{
  flex:1 1 0 !important;
  width:100% !important;
  height:auto !important;
  min-height:0 !important;
  padding:38px 110px 34px 86px !important;
  overflow:visible !important;
}

/* ===== はみ出し部分だけ赤半透明 ===== */

/* 通常：正方形は青 */
.koubaisuu-visual-root .divisor-piece{
  background:rgba(96,165,250,.24) !important;
  border:2px solid #2563eb !important;
}

/* はみ出した正方形全体を一旦赤で描画 */
.koubaisuu-visual-root .divisor-piece.has-overflow{
  background:rgba(239,68,68,.20) !important;
  border-color:rgba(220,38,38,.78) !important;
}

/* その上から「長方形の枠内に入っている部分」だけ青で覆う */
.koubaisuu-visual-root .divisor-piece.has-overflow .divisor-piece-inside{
  position:absolute !important;
  background:rgba(96,165,250,.34) !important;
  border-left:2px solid #2563eb;
  border-top:2px solid #2563eb;
  box-sizing:border-box;
  pointer-events:none;
  z-index:1;
}

/* 枠外部分は赤半透明のまま残す */
.koubaisuu-visual-root .divisor-piece.has-overflow{
  overflow:visible !important;
}

/* ===== わける：右下フロートを縦積み＋丸アイコン化 ===== */
.koubaisuu-visual-root #divisorMode .divisor-floating{
  position:absolute !important;
  right:18px !important;
  bottom:18px !important;
  z-index:2147483000 !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  gap:8px !important;
  padding:10px !important;
  border-radius:20px !important;
  background:rgba(255,255,255,.96) !important;
  border:1px solid #d8e0ea !important;
  box-shadow:0 10px 28px rgba(15,23,42,.16) !important;
}

.koubaisuu-visual-root .divisor-size-pill{
  min-width:64px;
  padding:6px 8px;
  border-radius:12px;
  background:#f4f7fb;
  text-align:center;
  line-height:1.15;
}
.koubaisuu-visual-root .divisor-size-pill span{
  display:block;
  font-size:10px;
  font-weight:800;
  color:#64748b;
}
.koubaisuu-visual-root .divisor-size-pill strong{
  display:block;
  margin-top:2px;
  font-size:15px;
  color:#0f172a;
}

.koubaisuu-visual-root .divisor-circle-btn{
  width:48px !important;
  height:48px !important;
  min-width:48px !important;
  padding:0 !important;
  border:0 !important;
  border-radius:50% !important;
  display:grid !important;
  place-items:center !important;
  font-size:23px !important;
  line-height:1 !important;
  font-weight:900 !important;
  cursor:pointer !important;
  box-shadow:0 5px 12px rgba(15,23,42,.12) !important;
}
.koubaisuu-visual-root .divisor-circle-btn.minus{
  background:#fee2e2 !important;
  color:#b91c1c !important;
}
.koubaisuu-visual-root .divisor-circle-btn.plus{
  background:#2563eb !important;
  color:#fff !important;
}
.koubaisuu-visual-root .divisor-circle-btn.auto{
  background:#0f172a !important;
  color:#fff !important;
  font-size:18px !important;
}
.koubaisuu-visual-root .divisor-circle-btn.clear{
  background:#eef2f7 !important;
  color:#334155 !important;
}

/* 旧ボタン見た目を無効化 */
.koubaisuu-visual-root .divisor-auto-btn,
.koubaisuu-visual-root .divisor-clear-btn{
  display:none !important;
}

/* ===== 右下フロート操作を常に最前面へ ===== */
.koubaisuu-visual-root #divisorMode .divisor-floating{
  position:fixed !important;
  right:22px !important;
  bottom:22px !important;
  z-index:2147483647 !important;
  isolation:isolate !important;
  transform:translateZ(0);
}

.koubaisuu-visual-root #divisorMode .divisor-size-pill,
.koubaisuu-visual-root #divisorMode .divisor-circle-btn{
  position:relative !important;
  z-index:2147483647 !important;
}

.koubaisuu-visual-root .divide-mode-modal,
.koubaisuu-visual-root .point-setup-modal{
  position:fixed;inset:0;z-index:2147483646;display:none;
  align-items:center;justify-content:center;background:rgba(15,23,42,.36)
}
.koubaisuu-visual-root .divide-mode-modal.show,
.koubaisuu-visual-root .point-setup-modal.show{display:flex}
.koubaisuu-visual-root .divide-mode-card,
.koubaisuu-visual-root .point-setup-card{
  width:min(540px,92vw);background:#fff;border-radius:20px;padding:22px;
  box-shadow:0 20px 60px rgba(15,23,42,.24)
}
.koubaisuu-visual-root .divide-mode-card h2,
.koubaisuu-visual-root .point-setup-card h2{margin:0 0 16px;text-align:center}
.koubaisuu-visual-root .divide-mode-choices{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.koubaisuu-visual-root .divide-choice{
  min-height:130px;border:1px solid #dbe3ec;border-radius:18px;background:#f8fafc;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;cursor:pointer
}
.koubaisuu-visual-root .divide-choice span{font-size:44px;font-weight:900}
.koubaisuu-visual-root .divide-choice strong{font-size:17px}

.koubaisuu-visual-root #pointSetupList{display:flex;flex-direction:column;gap:10px}
.koubaisuu-visual-root .point-set-row{
  display:grid;grid-template-columns:minmax(0,1fr) 100px 72px 44px;gap:8px;align-items:center
}
.koubaisuu-visual-root .point-set-row input[type="text"],
.koubaisuu-visual-root .point-set-row input[type="number"]{
  width:100%;height:42px;border:1px solid #d5dde7;border-radius:10px;padding:0 10px;font:inherit;font-weight:800
}
.koubaisuu-visual-root .point-set-row input[type="color"]{
  width:100%;height:42px;border:1px solid #d5dde7;border-radius:10px;padding:4px;background:#fff
}
.koubaisuu-visual-root .point-row-remove{
  width:42px;height:42px;border:0;border-radius:50%;background:#eef2f7;font-size:18px;cursor:pointer
}
.koubaisuu-visual-root .point-add-row{
  width:100%;height:42px;margin-top:10px;border:1px dashed #94a3b8;border-radius:12px;background:#f8fafc;font-weight:900;cursor:pointer
}

.koubaisuu-visual-root .point-mode-view.active{display:block!important;width:100%;height:100%}
.koubaisuu-visual-root .point-panel{height:100%;margin:0;border-radius:0;overflow:hidden}
.koubaisuu-visual-root .point-stage{position:relative;width:100%;height:100%;padding:18px 110px 18px 18px;overflow:auto;background:#fbfdff}
.koubaisuu-visual-root .point-groups{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px;align-items:start}
.koubaisuu-visual-root .point-group-card{min-height:150px;border:1px solid #dbe3ec;border-radius:16px;background:#fff;padding:12px}
.koubaisuu-visual-root .point-group-title{font-size:13px;font-weight:900;color:#475569;margin-bottom:8px}
.koubaisuu-visual-root .point-row{display:grid;grid-template-columns:80px minmax(0,1fr);gap:8px;align-items:start;margin-bottom:8px}
.koubaisuu-visual-root .point-row-label{font-size:12px;font-weight:900;color:#475569}
.koubaisuu-visual-root .point-dots{display:flex;flex-wrap:wrap;gap:4px}
.koubaisuu-visual-root .point-dot,
.koubaisuu-visual-root .point-leftover-dot{width:13px;height:13px;border-radius:50%;flex:0 0 auto}
.koubaisuu-visual-root .point-leftovers{
  grid-column:1/-1;padding:12px;border:1px dashed #cbd5e1;border-radius:14px;background:#fff
}
.koubaisuu-visual-root .point-leftovers-title{font-size:13px;font-weight:900;color:#64748b;margin-bottom:8px}
.koubaisuu-visual-root .point-leftover-row{display:grid;grid-template-columns:90px minmax(0,1fr);gap:8px;margin-bottom:6px}
.koubaisuu-visual-root .point-leftover-dot{opacity:.32}

.koubaisuu-visual-root .point-floating{
  position:fixed;right:22px;bottom:22px;z-index:2147483647;
  display:flex;flex-direction:column;align-items:center;gap:8px;padding:10px;border-radius:20px;
  background:rgba(255,255,255,.96);border:1px solid #d8e0ea;box-shadow:0 10px 28px rgba(15,23,42,.16)
}
.koubaisuu-visual-root .point-count-pill{min-width:64px;padding:6px 8px;border-radius:12px;background:#f4f7fb;text-align:center}
.koubaisuu-visual-root .point-count-pill span{display:block;font-size:10px;font-weight:800;color:#64748b}
.koubaisuu-visual-root .point-count-pill strong{display:block;margin-top:2px;font-size:16px}

/* 点でわける：試行錯誤重視 */
.koubaisuu-visual-root #groupAutoBtn{display:none!important}
.koubaisuu-visual-root .point-leftovers,
.koubaisuu-visual-root .point-leftovers-title,
.koubaisuu-visual-root .point-leftover-row,
.koubaisuu-visual-root .point-leftover-dot{display:none!important}

.koubaisuu-visual-root .point-remaining{
  grid-column:1/-1;
  display:flex;
  flex-direction:column;
  gap:8px;
  padding:10px 4px 0;
}
.koubaisuu-visual-root .point-remaining-row{
  display:grid;
  grid-template-columns:90px minmax(0,1fr);
  gap:8px;
  align-items:start;
}
.koubaisuu-visual-root .point-remaining .point-dot{opacity:1!important}

/* ===== 点でわける：見た目で気づくコンパクト表示 ===== */

/* できるだけ全体を1画面に収める */
.koubaisuu-visual-root .point-stage{
  padding:14px 108px 14px 14px !important;
  overflow:auto !important;
}

.koubaisuu-visual-root .point-groups{
  display:grid !important;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr)) !important;
  gap:10px !important;
  align-items:stretch !important;
}

/* 各グループは小さく、番号表示なし */
.koubaisuu-visual-root .point-group-card{
  min-height:104px !important;
  padding:10px !important;
  border-radius:14px !important;
  display:flex;
  flex-direction:column;
  justify-content:center;
  box-shadow:none !important;
}

.koubaisuu-visual-root .point-group-title{
  display:none !important;
}

.koubaisuu-visual-root .point-row{
  grid-template-columns:64px minmax(0,1fr) !important;
  gap:6px !important;
  margin-bottom:6px !important;
  align-items:center !important;
}

.koubaisuu-visual-root .point-row:last-child{
  margin-bottom:0 !important;
}

.koubaisuu-visual-root .point-row-label{
  font-size:11px !important;
  line-height:1.2 !important;
}

.koubaisuu-visual-root .point-dots{
  gap:3px !important;
  align-items:center !important;
}

.koubaisuu-visual-root .point-dot{
  width:12px !important;
  height:12px !important;
}

/* 分け切れなかった点は、グループ列の直後に同じカード幅で表示。
   文字で「余り」とは示さず、点だけが残っている状態を見せる。 */
.koubaisuu-visual-root .point-remaining{
  grid-column:auto !important;
  padding:10px !important;
  margin:0 !important;
  gap:0 !important;
  border-style:dashed !important;
  background:#fff !important;
}

.koubaisuu-visual-root .point-remaining-row{
  grid-template-columns:64px minmax(0,1fr) !important;
  gap:6px !important;
  margin-bottom:6px !important;
}

.koubaisuu-visual-root .point-remaining-row:last-child{
  margin-bottom:0 !important;
}

/* 電子黒板でグループ数が多い時はさらに詰める */
@media (min-width:1200px){
  .koubaisuu-visual-root .point-groups{
    grid-template-columns:repeat(auto-fit,minmax(135px,1fr)) !important;
    gap:9px !important;
  }
  .koubaisuu-visual-root .point-group-card{
    min-height:94px !important;
    padding:9px !important;
  }
  .koubaisuu-visual-root .point-dot{
    width:11px !important;
    height:11px !important;
  }
}

/* ===== 点でわける：残った点のBOXを見分けやすくする ===== */
.koubaisuu-visual-root .point-remaining{
  background:#fff1f2 !important;
  border:2px solid #fb7185 !important;
  box-shadow:0 0 0 3px rgba(251,113,133,.08) !important;
}

/* 点そのものは元の色を維持 */
.koubaisuu-visual-root .point-remaining .point-dot{
  opacity:1 !important;
}

/* 残った点が1個だけでもBOXの存在が分かるように最低高さを確保 */
.koubaisuu-visual-root .point-remaining.point-group-card{
  min-height:94px !important;
}

/* ===== 点でわける：試行結果（○×） ===== */
.koubaisuu-visual-root .point-history{
  margin-top:14px;
  border:1px solid #dbe3ec;
  border-radius:16px;
  background:#fff;
  overflow:hidden;
}

.koubaisuu-visual-root .point-history-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:10px 12px;
  border-bottom:1px solid #e5eaf0;
  background:#f8fafc;
}

.koubaisuu-visual-root .point-history-title{
  font-size:14px;
  font-weight:900;
  color:#334155;
}

.koubaisuu-visual-root .point-history-judge{
  display:flex;
  align-items:center;
  gap:8px;
}

.koubaisuu-visual-root .point-history-judge > span{
  font-size:12px;
  font-weight:800;
  color:#64748b;
}

.koubaisuu-visual-root .point-judge-btn{
  width:42px;
  height:42px;
  border-radius:50%;
  border:0;
  font-size:24px;
  font-weight:900;
  line-height:1;
  cursor:pointer;
  box-shadow:0 3px 10px rgba(15,23,42,.08);
}

.koubaisuu-visual-root .point-judge-btn.success{
  background:#dcfce7;
  color:#15803d;
}

.koubaisuu-visual-root .point-judge-btn.fail{
  background:#fee2e2;
  color:#b91c1c;
}

.koubaisuu-visual-root .point-history-table-wrap{
  position:relative;
  min-height:64px;
  overflow-x:auto;
}

.koubaisuu-visual-root .point-history-table{
  width:100%;
  border-collapse:collapse;
  table-layout:fixed;
}

.koubaisuu-visual-root .point-history-table th,
.koubaisuu-visual-root .point-history-table td{
  width:50%;
  padding:9px 12px;
  text-align:center;
  border-bottom:1px solid #edf1f5;
}

.koubaisuu-visual-root .point-history-table th{
  font-size:12px;
  font-weight:900;
  color:#64748b;
  background:#fbfdff;
}

.koubaisuu-visual-root .point-history-table td:first-child{
  font-size:17px;
  font-weight:900;
  color:#1e293b;
}

.koubaisuu-visual-root .point-history-table td.is-success{
  font-size:26px;
  font-weight:900;
  color:#15803d;
}

.koubaisuu-visual-root .point-history-table td.is-fail{
  font-size:26px;
  font-weight:900;
  color:#b91c1c;
}

.koubaisuu-visual-root .point-history-empty{
  padding:16px;
  text-align:center;
  font-size:12px;
  color:#94a3b8;
}

/* 表を追加しても電子黒板で使いやすいように、点エリアからそのまま縦スクロール */
.koubaisuu-visual-root .point-stage{
  padding-bottom:24px !important;
}

/* ===== 点でわける：結果は自動記録 ===== */
.koubaisuu-visual-root .point-history-judge{
  display:none !important;
}

/* ===== 試した結果：横並び表示 ===== */
.koubaisuu-visual-root .point-history-table{
  display:none !important;
}

.koubaisuu-visual-root .point-history-table-wrap{
  min-height:66px !important;
  overflow-x:auto !important;
  overflow-y:hidden !important;
}

.koubaisuu-visual-root .point-history-horizontal{
  display:flex;
  flex-wrap:nowrap;
  align-items:stretch;
  gap:8px;
  padding:10px 12px;
  min-width:max-content;
}

.koubaisuu-visual-root .point-history-item{
  width:72px;
  flex:0 0 72px;
  border:1px solid #dbe3ec;
  border-radius:12px;
  overflow:hidden;
  background:#fff;
  text-align:center;
}

.koubaisuu-visual-root .point-history-number{
  padding:6px 4px 4px;
  font-size:16px;
  font-weight:900;
  color:#1e293b;
  background:#f8fafc;
  border-bottom:1px solid #edf1f5;
}

.koubaisuu-visual-root .point-history-result{
  padding:4px;
  font-size:25px;
  font-weight:900;
  line-height:1.15;
}

.koubaisuu-visual-root .point-history-result.is-success{
  color:#15803d;
  background:#f0fdf4;
}

.koubaisuu-visual-root .point-history-result.is-fail{
  color:#b91c1c;
  background:#fff7f7;
}

/* ===== 点でわける：履歴は折り返し表示 ===== */
.koubaisuu-visual-root .point-history-table-wrap{
  overflow:visible !important;
}

.koubaisuu-visual-root .point-history-horizontal{
  display:flex !important;
  flex-wrap:wrap !important;
  min-width:0 !important;
  width:100%;
  gap:8px;
  padding:10px 12px;
}

/* ===== 振り分け実行ボタン ===== */
.koubaisuu-visual-root .point-execute-btn{
  min-width:72px;
  height:40px;
  padding:0 12px;
  border:0;
  border-radius:999px;
  background:#2563eb;
  color:#fff;
  font-size:13px;
  font-weight:900;
  cursor:pointer;
  box-shadow:0 4px 12px rgba(37,99,235,.22);
}

.koubaisuu-visual-root .point-execute-btn:active{
  transform:translateY(1px);
}

/* ===== 点が配られる演出 ===== */
@keyframes kv-point-deal{
  0%{
    opacity:0;
    transform:translate(-28px,-44px) scale(.38);
  }
  55%{
    opacity:1;
    transform:translate(3px,2px) scale(1.08);
  }
  100%{
    opacity:1;
    transform:translate(0,0) scale(1);
  }
}

.koubaisuu-visual-root .point-dot.is-dealing{
  animation:kv-point-deal .72s cubic-bezier(.2,.8,.2,1) both;
  animation-delay:var(--deal-delay,0ms);
}

/* グループ数を変えただけでは結果カードは更新しない。
   「振り分け」を押した時だけ図と結果が更新される。 */

/* ===== 点でわける：配布元BOX ===== */
.koubaisuu-visual-root .point-source-area{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin:0 0 12px;
}

.koubaisuu-visual-root .point-source-box{
  min-width:180px;
  max-width:320px;
  flex:1 1 220px;
  padding:10px 12px;
  border:2px solid #cbd5e1;
  border-radius:14px;
  background:#f8fafc;
}

.koubaisuu-visual-root .point-source-label{
  margin-bottom:7px;
  font-size:12px;
  font-weight:900;
  color:#475569;
}

.koubaisuu-visual-root .point-source-dots{
  display:flex;
  flex-wrap:wrap;
  gap:3px;
  min-height:18px;
}

.koubaisuu-visual-root .point-source-dot{
  width:12px !important;
  height:12px !important;
  border-radius:50%;
  flex:0 0 auto;
}

/* 旧アニメーションは使わず、実際の配布元BOXの座標から飛ばす */
.koubaisuu-visual-root .point-dot.is-dealing{
  animation:none !important;
}

/* 変形中も点の見た目を保つ */
.koubaisuu-visual-root .point-groups .point-dot{
  will-change:transform,opacity;
}

/* ===== 点振り分け：滑らかな移動＋配布元から減っていく表現 ===== */
.koubaisuu-visual-root .point-dot{
  backface-visibility:hidden;
  transform-origin:center center;
}

.koubaisuu-visual-root .point-source-dot{
  will-change:opacity,transform;
}

.koubaisuu-visual-root .point-groups .point-dot{
  will-change:transform,opacity;
}

/* ===== 余りは配布元BOXに残す ===== */
.koubaisuu-visual-root .point-remaining{
  display:none !important;
}

/* ===== 点振り分け：まとまりがスーッと移動 ===== */
.koubaisuu-visual-root .point-groups .point-dot{
  will-change:transform,opacity;
  backface-visibility:hidden;
}

/* ===== 点振り分け：ダダダダダと連続配置 ===== */
.koubaisuu-visual-root .point-groups .point-dot{
  will-change:transform,opacity;
  backface-visibility:hidden;
}


/* ===== ならべる：時間で見る ===== */
.koubaisuu-visual-root .time-mode-view.active{
  display:block !important;
  height:100%;
}
.koubaisuu-visual-root .time-panel{
  height:100%;
  min-height:0;
  background:#fff;
  border:1px solid var(--line);
  border-radius:17px;
  overflow:hidden;
}
.koubaisuu-visual-root .time-stage{
  position:relative;
  height:100%;
  min-height:0;
  padding:18px 92px 18px 22px;
  overflow:auto;
  background:#fbfcfe;
}
.koubaisuu-visual-root .time-status{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin-bottom:14px;
}
.koubaisuu-visual-root .time-now{
  display:flex;
  align-items:baseline;
  gap:9px;
  padding:8px 14px;
  border-radius:12px;
  background:#eef2ff;
}
.koubaisuu-visual-root .time-now span{font-size:12px;color:#64748b;font-weight:800}
.koubaisuu-visual-root .time-now strong{font-size:24px;color:#1e293b}
.koubaisuu-visual-root .time-next-hint{font-size:13px;color:#64748b;font-weight:700}
.koubaisuu-visual-root .time-lights{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:18px;
  max-width:760px;
  margin:0 auto 18px;
}
.koubaisuu-visual-root .time-light-card{
  text-align:center;
  padding:16px;
  background:#fff;
  border:1px solid #dbe3ec;
  border-radius:18px;
  box-shadow:0 6px 18px rgba(15,23,42,.05);
}
.koubaisuu-visual-root .time-light-label{
  font-size:18px;
  font-weight:900;
  margin-bottom:6px;
}
.koubaisuu-visual-root .time-light-wrap{
  position:relative;
  width:122px;
  height:122px;
  margin:0 auto 8px;
  display:grid;
  place-items:center;
}
.koubaisuu-visual-root .time-light{
  position:relative;
  width:76px;
  height:76px;
  border-radius:50%;
  box-shadow:inset 0 0 0 5px rgba(255,255,255,.72), 0 5px 12px rgba(15,23,42,.12);
  transition:transform .12s ease, filter .12s ease, box-shadow .12s ease;
}
.koubaisuu-visual-root .time-light.red{background:#ef4444}
.koubaisuu-visual-root .time-light.blue{background:#2563eb}
.koubaisuu-visual-root .time-light.flash{
  transform:scale(1.12);
  filter:brightness(1.55);
  box-shadow:inset 0 0 0 5px rgba(255,255,255,.9), 0 0 28px 12px rgba(250,204,21,.62);
}
.koubaisuu-visual-root .time-light.flash::after{
  content:"";
  position:absolute;
  inset:-4px;
  border:4px solid currentColor;
  border-radius:50%;
  animation:kv-time-ripple .56s ease-out forwards;
  opacity:.7;
}
@keyframes kv-time-ripple{
  from{transform:scale(.9);opacity:.7}
  to{transform:scale(1.75);opacity:0}
}
.koubaisuu-visual-root .time-light-interval{
  font-size:14px;
  font-weight:800;
}
.koubaisuu-visual-root .time-light-interval strong{font-size:20px}
.koubaisuu-visual-root .time-timeline-panel{
  max-width:980px;
  margin:0 auto;
  background:#fff;
  border:1px solid #dbe3ec;
  border-radius:16px;
  padding:12px 14px 14px;
}
.koubaisuu-visual-root .time-timeline-head{
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:center;
  margin-bottom:10px;
}
.koubaisuu-visual-root .time-timeline-head strong{font-size:15px}
.koubaisuu-visual-root .time-timeline-head span{font-size:11px;color:#64748b}
.koubaisuu-visual-root .time-timeline{
  display:grid;
  grid-template-columns:repeat(31,minmax(24px,1fr));
  min-width:760px;
  align-items:end;
  gap:0;
}
.koubaisuu-visual-root .time-tick{
  position:relative;
  height:74px;
  border-left:1px solid #e2e8f0;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  padding-bottom:3px;
}
.koubaisuu-visual-root .time-tick:last-child{border-right:1px solid #e2e8f0}
.koubaisuu-visual-root .time-tick-label{font-size:9px;color:#64748b}
.koubaisuu-visual-root .time-mark{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  width:10px;
  height:10px;
  border-radius:50%;
  opacity:0;
  transition:opacity .12s ease, transform .18s ease;
}
.koubaisuu-visual-root .time-mark.show{opacity:1;transform:translateX(-50%) scale(1)}
.koubaisuu-visual-root .time-mark.a{top:14px;background:#ef4444}
.koubaisuu-visual-root .time-mark.b{top:32px;background:#2563eb}
.koubaisuu-visual-root .time-floating{
  position:absolute;
  right:18px;
  bottom:18px;
  display:flex;
  flex-direction:column;
  gap:9px;
  z-index:20;
}
.koubaisuu-visual-root .time-circle-btn{
  width:52px;
  height:52px;
  border:0;
  border-radius:50%;
  background:#fff;
  color:#1e293b;
  font-size:20px;
  font-weight:900;
  box-shadow:0 5px 18px rgba(15,23,42,.16);
  cursor:pointer;
}
.koubaisuu-visual-root .time-circle-btn.play{background:#2563eb;color:#fff}
.koubaisuu-visual-root .time-circle-btn.pause{background:#eef2f7}
.koubaisuu-visual-root .time-circle-btn.reset{background:#fff}
.koubaisuu-visual-root .time-setup-card{max-width:520px}
.koubaisuu-visual-root .time-setup-card>p{margin:-4px 0 16px;color:#64748b;font-size:13px}
.koubaisuu-visual-root .time-setup-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
  margin-bottom:16px;
}
.koubaisuu-visual-root .time-setup-box{
  padding:14px;
  text-align:center;
  border:1px solid #dbe3ec;
  border-radius:14px;
  background:#f8fafc;
}
.koubaisuu-visual-root .time-setup-box>strong{display:block;font-size:20px;margin-bottom:8px}
.koubaisuu-visual-root .time-setup-box small{display:block;margin-top:6px;color:#64748b;font-weight:700}

@media (max-width:760px){
  .koubaisuu-visual-root .time-stage{padding:14px 72px 14px 12px}
  .koubaisuu-visual-root .time-lights{gap:10px}
  .koubaisuu-visual-root .time-light-wrap{width:94px;height:94px}
  .koubaisuu-visual-root .time-light{width:64px;height:64px}
}


/* ===== v3.1 学習用語ではなく「場面」から入るホーム ===== */
.koubaisuu-visual-root .mode-tabs{
  display:none !important;
}
.koubaisuu-visual-root .route-home{
  display:none;
  height:100%;
  min-height:0;
}
.koubaisuu-visual-root .route-home.active{
  display:block;
}
.koubaisuu-visual-root .route-home-inner{
  min-height:100%;
  padding:clamp(18px,3vw,34px);
  display:flex;
  flex-direction:column;
  justify-content:center;
  background:
    radial-gradient(circle at 12% 12%, rgba(37,99,235,.07), transparent 28%),
    radial-gradient(circle at 88% 86%, rgba(14,165,233,.07), transparent 30%),
    #f8fafc;
}
.koubaisuu-visual-root .route-home-head{
  max-width:900px;
  width:100%;
  margin:0 auto 18px;
  text-align:center;
}
.koubaisuu-visual-root .route-home-head h2{
  margin:0 0 7px;
  font-size:clamp(24px,3vw,34px);
  line-height:1.2;
  color:#172033;
}
.koubaisuu-visual-root .route-home-head p{
  margin:0;
  font-size:clamp(13px,1.6vw,16px);
  color:#64748b;
  font-weight:700;
}
.koubaisuu-visual-root .route-card-grid{
  width:min(100%,1000px);
  margin:0 auto;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
}
.koubaisuu-visual-root .route-card{
  min-height:142px;
  display:grid;
  grid-template-columns:72px minmax(0,1fr) 26px;
  align-items:center;
  gap:14px;
  padding:18px;
  border:2px solid #e2e8f0;
  border-radius:20px;
  background:#fff;
  color:#172033;
  text-align:left;
  cursor:pointer;
  box-shadow:0 8px 24px rgba(15,23,42,.055);
  transition:transform .14s ease, box-shadow .14s ease, border-color .14s ease;
}
.koubaisuu-visual-root .route-card:hover,
.koubaisuu-visual-root .route-card:focus-visible{
  transform:translateY(-2px);
  border-color:#94a3b8;
  box-shadow:0 12px 28px rgba(15,23,42,.10);
  outline:none;
}
.koubaisuu-visual-root .route-card-icon{
  width:64px;
  height:64px;
  display:grid;
  place-items:center;
  border-radius:18px;
  font-size:31px;
  font-weight:900;
  background:#f1f5f9;
}
.koubaisuu-visual-root .route-card-copy{
  display:flex;
  flex-direction:column;
  gap:7px;
}
.koubaisuu-visual-root .route-card-copy strong{
  font-size:clamp(18px,2vw,23px);
  line-height:1.2;
}
.koubaisuu-visual-root .route-card-copy small{
  font-size:13px;
  line-height:1.55;
  color:#64748b;
  font-weight:700;
}
.koubaisuu-visual-root .route-card-arrow{
  font-size:34px;
  line-height:1;
  color:#94a3b8;
}
.koubaisuu-visual-root .route-card-time .route-card-icon{background:#fff7ed;color:#ea580c}
.koubaisuu-visual-root .route-card-rectangle .route-card-icon{background:#eff6ff;color:#2563eb}
.koubaisuu-visual-root .route-card-square .route-card-icon{background:#f0fdf4;color:#16a34a}
.koubaisuu-visual-root .route-card-points .route-card-icon{background:#faf5ff;color:#9333ea}

.koubaisuu-visual-root .route-home-btn{
  display:none;
}
.koubaisuu-visual-root.is-in-activity .route-home-btn{
  display:inline-flex;
}
.koubaisuu-visual-root.is-route-home #changeShapeBtn,
.koubaisuu-visual-root.is-route-home #resetBtn{
  display:none !important;
}
.koubaisuu-visual-root.is-time-route #changeShapeBtn,
.koubaisuu-visual-root.is-point-route #changeShapeBtn{
  display:none !important;
}

@media (max-width:760px){
  .koubaisuu-visual-root .route-home-inner{
    justify-content:flex-start;
    padding:16px 12px 20px;
  }
  .koubaisuu-visual-root .route-card-grid{
    grid-template-columns:1fr;
    gap:10px;
  }
  .koubaisuu-visual-root .route-card{
    min-height:105px;
    grid-template-columns:56px minmax(0,1fr) 20px;
    padding:13px;
  }
  .koubaisuu-visual-root .route-card-icon{
    width:52px;
    height:52px;
    border-radius:15px;
    font-size:25px;
  }
}


/* ===== v3.1.2 モーダル修正：各モーダルを独立管理 ===== */

/* 追加した2モーダルは通常時に必ず隠す */
.koubaisuu-visual-root .arrange-mode-modal,
.koubaisuu-visual-root .time-setup-modal{
  position:fixed;
  inset:0;
  z-index:2147483646;
  display:none;
  align-items:center;
  justify-content:center;
  padding:20px;
  background:rgba(15,23,42,.36);
}
.koubaisuu-visual-root .arrange-mode-modal.show,
.koubaisuu-visual-root .time-setup-modal.show{
  display:flex;
}

/* 時間設定だけを整える。ほかのモーダルには干渉しない */
.koubaisuu-visual-root .time-setup-card{
  width:min(520px,92vw);
  max-width:520px;
  padding:24px;
  border-radius:20px;
  background:#fff;
  box-shadow:0 20px 60px rgba(15,23,42,.24);
}
.koubaisuu-visual-root .time-setup-card h2{
  margin:0 0 6px;
  text-align:center;
  font-size:24px;
}
.koubaisuu-visual-root .time-setup-card > p{
  margin:0 0 18px;
  text-align:center;
  color:#64748b;
  font-size:13px;
  font-weight:700;
}
.koubaisuu-visual-root .time-setup-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
  margin-bottom:18px;
}
.koubaisuu-visual-root .time-setup-box{
  padding:14px 12px;
  text-align:center;
  border:1px solid #dbe3ec;
  border-radius:15px;
  background:#f8fafc;
}
.koubaisuu-visual-root .time-setup-box > strong{
  display:block;
  margin-bottom:8px;
  font-size:20px;
}
.koubaisuu-visual-root .time-setup-box .modal-stepper{
  grid-template-columns:44px 1fr 44px;
  gap:7px;
  margin:0;
}
.koubaisuu-visual-root .time-setup-box .modal-stepper button{
  width:44px;
  height:44px;
}
.koubaisuu-visual-root .time-setup-box .modal-stepper span{
  min-height:44px;
  display:grid;
  place-items:center;
  font-size:22px;
  font-weight:900;
}
.koubaisuu-visual-root .time-setup-box small{
  display:block;
  margin-top:7px;
  color:#64748b;
  font-weight:700;
}
.koubaisuu-visual-root .time-setup-card .modal-start{
  width:100%;
  min-height:52px;
  margin-top:0;
}

/* 長方形の初期設定モーダルは元の構造を維持したまま少しだけ整える */
.koubaisuu-visual-root #setupModal > .modal{
  width:min(430px,92vw);
}
.koubaisuu-visual-root #setupModal .start-btn{
  min-height:54px;
  border-radius:14px;
}

/* ホームではどの設定モーダルも前面に残さない */
.koubaisuu-visual-root.is-route-home #setupModal{
  display:none !important;
}

@media (max-width:600px){
  .koubaisuu-visual-root .time-setup-grid{
    grid-template-columns:1fr;
  }
}


/* ===== v3.1.3 設定モーダルを画面の上下左右中央へ ===== */
.koubaisuu-visual-root #setupModal:not(.hidden),
.koubaisuu-visual-root #divisorModal.show,
.koubaisuu-visual-root #divideModeModal.show,
.koubaisuu-visual-root #pointSetupModal.show,
.koubaisuu-visual-root #timeSetupModal.show{
  position:fixed !important;
  inset:0 !important;
  width:100vw !important;
  height:100vh !important;
  margin:0 !important;
  padding:20px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  background:rgba(15,23,42,.36) !important;
  z-index:2147483646 !important;
  box-sizing:border-box !important;
}

/* WordPress側の親要素サイズ・位置の影響を受けない */
.koubaisuu-visual-root #setupModal > .modal,
.koubaisuu-visual-root #divisorModal > .modal-card,
.koubaisuu-visual-root #divideModeModal > .modal-card,
.koubaisuu-visual-root #pointSetupModal > .modal-card,
.koubaisuu-visual-root #timeSetupModal > .modal-card{
  position:relative !important;
  top:auto !important;
  right:auto !important;
  bottom:auto !important;
  left:auto !important;
  margin:auto !important;
  transform:none !important;
  flex:0 1 auto !important;
  max-height:calc(100vh - 40px) !important;
  overflow:auto !important;
}

/* 非表示状態を最優先 */
.koubaisuu-visual-root #setupModal.hidden,
.koubaisuu-visual-root #divisorModal:not(.show),
.koubaisuu-visual-root #divideModeModal:not(.show),
.koubaisuu-visual-root #pointSetupModal:not(.show),
.koubaisuu-visual-root #timeSetupModal:not(.show){
  display:none !important;
}


/* ===== v3.2 光るまでの周期ゲージ + タイムライン全幅 ===== */
.koubaisuu-visual-root .time-light-wrap{
  width:138px;
  height:138px;
}
.koubaisuu-visual-root .time-gauge{
  --progress:0deg;
  --gauge-color:#94a3b8;
  width:112px;
  height:112px;
  border-radius:50%;
  display:grid;
  place-items:center;
  position:relative;
  background:conic-gradient(var(--gauge-color) var(--progress), #e2e8f0 0);
  transition:background .05s linear;
}
.koubaisuu-visual-root .time-gauge::before{
  content:"";
  position:absolute;
  inset:7px;
  border-radius:50%;
  background:#fff;
}
.koubaisuu-visual-root #timeAGauge{--gauge-color:#f87171}
.koubaisuu-visual-root #timeBGauge{--gauge-color:#60a5fa}
.koubaisuu-visual-root .time-gauge .time-light{
  position:relative;
  z-index:1;
}
.koubaisuu-visual-root .time-gauge.is-complete{
  filter:brightness(1.05);
}

.koubaisuu-visual-root .time-timeline-panel{
  width:100% !important;
  max-width:none !important;
  margin:0 !important;
}
.koubaisuu-visual-root .time-timeline{
  width:100% !important;
  min-width:0 !important;
  grid-template-columns:repeat(31,minmax(0,1fr)) !important;
}
.koubaisuu-visual-root .time-stage{
  padding-left:22px;
  padding-right:92px;
}
@media (max-width:900px){
  .koubaisuu-visual-root .time-timeline{
    min-width:760px !important;
  }
}