:root{--bg-0:#0a0a14;--bg-1:#11101f;--bg-2:#16142a;--glass-bg:#ffffff0f;--glass-bg-strong:#ffffff17;--glass-border:#ffffff1f;--glass-border-strong:#fff3;--glass-fallback:#18162aeb;--text:#e5e7eb;--text-dim:#9ca3af;--text-faint:#6b7280;--text-h:#f8fafc;--accent:#7c3aed;--accent-2:#6366f1;--accent-3:#a855f7;--accent-cyan:#22d3ee;--accent-gradient:linear-gradient(135deg, #7c3aed 0%, #6366f1 50%, #a855f7 100%);--accent-glow:#7c3aed80;--danger:#ef4444;--danger-glow:#ef444473;--radius-sm:10px;--radius:16px;--radius-lg:20px;--radius-pill:999px;--shadow-glass:0 8px 32px #00000059;--shadow-glass-lg:0 16px 48px #00000073;--shadow-glow:0 8px 28px var(--accent-glow);--blur:18px;--blur-sm:10px;--ease:cubic-bezier(.22, 1, .36, 1);--ease-spring:cubic-bezier(.34, 1.56, .64, 1);--t-fast:.18s;--t:.28s;--sans:"Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;font:16px/1.55 var(--sans);--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;color:var(--text);font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*{box-sizing:border-box}body{min-height:100svh;color:var(--text);background-color:var(--bg-0);background-image:radial-gradient(60% 60% at 18% 12%, #7c3aed47, transparent 60%), radial-gradient(55% 55% at 82% 18%, #22d3ee29, transparent 60%), radial-gradient(70% 70% at 70% 88%, #6366f142, transparent 62%), radial-gradient(60% 60% at 12% 82%, #a855f733, transparent 60%), linear-gradient(160deg, var(--bg-0), var(--bg-1) 55%, var(--bg-2));background-size:200% 200%,200% 200%,200% 200%,200% 200%,100% 100%;background-attachment:fixed;margin:0;animation:28s ease-in-out infinite alternate meshDrift}@keyframes meshDrift{0%{background-position:0 0,100% 0,100% 100%,0 100%,0 0}to{background-position:30% 20%,70% 30%,60% 70%,30% 80%,0 0}}#root{text-align:center;box-sizing:border-box;flex-direction:column;width:100%;min-height:100svh;margin:0;display:flex}h1,h2{font-family:var(--sans);color:var(--text-h);margin:0}h1{letter-spacing:-.04em;font-size:clamp(2.4rem,6vw,3.6rem);font-weight:800;line-height:1.05}h2{letter-spacing:-.02em;font-size:clamp(1.3rem,4vw,1.75rem);font-weight:700}p{margin:0}button{font-family:inherit}:focus-visible{outline:2px solid var(--accent-3);outline-offset:2px}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:.001ms!important;animation-duration:.001ms!important;animation-iteration-count:1!important}}.chatroom-page{box-sizing:border-box;flex-direction:column;flex:1;align-items:center;width:100%;min-height:0;margin:0;display:flex;position:relative}.chatroom-page h2{z-index:20;letter-spacing:-.02em;color:var(--text-h);background:var(--glass-fallback);-webkit-backdrop-filter:blur(var(--blur)) saturate(120%);backdrop-filter:blur(var(--blur)) saturate(120%);border:1px solid var(--glass-border);border-radius:var(--radius-pill);box-shadow:var(--shadow-glass);text-overflow:ellipsis;white-space:nowrap;max-width:min(80vw,520px);margin:0;padding:10px 22px;font-size:clamp(1rem,3vw,1.3rem);font-weight:700;position:fixed;top:clamp(14px,3vh,26px);left:50%;overflow:hidden;transform:translate(-50%)}@supports ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){.chatroom-page h2{background:var(--glass-bg-strong)}}.chatroom-page #participantCount{z-index:19;letter-spacing:-.01em;color:var(--text-dim);background:var(--glass-fallback);-webkit-backdrop-filter:blur(var(--blur-sm)) saturate(120%);backdrop-filter:blur(var(--blur-sm)) saturate(120%);border:1px solid var(--glass-border);border-radius:var(--radius-pill);box-shadow:var(--shadow-glass);align-items:center;gap:7px;margin:0;padding:5px 13px;font-size:.78rem;font-weight:600;display:flex;position:fixed;top:calc(clamp(14px,3vh,26px) + 50px);left:50%;transform:translate(-50%)}.chatroom-page #participantCount:before{content:"";background:#4ade80;border-radius:50%;width:7px;height:7px;animation:2s ease-in-out infinite livePulse;box-shadow:0 0 8px #4ade80}@keyframes livePulse{0%,to{opacity:1}50%{opacity:.4}}@supports ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){.chatroom-page #participantCount{background:var(--glass-bg-strong)}}.chatroom-page #videoContainer{border-radius:var(--radius-lg);flex:1;width:100%;min-height:0;position:relative;overflow:hidden}.chatroom-page #peerFace{object-fit:cover;background:radial-gradient(60% 60% at 50% 40%,#6366f12e,#0000 70%),#06060d;width:100%;height:100%}.chatroom-page #myFace{cursor:pointer;width:clamp(120px,28vw,300px);height:auto;transition:transform var(--t) var(--ease), width .5s var(--ease), height .5s var(--ease), box-shadow var(--t) var(--ease), border-color var(--t) var(--ease);border-radius:var(--radius);object-fit:cover;border:1.5px solid var(--glass-border-strong);box-shadow:var(--shadow-glass), 0 0 0 1px #0006;background:#14121f;margin-bottom:clamp(96px,14vh,130px);margin-right:clamp(12px,3vw,30px);position:absolute;bottom:0;right:0}.chatroom-page #myFace:hover{border-color:var(--accent-2);box-shadow:var(--shadow-glass-lg), 0 0 0 1px var(--accent-glow);transform:scale(1.04)}.chatroom-page #myFace.enlarged{width:clamp(200px,50vw,600px);height:auto}.chatroom-page #controls{bottom:calc(clamp(18px, 4vh, 30px) + env(safe-area-inset-bottom));box-sizing:border-box;z-index:30;background:var(--glass-fallback);width:max-content;max-width:calc(100vw - 24px);-webkit-backdrop-filter:blur(var(--blur)) saturate(130%);backdrop-filter:blur(var(--blur)) saturate(130%);border:1px solid var(--glass-border);border-radius:var(--radius-pill);box-shadow:var(--shadow-glass-lg);animation:controlsIn .5s var(--ease-spring) both;flex-wrap:wrap;justify-content:center;align-items:center;gap:14px;padding:12px 16px;display:flex;position:fixed;left:50%;transform:translate(-50%)}@supports ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){.chatroom-page #controls{background:var(--glass-bg-strong)}}@keyframes controlsIn{0%{opacity:0;transform:translate(-50%,16px)}to{opacity:1;transform:translate(-50%)}}.chatroom-page .control-btn{width:54px;height:54px;color:var(--text-h);border:1px solid var(--glass-border);cursor:pointer;transition:transform var(--t) var(--ease-spring), background var(--t) var(--ease), border-color var(--t) var(--ease), box-shadow var(--t) var(--ease);background:#ffffff14;border-radius:50%;flex:none;justify-content:center;align-items:center;display:flex;overflow:hidden}.chatroom-page .control-btn:hover{border-color:var(--glass-border-strong);background:#ffffff24;transform:translateY(-3px);box-shadow:0 8px 22px #0006}.chatroom-page .control-btn:active{transform:translateY(-1px)scale(.94)}.chatroom-page .control-btn img{object-fit:contain;pointer-events:none;width:28px;height:28px}.chatroom-page .control-btn span{font-size:1.4rem;line-height:1}.chatroom-page .control-btn.is-active{border-color:var(--accent-2);box-shadow:0 0 0 1px var(--accent-glow), 0 6px 18px var(--accent-glow);background:#7c3aed47}.chatroom-page .control-btn.is-active:hover{background:#7c3aed66}.chatroom-page .control-btn.is-danger{background:#ef444438;border-color:#ef44448c}.chatroom-page .control-btn.is-danger:hover{border-color:var(--danger);box-shadow:0 8px 22px var(--danger-glow);background:#ef444466}.chatroom-page .trackChoose{flex-direction:column;gap:8px;display:flex}.chatroom-page .trackChoose select{appearance:none;border-radius:var(--radius-pill);border:1px solid var(--glass-border);color:var(--text);font-family:var(--sans);cursor:pointer;max-width:220px;transition:border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);background-color:#14121feb;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");background-position:right 12px center;background-repeat:no-repeat;padding:9px 30px 9px 12px;font-size:.85rem}.chatroom-page .trackChoose select:focus{border-color:var(--accent-2);box-shadow:0 0 0 3px var(--accent-glow);outline:none}.chatroom-page .trackChoose select option{color:var(--text);background:#14121f}.chatroom-page #toast{bottom:calc(clamp(90px, 16vh, 120px) + env(safe-area-inset-bottom));background:var(--glass-fallback);-webkit-backdrop-filter:blur(var(--blur)) saturate(120%);backdrop-filter:blur(var(--blur)) saturate(120%);color:var(--text-h);border:1px solid var(--glass-border-strong);border-radius:var(--radius-pill);box-shadow:var(--shadow-glass-lg);z-index:999;letter-spacing:-.01em;animation:toastIn .35s var(--ease-spring);padding:13px 24px;font-size:.95rem;font-weight:600;position:fixed;left:50%;transform:translate(-50%)}@supports ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){.chatroom-page #toast{background:var(--glass-bg-strong)}}@keyframes toastIn{0%{opacity:0;transform:translate(-50%,18px)}to{opacity:1;transform:translate(-50%)}}@media (width<=767px){.chatroom-page #controls{border-radius:var(--radius-lg);width:calc(100vw - 24px)}.chatroom-page .trackChoose{flex-basis:100%;align-items:stretch}.chatroom-page .trackChoose select{width:100%;max-width:none}}.modal-backdrop{-webkit-backdrop-filter:blur(8px)saturate(110%);backdrop-filter:blur(8px)saturate(110%);z-index:1000;animation:backdropIn .25s var(--ease) both;background:#06060e8c;justify-content:center;align-items:center;padding:16px;display:flex;position:fixed;inset:0}@keyframes backdropIn{0%{opacity:0}to{opacity:1}}.modal-card{background:var(--glass-fallback);-webkit-backdrop-filter:blur(var(--blur)) saturate(130%);backdrop-filter:blur(var(--blur)) saturate(130%);color:var(--text);border:1px solid var(--glass-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-glass-lg);box-sizing:border-box;text-align:left;width:min(92vw,420px);max-height:90vh;font-family:var(--sans);animation:cardPop .34s var(--ease-spring) both;padding:28px 26px 26px;position:relative;overflow-y:auto}@supports ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){.modal-card{background:linear-gradient(160deg,#ffffff1a,#ffffff0d)}}@keyframes cardPop{0%{opacity:0;transform:translateY(14px)scale(.95)}to{opacity:1;transform:translateY(0)scale(1)}}.modal-close{cursor:pointer;border:1px solid var(--glass-border);width:32px;height:32px;color:var(--text-dim);transition:background var(--t-fast) var(--ease), color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease-spring);background:#ffffff0f;border-radius:50%;justify-content:center;align-items:center;padding:0;font-size:15px;font-weight:700;line-height:1;display:flex;position:absolute;top:12px;right:12px}.modal-close:hover{color:var(--text-h);background:#ef444440;border-color:#ef444480;transform:rotate(90deg)}.modal-card form{text-align:left;flex-direction:column;gap:4px;margin-top:6px;display:flex}.modal-card label{color:var(--text-dim);letter-spacing:.01em;margin-bottom:7px;font-size:.85rem;font-weight:600;display:block}.modal-card .inline{margin-bottom:16px}.modal-card input[type=text],.modal-card input[type=password]{border:1px solid var(--glass-border);border-radius:var(--radius-sm);box-sizing:border-box;width:100%;color:var(--text-h);font-family:var(--sans);transition:border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease), background var(--t-fast) var(--ease);background:#ffffff0a;padding:12px 14px;font-size:.95rem}.modal-card input::placeholder{color:var(--text-faint)}.modal-card input[type=text]:focus,.modal-card input[type=password]:focus{border-color:var(--accent-2);box-shadow:0 0 0 3px var(--accent-glow);background:#ffffff12;outline:none}.modal-card button[type=submit]{background:var(--accent-gradient);color:#fff;border-radius:var(--radius-sm);cursor:pointer;letter-spacing:-.01em;width:100%;box-shadow:var(--shadow-glow), inset 0 1px 0 #ffffff40;transition:transform var(--t) var(--ease-spring), box-shadow var(--t) var(--ease), filter var(--t) var(--ease);border:none;margin-top:6px;padding:13px;font-size:1rem;font-weight:700}.modal-card button[type=submit]:hover:not(:disabled){filter:brightness(1.06);box-shadow:0 12px 34px var(--accent-glow), inset 0 1px 0 #ffffff4d;transform:translateY(-2px)}.modal-card button[type=submit]:active:not(:disabled){transform:translateY(0)scale(.98)}.modal-card button[type=submit]:disabled{color:var(--text-faint);box-shadow:none;cursor:not-allowed;background:#ffffff14}.modal-card .errorMsg{color:#fca5a5;margin-top:6px;font-size:.82rem;font-weight:500;display:block}.login-page{font-family:var(--sans);text-align:center;box-sizing:border-box;flex-direction:column;flex:1;justify-content:flex-start;align-items:center;gap:clamp(28px,5vh,48px);width:100%;max-width:1120px;margin:0 auto;padding:clamp(40px,8vh,96px) clamp(16px,4vw,40px) 96px;display:flex}.login-page h1{letter-spacing:-.045em;background:var(--accent-gradient);-webkit-text-fill-color:transparent;color:var(--accent-3);animation:heroIn .8s var(--ease) both;-webkit-background-clip:text;background-clip:text;margin:0;font-size:clamp(2.6rem,7vw,4.2rem);font-weight:800;line-height:1.04;position:relative}.login-page .login-sub{color:var(--text-dim);letter-spacing:-.01em;max-width:540px;animation:heroIn .8s var(--ease) 80ms both;margin:-18px 0 0;font-size:clamp(.95rem,2.4vw,1.15rem)}@keyframes heroIn{0%{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}.login-page #chatRoomList{grid-template-columns:1fr;gap:clamp(14px,2vw,20px);width:100%;max-width:980px;margin:0 auto;display:grid}.login-page .chatRoomItem{background:var(--glass-bg);background-color:var(--glass-fallback);-webkit-backdrop-filter:blur(var(--blur)) saturate(120%);backdrop-filter:blur(var(--blur)) saturate(120%);border:1px solid var(--glass-border);border-radius:var(--radius);box-shadow:var(--shadow-glass);text-align:left;transition:transform var(--t) var(--ease), border-color var(--t) var(--ease), box-shadow var(--t) var(--ease);opacity:0;animation:cardIn .55s var(--ease) both;flex-direction:column;align-items:stretch;gap:10px;padding:20px;display:flex}@supports ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){.login-page .chatRoomItem{background-color:var(--glass-bg)}}@keyframes cardIn{0%{opacity:0;transform:translateY(20px)scale(.98)}to{opacity:1;transform:translateY(0)scale(1)}}.login-page .chatRoomItem:first-child{animation-delay:20ms}.login-page .chatRoomItem:nth-child(2){animation-delay:80ms}.login-page .chatRoomItem:nth-child(3){animation-delay:.14s}.login-page .chatRoomItem:nth-child(4){animation-delay:.2s}.login-page .chatRoomItem:nth-child(5){animation-delay:.26s}.login-page .chatRoomItem:nth-child(6){animation-delay:.32s}.login-page .chatRoomItem:nth-child(n+7){animation-delay:.38s}.login-page .chatRoomItem:hover{border-color:var(--glass-border-strong);box-shadow:var(--shadow-glass-lg), 0 0 0 1px var(--accent-glow), 0 12px 40px #7c3aed38;transform:translateY(-4px)}.login-page .chatRoomItem button{appearance:none;color:var(--text-h);border-radius:var(--radius-sm);cursor:pointer;letter-spacing:-.01em;text-align:left;width:100%;transition:color var(--t-fast) var(--ease);background:0 0;border:none;padding:12px 14px;font-size:1.05rem;font-weight:700}.login-page .chatRoomItem button:before{content:"#";color:var(--accent-3);margin-right:8px;font-weight:800}.login-page .chatRoomItem button:hover{color:var(--accent-3)}.login-page .roomContent{color:var(--text-dim);padding:0 14px;font-size:.9rem;line-height:1.5}.login-page .room-empty{width:100%;max-width:560px;color:var(--text-dim);background:var(--glass-bg);background-color:var(--glass-fallback);-webkit-backdrop-filter:blur(var(--blur)) saturate(120%);backdrop-filter:blur(var(--blur)) saturate(120%);border:1px dashed var(--glass-border-strong);border-radius:var(--radius-lg);box-shadow:var(--shadow-glass);animation:cardIn .55s var(--ease) both;flex-direction:column;justify-content:center;align-items:center;gap:12px;margin:0 auto;padding:clamp(40px,8vh,72px) 28px;font-size:1.05rem;display:flex}@supports ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){.login-page .room-empty{background-color:var(--glass-bg)}}.login-page .room-empty:before{content:"💬";filter:grayscale(.2) drop-shadow(0 4px 12px var(--accent-glow));opacity:.9;font-size:2.6rem}.login-page #createRoom{appearance:none;background:var(--accent-gradient);color:#fff;border-radius:var(--radius-pill);cursor:pointer;letter-spacing:-.01em;box-shadow:var(--shadow-glow), inset 0 1px 0 #ffffff40;transition:transform var(--t) var(--ease-spring), box-shadow var(--t) var(--ease), filter var(--t) var(--ease);border:none;align-self:center;padding:15px 34px;font-size:1.05rem;font-weight:700;position:sticky;bottom:clamp(20px,4vh,36px)}.login-page #createRoom:before{content:"+ ";font-weight:800}.login-page #createRoom:hover{box-shadow:0 14px 38px var(--accent-glow), inset 0 1px 0 #ffffff4d;filter:brightness(1.06);transform:translateY(-3px)scale(1.02)}.login-page #createRoom:active{transform:translateY(-1px)scale(.97)}.login-page input[type=text],.login-page input[type=password]{border:1px solid var(--glass-border);border-radius:var(--radius-sm);color:var(--text);box-sizing:border-box;transition:border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);background:#ffffff0a;margin:4px;padding:10px 12px}.login-page input[type=text]:focus,.login-page input[type=password]:focus{border-color:var(--accent-2);box-shadow:0 0 0 3px var(--accent-glow);outline:none}