/* 예약 상태 창과 비공개 결제 증빙 — SSOT 8·11절 */
.pay-dialog > :is([data-book-body], .booking-details) {
	box-sizing: border-box;
	inline-size: 100%;
	min-inline-size: 0;
}
.booking-status {
	display: grid;
	gap: var(--wa-space-s);
}
.booking-section-heading {
	display: flex;
	align-items: center;
	gap: var(--wa-space-xs);
	margin: 0;
	font-size: var(--wa-font-size-s);
	font-weight: var(--wa-font-weight-semibold);
	color: var(--wa-color-text-quiet);
}
.booking-section-heading > i {
	color: var(--sonub-accent);
}
.booking-date-time {
	display: grid;
	gap: var(--wa-space-2xs);
}
.booking-date-time time {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wa-space-xs);
}
.booking-date-time strong {
	font-weight: var(--wa-font-weight-semibold);
}
.booking-timezone {
	font-size: var(--wa-font-size-xs);
	color: var(--wa-color-text-quiet);
}
.booking-status > .booking-transaction {
	padding: var(--wa-space-s);
	border: 1px solid var(--wa-color-surface-border);
	border-radius: var(--wa-border-radius-m);
	background: var(--wa-color-surface-lowered);
}
.booking-status-price > bdi {
	font-weight: var(--wa-font-weight-semibold);
}
.booking-status .booking-payment-info {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	inline-size: 2.5rem;
	block-size: 2.5rem;
	padding: 0;
	border: 0;
	border-radius: var(--wa-border-radius-circle);
	background: transparent;
	color: var(--sonub-accent);
	font-size: var(--wa-font-size-l);
}
.booking-status .booking-payment-info:hover {
	background: var(--wa-color-brand-fill-quiet);
}
.booking-status .booking-payment-info:focus-visible {
	outline: 2px solid var(--wa-color-focus);
	outline-offset: 2px;
}
.pay-dialog .booking-payment-not-received {
	border-color: var(--wa-color-danger-border-loud);
	background: var(--wa-color-danger-fill-loud);
	color: var(--wa-color-danger-on-loud);
}
.pay-dialog .booking-payment-not-received:hover {
	background: var(--wa-color-danger-fill-loud);
	filter: brightness(0.9);
}
.pay-dialog .booking-payment-not-received:focus-visible {
	outline: 2px solid var(--wa-color-focus);
	outline-offset: 2px;
}
.booking-status > .booking-payment-footer {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--wa-space-s);
}
.booking-status > .booking-payment-footer > form {
	margin: 0;
	margin-inline-end: auto;
}
.booking-status > .booking-payment-footer > wa-button {
	margin-inline-start: auto;
}
.booking-payment-details,
.payment-submission-history {
	--width: min(42rem, calc(100vw - 2rem));
}
.booking-payment-details::part(header) {
	border-block-end: 1px solid var(--sonub-border);
	background: var(--sonub-canvas);
}
.booking-payment-details::part(footer) {
	padding-block-start: var(--spacing);
	border-block-start: 1px solid var(--sonub-border);
	background: var(--sonub-canvas);
}
.booking-payment-title {
	display: flex;
	align-items: center;
	gap: var(--wa-space-s);
}
.booking-payment-title > i {
	color: var(--sonub-accent);
}
.booking-payment-details > p:first-of-type:not(.notice) {
	padding: var(--wa-space-m);
	border-inline-start: 3px solid var(--sonub-accent);
	border-radius: var(--wa-border-radius-s);
	background: var(--wa-color-brand-fill-quiet);
	line-height: 1.6;
}
.booking-payment-details > .profile-help {
	line-height: 1.6;
}
.booking-payment-details .booking-progress {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--wa-space-s);
	margin-block: 0 var(--wa-space-l);
	padding: 0;
	list-style: none;
	counter-reset: payment-stage;
}
.booking-payment-details .booking-progress li {
	display: grid;
	align-content: start;
	justify-items: start;
	gap: var(--wa-space-xs);
	padding: var(--wa-space-xs) 0 0;
	border-block-start: 3px solid var(--sonub-border);
	font-size: var(--wa-font-size-xs);
	counter-increment: payment-stage;
}
.booking-payment-details .booking-progress li::before {
	content: counter(payment-stage, decimal-leading-zero);
	font-weight: var(--wa-font-weight-semibold);
}
.booking-payment-details .booking-progress li > i {
	display: none;
}
.booking-payment-details .booking-progress .complete {
	border-color: var(--wa-color-success-fill-loud);
}
.booking-payment-details .booking-progress [aria-current='step'] {
	font-weight: var(--wa-font-weight-semibold);
}
.booking-payment-details .booking-payment-steps {
	display: grid;
	gap: var(--wa-space-m);
	margin: 0;
	padding: 0;
	list-style: none;
	line-height: 1.6;
}
.booking-payment-details .booking-payment-steps > li {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: var(--wa-space-s);
}
.booking-payment-step-icon {
	display: grid;
	place-items: center;
	inline-size: 2.75rem;
	block-size: 2.75rem;
	border-radius: var(--wa-border-radius-m);
	background: var(--wa-color-brand-fill-quiet);
	color: var(--sonub-accent);
	font-size: var(--wa-font-size-l);
}
.booking-payment-details .booking-payment-steps h3 {
	margin: 0 0 var(--wa-space-2xs);
	font-size: var(--wa-font-size-m);
	font-weight: var(--wa-font-weight-semibold);
}
.booking-payment-details .booking-payment-steps li:first-child h3::first-letter {
	text-transform: uppercase;
}
.booking-payment-details .booking-payment-steps p {
	margin: 0;
}
.booking-payment-details .booking-payment-steps .profile-help {
	margin-block-start: var(--wa-space-2xs);
	font-size: var(--wa-font-size-s);
}
.booking-payment-deadline {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: start;
	gap: var(--wa-space-s);
	margin-block-start: var(--wa-space-l);
	padding: var(--wa-space-s) var(--wa-space-m);
	border: 1px solid var(--wa-color-warning-border-quiet);
	border-radius: var(--wa-border-radius-m);
	background: var(--wa-color-warning-fill-quiet);
	color: var(--wa-color-warning-on-quiet);
	font-size: var(--wa-font-size-s);
	line-height: 1.6;
}
.booking-payment-deadline > i {
	margin-block-start: var(--wa-space-2xs);
}
.booking-payment-deadline > .notice {
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	color: inherit;
}
.booking-payment-details:not(:defined),
.payment-submission-history:not(:defined) {
	display: none;
}
.payment-submission-history li {
	overflow-wrap: anywhere;
}
.booking-details.booking-status > :is(h2, p, dl, div, menu),
.booking-status .transaction-editor {
	margin: 0;
}
.booking-status .teacher-facts dd,
.booking-status .booking-transaction,
.payment-proof-preview span {
	min-inline-size: 0;
	overflow-wrap: anywhere;
}
.booking-status .booking-status-price {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--wa-space-s);
}
.booking-status .booking-status-price a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--wa-space-2xs);
	box-sizing: border-box;
	min-block-size: 2.5rem;
	padding: var(--wa-space-2xs) var(--wa-space-xs);
	border: 1px solid var(--wa-color-brand-fill-loud);
	border-radius: var(--wa-border-radius-m);
	background: var(--wa-color-brand-fill-loud);
	color: var(--wa-color-brand-on-loud);
	font-weight: var(--wa-font-weight-semibold);
	text-decoration: none;
}
.booking-status .booking-status-price a:hover {
	filter: brightness(0.9);
}
.booking-status .transaction-editor .form {
	max-inline-size: none;
}
.booking-status .booking-transaction-entry {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: end;
	gap: var(--wa-space-s);
}
.booking-status .booking-transaction-entry label,
.booking-status .booking-transaction-entry input {
	min-inline-size: 0;
	inline-size: 100%;
	box-sizing: border-box;
}
.booking-status .booking-transaction-save {
	text-transform: uppercase;
	min-block-size: 2.75rem;
}
.booking-status .booking-transaction-actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wa-space-xs);
}
.booking-status .booking-transaction-edit-cancel {
	min-block-size: 2.75rem;
	border: 1px solid var(--sonub-accent);
	background: transparent;
	color: var(--sonub-accent);
}
@media (max-width: 600px) {
	.booking-payment-details .booking-progress {
		gap: var(--wa-space-xs);
	}
	.booking-payment-details {
		--spacing: var(--wa-space-m);
	}
	.booking-payment-details .booking-payment-steps > li > div {
		display: contents;
	}
	.booking-payment-details .booking-payment-steps h3 {
		align-self: center;
		margin: 0;
	}
	.booking-payment-details .booking-payment-steps p {
		grid-column: 1 / -1;
	}
	.booking-status .booking-transaction-entry:has([data-transaction-cancel]) {
		grid-template-columns: minmax(0, 1fr);
	}
}
.booking-status .booking-transaction-value {
	display: inline-flex;
	align-items: center;
	gap: var(--wa-space-xs);
	min-inline-size: 0;
	max-inline-size: 100%;
}
.booking-status .booking-transaction > form {
	margin: 0;
}
.booking-status .booking-transaction > wa-tooltip:not(:defined) {
	display: none;
}
.booking-status .booking-transaction-value code {
	min-inline-size: 0;
}
.booking-status .booking-transaction-value > button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	min-inline-size: 2.5rem;
	min-block-size: 2.5rem;
}
.booking-status .booking-transaction-edit:focus-visible {
	outline: 2px solid var(--wa-color-focus);
	outline-offset: 2px;
}
.booking-status > menu {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--wa-space-s);
}
.booking-status > menu .booking-status-cancel,
.booking-pending-actions > button {
	min-block-size: 2.75rem;
	padding: var(--wa-space-s) var(--wa-space-m);
	border: 1px solid var(--wa-color-danger-fill-loud);
	border-radius: var(--wa-border-radius-m);
	background: var(--sonub-surface);
	color: var(--wa-color-danger-on-quiet);
}
.booking-status > menu .booking-status-cancel:hover,
.booking-pending-actions > button:hover {
	background: var(--wa-color-danger-fill-quiet);
}
.booking-status :is(.booking-status-cancel, .booking-status-price a):focus-visible {
	outline: 2px solid var(--wa-color-focus);
	outline-offset: 2px;
}
.booking-status menu [data-pay-dialog] {
	margin-inline-end: auto;
}
/* Cancellation confirmation keeps the destructive action at the end (SSOT 9). */
.booking-cancel-dialog > form {
	inline-size: 100%;
}
.booking-cancel-dialog > form > menu {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: var(--wa-space-m);
}
.booking-cancel-dialog > form > menu > button[type='submit'] {
	margin-inline-start: auto;
	border-color: var(--wa-color-danger-fill-loud);
	background: var(--wa-color-danger-fill-loud);
	color: var(--wa-color-danger-on-loud);
}
.booking-status-error {
	color: var(--wa-color-danger-on-quiet);
}
.booking-status-error[hidden] {
	display: none;
}
.booking-status-error .form-errors {
	margin: 0;
	padding: 0;
	list-style: none;
}
.payment-proof-input {
	display: grid;
	gap: var(--wa-space-xs);
	padding: var(--wa-space-s);
	border: 1px dashed var(--wa-color-surface-border);
	border-radius: var(--wa-border-radius-m);
}
.payment-proof-input.is-dragging {
	border-color: var(--wa-color-brand-border-loud);
	background: var(--wa-color-brand-fill-quiet);
}
.payment-proof-drop {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--wa-space-xs);
	color: var(--wa-color-text-quiet);
	font-size: var(--wa-font-size-s);
}
.payment-proof-drop:focus-visible {
	outline: 2px solid var(--wa-color-focus);
	outline-offset: 2px;
	border-radius: var(--wa-border-radius-s);
}
.payment-proof-drop > i {
	color: var(--wa-color-text-link);
}
.payment-proof-notice {
	margin: 0;
	color: var(--wa-color-danger-on-quiet);
	font-size: var(--wa-font-size-s);
}
.payment-proof-preview {
	display: flex;
	align-items: center;
	gap: var(--wa-space-s);
	inline-size: fit-content;
	max-inline-size: 100%;
	margin-block: var(--wa-space-xs);
	padding: var(--wa-space-xs);
	border: 1px solid var(--wa-color-surface-border);
	border-radius: var(--wa-border-radius-m);
}
.payment-proof-preview img {
	display: block;
	inline-size: 5rem;
	block-size: 5rem;
	object-fit: contain;
	border-radius: var(--wa-border-radius-s);
	background: var(--wa-color-surface-lowered);
}
.payment-proof-preview > i {
	font-size: var(--wa-font-size-2xl);
	color: var(--wa-color-text-link);
}
.payment-proof-preview:focus-visible {
	outline: 2px solid var(--wa-color-focus);
	outline-offset: 2px;
}
button.payment-proof-preview {
	block-size: auto;
	background: var(--wa-color-surface-raised);
	color: var(--wa-color-text-link);
	font: inherit;
	text-align: start;
}
button.payment-proof-preview > i {
	font-size: var(--wa-font-size-m);
}
.payment-proof-dialog {
	--width: min(68rem, calc(100vw - 2rem));
}
.payment-proof-dialog:not(:defined) {
	display: none;
}
.payment-proof-dialog img {
	display: block;
	inline-size: 100%;
	max-block-size: calc(100dvh - 12rem);
	object-fit: contain;
}

/* Status dialogs use the same full-width heading, summary card and footer as Book a class. */
.pay-dialog:has(> .booking-status),
.book-dialog:has(> [data-book-body] > .booking-status) {
	inline-size: min(36rem, calc(100vw - 2rem));
	padding: 0;
	background: var(--sonub-surface);
}
.booking-details.booking-status {
	box-sizing: border-box;
	grid-template-columns: minmax(0, 1fr);
	padding: var(--wa-space-m);
}
.booking-details.booking-status > .booking-dialog-heading {
	position: sticky;
	inset-block-start: 0;
	z-index: 2;
	margin-block-start: calc(-1 * var(--wa-space-m));
	margin-inline: calc(-1 * var(--wa-space-m));
	margin-block-end: var(--wa-space-xs);
}
.booking-details.booking-status > :is(menu, .booking-payment-footer) {
	position: sticky;
	inset-block-end: 0;
	z-index: 1;
	margin-inline: calc(-1 * var(--wa-space-m));
	margin-block: var(--wa-space-xs) calc(-1 * var(--wa-space-m));
	padding: var(--wa-space-m);
	border-block-start: 1px solid var(--sonub-border);
	background: var(--sonub-canvas);
}
.booking-details.booking-status .booking-status-price {
	flex-direction: row;
	justify-content: flex-start;
}
.booking-status > menu > [data-book-close],
.booking-payment-footer > wa-button::part(base) {
	min-block-size: 2.75rem;
	padding: var(--wa-space-s) var(--wa-space-m);
	border: 1px solid var(--sonub-border);
	border-radius: var(--wa-border-radius-m);
	background: var(--sonub-surface);
	color: var(--sonub-accent);
}