/* ============================================================
   토스트 (접두사 `toast`).
   페이지의 오른쪽 아래. 오류나 경고 토스트는 닫을 때까지 머무르므로, 그사이 사람이 일하는 것 위에 놓여서는 안 된다:
   목록 페이지의 도구 모음 ("PC 추가", "계정 만들기", "CSV 내보내기") 은 위 막대 아래 첫 행이고 그 주된 버튼은 오른쪽에
   있다 (V-3). 페이지의 오른쪽 아래 모서리에는 주된 것이 아무것도 놓이지 않는다: 양식의 버튼은 그 왼쪽 가장자리에서
   시작하고 표의 행은 스크롤되어 사라진다.
   모달 대화 상자가 열려 있는 동안 컨테이너는 그 안에 살고 (lib/toast.js) 대신 오른쪽 위로 옮겨 간다: 대화 상자 자신의
   버튼은 그 바닥, 아래쪽에 있다.
   성공과 정보는 스스로 사라진다; 경고와 오류는 닫을 때까지 머문다 (lib/toast.js).
   등장 애니메이션은 CSS 애니메이션이다; prefers-reduced-motion 이 base.css 에서 그것을 끈다.
   ============================================================ */

.toast-container {
  position: fixed;
  right: var(--sp6);
  bottom: var(--sp6);
  z-index: 2000;
  display: flex;
  flex-direction: column;
  gap: var(--sp2);
  pointer-events: none;
}

dialog > .toast-container {
  top: var(--sp4);
  bottom: auto;
}

.toast {
  display: flex;
  align-items: flex-start;
  gap: var(--sp3);
  padding: var(--sp3) var(--sp2) var(--sp3) var(--sp3);
  border-radius: var(--radius-md);
  border: 1px solid;
  border-left: 4px solid;
  min-width: 300px;
  max-width: 440px;
  font-size: var(--fs-sm);
  pointer-events: all;
  animation: toast-in 0.2s ease;
}

@keyframes toast-in {
  from { opacity: 0; transform: translateX(20px); }
  to   { opacity: 1; transform: translateX(0); }
}

.toast-icon {
  width: 20px;
  height: 20px;
  margin-top: 1px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-xs);
  font-weight: 700;
  line-height: 1;
  flex-shrink: 0;
}

.toast-message {
  flex: 1;
  min-width: 0;
  padding-top: 1px;
  color: var(--text-primary);
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.toast-dismiss {
  background: transparent;
  border: none;
  color: var(--text-dim);
  width: var(--h-sm);
  height: var(--h-sm);
  margin: -4px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
}

.toast-dismiss:hover {
  color: var(--text-primary);
  background: var(--surface-raised);
}

.toast-success {
  background: var(--ok-fill);
  border-color: var(--ok-line);
  border-left-color: var(--ok);
}
.toast-success .toast-icon {
  background: var(--ok);
  color: var(--on-accent);
}

.toast-error {
  background: var(--crit-fill);
  border-color: var(--crit-line);
  border-left-color: var(--crit);
}
.toast-error .toast-icon {
  background: var(--crit);
  color: var(--on-crit);
}

.toast-warning {
  background: var(--warn-fill);
  border-color: var(--warn-line);
  border-left-color: var(--warn);
}
.toast-warning .toast-icon {
  background: var(--warn);
  color: var(--text-primary);
}

.toast-info {
  background: var(--accent-tint);
  border-color: var(--accent-line);
  border-left-color: var(--accent);
}
.toast-info .toast-icon {
  background: var(--accent);
  color: var(--on-accent);
}

@media (max-width: 480px) {
  .toast-container {
    left: calc(var(--w-rail) + var(--sp3));
    right: var(--sp3);
    bottom: var(--sp3);
  }

  dialog > .toast-container {
    left: var(--sp3);
    bottom: auto;
  }

  .toast {
    min-width: 0;
    max-width: none;
  }
}