/**
 * ギア（要件駆動の物販導線）— 共有コンポーネント
 * ------------------------------------------------------------------
 * ガイドハブ（診断直後）と単一ガイドページ（準備の直前）の両方で使うため、
 * guide-hub.css から切り出してある。両方の面で enqueue すること。
 *
 * 色・角丸・余白は guide-tokens.css の単一の出典から取る。
 */
/* =========================================================
 |  ギア（PR）
 +=========================================================*/
/* 単一ガイドの置き場所: 下の本文（.guide-layout）との間を取る。 */
.guide-gear-slot:has(.guide-gear) {
	margin-bottom: 24px;
}
.guide-gear {
	background: var(--guide-surface-warm);
	border: 1px dashed var(--guide-border-strong);
	border-radius: var(--guide-radius-lg);
	padding: var(--guide-space-5);
}

.guide-gear__head {
	display: flex;
	align-items: center;
	gap: var(--guide-space-3);
}

.guide-gear__badge {
	margin: 0;
	flex: 0 0 auto;
	font-size: var(--guide-fs-eyebrow);
	font-weight: 700;
	letter-spacing: 0.1em;
	color: var(--guide-surface);
	background: var(--guide-muted);
	border-radius: var(--guide-radius-pill);
	padding: 0.3rem 1rem;
}

.guide-gear__title {
	margin: 0;
	font-size: var(--guide-fs-h3);
	color: var(--guide-text);
}

.guide-gear__disclosure {
	margin: var(--guide-space-3) 0 0;
	font-size: var(--guide-fs-meta);
	line-height: 1.7;
	color: var(--guide-muted);
}

.guide-gear__list {
	margin: var(--guide-space-4) 0 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: var(--guide-space-3);
}

.guide-gear__item {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: var(--guide-space-3);
	background: var(--guide-surface);
	border: 1px solid var(--guide-border);
	border-radius: var(--guide-radius-md);
	padding: var(--guide-space-3) var(--guide-space-4);
}

.guide-gear__icon {
	font-size: 2.2rem;
	line-height: 1;
}

.guide-gear__body {
	min-width: 0;
}

.guide-gear__label {
	margin: 0;
	font-size: var(--guide-fs-label);
	font-weight: 700;
	color: var(--guide-text);
}

.guide-gear__reason {
	margin: var(--guide-space-1) 0 0;
	font-size: var(--guide-fs-meta);
	line-height: 1.6;
	color: var(--guide-muted);
}

.guide-gear__link {
	flex: 0 0 auto;
	white-space: nowrap;
	font-size: var(--guide-fs-meta);
	font-weight: 700;
	color: var(--guide-accent);
	border: 1px solid currentColor;
	border-radius: var(--guide-radius-pill);
	padding: 0.6rem 1.6rem;
	text-decoration: none;
}

.guide-gear__link:hover,
.guide-gear__link:focus-visible {
	background: var(--guide-accent);
	color: var(--guide-surface);
}

@media (max-width: 768px) {
	.guide-gear {
		padding: var(--guide-space-4);
	}

	.guide-gear__item {
		grid-template-columns: auto 1fr;
	}

	.guide-gear__link {
		grid-column: 1 / -1;
		text-align: center;
	}
}