@charset "UTF-8";

* { box-sizing: border-box; }

html {
	min-height: 100%;
	background: #0c1e61;
}

body {
	margin: 0;
	color: #fff;
	font-family: Arial, "Malgun Gothic", sans-serif;
	-webkit-text-size-adjust: 100%;
}

[hidden] { display: none !important; }

button, a {
	-webkit-tap-highlight-color: transparent;
	touch-action: manipulation;
}

button { font: inherit; }

.site {
	position: relative;
	width: 100%;
	max-width: 800px;
	margin: 0 auto;
	background: #194bfa;
}

.event-page {
	position: relative;
	width: 100%;
}

.page-image {
	display: block;
	width: 100%;
	height: auto;
	border: 0;
}

/* AI 원본의 버튼 위에 겹치는 투명 클릭 영역. 이미지 비율에 맞춰 함께 줄어듭니다. */
.hotspot {
	position: absolute;
	z-index: 2;
	display: block;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	color: inherit;
	cursor: pointer;
}

.hotspot:hover { background: rgba(60, 220, 255, .12); }
.hotspot:active { background: rgba(37, 68, 190, .2); }

.hotspot:focus-visible {
	outline: 3px solid #00e3fb;
	outline-offset: 3px;
	background: rgba(0, 224, 255, .18);
}

/* 메인 원본 아트보드: 720 × 1547.38, 웹 이미지: 1600 × 3439. */
.image-navigation .hotspot {
	left: 23.2%;
	width: 53.6%;
	height: 4.85%;
	clip-path: polygon(4% 0, 100% 0, 100% 75%, 96% 100%, 0 100%, 0 25%);
}

.menu-welcome { top: 53.85%; }
.menu-schedule { top: 60.65%; }
.menu-location { top: 67.45%; }
.menu-seating { top: 74.25%; }

/* 행사장 안내 페이지의 지도 전체를 누르면 외부 지도 검색을 엽니다. */
.location-map {
	left: 9.4%;
	top: 32.45%;
	width: 81.4%;
	height: 18.25%;
	clip-path: polygon(5% 0, 95% 0, 100% 8%, 100% 92%, 95% 100%, 5% 100%, 0 92%, 0 8%);
}

.floating-button {
	position: fixed;
	z-index: 20;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	padding: 0;
	border: 1px solid rgba(123, 225, 255, .6);
	border-radius: 50%;
	background: rgba(255, 255, 255, .95);
	color: #2455db;
	box-shadow: 0 3px 12px rgba(2, 14, 75, .25);
	text-decoration: none;
	cursor: pointer;
}

.floating-button:hover { background: #c9faff; }

.floating-button:focus-visible {
	outline: 3px solid #00e3fb;
	outline-offset: 3px;
}

.home-button {
	top: max(12px, env(safe-area-inset-top));
	left: max(12px, calc((100vw - 800px) / 2 + 12px));
}

.music-button {
	right: max(14px, calc((100vw - 800px) / 2 + 14px));
	bottom: calc(30px + env(safe-area-inset-bottom));
	width: 50px;
	height: 50px;
}

.music-button.is-playing {
	background: #00dbed;
	color: #153c99;
}

.music-indicator {
	position: absolute;
	right: -1px;
	bottom: 1px;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: #214bd2;
}

.music-indicator::after {
	position: absolute;
	top: 5px;
	left: 7px;
	width: 0;
	height: 0;
	border-top: 4px solid transparent;
	border-bottom: 4px solid transparent;
	border-left: 5px solid #fff;
	content: "";
}

.is-playing .music-indicator::after {
	top: 5px;
	left: 6px;
	width: 6px;
	height: 8px;
	border: 0;
	border-right: 2px solid #fff;
	border-left: 2px solid #fff;
}

.music-label {
	position: absolute;
	top: calc(100% + 4px);
	right: -4px;
	padding: 3px 7px;
	border-radius: 10px;
	background: rgba(255, 255, 255, .96);
	color: #214bd2;
	font-size: 10px;
	font-weight: bold;
	line-height: 1.2;
	white-space: nowrap;
}

.music-status {
	position: fixed;
	z-index: 30;
	right: max(14px, calc((100vw - 800px) / 2 + 14px));
	bottom: calc(108px + env(safe-area-inset-bottom));
	max-width: min(290px, calc(100vw - 28px));
	margin: 0;
	padding: 12px 16px;
	border: 1px solid rgba(0, 219, 237, .4);
	border-radius: 12px;
	background: rgba(9, 26, 84, .96);
	color: #fff;
	font-size: 13px;
	line-height: 1.5;
}

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

.skip-link {
	position: fixed;
	z-index: 50;
	top: -100px;
	left: 12px;
	padding: 12px;
	background: #fff;
	color: #214bd2;
}

.skip-link:focus { top: 12px; }

.noscript-message {
	position: fixed;
	z-index: 40;
	right: 10px;
	bottom: 100px;
	left: 10px;
	max-width: 760px;
	margin: auto;
	padding: 16px;
	border: 2px solid #00dbed;
	background: #10216c;
}

/* 클릭 영역 확인 시 body에 class="debug-hotspots"를 임시로 추가하세요. */
.debug-hotspots .hotspot {
	clip-path: none;
	outline: 2px dashed #ff3b8a;
	background: rgba(255, 0, 100, .16);
}