Update app_css-backup1.css

app_css-backup1.css

@@ -97,47 +97,50 @@ footer, .footer, div[class*="footer"], #footer {
 
 /* Examples 섹션 스타일링 */
 .examples-section {
-    width: 100%;
-    padding: 24px;
-    margin-top: 24px;
+    width: 100% !important;
+    padding: 24px !important;
+    margin-top: 24px !important;
+    display: block !important;
 }
 
 .examples-section .ant-row {
-    display: flex !important;
-    flex-wrap: wrap !important;
+    display: grid !important;
+    grid-template-columns: repeat(3, 1fr) !important;
+    gap: 16px !important;
+    width: 100% !important;
 }
 
 .examples-section .ant-col {
-    flex: 0 0 33.333333% !important;
-    max-width: 33.333333% !important;
-    padding: 8px !important;
+    width: 100% !important;
+    display: block !important;
+    position: relative !important;
 }
 
 .examples-section .ant-card {
-    height: 100%;
-    margin: 0;
-    cursor: pointer;
+    width: 100% !important;
+    height: 100% !important;
+    margin-bottom: 16px !important;
+    cursor: pointer !important;
 }
 
 .examples-section .ant-card-meta {
-    padding: 12px;
+    padding: 12px !important;
 }
 
-/* 반응형 레이아웃 */
+/* 반응형 그리드 */
 @media (max-width: 768px) {
-    .examples-section .ant-col {
-        flex: 0 0 100% !important;
-        max-width: 100% !important;
+    .examples-section .ant-row {
+        grid-template-columns: 1fr !important;
     }
 }
 
 @media (min-width: 769px) and (max-width: 1200px) {
-    .examples-section .ant-col {
-        flex: 0 0 50% !important;
-        max-width: 50% !important;
+    .examples-section .ant-row {
+        grid-template-columns: repeat(2, 1fr) !important;
     }
 }
 
+
 /* 전체 레이아웃 조정 */
 .ant-row {
     margin: 0 !important;