/* ==========================================================
   カラバリ色丸 (color-dots) スタイル
   既存の style.css と併用する追加CSS
   ========================================================== */

/* サムネアイテム内の色丸コンテナ */
.color-dots {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: 4px;
  padding: 2px 0;
  flex-wrap: wrap;
}

/* 個々の色丸 */
.color-dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.3);
  cursor: pointer;
  transition: transform 0.15s ease, border-color 0.15s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  overflow: hidden;
}

.color-dot:hover {
  transform: scale(1.25);
  border-color: rgba(255, 255, 255, 0.7);
}

/* 選択中の色丸 */
.color-dot.active {
  border-color: #fff;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.5), 0 1px 3px rgba(0, 0, 0, 0.3);
  transform: scale(1.15);
}