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

.arv-app .screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

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

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

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

/* ---------- ステップ表示（バーではなくチップの並び） ---------- */
.arv-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; column-gap: 0.75rem; row-gap: 0.5rem; }
.arv-steps li { display: flex; align-items: center; gap: 0.75rem; }
.arv-step-chip {
	display: flex; align-items: center; gap: 0.5rem;
	min-height: 2.75rem;
	border: 0; background: none; padding: 0;
	font-family: inherit; font-size: 0.75rem; letter-spacing: 0.06em;
	color: color-mix(in srgb, var(--arv-stone) 50%, transparent);
	cursor: default;
	transition: color 300ms ease;
}
.arv-step-chip .num {
	display: flex; align-items: center; justify-content: center;
	height: 1.25rem; width: 1.25rem;
	border: 1px solid var(--arv-line); border-radius: 50%;
	font-size: 0.625rem;
	color: color-mix(in srgb, var(--arv-stone) 50%, transparent);
}
.arv-step-chip.is-current { color: var(--arv-sumi); }
.arv-step-chip.is-current .num { border-color: var(--arv-sumi); background: var(--arv-sumi); color: var(--arv-shell); }
.arv-step-chip.is-done { color: var(--arv-gold); cursor: pointer; }
.arv-step-chip.is-done .num { border-color: var(--arv-gold); color: var(--arv-gold); }
.arv-step-chip.is-done:hover { color: var(--arv-gold-deep); }
.arv-step-connector { height: 1px; width: 1rem; background: var(--arv-line); }
@media (min-width: 640px) { .arv-step-connector { width: 1.5rem; } }

.arv-conflict { margin-top: 2rem; border-left: 2px solid var(--arv-alert); background: rgb(180 84 74 / 0.06); padding: 1rem 1.25rem; font-size: 0.8125rem; line-height: 1.625; color: var(--arv-sumi); }

.arv-step-body { margin-top: 3rem; }
.arv-step { animation: arv-step-in 600ms var(--arv-expo); }
@keyframes arv-step-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.arv-step__title { font-family: var(--arv-mincho); font-size: clamp(1.5rem, 3vw, 2.25rem); line-height: 1.58; letter-spacing: 0.04em; font-weight: 400; margin: 0; }

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

/* ---------- メニュー ---------- */
.arv-categories { display: flex; flex-direction: column; gap: 2.25rem; margin-top: 3rem; }
.arv-category { border: 0; padding: 0; margin: 0; }
.arv-category__legend { display: flex; align-items: baseline; gap: 0.75rem; padding: 0; }
.arv-category__legend .ja { font-size: 0.875rem; letter-spacing: 0.06em; color: var(--arv-sumi); }
.arv-category__legend .en { font-family: var(--arv-display); font-size: 0.5625rem; letter-spacing: 0.32em; text-transform: uppercase; font-weight: 500; color: var(--arv-stone); }
.arv-menu-rows { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 1rem; }
.arv-menu-row {
	display: flex; align-items: flex-start; gap: 1rem;
	border: 1px solid var(--arv-line); padding: 1rem;
	cursor: pointer; transition: all 400ms var(--arv-quint);
}
.arv-menu-row:hover { border-color: var(--arv-stone); }
.arv-menu-row:has(input:checked) { border-color: var(--arv-gold); background: rgb(184 58 78 / 0.07); }
.arv-menu-row input { margin-top: 0.25rem; width: 1rem; height: 1rem; flex-shrink: 0; accent-color: var(--arv-gold); }
.arv-menu-row__body { flex: 1; min-width: 0; }
.arv-menu-row__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; column-gap: 1rem; }
.arv-menu-row__head .name { font-size: 0.9375rem; color: var(--arv-sumi); }
.arv-menu-row__head .price { font-size: 0.875rem; color: var(--arv-sumi); }
.arv-menu-row__desc { display: block; margin-top: 0.375rem; font-size: 0.75rem; line-height: 1.625; color: var(--arv-stone); }

/* ---------- 担当 ---------- */
.arv-stylist-rows { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 2.5rem; }
.arv-stylist-row {
	display: flex; width: 100%; align-items: center; gap: 1.25rem;
	border: 1px solid var(--arv-line); background: transparent; padding: 1.25rem;
	text-align: left; font-family: inherit; cursor: pointer;
	transition: all 400ms var(--arv-quint);
}
.arv-stylist-row:hover { border-color: var(--arv-stone); }
.arv-stylist-row[aria-pressed="true"] { border-color: var(--arv-gold); background: rgb(184 58 78 / 0.07); }
.arv-stylist-row img { width: 4rem; height: 4rem; flex-shrink: 0; object-fit: cover; }
.arv-stylist-row .avatar-any {
	display: flex; height: 4rem; width: 4rem; flex-shrink: 0;
	align-items: center; justify-content: center;
	border: 1px solid var(--arv-line); background: var(--arv-shell-2);
	font-size: 0.6875rem; color: var(--arv-stone);
}
.arv-stylist-row .body { min-width: 0; flex: 1; }
.arv-stylist-row .rank { display: block; font-family: var(--arv-display); font-size: 0.5625rem; letter-spacing: 0.32em; text-transform: uppercase; color: var(--arv-stone); }
.arv-stylist-row .name { display: block; margin-top: 0.125rem; font-family: var(--arv-mincho); font-size: 1.1875rem; line-height: 1.7; letter-spacing: 0.03em; font-weight: 500; }
.arv-stylist-row .desc { display: block; margin-top: 0.25rem; font-size: 0.8125rem; color: var(--arv-stone); }
.arv-stylist-row .fee { flex-shrink: 0; font-variant-numeric: tabular-nums; font-size: 0.8125rem; color: var(--arv-sumi); }

/* ---------- 日時 ---------- */
.arv-week-nav { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 2rem; }
.arv-week-nav p { margin: 0; font-variant-numeric: tabular-nums; font-size: 0.8125rem; color: var(--arv-sumi); }

.arv-grid-wrap { margin-top: 1.5rem; overflow-x: auto; }
.arv-grid { width: 100%; min-width: 38rem; border-collapse: collapse; }
.arv-grid th[scope="col"] { padding: 0.75rem 0.25rem; text-align: center; }
.arv-grid th[scope="col"] .d { display: block; font-variant-numeric: tabular-nums; font-size: 0.8125rem; color: var(--arv-sumi); font-weight: 400; }
.arv-grid th[scope="col"] .w { display: block; font-size: 0.6875rem; color: var(--arv-stone); font-weight: 400; }
.arv-grid th[scope="col"] .w.sun { color: var(--arv-alert); }
.arv-grid th[scope="col"] .w.sat { color: var(--arv-sage); }
.arv-grid tbody tr { border-top: 1px solid var(--arv-line); }
.arv-grid th[scope="row"] {
	position: sticky; left: 0; z-index: 1;
	background: var(--arv-shell);
	box-shadow: -1.5rem 0 0 var(--arv-shell);
	padding: 0.375rem 0.5rem 0.375rem 0;
	text-align: left; font-variant-numeric: tabular-nums;
	font-size: 0.75rem; font-weight: 400; color: var(--arv-stone);
}
.arv-grid td { padding: 0.125rem; text-align: center; }
.arv-slot {
	display: flex; height: 2rem; width: 100%;
	align-items: center; justify-content: center;
	border: 1px solid transparent; background: none;
	font-family: inherit; font-size: 0.8125rem;
	transition: all 300ms var(--arv-quint);
}
button.arv-slot { cursor: pointer; color: var(--arv-sumi); }
button.arv-slot:hover { border-color: var(--arv-gold); background: rgb(184 58 78 / 0.1); }
button.arv-slot[aria-pressed="true"] { border-color: var(--arv-gold); background: var(--arv-gold); color: #fff; }
span.arv-slot.tooShort { color: color-mix(in srgb, var(--arv-stone) 60%, transparent); }
span.arv-slot.taken { color: color-mix(in srgb, var(--arv-stone) 40%, transparent); }
span.arv-slot.past, span.arv-slot.closed { color: color-mix(in srgb, var(--arv-stone) 25%, transparent); }

.arv-legend { list-style: none; margin: 1.5rem 0 0; padding: 0; display: flex; flex-wrap: wrap; column-gap: 1.5rem; row-gap: 0.5rem; font-size: 0.75rem; color: var(--arv-stone); }
.arv-legend li { display: flex; align-items: center; gap: 0.5rem; }
.arv-legend .g.available { color: var(--arv-sumi); }
.arv-legend .g.tooShort { color: color-mix(in srgb, var(--arv-stone) 60%, transparent); }
.arv-legend .g.taken { color: color-mix(in srgb, var(--arv-stone) 40%, transparent); }
.arv-legend .g.closed { color: color-mix(in srgb, var(--arv-stone) 30%, transparent); }

.arv-selected-card { margin-top: 2rem; border: 1px solid var(--arv-gold); background: rgb(184 58 78 / 0.07); padding: 1.25rem 1.5rem; }
.arv-selected-card .label { margin: 0; font-family: var(--arv-display); font-size: 0.5625rem; letter-spacing: 0.32em; text-transform: uppercase; font-weight: 500; color: var(--arv-gold); }
.arv-selected-card .when { margin: 0.5rem 0 0; font-variant-numeric: tabular-nums; font-size: 1.0625rem; color: var(--arv-sumi); }
.arv-slot-lost { margin-top: 2rem; border-left: 2px solid var(--arv-alert); background: rgb(180 84 74 / 0.06); padding: 1rem 1.25rem; font-size: 0.8125rem; color: var(--arv-sumi); }

/* ---------- フォーム ---------- */
.arv-form { display: flex; flex-direction: column; gap: 1.5rem; margin-top: 2.5rem; }
.arv-field { border: 0; padding: 0; margin: 0; }
.arv-field label, .arv-field legend { display: block; font-size: 0.8125rem; letter-spacing: 0.06em; color: var(--arv-sumi); padding: 0; }
.arv-field .req { margin-left: 0.375rem; font-size: 0.6875rem; color: var(--arv-gold); }
.arv-field__hint { margin: 0.25rem 0 0; font-size: 0.6875rem; line-height: 1.8; letter-spacing: 0.08em; color: var(--arv-stone); }
.arv-input {
	display: block; width: 100%; margin-top: 0.625rem;
	min-height: 3.25rem; padding: 0.75rem 1rem;
	border: 1px solid var(--arv-line); background: transparent;
	color: var(--arv-sumi); font-family: inherit;
	font-size: 1rem; /* iOSの自動ズームを防ぐため16px */
	resize: vertical;
}
@media (min-width: 1024px) { .arv-input { font-size: 0.9375rem; } }
.arv-input:focus { border-color: var(--arv-gold); outline: none; }
.arv-input[aria-invalid="true"] { border-color: var(--arv-alert); }

.arv-visit-toggle { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.5rem; margin-top: 0.75rem; }
.arv-visit-btn {
	border: 1px solid var(--arv-line); background: transparent; color: var(--arv-sumi);
	padding: 0.875rem 1rem; font-family: inherit; font-size: 0.8125rem; cursor: pointer;
	transition: all 400ms var(--arv-quint);
}
.arv-visit-btn:hover { border-color: var(--arv-stone); }
.arv-visit-btn[aria-pressed="true"] { border-color: var(--arv-sumi); background: var(--arv-sumi); color: var(--arv-shell); }
.arv-first-note { margin: 0.625rem 0 0; font-size: 0.75rem; color: var(--arv-gold); }

.arv-errors { margin-top: 1.5rem; border-left: 2px solid var(--arv-alert); background: rgb(180 84 74 / 0.06); padding: 1rem 1.25rem; font-size: 0.8125rem; color: var(--arv-sumi); }
.arv-errors p { margin: 0.25rem 0; }

/* ---------- ボタン ---------- */
.arv-nav { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 3rem; }
.arv-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 0.625rem;
	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(--arv-quint);
	background: none;
}
.arv-btn--sm { min-height: 2.5rem; padding-inline: 1rem; font-size: 0.75rem; }
.arv-btn--solid { background: var(--arv-sumi); color: var(--arv-shell); }
.arv-btn--solid:hover { background: var(--arv-gold-deep); }
.arv-btn--gold { background: var(--arv-gold); color: #fff; }
.arv-btn--gold:hover { background: var(--arv-gold-deep); }
.arv-btn--outline { border-color: var(--arv-sumi); color: var(--arv-sumi); }
.arv-btn--outline:hover { background: var(--arv-sumi); color: var(--arv-shell); }
.arv-btn:disabled { opacity: 0.35; cursor: not-allowed; }
.arv-btn:disabled:hover { background: none; color: var(--arv-sumi); }
.arv-btn--solid:disabled:hover, .arv-btn--gold:disabled:hover { background: var(--arv-sumi); color: var(--arv-shell); }

/* ---------- 右カラム（ご予約内容） ---------- */
@media (min-width: 1024px) { .arv-summary-col { position: sticky; top: 8rem; align-self: start; } }
.arv-summary { border: 1px solid var(--arv-sumi); background: var(--arv-shell-2); }
.arv-summary__head { margin: 0; border-bottom: 1px solid var(--arv-line); padding: 1rem 1.5rem; font-size: 0.8125rem; letter-spacing: 0.06em; color: var(--arv-sumi); }
.arv-summary dl { margin: 0; padding-inline: 1.5rem; }
.arv-summary dl > div { display: grid; grid-template-columns: 4.5rem 1fr; gap: 0.75rem; padding: 0.875rem 0; border-top: 1px solid var(--arv-line); }
.arv-summary dl > div:first-child { border-top: 0; }
.arv-summary dt { font-size: 0.6875rem; line-height: 1.8; letter-spacing: 0.08em; color: var(--arv-stone); }
.arv-summary dd { margin: 0; font-size: 0.8125rem; line-height: 1.625; color: var(--arv-sumi); }
.arv-summary__foot { border-top: 1px solid var(--arv-sumi); padding: 1.25rem 1.5rem; }
.arv-summary__total { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.arv-summary__total .label { font-size: 0.8125rem; color: var(--arv-stone); }
.arv-summary__total .amount { font-variant-numeric: tabular-nums; font-size: 1.875rem; color: var(--arv-sumi); }
.arv-summary__discount { margin: 0.5rem 0 0; font-size: 0.75rem; color: var(--arv-gold); }
.arv-summary-note { margin: 1.25rem 0 0; font-size: 0.75rem; line-height: 1.8; letter-spacing: 0.08em; color: var(--arv-stone); }

/* ---------- 完了画面 ---------- */
.arv-done { animation: arv-in 700ms var(--arv-expo); max-width: 42rem; margin-inline: auto; }
@keyframes arv-in { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
.arv-done__head { display: flex; align-items: center; gap: 0.75rem; }
.arv-done__check { display: flex; height: 1.75rem; width: 1.75rem; align-items: center; justify-content: center; border-radius: 50%; background: var(--arv-gold); font-size: 0.75rem; color: #fff; }
.arv-done__title { font-family: var(--arv-mincho); font-size: clamp(1.5rem, 3vw, 2.25rem); line-height: 1.58; letter-spacing: 0.04em; font-weight: 400; margin: 0; }
.arv-done dl { margin: 2.5rem 0 0; border-top: 1px solid var(--arv-line); border-bottom: 1px solid var(--arv-line); }
.arv-done dl > div { display: grid; grid-template-columns: 5.5rem 1fr; gap: 1rem; padding: 1rem 0; border-top: 1px solid var(--arv-line); }
.arv-done dl > div:first-child { border-top: 0; }
.arv-done dt { font-size: 0.75rem; line-height: 1.8; letter-spacing: 0.08em; color: var(--arv-stone); padding-top: 0.125rem; }
.arv-done dd { margin: 0; font-size: 0.875rem; line-height: 1.625; color: var(--arv-sumi); }
.arv-done dd.price { font-variant-numeric: tabular-nums; font-size: 1.25rem; }
.arv-done__section { margin-top: 2.5rem; }
.arv-done__actions { margin-top: 2.5rem; display: flex; flex-wrap: wrap; gap: 0.75rem; }
.arv-done__note { margin: 2rem 0 0; font-size: 0.75rem; line-height: 1.8; letter-spacing: 0.08em; color: var(--arv-stone); }

/* ---------- 本番実装ではこう動きます（TechPanel） ---------- */
.arv-tech { border: 1px solid var(--arv-line); background: var(--arv-shell-2); }
.arv-tech__head { border-bottom: 1px solid var(--arv-line); padding: 1rem 1.5rem; }
@media (min-width: 768px) { .arv-tech__head { padding-inline: 2rem; } }
.arv-tech__head p { margin: 0; display: flex; align-items: center; gap: 0.625rem; font-size: 0.75rem; letter-spacing: 0.06em; color: var(--arv-stone); }
.arv-tech__i { display: flex; height: 1rem; width: 1rem; flex-shrink: 0; align-items: center; justify-content: center; border: 1px solid var(--arv-stone); border-radius: 50%; font-size: 0.5625rem; }
.arv-tech__body { padding: 1.75rem 1.5rem; }
@media (min-width: 768px) { .arv-tech__body { padding-inline: 2rem; } }
.arv-tech__label { margin: 0; font-family: var(--arv-display); font-size: 0.6875rem; letter-spacing: 0.32em; text-transform: uppercase; font-weight: 500; color: var(--arv-gold); }
.arv-tech ul { list-style: none; margin: 1.25rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.75rem; }
.arv-tech li { display: flex; gap: 0.75rem; font-size: 0.8125rem; line-height: 1.625; color: var(--arv-sumi); }
.arv-tech li::before { content: ""; flex-shrink: 0; margin-top: 0.625rem; height: 1px; width: 0.75rem; background: var(--arv-gold); }
.arv-tech dl { margin: 1.75rem 0 0; display: grid; gap: 1rem; border-top: 1px solid var(--arv-line); padding-top: 1.5rem; }
@media (min-width: 640px) { .arv-tech dl { grid-template-columns: repeat(2, 1fr); } }
.arv-tech dt { font-size: 0.6875rem; line-height: 1.8; letter-spacing: 0.08em; color: var(--arv-stone); }
.arv-tech dd { margin: 0.25rem 0 0; font-size: 0.8125rem; color: var(--arv-sumi); }