* { box-sizing:border-box; }
html { margin:0; padding:0; scrollbar-gutter:stable; }
body {
	margin:0;
	padding:0;
	background:#17140e;
	background-image:radial-gradient(ellipse at 50% 0, #775015 0, #302313 40%, #17140e 78%);
	background-attachment:fixed;
	font-family:Arial, 'Noto Sans KR', 'Malgun Gothic', sans-serif;
}
.event-page {
	position:relative;
	width:100%;
	max-width:860px;
	margin:0 auto;
	background:#000;
	box-shadow:0 0 90px rgba(0,0,0,.5);
}
.image-section { position:relative; margin:0; padding:0; }
.image-section img { display:block; width:100%; height:auto; margin:0; border:0; }
.hotspot {
	position:absolute;
	display:block;
	margin:0;
	padding:0;
	border:0;
	border-radius:999px;
	background:transparent;
	cursor:pointer;
	-webkit-tap-highlight-color:rgba(255,255,255,.22);
	touch-action:manipulation;
}
.hotspot:hover { background:rgba(255,255,255,.13); }
.hotspot:focus-visible { outline:4px solid #fff; outline-offset:3px; box-shadow:0 0 0 7px #111; }
/* 03.png 원본 1080 × 3900 기준. x / 1080 × 100%, y / 3900 × 100%.
 * 이미지 위 실제 버튼 테두리 전체를 덮는 좌표입니다.
 * 좌표 수정은 각 버튼의 left / top / width / height에서 직접 합니다. */
.buy-10km { left:20.37%; top:79.54%; width:59.26%; height:3.75%; }
.buy-5km { left:20.37%; top:84.33%; width:59.26%; height:3.75%; }
.buy-family { left:12.59%; top:88.38%; width:67.04%; height:4.51%; }
.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; }
.skip-link { position:fixed; top:10px; left:10px; z-index:10; padding:12px 18px; color:#111; background:#ffcc00; transform:translateY(-180%); }
.skip-link:focus { transform:translateY(0); }
/* 햄버거 버튼은 화면 오른쪽 상단 고정 바 안에서 absolute 좌표로 배치합니다. */
#menu_bar { position:fixed; top:0; left:0; width:100%; height:76px; z-index:9997; pointer-events:none; }
#menu_btn {
	position:absolute;
	top:14px;
	top:max(14px, env(safe-area-inset-top));
	right:16px;
	right:max(16px, env(safe-area-inset-right));
	width:46px;
	height:46px;
	border:0;
	border-radius:14px;
	background:rgba(255,255,255,.95);
	color:#161710;
	box-shadow:0 8px 24px rgba(0,0,0,.22);
	font:700 25px/1 Arial,sans-serif;
	cursor:pointer;
	pointer-events:auto;
	-webkit-backdrop-filter:blur(10px);
	backdrop-filter:blur(10px);
}
#menu_btn:hover { background:#fff4d1; }
#menu_btn:focus-visible,#menu_close:focus-visible,#menu_wrap a:focus-visible { outline:3px solid #c46400; outline-offset:3px; }
body.menu-open { position:fixed; left:0; right:0; width:100%; overflow:hidden; }
#menu_overlay { position:fixed; inset:0; z-index:9998; background:rgba(0,0,0,.46); -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px); opacity:0; visibility:hidden; transition:opacity .28s ease,visibility .28s ease; }
#menu_overlay.show { opacity:1; visibility:visible; }
#menu_wrap { position:fixed; top:0; right:0; width:78%; max-width:360px; height:100%; height:100dvh; padding:20px 18px 28px; padding-bottom:max(28px,env(safe-area-inset-bottom)); padding-top:max(20px,env(safe-area-inset-top)); background:linear-gradient(180deg,#fff 0%,#fff8e7 100%); color:#17190f; box-shadow:-12px 0 32px rgba(0,0,0,.18); overflow-y:auto; overscroll-behavior:contain; z-index:10000; transform:translateX(105%); visibility:hidden; transition:transform .32s ease,visibility .32s ease; }
#menu_wrap.open { transform:translateX(0); visibility:visible; }
#menu_wrap::-webkit-scrollbar { width:6px; }
#menu_wrap::-webkit-scrollbar-thumb { background:rgba(0,0,0,.15); border-radius:999px; }
.menu_header { position:relative; min-height:58px; padding:4px 48px 18px 2px; margin-bottom:8px; border-bottom:1px solid rgba(0,0,0,.08); }
#menu_title { font-size:22px; line-height:1.5; font-weight:800; margin:0; letter-spacing:-.02em; }
#menu_close { position:absolute; top:0; right:0; width:40px; height:40px; border:0; border-radius:12px; background:#fff0bd; color:#262319; font-size:18px; font-weight:700; cursor:pointer; }
#menu_wrap ul { list-style:none; display:flex; flex-direction:column; gap:6px; padding:0; margin:0; counter-reset:menu-number; }
#menu_wrap li { margin:0; padding:0; counter-increment:menu-number; }
#menu_wrap a { position:relative; display:block; min-height:44px; padding:12px 12px 12px 49px; border-radius:12px; background:#fff; color:#24251e; font-size:14px; font-weight:700; line-height:1.5; word-break:keep-all; text-decoration:none; transition:background .2s ease,transform .2s ease; }
#menu_wrap a::before { content:counter(menu-number); position:absolute; top:50%; left:13px; transform:translateY(-50%); display:flex; align-items:center; justify-content:center; width:25px; height:25px; border-radius:50%; color:#fff; background:#27291e; font-size:12px; line-height:1; }
#menu_wrap a:hover,#menu_wrap a:focus-visible { background:#ffecad; transform:translateX(-2px); }
@media (max-width:380px) { #menu_wrap { width:86%; padding-left:14px; padding-right:14px; } }
@media (prefers-reduced-motion:reduce) { #menu_overlay,#menu_wrap,#menu_wrap a { transition:none; } }