/*
 * 深層ヒアリングの相談フォーム。
 *
 * 配色は docs/デザインルール.md v2 に従い、docs/muratsu-design.png から実測した値を使う。
 * 文字を載せる面はコントラスト基準(4.5:1)を満たす値へ調整済み。
 * LP側(ai-consultation-lp.css)と同じ変数名・同じ値で揃えている。
 *
 * UX基準は site/design-toolkit の ui-ux-pro-max に準拠。
 * タッチ領域44px以上／遷移200ms／フォーカス可視／本文16px／絵文字を使わない。
 */

.ai-deep {
	/* 画像から実測した色（そのまま使う） */
	--ai-accent: #3396fd;
	--ai-band: #ebf5fd;
	--ai-band-deep: #e3f1fa;
	--ai-page: #f5fafe;

	/* 文字を載せる面（コントラスト基準を満たす値） */
	--ai-primary: #0273e9;
	--ai-primary-dark: #0161c6;

	/* 文字色 */
	--ai-navy: #1b3554;
	--ai-text: #33404f;
	--ai-text-muted: #5c6a7c;

	--ai-border: #dde5ee;
	--ai-alert-bg: #fdf3e1;
	--ai-alert-border: #e8b64a;
	--ai-alert-text: #7a4b06;

	--ai-radius-lg: 20px;
	--ai-radius-md: 14px;
	--ai-radius-sm: 9px;
	--ai-shadow: 0 4px 16px rgba(27, 53, 84, .08);
	--ai-shadow-hover: 0 10px 28px rgba(27, 53, 84, .16);

	font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", "Meiryo", sans-serif;
	color: var(--ai-text);
	font-size: 16px;
	line-height: 1.8;
	margin: 0 auto;
	padding: 0 16px 40px;
}

.ai-deep * {
	box-sizing: border-box;
}

/* 非表示のはずの要素が出るバグを防ぐ。削除しないこと */
.ai-deep [hidden] {
	display: none !important;
}

.ai-deep button:focus-visible,
.ai-deep textarea:focus-visible {
	outline: 3px solid var(--ai-primary);
	outline-offset: 2px;
}

/* ===== 導入 ===== */

.ai-deep__intro {
	background: linear-gradient(180deg, var(--ai-band-deep), var(--ai-page) 70%, #fff);
	border: 1px solid var(--ai-border);
	border-radius: var(--ai-radius-lg);
	padding: 36px 24px;
	text-align: center;
}

.ai-deep__title {
	font-size: 1.5rem;
	font-weight: 700;
	color: var(--ai-navy);
	margin: 0 0 12px;
}

.ai-deep__lead {
	margin: 0 0 24px;
}

/* 未登録なら出ない(管理画面「画像」(ai_lp_image)の「相談フォーム冒頭」枠)。
   LPのファーストビュー写真と役割は同じ(患者ごとに変わらない・AIは関与しない)だが、
   ここは中央揃えの1カラムのため、横に並べるFVとは違い縦に積む簡潔なレイアウトにする。
   (2026.09.08: 以前はmax-width:420pxで、カード幅(1088px前後)の中で写真だけが
   極端に小さく浮いて見えていたため、カード幅いっぱいまで広げるようにした。) */
.ai-deep__intro-photo {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	object-position: center;
	border-radius: var(--ai-radius-lg);
	margin: 0 auto 24px;
	box-shadow: var(--ai-shadow);
}

.ai-deep__intro-photo--sp {
	display: none;
}

.ai-deep__note {
	font-size: .88rem;
	color: var(--ai-text-muted);
	margin: 18px 0 0;
}

/* ===== 進捗 ===== */

.ai-deep__progress {
	margin: 0 0 20px;
}

.ai-deep__progress-bar {
	height: 6px;
	background: var(--ai-band);
	border-radius: 999px;
	overflow: hidden;
}

.ai-deep__progress-bar > span {
	display: block;
	height: 100%;
	width: 0;
	background: var(--ai-accent);
	border-radius: 999px;
	transition: width 300ms;
}

.ai-deep__progress-text {
	font-size: .82rem;
	color: var(--ai-text-muted);
	text-align: right;
	margin: 6px 0 0;
}

/* ===== 前の質問に戻る／はじめから相談し直す ===== */

.ai-deep__nav {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 12px;
}

.ai-deep__back {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 44px;
	margin: 0 0 16px;
	padding: 6px 10px 6px 4px;
	background: none;
	border: 0;
	border-radius: var(--ai-radius-sm);
	font-family: inherit;
	font-size: .88rem;
	font-weight: 700;
	color: var(--ai-text-muted);
	cursor: pointer;
	transition: color 150ms, background-color 150ms;
}

.ai-deep__back svg {
	width: 18px;
	height: 18px;
	flex: none;
}

.ai-deep__back:hover {
	color: var(--ai-primary);
	background: var(--ai-band);
}

/* ===== 安全確認の案内 ===== */

.ai-deep__alert {
	background: var(--ai-alert-bg);
	border: 1px solid var(--ai-alert-border);
	border-radius: var(--ai-radius-md);
	color: var(--ai-alert-text);
	padding: 16px 18px;
	margin: 0 0 20px;
	font-weight: 700;
}

/* ===== 質問・要約・スケールの共通の器 ===== */

.ai-deep__panel {
	background: #fff;
	border: 1px solid var(--ai-border);
	border-radius: var(--ai-radius-lg);
	padding: 28px 24px;
	box-shadow: var(--ai-shadow);
}

.ai-deep__question {
	font-size: 1.2rem;
	font-weight: 700;
	color: var(--ai-navy);
	line-height: 1.7;
	margin: 0 0 10px;
}

.ai-deep__sub {
	font-size: .92rem;
	color: var(--ai-text-muted);
	margin: 0 0 20px;
}

/* ===== 選択肢 ===== */

.ai-deep__options {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 20px 0 0;
}

.ai-deep__option {
	display: block;
	width: 100%;
	min-height: 56px;
	text-align: left;
	background: var(--ai-page);
	border: 1px solid var(--ai-border);
	border-radius: var(--ai-radius-md);
	padding: 14px 48px 14px 18px;
	font-size: 1rem;
	font-family: inherit;
	color: var(--ai-navy);
	cursor: pointer;
	position: relative;
	transition: background-color 200ms, border-color 200ms, box-shadow 200ms;
}

.ai-deep__option::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 20px;
	width: 8px;
	height: 8px;
	border-top: 2px solid var(--ai-accent);
	border-right: 2px solid var(--ai-accent);
	transform: translateY(-50%) rotate(45deg);
}

.ai-deep__option:hover {
	background: var(--ai-band);
	border-color: var(--ai-accent);
	box-shadow: var(--ai-shadow);
}

/* ===== 複数選択（当てはまるものをすべて選ぶ） ===== */
/* 単一選択は「押す=次へ進む」矢印だが、複数選択は選択のON/OFFなのでチェックボックスにする。 */

.ai-deep__option--multi::after {
	content: "";
	border: none;
	width: 20px;
	height: 20px;
	top: 50%;
	right: 16px;
	transform: translateY(-50%);
	border-radius: 5px;
	border: 1.5px solid var(--ai-border);
	background-color: var(--ai-page);
	background-repeat: no-repeat;
	background-position: center;
	transition: background-color 150ms, border-color 150ms;
}

.ai-deep__option--multi.is-selected {
	background: var(--ai-band);
	border-color: var(--ai-accent);
}

.ai-deep__option--multi.is-selected::after {
	background-color: var(--ai-accent);
	border-color: var(--ai-accent);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4.5 12.75 6 6 9-13.5'/%3E%3C/svg%3E");
	background-size: 13px 13px;
}

/* exclusive(選択肢自体は単一選択。例: 性別)は、押しても即送信しない点は
   複数選択と同じだが、選べるのは1つだけなのでチェックボックスではなく
   ラジオボタンの見た目にする(誤って複数選べると思わせないため)。 */
.ai-deep__option--radio::after {
	border-radius: 999px;
}

.ai-deep__option--radio.is-selected::after {
	background-image: none;
	box-shadow: inset 0 0 0 4px #fff;
}

[data-options] + .ai-deep__btn {
	margin-top: 18px;
}

/* ===== 自由入力 ===== */

.ai-deep__free {
	margin-top: 22px;
	padding-top: 22px;
	border-top: 1px solid var(--ai-border);
}

.ai-deep__label {
	display: block;
	font-size: .92rem;
	font-weight: 700;
	color: var(--ai-navy);
	margin-bottom: 8px;
}

.ai-deep__textarea {
	width: 100%;
	/* 16px未満にするとiOSで入力時に意図しないズームが起きる */
	font-size: 16px;
	font-family: inherit;
	line-height: 1.7;
	color: var(--ai-text);
	background: var(--ai-page);
	border: 1px solid var(--ai-border);
	border-radius: var(--ai-radius-sm);
	padding: 12px 14px;
	resize: vertical;
	transition: border-color 200ms;
}

.ai-deep__textarea:focus {
	border-color: var(--ai-accent);
}

/* ===== ボタン ===== */

.ai-deep__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 52px;
	border: 0;
	border-radius: 999px;
	padding: 14px 32px;
	font-size: 1.06rem;
	font-weight: 700;
	font-family: inherit;
	cursor: pointer;
	transition: background-color 200ms, box-shadow 200ms;
}

.ai-deep__btn--primary {
	background: var(--ai-primary);
	color: #fff;
}

.ai-deep__btn--primary:hover {
	background: var(--ai-primary-dark);
	box-shadow: var(--ai-shadow-hover);
}

.ai-deep__free .ai-deep__btn {
	margin-top: 14px;
}

/* ===== 要約の確認 ===== */

.ai-deep__summary-head {
	font-size: .95rem;
	color: var(--ai-text-muted);
	margin: 0 0 14px;
}

.ai-deep__summary {
	background: var(--ai-page);
	border-left: 4px solid var(--ai-accent);
	border-radius: 0 var(--ai-radius-md) var(--ai-radius-md) 0;
	padding: 18px 20px;
	color: var(--ai-navy);
	white-space: pre-line;
}

.ai-deep__summary-confirm-question {
	font-size: 1rem;
	font-weight: 700;
	color: var(--ai-navy);
	margin: 22px 0 0;
}

/* ===== 0〜10スケール ===== */

.ai-deep__scale {
	margin-top: 24px;
}

.ai-deep__scale-labels {
	display: flex;
	justify-content: space-between;
	font-size: .85rem;
	color: var(--ai-text-muted);
	margin-bottom: 10px;
	gap: 12px;
}

.ai-deep__scale-buttons {
	display: grid;
	grid-template-columns: repeat(11, 1fr);
	gap: 6px;
}

.ai-deep__scale-btn {
	/* 11個並べるため幅は狭いが、高さで44px以上のタッチ領域を確保する */
	min-height: 48px;
	background: var(--ai-page);
	border: 1px solid var(--ai-border);
	border-radius: var(--ai-radius-sm);
	font-size: 1rem;
	font-weight: 700;
	font-family: inherit;
	color: var(--ai-navy);
	cursor: pointer;
	transition: background-color 200ms, border-color 200ms;
}

.ai-deep__scale-btn:hover {
	background: var(--ai-accent);
	border-color: var(--ai-accent);
	color: #fff;
}

/* ===== 読み込み中 ===== */

.ai-deep__panel--loading {
	text-align: center;
	padding: 48px 24px;
}

/*
 * 使い分け:
 *   問診中の短い待ち(質問1問分)   → 従来どおりのスピナー
 *   ご案内ページ生成中の長い待ち   → 前進し続けるバー(ぐるぐるは「足踏みしている」
 *                                    ように見え、実測より長く感じさせるため)
 * どちらを見せるかはJS側で data-spinner / data-loadbar の hidden を切り替える。
 */
.ai-deep__spinner {
	width: 40px;
	height: 40px;
	margin: 0 auto 18px;
	border: 3px solid var(--ai-band);
	border-top-color: var(--ai-accent);
	border-radius: 50%;
	animation: ai-deep-spin 900ms linear infinite;
}

@keyframes ai-deep-spin {
	to { transform: rotate(360deg); }
}

/* 「ご案内ページ生成中」だけに出す、四角が順にはまっていく演出。
   進捗バーの上に添えるだけの装飾で、進捗の情報源はあくまでバー(実測ベース)。 */
.ai-deep__generating {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 8px;
	width: 96px;
	margin: 0 auto 20px;
}

.ai-deep__generating span {
	aspect-ratio: 1 / 1;
	border-radius: 6px;
	background: var(--ai-band);
	transform: scale(.4);
	opacity: .35;
	animation: ai-deep-tile 1.8s ease-in-out infinite;
}

.ai-deep__generating span:nth-child(1) { animation-delay: 0ms; }
.ai-deep__generating span:nth-child(2) { animation-delay: 120ms; }
.ai-deep__generating span:nth-child(3) { animation-delay: 240ms; }
.ai-deep__generating span:nth-child(4) { animation-delay: 360ms; }
.ai-deep__generating span:nth-child(5) { animation-delay: 480ms; }
.ai-deep__generating span:nth-child(6) { animation-delay: 600ms; }

@keyframes ai-deep-tile {
	0%, 100% { transform: scale(.4); opacity: .35; background: var(--ai-band); }
	40% { transform: scale(1); opacity: 1; background: var(--ai-accent); }
}

.ai-deep__loadbar {
	width: 220px;
	max-width: 80%;
	height: 6px;
	margin: 0 auto 20px;
	background: var(--ai-band);
	border-radius: 999px;
	overflow: hidden;
}

.ai-deep__loadbar > span {
	display: block;
	height: 100%;
	width: 0;
	background: var(--ai-accent);
	border-radius: 999px;
	transition: width 550ms ease-out;
}

.ai-deep__loading-text {
	margin: 0;
	color: var(--ai-text-muted);
	white-space: pre-line;
}

/* ===== 生成されたLP ===== */

.ai-deep__lp {
	margin-top: 8px;
}

/* LPは相談フォームより広く使うため、幅の制約だけ外す。
   左右の余白は .ai-lp 側の値をそのまま活かす
   (以前はここで padding-left/right を 0 にしていたが、スマホで
   .ai-deep の 12px しか残らず、カードが画面端に貼り付いて見えていた)。 */
.ai-deep__lp .ai-lp {
	max-width: none;
}

/* V2(デザイン生成方式)のLPも同様に幅の制約だけ外す。
   .ai-lp2 は --ai2-max-width(720px)を自身に再宣言しているため、
   親のカスタムプロパティ上書きでは効かない。ここで直接 max-width を上書きする
   (詳細度 .ai-deep__lp .ai-lp2 > .ai-lp2 なので勝つ)。 */
.ai-deep__lp .ai-lp2 {
	max-width: none;
}

/* ===== スマホ ===== */

@media (max-width: 600px) {
	.ai-deep {
		padding: 0 8px 32px;
	}

	/* .ai-lpは単体表示(見本等)でも使うため基本のpadding(16px)は変えず、
	   相談室に埋め込まれたときだけここで削る。
	   .ai-deepの8px + ここ8px = 実質16px(以前は12+16=28pxで、
	   webapp-panel等の外側paddingと重なりスマホで特に狭く見えていた)。
	   0にはしない(以前0にして画面端に貼り付いた実績があるため、上のコメント参照)。 */
	.ai-deep__lp .ai-lp {
		padding-left: 8px;
		padding-right: 8px;
	}

	.ai-deep__intro,
	.ai-deep__panel {
		padding: 22px 16px;
	}

	.ai-deep__title {
		font-size: 1.3rem;
	}

	.ai-deep__intro-photo--pc {
		display: none;
	}

	.ai-deep__intro-photo--sp {
		display: block;
	}

	.ai-deep__question {
		font-size: 1.1rem;
	}

	.ai-deep__option {
		padding: 14px 40px 14px 14px;
	}

	.ai-deep__scale-buttons {
		/* 11個を横一列にすると1つ25px程度になり押しにくいので2段に折る */
		grid-template-columns: repeat(6, 1fr);
	}

	.ai-deep__scale-btn {
		min-height: 52px;
	}
}

/* ===== 動きを減らす設定を尊重する ===== */

@media (prefers-reduced-motion: reduce) {
	.ai-deep *,
	.ai-deep *::before,
	.ai-deep *::after {
		transition-duration: .01ms !important;
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
	}
}