:root{color-scheme:light dark;--t-bg:#ffffff;--t-surface:#f6f8fa;--t-raised:#eaeef2;--t-fg:#1f2328;--t-muted:#5a6169;--t-line:#d0d7de;--t-accent:#0a5fbd;--t-ok:#1a7f37;--t-warn:#7a5300;--t-bad:#cf222e;}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--t-bg:#0d1017;--t-surface:#161b22;--t-raised:#21262d;--t-fg:#e6edf3;--t-muted:#9aa7b2;--t-line:#30363d;--t-accent:#6cb6ff;--t-ok:#6fd58f;--t-warn:#e3b341;--t-bad:#ff8080;}}
:root[data-theme=dark]{--t-bg:#0d1017;--t-surface:#161b22;--t-raised:#21262d;--t-fg:#e6edf3;--t-muted:#9aa7b2;--t-line:#30363d;--t-accent:#6cb6ff;--t-ok:#6fd58f;--t-warn:#e3b341;--t-bad:#ff8080;} :root[data-theme=light]{--t-bg:#ffffff;--t-surface:#f6f8fa;--t-raised:#eaeef2;--t-fg:#1f2328;--t-muted:#5a6169;--t-line:#d0d7de;--t-accent:#0a5fbd;--t-ok:#1a7f37;--t-warn:#7a5300;--t-bad:#cf222e;}
:root{--bg:var(--t-bg);--fg:var(--t-fg);--line:var(--t-line);--acc:var(--t-accent);--face:var(--t-surface);--face2:var(--t-raised);--dfg:var(--t-fg);
 --r:10px;--rs:calc(10px/2);--sp:8px;--ln:1px;--mo:120ms;--shadow:0 8px 28px color-mix(in srgb,var(--t-bg) 70%,transparent)}
body{font:14px/1.45 Noto Sans KR, sans-serif;background:var(--t-bg);color:var(--t-fg);padding:0 var(--sp) var(--sp)}
#caption{background:var(--t-surface);color:var(--t-fg);font-weight:600;padding:calc(var(--sp)*1.25) calc(var(--sp)*2);margin:0 calc(var(--sp)*-1);border-bottom:var(--ln) solid var(--t-line)}
#menubar{background:var(--t-surface);margin:0 calc(var(--sp)*-1);padding:calc(var(--sp)/2) var(--sp);border-bottom:var(--ln) solid var(--t-line);gap:calc(var(--sp)/2)}
.mtop>button{padding:calc(var(--sp)*.75) calc(var(--sp)*1.5);border-radius:var(--rs);color:var(--t-fg);transition:background var(--mo),color var(--mo)}
.mtop>button:hover:not(:disabled),.mtop.open>button{background:var(--t-raised);color:var(--t-accent)}
.drop{background:var(--t-raised);color:var(--t-fg);border:var(--ln) solid var(--t-line);border-radius:var(--r);box-shadow:var(--shadow);padding:calc(var(--sp)/2)}
.mi{color:var(--t-fg);border-radius:var(--rs);padding:calc(var(--sp)*.6) var(--sp)}
.mi:hover{background:var(--t-accent);color:var(--t-bg)} .mi:disabled:hover{background:transparent;color:var(--t-fg)} .mi .ky{color:var(--t-muted);opacity:1}
#editor,#look{background:var(--t-raised);color:var(--t-fg);border:var(--ln) solid var(--t-line);border-radius:var(--rs);padding:calc(var(--sp)/2) var(--sp)}
#bars{gap:calc(var(--sp)/2);padding:var(--sp) 0;border-bottom:var(--ln) solid var(--t-line)}
.tb{background:var(--t-surface);border:var(--ln) solid var(--t-line);border-radius:var(--r);padding:calc(var(--sp)/2);gap:2px}
.tbb{background:var(--t-raised);border:var(--ln) solid transparent;border-radius:var(--rs);box-shadow:none;transition:border-color var(--mo),background var(--mo)}
.tbb:hover:not(:disabled){border-color:var(--t-accent)}
.tbb:active:not(:disabled),.tbb[aria-pressed=true]{background:color-mix(in srgb,var(--t-accent) 35%,var(--t-raised));border-color:var(--t-accent);box-shadow:none}
#cmdbar{background:var(--t-surface);color:var(--t-fg);border:var(--ln) solid var(--t-line);border-radius:var(--r);margin-top:var(--sp);padding:var(--sp);gap:var(--sp)}
#cmdbar .cl,#linep{color:var(--t-muted)}
#cmdbar .box,#cmd{background:var(--t-bg);color:var(--t-fg);border:var(--ln) solid var(--t-line);border-radius:var(--rs);padding:calc(var(--sp)/2) var(--sp)}
#cmd:focus{outline:none;border-color:var(--t-accent)}
#cmdbar>button,.dlg .flow button,.dlg .cli button{background:var(--t-raised);color:var(--t-fg);border:var(--ln) solid var(--t-line);border-radius:var(--rs)}
#cmdbar>button{padding:calc(var(--sp)/2) calc(var(--sp)*1.5)}
#cmdbar>button:hover,.dlg button:hover{border-color:var(--t-accent)}
.row{gap:var(--sp) calc(var(--sp)*2);margin-top:var(--sp)}
#v{border:var(--ln) solid var(--t-line);border-radius:var(--r)}
table{font-size:12px;background:var(--t-surface);border-radius:var(--r);overflow:hidden}
td,th{border:0;border-bottom:var(--ln) solid var(--t-line);padding:calc(var(--sp)/2) var(--sp)}
th{color:var(--t-muted);font-weight:600;background:var(--t-raised)} tr.sel{background:color-mix(in srgb,var(--t-accent) 22%,transparent)}
#status{gap:var(--sp);margin-top:var(--sp);font-size:12px}
#status>*{background:var(--t-surface);color:var(--t-fg);border:var(--ln) solid var(--t-line);border-radius:var(--rs);padding:calc(var(--sp)/2) var(--sp)}
#msg{color:var(--t-fg)} .ind{color:var(--t-muted)}
#modal{background:color-mix(in srgb,var(--t-bg) 55%,transparent);backdrop-filter:blur(2px)}
.dlg{background:var(--t-surface);color:var(--t-fg);border:var(--ln) solid var(--t-line);border-radius:var(--r);box-shadow:var(--shadow);overflow:hidden}
.dlg .cap{background:var(--t-raised);color:var(--t-fg);padding:var(--sp) calc(var(--sp)*1.5);border-bottom:var(--ln) solid var(--t-line)}
.dlg .cli input[type=text],.dlg .cli select,.dlg .flow input,.dlg .pal input,.dlg .flow select{background:var(--t-bg);color:var(--t-fg);border:var(--ln) solid var(--t-line);border-radius:var(--rs)}
.dlg .cli .grp{border-color:var(--t-line)} .dlg .cli .grp>span{background:var(--t-surface)} .dlg .cli .frm{border-color:var(--t-line)}
.dlg .pal ul{background:var(--t-bg);border:var(--ln) solid var(--t-line);border-radius:var(--rs)} .dlg .pal li[aria-selected=true]{background:var(--t-accent);color:var(--t-bg)}
#files{background:var(--t-surface);color:var(--t-fg);border:var(--ln) solid var(--t-line);border-radius:var(--r);box-shadow:var(--shadow);padding:var(--sp) calc(var(--sp)*1.5)}
#files .up,#files a{color:var(--t-accent)} #files .hint{color:var(--t-muted)}
#boot{background:var(--t-surface);color:var(--t-fg);border:var(--ln) solid var(--t-line);border-radius:var(--r);box-shadow:var(--shadow)}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]) .tbb img{filter:invert(1) hue-rotate(180deg)}}
:root[data-theme=dark] .tbb img{filter:invert(1) hue-rotate(180deg)}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}