*{font-family: 'Paperlogy', 'SUIT', 'Noto Sans KR', sans-serif;}
body {margin: 0 auto; position: relative; overflow: hidden; height: 100vh;}
button, input, optgroup, select, textarea{font-family: 'Paperlogy', 'SUIT', 'Noto Sans KR', sans-serif!important;}

#body {min-height: 100vh;max-width: 800px; margin: 0 auto 0; padding: 0;position: relative;
    z-index: 1; box-shadow: 0 0 35px 10px #00000011;
    background:linear-gradient(#332D3E, #160734); color: #fff; text-shadow: 2px 2px 2px #00000029;}

body:has(.stage) #body {background: #F6F6F6; color: #100523; text-shadow: none;}
body:has(.complete) #body {background: #E7EAF6; color: #100523; text-shadow: none;}

:hover {transition: all 0.2s ease}

.btn,
input{border-radius:40px;}
.app section{width: 100%;height: 100vh;/* min-height: 667px; */overflow: hidden;text-align: center;padding: 6.5rem 1.75rem;gap: 3rem;}

.app section h2{position: fixed;  width: 100%; max-width: 800px; top: 0; left: 50%; transform: translateX(-50%);
    text-align: center; padding: 2rem; line-height: 40px; font-size: 1em; z-index: 99; margin: 0}
#stage_level {padding: 2rem; line-height: 30px; }
.app section h3{color: #fff;/*background: url("../img/common/logo_mark.svg") no-repeat top center/auto 20px;*/padding-top: 0px;margin-bottom: 2rem;line-height: 1em;}
.app section .box{
    border-radius: 50px;
    padding: 3.5rem 3rem;
    box-shadow: inset 20px 10px 20px #7285D13D, 5px 5px 6px #00000029;
    background: #E7EAF6;
    border: 1px solid #E7EAF680;
    color:#46538A;
    text-shadow: none;
    max-height: calc(100vh - 170px);
}
.app section .box a,
.app section .box button.btn_white{color:#46538A; text-shadow: none}
.app section .box button.btn_white{box-shadow: 0 4px 6px #46538A0D;}

.app input[type=text]{height: 50px; text-align: center; font-size: 1.4em!important; border: 1px solid #CED3E6; background: #fff; color: #46538A; border-radius: 6px; font-weight: 600;}
.app input[type=text]::placeholder{opacity: 0.5; font-weight: 400;}

/*모달*/
.modal-open .modal{padding-right: 0!important;}
.modal-open {    overflow: unset;}
.modal-content {box-shadow: none;background: #FAFBFD;border: 0;border-radius: 0;max-height: 90vh;}
.modal .btn-primary {background-color: #7400CF;color: #fff;width: 100%; height: 35px;font-size:1.2em; font-weight:600;}
.modal .btn-third {background-color: #f7edff;color: #7400CF;width: 100%; height: 35px;font-size:1.2em; font-weight:600;}
.modal .btn-secondary {background-color: #1a1a1c; color: #fff; width: 100%; height: 35px}

.modal-title {color: #6638CE;font-size: 2em;font-weight: 900;}
.modal-header {border-bottom: 0;text-align: center; padding: 0 15px;}
.modal-body{overflow: auto;width: 100%;color: #100523;font-size: 1.3em; text-align: center}
.modal-footer {padding: 0;border-top: 0;display: flex;justify-content: space-around;}

.modal-backdrop{background: rgb(16, 5, 35)}
.modal-backdrop.in{opacity: 0.75;}
.modal-dialog{margin: 0; top: 50%;left: 50%;transform: translate(-50%, -50%)!important;
    width: 90%; max-width: 340px; max-height: 80vh; z-index: 9999;
    border: 6px solid #8D57CF;background: #E7EAF6;padding: 3rem 3rem;border-radius: 20px;box-shadow: 0 10px 6px #00000029;
}
.modal-content{background: transparent;}
.modal-dialog.modal-wide {    width: 90%; max-width: 1000px}
.modal-dialog.modal-middle {    width: 90%; max-width: 600px}
.modal-dialog.modal-narrow {    width: 300px;}
.modal-box1 {  border-radius: 0px;    background-color: #ffffff;    padding: 20px; }

.modal.wide .modal-dialog{max-width:600px;}

/*인트로*/
#intro{height: 100vh;background-color: #6638CE;
    text-align: center;display: grid;grid-template-rows: 8fr 2fr 1fr;grid-template-columns: 1fr;
    position: absolute; left: 0; top: 0; right: 0; bottom: 0;
    z-index: 9999; padding-left: 4rem; padding-right: 4rem; gap: 0;}
#intro h1{padding-top: 4rem;}
#intro h1 img{height: 80px;}
#intro h1 p{font-size: 2em; font-weight: 900; text-shadow: 2px 2px 2px #00000050;}
.loading_wrap > p{color: #ffffff; font-weight: 900; text-shadow:  2px 2px 2px #00000029; margin-bottom: 20px; font-size: 1em; letter-spacing: 1px; opacity: 0.8;}
.loading_bar {width: 100%; height: 16px;background-color: #fff;border-radius: 12px;overflow: hidden;position: relative; color: #fff; text-align: left; border: 2px solid #fff; box-sizing: border-box}
.loading_bar::before {content: '';position: absolute;width: 0;height: 12px;background:linear-gradient(#8D57CF, #4920C5);
    animation: load 2s ease-in-out forwards; border-radius: 12px;}
#intro .copy {font-size:11px; text-shadow:  2px 2px 2px #00000029; color: #fff;margin-top: 20px; opacity: 0.7;}

@keyframes load {
    0% {width: 0;}
    100% {width: 100%;}
}

@media screen and (min-width: 768px) {
    section{padding: 20rem 10rem;}
}

/*header*/
#hd{position: fixed; top: 0; padding: 2rem; width: 100%; max-width: 800px; z-index: 100;}
#hd .btn_wrap{display: flex; align-items: center; gap: 4px;}
#hd .btn{aspect-ratio:1/1; height: 40px; text-align: center; font-size: 1.3em; padding: 0;
    display: flex; align-items: center; justify-content: center; text-shadow: none}
#hd.stage .btn{height: 30px;font-size: 1em;}
#hd .gem{display: flex; align-items: center; justify-content: center; padding: 0px 10px;
    min-width: 80px; height: 40px; line-height: 40px;
    border-radius: 40px; border: 2px solid #8D57CF80; font-size: 1.2em;}
#hd.stage .gem{height: 30px; line-height: 30px;}
#hd .gem img{margin-left: 7px; height: 19px;}

body:has(.stage) #hd a.btn_whiteline,
body:has(.complete)  #hd a.btn_whiteline{background: #100523; color: #fff;}

/*footer*/
#ft{}

/*메인*/
section.index{display: grid;grid-template-rows: 2fr 9fr 1fr;grid-template-columns: 1fr; padding: 10rem 4rem}
.index .hd_tilte p{font-weight: 200; margin: 4px auto;opacity: 0.7;}
.index .hd_tilte h1{font-weight: 900; font-size: 1.6em; line-height: 1em;}

.experience{max-width: 260px; height: 100%;aspect-ratio: 1/1;display: flex;align-items: center;justify-content: center;
    margin: 0 auto;position: relative;;}
.experience .text{font-size: 1.6em;;
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 2;}
.experience .text span{opacity: 0.7;}
.experience .text p{font-weight: 900; font-size: 2.2em; line-height: 1.2em;}

.circle,
.circle:before,
.circle:after{display: block;border-radius: 50%;width: 100%;aspect-ratio: 1/1;background: #6638CE56;position: absolute;z-index: 1;left: 50%;top: 50%;transform: translate(-50%, -50%);}
.circle:before,
.circle:after {content: "";display: block;}
.circle:before {width: 70%;}
.circle:after {width: 80%;}

.experience .circle,
.experience .circle:before,
.experience .circle:after{animation: pulse 1.5s infinite ease-in-out;}
@keyframes pulse {
    0% {transform: translate(-50%, -50%) scale(1);opacity: 1;}
    50% {transform: translate(-50%, -50%) scale(1.1);opacity: 0.6;}
    100% {transform: translate(-50%, -50%) scale(1);opacity: 1;}
}

.index .ending_btn{position: absolute; right: 2rem; bottom: 2rem;background: #000000; height: 40px; border-radius: 40px; display: flex; align-items: center;}
 .ft_spin{position: absolute; right: 2rem; bottom: 2rem;
    border: 2px solid #8D57CF80; height: 40px; border-radius: 40px; display: flex; align-items: center;}
 .ft_spin i{height: 40px; background: #6638CE; aspect-ratio:1/1; display: flex; align-items: center; justify-content: center;
    border-radius: 50%; position: relative; margin: -2px;}
 .ft_spin i img{height: 18px;}
 .ft_spin p{display: inline-block; padding: 0 10px;}

#endingModal .modal-body {padding: 0}
#endingModal h2 {font-weight: 700;font-size: clamp(20px, 4vw, 32px);color: #3a2f2f;}
#endingModal p {font-size: clamp(14px, 2vw, 18px);color: #3a2f2f;margin-bottom: 10px}
#endingModal .btn {border: none;border-radius: 50px;padding: 12px 40px;font-size: 18px;font-weight: bold;color: white;cursor: pointer;transition: transform 0.2s ease;height: fit-content}
#endingModal .btn:hover {transform: scale(1.05);}
#endingModal .btn-no {background-color: #0a8f3c; /* 녹색 */}
#endingModal .btn-yes {background-color: #d93a3a; /* 빨강색 */}


/*온보딩*/
#onboarding{position: fixed; z-index: 9999; max-width:800px;}
#onboarding:before{content: ""; display: block; position: fixed; background-color: rgba(16, 5, 35,0.75); width: 100%; height: 100%; top: 0; left: 0; z-index: 9998;}

#onboarding .onboarding{position: absolute;top:50%;left: 50%;transform: translate(-50%, -50%);width: 90%;max-width: 340px;max-height: 80vh;z-index: 9999;border: 6px solid #8D57CF;background: #E7EAF6;padding: 5rem 2rem;border-radius: 20px;box-shadow: 0 10px 6px #00000029;display: grid;grid-template-rows: 1fr 100px;}
/*#onboarding .onboarding{width: 100vw;
    max-height: unset;
    max-width: unset;
    height: 100%;
    display: flex!important;
    align-items: center;
    border-radius: 0;}*/
#onboarding .onboarding-container {position: relative;width: 100%;max-width: 600px;min-height: unset;margin: 0 auto;text-align: center;}


#onboarding .swiper{height: 100%;}
#onboarding .swiper-wrapper{margin-top: 40px;height: calc(100% - 40px)}
#onboarding .swiper-slide{width: 100% !important; display: flex;
    align-items: center; justify-content: center;}
#onboarding .swiper-slide .page{font-size: 1.3em;line-height: 2em;font-weight: 600;}

#onboarding .swiper-pagination{bottom: auto; top: 0;}
#onboarding .swiper-pagination-bullet{background-color:#BCC2D9;}
#onboarding .swiper-pagination-bullet-active{background-color:#6638CE}
#onboarding .navigation {margin-top: 20px;}
#onboarding .navigation a{display: block;text-align: center;font-size: 1.2em;text-decoration: underline;color: #313131;cursor: pointer;margin-top: 1rem;}
#onboarding .navigation a:hover{color: #6638CE;}


/*게임 스테이지*/
section.stage{ grid-auto-rows: 5fr 4fr;display: grid;;align-items: start; gap: 0rem; row-gap: 40px;padding-top: 9em}

/*.game_warp{background: #E7EAF6; border-radius: 10px; padding: 6px; width: fit-content; height: fit-content; margin: 0 auto; }
#game_board{display: grid; grid-template-columns: repeat(10, 1fr); grid-template-rows: repeat(11, 1fr); gap: 2px; width: fit-content}
#game_board li{background:#FFFFFF61; aspect-ratio:1/1; border-radius: 4px; min-width:26px; box-sizing: border-box;}
#game_board li.active{background: #fff;}
#game_board li.answer{background: #6B5AFF; color: #fff; font-weight:400; font-size:4vw; display: flex;
    align-items:  center; justify-content: center;}

#game_board li.active:hover,
#game_board li.active:focus{border: 3px solid #6B5AFF; background: #fff;}
#game_board li.active.answer:hover,
#game_board li.active.answer:focus{border: 0; background: #6B5AFF;}*/


.stage .option{/*display: grid; grid-template-rows: 70px 1fr; gap: 10px; */padding: 0rem 0rem}
.stage .option .hint{display: flex; align-items: center; justify-content: center; gap: 8px;position: fixed;top: 20px;z-index: 999}/*
.stage .option .hint button{min-width: 55px; aspect-ratio:1/1; display: grid; grid-template-rows: 1fr 15px; border: 0; border-radius: 10px; color: #fff; overflow: hidden;}
.stage .option .hint button span{height:100%; font-size: 1.4em; display: flex; align-items: center; justify-content: center;}
.stage .option .hint button p{line-height: 15px; background: #00000010; font-size: 10px;}
.stage .option .hint button p img{height: 12px;}*/
.stage .option .hint button{min-width: 32px; aspect-ratio:1/1; display: grid; grid-template-rows: auto 10px; border: 0; border-radius:10px; color: #fff; overflow: hidden;}
.stage .option .hint button span{height:100%; font-size: 12px; display: flex; align-items: center; justify-content: center;}
.stage .option .hint button p{line-height: 10px; background: #00000010; font-size: 7px;}
.stage .option .hint button p img{height: 2px;display: none}
.stage .option .hint button.orange{background: #F5C056;}
.stage .option .hint button.mint{background: #5FE1D6}
.stage .option .hint button.purple{background: #CDAAF7}

.stage .option .card_list{ width: 100%; margin: 0 auto;aspect-ratio: 6 / 2.4;overflow: hidden; overflow-y: auto; padding-top: 10px; max-width: 420px}
.stage .option .card_list{-ms-overflow-style:none;scrollbar-width:none;}
.stage .option .card_list::-webkit-scrollbar{display:none;}

.stage .option .card_list ul{display: grid; grid-template-columns: repeat(8, 1fr); text-align: center; gap: 0px; width: 100%; row-gap: 10px}
.stage .option .card_list li{z-index:1; opacity: 0; transform: translateY(20px); position: relative; margin: 0 auto; width: 80%;
    animation: slideUp 0.5s ease-out forwards; animation-delay: calc(0.2s * var(--i));}
@keyframes slideUp {
    to {opacity: 1;transform: translateY(0);}
}

.stage .option .card_list li .icon{box-shadow: 0 3px 6px #00000029;  width: 20px; height: 20px; line-height: 20px; font-size: 13px; right: -6px; top: -6px;}
.stage .option .card_list li .card{aspect-ratio: 1 / 1;width: 100%;  border-radius: 5px; border: 2px solid #6638CE; background:#fff;  display: flex; align-items: center; justify-content: center; font-size: 4.5vw; font-weight: 600; box-shadow: 0 2px 0 #6638CE; position: relative;}
.stage .option .card_list li span.card{aspect-ratio: 1 / 1;position: absolute; background: #6638CE; z-index: -1;right: -3px; top: -3px;opacity: 0.8;}
/*.stage .option .card_list li span.card1{right: -3px; top: -3px; opacity: 0.8;}
.stage .option .card_list li span.card2{right: -6px; top: -6px; opacity: 0.6;}*/
/* 스코프 변경 */
.icon{box-shadow: 0 3px 6px #00000029;  width: 20px; height: 20px; line-height: 20px; font-size: 13px; right: -6px; top: -6px;}
.card{aspect-ratio: 1 / 1;width: 100%;  border-radius: 5px; border: 2px solid #6638CE; background:#fff;  display: flex; align-items: center; justify-content: center; font-size: 4.5vw; font-weight: 600; box-shadow: 0 2px 0 #6638CE; position: relative;}
span.card{aspect-ratio: 1 / 1;position: absolute; background: #6638CE; z-index: -1;right: -3px; top: -3px;opacity: 0.8;}

.stage .option .card_list li .done{filter:saturate(0%); opacity: 0.3;}


@media screen and (min-width: 768px) {/*
    section.stage{padding: 10rem 2rem;}*/
    #game_board{padding: 10px;}
    #game_board li.answer{font-size: 2em;}
    .stage .option .card_list li .card{font-size: 2em;}
}

.stage.tutorial:before{content: ""; display: block; position: fixed; top: 0; left: 0;
    width: 100%; height: 100vh; background:rgba(16, 5, 35,0.75); z-index: 999;}
.stage.tutorial .card_list ul li{z-index: -1;}
.stage.tutorial .card_list ul li:first-child {position: relative; z-index: 999;}
.stage.tutorial .card_list ul li:first-child:after {content: "Fill in the blanks to complete the word";position: absolute;top: -47px; left: -8px;background-color: #FFFFFF;color: #333; padding: 8px 12px;border-radius: 40px;white-space: nowrap;font-size: 12px;font-weight: 600;opacity: 1;visibility: visible;transition: opacity 0.3s ease, visibility 0.3s ease; box-shadow: 0 2px 0px #8D57CF; z-index: 1;}
.stage.tutorial .card_list ul li:first-child:before {content: "";position: absolute;top: -10px;left: 8px;width: 0;height: 0;border-style: solid;border-width: 20px 10px 0px 0px;border-color: #FFFFFF transparent transparent;z-index: 2;box-shadow: -2px 0px 0px #8D57CF;transform: rotate(-40deg);transform-origin: top left;}


.stage.tutorial .game_warp li.active.hover{z-index: 1000; border: 3px solid #6B5AFF; background: #fff;}


/*힌트 모달*/
.hint_modal{text-align: center; position: relative;}
.hint_modal i{position: absolute; right: 0; bottom: -2px; color: #6638CE; font-size: 2em;}
.hint_modal .img{height: 130px; margin: 20px auto;}
.hint_modal .img img{height: 100%; width: auto;}

/*레벨 통과*/
section.complete{position: relative; overflow: hidden; width: 100%; height: 100vh;
    display: grid; grid-template-rows: 1fr 2fr 0.5fr 1fr; gap: 1rem;
    padding-bottom: 2rem; padding-left: 4rem; padding-right: 4rem}
.complete .text{font-size: 1.2em; opacity: 0; animation: slideUp 0.5s ease-out forwards;
    transform: translateY(-20px); animation-delay:0s}
.complete .text i{font-size: 1.8em; margin-bottom: 10px;}
.complete .game_warp{background: #BCC7F3; animation: popOut 0.5s ease-out forwards;}
@keyframes popOut {
    0% {transform: scale(0) rotate(0deg);opacity: 0;}
    100% {transform: scale(1) rotate(0deg);opacity: 1;}
}

.complete #game_board li{min-width: 24px;}
.complete .answer{display: flex; flex-wrap: wrap; align-items: center; justify-content:center; gap: 8px; }
.complete .answer li{display: inline-block; color: #100523; font-size: 1em; line-height: 1em; font-weight: 700;
    padding: 8px 14px; border: 1px solid #6B5AFF40; box-shadow: 0 2px 0 #6B5AFFB3; background: #fff; border-radius: 6px;
    z-index:1; opacity: 0; transform: translateY(20px); position: relative;
    animation: slideUp 0.5s ease-out forwards; animation-delay: calc(0.2s * var(--i));}
.complete .btn{opacity: 0; animation: slideUp 0.5s ease-out forwards;transform: translateY(20px); animation-delay:1s}

.complete .firework {position: absolute;width: 20px;height: 20px;border-radius: 50%;opacity: 0;animation: explode 1s ease-out forwards;background: url("../img/firework.png") no-repeat center/100% 100%; z-index: 10;}
@keyframes explode {
    0% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.7; transform: scale(3); }
    100% { opacity: 0; transform: scale(0); }
}
.box:has(.privacy) {overflow: auto}
.privacy{font-weight:600;color:#46538A;text-align: left!important;}
.privacy article:not(:last-of-type){margin-bottom:24px;padding-bottom:24px;border-bottom:1px solid #46538A20;}
.privacy h6{margin-bottom:10px;font-size:1.2em;font-weight:600;line-height:1.5;color:#2C2C2C;}
.privacy p{margin-bottom:10px;font-size:1em;font-weight:400;line-height:1.8;color:#46538A;}
.privacy p:last-child{margin-bottom:0;}

/*설정*/
.setting{font-weight:600; }
.setting .alert_switch dl{display: flex;align-items: center;justify-content: space-between;margin-bottom: 16px;}
.setting .alert_switch dt{font-size: 1.5em; font-weight: 400; display: grid; grid-template-columns: 30px 1fr; align-items: center;}

.setting .alert_switch dd {position: relative;}
.setting .alert_switch input[type="checkbox"] {width: 65px;height: 30px;display: inline-block;-webkit-appearance: none;background-color: #46538A;border-radius: 50px;transition: all .3s ease;cursor:pointer;}
.setting .alert_switch input[type="checkbox"]:focus{outline: 0;}
.setting .alert_switch input[type="checkbox"]:after {content:'';display:inline-block;width:20px;height:20px;background-color:#fff;border-radius: 50px;position: absolute;top: 50%;left: 6px;transform: translateY(-50%);transition: all .3s ease;border-width: 0;}
.setting .alert_switch input[type="checkbox"]:before {content: 'OFF';position: absolute;right: 8px;top: 50%;transform: translateY(-50%);opacity: .5;color: #fff; font-size: 11px;}
.setting .alert_switch input:checked[type="checkbox"] {background-color: #6638CE;transition: all .3s ease;}
.setting .alert_switch input:checked[type="checkbox"]:before {content:'ON'; right: auto; left:8px; color:#fff;}
.setting .alert_switch input:checked[type="checkbox"]:after {left: 40px; transition: all .3s ease;}
.setting .alert_switch dd label {position: absolute; font-size:0; width:1px; height:1px; opacity:0;}

.setting .menu{margin-bottom: 20px;}
.setting .menu li:not(:last-of-type){border-bottom: 1px solid #46538A20;}
.setting .menu li a{display: block; padding: 8px; font-size: 1.1em;}

.profile .box{display: grid; grid-template-rows: 80px 1fr 60px; gap:10px;}
.profile .name dt{text-align: left; font-size: 1.2em; margin-bottom: 10px;}
.profile .photo{height: 100%; overflow: hidden; border-radius: 20px; padding: 1rem 0.5em;
    background: #D3D8EC; box-shadow: inset 0 1px 6px #46538A2B;}
.profile .photo .scrollbar{height:100%; overflow-y: auto; padding: 1rem;}
.profile .photo ul{display: grid; grid-template-columns: repeat(3, 1fr); gap:10px;}
.profile .photo ul label img{width: 100%; height: 100%;}

.profile .photo li{position: relative;}
.profile .photo input[type=radio]{position: absolute; right: 1px; bottom: 1px; border-radius: 50%; margin: 0; background: transparent; width: 1.3em; height: 1.3em;}
.profile .photo input[type=radio]:hover{box-shadow:none}
.profile .photo input[type=radio]:checked{background:#6638CE; border: 0; outline: none}
.profile .photo input[type=radio]:checked:after{content: "\f00c"; font-family: "Font Awesome 6 Pro"; font-weight: 400; color: #fff;
    display: block; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); font-size: 11px;}
.profile .photo input[type=radio] + label{ border-radius: 50%; background: #BCC3DF;
    overflow: hidden; box-shadow: inset 0 -4px 6px #7285D133;}
.profile .photo input[type=radio]:checked + label{border: 3px solid #6638CE;}


section.setting{padding-top: 6.5rem;}
section.profile{padding-top: 6.5rem;}
/*랭킹*/
section.ranking{display: grid;grid-template-rows: 45px  1fr 70px;gap: 10px;padding-left: 1rem;padding-right: 1rem;padding-top: 6.5rem;padding-bottom: 0;}
section.ranking .experience{display: none} /*grid-template-rows: 45px 100px 1fr 70px*/
.ranking .experience .text{font-size: 1rem;}
.ranking .ranking_list{position: relative;height: 100%;overflow: hidden;padding: 6px 6px 0 6px;box-sizing: border-box;display: grid;grid-template-rows: 40px 1fr;););););););););););gap: 0;}
.ranking .nav-tabs{margin-bottom: 0px;border: 0;display: flex;background: linear-gradient(#332D3E, #160734);box-shadow: 0 0 6px #FFFFFF4D;border-radius: 40px;position: relative;z-index: 4;width: 100%;}
.ranking .nav-tabs>li{width: 100%; background: transparent; border: 0; border-radius: 0;}
.ranking .nav-tabs>li>a{color: #fff; opacity: 0.5;}
.ranking .nav-tabs>li>a:hover{border: 0; opacity: 0.8;}
.ranking .nav-tabs>li.active>a,
.ranking .nav-tabs>li.active>a:focus,
.ranking .nav-tabs>li.active>a:hover{color: #fff;opacity: 1; background: transparent; border: 0; text-shadow: none}

.ranking .tab-content{overflow-y: auto;height: calc(100% + 20px);margin: -20px -6px 0 -6px;padding: 30px 6px 0 6px;box-sizing: border-box;z-index: 1;position: relative;}
.ranking .list dl{
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #46538A;
    text-shadow: none;
    font-size: 1.2em;
    margin-bottom: 6px;
    border-radius: 50px;
    padding: 10px 2rem;
    background: #E7EAF6;
    border:1px solid #E7EAF680;
    box-shadow:inset 20px 10px 20px #7285D13D, 5px 5px 6px #00000029;
}

.ranking .list dl {opacity: 0;animation: slideUp 0.5s forwards;animation-delay: 0s;transform: translateY(20px);}

.ranking .list dt{display: grid; align-items: center; grid-template-columns: 30px 45px 2fr; gap: 5px;}
.ranking .my_ranking .list dt{display: grid; align-items: center; grid-template-columns: 60px 60px 2fr; gap: 5px;}
.ranking .list dt .number{font-weight: 900; font-size: 1.4em;}
.ranking .list dt .name{font-weight: 400;}
.ranking .list .photo{border-radius: 50%;background: #BCC3DF;overflow: hidden;box-shadow: inset 0 -4px 6px #7285D133;width: 40px;height: 40px;}
.ranking .list .photo img{width: 100%; height: 100%; object-fit: cover;}

.ranking .list dd{display: grid; align-items: center; grid-template-columns: 13px 1fr; gap: 5px;}
.ranking .list .circle{position: relative; width: 13px; height: 13px; left: 0; top: 0; transform: unset;}
.ranking .list .circle:after{width: 75%;}
.ranking .list .circle:before{width: 50%;}

.ranking .my_ranking{position: fixed;bottom: 0;left: 50%;transform: translateX(-50%);width: 100%;max-width: 800px;background: #6638CE;box-shadow: 0 -5px 10px #00000029;padding: 10px 2rem;z-index: 999;}
.ranking .my_ranking dl{all: unset; display: flex; align-items: center; justify-content: space-between; font-size: 1.3em;}
.ranking .my_ranking .photo{width: 60px;height: 60px;}
.ranking .my_ranking .circle,
.ranking .my_ranking .circle:before,
.ranking .my_ranking .circle:after{background: #ffffff56}


/*광고룰렛*/
section.spin{padding-left: 0.5rem; padding-right: 0.5rem; display: grid; gap: 10px;}
.spin .chance ul{display: flex; align-items: center; justify-content: center; gap: 10px;}
.spin .chance li,
.spin .chance li:before{aspect-ratio:1/1; background-color: #EC7D60;  border-radius: 50%; text-shadow: none;}

.spin .chance li{width: 30px; color: #fff; font-weight: 700; border: 1px solid #ffffff56;
    display: flex; align-items: center; justify-content: center; position: relative;}
.spin .chance li:before{content:""; display: block; width: calc(100% + 8px); z-index: -1;
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);}
.spin .chance li.done,
.spin .chance li.done:before{background-color: #756F81;}
.spin .btn_large{width: 80%; max-width: 400px; margin: 4px auto;}

#roulette{margin: 2rem auto 0 auto;  width: fit-content;}
#roulette .the_wheel{position:relative;background: url("../img/roulette/roulette_board.png") no-repeat 50% 3px/100% auto;}
#roulette .the_wheel .pin{position: absolute; top: 0; left: 50%; transform: translateX(-50%)}
#roulette .the_wheel:after{content: ""; display: block; width: 50px; aspect-ratio:1/1; background: url("../img/common/gem.svg") no-repeat 50% 50%/100% 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
#roulette #canvas{margin: 30px;}

.customFontStyle {
    letter-spacing: -1px;
    text-shadow: 0 3px 6px #00000018, 0 0 2px #00000016;
}


/*룰렛찬스 없을 때*/
#onboarding.no_chance .onboarding{display: block; text-shadow: none;}
#onboarding.no_chance .grid2 > div{
    border-radius: 30px;
    position: relative;
    background-color: #D3D8EC;
    padding-bottom: 30px;
    box-shadow: inset 0 3px 6px #00000016;
    min-height: 200px;
    background-position: center top;
    background-size: 110% auto;
    background-repeat: no-repeat;
}
#onboarding.no_chance .grid2 > div:first-child{border: 1px solid #7D7D7D50; background-image: url("../img/roulette/popup_roulette.png")}
#onboarding.no_chance .grid2 > div:last-child{border: 1px solid #6638CE50; background-image: url("../img/roulette/popup_ad.png")}
#onboarding.no_chance .grid2 > div .img{width: 110%; height: 110%; margin: -5%;}
#onboarding.no_chance .grid2 > div button{position: absolute; bottom: 0; left: 0; z-index: 1;}

.spin h3 .time,
.spin .time_btn{display: none;}

.spin.done .the_wheel{mix-blend-mode: luminosity; opacity: 0.8;}
.spin.done h3 .spin,
.spin.done .spin_btn,
.spin.done .chance{display: none;}
.spin.done h3 .time,
.spin.done .time_btn{display: block;}


#profileModal .modal-dialog {padding: 3rem 0rem;}
#profileModal .modal-body {max-height: calc(70vh - 106px);padding: 20px 0px 30px 0px;}
#profileModal .modal-body h3 {display: none;}

#profileModal input[type=text]{height: 50px; text-align: center; font-size: 1.4em!important; border: 1px solid #CED3E6; background: #fff; color: #46538A; border-radius: 6px; font-weight: 600;}
#profileModal input[type=text]::placeholder{opacity: 0.5; font-weight: 400;}
#profileModal .name dt{text-align: left; font-size: 0.8em; margin-bottom: 10px;}
#profileModal .profile .box {border: none; padding: 0 18px}



#settingModal .modal-dialog {padding: 3rem 0rem;}
#settingModal .modal-body {max-height: calc(70vh - 106px);padding: 20px 0px 30px 0px;}
#settingModal .modal-body h3 {display: none;}

#rankingModal .modal-dialog {padding: 3rem 0rem;}
#rankingModal .modal-body {max-height: calc(70vh - 106px);padding: 20px 0px 30px 0px;}
#rankingModal .modal-body h3 {display: none;}
#rankingModal .modal-body .ranking .my_ranking { border-radius:0 0 13px 13px;color: #fff;}
#rankingModal .modal-body .ranking .my_ranking .list dl {     padding: 10px 1rem 10px 0;}
#rankingModal .modal-body section.ranking { grid-template-rows: 100px 1fr 70px;}
#rankingModal .modal-body .ranking .list dl {padding: 10px 10px;}
#rankingModal .modal-body .ranking .nav-tabs {font-size: 0.7em;}
#rankingModal .modal-body .ranking .list .photo {width: 34px;height: 34px;}
#rankingModal .modal-body .ranking .list dt .number {font-size: 1em; letter-spacing: -2px}
#rankingModal .modal-body .ranking .list dt {grid-template-columns: 1fr 35px 2fr; gap: 5px}
#rankingModal .modal-body .ranking .list dt .name {text-align: left;font-size: 0.8em;display: inline-block;width: 4.5em; /* 대략 5글자 정도의 폭 */white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}
#rankingModal .modal-body .ranking .list .circle {position: relative;width: 10px;height: 10px;}
#rankingModal .modal-body .ranking .list dd {grid-template-columns: 10px 1fr;gap: 2px;font-size: 0.8em; letter-spacing: -1.5px}

#adModal .modal-dialog {padding: 3rem 2rem;width: 100%;max-height: unset;height: 100%;display: flex;align-items: center;border-radius: 0;}

#completeModal .modal-content {
    max-height: unset;
    height: 100vh;}
#completeModal .modal-dialog {max-width: unset; width: 100vw;justify-content: center;border: 0}
#completeModal .modal-dialog {padding: 3rem 2rem;width: 100%;max-height: unset;height: 100%;display: flex;align-items: center;border-radius: 0;}
#completeModal .modal-dialog .firework {position: absolute;width: 20px;height: 20px;border-radius: 50%;opacity: 0;animation: explode 1s ease-out forwards;background: url("../img/firework.png") no-repeat center/100% 100%; z-index: 10;}

#completeModal .modal-body {max-height: unset;padding: 50px 0px;display: flex;flex-direction: column;height: 100vh}
#completeModal .game_warp {display: none}
#completeModal #game_board li{min-width: 24px;}
#completeModal .answer{display: flex; flex-wrap: wrap; align-items: center; justify-content:center; gap: 8px; margin: auto 0;flex-direction: column;}
#completeModal .answer li{display: inline-block; color: #100523; font-size: 1em; line-height: 1em; font-weight: 700;
    padding: 8px 14px; border: 1px solid #6B5AFF40; box-shadow: 0 2px 0 #6B5AFFB3; background: #fff; border-radius: 6px;
    z-index:1; opacity: 0; transform: translateY(20px); position: relative;
    animation: slideUp 0.5s ease-out forwards; animation-delay: calc(0.2s * var(--i));}