WIP(style): UI 컴포넌트 하드코딩 제거 및 CSS 통합 (진행 중)

- 작업 상태: 진행 중 (Work In Progress) - 주요 변경 사항: 1. CSS 파일 통합: HWModal, SWModal, ListFactory 등에서 인라인 스타일(style 속성) 전면 제거 및 클래스 기반으로 재작성 2. 폰트/타이포그래피 스케일업: 최소 폰트 14px 기준으로 전체 텍스트 크기 상향 및 굵기(font-weight) 상향 조정 3. GNB(상단바) 레이아웃 개편: 2단 구조(로고 라인 / 메뉴 라인)로 변경 및 카테고리 텍스트 라벨 생략을 통한 간결화 4. 로고 이미지 교체: image 92.png로 업데이트 및 경로 정리 5. 디자인 가이드 분리: README에서 design_rule.md로 디자인 정책 문서 독립 * 참고: 현재 디자인 검토를 위한 중간 반영 상태이며, 피드백에 따라 추가 수정 예정임.
2026-06-12 15:57:20 +09:00
parent 56abdddbc7
commit b169176d57
12 changed files with 420 additions and 302 deletions
--- a/README.md
+++ b/README.md
@@ -28,29 +28,8 @@

 ### 🎨 ITAM 시스템 디자인 가이드 (Design Guide)

-1.  **디자인 철학 (Design Philosophy)**
-    *   **Minimalist & Border-based**: 불필요한 박스(Card) 사용을 최소화하고, 정보의 구분은 간결한 라인(Border/Divider)을 활용하여 시각적 피로도를 낮춥니다.
-    *   **Professional Achromatic**: 무채색(Black, White, Grey)을 기본으로 하여 정돈된 업무 환경을 제공합니다.
-    *   **Green Accent**: 블루 대신 짙은 그린(`#1E5149`)을 포인트 컬러로 사용하여 차분한 전문성을 강조합니다.
+디자인 일관성 및 시각적 원칙에 관한 상세 내용은 아래 문서를 참조하십시오.

-2.  **타이포그래피 (Typography)**
-    *   **Font Family**: `Pretendard` (전역 적용)
-    *   **Letter Spacing**: `-0.02em` (약 -2%) 적용. 자간을 좁게 설정하여 밀도 있고 세련된 가독성을 확보합니다.
-    *   **Weights**: 400(Regular), 500(Medium), 600(SemiBold), 700(Bold).
+👉 **[디자인 가이드 바로가기 (design_rule.md)](./design_rule.md)**

-3.  **컬러 팔레트 (Color Palette)**
-    *   **Point Color**: `#1E5149` (Deep Green) - 강조, 활성화 상태, 주요 액션 버튼.
-    *   **Text**: Main(`#111827` - Near Black), Muted(`#6B7280` - Grey).
-    *   **Border/Divider**: `#E5E7EB` (Light Grey) - 정보 구분을 위한 얇은 실선.
-    *   **Background**: `#FFFFFF` (White) / `#F9FAFB` (Off White).
-
-4.  **레이아웃 및 컴포넌트 규칙 (Layout Rules)**
-    *   **Box-less Design**: 꼭 필요한 정보 묶음(데이터 그룹화 등)이 아니면 박스 형태의 테두리나 배경 사용을 지양합니다.
-    *   **Line-based Division**: 섹션 간의 구분은 1px 두께의 얇은 실선(Border)을 통해 명확히 합니다.
-    *   **Table**: 배경색이나 화려한 효과 없이 행(Row) 간의 얇은 구분선만 사용하여 데이터 본연에 집중하게 합니다.
-    *   **Input/Button**: 입력 필드와 버튼은 최소한의 보더와 포인트 컬러만 사용하여 정갈하게 표현합니다.
-    *   **Modal (모달 공통 규칙)**:
-        *   **Header**: 짙은 그린(`#1E5149`) 배경에 화이트 텍스트를 사용하며, 우측 상단에 명확한 'X' 닫기 버튼을 배치합니다.
-        *   **Interaction**: 사용자의 오입력(실수로 바깥을 클릭하여 입력 내용이 날아가는 현상)을 방지하기 위해 **모달 바깥 영역(Overlay) 클릭 시 모달이 닫히지 않도록** 설정합니다. 닫기는 오직 'ESC' 키 또는 명시적인 'X' 및 '닫기' 버튼을 통해서만 가능합니다.
-        *   **Layout**: `detail.png` 기준의 2열 그리드 시스템을 권장하며, 하단 우측에 액션 버튼(닫기, 저장 등)을 배치합니다.

--- a/design_rule.md
+++ b/design_rule.md
@@ -0,0 +1,32 @@
+# 🎨 ITAM 시스템 디자인 가이드 (Design Guide)
+
+본 문서는 ITAM(IT Asset Management System)의 시각적 일관성과 사용자 경험을 유지하기 위한 핵심 디자인 원칙을 정의합니다.
+
+---
+
+### 1. 디자인 철학 (Design Philosophy)
+*   **Minimalist & Border-based**: 불필요한 박스(Card) 사용을 최소화하고, 정보의 구분은 간결한 라인(Border/Divider)을 활용하여 시각적 피로도를 낮춥니다.
+*   **Professional Achromatic**: 무채색(Black, White, Grey)을 기본으로 하여 정돈된 업무 환경을 제공합니다.
+*   **Green Accent**: 블루 대신 짙은 그린(`#1E5149`)을 포인트 컬러로 사용하여 차분한 전문성을 강조합니다.
+
+### 2. 타이포그래피 (Typography)
+*   **Font Family**: `Pretendard` (전역 적용)
+*   **Letter Spacing**: `-0.02em` (약 -2%) 적용. 자간을 좁게 설정하여 밀도 있고 세련된 가독성을 확보합니다.
+*   **Weights**: 400(Regular), 500(Medium), 600(SemiBold), 700(Bold), 800(ExtraBold).
+
+### 3. 컬러 팔레트 (Color Palette)
+*   **Point Color**: `#1E5149` (Deep Green) - 강조, 활성화 상태, 주요 액션 버튼.
+*   **Text**: Main(`#111827` - Near Black), Muted(`#6B7280` - Grey).
+*   **Border/Divider**: `#E5E7EB` (Light Grey) - 정보 구분을 위한 얇은 실선.
+*   **Background**: `#FFFFFF` (White) / `#F9FAFB` (Off White).
+
+### 4. 레이아웃 및 컴포넌트 규칙 (Layout Rules)
+*   **Box-less Design**: 꼭 필요한 정보 묶음(데이터 그룹화 등)이 아니면 박스 형태의 테두리나 배경 사용을 지양합니다.
+*   **Line-based Division**: 섹션 간의 구분은 1px 두께의 얇은 실선(Border)을 통해 명확히 합니다.
+*   **Table**: 배경색이나 화려한 효과 없이 행(Row) 간의 얇은 구분선만 사용하여 데이터 본연에 집중하게 합니다.
+*   **Input/Button**: 입력 필드와 버튼은 최소한의 보더와 포인트 컬러만 사용하여 정갈하게 표현합니다.
+    *   **Standard Height**: 입력창 및 선택창은 전역 표준인 `38px`를 유지합니다.
+*   **Modal (모달 공통 규칙)**:
+    *   **Header**: 짙은 그린(`#1E5149`) 배경에 화이트 텍스트를 사용하며, 우측 상단에 명확한 'X' 닫기 버튼을 배치합니다.
+    *   **Interaction**: 사용자의 오입력(실수로 바깥을 클릭하여 입력 내용이 날아가는 현상)을 방지하기 위해 **모달 바깥 영역(Overlay) 클릭 시 모달이 닫히지 않도록** 설정합니다. 닫기는 오직 'ESC' 키 또는 명시적인 'X' 및 '닫기' 버튼을 통해서만 가능합니다.
+    *   **Layout**: 2열 그리드 시스템을 권장하며, 하단 우측에 액션 버튼(닫기, 저장 등)을 배치합니다.
--- a/img/image_92.png
+++ b/img/image_92.png
--- a/src/components/Modal/HWModal.ts
+++ b/src/components/Modal/HWModal.ts
@@ -22,39 +22,6 @@ class HwAssetModal extends BaseModal {

  protected renderFrameHTML(): string {
    return `
-      <style>
-        .autocomplete-list {
-          position: absolute;
-          top: 100%;
-          left: 0;
-          right: 0;
-          max-height: 150px;
-          overflow-y: auto;
-          background-color: white;
-          border: 1px solid var(--border-color, #E2E8F0);
-          border-top: none;
-          border-radius: 0 0 4px 4px;
-          z-index: 1000;
-          box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
-        }
-        .autocomplete-item {
-          padding: 8px 12px;
-          font-size: 13px;
-          color: #334155;
-          cursor: pointer;
-          white-space: nowrap;
-          overflow: hidden;
-          text-overflow: ellipsis;
-        }
-        .autocomplete-item:hover {
-          background-color: #F1F5F9;
-          color: #1E5149;
-          font-weight: 600;
-        }
-        .hidden {
-          display: none !important;
-        }
-      </style>
      <div id="hw-asset-modal" class="modal-overlay hidden">
        <div class="modal-content wide">
          <div class="modal-header">
@@ -100,14 +67,14 @@ class HwAssetModal extends BaseModal {
                  </div>
                  <div class="form-group">
                    <label>${ASSET_SCHEMA.SERVICE_TYPE.ui}</label>
-                    <select id="hw-service_type" name="service_type" style="${inputStyle}">
+                    <select id="hw-service_type" name="service_type">
                      <option value="외부">외부</option>
                      <option value="내부">내부</option>
                    </select>
                  </div>
-                  <div class="form-group full-width" style="grid-column: span 2;">
+                  <div class="form-group full-width">
                    <label>${ASSET_SCHEMA.ASSET_PURPOSE.ui}</label>
-                    <input type="text" id="hw-asset_purpose" name="asset_purpose" placeholder="자산의 용도를 입력하세요" style="${inputStyle} width: 100%;" />
+                    <input type="text" id="hw-asset_purpose" name="asset_purpose" placeholder="자산의 용도를 입력하세요" />
                  </div>
                  <div class="form-group infra-only monitoring-field">
                    <label>${ASSET_SCHEMA.MONITORING.ui}</label>
@@ -118,18 +85,18 @@ class HwAssetModal extends BaseModal {
                  </div>

                  <!-- [SECTION 2] 조직 및 사용자 정보 -->
-                  <div class="form-section-title" style="margin-top: 24px; margin-bottom: 12px;">사용자 및 조직 정보</div>
-                  <div class="form-group">
+                  <div class="form-section-title org-user-section">사용자 및 조직 정보</div>
+                  <div class="form-group org-user-field">
                    <label>${ASSET_SCHEMA.CURRENT_DEPT.ui}</label>
                    <select id="hw-current_dept" name="current_dept">${generateOptionsHTML(ORG_LIST)}</select>
                  </div>
-                  <div class="form-group">
+                  <div class="form-group org-user-field">
                    <label>${ASSET_SCHEMA.MANAGER_MAIN.ui}</label>
                    <input type="text" id="hw-manager_primary" name="manager_primary" />
                  </div>
                  <div class="form-group">
                    <label>${ASSET_SCHEMA.MANAGER_SUB.ui}</label>
-                    <input type="text" id="hw-manager_secondary" name="manager_secondary" style="${inputStyle}" />
+                    <input type="text" id="hw-manager_secondary" name="manager_secondary" />
                  </div>
                  <div class="form-group personal-only">
                    <label>${ASSET_SCHEMA.CURRENT_USER.ui}</label>
@@ -164,17 +131,17 @@ class HwAssetModal extends BaseModal {
                  </div>
                  <div class="form-group spec-only" style="position: relative;">
                    <label>${ASSET_SCHEMA.CPU.ui}</label>
-                    <input type="text" id="hw-cpu" name="cpu" autocomplete="off" placeholder="CPU 부품 검색..." style="${inputStyle}" />
+                    <input type="text" id="hw-cpu" name="cpu" autocomplete="off" placeholder="CPU 부품 검색..." />
                    <div id="hw-cpu-autocomplete" class="autocomplete-list hidden"></div>
                  </div>
                  <div class="form-group spec-only" style="position: relative;">
                    <label>${ASSET_SCHEMA.RAM.ui}</label>
-                    <input type="text" id="hw-ram" name="ram" autocomplete="off" placeholder="RAM 부품 검색..." style="${inputStyle}" />
+                    <input type="text" id="hw-ram" name="ram" autocomplete="off" placeholder="RAM 부품 검색..." />
                    <div id="hw-ram-autocomplete" class="autocomplete-list hidden"></div>
                  </div>
                  <div class="form-group spec-only" style="position: relative;">
                    <label>${ASSET_SCHEMA.GPU.ui}</label>
-                    <input type="text" id="hw-gpu" name="gpu" autocomplete="off" placeholder="GPU 부품 검색..." style="${inputStyle}" />
+                    <input type="text" id="hw-gpu" name="gpu" autocomplete="off" placeholder="GPU 부품 검색..." />
                    <div id="hw-gpu-autocomplete" class="autocomplete-list hidden"></div>
                  </div>
                  <div class="form-group spec-only">
@@ -183,7 +150,7 @@ class HwAssetModal extends BaseModal {
                  </div>
                  <div class="form-group spec-only">
                    <label>성능 등급</label>
-                    <div id="hw-pc-grade-container" style="display: flex; align-items: center; height: 38px;">
+                    <div id="hw-pc-grade-container" class="grade-badge-container">
                      <span class="badge b-yellow" id="hw-pc-grade-badge">-</span>
                    </div>
                  </div>
@@ -266,7 +233,10 @@ class HwAssetModal extends BaseModal {
              <div class="modal-history-area">
                <div class="history-header">
                  <h3>자산 변동 이력</h3>
-                  <button type="button" id="btn-add-hw-log" class="btn btn-outline btn-sm">이력 추가</button>
+                  <div class="history-actions">
+                    <button type="button" id="btn-view-asset-flow" class="btn btn-outline btn-sm">흐름 보기</button>
+                    <button type="button" id="btn-add-hw-log" class="btn btn-outline btn-sm">이력 추가</button>
+                  </div>
                </div>
                <div id="hw-history-list" class="history-timeline"></div>
              </div>
--- a/src/components/Navigation.ts
+++ b/src/components/Navigation.ts
@@ -24,93 +24,111 @@ const MENU_CONFIG: any = {
 };

 export function renderNavigation(onTabChange: (tab: string) => void) {
-  const navContainer = document.getElementById('main-nav')!;
+  const headerContainer = document.querySelector('.header-container')!;
+  if (!headerContainer) return;

  const render = () => {
-    navContainer.innerHTML = '';
+    // 1. 헤더 레이아웃 구조 생성
+    headerContainer.innerHTML = `
+      <!-- [TOP ROW] 로고 및 사용자 액션 -->
+      <div class="header-top-row">
+        <div class="brand" id="btn-home-logo" style="cursor: pointer;">
+          <img src="img/image_92.png" class="main-logo" alt="HM Logo" />
+          <h1>IT 자산 통합 관리 <span class="sub-title">ITAM</span></h1>
+        </div>
+        <div class="header-actions">
+          <div class="role-switcher">
+            <span class="role-label user ${state.currentUserRole === 'user' ? 'active' : ''}">실무자</span>
+            <label class="switch">
+              <input type="checkbox" id="role-toggle-checkbox" ${state.currentUserRole === 'admin' ? 'checked' : ''}>
+              <span class="slider"></span>
+            </label>
+            <span class="role-label admin ${state.currentUserRole === 'admin' ? 'active' : ''}">관리자</span>
+          </div>
+          <div class="notification-area">
+             <button class="icon-btn" title="알림"><i data-lucide="bell" style="width:18px; height:18px;"></i></button>
+          </div>
+        </div>
+      </div>
+
+      <!-- [BOTTOM ROW] 통합 내비게이션 (2단 메뉴) -->
+      <div class="header-bottom-row">
+        <nav class="integrated-nav" id="main-nav-list"></nav>
+      </div>
+    `;
+
+    const navList = document.getElementById('main-nav-list')!;
    
-    // 기존 메뉴 렌더링
+    // 2. 메뉴 그룹화 및 렌더링 (대분류 제목 제외, 간격으로 구분)
    (Object.keys(MENU_CONFIG) as Array<keyof typeof MENU_CONFIG>).forEach(catKey => {
      const config = MENU_CONFIG[catKey];
      
-      // 역할에 따라 노출할 서브탭 필터링
      const visibleTabs = config.tabs.filter((tab: string) => {
-        if (state.currentUserRole === 'admin') {
-          // 관리자(admin)일 경우 대시보드 탭만 노출
-          return tab === '대시보드';
-        } else {
-          // 실무자(user)일 경우 대시보드 제외한 모든 탭 노출
-          return tab !== '대시보드';
-        }
+        if (state.currentUserRole === 'admin') return tab === '대시보드';
+        return tab !== '대시보드';
      });

-      // 노출할 서브탭이 없으면 해당 대분류 GNB 메뉴도 렌더링하지 않음
-      if (visibleTabs.length === 0) {
-        return;
-      }
-
-      const isActive = state.activeCategory === catKey;
+      if (visibleTabs.length === 0) return;

      const group = document.createElement('div');
-      group.className = `nav-group ${isActive ? 'active is-showing-shelf' : ''}`;
+      group.className = 'nav-group';
      
-      const trigger = document.createElement('div');
-      trigger.className = 'gnb-trigger';
-      trigger.textContent = config.label;
+      const itemsContainer = document.createElement('div');
+      itemsContainer.className = 'nav-group-items';

-      trigger.addEventListener('click', () => {
-        if (state.activeCategory !== catKey) {
-          state.activeCategory = catKey as any;
-          const firstTab = visibleTabs[0] || config.tabs[0];
-          state.activeSubTab = firstTab;
-          render();
-          onTabChange(firstTab);
-        }
-      });
-      group.appendChild(trigger);
-
-      const shelf = document.createElement('div');
-      shelf.className = 'lnb-shelf';
-      
      visibleTabs.forEach((tab: string) => {
-        if (tab === '부품 마스터') return; // 메뉴바에서 표시 생략
+        if (tab === '부품 마스터') return;
        const item = document.createElement('div');
-        item.className = `lnb-item ${isActive && state.activeSubTab === tab ? 'active' : ''}`;
+        const isActive = state.activeSubTab === tab;
+        item.className = `gnb-trigger ${isActive ? 'active' : ''}`;
        item.textContent = tab;
        
        item.addEventListener('click', (e) => {
          e.stopPropagation();
          state.activeCategory = catKey as any;
          state.activeSubTab = tab;
-          render();
+          render(); // 재렌더링하여 활성 상태 반영
          onTabChange(tab);
        });
-        shelf.appendChild(item);
+        itemsContainer.appendChild(item);
      });
-      group.appendChild(shelf);
-      navContainer.appendChild(group);
+      
+      group.appendChild(itemsContainer);
+      navList.appendChild(group);
    });

-    // ─── '관리자' 메뉴 별도 추가 (GNB 스타일 - 관리자 역할일 때만 노출) ───
+    // 3. 관리자 전용 '관리도구' (원래 '관리자' 메뉴)
    if (state.currentUserRole === 'admin') {
      const adminGroup = document.createElement('div');
      adminGroup.className = 'nav-group';
-      
      const adminTrigger = document.createElement('div');
-      adminTrigger.className = 'gnb-trigger';
-      adminTrigger.innerHTML = '관리자';
-      adminTrigger.style.color = 'var(--text-muted)';
-      adminTrigger.style.borderLeft = '1px solid var(--border-color)';
-      adminTrigger.style.marginLeft = '1rem';
-      adminTrigger.style.paddingLeft = '1.5rem';
-      
-      adminTrigger.addEventListener('click', () => {
-        window.open('/map_editor.html', '_blank');
-      });
-      
+      adminTrigger.className = 'gnb-trigger admin-trigger';
+      adminTrigger.innerHTML = '관리도구';
+      adminTrigger.addEventListener('click', () => window.open('/map_editor.html', '_blank'));
      adminGroup.appendChild(adminTrigger);
-      navContainer.appendChild(adminGroup);
+      navList.appendChild(adminGroup);
    }
+
+    // 4. 이벤트 바인딩 (로고 클릭 및 역할 전환)
+    document.getElementById('btn-home-logo')?.addEventListener('click', () => location.reload());
+    
+    const roleToggle = document.getElementById('role-toggle-checkbox') as HTMLInputElement;
+    roleToggle?.addEventListener('change', () => {
+      state.currentUserRole = roleToggle.checked ? 'admin' : 'user';
+      if (state.currentUserRole === 'admin') {
+        state.activeCategory = 'hw';
+        state.activeSubTab = '대시보드';
+      } else {
+        state.activeCategory = 'hw';
+        state.activeSubTab = '서버';
+      }
+      render();
+      onTabChange(state.activeSubTab);
+    });
+
+    // 아이콘 생성
+    // @ts-ignore
+    if (window.lucide) window.lucide.createIcons();
  };

  render();
--- a/src/main.ts
+++ b/src/main.ts
@@ -17,21 +17,23 @@ import { createIcons, Plus, X, LayoutDashboard, Monitor, Server, Database, Lapto


 // 화면 갱신 통합 핸들러
-function refreshView() {
+function refreshView(tab?: string) {
  const mainContent = document.getElementById('main-content')!;
  if (!mainContent) return;

-  if (state.activeSubTab === '대시보드') {
+  const activeTab = tab || state.activeSubTab;
+
+  if (activeTab === '대시보드') {
    renderDashboard(mainContent);
    return;
  }

  // 서버 탭이 아닐 경우 '자산현황(위치)' 뷰 진입 방지 및 강제 리스트 모드 전환
-  if (state.activeSubTab !== '서버' && state.viewMode === 'location') {
+  if (activeTab !== '서버' && state.viewMode === 'location') {
    state.viewMode = 'list';
  }

-  const isServerTab = state.activeSubTab === '서버';
+  const isServerTab = activeTab === '서버';
  
  mainContent.innerHTML = `
    <div class="view-header">
@@ -206,35 +208,19 @@ function initRoleSwitcher() {
 function initializeAppDirectly() {
  const loginContainer = document.getElementById('login-container');
  const appLayout = document.getElementById('app-layout');
-  const checkbox = document.getElementById('role-toggle-checkbox') as HTMLInputElement;
-  const userLabel = document.querySelector('.role-label.user');
-  const adminLabel = document.querySelector('.role-label.admin');

  // 기본 권한 설정: 실무자 (User)
  state.currentUserRole = 'user';
  state.activeCategory = 'hw';
  state.activeSubTab = '서버'; // 실무자 기본 탭

-  // UI 상태 동기화
-  if (checkbox) checkbox.checked = false;
-  if (userLabel) userLabel.classList.add('active');
-  if (adminLabel) adminLabel.classList.remove('active');
-  document.body.classList.remove('admin-mode');
-
  // 화면 전환
  if (loginContainer) loginContainer.style.display = 'none';
  if (appLayout) appLayout.style.display = 'flex';

-  // 앱 초기화
-  initRoleSwitcher();
+  // 앱 초기화 및 내비게이션(헤더 포함) 렌더링
  initApp();
-
-  // 로고 클릭 시 새로고침 (초기 화면 복귀 효과)
-  const brand = document.querySelector('.brand') as HTMLElement;
-  if (brand) {
-    brand.style.cursor = 'pointer';
-    brand.onclick = () => location.reload();
-  }
+  renderNavigation((tab) => refreshView(tab));
 }

 document.addEventListener('DOMContentLoaded', initializeAppDirectly);
--- a/src/styles/common.css
+++ b/src/styles/common.css
@@ -45,7 +45,7 @@
  --white: #FFFFFF;
  --danger: var(--color-red);
  --success: var(--color-green);
-  --header-height: 52px;
+  --header-height: auto;
 }

 * {
@@ -60,7 +60,7 @@ body {
  color: var(--text-main);
  background-color: var(--bg-color);
  line-height: 1.5;
-  font-size: 14px;
+  font-size: 19px;
  overflow: hidden;
 }

@@ -76,45 +76,50 @@ body {
  background-color: var(--white);
  border-bottom: 1px solid var(--border-color);
  z-index: 100;
-  height: var(--header-height);
+  height: auto;
  flex-shrink: 0;
 }

 .header-container {
  height: 100%;
  display: flex;
+  flex-direction: column;
+  padding: 0;
+}
+
+.header-top-row {
+  height: 52px;
+  display: flex;
  align-items: center;
  padding: 0 1.5rem;
-  gap: 1.5rem;
+  justify-content: space-between;
+  border-bottom: 1px solid #f3f4f6;
+}
+
+.header-bottom-row {
+  height: 48px;
+  display: flex;
+  align-items: center;
+  padding: 0 1.5rem;
+  background-color: var(--bg-light);
+  border-bottom: 1px solid var(--border-color);
 }

 .brand { display: flex; align-items: center; gap: 0.75rem; }
 .main-logo { height: 34px; width: auto; }
-.brand h1 { font-size: 1.1rem; font-weight: 800; color: var(--text-main); white-space: nowrap; }
-.brand h1 .sub-title { font-size: 0.85rem; color: var(--primary-color); font-weight: 600; margin-left: 0.25rem; }
+.brand h1 { font-size: 1.47rem; font-weight: 900; color: var(--text-main); white-space: nowrap; }
+.brand h1 .sub-title { font-size: 1.13rem; color: var(--primary-color); font-weight: 700; margin-left: 0.25rem; }

-.integrated-nav { flex: 1; height: 100%; display: flex; align-items: center; gap: 0.25rem; overflow: hidden; }
+.integrated-nav { flex: 1; height: 100%; display: flex; align-items: center; gap: 2.5rem; overflow: hidden; }
 .nav-group { display: flex; align-items: center; height: 100%; position: relative; flex-shrink: 0; }
-.gnb-trigger { font-size: 14px; font-weight: 700; color: var(--text-muted); padding: 0 0.75rem; cursor: pointer; height: 100%; display: flex; align-items: center; white-space: nowrap; transition: color 0.2s; }
-.nav-group.active .gnb-trigger, .nav-group:hover .gnb-trigger { color: var(--text-main); }
-.lnb-shelf { display: none; align-items: center; gap: 0.2rem; padding: 0 0.5rem; height: 60%; border-left: 1px solid var(--border-color); margin-left: 0.2rem; }
-
-/* 기본적으로 활성 탭의 서브메뉴 표시 */
-.nav-group.active.is-showing-shelf .lnb-shelf { display: flex; }
-
-/* GNB 전체 영역에 마우스가 올라가면 활성 탭의 서브메뉴를 일단 숨김 (다른 메뉴 탐색 우선) */
-.integrated-nav:hover .nav-group.active.is-showing-shelf .lnb-shelf { display: none; }
-
-/* 마우스가 올라간 메뉴의 서브메뉴만 표시 */
-.nav-group:hover .lnb-shelf { display: flex !important; }
-
-.lnb-item { font-size: 13px; font-weight: 500; color: var(--text-muted); cursor: pointer; padding: 0.2rem 0.6rem; border-radius: 4px; white-space: nowrap; transition: all 0.2s; }
-.lnb-item:hover { color: var(--primary-color); background-color: var(--primary-light); }
-.lnb-item.active { color: var(--primary-color); background-color: var(--primary-light); font-weight: 700; }
+.nav-group-items { display: flex; align-items: center; gap: 0.25rem; height: 100%; }
+.gnb-trigger { font-size: 17px; font-weight: 800; color: var(--text-muted); padding: 0 0.75rem; cursor: pointer; height: 100%; display: flex; align-items: center; white-space: nowrap; transition: color 0.2s; border-bottom: 3px solid transparent; }
+.gnb-trigger:hover { color: var(--text-main); }
+.gnb-trigger.active { color: var(--primary-color); font-weight: 900; border-bottom-color: var(--primary-color); background-color: var(--primary-lv-0); }

 .header-actions { display: flex; align-items: center; gap: 1rem; }
 .role-switcher { display: flex; align-items: center; gap: 0.75rem; padding: 0 0.75rem; border-right: 1px solid var(--border-color); height: 24px; }
-.role-label { font-size: 11px; font-weight: 700; color: var(--text-muted); }
+.role-label { font-size: 15px; font-weight: 800; color: var(--text-muted); }
 .role-label.active { color: var(--primary-color); }
 .switch { position: relative; display: inline-block; width: 34px; height: 18px; }
 .switch input { opacity: 0; width: 0; height: 0; }
@@ -149,12 +154,12 @@ input:checked + .slider:before { transform: translateX(16px); }
 /* --- View Toggle --- */
 .view-toggle-container { margin-bottom: 1rem; display: flex; justify-content: flex-start; }
 .view-toggle { display: inline-flex; background-color: var(--primary-lv-0); padding: 4px; border-radius: 8px; border: 1px solid var(--border-color); }
-.toggle-btn { padding: 6px 16px; font-size: 13px; font-weight: 600; color: var(--text-muted); background: none; border: none; border-radius: 6px; cursor: pointer; }
+.toggle-btn { padding: 6px 16px; font-size: 17px; font-weight: 700; color: var(--text-muted); background: none; border: none; border-radius: 6px; cursor: pointer; }
 .toggle-btn.active { background-color: var(--white); color: var(--primary-color); box-shadow: 0 2px 4px rgba(0,0,0,0.05); }

 /* --- System Status List (Docker Style) --- */
 .system-status-list { display: flex; flex-direction: column; gap: 0.5rem; }
-.system-list-header { display: flex; align-items: center; padding: 0.75rem 1.25rem; background-color: var(--bg-light); border-bottom: 1px solid var(--border-color); font-size: 11px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; }
+.system-list-header { display: flex; align-items: center; padding: 0.75rem 1.25rem; background-color: var(--bg-light); border-bottom: 1px solid var(--border-color); font-size: 15px; font-weight: 800; color: var(--text-muted); text-transform: uppercase; }
 .system-row { display: flex; align-items: center; padding: 1rem 1.25rem; background-color: var(--white); border: 1px solid var(--border-color); border-radius: 6px; transition: all 0.2s; }
 .system-row:hover { border-color: var(--primary-lv-3); box-shadow: 0 4px 12px rgba(0,0,0,0.03); }
 .col-status { width: 100px; display: flex; align-items: center; gap: 0.5rem; }
@@ -165,12 +170,12 @@ input:checked + .slider:before { transform: translateX(16px); }
 .col-actions { width: 120px; display: flex; justify-content: flex-end; }
 .status-dot { width: 10px; height: 10px; border-radius: 50%; }
 .status-dot.online { background-color: var(--success); box-shadow: 0 0 6px var(--success); }
-.status-text { font-size: 11px; font-weight: 600; color: var(--success); }
-.asset-primary { font-weight: 700; font-size: 14px; }
-.asset-secondary { font-size: 12px; color: var(--text-muted); }
-.ip-address { font-weight: 600; font-family: monospace; color: var(--primary-color); }
+.status-text { font-size: 15px; font-weight: 700; color: var(--success); }
+.asset-primary { font-weight: 800; font-size: 19px; }
+.asset-secondary { font-size: 16px; color: var(--text-muted); }
+.ip-address { font-weight: 700; font-family: monospace; color: var(--primary-color); }
 .traffic-mini-chart { display: flex; flex-direction: column; gap: 4px; }
-.traffic-info { display: flex; justify-content: space-between; font-size: 11px; }
+.traffic-info { display: flex; justify-content: space-between; font-size: 15px; }
 .progress-bg { height: 4px; background: var(--primary-lv-0); border-radius: 2px; overflow: hidden; }
 .progress-fill { height: 100%; background: var(--primary-color); }
 .icon-btn { width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; border-radius: 4px; border: 1px solid var(--border-color); background: var(--white); color: var(--text-muted); cursor: pointer; }
@@ -190,8 +195,8 @@ input:checked + .slider:before { transform: translateX(16px); }

 .main-footer p {
  font-family: 'Pretendard Variable', Pretendard, sans-serif;
-  font-size: 0.75rem;
-  font-weight: 300;
+  font-size: 1rem;
+  font-weight: 400;
  line-height: 1.25rem;
  letter-spacing: -0.0175rem;
  color: #777777;
@@ -212,15 +217,15 @@ input:checked + .slider:before { transform: translateX(16px); }
 }

 /* --- Utility Styles --- */
-.btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.35rem; padding: 0 0.8rem; font-size: 12px; font-weight: 600; border-radius: 4px; cursor: pointer; height: 28px; }
+.btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.35rem; padding: 0 0.8rem; font-size: 16px; font-weight: 700; border-radius: 4px; cursor: pointer; height: 28px; }
 .btn-primary { background-color: var(--primary-color); color: var(--white); border: none; }
 .btn-outline { background-color: transparent; color: var(--text-muted); border: 1px solid var(--border-color); }

 .badge {
  padding: 2px 6px;
  border-radius: 4px;
-  font-size: 16px;
-  font-weight: 700;
+  font-size: 21px;
+  font-weight: 800;
  white-space: nowrap;
 }

@@ -245,34 +250,34 @@ input:checked + .slider:before { transform: translateX(16px); }
  background-color: #EDE9FE;
  color: #7C3AED;
  border: 1px solid #DDD6FE;
-  font-size: 11px;
+  font-size: 15px;
  padding: 2px 6px;
 }
 .badge.b-primary {
  background-color: #DBEAFE;
  color: #1D4ED8;
  border: 1px solid #BFDBFE;
-  font-size: 11px;
+  font-size: 15px;
  padding: 2px 6px;
 }
 .badge.b-green {
  background-color: #D1FAE5;
  color: #047857;
  border: 1px solid #A7F3D0;
-  font-size: 11px;
+  font-size: 15px;
  padding: 2px 6px;
 }
 .badge.b-yellow {
  background-color: #FEF3C7;
  color: #D97706;
  border: 1px solid #FDE68A;
-  font-size: 11px;
+  font-size: 15px;
  padding: 2px 6px;
 }

 .text-tag {
  color: var(--text-muted);
-  font-size: 16px;
+  font-size: 21px;
  padding: 1px 5px;
  border: 1px solid var(--border-color);
  border-radius: 3px;
@@ -280,14 +285,14 @@ input:checked + .slider:before { transform: translateX(16px); }
 }

 .font-bold {
-  font-weight: 700;
+  font-weight: 800;
 }

 /* --- Responsive Design (Tablet & Mobile) --- */
@media (max-width: 1200px) {
  .header-container { gap: 0.75rem; padding: 0 1rem; }
-  .brand h1 { font-size: 1rem; }
-  .brand h1 .sub-title { font-size: 0.75rem; }
+  .brand h1 { font-size: 1.33rem; }
+  .brand h1 .sub-title { font-size: 1rem; }
 }

@media (max-width: 992px) {
--- a/src/styles/dashboard.css
+++ b/src/styles/dashboard.css
@@ -1,8 +1,8 @@
 /* --- Premium Executive Dashboard View Specific Styles --- */
 .dashboard-section-title {
  padding: 0 0 0 8px;
-  font-size: 1.55rem;
-  font-weight: 800;
+  font-size: 2.06rem;
+  font-weight: 900;
  color: var(--text-main);
  letter-spacing: -0.02em;
  border-left: 4px solid var(--primary-color);
@@ -63,8 +63,8 @@

 /* Premium KPI Value Styling */
 .stat-value {
-  font-size: 2.41rem;
-  font-weight: 800;
+  font-size: 3.21rem;
+  font-weight: 900;
  background: linear-gradient(135deg, #1E5149 0%, #3B82F6 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
@@ -81,9 +81,9 @@
 }

 .stat-label {
-  font-size: 1.36rem;
+  font-size: 1.81rem;
  color: var(--text-muted);
-  font-weight: 700;
+  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
 }
@@ -118,10 +118,10 @@
 .table-premium th {
  background: #F8FAFC;
  color: #475569;
-  font-weight: 700;
+  font-weight: 800;
  padding: 1rem;
  text-transform: uppercase;
-  font-size: 0.96rem;
+  font-size: 1.28rem;
  letter-spacing: 0.05em;
 }

@@ -129,7 +129,7 @@
  padding: 1rem;
  border-bottom: 1px solid #E2E8F0;
  color: #1E293B;
-  font-size: 16px;
+  font-size: 21px;
 }

 .table-premium tr:hover td {
@@ -177,9 +177,9 @@
 }

 .page-info {
-  font-size: 0.96rem;
+  font-size: 1.28rem;
  color: var(--text-muted);
-  font-weight: 600;
+  font-weight: 700;
 }

 .page-btns button {
@@ -187,7 +187,7 @@
  border: 1px solid var(--border-color);
  background: var(--white);
  border-radius: 4px;
-  font-size: 0.96rem;
+  font-size: 1.28rem;
  cursor: pointer;
 }

@@ -197,9 +197,9 @@
 }

 .slider-indicator {
-  font-weight: 700;
+  font-weight: 800;
  color: var(--text-muted);
-  font-size: 1.41rem;
+  font-size: 1.88rem;
 }

 .dashboard-slider-viewport {
@@ -239,8 +239,8 @@
 }

 .section-title {
-  font-size: 1.125rem;
-  font-weight: 700;
+  font-size: 1.5rem;
+  font-weight: 800;
  margin-bottom: 1rem;
  color: var(--text-main);
  display: flex;
@@ -278,8 +278,8 @@
  display: inline-block;
  padding: 0.25rem 0.625rem;
  border-radius: 9999px;
-  font-size: 0.75rem;
-  font-weight: 600;
+  font-size: 1rem;
+  font-weight: 700;
  background: #ecfdf5;
  color: #059669;
  border: 1px solid #d1fae5;
@@ -318,8 +318,8 @@
  border: none;
  background: transparent;
  border-radius: 6px;
-  font-size: 0.8125rem;
-  font-weight: 600;
+  font-size: 1.08rem;
+  font-weight: 700;
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.2s ease;
@@ -358,8 +358,8 @@
 }

 .filter-group label {
-  font-size: 0.8125rem;
-  font-weight: 700;
+  font-size: 1.08rem;
+  font-weight: 800;
  color: var(--text-main);
 }

@@ -367,7 +367,7 @@
  padding: 0.4rem 0.75rem;
  border: 1px solid var(--border-color);
  border-radius: 6px;
-  font-size: 0.8125rem;
+  font-size: 1.08rem;
  color: var(--text-main);
  background: var(--white);
  min-width: 140px;
@@ -403,8 +403,8 @@
 }

 .box-label-text {
-  font-size: 0.65rem;
-  font-weight: 800;
+  font-size: 0.87rem;
+  font-weight: 900;
  color: var(--primary-color);
  pointer-events: none;
  text-shadow: 0 0 2px white;
@@ -427,7 +427,7 @@

 .asset-list-section h4 {
  margin: 0;
-  font-size: 0.9375rem;
+  font-size: 1.25rem;
  color: var(--text-main);
 }

@@ -447,15 +447,15 @@
  background: var(--white);
  padding: 0.75rem 1rem;
  text-align: left;
-  font-size: 0.75rem;
-  font-weight: 700;
+  font-size: 1rem;
+  font-weight: 800;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border-color);
 }

 .compact-table td {
  padding: 0.75rem 1rem;
-  font-size: 0.8125rem;
+  font-size: 1.08rem;
  border-bottom: 1px solid #f1f5f9;
  white-space: nowrap;
  overflow: hidden;
@@ -482,8 +482,8 @@
 }

 .detail-section-title {
-  font-size: 13px;
-  font-weight: 700;
+  font-size: 17px;
+  font-weight: 800;
  color: var(--primary-color);
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 6px;
@@ -497,17 +497,17 @@
 }

 .detail-label {
-  font-size: 12px;
+  font-size: 16px;
  color: var(--text-muted);
-  font-weight: 600;
+  font-weight: 700;
  display: flex;
  align-items: center;
 }

 .detail-value {
-  font-size: 14px;
+  font-size: 19px;
  color: var(--text-main);
-  font-weight: 500;
+  font-weight: 600;
  word-break: break-all;
  display: flex;
  align-items: center;
@@ -522,6 +522,134 @@

 .detail-header-title {
  flex: 1;
-  font-size: 0.95rem;
-  font-weight: 700;
+  font-size: 1.27rem;
+  font-weight: 800;
 }
+
+/* --- System Dashboard Stats Row (ListFactory) --- */
+.dashboard-stats-row {
+  display: grid;
+  grid-template-columns: 1fr 1.5fr 1.5fr;
+  gap: 2rem;
+  border-bottom: 1px solid var(--border-color);
+  padding-bottom: 1.25rem;
+  margin-bottom: 1rem;
+  flex-shrink: 0;
+}
+
+.stat-group-item {
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+}
+
+.stat-group-item.bordered {
+  border-left: 1px solid var(--border-color);
+  padding-left: 1.5rem;
+}
+
+.stat-group-item .stat-label {
+  font-size: 15px;
+  font-weight: 600;
+  color: var(--text-muted);
+  margin-bottom: 0.25rem;
+  letter-spacing: 0;
+}
+
+.stat-group-item .stat-value {
+  font-size: 37px;
+  font-weight: 900;
+  color: var(--text-main);
+  line-height: 1.1;
+  background: none;
+  -webkit-text-fill-color: initial;
+}
+
+.stat-group-item .stat-value span {
+  font-size: 17px;
+  font-weight: 700;
+  margin-left: 4px;
+  color: var(--text-muted);
+}
+
+.stat-group-item .stat-sub {
+  display: flex;
+  gap: 1rem;
+  font-size: 19px;
+  color: var(--text-muted);
+  margin-top: 0.5rem;
+}
+
+.stat-group-item .stat-sub strong {
+  font-size: 24px;
+}
+
+.text-primary {
+  color: var(--primary-color) !important;
+}
+
+.detail-stat-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 0.5rem;
+  gap: 0.5rem;
+}
+
+.stat-title {
+  font-size: 19px;
+  font-weight: 900;
+  color: var(--text-main);
+  white-space: nowrap;
+}
+
+.stat-badges {
+  display: flex;
+  gap: 4px;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+}
+
+.detail-stat-body {
+  display: flex;
+  flex-direction: column;
+  gap: 0.4rem;
+  font-size: 17px;
+  color: var(--text-muted);
+}
+
+.loc-summary {
+  display: flex;
+  gap: 1rem;
+  flex-wrap: wrap;
+}
+
+.loc-summary span strong {
+  color: var(--text-main);
+  font-size: 19px;
+}
+
+.type-summary {
+  display: flex;
+  gap: 0.8rem;
+  flex-wrap: wrap;
+  opacity: 0.9;
+  border-top: 1px dashed var(--border-color);
+  padding-top: 6px;
+  margin-top: 4px;
+}
+
+.type-summary span {
+  cursor: help;
+}
+
+.type-summary span strong {
+  color: var(--text-main);
+  font-size: 19px;
+}
+
+.text-danger {
+  color: var(--danger) !important;
+  font-weight: 800;
+}
+
--- a/src/styles/guide.css
+++ b/src/styles/guide.css
@@ -19,8 +19,8 @@

 .guide-tab {
  padding: 0.75rem 1.25rem;
-  font-size: 18px;
-  font-weight: 600;
+  font-size: 24px;
+  font-weight: 700;
  color: var(--text-muted);
  cursor: pointer;
  border-bottom: 2px solid transparent;
@@ -72,7 +72,7 @@
 }

 .guide-section h3 {
-  font-size: 1.3rem;
+  font-size: 1.73rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--primary-color);
  color: var(--primary-color);
@@ -83,7 +83,7 @@
 }

 .guide-text {
-  font-size: 18px;
+  font-size: 24px;
  color: var(--text-main);
  line-height: 1.7;
  margin: 0;
@@ -127,8 +127,8 @@
  border-radius: 50%;
  background-color: var(--primary-color);
  color: white;
-  font-size: 17px;
-  font-weight: 700;
+  font-size: 23px;
+  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
@@ -136,14 +136,14 @@
 }

 .flow-step .step-label {
-  font-weight: 700;
+  font-weight: 800;
  color: var(--text-main);
-  font-size: 18px;
+  font-size: 24px;
  display: block;
 }

 .flow-step .step-desc {
-  font-size: 17px;
+  font-size: 23px;
  color: var(--text-muted);
  line-height: 1.5;
  margin-top: 4px;
@@ -159,13 +159,13 @@
 .guide-info-table {
  width: 100%;
  border-collapse: collapse;
-  font-size: 18px;
+  font-size: 24px;
 }

 .guide-info-table th {
  background: #f8faf9;
  color: var(--primary-color);
-  font-weight: 700;
+  font-weight: 800;
  padding: 0.75rem;
  text-align: left;
  border-bottom: 1px solid var(--border-color);
@@ -182,7 +182,7 @@
  background: var(--primary-light);
  border-left: 4px solid var(--primary-color);
  padding: 1rem;
-  font-size: 18px;
+  font-size: 24px;
  color: var(--primary-color);
  line-height: 1.6;
 }
--- a/src/styles/login.css
+++ b/src/styles/login.css
@@ -36,14 +36,14 @@
 }

 .login-header h2 {
-  font-size: 1.75rem;
-  font-weight: 800;
+  font-size: 2.33rem;
+  font-weight: 900;
  color: var(--text-main);
  margin-bottom: 0.5rem;
 }

 .login-header p {
-  font-size: 0.9375rem;
+  font-size: 1.25rem;
  color: var(--text-muted);
 }

@@ -94,14 +94,14 @@
 }

 .role-card h3 {
-  font-size: 1.125rem;
-  font-weight: 700;
+  font-size: 1.5rem;
+  font-weight: 800;
  color: var(--text-main);
  margin-bottom: 0.5rem;
 }

 .role-card p {
-  font-size: 0.8125rem;
+  font-size: 1.08rem;
  color: var(--text-muted);
  line-height: 1.4;
 }
@@ -109,7 +109,7 @@
 .login-footer {
  margin-top: 3rem;
  text-align: center;
-  font-size: 0.75rem;
+  font-size: 1rem;
  color: var(--text-muted);
 }

--- a/src/styles/modal.css
+++ b/src/styles/modal.css
@@ -41,8 +41,8 @@
 }

 .modal-header h2 { 
-  font-size: 1.4rem; 
-  font-weight: 600; 
+  font-size: 1.86rem; 
+  font-weight: 700; 
  letter-spacing: -0.02em;
  color: var(--white);
  line-height: 1.2;
@@ -53,7 +53,7 @@
  cursor: pointer;
  background: none !important;
  border: none !important;
-  font-size: 1.75rem;
+  font-size: 2.33rem;
  line-height: 1;
 }

@@ -98,8 +98,8 @@
 /* Section Title for Grouping */
 .form-section-title {
  grid-column: span 2;
-  font-size: 1.15rem;
-  font-weight: 700;
+  font-size: 1.53rem;
+  font-weight: 800;
  color: var(--primary-color);
  padding: 1.5rem 0 0.5rem 0;
  border-bottom: 1px solid var(--border-color);
@@ -113,8 +113,8 @@
 }

 .form-group label { 
-  font-size: 1.1rem; 
-  font-weight: 600; 
+  font-size: 1.47rem; 
+  font-weight: 700; 
  color: var(--text-muted);
 }

@@ -126,7 +126,7 @@
  border: 1px solid var(--border-color);
  border-radius: 4px;
  font-family: inherit; 
-  font-size: 1.15rem;
+  font-size: 1.53rem;
  outline: none; 
  transition: all 0.2s;
  background-color: var(--white);
@@ -159,7 +159,7 @@
 .modal-footer .btn {
  height: 42px;
  padding: 0 1.25rem;
-  font-size: 0.875rem;
+  font-size: 1.17rem;
 }

 .edit-only-btn {
@@ -174,7 +174,7 @@
 }

 #hw-file-name-display {
-  font-size: 0.8125rem;
+  font-size: 1.08rem;
  color: var(--text-muted);
 }

@@ -209,8 +209,8 @@
  padding: 0.75rem 1rem;
  border-radius: 8px;
  cursor: pointer;
-  font-size: 18px;
-  font-weight: 500;
+  font-size: 24px;
+  font-weight: 600;
  display: flex;
  justify-content: space-between;
  align-items: center;
@@ -229,7 +229,7 @@
  color: var(--primary-color);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  border-color: var(--border-color);
-  font-weight: 700;
+  font-weight: 800;
 }

 .preview-table-container {
@@ -266,15 +266,15 @@
 .preview-table th {
  padding: 0.75rem 1rem;
  text-align: left;
-  font-size: 17px;
-  font-weight: 600;
+  font-size: 23px;
+  font-weight: 700;
  border-bottom: 1px solid var(--border-color);
  color: var(--text-muted);
 }

 .preview-table td {
  padding: 0.75rem 1rem;
-  font-size: 18px;
+  font-size: 24px;
  border-bottom: 1px solid #f1f5f9;
  color: var(--text-main);
 }
@@ -309,8 +309,8 @@
 }

 .history-header h3 {
-  font-size: 1.25rem;
-  font-weight: 600;
+  font-size: 1.67rem;
+  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 0.5rem;
@@ -323,7 +323,7 @@
  background-color: transparent !important;
  pointer-events: none !important;
  color: var(--text-main) !important;
-  font-weight: 600 !important;
+  font-weight: 700 !important;
  cursor: default;
  padding-left: 0 !important;
 }
@@ -392,14 +392,14 @@
 }

 .history-date {
-  font-size: 11px;
+  font-size: 15px;
  color: var(--text-muted);
-  font-weight: 500;
+  font-weight: 600;
 }

 .history-tag {
-  font-size: 10px;
-  font-weight: 700;
+  font-size: 14px;
+  font-weight: 800;
  padding: 2px 6px;
  border-radius: 10px;
  text-transform: uppercase;
@@ -412,15 +412,15 @@
 .tag-default { background: #f3f4f6; color: #6b7280; }

 .history-user {
-  font-size: 11px;
-  font-weight: 600;
+  font-size: 15px;
+  font-weight: 700;
  color: var(--text-main);
  margin-bottom: 6px;
  display: block;
 }

 .history-details {
-  font-size: 12.5px;
+  font-size: 17px;
  color: var(--text-main);
  line-height: 1.5;
  background: #f8fafc;
@@ -434,14 +434,14 @@
  display: inline-block;
  margin: 0 4px;
  color: var(--text-muted);
-  font-weight: 400;
+  font-weight: 500;
 }

 .empty-history {
  padding: 2rem 0;
  text-align: center;
  color: var(--text-muted);
-  font-size: 1.1rem;
+  font-size: 1.47rem;
 }

 /* Dashboard Detail Modal Table Fixed Header */
@@ -474,8 +474,8 @@
  border-bottom: 2px solid var(--border-color);
  box-shadow: none;
  padding: 0.75rem 1rem;
-  font-size: 1.1rem;
-  font-weight: 600;
+  font-size: 1.47rem;
+  font-weight: 700;
  color: var(--text-main);
  text-align: left;
  white-space: nowrap;
@@ -484,7 +484,7 @@
 #dashboard-detail-modal tbody td {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--border-color);
-  font-size: 1.1rem;
+  font-size: 1.47rem;
  color: var(--text-main);
  white-space: nowrap;
 }
@@ -502,8 +502,8 @@
  display: inline-block;
  padding: 0.125rem 0.5rem;
  border-radius: 4px;
-  font-size: 1.05rem;
-  font-weight: 500;
+  font-size: 1.4rem;
+  font-weight: 600;
  line-height: 1.5;
 }

@@ -620,8 +620,8 @@
 .image-picker-header h3 {
  color: white;
  margin: 0;
-  font-size: 1.25rem;
-  font-weight: 600;
+  font-size: 1.67rem;
+  font-weight: 700;
 }

 .image-picker-content {
@@ -673,8 +673,8 @@
  justify-content: center;
  gap: 4px;
  padding: 0 6px;
-  font-size: 10px !important;
-  font-weight: 600;
+  font-size: 14px !important;
+  font-weight: 700;
  border-radius: 4px;
  height: 24px;
  min-width: 52px;
@@ -725,7 +725,7 @@
 .ri-line input {
  height: 38px;
  box-sizing: border-box;
-  font-size: 13px;
+  font-size: 17px;
  padding: 0 10px;
  border: 1px solid var(--border-color);
  border-radius: 4px;
--- a/src/styles/table.css
+++ b/src/styles/table.css
@@ -10,8 +10,8 @@
 }

 .page-title {
-  font-size: 16px;
-  font-weight: 700;
+  font-size: 21px;
+  font-weight: 800;
  color: var(--primary-color);
  display: flex;
  align-items: center;
@@ -22,7 +22,7 @@
 }

 .page-description {
-  font-size: 12px;
+  font-size: 16px;
  color: var(--text-muted);
  margin: 0;
  line-height: 1.4;
@@ -64,8 +64,8 @@
 }

 .search-item label {
-  font-size: 11px;
-  font-weight: 700;
+  font-size: 15px;
+  font-weight: 800;
  color: var(--text-muted);
 }

@@ -75,7 +75,7 @@
  padding: 0 1rem;
  border: 1px solid var(--border-color);
  border-radius: 4px;
-  font-size: 14px;
+  font-size: 19px;
  outline: none;
  background-color: var(--white);
 }
@@ -133,8 +133,8 @@ thead {

 th {
  background-color: var(--bg-light) !important;
-  font-size: 13px;
-  font-weight: 600;
+  font-size: 17px;
+  font-weight: 700;
  color: var(--text-muted);
  position: sticky;
  top: 0;
@@ -144,9 +144,9 @@ th {
 }

 td {
-  font-size: 13px;
+  font-size: 17px;
  color: var(--text-main);
-  font-weight: 400;
+  font-weight: 500;
 }

 tbody tr:hover {
@@ -206,7 +206,7 @@ th.sortable::after {
  right: 0.6rem;
  top: 50%;
  transform: translateY(-50%);
-  font-size: 11px;
+  font-size: 15px;
  opacity: 0.3;
  transition: all 0.2s;
 }
@@ -239,8 +239,8 @@ th.sortable.desc::after {

 .mini-table th {
  padding: 10px 0;
-  font-size: 11px;
-  font-weight: 700;
+  font-size: 15px;
+  font-weight: 800;
  color: var(--text-muted);
  border-bottom: 2px solid var(--border-color);
  background: var(--white);
@@ -254,7 +254,7 @@ th.sortable.desc::after {
 .mini-row {
  border-bottom: 1px solid var(--border-color);
  cursor: pointer;
-  font-size: 12px;
+  font-size: 16px;
  transition: background-color 0.2s;
 }

@@ -276,7 +276,7 @@ th.sortable.desc::after {

 .mini-row td:nth-child(2) {
  text-align: left;
-  font-weight: 600;
+  font-weight: 700;
 }

 .mini-row.warning {
@@ -291,8 +291,8 @@ th.sortable.desc::after {
 .warning-badge {
  background: #FFF1F2;
  color: #E11D48;
-  font-size: 10px;
-  font-weight: 800;
+  font-size: 14px;
+  font-weight: 900;
  padding: 2px 6px;
  border-radius: 4px;
  border: 1px solid #FDA4AF;
@@ -302,8 +302,8 @@ th.sortable.desc::after {
 .warning-badge-orange {
  background: #FFF7ED;
  color: #C2410C;
-  font-size: 10px;
-  font-weight: 800;
+  font-size: 14px;
+  font-weight: 900;
  padding: 2px 6px;
  border-radius: 4px;
  border: 1px solid #FFEDD5;