{
  "$schema": "../schemas/component-contract.schema.json",
  "id": "card",
  "version": "2.1.0",
  "name": "Card",
  "category": "data-display",
  "appStatus": "implemented",
  "intent": "コンテンツコンテナ。Basic / Metrics / Media / Action / Link の5バリエーション。",
  "docPath": "components/card.md",
  "anatomy": [
    "header?",
    "body",
    "footer?",
    "media?"
  ],
  "variants": {
    "basic": {
      "description": "標準カード",
      "tokenRefs": {
        "bg": "color.semantic.light.bg-surface",
        "border": "color.semantic.light.border-default",
        "radius": "radius.lg",
        "elevation": "elevation.sm"
      },
      "tailwind": "bg-white rounded-xl border border-slate-200 p-6 shadow-sm"
    },
    "media": {
      "description": "メディア付きカード（overflow-hidden で画像を角丸に）",
      "tokenRefs": {
        "bg": "color.semantic.light.bg-surface",
        "border": "color.semantic.light.border-default",
        "radius": "radius.lg",
        "elevation": "elevation.sm"
      },
      "tailwind": "bg-white rounded-xl border border-slate-200 overflow-hidden shadow-sm"
    },
    "action": {
      "description": "ホバーで影が変わるインタラクティブカード",
      "tokenRefs": {
        "bg": "color.semantic.light.bg-surface",
        "border": "color.semantic.light.border-default",
        "radius": "radius.lg",
        "elevation": "elevation.sm"
      },
      "tailwind": "bg-white rounded-xl border border-slate-200 p-6 shadow-sm hover:shadow-md transition-shadow"
    },
    "link": {
      "description": "リンクカード（ホバーでボーダーがアクセントに）",
      "tokenRefs": {
        "bg": "color.semantic.light.bg-surface",
        "border": "color.semantic.light.border-default",
        "radius": "radius.lg",
        "elevation": "elevation.sm"
      },
      "tailwind": "bg-white rounded-xl border border-slate-200 p-6 shadow-sm hover:border-primary-300 transition-all"
    }
  },
  "sizes": {},
  "states": [
    "default",
    "hover",
    "focus-within"
  ],
  "a11y": {
    "role": "article",
    "required": [
      "action / link は主アクションの操作要素（button / a）を内包する。カード面自体を操作要素にしない（RN: 面に accessibilityRole=\"button\" を付けない）",
      "面のクリック・タップはポインタ向けの近道。キーボード / スクリーンリーダーからの到達は内包した操作要素が担う",
      "内包する操作要素が2つ以上ある場合、面のクリックはそのうち1つ（主アクション）と同じ遷移先にする"
    ],
    "keyboard": [],
    "focusRing": "focus-within:ring-2 focus-within:ring-primary-500/50"
  },
  "rules": [
    {
      "id": "SPACE_NO_ROUNDED_NONE_CARDS",
      "severity": "error"
    },
    {
      "id": "SPACE_NO_SHADOW_LG",
      "severity": "error"
    },
    {
      "id": "SPACE_NO_SHADOW_2XL",
      "severity": "error"
    },
    {
      "id": "SPACE_NO_P0_CARDS",
      "severity": "error"
    },
    {
      "id": "AI_NO_CARD_COLOR_BAR_TOP",
      "severity": "error"
    },
    {
      "id": "AI_NO_CARD_COLOR_BAR_LEFT",
      "severity": "error"
    }
  ],
  "htmlSample": {
    "basic": "<div class=\"bg-white rounded-xl border border-slate-200 p-6 shadow-sm\"><h3 class=\"text-lg font-bold text-slate-900\">タイトル</h3><p class=\"text-base text-body mt-2\">内容</p></div>",
    "media": "<div class=\"bg-white rounded-xl border border-slate-200 overflow-hidden shadow-sm\"><img src=\"...\" alt=\"\" class=\"w-full h-48 object-cover\"><div class=\"p-6\"><h3 class=\"text-lg font-bold text-slate-900\">タイトル</h3></div></div>"
  },
  "platformSemantics": {
    "elevation": "APP は製品テーマに合わせて影なしを明示選択できる。省略時は従来の影を維持する。影なし時は押下中も elevation.none のみを読み、sm/md を参照しない。影で押下を表せないため、action/link の押下は枠を primary-300 に変えて表す（web では link の hover に使う色。APP の影なしでは action の押下にも使う。recipe の elevationOptions.none.pressedStyle）。背景・余白と primaryAction の操作契約は維持する。"
  }
}