:root{ --gap:12px; --card-bg:#fff; --border:#e5e7eb; --text:#111827; --muted:#6b7280; --accent:#2563eb; }
*{ box-sizing:border-box; }
body{ font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif; margin:0; color:var(--text); background:#f8fafc; }
.container{ max-width:1000px; margin:20px auto; padding:0 16px; }
h2{ margin:8px 0 16px; }
.grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:var(--gap); }
.card{ background:var(--card-bg); border:1px solid var(--border); border-radius:12px; padding:10px; display:flex; flex-direction:column; gap:8px; box-shadow:0 2px 10px rgba(0,0,0,.04); }
.card img{ width:100%; height:240px; object-fit:cover; border-radius:8px; background:#eee; }
.card button{ padding:10px 12px; border:none; border-radius:8px; background:var(--accent); color:#fff; cursor:pointer; }
.notice{ background:#ecfeff; border:1px solid #a5f3fc; border-radius:10px; padding:10px; margin-bottom:12px; }
label{ display:block; margin:.4rem 0 .2rem; }
input,select,button{ font:inherit; }
form input, form select{ width:100%; padding:.6rem .7rem; border:1px solid var(--border); border-radius:10px; background:#fff; }
form button{ margin-top:.6rem; }