API 카드 레이아웃 수정:

- 1행 4열 고정 및 반응형 flex-wrap 적용
- 카드 간격/정렬 방식 및 max-width 설정 추가

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

@@ -8860,8 +8860,9 @@ button.djb-comment-submit:disabled {
 }
 .api-showcase .api-cards-container {
   display: flex;
+  flex-wrap: wrap;
   gap: 29px;
-  justify-content: center;
+  justify-content: flex-start;
 }
 @media (max-width: 1024px) {
   .api-showcase .api-cards-container {
@@ -8878,6 +8879,9 @@ button.djb-comment-submit:disabled {
   }
 }
 .api-showcase .api-card {
+  flex: 0 0 calc((100% - 87px) / 4);
+  max-width: calc((100% - 87px) / 4);
+  box-sizing: border-box;
   height: 288px;
   background: #FFFFFF;
   border: 1px solid var(--border-color);
@@ -8903,12 +8907,16 @@ button.djb-comment-submit:disabled {
 }
 @media (max-width: 1024px) {
   .api-showcase .api-card {
+    flex: 0 0 calc(50% - 9px);
+    max-width: calc(50% - 9px);
     width: calc(50% - 9px);
     min-width: 250px;
   }
 }
 @media (max-width: 768px) {
   .api-showcase .api-card {
+    flex: 1 1 auto;
+    max-width: 100%;
     width: 100%;
     height: auto;
     min-width: unset;
@@ -28373,5 +28381,3 @@ input[type=checkbox]:checked + .custom-checkbox {
   white-space: nowrap;
   border: 0;
 }
-
-/*# sourceMappingURL=main.css.map */

src/main/resources/static/sass/pages/_index.scss

@@ -859,8 +859,9 @@
 
   .api-cards-container {
     display: flex;
+    flex-wrap: wrap;
     gap: 29px;
-    justify-content: center;
+    justify-content: flex-start;
 
     //@include respond-to('lg') {
     //  gap: 22px;
@@ -881,6 +882,10 @@
   }
 
   .api-card {
+    // 1행 4열 고정 (gap 29px * 3 = 87px)
+    flex: 0 0 calc((100% - 87px) / 4);
+    max-width: calc((100% - 87px) / 4);
+    box-sizing: border-box;
     height: 288px;
     background: #FFFFFF;
     border: 1px solid var(--border-color);
@@ -909,12 +914,16 @@
     }
 
     @include respond-to('md') {
+      flex: 0 0 calc(50% - 9px);
+      max-width: calc(50% - 9px);
       width: calc(50% - 9px);
       min-width: 250px;
     }
 
     @include respond-to('sm') {
       // Figma 모바일: 144px width, auto height, padding 18px 17px
+      flex: 1 1 auto;
+      max-width: 100%;
       width: 100%;
       height: auto;
       min-width: unset;

src/main/resources/templates/views/apps/main/index.html

@@ -226,8 +226,8 @@
         </div>
 
         <div class="api-cards-container">
-          <!-- Services 데이터를 반복하여 API 카드 표시 (최대 4개) -->
+          <!-- main.service.list 에 등록된 서비스 전체 표시 (1행 4열, 초과분은 다음 행으로) -->
-          <div class="api-card" th:each="service, iterStat : ${services}" th:if="${iterStat.index < 4}"
+          <div class="api-card" th:each="service : ${services}"
             th:onclick="${service.id != null} ? |location.href='@{/apis(groupIds=${service.id})}'| : |location.href='@{/apis}'|">
             <h3 class="card-title" th:text="${service.groupName}">API 서비스</h3>
             <p class="card-description">