/* =============================================
   wkw-add.css — 追加コンポーネント
   ・.wkw-split … 無料でできること / 有料になること の対比
   既存の wkw.css に追記、またはカスタムCSSへ貼り付け
   ============================================= */

.wkw-split {
	--wkw-pink:  #e8357a;
	--wkw-dark:  #c0206a;
	--wkw-deep:  #a01848;
	--wkw-green: #1a9e64;
	--wkw-ink:   #2a0f1a;

	font-family: inherit;
	max-width: 720px;
	margin: 26px auto;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
	color: var(--wkw-ink);
}

.wkw-split *,
.wkw-split *::before,
.wkw-split *::after { box-sizing: border-box; }

.wkw-split-col {
	border-radius: 12px;
	overflow: hidden;
	background: #fff;
	border: 1px solid #eee;
	display: flex;
	flex-direction: column;
}

.wkw-split-head {
	display: flex;
	align-items: baseline;
	gap: 8px;
	flex-wrap: wrap;
	padding: 10px 14px 9px;
	color: #fff;
	font-size: 13.5px;
	font-weight: 900;
	letter-spacing: 0.04em;
	line-height: 1.4;
}

.wkw-split-head span {
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.02em;
	color: rgba(255,255,255,0.85);
	background: rgba(0,0,0,0.18);
	border-radius: 20px;
	padding: 2px 9px;
	white-space: nowrap;
}

.wkw-split-col--free { border-color: rgba(30,160,100,0.28); }
.wkw-split-col--free .wkw-split-head { background: linear-gradient(90deg, #22b374, var(--wkw-green)); }

.wkw-split-col--paid { border-color: rgba(232,53,122,0.28); }
.wkw-split-col--paid .wkw-split-head { background: linear-gradient(90deg, #f06fa0, var(--wkw-pink)); }

.wkw-split-list {
	flex: 1;
	list-style: none !important;
	margin: 0 !important;
	padding: 8px 12px 10px !important;
}

.wkw-split-list li {
	position: relative;
	margin: 0 !important;
	padding: 6px 0 6px 22px;
	font-size: 12.5px;
	line-height: 1.65;
	border-bottom: 1px solid #f4f2f2;
}

.wkw-split-list li:last-child { border-bottom: none; }

.wkw-split-list li::before {
	position: absolute;
	left: 2px;
	top: 6px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 15px;
	height: 15px;
	border-radius: 50%;
	font-size: 10px;
	font-weight: 900;
	line-height: 1;
	color: #fff;
}

.wkw-split-col--free .wkw-split-list li::before {
	content: '\2713';
	background: var(--wkw-green);
}

.wkw-split-col--paid .wkw-split-list li::before {
	content: '\00a5';
	background: var(--wkw-pink);
}

.wkw-split-foot {
	padding: 9px 12px 11px;
	font-size: 11px;
	line-height: 1.75;
	border-top: 1px dashed #e8e4e4;
}

.wkw-split-col--free .wkw-split-foot { background: #f6fbf8; color: #1c5a42; }
.wkw-split-col--paid .wkw-split-foot { background: #fff6fa; color: #7a2340; }

.wkw-split-foot b { font-weight: 900; }
.wkw-split-col--free .wkw-split-foot b { color: var(--wkw-green); }
.wkw-split-col--paid .wkw-split-foot b { color: var(--wkw-dark); }

@media (max-width: 560px) {
	.wkw-split { grid-template-columns: 1fr; gap: 10px; margin: 20px auto; }
	.wkw-split-list li { font-size: 12px; }
}