/* チェックボックス全体のコンテナ */
.seo-check-label {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  padding: 8px 16px;
  background: #f1f5f9;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
  transition: all 0.2s ease;
  user-select: none;
  font-weight: 500;
  color: #475569;
}

/* ホバー時の挙動 */
.seo-check-label:hover {
  background: #e2e8f0;
  border-color: #cbd5e1;
}

/* 隠した実体 */
.seo-item-check {
  display: none;
}

/* カスタムチェックボックスの枠 */
.seo-check-label::before {
  content: "";
  width: 18px;
  height: 18px;
  border: 2px solid #cbd5e1;
  border-radius: 4px;
  margin-right: 10px;
  background: white;
  transition: all 0.2s ease;
}

/* チェックされた時のスタイル */
.seo-item-check:checked + .seo-check-label {
  background: #f0fdf4;
  border-color: #86efac;
  color: #166534;
}

.seo-item-check:checked + .seo-check-label::before {
  background: #10b981;
  border-color: #10b981;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E");
  background-size: contain;
}