/* ============================================================
   TOAST - 토스트 메시지 스타일
   ============================================================ */

.toast {
  position: fixed;
  bottom: 20px;
  right: 20px;
  /* 오른쪽 아래로 이동 */
  background: var(--bg-card, rgb(44 47 72 / 95%));
  color: var(--text-primary, #e0e0e0);
  padding: 12px 20px;
  border-radius: var(--border-radius-button, 15px);
  border: 1px solid var(--border-light, rgb(255 255 255 / 10%));
  box-shadow:
    var(--shadow-light, 4px 4px 8px rgb(0 0 0 / 30%)),
    var(--shadow-dark, -4px -4px 8px rgb(255 255 255 / 10%));
  font-size: var(--font-size-sm, 0.9rem);
  font-weight: var(--font-weight-medium, 500);
  z-index: var(--z-toast, 9999);
  max-width: 300px;
  overflow-wrap: break-word;
  backdrop-filter: blur(10px);
  animation: toast-slide-in 0.3s ease-out;
  user-select: none;
}

/* 토스트 타입별 색상 */
.toast-info {
  border-left: 1.5px solid var(--primary-color, #8b9cf7);
}

.toast-success {
  border-left: 1.5px solid var(--success-color, #10b981);
}

.toast-warning {
  border-left: 1.5px solid var(--warning-color, #f59e0b);
}

.toast-error {
  border-left: 1.5px solid var(--error-color, #ef4444);
}

/* 토스트 애니메이션 */
@keyframes toast-slide-in {
  from {
    transform: translateX(100%);
    opacity: 0%;
  }

  to {
    transform: translateX(0);
    opacity: 100%;
  }
}

@keyframes toast-slide-out {
  from {
    transform: translateX(0);
    opacity: 100%;
  }

  to {
    transform: translateX(100%);
    opacity: 0%;
  }
}

/* 토스트 호버 효과 */
.toast:hover {
  transform: translateY(-2px);
  box-shadow:
    var(--shadow-hover-light, 8px 8px 16px rgb(0 0 0 / 40%)),
    var(--shadow-hover-dark, -8px -8px 16px rgb(255 255 255 / 15%));
}

/* 반응형 디자인 */
@media (width <=768px) {
  .toast {
    bottom: 10px;
    right: 10px;
    left: 10px;
    max-width: none;
    font-size: var(--font-size-xs, 0.8rem);
    padding: 10px 16px;
  }
}

/* 다크 모드 지원 */
@media (prefers-color-scheme: dark) {
  .toast {
    background: var(--bg-card-dark, rgb(45 55 72 / 95%));
    color: var(--text-primary-dark, #e2e8f0);
    border-color: var(--border-light-dark, rgb(255 255 255 / 15%));
  }
}