.tf-kw-selector,
.tf-kw-compare {
	--tf-kw-yellow: #f4d500;
	--tf-kw-purple: #5b2680;
	--tf-kw-ink: #151515;
}

.tf-kw-selector {
	margin: 0 0 28px;
	padding: clamp(20px, 3vw, 34px);
	border: 1px solid #dedede;
	border-top: 5px solid var(--tf-kw-yellow);
	border-radius: 16px;
	background: linear-gradient(135deg, #fff 0%, #f8f6fb 100%);
	box-shadow: 0 14px 35px rgba(24, 16, 29, .08);
}

.tf-kw-selector-intro span,
.tf-kw-compare summary span {
	display: block;
	margin-bottom: 5px;
	color: var(--tf-kw-purple);
	font-size: 12px;
	font-weight: 800;
	letter-spacing: .12em;
}

.tf-kw-selector-intro h2 {
	margin: 0 0 8px;
	color: var(--tf-kw-ink);
	font-size: clamp(24px, 3vw, 36px);
}

.tf-kw-selector-intro p {
	margin: 0 0 20px;
	color: #4a4a4a;
}

.tf-kw-compare {
	margin: 32px 0;
	border: 1px solid #d8d2dd;
	border-radius: 16px;
	background: #fff;
	overflow: hidden;
}

.tf-kw-compare summary {
	position: relative;
	padding: 22px 54px 22px 24px;
	background: linear-gradient(120deg, #f4d500 0%, #f4d500 16%, #fff 16%);
	cursor: pointer;
	list-style: none;
}

.tf-kw-compare summary::-webkit-details-marker { display: none; }
.tf-kw-compare summary strong,
.tf-kw-compare summary small { display: block; padding-left: clamp(40px, 8vw, 100px); }
.tf-kw-compare summary strong { color: var(--tf-kw-ink); font-size: clamp(20px, 2.5vw, 30px); }
.tf-kw-compare summary small { margin-top: 4px; color: #56505a; font-size: 14px; }
.tf-kw-compare summary span { padding-left: clamp(40px, 8vw, 100px); }

.tf-kw-compare-body { padding: 22px; }
.tf-kw-compare-scroll { overflow-x: auto; }
.tf-kw-compare table { width: 100%; min-width: 980px; border-collapse: collapse; font-size: 14px; }
.tf-kw-compare th,
.tf-kw-compare td { padding: 14px 12px; border-bottom: 1px solid #ece8ef; text-align: left; vertical-align: top; }
.tf-kw-compare thead th { background: #24172d; color: #fff; font-size: 12px; letter-spacing: .02em; }
.tf-kw-compare tbody th { min-width: 150px; }
.tf-kw-compare tbody tr:hover { background: #fcfbf5; }
.tf-kw-compare a { color: var(--tf-kw-purple); text-decoration: none; }
.tf-kw-compare a strong,
.tf-kw-compare a small { display: block; }
.tf-kw-compare a small { margin-top: 4px; color: #666; font-weight: 500; }
.tf-kw-compare-note { margin: 18px 0 0; padding: 14px 16px; border-left: 4px solid var(--tf-kw-yellow); background: #faf8e8; font-size: 13px; }
.tf-kw-compare-price { white-space: nowrap; font-weight: 800; }

.tf-kw-card-guide {
	display: grid;
	gap: 3px;
	margin: 10px 0 6px;
	padding: 10px 12px;
	border-left: 4px solid var(--tf-kw-yellow);
	background: #f8f6fa;
	color: #252027;
	font-size: 12px;
}
.tf-kw-card-guide strong { color: var(--tf-kw-purple); font-size: 13px; }
.tf-kw-card-guide small { color: #625c66; }

.tf-kw-product-options { margin: 16px 0 22px; padding: 18px; border: 1px solid #ddd7e2; border-left: 4px solid #f4d500; border-radius: 8px; background: #fff; }
.tf-kw-product-options h2 { margin: 0 0 12px; font-size: 19px; }
.tf-kw-product-options label { display: block; margin-bottom: 6px; font-weight: 700; }
.tf-kw-product-options select { width: 100%; max-width: 100%; margin-bottom: 12px; }
.tf-kw-product-options ul { margin: 0 0 10px; padding-left: 18px; }
.tf-kw-product-options li { margin: 7px 0; }
.tf-kw-product-options li small { display: block; color: #59545f; }
.tf-kw-product-options p { margin: 0; color: #59545f; font-size: 13px; }

@media (max-width: 720px) {
	.tf-kw-selector { padding: 18px; border-radius: 12px; }
	.tf-kw-compare summary { padding: 18px; background: linear-gradient(90deg, var(--tf-kw-yellow) 0 8px, #fff 8px); }
	.tf-kw-compare summary span,
	.tf-kw-compare summary strong,
	.tf-kw-compare summary small { padding-left: 8px; }
	.tf-kw-compare-body { padding: 14px; }
}