/* 기본 스타일 */

html, body {
	width: 100%;
	height: 100%; /* 부모 요소의 높이를 100%로 설정 */
}

body {
	font-family: Arial, sans-serif;
	background-color: #000; /* 배경색 (필요에 따라 변경 가능) */
}


.mtempcontainer, .mtempwrap{
	height: 100%;
}


/* 상위 div 스타일 */
.full-container {
	width: 100%; /* 화면 가로 전체 */
	height: 100vh; /* 화면 세로 전체 */
	background-image: url('/images/pages/webgame/bg_main_v.png'); /* 백그라운드 이미지 경로 */
	background-size: auto; /* 이미지 크기를 원본 크기로 유지 */
	background-position: top; /* 이미지의 중심을 기준으로 배치 */
	background-repeat: no-repeat; /* 이미지 반복 방지 */
	display: flex; /* Flexbox 사용 */
	justify-content: center; /* 가로 중앙 정렬 */
	position: relative;
}

.main-container {
	width: 522px; /* PC 기본 가로 크기 */
	max-width: 100%; /* 모바일에서 화면 크기를 초과하지 않도록 설정 */
	height: auto; /* 높이는 내용에 따라 자동 조정 */
	position: relative;
	display: flex;
	justify-content: center;
}


.buttonbox{
	position: absolute;
	width: 259px;
}

.webgame_notimsg {
    color: #fff;
}



/* 버튼 스타일 */
.main-buttons {
	display: flex;
	flex-direction: column; /* 버튼을 세로로 나열 */
	gap: 20px; /* 버튼 간격 */
	align-items: center; /* 버튼을 가로 중앙 정렬 */
	/*width: 259px;
	height: 198px;*/
	position: relative;
}


/* 레이어 폼 스타일 */
.overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.5);
	display: none;
	justify-content: center;
	align-items: center;
	z-index: 1000;
}

.overlay .form {
	background: white;
	padding: 50px 30px;
	border-radius: 35px;
	width: 340px;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
	position: relative;
	background-color: #a44040; /* div의 배경색 */
	border: 3px solid #d48d8d; /* 테두리 두께와 색상 */
}

.overlay .form h2 {
	margin-top: 0;
}

.overlay .form input {
	width: 100%;
	padding: 10px;
	margin: 10px 0;
	border: 1px solid #ccc;
	border-radius: 4px;
}

.overlay .form button {
	width: 100%;
	padding: 10px;
	border: none;
	background-color: #a44040;
	cursor: pointer;
}

.overlay .form .close-btn {
	position: absolute;
	top: 10px;
	right: 10px;
	width: 37px;
	height: 38px;
	border: none;
	background-color: #a44040;
	background-image: url('/images/pages/webgame/ico_close.png'); /* 배경 이미지 경로 */
	cursor: pointer;
}



/* Image */

.image {
	border: 0;
	position: relative;
}


.image.fit {
	display: block;
}

.image.fit img {
	display: block;
	width: 100%;
}

.image.featured {
	display: block;
	margin: 0 0 1em 0;
}

.image.featured img {
	display: block;
	width: 100%;
}




#btnbox_login {
	position: absolute;
	width: 259px;
	height: 56px;
	top: 0px;
	left: 0px;
	background:url(/images/pages/webgame/btn_login.png?29) no-repeat;
}

#btnbox_join {
	position: absolute;
	width: 259px;
	height: 56px;
	top: 71px;
	left: 0px;
	background:url(/images/pages/webgame/btn_join.png?29) no-repeat;
}

#btnbox_google {
	position: absolute;
	width: 259px;
	height: 56px;
	top: 142px;
	left: 0px;
	background:url(/images/pages/webgame/btn_glogin.png?29) no-repeat;
}




/* 반응형 스타일 */

/* PC 스타일 (화면 너비 1024px 이상) */
@media (min-width: 1024px) {

		.buttonbox {
			top: 230px; /* 모바일 세로 모드에서 top 위치 */
		}

}

/* 모바일 스타일 (화면 너비 1024px 이하) */
@media (max-width: 1024px) {

	/* 세로가 긴 경우 (예: 3:4, 9:16 등) */
	@media (max-aspect-ratio: 1/1) {

		.buttonbox {
			top: 230px; /* 모바일 세로 모드에서 top 위치 */
		}
		
		body {
			/*background-image: url('bg-vertical.jpg');*/
		}
	}


	/* 가로가 긴 경우 (예: 4:3, 16:9 등) */
	@media (min-aspect-ratio: 1/1) {

		.buttonbox {
			top: 85px; /* 모바일 가로 모드에서 top 위치 */
			/*width: 100%;*/
		}


/*
		#btnbox_login {
			position: absolute;
			width: 150px;
			height: 56px;
			top: 40px;
			left: 0px;
		
            background-image: url('/images/pages/webgame/btn_login.png?29');
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
			border-radius: 15px;
		}

		#btnbox_join {
			position: absolute;
			width: 150px;
			height: 56px;
			top: 40px;
			left: 165px;

            background-image: url('/images/pages/webgame/btn_join.png?29');
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
			border-radius: 15px;
		}

		#btnbox_google {
			position: absolute;
			width: 150px;
			height: 56px;
			top: 40px;
			left: 325px;

            background-image: url('/images/pages/webgame/btn_glogin.png?29');
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
			border-radius: 15px;
		}
*/
		
		.full-container {
			background-image: url('/images/pages/webgame/bg_main_h.png'); /* 백그라운드 이미지 경로 */
		}

		body {
			/*background-image: url('bg-horizontal.jpg');*/
		}
	}

}


#main-top {
	padding: 0px;
	margin-bottom: 107px; /* 고정된 footer 높이만큼 여백 추가 */
	width: 100%;
}

/* 하단 고정 div */
#main-bottom {
	position: fixed;
	bottom: 0;
	width: 323px;
	height: 107px;
	background-color: #333;
	display: flex;
	justify-content: center;
	align-items: end;
	gap: 20px; /* 버튼 간격 */
	z-index: 1000;
	background:url(/images/pages/webgame/bfix_bg.png?29) no-repeat;
	padding-bottom: 8px;
}



.maintenance-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* 80% 불투명도의 검은색 배경 */
  display: flex;
  flex-direction: column; /* 아이템들을 수직으로 정렬 */
  justify-content: center;
  align-items: center;
  z-index: 1000; /* 다른 모든 요소 위에 오도록 설정 */
}
.maintenance-content {
  display: flex; /* flex 컨테이너로 만듭니다. */
  flex-direction: column; /* 자식 요소들을 수직으로 정렬합니다. */
  justify-content: center; /* 수직 방향 중앙 정렬 */
  align-items: center; /* 수평 방향 중앙 정렬 */
  width: 100%;
  padding: 20px; /* 내부 여백 */
  border-radius: 10px;
  background-color: rgba(0, 0, 0, 0.85); /* 점검 메시지 컨테이너의 약간 어두운 배경 */
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.9);
}

.maintenance-icon { 
    width: 15svh;
    max-width: 500px
    height: auto; 
    margin-bottom: 20px; 
} 

.maintenance-text { 
    font-size:clamp(1em, 2svw, 4em);
    font-weight: bold; 
    margin-bottom: 5px; 
    text-align: center;
    color: white; 
} 


/* ReCaptcha */
.captcha-group {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
}

.captcha-box {
  width: 170px;
  height: 30px;
  border: 1px solid #2e3245;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 16px;
  background-color: #b7c8ff;
  border-radius: 15px;
  box-sizing: border-box;
}

.captcha-input {
  flex-grow: 1;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  font-size: 18px;
  height: 30px;
  box-sizing: border-box;
}