/* LEGACIA_BASE — Public BLOG (Dynamic Integration 001)
   ../css/prototype.cssを先に読み込んだ上での最小追加分。既存デザイン
   (.blog-card-grid/.blog-card/.article-header/.article-body/.article-media-*等)は
   すべてprototype.cssに定義済みのものを再利用し、新規に追加するのは
   Rich TextのA-/A+サイズclass反映(Owner Editor側にのみ定義されていたもの)のみ。 */

/* Owner Editorが生成するRich TextのA-/A+ 7段階サイズclassを、実際のPublic記事
   表示でも正しく反映する(Public/editor/editor.cssの.article-body .rt-size-*と
   同一定義。Public BLOGはeditor.cssを読み込まないため、ここに複製する)。 */
.article-body .rt-size-lg { font-size: 1.35em; }
.article-body .rt-size-xl { font-size: 1.8em; }
.article-body .rt-size-m3 { font-size: 0.6em; }
.article-body .rt-size-m2 { font-size: 0.72em; }
.article-body .rt-size-m1 { font-size: 0.86em; }
.article-body .rt-size-p1 { font-size: 1.2em; }
.article-body .rt-size-p2 { font-size: 1.5em; }
.article-body .rt-size-p3 { font-size: 1.9em; }

/* 記事本文のRich Textブロック。prototype.cssの.article-body pは<p>タグ専用の
   ため、Rich Textの<br>ベースの本文にも同じ余白・文字サイズを適用する。 */
.article-body .rt-block {
  margin-bottom: 22px;
  opacity: 0.9;
  line-height: 1.9;
}

/* ---------------------------------------------------------------------
   PUBLIC BLOG VISUAL TUNING 001

   実測した根本原因(詳細: HPM_SYSTEM/HPM_CHANGE_LOG.md該当entry): prototype.cssの
   .article-header/.article-bodyは横paddingに8vw(viewport幅基準)を使っていたため、
   max-width:720pxの箱の中で、viewportが広がるほどpaddingが際限なく肥大し、実際の
   本文幅が1920px級Desktopでは約413px(720 - 2×8vw@1920px)まで縮小していた。これが
   Owner指摘「記事が極端に小さい」「Photoも小さい」の直接原因(Photo「全幅」も
   この縮小済み幅の100%だったため同様に小さかった)。

   ここでは(4節の構造に対応):
   (1) 横paddingをclamp()で上限固定し、viewportが広がっても際限なく肥大しないようにする。
   (2) 記事全体の外枠(.article-container、blog.js側で新規追加した構造ラッパー)を
       prototype.css既存の.proto-sectionと同じ960px max-widthに揃える(新しい値を
       発明せず既存のsite語彙を再利用)。ごく薄い明度差のみを与え、白いカード化・
       強い枠線は使わない(4節の禁止事項)。
   (3) Title/Category/Date/本文Textだけを700pxの読みやすい幅に個別にnarrow化する
       (3節「Text container」)。
   (4) Photoは.article-body自身の(Textより広い)content幅をそのまま使えるように
       残し、Text/Photoの幅を分離する(3節「Media container」)。
   --------------------------------------------------------------------- */
:root {
  --article-outer-max-width: 960px;
  /* TEXT WIDTH + TYPOGRAPHY TUNING 002: Title/Category/DateとBody本文は、
     別々の候補幅から実測・日本語文検証のうえ個別に採用した(A/B/C/D節参照)。
     いずれも.article-body自身のcontent幅(≈832px @1920px、Photoが使う幅)より
     狭く、Photoが常にTextより広い階層を維持する。 */
  --article-header-text-max-width: 820px;
  --article-body-text-max-width: 780px;
  --article-side-padding: clamp(20px, 5vw, 64px);
  /* MOBILE TYPOGRAPHY TUNING 004: Captionはblog.js側のinline styleで幅
     (photoと同じ%)を指定しているため、font-sizeだけをこのCSS変数経由に
     切り出し、Desktop/Mobileで別の値をここから注入できるようにした
     (inline styleはmedia queryを持てないため)。 */
  --article-caption-font-size: 17px;
}

/* BLOG ARTICLE SOFT DARK PRODUCTION ADOPTION 001(2026-09-27):
   Dark/Light/Soft Dark比較(比較の経緯はHPM_CHANGE_LOG.md参照)を経て、
   Owner最終実機確認によりSoft Dark Reading(background #161616 +
   base text rgba(255,255,255,0.92))をProduction標準として正式採用した。
   以前は`rgba(255,255,255,0.025)`という極薄い明度差のみだったが、
   #161616へ明確に引き上げ、記事本文とコメントを1枚の連続した
   Reading Areaとして見せるためborder-radius/box-shadowも通常表示へ
   統合した(colorは指定していない — bodyの基準値rgba(255,255,255,
   0.92)をそのまま継承させることで、比較時のSoft Dark Text Tuning 001
   の結果と同一の見た目になる)。 */
.article-container {
  max-width: var(--article-outer-max-width);
  margin: 0 auto;
  background: #161616;
  border-radius: 16px 16px 0 0;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
}

.article-header,
.article-body {
  max-width: none;
  margin: 0;
  padding-left: var(--article-side-padding);
  padding-right: var(--article-side-padding);
}
.article-header {
  padding-top: 8vh;
  padding-bottom: 3vh;
}
.article-body {
  padding-top: 0;
  padding-bottom: 8vh;
}

/* Title/Category/Dateは記事全体の面(より広い)の中で、読みやすい幅に個別に
   中央寄せする。Photo(.article-media-single等)はこの制約を受けない。 */
.article-category,
.article-title,
.article-date {
  max-width: var(--article-header-text-max-width);
  margin-left: auto;
  margin-right: auto;
}

/* ---------------------------------------------------------------------
   PUBLIC BLOG TYPOGRAPHY TUNING 003

   Owner実機Desktop再確認: Width構造(Container 960px/Title 820px/Body 780px/
   Photo ≈832px)はGOODだが、文字がまだ小さい。Width/Photo/Containerは一切
   変更せず、Typographyのみ明確に一段大きくする(前回のような微増ではなく、
   1920px級で「普通に読める」サイズを狙う)。Mobile(390px基準)はDesktop値を
   そのまま流用せず、下記@mediaで別に定義する。
   --------------------------------------------------------------------- */
.article-title {
  /* 1920px級で実表示54〜56px程度になるようmax側をpx指定で固定
     (vw成分はこのmaxに達するまでの中間サイズを滑らかに補う)。 */
  font-size: clamp(2.2rem, 3.6vw, 55px);
}
.article-category {
  font-size: 14px;
}
.article-date {
  font-size: 16px;
}

.article-body .rt-block {
  max-width: var(--article-body-text-max-width);
  margin-left: auto;
  margin-right: auto;
  font-size: 1.3rem;
  line-height: 1.78;
}

/* READER REACTION SYSTEM IMPLEMENTATION 001 — Article Like。
   .rt-blockと同じ780px列幅・中央寄せに揃え、新しい列幅を発明しない。
   Buttonの見た目は既存.proto-link-out(枠線のみ・塗りつぶしなし)と同じ
   最小の語彙を再利用し、Soft Dark Readingの地色にそのまま馴染ませる
   (装飾過多にしない)。 */
.article-like {
  max-width: var(--article-body-text-max-width);
  margin: 12px auto 0 auto;
}
.article-like-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: 1px solid rgba(255, 255, 255, 0.4);
  color: rgba(255, 255, 255, 0.92);
  padding: 10px 20px;
  font-size: 0.9rem;
  font-family: inherit;
  letter-spacing: 0.02em;
  cursor: pointer;
}
.article-like-button:hover {
  border-color: rgba(255, 255, 255, 0.9);
}
.article-like-button[data-liked="true"] {
  border-color: rgba(255, 255, 255, 0.75);
}
/* BLOG REACTION ICON UNIFICATION 001: iconが従来のtext glyph(♥/♡、
   font-sizeで大きさ調整)からSVG(.reaction-icon、width/height属性で
   自身のサイズを持つ)へ変わったため、font-sizeでの調整をやめ、
   inline-flexでSVGを中央揃えする形にする。 */
.article-like-icon {
  display: inline-flex;
  align-items: center;
}
.article-like-count {
  font-variant-numeric: tabular-nums;
}

/* PUBLIC COMMENT TYPOGRAPHY TUNING 001: この2つは元々.article-body .rt-block
   より後ろ(@media (max-width: 768px)より後)に定義されていたため、Mobile用の
   font-size上書き(下記@media内)がソース順で負けてDesktop値がMobileにも
   適用されてしまうcascadeバグがあった(このTuning作業の実測で発見)。
   .article-title/.article-category/.article-dateと同じ「Desktop値→@media
   で上書き」という既存の並び順に合わせてここへ移動し、修正する。 */
.article-comment-name {
  font-size: 17px;
  opacity: 0.92;
}
.article-comment-date {
  font-size: 15px;
  opacity: 0.55;
}

@media (max-width: 768px) {
  /* Mobileは画面幅に対して自然なサイズにするため、Desktopのpx固定maxではなく
     viewport相対のclampへ切り替える(Desktop値をそのまま縮小適用しない)。 */

  /* MOBILE TYPOGRAPHY TUNING 004/005: Owner実機確認を受け、Desktop
     (Tuning 003で確定・完全固定)には触れず、この@media内のみ調整を
     2段階で実施(004→005)。文字を小さくすること自体が目的ではなく、
     390px級での1行の情報量と縦方向のリズムの改善が目的。 */
  :root {
    --article-caption-font-size: 14.8px;
  }
  .article-title {
    font-size: clamp(1.5rem, 6vw, 2rem);
  }
  .article-category {
    font-size: 12px;
  }
  .article-date {
    font-size: 13.8px;
  }
  .article-body .rt-block {
    font-size: 16px;
    line-height: 1.78;
  }

  /* PUBLIC COMMENT UI IMPLEMENTATION 001: Desktop値をそのまま縮小せず、
     .article-category/.article-dateのMobile値と同じ数値をそのまま再利用する
     (新しいDesign思想を作らない)。長いISO timestampがnameの隣で中途半端に
     折り返さないよう、Mobileのみname/dateを縦積みに変更する(font-size等の
     Typography方針自体は変更しない、純粋なlayout調整)。 */
  .article-comment-meta {
    flex-direction: column;
    gap: 2px;
  }
  .article-comment-name {
    font-size: 13.8px;
  }
  .article-comment-date {
    font-size: 12px;
  }
}

/* ---------------------------------------------------------------------
   PUBLIC COMMENT UI IMPLEMENTATION 001

   既存.article-container(Stable Point V3.50、Title 820px/Body 780px/
   Photo ≈832px)には一切触れず、その外側・直後に独立したsectionとして追加する。
   外枠は.article-containerと同じ960px+clamp側padding方式を再利用する
   (旧8vw方式の際限ない肥大バグをここで繰り返さない)。内側のheading/list/
   formは.article-body .rt-blockと同じ780px列へ個別にnarrow化する
   (新しいDesign思想を作らず、既存パターンをそのまま転用)。
   区切りは.proto-section + .proto-sectionと同じhairline dividerを再利用。
   --------------------------------------------------------------------- */
/* BLOG ARTICLE SOFT DARK PRODUCTION ADOPTION 001: .article-containerと
   同じbackground(#161616)を共有し、隙間が無いことを利用して1枚の
   連続したReading Areaに見せる(外周の角は下端のみ丸める)。 */
.article-comments {
  max-width: var(--article-outer-max-width);
  margin: 0 auto;
  padding-left: var(--article-side-padding);
  padding-right: var(--article-side-padding);
  padding-top: 6vh;
  padding-bottom: 8vh;
  background: #161616;
  border-radius: 0 0 16px 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}

.article-comments-heading,
.article-comments-list,
.article-comments-empty,
.article-comment-form {
  max-width: var(--article-body-text-max-width);
  margin-left: auto;
  margin-right: auto;
}

/* PUBLIC COMMENT TYPOGRAPHY TUNING 002: Owner実機レビューで「Tuning 001の
   heading(38.4px)は大きくなりすぎ」との評価。Desktop実表示約32pxまで
   下げる。Mobileは下記@media側で明示的に固定するため、ここでの変更が
   Mobileへ機械的に伝播しない(Tuning 001のcascadeバグの再発防止)。 */
.article-comments-heading {
  font-size: clamp(1.4rem, 2.6vw, 2rem);
  font-weight: 300;
  margin-bottom: 18px;
}

.article-comment-item {
  margin-bottom: 22px;
}
.article-comment-item + .article-comment-item {
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  padding-top: 22px;
}

/* COMMENT EMOJI TUNING + OWNER REPLY IMPLEMENTATION 001: Reader Commentと
   その直下のOwner Reply(1段のみ)を.article-comment-threadでまとめる。
   thread同士の区切りは従来通り(hairline divider)、thread内部(親→Reply)は
   区切り線を出さず、代わりにわずかなインデント+左のaccent線のみで
   「同じ会話に属する返信」であることを示す(新しい大規模thread UIには
   しない、Soft Darkの既存語彙のみを使う)。この上書きは.article-comment-item
   単体ルールより詳細度が高いため(3クラス vs 2クラス)、既存ルールを直接
   変更せずに済む。 */
.article-comment-thread + .article-comment-thread {
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  padding-top: 22px;
}
.article-comment-thread .article-comment-item + .article-comment-item {
  border-top: none;
  padding-top: 0;
  margin-left: clamp(16px, 4vw, 32px);
  border-left: 2px solid rgba(255, 255, 255, 0.15);
  padding-left: 16px;
}

.article-comment-meta {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 6px;
}
/* PUBLIC COMMENT TYPOGRAPHY TUNING 003: Comment bodyはPhoto captionと
   --article-caption-font-size変数を共有していたため、Comment body単独の
   Desktop値変更(17px→18px)がPhoto caption側にも影響してしまう。ここで
   固定値18pxへ切り離す(Photo captionは変数のまま17px/Mobile14.8pxを維持)。 */
.article-comment-body {
  font-size: 18px;
  line-height: 1.8;
  opacity: 0.92;
  white-space: pre-wrap;
  word-break: break-word;
}

/* TUNING 002: Owner実機レビューで「Tuning 001のempty message(bodyと同じ
   17px)は小さすぎ」との評価。empty messageはComment bodyとは独立した目的
   (0件時の案内文)であるため、bodyと共有していた--article-caption-font-size
   参照をやめ、Desktop/Mobileそれぞれに専用値を明示する(Mobile値は下記
   @media側で指定)。 */
.article-comments-empty {
  opacity: 0.55;
  font-size: 18px;
  padding: 4px 0 18px 0;
}

.article-comment-form-row {
  margin-bottom: 14px;
}
/* TUNING 001: 0.78rem(12.48px)→14px。TUNING 002: Owner実機レビューで
   「まだ小さすぎ」との評価により14px→16pxへ再調整。 */
.article-comment-form-row label {
  display: block;
  font-size: 16px;
  opacity: 0.65;
  margin-bottom: 6px;
}
/* TUNING 001: 0.9rem(14.4px)→16px(目安通り。iOS Safariの自動ズームを誘発
   しない16px以上、という実務上の副次的なメリットもある)。 */
.article-comment-form input[type="text"],
.article-comment-form textarea {
  width: 100%;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 4px;
  color: inherit;
  font-family: inherit;
  font-size: 18px;
  padding: 10px 12px;
  box-sizing: border-box;
}
.article-comment-form textarea {
  resize: vertical;
  min-height: 100px;
}

/* READER REACTION SYSTEM IMPLEMENTATION 001 — Comment Emoji Quick Insert。
   .article-comment-submitと同じ枠線のみ・塗りつぶしなしの最小語彙を
   踏襲し、小さめのpaddingにして「入力補助の並び」であることを示す
   (装飾的なEmoji Pickerにはしない)。 */
.article-comment-emoji-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}
.article-comment-emoji-btn {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 4px;
  color: inherit;
  font-size: 18px;
  line-height: 1;
  padding: 6px 9px;
  cursor: pointer;
}
.article-comment-emoji-btn:hover {
  border-color: rgba(255, 255, 255, 0.6);
}

/* TUNING 001: 0.72rem(11.52px)→14px。TUNING 002: Owner実機レビューで
   「まだ小さすぎ」との評価により14px→16pxへ再調整。 */
.article-comment-privacy-note {
  font-size: 16px;
  opacity: 0.55;
  margin-bottom: 12px;
}

/* .proto-link-out(prototype.css)と同一の見た目をbutton要素向けに複製する
   (共有ファイルであるprototype.cssは変更せず、blog.css内で完結させる)。
   TUNING 001: font-sizeのみ0.82rem(13.12px)→15px(目安14〜15pxの上限側)。 */
.article-comment-submit {
  display: inline-block;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.4);
  color: inherit;
  font-family: inherit;
  font-size: 15px;
  letter-spacing: 0.06em;
  padding: 10px 22px;
  cursor: pointer;
}
.article-comment-submit:hover {
  border-color: rgba(255, 255, 255, 0.9);
}
.article-comment-submit:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  border-color: rgba(255, 255, 255, 0.2);
}

/* TUNING 001: 0.82rem(13.12px)→14.5px(目安14〜15pxの中間)。 */
.article-comment-form-status {
  font-size: 14.5px;
  opacity: 0.75;
  margin-top: 10px;
  min-height: 1.2em;
}
.article-comment-form-status[data-error="true"] {
  color: #ffb4b4;
  opacity: 1;
}

/* PUBLIC COMMENT TYPOGRAPHY TUNING 002: headingとempty messageのMobile
   固定値。この2つの基準(無条件)ルールは本ファイル内で@media (max-width:
   768px)ブロックより後ろに定義されているため、そのブロックの中へ上書きを
   追加してもソース順で負けてしまう(Tuning 001で発見・修正したものと同種の
   cascade問題)。この基準ルールより後ろに新しく@mediaブロックを置くことで
   確実に上書きする。
   headingはTuning 001時点のMobile実測値(24px)をそのまま維持
   (Owner指摘はDesktop向けで、Mobile headingは今回変更対象ではないため)。
   empty messageは、Comment bodyとの変数共有をやめた(Desktop側の変更に
   伴う)ことで従来の14.8pxから切り離されたため、labelやnotice等と同じ
   読みやすい水準(16px)へ独自に設定する(Desktop値18pxの単純コピーではない)。

   PUBLIC COMMENT TYPOGRAPHY TUNING 003: 同じ理由でComment body(基準ルール
   をDesktop 18pxの固定値へ切り離した)とinput/textarea(基準ルールをDesktop
   18pxへ変更した)も、この後ろに置かれた@mediaブロックでMobile値を明示的に
   上書きしないとDesktop値がそのままMobileにも適用されてしまう。Mobile値は
   Tuning 002以前の実測値(body 14.8px / input・textarea 16px)を維持する。 */
@media (max-width: 768px) {
  .article-comments-heading {
    font-size: 24px;
  }
  .article-comments-empty {
    font-size: 16px;
  }
  .article-comment-body {
    font-size: 14.8px;
  }
  .article-comment-form input[type="text"],
  .article-comment-form textarea {
    font-size: 16px;
  }

  /* BLOG ARTICLE SOFT DARK PRODUCTION ADOPTION 001: Mobileはside padding
     が狭い(clamp(20px,5vw,64px)は390px幅で約20px)ため、Reading Area
     自体の角を丸めるだけでは外側の黒が細すぎて見えにくい。左右10pxの
     marginを追加し、Dark外周が明確な縁として見えるようにする(比較時の
     Soft Dark Comparison/Light Comparisonで確認済みの値をそのまま
     Production標準へ採用)。この位置(.article-container/.article-commentsの
     無条件background/border-radiusルールより後ろ)に置くことで、Mobile
     上書きがソース順で確実に勝つ(既存のcascadeバグ再発防止パターンを踏襲)。 */
  .article-container {
    margin-left: 10px;
    margin-right: 10px;
    border-radius: 14px 14px 0 0;
  }
  .article-comments {
    margin-left: 10px;
    margin-right: 10px;
    border-radius: 0 0 14px 14px;
  }
}

/* BLOG ARTICLE SOFT DARK PRODUCTION ADOPTION 001(2026-09-27): 比較専用
   だったDARK / LIGHT READING COMPARISON 001(?theme=light)とBLOG
   ARTICLE SOFT DARK COMPARISON 001(?theme=soft-dark)のCSSは、Soft
   Dark(C)がProduction標準として正式採用されたことに伴いここで撤去した
   (Lightは不採用のため撤去、Soft Darkは上記の無条件ルールへ統合済みの
   ため撤去)。比較の経緯・実測値そのものはHPM_CHANGE_LOG.mdに記録済みで
   消していない。blog.js側もtheme query parameterを読むコード
   (applyThemeFromParams())自体を削除したため、`?theme=light`/
   `?theme=soft-dark`を付けても単に無視され、通常のProduction標準表示
   (このファイル内の無条件ルール)がそのまま表示される。 */

/* BLOG INDEX PHOTO CARD PRODUCTION TRIAL 001(2026-09-27、Owner実機評価用、
   最終デザイン未確定)。

   #blogContent自体にはprototype.css側に何のルールもなく(bare div)、
   全幅へ広がっていたため、.proto-section(blogIntro見出し)と同じ
   max-width:960px / 8vw side paddingを与え、HeaderとCardsの視覚幅を
   揃える。.blog-card-grid/.blog-cardの基本定義(border/padding/gap等)
   自体はprototype.cssに残したまま変更しない(他ページからの将来の
   再利用可能性を保つため)。ここではPublic BLOG専用の上書き
   (列数・thumbnail)のみをblog.css側に追加し、prototype.cssへは一切
   触れない(このファイルはprototype.cssの後に読み込まれるため、
   同じ詳細度のセレクタは後勝ちでここでの上書きが確実に有効になる)。 */
#blogContent {
  max-width: 960px;
  margin: 0 auto;
  padding: 0 8vw 8vh 8vw;
}

.blog-card-grid {
  grid-template-columns: repeat(2, 1fr);
}

/* BLOG INDEX PHOTO INSET TUNING 001(2026-09-27、Owner実機評価用、
   正式採用ではない): 従来はnegative margin(-18px -18px 0 -18px)で
   .blog-card既存のpadding:18pxを打ち消し、PhotoをCard上端・左右の
   borderまでbleedさせていた。Owner実機評価により「左上へ吸着して
   見える」「上端・左右いっぱいを占有している」との指摘があったため、
   このbleedを撤去する。

   撤去した結果、Photoは単に.blog-cardの通常のflex子要素として
   振る舞い、既存のpadding:18px(Category/Title/Dateと全く同じ
   基準)がそのままPhotoの上下左右の余白になる — 新しい余白値を
   追加するのではなく、既存paddingとの二重定義を避けて完全に
   再利用する形にした(Owner指示の「既存Card paddingとの整合を
   優先し、余計な二重paddingにならないよう実測して決める」に対応)。
   .blog-card paddingはMobile(<=768px)でも18pxのまま上書きされない
   ため、Desktop/Mobileどちらでも同じ18px insetになり、「Desktopの
   padding値をMobileへ単純適用してPhotoが小さくなりすぎる」問題も
   発生しない。thumbnailの下のCategory/Title/Dateとの間隔は、従来
   通り.blog-card既存のgap:8px(flex column)にそのまま任せる。 */
.blog-card-thumb {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

@media (max-width: 768px) {
  /* .proto-sectionのMobile side padding(6vw、prototype.css @media
     max-width:768pxブロック)と揃える。 */
  #blogContent {
    padding: 0 6vw 7vh 6vw;
  }
  .blog-card-grid {
    grid-template-columns: 1fr;
  }
}

/* BLOG INDEX REACTION COUNT IMPLEMENTATION 001: 従来.blog-card-date単体
   だった最下段flex子要素を、DATE(左)とLike/Comment件数(右)を並べる
   .blog-card-footerへ置き換える。.blog-card自体(border/padding/gap)・
   .blog-card-thumb・.blog-card-title・.blog-card-category・
   .blog-card-grid(2列/1列)はいずれも変更しない — .blog-card-dateも
   既存定義(prototype.css、font-size:0.7rem/opacity:0.55)のまま、
   footer内へ移動しただけで見た目は変えていない。Reaction側の数字も
   同じfont-size/opacityを流用し、既存の「静かなCard Design」の重みと
   揃える(新しい強調色・SNS風Action Barにはしない)。 */
.blog-card-footer {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.blog-card-reactions {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-shrink: 0;
  font-size: 0.7rem;
  opacity: 0.55;
  font-variant-numeric: tabular-nums;
}

.blog-card-reaction {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}

/* BLOG REACTION ICON UNIFICATION 001: BLOG INDEXとArticle Detailの両方から
   参照する共有icon(blog.js buildHeartIcon()/buildCommentIcon())の唯一の
   stylingルール。stroke:currentColor(SVG属性側で指定)のため、置かれた
   文脈の文字色(ここでは.blog-card-reactionsのopacity:0.55、Article側は
   .article-like-buttonのcolor)をそのまま継承し、新しい色を持ち込まない。
   fill有無(未Like=none/Like済み=currentColor)はJS側でpath要素のfill属性
   として直接設定済みのため、ここでは追加のCSS切り替えは不要。 */
.reaction-icon {
  display: block;
  flex-shrink: 0;
}