/* 위젯: 템플릿 토큰만 사용 */
.vk{display:inline-flex;align-items:center;justify-content:center;min-width:1.6em;border:3px solid color-mix(in srgb,var(--sink) 45%,var(--sbg));border-bottom-width:.14em;padding:.08em .35em;border-radius:.18em;font:700 1em 'D2Coding',ui-monospace,Consolas,monospace;background:color-mix(in srgb,var(--sink) 6%,var(--sbg));color:var(--sink)}
.kwrap{display:flex;align-items:center;gap:.25em;height:100%;color:var(--sink)}
.kwrap.link{cursor:pointer}.kwrap.link:hover .vk{border-color:var(--sacc)}
.callout{border-radius:50%;background:var(--sacc-text);color:var(--callout-ink);font-weight:800;display:grid;place-items:center;box-shadow:0 0 0 6px color-mix(in srgb,var(--sacc) 35%,transparent)}
.hlbox{border:6px solid var(--sacc);background:color-mix(in srgb,var(--sacc) 10%,transparent)}
.reveal{border:3px solid var(--sacc);background:color-mix(in srgb,var(--sacc) 8%,var(--sbg));padding:24px 32px;font-size:36px;cursor:pointer}
.reveal b{color:var(--sacc-text)}
.reveal .rv{display:none;margin-top:14px}.reveal.open .rv{display:block}
.cmp{overflow:hidden;border:3px solid color-mix(in srgb,var(--sink) 30%,var(--sbg))}
.cmp .a,.cmp .b{position:absolute;inset:0;display:grid;place-items:center;font:700 54px var(--fh)}
.cmp .a{background:repeating-linear-gradient(45deg,#c9c9c9 0 30px,#d8d8d8 30px 60px);color:#333}
.cmp .b{background:linear-gradient(135deg,var(--sacc),color-mix(in srgb,var(--sacc) 40%,#000));color:#fff;clip-path:inset(0 0 0 var(--cx,50%))}
.cmp .h2{position:absolute;top:0;bottom:0;left:var(--cx,50%);width:6px;margin-left:-3px;background:#fff;box-shadow:0 0 0 2px #0005;cursor:ew-resize}
.fakeui{background:#2b2b2e;border:2px solid #111;display:grid;grid-template-rows:56px 1fr;grid-template-columns:1fr 320px;color:#bbb;font:24px sans-serif}
.fakeui>i{grid-column:1/3;background:#3a3a3e;border-bottom:2px solid #111}
.fakeui>b{background:radial-gradient(circle at 45% 55%,#8a8a90 0 90px,transparent 92px),linear-gradient(#3d3d42,#2a2a2e);position:relative}
.fakeui>u{background:#323236;border-left:2px solid #111;text-decoration:none}
.imgph{background:linear-gradient(135deg,color-mix(in srgb,var(--sacc) 55%,#fff),var(--sacc));display:grid;place-items:center;color:#fff;font-size:44px}
.ink{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:6}
.lz{position:absolute;width:2.2%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,#fff 0 12%,#ff3030 22%,rgba(255,30,30,.6) 48%,transparent 70%);transform:translate(-50%,-50%);pointer-events:none;z-index:8;transition:opacity .5s}
.lz.fade{opacity:0}
.bo{position:absolute;inset:0;z-index:7;display:grid;place-items:center;color:#666;font-size:14px}
.bo.b{background:#000}.bo.w{background:#fff;color:#aaa}
.sdark{--sbg:#16171b!important;--sink:#f2f2f0!important}
/* viewer + lecture sidebar */
.vwrap{display:grid;grid-template-columns:var(--lsw,272px) minmax(0,1fr);gap:0;min-height:calc(100vh - 62px)}
.vwrap.collapsed{--lsw:48px}
.lside{border-right:1px solid var(--line);background:var(--panel);position:sticky;top:112px;height:calc(100vh - 112px);overflow:auto;transition:width .2s}
.lside.enter{animation:shrink .38s ease-out}
@keyframes shrink{from{width:100vw;max-width:1100px}to{width:var(--lsw,272px)}}
.lside header{display:flex;align-items:center;gap:6px;padding:8px;border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--panel);z-index:2}
.lside .li{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border-bottom:1px solid var(--line);text-decoration:none;min-height:56px;border-left:3px solid transparent;width:100%;background:none;border-top:0;border-right:0;text-align:left}
.lside .li:hover{background:var(--soft)}
.lside .li.on{border-left-color:var(--c);background:color-mix(in srgb,var(--c) 9%,var(--panel))}
.lside .li .num{width:28px;height:28px;font-size:13px}
.vwrap.collapsed .lside .lbody,.vwrap.collapsed .lside .ltitle{display:none}
.vmain{padding:12px 20px 40px;min-width:0}
.viewer{max-width:1200px;margin:0 auto}
.vbar{display:flex;gap:8px;align-items:center;padding:6px 0;flex-wrap:wrap;min-width:0}
.vbar .ttl{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:40ch}
.progress{height:4px;background:var(--line)}.progress i{display:block;height:100%;background:var(--c,var(--accent))}
.follow{border:1px solid var(--line);border-radius:99px;padding:3px 4px 3px 12px;display:inline-flex;gap:8px;align-items:center;font-size:13px;background:var(--panel);min-height:44px}
.follow.off{border-style:dashed}
.follow.away{border-color:var(--warn);background:color-mix(in srgb,var(--warn) 10%,var(--panel))}
.stack .scard{margin-bottom:18px}
.stack .alt{padding:10px 14px;font-size:1em;white-space:pre-wrap}
.lbl{display:none}
@media(min-width:961px){.lbl{display:inline}}
/* helper panel */
.hp{position:fixed;top:0;right:0;bottom:0;width:var(--hpw);max-width:100vw;background:var(--panel);border-left:1px solid var(--line);box-shadow:-8px 0 24px rgba(0,0,0,.14);z-index:200;display:flex;flex-direction:column}
.hp-grip{position:absolute;left:-5px;top:0;bottom:0;width:10px;cursor:ew-resize;z-index:2;touch-action:none}
.hp-grip::after{content:"";position:absolute;left:4px;top:50%;height:44px;width:2px;margin-top:-22px;background:var(--mute);opacity:.5}
.hp header{display:flex;gap:6px;align-items:center;padding:8px 10px 8px 14px;border-bottom:1px solid var(--line)}
.hp .hb{overflow:auto;padding:12px 14px;flex:1}
.hp .res{display:grid;gap:8px}
.hp .res button{text-align:left;padding:10px 12px;background:var(--panel);border:1px solid var(--line)}
.hp .res button:hover,.hp .res button.on{border-color:var(--c,var(--accent))}
body.hp-pinned.hp-open #shell{margin-right:var(--hpw)}
/* editor */
.edhead{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:8px}
.rtabs{display:flex;gap:0;border:1px solid var(--line);border-bottom:0;background:var(--soft);overflow-x:auto}
.rtabs button{border:0;border-right:1px solid var(--line);background:none;padding:6px 14px;font-size:13px;color:var(--mute)}
.rtabs button.on{background:var(--panel);color:var(--ink);font-weight:600;box-shadow:inset 0 2px 0 var(--accent)}
.ribbon{display:flex;gap:0;flex-wrap:wrap;border:1px solid var(--line);border-bottom:0;background:var(--panel);align-items:stretch;min-height:74px}
.rg{display:flex;flex-direction:column;padding:6px 8px 2px;border-right:1px solid var(--line)}
.rg .rgb{display:flex;gap:4px;flex-wrap:wrap;align-items:center;flex:1}
.rg .rgl{font-size:10px;color:var(--mute);text-align:center;margin-top:2px}
.rg select{width:auto;padding:3px 6px;font-size:12px}
.rg input[type=number]{width:64px;padding:3px 6px;font-size:12px}
.ed{display:grid;grid-template-columns:192px minmax(0,1fr) 280px;border:1px solid var(--line);background:var(--panel);height:calc(100vh - 250px);min-height:520px}
.ed .l{border-right:1px solid var(--line);overflow:auto;padding:10px;background:var(--soft)}
.ed .r{border-left:1px solid var(--line);overflow:auto;display:flex;flex-direction:column}
.ed .c{background:#cfcfca;overflow:auto;padding:24px;display:block;position:relative}
.ed .c.dk{background:#0c0c0c}
[data-theme=dark] .ed .c{background:#0c0c0c}
.thumb{margin-bottom:10px;border:2px solid transparent;cursor:pointer;position:relative;background:var(--panel)}
.thumb.on{border-color:var(--accent)}
.thumb.drop{box-shadow:0 -4px 0 var(--accent)}
.thumb .stagebox{pointer-events:none}
.thumb .tn{display:flex;align-items:center;gap:4px;font-size:11px;color:var(--mute);padding:2px 4px}
.thumb .tact{position:absolute;right:2px;top:2px;display:none;gap:2px}
.thumb:hover .tact,.thumb:focus-within .tact{display:flex}
.thumb .tact button{padding:0 5px;font-size:11px;background:var(--panel);border:1px solid var(--line);min-height:20px}
.canvas{margin:0 auto;width:min(100%,960px);box-shadow:0 4px 18px rgba(0,0,0,.25);position:relative;flex:none}
.canvas.tool{cursor:crosshair}
.canvas.tool .o{pointer-events:none}
.canvas.paint .o{cursor:copy}
.sel{outline:3px solid var(--accent);outline-offset:0;cursor:move}
.msel{outline:3px dashed var(--accent)}
.aihl{outline:5px dashed var(--ai)!important;outline-offset:6px}
.h{position:absolute;width:22px;height:22px;background:#fff;border:3px solid var(--accent);z-index:5}
.guide{position:absolute;background:var(--snap);z-index:9;pointer-events:none;box-shadow:0 0 0 2px #fff}
.marq{position:absolute;border:3px dashed var(--accent);background:color-mix(in srgb,var(--accent) 10%,transparent);z-index:9;pointer-events:none}
.gridov{position:absolute;inset:0;pointer-events:none;z-index:4;background-image:linear-gradient(rgba(0,0,0,.12) 2px,transparent 2px),linear-gradient(90deg,rgba(0,0,0,.12) 2px,transparent 2px);background-size:120px 120px}
.rtab2{display:flex;border-bottom:1px solid var(--line)}
.rtab2 button{flex:1;border:0;background:none;padding:8px 4px;font-size:12px;color:var(--mute);border-bottom:2px solid transparent}
.rtab2 button.on{color:var(--ink);border-bottom-color:var(--accent);font-weight:600}
.rp{padding:12px;overflow:auto;flex:1}
.ptable td{padding:4px 6px;border:0;font-size:12px}.ptable input,.ptable select{padding:4px 6px;font-size:12px}
.layer{display:flex;gap:6px;align-items:center;padding:5px 6px;border:1px solid transparent;font-size:12px;cursor:pointer}
.layer:hover{background:var(--soft)}.layer.on{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 8%,var(--panel))}
.lint{font-size:12px;color:var(--warn);margin:4px 0}
.aicard{border:1px solid var(--ai);background:color-mix(in srgb,var(--ai) 7%,var(--panel));padding:10px;margin:8px 0}
.aicard .df{font-size:12px;margin:4px 0;font-family:'D2Coding',ui-monospace,monospace}
.aicard .df del{color:var(--bad)}.aicard .df ins{color:var(--ok);text-decoration:none}
.lock{position:absolute;inset:0;background:color-mix(in srgb,var(--ai) 12%,transparent);z-index:10;display:grid;place-items:center;font-weight:700;color:var(--ai);pointer-events:none}
.savest{font-size:12px}
/* present */
.preshead{display:flex;gap:8px;align-items:center;padding:8px 14px;background:var(--side);color:#eee;flex-wrap:wrap;position:sticky;top:0;z-index:100}
.preshead .btn.ghost{background:#2a2a2a;color:#eee;border-color:#444}
.preshead .badge{background:#2a2a2a;color:#eee;border-color:#444}
.pres{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,380px);gap:12px;padding:12px}
.pv{position:relative}
.pv .stagebox{cursor:default}
.pv.t-laser .stagebox{cursor:none}.pv.t-pen .stagebox,.pv.t-hl .stagebox{cursor:crosshair}
.clock{font:700 28px 'D2Coding',ui-monospace,monospace}
.clock.warn{color:var(--warn)}.clock.bad{color:var(--bad)}
.tool.on{background:var(--accent);color:#fff;border-color:var(--accent)}
.thstrip{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:8px;margin-top:12px}
.thstrip button{padding:0;border:2px solid transparent;background:none;text-align:left}
.thstrip button.on{border-color:var(--accent)}
.thstrip small{display:block;font-size:11px;color:var(--mute);padding:2px}
.qitem{border-bottom:1px solid var(--line);padding:8px 0;font-size:13px}
.qitem.done{opacity:.55}
/* output */
body.out #shell,body.out #toast,body.out #tabbar,body.out #hp{display:none!important}
#out{position:fixed;inset:0;background:#000;display:grid;place-items:center;overflow:hidden}
#out .stagebox{width:min(100vw,calc(100vh*16/9));background:#000}
#outst{position:fixed;left:12px;bottom:12px;z-index:20;font:12px sans-serif;color:#ddd;background:#000a;padding:4px 10px;border-radius:99px;transition:opacity .6s}
#outst.hide{opacity:0}#outst.bad{background:#b3402f;color:#fff;opacity:1}
/* overlays */
.ov{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:500;display:grid;place-items:center;padding:20px}
.ov .box{background:var(--panel);width:min(760px,100%);max-height:88vh;overflow:auto;border:1px solid var(--line);padding:22px;box-shadow:0 8px 24px rgba(0,0,0,.18)}
.ov .box.wide{width:min(1040px,100%)}
#toast{position:fixed;right:18px;bottom:18px;z-index:600;display:grid;gap:8px}
#toast div{background:var(--ink);color:var(--bg);padding:10px 16px;font-size:13px;max-width:360px}
#toast div.err{background:var(--bad);color:#fff}
.feedcard{max-width:560px;margin:0 auto 24px}
.feedimg{aspect-ratio:1;display:grid;place-items:center;color:#fff;font-weight:700;font-size:20px}
.dayg{display:flex;gap:4px;flex-wrap:wrap}.dayg label{border:1px solid var(--line);padding:6px 10px;cursor:pointer;user-select:none}.dayg input{display:none}
.dayg label:has(input:checked){background:var(--soft);border-color:var(--accent);color:var(--accent);font-weight:700}
.stat{padding:16px}.stat b{display:block;font-size:26px}
.bigcode{font:700 44px 'D2Coding',ui-monospace,monospace;letter-spacing:.06em;text-align:center;padding:18px;border:2px dashed var(--line);word-break:break-all}
.prog{height:8px;background:var(--line)}.prog i{display:block;height:100%;width:0;background:var(--accent);transition:width .2s}
.chk li{list-style:none;padding:5px 0;display:flex;gap:8px;align-items:center}
.cr{font:700 12px 'D2Coding',monospace;padding:1px 6px;border-radius:99px}
.cr.pass{background:color-mix(in srgb,var(--ok) 18%,var(--panel));color:var(--ok)}.cr.fail{background:color-mix(in srgb,var(--bad) 18%,var(--panel));color:var(--bad)}
.lay{border:1px solid var(--line);padding:4px;background:var(--panel);text-align:left}
.lay.on{outline:2px solid var(--accent)}
.lay small{display:block;font-size:11px}
.bars div{display:flex;align-items:center;gap:8px;font-size:12px;margin:3px 0}.bars i{display:block;height:12px;background:var(--accent)}
.checker{background-image:linear-gradient(45deg,#ccc 25%,transparent 25%),linear-gradient(-45deg,#ccc 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#ccc 75%),linear-gradient(-45deg,transparent 75%,#ccc 75%);background-size:16px 16px;background-position:0 0,0 8px,8px -8px,-8px 0}
#tabbar{display:none}
.printcard{display:none}
@media print{body>*:not(.printcard){display:none!important}.printcard{display:block!important;padding:30px;font-family:sans-serif}}
.cm{position:fixed;z-index:700;min-width:230px;max-width:320px;background:var(--panel);border:1px solid var(--line);box-shadow:0 8px 24px rgba(0,0,0,.18);padding:4px 0}
.cm button{display:flex;align-items:center;gap:8px;width:100%;border:0;background:none;padding:6px 12px;font-size:13px;text-align:left;min-height:30px}
.cm button:hover,.cm button:focus{background:var(--soft);outline:none;box-shadow:inset 3px 0 var(--accent)}
.cm button.dis{color:var(--mute);cursor:default}
.cm kbd{font-size:11px}.cmsep{border-top:1px solid var(--line);margin:4px 0}
.fp{position:fixed;z-index:450;width:320px;background:var(--panel);border:1px solid var(--line);box-shadow:0 8px 24px rgba(0,0,0,.22)}
.fph{display:flex;gap:6px;align-items:center;padding:6px 8px 6px 12px;border-bottom:1px solid var(--line);cursor:move;background:var(--soft);user-select:none}
.edpv{position:fixed;inset:0;z-index:420;background:#111;color:#eee;display:flex;flex-direction:column}
.pvbar{display:flex;gap:8px;align-items:center;padding:8px 12px;background:#000;flex-wrap:wrap}
.pvbar .btn.ghost{background:#222;color:#eee;border-color:#444}
.pvst{flex:1;display:grid;place-items:center;overflow:auto;padding:10px}.pvst>div{max-width:100%}
.cwrap{display:flex;flex-direction:column;min-width:0;min-height:0}
.cwrap .c{flex:1;min-height:0}
.notes{border-top:1px solid var(--line);background:var(--panel)}
.ntb{display:flex;gap:4px;align-items:center;padding:4px 8px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.nb{min-height:80px;max-height:180px;overflow:auto;padding:8px 12px;outline:none;font-size:14px}
.nb:focus{box-shadow:inset 0 0 0 2px var(--accent)}
.nb mark{background:#ffe27a;color:#111}
.selbox{position:absolute;outline:3px solid var(--accent);pointer-events:none;z-index:8}
.selbox.m{outline-style:dashed}.selbox .h{pointer-events:auto}
.imgnote{position:absolute;left:24px;bottom:24px;background:#000c;color:#fff;font-size:32px;padding:6px 14px;z-index:2}
.spot{position:absolute;inset:0;z-index:7;pointer-events:none;background:radial-gradient(circle at var(--sx,50%) var(--sy,50%),transparent 0 9%,rgba(0,0,0,.74) 10%)}
.transp .slide{background:transparent!important}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.toprow{display:flex;gap:10px;align-items:center;min-width:0;width:100%}
#top{flex-direction:column;align-items:stretch;gap:6px}
.linkbar{display:flex;gap:2px;align-items:center;overflow-x:auto;margin:0 -4px -8px;scrollbar-width:thin}
.linkbar a,.linkbar button{display:inline-flex;align-items:center;gap:6px;padding:8px 12px;min-height:44px;text-decoration:none;color:var(--mute);border:0;border-bottom:3px solid transparent;background:none;white-space:nowrap;font-size:14px}
.linkbar a.on,.linkbar button.on{color:var(--ink);border-bottom-color:var(--c,var(--accent))}
.linkbar a:hover,.linkbar button:hover{color:var(--ink)}
.vwrap.collapsed{--lsw:0px}.vwrap.collapsed .lside{display:none}
.thg{display:grid;grid-template-columns:220px minmax(0,1fr) minmax(0,1.2fr);gap:16px}
.lgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
@media(max-width:1280px){.thg{grid-template-columns:200px minmax(0,1fr)}.thg .pvcol{grid-column:1/-1}}
@media(max-width:960px){.thg{grid-template-columns:1fr}.thg .pvcol{order:-1}}
#shell.present main{padding:0}
.presroot{height:100dvh;display:grid;grid-template-rows:auto minmax(0,1fr);overflow:hidden}
.presroot .preshead{position:static}
.pres{display:grid;grid-template-columns:minmax(0,1fr) clamp(280px,28vw,420px);gap:10px;padding:10px;min-height:0}
.pleft{display:grid;grid-template-rows:minmax(0,1fr) auto auto auto;gap:6px;min-height:0;min-width:0}
.pvbox{min-height:0;display:grid;place-items:center;overflow:hidden}
.pright{display:grid;grid-template-rows:auto minmax(0,1fr) minmax(110px,30%);gap:10px;min-height:0}
.pright>.card{min-height:0;overflow:hidden;display:flex;flex-direction:column}
#pnotes{flex:1;min-height:0;display:flex;flex-direction:column}
#pnotes .nb{flex:1;max-height:none;min-height:0;overflow:auto;line-height:1.45}
#pnotes .nb.ro{overflow:hidden}
.nb.ro{cursor:default;background:var(--soft)}
.throw{display:flex;gap:6px;overflow-x:auto;padding-bottom:2px}
.throw button{flex:none;width:104px;padding:0;border:2px solid transparent;background:none;text-align:left}
.throw button.on{border-color:var(--accent)}.throw small{display:block;font-size:11px;color:var(--mute)}
.zw{position:absolute;inset:0;transition:transform .25s}
.zbadge{position:absolute;right:8px;top:8px;z-index:9;background:#000b;color:#fff;font-size:12px;padding:2px 8px}
.stagebox[data-edge=l],.stagebox[data-edge=r]{cursor:pointer}
.stagebox[data-edge=l]::before,.stagebox[data-edge=r]::after{content:'‹';position:absolute;top:0;bottom:0;width:12%;z-index:9;display:grid;place-items:center;font:700 clamp(22px,4vw,56px) sans-serif;color:#fff;text-shadow:0 0 8px #000;background:linear-gradient(90deg,rgba(0,0,0,.28),transparent);pointer-events:none}
.stagebox[data-edge=l]::before{left:0}
.stagebox[data-edge=r]::after{content:'›';right:0;background:linear-gradient(270deg,rgba(0,0,0,.28),transparent)}
#ost[data-tool=laser],#ost[data-tool=spot]{cursor:none}#ost[data-tool=pen],#ost[data-tool=hl]{cursor:crosshair}
.pie{position:fixed;z-index:720;background:none;border:0;pointer-events:none}
.pie button{pointer-events:auto;position:absolute;transform:translate(-50%,-50%);width:46px;height:46px;border:1px solid var(--line);border-radius:12px;background:var(--panel);color:var(--ink);font-size:10px;line-height:1.05;padding:2px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;white-space:nowrap;box-shadow:0 2px 6px rgba(0,0,0,.22);transition:transform .12s}
.pie button:hover,.pie button:focus{border-color:var(--accent);outline:2px solid var(--accent);outline-offset:1px;transform:translate(-50%,-50%) scale(1.08)}
.pie button.hot{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 22%,var(--panel));transform:translate(-50%,-50%) scale(1.12)}
.pie button.on{background:var(--accent);color:#fff;border-color:var(--accent);transform:translate(-50%,-50%) scale(1.08)}
.pie .pg{font-size:16px;line-height:1}
.pie .pc{width:34px;height:34px;border-radius:12px;font-size:16px}
.presroot,.presroot *,#out,#out *{-webkit-user-select:none;user-select:none;-webkit-user-drag:none}
.presroot #pnotes .nb,.presroot #pnotes .nb *,.presroot #rt2,.presroot #rt2 *{-webkit-user-select:text;user-select:text}
.presroot #rt2 button{user-select:none}
#qcard{transition:box-shadow .3s}
#qcard.qalert{animation:qglow .5s ease-in-out 5 alternate;border-color:#e5132b}
#qcard.qhas{border-color:#e5132b;box-shadow:0 0 0 2px rgba(229,19,43,.35)}
@keyframes qglow{from{box-shadow:0 0 0 0 rgba(229,19,43,.2)}to{box-shadow:0 0 0 4px rgba(229,19,43,.75),0 0 24px rgba(229,19,43,.55)}}
.qcount{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 5px;border-radius:99px;background:#e5132b;color:#fff;font-size:11px;font-weight:700}
.qcount.bump{animation:qbump .45s ease-out 2}
@keyframes qbump{40%{transform:translateY(-6px) scale(1.15)}}
.qitem.qnew{animation:qin .4s ease-out;background:color-mix(in srgb,#e5132b 8%,transparent)}
@keyframes qin{from{opacity:0;transform:translateY(-14px)}}
.qitem.qout{opacity:0;transform:translateX(30px);transition:opacity .28s,transform .28s}
.ws{display:grid;grid-template-columns:230px minmax(0,1fr);gap:16px;min-height:0}
.wtree{border:1px solid var(--line);background:var(--panel);align-self:start;position:sticky;top:12px;max-height:calc(100vh - 40px);overflow:auto;font-size:13px}
.wt-h{display:flex;align-items:center;gap:6px;padding:8px 10px;border-bottom:1px solid var(--line)}
.wt-row{display:flex;align-items:center;gap:4px;padding:3px 6px;border-left:3px solid transparent}
.wt-row:hover{background:var(--soft)}.wt-row.on{border-left-color:var(--accent);background:color-mix(in srgb,var(--accent) 8%,var(--panel));font-weight:700}
.wt-row a{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-decoration:none;padding:4px 2px;display:flex;align-items:center;gap:6px}
.wt-row a i{width:10px;height:10px;display:inline-block;flex:none}
.wt-row.l{padding-left:22px}
.wt-tg,.wt-more{border:0;background:none;padding:2px 4px;color:var(--mute);min-height:24px}
.wt-more{opacity:0}.wt-row:hover .wt-more,.wt-more:focus{opacity:1}
.wt-s{padding:2px 0 6px 40px;display:grid}.wt-s a{text-decoration:none;color:var(--mute);padding:2px 4px;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.wt-s a.on{color:var(--ink);font-weight:700;box-shadow:inset 2px 0 var(--accent)}
.whead{display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding:8px 12px;margin-bottom:10px;background:var(--panel);border:1px solid var(--line)}
.seg{display:inline-flex;border:1px solid var(--line)}.seg button{border:0;background:var(--panel);padding:6px 14px;font-size:13px;min-height:32px}.seg button+button{border-left:1px solid var(--line)}.seg button.on{background:var(--ink);color:var(--bg)}
.ws .ed{height:calc(100vh - 320px)}
@media(max-width:1280px){.ws{grid-template-columns:200px minmax(0,1fr)}}
@media(max-width:960px){.ws{grid-template-columns:1fr}.wtree{position:static;max-height:240px}}
.reveal:focus-visible{outline:4px solid var(--sacc);outline-offset:4px}
.cmp .cl{max-width:45%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.layer.dragover{border-top:2px solid var(--accent)}
.lname{width:7em;font-size:11px}

/* AI 채팅 패널(실서버) — M2-F21-T10·T13·T14. 기능 위주, 디자인은 후속 */
.aic-scope{display:flex;gap:4px;align-items:center;flex-wrap:wrap}.aic-scope select{width:auto;padding:2px 4px;font-size:12px}
.aic-hist{flex:1;min-width:0}
.aic-empty{padding:8px;font-size:12px}
.aic-warn{margin:4px 0;padding:4px 6px;border:1px solid var(--bad);color:var(--bad);font-size:12px}
.aic-snap{font-size:11px;margin-top:4px}
.aic-btns{margin-top:6px;gap:4px;flex-wrap:wrap}
.aic-prev{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.aic-prev .stagebox{max-width:100%}
.aic-raw{white-space:pre-wrap;font-size:12px;margin:0}
.aic-h3{margin-top:0}
/* M2-F07-T58: 객체 불투명도(--op)·영상 자리표시 */
.o{opacity:var(--op,1)}
.o.embed{background:#111;overflow:hidden}
.embedph{position:absolute;inset:0;display:grid;place-content:center;gap:8px;text-align:center;color:#fff;background:#111;font-size:56px;font-weight:700}
.embedph small{font-size:28px;font-weight:400;opacity:.7}