대시보드 시스템 상태 카드 — 세로 블록바+신호등 2열 레이아웃으로 재설계

Co-authored-by: Cursor <cursoragent@cursor.com>

frontend/src/styles/dashboardCommand.css

@@ -326,32 +326,95 @@
   margin-top: 2px;
 }
 
-/* ── 시스템 상태 — 3열 신호등 (가로 배치) ── */
+/* ── 시스템 상태 — 2열 리소스 카드 (가로 배치) ── */
 .gc-dash-sys-status {
   display: flex;
   flex-direction: row;
-  align-items: flex-start;
-  justify-content: space-around;
-  gap: 8px;
-  padding: 8px 4px;
+  gap: 10px;
   width: 100%;
 }
 
-.gc-sys-tl-item {
+/* ── DashboardSystemCard ── */
+.gc-sys-card {
+  flex: 1;
   display: flex;
   flex-direction: column;
   align-items: center;
-  gap: 4px;
-  flex: 1;
+  gap: 6px;
+  padding: 10px 8px;
+  border-radius: 10px;
+  border: 1px solid var(--se-border);
+  background: color-mix(in srgb, var(--se-bg) 60%, transparent);
+  min-width: 0;
 }
 
-.gc-sys-tl-label {
+.gc-sys-card-title {
   font-size: 0.65rem;
-  font-weight: 600;
-  color: var(--se-text-muted);
-  letter-spacing: 0.03em;
+  font-weight: 700;
+  letter-spacing: 0.06em;
   text-transform: uppercase;
-  margin-top: 2px;
+  color: var(--se-text-muted);
+}
+
+.gc-sys-card-body {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 8px;
+}
+
+/* 세로 블록 바 */
+.gc-sys-bar-wrap {
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
+}
+
+.gc-sys-block {
+  width: 18px;
+  height: 8px;
+  border-radius: 2px;
+  background: color-mix(in srgb, var(--se-text-dim, #666) 18%, #111);
+  opacity: 0.28;
+}
+
+.gc-sys-block--on { opacity: 1; }
+
+/* 하위 블록 (낮은 사용률 = 초록) */
+.gc-sys-block--lo.gc-sys-block--on {
+  background: #34d399;
+  box-shadow: 0 0 4px rgba(52,211,153,0.6);
+}
+
+/* 중간 블록 (중간 사용률 = 노랑) */
+.gc-sys-block--mid.gc-sys-block--on {
+  background: #fbbf24;
+  box-shadow: 0 0 4px rgba(251,191,36,0.6);
+}
+
+/* 상위 블록 (높은 사용률 = 빨강) */
+.gc-sys-block--hi.gc-sys-block--on {
+  background: #f87171;
+  box-shadow: 0 0 4px rgba(248,113,113,0.6);
+}
+
+.gc-sys-card-foot {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 2px;
+}
+
+.gc-sys-card-pct {
+  font-size: 0.95rem;
+  font-weight: 800;
+  color: var(--se-text);
+  line-height: 1;
+}
+
+.gc-sys-card-detail {
+  font-size: 0.62rem;
+  color: var(--se-text-muted);
 }
 
 /* ── Indicator bars ── */