/*
  ranking.css
  ランキング記事（[dkb_rank]ショートコード・比較表）用のスタイル
*/

/* ランキングNo.バッジ（[dkb_rank num="1"]） */
.dkb-rank-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 3.2em;
	margin-bottom: 0.4em;
	padding: 0.3em 0.9em;
	border-radius: var(--dkb-radius-s);
	background: linear-gradient(135deg, var(--dkb-color-accent), var(--dkb-color-accent-dark));
	color: var(--dkb-color-white);
	font-family: var(--dkb-font-accent);
	font-size: 1.1rem;
	font-weight: bold;
	letter-spacing: 0.03em;
	box-shadow: 0 3px 8px rgba(123, 30, 58, 0.3);
}

/* 1位のみゴールドの縁取りで特別感を出す */
.dkb-rank-badge--first {
	border: 1px solid var(--dkb-color-gold);
}

/* ランキング見出し直後のセクション区切り */
.dkb-rank-badge + h2,
.dkb-rank-badge + h3 {
	margin-top: 0.2em;
}

/* 比較表（ランキング記事内の表組み） */
.dkb-compare-table,
table.dkb-compare-table {
	width: 100%;
	margin: 1.5em 0;
	border-collapse: collapse;
	font-size: 0.9rem;
}

.dkb-compare-table th,
.dkb-compare-table td {
	padding: 0.8em 1em;
	border: 1px solid var(--dkb-color-gray-300);
	text-align: left;
}

.dkb-compare-table th {
	background-color: var(--dkb-color-black);
	color: var(--dkb-color-white);
	font-weight: bold;
	white-space: nowrap;
}

.dkb-compare-table tr:nth-child(even) td {
	background-color: var(--dkb-color-gray-100);
}

/* スマホでは横スクロール可能にして表崩れを防ぐ */
@media (max-width: 600px) {
	.dkb-compare-table-wrap {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	.dkb-compare-table {
		min-width: 480px;
	}
}