* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}


body { font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; margin: 0 auto; padding: 0; background: #181823; background-size: cover; background-repeat: no-repeat; max-width: 800px; width: auto; height: 100%; }
ul { width: 100%; list-style: none; padding: 0; margin: 0; }
img { display: block; width: 100%; }
a:link, a:visited, a:active { text-decoration: none; color: #000; }
a:hover { text-decoration: none; color: red; }

/* 레이아웃 */
.container { width: 100%; max-width: 800px; color: #000; z-index: 0; position: relative; }
.top { position: fixed; top: 0; background: #fff; width: 100%; max-width: 800px; text-align: center; box-shadow: 0 5px 20px rgba(0, 0, 0, 0.8); z-index: 1000; }
.top h2 { font-size: 1.2em; color: #5D5D5D; }
.imagemap { position: relative; width: 100%; }

/* === 푸터 내비게이션바 스타일 시작 === */
/* 하단 고정 내비게이션 바 컨테이너 */
.nav { display: flex; width: 100%; max-width: 800px; margin: auto; background-color: #fff; padding: 17px 0 17px 0; box-shadow: 0 -2px 10px rgba(0,0,0,0.05); position: fixed; bottom: 0; z-index: 1000; }

/* 각 메뉴 칸 (5등분 균등 분할) */
.nav-item { flex: 1; display: flex; align-items: center; justify-content: center; font-size:10px; }

/* 메뉴 안의 링크(a)와 박스(div) 내용물 수직 정렬 강제 */
.nav-item > a, .nav-item > div { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; text-decoration: none; color: #333; }

/* 아이콘 이미지 크기 24px 고정 및 정렬 */
.nav-item img { width: 24px; height: 24px; object-fit: contain; display: block; margin-bottom: 4px; }

/* i태그(material-icons)가 이미지 정렬을 방해하지 않도록 초기화 */
.nav-item .material-icons { font-size: 0 !important; line-height: 1; display: block; padding: 0; margin: 0; }

/* 하단 텍스트 스타일 */
.nav-item div { font-size: 11px;line-height: 1.2; text-align: center; font-weight: 500; letter-spacing: -0.5px; color: #333; margin: 0; }
/* === 푸터 내비게이션바 스타일 끝 === */

/* 버튼 및 입력 폼 */
#add, #modify_cancel, #more, button { padding: 10px 20px; text-align: center; margin: 0 auto; background: #000; color: #fff; border: none; }
input { width: calc(100% - 90px); padding: 5px; box-sizing: border-box; border: none; border-bottom: 1px solid #EAEAEA; background: #f9f9f9; }
select { width: calc(100% - 90px); padding: 5px; box-sizing: border-box; border: none; border-bottom: 1px solid #EAEAEA; background: #f9f9f9; }
h1 { font-size: 18px; margin: 0 0 30px 0; text-align: center; color: #000; font-weight: 500; }

/* 지도 관련 */
.kakaomap { position: absolute; top: 58.3%; left: 3%; width: 94%; height: 18%; display: block; }
.fix_click { position: fixed; bottom: 62px; z-index: 100; width: 100%; max-width: 800px; }
.tit, .root_daum_roughmap .section_address .txt, .title, .wrap_list li a { color: #fff !important; }

/* 팝업 공통 */
.popup-container { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); display: flex; justify-content: center; align-items: center; z-index: 20; opacity: 1; transition: opacity 2s ease-in-out; }
.popup-content { max-width: 90%; max-height: 90%; }
.popup-content img { display: block; width: 70%; max-height: 100%; margin: 0 auto; max-width: 800px; }

/* 참석 여부 팝업 */
.popup-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.7); z-index: 1000; }
.popup-overlay2 { display: block; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.7); z-index: 1000; }
.popup { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 90%; max-width: 500px; background: #fff; padding: 20px; box-sizing: border-box; border-radius: 5px; }
.popup form .form-group { margin-bottom: 15px; }
.popup form label { display: inline-block; width: 65px; font-weight: 500; }
.popup form select { width: calc(100% - 90px); padding: 5px; box-sizing: border-box; }
.popup form label {
	display: inline-block;
	width: 75px;
	font-weight: 500;
}

.popup form input,
.popup form select {
	width: calc(100% - 85px);
	padding: 5px;
	box-sizing: border-box;
}
.submit-btn { background: #122645; color: white; padding: 10px 20px; border: none; cursor: pointer; width: 100%; border-radius: 3px; }
.close-btn { position: absolute; top: -40px; right: -16px; background: transparent; border: none; font-size: 30px; color: white; cursor: pointer; }
.phone { display: none; }
.consent-box { background-color: #f9f9f9; border: 1px solid #ddd; height: 80px; overflow-y: auto; margin-bottom: 10px; font-size: 14px; line-height: 1.3; border-radius: 5px; color: #333; text-align: left; }

/* 음악 버튼 & 안내 레이어 */
.music_onoff { position: fixed; bottom: 15%; right: 5%; width: 10.5%; height: auto; cursor: pointer; max-width: 50px; z-index: 100000; }
.hint-modal { position: fixed; inset: 0; display: none; align-items: center; justify-content: center; background: rgba(0,0,0,.55); z-index: 99999; }
.hint-modal.show { display: flex; }
.hint-dialog { width: 90%; max-width: 520px; background: #fff; color: #111; border-radius: 14px; box-shadow: 0 20px 60px rgba(0,0,0,.35); padding: 24px 20px; text-align: center; }
.hint-title { font-size: 1.1rem; font-weight: 700; margin-bottom: 10px; color: #222; }
.hint-msg { font-size: 1rem; line-height: 1.6; color: #333; margin-bottom: 16px; }
.hint-actions { display: flex; justify-content: center; }
.hint-close-btn { display: inline-flex; align-items: center; justify-content: center; padding: 10px 16px; border-radius: 999px; background: #10151b; color: #fff; font-weight: 600; cursor: pointer; user-select: none; }
.hint-close-btn:active { transform: translateY(1px); }

.register {
  position: fixed;
  bottom: 77px;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  height: auto;
  cursor: pointer;
  max-width: 800px;

  /* 애니메이션 추가 */
  animation: fadeInOut 2s infinite;
}

@keyframes fadeInOut {
  0% { opacity: 0; }
  50% { opacity: 1; }
  100% { opacity: 0; }
}

	
video {
	display:block;
	width:100%;
	}