:root { --bg:#f4f6f8; --ink:#14212b; --muted:#4a6477; --card:#fff; --line:#d4dbe2; --ok:#0b7a48; --warn:#9f1239; }
* { box-sizing:border-box; }
body { margin:0; font-family:"Segoe UI","Trebuchet MS",sans-serif; color:var(--ink); background:linear-gradient(180deg,#e9f2fa 0,#f4f6f8 45%); }
.container { width:min(1200px,94vw); margin:0 auto; padding:22px 0 44px; }
header h1 { margin:0; font-size:2rem; }
header p { margin:.55rem 0 0; color:var(--muted); }
.notice { margin-top:12px; padding:10px 12px; border:1px solid var(--line); background:#fff; border-radius:10px; color:#2f4354; }
.grid { margin-top:18px; display:grid; gap:16px; }
.grid.sections { grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); }
.grid.items { grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); }
.card { display:block; text-decoration:none; background:var(--card); border:1px solid var(--line); border-radius:14px; overflow:hidden; box-shadow:0 8px 20px rgba(17,39,57,.08); }
.card:hover { transform:translateY(-2px); transition:120ms ease; }
.card.locked { opacity:.95; }
.thumb { width:100%; aspect-ratio:16/9; object-fit:cover; display:block; }
.content { padding:12px 13px 14px; }
.content h2,.content h3 { margin:0; font-size:1rem; line-height:1.35; }
.meta { margin-top:8px; font-size:.9rem; color:var(--muted); }
.badge { display:inline-block; margin-top:8px; padding:4px 8px; border-radius:999px; font-size:.75rem; font-weight:700; letter-spacing:.02em; }
.badge.ok { background:#dcfce7; color:var(--ok); }
.badge.lock { background:#ffe4e6; color:var(--warn); }
.topbar { display:flex; justify-content:space-between; align-items:baseline; gap:10px; }
.back { color:#0f5f91; text-decoration:none; font-weight:600; }
@media (max-width:640px) { .grid.items { grid-template-columns:1fr; } }