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

body {
	font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
	margin-bottom: 0;
	padding: 0 auto;
	margin: 0 auto;
	background-repeat: no-repeat;
	background-size: cover;
	background: #FFF;
	max-width: 800px;
	width: auto;
	height: 100%;
	top: 0px;
	bottom: 0px;
}

.swiper-container {
	width: 100%;
	margin: 0;
}

.swiper-slide {
	/* Center slide text vertically */
	display: -webkit-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	-webkit-justify-content: center;
	justify-content: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	-webkit-align-items: center;
	align-items: center;
}

ul {
	width: 100%;
	list-style: none;
	padding: 0;
	margin: 0;
}

.bot {
	position: fixed;
	max-width: 800px;
	width: 100%;
	bottom: 75px;
	z-index: 20000;
}

.imagemap {
	position: relative;
	width: 100%;
}

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

a:link {
	text-decoration: none;
	color: #000;
}
a:visited {
	text-decoration: none;
	color: #000;
}
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;
	margin-bottom:58px;
}

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

/* 하단 네비게이션 바 */
.nav {
	display: flex;
	flex-direction: row;
	width: 100%;
	max-width: 800px;
	margin: auto;
	background-color: #10151b;
	padding: 5px 0;
	box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.8);
	position: fixed;
	bottom: 0;
	z-index: 5;
}

/* 각 아이템 래퍼 */
.nav-item {
	flex: 1 1 0;
	display: block;
	padding: 0 2px;
}

/* 실제 클릭 영역: 세로 중앙정렬 */
.nav-link {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
	padding: 6px 4px;
	text-align: center;
}

/* 아이콘 컨테이너 */
.nav-icon {
	display: block;
	line-height: 0; /* 이미지 하단 여백 제거 */
	font-size: 0; /* 폰트 아이콘 사용 안함 */
}

/* 아이콘 이미지 크기 통일 */
.nav-icon img {
	display: block;
	width: 28px;
	height: 28px;
	object-fit: contain;
	margin: 0 auto;
}

/* 텍스트 중앙정렬 */
.nav-text {
	display: block;
	font-size: 12px;
	line-height: 1.2;
	font-weight: 500;
	text-align: center;
	white-space: nowrap;
	color:#FFF;
}

/* 호버 반응 (선택) */
.nav-link:hover .nav-text {
	color: red;
}

/* 작은 화면에서 아이콘/텍스트 크기 보정 (선택) */
@media (max-width: 360px) {
	.nav-icon img {
		width: 24px;
		height: 24px;
	}
	.nav-text {
		font-size: 11px;
	}
}

button {
	padding: 10px 20px 10px 20px;
	text-align: center;
	margin: 0 auto;
	background: #000;
	color: #fff;
	border: none;
	border-right: 0px;
	border-top: 0px;
	border-left: 0px;
	border-bottom: 0px;
}

#musicb {
	position: fixed;
	padding: 5px 2px 5px 2px;
	top: 5px;
	left: 5px;
	width: 73px;
	height: auto;
	z-index: 10000;
	font-size: 10px;
	background: skyblue;
	text-align: center;
	color: #fff;
}

.nav-item div {
	font-size: 9px;
	text-align: center;
}

#gallery {
	width: 100%;
	max-width: 1280px;
	margin: 0 auto;
}

#gallery .swiper {
	width: 100%;
	height: 600px; /* 원하는 높이 지정 */
}

#gallery .swiper-slide {
	display: flex;
	justify-content: center;
	align-items: center;
	background: #000;
}

#gallery .swiper-slide img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}

	/* 네비게이션 화살표 커스터마이즈 (양 끝 중앙) */
	#gallery .swiper-button-prev,
	#gallery .swiper-button-next {
		color: #fff; /* 화살표 색 */
		text-shadow: 0 2px 8px rgba(0,0,0,0.5);
		/* 가운데 정렬(세로) */
		top: 50%;
		transform: translateY(-50%);
	}

	/* 화살표와 가장자리 여백 */
	#gallery .swiper-button-prev { left: 12px; }
	#gallery .swiper-button-next { right: 12px; }

	/* 페이지네이션(점) */
	#gallery .swiper-pagination-bullets .swiper-pagination-bullet {
		background: rgba(255,255,255,0.7);
		opacity: 1;
	}
	#gallery .swiper-pagination-bullets .swiper-pagination-bullet-active {
		background: #fff;
	}
	
.music_onoff {
    position: fixed;
    bottom: 15%;
    right: 5%;
    width: 10.5%;
    height: auto;
    cursor: pointer;
	max-width:50px;
	z-index:10;
	}
	
/* ===== 안내 레이어 ===== */
.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: min(90%, 520px);
	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); }

/* 음악 버튼이 레이어 밑으로 깔리지 않게 */
.music_onoff{ z-index: 100000; }

/* ===== 사쿠라(벚꽃) 캔버스 ===== */
#sakura{
	position: fixed;
	inset: 0;
	width: 100%;
	height: 100%;
	z-index: 2; /* 네비게이션(z-index:5)보다 낮고, 배경보다 높게 */
	pointer-events: none; /* 클릭/스크롤 막지 않음 */
}

.kakaomap {
    position: absolute;
    top: 9%;
    left: 50%;
    transform: translateX(-50%);
    width: 93.5%;
    height: 51.8%;
}


/* ===== 썸네일 갤러리 슬라이더 ===== */
#thumb-slider,
#thumb-slider * {
	box-sizing: border-box;
}

#thumb-slider {
	width: 100%;
	background: #000;
	overflow: hidden;
	user-select: none;
	outline: none;
}

/* 메인 이미지 영역: 4:3 */
#thumb-slider .thumb-slider-main {
	position: relative;
	width: 100%;
	aspect-ratio: 4 / 3;
	background: #000;
	overflow: hidden;
	touch-action: pan-y;
}

#thumb-slider .thumb-slider-stage {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #000;
	overflow: hidden;
}

/* 기존 전역 img { width:100%; } 덮어쓰기 */
#thumb-slider img {
	display: block;
	width: auto;
	height: auto;
	max-width: none;
	max-height: none;
	margin: 0 auto;
}

/* 좌우로 긴 이미지: width 100% */
#thumb-slider .fit-width {
	width: 100%;
	height: auto;
}

/* 위아래로 긴 이미지: height 100% */
#thumb-slider .fit-height {
	width: auto;
	height: 100%;
}

/* 메인 화살표 */
#thumb-slider .thumb-slider-arrow {
	position: absolute;
	top: 50%;
	z-index: 3;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.35);
	color: #fff;
	font-size: 42px;
	font-weight: 300;
	line-height: 1;
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
	transform: translateY(-50%);
}

#thumb-slider .thumb-slider-arrow:hover {
	background: rgba(0, 0, 0, 0.55);
}

#thumb-slider .thumb-slider-arrow:active {
	transform: translateY(-50%) scale(0.96);
}

#thumb-slider .thumb-slider-prev {
	left: 14px;
}

#thumb-slider .thumb-slider-next {
	right: 14px;
}

/* 썸네일 영역 */
#thumb-slider .thumb-slider-thumbs-area {
	width: 100%;
	padding: 14px 8px 16px;
	background: #000;
	border-top: 1px solid rgba(255, 255, 255, 0.12);
}

#thumb-slider .thumb-slider-thumbs {
	display: flex;
	gap: 8px;
	width: 100%;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}

#thumb-slider .thumb-slider-thumbs::-webkit-scrollbar {
	display: none;
}

#thumb-slider .thumb-slider-thumb {
	flex: 0 0 calc((100% - 32px) / 5);
	display: block;
	margin: 0;
	padding: 0;
	border: 2px solid rgba(255, 255, 255, 0.18);
	background: #111;
	opacity: 0.5;
	cursor: pointer;
	overflow: hidden;
	appearance: none;
	-webkit-appearance: none;
	transition: opacity 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

#thumb-slider .thumb-slider-thumb.is-active {
	border-color: #fff;
	opacity: 1;
}

#thumb-slider .thumb-slider-thumb:active {
	transform: scale(0.96);
}

#thumb-slider .thumb-slider-thumb-inner {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	aspect-ratio: 4 / 3;
	background: #000;
	overflow: hidden;
}

/* aspect-ratio 미지원 브라우저 보정 */
@supports not (aspect-ratio: 4 / 3) {
	#thumb-slider .thumb-slider-main::before,
	#thumb-slider .thumb-slider-thumb-inner::before {
		content: "";
		display: block;
		padding-top: 75%;
	}

	#thumb-slider .thumb-slider-thumb-inner {
		position: relative;
	}

	#thumb-slider .thumb-slider-thumb-inner img {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}
}

@media (max-width: 480px) {
	#thumb-slider .thumb-slider-arrow {
		width: 40px;
		height: 40px;
		font-size: 36px;
	}

	#thumb-slider .thumb-slider-prev {
		left: 8px;
	}

	#thumb-slider .thumb-slider-next {
		right: 8px;
	}

	#thumb-slider .thumb-slider-thumbs-area {
		padding: 10px 5px 12px;
	}

	#thumb-slider .thumb-slider-thumbs {
		gap: 6px;
	}

	#thumb-slider .thumb-slider-thumb {
		flex-basis: calc((100% - 24px) / 5);
	}
}
/* ===== 반응형 갤러리 그리드 ===== */
#slider {
	background: #f3f3f3;
}

.photo-gallery {
	padding: 26px 12px 24px;
	background: #f3f3f3;
}

.gallery-heading {
	margin: 0 0 18px;
	font-size: 22px;
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	color: #23253a;
	text-transform: lowercase;
	letter-spacing: 0.02em;
}

.gallery-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 8px;
}

.gallery-thumb {
	position: relative;
	display: block;
	overflow: hidden;
	background: #dfe3e8;
	aspect-ratio: 1 / 1;
}

.gallery-thumb::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0);
	transition: background 0.2s ease;
	pointer-events: none;
}

.gallery-thumb:hover::after,
.gallery-thumb:focus::after {
	background: rgba(0, 0, 0, 0.08);
}

.gallery-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.25s ease;
}

.gallery-thumb:hover img,
.gallery-thumb:focus img {
	transform: scale(1.04);
}

.gallery-modal-open {
	overflow: hidden;
}

.gallery-modal {
	position: fixed;
	inset: 0;
	display: none;
	align-items: center;
	justify-content: center;
	padding: 24px 16px;
	z-index: 99998;
}

.gallery-modal.is-open {
	display: flex;
}

.gallery-modal-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.82);
}

.gallery-modal-dialog {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 800px;
	text-align: center;
}

.gallery-modal-image {
	display: block;
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 82vh;
	margin: 0 auto;
	border-radius: 8px;
	box-shadow: 0 14px 40px rgba(0, 0, 0, 0.35);
	background: #111;
}

.gallery-modal-close {
	position: absolute;
	top: -52px;
	right: 0;
	width: 42px;
	height: 42px;
	padding: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.16);
	color: #fff;
	font-size: 30px;
	line-height: 42px;
	font-weight: 400;
	cursor: pointer;
}

.gallery-modal-caption {
	margin: 14px 0 0;
	font-size: 14px;
	line-height: 1.4;
	color: #fff;
	letter-spacing: 0.03em;
	text-transform: lowercase;
}

@media (max-width: 480px) {
	.photo-gallery {
		padding: 22px 8px 20px;
	}

	.gallery-heading {
		margin-bottom: 14px;
		font-size: 18px;
	}

	.gallery-grid {
		gap: 6px;
	}

	.gallery-modal {
		padding: 18px 10px;
	}

	.gallery-modal-close {
		top: -46px;
		width: 38px;
		height: 38px;
		font-size: 28px;
		line-height: 38px;
	}

	.gallery-modal-image {
		max-height: 76vh;
	}
}



/* ===== 방명록 컨테이너 ===== */
#guest_page {
	background:#fff;
	padding:0;
}

/* 내부 여백 정리 */
#guest_page > ul > li form {
	background:#162d57;
	overflow:hidden;
}

#guest_page .form-inner {
	width:90%;
	padding:16px 5%;
	margin:0 auto;
}

/* ===== 인풋/텍스트영역 ===== */
#guest_page input[type="text"],
#guest_page input[type="password"]{
	border:none;
	outline:none;
	border-radius:10px;
	background:#fff;
	padding:12px 16px;
	width:100%;
	font-size:16px;
	line-height:1.2;
	transition: box-shadow .2s ease, transform .05s ease;
}

#guest_page input[type="text"]:focus,
#guest_page input[type="password"]:focus{
	box-shadow:0 0 0 3px rgba(0,135,255,.25);
}
#guest_page input::placeholder {
	color: #2a38cb;
}

#guest_page .row{
	display:flex;
	gap:12px;
	align-items:center;
	justify-content:center;
}

#guest_page textarea{
	border:none;
	outline:none;
	border-radius:10px;
	background:#fff;
	padding:14px 16px;
	width:100%;
	min-height:120px;
	font-size:16px;
	resize:vertical;
	transition: box-shadow .2s ease, transform .05s ease;
}

#guest_page textarea:focus{
	box-shadow:0 0 0 3px rgba(0,135,255,.25);
}

/* ===== 버튼들 (#add, #modify_cancel, #more 는 span/div 사용) ===== */
#add, #modify_cancel, #more {
	display:inline-block;
	padding:12px 18px;
	text-align:center;
	margin:0 6px;
	background:#2f6fed;
	color:#fff;
	border:none;
	border-radius:999px;
	cursor:pointer;
	font-weight:700;
	font-size:14px;
	box-shadow:0 2px 8px rgba(0,0,0,.15);
	user-select:none;
	transition: transform .05s ease, filter .15s ease, opacity .2s ease;
}

#modify_cancel{ background:#8e8d8d; }

#add:active, #modify_cancel:active, #more:active{
	transform:translateY(1px);
}

#add:hover, #modify_cancel:hover, #more:hover{
	filter:brightness(1.05);
}

/* 버튼 영역 가운데 정렬 */
#center{
	display:flex;
	align-items:center;
	justify-content:center;
	gap:8px;
}

/* ===== 리스트 영역 ===== */
/* ====== Guestbook List (권장 마크업 기준) ====== */
.list-container { margin:5%; }

#guest_page #list{
	width:100%;
	display:flex;
	flex-direction:column;
	gap:12px;
}

#guest_page #list .gb-item{
	background:#fff;
	border:1px solid #e5e7eb;
	border-radius:12px;
	box-shadow:0 1px 4px rgba(0,0,0,.06);
	padding:16px 14px;
}

#guest_page #list .gb-head{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:12px;
	margin-bottom:8px;
}

#guest_page #list .gb-title{
	display:flex;
	align-items:baseline;
	gap:10px;
	flex-wrap:wrap;
}

#guest_page #list .gb-name{
	font-weight:800;
	font-size:16px;
	color:#111;
}

#guest_page #list .gb-date{
	font-size:13px;
	color:#6b7280;
}

#guest_page #list .gb-msg{
	margin-top:8px;
	font-size:15px;
	line-height:1.6;
	color:#222;
	word-break:break-word;
	white-space:pre-wrap;
}

/* 버튼 공통 */
#guest_page #list .gb-btn{
	display:inline-block;
	padding:8px 12px;
	border-radius:999px;
	font-size:12px;
	font-weight:700;
	cursor:pointer;
	user-select:none;
	border:1px solid transparent;
	background:#f3f4f6;
	color:#111;
	transition:filter .15s ease, transform .05s ease, background .15s ease;
}
#guest_page #list .gb-btn:active{ transform:translateY(1px); }
#guest_page #list .gb-btn:hover{ filter:brightness(1.05); }

#guest_page #list .gb-edit{ background:#e0ecff; color:#1e40af; }
#guest_page #list .gb-del{ background:#fee2e2; color:#991b1b; }
#guest_page #list .gb-ok{ background:#dcfce7; color:#166534; }
#guest_page #list .gb-cancel{ background:#e5e7eb; color:#374151; }

/* 상단 우측 버튼 영역 */
#guest_page #list .btnarea{
	display:flex;
	gap:8px;
}

/* 비번 확인 영역(기본 숨김 → JS에서 .show 처리도 가능) */
#guest_page #list .del_div{
	display:none; /* 기본 숨김 */
	margin-top:8px;
	padding:10px;
	border:1px dashed #cbd5e1;
	border-radius:10px;
	background:#f8fafc;
}

/* 비번 입력 */
#guest_page #list .gb-pw{
	border:none;
	outline:none;
	border-radius:10px;
	background:#fff;
	padding:10px 12px;
	width:140px;
	font-size:14px;
	line-height:1.2;
	box-shadow:inset 0 0 0 1px #e5e7eb;
}
#guest_page #list .gb-pw:focus{
	box-shadow:0 0 0 3px rgba(0,135,255,.25);
}

/* 모바일 쌓임 정리 */
@media(max-width:768px){
	#guest_page #list .gb-head{ align-items:flex-start; }
	#guest_page #list .btnarea{ flex-wrap:wrap; }
}
/* 55th-UiCitizensDay: 화면 요소는 이 파일에서 직접 수정 */
html { background:#eee9f0; }
body { width:100%; background:#fff; font-family:Arial,'Noto Sans KR','Malgun Gothic',sans-serif; }
.invitation-images > img { height:auto; }
.container { margin-bottom:0; padding-bottom:calc(82px + env(safe-area-inset-bottom, 0px)); }
#guest_page { padding:42px 0 28px; background:#faf7fb; }
#guest_page h2, #location h2 { font-size:26px; text-align:center; color:#58166c; letter-spacing:.1em; }
.section-intro { text-align:center; font-size:15px; color:#726676; margin:12px 0 26px; }
#guest_page #f1 { width:90%; margin:0 auto; padding:24px; background:#f0e5f4; border-radius:12px; }
#guest_page .row { gap:14px; align-items:flex-start; }
#guest_page .row label { flex:1; min-width:0; color:#4f3557; font-size:14px; }
#guest_page .row input { display:block; margin-top:8px; min-width:0; padding:13px 12px; }
#guest_page input::placeholder, #guest_page textarea::placeholder { color:#877c8b; }
#guest_page .message-label { display:block; margin:20px 0 8px; color:#4f3557; font-size:14px; }
#guest_page textarea { padding:14px; font-family:inherit; }
.guest-notice { color:#6c5b72; font-size:12px; line-height:1.8; margin:12px 0 20px; }
#add, #more { background:#601c73; box-shadow:none; }
button[hidden] { display:none !important; }
button:disabled { opacity:.55; cursor:wait; }
#guest-status { text-align:center; font-size:14px; color:#725a7a; padding:16px 5% 0; }
.more { text-align:center; }
#guest_page #list .gb-head { gap:8px; }
#guest_page #list .gb-name { overflow-wrap:anywhere; }
#guest_page #list .gb-title { min-width:0; }
#guest_page #list .btnarea { flex-shrink:0; gap:4px; }
#guest_page #list .gb-msg { white-space:pre-wrap; overflow-wrap:anywhere; }
#guest_page #list .gb-pw { width:130px; max-width:100%; }
#guest_page #list .del_div { line-height:3; }
#location { padding:38px 0 34px; background:#fff; text-align:center; }
#location .venue { margin:18px 5% 8px; font-weight:bold; font-size:17px; color:#39223f; }
#location .address {font-size:14px; color:#756b79; }
/* 카카오맵 원본 내부 아이콘/타일에는 페이지 전역 이미지 폭을 적용하지 않습니다. */
#location .root_daum_roughmap img { display:inline; width:auto; max-width:none; }
.map-link { display:inline-block; margin:22px 5% 0; color:#601c73 !important; padding:10px 18px; border:1px solid #dfcbe7; border-radius:6px; font-size:14px; }
.nav { left:50%; transform:translateX(-50%); background:#32113f; padding-bottom:calc(5px + env(safe-area-inset-bottom, 0px)); }
.nav-link:hover .nav-text { color:#e4bddb; }
.music_onoff { bottom:calc(92px + env(safe-area-inset-bottom, 0px)); right:max(16px, calc((100vw - 800px) / 2 + 16px)); width:44px; max-width:44px; padding:0; background:transparent; border-radius:50%; }
:focus-visible { outline:3px solid #b79941; outline-offset:3px; }
@media (max-width:420px) {
	#guest_page #f1 { padding:18px 14px; }
	#guest_page .row { gap:10px; }
	#guest_page h2, #location h2 { font-size:23px; }
	#add, #modify_cancel { margin:0; padding:12px 14px; }
}


.section_address, .phone {display:none;}