:root { --bg:#212121; --sidebar:#171717; --text:#f4f4f4; --muted:#a6a6a6; --accent:#63d6c2; }
* { box-sizing:border-box; } body { margin:0; min-height:100vh; background:var(--bg); color:var(--text); font-family:Inter, Pretendard, "Noto Sans KR", system-ui, sans-serif; } button,textarea { font:inherit; } button { color:inherit; }
.app-layout { display:flex; min-height:100vh; }.sidebar { width:260px; flex:0 0 260px; display:flex; flex-direction:column; padding:14px 12px; background:var(--sidebar); border-right:1px solid #292929; }.brand { display:flex; align-items:center; gap:10px; height:38px; padding:0 8px; font-weight:700; font-size:.94rem; }.brand-mark { display:grid; width:22px; height:22px; place-items:center; border-radius:6px; background:linear-gradient(135deg,#5ddbc7,#358b92); color:#0b2929; font-weight:900; }.new-chat,.history-item { width:100%; border:0; background:transparent; border-radius:8px; text-align:left; cursor:pointer; }.new-chat { display:flex; align-items:center; gap:9px; margin:18px 0 22px; padding:10px; border:1px solid #454545; font-size:.9rem; }.new-chat:hover,.history-item:hover,.history-item.active { background:#2b2b2b; }.new-chat span { font-size:1.25rem; line-height:.8; }.chat-history p { margin:0 8px 7px; color:#777; font-size:.72rem; font-weight:700; }.history-item { padding:9px 10px; color:#c7c7c7; font-size:.84rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.sidebar-footer { margin-top:auto; display:flex; flex-wrap:wrap; align-items:center; gap:7px; padding:10px 8px 2px; color:#bbb; font-size:.76rem; }.sidebar-footer small { display:block; width:100%; margin-left:15px; color:#777; }.status-dot { width:7px; height:7px; border-radius:100%; background:#56c3a6; }
.chat-app { position:relative; display:flex; flex:1; flex-direction:column; min-width:0; min-height:100vh; }.topbar { height:58px; display:flex; align-items:center; justify-content:space-between; padding:0 24px; }.title-group { display:flex; align-items:center; gap:9px; }.title-group h1 { margin:0; font-size:.98rem; font-weight:650; }.mode-badge { border:1px solid #3d665f; border-radius:99px; color:#87d8c9; padding:3px 7px; font-size:.66rem; }.icon-button { border:0; border-radius:7px; background:transparent; cursor:pointer; color:#aaa; font-size:1rem; padding:7px 9px; }.icon-button:hover { background:#303030; color:#fff; }.mobile-only { display:none; }
.conversation { width:min(820px, calc(100% - 48px)); flex:1; margin:0 auto; padding:8vh 0 190px; }.welcome { max-width:720px; margin:0 auto; text-align:center; }.eyebrow { margin:0 0 13px; color:var(--accent); font-size:.7rem; font-weight:800; letter-spacing:.12em; }.welcome h2 { margin:0; font-size:clamp(2rem,4vw,3rem); letter-spacing:-.055em; }.welcome > p:not(.eyebrow) { margin:16px 0 34px; color:var(--muted); line-height:1.65; }.suggestions { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; text-align:left; }.suggestions button { display:flex; flex-direction:column; gap:6px; min-height:115px; padding:15px; border:1px solid #3b3b3b; border-radius:12px; background:#282828; cursor:pointer; transition:.15s ease; }.suggestions button:hover { border-color:#5b968b; background:#2d302f; transform:translateY(-2px); }.suggestions strong { font-size:.88rem; }.suggestions span { color:var(--muted); font-size:.74rem; line-height:1.45; }
.message { display:grid; grid-template-columns:28px 1fr; gap:13px; margin:0 auto 26px; line-height:1.7; }.message::before { display:grid; width:28px; height:28px; place-items:center; border-radius:7px; font-size:.74rem; font-weight:800; }.assistant-message::before { content:"Y"; background:linear-gradient(135deg,#5ddbc7,#358b92); color:#0b2929; }.user-message::before { content:"나"; background:#555; }.message-content { padding:1px 0; white-space:pre-wrap; }.message-label { margin:0 0 5px; color:#9e9e9e; font-size:.72rem; font-weight:700; }
.progress-panel { position:fixed; bottom:116px; left:calc(50% - 280px); z-index:3; display:flex; gap:10px; width:min(620px, calc(100% - 48px)); padding:12px 15px; border:1px solid #3b635d; border-radius:10px; background:#263330; box-shadow:0 10px 32px #0005; }.progress-panel p { margin:0; color:#e5f4f0; font-size:.84rem; }.progress-panel ol { margin:4px 0 0; padding:0; list-style:none; color:#afc8c2; font-size:.74rem; }.progress-panel li:not(:last-child) { display:none; }.spinner { flex:0 0 auto; width:16px; height:16px; margin-top:2px; border:2px solid #72d5c4; border-right-color:transparent; border-radius:50%; animation:spin .8s linear infinite; } @keyframes spin { to { transform:rotate(360deg); } }
.composer-area { position:fixed; right:0; bottom:0; left:260px; z-index:2; padding:18px max(24px, calc((100vw - 820px)/2)) 15px; background:linear-gradient(transparent,var(--bg) 26%); }.composer { display:flex; align-items:flex-end; gap:10px; padding:10px 11px 10px 16px; border:1px solid #505050; border-radius:18px; background:#2b2b2b; box-shadow:0 5px 18px #0003; }.composer:focus-within { border-color:#707070; }.composer textarea { width:100%; max-height:180px; resize:none; border:0; outline:0; background:transparent; color:var(--text); line-height:1.5; padding:5px 0; }.composer textarea::placeholder { color:#929292; }.send-button { display:grid; width:31px; height:31px; flex:0 0 31px; place-items:center; border:0; border-radius:9px; background:#e5e5e5; color:#222; cursor:pointer; font-size:1.2rem; font-weight:800; }.send-button:disabled { background:#555; color:#888; cursor:wait; }.composer-note { margin:9px 0 0; color:#808080; text-align:center; font-size:.68rem; }.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(1px,1px,1px,1px); }
@media (max-width:720px) { .sidebar { display:none; }.sidebar.open { display:flex; position:fixed; z-index:5; top:0; bottom:0; box-shadow:8px 0 28px #0008; }.mobile-only { display:block; }.topbar { padding:0 12px; }.conversation { width:min(100% - 28px,820px); padding-top:7vh; }.suggestions { grid-template-columns:1fr; }.suggestions button { min-height:70px; }.composer-area { left:0; padding:16px 14px 12px; }.progress-panel { left:14px; bottom:110px; width:calc(100% - 28px); } }