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

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

3 files changed, 56 insertions, 36 deletions

diff --git a/src/components/ScheduleMonthLinks.astro b/src/components/ScheduleMonthLinks.astro
index 9f553df..adf3b32 100644
--- a/src/components/ScheduleMonthLinks.astro
+++ b/src/components/ScheduleMonthLinks.astro
@@ -17,20 +17,24 @@ const groups = fiscalYearKeys.map((fy) => ({
 }));
 ---
 
-<ul class="schedule-month-archive">
+<div class="schedule-archive">
   {
     groups.map((group) => (
-      <li class="schedule-year-archive">
-        <a href={scheduleUrl(`${group.key}/`)}>{group.label}の予定</a>
-        <ul>
+      <section class="schedule-archive-year">
+        <h3 class="schedule-archive-year-title">
+          <a href={scheduleUrl(`${group.key}/`)}>{group.label}の予定</a>
+        </h3>
+        <ul class="schedule-archive-months">
           {group.months.map((key) => (
             <li>
-              <a href={scheduleUrl(`${key}/`)}>{monthLabel(key)}の予定</a>
-              <span class="schedule-month-count">{monthCounts[key]}件</span>
+              <a href={scheduleUrl(`${key}/`)}>
+                <span>{monthLabel(key)}</span>
+                <span class="schedule-archive-count">{monthCounts[key]}件</span>
+              </a>
             </li>
           ))}
         </ul>
-      </li>
+      </section>
     ))
   }
-</ul>
+</div>
diff --git a/src/pages/kodaira/events/[period].astro b/src/pages/kodaira/events/[period].astro
index 084760c..701d9e3 100644
--- a/src/pages/kodaira/events/[period].astro
+++ b/src/pages/kodaira/events/[period].astro
@@ -97,11 +97,13 @@ const description = isAllPast
 
   {
     kind === 'fiscal' && (
-      <ul class="schedule-month-archive">
+      <ul class="schedule-archive-months">
         {months.map((month) => (
           <li>
-            <a href={url(month)}>{monthLabel(month)}の予定</a>
-            <span class="schedule-month-count">{monthCounts[month]}件</span>
+            <a href={url(month)}>
+              <span>{monthLabel(month)}</span>
+              <span class="schedule-archive-count">{monthCounts[month]}件</span>
+            </a>
           </li>
         ))}
       </ul>
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;