Update app.css

app.css

@@ -1,25 +1,16 @@
 /* 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;        /* 오류/삭제 */
-  
-  /* 중립 컬러 */
+  --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;
@@ -33,6 +24,52 @@ body {
   line-height: 1.5;
 }
 
+/* 프롬프트 입력창 높이 강제 설정 */
+.ant-input-textarea-large textarea,
+.ant-input-textarea textarea,
+#component-0 textarea,
+textarea {
+  height: 300px !important;
+  min-height: 300px !important;
+  max-height: 300px !important;
+  resize: none !important;
+  overflow-y: auto !important;
+  border: 2px solid var(--neutral-200);
+  border-radius: 12px;
+  padding: 1rem;
+}
+
+/* 우측 웹 출력 화면 높이 강제 설정 */
+.html_content,
+.html_content iframe,
+iframe {
+  height: 800px !important;
+  min-height: 800px !important;
+  max-height: 800px !important;
+  overflow-y: auto !important;
+  border-radius: 12px;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
+  background: var(--surface);
+}
+
+/* 우측 패널 전체 높이 설정 */
+.right_panel {
+  position: relative;
+  height: 900px !important;
+  min-height: 900px !important;
+  max-height: 900px !important;
+  padding-top: 50px;
+  overflow: hidden !important;
+}
+
+/* iframe 내부 스크롤 설정 */
+.html_content iframe {
+  width: 100% !important;
+  border: none !important;
+  overflow-y: scroll !important;
+  display: block !important;
+}
+
 .left_header {
   display: flex;
   flex-direction: column;
@@ -90,51 +127,6 @@ body {
   background-color: var(--success);
 }
 
-.right_content {
-  height: 800px !important;
-  min-height: 800px !important;
-  max-height: 800px !important;
-  overflow-y: auto;
-  display: flex; 
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  background: var(--surface);
-  border-radius: 0 0 8px 8px;
-}
-
-.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;
-  max-height: 300px !important;
-  resize: none !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;
@@ -150,27 +142,6 @@ footer, .footer, div[class*="footer"], #footer {
   border: 1px solid var(--neutral-200);
 }
 
-/* 우측 패널 높이 조정 */
-.right_panel {
-  position: relative;
-  height: 900px !important;
-  min-height: 900px !important;
-  max-height: 900px !important;
-  padding-top: 50px;
-  overflow: hidden;
-}
-
-/* 웹 출력 화면 높이 설정 */
-.html_content {
-  height: 800px !important;
-  min-height: 800px !important;
-  max-height: 800px !important;
-  border-radius: 12px;
-  overflow: auto;
-  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
-  background: var(--surface);
-}
-
 .ant-btn {
   flex: 1;
   min-width: 80px;
@@ -189,131 +160,18 @@ footer, .footer, div[class*="footer"], #footer {
   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);
-}
-
 .ant-btn-default[title="Code 실행"] {
   background-color: var(--success);
   color: white;
   border: none;
 }
 
-.ant-btn-default[title="Code 실행"]:hover {
-  background-color: #40d869;
-}
-
-.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);
-  min-height: 300px;
-  border: 1px solid var(--neutral-200);
-}
-
-.prompt-card:hover {
-  transform: translateY(-4px);
-  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
-}
-
-.card-image {
-  width: 100%;
-  height: 200px;
-  object-fit: cover;
-  border-radius: 12px;
-  margin-bottom: 1rem;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
-}
-
-.card-name {
-  font-weight: 600;
-  margin-bottom: 0.8rem;
-  font-size: 1.1rem;
-  color: var(--text-primary);
-}
-
-.card-prompt-container {
-  position: relative;
-  padding-right: 60px;
-}
-
-.card-prompt {
-  font-size: 0.9rem;
-  color: var(--text-secondary);
-  display: -webkit-box;
-  -webkit-line-clamp: 3;
-  -webkit-box-orient: vertical;
-  overflow: hidden;
-  background: var(--neutral-100);
-  padding: 0.8rem;
-  border-radius: 8px;
-  line-height: 1.5;
-}
-
-.copy-btn {
-  position: absolute;
-  right: 0;
-  top: 0;
-  padding: 6px 12px;
-  background: var(--accent);
-  color: white;
-  border: none;
-  border-radius: 6px;
-  cursor: pointer;
-  font-size: 0.9em;
-  transition: all 0.2s ease;
-}
-
-.copy-btn:hover {
-  background: var(--primary);
-  transform: translateY(-1px);
-}
-
-.copy-btn:active {
-  transform: translateY(0);
-}
-
-.template-buttons {
-  margin-top: 1rem;
-  display: flex;
-  gap: 0.5rem;
-}
-
 /* Custom scrollbar */
 ::-webkit-scrollbar {
   width: 8px;
@@ -363,10 +221,6 @@ footer, .footer, div[class*="footer"], #footer {
     padding: 1rem;
   }
   
-  .prompt-grid {
-    grid-template-columns: 1fr;
-  }
-  
   .setting-buttons {
     flex-wrap: wrap;
   }
@@ -375,90 +229,8 @@ footer, .footer, div[class*="footer"], #footer {
     min-width: 60px;
     font-size: 0.9rem;
   }
-  
-  .right_panel {
-    height: 900px !important;
-    min-height: 900px !important;
-    max-height: 900px !important;
-  }
-  
-  .html_content {
-    height: 800px !important;
-    min-height: 800px !important;
-    max-height: 800px !important;
-  }
 }
 
-/* Animations */
-@keyframes fadeIn {
-  from { opacity: 0; transform: translateY(10px); }
-  to { opacity: 1; transform: translateY(0); }
-}
-
-.fade-in {
-  animation: fadeIn 0.5s ease-out;
-}
-
-/* MOUSE 탭 높이 관련 스타일 */
-.main-tabs {
-  min-height: 100vh !important;
-  display: flex !important;
-  flex-direction: column !important;
-}
-
-.main-tabs > div[role="tabpanel"] {
-  flex: 1 !important;
-  min-height: calc(100vh - 60px) !important;
-}
-
-.mouse-tab {
-  height: 100% !important;
-  display: flex !important;
-  flex-direction: column !important;
-}
-
-/* 레이아웃 컨테이너 높이 조정 */
-.ant-row {
-  min-height: calc(100vh - 100px) !important;
-}
-
-/* 좌측 패널 높이 조정 */
-.ant-col-md-8 {
-  height: 100% !important;
-}
-
-.ant-flex {
-  height: 100% !important;
-}
-
-/* 탭 컨텐츠 영역 높이 조정 */
-.ant-tabs-content {
-  height: 100% !important;
-}
-
-.ant-tabs-tabpane {
-  height: 100% !important;
-}
-
-/* 스크롤 영역 조정 */
-.right_content {
-  height: 800px !important;
-  min-height: 800px !important;
-  max-height: 800px !important;
-  overflow-y: auto;
-}
-
-/* 추가적인 레이아웃 안정성을 위한 스타일 */
-.ms-application {
-  height: 100% !important;
-  min-height: 100vh !important;
-}
-
-.ant-config-provider {
-  height: 100% !important;
-}
-
-/* 스크롤바가 레이아웃을 깨지지 않도록 설정 */
-.right_panel, .html_content {
-  scrollbar-gutter: stable;
+footer, .footer, div[class*="footer"], #footer {
+  display: none !important;
 }