/* 競馬マエストロ レースデータ＆予想 */

.km {
	--km-green: #1b7a43;
	--km-green-dark: #145c33;
	--km-red: #c0392b;
	--km-gold: #b8860b;
	--km-bg: #ffffff;
	--km-border: #dcdcdc;
	--km-text: #333333;

	max-width: 860px;
	margin: 1.5em auto;
	color: var(--km-text);
	font-size: 15px;
	line-height: 1.7;
}

.km-head {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.5em;
	padding: 0.9em 1.2em;
	background: linear-gradient(135deg, var(--km-green), var(--km-green-dark));
	color: #fff;
	border-radius: 12px;
}

.km-head-title {
	font-size: 1.12em;
	font-weight: 700;
}

.km-badge {
	display: inline-block;
	padding: 0.05em 0.55em;
	border-radius: 999px;
	font-size: 0.72em;
	font-weight: 700;
	background: #eee;
	color: #555;
	vertical-align: middle;
}

.km-badge-result {
	background: #ffd75e;
	color: #5b4300;
}

/* 日付ナビ */
.km-datenav {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4em;
	padding: 0.6em 0.2em 0;
}

.km-datenav-item {
	padding: 0.15em 0.8em;
	border-radius: 999px;
	border: 1px solid var(--km-border);
	background: #fff;
	font-size: 0.85em;
	text-decoration: none;
	color: var(--km-text);
}

.km-datenav-item.is-current {
	background: var(--km-green);
	border-color: var(--km-green);
	color: #fff;
	font-weight: 700;
}

/* 会場タブ */
.km-tabs {
	display: flex;
	gap: 0.4em;
	padding: 0.7em 0 0.2em;
}

.km-tab {
	flex: 1;
	padding: 0.45em 0.6em;
	border: 1px solid var(--km-border);
	border-radius: 8px;
	background: #fff;
	color: var(--km-text);
	font-size: 1em;
	font-weight: 700;
	cursor: pointer;
	transition: background 0.15s, color 0.15s;
}

.km-tab.is-active {
	background: var(--km-green);
	border-color: var(--km-green);
	color: #fff;
}

.km-venue {
	display: none;
}

.km-venue.is-active {
	display: block;
}

/* レース（アコーディオン）: 枠はこのカード1つだけ */
.km-race {
	border: 1px solid var(--km-border);
	border-radius: 10px;
	margin: 0.7em 0;
	background: #fff;
	overflow: hidden;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
}

.km-race-summary {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.5em;
	padding: 0.6em 0.9em;
	cursor: pointer;
	background: #f7f9f7;
	list-style: none;
}

.km-race-summary::-webkit-details-marker {
	display: none;
}

.km-race[open] > .km-race-summary {
	background: #eaf3ec;
	border-bottom: 1px solid var(--km-border);
}

.km-race-no {
	flex: 0 0 auto;
	min-width: 2.6em;
	text-align: center;
	padding: 0.1em 0.3em;
	border-radius: 6px;
	background: var(--km-green);
	color: #fff;
	font-weight: 700;
}

.km-race-name {
	font-weight: 700;
}

.km-race-meta {
	font-size: 0.82em;
	color: #666;
}

.km-badge-grade {
	margin-left: 0.4em;
	color: #fff;
	background: #888;
}

.km-grade-g1 { background: #2b5fc0; }
.km-grade-g2 { background: #c0392b; }
.km-grade-g3 { background: #1b7a43; }
.km-grade-jyusho, .km-grade-l { background: #8e6ac0; }
.km-grade-特別 { background: #888; }

.km-race-body {
	padding: 0.8em 0.9em;
}

/* セクション */
.km-sec {
	margin-bottom: 1.1em;
}

.km-sec-title {
	margin: 0 0 0.4em;
	padding-left: 0.5em;
	border-left: 4px solid var(--km-green);
	font-size: 1em;
	font-weight: 700;
}

/* 予想（枠なし・見出しのみ） */
.km-pred {
	padding: 0;
}

.km-mark {
	color: var(--km-red);
	font-weight: 700;
}

.km-pred-axis {
	margin: 0 0 0.2em;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.55em;
}

.km-pred-note {
	margin: 0 0 0.4em;
	font-size: 0.85em;
	color: #666;
}

.km-conf {
	font-size: 0.78em;
	padding: 0.1em 0.6em;
	border-radius: 999px;
	background: #e8e8e8;
	color: #555;
}

.km-conf-高 { background: #d9efe0; color: var(--km-green-dark); }
.km-conf-やや高 { background: #e7f2ea; color: var(--km-green-dark); }
.km-conf-低 { background: #fbe4e0; color: var(--km-red); }

.km-hl {
	font-size: 0.78em;
	padding: 0.1em 0.6em;
	border-radius: 999px;
	background: #eee;
	color: #555;
}

.km-hl-5, .km-hl-6 { background: #fdf0d8; color: #8a6100; }
.km-hl-7, .km-hl-8, .km-hl-9 { background: #fbe4e0; color: var(--km-red); }

.km-gem {
	margin-top: 0.5em;
	padding: 0.55em 0.8em;
	background: #fffbea;
	border-radius: 8px;
}

.km-gem-head {
	margin: 0;
}

.km-gem-buy {
	display: inline-block;
	white-space: nowrap;
	margin-left: 0.6em;
	font-size: 0.78em;
	padding: 0.1em 0.6em;
	border-radius: 999px;
	background: var(--km-gold);
	color: #fff;
}

.km-gem-reasons {
	margin: 0.3em 0 0;
	padding-left: 1.4em;
	font-size: 0.88em;
	color: #555;
}

.km-cautions {
	margin-top: 0.5em;
	font-size: 0.88em;
	color: #7a4a00;
}

.km-cautions p {
	margin: 0.15em 0;
}

/* テーブル共通 */
.km-scroll {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.km-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.88em;
	white-space: nowrap;
}

.km .km-table th,
.km .km-table td {
	border: 1px solid #e3e3e3;
	padding: 0.3em 0.55em;
	text-align: center;
	background: #fff;
	color: var(--km-text);
}

/* ヘッダーは緑地×白文字（テーマの上書きに負けないよう明示指定） */
.km .km-table thead th {
	background: var(--km-green);
	color: #fff;
	border-color: #2e8653;
	font-weight: 700;
}

.km-table .km-name {
	text-align: left;
	font-weight: 700;
}

.km-table .km-prev {
	font-size: 0.92em;
	color: #666;
}

.km-mark-cell {
	color: var(--km-red);
	font-weight: 700;
}

.km-cancel td {
	opacity: 0.45;
}

/* 枠色（JRA標準） */
.km-waku {
	display: inline-block;
	min-width: 1.5em;
	padding: 0.05em 0.2em;
	border-radius: 4px;
	border: 1px solid #ccc;
	font-weight: 700;
	line-height: 1.4;
}

.km-waku-1 { background: #fff; color: #333; }
.km-waku-2 { background: #222; color: #fff; }
.km-waku-3 { background: #d33; color: #fff; }
.km-waku-4 { background: #26c; color: #fff; }
.km-waku-5 { background: #fd0; color: #333; }
.km-waku-6 { background: #2a4; color: #fff; }
.km-waku-7 { background: #e80; color: #fff; }
.km-waku-8 { background: #f9c; color: #333; }

/* 結果 */
.km-finish .km-top3 td {
	background: #fdf7e3;
}

.km-fin {
	font-weight: 700;
}

.km-payouts th {
	width: 5.5em;
	background: #f0f4f0;
}

.km-payouts td {
	text-align: left;
}

.km-pay {
	display: inline-block;
	margin-right: 1.1em;
}

.km-pay-comb {
	font-weight: 700;
	margin-right: 0.25em;
}

.km-disclaimer {
	margin-top: 0.8em;
	font-size: 0.78em;
	color: #888;
}

@media (max-width: 600px) {
	.km {
		font-size: 14px;
	}

	.km-race-summary {
		gap: 0.35em;
	}

	.km-race-meta {
		flex-basis: 100%;
	}
}

/* 💎妙味度・一発枠 */
.km-gem-tier {
	font-size: 0.8em;
	color: var(--km-gold);
	font-weight: 700;
	white-space: nowrap;
}

.km-gem-longshot {
	display: inline-block;
	white-space: nowrap;
	font-size: 0.75em;
	padding: 0.1em 0.6em;
	border-radius: 999px;
	background: #fbe4e0;
	color: var(--km-red);
	font-weight: 700;
}

/* 的中実績 */
.km-record .km-head {
	border-radius: 12px 12px 0 0;
}

.km-record-summary {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6em;
	padding: 0.9em;
	background: #f2f6f2;
	border: 1px solid var(--km-border);
	border-top: none;
	border-radius: 0 0 12px 12px;
	margin-bottom: 0.9em;
}

.km-record-stat {
	flex: 1;
	min-width: 130px;
	background: #fff;
	border: 1px solid var(--km-border);
	border-radius: 10px;
	padding: 0.5em 0.8em;
	text-align: center;
}

.km-record-stat-label {
	display: block;
	font-size: 0.75em;
	color: #666;
}

.km-record-stat-value {
	display: block;
	font-size: 1.25em;
	font-weight: 700;
	color: var(--km-green-dark);
}

.km-record-stat-value small,
.km-record-stat-label small {
	font-size: 0.6em;
	font-weight: 400;
	color: #888;
}

.km-record-table .km-record-hit td {
	background: #fdf7e3;
}

.km-record-mark {
	font-weight: 700;
	white-space: nowrap;
}

/* 💎配当妙味馬セクション */
.km-gem-flag {
	margin-left: 0.3em;
	font-size: 0.9em;
}

.km-gemsec .km-sec-title {
	border-left-color: var(--km-gold);
}

.km-gem-head {
	display: flex;
	align-items: center;
	gap: 0.5em;
	flex-wrap: wrap;
}

.km-gem-why {
	margin: 0.45em 0 0;
	font-size: 0.85em;
	font-weight: 700;
	color: #7a5c00;
}

.km-gem-note {
	margin: 0.5em 0 0;
	font-size: 0.78em;
	color: #999;
}

/* raceページ・出走予定馬記事 連携 */
.km-racepage .km-race-body {
	border: 1px solid var(--km-border);
	border-top: none;
	border-radius: 0 0 12px 12px;
	background: #fff;
	margin-bottom: 1em;
}

.km-crosslink {
	margin: 0.8em 0 0;
	font-weight: 700;
}

.km-history td.km-name {
	white-space: nowrap;
}

/* 的中実績: 月プルダウン */
.km-record .km-head {
	justify-content: space-between;
}

.km-record-month {
	padding: 0.3em 0.7em;
	border-radius: 8px;
	border: 1px solid rgba(255, 255, 255, 0.4);
	background: rgba(255, 255, 255, 0.14);
	color: #fff;
	font-size: 0.85em;
	font-weight: 700;
	cursor: pointer;
}

.km-record-month option {
	color: #333;
}