유리 테두리를 conic 에서 linear 로 바꿔 이어지게 한다

헤더 헤어라인이 변마다 끊겨 보였다. conic-gradient 는 중심에서 각도로
도는데, 1180x54 처럼 납작한 형태에서는 각도가 급변해 긴 변에서 색이
거의 안 변하고 짧은 변에서 한꺼번에 바뀐다. 실제로 아래쪽만 절반 밝았다.

linear-gradient(100deg) 로 바꾸니 네 변이 같은 그라디언트를 공유해
테두리를 따라 이어진다. 마스크로 1px 만 남기는 구조는 그대로다.

얕은 글로우를 더했다 — 0 0 22px -8px 에 강조색 42%.
음수 spread 라 형태 밖으로 새지 않는다.
밝은 밴드에서는 흰빛 대신 그림자로 뒤집는다.

스킬 svg-filters.md 에 "유리 테두리를 그릴 때" 추가.
비율을 보고 conic/linear 를 고르라는 기준과 음수 spread 글로우.

packages/skill/references/svg-filters.md

@@ -367,3 +367,38 @@ if (reduceEffects()) document.documentElement.classList.add('reduce-effects');
 - [ ] Safari·모바일 실기기, CPU throttling 4×에서 확인했다
 
 > 근거: research/svg/01~03 (조사일 2026-08-20)
+
+---
+
+## 유리 테두리(헤어라인)를 그릴 때
+
+1px 테두리에 광을 흘리는 흔한 방법은 그라디언트를 깔고 마스크로 테두리만 남기는 것이다.
+
+```css
+.glass::after {
+  content: ""; position: absolute; inset: 0; padding: 1px;
+  border-radius: inherit;
+  background: var(--glass-rim);
+  mask: linear-gradient(black 0 0) content-box, linear-gradient(black 0 0);
+  mask-composite: exclude;   /* -webkit-mask-composite: xor */
+}
+```
+
+**`conic-gradient` 를 쓰지 마라.** 중심에서 각도로 돌기 때문에, 납작한 형태
+(내비게이션 바처럼 1180×54)에서는 **각도가 급변해 변마다 광이 끊긴다.**
+긴 변에서는 색이 거의 안 변하고 짧은 변에서 한꺼번에 바뀐다.
+
+```css
+/* 네 변이 같은 그라디언트를 공유한다 — 테두리를 따라 이어진다 */
+--glass-rim: linear-gradient(100deg,
+  rgb(255 255 255 / 0.34) 0%,
+  rgb(255 255 255 / 0.10) 26%,
+  rgb(255 255 255 / 0.06) 58%,
+  rgb(255 255 255 / 0.28) 100%);
+```
+
+정사각형에 가까운 카드라면 conic 도 자연스럽다. **비율을 보고 골라라.**
+
+글로우를 더한다면 테두리에서 얕게 번지는 정도로 충분하다 —
+`0 0 22px -8px` 처럼 **음수 spread** 를 써서 형태 밖으로 새지 않게 한다.
+밝은 배경에서는 흰빛 대신 그림자로 뒤집어야 같은 인상이 난다.