refactor: app.js를 ES6 모듈로 분리

## 변경사항
- app.js (1370줄) → 7개 모듈 (1427줄)
- ES6 import/export 문법 사용
- Alpine.js 호환성 유지 (window 전역 노출)

## 모듈 구조
- js/config.js: 상수/설정 (WIZARD_CONFIG, PRICING_DATA, MOCK_*)
- js/api.js: ApiService
- js/utils.js: formatPrice, switchTab, ping 시뮬레이션
- js/wizard.js: 서버 추천 마법사 로직
- js/pricing.js: 가격표 컴포넌트
- js/dashboard.js: 대시보드 및 텔레그램 연동
- js/app.js: 메인 통합 (모든 모듈 import)

## HTML 변경
- <script type="module" src="js/app.js">로 변경
- 기존 기능 모두 정상 작동

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

design-system/figma-tokens.json

@@ -0,0 +1,112 @@
+{
+  "global": {
+    "colors": {
+      "brand": {
+        "400": { "value": "#38bdf8" },
+        "500": { "value": "#0ea5e9" },
+        "600": { "value": "#0284c7" }
+      },
+      "purple": {
+        "400": { "value": "#c084fc" },
+        "500": { "value": "#a855f7" },
+        "600": { "value": "#9333ea" }
+      },
+      "dark": {
+        "700": { "value": "#334155" },
+        "800": { "value": "#1e293b" },
+        "900": { "value": "#0b1120" }
+      },
+      "slate": {
+        "200": { "value": "#e2e8f0" },
+        "300": { "value": "#cbd5e1" },
+        "400": { "value": "#94a3b8" },
+        "500": { "value": "#64748b" },
+        "700": { "value": "#334155" }
+      },
+      "success": { "value": "#22c55e" },
+      "warning": { "value": "#eab308" },
+      "error": { "value": "#ef4444" },
+      "info": { "value": "#3b82f6" }
+    },
+    "fontFamilies": {
+      "sans": { "value": "Apple SD Gothic Neo, Malgun Gothic, Noto Sans KR" },
+      "mono": { "value": "JetBrains Mono" }
+    },
+    "fontSizes": {
+      "xs": { "value": "12" },
+      "sm": { "value": "14" },
+      "base": { "value": "16" },
+      "lg": { "value": "18" },
+      "xl": { "value": "20" },
+      "2xl": { "value": "24" },
+      "3xl": { "value": "30" },
+      "4xl": { "value": "36" },
+      "5xl": { "value": "48" }
+    },
+    "fontWeights": {
+      "normal": { "value": "400" },
+      "medium": { "value": "500" },
+      "semibold": { "value": "600" },
+      "bold": { "value": "700" }
+    },
+    "lineHeights": {
+      "tight": { "value": "1.25" },
+      "normal": { "value": "1.5" },
+      "relaxed": { "value": "1.625" }
+    },
+    "spacing": {
+      "1": { "value": "4" },
+      "2": { "value": "8" },
+      "3": { "value": "12" },
+      "4": { "value": "16" },
+      "6": { "value": "24" },
+      "8": { "value": "32" },
+      "12": { "value": "48" },
+      "16": { "value": "64" },
+      "24": { "value": "96" }
+    },
+    "borderRadius": {
+      "sm": { "value": "4" },
+      "md": { "value": "6" },
+      "lg": { "value": "8" },
+      "xl": { "value": "12" },
+      "2xl": { "value": "16" },
+      "3xl": { "value": "24" }
+    },
+    "opacity": {
+      "5": { "value": "5%" },
+      "10": { "value": "10%" },
+      "20": { "value": "20%" },
+      "30": { "value": "30%" },
+      "50": { "value": "50%" },
+      "80": { "value": "80%" }
+    }
+  },
+  "semantic": {
+    "bg": {
+      "primary": { "value": "{colors.dark.900}" },
+      "secondary": { "value": "{colors.dark.800}" },
+      "card": { "value": "{colors.dark.800}" }
+    },
+    "text": {
+      "primary": { "value": "{colors.slate.200}" },
+      "secondary": { "value": "{colors.slate.300}" },
+      "muted": { "value": "{colors.slate.400}" },
+      "brand": { "value": "{colors.brand.400}" }
+    },
+    "border": {
+      "default": { "value": "{colors.slate.700}" },
+      "subtle": { "value": "rgba(255,255,255,0.05)" },
+      "brand": { "value": "{colors.brand.500}" }
+    },
+    "interactive": {
+      "primary": { "value": "{colors.brand.500}" },
+      "primaryHover": { "value": "{colors.brand.400}" },
+      "secondary": { "value": "{colors.purple.500}" }
+    }
+  },
+  "$themes": [],
+  "$metadata": {
+    "tokenSetOrder": ["global", "semantic"]
+  }
+}