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; }

/* 메뉴 안의 링크(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: 11%;
    left: 50%;
    transform: translateX(-50%);
    width: 87%;
    height: 31.8%;
    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; }
.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); }

.link01 {
	position: absolute;
	top: 82.6%;
	left: 22.4%;
	width: 17%;
	height: 8.5%;
	cursor: pointer;
	border: 0;
	padding: 0;
	margin: 0;
	background: transparent;
	appearance: none;
	-webkit-appearance: none;
}

.call-select-overlay {
	position: fixed;
	inset: 0;
	display: none;
	align-items: center;
	justify-content: center;
	padding: 24px;
	box-sizing: border-box;
	background: rgba(0, 0, 0, 0.62);
	z-index: 100001;
}

.call-select-overlay.show {
	display: flex;
}

.call-select-dialog {
	position: relative;
	width: 100%;
	max-width: 420px;
	padding: 26px 20px 20px;
	box-sizing: border-box;
	background: #fff;
	border-radius: 16px;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.38);
	text-align: center;
}

.call-select-close {
	position: absolute;
	top: 10px;
	right: 12px;
	width: 34px;
	height: 34px;
	padding: 0;
	border: 0;
	background: transparent;
	color: #333;
	font-size: 30px;
	line-height: 34px;
	cursor: pointer;
}

.call-select-title {
	font-size: 21px;
	font-weight: 700;
	color: #111;
	letter-spacing: -0.04em;
}

.call-select-desc {
	margin: 8px 0 18px;
	font-size: 15px;
	line-height: 1.45;
	color: #555;
}

.call-select-btn {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	width: 100%;
	margin-top: 10px;
	padding: 15px 16px;
	box-sizing: border-box;
	border: 1px solid #e5e5e5;
	border-radius: 12px;
	background: #f8f8f8;
	color: #111 !important;
	font-size: 15px;
	line-height: 1.3;
	letter-spacing: -0.04em;
	text-align: left;
}

.call-select-btn span {
	font-weight: 600;
}

.call-select-btn strong {
	flex-shrink: 0;
	font-size: 16px;
	font-weight: 800;
}

.call-select-btn:active {
	transform: translateY(1px);
}

@media (max-width: 420px) {
	.call-select-btn {
		flex-direction: column;
		align-items: flex-start;
	}
}

.link02 {
	position: absolute;
    top: 82.6%;
    left: 42%;
    width: 17%;
    height: 8.5%;
    cursor: pointer;
}

.link03 {
	position: absolute;
    top: 82.6%;
    left: 61.7%;
    width: 17%;
    height: 8.5%;
    cursor: pointer;
}