모바일 - api 마켓 디자인 반영

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

@@ -8687,6 +8687,140 @@ select.form-control {
   color: #0049b4;
 }
 
+@media (max-width: 768px) {
+  .api-detail-tabs {
+    gap: 0;
+    margin-bottom: 24px;
+  }
+  .api-detail-tabs .tab-button {
+    flex: 1;
+    padding: 8px 16px;
+    font-size: 14px;
+    text-align: center;
+  }
+  .api-overview-card {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+    padding-bottom: 24px;
+  }
+  .api-overview-card .api-overview-header {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 8px;
+    width: 100%;
+  }
+  .api-overview-card .api-method-badge {
+    padding: 6px 12px;
+    font-size: 12px;
+    flex-shrink: 0;
+    height: auto;
+  }
+  .api-overview-card .api-endpoint {
+    width: 100%;
+    flex: none;
+  }
+  .api-overview-card .api-endpoint code {
+    display: block;
+    padding: 4px 8px;
+    font-size: 14px;
+    word-break: break-all;
+    overflow-wrap: break-word;
+  }
+  .api-overview-card .api-overview-info {
+    width: 100%;
+    margin-top: 8px;
+  }
+  .api-overview-card .api-overview-info h4 {
+    font-size: 14px;
+    margin-bottom: 8px;
+  }
+  .api-overview-card .api-overview-info .api-info-table {
+    width: 100%;
+  }
+  .api-overview-card .api-simple-description {
+    width: 100%;
+    padding: 8px 0;
+  }
+  .api-overview-card .api-simple-description p {
+    font-size: 14px;
+  }
+  .api-overview-card .detail-content {
+    width: 100%;
+  }
+  .api-detail-card {
+    padding-bottom: 24px;
+  }
+  .api-detail-card h3 {
+    font-size: 16px;
+    margin-bottom: 8px;
+  }
+  .api-detail-card .detail-content {
+    font-size: 12px;
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+  }
+  .api-detail-card .detail-content table {
+    min-width: 500px;
+    margin: 8px 0;
+  }
+  .api-detail-card .detail-content table th, .api-detail-card .detail-content table td {
+    padding: 4px 8px;
+    font-size: 12px;
+    white-space: nowrap;
+  }
+  .api-detail-card .detail-content pre {
+    padding: 8px;
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+  }
+  .api-detail-card .detail-content pre code {
+    font-size: 12px;
+    white-space: pre;
+    word-break: normal;
+  }
+  .api-info-table {
+    display: block;
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+  }
+  .api-info-table tr {
+    display: table-row;
+  }
+  .api-info-table th {
+    padding: 4px 8px;
+    font-size: 12px;
+    width: auto;
+    min-width: 80px;
+    white-space: nowrap;
+  }
+  .api-info-table td {
+    padding: 4px 8px;
+    font-size: 12px;
+  }
+  .api-info-table td code {
+    padding: 1px 4px;
+    font-size: 10px;
+  }
+  .api-details-grid {
+    gap: 16px;
+  }
+  .tab-content {
+    gap: 24px;
+    min-height: 150px;
+    max-width: 100%;
+    overflow-x: hidden;
+  }
+  .api-detail-content {
+    max-width: 100%;
+    overflow-x: hidden;
+  }
+  .api-market-content {
+    max-width: 100vw;
+    overflow-x: hidden;
+  }
+}
 .login-page {
   display: flex;
   align-items: center;

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

@@ -822,3 +822,180 @@
     }
   }
 }
+
+// -----------------------------------------------------------------------------
+// Mobile Responsive Styles (sm: 768px)
+// -----------------------------------------------------------------------------
+@media (max-width: $breakpoint-sm) {
+  // API Detail Tabs - Mobile
+  .api-detail-tabs {
+    gap: 0;
+    margin-bottom: $spacing-lg;
+
+    .tab-button {
+      flex: 1;
+      padding: $spacing-sm $spacing-md;
+      font-size: $font-size-sm;
+      text-align: center;
+    }
+  }
+
+  // API Overview Card - Mobile
+  .api-overview-card {
+    display: flex;
+    flex-direction: column;
+    gap: $spacing-md;
+    padding-bottom: $spacing-lg;
+
+    .api-overview-header {
+      display: flex;
+      flex-direction: column;
+      align-items: flex-start;
+      gap: $spacing-sm;
+      width: 100%;
+    }
+
+    .api-method-badge {
+      padding: 6px 12px;
+      font-size: $font-size-xs;
+      flex-shrink: 0;
+      height: auto;
+    }
+
+    .api-endpoint {
+      width: 100%;
+      flex: none;
+
+      code {
+        display: block;
+        padding: $spacing-xs $spacing-sm;
+        font-size: $font-size-sm;
+        word-break: break-all;
+        overflow-wrap: break-word;
+      }
+    }
+
+    .api-overview-info {
+      width: 100%;
+      margin-top: $spacing-sm;
+
+      h4 {
+        font-size: $font-size-sm;
+        margin-bottom: $spacing-sm;
+      }
+
+      .api-info-table {
+        width: 100%;
+      }
+    }
+
+    .api-simple-description {
+      width: 100%;
+      padding: $spacing-sm 0;
+
+      p {
+        font-size: $font-size-sm;
+      }
+    }
+
+    .detail-content {
+      width: 100%;
+    }
+  }
+
+  // API Detail Card - Mobile
+  .api-detail-card {
+    padding-bottom: $spacing-lg;
+
+    h3 {
+      font-size: $font-size-base;
+      margin-bottom: $spacing-sm;
+    }
+
+    // Detail Content - 모바일에서 가로 스크롤 지원
+    .detail-content {
+      font-size: $font-size-xs;
+      overflow-x: auto;
+      -webkit-overflow-scrolling: touch;
+
+      // 테이블 래퍼 - 가로 스크롤
+      table {
+        min-width: 500px; // 테이블 최소 너비 보장
+        margin: $spacing-sm 0;
+
+        th, td {
+          padding: $spacing-xs $spacing-sm;
+          font-size: $font-size-xs;
+          white-space: nowrap;
+        }
+      }
+
+      // Pre/Code 블록 - 가로 스크롤
+      pre {
+        padding: $spacing-sm;
+        overflow-x: auto;
+        -webkit-overflow-scrolling: touch;
+
+        code {
+          font-size: $font-size-xs;
+          white-space: pre;
+          word-break: normal;
+        }
+      }
+    }
+  }
+
+  // API Info Table - Mobile
+  .api-info-table {
+    display: block;
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+
+    tr {
+      display: table-row;
+    }
+
+    th {
+      padding: $spacing-xs $spacing-sm;
+      font-size: $font-size-xs;
+      width: auto;
+      min-width: 80px;
+      white-space: nowrap;
+    }
+
+    td {
+      padding: $spacing-xs $spacing-sm;
+      font-size: $font-size-xs;
+
+      code {
+        padding: 1px 4px;
+        font-size: 10px;
+      }
+    }
+  }
+
+  // API Details Grid - Mobile
+  .api-details-grid {
+    gap: $spacing-md;
+  }
+
+  // Tab Content - Mobile (화면 폭 제한)
+  .tab-content {
+    gap: $spacing-lg;
+    min-height: 150px;
+    max-width: 100%;
+    overflow-x: hidden;
+  }
+
+  // API Detail Content - Mobile (화면 폭 제한)
+  .api-detail-content {
+    max-width: 100%;
+    overflow-x: hidden;
+  }
+
+  // API Market Content - Mobile (화면 폭 제한)
+  .api-market-content {
+    max-width: 100vw;
+    overflow-x: hidden;
+  }
+}