記事末の帯までの空きを 56px の1箇所に戻す (#3227)

[ma91n]

Fixes #3227

変更内容

• themes/future/css-src/theme-styles.styl
  • .social-area .social-button { margin-bottom: 0 } を追加。共有ボタンの ul が Bootstrap の既定（dl,ol,ul { margin-bottom: 1rem }）で持つ下 16px を、記事ページの共有ボタンの中で落とす
  • .wrap > .container:has(+ .article-appendix) .blog-sidebar { padding-bottom: 0 } を追加。帯が続くときはサイドバーの padding-bottom 40px を落とす（特設ページの個別コンテンツには "We're Hiring" を追加する #3141 で .footer-gap を落としているのと同じ形）
  • .blog-sidebar { padding-bottom: 40px } に役のコメントを付けた（metronic 由来で無コメントだった）
• CLAUDE.md の 記事末の自動生成ブロックを本文従属のものと切り分ける #2874 の節に、再発の経路と直し方を足した

判断した点

• 共有ボタンの 16px は .social-area の中だけで落とす。 一覧カードは .article-card .social-button が既に 0 にしている。ul.social-button に一律で書くと部品ギャラリーの見本にも及ぶので、記事ページの器に絞った。著者紹介との 16px は .author-box の margin-top が持っているので、そちらの空きは変わらない
• サイドバーの 40px は帯が続くときだけ落とす。 この padding はサイドバーがフッター直前に来るとき（1024px 以下で本文の下に落ちたとき・2列で本文より長いとき）のフッター前の空きで、一覧ページ・帯の無い特設ページではいまも効いている。全部落とすとそれらのフッター前が 40px 詰まるので、:has(+ .article-appendix) で帯のあるページ（記事・career: true の特設）に限った
• 帯を持つ特設（スタイルガイドなど）も同じ経路で 1024px 以下が 96px になっていたので、同時に 56px になる

実測（getBoundingClientRect、before は変更前の site.css を差し替えて同じサーバで計測）

共有ボタン（著者紹介があればその下端）→ 帯の上端:

ページ	375px	768px	1280px
/articles/20251031a/（著者紹介なし）	112 → 56	112 → 56	72 → 56
/articles/20260612a/（著者紹介あり。著者紹介 → 帯）	96 → 56	96 → 56	56 → 56
/specials/styleguide/（帯あり。本文の下端 → フッター）	587 → 547（-40）	440.8 → 400.8（-40）	337.5 → 337.5

20260612a の共有ボタン → 著者紹介の 16px は前後で同じ。

帯を持たないページのフッター前（main の下端 → フッター、サイドバーの高さ）は3幅とも前後で同一:

ページ	375px	768px	1280px
/articles/2026/	40 / 40	40 / 40	0 / 4638.1
/specials/httf/	40 / 40	40 / 40	0 / 1748.3
/	40 / 40	816.1 / 816	0 / 7123

make css の前後差分は上の2ルールだけ。node css_lint.mjs / node font_size_lint.mjs は通過。

確認ポイント

• 記事ページ（著者紹介あり・なし）で、共有ボタン（著者紹介）と関連記事の帯の間が幅に関わらず 56px
• 一覧ページ・帯の無い特設ページのフッター前の空きが変わっていない
• 帯を持つ特設（/specials/styleguide/ /specials/markdown/ /specials/gallery/）のモバイルで、本文と We're hiring の帯の間が記事と同じ 56px

🤖 Generated with Claude Code