EOL 警告バナーが sticky ヘッダに隠れないようにする

[znz]

解決したい問題

Fixes #227

旧バージョンのページで、EOL 警告バナーの下部が sticky ヘッダ(#rurema-topbar)に
隠れていました(1行なら文言の下半分、折り返し時は2行目のほぼ全部)。

原因

#rurema-topbar は「body の余白(上 20px・左右 2%)を負マージン
(margin: -20px -2% 1em)で突き破って全幅化する」設計で、
自分が body の先頭要素である前提になっています。
#215 の EOL バナーはその前に挿入されるため、topbar の margin-top: -20px が
バナーの下部 20px に食い込んでいました。

変更内容

.eol-warning にも topbar と同じ「余白の突き破り」を適用します(CSS のみの変更)。

 .eol-warning {
     background-color: #aa3333;
     color: white;
-    padding: 0.4em;
-    margin: 0;
+    padding: 0.4em 2%;
+    margin: -20px -2% 20px;
 }

マージン相殺の計算:

• body の margin-top: 20px × バナーの -20px → バナーがビューポート上端に密着
  (左右 -2% で全幅化+padding 側 2% で文字位置は本文と揃う)
• バナーの margin-bottom: 20px × topbar の -20px → topbar がバナーの真下に密着
• バナーの無いページでは従来どおり topbar 自身の負マージンが body の余白を打ち消すため
  影響ありません

🤖 Generated with Claude Code