/*
 * Basketball Freak Salary DB — フロント用スタイル
 *
 * すべてのセレクタを .bf-sal 配下に限定する。
 * 既存記事・Future Draft Picks・トップページへ影響させない。
 * 色だけで意味を伝えず、必ずラベル文字を併記する（仕様 30章）。
 */

.bf-sal {
	--bf-sal-ink: #16161a;
	--bf-sal-ink-2: #4a4a55;
	--bf-sal-ink-3: #6d6d7a;
	--bf-sal-bg: #ffffff;
	--bf-sal-bg-2: #f6f6f8;
	--bf-sal-bg-3: #eeeef2;
	--bf-sal-line: #dcdce3;
	--bf-sal-accent: #6b3fd4;
	--bf-sal-accent-2: #e8730c;
	--bf-sal-accent-3: #e8b60c;
	--bf-sal-clear: #1c8a52;
	--bf-sal-tax: #c9a000;
	--bf-sal-apron1: #d2691e;
	--bf-sal-apron2: #c0392b;
	--bf-sal-unknown: #8a8a95;
	--bf-sal-radius: 10px;

	box-sizing: border-box;
	max-width: 1320px;
	margin: 0 auto;
	padding: 0 16px 64px;
	color: var(--bf-sal-ink);
	background: var(--bf-sal-bg);
	font-size: 15px;
	line-height: 1.75;
	overflow-wrap: anywhere;
	word-break: normal;
}

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

.bf-sal img,
.bf-sal svg {
	max-width: 100%;
}

.bf-sal .screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ---------- Preview banner ---------- */

.bf-sal-preview-banner {
	margin: 16px 0;
	padding: 12px 16px;
	border: 2px dashed var(--bf-sal-accent);
	border-radius: var(--bf-sal-radius);
	background: #f5f1ff;
	color: var(--bf-sal-ink);
	font-size: 14px;
}

/* ---------- Hero ---------- */

.bf-sal-hero {
	padding: 24px 0 8px;
	border-bottom: 1px solid var(--bf-sal-line);
}

.bf-sal-hero__crumb {
	margin: 0 0 8px;
	font-size: 13px;
	color: var(--bf-sal-ink-3);
}

/*
 * パンくずのリンクは文字高が20px程度しかなく、指で押す領域として狭い。
 * 見た目の行間を変えずに、上下のpaddingで当たり判定だけを44pxまで広げる。
 * 余白のぶんはネガティブマージンで打ち消し、レイアウトは動かさない。
 */
.bf-sal-hero__crumb a {
	color: var(--bf-sal-accent);
	display: inline-block;
	padding: 12px 0;
	margin: -12px 0;
	min-height: 20px;
}

.bf-sal-hero__title {
	margin: 0 0 6px;
	font-size: clamp(21px, 4.2vw, 32px);
	line-height: 1.35;
	font-weight: 700;
}

.bf-sal-hero__abbr {
	display: inline-block;
	margin-left: 8px;
	padding: 2px 8px;
	border-radius: 6px;
	background: var(--bf-sal-bg-3);
	font-size: 0.55em;
	vertical-align: middle;
	letter-spacing: 0.04em;
}

.bf-sal-hero__sub {
	margin: 0 0 14px;
	color: var(--bf-sal-ink-2);
	font-size: 14px;
}

.bf-sal-metaline {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 20px;
	margin: 0 0 12px;
	padding: 12px 14px;
	border: 1px solid var(--bf-sal-line);
	border-radius: var(--bf-sal-radius);
	background: var(--bf-sal-bg-2);
	font-size: 13px;
}

.bf-sal-metaline > div {
	min-width: 0;
}

.bf-sal-metaline dt {
	margin: 0;
	color: var(--bf-sal-ink-3);
	font-size: 12px;
}

.bf-sal-metaline dd {
	margin: 0;
	font-weight: 600;
}

.bf-sal-diagnosis {
	margin: 12px 0;
	padding: 12px 14px;
	border-left: 4px solid var(--bf-sal-accent);
	border-radius: 0 var(--bf-sal-radius) var(--bf-sal-radius) 0;
	background: #f5f1ff;
	font-size: 14px;
}

.bf-sal-fxnote {
	margin: 8px 0 0;
	color: var(--bf-sal-ink-3);
	font-size: 12px;
}

/* ---------- Season nav ---------- */

.bf-sal-seasonnav {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 16px 0;
}

.bf-sal-seasonnav__label {
	font-size: 12px;
	color: var(--bf-sal-ink-3);
}

.bf-sal-seasonnav ul {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.bf-sal-seasonnav__item {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 14px;
	border: 1px solid var(--bf-sal-line);
	border-radius: 999px;
	background: var(--bf-sal-bg);
	color: var(--bf-sal-ink);
	font-size: 13px;
	text-decoration: none;
}

.bf-sal-seasonnav__item.is-active {
	border-color: var(--bf-sal-accent);
	background: var(--bf-sal-accent);
	color: #fff;
	font-weight: 700;
}

.bf-sal-seasonnav__item.is-disabled {
	color: var(--bf-sal-unknown);
	background: var(--bf-sal-bg-3);
}

/* ---------- Sections ---------- */

.bf-sal-section {
	margin: 32px 0 0;
}

.bf-sal-section__title {
	margin: 0 0 12px;
	padding-bottom: 6px;
	border-bottom: 2px solid var(--bf-sal-ink);
	font-size: clamp(17px, 2.6vw, 21px);
	font-weight: 700;
}

.bf-sal-subtitle {
	margin: 20px 0 8px;
	font-size: 15px;
	font-weight: 700;
}

.bf-sal-section--cta {
	padding: 16px;
	border: 1px solid var(--bf-sal-line);
	border-radius: var(--bf-sal-radius);
	background: var(--bf-sal-bg-2);
}

.bf-sal-section--bf {
	padding: 16px;
	border: 2px solid var(--bf-sal-accent);
	border-radius: var(--bf-sal-radius);
	background: #faf8ff;
}

.bf-sal-empty,
.bf-sal-note {
	margin: 8px 0;
	color: var(--bf-sal-ink-3);
	font-size: 13px;
}

.bf-sal-warn {
	margin: 8px 0 14px;
	padding: 10px 14px;
	border-left: 4px solid var(--bf-sal-accent-2);
	background: #fff6ec;
	font-size: 13px;
}

.bf-sal-ok {
	margin: 8px 0;
	font-weight: 600;
	color: var(--bf-sal-clear);
}

.bf-sal-lead {
	margin: 8px 0;
	font-size: 17px;
	font-weight: 700;
}

.bf-sal-notelist {
	margin: 8px 0;
	padding-left: 1.3em;
	font-size: 13px;
	color: var(--bf-sal-ink-2);
}

.bf-sal-notelist li {
	margin-bottom: 4px;
}

.bf-sal-bflist {
	margin: 8px 0;
	padding-left: 1.3em;
	font-size: 15px;
}

.bf-sal-bflist li {
	margin-bottom: 6px;
}

.bf-sal-link a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	color: var(--bf-sal-accent);
	font-weight: 600;
}

/* ---------- Search ---------- */

.bf-sal-search {
	position: relative;
	margin: 20px 0;
}

.bf-sal-search__label {
	display: block;
	margin-bottom: 6px;
	font-size: 13px;
	font-weight: 600;
}

.bf-sal-search__row {
	display: flex;
	gap: 8px;
	max-width: 560px;
}

.bf-sal-search__input {
	flex: 1 1 auto;
	min-width: 0;
	min-height: 44px;
	padding: 8px 12px;
	border: 1px solid var(--bf-sal-line);
	border-radius: var(--bf-sal-radius);
	background: var(--bf-sal-bg);
	color: var(--bf-sal-ink);
	font-size: 16px; /* iOSでの自動ズームを防ぐ */
}

.bf-sal-search__input:focus {
	outline: 3px solid #c8b6ff;
	outline-offset: 1px;
	border-color: var(--bf-sal-accent);
}

.bf-sal-search__clear {
	flex: 0 0 auto;
	width: 44px;
	min-height: 44px;
	border: 1px solid var(--bf-sal-line);
	border-radius: var(--bf-sal-radius);
	background: var(--bf-sal-bg-2);
	color: var(--bf-sal-ink-2);
	font-size: 18px;
	cursor: pointer;
}

.bf-sal-search__results {
	position: absolute;
	z-index: 30;
	left: 0;
	right: 0;
	max-width: 560px;
	max-height: 320px;
	margin: 4px 0 0;
	padding: 0;
	overflow-y: auto;
	list-style: none;
	border: 1px solid var(--bf-sal-line);
	border-radius: var(--bf-sal-radius);
	background: var(--bf-sal-bg);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.bf-sal-search__results li a {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	padding: 8px 12px;
	color: var(--bf-sal-ink);
	text-decoration: none;
	border-bottom: 1px solid var(--bf-sal-bg-3);
}

.bf-sal-search__results li a:hover,
.bf-sal-search__results li a:focus,
.bf-sal-search__results li.is-active a {
	background: var(--bf-sal-bg-2);
}

.bf-sal-search__hint {
	margin: 6px 0 0;
	color: var(--bf-sal-ink-3);
	font-size: 12px;
}

.bf-sal-chip {
	display: inline-block;
	padding: 1px 8px;
	border-radius: 999px;
	background: var(--bf-sal-bg-3);
	font-size: 11px;
	white-space: nowrap;
}

.bf-sal-chip--team {
	background: #ece5ff;
	color: #472a94;
}

.bf-sal-chip--player {
	background: #ffeedd;
	color: #8a4708;
}

/* ---------- Controls ---------- */

.bf-sal-controls {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	margin: 12px 0;
}

.bf-sal-controls__group {
	min-width: 0;
	margin: 0;
	padding: 10px 12px;
	border: 1px solid var(--bf-sal-line);
	border-radius: var(--bf-sal-radius);
	background: var(--bf-sal-bg-2);
}

.bf-sal-controls__group legend {
	padding: 0 4px;
	font-size: 12px;
	color: var(--bf-sal-ink-3);
}

.bf-sal-btnrow {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.bf-sal-btn {
	min-height: 44px;
	padding: 0 14px;
	border: 1px solid var(--bf-sal-line);
	border-radius: 999px;
	background: var(--bf-sal-bg);
	color: var(--bf-sal-ink);
	font-size: 13px;
	cursor: pointer;
}

.bf-sal-btn.is-active {
	border-color: var(--bf-sal-accent);
	background: var(--bf-sal-accent);
	color: #fff;
	font-weight: 700;
}

.bf-sal-btn:focus-visible,
.bf-sal-expand:focus-visible,
.bf-sal-info:focus-visible {
	outline: 3px solid #c8b6ff;
	outline-offset: 2px;
}

.bf-sal-select select {
	min-height: 44px;
	max-width: 100%;
	padding: 0 10px;
	border: 1px solid var(--bf-sal-line);
	border-radius: var(--bf-sal-radius);
	background: var(--bf-sal-bg);
	font-size: 14px;
}

/* ---------- Stats ---------- */

.bf-sal-statgrid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 12px;
}

.bf-sal-statgrid--2col {
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.bf-sal-stat {
	padding: 12px 14px;
	border: 1px solid var(--bf-sal-line);
	border-radius: var(--bf-sal-radius);
	background: var(--bf-sal-bg-2);
	min-width: 0;
}

.bf-sal-stat__label {
	margin-bottom: 4px;
	color: var(--bf-sal-ink-3);
	font-size: 12px;
}

.bf-sal-stat__value {
	font-size: clamp(18px, 3vw, 23px);
	font-weight: 700;
	line-height: 1.3;
}

.bf-sal-stat__value--sm {
	font-size: clamp(13px, 2.2vw, 15px);
	line-height: 1.5;
}

.bf-sal-stat__sub {
	margin-top: 2px;
	color: var(--bf-sal-ink-3);
	font-size: 12px;
}

.bf-sal-bigstat {
	margin: 0 0 16px;
	padding: 16px;
	border: 2px solid var(--bf-sal-accent);
	border-radius: var(--bf-sal-radius);
	background: #faf8ff;
	text-align: center;
}

.bf-sal-bigstat__label {
	color: var(--bf-sal-ink-2);
	font-size: 13px;
}

.bf-sal-bigstat__value {
	font-size: clamp(30px, 8vw, 48px);
	font-weight: 800;
	line-height: 1.1;
	color: var(--bf-sal-accent);
}

.bf-sal-bigstat__sub {
	color: var(--bf-sal-ink-3);
	font-size: 12px;
}

/*
 * ⓘ ボタン。見た目は小さいが、タップ領域は44px確保する（仕様 34章）。
 * 見た目の行の高さを崩さないよう、negative margin で周囲へ食い込ませる。
 */
.bf-sal-info {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	margin: -10px -10px -10px 0;
	padding: 0;
	border: 0;
	background: none;
	color: var(--bf-sal-accent);
	cursor: pointer;
	font-size: 15px;
	vertical-align: middle;
}

.bf-sal-info__body {
	margin: 6px 0 0;
	padding: 8px 10px;
	border-radius: 8px;
	background: var(--bf-sal-bg-3);
	font-size: 12px;
	color: var(--bf-sal-ink-2);
}

/* ---------- Tables ---------- */

.bf-sal-tablewrap {
	max-width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.bf-sal-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 13px;
	background: var(--bf-sal-bg);
}

/*
 * 列数の多い表は縮めずに、ラッパー内で横スクロールさせる。
 * テーマのコンテンツ幅が狭くても、セル内で1文字ずつ折り返さないようにする。
 * （ページ全体の横スクロールは発生しない。スクロールするのは .bf-sal-tablewrap の中だけ）
 */
@media (min-width: 768px) {

	.bf-sal-table--teams {
		min-width: 1120px;
	}

	.bf-sal-table--roster {
		min-width: 860px;
	}

	.bf-sal-table--teams .bf-sal-teamlink__name,
	.bf-sal-table--teams td,
	.bf-sal-table--teams th {
		white-space: nowrap;
	}
}

.bf-sal-table th,
.bf-sal-table td {
	padding: 10px 12px;
	border-bottom: 1px solid var(--bf-sal-line);
	text-align: left;
	vertical-align: middle;
}

.bf-sal-table thead th {
	position: sticky;
	top: 0;
	z-index: 2;
	border-bottom: 2px solid var(--bf-sal-ink);
	background: var(--bf-sal-bg-2);
	font-size: 12px;
	white-space: nowrap;
}

.bf-sal-table tbody tr:hover {
	background: var(--bf-sal-bg-2);
}

.bf-sal-num {
	text-align: right;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

.bf-sal-table--kv th {
	width: 40%;
	background: var(--bf-sal-bg-2);
	font-weight: 600;
}

.bf-sal-teamlink {
	display: flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	color: var(--bf-sal-ink);
	text-decoration: none;
	font-weight: 600;
}

.bf-sal-teamlink:hover .bf-sal-teamlink__name {
	text-decoration: underline;
}

.bf-sal-teamlink__abbr {
	flex: 0 0 auto;
	min-width: 42px;
	padding: 2px 6px;
	border-radius: 6px;
	background: var(--bf-sal-ink);
	color: #fff;
	font-size: 11px;
	text-align: center;
	letter-spacing: 0.04em;
}

.bf-sal-expand {
	min-width: 44px;
	min-height: 44px;
	padding: 0 10px;
	border: 1px solid var(--bf-sal-line);
	border-radius: 8px;
	background: var(--bf-sal-bg-2);
	color: var(--bf-sal-ink);
	font-size: 12px;
	cursor: pointer;
}

.bf-sal-rosterdetail td {
	background: var(--bf-sal-bg-2);
}

.bf-sal-dl {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 8px 16px;
	margin: 0;
	font-size: 13px;
}

.bf-sal-dl dt {
	color: var(--bf-sal-ink-3);
	font-size: 12px;
}

.bf-sal-dl dd {
	margin: 0 0 4px;
	font-weight: 600;
}

.bf-sal-breakdown {
	margin: 16px 0 0;
	padding: 10px 12px;
	border: 1px solid var(--bf-sal-line);
	border-radius: var(--bf-sal-radius);
	background: var(--bf-sal-bg-2);
}

.bf-sal-breakdown summary {
	min-height: 44px;
	display: flex;
	align-items: center;
	cursor: pointer;
	font-weight: 600;
	font-size: 14px;
}

/* ---------- 状態表示（色 + 必ずラベル文字） ---------- */

.bf-sal-state {
	display: inline-block;
	padding: 2px 10px;
	border-radius: 999px;
	border: 1px solid currentColor;
	font-size: 12px;
	font-weight: 600;
	white-space: nowrap;
}

.bf-sal-state--clear {
	color: var(--bf-sal-clear);
	background: #eaf7f0;
}

.bf-sal-state--tax {
	color: #8a6d00;
	background: #fdf6dc;
}

.bf-sal-state--apron1 {
	color: #9a4a12;
	background: #fdeee0;
}

.bf-sal-state--apron2 {
	color: #97281c;
	background: #fdeae7;
}

.bf-sal-state--unknown {
	color: #55555f;
	background: var(--bf-sal-bg-3);
}

.bf-sal-tag {
	display: inline-block;
	margin-right: 4px;
	padding: 1px 8px;
	border-radius: 999px;
	background: var(--bf-sal-bg-3);
	font-size: 11px;
	font-weight: 600;
	white-space: nowrap;
}

.bf-sal-tag--type {
	background: #ece5ff;
	color: #472a94;
}

.bf-sal-taglist {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 8px 0;
}

.bf-sal-badge {
	display: inline-block;
	padding: 0 8px;
	border-radius: 999px;
	background: var(--bf-sal-bg-3);
	font-size: 11px;
}

.bf-sal-badge--current {
	background: var(--bf-sal-accent);
	color: #fff;
}

/* ---------- Meter ---------- */

/*
   マーカーのラベルは絶対配置で translateX(-50%) して中心を合わせている。
   マーカーがバーの端に寄るチームでは、ラベルがバーの外へはみ出し、
   祖先が overflow:visible のためページ全体が横スクロールしていた
   （SACで documentElement.scrollWidth 417px / viewport 376px）。

   端に寄ったマーカーだけ、ラベルの寄せ方を内側へ変える。
   切り取らないので文字は最後まで読める。
   はみ出す量を減らすため、狭い画面ではラベル自体も小さくする。
*/
.bf-sal-meter__marker--edge-left .bf-sal-meter__markerlabel {
	transform: translateX(0);
}

.bf-sal-meter__marker--edge-right .bf-sal-meter__markerlabel {
	transform: translateX(-100%);
}

@media (max-width: 600px) {
	.bf-sal-meter__markerlabel {
		font-size: 10px;
		padding: 2px 6px;
	}
}

.bf-sal-meter__bar {
	position: relative;
	height: 30px;
	margin: 20px 0 8px;
	border-radius: 999px;
	background: linear-gradient(
		90deg,
		#e3f4ea 0%,
		#e3f4ea 40%,
		#fdf6dc 40%,
		#fdf6dc 62%,
		#fdeee0 62%,
		#fdeee0 80%,
		#fdeae7 80%,
		#fdeae7 100%
	);
	border: 1px solid var(--bf-sal-line);
}

.bf-sal-meter__mark {
	position: absolute;
	top: -6px;
	bottom: -6px;
	width: 3px;
	margin-left: -1px;
	border-radius: 2px;
}

.bf-sal-meter__mark--cap {
	background: var(--bf-sal-clear);
}

.bf-sal-meter__mark--tax {
	background: var(--bf-sal-tax);
}

.bf-sal-meter__mark--apron1 {
	background: var(--bf-sal-apron1);
}

.bf-sal-meter__mark--apron2 {
	background: var(--bf-sal-apron2);
}

.bf-sal-meter__marker {
	position: absolute;
	top: -12px;
	width: 0;
}

.bf-sal-meter__markerlabel {
	position: absolute;
	transform: translateX(-50%);
	padding: 2px 8px;
	border-radius: 6px;
	background: var(--bf-sal-ink);
	color: #fff;
	font-size: 11px;
	white-space: nowrap;
}

.bf-sal-meter__marker::after {
	content: "";
	position: absolute;
	top: 20px;
	left: -1px;
	width: 3px;
	height: 34px;
	background: var(--bf-sal-ink);
	border-radius: 2px;
}

.bf-sal-meter__legend {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 6px 16px;
	margin: 28px 0 0;
	padding: 0;
	list-style: none;
	font-size: 13px;
}

.bf-sal-meter__legend li {
	display: flex;
	align-items: center;
	gap: 8px;
	min-width: 0;
}

.bf-sal-meter__legendlabel {
	flex: 1 1 auto;
	min-width: 0;
}

.bf-sal-meter__legendval {
	flex: 0 0 auto;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

.bf-sal-swatch {
	display: inline-block;
	flex: 0 0 auto;
	width: 14px;
	height: 14px;
	border-radius: 4px;
	border: 1px solid var(--bf-sal-line);
}

.bf-sal-swatch--cap { background: var(--bf-sal-clear); }
.bf-sal-swatch--tax { background: var(--bf-sal-tax); }
.bf-sal-swatch--apron1 { background: var(--bf-sal-apron1); }
.bf-sal-swatch--apron2 { background: var(--bf-sal-apron2); }
.bf-sal-swatch--current { background: var(--bf-sal-ink); }
.bf-sal-swatch--guaranteed { background: var(--bf-sal-accent); }
.bf-sal-swatch--max { background: #c8b6ff; }

.bf-sal-legendrow {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 14px;
	margin: 8px 0;
	font-size: 12px;
	color: var(--bf-sal-ink-2);
}

/* ---------- Bars（将来サラリー） ---------- */

.bf-sal-bars {
	margin: 12px 0;
}

.bf-sal-bars__row {
	display: grid;
	grid-template-columns: 84px 1fr 92px;
	align-items: center;
	gap: 10px;
	margin-bottom: 8px;
}

.bf-sal-bars__label {
	font-size: 12px;
	font-weight: 600;
}

.bf-sal-bars__track {
	position: relative;
	height: 22px;
	min-width: 0;
	border-radius: 6px;
	background: var(--bf-sal-bg-3);
	overflow: hidden;
}

.bf-sal-bars__fill {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
}

.bf-sal-bars__fill--max {
	background: #c8b6ff;
	z-index: 1;
}

.bf-sal-bars__fill--guaranteed {
	background: var(--bf-sal-accent);
	z-index: 2;
}

.bf-sal-bars__value {
	font-size: 12px;
	text-align: right;
	font-variant-numeric: tabular-nums;
}

/* ---------- Scatter ---------- */

/*
 * SVGを幅100%で縮小描画すると、点の当たり判定も一緒に縮む
 * （半径22の透明円が実寸32pxになっていた）。
 * テーブルと同じく横スクロールさせ、SVGは原寸を保って
 * 44pxの当たり判定を維持する。ページ自体は横に溢れない。
 */
.bf-sal-scatter {
	max-width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	margin: 12px 0;
	border: 1px solid var(--bf-sal-line);
	border-radius: var(--bf-sal-radius);
	background: var(--bf-sal-bg);
}

.bf-sal-scatter svg {
	display: block;
	width: 100%;
	min-width: 960px; /* SVGの原寸。これ未満に縮むと当たり判定も縮む */
	height: auto;
}

.bf-sal-scatter__bg { fill: #fbfbfd; }
.bf-sal-scatter__grid { stroke: #e6e6ec; stroke-width: 1; }
.bf-sal-scatter__tick { fill: #6d6d7a; font-size: 13px; }
.bf-sal-scatter__axis { fill: #16161a; font-size: 15px; font-weight: 700; }
.bf-sal-scatter__hit { fill: transparent; }
.bf-sal-scatter__dot { fill: #6b3fd4; fill-opacity: 0.85; stroke: #fff; stroke-width: 1.5; }
.bf-sal-scatter__dotlabel { fill: #fff; font-size: 10px; font-weight: 700; pointer-events: none; }
.bf-sal-scatter__avgline { stroke: #e8730c; stroke-width: 2; stroke-dasharray: 6 5; }
.bf-sal-scatter__avglabel { fill: #9a4a12; font-size: 13px; }

.bf-sal-scatter__legend {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 4px 16px;
	margin: 8px 0;
	padding: 0;
	list-style: none;
	font-size: 12px;
	color: var(--bf-sal-ink-2);
}

/* ---------- Rankings ---------- */

.bf-sal-rankgrid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 16px;
}

.bf-sal-rank {
	min-width: 0;
	padding: 12px 14px;
	border: 1px solid var(--bf-sal-line);
	border-radius: var(--bf-sal-radius);
	background: var(--bf-sal-bg-2);
}

.bf-sal-rank__title {
	margin: 0 0 8px;
	font-size: 14px;
	font-weight: 700;
}

.bf-sal-rank__list {
	margin: 0;
	padding-left: 1.4em;
	font-size: 13px;
}

.bf-sal-rank__list li {
	margin-bottom: 4px;
}

.bf-sal-rank__list a {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 4px 12px;
	min-height: 44px; /* 指で押せる大きさを確保する */
	align-items: center;
	color: var(--bf-sal-ink);
	text-decoration: none;
}

.bf-sal-rank__list a:hover .bf-sal-rank__name {
	text-decoration: underline;
}

.bf-sal-rank__val {
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

/* ---------- Timeline ---------- */

.bf-sal-timeline {
	margin: 12px 0;
	padding: 0 0 0 20px;
	list-style: none;
	border-left: 3px solid var(--bf-sal-bg-3);
}

.bf-sal-timeline__item {
	position: relative;
	margin-bottom: 18px;
}

.bf-sal-timeline__item::before {
	content: "";
	position: absolute;
	left: -26px;
	top: 8px;
	width: 11px;
	height: 11px;
	border-radius: 50%;
	background: var(--bf-sal-accent);
}

.bf-sal-timeline__year {
	margin: 0 0 4px;
	font-size: 15px;
	font-weight: 700;
}

.bf-sal-timeline__list {
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 13px;
}

.bf-sal-timeline__list li {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	padding: 4px 0;
}

.bf-sal-timeline__player {
	font-weight: 600;
}

/* ---------- Season list（index） ---------- */

.bf-sal-seasonlist {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
	gap: 10px;
	margin: 12px 0;
	padding: 0;
	list-style: none;
}

.bf-sal-seasonlist__link {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-height: 64px;
	padding: 10px 14px;
	border: 1px solid var(--bf-sal-line);
	border-radius: var(--bf-sal-radius);
	background: var(--bf-sal-bg-2);
	color: var(--bf-sal-ink);
	text-decoration: none;
}

.bf-sal-seasonlist__link.is-current {
	border-color: var(--bf-sal-accent);
	background: #f5f1ff;
}

.bf-sal-seasonlist__id {
	font-size: 17px;
	font-weight: 700;
}

.bf-sal-seasonlist__meta {
	font-size: 12px;
	color: var(--bf-sal-ink-3);
}

.bf-sal-resultlist {
	margin: 8px 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--bf-sal-line);
}

.bf-sal-resultlist__item a {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	min-height: 52px;
	padding: 8px 4px;
	border-bottom: 1px solid var(--bf-sal-line);
	color: var(--bf-sal-ink);
	text-decoration: none;
}

.bf-sal-resultlist__sub {
	color: var(--bf-sal-ink-3);
	font-size: 12px;
}

/* ==================================================================
 * Mobile: テーブルをカード表示へ切り替える（仕様 31・32章）
 * 横スクロールを発生させない。
 * ================================================================== */

@media (max-width: 767px) {

	.bf-sal {
		padding: 0 12px 48px;
		font-size: 14px;
	}

	.bf-sal-tablewrap {
		overflow-x: visible;
	}

	.bf-sal-table thead {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		white-space: nowrap;
	}

	.bf-sal-table,
	.bf-sal-table tbody,
	.bf-sal-table tr,
	.bf-sal-table th,
	.bf-sal-table td {
		display: block;
		width: auto;
	}

	.bf-sal-table tr {
		margin-bottom: 12px;
		padding: 6px 12px;
		border: 1px solid var(--bf-sal-line);
		border-radius: var(--bf-sal-radius);
		background: var(--bf-sal-bg);
	}

	.bf-sal-table th,
	.bf-sal-table td {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		align-items: baseline;
		gap: 4px 12px;
		padding: 7px 0;
		border-bottom: 1px dashed var(--bf-sal-bg-3);
		text-align: left;
	}

	.bf-sal-table tr > *:last-child {
		border-bottom: 0;
	}

	.bf-sal-table td::before,
	.bf-sal-table th[data-label]::before {
		content: attr(data-label);
		flex: 0 0 auto;
		color: var(--bf-sal-ink-3);
		font-size: 11px;
		font-weight: 400;
	}

	.bf-sal-table th[scope="row"] {
		padding-top: 4px;
		font-size: 15px;
		font-weight: 700;
	}

	.bf-sal-num {
		text-align: right;
		white-space: normal;
	}

	/* 初期表示を絞る（選手 / Salary / 契約残 / FA）。詳細はAccordionで開く。 */
	.bf-sal-table--roster .bf-sal-col--opt {
		display: none;
	}

	.bf-sal-table--kv th {
		width: auto;
		background: none;
	}

	.bf-sal-bars__row {
		grid-template-columns: 64px 1fr;
		grid-template-areas:
			"label track"
			"value value";
	}

	.bf-sal-bars__label { grid-area: label; }
	.bf-sal-bars__track { grid-area: track; }
	.bf-sal-bars__value { grid-area: value; text-align: left; }

	.bf-sal-meter__legend {
		grid-template-columns: 1fr;
	}

	.bf-sal-meter__legend li {
		flex-wrap: wrap;
	}

	.bf-sal-search__row,
	.bf-sal-search__results {
		max-width: 100%;
	}

	.bf-sal-controls {
		gap: 10px;
	}

	.bf-sal-controls__group {
		flex: 1 1 100%;
	}
}

/* 320px でも破綻させない */
@media (max-width: 360px) {

	.bf-sal {
		padding: 0 10px 40px;
	}

	.bf-sal-btn {
		padding: 0 10px;
		font-size: 12px;
	}

	.bf-sal-statgrid,
	.bf-sal-statgrid--2col {
		grid-template-columns: 1fr;
	}

	.bf-sal-teamlink {
		flex-wrap: wrap;
	}

	.bf-sal-table th,
	.bf-sal-table td {
		flex-direction: column;
		align-items: flex-start;
		gap: 2px;
	}

	.bf-sal-num {
		text-align: left;
	}
}

@media (prefers-reduced-motion: reduce) {
	.bf-sal * {
		transition: none !important;
		animation: none !important;
	}
}

/* ---------- 導出status（DERIVED_VERIFIED / PARTIAL 等） ---------- */

.bf-sal-derived {
	display: inline-block;
	margin-top: 6px;
	padding: 1px 8px;
	border-radius: 999px;
	border: 1px solid currentColor;
	font-size: 11px;
	font-weight: 600;
	white-space: nowrap;
}

.bf-sal-derived--derived {
	color: #1c5fa8;
	background: #e8f1fb;
}

.bf-sal-derived--verified {
	color: var(--bf-sal-clear);
	background: #eaf7f0;
}

.bf-sal-derived--partial {
	color: #8a6d00;
	background: #fdf6dc;
}

.bf-sal-derived--unknown {
	color: #55555f;
	background: var(--bf-sal-bg-3);
}

/* ---------- 検証済み値と外部公表値の区別 ---------- */

/*
 * 「未確認」と「他サイトの公表値」を、確認済みの数字と同じ見た目にしない。
 * 外部参考値は必ず publisher 名を添えて出す（テンプレート側で担保）。
 */
.bf-sal-unconfirmed {
	display: inline-block;
	color: var(--bf-sal-unknown);
	font-size: 13px;
}

.bf-sal-extref {
	display: block;
	margin-top: 2px;
	color: var(--bf-sal-ink-3);
	font-size: 11px;
	font-weight: 400;
	white-space: nowrap;
}

.bf-sal-derived--source {
	border-color: var(--bf-sal-accent-2);
	background: #fff6ec;
	color: #8a4a05;
}

.bf-sal-breakdown caption {
	padding: 8px 0 4px;
	color: var(--bf-sal-ink-3);
	font-size: 13px;
	text-align: left;
}

.bf-sal-datanote {
	margin: 10px 0 0;
	padding: 10px 14px;
	border-left: 4px solid var(--bf-sal-ink-3);
	background: var(--bf-sal-bg-2);
	color: var(--bf-sal-ink-2);
	font-size: 13px;
	line-height: 1.7;
}

/* ==================================================================
 * 配色（リーグ / チーム）
 *
 * 色はCSS変数で外から入る。ここではその変数を使うだけで、
 * チームごとの個別ルールは書かない。
 *
 * 状態色（Cap内=緑 / Tax=黄 / 1st Apron=橙 / 2nd Apron=赤 / 不明=グレー）は
 * 別レイヤーとして固定し、チームカラーで上書きしない。
 * 例えばLakersのページでも2nd Apron警告は紫ではなく赤のまま。
 * ================================================================== */

.bf-sal {
	/* 既定値。A面ではleague、B面ではteamの値で上書きされる。 */
	--bf-accent-main: var(--bf-sal-accent);
	--bf-accent-sub: var(--bf-sal-accent-2);
	--bf-accent-soft: var(--bf-sal-bg-2);
	--bf-accent-border: var(--bf-sal-line);
	--bf-accent-on: #ffffff;
}

.bf-sal--league {
	--bf-accent-main: var(--bf-league-blue);
	--bf-accent-sub: var(--bf-league-red);
	--bf-accent-soft: var(--bf-league-blue-soft);
	--bf-accent-border: var(--bf-league-blue-border);
}

.bf-sal--team {
	--bf-accent-main: var(--bf-team-primary);
	--bf-accent-sub: var(--bf-team-secondary-ink);
	--bf-accent-soft: var(--bf-team-soft);
	--bf-accent-border: var(--bf-team-border);
	--bf-accent-on: var(--bf-team-on-primary);
}

/* 見出し・区切り */
.bf-sal .bf-sal-section__title {
	border-bottom-color: var(--bf-accent-main);
}

.bf-sal .bf-sal-hero {
	border-bottom-color: var(--bf-accent-border);
}

.bf-sal .bf-sal-hero__title {
	border-left: 6px solid var(--bf-accent-main);
	padding-left: 12px;
}

.bf-sal .bf-sal-hero__abbr {
	background: var(--bf-accent-main);
	color: var(--bf-accent-on);
}

.bf-sal .bf-sal-diagnosis {
	border-left-color: var(--bf-accent-main);
	background: var(--bf-accent-soft);
}

/* リンク・フォーカス */
.bf-sal .bf-sal-hero__crumb a,
.bf-sal .bf-sal-link a {
	color: var(--bf-accent-main);
}

.bf-sal a:focus-visible,
.bf-sal button:focus-visible,
.bf-sal select:focus-visible,
.bf-sal input:focus-visible {
	outline: 3px solid var(--bf-accent-main);
	outline-offset: 2px;
}

/* 選択中タブ・CTA */
.bf-sal .bf-sal-seasonnav__item.is-active {
	border-color: var(--bf-accent-main);
	background: var(--bf-accent-main);
	color: var(--bf-accent-on);
}

.bf-sal .bf-sal-section--bf {
	border-color: var(--bf-accent-main);
	background: var(--bf-accent-soft);
}

/* テーブル見出し・サマリーカード上部帯 */
.bf-sal .bf-sal-table thead th {
	border-bottom: 2px solid var(--bf-accent-main);
}

.bf-sal .bf-sal-stat {
	border-top: 3px solid var(--bf-accent-main);
}

.bf-sal .bf-sal-rank {
	border-top: 3px solid var(--bf-accent-sub);
}

/* 散布図 */
.bf-sal .bf-sal-scatter__dot { fill: var(--bf-accent-main); }
.bf-sal .bf-sal-scatter__avgline { stroke: var(--bf-accent-sub); }

/* ---------- データの信頼度バッジ ---------- */

/*
 * 色だけで意味を伝えない。必ずラベル文字を併記する。
 * 「確認済み」と「外部参考」を同じ見た目にしない。
 */
.bf-sal-badge {
	display: inline-block;
	margin-left: 6px;
	padding: 1px 8px;
	border: 1px solid var(--bf-sal-line);
	border-radius: 999px;
	font-size: 11px;
	font-weight: 700;
	line-height: 1.7;
	white-space: nowrap;
	vertical-align: middle;
}

.bf-sal-badge--derived {
	border-color: #1c8a52;
	background: #eaf7f0;
	color: #12633a;
}

.bf-sal-badge--source {
	border-color: #b06a10;
	background: #fff6ec;
	color: #8a4a05;
}

/*
   検証済みだが外部の最新公表値と食い違っている状態。
   「確認済み」と誤読されないよう、緑ではなく赤系にする。
*/
.bf-sal-badge--conflict {
	border-color: #c0392b;
	background: #fdecea;
	color: #96271b;
}

.bf-sal-badge--partial {
	border-color: #c9a000;
	background: #fffbe8;
	color: #7a6300;
}

.bf-sal-badge--unknown {
	border-color: var(--bf-sal-line);
	background: var(--bf-sal-bg-3);
	color: var(--bf-sal-unknown);
}

.bf-sal-note--rank {
	margin-top: 8px;
	padding: 8px 12px;
	border-left: 3px solid var(--bf-accent-sub);
	background: var(--bf-sal-bg-2);
}

/* ==================================================================
 * チームカラーの2色使い
 *
 * Primaryだけだと単色に見えるので、Secondaryを細いラインやアクセントに使う。
 * Lakersなら「紫＋ゴールド」と一目で分かる状態を目標にする。
 * ただし全面ゴールド背景のような派手さは避け、面はPrimary、線がSecondary。
 * ================================================================== */

.bf-sal--team .bf-sal-hero {
	padding-top: 0;
	border-top: 6px solid var(--bf-team-primary);
	border-bottom: 3px solid var(--bf-team-secondary);
}

.bf-sal--team .bf-sal-hero__title {
	border-left-color: var(--bf-team-primary);
	box-shadow: -6px 0 0 0 var(--bf-team-secondary);
}

.bf-sal--team .bf-sal-hero__abbr {
	background: var(--bf-team-primary);
	color: var(--bf-team-on-primary);
	border: 2px solid var(--bf-team-secondary);
}

/* 見出し下線を Primary 75% + Secondary 25% の2色に */
.bf-sal--team .bf-sal-section__title {
	border-bottom: 0;
	background-image: linear-gradient(
		to right,
		var(--bf-team-primary) 0%,
		var(--bf-team-primary) 75%,
		var(--bf-team-secondary) 75%,
		var(--bf-team-secondary) 100%
	);
	background-repeat: no-repeat;
	background-position: 0 100%;
	background-size: 100% 2px;
	padding-bottom: 8px;
}

.bf-sal--team .bf-sal-stat {
	border-top-color: var(--bf-team-primary);
	box-shadow: inset 0 -3px 0 0 var(--bf-team-secondary);
}

.bf-sal--team .bf-sal-seasonnav__item.is-active {
	background: var(--bf-team-primary);
	border-color: var(--bf-team-secondary);
	color: var(--bf-team-on-primary);
}

.bf-sal--team .bf-sal-section--bf,
.bf-sal--team .bf-sal-diagnosis {
	border-left-color: var(--bf-team-primary);
	border-right: 3px solid var(--bf-team-secondary);
}

.bf-sal--team .bf-sal-table thead th {
	border-bottom-color: var(--bf-team-primary);
}

/* 選手行：左にPrimary、上にSecondaryの細線 */
.bf-sal--team .bf-sal-rosterrow > th[scope="row"] {
	border-left: 4px solid var(--bf-team-primary);
	padding-left: 10px;
}

.bf-sal--team .bf-sal-rosterdetail > td {
	border-left: 4px solid var(--bf-team-secondary);
	background: var(--bf-team-soft);
}

.bf-sal--team .bf-sal-expand[aria-expanded="true"] {
	border-color: var(--bf-team-secondary);
	background: var(--bf-team-soft);
	color: var(--bf-team-primary);
	font-weight: 700;
}

/* ---------- 値の状態表示 ---------- */

/*
 * 0 / なし / 情報未確認 を別物として見せる。
 * 「情報未確認」を0の代わりに使わない。
 */
.bf-sal-state-val {
	font-variant-numeric: tabular-nums;
}

.bf-sal-state-val--zero {
	color: var(--bf-sal-ink);
	font-weight: 700;
}

.bf-sal-state-val--not-applicable {
	color: var(--bf-sal-ink-3);
}

.bf-sal-state-val--unknown {
	color: var(--bf-sal-unknown);
}

.bf-sal-unknownlist {
	margin: 8px 0 0;
	padding: 8px 12px;
	border-radius: var(--bf-sal-radius);
	background: var(--bf-sal-bg-3);
	color: var(--bf-sal-ink-3);
	font-size: 12px;
	line-height: 1.7;
}

.bf-sal-unknownlist__label {
	font-weight: 700;
}

/* ==================================================================
 * スマホのロスター表示をコンパクトにする
 *
 * 閉じている間は「選手名 / 今季給与 / 残年数 / FA区分 / 詳細ボタン」だけ。
 * 1選手が画面1枚を占有しないようにして、2〜3人が同時に見える密度にする。
 * ================================================================== */

@media (max-width: 767px) {

	.bf-sal-table--roster tbody tr.bf-sal-rosterrow {
		display: grid;
		grid-template-columns: 1fr auto;
		gap: 2px 10px;
		align-items: baseline;
		margin-bottom: 10px;
		padding: 10px 12px;
		border: 1px solid var(--bf-sal-line);
		border-radius: var(--bf-sal-radius);
		background: var(--bf-sal-bg);
	}

	/* 閉じている間は補助列を出さない（展開すると詳細に出る） */
	.bf-sal-table--roster tbody tr.bf-sal-rosterrow .bf-sal-col--opt {
		display: none;
	}

	.bf-sal-table--roster tbody tr.bf-sal-rosterrow > th[scope="row"] {
		grid-column: 1 / 2;
		font-size: 15px;
		font-weight: 700;
	}

	.bf-sal-table--roster tbody tr.bf-sal-rosterrow > td[data-label="今季給与"] {
		grid-column: 2 / 3;
		grid-row: 1;
		font-size: 15px;
		font-weight: 700;
		text-align: right;
	}

	.bf-sal-table--roster tbody tr.bf-sal-rosterrow > td[data-label="契約残年数"],
	.bf-sal-table--roster tbody tr.bf-sal-rosterrow > td[data-label="FA区分"] {
		grid-column: 1 / 3;
		font-size: 12px;
		color: var(--bf-sal-ink-2);
	}

	/* data-label をラベルとして見せる（テーブル見出しは隠れているため） */
	.bf-sal-table--roster tbody tr.bf-sal-rosterrow > td[data-label="契約残年数"]::before,
	.bf-sal-table--roster tbody tr.bf-sal-rosterrow > td[data-label="FA区分"]::before {
		content: attr(data-label) "：";
		color: var(--bf-sal-ink-3);
	}

	.bf-sal-table--roster tbody tr.bf-sal-rosterrow > td:last-child {
		grid-column: 1 / 3;
		margin-top: 4px;
	}

	.bf-sal-table--roster .bf-sal-expand {
		width: 100%;
		min-height: 44px;
	}

	.bf-sal-table--roster tbody tr.bf-sal-rosterdetail > td {
		display: block;
		margin: -6px 0 12px;
		padding: 10px 12px;
		border: 1px solid var(--bf-sal-line);
		border-radius: var(--bf-sal-radius);
	}
}

/* 検索から飛んできた選手を目立たせる */
.bf-sal-rosterrow.is-target > th[scope="row"] {
	box-shadow: inset 4px 0 0 0 var(--bf-accent-sub);
}

.bf-sal-rosterrow.is-target {
	background: var(--bf-accent-soft);
}

/* ------------------------------------------------------------------
 * スマホのロスターカードをさらに詰める
 *
 * 汎用のモバイル用セル指定（padding / min-height / flex）が効いたままだと
 * 1枚220px前後になり、1画面に1人しか入らない。
 * ここで打ち消して「名前＋今季給与」「残年数・FA区分」「ボタン」の3段に収める。
 * ------------------------------------------------------------------ */

@media (max-width: 767px) {

	.bf-sal-table--roster tbody tr.bf-sal-rosterrow > th,
	.bf-sal-table--roster tbody tr.bf-sal-rosterrow > td {
		display: block;
		min-height: 0;
		margin: 0;
		padding: 0;
		border: 0;
		background: none;
	}

	.bf-sal-table--roster tbody tr.bf-sal-rosterrow {
		grid-template-columns: 1fr auto;
		gap: 4px 10px;
		padding: 10px 12px;
	}

	.bf-sal-table--roster tbody tr.bf-sal-rosterrow > th[scope="row"] {
		grid-column: 1 / 2;
		grid-row: 1;
		line-height: 1.4;
	}

	.bf-sal-table--roster tbody tr.bf-sal-rosterrow > td[data-label="今季給与"] {
		grid-row: 1;
		line-height: 1.4;
	}

	/* 残年数とFA区分は横に並べて1段に収める */
	.bf-sal-table--roster tbody tr.bf-sal-rosterrow > td[data-label="契約残年数"] {
		grid-column: 1 / 2;
		grid-row: 2;
	}

	.bf-sal-table--roster tbody tr.bf-sal-rosterrow > td[data-label="FA区分"] {
		grid-column: 2 / 3;
		grid-row: 2;
		text-align: right;
	}

	.bf-sal-table--roster tbody tr.bf-sal-rosterrow > td[data-label="契約残年数"],
	.bf-sal-table--roster tbody tr.bf-sal-rosterrow > td[data-label="FA区分"] {
		font-size: 12px;
		line-height: 1.5;
	}

	.bf-sal-table--roster tbody tr.bf-sal-rosterrow > td:last-child {
		grid-column: 1 / 3;
		grid-row: 3;
		margin-top: 2px;
	}

	.bf-sal-table--roster .bf-sal-expand {
		min-height: 44px;
		line-height: 1.2;
	}

	/* 選手名の左にチームカラーの帯（カード全体の縦線代わり） */
	.bf-sal--team .bf-sal-table--roster tbody tr.bf-sal-rosterrow {
		border-left: 4px solid var(--bf-team-primary);
		box-shadow: inset 0 3px 0 0 var(--bf-team-secondary);
		padding-top: 12px;
	}

	.bf-sal--team .bf-sal-table--roster tbody tr.bf-sal-rosterrow > th[scope="row"] {
		border-left: 0;
		padding-left: 0;
	}
}

/* ==================================================================
 * hidden属性を必ず効かせる
 *
 * モバイルのレスポンシブテーブルで
 *   .bf-sal-table tr { display: block; }
 * を指定しており、これは作者スタイルなので
 * ブラウザ標準の [hidden] { display: none } に勝ってしまう。
 * その結果、hidden を付け外ししても詳細パネルが閉じなかった。
 *
 * Salary DBのスコープ内だけで hidden を最優先にする。
 * JS側は hidden を単一の状態源として使う。
 * ================================================================== */

.bf-sal [hidden] {
	display: none !important;
}

/* --------------------------------------------------------------
   Cap / Tax / Apron のライン差とメーター
   マーカーは2本。Cap・Tax判定とApron判定で基準額が別なため、
   1本にまとめると必ずどちらかが誤りになる。
   -------------------------------------------------------------- */

.bf-sal-meter__marker--salary .bf-sal-meter__markerlabel,
.bf-sal-meter__marker--salary::after {
	background: var(--bf-sal-ink);
}

.bf-sal-meter__marker--apron .bf-sal-meter__markerlabel,
.bf-sal-meter__marker--apron::after {
	background: var(--bf-sal-apron1);
}

/* 2本が近い値だと重なるので、Apron側を下段へずらす */
.bf-sal-meter__marker--apron {
	top: 4px;
}

.bf-sal-meter__marker--apron::after {
	top: 16px;
	height: 30px;
}

.bf-sal-swatch--cursalary { background: var(--bf-sal-ink); }
.bf-sal-swatch--curapron { background: var(--bf-sal-apron1); }

/* 超過は赤系。--bf-sal-tax は白地では読みづらいので文字色には使わない */
.bf-sal-delta--over { color: var(--bf-sal-apron2); }
.bf-sal-delta--under { color: var(--bf-sal-clear); }