:root{--bg:#fbfaf7;--surface:#fff;--ink:#16181d;--muted:#5b606b;--line:#e4e1d9;--accent:#1d3a63;--accent-soft:#e5ebf4;--radius:14px;color-scheme:light dark}
@media (prefers-color-scheme:dark){:root{--bg:#111318;--surface:#181b22;--ink:#eceef2;--muted:#a3a9b5;--line:#2a2f38;--accent:#9fb9e0;--accent-soft:#1d2839}}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.6 -apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Noto Sans KR",sans-serif}
a{color:var(--accent)}.wrap{max-width:1120px;margin:0 auto;padding:0 16px}
header{border-bottom:1px solid var(--line);padding:14px 0}header .wrap{display:flex;justify-content:space-between;gap:12px;align-items:center;flex-wrap:wrap}
.brand{font-weight:700;text-decoration:none;color:var(--ink)}
h1{font-size:clamp(26px,5vw,38px);line-height:1.25;margin:40px 0 12px}.lead{color:var(--muted);max-width:720px;margin:0 0 8px}
.notes{color:var(--muted);font-size:14px;margin:0 0 28px;padding-left:18px}
.grid{list-style:none;padding:0;margin:0 0 56px;display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column}
.card img{width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;display:block;background:var(--accent-soft)}
.card .body{padding:14px 16px 16px;display:flex;flex-direction:column;gap:6px;flex:1}
.card h2{font-size:17px;line-height:1.4;margin:0}.card p{margin:0;color:var(--muted);font-size:14px}
.tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:auto;padding-top:8px}.tag{font-size:12px;padding:2px 8px;border-radius:999px;background:var(--accent-soft);color:var(--accent)}
.card a.open{font-weight:600;text-decoration:none}.card a.open:focus-visible,.card a.open:hover{text-decoration:underline}
footer{border-top:1px solid var(--line);padding:24px 0 40px;color:var(--muted);font-size:13px}