Update app.css

app.css

@@ -49,10 +49,6 @@
 /* Footer 숨기기 */
 footer, .footer, div[class*="footer"], #footer {
     display: none !important;
-    visibility: hidden !important;
-    height: 0 !important;
-    padding: 0 !important;
-    margin: 0 !important;
 }
 
 /* Textarea 스타일링 */
@@ -61,17 +57,9 @@ footer, .footer, div[class*="footer"], #footer {
 .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;
@@ -95,11 +83,6 @@ footer, .footer, div[class*="footer"], #footer {
     height: 100%;
 }
 
-/* 버튼 컨테이너 스타일링 */
-.ant-flex {
-    width: 100%;
-}
-
 /* 버튼 스타일링 */
 .ant-btn {
     flex: 1;
@@ -115,7 +98,7 @@ footer, .footer, div[class*="footer"], #footer {
     border-color: #1890ff;
 }
 
-/* Code 실행 버튼 특별 스타일 */
+/* Code 실행 버튼 스타일 */
 .ant-btn-default[title="Code 실행"] {
     background-color: #52c41a;
     color: white;
@@ -124,49 +107,14 @@ footer, .footer, div[class*="footer"], #footer {
 
 .ant-btn-default[title="Code 실행"]:hover {
     background-color: #73d13d;
-    color: white;
 }
 
-/* Example 버튼 스타일링 */
-.ant-btn-block {
-    margin-top: 8px;
-    text-align: left;
-    height: auto !important;
-    padding: 10px !important;
-    white-space: normal !important;
-    line-height: 1.5 !important;
-    transition: all 0.3s ease;
-}
-
-.ant-btn-block:hover {
-    background-color: #f0f0f0;
-    transform: translateY(-1px);
-    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
-}
-
-/* 버튼 사이 간격 */
-.ant-btn-block + .ant-btn-block {
-    margin-top: 6px;
-}
-
-.ant-row {
-    margin: 0 !important;
-}  /* 중괄호 닫기 추가 */
-
-/* 세션 드로어 관련 스타일 */
+/* 세션 드로어 스타일 */
 .session-drawer .chatbot {
     height: calc(100vh - 200px);
     overflow-y: auto;
 }
 
-.session-list {
-    margin-bottom: 1rem;
-}
-
-.close-btn {
-    margin-top: 1rem;
-}
-
 .session-history {
     height: 700px;
     overflow-y: auto;
@@ -174,7 +122,7 @@ footer, .footer, div[class*="footer"], #footer {
 
 .prompt-grid {
     display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+    grid-template-columns: repeat(3, 1fr);
     gap: 20px;
     padding: 20px;
 }
@@ -187,6 +135,7 @@ footer, .footer, div[class*="footer"], #footer {
     cursor: pointer;
     transition: all 0.3s ease;
     box-shadow: 0 2px 5px rgba(0,0,0,0.1);
+    min-height: 300px;
 }
 
 .prompt-card:hover {
@@ -194,39 +143,25 @@ footer, .footer, div[class*="footer"], #footer {
     box-shadow: 0 4px 10px rgba(0,0,0,0.15);
 }
 
-#code-display {
-    margin-top: 20px;
-    padding: 20px;
-    background: #f5f5f5;
-    border-radius: 8px;
-    font-family: monospace;
-    white-space: pre-wrap;
-}
-
-#code-display.visible {
-    display: block;
-}
-
-
-.session-history {
-    height: 700px;
-    overflow-y: auto;
-}
-
-.prompt-card {
-    background: white;
-    border: 1px solid #eee;
-    border-radius: 8px;
-    padding: 15px;
-    cursor: pointer;
-    transition: all 0.3s ease;
+.card-image {
+    width: 100%;
+    height: 200px;
+    object-fit: cover;
+    border-radius: 4px;
+    margin-bottom: 10px;
 }
 
-.prompt-card:hover {
-    transform: translateY(-2px);
-    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
+.card-name {
+    font-weight: bold;
+    margin-bottom: 8px;
+    font-size: 16px;
 }
 
-#code-display {
-    display: none;
+.card-prompt {
+    font-size: 0.9em;
+    color: #666;
+    display: -webkit-box;
+    -webkit-line-clamp: 4;  /* 3에서 4로 변경 */
+    -webkit-box-orient: vertical;
+    overflow: hidden;
 }