* {
	box-sizing:border-box;
}

html,
body {
	margin:0;
	padding:0;
	width:100%;
	height:100%;
}

body {
	display:flex;
	align-items:center;
	justify-content:center;
	overflow:hidden;
	background:#e8edf1;
	font-family:Arial, "Noto Sans KR", sans-serif;
	color:#082f63;
}

button,
input,
textarea {
	font:inherit;
}

button {
	-webkit-tap-highlight-color:transparent;
}

.app {
	width:100%;
	max-width:133.333vh;
	margin:0 auto;
}

.stage {
	position:relative;
	width:100%;
	margin:0 auto;
	overflow:hidden;
	background:#fff;
	box-shadow:0 0 36px rgba(0, 34, 72, .12);
}

.stage-image {
	display:block;
	width:100%;
	height:auto;
	user-select:none;
	-webkit-user-drag:none;
	image-rendering:-webkit-optimize-contrast;
	transform:translateZ(0);
	backface-visibility:hidden;
}

.hotspots,
.video-layer,
.entry-form {
	position:absolute;
	inset:0;
}

.hotspots {
	z-index:20;
	pointer-events:none;
}

.hotspots .hotspot {
	pointer-events:auto;
}

.hotspot {
	position:absolute;
	display:block;
	margin:0;
	padding:0;
	overflow:hidden;
	border:0;
	border-radius:0;
	background:transparent;
	cursor:pointer;
	outline:0;
	-webkit-appearance:none;
	appearance:none;
}

.hotspot:focus-visible {
	box-shadow:inset 0 0 0 4px rgba(244, 139, 0, .92);
}

.hotspot > img {
	position:absolute;
	inset:0;
	display:block;
	width:100%;
	height:100%;
	object-fit:fill;
	pointer-events:none;
	user-select:none;
	-webkit-user-drag:none;
	image-rendering:-webkit-optimize-contrast;
	transform:translateZ(0);
	backface-visibility:hidden;
}

.hotspot > span {
	position:absolute;
	width:1px;
	height:1px;
	margin:-1px;
	padding:0;
	overflow:hidden;
	clip:rect(0, 0, 0, 0);
	white-space:nowrap;
	border:0;
}

.hotspot-active-image {
	opacity:0;
}

.state-control:hover .hotspot-active-image,
.state-control:focus .hotspot-active-image,
.state-control:active .hotspot-active-image,
.state-control.is-active .hotspot-active-image {
	opacity:1;
}

.static-control:hover > img,
.static-control:focus-visible > img {
	filter:brightness(1.04);
}

.static-control:active > img {
	filter:brightness(.96);
}

.hotspot:disabled {
	cursor:wait;
}

.entry-form {
	z-index:10;
}

.entry-input {
	position:absolute;
	left:33.0729%;
	width:46.5104%;
	height:5.4167%;
	padding:0 1.2%;
	border:0;
	border-radius:8px;
	outline:0;
	background:transparent;
	color:#082f63;
	font-size:clamp(16px, 2.5vh, 36px);
	font-weight:700;
	box-shadow:none;
}

.entry-input:focus {
	box-shadow:0 0 0 4px rgba(244, 139, 0, .5);
}

.entry-team {
	top:38.8194%;
}

.entry-manager {
	top:51.3194%;
}

.entry-submit {
	left:12.8125%;
	top:63.4028%;
	width:74.375%;
	height:10.1389%;
	z-index:2;
}

.entry-submit:disabled > img {
	opacity:.62;
	filter:grayscale(.25);
}

.entry-error {
	position:absolute;
	left:13%;
	top:71.2%;
	width:70%;
	margin:0;
	padding:.7em 1em;
	border-radius:8px;
	background:rgba(255, 255, 255, .94);
	color:#c81d2b;
	font-size:clamp(12px, 1.75vh, 24px);
	font-weight:700;
	text-align:center;
}

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

.video-layer {
	z-index:30;
}

.video-wrap {
	position:absolute;
	left:0;
	top:12.369%;
	width:100%;
	height:75%;
	background:#000;
}

.video-wrap video {
	display:block;
	width:100%;
	height:100%;
	background:#000;
	object-fit:cover;
}

.video-ui-overlay {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:auto;
	pointer-events:none;
}

.video-close {
	left:94.27%;
	top:1.04%;
	width:4.95%;
	height:6.6%;
	z-index:3;
}

.modal-layer {
	position:absolute;
	inset:0;
	z-index:60;
	display:flex;
	align-items:center;
	justify-content:center;
	padding:4%;
	overflow-y:auto;
	background:rgba(3, 23, 49, .72);
	backdrop-filter:blur(3px);
}

.modal-card {
	position:relative;
	width:min(72%, 920px);
	max-height:92%;
	padding:5% 5% 4%;
	overflow-y:auto;
	border:4px solid #f29100;
	border-radius:28px;
	background:#fff;
	box-shadow:0 25px 70px rgba(0, 0, 0, .35);
}

.modal-card h2 {
	margin:0 1.5em .55em 0;
	color:#082f63;
	font-size:2.8vw;
	line-height:1.35;
	word-break:keep-all;
}

.modal-close {
	position:absolute;
	top:.45em;
	right:.55em;
	width:1.35em;
	height:1.35em;
	padding:0;
	border:0;
	background:transparent;
	color:#8793a2;
	font-size:clamp(30px, 5vh, 60px);
	line-height:1;
	cursor:pointer;
}

.feedback-video-info {
	margin:0 0 1em;
	color:#ef7200;
	font-size:2vw;
	font-weight:700;
}

#feedbackText {
	display:block;
	width:100%;
	min-height:8em;
	padding:1em;
	resize:vertical;
	border:2px solid #c8d0d9;
	border-radius:14px;
	outline:0;
	background:#f8fafb;
	color:#142b46;
	font-size:2vw;
	line-height:1.55;
}

#feedbackText:focus {
	border-color:#f29100;
	box-shadow:0 0 0 3px rgba(242, 145, 0, .18);
}

.form-error {
	min-height:1.4em;
	margin:.65em 0 0;
	color:#c81d2b;
	font-size:clamp(12px, 1.65vh, 22px);
	font-weight:700;
}

.modal-actions {
	display:flex;
	gap:1em;
	justify-content:flex-end;
	margin-top:1.15em;
}

.button {
	min-width:8.5em;
	padding:.8em 1.25em;
	border:0;
	border-radius:999px;
	font-size:2vw;
	font-weight:800;
	cursor:pointer;
}

.button:disabled {
	opacity:.55;
	cursor:wait;
}

.button-primary {
	background:linear-gradient(90deg, #f39200, #e50019);
	color:#fff;
}

.button-secondary {
	background:#e5e8eb;
	color:#263d56;
}

.toast {
	position:absolute;
	left:50%;
	bottom:5%;
	z-index:90;
	max-width:76%;
	padding:.85em 1.5em;
	transform:translateX(-50%);
	border-radius:999px;
	background:rgba(3, 28, 59, .94);
	color:#fff;
	font-size:clamp(13px, 1.9vh, 25px);
	font-weight:700;
	text-align:center;
	box-shadow:0 10px 35px rgba(0, 0, 0, .24);
}

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

.is-hidden {
	display:none !important;
}

@media (max-aspect-ratio:4/3) {
	body {
		align-items:flex-start;
	}

	.app {
		margin-top:max(0px, env(safe-area-inset-top));
	}
}

@media (max-width:700px) {
	.modal-card {
		width:94%;
		padding:7% 6% 5%;
		border-width:2px;
		border-radius:18px;
	}

	.modal-actions {
		gap:.6em;
	}

	.button {
		min-width:0;
		flex:1;
	}
}