/*
 * Basketball Freak CBA / Rule Database
 *
 * すべてのセレクタを .bf-rules 配下に限定する。既存サイトへ影響させない。
 * .bf-sal のデザイントークンを流用し、無くても既定値で単体成立する。
 * スマホ優先、320pxで横に溢れない。
 */

.bf-rules {
	--rules-ink:    var(--bf-sal-ink,    #16161a);
	--rules-ink-2:  var(--bf-sal-ink-2,  #4a4a55);
	--rules-ink-3:  var(--bf-sal-ink-3,  #6d6d7a);
	--rules-bg:     var(--bf-sal-bg,     #ffffff);
	--rules-bg-2:   var(--bf-sal-bg-2,   #f6f6f8);
	--rules-bg-3:   var(--bf-sal-bg-3,   #eeeef2);
	--rules-line:   var(--bf-sal-line,   #dcdce3);
	--rules-accent: var(--bf-sal-accent, #17408B);
	--rules-red:    #C8102E;
	--rules-radius: 10px;
	font-size: 14px;
	line-height: 1.7;
}

.bf-rules *, .bf-rules *::before, .bf-rules *::after { box-sizing: border-box; }

.bf-rules-hero__eyebrow { margin: 0; font-size: 11px; font-weight: 700; letter-spacing: .12em; color: var(--rules-accent); }
.bf-rules-hero__title { margin: 4px 0; font-size: 22px; line-height: 1.25; text-wrap: balance; }
.bf-rules-hero__tag { margin: 0 0 8px; font-size: 12px; font-weight: 700; color: var(--rules-ink-3); }
.bf-rules-lead { margin: 0 0 18px; color: var(--rules-ink-2); }

/* ---------- パンくず ---------- */

.bf-rules-crumb { margin: 0 0 14px; font-size: 12px; color: var(--rules-ink-3); }
.bf-rules-crumb a { color: var(--rules-accent); text-decoration: none; }
.bf-rules-crumb a:hover { text-decoration: underline; }

/* ---------- 検索フォーム ---------- */

.bf-rules-search {
	border: 1px solid var(--rules-line);
	border-radius: var(--rules-radius);
	background: var(--rules-bg-2);
	padding: 14px;
	margin: 0 0 16px;
}

.bf-rules-search__row { display: flex; flex-direction: column; gap: 6px; margin: 0 0 10px; }
.bf-rules-search__row--filters { flex-direction: row; flex-wrap: wrap; align-items: flex-end; gap: 10px; }
.bf-rules-search__label { font-size: 12px; font-weight: 700; color: var(--rules-ink-2); }

.bf-rules-search__input {
	min-height: 44px;
	padding: 0 12px;
	border: 1px solid var(--rules-line);
	border-radius: 8px;
	background: var(--rules-bg);
	color: var(--rules-ink);
	font: inherit;
	font-size: 14px;
}

.bf-rules-search__sub { display: flex; flex-direction: column; gap: 4px; font-size: 11px; font-weight: 700; color: var(--rules-ink-3); }

.bf-rules-search__select {
	min-height: 44px;
	padding: 0 10px;
	border: 1px solid var(--rules-line);
	border-radius: 8px;
	background: var(--rules-bg);
	color: var(--rules-ink);
	font: inherit;
	font-size: 13px;
}

.bf-rules-search__go {
	min-height: 44px;
	padding: 0 20px;
	border: none;
	border-radius: 8px;
	background: var(--rules-accent);
	color: #fff;
	font: inherit;
	font-weight: 700;
	font-size: 13px;
	cursor: pointer;
}
.bf-rules-search__go:hover { opacity: .9; }

.bf-rules-chips { display: flex; flex-wrap: wrap; gap: 6px; }

.bf-rules-chip {
	display: inline-flex;
	align-items: center;
	min-height: 36px;
	padding: 0 14px;
	border: 1px solid var(--rules-line);
	border-radius: 999px;
	background: var(--rules-bg);
	color: var(--rules-ink-2);
	font-size: 12.5px;
	font-weight: 700;
	text-decoration: none;
}
.bf-rules-chip.is-on { background: var(--rules-accent); border-color: var(--rules-accent); color: #fff; }
.bf-rules-chip:hover { text-decoration: none; }

.bf-rules-count { margin: 0 0 10px; font-size: 12px; color: var(--rules-ink-3); }
.bf-rules-empty { padding: 24px; text-align: center; color: var(--rules-ink-3); border: 1px dashed var(--rules-line); border-radius: var(--rules-radius); }

/* ---------- 一覧カード ---------- */

.bf-rules-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 10px; }
@media (min-width: 620px) { .bf-rules-list { grid-template-columns: 1fr 1fr; } }
@media (min-width: 980px) { .bf-rules-list { grid-template-columns: 1fr 1fr 1fr; } }

.bf-rules-card {
	border: 1px solid var(--rules-line);
	border-left: 6px solid var(--rules-accent);
	border-radius: var(--rules-radius);
	background: var(--rules-bg);
}

.bf-rules-card__link { display: block; padding: 14px; color: var(--rules-ink); text-decoration: none; }
.bf-rules-card__link:hover { background: var(--rules-bg-2); text-decoration: none; }

.bf-rules-card__head { display: flex; align-items: center; gap: 6px; margin: 0 0 8px; }

.bf-rules-card__cat {
	display: inline-flex;
	align-items: center;
	padding: 2px 10px;
	border-radius: 999px;
	background: var(--rules-bg-3);
	color: var(--rules-ink-2);
	font-size: 10.5px;
	font-weight: 700;
}

.bf-rules-card__diff {
	display: inline-flex;
	align-items: center;
	padding: 2px 10px;
	border-radius: 999px;
	font-size: 10.5px;
	font-weight: 700;
}
.bf-rules-card__diff--beginner { background: #e9f7ee; color: #1c8a52; }
.bf-rules-card__diff--intermediate { background: #fff6e0; color: #c97a00; }
.bf-rules-card__diff--advanced { background: #fbeef0; color: var(--rules-red); }

.bf-rules-card__name { margin: 0 0 6px; font-size: 15px; }
.bf-rules-card__en { display: block; font-size: 11px; font-weight: 400; color: var(--rules-ink-3); margin-top: 2px; }
.bf-rules-card__desc { margin: 0; font-size: 12.5px; color: var(--rules-ink-2); }

/* ---------- 詳細ページ ---------- */

.bf-rules-detail-head { margin: 0 0 20px; }
.bf-rules-detail-head__meta { display: flex; gap: 6px; margin: 0 0 8px; }
.bf-rules-detail-head__name { margin: 0 0 8px; font-size: 22px; }
.bf-rules-detail-head__desc { margin: 0; color: var(--rules-ink-2); }

.bf-rules-block { margin: 0 0 18px; }
.bf-rules-block__h { margin: 0 0 6px; font-size: 14px; color: var(--rules-accent); }
.bf-rules-block__body { margin: 0; white-space: pre-wrap; }

.bf-rules-txnlist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.bf-rules-txnlist__row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	padding: 8px 10px;
	border: 1px solid var(--rules-line);
	border-radius: 8px;
	font-size: 12.5px;
}
.bf-rules-txnlist__date { color: var(--rules-ink-3); font-variant-numeric: tabular-nums; }
.bf-rules-txnlist__headline { font-weight: 700; flex: 1 1 auto; min-width: 0; }
.bf-rules-txnlist__link { color: var(--rules-accent); text-decoration: none; font-weight: 700; }

.bf-rules-relgrid { display: flex; flex-wrap: wrap; gap: 8px; }
.bf-rules-rel {
	display: inline-flex;
	align-items: center;
	min-height: 40px;
	padding: 0 14px;
	border: 1px solid var(--rules-line);
	border-radius: 8px;
	color: var(--rules-accent);
	text-decoration: none;
	font-size: 13px;
	font-weight: 700;
}
.bf-rules-rel:hover { background: var(--rules-bg-2); text-decoration: none; }

.bf-rules-articles { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.bf-rules-articles__a {
	display: inline-flex;
	align-items: center;
	min-height: 40px;
	color: var(--rules-accent);
	text-decoration: none;
	font-size: 13.5px;
	font-weight: 700;
}
.bf-rules-articles__a:hover { text-decoration: underline; }

.bf-rules-source { margin: 16px 0 0; font-size: 11.5px; color: var(--rules-ink-3); }

.bf-rules-back { margin: 20px 0 0; }
.bf-rules-back a { color: var(--rules-accent); text-decoration: none; font-weight: 700; font-size: 13px; }
.bf-rules-back a:hover { text-decoration: underline; }

/* ---------- 免責 ---------- */

.bf-rules-disc {
	margin: 24px 0 0;
	padding: 12px 14px;
	border-top: 1px solid var(--rules-line);
	font-size: 11.5px;
	color: var(--rules-ink-3);
	line-height: 1.8;
}

/* ---------- 320px 保険 ---------- */

@media (max-width: 340px) {
	.bf-rules-search__row--filters { flex-direction: column; align-items: stretch; }
}