:root{--cm-bg:var(--background);--cm-surface:var(--surface);--cm-surface-soft:var(--surface-2);--cm-line:var(--border-strong);--cm-text:var(--foreground);--cm-muted:var(--muted);--cm-accent:var(--accent);--cm-accent-strong:var(--accent-strong);--cm-accent-soft:color-mix(in srgb, var(--accent) 16%, var(--surface));--cm-warning:#b76e00;--cm-danger:#bd2f2f;--cm-shadow:0 18px 50px #00000047}.cm-scope{background:var(--cm-bg);min-height:calc(100dvh - 4rem);color:var(--cm-text);overflow-x:hidden}.cm-scope button,.cm-scope input,.cm-scope select,.cm-scope textarea{font:inherit}.cm-scope button{cursor:pointer}.app-shell{grid-template-columns:320px minmax(0,1fr) 340px;gap:16px;min-height:calc(100dvh - 4rem);padding:16px;display:grid}.sidebar,.rightbar,.meeting{min-width:0}.brand{align-items:center;gap:12px;padding:6px 4px 16px;display:flex}.brand-mark{background:var(--cm-accent);color:#fff;border-radius:8px;place-items:center;width:44px;height:44px;font-weight:800;display:grid}.brand h1,.brand p,.topbar h2,.topbar p,.panel h2{margin:0}.brand h1{font-size:20px}.brand p,.eyebrow,.field span,.status-line,.metric-grid span,.note-actions span{color:var(--cm-muted);font-size:13px}.panel{border:1px solid var(--cm-line);background:var(--cm-surface);box-shadow:var(--cm-shadow);border-radius:8px;margin-bottom:16px;padding:16px}.panel.compact{box-shadow:none}.panel-heading{justify-content:space-between;align-items:center;gap:12px;margin-bottom:14px;display:flex}.panel h2{font-size:16px}.badge{background:var(--cm-accent-soft);min-width:34px;min-height:24px;color:var(--cm-accent-strong);border-radius:999px;justify-content:center;align-items:center;padding:3px 8px;font-size:12px;font-weight:700;display:inline-flex}.badge.muted{background:var(--cm-surface-soft);color:var(--cm-muted)}.field{gap:6px;margin-bottom:12px;display:grid}.cm-scope input,.cm-scope select,.cm-scope textarea{border:1px solid var(--cm-line);background:var(--cm-surface-soft);width:100%;color:var(--cm-text);border-radius:8px;outline:none}.cm-scope input,.cm-scope select{height:40px;padding:0 11px}.cm-scope textarea{resize:vertical;min-height:140px;padding:11px;line-height:1.45}.cm-scope input:focus,.cm-scope select:focus,.cm-scope textarea:focus{border-color:var(--cm-accent);box-shadow:0 0 0 3px var(--ring)}.inline-field{grid-template-columns:minmax(0,1fr) auto;gap:8px;display:grid}.primary-button,.secondary-button,.icon-button,.danger-button,.control{border:1px solid #0000;border-radius:8px;min-height:40px;padding:0 14px;font-weight:700}.primary-button{background:var(--cm-accent);color:#fff;width:100%}.secondary-button,.icon-button,.control{background:var(--cm-surface);border-color:var(--cm-line);color:var(--cm-text)}.secondary-button:hover,.icon-button:hover,.control:hover{border-color:var(--cm-accent)}.danger-button{background:var(--cm-danger);color:#fff}.status-line,.note-actions{justify-content:space-between;align-items:center;gap:12px;display:flex}.metric-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;display:grid}.metric-grid div{background:var(--cm-surface-soft);border-radius:8px;gap:4px;padding:10px;display:grid}.meeting{grid-template-rows:auto minmax(0,1fr) auto;gap:16px;display:grid}.topbar{border:1px solid var(--cm-line);background:var(--cm-surface);border-radius:8px;justify-content:space-between;align-items:center;gap:16px;padding:14px 16px;display:flex}.topbar h2{margin-top:3px;font-size:22px}.top-actions,.control-bar{flex-wrap:wrap;align-items:center;gap:10px;display:flex}.stage{min-height:0;position:relative}.control-bar{border:1px solid var(--cm-line);background:var(--cm-surface);border-radius:8px;justify-content:center;padding:12px}.control.active{background:var(--cm-accent-soft);border-color:var(--cm-accent);color:var(--cm-accent-strong)}.waiting-list,.chat-log{gap:10px;display:grid}.waiting-list.empty{background:var(--cm-surface-soft);color:var(--cm-muted);border-radius:8px;padding:14px;font-size:14px}.waiting-card{border:1px solid var(--cm-line);border-radius:8px;gap:10px;padding:12px;display:grid}.waiting-card strong{display:block}.waiting-card span{color:var(--cm-muted);font-size:13px}.waiting-actions{grid-template-columns:1fr 1fr;gap:8px;display:grid}.chat-panel{min-height:330px}.chat-log{max-height:225px;padding-right:4px;overflow:auto}.chat-message{background:var(--cm-surface-soft);border-radius:8px;padding:10px}.chat-message strong{margin-bottom:3px;font-size:13px;display:block}.chat-message p{margin:0;font-size:14px;line-height:1.45}.chat-form{grid-template-columns:minmax(0,1fr) 76px;gap:8px;margin-top:12px;display:grid}.notes-panel{margin-bottom:0}.toast{background:var(--cm-text);max-width:min(560px,100vw - 32px);color:var(--cm-bg);opacity:0;pointer-events:none;box-shadow:var(--cm-shadow);border-radius:8px;padding:12px 16px;transition:opacity .16s,transform .16s;position:fixed;bottom:18px;left:50%;transform:translate(-50%)translateY(20px)}.toast.show{opacity:1;transform:translate(-50%)translateY(0)}#connState:not(.muted){background:var(--cm-accent-soft);color:var(--cm-accent-strong)}.role-guest .host-only{display:none!important}.tile-status{font-size:13px}.modal{z-index:40;padding:max(20px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) max(20px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left));-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#0a211a8c;place-items:center;display:grid;position:fixed;inset:0;overflow-y:auto}.modal.hidden,.overlay.hidden{display:none}.modal-card{background:var(--cm-surface);width:min(420px,100%);max-height:calc(100dvh - 40px);box-shadow:var(--cm-shadow);border-radius:12px;gap:14px;padding:24px;display:grid;overflow-y:auto}.modal-card .brand{padding:0 0 4px}.modal-hint{color:var(--cm-muted);margin:0;font-size:14px}.modal-note{color:var(--cm-muted);text-align:center;margin:0;font-size:12px}.modal-card .field{margin-bottom:0}.device-test{aspect-ratio:16/9;background:#102920;border-radius:8px;position:relative;overflow:hidden}.device-test video{object-fit:cover;width:100%;height:100%;transform:scaleX(-1)}.device-test video[hidden]{display:none}.preview-empty{color:#bce1d2;place-items:center;font-size:14px;display:grid;position:absolute;inset:0}.preview-empty[hidden]{display:none}.test-block{gap:8px;display:grid}.test-label{color:var(--cm-muted);font-size:13px;font-weight:700}.mic-meter{background:var(--cm-line);border-radius:5px;height:10px;position:relative;overflow:hidden}.mic-meter span{background:#34d399;width:0%;height:100%;transition:width 80ms linear;display:block}.test-hint{color:var(--cm-muted);margin:0;font-size:12px}.test-row{gap:8px;display:flex}.test-row .secondary-button{flex:1}.secondary-button.active{background:var(--cm-accent-soft);border-color:var(--cm-accent);color:var(--cm-accent-strong)}.overlay{z-index:45;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#0a211ab3;place-items:center;padding:20px;display:grid;position:fixed;inset:0}.overlay-card{background:var(--cm-surface);width:min(420px,100%);box-shadow:var(--cm-shadow);text-align:center;border-radius:12px;justify-items:center;gap:14px;padding:32px 24px;display:grid}.overlay-card h2{margin:0}.overlay-card p{color:var(--cm-muted);margin:0}.overlay-card .primary-button{width:auto;padding:0 22px}.overlay-card .primary-button.hidden{display:none}.overlay-spinner{border:4px solid var(--cm-accent-soft);border-top-color:var(--cm-accent);border-radius:50%;width:38px;height:38px;animation:.9s linear infinite spin}.overlay:not(.waiting) .overlay-spinner{display:none}@keyframes spin{to{transform:rotate(360deg)}}@media (max-width:1180px){.app-shell{grid-template-columns:300px minmax(0,1fr)}.rightbar{grid-column:1/-1;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;display:grid}.rightbar .panel{margin-bottom:0}}@media (max-width:820px){.cm-scope{min-height:auto}.app-shell,.rightbar{grid-template-columns:1fr}.app-shell{min-height:auto;padding:10px;padding-bottom:max(16px, env(safe-area-inset-bottom))}.meeting{grid-template-rows:auto auto auto}.stage{min-height:clamp(280px,72vw,430px)}.tile-layer,.stage-empty{min-height:inherit}.topbar{flex-direction:column;align-items:stretch}.control-bar{padding-bottom:max(12px, env(safe-area-inset-bottom));justify-content:stretch}.control-bar button{flex:130px}.rightbar{gap:10px}.chat-panel{min-height:auto}.chat-log{max-height:38dvh}}@media (max-width:520px){.modal{padding:max(10px, env(safe-area-inset-top)) 10px max(10px, env(safe-area-inset-bottom));align-items:start}.modal-card{max-height:calc(100dvh - 20px);padding:16px}.app-shell{gap:10px}.panel,.topbar,.control-bar{padding:12px}.top-actions{gap:8px}.layout-switch{grid-template-columns:repeat(2,minmax(0,1fr));width:100%;display:grid}.layout-btn,.secondary-button,.control,.danger-button{min-width:0}.control-bar button,.reaction-wrap{flex:calc(50% - 6px)}.reaction-wrap>.control{width:100%}.stage{min-height:clamp(260px,78vw,360px)}}.tile-layer{position:absolute;inset:0}.stage-empty{text-align:center;color:var(--cm-muted);place-content:center;gap:6px;display:grid;position:absolute;inset:0}.stage-empty.hidden{display:none}.tile{border:1px solid var(--cm-line);will-change:transform, width, height;background:linear-gradient(135deg,#0c7359,#24b68f);border-radius:10px;transition:transform .28s cubic-bezier(.2,.8,.2,1),width .28s cubic-bezier(.2,.8,.2,1),height .28s cubic-bezier(.2,.8,.2,1);position:absolute;top:0;left:0;overflow:hidden}.tile.screen{background:#102920}.tile video{object-fit:cover;background:#16372e;width:100%;height:100%;display:block}.tile.screen video{object-fit:contain}.tile:not(.has-video) video,.tile.cam-off video{display:none}.tile .avatar-fallback{color:#e9fbf4;place-items:center;font-size:32px;font-weight:800;display:grid;position:absolute;inset:0}.tile.has-video:not(.cam-off) .avatar-fallback{display:none}.tile-bar{color:#fff;pointer-events:none;background:#0009;border-radius:8px;justify-content:space-between;align-items:center;gap:8px;padding:6px 10px;font-size:13px;font-weight:700;display:flex;position:absolute;bottom:8px;left:8px;right:8px}.tile.is-main{outline:2px solid var(--cm-accent);outline-offset:-2px}.tile.is-pinned{outline:2px solid var(--cm-warning);outline-offset:-2px}.tile.speaking{box-shadow:inset 0 0 0 3px #34d399,0 0 14px #34d39980}.tile-layer.freeform .tile{cursor:move;touch-action:none}.tile.dragging{-webkit-user-select:none;user-select:none;transition:none}.resize-handle{cursor:nwse-resize;z-index:4;background:linear-gradient(135deg,#0000 50%,#ffffffd9 50%);width:18px;height:18px;display:none;position:absolute;bottom:0;right:0}.tile-layer.freeform .resize-handle{display:block}.view-banner{z-index:6;color:#e9fbf4;background:#12362be6;border-radius:999px;padding:6px 14px;font-size:13px;font-weight:700;position:absolute;top:8px;left:50%;transform:translate(-50%)}.view-banner[hidden]{display:none}.reaction-float{pointer-events:none;z-index:5;font-size:34px;animation:2.4s ease-out forwards react-rise;position:absolute;bottom:40px}@keyframes react-rise{0%{opacity:0;transform:translateY(10px)scale(.6)}15%{opacity:1;transform:translateY(0)scale(1.1)}to{opacity:0;transform:translateY(-90px)scale(1)}}.caption-bar{z-index:4;color:#fff;text-align:center;pointer-events:none;background:#000000a8;border-radius:8px;padding:4px 10px;font-size:13px;line-height:1.35;position:absolute;bottom:42px;left:8px;right:8px}.caption-bar[hidden]{display:none}.reaction-wrap{position:relative}.react-bar{background:var(--cm-surface);border:1px solid var(--cm-line);box-shadow:var(--cm-shadow);border-radius:10px;gap:4px;padding:6px;display:flex;position:absolute;bottom:calc(100% + 8px);left:50%;transform:translate(-50%)}.react-bar[hidden]{display:none}.react-bar button{cursor:pointer;background:0 0;border:none;border-radius:8px;padding:4px;font-size:22px;line-height:1}.react-bar button:hover{background:var(--cm-accent-soft)}.tile.popped .avatar-fallback{display:grid}.tile.popped:after{content:"↗ 새 창에서 재생 중";text-align:center;color:#bce1d2;font-size:12px;position:absolute;inset:auto 8px 42px}.tile .hand-flag{background:var(--cm-warning);color:#fff;z-index:2;border-radius:999px;padding:3px 7px;font-size:13px;display:none;position:absolute;top:8px;left:8px}.tile.hand-raised .hand-flag{display:block}.tile-actions{z-index:3;gap:6px;display:none;position:absolute;top:8px;right:8px}.tile:hover .tile-actions{display:flex}.tile-act{color:#fff;cursor:pointer;background:#12362bd1;border:none;border-radius:6px;width:30px;height:28px;font-size:13px}.tile-act:hover{background:var(--cm-accent)}.tile-act[data-kick]:hover,.tile-act[data-mute]:hover{background:var(--cm-danger)}.layout-switch{gap:4px;display:inline-flex}.layout-btn{border:1px solid var(--cm-line);background:var(--cm-surface);min-height:34px;color:var(--cm-text);cursor:pointer;border-radius:8px;padding:0 10px;font-size:13px;font-weight:700}.layout-btn.active{background:var(--cm-accent-soft);border-color:var(--cm-accent);color:var(--cm-accent-strong)}
