/* Liquid Glass 층 ① 재질 토큰 · 접근성 폴백 — 분석 정본은 docs/design/DESIGN-apple-liquid-glass-2026-09-16.md.
 *   세 파일(tokens → chrome → overlays)이 v2 전 파일 뒤에 온다 — 같은 특이도는 순서로 이긴다.
 *   되돌리기 = index.html 세 줄 삭제. 시각 정본(팔레트·글꼴·흰 알약 CTA)은 DESIGN.md(Framer 다크) 그대로다.
 *
 *   ⚠️ 티어는 둘뿐이다 — G1 크롬(콘텐츠가 밑으로 지나가는 바·패널) · G2 오버레이(콘텐츠 위에 뜨는 것).
 *   🔴 카드·행·문서·표·영상 노드에는 재질을 쓰지 않는다. Apple HIG 가 금지문으로 못박는다:
 *      "Don't use Liquid Glass in the content layer... Instead, use Standard materials for elements in the content layer."
 *      2026-09-15 판에 있던 T3(카드 틴트)가 정확히 그 위반이라 이번엔 파일 자체를 만들지 않았다.
 *   🔴 한 표면에 글라스는 정확히 한 겹이다("always avoid glass on glass" — WWDC25 219).
 *      블러 요소는 backdrop root 라 그 안의 블러는 배경을 못 보고 조용히 평면이 된다 — 안쪽은 --lg-fill-* 알파 채움만.
 *   ⚠️ --glass-* 이름을 정의하지 않는다 — videolab.css 60여 규칙이 그 이름을 폴백으로 읽어 영상 탭이 한꺼번에 바뀐다.
 *   ⚠️ fixed 자식을 품는 래퍼(.lib-wrap · .sidebar-actions · .pshell-center)에 블러를 걸지 않는다 — 포함 블록이 되어 시트가 갇힌다. */

body.shell-v2 {
  /* ── 블러: 단일값 ──
   *   🔴 Apple 실측(macOS 27 UI Kit): 재질 5단(Ultra Thin~Ultra Thick)이 같은 블러를 **전부 똑같이** 쓴다.
   *      Figma 패널은 흐림 반경 60 으로 표시하지만 같은 노드의 MCP CSS 산출은 backdrop-blur-[30px] 이다 — 계수는 2배다.
   *      두께를 만드는 건 블러가 아니라 틴트 불투명도다. 웹의 글라스모피즘 관행(블러를 키워 두께 표현)과 반대다.
   *   ⚠️ 30px 은 Apple 실측값이지 이 배경에서 검증된 값이 아니다 — Apple 은 정지한 벽지 위를, 우리는 움직이는 우주 위를 덮는다.
   *      스테이징에서 육안 대조 후 확정한다(= calibration knob). 페인트 비용도 같이 잰다. */
  --lg-blur: 30px;
  --lg-sat: 150%;
  --lg-filter: blur(var(--lg-blur)) saturate(var(--lg-sat));

  /* ── 틴트: 검정 기반 ──
   *   🔴 Apple 다크 재질의 틴트는 흰 알파가 아니라 검정이다(실측 #000 @ 10/20/29/40/50%) —
   *      어두운 배경 위에서 재질은 배경을 밝히지 않고 가라앉힌다.
   *   ⚠️ 단 우리 배경은 정적 벽지가 아니라 움직이는 우주다(cosmosBeams 채널 최대 ≈133/255, 가장자리가 가장 밝다).
   *      Apple 의 10~29% 단은 이 배경 위에서 글자가 흔들려 못 쓴다. 그래서 Thick(40%) 언저리부터 시작해 위로 넓혔다.
   *   🔴 **thick 과 overlay 를 나눈 이유(2026-09-16 로컬 실측)**: 한 토큰으로 묶었더니 모달이 검정 판이 됐다 —
   *      패널 .80 아래에 스크림 .6 이 이미 깔려 유효 불투명도가 ~0.92 라 유리 성격이 사라진다.
   *      배경이 다르면 필요한 틴트도 다르다. --lg-ink-48 대비 실측(배경 최악값 133):
   *        스크림 없음(.wiz-composer·.ep-drawer-foot): .50 → 4.48:1 **미달** · .60 → 5.47 · .70 → 6.57
   *        스크림 있음(.gs-panel 등, 스크림 .6 이 먼저):          .50 → 7.76:1 **여유** · .80 → 8.77(과잉)
   *      즉 모달의 .80 은 가독성 이득 없이 유리만 죽인다. 모달은 Apple UltraThick(.50) 그대로 쓰고,
   *      스크림 없는 바만 .70 으로 남긴다. 두 값 다 가드가 계산으로 잠근다.
   *   🔴 thin 이 .40 이 아니라 .52 인 이유: 배경 최악값(133) 위에 검정 40% 를 합성하면 표면이 (80,80,80) 이고
   *      그 위 --lg-ink-48(#adadad)의 대비가 3.59:1 로 AA(4.5:1) 미달이다. .51 부터 통과해 여유를 둬 .52 로 잡았다.
   *      HIG 가 예고한 그 조합이다 — "avoid using quaternary on top of the thin and ultraThin materials,
   *      because the contrast is too low." 대안(글자를 #c2c2c2 로 밝히기)은 --ink-80(#ccc)과 붙어 계층이 무너져 안 썼다.
   *      이 하한은 liquidGlassLayer.test.mjs 가 계산으로 잠근다. */
  --lg-tint-thin: rgba(0, 0, 0, 0.52);     /* 🔴 .40 이 아니다 — 아래 계산 참고 */
  --lg-tint-regular: rgba(0, 0, 0, 0.62);
  --lg-tint-thick: rgba(0, 0, 0, 0.70);   /* 본문 위에 바로 붙는 바(스크림 없음) */
  --lg-tint-overlay: rgba(0, 0, 0, 0.50); /* 스크림 위에 뜨는 모달 패널 — Apple Ultra Thick 실측값 그대로 */

  /* ── 빛 ──
   *   Apple 의 Liquid Glass Small(48px 알약) 실측은 0.5px 테두리 + 위/아래 안쪽 그림자 + 위쪽 반사광 + 드롭이다.
   *   ⚠️ 그 inset 값(-40px 스프레드)은 48px 짜리 알약 기준이라 240px 사이드바에 그대로 못 옮긴다 —
   *      큰 면은 1px 반사광으로, 알약 크기 컨트롤만 Apple 레시피에 가깝게 간다(--lg-specular-pill). */
  --lg-edge: rgba(255, 255, 255, 0.10);
  --lg-edge-hover: rgba(255, 255, 255, 0.18);
  /* 스크림 위에 뜨는 것(모달·⌘K·피드백·트레이·라이브러리 시트) 윤곽 — 스크림으로 가라앉은 검은 배경 위에 거의 같은 검정 패널이 뜨므로
   *   .18 로는 윤곽이 사라진다(2026-09-18 오너 "윤곽선이 안 보여, 배경이랑 구분이 안 돼" · 실측: 패널 안 #121212 · 밖 #0c0c0c).
   *   서랍에 먼저 걸었고 같은 날 모달에도 같은 신고가 와 한 토큰으로 묶었다 — 한쪽만 밝으면 다시 갈린다. */
  --lg-edge-overlay: rgba(255, 255, 255, 0.30);
  --lg-specular: inset 0 1px 0 rgba(255, 255, 255, 0.14), inset 0 -1px 0 rgba(255, 255, 255, 0.03);
  --lg-specular-pill: inset 0 12px 6px -12px rgba(0, 0, 0, 0.5), inset 0 12px 10px -12px rgba(255, 255, 255, 0.12);
  --lg-rim: inset 0 0 0 1px var(--lg-edge);
  --lg-rim-hover: inset 0 0 0 1px var(--lg-edge-hover);
  --lg-drop-1: 0 4px 16px rgba(0, 0, 0, 0.22);
  --lg-drop-2: 0 12px 40px rgba(0, 0, 0, 0.38);
  --lg-shadow-chrome: var(--lg-specular);
  --lg-shadow-float: var(--lg-specular), var(--lg-rim-hover), var(--lg-drop-2);
  --lg-sheen: linear-gradient(180deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0) 42%);
  /* 글라스 안 구분선 — 불투명 헤어라인(--hairline #262626 · --hairline-soft #1a1a1a)은 스크림 위 글라스(유효 ≈#101010)에서 사라진다.
   *   2026-09-19 오너 "드로어 하단 영역 테두리가 안 보인다" — 라이브러리 시트 발·속성 줄, 광고 인텔·인사이트 트레이 구분선이 전부 그 값이었다.
   *   liquid-glass-overlays.css 가 오버레이 안에서 --hairline* 을 이 둘로 갈아 끼운다(표면 단 --surface-* 와 같은 방식).
   */
  --lg-divider: rgba(255, 255, 255, 0.10);
  --lg-divider-soft: rgba(255, 255, 255, 0.07);

  /* ── 글라스 안의 표면 단 — 불투명 조각이 뜨지 않게 알파로 ──
   *   Apple Fills 계층(실측 다크 #FFF @ 10/8/5/3/2%)과 같은 발상이고, 눈금만 우리 것이다. */
  --lg-fill-1: rgba(255, 255, 255, 0.05);
  --lg-fill-2: rgba(255, 255, 255, 0.08);
  --lg-fill-3: rgba(255, 255, 255, 0.12);

  /* 컨트롤(글라스 라이트) — 보조 알약·세그먼트 트랙. 부모 글라스 안이라 블러를 또 걸지 않는다 */
  --lg-control: rgba(255, 255, 255, 0.07);
  --lg-control-hover: rgba(255, 255, 255, 0.12);
  --lg-control-on: rgba(255, 255, 255, 0.16);

  /* 재질 위 보조 글자 — AA 4.5:1 하한.
   * 🔴 HIG: "avoid using quaternary on top of the thin and ultraThin materials, because the contrast is too low."
   *    우리 --ink-48(#999)이 그 quaternary 자리라 재질 위에서는 한 단 올린다. */
  --lg-ink-48: #adadad;
}

/* ── 접근성 폴백 4종 ──
 * Apple 은 이걸 시스템이 자동으로 해준다("These are available automatically whenever you use the new material." — WWDC25 219).
 * 웹에는 그런 게 없으므로 우리가 전부 적는다. */

/* ① 투명도 감소 — "makes Liquid Glass frostier and obscures more of the content behind it"(WWDC25 219).
 *    웹에서는 서리 대신 불투명으로 간다(블러를 키우면 비용만 오르고 가림은 덜하다).
 *    ⚠️ 이 쿼리는 Chromium 118+ 에만 있다 — Safari·Firefox 사용자는 못 받는다. 그래서 기본 상태부터 대비가 서 있어야 한다. */
@media (prefers-reduced-transparency: reduce) {
  body.shell-v2 {
    --lg-tint-thin: #0e0e0e; --lg-tint-regular: #0e0e0e; --lg-tint-thick: #141414; --lg-tint-overlay: #141414;
    --lg-filter: none;
    --lg-fill-1: #1a1a1a; --lg-fill-2: #202020; --lg-fill-3: #282828;
    --lg-control: #1c1c1c; --lg-control-hover: #242424; --lg-control-on: #2c2c2c;
    --lg-divider: #2c2c2c; --lg-divider-soft: #242424;
    --lg-sheen: linear-gradient(transparent, transparent);
    --lg-specular-pill: none;
  }
}

/* ② 대비 증가 — "makes elements predominantly black or white and highlights them with a contrasting border"(WWDC25 219).
 *    → 표면을 불투명하게 하고 테두리를 눈에 보이게 올린다. 2026-09-15 판에 빠져 있던 폴백이다. */
@media (prefers-contrast: more) {
  body.shell-v2 {
    --lg-tint-thin: #0a0a0a; --lg-tint-regular: #0a0a0a; --lg-tint-thick: #0a0a0a; --lg-tint-overlay: #0a0a0a;
    --lg-filter: none;
    --lg-edge: rgba(255, 255, 255, 0.55); --lg-edge-hover: rgba(255, 255, 255, 0.75); --lg-edge-overlay: rgba(255, 255, 255, 0.75);
    --lg-divider: rgba(255, 255, 255, 0.45); --lg-divider-soft: rgba(255, 255, 255, 0.35);
    --lg-specular: none; --lg-specular-pill: none;
    --lg-sheen: linear-gradient(transparent, transparent);
    --lg-ink-48: #d4d4d4;
  }
}

/* ③ backdrop-filter 미지원 — 블러 없는 틴트는 배경이 그대로 비쳐 글자가 흔들린다. 거의 불투명으로 떨어뜨린다. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  body.shell-v2 {
    --lg-tint-thin: rgba(0, 0, 0, 0.88);
    --lg-tint-regular: rgba(0, 0, 0, 0.92);
    --lg-tint-thick: rgba(0, 0, 0, 0.96);
    --lg-tint-overlay: rgba(0, 0, 0, 0.94);
  }
}

/* ④ 강제 색상(윈도 고대비) — 필터·광택을 끈다. 배경색은 UA 가 Canvas 로 강제한다. */
@media (forced-colors: active) {
  body.shell-v2 {
    --lg-filter: none;
    --lg-sheen: linear-gradient(transparent, transparent);
    --lg-specular: none; --lg-specular-pill: none;
  }
}