/* Liquid Glass 층 ③ G2 오버레이 — 토큰은 liquid-glass-tokens.css. 분석 정본은 docs/design/DESIGN-apple-liquid-glass-2026-09-16.md.
 *   G2 = 콘텐츠 위에 뜨는 것(모달·⌘K·드로어·메뉴·팝오버·토스트·툴팁). Apple 글라스의 본령이고 대부분 한 번에 1~2개만 열린다.
 *   thick 틴트 + 같은 블러(재질 5단이 블러를 공유한다는 Apple 실측 그대로) + 반사광·광연·드롭.
 *
 *   ⚠️ 선택자를 :is() 로 묶지 않는다 — #cm-overlay 가 목록에 섞이면 :is 가 전부를 ID 특이도로 올려 ≤810 시트 규칙까지 이긴다.
 *   ⚠️ 스크림에는 블러를 걸지 않는다 — 전체 화면 블러 위에 패널 블러를 또 얹으면 같은 면적을 두 번 거른다.
 *      Apple 도 같은 말을 한다: "always avoid glass on glass"(WWDC25 219). 대비는 어둡기로 충분하다. */

/* ── 스크림 ──
 * 🔴 등장 모션 rise(opacity+transform)의 fill 'both' 가 끝난 뒤에도 항등 transform 을 붙잡아 스크림을 backdrop root 로 남긴다.
 *    그러면 안쪽 패널의 블러가 배경이 아니라 스크림만 샘플해 뒤 글자가 또렷이 비친다(2026-09-15 ⌘K 실측, 콘솔 에러 0건).
 *    끝나면 풀리게 fill 을 backwards 로 — 이 한 줄이 이 층에서 가장 조용한 함정이다. */
body.shell-v2 .gs-overlay,
body.shell-v2 .fb-overlay,
body.shell-v2 .gd-overlay,
body.shell-v2 #cm-overlay,
body.shell-v2 .sm-overlay,
body.shell-v2 .kp-overlay,
body.shell-v2 .ep-drawer-backdrop,
body.shell-v2 .podcast-modal-backdrop {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  animation-fill-mode: backwards;
}

/* ── 패널 · 드로어 · 메뉴 · 토스트 ── */
body.shell-v2 .gs-panel,
body.shell-v2 .fb-panel,
body.shell-v2 .gd-panel,
body.shell-v2 .audio-gen-modal,
body.shell-v2 .podcast-modal .podcast-player,
body.shell-v2 .sm-panel,
body.shell-v2 #cm-overlay .sm-panel,
body.shell-v2 .sm-panel:is(.vlab-char-panel-modal, .vlab-dsheet-panel, .vlab-fill-panel, .vlab-gal, .vlab-img-panel, .vlab-imp-panel, .vlab-import, .vlab-lib-lightbox-panel, .vlab-new-panel),
body.shell-v2 .kp-panel,
body.shell-v2 dialog.tray,
body.shell-v2 .trend-wechat-drawer.ep-drawer,
body.shell-v2 .trend-insight-drawer.ep-drawer,
body.shell-v2 .adintel-creative-drawer.ep-drawer,
body.shell-v2 .trend-rank-menu,
body.shell-v2 .acct-menu,
body.shell-v2 .vlab-menu,
body.shell-v2 .feed-react-picker,
body.shell-v2 .feed-page-wrap .feed-react-picker,
body.shell-v2 .trend-rank-detail,
body.shell-v2 .vlab-keyhelp,
body.shell-v2 .vlab-guide-card {
  background: var(--lg-sheen), var(--lg-tint-thick);
  -webkit-backdrop-filter: var(--lg-filter);
  backdrop-filter: var(--lg-filter);
  box-shadow: var(--lg-shadow-float);
}

/* 모달 패널 윤곽 — 서랍과 같은 --lg-edge-overlay(.30). 스크림으로 어두워진 배경 위에서 .18 은 윤곽이 사라졌다(2026-09-18 오너 신고).
 * Apple 도 큰 글라스일수록 드롭을 키운다(Medium/Large 실측 0 18px 48px / .45 vs Small 0 8px 15px / .04).
 * 🔴 framer.css ⑦ 의 [role=dialog] 기본 그림자가 전엔 (0,3,1) 로 이 규칙(0,2,1)을 이겨 윤곽이 0.5px 위쪽선만 남았다 —
 *    그쪽을 :where() 로 낮췄다. 다시 올리면 이 규칙이 조용히 죽는다(스테이징 실측 2026-09-18). */
body.shell-v2 .gs-panel,
body.shell-v2 .fb-panel,
body.shell-v2 .gd-panel,
body.shell-v2 .audio-gen-modal,
body.shell-v2 .podcast-modal .podcast-player,
body.shell-v2 .sm-panel,
body.shell-v2 #cm-overlay .sm-panel,
body.shell-v2 .sm-panel:is(.vlab-char-panel-modal, .vlab-dsheet-panel, .vlab-fill-panel, .vlab-gal, .vlab-img-panel, .vlab-imp-panel, .vlab-import, .vlab-lib-lightbox-panel, .vlab-new-panel),
body.shell-v2 .kp-panel {
  box-shadow: var(--lg-specular), inset 0 0 0 1px var(--lg-edge-overlay), var(--lg-drop-2);
}

/* 🔴 스크림이 깔리는 모달 패널만 Apple UltraThick(.50) 그대로 — 위 공통 규칙의 thick 을 덮는다.
 *    스크림(.gs-overlay 등 canvas 48%, chrome-overlays.css)이 이미 배경을 눌러 두므로
 *    패널까지 .70 을 쓰면 유효 불투명도가 ~0.88 이 되어 유리가 검정 판이 된다(2026-09-16 로컬 실측).
 *    메뉴·토스트·툴팁·트렌드 드로어는 스크림이 없으므로 thick 유지 — 배경이 다르면 필요한 틴트도 다르다.
 *    🔴 라이브러리 시트·트레이는 스크림(canvas 48%)이 깔린다 — thick 을 주면 유효 불투명도 ≈.84 로 '검정 판'이 된다
 *       (2026-09-18 오너 "리퀴드 글라스가 아닌 듯" — 필터는 살아 있었고 틴트가 유리를 가렸다). 대비: 133×.52×.5≈35 위 #adadad ≈ 7:1. */
body.shell-v2 .gs-panel,
body.shell-v2 .fb-panel,
body.shell-v2 .gd-panel,
body.shell-v2 .audio-gen-modal,
body.shell-v2 .podcast-modal .podcast-player,
body.shell-v2 .sm-panel,
body.shell-v2 #cm-overlay .sm-panel,
body.shell-v2 .sm-panel:is(.vlab-char-panel-modal, .vlab-dsheet-panel, .vlab-fill-panel, .vlab-gal, .vlab-img-panel, .vlab-imp-panel, .vlab-import, .vlab-lib-lightbox-panel, .vlab-new-panel),
body.shell-v2 .kp-panel,
body.shell-v2 dialog.tray,
body.shell-v2 .lib-wrap.lib-has-sel .lib-inspector {
  background: var(--lg-sheen), var(--lg-tint-overlay);
}

/* 호버 툴팁 — 알약 크기라 Apple Small 레시피 쪽(반사광 있음) */
body.shell-v2 .hovertip {
  background: var(--lg-tint-thick);
  -webkit-backdrop-filter: var(--lg-filter);
  backdrop-filter: var(--lg-filter);
  box-shadow: var(--lg-specular-pill), var(--lg-rim), var(--lg-drop-1);
}

/* 캐러셀 화살표 — 이미지 위에 뜨는 원형 컨트롤.
 * 🔴 `body.shell-v2 .btn.cf-nav` 는 framer.css 의 `body.shell-v2 .btn:focus-visible` 과 특이도가 같다(0,3,1) —
 *    이 파일이 뒤에 로드되므로 box-shadow 를 그냥 주면 포커스 링이 사라진다. 그래서 링을 여기서 다시 적는다. */
body.shell-v2 .btn.cf-nav {
  background: var(--lg-tint-regular);
  -webkit-backdrop-filter: var(--lg-filter);
  backdrop-filter: var(--lg-filter);
  box-shadow: var(--lg-specular-pill), var(--lg-rim);
}
body.shell-v2 .btn.cf-nav:focus-visible {
  outline: none;
  box-shadow: var(--lg-rim), var(--ring-focus);
}

/* 알림 패널(데스크톱) — 블러 사이드바 안(absolute)이라 블러가 샘플할 게 없다. 틴트만.
 * 이것이 "글라스 안에 글라스"의 실제 모습이다 — 걸어도 안 보이고 비용만 든다. */
body.shell-v2 .feed-notif-panel {
  background: var(--lg-sheen), var(--lg-tint-thick);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: var(--lg-shadow-float);
}

/* 오버레이 안 — 표면 단을 알파로 · 보조 글자 한 단 올림 */
body.shell-v2 :is(.gs-panel, .fb-panel, .gd-panel, .audio-gen-modal, .sm-panel, .kp-panel, .ep-drawer, .trend-rank-menu, .acct-menu, .vlab-menu, .feed-react-picker, .trend-rank-detail, .vlab-keyhelp, .feed-notif-panel, .app-toast, .tray, .lib-inspector) {
  --ink-48: var(--lg-ink-48);
}
body.shell-v2 :is(.gs-panel, .fb-panel, .gd-panel, .audio-gen-modal, .sm-panel, .kp-panel, .ep-drawer, .trend-rank-menu, .acct-menu, .vlab-menu, .feed-react-picker, .trend-rank-detail, .vlab-keyhelp, .feed-notif-panel, .app-toast, .tray, .lib-inspector) * {
  --surface-1: var(--lg-fill-1);
  --surface-2: var(--lg-fill-2);
  --surface-3: var(--lg-fill-3);
  /* 구분선도 알파로 — 불투명 헤어라인은 글라스 위에서 사라진다(토큰 주석 --lg-divider). 틴트를 덮는 불투명 조각(예: 옛 라이브러리 시트 발)도 두지 않는다. */
  --hairline: var(--lg-divider);
  --hairline-soft: var(--lg-divider-soft);
}
/* ⛔️ 여기 있던 `:is(input, textarea, select) { background-color: var(--lg-input-fill) }` 는 2026-09-21 에 걷었다.
 *   그 규칙만 이 층에서 유일하게 **아래로**(검정 35%) 갔고, 테두리가 없어 패널(#141414) 위 필드가 #0d0d0d 로 앉아 영역이 안 읽혔다
 *   (오너 "모든 인풋 필드가 이런 디자인이면 영역 인식이 안돼"). 이제 framer.css ③ 의 --field-fill/--field-edge 가 오버레이 안에서도
 *   그대로 한 단 위로 올라간다 — 위 --lg-fill-1/2/3 사다리와 같은 방향이다. 다시 어둡게 만들고 싶으면 **테두리를 함께** 줄 것. */

/* 두 서랍 — 라이브러리 시트(우측 · ≤810 바텀) · 트레이(web/ui/tray.js). 같은 재질 한 덩이로 묶는다(한쪽만 바뀌지 않게).
 *   틴트는 위 '스크림이 깔리는 패널' 규칙이 --lg-tint-overlay 로 소유한다. 광연은 모달과 같이 한 단 밝게. */
body.shell-v2 .lib-wrap.lib-has-sel .lib-inspector,
body.shell-v2 dialog.tray {
  -webkit-backdrop-filter: var(--lg-filter);
  backdrop-filter: var(--lg-filter);
  box-shadow: var(--lg-specular), inset 0 0 0 1px var(--lg-edge-overlay), var(--lg-drop-2); /* 윤곽은 --lg-edge-overlay(토큰 주석) */
}

/* 옛 오른쪽 서랍(캐릭터 컨셉아트 · 스토리보드 재생성) — 딥링크(#/characters · #/storyboard)로 새 셸에서도 열린다.
 *   스크림(.ep-drawer-backdrop) 뒤에 뜨는 것만 고른다. 회차 스튜디오 드로어(#episodesView)는 스크림 없는 인라인 칸이라 제외.
 *   전엔 불투명 #090909 · 윤곽 없음이라 스크림과 한 덩이로 보였다(2026-09-18 모달 전수 실측). */
body.shell-v2 .ep-drawer-backdrop + .ep-drawer:not(#episodesView *) {
  background: var(--lg-sheen), var(--lg-tint-overlay);
  border: 0;
  -webkit-backdrop-filter: var(--lg-filter);
  backdrop-filter: var(--lg-filter);
  box-shadow: var(--lg-specular), inset 0 0 0 1px var(--lg-edge-overlay), var(--lg-drop-2);
}