:root{ --navy:#0b1220; --blue:#2f6fed; --ink:#10182b; --ink-soft:#4a5570; --line:#e4e8f2; --bg:#f5f7fb; }
*{box-sizing:border-box;}
body{ margin:0; font-family:-apple-system,BlinkMacSystemFont,"Pretendard","Apple SD Gothic Neo",sans-serif; background:var(--bg); color:var(--ink); }
.site-header{ background:var(--navy); color:#fff; padding:16px 24px; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px; }
.brand{ font-weight:800; font-size:20px; }
.brand span{ color:#6b9bff; }
#nav button{ background:transparent; border:1px solid #2a3552; color:#c7d2ea; padding:6px 12px; border-radius:999px; margin-left:4px; cursor:pointer; }
#nav button.active{ background:var(--blue); color:#fff; }
main{ max-width:1080px; margin:0 auto; padding:24px; }
.grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:16px; }
.card{ background:#fff; border:1px solid var(--line); border-radius:12px; overflow:hidden; text-decoration:none; color:inherit; display:block; }
.card img{ width:100%; height:140px; object-fit:cover; display:block; }
.card-body{ padding:14px; }
.card h3{ font-size:15px; margin:6px 0; }
.card p{ font-size:12.5px; color:var(--ink-soft); }
.tag{ font-size:10px; font-weight:700; color:var(--blue); }
.meta{ font-size:11px; color:#8b96b3; display:flex; justify-content:space-between; margin-top:6px; }
footer{ max-width:1080px; margin:0 auto; padding:24px; font-size:12px; color:var(--ink-soft); }