/* 워크벤치 — 윈도우형 작업대. 토큰은 studio.css(다크). 외부 글꼴 없음. */
body.wbpage{display:flex;flex-direction:column;height:100vh;height:100dvh;min-height:0;overflow:hidden;font-size:14px;--kr:"Noto Sans KR","Apple SD Gothic Neo","Malgun Gothic",system-ui,sans-serif;--disp:system-ui,sans-serif;--mono:ui-monospace,"Cascadia Mono",Consolas,monospace}
.wbpage button,.wbpage input,.wbpage select,.wbpage textarea{font-family:var(--kr)}
.wbtop{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:6px 10px;border-bottom:1px solid var(--line);background:rgba(3,3,6,.9);position:relative;z-index:60}
.wbtop .logo{font:800 18px var(--disp);letter-spacing:.08em;text-decoration:none;display:inline-flex;align-items:center;min-height:44px}
.wbtop .logo em{font-style:normal;color:var(--cyan)}
.wbname{flex:1 1 160px;min-width:0;max-width:340px}
.wbname .in{min-height:44px;padding:8px 12px}
.wbpage .cta,.wbpage .ghost{min-height:44px;min-width:44px;padding:8px 14px;font:700 12px var(--kr);letter-spacing:.02em;text-transform:none;white-space:nowrap}
.wbpage .ghost.sm{min-height:44px;padding:6px 10px;font-size:12px}
.wbpage .ghost.ic{min-width:44px;padding:6px 0}
.wbpage .cta::after{content:none}
.wbpage button[disabled]{opacity:.45;cursor:not-allowed}
.wbstat{font-size:11px;min-width:0;flex:1 1 120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mocktag{white-space:nowrap}
details.more{position:relative}
details.more>summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center}
details.more>summary::-webkit-details-marker{display:none}
details.more .menu{position:absolute;right:0;top:100%;margin-top:4px;z-index:80;display:grid;gap:6px;padding:10px;background:#0c0c14;border:1px solid var(--line);border-radius:12px;min-width:220px;box-shadow:0 12px 32px rgba(0,0,0,.6)}
details.more .menu .ghost{justify-content:flex-start}
.wbpanel{padding:10px 12px;border-bottom:1px solid var(--line);background:rgba(244,246,255,.035);max-height:55vh;overflow:auto;z-index:55}
.wbpanel .notice{margin:0}
.pbox h4{margin:0 0 8px}
.prow{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.prow .in{flex:1 1 220px}
.btns.tight{margin-top:10px;gap:8px}
.g2x{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.g3x{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
@media (max-width:560px){.g2x,.g3x{grid-template-columns:minmax(0,1fr)}}
fieldset.vis{border:1px solid var(--line);border-radius:12px;margin:10px 0;padding:6px 12px}
fieldset.vis legend{font:600 12px var(--mono);color:var(--dim);padding:0 6px}
.chk{align-items:center;min-height:44px;cursor:pointer}
.consent{margin:8px 0}
.small{font-size:12px}
.warnt{color:var(--gold)}
.recent{display:flex;gap:6px;flex-wrap:wrap}

/* 작업대 */
#deskwrap{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;position:relative}
#desk{flex:1 1 auto;min-height:420px;position:relative;overflow:hidden;background:
 linear-gradient(rgba(244,246,255,.03) 1px,transparent 1px) 0 0/24px 24px,linear-gradient(90deg,rgba(244,246,255,.03) 1px,transparent 1px) 0 0/24px 24px}
#taskbar{flex:none;display:flex;gap:6px;padding:4px 8px;border-top:1px solid var(--line);background:rgba(3,3,6,.92);overflow-x:auto;min-height:52px;align-items:center}
#taskbar .tk{min-height:44px;padding:6px 14px;border-radius:999px;border:1px solid var(--line);background:transparent;font:600 12px var(--kr);color:var(--white);cursor:pointer;white-space:nowrap}
#taskbar .tk.is-min{color:var(--gold);border-color:rgba(255,200,87,.55)}
#taskbar .tk:hover{border-color:var(--cyan)}
.win{position:absolute;display:flex;flex-direction:column;background:#0b0b13;border:1px solid var(--line);border-radius:12px;box-shadow:0 10px 30px rgba(0,0,0,.55);overflow:hidden;min-width:0}
.win.front{border-color:rgba(60,240,255,.55)}
.win.min{display:none}
.win.moving{opacity:.92}
.wt{flex:none;display:flex;align-items:center;justify-content:space-between;gap:8px;height:44px;padding:0 4px 0 12px;background:rgba(244,246,255,.06);border-bottom:1px solid var(--line);cursor:move;user-select:none;touch-action:none}
.wt .ttl{font:700 13px var(--kr);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.win.front .wt{background:rgba(60,240,255,.12)}
.wmin{width:44px;height:44px;border:0;background:transparent;color:var(--white);font:700 18px var(--mono);cursor:pointer;border-radius:8px}
.wmin:hover{background:rgba(244,246,255,.1)}
.wbody{flex:1 1 auto;min-height:0;overflow:auto;padding:10px;display:flex;flex-direction:column;gap:8px}
.rz{position:absolute;z-index:5;touch-action:none}
.rz-n{top:-3px;left:12px;right:12px;height:8px;cursor:ns-resize}.rz-s{bottom:-3px;left:12px;right:12px;height:8px;cursor:ns-resize}
.rz-e{right:-3px;top:12px;bottom:12px;width:8px;cursor:ew-resize}.rz-w{left:-3px;top:12px;bottom:12px;width:8px;cursor:ew-resize}
.rz-ne{top:-3px;right:-3px;width:16px;height:16px;cursor:nesw-resize}.rz-nw{top:-3px;left:-3px;width:16px;height:16px;cursor:nwse-resize}
.rz-se{bottom:-3px;right:-3px;width:16px;height:16px;cursor:nwse-resize}.rz-sw{bottom:-3px;left:-3px;width:16px;height:16px;cursor:nesw-resize}
.rz-se::after{content:"";position:absolute;right:5px;bottom:5px;width:8px;height:8px;border-right:2px solid var(--dim);border-bottom:2px solid var(--dim)}

/* 하위 요소 */
.subtabs{display:flex;gap:6px;flex-wrap:wrap}
.subtabs button,.scrtabs button{min-height:44px;padding:6px 14px;border-radius:999px;border:1px solid var(--line);background:transparent;font:600 12px var(--kr);color:var(--dim);cursor:pointer}
.subtabs button.on,.scrtabs button.on{border-color:var(--cyan);color:var(--cyan)}
.palbar{display:flex;gap:8px;flex-wrap:wrap}
.palbar .in{flex:1 1 140px;min-height:44px;padding:8px 12px}
.pallist{display:flex;flex-direction:column;gap:8px}
details.grp>summary{cursor:pointer;min-height:44px;display:flex;align-items:center;font:700 12px var(--mono);letter-spacing:.06em;color:var(--cyan)}
ul.mlist,ul.blks,ul.etree,ul.warns{list-style:none;margin:0;padding:0}
ul.mlist{display:grid;gap:8px}
.mcard{border:1px solid var(--line);border-radius:10px;padding:8px 10px;background:var(--panel);cursor:grab;user-select:none}
.mcard.sel{border-color:var(--gold)}
.mcard:hover{border-color:rgba(60,240,255,.5)}
.mn{font-weight:700}.ms{font-size:12px}
.mb{display:flex;gap:6px;margin-top:6px;flex-wrap:wrap}
.scrtabs{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.scrtools{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
ul.blks,ul.etree{position:relative;flex:1 1 auto;min-height:120px;overflow:auto;border:1px dashed var(--line);border-radius:10px;padding:6px;display:flex;flex-direction:column;gap:6px}
.blk,.erow{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;border:1px solid var(--line);border-radius:10px;padding:6px 8px;background:var(--panel);cursor:grab;user-select:none;min-height:50px}
.blk.sel,.erow.sel{border-color:var(--cyan);background:rgba(60,240,255,.08)}
.blk.miss{border-color:rgba(255,200,87,.7)}
.bgrip{color:var(--dim);font-size:16px;flex:none}
.binfo{flex:1 1 90px;min-width:0}
.bn{font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bs{font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bbtn,.ebtn{display:flex;gap:2px;flex:none;margin-left:auto}
ul.blks .empty,ul.etree .empty{border:0;background:none;cursor:default;justify-content:center;text-align:center;min-height:60px;margin:auto}
.dropline{position:absolute;left:6px;right:6px;height:3px;border-radius:2px;background:var(--gold);box-shadow:0 0 8px var(--gold);pointer-events:none;display:none;z-index:3}
.erow.dtarget{outline:2px solid var(--gold);outline-offset:-2px}
.etype{font:700 12px var(--mono);color:var(--cyan);flex:none}
.elab{font-size:12px;flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.erow .ebtn{margin-left:auto}
.erow .ebtn .ghost{padding:2px 0;min-width:44px}
.dghost{position:fixed;z-index:200;pointer-events:none;padding:8px 14px;border-radius:999px;background:var(--cyan);color:var(--void);font:700 12px var(--kr);box-shadow:0 6px 18px rgba(0,0,0,.5)}
body.dragging,body.dragging *{cursor:grabbing!important;user-select:none!important}
.fld{margin:0 0 10px}
.fld .in{min-height:44px}
.fld textarea.in{min-height:80px}
.fld.chkrow{display:flex;align-items:center;gap:10px;min-height:44px}
.fld.chkrow input{width:22px;height:22px;accent-color:var(--cyan);flex:none}
.fld.chkrow label{margin:0}
.hint{font-size:11px;margin-top:4px}
.lst{display:grid;gap:6px}
.lrow{display:flex;gap:6px}.lrow .in{flex:1 1 auto}
.psec h4{margin:4px 0 8px;font:700 12px var(--mono);letter-spacing:.1em;color:var(--cyan)}
.psec+.psec{border-top:1px solid var(--line);padding-top:8px}
.pvbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.wbpage .toggle{margin:0}
.wbpage .toggle button{min-height:44px}
.pv{flex:1 1 auto;min-height:180px;display:flex;justify-content:center;border:1px solid var(--line);border-radius:10px;background:#0a0a10;padding:6px;overflow:hidden}
.pvf{border:0;background:#fff;border-radius:6px;width:100%;height:100%;min-height:160px}
.pv.m .pvf{width:min(100%,360px)}
ul.warns{display:grid;gap:4px;font-size:12px}

/* 모듈 편집 창 */
#bEditor{padding:8px}
.epanes{flex:1 1 auto;min-height:0;display:flex;flex-direction:column}
.epane{display:none;min-height:0;flex:1 1 auto;overflow:auto;flex-direction:column;gap:8px}
.epane.on{display:flex}
.epal{display:flex;gap:6px;flex-wrap:wrap}
.chip{min-height:44px;padding:6px 12px;border-radius:999px;border:1px solid var(--line);background:var(--panel);font:600 12px var(--kr);cursor:grab;color:var(--white);touch-action:none}
.chip:hover{border-color:var(--cyan)}
.esplit{display:flex;gap:12px;flex-wrap:wrap;flex:1 1 auto;min-height:0}
.etw{flex:1 1 260px;display:flex;flex-direction:column;min-height:200px}
.efw{flex:1 1 220px;min-width:0}
.etw h4,.efw h4{margin:0 0 6px;font:700 12px var(--mono);color:var(--cyan);letter-spacing:.1em}
.pdef{border:1px solid var(--line);border-radius:10px;padding:8px 10px;margin:0 0 8px}
.pdef legend{font:600 11px var(--mono);color:var(--dim);padding:0 6px}
.efoot{flex:none;border-top:1px solid var(--line);padding-top:6px;display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:space-between}
.efoot .btns{margin:0}
.emsg{flex:1 1 200px}
#bEditor.wide .epanes{flex-direction:row;gap:12px}
#bEditor.wide .epane[data-epane=compose],#bEditor.wide .epane[data-epane=meta]{display:none;flex:1 1 55%}
#bEditor.wide .epane[data-epane=compose].on,#bEditor.wide .epane[data-epane=meta].on{display:flex}
#bEditor.wide .epane[data-epane=preview]{display:flex;flex:1 1 45%}
#bEditor.wide .pvtab{display:none}

/* 모바일: 창 대신 하단 탭 */
#mtabs{display:none}
@media (max-width:767px){
  .wbtop{gap:6px;padding:4px 8px}
  .wbtop .logo{min-height:44px}
  .wbname{flex:1 1 120px}
  .wbpage .cta,.wbpage .ghost{padding:6px 10px}
  #deskwrap{min-height:0}
  #desk{min-height:0;overflow:hidden}
  #taskbar{display:none}
  .win,.win.min{position:absolute!important;display:none;left:0!important;top:0!important;width:100%!important;height:100%!important;border-radius:0;border:0;box-shadow:none;z-index:1!important}
  .win.mact{display:flex}
  .win .wt{display:none}
  .rz{display:none}
  #mtabs{display:flex;flex:none;border-top:1px solid var(--line);background:rgba(3,3,6,.96)}
  #mtabs button{flex:1 1 0;min-width:0;min-height:56px;border:0;border-top:3px solid transparent;background:transparent;font:600 11px var(--kr);color:var(--dim);cursor:pointer;padding:4px 2px}
  #mtabs button.on{color:var(--cyan);border-top-color:var(--cyan)}
  details.more .menu{right:auto;left:0}
  .wbstat{display:none}
  .mcard,.blk,.erow,.chip{cursor:default}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}