/* 토스트 — main.js showToast()가 body 끝에 하나만 만들어 재사용한다(2026-09-06, 앵커 복사 알림).
   role="status" + aria-live="polite" 라 시각·스크린리더 양쪽에 같은 사실이 전달된다.
   pointer-events: none — 화면 아래를 덮되 클릭을 가로채지 않는다. */
.c-toast {
  position: fixed;
  left: 50%;
  bottom: var(--space-8);
  /* 헤더(z-index 100) 위. <dialog>는 top layer라 이 값과 무관하게 항상 토스트보다 앞이다. */
  z-index: 200;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  max-width: min(90vw, 30rem);
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-pill);
  background: var(--color-ink);
  color: var(--color-ink-contrast);
  box-shadow: var(--shadow-cta);
  font-size: var(--font-size-sm);
  font-weight: 500;
  text-align: center;
  word-break: keep-all;
  opacity: 0;
  translate: -50% 8px;
  transition:
    opacity 0.2s ease,
    translate 0.2s ease;
  pointer-events: none;
}

.c-toast.is-visible {
  opacity: 1;
  translate: -50% 0;
}

.c-toast svg {
  flex: none;
  width: 1em;
  height: 1em;
  color: var(--color-accent);
}

@media (prefers-reduced-motion: reduce) {
  .c-toast {
    transition: none;
    translate: -50% 0;
  }
}