events: 月別アーカイブをカード表示に

文字だけのリンク一覧だった月別・年度別アーカイブを、年度ごとの枠と
月ごとのボタン（件数付き）に変えた。

1 files changed, 39 insertions, 25 deletions

diff --git a/src/styles/custom.css b/src/styles/custom.css
index 668e922..e100625 100644
--- a/src/styles/custom.css
+++ b/src/styles/custom.css
@@ -2254,38 +2254,52 @@ td.sanpi-open .sanpi-title {
   font-size: 0.88rem;
   line-height: 1.7;
 }
-.schedule-month-archive {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 0.4rem 1.2rem;
-  margin: 0.6rem 0 1.2rem;
+.schedule-archive {
+  display: grid;
+  gap: 0.9rem;
+  margin: 1rem 0 1.4rem;
+}
+.schedule-archive-year {
+  padding: 0.9rem 1rem 1rem;
+  border: 1px solid var(--sl-color-gray-5);
+  border-radius: 0.7rem;
+  background: var(--sl-color-gray-6);
+}
+.schedule-archive-year-title {
+  margin: 0 0 0.7rem;
+  font-size: 1rem;
+  line-height: 1.5;
+}
+.schedule-archive-months {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
+  gap: 0.5rem;
+  margin: 0;
   padding: 0;
   list-style: none;
 }
-.schedule-month-archive li {
+.schedule-archive-months a {
   display: flex;
   align-items: baseline;
-  gap: 0.35rem;
-}
-.schedule-month-count {
-  color: var(--sl-color-gray-3);
-  font-size: 0.8rem;
-}
-.schedule-year-archive {
-  display: block;
-  width: 100%;
-  margin: 0 0 0.6rem;
+  justify-content: space-between;
+  gap: 0.4rem;
+  padding: 0.5rem 0.7rem;
+  border: 1px solid var(--sl-color-gray-5);
+  border-radius: 0.5rem;
+  background: var(--sl-color-bg);
+  color: var(--sl-color-text);
+  font-size: 0.9rem;
+  line-height: 1.4;
+  text-decoration: none;
 }
-.schedule-year-archive > a {
-  font-weight: 600;
+.schedule-archive-months a:hover {
+  border-color: var(--sl-color-accent);
+  background: var(--sl-color-gray-5);
 }
-.schedule-year-archive > ul {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 0.4rem 1.2rem;
-  margin: 0.35rem 0 0;
-  padding: 0 0 0 1rem;
-  list-style: none;
+.schedule-archive-count {
+  color: var(--sl-color-gray-3);
+  font-size: 0.78rem;
+  white-space: nowrap;
 }
 .schedule-month-nav {
   display: flex;