diff --git a/CLAUDE.md b/CLAUDE.md
index 7501ed9d6dc..cb51877fe27 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -1735,6 +1735,10 @@ bootstrap-subset → theme-styles.styl の順で `/css/site.css` に連結する
   - 帯までの空きは `.article-appendix` の `margin-top` の1箇所で決める。共有ボタンの下 padding と
     著者紹介の `margin-bottom` を落として、著者紹介の有無で空きが変わらないようにした
     （以前は 48px と 67.5px でばらついていた）
+    - **共有ボタンの `ul` が Bootstrap の既定で持つ下 1rem と、サイドバーの `padding-bottom`
+      40px もここに上乗せされていた**（#3227。375px で 112px、1280px で 72px）。1024px 以下では
+      目次が消えて中身が空でも padding だけが本文と帯の間に残る。前者は `.social-area` の中で
+      落とし、後者は `.footer-gap` と同じ `:has(+ .article-appendix)` で落とす
   - 短いページでは `.wrap > footer` の `margin-top: auto` が帯とネイビーの間に白を入れるので、
     余りは帯より前（本文の `container`）で吸わせる
   - 残っている難点: 中身がコンテナ幅（約1,116px）になるぶん、関連記事の行のタイトル占有率が
diff --git a/themes/future/css-src/theme-styles.styl b/themes/future/css-src/theme-styles.styl
index 2606bbe556c..cbf51851222 100644
--- a/themes/future/css-src/theme-styles.styl
+++ b/themes/future/css-src/theme-styles.styl
@@ -1023,6 +1023,8 @@ Header and header elements
   font-size: text-base;
   display: inline-block;
 }
+/* サイドバーがフッター直前に来るとき（1024px 以下で本文の下に落ちたとき・
+   2列で本文より長いとき）のフッター前の空き。帯が続くときは下で落とす (#3227) */
 .blog-sidebar {
   padding-bottom: 40px;
 }
@@ -1957,6 +1959,11 @@ summary:focus-visible,
 .social-area {
 	padding: 16px 0 0;
 }
+/* ul は Bootstrap の既定で下に 1rem 持つ。著者紹介との間は .author-box の
+   margin-top が持つので、ここに残すと帯までの空きに上乗せされる (#3227) */
+.social-area .social-button {
+  margin-bottom: 0;
+}
 
 .img-frame-line {
   border: 1px solid var(--rule-base);
@@ -5070,6 +5077,11 @@ a.award-badge:focus {
 .wrap > .container:has(+ .article-appendix) .footer-gap {
   margin-bottom: 0;
 }
+/* サイドバーの下の空きも同じ。1024px 以下では目次が消えて中身が空でも
+   padding だけが本文と帯の間に残る (#3227) */
+.wrap > .container:has(+ .article-appendix) .blog-sidebar {
+  padding-bottom: 0;
+}
 
 /* タブ。JS を使わず radio + label で切り替えている。