From 273f50edd350b12d16dfacc3b323649b40c5e9f6 Mon Sep 17 00:00:00 2001
From: EENE Dashboard <roowj0325@gmail.com>
Date: Fri, 5 Jun 2026 23:48:20 +0900
Subject: [PATCH] style: match central stats bar to F12 poly-stat-item specs

Apply reference gap, colors, pipe separator, dividers, text-shadow, and click-stat padding.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 .../components/dashboard/DashboardHeader.tsx  | 14 +++----
 frontend/src/index.css                        | 39 +++++++++++++++++--
 2 files changed, 41 insertions(+), 12 deletions(-)

diff --git a/frontend/src/components/dashboard/DashboardHeader.tsx b/frontend/src/components/dashboard/DashboardHeader.tsx
index f39d6ba..b60fc99 100644
--- a/frontend/src/components/dashboard/DashboardHeader.tsx
+++ b/frontend/src/components/dashboard/DashboardHeader.tsx
@@ -58,13 +58,11 @@ export function DashboardHeader({
       </div>
 
       <div className="header-stats-bar side-polygon-stats absolute left-1/2 top-0 z-10 flex h-10 -translate-x-1/2 items-center justify-center rounded-b-2xl border-b border-[#135643] bg-[linear-gradient(90deg,#093023_20%,#074833_50%,#093023_80%)] px-12 [filter:drop-shadow(0_2px_4px_rgba(0,0,0,0.2))]">
-        <div className="poly-stat-item flex items-center gap-2 text-[18px]">
-          <span className="header-stat-text shrink-0 whitespace-nowrap font-semibold text-[rgba(255,255,255,0.77)]">
-            {quarterLabel}
-          </span>
-          <span className="header-stat-text text-[#eeeae3]/60">·</span>
+        <div className="poly-stat-item">
+          <span className="poly-stat-quarter header-stat-text">{quarterLabel}</span>
+          <span className="poly-stat-pipe header-stat-text">|</span>
           {statItems.map((item, index) => (
-            <span key={item.statusKey} className="flex items-center gap-2">
+            <span key={item.statusKey} className="contents">
               {index > 0 && <StatDivider />}
               <StatClick
                 label={item.label}
@@ -103,7 +101,7 @@ export function DashboardHeader({
 }
 
 function StatDivider() {
-  return <span className="h-4 w-px shrink-0 bg-[rgba(238,234,227,0.4)]" aria-hidden />;
+  return <div className="poly-stat-divider" aria-hidden />;
 }
 
 interface StatClickProps {
@@ -123,7 +121,7 @@ function StatClick({ label, value, statusKey, activeStatus, accent, issue, onCli
     <button
       type="button"
       onClick={() => onClick(isActive ? '전체' : statusKey)}
-      className={`poly-click-stat header-stat-text cursor-pointer whitespace-nowrap rounded px-1.5 py-0.5 text-[18px] leading-none ${
+      className={`poly-click-stat header-stat-text cursor-pointer whitespace-nowrap leading-none ${
         isActive ? 'active' : ''
       } ${issue && !isActive ? 'issue' : ''}`}
     >
diff --git a/frontend/src/index.css b/frontend/src/index.css
index 8b4f353..142a929 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -103,16 +103,47 @@ body,
 /* F12 — 통계 영역 텍스트 그림자 */
 .header-stat-text {
   text-shadow:
-    -1px -1px 1px rgba(0, 0, 0, 0.25),
-    1px -1px 1px rgba(0, 0, 0, 0.25),
-    -1px 1px 1px rgba(0, 0, 0, 0.25),
-    1px 1px 1px rgba(0, 0, 0, 0.25);
+    -1px -1px 0 #00000040,
+    1px -1px 0 #00000040,
+    -1px 1px 0 #00000040,
+    1px 1px 0 #00000040;
+}
+
+/* F12 — poly-stat-item (중앙 통계 한 줄) */
+.poly-stat-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 18px;
+  white-space: nowrap;
+  color: #e6eae3;
+}
+
+.poly-stat-quarter {
+  flex-shrink: 0;
+  font-weight: 600;
+  color: rgba(255, 255, 255, 0.77);
+}
+
+.poly-stat-pipe {
+  flex-shrink: 0;
+  color: rgba(238, 234, 227, 0.4);
+}
+
+.poly-stat-divider {
+  flex-shrink: 0;
+  width: 1px;
+  height: 16px;
+  margin: 0 4px;
+  background-color: rgba(230, 234, 227, 0.4);
 }
 
 /* F12 — poly-click-stat */
 .poly-click-stat {
   color: rgba(255, 255, 255, 0.99);
   font-weight: 400;
+  padding: 2px 6px;
+  border-radius: 4px;
   border: 1px solid transparent;
   background: transparent;
   transition: all 0.15s ease;