feat(ui): 카드 그라디언트 헤어라인 + 앰비언트 글로우 (레퍼런스 #5)

- glass.borderGradient: 좌상단 발광→우하단 소멸 1px 링 (mask exclude 기법 —
  반투명 글래스 표면에서도 정확)
- glow.card/cardHover: 블루 앰비언트 상단 글로우 + 깊이 그림자 결합
- sheen 재정의: 좌상단 라디얼 앰비언트 + 수직 시인 레이어
- 6개 테마 전부 액센트색 파생, MetalCard/InstrumentPanel/MuiCard 적용

packages/ui/src/components/ds/InstrumentPanel.tsx

@@ -30,20 +30,33 @@ export function InstrumentPanel({
         bgcolor: d3roPalette.glass.surface,
         backdropFilter: `blur(${d3roPalette.glass.blur})`,
         borderRadius: d3roRadius.outer,
-        border: `1px solid ${d3roPalette.glass.hairline}`,
         p: 3,
-        boxShadow: d3roShadow.card,
+        boxShadow: d3roShadow.glowCard,
         overflow: 'hidden',
-        // 앰비언트 액센트 글로우 (좌상단 은은한 빛)
+        // 앰비언트 시인 (좌상단 라디얼 + 상단 광택 — theme sheen 토큰)
         '&::before': {
           content: '""',
           position: 'absolute',
           inset: 0,
           borderRadius: 'inherit',
-          background: `radial-gradient(ellipse 60% 40% at 18% 0%, ${d3roPalette.accent.dim} 0%, transparent 60%)`,
+          background: d3roPalette.glass.sheen,
           pointerEvents: 'none',
           zIndex: 1,
         },
+        // 그라디언트 헤어라인 링
+        '&::after': {
+          content: '""',
+          position: 'absolute',
+          inset: 0,
+          borderRadius: 'inherit',
+          padding: '1px',
+          background: d3roPalette.glass.borderGradient,
+          WebkitMask: 'linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)',
+          WebkitMaskComposite: 'xor',
+          maskComposite: 'exclude',
+          pointerEvents: 'none',
+          zIndex: 2,
+        },
       }}
     >
       {/* 모서리 메타 라벨 */}

packages/ui/src/components/ds/MetalCard.tsx

@@ -1,8 +1,9 @@
 'use client'
 
-// packages/ui/src/components/ds/MetalCard.tssx
-// v2 "Midnight Glass": 글래스모피즘 카드 — 반투명 표면 + 옅은 헤어라인 + 상단 시인
-// 토큰 적용: d3roPalette.glass, d3roShadow, d3roRadius
+// packages/ui/src/components/ds/MetalCard.tsx
+// v2 "Midnight Glass": 글래스모피즘 카드 —
+// 그라디언트 헤어라인 보더(좌상단 발광 → 우하단 소멸) + 앰비언트 글로우 + 상단 시인.
+// 보더는 mask 링 기법(::after) — 반투명 표면 위에서도 정확한 1px 그라디언트 링.
 
 import { Box, type BoxProps } from '@mui/material'
 import { d3roPalette, d3roShadow, d3roRadius } from '../../theme'
@@ -26,12 +27,12 @@ export function MetalCard({
         bgcolor: inset ? d3roPalette.glass.raised : d3roPalette.glass.surface,
         backdropFilter: `blur(${d3roPalette.glass.blur})`,
         borderRadius: inset ? d3roRadius.inner : d3roRadius.card,
-        border: `1px solid ${d3roPalette.glass.hairline}`,
-        boxShadow: inset ? 'none' : d3roShadow.card,
+        border: inset ? `1px solid ${d3roPalette.glass.hairline}` : 'none',
+        boxShadow: inset ? 'none' : d3roShadow.glowCard,
         p: inset ? 2 : 3,
         overflow: 'hidden',
-        transition: 'border-color 0.2s ease',
-        // 상단 시인(광택) 오버레이
+        transition: 'box-shadow 0.25s ease',
+        // 상단 시인 + 앰비언트 라디얼 (theme sheen 토큰이 레이어 결합)
         '&::before': inset
           ? {}
           : {
@@ -42,7 +43,22 @@ export function MetalCard({
               background: d3roPalette.glass.sheen,
               pointerEvents: 'none',
             },
-        '&:hover': inset ? {} : { borderColor: d3roPalette.glass.hairlineStrong },
+        // 그라디언트 헤어라인 링 — padding 1px + mask exclude로 링만 남김
+        '&::after': inset
+          ? {}
+          : {
+              content: '""',
+              position: 'absolute',
+              inset: 0,
+              borderRadius: 'inherit',
+              padding: '1px',
+              background: d3roPalette.glass.borderGradient,
+              WebkitMask: 'linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)',
+              WebkitMaskComposite: 'xor',
+              maskComposite: 'exclude',
+              pointerEvents: 'none',
+            },
+        '&:hover': inset ? {} : { boxShadow: d3roShadow.glowCardHover },
         ...sx,
       }}
     >