:root { --bg:#f7f8fa; --panel:#fff; --text:#1d2330; --muted:#6b7385; --line:#dfe3ea; --accent:#2f6fed; --up:#1f9d55; --down:#c0392b; --warn:#e8890c; }
@media (prefers-color-scheme: dark) {
  :root { --bg:#12151c; --panel:#1a1e28; --text:#e3e7ef; --muted:#8b93a7; --line:#2b3140; --accent:#6c9bff; --up:#4fc77f; --down:#ef6b5b; --warn:#f0a23c; }
}
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--text); font:14px/1.5 system-ui,-apple-system,"Noto Sans KR",sans-serif; }
header { display:flex; align-items:center; gap:12px; padding:12px 24px; background:var(--panel); border-bottom:1px solid var(--line); }
h1 { font-size:18px; margin:0; }
h2 { font-size:15px; margin:24px 0 8px; }
.spacer { flex:1; }
.muted { color:var(--muted); font-size:12px; font-weight:400; }
#q { flex:0 1 360px; padding:6px 10px; border:1px solid var(--line); border-radius:6px; background:var(--bg); color:var(--text); font:inherit; }
main { max-width:1100px; margin:0 auto; padding:16px 24px 48px; }
#cats { display:flex; gap:6px; flex-wrap:wrap; }
.chip, .cat { padding:3px 12px; border:1px solid var(--line); border-radius:14px; background:var(--panel); color:var(--text); font:inherit; cursor:pointer; text-decoration:none; }
.cat.on { background:var(--accent); border-color:var(--accent); color:#fff; }
.chip:hover, .cat:hover { border-color:var(--accent); }
.chip small { color:var(--muted); margin-left:4px; }
.chips { display:flex; flex-wrap:wrap; gap:6px; }
.grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:12px; }
.card { background:var(--panel); border:1px solid var(--line); border-radius:8px; padding:14px 16px; display:flex; flex-direction:column; gap:6px; }
.card h3 { margin:0; font-size:15px; display:flex; align-items:center; gap:8px; }
.card p { margin:0; color:var(--muted); flex:1; }
.dot { width:10px; height:10px; border-radius:50%; background:var(--muted); flex:none; }
.up .dot { background:var(--up); } .down .dot { background:var(--down); } .error .dot { background:var(--warn); }
.card .row { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.card .st { font-size:12px; color:var(--muted); margin-left:auto; }
.btn { padding:4px 12px; border:1px solid var(--accent); border-radius:6px; color:var(--accent); text-decoration:none; }
.btn:hover { background:var(--accent); color:#fff; }
.card.down .btn { opacity:.5; }
@media (max-width:600px) { main, header { padding-left:16px; padding-right:16px; } }
[hidden] { display:none !important; }
#gate { display:flex; justify-content:center; padding:96px 16px; }
#loginform { display:flex; flex-direction:column; gap:10px; width:260px; padding:20px; background:var(--panel); border:1px solid var(--line); border-radius:8px; }
#loginform h2 { margin:0; }
#loginform p { margin:0; min-height:18px; color:var(--down); }
#loginform input[type="password"] { padding:6px 10px; border:1px solid var(--line); border-radius:6px; background:var(--bg); color:var(--text); font:inherit; }
#loginform .remember { display:flex; align-items:center; gap:6px; font-size:12px; cursor:pointer; }
#remember { margin:0; accent-color:var(--accent); }
button.btn { background:transparent; font:inherit; cursor:pointer; }
button.btn:hover:not(:disabled) { background:var(--accent); color:#fff; }
button.btn:disabled { opacity:.4; cursor:wait; }
.btn.ctl.stop { border-color:var(--down); color:var(--down); }
.btn.ctl.stop:hover:not(:disabled) { background:var(--down); color:#fff; }
.btn.ctl.start { border-color:var(--up); color:var(--up); }
.btn.ctl.start:hover:not(:disabled) { background:var(--up); color:#fff; }
.job { font-size:12px; }
.job.run { color:var(--warn); }
.job.fail { color:var(--down); overflow-wrap:anywhere; }
.grip { margin-left:auto; padding:0 4px; border:0; border-radius:4px; background:none; color:var(--muted); font:inherit; line-height:1; cursor:grab; touch-action:none; }
.grip:hover, .grip:focus-visible { color:var(--accent); }
.card.dragging { opacity:.55; outline:2px dashed var(--accent); outline-offset:2px; }
body.dragging, body.dragging * { cursor:grabbing !important; user-select:none; }