API Status 개선 및 조회 기간 설정 추가

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

@@ -26628,6 +26628,16 @@ input[type=checkbox]:checked + .custom-checkbox {
   color: #ffffff;
 }
 
+.as-title-banner,
+.as-title-banner h1,
+.api-status,
+.api-status h1,
+.api-status h2,
+.api-status h3,
+.api-status h4 {
+  font-family: "Spoqa Han Sans Neo", "SpoqaHanSans", "Noto Sans KR", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+}
+
 .as-title-banner {
   margin: 44px 0 28px;
   border-radius: 12px;

src/main/resources/static/sass/pages/_api-status.scss

@@ -3,6 +3,19 @@
 // 설계: architecture/01-api-status/02-screen-design
 // 타이틀 배너: Figma eapim-portal node 1:16
 // ============================================================
+@use '../abstracts/variables' as *;
+
+// API Status 화면은 제목 포함 전부 본문 폰트(Spoqa Han Sans)를 쓴다.
+// 전역 타이포가 h1~h6 에 $font-family-heading(OneShinhan 우선)을 지정하므로 페이지 범위에서 되돌린다.
+.as-title-banner,
+.as-title-banner h1,
+.api-status,
+.api-status h1,
+.api-status h2,
+.api-status h3,
+.api-status h4 {
+  font-family: $font-family-primary;
+}
 
 // 타이틀 배너 — 레이아웃의 .container 안에 놓이므로 컨테이너 폭을 따른다
 .as-title-banner {
@@ -92,6 +105,9 @@
   --as-pill: 999px;
 
   display: grid;
+  // minmax(0,1fr): grid 자식의 암묵적 min-width(auto)를 해제한다.
+  // 90일 막대(90개 × 최소폭)가 카드의 최소 폭을 밀어올려 좁은 화면에서 카드가 잘리는 것 방지
+  grid-template-columns: minmax(0, 1fr);
   gap: 20px;
   padding: 0 0 70px;
 
@@ -827,7 +843,14 @@
       .as-filter-right { justify-content: space-between; }
     }
 
-    .as-index-bar { height: 36px; }
+    // 90일 바: 셀을 균등 축소하지 않고 최소 터치 폭을 보장한 뒤 가로 스크롤
+    .as-index-bar {
+      height: 40px;
+
+      .as-index-cell { flex: 0 0 12px; }
+    }
+
+    .as-uptime .as-bar-chart .as-bar { flex: 0 0 12px; }
 
     .as-issue-card { padding: 18px 16px; }
     .as-issue-title { font-size: 17px; }