/* --- 全体のレイアウト調整 --- */
body {
  max-width: 1000px; /* 全体の最大幅（お好みで変更してください） */
  margin: 0 auto;    /* 左右の余白を均等にして中央寄せ */
  padding: 20px;     /* 画面端からの余白 */
  font-family: sans-serif; /* フォントを少しスッキリさせる */
  color: #333;
}

/* --- テーブルのスタイル調整 --- */
table {
  width: 100%; /* テーブルの幅をコンテナいっぱいに広げる */
  border-collapse: collapse; /* セルの隙間をなくしてスッキリさせる */
  margin-top: 10px;
}

th, td {
  border: 1px solid #ccc; /* 枠線を追加 */
  padding: 8px 4px;       /* セル内の余白（上下8px、左右4px） */
  text-align: center;     /* テキストを中央揃え */
  vertical-align: middle;
}

th {
  background-color: #f2f2f2; /* ヘッダーに少し色をつける */
}

/* チェックされたセルだけ緑色に（ALL列用） */
td.participated {
  background-color: #dff0d8 !important;
}

/* ホバー効果 */
tbody tr:hover td {
  background-color: #f9f9f9;
}

/* --- ここから追加：ステータス用のデザイン --- */
select.status-select {
  padding: 4px;
  border-radius: 4px;
  border: 1px solid #ccc;
  width: 100%;
  font-size: 0.9em;
  background-color: transparent;
  cursor: pointer;
}

/* ステータスごとの背景色（tdに適用） ※ !important を維持 */
td.status-ac { background-color: #5cb85c !important; }        /* AC: はっきりした緑 */
td.status-editorial { background-color: #33b5e5 !important; } /* 解説AC: はっきりした青 */
td.status-trying { background-color: #ffbb33 !important; }    /* 挑戦中: はっきりした黄色 */
td.status-unattempted { background-color: transparent; }      /* 未挑戦: 透明 */