/* ============================================================ Proctor Meet — real (LiveKit) build, redesigned skin Light minimal · blue accent · humanist sans · rich motion Class names match the working SDK build (label / micoff / speaking-bars / handup / screen-self / camSelect / audioBanner). Three cosmetic design directions via [data-dir] on . ============================================================ */ :root { --bg:#eef1f6; --bg-2:#e7ebf2; --surface:#fff; --tile:#e8edf3; --tile-2:#dfe6ee; --ink:#1d2530; --ink-2:#59626f; --ink-3:#8b94a1; --line:#e4e8ee; --line-strong:#d4dae2; --accent:#2f6bf0; --accent-press:#2156c9; --accent-soft:#e6efff; --accent-ink:#1b3f8f; --danger:#e5484d; --danger-soft:#fdeceb; --r-tile:22px; --r-card:20px; --r-chip:999px; --gap:14px; --sh-1:0 1px 2px rgba(22,32,52,.05); --sh-2:0 10px 30px rgba(22,32,52,.09),0 2px 6px rgba(22,32,52,.05); --sh-3:0 24px 60px rgba(22,32,52,.16),0 6px 16px rgba(22,32,52,.07); --bar-bg:rgba(255,255,255,.96); --bar-blur:saturate(1); --panel-bg:#fff; --panel-blur:none; --speak:var(--accent); --ease:cubic-bezier(.22,.61,.27,1); --ease-soft:cubic-bezier(.33,.9,.32,1); } /* ── Dark theme ── */ body[data-theme="dark"]{ --bg:#15171c; --bg-2:#1c1f25; --surface:#22262e; --tile:#282d35; --tile-2:#2f343d; --ink:#e8eaed; --ink-2:#9aa0a6; --ink-3:#727b88; --line:#30343c; --line-strong:#3c424b; --accent:#8ab4f8; --accent-press:#a6c8fb; --accent-soft:#1f2b40; --accent-ink:#aecbfa; --danger:#f28b82; --danger-soft:#3a2526; --sh-1:0 1px 2px rgba(0,0,0,.35); --sh-2:0 10px 30px rgba(0,0,0,.45),0 2px 6px rgba(0,0,0,.3); --sh-3:0 24px 60px rgba(0,0,0,.55),0 6px 16px rgba(0,0,0,.4); --bar-bg:rgba(32,36,44,.96); --panel-bg:#22262e; } body[data-theme="dark"] #join input, body[data-theme="dark"] #chatText, body[data-theme="dark"] #peopleSearch{ background:#1a1d23; } body[data-theme="dark"] #join input:focus, body[data-theme="dark"] #chatText:focus, body[data-theme="dark"] #peopleSearch:focus{ background:#22262e; } body[data-theme="dark"] #camSelect{ background:var(--surface); } body[data-theme="dark"] .code-chip:hover{ background:var(--bg-2); } body[data-dir="crisp"]{ --bg:#eaf0fa; --bg-2:#e1e9f6; --tile:#e6ecf5; --tile-2:#dbe3f0; --line:#d8e0ec; --r-tile:13px; --r-card:14px; --gap:12px; --sh-1:0 1px 1px rgba(22,40,80,.05); --sh-2:0 4px 14px rgba(22,40,80,.07); --sh-3:0 12px 32px rgba(22,40,80,.12); } body[data-dir="frosted"]{ --bg:#e9eef6; --tile:#e6ecf4; --r-tile:26px; --r-card:24px; --gap:20px; --bar-bg:rgba(255,255,255,.55); --bar-blur:blur(22px) saturate(1.6); --panel-bg:rgba(255,255,255,.72); --panel-blur:blur(26px) saturate(1.5); --sh-2:0 14px 40px rgba(22,32,52,.12); --sh-3:0 30px 70px rgba(22,32,52,.18); background:radial-gradient(120% 80% at 12% 0%, #eef3fb 0%, rgba(238,243,251,0) 55%), radial-gradient(120% 90% at 100% 100%, #e9edfb 0%, rgba(233,237,251,0) 50%), var(--bg); } * { box-sizing:border-box; } html,body{ height:100%; } body{ margin:0; font-family:"Pretendard Variable",Pretendard,system-ui,-apple-system,"Apple SD Gothic Neo","Noto Sans KR",sans-serif; background:var(--bg); color:var(--ink); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; letter-spacing:-.01em; overflow:hidden; transition:background .5s var(--ease); } .hidden{ display:none !important; } button{ font-family:inherit; } /* ════════ JOIN ════════ */ #join{ height:100vh; display:grid; place-items:center; padding:24px; position:relative; } #join::before{ content:""; position:absolute; inset:0; background:radial-gradient(60% 50% at 50% 8%, rgba(47,107,240,.06), transparent 70%); pointer-events:none; } #join .wrap{ width:392px; max-width:100%; display:flex; flex-direction:column; align-items:center; gap:22px; animation:rise .7s var(--ease) forwards; } .brand{ display:flex; align-items:center; gap:11px; } .brand .mark{ width:38px; height:38px; border-radius:12px; background:linear-gradient(150deg,var(--accent),#5b8bff); box-shadow:var(--sh-2),inset 0 1px 0 rgba(255,255,255,.4); position:relative; flex:0 0 auto; } .brand .mark::after{ content:""; position:absolute; inset:0; margin:auto; width:13px; height:13px; border-radius:4px; background:#fff; box-shadow:0 0 0 4px rgba(255,255,255,.18); } .brand .bname{ font-size:22px; font-weight:800; letter-spacing:-.03em; } .brand .bname b{ color:var(--accent); font-weight:800; } #join h1{ display:none; } #join .card{ width:100%; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-card); padding:26px 24px 24px; box-shadow:var(--sh-2); display:flex; flex-direction:column; gap:0; } #join .card .h{ margin:0 0 4px; font-size:19px; font-weight:750; letter-spacing:-.02em; } #join .card .sub{ margin:0 0 16px; font-size:13.5px; color:var(--ink-2); line-height:1.5; } #join label{ font-size:12.5px; font-weight:600; color:var(--ink-2); margin:0 0 7px; display:block; } #join .field{ margin-bottom:13px; } #join input{ width:100%; padding:12px 14px; border-radius:12px; border:1.5px solid var(--line-strong); background:#fbfcfe; color:var(--ink); font-size:14.5px; transition:border-color .18s,box-shadow .18s,background .18s; } #join input::placeholder{ color:var(--ink-3); } #join input:focus{ outline:none; border-color:var(--accent); background:#fff; box-shadow:0 0 0 4px var(--accent-soft); } #join .adv{ margin:2px 0 14px; } #join .adv summary{ font-size:12.5px; color:var(--ink-3); cursor:pointer; list-style:none; user-select:none; padding:2px 0; } #join .adv summary::-webkit-details-marker{ display:none; } #join .adv summary::before{ content:"⚙ "; } #join .adv .field{ margin-top:10px; margin-bottom:2px; } .ready-row{ display:flex; gap:8px; margin:2px 0 16px; } .ready-chip{ flex:1; display:flex; align-items:center; justify-content:center; gap:7px; padding:9px 10px; border-radius:11px; background:var(--accent-soft); color:var(--accent-ink); font-size:12.5px; font-weight:600; border:1px solid rgba(47,107,240,.14); } .ready-chip .dot{ width:7px; height:7px; border-radius:50%; background:#34a853; box-shadow:0 0 0 3px rgba(52,168,83,.18); } .btn{ padding:13px 16px; border:0; border-radius:13px; font-size:14.5px; font-weight:700; cursor:pointer; transition:transform .12s var(--ease),box-shadow .18s,background .18s,color .18s; } .btn:active{ transform:scale(.97); } .btn-primary{ background:var(--accent); color:#fff; box-shadow:0 6px 16px rgba(47,107,240,.32); } .btn-primary:hover{ background:var(--accent-press); box-shadow:0 8px 22px rgba(47,107,240,.4); } .btn-primary:disabled{ opacity:.55; cursor:not-allowed; box-shadow:none; } .btn-ghost{ background:transparent; color:var(--accent); border:1.5px solid var(--line-strong); } .btn-ghost:hover{ border-color:var(--accent); background:var(--accent-soft); } #joinErr{ color:var(--danger); font-size:13px; min-height:18px; margin:8px 0 2px; } #join .row{ display:flex; gap:8px; } #join .row .btn{ flex:1; } #join .foot{ font-size:12px; color:var(--ink-3); text-align:center; } /* ════════ MEETING ════════ */ #meet{ height:100vh; display:flex; flex-direction:column; position:relative; } #topbar{ display:flex; align-items:center; gap:12px; padding:16px 22px 8px; flex:0 0 auto; z-index:5; } #topbar .brand-sm{ display:flex; align-items:center; gap:9px; } #topbar .brand-sm .mark{ width:26px; height:26px; border-radius:8px; } #topbar .brand-sm .mark::after{ width:9px; height:9px; border-radius:3px; box-shadow:0 0 0 3px rgba(255,255,255,.18); } #topbar .brand-sm .bname{ font-size:15px; font-weight:800; letter-spacing:-.03em; } #topbar .brand-sm .bname b{ color:var(--accent); } #topbar .lbl{ font-size:13px; color:var(--ink-3); font-weight:600; } .divider{ width:1px; height:20px; background:var(--line-strong); } .code-chip{ display:inline-flex; align-items:center; gap:8px; background:var(--surface); border:1px solid var(--line); color:var(--ink); padding:6px 12px; border-radius:var(--r-chip); font-size:13px; font-weight:650; letter-spacing:.3px; white-space:nowrap; box-shadow:var(--sh-1); cursor:pointer; transition:background .15s,box-shadow .15s; } .code-chip:hover{ background:#fafbfd; box-shadow:var(--sh-2); } .code-chip .copyi{ width:13px; height:13px; color:var(--ink-3); display:inline-flex; } .clock{ font-size:13px; color:var(--ink-2); font-weight:600; font-variant-numeric:tabular-nums; white-space:nowrap; } #camSelect{ max-width:200px; background:var(--surface); color:var(--ink); border:1px solid var(--line); border-radius:var(--r-chip); padding:6px 12px; font-size:12.5px; font-weight:600; cursor:pointer; box-shadow:var(--sh-1); } #camSelect:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); } #camSelect:disabled{ opacity:.5; cursor:progress; } .count-chip{ display:inline-flex; align-items:center; gap:6px; font-size:13px; color:var(--ink-2); font-weight:600; white-space:nowrap; } .count-chip svg{ width:14px; height:14px; } .seg{ margin-left:auto; display:inline-flex; padding:4px; gap:2px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-chip); box-shadow:var(--sh-1); } .seg button{ border:0; background:transparent; cursor:pointer; font-size:12.5px; font-weight:650; color:var(--ink-2); padding:6px 13px; border-radius:var(--r-chip); white-space:nowrap; transition:color .15s,background .15s; } .seg button:hover{ color:var(--ink); } .seg button.on{ background:var(--accent); color:#fff; box-shadow:0 3px 8px rgba(47,107,240,.3); } /* audio banner */ #audioBanner{ position:fixed; top:60px; left:50%; transform:translateX(-50%); background:var(--accent); color:#fff; padding:10px 18px; border-radius:var(--r-chip); font-size:13.5px; font-weight:700; cursor:pointer; z-index:50; box-shadow:var(--sh-3); } /* stage / grid */ #stage{ flex:1; display:flex; min-height:0; gap:var(--gap); padding:6px 18px 8px; } #grid{ flex:1; display:grid; grid-template-columns:repeat(auto-fit,minmax(248px,1fr)); grid-auto-rows:minmax(0,1fr); gap:var(--gap); align-content:center; justify-content:center; min-height:0; } #grid > .tile:not(.screen-tile){ height:100%; width:auto; max-width:100%; min-height:0; margin:auto; } #sidebar{ display:none; } #stage.presenting #grid{ grid-template-columns:1fr; grid-auto-rows:1fr; align-content:stretch; } #stage.presenting #grid > .tile{ aspect-ratio:auto; height:100%; width:100%; max-width:none; margin:0; } #stage.presenting #grid .screen-tile video{ object-fit:contain; } #stage.presenting #grid > .tile:not(.screen-tile) video{ object-fit:cover; } #stage.presenting #sidebar{ display:flex; flex-direction:column; gap:var(--gap); width:230px; overflow-y:auto; padding-right:2px; scrollbar-width:thin; } #stage.presenting #sidebar .tile{ flex:0 0 auto; width:100%; aspect-ratio:16/9; min-height:0; } /* tile */ .tile{ position:relative; background:var(--tile); border-radius:var(--r-tile); overflow:hidden; aspect-ratio:16/9; min-height:150px; display:flex; align-items:center; justify-content:center; box-shadow:var(--sh-1); border:1px solid transparent; cursor:pointer; animation:tileIn .55s var(--ease) forwards; transition:box-shadow .25s var(--ease),transform .25s var(--ease),border-color .2s; } body[data-dir="crisp"] .tile{ border-color:var(--line); } body[data-dir="frosted"] .tile{ box-shadow:var(--sh-2); } .tile:hover{ box-shadow:var(--sh-2); transform:translateY(-2px); } .tile video{ width:100%; height:100%; object-fit:cover; background:var(--tile); } .tile video.off{ display:none; } /* 카메라/화면 영상이 보일 때는 아바타(이름 동그라미)를 숨겨 영상을 가리지 않게 */ .tile:has(video:not(.off)) .avatar{ display:none; } .tile.screen-tile .avatar{ display:none; } .tile .avatar{ position:absolute; width:92px; height:92px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:33px; font-weight:750; color:#fff; box-shadow:0 6px 18px rgba(22,32,52,.18), inset 0 0 0 1px rgba(255,255,255,.25); transition:transform .3s var(--ease); } .tile.speaking .avatar{ transform:scale(1.04); } /* presenter's own screen notice */ .tile.screen-tile{ background:#11151c; cursor:default; } .tile.screen-self{ background:#11151c; } .tile.screen-self .avatar{ display:none; } .tile.screen-self::after{ content:'🖥 내 화면을 공유하고 있습니다\A(다른 참가자 화면에는 정상적으로 표시됩니다)'; white-space:pre; text-align:center; color:#8a93a0; font-size:14px; line-height:1.8; padding:0 20px; font-family:ui-monospace,"SF Mono",Menlo,monospace; } /* speaking ring + glow */ .tile.speaking{ border-color:var(--speak); box-shadow:0 0 0 3px color-mix(in srgb,var(--speak) 38%,transparent),0 12px 30px rgba(47,107,240,.22); animation:tileIn .55s var(--ease) forwards, speakGlow 1.6s var(--ease-soft) infinite; } @keyframes speakGlow{ 0%,100%{ box-shadow:0 0 0 2px color-mix(in srgb,var(--speak) 30%,transparent),0 10px 26px rgba(47,107,240,.16); } 50%{ box-shadow:0 0 0 6px color-mix(in srgb,var(--speak) 18%,transparent),0 16px 34px rgba(47,107,240,.28); } } /* voice bars */ .speaking-bars{ position:absolute; left:11px; top:10px; display:none; gap:2.5px; align-items:flex-end; height:17px; padding:4px 6px; border-radius:8px; background:rgba(255,255,255,.82); box-shadow:var(--sh-1); backdrop-filter:blur(6px); } .tile.speaking .speaking-bars{ display:flex; } .speaking-bars span{ width:3px; border-radius:2px; background:var(--accent); transform-origin:bottom; animation:voice .85s var(--ease-soft) infinite; } .speaking-bars span:nth-child(1){ height:7px; animation-delay:0s; } .speaking-bars span:nth-child(2){ height:15px; animation-delay:.16s; } .speaking-bars span:nth-child(3){ height:10px; animation-delay:.32s; } @keyframes voice{ 0%,100%{ transform:scaleY(.34); } 50%{ transform:scaleY(1); } } /* name label chip */ .tile .label{ position:absolute; left:11px; bottom:11px; display:inline-flex; align-items:center; gap:6px; max-width:calc(100% - 22px); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size:13px; font-weight:600; color:#fff; background:rgba(17,22,30,.5); backdrop-filter:blur(8px); padding:5px 11px; border-radius:var(--r-chip); } .tile.pinned .label::before{ content:"📌"; } /* mic-off badge */ .tile .micoff{ position:absolute; right:11px; bottom:11px; width:28px; height:28px; border-radius:50%; display:none; align-items:center; justify-content:center; background:rgba(229,72,77,.92); color:#fff; box-shadow:var(--sh-1); font-size:0; } .tile.muted .micoff{ display:flex; } .tile .micoff svg{ width:15px; height:15px; } /* raised hand */ .tile .handup{ position:absolute; right:11px; top:10px; font-size:20px; display:none; filter:drop-shadow(0 2px 3px rgba(0,0,0,.25)); animation:wave 1.3s var(--ease-soft) infinite; transform-origin:70% bottom; } .tile.hand-up .handup{ display:block; } @keyframes wave{ 0%,100%{ transform:rotate(-9deg); } 50%{ transform:rotate(13deg); } } .tile.pinned{ border-color:var(--accent); } /* ════════ FLOATING CONTROL BAR ════════ */ #controls{ position:relative; flex:0 0 auto; display:flex; justify-content:center; padding:6px 0 22px; z-index:30; } .bar{ display:flex; align-items:center; gap:7px; padding:9px 12px; background:var(--bar-bg); -webkit-backdrop-filter:var(--bar-blur); backdrop-filter:var(--bar-blur); border:1px solid var(--line); border-radius:var(--r-chip); box-shadow:var(--sh-3); animation:rise .6s var(--ease) forwards; } .ctrl{ position:relative; width:50px; height:50px; border:0; border-radius:50%; background:transparent; color:var(--ink); cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:0; transition:background .15s,color .15s,transform .12s var(--ease); } .ctrl svg{ width:22px; height:22px; } .ctrl:hover{ background:var(--bg-2); } .ctrl:active{ transform:scale(.9); } .ctrl.on{ background:var(--accent-soft); color:var(--accent); } .ctrl.off{ background:var(--danger); color:#fff; } .ctrl.off:hover{ background:#d23b40; } .bar .sep{ width:1px; height:28px; background:var(--line-strong); margin:0 3px; } .ctrl.leave{ width:62px; border-radius:var(--r-chip); background:var(--danger); color:#fff; box-shadow:0 6px 16px rgba(229,72,77,.35); } .ctrl.leave:hover{ background:#d23b40; } .ctrl .badge,.ctrl #chatBadge{ position:absolute; top:4px; right:4px; min-width:17px; height:17px; padding:0 4px; background:var(--danger); color:#fff; font-size:10px; font-weight:700; line-height:17px; border-radius:9px; display:none; box-shadow:0 0 0 2px var(--bar-bg); } .ctrl #chatBadge.show{ display:block; } .ctrl[data-tip]::after{ content:attr(data-tip); position:absolute; bottom:calc(100% + 12px); left:50%; transform:translateX(-50%) translateY(4px); background:var(--ink); color:#fff; font-size:12px; font-weight:600; white-space:nowrap; padding:6px 10px; border-radius:8px; opacity:0; pointer-events:none; transition:opacity .14s,transform .14s; box-shadow:var(--sh-2); z-index:40; } .ctrl[data-tip]:hover::after{ opacity:1; transform:translateX(-50%) translateY(0); } /* emoji reaction popover */ #emojiBar{ position:absolute; bottom:calc(100% + 14px); left:50%; transform:translateX(-50%) translateY(8px) scale(.96); display:flex; gap:3px; padding:9px 11px; background:var(--bar-bg); -webkit-backdrop-filter:var(--bar-blur); backdrop-filter:var(--bar-blur); border:1px solid var(--line); border-radius:var(--r-chip); box-shadow:var(--sh-3); opacity:0; pointer-events:none; transition:opacity .2s var(--ease),transform .2s var(--ease); } #emojiBar:not(.hidden){ opacity:1; pointer-events:auto; transform:translateX(-50%) translateY(0) scale(1); } #emojiBar.hidden{ display:flex !important; } /* keep transition; visibility via opacity */ #emojiBar button{ border:0; background:transparent; cursor:pointer; font-size:23px; width:42px; height:42px; border-radius:50%; transition:transform .12s var(--ease),background .12s; } #emojiBar button:hover{ background:var(--bg-2); transform:scale(1.22) translateY(-2px); } /* floating reactions */ #reactionLayer{ position:absolute; inset:0; pointer-events:none; z-index:25; overflow:hidden; } .float-emoji{ position:absolute; bottom:92px; font-size:40px; animation:floatUp 2.6s var(--ease-soft) forwards; filter:drop-shadow(0 4px 10px rgba(22,32,52,.18)); } @keyframes floatUp{ 0%{ transform:translateY(0) scale(.5) rotate(-6deg); opacity:0; } 14%{ opacity:1; transform:translateY(-24px) scale(1.12) rotate(4deg); } 100%{ transform:translateY(-64vh) scale(.9) rotate(-3deg); opacity:0; } } /* ════════ SIDE PANELS ════════ */ #chatPanel,#peoplePanel{ position:absolute; top:12px; right:12px; bottom:12px; width:332px; max-width:calc(100% - 24px); background:var(--panel-bg); -webkit-backdrop-filter:var(--panel-blur); backdrop-filter:var(--panel-blur); border:1px solid var(--line); border-radius:var(--r-card); box-shadow:var(--sh-3); display:flex; flex-direction:column; z-index:35; animation:panelIn .34s var(--ease) forwards; overflow:hidden; } @keyframes panelIn{ from{ transform:translateX(20px) scale(.985); } to{ transform:none; } } #chatHead,#peopleHead{ display:flex; align-items:center; justify-content:space-between; padding:16px 18px; font-size:16px; font-weight:750; border-bottom:1px solid var(--line); } #chatClose,#peopleClose{ border:0; background:transparent; cursor:pointer; width:30px; height:30px; border-radius:50%; color:var(--ink-2); display:flex; align-items:center; justify-content:center; font-size:0; transition:background .15s,color .15s; } #chatClose:hover,#peopleClose:hover{ background:var(--bg-2); color:var(--ink); } #chatClose svg,#peopleClose svg{ width:16px; height:16px; } #chatMsgs{ flex:1; overflow-y:auto; padding:16px; display:flex; flex-direction:column; gap:13px; scrollbar-width:thin; } #chatMsgs:empty::before{ content:"아직 메시지가 없습니다."; color:var(--ink-3); font-size:13px; margin:auto; } .chat-msg{ animation:rise .35s var(--ease) forwards; max-width:92%; } .chat-msg .who{ font-size:11.5px; font-weight:650; color:var(--ink-3); margin:0 0 4px 3px; } .chat-msg .body{ background:var(--bg-2); color:var(--ink); padding:9px 12px; border-radius:4px 14px 14px 14px; font-size:14px; line-height:1.45; word-break:break-word; white-space:pre-wrap; } .chat-msg.me{ align-self:flex-end; } .chat-msg.me .who{ text-align:right; margin:0 3px 4px 0; color:var(--accent); } .chat-msg.me .body{ background:var(--accent); color:#fff; border-radius:14px 4px 14px 14px; } #chatForm{ display:flex; gap:8px; padding:12px 14px; border-top:1px solid var(--line); } #chatText{ flex:1; padding:11px 14px; border-radius:var(--r-chip); border:1.5px solid var(--line-strong); background:#fbfcfe; color:var(--ink); font-size:14px; transition:border-color .15s,box-shadow .15s; } #chatText:focus{ outline:none; border-color:var(--accent); background:#fff; box-shadow:0 0 0 4px var(--accent-soft); } #chatSend{ flex:0 0 auto; width:42px; height:42px; border-radius:50%; border:0; background:var(--accent); color:#fff; cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:0; transition:background .15s,transform .12s; } #chatSend:hover{ background:var(--accent-press); } #chatSend:active{ transform:scale(.9); } #chatSend svg{ width:17px; height:17px; } #peopleSearch{ margin:14px 16px 8px; padding:10px 14px; border-radius:var(--r-chip); border:1.5px solid var(--line-strong); background:#fbfcfe; color:var(--ink); font-size:14px; transition:border-color .15s,box-shadow .15s; } #peopleSearch:focus{ outline:none; border-color:var(--accent); background:#fff; box-shadow:0 0 0 4px var(--accent-soft); } #peopleList{ flex:1; overflow-y:auto; padding:4px 10px 14px; scrollbar-width:thin; } .person{ display:flex; align-items:center; gap:11px; padding:9px 8px; border-radius:12px; transition:background .12s; } .person:hover{ background:var(--bg-2); } .person .p-ava{ width:38px; height:38px; border-radius:50%; flex:0 0 auto; display:flex; align-items:center; justify-content:center; font-size:15px; font-weight:700; color:#fff; transition:box-shadow .2s; } .person.speaking .p-ava{ box-shadow:0 0 0 2.5px var(--speak),0 0 0 5px var(--accent-soft); } .person .p-name{ flex:1; font-size:14px; font-weight:550; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .person.me .p-name::after{ content:" (나)"; color:var(--ink-3); font-weight:500; } .person .p-icons{ display:flex; gap:8px; align-items:center; color:var(--ink-3); font-size:14px; } .person .p-icons .mic-off{ color:var(--danger); } /* shared motion */ @keyframes rise{ from{ transform:translateY(14px); } to{ transform:none; } } @keyframes tileIn{ from{ transform:translateY(18px) scale(.96); } to{ transform:none; } } ::-webkit-scrollbar{ width:9px; height:9px; } ::-webkit-scrollbar-thumb{ background:rgba(120,130,145,.32); border-radius:9px; border:2px solid transparent; background-clip:padding-box; } ::-webkit-scrollbar-thumb:hover{ background:rgba(120,130,145,.5); border:2px solid transparent; background-clip:padding-box; } ::-webkit-scrollbar-track{ background:transparent; } @media (prefers-reduced-motion:reduce){ *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; } } @media (max-width:640px){ #grid{ grid-template-columns:1fr 1fr; } .seg{ display:none; } #chatPanel,#peoplePanel{ width:calc(100% - 24px); } .ctrl{ width:46px; height:46px; } #topbar .clock,#topbar .divider,#camSelect{ display:none; } }