diff --git a/design/uiux/prototype/01-회원가입.html b/design/uiux/prototype/01-회원가입.html
index 9bcc971..04455e4 100644
--- a/design/uiux/prototype/01-회원가입.html
+++ b/design/uiux/prototype/01-회원가입.html
@@ -17,7 +17,7 @@
   <link rel="stylesheet" href="css/common.css">
   <link rel="stylesheet" href="css/components/buttons.css">
   <link rel="stylesheet" href="css/components/inputs.css">
-  <link rel="stylesheet" href="css/navigation.css">
+  <link rel="stylesheet" href="css/components/navigation.css">
   <link rel="stylesheet" href="css/components/modals.css">
 </head>
 <body>
diff --git a/design/uiux/prototype/02-매장정보등록.html b/design/uiux/prototype/02-매장정보등록.html
index 9caefcc..a6492c6 100644
--- a/design/uiux/prototype/02-매장정보등록.html
+++ b/design/uiux/prototype/02-매장정보등록.html
@@ -17,7 +17,7 @@
   <link rel="stylesheet" href="css/common.css">
   <link rel="stylesheet" href="css/components/buttons.css">
   <link rel="stylesheet" href="css/components/inputs.css">
-  <link rel="stylesheet" href="css/navigation.css">
+  <link rel="stylesheet" href="css/components/navigation.css">
   <link rel="stylesheet" href="css/components/modals.css">
 
   <style>
diff --git a/design/uiux/prototype/03-홈화면.html b/design/uiux/prototype/03-홈화면.html
index b88a290..6264c16 100644
--- a/design/uiux/prototype/03-홈화면.html
+++ b/design/uiux/prototype/03-홈화면.html
@@ -17,7 +17,7 @@
   <link rel="stylesheet" href="css/common.css">
   <link rel="stylesheet" href="css/components/buttons.css">
   <link rel="stylesheet" href="css/components/cards.css">
-  <link rel="stylesheet" href="css/navigation.css">
+  <link rel="stylesheet" href="css/components/navigation.css">
 
   <style>
     /* Home Screen Specific Styles */
diff --git a/design/uiux/prototype/04-이벤트목적선택.html b/design/uiux/prototype/04-이벤트목적선택.html
index 4ba39ed..820c2a7 100644
--- a/design/uiux/prototype/04-이벤트목적선택.html
+++ b/design/uiux/prototype/04-이벤트목적선택.html
@@ -17,7 +17,7 @@
   <link rel="stylesheet" href="css/common.css">
   <link rel="stylesheet" href="css/components/buttons.css">
   <link rel="stylesheet" href="css/components/cards.css">
-  <link rel="stylesheet" href="css/navigation.css">
+  <link rel="stylesheet" href="css/components/navigation.css">
 
   <style>
     /* Event Purpose Selection Specific Styles */
diff --git a/design/uiux/prototype/05-AI트렌드분석결과.html b/design/uiux/prototype/05-AI트렌드분석결과.html
index 65b338b..199ef29 100644
--- a/design/uiux/prototype/05-AI트렌드분석결과.html
+++ b/design/uiux/prototype/05-AI트렌드분석결과.html
@@ -17,7 +17,7 @@
   <link rel="stylesheet" href="css/common.css">
   <link rel="stylesheet" href="css/components/buttons.css">
   <link rel="stylesheet" href="css/components/cards.css">
-  <link rel="stylesheet" href="css/navigation.css">
+  <link rel="stylesheet" href="css/components/navigation.css">
   <link rel="stylesheet" href="css/components/loaders.css">
 
   <style>
diff --git a/design/uiux/prototype/06-AI이벤트상품추천.html b/design/uiux/prototype/06-AI이벤트상품추천.html
index e092ea6..ba9b84a 100644
--- a/design/uiux/prototype/06-AI이벤트상품추천.html
+++ b/design/uiux/prototype/06-AI이벤트상품추천.html
@@ -17,7 +17,7 @@
   <link rel="stylesheet" href="css/common.css">
   <link rel="stylesheet" href="css/components/buttons.css">
   <link rel="stylesheet" href="css/components/cards.css">
-  <link rel="stylesheet" href="css/navigation.css">
+  <link rel="stylesheet" href="css/components/navigation.css">
 
   <style>
     /* AI Prize Recommendation Specific Styles */
@@ -272,7 +272,7 @@
     <header class="app-bar">
       <div class="app-bar__container">
         <div class="app-bar__left">
-          <svg class="app-bar__back" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" onclick="history.back()">
+          <svg class="app-bar__back" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor">
             <path d="M19 12H5M12 19l-7-7 7-7" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
           </svg>
         </div>
diff --git a/design/uiux/prototype/07-AI참여방법설계.html b/design/uiux/prototype/07-AI참여방법설계.html
index 59fc0f5..759331e 100644
--- a/design/uiux/prototype/07-AI참여방법설계.html
+++ b/design/uiux/prototype/07-AI참여방법설계.html
@@ -4,7 +4,6 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>AI 참여 방법 설계 - KT AI 이벤트 플랫폼</title>
-  <link rel="stylesheet" href="css/navigation.css">
   <style>
     /* CSS Reset */
     * {
@@ -445,16 +444,10 @@
 </head>
 <body>
   <!-- Header -->
-  <header class="app-bar">
-    <div class="app-bar__container">
-      <div class="app-bar__left">
-        <svg class="app-bar__back" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" onclick="history.back()">
-          <path d="M19 12H5M12 19l-7-7 7-7" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-        </svg>
-      </div>
-      <h1 class="app-bar__title">AI 참여 방법 설계</h1>
-      <div class="app-bar__right"></div>
-    </div>
+  <header class="header">
+    <button class="header__back" onclick="history.back()">←</button>
+    <h1 class="header__title">AI 참여 방법 설계</h1>
+    <p class="header__subtitle">고객이 이벤트에 참여하는 방법을 선택해 주세요</p>
   </header>
 
   <!-- Main -->
diff --git a/design/uiux/prototype/08-AI홍보문구생성.html b/design/uiux/prototype/08-AI홍보문구생성.html
index 7f20968..b3c8447 100644
--- a/design/uiux/prototype/08-AI홍보문구생성.html
+++ b/design/uiux/prototype/08-AI홍보문구생성.html
@@ -4,7 +4,6 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>AI 홍보 문구 생성 - KT 이벤트 마케팅</title>
-  <link rel="stylesheet" href="css/navigation.css">
   <style>
     /* CSS Variables */
     :root {
@@ -579,16 +578,12 @@
 <body>
   <div class="copy-container">
     <!-- Header -->
-    <header class="app-bar">
-      <div class="app-bar__container">
-        <div class="app-bar__left">
-          <svg class="app-bar__back" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" onclick="history.back()">
-            <path d="M19 12H5M12 19l-7-7 7-7" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-          </svg>
-        </div>
-        <h1 class="app-bar__title">AI 홍보 문구 생성</h1>
-        <div class="app-bar__right"></div>
-      </div>
+    <header class="copy-header">
+      <button class="copy-header__back" onclick="history.back()">
+        ←
+      </button>
+      <h1 class="copy-header__title">AI 홍보 문구 생성</h1>
+      <p class="copy-header__subtitle">AI가 맞춤형 홍보 문구를 생성해 드려요</p>
     </header>
 
     <!-- Loading State -->
diff --git a/design/uiux/prototype/09-이벤트기획안승인.html b/design/uiux/prototype/09-이벤트기획안승인.html
index c1c27b3..601c029 100644
--- a/design/uiux/prototype/09-이벤트기획안승인.html
+++ b/design/uiux/prototype/09-이벤트기획안승인.html
@@ -5,16 +5,56 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>이벤트 기획안 승인 - KT 이벤트 마케팅</title>
   <link rel="stylesheet" href="css/variables.css">
-  <link rel="stylesheet" href="css/reset.css">
-  <link rel="stylesheet" href="css/layout.css">
   <link rel="stylesheet" href="css/common.css">
-  <link rel="stylesheet" href="css/navigation.css">
   <style>
+    /* Layout */
+    .approval-container {
+      min-height: 100vh;
+      background: linear-gradient(135deg, #FFF5F5 0%, #FFFFFF 100%);
+      padding-bottom: var(--spacing-2xl);
+    }
+
+    /* Header */
+    .approval-header {
+      background: linear-gradient(135deg, var(--color-secondary) 0%, var(--color-secondary-dark) 100%);
+      color: var(--color-white);
+      padding: var(--spacing-xl) var(--spacing-m);
+      box-shadow: var(--shadow-lg);
+    }
+
+    .approval-header__back {
+      background: none;
+      border: none;
+      color: var(--color-white);
+      font-size: var(--font-size-xl);
+      padding: 0;
+      margin-bottom: var(--spacing-m);
+      cursor: pointer;
+    }
+
+    .approval-header__badge {
+      display: inline-block;
+      background: rgba(255, 255, 255, 0.2);
+      padding: var(--spacing-xs) var(--spacing-m);
+      border-radius: var(--radius-s);
+      font-size: var(--font-size-s);
+      margin-bottom: var(--spacing-s);
+    }
+
+    .approval-header__title {
+      font-size: var(--font-size-2xl);
+      font-weight: var(--font-weight-bold);
+      margin-bottom: var(--spacing-xs);
+    }
+
+    .approval-header__subtitle {
+      font-size: var(--font-size-m);
+      opacity: 0.9;
+    }
+
     /* Content */
     .approval-content {
-      background: linear-gradient(135deg, #FFF5F5 0%, #FFFFFF 100%);
       padding: var(--spacing-l) var(--spacing-m);
-      padding-bottom: var(--spacing-2xl);
     }
 
     /* Success Message */
@@ -342,22 +382,19 @@
   </style>
 </head>
 <body>
-  <div class="page">
-    <!-- App Bar -->
-    <header class="app-bar">
-      <div class="app-bar__container">
-        <div class="app-bar__left">
-          <svg class="app-bar__back" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" onclick="history.back()">
-            <path d="M19 12H5M12 19l-7-7 7-7" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-          </svg>
-        </div>
-        <h1 class="app-bar__title">이벤트 기획안 승인</h1>
-        <div class="app-bar__right"></div>
-      </div>
+  <div class="approval-container">
+    <!-- Header -->
+    <header class="approval-header">
+      <button class="approval-header__back" onclick="history.back()">
+        ←
+      </button>
+      <div class="approval-header__badge">✨ AI 기획 완료</div>
+      <h1 class="approval-header__title">이벤트 기획안 승인</h1>
+      <p class="approval-header__subtitle">AI가 생성한 이벤트 기획안을 확인하고 승인해 주세요</p>
     </header>
 
     <!-- Content -->
-    <main class="page-main approval-content">
+    <main class="approval-content">
       <!-- Success Message -->
       <div class="success-message">
         <div class="success-message__icon">🎉</div>
diff --git a/design/uiux/prototype/10-AI영상제작.html b/design/uiux/prototype/10-AI영상제작.html
index 47c8d4c..ab54082 100644
--- a/design/uiux/prototype/10-AI영상제작.html
+++ b/design/uiux/prototype/10-AI영상제작.html
@@ -4,7 +4,6 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>AI 영상 제작 - KT 이벤트 마케팅</title>
-  <link rel="stylesheet" href="css/navigation.css">
   <style>
     /* CSS Variables */
     :root {
@@ -341,16 +340,12 @@
 <body>
   <div class="video-container">
     <!-- Header -->
-    <header class="app-bar">
-      <div class="app-bar__container">
-        <div class="app-bar__left">
-          <svg class="app-bar__back" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" onclick="history.back()">
-            <path d="M19 12H5M12 19l-7-7 7-7" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-          </svg>
-        </div>
-        <h1 class="app-bar__title">AI 영상 제작</h1>
-        <div class="app-bar__right"></div>
-      </div>
+    <header class="video-header">
+      <button class="video-header__back" onclick="history.back()">
+        ←
+      </button>
+      <h1 class="video-header__title">AI 영상 제작</h1>
+      <p class="video-header__subtitle">이벤트 홍보 영상을 자동으로 제작해 드려요</p>
     </header>
 
     <!-- Content -->
diff --git a/design/uiux/prototype/11-SNS콘텐츠생성.html b/design/uiux/prototype/11-SNS콘텐츠생성.html
index 9be28f3..03d989c 100644
--- a/design/uiux/prototype/11-SNS콘텐츠생성.html
+++ b/design/uiux/prototype/11-SNS콘텐츠생성.html
@@ -4,7 +4,6 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>SNS 콘텐츠 생성 - KT 이벤트 마케팅</title>
-  <link rel="stylesheet" href="css/navigation.css">
   <style>
     /* CSS Variables */
     :root {
@@ -487,16 +486,12 @@
 <body>
   <div class="sns-container">
     <!-- Header -->
-    <header class="app-bar">
-      <div class="app-bar__container">
-        <div class="app-bar__left">
-          <svg class="app-bar__back" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" onclick="history.back()">
-            <path d="M19 12H5M12 19l-7-7 7-7" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-          </svg>
-        </div>
-        <h1 class="app-bar__title">SNS 콘텐츠 생성</h1>
-        <div class="app-bar__right"></div>
-      </div>
+    <header class="sns-header">
+      <button class="sns-header__back" onclick="history.back()">
+        ←
+      </button>
+      <h1 class="sns-header__title">SNS 콘텐츠 생성</h1>
+      <p class="sns-header__subtitle">각 SNS 플랫폼에 최적화된 콘텐츠를 생성해 드려요</p>
     </header>
 
     <!-- Content -->
diff --git a/design/uiux/prototype/12-QR포스터생성.html b/design/uiux/prototype/12-QR포스터생성.html
index 229c337..6c7a6d9 100644
--- a/design/uiux/prototype/12-QR포스터생성.html
+++ b/design/uiux/prototype/12-QR포스터생성.html
@@ -4,7 +4,6 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>QR 포스터 생성 - KT 이벤트 마케팅</title>
-  <link rel="stylesheet" href="css/navigation.css">
   <style>
     /* CSS Variables */
     :root {
@@ -501,16 +500,12 @@
 <body>
   <div class="qr-container">
     <!-- Header -->
-    <header class="app-bar">
-      <div class="app-bar__container">
-        <div class="app-bar__left">
-          <svg class="app-bar__back" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" onclick="history.back()">
-            <path d="M19 12H5M12 19l-7-7 7-7" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-          </svg>
-        </div>
-        <h1 class="app-bar__title">QR 포스터 생성</h1>
-        <div class="app-bar__right"></div>
-      </div>
+    <header class="qr-header">
+      <button class="qr-header__back" onclick="history.back()">
+        ←
+      </button>
+      <h1 class="qr-header__title">QR 포스터 생성</h1>
+      <p class="qr-header__subtitle">이벤트 QR 코드와 포스터를 자동으로 생성해 드려요</p>
     </header>
 
     <!-- Content -->
diff --git a/design/uiux/prototype/12-QR포스터생성선택.html b/design/uiux/prototype/12-QR포스터생성선택.html
index fb3ab0c..82e2b12 100644
--- a/design/uiux/prototype/12-QR포스터생성선택.html
+++ b/design/uiux/prototype/12-QR포스터생성선택.html
@@ -325,16 +325,12 @@
 <body>
   <div class="poster-container">
     <!-- Header -->
-    <header class="app-bar">
-      <div class="app-bar__container">
-        <div class="app-bar__left">
-          <svg class="app-bar__back" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" onclick="history.back()">
-            <path d="M19 12H5M12 19l-7-7 7-7" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-          </svg>
-        </div>
-        <h1 class="app-bar__title">QR 포스터 생성</h1>
-        <div class="app-bar__right"></div>
-      </div>
+    <header class="poster-header">
+      <button class="poster-header__back" onclick="history.back()">
+        ←
+      </button>
+      <h1 class="poster-header__title">QR 포스터 생성</h1>
+      <p class="poster-header__subtitle">오프라인 홍보용 QR 포스터를 만들어 보세요</p>
     </header>
 
     <!-- Content -->
diff --git a/design/uiux/prototype/13-QR포스터상세설정.html b/design/uiux/prototype/13-QR포스터상세설정.html
index 0c28390..308c2bc 100644
--- a/design/uiux/prototype/13-QR포스터상세설정.html
+++ b/design/uiux/prototype/13-QR포스터상세설정.html
@@ -6,7 +6,6 @@
   <title>QR 포스터 상세 설정 - KT 이벤트 마케팅</title>
   <link rel="stylesheet" href="css/variables.css">
   <link rel="stylesheet" href="css/common.css">
-  <link rel="stylesheet" href="css/navigation.css">
   <style>
     /* Layout */
     .detail-container {
@@ -330,16 +329,12 @@
 <body>
   <div class="detail-container">
     <!-- Header -->
-    <header class="app-bar">
-      <div class="app-bar__container">
-        <div class="app-bar__left">
-          <svg class="app-bar__back" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" onclick="history.back()">
-            <path d="M19 12H5M12 19l-7-7 7-7" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-          </svg>
-        </div>
-        <h1 class="app-bar__title">QR 포스터 상세 설정</h1>
-        <div class="app-bar__right"></div>
-      </div>
+    <header class="detail-header">
+      <button class="detail-header__back" onclick="history.back()">
+        ←
+      </button>
+      <h1 class="detail-header__title">QR 포스터 상세 설정</h1>
+      <p class="detail-header__subtitle">포스터 내용을 상세하게 편집하세요</p>
     </header>
 
     <!-- Content -->
diff --git a/design/uiux/prototype/13-콘텐츠편집.html b/design/uiux/prototype/13-콘텐츠편집.html
index 6df1967..be0d131 100644
--- a/design/uiux/prototype/13-콘텐츠편집.html
+++ b/design/uiux/prototype/13-콘텐츠편집.html
@@ -4,7 +4,6 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>콘텐츠 편집 - KT 이벤트 마케팅</title>
-  <link rel="stylesheet" href="css/navigation.css">
   <style>
     /* CSS Variables */
     :root {
@@ -434,16 +433,12 @@
 <body>
   <div class="edit-container">
     <!-- Header -->
-    <header class="app-bar">
-      <div class="app-bar__container">
-        <div class="app-bar__left">
-          <svg class="app-bar__back" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" onclick="history.back()">
-            <path d="M19 12H5M12 19l-7-7 7-7" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-          </svg>
-        </div>
-        <h1 class="app-bar__title">콘텐츠 편집</h1>
-        <div class="app-bar__right"></div>
-      </div>
+    <header class="edit-header">
+      <button class="edit-header__back" onclick="history.back()">
+        ←
+      </button>
+      <h1 class="edit-header__title">콘텐츠 편집</h1>
+      <p class="edit-header__subtitle">생성된 콘텐츠를 검토하고 수정하세요</p>
     </header>
 
     <!-- Content -->
diff --git a/design/uiux/prototype/14-콘텐츠최종승인.html b/design/uiux/prototype/14-콘텐츠최종승인.html
index 4fc5151..b14ee7d 100644
--- a/design/uiux/prototype/14-콘텐츠최종승인.html
+++ b/design/uiux/prototype/14-콘텐츠최종승인.html
@@ -4,17 +4,184 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>콘텐츠 최종 승인 - KT 이벤트 마케팅</title>
-  <link rel="stylesheet" href="css/variables.css">
-  <link rel="stylesheet" href="css/reset.css">
-  <link rel="stylesheet" href="css/layout.css">
-  <link rel="stylesheet" href="css/common.css">
-  <link rel="stylesheet" href="css/navigation.css">
   <style>
+    /* CSS Variables */
+    :root {
+      /* Colors */
+      --color-primary: #E31E24;
+      --color-primary-dark: #B71C1C;
+      --color-primary-light: #FFEBEE;
+      --color-secondary: #FF6B6B;
+      --color-secondary-dark: #FF5252;
+      --color-secondary-light: #FFE9E9;
+      --color-success: #4CAF50;
+      --color-success-light: #E8F5E9;
+      --color-warning: #FF9800;
+      --color-warning-light: #FFF3E0;
+      --color-error: #F44336;
+      --color-error-light: #FFEBEE;
+      --color-info: #2196F3;
+      --color-info-light: #E3F2FD;
+
+      /* Grayscale */
+      --color-white: #FFFFFF;
+      --color-gray-50: #FAFAFA;
+      --color-gray-100: #F5F5F5;
+      --color-gray-200: #EEEEEE;
+      --color-gray-300: #E0E0E0;
+      --color-gray-400: #BDBDBD;
+      --color-gray-500: #9E9E9E;
+      --color-gray-600: #757575;
+      --color-gray-700: #616161;
+      --color-gray-800: #424242;
+      --color-gray-900: #212121;
+      --color-black: #000000;
+
+      /* Text Colors */
+      --color-text-primary: #212121;
+      --color-text-secondary: #757575;
+      --color-text-tertiary: #9E9E9E;
+      --color-text-disabled: #BDBDBD;
+      --color-text-inverse: #FFFFFF;
+
+      /* Border Colors */
+      --color-border-light: #E0E0E0;
+      --color-border-medium: #BDBDBD;
+      --color-border-dark: #757575;
+
+      /* Background Colors */
+      --color-bg-primary: #FFFFFF;
+      --color-bg-secondary: #F5F5F5;
+      --color-bg-tertiary: #FAFAFA;
+
+      /* Spacing (4px base unit) */
+      --spacing-xs: 4px;
+      --spacing-s: 8px;
+      --spacing-m: 16px;
+      --spacing-l: 24px;
+      --spacing-xl: 32px;
+      --spacing-2xl: 48px;
+      --spacing-3xl: 64px;
+
+      /* Typography */
+      --font-family-primary: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+      --font-size-xs: 12px;
+      --font-size-s: 14px;
+      --font-size-m: 16px;
+      --font-size-l: 18px;
+      --font-size-xl: 20px;
+      --font-size-2xl: 24px;
+      --font-size-3xl: 32px;
+      --font-size-4xl: 40px;
+
+      --font-weight-regular: 400;
+      --font-weight-medium: 500;
+      --font-weight-semibold: 600;
+      --font-weight-bold: 700;
+
+      --line-height-tight: 1.2;
+      --line-height-normal: 1.5;
+      --line-height-relaxed: 1.75;
+
+      /* Border Radius */
+      --radius-s: 4px;
+      --radius-m: 8px;
+      --radius-l: 12px;
+      --radius-xl: 16px;
+      --radius-2xl: 24px;
+      --radius-full: 9999px;
+
+      /* Shadows */
+      --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+      --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+      --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
+      --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
+
+      /* Transitions */
+      --transition-fast: 150ms ease-in-out;
+      --transition-normal: 250ms ease-in-out;
+      --transition-slow: 350ms ease-in-out;
+
+      /* Z-index */
+      --z-dropdown: 1000;
+      --z-sticky: 1020;
+      --z-fixed: 1030;
+      --z-modal-backdrop: 1040;
+      --z-modal: 1050;
+      --z-popover: 1060;
+      --z-tooltip: 1070;
+    }
+
+    /* Reset & Base Styles */
+    * {
+      margin: 0;
+      padding: 0;
+      box-sizing: border-box;
+    }
+
+    body {
+      font-family: var(--font-family-primary);
+      font-size: var(--font-size-m);
+      line-height: var(--line-height-normal);
+      color: var(--color-text-primary);
+      background: var(--color-bg-secondary);
+      -webkit-font-smoothing: antialiased;
+      -moz-osx-font-smoothing: grayscale;
+    }
+
+    button {
+      font-family: inherit;
+      cursor: pointer;
+    }
+
+    /* Layout */
+    .approval-container {
+      min-height: 100vh;
+      background: linear-gradient(135deg, #FFF5F5 0%, #FFFFFF 100%);
+      padding-bottom: var(--spacing-2xl);
+    }
+
+    /* Header */
+    .approval-header {
+      background: linear-gradient(135deg, var(--color-secondary) 0%, var(--color-secondary-dark) 100%);
+      color: var(--color-white);
+      padding: var(--spacing-xl) var(--spacing-m);
+      box-shadow: var(--shadow-lg);
+    }
+
+    .approval-header__back {
+      background: none;
+      border: none;
+      color: var(--color-white);
+      font-size: var(--font-size-xl);
+      padding: 0;
+      margin-bottom: var(--spacing-m);
+      cursor: pointer;
+    }
+
+    .approval-header__badge {
+      display: inline-block;
+      background: rgba(255, 255, 255, 0.2);
+      padding: var(--spacing-xs) var(--spacing-m);
+      border-radius: var(--radius-s);
+      font-size: var(--font-size-s);
+      margin-bottom: var(--spacing-s);
+    }
+
+    .approval-header__title {
+      font-size: var(--font-size-2xl);
+      font-weight: var(--font-weight-bold);
+      margin-bottom: var(--spacing-xs);
+    }
+
+    .approval-header__subtitle {
+      font-size: var(--font-size-m);
+      opacity: 0.9;
+    }
+
     /* Content */
     .approval-content {
-      background: linear-gradient(135deg, #FFF5F5 0%, #FFFFFF 100%);
       padding: var(--spacing-l) var(--spacing-m);
-      padding-bottom: var(--spacing-2xl);
     }
 
     /* Success Message */
@@ -332,22 +499,19 @@
   </style>
 </head>
 <body>
-  <div class="page">
-    <!-- App Bar -->
-    <header class="app-bar">
-      <div class="app-bar__container">
-        <div class="app-bar__left">
-          <svg class="app-bar__back" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" onclick="history.back()">
-            <path d="M19 12H5M12 19l-7-7 7-7" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-          </svg>
-        </div>
-        <h1 class="app-bar__title">콘텐츠 최종 승인</h1>
-        <div class="app-bar__right"></div>
-      </div>
+  <div class="approval-container">
+    <!-- Header -->
+    <header class="approval-header">
+      <button class="approval-header__back" onclick="history.back()">
+        ←
+      </button>
+      <div class="approval-header__badge">✨ AI 콘텐츠 생성 완료</div>
+      <h1 class="approval-header__title">콘텐츠 최종 승인</h1>
+      <p class="approval-header__subtitle">생성된 모든 콘텐츠를 확인하고 승인해 주세요</p>
     </header>
 
     <!-- Content -->
-    <main class="page-main approval-content">
+    <main class="approval-content">
       <!-- Success Message -->
       <div class="success-message">
         <div class="success-message__icon">🎉</div>
diff --git a/design/uiux/prototype/15-배포채널선택.html b/design/uiux/prototype/15-배포채널선택.html
index df1e642..2371b46 100644
--- a/design/uiux/prototype/15-배포채널선택.html
+++ b/design/uiux/prototype/15-배포채널선택.html
@@ -4,7 +4,6 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>배포 채널 선택 - KT AI 이벤트</title>
-  <link rel="stylesheet" href="css/navigation.css">
   <style>
     /* CSS Variables */
     :root {
@@ -748,16 +747,12 @@
 </head>
 <body>
   <!-- Header -->
-  <header class="app-bar">
-    <div class="app-bar__container">
-      <div class="app-bar__left">
-        <svg class="app-bar__back" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" onclick="window.location.href='14-콘텐츠최종승인.html'">
-          <path d="M19 12H5M12 19l-7-7 7-7" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-        </svg>
-      </div>
-      <h1 class="app-bar__title">배포 채널 선택</h1>
-      <div class="app-bar__right"></div>
-    </div>
+  <header class="header">
+    <button class="header__back" onclick="window.location.href='14-콘텐츠최종승인.html'" aria-label="뒤로 가기">
+      ←
+    </button>
+    <h1 class="header__title">배포 채널 선택</h1>
+    <div class="header__action"></div>
   </header>
 
   <!-- Main Content -->
diff --git a/design/uiux/prototype/16-배포진행상태.html b/design/uiux/prototype/16-배포진행상태.html
index 5af263f..3dee0d7 100644
--- a/design/uiux/prototype/16-배포진행상태.html
+++ b/design/uiux/prototype/16-배포진행상태.html
@@ -4,7 +4,6 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>배포 진행 상태 - KT AI 이벤트</title>
-  <link rel="stylesheet" href="css/navigation.css">
   <style>
     /* CSS Variables */
     :root {
@@ -659,16 +658,12 @@
 </head>
 <body>
   <!-- Header -->
-  <header class="app-bar">
-    <div class="app-bar__container">
-      <div class="app-bar__left">
-        <svg class="app-bar__back" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" onclick="window.location.href='15-배포채널선택.html'">
-          <path d="M19 12H5M12 19l-7-7 7-7" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-        </svg>
-      </div>
-      <h1 class="app-bar__title">배포 진행 중</h1>
-      <div class="app-bar__right"></div>
-    </div>
+  <header class="header">
+    <button class="header__back" onclick="window.location.href='15-배포채널선택.html'" aria-label="뒤로 가기">
+      ←
+    </button>
+    <h1 class="header__title">배포 진행 중</h1>
+    <div class="header__action"></div>
   </header>
 
   <!-- Main Content -->
diff --git a/design/uiux/prototype/17-오프라인자료다운로드.html b/design/uiux/prototype/17-오프라인자료다운로드.html
index a8e5b66..c5fd5e0 100644
--- a/design/uiux/prototype/17-오프라인자료다운로드.html
+++ b/design/uiux/prototype/17-오프라인자료다운로드.html
@@ -4,7 +4,6 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>오프라인 자료 다운로드 - KT AI 이벤트</title>
-  <link rel="stylesheet" href="css/navigation.css">
   <style>
     /* CSS Variables */
     :root {
@@ -610,16 +609,12 @@
 </head>
 <body>
   <!-- Header -->
-  <header class="app-bar">
-    <div class="app-bar__container">
-      <div class="app-bar__left">
-        <svg class="app-bar__back" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" onclick="window.location.href='16-배포진행상태.html'">
-          <path d="M19 12H5M12 19l-7-7 7-7" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-        </svg>
-      </div>
-      <h1 class="app-bar__title">오프라인 자료</h1>
-      <div class="app-bar__right"></div>
-    </div>
+  <header class="header">
+    <button class="header__back" onclick="window.location.href='16-배포진행상태.html'" aria-label="뒤로 가기">
+      ←
+    </button>
+    <h1 class="header__title">오프라인 자료</h1>
+    <div class="header__action"></div>
   </header>
 
   <!-- Main Content -->
diff --git a/design/uiux/prototype/18-이벤트참여.html b/design/uiux/prototype/18-이벤트참여.html
index dd4a7b0..a66562a 100644
--- a/design/uiux/prototype/18-이벤트참여.html
+++ b/design/uiux/prototype/18-이벤트참여.html
@@ -4,7 +4,6 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>이벤트 참여 - KT AI 이벤트</title>
-  <link rel="stylesheet" href="css/navigation.css">
   <style>
     /* ========================================
        CSS Variables & Base Styles
@@ -654,19 +653,6 @@
   </style>
 </head>
 <body>
-  <!-- Header -->
-  <header class="app-bar">
-    <div class="app-bar__container">
-      <div class="app-bar__left">
-        <svg class="app-bar__back" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" onclick="history.back()">
-          <path d="M19 12H5M12 19l-7-7 7-7" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-        </svg>
-      </div>
-      <h1 class="app-bar__title">이벤트 참여</h1>
-      <div class="app-bar__right"></div>
-    </div>
-  </header>
-
   <!-- Main Content -->
   <main class="event-participation">
     <!-- Event Header -->
diff --git a/design/uiux/prototype/19-참여완료.html b/design/uiux/prototype/19-참여완료.html
index ae3d93e..48dee83 100644
--- a/design/uiux/prototype/19-참여완료.html
+++ b/design/uiux/prototype/19-참여완료.html
@@ -4,7 +4,6 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>참여 완료 - KT AI 이벤트</title>
-  <link rel="stylesheet" href="css/navigation.css">
   <style>
     /* ========================================
        CSS Variables & Base Styles
@@ -620,19 +619,6 @@
   </style>
 </head>
 <body>
-  <!-- Header -->
-  <header class="app-bar">
-    <div class="app-bar__container">
-      <div class="app-bar__left">
-        <svg class="app-bar__back" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" onclick="history.back()">
-          <path d="M19 12H5M12 19l-7-7 7-7" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-        </svg>
-      </div>
-      <h1 class="app-bar__title">참여 완료</h1>
-      <div class="app-bar__right"></div>
-    </div>
-  </header>
-
   <!-- Confetti Container -->
   <div class="confetti" id="confetti"></div>
 
diff --git a/design/uiux/prototype/20-당첨자명단관리.html b/design/uiux/prototype/20-당첨자명단관리.html
index a8ce22c..550f303 100644
--- a/design/uiux/prototype/20-당첨자명단관리.html
+++ b/design/uiux/prototype/20-당첨자명단관리.html
@@ -3,7 +3,6 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <link rel="stylesheet" href="css/navigation.css">
   <title>당첨자 명단 관리 - KT AI 이벤트 플랫폼</title>
   <style>
     /* CSS Reset */
@@ -616,16 +615,10 @@
 </head>
 <body>
   <!-- Header -->
-  <header class="app-bar">
-    <div class="app-bar__container">
-      <div class="app-bar__left">
-        <button class="app-bar__back" aria-label="뒤로 가기">←</button>
-      </div>
-      <h1 class="app-bar__title">당첨자 명단 관리</h1>
-      <div class="app-bar__right">
-        <button class="header__action" aria-label="새로고침">⟳</button>
-      </div>
-    </div>
+  <header class="header">
+    <button class="header__back" aria-label="뒤로 가기">←</button>
+    <h1 class="header__title">당첨자 명단 관리</h1>
+    <button class="header__action" aria-label="새로고침">⟳</button>
   </header>
 
   <!-- Main -->
@@ -775,7 +768,7 @@
     const emptyState = $('#emptyState');
     const exportBtn = $('#exportBtn');
     const notifyBtn = $('#notifyBtn');
-    const backBtn = $('.app-bar__back');
+    const backBtn = $('.header__back');
     const refreshBtn = $('.header__action');
     const countAll = $('#countAll');
     const countPending = $('#countPending');
diff --git a/design/uiux/prototype/21-실시간대시보드.html b/design/uiux/prototype/21-실시간대시보드.html
index 2169ed5..93ef7ed 100644
--- a/design/uiux/prototype/21-실시간대시보드.html
+++ b/design/uiux/prototype/21-실시간대시보드.html
@@ -3,7 +3,6 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <link rel="stylesheet" href="css/navigation.css">
   <title>실시간 대시보드 - KT AI 이벤트 플랫폼</title>
   <style>
     /* CSS Reset */
@@ -536,18 +535,14 @@
 </head>
 <body>
   <!-- Header -->
-  <header class="app-bar">
-    <div class="app-bar__container">
-      <div class="app-bar__left">
-        <button class="app-bar__back" aria-label="뒤로 가기">←</button>
-      </div>
-      <h1 class="app-bar__title">실시간 대시보드</h1>
-      <div class="app-bar__right">
-        <button class="header__action" id="refreshBtn" aria-label="새로고침">
-          ⟳
-          <span class="refresh-indicator"></span>
-        </button>
-      </div>
+  <header class="header">
+    <button class="header__back" aria-label="뒤로 가기">←</button>
+    <h1 class="header__title">실시간 대시보드</h1>
+    <div class="header__actions">
+      <button class="header__action" id="refreshBtn" aria-label="새로고침">
+        ⟳
+        <span class="refresh-indicator"></span>
+      </button>
     </div>
   </header>
 
@@ -708,7 +703,7 @@
     const activityList = $('#activityList');
     const dateRangeBtns = $$('.date-range__btn');
     const refreshBtn = $('#refreshBtn');
-    const backBtn = $('.app-bar__back');
+    const backBtn = $('.header__back');
 
     // Generate Mock Data
     function generateMockData(range) {
diff --git a/design/uiux/prototype/22-채널별성과분석.html b/design/uiux/prototype/22-채널별성과분석.html
index 3e936b2..91c6291 100644
--- a/design/uiux/prototype/22-채널별성과분석.html
+++ b/design/uiux/prototype/22-채널별성과분석.html
@@ -3,7 +3,6 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <link rel="stylesheet" href="css/navigation.css">
   <title>채널별 성과 분석 - KT AI 이벤트 플랫폼</title>
   <style>
     /* CSS Reset */
@@ -492,16 +491,10 @@
 </head>
 <body>
   <!-- Header -->
-  <header class="app-bar">
-    <div class="app-bar__container">
-      <div class="app-bar__left">
-        <button class="app-bar__back" aria-label="뒤로 가기">←</button>
-      </div>
-      <h1 class="app-bar__title">채널별 성과 분석</h1>
-      <div class="app-bar__right">
-        <button class="header__action" id="refreshBtn" aria-label="새로고침">⟳</button>
-      </div>
-    </div>
+  <header class="header">
+    <button class="header__back" aria-label="뒤로 가기">←</button>
+    <h1 class="header__title">채널별 성과 분석</h1>
+    <button class="header__action" id="refreshBtn" aria-label="새로고침">⟳</button>
   </header>
 
   <!-- Main -->
@@ -612,7 +605,7 @@
     const periodFilterBtns = $$('.period-filter__btn');
     const refreshBtn = $('#refreshBtn');
     const exportBtn = $('#exportBtn');
-    const backBtn = $('.app-bar__back');
+    const backBtn = $('.header__back');
 
     // Generate Mock Channel Data
     function generateChannelData(period) {
diff --git a/design/uiux/prototype/23-ROI분석.html b/design/uiux/prototype/23-ROI분석.html
index 0e3dfff..183e0c4 100644
--- a/design/uiux/prototype/23-ROI분석.html
+++ b/design/uiux/prototype/23-ROI분석.html
@@ -3,7 +3,6 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <link rel="stylesheet" href="css/navigation.css">
   <title>ROI 분석 - KT AI 이벤트 플랫폼</title>
   <style>
     /* CSS Reset */
@@ -525,16 +524,10 @@
 </head>
 <body>
   <!-- Header -->
-  <header class="app-bar">
-    <div class="app-bar__container">
-      <div class="app-bar__left">
-        <button class="app-bar__back" aria-label="뒤로 가기">←</button>
-      </div>
-      <h1 class="app-bar__title">ROI 분석</h1>
-      <div class="app-bar__right">
-        <button class="header__action" id="refreshBtn" aria-label="새로고침">⟳</button>
-      </div>
-    </div>
+  <header class="header">
+    <button class="header__back" aria-label="뒤로 가기">←</button>
+    <h1 class="header__title">ROI 분석</h1>
+    <button class="header__action" id="refreshBtn" aria-label="새로고침">⟳</button>
   </header>
 
   <!-- Main -->
@@ -667,7 +660,7 @@
     const insightsList = $('#insightsList');
     const refreshBtn = $('#refreshBtn');
     const exportBtn = $('#exportBtn');
-    const backBtn = $('.app-bar__back');
+    const backBtn = $('.header__back');
 
     // Generate Mock Data
     function generateROIData() {
diff --git a/design/uiux/prototype/24-분석리포트.html b/design/uiux/prototype/24-분석리포트.html
index 4341706..4877710 100644
--- a/design/uiux/prototype/24-분석리포트.html
+++ b/design/uiux/prototype/24-분석리포트.html
@@ -3,7 +3,6 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <link rel="stylesheet" href="css/navigation.css">
   <title>분석 리포트 - KT AI 이벤트 플랫폼</title>
   <style>
     /* CSS Reset */
@@ -549,16 +548,12 @@
 </head>
 <body>
   <!-- Header -->
-  <header class="app-bar">
-    <div class="app-bar__container">
-      <div class="app-bar__left">
-        <button class="app-bar__back" aria-label="뒤로 가기">←</button>
-      </div>
-      <h1 class="app-bar__title">분석 리포트</h1>
-      <div class="app-bar__right">
-        <button class="header__action" id="shareBtn" aria-label="공유하기">📤</button>
-        <button class="header__action" id="printBtn" aria-label="인쇄하기">🖨</button>
-      </div>
+  <header class="header">
+    <button class="header__back" aria-label="뒤로 가기">←</button>
+    <h1 class="header__title">분석 리포트</h1>
+    <div class="header__actions">
+      <button class="header__action" id="shareBtn" aria-label="공유하기">📤</button>
+      <button class="header__action" id="printBtn" aria-label="인쇄하기">🖨</button>
     </div>
   </header>
 
@@ -812,7 +807,7 @@
     const printBtn = $('#printBtn');
     const saveBtn = $('#saveBtn');
     const downloadBtn = $('#downloadBtn');
-    const backBtn = $('.app-bar__back');
+    const backBtn = $('.header__back');
 
     // Format Date
     function formatDate(date) {
diff --git a/design/uiux/prototype/25-이벤트목록.html b/design/uiux/prototype/25-이벤트목록.html
index 95afbf4..ae2c745 100644
--- a/design/uiux/prototype/25-이벤트목록.html
+++ b/design/uiux/prototype/25-이벤트목록.html
@@ -3,7 +3,6 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <link rel="stylesheet" href="css/navigation.css">
   <title>이벤트 목록 - KT AI 이벤트 플랫폼</title>
   <style>
     /* CSS Reset */
@@ -488,16 +487,10 @@
 </head>
 <body>
   <!-- Header -->
-  <header class="app-bar">
-    <div class="app-bar__container">
-      <div class="app-bar__left">
-        <button class="app-bar__back" aria-label="뒤로 가기">←</button>
-      </div>
-      <h1 class="app-bar__title">이벤트 목록</h1>
-      <div class="app-bar__right">
-        <button class="header__action" id="refreshBtn" aria-label="새로고침">⟳</button>
-      </div>
-    </div>
+  <header class="header">
+    <button class="header__back" aria-label="뒤로 가기">←</button>
+    <h1 class="header__title">이벤트 목록</h1>
+    <button class="header__action" id="refreshBtn" aria-label="새로고침">⟳</button>
   </header>
 
   <!-- Main -->
@@ -596,7 +589,7 @@
     const refreshBtn = $('#refreshBtn');
     const fabBtn = $('#fabBtn');
     const emptyCreateBtn = $('#emptyCreateBtn');
-    const backBtn = $('.app-bar__back');
+    const backBtn = $('.header__back');
 
     // Generate Mock Events
     function generateMockEvents() {
diff --git a/design/uiux/prototype/26-마이페이지.html b/design/uiux/prototype/26-마이페이지.html
index 6759180..7244726 100644
--- a/design/uiux/prototype/26-마이페이지.html
+++ b/design/uiux/prototype/26-마이페이지.html
@@ -3,7 +3,6 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <link rel="stylesheet" href="css/navigation.css">
   <title>마이페이지 - KT AI 이벤트 플랫폼</title>
   <style>
     /* CSS Reset */
@@ -381,16 +380,10 @@
 </head>
 <body>
   <!-- Header -->
-  <header class="app-bar">
-    <div class="app-bar__container">
-      <div class="app-bar__left">
-        <button class="app-bar__back" aria-label="뒤로 가기">←</button>
-      </div>
-      <h1 class="app-bar__title">마이페이지</h1>
-      <div class="app-bar__right">
-        <button class="header__action" id="settingsBtn" aria-label="설정">⚙️</button>
-      </div>
-    </div>
+  <header class="header">
+    <button class="header__back" aria-label="뒤로 가기">←</button>
+    <h1 class="header__title">마이페이지</h1>
+    <button class="header__action" id="settingsBtn" aria-label="설정">⚙️</button>
   </header>
 
   <!-- Main -->
@@ -616,7 +609,7 @@
     const termsBtn = $('#termsBtn');
     const privacyBtn = $('#privacyBtn');
     const logoutBtn = $('#logoutBtn');
-    const backBtn = $('.app-bar__back');
+    const backBtn = $('.header__back');
 
     // Format Number
     function formatNumber(num) {
