:root{--bg:#0f172a;--panel:#1e293b;--panel2:#273449;--line:#334155;--text:#e2e8f0;--muted:#94a3b8;--accent:#3b82f6;--danger:#ef4444;--warn:#f59e0b;--ok:#22c55e;color:var(--text);background:var(--bg);font-family:Pretendard,Malgun Gothic,system-ui,sans-serif}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}button{font:inherit;color:var(--text);background:var(--panel2);border:1px solid var(--line);cursor:pointer;white-space:nowrap;border-radius:8px;padding:7px 12px;font-size:14px}button:hover{border-color:var(--muted)}button.on{background:var(--accent);border-color:var(--accent);color:#fff}button.off{color:var(--muted)}button.danger{background:var(--danger);border-color:var(--danger);color:#fff}button.ghost{background:0 0}button.primary{background:var(--accent);border-color:var(--accent);color:#fff;padding:10px;font-size:16px}button:disabled{opacity:.6;cursor:default}input{font:inherit;color:var(--text);background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:9px 11px}.muted{color:var(--muted);font-size:13px}.err{color:#fca5a5;margin:0}.center{place-items:center;height:100%;padding:16px;display:grid}.card{background:var(--panel);border:1px solid var(--line);border-radius:14px;min-width:min(360px,100%);padding:24px}.join{flex-direction:column;gap:14px;display:flex}.join h1{margin:0 0 4px;font-size:22px}.join label{color:var(--muted);flex-direction:column;gap:6px;font-size:13px;display:flex}button.small{padding:6px 10px;font-size:13px}.classes{flex-direction:column;gap:10px;width:min(560px,100%);display:flex}.classes-head{justify-content:space-between;align-items:center;gap:8px;display:flex}.classes-head h1{margin:0;font-size:20px}.class-card{background:var(--panel2);border:1px solid var(--line);border-radius:12px;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px;padding:12px;display:flex}.class-info{flex-direction:column;align-items:flex-start;gap:3px;display:flex}.class-info b{font-size:16px}.class-actions{flex-wrap:wrap;gap:6px;display:flex}.seg3{grid-template-columns:1fr 1fr 1fr;gap:6px;display:grid}.seg2{grid-template-columns:1fr 1fr;gap:6px;display:grid}.seg2 button{white-space:normal;flex-direction:column;gap:3px;padding:9px;display:flex}.seg2 small{opacity:.8;font-size:11px}.app{flex-direction:column;height:100%;display:flex}.app>main{flex:1}.app.teacher{grid-template-rows:auto 1fr auto;grid-template-columns:1fr 300px;display:grid}.app.teacher header,.app.teacher footer{grid-column:1/-1}header{background:var(--panel);border-bottom:1px solid var(--line);flex-wrap:wrap;align-items:center;gap:12px;padding:8px 14px;display:flex}header .room{color:var(--muted);font-size:13px}header nav{gap:6px;margin-left:12px;display:flex}.clinic-tab{border-color:var(--ok)}footer{background:var(--panel);border-top:1px solid var(--line);flex-wrap:wrap;justify-content:center;gap:8px;padding:10px 14px;display:flex}main{flex-direction:column;gap:8px;min-width:0;min-height:0;padding:10px;display:flex;position:relative}.push-right{margin-left:auto}.preview-note{background:#14532d;border-radius:8px;padding:6px 10px;font-size:13px}button.warn{border-color:var(--warn);background:#713f12}aside{background:var(--panel);border-left:1px solid var(--line);flex-direction:column;gap:8px;padding:10px;display:flex;overflow-y:auto}aside h4{margin:6px 0 0}.audio-unlock{background:var(--warn);color:#111;border-color:var(--warn);margin-left:auto}.banner{background:#1e3a5f;align-items:center;gap:10px;padding:8px 14px;display:flex}.banner.ask{background:#713f12}.stage{flex-direction:column;flex:1;gap:8px;min-width:0;min-height:0;display:flex}.modebar{flex-wrap:wrap;align-items:center;gap:6px;display:flex}.modebar .hint{color:var(--muted);margin-right:auto;font-size:12px}.layers{flex:1;min-height:0;position:relative}.layer{display:flex;position:absolute;inset:0}.board-layer{visibility:hidden;z-index:2;background:var(--bg)}.board-layer.show{visibility:visible}.empty{color:var(--muted);border:1px dashed var(--line);border-radius:12px;flex:1;place-items:center;min-height:80px;display:grid}.stage-grid{flex:1;grid-auto-rows:1fr;gap:8px;display:grid}.stage-focus{flex-direction:column;flex:1;gap:8px;min-height:0;display:flex}.share{background:#000;border-radius:10px;min-height:0;display:flex;position:relative;overflow:hidden}.share.big{flex:1}.share.clickable,.share.thumb{cursor:pointer}.share video{width:100%;height:100%}.strip{gap:8px;height:110px;display:flex;overflow-x:auto}.share.thumb{flex:none;width:190px}.tag{background:#0009;border-radius:6px;padding:2px 8px;font-size:12px;position:absolute;bottom:6px;left:6px}.board{flex-direction:column;flex:1;gap:6px;min-height:0;display:flex}.board-tools{flex-wrap:wrap;align-items:center;gap:6px;min-height:34px;display:flex}.board-tools .sep{background:var(--line);width:1px;height:22px}.swatch{border:2px solid #fff5;border-radius:50%;width:26px;height:26px;padding:0}.swatch.hl{opacity:.85;border-radius:6px;width:22px}.tool-label{color:var(--muted);font-size:12px}.swatch.on{outline:2px solid var(--accent);border-color:#fff}.size{place-items:center;width:34px;height:30px;padding:0;display:grid}.size i{background:currentColor;border-radius:50%;display:block}.board-wrap{flex:1;place-items:center;min-height:0;display:grid;position:relative}.board-text-input{z-index:2;background:#fffe;border:1px dashed #64748b;border-radius:4px;outline:none;min-width:160px;margin:0;padding:0 2px;line-height:1.25;position:absolute}.board-tools button.icon{min-width:34px;padding:4px 6px;font-size:16px;line-height:1}.sticker-star{color:#facc15}.sticker-check{color:#4ade80}.sticker-x{color:#f87171}.sticker-bang{color:#fb923c;font-weight:700}.sticker-q{color:#60a5fa;font-weight:700}canvas.text{cursor:text}.board-wrap canvas{touch-action:none;background:#fff;border-radius:8px;display:block}canvas.pen{cursor:crosshair}canvas.eraser{cursor:cell}.spot-layer{z-index:3;background:var(--bg)}.spot-close{position:absolute;top:10px;right:10px}.camstrip{flex:none;gap:8px;padding-bottom:2px;display:flex;overflow-x:auto}.cam{aspect-ratio:4/3;border:2px solid var(--line);background:#000;border-radius:10px;flex:none;width:150px;position:relative;overflow:hidden}.cam.clickable{cursor:pointer}.cam.clickable:hover{border-color:var(--muted)}.cam.spot{border-color:var(--warn)}.cam.self{border-style:dashed}.cam video{width:100%;height:100%}.row{background:var(--panel2);border:1px solid var(--line);border-radius:10px;flex-direction:column;gap:6px;padding:8px;display:flex}.row.hand,.mcard.hand{border-color:var(--warn)}.row-head{flex-wrap:wrap;align-items:center;gap:5px;display:flex}.actions{flex-wrap:wrap;gap:4px;display:flex}.actions button{padding:4px 8px;font-size:12px}.badge{background:var(--line);border-radius:99px;padding:1px 7px;font-size:11px}.badge.hand{background:var(--warn);color:#111}.badge.away{background:var(--danger);color:#fff}.badge.share{background:#1d4ed8}.badge.pen{background:#7c3aed}.badge.clinic{background:#15803d}.badge.spot{background:#b45309}.monitor{flex:1;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));align-content:start;gap:10px;display:grid;overflow-y:auto}.mcard{background:var(--panel);border:2px solid var(--line);border-radius:12px;flex-direction:column;gap:6px;padding:8px;display:flex}.mcard.away{border-color:var(--danger)}.mview{aspect-ratio:16/10;background:#000;border-radius:8px;display:flex;position:relative;overflow:hidden}.mview video{width:100%;height:100%}.mcam{aspect-ratio:4/3;border:1px solid #fff4;border-radius:6px;width:30%;position:absolute;bottom:6px;right:6px;overflow:hidden}@media (width<=900px){.app.teacher{grid-template-rows:auto 1fr auto auto;grid-template-columns:1fr}aside{border-left:0;border-top:1px solid var(--line);max-height:24vh}main{min-height:50vh}.app.teacher footer{grid-row:4}.cam{width:104px}}