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/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` 로 애니메이션하면 매 프레임 배경을