Update app.css

app.css

@@ -5,8 +5,6 @@
   align-items: center;
 }
 
-
-
 .render_header {
   height: 30px;
   width: 100%;
@@ -29,6 +27,7 @@
 .render_header > .header_btn:nth-child(2) {
   background-color: #faad14;
 }
+
 .render_header > .header_btn:nth-child(3) {
   background-color: #52c41a;
 }
@@ -46,8 +45,6 @@
   border: none;
 }
 
-
-
 /* Footer 숨기기 */
 footer, .footer, div[class*="footer"], #footer {
     display: none !important;
@@ -75,25 +72,70 @@ footer, .footer, div[class*="footer"], #footer {
     min-height: 300px !important;
 }
 
-
-
-.examples-section {
-    margin-top: 24px;
-    padding: 0 24px;
-}
-
-.setting-buttons {
+/* Setting 버튼 컨테이너 */
+.setting-buttons-container {
     position: absolute;
     top: 10px;
     right: 10px;
     z-index: 1000;
+    padding: 10px;
+}
+
+/* Examples 섹션 */
+.examples-container {
+    margin-top: 24px;
+    padding: 0 24px;
+    width: 100%;
 }
 
 .right_panel {
-    height: calc(100vh - 300px); /* examples 섹션을 위한 공간 확보 */
     position: relative;
+    min-height: 600px;
 }
 
 .html_content {
     height: 100%;
+}
+
+/* 반응형 그리드를 위한 미디어 쿼리 */
+@media (max-width: 768px) {
+    .examples-container .ant-col {
+        flex: 0 0 100%;
+        max-width: 100%;
+    }
+}
+
+@media (min-width: 769px) and (max-width: 1200px) {
+    .examples-container .ant-col {
+        flex: 0 0 50%;
+        max-width: 50%;
+    }
+}
+
+@media (min-width: 1201px) {
+    .examples-container .ant-col {
+        flex: 0 0 33.333333%;
+        max-width: 33.333333%;
+    }
+}
+
+/* Examples 카드 스타일링 */
+.examples-container .ant-card {
+    margin-bottom: 16px;
+    height: 100%;
+}
+
+.examples-container .ant-card-meta {
+    padding: 12px;
+}
+
+/* Setting 버튼 스타일링 */
+.setting-buttons-container .ant-btn {
+    margin-left: 8px;
+}
+
+/* 전체 레이아웃 조정 */
+.ant-row {
+    margin-right: 0 !important;
+    margin-left: 0 !important;
 }