/*
 * 料金シミュレーター — washoku-demos の Simulator.tsx / SimulatorPage.tsx を忠実移植。
 * テーマのデザイントークンがあれば継承し、無ければAZUNOAブランドの既定値を使う。
 */
.aps-simulator {
	--aps-shell: var(--color-shell, #fffcfc);
	--aps-shell-2: var(--color-shell-2, #fdf1f0);
	--aps-sumi: var(--color-sumi, #2b2426);
	--aps-stone: var(--color-stone, #6f6669);
	--aps-gold: var(--color-gold, #b83a4e);
	--aps-gold-deep: var(--color-gold-deep, #932b3d);
	--aps-sage: var(--color-sage, #9a9096);
	--aps-line: var(--color-line, #f6e3e1);
	--aps-mincho: var(--font-mincho, "Shippori Mincho", serif);
	--aps-display: var(--font-display, "Cormorant Garamond", Georgia, serif);
	--aps-quint: cubic-bezier(0.22, 1, 0.36, 1);
	font-family: var(--font-sans, "Zen Kaku Gothic New", "Hiragino Sans", sans-serif);
	color: var(--aps-sumi);
	font-size: 0.9375rem;
	line-height: 1.9;
}

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

.aps-caption { margin: 0.5rem 0 0; font-size: 0.75rem; line-height: 1.8; letter-spacing: 0.08em; color: var(--aps-stone); }
.aps-legend-lg { font-family: var(--aps-mincho); font-size: 1.1875rem; line-height: 1.7; letter-spacing: 0.03em; font-weight: 500; padding: 0; margin: 0; }

.aps-layout { display: grid; gap: 3rem; align-items: start; }
@media (min-width: 1024px) { .aps-layout { grid-template-columns: 1.15fr 0.85fr; gap: 4rem; } }

.aps-form { display: flex; flex-direction: column; gap: 3.5rem; }
.aps-field { border: 0; padding: 0; margin: 0; }

/* ---------- 髪の長さ ---------- */
.aps-length-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.5rem; margin-top: 1.5rem; }
@media (min-width: 640px) { .aps-length-grid { grid-template-columns: repeat(4, 1fr); } }
.aps-len-btn {
	border: 1px solid var(--aps-line);
	background: transparent;
	color: var(--aps-sumi);
	padding: 1rem 0.75rem;
	text-align: left;
	font-family: inherit;
	cursor: pointer;
	transition: all 400ms var(--aps-quint);
}
.aps-len-btn:hover { border-color: var(--aps-stone); }
.aps-len-btn .label { display: block; font-size: 0.875rem; }
.aps-len-btn .sub { display: block; margin-top: 0.125rem; font-size: 0.6875rem; color: var(--aps-stone); }
.aps-len-btn[aria-pressed="true"] { border-color: var(--aps-sumi); background: var(--aps-sumi); color: var(--aps-shell); }
.aps-len-btn[aria-pressed="true"] .sub { color: rgb(255 252 252 / 0.6); }

/* ---------- メニュー ---------- */
.aps-categories { display: flex; flex-direction: column; gap: 2.5rem; margin-top: 2rem; }
.aps-category { border: 0; padding: 0; margin: 0; }
.aps-category__legend { display: flex; align-items: baseline; gap: 0.75rem; padding: 0; }
.aps-category__legend .ja { font-size: 0.875rem; letter-spacing: 0.06em; color: var(--aps-sumi); }
.aps-category__legend .en { font-family: var(--aps-display); font-size: 0.6875rem; letter-spacing: 0.32em; text-transform: uppercase; font-weight: 500; color: var(--aps-stone); }

.aps-menu-rows { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 1rem; }
.aps-menu-row {
	display: flex;
	align-items: flex-start;
	gap: 1rem;
	border: 1px solid var(--aps-line);
	padding: 1rem;
	cursor: pointer;
	transition: all 400ms var(--aps-quint);
}
.aps-menu-row:hover { border-color: var(--aps-stone); }
.aps-menu-row:has(input:checked) { border-color: var(--aps-gold); background: rgb(184 58 78 / 0.07); }
.aps-menu-row input { margin-top: 0.25rem; width: 1rem; height: 1rem; flex-shrink: 0; accent-color: var(--aps-gold); }
.aps-menu-row__body { flex: 1; min-width: 0; }
.aps-menu-row__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; column-gap: 1rem; }
.aps-menu-row__head .name { font-size: 0.9375rem; color: var(--aps-sumi); }
.aps-menu-row__head .price { font-size: 0.875rem; color: var(--aps-sumi); }
.aps-menu-row__desc { display: block; margin-top: 0.375rem; font-size: 0.75rem; line-height: 1.625; color: var(--aps-stone); }
.aps-menu-row__meta { display: flex; flex-wrap: wrap; column-gap: 1rem; row-gap: 0.25rem; margin-top: 0.5rem; font-size: 0.6875rem; color: var(--aps-stone); }
.aps-menu-row__meta .idle { color: var(--aps-gold); }
.aps-menu-row__meta .fills { color: var(--aps-sage); }

/* ---------- 指名 ---------- */
.aps-rank-grid { display: grid; grid-template-columns: 1fr; gap: 0.5rem; margin-top: 1.5rem; }
@media (min-width: 640px) { .aps-rank-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .aps-rank-grid { grid-template-columns: repeat(3, 1fr); } }
.aps-rank-btn {
	display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem;
	border: 1px solid var(--aps-line);
	background: transparent;
	color: var(--aps-sumi);
	padding: 0.875rem 1rem;
	font-family: inherit;
	cursor: pointer;
	transition: all 400ms var(--aps-quint);
}
.aps-rank-btn:hover { border-color: var(--aps-stone); }
.aps-rank-btn .label { font-size: 0.8125rem; }
.aps-rank-btn .amount { font-size: 0.8125rem; }
.aps-rank-btn[aria-pressed="true"] { border-color: var(--aps-sumi); background: var(--aps-sumi); color: var(--aps-shell); }

/* ---------- 割引 ---------- */
.aps-discount-rows { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 1.5rem; }
.aps-discount-row {
	display: flex; align-items: center; justify-content: space-between; gap: 1rem;
	border: 1px solid var(--aps-line);
	padding: 1rem;
	cursor: pointer;
	transition: all 400ms var(--aps-quint);
}
.aps-discount-row:hover { border-color: var(--aps-stone); }
.aps-discount-row:has(input:checked) { border-color: var(--aps-gold); background: rgb(184 58 78 / 0.07); }
.aps-discount-row .title { display: block; font-size: 0.9375rem; color: var(--aps-sumi); }
.aps-discount-row .sub { display: inline; font-size: 0.75rem; line-height: 1.8; letter-spacing: 0.08em; color: var(--aps-stone); }
.aps-discount-row input { width: 1rem; height: 1rem; flex-shrink: 0; accent-color: var(--aps-gold); }

/* ---------- 結果パネル ---------- */
@media (min-width: 1024px) { .aps-results-col { position: sticky; top: 8rem; align-self: start; } }
.aps-results { border: 1px solid var(--aps-sumi); background: var(--aps-shell-2); }

.aps-results__head { border-bottom: 1px solid var(--aps-line); padding: 2rem 1.75rem; }
.aps-eyebrow { margin: 0; font-family: var(--aps-display); font-size: 0.6875rem; letter-spacing: 0.32em; text-transform: uppercase; font-weight: 500; color: var(--aps-stone); }
.aps-empty-note { margin: 1.25rem 0 0; font-size: 0.875rem; color: var(--aps-stone); }
.aps-total { margin: 1rem 0 0; font-variant-numeric: tabular-nums; font-size: 2.25rem; line-height: 1; color: var(--aps-sumi); }
@media (min-width: 768px) { .aps-total { font-size: 3rem; } }
.aps-time { margin: 1rem 0 0; display: flex; align-items: baseline; gap: 0.625rem; font-size: 0.9375rem; color: var(--aps-sumi); }
.aps-time .en { font-family: var(--aps-display); font-size: 0.5625rem; letter-spacing: 0.32em; text-transform: uppercase; font-weight: 500; color: var(--aps-stone); }
.aps-time .val { font-variant-numeric: tabular-nums; }

.aps-lines { margin: 0; padding-inline: 1.75rem; }
.aps-lines > div { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: 0.875rem 0; border-top: 1px solid var(--aps-line); }
.aps-lines > div:first-child { border-top: 0; }
.aps-lines dt { font-size: 0.8125rem; color: var(--aps-sumi); }
.aps-lines dt .sub { margin-left: 0.5rem; font-size: 0.6875rem; color: var(--aps-stone); }
.aps-lines dd { margin: 0; flex-shrink: 0; font-variant-numeric: tabular-nums; font-size: 0.8125rem; color: var(--aps-sumi); }
.aps-lines .is-discount dt, .aps-lines .is-discount dd { color: var(--aps-gold); }

.aps-duration-box { margin: 1.5rem 1.75rem; border: 1px solid var(--aps-line); background: var(--aps-shell); padding: 1.25rem; }
.aps-duration-box__label { margin: 0; font-family: var(--aps-display); font-size: 0.5625rem; letter-spacing: 0.32em; text-transform: uppercase; font-weight: 500; color: var(--aps-stone); }
.aps-duration-box dl { margin: 0.875rem 0 0; display: flex; flex-direction: column; gap: 0.375rem; font-size: 0.75rem; }
.aps-duration-box dl > div { display: flex; justify-content: space-between; gap: 0.75rem; }
.aps-duration-box dt { color: var(--aps-stone); }
.aps-duration-box dd { margin: 0; font-variant-numeric: tabular-nums; color: var(--aps-sumi); }
.aps-duration-box .saved dt, .aps-duration-box .saved dd { color: var(--aps-gold); }
.aps-duration-box .final { border-top: 1px solid var(--aps-line); padding-top: 0.5rem; }
.aps-duration-box .final dt { color: var(--aps-sumi); }
.aps-duration-note { margin: 0.875rem 0 0; font-size: 0.6875rem; line-height: 1.625; color: var(--aps-stone); }
.aps-slot-note { margin: 0.625rem 0 0; font-size: 0.6875rem; color: var(--aps-stone); }

.aps-cta { display: flex; flex-direction: column; gap: 0.5rem; padding: 0 1.75rem 2rem; }
.aps-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(--aps-quint);
	background: none;
}
.aps-btn--solid { background: var(--aps-sumi); color: var(--aps-shell); }
.aps-btn--solid:hover { background: var(--aps-gold-deep); }
.aps-btn--outline { border-color: var(--aps-sumi); color: var(--aps-sumi); }
.aps-btn--outline:hover { background: var(--aps-sumi); color: var(--aps-shell); }

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

/* ---------- 下部の「なぜ速いか」3カラム ---------- */
.aps-why { background: var(--aps-shell-2); margin-top: 6rem; }
@media (min-width: 768px) { .aps-why { margin-top: 8rem; } }
.aps-why__inner { display: grid; gap: 2.5rem; padding-block: 4rem; }
@media (min-width: 768px) { .aps-why__inner { grid-template-columns: repeat(3, 1fr); padding-block: 5rem; } }
.aps-why__title { font-family: var(--aps-mincho); font-size: 1.1875rem; line-height: 1.7; letter-spacing: 0.03em; font-weight: 500; margin: 0.75rem 0 0; }
.aps-why__body { margin: 0.75rem 0 0; font-size: 0.8125rem; line-height: 2; color: var(--aps-stone); }

/* ---------- メニュー一覧ページ（/menu/） ---------- */
.aps-menu-page { --aps-shell: var(--color-shell, #fffcfc); }