Update app.css

app.css

@@ -54,7 +54,7 @@ footer, .footer, div[class*="footer"], #footer {
     margin: 0 !important;
 }
 
-/* 새로운 Textarea 선택자 */
+/* Textarea 스타일링 */
 #component-0 textarea,
 .gradio-container textarea,
 .ant-input-textarea-large textarea {
@@ -64,7 +64,6 @@ footer, .footer, div[class*="footer"], #footer {
     resize: vertical !important;
 }
 
-/* textarea의 부모 컨테이너도 함께 조정 */
 #component-0 .ant-input-textarea,
 .gradio-container .ant-input-textarea,
 .ant-input-textarea-large {
@@ -72,75 +71,73 @@ footer, .footer, div[class*="footer"], #footer {
     min-height: 300px !important;
 }
 
-/* Setting 버튼 관련 스타일 수정 */
-.setting-buttons-row {
-    padding: 10px;
-    margin-bottom: 10px;
-    background: transparent;
-    position: relative;
+/* Setting 버튼 스타일링 */
+.setting-buttons {
+    position: absolute;
+    top: 10px;
+    right: 10px;
     z-index: 1000;
+    display: flex;
+    gap: 8px;
 }
 
-/* Examples 섹션 스타일 수정 */
+/* Examples 섹션 스타일링 */
 .examples-section {
     margin-top: 24px;
     padding: 0 24px;
     width: 100%;
-    display: flex;
-    flex-direction: column;
 }
 
 .examples-section .ant-row {
     display: flex;
     flex-wrap: wrap;
-    margin: 0 -8px;
+    margin: -8px;
 }
 
 .examples-section .ant-col {
-    padding: 0 8px;
-    margin-bottom: 16px;
-    flex: 0 0 33.333333%;
-    max-width: 33.333333%;
+    padding: 8px;
 }
 
 .examples-section .ant-card {
     height: 100%;
-    margin-bottom: 0;
+    cursor: pointer;
 }
 
 .examples-section .ant-card-meta {
     padding: 12px;
 }
 
-/* 우측 패널 스타일 수정 */
+/* 우측 패널 스타일링 */
 .right_panel {
     position: relative;
     min-height: 600px;
-    border: 1px solid #e8e8e8;
-    border-radius: 4px;
-    overflow: hidden;
-    margin-top: 60px;  /* Setting 버튼을 위한 여백 */
+    margin-top: 10px;
 }
 
 .html_content {
     height: 100%;
 }
 
-/* 반응형 레이아웃을 위한 미디어 쿼리 */
+/* 반응형 레이아웃 */
 @media (max-width: 768px) {
     .examples-section .ant-col {
-        flex: 0 0 100%;
-        max-width: 100%;
+        width: 100%;
     }
 }
 
 @media (min-width: 769px) and (max-width: 1200px) {
     .examples-section .ant-col {
-        flex: 0 0 50%;
-        max-width: 50%;
+        width: 50%;
+    }
+}
+
+@media (min-width: 1201px) {
+    .examples-section .ant-col {
+        width: 33.333333%;
     }
 }
 
-.main-content {
-    margin-bottom: 24px;
+/* 전체 레이아웃 조정 */
+.ant-row {
+    margin: 0 !important;
 }