/* =========================================
   全体・テーブルコンテナ
========================================= */
.ps-type-table-wrapper {
  overflow-y: auto;
  overflow-x: auto;
  max-height: 600px;
  border-radius: 10px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  background: #fff;
  margin-top: 25px;
  border: 1px solid #eef0f2;
}

.ps-type-table {
  border-collapse: collapse;
  width: 100%;
  font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  color: #333;
  min-width: 1250px; /* No列が増えた分、少しだけ広げました */
}

/* =========================================
   セル共通・配置設定
========================================= */
.ps-type-table th,
.ps-type-table td {
  padding: 12px 6px;
  text-align: center;
  vertical-align: middle;
  border-bottom: 1px solid #eaeef2;
  border-right: 1px solid #f4f6f8;
  font-size: 0.9rem;
}

.ps-type-table th:last-child,
.ps-type-table td:last-child {
  border-right: none;
}

/* ストライプ背景設定 */
.ps-type-table tbody tr:nth-child(even) td {
  background-color: #fafbfc;
}

/* =========================================
   ヘッダー固定 & 装飾
========================================= */
.ps-type-table thead th {
  position: sticky;
  top: 0;
  background-color: #2c3e50;
  color: #ffffff;
  z-index: 10;
  font-size: 0.85rem;
  font-weight: 600;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  white-space: nowrap;
}

.ps-stat-col {
  background-color: #34495e !important;
  min-width: 85px;
}

/* =========================================
   【重要】左端列（No.とポケモン名）の固定
========================================= */

/* --- 1列目: No. --- */
/* header(th)とbody(td)の両方を左端0に固定 */
.ps-type-table th:first-child,
.ps-type-table td.ps-no-col {
  position: sticky;
  left: 0;
  z-index: 6; /* 名前列(5)より少し上に */
  min-width: 50px;
  width: 50px;
  background-color: #fff;
  border-right: 1px solid #e2e8f0;
}

/* --- 2列目: ポケモン名 --- */
/* No列の幅(50px)の分だけ右にずらして固定 */
.ps-type-table th:nth-child(2),
.ps-type-table td.ps-sticky-col {
  position: sticky;
  left: 50px; /* No列の幅に合わせる */
  z-index: 5;
  min-width: 140px;
  text-align: left;
  padding-left: 15px;
  font-weight: bold;
  background-color: #fff;
  border-right: 3px solid #e2e8f0; /* 境界線を強調 */
}

/* しましま（偶数行）の固定列背景 */
.ps-type-table tbody tr:nth-child(even) td.ps-no-cell,
.ps-type-table tbody tr:nth-child(even) td.ps-sticky-col {
  background-color: #fafbfc;
}

/* ヘッダー部分はさらに上のレイヤーに(z-index) */
.ps-type-table thead th:first-child {
  z-index: 25;
  background-color: #2c3e50;
}
.ps-type-table thead th:nth-child(2) {
  z-index: 20;
  background-color: #2c3e50;
  border-right: 3px solid #1a252f;
}

/* ホバー時のハイライトを固定列にも適用 */
.ps-type-table tbody tr:hover td {
  background-color: #f1f5f9 !important;
}

/* No.列自体の装飾 */
.ps-no-cell {
  color: #94a3b8;
  font-size: 0.8rem;
  font-family: monospace; /* 数字を見やすく */
}

/* =========================================
   相性・補完率の装飾 (以下、変更なし)
========================================= */
.ps-badge {
  display: inline-block;
  width: 28px;
  height: 28px;
  line-height: 28px;
  border-radius: 50%;
  font-weight: bold;
  font-size: 0.9rem;
  text-align: center;
}

.m-4 { background-color: #f39c12; color: #fff; } 
.m-2 { background-color: #e74c3c; color: #fff; } 
.m-1 { background-color: transparent; color: #7f8c8d; font-size: 0.8rem; } 
.m-0-5 { background-color: #27ae60; color: #fff; } 
.m-0-25 { background-color: #2ecc71; color: #fff; } 
.m-0 { background-color: #3498db; color: #fff; font-size: 0.8rem; }

.ps-stat-cell { white-space: nowrap; }
.ps-stat-num { font-size: 1rem; font-weight: 800; color: #2c3e50; }
.ps-stat-rate { font-size: 0.75rem; color: #7f8c8d; margin-left: 3px; font-weight: normal; }

/* =========================================
   検索フォーム・その他 (以下、変更なし)
========================================= */
#ps-search-form {
  display: flex; gap: 15px; flex-wrap: wrap; align-items: center;
  background: #ffffff; padding: 25px; border-radius: 12px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05); border: 1px solid #eef0f2;
}
#ps-search-form select {
  padding: 10px 15px; font-size: 1rem; border: 2px solid #dfe6e9;
  border-radius: 8px; min-width: 220px;
}
#ps-search-form button {
  padding: 12px 24px; font-weight: bold; color: #fff;
  background: linear-gradient(135deg, #3498db, #2980b9);
  border: none; border-radius: 8px; cursor: pointer;
}
#ps-loader { display: inline-flex; align-items: center; gap: 10px; color: #7f8c8d; }
.spinner {
  width: 22px; height: 22px; border: 3px solid #ecf0f1;
  border-top-color: #3498db; border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }