/* 토스트 — 글라스 카드 · Kobra Toast 메커니즘(오너 지시 2026-09-16). 새 셸과 로그인 화면에서만 쓴다.
 *   ★ 자리는 **화면 가운데 아래 고정**(오너 2026-09-17 — 우상단이 라이브러리 시트·상단 UI 와 겹쳤다). 화면마다 자리를 바꾸지 않는다:
 *     프로젝트 셸·모바일 예외 규칙을 두지 않고, 겹쳐 쌓이면 위로 올라가며, 아래에서 올라와 아래로 나간다.
 *   동작(쌓기·펼치기·타이머 정지·밀어서 닫기)은 web/ui/toastStack.js, 산술은 toastMath.js 가 소유한다 — 여기는 모양·자리·모션.
 *   옛 셸(v1)은 components.css 의 하단 중앙 한 장 그대로다(toast.js 가 가른다 · v1 은 prod 화면).
 *
 *   ★ 선택자 특이도를 (0,3,1) 로 맞췄다 — glass.css `body.shell-chrome.rail-collapsed .app-toast { left: 50% }` 가 (0,3,1) 이라
 *     그보다 낮으면 접힌 레일에서 카드가 화면 가운데까지 늘어난다. 같은 특이도는 이 파일이 뒤에 실려 이긴다.
 *   ★ 재질은 글라스 토큰(--lg-*)을 쓰되 **폴백을 리터럴로** 둔다 — 로그인 화면은 body 에 shell-v2 가 없어 토큰이 정의되지 않는다.
 *     폴백 값은 liquid-glass-tokens.css 의 thick 틴트·float 그림자와 같다. 저쪽을 바꾸면 여기 폴백도 맞출 것.
 *   🔴 animation 을 쓰지 않는다(transition 만) — fill-mode both 가 transform 을 붙잡으면 backdrop root 가 되어 블러가
 *      에러 없이 죽는다(이 repo 에서 두 번 물렸다). */

:is(body.shell-v2, body:has(.signin-gate)) .app-toast.app-toast--stacked {
  position: fixed;
  top: auto; right: auto; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  width: max-content;
  max-width: min(380px, calc(100vw - 32px));
  min-height: 0;
  display: flex; align-items: flex-start; gap: 10px;
  /* macOS 배너: 모서리 반경은 Framer --r-lg(15)보다 크다 — 의도: Apple Tahoe 알림은 둥근 카드에 가깝다(칼리브레이션 노브) */
  border-radius: 18px;
  padding: 12px 16px 12px 14px;
  border: 0;
  background: var(--lg-sheen, linear-gradient(180deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0) 42%)), var(--lg-tint-thick, rgba(0, 0, 0, 0.70));
  -webkit-backdrop-filter: var(--lg-filter, blur(30px) saturate(150%));
  backdrop-filter: var(--lg-filter, blur(30px) saturate(150%));
  box-shadow: var(--lg-shadow-float, inset 0 1px 0 rgba(255, 255, 255, 0.14), inset 0 -1px 0 rgba(255, 255, 255, 0.03), inset 0 0 0 1px rgba(255, 255, 255, 0.18), 0 12px 40px rgba(0, 0, 0, 0.38));
  color: #ffffff;
  font-size: 14px; line-height: 20px; letter-spacing: -0.14px; text-align: left;
  pointer-events: auto; cursor: default; user-select: none; -webkit-user-select: none; touch-action: pan-y;
  transform-origin: bottom center;
  transform: translate3d(calc(-50% + var(--t-x, 0px)), calc(var(--t-enter, 0px) + var(--t-y, 0px)), 0) scale(var(--t-s, 1));
  opacity: var(--t-o, 1);
  /* 쌓임·펼침·들어옴은 같은 곡선 — Apple 식 감쇠 스프링에 가까운 cubic(오버슈트 없이 빠르게 붙는다) */
  transition: transform 420ms cubic-bezier(0.32, 0.72, 0, 1), opacity 260ms ease;
}

/* 아래에서 올라오고, 닫히면 다시 아래로 내려간다 */
:is(body.shell-v2, body:has(.signin-gate)) .app-toast.app-toast--stacked[data-state="enter"] { --t-enter: calc(100% + 24px); opacity: 0; }
:is(body.shell-v2, body:has(.signin-gate)) .app-toast.app-toast--stacked[data-state="exit"] {
  --t-enter: calc(100% + 24px); opacity: 0; pointer-events: none;
  transition: transform 260ms cubic-bezier(0.4, 0, 1, 1), opacity 220ms ease;
}
:is(body.shell-v2, body:has(.signin-gate)) .app-toast.app-toast--stacked[data-dragging] { transition: opacity 260ms ease; cursor: grabbing; }

/* 겹친 뒤 카드 — 앞 카드 크기로 접고 내용을 숨긴다(비치는 건 카드 가장자리뿐) */
:is(body.shell-v2, body:has(.signin-gate)) .app-toast.app-toast--stacked[data-behind] { width: var(--t-w); height: var(--t-h); overflow: hidden; pointer-events: none; }
/* 뒤 카드는 글이 없어 검은 배경에 묻힌다 — 표면을 한 단 밝혀 겹친 가장자리가 보이게(macOS 알림 묶음처럼) */
:is(body.shell-v2, body:has(.signin-gate)) .app-toast.app-toast--stacked[data-behind] {
  background: rgba(58, 58, 62, 0.78);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12), 0 8px 24px rgba(0, 0, 0, 0.35);
}
:is(body.shell-v2, body:has(.signin-gate)) .app-toast.app-toast--stacked > * { transition: opacity 200ms ease; }
:is(body.shell-v2, body:has(.signin-gate)) .app-toast.app-toast--stacked[data-behind] > * { opacity: 0; }

/* 세기 배지 — 원 안의 선 아이콘. 색은 배지에만 두고 카드는 물들이지 않는다(글이 안 읽힌다) */
:is(body.shell-v2, body:has(.signin-gate)) .app-toast--stacked .app-toast-icon {
  flex: 0 0 20px; width: 20px; height: 20px; border-radius: 50%;
  display: grid; place-items: center; margin: 0; font-size: 0; line-height: 0;
  background: rgba(255, 255, 255, 0.14); color: #ffffff;
}
:is(body.shell-v2, body:has(.signin-gate)) .app-toast--error.app-toast--stacked .app-toast-icon { background: var(--danger, #ff5577); color: #ffffff; }
:is(body.shell-v2, body:has(.signin-gate)) .app-toast--stacked .app-toast-icon svg { display: block; }
:is(body.shell-v2, body:has(.signin-gate)) .app-toast--stacked .app-toast-text { min-width: 0; padding-top: 0; word-break: keep-all; overflow-wrap: anywhere; } /* 한글은 어절 단위로만 줄을 바꾼다 */

/* 닫기 — macOS 처럼 올리거나 키보드로 들어오면 좌상단 모서리에 뜬다 */
:is(body.shell-v2, body:has(.signin-gate)) .app-toast--stacked .app-toast-close {
  position: absolute; top: -7px; left: -7px;
  width: 20px; height: 20px; min-height: 0; min-width: 0; padding: 0; margin: 0;
  display: grid; place-items: center; border-radius: 50%;
  border: 0; box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.24), 0 2px 6px rgba(0, 0, 0, 0.35);
  background: rgba(44, 44, 46, 0.96); color: rgba(255, 255, 255, 0.85);
  opacity: 0; transform: scale(0.8); cursor: pointer;
  transition: opacity 150ms ease, transform 150ms ease;
}
:is(body.shell-v2, body:has(.signin-gate)) .app-toast--stacked:is(:hover, :focus-within) .app-toast-close { opacity: 1; transform: scale(1); }
:is(body.shell-v2, body:has(.signin-gate)) .app-toast--stacked .app-toast-close:hover { background: rgba(72, 72, 74, 0.98); color: #ffffff; }
:is(body.shell-v2, body:has(.signin-gate)) .app-toast--stacked .app-toast-close:focus-visible { outline: 2px solid var(--accent, #0099ff); outline-offset: 2px; }

/* 좁은 화면 — 자리(가운데 아래)는 같고 폭만 화면에 맞춘다 */
@media (max-width: 810px) {
  :is(body.shell-v2, body:has(.signin-gate)) .app-toast.app-toast--stacked { bottom: calc(16px + env(safe-area-inset-bottom, 0px)); max-width: calc(100vw - 32px); }
}

@media (prefers-reduced-transparency: reduce) {
  :is(body.shell-v2, body:has(.signin-gate)) .app-toast.app-toast--stacked { background: #1c1c1e; -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (prefers-reduced-motion: reduce) {
  :is(body.shell-v2, body:has(.signin-gate)) .app-toast.app-toast--stacked,
  :is(body.shell-v2, body:has(.signin-gate)) .app-toast.app-toast--stacked[data-state="exit"] { transition: none; }
}

/* ════════ 캔버스에서 난 알림 — 화면 위쪽 35% 띠(2026-09-21 오너 2차 #6) ════════
 *   오너 원문: *"토스트(알림)가 메뉴·카드와 겹친다 → 화면 위쪽 30~40% 높이의 눈에 띄는 자리에 띄운다(도크·상단 바와 안 겹치게)."*
 *   ⚠️ **표식이 있는 것만** 자리가 다르다(`data-scope="canvas"` — toast.js 의 `scope`, 영상탭 캔버스 화면에서만 붙는다).
 *      다른 탭·목록 화면의 알림은 위의 가운데 아래 규칙 그대로다 — 이 라운드는 영상탭만 건드린다.
 *   ⚠️ 세로 자리는 JS 가 잰다(`toastStack.canvasBandTop` → `--t-top`) — 상단 바·도크·열린 메뉴 사각형을 16px 넓혀 피한 값이다.
 *      CSS 는 그 값을 받기만 한다(겹침 판정을 두 곳에 두지 않는다).
 *   ⚠️ 위 규칙들은 `--t-y`(위로 쌓는 offset)와 `--t-s`(뒤 카드 축소)를 transform 에 싣는다 — 여기서는 **쓰지 않는다**:
 *      아래로 쌓고 크기도 같으니 그 둘이 끼면 카드가 제자리에서 어긋난다. transform 을 통째로 다시 적는 이유다.
 *   ⚠️ `[data-scope]` 가 붙어 특이도가 한 단 높다 — 위의 모바일 예외(`max-width: 810px` 의 bottom)보다 세서 순서와 무관하게 이긴다. */
:is(body.shell-v2, body:has(.signin-gate)) .app-toast.app-toast--stacked[data-scope="canvas"] {
  top: var(--t-top, 35dvh);
  bottom: auto;
  max-width: min(480px, calc(100vw - 32px));
  transform-origin: top center;
  transform: translate3d(-50%, var(--t-enter, 0px), 0);
  opacity: var(--t-o, 1);
  /* 등장 180ms · 퇴장 160ms(아래 exit 가 덮는다) — 위 더미의 420ms 스프링은 아래에서 올라오는 카드의 곡선이다 */
  transition: transform 180ms cubic-bezier(0.32, 0.72, 0, 1), opacity 180ms ease;
}
/* 위에서 6px 내려오며 들어온다(아래에서 올라오지 않는다 — 여기는 화면 위쪽이다) */
:is(body.shell-v2, body:has(.signin-gate)) .app-toast.app-toast--stacked[data-scope="canvas"][data-state="enter"] { --t-enter: -6px; opacity: 0; }
:is(body.shell-v2, body:has(.signin-gate)) .app-toast.app-toast--stacked[data-scope="canvas"][data-state="exit"] {
  --t-enter: -4px; opacity: 0; pointer-events: none;
  transition: transform 160ms cubic-bezier(0.4, 0, 1, 1), opacity 160ms ease;
}
/* 줄 선 알림(넷째부터) — 자리를 잡을 때까지 화면에도 접근성 트리에도 없다 */
:is(body.shell-v2, body:has(.signin-gate)) .app-toast.app-toast--stacked[data-scope="canvas"][data-queued] { opacity: 0; pointer-events: none; }
/* 캔버스 알림은 겹쳐 쌓지 않는다 — 셋이 각자 온전한 카드로 아래로 선다(접기·펼치기가 없다) */
:is(body.shell-v2, body:has(.signin-gate)) .app-toast.app-toast--stacked[data-scope="canvas"][data-behind] { width: auto; height: auto; overflow: visible; pointer-events: auto; }
:is(body.shell-v2, body:has(.signin-gate)) .app-toast.app-toast--stacked[data-scope="canvas"][data-behind] > * { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  :is(body.shell-v2, body:has(.signin-gate)) .app-toast.app-toast--stacked[data-scope="canvas"],
  :is(body.shell-v2, body:has(.signin-gate)) .app-toast.app-toast--stacked[data-scope="canvas"][data-state="exit"] { transition: none; }
}