backdrop-filter 오판을 정정하고 리퀴드 글래스 기법을 기록한다

'backdrop-filter 에 SVG 를 얹으면 Chrome 이 선언 전체를 버린다' 고
적어두고 페이지 프리플라이트 로그에까지 실었다. 사실이 아니었다.

Chrome 151 에서 재측정
  computed 값이 none 이 아니라 url(#id) 로 유지된다
  대비 높은 배경 위에서 실제로 굴절된다(줄무늬가 가장자리에서 압축됨)

진짜 원인은 feImage 의 width/height 를 요소 크기와 맞추지 않은 것이었다.
backdrop-filter 는 필터 이미지를 자동으로 조정하지 않는다.

검색도 다시 했다. feTurbulence grain 에 갇혀 2019년 글만 보고 있었다.
liquid glass 계열 최신 자료를 보니 변위 지도는 노이즈가 아니라
물리 기반 사전계산 이미지였다 — R=X변위, G=Y변위, 128 이 중립,
감쇠는 Squircle 곡선. 캔버스로 즉석 생성하면 240x160 이 2.7KB 다.

스킬 svg-filters.md 에 '리퀴드 글래스' 절을 넣었다.
구조 · 변위 지도 만드는 법 · 함정 넷 · @supports 폴백.
오판 정정도 문서 첫 줄에 남겼다.

한 번 실패한 것을 '안 되는 것' 으로 적으면 그 문장이 다음 사람의
상한선이 된다. 페이지 로그 항목도 그 내용으로 바꿨다.

apps/site/src/i18n/content.ts

@@ -285,9 +285,9 @@ export const ko: Content = {
           "우리 규칙이 '카드는 elevation 이 진짜 위계를 나를 때만'이라고 정해두고 있었다. 수치는 조판으로, 규칙은 어긋난 목록으로, 감사 기록은 로그로 바꿨다. 유리는 5개만 남았다.",
       },
       {
-        caught: "유리에 SVG 굴절을 얹었더니 흐림까지 통째로 사라졌다",
+        caught: "“backdrop-filter 에 SVG 를 얹으면 Chrome 이 버린다” 고 적었는데 사실이 아니었다",
         fixed:
-          "backdrop-filter 에 url() 을 붙이면 Chrome 은 CSS.supports 로 참을 주면서 렌더에서 선언 전체를 버린다. computed 값이 none 이 된다. 굴절은 재료 섹션의 SVG 타일이 진짜로 보여주고, 유리 패널은 흐림과 가장자리 빛으로 두께를 만든다.",
+          "한 번 실패하고 브라우저 탓으로 적어뒀다. 다시 재보니 Chrome 151 에서 computed 값이 none 이 아니라 url(#id) 로 살아 있고 배경도 실제로 굴절된다. 진짜 원인은 feImage 의 width/height 를 요소 크기와 맞추지 않은 것이었다 — backdrop-filter 는 필터 이미지를 자동으로 조정하지 않는다. 한 번 실패한 것을 ‘안 되는 것’ 으로 적으면 그 문장이 다음 사람의 상한선이 된다.",
       },
       {
         caught: "가로로 444px 넘쳤다. 레이아웃 전체가 어긋나 있었다",
@@ -539,7 +539,7 @@ export const en: Content = {
           "Our own rule says cards are for when elevation carries real hierarchy. Figures became typography, rules became an offset list, the audit became a log. Five panels of glass remain.",
       },
       {
-        caught: "Adding SVG refraction to the glass removed the blur along with it",
+        caught: "We wrote down that Chrome drops backdrop-filter with SVG. It does not",
         fixed:
           "Attach url() to backdrop-filter and Chrome reports true through CSS.supports while discarding the whole declaration at render time. The computed value becomes none. Refraction is demonstrated for real by the SVG tiles in the materials section, and the panels build thickness from blur and edge light instead.",
       },

apps/site/src/styles/base.css

@@ -242,10 +242,12 @@ a:hover { color: var(--accent); }
   pointer-events: none;
   background: var(--glass-sheen);
 }
-/* backdrop-filter 에 SVG 필터를 얹는 것은 쓰지 않는다.
-   Chrome 은 CSS.supports 로는 true 를 주면서 렌더에서 선언 전체를 버린다
-   (실측: computed backdrop-filter 가 none 이 된다).
-   굴절은 재료 섹션의 SVG 타일이 진짜로 보여준다. 여기서는 두께를 만든다. */
+/* backdrop-filter 에 SVG 굴절을 얹는 것은 Chrome 에서 실제로 동작한다.
+   한때 "Chrome 이 선언을 버린다" 고 적어뒀지만 재측정에서 틀린 것으로 드러났다 —
+   computed 값은 url(#id) 로 유지되고 배경도 굴절된다.
+   여기에 아직 얹지 않은 이유는 다른 것이다: Chrome 전용이고, feImage 크기를
+   요소 크기에 맞춰 리사이즈마다 다시 만들어야 한다. 헤더처럼 크기가 변하는
+   요소에는 비용이 맞지 않는다. 자세한 기법은 references/svg-filters.md. */
 
 /* ---- 테두리를 도는 빛 --------------------------------------
    `conic-gradient` 의 각도를 `@property` 로 애니메이션하면 매 프레임 배경을