/*
 * 토스트 — **관리자와 사용자 화면이 «같이» 쓴다.**
 *
 * 🔴 원래 이 규칙들은 admin-patterns.css 안에 있었다. 사용자 화면에도 토스트가
 *    필요해졌을 때(2026-09-01, `alert()` 51곳을 없애면서) 복사하지 않고 «옮겼다» —
 *    같은 것을 두 벌로 두면 반드시 어긋나고, 그 사고를 바로 앞 커밋에서 겪었다
 *    (admin-tools.js 가 부트스트랩 토스트로 별도 구현을 갖고 있었다).
 *
 * ⚠️ 그래서 **관리자 셸 밖에서도 서야 한다.** `--adm-*` 토큰은 admin-shell.css 가
 *    정의하므로 사용자 화면에는 없다. 모든 var() 에 폴백값을 붙여 둔 이유다
 *    (값은 admin-shell.css·tools-common.css 의 실측치). 토큰이 있으면 그쪽이 이긴다.
 *
 * 클래스 이름의 `adm-` 는 «역사»다 — 지금은 사이트 공용이다.
 * 동작(지속시간·정지·닫기)은 public/js/toast.js 한 곳이 소유한다.
 */

/* 토스트 — 우측 상단, 흰 배경 + 좌측 3px 의미색 */
.adm-toasts {
  position: fixed; top: 64px; right: 20px; z-index: 1080;
  display: flex; flex-direction: column; gap: 8px;
  /* 🔴 고정 340px + right:20px 이면 320px 화면에서 왼쪽 40px 가 «화면 밖»으로 나간다.
        제목·문구 앞부분을 못 읽는다. 화면이 좁으면 화면에 맞춘다. */
  width: min(340px, calc(100vw - 40px));
}
.adm-toast {
  display: flex; gap: 10px; align-items: flex-start;
  background: var(--adm-surface, #ffffff); border: 1px solid var(--adm-border, #e5e8ed);
  border-left: 3px solid var(--adm-accent, #3b6fe0); border-radius: 10px; padding: 11px 13px;
  box-shadow: 0 1px 2px rgba(27,30,36,.04), 0 8px 20px rgba(27,30,36,.08);
  animation: adm-toast-in .18s ease-out;
}
@keyframes adm-toast-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.adm-toast__title { font-size: 13px; font-weight: 600; color: var(--adm-ink, #1b1e24); }
.adm-toast__desc  { font-size: 12px; color: var(--adm-ink-3, #626977); }
.adm-toast--success { border-color: #cfeddb; border-left-color: var(--accent-success, #2f9e5f); }
.adm-toast--warning { border-color: #f6dcbe; border-left-color: var(--accent-warning, #c06a2b); }
.adm-toast--error   { border-color: #f8d5d2; border-left-color: var(--accent-danger, #d64545); }
/* 중립 안내 — 「시작했다」처럼 성공도 실패도 아닌 것. 좌측선은 기본 강조색을 쓴다. */
.adm-toast--info    { border-color: #d7e2f8; border-left-color: var(--adm-accent, #3b6fe0); }

/* ── 토스트 부품 (partials/admin-toast.php + public/js/admin-toast.js) ──────
   🔴 컨테이너는 클릭을 먹지 않는다. 화면 오른쪽 위를 덮고 있으므로 pointer-events 를
      끄고 «토스트 자신»만 다시 켠다 — 안 그러면 그 아래 버튼이 안 눌린다. */
.adm-toasts { pointer-events: none; }
.adm-toast  { pointer-events: auto; }
.adm-toast__body { flex: 1 1 auto; min-width: 0; }
.adm-toast__desc { word-break: break-word; }
.adm-toast__x {
  flex: 0 0 auto; width: 22px; height: 22px; line-height: 1;
  border: 0; border-radius: 6px; background: transparent;
  color: var(--adm-ink-3, #626977); font-size: 17px; cursor: pointer;
}
.adm-toast__x:hover { background: var(--adm-border-soft, #eef0f4); color: var(--adm-ink, #1b1e24); }
/* 「되돌리기」 — 즉시 저장하는 토글에는 돌아갈 길이 있어야 한다(시안 02 §12). */
.adm-toast__undo {
  flex: 0 0 auto; align-self: center; border: 0; background: transparent;
  color: var(--adm-accent-strong, #2c56b8); font-size: 12px; font-weight: 700;
  padding: 3px 6px; border-radius: 6px; cursor: pointer;
}
.adm-toast__undo:hover { background: var(--adm-accent-soft, #eef3fd); }
.adm-toast__undo:focus-visible { outline: 2px solid var(--adm-accent, #3b6fe0); outline-offset: 1px; }
.adm-toast__x:focus-visible { outline: 2px solid var(--adm-accent, #3b6fe0); outline-offset: 1px; }
/* 사라질 때. JS 는 transitionend 를 «기다리지 않고» 고정 시간 뒤 지운다 —
   숨은 탭·reduced-motion 에서 그 이벤트가 안 오면 토스트가 영영 남기 때문이다. */
.adm-toast.is-leaving { opacity: 0; transform: translateY(-6px); transition: opacity .16s, transform .16s; }
/* 움직임을 줄이라고 한 사용자에게는 등장·퇴장 애니메이션을 끈다. */
.adm-toasts--no-motion .adm-toast { animation: none; }
.adm-toasts--no-motion .adm-toast.is-leaving { transition: none; }
/* 지속: 성공 4s / 경고 7s / 오류는 자동 소멸 없음 (JS에서 timeout 미설정) */