/*
 * legacy-content.css
 *
 * 既存記事の本文に直接保存されている旧HTML（目次・かんたんリンク）を、
 * 旧テーマ（Cocoon）の見た目ではなく、モノクロ自身のデザイントークン・
 * コンポーネント言語（assets/css/base.css, components.css で使っている
 * ものと同じ変数・同じボタン/カードの作り方）で再構築するためのCSS。
 * セレクタのクラス名（.toc, .easyLink-box 等）は既存記事データそのもの
 * なので変更できないが、実際に出力される見た目はモノクロ独自のUIになる。
 * inc/legacy-content.php から記事ページでのみ読み込まれる。
 *
 * STEP24: 購入ボタン（.easyLink-info-btn a）の塗り色を黒（--mono-900）
 * からブランドオレンジ（--color-accent）に変更した。「かんたんリンク」は
 * サイト内で実質的なアフィリエイトCTAであり、CTAはオレンジを主役にする
 * という方針に合わせている。リンク先URL・計測用パラメータ・HTML構造は
 * 一切変更していない（見た目の塗り色のみの変更）。
 */

/* ---------- モノクロ目次 ---------- */
/* Cocoonのチェックボックス式アコーディオンは再現せず、
   アクセントカラーの左ボーダーで「モノクロのコンポーネント」だと
   分かる、常時展開のシンプルな案内ボックスとして再構築する。 */

.entry-content .toc {
	background: var(--color-bg);
	border: 1px solid var(--color-border);
	border-left: 3px solid var(--color-accent);
	border-radius: var(--radius-sm);
	padding: var(--space-4) var(--space-6);
	margin: 0 0 var(--space-6);
}

.entry-content .toc-checkbox {
	display: none;
}

.entry-content .toc-title {
	display: block;
	font-size: var(--font-size-sm);
	font-weight: 700;
	letter-spacing: 0.05em;
	color: var(--color-text-muted);
	margin-bottom: var(--space-3);
	cursor: default;
}

.entry-content .toc-content {
	display: block !important;
}

.entry-content .toc-list {
	margin: 0;
	padding-left: 1.25em;
	font-size: var(--font-size-sm);
}

.entry-content .toc-list ol {
	padding-left: 1.25em;
	margin-top: var(--space-1);
}

.entry-content .toc-list li {
	margin-bottom: var(--space-1);
}

.entry-content .toc-list a {
	text-decoration: none;
}

.entry-content .toc-list a:hover {
	text-decoration: underline;
}

/* ---------- モノクロ アフィリエイトカード ---------- */
/* 既存の「かんたんリンク」データ（画像・商品名・購入ボタン）を、
   .card と同じ見た目の言語（白背景・ボーダー・radius-md・ホバー時の
   shadow-card）で再構築する。購入ボタンはASPごとにインラインstyleで
   配色されているが、特定ASPの色に依存させないためモノクロの
   ボタン配色に統一する（インラインstyleの上書きが必要なため
   !important を使用）。 */

.entry-content .easyLink-box {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-4);
	align-items: flex-start;
	background: var(--color-bg);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	padding: var(--space-4);
	margin: 0 0 var(--space-6);
	transition: box-shadow 0.15s ease;
}

.entry-content .easyLink-box:hover {
	box-shadow: var(--shadow-card);
}

.entry-content .easyLink-img {
	flex: 0 0 auto;
	width: 140px;
}

.entry-content .easyLink-img-box {
	margin: 0;
	position: relative;
}

.entry-content .easyLink-img-pht {
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: var(--radius-sm);
	background: var(--color-surface);
}

/* スライド用矢印はJS未実装のため非表示（機能しないボタンを見せない） */
.entry-content .easyLink-arrow-left,
.entry-content .easyLink-arrow-right {
	display: none;
}

.entry-content .easyLink-info {
	flex: 1 1 200px;
	min-width: 0;
}

/* PRバッジ: STEP12でCSS生成コンテンツ（::before content:"PR"）から
   実HTML要素へ変更した（inc/legacy-content.phpがthe_contentフィルターで
   .badge.badge--prを挿入する。スクリーンリーダーでの読み上げに
   対応するため）。見た目は既存の.badge--pr（components.css）をそのまま
   使うため、ここでは挿入位置の余白のみ調整する。 */
.entry-content .easyLink-info > .badge--pr {
	margin-bottom: var(--space-2);
}

.entry-content .easyLink-info-maker,
.entry-content .easyLink-info-model {
	margin: 0 0 var(--space-1);
	font-size: var(--font-size-sm);
	color: var(--color-text-muted);
}

.entry-content .easyLink-info-name {
	margin: 0 0 var(--space-3);
	font-weight: 700;
	line-height: 1.5;
}

.entry-content .easyLink-info-btn {
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
}

/* 購入ボタン: モノクロの標準ボタン配色に統一（インラインstyleを上書き）。
   STEP24: 黒塗り(--mono-900)からブランドオレンジ(--color-accent)へ変更。
   実質的なアフィリエイトCTAのため、CTAをオレンジで主役化する方針に
   合わせた（見た目のみの変更。リンク先・計測パラメータは無変更）。 */
.entry-content .easyLink-info-btn a {
	display: inline-block;
	padding: var(--space-3) var(--space-6);
	border-radius: var(--radius-button);
	background: var(--color-accent) !important;
	color: var(--mono-white) !important;
	text-decoration: none;
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-bold);
	transition: background-color 0.15s ease;
}

.entry-content .easyLink-info-btn a:hover {
	background: var(--color-accent-hover) !important;
}