:root{color-scheme:dark;--brand-1:#ff7a59;--brand-2:#ff3d71;--brand:#ff5a6e;--on-brand:#fff;--brand-soft:rgba(255,90,110,0.12);--brand-soft-strong:rgba(255,90,110,0.25);--bg:#0e0e12;--panel:#16161d;--panel-2:#1d1d26;--panel-3:#2a2a35;--line:#2a2a35;--text:#f3f3f5;--muted:#8b8b97;--surface-soft:rgba(255,255,255,0.06);--surface-soft-hover:rgba(255,255,255,0.12);--overlay:rgba(7,7,10,0.82);--shadow:rgba(0,0,0,0.4);--shimmer-a:rgba(255,255,255,0.04);--shimmer-b:rgba(255,255,255,0.11);--tile-bg:#000;--scrim:rgba(0,0,0,0.55);--on-scrim:#fff;--ok:#4ade80;--auth-glow:#1a1520;--r-sm:8px;--r-md:10px;--r-lg:14px}@media (prefers-color-scheme:light){:root:not([data-theme=dark]){color-scheme:light;--brand-soft:rgba(255,90,110,0.14);--brand-soft-strong:rgba(255,90,110,0.22);--bg:#f6f6f8;--panel:#ffffff;--panel-2:#f1f1f4;--panel-3:#e5e5eb;--line:#e3e3e9;--text:#17171d;--muted:#6c6c78;--surface-soft:rgba(0,0,0,0.05);--surface-soft-hover:rgba(0,0,0,0.09);--overlay:rgba(22,22,28,0.42);--shadow:rgba(0,0,0,0.16);--shimmer-a:rgba(0,0,0,0.04);--shimmer-b:rgba(0,0,0,0.09);--ok:#15a34a;--auth-glow:#fdeef0}}:root[data-theme=light]{color-scheme:light;--brand-soft:rgba(255,90,110,0.14);--brand-soft-strong:rgba(255,90,110,0.22);--bg:#f6f6f8;--panel:#ffffff;--panel-2:#f1f1f4;--panel-3:#e5e5eb;--line:#e3e3e9;--text:#17171d;--muted:#6c6c78;--surface-soft:rgba(0,0,0,0.05);--surface-soft-hover:rgba(0,0,0,0.09);--overlay:rgba(22,22,28,0.42);--shadow:rgba(0,0,0,0.16);--shimmer-a:rgba(0,0,0,0.04);--shimmer-b:rgba(0,0,0,0.09);--ok:#15a34a;--auth-glow:#fdeef0}input:-webkit-autofill,input:-webkit-autofill:active,input:-webkit-autofill:focus,input:-webkit-autofill:hover{-webkit-text-fill-color:var(--text);box-shadow:0 0 0 1000px var(--panel-2) inset;caret-color:var(--text);-webkit-transition:background-color 9999s ease-in-out 0s;transition:background-color 9999s ease-in-out 0s}*{margin:0;padding:0;box-sizing:border-box}body,html{height:100%;background:var(--bg);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}button{font:inherit;color:inherit;cursor:pointer;border:none;background:none}.app{display:grid;grid-template-columns:320px 1fr;height:100vh}.sidebar{background:var(--panel);border-right:1px solid var(--line);display:flex;flex-direction:column;min-height:0}.brand{display:flex;align-items:center;gap:10px;padding:18px 18px 14px}.brand img{width:34px;height:34px;border-radius:9px}.brand h1{font-size:19px;font-weight:700;letter-spacing:-.3px;flex:1 1}.modal{position:relative;width:min(440px,92vw);background:var(--panel);border-radius:16px;box-shadow:0 18px 50px var(--shadow);padding:20px;display:flex;flex-direction:column;gap:12px}.modal-btn:hover:not(.disabled),.modal-btn:hover:not(.disabled) .mb-icon{border-color:var(--brand);color:var(--brand)}.modal-btn.disabled{opacity:.55;cursor:default}.modal-btn .mb-desc,.modal-btn.disabled:hover .mb-desc{color:var(--muted)}.join-btn{flex-shrink:0;padding:0 18px;font-weight:600;color:var(--on-brand);background:linear-gradient(135deg,var(--brand-1),var(--brand-2));border-radius:12px}.join-btn:hover{opacity:.92}.billing-btn{display:flex;align-items:center;gap:8px;margin:4px 12px;padding:9px 8px;font-size:13px;color:var(--muted);border-radius:var(--r-md)}.billing-btn:hover{color:var(--text);background:var(--surface-soft)}.modal.billing{gap:0}.modal-title{font-size:17px;font-weight:700}.modal-sub{font-size:12px;color:var(--muted);margin:4px 0 16px}.price-list{list-style:none;display:flex;flex-direction:column;gap:8px}.price-list li{display:flex;align-items:center;gap:12px;padding:13px 14px;background:var(--panel-2);border-radius:var(--r-md)}.price-list li svg{color:var(--brand)}.price-name{flex:1 1;font-size:14px;font-weight:600}.price-val{font-size:16px;font-weight:700}.price-val i{font-size:11px;font-weight:500;font-style:normal;color:var(--muted);margin-left:2px}.retention{margin:0 20px 16px;font-size:12px;line-height:1.5;color:var(--muted)}.retention b{color:var(--brand)}.list{overflow-y:auto;flex:1 1;padding:0 8px 8px}.row{display:flex;gap:12px;align-items:center;padding:10px 12px;border-radius:var(--r-md);width:100%;text-align:left}.row:hover{background:var(--surface-soft)}.row.active{background:var(--panel-2)}.row.active .row-name{color:var(--brand)}.avatar{width:44px;height:44px;border-radius:50%;flex-shrink:0;display:grid;place-items:center;font-weight:600;font-size:15px;color:var(--muted);background:var(--panel-2)}.row-main{flex:1 1;min-width:0}.row-top{display:flex;justify-content:space-between;gap:8px}.row-name{font-weight:600;font-size:14px}.row-time{font-size:11px;color:var(--muted);flex-shrink:0}.row-msg{font-size:13px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.row-msg .expiring{color:var(--brand)}.chat{display:flex;flex-direction:column;min-width:0;background:var(--bg)}.chat-header{display:flex;align-items:center;padding:16px 24px;border-bottom:1px solid var(--line);gap:14px}.chat-header .who{flex:1 1;min-width:0}.chat-header .who .name{font-weight:600;font-size:15px}.chat-header .who .status{font-size:12px;color:var(--muted)}.actions{display:flex;gap:6px}.action{width:40px;height:40px;border-radius:var(--r-md);display:grid;place-items:center;color:var(--text)}.action:hover{background:var(--panel-2);color:var(--brand)}.action svg{width:20px;height:20px}.thread{flex:1 1;overflow-y:auto;padding:24px 24px 8px;display:flex;flex-direction:column;gap:12px}.day{align-self:center;font-size:11px;color:var(--muted);margin:4px 0 10px}.bubble{max-width:64%;padding:10px 14px;border-radius:var(--r-lg);font-size:14px;line-height:1.45;position:relative}.bubble .meta{display:block;margin-top:4px;font-size:10px;opacity:.6}.bubble.me{align-self:flex-end;background:linear-gradient(135deg,var(--brand-1),var(--brand-2));color:var(--on-brand);border-bottom-right-radius:4px}.bubble.them{align-self:flex-start;background:var(--panel-2);border-bottom-left-radius:4px}.bubble.fading{opacity:.4}.bubble.fading:after{content:"곧 사라짐";position:absolute;top:-8px;right:8px;font-size:9px;color:var(--brand)}.composer{display:flex;gap:8px;padding:12px 24px 22px}.composer input{flex:1 1;padding:13px 16px;font-size:14px;color:var(--text);background:var(--panel-2);border:none;border-radius:var(--r-md);outline:none}.composer input:focus{box-shadow:inset 0 0 0 1px var(--brand)}.send{padding:0 20px;border-radius:12px;font-weight:600;color:var(--on-brand);background:linear-gradient(135deg,var(--brand-1),var(--brand-2))}.chip-mock{display:inline-block;margin-left:8px;vertical-align:middle;font-size:9px;font-weight:700;letter-spacing:.3px;border-radius:5px;padding:2px 6px;line-height:1.4}.add-friend,.chip-mock{color:var(--muted);background:var(--panel-2)}.add-friend{display:flex;align-items:center;gap:8px;margin:0 14px 10px;padding:4px 4px 4px 12px;border-radius:var(--r-md)}.add-friend:focus-within{box-shadow:inset 0 0 0 1px var(--brand);color:var(--brand)}.add-friend input{flex:1 1;min-width:0;padding:9px 0;font-size:14px;color:var(--text);background:none;border:none;outline:none}.add-friend button{padding:7px 14px;font-size:13px;font-weight:600;color:var(--on-brand);background:linear-gradient(135deg,var(--brand-1),var(--brand-2));border-radius:var(--r-sm)}.add-friend button:disabled{opacity:.35}.list-empty{padding:28px 20px;font-size:13px;line-height:1.7;text-align:center;color:var(--muted)}.id-status{min-height:18px;margin:-4px 0 8px;font-size:12px}.id-status.ok{color:var(--ok)}.auth-note,.id-status.bad{color:var(--muted)}.auth-note{margin-top:14px;font-size:12px;line-height:1.6}.action.ringing{color:var(--brand);animation:ring-pulse 1s ease-in-out infinite}.modal-close{position:absolute;top:12px;right:12px;color:var(--muted)}.modal-close:hover{color:var(--text)}.composer input[hidden]{display:none}.attach-btn{width:44px;flex:0 0 44px;display:grid;place-items:center;color:var(--muted);border-radius:var(--r-md)}.attach-btn:hover:not(:disabled){color:var(--brand);border-color:var(--brand)}.attach-btn:disabled{opacity:.35}.attach-btn.recording{color:var(--on-brand);background:var(--brand);border-color:var(--brand)}.rec-bar{flex:1 1;display:flex;align-items:center;gap:10px;padding:13px 16px;font-size:13px;background:var(--panel-2);border:1px solid var(--brand);border-radius:12px}.rec-dot{width:9px;height:9px;border-radius:50%;background:var(--brand);animation:rec-pulse 1s ease-in-out infinite}@keyframes rec-pulse{50%{opacity:.25}}.rec-time{font-feature-settings:"tnum";font-variant-numeric:tabular-nums;font-weight:600}.rec-hint{color:var(--muted);font-size:12px}.bubble.with-att{padding:6px 6px 8px;max-width:320px}.bubble-text,.bubble.with-att .meta{padding:0 8px}.bubble-text{display:block}.bubble.with-att .bubble-text{margin-top:6px}.att{display:block}.att-image img{display:block;width:100%;max-height:320px;object-fit:cover;border-radius:12px}.att-image{position:relative}.att.uploading{opacity:.6}.att-progress{position:absolute;left:8px;bottom:8px;font-size:10px;padding:3px 8px;border-radius:999px;background:var(--scrim);color:var(--on-scrim)}.att-skeleton{width:240px;height:160px;border-radius:12px;background:linear-gradient(100deg,var(--shimmer-a) 40%,var(--shimmer-b) 50%,var(--shimmer-a) 60%);background-size:240% 100%;animation:att-shimmer 1.2s linear infinite}.att-skeleton.short{width:240px;height:40px}@keyframes att-shimmer{to{background-position:-240% 0}}.att-audio{display:flex;align-items:center;gap:8px;padding:2px}.att-audio audio{width:240px;height:38px}.att-dur{font-size:10px;opacity:.7;font-feature-settings:"tnum";font-variant-numeric:tabular-nums}.att-file{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;background:var(--surface-soft);color:inherit;min-width:200px}.att-file:hover{background:var(--surface-soft-hover)}.att-file-main{flex:1 1;min-width:0;display:flex;flex-direction:column}.att-file-name{font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.att-file-size{font-size:10px;opacity:.65}.att-gone{display:flex;align-items:center;gap:8px;padding:10px 12px;font-size:12px;color:var(--muted);border:1px dashed var(--line);border-radius:12px}@media (max-width:720px){.rec-hint{display:none}.bubble.with-att{max-width:78%}}.overlay{position:fixed;inset:0;background:var(--overlay);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);display:grid;place-items:center;z-index:50}.call{width:min(720px,92vw);background:var(--panel);border-radius:18px;box-shadow:0 18px 50px var(--shadow);padding:28px;text-align:center;position:relative;overflow:hidden}.call .kind{position:absolute;top:16px;left:16px;font-size:12px;color:var(--muted);background:var(--surface-soft);padding:6px 12px;border-radius:999px}.call-controls{display:flex;justify-content:center;gap:12px;margin-top:22px}.cc{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;background:var(--panel-2)}.cc:hover{background:var(--panel-3)}.cc svg{width:22px;height:22px}.cc.end{background:var(--brand-2);border-color:var(--brand-2)}.cc.on{border-color:var(--brand)}.cc.off{color:var(--brand)}.auth-loading{display:grid;place-items:center;height:100vh;color:var(--muted)}.auth-screen{display:grid;place-items:center;height:100vh;background:radial-gradient(80% 60% at 50% 0,var(--auth-glow) 0,var(--bg) 70%)}.auth-card{width:360px;max-width:calc(100vw - 32px);background:var(--panel);border-radius:16px;box-shadow:0 18px 50px var(--shadow);padding:32px 28px;display:flex;flex-direction:column}.auth-brand{display:flex;align-items:center;gap:10px;justify-content:center;margin-bottom:26px}.auth-brand img{width:36px;height:36px;border-radius:9px}.auth-brand h1{font-size:22px;font-weight:700}.auth-sub{text-align:center;color:var(--muted);font-size:14px;margin:8px 0 22px}.auth-input{background:var(--panel-2);border:none;border-radius:var(--r-md);padding:12px 14px;color:var(--text);font-size:15px;margin-bottom:10px;outline:none}.auth-input:focus{box-shadow:inset 0 0 0 1px var(--brand)}.auth-primary{background:linear-gradient(135deg,var(--brand-1),var(--brand-2));color:var(--on-brand);font-weight:600;border-radius:var(--r-md);padding:12px;margin-top:4px}.auth-primary:disabled{opacity:.6}.auth-divider{display:flex;align-items:center;gap:10px;margin:16px 0;color:var(--muted);font-size:12px}.auth-divider:after,.auth-divider:before{content:"";flex:1 1;height:1px;background:var(--line)}.auth-google{display:flex;align-items:center;justify-content:center;gap:10px;background:var(--panel-2);border-radius:var(--r-md);padding:12px;font-weight:500}.auth-google-icon{flex-shrink:0}.auth-google:disabled{opacity:.6}.auth-msg{color:var(--brand);font-size:13px;text-align:center;margin-top:14px}.auth-toggle{color:var(--muted);font-size:13px;margin-top:18px}.auth-toggle:hover{color:var(--text)}.account{display:flex;align-items:center;gap:10px;padding:10px 12px 14px;margin:8px 8px 4px}.account-avatar{width:32px;height:32px;border-radius:50%;background:var(--panel-2);display:grid;place-items:center;color:var(--muted);overflow:hidden;flex-shrink:0}.account-avatar img{width:100%;height:100%;object-fit:cover}.account-info{flex:1 1;min-width:0}.account-name{font-size:13px;font-weight:600}.account-email,.account-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.account-email{font-size:11px;color:var(--muted)}.logout-btn,.theme-btn{color:var(--muted);display:grid;place-items:center;padding:6px;border-radius:8px;flex-shrink:0}.logout-btn:hover,.theme-btn:hover{color:var(--brand);background:var(--panel-2)}.action.ping:hover{color:var(--brand)}.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:var(--panel-2);color:var(--text);font-size:14px;font-weight:500;padding:12px 18px;border-radius:12px;box-shadow:0 8px 30px var(--shadow);z-index:100}.ring-avatar .ring{position:absolute;inset:0;border-radius:50%;border:2px solid var(--brand);opacity:0;animation:ring-pulse 1.8s ease-out infinite}.ring-avatar .ring.r2{animation-delay:.9s}@keyframes ring-pulse{0%{transform:scale(.7);opacity:.7}to{transform:scale(1.25);opacity:0}}@keyframes accept-bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-5px)}}.call.room .kind{position:static;display:inline-block;margin:6px 0 20px}.part .avatar{width:40px;height:40px}.me-tag{font-size:10px;font-weight:700;color:var(--brand);background:var(--brand-soft);border-radius:5px;padding:1px 5px;margin-left:4px}.grid{grid-template-columns:repeat(auto-fit,minmax(160px,1fr));grid-gap:10px;gap:10px;width:100%;margin:14px 0 18px}.grid,.tile{display:grid}.tile{position:relative;aspect-ratio:4/3;background:var(--panel-2);border-radius:var(--r-lg);overflow:hidden;place-items:center}.tile-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:var(--tile-bg)}.tile-video.hidden{display:none}.tile-avatar{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;color:var(--muted);background:var(--panel)}.tile-label{position:absolute;left:8px;bottom:8px;display:inline-flex;align-items:center;gap:5px;max-width:calc(100% - 16px);font-size:12px;font-weight:600;color:var(--on-scrim);background:var(--scrim);border-radius:7px;padding:3px 8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.tile-label .me-tag{background:var(--brand-soft-strong)}.room-help{position:absolute;top:14px;right:14px;z-index:3;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;color:var(--muted);background:var(--panel-2)}.room-help:hover{color:var(--brand)}.modal.help{gap:0}.help-list{list-style:none;display:flex;flex-direction:column;gap:8px}.help-icon.on{border-color:var(--brand)}.help-icon.off{color:var(--brand)}.back-btn{display:none;width:36px;height:36px;border-radius:9px;place-items:center;color:var(--text);flex-shrink:0;margin-right:2px}.back-btn:hover{background:var(--panel-2)}@media (max-width:1100px){.app{grid-template-columns:1fr}.sidebar{border-right:none}.app.mobile-chat .sidebar,.chat{display:none}.app.mobile-chat .chat{display:flex}.back-btn{display:grid}}.account-main{display:flex;align-items:center;gap:10px;flex:1 1;min-width:0;text-align:left;padding:4px;margin:-4px;border-radius:10px}.account-main.active,.account-main:hover{background:var(--panel-2)}.empty-chat{flex:1 1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:24px;text-align:center}.empty-title{font-size:16px;font-weight:700}.empty-sub{font-size:13px;color:var(--muted);line-height:1.6;max-width:320px}.empty-sub b{color:var(--brand)}.name{display:flex;align-items:center;gap:7px}