API 상태 타임라인 개선:

- 진행 상태에 따른 상태 색 및 한글 라벨 표시 추가

src/main/resources/static/css/main.css

@@ -27135,7 +27135,7 @@ input[type=checkbox]:checked + .custom-checkbox {
 }
 .api-status .as-alert-card .as-tl-row {
   display: grid;
-  grid-template-columns: 60px 76px 1fr;
+  grid-template-columns: 60px 76px 64px 1fr;
   gap: 12px;
   font-size: 13px;
 }
@@ -27143,6 +27143,37 @@ input[type=checkbox]:checked + .custom-checkbox {
   color: var(--as-muted);
   font-variant-numeric: tabular-nums;
 }
+.api-status .as-alert-card .as-tl-row .as-tl-state {
+  font-size: 11px;
+  font-weight: 500;
+  text-align: center;
+  height: -webkit-fit-content;
+  height: fit-content;
+  padding: 2px 8px;
+  border-radius: var(--as-pill);
+  background: var(--as-gray-bg);
+  color: var(--as-text-2);
+}
+.api-status .as-alert-card .as-tl-row .as-tl-state.state-INVESTIGATING {
+  background: var(--as-err-bg);
+  color: var(--as-err);
+}
+.api-status .as-alert-card .as-tl-row .as-tl-state.state-IDENTIFIED {
+  background: #fbe9d7;
+  color: #c95a0f;
+}
+.api-status .as-alert-card .as-tl-row .as-tl-state.state-MONITORING {
+  background: var(--as-warn-bg);
+  color: var(--as-warn);
+}
+.api-status .as-alert-card .as-tl-row .as-tl-state.state-RESOLVED {
+  background: var(--as-ok-bg);
+  color: var(--as-ok);
+}
+.api-status .as-alert-card .as-tl-row .as-tl-state.state-CANCELED {
+  background: var(--as-gray-bg);
+  color: var(--as-muted);
+}
 .api-status .as-alert-card .as-tl-row .as-tl-who {
   font-size: 11px;
   font-weight: 500;
@@ -27720,7 +27751,7 @@ input[type=checkbox]:checked + .custom-checkbox {
     margin-bottom: 12px;
   }
   .api-status .as-alert-card .as-tl-row {
-    grid-template-columns: 52px 1fr;
+    grid-template-columns: 52px 68px 1fr;
   }
   .api-status .as-alert-card .as-tl-who {
     display: none;