:root {
	--primary: #d62329;
	--secondary: #ee555a;
	--third: #ffcacc;
	--bg: #fff1f0;
	--text-1: #313131;
	--text-2: #7a7a7a;
	--grey: #ddd;
	--white: #fff;
	--button: #ff6368;

  --saju: #e5a604;
  --tarot: #884dac;
  --sin: #d62329;

	--font-family: "Pretendard", sans-serif;
	--second-family: "Gapyeong Hanseokbong", sans-serif;
	--third-family: "Inter", sans-serif;
	--font3: "Pretendard Variable", sans-serif;
	--font4: "Gmarket Sans TTF", sans-serif;
	--font5: "NPS font", sans-serif;

	--vh: 1vh;
}

@supports (height: 100dvh) {
	:root { 
		--vh: 1dvh;
	}
}



/* 공통 */
* { margin: 0; padding: 0; outline: none; box-sizing: border-box; -webkit-tap-highlight-color: transparent;}
body {margin: 0; padding: 0; -ms-overflow-style: none; scrollbar-width: none; }
html::-webkit-scrollbar {display: none;}
html { scroll-behavior: smooth; }
html, body {font: 400 16px/1.3 'Pretendard', sans-serif;  color: var(--text-1); width: 100%; position: relative;}
ul, li {list-style: none;}
a {text-decoration: none; color: inherit; -webkit-tap-highlight-color: transparent;}
img {max-width: 100%;}
button { font-family: inherit; border: none; background-color: transparent; outline: 0;  cursor: pointer; }
input,textarea,button,select {font-family: inherit;}
.swiper-button-prev:after, .swiper-rtl .swiper-button-next:after,
.swiper-button-next:after, .swiper-rtl .swiper-button-prev:after {display: none;}

body.hidden { overflow: hidden;}
body::before { content: "";  position: fixed;  left: 0;  top: 0;  width: 100%;  height: 100%; background-color: rgba(0,0,0,0.5); z-index: 100;  transition: all 0.4s ease; opacity: 0; pointer-events: none;cursor: pointer;}
body.hidden::before {opacity: 1;}
  
.wrap {width: 100%; min-height: 100vh; position: relative; display: flex; flex-direction: column;}
.pc {display: block;}
.tablet {display: none !important;}
.mobile { display: none !important;}
.container { position: fixed; top: 0; width: 100%; padding-top: 116px; flex: 1; z-index: 95; }
.inner {position: relative; width: 90%; max-width: 1120px; margin-left: auto; margin-right: auto;}
.section {position: relative; width: 100%;}


  
/*헤더*/
.header { position: fixed; top: 0; left: 0; width: 100%; height: 116px; padding-top: 2.25rem; z-index: 90; background: var(--white);}
.header .h_inner { display: flex; align-items: center; justify-content: flex-start;  padding: 1rem 0; gap: 3.75rem;}
.header .h_logo { width: 154px;}
.header .h_logo > a { display: flex; align-items: center; justify-content: center;}
.header .h_selbox { display: none; border-left: 1px solid rgba(161, 161, 161, 0.5); border-right: 1px solid rgba(161, 161, 161, 0.5); padding: 0.15rem 2rem;}
.header .h_selbox .h_select { appearance: none; font-weight: 600; font-size: 1.6rem;  color: #000; border: none; background: url(../img/h_select.png) no-repeat right center / 1.3rem 0.8rem #fff; padding-right: 1.6rem;cursor: pointer;}
.header .h_schbox { position: relative; width: 640px; height: 48px; border: 2.5px solid var(--primary); border-radius: 0.5rem; padding: 0.5rem 1.5rem 0.5rem 1.25rem; display: flex; align-items: center; gap: 1rem; flex: 1;}
.header .h_schbox .input_sch { flex: 1; width: 100%; height: 100%; font-size: 1rem; line-height: 90%; color: var(--text-1); border: none;}
.header .h_schbox .input_sch::placeholder { color: var(--text-2);}
.header .h_schbox .sch_btn { background: url(../img/h_search.png) no-repeat center / contain; width: 1.18rem; aspect-ratio: 1 / 1; display: inline-block;}
.header .h_side { display: flex; align-items: center; gap: 1.125rem;}
.header .h_side .side_btn { font-size: 1rem; line-height: 90%; color: var(--text-1); display: flex; align-items: center; gap: 0.625rem;}
.header .h_side .side_btn.coin_btn { color: var(--primary);}
.header .h_side .side_btn .icon { width: 1.125rem;  aspect-ratio: 1 / 1;}
.header .h_side .bar { background: var(--text-1); width: 1px; height: 0.875rem;}
  

/* 푸터 */
.footer { position: relative; background: #d9d9d9;}
.footer .f_inner { display: flex; align-items: center; justify-content: center; gap: 7.188rem; width: 100%; max-width: 100%; padding: 0.813rem 0 0.938rem;}
.footer .f_inner::after { content: ""; width: 154px;}
.footer .f_logo { display: flex; width: 154px;}
.footer .f_cont { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.875rem; max-width: 625px;}
.footer .f_cont .f_copyright { font-weight: 500; font-size: 0.75rem; line-height: 130%; letter-spacing: -0.02em; color: #868686;}
.footer .f_cont .f_sns { display: flex; align-items: center; justify-content: center;  gap: 0.688rem;}
.footer .f_cont .f_sns > li { font-size: 0.875rem; line-height: 130%; letter-spacing: -0.02em; color: #868686;}
.footer .f_cont .f_sns > li .link { display: inline-block; font-weight: 900;}
.footer .f_cont .f_info { font-weight: 500; font-size: 0.75rem; line-height: 130%; letter-spacing: -0.02em; text-align: center; color: #868686; word-break: keep-all;}
.footer .f_more_info { display: none;}


.page_titbox { display: flex; align-items: center; gap: 0.125rem; margin-bottom: 1.125rem;} 
.page_titbox img, .img_title { width: 1.875rem;}
.page_titbox .txt { font-weight: 800; font-size: 1.438rem; color: var(--text);}
.page_titbox .link { display: flex; align-items: center; gap: 0.75rem; }
.page_titbox.detail_ver { gap: 0.75rem;}
.page_titbox.detail_ver img {opacity: 0.45;}
.page_titbox.detail_ver .txt { font-size: 1.5rem; font-weight: 700; color: #a3acbb;}
.page_titbox.detail_ver > .title { font-weight: 800; font-size: 2rem;  color: var(--text); margin-left: 0.75rem;}


.tbl_btnbox { display: flex ; justify-content: center; align-items: center; gap: 1.25rem; margin-top: 1.875rem; }
.tbl_btnbox .btn.btn_typeA { width: 254px; box-shadow: 0 0.125rem 0.375rem 0 rgba(33, 108, 150, 0.25); background: #237bff; color: #fff; }
  

/* 카테고리 */
.category { position: fixed; left: 0; top: 116px; width: 100%; height: 55px; background: var(--white); z-index: 90;}
.category .inner { max-width: 720px;}
.category .catebox { display: flex; align-items: center; justify-content: space-between;}
.category .catebox > li { font-weight: 600; font-size: 1.125rem; line-height: 90%; color: var(--text-1);}
.category .catebox > li.active { color: var(--primary);}
.category .catebox > li .link { display: flex;  align-items: center;  justify-content: center;  width: auto;  height: 3.438rem;}


/* 네비게이션 */
.navigaion { position: fixed; left: 0; bottom: 0; width: 100%; z-index: 90; background: #fff; box-shadow: 0 1px 19px 0 rgba(0, 0, 0, 0.13); display: none;}
.navigaion .nav { display: flex; justify-content: space-between; padding: 0 2.5rem;}
.navigaion .nav > li { padding: 0.9rem 0;}
.navigaion .nav > li > .link { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; font-size: 1rem; text-align: center; color: #535353;}
.navigaion .nav > li.active > .link { color: var(--primary);font-weight: 600;}
.navigaion .nav > li > .link .icon { position: relative; background: no-repeat center / contain; width: 2.2rem; aspect-ratio: 1 / 1;}
.navigaion .nav > li > .link .icon .off,
.navigaion .nav > li > .link .icon .on {position: absolute; left: 50%; top: 50%;transform: translate(-50%,-50%); width: 100%; transition: all 0.4s ease;}
.navigaion .nav > li > .link .icon .on {opacity: 0;}
.navigaion .nav > li.active > .link .icon .off {opacity: 0;}
.navigaion .nav > li.active > .link .icon .on {opacity: 1;}


/* 모달 */
.modal { position: fixed; left: 0; top: 0; width: 100%; height: 100%; z-index: 100; transition: all 0.4s ease; pointer-events: none; opacity: 0;}
.modal.show { pointer-events: auto; opacity: 1;}
.modal .modal_box { position: absolute; left: 50%;  top: 50%; transform: translate(-50%, -50%); border-radius: 0.75rem; background: var(--white); padding: 2.25rem 0.813rem 0.875rem; min-width: 350px; max-width: 90%; max-height: 90%; display: flex;  flex-direction: column; align-items: center; transition: all 0.4s ease; margin-top: 2.5rem; opacity: 0; overflow: hidden;}
.modal.show .modal_box { margin-top: 0; opacity: 1;}
.modal .modal_box .modal_logo { margin-bottom: 1.125rem; width: 6.5rem;}
.modal .modal_box .modal_title { font-weight: 600; font-size: 1.25rem; color: #323232; margin-bottom: 0.5rem;}
.modal .modal_box .modal_desc { font-size: 0.875rem; color: #858585;}
.modal .modal_box .modal_btnbox { display: flex; gap: 0.625rem; margin-top: 2.688rem; width: 100%;}
.modal .modal_box .modal_btnbox .btn { width: 100%; height: 3rem; background: var(--primary); border-radius: 0.5rem; font-weight: 800; font-size: 1rem; color: var(--white);}


/* 폼 */
.form_box { display: flex; flex-direction: column; gap: 1.25rem;}
.form_item { display: flex; flex-direction: column; gap: 0.5rem;}
.form_item .time_box .txt { color: var(--text-2); font-size: 0.875rem;}
.form_item .time_box .time { color: var(--primary); font-size: 0.875rem;}

.label_text { font-weight: 600; font-size: 1rem; color: #222;}
.input_box { position: relative;}
.input_box .input_text { border: none; border-radius: 0.375rem; width: 100%; height: 2.5rem; padding: 0 1rem; background: #f9f9f9; font-weight: 500; font-size: 0.875rem; color: var(--text-1);}
.input_box .input_text::placeholder { color: rgba(0, 0, 0, 0.4);}
.input_box .input_textrea { border: none; border-radius: 0.375rem; width: 100%; min-height: 100px; padding: 0.5rem 1rem; background: #f9f9f9; font-weight: 500; font-size: 0.875rem; color: var(--text-1);}
.input_box .input_textrea::placeholder { color: rgba(0, 0, 0, 0.4);}
.input_box .select { appearance: none; width: 100%; height: 2.5rem; background: url(../img/select_arrow.png) no-repeat right 1.25rem center / 0.813rem auto; border: 2px solid #535353; border-radius: 0.375rem; padding: 0 1rem; cursor: pointer; font-weight: 500; font-size: 0.875rem; color: rgba(0, 0, 0, 0.5);}
.input_box.btn_ver { display: flex; gap: 0.5rem;}
.input_box.btn_ver .input_text { flex: 1;}
.input_box.btn_ver .input_btn { height: 2.5rem;  border: 2px solid #535353; border-radius: 0.375rem; background: #535353; padding: 0 1.25rem; font-weight: 700; font-size: 0.938rem; color: var(--white);}
.input_box.email_ver { display: flex; align-items: center; gap: 1rem;}
.input_box.email_ver .txt { font-weight: 500; font-size: 1.125rem; color: rgba(0, 0, 0, 0.7);}
.input_box.email_ver .input_text { flex: 1;}
.input_box.email_ver .select { width: 155px;}

.check_box { border-radius: 0.5rem; background: #f8f8fa; display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.5rem 1rem;}
.check_box .input_check { position: relative; margin: 0.188rem; width: 1.125rem; aspect-ratio: 1 / 1; appearance: none; cursor: pointer; border: 1px solid #d4d4d8; background: #fff; border-radius: 0.25rem;}
.check_box .input_check::before { content: ""; background: url(../img/ico_check_off.png) no-repeat center / contain; width: 0.625rem; aspect-ratio: 1 / 0.75; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);}
.check_box .input_check:checked { border-color: var(--color_main); background: var(--color_main);}
.check_box .input_check:checked::before { background-image: url(../img/ico_check_on.png);}


/* 요소 */
.more_box { display: flex; justify-content: center;}
.more_box .more { font-weight: 700; font-size: 1rem; color: var(--text-2); display: flex; align-items: center; justify-content: center; gap: 1.25rem; border: 1px solid var(--text-2); border-radius: 1.25rem; padding: 0 2.5rem; height: 40px;}
.more_box .more .arrow { background: url(../img/more_arrow.png) no-repeat center/contain;  width: 1rem; aspect-ratio: 1/1;}

.emoji { display: flex; align-items: center; gap: 0.375rem; flex-wrap: wrap;}
.emoji_badge { height: 33px; border-radius: 100px; padding: 0 0.75rem 0 0.375rem; font-weight: 700; font-size: 0.813rem; display: flex; align-items: center; justify-content: center; gap: 0.625rem;}
.emoji_badge .icon { width: 1.25rem;}
.emoji_badge.emoji1 { border: 1px solid var(--third); background: #fff4f3; color: var(--primary);}
.emoji_badge.emoji2 { border: 1px solid #f0de80; background: #fffbef; color: #bb9612;}
.emoji_badge.emoji3 { border: 1px solid #30d216; background: #f0ffee; color: #1e9537;}
.emoji_badge.emoji4 { border: 1px solid #a6d4ff; background: #f3f8ff; color: #2375d6;}
.emoji_badge.emoji5 { border: 1px solid #f1caff; background: #faf3ff; color: #9d23d6;}

.mobile_path { display: none;}

.mob_top_banner { /* display: none; */}


.sound-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; -webkit-white-space: inset(50%); clip-path: inset(50%); border: 0;}


.coinRecharge_wrap .coinbox .payment_box .pay_btn.disabled,
.coinRecharge_wrap .coinbox .payment_box .pay_btn:disabled {
  background: #ccc;       /* 회색 배경 */
  color: #666;            /* 텍스트도 흐리게 */
  cursor: not-allowed;    /* 커서 변경 */
  opacity: 0.6;           /* 흐리게 표시 */
  pointer-events: none;   /* 클릭 방지 */
}




/* 25.06.06 작업*/
.header .h_side2 { display: flex; align-items: center;  gap: 0.438rem; display: none;}
.header.nonmember_ver .h_side {display: none;}
.header.nonmember_ver .h_side2 {display: flex}
.header .h_side2 .side_btn2 { font-weight: 600;  font-size: 1rem;  line-height: 90%;  display: flex;  align-items: center;  justify-content: center;  padding: 0.406rem 0.688rem;  border-radius: 0.375rem;}
.header .h_side2 .side_btn2.login_btn { color: var(--text-1); background: var(--grey);}
.header .h_side2 .side_btn2.free_btn { padding: 0.406rem 0.688rem;  color: var(--white); background: var(--text-1);}




/* 25.07.29 작업*/