.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; margin-top: 50px; } .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; } #component-0 .ant-input-textarea, .gradio-container .ant-input-textarea, .ant-input-textarea-large { height: auto !important; min-height: 300px !important; } /* Setting 버튼 스타일링 */ .setting-buttons { position: absolute; top: 0; right: 0; z-index: 1000; display: flex; gap: 8px; padding: 10px; background-color: white; } /* 우측 패널 스타일링 */ .right_panel { position: relative; min-height: 600px; padding-top: 50px; } .html_content { height: 100%; } /* Examples 섹션 스타일링 */ .examples-section { width: 100% !important; padding: 24px !important; margin-top: 24px !important; display: block !important; } .examples-section .ant-row { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 16px !important; width: 100% !important; } .examples-section .ant-col { width: 100% !important; display: block !important; position: relative !important; } .examples-section .ant-card { width: 100% !important; height: 100% !important; margin-bottom: 16px !important; cursor: pointer !important; } .examples-section .ant-card-meta { padding: 12px !important; } /* 반응형 그리드 */ @media (max-width: 768px) { .examples-section .ant-row { grid-template-columns: 1fr !important; } } @media (min-width: 769px) and (max-width: 1200px) { .examples-section .ant-row { grid-template-columns: repeat(2, 1fr) !important; } } /* 전체 레이아웃 조정 */ .ant-row { margin: 0 !important; }