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


body { font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; margin: 0 auto; padding: 0; background: #0b2440; background-size: cover; background-repeat: no-repeat; max-width: 800px; width: auto; min-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;
    text-align: center;
    line-height: 1;
}

/* 아이콘 이미지 크기 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: 47%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
    max-width: 500px;
    max-height: calc(100vh - 80px);
    overflow-y: auto;
    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: 85px; font-weight: 500; }
.popup form input { width: calc(100% - 110px); }
.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); }

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

/* 원본 main.png(1080×2970) 안 참석등록 버튼의 클릭 영역 */
.register2 {
	position: absolute;
	top: 18.4%;
	left: 50%;
	transform: translateX(-50%);
	width: 35.2%;
	height: 2.75%;
	cursor: pointer;
	z-index: 5;
}

video {
	display:block;
	width:100%;
	}
.main-invite > img { width:100%; height:auto; }
.nav-text { display:block; line-height:1.2; text-align:center; font-weight:500; letter-spacing:-0.5px; color:#333; }
@media(max-width:480px){ .nav { padding:12px 0; } .nav-item { font-size:9px; } .nav-item img { width:22px; height:22px; } .register { bottom:68px; } }

/* 국민 제언/질의 선택 입력 */
.popup form .suggestion-label { display:block; width:100%; margin-bottom:8px; }
.suggestion-label span { color:#666; font-size:13px; }
#suggestion { display:block; width:100%; min-height:150px; padding:12px; border:1px solid #ddd; border-radius:4px; background:#f9f9f9; font:inherit; font-size:16px; line-height:1.6; resize:vertical; }
.suggestion-help { display:block; margin-top:5px; font-size:12px; color:#666; }