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/README.md

@@ -0,0 +1,230 @@
+# Anvil Hosting Design System
+
+Figma 라이브러리 구축을 위한 디자인 토큰 및 가이드입니다.
+
+## 📦 파일 구조
+
+```
+design-system/
+├── tokens.json          # 전체 디자인 토큰 (개발용)
+├── figma-tokens.json    # Figma Tokens 플러그인 호환 형식
+└── README.md            # 이 파일
+```
+
+## 🎨 색상 시스템
+
+### Brand Colors (Sky Blue)
+| Token | HEX | 용도 |
+|-------|-----|------|
+| `brand-400` | `#38bdf8` | Hover, 강조, 아이콘 |
+| `brand-500` | `#0ea5e9` | **Primary** - 버튼, 링크 |
+| `brand-600` | `#0284c7` | Pressed 상태 |
+
+### Purple (Secondary)
+| Token | HEX | 용도 |
+|-------|-----|------|
+| `purple-400` | `#c084fc` | 밝은 악센트 |
+| `purple-500` | `#a855f7` | 그라디언트 종점 |
+| `purple-600` | `#9333ea` | 어두운 악센트 |
+
+### Dark (Backgrounds)
+| Token | HEX | 용도 |
+|-------|-----|------|
+| `dark-900` | `#0b1120` | **페이지 배경** |
+| `dark-800` | `#1e293b` | 카드/패널 배경 |
+| `dark-700` | `#334155` | 테두리, 구분선 |
+
+### Semantic Colors
+| Token | HEX | 용도 |
+|-------|-----|------|
+| `success` | `#22c55e` | 성공, 활성 상태 |
+| `warning` | `#eab308` | 경고 |
+| `error` | `#ef4444` | 에러, 삭제 |
+| `info` | `#3b82f6` | 정보 |
+
+## 📝 타이포그래피
+
+### 폰트 패밀리
+```css
+/* 본문 (한글 최적화) */
+font-family: -apple-system, BlinkMacSystemFont,
+             'Apple SD Gothic Neo', 'Malgun Gothic',
+             'Noto Sans KR', system-ui, sans-serif;
+
+/* 코드 */
+font-family: 'JetBrains Mono', monospace;
+```
+
+### 폰트 크기 스케일
+| Token | Size | Line Height | 용도 |
+|-------|------|-------------|------|
+| `xs` | 12px | 16px | 라벨, 캡션 |
+| `sm` | 14px | 20px | 보조 텍스트 |
+| `base` | 16px | 24px | **본문** |
+| `lg` | 18px | 28px | 강조 본문 |
+| `xl` | 20px | 28px | 부제목 |
+| `2xl` | 24px | 32px | 카드 제목 |
+| `3xl` | 30px | 36px | 섹션 제목 |
+| `4xl` | 36px | 40px | 페이지 제목 |
+| `5xl` | 48px | 48px | Hero 제목 |
+
+## ✨ 글래스모피즘 효과
+
+### Glass Panel (네비게이션, 모달)
+```css
+background: rgba(30, 41, 59, 0.4);
+backdrop-filter: blur(12px);
+border: 1px solid rgba(255, 255, 255, 0.05);
+```
+
+### Glass Card (피처 카드, 가격표)
+```css
+/* 기본 상태 */
+background: linear-gradient(135deg,
+  rgba(30, 41, 59, 0.6) 0%,
+  rgba(30, 41, 59, 0.3) 100%);
+backdrop-filter: blur(20px);
+border: 1px solid rgba(255, 255, 255, 0.08);
+
+/* Hover 상태 */
+background: linear-gradient(135deg,
+  rgba(30, 41, 59, 0.8) 0%,
+  rgba(30, 41, 59, 0.5) 100%);
+border-color: rgba(255, 255, 255, 0.15);
+box-shadow:
+  0 20px 40px rgba(0, 0, 0, 0.3),
+  0 0 40px rgba(56, 189, 248, 0.1);
+transform: translateY(-4px);
+```
+
+## 🌈 그라디언트
+
+### Brand Gradient (CTA, Hero)
+```css
+background: linear-gradient(135deg, #38bdf8 0%, #a855f7 100%);
+```
+
+### Text Gradient
+```css
+background: linear-gradient(135deg, #38bdf8 0%, #a855f7 50%, #38bdf8 100%);
+background-size: 200% 100%;
+-webkit-background-clip: text;
+color: transparent;
+```
+
+### Soft Gradient (배경)
+```css
+background: linear-gradient(135deg,
+  rgba(56, 189, 248, 0.15) 0%,
+  rgba(168, 85, 247, 0.1) 100%);
+```
+
+## 💫 Glow 효과
+
+### Brand Glow
+```css
+box-shadow: 0 0 40px rgba(56, 189, 248, 0.3);
+```
+
+### Purple Glow
+```css
+box-shadow: 0 0 40px rgba(168, 85, 247, 0.3);
+```
+
+## 📐 간격 시스템
+
+| Token | Value | 용도 |
+|-------|-------|------|
+| `1` | 4px | 아이콘 갭 |
+| `2` | 8px | 인라인 요소 |
+| `3` | 12px | 밀집 UI |
+| `4` | 16px | **기본 갭** |
+| `6` | 24px | 카드 패딩 |
+| `8` | 32px | 섹션 내부 |
+| `16` | 64px | 섹션 간 |
+| `24` | 96px | 대형 섹션 |
+
+## 🔘 Border Radius
+
+| Token | Value | 용도 |
+|-------|-------|------|
+| `sm` | 4px | 작은 버튼, 태그 |
+| `lg` | 8px | 입력 필드 |
+| `xl` | 12px | 카드 |
+| `2xl` | 16px | 대형 카드 |
+| `3xl` | 24px | 모달, 패널 |
+| `full` | 9999px | 원형 버튼, 아바타 |
+
+---
+
+## 🛠 Figma 설정 가이드
+
+### 1. Figma Tokens 플러그인 사용 (권장)
+
+1. Figma에서 **Figma Tokens** 플러그인 설치
+2. `figma-tokens.json` 파일 내용을 플러그인에 Import
+3. 토큰이 자동으로 스타일 생성
+
+### 2. 수동 설정
+
+**Color Styles 생성:**
+1. Figma → Local Styles → + 버튼
+2. 위 색상표 참고하여 스타일 생성
+3. 명명 규칙: `brand/500`, `dark/900`, `semantic/success`
+
+**Text Styles 생성:**
+1. 텍스트 작성 → 스타일 패널 → +
+2. 명명 규칙: `heading/5xl`, `body/base`, `code/sm`
+
+**Effect Styles 생성:**
+1. 요소에 효과 적용 → 스타일 패널 → +
+2. 명명 규칙: `glass-panel`, `glass-card`, `glow-brand`
+
+---
+
+## 📱 컴포넌트 목록
+
+WireFramer 라이브러리와 연계하여 구축할 컴포넌트:
+
+### Navigation
+- [ ] Header
+- [ ] Footer
+- [ ] Tab Bar (가격표용)
+- [ ] Mobile Menu
+
+### Content
+- [ ] Hero Section
+- [ ] Feature Card
+- [ ] Pricing Card
+- [ ] Info Card
+
+### Inputs
+- [ ] Text Input
+- [ ] Select/Dropdown
+- [ ] Slider (리소스 선택)
+- [ ] Toggle
+- [ ] Radio Group (OS/리전 선택)
+
+### Buttons
+- [ ] Primary Button (Gradient)
+- [ ] Secondary Button (Glass)
+- [ ] Icon Button
+- [ ] Link Button
+
+### Feedback
+- [ ] Badge/Tag
+- [ ] Toast/Alert
+- [ ] Loading Spinner
+- [ ] Skeleton
+
+---
+
+## 🔗 관련 파일
+
+- `/src/input.css` - Tailwind CSS 소스
+- `/style.css` - 빌드된 CSS
+- `/index.html` - 메인 페이지
+
+## 📅 버전
+
+- **v1.0** (2026-01-23): 초기 디자인 토큰 추출