/* ============================================================
   country_ranking_card.css — heritage_country_ranking.php(国別世界遺産保有数ランキング)専用CSS
   heritage_country_ranking.php のみで読み込む。style.css には影響しない。

   方針:
   - style.css は一切編集しない。
   - 全セレクタに .ccrank- プレフィックスを付与する。
   - 国旗絵文字は不採用(mst_countryにISO国コード相当のカラムが無いことを実測確認済み)。
   - 新色は追加せず、既存K-Cパレット(#0085B2)のみを使用(上位3位も含め特別な金銀銅配色は無し)。
   - 全件表示+スクロール内包(案A)。SEO上、全件がDOMに存在する状態を維持する。
   ============================================================ */

.ccrank-list {
	max-height: 600px;
	overflow-y: auto;
	border: 1px solid #e2e2e2;
	border-radius: 8px;
	padding: 4px 12px;
}

.ccrank-row {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 4px;
	border-bottom: 1px dotted #eee;
}
.ccrank-row:last-child {
	border-bottom: none;
}

.ccrank-rank {
	flex: 0 0 34px;
	text-align: center;
	font-weight: bold;
	color: #666;
	font-size: 14px;
}

.ccrank-country {
	flex: 0 0 auto;
	width: 150px;
	font-size: 14px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.ccrank-country a {
	color: #036;
	text-decoration: none;
}
.ccrank-country a:hover {
	text-decoration: underline;
}

.ccrank-bar-track {
	flex: 1 1 auto;
	background: #f2f2f2;
	border-radius: 6px;
	height: 16px;
	overflow: hidden;
	min-width: 40px;
}
.ccrank-bar-fill {
	height: 100%;
	background: #0085B2;
	border-radius: 6px 0 0 6px;
}

.ccrank-count {
	flex: 0 0 56px;
	text-align: right;
	font-size: 13px;
	color: #555;
}

/* ---- レスポンシブ ---- */
@media (max-width: 767px) {
	.ccrank-country {
		width: 100px;
		font-size: 13px;
	}
	.ccrank-count {
		flex: 0 0 44px;
		font-size: 12px;
	}
}