/* workbench.css — 브레드보드 작업대 (2026-10-31). 글자 12px 이상, 휴대폰 터치 36px 이상, 움직임은 transform/opacity만 */
body.ux40 header #open-bench-btn.ws-btn{display:inline-flex;align-items:center;gap:6px;height:38px;padding:0 12px;border:1px solid transparent;border-radius:10px;background:transparent!important;color:#f6efe6;font:700 14px/1 var(--ui-font,system-ui);cursor:pointer;white-space:nowrap;box-shadow:none;position:relative}
@media (max-width:1020px){body.ux40 header #open-bench-btn.ws-btn{padding:0 8px;gap:0}}
.ws-badge{display:inline-grid;place-items:center;min-width:18px;height:18px;padding:0 5px;margin-left:4px;border-radius:9px;background:#ffb36b;color:#3a1d00;font:800 12px/1 var(--ui-font,system-ui)}
.ws-badge.bad,#sim-bench-count.bad{background:#e53935;color:#fff}

/* 시뮬레이터 안 바로가기 */
.sim-bench-btn{position:absolute;right:10px;top:10px;z-index:6;display:inline-flex;align-items:center;gap:5px;height:34px;padding:0 12px;border:1px solid #e6dccd;border-radius:999px;background:#fffaf3;color:#7a3b00;font:700 13px/1 var(--ui-font,system-ui);cursor:pointer;box-shadow:0 2px 8px rgba(60,40,10,.12);transition:transform .12s ease,box-shadow .12s ease}
.sim-bench-btn:hover{box-shadow:0 4px 14px rgba(60,40,10,.18)}
.sim-bench-btn:active{transform:scale(.96)}
.sim-bench-btn .material-symbols-rounded{font-size:18px}
#sim-bench-count{display:inline-grid;place-items:center;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:#F28320;color:#fff;font-size:12px}
#sim-bench-count[hidden]{display:none}
.mod.mod-ghost{opacity:.55;filter:grayscale(.6);outline:2px dashed #c62828;outline-offset:2px}
.mod.mod-bench .mod-body{box-shadow:0 0 0 2px #F28320 inset}
.circuit-wires .wire.ghost{stroke-dasharray:6 5;opacity:.6}
.hw-ghost{color:#b71c1c;font-size:12px}

/* 창 */
.wb-overlay{position:fixed;inset:0;z-index:12000;display:flex;align-items:center;justify-content:center;background:rgba(30,20,8,.45);opacity:0;transition:opacity .16s ease}
.wb-overlay[hidden]{display:none}
.wb-overlay.show{opacity:1}
.wb-dialog{--ink:#2b2418;--sub:#6f5f4b;--line:#e6dccd;--acc:#D95F00;--soft:#fff7ec;width:min(1440px,97vw);height:min(900px,94vh);display:flex;flex-direction:column;background:#fffdf9;border-radius:18px;box-shadow:0 30px 90px rgba(0,0,0,.3);overflow:hidden;color:var(--ink);font-family:var(--ui-font,system-ui);transform:translateY(10px) scale(.985);transition:transform .18s cubic-bezier(.2,.8,.2,1)}
.wb-overlay.show .wb-dialog{transform:none}
@media (prefers-reduced-motion:reduce){.wb-overlay,.wb-dialog,.sim-bench-btn,.wb-btn,.wb-add{transition:none!important}.wb-dialog{transform:none}}
.wb-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;border-bottom:1px solid var(--line);background:linear-gradient(180deg,#fff6ea,#fffdf9)}
.wb-title{display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-width:0}
.wb-title .material-symbols-rounded{color:#F28320;font-size:26px}
.wb-title h2{margin:0;font-size:19px;font-weight:800}
.wb-title small{color:var(--sub);font-size:13px}
.wb-head-act{display:flex;gap:6px;align-items:center;flex-shrink:0}
.wb-btn{display:inline-flex;align-items:center;justify-content:center;gap:5px;min-height:34px;padding:0 12px;border:1px solid var(--line,#e6dccd);border-radius:10px;background:#fff;color:#3b2f20;font:700 13px/1.2 var(--ui-font,system-ui);cursor:pointer;transition:background .12s ease,transform .1s ease}
.wb-btn:hover{background:#fff3e2}
.wb-btn:active{transform:scale(.97)}
.wb-btn:focus-visible,.wb-add:focus-visible,.wb-x:focus-visible,.wb-step-t:focus-visible,.wb-tabs button:focus-visible,.wb-mtabs button:focus-visible,.wb-groups button:focus-visible{outline:3px solid #ffb36b;outline-offset:2px}
.wb-btn.primary{background:#F28320;border-color:#e07510;color:#fff}
.wb-btn.primary:hover{background:#D95F00}
.wb-btn[disabled]{opacity:.5;cursor:not-allowed}
.wb-btn.sm{min-height:30px;padding:0 9px}
.wb-btn .material-symbols-rounded{font-size:18px}
.wb-x{width:36px;height:36px;border:0;border-radius:10px;background:transparent;font-size:24px;line-height:1;color:#5a4a36;cursor:pointer}
.wb-x:hover{background:#f3e7d6}
.wb-x.sm{width:30px;height:30px;font-size:19px}
.wb-mtabs{display:none}
.wb-body{flex:1;min-height:0;display:grid;grid-template-columns:270px minmax(0,1fr) 360px}
.wb-bin,.wb-side{min-height:0;display:flex;flex-direction:column;border-right:1px solid var(--line)}
.wb-side{border-right:0;border-left:1px solid var(--line)}
.wb-search{display:flex;align-items:center;gap:6px;margin:10px;padding:0 10px;height:38px;border:1px solid var(--line);border-radius:10px;background:#fff}
.wb-search input{flex:1;min-width:0;border:0;outline:0;background:transparent;font:500 14px var(--ui-font,system-ui);color:var(--ink)}
.wb-search .material-symbols-rounded{color:var(--sub);font-size:20px}
.wb-groups{display:flex;flex-wrap:wrap;gap:5px;padding:0 10px 8px}
.wb-groups button{min-height:30px;padding:0 10px;border:1px solid var(--line);border-radius:999px;background:#fff;color:#4a3b29;font:600 12.5px var(--ui-font,system-ui);cursor:pointer}
.wb-groups button.on{background:#2b2418;border-color:#2b2418;color:#fff}
.wb-list{list-style:none;margin:0;padding:0 8px 10px;overflow:auto;flex:1}
.wb-item{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px;border-radius:10px}
.wb-item:hover{background:#fff4e6}
.wb-item b{display:block;font-size:13.5px;line-height:1.3}
.wb-item small{display:inline-block;margin-right:6px;color:var(--sub);font-size:12px}
.wb-rail{display:inline-block;padding:1px 6px;border-radius:6px;font-size:12px;font-weight:700}
.wb-rail.r-5v{background:#fde0dc;color:#b3261e}.wb-rail.r-3v3{background:#ffe8cc;color:#9a4a00}.wb-rail.r-none{background:#eee;color:#555}
.wb-add{flex-shrink:0;min-height:32px;padding:0 12px;border:0;border-radius:9px;background:#F28320;color:#fff;font:800 13px var(--ui-font,system-ui);cursor:pointer;transition:transform .1s ease,background .12s ease}
.wb-add:hover{background:#D95F00}.wb-add:active{transform:scale(.94)}
.wb-add i{font-style:normal;margin-left:3px;padding:0 5px;border-radius:7px;background:rgba(255,255,255,.3)}
.wb-empty{padding:14px;color:var(--sub);font-size:13px}
.wb-center{min-width:0;min-height:0;display:flex;flex-direction:column}
.wb-placed{display:flex;gap:8px;padding:10px;overflow-x:auto;border-bottom:1px solid var(--line);background:#fffaf2;min-height:62px;flex-shrink:0;max-height:42%}
.wb-hello{display:flex;flex-direction:column;gap:3px;font-size:13.5px;color:var(--sub);padding:4px}
.wb-hello b{color:var(--ink)}
.wb-card{flex:0 0 auto;width:236px;border:1px solid var(--line);border-radius:12px;background:#fff;padding:8px 10px;align-self:flex-start;animation:wbPop .18s ease}
@keyframes wbPop{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.wb-card{animation:none}}
.wb-card.bad{border-color:#e57373;box-shadow:0 0 0 2px #fde0dc}
.wb-card-h{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.wb-card-h b{font-size:13.5px}
.wb-card-h small{color:var(--sub);font-size:12px}
.wb-card-h .wb-x{margin-left:auto}
.wb-addr{flex-basis:100%;color:#1f5f8b!important}
.wb-pins{display:flex;flex-direction:column;gap:4px;margin-top:6px}
.wb-pinrow{display:grid;grid-template-columns:72px 1fr;align-items:center;gap:6px;font-size:12.5px}
.wb-pinrow span{color:#4a3b29;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wb-pinrow select{min-width:0;height:30px;border:1px solid var(--line);border-radius:8px;background:#fff;font:600 12.5px var(--ui-font,system-ui);color:var(--ink)}
.wb-pinrow em{grid-column:2;font-style:normal;font-size:12px;color:#9a4a00}
.wb-pin-fixed{font-weight:700;font-size:12.5px}
.wb-power{display:block;margin-top:5px;color:var(--sub);font-size:12px}
.wb-stop{margin-top:6px;padding:8px;border-radius:10px;background:#fdecea;border:1px solid #f5c2bd;display:flex;flex-direction:column;gap:5px;font-size:12.5px;line-height:1.45}
.wb-stop b{color:#b3261e}
.wb-stop-act{display:flex;flex-wrap:wrap;gap:5px}
.wb-board-wrap{flex:1;min-height:0;display:flex;flex-direction:column}
.wb-board-tools{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:6px 10px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.wb-legend{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--sub)}
.wb-legend i{display:inline-block;width:16px;height:4px;border-radius:2px}
.lg-3{background:#F28320}.lg-5{background:#E73333}.lg-g{background:#222}.lg-s{background:#3E9A2B}
.wb-zoom{display:flex;gap:4px}
.wb-board{flex:1;min-height:0;overflow:auto;padding:8px;background:#fbf7f0}
.wb-board:focus-visible{outline:3px solid #ffb36b;outline-offset:-3px}
.wb-board svg{display:block;max-width:none}
.wb-board-note{margin:6px 4px;font-size:12.5px;color:#b3261e}
.wb-side .wb-tabs{display:flex;border-bottom:1px solid var(--line)}
.wb-tabs button{flex:1;min-height:42px;border:0;border-bottom:3px solid transparent;background:transparent;font:700 13.5px var(--ui-font,system-ui);color:var(--sub);cursor:pointer}
.wb-tabs button.on{color:var(--ink);border-bottom-color:#F28320}
.wb-n{display:inline-block;min-width:16px;padding:0 4px;border-radius:8px;background:#ffe8cc;color:#9a4a00;font-size:12px}
.wb-n:empty{display:none}.wb-n.bad{background:#e53935;color:#fff}
.wb-pane{flex:1;min-height:0;overflow:auto;padding:10px 12px}
.wb-pane[hidden]{display:none}
.wb-checks,.wb-cmp{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.wb-checks li,.wb-cmp li{padding:8px 10px;border-radius:10px;font-size:13px;line-height:1.5;display:flex;flex-direction:column;gap:4px;background:#f7f3ec}
.wb-checks li b{font-weight:700}
.wb-checks li>span{color:#5a4a36}
.wb-checks .lv-error,.wb-cmp .bad{background:#fdecea}.wb-checks .lv-error b{color:#b3261e}
.wb-checks .lv-warn{background:#fff4dc}.wb-checks .lv-info,.wb-cmp .info{background:#eef4fb}.wb-checks .lv-ok,.wb-cmp .ok{background:#eaf6ec}
.wb-checks .wb-btn{align-self:flex-start}
.wb-cmp li{display:block}
.wb-cmp li b{font-weight:800}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.wb-muted{color:var(--sub);font-size:12.5px;line-height:1.5;margin:4px 0 8px}
.wb-progress{height:8px;border-radius:5px;background:#f0e6d8;overflow:hidden}
.wb-progress i{display:block;height:100%;background:linear-gradient(90deg,#F28320,#43a047);transition:width .2s ease}
.wb-steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}
.wb-step{display:grid;grid-template-columns:22px 1fr;gap:6px;align-items:start;padding:6px;border-radius:10px}
.wb-step input{width:18px;height:18px;margin-top:3px;accent-color:#43a047}
.wb-step-t{border:0;background:transparent;text-align:left;font:500 13px/1.55 var(--ui-font,system-ui);color:var(--ink);cursor:pointer;padding:0}
.wb-step-t b{display:inline-grid;place-items:center;min-width:20px;height:20px;margin-right:3px;border-radius:6px;background:#2b2418;color:#fff;font-size:12px}
.wb-step.done .wb-step-t{color:#7c8b7c;text-decoration:line-through;text-decoration-color:rgba(0,0,0,.25)}
.wb-step.done .wb-step-t b{background:#43a047}
.wb-step.focus{background:#fff1dd;box-shadow:inset 3px 0 0 #F28320}
.wb-step[data-kind="check"] .wb-step-t{font-weight:700}
.wb-step-nav{position:sticky;bottom:-10px;display:flex;gap:6px;flex-wrap:wrap;padding:8px 0;background:#fffdf9}
.wb-sec{padding-bottom:12px;margin-bottom:12px;border-bottom:1px dashed var(--line)}
.wb-sec h3{margin:0 0 4px;font-size:15px}
.wb-gen p{margin:6px 0 0;font-size:13px}
.wb-gen .ok,.wb-sec .ok{color:#2e7d32}.wb-gen .bad{color:#b3261e}
.wb-pre{margin:8px 0;max-height:300px;overflow:auto;padding:10px;border-radius:10px;background:#1e293b;color:#e2e8f0;font:12.5px/1.55 ui-monospace,Menlo,monospace;white-space:pre}
.wb-row{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}
.wb-cmp{margin-top:8px}
/* 브레드보드 그림 */
.wb-bb{fill:#f4f1ea;stroke:#d5c9b8}
.wb-joint{stroke:#b9ab95;stroke-width:2;stroke-dasharray:4 3}
.wb-rail-p{stroke:#e73333;stroke-width:1.5}.wb-rail-n{stroke:#3b6fb6;stroke-width:1.5}
text.wb-rail-t{font:800 10px sans-serif;stroke:none}text.wb-rail-t.wb-rail-p{fill:#e73333}text.wb-rail-t.wb-rail-n{fill:#3b6fb6}
.wb-note{font:700 9px sans-serif;fill:#b34d00}
.wb-trench{fill:#e8e2d6}
.wb-holes rect{fill:#c8c2b4}
.wb-coln,.wb-rown{font:7px sans-serif;fill:#9a8f7e;text-anchor:middle}
.wb-pico{fill:#1f7a3a;stroke:#155c2b}.wb-usb{fill:#b9bec7}
.wb-pico-t{font:800 10px sans-serif;fill:#e8f5ec;text-anchor:middle}
.wb-pin{fill:#cfe8d5}.wb-pin-on{fill:#ffd54f;stroke:#ff6f00;stroke-width:2}
.wb-pin-t{font:800 7.5px sans-serif;fill:#1e1a14;text-anchor:middle;paint-order:stroke;stroke:#f4f1ea;stroke-width:2.5}
.wb-mod-b{fill:#fff;stroke:#5c4f3a;stroke-width:1.5}
.wb-mod-t{font:800 10px sans-serif;fill:#1e1a14;text-anchor:middle}.wb-mod-s{font:600 8px sans-serif;fill:#7a6a55;text-anchor:middle}
.wb-leg{stroke:#8b8b8b;stroke-width:2}
.wb-leg-t{font:700 7.5px sans-serif;fill:#5c4f3a}
.wb-res-l{stroke:#8b7b62;stroke-width:1.6}.wb-res-b{fill:#e9d7b5;stroke:#8b7b62}.wb-res-t{font:800 8px sans-serif;fill:#b34d00;text-anchor:middle;paint-order:stroke;stroke:#f4f1ea;stroke-width:2.5}.wb-res-e{fill:#8b7b62}
.wb-wire-u{fill:none;stroke:#fff;stroke-width:5;opacity:.85}.wb-wire-c{fill:none;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.wb-el{transition:opacity .15s ease}
svg.has-focus .wb-el:not(.focus){opacity:.18}
svg.has-focus .wb-el.focus .wb-wire-c{stroke-width:4}
svg.has-focus .wb-el.focus .wb-res-b,svg.has-focus .wb-el.focus .wb-mod-b{stroke:#F28320;stroke-width:2.5}
/* 휴대폰·좁은 화면: 한 번에 한 칸 */
@media (max-width:1440px){.wb-body{grid-template-columns:240px minmax(0,1fr) 330px}}
@media (max-width:1180px){.wb-body{grid-template-columns:220px minmax(0,1fr) 300px}}
@media (max-width:820px){
  .wb-dialog{width:100vw;height:100dvh;max-height:100vh;border-radius:0}
  .wb-head{padding:8px 10px}.wb-title small{display:none}.wb-title h2{font-size:17px}
  .wb-head-act .wb-btn span:not(.material-symbols-rounded){display:none}
  .wb-head-act .wb-btn{min-width:38px;min-height:38px;padding:0 8px}
  .wb-mtabs{display:flex;border-bottom:1px solid var(--line);overflow-x:auto}
  .wb-mtabs button{flex:1 0 auto;min-height:42px;padding:0 10px;border:0;border-bottom:3px solid transparent;background:transparent;font:700 13.5px var(--ui-font,system-ui);color:var(--sub)}
  .wb-mtabs button.on{color:var(--ink);border-bottom-color:#F28320}
  .wb-body{display:block;position:relative}
  .wb-bin,.wb-center,.wb-side{display:none;height:100%;border:0}
  .wb-dialog[data-mpane="bin"] .wb-bin,.wb-dialog[data-mpane="board"] .wb-center{display:flex}
  .wb-dialog[data-mpane="check"] .wb-side,.wb-dialog[data-mpane="steps"] .wb-side,.wb-dialog[data-mpane="code"] .wb-side{display:flex}
  .wb-side .wb-tabs{display:none}
  .wb-placed{max-height:45%}
  .wb-card{width:220px}
  .wb-add,.wb-groups button,.wb-btn{min-height:38px}
  .wb-pinrow select{height:36px}
}

/* 다른 층(시뮬레이터 손잡이 등 z-index 10000대)보다 위, 알림은 작업대 위에 */
body.wb-open #toast-container{z-index:12500}
/* 아이콘 글꼴이 늦게 오거나 막혀도 글자(예: "cable")가 배치를 밀지 않게 */
.wb-dialog .material-symbols-rounded,.sim-bench-btn .material-symbols-rounded,#open-bench-btn .material-symbols-rounded{display:inline-block;width:1em;overflow:hidden;white-space:nowrap;line-height:1}
.wb-head{background:linear-gradient(180deg,#fff6ea,#fffdf9);color:#2b2418;height:auto;box-shadow:none;position:static}