/* ── 예약·결제 진행과 확인할 수업 ──────────────────────── */
.booking-progress {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wa-space-s);
	padding-inline-start: var(--wa-space-l);
	color: var(--wa-color-text-quiet);
	font-size: var(--wa-font-size-s);
}
.booking-progress li {
	padding-inline-end: var(--wa-space-m);
}
.booking-progress .complete {
	color: var(--wa-color-success-on-quiet);
	font-weight: var(--wa-font-weight-semibold);
}
.booking-attention {
	container-type: inline-size;
	padding: var(--wa-space-m);
	margin-block: var(--wa-space-m);
	border: 1px solid var(--wa-color-warning-border-quiet);
	border-radius: var(--wa-border-radius-m);
	background: var(--sonub-surface);
}
.booking-attention .booking-attention-list {
	display: grid;
	gap: var(--wa-space-s);
	margin: 0;
	padding: 0;
	list-style: none;
}
.booking-attention h2 {
	margin: 0;
}
.booking-attention-heading {
	display: flex;
	align-items: start;
	gap: var(--wa-space-s);
}
.booking-attention-heading > div {
	min-inline-size: 0;
}
.booking-attention-heading p {
	margin: var(--wa-space-2xs) 0 0;
	color: var(--wa-color-text-quiet);
	font-size: var(--wa-font-size-s);
	line-height: 1.6;
}
.booking-attention-count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-inline-size: 1.75em;
	padding-inline: var(--wa-space-2xs);
	border-radius: var(--wa-border-radius-pill);
	background: var(--wa-color-warning-fill-quiet);
	color: var(--wa-color-warning-on-quiet);
	font-size: var(--wa-font-size-s);
}
.booking-attention-timezone {
	display: flex;
	align-items: center;
	gap: var(--wa-space-xs);
	margin-block: var(--wa-space-s);
	color: var(--wa-color-text-quiet);
	font-size: var(--wa-font-size-xs);
}
.booking-attention-card {
	display: grid;
	grid-template-columns: minmax(9rem, 1fr) minmax(10rem, 1fr) minmax(12rem, 1.4fr) auto;
	align-items: center;
	gap: var(--wa-space-m);
	min-inline-size: 0;
	padding: var(--wa-space-m);
	border: 1px solid var(--sonub-border);
	border-inline-start: 3px solid var(--wa-color-warning-fill-loud);
	border-radius: var(--wa-border-radius-m);
	background: var(--sonub-canvas);
	font-size: var(--wa-font-size-s);
	line-height: 1.5;
}
.booking-attention-card > div {
	display: grid;
	gap: var(--wa-space-xs);
	min-inline-size: 0;
	overflow-wrap: anywhere;
}
.booking-attention-identity h3 {
	margin: 0;
	font-size: var(--wa-font-size-m);
}
.booking-attention-identity > span,
.booking-attention-schedule > span:last-child,
.booking-attention-deadline,
.booking-attention-transaction {
	color: var(--wa-color-text-quiet);
}
.booking-attention .booking-date-time strong {
	font-weight: var(--wa-font-weight-bold);
}
.booking-attention-issue {
	display: flex;
	align-items: center;
	gap: var(--wa-space-xs);
	color: var(--wa-color-warning-on-quiet);
	font-weight: var(--wa-font-weight-bold);
}
.booking-attention-card[data-attention-issue='overdue'] {
	border-inline-start-color: var(--wa-color-danger-fill-loud);
}
.booking-attention-card[data-attention-issue='overdue'] .booking-attention-issue {
	color: var(--wa-color-danger-on-quiet);
}
.booking-attention-card[data-attention-issue='submitted'] {
	border-inline-start-color: var(--sonub-accent);
}
.booking-attention-card[data-attention-issue='submitted'] .booking-attention-issue {
	color: var(--sonub-accent);
}
.booking-attention .booking-attention-review {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--wa-space-xs);
	box-sizing: border-box;
	min-block-size: 2.75rem;
	padding: var(--wa-space-xs) var(--wa-space-s);
	border: 1px solid var(--sonub-border);
	border-radius: var(--wa-border-radius-m);
	background: var(--sonub-surface);
	color: var(--sonub-accent);
	font-weight: var(--wa-font-weight-semibold);
	text-decoration: none;
}
.booking-attention .booking-attention-review:hover {
	border-color: var(--sonub-accent);
	background: var(--sonub-accent-soft);
}
.booking-attention .booking-attention-review:focus-visible {
	outline: 2px solid var(--wa-color-focus);
	outline-offset: 2px;
}
@media (max-width: 1200px) {
	.booking-attention-card {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	}
}
@container (max-width: 54rem) {
	.booking-attention-card {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	}
}
@media (max-width: 600px) {
	.booking-attention-card {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--wa-space-s);
	}
}

/* Shared pre-booking teacher identity, including the standalone confirmation. */
.booking-class-summary .booking-summary-teacher {
	display: inline-flex;
	align-items: center;
	gap: var(--wa-space-s);
	max-inline-size: 100%;
	min-block-size: 2.75rem;
	color: var(--sonub-accent-ink);
	font-weight: var(--wa-font-weight-semibold);
	text-decoration: none;
}
.booking-summary-teacher > span[dir] {
	min-inline-size: 0;
	overflow-wrap: anywhere;
}
.booking-summary-teacher .teacher-avatar {
	flex: none;
	inline-size: 3rem;
	block-size: 3rem;
	border: 3px solid var(--wa-color-brand-fill-quiet);
	background: var(--wa-color-brand-fill-quiet);
	color: var(--sonub-accent-ink);
	font-size: calc(1.25rem * var(--wa-font-size-scale, 1));
}