:root { --bg:#f4f5f7; --card:#fff; --ink:#1d2330; --muted:#6b7385; --line:#dfe3ea; --brand:#1f4fd8; --danger:#c62828; --ok:#1b7f3b; --warn:#b26a00; }
* { box-sizing: border-box; }
body { margin:0; font:14px/1.5 system-ui,-apple-system,"Segoe UI","Noto Sans KR",sans-serif; color:var(--ink); background:var(--bg); }
a { color:var(--brand); text-decoration:none; } a:hover { text-decoration:underline; }
.top { display:flex; align-items:center; gap:20px; padding:10px 20px; background:#101828; color:#fff; flex-wrap:wrap; }
.top .brand { color:#fff; font-weight:700; }
.top nav { display:flex; gap:4px; flex:1; flex-wrap:wrap; }
.top nav a { color:#c9d1e3; padding:6px 10px; border-radius:6px; }
.top nav a.on, .top nav a:hover { background:#24304a; color:#fff; text-decoration:none; }
.who { display:flex; align-items:center; gap:10px; color:#c9d1e3; }
.who select { background:#24304a; color:#fff; border:1px solid #3a4866; border-radius:6px; padding:4px 6px; }
main { max-width:1280px; margin:20px auto; padding:0 20px; }
body.bare main { max-width:420px; margin-top:12vh; }
h1 { font-size:20px; margin:0 0 14px; } h2 { font-size:15px; margin:0 0 10px; } h3 { font-size:14px; margin:14px 0 8px; }
.card { background:var(--card); border:1px solid var(--line); border-radius:10px; padding:16px; margin-bottom:16px; }
.card.narrow { max-width:420px; margin:0 auto; }
.cols { display:grid; grid-template-columns:repeat(auto-fit,minmax(380px,1fr)); gap:16px; }
.grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:14px; }
.stat { display:flex; flex-direction:column; gap:4px; background:var(--card); border:1px solid var(--line); border-radius:10px; padding:16px; color:var(--ink); }
.stat .n { font-size:24px; font-weight:700; } .stat.warn { border-color:var(--warn); background:#fff8ec; }
table { width:100%; border-collapse:collapse; background:var(--card); border:1px solid var(--line); border-radius:10px; overflow:hidden; }
th,td { padding:8px 10px; border-bottom:1px solid var(--line); text-align:left; vertical-align:top; }
th { background:#eef1f6; font-weight:600; white-space:nowrap; } tr:last-child td { border-bottom:0; }
.num { text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; } table.small { font-size:13px; } .mono { font-family:ui-monospace,Menlo,monospace; font-size:12px; word-break:break-all; }
.muted { color:var(--muted); } .big { font-size:20px; font-weight:700; }
dl { display:grid; grid-template-columns:130px 1fr; gap:6px 12px; margin:0; } dt { color:var(--muted); } dd { margin:0; word-break:break-all; }
form.inline { display:inline-flex; gap:6px; align-items:center; margin:0 4px 4px 0; } form.row { display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-bottom:10px; }
form.stack { display:flex; flex-direction:column; gap:10px; max-width:420px; } .filters { display:flex; gap:8px; margin-bottom:12px; flex-wrap:wrap; }
label { display:flex; flex-direction:column; gap:4px; color:var(--muted); font-size:13px; } label.check { flex-direction:row; align-items:center; gap:8px; color:var(--ink); }
input,select { font:inherit; padding:7px 9px; border:1px solid var(--line); border-radius:6px; background:#fff; color:var(--ink); }
input:focus,select:focus { outline:2px solid #9db6ff; }
.btn { display:inline-block; font:inherit; padding:7px 12px; border:1px solid var(--line); border-radius:6px; background:#fff; color:var(--ink); cursor:pointer; }
.btn:hover { background:#f0f2f7; text-decoration:none; } .btn.primary { background:var(--brand); border-color:var(--brand); color:#fff; } .btn.danger { background:var(--danger); border-color:var(--danger); color:#fff; }
.flash { padding:10px 14px; border-radius:8px; margin-bottom:14px; } .flash.ok { background:#e8f6ec; color:var(--ok); border:1px solid #bfe3c9; } .flash.err { background:#fdecec; color:var(--danger); border:1px solid #f3c1c1; }
.tag { display:inline-block; padding:1px 8px; border-radius:10px; font-size:12px; background:#eef1f6; color:#36405a; }
.tag.s-active,.tag.st-completed { background:#e3f4e8; color:var(--ok); } .tag.s-locked,.tag.s-pending,.tag.st-requested,.tag.st-approved { background:#fff1db; color:var(--warn); } .tag.s-banned,.tag.st-rejected { background:#fdecec; color:var(--danger); }
.pager { margin:14px 0; display:flex; gap:10px; align-items:center; } .acts { min-width:260px; } .thumb { max-width:200px; border-radius:8px; margin-top:10px; }