/*
 * 「この資格のカチ」新セクション（市場全体調査v2・Local専用プレビュー）のスタイル。
 * .qlm-qd-block配下の .qlm-qv-* でscopeしている。qlm-common.cssのデザイントークンを踏襲し、
 * 既存の資格詳細ページ（qualification-detail.css）と同じ余白・角丸・フォントサイズに合わせる。
 * このファイルはLocal専用プレビュー機能の一部であり、正式DB実装時は置き換えを想定している。
 */

.qlm-qv-header {
	margin: 0 0 1.3em;
}

.qlm-qv-subcopy {
	margin: 0.3em 0 0;
	color: var( --qlm-color-text-muted );
	font-size: 0.92em;
}

/* ---------------------------------------------------------------------
 * 1. 「この資格のカチ」4カード
 * ------------------------------------------------------------------- */

.qlm-qv-cards {
	display: grid;
	grid-template-columns: repeat( 4, 1fr );
	gap: 0.9em;
	margin: 0 0 1.8em;
}

@media ( max-width: 900px ) {
	.qlm-qv-cards {
		grid-template-columns: repeat( 2, 1fr );
	}
}

@media ( max-width: 480px ) {
	.qlm-qv-cards {
		grid-template-columns: 1fr;
	}
}

.qlm-qv-card {
	background: var( --qlm-color-bg-section );
	border: 1px solid var( --qlm-color-border );
	border-radius: var( --qlm-radius-card );
	padding: 1.1em 1.15em;
	display: flex;
	flex-direction: column;
	gap: 0.4em;
}

.qlm-qv-card-title {
	margin: 0;
	font-size: 0.85em;
	font-weight: 600;
	color: var( --qlm-color-text-muted );
}

.qlm-qv-card-figure {
	margin: 0;
	font-size: 1.7rem;
	font-weight: 700;
	color: var( --qlm-color-primary );
	line-height: 1.15;
}

.qlm-qv-card-figure--pending {
	font-size: 1.15rem;
	color: var( --qlm-color-text-muted );
}

.qlm-qv-card-sub {
	margin: 0;
	font-size: 0.85em;
	color: var( --qlm-color-text );
}

.qlm-qv-card-note {
	margin: 0.2em 0 0;
	font-size: 0.78em;
	color: var( --qlm-color-text-muted );
	line-height: 1.5;
}

/* カード2：必須・歓迎の内訳バー */

.qlm-qv-breakdown {
	display: flex;
	flex-direction: column;
	gap: 0.4em;
	margin: 0.2em 0;
}

.qlm-qv-bar-row {
	display: grid;
	grid-template-columns: 3.4em 1fr 3em;
	align-items: center;
	gap: 0.5em;
	font-size: 0.85em;
}

.qlm-qv-bar-label {
	color: var( --qlm-color-text-muted );
}

.qlm-qv-bar-track {
	background: var( --qlm-color-border );
	border-radius: 999px;
	height: 8px;
	overflow: hidden;
}

.qlm-qv-bar-fill {
	display: block;
	height: 100%;
	background: var( --qlm-color-secondary );
	border-radius: 999px;
}

.qlm-qv-bar-value {
	text-align: right;
	color: var( --qlm-color-primary );
	font-weight: 700;
}

/* カード4：提示給与中央値（資格記載あり／なし） */

.qlm-qv-salary-compare {
	display: flex;
	flex-direction: column;
	gap: 0.5em;
	margin: 0.2em 0;
}

.qlm-qv-salary-compare > div {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 0.6em;
}

.qlm-qv-salary-label {
	font-size: 0.82em;
	color: var( --qlm-color-text-muted );
}

.qlm-qv-salary-figure {
	font-size: 1.15rem;
	font-weight: 700;
	color: var( --qlm-color-primary );
	white-space: nowrap;
}

/* ---------------------------------------------------------------------
 * 2〜5. 各サブセクション共通の見出し・区切り
 * ------------------------------------------------------------------- */

.qlm-qv-section {
	margin-top: 1.9em;
	padding-top: 1.5em;
	border-top: 1px solid var( --qlm-color-border );
}

.qlm-qv-section-heading {
	font-size: 1.02rem;
	font-weight: 700;
	color: var( --qlm-color-primary );
	margin: 0 0 0.9em;
}

/* ---------------------------------------------------------------------
 * 2. 提示給与の比較（棒グラフ）
 * ------------------------------------------------------------------- */

.qlm-qv-bar-chart {
	display: flex;
	flex-direction: column;
	gap: 0.7em;
	margin: 0 0 0.8em;
}

.qlm-qv-bar-chart-row {
	display: grid;
	grid-template-columns: 6.5em 1fr auto;
	align-items: center;
	gap: 0.7em;
}

.qlm-qv-bar-chart-label {
	font-size: 0.85em;
	color: var( --qlm-color-text-muted );
	font-weight: 600;
}

.qlm-qv-bar-chart-track {
	background: var( --qlm-color-bg );
	border: 1px solid var( --qlm-color-border );
	border-radius: 999px;
	height: 22px;
	overflow: hidden;
}

.qlm-qv-bar-chart-fill {
	display: block;
	height: 100%;
	border-radius: 999px;
}

.qlm-qv-bar-chart-fill--with {
	background: var( --qlm-color-secondary );
}

.qlm-qv-bar-chart-fill--without {
	background: var( --qlm-color-accent );
}

.qlm-qv-bar-chart-value {
	font-size: 0.95em;
	font-weight: 700;
	color: var( --qlm-color-primary );
	white-space: nowrap;
}

@media ( max-width: 480px ) {
	.qlm-qv-bar-chart-row {
		grid-template-columns: 1fr;
		gap: 0.3em;
	}

	.qlm-qv-bar-chart-value {
		text-align: right;
	}
}

.qlm-qv-salary-average {
	margin: 0 0 0.6em;
	font-size: 0.85em;
	color: var( --qlm-color-text-muted );
}

.qlm-qv-notice {
	margin: 0;
	font-size: 0.82em;
	color: var( --qlm-color-text-muted );
}

/* ---------------------------------------------------------------------
 * 3. 活用職種
 * ------------------------------------------------------------------- */

.qlm-qv-occupation-summary {
	display: flex;
	align-items: baseline;
	gap: 1em;
	flex-wrap: wrap;
	margin: 0 0 1em;
}

.qlm-qv-occupation-count-figure {
	margin: 0;
	font-size: 2rem;
	font-weight: 700;
	color: var( --qlm-color-primary );
	line-height: 1;
}

.qlm-qv-occupation-count-unit {
	font-size: 0.55em;
	font-weight: 600;
	color: var( --qlm-color-text-muted );
	margin-left: 0.25em;
}

.qlm-qv-occupation-most-common {
	margin: 0;
	font-size: 0.9em;
	color: var( --qlm-color-text );
}

.qlm-qv-occupation-ranking {
	list-style: none;
	margin: 0 0 0.8em;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.6em;
}

.qlm-qv-occupation-ranking li {
	display: grid;
	grid-template-columns: 1.6em 1fr 3.2em;
	align-items: center;
	gap: 0.6em;
	font-size: 0.88em;
}

.qlm-qv-occupation-ranking li.qlm-qv-occ-tie {
	grid-template-columns: 1.6em 1fr;
	color: var( --qlm-color-text-muted );
}

.qlm-qv-rank {
	font-weight: 700;
	color: var( --qlm-color-secondary );
}

.qlm-qv-occ-main {
	display: flex;
	flex-direction: column;
	gap: 0.3em;
	min-width: 0;
}

.qlm-qv-occ-name {
	color: var( --qlm-color-text );
}

.qlm-qv-occ-bar-track {
	background: var( --qlm-color-border );
	border-radius: 999px;
	height: 6px;
	overflow: hidden;
}

.qlm-qv-occ-bar-fill {
	display: block;
	height: 100%;
	background: var( --qlm-color-secondary );
	border-radius: 999px;
}

.qlm-qv-occ-count {
	text-align: right;
	font-weight: 700;
	color: var( --qlm-color-primary );
}

.qlm-qv-occupation-caveat {
	margin: 0;
	font-size: 0.8em;
	color: var( --qlm-color-text-muted );
}

/* ---------------------------------------------------------------------
 * 4. レーダーチャート（資格の特徴）：5軸の実データを描画する。5軸合計・総合点・
 * ランキングは表示しない。未評価の軸（危険物乙4の求人記載率）は破線スポーク＋
 * 「未評価」ラベルで区別し、0点として中心へは結ばない。
 * ------------------------------------------------------------------- */

.qlm-qv-radar-body {
	display: flex;
	align-items: flex-start;
	gap: 1.5em;
	flex-wrap: wrap;
}

.qlm-qv-radar-frame {
	position: relative;
	width: 220px;
	flex: 0 0 220px;
	aspect-ratio: 1 / 1;
	margin: 0 auto;
}

.qlm-qv-radar-frame svg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.qlm-qv-radar-fill {
	fill: var( --qlm-color-secondary );
	fill-opacity: 0.22;
	stroke: var( --qlm-color-secondary );
	stroke-width: 1;
	stroke-linejoin: round;
}

.qlm-qv-radar-dot {
	fill: var( --qlm-color-secondary );
}

.qlm-qv-radar-axis {
	position: absolute;
	transform: translate( -50%, -50% );
	font-size: 0.66em;
	font-weight: 600;
	color: var( --qlm-color-text-muted );
	text-align: center;
	width: 5.2em;
	line-height: 1.3;
}

.qlm-qv-radar-axis-value {
	display: block;
	margin-top: 0.15em;
	font-size: 1.15em;
	font-weight: 700;
	color: var( --qlm-color-primary );
}

.qlm-qv-radar-axis-status {
	display: block;
	margin-top: 0.15em;
	font-size: 0.95em;
	font-weight: 700;
	color: var( --qlm-color-accent );
}

.qlm-qv-radar-axis--unevaluated {
	color: var( --qlm-color-text-muted );
}

.qlm-qv-radar-notes {
	flex: 1 1 220px;
	display: flex;
	flex-direction: column;
	gap: 0.6em;
}

.qlm-qv-radar-unevaluated-note {
	margin: 0;
	background: var( --qlm-color-bg-section );
	border-left: 3px solid var( --qlm-color-accent );
	border-radius: 0 var( --qlm-radius-button ) var( --qlm-radius-button ) 0;
	padding: 0.7em 0.9em;
	font-size: 0.85em;
	color: var( --qlm-color-text );
	line-height: 1.6;
}

.qlm-qv-radar-disclaimer {
	margin: 0;
	font-size: 0.78em;
	color: var( --qlm-color-text-muted );
	line-height: 1.6;
}

@media ( max-width: 480px ) {
	.qlm-qv-radar-body {
		flex-direction: column;
		align-items: center;
	}

	.qlm-qv-radar-frame {
		width: 190px;
		flex-basis: 190px;
	}

	.qlm-qv-radar-notes {
		flex-basis: auto;
		width: 100%;
	}
}

/* ---------------------------------------------------------------------
 * 5. 調査から見たこの資格（総合コメント）
 * ------------------------------------------------------------------- */

.qlm-qv-comment-box {
	background: var( --qlm-color-bg-section );
	border-left: 3px solid var( --qlm-color-accent );
	border-radius: 0 var( --qlm-radius-button ) var( --qlm-radius-button ) 0;
	padding: 1.1em 1.3em;
}

.qlm-qv-comment-box p {
	margin: 0 0 0.8em;
	color: var( --qlm-color-text );
	line-height: 1.8;
}

.qlm-qv-comment-box p:last-child {
	margin-bottom: 0;
}

/* ---------------------------------------------------------------------
 * スマホ幅での安全性（qualification-detail.cssの480px方針と統一）。
 * ------------------------------------------------------------------- */

@media ( max-width: 480px ) {
	.qlm-qv-occupation-summary {
		flex-direction: column;
		gap: 0.4em;
	}
}