@charset "UTF-8";

* {
	box-sizing: border-box;
}

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

body {
	margin: 0;
	color: #123d5b;
	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;
}

/* 이미지의 원래 비율을 유지합니다. 모든 페이지는 최대 800px입니다. */
.site {
	position: relative;
	width: 100%;
	max-width: 800px;
	margin: 0 auto;
	background: #a4e2f6;
}

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

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

/* 원본 이미지 위에 겹치는 투명 클릭 영역. 원본 파일은 변경하지 않습니다. */
.hotspot {
	position: absolute;
	z-index: 2;
	display: block;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 12px;
	background: transparent;
	color: inherit;
	cursor: pointer;
}

.hotspot:hover {
	background: rgba(255, 255, 255, .1);
}

.hotspot:active {
	background: rgba(0, 79, 116, .12);
}

.hotspot:focus-visible {
	outline: 3px solid #063a79;
	outline-offset: 2px;
	background: rgba(255, 255, 255, .22);
}

/* 원본 픽셀 좌표를 각 이미지의 실제 가로·세로로 나눈 %입니다.
   한글 main.webp: 1080 × 2414 / 영문 main_en.webp: 3000 × 6573.
   한글 메뉴 테두리 기준: x172, 너비736, 높이158; y914 / 1102 / 1289 / 1477 / 1665.
   좌표는 언어별로 분리하여 다른 이미지에 영향을 주지 않습니다. */
#ko-home .image-navigation .hotspot {
	left: 15.925926%;
	width: 68.148148%;
	height: 6.545153%;
}

#ko-home .menu-1 { top: 37.862469%; }
#ko-home .menu-2 { top: 45.650373%; }
#ko-home .menu-3 { top: 53.396852%; }
#ko-home .menu-4 { top: 61.184756%; }
#ko-home .menu-5 { top: 68.972659%; }

#ko-home .image-languages .hotspot {
	width: 19.814815%;
	height: 2.982601%;
}

#ko-home .language-ko {
	left: 27.777778%;
	top: 77.630489%;
}

#ko-home .language-en {
	left: 52.685185%;
	top: 77.713339%;
}

/* 영문 원본: 메뉴 x477, 너비2045, 높이439.
   y2538 / 3060 / 3581 / 4102 / 4624. */
#en-home .image-navigation .hotspot {
	left: 15.900000%;
	width: 68.166667%;
	height: 6.678838%;
}

#en-home .menu-1 { top: 38.612506%; }
#en-home .menu-2 { top: 46.554085%; }
#en-home .menu-3 { top: 54.480450%; }
#en-home .menu-4 { top: 62.406816%; }
#en-home .menu-5 { top: 70.348395%; }

#en-home .image-languages .hotspot {
	width: 19.833333%;
	height: 3.042751%;
}

#en-home .language-ko {
	left: 27.766667%;
	top: 78.883311%;
}

#en-home .language-en {
	left: 52.600000%;
	top: 78.974593%;
}

/* 메인 이미지에서 빠진 미션챌린지는 행사 식순의 1차·2차 항목으로 연결합니다.
   menu02.webp: 1080 × 2252. x92, 너비896, 높이72; y978 / 1265. */
#ko-timetable .mission-navigation .hotspot {
	left: 8.518519%;
	width: 82.962963%;
	height: 3.197158%;
	border-radius: 0;
}

#ko-timetable .mission-session-1 { top: 43.428064%; }
#ko-timetable .mission-session-2 { top: 56.172291%; }

/* 영문 식순: 3000 × 6771. x278, 너비2450, 높이242; y2892 / 3861. */
#en-timetable .mission-navigation .hotspot {
	left: 9.266667%;
	width: 81.666667%;
	height: 3.574066%;
	border-radius: 0;
}

#en-timetable .mission-session-1 { top: 42.711564%; }
#en-timetable .mission-session-2 { top: 57.022596%; }

/* 모시는 글 원본의 영상 칸 안쪽: x292, y1763, 너비496, 높이279 (1080 × 2366 기준). */
.welcome-video-slot {
	position: absolute;
	left: 27.037037%;
	top: 74.513948%;
	width: 45.925926%;
	aspect-ratio: 16 / 9;
	border-radius: 4px;
	background: #000;
}

/* 영문 영상 칸 내부: x811, y4982, 너비1378 (3000 × 6710). */
#en-welcome .welcome-video-slot {
	left: 27.033333%;
	top: 74.247392%;
	width: 45.933333%;
}

.welcome-video {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: inherit;
	background: #000;
	object-fit: contain;
}

.video-enlarge-button {
	position: absolute;
	z-index: 3;
	top: 5px;
	right: 5px;
	padding: 5px 8px;
	border: 1px solid rgba(255, 255, 255, .8);
	border-radius: 5px;
	background: rgba(10, 37, 55, .82);
	color: #fff;
	font-size: clamp(10px, 1.7vw, 13px);
	font-weight: bold;
	line-height: 1.35;
	cursor: pointer;
}

.video-enlarge-button:hover { background: #07558c; }

.video-enlarge-button:focus-visible,
.video-close-button:focus-visible {
	outline: 3px solid #ffed63;
	outline-offset: 2px;
}

.welcome-video-modal {
	position: fixed;
	z-index: 100;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(0, 0, 0, .82);
	overscroll-behavior: contain;
}

.welcome-video-modal-panel {
	position: relative;
	width: 94%;
	max-height: 94vh;
	overflow: hidden;
	border-radius: 10px;
	background: #0b1b29;
	box-shadow: 0 12px 50px rgba(0, 0, 0, .5);
}

.welcome-video-modal-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	min-height: 52px;
	padding: 8px 12px;
	color: #fff;
}

.welcome-video-modal-header h2 {
	margin: 0;
	font-size: clamp(12px, 2vw, 16px);
	line-height: 1.4;
}

.video-close-button {
	flex-shrink: 0;
	min-height: 36px;
	padding: 6px 10px;
	border: 1px solid rgba(255, 255, 255, .4);
	border-radius: 5px;
	background: transparent;
	color: #fff;
	font-size: 13px;
	cursor: pointer;
}

.video-close-button span {
	margin-left: 5px;
	font-size: 20px;
	vertical-align: -1px;
}

.welcome-video-modal-player .welcome-video {
	width: 100%;
	height: auto;
	max-height: calc(94vh - 60px);
	border-radius: 0;
	object-fit: contain;
}

@supports (height: 1dvh) {
	.welcome-video-modal-panel { max-height: 94dvh; }
	.welcome-video-modal-player .welcome-video { max-height: calc(94dvh - 60px); }
}

/* 한글 지도: 1080 × 2652, y1674, x154 / 419 / 684, 너비242, 높이64.
   영문 지도: 3000 × 7295, y4653, x429 / 1164 / 1900, 너비672, 높이177. */
.map-navigation .hotspot {
	width: 22.407407%;
	border-radius: 999px;
}

#ko-directions .map-navigation .hotspot {
	top: 63.122172%;
	height: 2.413273%;
}

#en-directions .map-navigation .hotspot {
	top: 63.783413%;
	width: 22.400000%;
	height: 2.426319%;
}

.map-google { left: 14.259259%; }
.map-kakao { left: 38.796296%; }
.map-tmap { left: 63.333333%; }

#en-directions .map-google { left: 14.300000%; }
#en-directions .map-kakao { left: 38.800000%; }
#en-directions .map-tmap { left: 63.333333%; }

/* 고정 버튼은 모바일에서도 화면 밖으로 나가지 않도록 배치합니다. */
.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(30, 104, 152, .42);
	border-radius: 50%;
	background: rgba(255, 255, 255, .94);
	color: #07558c;
	box-shadow: 0 2px 7px rgba(3, 59, 104, .18);
	cursor: pointer;
	text-decoration: none;
}

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

.floating-button:focus-visible,
.language-switcher button:focus-visible {
	outline: 3px solid #074a84;
	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: #fff16a;
}

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

.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 white;
	content: "";
}

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

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

.language-switcher {
	position: fixed;
	z-index: 20;
	top: max(14px, env(safe-area-inset-top));
	right: max(12px, calc((100vw - 800px) / 2 + 12px));
	display: flex;
	gap: 3px;
	padding: 3px;
	border: 1px solid rgba(30, 104, 152, .4);
	border-radius: 24px;
	background: rgba(255, 255, 255, .94);
}

.language-switcher button {
	min-width: 40px;
	min-height: 38px;
	padding: 7px;
	border: 0;
	border-radius: 20px;
	background: transparent;
	color: #07558c;
	font-size: 12px;
	font-weight: bold;
	cursor: pointer;
}

.language-switcher button[aria-pressed="true"] {
	background: #07558c;
	color: #fff;
}

.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-radius: 12px;
	background: rgba(4, 54, 91, .96);
	color: white;
	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: #07558c;
}

.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 #07558c;
	background: white;
}

/* 위치 확인이 필요할 때 body에 class="debug-hotspots"를 임시로 추가하세요. */
.debug-hotspots .hotspot {
	outline: 2px dashed #dc2357;
	background: rgba(255, 0, 78, .15);
}