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

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

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

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

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

apps/site/design.md

@@ -246,6 +246,19 @@ WebGL 게이트: `prefers-reduced-motion` 이면 **아예 시작하지 않는다
 | 사례 | `drift` 0.4 | 두 결과물이 흐르는 자리라 배경도 같이 흐른다 |
 | 조판 | `drift` 0.25 | **종이는 손에 닿는 거리다.** 원경으로 두면 거짓말이 된다 |
 
+### 유리 테두리는 conic 이 아니라 linear 로 돈다
+
+헤더의 헤어라인이 **변마다 끊겨** 보였다. `conic-gradient` 로 만들었기 때문이다.
+conic 은 중심에서 각도로 도는데, 1180×54 처럼 납작한 형태에서는 각도가 급변해서
+긴 변에서 색이 거의 안 변하고 짧은 변에서 한꺼번에 바뀐다. 실제로 아래쪽만 절반 밝았다.
+
+`linear-gradient(100deg, …)` 로 바꾸면 네 변이 같은 그라디언트를 공유해
+**테두리를 따라 이어진다.** 마스크로 1px 만 남기는 구조는 그대로다.
+
+그리고 아주 얕은 글로우를 얹었다 — `0 0 22px -8px` 에 강조색을 42% 섞었다.
+유리가 차갑게만 보이지 않게 하는 정도이고, 밝은 밴드에서는 흰빛 대신
+그림자로 뒤집는다(`--glass-rim`·`--glass-bloom` 을 `.band-inverse` 에서 재정의).
+
 ### three.js 씬 셋은 서로 다른 것이어야 한다
 
 게이트 씬을 파이프라인으로 옮기면서 히어로에도 그대로 남겨뒀더니

apps/site/src/styles/base.css

@@ -228,7 +228,7 @@ a:hover { color: var(--accent); }
   background: var(--glass-tint);
   border: 1px solid var(--glass-edge);
   border-radius: var(--radius-frame);
-  box-shadow: var(--glass-hi), var(--shadow-2);
+  box-shadow: var(--glass-hi), var(--glass-bloom), var(--shadow-2);
   backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
   -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
 }

apps/site/src/styles/tokens.css

@@ -65,14 +65,19 @@
     rgb(255 255 255 / 0.02) 22%,
     transparent 55%
   );
-  --glass-rim: conic-gradient(
+  /* 테두리 광.
-    from 210deg,
+     conic-gradient 를 쓰면 납작한 형태(예: 1180x54 헤더)에서 각도가 급변해
-    rgb(255 255 255 / 0.32),
+     변마다 광이 뚝 끊긴다 — 실제로 헤더 아래쪽만 절반 밝았다.
-    transparent 22%,
+     선형으로 바꾸면 네 변이 같은 그라디언트를 공유해 테두리를 따라 이어진다. */
-    transparent 58%,
+  --glass-rim: linear-gradient(
-    rgb(255 255 255 / 0.20) 74%,
+    100deg,
-    transparent 92%
+    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%
   );
+  /* 테두리에서 아주 얕게 번지는 빛. 강조색을 실어 유리가 차갑게만 보이지 않게 한다 */
+  --glass-bloom: 0 0 22px -8px color-mix(in oklab, var(--accent) 42%, transparent);
   --core-hi: inset 0 1px 0 rgb(255 255 255 / 0.06);
 
   --shadow-1: 0 1px 2px rgb(0 0 0 / 0.5);
@@ -236,6 +241,15 @@
   --glass-edge:   rgb(20 24 30 / 0.12);
   --glass-hi:     inset 0 1px 0 rgb(255 255 255 / 0.8);
   --inset-hi:     var(--glass-hi);
+  /* 밝은 밴드에서는 테두리 광의 방향이 뒤집힌다. 흰빛 대신 그림자로 이어붙인다 */
+  --glass-rim: linear-gradient(
+    100deg,
+    rgb(20 24 30 / 0.16) 0%,
+    rgb(20 24 30 / 0.05) 26%,
+    rgb(20 24 30 / 0.04) 58%,
+    rgb(20 24 30 / 0.14) 100%
+  );
+  --glass-bloom: 0 0 18px -10px color-mix(in oklab, var(--ink) 30%, transparent);
   background: var(--surface);
   color: var(--ink);
 }

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** 를 써서 형태 밖으로 새지 않게 한다.
+밝은 배경에서는 흰빛 대신 그림자로 뒤집어야 같은 인상이 난다.