From d08d1895d03b0cbbf6173e0c15c4a5ca6892926d Mon Sep 17 00:00:00 2001
From: kappa <kappa@inouter.com>
Date: Fri, 23 Jan 2026 09:19:01 +0900
Subject: [PATCH] =?UTF-8?q?refactor:=20=EA=B0=80=EA=B2=A9=ED=91=9C=20?=
 =?UTF-8?q?=EC=84=B9=EC=85=98=20=ED=9E=88=EC=96=B4=EB=A1=9C=20=EC=95=84?=
 =?UTF-8?q?=EB=9E=98=EB=A1=9C=20=EC=9D=B4=EB=8F=99=20=EB=B0=8F=20=ED=83=AD?=
 =?UTF-8?q?=20=EC=8A=A4=ED=83=80=EC=9D=BC=20=ED=86=B5=EC=9D=BC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 가격표 섹션을 페이지 하단에서 히어로 바로 아래로 이동
- 상단 패딩 축소 (py-24 → pt-12 pb-24)
- 서브탭(서울/글로벌 타입) 스타일을 메인탭과 동일하게 통일
- Pages Functions API 프록시 추가 (functions/)
- wrangler.toml 및 TypeScript 설정 추가

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 .env.example               |   4 +
 CLAUDE.md                  |  24 +-
 README.md                  |  45 +++-
 app/index.html             | 206 +++++++++++++--
 functions/README.md        |  88 +++++++
 functions/_shared/proxy.ts | 102 +++++++
 functions/api/health.ts    |  17 ++
 functions/api/instances.ts |  25 ++
 functions/api/pricing.ts   | 205 ++++++++++++++
 functions/api/recommend.ts |  47 ++++
 index.html                 | 528 ++++++++++++++++++-------------------
 package-lock.json          |  25 +-
 package.json               |   4 +-
 tsconfig.json              |  18 ++
 wrangler.toml              |  16 ++
 15 files changed, 1056 insertions(+), 298 deletions(-)
 create mode 100644 functions/README.md
 create mode 100644 functions/_shared/proxy.ts
 create mode 100644 functions/api/health.ts
 create mode 100644 functions/api/instances.ts
 create mode 100644 functions/api/pricing.ts
 create mode 100644 functions/api/recommend.ts
 create mode 100644 tsconfig.json
 create mode 100644 wrangler.toml

diff --git a/.env.example b/.env.example
index f558db8..d567701 100644
--- a/.env.example
+++ b/.env.example
@@ -6,3 +6,7 @@ VAULT_NAMESPACE=admin # (옵션) 기업용/클라우드 사용 시 필요
 # API Path Example (KV Engine v2)
 # 예: secret/data/anvil-hosting -> VAULT_SECRET_PATH=secret/data/anvil-hosting
 VAULT_SECRET_PATH=secret/data/production
+
+# Cloudflare Pages Functions (API Proxy)
+# API Key for Worker authentication
+WORKER_API_KEY=your-api-key-here
diff --git a/CLAUDE.md b/CLAUDE.md
index a0f8cd6..e23821f 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -19,12 +19,23 @@ No build step required - deploy directly.
 
 ## Architecture
 
-Multi-file static website:
+Multi-file static website with serverless API proxy:
 - `index.html` - 메인 랜딩 페이지 (~1000줄)
 - `style.css` - Tailwind CSS 빌드 결과
 - `fonts.css` - 시스템 폰트 정의
 - `app.js` - Alpine.js 앱 로직 (Server Launcher, Pricing Table 등)
 - `terms.html`, `privacy.html`, `sla.html` - 법적 페이지
+- `functions/` - Cloudflare Pages Functions (API proxy)
+
+### API Endpoints (Pages Functions)
+
+| Method | Path | Description |
+|--------|------|-------------|
+| GET | `/api/health` | Health check |
+| GET | `/api/instances` | Query VM instances |
+| POST | `/api/recommend` | Tech stack recommendations |
+
+**Proxy Target**: https://cloud-instances-api.kappa-d8e.workers.dev
 
 ### Tech Stack
 - Tailwind CSS v4 (로컬 빌드, `style.css`)
@@ -48,5 +59,16 @@ Navigation → Hero (Telegram Bot Demo) → Features (`#features`) → Automatio
 ## External Integrations
 
 - **Telegram Bot**: @AnvilForgeBot (서버 생성, 도메인 등록)
+- **Worker API**: cloud-instances-api (VM pricing aggregator)
 - **Credentials**: Stored in Vault at https://vault.anvil.it.com
 - **Registrant Info Source**: npm-linode-1 server (`/home/admin/namecheap_api/.env`)
+
+## Environment Configuration
+
+### Secrets (set via Cloudflare Dashboard or CLI)
+```bash
+wrangler pages secret put WORKER_API_KEY
+```
+
+### Variables (wrangler.toml)
+- `WORKER_API_URL` - Worker API base URL
diff --git a/README.md b/README.md
index 474b387..736822f 100644
--- a/README.md
+++ b/README.md
@@ -1,19 +1,50 @@
-# Anvil Hosting - Cloudflare Pages
+# Anvil Hosting
 
-공식 웹사이트: https://hosting.anvil.it.com
+Static HTML 마케팅 웹사이트 - Cloudflare Pages 배포
+
+**URL**: https://hosting.anvil.it.com
 
 ## 배포
 
 ```bash
-cd /Users/kaffa/anvil-hosting
 wrangler pages deploy . --project-name anvil-hosting
 ```
 
-## 구성
+빌드 단계 없이 바로 배포.
 
-- **로고**: 3D 메탈릭 모루 + 대장간 망치 + 불꽃 (SVG)
-- **서비스 순서**: 도메인 → DDoS → 해외서버 → 웹호스팅
-- **푸터 사업자 정보**: namecheap-api 등록자 정보와 동일
+## 아키텍처
+
+### 파일 구조
+- `index.html` - 메인 랜딩 페이지
+- `style.css` - Tailwind CSS v4 빌드 결과
+- `fonts.css` - 시스템 폰트 정의
+- `app.js` - Alpine.js 앱 로직 (Server Launcher, Pricing Table 등)
+- `terms.html`, `privacy.html`, `sla.html` - 법적 페이지
+
+### Tech Stack
+- Tailwind CSS v4 (로컬 빌드)
+- Alpine.js 3.14.3 (CDN with SRI)
+- 시스템 폰트 (-apple-system, Apple SD Gothic Neo, Malgun Gothic)
+
+### 디자인 시스템
+- 다크 테마 (배경: #0a0f1a)
+- 글래스모피즘 효과 (glass-card, glass-panel)
+- 메시 그라디언트 배경
+- Color palette: brand-* (sky blue 계열), purple, green, red
+
+## 페이지 섹션
+
+Navigation → Hero (Telegram Bot Demo) → Features → Automation → Infrastructure → Domain → Pricing → Footer
+
+## 주요 컴포넌트
+
+- **Server Launcher Modal**: Alpine.js 기반 서버 생성 마법사
+- **Pricing Table**: 리전별 (Global/Seoul) 동적 요금표
+- **Telegram Bot Demo**: Hero 섹션 대화형 데모
+
+## 외부 연동
+
+- **Telegram Bot**: @AnvilForgeBot (서버 생성, 도메인 등록)
 
 ## 등록자 정보 소스
 
diff --git a/app/index.html b/app/index.html
index aa91a12..0e982ef 100644
--- a/app/index.html
+++ b/app/index.html
@@ -23,27 +23,50 @@
 
   <!-- Alpine.js -->
   <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.14.3/dist/cdn.min.js" integrity="sha384-iZD2X8o1Zdq0HR5H/7oa8W30WS4No+zWCKUPD7fHRay9I1Gf+C4F8sVmw7zec1wW" crossorigin="anonymous"></script>
-</head>
-<body x-data="anvilApp()" x-init="initMiniApp()" class="font-sans antialiased">
 
-  <!-- Not Telegram Warning -->
-  <template x-if="!telegram.isAvailable">
+  <!-- Telegram Login Widget Callback -->
+  <script>
+    function onTelegramAuth(user) {
+      // Alpine.js 컴포넌트에 이벤트 전달
+      window.dispatchEvent(new CustomEvent('telegram-web-login', { detail: user }));
+    }
+  </script>
+</head>
+<body x-data="anvilApp()" x-init="initMiniApp()" @telegram-web-login.window="handleWebLogin($event.detail)" class="font-sans antialiased">
+
+  <!-- Login Screen (Web Browser, Not Logged In) -->
+  <template x-if="!telegram.isAvailable && !webUser">
     <div class="min-h-screen flex items-center justify-center p-6">
       <div class="glass-card p-8 rounded-2xl text-center max-w-md">
-        <div class="text-6xl mb-4">🔒</div>
-        <h1 class="text-2xl font-bold mb-2">텔레그램 전용 페이지</h1>
-        <p class="text-slate-400 mb-6">이 페이지는 텔레그램 미니앱에서만 접근할 수 있습니다.</p>
-        <a href="https://t.me/AnvilForgeBot"
-           class="inline-flex items-center gap-2 px-6 py-3 bg-brand-500 text-white font-bold rounded-xl hover:bg-brand-400 transition">
-          <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm4.64 6.8c-.15 1.58-.8 5.42-1.13 7.19-.14.75-.42 1-.68 1.03-.58.05-1.02-.38-1.58-.75-.88-.58-1.38-.94-2.23-1.5-.99-.65-.35-1.01.22-1.59.15-.15 2.71-2.48 2.76-2.69a.2.2 0 00-.05-.18c-.06-.05-.14-.03-.21-.02-.09.02-1.49.95-4.22 2.79-.4.27-.76.41-1.08.4-.36-.01-1.04-.2-1.55-.37-.62-.2-1.12-.31-1.15-.63.03-.37.59-.75 1.5-.95 6.07-2.64 10.12-4.38 12.15-5.21 2.91-1.2 3.51-1.4 3.91-1.41.09 0 .28.02.41.09.11.06.23.14.3.24.08.12.12.33.09.57z"/></svg>
-          텔레그램에서 열기
-        </a>
+        <!-- Logo -->
+        <div class="w-16 h-16 rounded-2xl bg-gradient-to-br from-brand-500 to-purple-500 flex items-center justify-center text-white font-bold text-2xl mx-auto mb-6">A</div>
+
+        <h1 class="text-2xl font-bold mb-2">Anvil Hosting</h1>
+        <p class="text-slate-400 mb-8">텔레그램 계정으로 로그인하여<br>서버를 관리하세요</p>
+
+        <!-- Telegram Login Widget Container -->
+        <div id="telegram-login-container" class="flex justify-center mb-6"></div>
+
+        <p class="text-xs text-slate-500">
+          로그인하면 <a href="/terms.html" class="text-brand-400 hover:underline">이용약관</a> 및
+          <a href="/privacy.html" class="text-brand-400 hover:underline">개인정보처리방침</a>에 동의하는 것으로 간주됩니다.
+        </p>
+
+        <!-- Or use Mini App -->
+        <div class="mt-8 pt-6 border-t border-slate-700/50">
+          <p class="text-sm text-slate-400 mb-3">또는 텔레그램 앱에서 직접 이용</p>
+          <a href="https://t.me/AnvilForgeBot"
+             class="inline-flex items-center gap-2 px-5 py-2.5 bg-slate-800 hover:bg-slate-700 text-white rounded-xl transition text-sm">
+            <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm4.64 6.8c-.15 1.58-.8 5.42-1.13 7.19-.14.75-.42 1-.68 1.03-.58.05-1.02-.38-1.58-.75-.88-.58-1.38-.94-2.23-1.5-.99-.65-.35-1.01.22-1.59.15-.15 2.71-2.48 2.76-2.69a.2.2 0 00-.05-.18c-.06-.05-.14-.03-.21-.02-.09.02-1.49.95-4.22 2.79-.4.27-.76.41-1.08.4-.36-.01-1.04-.2-1.55-.37-.62-.2-1.12-.31-1.15-.63.03-.37.59-.75 1.5-.95 6.07-2.64 10.12-4.38 12.15-5.21 2.91-1.2 3.51-1.4 3.91-1.41.09 0 .28.02.41.09.11.06.23.14.3.24.08.12.12.33.09.57z"/></svg>
+            미니앱 열기
+          </a>
+        </div>
       </div>
     </div>
   </template>
 
-  <!-- Dashboard (Telegram Only) -->
-  <template x-if="telegram.isAvailable">
+  <!-- Dashboard (Telegram MiniApp OR Web Logged In) -->
+  <template x-if="telegram.isAvailable || webUser">
     <div class="min-h-screen">
 
       <!-- Header -->
@@ -53,11 +76,27 @@
             <div class="w-8 h-8 rounded bg-brand-500 flex items-center justify-center text-white font-bold">A</div>
             <span class="font-bold">Anvil</span>
           </div>
-          <template x-if="telegram.user">
-            <div class="text-sm text-slate-400">
-              <span class="text-brand-400" x-text="'@' + (telegram.user.username || telegram.user.first_name)"></span>
-            </div>
-          </template>
+
+          <!-- User Info -->
+          <div class="flex items-center gap-3">
+            <!-- Telegram MiniApp User -->
+            <template x-if="telegram.isAvailable && telegram.user">
+              <div class="text-sm text-slate-400">
+                <span class="text-brand-400" x-text="'@' + (telegram.user.username || telegram.user.first_name)"></span>
+              </div>
+            </template>
+
+            <!-- Web Login User -->
+            <template x-if="!telegram.isAvailable && webUser">
+              <div class="flex items-center gap-2">
+                <img x-show="webUser.photo_url" :src="webUser.photo_url" class="w-7 h-7 rounded-full">
+                <span class="text-sm text-brand-400" x-text="'@' + (webUser.username || webUser.first_name)"></span>
+                <button @click="logout()" class="text-xs text-slate-500 hover:text-red-400 transition ml-2">
+                  로그아웃
+                </button>
+              </div>
+            </template>
+          </div>
         </div>
       </header>
 
@@ -68,10 +107,10 @@
         <div class="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4 mb-6">
           <div>
             <h1 class="text-2xl font-bold">
-              <template x-if="telegram.user">
-                <span>안녕하세요, <span class="text-brand-400" x-text="telegram.user.first_name || telegram.user.username"></span>님</span>
+              <template x-if="currentUser">
+                <span>안녕하세요, <span class="text-brand-400" x-text="currentUser.first_name || currentUser.username"></span>님</span>
               </template>
-              <template x-if="!telegram.user">
+              <template x-if="!currentUser">
                 <span>대시보드</span>
               </template>
             </h1>
@@ -102,6 +141,11 @@
                   class="absolute -top-1 -right-1 bg-red-500 text-white text-xs rounded-full w-4 h-4 flex items-center justify-center"
                   x-text="unreadCount"></span>
           </button>
+          <button @click="switchView('cloud'); fetchCloudInstances()"
+                  :class="currentView === 'cloud' ? 'bg-brand-500 text-white shadow-lg' : 'text-slate-400'"
+                  class="px-4 py-2 rounded-lg font-medium text-sm transition-all whitespace-nowrap">
+            🌐 클라우드
+          </button>
         </div>
 
         <!-- Server List View -->
@@ -254,6 +298,124 @@
 
         </div>
 
+        <!-- Cloud Instances View -->
+        <div x-show="currentView === 'cloud'" class="space-y-4">
+
+          <!-- API Status -->
+          <div class="flex items-center justify-between mb-4">
+            <h2 class="text-lg font-bold">클라우드 인스턴스</h2>
+            <button @click="testApiHealth()"
+                    :disabled="apiTestLoading"
+                    class="px-3 py-1.5 text-xs bg-slate-700 hover:bg-slate-600 rounded-lg transition disabled:opacity-50">
+              <span x-show="!apiTestLoading">API 상태 확인</span>
+              <span x-show="apiTestLoading">확인 중...</span>
+            </button>
+          </div>
+
+          <!-- API Test Result -->
+          <div x-show="apiTestResult" class="glass-card p-3 rounded-xl text-sm mb-4"
+               :class="apiTestResult?.success ? 'border border-green-500/30' : 'border border-red-500/30'">
+            <div class="flex items-center gap-2">
+              <span x-text="apiTestResult?.success ? '✅' : '❌'"></span>
+              <span x-text="apiTestResult?.message"></span>
+            </div>
+            <div x-show="apiTestResult?.success && apiTestResult?.data" class="mt-2 text-xs text-slate-400">
+              <div>버전: <span x-text="apiTestResult?.data?.version"></span></div>
+              <div>DB 상태: <span x-text="apiTestResult?.data?.database?.connected ? '연결됨' : '연결 안됨'"></span></div>
+            </div>
+          </div>
+
+          <!-- Filters -->
+          <div class="glass-card p-4 rounded-xl">
+            <div class="grid grid-cols-2 sm:grid-cols-4 gap-3">
+              <div>
+                <label class="text-xs text-slate-400 block mb-1">프로바이더</label>
+                <select x-model="cloudInstancesFilter.provider"
+                        class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-sm">
+                  <option value="">전체</option>
+                  <option value="linode">Linode</option>
+                  <option value="vultr">Vultr</option>
+                  <option value="aws">AWS</option>
+                </select>
+              </div>
+              <div>
+                <label class="text-xs text-slate-400 block mb-1">최소 vCPU</label>
+                <input type="number" x-model="cloudInstancesFilter.min_vcpu" placeholder="예: 2"
+                       class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-sm">
+              </div>
+              <div>
+                <label class="text-xs text-slate-400 block mb-1">최대 가격 ($/h)</label>
+                <input type="number" x-model="cloudInstancesFilter.max_price" placeholder="예: 0.05" step="0.01"
+                       class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-sm">
+              </div>
+              <div>
+                <label class="text-xs text-slate-400 block mb-1">정렬</label>
+                <select x-model="cloudInstancesFilter.sort_by"
+                        class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-sm">
+                  <option value="monthly_price">가격순</option>
+                  <option value="vcpu">vCPU순</option>
+                  <option value="memory_mb">메모리순</option>
+                </select>
+              </div>
+            </div>
+            <button @click="fetchCloudInstances()"
+                    :disabled="cloudInstancesLoading"
+                    class="mt-3 w-full py-2 bg-brand-500 hover:bg-brand-600 text-white font-bold rounded-lg text-sm disabled:opacity-50 transition">
+              <span x-show="!cloudInstancesLoading">🔍 검색</span>
+              <span x-show="cloudInstancesLoading">검색 중...</span>
+            </button>
+          </div>
+
+          <!-- Error -->
+          <div x-show="cloudInstancesError" class="glass-card p-4 rounded-xl border border-red-500/30 text-red-400 text-sm">
+            <span>❌</span> <span x-text="cloudInstancesError"></span>
+          </div>
+
+          <!-- Loading -->
+          <div x-show="cloudInstancesLoading" class="text-center py-8">
+            <div class="animate-spin w-8 h-8 border-4 border-brand-500 border-t-transparent rounded-full mx-auto"></div>
+            <p class="text-slate-400 mt-3 text-sm">인스턴스 조회 중...</p>
+          </div>
+
+          <!-- Results -->
+          <div x-show="!cloudInstancesLoading && cloudInstances.length > 0" class="space-y-3">
+            <div class="text-sm text-slate-400 mb-2">
+              <span x-text="cloudInstances.length"></span>개 인스턴스
+            </div>
+
+            <template x-for="instance in cloudInstances" :key="instance.id">
+              <div class="glass-card p-4 rounded-xl hover:border-brand-500/30 transition">
+                <div class="flex justify-between items-start mb-2">
+                  <div>
+                    <div class="font-bold text-sm" x-text="instance.instance_name"></div>
+                    <div class="text-xs text-slate-400">
+                      <span x-text="instance.provider?.display_name || instance.provider?.name"></span>
+                      <span x-show="instance.region"> · </span>
+                      <span x-text="instance.region?.region_name"></span>
+                    </div>
+                  </div>
+                  <div class="text-right">
+                    <div class="text-brand-400 font-bold" x-text="instance.pricing ? formatUsd(instance.pricing.monthly_price) + '/월' : '-'"></div>
+                    <div class="text-xs text-slate-500" x-text="instance.pricing ? formatUsd(instance.pricing.hourly_price) + '/시간' : ''"></div>
+                  </div>
+                </div>
+                <div class="flex gap-4 text-xs text-slate-300">
+                  <span><span class="text-slate-500">vCPU:</span> <span x-text="instance.vcpu"></span></span>
+                  <span><span class="text-slate-500">RAM:</span> <span x-text="formatMemory(instance.memory_mb)"></span></span>
+                  <span><span class="text-slate-500">Storage:</span> <span x-text="instance.storage_gb + ' GB'"></span></span>
+                </div>
+              </div>
+            </template>
+          </div>
+
+          <!-- Empty -->
+          <div x-show="!cloudInstancesLoading && !cloudInstancesError && cloudInstances.length === 0" class="glass-card p-8 rounded-xl text-center">
+            <div class="text-4xl mb-3">🔍</div>
+            <p class="text-slate-400 text-sm">검색 버튼을 눌러 인스턴스를 조회하세요</p>
+          </div>
+
+        </div>
+
       </main>
 
     </div>
diff --git a/functions/README.md b/functions/README.md
new file mode 100644
index 0000000..932aa4f
--- /dev/null
+++ b/functions/README.md
@@ -0,0 +1,88 @@
+# Cloudflare Pages Functions
+
+API proxy endpoints for cloud-instances-api Worker.
+
+## Endpoints
+
+| Method | Path | Description |
+|--------|------|-------------|
+| GET | `/api/health` | Health check |
+| GET | `/api/instances` | Query VM instances with filters |
+| POST | `/api/recommend` | Tech stack recommendations |
+
+## Configuration
+
+### Environment Variables
+
+Set in Cloudflare Pages dashboard or via CLI:
+
+```bash
+wrangler pages secret put WORKER_API_KEY
+```
+
+**Required Secrets:**
+- `WORKER_API_KEY` - API key for Worker authentication
+
+**Configured Variables (wrangler.toml):**
+- `WORKER_API_URL` - Worker API base URL
+
+## Local Development
+
+1. Install dependencies:
+```bash
+npm install
+```
+
+2. Create `.env` file:
+```bash
+WORKER_API_KEY=your-api-key-here
+```
+
+3. Run local dev server:
+```bash
+npx wrangler pages dev . --port 8788
+```
+
+## Deployment
+
+```bash
+wrangler pages deploy . --project-name anvil-hosting
+```
+
+## CORS Configuration
+
+All endpoints allow requests from:
+- Origin: `https://hosting.anvil.it.com`
+- Methods: `GET, POST, OPTIONS`
+- Headers: `Content-Type`
+
+## Architecture
+
+```
+Client Request
+  ↓
+/api/{endpoint} (Pages Function)
+  ↓
+functions/_shared/proxy.ts (CORS + Auth)
+  ↓
+cloud-instances-api.kappa-d8e.workers.dev (Worker)
+  ↓
+Response with CORS headers
+```
+
+## Error Handling
+
+All errors return JSON with CORS headers:
+
+```json
+{
+  "success": false,
+  "error": "Error message",
+  "details": "Optional error details"
+}
+```
+
+Status codes:
+- `400` - Invalid request
+- `500` - Internal error
+- `503` - Worker API unavailable
diff --git a/functions/_shared/proxy.ts b/functions/_shared/proxy.ts
new file mode 100644
index 0000000..840920d
--- /dev/null
+++ b/functions/_shared/proxy.ts
@@ -0,0 +1,102 @@
+/**
+ * Shared proxy utilities for Cloudflare Pages Functions
+ * Handles CORS, error responses, and Worker API forwarding
+ */
+
+export interface Env {
+  WORKER_API_KEY: string;
+  WORKER_API_URL: string;
+  DB: D1Database;
+}
+
+export interface ErrorResponse {
+  success: false;
+  error: string;
+  details?: any;
+}
+
+const CORS_HEADERS = {
+  'Access-Control-Allow-Origin': 'https://hosting.anvil.it.com',
+  'Access-Control-Allow-Methods': 'GET, POST, OPTIONS',
+  'Access-Control-Allow-Headers': 'Content-Type',
+} as const;
+
+/**
+ * Create CORS preflight response
+ */
+export function createCorsPreflightResponse(): Response {
+  return new Response(null, {
+    status: 204,
+    headers: CORS_HEADERS,
+  });
+}
+
+/**
+ * Create error response with CORS headers
+ */
+export function createErrorResponse(
+  error: string,
+  status: number = 500,
+  details?: any
+): Response {
+  const body: ErrorResponse = {
+    success: false,
+    error,
+    ...(details && { details }),
+  };
+
+  return new Response(JSON.stringify(body), {
+    status,
+    headers: {
+      ...CORS_HEADERS,
+      'Content-Type': 'application/json',
+    },
+  });
+}
+
+/**
+ * Proxy request to Worker API with authentication
+ */
+export async function proxyToWorker(
+  env: Env,
+  path: string,
+  options: RequestInit = {}
+): Promise<Response> {
+  const workerUrl = `${env.WORKER_API_URL}${path}`;
+
+  try {
+    const response = await fetch(workerUrl, {
+      ...options,
+      headers: {
+        ...options.headers,
+        'X-API-Key': env.WORKER_API_KEY,
+      },
+    });
+
+    // Clone response to add CORS headers
+    const body = await response.text();
+    return new Response(body, {
+      status: response.status,
+      statusText: response.statusText,
+      headers: {
+        ...CORS_HEADERS,
+        'Content-Type': response.headers.get('Content-Type') || 'application/json',
+      },
+    });
+  } catch (error) {
+    console.error(`[Proxy] Failed to fetch ${workerUrl}:`, error);
+    return createErrorResponse(
+      'Failed to connect to API server',
+      503,
+      error instanceof Error ? error.message : String(error)
+    );
+  }
+}
+
+/**
+ * Build query string from URL search params
+ */
+export function buildQueryString(searchParams: URLSearchParams): string {
+  const params = searchParams.toString();
+  return params ? `?${params}` : '';
+}
diff --git a/functions/api/health.ts b/functions/api/health.ts
new file mode 100644
index 0000000..d16d8fb
--- /dev/null
+++ b/functions/api/health.ts
@@ -0,0 +1,17 @@
+/**
+ * Health check endpoint
+ * GET /api/health → Worker GET /health
+ */
+
+import { type PagesFunction } from '@cloudflare/workers-types';
+import { Env, createCorsPreflightResponse, proxyToWorker } from '../_shared/proxy';
+
+export const onRequestGet: PagesFunction<Env> = async ({ env }) => {
+  return proxyToWorker(env, '/health', {
+    method: 'GET',
+  });
+};
+
+export const onRequestOptions: PagesFunction<Env> = async () => {
+  return createCorsPreflightResponse();
+};
diff --git a/functions/api/instances.ts b/functions/api/instances.ts
new file mode 100644
index 0000000..b11b411
--- /dev/null
+++ b/functions/api/instances.ts
@@ -0,0 +1,25 @@
+/**
+ * Instances query endpoint
+ * GET /api/instances → Worker GET /instances
+ */
+
+import { type PagesFunction } from '@cloudflare/workers-types';
+import {
+  Env,
+  createCorsPreflightResponse,
+  proxyToWorker,
+  buildQueryString,
+} from '../_shared/proxy';
+
+export const onRequestGet: PagesFunction<Env> = async ({ request, env }) => {
+  const url = new URL(request.url);
+  const queryString = buildQueryString(url.searchParams);
+
+  return proxyToWorker(env, `/instances${queryString}`, {
+    method: 'GET',
+  });
+};
+
+export const onRequestOptions: PagesFunction<Env> = async () => {
+  return createCorsPreflightResponse();
+};
diff --git a/functions/api/pricing.ts b/functions/api/pricing.ts
new file mode 100644
index 0000000..5ae0ea5
--- /dev/null
+++ b/functions/api/pricing.ts
@@ -0,0 +1,205 @@
+/**
+ * Pricing endpoint - Direct D1 query (no rate limiting)
+ * GET /api/pricing → D1 cloud-instances-db
+ *
+ * Supported regions:
+ * - Tokyo, Osaka, Singapore: Linode
+ * - Seoul: Vultr
+ */
+
+import { type PagesFunction } from '@cloudflare/workers-types';
+import { Env, createCorsPreflightResponse } from '../_shared/proxy';
+
+interface InstanceRow {
+  instance_id: string;
+  instance_name: string;
+  vcpu: number;
+  memory_mb: number;
+  storage_gb: number | null;
+  transfer_tb: number | null;
+  provider_name: string;
+  region_name: string;
+  region_code: string;
+  monthly_price: number;
+  hourly_price: number | null;
+  monthly_price_krw: number | null;
+  hourly_price_krw: number | null;
+  // GPU fields
+  has_gpu?: number;
+  gpu_count?: number;
+  gpu_type?: string;
+}
+
+const CORS_HEADERS = {
+  'Access-Control-Allow-Origin': '*',
+  'Access-Control-Allow-Methods': 'GET, OPTIONS',
+  'Access-Control-Allow-Headers': 'Content-Type',
+};
+
+export const onRequestGet: PagesFunction<Env> = async ({ env }) => {
+  try {
+    // 1. 일반 인스턴스 쿼리 - Linode(Tokyo, Osaka, Singapore) + Vultr(Seoul)
+    const regularSql = `
+      SELECT
+        it.instance_id,
+        it.instance_name,
+        it.vcpu,
+        it.memory_mb,
+        it.storage_gb,
+        it.transfer_tb,
+        p.name as provider_name,
+        r.region_name,
+        r.region_code,
+        pr.monthly_price,
+        pr.hourly_price,
+        pr.monthly_price_krw,
+        pr.hourly_price_krw,
+        0 as has_gpu,
+        0 as gpu_count,
+        NULL as gpu_type
+      FROM instance_types it
+      JOIN providers p ON it.provider_id = p.id
+      JOIN pricing pr ON it.id = pr.instance_type_id
+      JOIN regions r ON pr.region_id = r.id
+      WHERE pr.available = 1
+        AND it.instance_id NOT LIKE '%-sc1'
+        AND (
+          (p.name = 'linode' AND (
+            r.region_name LIKE '%Tokyo%' OR
+            r.region_name LIKE '%Osaka%' OR
+            r.region_code LIKE '%jp-osa%' OR
+            r.region_name LIKE '%Singapore%'
+          ))
+          OR
+          (p.name = 'vultr' AND (
+            r.region_name LIKE '%Seoul%' OR
+            r.region_code LIKE '%icn%'
+          ))
+        )
+      ORDER BY pr.monthly_price ASC
+    `;
+
+    // 2. GPU 인스턴스 쿼리 - Linode(Tokyo) + Vultr(Seoul)
+    const gpuSql = `
+      SELECT
+        gi.instance_id,
+        gi.instance_name,
+        gi.vcpu,
+        gi.memory_mb,
+        gi.storage_gb,
+        gi.transfer_tb,
+        p.name as provider_name,
+        r.region_name,
+        r.region_code,
+        gp.monthly_price,
+        gp.hourly_price,
+        gp.monthly_price_krw,
+        gp.hourly_price_krw,
+        1 as has_gpu,
+        gi.gpu_count,
+        gi.gpu_type
+      FROM gpu_instances gi
+      JOIN providers p ON gi.provider_id = p.id
+      JOIN gpu_pricing gp ON gi.id = gp.gpu_instance_id
+      JOIN regions r ON gp.region_id = r.id
+      WHERE gp.available = 1
+        AND (
+          (p.name = 'linode' AND (
+            r.region_name LIKE '%Tokyo%' OR
+            r.region_name LIKE '%Osaka%' OR
+            r.region_code LIKE '%jp-osa%'
+          ))
+          OR
+          (p.name = 'vultr' AND (
+            r.region_name LIKE '%Seoul%' OR
+            r.region_code LIKE '%icn%'
+          ))
+        )
+      ORDER BY gp.monthly_price ASC
+    `;
+
+    const [regularResult, gpuResult] = await Promise.all([
+      env.DB.prepare(regularSql).all<InstanceRow>(),
+      env.DB.prepare(gpuSql).all<InstanceRow>(),
+    ]);
+
+    // Transform to frontend format
+    const transformRow = (row: InstanceRow) => ({
+      id: row.instance_id,
+      instance_name: row.instance_name,
+      vcpu: row.vcpu,
+      memory_mb: row.memory_mb,
+      storage_gb: row.storage_gb,
+      transfer_tb: row.transfer_tb,
+      provider: { name: row.provider_name },
+      region: {
+        region_name: row.region_name,
+        region_code: row.region_code
+      },
+      pricing: {
+        monthly_price: row.monthly_price,
+        hourly_price: row.hourly_price,
+        monthly_price_krw: row.monthly_price_krw,
+        hourly_price_krw: row.hourly_price_krw,
+      },
+      has_gpu: row.has_gpu === 1,
+      gpu_count: row.gpu_count || 0,
+      gpu_type: row.gpu_type || null,
+    });
+
+    const regularInstances = regularResult.results.map(transformRow);
+    const gpuInstances = gpuResult.results.map(transformRow);
+    const instances = [...regularInstances, ...gpuInstances];
+
+    // Count by region
+    const regionCounts: Record<string, number> = {};
+    for (const inst of instances) {
+      const name = inst.region.region_name.toLowerCase();
+      if (name.includes('tokyo')) regionCounts['tokyo'] = (regionCounts['tokyo'] || 0) + 1;
+      else if (name.includes('osaka')) regionCounts['osaka'] = (regionCounts['osaka'] || 0) + 1;
+      else if (name.includes('singapore')) regionCounts['singapore'] = (regionCounts['singapore'] || 0) + 1;
+      else if (name.includes('seoul')) regionCounts['seoul'] = (regionCounts['seoul'] || 0) + 1;
+    }
+
+    // GPU counts
+    const gpuCounts = {
+      'gpu-japan': gpuInstances.filter(i =>
+        i.region.region_name.toLowerCase().includes('tokyo') ||
+        i.region.region_name.toLowerCase().includes('osaka')
+      ).length,
+      'gpu-korea': gpuInstances.filter(i =>
+        i.region.region_name.toLowerCase().includes('seoul')
+      ).length,
+    };
+
+    return new Response(JSON.stringify({
+      success: true,
+      total: instances.length,
+      region_counts: regionCounts,
+      gpu_counts: gpuCounts,
+      instances,
+    }), {
+      headers: {
+        ...CORS_HEADERS,
+        'Content-Type': 'application/json',
+        'Cache-Control': 'public, max-age=300', // 5분 캐시
+      },
+    });
+  } catch (error) {
+    console.error('[Pricing] D1 query error:', error);
+    return new Response(JSON.stringify({
+      success: false,
+      error: error instanceof Error ? error.message : 'Database query failed',
+    }), {
+      status: 500,
+      headers: {
+        ...CORS_HEADERS,
+        'Content-Type': 'application/json',
+      },
+    });
+  }
+};
+
+export const onRequestOptions: PagesFunction<Env> = async () => {
+  return createCorsPreflightResponse();
+};
diff --git a/functions/api/recommend.ts b/functions/api/recommend.ts
new file mode 100644
index 0000000..769d62d
--- /dev/null
+++ b/functions/api/recommend.ts
@@ -0,0 +1,47 @@
+/**
+ * Recommendation endpoint
+ * POST /api/recommend → Worker POST /recommend
+ */
+
+import { type PagesFunction } from '@cloudflare/workers-types';
+import {
+  Env,
+  createCorsPreflightResponse,
+  createErrorResponse,
+  proxyToWorker,
+} from '../_shared/proxy';
+
+export const onRequestPost: PagesFunction<Env> = async ({ request, env }) => {
+  try {
+    // Read request body
+    const body = await request.text();
+
+    // Validate JSON
+    if (body) {
+      try {
+        JSON.parse(body);
+      } catch {
+        return createErrorResponse('Invalid JSON in request body', 400);
+      }
+    }
+
+    return proxyToWorker(env, '/recommend', {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body,
+    });
+  } catch (error) {
+    console.error('[Recommend] Failed to process request:', error);
+    return createErrorResponse(
+      'Failed to process recommendation request',
+      500,
+      error instanceof Error ? error.message : String(error)
+    );
+  }
+};
+
+export const onRequestOptions: PagesFunction<Env> = async () => {
+  return createCorsPreflightResponse();
+};
diff --git a/index.html b/index.html
index 0bef204..a7ab9dc 100644
--- a/index.html
+++ b/index.html
@@ -243,6 +243,268 @@
     </div>
   </section>
 
+  <!-- Pricing -->
+  <section id="pricing" class="pt-12 pb-24 relative overflow-hidden">
+    <!-- Background Effects -->
+    <div class="absolute inset-0 gradient-bg opacity-50"></div>
+    <div class="absolute top-1/4 -right-32 w-96 h-96 bg-purple-500/10 rounded-full blur-3xl"></div>
+    <div class="absolute bottom-1/4 -left-32 w-96 h-96 bg-brand-500/10 rounded-full blur-3xl"></div>
+
+    <div class="max-w-7xl mx-auto px-6 relative z-10">
+      <div class="text-center mb-8 animate-on-scroll">
+        <div class="inline-flex items-center gap-2 px-4 py-2 rounded-full glass-panel text-sm text-slate-300 mb-6">
+          <span class="w-2 h-2 rounded-full bg-green-400 animate-pulse"></span>
+          투명한 가격 정책
+        </div>
+        <h2 class="text-3xl md:text-4xl font-bold mb-4">합리적인 <span class="gradient-text">요금제</span></h2>
+        <p class="text-slate-400 text-lg">전 세계 4개 리전에서 제공되는 최적의 인프라 요금</p>
+        <p class="text-slate-500 text-sm mt-2">(월간 기준, VAT 포함)</p>
+      </div>
+
+      <!-- Real-time Cloud Pricing -->
+      <div x-data="pricingTable()" x-init="init()" class="glass-card-static p-8 rounded-3xl mb-12 animate-on-scroll">
+        <!-- Header -->
+        <div class="flex flex-col md:flex-row justify-between items-start md:items-center gap-4 mb-6">
+          <div class="flex items-center gap-3">
+            <span class="text-lg font-bold text-white">🔥 Forge Instances</span>
+            <span x-show="fromCache" class="text-xs text-slate-500 glass-panel px-2 py-1 rounded">캐시됨</span>
+          </div>
+          <button @click="forceRefresh()" :disabled="loading" class="p-2 glass-panel rounded-lg hover:bg-slate-700 transition disabled:opacity-50" title="새로고침">
+            <svg class="w-5 h-5 text-slate-400" :class="loading && 'animate-spin'" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"></path>
+            </svg>
+          </button>
+        </div>
+
+        <!-- City Tabs -->
+        <div class="flex flex-wrap gap-2 mb-4">
+          <template x-for="city in cities" :key="city.id">
+            <button
+              @click="selectedCity = city.id; onFilterChange()"
+              :class="selectedCity === city.id
+                ? 'bg-brand-500 text-white border-brand-500'
+                : 'bg-transparent text-slate-400 border-slate-600 hover:border-slate-500 hover:text-white'"
+              class="px-4 py-2 rounded-lg border text-sm font-medium transition-all flex items-center gap-2"
+              :title="city.desc || ''">
+              <span x-text="city.flag"></span>
+              <span x-text="city.name"></span>
+              <span x-show="city.desc" class="text-[10px] opacity-60 hidden md:inline" x-text="city.desc"></span>
+              <span class="text-xs opacity-70" x-text="'(' + getInstanceCountByCity(city.id) + ')'"></span>
+            </button>
+          </template>
+        </div>
+
+        <!-- Seoul Subtabs (서울 선택 시 인스턴스 타입 필터) -->
+        <div x-show="selectedCity === 'seoul'" x-transition class="mb-4">
+          <div class="flex flex-wrap gap-2">
+            <template x-for="type in seoulTypes" :key="type.id">
+              <button
+                @click="selectedSeoulType = type.id; onFilterChange()"
+                :class="selectedSeoulType === type.id
+                  ? 'bg-brand-500 text-white border-brand-500'
+                  : 'bg-transparent text-slate-400 border-slate-600 hover:border-slate-500 hover:text-white'"
+                class="px-4 py-2 rounded-lg border text-sm font-medium transition-all flex items-center gap-2"
+                :title="type.desc">
+                <span x-text="type.name"></span>
+                <span class="text-xs opacity-70" x-text="'(' + getSeoulTypeCount(type.id) + ')'"></span>
+              </button>
+            </template>
+          </div>
+        </div>
+
+        <!-- Global Subtabs (도쿄/오사카/싱가폴 선택 시 인스턴스 타입 필터) -->
+        <div x-show="selectedCity === 'global'" x-transition class="mb-4">
+          <div class="flex flex-wrap gap-2">
+            <template x-for="type in globalTypes" :key="type.id">
+              <button
+                @click="selectedGlobalType = type.id; onFilterChange()"
+                :class="selectedGlobalType === type.id
+                  ? 'bg-brand-500 text-white border-brand-500'
+                  : 'bg-transparent text-slate-400 border-slate-600 hover:border-slate-500 hover:text-white'"
+                class="px-4 py-2 rounded-lg border text-sm font-medium transition-all flex items-center gap-2"
+                :title="type.desc">
+                <span x-text="type.name"></span>
+                <span class="text-xs opacity-70" x-text="'(' + getGlobalTypeCount(type.id) + ')'"></span>
+              </button>
+            </template>
+          </div>
+        </div>
+
+        <!-- GPU 탭에서 간격 맞추기 -->
+        <div x-show="selectedCity.startsWith('gpu-')" class="mb-4"></div>
+
+        <!-- Status Bar -->
+        <div class="flex justify-between items-center mb-4 text-xs text-slate-500">
+          <span x-show="!loading && !error">
+            <span x-text="filteredInstances.length"></span>개 인스턴스
+            <span x-show="selectedCity !== 'all'"> · <span x-text="cities.find(c => c.id === selectedCity)?.name"></span></span>
+            <span x-show="selectedCity === 'seoul'"> · <span x-text="seoulTypes.find(t => t.id === selectedSeoulType)?.name"></span></span>
+            <span x-show="selectedCity === 'global'"> · <span x-text="globalTypes.find(t => t.id === selectedGlobalType)?.name"></span></span>
+          </span>
+          <span x-show="loading" class="flex items-center gap-2">
+            <svg class="w-4 h-4 animate-spin" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"></path>
+            </svg>
+            불러오는 중...
+          </span>
+        </div>
+
+        <!-- Error State -->
+        <div x-show="error" class="mb-4 p-4 bg-red-500/10 border border-red-500/30 rounded-lg text-red-400 text-sm">
+          <span x-text="error"></span>
+          <button @click="refresh()" class="ml-2 underline hover:no-underline">다시 시도</button>
+        </div>
+
+        <!-- Pricing Table -->
+        <div x-show="!error" x-transition class="overflow-x-auto">
+          <table class="w-full text-left font-sans" aria-label="클라우드 인스턴스 가격 비교표">
+            <caption class="sr-only">실시간 클라우드 인스턴스 가격입니다.</caption>
+            <thead>
+              <tr class="text-slate-500 text-sm border-b border-slate-700">
+                <!-- GPU 컬럼 (GPU 탭에서만 표시) -->
+                <th x-show="selectedCity.startsWith('gpu-')" class="pb-4 font-medium pl-4 text-left">GPU 모델</th>
+                <th class="pb-4 font-medium text-center cursor-pointer hover:text-white transition" :class="!selectedCity.startsWith('gpu-') && 'pl-4'" @click="toggleSort('vcpu')">
+                  vCPU <span x-show="sortBy === 'vcpu'" class="text-brand-400" x-text="sortOrder === 'asc' ? '↑' : '↓'"></span>
+                </th>
+                <th class="pb-4 font-medium text-center cursor-pointer hover:text-white transition" @click="toggleSort('memory')">
+                  RAM <span x-show="sortBy === 'memory'" class="text-brand-400" x-text="sortOrder === 'asc' ? '↑' : '↓'"></span>
+                </th>
+                <th class="pb-4 font-medium text-center">Storage</th>
+                <th class="pb-4 font-medium text-center">Transfer</th>
+                <th class="pb-4 font-medium text-right">시간요금</th>
+                <th class="pb-4 font-medium text-right pr-4 cursor-pointer hover:text-white transition" @click="toggleSort('price')">
+                  월요금 <span x-show="sortBy === 'price'" class="text-brand-400" x-text="sortOrder === 'asc' ? '↑' : '↓'"></span>
+                </th>
+              </tr>
+            </thead>
+            <tbody class="text-slate-300 text-sm">
+              <!-- Loading Skeleton -->
+              <template x-if="loading && filteredInstances.length === 0">
+                <template x-for="i in 5" :key="i">
+                  <tr class="border-b border-slate-700/50 animate-pulse">
+                    <td class="py-4 pl-4 text-center"><div class="h-4 bg-slate-700 rounded w-12 mx-auto"></div></td>
+                    <td class="py-4 text-center"><div class="h-4 bg-slate-700 rounded w-12 mx-auto"></div></td>
+                    <td class="py-4 text-center"><div class="h-4 bg-slate-700 rounded w-12 mx-auto"></div></td>
+                    <td class="py-4 text-center"><div class="h-4 bg-slate-700 rounded w-10 mx-auto"></div></td>
+                    <td class="py-4 text-right"><div class="h-4 bg-slate-700 rounded w-16 ml-auto"></div></td>
+                    <td class="py-4 pr-4 text-right"><div class="h-4 bg-slate-700 rounded w-20 ml-auto"></div></td>
+                  </tr>
+                </template>
+              </template>
+
+              <!-- Instance Rows -->
+              <template x-for="(inst, idx) in filteredInstances" :key="inst.id + '-' + (inst.region?.region_code || idx)">
+                <tr class="border-b border-slate-700/50 hover:bg-slate-800/50 transition" :class="idx === 0 && 'bg-brand-500/5 border-l-4 border-l-brand-500'">
+                  <!-- GPU (GPU 탭에서만 표시) -->
+                  <td x-show="selectedCity.startsWith('gpu-')" class="py-4 pl-4 text-left">
+                    <div class="flex flex-col gap-0.5">
+                      <span class="text-green-400 font-bold text-sm" x-text="inst.instance_name || inst.gpu_type"></span>
+                      <span class="text-[10px] text-slate-500" x-text="inst.gpu_count > 1 ? inst.gpu_count + '× GPU' : ''"></span>
+                    </div>
+                  </td>
+                  <!-- vCPU -->
+                  <td class="py-4 text-center" :class="!selectedCity.startsWith('gpu-') && 'pl-4'">
+                    <span class="text-brand-400 font-bold" x-text="inst.vcpu + ' Core' + (inst.vcpu > 1 ? 's' : '')"></span>
+                    <span x-show="inst.id && inst.id.endsWith('-v6')" class="ml-1 text-[10px] px-1.5 py-0.5 bg-purple-500/20 text-purple-400 rounded font-medium">IPv6 only</span>
+                  </td>
+                  <!-- RAM -->
+                  <td class="py-4 text-center" x-text="formatMemory(inst.memory_mb)"></td>
+                  <!-- Storage -->
+                  <td class="py-4 text-center">
+                    <span x-text="formatStorage(inst.storage_gb)"></span>
+                    <span x-show="inst.storage_gb && inst.storage_gb <= 1" class="ml-1 text-[10px] px-1.5 py-0.5 bg-amber-500/20 text-amber-400 rounded font-medium">블록 스토리지 전용</span>
+                  </td>
+                  <!-- Transfer -->
+                  <td class="py-4 text-center" x-text="formatTransfer(inst.transfer_tb)"></td>
+                  <!-- 시간당 요금 (DB에서 가져온 한화 금액) -->
+                  <td class="py-4 text-right">
+                    <div class="text-sm text-slate-400" x-text="formatKrwHourly(inst.pricing?.hourly_price_krw)"></div>
+                  </td>
+                  <!-- 월 요금 (DB에서 가져온 한화 금액) -->
+                  <td class="py-4 pr-4 text-right">
+                    <div class="font-bold text-lg" :class="idx === 0 ? 'text-brand-400' : 'text-white'" x-text="formatKrw(inst.pricing?.monthly_price_krw)"></div>
+                  </td>
+                </tr>
+              </template>
+
+              <!-- Empty State -->
+              <template x-if="!loading && filteredInstances.length === 0 && !error">
+                <tr>
+                  <td :colspan="selectedCity.startsWith('gpu-') ? 7 : 6" class="py-12 text-center text-slate-500">
+                    선택한 조건에 맞는 인스턴스가 없습니다.
+                  </td>
+                </tr>
+              </template>
+            </tbody>
+          </table>
+        </div>
+
+        <!-- Footer Note -->
+        <div class="mt-6 text-xs text-slate-500">
+          <p>* 실시간 API 데이터 기준. 실제 요금은 변동될 수 있습니다.</p>
+        </div>
+      </div>
+
+      <!-- Feature Highlight -->
+      <div class="grid md:grid-cols-2 gap-8 max-w-4xl mx-auto animate-on-scroll">
+        <div class="glass-card p-6 rounded-2xl flex items-start gap-4 group">
+           <div class="w-12 h-12 rounded-xl bg-gradient-to-br from-brand-500/20 to-purple-500/20 flex items-center justify-center text-2xl group-hover:scale-110 transition-transform">🌍</div>
+           <div>
+             <h3 class="font-bold text-white mb-2">글로벌 4개 리전 운영</h3>
+             <p class="text-sm text-slate-400 leading-relaxed">도쿄(JP-East), 오사카(JP-West), 싱가포르(SG-Core), 홍콩(HK-Hub)에서 즉시 서버를 생성할 수 있습니다.</p>
+           </div>
+        </div>
+        <div class="glass-card p-6 rounded-2xl flex items-start gap-4 group border-brand-500/20">
+           <div class="w-12 h-12 rounded-xl bg-gradient-to-br from-green-500/20 to-brand-500/20 flex items-center justify-center text-2xl group-hover:scale-110 transition-transform">🛡️</div>
+           <div>
+             <h3 class="font-bold text-white mb-2">프리미엄 DDoS 방어</h3>
+             <p class="text-sm text-slate-400 leading-relaxed">모든 리전에 엔터프라이즈급 DDoS 방어 옵션(₩99,000, VAT 포함)을 추가하여 L7 공격까지 완벽하게 방어할 수 있습니다.</p>
+           </div>
+        </div>
+      </div>
+
+      <!-- Bare Metal Section -->
+      <div class="mt-16 glass-card p-8 md:p-10 rounded-3xl relative overflow-hidden animate-on-scroll pricing-featured">
+        <!-- Background Glow Effects -->
+        <div class="absolute inset-0 bg-gradient-to-br from-red-500/5 via-transparent to-purple-500/5 z-0"></div>
+        <div class="absolute -top-20 -right-20 w-60 h-60 bg-red-500/10 rounded-full blur-3xl"></div>
+        <div class="absolute -bottom-20 -left-20 w-60 h-60 bg-brand-500/10 rounded-full blur-3xl"></div>
+
+        <div class="relative z-10 flex flex-col md:flex-row items-center justify-between gap-8">
+          <div>
+            <div class="inline-flex items-center gap-2 px-4 py-1.5 rounded-full bg-gradient-to-r from-red-500/20 to-orange-500/20 border border-red-500/30 text-xs font-bold text-red-400 mb-4">
+              <span class="w-1.5 h-1.5 rounded-full bg-red-400 animate-pulse"></span>
+              EXTREME PERFORMANCE
+            </div>
+            <h3 class="text-3xl md:text-4xl font-bold text-white mb-3">Bare Metal <span class="gradient-text">Dedicated</span></h3>
+            <p class="text-slate-400 max-w-xl leading-relaxed">
+              가상화가 없는 100% 물리 서버를 단독으로 사용하세요. <br>
+              <span class="text-white font-mono">AMD EPYC 9004</span> 프로세서와 <span class="text-white font-mono">DDR5 ECC RAM</span>의 압도적인 성능을 경험할 수 있습니다.
+            </p>
+            <div class="flex flex-wrap gap-4 mt-6 text-sm font-mono text-slate-300">
+              <span class="flex items-center gap-2 glass-panel px-3 py-1.5 rounded-lg"><span class="text-brand-400">✓</span> Full IPMI Access</span>
+              <span class="flex items-center gap-2 glass-panel px-3 py-1.5 rounded-lg"><span class="text-brand-400">✓</span> Custom Hardware</span>
+              <span class="flex items-center gap-2 glass-panel px-3 py-1.5 rounded-lg"><span class="text-brand-400">✓</span> 25Gbps Private Network</span>
+            </div>
+          </div>
+
+          <div class="flex flex-col items-center md:items-end gap-4">
+            <div class="text-center md:text-right glass-panel p-6 rounded-2xl">
+              <span class="text-sm text-slate-400">Live Inventory Pricing</span>
+              <div class="text-4xl md:text-5xl font-bold text-white mt-1">₩169,000<span class="text-lg text-slate-500 font-normal">~</span></div>
+              <p class="text-xs text-brand-400 mt-2">🇸🇬 싱가포르 최저가 재고 보유 중</p>
+              <p class="text-[10px] text-slate-400 mt-1">※ 서울/도쿄 리전 재고 및 가격은 봇으로 확인하세요.</p>
+            </div>
+            <a href="https://t.me/AnvilForgeBot" target="_blank" rel="noopener noreferrer" class="btn-glow px-8 py-4 bg-gradient-to-r from-brand-600 to-brand-500 text-white font-bold rounded-xl hover:shadow-lg hover:shadow-brand-500/30 transition-all flex items-center gap-3">
+              <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm4.64 6.8c-.15 1.58-.8 5.42-1.13 7.19-.14.75-.42 1-.68 1.03-.58.05-1.02-.38-1.58-.75-.88-.58-1.38-.94-2.23-1.5-.99-.65-.35-1.01.22-1.59.15-.15 2.71-2.48 2.76-2.69a.2.2 0 00-.05-.18c-.06-.05-.14-.03-.21-.02-.09.02-1.49.95-4.22 2.79-.4.27-.76.41-1.08.4-.36-.01-1.04-.2-1.55-.37-.62-.2-1.12-.31-1.15-.63.03-.37.59-.75 1.5-.95 6.07-2.64 10.12-4.38 12.15-5.21 2.91-1.2 3.51-1.4 3.91-1.41.09 0 .28.02.41.09.11.06.23.14.3.24.08.12.12.33.09.57z"/></svg>
+              실시간 재고/가격 조회 (Bot)
+            </a>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+
   <!-- Technical Features -->
   <section id="features" class="py-24 bg-dark-800 relative overflow-hidden">
     <!-- Background accent -->
@@ -576,272 +838,6 @@
     </div>
   </section>
 
-  <!-- Pricing -->
-  <section id="pricing" class="py-24 relative overflow-hidden">
-    <!-- Background Effects -->
-    <div class="absolute inset-0 gradient-bg opacity-50"></div>
-    <div class="absolute top-1/4 -right-32 w-96 h-96 bg-purple-500/10 rounded-full blur-3xl"></div>
-    <div class="absolute bottom-1/4 -left-32 w-96 h-96 bg-brand-500/10 rounded-full blur-3xl"></div>
-
-    <div class="max-w-7xl mx-auto px-6 relative z-10">
-      <div class="text-center mb-8 animate-on-scroll">
-        <div class="inline-flex items-center gap-2 px-4 py-2 rounded-full glass-panel text-sm text-slate-300 mb-6">
-          <span class="w-2 h-2 rounded-full bg-green-400 animate-pulse"></span>
-          투명한 가격 정책
-        </div>
-        <h2 class="text-3xl md:text-4xl font-bold mb-4">합리적인 <span class="gradient-text">요금제</span></h2>
-        <p class="text-slate-400 text-lg">전 세계 4개 리전에서 제공되는 최적의 인프라 요금</p>
-        <p class="text-slate-500 text-sm mt-2">(월간 기준, VAT 포함)</p>
-      </div>
-
-      <!-- Real-time Cloud Pricing -->
-      <div x-data="pricingTable()" x-init="init()" class="glass-card-static p-8 rounded-3xl mb-12 animate-on-scroll">
-        <!-- Header -->
-        <div class="flex flex-col md:flex-row justify-between items-start md:items-center gap-4 mb-6">
-          <div class="flex items-center gap-3">
-            <span class="text-lg font-bold text-white">🔥 Forge Instances</span>
-            <span x-show="fromCache" class="text-xs text-slate-500 glass-panel px-2 py-1 rounded">캐시됨</span>
-          </div>
-          <button @click="forceRefresh()" :disabled="loading" class="p-2 glass-panel rounded-lg hover:bg-slate-700 transition disabled:opacity-50" title="새로고침">
-            <svg class="w-5 h-5 text-slate-400" :class="loading && 'animate-spin'" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"></path>
-            </svg>
-          </button>
-        </div>
-
-        <!-- City Tabs -->
-        <div class="flex flex-wrap gap-2 mb-4">
-          <template x-for="city in cities" :key="city.id">
-            <button
-              @click="selectedCity = city.id; onFilterChange()"
-              :class="selectedCity === city.id
-                ? 'bg-brand-500 text-white border-brand-500'
-                : 'bg-transparent text-slate-400 border-slate-600 hover:border-slate-500 hover:text-white'"
-              class="px-4 py-2 rounded-lg border text-sm font-medium transition-all flex items-center gap-2"
-              :title="city.desc || ''">
-              <span x-text="city.flag"></span>
-              <span x-text="city.name"></span>
-              <span x-show="city.desc" class="text-[10px] opacity-60 hidden md:inline" x-text="city.desc"></span>
-              <span class="text-xs opacity-70" x-text="'(' + getInstanceCountByCity(city.id) + ')'"></span>
-            </button>
-          </template>
-        </div>
-
-        <!-- Seoul Subtabs (서울 선택 시 인스턴스 타입 필터) -->
-        <div x-show="selectedCity === 'seoul'" x-transition class="mb-4">
-          <div class="glass-panel rounded-xl p-1 inline-flex gap-1">
-            <template x-for="type in seoulTypes" :key="type.id">
-              <button
-                @click="selectedSeoulType = type.id; onFilterChange()"
-                :class="selectedSeoulType === type.id
-                  ? 'bg-brand-500/20 text-brand-400 shadow-lg shadow-brand-500/10'
-                  : 'text-slate-400 hover:text-white hover:bg-slate-700/50'"
-                class="px-3 py-1.5 rounded-lg text-xs font-medium transition-all flex items-center gap-1.5"
-                :title="type.desc">
-                <span x-text="type.name"></span>
-                <span class="text-[10px] opacity-60" x-text="'(' + getSeoulTypeCount(type.id) + ')'"></span>
-              </button>
-            </template>
-          </div>
-        </div>
-
-        <!-- Global Subtabs (도쿄/오사카/싱가폴 선택 시 인스턴스 타입 필터) -->
-        <div x-show="selectedCity === 'global'" x-transition class="mb-4">
-          <div class="glass-panel rounded-xl p-1 inline-flex gap-1">
-            <template x-for="type in globalTypes" :key="type.id">
-              <button
-                @click="selectedGlobalType = type.id; onFilterChange()"
-                :class="selectedGlobalType === type.id
-                  ? 'bg-brand-500/20 text-brand-400 shadow-lg shadow-brand-500/10'
-                  : 'text-slate-400 hover:text-white hover:bg-slate-700/50'"
-                class="px-3 py-1.5 rounded-lg text-xs font-medium transition-all flex items-center gap-1.5"
-                :title="type.desc">
-                <span x-text="type.name"></span>
-                <span class="text-[10px] opacity-60" x-text="'(' + getGlobalTypeCount(type.id) + ')'"></span>
-              </button>
-            </template>
-          </div>
-        </div>
-
-        <!-- GPU 탭에서 간격 맞추기 -->
-        <div x-show="selectedCity.startsWith('gpu-')" class="mb-4"></div>
-
-        <!-- Status Bar -->
-        <div class="flex justify-between items-center mb-4 text-xs text-slate-500">
-          <span x-show="!loading && !error">
-            <span x-text="filteredInstances.length"></span>개 인스턴스
-            <span x-show="selectedCity !== 'all'"> · <span x-text="cities.find(c => c.id === selectedCity)?.name"></span></span>
-            <span x-show="selectedCity === 'seoul'"> · <span x-text="seoulTypes.find(t => t.id === selectedSeoulType)?.name"></span></span>
-            <span x-show="selectedCity === 'global'"> · <span x-text="globalTypes.find(t => t.id === selectedGlobalType)?.name"></span></span>
-          </span>
-          <span x-show="loading" class="flex items-center gap-2">
-            <svg class="w-4 h-4 animate-spin" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"></path>
-            </svg>
-            불러오는 중...
-          </span>
-        </div>
-
-        <!-- Error State -->
-        <div x-show="error" class="mb-4 p-4 bg-red-500/10 border border-red-500/30 rounded-lg text-red-400 text-sm">
-          <span x-text="error"></span>
-          <button @click="refresh()" class="ml-2 underline hover:no-underline">다시 시도</button>
-        </div>
-
-        <!-- Pricing Table -->
-        <div x-show="!error" x-transition class="overflow-x-auto">
-          <table class="w-full text-left font-sans" aria-label="클라우드 인스턴스 가격 비교표">
-            <caption class="sr-only">실시간 클라우드 인스턴스 가격입니다.</caption>
-            <thead>
-              <tr class="text-slate-500 text-sm border-b border-slate-700">
-                <!-- GPU 컬럼 (GPU 탭에서만 표시) -->
-                <th x-show="selectedCity.startsWith('gpu-')" class="pb-4 font-medium pl-4 text-left">GPU 모델</th>
-                <th class="pb-4 font-medium text-center cursor-pointer hover:text-white transition" :class="!selectedCity.startsWith('gpu-') && 'pl-4'" @click="toggleSort('vcpu')">
-                  vCPU <span x-show="sortBy === 'vcpu'" class="text-brand-400" x-text="sortOrder === 'asc' ? '↑' : '↓'"></span>
-                </th>
-                <th class="pb-4 font-medium text-center cursor-pointer hover:text-white transition" @click="toggleSort('memory')">
-                  RAM <span x-show="sortBy === 'memory'" class="text-brand-400" x-text="sortOrder === 'asc' ? '↑' : '↓'"></span>
-                </th>
-                <th class="pb-4 font-medium text-center">Storage</th>
-                <th class="pb-4 font-medium text-center">Transfer</th>
-                <th class="pb-4 font-medium text-right">시간요금</th>
-                <th class="pb-4 font-medium text-right pr-4 cursor-pointer hover:text-white transition" @click="toggleSort('price')">
-                  월요금 <span x-show="sortBy === 'price'" class="text-brand-400" x-text="sortOrder === 'asc' ? '↑' : '↓'"></span>
-                </th>
-              </tr>
-            </thead>
-            <tbody class="text-slate-300 text-sm">
-              <!-- Loading Skeleton -->
-              <template x-if="loading && filteredInstances.length === 0">
-                <template x-for="i in 5" :key="i">
-                  <tr class="border-b border-slate-700/50 animate-pulse">
-                    <td class="py-4 pl-4 text-center"><div class="h-4 bg-slate-700 rounded w-12 mx-auto"></div></td>
-                    <td class="py-4 text-center"><div class="h-4 bg-slate-700 rounded w-12 mx-auto"></div></td>
-                    <td class="py-4 text-center"><div class="h-4 bg-slate-700 rounded w-12 mx-auto"></div></td>
-                    <td class="py-4 text-center"><div class="h-4 bg-slate-700 rounded w-10 mx-auto"></div></td>
-                    <td class="py-4 text-right"><div class="h-4 bg-slate-700 rounded w-16 ml-auto"></div></td>
-                    <td class="py-4 pr-4 text-right"><div class="h-4 bg-slate-700 rounded w-20 ml-auto"></div></td>
-                  </tr>
-                </template>
-              </template>
-
-              <!-- Instance Rows -->
-              <template x-for="(inst, idx) in filteredInstances" :key="inst.id + '-' + (inst.region?.region_code || idx)">
-                <tr class="border-b border-slate-700/50 hover:bg-slate-800/50 transition" :class="idx === 0 && 'bg-brand-500/5 border-l-4 border-l-brand-500'">
-                  <!-- GPU (GPU 탭에서만 표시) -->
-                  <td x-show="selectedCity.startsWith('gpu-')" class="py-4 pl-4 text-left">
-                    <div class="flex flex-col gap-0.5">
-                      <span class="text-green-400 font-bold text-sm" x-text="inst.instance_name || inst.gpu_type"></span>
-                      <span class="text-[10px] text-slate-500" x-text="inst.gpu_count > 1 ? inst.gpu_count + '× GPU' : ''"></span>
-                    </div>
-                  </td>
-                  <!-- vCPU -->
-                  <td class="py-4 text-center" :class="!selectedCity.startsWith('gpu-') && 'pl-4'">
-                    <span class="text-brand-400 font-bold" x-text="inst.vcpu + ' Core' + (inst.vcpu > 1 ? 's' : '')"></span>
-                    <span x-show="inst.id && inst.id.endsWith('-v6')" class="ml-1 text-[10px] px-1.5 py-0.5 bg-purple-500/20 text-purple-400 rounded font-medium">IPv6 only</span>
-                  </td>
-                  <!-- RAM -->
-                  <td class="py-4 text-center" x-text="formatMemory(inst.memory_mb)"></td>
-                  <!-- Storage -->
-                  <td class="py-4 text-center">
-                    <span x-text="formatStorage(inst.storage_gb)"></span>
-                    <span x-show="inst.storage_gb && inst.storage_gb <= 1" class="ml-1 text-[10px] px-1.5 py-0.5 bg-amber-500/20 text-amber-400 rounded font-medium">블록 스토리지 전용</span>
-                  </td>
-                  <!-- Transfer -->
-                  <td class="py-4 text-center" x-text="formatTransfer(inst.transfer_tb)"></td>
-                  <!-- 시간당 요금 (DB에서 가져온 한화 금액) -->
-                  <td class="py-4 text-right">
-                    <div class="text-sm text-slate-400" x-text="formatKrwHourly(inst.pricing?.hourly_price_krw)"></div>
-                  </td>
-                  <!-- 월 요금 (DB에서 가져온 한화 금액) -->
-                  <td class="py-4 pr-4 text-right">
-                    <div class="font-bold text-lg" :class="idx === 0 ? 'text-brand-400' : 'text-white'" x-text="formatKrw(inst.pricing?.monthly_price_krw)"></div>
-                  </td>
-                </tr>
-              </template>
-
-              <!-- Empty State -->
-              <template x-if="!loading && filteredInstances.length === 0 && !error">
-                <tr>
-                  <td :colspan="selectedCity.startsWith('gpu-') ? 7 : 6" class="py-12 text-center text-slate-500">
-                    선택한 조건에 맞는 인스턴스가 없습니다.
-                  </td>
-                </tr>
-              </template>
-            </tbody>
-          </table>
-        </div>
-
-        <!-- Footer Note -->
-        <div class="mt-6 flex flex-col md:flex-row justify-between items-center gap-4 text-xs text-slate-500">
-          <p>* 실시간 API 데이터 기준. 실제 요금은 변동될 수 있습니다.</p>
-          <a href="https://t.me/AnvilForgeBot" target="_blank" rel="noopener noreferrer" class="px-4 py-2 bg-slate-700 hover:bg-slate-600 text-white font-bold rounded transition flex items-center gap-2">
-            <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm4.64 6.8c-.15 1.58-.8 5.42-1.13 7.19-.14.75-.42 1-.68 1.03-.58.05-1.02-.38-1.58-.75-.88-.58-1.38-.94-2.23-1.5-.99-.65-.35-1.01.22-1.59.15-.15 2.71-2.48 2.76-2.69a.2.2 0 00-.05-.18c-.06-.05-.14-.03-.21-.02-.09.02-1.49.95-4.22 2.79-.4.27-.76.41-1.08.4-.36-.01-1.04-.2-1.55-.37-.62-.2-1.12-.31-1.15-.63.03-.37.59-.75 1.5-.95 6.07-2.64 10.12-4.38 12.15-5.21 2.91-1.2 3.51-1.4 3.91-1.41.09 0 .28.02.41.09.11.06.23.14.3.24.08.12.12.33.09.57z"/></svg>
-            봇으로 서버 생성하기
-          </a>
-        </div>
-      </div>
-
-      <!-- Feature Highlight -->
-      <div class="grid md:grid-cols-2 gap-8 max-w-4xl mx-auto animate-on-scroll">
-        <div class="glass-card p-6 rounded-2xl flex items-start gap-4 group">
-           <div class="w-12 h-12 rounded-xl bg-gradient-to-br from-brand-500/20 to-purple-500/20 flex items-center justify-center text-2xl group-hover:scale-110 transition-transform">🌍</div>
-           <div>
-             <h3 class="font-bold text-white mb-2">글로벌 4개 리전 운영</h3>
-             <p class="text-sm text-slate-400 leading-relaxed">도쿄(JP-East), 오사카(JP-West), 싱가포르(SG-Core), 홍콩(HK-Hub)에서 즉시 서버를 생성할 수 있습니다.</p>
-           </div>
-        </div>
-        <div class="glass-card p-6 rounded-2xl flex items-start gap-4 group border-brand-500/20">
-           <div class="w-12 h-12 rounded-xl bg-gradient-to-br from-green-500/20 to-brand-500/20 flex items-center justify-center text-2xl group-hover:scale-110 transition-transform">🛡️</div>
-           <div>
-             <h3 class="font-bold text-white mb-2">프리미엄 DDoS 방어</h3>
-             <p class="text-sm text-slate-400 leading-relaxed">모든 리전에 엔터프라이즈급 DDoS 방어 옵션(₩99,000, VAT 포함)을 추가하여 L7 공격까지 완벽하게 방어할 수 있습니다.</p>
-           </div>
-        </div>
-      </div>
-
-      <!-- Bare Metal Section -->
-      <div class="mt-16 glass-card p-8 md:p-10 rounded-3xl relative overflow-hidden animate-on-scroll pricing-featured">
-        <!-- Background Glow Effects -->
-        <div class="absolute inset-0 bg-gradient-to-br from-red-500/5 via-transparent to-purple-500/5 z-0"></div>
-        <div class="absolute -top-20 -right-20 w-60 h-60 bg-red-500/10 rounded-full blur-3xl"></div>
-        <div class="absolute -bottom-20 -left-20 w-60 h-60 bg-brand-500/10 rounded-full blur-3xl"></div>
-
-        <div class="relative z-10 flex flex-col md:flex-row items-center justify-between gap-8">
-          <div>
-            <div class="inline-flex items-center gap-2 px-4 py-1.5 rounded-full bg-gradient-to-r from-red-500/20 to-orange-500/20 border border-red-500/30 text-xs font-bold text-red-400 mb-4">
-              <span class="w-1.5 h-1.5 rounded-full bg-red-400 animate-pulse"></span>
-              EXTREME PERFORMANCE
-            </div>
-            <h3 class="text-3xl md:text-4xl font-bold text-white mb-3">Bare Metal <span class="gradient-text">Dedicated</span></h3>
-            <p class="text-slate-400 max-w-xl leading-relaxed">
-              가상화가 없는 100% 물리 서버를 단독으로 사용하세요. <br>
-              <span class="text-white font-mono">AMD EPYC 9004</span> 프로세서와 <span class="text-white font-mono">DDR5 ECC RAM</span>의 압도적인 성능을 경험할 수 있습니다.
-            </p>
-            <div class="flex flex-wrap gap-4 mt-6 text-sm font-mono text-slate-300">
-              <span class="flex items-center gap-2 glass-panel px-3 py-1.5 rounded-lg"><span class="text-brand-400">✓</span> Full IPMI Access</span>
-              <span class="flex items-center gap-2 glass-panel px-3 py-1.5 rounded-lg"><span class="text-brand-400">✓</span> Custom Hardware</span>
-              <span class="flex items-center gap-2 glass-panel px-3 py-1.5 rounded-lg"><span class="text-brand-400">✓</span> 25Gbps Private Network</span>
-            </div>
-          </div>
-
-          <div class="flex flex-col items-center md:items-end gap-4">
-            <div class="text-center md:text-right glass-panel p-6 rounded-2xl">
-              <span class="text-sm text-slate-400">Live Inventory Pricing</span>
-              <div class="text-4xl md:text-5xl font-bold text-white mt-1">₩169,000<span class="text-lg text-slate-500 font-normal">~</span></div>
-              <p class="text-xs text-brand-400 mt-2">🇸🇬 싱가포르 최저가 재고 보유 중</p>
-              <p class="text-[10px] text-slate-400 mt-1">※ 서울/도쿄 리전 재고 및 가격은 봇으로 확인하세요.</p>
-            </div>
-            <a href="https://t.me/AnvilForgeBot" target="_blank" rel="noopener noreferrer" class="btn-glow px-8 py-4 bg-gradient-to-r from-brand-600 to-brand-500 text-white font-bold rounded-xl hover:shadow-lg hover:shadow-brand-500/30 transition-all flex items-center gap-3">
-              <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm4.64 6.8c-.15 1.58-.8 5.42-1.13 7.19-.14.75-.42 1-.68 1.03-.58.05-1.02-.38-1.58-.75-.88-.58-1.38-.94-2.23-1.5-.99-.65-.35-1.01.22-1.59.15-.15 2.71-2.48 2.76-2.69a.2.2 0 00-.05-.18c-.06-.05-.14-.03-.21-.02-.09.02-1.49.95-4.22 2.79-.4.27-.76.41-1.08.4-.36-.01-1.04-.2-1.55-.37-.62-.2-1.12-.31-1.15-.63.03-.37.59-.75 1.5-.95 6.07-2.64 10.12-4.38 12.15-5.21 2.91-1.2 3.51-1.4 3.91-1.41.09 0 .28.02.41.09.11.06.23.14.3.24.08.12.12.33.09.57z"/></svg>
-              실시간 재고/가격 조회 (Bot)
-            </a>
-          </div>
-        </div>
-      </div>
-    </div>
-  </section>
-
   </main>
   <!-- End Main Content -->
 
diff --git a/package-lock.json b/package-lock.json
index f1662a7..64616a8 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,10 +9,19 @@
       "version": "1.0.0",
       "license": "ISC",
       "devDependencies": {
+        "@cloudflare/workers-types": "^4.20250110.0",
         "@tailwindcss/cli": "^4.1.18",
-        "tailwindcss": "^4.1.18"
+        "tailwindcss": "^4.1.18",
+        "typescript": "^5.7.3"
       }
     },
+    "node_modules/@cloudflare/workers-types": {
+      "version": "4.20260122.0",
+      "resolved": "https://registry.npmjs.org/@cloudflare/workers-types/-/workers-types-4.20260122.0.tgz",
+      "integrity": "sha512-ktjHXwjsjxFqsnCb9YQj9l12i6yfK5klBggKddogQ4KT3GCaU3Kq6IAkd4bGZSZrgwwbCkhAuhTzz4a3llA97g==",
+      "dev": true,
+      "license": "MIT OR Apache-2.0"
+    },
     "node_modules/@jridgewell/gen-mapping": {
       "version": "0.3.13",
       "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.13.tgz",
@@ -1050,6 +1059,20 @@
         "type": "opencollective",
         "url": "https://opencollective.com/webpack"
       }
+    },
+    "node_modules/typescript": {
+      "version": "5.9.3",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.9.3.tgz",
+      "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "bin": {
+        "tsc": "bin/tsc",
+        "tsserver": "bin/tsserver"
+      },
+      "engines": {
+        "node": ">=14.17"
+      }
     }
   }
 }
diff --git a/package.json b/package.json
index 4c48266..0beb11c 100644
--- a/package.json
+++ b/package.json
@@ -17,7 +17,9 @@
   "author": "",
   "license": "ISC",
   "devDependencies": {
+    "@cloudflare/workers-types": "^4.20250110.0",
     "@tailwindcss/cli": "^4.1.18",
-    "tailwindcss": "^4.1.18"
+    "tailwindcss": "^4.1.18",
+    "typescript": "^5.7.3"
   }
 }
diff --git a/tsconfig.json b/tsconfig.json
new file mode 100644
index 0000000..f83210e
--- /dev/null
+++ b/tsconfig.json
@@ -0,0 +1,18 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "module": "ES2022",
+    "lib": ["ES2022"],
+    "types": ["@cloudflare/workers-types"],
+    "moduleResolution": "node",
+    "strict": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true
+  },
+  "include": ["functions/**/*"],
+  "exclude": ["node_modules"]
+}
diff --git a/wrangler.toml b/wrangler.toml
new file mode 100644
index 0000000..ac46c3b
--- /dev/null
+++ b/wrangler.toml
@@ -0,0 +1,16 @@
+name = "anvil-hosting"
+compatibility_date = "2024-01-01"
+pages_build_output_dir = "."
+
+[vars]
+WORKER_API_URL = "https://cloud-instances-api.kappa-d8e.workers.dev"
+
+# D1 Database binding (cloud-instances-db)
+[[d1_databases]]
+binding = "DB"
+database_name = "cloud-instances-db"
+database_id = "bbcb472d-b25e-4e48-b6ea-112f9fffb4a8"
+
+# Environment variables for local development
+# Production secrets should be set via:
+# wrangler pages secret put WORKER_API_KEY