/*
 * ペトくらべ 自動給餌器診断 — フロント用スタイル
 *
 * すべてのセレクタを .pkfm-app 配下にスコープしている。
 * テーマ（SWELL等）の要素セレクタは上書きしない。
 * モバイルファースト（幅の狭い端末を基準に、min-width で拡張）。
 */

.pkfm-app {
	--pkfm-accent: #2f7d5d;
	--pkfm-accent-strong: #24634a;
	--pkfm-accent-soft: #eaf5ef;
	--pkfm-text: #26292c;
	--pkfm-text-muted: #666c72;
	--pkfm-border: #d9dde1;
	--pkfm-border-strong: #b9c0c6;
	--pkfm-bg: #ffffff;
	--pkfm-bg-soft: #f6f8f9;
	--pkfm-danger: #b3352f;
	--pkfm-danger-soft: #fdf0ef;
	--pkfm-radius: 10px;
	--pkfm-gap: 16px;

	box-sizing: border-box;
	margin: 0 0 2em;
	color: var(--pkfm-text);
	font-size: 15px;
	line-height: 1.7;
	text-align: left;
	-webkit-text-size-adjust: 100%;
}

.pkfm-app *,
.pkfm-app *::before,
.pkfm-app *::after {
	box-sizing: inherit;
}

/*
 * hidden 属性が display 指定に負けないようにする。
 * .pkfm-app 配下に限定しているため、テーマ側の要素には影響しない。
 */
.pkfm-app [hidden] {
	display: none;
}

/*
 * 端末がダークモードのときだけ配色を反転する。
 * ショートコードに theme="light" を指定すると（.pkfm-app--light）常に明るい配色になる。
 */
@media (prefers-color-scheme: dark) {
	.pkfm-app:not(.pkfm-app--light) {
		--pkfm-accent: #4fae86;
		--pkfm-accent-strong: #6cc49d;
		--pkfm-accent-soft: #1e2a25;
		--pkfm-text: #e7eaec;
		--pkfm-text-muted: #a8b0b6;
		--pkfm-border: #3b4146;
		--pkfm-border-strong: #4f575d;
		--pkfm-bg: #1b1e20;
		--pkfm-bg-soft: #23272a;
		--pkfm-danger: #f08c85;
		--pkfm-danger-soft: #2d2120;
	}
}

/* ---------------------------------------------------------- 見出し */
.pkfm-hero {
	margin: 0 0 var(--pkfm-gap);
	padding: 18px 16px;
	background: var(--pkfm-accent-soft);
	border-radius: var(--pkfm-radius);
}

.pkfm-hero__title {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 1.25rem;
	line-height: 1.45;
	font-weight: 700;
	color: var(--pkfm-text);
}

.pkfm-hero__lead {
	margin: 8px 0 0;
	font-size: 0.875rem;
	color: var(--pkfm-text-muted);
}

@media screen and (min-width: 600px) {
	.pkfm-hero {
		padding: 24px;
	}

	.pkfm-hero__title {
		font-size: 1.5rem;
	}
}

/* ---------------------------------------------------------- 進捗 */
.pkfm-progress {
	margin: 0 0 var(--pkfm-gap);
}

.pkfm-progress__meta {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 8px;
	margin: 0 0 6px;
	font-size: 0.8125rem;
}

.pkfm-progress__step {
	font-weight: 700;
	color: var(--pkfm-accent);
	letter-spacing: 0.02em;
}

.pkfm-progress__label {
	color: var(--pkfm-text-muted);
}

.pkfm-progress__track {
	display: block;
	height: 8px;
	border-radius: 999px;
	background: var(--pkfm-bg-soft);
	border: 1px solid var(--pkfm-border);
	overflow: hidden;
}

.pkfm-progress__bar {
	display: block;
	height: 100%;
	width: 0;
	background: var(--pkfm-accent);
	transition: width 0.25s ease;
}

/* ---------------------------------------------------------- 詳細トグル */
.pkfm-detail {
	margin: 0 0 var(--pkfm-gap);
	padding: 12px 14px;
	background: var(--pkfm-bg-soft);
	border: 1px solid var(--pkfm-border);
	border-radius: var(--pkfm-radius);
}

.pkfm-detail__label {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 0;
	font-size: 0.9375rem;
	font-weight: 600;
	cursor: pointer;
}

.pkfm-detail__label input {
	width: 20px;
	height: 20px;
	margin: 2px 0 0;
	flex: 0 0 auto;
	accent-color: var(--pkfm-accent);
}

.pkfm-help {
	margin: 6px 0 0;
	font-size: 0.8125rem;
	color: var(--pkfm-text-muted);
}

/* ---------------------------------------------------------- ステップ */
.pkfm-step {
	margin: 0 0 22px;
	padding: 0;
}

.pkfm-form--stepped .pkfm-step {
	margin-bottom: 0;
}

.pkfm-step__title {
	margin: 0 0 4px;
	padding: 0;
	border: 0;
	font-size: 1.0625rem;
	font-weight: 700;
	line-height: 1.5;
	color: var(--pkfm-text);
}

.pkfm-step__num {
	display: inline-block;
	margin-right: 8px;
	padding: 2px 8px;
	border-radius: 999px;
	background: var(--pkfm-accent);
	color: #fff;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	vertical-align: 2px;
}

.pkfm-step__lead {
	margin: 0 0 14px;
	font-size: 0.875rem;
	color: var(--pkfm-text-muted);
}

/* ---------------------------------------------------------- 質問 */
.pkfm-question {
	margin: 0 0 18px;
	padding: 14px;
	background: var(--pkfm-bg);
	border: 1px solid var(--pkfm-border);
	border-radius: var(--pkfm-radius);
}

.pkfm-question--invalid {
	border-color: var(--pkfm-danger);
	background: var(--pkfm-danger-soft);
}

.pkfm-fieldset {
	margin: 0;
	padding: 0;
	border: 0;
	min-width: 0;
}

.pkfm-question__label {
	display: block;
	margin: 0 0 10px;
	padding: 0;
	font-size: 0.9375rem;
	font-weight: 700;
	line-height: 1.5;
}

.pkfm-question__unit {
	font-weight: 400;
	font-size: 0.8125rem;
	color: var(--pkfm-text-muted);
}

.pkfm-question__help {
	margin: -4px 0 10px;
	font-size: 0.8125rem;
	color: var(--pkfm-text-muted);
}

.pkfm-question__error {
	margin: 8px 0 0;
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--pkfm-danger);
}

.pkfm-tag {
	display: inline-block;
	margin-left: 6px;
	padding: 1px 7px;
	border-radius: 4px;
	font-size: 0.6875rem;
	font-weight: 700;
	vertical-align: 1px;
}

.pkfm-tag--required {
	background: var(--pkfm-danger-soft);
	color: var(--pkfm-danger);
}

/* 選択肢 */
.pkfm-choices {
	display: grid;
	grid-template-columns: 1fr;
	gap: 8px;
}

@media screen and (min-width: 360px) {
	.pkfm-choices {
		grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
	}

	.pkfm-choices--count-2 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.pkfm-choice {
	display: flex;
	align-items: center;
	gap: 10px;
	min-height: 48px;
	margin: 0;
	padding: 10px 12px;
	background: var(--pkfm-bg);
	border: 1px solid var(--pkfm-border-strong);
	border-radius: var(--pkfm-radius);
	font-size: 0.9375rem;
	line-height: 1.4;
	cursor: pointer;
	transition: border-color 0.15s ease, background-color 0.15s ease;
}

.pkfm-choice__input {
	width: 20px;
	height: 20px;
	margin: 0;
	flex: 0 0 auto;
	accent-color: var(--pkfm-accent);
}

.pkfm-choice--selected {
	border-color: var(--pkfm-accent);
	background: var(--pkfm-accent-soft);
	font-weight: 700;
}

.pkfm-choice:focus-within {
	outline: 2px solid var(--pkfm-accent);
	outline-offset: 2px;
}

/* 入力欄 */
.pkfm-input,
.pkfm-select {
	width: 100%;
	max-width: 100%;
	min-height: 48px;
	padding: 10px 12px;
	background: var(--pkfm-bg);
	color: var(--pkfm-text);
	border: 1px solid var(--pkfm-border-strong);
	border-radius: var(--pkfm-radius);
	font-size: 1rem;
	line-height: 1.5;
}

.pkfm-numberbox {
	display: flex;
	align-items: center;
	gap: 8px;
	max-width: 240px;
}

.pkfm-numberbox__unit {
	flex: 0 0 auto;
	font-size: 0.875rem;
	color: var(--pkfm-text-muted);
}

/* ---------------------------------------------------------- ボタン */
.pkfm-nav {
	display: flex;
	gap: 10px;
	margin: 18px 0 0;
}

.pkfm-nav .pkfm-btn {
	flex: 1 1 0;
}

.pkfm-actions {
	margin: 18px 0 0;
}

.pkfm-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 50px;
	padding: 12px 18px;
	border: 1px solid transparent;
	border-radius: var(--pkfm-radius);
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.4;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}

.pkfm-btn--primary {
	background: var(--pkfm-accent);
	color: #fff;
}

.pkfm-btn--primary:hover,
.pkfm-btn--primary:focus {
	background: var(--pkfm-accent-strong);
	color: #fff;
}

.pkfm-btn--ghost {
	background: var(--pkfm-bg);
	border-color: var(--pkfm-border-strong);
	color: var(--pkfm-text);
}

.pkfm-btn--wide {
	width: 100%;
}

.pkfm-form__note {
	margin: 16px 0 0;
	font-size: 0.8125rem;
	color: var(--pkfm-text-muted);
}

/* ---------------------------------------------------------- 通知 */
.pkfm-notice {
	margin: 0 0 var(--pkfm-gap);
	padding: 12px 14px;
	border-radius: var(--pkfm-radius);
	border: 1px solid var(--pkfm-border);
	background: var(--pkfm-bg-soft);
	font-size: 0.875rem;
}

.pkfm-notice--error {
	border-color: var(--pkfm-danger);
	background: var(--pkfm-danger-soft);
	color: var(--pkfm-danger);
}

.pkfm-notice__title {
	margin: 0 0 4px;
	font-weight: 700;
}

.pkfm-notice__list {
	margin: 0;
	padding-left: 1.2em;
}

/* ---------------------------------------------------------- 結果 */
.pkfm-results {
	padding: 16px;
	background: var(--pkfm-bg-soft);
	border: 1px solid var(--pkfm-border);
	border-radius: var(--pkfm-radius);
}

.pkfm-results__title {
	margin: 0 0 8px;
	padding: 0;
	border: 0;
	font-size: 1.125rem;
	font-weight: 700;
}

.pkfm-results__subtitle {
	margin: 20px 0 8px;
	padding: 0;
	border: 0;
	font-size: 1rem;
	font-weight: 700;
}

.pkfm-results__lead {
	margin: 0;
	font-size: 0.875rem;
}

.pkfm-results__privacy {
	margin: 14px 0 0;
	font-size: 0.75rem;
	color: var(--pkfm-text-muted);
}

.pkfm-callout {
	margin: 14px 0 0;
	padding: 12px 14px;
	background: var(--pkfm-accent-soft);
	border-radius: var(--pkfm-radius);
}

.pkfm-callout__title {
	margin: 0 0 2px;
	font-size: 0.8125rem;
	font-weight: 700;
	color: var(--pkfm-accent-strong);
}

.pkfm-callout__body {
	margin: 0;
	font-size: 0.9375rem;
}

.pkfm-answer-table {
	display: block;
	background: var(--pkfm-bg);
	border: 1px solid var(--pkfm-border);
	border-radius: var(--pkfm-radius);
	overflow: hidden;
}

.pkfm-answer-row {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2px;
	padding: 10px 12px;
	border-top: 1px solid var(--pkfm-border);
	font-size: 0.875rem;
}

.pkfm-answer-row:first-child {
	border-top: 0;
}

.pkfm-answer-row--skipped {
	color: var(--pkfm-text-muted);
}

.pkfm-answer-row__label {
	font-weight: 600;
}

@media screen and (min-width: 480px) {
	.pkfm-answer-row {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
		gap: 12px;
		align-items: baseline;
	}
}

/* ---------------------------------------------------------- 再診断 */
.pkfm-redo {
	margin: 18px 0 0;
	border: 1px solid var(--pkfm-border);
	border-radius: var(--pkfm-radius);
	background: var(--pkfm-bg);
}

.pkfm-redo__summary {
	padding: 14px 16px;
	font-size: 0.9375rem;
	font-weight: 700;
	cursor: pointer;
}

.pkfm-redo__body {
	padding: 0 14px 16px;
}

/* 印刷時は操作系を隠す */
@media print {
	.pkfm-app .pkfm-nav,
	.pkfm-app .pkfm-actions,
	.pkfm-app .pkfm-redo {
		display: none;
	}
}

/* ---------------------------------------------------------- 結果カード（暫定・Phase 4で拡張） */
.pkfm-cards {
	margin: 16px 0 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 12px;
}

.pkfm-card {
	margin: 0;
	padding: 14px;
	background: var(--pkfm-bg);
	border: 1px solid var(--pkfm-border);
	border-radius: var(--pkfm-radius);
}

.pkfm-card__head {
	display: flex;
	align-items: baseline;
	gap: 8px;
	margin: 0 0 8px;
}

.pkfm-card__rank {
	flex: 0 0 auto;
	padding: 2px 9px;
	border-radius: 999px;
	background: var(--pkfm-accent);
	color: #fff;
	font-size: 0.75rem;
	font-weight: 700;
}

.pkfm-card__title {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.5;
}

.pkfm-card__scores {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 12px;
	margin: 0 0 10px;
	font-size: 0.8125rem;
}

.pkfm-score strong {
	font-size: 1.125rem;
	color: var(--pkfm-accent-strong);
}

.pkfm-confidence {
	color: var(--pkfm-text-muted);
}

.pkfm-confidence--warning,
.pkfm-confidence--insufficient {
	color: var(--pkfm-danger);
}

.pkfm-card--reference {
	border-style: dashed;
}

.pkfm-card__rank--reference {
	background: var(--pkfm-bg-soft);
	color: var(--pkfm-text-muted);
	border: 1px solid var(--pkfm-border-strong);
}

.pkfm-list--verify {
	color: var(--pkfm-accent-strong);
	font-weight: 600;
}

.pkfm-card__label {
	margin: 10px 0 2px;
	font-size: 0.75rem;
	font-weight: 700;
	color: var(--pkfm-text-muted);
	letter-spacing: 0.02em;
}

.pkfm-list {
	margin: 0;
	padding-left: 1.2em;
	font-size: 0.875rem;
}

.pkfm-list--warn {
	color: var(--pkfm-danger);
}

.pkfm-list--info {
	color: var(--pkfm-text-muted);
}

.pkfm-card__notice {
	margin: 0 0 8px;
	padding: 8px 10px;
	border-radius: 6px;
	background: var(--pkfm-bg-soft);
	font-size: 0.75rem;
	color: var(--pkfm-text-muted);
}

.pkfm-card__cost {
	margin: 10px 0 0;
	font-size: 0.8125rem;
	color: var(--pkfm-text-muted);
}

.pkfm-results__note {
	margin: 12px 0 0;
	font-size: 0.75rem;
	color: var(--pkfm-text-muted);
}

/* ---------------------------------------------------------- 商品カード（Phase 4） */
.pkfm-card__titlelink {
	color: inherit;
	text-decoration: none;
}

.pkfm-card__titlelink:hover,
.pkfm-card__titlelink:focus {
	text-decoration: underline;
}

.pkfm-card__maker {
	margin: -4px 0 10px;
	font-size: 0.8125rem;
	color: var(--pkfm-text-muted);
}

.pkfm-card__body {
	display: grid;
	grid-template-columns: 1fr;
	gap: 12px;
	margin: 0 0 4px;
}

@media screen and (min-width: 520px) {
	.pkfm-card__body {
		grid-template-columns: 132px minmax(0, 1fr);
		align-items: start;
	}
}

.pkfm-card__body.pkfm-card__body--no-image {
	grid-template-columns: minmax(0, 1fr);
}

.pkfm-card__media {
	margin: 0;
	text-align: center;
}

.pkfm-card__img {
	width: 100%;
	max-width: 220px;
	height: auto;
	border-radius: var(--pkfm-radius);
	background: var(--pkfm-bg-soft);
}

.pkfm-card__main {
	min-width: 0;
}

.pkfm-card__headline {
	margin: 8px 0 10px;
	padding: 10px 12px;
	background: var(--pkfm-accent-soft);
	border-radius: var(--pkfm-radius);
	font-size: 0.875rem;
	line-height: 1.6;
}

.pkfm-spec {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 6px 10px;
	margin: 0 0 10px;
}

.pkfm-spec__row {
	min-width: 0;
}

.pkfm-spec__key {
	margin: 0;
	font-size: 0.6875rem;
	color: var(--pkfm-text-muted);
}

.pkfm-spec__val {
	margin: 0;
	font-size: 0.9375rem;
	font-weight: 700;
	line-height: 1.4;
}

.pkfm-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.pkfm-chip {
	padding: 2px 8px;
	border: 1px solid var(--pkfm-border-strong);
	border-radius: 999px;
	font-size: 0.6875rem;
	line-height: 1.7;
	color: var(--pkfm-text-muted);
}

.pkfm-card__actions {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 14px 0 0;
}

@media screen and (min-width: 520px) {
	.pkfm-card__actions {
		flex-direction: row;
		flex-wrap: wrap;
	}

	.pkfm-card__actions .pkfm-btn {
		flex: 1 1 180px;
	}
}

.pkfm-btn--sm {
	min-height: 46px;
	padding: 10px 14px;
	font-size: 0.9375rem;
}

.pkfm-btn--shop {
	background: var(--pkfm-bg);
	border-color: var(--pkfm-accent);
	color: var(--pkfm-accent-strong);
}

.pkfm-btn--shop:hover,
.pkfm-btn--shop:focus {
	background: var(--pkfm-accent-soft);
	color: var(--pkfm-accent-strong);
}

.pkfm-card__pr {
	margin: 8px 0 0;
	font-size: 0.6875rem;
	color: var(--pkfm-text-muted);
}

.pkfm-results__compare {
	margin: 16px 0 0;
}

/* ---------------------------------------------------------- 比較画面（Phase 5） */
.pkfm-cmp {
	--pkfm-cmp-sticky-top: 0px;
	/* 390px幅の端末で2商品ならスクロールなしに収まる幅にしている */
	--pkfm-cmp-rowhead-width: 100px;
	--pkfm-cmp-col-width: 126px;
}

.pkfm-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.pkfm-cmp__scroll {
	/*
	 * position: relative は、スクリーンリーダー用の絶対配置要素（.pkfm-sr）の
	 * 基準をこのスクロール領域にするため。これがないと、横に広い表の内部座標に
	 * 絶対配置されてページ全体が横スクロールしてしまう。
	 */
	position: relative;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	margin: 0 0 14px;
	border: 1px solid var(--pkfm-border);
	border-radius: var(--pkfm-radius);
	background: var(--pkfm-bg);
}

.pkfm-cmp__scroll:focus-visible {
	outline: 2px solid var(--pkfm-accent);
	outline-offset: 2px;
}

/* 商品ヘッダーカード */
.pkfm-cmp__scroll--cards {
	border: 0;
	background: transparent;
}

.pkfm-cmp__cards {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(160px, 1fr);
	gap: 10px;
	margin: 0;
	padding: 0 0 4px;
	list-style: none;
	min-width: min-content;
}

.pkfm-cmp__card {
	margin: 0;
	padding: 10px;
	border: 1px solid var(--pkfm-border);
	border-radius: var(--pkfm-radius);
	background: var(--pkfm-bg);
	min-width: 160px;
}

.pkfm-cmp__cardmedia {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 96px;
	margin: 0 0 8px;
	background: var(--pkfm-bg-soft);
	border-radius: 6px;
}

.pkfm-cmp__img {
	width: 100%;
	height: auto;
	border-radius: 6px;
}

.pkfm-cmp__noimg,
.pkfm-cmp__muted {
	font-size: 0.75rem;
	color: var(--pkfm-text-muted);
}

.pkfm-cmp__cardtitle {
	margin: 0 0 4px;
	font-size: 0.875rem;
	font-weight: 700;
	line-height: 1.45;
}

.pkfm-cmp__cardtitle a {
	color: inherit;
	text-decoration: none;
}

.pkfm-cmp__cardtitle a:hover,
.pkfm-cmp__cardtitle a:focus {
	text-decoration: underline;
}

.pkfm-cmp__cardmeta {
	margin: 0 0 4px;
	font-size: 0.75rem;
	color: var(--pkfm-text-muted);
}

.pkfm-cmp__cardprice {
	margin: 0 0 8px;
	font-size: 0.9375rem;
	font-weight: 700;
}

.pkfm-cmp__cardlinks {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.pkfm-btn--xs {
	min-height: 38px;
	padding: 8px 10px;
	font-size: 0.8125rem;
	flex: 1 1 auto;
}

.pkfm-cmp__cardremove {
	margin: 8px 0 0;
	font-size: 0.75rem;
}

.pkfm-cmp__removelink {
	color: var(--pkfm-danger);
}

.pkfm-cmp__pr {
	margin: 0 0 14px;
	font-size: 0.6875rem;
	color: var(--pkfm-text-muted);
}

/* 凡例と切り替え */
.pkfm-cmp__controls {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 0 0 10px;
}

.pkfm-cmp__legend {
	margin: 0;
	font-size: 0.75rem;
	color: var(--pkfm-text-muted);
}

.pkfm-cmp__toggle {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 10px;
	background: var(--pkfm-bg-soft);
	border: 1px solid var(--pkfm-border);
	border-radius: var(--pkfm-radius);
	font-size: 0.875rem;
	font-weight: 600;
	cursor: pointer;
}

.pkfm-cmp__toggle input {
	width: 20px;
	height: 20px;
	margin: 0;
	accent-color: var(--pkfm-accent);
}

.pkfm-cmp__togglestatus {
	font-weight: 400;
	font-size: 0.75rem;
	color: var(--pkfm-text-muted);
}

/* 比較表 */
.pkfm-cmp__table {
	width: auto;
	min-width: 100%;
	margin: 0;
	border-collapse: separate;
	border-spacing: 0;
	font-size: 0.8125rem;
	background: var(--pkfm-bg);
}

.pkfm-cmp__table th,
.pkfm-cmp__table td {
	padding: 8px 10px;
	border-bottom: 1px solid var(--pkfm-border);
	text-align: left;
	vertical-align: middle;
	line-height: 1.5;
}

.pkfm-cmp__rowhead {
	position: sticky;
	left: 0;
	z-index: 1;
	width: var(--pkfm-cmp-rowhead-width);
	min-width: var(--pkfm-cmp-rowhead-width);
	max-width: var(--pkfm-cmp-rowhead-width);
	background: var(--pkfm-bg-soft);
	border-right: 1px solid var(--pkfm-border);
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--pkfm-text);
}

.pkfm-cmp__colhead {
	position: sticky;
	top: var(--pkfm-cmp-sticky-top);
	z-index: 2;
	min-width: var(--pkfm-cmp-col-width);
	background: var(--pkfm-bg);
	border-bottom: 2px solid var(--pkfm-accent);
	font-size: 0.75rem;
	font-weight: 700;
}

.pkfm-cmp__rowhead--corner {
	top: var(--pkfm-cmp-sticky-top);
	z-index: 3;
	border-bottom: 2px solid var(--pkfm-accent);
}

.pkfm-cmp__cell {
	min-width: var(--pkfm-cmp-col-width);
}

.pkfm-cmp__cell--unknown {
	color: var(--pkfm-text-muted);
}

.pkfm-cmp__cell--best {
	background: var(--pkfm-accent-soft);
	font-weight: 700;
}

.pkfm-cmp__mark {
	display: inline-block;
	min-width: 1.4em;
	font-size: 1rem;
	font-weight: 700;
	text-align: center;
}

.pkfm-cmp__mark--yes {
	color: var(--pkfm-accent-strong);
}

.pkfm-cmp__mark--no {
	color: var(--pkfm-text-muted);
}

.pkfm-cmp__mark--unknown {
	color: var(--pkfm-danger);
	cursor: help;
}

.pkfm-cmp__badge {
	display: inline-block;
	margin-left: 4px;
	padding: 0 5px;
	border-radius: 3px;
	background: var(--pkfm-accent);
	color: #fff;
	font-size: 0.625rem;
	font-weight: 700;
	vertical-align: 1px;
}

/* 違いだけ表示 */
.pkfm-cmp--diffonly [data-pkfm-row][data-pkfm-diff="0"] {
	display: none;
}

/* 詳細スペック */
.pkfm-cmp__details {
	margin: 4px 0 14px;
	border: 1px solid var(--pkfm-border);
	border-radius: var(--pkfm-radius);
	background: var(--pkfm-bg);
}

.pkfm-cmp__summary {
	padding: 14px 16px;
	font-size: 0.9375rem;
	font-weight: 700;
	cursor: pointer;
}

.pkfm-cmp__detailbody {
	padding: 0 12px 12px;
}

.pkfm-cmp__sectiontitle {
	margin: 14px 0 6px;
	padding: 0;
	border: 0;
	font-size: 0.9375rem;
	font-weight: 700;
}

/* 商品の追加・選択 */
.pkfm-cmp__addform,
.pkfm-cmp__pickform {
	margin: 0 0 14px;
	padding: 12px 14px;
	background: var(--pkfm-bg-soft);
	border: 1px solid var(--pkfm-border);
	border-radius: var(--pkfm-radius);
}

.pkfm-cmp__addlabel {
	display: block;
	margin: 0 0 6px;
	font-size: 0.875rem;
	font-weight: 700;
}

.pkfm-cmp__addrow {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

@media screen and (min-width: 480px) {
	.pkfm-cmp__addrow {
		flex-direction: row;
		align-items: center;
	}

	.pkfm-cmp__addrow .pkfm-select {
		flex: 1 1 auto;
	}

	.pkfm-cmp__addrow .pkfm-btn {
		flex: 0 0 auto;
	}
}

.pkfm-cmp__picklist {
	display: grid;
	grid-template-columns: 1fr;
	gap: 8px;
	margin: 0 0 12px;
}

@media screen and (min-width: 480px) {
	.pkfm-cmp__picklist {
		grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	}
}

.pkfm-cmp__note {
	margin: 0 0 10px;
	font-size: 0.75rem;
	color: var(--pkfm-text-muted);
}

/* -------------------------------------------------------------------------
 * 診断データの利用表示とオプトアウト（v1.2.0）
 * ---------------------------------------------------------------------- */
.pkfm-app .pkfm-privacy {
	margin-top: 1rem;
	padding: 0.75rem 0.9rem;
	border: 1px solid var(--pkfm-border);
	border-radius: var(--pkfm-radius);
	background: var(--pkfm-bg-soft);
}

.pkfm-app .pkfm-privacy__text {
	margin: 0;
	font-size: 0.75rem;
	line-height: 1.7;
	color: var(--pkfm-text-muted);
}

.pkfm-app .pkfm-privacy__link {
	color: var(--pkfm-accent);
	text-decoration: underline;
}

.pkfm-app .pkfm-privacy__optout {
	display: flex;
	gap: 0.5rem;
	align-items: flex-start;
	margin-top: 0.6rem;
	font-size: 0.8125rem;
	line-height: 1.6;
	cursor: pointer;
}

.pkfm-app .pkfm-privacy__optout input {
	margin: 0.2rem 0 0;
	flex: 0 0 auto;
}

.pkfm-app .pkfm-privacy__note {
	margin: 0.35rem 0 0;
	font-size: 0.6875rem;
	color: var(--pkfm-text-muted);
}