/* Settings 페이지 공통 배지 스타일 */

.badge {
  font-size: 0.75rem;
  padding: 0.375rem 0.75rem;
  border-radius: 0.375rem;
  font-weight: 500;
  border: 1px solid transparent;
  transition: all 0.2s ease;
}

/* 배지 색상 - Light mode */
.badge.bg-success {
  background-color: #d1f2eb !important;
  color: #0e7c61 !important;
  border-color: #a3e4d7 !important;
}

.badge.bg-warning {
  background-color: #fef3cd !important;
  color: #b45309 !important;
  border-color: #fde68a !important;
}

.badge.bg-danger {
  background-color: #f8d7da !important;
  color: #b91c1c !important;
  border-color: #f1aeb5 !important;
}

.badge.bg-secondary {
  background-color: #e9ecef !important;
  color: #495057 !important;
  border-color: #dee2e6 !important;
}

.badge.bg-info {
  background-color: #d1ecf1 !important;
  color: #0c5460 !important;
  border-color: #bee5eb !important;
}

/* 배지 색상 - Dark mode */
.dark-only .badge.bg-success {
  background-color: #064e3b !important;
  color: #6ee7b7 !important;
  border-color: #047857 !important;
}

.dark-only .badge.bg-warning {
  background-color: #78350f !important;
  color: #fbbf24 !important;
  border-color: #d97706 !important;
}

.dark-only .badge.bg-danger {
  background-color: #7f1d1d !important;
  color: #fca5a5 !important;
  border-color: #dc2626 !important;
}

.dark-only .badge.bg-secondary {
  background-color: #374151 !important;
  color: #d1d5db !important;
  border-color: #4b5563 !important;
}

.dark-only .badge.bg-info {
  background-color: #1e3a8a !important;
  color: #93c5fd !important;
  border-color: #3b82f6 !important;
}

/* 배지 호버 효과 */
.badge:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.badge.bg-success:hover {
  background-color: #a7f3d0 !important;
  box-shadow: 0 2px 4px rgba(16, 185, 129, 0.2);
}

.badge.bg-warning:hover {
  background-color: #fde68a !important;
  box-shadow: 0 2px 4px rgba(245, 158, 11, 0.2);
}

.badge.bg-danger:hover {
  background-color: #f1aeb5 !important;
  box-shadow: 0 2px 4px rgba(239, 68, 68, 0.2);
}

.badge.bg-secondary:hover {
  background-color: #dee2e6 !important;
  box-shadow: 0 2px 4px rgba(107, 114, 128, 0.2);
}

.badge.bg-info:hover {
  background-color: #bee5eb !important;
  box-shadow: 0 2px 4px rgba(13, 202, 240, 0.2);
}

/* 다크모드 호버 효과 */
.dark-only .badge.bg-success:hover {
  background-color: #047857 !important;
  box-shadow: 0 2px 4px rgba(16, 185, 129, 0.3);
}

.dark-only .badge.bg-warning:hover {
  background-color: #d97706 !important;
  box-shadow: 0 2px 4px rgba(245, 158, 11, 0.3);
}

.dark-only .badge.bg-danger:hover {
  background-color: #dc2626 !important;
  box-shadow: 0 2px 4px rgba(239, 68, 68, 0.3);
}

.dark-only .badge.bg-secondary:hover {
  background-color: #4b5563 !important;
  box-shadow: 0 2px 4px rgba(107, 114, 128, 0.3);
}

.dark-only .badge.bg-info:hover {
  background-color: #3b82f6 !important;
  box-shadow: 0 2px 4px rgba(59, 130, 246, 0.3);
}