social-reddit-card

【テンプレート：Reddit 投稿カード】 【意図】ストーリー／質問／ジョークを Reddit 投稿カードにして、動画へのオーバーレイやソーシャルメディアでのストーリー共有に使います。Inspired by hyperframes reddit-post。

【キャンバス】1280×720（動画へのオーバーレイ）または 800×600（単体カードの共有）；背景は透明または暗色の #0b1416。

【カード構成】

• 外枠：角丸 16px、背景は白の #ffffff（ライト）または #1a1a1b（ダーク、動画へのオーバーレイに推奨）、境界線は 1px の #edeff1／#343536。
• 左側の 投票レール（幅 40-56px）：
  • 上矢印 ▲（16px、#878a8c、ホバー時にオレンジ色の #ff4500 に変化）。
  • 票数（Inter、17px、ウェイト 700、中央揃え、色：0 はグレー／正はオレンジ／負は青）；大きな数字は 12.3k 形式。
  • 下矢印 ▼（ホバー時に青色の #7193ff に変化）。
• メイン領域：
  • 上部のメタ行：サブレディットのアイコン（CSS の円形＋文字）＋ r/subreddit（太字）＋ · u/username が投稿 · 3h（小さなグレーの文字）。
  • タイトル（Inter／IBM Plex Sans、22-28px、ウェイト 500、暗色のテキスト）。
  • 内容：16px の本文、引用ブロック、または画像 1 枚（CSS のグラデーションによるプレースホルダー）。
  • 下部のアクション行：💬 1.2k 件のコメント · 🏆 アワード · ⤴️ 共有 · ⋯ アイコン。
• 右上に Reddit Snoo ロゴ（オレンジ色の #ff4500 を使ったインライン SVG）。

【フォント】

• メイン：IBM Plex Sans → フォールバックは Inter、ウェイト 400/500/700。
• 数字：メインと同じフォント。
• 中国語：Noto Sans SC。

【デザインの詳細】

• ライトモード：背景 #fff、テキスト #1c1c1c、セカンダリ #7c7c7c。
• ダークモード（推奨）：背景 #1a1a1b、テキスト #d7dadc、セカンダリ #818384、境界線 #343536。
• 票数の色：正 = #ff4500、負 = #7193ff、0 = #878a8c。
• タイトルのクリック領域に、ホバー時の控えめな背景色を追加できます。
• 外部画像の使用は厳禁です。画像のプレースホルダーには CSS のグラデーションと説明を使います。
• 必ずユーザーが提供した内容を使い、適切なサブレディット／ユーザー名／票数を自動生成します。
• HTML は単一ファイルにします。アイコン（上下の矢印、コメントの吹き出し、トロフィー）はインライン SVG にします。