fix: 화면 디자인 통일

agent/history/sseoyeon-ssonia/fix-front.md

@@ -0,0 +1,17 @@
+### 프론트 스타일 변수 정리 (Codex)
+- **User Intent**: 프론트 코드에 선언되어 있지만 사용되지 않는 Tailwind/CSS 변수들이 있어, 코드 전체를 탐색한 뒤 미사용이면 제거해달라는 요청.
+- **Agent Context**: `frontend/src/main.css`의 CSS custom property 선언을 기준으로 `frontend/` 전체 참조를 대조했고, `--tw-ring-color`는 Tailwind `ring-*` 유틸리티와 함께 쓰이는 상태 클래스라 제거 대상에서 제외.
+- **Key Decisions**:
+  - 전역 스타일 토큰만 제거 — `agent/project/frontend.md`의 실제 코드 우선 원칙과 기존 `main.css` 중심 스타일 구조를 유지하기 위함.
+  - `var(--*)` 참조가 0건인 토큰만 제거 — 사용 중인 테마 토큰과 Tailwind ring 상태 클래스 동작을 보존하기 위함.
+  - 기존 사이드바 글자 크기 조정 diff는 보존 — 작업 전 이미 존재하던 변경을 되돌리지 않고 미사용 변수 정리만 추가하기 위함.
+- **Affected Files**: <details><summary>1개 파일</summary>
+
+  - **Created**:
+    - 없음
+  - **Modified**:
+    - `frontend/src/main.css` (+3/-24) — 미사용 색상/테마 CSS custom property 제거
+  - **Deleted**:
+    - 없음
+
+  </details>

frontend/src/main.css

@@ -27,14 +27,10 @@
   --color-primary-muted: #e0e7ff;
   --color-primary-border: #c7d2fe;
   --color-success: #047857;
-  --color-success-hover: #065f46;
   --color-success-soft: #ecfdf5;
-  --color-success-muted: #d1fae5;
   --color-success-border: #bbf7d0;
   --color-warning: #b45309;
-  --color-warning-hover: #92400e;
   --color-warning-soft: #fffbeb;
-  --color-warning-muted: #fef3c7;
   --color-warning-border: #fde68a;
   --color-danger: #dc2626;
   --color-danger-hover: #b91c1c;
@@ -90,8 +86,6 @@
   --auth-color-primary-hover: var(--color-primary-hover);
   --auth-color-primary-soft: var(--color-primary-soft);
   --auth-color-danger: var(--color-danger);
-  --auth-color-danger-soft: var(--color-danger-soft);
-  --auth-color-danger-border: var(--color-danger-border);
   --auth-radius-panel: var(--radius-panel);
   --auth-radius-control: var(--radius-control);
   --auth-radius-brand: var(--radius-section);
@@ -102,7 +96,6 @@
   --auth-font-weight-label: var(--font-weight-label);
   --auth-font-weight-button: var(--font-weight-title);
   --profile-color-surface: var(--color-surface);
-  --profile-color-surface-muted: var(--color-border-muted);
   --profile-color-disabled: var(--color-page);
   --profile-color-border: var(--color-border);
   --profile-color-border-strong: var(--color-border-strong);
@@ -111,13 +104,8 @@
   --profile-color-text-muted: var(--color-text-muted);
   --profile-color-primary: var(--color-primary);
   --profile-color-primary-hover: var(--color-primary-hover);
-  --profile-color-primary-soft: var(--color-primary-soft);
   --profile-color-danger: var(--color-danger);
-  --profile-color-danger-soft: var(--color-danger-soft);
-  --profile-color-danger-border: var(--color-danger-border);
   --profile-color-success: var(--color-success);
-  --profile-color-success-soft: var(--color-success-soft);
-  --profile-color-success-border: var(--color-success-border);
   --profile-radius-panel: var(--radius-section);
   --profile-radius-control: var(--radius-control);
   --profile-radius-accent: 0.125rem;
@@ -251,7 +239,7 @@
   }
 
   .app-sidebar-category {
-    @apply flex items-center gap-2 px-2 py-1;
+    @apply flex items-center gap-2 px-3 py-1;
     color: var(--color-text-muted);
   }
 
@@ -261,7 +249,7 @@
 
   .app-sidebar-category-text {
     @apply uppercase tracking-wider;
-    font-size: var(--app-font-size-xs);
+    font-size: 0.95rem;
     line-height: var(--app-line-height-xs);
     font-weight: var(--font-weight-strong);
   }
@@ -272,7 +260,7 @@
 
   .app-sidebar-link {
     @apply flex items-center rounded-md px-3 py-1.5 transition-colors;
-    font-size: var(--app-font-size-xs);
+    font-size: 0.80rem;
     line-height: var(--app-line-height-xs);
   }
 
@@ -1526,10 +1514,7 @@
     --auth-color-primary-hover: #4f6ef5;
     --auth-color-primary-soft: #1e2450;
     --auth-color-danger: #f87171;
-    --auth-color-danger-soft: #3b1515;
-    --auth-color-danger-border: #7f1d1d;
     --profile-color-surface: var(--color-text);
-    --profile-color-surface-muted: #334155;
     --profile-color-disabled: var(--color-surface-strong);
     --profile-color-border: #334155;
     --profile-color-border-strong: var(--color-text-soft);
@@ -1538,18 +1523,12 @@
     --profile-color-text-muted: var(--color-text-muted);
     --profile-color-primary: #3b5cf0;
     --profile-color-primary-hover: #4f6ef5;
-    --profile-color-primary-soft: #1e2450;
     --profile-color-danger: #f87171;
-    --profile-color-danger-soft: #3b1515;
-    --profile-color-danger-border: #7f1d1d;
     --profile-color-success: #34d399;
-    --profile-color-success-soft: #0a2e1f;
-    --profile-color-success-border: #14532d;
   }
 }
 
 :root {
-  --wo-color-page: var(--color-page);
   --wo-color-surface: var(--color-surface);
   --wo-color-surface-muted: var(--color-border-muted);
   --wo-color-surface-strong: var(--color-surface-strong);

frontend/src/views/AiDataChatbotView.vue

@@ -99,7 +99,9 @@ function formatTime(value: string) {
   <div class="app-page">
     <div class="app-page-header">
       <div>
-        <h1 class="app-page-title">AI 데이터 챗봇</h1>
+        <h1 class="app-page-title">
+          AI 데이터 챗봇
+        </h1>
         <p class="app-page-subtitle">업무 데이터를 자연어로 질의하고 조회 결과, 차트, 생성 SQL을 함께 확인합니다.</p>
       </div>
       <button

frontend/src/views/BomMasterView.vue

@@ -702,11 +702,10 @@ function formatDateTime(value: string) {
   <div class="bom-page">
     <div class="bom-heading">
       <div>
-        <h1 class="bom-title">
-          <span class="bom-title-mark"></span>
-          BOM Master
+        <h1 class="app-page-title">
+          BOM 마스터
         </h1>
-        <p class="bom-subtitle">제품별 부품명세서를 등록하고, BOM 정전개와 역전개 구조를 확인합니다.</p>
+        <p class="app-page-subtitle">제품별 부품명세서를 등록하고, BOM 정전개와 역전개 구조를 확인합니다.</p>
       </div>
       <div v-if="successToast" class="bom-toast">
         <span class="bom-toast-dot"></span>
@@ -1241,12 +1240,6 @@ function formatDateTime(value: string) {
   letter-spacing: -0.025em;
 }
 
-.bom-title-mark {
-  width: 0.375rem;
-  height: 1.5rem;
-  background: var(--bom-color-primary);
-  border-radius: 0.125rem;
-}
 
 .bom-subtitle,
 .bom-detail-kicker,

frontend/src/views/FactoryLineMasterView.vue

@@ -319,11 +319,10 @@ function showToast(message: string) {
   <div class="factory-master-page">
     <div class="factory-master-header">
       <div>
-        <h1 class="factory-master-title">
-          <span class="factory-master-title-mark"></span>
-          공장 및 생산라인 Master
+        <h1 class="app-page-title">
+          공장 및 생산 라인 마스터
         </h1>
-        <p class="factory-master-subtitle">공장, 생산라인, 공정 순서 기준을 등록하고 작업지시에서 사용할 라우팅 기준정보를 관리합니다.</p>
+        <p class="app-page-subtitle">공장, 생산라인, 공정 순서 기준을 등록하고 작업지시에서 사용할 라우팅 기준정보를 관리합니다.</p>
       </div>
       <div v-if="successToast" class="factory-master-toast">
         <span class="factory-master-toast-dot"></span>

frontend/src/views/InboundStackView.vue

@@ -310,7 +310,7 @@ function formatDateTime(dateTimeStr: string) {
         <h1 class="app-page-title">
           창고 적재 및 로케이션 배치
         </h1>
-        <p class="app-page-subtitle">검수 완료(COMPLETED)된 오더들을 최종 창고 렉(Rack)에 바인딩하여 실시간 가용 재고로 반영합니다. 적재 완료 시 상태가 STACKED로 변경되며 중복 적재가 방지됩니다.</p>
+        <p class="app-page-subtitle">검수 완료(COMPLETED)된 오더들을 최종 창고 렉(Rack)에 바인딩하여 실시간 가용 재고로 반영합니다.</p>
       </div>
       <!-- 성공 토스트 -->
       <div v-if="successToast" class="app-status app-status-success animate-fade-in">

frontend/src/views/InventoryHistoryView.vue

@@ -231,7 +231,9 @@ const stats = computed(() => {
     <!-- 타이틀 -->
     <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
       <div>
-        <h1 class="app-page-title">재고 수불(변동) 이력 추적</h1>
+        <h1 class="app-page-title">
+          재고 수불 이력 추적
+        </h1>
         <p class="app-page-subtitle">창고 내에서 발생한 입고, 생산 출고 등 모든 양적 변화의 Audit 타임라인을 조회합니다.</p>
       </div>
       <div class="flex items-center gap-2">

frontend/src/views/InventoryStatusView.vue

@@ -230,7 +230,9 @@ async function selectRow(item: any) {
     <!-- 상단 대시보드 타이틀 -->
     <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
       <div>
-        <h1 class="app-page-title">현재고 모니터링</h1>
+        <h1 class="app-page-title">
+          현재고 모니터링
+        </h1>
         <p class="app-page-subtitle">창고 및 세부 로케이션별 실시간 재고량과 안전 재고 도달 상태를 감시합니다.</p>
       </div>
       <div class="flex items-center gap-2">

frontend/src/views/ItemMasterView.vue

@@ -293,8 +293,10 @@ function showToast(message: string) {
   <div class="space-y-6 pb-12">
     <div class="flex flex-col gap-3 sm:flex-row sm:items-end sm:justify-between">
       <div>
-        <h1 class="app-type-2xl app-font-emphasis tracking-tight app-text-strong">품목 마스터</h1>
-        <p class="mt-1 app-type-sm app-font-label app-text-muted">검색 후 목록에서 품목을 선택하면 상세 화면으로 이동합니다.</p>
+        <h1 class="app-page-title">
+          품목 마스터
+        </h1>
+        <p class="app-page-subtitle">검색 후 목록에서 품목을 선택하면 상세 화면으로 이동합니다.</p>
       </div>
       <div v-if="toast" class="rounded-xl border app-border app-bg-success-soft px-4 py-2 app-type-sm app-font-strong app-text-success">
         {{ toast }}

frontend/src/views/LoginView.vue

@@ -37,9 +37,6 @@ async function handleSubmit() {
           <h1 id="login-title" class="auth-title">
             MALLO
           </h1>
-          <p class="auth-subtitle">
-            AI 기반 MES 플랫폼, MALLO에 로그인합니다.
-          </p>
         </div>
       </div>
 

frontend/src/views/PartnerMasterView.vue

@@ -296,8 +296,10 @@ function showToast(message: string) {
   <div class="space-y-6">
     <div class="flex flex-col gap-4 lg:flex-row lg:items-start lg:justify-between">
       <div>
-        <h1 class="app-type-3xl font-bold app-text-primary">거래처 마스터 관리</h1>
-        <p class="mt-2 app-text-muted">거래처를 등록하고 상태, 사용 현황, 입고·출하 이력을 관리합니다.</p>
+        <h1 class="app-page-title">
+          거래처 마스터
+        </h1>
+        <p class="app-page-subtitle">거래처를 등록하고 상태, 사용 현황, 입고·출하 이력을 관리합니다.</p>
       </div>
       <div v-if="successToast" class="flex items-center gap-2 rounded-2xl border border-emerald-200 bg-emerald-50 px-4 py-3 app-type-sm font-semibold text-emerald-700">
         <CheckCircle2 class="h-4 w-4" />

frontend/src/views/PickingView.vue

@@ -242,7 +242,9 @@ function formatDate(dateStr: string | null) {
     <!-- 타이틀 -->
     <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
       <div>
-        <h1 class="app-page-title">피킹 및 상차 관리</h1>
+        <h1 class="app-page-title">
+          피킹 및 상차 관리
+        </h1>
         <p class="app-page-subtitle">배송 차량을 등록하고 최적의 완제품 피킹 위치를 자동 배정합니다. 실물 상차 완료 후 출하를 확정하여 전산 재고를 감산합니다.</p>
       </div>
       <button

frontend/src/views/ProductionExecutionView.vue

@@ -459,8 +459,10 @@ function selectKeywordSuggestion(orderNo: string) {
 
     <header class="wo-header">
       <div>
-        <h1 class="wo-title">공정 실적 관리</h1>
-        <p class="wo-subtitle">진행 중인 작업 지시를 기준으로 공정별 생산 실적을 입력하고 BOM 투입량 변화를 확인합니다.</p>
+        <h1 class="app-page-title">
+          공정 실적 관리
+        </h1>
+        <p class="app-page-subtitle">진행 중인 작업 지시를 기준으로 공정별 생산 실적을 입력하고 BOM 투입량 변화를 확인합니다.</p>
       </div>
       <button class="app-button app-button-muted" :disabled="workOrderStore.isLoading" @click="refreshData">
         <RefreshCw class="wo-button-icon" />

frontend/src/views/ShippingOrderView.vue

@@ -341,7 +341,9 @@ function getShippingStatusDotClass(status: ShippingStatus) {
     <!-- 타이틀 -->
     <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
       <div>
-        <h1 class="app-page-title">완제품 출하 지시 관리</h1>
+        <h1 class="app-page-title">
+          완제품 출하 지시 관리
+        </h1>
         <p class="app-page-subtitle">고객사 주문 사양에 맞춰 출하 지시를 신규 등록하고, 피킹 로케이션 배정 및 출하 완료 처리를 관리합니다.</p>
       </div>
       <div class="flex items-center gap-2">

frontend/src/views/UserManagementView.vue

@@ -206,14 +206,11 @@ function showToast(message: string) {
 
     <div class="mb-6 flex flex-col gap-4 lg:flex-row lg:items-end lg:justify-between">
       <div>
-        <div class="mb-2 inline-flex items-center gap-2 rounded-full border app-border-strong app-bg-surface px-3 py-1 app-type-xs app-font-strong app-text-muted">
-          <ShieldCheck class="h-3.5 w-3.5 app-text-soft" />
-          SYSTEM ADMINISTRATION
-        </div>
-        <h1 class="app-type-3xl app-font-emphasis tracking-tight app-text-strong">사용자 및 권한</h1>
-        <p class="mt-2 app-type-sm app-text-muted">가입된 사용자를 조회하고 시스템 접근 권한을 관리합니다.</p>
+        <h1 class="app-page-title">
+          사용자 및 권한
+        </h1>
+        <p class="app-page-subtitle">가입된 사용자를 조회하고 시스템 접근 권한을 관리합니다.</p>
       </div>
-
       <button v-if="isAdmin" class="inline-flex items-center justify-center gap-2 rounded-xl app-bg-strong px-4 py-2.5 app-type-sm app-font-strong app-text-inverse shadow-lg  transition app-hover-muted disabled:cursor-not-allowed disabled:opacity-60" type="button" :disabled="userStore.isLoading" @click="fetchUsers">
         <RefreshCw class="h-4 w-4" :class="{ 'animate-spin': userStore.isLoading }" />
         새로고침

frontend/src/views/WorkOrderView.vue

@@ -443,8 +443,10 @@ async function closeOrder(order: WorkOrderResponse) {
 
     <header class="wo-header">
       <div>
-        <h1 class="wo-title">작업 지시 관리</h1>
-        <p class="wo-subtitle">작업지시 생성, 조회, 상태 액션, 마감을 중심으로 생산 작업 흐름을 관리합니다.</p>
+        <h1 class="app-page-title">
+          작업 지시 관리
+        </h1>
+        <p class="app-page-subtitle">작업지시 생성, 조회, 상태 액션, 마감을 중심으로 생산 작업 흐름을 관리합니다.</p>
       </div>
       <button class="app-button app-button-muted" @click="loadInitialData">
         <RefreshCw class="wo-button-icon" />