:root { color-scheme: light; --bg:#fafafa; --fg:#111; --muted:#666; --card:#fff; --line:#eee; }
* { box-sizing: border-box; }
body { margin:0; font-family: system-ui, -apple-system, sans-serif; background:var(--bg); color:var(--fg); }
header { padding:1.25rem 1rem 0.5rem; max-width:1100px; margin:0 auto; }
h1 { margin:0; font-size:1.35rem; font-weight:650; }
.meta { margin:0.35rem 0 0; color:var(--muted); font-size:0.85rem; }
.grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:1rem; padding:1rem; max-width:1100px; margin:0 auto 2rem; }
.card { background:var(--card); border:1px solid var(--line); border-radius:12px; overflow:hidden; display:flex; flex-direction:column; }
.card img { width:100%; aspect-ratio:1/1; object-fit:cover; display:block; background:#f0f0f0; }
.card .body { padding:0.75rem 0.8rem 0.9rem; display:flex; flex-direction:column; gap:0.35rem; }
.card .name { font-size:0.95rem; font-weight:600; line-height:1.25; }
.card .price { font-size:1.15rem; font-weight:700; }
.empty { padding:2rem 1rem; color:var(--muted); }

.card .note { font-size:0.75rem; color:var(--muted); line-height:1.3; font-weight:400; }