Update app.css

app.css

@@ -95,31 +95,50 @@ footer, .footer, div[class*="footer"], #footer {
     height: 100%;
 }
 
-/* Examples 카드 스타일링 */
-.ant-card {
-    margin-bottom: 8px;
-    cursor: pointer;
+/* Examples 섹션 스타일링 */
+.examples-section {
     width: 100%;
+    padding: 24px;
+    margin-top: 24px;
+}
+
+.examples-section .ant-row {
+    display: flex !important;
+    flex-wrap: wrap !important;
 }
 
-.ant-card:hover {
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+.examples-section .ant-col {
+    flex: 0 0 33.333333% !important;
+    max-width: 33.333333% !important;
+    padding: 8px !important;
+}
+
+.examples-section .ant-card {
+    height: 100%;
+    margin: 0;
+    cursor: pointer;
 }
 
-.ant-card-meta {
+.examples-section .ant-card-meta {
     padding: 12px;
 }
 
-/* 전체 레이아웃 조정 */
-.ant-row {
-    margin: 0 !important;
+/* 반응형 레이아웃 */
+@media (max-width: 768px) {
+    .examples-section .ant-col {
+        flex: 0 0 100% !important;
+        max-width: 100% !important;
+    }
 }
 
-/* 좌측 패널 Examples 영역 */
-.ant-flex {
-    width: 100%;
+@media (min-width: 769px) and (max-width: 1200px) {
+    .examples-section .ant-col {
+        flex: 0 0 50% !important;
+        max-width: 50% !important;
+    }
 }
 
-.ant-divider {
-    margin: 24px 0 12px 0;
+/* 전체 레이아웃 조정 */
+.ant-row {
+    margin: 0 !important;
 }