/* ai-assistant.css — AI 어시스턴트 페이지 전용 스타일 */ /* 페이드인 애니메이션 */ .fade-in { opacity: 0; animation: fadeIn 0.5s ease-in forwards; } @keyframes fadeIn { to { opacity: 1; } } .header-fade-in { opacity: 0; animation: headerFadeIn 0.6s ease-out forwards; } @keyframes headerFadeIn { to { opacity: 1; transform: translateY(0); } from { transform: translateY(-10px); } } .content-fade-in { opacity: 0; animation: contentFadeIn 0.7s ease-out 0.2s forwards; } @keyframes contentFadeIn { to { opacity: 1; transform: translateY(0); } from { transform: translateY(20px); } } /* 채팅 컨테이너 */ .chat-container { max-height: 500px; overflow-y: auto; scroll-behavior: smooth; } .chat-container::-webkit-scrollbar { width: 6px; } .chat-container::-webkit-scrollbar-track { background: #f1f5f9; border-radius: 3px; } .chat-container::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 3px; } .chat-container::-webkit-scrollbar-thumb:hover { background: #94a3b8; } /* 채팅 말풍선 */ .chat-bubble { max-width: 85%; animation: bubbleIn 0.3s ease-out; } @keyframes bubbleIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .chat-bubble-user { background: #7c3aed; color: white; border-radius: 18px 18px 4px 18px; padding: 10px 16px; margin-left: auto; } .chat-bubble-ai { background: #f1f5f9; color: #1e293b; border-radius: 18px 18px 18px 4px; padding: 10px 16px; } .chat-bubble-ai .source-link { color: #7c3aed; cursor: pointer; text-decoration: underline; text-decoration-style: dotted; } .chat-bubble-ai .source-link:hover { color: #6d28d9; text-decoration-style: solid; } /* 로딩 도트 애니메이션 */ .typing-indicator { display: flex; gap: 4px; padding: 12px 16px; } .typing-dot { width: 8px; height: 8px; background: #94a3b8; border-radius: 50%; animation: typingBounce 1.4s infinite ease-in-out; } .typing-dot:nth-child(2) { animation-delay: 0.2s; } .typing-dot:nth-child(3) { animation-delay: 0.4s; } @keyframes typingBounce { 0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; } 40% { transform: scale(1); opacity: 1; } } /* 빠른 질문 버튼 */ .quick-question-btn { transition: all 0.2s ease; border: 1px solid #e2e8f0; } .quick-question-btn:hover { border-color: #7c3aed; background: #faf5ff; transform: translateY(-1px); box-shadow: 0 2px 8px rgba(124, 58, 237, 0.12); } /* 상태 카드 */ .status-card { transition: all 0.2s ease; } .status-card:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); } /* 섹션 카드 */ .section-card { transition: all 0.2s ease; } /* 결과 아이템 */ .result-item { transition: all 0.15s ease; cursor: pointer; } .result-item:hover { background: #f8fafc; border-color: #7c3aed; } /* 모바일 반응형 */ @media (max-width: 768px) { .chat-container { max-height: 400px; } .chat-bubble { max-width: 92%; } button, a, [onclick], select { min-height: 44px; min-width: 44px; } body { padding-bottom: calc(64px + env(safe-area-inset-bottom)) !important; } }