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

body {width:100%; max-width:800px; margin:0 auto; font-size:16px; }
img {width:100%;}
.imagemap { position:relative; width:100%;}

input:focus {
	outline: none;
}

input::placeholder {
	color: #EAEAEA;
}

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

#enumber { 
    position: absolute;
    top: 69.9%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    width: 60%;
    height: 3%;
    background: none;
    text-align: center;
    border: none;
	font-weight:700;
	font-size:1rem;
}

.submit-btn {
	position: absolute;
    top: 76%;
    left: 50%;
    transform: translateX(-50%);
    opacity: 0;
    width: 53%;
    height: 5%;
	cursor:pointer;
}

.myname {
	position: absolute;
	top: 62.75%;
	left: 62%;
	transform: translate(-50%, -50%);
	width: 53%;
	height: 5.5%;
	display: flex;
	align-items: center;
	color: #FFF;
	font-weight: 700;
	font-size:1.5rem;
}

.my_enumber {
    position: absolute;
    top: 67%;
    left: 62%;
    transform: translate(-50%, -50%);
    width: 53%;
	height: 5.5%;
	display: flex;
	align-items: center;
	color: #FFF;
	font-weight:700;
	font-size:1.5rem;
}

.close {
    position: absolute;
    top: 56.2%;
    left: 88.5%;
    transform: translateX(-50%);
    opacity: 0;
    width: 11%;
    height: 5%;
    cursor: pointer;
}

.blink {
	position:absolute;
	top:0%;
	left:0%;
	width:100%;
	height:auto;
	animation: blinkEffect 2s infinite;
	}

.music_onoff {
    position: fixed;
    bottom: 10%;
    right: 5%;
    width: 10.5%;
    height: auto;
    cursor: pointer;
	max-width:50px;
	}
	
.gohome {
    position: fixed;
    top: 3%;
    left: 4%;
    width: 8%;
    height: 6%;
    cursor: pointer;
}

@keyframes blinkEffect {
	0% {
		opacity: 1;
		filter: brightness(1);
	}
	50% {
		opacity: 0.5;
		/* 엷어질 때 약간 하얗게 보이도록 */
		filter: brightness(2);
	}
	100% {
		opacity: 1;
		filter: brightness(1);
	}
}

.menu01 {
    position: absolute;
    top: 64.8%;
    left: 50%;
    height: 4.1%;
    transform: translateX(-50%);
    width: 52%;
    cursor: pointer;
	}
	
.menu02 {
    position: absolute;
    top: 69.7%;
    left: 50%;
    height: 4.1%;
    transform: translateX(-50%);
    width: 52%;
    cursor: pointer;
	}
	
.menu03 {
    position: absolute;
    top: 74.6%;
    left: 50%;
    height: 4.1%;
    transform: translateX(-50%);
    width: 52%;
    cursor: pointer;
	}
	
.menu04 {
    position: absolute;
    top: 79.5%;
    left: 50%;
    height: 4.1%;
    transform: translateX(-50%);
    width: 52%;
    cursor: pointer;
	}

.menu05 {
    position: absolute;
    top: 84.4%;
    left: 50%;
    height: 4.1%;
    transform: translateX(-50%);
    width: 52%;
    cursor: pointer;
	}

.kakaomap {
	position: absolute;
    top: 45%;
    left: 50%;
    height: 12%;
    transform: translateX(-50%);
    width: 71%;
    cursor: pointer;
	}
	
.map01 {
    position: absolute;
    top: 59.4%;
    left: 13.9%;
    width: 23%;
    height: 1.7%;
    cursor: pointer;
	}
	
.map02 {
    position: absolute;
    top: 59.4%;
    left: 38.45%;
    width: 23%;
    height: 1.7%;
    cursor: pointer;
	}
	
.map03 {
	position: absolute;
    top: 59.4%;
    left: 63%;
    width: 23%;
    height: 1.7%;
    cursor: pointer;
	}
	
.score01 {
    position: absolute;
    top: 53%;
    left: 57%;
    transform: translate(-50%, -50%);
    width: 31%;
    height: 5.5%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #000;
    font-weight: 700;
    font-size: 3.5rem;
}

.score02 {
    position: absolute;
    top: 61.55%;
    left: 57%;
    transform: translate(-50%, -50%);
    width: 31%;
    height: 5.5%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #000;
    font-weight: 700;
    font-size: 3.5rem;
}

.score03 {
    position: absolute;
    top: 69.95%;
    left: 57%;
    transform: translate(-50%, -50%);
    width: 31%;
    height: 5.5%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #000;
    font-weight: 700;
    font-size: 3.5rem;
}

.score04 {
    position: absolute;
    top: 78.4%;
    left: 57%;
    transform: translate(-50%, -50%);
    width: 31%;
    height: 5.5%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #000;
    font-weight: 700;
    font-size: 3.5rem;
}


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

/* 내부 여백 정리 */
#guest_page > ul > li form {
	background:#78b8ff;
	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; }
}