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 */