style(fe): standardize Tabs bar, Help button badge, and Header Quick Menu dropdown

frontend/src/shared/shell/KsHeader.vue

@@ -32,6 +32,14 @@ const handleSearch = () => {
   }
 }
 
+const onQuickSelect = (event: Event) => {
+  const target = event.target as HTMLSelectElement
+  if (target.value) {
+    router.push(target.value)
+    target.value = ''
+  }
+}
+
 const handleLogout = () => {
   console.log('로그아웃 처리')
   showUserMenu.value = false
@@ -85,23 +93,17 @@ const toggleTheme = () => {
         </div>
       </div>
 
-      <!-- Search bar -->
-      <div class="ks-header__search">
-        <input
-          v-model="searchQuery"
-          type="text"
-          class="ks-header__search-input"
-          placeholder="검색..."
-          @keyup.enter="handleSearch"
-        />
-        <button
-          type="button"
-          class="ks-header__search-btn"
-          aria-label="검색"
-          @click="handleSearch"
-        >
-          🔍
-        </button>
+      <!-- Quick Menu (빠른 메뉴) -->
+      <div class="ks-header__quick-menu" title="자주 찾는 화면 빠른 이동">
+        <span class="ks-header__quick-label">⚡ 빠른메뉴:</span>
+        <select class="ks-header__quick-select" aria-label="빠른 메뉴 이동" @change="onQuickSelect">
+          <option value="" disabled selected>주요 업무 화면 선택...</option>
+          <option value="/model-ops/models-master">📂 트레이딩 모델 마스터</option>
+          <option value="/ops/data-quality">📊 데이터 품질 검증</option>
+          <option value="/model-ops/shadow-runs">⚡ Shadow Run 실행/추적</option>
+          <option value="/approvals/workbench">📝 결재/승인 워크벤치</option>
+          <option value="/decisions/sell">📈 매도 의사결정 모니터링</option>
+        </select>
       </div>
 
       <!-- Right side actions -->
@@ -295,48 +297,39 @@ const toggleTheme = () => {
   color: var(--color-primary-500);
 }
 
-.ks-header__search {
+.ks-header__quick-menu {
   display: flex;
   align-items: center;
+  gap: var(--ks-space-2);
   flex: 1;
-  max-width: 300px;
-  background-color: var(--color-background-primary);
-  border: 1px solid var(--color-border-primary);
-  border-radius: var(--border-radius-base);
-  padding: 0 var(--spacing-3);
-  gap: var(--spacing-2);
+  max-width: 380px;
 }
 
-.ks-header__search-input {
+.ks-header__quick-label {
+  font-size: var(--ks-font-body);
+  font-weight: 700;
+  color: var(--ks-color-action);
+  white-space: nowrap;
+}
+
+.ks-header__quick-select {
   flex: 1;
-  border: none;
-  background: transparent;
-  outline: none;
-  color: var(--color-text-primary);
-  font-size: var(--font-size-sm);
-  padding: var(--spacing-2) 0;
-}
-
-.ks-header__search-input::placeholder {
-  color: var(--color-text-tertiary);
-}
-
-.ks-header__search-btn {
-  background: transparent;
-  border: none;
+  height: var(--ks-control-height);
+  padding: 0 var(--ks-space-2);
+  border: 1px solid var(--ks-color-neutral-300);
+  border-radius: var(--ks-radius-sm);
+  background: var(--ks-color-surface);
+  color: var(--ks-color-neutral-900);
+  font-size: var(--ks-font-body);
+  font-family: inherit;
   cursor: pointer;
-  font-size: 16px;
-  color: var(--color-primary-500);
-  padding: var(--spacing-1);
-  transition: all var(--transition-base);
+  box-sizing: border-box;
+  transition: all 0.15s ease;
 }
 
-.ks-header__search-btn:hover {
-  color: var(--color-primary-600);
-}
-
-.ks-header__search-btn:active {
-  color: var(--color-primary-700);
+.ks-header__quick-select:hover {
+  border-color: var(--ks-color-action);
+  background: #f8fafc;
 }
 
 .ks-header__end {

frontend/src/shared/shell/KsTabs.vue

@@ -126,19 +126,19 @@ const isTabActive = (tabId: string) => activeTabId.value === tabId
 .ks-tabs {
   display: flex;
   align-items: center;
-  height: var(--ks-shell-tabs-height);
-  background-color: var(--ks-color-surface);
-  border-bottom: 1px solid var(--ks-color-border);
+  height: 32px;
+  background-color: #f1f5f9;
+  border-bottom: 1px solid var(--ks-color-neutral-300);
   position: relative;
   overflow: visible;
-  gap: var(--ks-space-2);
-  padding: 0 var(--ks-space-4);
+  gap: var(--ks-space-1);
+  padding: 0 var(--ks-space-2);
   z-index: 50;
 }
 
 .ks-tabs__list {
   display: flex;
-  gap: var(--ks-space-2);
+  gap: 4px;
   flex: 1;
   min-width: 0;
   overflow-x: auto;
@@ -156,29 +156,31 @@ const isTabActive = (tabId: string) => activeTabId.value === tabId
   width: 150px;
   min-width: 150px;
   max-width: 150px;
-  background-color: var(--ks-color-neutral-100);
-  border: 1px solid var(--ks-color-border);
-  border-radius: var(--ks-radius-sm);
-  color: var(--ks-color-text-muted);
+  background-color: var(--ks-color-surface);
+  border: 1px solid var(--ks-color-neutral-300);
+  border-bottom: none;
+  border-radius: 4px 4px 0 0;
+  color: var(--ks-color-neutral-600);
   cursor: pointer;
-  font-size: var(--ks-font-grid);
+  font-size: var(--ks-font-body);
   white-space: nowrap;
   flex-shrink: 0;
   box-sizing: border-box;
-  transition: var(--ks-transition-fast);
+  transition: all 0.15s ease;
 }
 
 .ks-tabs__tab:hover {
-  background-color: var(--ks-color-neutral-200);
-  color: var(--ks-color-text);
+  background-color: #e0f2fe;
+  color: var(--ks-color-neutral-900);
 }
 
 .ks-tabs__tab--active {
-  background-color: var(--ks-color-surface);
+  background-color: #ffffff;
   color: var(--ks-color-action);
   border-color: var(--ks-color-action);
-  box-shadow: var(--ks-shadow-sm);
-  font-weight: 600;
+  border-top: 2px solid var(--ks-color-action);
+  font-weight: 700;
+  box-shadow: 0 -1px 3px rgba(0,0,0,0.05);
 }
 
 .ks-tabs__icon {