/* ============================================================
   梶川謙 競馬予想エンジン — 共通デザイン
   レース / 騎手 / 厩舎 / コースの全ページで使う。
   SWELLと衝突しないよう、すべて .kk- 接頭辞で閉じる。
   ============================================================ */

/*
 * プラグイン独自テンプレート（騎手・厩舎・コース・特集・レース詳細）用の幅コンテナ。
 * これらのページはSWELLの本文コンテナの外に描画されるため、自前で幅を揃える。
 * SWELL側の .l-container が効く場合はそちらの幅設定が優先され、
 * 効かない環境でもこのフォールバックで中央寄せされる。
 */
.kk-container {
	max-width: 1160px;
	margin: 0 auto;
	padding: 24px 16px 48px;
}

.kk-wrap {
	/* ---- デザイントークン ---- */
	--kk-primary: #16437e;        /* 濃紺: 見出し・アクティブ */
	--kk-primary-deep: #0e2f5c;   /* さらに濃い紺: グラデーション用 */
	--kk-primary-soft: #eaf1fa;   /* 紺の薄地: ホバー・帯 */
	--kk-gold: #c9a227;           /* 金: 本命・強調のアクセント */
	--kk-red: #d7263d;            /* オッズ・強調数字 */
	--kk-border: #dfe5ec;
	--kk-border-soft: #ecf0f5;
	--kk-bg: #f4f6f9;
	--kk-surface: #ffffff;
	--kk-text: #1f2733;
	--kk-muted: #66707d;
	--kk-shadow: 0 1px 3px rgba(16, 32, 64, 0.08), 0 1px 2px rgba(16, 32, 64, 0.04);
	--kk-radius: 10px;

	font-size: 14px;
	color: var(--kk-text);
	line-height: 1.65;
	font-feature-settings: "palt";
	-webkit-font-smoothing: antialiased;
}

.kk-wrap * {
	box-sizing: border-box;
}

.kk-wrap a {
	color: var(--kk-primary);
	text-decoration: none;
}

.kk-wrap a:hover {
	text-decoration: underline;
}

/* ============================================================
   タブナビゲーション（日付 / 競馬場 / R）
   ============================================================ */

.kk-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	margin-bottom: 8px;
	background: none;
	border: none;
}

.kk-tab {
	flex: 1 1 auto;
	min-width: 56px;
	padding: 9px 12px;
	text-align: center;
	background: var(--kk-surface);
	color: var(--kk-text);
	text-decoration: none;
	font-size: 13px;
	white-space: nowrap;
	border: 1px solid var(--kk-border);
	border-radius: 8px;
	box-shadow: var(--kk-shadow);
	transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.kk-tab:hover {
	background: var(--kk-primary-soft);
	border-color: var(--kk-primary);
	text-decoration: none;
	color: var(--kk-primary);
}

.kk-tab.is-active {
	background: linear-gradient(160deg, var(--kk-primary) 0%, var(--kk-primary-deep) 100%);
	border-color: var(--kk-primary-deep);
	color: #fff;
	font-weight: 700;
	box-shadow: 0 2px 6px rgba(14, 47, 92, 0.35);
}

.kk-tabs--venue .kk-tab {
	font-weight: 600;
	font-size: 14px;
}

.kk-tabs--race {
	gap: 3px;
}

.kk-tabs--race .kk-tab {
	flex: 0 1 auto;
	min-width: 46px;
	padding: 7px 8px;
	font-size: 12.5px;
	border-radius: 6px;
}

/* ============================================================
   ページヘッダ（レース情報 / 騎手・厩舎・コースの見出し）
   ============================================================ */

.kk-racehead {
	position: relative;
	background: var(--kk-surface);
	border: 1px solid var(--kk-border);
	border-radius: var(--kk-radius);
	box-shadow: var(--kk-shadow);
	padding: 18px 20px 16px;
	margin: 14px 0 20px;
	overflow: hidden;
}

/* 上辺のブランドライン（紺→金のグラデーション） */
.kk-racehead::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 4px;
	background: linear-gradient(90deg, var(--kk-primary-deep) 0%, var(--kk-primary) 55%, var(--kk-gold) 100%);
}

.kk-racehead__title {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}

.kk-wrap .kk-racehead__title h1 {
	font-size: 21px;
	margin: 0;
	padding: 0;
	font-weight: 800;
	line-height: 1.35;
	letter-spacing: 0.01em;
	color: var(--kk-primary-deep);
	background: none;
	border: none;
	box-shadow: none;
}

.kk-wrap .kk-racehead__title h1::before,
.kk-wrap .kk-racehead__title h1::after {
	content: none;
	display: none;
}

.kk-rno {
	background: linear-gradient(160deg, var(--kk-primary) 0%, var(--kk-primary-deep) 100%);
	color: #fff;
	font-weight: 800;
	padding: 4px 11px;
	border-radius: 6px;
	font-size: 14px;
	letter-spacing: 0.03em;
	flex-shrink: 0;
}

/* ---- グレードバッジ（JRA準拠の配色: G1青 / G2赤 / G3緑） ---- */
.kk-grade {
	font-size: 11px;
	font-weight: 800;
	padding: 3px 8px;
	border-radius: 4px;
	letter-spacing: 0.05em;
	color: #fff;
	background: var(--kk-muted);
	border: none;
}

.kk-grade--1 { background: #2455c3; }
.kk-grade--2 { background: #d0342f; }
.kk-grade--3 { background: #1e9e58; }
.kk-grade--4 { background: #8256c9; }
.kk-grade--5 { background: var(--kk-primary); }   /* OP・特別 */
.kk-grade--6 { background: #8a7a24; }             /* リステッド */

.kk-racehead__meta {
	margin-top: 8px;
	font-size: 13.5px;
	font-weight: 600;
}

.kk-racehead__meta--sub {
	color: var(--kk-muted);
	font-weight: 400;
	margin-top: 3px;
}

.kk-racehead__prize {
	margin-top: 5px;
	font-size: 12px;
	color: var(--kk-gold);
	font-weight: 700;
}

/* ============================================================
   セクション見出し
   ============================================================ */

/*
 * 見出しは疑似要素を使わない。
 * SWELLは記事内の h2/h3 の ::before/::after を自前の見出しデザインに使うため、
 * 疑似要素でアクセントを付けると装飾が合成されて壊れる（全幅の帯になる等）。
 * アクセントは border-left で表現し、SWELL側の装飾は明示的に打ち消す。
 */
.kk-wrap .kk-h2,
.kk-wrap h2.kk-h2 {
	display: block;
	font-size: 17px;
	font-weight: 800;
	color: var(--kk-primary-deep);
	margin: 30px 0 10px;
	padding: 2px 0 7px 12px;
	background: none;
	border: none;
	border-left: 5px solid var(--kk-primary);
	border-bottom: 2px solid var(--kk-border-soft);
	border-radius: 0;
	box-shadow: none;
	line-height: 1.4;
	position: static;
}

.kk-wrap .kk-h2::before,
.kk-wrap .kk-h2::after,
.kk-wrap h2.kk-h2::before,
.kk-wrap h2.kk-h2::after {
	content: none;
	display: none;
}

.kk-wrap .kk-h3,
.kk-wrap h3.kk-h3 {
	display: block;
	font-size: 14.5px;
	font-weight: 800;
	color: var(--kk-primary-deep);
	margin: 18px 0 6px;
	padding: 0;
	background: none;
	border: none;
	border-radius: 0;
	box-shadow: none;
	position: static;
}

.kk-wrap .kk-h3::before,
.kk-wrap .kk-h3::after,
.kk-wrap h3.kk-h3::before,
.kk-wrap h3.kk-h3::after {
	content: none;
	display: none;
}

.kk-h3__sub {
	font-weight: 500;
	font-size: 12px;
	color: var(--kk-muted);
	margin-left: 6px;
}

.kk-para {
	margin: 0 0 10px;
	font-size: 13.5px;
	color: var(--kk-text);
}

.kk-para--fine {
	font-size: 12px;
	color: var(--kk-muted);
	margin-top: 6px;
}

/* ============================================================
   テーブル共通（出馬表・成績表・過去結果）
   ============================================================ */

/*
 * 表は .kk-scroll ラッパーの中に置く。
 * カードの枠・影・角丸はラッパー側に持たせ、表自体は
 * 「最小100%幅・内容が広ければ自然に広がる」ようにする。
 * 内容がラッパーより広いときはラッパー内で横スクロールし、
 * ページ全体は横に伸びない。ヘッダと本体の列は常に揃う。
 */
.kk-scroll {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	background: var(--kk-surface);
	border: 1px solid var(--kk-border);
	border-radius: var(--kk-radius);
	box-shadow: var(--kk-shadow);
	margin-bottom: 12px;
}

.kk-table {
	width: auto;
	min-width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	background: var(--kk-surface);
	display: table;
	table-layout: auto;
	white-space: nowrap;
	border: none;
	border-radius: 0;
	box-shadow: none;
	margin: 0;
	font-variant-numeric: tabular-nums;
}

.kk-table thead th {
	background: linear-gradient(180deg, #f4f7fb 0%, #ebf0f7 100%);
	border: none;
	border-bottom: 2px solid var(--kk-border);
	border-right: 1px solid var(--kk-border-soft);
	padding: 9px 8px;
	font-size: 11.5px;
	font-weight: 700;
	color: var(--kk-primary-deep);
	letter-spacing: 0.03em;
}

.kk-table thead th:last-child {
	border-right: none;
}

.kk-table tbody td {
	border: none;
	border-bottom: 1px solid var(--kk-border-soft);
	border-right: 1px solid var(--kk-border-soft);
	padding: 9px 8px;
	font-size: 13px;
	background: var(--kk-surface);
}

.kk-table tbody td:last-child {
	border-right: none;
}

.kk-table tbody tr:last-child td {
	border-bottom: none;
}

.kk-table tbody tr:nth-child(even) td {
	background: #fafbfd;
}

.kk-table tbody tr:hover td {
	background: var(--kk-primary-soft);
}

/* 印つき（推奨馬）の行: 金のハイライト */
.kk-table tbody tr.is-pick td {
	background: #fdf6e0;
	border-bottom-color: #f0e3b8;
}

.kk-table tbody tr.is-pick:hover td {
	background: #faefcd;
}

/* ---- 列の性格づけ ---- */
.kk-c-num { text-align: center; }

.kk-c-mark {
	text-align: center;
	font-size: 16px;
	font-weight: 800;
	color: var(--kk-red);
}

.kk-c-name {
	font-weight: 700;
	min-width: 9em;
}

.kk-c-style,
.kk-c-jockey { text-align: center; }

.kk-c-jockey { min-width: 5.5em; }

.kk-umaban {
	font-weight: 800;
	font-size: 14px;
}

.kk-strong {
	font-weight: 800;
	color: var(--kk-primary);
}

.kk-odds {
	color: var(--kk-red);
	font-weight: 800;
}

.kk-odds-sub { color: var(--kk-muted); }

/* ---- 枠番チップ ---- */
.kk-waku {
	display: inline-block;
	width: 24px;
	height: 24px;
	line-height: 24px;
	text-align: center;
	font-weight: 800;
	font-size: 12.5px;
	border: 1px solid rgba(0, 0, 0, 0.12);
	border-radius: 5px;
	box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.08);
}

/* ============================================================
   概要テーブル（レース概要・通算成績）
   ============================================================ */

.kk-summary {
	width: auto;
	min-width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	background: var(--kk-surface);
	font-size: 13.5px;
	border: none;
	border-radius: 0;
	box-shadow: none;
	margin: 0;
}

.kk-summary th,
.kk-summary td {
	border: none;
	border-bottom: 1px solid var(--kk-border-soft);
	padding: 10px 14px;
	text-align: left;
}

.kk-summary tr:last-child th,
.kk-summary tr:last-child td {
	border-bottom: none;
}

.kk-summary th {
	background: #f4f7fb;
	width: 9em;
	white-space: nowrap;
	color: var(--kk-primary-deep);
	font-weight: 700;
	font-size: 12.5px;
	border-right: 1px solid var(--kk-border-soft);
}

.kk-summary td {
	font-weight: 600;
}

/* ============================================================
   IDM上位リスト
   ============================================================ */

.kk-toplist {
	margin: 0 0 10px;
	padding: 6px 0;
	font-size: 13.5px;
	list-style: none;
	counter-reset: kk-rank;
	background: var(--kk-surface);
	border: 1px solid var(--kk-border);
	border-radius: var(--kk-radius);
	box-shadow: var(--kk-shadow);
}

.kk-toplist li {
	counter-increment: kk-rank;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 9px 14px;
	border-bottom: 1px solid var(--kk-border-soft);
	margin: 0;
}

.kk-toplist li:last-child {
	border-bottom: none;
}

.kk-toplist li::before {
	content: counter(kk-rank);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--kk-primary);
	color: #fff;
	font-size: 12px;
	font-weight: 800;
	flex-shrink: 0;
}

.kk-toplist li:first-child::before {
	background: var(--kk-gold);
}

/* ============================================================
   注意書き・免責
   ============================================================ */

.kk-caution {
	margin-top: 14px;
	padding: 11px 14px;
	background: #fffbea;
	border: 1px solid #f0e0a8;
	border-left: 4px solid var(--kk-gold);
	border-radius: 8px;
	font-size: 12.5px;
	color: #6b5a2b;
	line-height: 1.7;
}

.kk-note {
	margin-top: 10px;
	padding: 11px 14px;
	background: #fdf3f4;
	border: 1px solid #eccdd2;
	border-left: 4px solid var(--kk-red);
	border-radius: 8px;
	font-size: 12.5px;
	color: #6b4b4b;
	line-height: 1.7;
}

/* ============================================================
   その他
   ============================================================ */

.kk-permalink {
	margin: 14px 0;
}

.kk-wrap .kk-permalink a {
	display: inline-block;
	padding: 9px 18px;
	background: var(--kk-surface);
	border: 1px solid var(--kk-primary);
	border-radius: 8px;
	color: var(--kk-primary);
	font-size: 13px;
	font-weight: 700;
	box-shadow: var(--kk-shadow);
	transition: background 0.15s, color 0.15s;
	text-decoration: none;
}

.kk-wrap .kk-permalink a:hover {
	background: var(--kk-primary);
	color: #fff;
	text-decoration: none;
}

/* ============================================================
   コース選択ツール（TOPの競馬場データ）
   ============================================================ */

.kk-ctool__venues { margin-bottom: 8px; }
.kk-ctool__courses { margin-bottom: 12px; }

.kk-wrap button.kk-ctool__chip {
	cursor: pointer;
	font-family: inherit;
	appearance: none;
}

.kk-wrap .kk-chips .kk-ctool__chip.is-on {
	background: linear-gradient(160deg, var(--kk-primary) 0%, var(--kk-primary-deep) 100%);
	border-color: var(--kk-primary-deep);
	color: #fff;
}

.kk-ctool__card {
	background: var(--kk-surface);
	border: 1px solid var(--kk-border);
	border-left: 5px solid var(--kk-primary);
	border-radius: var(--kk-radius);
	box-shadow: var(--kk-shadow);
	padding: 14px 16px;
}

.kk-ctool__card:empty { display: none; }

.kk-ctool__head {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	margin-bottom: 8px;
}

.kk-ctool__head strong {
	font-size: 16px;
	color: var(--kk-primary-deep);
}

.kk-ctool__pace {
	background: var(--kk-primary-soft);
	color: var(--kk-primary);
	font-size: 12px;
	font-weight: 700;
	padding: 3px 9px;
	border-radius: 999px;
}

.kk-ctool__card .kk-scroll { margin-bottom: 8px; }

/* ============================================================
   鉄板チェック
   ============================================================ */

.kk-teppan {
	background: var(--kk-surface);
	border: 1px solid var(--kk-border);
	border-left: 5px solid var(--kk-gold);
	border-radius: var(--kk-radius);
	box-shadow: var(--kk-shadow);
	padding: 14px 16px;
	margin-bottom: 12px;
}

.kk-teppan--s {
	border-left-color: var(--kk-red);
	background: linear-gradient(180deg, #fffdf7 0%, #fff 60%);
}

.kk-teppan__head {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	margin-bottom: 8px;
}

.kk-teppan__badge {
	background: linear-gradient(160deg, #b8860b 0%, var(--kk-gold) 100%);
	color: #fff;
	font-weight: 800;
	font-size: 13px;
	padding: 4px 12px;
	border-radius: 6px;
	letter-spacing: 0.06em;
}

.kk-teppan--s .kk-teppan__badge {
	background: linear-gradient(160deg, #a81c2c 0%, var(--kk-red) 100%);
}

.kk-teppan__horse {
	font-size: 17px;
	font-weight: 800;
	color: var(--kk-primary-deep);
}

.kk-teppan__jockey {
	color: var(--kk-muted);
	font-size: 13px;
}

.kk-teppan__chip {
	display: inline-block;
	background: var(--kk-gold);
	color: #fff;
	font-size: 10px;
	font-weight: 800;
	padding: 1px 6px;
	border-radius: 4px;
	margin-left: 4px;
	vertical-align: middle;
}

/* ============================================================
   回遊ウィジェット（記事下の関連リンク）
   ============================================================ */

.kk-related {
	margin-top: 26px;
}

.kk-wrap .kk-related__title,
.kk-wrap h3.kk-related__title {
	font-size: 13px;
	font-weight: 700;
	color: var(--kk-muted);
	margin: 14px 0 7px;
	padding: 0;
	background: none;
	border: none;
	border-radius: 0;
	box-shadow: none;
	letter-spacing: 0.02em;
	position: static;
}

.kk-wrap .kk-related__title::before,
.kk-wrap .kk-related__title::after {
	content: none;
	display: none;
}

.kk-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 7px;
}

/*
 * リンク色はSWELLが .post_content a 相当の強いセレクタで上書きしてくるため、
 * a要素込みの詳細度で書く（.kk-chipだけだと負けて文字が消える）。
 */
.kk-wrap a.kk-chip,
.kk-wrap .kk-chips a.kk-chip {
	display: inline-block;
	padding: 7px 13px;
	background: var(--kk-surface);
	border: 1px solid var(--kk-border);
	border-radius: 999px;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--kk-primary);
	box-shadow: var(--kk-shadow);
	transition: background 0.15s, color 0.15s, border-color 0.15s;
	line-height: 1.4;
	text-decoration: none;
}

.kk-wrap a.kk-chip:hover,
.kk-wrap .kk-chips a.kk-chip:hover {
	background: var(--kk-primary);
	border-color: var(--kk-primary-deep);
	color: #fff;
	text-decoration: none;
}

/* ============================================================
   TOPページ: 今週の重賞リスト
   ============================================================ */

.kk-glist {
	background: var(--kk-surface);
	border: 1px solid var(--kk-border);
	border-radius: var(--kk-radius);
	box-shadow: var(--kk-shadow);
	overflow: hidden;
	margin-bottom: 12px;
}

.kk-wrap .kk-glist__row,
.kk-wrap a.kk-glist__row {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 11px 14px;
	border-bottom: 1px solid var(--kk-border-soft);
	color: var(--kk-text);
	font-size: 13.5px;
	transition: background 0.15s;
	flex-wrap: wrap;
	text-decoration: none;
}

.kk-glist__row:last-child {
	border-bottom: none;
}

a.kk-glist__row:hover {
	background: var(--kk-primary-soft);
	text-decoration: none;
}

.kk-glist__meta {
	color: var(--kk-muted);
	font-size: 12.5px;
	min-width: 9.5em;
}

.kk-glist__name {
	font-weight: 800;
	color: var(--kk-primary-deep);
	font-size: 14.5px;
}

a.kk-glist__row .kk-glist__name {
	color: var(--kk-primary);
}

.kk-glist__course {
	color: var(--kk-muted);
	font-size: 12px;
	margin-left: auto;
}

/* ============================================================
   TOPページ: 年間重賞カレンダー
   ============================================================ */

.kk-cal {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
	gap: 10px;
	margin-bottom: 12px;
}

.kk-cal__month {
	background: var(--kk-surface);
	border: 1px solid var(--kk-border);
	border-radius: var(--kk-radius);
	box-shadow: var(--kk-shadow);
	padding: 0 0 8px;
	overflow: hidden;
}

.kk-cal__month--now {
	border-color: var(--kk-gold);
	box-shadow: 0 0 0 1px var(--kk-gold), var(--kk-shadow);
}

.kk-wrap .kk-cal__head,
.kk-wrap h3.kk-cal__head {
	margin: 0 0 6px;
	padding: 8px 12px;
	background: linear-gradient(160deg, var(--kk-primary) 0%, var(--kk-primary-deep) 100%);
	color: #fff;
	font-size: 13.5px;
	font-weight: 800;
	border: none;
	border-radius: 0;
	box-shadow: none;
	position: static;
}

.kk-cal__month--now .kk-cal__head {
	background: linear-gradient(160deg, #b89221 0%, var(--kk-gold) 100%);
}

.kk-wrap .kk-cal__head::before,
.kk-wrap .kk-cal__head::after {
	content: none;
	display: none;
}

/* SWELLは記事内のliに独自のマーカー（・）を::before/::markerで付けるため明示的に殺す */
.kk-wrap .kk-cal__list,
.kk-wrap ul.kk-cal__list {
	list-style: none;
	margin: 0;
	padding: 0 12px;
	font-size: 12.5px;
}

.kk-wrap .kk-cal__list li {
	list-style: none;
	padding: 5px 0;
	margin: 0;
	border-bottom: 1px dashed var(--kk-border-soft);
	line-height: 1.5;
}

.kk-wrap .kk-cal__list li::before,
.kk-wrap .kk-cal__list li::after {
	content: none;
	display: none;
}

.kk-wrap .kk-cal__list li::marker {
	content: none;
}

.kk-wrap .kk-cal__list li:last-child {
	border-bottom: none;
}

.kk-cal__date {
	display: inline-block;
	min-width: 2.9em;
	color: var(--kk-muted);
	font-size: 11.5px;
	font-variant-numeric: tabular-nums;
}

.kk-cal__list .kk-grade {
	font-size: 10px;
	padding: 2px 5px;
	margin-right: 2px;
}

.kk-cal__jyo {
	color: var(--kk-muted);
	font-size: 11.5px;
}

.kk-cal__empty {
	margin: 0;
	padding: 4px 12px;
	color: var(--kk-muted);
}

.kk-wrap a.kk-chip--more,
.kk-wrap .kk-chips a.kk-chip--more {
	background: var(--kk-primary);
	border-color: var(--kk-primary-deep);
	color: #fff;
}

.kk-wrap a.kk-chip--more:hover,
.kk-wrap .kk-chips a.kk-chip--more:hover {
	background: var(--kk-primary-deep);
	color: #fff;
}

/* ============================================================
   レスポンシブ
   ============================================================ */

@media (max-width: 600px) {
	.kk-racehead {
		padding: 14px 14px 12px;
	}

	.kk-racehead__title h1 {
		font-size: 17px;
	}

	.kk-h2 {
		font-size: 15.5px;
		margin-top: 24px;
	}

	.kk-tab {
		font-size: 12px;
		padding: 8px 6px;
		min-width: 0;
	}

	.kk-tabs--race .kk-tab {
		min-width: 40px;
		padding: 6px 6px;
	}

	.kk-table thead th,
	.kk-table tbody td {
		padding: 8px 6px;
		font-size: 12.5px;
	}

	.kk-summary th {
		width: 7em;
		padding: 9px 10px;
	}

	.kk-summary td {
		padding: 9px 10px;
	}
}