/* ==========================================================================
   AI 補助金診断 v6.0 — TOP テーマと統合したデザイン
   - --home-* トークンを継承 (front-page.css と整合)
   - オレンジ CTA / 扇形装飾 / 回転バッジ / Noto Sans JP
   ========================================================================== */

:root {
	/* TOP の home-* トークンを diag-* にエイリアス (フォールバック値付き) */
	--diag-blue-900: var(--home-blue-900, #063f86);
	--diag-blue-800: var(--home-blue-800, #0754ac);
	--diag-blue-700: var(--home-blue-700, #0967d8);
	--diag-blue-600: var(--home-blue-600, #1479e6);
	--diag-blue-100: var(--home-blue-100, #eaf5ff);

	--diag-orange:      var(--home-orange, #ff7628);
	--diag-orange-deep: #e85f10;
	--diag-yellow:      var(--home-yellow, #ffc914);
	--diag-green:       var(--home-green, #31a96a);

	--diag-ink:    var(--home-ink, #171f2a);
	--diag-muted:  var(--home-muted, #5d6b7b);
	--diag-line:   var(--home-line, #d9e5f1);

	--diag-surface: #ffffff;
	--diag-bg:      var(--home-bg, #f6fbff);
	--diag-radius:  var(--home-radius, 8px);
	--diag-shadow:  var(--home-shadow, 0 14px 35px rgba(12, 72, 145, 0.14));
	--diag-shadow-lg: 0 24px 56px rgba(12, 72, 145, 0.18);

	--diag-bubble-ai:   #f6f9fd;
	--diag-bubble-user: linear-gradient(180deg, #0967d8, #063f86);

	--diag-success: #31a96a;
	--diag-warn:    #ffa726;
	--diag-error:   #e53935;

	--diag-font: var(--home-font, "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
}

body.diagnosis-page {
	background: var(--diag-bg);
	font-family: var(--diag-font);
}

.diag {
	color: var(--diag-ink);
	font-family: var(--diag-font);
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
	padding: 32px 20px 60px;
}

/* ==========================================================================
   HERO
   ========================================================================== */
.diag-hero {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	background: linear-gradient(135deg, #EEF2FA 0%, #F0F4FB 40%, #E8EEF7 100%);
	/* break out of parent main#diag's max-width: 1200px to span full viewport */
	width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	margin-top: -32px;
	margin-bottom: 28px;
	padding: 0;
	border-radius: 0;
	box-shadow: none;
}
/* 左下: 街シルエット + 中央左: 虫眼鏡装飾 */
.diag-hero::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background-image:
		url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80' fill='none' stroke='%231E4AB8' stroke-width='2.4'><circle cx='32' cy='32' r='20'/><line x1='46' y1='46' x2='66' y2='66' stroke-linecap='round'/></svg>"),
		url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 200' fill='%231E4AB8'><rect x='10' y='80' width='40' height='120'/><rect x='20' y='90' width='6' height='8' fill='%23fff'/><rect x='32' y='90' width='6' height='8' fill='%23fff'/><rect x='20' y='108' width='6' height='8' fill='%23fff'/><rect x='32' y='108' width='6' height='8' fill='%23fff'/><rect x='20' y='126' width='6' height='8' fill='%23fff'/><rect x='32' y='126' width='6' height='8' fill='%23fff'/><rect x='60' y='40' width='50' height='160'/><rect x='70' y='55' width='8' height='10' fill='%23fff'/><rect x='86' y='55' width='8' height='10' fill='%23fff'/><rect x='70' y='75' width='8' height='10' fill='%23fff'/><rect x='86' y='75' width='8' height='10' fill='%23fff'/><rect x='70' y='95' width='8' height='10' fill='%23fff'/><rect x='86' y='95' width='8' height='10' fill='%23fff'/><rect x='70' y='115' width='8' height='10' fill='%23fff'/><rect x='86' y='115' width='8' height='10' fill='%23fff'/><rect x='120' y='100' width='35' height='100'/><rect x='128' y='112' width='6' height='8' fill='%23fff'/><rect x='140' y='112' width='6' height='8' fill='%23fff'/><rect x='128' y='128' width='6' height='8' fill='%23fff'/><rect x='140' y='128' width='6' height='8' fill='%23fff'/><rect x='128' y='144' width='6' height='8' fill='%23fff'/><rect x='140' y='144' width='6' height='8' fill='%23fff'/><rect x='165' y='60' width='45' height='140'/><rect x='175' y='75' width='8' height='10' fill='%23fff'/><rect x='190' y='75' width='8' height='10' fill='%23fff'/><rect x='175' y='95' width='8' height='10' fill='%23fff'/><rect x='190' y='95' width='8' height='10' fill='%23fff'/><rect x='175' y='115' width='8' height='10' fill='%23fff'/><rect x='190' y='115' width='8' height='10' fill='%23fff'/></svg>");
	background-position:
		32px 38%,
		left bottom;
	background-size:
		70px 70px,
		340px auto;
	background-repeat: no-repeat, no-repeat;
	opacity: .12;
}
/* 右下: 大きな青い円弧装飾 (画面右下から弧を描いて飛び出す) */
.diag-hero::after {
	content: '';
	position: absolute;
	bottom: -260px;
	right: -180px;
	width: 880px;
	height: 600px;
	background: linear-gradient(135deg, #2456BF 0%, #1E4AB8 55%, #163A93 100%);
	border-radius: 50%;
	z-index: 1;
	opacity: .92;
	pointer-events: none;
}
.diag-hero__bg {
	position: absolute;
	right: 0;
	top: 0;
	width: 60%;
	height: 100%;
	object-fit: cover;
	object-position: 70% 25%;
	z-index: 2;
}
.diag-hero__inner {
	position: relative;
	display: grid;
	grid-template-columns: 46% 1fr;
	gap: 0;
	align-items: center;
	max-width: 1400px;
	margin: 0 auto;
	padding: 88px 56px 72px;
	z-index: 3;
	min-height: 640px;
}
.diag-hero__copy {
	z-index: 3;
	position: relative;
}
.diag-hero__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 24px;
	padding: 9px 18px;
	background: #fff;
	color: var(--diag-blue-800);
	font-size: 14px;
	font-weight: 800;
	letter-spacing: 0.04em;
	border-radius: 8px;
	border: 2px solid var(--diag-blue-800);
	box-shadow: 0 2px 6px rgba(30, 74, 184, .08);
}
.diag-hero__eyebrow svg { stroke: currentColor; }
.diag-hero__eyebrow svg { flex-shrink: 0; }
.diag-hero__title {
	margin: 0 0 22px;
	font-size: clamp(30px, 4.2vw, 48px);
	line-height: 1.45;
	letter-spacing: -0.02em;
	font-weight: 900;
	color: var(--diag-blue-900);
}
.diag-hero__title span {
	background: linear-gradient(180deg, transparent 58%, rgba(255, 201, 20, 0.5) 58%);
	padding: 0 4px;
}
.diag-hero__lead {
	margin: 0 0 32px;
	color: var(--diag-muted);
	font-size: 15.5px;
	line-height: 1.95;
	font-weight: 600;
}
.diag-hero__lead strong { color: var(--diag-blue-900); font-weight: 800; }

.diag-hero__stats {
	display: flex;
	gap: 20px;
	padding-top: 4px;
	flex-wrap: wrap;
}
.diag-hero__stat {
	display: flex;
	align-items: center;
	gap: 10px;
}
.diag-hero__stat-text { white-space: nowrap; }
.diag-hero__stat-icon {
	width: 48px;
	height: 48px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #fff;
	border: 2px solid var(--diag-blue-800);
	border-radius: 50%;
	color: var(--diag-blue-800);
	flex-shrink: 0;
	box-shadow: 0 2px 6px rgba(30, 74, 184, .08);
}
.diag-hero__stat-text strong {
	display: block;
	color: var(--diag-blue-900);
	font-size: 18px;
	font-weight: 900;
}
.diag-hero__stat-text small {
	color: var(--diag-muted);
	font-size: 12px;
	font-weight: 700;
}

.diag-hero__bubble {
	position: absolute;
	right: 48px;
	top: 64px;
	background: linear-gradient(180deg, #fff 0%, #F0F4FB 100%);
	color: var(--diag-blue-900);
	padding: 20px 26px;
	border-radius: 16px;
	font-size: 16px;
	font-weight: 800;
	line-height: 1.6;
	text-align: center;
	box-shadow: 0 12px 30px rgba(7, 84, 172, 0.15);
	transform: rotate(3deg);
	border: 1px solid rgba(255,255,255,.9);
	z-index: 2;
}
.diag-hero__bubble::after {
	content: "";
	position: absolute;
	bottom: -10px;
	left: 30px;
	width: 0;
	height: 0;
	border-left: 10px solid transparent;
	border-right: 10px solid transparent;
	border-top: 12px solid #F0F4FB;
}

/* Steps banner */
.diag-hero__steps-banner {
	position: relative;
	z-index: 4;
	background: rgba(255,255,255,.96);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border-top: 1px solid rgba(209,217,230,.4);
	padding: 20px 0;
}
.diag-hero__steps-banner-inner {
	display: flex;
	align-items: center;
	gap: 28px;
	max-width: 1700px;
	margin: 0 auto;
	padding: 0 48px;
}
.diag-hero__steps-person {
	display: flex;
	align-items: center;
	gap: 14px;
	flex-shrink: 0;
}
.diag-hero__steps-person img {
	width: 60px;
	height: 60px;
	border-radius: 50%;
	object-fit: cover;
	border: 2px solid #E2E8F2;
	background: #fff;
}
.diag-hero__steps-person-text {
	font-size: 13.5px;
	color: var(--diag-blue-900);
	line-height: 1.55;
	margin: 0;
	font-weight: 600;
}
.diag-hero__steps-person-text strong {
	color: var(--diag-blue-700);
	font-weight: 800;
	font-size: 15px;
}
.diag-hero__steps-list {
	display: flex;
	align-items: center;
	gap: 4px;
	flex: 1;
	justify-content: center;
}
.diag-hero__steps-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding: 20px 32px;
	border: 1px solid #E2E8F2;
	border-radius: 50px;
	background: #fff;
	position: relative;
	min-width: 160px;
	flex: 1;
}
.diag-hero__steps-no {
	font-size: 22px;
	font-weight: 900;
	color: var(--diag-blue-700);
	margin-bottom: 6px;
}
.diag-hero__steps-item p {
	margin: 0;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--diag-muted);
	line-height: 1.5;
}
.diag-hero__steps-arrow {
	display: flex;
	align-items: center;
	color: #A0ABBE;
	flex-shrink: 0;
}
.diag-hero__steps-banner .diag-btn {
	flex-shrink: 0;
	min-height: 60px;
	padding: 0 42px;
	font-size: 17px;
	font-weight: 800;
	border-radius: 10px;
}

/* ==========================================================================
   CTA buttons (TOP 流用)
   ========================================================================== */
.diag-btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-height: 52px;
	padding: 0 28px;
	border-radius: var(--diag-radius);
	font-family: var(--diag-font);
	font-size: 15px;
	font-weight: 800;
	text-decoration: none;
	border: none;
	cursor: pointer;
	transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.diag-btn--orange {
	background: var(--diag-orange);
	color: #fff;
	box-shadow: 0 12px 26px rgba(255, 118, 40, 0.32);
}
.diag-btn--orange:hover {
	background: var(--diag-orange-deep);
	transform: translateY(-2px);
	box-shadow: 0 16px 32px rgba(255, 118, 40, 0.42);
}
.diag-btn--orange:disabled {
	opacity: 0.5; cursor: not-allowed; transform: none;
}
.diag-btn--navy {
	background: var(--diag-blue-900);
	color: #fff;
	min-height: 44px;
	padding: 0 22px;
	font-size: 14px;
}
.diag-btn--navy:hover { background: var(--diag-blue-800); }
.diag-btn--navy:disabled { opacity: 0.45; cursor: not-allowed; background: var(--diag-muted); }
.diag-btn--ghost {
	background: transparent;
	color: var(--diag-blue-900);
	border: 2px solid var(--diag-line);
}
.diag-btn--ghost:hover { border-color: var(--diag-blue-700); color: var(--diag-blue-700); }

/* ==========================================================================
   PROGRESS HEADER
   ========================================================================== */
.diag-progress {
	background: #fff;
	border: 1px solid var(--diag-line);
	border-radius: var(--diag-radius);
	box-shadow: 0 10px 24px rgba(12, 72, 145, 0.06);
	margin-bottom: 16px;
	overflow: hidden;
}
.diag-progress__inner {
	display: grid;
	grid-template-columns: 200px 1fr;
	min-height: 78px;
	align-items: center;
}
.diag-progress__title {
	display: flex; align-items: center; gap: 12px;
	padding-left: 24px;
	font-size: 14px; font-weight: 900;
	color: var(--diag-blue-900);
	border-right: 1px solid var(--diag-line);
	height: 100%;
}
.diag-progress__shield {
	width: 36px; height: 36px;
	border-radius: 50%;
	background: var(--diag-blue-900);
	display: grid; place-items: center;
	color: #fff;
}
.diag-steps {
	list-style: none;
	margin: 0; padding: 16px 24px 0;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 0;
	position: relative;
}
.diag-steps::before {
	content: "";
	position: absolute;
	left: calc((100% / 8) + 12px);
	right: calc((100% / 8) + 12px);
	top: 28px;
	height: 2px;
	background: var(--diag-line);
	z-index: 0;
}
.diag-step {
	position: relative; z-index: 1;
	text-align: center;
	color: #95a5b9;
	font-size: 11px; font-weight: 800;
}
.diag-step__no {
	display: grid; place-items: center;
	width: 32px; height: 32px;
	margin: 0 auto 6px;
	background: #fff;
	border: 2px solid var(--diag-line);
	color: #95a5b9;
	font-size: 11px; font-weight: 900;
	border-radius: 50%;
	transition: all .3s cubic-bezier(.2,.7,.4,1);
}
.diag-step__label { display: block; }
.diag-step.is-active { color: var(--diag-blue-900); }
.diag-step.is-active .diag-step__no {
	background: var(--diag-blue-900);
	border-color: var(--diag-blue-900);
	color: #fff;
	box-shadow: 0 6px 14px rgba(6, 63, 134, 0.30);
}
.diag-step.is-done .diag-step__no {
	background: var(--diag-blue-700);
	border-color: var(--diag-blue-700);
	color: #fff;
}

/* ==========================================================================
   WORKSPACE (chat + preview)
   ========================================================================== */
/* [hidden] 属性を確実に効かせる (display:grid/flex の上書き対策) */
.diag-progress[hidden],
.diag-workspace[hidden],
.diag-result[hidden] {
	display: none !important;
}
.diag-workspace {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 280px;
	gap: 16px;
	margin-bottom: 24px;
}

.diag-chat {
	background: #fff;
	border: 1px solid var(--diag-line);
	border-radius: var(--diag-radius);
	box-shadow: var(--diag-shadow);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	min-height: 480px;
}
.diag-chat__messages {
	flex: 1;
	padding: 24px 24px 8px;
	overflow-y: auto;
	max-height: 560px;
	scroll-behavior: smooth;
}

/* メッセージ */
.diag-msg {
	display: grid;
	grid-template-columns: 40px 1fr;
	gap: 12px;
	margin-bottom: 16px;
	animation: diag-msg-in 200ms ease-out;
}
.diag-msg.is-user {
	grid-template-columns: 1fr 40px;
}
@keyframes diag-msg-in {
	from { opacity: 0; transform: translateY(8px); }
	to   { opacity: 1; transform: translateY(0); }
}

.diag-avatar {
	width: 40px; height: 40px;
	border-radius: 50%;
	display: grid; place-items: center;
	background: #f5f8fc;
	border: 1px solid var(--diag-line);
}
.diag-avatar--ai {
	background: linear-gradient(135deg, #fff 0%, var(--diag-blue-100) 100%);
	border-color: var(--diag-blue-700);
}
.diag-avatar--user {
	background: var(--diag-blue-900);
	color: #fff;
}
.diag-avatar--user::after {
	content: "👤";
	font-size: 18px;
}

.diag-sparkle {
	position: relative;
	width: 22px; height: 22px;
}
.diag-sparkle::before, .diag-sparkle::after {
	content: "";
	position: absolute;
	background: var(--diag-blue-900);
	clip-path: polygon(50% 0, 65% 35%, 100% 50%, 65% 65%, 50% 100%, 35% 65%, 0 50%, 35% 35%);
}
.diag-sparkle::before {
	width: 14px; height: 14px;
	left: 4px; top: 4px;
}
.diag-sparkle::after {
	width: 8px; height: 8px;
	right: 0; top: 0;
	opacity: 0.7;
}

.diag-bubble {
	max-width: min(520px, 80%);
	padding: 14px 18px;
	border-radius: 12px;
	font-size: 14px;
	line-height: 1.85;
	font-weight: 600;
	color: #1b355e;
	background: var(--diag-bubble-ai);
	box-shadow: 0 4px 12px rgba(7, 84, 172, 0.06);
}
.diag-bubble strong { color: var(--diag-blue-900); font-weight: 800; }
.diag-msg.is-user .diag-bubble {
	background: var(--diag-bubble-user);
	color: #fff;
	margin-left: auto;
	box-shadow: 0 8px 18px rgba(7, 84, 172, 0.20);
}
.diag-msg.is-user .diag-bubble strong { color: #fff; }
.diag-time {
	display: block;
	color: var(--diag-muted);
	font-size: 11px;
	font-weight: 700;
	margin-top: 4px;
}
.diag-msg.is-user .diag-time { text-align: right; }

/* タイピングインジケーター
   注: [hidden] 属性を効かせるため display: flex は :not([hidden]) で限定する */
.diag-chat__typing[hidden] {
	display: none !important;
}
.diag-chat__typing {
	display: flex; align-items: center; gap: 12px;
	padding: 0 24px 12px;
}
.diag-typing-dots { display: flex; gap: 4px; }
.diag-typing-dots span {
	width: 8px; height: 8px;
	border-radius: 50%;
	background: var(--diag-blue-700);
	animation: diag-typing 1.4s infinite ease-in-out;
}
.diag-typing-dots span:nth-child(2) { animation-delay: .2s; }
.diag-typing-dots span:nth-child(3) { animation-delay: .4s; }
@keyframes diag-typing {
	0%, 60%, 100% { opacity: 0.3; transform: translateY(0); }
	30%           { opacity: 1;   transform: translateY(-4px); }
}

/* 入力フォーム */
.diag-input {
	display: grid;
	grid-template-columns: 1fr 96px;
	gap: 10px;
	padding: 14px 24px;
	border-top: 1px solid var(--diag-line);
	background: #fff;
}
.diag-input__field input {
	width: 100%;
	height: 44px;
	border: 1px solid var(--diag-line);
	border-radius: var(--diag-radius);
	padding: 0 16px;
	font-size: 14px;
	font-family: inherit;
	color: var(--diag-ink);
	transition: border-color .15s;
}
.diag-input__field input:focus {
	outline: none;
	border-color: var(--diag-blue-700);
	box-shadow: 0 0 0 3px rgba(9, 103, 216, 0.12);
}
.diag-chat__notice {
	display: flex; align-items: center; gap: 8px;
	padding: 8px 24px 16px;
	color: var(--diag-muted);
	font-size: 12px;
	font-weight: 700;
}
.diag-chat__abort {
	margin-left: auto;
	background: none; border: none; padding: 6px 10px;
	color: var(--diag-muted);
	font-size: 12px; font-weight: 700;
	cursor: pointer;
	border-radius: 4px;
}
.diag-chat__abort:hover { color: var(--diag-error); background: rgba(229, 57, 53, 0.06); }

/* 候補プレビュー (右サイド) */
.diag-preview {
	background: #fff;
	border: 1px solid var(--diag-line);
	border-radius: var(--diag-radius);
	box-shadow: 0 6px 18px rgba(12, 72, 145, 0.06);
	padding: 18px;
	height: fit-content;
	position: sticky;
	top: 16px;
}
.diag-preview__head {
	display: flex; align-items: center; gap: 8px;
	color: var(--diag-blue-900);
	margin-bottom: 12px;
}
.diag-preview__label { font-size: 13px; font-weight: 900; }
.diag-preview__count {
	color: var(--diag-blue-900);
	font-weight: 900;
	margin-bottom: 8px;
}
.diag-preview__count strong {
	font-size: 28px;
	font-variant-numeric: tabular-nums;
	display: inline-block;
	min-width: 60px;
	transition: color .25s;
}
.diag-preview__count strong.is-narrowing { color: var(--diag-orange); }
.diag-preview__count span {
	font-size: 12px;
	color: var(--diag-muted);
	font-weight: 700;
}
.diag-preview__bar {
	height: 6px;
	background: var(--diag-blue-100);
	border-radius: 3px;
	overflow: hidden;
	margin-bottom: 16px;
}
.diag-preview__bar span {
	display: block;
	height: 100%;
	background: linear-gradient(90deg, var(--diag-blue-700), var(--diag-blue-900));
	transition: width .8s cubic-bezier(.2,.7,.4,1);
}
.diag-preview__h {
	margin: 0 0 10px;
	font-size: 12px;
	font-weight: 900;
	color: var(--diag-muted);
	letter-spacing: 0.06em;
}
.diag-preview__list {
	list-style: none; padding: 0; margin: 0;
	display: grid; gap: 8px;
}
.diag-preview__list li.diag-preview__item {
	padding: 10px 12px;
	background: #fafcfe;
	border: 1px solid var(--diag-line);
	border-radius: 6px;
	font-size: 12px;
	font-weight: 700;
	color: var(--diag-ink);
	line-height: 1.45;
}
.diag-preview__list li.diag-preview__item small {
	display: block;
	margin-top: 4px;
	color: var(--diag-muted);
	font-size: 11px;
	font-weight: 600;
}
.diag-preview__placeholder {
	padding: 16px;
	color: var(--diag-muted);
	font-size: 12px;
	text-align: center;
	background: #fafcfe;
	border: 1px dashed var(--diag-line);
	border-radius: 6px;
}

/* ==========================================================================
   CANDIDATE CARDS (アーカイブ風一覧、絞込中の候補表示)
   ========================================================================== */
.diag-candidates[hidden] { display: none !important; }
.diag-candidates {
	background: #fff;
	border-radius: var(--diag-radius);
	box-shadow: var(--diag-shadow);
	padding: 28px 28px 24px;
	margin-bottom: 24px;
	animation: diag-msg-in 240ms ease-out;
}
.diag-candidates__head {
	margin-bottom: 20px;
	padding-bottom: 14px;
	border-bottom: 1px solid var(--diag-line);
}
.diag-candidates__title {
	margin: 0 0 6px;
	display: flex; align-items: baseline; gap: 8px;
	color: var(--diag-blue-900);
	font-weight: 900;
	font-size: 18px;
}
.diag-candidates__count {
	color: var(--diag-orange);
	font-size: 32px;
	font-variant-numeric: tabular-nums;
}
.diag-candidates__title small {
	color: var(--diag-muted);
	font-size: 14px;
	font-weight: 700;
}
.diag-candidates__lead {
	margin: 0;
	color: var(--diag-muted);
	font-size: 13px;
	line-height: 1.6;
}

.diag-candidates__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 14px;
	margin-bottom: 20px;
}

.diag-cand-card {
	display: flex; flex-direction: column;
	background: #fafcfe;
	border: 1px solid var(--diag-line);
	border-radius: 10px;
	padding: 16px 18px;
	text-decoration: none;
	color: inherit;
	transition: transform .12s, box-shadow .12s, border-color .12s;
	animation: diag-card-in 280ms cubic-bezier(.2,.7,.4,1) backwards;
}
.diag-cand-card:hover {
	transform: translateY(-2px);
	border-color: var(--diag-blue-700);
	box-shadow: 0 12px 24px rgba(12, 72, 145, 0.10);
}
.diag-cand-card__pref {
	display: inline-flex; align-items: center;
	background: var(--diag-blue-100);
	color: var(--diag-blue-900);
	padding: 3px 10px;
	border-radius: 4px;
	font-size: 11px; font-weight: 800;
	margin-bottom: 8px;
	max-width: max-content;
}
.diag-cand-card__title {
	margin: 0 0 10px;
	font-size: 14px;
	font-weight: 800;
	line-height: 1.55;
	color: var(--diag-ink);
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.diag-cand-card__meta {
	display: flex; flex-wrap: wrap; gap: 8px 12px;
	margin-top: auto;
	padding-top: 8px;
	color: var(--diag-muted);
	font-size: 12px;
	font-weight: 700;
}
.diag-cand-card__meta strong {
	color: var(--diag-orange);
	font-weight: 900;
}
.diag-cand-card__tags {
	display: flex; flex-wrap: wrap; gap: 4px;
	margin-top: 8px;
}
.diag-cand-card__tag {
	background: #fff;
	border: 1px solid var(--diag-line);
	color: var(--diag-blue-900);
	padding: 2px 8px;
	border-radius: 3px;
	font-size: 10px;
	font-weight: 700;
}

/* ページネーション */
.diag-candidates__pager[hidden] { display: none !important; }
.diag-candidates__pager {
	display: flex; align-items: center; justify-content: center;
	gap: 16px;
	padding-top: 16px;
	border-top: 1px solid var(--diag-line);
}
.diag-pager-btn {
	display: inline-flex; align-items: center; gap: 6px;
	background: #fff;
	border: 1px solid var(--diag-line);
	color: var(--diag-blue-900);
	padding: 8px 14px;
	border-radius: var(--diag-radius);
	font-family: inherit;
	font-size: 13px;
	font-weight: 800;
	cursor: pointer;
	transition: all .12s;
}
.diag-pager-btn:hover:not(:disabled) {
	border-color: var(--diag-blue-700);
	color: var(--diag-blue-700);
	transform: translateY(-1px);
}
.diag-pager-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.diag-pager-info {
	font-size: 13px;
	font-weight: 800;
	color: var(--diag-muted);
	font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   RESULT
   ========================================================================== */
.diag-result {
	background: #fff;
	border-radius: var(--diag-radius);
	box-shadow: var(--diag-shadow-lg);
	padding: 36px 32px;
}
.diag-result__head { text-align: center; margin-bottom: 28px; }
.diag-result__eyebrow {
	display: inline-block;
	margin: 0 0 12px;
	padding: 5px 14px;
	background: var(--diag-blue-100);
	color: var(--diag-blue-900);
	font-size: 12px;
	font-weight: 900;
	border-radius: 4px;
	letter-spacing: 0.04em;
}
.diag-result__title {
	margin: 0 0 12px;
	font-size: clamp(20px, 3.4vw, 30px);
	font-weight: 900;
	color: var(--diag-blue-900);
}
.diag-result__title strong { color: var(--diag-orange); font-size: 1.2em; }
.diag-result__lead { color: var(--diag-muted); font-size: 14px; }

.diag-result__cards { display: grid; gap: 18px; margin-bottom: 24px; }

.diag-card {
	background: #fff;
	border: 1px solid var(--diag-line);
	border-radius: 10px;
	padding: 22px 24px;
	box-shadow: 0 8px 24px rgba(12, 72, 145, 0.05);
	transition: transform .15s, box-shadow .15s;
	animation: diag-card-in 380ms cubic-bezier(.2,.7,.4,1) backwards;
}
.diag-card:hover { transform: translateY(-2px); box-shadow: 0 14px 36px rgba(12, 72, 145, 0.10); }
@keyframes diag-card-in {
	from { opacity: 0; transform: translateY(12px); }
	to   { opacity: 1; transform: translateY(0); }
}
.diag-card:nth-child(2) { animation-delay: 100ms; }
.diag-card:nth-child(3) { animation-delay: 200ms; }
.diag-card:nth-child(4) { animation-delay: 300ms; }
.diag-card:nth-child(5) { animation-delay: 400ms; }

.diag-card__head {
	display: flex; align-items: center; gap: 12px;
	margin-bottom: 12px;
	padding-bottom: 12px;
	border-bottom: 1px dashed var(--diag-line);
}
.diag-card__rank {
	display: grid; place-items: center;
	width: 36px; height: 36px;
	background: var(--diag-blue-900);
	color: #fff;
	border-radius: 50%;
	font-size: 14px; font-weight: 900;
}
.diag-card__match-bar {
	flex: 1;
	height: 8px;
	background: var(--diag-blue-100);
	border-radius: 4px;
	overflow: hidden;
}
.diag-card__match-bar span {
	display: block;
	height: 100%;
	background: linear-gradient(90deg, var(--diag-blue-700), var(--diag-orange));
	transition: width 1s cubic-bezier(.2,.7,.4,1);
}
.diag-card__match-score {
	color: var(--diag-blue-900);
	font-weight: 900;
	font-size: 14px;
	min-width: 64px;
	text-align: right;
}

.diag-card__title {
	margin: 0 0 12px;
	font-size: 17px;
	font-weight: 800;
	line-height: 1.5;
	color: var(--diag-ink);
}
.diag-card__title a {
	color: inherit; text-decoration: none;
	background: linear-gradient(transparent 90%, var(--diag-yellow) 90%);
}
.diag-card__title a:hover { color: var(--diag-blue-700); }

.diag-card__meta {
	display: flex; flex-wrap: wrap; gap: 14px;
	margin-bottom: 16px;
	color: var(--diag-muted);
	font-size: 13px;
	font-weight: 700;
}
.diag-card__meta span svg {
	width: 14px; height: 14px;
	margin-right: 4px;
	vertical-align: -2px;
}

.diag-card__section {
	margin-bottom: 14px;
}
.diag-card__section h4 {
	margin: 0 0 8px;
	font-size: 13px;
	font-weight: 900;
	color: var(--diag-blue-900);
}
.diag-card__section ul { list-style: none; padding: 0; margin: 0; }
.diag-card__section li {
	padding: 6px 0 6px 24px;
	position: relative;
	font-size: 13px;
	line-height: 1.65;
	color: var(--diag-ink);
}
.diag-card__section li::before {
	position: absolute;
	left: 4px; top: 7px;
	font-size: 14px;
}
.diag-card__section--why li::before { content: "✅"; }
.diag-card__section--caveats li::before { content: "⚠️"; }
.diag-card__section--actions { counter-reset: diag-action; }
.diag-card__section--actions li { counter-increment: diag-action; }
.diag-card__section--actions li::before {
	content: counter(diag-action);
	background: var(--diag-blue-900);
	color: #fff;
	width: 16px; height: 16px;
	border-radius: 50%;
	display: grid; place-items: center;
	font-size: 10px; font-weight: 900;
	left: 0; top: 8px;
}

.diag-card__cta {
	display: inline-flex; align-items: center; gap: 8px;
	margin-top: 8px;
	background: var(--diag-orange);
	color: #fff;
	padding: 10px 20px;
	border-radius: var(--diag-radius);
	text-decoration: none;
	font-size: 14px;
	font-weight: 800;
	box-shadow: 0 8px 20px rgba(255, 118, 40, 0.30);
	transition: transform .12s;
}
.diag-card__cta:hover {
	background: var(--diag-orange-deep);
	transform: translateY(-2px);
	color: #fff;
}

.diag-result__actions {
	display: flex; gap: 10px; justify-content: center; flex-wrap: wrap;
	padding-top: 16px;
	border-top: 1px solid var(--diag-line);
}

/* ==========================================================================
   その他
   ========================================================================== */
.diag-disclaimer {
	margin-top: 24px;
	color: var(--diag-muted);
	font-size: 11px;
	text-align: center;
	line-height: 1.7;
}

.screen-reader-text {
	position: absolute;
	clip: rect(1px, 1px, 1px, 1px);
	height: 1px; width: 1px;
	overflow: hidden;
}

/* focus-visible (a11y) */
.diag-btn:focus-visible,
.diag-input__field input:focus-visible,
.diag-chat__abort:focus-visible {
	outline: 3px solid var(--diag-blue-700);
	outline-offset: 2px;
}

/* prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
	.diag-msg, .diag-card, .diag-typing-dots span, .diag-card__match-bar span, .diag-preview__bar span {
		animation: none !important;
		transition: none !important;
	}
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1023px) {
	.diag-workspace {
		grid-template-columns: 1fr;
	}
	.diag-preview {
		position: static;
		order: -1;
	}
}
@media (max-width: 767px) {
	.diag { padding: 16px 12px 40px; }
	.diag-hero { margin: -16px -12px 20px; }
	.diag-hero__bg { width: 100%; height: 220px; position: relative; object-position: center top; }
	.diag-hero__inner { grid-template-columns: 1fr; gap: 16px; padding: 24px 20px 20px; min-height: auto; }
	.diag-hero__bubble { display: none; }
	.diag-hero__stats { flex-direction: column; gap: 12px; }
	.diag-hero__steps-banner { padding: 16px 0; }
	.diag-hero__steps-banner-inner { flex-direction: column; gap: 16px; padding: 0 20px; }
	.diag-hero__steps-person { flex-direction: column; text-align: center; }
	.diag-hero__steps-list { flex-direction: column; gap: 8px; width: 100%; }
	.diag-hero__steps-item { flex-direction: row; gap: 10px; min-width: 0; width: 100%; padding: 10px 16px; }
	.diag-hero__steps-arrow { transform: rotate(90deg); }
	.diag-hero__steps-banner .diag-btn { width: 100%; justify-content: center; }
	.diag-progress__inner {
		grid-template-columns: 1fr;
	}
	.diag-progress__title {
		justify-content: center;
		padding: 14px 0;
		border-right: none;
		border-bottom: 1px solid var(--diag-line);
	}
	.diag-steps { padding: 12px 8px; }
	.diag-step__no { width: 26px; height: 26px; }
	.diag-step__label { font-size: 10px; }

	.diag-chat__messages { padding: 16px 14px 6px; max-height: 420px; }
	.diag-bubble { max-width: 88%; font-size: 13px; }
	.diag-input { padding: 12px 14px; grid-template-columns: 1fr 80px; }
	.diag-chat__notice { padding: 8px 14px 14px; flex-wrap: wrap; }

	.diag-result { padding: 22px 16px; }
	.diag-card { padding: 16px 18px; }
	.diag-card__head { flex-wrap: wrap; }
	.diag-card__match-score { min-width: auto; }
}