/**
 * 補助金 申請文章フロー（[pnm_hojokin_app]）のスタイル。
 *
 * mitsukuru-design（.claude/skills/mitsukuru-design/SKILL.md）に準拠。
 * グリーン基調・白ベース・ピル型CTA・入力欄は角丸8px・余白は8pxグリッド・タップ44px以上。
 * 見た目の骨格は _reference/hojokin-app/form-v1.html を踏襲し、クラス名を .pnm-app__* へ移した。
 *
 * ★変数はテーマ（swell_child）と衝突しないよう .pnm-app にスコープする（:root には置かない）。
 *   変数名はデザイン正本と同じ --color-* を使う（既存フローの --pnm-* とは名前が違うが、
 *   スコープが分かれているため干渉しない）。
 * ★モバイルファースト。ブレークポイントは 768px（min-width で足す＝既存の
 *   max-width 指定の印刷崩れ問題を持ち込まない）。
 * ★ツールバー・フッターバーは position:sticky / fixed にしない。SWELL の固定ヘッダー・
 *   フッターと重なる恐れがあるため、素直に本文の流れに置く（参照HTMLからの意図的な差分）。
 *
 * @package PN_Mitsukuru
 */

.pnm-app {
	--color-primary: #7CB342;
	--color-primary-dark: #689A38;
	--color-primary-light: #EFF6E4;
	--color-text: #2B2B2B;
	--color-text-muted: #6B7280;
	--color-bg: #FFFFFF;
	--color-bg-subtle: #F7F8F5;
	--color-border: #E5E7EB;
	--color-alert: #C2410C;
	--color-alert-bg: #FFF7ED;
	--color-alert-border: #FED7AA;

	--font-base: 'Noto Sans JP', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	--radius-input: 8px;
	--radius-card: 16px;
	--tap: 44px;

	box-sizing: border-box;
	max-width: 940px;
	margin: 0 auto;
	padding: 24px 16px 48px;
	font-family: var(--font-base);
	font-size: 15px;
	line-height: 1.8;
	color: var(--color-text);
}

.pnm-app *,
.pnm-app *::before,
.pnm-app *::after {
	box-sizing: border-box;
}

.pnm-app__loading,
.pnm-app__error {
	margin: 0;
	padding: 24px 0;
	font-size: 14px;
	color: var(--color-text-muted);
	text-align: center;
}

.pnm-app__error {
	color: var(--color-alert);
}

/* -----------------------------------------------------------------------
 * ボタン
 * -------------------------------------------------------------------- */
.pnm-app__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: var(--font-base);
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	border: 1px solid transparent;
	border-radius: 9999px;
	/* ★8pxグリッド。高さは min-height: 44px が決めるので見た目は変わらない。 */
	padding: 8px 24px;
	min-height: var(--tap);
	cursor: pointer;
	transition: background .18s, color .18s, border-color .18s;
}

.pnm-app__btn:focus-visible {
	outline: 2px solid var(--color-primary);
	outline-offset: 2px;
}

.pnm-app__btn--primary {
	background: var(--color-primary);
	color: #FFFFFF;
}

.pnm-app__btn--primary:hover {
	background: var(--color-primary-dark);
	color: #FFFFFF;
}

.pnm-app__btn--primary:disabled {
	background: #C8CFC0;
	cursor: not-allowed;
}

.pnm-app__btn--big {
	font-size: 16px;
	padding: 16px 32px;
	min-height: 56px;
}

.pnm-app__btn--ghost {
	background: var(--color-bg);
	color: var(--color-primary-dark);
	border-color: var(--color-primary);
	font-weight: 500;
	font-size: 13.5px;
	/* ★padding は `.pnm-app__btn` の `8px 24px` をそのまま使う（同じ指定を2箇所に置かない）。 */
}

.pnm-app__btn--ghost:hover {
	background: var(--color-primary-light);
	color: var(--color-primary-dark);
}

.pnm-app__btn--ghost:disabled {
	color: #B6BCC4;
	border-color: var(--color-border);
	background: var(--color-bg);
	cursor: not-allowed;
}

/*
 * 「入力を保存」（0.7.204）。
 *
 * 🔴 **primary（緑の塗り）にしない。** このページで最も目立つべきは「文章をつくる」で、
 *    塗りを2つ並べると主導線が埋もれる。枠線（ghost）のまま**大きさと位置**で見つけやすくする。
 * ⚠️ 0.7.203 までは `--mini`（11.5px・高さ32px・グレー枠）でツールバーに置いていた。
 *    タップ領域が 32px しかなく**規約（44px 以上）を割っていた**ので、ここで 44px を確保する。
 * ★枠線は**両方の状態で 2px**（未保存のときだけ太くすると、状態が変わるたびに 1px ずれる）。
 * ★文字の太さも状態で変えない（太さが変わるとラベルの幅が変わってボタンが揺れる）。
 */
.pnm-app__btn--save {
	font-size: 14px;
	font-weight: 600;
	/* ★8px グリッド。高さは min-height: var(--tap) が決める。 */
	padding: 8px 32px;
	min-height: var(--tap);
	border-width: 2px;
}

/*
 * 未保存の変更があるときだけ目立たせる（JS が `data-dirty` を立てる）。
 * ★変えるのは**下地の色と枠線の濃さだけ**＝寸法は動かさない（レイアウトが揺れない）。
 * ⚠️ 文言は増やしていない。新しい文字列は `includes/class-pnm-hojokin-app-shortcode.php` の
 *    `i18n()` に足すことになり、`includes/` は本PRの停止条件のため。
 */
.pnm-app__btn--save[data-dirty] {
	background: var(--color-primary-light);
	border-color: var(--color-primary-dark);
}

.pnm-app__btn--save[data-dirty]:hover {
	background: var(--color-primary-light);
}

.pnm-app__btn--mini {
	background: transparent;
	border-color: var(--color-border);
	color: var(--color-text-muted);
	font-size: 11.5px;
	font-weight: 500;
	/* ⚠️ 8px グリッド。13px はデザイン規約のアンチパターン（#420 から残っていたのを是正）。 */
	padding: 4px 12px;
	min-height: 32px;
}

.pnm-app__btn--mini:hover {
	color: var(--color-primary-dark);
	border-color: var(--color-primary);
}

.pnm-app__btn--mini:disabled {
	color: #B6BCC4;
	cursor: not-allowed;
}

/* -----------------------------------------------------------------------
 * 未ログイン（ロック）時
 *
 * ★「壊れている」ではなく「まだ触れない」に見せる。設問文・ヒント・プレースホルダーは
 *   通常どおり読める状態を保ち、彩度と操作だけを落とす。
 * -------------------------------------------------------------------- */
.pnm-app select:disabled,
.pnm-app input[type="text"]:disabled,
.pnm-app textarea:disabled {
	background: var(--color-bg-subtle);
	color: var(--color-text);
	/* ⚠️ iOS Safari は disabled 入力の文字を独自に薄くする。opacity と二重にかかって
	   読めなくなるため、文字色は明示的に固定する。 */
	-webkit-text-fill-color: var(--color-text);
	opacity: .85;
	cursor: pointer;
}

/*
 * ロック時の選択肢。⚠️ input[type=radio] / [type=checkbox] は上のセレクタに含まれない
 * （あちらは text / textarea / select のみ）。選択肢だけ普通の見た目のまま残ると
 * 「押せそうなのに反応しない」ので、同じトーンまで落とす。
 */
.pnm-app__opt-input:disabled,
.pnm-app__na-input:disabled {
	opacity: .6;
	cursor: pointer;
}

.pnm-app__opt-input:disabled ~ .pnm-app__opt-text,
.pnm-app__na-input:disabled ~ .pnm-app__opt-text {
	opacity: .85;
}

/* 会員登録・ログインの案内カード（ロック中の操作で出す／JS 無効時のフォールバック）。 */
.pnm-app__gatecard {
	background: var(--color-primary-light);
	border: 1px solid var(--color-primary);
	border-radius: var(--radius-card);
	padding: 24px 18px;
	margin-top: 16px;
	text-align: center;
}

.pnm-app__gatecard-title {
	margin: 0 0 8px;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.5;
	color: var(--color-text);
}

.pnm-app__gatecard-body {
	margin: 0 0 20px;
	font-size: 13px;
	line-height: 1.9;
	color: var(--color-text-muted);
}

/* 「確認メールのリンクを開いてからログイン」の注記。本文より一段弱く、でも読み飛ばさせない。 */
.pnm-app__gatecard-note {
	margin: 0 0 16px;
	padding: 8px 16px;
	font-size: 13px;
	line-height: 1.8;
	color: var(--color-alert);
	background: var(--color-alert-bg);
	border: 1px solid var(--color-alert-border);
	border-radius: var(--radius-input);
	text-align: left;
}

/* -----------------------------------------------------------------------
 * 下書きの帯（非ログイン中の入力を localStorage に持っているあいだ出す）
 *
 * 🔴 **共有PC対策として「入っていること」を明示し、自分で消せるボタンを必ず置く。**
 *    CLAUDE.md に書いた「このフロー限定の localStorage 例外」の条件のひとつ。
 * ⚠️ 画面のいちばん上に出す（`render()` が root の先頭へ差し込む）。
 * -------------------------------------------------------------------- */
.pnm-app__draftbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 16px;
	margin: 0 0 16px;
	padding: 16px;
	background: var(--color-primary-light);
	border: 1px solid var(--color-primary);
	border-radius: var(--radius-input);
}

.pnm-app__draftbar-text {
	margin: 0;
	flex: 1 1 240px;
	font-size: 13px;
	line-height: 1.8;
	color: var(--color-text);
}

.pnm-app__draftbar-ctas {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.pnm-app__gatecard-ctas {
	display: flex;
	gap: 12px;
	justify-content: center;
	flex-wrap: wrap;
}

/* -----------------------------------------------------------------------
 * ツールバー（文体・文章量・保存・進捗）
 * -------------------------------------------------------------------- */
.pnm-app__toolbar {
	background: var(--color-bg-subtle);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-input);
	margin-bottom: 16px;
}

.pnm-app__toolbar-inner {
	display: flex;
	gap: 12px;
	align-items: flex-end;
	flex-wrap: wrap;
	padding: 12px 16px;
}

.pnm-app__field-inline {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 130px;
}

.pnm-app__field-inline label {
	font-size: 10.5px;
	letter-spacing: .06em;
	color: var(--color-text-muted);
	font-weight: 500;
}

.pnm-app__spacer {
	flex: 1 1 auto;
}

.pnm-app__progress {
	font-size: 12.5px;
	color: var(--color-text-muted);
	white-space: nowrap;
}

.pnm-app__progress b {
	color: var(--color-primary-dark);
	font-size: 16px;
	font-weight: 700;
}

/* -----------------------------------------------------------------------
 * 入力欄
 * -------------------------------------------------------------------- */
.pnm-app select,
.pnm-app input[type="text"],
.pnm-app textarea {
	font-family: var(--font-base);
	/* ⚠️ 16px 未満にしない。iOS Safari は 16px 未満の input / textarea / select に
	   フォーカスすると自動でズームする（docs/handoff.md『既知の地雷：フォームと iOS』）。
	   参照HTML（_reference/hojokin-app/form-v1.html）は 14px だが、ここは既存フォーム
	   （wizard.css / pnm-joseikin.css / pnm-hojokin-shindan.css）に揃えて 16px を維持する。 */
	font-size: 16px;
	color: var(--color-text);
	background: var(--color-bg);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-input);
	/*
	 * ★可読性（2026-08-26）：rows は変えず padding で高さを稼ぐ（8px 11px → 12px）。
	 * ⚠️ 8px グリッドから外れる値（13px / 11px など）にしないこと。
	 *    `.claude/skills/mitsukuru-design/SKILL.md` がアンチパターンとして 13px を名指ししている。
	 */
	padding: 12px;
	width: 100%;
	line-height: 1.7;
}

.pnm-app select {
	cursor: pointer;
	min-height: var(--tap);
}

.pnm-app textarea {
	resize: vertical;
}

.pnm-app select:focus,
.pnm-app input:focus,
.pnm-app textarea:focus {
	outline: 2px solid var(--color-primary);
	outline-offset: 1px;
	border-color: transparent;
}

.pnm-app ::placeholder {
	color: #B6BCC4;
}

/* -----------------------------------------------------------------------
 * 注意ブロック
 * -------------------------------------------------------------------- */
.pnm-app__notice {
	background: var(--color-alert-bg);
	border: 1px solid var(--color-alert-border);
	border-radius: 12px;
	padding: 14px 18px;
	margin-bottom: 16px;
}

.pnm-app__notice h4 {
	margin: 0 0 4px;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--color-alert);
}

.pnm-app__notice p {
	margin: 0;
	font-size: 13px;
	line-height: 1.8;
}

/*
 * 設問の直下に出す注意喚起（config の warnings）。見た目は .pnm-app__notice を流用する。
 * 🔴 生成はブロックしない。選択が条件を外れたら即座に消える。
 * ⚠️ `[hidden]` を効かせるための打ち消し。.pnm-app__notice は display を持たないので
 *    本来は不要だが、将来 display を足したときに黙って壊れないよう明示しておく。
 */
.pnm-app__warning {
	margin: 8px 0 0;
}

.pnm-app__warning[hidden] {
	display: none;
}

/* -----------------------------------------------------------------------
 * パネル
 * -------------------------------------------------------------------- */
.pnm-app__panel {
	background: var(--color-bg);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-card);
	margin-top: 20px;
}

.pnm-app__panel-head {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 16px 18px;
	border-bottom: 1px solid var(--color-border);
	flex-wrap: wrap;
}

.pnm-app__bar {
	width: 4px;
	align-self: stretch;
	min-height: 32px;
	background: var(--color-primary);
	border-radius: 9999px;
	flex: none;
}

.pnm-app__panel-head h2 {
	/* ★可読性（2026-08-26）：16px → 18px。 */
	font-size: 18px;
	font-weight: 700;
	margin: 0;
	line-height: 1.5;
}

.pnm-app__kicker {
	display: block;
	font-size: 10.5px;
	letter-spacing: .08em;
	color: var(--color-text-muted);
	font-weight: 500;
}

.pnm-app__side {
	font-size: 12px;
	color: var(--color-text-muted);
	width: 100%;
}

.pnm-app__panel-body {
	/* ★可読性（2026-08-26）：縦 20px → 28px、モバイルの横 18px → 20px。 */
	padding: 28px 20px 28px;
}

.pnm-app__panel-lead {
	font-size: 12.5px;
	color: var(--color-text-muted);
	margin: 0 0 16px;
	line-height: 1.8;
}

/* -----------------------------------------------------------------------
 * 設問グリッド
 * -------------------------------------------------------------------- */
.pnm-app__grid {
	display: grid;
	grid-template-columns: 1fr;
	/* ★可読性（2026-08-26）：設問どうしが詰まって見えるので 16px → 24px。 */
	gap: 24px;
}

/*
 * 設問タイトルの label。
 *
 * 🔴 **必ず「直接の子」セレクタ（`>`）で書くこと。**
 *    `fieldShell()`（`assets/js/pnm-hojokin-app.js`）は設問を `.pnm-app__f` で包み、その
 *    **直接の子**としてタイトルの label を置く。一方、選択肢（`label.pnm-app__opt`）・
 *    「答えたくない」（`label.pnm-app__na`）・「その他」（`label.pnm-app__other-label`）は
 *    **同じ `.pnm-app__f` の中の、もっと奥**にある。
 *    ⚠️ 子孫セレクタ（`.pnm-app__f label`）で書くと、それら全部に当たる。
 *    しかも詳細度が **(0,1,1)** で、`.pnm-app__opt`（**(0,1,0)**）に**勝ってしまう**。
 * 🔴 **0.7.194 まで実際に事故っていた**：選択肢が `display: flex` を奪われて `block` になり、
 *    `gap: 8px` が効かず**チェックボックスと文字が 0px でくっついていた**。
 *    巻き添えは他にも3つ（選択肢の文字が font-weight 600・選択肢ごとに margin-bottom 6px＝
 *    縦の間隔が 8px ではなく 14px・`.pnm-app__other-label` の 13px/400/8px が 15px/600/6px に化ける）。
 *    ⚠️ **「後から打ち消す」形（`.pnm-app__f label.pnm-app__opt { display:flex }` を足す）では直さない。**
 *    新しい部品を `.pnm-app__f` の中へ足すたびに同じ事故が起きるため（崇さん・2026-08-28）。
 *
 * 🔴 **`>` だけでは足りない。`[for]` まで要る。**
 *    「答えたくない／わからない」（`label.pnm-app__na`）は `renderNumberField()` が
 *    **`.pnm-app__f` の直接の子**として置く（`wrap.appendChild( naLabel )`）ので、
 *    `.pnm-app__f > label` では**まだ当たってしまう**（実測で間隔 0px のままだった）。
 *    ⇒ **`for` 属性の有無で構造的に切り分ける。** `fieldShell()` が作るタイトルの label だけが
 *    `for` を持ち、`.pnm-app__opt` / `.pnm-app__na` / `.pnm-app__confirm` は持たない。
 *    ⚠️ 除外リスト（`:not(.pnm-app__na)`）にしないのは、**部品を足すたびに書き足す形**になるから。
 *    `[for]` なら「入力欄に紐づくタイトル」という**性質**で選べる。
 *    ⚠️ この指定が前提にしている不変条件：**`fieldShell()` はタイトル label に必ず `for` を付ける**／
 *    **選択肢・答えたくない・確認チェックの label には `for` を付けない**。
 *    🔴 どちらかを崩すなら、このセレクタも一緒に直すこと。
 *    ⚠️ `.pnm-app__other-label` は `for` を持つが `.pnm-app__other` の中＝**直接の子ではない**ので当たらない
 *    （自前の 13px / 400 / margin-bottom 8px が効く）。
 */
.pnm-app__f > label[for] {
	display: block;
	/* ★可読性（2026-08-26）：13px は実機で「字が小さい」と評価された。 */
	font-size: 15px;
	font-weight: 600;
	margin-bottom: 6px;
}

.pnm-app__req {
	color: var(--color-primary-dark);
	font-size: 10.5px;
	font-weight: 600;
	margin-left: 6px;
	background: var(--color-primary-light);
	border-radius: 9999px;
	padding: 1px 8px;
}

.pnm-app__hint {
	display: block;
	/* ★可読性（2026-08-26）：11.5px → 13px。 */
	font-size: 13px;
	color: var(--color-text-muted);
	font-weight: 400;
	line-height: 1.6;
	margin-top: 2px;
}

/* -----------------------------------------------------------------------
 * 選択肢（single / multi）と数値欄（number）
 *
 * ★見た目は補助金診断（assets/css/pnm-hojokin-shindan.css の .pnm-opt）を参考にしつつ、
 *   クラス名は .pnm-app__ 系に揃えている。🔴 共通化はしない（複製方針）。
 * 🔴 余白は8pxグリッド。診断側の値をそのまま持ち込まないこと。
 * 🔴 タップ領域は 44px（--tap）以上。
 * -------------------------------------------------------------------- */
.pnm-app__optgrid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 8px;
}

.pnm-app__opt {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	min-height: var(--tap);
	/* ★左右とも 16px（8pxグリッド）。0.7.192 まで左だけ 12px だった。 */
	padding: 8px 16px;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-input);
	background: var(--color-bg);
	cursor: pointer;
	line-height: 1.6;
	transition: border-color .15s, background .15s;
}

.pnm-app__opt:hover {
	border-color: var(--color-primary);
	background: var(--color-primary-light);
}

/* 選択中。⚠️ :has() が無い環境では枠線が付かないだけで、機能は落ちない。 */
.pnm-app__opt:has( .pnm-app__opt-input:checked ) {
	border-color: var(--color-primary);
	background: var(--color-primary-light);
}

.pnm-app__opt-input {
	/* ⚠️ ネイティブのラジオ／チェックボックスをそのまま使う（自前描画にしない）。
	   スクリーンリーダーとキーボード操作を壊さないため。 */
	flex: none;
	width: 20px;
	height: 20px;
	margin: 2px 0 0;
	accent-color: var(--color-primary);
	cursor: pointer;
}

.pnm-app__opt-text {
	/* ⚠️ 入力欄ではないので 16px 縛りの対象外。設問ラベル（15px）に合わせる。 */
	font-size: 15px;
	color: var(--color-text);
}

/* -----------------------------------------------------------------------
 * チェックボックス／ラジオと、その右のラベル文字の間隔（0.7.192／0.7.195 で書き直し）
 *
 * ★間隔そのものは**親の flex の `gap: 8px`** が作る（`.pnm-app__opt` / `.pnm-app__na` /
 *   `.pnm-app__confirm` の3つとも `display:flex; gap:8px`）。ここの役目は1つだけ。
 *
 * 🔴 **ブラウザ既定の margin を打ち消す。** `input[type=checkbox|radio]` には UA スタイルの
 *    `margin: 3px 3px 3px 4px` が付く。これを残すと**間隔が 8+3=11px・枠内の左が +4px** になり、
 *    どちらも 8px グリッドから外れる。⚠️ `.pnm-app__opt-input` は元から `margin: 2px 0 0` で
 *    打ち消していたが、`.pnm-app__na-input` と `.pnm-app__confirm input` は**打ち消していなかった**。
 *    🔴 **チェックボックス／ラジオを新しく足すときは、必ず margin を明示して UA 既定を打ち消すこと。**
 *
 * ⚠️ **【0.7.195 で撤回】0.7.192〜0.7.194 はここに `!important` を付けていた。外した。**
 *    当時は「実機でくっついて見えるのは、テーマが `input[type=checkbox]` で margin を上書きして
 *    いるからではないか」と考えて先回りで固めたが、**真犯人は margin ではなく `display` だった**
 *    （`.pnm-app__f label` が `.pnm-app__opt` の `display: flex` を奪って `block` にし、
 *    `gap` を無効化していた＝上の `.pnm-app__f > label` のコメント）。
 *    ⇒ handoff に書いた撤回条件「原因が margin ではなかったと分かったら外す」に該当したので外した。
 *    🔴 **テーマは1つも関係していなかった。** 再現できない症状に対して先回りで `!important` を
 *    足すより、**まず出荷 JS が実際に描く DOM で測る**ほうが速い（0.7.195 でそうして特定した）。
 * -------------------------------------------------------------------- */

/* 選択肢。親が align-items:flex-start なので、1行目の文字と光学的に揃える 2px だけ残す。 */
.pnm-app .pnm-app__opt > .pnm-app__opt-input {
	margin: 2px 0 0;
}

/* 「答えたくない／わからない」と「内容を確認しました」。親が align-items:center なので上下も 0。 */
.pnm-app .pnm-app__na > .pnm-app__na-input,
.pnm-app .pnm-app__confirm > input[type="checkbox"] {
	margin: 0;
}

.pnm-app__opt-input:focus-visible {
	outline: 2px solid var(--color-primary);
	outline-offset: 2px;
}

/* 「その他」を選んだときだけ出す短文欄。 */
.pnm-app__other {
	margin-top: 8px;
}

.pnm-app__other[hidden] {
	display: none;
}

.pnm-app__other-label {
	display: block;
	font-size: 13px;
	font-weight: 400;
	color: var(--color-text-muted);
	margin-bottom: 8px;
}

/* 数値欄。入力欄と単位を横に並べる。 */
.pnm-app__numrow {
	display: flex;
	align-items: center;
	gap: 8px;
}

/* ⚠️ font-size は上の共通ルール（16px）が効く。ここで下げないこと。 */
.pnm-app__num {
	max-width: 200px;
}

.pnm-app__unit {
	font-size: 15px;
	color: var(--color-text-muted);
	white-space: nowrap;
}

.pnm-app__unit:empty {
	display: none;
}

/* 「答えたくない／わからない」。 */
.pnm-app__na {
	display: flex;
	align-items: center;
	gap: 8px;
	min-height: var(--tap);
	margin-top: 8px;
	cursor: pointer;
}

.pnm-app__na-input {
	flex: none;
	width: 20px;
	height: 20px;
	accent-color: var(--color-primary);
	cursor: pointer;
}

.pnm-app__na-input:focus-visible {
	outline: 2px solid var(--color-primary);
	outline-offset: 2px;
}

/* -----------------------------------------------------------------------
 * 実行ブロック
 * -------------------------------------------------------------------- */
.pnm-app__run {
	background: var(--color-bg);
	border: 1px solid var(--color-primary);
	border-radius: var(--radius-card);
	margin-top: 24px;
	padding: 32px 18px;
	text-align: center;
}

.pnm-app__run h2 {
	font-size: 19px;
	font-weight: 700;
	margin: 0 0 8px;
	line-height: 1.5;
}

.pnm-app__run p {
	font-size: 13px;
	color: var(--color-text-muted);
	margin: 0 0 20px;
	line-height: 1.8;
}

.pnm-app__row {
	display: flex;
	gap: 12px;
	justify-content: center;
	flex-wrap: wrap;
}

.pnm-app__row--sub {
	margin-top: 12px;
}

/*
 * 「入力を保存」の行。主CTA（.pnm-app__row）の下・メッセージ（.pnm-app__msg）の上。
 *
 * ★実行ブロックの中に置くのが肝＝押した結果の「保存しました。」（.pnm-app__msg）が
 *   同じかたまりの中に出るので、押した直後に結果が目に入る。
 * ⚠️ `position: fixed` / `sticky` にしないこと（このフローの決定＝このファイル冒頭のコメント）。
 */
.pnm-app__saverow {
	display: flex;
	justify-content: center;
	/*
	 * ★区切り線で「文章をつくる」のかたまりと分ける。
	 * 🔴 第1画面では開始ボタンが枠線ピルで2〜3個並ぶため、区切りが無いと
	 *    「入力を保存」が**4つ目の開始ボタンに見える**（実測のスクリーンショットで確認）。
	 *    生成の選択肢と、自分の入力を保存する操作は別のことなので、線で分ける。
	 */
	margin-top: 24px;
	padding-top: 24px;
	border-top: 1px solid var(--color-border);
}

.pnm-app__sub {
	margin: 16px 0 0;
	font-size: 12.5px;
	color: var(--color-text-muted);
}

.pnm-app__msg {
	margin: 16px 0 0;
	min-height: 20px;
	font-size: 13px;
	color: var(--color-primary-dark);
}

.pnm-app__msg--error {
	color: var(--color-alert);
}

/* -----------------------------------------------------------------------
 * 生成前の必須チェック
 *
 * 🔴 「文章をつくる」を押した瞬間だけ出る。入力中には出さない。
 * ⚠️ 数値欄の入力制限とは別物＝あちらはエラーを出さず入力の時点で弾く。
 * -------------------------------------------------------------------- */
.pnm-app__reqnotice {
	background: var(--color-alert-bg);
	border: 1px solid var(--color-alert-border);
	border-radius: 12px;
	padding: 16px;
	margin: 16px 0 0;
}

/*
 * 🔴 `.pnm-app` を1つ足して (0,2,0) にしてある。
 *    ⚠️ 一覧は `.pnm-app__run` の中に置くので、素の `.pnm-app__reqnotice-head`（0,1,0）は
 *    `.pnm-app__run p`（0,1,1）に負ける＝色も字送りも余白も奪われる（実測で確認した）。
 *    #455 と同じ形の事故なので、`!important` ではなく詳細度で解く。
 */
.pnm-app .pnm-app__reqnotice-head {
	margin: 0 0 8px;
	font-size: 13.5px;
	font-weight: 600;
	line-height: 1.8;
	color: var(--color-alert);
}

.pnm-app__reqnotice-list {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	justify-content: center; /* ⚠️ 親（.pnm-app__run）が text-align:center なので揃える。 */
	gap: 8px;
}

/* 押すとその設問まで寄る。⚠️ タップ44px を確保する（8pxグリッド：8+8+28=44）。 */
.pnm-app__reqlink {
	appearance: none;
	background: var(--color-bg);
	border: 1px solid var(--color-alert-border);
	border-radius: 999px;
	padding: 8px 16px;
	min-height: var(--tap);
	font-family: inherit;
	font-size: 13px;
	line-height: 1.8;
	color: var(--color-alert);
	cursor: pointer;
	text-align: left;
}

.pnm-app__reqlink:hover,
.pnm-app__reqlink:focus-visible {
	background: var(--color-alert-bg);
}

/* 一覧から飛んだ先が分かるように、未入力の設問だけ左に印を出す。 */
.pnm-app__f--missing {
	border-left: 3px solid var(--color-alert);
	padding-left: 8px;
}

/* -----------------------------------------------------------------------
 * 戻る導線
 * -------------------------------------------------------------------- */
.pnm-app__backbar {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
	margin-top: 24px;
}

.pnm-app__stepname {
	font-size: 13px;
	color: var(--color-text-muted);
}

.pnm-app__stepname b {
	color: var(--color-text);
	font-weight: 600;
}

/* -----------------------------------------------------------------------
 * 生成中の待機演出（0.7.199）：進捗サークル＋踊るロボット
 *
 * 🔴 **モーダルにしない＝本文の流れに置く。** このファイル冒頭の
 *    「★ツールバー・フッターバーは position:sticky / fixed にしない」に従う。
 *    ⚠️ 提案書側（`assets/css/wizard.css` の `.pnm-hearing--wait-modal`）は `position: fixed` で、
 *    SWELL の固定ヘッダーとの重なりを 0.7.189 / 0.7.190 / 0.7.194 と**3回外している**。
 *    ここでは固定しないので、その地雷を最初から踏まない。
 * ⚠️ 既存の進捗バー（`.pnm-app__progressbar`）・文言（`.pnm-app__genprogress`）・
 *    中止ボタンは**別要素として残っている**。この演出はその上に足すだけ。
 * -------------------------------------------------------------------- */
.pnm-app__wait {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 24px;
	margin: 16px 0 0;
	padding: 24px 16px;
	background: var(--color-primary-light);
	border-radius: var(--radius-card);
}

/* ⚠️ `display: flex` は UA の `[hidden]` に勝つので、明示的に打ち消す。 */
.pnm-app__wait[hidden] {
	display: none;
}

/*
 * 進捗サークル。conic-gradient を CSS 変数 `--pnm-app-pct`（0〜100 の数）で回す。
 * ⚠️ 値を書くのは JS（`setProgressBar()`）。**この変数以外は書き換えない。**
 */
.pnm-app__wait-ring {
	--pnm-app-pct: 0;
	position: relative;
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 96px;
	height: 96px;
	border-radius: 50%;
	background: conic-gradient(
		var(--color-primary) calc( var(--pnm-app-pct) * 1% ),
		var(--color-border) 0
	);
	transition: background .6s ease;
}

/* 中央を白く抜いてリングにする。 */
.pnm-app__wait-ring::before {
	content: "";
	position: absolute;
	top: 8px;
	right: 8px;
	bottom: 8px;
	left: 8px;
	background: var(--color-bg);
	border-radius: 50%;
}

.pnm-app__wait-pct {
	position: relative; /* ::before より前に出す。 */
	font-size: 16px;
	font-weight: 700;
	color: var(--color-primary-dark);
	font-variant-numeric: tabular-nums;
}

.pnm-app__wait-bot {
	flex: none;
	width: 88px;
	height: 80px;
}

.pnm-app__bot-svg {
	display: block;
	width: 100%;
	height: 100%;
	overflow: visible;
}

.pnm-app__bot-torso,
.pnm-app__bot-arm rect,
.pnm-app__bot-leg rect,
.pnm-app__bot-antenna {
	fill: var(--color-primary);
}

.pnm-app__bot-eye {
	fill: var(--color-bg);
}

.pnm-app__bot-mouth {
	stroke: var(--color-bg);
}

/* アンテナの先端だけ差し色。 */
.pnm-app__bot-tip {
	fill: #F2B705;
}

.pnm-app__bot-shadow {
	fill: rgba(43, 43, 43, .14);
}

/* 目のまばたきは動きの種類に関係なく常時。 */
.pnm-app__bot-eye {
	animation: pnm-app-bot-blink 4s infinite;
	transform-origin: center;
}

@keyframes pnm-app-bot-blink {
	0%, 92%, 100% { transform: scaleY(1); }
	95% { transform: scaleY(.1); }
}

/* --- 動き①：跳ねる。🔴 影は本体と一緒に動かさず、横に縮めるだけ。 --- */
.pnm-app__wait-bot[data-move="1"] .pnm-app__bot-all {
	animation: pnm-app-bot-hop 1.1s ease-in-out infinite;
	transform-origin: 60px 100px;
}

.pnm-app__wait-bot[data-move="1"] .pnm-app__bot-shadow {
	animation: pnm-app-bot-shadow-hop 1.1s ease-in-out infinite;
	transform-origin: 60px 100px;
}

@keyframes pnm-app-bot-hop {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-10px); }
}

@keyframes pnm-app-bot-shadow-hop {
	0%, 100% { transform: scaleX(1); opacity: 1; }
	50% { transform: scaleX(.72); opacity: .6; }
}

/* --- 動き②：体を左右に振る（腕は逆位相）。 --- */
.pnm-app__wait-bot[data-move="2"] .pnm-app__bot-body {
	animation: pnm-app-bot-sway 1.6s ease-in-out infinite;
	transform-origin: 60px 82px;
}

.pnm-app__wait-bot[data-move="2"] .pnm-app__bot-arm--l {
	animation: pnm-app-bot-arm-l 1.6s ease-in-out infinite;
	transform-origin: 38px 55px;
}

.pnm-app__wait-bot[data-move="2"] .pnm-app__bot-arm--r {
	animation: pnm-app-bot-arm-r 1.6s ease-in-out infinite;
	transform-origin: 82px 55px;
}

@keyframes pnm-app-bot-sway {
	0%, 100% { transform: rotate(-5deg); }
	50% { transform: rotate(5deg); }
}

@keyframes pnm-app-bot-arm-l {
	0%, 100% { transform: rotate(16deg); }
	50% { transform: rotate(-16deg); }
}

@keyframes pnm-app-bot-arm-r {
	0%, 100% { transform: rotate(-16deg); }
	50% { transform: rotate(16deg); }
}

/* --- 動き③：足踏み（脚を交互に上げる）。 --- */
.pnm-app__wait-bot[data-move="3"] .pnm-app__bot-leg--l {
	animation: pnm-app-bot-step 0.9s ease-in-out infinite;
	transform-origin: 50px 80px;
}

.pnm-app__wait-bot[data-move="3"] .pnm-app__bot-leg--r {
	animation: pnm-app-bot-step 0.9s ease-in-out infinite;
	animation-delay: .45s;
	transform-origin: 70px 80px;
}

@keyframes pnm-app-bot-step {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-6px); }
}

/* --- 動き④：アンテナを揺らしながら小さく頷く。 --- */
.pnm-app__wait-bot[data-move="4"] .pnm-app__bot-body {
	animation: pnm-app-bot-nod 1.4s ease-in-out infinite;
	transform-origin: 60px 82px;
}

.pnm-app__wait-bot[data-move="4"] .pnm-app__bot-antenna,
.pnm-app__wait-bot[data-move="4"] .pnm-app__bot-tip {
	animation: pnm-app-bot-antenna 1.4s ease-in-out infinite;
	transform-origin: 60px 30px;
}

@keyframes pnm-app-bot-nod {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(3px); }
}

@keyframes pnm-app-bot-antenna {
	0%, 100% { transform: rotate(-10deg); }
	50% { transform: rotate(10deg); }
}

/* -----------------------------------------------------------------------
 * 結果欄の枠
 * -------------------------------------------------------------------- */
/*
 * 1本ぶんの結果。★可読性（2026-08-26）：**区切り線をやめて余白だけで区切る**。
 * ⚠️ 罫線を戻さないこと（13本ぶん並ぶと線だらけになり、どこを読めばよいか分からなくなる）。
 */
.pnm-app__res {
	margin-top: 40px;
}

.pnm-app__res:first-child {
	margin-top: 0;
}

.pnm-app__res-head {
	display: flex;
	align-items: baseline;
	gap: 10px;
	flex-wrap: wrap;
	margin-bottom: 6px;
}

.pnm-app__res-ref {
	font-size: 11px;
	color: var(--color-text-muted);
}

.pnm-app__res-head h3 {
	margin: 0;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.5;
}

.pnm-app__strict {
	font-size: 11px;
	font-weight: 600;
	color: #FFFFFF;
	background: var(--color-alert);
	border-radius: 9999px;
	/* ★8pxグリッド（0.7.194 まで 1px 11px）。 */
	padding: 0 8px;
}

/*
 * 審査で見られる点。★可読性（2026-08-26）：**初期状態は閉じる**。
 * 文章そのものが主役なので、常時表示だと本文が埋もれる。
 * ⚠️ 閉じているあいだは枠線だけ（背景を敷かない）。開いたときだけ背景を出す。
 */
.pnm-app__criteria {
	border: 1px solid var(--color-border);
	border-radius: 10px;
	margin: 0 0 16px;
	font-size: 13px;
	line-height: 1.8;
	color: var(--color-text-muted);
}

.pnm-app__criteria[open] {
	background: var(--color-bg-subtle);
	border-color: transparent;
}

.pnm-app__criteria > summary {
	cursor: pointer;
	list-style: none;
	padding: 10px 14px;
	font-size: 13px;
	font-weight: 600;
	color: var(--color-primary-dark);
}

/* Safari は summary のマーカーを ::-webkit-details-marker で出す。 */
.pnm-app__criteria > summary::-webkit-details-marker {
	display: none;
}

.pnm-app__criteria > summary:focus-visible {
	outline: 2px solid var(--color-primary);
	outline-offset: 1px;
}

.pnm-app__criteria-body {
	padding: 0 14px 12px;
}

.pnm-app__waiting {
	font-size: 12.5px;
	color: var(--color-text-muted);
	background: var(--color-bg-subtle);
	border-radius: 10px;
	padding: 14px 16px;
}

/* 1本だけ作り直すボタンは見出しの右端へ。 */
.pnm-app__res-tools {
	margin-left: auto;
	display: flex;
	gap: 6px;
}

/* できあがった本文（編集可能）。⚠️ font-size は 16px を維持する（iOS の自動ズーム対策）。 */
.pnm-app__out {
	min-height: 170px;
	background: var(--color-bg-subtle);
	/* ★可読性（2026-08-26）：ここは読ませる本文なので行間を広げる。16px は上の共通指定のまま。 */
	font-size: 16px;
	line-height: 1.9;
}

/* 文字数メーター。 */
.pnm-app__meter {
	height: 3px;
	border-radius: 9999px;
	background: var(--color-border);
	margin-top: 8px;
	overflow: hidden;
}

.pnm-app__meter i {
	display: block;
	height: 100%;
	width: 0;
	background: var(--color-primary);
	border-radius: 9999px;
	transition: width .3s;
}

.pnm-app__meter--over i {
	background: var(--color-alert);
}

.pnm-app__count {
	display: block;
	margin-top: 5px;
	font-size: 11.5px;
	color: var(--color-text-muted);
}

.pnm-app__count--over {
	color: var(--color-alert);
	font-weight: 600;
}

/* 生成の進捗バー。終わった本数 ÷ 全本数。生成前と完了後は hidden で消す。 */
.pnm-app__progressbar {
	height: 6px;
	border-radius: 9999px;
	background: var(--color-border);
	margin: 20px auto 0;
	max-width: 420px;
	overflow: hidden;
}

.pnm-app__progressbar[hidden] {
	display: none;
}

/*
 * ⚠️ ボタンに hidden 属性を付けても、この下の .pnm-app__btn の display: inline-flex が
 *    ブラウザ既定の [hidden] { display: none } に勝ってしまい**消えない**。
 *    中止ボタンは hidden で出し入れするので、明示的に打ち消す。
 */
.pnm-app__btn[hidden] {
	display: none;
}

.pnm-app__progressbar i {
	display: block;
	height: 100%;
	width: 0;
	background: var(--color-primary);
	border-radius: 9999px;
	transition: width .3s;
}

/* 生成の進捗（作成しています　1 / 13　残りおよそ3分　／ 事業計画（255文字））。 */
.pnm-app__genprogress {
	margin: 12px 0 0;
	min-height: 20px;
	font-size: 13px;
	color: var(--color-primary-dark);
}

/* いま作成中の設問を目立たせる。どこを処理しているかが一目で分かるように。 */
.pnm-app__res--active {
	border-left: 3px solid var(--color-primary);
	padding-left: 12px;
	margin-left: -15px;
}

.pnm-app__waiting--active {
	color: var(--color-primary-dark);
	background: var(--color-primary-light);
	font-weight: 600;
}

/* 1本ぶんの失敗表示（HTTP ステータスを含む）。 */
.pnm-app__errbox {
	background: var(--color-alert-bg);
	border: 1px solid var(--color-alert-border);
	border-radius: 10px;
	padding: 12px 14px;
	font-size: 12.5px;
	line-height: 1.8;
	color: var(--color-alert);
}

.pnm-app__errbox p {
	margin: 0;
}

/* -----------------------------------------------------------------------
 * フッターバー・注記
 * -------------------------------------------------------------------- */
.pnm-app__footbar {
	background: var(--color-bg);
	border: 1px solid var(--color-border);
	border-top: 3px solid var(--color-primary);
	border-radius: var(--radius-input);
	margin-top: 24px;
}

.pnm-app__footbar-inner {
	display: flex;
	gap: 12px;
	align-items: center;
	flex-wrap: wrap;
	padding: 12px 16px;
}

.pnm-app__confirm {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 12.5px;
	cursor: pointer;
	min-height: var(--tap);
}

.pnm-app__confirm input {
	width: 18px;
	height: 18px;
	accent-color: var(--color-primary);
	cursor: pointer;
	flex: none;
}

.pnm-app__note {
	font-size: 12px;
	color: var(--color-text-muted);
	line-height: 1.9;
	margin-top: 32px;
	border-top: 1px solid var(--color-border);
	padding-top: 16px;
}

/* -----------------------------------------------------------------------
 * 768px 以上
 * -------------------------------------------------------------------- */
@media screen and (min-width: 768px) {

	.pnm-app {
		padding: 32px 24px 64px;
	}

	.pnm-app__panel-head {
		padding: 16px 24px;
		flex-wrap: nowrap;
	}

	.pnm-app__panel-body {
		/* ★可読性（2026-08-26）：縦 20px → 28px。横は 24px のまま。 */
		padding: 28px 24px;
	}

	.pnm-app__side {
		margin-left: auto;
		width: auto;
		text-align: right;
		white-space: nowrap;
	}

	/* ⚠️ 2カラムは 768px 以上のときだけ。768px 以下は上の1カラムのまま。 */
	.pnm-app__grid {
		grid-template-columns: repeat(2, 1fr);
		/* ★可読性（2026-08-26）：行の間隔 14px → 24px。列の間隔は 18px のまま。 */
		gap: 24px 18px;
	}

	.pnm-app__f--full {
		grid-column: 1 / -1;
	}

	.pnm-app__run {
		padding: 32px 24px;
	}

	.pnm-app__gatecard {
		padding: 28px 24px;
	}
}

@media (prefers-reduced-motion: reduce) {

	.pnm-app * {
		transition: none !important;
		animation: none !important;
	}
}

/* -----------------------------------------------------------------------
 * ホームページからの自動入力（0.7.209）
 *
 * 基本情報のパネルより上に置く UI 部品。⚠️ 設問ではないので、パネル
 * （.pnm-app__panel）と同じ「カード」には見せない。淡いグリーンの下地
 * （--color-primary-light）で「入力の前の手助け」だと分かるようにする。
 * 🔴 グリーンのベタ塗りは広げないこと（デザイン正本のアンチパターン）。
 *    ここは入力欄1つぶんの小さな面積にとどめる。
 * ⚠️ 余白は 8px グリッド。position: sticky / fixed にしない（このフローの決定）。
 * -------------------------------------------------------------------- */
.pnm-app__autofill {
	background: var(--color-primary-light);
	border-radius: var(--radius-card);
	padding: 24px;
	/*
	 * ⚠️ **20px は 8px グリッド外だが、これは意図的**＝すぐ下に続く `.pnm-app__panel` の
	 *    `margin-top` と同じ値にしてある。ここだけ 24px にすると、この箱とパネルの間隔だけが
	 *    広くなって縦のリズムが崩れる。🔴 片方を変えるならもう片方も一緒に変えること。
	 */
	margin-top: 20px;
}

.pnm-app__autofill-title {
	margin: 0 0 8px;
	font-size: 18px;
	font-weight: 600;
	line-height: 1.5;
	color: var(--color-text);
}

.pnm-app__autofill-lead {
	margin: 0 0 16px;
	font-size: 13px;
	line-height: 1.8;
	color: var(--color-text-muted);
}

.pnm-app__autofill-label {
	display: block;
	/*
	 * ⚠️ 設問のタイトル（`.pnm-app__f > label[for]`）と**同じ 15px / 600 / 6px** にしてある。
	 *    URL 欄は設問ではないが、ラベルと入力欄の関係の見え方は設問とそろえる。
	 *    🔴 6px も 8px グリッド外だが、これも意図的（片方を変えるならもう片方も一緒に）。
	 */
	font-size: 15px;
	font-weight: 600;
	margin-bottom: 6px;
}

/*
 * モバイルは縦積み・768px 以上で横並び。
 * ⚠️ 入力欄は .pnm-app input[type="text"] を継ぐ（width:100% / font-size:16px）。
 *    16px 未満にしないこと＝iOS Safari が自動ズームする（既知の地雷）。
 */
.pnm-app__autofill-row {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.pnm-app__autofill-cta {
	/* ⚠️ ghost のまま（塗りにしない）＝このページの主導線は「文章をつくる」。 */
	background: var(--color-bg);
	white-space: nowrap;
}

.pnm-app__autofill-msg {
	margin: 8px 0 0;
	min-height: 20px;
	font-size: 13px;
	line-height: 1.6;
	color: var(--color-primary-dark);
}

.pnm-app__autofill-msg--error {
	color: var(--color-alert);
}

@media (min-width: 768px) {
	.pnm-app__autofill-row {
		flex-direction: row;
		align-items: center;
	}

	.pnm-app__autofill-cta {
		flex: 0 0 auto;
	}
}

/*
 * 自動入力した欄に添える一言（決定E）。
 * 🔴 「自動で入力しました。ご自身の言葉で足してください。」を出す唯一の場所。
 * ⚠️ 人が書き直したら次の描画で消える（JS の autoNoteVisible）。
 * ⚠️ [hidden] を効かせるための打ち消し（.pnm-app__warning と同じ理由）。
 */
.pnm-app__autonote {
	margin: 8px 0 0;
	font-size: 13px;
	line-height: 1.6;
	color: var(--color-primary-dark);
}

.pnm-app__autonote[hidden] {
	display: none;
}