Update app.css

app.css

@@ -10,6 +10,7 @@
   width: 100%;
   padding: 5px 16px;
   background-color: #f5f5f5;
+  margin-top: 50px;  /* Setting 버튼을 위한 여백 추가 */
 }
 
 .header_btn {
@@ -74,28 +75,31 @@ footer, .footer, div[class*="footer"], #footer {
 /* Setting 버튼 스타일링 */
 .setting-buttons {
     position: absolute;
-    top: 10px;
-    right: 10px;
+    top: 0;
+    right: 0;
     z-index: 1000;
     display: flex;
     gap: 8px;
+    padding: 10px;
+    background-color: white;
 }
 
 /* Examples 섹션 스타일링 */
 .examples-section {
-    margin-top: 24px;
-    padding: 0 24px;
     width: 100%;
+    padding: 24px;
+    margin-top: 24px;
 }
 
 .examples-section .ant-row {
     display: flex;
     flex-wrap: wrap;
-    margin: -8px;
+    gap: 16px;
 }
 
 .examples-section .ant-col {
-    padding: 8px;
+    flex: 0 0 calc(33.333% - 16px);
+    max-width: calc(33.333% - 16px);
 }
 
 .examples-section .ant-card {
@@ -111,7 +115,7 @@ footer, .footer, div[class*="footer"], #footer {
 .right_panel {
     position: relative;
     min-height: 600px;
-    margin-top: 10px;
+    padding-top: 50px;  /* Setting 버튼을 위한 여백 */
 }
 
 .html_content {
@@ -121,19 +125,15 @@ footer, .footer, div[class*="footer"], #footer {
 /* 반응형 레이아웃 */
 @media (max-width: 768px) {
     .examples-section .ant-col {
-        width: 100%;
+        flex: 0 0 100%;
+        max-width: 100%;
     }
 }
 
 @media (min-width: 769px) and (max-width: 1200px) {
     .examples-section .ant-col {
-        width: 50%;
-    }
-}
-
-@media (min-width: 1201px) {
-    .examples-section .ant-col {
-        width: 33.333333%;
+        flex: 0 0 calc(50% - 16px);
+        max-width: calc(50% - 16px);
     }
 }