social-x-post-card

【テンプレート：X（Twitter）投稿カード】 【意図】投稿の内容（またはユーザーの名言）を、非常にリアルな X の投稿カードとしてレンダリングします。動画への重ね合わせ、Twitter への画像投稿、知識の蓄積に使用します。Inspired by hyperframes x-post。

【キャンバス】1280×720 または 1080×1080、暗い背景 #0f1419 または明るい背景 #ffffff（X のテーマに合わせます）。カードは中央に配置し、影は柔らかくします。

【カードの構成】

• 外枠：角丸 16px、1px border #2f3336（dark）／#eff3f4（light）、内側の余白 16px。
• 上部の row：アバター（48×48 の円形、CSS gradient でプレースホルダーを作成）＋ユーザー名＋handle @username ＋認証済みの青いチェックマーク＋時刻（mono、12px、グレー）。
• 本文：17-22px、font weight 400。リンクには X の青 #1d9bf0 を使用します。ハッシュタグとメンションも同色にします。段落間の間隔は 0.6em。
• 任意：引用カード（小さなカードを埋め込み、グレーの背景、角丸 12px）。
• 任意：画像 1 枚（CSS gradient ＋説明用のプレースホルダーを使用し、外部画像へのリンクは禁止）、比率 16:9、角丸 12px。
• インタラクション用の row：4 個のアイコン＋数値（返信／リポスト／引用／いいね）。アイコンには inline SVG（X 公式スタイル）を使用し、グレーで表示します。ホバー時に色を変えます。
• 右上に X ロゴの単線 SVG。
• 表示回数の row：👁️＋数値（小さな文字）。

【フォント】

• 西文：Chirp（X のフォント）→フォールバックは Inter または Segoe UI。
• 中国語：Noto Sans SC／PingFang SC。
• 数字：本文と同じフォントを使用し、mono は使用しません。

【デザインの詳細】

• light の配色：bg #fff、text #0f1419、secondary #536471、border #eff3f4、accent #1d9bf0。
• dark の配色（動画への重ね合わせにおすすめ）：bg #000、text #e7e9ea、secondary #71767b、border #2f3336、accent #1d9bf0。
• 数値の書式：1.2K／4.5M（1234 のような元の数値は使いません）。
• 内容は必ずユーザーの入力に基づくものとし、投稿を捏造してはいけません。
• ユーザーの入力がデータの場合は、自動的に一句の「名言」投稿に要約します（280 文字以内）。
• 単一ファイルの HTML にします。アイコンは inline SVG を使用し、外部画像 URL は一切使用しません。
• 任意：カードの背後に控えめな放射状のハイライト radial-gradient(...) を加え、動画への重ね合わせ時の視認性を高めます。