:root {
	--burgundy: #a52108;
	--burgundy-dark: #761507;
	--gold: #eebf77;
	--gold-light: #ffe0a8;
	--ink: #241015;
	--muted: #74666a;
	--line: #e7d7d5;
	--white: #ffffff;
}

* {
	box-sizing: border-box;
}

html {
	min-height: 100%;
	background: #a52108;
	-webkit-text-size-adjust: 100%;
}

body {
	min-width: 320px;
	min-height: 100%;
	margin: 0;
	background: #a52108;
	color: var(--ink);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", Arial, sans-serif;
}

body.modal-open {
	overflow: hidden;
}

button,
input {
	font: inherit;
}

button {
	border: 0;
}

picture,
img {
	display: block;
}

.sr-only {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

.invitation-shell {
	position: relative;
	width: 100%;
	max-width: 800px;
	min-height: 100vh;
	margin: 0 auto;
	background: var(--burgundy-dark);
	box-shadow: 0 0 48px rgba(0, 0, 0, 0.45);
}

.invitation-swiper {
	width: 100%;
	margin: 0;
	background: var(--burgundy-dark);
}

.invitation-slide {
	position: relative;
	display: block;
	width: 100%;
	height: auto;
	background: var(--burgundy-dark);
}

.invitation-slide picture {
	width: 100%;
}

.invitation-image {
	display: block;
	width: 100%;
	height: auto;
	margin: 0;
}

.rsvp-hotspot {
	position: absolute;
	top: 73.5%;
	left: 31.41%;
	z-index: 20;
	width: 37.07%;
	height: 4.84%;
	padding: 0;
	border: 0;
	border-radius: 18px;
	background: transparent;
	cursor: pointer;
	touch-action: manipulation;
	-webkit-tap-highlight-color: transparent;
}

.rsvp-hotspot:hover,
.rsvp-hotspot:focus-visible {
	background: rgba(255, 255, 255, 0.1);
	box-shadow: 0 0 0 4px rgba(255, 226, 174, 0.95), 0 0 24px rgba(255, 226, 174, 0.55);
	outline: 0;
}

.swiper-button-prev,
.swiper-button-next {
	--swiper-navigation-size: 34px;
	width: 44px;
	height: 64px;
	margin-top: -32px;
	padding: 0;
	border-radius: 0 12px 12px 0;
	background: rgba(40, 0, 10, 0.36);
	color: var(--gold-light);
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}

.swiper-button-next {
	border-radius: 12px 0 0 12px;
}

.swiper-button-prev:focus-visible,
.swiper-button-next:focus-visible {
	outline: 3px solid var(--gold-light);
	outline-offset: -3px;
}

.swiper-button-disabled {
	display: none !important;
}

.swiper-pagination {
	bottom: 14px !important;
}

.swiper-pagination-bullet {
	width: 9px;
	height: 9px;
	background: #ffffff;
	opacity: 0.45;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}

.swiper-pagination-bullet-active {
	background: var(--gold-light);
	opacity: 1;
}

.noscript-message {
	margin: 0;
	padding: 16px;
	background: #ffffff;
	color: #7c001d;
	font-size: 15px;
	text-align: center;
}

.modal[hidden] {
	display: none;
}

.modal {
	position: fixed;
	inset: 0;
	z-index: 10000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: max(18px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(18px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
}

.modal-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(24, 0, 7, 0.82);
	backdrop-filter: blur(4px);
}

.modal-dialog {
	position: relative;
	z-index: 1;
	width: min(100%, 540px);
	max-height: calc(100vh - 36px);
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 34px 34px 30px;
	border: 1px solid rgba(238, 191, 119, 0.8);
	border-radius: 22px;
	background: #fffaf6;
	box-shadow: 0 28px 80px rgba(0, 0, 0, 0.48);
	-webkit-overflow-scrolling: touch;
}

.modal-close {
	position: absolute;
	top: 10px;
	right: 12px;
	width: 42px;
	height: 42px;
	padding: 0;
	border-radius: 50%;
	background: transparent;
	color: #78102a;
	font-size: 34px;
	font-weight: 300;
	line-height: 40px;
	cursor: pointer;
}

.modal-close:hover,
.modal-close:focus-visible {
	background: #f3e3df;
	outline: 0;
}

.modal-heading {
	padding-right: 24px;
}

.modal-eyebrow {
	margin: 0 0 8px;
	color: #9d6d2c;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.1em;
}

.modal-heading h2 {
	margin: 0;
	color: var(--burgundy);
	font-size: clamp(24px, 5vw, 31px);
	line-height: 1.25;
	letter-spacing: -0.04em;
}

.modal-heading p:last-child {
	margin: 11px 0 0;
	color: var(--muted);
	font-size: 14px;
	line-height: 1.65;
	word-break: keep-all;
}

.rsvp-form {
	margin-top: 24px;
}

.form-field {
	margin: 0 0 17px;
	padding: 0;
	border: 0;
}

.form-field > label,
.form-field legend {
	display: block;
	margin: 0 0 8px;
	color: #4b202a;
	font-size: 14px;
	font-weight: 750;
}

.form-field > label span,
.form-field legend span {
	color: #be173c;
}

.form-field input[type="text"],
.form-field input[type="tel"] {
	width: 100%;
	height: 48px;
	padding: 0 14px;
	border: 1px solid #d9c7c5;
	border-radius: 10px;
	background: #ffffff;
	color: #261216;
	font-size: 16px;
	outline: 0;
	transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.form-field input[type="text"]:focus,
.form-field input[type="tel"]:focus {
	border-color: #a41436;
	box-shadow: 0 0 0 3px rgba(164, 20, 54, 0.14);
}

.form-field input[aria-invalid="true"] {
	border-color: #c51c40;
	box-shadow: 0 0 0 3px rgba(197, 28, 64, 0.12);
}

.attendance-options {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
}

.attendance-option {
	position: relative;
	cursor: pointer;
}

.attendance-option input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.attendance-option span {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 48px;
	border: 1px solid #d9c7c5;
	border-radius: 10px;
	background: #ffffff;
	color: #5a3039;
	font-size: 15px;
	font-weight: 750;
	transition: all 0.18s ease;
}

.attendance-option input:checked + span {
	border-color: var(--burgundy);
	background: var(--burgundy);
	color: #ffffff;
	box-shadow: 0 5px 14px rgba(120, 0, 29, 0.2);
}

.attendance-option input:focus-visible + span {
	outline: 3px solid rgba(164, 20, 54, 0.28);
	outline-offset: 2px;
}

.field-optional {
	color: #8a6c72;
	font-size: 12px;
	font-weight: 600;
}

.companion-notice {
	margin: 0 0 11px;
	padding: 12px 14px;
	border: 1px solid #ead4cb;
	border-radius: 9px;
	background: #fff5ed;
	color: #68464c;
	font-size: 13px;
	line-height: 1.55;
}

.companion-notice strong {
	color: var(--burgundy);
}

.companion-actions {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-top: 8px;
	color: #846c71;
	font-size: 11px;
	line-height: 1.4;
}

.companion-clear {
	flex: 0 0 auto;
	padding: 4px 8px;
	border-radius: 6px;
	background: #eee2de;
	color: #6e4e55;
	font-size: 11px;
	font-weight: 700;
	cursor: pointer;
}

.companion-clear:hover,
.companion-clear:focus-visible {
	background: #e2cfca;
	outline: 0;
}

.field-help {
	margin: 6px 0 0;
	color: #846c71;
	font-size: 11px;
	line-height: 1.45;
}

.companion-info-field input:disabled {
	background: #f1ecea;
	color: #9a898c;
	cursor: not-allowed;
}

.field-error {
	min-height: 0;
	margin: 6px 0 0;
	color: #b30e31;
	font-size: 12px;
	line-height: 1.4;
}

.field-error:empty {
	display: none;
}

.privacy-note {
	margin: 3px 0 0;
	padding: 12px 14px;
	border-radius: 9px;
	background: #f3e8e4;
	color: #73555b;
	font-size: 12px;
	line-height: 1.55;
}

.form-status {
	min-height: 22px;
	margin: 13px 0 0;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.5;
	text-align: center;
}

.form-status.is-error {
	color: #b30e31;
}

.form-status.is-success {
	color: #0c6b48;
}

.submit-button {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 54px;
	margin-top: 10px;
	padding: 0 18px;
	border-radius: 11px;
	background: linear-gradient(135deg, #8d0629, #630018);
	color: #ffffff;
	font-size: 17px;
	font-weight: 850;
	letter-spacing: -0.02em;
	box-shadow: 0 10px 24px rgba(107, 0, 26, 0.24);
	cursor: pointer;
	transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
}

.submit-button:hover {
	transform: translateY(-1px);
	box-shadow: 0 13px 28px rgba(107, 0, 26, 0.3);
}

.submit-button:focus-visible {
	outline: 3px solid rgba(164, 20, 54, 0.32);
	outline-offset: 3px;
}

.submit-button:disabled {
	cursor: wait;
	opacity: 0.7;
	transform: none;
}

.submit-loading {
	display: none;
}

.submit-button.is-loading .submit-label {
	display: none;
}

.submit-button.is-loading .submit-loading {
	display: inline;
}

.honeypot-field {
	position: absolute;
	left: -10000px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

@media (max-width: 560px) {
	.swiper-button-prev,
	.swiper-button-next {
		--swiper-navigation-size: 25px;
		width: 34px;
		height: 52px;
		margin-top: -26px;
	}

	.modal {
		align-items: flex-end;
		padding: 0;
	}

	.modal-dialog {
		width: 100%;
		max-height: calc(100vh - env(safe-area-inset-top));
		padding: 30px 20px calc(24px + env(safe-area-inset-bottom));
		border-right: 0;
		border-bottom: 0;
		border-left: 0;
		border-radius: 20px 20px 0 0;
	}

	.modal-heading p:last-child {
		font-size: 13px;
	}
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		scroll-behavior: auto !important;
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
	}
}