/* toast의 기본 스타일 */
.toast {
  position: fixed; /* 화면에 고정 */
  right: 20px; /* 우측 상단에 위치 */
  top: 20px;
  min-width: 200px; /* 최소 너비 */
  max-width: 350px; /* 최대 너비 */
  padding: 10px; /* 여백 */
  border-radius: 5px; /* 모서리 둥글게 */
  box-shadow: 0 0 10px rgba(0,0,0,0.1); /* 그림자 효과 */
  font-family: Arial, sans-serif; /* 폰트 */
  font-size: 16px; /* 폰트 크기 */
  }
  
  /* toast의 색상별 스타일 */
  .toast-success {
  background-color: #4caf50; /* 성공 색상 */
  color: white; /* 글자 색상 */
  }
  
  .toast-error {
  background-color: #f44336; /* 에러 색상 */
  color: white;
  }
  
  .toast-warning {
  background-color: #ff9800; /* 경고 색상 */
  color: white;
  }
  
  .toast-info {
  background-color: #2196f3; /* 정보 색상 */
  color: white;
  }
  
  /* toast의 애니메이션 효과 */
  @keyframes fade-in {
  from {opacity: 0;} /* 처음에 투명하게 */
  to {opacity: 1;} /* 나중에 불투명하게 */
  }
  
  @keyframes fade-out {
  from {opacity: 1;} /* 처음에 불투명하게 */
  to {opacity: 0;} /* 나중에 투명하게 */
  }
  
  /* toast가 생성될 때 fade-in 애니메이션 적용 (0.5초 동안) */
  .toast.show {
  animation-name: fade-in;
  animation-duration: 0.5s;
  }
  
  /* toast가 사라질 때 fade-out 애니메이션 적용 (0.5초 동안) */
  .toast.hide {
  animation-name: fade-out;
  animation-duration: 0.5s;
  }