변경2

src/api/index.js

@@ -2,7 +2,7 @@ import axios from 'axios'
 
 const api = axios.create({
   baseURL: '/api',
-  timeout: 60000,
+  timeout: 60000,  // 기본 1분
   headers: {
     'Content-Type': 'application/json'
   }
@@ -20,16 +20,21 @@ export const topicApi = {
 // 문서 API
 export const docApi = {
   getList: (topicId) => api.get(`/topics/${topicId}/documents`),
+  // 업로드는 Vision 처리로 오래 걸릴 수 있으므로 10분 타임아웃
   upload: (topicId, formData) => api.post(`/topics/${topicId}/documents/upload`, formData, {
-    headers: { 'Content-Type': 'multipart/form-data' }
+    headers: { 'Content-Type': 'multipart/form-data' },
+    timeout: 600000  // 10분 (600초)
   }),
   delete: (docId) => api.delete(`/documents/${docId}`),
-  deleteAll: (topicId) => api.delete(`/topics/${topicId}/documents`)
+  deleteAll: (topicId) => api.delete(`/topics/${topicId}/documents`),
+  getChunks: (docId) => api.get(`/documents/${docId}/chunks`)
 }
 
-// 채팅 API
+// 채팅 API (GPT 응답 대기)
 export const chatApi = {
-  send: (data) => api.post('/chat', data)
+  send: (data) => api.post('/chat', data, {
+    timeout: 180000  // 3분 (복잡한 질문 대응)
+  })
 }
 
 export default api

src/views/AdminView.vue

@@ -90,6 +90,7 @@
             <div :class="['doc-status', doc.docStatus.toLowerCase()]">
               {{ getStatusLabel(doc.docStatus) }}
             </div>
+            <button class="chunk-btn" @click="openChunkModal(doc)" title="청크 보기">📝</button>
             <button class="delete-btn" @click="deleteDocument(doc.docId)" title="삭제">🗑️</button>
           </div>
         </div>
@@ -167,6 +168,63 @@
         </div>
       </div>
     </div>
+
+    <!-- 청크 보기 모달 -->
+    <div v-if="showChunkModal" class="modal-overlay" @click.self="closeChunkModal">
+      <div class="chunk-modal">
+        <div class="modal-header">
+          <h3>📝 청크 목록</h3>
+          <span class="chunk-doc-name">{{ chunkDocument?.originalName }}</span>
+          <button class="close-btn" @click="closeChunkModal">×</button>
+        </div>
+        <div class="modal-body chunk-body">
+          <div v-if="chunksLoading" class="chunks-loading">
+            <div class="upload-spinner"></div>
+            <p>청크 로딩중...</p>
+          </div>
+          <div v-else-if="chunks.length === 0" class="chunks-empty">
+            <p>청크가 없습니다.</p>
+          </div>
+          <div v-else class="chunk-list">
+            <div v-for="chunk in chunks" :key="chunk.chunkId" class="chunk-item">
+              <div class="chunk-header">
+                <span class="chunk-index">#{{ chunk.chunkIndex + 1 }}</span>
+                <span v-if="chunk.chunkType" class="chunk-type">{{ chunk.chunkType }}</span>
+                <span class="chunk-tokens">{{ chunk.tokenCount }} tokens</span>
+              </div>
+              
+              <!-- 스마트 청킹 메타데이터 -->
+              <div v-if="chunk.chunkSummary" class="chunk-metadata">
+                <div class="meta-section">
+                  <strong>📝 요약:</strong>
+                  <p>{{ chunk.chunkSummary }}</p>
+                </div>
+                <div v-if="chunk.chunkKeywords" class="meta-section">
+                  <strong>🏷️ 키워드:</strong>
+                  <div class="keyword-tags">
+                    <span v-for="keyword in chunk.chunkKeywords.split(',')"
+                          :key="keyword" 
+                          class="keyword-tag">{{ keyword.trim() }}</span>
+                  </div>
+                </div>
+                <div v-if="chunk.chunkQuestions" class="meta-section">
+                  <strong>❓ 예상 질문:</strong>
+                  <ul class="question-list">
+                    <li v-for="(q, idx) in parseQuestions(chunk.chunkQuestions)" :key="idx">{{ q }}</li>
+                  </ul>
+                </div>
+              </div>
+              
+              <div class="chunk-content">{{ chunk.chunkContent }}</div>
+            </div>
+          </div>
+        </div>
+        <div class="modal-footer">
+          <span class="chunk-count">총 {{ chunks.length }}개 청크</span>
+          <button class="cancel-btn" @click="closeChunkModal">닫기</button>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
@@ -180,6 +238,12 @@ const selectedTopic = ref(null)
 const documents = ref([])
 const uploading = ref(false)
 
+// 청크 모달 상태
+const showChunkModal = ref(false)
+const chunkDocument = ref(null)
+const chunks = ref([])
+const chunksLoading = ref(false)
+
 // 주제 모달 상태
 const showTopicModal = ref(false)
 const editingTopic = ref(null)
@@ -358,6 +422,41 @@ const deleteAllDocuments = async () => {
   }
 }
 
+// 청크 모달 열기
+const openChunkModal = async (doc) => {
+  chunkDocument.value = doc
+  showChunkModal.value = true
+  chunksLoading.value = true
+  chunks.value = []
+
+  try {
+    const { data } = await docApi.getChunks(doc.docId)
+    chunks.value = data
+  } catch (error) {
+    console.error('청크 로드 실패:', error)
+    alert('청크 로드 중 오류가 발생했습니다.')
+  } finally {
+    chunksLoading.value = false
+  }
+}
+
+// 청크 모달 닫기
+const closeChunkModal = () => {
+  showChunkModal.value = false
+  chunkDocument.value = null
+  chunks.value = []
+}
+
+// 예상 질문 JSON 파싱
+const parseQuestions = (jsonStr) => {
+  if (!jsonStr) return []
+  try {
+    return JSON.parse(jsonStr)
+  } catch {
+    return []
+  }
+}
+
 // 다운로드 URL 생성
 const getDownloadUrl = (docId) => {
   return `/api/documents/${docId}/download`
@@ -654,6 +753,7 @@ onMounted(() => {
     &.failed { background: #ffebee; color: #c62828; }
   }
   
+  .chunk-btn,
   .delete-btn {
     padding: 8px;
     background: none;
@@ -665,6 +765,10 @@ onMounted(() => {
       opacity: 1;
     }
   }
+  
+  .chunk-btn:hover {
+    color: #667eea;
+  }
 }
 
 // 업로드 오버레이
@@ -867,4 +971,167 @@ onMounted(() => {
     cursor: not-allowed;
   }
 }
+
+// 청크 모달
+.chunk-modal {
+  background: white;
+  border-radius: 16px;
+  width: 800px;
+  max-width: 90%;
+  max-height: 80vh;
+  display: flex;
+  flex-direction: column;
+  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
+  
+  .modal-header {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    
+    h3 {
+      flex-shrink: 0;
+    }
+    
+    .chunk-doc-name {
+      flex: 1;
+      font-size: 14px;
+      color: #666;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+  }
+  
+  .chunk-body {
+    flex: 1;
+    overflow-y: auto;
+    max-height: 60vh;
+  }
+  
+  .modal-footer {
+    justify-content: space-between;
+    
+    .chunk-count {
+      font-size: 14px;
+      color: #666;
+    }
+  }
+}
+
+.chunks-loading,
+.chunks-empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 60px 0;
+  color: #888;
+}
+
+.chunk-list {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.chunk-item {
+  border: 1px solid #e8e8e8;
+  border-radius: 8px;
+  overflow: hidden;
+  
+  .chunk-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 8px 12px;
+    background: #f5f5f5;
+    border-bottom: 1px solid #e8e8e8;
+    gap: 8px;
+    
+    .chunk-index {
+      font-weight: 600;
+      color: #667eea;
+    }
+    
+    .chunk-type {
+      padding: 2px 8px;
+      border-radius: 4px;
+      font-size: 11px;
+      background: #e3f2fd;
+      color: #1565c0;
+    }
+    
+    .chunk-tokens {
+      font-size: 12px;
+      color: #888;
+      margin-left: auto;
+    }
+  }
+  
+  // 스마트 청킹 메타데이터
+  .chunk-metadata {
+    padding: 12px;
+    background: linear-gradient(135deg, #f8f9ff 0%, #f0f4ff 100%);
+    border-bottom: 1px solid #e8e8e8;
+    
+    .meta-section {
+      margin-bottom: 10px;
+      
+      &:last-child {
+        margin-bottom: 0;
+      }
+      
+      strong {
+        display: block;
+        font-size: 12px;
+        color: #667eea;
+        margin-bottom: 4px;
+      }
+      
+      p {
+        font-size: 13px;
+        color: #333;
+        line-height: 1.5;
+        margin: 0;
+      }
+    }
+    
+    .keyword-tags {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 6px;
+    }
+    
+    .keyword-tag {
+      padding: 2px 8px;
+      border-radius: 12px;
+      font-size: 12px;
+      background: #667eea;
+      color: white;
+    }
+    
+    .question-list {
+      margin: 0;
+      padding-left: 20px;
+      font-size: 13px;
+      color: #555;
+      
+      li {
+        margin-bottom: 4px;
+      }
+    }
+  }
+  
+  .chunk-content {
+    padding: 12px;
+    font-size: 13px;
+    line-height: 1.6;
+    color: #333;
+    white-space: pre-wrap;
+    word-break: break-word;
+    max-height: 200px;
+    overflow-y: auto;
+    background: #fafafa;
+  }
+}
 </style>

src/views/ChatView.vue

@@ -53,17 +53,57 @@
           <div class="message-content">
             <div class="message-text" v-html="renderMarkdown(msg.content)"></div>
             
-            <!-- 참조 문서 -->
+            <!-- 참조 문서 (개선된 버전) -->
             <div v-if="msg.sources && msg.sources.length > 0" class="message-sources">
-              <div class="sources-header">📎 참조 문서</div>
+              <div 
+                class="sources-toggle"
+                @click="msg.sourcesExpanded = !msg.sourcesExpanded"
+              >
+                <span class="toggle-icon">{{ msg.sourcesExpanded ? '▼' : '▶' }}</span>
+                <span class="toggle-text">📎 참조 문서 ({{ msg.sources.length }}개)</span>
+              </div>
+              
+              <transition name="slide">
+                <div v-if="msg.sourcesExpanded" class="sources-list">
                   <div 
                     v-for="(source, idx) in msg.sources" 
                     :key="idx"
-                class="source-item"
+                    class="source-card"
                   >
-                <span class="source-similarity">{{ (source.similarity * 100).toFixed(0) }}%</span>
+                    <div class="source-header">
-                <span class="source-content">{{ source.content }}</span>
+                      <div 
+                        class="similarity-badge"
+                        :class="getSimilarityClass(source.similarity)"
+                      >
+                        <div class="similarity-bar" :style="{ width: (source.similarity * 100) + '%' }"></div>
+                        <span class="similarity-text">{{ (source.similarity * 100).toFixed(0) }}%</span>
                       </div>
+                      <span class="source-doc" v-if="source.docName">
+                        📄 {{ source.docName }}
+                        <span class="chunk-info" v-if="source.totalChunks">
+                          ({{ source.chunkIndex + 1 }}/{{ source.totalChunks }})
+                        </span>
+                      </span>
+                      <span class="file-type-badge" v-if="source.fileType">
+                        {{ source.fileType.toUpperCase() }}
+                      </span>
+                    </div>
+                    <div class="source-content">
+                      {{ truncateText(source.content, 200) }}
+                    </div>
+                    <button 
+                      v-if="source.content && source.content.length > 200"
+                      class="expand-btn"
+                      @click="source.expanded = !source.expanded"
+                    >
+                      {{ source.expanded ? '접기' : '더보기' }}
+                    </button>
+                    <div v-if="source.expanded" class="source-full-content">
+                      {{ source.content }}
+                    </div>
+                  </div>
+                </div>
+              </transition>
             </div>
           </div>
         </div>
@@ -71,7 +111,8 @@
         <!-- 로딩 표시 -->
         <div v-if="isLoading" class="message assistant">
           <div class="message-avatar">🤖</div>
-          <div class="message-content">
+          <div class="message-content loading-content">
+            <div class="loading-text">답변을 생성하고 있습니다</div>
             <div class="loading-dots">
               <span></span>
               <span></span>
@@ -96,6 +137,7 @@
             @click="sendMessage"
             :disabled="!inputText.trim() || isLoading"
           >
+            <span class="send-icon">➤</span>
             전송
           </button>
         </div>
@@ -109,6 +151,12 @@ import { ref, onMounted, nextTick } from 'vue'
 import { marked } from 'marked'
 import { topicApi, chatApi } from '@/api'
 
+// marked 옵션 설정
+marked.setOptions({
+  breaks: true,
+  gfm: true
+})
+
 // 상태
 const topics = ref([])
 const selectedTopics = ref([])
@@ -116,7 +164,7 @@ const messages = ref([])
 const inputText = ref('')
 const isLoading = ref(false)
 const messageListRef = ref(null)
-const sessionKey = ref(null)  // 세션 키
+const sessionKey = ref(null)
 
 // 주제 목록 로드
 const loadTopics = async () => {
@@ -158,19 +206,19 @@ const sendMessage = async () => {
     const { data } = await chatApi.send({
       question,
       topicIds: selectedTopics.value.length > 0 ? selectedTopics.value : null,
-      sessionKey: sessionKey.value  // 세션 키 전달
+      sessionKey: sessionKey.value
     })
 
-    // 세션 키 저장 (첫 응답에서 받음)
     if (data.sessionKey) {
       sessionKey.value = data.sessionKey
     }
 
-    // AI 응답 추가
+    // AI 응답 추가 (sourcesExpanded 기본값 false)
     messages.value.push({
       role: 'assistant',
       content: data.answer,
-      sources: data.sources
+      sources: data.sources?.map(s => ({ ...s, expanded: false })) || [],
+      sourcesExpanded: false
     })
   } catch (error) {
     console.error('채팅 오류:', error)
@@ -189,6 +237,21 @@ const renderMarkdown = (text) => {
   return marked(text || '')
 }
 
+// 텍스트 자르기
+const truncateText = (text, maxLength) => {
+  if (!text) return ''
+  if (text.length <= maxLength) return text
+  return text.substring(0, maxLength) + '...'
+}
+
+// 유사도에 따른 클래스
+const getSimilarityClass = (similarity) => {
+  const percent = similarity * 100
+  if (percent >= 50) return 'high'
+  if (percent >= 40) return 'medium'
+  return 'low'
+}
+
 // 스크롤 맨 아래로
 const scrollToBottom = async () => {
   await nextTick()
@@ -266,6 +329,7 @@ onMounted(() => {
     width: 18px;
     height: 18px;
     cursor: pointer;
+    accent-color: #667eea;
   }
   
   .topic-icon {
@@ -283,7 +347,7 @@ onMounted(() => {
   flex: 1;
   display: flex;
   flex-direction: column;
-  background: #f9fafb;
+  background: linear-gradient(180deg, #f8f9fc 0%, #eef1f8 100%);
 }
 
 .message-list {
@@ -319,122 +383,354 @@ onMounted(() => {
 .message {
   display: flex;
   gap: 12px;
-  margin-bottom: 20px;
+  margin-bottom: 24px;
+  animation: fadeIn 0.3s ease;
   
   &.user {
     flex-direction: row-reverse;
     
     .message-content {
-      background: #667eea;
+      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+      color: white;
+      border-radius: 20px 20px 4px 20px;
+      max-width: 60%;
+    }
+    
+    .message-avatar {
+      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
       color: white;
-      border-radius: 16px 16px 4px 16px;
     }
   }
   
   &.assistant {
     .message-content {
       background: white;
-      border-radius: 16px 16px 16px 4px;
+      border-radius: 20px 20px 20px 4px;
-      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+      box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
+      max-width: 80%;
+    }
+    
+    .message-avatar {
+      background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
+      color: white;
     }
   }
 }
 
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
 .message-avatar {
-  width: 40px;
+  width: 42px;
-  height: 40px;
+  height: 42px;
   border-radius: 50%;
-  background: #f0f0f0;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 20px;
   flex-shrink: 0;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
 }
 
 .message-content {
-  max-width: 70%;
+  padding: 16px 20px;
-  padding: 12px 16px;
+  
+  &.loading-content {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+  }
+}
+
+.loading-text {
+  color: #666;
+  font-size: 14px;
 }
 
 .message-text {
-  line-height: 1.6;
+  line-height: 1.7;
+  font-size: 15px;
   
   :deep(p) {
-    margin-bottom: 8px;
+    margin-bottom: 12px;
     
     &:last-child {
       margin-bottom: 0;
     }
   }
   
+  :deep(ul), :deep(ol) {
+    margin: 12px 0;
+    padding-left: 24px;
+    
+    li {
+      margin-bottom: 6px;
+    }
+  }
+  
+  :deep(strong) {
+    font-weight: 600;
+    color: #333;
+  }
+  
   :deep(code) {
-    background: rgba(0, 0, 0, 0.1);
+    background: rgba(102, 126, 234, 0.1);
-    padding: 2px 6px;
+    color: #667eea;
+    padding: 2px 8px;
     border-radius: 4px;
-    font-family: monospace;
+    font-family: 'Consolas', monospace;
+    font-size: 13px;
   }
   
   :deep(pre) {
-    background: #1e1e1e;
+    background: #1e1e2e;
-    color: #d4d4d4;
+    color: #cdd6f4;
-    padding: 12px;
+    padding: 16px;
-    border-radius: 8px;
+    border-radius: 12px;
     overflow-x: auto;
-    margin: 8px 0;
+    margin: 12px 0;
     
     code {
       background: none;
+      color: inherit;
       padding: 0;
     }
   }
+  
+  :deep(blockquote) {
+    border-left: 4px solid #667eea;
+    margin: 12px 0;
+    padding: 8px 16px;
+    background: rgba(102, 126, 234, 0.05);
+    border-radius: 0 8px 8px 0;
   }
   
+  :deep(table) {
+    width: 100%;
+    border-collapse: collapse;
+    margin: 12px 0;
+    font-size: 14px;
+    
+    th, td {
+      border: 1px solid #e0e0e0;
+      padding: 8px 12px;
+      text-align: left;
+    }
+    
+    th {
+      background: #f5f7fa;
+      font-weight: 600;
+    }
+    
+    tr:nth-child(even) {
+      background: #fafbfc;
+    }
+  }
+}
+
+// 참조 문서 섹션 (개선)
 .message-sources {
-  margin-top: 12px;
+  margin-top: 16px;
+  border-top: 1px solid #eee;
   padding-top: 12px;
-  border-top: 1px solid rgba(0, 0, 0, 0.1);
-  
-  .sources-header {
-    font-size: 12px;
-    font-weight: 600;
-    color: #666;
-    margin-bottom: 8px;
 }
 
-  .source-item {
+.sources-toggle {
   display: flex;
+  align-items: center;
   gap: 8px;
-    font-size: 12px;
+  cursor: pointer;
-    padding: 6px 0;
+  padding: 8px 12px;
-    color: #666;
+  border-radius: 8px;
+  transition: background 0.2s;
   
-    .source-similarity {
+  &:hover {
-      background: #e8f5e9;
+    background: #f5f7fa;
-      color: #2e7d32;
+  }
-      padding: 2px 6px;
+  
-      border-radius: 4px;
+  .toggle-icon {
+    font-size: 10px;
+    color: #888;
+    transition: transform 0.2s;
+  }
+  
+  .toggle-text {
+    font-size: 13px;
+    font-weight: 500;
+    color: #555;
+  }
+}
+
+.sources-list {
+  margin-top: 12px;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.source-card {
+  background: linear-gradient(135deg, #f8f9fc 0%, #f0f2f8 100%);
+  border: 1px solid #e8ebf0;
+  border-radius: 12px;
+  padding: 14px;
+  transition: all 0.2s;
+  
+  &:hover {
+    border-color: #667eea;
+    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.1);
+  }
+}
+
+.source-header {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin-bottom: 10px;
+}
+
+.similarity-badge {
+  position: relative;
+  min-width: 60px;
+  height: 24px;
+  background: #e8e8e8;
+  border-radius: 12px;
+  overflow: hidden;
+  
+  .similarity-bar {
+    position: absolute;
+    left: 0;
+    top: 0;
+    height: 100%;
+    border-radius: 12px;
+    transition: width 0.3s ease;
+  }
+  
+  .similarity-text {
+    position: relative;
+    z-index: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    font-size: 11px;
+    font-weight: 700;
+    color: white;
+    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
+  }
+  
+  &.high {
+    .similarity-bar {
+      background: linear-gradient(90deg, #11998e 0%, #38ef7d 100%);
+    }
+  }
+  
+  &.medium {
+    .similarity-bar {
+      background: linear-gradient(90deg, #f093fb 0%, #f5576c 100%);
+    }
+  }
+  
+  &.low {
+    .similarity-bar {
+      background: linear-gradient(90deg, #ffecd2 0%, #fcb69f 100%);
+    }
+    .similarity-text {
+      color: #666;
+    }
+  }
+}
+
+.source-doc {
+  font-size: 12px;
+  color: #667eea;
+  font-weight: 500;
+  flex: 1;
+  
+  .chunk-info {
+    color: #999;
+    font-weight: 400;
+    margin-left: 4px;
+  }
+}
+
+.file-type-badge {
+  font-size: 10px;
+  padding: 2px 8px;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  color: white;
+  border-radius: 10px;
   font-weight: 600;
+  text-transform: uppercase;
 }
 
 .source-content {
-      flex: 1;
+  font-size: 13px;
+  color: #555;
+  line-height: 1.6;
+  word-break: break-word;
+}
+
+.source-full-content {
+  margin-top: 10px;
+  padding-top: 10px;
+  border-top: 1px dashed #ddd;
+  font-size: 13px;
+  color: #444;
+  line-height: 1.6;
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+
+.expand-btn {
+  margin-top: 8px;
+  padding: 4px 12px;
+  font-size: 12px;
+  color: #667eea;
+  background: rgba(102, 126, 234, 0.1);
+  border-radius: 12px;
+  transition: all 0.2s;
+  
+  &:hover {
+    background: rgba(102, 126, 234, 0.2);
+  }
+}
+
+// 슬라이드 트랜지션
+.slide-enter-active,
+.slide-leave-active {
+  transition: all 0.3s ease;
   overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
 }
+
+.slide-enter-from,
+.slide-leave-to {
+  opacity: 0;
+  max-height: 0;
 }
+
+.slide-enter-to,
+.slide-leave-from {
+  opacity: 1;
+  max-height: 1000px;
 }
 
 // 로딩 애니메이션
 .loading-dots {
   display: flex;
-  gap: 4px;
+  gap: 6px;
   
   span {
-    width: 8px;
+    width: 10px;
-    height: 8px;
+    height: 10px;
-    background: #667eea;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
     border-radius: 50%;
     animation: bounce 1.4s infinite ease-in-out both;
     
@@ -444,57 +740,77 @@ onMounted(() => {
 }
 
 @keyframes bounce {
-  0%, 80%, 100% { transform: scale(0); }
+  0%, 80%, 100% { transform: scale(0.6); opacity: 0.5; }
-  40% { transform: scale(1); }
+  40% { transform: scale(1); opacity: 1; }
 }
 
 // 입력 영역
 .chat-input-area {
-  padding: 16px 24px;
+  padding: 20px 24px;
   background: white;
   border-top: 1px solid #e8e8e8;
+  box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.05);
 }
 
 .input-wrapper {
   display: flex;
   gap: 12px;
   align-items: flex-end;
+  max-width: 900px;
+  margin: 0 auto;
   
   textarea {
     flex: 1;
-    padding: 12px 16px;
+    padding: 14px 20px;
-    border: 1px solid #ddd;
+    border: 2px solid #e8e8e8;
-    border-radius: 12px;
+    border-radius: 16px;
     resize: none;
-    font-size: 14px;
+    font-size: 15px;
     line-height: 1.5;
     max-height: 120px;
+    transition: all 0.2s;
     
     &:focus {
       border-color: #667eea;
-      box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
+      box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1);
     }
     
     &:disabled {
       background: #f5f5f5;
     }
+    
+    &::placeholder {
+      color: #aaa;
+    }
   }
   
   .send-btn {
-    padding: 12px 24px;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 14px 28px;
     background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
     color: white;
-    border-radius: 12px;
+    border-radius: 16px;
     font-weight: 600;
+    font-size: 15px;
     transition: all 0.2s;
     
+    .send-icon {
+      font-size: 16px;
+    }
+    
     &:hover:not(:disabled) {
-      transform: translateY(-1px);
+      transform: translateY(-2px);
-      box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
+      box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
+    }
+    
+    &:active:not(:disabled) {
+      transform: translateY(0);
     }
     
     &:disabled {
-      opacity: 0.6;
+      opacity: 0.5;
       cursor: not-allowed;
     }
   }