Update app.css

app.css

@@ -1,4 +1,3 @@
-<style>
 /* Modern color scheme */
 :root {
   /* 주요 브랜드 컬러 */
@@ -32,341 +31,8 @@ body {
   background: var(--background);
   color: var(--text-primary);
   line-height: 1.5;
-}
-
-.left_header {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  background: linear-gradient(135deg, var(--surface), var(--neutral-100));
-  backdrop-filter: blur(10px);
-  border-radius: 24px;
-  padding: 2rem;
-  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
-  border: 1px solid var(--neutral-200);
-  text-align: center;
-  margin-bottom: 2rem;
-}
-
-.left_header img {
-  width: 180px;
-  margin-bottom: 1rem;
-  border-radius: 12px;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
-}
-
-.left_header h1 {
-  margin: 0.5rem 0;
-  font-weight: 600;
-  color: var(--text-primary);
-}
-
-.right_panel {
-  position: relative;
-  height: 100%; /* 전체 화면을 차지하도록 변경 */
-  display: flex;
-  flex-direction: column;
-}
-
-.html_content {
-  flex: 1; /* 부모 안에서 남은 공간을 모두 차지 */
-  display: flex;
-  flex-direction: column;
-  height: 100%; /* 높이를 100%로 */
-}
-
-.html_content iframe {
-  flex: 1; /* 남은 공간을 모두 사용 */
-  width: 100%;
-  height: 100%; /* 높이 설정 */
-  border: none;
-  display: block;
-}
-
-/* iframe 내부 스타일을 위한 추가 */
-.html_content iframe html,
-.html_content iframe body {
   margin: 0;
   padding: 0;
-  height: 100%;
-  width: 100%;
-  overflow: auto;
-}
-
-.render_header {
-  height: 30px;
-  background: var(--neutral-100);
-  border-radius: 8px 8px 0 0;
-  display: flex;
-  align-items: center;
-  padding: 0 12px;
-  gap: 6px;
-  flex-shrink: 0;
-}
-
-.header_btn {
-  width: 12px;
-  height: 12px;
-  border-radius: 50%;
-}
-
-.render_header > .header_btn:nth-child(1) {
-  background-color: var(--error);
-}
-
-.render_header > .header_btn:nth-child(2) {
-  background-color: var(--warning);
-}
-
-.render_header > .header_btn:nth-child(3) {
-  background-color: var(--success);
-}
-
-.right_content {
-  flex: 1;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  background: var(--surface);
-}
-
-.ant-tabs-content {
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-}
-
-.ant-tabs-tabpane {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-}
-
-.ant-empty,
-.ant-spin-container {
-  flex: 1;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
-.history_chatbot button {
-  background: none;
-  border: none;
-}
-
-footer, .footer, div[class*="footer"], #footer {
-  display: none !important;
-}
-
-#component-0 textarea,
-.gradio-container textarea,
-.ant-input-textarea-large textarea {
-  height: 300px !important;
-  min-height: 300px !important;
-  resize: vertical !important;
-  border: 2px solid var(--neutral-200);
-  border-radius: 12px;
-  transition: all 0.3s;
-  background: var(--surface);
-  color: var(--text-primary);
-  padding: 1rem;
-}
-
-#component-0 textarea:focus,
-.gradio-container textarea:focus,
-.ant-input-textarea-large textarea:focus {
-  border-color: var(--accent);
-  box-shadow: 0 0 0 3px rgba(102, 163, 255, 0.2);
-}
-
-.setting-buttons {
-  position: sticky;
-  top: 1rem;
-  right: 0;
-  z-index: 1000;
-  display: flex;
-  gap: 8px;
-  padding: 12px;
-  background: rgba(255, 255, 255, 0.9);
-  backdrop-filter: blur(8px);
-  border-radius: 12px;
-  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
-  border: 1px solid var(--neutral-200);
-}
-
-.ant-btn {
-  flex: 1;
-  min-width: 80px;
-  border-radius: 8px;
-  font-weight: 500;
-  transition: all 0.3s;
-  height: 40px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.ant-btn-primary {
-  background: linear-gradient(to right, var(--primary), var(--secondary));
-  border: none;
-  color: white;
-}
-
-.ant-btn-primary:hover {
-  transform: translateY(-2px);
-  box-shadow: 0 4px 12px rgba(0, 102, 204, 0.3);
-}
-
-.ant-btn-default {
-  background: var(--surface);
-  border: 1px solid var(--primary);
-  color: var(--primary);
-}
-
-.ant-btn-default:hover {
-  color: var(--secondary);
-  border-color: var(--secondary);
-  transform: translateY(-2px);
-  box-shadow: 0 4px 12px rgba(0, 102, 204, 0.1);
-}
-
-::-webkit-scrollbar {
-  width: 8px;
-  height: 8px;
-}
-
-::-webkit-scrollbar-track {
-  background: var(--neutral-100);
-}
-
-::-webkit-scrollbar-thumb {
-  background: var(--neutral-300);
-  border-radius: 4px;
-}
-
-::-webkit-scrollbar-thumb:hover {
-  background: var(--neutral-400);
-}
-
-@media (max-width: 768px) {
-  .right_panel {
-    height: 400px;
-    margin: 10px;
-  }
-  
-  .setting-buttons {
-    flex-wrap: wrap;
-  }
-
-  .ant-btn {
-    min-width: 60px;
-    font-size: 0.9rem;
-  }
-}
-
-.right_panel::after {
-  content: '';
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  height: 6px;
-  background: var(--neutral-200);
-  cursor: ns-resize;
-}
-
-.ant-drawer-content-wrapper {
-  border-radius: 16px 0 0 16px;
-}
-
-.ant-drawer-header {
-  background: var(--primary);
-  color: white;
-  border-radius: 16px 0 0 0;
-}
-
-.ant-drawer-title {
-  color: white;
-  font-weight: 500;
-}
-
-.ant-drawer-close {
-  color: white;
-}
-
-.ant-drawer-body {
-  background: var(--surface);
-}
-
-.session-drawer .chatbot {
-  height: calc(100vh - 200px);
-  overflow-y: auto;
-}
-
-.session-history {
-  height: 700px;
-  overflow-y: auto;
-  padding: 1rem;
-}
-
-.prompt-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
-  gap: 1.5rem;
-  padding: 1.5rem;
-}
-
-.prompt-card {
-  background: var(--surface);
-  border-radius: 16px;
-  padding: 1.25rem;
-  cursor: pointer;
-  transition: all 0.3s;
-  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
-  border: 1px solid var(--neutral-200);
-}
-
-.prompt-card:hover {
-  transform: translateY(-4px);
-  box-shadow: 0 
-
-
- <style>
-/* Modern color scheme */
-:root {
-  /* 주요 브랜드 컬러 */
-  --primary: #0066cc;      /* 메인 브랜드 컬러 */
-  --secondary: #3385ff;    /* 밝은 액센트 */
-  --accent: #66a3ff;       /* 부드러운 포인트 컬러 */
-
-  /* 배경 컬러 */
-  --background: #f7f9fc;   /* 메인 배경 */
-  --surface: #ffffff;      /* 카드 배경 */
-  
-  /* 텍스트 컬러 */
-  --text-primary: #2c3e50; /* 주요 텍스트 */
-  --text-secondary: #546e7a; /* 부가 텍스트 */
-  --text-tertiary: #78909c; /* 덜 중요한 텍스트 */
-  
-  /* 기능성 컬러 */
-  --success: #34c759;      /* 성공/확인 */
-  --warning: #ff9500;      /* 경고/주의 */
-  --error: #ff3b30;        /* 오류/삭제 */
-  
-  /* 중립 컬러 */
-  --neutral-100: #f8f9fa;
-  --neutral-200: #e9ecef;
-  --neutral-300: #dee2e6;
-  --neutral-400: #ced4da;
-}
-
-body {
-  font-family: 'Inter', system-ui, sans-serif;
-  background: var(--background);
-  color: var(--text-primary);
-  line-height: 1.5;
 }
 
 .left_header {
@@ -375,6 +41,7 @@ body {
   justify-content: center;
   align-items: center;
   background: linear-gradient(135deg, var(--surface), var(--neutral-100));
+  -webkit-backdrop-filter: blur(10px);
   backdrop-filter: blur(10px);
   border-radius: 24px;
   padding: 2rem;
@@ -399,36 +66,26 @@ body {
 
 .right_panel {
   position: relative;
-  height: 100%; /* 전체 화면을 차지하도록 변경 */
+  height: 100%;
   display: flex;
   flex-direction: column;
 }
 
 .html_content {
-  flex: 1; /* 부모 안에서 남은 공간을 모두 차지 */
+  flex: 1;
   display: flex;
   flex-direction: column;
-  height: 100%; /* 높이를 100%로 */
+  height: 100%;
 }
 
 .html_content iframe {
-  flex: 1; /* 남은 공간을 모두 사용 */
+  flex: 1;
   width: 100%;
-  height: 100%; /* 높이 설정 */
+  height: 100%;
   border: none;
   display: block;
 }
 
-/* iframe 내부 스타일을 위한 추가 */
-.html_content iframe html,
-.html_content iframe body {
-  margin: 0;
-  padding: 0;
-  height: 100%;
-  width: 100%;
-  overflow: auto;
-}
-
 .render_header {
   height: 30px;
   background: var(--neutral-100);
@@ -489,6 +146,7 @@ body {
 .history_chatbot button {
   background: none;
   border: none;
+  cursor: pointer;
 }
 
 footer, .footer, div[class*="footer"], #footer {
@@ -503,7 +161,7 @@ footer, .footer, div[class*="footer"], #footer {
   resize: vertical !important;
   border: 2px solid var(--neutral-200);
   border-radius: 12px;
-  transition: all 0.3s;
+  transition: all 0.3s ease;
   background: var(--surface);
   color: var(--text-primary);
   padding: 1rem;
@@ -514,6 +172,7 @@ footer, .footer, div[class*="footer"], #footer {
 .ant-input-textarea-large textarea:focus {
   border-color: var(--accent);
   box-shadow: 0 0 0 3px rgba(102, 163, 255, 0.2);
+  outline: none;
 }
 
 .setting-buttons {
@@ -525,6 +184,7 @@ footer, .footer, div[class*="footer"], #footer {
   gap: 8px;
   padding: 12px;
   background: rgba(255, 255, 255, 0.9);
+  -webkit-backdrop-filter: blur(8px);
   backdrop-filter: blur(8px);
   border-radius: 12px;
   box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
@@ -536,11 +196,12 @@ footer, .footer, div[class*="footer"], #footer {
   min-width: 80px;
   border-radius: 8px;
   font-weight: 500;
-  transition: all 0.3s;
+  transition: all 0.3s ease;
   height: 40px;
   display: flex;
   align-items: center;
   justify-content: center;
+  cursor: pointer;
 }
 
 .ant-btn-primary {
@@ -658,7 +319,7 @@ footer, .footer, div[class*="footer"], #footer {
   border-radius: 16px;
   padding: 1.25rem;
   cursor: pointer;
-  transition: all 0.3s;
+  transition: all 0.3s ease;
   box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
   border: 1px solid var(--neutral-200);
 }
@@ -691,69 +352,12 @@ footer, .footer, div[class*="footer"], #footer {
   border-radius: 8px;
   line-height: 1.5;
 }
-</style>
-
-<script>
-// iframe 내부 콘텐츠 크기 조정을 위한 스크립트
-function adjustIframeContent() {
-  const iframes = document.querySelectorAll('.html_content iframe');
-  iframes.forEach(iframe => {
-    iframe.onload = function() {
-      const iframeDoc = iframe.contentDocument || iframe.contentWindow.document;
-
-      // 스타일 요소 생성
-      const style = iframeDoc.createElement('style');
-      style.textContent = `
-        html, body {
-          margin: 0;
-          padding: 0;
-          height: 100%;
-          width: 100%;
-          overflow: auto;
-        }
-        body {
-          display: flex;
-          flex-direction: column;
-        }
-        body > * {
-          width: 100%;
-        }
-      `;
-
-      if (iframeDoc.head) {
-        iframeDoc.head.appendChild(style);
-      }
-
-      // iframe 크기 설정
-      iframe.style.height = '100%';
-    };
-  });
-}
-
-// 페이지 로드 시 실행
-document.addEventListener('DOMContentLoaded', function() {
-  adjustIframeContent();
-  
-  // DOM 변화 감지하여 새로운 iframe에도 적용
-  const observer = new MutationObserver(function(mutations) {
-    mutations.forEach(function(mutation) {
-      if (mutation.addedNodes.length) {
-        adjustIframeContent();
-      }
-    });
-  });
-
-  observer.observe(document.body, {
-    childList: true,
-    subtree: true
-  });
-});
-
-// send_to_sandbox 함수 수정
-function send_to_sandbox(code) {
-  const encoded_html = btoa(unescape(encodeURIComponent(code)));
-  const data_uri = `data:text/html;base64,${encoded_html}`;
-  return `<div class="render_content"><iframe src="${data_uri}" style="width:100%;height:100%;border:none;"></iframe></div>`;
-}
-</script>
+
+.error {
+  color: var(--error);
+  padding: 1rem;
+  text-align: center;
+  background: rgba(255, 59, 48, 0.1);
+  border-radius: 8px;
+}