/* =====================================================================
   スグやるゾウ ホームページ  css/links.css（リンク集ページ用）
   共通の見た目は css/style.css、ページ上部の見た目は css/gallery.css を使います。
   ===================================================================== */
body[data-page="links"]{--g-accent:var(--sy-mint);--g-tint:#E3EFE8}

.l-filter{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 28px}
.l-filter button{border:2px solid var(--sy-ink);background:var(--sy-paper);color:var(--sy-ink);border-radius:999px;padding:6px 16px;font-weight:700;cursor:pointer;font-family:inherit}
.l-filter button:hover{background:#fff}
.l-filter button[aria-pressed="true"]{background:var(--sy-ink);color:#fff}

.l-cat{margin:0 0 40px}
.l-cat-title{font-weight:900;font-size:clamp(20px,2.4vw,26px);margin:0 0 14px;display:flex;align-items:baseline;gap:10px}
.l-cat-title small{font-size:13px;font-weight:700;color:var(--sy-muted)}
.l-grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}

.l-card{border:2px solid var(--sy-ink);border-radius:16px;background:var(--g-tint);padding:16px 18px;text-decoration:none;color:var(--sy-ink);display:flex;flex-direction:column;gap:6px;transition:transform .15s,box-shadow .15s}
.l-card:hover{transform:translate(-3px,-3px);box-shadow:5px 5px 0 var(--sy-ink);color:var(--sy-ink)}
.l-top{display:flex;gap:8px;align-items:flex-start;justify-content:space-between}
.l-title{font-weight:900;line-height:1.4}
.l-top .badge-sy{flex:none;white-space:nowrap}
.l-desc{font-size:14px;line-height:1.7}
.l-host{font-size:12px;color:var(--sy-muted);margin-top:auto;word-break:break-all}
.l-empty{border:2px dashed #8E9693;border-radius:18px;padding:40px 20px;text-align:center;color:var(--sy-muted)}
@media (prefers-reduced-motion:reduce){.l-card{transition:none}.l-card:hover{transform:none}}