/* データテーブル非表示（グローバル） */
.vod-data-table { 
	display:none;
}

/* CSS変数（.vod-radar スコープに限定） */
.vod-radar { 
	--bg:#f5f4f0;
	--surface:#ffffff;
	--border:#e0ddd6;
	--text:#1a1a18;
	--text-dim:#7a7a72;
	--accent:#99CF2F;
	--accent-dark:#6fa020;
	--tag-bg:#f0f0ea;	
	--mono:monospace;	
	--sans:sans-serif;
}

/* ローディングスピナー */
@keyframes vod-spin {
	to { transform: rotate(360deg); }
}
.vod-radar:not([data-loaded]) {
	display:flex;
	align-items:center;
	justify-content:center;
	min-height:120px;
}
.vod-radar:not([data-loaded])::before {
	content:'';
	width:36px;
	height:36px;
	border:3px solid var(--border);
	border-top-color:var(--accent);
	border-radius:50%;
	animation:vod-spin .7s linear infinite;
}

/* セクション共通 */
.vod-section {
	margin: 32px auto;
}
.vod-section-head { 
	display:flex;
	align-items:baseline;
	gap:10px;
	margin-bottom:16px;
	padding-bottom:10px;
	border-bottom:1px solid var(--border);
}
.vod-section-num { 
	font-family:var(--mono);
	font-size:11px;
	background:var(--text);
	color:#fff;
	padding:2px 7px;
	border-radius:2px;
}
.vod-section-title { 
	font-size:14px;
	font-weight:700;
}
.vod-section-sub { 
	font-size:11px;
	color:var(--text-dim);
	margin-left:auto;
}

/* サービス選択 */
.service-selector { 
	display:flex;
	flex-wrap:wrap;
	gap:8px;
	margin-bottom:24px;
}
.svc-btn { 
	display:flex;
	align-items:center;
	gap:6px;
	padding:6px 12px;
	margin-bottom: 0 !important;
	border:1px solid var(--border);
	background:var(--surface);
	cursor:pointer;
	font-family:var(--sans);
	font-size:12px;
	font-weight:700;
	color:var(--text-dim);
	transition:all .3s;
}
.svc-btn:hover { 
	color:#fff;
	border-color:#aaa;
	border:1px solid var(--border);
	background:var(--text);
}
.svc-btn.active { 
	border-color:var(--text);
	background:var(--text);
	color:#fff;
}
.svc-btn .dot { 
	width:8px;
	height:8px;
	border-radius:50%;
	flex-shrink:0;
}

/* 全選択/全解除ボタン */
.toggle-all-btn {
	padding:3px 10px;
	border:1.5px solid var(--border);
	border-radius:20px;
	background:var(--surface);
	cursor:pointer;
	font-family:var(--sans);
	font-size:11px;
	color:var(--text-dim);
	transition:all .15s;
}
.toggle-all-btn:hover {
	border-color:#aaa;
	color:var(--text);
}

/* 01 レーダー */
.radar-wrap { 
	background:var(--surface);
	border:1px solid var(--border);
	padding:24px;
	display:grid;
	grid-template-columns:1fr 200px;
	gap:24px;
	align-items:start;
}
@media(max-width:640px) { 
	.radar-wrap { 
	grid-template-columns:1fr;
}}
.radar-canvas-wrap { 
	display:flex;
	justify-content:center;
}
.radar-canvas-wrap canvas { 
	max-width:420px;
	width:100%;
}
.radar-legend { 
	display:flex;
	flex-direction:column;
	gap:0;
	margin-bottom:20px;
}
.legend-row { 
	display:flex;
	align-items:center;
	gap:8px;
	font-size:12px;
	font-weight:700;
}
.legend-line { 
	width:20px;
	height:3px;
	border-radius:2px;
	flex-shrink:0;
}
.axes-list { 
	border-top:1px solid var(--border);
	padding-top:12px;
}
.axis-item { 
	display:flex;
	gap:8px;
	margin-bottom:8px;
	font-size:11px;
	line-height:1.5;
}
.axis-tag { 
	font-family:var(--mono);
	font-size:9px;
	background:var(--tag-bg);
	padding:1px 5px;
	border-radius:2px;
	color:var(--text-dim);
	flex-shrink:0;
	margin-top:2px;
}

/* 02 棒グラフ */
.bar-section { 
	background:var(--surface);
	border:1px solid var(--border);
	overflow:hidden;
}
.genre-tabs { 
	display:flex;
	border-bottom:1.5px solid var(--border);
	overflow-x:auto;
}
.genre-tab { 
	padding:10px 16px;
	font-size:12px;
	font-weight:700;
	color:var(--text-dim);
	cursor:pointer;
	white-space:nowrap;
	border-bottom:2px solid transparent;
	border-radius: 0;
	transition:all .3s;
	background:none;
	border-top:none;
	border-left:none;
	border-right:none;
	font-family:var(--sans);
}
.genre-tab:hover { 
	color:var(--text);
	border-width: 0 0 2px !important;
}
.genre-tab.active { 
	color:var(--text);
	border-width: 0 0 2px !important;
	border-bottom-color:var(--accent-dark);
}
.bar-chart-area { 
	padding:16px 24px 20px;
}
.bar-row { 
	display:grid;
	grid-template-columns:130px 1fr 72px;
	align-items:center;
	gap: 8px;
	margin-bottom:9px;
}
.bar-label { 
	font-size:11px;
	font-weight:700;
	text-align:right;
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
}
.bar-track { 
	height:20px;
	background:var(--tag-bg);
	border-radius:3px;
	overflow:hidden;
}
.bar-fill { 
	height:100%;
	border-radius:3px;
	transition:width .4s cubic-bezier(.4,0,.2,1);
}
.bar-val { 
	font-family:var(--mono);
	font-size:10px;
	color:var(--text-dim);
	text-align:right;
	white-space:nowrap;
	position: relative
}
.est { 
	color:#bbb;
	position: absolute;
	right: -12px;
}


/* 03 スコア詳細表 */
.score-table-wrap { 
	background:var(--surface);
	border:1px solid var(--border);
	overflow:auto;
}
.score-table-wrap table { 
	width:100%;
	border-collapse:collapse;
	font-size:11px;
	margin: 0;
}
.score-table-wrap th { 
	padding:8px 12px;
	background:var(--tag-bg);
	font-family:var(--mono);
	font-size:9px;
	letter-spacing:.08em;
	text-transform:uppercase;
	text-align: center;
	color:var(--text-dim);
	border-bottom:1px solid var(--border);
	white-space:nowrap;
}
.score-table-wrap td { 
	padding: 8px 8px;
	border-bottom:1px solid var(--border);
	vertical-align:middle;
}
.score-table-wrap tbody tr:last-child td { 
	border-bottom:none;
}
.score-table-wrap tbody tr:hover { 
	background:var(--tag-bg);
}
.svc-name-cell { 
	display:flex;
	font-size: 11px;
	align-items:center;
	gap:4px;
	font-weight:700;
	white-space:nowrap;
}
.cell-dot { 
	width:8px;
	height:8px;
	border-radius:50%;
	flex-shrink:0;
}
.mini-bar { 
	display:flex;
	align-items:center;
	gap: 4px;
}
.mini-track { 
	flex:1;
	height:6px;
	background:var(--tag-bg);
	border-radius:3px;
	overflow:hidden;
	min-width:50px;
}
.mini-fill { 
	height:100%;
	border-radius:3px;
}
.mini-val { 
	font-family:var(--mono);
	font-size: 10px;
	color:var(--text-dim);
	width:24px;
	text-align:right;
}
.svc-signup-link {
	display:block;
	font-size:11px;
	color:var(--accent-dark);
	text-decoration:none;
	margin-top:2px;
}
.svc-signup-link:hover { text-decoration:underline; }
.plan-row td {
	font-size:11px;
	color:var(--text-dim);
	border-top:none;
	margin-bottom:0;
}