:root{--bg:#101418;--card:#1a2027;--line:#2a333d;--fg:#e7edf3;--dim:#8b98a5;--acc:#4ea1ff;
--open:#3fb950;--closed:#8b98a5;--new:#f0883e}
@media(prefers-color-scheme:light){:root{--bg:#f5f7fa;--card:#fff;--line:#dde3ea;--fg:#1f2328;
--dim:#59636e;--acc:#0969da;--open:#1a7f37;--closed:#59636e;--new:#bc4c00}}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--fg);
font:15px/1.6 -apple-system,'Segoe UI','Noto Sans KR',sans-serif}
.top{max-width:1060px;margin:0 auto;padding:36px 20px 8px}
.top h1{margin:0 0 4px;font-size:26px}
.tagline{margin:0 0 20px;color:var(--dim)}
.controls{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
#search{flex:1;min-width:220px;background:var(--card);border:1px solid var(--line);border-radius:10px;
color:var(--fg);padding:10px 14px;font-size:14px}
#search:focus{outline:2px solid var(--acc);outline-offset:-1px}
.filters{display:flex;gap:6px}
.f{background:transparent;border:1px solid var(--line);border-radius:999px;color:var(--dim);
padding:7px 14px;font-size:13px;cursor:pointer}
.f.on{border-color:var(--acc);color:var(--acc);font-weight:600}
#grid{max-width:1060px;margin:20px auto 40px;padding:0 20px;display:grid;
grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px}
.card{display:block;background:var(--card);border:1px solid var(--line);border-radius:14px;
padding:16px 18px;text-decoration:none;color:inherit;transition:border-color .15s,transform .15s}
.card:hover{border-color:var(--acc);transform:translateY(-2px)}
.card h2{margin:8px 0 6px;font-size:16.5px;line-height:1.4}
.card p{margin:0 0 10px;color:var(--dim);font-size:13.5px;
display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.card .meta{color:var(--dim);font-size:12px}
.badges{display:flex;gap:6px;flex-wrap:wrap}
.badge{font-size:11px;font-weight:600;padding:2px 9px;border-radius:999px;border:1px solid var(--line)}
.badge.open{color:var(--open);border-color:var(--open)}
.badge.closed{color:var(--closed)}
.badge.skill{color:var(--acc);border-color:var(--acc)}
.badge.proj{color:var(--fg)}
.badge.new{color:var(--new);border-color:var(--new)}
.empty{grid-column:1/-1;text-align:center;color:var(--dim);padding:60px 0}
footer{max-width:1060px;margin:0 auto;padding:0 20px 40px;color:var(--dim);font-size:13px}