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

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

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

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

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

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,
-    rgb(255 255 255 / 0.32),
-    transparent 22%,
-    transparent 58%,
-    rgb(255 255 255 / 0.20) 74%,
-    transparent 92%
+  /* 테두리 광.
+     conic-gradient 를 쓰면 납작한 형태(예: 1180x54 헤더)에서 각도가 급변해
+     변마다 광이 뚝 끊긴다 — 실제로 헤더 아래쪽만 절반 밝았다.
+     선형으로 바꾸면 네 변이 같은 그라디언트를 공유해 테두리를 따라 이어진다. */
+  --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%
   );
+  /* 테두리에서 아주 얕게 번지는 빛. 강조색을 실어 유리가 차갑게만 보이지 않게 한다 */
+  --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);
 }