/*
 * 髪のお悩み診断 — washoku-demos の Diagnosis.tsx / DiagnosisPage.tsx を忠実移植。
 * テーマのデザイントークンがあれば継承し、無ければAZUNOAブランドの既定値を使う。
 */
.ahd-app {
	--ahd-shell: var(--color-shell, #fffcfc);
	--ahd-shell-2: var(--color-shell-2, #fdf1f0);
	--ahd-sumi: var(--color-sumi, #2b2426);
	--ahd-stone: var(--color-stone, #6f6669);
	--ahd-gold: var(--color-gold, #b83a4e);
	--ahd-gold-deep: var(--color-gold-deep, #932b3d);
	--ahd-line: var(--color-line, #f6e3e1);
	--ahd-mincho: var(--font-mincho, "Shippori Mincho", serif);
	--ahd-display: var(--font-display, "Cormorant Garamond", Georgia, serif);
	--ahd-quint: cubic-bezier(0.22, 1, 0.36, 1);
	--ahd-expo: cubic-bezier(0.16, 1, 0.3, 1);
	font-family: var(--font-sans, "Zen Kaku Gothic New", "Hiragino Sans", sans-serif);
	color: var(--ahd-sumi);
	font-size: 0.9375rem;
	line-height: 1.9;
}

.ahd-page-head { max-width: 48rem; margin-bottom: 3rem; }
@media (min-width: 768px) { .ahd-page-head { margin-bottom: 4rem; } }
.ahd-page-lead { margin: 1.75rem 0 0; font-size: 0.9375rem; line-height: 2; color: var(--ahd-stone); }

/* ---------- 進捗（バーではなく1pxのヘアライン） ---------- */
.ahd-progress { display: flex; align-items: center; gap: 1.25rem; }
.ahd-progress__track { height: 1px; flex: 1; background: var(--ahd-line); }
.ahd-progress__fill { height: 1px; width: 0%; background: var(--ahd-gold); transition: width 700ms var(--ahd-quint); }
.ahd-progress__label { flex-shrink: 0; margin: 0; font-variant-numeric: tabular-nums; font-size: 0.75rem; color: var(--ahd-stone); }

/* ---------- 設問 ---------- */
.ahd-step { margin-top: 3rem; animation: ahd-step-in 600ms var(--ahd-expo); }
@keyframes ahd-step-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

.ahd-question { font-family: var(--ahd-mincho); font-size: clamp(2rem, 4.5vw, 3.5rem); line-height: 1.45; letter-spacing: 0.04em; font-weight: 400; margin: 0; }
.ahd-hint { margin: 1rem 0 0; font-size: 0.75rem; line-height: 1.8; letter-spacing: 0.08em; color: var(--ahd-stone); }

.ahd-options { display: grid; gap: 0.75rem; margin-top: 2.5rem; grid-template-columns: 1fr; }
.ahd-options.is-2col { grid-template-columns: 1fr; }
.ahd-options.is-4col { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 640px) {
	.ahd-options.is-2col { grid-template-columns: repeat(2, 1fr); }
	.ahd-options.is-3col { grid-template-columns: repeat(2, 1fr); }
	.ahd-options.is-4col { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 1024px) { .ahd-options.is-3col { grid-template-columns: repeat(3, 1fr); } }

.ahd-option {
	overflow: hidden;
	border: 1px solid var(--ahd-line);
	background: transparent;
	text-align: left;
	font-family: inherit;
	cursor: pointer;
	padding: 0;
	transition: all 400ms var(--ahd-quint);
}
.ahd-option:hover { border-color: var(--ahd-stone); background: var(--ahd-shell-2); }
.ahd-option__media { display: block; overflow: hidden; }
.ahd-option__media img { display: block; width: 100%; aspect-ratio: 16/9; object-fit: cover; transition: transform 700ms var(--ahd-quint); }
.ahd-option:hover .ahd-option__media img { transform: scale(1.05); }
.ahd-option__body { display: block; padding: 1rem 1.25rem; }
.ahd-option__body .label { display: block; font-size: 0.875rem; line-height: 1.375; color: var(--ahd-sumi); }
.ahd-option__body .sub { display: block; margin-top: 0.25rem; font-size: 0.6875rem; color: var(--ahd-stone); }

.ahd-back {
	position: relative;
	display: inline-block;
	margin-top: 3rem;
	padding: 0 0 2px;
	background: none;
	border: 0;
	font-family: inherit;
	font-size: 0.8125rem;
	color: var(--ahd-stone);
	cursor: pointer;
}
.ahd-back::after { content: ""; position: absolute; inset-inline: 0; bottom: 0; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform 500ms var(--ahd-quint); }
.ahd-back:hover::after { transform: scaleX(1); }

/* ---------- 結果 ---------- */
.ahd-result { animation: ahd-in 700ms var(--ahd-expo); }
@keyframes ahd-in { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }

.ahd-result-layout { display: grid; gap: 3rem; }
@media (min-width: 1024px) { .ahd-result-layout { grid-template-columns: 1.1fr 0.9fr; gap: 4rem; } }

.ahd-eyebrow { margin: 0; font-family: var(--ahd-display); font-size: 0.6875rem; letter-spacing: 0.32em; text-transform: uppercase; font-weight: 500; color: var(--ahd-gold); }
.ahd-result__title { font-family: var(--ahd-mincho); font-size: clamp(2rem, 4.5vw, 3.5rem); line-height: 1.45; letter-spacing: 0.04em; font-weight: 400; margin: 1rem 0 0; }
.ahd-result__lead { margin: 1.5rem 0 0; font-size: 0.9375rem; line-height: 2; color: var(--ahd-stone); }

.ahd-subhead { font-family: var(--ahd-mincho); font-size: 1.1875rem; line-height: 1.7; letter-spacing: 0.03em; font-weight: 500; margin: 0; }

.ahd-reasons { margin-top: 3rem; }
.ahd-reasons ul { list-style: none; margin: 1.25rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 1rem; }
.ahd-reasons li { display: flex; gap: 1rem; font-size: 0.875rem; line-height: 2; color: var(--ahd-stone); }
.ahd-reasons li::before { content: ""; flex-shrink: 0; margin-top: 0.9rem; height: 1px; width: 1rem; background: var(--ahd-gold); }

.ahd-cautions { margin-top: 2.5rem; border-left: 2px solid #b4544a; background: var(--ahd-shell-2); padding: 1.5rem; }
.ahd-cautions__label { margin: 0; font-size: 0.75rem; letter-spacing: 0.08em; color: #b4544a; }
.ahd-cautions ul { list-style: none; margin: 0.75rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.625rem; }
.ahd-cautions li { font-size: 0.8125rem; line-height: 2; color: var(--ahd-sumi); }

.ahd-near { margin-top: 3.5rem; }
.ahd-near-grid { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.75rem; }
@media (min-width: 768px) { .ahd-near-grid { gap: 1.25rem; } }
.ahd-near-grid a { display: block; text-decoration: none; color: inherit; }
.ahd-near-grid .media { display: block; overflow: hidden; }
.ahd-near-grid img { display: block; width: 100%; aspect-ratio: 3/4; object-fit: cover; transition: transform 700ms var(--ahd-quint); }
.ahd-near-grid a:hover img { transform: scale(1.04); }
.ahd-near-grid p { margin: 0.625rem 0 0; font-size: 0.75rem; line-height: 1.375; color: var(--ahd-sumi); }

/* ---------- 右カラム（追従） ---------- */
@media (min-width: 1024px) { .ahd-side { position: sticky; top: 8rem; align-self: start; } }

.ahd-plan-card { border: 1px solid var(--ahd-sumi); background: var(--ahd-shell-2); }
.ahd-plan-card__head { margin: 0; border-bottom: 1px solid var(--ahd-line); padding: 1rem 1.75rem; font-size: 0.8125rem; letter-spacing: 0.06em; color: var(--ahd-sumi); }
.ahd-plan-card ul { list-style: none; margin: 0; padding-inline: 1.75rem; }
.ahd-plan-card li { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: 0.875rem 0; border-top: 1px solid var(--ahd-line); font-size: 0.8125rem; color: var(--ahd-sumi); }
.ahd-plan-card li:first-child { border-top: 0; }
.ahd-plan-card li .price { font-variant-numeric: tabular-nums; }
.ahd-plan-card__foot { border-top: 1px solid var(--ahd-sumi); padding: 1.25rem 1.75rem; }
.ahd-plan-card__row { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.ahd-plan-card__row + .ahd-plan-card__row { margin-top: 0.5rem; }
.ahd-plan-card__row .label { font-size: 0.8125rem; color: var(--ahd-stone); }
.ahd-plan-card__row .total { font-variant-numeric: tabular-nums; font-size: 1.5rem; color: var(--ahd-sumi); }
.ahd-plan-card__row .dur { font-variant-numeric: tabular-nums; font-size: 0.875rem; color: var(--ahd-sumi); }
.ahd-plan-card__note { margin: 0.75rem 0 0; font-size: 0.6875rem; line-height: 1.8; letter-spacing: 0.08em; color: var(--ahd-stone); }

.ahd-stylist-card { margin-top: 1.5rem; border: 1px solid var(--ahd-line); padding: 1.5rem; }
.ahd-stylist-card__link { display: flex; align-items: center; gap: 1.25rem; margin-top: 1rem; text-decoration: none; color: inherit; }
.ahd-stylist-card__link img { width: 5rem; height: 5rem; flex-shrink: 0; object-fit: cover; }
.ahd-stylist-card__rank { display: block; font-family: var(--ahd-display); font-size: 0.5625rem; letter-spacing: 0.32em; text-transform: uppercase; color: var(--ahd-stone); }
.ahd-stylist-card__name { display: block; margin-top: 0.25rem; font-family: var(--ahd-mincho); font-size: 1.1875rem; line-height: 1.7; letter-spacing: 0.03em; font-weight: 500; }
.ahd-stylist-card__link:hover .ahd-stylist-card__name { color: var(--ahd-gold); }
.ahd-stylist-card__title { display: block; margin-top: 0.25rem; font-size: 0.75rem; line-height: 1.375; color: var(--ahd-stone); }
.ahd-stylist-card__specialties { margin: 1rem 0 0; border-top: 1px solid var(--ahd-line); padding-top: 1rem; font-size: 0.75rem; line-height: 1.625; color: var(--ahd-stone); }

.ahd-cta { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 1.5rem; }
.ahd-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 0.625rem;
	width: 100%; min-height: 3.25rem; padding-inline: 2rem;
	font-family: inherit; font-size: 0.8125rem; letter-spacing: 0.16em;
	border: 1px solid transparent; cursor: pointer; text-decoration: none;
	transition: all 400ms var(--ahd-quint);
	background: none;
}
.ahd-btn--solid { background: var(--ahd-sumi); color: var(--ahd-shell); }
.ahd-btn--solid:hover { background: var(--ahd-gold-deep); }
.ahd-btn--outline { border-color: var(--ahd-sumi); color: var(--ahd-sumi); }
.ahd-btn--outline:hover { background: var(--ahd-sumi); color: var(--ahd-shell); }

.ahd-footer-note { margin: 1.25rem 0 0; font-size: 0.75rem; line-height: 1.8; letter-spacing: 0.08em; color: var(--ahd-stone); }