/**
 * tools.css — ツールページ共通スタイル
 *
 * page-credit-card-reward-simulator.php
 * page-two-card-optimizer.php
 * page-economy-selector.php
 * page-first-card-quick-check.php
 * が読み込む共通 CSS。
 *
 * 色・余白・角丸・影・フォントはすべて design-tokens.css の var(--cm-*) を参照する。
 * リテラル値を直書きしないこと（source: docs/crecamatch-design-tokens-v1.md）。
 *
 * BATCH 025: 全リテラル値をデザイントークンに置換。
 */

/* -------------------------------------------------------
   ラッパー
   ------------------------------------------------------- */
.k-tool-wrap {
	max-width: var(--cm-max-w-tool);
	margin: 0 auto;
	padding: var(--cm-space-6) var(--cm-space-4);
	font-family: var(--cm-font-family);
}
.k-tool-wrap h1 {
	font-size: var(--cm-font-lg);
	margin-bottom: var(--cm-space-2);
}
.k-tool-wrap .k-lead {
	color: var(--cm-color-text-muted);
	font-size: var(--cm-font-xs);
	margin-bottom: var(--cm-space-6);
}

/* -------------------------------------------------------
   フォーム
   ------------------------------------------------------- */
.k-tool-form {
	background: var(--cm-color-bg-form);
	border: 1px solid var(--cm-color-border);
	border-radius: var(--cm-radius-lg);
	padding: var(--cm-space-6);
	margin-bottom: var(--cm-space-8);
}
.k-tool-form h2 {
	font-size: var(--cm-font-md);
	margin-top: 0;
	margin-bottom: var(--cm-space-4);
}
.k-form-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--cm-space-4);
}
@media (max-width: 600px) {
	.k-form-grid { grid-template-columns: 1fr; }
}
.k-field label {
	display: block;
	font-size: .85rem;
	color: var(--cm-color-text-muted);
	margin-bottom: var(--cm-space-1);
	font-weight: 500;
}
.k-field input[type="number"],
.k-field select {
	width: 100%;
	padding: .45rem .6rem;
	border: 1px solid var(--cm-color-border-input);
	border-radius: var(--cm-radius-sm);
	font-size: var(--cm-font-base);
	box-sizing: border-box;
	background: var(--cm-color-white);
}
.k-field input[type="number"]:focus,
.k-field select:focus {
	outline: 2px solid var(--cm-color-primary);
	outline-offset: 1px;
}

/* ラジオボタン（quick-check スタイル） */
.k-radio-group {
	display: flex;
	flex-wrap: wrap;
	gap: var(--cm-space-2);
}
.k-radio-group label {
	display: flex;
	align-items: center;
	gap: .35rem;
	font-weight: normal;
	font-size: var(--cm-font-xs);
	border: 1px solid var(--cm-color-border-input);
	border-radius: var(--cm-radius-pill);
	padding: .35rem .75rem;
	cursor: pointer;
	transition: border-color .15s, background .15s;
}
.k-radio-group input[type="radio"] {
	accent-color: var(--cm-color-primary);
}
.k-radio-group label:has(input:checked) {
	border-color: var(--cm-color-primary);
	background: var(--cm-color-primary-bg-light);
}
.k-form-total {
	margin-top: var(--cm-space-4);
	font-size: var(--cm-font-xs);
	color: var(--cm-color-text-subtle);
}
.k-submit-btn {
	display: inline-block;
	margin-top: var(--cm-space-4);
	padding: .65rem var(--cm-space-6);
	background: var(--cm-color-primary);
	color: var(--cm-color-white);
	border: none;
	border-radius: var(--cm-radius-md);
	font-size: var(--cm-font-base);
	cursor: pointer;
	line-height: var(--cm-leading-tight);
}
.k-submit-btn:hover {
	background: var(--cm-color-primary-dark);
}

/* -------------------------------------------------------
   結果カード
   ------------------------------------------------------- */
.k-result-card {
	margin-bottom: var(--cm-space-5);
	border-radius: var(--cm-radius-lg);
	padding: var(--cm-space-5) var(--cm-space-6);
}
.k-result-card--first {
	border: 2px solid var(--cm-color-primary);
	background: var(--cm-color-primary-bg);
}
.k-result-card--second {
	border: 1px solid #aaa;
	background: var(--cm-color-bg-card);
}
.k-pair-grid .k-result-card {
	margin-bottom: 0;
}
.k-result-card--main {
	border: 2px solid var(--cm-color-primary);
	background: var(--cm-color-primary-bg);
}
.k-result-card--sub {
	border: 2px solid var(--cm-color-green);
	background: var(--cm-color-green-bg);
}
.k-result-card h3 {
	margin: 0 0 var(--cm-space-2);
	font-size: 1.05rem;
}
.k-badge {
	display: inline-block;
	font-size: var(--cm-font-2xs);
	padding: .2rem var(--cm-space-2);
	border-radius: var(--cm-radius-sm);
	margin-right: var(--cm-space-2);
	font-weight: 700;
}
.k-badge--first, .k-badge--main { background: var(--cm-color-primary); color: var(--cm-color-white); }
.k-badge--second                { background: var(--cm-color-text-muted); color: var(--cm-color-white); }
.k-badge--sub                   { background: var(--cm-color-green); color: var(--cm-color-white); }
.k-reward-amount {
	font-size: var(--cm-font-xl);
	font-weight: 700;
	color: var(--cm-color-primary);
	margin-bottom: var(--cm-space-1);
}
.k-result-card--second .k-reward-amount {
	color: var(--cm-color-text);
	font-size: 1.3rem;
}
.k-card-fee {
	font-size: .82rem;
	color: var(--cm-color-text-dim);
	margin-bottom: var(--cm-space-1);
}
.k-card-note {
	font-size: var(--cm-font-xs);
	color: var(--cm-color-text-muted);
	margin-top: .4rem;
}
.k-card-note-detail {
	font-size: var(--cm-font-2xs);
	color: var(--cm-color-text-dim);
	margin-top: var(--cm-space-1);
	line-height: var(--cm-leading-base);
}
.k-card-caution {
	font-size: .82rem;
	color: var(--cm-color-amber-dark);
	background: var(--cm-color-amber-caution-bg);
	border-radius: var(--cm-radius-sm);
	padding: .4rem .65rem;
	margin-top: var(--cm-space-2);
}

/* -------------------------------------------------------
   比較テーブル（その他候補）
   ------------------------------------------------------- */
.k-other-cards {
	margin-top: var(--cm-space-6);
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}
.k-other-cards h3 {
	font-size: var(--cm-font-base);
	margin-bottom: var(--cm-space-2);
}
.k-other-cards table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--cm-font-xs);
}
.k-other-cards th,
.k-other-cards td {
	border: 1px solid var(--cm-color-border-table);
	padding: var(--cm-space-2) var(--cm-space-3);
	text-align: left;
}
.k-other-cards th {
	background: var(--cm-color-bg-table);
}

/* -------------------------------------------------------
   2枚組み合わせ表示
   ------------------------------------------------------- */
.k-pair-grid {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	gap: var(--cm-space-4);
	margin: var(--cm-space-4) 0;
	align-items: center;
}
@media (max-width: 580px) {
	.k-pair-grid { grid-template-columns: 1fr; }
}
.k-pair-plus {
	font-size: 1.4rem;
	font-weight: 700;
	color: var(--cm-color-text-dim);
	text-align: center;
}
.k-benefit-box {
	background: var(--cm-color-amber-bg);
	border: 1px solid var(--cm-color-amber);
	border-radius: var(--cm-radius-md);
	padding: var(--cm-space-4) var(--cm-space-5);
	font-size: var(--cm-font-xs);
	color: var(--cm-color-text);
	margin-bottom: var(--cm-space-6);
}

/* -------------------------------------------------------
   CTA（次のステップ）
   ------------------------------------------------------- */
.k-tool-cta {
	margin-top: var(--cm-space-6);
	padding: var(--cm-space-5);
	background: var(--cm-color-cta-bg);
	border: 1px solid var(--cm-color-cta-border);
	border-radius: var(--cm-radius-lg);
}
.k-tool-cta strong {
	display: block;
	margin-bottom: .4rem;
}
.k-tool-cta a {
	color: var(--cm-color-primary);
	font-weight: 600;
	text-decoration: none;
	display: block;
	margin-bottom: var(--cm-space-1);
}
.k-tool-cta a:hover {
	text-decoration: underline;
}

/* -------------------------------------------------------
   ナビゲーション
   ------------------------------------------------------- */
.k-tool-nav {
	margin-top: var(--cm-space-8);
	padding: var(--cm-space-4) var(--cm-space-5);
	background: var(--cm-color-primary-bg);
	border-radius: var(--cm-radius-lg);
	font-size: .88rem;
}
.k-tool-nav strong {
	display: block;
	margin-bottom: var(--cm-space-1);
}
.k-tool-nav ul {
	margin: var(--cm-space-2) 0 0;
	padding-left: 1.2rem;
}
.k-tool-nav a {
	color: var(--cm-color-primary);
}

/* -------------------------------------------------------
   経済圏表示
   ------------------------------------------------------- */
.k-economy-card {
	border-radius: var(--cm-radius-lg);
	padding: var(--cm-space-5) var(--cm-space-6);
	margin-bottom: var(--cm-space-5);
}
.k-economy-card h3 {
	margin: 0 0 var(--cm-space-3);
	font-size: var(--cm-font-md);
}
.k-economy-rec-card {
	font-size: var(--cm-font-xs);
	background: rgba(0,0,0,.06);
	display: inline-block;
	padding: .2rem .6rem;
	border-radius: var(--cm-radius-sm);
	margin-bottom: var(--cm-space-3);
}
.k-economy-desc { font-size: var(--cm-font-xs); color: var(--cm-color-text); margin-bottom: var(--cm-space-3); }
.k-economy-fit  { font-size: .85rem; color: var(--cm-color-text); margin-bottom: var(--cm-space-2); }
.k-economy-caution {
	font-size: .82rem;
	color: var(--cm-color-amber-dark);
	background: var(--cm-color-amber-caution-bg);
	border-radius: var(--cm-radius-sm);
	padding: .4rem .65rem;
}
.k-economy-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--cm-space-3);
	margin-top: var(--cm-space-6);
}
@media (max-width: 600px) {
	.k-economy-grid { grid-template-columns: 1fr 1fr; }
}
.k-economy-item {
	border: 1px solid var(--cm-color-border-light);
	border-radius: var(--cm-radius-md);
	padding: var(--cm-space-3);
	text-align: center;
	font-size: .82rem;
}
.k-economy-item .k-eco-name {
	font-weight: 700;
	margin-bottom: var(--cm-space-1);
}

/* -------------------------------------------------------
   タグ・バッジ群
   ------------------------------------------------------- */
.k-tag-list { margin: var(--cm-space-4) 0; }
.k-tag {
	display: inline-block;
	background: var(--cm-color-primary-bg-light);
	color: var(--cm-color-primary);
	font-size: .78rem;
	border-radius: var(--cm-radius-full);
	padding: .2rem .6rem;
	margin: .1rem;
}

/* -------------------------------------------------------
   FAQ
   ------------------------------------------------------- */
.k-faq-section {
	margin-top: var(--cm-space-10);
}
.k-faq-section h2 {
	font-size: 1.15rem;
}
.k-faq-item {
	border: 1px solid var(--cm-color-border-table);
	border-radius: var(--cm-radius-md);
	margin-bottom: var(--cm-space-3);
	padding: var(--cm-space-4);
}
.k-faq-q {
	font-weight: 700;
	margin-bottom: .4rem;
	color: var(--cm-color-text-strong);
}
.k-faq-a {
	font-size: var(--cm-font-xs);
	color: var(--cm-color-text);
	line-height: var(--cm-leading-loose);
}
.k-faq-a a { color: var(--cm-color-primary); }

/* -------------------------------------------------------
   エラーメッセージ
   ------------------------------------------------------- */
.k-no-result {
	color: var(--cm-color-error);
	padding: var(--cm-space-4);
	border: 1px solid var(--cm-color-error-border);
	border-radius: var(--cm-radius-md);
	background: var(--cm-color-error-bg);
}

/* -------------------------------------------------------
   ツール共通 — BATCH 033 追加クラス
   ------------------------------------------------------- */

/* 二段目フォームグリッド（margin-top 付き） */
.k-form-grid--mt {
	margin-top: var(--cm-space-4);
}

/* カード年会費行（上下余白を統一） */
.k-card-fee {
	margin-top: var(--cm-space-2);
}

/* 結果カード内 h3（pair-grid / economy カード） */
.k-result-card-name {
	margin: var(--cm-space-2) 0 0;
	font-size: 1.05rem;
	line-height: var(--cm-leading-tight);
}

/* 診断結果 h2（ツール共通・inline-style置換） */
.k-result-heading--tool {
	font-size: 1.2rem;
	margin: var(--cm-space-8) 0 var(--cm-space-4);
}

/* 経済圏サブテキスト */
.k-eco-sub-text {
	color: var(--cm-color-text-dim);
	font-size: var(--cm-font-2xs);
	line-height: var(--cm-leading-base);
}

/* 経済圏比較グリッド 見出し */
.k-eco-section-title {
	font-size: var(--cm-font-base);
	margin-top: var(--cm-space-6);
	margin-bottom: 0;
}

/* リセットリンク */
.k-tool-reset {
	display: inline-block;
	margin-top: var(--cm-space-3);
	font-size: var(--cm-font-xs);
	color: var(--cm-color-text-muted);
	text-decoration: underline;
}
.k-tool-reset:hover {
	color: var(--cm-color-primary);
}

/* ラジオグループ fieldset（WCAG SC 1.3.1 対応） */
.k-radio-fieldset {
	border: none;
	margin: 0;
	padding: 0;
}
.k-radio-legend {
	display: block;
	font-size: var(--cm-font-sm);
	font-weight: bold;
	margin-bottom: var(--cm-space-2);
	color: var(--cm-color-text);
	padding: 0;
}

/* CTA リスト構造（tool-helpers.php kureka_tool_render_cta） */
.k-tool-cta__list {
	list-style: none;
	margin: var(--cm-space-2) 0 0;
	padding: 0;
}
.k-tool-cta__item {
	margin-bottom: var(--cm-space-2);
}
.k-tool-cta__item:last-child {
	margin-bottom: 0;
}
.k-tool-cta__item a {
	color: var(--cm-color-primary);
	font-weight: 600;
	text-decoration: none;
	display: inline;
}
.k-tool-cta__item a:hover {
	text-decoration: underline;
}
.k-tool-cta__item a:focus-visible {
	outline: 3px solid var(--cm-color-primary);
	outline-offset: 2px;
	border-radius: 2px;
}

/* その他候補テーブル スクロールラッパー keyboard対応 */
.k-other-cards-wrap:focus-visible {
	outline: 3px solid var(--cm-color-primary);
	outline-offset: 2px;
}

/* -------------------------------------------------------
   360px / 390px 対応
   ------------------------------------------------------- */
@media (max-width: 400px) {
	.k-tool-wrap {
		padding: var(--cm-space-4) var(--cm-space-3);
	}
	.k-economy-grid {
		grid-template-columns: 1fr;
	}
	.k-pair-grid {
		grid-template-columns: 1fr;
	}
	.k-result-card {
		padding: var(--cm-space-4);
	}
	.k-reward-amount {
		font-size: 1.35rem;
	}
	/* BATCH 036: 送信ボタン全幅（タップ領域の改善） */
	.k-submit-btn {
		width: 100%;
		box-sizing: border-box;
		min-height: 44px;
		display: block;
	}
	/* BATCH 036: ツールフォームのフィールド間余白を詰める */
	.k-tool-form {
		padding: var(--cm-space-4) var(--cm-space-3);
	}
}

/* -------------------------------------------------------
   フォーカス表示（キーボードナビゲーション）
   ------------------------------------------------------- */
.k-submit-btn:focus-visible,
.k-tool-cta a:focus-visible,
.k-tool-nav a:focus-visible,
.k-faq-a a:focus-visible,
.k-tool-reset:focus-visible {
	outline: 3px solid var(--cm-color-primary);
	outline-offset: 2px;
	border-radius: 2px;
}

.k-radio-group label:focus-within {
	outline: 2px solid var(--cm-color-primary);
	outline-offset: 1px;
}

/* -------------------------------------------------------
   状態 UI 補完 / inline-style 置換（BATCH 032）
   ------------------------------------------------------- */

/* 診断結果 h2 */
.k-result-heading {
	font-size: 1.2rem;
	margin: 0 0 var(--cm-space-4);
}

/* 結果カード内 h3 */
.k-result-card-title {
	font-size: 1.4rem;
	color: var(--cm-color-primary);
	margin: var(--cm-space-1) 0 var(--cm-space-3);
}

/* スタット（年会費・特徴）グリッド */
.k-stat-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--cm-space-3);
	margin: var(--cm-space-4) 0;
}

@media (max-width: 400px) {
	.k-stat-grid { grid-template-columns: 1fr; }
}

.k-stat-item {
	background: var(--cm-color-white);
	border: 1px solid #c7d7f5;
	border-radius: var(--cm-radius-sm);
	padding: var(--cm-space-2) var(--cm-space-3);
}

.k-stat-label {
	display: block;
	font-size: var(--cm-font-2xs);
	color: var(--cm-color-text-dim);
	margin-bottom: var(--cm-space-1);
}

.k-stat-value {
	display: block;
	font-size: var(--cm-font-sm);
	font-weight: bold;
	color: var(--cm-color-text);
}

/* タグリスト（診断条件タグ） */
.k-tag-list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--cm-space-1) var(--cm-space-2);
	margin-bottom: var(--cm-space-3);
}

.k-tag {
	display: inline-block;
	padding: .15rem var(--cm-space-2);
	background: var(--cm-color-primary-bg);
	color: var(--cm-color-primary);
	border-radius: var(--cm-radius-full);
	font-size: var(--cm-font-2xs);
	font-weight: bold;
}

/* -------------------------------------------------------
   経済圏ピッカー（BATCH 055）
   ------------------------------------------------------- */
.k-eco-picker { margin-bottom: var(--cm-space-6); }
.k-eco-picker-title {
	font-size: var(--cm-font-md);
	margin-bottom: var(--cm-space-4);
}
.k-eco-picker-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--cm-space-3);
}
@media (max-width: 600px) {
	.k-eco-picker-grid { grid-template-columns: repeat(2, 1fr); }
}
.k-eco-picker-btn {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--cm-space-1);
	padding: var(--cm-space-3) var(--cm-space-2);
	border: 2px solid var(--cm-color-border-light);
	border-radius: var(--cm-radius-md);
	background: var(--cm-color-bg-card);
	text-align: center;
	text-decoration: none;
	color: var(--cm-color-text);
	font-size: var(--cm-font-xs);
	transition: border-color .15s, background .15s;
}
.k-eco-picker-btn:hover,
.k-eco-picker-btn:focus-visible {
	border-color: var(--cm-color-primary);
	background: var(--cm-color-primary-bg);
	outline: none;
}
.k-eco-picker-btn--active {
	font-weight: 700;
}
.k-eco-picker-icon { font-size: 1.6rem; line-height: 1; }
.k-eco-picker-name { font-size: var(--cm-font-2xs); }

.k-eco-form-section { margin-bottom: var(--cm-space-6); }
.k-eco-form-title {
	font-size: var(--cm-font-md);
	margin-bottom: var(--cm-space-3);
}
.k-eco-fee-label {
	font-size: var(--cm-font-2xs);
	color: var(--cm-color-text-muted);
	margin-left: var(--cm-space-1);
}
.k-eco-sub-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--cm-space-4);
	margin-bottom: var(--cm-space-5);
}
@media (max-width: 600px) {
	.k-eco-sub-grid { grid-template-columns: 1fr; }
}
.k-economy-item--active { background: var(--cm-color-primary-bg); }
.k-eco-grid-action { margin-top: var(--cm-space-2); }
.k-eco-grid-action a { font-size: var(--cm-font-xs); color: var(--cm-color-primary); }
.k-eco-section-title {
	font-size: var(--cm-font-md);
	margin: var(--cm-space-6) 0 var(--cm-space-4);
}

/* -------------------------------------------------------
   年間還元額シミュレーター（BATCH 056）
   ------------------------------------------------------- */
.k-sim-monthly-row { margin-bottom: var(--cm-space-5); }
.k-sim-monthly-label {
	display: block;
	font-weight: 600;
	margin-bottom: var(--cm-space-2);
}
.k-sim-monthly-input-wrap {
	display: flex;
	align-items: center;
	gap: var(--cm-space-2);
}
.k-sim-monthly-input {
	width: 7rem;
	padding: var(--cm-space-2) var(--cm-space-3);
	border: 1px solid var(--cm-color-border-light);
	border-radius: var(--cm-radius-sm);
	font-size: var(--cm-font-md);
	font-family: inherit;
}
.k-sim-unit {
	font-size: var(--cm-font-sm);
	color: var(--cm-color-text-muted);
}
.k-custom-ratios--hidden { display: none; }
.k-custom-ratios { margin-top: var(--cm-space-4); }
.k-custom-ratios-note {
	font-size: var(--cm-font-xs);
	color: var(--cm-color-text-muted);
	margin-bottom: var(--cm-space-3);
}

/* -------------------------------------------------------
   JS無効時通知 / 空白状態強化（BATCH 060）
   ------------------------------------------------------- */
.k-noscript-notice {
	font-size: var(--cm-font-xs);
	color: var(--cm-color-text-muted);
	padding: var(--cm-space-2) var(--cm-space-3);
	background: var(--cm-color-bg-card);
	border-left: 3px solid var(--cm-color-border-light);
	border-radius: 0 var(--cm-radius-sm) var(--cm-radius-sm) 0;
	margin-bottom: var(--cm-space-3);
}
.k-empty-state__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--cm-space-2) var(--cm-space-3);
	margin-top: var(--cm-space-3);
}
.k-empty-state__actions a {
	font-size: var(--cm-font-xs);
	color: var(--cm-color-primary);
	text-decoration: none;
}
.k-empty-state__actions a:hover { text-decoration: underline; }

/* -------------------------------------------------------
   プライバシー表示（BATCH 058）
   ------------------------------------------------------- */
.k-tool-privacy-note {
	font-size: var(--cm-font-2xs);
	color: var(--cm-color-text-muted);
	margin: var(--cm-space-3) 0 0;
	padding: var(--cm-space-2) var(--cm-space-3);
	background: var(--cm-color-bg-card);
	border-left: 3px solid var(--cm-color-border-light);
	border-radius: 0 var(--cm-radius-sm) var(--cm-radius-sm) 0;
}
.k-tool-privacy-note a {
	color: var(--cm-color-text-muted);
	text-decoration: underline;
}

/* -------------------------------------------------------
   2枚持ち最適化ツール（BATCH 057）
   ------------------------------------------------------- */
.k-same-economy-warn {
	background: #fff8e1;
	border: 1px solid #f9c74f;
	border-radius: var(--cm-radius-md);
	padding: var(--cm-space-3) var(--cm-space-4);
	font-size: var(--cm-font-xs);
	margin-bottom: var(--cm-space-4);
	color: var(--cm-color-text);
}
.k-pair-cost {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--cm-space-2);
	font-size: var(--cm-font-xs);
	padding: var(--cm-space-3) var(--cm-space-4);
	background: var(--cm-color-bg-card);
	border: 1px solid var(--cm-color-border-light);
	border-radius: var(--cm-radius-md);
	margin-bottom: var(--cm-space-4);
}
.k-pair-cost__label { color: var(--cm-color-text-muted); }
.k-pair-cost__value { font-weight: 700; color: var(--cm-color-text); }
.k-pair-cost__note  { font-size: var(--cm-font-2xs); color: var(--cm-color-text-muted); }
.k-pair-card-link {
	margin-top: var(--cm-space-2);
}
.k-pair-card-link a {
	font-size: var(--cm-font-xs);
	color: var(--cm-color-primary);
	text-decoration: none;
}
.k-pair-card-link a:hover { text-decoration: underline; }
.k-ymyl-note {
	font-size: var(--cm-font-2xs);
	color: var(--cm-color-text-muted);
	margin-top: var(--cm-space-2);
	margin-bottom: var(--cm-space-6);
}

/* -------------------------------------------------------
   高還元率ガイドページ（BATCH 063）
   ------------------------------------------------------- */
.k-rate-row {
	display: flex;
	gap: var(--cm-space-3);
	flex-wrap: wrap;
	margin: var(--cm-space-2) 0;
}
.k-rate-item {
	flex: 1 1 120px;
	background: var(--cm-color-bg-card);
	border: 1px solid var(--cm-color-border);
	border-radius: var(--cm-radius-sm);
	padding: var(--cm-space-2) var(--cm-space-3);
}
.k-rate-item--base { border-top: 3px solid var(--cm-color-border); }
.k-rate-item--max  { border-top: 3px solid var(--cm-color-primary); }
.k-rate-label {
	font-size: var(--cm-font-2xs);
	color: var(--cm-color-text-muted);
	display: block;
	margin-bottom: 2px;
}
.k-rate-value {
	font-size: var(--cm-font-lg);
	font-weight: 700;
	color: var(--cm-color-text);
}
.k-rate-value--highlight { color: var(--cm-color-primary); }
.k-rate-condition {
	font-size: var(--cm-font-2xs);
	color: var(--cm-color-text-muted);
	margin-top: 2px;
	display: block;
}

/* -------------------------------------------------------
   年会費無料ガイドページ（BATCH 062）
   ------------------------------------------------------- */
.k-guide-def-box {
	background: var(--cm-color-bg-card);
	border-left: 4px solid var(--cm-color-primary);
	padding: var(--cm-space-3) var(--cm-space-4);
	margin-bottom: var(--cm-space-4);
	border-radius: 0 var(--cm-radius-sm) var(--cm-radius-sm) 0;
	font-size: var(--cm-font-xs);
}
.k-guide-def-box--caution {
	border-left-color: #f59e0b;
	background: #fffbeb;
}
.k-guide-section-title {
	font-size: var(--cm-font-md);
	font-weight: 700;
	margin: var(--cm-space-8) 0 var(--cm-space-3);
	padding-bottom: var(--cm-space-2);
	border-bottom: 2px solid var(--cm-color-border);
}
.k-guide-card-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: var(--cm-space-4);
	margin-bottom: var(--cm-space-6);
}
@media (max-width: 599px) {
	.k-guide-card-grid { grid-template-columns: 1fr; }
}
.k-guide-fee-type-row {
	display: flex;
	flex-wrap: wrap;
	gap: var(--cm-space-2);
	margin: var(--cm-space-4) 0 var(--cm-space-6);
}
.k-guide-fee-type-row dt {
	flex: 0 0 auto;
	font-weight: 700;
	font-size: var(--cm-font-xs);
	min-width: 9em;
}
.k-guide-fee-type-row dd {
	flex: 1 1 200px;
	font-size: var(--cm-font-xs);
	color: var(--cm-color-text-muted);
	margin: 0 0 var(--cm-space-2);
}
.k-guide-choose-table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--cm-font-xs);
	margin-bottom: var(--cm-space-6);
}
.k-guide-choose-table th,
.k-guide-choose-table td {
	border: 1px solid var(--cm-color-border);
	padding: var(--cm-space-2) var(--cm-space-3);
	text-align: left;
	vertical-align: top;
}
.k-guide-choose-table th {
	background: var(--cm-color-bg-form);
	font-weight: 700;
}
@media (max-width: 599px) {
	.k-guide-choose-table { font-size: var(--cm-font-2xs); }
	.k-guide-choose-table th,
	.k-guide-choose-table td { padding: var(--cm-space-1) var(--cm-space-2); }
}