:root {
  --bg: #f0f4f8;
  --hdr: #1a1a2e;
  --accent: #0071e3;
  --border: #d0d7de;
  --row-odd: #ffffff;
  --row-even: #eef2f7;
  --new: #34c759;
  --subtext: #444;
  --text: #1d1d1f;
  --col0-w: 118px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

/* ページ全体を縦に並べて、table-wrap だけが伸縮するレイアウト */
html, body {
  height: 100%;
  overflow: hidden;              /* body自体はスクロールさせない */
  overscroll-behavior: none;     /* iOSのゴムバウンド禁止 */
}
body {
  font-family: 'Noto Sans JP', sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: 16px;
  font-weight: 700;
  display: flex;
  flex-direction: column;
}

/* ── ヘッダー（固定） ── */
.page-header {
  background: linear-gradient(135deg, #1a1a2e 0%, #0f3460 100%);
  color: #fff;
  padding: 12px 14px 9px;
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  flex-shrink: 0;
}
.page-header h1 { font-size: 21px; font-weight: 900; }
.page-header p  { font-size: 15px; font-weight: 700; opacity: .75; }

/* ── 列切り替えバー（固定） ── */
.col-toggle {
  background: #fff;
  border-bottom: 2px solid var(--border);
  padding: 7px 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  align-items: center;
  flex-shrink: 0;
}
.col-toggle .lbl { font-weight: 900; font-size: 15px; color: var(--subtext); margin-right: 2px; }
.ctbtn {
  background: var(--bg);
  border: 1.5px solid var(--border);
  border-radius: 10px;
  padding: 6px 12px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  font-family: 'Noto Sans JP', sans-serif;
  transition: all .15s;
  white-space: nowrap;
}
.ctbtn.active { background: #0f3460; color: #a0c4ff; border-color: #0f3460; }

/* ── スクロールヒント（スマホのみ） ── */
.scroll-hint {
  display: none;
  text-align: center;
  font-size: 15px;
  color: var(--subtext);
  padding: 5px;
  background: #fff8e1;
  border-bottom: 1px solid #ffe082;
  font-weight: 700;
  flex-shrink: 0;
}
@media (max-width: 700px) {
  .scroll-hint { display: block; }
  .page-header h1 { font-size: 19px; }
}

/* ── スクロールコンテナ（縦横ともスクロール・残り高さを全部使う）── */
.table-wrap {
  flex: 1 1 0;
  overflow: auto;
  overscroll-behavior: none;     /* 端でのゴムバウンド禁止 */
  -webkit-overflow-scrolling: touch;
  min-height: 0;  /* flex子要素がshrinkできるよう必須 */
}

/* ── テーブル本体 ── */
table {
  border-collapse: collapse;
  background: #fff;
}

/* ════════════════════════════════════════
   ヘッダー行の固定（縦スクロールで消えない）
   table-wrap が scroll context なので top:0 でOK
════════════════════════════════════════ */
thead th {
  position: sticky;
  top: 0;
  background: var(--hdr);
  color: #fff;
  font-weight: 900;
  font-size: 15px;
  padding: 9px 8px;
  text-align: center;
  border-right: 1px solid rgba(255,255,255,.12);
  border-bottom: 2px solid rgba(255,255,255,.25);
  white-space: nowrap;
  z-index: 10;
  line-height: 1.35;
}

/* ════════════════════════════════════════
   モデル列（col 0）のみ左固定
════════════════════════════════════════ */
thead th:nth-child(1),
tbody td:nth-child(1) {
  position: sticky;
  left: 0;
  min-width: var(--col0-w);
  max-width: var(--col0-w);
  text-align: left;
  padding-left: 9px;
  border-right: 2px solid var(--accent);
}
/* 左上コーナー：行固定×列固定が重なる → z-index最大 */
thead th:nth-child(1) {
  background: #0e1f3d;
  z-index: 20;
}
tbody td:nth-child(1) {
  background: #f0f6ff !important;
  color: var(--accent);
  font-weight: 900;
  font-size: 16px;
  z-index: 5;
}

/* ── カテゴリ境界線 ── */
th.cat-div, td.cat-div {
  border-left: 3px solid var(--accent) !important;
}

/* ── データ行 ── */
tr.data-row:nth-child(odd)  td { background: var(--row-odd); }
tr.data-row:nth-child(even) td { background: var(--row-even); }
tr.data-row:hover td:not(:nth-child(1)) {
  background: #deeeff !important;
  transition: background .08s;
}

td {
  padding: 7px 9px;
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  text-align: center;
  vertical-align: middle;
  font-weight: 700;
  font-size: 15px;
  line-height: 1.35;
  white-space: nowrap;
}

/* ── チップバッジ ── */
.chip {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 7px;
  font-size: 14px;
  font-weight: 900;
}
.c19    { background:#0a3d62; color:#74b9ff; }
.c19air { background:#0a3d62; color:#81ecec; }
.c19pro { background:#0a3d62; color:#fd79a8; }
.c18 { background:#1a1a2e; color:#48dbfb; }
.c17 { background:#1a1a2e; color:#a0c4ff; }
.c16 { background:#1a1a2e; color:#fd79a8; }
.c15 { background:#2d3436; color:#55efc4; }
.c14 { background:#2d3436; color:#fdcb6e; }
.c13 { background:#2d3436; color:#fd79a8; }
.c12 { background:#6c5ce7; color:#fff; }
.c11 { background:#e17055; color:#fff; }
.cold{ background:#b2bec3; color:#2d3436; }

/* ── ○× アイコン ── */
.yes  { color:#1e8e4e; font-size:17px; font-weight:900; }
.no   { color:#a8b0b8; font-size:15px; font-weight:700; }
.part { color:#c87f0a; font-weight:900; }

/* ── NEWバッジ ── */
.new {
  display: inline-block;
  background: var(--new);
  color: #fff;
  font-size: 13px;
  font-weight: 900;
  padding: 1px 5px;
  border-radius: 4px;
  vertical-align: middle;
  margin-left: 3px;
}

/* ── 非表示列 ── */
.col-hidden { display: none !important; }

/* ── 凡例 ── */
.legend {
  padding: 7px 10px 9px;
  display: flex;
  gap: 14px;
  font-size: 14px;
  font-weight: 700;
  color: var(--subtext);
  background: #fff;
  border-top: 1px solid var(--border);
  flex-wrap: wrap;
  flex-shrink: 0;
}
.legend .lg-hover { background: #deeeff; padding: 2px 7px; border-radius: 4px; }
.legend .lg-cat { border-left: 3px solid var(--accent); padding-left: 7px; }

/* ── スマホ追加調整 ── */
@media (max-width: 700px) {
  html, body { height: 100dvh; }
  td, th           { font-size: 15px !important; padding: 7px 6px; }
  .chip            { font-size: 14px !important; padding: 2px 6px; }
  .yes             { font-size: 17px !important; }
  .no              { font-size: 15px !important; }
  tbody td:nth-child(1) { font-size: 15px !important; }
  :root { --col0-w: 104px; }
}