Update app.css

app.css

@@ -10,7 +10,7 @@
   width: 100%;
   padding: 5px 16px;
   background-color: #f5f5f5;
-  margin-top: 50px;  /* Setting 버튼을 위한 여백 추가 */
+  margin-top: 50px;
 }
 
 .header_btn {
@@ -84,58 +84,65 @@ footer, .footer, div[class*="footer"], #footer {
     background-color: white;
 }
 
-/* Examples 섹션 스타일링 */
+/* 우측 패널 스타일링 */
+.right_panel {
+    position: relative;
+    min-height: 600px;
+    padding-top: 50px;
+}
+
+.html_content {
+    height: 100%;
+}
+
+/* Examples 섹션 완전 수정 */
 .examples-section {
-    width: 100%;
-    padding: 24px;
-    margin-top: 24px;
+    margin-top: 2rem;
+    padding: 0 1rem;
+}
+
+.examples-section .ant-divider {
+    margin: 1rem 0;
 }
 
 .examples-section .ant-row {
-    display: flex;
-    flex-wrap: wrap;
-    margin: -8px;  /* 네거티브 마진 추가 */
+    display: grid !important;
+    grid-template-columns: repeat(3, 1fr) !important;
+    gap: 1rem !important;
+    padding: 0 1rem;
 }
 
 .examples-section .ant-col {
-    padding: 8px;
-    width: 33.333333%;
-    flex: 0 0 33.333333%;
+    width: 100% !important;
+    padding: 0 !important;
 }
 
 .examples-section .ant-card {
-    height: 100%;
-    cursor: pointer;
-    margin: 0;  /* 기존 마진 제거 */
+    width: 100%;
+    margin-bottom: 1rem;
+    border: 1px solid #e8e8e8;
+    border-radius: 4px;
+    transition: all 0.3s;
 }
 
-.examples-section .ant-card-meta {
-    padding: 12px;
+.examples-section .ant-card:hover {
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
 }
 
-/* 우측 패널 스타일링 */
-.right_panel {
-    position: relative;
-    min-height: 600px;
-    padding-top: 50px;  /* Setting 버튼을 위한 여백 */
-}
-
-.html_content {
-    height: 100%;
+.examples-section .ant-card-meta {
+    padding: 1rem;
 }
 
 /* 반응형 레이아웃 */
 @media (max-width: 768px) {
-    .examples-section .ant-col {
-        width: 100%;
-        flex: 0 0 100%;
+    .examples-section .ant-row {
+        grid-template-columns: 1fr !important;
     }
 }
 
 @media (min-width: 769px) and (max-width: 1200px) {
-    .examples-section .ant-col {
-        width: 50%;
-        flex: 0 0 50%;
+    .examples-section .ant-row {
+        grid-template-columns: repeat(2, 1fr) !important;
     }
 }