refactor: 하드코딩 색상을 테마 CSS 변수로 전환

- tokens.css: select/highlight 상태 CSS 변수 추가 (dark/light)
- ListItem: 하드코딩 RGBA → CSS 변수 (--wing-select-*, --wing-highlight-*)
- Topbar StatChips: #hex → text-wing-success/accent/warning/danger
- Topbar 로고: inline cursor → Tailwind 조건부 클래스
- DashboardSidebar: #hex → var(--wing-*), inline style → Tailwind

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

apps/web/src/pages/dashboard/DashboardSidebar.tsx

@@ -163,8 +163,7 @@ export function DashboardSidebar({
               on={projection === 'globe'}
               onClick={isProjectionToggleDisabled ? undefined : () => setProjection((p) => (p === 'globe' ? 'mercator' : 'globe'))}
               title={isProjectionToggleDisabled ? '3D 모드 준비 중...' : '3D 지구본 투영'}
-              className="px-2 py-0.5 text-[9px]"
-              style={{ opacity: isProjectionToggleDisabled ? 0.4 : 1, cursor: isProjectionToggleDisabled ? 'not-allowed' : 'pointer' }}
+              className={`px-2 py-0.5 text-[9px]${isProjectionToggleDisabled ? " opacity-40 cursor-not-allowed" : ""}`}
             >
               3D
             </ToggleButton>
@@ -306,10 +305,10 @@ export function DashboardSidebar({
                 <div style={{ wordBreak: 'break-all' }}>{AIS_API_BASE}/api/ais-target/search</div>
                 <div style={{ marginTop: 6, color: 'var(--muted)', fontSize: 10 }}>상태</div>
                 <div>
-                  <b style={{ color: snapshot.status === 'ready' ? '#22C55E' : snapshot.status === 'error' ? '#EF4444' : '#F59E0B' }}>
+                  <b style={{ color: snapshot.status === 'ready' ? 'var(--wing-success)' : snapshot.status === 'error' ? 'var(--wing-danger)' : 'var(--wing-warning)' }}>
                     {snapshot.status.toUpperCase()}
                   </b>
-                  {snapshot.error ? <span style={{ marginLeft: 6, color: '#EF4444' }}>{snapshot.error}</span> : null}
+                  {snapshot.error ? <span style={{ marginLeft: 6, color: 'var(--wing-danger)' }}>{snapshot.error}</span> : null}
                 </div>
                 <div style={{ marginTop: 6, color: 'var(--muted)', fontSize: 10 }}>최근 fetch</div>
                 <div>
@@ -325,14 +324,14 @@ export function DashboardSidebar({
 
             <Section title="ADMIN · Legacy (CN Permit)" defaultOpen={false}>
               {legacyError ? (
-                <div style={{ fontSize: 11, color: '#EF4444' }}>legacy load error: {legacyError}</div>
+                <div style={{ fontSize: 11, color: 'var(--wing-danger)' }}>legacy load error: {legacyError}</div>
               ) : (
                 <div style={{ fontSize: 11, lineHeight: 1.45 }}>
                   <div style={{ color: 'var(--muted)', fontSize: 10 }}>데이터셋</div>
                   <div style={{ wordBreak: 'break-all', fontSize: 10 }}>/data/legacy/chinese-permitted.v1.json</div>
                   <div style={{ marginTop: 6, color: 'var(--muted)', fontSize: 10 }}>매칭(현재 scope)</div>
                   <div>
-                    <b style={{ color: '#F59E0B' }}>{legacyVesselsAll.length}</b>{' '}
+                    <b style={{ color: 'var(--wing-warning)' }}>{legacyVesselsAll.length}</b>{' '}
                     <span style={{ color: 'var(--muted)', fontSize: 10 }}>/ {targetsInScope.length}</span>
                   </div>
                   <div style={{ marginTop: 6, color: 'var(--muted)', fontSize: 10 }}>생성시각</div>
@@ -415,7 +414,7 @@ export function DashboardSidebar({
 
             <Section title="ADMIN · 수역 데이터" defaultOpen={false} className="max-h-[130px] overflow-y-auto">
               {zonesError ? (
-                <div style={{ fontSize: 11, color: '#EF4444' }}>zones load error: {zonesError}</div>
+                <div style={{ fontSize: 11, color: 'var(--wing-danger)' }}>zones load error: {zonesError}</div>
               ) : (
                 <div style={{ fontSize: 11, color: 'var(--muted)' }}>{zones ? `loaded (${zones.features.length} features)` : 'loading...'}</div>
               )}

apps/web/src/widgets/topbar/Topbar.tsx

@@ -24,16 +24,16 @@ function StatChips({ total, fishing, transit, pairLinks, alarms }: Pick<Props, "
         <b className="text-xs text-wing-text">{total}</b>척
       </div>
       <div className="flex items-center gap-1 text-[10px] text-wing-muted">
-        조업 <b style={{ color: "#22C55E" }}>{fishing}</b>
+        조업 <b className="text-wing-success">{fishing}</b>
       </div>
       <div className="flex items-center gap-1 text-[10px] text-wing-muted">
-        항해 <b style={{ color: "#3B82F6" }}>{transit}</b>
+        항해 <b className="text-wing-accent">{transit}</b>
       </div>
       <div className="flex items-center gap-1 text-[10px] text-wing-muted">
-        쌍연결 <b style={{ color: "#F59E0B" }}>{pairLinks}</b>
+        쌍연결 <b className="text-wing-warning">{pairLinks}</b>
       </div>
       <div className="flex items-center gap-1 text-[10px] text-wing-muted">
-        경고 <b style={{ color: "#EF4444" }}>{alarms}</b>
+        경고 <b className="text-wing-danger">{alarms}</b>
       </div>
     </>
   );
@@ -71,9 +71,8 @@ export function Topbar({ total, fishing, transit, pairLinks, alarms, clock, admi
 
         {/* 로고 */}
         <div
-          className="flex items-center gap-1.5 whitespace-nowrap text-sm font-extrabold"
+          className={`flex items-center gap-1.5 whitespace-nowrap text-sm font-extrabold${onLogoClick ? " cursor-pointer" : ""}`}
           onClick={onLogoClick}
-          style={{ cursor: onLogoClick ? "pointer" : undefined }}
           title={adminMode ? "ADMIN" : undefined}
         >
           <span className="text-wing-accent">WING</span>

packages/ui/src/components/ListItem.tsx

@@ -13,9 +13,9 @@ export function ListItem({ selected, highlighted, className, children, ...props
       className={cn(
         'flex cursor-pointer items-center gap-1.5 rounded px-1.5 py-1 text-[10px] transition-colors duration-100 select-none',
         'hover:bg-wing-card',
-        selected && 'bg-[rgba(14,234,255,0.16)] border-[rgba(14,234,255,0.55)]',
-        highlighted && !selected && 'bg-[rgba(245,158,11,0.16)] border border-[rgba(245,158,11,0.4)]',
-        selected && highlighted && 'bg-gradient-to-r from-[rgba(14,234,255,0.16)] to-[rgba(245,158,11,0.16)] border-[rgba(14,234,255,0.7)]',
+        selected && 'bg-[var(--wing-select-bg)] border-[var(--wing-select-border)]',
+        highlighted && !selected && 'bg-[var(--wing-highlight-bg)] border border-[var(--wing-highlight-border)]',
+        selected && highlighted && 'bg-gradient-to-r from-[var(--wing-select-bg)] to-[var(--wing-highlight-bg)] border-[var(--wing-select-border)]',
         className,
       )}
       {...props}

packages/ui/src/theme/tokens.css

@@ -18,6 +18,10 @@
   --wing-overlay: rgba(2, 6, 23, 0.42);
   --wing-card-alpha: rgba(30, 41, 59, 0.55);
   --wing-subtle: rgba(255, 255, 255, 0.03);
+  --wing-select-bg: rgba(14, 234, 255, 0.16);
+  --wing-select-border: rgba(14, 234, 255, 0.55);
+  --wing-highlight-bg: rgba(245, 158, 11, 0.16);
+  --wing-highlight-border: rgba(245, 158, 11, 0.4);
 
   /* Legacy aliases (backward compatibility) */
   --bg: var(--wing-bg);
@@ -48,6 +52,10 @@
   --wing-overlay: rgba(0, 0, 0, 0.25);
   --wing-card-alpha: rgba(226, 232, 240, 0.6);
   --wing-subtle: rgba(0, 0, 0, 0.03);
+  --wing-select-bg: rgba(14, 182, 210, 0.14);
+  --wing-select-border: rgba(14, 182, 210, 0.5);
+  --wing-highlight-bg: rgba(217, 119, 6, 0.14);
+  --wing-highlight-border: rgba(217, 119, 6, 0.4);
 
   --bg: var(--wing-bg);
   --panel: var(--wing-surface);