I Love SeungNamMae

안녕하세요! 무엇을 도와드릴까요?

:root { color-scheme: light; --bg: #f4f7fb; --card: rgba(255, 255, 255, 0.92); --line: #d8e0ef; --text: #1e293b; --muted: #64748b; --accent: linear-gradient(135deg, #4f46e5, #2563eb); --assistant: #ffffff; --user: #2563eb; } * { box-sizing: border-box; } body { margin: 0; min-height: 100vh; font-family: "Pretendard", -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Noto Sans KR", "맑은 고딕", sans-serif; background: radial-gradient(circle at top, rgba(79, 70, 229, 0.16), transparent 32%), var(--bg); color: var(--text); word-break: keep-all; } .shell { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; } .app { width: min(960px, 100%); height: min(88vh, 820px); display: flex; flex-direction: column; background: var(--card); border: 1px solid rgba(255, 255, 255, 0.7); border-radius: 28px; box-shadow: 0 24px 60px rgba(15, 23, 42, 0.12); backdrop-filter: blur(16px); overflow: hidden; } .header { display: flex; align-items: center; gap: 14px; padding: 22px 24px; border-bottom: 1px solid var(--line); } .badge { width: 46px; height: 46px; flex-shrink: 0; border-radius: 16px; background: var(--accent); display: grid; place-items: center; color: white; font-size: 22px; box-shadow: 0 12px 24px rgba(37, 99, 235, 0.25); } .header-info { flex: 1; min-width: 0; } .header h1, .header p { margin: 0; } .header p { color: var(--muted); font-size: 14px; } .new-chat-btn { flex-shrink: 0; border: 1px solid var(--line); border-radius: 12px; padding: 9px 16px; background: transparent; color: var(--muted); font-family: inherit; font-size: 14px; font-weight: 600; cursor: pointer; transition: background 0.18s, color 0.18s, border-color 0.18s; white-space: nowrap; } .new-chat-btn:hover { background: var(--bg); color: var(--text); border-color: #aab4c8; } .messages { flex: 1; overflow-y: auto; padding: 24px; display: flex; flex-direction: column; gap: 14px; } .message { max-width: min(78%, 640px); padding: 14px 16px; border-radius: 20px; line-height: 1.75; white-space: pre-wrap; word-break: keep-all; overflow-wrap: break-word; box-shadow: 0 10px 26px rgba(15, 23, 42, 0.05); font-size: 15px; letter-spacing: -0.01em; } .message.assistant { align-self: flex-start; background: var(--assistant); border: 1px solid var(--line); } .message.user { align-self: flex-end; background: var(--user); color: white; } .typing { display: inline-flex; gap: 6px; align-items: center; } .typing span { width: 8px; height: 8px; border-radius: 50%; background: #94a3b8; animation: blink 1.1s infinite ease-in-out; } .typing span:nth-child(2) { animation-delay: 0.15s; } .typing span:nth-child(3) { animation-delay: 0.3s; } @keyframes blink { 0%, 80%, 100% { transform: scale(0.8); opacity: 0.4; } 40% { transform: scale(1); opacity: 1; } } .composer { padding: 18px 20px 20px; border-top: 1px solid var(--line); background: rgba(248, 250, 252, 0.95); } .composer form { display: flex; gap: 12px; } .composer input { flex: 1; border: 1px solid var(--line); border-radius: 16px; padding: 16px 18px; font-family: inherit; font-size: 15px; letter-spacing: -0.01em; outline: none; transition: border-color 0.2s, box-shadow 0.2s; } .composer input:focus { border-color: #2563eb; box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.12); } .composer button[type="submit"] { border: 0; border-radius: 16px; padding: 0 22px; background: var(--accent); color: white; font-family: inherit; font-size: 15px; font-weight: 700; cursor: pointer; letter-spacing: -0.01em; } .composer button[type="submit"]:disabled { opacity: 0.65; cursor: wait; } @media (max-width: 720px) { .shell { padding: 0; } .app { width: 100%; height: 100vh; border-radius: 0; } .message { max-width: 88%; } .composer form { flex-direction: column; } .composer button[type="submit"] { height: 52px; } }

안녕하세요! 무엇을 도와드릴까요?