API 상태 지연 필터 및 UI/로직 개선:

- 장애·지연 구분 및 집계 로직 추가 대응
- 지연 유형 반영 색상/태그/레이블/UI 경로 업데이트

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

@@ -11163,16 +11163,28 @@ body.index-page-body {
 .api-card:active .api-card-desc {
   color: #ffffff;
 }
-.api-card-badge {
+.api-card {
+  /* 그룹 배지 + 현재 상태 태그를 한 줄에 둔다.
+     기존 그룹 배지가 갖고 있던 절대 위치(top 39 / left 32)를 이 래퍼가 이어받는다 */
+}
+.api-card-badges {
   position: absolute;
   top: 39px;
   left: 32px;
+  right: 32px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+}
+.api-card-badge {
   background-color: #f2f2f3;
   border-radius: 10px;
   padding: 2px 20px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
+  min-width: 0;
 }
 .api-card-badge span {
   font-size: 14px;
@@ -11180,6 +11192,44 @@ body.index-page-body {
   font-weight: 500;
   color: #1b4ab7;
   white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.api-card {
+  /* 현재 상태 태그. 색 규격은 API Status 화면(.as-badge)과 동일.
+     상태를 못 받았을 때(빈 값)는 자리만 차지하지 않도록 숨긴다 */
+}
+.api-card-status {
+  flex-shrink: 0;
+  display: inline-flex;
+  align-items: center;
+  padding: 3px 12px;
+  border-radius: 10px;
+  font-size: 12px;
+  font-family: "Spoqa Han Sans Neo", sans-serif;
+  font-weight: 600;
+  white-space: nowrap;
+  background: #eef1f5;
+  color: #4b5563;
+}
+.api-card-status:empty {
+  display: none;
+}
+.api-card-status.is-outage {
+  background: #feeae7;
+  color: #c8362f;
+}
+.api-card-status.is-maintenance {
+  background: #e7f0fb;
+  color: #0a66c2;
+}
+.api-card-status.is-degraded {
+  background: #fef3c7;
+  color: #c77800;
+}
+.api-card-status.is-normal {
+  background: #e7f6ec;
+  color: #1b8c4a;
 }
 .api-card-title {
   position: absolute;
@@ -11499,7 +11549,7 @@ body.index-page-body {
   }
 }
 
-/* "기본 정보" 헤더: 좌측 제목 + 우측 "API 사용 신청" 버튼 */
+/* "기본 정보" 헤더: 좌측 제목 + 우측 현재 상태/상태 이력 */
 .api-basic-info-header {
   display: flex;
   align-items: center;
@@ -11508,6 +11558,55 @@ body.index-page-body {
   flex-wrap: wrap;
 }
 
+/* 현재 상태 배지 + "상태 이력 확인" 버튼.
+   색 규격은 API Status 화면(.as-badge)과 동일하게 맞춘다 */
+.api-status-inline {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  flex-wrap: wrap;
+}
+.api-status-inline .api-status-inline__label {
+  font-size: 13px;
+  font-weight: 500;
+  color: #4b5563;
+}
+.api-status-inline .api-status-inline__badge {
+  display: inline-flex;
+  align-items: center;
+  font-size: 12px;
+  font-weight: 600;
+  padding: 5px 12px;
+  border-radius: 999px;
+  letter-spacing: 0.02em;
+  white-space: nowrap;
+  background: #eef1f5;
+  color: #4b5563;
+}
+.api-status-inline .api-status-inline__badge.is-outage {
+  background: #feeae7;
+  color: #c8362f;
+}
+.api-status-inline .api-status-inline__badge.is-maintenance {
+  background: #e7f0fb;
+  color: #0a66c2;
+}
+.api-status-inline .api-status-inline__badge.is-degraded {
+  background: #fef3c7;
+  color: #c77800;
+}
+.api-status-inline .api-status-inline__badge.is-normal {
+  background: #e7f6ec;
+  color: #1b8c4a;
+}
+.api-status-inline .api-status-inline__badge.is-loading {
+  color: #6b7280;
+}
+.api-status-inline .api-status-inline__badge.is-muted {
+  background: #eef1f5;
+  color: #6b7280;
+}
+
 /* 하단 중앙 "API 사용 신청" 버튼 */
 .api-apply-footer {
   display: flex;
@@ -27003,7 +27102,7 @@ input[type=checkbox]:checked + .custom-checkbox {
 .api-status .as-legend .as-sw.is-none {
   background: var(--as-none-bg);
 }
-.api-status .as-legend .as-sw.is-both {
+.api-status .as-legend .as-sw.is-mixed, .api-status .as-legend .as-sw.is-both {
   background: var(--as-both);
 }
 .api-status .as-my-apis table {
@@ -27248,10 +27347,13 @@ input[type=checkbox]:checked + .custom-checkbox {
 .api-status .as-index-cell.has-incident {
   background: var(--as-err);
 }
+.api-status .as-index-cell.has-degraded {
+  background: var(--as-warn);
+}
 .api-status .as-index-cell.has-maintenance {
   background: var(--as-info);
 }
-.api-status .as-index-cell.has-both {
+.api-status .as-index-cell.has-mixed, .api-status .as-index-cell.has-both {
   background: var(--as-both);
 }
 .api-status .as-index-cell.is-selected {
@@ -28512,5 +28614,3 @@ input[type=checkbox]:checked + .custom-checkbox {
   white-space: nowrap;
   border: 0;
 }
-
-/*# sourceMappingURL=main.css.map */