모바일 - 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;