body {font-family: 'Pretendard' !important;}
* {color: #333; word-break: keep-all; line-height: 1.4;}

.intro_bg {width: 100%; height: 100vh; background: url(../img/intro.png) no-repeat center/cover;}

.app_bg {background: url(../img/app-bg.png) no-repeat center top/cover; background-size: 100%;  padding: 20px 0 100px;}
.app {background: url(../img/app-bg.png) no-repeat center top/cover; background-size: 100%; margin-top: -20px; padding: 20px 0 100px; width: 100%; height: 100vh; position: fixed; top: 0; left: 0; z-index: -3;}

.sect_line {background-color: #f1f1f1; height: 5px; width: 100vw; margin-left: -16px;}

.bd {padding: 0 16px;}
.pd-b {padding-bottom: 120px;}
.pd-b2 {padding-bottom: 50px;}
.pd-b3 {padding-bottom: 80px;}
.pd-b4 {padding-bottom: 70px;}
.h-100 {height: 100vh;}
.mt2 {margin-top: 20px;}
.mt3 {margin-top: 30px;}
img {display: block;height: 100%; width: 100%; object-fit: cover;}

.logpage.wrap {padding-top: 0;}
.wrap {padding-top: 60px;}
.de-tab {position: sticky; top: 60px; z-index: 3;}

/* ======== 공통 ======== */
/* 버튼 */
button {font-family: inherit; font-size: 16px; line-height: 1; height: 50px; border-radius: 5px !important; text-align: center; display: flex; align-items: center; justify-content: center; gap: 10px; border: 1px solid transparent; width: 100%; font-weight: 500; outline: none !important;}
.btn_box {display: flex; flex-direction: column; gap: 10px; width: 100%;}
.btn_box > button {width: 100%;}
.bottom_btnbox {position: fixed; width: calc(100% - 32px); bottom: 15px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; gap: 10px;} 

button.main {background-color: #16854f; color: #fff; border-color: #16854f;}
button.line1 {background-color: #fff; border-color: #ddd; color: #555;}
button.line2 {background-color: #fff; border-color: #ddd; color: #aaa;}
button.line3 {background-color: #fff; border-color: #ddd; color: #2b2b2b;}
button.kakao {background-color: #FEE500;}
button i {display: block; width: 26px; aspect-ratio: 1;}
button.kakao i {background: url(../img/kakao.png) no-repeat center/contain;}
button.disabled {background-color: #f1f1f1; color: #888;}
button.color1 {background-color: #eee; color: #333; border-color: #eee;}
button.color2 {background-color: #eee; color: #999; border-color: #eee;}
button.color3 {background-color: #f5f5f5; color: #888; border-color: #f5f5f5;}
button.color4 {background-color: #353535; color: #fff; border-color: #353535;}
button.sm {padding: 8px 16px; border-radius: 4px; text-align: center; width: max-content; font-size: 14px;}
button.xs {font-size: 14px; padding: 10px;}
button.round {border-radius: 50px !important;}
.fixed-btn {position: fixed; width: 100%; bottom: 0; left: 0; padding: 15px 16px;}

.form .input_box {position: relative;}
.form .input_box span {position: absolute; top: 50%; right: 15px; transform: translateY(-50%); font-size: 16px; color: #ccc;}
.form-wrap {display: flex; flex-direction: column; gap: 15px;}
.form-wrap .input-tit p {margin-bottom: 10px; font-weight: 500;}
.form-wrap .input-tit > span {font-size: 12px; color: #D85151; margin-top: 3px;}
.form .input_box span.cal {background: url(../img/match-icon2.png) no-repeat center/cover; display: block; width: 18px; height: 18px;}


/* 인풋 */
input[type="text"], input[type="id"], input[type="password"] {padding: 15px; border-radius: 5px; border: 1px solid #ddd; background-color: #fff; font-size: 15px; color: #222; font-family: inherit; outline: none; display: flex; align-items: center; width: 100%;}
input:focus {border-color: #16854f;}
input::placeholder {font-size: 14px; color: #a7a7a7;}

input[class="join"] {border: none; border-bottom: 2px solid #ddd; border-radius: 0; padding: 16px 0;}
input[class="join"]::placeholder {font-weight: 600; font-size: 20px; color: #bbb;}
input[class="join"]:focus {border-color: #16854f;}
input[class="join"]:read-only:focus {border-color: #ddd;}

.input_box {display: flex; flex-direction: column; align-items: flex-start; gap: 10px; width: 100%;}
.input_alert {width: 100%;}
.input_alert p {font-size: 12px; color: #888;}
.input_alert p.warn {color: #D85151;}
.input_alert p.correct {color: #2B8CFF;}


/* 체크박스, 라디오 */
input[type="checkbox"] {display: none;}
input[type="checkbox"] + label {padding-left: 30px; position: relative; font-size: 14px; display: block; width: 100%;}
input[type="checkbox"] + label::before {content: ""; display: block; width: 20px; aspect-ratio: 1; border-radius: 100%; border: 1px solid #ddd; background: url(../img/chk.png) no-repeat center; overflow: hidden; position: absolute; top: 1px; left: 0;}
input[type="checkbox"] + label::after {content: ""; display: none; width: 20px; aspect-ratio: 1; border-radius: 100%; border: 1px solid #16854f; background: url(../img/chk_on.png) no-repeat center; overflow: hidden; position: absolute; top: 1px; left: 0;}
input[type="checkbox"]:checked + label::after {display: block;}


/* 토글 */
.toggle {width: 55px; height: 30px; border-radius: 60px; background-color: #ddd; position: relative;}
.toggle i {display: block; width: 24px; aspect-ratio: 1; border-radius: 100%; background-color: #fff; position: absolute; top: 50%; left: 4px; transform: translateY(-50%); box-shadow: 0 0 5px #00000010; transition: all .2s;}
.toggle.on {background-color: #16854f;}
.toggle.on i {left: calc(100% - 28px);}




/* ======== 홈 화면 ======== */
.main-tit {display: flex; align-items: flex-end; justify-content: space-between;}
.main-tit h2 {display: flex; align-items: center; gap: 2px; font-size: 20px; font-weight: 700; }
.main-tit h2 span {display: block; width: 19px;}
.main-tit p {font-size: 14px; color: #999; }
.main-tit p i {font-size: 14px; color: #999;}
.main-tit em {color: #16854f; margin: 0 5px; font-weight: 700;}

.wrap > .main {display: flex; flex-direction: column; gap: 30px;}
.sec {display: flex; flex-direction: column; gap: 13px;}
.level-sec .level-con {padding: 20px; border-radius: 10px; border: 1px solid #eee; background: #fff;}
.level-sec .level-con ul {display: flex; flex-wrap: wrap; row-gap: 23px; column-gap: 10px;}
.level-sec .level-con ul li {width: calc((100% - 10px) / 2); display: flex; flex-direction: column; gap: 5px;}
.level-sec .level-con ul li p {font-size: 14px;}
.level-sec .level-con ul li strong {font-size: 18px; font-weight: bold; color: #16854f;}

.m-board .m-board-con {padding: 20px; border: 1px solid #eee; border-radius: 10px; background: #fff;}
.m-board .m-board-con ul li {padding: 20px 0; border-bottom: 1px solid #f1f1f1; display: flex; flex-direction: column; gap: 5px;}
.m-board .m-board-con ul li:first-child {padding-top: 0;}
.m-board .m-board-con ul li:last-child {padding-bottom: 0; border-bottom: none;}
.m-board .m-board-con ul li > p {font-size: 16px; font-weight: 600; display: -webkit-box; -webkit-line-clamp-: 2; -webkit-box-orient: vertical; overflow: hidden;}
.m-board .m-board-con ul li div {display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; gap: 5px;}
.m-board .m-board-con ul li div span {font-size: 14px; color: #5f5f5f; width: 100%; text-overflow: ellipsis; overflow: hidden; white-space: nowrap;}
.m-board .m-board-con ul li div em {font-size: 12px; color: #888;}

.m-board .board-none p {font-size: 14px; color: #888; text-align: center;}
.m-board .board-none button {padding: 12px; width: 200px; border-radius: 50px; border: 1px solid #16854f; color: #16854f; font-size: 14px; font-weight: 500; margin: 15px auto 0 auto;} 
.no_board li > div span {display: none;}


.m-rank-wrap {position: relative; border-radius: 10px; overflow: hidden; border: 1px solid #eee; display: flex; background: #fff; isolation: isolate; height: fit-content !important;}
.m-rank-wrap .rank-fixed { height: 100%; position: relative;}
.m-rank-wrap .rank-fixed ul {position: absolute; width: 59px; height: fit-content; top: 0; left: 0; border-right: 1px dashed #eee;}
.m-rank-wrap .rank-fixed ul li {width: 59px; height: 59px; display: flex; align-items: center; justify-content: center; border-bottom: 1px dashed #eee;}
.m-rank-wrap .rank-fixed ul li:first-child {height: 50px; border-bottom: none; background-color: #BDE6D2; border-right: 1px dashed #eee; font-size: 16px; font-weight: 700;}
.m-rank-wrap .rank-fixed ul li:last-child {border-bottom: none;}
.m-rank-wrap .rank-fixed ul li img {width: 28px; height: 28px;}
.m-rank-wrap .rank-con {margin-left: 59px; overflow-x: scroll;}
.m-rank-wrap .rank-con .rank-head {display: flex; background-color: #BDE6D2; width: max-content;}
.m-rank-wrap .rank-con .rank-head li {width: 90px; height: 50px; display: flex; align-items: center; justify-content: center;  font-size: 16px; font-weight: 700;}
.m-rank-wrap .rank-con .rank-name {display: flex; flex-direction: column; width: max-content;}
.m-rank-wrap .rank-con .rank-name .rank-line {border-bottom: 1px dashed #eee;}
.m-rank-wrap .rank-con .rank-name .rank-line:last-child {border-bottom: none;}
.m-rank-wrap .rank-con .rank-name ul {display: flex; align-items: center; }
.m-rank-wrap .rank-con .rank-name ul li {display: flex; align-items: center; justify-content: center; width: 90px; height: 58px; gap: 5px;} 
.m-rank-wrap .rank-con .rank-name ul li p {font-size: 14px; font-weight: 500;}
.m-rank-wrap .rank-con .rank-name ul li span {font-size: 14px; font-weight: 700; color: #aaa;}

/* 스크롤바 숨기기 */

.m-rank-wrap .rank-con{
	-ms-overflow-style:none; /* IE and Edge */
    scrollbar-width:none; /* Firefox */
}

.m-rank-wrap .rank-con::-webkit-scrollbar {
	display:none; /* Chrome , Safari , Opera */
}

/* ======== 나의레벨 ======== */

.my-level .main-tit h2 {font-size: 16px;}
.my-level .main-tit h2 span {width: 17px;}
.my-level .sec {gap: 10px;}

/* .bg-fixed {background: url(../img/app-bg.png) no-repeat; height: 100vh; background-size: 100%;} */
.default-ran .ran-wrap {display: flex; border-radius: 10px; overflow: hidden; border: 1px solid #eee; background: #fff;}
.default-ran .ran-wrap .rank-left ul li {height: 50px; width: 65px; display: flex; align-items: center; justify-content: center; font-size: 14px; color: #777; border-bottom: 1px dashed #eee; border-right: 1px dashed #eee;}
.default-ran .ran-wrap .rank-left ul li:first-child {height: 60px; background-color: #BDE6D2; font-size: 14px; font-weight: 800; color: #333; border-bottom: none;}
.custom-wd {width: 33.33% !important;}
.default-ran .ran-wrap .rank-left ul li:last-child {border-bottom: none;}
.default-ran .ran-wrap .rank-right {width: calc(100% - 65px);}
.default-ran .ran-wrap .rank-right .rank-head {display: flex; display: flex; background-color: #BDE6D2;}
.default-ran .ran-wrap .rank-right .rank-head li { display: flex; flex-direction: column; align-items: center; justify-content: center;  width: 33.33%; height: 60px; text-align: center;  font-size: 14px; font-weight: 800;}
.default-ran .ran-wrap .rank-right .rank-head li:first-child {width: 40%;}
.default-ran .ran-wrap .rank-right .rank-head li span {font-size: 12px; color: #888; font-weight: 500;}
.default-ran .ran-wrap .rank-right .rank-head .rank-box {display: flex; flex-direction: column;}
.default-ran .ran-wrap .rank-right .rank-line ul {display: flex; align-items: center;}
.default-ran .ran-wrap .rank-right .rank-line ul li {height: 49px; width: 33.33%; display: flex; align-items: center; justify-content: center; font-weight: 500; font-size: 15px; text-overflow: ellipsis; overflow: hidden; white-space: nowrap;}
.default-ran .ran-wrap .rank-right .rank-line ul li:first-child {width: 40%;}
.default-ran .ran-wrap .rank-right .rank-line {border-bottom: 1px dashed #eee;}
.default-ran .ran-wrap .rank-right .rank-line:last-child {border-bottom: none;}

.winning {display: flex;}
.winning > div {width: 50%; display: flex; flex-direction: column; align-items: center; padding: 0 16px; gap: 25px;}
.winning > div h2 {font-size: 16px; font-weight: 700;}
.winning > div .win-rate > div {display: flex; align-items: center; gap: 10px;}
.winning > div .win-rate > div em {width: 13px; height: 8px; border-radius: 10px; }
.winning > div .win-rate > div em.rate1 {background-color: #fa513a;}
.winning > div .win-rate > div em.rate2 {background-color: #FECBC4;}
.winning > div .win-rate > div em.rate3 {background-color: #2E5CFF;}
.winning > div .win-rate > div em.rate4 {background-color: #C1CFFF;}
.winning > div .win-rate > div p {display: flex; align-items: center; font-size: 14px; font-weight: 600;}
.winning > div .win-rate > div p b {font-weight: 600; margin-left: 5px;}
.winning > div .win-rate > div p span {color: #888; font-weight: 500; margin-left: 8px;}

.chart {width: 147px !important; height: 147px !important;}

/* ======== 나의승률 ======== */
.graph-tit > div {display: flex; align-items: center; justify-content: space-between;}
.graph-tit > div p {display: flex; align-items: center; gap: 3px; font-size: 13px; color: #888;}
.graph-tit h2 {font-size: 20px; font-weight: 500;}
.graph-tit span {font-size: 14px; color: #777; margin-top: 5px;}
.graph-wrap {border-radius: 10px; box-shadow: 0 0px 10px rgba(217, 217, 217, 0.4); background-color: #fff;}
.graph-none {padding: 25px 15px;}
.graph-none p {text-align: center; font-size: 14px; color: #888;}
.graph-wrap .graph .gp-type ul {display: flex; align-items: center; gap: 10px; justify-content: center; padding: 20px 0;}
.graph-wrap .graph .gp-type ul li {display: flex; align-items: center; gap: 6px;}
.graph-wrap .graph .gp-type ul li span {width: 13px; height: 13px; border-radius: 3px;}
.graph-wrap .graph .gp-type ul li p {font-size: 14px; font-weight: 500;}

/* ======== 블러 ======== */

.level-con {position: relative;}
.level-con .blur-bg {position: absolute; width: 100%; height: 100%; top: 0; left: 0; backdrop-filter: blur(4px); z-index: 1; -webkit-backdrop-filter: blur(4px);}
.level-con .blur-txt {position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); z-index: 2; text-align: center; width: calc(100% - 30px); display: flex; flex-direction: column; gap: 15px; align-items: center;}
.blur-txt p {font-size: 20px; font-weight: 600;}
.blur-txt p em {font-size: 20px; font-weight: 900; color: #16854f; display: inline-block;}
.blur-txt button {border-radius: 50px !important; width: 50vw; }

.recom {position: relative;}
.recom .btn_chk {position: absolute; top: 20px; right: 15px; font-size: 14px; color: #888; }

/* ======== 푸터 ======== */

footer {background-color: #f5f5f5; padding: 25px 16px 60px 16px; margin-top: 40px;}
footer em {width: 121px;}
footer ul {display: flex; flex-direction: column; gap: 5px; margin: 25px 0;}
footer ul li {display: flex; gap: 5px; font-size: 12px;}
footer ul li p {white-space: nowrap; color: #9f9f9f; width: 105px; flex-shrink: 0; font-size: 12px;}
footer ul li span {color: #666;}
footer > span {font-size: 12px; color: #a9a9a9;}

/* -------- 320px -------- */
@media screen and (max-width: 320px) {
	button {font-size: 15px !important;}
	.m-detail-wrap .room-info > div ul li span {width: 100px !important;}
	.m-detail-wrap .room-info > div ul li b {font-size: 15px !important;}
	.default-ran .ran-wrap .rank-right .rank-line ul li {font-size: 14px;}
	.default-ran .ran-wrap .rank-left ul li {font-size: 13px;}

	.winning > div .win-rate > div p {font-size: 12px;}
	.level-sec .level-con ul li strong {font-size: 18px;}
	.level-sec .level-con ul li p {font-size: 13px;}
	.level-sec .level-con {padding: 20px 12px;}
	.default-ran .ran-wrap .rank-right .rank-head li span {font-size: 11px;}

	.chart {width: 120px !important; height: 120px !important;}
}