/* 컨테이너 */
#toast-container {
  position: fixed;
  right: 20px; bottom: 24px;
  display: flex; flex-direction: column; gap: 12px;
  z-index: 99999; pointer-events: none;
}

/* 개별 토스트 */
.toast {
  pointer-events: auto;
  width: min(360px, calc(100vw - 40px));
  background: rgba(28,28,28,.75);
  color: #fff;
  border-radius: 12px;
  padding: 14px;
  box-shadow: 0 8px 32px rgba(0,0,0,.35);
  display: grid;
  grid-template-columns: 24px 1fr auto;
  column-gap: 12px; row-gap: 2px;
  align-items: center;
  overflow: hidden;
  animation: toast-in .28s ease-out both;
  font-size: 14px;
  height: 80px;
}
.toast.exit { animation: toast-out .22s ease-in forwards; }

.toast__icon {   display:flex; align-items:center; justify-content:center; color: inherit;}

.toast__msg   { grid-column: 2 / -1; color: #e9e9e9; line-height: 1.35; }
.toast__close {
  border: 0; background: transparent; color: #bbb; cursor: pointer;
  width: 28px; height: 28px; border-radius: 8px;
}
.toast__close:hover { background: rgba(255,255,255,.08); color: #fff; }

/* 진행바 */
.toast__bar {
  position: absolute; left: 0; bottom: 0; height: 3px;
  width: 100%; background: rgba(255,255,255,.15);
}
.toast__bar > span {
  display: block; height: 100%; transform-origin: left;
  animation: toast-bar linear forwards;
}

/* 타입 색상 */
.toast--success .toast__bar > span { background: #58DD94; }
.toast--error   .toast__bar > span { background: #FF4242; }
.toast--info    .toast__bar > span { background: #FFBF47; }


/* 아이콘 색상 */
.toast--success .toast__icon i { color: #58DD94; font-size: 20px; }
.toast--error   .toast__icon i { color: #FF4242; font-size: 20px; }
.toast--info    .toast__icon i { color: #FFBF47; font-size: 20px; }


@keyframes toast-in {
  from { opacity: 0; transform: translate3d(16px, 6px, 0); }
  to   { opacity: 1; transform: none; }
}
@keyframes toast-out {
  to { opacity: 0; transform: translate3d(16px, -6px, 0); }
}
@keyframes toast-bar {
  from { transform: scaleX(1); }
  to   { transform: scaleX(0); }
}