feat(styles): add link-card styling for remark-linkcard plugin

OG component-like appearance for auto-generated link cards with:
- Responsive card layout (text left, image right)
- Hover effects with subtle transform and shadow
- Dark mode support
- Mobile-first responsive breakpoint at 480px

Author: staticWagomU

src/styles/blog.css

@@ -515,6 +515,108 @@ article.blog {
 			display: none;
 		}
 	}
+
+	/* リンクカード（remark-linkcard生成） */
+	a.link-card {
+		display: flex !important;
+		box-sizing: border-box;
+		width: auto;
+		max-width: 100%;
+		border: 1px solid var(--gray);
+		border-radius: var(--radius-lg);
+		padding: var(--space-4);
+		gap: var(--space-3);
+		background-color: rgba(255, 255, 255, 0.03);
+		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
+		transition:
+			transform var(--duration-normal) var(--ease-out),
+			box-shadow var(--duration-normal) var(--ease-out);
+		text-decoration: none !important;
+		margin: var(--space-5) 0;
+		overflow: hidden;
+
+		&:hover {
+			transform: translateY(-2px);
+			box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+			text-decoration: none !important;
+
+			.link-card__image img {
+				transform: scale(1.05);
+			}
+		}
+	}
+
+	.link-card__image {
+		width: 120px;
+		min-width: 120px;
+		max-width: 120px;
+		height: 90px;
+		overflow: hidden;
+		border-radius: var(--radius-sm);
+		flex-shrink: 0;
+		order: 1;
+
+		img {
+			width: 100%;
+			height: 100%;
+			max-width: 100%;
+			display: block;
+			object-fit: cover;
+			transition: transform var(--duration-slow) var(--ease-out);
+		}
+	}
+
+	.link-card__content {
+		display: flex;
+		flex-direction: column;
+		gap: var(--space-2);
+		flex: 1;
+		min-width: 0;
+		justify-content: center;
+	}
+
+	.link-card__title {
+		font-weight: 600;
+		color: var(--accent1);
+		font-size: var(--font-size-m);
+		line-height: var(--line-height-tight);
+		display: -webkit-box;
+		-webkit-line-clamp: 2;
+		-webkit-box-orient: vertical;
+		overflow: hidden;
+	}
+
+	.link-card__description {
+		color: var(--color);
+		font-size: var(--font-size-s);
+		line-height: var(--line-height-normal);
+		display: -webkit-box;
+		-webkit-line-clamp: 2;
+		-webkit-box-orient: vertical;
+		overflow: hidden;
+	}
+
+	.link-card__meta {
+		margin-top: auto;
+	}
+
+	.link-card__site {
+		color: var(--gray);
+		font-size: var(--font-size-xs);
+	}
+
+	@media (max-width: 480px) {
+		.link-card {
+			flex-direction: column;
+		}
+
+		.link-card__image {
+			width: 100%;
+			min-width: 100%;
+			height: 160px;
+			order: 0;
+		}
+	}
 }
 
 body.dark article.blog {
@@ -558,4 +660,18 @@ body.dark article.blog {
 			color: var(--color);
 		}
 	}
+
+	/* リンクカード - ダークモード */
+	a.link-card {
+		background-color: rgba(0, 0, 0, 0.1);
+		border-color: var(--gray);
+
+		&:hover {
+			box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
+		}
+	}
+
+	.link-card__title {
+		color: var(--accent1);
+	}
 }