/* トップページ専用。色などのトークンは ../shared/theme.css を使う */
body{overflow:auto;display:block;min-height:100%}
.wrap{max-width:960px;margin:0 auto;padding:48px 20px 64px}
.wrap h1{font-size:32px;font-weight:500;margin:0 0 8px;color:var(--p)}
.wrap>p{margin:0 0 32px;color:var(--onv);max-width:60ch}
#grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px}
.card{display:flex;flex-direction:column;gap:8px;padding:20px;border:1px solid var(--olv);border-radius:20px;background:var(--sf);color:var(--on);text-decoration:none;position:relative;overflow:hidden;transition:border-color .2s}
.card::before{content:'';position:absolute;inset:0;background:var(--p);opacity:0;transition:opacity .2s}
.card:hover{border-color:var(--p)}.card:hover::before{opacity:.06}
.card:focus-visible{outline:2px solid var(--p);outline-offset:2px}
.card .ms{font-size:32px;width:32px;height:32px;color:var(--p)}
.card h2{margin:0;font-size:22px;font-weight:500}.card .sb{color:var(--onv);font-size:13px}
.card .ds{color:var(--onv);flex:1}.tags{display:flex;gap:6px;flex-wrap:wrap}
.card>*{position:relative}
.empty{padding:24px;border:1px dashed var(--ol);border-radius:16px;color:var(--onv)}
@media(prefers-reduced-motion:reduce){.card,.card::before{transition:none}}