/* Bootstrap 5.3 Custom Button Colors
  기존 부트스트랩 클래스명을 그대로 유지하면서 색상만 세련되게 변경합니다.
*/

:root {
  /* 세련된 뮤트/파스텔톤 컬러 정의 */
  --color-primary: #5c6bc0;       /* 감각적인 슬레이트 블루 */
  --color-primary-hover: #4f5b93;

  --color-secondary: #78909c;     /* 차분한 블루 그레이 */
  --color-secondary-hover: #607d8b;

  --color-success: #66bb6a;       /* 싱그러운 소프트 그린 */
  --color-success-hover: #4caf50;

  --color-danger: #ef5350;        /* 쨍하지 않고 부드러운 코랄 레드 */
  --color-danger-hover: #e53935;

  --color-warning: #ffb74d;       /* 따뜻한 파스텔 오렌지 */
  --color-warning-hover: #ffa726;

  --color-info: #26c6da;          /* 맑은 민트 스카이 */
  --color-info-hover: #00acc1;
}

/* ==========================================================================
   부트스트랩 버튼 클래스 오버라이드 (Override)
   ========================================================================== */

/* 공통 버튼 스타일 미세 조정 (둥근 모서리와 부드러운 전환 효과) */
.btn {
  border-radius: 8px; /* 조금 더 트렌디하고 부드러운 라운드값 */
  transition: all 0.25s ease-in-out;
  font-weight: 500;
}

/* Primary (주요 버튼) */
.btn-primary {
  background-color: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
  color: #fff !important;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
  background-color: var(--color-primary-hover) !important;
  border-color: var(--color-primary-hover) !important;
}

/* Secondary (보조 버튼) */
.btn-secondary {
  background-color: var(--color-secondary) !important;
  border-color: var(--color-secondary) !important;
  color: #fff !important;
}
.btn-secondary:hover, .btn-secondary:focus, .btn-secondary:active {
  background-color: var(--color-secondary-hover) !important;
  border-color: var(--color-secondary-hover) !important;
}

/* Success (성공/완료) */
.btn-success {
  background-color: var(--color-success) !important;
  border-color: var(--color-success) !important;
  color: #fff !important;
}
.btn-success:hover, .btn-success:focus, .btn-success:active {
  background-color: var(--color-success-hover) !important;
  border-color: var(--color-success-hover) !important;
}

/* Danger (삭제/경고) */
.btn-danger {
  background-color: var(--color-danger) !important;
  border-color: var(--color-danger) !important;
  color: #fff !important;
}
.btn-danger:hover, .btn-danger:focus, .btn-danger:active {
  background-color: var(--color-danger-hover) !important;
  border-color: var(--color-danger-hover) !important;
}

/* Warning (주의) */
.btn-warning {
  background-color: var(--color-warning) !important;
  border-color: var(--color-warning) !important;
  color: #fff !important; /* 글자색을 흰색으로 변경하여 더 깔끔하게 처리 */
}
.btn-warning:hover, .btn-warning:focus, .btn-warning:active {
  background-color: var(--color-warning-hover) !important;
  border-color: var(--color-warning-hover) !important;
  color: #fff !important;
}

/* Info (정보) */
.btn-info {
  background-color: var(--color-info) !important;
  border-color: var(--color-info) !important;
  color: #fff !important;
}
.btn-info:hover, .btn-info:focus, .btn-info:active {
  background-color: var(--color-info-hover) !important;
  border-color: var(--color-info-hover) !important;
}

/* ==========================================================================
   Outline 버튼 스타일 오버라이드 (선택 사항)
   ========================================================================== */
.btn-outline-primary {
  color: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
}
.btn-outline-primary:hover, .btn-outline-primary:active {
  background-color: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
  color: #fff !important;
}

.btn-outline-secondary {
  color: var(--color-secondary) !important;
  border-color: var(--color-secondary) !important;
}
.btn-outline-secondary:hover, .btn-outline-secondary:active {
  background-color: var(--color-secondary) !important;
  border-color: var(--color-secondary) !important;
  color: #fff !important;
}