/* 기본 페이지 및 레이아웃 스타일 */
html,
body {
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
	font-family: sans-serif;
}
body {
	background-image: url("/images/pages/webGame/main/char.png?3"), url("/images/pages/webGame/main/bg.jpg?3");
	background-repeat: no-repeat, no-repeat;
	background-size:
	auto 99dvh,
	cover;
	background-position:
	center bottom,
	center;
	position: relative;
}
/*시작버튼추가*/
.button-start {
	position: absolute;
	bottom: 18%;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	flex-direction: column;
	gap: 10px;
	align-items: center;
	width: 60dvw;
	max-width: 450px;
	z-index: 40;
}
.button-start img {
	width: 100%;
	height: auto;
}

.logo {
	position: absolute;
	max-width: 540px;
}
.button-container {
	position: absolute;
	bottom: 10%;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	flex-direction: column;
	gap: 10px;
	align-items: center;
	width: 60dvw;
	max-width: 450px;
	z-index: 40;
}
.button-container img {
	width: 100%;
	height: auto;
}
.bottom-buttons {
	display: flex;
	width: 100%;
	gap: 2%;
}
.bottom-buttons img {
	width: 49%;
	height: auto;
	max-width: 49%;
}
/* 고정 하단 팝업 스타일 */
.fixed-bottom-popup {
	position: fixed;
	bottom: -100%;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	width: 90%;
	height: auto;
	max-height: 15dvh;
	padding: 1dvw;
	background-color: white;
	box-sizing: border-box;
	gap: 0dvw;
	z-index: 50;
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
	transition: bottom 0.5s ease-out;
}
.fixed-bottom-popup.show {
	bottom: 0;
}
.fixed-bottom-popup.hidden {
	display: none;
}
.popup-content {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	box-sizing: border-box;
	padding: 0 0.5dvw;
}
.popup-content img {
	width: 5dvw;
	max-width: 30px;
	height: auto;
	margin-right: 1dvw;
}
.popup-content .text {
	color: black;
	font-size: 15px;
	text-align: center;
	white-space: nowrap !important;
	overflow: hidden !important;
	line-height: 1.2;
}
.popup-buttons {
	display: flex;
	justify-content: center;
	width: 60%;
	gap: 2dvw;
	margin-top: 1dvw;
}
.popup-buttons img {
	height: auto;
	max-width: 45%;
	cursor: pointer;
}

/* LOG IN 모달 (기존 로그인) */
.modal-bg {
	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: 999;
	pointer-events: auto;
}
.modal-content {
	position: relative;
	width: 370px !important;
	height: auto;
	border: 40px solid transparent;
	box-sizing: border-box;
	border-image-source: url("/images/pages/webGame/main/popup.png");
	border-image-slice: 40 fill;
	border-image-width: 40px;
	border-image-repeat: round;
	overflow: visible;
	margin-top: 0dvh;
}
.popup-text-login {
	position: absolute;
	top: -15px;
	left: 50%;
	transform: translateX(-50%);
	width: 100px;
}
.modal-form {
	margin-top: 50px;
	text-align: center;
	color: #000;
	margin-bottom: 80px;
}
.modal-form input {
	width: 100%;
	padding: 6px 8px;
	margin: 5px 0;
	box-sizing: border-box;
	border: 2px solid #2e3245;
	border-radius: 10px;
	outline: none;
	background-color: #d7dde6;
	color: #000;
}
.modal-form input[type="checkbox"] {
	width: 1.8em;
	height: 1.8em;
	vertical-align: middle;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	border: 2px solid #2e3245;
	border-radius: 4px;
	background-color: #d7dde6;
	cursor: pointer;
	position: relative;
}
.modal-form input[type="checkbox"]:checked::after {
	content: "✓";
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-size: 1.2em;
	font-weight: bold;
	color: #2e3245;
}
.checkbox-row {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 5px;
}
.checkbox-row label {
	font-weight: bold;
	color: #d7dde6;
}
.modal-SimpanId {
	font-size: 15px;
	color: #ffffff;
}
.popup-bt-small-login {
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 200px;
	cursor: pointer;
}
.popup-bt-x {
	position: absolute;
	top: -15px;
	right: -15px;
	width: 30px;
	height: auto;
	cursor: pointer;
}
.hidden {
	display: none !important;
}
/* SIGN UP 모달 (회원가입) */
.modal-bg-signup {
	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: 999;
	pointer-events: auto;
}
.modal-content-signup {
	position: relative;
	width: 350px !important;
	height: auto;
	border: 40px solid transparent;
	box-sizing: border-box;
	border-image-source: url("/images/pages/webGame/main/popup.png");
	border-image-slice: 40 fill;
	border-image-width: 40px;
	border-image-repeat: round;
	overflow: visible;
	margin-top: 0dvh;
}
.modal-signup-description {
	font-size: 13px;
	color: #ffffff;
	margin-top: 1px;
	text-align: center;
}
.modal-text-signup {
	position: absolute;
	top: -15px;
	left: 50%;
	transform: translateX(-50%);
	width: 100px;
}
.modal-form-signup {
	margin-top: 50px;
	text-align: center;
	color: #000;
	margin-bottom: 80px !important;
}
.modal-form-signup input {
	width: 100%;
	padding: 6px 8px;
	margin: 5px 0;
	box-sizing: border-box;
	border: 2px solid #2e3245;
	border-radius: 10px;
	outline: none;
	background-color: #d7dde6;
	color: #000;
	font-size: 14px;
}
.popup-bt-small-signup {
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 200px;
	cursor: pointer;
}
.popup-bt-x-signup {
	position: absolute;
	top: -15px;
	right: -15px;
	width: 30px;
	height: auto;
	cursor: pointer;
}
.hidden-signup {
	display: none !important;
}
/* FIND PASSWORD 모달 (비밀번호찾기) */
.modal-bg-find {
	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: 999;
	pointer-events: auto;
}
.modal-content-find {
	position: relative;
	width: 370px !important;
	height: auto;
	border: 40px solid transparent;
	box-sizing: border-box;
	border-image-source: url("/images/pages/webGame/main/popup.png");
	border-image-slice: 40 fill;
	border-image-width: 40px;
	border-image-repeat: round;
	overflow: visible;
	margin-top: 0dvh;
}
.popup-text-find {
	position: absolute;
	top: -15px;
	left: 50%;
	transform: translateX(-50%);
	width: 200px;
}
.modal-form-find {
	margin-top: 50px;
	text-align: center;
	color: #000;
	margin-bottom: 80px;
}
.modal-form-find input {
	width: 100%;
	padding: 6px 8px;
	margin: 5px 0;
	box-sizing: border-box;
	border: 2px solid #2e3245;
	border-radius: 10px;
	outline: none;
	background-color: #d7dde6;
	color: #000;
}
.modal-find-description {
	font-size: 13px !important;
	color: #ffffff;
	margin-top: -1px !important;
	text-align: center;
}
.popup-bt-small-find {
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 200px;
	cursor: pointer;
}
.popup-bt-x-find {
	position: absolute;
	top: -15px;
	right: -15px;
	width: 30px;
	height: auto;
	cursor: pointer;
}
.hidden-find {
	display: none !important;
}
/* gif MODAL (바로가기안내) */
.modal-bg-gif {
	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: 999;
}
.modal-content-gif {
	position: relative;
	width: 370px;
	height: 550px;
	border: 40px solid transparent;
	box-sizing: border-box;
	border-image-source: url("/images/pages/webGame/main/popup.png");
	border-image-slice: 40 fill;
	border-image-width: 40px;
	border-image-repeat: round;
	overflow: visible;
	margin-top: 0dvh;
}
.popup-text-gif {
	position: absolute;
	top: -15px;
	left: 50%;
	transform: translateX(-50%);
	width: 220px;
}
.popup-gif {
	position: absolute;
	top: calc(50% + 15px);
	left: 50%;
	transform: translate(-50%, -50%);
	width: 260px;
	border: 5px solid #2e3245;
	border-radius: 10px;
}
.popup-bt-x-gif {
	position: absolute;
	top: -15px;
	right: -15px;
	width: 30px;
	height: auto;
	cursor: pointer;
}
.hidden-gif {
	display: none !important;
}

#errorPopup {
	position: fixed;
	background-color: rgba(0, 0, 0, 1);
	display: flex;
	padding: 10px;
	border-radius: 10px;
	z-index: 1000;
	width: auto;
	white-space: nowrap;
	top: 0dvh;
	left: 50%;
	transform: translate(-50%, -100%);
	transition: transform 0.2s ease-out;
	outline: 2px solid #666666;
}
#errorPopup.show {
	transform: translate(-50%, 0);
}
#errorPopup p {
	color: red;
	font-size: 15px;
	margin: 0;
	text-align: center;
}


/* Hover & Active 효과 (공통) */
.button-start img:hover,
.button-container img:hover,
.bottom-buttons img:hover,
.popup-content img:hover,
.popup-buttons img:hover {
	filter: brightness(0.9);
	transition: filter 0.2s ease;
}
.button-start img:active,
.button-container img:active,
.bottom-buttons img:active,
.popup-content img:active,
.popup-buttons img:active {
	filter: brightness(1);
	transform: translateY(1px);
	transition: transform 0.2s ease;
}
.mini-icon{
  position: absolute;
  top:0%;
  left: 0%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 0px;
  width: 11dvw;
  max-width: 100px;
  z-index: 50;
}


.mini-icon img, .notice-container {
	height: auto;
	width: 11dvw; /* 모든 아이콘의 고정 너비. 원하는 크기로 조절하세요. */
	max-width: 100px;
	flex-shrink: 0; /* 중요: 공간이 부족해도 이 요소들의 크기가 줄어들지 않도록 합니다. */
	display: block; /* 이미지 하단에 생길 수 있는 미세한 공간 제거 */
	cursor: pointer;
}


.notice-container {
	position: relative;
}

#bt_icon {
	position: absolute; /* .notice-container를 기준으로 위치 지정 */
	top:  0dvw;   /* bt_notice 이미지보다 위로 5px 이동 (음수 값으로 조절) */
	right: 0dvw; /* bt_notice 이미지보다 오른쪽으로 5px 이동 (음수 값으로 조절) */
	width: 4dvw !important; /* bt_icon의 크기 (원하는 크기로 조절) */
	max-width: 40px !important;
	height: auto; /* 이미지 비율 유지 */
	z-index: 51; /* bt_notice보다 위에 오도록 z-index를 높게 설정 */
}

#bt_notice {
	width: 100%; 
	height: 100%; 
	object-fit: contain; 
}



.noticeModal-content{
	display: flex;
	flex-direction: column;
	position: relative;
	width: 95dvw;
	height: 95dvh;
	max-width: 1200px;
	max-height: 900px;
	border: 40px solid transparent;
	box-sizing: border-box;
	border-image-source: url("/images/pages/webGame/main/popup.png");
	border-image-slice: 40 fill;
	border-image-width: 40px;
	border-image-repeat: round;
	margin-top: 0svh;
}

.noticeModal-bg{
	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: 999;
}



.faq-scrollable-content {
	flex-grow: 1; /* 남은 세로 공간을 모두 차지하도록 합니다 */
	overflow-y: auto; /* 내용이 넘치면 세로 스크롤바가 생깁니다 */
	padding-right: 7px; /* 스크롤바 너비만큼 패딩을 주어 텍스트가 스크롤바에 가려지지 않도록 (선택 사항) */
}

/* 스크롤바 전체 영역 */
.faq-scrollable-content::-webkit-scrollbar {
	width: 6px;  /* 세로 스크롤바의 너비 (모바일처럼 얇게) */
	height: 6px; /* 가로 스크롤바의 높이 (모바일처럼 얇게) */
	background-color: transparent; /* 배경을 투명하게 하여 콘텐츠 위에 겹쳐 보이도록 */
}

/* 스크롤바 막대 (실제로 움직이는 부분) */
.faq-scrollable-content::-webkit-scrollbar-thumb {
	background-color: rgba(0, 0, 0, 0.3); /* 막대 색상을 투명하게 (움직일 때만 보이도록) */
	border-radius: 3px; /* 막대 모서리 둥글게 */
}

/* 스크롤바 막대에 마우스 오버 시 */
.faq-scrollable-content::-webkit-scrollbar-thumb:hover {
	background-color: rgba(0, 0, 0, 0.5); /* 마우스 오버 시 좀 더 진하게 */
}

/* 스크롤바 트랙 (막대가 움직이는 배경) */
.faq-scrollable-content::-webkit-scrollbar-track {
	background-color: transparent; /* 트랙 배경도 투명하게 */
}

/* 스크롤바 화살표 버튼 숨기기 (모바일 스크롤바는 버튼이 없음) */
.faq-scrollable-content::-webkit-scrollbar-button {
	display: none;
}

.faqModal-content{            
	width: 100%;
	height: 100%;
	max-width: 700px;
	max-height: 1300px;
	border: 40px solid transparent;
	box-sizing: border-box;
	border-image-source: url("/images/pages/webgame/main/popup.png");
	border-image-slice: 40 fill;
	border-image-width: 40px;
	border-image-repeat: round;
	overflow: visible;
	margin-top: 0dvh;
	display: flex; /* 자식 요소들을 flex 아이템으로 만듭니다 */
	flex-direction: column; /* 자식 요소들을 세로 방향으로 정렬합니다 */
	box-sizing: border-box; /* 패딩이 전체 크기에 포함되도록 */
}
.faqModal-content-txt{
	display: flex; /* 자식 요소들을 flex 아이템으로 만듭니다 */
	flex-direction: column; /* 자식 요소들을 세로 방향으로 정렬합니다 */
	height: 100%; /* 부모 (faqModal-content)의 높이를 채우도록 */
	box-sizing: border-box; /* 패딩이 전체 크기에 포함되도록 */
	padding: 0px 5px; /* 내부 여백 추가 */        
}

.faqModal-bg{
	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: 999;
	position: relative;
}

.faq-modal-wrapper {
	position: relative; /* 중요: X 버튼의 기준점이 됩니다. */
	display: flex; /* 내부 콘텐츠를 가운데 정렬하거나 유연하게 배치하기 위해 */
	justify-content: center;
	align-items: center;
	max-width: 700px;
	max-height: 1255px;
	width: 99dvw; /* faqModal-content와 동일하게 */
	height: 95dvh; /* faqModal-content와 동일하게 */
}

.popup-bt-x-faq {
	position: absolute;
	width: 30px;
	height: auto;
	cursor: pointer;
	z-index: 1001;
	top: 25px;
	right: 25px;
}

.faqcontainer {
	background: rgba(255, 255, 255, 0);
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

h1 {
	color: #ffffff;
	text-align: center;
	font-size:clamp(2em, 5dvw, 4em) !important;
	line-height: 0.8; /* 줄 간격 조절 */
	margin-bottom: 20px !important;
	line-height: 0.8 !important;          
}

.category-title {
	font-size:clamp(1.5em, 2dvw, 3em) !important;
	margin-top: 10px;
	margin-bottom: 10px;
	color: #ffffff;
	border-bottom: 2px solid #e0e0e0;
	padding-bottom: 0px;
}
.faq-item {
	margin-bottom: 5px; 
	border: 2px solid #e0e0e0;
	border-radius: 5px;
	overflow: hidden;

}
.faq-question {
	font-size:clamp(0.8em, 1dvw, 2em) !important;
	background-color: #e6efff;
	color: #000000;
	padding: 15px 20px;
	cursor: pointer;
	font-weight: bold;
	display: block;
	position: relative;
}
.faq-question::after {
	content: '+';
	position: absolute;
	right: 10px;
	top: 50%;
	transform: translateY(-50%);
	transition: transform 0.3s ease;
}
.faq-question.active::after {
	content: '-';
	transform: translateY(-50%) rotate(0deg); /* No rotation needed for '-' */
}
.faq-answer {
	font-size:clamp(0.8em, 1dvw, 2em) !important;
	color: #ffffff;
	padding: 15px 20px;
	background-color: rgba(255, 255, 255, 0);
	border-top: 1px solid #eee;
	display: none; /* Hidden by default */
}
.faq-answer p {
	margin: 0 0 10px 0;
}
.faq-answer ol {
    padding-left: 20px;
    list-style: decimal;
}
.faq-answer ul {
    padding-left: 10px;
    list-style: none;
}
.faq-answer ul li::before {
    content: "- ";
    margin-right: 1px;
}
.faq-answer li {
	mar gin-bottom: 5px;
}

.footer-notice {
	position: fixed; 
    bottom: 0; 
    left: 0;
    background-color: rgba(0, 0, 0, 0.5);
    color: #fff;
    padding: 1px;
    text-align: center; 
    font-size:clamp(0.6em, 2dvw, 0.8em);
    line-height: 1.5; 
    width: 100%; 
    box-sizing: border-box;

	display: flex; /* 가로 배치를 위해 플렉스 박스 사용 */
	align-items: center; /* 이미지와 텍스트의 세로 중앙 정렬 */
	justify-content: center; /* 전체 내용을 중앙으로 배치 (좌측 정렬 원하시면 제거) */
	gap: 6px; /* 이미지와 텍스트 사이의 간격 */
	text-align: left; /* 텍스트는 좌측 정렬 */
	padding: 2px;
}

.age-limit-img {
	width: 80px;
	height: 80px;
	flex-shrink: 0; /* 공간이 부족해도 이미지가 찌그러지지 않게 설정 */
	object-fit: contain;
}


.noticeModal-wrapper {
	position: relative; /* 중요: X 버튼의 기준점이 됩니다. */
	display: flex; /* 내부 콘텐츠를 가운데 정렬하거나 유연하게 배치하기 위해 */
	justify-content: center;
	align-items: center;
	/* wrap의 크기는 faqModal-content의 max-width/height에 따라 결정됩니다. */
	/* faqModal-content와 동일한 max-width/height를 가지도록 설정 */
	width: 95dvw;
	height: 95dvh;
	max-width: 1200px;
	max-height: 900px;
}
h3 {
	color: #ffffff;
	text-align: center;
	font-size:clamp(1em, 2svw, 4em) !important;
	line-height: 0.8px; /* 줄 간격 조절 */
	margin-bottom: 20px !important;
	line-height: 1 !important;          
}
        
.noticeModal-img{
	display: flex;
	flex-direction: row;
	justify-content: center;
}


.noticeModal-img img {
	/* 각 이미지가 부모(.noticeModal-img) 너비의 일정 퍼센트를 차지하도록 설정 */
	width: 90%; /* 예시: 각 이미지가 가로 공간의 45%를 차지 */
	height: auto; /* 이미지의 원본 비율을 유지하며 높이 자동 조절 */
	/* max-width: 100%; /* 할당된 공간을 초과하지 않도록 보장 */
	object-fit: contain; /* 이미지가 잘리지 않고 컨테이너에 맞게 축소되도록 (서로 다른 비율의 이미지가 있을 때 유용) */
}
        
        
.notice-txt {
	font-size:clamp(0.7em, 1svw, 2em) !important;
	color: #ffffff;
	padding: 15px 20px;
	background-color: rgba(255, 255, 255, 0);
}
.notice-txtr p {
       margin: 0 0 10px 0;
}
.notice-txt ol, .notice-txt ul {
	margin-top: 10px;
	margin-bottom: 10px;
	padding-left: 20px;
	list-style-type: decimal;
}
.notice-txt li {
       margin-bottom: 5px;
}





@media screen and (max-height: 1035px) and (min-aspect-ratio: 1/1) {
	.logo{
		bottom: 40%;
	}    
}
@media screen and (max-height: 840px) and (min-aspect-ratio: 1/1) {
	.logo{
		bottom: 45%;
	}    
}





/* 세로 모드 (Portrait) */
@media screen and (max-aspect-ratio: 1/1) {
	.logo {
		top: -1.5dvh;
		right: 0dvh;
		width: 40dvw;
	}
	#logo2 {
		display: none;
	}
	body {
		background-size:
		auto 85dvh,
		auto 100dvh;
		background-position:
		center bottom,
		left top;
	}
	.fixed-bottom-popup {
		width: 95%;
	}
	.popup-content img {
		width: 7dvw;
		max-width: 40px;
		margin-right: 1.5dvw;
	}
	.popup-content .text {
		font-size: 18px;
		line-height: 1.3;
		font-weight: bold;
	}
	.popup-buttons {
		width: 70%;
		gap: 1dvw;
		margin-top: 0dvw;
	}

	.footer-notice {
		gap: 2px; /* 간격을 조금 좁힘 */
		padding: 2px;
	}

	.age-limit-img {
		width: 50px;  /* 모바일에서 작게 조절 (원하는 수치로 변경 가능) */
		height: 50px;
	}
}

/* 가로 모드 (Landscape) */
@media screen and (min-aspect-ratio: 1/1) {

	/*시작버튼추가*/
	.button-start {
		bottom: 20%; 
		left: 80%;
		transform: translateX(-50%);
		flex-direction: column;
		gap: 15px;
		align-items: center;
		width: 50dvh;
		max-width: 400px;
	}
	.button-start > img {
		width: auto;
		height: auto;
		max-height: 20dvh;
	}

	.modal-content {
		height: 260px !important;
	}
	.popup-text-login {
		width: 80px !important;
	}
	.modal-form {
		margin-top: 35px !important;
		margin-bottom: 80px !important;
	}
	.modal-form input {
		width: 100%;
		padding: 2px 10px !important;
		margin: 4px 0 !important;
		box-sizing: border-box;
		border: 2px solid #2e3245;
		border-radius: 10px;
		outline: none;
		background-color: #d7dde6;
		color: #000;
		font-size: 13px !important;
	}
	.modal-SimpanId {
		font-size: 13px !important;
		color: #ffffff;
	}
	.popup-bt-small-login {
		bottom: -20px !important;
		width: 170px !important;
	}
	.popup-bt-x {
		width: 24px !important;
	}
	.modal-content-signup {
		width: 350px !important;
		height: 100dvh !important;
		max-height: 370px !important;
		margin-top: 1vh !important;
	}
	.modal-text-signup {
		top: -20px !important;
		height: auto;
		width: 80px !important;
	}
	.popup-bt-x-signup {
		top: -15px;
		right: -15px;
		width: 20px !important;
		height: auto;
	}
	.modal-form-signup {
		margin-top: 10px !important;
		margin-bottom: 10px !important;
		font-size: 20px !important;
	}
	.modal-form-signup input {
		width: 100%;
		padding: 3px 10px !important;
		margin: 1px 0;
		box-sizing: border-box;
		border: 2px solid #2e3245;
		border-radius: 10px;
		outline: none;
		background-color: #d7dde6;
		font-size: 11px !important;
		color: #000;
	}
	.modal-signup-description {
		font-size: 9px !important;
		color: #ffffff;
		margin-top: -1px !important;
		text-align: center;
	}
	.popup-bt-small-signup {
		position: absolute;
		bottom: -20px !important;
		width: 130px !important;
	}
	.modal-content-find {
		height: 300px !important;
	}
	.popup-text-find {
		width: 180px !important;
	}
	.modal-form-find {
		margin-top: 35px !important;
		margin-bottom: 80px !important;
	}
	.modal-form-find input {
		width: 100%;
		padding: 2px 10px !important;
		margin: 4px 0 !important;
		box-sizing: border-box;
		border: 2px solid #2e3245;
		border-radius: 10px;
		outline: none;
		background-color: #d7dde6;
		color: #000;
		font-size: 13px !important;
	}
	.modal-find-description {
		font-size: 9px !important;
		color: #ffffff;
		margin-top: -1px !important;
		text-align: center;
	}
	.popup-bt-small-find {
		bottom: -20px !important;
		width: 170px !important;
	}
	.popup-bt-x-find {
		width: 24px !important;
	}
	.modal-content-gif {
		position: relative;
		width: 300px !important;
		height: 350px !important;
		top: calc(%);
	}
	.popup-text-gif {
		position: absolute;
		top: -15px;
		left: 50%;
		transform: translateX(-50%);
		width: 180px !important;
	}
	.popup-gif {
		top: calc(50% + 15px);
		width: 160px !important;
	}
	.popup-bt-x-gif {
		position: absolute;
		top: -15px;
		right: -15px;
		width: 25px !important;
		height: auto;
		cursor: pointer;
	}
	.hidden-gif {
		display: none !important;
	}
	.logo {
	  display: none;
	}
	body {
		background-size:
		auto 120dvh,
		cover;
		background-position:
		calc(50% - 10dvw) 10dvh,
		top;
	}
	.button-container {
		bottom: 10%;
		left: 80%;
		transform: translateX(-50%);
		flex-direction: column;
		gap: 15px;
		align-items: center;
		width: 50dvh;
		max-width: 400px;
	}
	.button-container > img {
		width: auto;
		height: auto;
		max-height: 20dvh;
	}
	.bottom-buttons {
		display: flex;
		width: auto;
		gap: 0.5dvw;
	}
	.bottom-buttons img {
		width: auto;
		height: auto;
		max-height: 20dvh;
		max-width: 49%;
	}
	.popup-content {
		display: flex;
		align-items: center;
		justify-content: flex-start;
		width: auto;
		padding: 0;
		margin-right: 1dvw;
	}
	.popup-content img {
		width: 3dvw;
		max-width: 25px;
		margin-right: 0.5dvw;
	}
	.popup-content .text {
		font-size: 16px;
		line-height: 1.5;
		text-align: left;
		font-weight: normal;
	}
	.popup-buttons {
		display: flex;
		flex-direction: row;
		justify-content: flex-end;
		align-items: center;
		width: auto;
		margin-top: 0;
		gap: 0.5dvw;
	}
	.popup-buttons img {
		max-width: 10dvw;
		height: auto;
		max-height: 8dvh;
		padding: 0.3dvw 0.6dvw;
	}

	.footer-notice {
		font-size:clamp(0.1em, 1.5sdvw, 0.8em);
	}

	.footer-notice {
		gap: 2px; /* 간격을 조금 좁힘 */
		padding: 2px;
	}

	.age-limit-img {
		width: 50px;  /* 모바일에서 작게 조절 (원하는 수치로 변경 가능) */
		height: 50px;
	}

}

@media screen and (max-width: 1024px) and (min-aspect-ratio: 1/1) {
	/*시작버튼추가*/
	.button-start {
		width: 40dvh;
	}

	.logo{
		bottom: 40%;
	}
	.button-container {
		width: 40dvh;
	}
	 
	.mini-icon img, .notice-container{
		width: 7dvw !important;
	}
	#bt_icon {
		width: 3dvw !important; 
	}
}

@media screen and (min-height: 500px) and (min-aspect-ratio: 1/1) {
	.modal-content-gif {
		position: relative;
		width: 400px !important;
		height: 500px !important;
	}
	.popup-text-gif {
		position: absolute;
		top: -15px;
		left: 50%;
		transform: translateX(-50%);
		width: 200px !important;
	}
	.popup-gif {
		top: calc(50% + 15px);
		width: 240px !important;
	}
	.popup-bt-x-gif {
		position: absolute;
		top: -15px;
		right: -15px;
		width: 30px;
		height: auto;
		cursor: pointer;
	}
	.hidden-gif {
		display: none !important;
	}

	.footer-notice {
		gap: 2px; /* 간격을 조금 좁힘 */
		padding: 2px;
	}

	.age-limit-img {
		width: 50px;  /* 모바일에서 작게 조절 (원하는 수치로 변경 가능) */
		height: 50px;
	}
}

@media screen and (min-height: 600px) and (min-aspect-ratio: 1/1) {
	.modal-content-gif {
		position: relative;
		width: 400px !important;
		height: 600px !important;
	}
	.popup-text-gif {
		position: absolute;
		top: -15px;
		left: 50%;
		transform: translateX(-50%);
		width: 200px !important;
	}
	.popup-gif {
		top: calc(50% + 15px);
		width: 300px !important;
	}
	.popup-bt-x-gif {
		position: absolute;
		top: -15px;
		right: -15px;
		width: 30px;
		height: auto;
		cursor: pointer;
	}
	.hidden-gif {
		display: none !important;
	}

	.footer-notice {
		gap: 2px; /* 간격을 조금 좁힘 */
		padding: 2px;
	}

	.age-limit-img {
		width: 50px;  /* 모바일에서 작게 조절 (원하는 수치로 변경 가능) */
		height: 50px;
	}

}

/* 구독 안 된 상태에서만 보이도록 기본 설정 */
#notification-modal {
	display: none; 
}






/* 알림 버튼 */
        .notification-button {
            position: relative;
            background-color: #f5f5f5;
            color: #fff;
            font-weight: bold;
            padding: 0.2rem 0.7rem;
            border-radius: 9999px;
            font-size: 1.125rem;
            border: none;
            cursor: pointer;
            transition: all 0.3s ease-in-out;
            transform: scale(1);
            border: 2px solid #3b3b3b;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.7);
            transform-origin: right;
            margin-right: -25px;
        }
        .notification-button:hover {
            transform: scale(1.05);
        }
        .notification-button:active {
            transform: scale(0.95);
        }

        .notification-button-active {
            width: 11rem;
        }
        
        .notification-button > div {
            display: flex;
            align-items: center;
        }

        .notification-button-text {
            color: #383838;
            white-space: nowrap;
        }

        .bell-container {
            position: relative;
            width: 2rem;
            height: 2rem;
            margin-left: 0.5rem;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .bell-icon-base {
            color: #383838;
            font-size: 1.5rem;
            transition: color 0.3s;
        }
        .slash-icon {
            position: absolute;
            font-size: 1.25rem;
            color: #383838;
            transition: opacity 0.3s;
        }
        .bell-on-icon {
            position: absolute;
            font-size: 1.5rem;
            color: #383838;
            transform: scale(0);
            transition: transform 0.3s;
        }


        /* 애니메이션 */
        @keyframes ring-bell {
            0% { transform: rotate(0deg); }
            20% { transform: rotate(20deg); }
            40% { transform: rotate(-20deg); }
            60% { transform: rotate(15deg); }
            80% { transform: rotate(-10deg); }
            100% { transform: rotate(0deg); }
        }

        .animate-ring {
            animation: ring-bell 0.8s ease-in-out;
        }

        .bell-icon {
            transform-origin: top;
        }

        @keyframes scale-up {
            from { transform: scale(0); opacity: 0; }
            to { transform: scale(1); opacity: 1; }
        }

        .scale-up {
            animation: scale-up 0.5s ease-out;
        }
      /* 알림 버튼 끝 */


      /* 푸시 팝업 */
     .modal-backdrop {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.7);
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      z-index: 900;
    }
 .popmodal-content {
      background-color: #2d3748;
      color: #e2e8f0;
      border-radius: 1rem;
      padding: 2rem;
      width: 95dvw;
      max-width: 700px;
      position: relative;
      text-align: center;
      box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    }
    .modal-close-btn {
      position: absolute;
      top: 1rem;
      right: 1rem;
      width: 32px;
      height: 32px;
      background-color: rgba(0, 0, 0, 0.5);
      color: white;
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 20px;
      font-weight: bold;
      cursor: pointer;
      border: none;
      transition: background-color 0.2s, transform 0.2s;
    }
        .poptoday-close-button {
            background-color: transparent;
            color: #d1d5db;             font-size: 17px;
            font-weight: 700;
            border: none;
            cursor: pointer;
            text-decoration: underline;
          text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7);
          margin-top:10px;
          
        }
      /* 푸시 끝 */