Update app_css-backup1.css

app_css-backup1.css

@@ -10,6 +10,7 @@
   width: 100%;
   padding: 5px 16px;
   background-color: #f5f5f5;
+  margin-top: 50px;
 }
 
 .header_btn {
@@ -54,7 +55,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 +65,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,74 +72,73 @@ footer, .footer, div[class*="footer"], #footer {
     min-height: 300px !important;
 }
 
-/* Setting 버튼 컨테이너 */
-.setting-buttons-container {
+/* 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-container {
-    margin-top: 24px;
-    padding: 0 24px;
-    width: 100%;
-}
-
+/* 우측 패널 스타일링 */
 .right_panel {
     position: relative;
     min-height: 600px;
+    padding-top: 50px;
 }
 
 .html_content {
     height: 100%;
 }
 
-/* 반응형 그리드를 위한 미디어 쿼리 */
-@media (max-width: 768px) {
-    .examples-container .ant-col {
-        flex: 0 0 100%;
-        max-width: 100%;
-    }
+/* Examples 섹션 스타일링 */
+.examples-section {
+    width: 100%;
+    padding: 24px;
+    margin-top: 24px;
 }
 
-@media (min-width: 769px) and (max-width: 1200px) {
-    .examples-container .ant-col {
-        flex: 0 0 50%;
-        max-width: 50%;
-    }
+.examples-section .ant-row {
+    display: flex !important;
+    flex-wrap: wrap !important;
 }
 
-@media (min-width: 1201px) {
-    .examples-container .ant-col {
-        flex: 0 0 33.333333%;
-        max-width: 33.333333%;
-    }
+.examples-section .ant-col {
+    flex: 0 0 33.333333% !important;
+    max-width: 33.333333% !important;
+    padding: 8px !important;
 }
 
-/* Examples 카드 스타일링 */
-.examples-container .ant-card {
-    margin-bottom: 16px;
+.examples-section .ant-card {
     height: 100%;
+    margin: 0;
+    cursor: pointer;
 }
 
-.examples-container .ant-card-meta {
+.examples-section .ant-card-meta {
     padding: 12px;
 }
 
-/* Setting 버튼 스타일링 */
-.setting-buttons-container .ant-btn {
-    margin-left: 8px;
+/* 반응형 레이아웃 */
+@media (max-width: 768px) {
+    .examples-section .ant-col {
+        flex: 0 0 100% !important;
+        max-width: 100% !important;
+    }
 }
 
-/* 전체 레이아웃 조정 */
-.ant-row {
-    margin-right: 0 !important;
-    margin-left: 0 !important;
+@media (min-width: 769px) and (max-width: 1200px) {
+    .examples-section .ant-col {
+        flex: 0 0 50% !important;
+        max-width: 50% !important;
+    }
 }
 
-.main-content {
-    margin-bottom: 24px;
+/* 전체 레이아웃 조정 */
+.ant-row {
+    margin: 0 !important;
 }