@import"https://fonts.googleapis.com/css2?family=Pretendard:wght@400;500;600;700&display=swap";:root{--main-pink: #ff5d8c;--sub-pink: #ff77dd;--gradient-pink: linear-gradient(135deg, #ff5d8c 0%, #ff77dd 100%);--bg-start: #fff5f7;--bg-mid: #ffffff;--bg-end: #fff5f7;--panel-bg: #ffffff;--bubble-bot-bg: #f3f4f6;--bubble-user-bg: #ffffff;--line: #e5e7eb;--ink: #1f2937;--muted: #9ca3af;--online: #22c55e;--panel-width: 448px;--radius-sm: 10px;--radius-md: 18px;--radius-pill: 100px;--space-1: 8px;--space-2: 12px;--space-3: 16px;--space-4: 24px;--font-xs: 11px;--font-sm: 14px;--font-md: 15px;--shadow-panel: 0 0 40px rgba(0, 0, 0, .05)}*{box-sizing:border-box}html,body,#root{width:100%;height:100%;margin:0;padding:0;overflow:hidden}body{font-family:Pretendard,sans-serif;background:linear-gradient(135deg,var(--bg-start) 0%,var(--bg-mid) 50%,var(--bg-end) 100%);min-height:100%;display:flex;justify-content:center;-webkit-text-size-adjust:100%;overscroll-behavior:none;overflow:hidden}.app-shell{width:100%;height:100vh;height:100lvh;height:100%;display:flex;justify-content:center}.app-container{width:100%;max-width:var(--panel-width);height:100vh;height:100lvh;height:100%;min-height:100vh;min-height:100lvh;margin-top:0;display:flex;flex-direction:column;position:relative;background:var(--panel-bg);box-shadow:var(--shadow-panel)}.header{padding:8px 16px;border-bottom:1px solid #f3f4f6;display:flex;align-items:center;gap:var(--space-2);background:var(--panel-bg)}.bot-avatar,.msg-avatar{width:32px;height:32px;border-radius:var(--radius-sm);overflow:hidden;display:flex;align-items:center;justify-content:center;background:var(--bubble-bot-bg);border:1px solid #fce7f3;flex-shrink:0}.bot-avatar img,.msg-avatar img{width:100%;height:100%;object-fit:cover}.title{margin:0;font-size:16px;line-height:1.2;font-weight:700;color:var(--ink)}.status-online{margin:0;font-size:var(--font-xs);color:var(--online);font-weight:500}.chat-messages{flex:1;overflow-y:auto;padding:12px var(--space-3);padding-bottom:calc(var(--footer-height, 120px) + 12px);scroll-padding-bottom:calc(var(--footer-height, 120px) + 12px);scroll-behavior:smooth;display:flex;flex-direction:column;gap:var(--space-4);align-items:stretch}.msg-row{display:flex}.msg-row.bot{align-items:flex-start;gap:var(--space-1)}.msg-row.user{justify-content:flex-end;align-items:flex-start}.initial-content{max-width:85%;width:100%;display:flex;flex-direction:column;gap:var(--space-2)}.bot-bubble{max-width:85%;padding:16px;border-radius:4px var(--radius-md) var(--radius-md) var(--radius-md);background:var(--bubble-bot-bg);color:var(--ink);font-size:var(--font-sm);line-height:1.6;white-space:pre-wrap;box-shadow:0 1px 2px #00000008}.bot-bubble.initial-greeting{max-width:100%}.user-bubble{width:fit-content;max-width:85%;padding:12px 16px;border-radius:var(--radius-md) var(--radius-md) 4px var(--radius-md);background:var(--bubble-user-bg);color:var(--ink);font-size:var(--font-sm);line-height:1.5;border:1px solid var(--line);box-shadow:0 2px 4px #00000005;animation:slideUp .3s ease-out;white-space:pre-wrap;align-self:flex-start}.recommendation-list{display:flex;flex-direction:column;align-items:flex-end;gap:var(--space-1)}.recommendation-list-single{margin-top:-8px}.recommendation-list-followup{margin-top:4px}.rec-item{background:#fff;border:1px solid var(--line);border-radius:var(--radius-pill);padding:10px 16px;font-size:var(--font-sm);color:#4b5563;cursor:pointer;text-align:right;box-shadow:0 1px 2px #00000008;transition:all .2s;outline:none;-moz-appearance:none;appearance:none;-webkit-appearance:none;-webkit-tap-highlight-color:rgba(255,93,140,.18)}.rec-item:focus,.rec-item:focus-visible{border-color:var(--line);color:#4b5563;background:#fff}.rec-item:active{border-color:var(--main-pink);color:var(--main-pink);background:#fffafb}@media (hover: hover) and (pointer: fine){.rec-item:hover{border-color:var(--main-pink);color:var(--main-pink);background:#fffafb}}.loading-bubble{min-width:0;width:fit-content;padding:14px 16px}.typing-dots{display:flex;gap:4px;align-items:center;height:20px}.dot{width:4px;height:4px;border-radius:50%;background:#9ca3af;animation:blink 1.4s infinite both}.dot:nth-child(2){animation-delay:.2s}.dot:nth-child(3){animation-delay:.4s}.error-text{margin:0;font-size:12px;color:#dc2626}.image-list{margin-top:8px;display:grid;gap:8px}.image-thumb-btn{border:none;padding:0;background:transparent;cursor:zoom-in}.image-thumb{width:100%;max-width:220px;border-radius:10px;border:1px solid var(--line);display:block}.image-viewer{position:fixed;top:0;right:0;bottom:0;left:0;background:#000000b8;display:flex;align-items:center;justify-content:center;z-index:9999;padding:12px}.image-viewer-img{max-width:96vw;max-height:92vh;border-radius:12px;background:#fff}.sticky-footer{position:fixed;left:50%;transform:translate(-50%);width:100%;max-width:var(--panel-width);bottom:var(--keyboard-offset, 0px);z-index:50;padding:8px 16px calc(4px + env(safe-area-inset-bottom));border-top:1px solid rgba(0,0,0,.03);background:#ffffffd9;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}.input-container{background:var(--bubble-bot-bg);border-radius:24px;padding:8px 12px 8px 16px;display:flex;align-items:flex-end;gap:var(--space-1);border:1px solid #f3f4f6}.chat-input{flex:1;margin:0;padding:8px 0;border:none;background:transparent;resize:none;max-height:100px;font-family:Pretendard,sans-serif;font-size:16px;font-weight:400;line-height:1.5;letter-spacing:0;color:var(--ink)}.chat-input::placeholder{color:var(--muted);opacity:1;letter-spacing:0}.chat-input:focus{outline:none}.btn-send{width:34px;height:34px;border-radius:50%;border:none;display:flex;align-items:center;justify-content:center;flex-shrink:0;color:#fff;transition:all .2s ease}.btn-send-icon{font-size:14px;line-height:1}.btn-send.disabled{background:#d1d5db;cursor:not-allowed;transform:scale(.95)}.btn-send.active{background:var(--gradient-pink);cursor:pointer;box-shadow:0 4px 10px #ff5d8c4d}.footer-caption{margin:8px 0 0;text-align:center;font-size:var(--font-xs);line-height:1.2;color:var(--muted);font-weight:500}@keyframes slideUp{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes blink{0%,80%,to{opacity:.2}40%{opacity:1}}@media (max-width: 360px){.chat-messages{padding:12px 12px 156px}.rec-item{font-size:13px}}
