:root{color-scheme:dark;--bg:#111820;--panel:#1b2530;--line:#334251;--text:#e7edf4;--muted:#99aabb;--blue:#71c6f1;--green:#61d8aa;--cell-w:112px;--cell-h:86px;--scale:.8;font-family:Pretendard,"Pretendard Variable",system-ui,sans-serif}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font-size:13px}button,input,select,textarea{font:inherit}button,select{min-height:36px;border:1px solid var(--line);border-radius:6px;background:#243240;color:var(--text);padding:7px 11px}button{cursor:pointer;touch-action:manipulation;white-space:nowrap}button:hover{background:#34495d}button:disabled{opacity:.45;cursor:wait}button:focus-visible,select:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid var(--blue);outline-offset:2px}button.active{background:#224b65;border-color:#65bfed;color:#c6efff}.primary{background:#14618b;border-color:#368abd;color:#fff;font-weight:700}.primary:hover{background:#237ca9}.accent{color:var(--blue)}kbd{font:10px system-ui;color:var(--muted);margin-left:3px}label{color:var(--muted)}a{color:var(--blue)}
#editor{height:100dvh;height:100vh;display:flex;flex-direction:column;overflow:hidden}@supports(height:100dvh){#editor{height:100dvh}}
.topbar{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;background:#19232f;border-bottom:1px solid var(--line);gap:12px}.brand{display:flex;align-items:center;gap:10px}.brand-icon{background:#14618b;border:1px solid #5cbae6;border-radius:7px;padding:10px 5px;font-weight:800;font-size:13px;letter-spacing:1px}.brand strong{font-size:17px}.brand small{display:block;color:var(--muted);margin-top:4px;font-size:11px}.header-actions{display:flex;gap:6px}.close{background:transparent}.transferbar{display:flex;align-items:center;gap:7px;flex-wrap:wrap;padding:9px 14px;background:#172b36;border-bottom:1px solid #2b4555}.transferbar select{min-width:160px;max-width:280px;flex:1}.badge{font-size:10px;line-height:1.5;padding:3px 7px;border:1px solid #425262;border-radius:4px;color:#bbccdc;white-space:nowrap}.badge.ok{color:#88e7ba;border-color:#35876b;background:#183c32}.badge.error{color:#ffa3a3;border-color:#9f5757;background:#47272c}.menubar{display:flex;gap:6px;padding:7px 12px;overflow-x:auto;flex-shrink:0;background:#1a242e;border-bottom:1px solid var(--line)}.group{display:flex;align-items:center;gap:4px;padding-right:8px;border-right:1px solid var(--line)}.group:last-child{border:0}.zoom-label{display:flex;gap:5px;align-items:center;white-space:nowrap}.toolbox{display:flex;gap:5px;padding:8px 12px;overflow-x:auto;flex-shrink:0}.toolbox button{display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:64px;padding:5px 9px;gap:3px}.toolbox b{font:18px monospace;height:21px}.toolbox small{font-size:10px;color:#b6c5d3}
.workspace{display:flex;min-height:0;flex:1;border-top:1px solid var(--line)}.canvas-pane{display:flex;flex-direction:column;min-width:0;flex:1}.canvas-heading{display:flex;align-items:center;gap:15px;min-height:33px;padding:6px 14px;background:#18202b;color:var(--muted);font-size:11px}.canvas-heading #mode-label{font-weight:700;color:var(--blue)}.canvas-hint{margin-left:auto}#canvas-scroll{background:#e9edf1;flex:1;min-height:120px;overflow:auto;overscroll-behavior:contain;touch-action:pan-x pan-y;position:relative;color:#263646}#ladder{width:max-content;min-height:100%;padding:20px 26px 30px 10px;zoom:var(--scale);user-select:none}.rung{display:flex;align-items:stretch;position:relative}.row-head{flex:none;width:56px;border:0;border-radius:0;border-right:3px solid #354c61;background:#dce3e9;color:#607389;font:11px monospace;padding:0 3px;position:sticky;left:0;z-index:3}.row-head:hover{background:#b9d0e4}.rung.cells-selected .row-head{background:#b6d8ee}.cell{width:var(--cell-w);height:var(--cell-h);padding:0;border:0;border-right:1px dotted #c8d0d7;border-bottom:1px dotted #c2cbd3;border-radius:0;background:transparent;color:#243747;position:relative;flex:none;overflow:visible;touch-action:pan-x pan-y}.cell:hover{background:#d9e8f4}.cell.selected{background:#c8e6fa;box-shadow:inset 0 0 0 2px #1676ae}.cell.in-range{background:#d3e9f6}.cell.live{color:#078b51}.cell svg{position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible;pointer-events:none}.cell .address{position:absolute;left:4px;right:4px;top:8px;text-align:center;font:12px ui-monospace,Consolas,monospace;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;pointer-events:none}.cell .command{position:absolute;left:9px;right:9px;top:34px;text-align:center;font:10px ui-monospace,Consolas,monospace;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;pointer-events:none}.cell .current{position:absolute;bottom:7px;left:2px;right:2px;font:11px ui-monospace,Consolas,monospace;pointer-events:none;color:#078b51}.cell .vline{position:absolute;left:-1.5px;top:50%;height:var(--cell-h);width:3px;background:#3a5266;z-index:2;pointer-events:none}.cell.live .vline{background:#078b51}.rung-comment{background:#dce7ed;padding:7px 12px 7px 68px;border-left:0;color:#52697b;font-size:12px;white-space:pre-wrap;max-width:calc(56px + 12 * var(--cell-w))}.end-rung{color:#496175;font:13px monospace;padding:25px 18px 10px 66px;border-top:1px solid #c8d0d7}.rowbar{display:flex;gap:5px;align-items:center;padding:7px 10px;overflow-x:auto;flex-shrink:0}.rowbar span{white-space:nowrap;color:var(--muted);font-size:11px}.monitor-pane{width:280px;flex:none;border-left:1px solid var(--line);overflow:auto;padding:12px;background:#17212c}.monitor-title{display:flex;align-items:center;justify-content:space-between;gap:5px}.monitor-title strong{font-size:12px}.monitor-pane p{color:var(--muted);font-size:11px;line-height:1.6;margin:9px 0}.io-heading{font-size:10px;color:var(--muted);margin:12px 0 6px;display:flex;justify-content:space-between}.io-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:4px}.io-button{padding:7px 2px;min-width:0;min-height:51px;font:12px monospace;background:#222e3a;border:1px solid #394b5d;color:#a5b5c5}.io-button small{display:block;font:9px system-ui;margin-top:3px;opacity:.8}.io-button.on{background:#114c38;border-color:#42bc89;color:#a7f3cc}.io-button:disabled{opacity:1;cursor:default}details{border-top:1px solid var(--line);margin-top:14px;padding-top:12px}summary{cursor:pointer;font-size:12px;color:#b4c5d5}.values{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px;font-size:11px;margin-top:10px;color:var(--muted)}.values .value{display:flex;gap:4px;justify-content:space-between;padding:4px;background:#202e3c;font-family:monospace}.terminal-help{line-height:1.8;font-size:11px;color:var(--muted);margin-top:10px}.source-note{line-height:1.8;color:var(--muted);font-size:10px;margin-top:20px}footer{display:flex;align-items:center;gap:9px;padding:8px 12px;border-top:1px solid var(--line);background:#1b2835;min-height:39px}#status{font-size:11px;line-height:1.5;overflow:hidden;text-overflow:ellipsis}#errors{max-height:130px;overflow:auto;background:#3a222a;padding:8px 14px;color:#ffb9bb}#errors button{display:block;text-align:left;background:transparent;border:0;color:#ffb9bb;padding:5px;font-size:12px;white-space:normal}
dialog{background:#1b2835;color:var(--text);border:1px solid #516678;border-radius:13px;padding:22px;max-width:min(550px,calc(100vw - 24px));width:480px;max-height:calc(100dvh - 24px);overflow:auto;box-shadow:0 20px 80px #0008}dialog::backdrop{background:#081018b8}dialog h2{font-size:18px;margin:0 0 14px}.dialog-heading{display:flex;align-items:center;justify-content:space-between;gap:10px}.dialog-heading h2{margin:0}.dialog-heading button{background:transparent}.dialog-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:20px;flex-wrap:wrap}dialog p,dialog li{font-size:13px;line-height:1.8;color:#b5c7d7}dialog li{margin-bottom:7px}dialog label{display:block;margin:14px 0 6px;font-size:12px}dialog input,dialog textarea{display:block;width:100%;padding:12px;margin-top:7px;background:#111c27;border:1px solid #4b6278;color:var(--text);border-radius:7px;min-height:44px;font:16px ui-monospace,Consolas,monospace}dialog textarea{font:15px Pretendard,system-ui;resize:vertical}.error-text{color:#ffa3a3!important;min-height:18px}#help-dialog{width:650px;max-width:calc(100vw - 24px)}[hidden]{display:none!important}
@media(max-width:1000px){.monitor-pane{width:235px}.brand small{display:none}.canvas-hint{display:none}.toolbox{gap:4px}.toolbox button{min-width:58px}.transferbar select{max-width:220px}}
@media(max-width:700px){button,select{min-height:42px}.topbar{padding:8px 10px}.brand strong{font-size:15px}.brand-icon{padding:7px 4px;font-size:11px}.transferbar{padding:7px 8px;gap:5px}.transferbar>label{font-size:11px}.transferbar select{max-width:none;min-width:130px}.transferbar .badge{margin-right:0}.transferbar button{padding:6px 9px;font-size:11px;flex:1}.transferbar .primary{flex:2}.menubar{padding:5px 8px}.menubar button{font-size:11px}.toolbox{padding:6px 8px}.toolbox button{min-width:60px;min-height:48px}.workspace{flex-direction:column}.canvas-pane{min-height:180px;flex:1}.monitor-pane{width:100%;max-height:180px;border-left:0;border-top:1px solid var(--line);padding:8px 10px}.monitor-pane p{display:none}#io-list{display:flex;gap:12px}.io-section{flex:1;min-width:0}.io-grid{grid-template-columns:repeat(8,minmax(32px,1fr))}#io-list{overflow-x:auto}.io-button{min-height:42px}.io-heading{margin:5px 0}.rowbar{padding:5px 8px}.rowbar button{font-size:11px;padding:5px 9px}.canvas-heading{padding:5px 8px;min-height:27px}.monitor-pane details{margin-top:8px;padding-top:8px}.source-note{margin-top:8px}footer{padding:5px 8px;min-height:32px}dialog{padding:17px}}
@media(max-width:440px){#io-list{display:block}.io-grid{grid-template-columns:repeat(8,minmax(0,1fr))}.io-button{font-size:10px}.io-button small{font-size:8px}.transferbar .badge{font-size:9px}.monitor-pane{max-height:175px}}
@media(max-width:700px) and (max-height:740px){.canvas-pane{min-height:120px}#canvas-scroll{min-height:60px}.monitor-pane{max-height:125px}.toolbox button{min-height:44px}.toolbox{padding:4px 8px}.rowbar button{min-height:36px}.menubar{padding:4px 8px}.menubar button{min-height:36px}.topbar{padding:6px 8px}.transferbar{padding:5px 8px}.transferbar button,.transferbar select{min-height:36px}}
@media(max-width:1000px) and (max-height:520px){#editor{overflow:auto}.workspace{flex:1 0 320px}.monitor-pane{max-height:140px}.canvas-pane{min-height:150px}}

/* Canvas focus mode keeps the page fixed; gestures pan the diagram itself. */
#canvas-scroll,.cell{touch-action:none}
#canvas-scroll{cursor:default;-webkit-touch-callout:none}
.canvas-heading{gap:8px;flex-wrap:wrap;flex-shrink:0}
.canvas-actions{display:flex;gap:5px;margin-left:auto}
.canvas-actions button{min-height:36px;padding:5px 9px;font-size:11px}
.focus-toolbar,.focus-bottom{display:none}
body.ladder-expanded{overflow:hidden;overscroll-behavior:none}
.ladder-expanded #editor{height:100dvh;overflow:hidden}
.ladder-expanded .topbar,.ladder-expanded .transferbar,.ladder-expanded .menubar,.ladder-expanded .toolbox,.ladder-expanded .monitor-pane,.ladder-expanded .rowbar,.ladder-expanded footer,.ladder-expanded #errors,.ladder-expanded .canvas-heading{display:none}
.ladder-expanded .workspace{flex:1;min-height:0;border:0}
.ladder-expanded .canvas-pane{min-height:0}
.ladder-expanded #canvas-scroll{min-height:0;scrollbar-width:none;cursor:grab}
.ladder-expanded #canvas-scroll::-webkit-scrollbar{display:none}
#canvas-scroll.is-panning,#canvas-scroll.is-panning .cell{cursor:grabbing}
.ladder-expanded .focus-toolbar{display:flex;align-items:center;justify-content:space-between;gap:6px;padding:7px max(8px,env(safe-area-inset-right)) 7px max(8px,env(safe-area-inset-left));background:#192b3b;border-bottom:1px solid #385269;flex:none}
.focus-toolbar button,.focus-bottom button{min-height:44px}
.focus-zoom{display:flex;align-items:center;gap:3px}
.focus-zoom button{width:38px;padding:4px;font-size:18px}
.focus-zoom output{min-width:37px;text-align:center;font-size:11px;color:#b7d8ed}
.ladder-expanded .focus-bottom{display:flex;align-items:center;gap:6px;flex:none;padding:5px 8px;background:#192b3b;border-top:1px solid #385269}
#focus-status{font-size:11px;color:#b7c9da;line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
.cell-choices{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px;margin-top:14px}
.cell-choices button{min-width:0;min-height:62px;padding:7px 2px;display:flex;flex-direction:column;justify-content:center;gap:5px;align-items:center}
.cell-choices b{font:18px monospace}
.cell-choices small{font-size:11px}
.cell-row-actions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin-top:12px}
.cell-row-actions button{font-size:11px;white-space:normal;min-height:44px;padding:6px}
#cell-menu-position{margin:9px 0;font-size:12px}
#edit-existing{width:100%;min-height:44px}
.cell-more{margin-top:14px}
.cell-more summary{padding:6px 0}
#simple-test-dialog{width:580px;padding:0;overflow:hidden}
#simple-test-dialog[open]{display:flex;flex-direction:column}
#simple-test-dialog>.dialog-heading{padding:18px 18px 0;flex:none}
#simple-test-dialog .dialog-heading>div{min-width:0}
#simple-test-dialog .simple-subtitle{font-size:11px;margin:6px 0 0;line-height:1.5}
.simple-controls{display:flex;gap:6px;align-items:center;flex-wrap:wrap;padding:13px 18px;flex:none;border-bottom:1px solid var(--line)}
.simple-controls button{min-height:42px;font-size:12px;padding:7px 9px}
.simple-controls .badge{margin-right:auto;font-size:11px}
.simple-body{overflow:auto;min-height:0;padding:0 18px 12px}
.simple-body h3{font-size:14px;margin:18px 0 10px;display:flex;justify-content:space-between;align-items:center}
.simple-body h3 small{font-size:11px;font-weight:400;color:var(--muted)}
.simple-io-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.simple-io{min-width:0;min-height:90px;border:1px solid #43586a;border-radius:10px;background:#223344;color:#c5d5e4;padding:10px 4px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:4px}
.simple-io strong{font:700 17px ui-monospace,Consolas,monospace}
.simple-io small{font-size:10px;color:#99afc2}
.simple-io .io-state{font:700 10px system-ui;letter-spacing:.8px;color:#9fb1c0}
.simple-io.on{background:#114b38;border-color:#53d29d;color:#c0ffe0;box-shadow:inset 0 0 0 1px #53d29d40}
.simple-io.on .io-state{color:#8af1bc}
.lamp-dot{width:20px;height:20px;border-radius:50%;background:#3c4d5e;border:2px solid #566b7b;box-shadow:inset 0 2px 4px #0006}
.simple-io.on .lamp-dot{background:#74f2a8;border-color:#b5ffd1;box-shadow:0 0 13px #5beba780}
.simple-empty{grid-column:1/-1;padding:15px;border:1px dashed #425467;border-radius:8px;color:var(--muted);font-size:12px;text-align:center}
#simple-message{flex:none;padding:9px 18px;margin:0;font-size:11px;line-height:1.5;border-top:1px solid var(--line);overflow-wrap:anywhere;max-height:82px;overflow:auto}
.simple-footer{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 18px;background:#15222e;flex:none}
.simple-footer span{color:var(--muted);font-size:10px}
.simple-footer button{font-size:12px;min-height:42px}
#simple-notes{font-size:11px;overflow-wrap:anywhere}
@media(max-width:440px){.canvas-heading #cursor{display:none}.focus-toolbar{font-size:12px}.focus-toolbar button{padding:6px 9px}.focus-zoom button{padding:4px}.simple-io-grid{gap:6px}.simple-io strong{font-size:16px}.simple-controls{gap:4px;padding:10px 12px}.simple-body{padding:0 12px 10px}.simple-controls button{font-size:11px;padding:6px 8px}.simple-footer{padding:10px 12px}}
@media(max-height:520px){.ladder-expanded .focus-toolbar{padding-top:3px;padding-bottom:3px}.ladder-expanded .focus-bottom{padding:3px 8px}.focus-bottom button{min-height:36px}.simple-io{min-height:74px}.simple-controls{padding-top:6px;padding-bottom:6px}#simple-test-dialog>.dialog-heading{padding-top:10px}}