/* Shared booking dialog appearance: creation and reservation status (SSOT 4/8/11). */
/* 창의 위치·스크롤·테두리는 Web Awesome의 실제 dialog/body가 맡는다. */
wa-dialog[data-booking-shell] { display: contents !important; --width: 36rem; --spacing: 0; --show-duration: 0ms; --hide-duration: 0ms; }
wa-dialog[data-booking-shell]:not([open]), wa-dialog[data-booking-shell]:not(:defined) { display: none !important; }
wa-dialog[data-booking-shell]::part(dialog) { inline-size: min(var(--width), calc(100vw - 2rem)); max-inline-size: calc(100vw - 2rem); max-block-size: calc(100dvh - 2rem); padding: 0; border: 1px solid var(--sonub-border); border-radius: var(--sonub-radius-panel); background: var(--sonub-surface); color: var(--sonub-ink); box-shadow: var(--sonub-shadow-card); }
wa-dialog[data-booking-shell]::part(body) { display: grid; min-inline-size: 0; padding: 0; overscroll-behavior: contain; }
wa-dialog.book-dialog:has([data-book-popup]) { --width: 52rem; }
wa-dialog.booking-cancel-dialog { --width: 42rem; }
wa-dialog:is(.booking-actions-dialog, .payer-reputation-dialog) { --width: 32rem; }
wa-dialog.payer-reputation-dialog::part(body), wa-dialog[data-booking-shell]:has(> #booking-blocked-title)::part(body) { padding: var(--wa-space-l); }
wa-dialog.booking-actions-dialog::part(body), wa-dialog.booking-cancel-dialog::part(body) { grid-template-rows: auto minmax(0, 1fr) auto; overflow: hidden; }
:is(wa-dialog[data-booking-shell], .booking-cancellation-details, .booking-resource-dialog) { --show-duration: 0ms; --hide-duration: 0ms; }
:is(wa-dialog[data-booking-shell], .booking-cancellation-details, .booking-resource-dialog)::part(dialog) { animation: none !important; transition: none !important; }
#form-confirmation { --show-duration: 0ms; --hide-duration: 0ms; }
#form-confirmation::part(dialog) { animation: none !important; transition: none !important; }
.booking-dialog-heading {
	display: flex;
	align-items: center;
	gap: var(--wa-space-xs);
	padding: var(--wa-space-m) var(--wa-space-l);
	border-block-start: 3px solid var(--sonub-accent);
	border-block-end: 1px solid var(--sonub-border);
	background: linear-gradient(120deg, var(--wa-color-brand-fill-quiet), var(--sonub-surface));
}
.booking-dialog-heading h2 {
	display: flex;
	align-items: center;
	flex: 1;
	gap: var(--wa-space-s);
	min-inline-size: 0;
	margin: 0;
	font-size: calc(1.25rem * var(--wa-font-size-scale, 1));
	line-height: 1.3;
	overflow-wrap: anywhere;
}
.booking-dialog-heading h2 > :is(i, .sonub-icon-tile) {
	display: grid;
	place-items: center;
	flex: none;
	inline-size: 2.5rem;
	block-size: 2.5rem;
	border-radius: var(--wa-border-radius-m);
	background: var(--sonub-surface);
	color: var(--sonub-accent);
	font-size: var(--wa-font-size-l);
}
.booking-dialog-heading > .booking-dialog-close {
	flex: none;
	inline-size: 2.75rem;
	block-size: 2.75rem;
	padding: 0;
	border: 1px solid var(--sonub-border);
	border-radius: var(--wa-border-radius-m);
	background: var(--sonub-surface);
	color: var(--sonub-accent);
}
.booking-class-summary {
	grid-template-columns: fit-content(40%) minmax(0, 1fr);
	align-items: center;
	gap: 0 var(--wa-space-m);
	padding: var(--wa-space-m);
	border: 1px solid var(--sonub-border);
	border-radius: var(--wa-border-radius-l);
	background: var(--sonub-surface);
	box-shadow: var(--wa-shadow-s);
}
.booking-class-summary :is(dt, dd) {
	min-inline-size: 0;
	margin: 0;
	padding-block: var(--wa-space-s);
	line-height: 1.6;
	overflow-wrap: anywhere;
}
.booking-class-summary dt:not(:first-child),
.booking-class-summary dd:not(:nth-child(2)) {
	border-block-start: 1px solid var(--sonub-border);
}
.booking-class-summary dt {
	align-self: stretch;
	display: flex;
	align-items: center;
	gap: var(--wa-space-2xs);
	color: var(--sonub-muted);
	font-size: var(--wa-font-size-s);
	font-weight: var(--wa-font-weight-semibold);
}
.booking-class-summary dt > i {
	flex: none;
	inline-size: 1.25em;
	margin: 0;
	color: var(--sonub-accent);
	text-align: center;
}
.booking-class-summary dd {
	align-self: stretch;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.booking-class-summary :is([data-book-price], .booking-status-price > bdi) {
	color: var(--sonub-accent-ink);
	font-size: calc(1.25rem * var(--wa-font-size-scale, 1));
}
.booking-class-summary :is(.booking-teacher-name, .booking-learner-name) .teacher-avatar {
	flex: none;
	inline-size: 2.75rem;
	block-size: 2.75rem;
	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));
}
.booking-class-summary .booking-teacher-name .teacher-avatar-wide { box-sizing: content-box; inline-size: 4.5rem; block-size: auto; border-radius: var(--wa-border-radius-m); } /* 강사 사진 16:9(SSOT 3절 "사진") */
.booking-class-summary :is(.booking-teacher-name, .booking-learner-name) > span:not(.teacher-avatar) {
	color: var(--sonub-accent-ink);
	font-weight: var(--wa-font-weight-semibold);
}
.booking-popup-footer {
	background: var(--sonub-canvas);
}
/* 비싼 수업료 경고 — 1분에 기준 금액 이상인 유료 수업(SSOT 8절 "비싼 수업료 경고"). 가격도 빨갛게, 창이 열릴 때 한 번 흔들린다 */
.booking-expensive {
	margin-block: var(--wa-space-m) 0;
	border-width: 2px;
	font-size: var(--wa-font-size-m);
	animation: booking-expensive-shake 0.6s ease-in-out 0.2s 1 both;
}
.booking-expensive::part(icon) { font-size: calc(1.75rem * var(--wa-font-size-scale, 1)); }
.booking-expensive-title {
	display: block;
	font-size: var(--wa-font-size-l);
	font-weight: var(--wa-font-weight-bold);
}
.booking-expensive p { margin: var(--wa-space-2xs) 0 0; line-height: 1.6; }
form:has(> .booking-expensive:not([hidden])) .booking-class-summary [data-book-price] {
	color: var(--wa-color-danger-on-quiet);
	font-weight: var(--wa-font-weight-bold);
}
@keyframes booking-expensive-shake {
	0%, 100% { translate: 0; }
	20%, 60% { translate: -6px 0; }
	40%, 80% { translate: 6px 0; }
}
@media (prefers-reduced-motion: reduce) {
	.booking-expensive { animation: none; }
}
@media (min-width: 600px) {
	.booking-dialog-heading { padding: var(--wa-space-xs) var(--wa-space-m); }
}
@media (max-width: 599px) {
	.booking-dialog-heading { padding-inline: var(--wa-space-m); }
	.booking-class-summary { column-gap: var(--wa-space-s); }
	.booking-class-summary dt { flex-wrap: wrap; }
}