リンクプレビューの反応をカードの型にそろえる

[ma91n]

#3222 の積み残し。記事本文に貼るリンクプレビューのカードだけ、hover が古い型（題を ink-strong から ink-mute に落とす）のまま残っていて、スタイルガイドの hover の表のどの行にも当てはまらない部品になっていた。

直したこと

• 題に下線（1px / link-underline-offset）、画像は opacity: 0.7。他のカード（一覧・パネル・ランキング・関連記事・We're hiring）と同じ型
• 色は動かさない。ink-strong → ink-mute の状態の差は 1.62:1 しかなく読み取れない（ホームの「すべての連載を見る」「すべての特設ページを見る」が青色リンク＋選択で下線が出ない #2893 で他のカードが色から下線へ移ったときの判断）
• 引き金はカードを覆う <a> の :hover と :focus-visible。行き先が1つしか無いので :has() で別の行き先を避ける必要が無い（カードのメタ行をマウスで横切ると、題の下線とサムネの減光が点滅する #3170 の線引きはそのまま成立する）。キーボードで来たときも同じ反応が返る（キーボードで記事の入口に来たときに、カードと行の反応が出ない #3168）
• 題の transition から color を落とす（動かすものが無くなった）

囲みの有無で反応は変えない。 リンクプレビューはサイトで数少ない「枠線を持つカード」だが、枠は範囲を示すもので反応の型を決めない。

文書

• スタイルガイドの「hover は1部品1反応」に1段落。カード1枚が1つの行き先を名乗る形は、行き先が外部ページでも同じ
• CLAUDE.md の「面か下線かは『形』ではなく『場所と役』で決まる」に同じ判断を追記
• 併せて、同じ場所のコメントの offset 3px を link-underline-offset（ダークモードでテキスト選択が見えない（::-moz-selection がルールごと無効にしている） #3058 で 2px）に直した

確認

• /articles/20250916a/ … リンクプレビュー6枚。カーソルを乗せると題に下線が付き画像が一段引く（色は変わらない）、Tab で来たときも同じ反応が出る
• make css の差分は該当ルールだけ、make lint-css は通る

🤖 Generated with Claude Code