Create app_css-backup1.css

app_css-backup1.css

@@ -0,0 +1,145 @@
+.left_header {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+.render_header {
+  height: 30px;
+  width: 100%;
+  padding: 5px 16px;
+  background-color: #f5f5f5;
+}
+
+.header_btn {
+  display: inline-block;
+  height: 10px;
+  width: 10px;
+  border-radius: 50%;
+  margin-right: 4px;
+}
+
+.render_header > .header_btn:nth-child(1) {
+  background-color: #f5222d;
+}
+
+.render_header > .header_btn:nth-child(2) {
+  background-color: #faad14;
+}
+
+.render_header > .header_btn:nth-child(3) {
+  background-color: #52c41a;
+}
+
+.right_content {
+  height: 920px; 
+  display: flex; 
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+.history_chatbot button {
+  background: none;
+  border: none;
+}
+
+/* Footer 숨기기 */
+footer, .footer, div[class*="footer"], #footer {
+    display: none !important;
+    visibility: hidden !important;
+    height: 0 !important;
+    padding: 0 !important;
+    margin: 0 !important;
+}
+
+/* 새로운 Textarea 선택자 */
+#component-0 textarea,
+.gradio-container textarea,
+.ant-input-textarea-large textarea {
+    height: 300px !important;
+    min-height: 300px !important;
+    max-height: none !important;
+    resize: vertical !important;
+}
+
+/* textarea의 부모 컨테이너도 함께 조정 */
+#component-0 .ant-input-textarea,
+.gradio-container .ant-input-textarea,
+.ant-input-textarea-large {
+    height: auto !important;
+    min-height: 300px !important;
+}
+
+/* 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 {
+    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;
+}
+
+.main-content {
+    margin-bottom: 24px;
+}