*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,'Apple Color Emoji','Segoe UI Emoji',sans-serif}
.wrap{max-width:1100px;margin:0 auto;padding:12px}
header.wrap{display:flex;align-items:center;gap:16px}
h1{font-size:20px;margin:8px 0}
nav a{margin-right:12px;text-decoration:none;color:#0366d6;padding:6px 10px;border-radius:6px}
nav a.active{background:#e8f0fe}
.card{background:#fff;border:1px solid #e5e7eb;border-radius:10px;padding:12px;box-shadow:0 2px 8px rgba(0,0,0,.04)}
.row{display:flex;gap:12px;flex-wrap:wrap;margin:6px 0}
.col{flex:1;min-width:220px}
.right{text-align:right}
.grid{display:grid;grid-template-columns:repeat(4,minmax(120px,1fr));gap:12px}
.cell{display:flex;flex-direction:column}
label{font-size:12px;color:#666;margin-bottom:4px}
input,select,button{padding:10px;border:1px solid #cbd5e1;border-radius:8px;font-size:14px;width:100%}
button{cursor:pointer}
button:disabled{opacity:.6;cursor:not-allowed}
.banner{padding:10px;border-radius:8px;background:#fff8e1;border:1px solid #ffe082;color:#8d6e63;margin-bottom:8px}
.small{font-size:12px}
.muted{color:#6b7280}
.hint{margin-top:6px}
.badge{display:inline-block;padding:6px 10px;border-radius:999px;background:#f3f4f6;border:1px solid #e5e7eb}
.table-wrap{overflow:auto;border:1px solid #e5e7eb;border-radius:10px}
table{width:100%;border-collapse:collapse;font-size:14px}
th,td{padding:10px;border-bottom:1px solid #f1f5f9;text-align:left;white-space:nowrap}
thead{background:#f9fafb;position:sticky;top:0;z-index:1}
tr:nth-child(even){background:#fcfcfd}
.rank{font-weight:700}
@media (max-width:720px){
  .grid{grid-template-columns:repeat(2,minmax(120px,1fr))}
  nav a{display:inline-block;margin-bottom:6px}
}
/* print */
@media print{
  nav,.hint,#printBtn,.banner,.row .col:last-child{display:none !important}
  body{background:#fff}
  .wrap{max-width:none}
}/* ==== ボードの列幅＆整列を調整 ==== */
#board th, #board td { white-space: nowrap; vertical-align: middle; }

/* 順位・番号は狭め＆中央寄せ */
#board th:nth-child(1), #board td:nth-child(1) { width: 56px; text-align: center; } /* 順位 */
#board th:nth-child(2), #board td:nth-child(2) { width: 80px; text-align: center; } /* 番号 */

/* 氏名・カテゴリは可変（少し広め） */
#board th:nth-child(3), #board td:nth-child(3) { min-width: 140px; }  /* 氏名 */
#board th:nth-child(4), #board td:nth-child(4) { min-width: 160px; }  /* カテゴリ */

/* 数値列は一定幅で中央寄せ */
#board th:nth-child(5), #board td:nth-child(5),
#board th:nth-child(6), #board td:nth-child(6),
#board th:nth-child(7), #board td:nth-child(7),
#board th:nth-child(8), #board td:nth-child(8) { width: 110px; text-align: center; }

/* 横スクロール時の見栄え */
.table-wrap { overflow: auto; }
/* ==== ボードの列幅＆整列 ==== */
#board th, #board td { white-space: nowrap; vertical-align: middle; }

/* 順位・番号は狭め＆中央寄せ */
#board th:nth-child(1), #board td:nth-child(1) { width: 56px; text-align: center; } /* 順位 */
#board th:nth-child(2), #board td:nth-child(2) { width: 80px; text-align: center; } /* 番号 */

/* 氏名・カテゴリは可変で少し広め */
#board th:nth-child(3), #board td:nth-child(3) { min-width: 140px; } /* 氏名 */
#board th:nth-child(4), #board td:nth-child(4) { min-width: 160px; } /* カテゴリ */

/* 数値列（TOP/ZONE/アテンプト）は固定幅＆中央寄せ */
#board th:nth-child(n+5), #board td:nth-child(n+5) { width: 110px; text-align: center; }

/* 横スクロール */
.table-wrap { overflow: auto; }
/* ==== ヘッダー固定をやめる（ズレ防止） ==== */
thead { background:#f9fafb; position: static !important; top: auto; z-index: auto; }

/* ==== 列幅を固定してズレを根絶 ==== */
#board { table-layout: fixed; width: 100%; border-collapse: collapse; }
#board th, #board td { box-sizing: border-box; white-space: nowrap; vertical-align: middle; overflow: hidden; text-overflow: ellipsis; }

/* 順位・番号は狭め＆中央 */
#board th:nth-child(1), #board td:nth-child(1) { width: 56px;  text-align: center; } /* 順位 */
#board th:nth-child(2), #board td:nth-child(2) { width: 80px;  text-align: center; } /* 番号 */

/* 氏名・カテゴリは広め */
#board th:nth-child(3), #board td:nth-child(3) { width: 180px; } /* 氏名 */
#board th:nth-child(4), #board td:nth-child(4) { width: 200px; } /* カテゴリ */

/* 数値列は一定幅＆中央寄せ（TOP/ZONE/アテンプト） */
#board th:nth-child(n+5), #board td:nth-child(n+5) { width: 110px; text-align: center; }

/* 横スクロール */
.table-wrap { overflow: auto; }
/* === ヘッダー固定オフ＆固定レイアウト === */
thead{ background:#f9fafb; position: static !important; }
#board{ table-layout: fixed; width: 100%; border-collapse: collapse; }
#board th, #board td{
  box-sizing: border-box;
  white-space: nowrap;
  vertical-align: middle;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* 数値列を中央寄せ */
#board th:nth-child(1), #board td:nth-child(1),
#board th:nth-child(2), #board td:nth-child(2),
#board th:nth-child(n+5), #board td:nth-child(n+5){ text-align: center; }

/* 表は固定レイアウトにして、colgroupの幅を正に反映させる */
#board { table-layout: fixed; width: 100%; border-collapse: collapse; }

/* th / td のボックスサイズ差をなくす（ズレ防止） */
#board th, #board td {
  box-sizing: border-box;
  padding: 10px;
  border-bottom: 1px solid #e5e7eb;
  white-space: nowrap;
}

/* sticky は thead ではなく th に与える */
#board thead th {
  position: sticky;
  top: 0;
  background: #f1f5f9;
  z-index: 2;
}

/* 右端セルだけスクロールバー幅を上乗せ（後述の JS が --sbw を入れます） */
#board thead th:last-child { padding-right: calc(10px + var(--sbw, 0px)); }

/* ラッパはオーバーフローさせてスクロールを出す */
.table-wrap { overflow: auto; }