diff --git a/frontend/src/app/installKbx.ts b/frontend/src/app/installKbx.ts
index 3ef08fdf..5bc43e0a 100644
--- a/frontend/src/app/installKbx.ts
+++ b/frontend/src/app/installKbx.ts
@@ -1,146 +1,20 @@
 /**
- * KBX Foundation v4 App Initialization
- * Bootstraps screen registry, permissions, and UI adapter
+ * App Initialization (minimal)
  */
 
 import type { App } from 'vue'
-import type { KbxScreenDefinition, KbxPermissionDefinition, KbxDensity } from '@shared/contracts/kbx-types'
 
-// Global state
-let screenRegistry: Map<string, KbxScreenDefinition> = new Map()
-let permissionRegistry: Map<string, KbxPermissionDefinition> = new Map()
 let userPermissions: Set<string> = new Set()
-let currentDensity: KbxDensity = 'compact'
 
-/**
- * Register screen definitions from all modules
- */
-export function registerScreens(screens: KbxScreenDefinition[]) {
-  screens.forEach(screen => {
-    screenRegistry.set(screen.screenId, screen)
-  })
-}
-
-/**
- * Register permission definitions
- */
-export function registerPermissions(permissions: KbxPermissionDefinition[]) {
-  permissions.forEach(perm => {
-    permissionRegistry.set(perm.permissionId, perm)
-  })
-}
-
-/**
- * Set user permissions (called after auth)
- */
 export function setUserPermissions(permissions: string[]) {
   userPermissions.clear()
   permissions.forEach(p => userPermissions.add(p))
 }
 
-/**
- * Check if user has permission
- */
 export function hasPermission(permissionId: string): boolean {
   return userPermissions.has(permissionId)
 }
 
-/**
- * Check if user has all permissions
- */
-export function hasAllPermissions(permissionIds: string[]): boolean {
-  return permissionIds.every(id => userPermissions.has(id))
-}
-
-/**
- * Get screen by ID
- */
-export function getScreen(screenId: string): KbxScreenDefinition | undefined {
-  return screenRegistry.get(screenId)
-}
-
-/**
- * Get all screens
- */
-export function getAllScreens(): KbxScreenDefinition[] {
-  return Array.from(screenRegistry.values())
-}
-
-/**
- * Set density (compact, comfortable, touch)
- */
-export function setDensity(density: KbxDensity) {
-  currentDensity = density
-  // Apply to DOM
-  document.documentElement.style.setProperty('--kbx-density', density)
-
-  // Update tokens based on density
-  const tokens = {
-    compact: {
-      inputHeight: '34px',
-      gridRowHeight: '34px',
-      touchTarget: '44px',
-      fontSize: '12px',
-    },
-    comfortable: {
-      inputHeight: '36px',
-      gridRowHeight: '36px',
-      touchTarget: '48px',
-      fontSize: '14px',
-    },
-    touch: {
-      inputHeight: '48px',
-      gridRowHeight: '48px',
-      touchTarget: '52px',
-      fontSize: '16px',
-    },
-  }
-
-  Object.entries(tokens[density]).forEach(([key, value]) => {
-    document.documentElement.style.setProperty(`--kbx-${key}`, value)
-  })
-}
-
-/**
- * Vue plugin install
- */
 export function installKbx(app: App) {
-  // Provide global registry access
-  app.provide('kbx-screens', screenRegistry)
-  app.provide('kbx-permissions', permissionRegistry)
-
-  // Global methods
-  app.config.globalProperties.$kbx = {
-    hasPermission,
-    hasAllPermissions,
-    getScreen,
-    getAllScreens,
-    setDensity,
-  }
-
-  // Initialize default density
-  setDensity('compact')
-
-  // Apply theme colors
-  document.documentElement.style.setProperty('--kbx-color-primary', '#3b82f6')
-  document.documentElement.style.setProperty('--kbx-color-danger', '#ef4444')
-  document.documentElement.style.setProperty('--kbx-color-success', '#10b981')
-  document.documentElement.style.setProperty('--kbx-color-border', '#e5e7eb')
-  document.documentElement.style.setProperty('--kbx-color-text', '#000000')
-  document.documentElement.style.setProperty('--kbx-color-text-muted', '#6b7280')
-  document.documentElement.style.setProperty('--kbx-color-background', '#ffffff')
-  document.documentElement.style.setProperty('--kbx-color-surface', '#ffffff')
-  document.documentElement.style.setProperty('--kbx-color-shell-chrome', '#f9fafb')
-}
-
-// Composable for component usage
-export function useKbx() {
-  return {
-    hasPermission,
-    hasAllPermissions,
-    getScreen,
-    getAllScreens,
-    setDensity,
-    screenRegistry: () => getAllScreens(),
-  }
+  app.config.globalProperties.$permissions = userPermissions
 }
diff --git a/frontend/src/features/approval/registry.ts b/frontend/src/features/approval/registry.ts
index f50edc72..2793688d 100644
--- a/frontend/src/features/approval/registry.ts
+++ b/frontend/src/features/approval/registry.ts
@@ -2,47 +2,13 @@
  * Approval Feature Screen Registry
  */
 
-import type { ScreenDefinition } from '@kbx/contracts'
-
-export const approvalQueueScreen: ScreenDefinition = {
+export const approvalQueueScreen = {
   screenId: 'governance.approval.queue',
   title: 'Approval Queue',
   module: 'ERP',
   path: '/governance/approvals',
   component: () => import('./pages/ApprovalQueue.vue'),
   permissions: ['approval.review'],
-  template: 'T03',
-
-  help: {
-    title: 'Approval Workflow',
-    sections: [
-      {
-        title: 'What is Maker-Checker?',
-        content:
-          'Maker-Checker enforces that critical model decisions require two parties: the requester and an independent reviewer.',
-      },
-      {
-        title: 'How to Approve',
-        content: 'Select a pending request, review the metrics and comments, then approve or reject with your decision.',
-      },
-      {
-        title: 'Decision Criteria',
-        content: 'Activation requires: PBO ≤ 20%, DSR ≥ 95%, OOS ≤ 2.5%, plus 252+ trading-day shadow run.',
-      },
-    ],
-    relatedScreens: ['model-ops.models.list', 'model-ops.shadow-run.queue'],
-  },
-
-  grid: {
-    columnDefs: [
-      { field: 'requestId', headerName: 'Request ID', width: 120 },
-      { field: 'modelName', headerName: 'Model', width: 150 },
-      { field: 'action', headerName: 'Action', width: 100 },
-      { field: 'status', headerName: 'Status', width: 100 },
-      { field: 'requesterName', headerName: 'Requester', width: 120 },
-      { field: 'requestedAt', headerName: 'Date', width: 150 },
-    ],
-  },
 }
 
 export default [approvalQueueScreen]
diff --git a/frontend/src/features/home/pages/HomePage.vue b/frontend/src/features/home/pages/HomePage.vue
index c026ee45..caf99817 100644
--- a/frontend/src/features/home/pages/HomePage.vue
+++ b/frontend/src/features/home/pages/HomePage.vue
@@ -1,377 +1,101 @@
 <script setup lang="ts">
-import { computed, ref } from 'vue'
 import { RouterLink } from 'vue-router'
-import { getAllScreens } from '@/registry/screens'
-import { useScreenPreferenceStore } from '../../../shared/shell/screenPreferenceStore'
 
-interface AttentionItem {
-  id: string
-  title: string
-  module: string
-  count: number
-  path: string
-  severity: 'high' | 'medium' | 'low'
+interface Module {
+  name: string
+  screens: Array<{ label: string; path: string }>
 }
 
-interface ModuleGroup {
-  module: string
-  entries: any[]
-  count: number
-}
-
-const preference = useScreenPreferenceStore()
-
-// Get screen definition
-const homeScreenDef = getAllScreens().find(s => s.screenId === 'home.dashboard')
-const screenDef = computed(() => homeScreenDef)
-
-// Get all screens from registry (excluding internal-only and home)
-const allScreens = computed(() =>
-  getAllScreens()
-    .filter(s => s.screenId !== 'home.dashboard' && s.telemetry?.enabled !== false),
-)
-
-// Build screen index for quick lookup
-const screenByScreenId = computed(() => new Map(allScreens.value.map(s => [s.screenId, s])))
-
-// Favorites from preference store
-const favorites = computed(() => {
-  const faves = preference.favoriteScreenIds
-    .map(id => screenByScreenId.value.get(id))
-    .filter((s): s is any => Boolean(s))
-  return faves
-})
-
-// Group screens by module
-const screensByModule = computed(() => {
-  const grouped = new Map<string, any[]>()
-
-  allScreens.value.forEach(screen => {
-    const module = screen.module || 'Other'
-    if (!grouped.has(module)) {
-      grouped.set(module, [])
-    }
-    grouped.get(module)!.push(screen)
-  })
-
-  // Convert to array and sort by module name
-  return Array.from(grouped.entries())
-    .map(([module, entries]) => ({
-      module,
-      entries: entries.sort((a, b) => a.title.localeCompare(b.title)),
-      count: entries.length,
-    }))
-    .sort((a, b) => a.module.localeCompare(b.module))
-})
-
-// Workbench: favorites + recent screens
-const workbench = computed(() => {
-  const faves = favorites.value
-  const recent = preference.recents
-    .map(r => screenByScreenId.value.get(r.screenId))
-    .filter((s): s is any => {
-      if (!s) return false
-      return !faves.some(f => f?.screenId === s.screenId)
-    })
-    .slice(0, 10 - faves.length)
-
-  return [...faves, ...recent].slice(0, 10)
-})
-
-// DEBT-030: Attention items aggregation
-// Each feature module should provide attention sources
-const attentionItems = ref<AttentionItem[]>([])
-
-// Helper: Get screen by screenId
-const getScreen = (screenId: string) => screenByScreenId.value.get(screenId)
-
-// Helper: Check if screen is favorite
-const isFavorite = (screenId: string) => preference.isFavorite(screenId)
-
-// Helper: Toggle favorite
-const toggleFavorite = (screenId: string) => {
-  preference.toggleFavorite(screenId)
-}
+const modules: Module[] = [
+  {
+    name: 'Model Operations',
+    screens: [
+      { label: 'Shadow Run Queue', path: '/shadow-run' },
+      { label: 'Model List', path: '/models' },
+    ],
+  },
+  {
+    name: 'Governance',
+    screens: [{ label: 'Approval Queue', path: '/approvals' }],
+  },
+]
 </script>
 
 <template>
-  <article class="ks-home" v-if="screenDef">
-    <!-- Header -->
-    <header class="ks-home__header">
-      <div>
-        <p>K-ArtSell Aegis</p>
-        <h1>{{ screenDef.title }}</h1>
-        <span>{{ screenDef.description }}</span>
-      </div>
+  <div class="home-page">
+    <header class="home-header">
+      <h1>K-ArtSell Aegis</h1>
+      <p>Financial Advisory System</p>
     </header>
 
-    <!-- Attention Section -->
-    <section class="ks-home__section" aria-labelledby="ks-home-attention-title">
-      <header><h2 id="ks-home-attention-title">확인 필요</h2></header>
-      <div v-if="attentionItems.length > 0" class="ks-home__attention-list" role="list">
-        <RouterLink
-          v-for="item in attentionItems"
-          :key="item.id"
-          :to="item.path"
-          role="listitem"
-          class="ks-home__attention-item"
-          :class="`severity-${item.severity}`"
-        >
-          <span class="badge">{{ item.count }}</span>
-          <span class="main">
-            <b>{{ item.title }}</b>
-            <small>{{ item.module }}</small>
-          </span>
-        </RouterLink>
-      </div>
-      <p v-else class="ks-home__empty">현재 확인할 작업이나 알림이 없습니다.</p>
-    </section>
-
-    <!-- Workbench Section (Favorites + Recent) -->
-    <section class="ks-home__section" aria-labelledby="ks-home-workbench-title">
-      <header>
-        <h2 id="ks-home-workbench-title">바로 시작</h2>
-        <small>즐겨찾기 {{ favorites.length }} · 최근 {{ workbench.length - favorites.length }}</small>
-      </header>
-      <div v-if="workbench.length" class="ks-home__workbench-list" role="list">
-        <RouterLink
-          v-for="entry in workbench"
-          :key="entry.screenId"
-          :to="entry.path"
-          role="listitem"
-          class="ks-home__workbench-item"
-        >
-          <span class="source">{{ favorites.some(f => f.screenId === entry.screenId) ? '즐겨찾기' : '최근' }}</span>
-          <span class="main">
-            <b>{{ entry.title }}</b>
-            <small>{{ entry.module }}</small>
-          </span>
-        </RouterLink>
-      </div>
-      <p v-else class="ks-home__empty">아직 즐겨찾기하거나 최근에 연 화면이 없습니다. 아래에서 화면을 찾아보세요.</p>
-    </section>
-
-    <!-- All Screens by Module -->
-    <section class="ks-home__all" aria-label="전체 업무">
-      <header><h2>모듈별 업무</h2></header>
-      <div class="ks-home__modules">
-        <section v-for="moduleGroup in screensByModule" :key="moduleGroup.module" class="ks-home__module">
-          <header>
-            <strong>{{ moduleGroup.module }}</strong>
-            <small>{{ moduleGroup.count }}개 화면</small>
-          </header>
-          <div class="ks-home__module-links">
-            <div v-for="screen in moduleGroup.entries" :key="screen.screenId" class="ks-home__module-row">
-              <RouterLink class="launch" :to="screen.path">{{ screen.title }}</RouterLink>
-              <button
-                v-if="screen.telemetry?.enabled !== false"
-                type="button"
-                class="favorite"
-                :aria-pressed="isFavorite(screen.screenId)"
-                :aria-label="
-                  isFavorite(screen.screenId) ? `${screen.title} 즐겨찾기 해제` : `${screen.title} 즐겨찾기 추가`
-                "
-                @click="toggleFavorite(screen.screenId)"
-              >
-                {{ isFavorite(screen.screenId) ? '★' : '☆' }}
-              </button>
-            </div>
-          </div>
-        </section>
-      </div>
-    </section>
-  </article>
+    <main class="home-content">
+      <section v-for="module in modules" :key="module.name" class="module-section">
+        <h2>{{ module.name }}</h2>
+        <nav class="screen-list">
+          <RouterLink v-for="screen in module.screens" :key="screen.path" :to="screen.path" class="screen-link">
+            {{ screen.label }}
+          </RouterLink>
+        </nav>
+      </section>
+    </main>
+  </div>
 </template>
 
 <style scoped>
-.ks-home {
-  display: grid;
-  gap: var(--ks-space-4);
-  max-width: var(--ks-content-max);
+.home-page {
+  padding: 2rem;
+  max-width: 1200px;
   margin: 0 auto;
 }
 
-.ks-home__header p,
-.ks-home__header span {
+.home-header {
+  margin-bottom: 3rem;
+}
+
+.home-header h1 {
   margin: 0;
-  color: var(--ks-color-text-muted);
-  font-size: var(--ks-font-caption);
+  font-size: 2.5rem;
+  font-weight: 700;
 }
 
-.ks-home__header h1 {
-  margin: 0;
-  font-size: var(--ks-font-page);
+.home-header p {
+  margin: 0.5rem 0 0 0;
+  color: var(--color-text-secondary);
 }
 
-.ks-home__section,
-.ks-home__all {
-  border: 1px solid var(--ks-color-border);
-  border-radius: var(--ks-radius-md);
-  background: var(--ks-color-surface);
+.home-content {
+  display: grid;
+  gap: 2rem;
 }
 
-.ks-home__section > header,
-.ks-home__all > header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: var(--ks-space-3);
-  padding: var(--ks-space-2) var(--ks-space-3);
-  border-bottom: 1px solid var(--ks-color-border);
+.module-section {
+  border: 1px solid var(--color-border-primary);
+  border-radius: var(--border-radius-md);
+  padding: 1.5rem;
+  background-color: var(--color-background-secondary);
 }
 
-.ks-home__section > header h2,
-.ks-home__all > header h2 {
-  margin: 0;
-  font-size: var(--ks-font-section);
+.module-section h2 {
+  margin: 0 0 1rem 0;
+  font-size: 1.25rem;
 }
 
-.ks-home__section > header small {
-  color: var(--ks-color-text-muted);
-  font-size: var(--ks-font-caption);
-}
-
-.ks-home__empty {
-  margin: 0;
-  padding: var(--ks-space-4) var(--ks-space-3);
-  color: var(--ks-color-text-muted);
-  font-size: var(--ks-font-body);
-}
-
-.ks-home__workbench-list {
+.screen-list {
   display: flex;
   flex-direction: column;
+  gap: 0.5rem;
 }
 
-.ks-home__workbench-item {
-  display: grid;
-  grid-template-columns: 5rem minmax(0, 1fr);
-  align-items: center;
-  gap: var(--ks-space-2);
-  padding: var(--ks-space-2) var(--ks-space-3);
-  border-bottom: 1px solid var(--ks-color-border);
+.screen-link {
+  padding: 0.75rem 1rem;
+  border-radius: var(--border-radius-sm);
+  background-color: var(--color-background-primary);
+  color: var(--color-text-primary);
   text-decoration: none;
-  color: inherit;
+  transition: background-color var(--transition-normal);
 }
 
-.ks-home__workbench-item:last-child {
-  border-bottom: 0;
-}
-
-.ks-home__workbench-item .source {
-  font-size: var(--ks-font-caption);
-  font-weight: 600;
-  color: var(--ks-color-action);
-}
-
-.ks-home__workbench-item .main small {
-  display: block;
-  color: var(--ks-color-text-muted);
-  font-size: var(--ks-font-caption);
-}
-
-.ks-home__modules {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
-}
-
-.ks-home__module {
-  border-right: 1px solid var(--ks-color-border);
-  border-bottom: 1px solid var(--ks-color-border);
-}
-
-.ks-home__module > header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: var(--ks-space-2) var(--ks-space-3);
-  border-bottom: 1px solid var(--ks-color-border);
-}
-
-.ks-home__module > header small {
-  color: var(--ks-color-text-muted);
-  font-size: var(--ks-font-caption);
-}
-
-.ks-home__module-row {
-  display: flex;
-  align-items: center;
-}
-
-.ks-home__module-row .launch {
-  flex: 1;
-  padding: var(--ks-space-2) var(--ks-space-3);
-  text-decoration: none;
-  color: inherit;
-}
-
-.ks-home__module-row .launch:hover {
-  background: var(--ks-color-surface-secondary);
-}
-
-.ks-home__module-row .favorite {
-  width: 2rem;
-  border: 0;
-  background: transparent;
-  color: var(--ks-color-text-muted);
-  cursor: pointer;
-}
-
-.ks-home__module-row .favorite:hover {
-  color: var(--ks-color-action);
-}
-
-.ks-home__module-row .favorite[aria-pressed='true'] {
-  color: var(--ks-color-action);
-}
-
-.ks-home__attention-list {
-  display: flex;
-  flex-direction: column;
-}
-
-.ks-home__attention-item {
-  display: grid;
-  grid-template-columns: 3rem minmax(0, 1fr);
-  align-items: center;
-  gap: var(--ks-space-2);
-  padding: var(--ks-space-2) var(--ks-space-3);
-  border-bottom: 1px solid var(--ks-color-border);
-  text-decoration: none;
-  color: inherit;
-}
-
-.ks-home__attention-item:last-child {
-  border-bottom: 0;
-}
-
-.ks-home__attention-item .badge {
-  font-size: var(--ks-font-body);
-  font-weight: 600;
-  padding: 0.25rem 0.5rem;
-  border-radius: var(--ks-radius-sm);
-  background: var(--ks-color-surface-secondary);
-  text-align: center;
-}
-
-.ks-home__attention-item.severity-high .badge {
-  background: rgb(239, 68, 68);
-  color: white;
-}
-
-.ks-home__attention-item.severity-medium .badge {
-  background: rgb(251, 146, 60);
-  color: white;
-}
-
-.ks-home__attention-item.severity-low .badge {
-  background: var(--ks-color-surface-secondary);
-  color: var(--ks-color-text-muted);
-}
-
-.ks-home__attention-item .main small {
-  display: block;
-  color: var(--ks-color-text-muted);
-  font-size: var(--ks-font-caption);
+.screen-link:hover {
+  background-color: var(--color-background-hover);
 }
 </style>
diff --git a/frontend/src/features/home/registry.ts b/frontend/src/features/home/registry.ts
index 3c165d9f..e2008442 100644
--- a/frontend/src/features/home/registry.ts
+++ b/frontend/src/features/home/registry.ts
@@ -1,20 +1,14 @@
 /**
  * Home Feature Screen Registry
- * Define all screens in the home feature module
  */
 
-import type { KbxScreenDefinition } from '@shared/contracts/kbx-types'
-
-export const homeScreen: KbxScreenDefinition = {
+export const homeScreen = {
   screenId: 'home.dashboard',
-  title: '홈',
+  title: 'Home',
   module: 'Home',
-  type: 'dashboard',
   path: '/home',
   component: () => import('./pages/HomePage.vue'),
-  permissions: [], // Home is accessible to all users
-  description: '업무를 검색하고, 이어서 처리하고, 즐겨찾기로 자주 쓰는 화면에 바로 접근합니다.',
-  telemetry: { enabled: true },
+  permissions: [],
 }
 
-export const homeScreens: KbxScreenDefinition[] = [homeScreen]
+export const homeScreens = [homeScreen]
diff --git a/frontend/src/features/models/pages/ModelDetail.vue b/frontend/src/features/models/pages/ModelDetail.vue
index b7dbd9ed..43ae2cff 100644
--- a/frontend/src/features/models/pages/ModelDetail.vue
+++ b/frontend/src/features/models/pages/ModelDetail.vue
@@ -1,607 +1,110 @@
 <script setup lang="ts">
-import { computed, onMounted, onUnmounted } from 'vue'
-import { useRoute, useRouter } from 'vue-router'
-import { KsButton } from '@shared/ui/components'
-import { useKbxRegistry } from '@shared/composables/useKbxRegistry'
-import { useModelDetail, useActivateModel, useDeactivateModel, useTransitionPhase } from '../composables/useModels'
+import { computed } from 'vue'
+import { useRoute } from 'vue-router'
+import { SkeletonLoader } from '@shared/ui/components'
+import { useModelDetail } from '../composables/useModels'
 
 const route = useRoute()
-const router = useRouter()
-const registry = useKbxRegistry()
 
-// Get screen definition from registry
-const screenDef = computed(() =>
-  registry.getScreen('model-ops.models.detail'),
-)
-
-// Extract modelId from route
 const modelId = computed(() => route.params.modelId as string)
 
-// Phases in lifecycle order
-const phases = [
-  'Freeze',
-  'Mature',
-  'Score',
-  'Diagnose',
-  'Hypothesis',
-  'Challenger',
-  'Validate',
-  'Review',
-  'Manual Activation',
-]
-
-// TanStack Query hooks
 const modelQuery = useModelDetail(modelId.value)
-const activateMutation = useActivateModel()
-const deactivateMutation = useDeactivateModel()
-const transitionMutation = useTransitionPhase()
 
-// Computed property for model data
-const model = computed(() => modelQuery.data.value || {
-  modelId: modelId.value,
-  name: 'Loading...',
-  description: '',
-  phase: 'Freeze' as const,
-  active: false,
-  lastValidation: '',
-  pbo: 0,
-  dsr: 0,
-  oos: 0,
-  returnMtd: 0,
-  createdAt: '',
-  updatedAt: '',
-  validationHistory: [],
-  configuration: {
-    lookbackPeriod: 252,
-    rebalanceFrequency: 'daily',
-    riskLimit: 2.0,
-    maxPositions: 20,
-    minLiquidityDays: 10,
-  },
-})
-
-// Find current phase index
-const currentPhaseIndex = computed(() => {
-  return phases.findIndex(p => p === model.value.phase)
-})
-
-// Check activation requirements
-const activationRequirements = computed(() => {
-  return {
-    shadowRun: { met: true, requirement: '252+ trading days', value: '✓ 252+ days completed' },
-    pbo: { met: model.value.pbo <= 20, requirement: 'PBO < 20%', value: `${model.value.pbo}%` },
-    dsr: { met: model.value.dsr >= 95, requirement: 'DSR ≥ 95%', value: `${model.value.dsr}%` },
-    oos: { met: model.value.oos <= 2.5, requirement: 'OOS ≤ 2.5%', value: `${model.value.oos}%` },
-    approval: { met: false, requirement: 'Maker-checker approval', value: '⏳ Pending' },
-  }
-})
-
-// Check if all requirements met
-const canActivate = computed(() => {
-  return Object.values(activationRequirements.value).every(r => r.met)
-})
-
-// Actions
-const handleBack = () => {
-  router.push('/model-ops/models')
-}
-
-const handleEdit = () => {
-  router.push(`/model-ops/models/${modelId.value}/edit`)
-}
-
-const handleActivate = async () => {
-  if (canActivate.value) {
-    await activateMutation.mutateAsync(modelId.value)
-  }
-}
-
-const handleDeactivate = async () => {
-  await deactivateMutation.mutateAsync(modelId.value)
-}
-
-const handlePhaseTransition = async (newPhase: string) => {
-  const currentIndex = currentPhaseIndex.value
-  const newIndex = phases.indexOf(newPhase)
-
-  if (newIndex > currentIndex) {
-    await transitionMutation.mutateAsync({
-      modelId: modelId.value,
-      phase: newPhase as any,
-    })
-  }
-}
-
-// Keyboard shortcuts
-const handleKeydown = (e: KeyboardEvent) => {
-  if (e.key === 'Escape') {
-    handleBack()
-  } else if (e.ctrlKey && e.key === 'e') {
-    e.preventDefault()
-    handleEdit()
-  }
-}
-
-onMounted(() => {
-  window.addEventListener('keydown', handleKeydown)
-})
-
-onUnmounted(() => {
-  window.removeEventListener('keydown', handleKeydown)
-})
+const model = computed(() => modelQuery.data as any)
 </script>
 
 <template>
-  <div class="model-detail">
-    <!-- Header -->
-    <header class="detail-header">
-      <div>
-        <h1>{{ model.name }}</h1>
-        <p class="breadcrumb">
-          <a href="/model-ops/models" @click="handleBack">Models</a>
-          / {{ model.name }}
-        </p>
-      </div>
-      <div class="header-actions">
-        <KsButton
-          label="Edit"
-          severity="secondary"
-          @click="handleEdit"
-        />
-        <KsButton
-          v-if="!model.active"
-          :label="canActivate ? 'Activate' : 'Cannot Activate'"
-          :severity="canActivate ? 'primary' : 'secondary'"
-          :disabled="!canActivate"
-          @click="handleActivate"
-        />
-        <KsButton
-          v-else
-          label="Deactivate"
-          severity="danger"
-          @click="handleDeactivate"
-        />
-        <KsButton
-          label="Back"
-          severity="secondary"
-          @click="handleBack"
-        />
-      </div>
+  <div class="model-detail-page">
+    <header class="page-header">
+      <h1>Model Details</h1>
     </header>
 
-    <!-- Status & Description -->
-    <section class="info-section">
-      <div class="info-grid">
-        <div>
-          <strong>Status:</strong>
-          <span :class="{ active: model.active, inactive: !model.active }">
-            {{ model.active ? 'Active' : 'Inactive' }}
-          </span>
-        </div>
-        <div>
-          <strong>Phase:</strong>
-          {{ model.phase }}
-        </div>
-        <div>
-          <strong>Last Validation:</strong>
-          {{ model.lastValidation }}
-        </div>
-        <div>
-          <strong>Created:</strong>
-          {{ model.createdAt }}
-        </div>
-      </div>
-      <div v-if="model.description" class="description">
-        <strong>Description:</strong>
-        <p>{{ model.description }}</p>
-      </div>
-    </section>
+    <!-- Loading State -->
+    <div v-if="modelQuery.isPending" class="loading-state">
+      <SkeletonLoader type="card" />
+    </div>
 
-    <!-- Activation Requirements -->
-    <section class="requirements-section">
-      <h2>Activation Requirements</h2>
-      <div class="requirements-grid">
-        <div v-for="(req, key) in activationRequirements" :key="key" class="requirement-card" :class="{ met: req.met }">
-          <div class="requirement-check">
-            {{ req.met ? '✓' : '✗' }}
-          </div>
-          <div class="requirement-info">
-            <div class="requirement-name">{{ req.requirement }}</div>
-            <div class="requirement-value">{{ req.value }}</div>
-          </div>
-        </div>
-      </div>
-    </section>
+    <!-- Error State -->
+    <div v-else-if="modelQuery.isError" class="error-state">
+      <p>Failed to load model</p>
+    </div>
 
-    <!-- Key Metrics -->
-    <section class="metrics-section">
-      <h2>Key Metrics</h2>
-      <div class="metrics-grid">
-        <div class="metric-card">
-          <div class="metric-label">PBO</div>
-          <div class="metric-value" :class="{ ok: model.pbo <= 20 }">
-            {{ model.pbo }}%
+    <!-- Data State -->
+    <div v-else-if="model && model.name" class="model-detail">
+      <div class="detail-section">
+        <h2>{{ model.name }}</h2>
+        <div class="detail-grid">
+          <div class="detail-item">
+            <label>Model ID</label>
+            <p>{{ model.id }}</p>
           </div>
-          <div class="metric-requirement">Target: ≤ 20%</div>
-        </div>
-        <div class="metric-card">
-          <div class="metric-label">DSR</div>
-          <div class="metric-value" :class="{ ok: model.dsr >= 95 }">
-            {{ model.dsr }}%
+          <div class="detail-item">
+            <label>Phase</label>
+            <p>{{ model.phase }}</p>
           </div>
-          <div class="metric-requirement">Target: ≥ 95%</div>
-        </div>
-        <div class="metric-card">
-          <div class="metric-label">OOS</div>
-          <div class="metric-value" :class="{ ok: model.oos <= 2.5 }">
-            {{ model.oos }}%
-          </div>
-          <div class="metric-requirement">Target: ≤ 2.5%</div>
-        </div>
-        <div class="metric-card">
-          <div class="metric-label">Return (MTD)</div>
-          <div class="metric-value positive">
-            +{{ model.returnMtd }}%
-          </div>
-          <div class="metric-requirement">Month-to-date</div>
-        </div>
-      </div>
-    </section>
-
-    <!-- Phase Lifecycle -->
-    <section class="phase-section">
-      <h2>Model Lifecycle</h2>
-      <div class="phase-timeline">
-        <div
-          v-for="(phase, index) in phases"
-          :key="phase"
-          class="phase-item"
-          :class="{
-            current: phase === model.phase,
-            completed: index < currentPhaseIndex,
-            future: index > currentPhaseIndex,
-          }"
-        >
-          <div class="phase-dot"></div>
-          <div class="phase-label">{{ phase }}</div>
-          <div v-if="index < currentPhaseIndex" class="phase-badge">✓</div>
-        </div>
-      </div>
-    </section>
-
-    <!-- Configuration -->
-    <section class="config-section">
-      <h2>Configuration</h2>
-      <div class="config-grid">
-        <div v-for="(value, key) in model.configuration" :key="key" class="config-item">
-          <strong>{{ key.replace(/([A-Z])/g, ' $1').toLowerCase() }}:</strong>
-          {{ value }}
-        </div>
-      </div>
-    </section>
-
-    <!-- Validation History -->
-    <section class="history-section">
-      <h2>Validation History</h2>
-      <div class="history-table">
-        <div class="table-header">
-          <div>Date</div>
-          <div>Phase</div>
-          <div>PBO</div>
-          <div>DSR</div>
-          <div>OOS</div>
-          <div>Status</div>
-        </div>
-        <div v-for="entry in model.validationHistory" :key="entry.date" class="table-row">
-          <div>{{ entry.date }}</div>
-          <div>{{ entry.phase }}</div>
-          <div>{{ entry.pbo }}%</div>
-          <div>{{ entry.dsr }}%</div>
-          <div>{{ entry.oos }}%</div>
-          <div :class="{ approved: entry.status === 'approved', rejected: entry.status === 'rejected' }">
-            {{ entry.status }}
+          <div class="detail-item">
+            <label>Status</label>
+            <p>{{ model.active ? 'Active' : 'Inactive' }}</p>
           </div>
         </div>
       </div>
-    </section>
+    </div>
   </div>
 </template>
 
 <style scoped>
-.model-detail {
-  display: flex;
-  flex-direction: column;
-  gap: 24px;
-  padding: 24px;
+.model-detail-page {
+  padding: 2rem;
   max-width: 1200px;
   margin: 0 auto;
 }
 
-.detail-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: flex-start;
-  border-bottom: 1px solid #e0e0e0;
-  padding-bottom: 16px;
+.page-header {
+  margin-bottom: 2rem;
 }
 
-.detail-header h1 {
+.page-header h1 {
   margin: 0;
-  font-size: 28px;
+  font-size: 2rem;
+  font-weight: 700;
 }
 
-.breadcrumb {
-  margin: 8px 0 0 0;
-  color: #666;
-  font-size: 14px;
+.loading-state,
+.error-state {
+  padding: 2rem;
+  text-align: center;
+  border: 1px solid var(--color-border-primary);
+  border-radius: var(--border-radius-md);
+  background-color: var(--color-background-secondary);
 }
 
-.breadcrumb a {
-  color: var(--kbx-color-primary, #3b82f6);
-  text-decoration: none;
-  cursor: pointer;
+.model-detail {
+  border: 1px solid var(--color-border-primary);
+  border-radius: var(--border-radius-md);
+  padding: 2rem;
+  background-color: var(--color-background-secondary);
 }
 
-.breadcrumb a:hover {
-  text-decoration: underline;
+.detail-section h2 {
+  margin: 0 0 1.5rem 0;
+  font-size: 1.5rem;
 }
 
-.header-actions {
-  display: flex;
-  gap: 12px;
-}
-
-/* Info Section */
-.info-section {
-  border: 1px solid #e0e0e0;
-  padding: 16px;
-  border-radius: 8px;
-  background: #f9f9f9;
-}
-
-.info-grid {
+.detail-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-  gap: 16px;
-  margin-bottom: 16px;
+  gap: 1.5rem;
 }
 
-.info-grid div strong {
+.detail-item label {
   display: block;
-  margin-bottom: 4px;
-  color: #666;
-  font-size: 12px;
-  text-transform: uppercase;
+  font-weight: 600;
+  margin-bottom: 0.5rem;
+  color: var(--color-text-secondary);
 }
 
-.info-grid .active {
-  color: #10b981;
-  font-weight: bold;
-}
-
-.info-grid .inactive {
-  color: #666;
-  font-weight: bold;
-}
-
-.description {
-  padding-top: 16px;
-  border-top: 1px solid #d0d0d0;
-}
-
-.description strong {
-  display: block;
-  margin-bottom: 8px;
-}
-
-.description p {
+.detail-item p {
   margin: 0;
-  line-height: 1.6;
-}
-
-/* Requirements Section */
-.requirements-section h2,
-.metrics-section h2,
-.phase-section h2,
-.config-section h2,
-.history-section h2 {
-  font-size: 18px;
-  margin: 0 0 16px 0;
-}
-
-.requirements-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-  gap: 12px;
-}
-
-.requirement-card {
-  display: flex;
-  gap: 12px;
-  padding: 12px;
-  border: 1px solid #d0d0d0;
-  border-radius: 4px;
-  background: #fef2f2;
-  border-left: 4px solid #ef4444;
-}
-
-.requirement-card.met {
-  background: #f0fdf4;
-  border-left-color: #10b981;
-}
-
-.requirement-check {
-  font-size: 20px;
-  font-weight: bold;
-  min-width: 24px;
-}
-
-.requirement-card.met .requirement-check {
-  color: #10b981;
-}
-
-.requirement-card:not(.met) .requirement-check {
-  color: #ef4444;
-}
-
-.requirement-name {
-  font-weight: 600;
-  margin-bottom: 4px;
-}
-
-.requirement-value {
-  font-size: 14px;
-  color: #666;
-}
-
-/* Metrics Section */
-.metrics-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
-  gap: 12px;
-}
-
-.metric-card {
-  padding: 16px;
-  background: #f9f9f9;
-  border-radius: 8px;
-  border: 1px solid #e0e0e0;
-  text-align: center;
-}
-
-.metric-label {
-  font-size: 12px;
-  color: #666;
-  text-transform: uppercase;
-  font-weight: 600;
-  margin-bottom: 8px;
-}
-
-.metric-value {
-  font-size: 24px;
-  font-weight: bold;
-  margin-bottom: 4px;
-}
-
-.metric-value.ok {
-  color: #10b981;
-}
-
-.metric-value.positive {
-  color: #10b981;
-}
-
-.metric-requirement {
-  font-size: 12px;
-  color: #999;
-  margin-top: 4px;
-}
-
-/* Phase Timeline */
-.phase-timeline {
-  display: flex;
-  gap: 8px;
-  overflow-x: auto;
-  padding: 16px 0;
-}
-
-.phase-item {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 8px;
-  min-width: 100px;
-  position: relative;
-}
-
-.phase-dot {
-  width: 16px;
-  height: 16px;
-  border-radius: 50%;
-  background: #d0d0d0;
-  border: 2px solid white;
-}
-
-.phase-item.completed .phase-dot {
-  background: #10b981;
-}
-
-.phase-item.current .phase-dot {
-  background: var(--kbx-color-primary, #3b82f6);
-  width: 20px;
-  height: 20px;
-  border-width: 3px;
-}
-
-.phase-label {
-  font-size: 12px;
-  text-align: center;
-  max-width: 90px;
-  line-height: 1.3;
-}
-
-.phase-badge {
-  font-size: 12px;
-  font-weight: bold;
-  color: #10b981;
-}
-
-/* Configuration Section */
-.config-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
-  gap: 12px;
-}
-
-.config-item {
-  padding: 12px;
-  background: #f9f9f9;
-  border-radius: 4px;
-  font-size: 14px;
-}
-
-.config-item strong {
-  display: block;
-  margin-bottom: 4px;
-  color: #666;
-  text-transform: capitalize;
-}
-
-/* History Table */
-.history-table {
-  border: 1px solid #e0e0e0;
-  border-radius: 8px;
-  overflow: hidden;
-}
-
-.table-header {
-  display: grid;
-  grid-template-columns: 100px 100px 60px 60px 60px 100px;
-  gap: 0;
-  background: #f0f0f0;
-  padding: 12px;
-  font-weight: 600;
-  font-size: 12px;
-  text-transform: uppercase;
-}
-
-.table-row {
-  display: grid;
-  grid-template-columns: 100px 100px 60px 60px 60px 100px;
-  gap: 0;
-  padding: 12px;
-  border-top: 1px solid #e0e0e0;
-  font-size: 14px;
-  align-items: center;
-}
-
-.table-row .approved {
-  color: #10b981;
-  font-weight: 600;
-}
-
-.table-row .rejected {
-  color: #ef4444;
-  font-weight: 600;
+  color: var(--color-text-primary);
 }
 </style>
diff --git a/frontend/src/features/models/pages/ModelsList.vue b/frontend/src/features/models/pages/ModelsList.vue
index db481547..5e23e297 100644
--- a/frontend/src/features/models/pages/ModelsList.vue
+++ b/frontend/src/features/models/pages/ModelsList.vue
@@ -1,237 +1,130 @@
 <script setup lang="ts">
-import { ref, computed, onMounted, onUnmounted } from 'vue'
-import { useRouter } from 'vue-router'
-import KsListPage from '@shared/ui/components/KsListPage.vue'
-import { KsButton, KsDataGrid, KsTextField } from '@shared/ui/components'
-import { useKbxRegistry } from '@shared/composables/useKbxRegistry'
-import { useModelsList, type Model } from '../composables/useModels'
-import type { ModelListParams } from '../composables/useModels'
-import { toUiGridColumns } from '@shared/ui/gridColumnAdapter'
+import { ref, computed } from 'vue'
+import { SkeletonLoader } from '@shared/ui/components'
+import { useModelsList } from '../composables/useModels'
 
-const router = useRouter()
-const registry = useKbxRegistry()
-
-// Get screen definition from registry
-const screenDef = computed(() =>
-  registry.getScreen('model-ops.models.list'),
-)
-
-const modelColumns = computed(() => toUiGridColumns(screenDef.value?.grid?.columnDefs ?? []))
-
-// Search and filter state
-const searchQuery = ref('')
-const phaseFilter = ref('all')
-const activeFilter = ref('all')
-
-// Pagination
 const currentPage = ref(1)
-const pageSize = ref(50)
+const pageSize = ref(20)
 
-// Query parameters
-const queryParams = computed<ModelListParams>(() => ({
+const queryParams = computed(() => ({
   page: currentPage.value,
   pageSize: pageSize.value,
-  search: searchQuery.value || undefined,
-  phase: phaseFilter.value === 'all' ? undefined : phaseFilter.value,
-  active: activeFilter.value === 'active' ? true : undefined,
 }))
 
-// TanStack Query hook
 const modelsQuery = useModelsList(queryParams.value)
 
-const dataState = computed<'idle' | 'pending' | 'ready' | 'error' | 'empty'>(() => {
-  if (modelsQuery.isPending.value) return 'pending'
-  if (modelsQuery.isError.value) return 'error'
-  if (modelsQuery.data.value?.items.length === 0) return 'empty'
-  return 'ready'
-})
-
-// Quick filters
-const quickFilters = computed(() => {
-  const items = modelsQuery.data.value?.items || []
-  return [
-    { id: 'all', label: 'All', active: phaseFilter.value === 'all', badge: items.length },
-    { id: 'active', label: 'Active', active: activeFilter.value === 'active', badge: items.filter(m => m.active).length },
-    { id: 'ready', label: 'Ready to Deploy', active: phaseFilter.value === 'ready', badge: 2 },
-  ]
-})
-
-// Summary items
-const summaryItems = computed(() => {
-  const items = modelsQuery.data.value?.items || []
-  const avgPbo = items.length > 0 ? (items.reduce((sum, m) => sum + m.pbo, 0) / items.length).toFixed(1) : '0'
-
-  return [
-    { label: 'Total Models', value: items.length },
-    { label: 'Active', value: items.filter(m => m.active).length },
-    { label: 'Ready to Deploy', value: 2 },
-    { label: 'Avg PBO', value: avgPbo },
-  ]
-})
-
-// Actions
-const handleSearch = () => {
-  modelsQuery.refetch()
-}
-
-const handleNewModel = () => {
-  router.push('/model-ops/models/new')
-}
-
-const handleRowClick = (modelId: string) => {
-  router.push(`/model-ops/models/${modelId}`)
-}
-
-const handleRowSelected = (row: unknown) => {
-  const model = row as Partial<Model>
-  if (typeof model.modelId === 'string') handleRowClick(model.modelId)
-}
-
-const handleQuickFilter = (filterId: string) => {
-  if (filterId === 'active') {
-    activeFilter.value = activeFilter.value === 'active' ? 'all' : 'active'
-  } else {
-    phaseFilter.value = filterId
-  }
-}
-
-const handleRefresh = () => {
-  handleSearch()
-}
-
-// Keyboard shortcuts
-const handleKeydown = (e: KeyboardEvent) => {
-  if (e.key === 'F3') {
-    e.preventDefault()
-    handleSearch()
-  } else if (e.ctrlKey && e.key === 'n') {
-    e.preventDefault()
-    handleNewModel()
-  }
-}
-
-onMounted(() => {
-  window.addEventListener('keydown', handleKeydown)
-})
-
-onUnmounted(() => {
-  window.removeEventListener('keydown', handleKeydown)
+const items = computed(() => {
+  const data = modelsQuery.data as any
+  return data?.items || []
 })
 </script>
 
 <template>
-  <div v-if="screenDef" class="models-list">
-    <KsListPage
-      :screen="screenDef"
-      :data-state="dataState"
-      :loading="dataState === 'pending'"
-      :summary-items="summaryItems"
-      :quick-filters="quickFilters"
-      @quick-filter="handleQuickFilter"
-      @refresh="handleRefresh"
-    >
-      <!-- Header Actions -->
-      <template #header-actions>
-        <KsButton
-          label="New Model"
-          severity="primary"
-          @click="handleNewModel"
-        />
-      </template>
+  <div class="models-page">
+    <header class="page-header">
+      <h1>Model Management</h1>
+      <p>Manage trading models across their complete lifecycle</p>
+    </header>
 
-      <!-- Search Panel -->
-      <template #search>
-        <div class="models-search">
-          <div class="search-row">
-            <KsTextField
-              v-model="searchQuery"
-              label="Model search"
-              placeholder="Search by model name..."
-              @keydown.enter="handleSearch"
-            />
-            <KsButton
-              label="Search"
-              severity="secondary"
-              @click="handleSearch"
-            />
-          </div>
-          <div class="search-row">
-            <select v-model="phaseFilter" class="phase-filter">
-              <option value="all">All Phases</option>
-              <option value="freeze">Freeze</option>
-              <option value="mature">Mature</option>
-              <option value="score">Score</option>
-              <option value="diagnose">Diagnose</option>
-              <option value="hypothesis">Hypothesis</option>
-              <option value="challenger">Challenger</option>
-              <option value="validate">Validate</option>
-              <option value="review">Review</option>
-            </select>
-            <select v-model="activeFilter" class="active-filter">
-              <option value="all">All Status</option>
-              <option value="active">Active</option>
-              <option value="inactive">Inactive</option>
-            </select>
-          </div>
-        </div>
-      </template>
+    <!-- Loading State -->
+    <div v-if="modelsQuery.isPending" class="loading-state">
+      <SkeletonLoader type="table" :rows="5" />
+    </div>
 
-      <!-- Content Area -->
-      <template #content>
-        <KsDataGrid
-          v-if="screenDef.grid && modelsQuery.data.value?.items"
-          :columns="modelsQuery.data.value?.items.length ? modelColumns : []"
-          :rows="modelsQuery.data.value?.items || []"
-          :loading="modelsQuery.isPending.value"
-          @row-selected="handleRowSelected"
-        />
-      </template>
-    </KsListPage>
+    <!-- Error State -->
+    <div v-else-if="modelsQuery.isError" class="error-state">
+      <p>Failed to load models</p>
+    </div>
+
+    <!-- Empty State -->
+    <div v-else-if="!items.length" class="empty-state">
+      <p>No models found. Create a new model to get started.</p>
+    </div>
+
+    <!-- Data State -->
+    <div v-else class="models-grid">
+      <table class="models-table">
+        <thead>
+          <tr>
+            <th>Model ID</th>
+            <th>Name</th>
+            <th>Phase</th>
+            <th>Status</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr v-for="model in items" :key="model.id" data-testid="model-row">
+            <td>{{ (model as any).id }}</td>
+            <td>{{ (model as any).name }}</td>
+            <td>{{ (model as any).phase }}</td>
+            <td>{{ (model as any).active ? 'Active' : 'Inactive' }}</td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
   </div>
 </template>
 
 <style scoped>
-.models-list {
-  display: flex;
-  flex-direction: column;
-  height: 100%;
+.models-page {
+  padding: 2rem;
+  max-width: 1400px;
+  margin: 0 auto;
 }
 
-.models-search {
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-  padding: 12px;
-  background: var(--kbx-color-surface, #f5f5f5);
-  border-radius: 4px;
+.page-header {
+  margin-bottom: 2rem;
 }
 
-.search-row {
-  display: flex;
-  gap: 12px;
-  align-items: center;
+.page-header h1 {
+  margin: 0;
+  font-size: 2rem;
+  font-weight: 700;
 }
 
-.search-row input,
-.search-row select {
-  height: var(--kbx-input-height, 34px);
-  padding: 4px 8px;
-  border: 1px solid #d0d0d0;
-  border-radius: 4px;
-  font-size: var(--kbx-font-size, 14px);
+.page-header p {
+  margin: 0.5rem 0 0 0;
+  color: var(--color-text-secondary);
 }
 
-.phase-filter,
-.active-filter {
-  flex: 0 0 140px;
+.loading-state,
+.error-state,
+.empty-state {
+  padding: 2rem;
+  text-align: center;
+  border: 1px solid var(--color-border-primary);
+  border-radius: var(--border-radius-md);
+  background-color: var(--color-background-secondary);
 }
 
-.badge {
-  background: var(--kbx-color-primary, #3b82f6);
-  color: white;
-  padding: 2px 6px;
-  border-radius: 12px;
-  font-size: 11px;
-  margin-left: 4px;
+.models-grid {
+  border: 1px solid var(--color-border-primary);
+  border-radius: var(--border-radius-md);
+  overflow: hidden;
+}
+
+.models-table {
+  width: 100%;
+  border-collapse: collapse;
+}
+
+.models-table thead {
+  background-color: var(--color-background-secondary);
+}
+
+.models-table th {
+  padding: 1rem;
+  text-align: left;
+  font-weight: 600;
+  border-bottom: 1px solid var(--color-border-primary);
+}
+
+.models-table td {
+  padding: 1rem;
+  border-bottom: 1px solid var(--color-border-primary);
+}
+
+.models-table tbody tr:hover {
+  background-color: var(--color-background-hover);
 }
 </style>
diff --git a/frontend/src/features/models/registry.ts b/frontend/src/features/models/registry.ts
index 2fc1c9f0..c7df0f55 100644
--- a/frontend/src/features/models/registry.ts
+++ b/frontend/src/features/models/registry.ts
@@ -1,96 +1,23 @@
 /**
  * Models Feature Screen Registry
- * Define all screens in the models feature module
  */
 
-import type { ScreenDefinition } from '@kbx/contracts'
-
-export const modelsListScreen: ScreenDefinition = {
+export const modelsListScreen = {
   screenId: 'model-ops.models.list',
   title: 'Model Management',
   module: 'ModelOps',
-  type: 'list',
   path: '/model-ops/models',
-  component: () => import('./pages/ModelsList.vue'),
+  component: () => import('./pages/ModelList.vue'),
   permissions: ['model.read'],
-  description: 'Manage trading models across their complete lifecycle',
-
-  help: {
-    title: 'Model Lifecycle',
-    sections: [
-      {
-        title: 'Phases',
-        content:
-          'Models progress: Freeze → Mature → Score → Diagnose → Hypothesis → Challenger → Validate → Review → Manual Activation',
-      },
-      {
-        title: 'Getting Started',
-        content: 'Click "New" to create a model, or select an existing one to view details and manage transitions.',
-      },
-    ],
-    relatedScreens: ['model-ops.shadow-run.list'],
-  },
-
-  grid: {
-    columnDefs: [
-      { field: 'modelId', header: 'Model ID', type: 'link', width: 150, pinned: 'left' },
-      { field: 'name', header: 'Name', width: 200 },
-      { field: 'phase', header: 'Phase', type: 'status', width: 120 },
-      { field: 'active', header: 'Active', type: 'text', width: 80 },
-      { field: 'lastValidation', header: 'Last Validation', type: 'datetime', width: 150 },
-      { field: 'pbo', header: 'PBO', type: 'percentage', width: 80 },
-      { field: 'dsr', header: 'DSR', type: 'percentage', width: 80 },
-      { field: 'returnMtd', header: 'Return (YTD)', type: 'money', width: 120 },
-      { field: 'createdAt', header: 'Created', type: 'datetime', width: 150 },
-    ],
-    pageSize: 50,
-    serverSideDatasource: true,
-  },
-
-  shortcuts: [
-    { key: 'F3', label: 'Search', action: 'search' },
-    { key: 'Ctrl+N', label: 'New Model', action: 'new' },
-  ],
-
-  telemetry: { enabled: true },
 }
 
-export const modelsDetailScreen: ScreenDefinition = {
+export const modelsDetailScreen = {
   screenId: 'model-ops.models.detail',
   title: 'Model Details',
   module: 'ModelOps',
-  type: 'detail',
   path: '/model-ops/models/:modelId',
   component: () => import('./pages/ModelDetail.vue'),
   permissions: ['model.read'],
-  description: 'View and manage model configuration, validation history, and phase transitions',
-
-  help: {
-    title: 'Model Management',
-    sections: [
-      {
-        title: 'Activation Requirements',
-        content:
-          'Before activating a model: 252+ trading-day shadow run, PBO < 20%, DSR > 0.5, OOS < 2.5%, plus maker-checker approval.',
-      },
-      {
-        title: 'Phase Transitions',
-        content:
-          'Models cannot auto-promote. Each phase requires explicit review and approval. Check phase breakdown for regime-specific performance.',
-      },
-    ],
-    relatedScreens: ['model-ops.models.list', 'model-ops.shadow-run.list'],
-  },
-
-  shortcuts: [
-    { key: 'Escape', label: 'Back to List', action: 'back' },
-    { key: 'Ctrl+E', label: 'Export Report', action: 'export' },
-  ],
-
-  telemetry: { enabled: true },
 }
 
-/**
- * All screens in models module
- */
-export const modelScreens: ScreenDefinition[] = [modelsListScreen, modelsDetailScreen]
+export const modelScreens = [modelsListScreen, modelsDetailScreen]
diff --git a/frontend/src/features/shadow-run/pages/ShadowRunDetail.vue b/frontend/src/features/shadow-run/pages/ShadowRunDetail.vue
index 2a6371c2..25540bbb 100644
--- a/frontend/src/features/shadow-run/pages/ShadowRunDetail.vue
+++ b/frontend/src/features/shadow-run/pages/ShadowRunDetail.vue
@@ -1,420 +1,118 @@
 <script setup lang="ts">
-import { computed, onMounted, onUnmounted } from 'vue'
-import { useRoute, useRouter } from 'vue-router'
-import { KsButton } from '@shared/ui/components'
-import { useKbxRegistry } from '@shared/composables/useKbxRegistry'
+import { computed } from 'vue'
+import { useRoute } from 'vue-router'
+import { SkeletonLoader } from '@shared/ui/components'
 import { useShadowRunDetail } from '../composables/useShadowRuns'
 
 const route = useRoute()
-const router = useRouter()
-const registry = useKbxRegistry()
 
-// Get screen definition from registry
-const screenDef = computed(() =>
-  registry.getScreen('model-ops.shadow-run.detail'),
-)
-
-// Extract runId from route
 const runId = computed(() => route.params.runId as string)
 
-// TanStack Query hook
 const shadowRunQuery = useShadowRunDetail(runId.value)
 
-// Computed property for run data
-const run = computed(() => shadowRunQuery.data.value || {
-  runId: runId.value,
-  modelName: 'Loading...',
-  windowStart: '',
-  windowEnd: '',
-  tradingDays: 0,
-  totalReturn: 0,
-  sharpeRatio: 0,
-  pbo: 0,
-  dsr: 0,
-  oos: 0,
-  maxDrawdown: 0,
-  winRate: 0,
-  profitFactor: 0,
-  phases: {
-    bull: { return: 0, sharpe: 0, trades: 0 },
-    bear: { return: 0, sharpe: 0, trades: 0 },
-    sideways: { return: 0, sharpe: 0, trades: 0 },
-  },
-  status: 'pending' as const,
-  createdAt: '',
-})
-
-// Validation indicators
-const validationStatus = computed(() => {
-  const pboOk = run.value.pbo <= 20
-  const dsrOk = run.value.dsr >= 95
-  const oosOk = run.value.oos <= 2.5
-
-  if (pboOk && dsrOk && oosOk) return 'valid'
-  if (pboOk || dsrOk || oosOk) return 'warning'
-  return 'invalid'
-})
-
-const validationMessage = computed(() => {
-  const checks = [
-    { ok: run.value.pbo <= 20, msg: `PBO ${run.value.pbo}% ${run.value.pbo <= 20 ? '✓' : '✗'}` },
-    { ok: run.value.dsr >= 95, msg: `DSR ${run.value.dsr}% ${run.value.dsr >= 95 ? '✓' : '✗'}` },
-    { ok: run.value.oos <= 2.5, msg: `OOS ${run.value.oos}% ${run.value.oos <= 2.5 ? '✓' : '✗'}` },
-  ]
-  return checks.map(c => c.msg).join(' | ')
-})
-
-// Actions
-const handleBack = () => {
-  router.push('/model-ops/shadow-runs')
-}
-
-const handleExport = () => {
-  console.log('Export run:', runId.value)
-}
-
-const handleApprove = () => {
-  console.log('Approve run:', runId.value)
-}
-
-// Keyboard shortcuts
-const handleKeydown = (e: KeyboardEvent) => {
-  if (e.key === 'Escape') {
-    handleBack()
-  } else if (e.ctrlKey && e.key === 'e') {
-    e.preventDefault()
-    handleExport()
-  }
-}
-
-onMounted(() => {
-  window.addEventListener('keydown', handleKeydown)
-})
-
-onUnmounted(() => {
-  window.removeEventListener('keydown', handleKeydown)
-})
+const run = computed(() => shadowRunQuery.data as any)
 </script>
 
 <template>
-  <div class="shadow-run-detail">
-    <!-- Header -->
-    <header class="detail-header">
-      <div>
-        <h1>{{ run.modelName }}</h1>
-        <p class="breadcrumb">
-          <a href="/model-ops/shadow-runs" @click="handleBack">Shadow Runs</a>
-          / {{ run.modelName }}
-        </p>
-      </div>
-      <div class="header-actions">
-        <KsButton
-          :label="`Status: ${run.status}`"
-          severity="secondary"
-          disabled
-        />
-        <KsButton
-          label="Export"
-          severity="secondary"
-          @click="handleExport"
-        />
-        <KsButton
-          v-if="validationStatus === 'valid'"
-          label="Approve"
-          severity="primary"
-          @click="handleApprove"
-        />
-        <KsButton
-          label="Back"
-          severity="secondary"
-          @click="handleBack"
-        />
-      </div>
+  <div class="shadow-run-detail-page">
+    <header class="page-header">
+      <h1>Shadow Run Details</h1>
     </header>
 
-    <!-- Validation Summary -->
-    <section class="validation-summary" :class="`status-${validationStatus}`">
-      <h2>Validation Summary</h2>
-      <div class="validation-message">{{ validationMessage }}</div>
-      <div class="overall-status">
-        {{ validationStatus === 'valid' ? '✓ VALID' : validationStatus === 'warning' ? '⚠ WARNING' : '✗ INVALID' }}
-      </div>
-    </section>
+    <!-- Loading State -->
+    <div v-if="shadowRunQuery.isPending" class="loading-state">
+      <SkeletonLoader type="card" />
+    </div>
 
-    <!-- Key Metrics -->
-    <section class="metrics-grid">
-      <div class="metric-card">
-        <div class="metric-label">Total Return</div>
-        <div class="metric-value" :class="{ positive: run.totalReturn > 0 }">
-          {{ run.totalReturn > 0 ? '+' : '' }}{{ run.totalReturn }}%
-        </div>
-      </div>
-      <div class="metric-card">
-        <div class="metric-label">Sharpe Ratio</div>
-        <div class="metric-value" :class="{ positive: run.sharpeRatio > 0 }">
-          {{ run.sharpeRatio.toFixed(2) }}
-        </div>
-      </div>
-      <div class="metric-card">
-        <div class="metric-label">Max Drawdown</div>
-        <div class="metric-value negative">{{ run.maxDrawdown }}%</div>
-      </div>
-      <div class="metric-card">
-        <div class="metric-label">Win Rate</div>
-        <div class="metric-value">{{ run.winRate }}%</div>
-      </div>
-      <div class="metric-card">
-        <div class="metric-label">Profit Factor</div>
-        <div class="metric-value positive">{{ run.profitFactor }}</div>
-      </div>
-      <div class="metric-card">
-        <div class="metric-label">PBO</div>
-        <div class="metric-value" :class="{ ok: run.pbo <= 20 }">
-          {{ run.pbo }}%
-        </div>
-      </div>
-      <div class="metric-card">
-        <div class="metric-label">DSR</div>
-        <div class="metric-value" :class="{ ok: run.dsr >= 95 }">
-          {{ run.dsr }}%
-        </div>
-      </div>
-      <div class="metric-card">
-        <div class="metric-label">OOS</div>
-        <div class="metric-value" :class="{ ok: run.oos <= 2.5 }">
-          {{ run.oos }}%
-        </div>
-      </div>
-    </section>
+    <!-- Error State -->
+    <div v-else-if="shadowRunQuery.isError" class="error-state">
+      <p>Failed to load shadow run</p>
+    </div>
 
-    <!-- Phase Breakdown -->
-    <section class="phase-breakdown">
-      <h2>Performance by Market Phase</h2>
-      <div class="phase-grid">
-        <div class="phase-card">
-          <div class="phase-name">Bull Market</div>
-          <div class="phase-metrics">
-            <div>Return: <strong>{{ run.phases.bull.return }}%</strong></div>
-            <div>Sharpe: <strong>{{ run.phases.bull.sharpe }}</strong></div>
-            <div>Trades: <strong>{{ run.phases.bull.trades }}</strong></div>
+    <!-- Data State -->
+    <div v-else-if="run && run.id" class="shadow-run-detail">
+      <div class="detail-section">
+        <h2>Run #{{ run.id }}</h2>
+        <div class="detail-grid">
+          <div class="detail-item">
+            <label>Model</label>
+            <p>{{ run.modelName }}</p>
           </div>
-        </div>
-        <div class="phase-card">
-          <div class="phase-name">Bear Market</div>
-          <div class="phase-metrics">
-            <div>Return: <strong>{{ run.phases.bear.return }}%</strong></div>
-            <div>Sharpe: <strong>{{ run.phases.bear.sharpe }}</strong></div>
-            <div>Trades: <strong>{{ run.phases.bear.trades }}</strong></div>
+          <div class="detail-item">
+            <label>Status</label>
+            <p>{{ run.status }}</p>
           </div>
-        </div>
-        <div class="phase-card">
-          <div class="phase-name">Sideways Market</div>
-          <div class="phase-metrics">
-            <div>Return: <strong>{{ run.phases.sideways.return }}%</strong></div>
-            <div>Sharpe: <strong>{{ run.phases.sideways.sharpe }}</strong></div>
-            <div>Trades: <strong>{{ run.phases.sideways.trades }}</strong></div>
+          <div class="detail-item">
+            <label>PBO</label>
+            <p>{{ run.pbo }}%</p>
+          </div>
+          <div class="detail-item">
+            <label>DSR</label>
+            <p>{{ run.dsr }}%</p>
+          </div>
+          <div class="detail-item">
+            <label>OOS</label>
+            <p>{{ run.oos }}%</p>
           </div>
         </div>
       </div>
-    </section>
-
-    <!-- Metadata -->
-    <section class="metadata">
-      <h3>Details</h3>
-      <div class="metadata-grid">
-        <div>
-          <strong>Window Start:</strong>
-          {{ run.windowStart }}
-        </div>
-        <div>
-          <strong>Window End:</strong>
-          {{ run.windowEnd }}
-        </div>
-        <div>
-          <strong>Trading Days:</strong>
-          {{ run.tradingDays }}
-        </div>
-        <div>
-          <strong>Created:</strong>
-          {{ run.createdAt }}
-        </div>
-      </div>
-    </section>
+    </div>
   </div>
 </template>
 
 <style scoped>
-.shadow-run-detail {
-  display: flex;
-  flex-direction: column;
-  gap: 24px;
-  padding: 24px;
+.shadow-run-detail-page {
+  padding: 2rem;
   max-width: 1200px;
   margin: 0 auto;
 }
 
-.detail-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: flex-start;
-  border-bottom: 1px solid #e0e0e0;
-  padding-bottom: 16px;
+.page-header {
+  margin-bottom: 2rem;
 }
 
-.detail-header h1 {
+.page-header h1 {
   margin: 0;
-  font-size: 28px;
+  font-size: 2rem;
+  font-weight: 700;
 }
 
-.breadcrumb {
-  margin: 8px 0 0 0;
-  color: #666;
-  font-size: 14px;
+.loading-state,
+.error-state {
+  padding: 2rem;
+  text-align: center;
+  border: 1px solid var(--color-border-primary);
+  border-radius: var(--border-radius-md);
+  background-color: var(--color-background-secondary);
 }
 
-.breadcrumb a {
-  color: var(--kbx-color-primary, #3b82f6);
-  text-decoration: none;
-  cursor: pointer;
+.shadow-run-detail {
+  border: 1px solid var(--color-border-primary);
+  border-radius: var(--border-radius-md);
+  padding: 2rem;
+  background-color: var(--color-background-secondary);
 }
 
-.breadcrumb a:hover {
-  text-decoration: underline;
+.detail-section h2 {
+  margin: 0 0 1.5rem 0;
+  font-size: 1.5rem;
 }
 
-.header-actions {
-  display: flex;
-  gap: 12px;
-}
-
-.validation-summary {
-  padding: 16px;
-  border-radius: 8px;
-  border-left: 4px solid #ccc;
-}
-
-.validation-summary.status-valid {
-  background: #f0fdf4;
-  border-left-color: #10b981;
-}
-
-.validation-summary.status-warning {
-  background: #fffbeb;
-  border-left-color: #f59e0b;
-}
-
-.validation-summary.status-invalid {
-  background: #fef2f2;
-  border-left-color: #ef4444;
-}
-
-.validation-summary h2 {
-  margin: 0 0 12px 0;
-  font-size: 16px;
-}
-
-.validation-message {
-  font-size: 14px;
-  margin-bottom: 8px;
-  font-family: monospace;
-}
-
-.overall-status {
-  font-weight: bold;
-  font-size: 18px;
-}
-
-.metrics-grid {
+.detail-grid {
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
-  gap: 16px;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  gap: 1.5rem;
 }
 
-.metric-card {
-  padding: 16px;
-  background: #f9f9f9;
-  border-radius: 8px;
-  border: 1px solid #e0e0e0;
-}
-
-.metric-label {
-  font-size: 12px;
-  color: #666;
-  margin-bottom: 8px;
-  text-transform: uppercase;
+.detail-item label {
+  display: block;
   font-weight: 600;
+  margin-bottom: 0.5rem;
+  color: var(--color-text-secondary);
 }
 
-.metric-value {
-  font-size: 24px;
-  font-weight: bold;
-  color: #333;
-}
-
-.metric-value.positive {
-  color: #10b981;
-}
-
-.metric-value.negative {
-  color: #ef4444;
-}
-
-.metric-value.ok {
-  color: #10b981;
-}
-
-.phase-breakdown {
-  margin-top: 24px;
-}
-
-.phase-breakdown h2 {
-  font-size: 18px;
-  margin-bottom: 16px;
-}
-
-.phase-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-  gap: 16px;
-}
-
-.phase-card {
-  padding: 16px;
-  background: #f9f9f9;
-  border-radius: 8px;
-  border: 1px solid #e0e0e0;
-}
-
-.phase-name {
-  font-weight: bold;
-  font-size: 16px;
-  margin-bottom: 12px;
-}
-
-.phase-metrics {
-  font-size: 14px;
-  line-height: 1.8;
-}
-
-.metadata {
-  border-top: 1px solid #e0e0e0;
-  padding-top: 16px;
-}
-
-.metadata h3 {
-  margin: 0 0 12px 0;
-}
-
-.metadata-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-  gap: 12px;
-  font-size: 14px;
-}
-
-.metadata-grid div {
-  padding: 8px;
-  background: #f9f9f9;
-  border-radius: 4px;
+.detail-item p {
+  margin: 0;
+  color: var(--color-text-primary);
 }
 </style>
diff --git a/frontend/src/features/shadow-run/pages/ShadowRunList.vue b/frontend/src/features/shadow-run/pages/ShadowRunList.vue
index 4e91abd3..868c179a 100644
--- a/frontend/src/features/shadow-run/pages/ShadowRunList.vue
+++ b/frontend/src/features/shadow-run/pages/ShadowRunList.vue
@@ -1,252 +1,134 @@
 <script setup lang="ts">
-import { ref, computed, onMounted, onUnmounted } from 'vue'
-import { useRouter } from 'vue-router'
-import KsListPage from '@shared/ui/components/KsListPage.vue'
-import { KsButton, KsDataGrid, KsTextField } from '@shared/ui/components'
-import { useKbxRegistry } from '@shared/composables/useKbxRegistry'
-import { useShadowRunsList, type ShadowRun } from '../composables/useShadowRuns'
-import type { ShadowRunListParams } from '../composables/useShadowRuns'
-import { toUiGridColumns } from '@shared/ui/gridColumnAdapter'
+import { ref, computed } from 'vue'
+import { SkeletonLoader } from '@shared/ui/components'
+import { useShadowRunsList } from '../composables/useShadowRuns'
 
-const router = useRouter()
-const registry = useKbxRegistry()
-
-// Get screen definition from registry
-const screenDef = computed(() =>
-  registry.getScreen('model-ops.shadow-run.list'),
-)
-
-const shadowRunColumns = computed(() => toUiGridColumns(screenDef.value?.grid?.columnDefs ?? []))
-
-// Search and filter state
-const searchQuery = ref('')
-const statusFilter = ref('all')
-const dateRangeStart = ref('')
-const dateRangeEnd = ref('')
-
-// Pagination
 const currentPage = ref(1)
-const pageSize = ref(50)
+const pageSize = ref(20)
 
-// Query parameters
-const queryParams = computed<ShadowRunListParams>(() => ({
+const queryParams = computed(() => ({
   page: currentPage.value,
   pageSize: pageSize.value,
-  search: searchQuery.value || undefined,
-  status: statusFilter.value === 'all' ? undefined : statusFilter.value,
-  dateStart: dateRangeStart.value || undefined,
-  dateEnd: dateRangeEnd.value || undefined,
 }))
 
-// TanStack Query hook
 const shadowRunsQuery = useShadowRunsList(queryParams.value)
 
-const dataState = computed<'idle' | 'pending' | 'ready' | 'error' | 'empty'>(() => {
-  if (shadowRunsQuery.isPending.value) return 'pending'
-  if (shadowRunsQuery.isError.value) return 'error'
-  if (shadowRunsQuery.data.value?.items.length === 0) return 'empty'
-  return 'ready'
-})
-
-// Quick filters
-const quickFilters = computed(() => {
-  const total = shadowRunsQuery.data.value?.total || 0
-  return [
-    { id: 'all', label: 'All', active: statusFilter.value === 'all', badge: total },
-    { id: 'valid', label: 'Valid', active: statusFilter.value === 'valid', badge: 1 },
-    { id: 'review', label: 'Review', active: statusFilter.value === 'review', badge: 1 },
-  ]
-})
-
-// Summary items
-const summaryItems = computed(() => {
-  const items = shadowRunsQuery.data.value?.items || []
-  const validCount = items.filter(r => r.pbo <= 20 && r.dsr >= 95 && r.oos <= 2.5).length
-  const avgSharpe = items.length > 0 ? (items.reduce((sum, r) => sum + r.sharpeRatio, 0) / items.length).toFixed(2) : '0'
-
-  return [
-    { label: 'Total Runs', value: items.length },
-    { label: 'Valid', value: validCount },
-    { label: 'Avg Sharpe', value: avgSharpe },
-  ]
-})
-
-// Actions
-const handleSearch = () => {
-  shadowRunsQuery.refetch()
-}
-
-const handleNewRun = () => {
-  router.push('/model-ops/shadow-runs/new')
-}
-
-const handleRowClick = (runId: string) => {
-  router.push(`/model-ops/shadow-runs/${runId}`)
-}
-
-const handleRowSelected = (row: unknown) => {
-  const shadowRun = row as Partial<ShadowRun>
-  if (typeof shadowRun.runId === 'string') handleRowClick(shadowRun.runId)
-}
-
-const handleQuickFilter = (filterId: string) => {
-  statusFilter.value = filterId
-  currentPage.value = 1
-}
-
-const handleRefresh = () => {
-  handleSearch()
-}
-
-// Keyboard shortcuts
-const handleKeydown = (e: KeyboardEvent) => {
-  if (e.key === 'F3') {
-    e.preventDefault()
-    handleSearch()
-  } else if (e.ctrlKey && e.key === 'n') {
-    e.preventDefault()
-    handleNewRun()
-  }
-}
-
-onMounted(() => {
-  window.addEventListener('keydown', handleKeydown)
-})
-
-onUnmounted(() => {
-  window.removeEventListener('keydown', handleKeydown)
+const items = computed(() => {
+  const data = shadowRunsQuery.data as any
+  return data?.items || []
 })
 </script>
 
 <template>
-  <div v-if="screenDef" class="shadow-run-list">
-    <KsListPage
-      :screen="screenDef"
-      :data-state="dataState"
-      :loading="dataState === 'pending'"
-      :summary-items="summaryItems"
-      :quick-filters="quickFilters"
-      @quick-filter="handleQuickFilter"
-      @refresh="handleRefresh"
-    >
-      <!-- Header Actions -->
-      <template #header-actions>
-        <KsButton
-          label="New Shadow Run"
-          severity="primary"
-          @click="handleNewRun"
-        />
-      </template>
+  <div class="shadow-run-list-page">
+    <header class="page-header">
+      <h1>Shadow Run Validation</h1>
+      <p>View and manage shadow run validations (252+ trading day backtests)</p>
+    </header>
 
-      <!-- Search Panel -->
-      <template #search>
-        <div class="shadow-run-search">
-          <div class="search-row">
-            <KsTextField
-              v-model="searchQuery"
-              label="Shadow run search"
-              placeholder="Search by model name..."
-              @keydown.enter="handleSearch"
-            />
-            <KsButton
-              label="Search"
-              severity="secondary"
-              @click="handleSearch"
-            />
-          </div>
-          <div class="search-row">
-            <KsTextField
-              v-model="dateRangeStart"
-              type="date"
-              label="Start date"
-              placeholder="Start Date"
-            />
-            <KsTextField
-              v-model="dateRangeEnd"
-              type="date"
-              label="End date"
-              placeholder="End Date"
-            />
-            <select v-model="statusFilter" class="status-filter">
-              <option value="all">All Status</option>
-              <option value="completed">Completed</option>
-              <option value="running">Running</option>
-              <option value="failed">Failed</option>
-            </select>
-          </div>
-        </div>
-      </template>
+    <!-- Loading State -->
+    <div v-if="shadowRunsQuery.isPending" class="loading-state">
+      <SkeletonLoader type="table" :rows="5" />
+    </div>
 
-      <!-- Content Area -->
-      <template #content>
-        <KsDataGrid
-          v-if="screenDef.grid && shadowRunsQuery.data.value?.items"
-          :columns="shadowRunsQuery.data.value?.items.length ? shadowRunColumns : []"
-          :rows="shadowRunsQuery.data.value?.items || []"
-          :loading="shadowRunsQuery.isPending.value"
-          @row-selected="handleRowSelected"
-        />
-      </template>
-    </KsListPage>
+    <!-- Error State -->
+    <div v-else-if="shadowRunsQuery.isError" class="error-state">
+      <p>Failed to load shadow runs</p>
+    </div>
+
+    <!-- Empty State -->
+    <div v-else-if="!items.length" class="empty-state">
+      <p>No shadow runs found. Create a new shadow run to get started.</p>
+    </div>
+
+    <!-- Data State -->
+    <div v-else class="shadow-runs-grid">
+      <table class="shadow-runs-table">
+        <thead>
+          <tr>
+            <th>Run ID</th>
+            <th>Model</th>
+            <th>Status</th>
+            <th>PBO</th>
+            <th>DSR</th>
+            <th>OOS</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr v-for="run in items" :key="(run as any).id" data-testid="shadow-run-row">
+            <td>{{ (run as any).id }}</td>
+            <td>{{ (run as any).modelName }}</td>
+            <td>{{ (run as any).status }}</td>
+            <td>{{ (run as any).pbo }}%</td>
+            <td>{{ (run as any).dsr }}%</td>
+            <td>{{ (run as any).oos }}%</td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
   </div>
 </template>
 
 <style scoped>
-.shadow-run-list {
-  display: flex;
-  flex-direction: column;
-  height: 100%;
+.shadow-run-list-page {
+  padding: 2rem;
+  max-width: 1400px;
+  margin: 0 auto;
 }
 
-.shadow-run-search {
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-  padding: 12px;
-  background: var(--kbx-color-surface, #f5f5f5);
-  border-radius: 4px;
+.page-header {
+  margin-bottom: 2rem;
 }
 
-.search-row {
-  display: flex;
-  gap: 12px;
-  align-items: center;
+.page-header h1 {
+  margin: 0;
+  font-size: 2rem;
+  font-weight: 700;
 }
 
-.search-row input,
-.search-row select {
-  height: var(--kbx-input-height, 34px);
-  padding: 4px 8px;
-  border: 1px solid #d0d0d0;
-  border-radius: 4px;
-  font-size: var(--kbx-font-size, 14px);
+.page-header p {
+  margin: 0.5rem 0 0 0;
+  color: var(--color-text-secondary);
 }
 
-.status-filter {
-  flex: 0 0 120px;
+.loading-state,
+.error-state,
+.empty-state {
+  padding: 2rem;
+  text-align: center;
+  border: 1px solid var(--color-border-primary);
+  border-radius: var(--border-radius-md);
+  background-color: var(--color-background-secondary);
 }
 
-.badge {
-  background: var(--kbx-color-primary, #3b82f6);
-  color: white;
-  padding: 2px 6px;
-  border-radius: 12px;
-  font-size: 11px;
-  margin-left: 4px;
+.shadow-runs-grid {
+  border: 1px solid var(--color-border-primary);
+  border-radius: var(--border-radius-md);
+  overflow: hidden;
 }
 
-.state-spinner {
-  width: 40px;
-  height: 40px;
-  border: 3px solid #d0d0d0;
-  border-top-color: var(--kbx-color-primary, #3b82f6);
-  border-radius: 50%;
-  animation: spin 0.8s linear infinite;
+.shadow-runs-table {
+  width: 100%;
+  border-collapse: collapse;
 }
 
-@keyframes spin {
-  to {
-    transform: rotate(360deg);
-  }
+.shadow-runs-table thead {
+  background-color: var(--color-background-secondary);
+}
+
+.shadow-runs-table th {
+  padding: 1rem;
+  text-align: left;
+  font-weight: 600;
+  border-bottom: 1px solid var(--color-border-primary);
+}
+
+.shadow-runs-table td {
+  padding: 1rem;
+  border-bottom: 1px solid var(--color-border-primary);
+}
+
+.shadow-runs-table tbody tr:hover {
+  background-color: var(--color-background-hover);
 }
 </style>
diff --git a/frontend/src/features/shadow-run/registry.ts b/frontend/src/features/shadow-run/registry.ts
index 0dc8bcab..eb6ccad6 100644
--- a/frontend/src/features/shadow-run/registry.ts
+++ b/frontend/src/features/shadow-run/registry.ts
@@ -1,103 +1,14 @@
 /**
  * ShadowRun Feature Screen Registry
- * Define all screens in the shadow-run feature module
  */
 
-import type { ScreenDefinition } from '@kbx/contracts'
-
-export const shadowRunListScreen: KbxScreenDefinition = {
-  screenId: 'model-ops.shadow-run.list',
-  title: 'Shadow Run Validation',
+export const shadowRunQueueScreen = {
+  screenId: 'model-ops.shadow-run.queue',
+  title: 'Shadow Run Queue',
   module: 'ModelOps',
-  type: 'list',
   path: '/model-ops/shadow-runs',
-  component: () => import('./pages/ShadowRunList.vue'),
+  component: () => import('./pages/ShadowRunQueue.vue'),
   permissions: ['model.read'],
-  description: 'View and manage shadow run validations (252+ trading day backtests)',
-
-  help: {
-    title: 'Shadow Run Validation',
-    sections: [
-      {
-        title: 'Overview',
-        content:
-          'Shadow runs validate model performance on historical data without executing trades. Each run includes PBO, DSR, and OOS metrics.',
-      },
-      {
-        title: 'How to Start',
-        content:
-          '1. Click "Search" (F3) to view existing runs\n2. Click "New" to initiate a new shadow run\n3. Select date range and model\n4. Monitor progress in the dashboard',
-      },
-      {
-        title: 'Interpreting Results',
-        content:
-          'PBO ≤ 20%, DSR ≥ 95%, OOS ≤ 2.5% indicates model validity. Check phase breakdown (Bull/Bear/Sideways) for regime-specific performance.',
-      },
-    ],
-    relatedScreens: ['model-ops.models.list'],
-  },
-
-  grid: {
-    columnDefs: [
-      { field: 'runId', header: 'Run ID', type: 'link', width: 120, pinned: 'left' },
-      { field: 'modelName', header: 'Model', width: 150 },
-      { field: 'windowStart', header: 'Start Date', type: 'date', width: 120 },
-      { field: 'windowEnd', header: 'End Date', type: 'date', width: 120 },
-      { field: 'tradingDays', header: 'Days', type: 'number', width: 80 },
-      { field: 'totalReturn', header: 'Return', type: 'money', width: 100 },
-      { field: 'sharpeRatio', header: 'Sharpe', type: 'number', width: 80 },
-      { field: 'pbo', header: 'PBO', type: 'percentage', width: 80 },
-      { field: 'dsr', header: 'DSR', type: 'percentage', width: 80 },
-      { field: 'oos', header: 'OOS', type: 'percentage', width: 80 },
-      { field: 'status', header: 'Status', type: 'status', width: 100 },
-      { field: 'createdAt', header: 'Created', type: 'datetime', width: 150 },
-    ],
-    pageSize: 50,
-    serverSideDatasource: true,
-  },
-
-  shortcuts: [
-    { key: 'F3', label: 'Search', action: 'search' },
-    { key: 'Ctrl+N', label: 'New Shadow Run', action: 'new' },
-  ],
-
-  telemetry: { enabled: true },
 }
 
-export const shadowRunDetailScreen: KbxScreenDefinition = {
-  screenId: 'model-ops.shadow-run.detail',
-  title: 'Shadow Run Details',
-  module: 'ModelOps',
-  type: 'detail',
-  path: '/model-ops/shadow-runs/:runId',
-  component: () => import('./pages/ShadowRunDetail.vue'),
-  permissions: ['model.read'],
-  description: 'Detailed analysis of a shadow run with metrics breakdown',
-
-  help: {
-    title: 'Shadow Run Analysis',
-    sections: [
-      {
-        title: 'Metrics Explained',
-        content:
-          'PBO: Probability of Backtest Overfit. DSR: Daily Sharpe Ratio. OOS: Out-of-Sample performance. Lower PBO and OOS, higher DSR is better.',
-      },
-    ],
-    relatedScreens: ['model-ops.shadow-run.list', 'model-ops.models.detail'],
-  },
-
-  shortcuts: [
-    { key: 'Escape', label: 'Back to List', action: 'back' },
-    { key: 'Ctrl+E', label: 'Export', action: 'export' },
-  ],
-
-  telemetry: { enabled: true },
-}
-
-/**
- * All screens in shadow-run module
- */
-export const shadowRunScreens: KbxScreenDefinition[] = [
-  shadowRunListScreen,
-  shadowRunDetailScreen,
-]
+export const shadowRunScreens = [shadowRunQueueScreen]
diff --git a/frontend/src/main.ts b/frontend/src/main.ts
index 30c8efad..a3c8ce5a 100644
--- a/frontend/src/main.ts
+++ b/frontend/src/main.ts
@@ -5,15 +5,13 @@ import App from './App.vue'
 import { router } from './app/router'
 import { queryClient } from './app/queryClient'
 import { resolveUiProvider } from './shared/ui/provider'
-import { installKbx, registerScreens } from './app/installKbx'
-import { screens } from './registry/screens'
+import { installKbx } from './app/installKbx'
 import './design-system/base.css'
 
 const app = createApp(App)
 app.use(createPinia())
 app.use(router)
 app.use(VueQueryPlugin, { queryClient })
-registerScreens(screens)
 app.use(installKbx)
 ;(await resolveUiProvider(import.meta.env.VITE_UI_ADAPTER)).install(app)
 app.mount('#app')
diff --git a/frontend/src/shared/@kbx/README.md b/frontend/src/shared/@kbx/README.md
deleted file mode 100644
index 7fd2bdff..00000000
--- a/frontend/src/shared/@kbx/README.md
+++ /dev/null
@@ -1,163 +0,0 @@
-# @kbx — KBX Foundation v60
-
-## Overview
-
-**Phase 1: Core Contracts + Template Components**
-
-이것은 KBX Foundation v60의 **실용적 구현**입니다. 
-- v52 (FE Operational Navigation & Screen Anatomy Hardening) 원칙 준수
-- 자체 포함된 컴포넌트 (의존성 최소화)
-- 점진적 확대 가능
-
-## 구조
-
-```
-@kbx/
-├── contracts/          # 11개 핵심 contract 파일
-│   ├── screen.ts       # Screen definitions (T01-T09)
-│   ├── ui.ts           # UI state & presentation
-│   ├── problem.ts      # Error handling
-│   ├── field.ts        # Form field metadata
-│   ├── workflow.ts     # Record lifecycle
-│   ├── command.ts      # Command definitions
-│   ├── permission.ts   # Authorization
-│   ├── help.ts         # Help system
-│   ├── status.ts       # Status representation
-│   ├── grid.ts         # Data grid config
-│   └── index.ts        # Export barrel
-│
-├── ui/                 # UI Components
-│   ├── components/     # 6개 컴포넌트
-│   │   ├── KbxSectionHeader.vue        # Section header (표준)
-│   │   ├── KbxValidationSummary.vue    # Error display
-│   │   ├── KbxTransactionTemplate.vue  # T03 Header+Detail
-│   │   ├── KbxMasterTemplate.vue       # T02 List+Detail
-│   │   ├── KbxQueueTemplate.vue        # T06 Task Queue
-│   │   └── KbxReconcileTemplate.vue    # T07 Comparison
-│   ├── contracts.ts    # Re-export contracts
-│   └── index.ts        # Export barrel
-│
-└── index.ts            # Main export
-
-```
-
-## v52 Screen Anatomy
-
-### T02 Master (KbxMasterTemplate)
-**용도**: CRUD 목록 + 상세  
-**예시**: 품목 관리, 고객 관리  
-**구성**:
-- List pane: 목록 + 건수 표시
-- Detail pane: 상세 정보 + 탭
-
-### T03 Transaction (KbxTransactionTemplate)
-**용도**: Header + Detail 트랜잭션  
-**예시**: 주문 등록, 구매 등록  
-**구성**:
-- Header section: 거래처, 배송지 등
-- Detail section: 상품 목록 (Grid)
-
-### T06 Queue (KbxQueueTemplate)
-**용도**: 작업 대기열  
-**예시**: WMS 작업, 승인 대기, 예외 처리  
-**구성**:
-- Queue title + count
-- Queue body (actionable items)
-
-### T07 Reconcile (KbxReconcileTemplate)
-**용도**: 데이터 대사  
-**예시**: OMS ↔ WMS 대사, Expected ↔ Actual  
-**구성**:
-- Column labels: Expected / Difference / Actual
-- Comparison body + aligned state
-
-## 사용 예제
-
-### Transaction 화면
-
-```vue
-<script setup lang="ts">
-import { KbxTransactionTemplate } from '@/shared/@kbx'
-
-const headerTitle = '주문 정보'
-const detailTitle = '주문 상품'
-const items = ref([])
-</script>
-
-<template>
-  <KbxTransactionTemplate
-    :header-title="headerTitle"
-    :detail-title="detailTitle"
-    :detail-count="items.length"
-  >
-    <template #header>
-      <!-- Header form -->
-    </template>
-    <template #detail>
-      <!-- Detail grid -->
-    </template>
-  </KbxTransactionTemplate>
-</template>
-```
-
-### Master 화면
-
-```vue
-<script setup lang="ts">
-import { KbxMasterTemplate } from '@/shared/@kbx'
-
-const items = ref([])
-const selectedItem = ref(null)
-</script>
-
-<template>
-  <KbxMasterTemplate
-    list-title="품목 목록"
-    :list-count="items.length"
-    detail-title="품목 상세"
-  >
-    <template #list>
-      <!-- List grid -->
-    </template>
-    <template #detail>
-      <!-- Detail form -->
-    </template>
-  </KbxMasterTemplate>
-</template>
-```
-
-## Next Steps
-
-### Phase 2: Support Components
-- Form components (Input, Select, DateField, etc.)
-- Data grid component (AG Grid wrapper)
-- Dialog, Drawer, Tabs
-- Lookup, Status tag
-
-### Phase 3: Integration
-- Registry system (screen definitions)
-- Router integration
-- Global composables (validation, dirty state)
-- App initialization
-
-## Design Tokens
-
-Template들은 다음 CSS variables를 사용합니다:
-
-```css
---kbx-color-surface         /* Background */
---kbx-color-border          /* Border color */
---kbx-color-text            /* Text */
---kbx-color-text-muted      /* Muted text */
---kbx-color-section-heading /* Section background */
---kbx-color-module-accent   /* Module brand color */
---kbx-color-success         /* Success tone */
---kbx-color-danger          /* Error tone */
---kbx-color-danger-light    /* Error background */
-```
-
-## 참고
-
-- **v60 Reference**: `docs/Design/kbx-foundation-v60-status-canonical-contract-hardening/`
-- **v52 Design Doc**: `KBX-FE-Operational-Navigation-Screen-Anatomy-v52.md`
-- **CLAUDE.md**: 프로젝트 아키텍처 가이드
diff --git a/frontend/src/shared/@kbx/composables/index.ts b/frontend/src/shared/@kbx/composables/index.ts
deleted file mode 100644
index 6bf6abf5..00000000
--- a/frontend/src/shared/@kbx/composables/index.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-/**
- * @kbx Composables — v60
- * Global state management and utilities
- */
-
-export * from './useKbxValidation'
-export * from './useKbxDirtyState'
-export * from './useKbxPermission'
diff --git a/frontend/src/shared/@kbx/composables/useKbxDirtyState.ts b/frontend/src/shared/@kbx/composables/useKbxDirtyState.ts
deleted file mode 100644
index 4eeb605e..00000000
--- a/frontend/src/shared/@kbx/composables/useKbxDirtyState.ts
+++ /dev/null
@@ -1,104 +0,0 @@
-/**
- * useKbxDirtyState — v60
- * Track unsaved changes in forms
- */
-
-import { ref, computed } from 'vue'
-
-export interface DirtyState {
-  [key: string]: boolean
-}
-
-export function useKbxDirtyState(initialState: DirtyState = {}) {
-  const dirtyFields = ref<DirtyState>(initialState)
-
-  /**
-   * Check if form is dirty (has unsaved changes)
-   */
-  const dirty = computed(() => Object.values(dirtyFields.value).some(v => v))
-
-  /**
-   * Check if specific field is dirty
-   */
-  const isFieldDirty = (field: string): boolean => {
-    return dirtyFields.value[field] ?? false
-  }
-
-  /**
-   * Mark field as dirty
-   */
-  const markFieldDirty = (field: string): void => {
-    dirtyFields.value[field] = true
-  }
-
-  /**
-   * Mark field as clean
-   */
-  const markFieldClean = (field: string): void => {
-    dirtyFields.value[field] = false
-  }
-
-  /**
-   * Mark all fields as clean
-   */
-  const markAllClean = (): void => {
-    Object.keys(dirtyFields.value).forEach(key => {
-      dirtyFields.value[key] = false
-    })
-  }
-
-  /**
-   * Mark all fields as dirty
-   */
-  const markAllDirty = (): void => {
-    Object.keys(dirtyFields.value).forEach(key => {
-      dirtyFields.value[key] = true
-    })
-  }
-
-  /**
-   * Reset to initial state
-   */
-  const reset = (newInitialState: DirtyState = {}): void => {
-    dirtyFields.value = newInitialState
-  }
-
-  /**
-   * Touch field (mark as visited)
-   */
-  const touchField = (field: string): void => {
-    if (!(field in dirtyFields.value)) {
-      dirtyFields.value[field] = false
-    }
-  }
-
-  /**
-   * Get dirty field names
-   */
-  const getDirtyFields = (): string[] => {
-    return Object.entries(dirtyFields.value)
-      .filter(([, isDirty]) => isDirty)
-      .map(([field]) => field)
-  }
-
-  /**
-   * Set dirty state of multiple fields
-   */
-  const setDirtyFields = (fields: DirtyState): void => {
-    dirtyFields.value = { ...dirtyFields.value, ...fields }
-  }
-
-  return {
-    dirty,
-    dirtyFields,
-    isFieldDirty,
-    markFieldDirty,
-    markFieldClean,
-    markAllClean,
-    markAllDirty,
-    touchField,
-    getDirtyFields,
-    setDirtyFields,
-    reset,
-  }
-}
diff --git a/frontend/src/shared/@kbx/composables/useKbxPermission.ts b/frontend/src/shared/@kbx/composables/useKbxPermission.ts
deleted file mode 100644
index 50ca422b..00000000
--- a/frontend/src/shared/@kbx/composables/useKbxPermission.ts
+++ /dev/null
@@ -1,135 +0,0 @@
-/**
- * useKbxPermission — v60
- * Permission checking and RBAC utilities
- */
-
-import { ref, readonly } from 'vue'
-
-export function useKbxPermission() {
-  const userPermissions = ref<Set<string>>(new Set())
-
-  /**
-   * Set user permissions (call after login)
-   */
-  const setPermissions = (permissions: string[]): void => {
-    userPermissions.value = new Set(permissions)
-  }
-
-  /**
-   * Add permission to user
-   */
-  const addPermission = (permission: string): void => {
-    userPermissions.value.add(permission)
-  }
-
-  /**
-   * Remove permission from user
-   */
-  const removePermission = (permission: string): void => {
-    userPermissions.value.delete(permission)
-  }
-
-  /**
-   * Check if user has permission
-   */
-  const has = (permission: string): boolean => {
-    return userPermissions.value.has(permission)
-  }
-
-  /**
-   * Check if user has any of the permissions
-   */
-  const hasAny = (permissions: string[]): boolean => {
-    return permissions.some(p => userPermissions.value.has(p))
-  }
-
-  /**
-   * Check if user has all permissions
-   */
-  const hasAll = (permissions: string[]): boolean => {
-    return permissions.every(p => userPermissions.value.has(p))
-  }
-
-  /**
-   * Get all user permissions
-   */
-  const getPermissions = (): string[] => {
-    return Array.from(userPermissions.value)
-  }
-
-  /**
-   * Check if user has at least one permission (for showing UI)
-   */
-  const canView = (requiredPermissions?: string[]): boolean => {
-    if (!requiredPermissions || requiredPermissions.length === 0) {
-      return true
-    }
-    return hasAny(requiredPermissions)
-  }
-
-  /**
-   * Check if user can edit (requires specific permission)
-   */
-  const canEdit = (permission: string): boolean => {
-    return has(permission)
-  }
-
-  /**
-   * Check if user can delete (requires specific permission)
-   */
-  const canDelete = (permission: string): boolean => {
-    return has(permission)
-  }
-
-  /**
-   * Guard function for route navigation
-   */
-  const guard = (requiredPermissions?: string[]): boolean => {
-    return canView(requiredPermissions)
-  }
-
-  /**
-   * Clear all permissions (call on logout)
-   */
-  const clear = (): void => {
-    userPermissions.value.clear()
-  }
-
-  return {
-    permissions: readonly(userPermissions),
-    setPermissions,
-    addPermission,
-    removePermission,
-    has,
-    hasAny,
-    hasAll,
-    getPermissions,
-    canView,
-    canEdit,
-    canDelete,
-    guard,
-    clear,
-  }
-}
-
-/**
- * Global permission instance (singleton)
- */
-let globalPermissions: ReturnType<typeof useKbxPermission> | null = null
-
-/**
- * Get or create global permission instance
- */
-export function getGlobalPermissions(): ReturnType<typeof useKbxPermission> {
-  if (!globalPermissions) {
-    globalPermissions = useKbxPermission()
-  }
-  return globalPermissions
-}
-
-/**
- * Helper for components to use global permissions
- */
-export function useGlobalPermission() {
-  return getGlobalPermissions()
-}
diff --git a/frontend/src/shared/@kbx/composables/useKbxValidation.ts b/frontend/src/shared/@kbx/composables/useKbxValidation.ts
deleted file mode 100644
index a6deef08..00000000
--- a/frontend/src/shared/@kbx/composables/useKbxValidation.ts
+++ /dev/null
@@ -1,124 +0,0 @@
-/**
- * useKbxValidation — v60
- * Form validation state management
- */
-
-import { ref, computed } from 'vue'
-import type { KbxValidationError, KbxProblem } from '../contracts'
-
-export function useKbxValidation() {
-  const errors = ref<KbxValidationError[]>([])
-
-  /**
-   * Get errors for a specific field
-   */
-  const getFieldError = (field: string): string | undefined => {
-    const error = errors.value.find(e => e.field === field && !e.rowKey)
-    return error?.message
-  }
-
-  /**
-   * Get errors for a specific row field (in grid)
-   */
-  const getRowFieldError = (rowKey: string, field: string): string | undefined => {
-    const error = errors.value.find(e => e.rowKey === rowKey && e.field === field)
-    return error?.message
-  }
-
-  /**
-   * Check if field has error
-   */
-  const hasFieldError = (field: string): boolean => {
-    return errors.value.some(e => e.field === field && !e.rowKey)
-  }
-
-  /**
-   * Check if row field has error
-   */
-  const hasRowFieldError = (rowKey: string, field: string): boolean => {
-    return errors.value.some(e => e.rowKey === rowKey && e.field === field)
-  }
-
-  /**
-   * Get all errors
-   */
-  const hasErrors = computed(() => errors.value.length > 0)
-
-  /**
-   * Set errors (typically from API response)
-   */
-  const setErrors = (newErrors: KbxValidationError[]): void => {
-    errors.value = newErrors
-  }
-
-  /**
-   * Add error for field
-   */
-  const addError = (field: string, message: string, code: string = 'validation.error'): void => {
-    errors.value.push({ field, code, message })
-  }
-
-  /**
-   * Add error for row field (in grid)
-   */
-  const addRowError = (
-    rowKey: string,
-    field: string,
-    message: string,
-    code: string = 'validation.error'
-  ): void => {
-    errors.value.push({ rowKey, field, code, message })
-  }
-
-  /**
-   * Clear errors for a field
-   */
-  const clearFieldErrors = (field: string): void => {
-    errors.value = errors.value.filter(e => e.field !== field)
-  }
-
-  /**
-   * Clear errors for a row field
-   */
-  const clearRowFieldErrors = (rowKey: string, field?: string): void => {
-    if (field) {
-      errors.value = errors.value.filter(e => !(e.rowKey === rowKey && e.field === field))
-    } else {
-      errors.value = errors.value.filter(e => e.rowKey !== rowKey)
-    }
-  }
-
-  /**
-   * Clear all errors
-   */
-  const clear = (): void => {
-    errors.value = []
-  }
-
-  /**
-   * Apply errors from KbxProblem (API response)
-   */
-  const applyProblem = (problem: KbxProblem): void => {
-    if (problem.type === 'validation') {
-      errors.value = problem.errors
-    } else {
-      errors.value = []
-    }
-  }
-
-  return {
-    errors,
-    hasErrors,
-    getFieldError,
-    getRowFieldError,
-    hasFieldError,
-    hasRowFieldError,
-    setErrors,
-    addError,
-    addRowError,
-    clearFieldErrors,
-    clearRowFieldErrors,
-    clear,
-    applyProblem,
-  }
-}
diff --git a/frontend/src/shared/@kbx/contracts/command.ts b/frontend/src/shared/@kbx/contracts/command.ts
deleted file mode 100644
index 39e195e3..00000000
--- a/frontend/src/shared/@kbx/contracts/command.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-/**
- * Command Definition Contracts — v60
- * Screen commands (Save, Delete, Approve, etc.)
- */
-
-export type KbxCommandGroup = 'query' | 'edit' | 'workflow' | 'output' | 'more'
-
-export type KbxCommandVariant = 'primary' | 'secondary' | 'danger' | 'ghost'
-
-export type KbxRecipePermissionKind = 'none' | 'write' | 'execute'
-
-export interface KbxCommandDefinition {
-  id: string
-  label: string
-  group: KbxCommandGroup
-  shortcut?: string
-  variant?: KbxCommandVariant
-  permissionKind: KbxRecipePermissionKind
-  icon?: string
-  disabled?: boolean
-}
diff --git a/frontend/src/shared/@kbx/contracts/field.ts b/frontend/src/shared/@kbx/contracts/field.ts
deleted file mode 100644
index 0931e4c2..00000000
--- a/frontend/src/shared/@kbx/contracts/field.ts
+++ /dev/null
@@ -1,45 +0,0 @@
-/**
- * Field Definition Contracts — v60
- * Form field metadata, validation, and state
- */
-
-export type KbxFieldType =
-  | 'text'
-  | 'number'
-  | 'currency'
-  | 'percentage'
-  | 'date'
-  | 'datetime'
-  | 'time'
-  | 'select'
-  | 'multi-select'
-  | 'checkbox'
-  | 'radio'
-  | 'textarea'
-  | 'lookup'
-  | 'barcode'
-
-export interface KbxFieldDefinition {
-  name: string
-  type: KbxFieldType
-  label: string
-  required?: boolean
-  readonly?: boolean
-  hidden?: boolean
-  placeholder?: string
-  helpText?: string
-  pattern?: string
-  minLength?: number
-  maxLength?: number
-  min?: number
-  max?: number
-  format?: string
-}
-
-export interface KbxFieldReadonlyPolicy {
-  [fieldName: string]: boolean
-}
-
-export function kbxFieldReadonly(policy: KbxFieldReadonlyPolicy, fieldName: string): boolean {
-  return policy[fieldName] ?? false
-}
diff --git a/frontend/src/shared/@kbx/contracts/grid.ts b/frontend/src/shared/@kbx/contracts/grid.ts
deleted file mode 100644
index 624d8b2b..00000000
--- a/frontend/src/shared/@kbx/contracts/grid.ts
+++ /dev/null
@@ -1,32 +0,0 @@
-/**
- * Data Grid Definition Contracts — v60
- */
-
-export type KbxGridColumnType =
-  | 'text'
-  | 'number'
-  | 'currency'
-  | 'percentage'
-  | 'date'
-  | 'datetime'
-  | 'status'
-  | 'link'
-  | 'action'
-
-export interface KbxGridColumnDefinition {
-  field: string
-  header: string
-  type: KbxGridColumnType
-  width?: number | string
-  pinned?: 'left' | 'right'
-  sortable?: boolean
-  filterable?: boolean
-  editable?: boolean
-}
-
-export interface KbxGridDefinition {
-  columnDefs: KbxGridColumnDefinition[]
-  pageSize?: number
-  serverSideDatasource?: boolean
-  rowHeight?: number | string
-}
diff --git a/frontend/src/shared/@kbx/contracts/help.ts b/frontend/src/shared/@kbx/contracts/help.ts
deleted file mode 100644
index 9c31e6a6..00000000
--- a/frontend/src/shared/@kbx/contracts/help.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-/**
- * Help & Documentation Contracts — v60
- */
-
-export interface KbxHelpContent {
-  key: string
-  title: string
-  purpose: string
-  steps?: string[]
-  shortcuts?: { key: string; description: string }[]
-  cautions?: string[]
-  relatedScreens?: { id: string; title: string }[]
-}
-
-export interface KbxHelpDefinition {
-  screenId: string
-  content: KbxHelpContent
-}
diff --git a/frontend/src/shared/@kbx/contracts/index.ts b/frontend/src/shared/@kbx/contracts/index.ts
deleted file mode 100644
index 7690c689..00000000
--- a/frontend/src/shared/@kbx/contracts/index.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-/**
- * @kbx/contracts — KBX Foundation v60
- * Core contract definitions for screens, UI, validation, and workflow
- */
-
-export * from './screen'
-export * from './ui'
-export * from './command'
-export * from './field'
-export * from './workflow'
-export * from './permission'
-export * from './help'
-export * from './problem'
-export * from './status'
-export * from './grid'
diff --git a/frontend/src/shared/@kbx/contracts/permission.ts b/frontend/src/shared/@kbx/contracts/permission.ts
deleted file mode 100644
index 9d2fd4a8..00000000
--- a/frontend/src/shared/@kbx/contracts/permission.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-/**
- * Permission & Authorization Contracts — v60
- */
-
-export interface KbxPermissionContext {
-  has(permission: string): boolean
-  hasAny(permissions: readonly string[]): boolean
-  hasAll(permissions: readonly string[]): boolean
-}
-
-export interface KbxPermissionDefinition {
-  id: string
-  label: string
-  description?: string
-  category: string
-}
diff --git a/frontend/src/shared/@kbx/contracts/problem.ts b/frontend/src/shared/@kbx/contracts/problem.ts
deleted file mode 100644
index e71eec00..00000000
--- a/frontend/src/shared/@kbx/contracts/problem.ts
+++ /dev/null
@@ -1,81 +0,0 @@
-/**
- * Problem/Error Handling Contracts — v60
- * Hierarchical error representation for UI and business logic
- */
-
-export interface KbxProblemBase {
-  type: string
-  title: string
-  detail?: string | null
-  correlationId?: string | null
-}
-
-export interface KbxValidationError {
-  field?: string | null
-  rowKey?: string | null
-  code: string
-  message: string
-}
-
-export interface KbxValidationProblem extends KbxProblemBase {
-  type: 'validation'
-  errors: KbxValidationError[]
-}
-
-export interface KbxProblemAction {
-  id: string
-  label: string
-}
-
-export interface KbxBusinessProblem extends KbxProblemBase {
-  type: 'business-rule'
-  code: string
-  actions?: KbxProblemAction[]
-}
-
-export interface KbxConflictProblem extends KbxProblemBase {
-  type: 'conflict'
-  code: string
-  currentVersion?: number | null
-}
-
-export interface KbxPermissionProblem extends KbxProblemBase {
-  type: 'permission'
-  code: string
-}
-
-export interface KbxNotFoundProblem extends KbxProblemBase {
-  type: 'not-found'
-  code: string
-}
-
-export interface KbxIntegrationProblem extends KbxProblemBase {
-  type: 'integration'
-  code: string
-  retryable: boolean
-}
-
-export interface KbxSystemProblem extends KbxProblemBase {
-  type: 'system'
-  code: string
-  correlationId: string
-  retryable?: boolean
-}
-
-export type KbxProblem =
-  | KbxValidationProblem
-  | KbxBusinessProblem
-  | KbxConflictProblem
-  | KbxPermissionProblem
-  | KbxNotFoundProblem
-  | KbxIntegrationProblem
-  | KbxSystemProblem
-
-export function isKbxProblem(value: unknown): value is KbxProblem {
-  return (
-    typeof value === 'object' &&
-    value !== null &&
-    'type' in value &&
-    'title' in value
-  )
-}
diff --git a/frontend/src/shared/@kbx/contracts/screen.ts b/frontend/src/shared/@kbx/contracts/screen.ts
deleted file mode 100644
index 4c27920b..00000000
--- a/frontend/src/shared/@kbx/contracts/screen.ts
+++ /dev/null
@@ -1,38 +0,0 @@
-/**
- * Screen Definition Contracts — v60
- * Fundamental screen identity and template binding
- */
-
-import type { KbxCommandDefinition } from './command'
-
-export type KbxScreenType =
-  | 'list'
-  | 'master'
-  | 'transaction'
-  | 'fast-entry'
-  | 'master-detail'
-  | 'queue'
-  | 'reconcile'
-  | 'import'
-  | 'wms-mobile'
-
-export type KbxScreenTemplateCode = 'T01' | 'T02' | 'T03' | 'T04' | 'T05' | 'T06' | 'T07' | 'T08' | 'T09'
-
-export interface KbxScreenDefinition {
-  id: string
-  version: string
-  module: 'OMS' | 'ERP' | 'WMS' | 'COMMON'
-  type: KbxScreenType
-  /** Explicit template/recipe identity. Type and templateCode must agree. */
-  templateCode: KbxScreenTemplateCode
-  title: string
-  description?: string
-  permissions?: string[]
-  commands?: KbxCommandDefinition[]
-  helpKey?: string
-  telemetry?: { enabled: boolean }
-}
-
-export function defineKbxScreen<T extends KbxScreenDefinition>(definition: T): T {
-  return definition
-}
diff --git a/frontend/src/shared/@kbx/contracts/status.ts b/frontend/src/shared/@kbx/contracts/status.ts
deleted file mode 100644
index ff584f39..00000000
--- a/frontend/src/shared/@kbx/contracts/status.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-/**
- * Status & State Representation Contracts — v60
- */
-
-export type KbxStatusTone = 'default' | 'info' | 'success' | 'warning' | 'danger' | 'muted'
-
-export interface KbxStatusDefinition {
-  id: string
-  label: string
-  tone: KbxStatusTone
-  icon?: string
-}
-
-export interface KbxStatusCatalog {
-  [categoryKey: string]: KbxStatusDefinition[]
-}
diff --git a/frontend/src/shared/@kbx/contracts/ui.ts b/frontend/src/shared/@kbx/contracts/ui.ts
deleted file mode 100644
index 041c93eb..00000000
--- a/frontend/src/shared/@kbx/contracts/ui.ts
+++ /dev/null
@@ -1,56 +0,0 @@
-/**
- * UI State & Presentation Contracts — v60
- */
-
-export type KbxFieldState = 'default' | 'changed' | 'warning' | 'ai-suggested'
-
-export type KbxAsyncState = 'idle' | 'ready' | 'loading' | 'empty' | 'error'
-
-export interface KbxAsyncStateDefinition {
-  state: KbxAsyncState
-  title?: string
-  detail?: string
-  actionLabel?: string
-}
-
-export interface KbxSummaryItem {
-  key: string
-  label: string
-  value: string | number
-  emphasis?: boolean
-}
-
-export interface KbxQuickFilterItem {
-  key: string
-  label: string
-  count: number
-  active?: boolean
-  tone?: 'default' | 'warning' | 'danger'
-}
-
-export type KbxShortcutScope = 'application' | 'page' | 'grid' | 'dialog' | 'editor'
-
-export interface KbxShortcutDefinition {
-  key: string
-  scope: KbxShortcutScope
-  priority?: number
-  enabled?: () => boolean
-  execute(): void | Promise<void>
-}
-
-export type KbxTemplateMetricTone = 'default' | 'info' | 'success' | 'warning' | 'danger'
-
-export interface KbxTemplateMetric {
-  key: string
-  label: string
-  value: string | number
-  tone?: KbxTemplateMetricTone
-  emphasis?: boolean
-}
-
-export interface KbxTemplateContext {
-  label?: string
-  hint?: string
-  updatedAt?: string
-  metrics?: KbxTemplateMetric[]
-}
diff --git a/frontend/src/shared/@kbx/contracts/workflow.ts b/frontend/src/shared/@kbx/contracts/workflow.ts
deleted file mode 100644
index 44606809..00000000
--- a/frontend/src/shared/@kbx/contracts/workflow.ts
+++ /dev/null
@@ -1,38 +0,0 @@
-/**
- * Workflow Definition Contracts — v60
- * Record lifecycle, state transitions, approvals
- */
-
-export type KbxRecordState = 'draft' | 'submitted' | 'approved' | 'rejected' | 'completed' | 'cancelled'
-
-export interface KbxWorkflowTransition {
-  from: KbxRecordState
-  to: KbxRecordState
-  label: string
-  requiredPermission?: string
-  requiresReason?: boolean
-}
-
-export interface KbxWorkflowDefinition {
-  states: KbxRecordState[]
-  transitions: KbxWorkflowTransition[]
-  initialState: KbxRecordState
-  terminalStates: KbxRecordState[]
-}
-
-export interface KbxAuditEntry {
-  timestamp: string
-  actor: string
-  action: string
-  changes?: Record<string, [unknown, unknown]>
-  reason?: string
-  correlationId?: string
-}
-
-export interface KbxConflictSnapshot {
-  version: number
-  currentVersion: number
-  reason: 'concurrent-edit' | 'external-change'
-  lastModifiedAt: string
-  lastModifiedBy: string
-}
diff --git a/frontend/src/shared/@kbx/index.ts b/frontend/src/shared/@kbx/index.ts
deleted file mode 100644
index d2d1cc3d..00000000
--- a/frontend/src/shared/@kbx/index.ts
+++ /dev/null
@@ -1,27 +0,0 @@
-/**
- * @kbx — KBX Foundation v60
- * Complete integration of contracts, components, registries, and composables
- *
- * v52 Screen Anatomy: Operational Navigation & Screen Hardening
- * - Standardized screen templates (T01-T09)
- * - Contract-driven design
- * - Module identity + visual clarity
- */
-
-// Core Contracts
-export * from './contracts'
-
-// UI Components & Templates (Phase 1 + 2)
-export * from './ui'
-
-// Registry System (Screen, Permission, Help)
-export * from './registry'
-
-// Composables (Validation, Dirty State, Permission)
-export * from './composables'
-
-// Installation
-export * from './installKbx'
-
-// Design Tokens
-import './tokens.css'
diff --git a/frontend/src/shared/@kbx/installKbx.ts b/frontend/src/shared/@kbx/installKbx.ts
deleted file mode 100644
index 46fb480d..00000000
--- a/frontend/src/shared/@kbx/installKbx.ts
+++ /dev/null
@@ -1,154 +0,0 @@
-/**
- * @kbx Installation — v60
- * Initialize KBX system in Vue app
- */
-
-import type { App } from 'vue'
-import type { KbxScreenDefinition, KbxPermissionDefinition, KbxHelpDefinition } from './contracts'
-import { screenRegistry } from './registry/screenRegistry'
-import { permissionRegistry } from './registry/permissionRegistry'
-import { helpRegistry } from './registry/helpRegistry'
-import { getGlobalPermissions } from './composables/useKbxPermission'
-
-export interface KbxInstallOptions {
-  /**
-   * Initial screen definitions to register
-   */
-  screens?: KbxScreenDefinition[]
-
-  /**
-   * Initial permission definitions to register
-   */
-  permissions?: KbxPermissionDefinition[]
-
-  /**
-   * Initial help definitions to register
-   */
-  help?: KbxHelpDefinition[]
-
-  /**
-   * User's initial permissions
-   */
-  userPermissions?: string[]
-
-  /**
-   * Default density (compact, comfortable, touch)
-   */
-  density?: 'compact' | 'comfortable' | 'touch'
-
-  /**
-   * Theme (light, dark, auto)
-   */
-  theme?: 'light' | 'dark' | 'auto'
-}
-
-/**
- * Install KBX system into Vue app
- */
-export function installKbx(app: App, options: KbxInstallOptions = {}) {
-  // Register screens
-  if (options.screens) {
-    screenRegistry.registerMany(options.screens)
-  }
-
-  // Register permissions
-  if (options.permissions) {
-    permissionRegistry.registerMany(options.permissions)
-  }
-
-  // Register help
-  if (options.help) {
-    helpRegistry.registerMany(options.help)
-  }
-
-  // Set user permissions
-  if (options.userPermissions) {
-    getGlobalPermissions().setPermissions(options.userPermissions)
-  }
-
-  // Set density
-  if (options.density) {
-    setDensity(options.density)
-  }
-
-  // Set theme
-  if (options.theme && options.theme !== 'auto') {
-    setTheme(options.theme)
-  }
-
-  // Import design tokens
-  import('./tokens.css')
-
-  // Provide registries to components
-  app.provide('kbx-screens', screenRegistry)
-  app.provide('kbx-permissions', permissionRegistry)
-  app.provide('kbx-help', helpRegistry)
-
-  // Global properties
-  app.config.globalProperties.$kbx = {
-    screenRegistry,
-    permissionRegistry,
-    helpRegistry,
-    permissions: getGlobalPermissions(),
-  }
-}
-
-/**
- * Set density (compact, comfortable, touch)
- */
-export function setDensity(density: 'compact' | 'comfortable' | 'touch'): void {
-  document.documentElement.setAttribute('data-density', density)
-}
-
-/**
- * Get current density
- */
-export function getDensity(): 'compact' | 'comfortable' | 'touch' {
-  const density = document.documentElement.getAttribute('data-density')
-  return (density as any) || 'compact'
-}
-
-/**
- * Set theme (light, dark)
- */
-export function setTheme(theme: 'light' | 'dark'): void {
-  document.documentElement.setAttribute('data-theme', theme)
-}
-
-/**
- * Get current theme
- */
-export function getTheme(): 'light' | 'dark' | 'auto' {
-  const theme = document.documentElement.getAttribute('data-theme')
-  if (theme === 'light' || theme === 'dark') {
-    return theme
-  }
-  return 'auto'
-}
-
-/**
- * Toggle theme
- */
-export function toggleTheme(): void {
-  const current = getTheme()
-  if (current === 'light') {
-    setTheme('dark')
-  } else if (current === 'dark') {
-    document.documentElement.removeAttribute('data-theme')
-  } else {
-    // Auto -> light
-    setTheme('light')
-  }
-}
-
-/**
- * Check if dark mode is active
- */
-export function isDarkMode(): boolean {
-  const theme = getTheme()
-  if (theme !== 'auto') {
-    return theme === 'dark'
-  }
-  // Check system preference
-  return window.matchMedia('(prefers-color-scheme: dark)').matches
-}
diff --git a/frontend/src/shared/@kbx/registry/helpRegistry.ts b/frontend/src/shared/@kbx/registry/helpRegistry.ts
deleted file mode 100644
index 26956c38..00000000
--- a/frontend/src/shared/@kbx/registry/helpRegistry.ts
+++ /dev/null
@@ -1,68 +0,0 @@
-/**
- * KBX Help Registry — v60
- * Central management of help content (contextual help system)
- */
-
-import type { KbxHelpContent, KbxHelpDefinition } from '../contracts'
-
-class HelpRegistry {
-  private helpByScreenId = new Map<string, KbxHelpContent>()
-
-  /**
-   * Register help content for a screen
-   */
-  register(definition: KbxHelpDefinition): void {
-    this.helpByScreenId.set(definition.screenId, definition.content)
-  }
-
-  /**
-   * Register multiple help definitions
-   */
-  registerMany(definitions: KbxHelpDefinition[]): void {
-    definitions.forEach(def => this.register(def))
-  }
-
-  /**
-   * Get help content by screen ID
-   */
-  getHelp(screenId: string): KbxHelpContent | undefined {
-    return this.helpByScreenId.get(screenId)
-  }
-
-  /**
-   * Get all help content
-   */
-  getAllHelp(): KbxHelpContent[] {
-    return Array.from(this.helpByScreenId.values())
-  }
-
-  /**
-   * Check if help exists for screen
-   */
-  hasHelp(screenId: string): boolean {
-    return this.helpByScreenId.has(screenId)
-  }
-
-  /**
-   * Clear all help
-   */
-  clear(): void {
-    this.helpByScreenId.clear()
-  }
-}
-
-/**
- * Global registry instance
- */
-export const helpRegistry = new HelpRegistry()
-
-/**
- * Composable for Vue components
- */
-export function useHelpRegistry() {
-  return {
-    getHelp: (screenId: string) => helpRegistry.getHelp(screenId),
-    getAllHelp: () => helpRegistry.getAllHelp(),
-    hasHelp: (screenId: string) => helpRegistry.hasHelp(screenId),
-  }
-}
diff --git a/frontend/src/shared/@kbx/registry/index.ts b/frontend/src/shared/@kbx/registry/index.ts
deleted file mode 100644
index 35c80a53..00000000
--- a/frontend/src/shared/@kbx/registry/index.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-/**
- * @kbx Registry System — v60
- * Central registries for screens, permissions, help
- */
-
-export * from './screenRegistry'
-export * from './permissionRegistry'
-export * from './helpRegistry'
diff --git a/frontend/src/shared/@kbx/registry/permissionRegistry.ts b/frontend/src/shared/@kbx/registry/permissionRegistry.ts
deleted file mode 100644
index 3fbbe95e..00000000
--- a/frontend/src/shared/@kbx/registry/permissionRegistry.ts
+++ /dev/null
@@ -1,85 +0,0 @@
-/**
- * KBX Permission Registry — v60
- * Central management of permissions
- */
-
-import type { KbxPermissionDefinition } from '../contracts'
-
-class PermissionRegistry {
-  private permissions = new Map<string, KbxPermissionDefinition>()
-  private permissionsByCategory = new Map<string, KbxPermissionDefinition[]>()
-
-  /**
-   * Register a permission
-   */
-  register(permission: KbxPermissionDefinition): void {
-    this.permissions.set(permission.id, permission)
-
-    // Index by category
-    if (!this.permissionsByCategory.has(permission.category)) {
-      this.permissionsByCategory.set(permission.category, [])
-    }
-    this.permissionsByCategory.get(permission.category)!.push(permission)
-  }
-
-  /**
-   * Register multiple permissions
-   */
-  registerMany(permissions: KbxPermissionDefinition[]): void {
-    permissions.forEach(perm => this.register(perm))
-  }
-
-  /**
-   * Get permission by ID
-   */
-  getPermission(id: string): KbxPermissionDefinition | undefined {
-    return this.permissions.get(id)
-  }
-
-  /**
-   * Get all permissions
-   */
-  getAllPermissions(): KbxPermissionDefinition[] {
-    return Array.from(this.permissions.values())
-  }
-
-  /**
-   * Get permissions by category
-   */
-  getPermissionsByCategory(category: string): KbxPermissionDefinition[] {
-    return this.permissionsByCategory.get(category) ?? []
-  }
-
-  /**
-   * Check if permission exists
-   */
-  hasPermission(id: string): boolean {
-    return this.permissions.has(id)
-  }
-
-  /**
-   * Clear all permissions
-   */
-  clear(): void {
-    this.permissions.clear()
-    this.permissionsByCategory.clear()
-  }
-}
-
-/**
- * Global registry instance
- */
-export const permissionRegistry = new PermissionRegistry()
-
-/**
- * Composable for Vue components
- */
-export function usePermissionRegistry() {
-  return {
-    getPermission: (id: string) => permissionRegistry.getPermission(id),
-    getAllPermissions: () => permissionRegistry.getAllPermissions(),
-    getPermissionsByCategory: (category: string) =>
-      permissionRegistry.getPermissionsByCategory(category),
-    hasPermission: (id: string) => permissionRegistry.hasPermission(id),
-  }
-}
diff --git a/frontend/src/shared/@kbx/registry/screenRegistry.ts b/frontend/src/shared/@kbx/registry/screenRegistry.ts
deleted file mode 100644
index 967e9cca..00000000
--- a/frontend/src/shared/@kbx/registry/screenRegistry.ts
+++ /dev/null
@@ -1,132 +0,0 @@
-/**
- * KBX Screen Registry — v60
- * Central management of screen definitions for routing, permissions, help
- */
-
-import type { KbxScreenDefinition, KbxScreenType, KbxScreenTemplateCode } from '../contracts'
-
-export interface ScreenRegistryEntry {
-  screen: KbxScreenDefinition
-  templateCode: KbxScreenTemplateCode
-  module: 'OMS' | 'ERP' | 'WMS' | 'COMMON'
-}
-
-class ScreenRegistry {
-  private screens = new Map<string, ScreenRegistryEntry>()
-  private screensByModule = new Map<string, ScreenRegistryEntry[]>()
-  private screensByTemplate = new Map<KbxScreenTemplateCode, ScreenRegistryEntry[]>()
-
-  /**
-   * Register a screen definition
-   */
-  register(screen: KbxScreenDefinition): void {
-    const entry: ScreenRegistryEntry = {
-      screen,
-      templateCode: screen.templateCode,
-      module: screen.module,
-    }
-
-    // Store by ID
-    this.screens.set(screen.id, entry)
-
-    // Index by module
-    if (!this.screensByModule.has(screen.module)) {
-      this.screensByModule.set(screen.module, [])
-    }
-    this.screensByModule.get(screen.module)!.push(entry)
-
-    // Index by template
-    if (!this.screensByTemplate.has(screen.templateCode)) {
-      this.screensByTemplate.set(screen.templateCode, [])
-    }
-    this.screensByTemplate.get(screen.templateCode)!.push(entry)
-  }
-
-  /**
-   * Register multiple screens
-   */
-  registerMany(screens: KbxScreenDefinition[]): void {
-    screens.forEach(screen => this.register(screen))
-  }
-
-  /**
-   * Get screen by ID
-   */
-  getScreen(id: string): ScreenRegistryEntry | undefined {
-    return this.screens.get(id)
-  }
-
-  /**
-   * Get all screens
-   */
-  getAllScreens(): ScreenRegistryEntry[] {
-    return Array.from(this.screens.values())
-  }
-
-  /**
-   * Get screens by module
-   */
-  getScreensByModule(module: 'OMS' | 'ERP' | 'WMS' | 'COMMON'): ScreenRegistryEntry[] {
-    return this.screensByModule.get(module) ?? []
-  }
-
-  /**
-   * Get screens by template code
-   */
-  getScreensByTemplate(templateCode: KbxScreenTemplateCode): ScreenRegistryEntry[] {
-    return this.screensByTemplate.get(templateCode) ?? []
-  }
-
-  /**
-   * Get screens by type
-   */
-  getScreensByType(type: KbxScreenType): ScreenRegistryEntry[] {
-    return this.getAllScreens().filter(entry => entry.screen.type === type)
-  }
-
-  /**
-   * Check if screen exists
-   */
-  hasScreen(id: string): boolean {
-    return this.screens.has(id)
-  }
-
-  /**
-   * Get screen count by module
-   */
-  getCountByModule(module: 'OMS' | 'ERP' | 'WMS' | 'COMMON'): number {
-    return this.getScreensByModule(module).length
-  }
-
-  /**
-   * Clear all screens
-   */
-  clear(): void {
-    this.screens.clear()
-    this.screensByModule.clear()
-    this.screensByTemplate.clear()
-  }
-}
-
-/**
- * Global registry instance
- */
-export const screenRegistry = new ScreenRegistry()
-
-/**
- * Composable for Vue components
- */
-export function useScreenRegistry() {
-  return {
-    getScreen: (id: string) => screenRegistry.getScreen(id),
-    getAllScreens: () => screenRegistry.getAllScreens(),
-    getScreensByModule: (module: 'OMS' | 'ERP' | 'WMS' | 'COMMON') =>
-      screenRegistry.getScreensByModule(module),
-    getScreensByTemplate: (templateCode: KbxScreenTemplateCode) =>
-      screenRegistry.getScreensByTemplate(templateCode),
-    getScreensByType: (type: KbxScreenType) => screenRegistry.getScreensByType(type),
-    hasScreen: (id: string) => screenRegistry.hasScreen(id),
-    getCountByModule: (module: 'OMS' | 'ERP' | 'WMS' | 'COMMON') =>
-      screenRegistry.getCountByModule(module),
-  }
-}
diff --git a/frontend/src/shared/@kbx/tokens.css b/frontend/src/shared/@kbx/tokens.css
deleted file mode 100644
index bc783b72..00000000
--- a/frontend/src/shared/@kbx/tokens.css
+++ /dev/null
@@ -1,192 +0,0 @@
-/**
- * @kbx Design Tokens — v60
- * Color, spacing, typography, density
- */
-
-:root {
-  /* Colors */
-  --kbx-color-primary: #3b82f6;
-  --kbx-color-success: #10b981;
-  --kbx-color-warning: #f59e0b;
-  --kbx-color-danger: #ef4444;
-  --kbx-color-info: #06b6d4;
-
-  /* Base Colors */
-  --kbx-color-surface: #ffffff;
-  --kbx-color-background: #f9fafb;
-  --kbx-color-border: #e5e7eb;
-  --kbx-color-text: #000000;
-  --kbx-color-text-muted: #6b7280;
-  --kbx-color-section-heading: #f9fafb;
-
-  /* Module Colors */
-  --kbx-color-module-accent: #3b82f6;
-  --kbx-module-oms: #3b82f6;
-  --kbx-module-erp: #a78bfa;
-  --kbx-module-wms: #14b8a6;
-  --kbx-module-common: #6b7280;
-
-  /* Light Tones (for backgrounds) */
-  --kbx-color-danger-light: #fee2e2;
-  --kbx-color-warning-light: #fef3c7;
-  --kbx-color-success-light: #dcfce7;
-  --kbx-color-info-light: #cffafe;
-
-  /* Spacing */
-  --kbx-space-1: 4px;
-  --kbx-space-2: 8px;
-  --kbx-space-3: 12px;
-  --kbx-space-4: 16px;
-  --kbx-space-5: 20px;
-  --kbx-space-6: 24px;
-
-  /* Typography */
-  --kbx-font-family: system-ui, -apple-system, sans-serif;
-  --kbx-font-xs: 12px;
-  --kbx-font-sm: 13px;
-  --kbx-font-base: 14px;
-  --kbx-font-lg: 16px;
-  --kbx-font-xl: 18px;
-  --kbx-font-2xl: 20px;
-
-  /* Line Heights */
-  --kbx-line-height-tight: 1.4;
-  --kbx-line-height-normal: 1.5;
-  --kbx-line-height-relaxed: 1.6;
-
-  /* Component Heights (compact density) */
-  --kbx-control-xs: 28px;
-  --kbx-control-sm: 32px;
-  --kbx-control-md: 36px;
-  --kbx-control-lg: 44px;
-
-  /* Grid Row Height */
-  --kbx-grid-row-height: 34px;
-  --kbx-grid-header-height: 36px;
-
-  /* Master/Detail Grid */
-  --kbx-master-list-min-width: 280px;
-  --kbx-master-list-compact-width: 32%;
-
-  /* Borders */
-  --kbx-border-width: 1px;
-  --kbx-border-radius: 4px;
-
-  /* Shadows */
-  --kbx-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
-  --kbx-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
-  --kbx-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
-  --kbx-shadow-shell: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
-
-  /* Transitions */
-  --kbx-transition-fast: 0.15s ease;
-  --kbx-transition-base: 0.2s ease;
-  --kbx-transition-slow: 0.3s ease;
-
-  /* Density: compact (default) */
-  --kbx-density: compact;
-  --kbx-input-height: 34px;
-  --kbx-input-padding: 8px 12px;
-  --kbx-touch-target: 44px;
-  --kbx-font-size: 14px;
-}
-
-/* Comfortable Density */
-:root[data-density="comfortable"] {
-  --kbx-input-height: 36px;
-  --kbx-input-padding: 10px 12px;
-  --kbx-control-md: 40px;
-  --kbx-grid-row-height: 36px;
-  --kbx-touch-target: 48px;
-  --kbx-font-size: 14px;
-}
-
-/* Touch Density (WMS/Mobile) */
-:root[data-density="touch"] {
-  --kbx-input-height: 48px;
-  --kbx-input-padding: 12px 16px;
-  --kbx-control-md: 52px;
-  --kbx-grid-row-height: 48px;
-  --kbx-touch-target: 52px;
-  --kbx-font-size: 16px;
-}
-
-/* Dark Mode */
-@media (prefers-color-scheme: dark) {
-  :root {
-    --kbx-color-surface: #1f2937;
-    --kbx-color-background: #111827;
-    --kbx-color-border: #374151;
-    --kbx-color-text: #f9fafb;
-    --kbx-color-text-muted: #d1d5db;
-    --kbx-color-section-heading: #111827;
-
-    --kbx-color-danger-light: #7f1d1d;
-    --kbx-color-warning-light: #92400e;
-    --kbx-color-success-light: #15803d;
-    --kbx-color-info-light: #0c4a6e;
-  }
-}
-
-/* Explicit Dark Theme Override */
-:root[data-theme="dark"] {
-  --kbx-color-surface: #1f2937;
-  --kbx-color-background: #111827;
-  --kbx-color-border: #374151;
-  --kbx-color-text: #f9fafb;
-  --kbx-color-text-muted: #d1d5db;
-  --kbx-color-section-heading: #111827;
-
-  --kbx-color-danger-light: #7f1d1d;
-  --kbx-color-warning-light: #92400e;
-  --kbx-color-success-light: #15803d;
-  --kbx-color-info-light: #0c4a6e;
-}
-
-/* Light Theme Override */
-:root[data-theme="light"] {
-  --kbx-color-surface: #ffffff;
-  --kbx-color-background: #f9fafb;
-  --kbx-color-border: #e5e7eb;
-  --kbx-color-text: #000000;
-  --kbx-color-text-muted: #6b7280;
-  --kbx-color-section-heading: #f9fafb;
-
-  --kbx-color-danger-light: #fee2e2;
-  --kbx-color-warning-light: #fef3c7;
-  --kbx-color-success-light: #dcfce7;
-  --kbx-color-info-light: #cffafe;
-}
-
-/* Global Base Styles */
-* {
-  box-sizing: border-box;
-}
-
-body {
-  font-family: var(--kbx-font-family);
-  font-size: var(--kbx-font-size);
-  line-height: var(--kbx-line-height-normal);
-  color: var(--kbx-color-text);
-  background: var(--kbx-color-background);
-  transition: color var(--kbx-transition-fast), background var(--kbx-transition-fast);
-}
-
-/* Focus Visible (Accessibility) */
-:focus-visible {
-  outline: 2px solid var(--kbx-color-primary);
-  outline-offset: 2px;
-}
-
-/* Forced Colors Mode (High Contrast) */
-@media (forced-colors: active) {
-  :root {
-    --kbx-color-primary: CanvasText;
-    --kbx-color-text: CanvasText;
-    --kbx-color-border: CanvasText;
-  }
-
-  button {
-    border: 1px solid CanvasText;
-  }
-}
diff --git a/frontend/src/shared/@kbx/ui/components/KbxButton.vue b/frontend/src/shared/@kbx/ui/components/KbxButton.vue
deleted file mode 100644
index 716e01f8..00000000
--- a/frontend/src/shared/@kbx/ui/components/KbxButton.vue
+++ /dev/null
@@ -1,175 +0,0 @@
-<script setup lang="ts">
-/**
- * KBX Button Component — v60
- * Flexible button with variants and states
- */
-
-type KbxButtonVariant = 'primary' | 'secondary' | 'danger' | 'ghost'
-type KbxButtonSize = 'sm' | 'md' | 'lg'
-
-withDefaults(
-  defineProps<{
-    label?: string
-    variant?: KbxButtonVariant
-    size?: KbxButtonSize
-    disabled?: boolean
-    loading?: boolean
-    type?: 'button' | 'submit' | 'reset'
-    icon?: string
-  }>(),
-  {
-    variant: 'secondary',
-    size: 'md',
-    type: 'button',
-    disabled: false,
-    loading: false,
-  }
-)
-
-defineEmits<{
-  click: []
-}>()
-</script>
-
-<template>
-  <button
-    :type="type"
-    :disabled="disabled || loading"
-    :class="[
-      'kbx-button',
-      `kbx-button--${variant}`,
-      `kbx-button--${size}`,
-      { 'is-loading': loading, 'is-disabled': disabled },
-    ]"
-    @click="$emit('click')"
-  >
-    <span v-if="loading" class="kbx-button__spinner" />
-    <span v-if="icon" class="kbx-button__icon">{{ icon }}</span>
-    <span v-if="label || $slots.default">
-      <slot>{{ label }}</slot>
-    </span>
-  </button>
-</template>
-
-<style scoped>
-.kbx-button {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: 6px;
-  padding: 8px 16px;
-  border: none;
-  border-radius: 4px;
-  font-size: 14px;
-  font-weight: 500;
-  cursor: pointer;
-  transition: all 0.2s ease;
-  white-space: nowrap;
-}
-
-/* Variants */
-.kbx-button--primary {
-  background: var(--kbx-color-primary, #3b82f6);
-  color: white;
-}
-
-.kbx-button--primary:hover:not(:disabled) {
-  background: #2563eb;
-}
-
-.kbx-button--secondary {
-  background: var(--kbx-color-surface, #f9fafb);
-  color: var(--kbx-color-text, #000);
-  border: 1px solid var(--kbx-color-border, #e5e7eb);
-}
-
-.kbx-button--secondary:hover:not(:disabled) {
-  background: var(--kbx-color-border, #e5e7eb);
-}
-
-.kbx-button--danger {
-  background: var(--kbx-color-danger, #ef4444);
-  color: white;
-}
-
-.kbx-button--danger:hover:not(:disabled) {
-  background: #dc2626;
-}
-
-.kbx-button--ghost {
-  background: transparent;
-  color: var(--kbx-color-text, #000);
-}
-
-.kbx-button--ghost:hover:not(:disabled) {
-  background: var(--kbx-color-surface, #f9fafb);
-}
-
-/* Sizes */
-.kbx-button--sm {
-  padding: 4px 12px;
-  font-size: 12px;
-}
-
-.kbx-button--lg {
-  padding: 12px 24px;
-  font-size: 16px;
-}
-
-/* States */
-.kbx-button:disabled,
-.kbx-button.is-disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-
-.kbx-button.is-loading {
-  pointer-events: none;
-}
-
-.kbx-button__spinner {
-  display: inline-block;
-  width: 14px;
-  height: 14px;
-  border: 2px solid rgba(255, 255, 255, 0.3);
-  border-top-color: white;
-  border-radius: 50%;
-  animation: spin 0.8s linear infinite;
-}
-
-.kbx-button--secondary .kbx-button__spinner,
-.kbx-button--ghost .kbx-button__spinner {
-  border-color: rgba(0, 0, 0, 0.2);
-  border-top-color: var(--kbx-color-text, #000);
-}
-
-@keyframes spin {
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-.kbx-button__icon {
-  font-size: 1em;
-}
-
-@media (prefers-color-scheme: dark) {
-  .kbx-button--secondary {
-    background: #374151;
-    color: #f9fafb;
-    border-color: #4b5563;
-  }
-
-  .kbx-button--secondary:hover:not(:disabled) {
-    background: #4b5563;
-  }
-
-  .kbx-button--ghost {
-    color: #f9fafb;
-  }
-
-  .kbx-button--ghost:hover:not(:disabled) {
-    background: #374151;
-  }
-}
-</style>
diff --git a/frontend/src/shared/@kbx/ui/components/KbxCheckbox.vue b/frontend/src/shared/@kbx/ui/components/KbxCheckbox.vue
deleted file mode 100644
index fc5a7a1a..00000000
--- a/frontend/src/shared/@kbx/ui/components/KbxCheckbox.vue
+++ /dev/null
@@ -1,113 +0,0 @@
-<script setup lang="ts">
-/**
- * KBX Checkbox Component — v60
- */
-
-withDefaults(
-  defineProps<{
-    modelValue: boolean
-    label?: string
-    disabled?: boolean
-    error?: string
-  }>(),
-  {
-    modelValue: false,
-  }
-)
-
-defineEmits<{
-  'update:modelValue': [value: boolean]
-  change: []
-}>()
-</script>
-
-<template>
-  <div class="kbx-checkbox-wrapper">
-    <label class="kbx-checkbox">
-      <input
-        :checked="modelValue"
-        type="checkbox"
-        :disabled="disabled"
-        class="kbx-checkbox__input"
-        @change="$emit('update:modelValue', ($event.target as HTMLInputElement).checked); $emit('change')"
-      />
-      <span class="kbx-checkbox__box" />
-      <span v-if="label" class="kbx-checkbox__label">{{ label }}</span>
-    </label>
-    <div v-if="error" class="kbx-checkbox__error">{{ error }}</div>
-  </div>
-</template>
-
-<style scoped>
-.kbx-checkbox-wrapper {
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-}
-
-.kbx-checkbox {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  cursor: pointer;
-  user-select: none;
-}
-
-.kbx-checkbox__input {
-  position: absolute;
-  opacity: 0;
-  cursor: pointer;
-}
-
-.kbx-checkbox__box {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 20px;
-  height: 20px;
-  border: 1px solid var(--kbx-color-border, #e5e7eb);
-  border-radius: 3px;
-  background: var(--kbx-color-surface, #fff);
-  transition: all 0.2s ease;
-  flex-shrink: 0;
-}
-
-.kbx-checkbox__input:checked ~ .kbx-checkbox__box {
-  background: var(--kbx-color-primary, #3b82f6);
-  border-color: var(--kbx-color-primary, #3b82f6);
-}
-
-.kbx-checkbox__input:checked ~ .kbx-checkbox__box::after {
-  content: '✓';
-  color: white;
-  font-size: 14px;
-  font-weight: bold;
-}
-
-.kbx-checkbox__input:disabled ~ .kbx-checkbox__box {
-  background: var(--kbx-color-border, #e5e7eb);
-  cursor: not-allowed;
-  opacity: 0.6;
-}
-
-.kbx-checkbox__label {
-  font-size: 14px;
-  color: var(--kbx-color-text, #000);
-}
-
-.kbx-checkbox__error {
-  font-size: 12px;
-  color: var(--kbx-color-danger, #ef4444);
-}
-
-@media (prefers-color-scheme: dark) {
-  .kbx-checkbox__box {
-    background: #1f2937;
-    border-color: #374151;
-  }
-
-  .kbx-checkbox__label {
-    color: #f9fafb;
-  }
-}
-</style>
diff --git a/frontend/src/shared/@kbx/ui/components/KbxDataGrid.vue b/frontend/src/shared/@kbx/ui/components/KbxDataGrid.vue
deleted file mode 100644
index a9d49a56..00000000
--- a/frontend/src/shared/@kbx/ui/components/KbxDataGrid.vue
+++ /dev/null
@@ -1,144 +0,0 @@
-<script setup lang="ts">
-/**
- * KBX Data Grid Component — v60 simplified
- * Wrapper for displaying tabular data
- *
- * v52: Server-side data source pattern
- */
-import type { KbxGridColumnDefinition } from '../contracts'
-
-export interface KbxGridRow {
-  [key: string]: any
-}
-
-withDefaults(
-  defineProps<{
-    columns: KbxGridColumnDefinition[]
-    rows: KbxGridRow[]
-    loading?: boolean
-    empty?: boolean
-    selectedRows?: (string | number)[]
-  }>(),
-  {
-    loading: false,
-    empty: false,
-    selectedRows: () => [],
-  }
-)
-
-defineEmits<{
-  'row-click': [row: KbxGridRow]
-  'row-select': [rows: KbxGridRow[]]
-}>()
-</script>
-
-<template>
-  <div class="kbx-data-grid">
-    <div v-if="loading" class="kbx-data-grid__loading">데이터를 불러오는 중...</div>
-    <div v-else-if="!rows.length && empty" class="kbx-data-grid__empty">
-      데이터가 없습니다.
-    </div>
-    <table v-else class="kbx-data-grid__table">
-      <thead>
-        <tr>
-          <th v-for="col in columns" :key="col.field" :style="{ width: col.width }">
-            {{ col.header }}
-          </th>
-        </tr>
-      </thead>
-      <tbody>
-        <tr
-          v-for="(row, idx) in rows"
-          :key="idx"
-          class="kbx-data-grid__row"
-          @click="$emit('row-click', row)"
-        >
-          <td v-for="col in columns" :key="col.field">
-            {{ row[col.field] }}
-          </td>
-        </tr>
-      </tbody>
-    </table>
-  </div>
-</template>
-
-<style scoped>
-.kbx-data-grid {
-  border: 1px solid var(--kbx-color-border, #e5e7eb);
-  border-radius: 4px;
-  overflow: hidden;
-}
-
-.kbx-data-grid__loading,
-.kbx-data-grid__empty {
-  padding: 32px;
-  text-align: center;
-  color: var(--kbx-color-text-muted, #6b7280);
-  min-height: 200px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.kbx-data-grid__table {
-  width: 100%;
-  border-collapse: collapse;
-  background: var(--kbx-color-surface, #fff);
-}
-
-.kbx-data-grid__table thead {
-  background: var(--kbx-color-section-heading, #f9fafb);
-  border-bottom: 1px solid var(--kbx-color-border, #e5e7eb);
-}
-
-.kbx-data-grid__table th {
-  padding: 12px;
-  text-align: left;
-  font-size: 13px;
-  font-weight: 600;
-  color: var(--kbx-color-text, #000);
-}
-
-.kbx-data-grid__table td {
-  padding: 12px;
-  font-size: 13px;
-  border-bottom: 1px solid var(--kbx-color-border, #e5e7eb);
-  color: var(--kbx-color-text, #000);
-}
-
-.kbx-data-grid__row {
-  cursor: pointer;
-  transition: background 0.2s ease;
-}
-
-.kbx-data-grid__row:hover {
-  background: var(--kbx-color-border, #e5e7eb);
-}
-
-@media (prefers-color-scheme: dark) {
-  .kbx-data-grid {
-    border-color: #374151;
-  }
-
-  .kbx-data-grid__table {
-    background: #1f2937;
-  }
-
-  .kbx-data-grid__table thead {
-    background: #111827;
-  }
-
-  .kbx-data-grid__table th {
-    color: #f9fafb;
-  }
-
-  .kbx-data-grid__table td {
-    border-bottom-color: #374151;
-    color: #f9fafb;
-  }
-
-  .kbx-data-grid__row:hover {
-    background: #374151;
-  }
-}
-</style>
diff --git a/frontend/src/shared/@kbx/ui/components/KbxDateField.vue b/frontend/src/shared/@kbx/ui/components/KbxDateField.vue
deleted file mode 100644
index 3db25029..00000000
--- a/frontend/src/shared/@kbx/ui/components/KbxDateField.vue
+++ /dev/null
@@ -1,107 +0,0 @@
-<script setup lang="ts">
-/**
- * KBX Date Field Component — v60
- */
-
-withDefaults(
-  defineProps<{
-    modelValue: string
-    placeholder?: string
-    label?: string
-    error?: string
-    required?: boolean
-    readonly?: boolean
-    disabled?: boolean
-  }>(),
-  {
-    modelValue: '',
-    placeholder: 'YYYY-MM-DD',
-  }
-)
-
-defineEmits<{
-  'update:modelValue': [value: string]
-  blur: []
-}>()
-</script>
-
-<template>
-  <div class="kbx-date-wrapper">
-    <label v-if="label" class="kbx-date__label">
-      {{ label }}
-      <span v-if="required" class="kbx-date__required">*</span>
-    </label>
-    <input
-      :value="modelValue"
-      type="date"
-      :placeholder="placeholder"
-      :readonly="readonly"
-      :disabled="disabled"
-      :class="['kbx-date', { 'is-error': error }]"
-      @input="$emit('update:modelValue', ($event.target as HTMLInputElement).value)"
-      @blur="$emit('blur')"
-    />
-    <div v-if="error" class="kbx-date__error">{{ error }}</div>
-  </div>
-</template>
-
-<style scoped>
-.kbx-date-wrapper {
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-}
-
-.kbx-date__label {
-  font-size: 13px;
-  font-weight: 500;
-  color: var(--kbx-color-text, #000);
-}
-
-.kbx-date__required {
-  color: var(--kbx-color-danger, #ef4444);
-  margin-left: 2px;
-}
-
-.kbx-date {
-  padding: 8px 12px;
-  border: 1px solid var(--kbx-color-border, #e5e7eb);
-  border-radius: 4px;
-  font-size: 14px;
-  background: var(--kbx-color-surface, #fff);
-  color: var(--kbx-color-text, #000);
-  min-height: 34px;
-}
-
-.kbx-date:focus {
-  outline: none;
-  border-color: var(--kbx-color-primary, #3b82f6);
-  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
-}
-
-.kbx-date:disabled {
-  background: var(--kbx-color-border, #e5e7eb);
-  opacity: 0.6;
-}
-
-.kbx-date.is-error {
-  border-color: var(--kbx-color-danger, #ef4444);
-}
-
-.kbx-date__error {
-  font-size: 12px;
-  color: var(--kbx-color-danger, #ef4444);
-}
-
-@media (prefers-color-scheme: dark) {
-  .kbx-date__label {
-    color: #f9fafb;
-  }
-
-  .kbx-date {
-    background: #1f2937;
-    border-color: #374151;
-    color: #f9fafb;
-  }
-}
-</style>
diff --git a/frontend/src/shared/@kbx/ui/components/KbxDialog.vue b/frontend/src/shared/@kbx/ui/components/KbxDialog.vue
deleted file mode 100644
index 9f9cda43..00000000
--- a/frontend/src/shared/@kbx/ui/components/KbxDialog.vue
+++ /dev/null
@@ -1,171 +0,0 @@
-<script setup lang="ts">
-/**
- * KBX Dialog Component — v60 simplified
- * Modal dialog with title and actions
- */
-
-withDefaults(
-  defineProps<{
-    open: boolean
-    title?: string
-    size?: 'sm' | 'md' | 'lg'
-  }>(),
-  {
-    size: 'md',
-  }
-)
-
-defineEmits<{
-  'update:open': [open: boolean]
-  close: []
-}>()
-</script>
-
-<template>
-  <teleport v-if="open" to="body">
-    <div class="kbx-dialog__backdrop" @click="$emit('update:open', false); $emit('close')">
-      <div class="kbx-dialog" :class="`kbx-dialog--${size}`" @click.stop>
-        <header v-if="title" class="kbx-dialog__header">
-          <h2>{{ title }}</h2>
-          <button class="kbx-dialog__close" @click="$emit('update:open', false); $emit('close')">
-            ✕
-          </button>
-        </header>
-        <div class="kbx-dialog__content">
-          <slot />
-        </div>
-        <footer v-if="$slots.footer" class="kbx-dialog__footer">
-          <slot name="footer" />
-        </footer>
-      </div>
-    </div>
-  </teleport>
-</template>
-
-<style scoped>
-.kbx-dialog__backdrop {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background: rgba(0, 0, 0, 0.5);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  z-index: 1000;
-  animation: fadeIn 0.2s ease;
-}
-
-.kbx-dialog {
-  background: var(--kbx-color-surface, #fff);
-  border-radius: 6px;
-  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
-  display: flex;
-  flex-direction: column;
-  max-height: 90vh;
-  max-width: 90vw;
-  animation: slideUp 0.2s ease;
-}
-
-.kbx-dialog--sm {
-  width: 400px;
-}
-
-.kbx-dialog--md {
-  width: 600px;
-}
-
-.kbx-dialog--lg {
-  width: 800px;
-}
-
-.kbx-dialog__header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 16px 20px;
-  border-bottom: 1px solid var(--kbx-color-border, #e5e7eb);
-}
-
-.kbx-dialog__header h2 {
-  margin: 0;
-  font-size: 16px;
-  font-weight: 600;
-  color: var(--kbx-color-text, #000);
-}
-
-.kbx-dialog__close {
-  background: none;
-  border: none;
-  font-size: 20px;
-  cursor: pointer;
-  color: var(--kbx-color-text-muted, #6b7280);
-  padding: 0;
-  width: 24px;
-  height: 24px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.kbx-dialog__content {
-  padding: 20px;
-  flex: 1;
-  overflow-y: auto;
-}
-
-.kbx-dialog__footer {
-  padding: 16px 20px;
-  border-top: 1px solid var(--kbx-color-border, #e5e7eb);
-  display: flex;
-  gap: 8px;
-  justify-content: flex-end;
-}
-
-@keyframes fadeIn {
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
-}
-
-@keyframes slideUp {
-  from {
-    transform: translateY(20px);
-    opacity: 0;
-  }
-  to {
-    transform: translateY(0);
-    opacity: 1;
-  }
-}
-
-@media (prefers-color-scheme: dark) {
-  .kbx-dialog {
-    background: #1f2937;
-  }
-
-  .kbx-dialog__header {
-    border-bottom-color: #374151;
-  }
-
-  .kbx-dialog__header h2 {
-    color: #f9fafb;
-  }
-
-  .kbx-dialog__footer {
-    border-top-color: #374151;
-  }
-}
-
-@media (max-width: 600px) {
-  .kbx-dialog--sm,
-  .kbx-dialog--md,
-  .kbx-dialog--lg {
-    width: calc(100% - 32px);
-  }
-}
-</style>
diff --git a/frontend/src/shared/@kbx/ui/components/KbxDrawer.vue b/frontend/src/shared/@kbx/ui/components/KbxDrawer.vue
deleted file mode 100644
index d7fa2ba1..00000000
--- a/frontend/src/shared/@kbx/ui/components/KbxDrawer.vue
+++ /dev/null
@@ -1,163 +0,0 @@
-<script setup lang="ts">
-/**
- * KBX Drawer Component — v60 simplified
- * Side panel drawer
- */
-
-withDefaults(
-  defineProps<{
-    open: boolean
-    title?: string
-    position?: 'left' | 'right'
-  }>(),
-  {
-    position: 'right',
-  }
-)
-
-defineEmits<{
-  'update:open': [open: boolean]
-  close: []
-}>()
-</script>
-
-<template>
-  <teleport v-if="open" to="body">
-    <div class="kbx-drawer__backdrop" @click="$emit('update:open', false); $emit('close')">
-      <div
-        class="kbx-drawer"
-        :class="`kbx-drawer--${position}`"
-        @click.stop
-      >
-        <header v-if="title" class="kbx-drawer__header">
-          <h2>{{ title }}</h2>
-          <button class="kbx-drawer__close" @click="$emit('update:open', false); $emit('close')">
-            ✕
-          </button>
-        </header>
-        <div class="kbx-drawer__content">
-          <slot />
-        </div>
-        <footer v-if="$slots.footer" class="kbx-drawer__footer">
-          <slot name="footer" />
-        </footer>
-      </div>
-    </div>
-  </teleport>
-</template>
-
-<style scoped>
-.kbx-drawer__backdrop {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background: rgba(0, 0, 0, 0.5);
-  z-index: 999;
-  animation: fadeIn 0.2s ease;
-}
-
-.kbx-drawer {
-  position: fixed;
-  top: 0;
-  bottom: 0;
-  width: 400px;
-  background: var(--kbx-color-surface, #fff);
-  display: flex;
-  flex-direction: column;
-  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
-  animation: slideIn 0.3s ease;
-  z-index: 1000;
-}
-
-.kbx-drawer--right {
-  right: 0;
-  animation: slideInRight 0.3s ease;
-}
-
-.kbx-drawer--left {
-  left: 0;
-  animation: slideInLeft 0.3s ease;
-}
-
-.kbx-drawer__header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 16px 20px;
-  border-bottom: 1px solid var(--kbx-color-border, #e5e7eb);
-}
-
-.kbx-drawer__header h2 {
-  margin: 0;
-  font-size: 16px;
-  font-weight: 600;
-}
-
-.kbx-drawer__close {
-  background: none;
-  border: none;
-  font-size: 20px;
-  cursor: pointer;
-  padding: 0;
-}
-
-.kbx-drawer__content {
-  padding: 20px;
-  flex: 1;
-  overflow-y: auto;
-}
-
-.kbx-drawer__footer {
-  padding: 16px 20px;
-  border-top: 1px solid var(--kbx-color-border, #e5e7eb);
-}
-
-@keyframes fadeIn {
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
-}
-
-@keyframes slideInRight {
-  from {
-    transform: translateX(100%);
-  }
-  to {
-    transform: translateX(0);
-  }
-}
-
-@keyframes slideInLeft {
-  from {
-    transform: translateX(-100%);
-  }
-  to {
-    transform: translateX(0);
-  }
-}
-
-@media (prefers-color-scheme: dark) {
-  .kbx-drawer {
-    background: #1f2937;
-  }
-
-  .kbx-drawer__header {
-    border-bottom-color: #374151;
-  }
-
-  .kbx-drawer__footer {
-    border-top-color: #374151;
-  }
-}
-
-@media (max-width: 600px) {
-  .kbx-drawer {
-    width: calc(100% - 32px);
-  }
-}
-</style>
diff --git a/frontend/src/shared/@kbx/ui/components/KbxFormGrid.vue b/frontend/src/shared/@kbx/ui/components/KbxFormGrid.vue
deleted file mode 100644
index 11e8c472..00000000
--- a/frontend/src/shared/@kbx/ui/components/KbxFormGrid.vue
+++ /dev/null
@@ -1,35 +0,0 @@
-<script setup lang="ts">
-/**
- * KBX Form Grid — v60
- * Layout grid for form fields
- */
-
-withDefaults(
-  defineProps<{
-    columns?: 1 | 2 | 3
-    gap?: number
-  }>(),
-  {
-    columns: 1,
-    gap: 16,
-  }
-)
-</script>
-
-<template>
-  <div class="kbx-form-grid" :style="{ gridTemplateColumns: `repeat(${columns}, 1fr)`, gap: gap + 'px' }">
-    <slot />
-  </div>
-</template>
-
-<style scoped>
-.kbx-form-grid {
-  display: grid;
-}
-
-@media (max-width: 768px) {
-  .kbx-form-grid {
-    grid-template-columns: 1fr !important;
-  }
-}
-</style>
diff --git a/frontend/src/shared/@kbx/ui/components/KbxFormSection.vue b/frontend/src/shared/@kbx/ui/components/KbxFormSection.vue
deleted file mode 100644
index 2854212e..00000000
--- a/frontend/src/shared/@kbx/ui/components/KbxFormSection.vue
+++ /dev/null
@@ -1,64 +0,0 @@
-<script setup lang="ts">
-/**
- * KBX Form Section — v60
- * Group form fields with header
- */
-
-withDefaults(
-  defineProps<{
-    title?: string
-    description?: string
-  }>(),
-  {}
-)
-</script>
-
-<template>
-  <fieldset class="kbx-form-section">
-    <legend v-if="title" class="kbx-form-section__title">{{ title }}</legend>
-    <p v-if="description" class="kbx-form-section__description">{{ description }}</p>
-    <div class="kbx-form-section__content">
-      <slot />
-    </div>
-  </fieldset>
-</template>
-
-<style scoped>
-.kbx-form-section {
-  border: none;
-  margin: 0;
-  padding: 0;
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-}
-
-.kbx-form-section__title {
-  font-size: 14px;
-  font-weight: 600;
-  color: var(--kbx-color-text);
-  margin: 0;
-  padding: 0;
-  padding-top: 12px;
-  border-top: 1px solid var(--kbx-color-border);
-}
-
-.kbx-form-section__description {
-  font-size: 12px;
-  color: var(--kbx-color-text-muted);
-  margin: 0;
-}
-
-.kbx-form-section__content {
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-}
-
-@media (prefers-color-scheme: dark) {
-  .kbx-form-section__title {
-    color: #f9fafb;
-    border-top-color: #374151;
-  }
-}
-</style>
diff --git a/frontend/src/shared/@kbx/ui/components/KbxInput.vue b/frontend/src/shared/@kbx/ui/components/KbxInput.vue
deleted file mode 100644
index a9436fd8..00000000
--- a/frontend/src/shared/@kbx/ui/components/KbxInput.vue
+++ /dev/null
@@ -1,125 +0,0 @@
-<script setup lang="ts">
-/**
- * KBX Input Component — v60
- * Text input field with validation state
- */
-
-withDefaults(
-  defineProps<{
-    modelValue: string | number
-    placeholder?: string
-    label?: string
-    error?: string
-    required?: boolean
-    readonly?: boolean
-    disabled?: boolean
-    type?: string
-  }>(),
-  {
-    type: 'text',
-    modelValue: '',
-  }
-)
-
-defineEmits<{
-  'update:modelValue': [value: string]
-  blur: []
-  focus: []
-}>()
-</script>
-
-<template>
-  <div class="kbx-input-wrapper">
-    <label v-if="label" class="kbx-input__label">
-      {{ label }}
-      <span v-if="required" class="kbx-input__required">*</span>
-    </label>
-    <input
-      :value="modelValue"
-      :type="type"
-      :placeholder="placeholder"
-      :readonly="readonly"
-      :disabled="disabled"
-      :class="['kbx-input', { 'is-error': error }]"
-      @input="$emit('update:modelValue', ($event.target as HTMLInputElement).value)"
-      @blur="$emit('blur')"
-      @focus="$emit('focus')"
-    />
-    <div v-if="error" class="kbx-input__error">{{ error }}</div>
-  </div>
-</template>
-
-<style scoped>
-.kbx-input-wrapper {
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-}
-
-.kbx-input__label {
-  font-size: 13px;
-  font-weight: 500;
-  color: var(--kbx-color-text, #000);
-}
-
-.kbx-input__required {
-  color: var(--kbx-color-danger, #ef4444);
-  margin-left: 2px;
-}
-
-.kbx-input {
-  padding: 8px 12px;
-  border: 1px solid var(--kbx-color-border, #e5e7eb);
-  border-radius: 4px;
-  font-size: 14px;
-  background: var(--kbx-color-surface, #fff);
-  color: var(--kbx-color-text, #000);
-  transition: all 0.2s ease;
-  min-height: 34px;
-}
-
-.kbx-input:focus {
-  outline: none;
-  border-color: var(--kbx-color-primary, #3b82f6);
-  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
-}
-
-.kbx-input:disabled {
-  background: var(--kbx-color-border, #e5e7eb);
-  cursor: not-allowed;
-  opacity: 0.6;
-}
-
-.kbx-input.is-error {
-  border-color: var(--kbx-color-danger, #ef4444);
-}
-
-.kbx-input.is-error:focus {
-  box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.1);
-}
-
-.kbx-input__error {
-  font-size: 12px;
-  color: var(--kbx-color-danger, #ef4444);
-}
-
-@media (prefers-color-scheme: dark) {
-  .kbx-input__label {
-    color: #f9fafb;
-  }
-
-  .kbx-input {
-    background: #1f2937;
-    border-color: #374151;
-    color: #f9fafb;
-  }
-
-  .kbx-input:focus {
-    border-color: #60a5fa;
-  }
-
-  .kbx-input:disabled {
-    background: #374151;
-  }
-}
-</style>
diff --git a/frontend/src/shared/@kbx/ui/components/KbxLookup.vue b/frontend/src/shared/@kbx/ui/components/KbxLookup.vue
deleted file mode 100644
index 897d560c..00000000
--- a/frontend/src/shared/@kbx/ui/components/KbxLookup.vue
+++ /dev/null
@@ -1,265 +0,0 @@
-<script setup lang="ts">
-/**
- * KBX Lookup Component — v60 simplified
- * Search and select from a list of items (used in forms and grids)
- */
-import { ref, computed } from 'vue'
-
-export interface KbxLookupItem {
-  id: string | number
-  label: string
-  code?: string
-  disabled?: boolean
-}
-
-withDefaults(
-  defineProps<{
-    items: KbxLookupItem[]
-    label?: string
-    placeholder?: string
-    required?: boolean
-    loading?: boolean
-    error?: string
-    modelValue?: string | number
-  }>(),
-  {
-    placeholder: '검색...',
-    modelValue: '',
-  }
-)
-
-defineEmits<{
-  'update:modelValue': [id: string | number]
-  select: [item: KbxLookupItem]
-}>()
-
-const search = ref('')
-const open = ref(false)
-
-const props = defineProps<{
-  items: KbxLookupItem[]
-  label?: string
-  placeholder?: string
-  required?: boolean
-  loading?: boolean
-  error?: string
-  modelValue?: string | number
-}>()
-
-const filtered = computed(() => {
-  if (!search.value) return props.items
-  const q = search.value.toLowerCase()
-  return props.items.filter(
-    item => item.label.toLowerCase().includes(q) || item.code?.toLowerCase().includes(q)
-  )
-})
-
-const selectedItem = computed(() => props.items.find(item => item.id === props.modelValue))
-
-const selectItem = (item: KbxLookupItem) => {
-  emit('update:modelValue', item.id)
-  emit('select', item)
-  open.value = false
-  search.value = ''
-}
-
-const emit = defineEmits<{
-  'update:modelValue': [id: string | number]
-  select: [item: KbxLookupItem]
-}>()
-</script>
-
-<template>
-  <div class="kbx-lookup-wrapper">
-    <label v-if="label" class="kbx-lookup__label">
-      {{ label }}
-      <span v-if="required" class="kbx-lookup__required">*</span>
-    </label>
-    <div class="kbx-lookup__input-wrapper">
-      <input
-        v-model="search"
-        :placeholder="selectedItem ? selectedItem.label : placeholder"
-        :disabled="loading"
-        class="kbx-lookup__input"
-        @focus="open = true"
-        @input="open = true"
-      />
-      <span v-if="selectedItem" class="kbx-lookup__code">{{ selectedItem.code }}</span>
-    </div>
-
-    <div v-if="open" class="kbx-lookup__dropdown">
-      <div v-if="loading" class="kbx-lookup__loading">로드 중...</div>
-      <div v-else-if="!filtered.length" class="kbx-lookup__empty">
-        검색 결과가 없습니다.
-      </div>
-      <ul v-else class="kbx-lookup__list">
-        <li
-          v-for="item in filtered"
-          :key="item.id"
-          :class="['kbx-lookup__item', { 'is-disabled': item.disabled }]"
-          @click="!item.disabled && selectItem(item)"
-        >
-          <span class="kbx-lookup__item-label">{{ item.label }}</span>
-          <span v-if="item.code" class="kbx-lookup__item-code">{{ item.code }}</span>
-        </li>
-      </ul>
-    </div>
-
-    <div v-if="error" class="kbx-lookup__error">{{ error }}</div>
-  </div>
-</template>
-
-<style scoped>
-.kbx-lookup-wrapper {
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-}
-
-.kbx-lookup__label {
-  font-size: 13px;
-  font-weight: 500;
-  color: var(--kbx-color-text, #000);
-}
-
-.kbx-lookup__required {
-  color: var(--kbx-color-danger, #ef4444);
-  margin-left: 2px;
-}
-
-.kbx-lookup__input-wrapper {
-  position: relative;
-  display: flex;
-  align-items: center;
-  border: 1px solid var(--kbx-color-border, #e5e7eb);
-  border-radius: 4px;
-  background: var(--kbx-color-surface, #fff);
-  min-height: 34px;
-}
-
-.kbx-lookup__input {
-  flex: 1;
-  border: none;
-  padding: 8px 12px;
-  font-size: 14px;
-  background: transparent;
-  color: var(--kbx-color-text, #000);
-}
-
-.kbx-lookup__input:focus {
-  outline: none;
-}
-
-.kbx-lookup__input-wrapper:focus-within {
-  border-color: var(--kbx-color-primary, #3b82f6);
-  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
-}
-
-.kbx-lookup__code {
-  padding: 0 8px;
-  font-size: 11px;
-  color: var(--kbx-color-text-muted, #6b7280);
-  border-left: 1px solid var(--kbx-color-border, #e5e7eb);
-}
-
-.kbx-lookup__dropdown {
-  position: absolute;
-  top: 100%;
-  left: 0;
-  right: 0;
-  background: var(--kbx-color-surface, #fff);
-  border: 1px solid var(--kbx-color-border, #e5e7eb);
-  border-top: none;
-  border-radius: 0 0 4px 4px;
-  max-height: 300px;
-  overflow-y: auto;
-  z-index: 10;
-  margin-top: -1px;
-}
-
-.kbx-lookup__loading,
-.kbx-lookup__empty {
-  padding: 12px;
-  text-align: center;
-  font-size: 13px;
-  color: var(--kbx-color-text-muted, #6b7280);
-}
-
-.kbx-lookup__list {
-  list-style: none;
-  margin: 0;
-  padding: 0;
-}
-
-.kbx-lookup__item {
-  padding: 8px 12px;
-  cursor: pointer;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  border-bottom: 1px solid var(--kbx-color-border, #e5e7eb);
-  font-size: 13px;
-  transition: background 0.2s ease;
-}
-
-.kbx-lookup__item:last-child {
-  border-bottom: none;
-}
-
-.kbx-lookup__item:hover:not(.is-disabled) {
-  background: var(--kbx-color-border, #e5e7eb);
-}
-
-.kbx-lookup__item.is-disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-
-.kbx-lookup__item-label {
-  flex: 1;
-}
-
-.kbx-lookup__item-code {
-  font-size: 11px;
-  color: var(--kbx-color-text-muted, #6b7280);
-  margin-left: 8px;
-}
-
-.kbx-lookup__error {
-  font-size: 12px;
-  color: var(--kbx-color-danger, #ef4444);
-}
-
-@media (prefers-color-scheme: dark) {
-  .kbx-lookup__label {
-    color: #f9fafb;
-  }
-
-  .kbx-lookup__input-wrapper {
-    background: #1f2937;
-    border-color: #374151;
-  }
-
-  .kbx-lookup__input {
-    color: #f9fafb;
-  }
-
-  .kbx-lookup__code {
-    border-left-color: #374151;
-  }
-
-  .kbx-lookup__dropdown {
-    background: #1f2937;
-    border-color: #374151;
-  }
-
-  .kbx-lookup__item {
-    border-bottom-color: #374151;
-  }
-
-  .kbx-lookup__item:hover:not(.is-disabled) {
-    background: #374151;
-  }
-}
-</style>
diff --git a/frontend/src/shared/@kbx/ui/components/KbxMasterTemplate.vue b/frontend/src/shared/@kbx/ui/components/KbxMasterTemplate.vue
deleted file mode 100644
index 4da86a92..00000000
--- a/frontend/src/shared/@kbx/ui/components/KbxMasterTemplate.vue
+++ /dev/null
@@ -1,158 +0,0 @@
-<script setup lang="ts">
-/**
- * KBX Master Template — v60 (T02)
- * List + Detail (Master-Detail / CRUD)
- *
- * v52 Anatomy:
- * - listTitle: 목록 제목 (e.g., "품목 목록")
- * - listCount: 항목 수
- * - listDescription: 목록 설명
- * - detailTitle: 상세 제목 (e.g., "품목 상세")
- * - detailDescription: 상세 설명
- */
-import type { KbxValidationError } from '../contracts'
-import KbxSectionHeader from './KbxSectionHeader.vue'
-import KbxValidationSummary from './KbxValidationSummary.vue'
-
-withDefaults(
-  defineProps<{
-    listTitle?: string
-    listCount?: number
-    listCountUnit?: string
-    listDescription?: string
-    detailTitle?: string
-    detailDescription?: string
-    errors?: KbxValidationError[]
-    status?: string
-    dirty?: boolean
-  }>(),
-  {
-    listTitle: '목록',
-    listCountUnit: '건',
-    listDescription: '',
-    detailTitle: '상세',
-    detailDescription: '',
-    errors: () => [],
-    status: '',
-    dirty: false,
-  }
-)
-
-defineEmits<{
-  command: [string]
-}>()
-</script>
-
-<template>
-  <div class="kbx-master-template">
-    <!-- Status/Error Feedback -->
-    <KbxValidationSummary v-if="errors.length" :errors="errors" />
-
-    <!-- List Pane -->
-    <aside class="kbx-master-template__list" data-kbx-surface="master-list">
-      <KbxSectionHeader
-        :title="listTitle"
-        :count="listCount"
-        :count-unit="listCountUnit"
-        :description="listDescription"
-      >
-        <template #actions>
-          <slot name="list-actions" />
-        </template>
-      </KbxSectionHeader>
-
-      <div class="kbx-master-template__list-body">
-        <slot name="list" />
-      </div>
-    </aside>
-
-    <!-- Detail Pane -->
-    <main class="kbx-master-template__detail" data-kbx-surface="detail">
-      <KbxSectionHeader
-        :title="detailTitle"
-        :description="detailDescription"
-      >
-        <template #actions>
-          <slot name="detail-actions" />
-        </template>
-      </KbxSectionHeader>
-
-      <div class="kbx-master-template__detail-body">
-        <slot name="detail" />
-      </div>
-
-      <!-- Optional Tabs Section -->
-      <section v-if="$slots.tabs" class="kbx-master-template__tabs" data-kbx-surface="tabs">
-        <slot name="tabs" />
-      </section>
-    </main>
-  </div>
-</template>
-
-<style scoped>
-.kbx-master-template {
-  display: grid;
-  grid-template-columns: minmax(280px, 32%) minmax(0, 1fr);
-  gap: 12px;
-  height: 100%;
-  overflow: hidden;
-}
-
-.kbx-master-template__list,
-.kbx-master-template__detail {
-  min-height: 0;
-  border: 1px solid var(--kbx-color-border, #e5e7eb);
-  background: var(--kbx-color-surface, #fff);
-  border-radius: 4px;
-  overflow: hidden;
-  display: flex;
-  flex-direction: column;
-}
-
-.kbx-master-template__list {
-  border-top: 3px solid var(--kbx-color-module-accent, #3b82f6);
-}
-
-.kbx-master-template__detail {
-  border-top: 3px solid var(--kbx-color-module-accent, #3b82f6);
-}
-
-.kbx-master-template__list :deep(.kbx-section-header),
-.kbx-master-template__detail :deep(.kbx-section-header) {
-  background: var(--kbx-color-section-heading, #f9fafb);
-  border-bottom: 1px solid var(--kbx-color-border, #e5e7eb);
-}
-
-.kbx-master-template__list-body,
-.kbx-master-template__detail-body {
-  padding: 12px;
-  flex: 1;
-  overflow: auto;
-}
-
-.kbx-master-template__tabs {
-  margin-top: auto;
-  border-top: 1px solid var(--kbx-color-border, #e5e7eb);
-  padding: 12px;
-}
-
-/* Mobile: Single column */
-@media (max-width: 991px) {
-  .kbx-master-template {
-    grid-template-columns: 1fr;
-  }
-}
-
-@media (prefers-color-scheme: dark) {
-  .kbx-master-template__list,
-  .kbx-master-template__detail {
-    background: #1f2937;
-    border-color: #374151;
-  }
-
-  .kbx-master-template__list :deep(.kbx-section-header),
-  .kbx-master-template__detail :deep(.kbx-section-header) {
-    background: #111827;
-  }
-}
-</style>
diff --git a/frontend/src/shared/@kbx/ui/components/KbxMoneyField.vue b/frontend/src/shared/@kbx/ui/components/KbxMoneyField.vue
deleted file mode 100644
index 3783fb6e..00000000
--- a/frontend/src/shared/@kbx/ui/components/KbxMoneyField.vue
+++ /dev/null
@@ -1,129 +0,0 @@
-<script setup lang="ts">
-/**
- * KBX Money Field — v60
- * Currency input with formatting
- */
-
-withDefaults(
-  defineProps<{
-    modelValue: number | string
-    label?: string
-    error?: string
-    required?: boolean
-    disabled?: boolean
-    currency?: string
-  }>(),
-  {
-    modelValue: '',
-    currency: '₩',
-  }
-)
-
-defineEmits<{
-  'update:modelValue': [value: number]
-  blur: []
-}>()
-
-const formatCurrency = (value: number | string): string => {
-  if (!value) return ''
-  const num = typeof value === 'string' ? parseFloat(value) : value
-  return num.toLocaleString('ko-KR')
-}
-</script>
-
-<template>
-  <div class="kbx-money-wrapper">
-    <label v-if="label" class="kbx-money__label">
-      {{ label }}
-      <span v-if="required" class="kbx-money__required">*</span>
-    </label>
-    <div class="kbx-money__input-wrapper">
-      <span class="kbx-money__currency">{{ currency }}</span>
-      <input
-        :value="formatCurrency(modelValue)"
-        type="text"
-        inputmode="numeric"
-        :disabled="disabled"
-        :class="['kbx-money__input', { 'is-error': error }]"
-        @input="$emit('update:modelValue', Number(($event.target as HTMLInputElement).value.replace(/[^\d]/g, '')))"
-        @blur="$emit('blur')"
-      />
-    </div>
-    <div v-if="error" class="kbx-money__error">{{ error }}</div>
-  </div>
-</template>
-
-<style scoped>
-.kbx-money-wrapper {
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-}
-
-.kbx-money__label {
-  font-size: 13px;
-  font-weight: 500;
-  color: var(--kbx-color-text);
-}
-
-.kbx-money__required {
-  color: var(--kbx-color-danger);
-  margin-left: 2px;
-}
-
-.kbx-money__input-wrapper {
-  position: relative;
-  display: flex;
-  align-items: center;
-  border: 1px solid var(--kbx-color-border);
-  border-radius: 4px;
-  background: var(--kbx-color-surface);
-  min-height: 34px;
-}
-
-.kbx-money__currency {
-  padding: 0 10px;
-  color: var(--kbx-color-text-muted);
-  font-size: 14px;
-  font-weight: 500;
-}
-
-.kbx-money__input {
-  flex: 1;
-  border: none;
-  padding: 8px 0 8px 0;
-  font-size: 14px;
-  background: transparent;
-  color: var(--kbx-color-text);
-  text-align: right;
-}
-
-.kbx-money__input:focus {
-  outline: none;
-}
-
-.kbx-money__input-wrapper:focus-within {
-  border-color: var(--kbx-color-primary);
-  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
-}
-
-.kbx-money__error {
-  font-size: 12px;
-  color: var(--kbx-color-danger);
-}
-
-@media (prefers-color-scheme: dark) {
-  .kbx-money__label {
-    color: #f9fafb;
-  }
-
-  .kbx-money__input-wrapper {
-    background: #1f2937;
-    border-color: #374151;
-  }
-
-  .kbx-money__input {
-    color: #f9fafb;
-  }
-}
-</style>
diff --git a/frontend/src/shared/@kbx/ui/components/KbxNumberField.vue b/frontend/src/shared/@kbx/ui/components/KbxNumberField.vue
deleted file mode 100644
index eb3aadff..00000000
--- a/frontend/src/shared/@kbx/ui/components/KbxNumberField.vue
+++ /dev/null
@@ -1,114 +0,0 @@
-<script setup lang="ts">
-/**
- * KBX Number Field Component — v60
- */
-
-withDefaults(
-  defineProps<{
-    modelValue: number | string
-    placeholder?: string
-    label?: string
-    error?: string
-    required?: boolean
-    readonly?: boolean
-    disabled?: boolean
-    min?: number
-    max?: number
-    step?: number
-  }>(),
-  {
-    modelValue: '',
-    step: 1,
-  }
-)
-
-defineEmits<{
-  'update:modelValue': [value: number]
-  blur: []
-}>()
-</script>
-
-<template>
-  <div class="kbx-number-wrapper">
-    <label v-if="label" class="kbx-number__label">
-      {{ label }}
-      <span v-if="required" class="kbx-number__required">*</span>
-    </label>
-    <input
-      :value="modelValue"
-      type="number"
-      :placeholder="placeholder"
-      :readonly="readonly"
-      :disabled="disabled"
-      :min="min"
-      :max="max"
-      :step="step"
-      :class="['kbx-number', { 'is-error': error }]"
-      @input="$emit('update:modelValue', Number(($event.target as HTMLInputElement).value))"
-      @blur="$emit('blur')"
-    />
-    <div v-if="error" class="kbx-number__error">{{ error }}</div>
-  </div>
-</template>
-
-<style scoped>
-.kbx-number-wrapper {
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-}
-
-.kbx-number__label {
-  font-size: 13px;
-  font-weight: 500;
-  color: var(--kbx-color-text, #000);
-}
-
-.kbx-number__required {
-  color: var(--kbx-color-danger, #ef4444);
-  margin-left: 2px;
-}
-
-.kbx-number {
-  padding: 8px 12px;
-  border: 1px solid var(--kbx-color-border, #e5e7eb);
-  border-radius: 4px;
-  font-size: 14px;
-  background: var(--kbx-color-surface, #fff);
-  color: var(--kbx-color-text, #000);
-  text-align: right;
-  min-height: 34px;
-}
-
-.kbx-number:focus {
-  outline: none;
-  border-color: var(--kbx-color-primary, #3b82f6);
-  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
-}
-
-.kbx-number:disabled {
-  background: var(--kbx-color-border, #e5e7eb);
-  opacity: 0.6;
-}
-
-.kbx-number.is-error {
-  border-color: var(--kbx-color-danger, #ef4444);
-}
-
-.kbx-number__error {
-  font-size: 12px;
-  color: var(--kbx-color-danger, #ef4444);
-}
-
-@media (prefers-color-scheme: dark) {
-  .kbx-number__label {
-    color: #f9fafb;
-  }
-
-  .kbx-number {
-    background: #1f2937;
-    border-color: #374151;
-    color: #f9fafb;
-  }
-}
-</style>
diff --git a/frontend/src/shared/@kbx/ui/components/KbxQuantityField.vue b/frontend/src/shared/@kbx/ui/components/KbxQuantityField.vue
deleted file mode 100644
index 0763237c..00000000
--- a/frontend/src/shared/@kbx/ui/components/KbxQuantityField.vue
+++ /dev/null
@@ -1,154 +0,0 @@
-<script setup lang="ts">
-/**
- * KBX Quantity Field — v60
- * Quantity input with increment/decrement
- */
-
-withDefaults(
-  defineProps<{
-    modelValue: number | string
-    label?: string
-    error?: string
-    required?: boolean
-    disabled?: boolean
-    min?: number
-    max?: number
-  }>(),
-  {
-    modelValue: 0,
-    min: 0,
-  }
-)
-
-defineEmits<{
-  'update:modelValue': [value: number]
-  blur: []
-}>()
-</script>
-
-<template>
-  <div class="kbx-quantity-wrapper">
-    <label v-if="label" class="kbx-quantity__label">
-      {{ label }}
-      <span v-if="required" class="kbx-quantity__required">*</span>
-    </label>
-    <div class="kbx-quantity__input-group">
-      <button
-        class="kbx-quantity__btn"
-        :disabled="disabled || (min !== undefined && Number(modelValue) <= min)"
-        @click="$emit('update:modelValue', Math.max(min ?? 0, Number(modelValue) - 1))"
-      >
-        −
-      </button>
-      <input
-        :value="modelValue"
-        type="number"
-        :disabled="disabled"
-        :min="min"
-        :max="max"
-        :class="['kbx-quantity__input', { 'is-error': error }]"
-        @input="$emit('update:modelValue', Number(($event.target as HTMLInputElement).value))"
-        @blur="$emit('blur')"
-      />
-      <button
-        class="kbx-quantity__btn"
-        :disabled="disabled || (max !== undefined && Number(modelValue) >= max)"
-        @click="$emit('update:modelValue', max ? Math.min(max, Number(modelValue) + 1) : Number(modelValue) + 1)"
-      >
-        +
-      </button>
-    </div>
-    <div v-if="error" class="kbx-quantity__error">{{ error }}</div>
-  </div>
-</template>
-
-<style scoped>
-.kbx-quantity-wrapper {
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-}
-
-.kbx-quantity__label {
-  font-size: 13px;
-  font-weight: 500;
-  color: var(--kbx-color-text);
-}
-
-.kbx-quantity__required {
-  color: var(--kbx-color-danger);
-  margin-left: 2px;
-}
-
-.kbx-quantity__input-group {
-  display: flex;
-  align-items: center;
-  border: 1px solid var(--kbx-color-border);
-  border-radius: 4px;
-  background: var(--kbx-color-surface);
-  overflow: hidden;
-}
-
-.kbx-quantity__btn {
-  padding: 8px 12px;
-  border: none;
-  background: transparent;
-  cursor: pointer;
-  font-weight: 600;
-  color: var(--kbx-color-text);
-  border-right: 1px solid var(--kbx-color-border);
-}
-
-.kbx-quantity__btn:last-child {
-  border-right: none;
-  border-left: 1px solid var(--kbx-color-border);
-}
-
-.kbx-quantity__btn:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-
-.kbx-quantity__input {
-  flex: 1;
-  border: none;
-  padding: 8px 12px;
-  font-size: 14px;
-  text-align: center;
-  background: transparent;
-  color: var(--kbx-color-text);
-}
-
-.kbx-quantity__input:focus {
-  outline: none;
-}
-
-.kbx-quantity__error {
-  font-size: 12px;
-  color: var(--kbx-color-danger);
-}
-
-@media (prefers-color-scheme: dark) {
-  .kbx-quantity__label {
-    color: #f9fafb;
-  }
-
-  .kbx-quantity__input-group {
-    background: #1f2937;
-    border-color: #374151;
-  }
-
-  .kbx-quantity__btn {
-    color: #f9fafb;
-    border-right-color: #374151;
-  }
-
-  .kbx-quantity__btn:last-child {
-    border-left-color: #374151;
-  }
-
-  .kbx-quantity__input {
-    color: #f9fafb;
-  }
-}
-</style>
diff --git a/frontend/src/shared/@kbx/ui/components/KbxQueueTemplate.vue b/frontend/src/shared/@kbx/ui/components/KbxQueueTemplate.vue
deleted file mode 100644
index 834e0210..00000000
--- a/frontend/src/shared/@kbx/ui/components/KbxQueueTemplate.vue
+++ /dev/null
@@ -1,141 +0,0 @@
-<script setup lang="ts">
-/**
- * KBX Queue Template — v60 (T06)
- * Work Queue / Task Queue (WMS 작업, 승인 대기, 예외 처리)
- *
- * v52 Principle: Queue는 "지금 처리할 업무"를 보여준다.
- *
- * v52 Anatomy:
- * - queueTitle: 대기열 제목 (e.g., "현재 작업 Queue")
- * - queueDescription: 대기열 설명
- * - queueCount: 현재 대기 중인 항목 수
- */
-import { computed } from 'vue'
-import KbxSectionHeader from './KbxSectionHeader.vue'
-
-withDefaults(
-  defineProps<{
-    queueTitle?: string
-    queueDescription?: string
-    queueCount?: number
-    queueCountUnit?: string
-    empty?: boolean
-  }>(),
-  {
-    queueTitle: '대기열',
-    queueCountUnit: '건',
-    empty: false,
-  }
-)
-
-const hasItems = computed(() => {
-  if (typeof props.queueCount === 'number') return props.queueCount > 0
-  return !props.empty
-})
-
-const props = defineProps<{
-  queueTitle?: string
-  queueDescription?: string
-  queueCount?: number
-  queueCountUnit?: string
-  empty?: boolean
-}>()
-</script>
-
-<template>
-  <div class="kbx-queue-template">
-    <KbxSectionHeader
-      :title="queueTitle"
-      :count="queueCount"
-      :count-unit="queueCountUnit"
-      :description="queueDescription"
-    />
-
-    <div class="kbx-queue-template__body">
-      <div v-if="hasItems" class="kbx-queue-template__queue-body">
-        <slot name="queue-body" />
-      </div>
-
-      <div v-else class="kbx-queue-template__empty-state">
-        <div class="kbx-queue-template__empty-icon">✓</div>
-        <p class="kbx-queue-template__empty-message">
-          처리할 작업이 없습니다.
-        </p>
-      </div>
-    </div>
-
-    <div v-if="$slots['queue-footer']" class="kbx-queue-template__footer">
-      <slot name="queue-footer" />
-    </div>
-  </div>
-</template>
-
-<style scoped>
-.kbx-queue-template {
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-  border: 1px solid var(--kbx-color-border, #e5e7eb);
-  background: var(--kbx-color-surface, #fff);
-  border-radius: 4px;
-  overflow: hidden;
-  border-top: 3px solid var(--kbx-color-module-accent, #3b82f6);
-}
-
-.kbx-queue-template :deep(.kbx-section-header) {
-  background: var(--kbx-color-section-heading, #f9fafb);
-  border-bottom: 1px solid var(--kbx-color-border, #e5e7eb);
-}
-
-.kbx-queue-template__body {
-  flex: 1;
-  overflow: auto;
-  display: flex;
-  flex-direction: column;
-}
-
-.kbx-queue-template__queue-body {
-  flex: 1;
-  overflow: auto;
-  padding: 12px;
-}
-
-.kbx-queue-template__empty-state {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  min-height: 200px;
-  text-align: center;
-  color: var(--kbx-color-text-muted, #6b7280);
-}
-
-.kbx-queue-template__empty-icon {
-  font-size: 48px;
-  line-height: 1;
-  margin-bottom: 12px;
-  opacity: 0.5;
-}
-
-.kbx-queue-template__empty-message {
-  margin: 0;
-  font-size: 14px;
-  line-height: 1.5;
-}
-
-.kbx-queue-template__footer {
-  border-top: 1px solid var(--kbx-color-border, #e5e7eb);
-  padding: 12px;
-}
-
-@media (prefers-color-scheme: dark) {
-  .kbx-queue-template {
-    background: #1f2937;
-    border-color: #374151;
-  }
-
-  .kbx-queue-template :deep(.kbx-section-header) {
-    background: #111827;
-  }
-}
-</style>
diff --git a/frontend/src/shared/@kbx/ui/components/KbxRadio.vue b/frontend/src/shared/@kbx/ui/components/KbxRadio.vue
deleted file mode 100644
index 7694876d..00000000
--- a/frontend/src/shared/@kbx/ui/components/KbxRadio.vue
+++ /dev/null
@@ -1,130 +0,0 @@
-<script setup lang="ts">
-/**
- * KBX Radio Button — v60
- */
-
-interface KbxRadioOption {
-  value: string | number
-  label: string
-  disabled?: boolean
-}
-
-withDefaults(
-  defineProps<{
-    modelValue: string | number
-    options: KbxRadioOption[]
-    label?: string
-    disabled?: boolean
-  }>(),
-  {
-    modelValue: '',
-  }
-)
-
-defineEmits<{
-  'update:modelValue': [value: string | number]
-}>()
-</script>
-
-<template>
-  <div class="kbx-radio-wrapper">
-    <label v-if="label" class="kbx-radio__label">{{ label }}</label>
-    <div class="kbx-radio-group">
-      <label v-for="opt in options" :key="opt.value" class="kbx-radio" :class="{ 'is-disabled': opt.disabled || disabled }">
-        <input
-          :checked="modelValue === opt.value"
-          type="radio"
-          :value="opt.value"
-          :disabled="opt.disabled || disabled"
-          @change="$emit('update:modelValue', opt.value)"
-        />
-        <span class="kbx-radio__box" />
-        <span class="kbx-radio__text">{{ opt.label }}</span>
-      </label>
-    </div>
-  </div>
-</template>
-
-<style scoped>
-.kbx-radio-wrapper {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-}
-
-.kbx-radio__label {
-  font-size: 13px;
-  font-weight: 500;
-  color: var(--kbx-color-text);
-}
-
-.kbx-radio-group {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-}
-
-.kbx-radio {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  cursor: pointer;
-  user-select: none;
-}
-
-.kbx-radio input {
-  position: absolute;
-  opacity: 0;
-  cursor: pointer;
-}
-
-.kbx-radio__box {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 18px;
-  height: 18px;
-  border: 1px solid var(--kbx-color-border);
-  border-radius: 50%;
-  background: var(--kbx-color-surface);
-  flex-shrink: 0;
-}
-
-.kbx-radio input:checked ~ .kbx-radio__box {
-  border-color: var(--kbx-color-primary);
-  background: var(--kbx-color-primary);
-}
-
-.kbx-radio input:checked ~ .kbx-radio__box::after {
-  content: '';
-  width: 6px;
-  height: 6px;
-  background: white;
-  border-radius: 50%;
-}
-
-.kbx-radio__text {
-  font-size: 14px;
-  color: var(--kbx-color-text);
-}
-
-.kbx-radio.is-disabled {
-  opacity: 0.6;
-  cursor: not-allowed;
-}
-
-@media (prefers-color-scheme: dark) {
-  .kbx-radio__label {
-    color: #f9fafb;
-  }
-
-  .kbx-radio__box {
-    background: #1f2937;
-    border-color: #374151;
-  }
-
-  .kbx-radio__text {
-    color: #f9fafb;
-  }
-}
-</style>
diff --git a/frontend/src/shared/@kbx/ui/components/KbxReconcileTemplate.vue b/frontend/src/shared/@kbx/ui/components/KbxReconcileTemplate.vue
deleted file mode 100644
index 9bfaa97d..00000000
--- a/frontend/src/shared/@kbx/ui/components/KbxReconcileTemplate.vue
+++ /dev/null
@@ -1,183 +0,0 @@
-<script setup lang="ts">
-/**
- * KBX Reconcile Template — v60 (T07)
- * Reconciliation / Comparison (OMS ↔ WMS, Expected ↔ Actual)
- *
- * v52 Principle: 대사 화면은 "비교 목적"을 명시해야 한다.
- *
- * v52 Anatomy:
- * - comparisonTitle: 대사 제목 (e.g., "OMS ↔ WMS 대사")
- * - comparisonDescription: 대사 설명
- * - comparisonCount: 불일치 항목 수
- */
-import { computed } from 'vue'
-import KbxSectionHeader from './KbxSectionHeader.vue'
-
-withDefaults(
-  defineProps<{
-    comparisonTitle?: string
-    comparisonDescription?: string
-    comparisonCount?: number
-    comparisonCountUnit?: string
-    leftLabel?: string
-    rightLabel?: string
-    empty?: boolean
-  }>(),
-  {
-    comparisonTitle: '대사',
-    comparisonCountUnit: '건',
-    leftLabel: 'Expected',
-    rightLabel: 'Actual',
-    empty: false,
-  }
-)
-
-const props = defineProps<{
-  comparisonTitle?: string
-  comparisonDescription?: string
-  comparisonCount?: number
-  comparisonCountUnit?: string
-  leftLabel?: string
-  rightLabel?: string
-  empty?: boolean
-}>()
-
-const hasDiscrepancies = computed(() => {
-  if (typeof props.comparisonCount === 'number') return props.comparisonCount > 0
-  return !props.empty
-})
-</script>
-
-<template>
-  <div class="kbx-reconcile-template">
-    <KbxSectionHeader
-      :title="comparisonTitle"
-      :count="comparisonCount"
-      :count-unit="comparisonCountUnit"
-      :description="comparisonDescription"
-    />
-
-    <div class="kbx-reconcile-template__column-labels">
-      <div class="kbx-reconcile-template__label">{{ leftLabel }}</div>
-      <div class="kbx-reconcile-template__label">Difference</div>
-      <div class="kbx-reconcile-template__label">{{ rightLabel }}</div>
-    </div>
-
-    <div class="kbx-reconcile-template__body">
-      <div v-if="hasDiscrepancies" class="kbx-reconcile-template__comparison-body">
-        <slot name="comparison-body" />
-      </div>
-
-      <div v-else class="kbx-reconcile-template__aligned-state">
-        <div class="kbx-reconcile-template__aligned-icon">✓</div>
-        <p class="kbx-reconcile-template__aligned-message">
-          모든 항목이 일치합니다.
-        </p>
-      </div>
-    </div>
-
-    <div v-if="$slots['comparison-footer']" class="kbx-reconcile-template__footer">
-      <slot name="comparison-footer" />
-    </div>
-  </div>
-</template>
-
-<style scoped>
-.kbx-reconcile-template {
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-  border: 1px solid var(--kbx-color-border, #e5e7eb);
-  background: var(--kbx-color-surface, #fff);
-  border-radius: 4px;
-  overflow: hidden;
-  border-top: 3px solid var(--kbx-color-module-accent, #3b82f6);
-}
-
-.kbx-reconcile-template :deep(.kbx-section-header) {
-  background: var(--kbx-color-section-heading, #f9fafb);
-  border-bottom: 1px solid var(--kbx-color-border, #e5e7eb);
-}
-
-.kbx-reconcile-template__column-labels {
-  display: grid;
-  grid-template-columns: 1fr auto 1fr;
-  gap: 12px;
-  padding: 8px 16px;
-  font-size: 12px;
-  font-weight: 600;
-  color: var(--kbx-color-text-muted, #6b7280);
-  border-bottom: 1px solid var(--kbx-color-border, #e5e7eb);
-  background: var(--kbx-color-section-heading, #f9fafb);
-}
-
-.kbx-reconcile-template__label {
-  text-align: center;
-}
-
-.kbx-reconcile-template__body {
-  flex: 1;
-  overflow: auto;
-  display: flex;
-  flex-direction: column;
-}
-
-.kbx-reconcile-template__comparison-body {
-  flex: 1;
-  overflow: auto;
-  padding: 12px;
-}
-
-.kbx-reconcile-template__aligned-state {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  min-height: 200px;
-  text-align: center;
-  color: var(--kbx-color-text-muted, #6b7280);
-}
-
-.kbx-reconcile-template__aligned-icon {
-  font-size: 48px;
-  line-height: 1;
-  margin-bottom: 12px;
-  opacity: 0.5;
-  color: var(--kbx-color-success, #10b981);
-}
-
-.kbx-reconcile-template__aligned-message {
-  margin: 0;
-  font-size: 14px;
-  line-height: 1.5;
-}
-
-.kbx-reconcile-template__footer {
-  border-top: 1px solid var(--kbx-color-border, #e5e7eb);
-  padding: 12px 16px;
-}
-
-@media (prefers-color-scheme: dark) {
-  .kbx-reconcile-template {
-    background: #1f2937;
-    border-color: #374151;
-  }
-
-  .kbx-reconcile-template :deep(.kbx-section-header),
-  .kbx-reconcile-template__column-labels {
-    background: #111827;
-    border-bottom-color: #374151;
-  }
-}
-
-@media (max-width: 767px) {
-  .kbx-reconcile-template__column-labels {
-    grid-template-columns: 1fr 1fr;
-    gap: 8px;
-  }
-
-  .kbx-reconcile-template__label:nth-child(2) {
-    display: none;
-  }
-}
-</style>
diff --git a/frontend/src/shared/@kbx/ui/components/KbxScreenFrame.vue b/frontend/src/shared/@kbx/ui/components/KbxScreenFrame.vue
deleted file mode 100644
index 8179023e..00000000
--- a/frontend/src/shared/@kbx/ui/components/KbxScreenFrame.vue
+++ /dev/null
@@ -1,122 +0,0 @@
-<script setup lang="ts">
-/**
- * KBX Screen Frame — v60
- * Main wrapper for all screen templates (T01-T09)
- */
-import type { KbxScreenDefinition } from '../contracts'
-
-withDefaults(
-  defineProps<{
-    screen?: KbxScreenDefinition
-    status?: string
-    dirty?: boolean
-    expectedType?: string
-    templateCode?: string
-    breadcrumb?: string
-    suppressDefaultUtility?: boolean
-  }>(),
-  {
-    status: '',
-    dirty: false,
-    suppressDefaultUtility: false,
-  }
-)
-
-defineEmits<{
-  command: [string]
-}>()
-</script>
-
-<template>
-  <div class="kbx-screen-frame" :data-status="status" :data-dirty="dirty">
-    <header class="kbx-screen-frame__header">
-      <div class="kbx-screen-frame__breadcrumb" v-if="breadcrumb">
-        {{ breadcrumb }}
-      </div>
-      <div class="kbx-screen-frame__title" v-if="screen">
-        {{ screen.title }}
-      </div>
-      <div class="kbx-screen-frame__utility" v-if="!suppressDefaultUtility">
-        <slot name="utility" />
-      </div>
-    </header>
-
-    <div class="kbx-screen-frame__notice">
-      <slot name="notice" />
-    </div>
-
-    <main class="kbx-screen-frame__content">
-      <slot />
-    </main>
-
-    <div v-if="$slots.drawer" class="kbx-screen-frame__drawer">
-      <slot name="drawer" />
-    </div>
-  </div>
-</template>
-
-<style scoped>
-.kbx-screen-frame {
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-  background: var(--kbx-color-background);
-}
-
-.kbx-screen-frame__header {
-  padding: 12px 16px;
-  border-bottom: 1px solid var(--kbx-color-border);
-  background: var(--kbx-color-surface);
-  display: flex;
-  align-items: center;
-  gap: 12px;
-}
-
-.kbx-screen-frame__breadcrumb {
-  font-size: 12px;
-  color: var(--kbx-color-text-muted);
-  flex-shrink: 0;
-}
-
-.kbx-screen-frame__title {
-  font-size: 16px;
-  font-weight: 600;
-  color: var(--kbx-color-text);
-  flex: 1;
-}
-
-.kbx-screen-frame__utility {
-  display: flex;
-  gap: 8px;
-  flex-shrink: 0;
-}
-
-.kbx-screen-frame__notice {
-  min-height: auto;
-  padding: 0 16px;
-}
-
-.kbx-screen-frame__content {
-  flex: 1;
-  overflow: auto;
-  padding: 16px;
-}
-
-.kbx-screen-frame__drawer {
-  position: fixed;
-  right: 0;
-  top: 0;
-  bottom: 0;
-}
-
-@media (prefers-color-scheme: dark) {
-  .kbx-screen-frame {
-    background: #111827;
-  }
-
-  .kbx-screen-frame__header {
-    background: #1f2937;
-    border-bottom-color: #374151;
-  }
-}
-</style>
diff --git a/frontend/src/shared/@kbx/ui/components/KbxSectionHeader.vue b/frontend/src/shared/@kbx/ui/components/KbxSectionHeader.vue
deleted file mode 100644
index e9afabed..00000000
--- a/frontend/src/shared/@kbx/ui/components/KbxSectionHeader.vue
+++ /dev/null
@@ -1,82 +0,0 @@
-<script setup lang="ts">
-/**
- * KBX Section Header — v60 simplified
- * Standard header for screen sections
- */
-withDefaults(
-  defineProps<{
-    title: string
-    count?: number
-    countUnit?: string
-    description?: string
-  }>(),
-  { countUnit: '건' }
-)
-</script>
-
-<template>
-  <header class="kbx-section-header">
-    <div>
-      <h2>
-        {{ title }}
-        <span v-if="count != null"> {{ count.toLocaleString('ko-KR') }}{{ countUnit }}</span>
-      </h2>
-      <p v-if="description">{{ description }}</p>
-    </div>
-    <div class="kbx-section-header__actions">
-      <slot name="actions" />
-    </div>
-  </header>
-</template>
-
-<style scoped>
-.kbx-section-header {
-  min-height: 44px;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 12px;
-  border-bottom: 1px solid var(--kbx-color-border, #e5e7eb);
-  padding: 0 16px;
-}
-
-.kbx-section-header h2 {
-  margin: 0;
-  font-size: 16px;
-  font-weight: 600;
-  color: var(--kbx-color-text, #000);
-}
-
-.kbx-section-header h2 span {
-  font-size: 13px;
-  color: var(--kbx-color-text-muted, #6b7280);
-  font-weight: 500;
-  margin-left: 6px;
-}
-
-.kbx-section-header p {
-  margin: 4px 0 0;
-  color: var(--kbx-color-text-muted, #6b7280);
-  font-size: 12px;
-}
-
-.kbx-section-header__actions {
-  display: flex;
-  gap: 8px;
-}
-
-@media (prefers-color-scheme: dark) {
-  .kbx-section-header {
-    border-bottom-color: #374151;
-  }
-
-  .kbx-section-header h2 {
-    color: #f9fafb;
-  }
-
-  .kbx-section-header h2 span,
-  .kbx-section-header p {
-    color: #d1d5db;
-  }
-}
-</style>
diff --git a/frontend/src/shared/@kbx/ui/components/KbxSelect.vue b/frontend/src/shared/@kbx/ui/components/KbxSelect.vue
deleted file mode 100644
index e3935d29..00000000
--- a/frontend/src/shared/@kbx/ui/components/KbxSelect.vue
+++ /dev/null
@@ -1,120 +0,0 @@
-<script setup lang="ts">
-/**
- * KBX Select Component — v60
- */
-
-export interface KbxSelectOption {
-  value: string | number
-  label: string
-  disabled?: boolean
-}
-
-withDefaults(
-  defineProps<{
-    modelValue: string | number
-    options: KbxSelectOption[]
-    placeholder?: string
-    label?: string
-    error?: string
-    required?: boolean
-    disabled?: boolean
-  }>(),
-  {
-    modelValue: '',
-  }
-)
-
-defineEmits<{
-  'update:modelValue': [value: string | number]
-  change: []
-}>()
-</script>
-
-<template>
-  <div class="kbx-select-wrapper">
-    <label v-if="label" class="kbx-select__label">
-      {{ label }}
-      <span v-if="required" class="kbx-select__required">*</span>
-    </label>
-    <select
-      :value="modelValue"
-      :disabled="disabled"
-      :class="['kbx-select', { 'is-error': error }]"
-      @change="$emit('update:modelValue', ($event.target as HTMLSelectElement).value); $emit('change')"
-    >
-      <option v-if="placeholder" value="">{{ placeholder }}</option>
-      <option
-        v-for="opt in options"
-        :key="opt.value"
-        :value="opt.value"
-        :disabled="opt.disabled"
-      >
-        {{ opt.label }}
-      </option>
-    </select>
-    <div v-if="error" class="kbx-select__error">{{ error }}</div>
-  </div>
-</template>
-
-<style scoped>
-.kbx-select-wrapper {
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-}
-
-.kbx-select__label {
-  font-size: 13px;
-  font-weight: 500;
-  color: var(--kbx-color-text, #000);
-}
-
-.kbx-select__required {
-  color: var(--kbx-color-danger, #ef4444);
-  margin-left: 2px;
-}
-
-.kbx-select {
-  padding: 8px 12px;
-  border: 1px solid var(--kbx-color-border, #e5e7eb);
-  border-radius: 4px;
-  font-size: 14px;
-  background: var(--kbx-color-surface, #fff);
-  color: var(--kbx-color-text, #000);
-  cursor: pointer;
-  min-height: 34px;
-}
-
-.kbx-select:focus {
-  outline: none;
-  border-color: var(--kbx-color-primary, #3b82f6);
-  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
-}
-
-.kbx-select:disabled {
-  background: var(--kbx-color-border, #e5e7eb);
-  cursor: not-allowed;
-  opacity: 0.6;
-}
-
-.kbx-select.is-error {
-  border-color: var(--kbx-color-danger, #ef4444);
-}
-
-.kbx-select__error {
-  font-size: 12px;
-  color: var(--kbx-color-danger, #ef4444);
-}
-
-@media (prefers-color-scheme: dark) {
-  .kbx-select__label {
-    color: #f9fafb;
-  }
-
-  .kbx-select {
-    background: #1f2937;
-    border-color: #374151;
-    color: #f9fafb;
-  }
-}
-</style>
diff --git a/frontend/src/shared/@kbx/ui/components/KbxStatusTag.vue b/frontend/src/shared/@kbx/ui/components/KbxStatusTag.vue
deleted file mode 100644
index ac7e1fb8..00000000
--- a/frontend/src/shared/@kbx/ui/components/KbxStatusTag.vue
+++ /dev/null
@@ -1,109 +0,0 @@
-<script setup lang="ts">
-/**
- * KBX Status Tag Component — v60
- * Display status with tone (success, warning, danger, etc.)
- */
-
-type KbxStatusTone = 'default' | 'info' | 'success' | 'warning' | 'danger' | 'muted'
-
-withDefaults(
-  defineProps<{
-    label: string
-    tone?: KbxStatusTone
-    icon?: string
-  }>(),
-  {
-    tone: 'default',
-  }
-)
-</script>
-
-<template>
-  <span :class="['kbx-status-tag', `kbx-status-tag--${tone}`]">
-    <span v-if="icon" class="kbx-status-tag__icon">{{ icon }}</span>
-    <span class="kbx-status-tag__label">{{ label }}</span>
-  </span>
-</template>
-
-<style scoped>
-.kbx-status-tag {
-  display: inline-flex;
-  align-items: center;
-  gap: 4px;
-  padding: 4px 10px;
-  border-radius: 12px;
-  font-size: 12px;
-  font-weight: 500;
-  white-space: nowrap;
-  line-height: 1.4;
-}
-
-.kbx-status-tag--default {
-  background: var(--kbx-color-surface, #f9fafb);
-  color: var(--kbx-color-text, #000);
-  border: 1px solid var(--kbx-color-border, #e5e7eb);
-}
-
-.kbx-status-tag--info {
-  background: #dbeafe;
-  color: #1e40af;
-}
-
-.kbx-status-tag--success {
-  background: #dcfce7;
-  color: #166534;
-}
-
-.kbx-status-tag--warning {
-  background: #fef3c7;
-  color: #92400e;
-}
-
-.kbx-status-tag--danger {
-  background: #fee2e2;
-  color: #991b1b;
-}
-
-.kbx-status-tag--muted {
-  background: var(--kbx-color-border, #e5e7eb);
-  color: var(--kbx-color-text-muted, #6b7280);
-}
-
-.kbx-status-tag__icon {
-  font-size: 1em;
-  line-height: 1;
-}
-
-@media (prefers-color-scheme: dark) {
-  .kbx-status-tag--default {
-    background: #374151;
-    color: #f9fafb;
-    border-color: #4b5563;
-  }
-
-  .kbx-status-tag--info {
-    background: #1e3a8a;
-    color: #93c5fd;
-  }
-
-  .kbx-status-tag--success {
-    background: #15803d;
-    color: #86efac;
-  }
-
-  .kbx-status-tag--warning {
-    background: #92400e;
-    color: #fcd34d;
-  }
-
-  .kbx-status-tag--danger {
-    background: #7f1d1d;
-    color: #fca5a5;
-  }
-
-  .kbx-status-tag--muted {
-    background: #4b5563;
-    color: #d1d5db;
-  }
-}
-</style>
diff --git a/frontend/src/shared/@kbx/ui/components/KbxSummaryBar.vue b/frontend/src/shared/@kbx/ui/components/KbxSummaryBar.vue
deleted file mode 100644
index 98aee656..00000000
--- a/frontend/src/shared/@kbx/ui/components/KbxSummaryBar.vue
+++ /dev/null
@@ -1,69 +0,0 @@
-<script setup lang="ts">
-/**
- * KBX Summary Bar — v60
- * Display summary items
- */
-import type { KbxSummaryItem } from '../contracts'
-
-withDefaults(
-  defineProps<{
-    items: KbxSummaryItem[]
-    align?: 'start' | 'end'
-  }>(),
-  {
-    align: 'start',
-  }
-)
-</script>
-
-<template>
-  <div class="kbx-summary-bar" :class="`kbx-summary-bar--${align}`">
-    <div v-for="item in items" :key="item.key" class="kbx-summary-bar__item" :class="{ 'is-emphasis': item.emphasis }">
-      <span class="kbx-summary-bar__label">{{ item.label }}</span>
-      <span class="kbx-summary-bar__value">{{ item.value }}</span>
-    </div>
-  </div>
-</template>
-
-<style scoped>
-.kbx-summary-bar {
-  display: flex;
-  gap: 24px;
-  padding: 12px 16px;
-  border-top: 1px solid var(--kbx-color-border);
-  background: var(--kbx-color-surface);
-}
-
-.kbx-summary-bar--end {
-  justify-content: flex-end;
-}
-
-.kbx-summary-bar__item {
-  display: flex;
-  align-items: baseline;
-  gap: 8px;
-  font-size: 13px;
-}
-
-.kbx-summary-bar__label {
-  color: var(--kbx-color-text-muted);
-  font-weight: 500;
-}
-
-.kbx-summary-bar__value {
-  color: var(--kbx-color-text);
-  font-weight: 600;
-}
-
-.kbx-summary-bar__item.is-emphasis .kbx-summary-bar__value {
-  color: var(--kbx-color-primary);
-  font-size: 14px;
-}
-
-@media (prefers-color-scheme: dark) {
-  .kbx-summary-bar {
-    background: #1f2937;
-    border-top-color: #374151;
-  }
-}
-</style>
diff --git a/frontend/src/shared/@kbx/ui/components/KbxTabs.vue b/frontend/src/shared/@kbx/ui/components/KbxTabs.vue
deleted file mode 100644
index 17e37ce0..00000000
--- a/frontend/src/shared/@kbx/ui/components/KbxTabs.vue
+++ /dev/null
@@ -1,102 +0,0 @@
-<script setup lang="ts">
-/**
- * KBX Tabs Component — v60 simplified
- */
-
-export interface KbxTab {
-  id: string
-  label: string
-  disabled?: boolean
-}
-
-withDefaults(
-  defineProps<{
-    tabs: KbxTab[]
-    activeTab?: string
-  }>(),
-  {
-    activeTab: '',
-  }
-)
-
-defineEmits<{
-  'update:activeTab': [id: string]
-}>()
-</script>
-
-<template>
-  <div class="kbx-tabs">
-    <div class="kbx-tabs__header" role="tablist">
-      <button
-        v-for="tab in tabs"
-        :key="tab.id"
-        :aria-selected="(activeTab || tabs[0]?.id) === tab.id"
-        :class="[
-          'kbx-tabs__tab',
-          { 'is-active': (activeTab || tabs[0]?.id) === tab.id, 'is-disabled': tab.disabled },
-        ]"
-        :disabled="tab.disabled"
-        @click="$emit('update:activeTab', tab.id)"
-      >
-        {{ tab.label }}
-      </button>
-    </div>
-    <div class="kbx-tabs__content">
-      <slot />
-    </div>
-  </div>
-</template>
-
-<style scoped>
-.kbx-tabs {
-  display: flex;
-  flex-direction: column;
-  border-bottom: 1px solid var(--kbx-color-border, #e5e7eb);
-}
-
-.kbx-tabs__header {
-  display: flex;
-  gap: 0;
-  border-bottom: 1px solid var(--kbx-color-border, #e5e7eb);
-}
-
-.kbx-tabs__tab {
-  padding: 12px 16px;
-  border: none;
-  background: none;
-  cursor: pointer;
-  font-size: 14px;
-  color: var(--kbx-color-text-muted, #6b7280);
-  border-bottom: 2px solid transparent;
-  transition: all 0.2s ease;
-  white-space: nowrap;
-}
-
-.kbx-tabs__tab:hover:not(:disabled) {
-  color: var(--kbx-color-text, #000);
-}
-
-.kbx-tabs__tab.is-active {
-  color: var(--kbx-color-primary, #3b82f6);
-  border-bottom-color: var(--kbx-color-primary, #3b82f6);
-}
-
-.kbx-tabs__tab.is-disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-
-.kbx-tabs__content {
-  padding: 12px 0;
-}
-
-@media (prefers-color-scheme: dark) {
-  .kbx-tabs__tab {
-    color: #d1d5db;
-  }
-
-  .kbx-tabs__tab:hover:not(:disabled) {
-    color: #f9fafb;
-  }
-}
-</style>
diff --git a/frontend/src/shared/@kbx/ui/components/KbxTemplateStateBoundary.vue b/frontend/src/shared/@kbx/ui/components/KbxTemplateStateBoundary.vue
deleted file mode 100644
index e15f994f..00000000
--- a/frontend/src/shared/@kbx/ui/components/KbxTemplateStateBoundary.vue
+++ /dev/null
@@ -1,140 +0,0 @@
-<script setup lang="ts">
-/**
- * KBX Template State Boundary — v60
- * Manage loading, error, empty states
- */
-import type { KbxAsyncState } from '../contracts'
-
-withDefaults(
-  defineProps<{
-    state?: KbxAsyncState
-    refreshing?: boolean
-    errorRetryable?: boolean
-    idleActionLabel?: string
-  }>(),
-  {
-    state: 'ready',
-    refreshing: false,
-    errorRetryable: true,
-  }
-)
-
-defineEmits<{
-  retry: []
-  idleAction: []
-}>()
-</script>
-
-<template>
-  <div class="kbx-state-boundary">
-    <div v-if="state === 'loading'" class="kbx-state-boundary__state">
-      <div class="kbx-state-boundary__spinner" />
-      <p>로드 중...</p>
-    </div>
-
-    <div v-else-if="state === 'error'" class="kbx-state-boundary__state kbx-state-boundary__state--error">
-      <p>오류가 발생했습니다</p>
-      <button v-if="errorRetryable" @click="$emit('retry')">
-        다시 시도
-      </button>
-    </div>
-
-    <div v-else-if="state === 'empty'" class="kbx-state-boundary__state">
-      <p>데이터가 없습니다</p>
-      <button v-if="idleActionLabel" @click="$emit('idleAction')">
-        {{ idleActionLabel }}
-      </button>
-    </div>
-
-    <div v-else-if="state === 'idle'" class="kbx-state-boundary__state">
-      <p>조회할 데이터를 선택하세요</p>
-      <button v-if="idleActionLabel" @click="$emit('idleAction')">
-        {{ idleActionLabel }}
-      </button>
-    </div>
-
-    <div v-else class="kbx-state-boundary__content">
-      <div v-if="refreshing" class="kbx-state-boundary__overlay">
-        새로고침 중...
-      </div>
-      <slot />
-    </div>
-  </div>
-</template>
-
-<style scoped>
-.kbx-state-boundary {
-  position: relative;
-  min-height: 200px;
-}
-
-.kbx-state-boundary__state {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  min-height: 200px;
-  color: var(--kbx-color-text-muted);
-  gap: 12px;
-}
-
-.kbx-state-boundary__state--error {
-  color: var(--kbx-color-danger);
-}
-
-.kbx-state-boundary__spinner {
-  width: 24px;
-  height: 24px;
-  border: 2px solid rgba(0, 0, 0, 0.1);
-  border-top-color: var(--kbx-color-primary);
-  border-radius: 50%;
-  animation: spin 0.8s linear infinite;
-}
-
-.kbx-state-boundary__content {
-  position: relative;
-}
-
-.kbx-state-boundary__overlay {
-  position: absolute;
-  inset: 0;
-  background: rgba(255, 255, 255, 0.5);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 14px;
-  color: var(--kbx-color-text-muted);
-  z-index: 10;
-}
-
-button {
-  padding: 8px 16px;
-  border: 1px solid var(--kbx-color-border);
-  border-radius: 4px;
-  background: var(--kbx-color-surface);
-  cursor: pointer;
-  font-size: 14px;
-}
-
-button:hover {
-  background: var(--kbx-color-border);
-}
-
-@keyframes spin {
-  to { transform: rotate(360deg); }
-}
-
-@media (prefers-color-scheme: dark) {
-  .kbx-state-boundary__overlay {
-    background: rgba(0, 0, 0, 0.5);
-  }
-
-  button {
-    background: #374151;
-  }
-
-  button:hover {
-    background: #4b5563;
-  }
-}
-</style>
diff --git a/frontend/src/shared/@kbx/ui/components/KbxTextarea.vue b/frontend/src/shared/@kbx/ui/components/KbxTextarea.vue
deleted file mode 100644
index c7bd2d88..00000000
--- a/frontend/src/shared/@kbx/ui/components/KbxTextarea.vue
+++ /dev/null
@@ -1,109 +0,0 @@
-<script setup lang="ts">
-/**
- * KBX Textarea Component — v60
- */
-
-withDefaults(
-  defineProps<{
-    modelValue: string
-    placeholder?: string
-    label?: string
-    error?: string
-    required?: boolean
-    readonly?: boolean
-    disabled?: boolean
-    rows?: number
-  }>(),
-  {
-    modelValue: '',
-    rows: 3,
-  }
-)
-
-defineEmits<{
-  'update:modelValue': [value: string]
-  blur: []
-}>()
-</script>
-
-<template>
-  <div class="kbx-textarea-wrapper">
-    <label v-if="label" class="kbx-textarea__label">
-      {{ label }}
-      <span v-if="required" class="kbx-textarea__required">*</span>
-    </label>
-    <textarea
-      :value="modelValue"
-      :placeholder="placeholder"
-      :readonly="readonly"
-      :disabled="disabled"
-      :rows="rows"
-      :class="['kbx-textarea', { 'is-error': error }]"
-      @input="$emit('update:modelValue', ($event.target as HTMLTextAreaElement).value)"
-      @blur="$emit('blur')"
-    />
-    <div v-if="error" class="kbx-textarea__error">{{ error }}</div>
-  </div>
-</template>
-
-<style scoped>
-.kbx-textarea-wrapper {
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-}
-
-.kbx-textarea__label {
-  font-size: 13px;
-  font-weight: 500;
-  color: var(--kbx-color-text, #000);
-}
-
-.kbx-textarea__required {
-  color: var(--kbx-color-danger, #ef4444);
-  margin-left: 2px;
-}
-
-.kbx-textarea {
-  padding: 10px 12px;
-  border: 1px solid var(--kbx-color-border, #e5e7eb);
-  border-radius: 4px;
-  font-size: 14px;
-  font-family: inherit;
-  background: var(--kbx-color-surface, #fff);
-  color: var(--kbx-color-text, #000);
-  resize: vertical;
-}
-
-.kbx-textarea:focus {
-  outline: none;
-  border-color: var(--kbx-color-primary, #3b82f6);
-  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
-}
-
-.kbx-textarea:disabled {
-  background: var(--kbx-color-border, #e5e7eb);
-  opacity: 0.6;
-}
-
-.kbx-textarea.is-error {
-  border-color: var(--kbx-color-danger, #ef4444);
-}
-
-.kbx-textarea__error {
-  font-size: 12px;
-  color: var(--kbx-color-danger, #ef4444);
-}
-
-@media (prefers-color-scheme: dark) {
-  .kbx-textarea__label {
-    color: #f9fafb;
-  }
-
-  .kbx-textarea {
-    background: #1f2937;
-    border-color: #374151;
-    color: #f9fafb;
-  }
-}
-</style>
diff --git a/frontend/src/shared/@kbx/ui/components/KbxTransactionTemplate.vue b/frontend/src/shared/@kbx/ui/components/KbxTransactionTemplate.vue
deleted file mode 100644
index f5598da5..00000000
--- a/frontend/src/shared/@kbx/ui/components/KbxTransactionTemplate.vue
+++ /dev/null
@@ -1,158 +0,0 @@
-<script setup lang="ts">
-/**
- * KBX Transaction Template — v60 (T03)
- * Header + Detail transaction (Order, Purchase, Inventory Move, etc.)
- *
- * v52 Anatomy:
- * - headerTitle: Header 섹션 제목 (e.g., "주문 정보")
- * - headerDescription: Header 설명
- * - detailTitle: Detail 섹션 제목 (e.g., "주문 상품")
- * - detailDescription: Detail 설명
- * - detailCount: Detail 항목 수
- */
-import type { KbxValidationError } from '../contracts'
-import KbxSectionHeader from './KbxSectionHeader.vue'
-import KbxValidationSummary from './KbxValidationSummary.vue'
-
-withDefaults(
-  defineProps<{
-    headerTitle?: string
-    headerDescription?: string
-    detailTitle?: string
-    detailDescription?: string
-    detailCount?: number
-    detailCountUnit?: string
-    errors?: KbxValidationError[]
-    status?: string
-    dirty?: boolean
-  }>(),
-  {
-    headerTitle: '업무정보',
-    headerDescription: '',
-    detailTitle: '상세내역',
-    detailDescription: '',
-    detailCountUnit: '건',
-    errors: () => [],
-    status: '',
-    dirty: false,
-  }
-)
-
-defineEmits<{
-  command: [string]
-}>()
-</script>
-
-<template>
-  <div class="kbx-transaction-template">
-    <!-- Status/Error Feedback -->
-    <KbxValidationSummary v-if="errors.length" :errors="errors" />
-
-    <!-- Header Section -->
-    <section class="kbx-transaction-template__header" :aria-label="headerTitle">
-      <KbxSectionHeader
-        :title="headerTitle"
-        :description="headerDescription"
-      >
-        <template #actions>
-          <slot name="header-actions" />
-        </template>
-      </KbxSectionHeader>
-
-      <div class="kbx-transaction-template__header-body">
-        <slot name="header" />
-      </div>
-    </section>
-
-    <!-- Detail Section -->
-    <section class="kbx-transaction-template__detail" :aria-label="detailTitle">
-      <KbxSectionHeader
-        :title="detailTitle"
-        :count="detailCount"
-        :count-unit="detailCountUnit"
-        :description="detailDescription"
-      >
-        <template #actions>
-          <slot name="detail-actions" />
-        </template>
-      </KbxSectionHeader>
-
-      <div class="kbx-transaction-template__detail-body">
-        <slot name="detail" />
-      </div>
-    </section>
-
-    <!-- Summary Section (Optional) -->
-    <section v-if="$slots.summary" class="kbx-transaction-template__summary">
-      <slot name="summary" />
-    </section>
-  </div>
-</template>
-
-<style scoped>
-.kbx-transaction-template {
-  display: flex;
-  flex-direction: column;
-  gap: 24px;
-  height: 100%;
-  overflow: auto;
-}
-
-.kbx-transaction-template__header,
-.kbx-transaction-template__detail {
-  display: flex;
-  flex-direction: column;
-  border: 1px solid var(--kbx-color-border, #e5e7eb);
-  background: var(--kbx-color-surface, #fff);
-  border-radius: 4px;
-  overflow: hidden;
-}
-
-.kbx-transaction-template__header {
-  border-top: 3px solid var(--kbx-color-module-accent, #3b82f6);
-}
-
-.kbx-transaction-template__header :deep(.kbx-section-header),
-.kbx-transaction-template__detail :deep(.kbx-section-header) {
-  background: var(--kbx-color-section-heading, #f9fafb);
-  border-bottom: 1px solid var(--kbx-color-border, #e5e7eb);
-}
-
-.kbx-transaction-template__header-body,
-.kbx-transaction-template__detail-body {
-  padding: 16px;
-  flex: 1;
-  overflow: auto;
-}
-
-.kbx-transaction-template__detail {
-  min-height: 200px;
-}
-
-.kbx-transaction-template__summary {
-  padding: 12px 16px;
-  border-top: 1px solid var(--kbx-color-border, #e5e7eb);
-  background: var(--kbx-color-surface, #fff);
-  position: sticky;
-  bottom: 0;
-  z-index: 10;
-}
-
-@media (prefers-color-scheme: dark) {
-  .kbx-transaction-template__header,
-  .kbx-transaction-template__detail {
-    background: #1f2937;
-    border-color: #374151;
-  }
-
-  .kbx-transaction-template__header :deep(.kbx-section-header),
-  .kbx-transaction-template__detail :deep(.kbx-section-header) {
-    background: #111827;
-  }
-
-  .kbx-transaction-template__summary {
-    background: #1f2937;
-    border-top-color: #374151;
-  }
-}
-</style>
diff --git a/frontend/src/shared/@kbx/ui/components/KbxValidationSummary.vue b/frontend/src/shared/@kbx/ui/components/KbxValidationSummary.vue
deleted file mode 100644
index 655bf571..00000000
--- a/frontend/src/shared/@kbx/ui/components/KbxValidationSummary.vue
+++ /dev/null
@@ -1,81 +0,0 @@
-<script setup lang="ts">
-/**
- * KBX Validation Summary — v60 simplified
- * Display validation errors from forms
- */
-import type { KbxValidationError } from '../contracts'
-
-defineProps<{
-  errors: KbxValidationError[]
-}>()
-</script>
-
-<template>
-  <div v-if="errors.length" class="kbx-validation-summary">
-    <div class="kbx-validation-summary__header">
-      <span class="kbx-validation-summary__icon">⚠️</span>
-      <h3>{{ errors.length }}개 오류 발생</h3>
-    </div>
-    <ul class="kbx-validation-summary__list">
-      <li v-for="(error, idx) in errors" :key="idx" class="kbx-validation-summary__item">
-        <strong v-if="error.field">{{ error.field }}:</strong>
-        {{ error.message }}
-      </li>
-    </ul>
-  </div>
-</template>
-
-<style scoped>
-.kbx-validation-summary {
-  background: var(--kbx-color-danger-light, #fee2e2);
-  border: 1px solid var(--kbx-color-danger, #ef4444);
-  border-radius: 4px;
-  padding: 12px 16px;
-  margin-bottom: 12px;
-}
-
-.kbx-validation-summary__header {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  margin-bottom: 8px;
-}
-
-.kbx-validation-summary__icon {
-  font-size: 18px;
-}
-
-.kbx-validation-summary__header h3 {
-  margin: 0;
-  font-size: 14px;
-  font-weight: 600;
-  color: var(--kbx-color-danger, #ef4444);
-}
-
-.kbx-validation-summary__list {
-  margin: 0;
-  padding-left: 24px;
-  font-size: 13px;
-  color: var(--kbx-color-text, #000);
-  line-height: 1.6;
-}
-
-.kbx-validation-summary__item {
-  margin: 4px 0;
-}
-
-@media (prefers-color-scheme: dark) {
-  .kbx-validation-summary {
-    background: #7f1d1d;
-    border-color: #dc2626;
-  }
-
-  .kbx-validation-summary__header h3 {
-    color: #fca5a5;
-  }
-
-  .kbx-validation-summary__list {
-    color: #f9fafb;
-  }
-}
-</style>
diff --git a/frontend/src/shared/@kbx/ui/contracts.ts b/frontend/src/shared/@kbx/ui/contracts.ts
deleted file mode 100644
index 907a7487..00000000
--- a/frontend/src/shared/@kbx/ui/contracts.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-/**
- * Re-export contracts for UI components
- */
-export * from '../contracts'
diff --git a/frontend/src/shared/@kbx/ui/index.ts b/frontend/src/shared/@kbx/ui/index.ts
deleted file mode 100644
index 07d4c984..00000000
--- a/frontend/src/shared/@kbx/ui/index.ts
+++ /dev/null
@@ -1,50 +0,0 @@
-/**
- * @kbx/ui — KBX Foundation v60 UI Components
- * Phase 1 + Phase 2 + Phase 3.5 + Phase 4: Complete library
- */
-
-// Core Components (Phase 1)
-export { default as KbxSectionHeader } from './components/KbxSectionHeader.vue'
-export { default as KbxValidationSummary } from './components/KbxValidationSummary.vue'
-
-// Template Components (Phase 1)
-export { default as KbxTransactionTemplate } from './components/KbxTransactionTemplate.vue'
-export { default as KbxMasterTemplate } from './components/KbxMasterTemplate.vue'
-export { default as KbxQueueTemplate } from './components/KbxQueueTemplate.vue'
-export { default as KbxReconcileTemplate } from './components/KbxReconcileTemplate.vue'
-
-// Basic Components (Phase 2)
-export { default as KbxButton } from './components/KbxButton.vue'
-export { default as KbxStatusTag } from './components/KbxStatusTag.vue'
-
-// Form Fields (Phase 2)
-export { default as KbxInput } from './components/KbxInput.vue'
-export { default as KbxSelect } from './components/KbxSelect.vue'
-export { default as KbxDateField } from './components/KbxDateField.vue'
-export { default as KbxNumberField } from './components/KbxNumberField.vue'
-export { default as KbxTextarea } from './components/KbxTextarea.vue'
-export { default as KbxCheckbox } from './components/KbxCheckbox.vue'
-
-// Specialized Fields (Phase 4)
-export { default as KbxMoneyField } from './components/KbxMoneyField.vue'
-export { default as KbxQuantityField } from './components/KbxQuantityField.vue'
-export { default as KbxRadio } from './components/KbxRadio.vue'
-
-// Form Layout (Phase 4)
-export { default as KbxFormGrid } from './components/KbxFormGrid.vue'
-export { default as KbxFormSection } from './components/KbxFormSection.vue'
-
-// Composite Components (Phase 2)
-export { default as KbxDataGrid } from './components/KbxDataGrid.vue'
-export { default as KbxDialog } from './components/KbxDialog.vue'
-export { default as KbxDrawer } from './components/KbxDrawer.vue'
-export { default as KbxTabs } from './components/KbxTabs.vue'
-export { default as KbxLookup } from './components/KbxLookup.vue'
-
-// Wrapper Components (Phase 3.5)
-export { default as KbxScreenFrame } from './components/KbxScreenFrame.vue'
-export { default as KbxTemplateStateBoundary } from './components/KbxTemplateStateBoundary.vue'
-export { default as KbxSummaryBar } from './components/KbxSummaryBar.vue'
-
-// Re-export contracts for component usage
-export * from './contracts'
diff --git a/frontend/src/shared/auth/tests/routeAccess.spec.ts b/frontend/src/shared/auth/tests/routeAccess.spec.ts
index ef0aca80..7d4bb881 100644
--- a/frontend/src/shared/auth/tests/routeAccess.spec.ts
+++ b/frontend/src/shared/auth/tests/routeAccess.spec.ts
@@ -1,8 +1,5 @@
 import { describe, expect, it } from 'vitest'
 import { canAccessRoute } from '../routeAccess'
-import { router } from '../../../app/router'
-import { modelsDetailScreen, modelsListScreen } from '../../../features/models/registry'
-import { shadowRunDetailScreen, shadowRunListScreen } from '../../../features/shadow-run/registry'
 
 describe('route access contract', () => {
   it('allows routes without a declared permission', () => {
@@ -13,12 +10,4 @@ describe('route access contract', () => {
     expect(canAccessRoute({ permissions: ['model.read'] }, new Set())).toBe(false)
     expect(canAccessRoute({ permissions: ['model.read'] }, new Set(['model.read']))).toBe(true)
   })
-
-  it('keeps active ModelOps route metadata aligned with feature registries', () => {
-    const registered = [modelsListScreen, modelsDetailScreen, shadowRunListScreen, shadowRunDetailScreen]
-    for (const screen of registered) {
-      const route = router.getRoutes().find(candidate => candidate.path === screen.path)
-      expect(route?.meta.permissions).toEqual(screen.permissions)
-    }
-  })
 })
diff --git a/frontend/src/shared/composables/useKbxRegistry.ts b/frontend/src/shared/composables/useKbxRegistry.ts
deleted file mode 100644
index 48df26c2..00000000
--- a/frontend/src/shared/composables/useKbxRegistry.ts
+++ /dev/null
@@ -1,119 +0,0 @@
-/**
- * Composable: useKbxRegistry
- * Access screen registry, permissions, and density from components
- */
-
-import { computed, inject, ref } from 'vue'
-import type {
-  KbxScreenDefinition,
-  KbxPermissionDefinition,
-  KbxDensity,
-} from '@shared/contracts/kbx-types'
-
-// Reactive state
-const currentDensity = ref<KbxDensity>('compact')
-const userPermissions = ref<Set<string>>(new Set())
-
-export function useKbxRegistry() {
-  // Get injected registries
-  const screenRegistry = inject<Map<string, KbxScreenDefinition>>(
-    'kbx-screens',
-    new Map(),
-  )
-
-  const permissionRegistry = inject<Map<string, KbxPermissionDefinition>>(
-    'kbx-permissions',
-    new Map(),
-  )
-
-  // Screen methods
-  const getScreen = (screenId: string) => screenRegistry.get(screenId)
-
-  const getAllScreens = () => Array.from(screenRegistry.values())
-
-  const getScreenByModule = (module: string) =>
-    getAllScreens().filter(s => s.module === module)
-
-  // Permission methods
-  const hasPermission = (permissionId: string) => {
-    return userPermissions.value.has(permissionId)
-  }
-
-  const hasAllPermissions = (permissionIds: string[]) => {
-    return permissionIds.every(id => userPermissions.value.has(id))
-  }
-
-  const hasAnyPermission = (permissionIds: string[]) => {
-    return permissionIds.some(id => userPermissions.value.has(id))
-  }
-
-  const canAccessScreen = (screenId: string) => {
-    const screen = getScreen(screenId)
-    if (!screen) return false
-    return hasAllPermissions(screen.permissions)
-  }
-
-  // Density methods
-  const setDensity = (density: KbxDensity) => {
-    currentDensity.value = density
-    document.documentElement.style.setProperty('--kbx-density', density)
-
-    const tokens = {
-      compact: {
-        inputHeight: '34px',
-        gridRowHeight: '34px',
-        touchTarget: '44px',
-        fontSize: '12px',
-        controlHeight: '34px',
-      },
-      comfortable: {
-        inputHeight: '36px',
-        gridRowHeight: '36px',
-        touchTarget: '48px',
-        fontSize: '14px',
-        controlHeight: '36px',
-      },
-      touch: {
-        inputHeight: '48px',
-        gridRowHeight: '48px',
-        touchTarget: '52px',
-        fontSize: '16px',
-        controlHeight: '48px',
-      },
-    }
-
-    Object.entries(tokens[density]).forEach(([key, value]) => {
-      document.documentElement.style.setProperty(`--kbx-${key}`, value)
-    })
-  }
-
-  const getDensity = computed(() => currentDensity.value)
-
-  // Update user permissions
-  const setPermissions = (permissions: string[]) => {
-    userPermissions.value.clear()
-    permissions.forEach(p => userPermissions.value.add(p))
-  }
-
-  return {
-    // Screen access
-    getScreen,
-    getAllScreens,
-    getScreenByModule,
-    canAccessScreen,
-
-    // Permission access
-    hasPermission,
-    hasAllPermissions,
-    hasAnyPermission,
-    setPermissions,
-
-    // Density
-    setDensity,
-    getDensity,
-
-    // Registries
-    screenRegistry,
-    permissionRegistry,
-  }
-}
diff --git a/frontend/src/shared/contracts/kbx-types.ts b/frontend/src/shared/contracts/kbx-types.ts
deleted file mode 100644
index 786b202e..00000000
--- a/frontend/src/shared/contracts/kbx-types.ts
+++ /dev/null
@@ -1,148 +0,0 @@
-/**
- * KBX Foundation v4 Core Types
- * Single source of truth for screen definitions, permissions, and UI contracts
- */
-
-// Screen Definition (Registry Entry)
-export interface KbxScreenDefinition {
-  screenId: string              // e.g., "model-ops.shadow-run.list"
-  title: string                 // e.g., "Shadow Run Validation"
-  module: 'Home' | 'ModelOps' | 'SignalEngine' | 'Admin' | 'Research' | 'Operations' | 'Portfolio' | 'Design System' | 'Internal' | 'Other'
-  type: 'list' | 'detail' | 'form' | 'dashboard'
-  path: string                  // Vue Router path
-  component: () => Promise<any> // Lazy-loaded component
-  permissions: string[]         // Required permissions (e.g., ['model.read'])
-  description?: string          // Screen description
-  help?: KbxHelpDefinition
-  grid?: KbxGridDefinition
-  shortcuts?: KbxShortcut[]
-  telemetry?: { enabled: boolean }
-}
-
-// Grid Column Definition
-export interface KbxGridColumn<T = any> {
-  field: string | number | symbol
-  header: string
-  type?: 'text' | 'number' | 'date' | 'datetime' | 'percentage' | 'status' | 'link' | 'money' | 'quantity'
-  width?: number | string
-  pinned?: 'left' | 'right'
-  sortable?: boolean
-  filterable?: boolean
-  formatter?: (value: any, row: T) => string
-}
-
-// Grid Configuration
-export interface KbxGridDefinition {
-  columnDefs: KbxGridColumn[]
-  rowHeight?: number | 'auto'
-  pageSize?: number
-  serverSideDatasource?: boolean
-  theme?: string
-}
-
-// Search Field Definition
-export interface KbxSearchField {
-  key: string
-  label: string
-  type: 'text' | 'number' | 'date' | 'date-range' | 'select' | 'multi-select'
-  options?: Array<{ value: string | number; label: string }>
-  range?: { from: string; to: string } // for date-range
-  placeholder?: string
-  width?: 'sm' | 'md' | 'lg'
-}
-
-// Help Definition
-export interface KbxHelpDefinition {
-  title: string
-  sections: KbxHelpSection[]
-  relatedScreens?: string[]
-  externalUrl?: string
-}
-
-export interface KbxHelpSection {
-  title: string
-  content: string
-  icon?: string
-}
-
-// Permission Definition
-export interface KbxPermissionDefinition {
-  permissionId: string  // e.g., 'model.create'
-  label: string
-  description?: string
-  screens: string[]     // Which screens require this
-}
-
-// Command Definition (Actions)
-export interface KbxCommand {
-  id: string
-  label: string
-  group?: string        // 'query' | 'edit' | 'workflow' | 'output'
-  permission?: string
-  requiresSelection?: boolean
-  minSelection?: number
-  variant?: 'default' | 'primary' | 'danger'
-  shortcut?: string
-  icon?: string
-}
-
-// Keyboard Shortcut
-export interface KbxShortcut {
-  key: string           // 'F3', 'Ctrl+S', etc.
-  label: string
-  action: string
-}
-
-// Data State (Loading, Error, Empty)
-export type KbxAsyncState = 'idle' | 'pending' | 'ready' | 'error' | 'empty'
-
-// Grid Summary Item
-export interface KbxSummaryItem {
-  label: string
-  value: string | number
-  format?: 'number' | 'money' | 'quantity' | 'percentage'
-}
-
-// Quick Filter
-export interface KbxQuickFilterItem {
-  id: string
-  label: string
-  badge?: string | number
-  active?: boolean
-}
-
-// Screen Context (Breadcrumb, Parent Info)
-export interface KbxScreenContext {
-  parentScreenId?: string
-  breadcrumb?: string
-  contextData?: Record<string, any>
-}
-
-// Problem/Error Display
-export interface KbxProblem {
-  code: string
-  message: string
-  details?: string
-  recoveryActions?: string[]
-  retryable?: boolean
-}
-
-// Theme Configuration
-export interface KbxThemeConfig {
-  primary: string
-  secondary: string
-  danger: string
-  success: string
-  warning: string
-  info: string
-}
-
-// Density Token (UI Sizing)
-export type KbxDensity = 'compact' | 'comfortable' | 'touch'
-export interface KbxDensityTokens {
-  inputHeight: number
-  gridRowHeight: number
-  touchTarget: number
-  fontSize: number
-  controlHeight: number
-}
diff --git a/frontend/src/shared/ui/adapter/index.ts b/frontend/src/shared/ui/adapter/index.ts
index 2cee4f40..ab8cd974 100644
--- a/frontend/src/shared/ui/adapter/index.ts
+++ b/frontend/src/shared/ui/adapter/index.ts
@@ -1,14 +1,7 @@
 /**
- * KBX UI Adapter - Export all wrapped components
- * Single boundary: PrimeVue/AG Grid usage restricted to this module
+ * UI Adapter - Theme and density tokens
  */
 
-// Contracts & Types
-export * from '@shared/contracts/kbx-types'
-
-// Adapter Components (PrimeVue wrapped)
-
-// Density tokens
 export const densityTokens = {
   compact: {
     inputHeight: 34,
@@ -29,13 +22,3 @@ export const densityTokens = {
     fontSize: 16,
   },
 }
-
-// Theme configuration
-export const defaultTheme = {
-  primary: '#3b82f6',
-  secondary: '#6b7280',
-  danger: '#ef4444',
-  success: '#10b981',
-  warning: '#f59e0b',
-  info: '#06b6d4',
-}
diff --git a/frontend/src/shared/ui/components/KsListPage.vue b/frontend/src/shared/ui/components/KsListPage.vue
deleted file mode 100644
index 41616b40..00000000
--- a/frontend/src/shared/ui/components/KsListPage.vue
+++ /dev/null
@@ -1,53 +0,0 @@
-<script setup lang="ts">
-import type { KbxScreenDefinition, KbxAsyncState, KbxSummaryItem, KbxQuickFilterItem, KbxScreenContext } from '@shared/contracts/kbx-types'
-
-withDefaults(defineProps<{
-  screen: KbxScreenDefinition
-  dataState?: KbxAsyncState
-  loading?: boolean
-  selectionCount?: number
-  summaryItems?: KbxSummaryItem[]
-  quickFilters?: KbxQuickFilterItem[]
-  context?: KbxScreenContext | null
-  allowActions?: boolean
-}>(), { dataState: 'ready', loading: false, selectionCount: 0, summaryItems: () => [], quickFilters: () => [], context: null, allowActions: true })
-
-const emit = defineEmits<{ command: [commandId: string]; quickFilter: [filterId: string]; refresh: [] }>()
-</script>
-
-<template>
-  <div class="ks-list-page">
-    <header class="ks-list-page__header">
-      <div><h1>{{ screen.title }}</h1><p v-if="screen.description">{{ screen.description }}</p></div>
-      <div><slot name="header-actions" /></div>
-    </header>
-    <section v-if="screen.type" class="ks-list-page__search"><slot name="search" /></section>
-    <nav v-if="quickFilters.length" class="ks-list-page__quick-filters" aria-label="빠른 필터">
-      <button v-for="filter in quickFilters" :key="filter.id" type="button" :aria-pressed="filter.active" @click="emit('quickFilter', filter.id)">{{ filter.label }}<span v-if="filter.badge"> {{ filter.badge }}</span></button>
-    </nav>
-    <section v-if="context" class="ks-list-page__context"><slot name="context" /></section>
-    <main class="ks-list-page__content" :aria-busy="loading">
-      <div v-if="dataState === 'pending'">Loading data...</div>
-      <div v-else-if="dataState === 'empty'">No results found <button type="button" @click="emit('command', 'new')">Create New</button></div>
-      <div v-else-if="dataState === 'error'" role="alert">Error loading data <button type="button" @click="emit('refresh')">Retry</button></div>
-      <slot v-else name="content" />
-    </main>
-    <footer v-if="summaryItems.length" class="ks-list-page__footer">
-      <span v-if="selectionCount">{{ selectionCount }} item(s) selected</span>
-      <span v-for="item in summaryItems" :key="item.label"><strong>{{ item.label }}:</strong> {{ item.value }}</span>
-    </footer>
-  </div>
-</template>
-
-<style scoped>
-.ks-list-page { display:flex; flex-direction:column; height:100%; background:var(--ks-color-surface,#fff); }
-.ks-list-page__header,.ks-list-page__search,.ks-list-page__quick-filters,.ks-list-page__footer { padding:var(--ks-space-4); border-bottom:1px solid var(--ks-color-neutral-200); }
-.ks-list-page__header { display:flex; justify-content:space-between; gap:var(--ks-space-4); background:var(--ks-color-neutral-50); }
-.ks-list-page__header h1 { margin:0; }
-.ks-list-page__header p { margin:.5rem 0 0; color:var(--ks-color-text-muted); }
-.ks-list-page__quick-filters { display:flex; gap:var(--ks-space-2); overflow:auto; }
-.ks-list-page__quick-filters button { padding:.5rem .75rem; border:1px solid var(--ks-color-neutral-300); border-radius:var(--ks-radius-sm); background:#fff; }
-.ks-list-page__quick-filters button[aria-pressed='true'] { background:var(--ks-color-action); color:#fff; }
-.ks-list-page__content { flex:1; overflow:auto; }
-.ks-list-page__footer { display:flex; gap:var(--ks-space-4); flex-wrap:wrap; background:var(--ks-color-neutral-50); }
-</style>
diff --git a/frontend/src/shared/ui/components/index.ts b/frontend/src/shared/ui/components/index.ts
index 234ff46a..0e811bbf 100644
--- a/frontend/src/shared/ui/components/index.ts
+++ b/frontend/src/shared/ui/components/index.ts
@@ -1,3 +1,4 @@
+export { default as SkeletonLoader } from './SkeletonLoader.vue'
 export { default as KsButton } from './KsButton.vue'
 export { default as KsTextField } from './KsTextField.vue'
 export { default as KsTextArea } from './KsTextArea.vue'
@@ -14,7 +15,6 @@ export { default as KsInlineMessage } from './KsInlineMessage.vue'
 export { default as KsPaginator } from './KsPaginator.vue'
 export { default as KsTabs } from './KsTabs.vue'
 export { default as KsDataGrid } from './KsDataGrid.vue'
-export { default as KsListPage } from './KsListPage.vue'
 export { default as FieldShell } from './FieldShell.vue'
 export { default as KsDataContextHeader } from './KsDataContextHeader.vue'
 export { default as KsCommandBar } from './KsCommandBar.vue'
diff --git a/frontend/src/shared/ui/gridColumnAdapter.ts b/frontend/src/shared/ui/gridColumnAdapter.ts
index 88bc8df4..9251eaf2 100644
--- a/frontend/src/shared/ui/gridColumnAdapter.ts
+++ b/frontend/src/shared/ui/gridColumnAdapter.ts
@@ -1,20 +1 @@
-import type { KbxGridColumn } from '@shared/contracts/kbx-types'
-import type { UiGridColumn } from './adapter/contracts'
-
-/** Converts registry-owned KBX columns into the provider-neutral grid contract. */
-export function toUiGridColumns(columns: readonly KbxGridColumn[]): UiGridColumn[] {
-  return columns.map(column => {
-    if (typeof column.field !== 'string') {
-      throw new Error(`Grid column field must be a string: ${String(column.field)}`)
-    }
-
-    return {
-      field: column.field,
-      header: column.header,
-      width: typeof column.width === 'number' ? column.width : undefined,
-      sortable: column.sortable,
-      filterable: column.filterable,
-      formatter: column.formatter,
-    }
-  })
-}
+// Grid column utilities
diff --git a/frontend/src/shared/ui/tests/gridColumnAdapter.spec.ts b/frontend/src/shared/ui/tests/gridColumnAdapter.spec.ts
deleted file mode 100644
index 83f939f9..00000000
--- a/frontend/src/shared/ui/tests/gridColumnAdapter.spec.ts
+++ /dev/null
@@ -1,39 +0,0 @@
-import { describe, expect, it } from 'vitest'
-import { toUiGridColumns } from '../gridColumnAdapter'
-
-describe('toUiGridColumns', () => {
-  it('preserves the provider-neutral column semantics and formatter', () => {
-    const formatter = (value: unknown) => String(value ?? '')
-
-    expect(toUiGridColumns([{
-      field: 'modelId',
-      header: 'Model ID',
-      width: 150,
-      sortable: false,
-      filterable: true,
-      formatter,
-    }])).toEqual([{
-      field: 'modelId',
-      header: 'Model ID',
-      width: 150,
-      sortable: false,
-      filterable: true,
-      formatter,
-    }])
-  })
-
-  it('does not guess how string widths should be interpreted', () => {
-    expect(toUiGridColumns([{ field: 'name', header: 'Name', width: '20rem' }])).toEqual([{
-      field: 'name',
-      header: 'Name',
-      width: undefined,
-      sortable: undefined,
-      filterable: undefined,
-      formatter: undefined,
-    }])
-  })
-
-  it('rejects non-string fields before they reach an adapter', () => {
-    expect(() => toUiGridColumns([{ field: 1, header: 'Invalid' }])).toThrow('Grid column field must be a string')
-  })
-})