@charset "utf-8";

:root{
    --basic: #33363D;
    --subtext: #6D7882;
    --default: #29292C;
    --black: #000;
    --white: #fff;
    --gray-bg: #F4F5F6;
    --gray-line: #E0E0EA;
    --button-gr-hover: #45B96C;
    --button-wh-press: #D4FFD4;
    --button-wh-hover: #EEFFEE;
    --button-gy-color: #6D7882;
    --secondary-red: #FF9693;
    --secondary-green: #5ACC80;
    --secondary-blue: #B8D9FA;
    --secondary-yellow: #FFE9A6;
    --variants-red: #DF5A56;
    --variants-green: #208241;
    --variants-green1: #D4F3DC;
    --variants-green-bg: #ACEDAC;
    --variants-green-line: #C4F6C5;
    --variants-yellow: #FFF9E5;
    --static-red: #DA5353;
    --static-green: #0CA157;
    --static-blue: #007CFF;
    --static-orange: #E86D44;
    --font-title-lg : 2.8rem;
    --font-title-m : 2.4rem;
    --font-body-xxs: 1.4rem;
    --font-body-xs: 1.6rem;
    --font-body-s: 1.8rem;
    --font-body-m: 2rem;
    --font-label-lg: 2rem;
    --font-label-m: 1.6rem;
    
    
}
#contents.badgeland{width: auto; padding: 0;}
#contents.badgeland + #footer footer{margin-top: 0;}

.badgeland {max-width: 192rem; overflow: hidden; margin-inline: auto; letter-spacing: -0.02em; font-size: var(--font-body-s); color: var(--basic);}
.badgeland .mo{display: none;}
.badgeland .inr{max-width: 128rem; margin-inline: auto;}
.badgeland .icon-svg {display: inline-block; font-size: 0;}
.badgeland .icon-svg svg{width: 100%; height: 100%;}

/* 버튼 */
.badgeland .btn {display: flex; align-items: center; gap: 0.8rem; margin-top: 2.4rem;}
.badgeland .btn.wrap{flex-wrap: wrap;}
.badgeland .btn.row a, .badgeland .btn.row button{flex: 0 0 100%}
.badgeland .btn button, .badgeland .btn a{display: flex; justify-content: center; align-items: center; flex: 1; height: 4.8rem; line-height: 1; border-radius: 0.8rem; font-size: var(--font-body-xs); font-weight: 700; box-sizing: border-box;}
.badgeland .btn button:focus-visible, .badgeland .btn a:focus-visible{outline-offset: 0.2rem; outline-color: var(--global-gray-90);}
.badgeland .btn-bk{background-color: var(--global-gray-80); color: var(--global-gray-05);}
.badgeland .btn-bk:hover{background-color: var(--global-gray-90);}
.badgeland .btn-bk.press{background-color: var(--global-gray-90);}
.badgeland .btn-bk.disabled{background-color: var(--global-gray-10); color: var(--global-gray-40);}
.badgeland .btn-gr{background-color: var(--secondary-green); color: var(--basic);}
.badgeland .btn-gr:hover{background-color: var(--button-gr-hover);}
.badgeland .btn-gr.press{background-color: var(gr);}
.badgeland .btn-gr.disabled{background-color: var(--variants-green-line); color: var(--secondary-green); pointer-events: none;}
.badgeland .btn-wh{background-color: var(--white); border: 0.1rem solid var(--secondary-green); color: var(--variants-green);}
.badgeland .btn-wh:hover{background-color: var(--button-wh-hover);}
.badgeland .btn-wh.press{background-color: var(--button-wh-press);}
.badgeland .btn-wh.disabled{border: 0.1rem solid var(--variants-green-line); color: var(--variants-green-bg); pointer-events: none;}
.badgeland .btn-gy{background-color: var(--white); color: var(--button-gy-color); border: 0.1rem solid var(--button-gy-color);}
.badgeland .btn-gy:hover{background-color: var(--global-gray-05);}
.badgeland .btn-gy.press{background-color: var(--global-gray-10);}
.badgeland .btn-gy.disabled{color: var(--global-gray-40); border-color: var(--global-gray-30);}
.badgeland .layer-close{position: absolute; top: 1.6rem; right: 1.6rem; width: 2.4rem; height: 2.4rem;}

/* 툴팁 */
.badgeland .btn-tooltip{width: 1.6rem; height: 1.6rem; font-size: 0;}
.badgeland .btn-tooltip span{width: 100%; height: 100%;}
.badgeland .btn-tooltip + .tooltip-layer{display: none; z-index: 20; position: absolute; height: auto; padding: 1.4rem 1.6rem; border-radius: 0.6rem; border: 0.1rem solid var(--global-gray-30); box-shadow: 0.1rem 0.1rem 0.6rem 0 rgba(26, 26, 26, 0.12); background: var(--white);}
.badgeland .btn-tooltip + .tooltip-layer p{text-align: left; font-size: var(--font-body-xxs);}
.badgeland .btn-tooltip + .tooltip-layer p em{font-weight: 800;}
.badgeland .btn-tooltip + .tooltip-layer .btn-close{position: absolute; top: 1rem; right: 1rem;}


/** 메인 **/

/* 타이틀 */
.badgeland .title{height: 120rem; padding-block: 9.4rem 6rem; background: url(../images/bg_title.png) 50% 0 / cover no-repeat;}
.badgeland .title .title-img{display: flex; flex-direction: column; align-items: center; justify-content: center;}
.badgeland .title .title-img img{width: 40.6rem;}
.badgeland .title .title-img p{font-weight: 700; color: var(--black); margin-top: 2.8rem; text-align: center;}

/* 사용자 정보  */
.badgeland .user-summary{position: relative; z-index: 1; display: flex; width: 84.6rem; margin: 9.6rem auto 0; background: url(../images/summary_board_mid.png) 0 0 / 100% 0.1rem repeat-y;}
.badgeland .user-summary::before{content: ''; z-index: -1; position: absolute; top: -3.2rem; left: 0; display: block; width: 100%; height: 3.2rem; background: url(../images/summary_board_top.png) 0 0 / 100% 100% no-repeat;}
.badgeland .user-summary::after{content: ''; z-index: -1; position: absolute; bottom: -3.0rem; left: 0; display: block; width: 100%; height: 4.0rem; background: url(../images/summary_board_btm.png) 0 0 / 100% 100% no-repeat;}
.badgeland .user-summary .profile{position: relative; width: 54.4rem; flex-shrink: 0; display: flex; align-items: center; gap: 3.2rem; padding-inline: 4.8rem 4rem;}
.badgeland .user-summary .profile::after{content: ''; position: absolute; z-index: 10; top: -1.1rem; right: 0; display: inline-block; width: 0.1rem; height: calc(100% + 1.6rem); background: url(../images/bg_attendance_line.png) 0 50% / 100% auto repeat-y;}
.badgeland .user-summary .leader-badge{display: flex; align-items: center; flex-direction: column; gap: 1.6rem; width: 10rem; flex-shrink: 0; text-align: center;}
.badgeland .user-summary .leader-badge img{width: 100%;}
.badgeland .user-summary .leader-badge .badge-name{font-size: var(--font-body-xxs); color: var(--subtext); font-weight: 800; line-height: 1.2;}
.badgeland .user-summary .leader-badge.no-badge img{width: 5.2rem;}
.badgeland .user-summary .leader-badge.no-badge p{font-size: var(--font-body-xxs); font-weight: 700; color: var(--subtext); line-height: 1.2;}
.badgeland .user-summary .info{width: 32.4rem;}
.badgeland .user-summary .info .top{border-bottom: 0.1rem solid var(--gray-line); font-size: 0;}
.badgeland .user-summary .info .rank{position: relative; z-index: 1; font-size: var(--font-body-s);}
.badgeland .user-summary .info .rank::before{content: ''; display: inline-block; margin-right: 0.6rem; width: 1.8rem; height: 1.4rem; background: url(../images/icon_myrank.png) 0 0 / 100% 100% no-repeat;}
.badgeland .user-summary .info .rank::after{content: ''; z-index: -1; position: absolute; bottom: 0.2rem; right: 0; display: inline-block; width: calc(100% - 2.4rem); height: 0.6rem; background-color: var(--secondary-yellow);}
.badgeland .user-summary .info .rank em{font-weight: 800;}
.badgeland .user-summary .info .username{display: flex; align-items: flex-end; color: var(--black); font-size: 0; margin-top: 0.8rem; padding-bottom: 1rem;}
.badgeland .user-summary .info .username em{display: inline-block; max-width: calc(100% - 2.4rem); text-overflow: ellipsis; white-space: nowrap; overflow: hidden; font-weight: 800; font-size: var(--font-title-lg); line-height: 1.2;}
.badgeland .user-summary .info .username span{font-size: var(--font-body-s); font-weight: 700; padding-left: 0.8rem;}
.badgeland .user-summary .info .bottom{display: flex; align-items: center; padding-top: 1.8rem; gap: 3.2rem;}
.badgeland .user-summary .info .bottom span{display: flex; align-items: center; color: var(--subtext); font-size: var(--font-body-xs);}
.badgeland .user-summary .info .bottom span em{font-weight: 800; padding-left: 0.6rem;}
.badgeland .user-summary .info .bottom span::before{content: ''; display: inline-block; margin-right: 0.6rem; width: 1.2rem; height: 1.8rem; background: url(../images/icon_mybadge.png) 0 0 / 100% 100% no-repeat;}
.badgeland .user-summary .info .bottom .point::before{background-image: url(../images/icon_mypoint.png);}

/* 사용자 정보 - 출석체크영역 */
.badgeland .user-summary .attendance{position: relative; width: 100%; text-align: center; padding-inline: 3.6rem;}
.badgeland .user-summary .attendance .top{display: flex; align-items: center; justify-content: center; gap: 0.5rem; padding-bottom: 1.6rem; border-bottom: 0.1rem solid var(--gray-line);}
.badgeland .user-summary .attendance .top span{color: var(--variants-green); font-size: var(--font-body-xs); font-weight: 800; line-height: 1;}
.badgeland .user-summary .attendance .btn-tooltip + .tooltip-layer{top: 3rem; right: -2rem; width: 36.4rem;}
.badgeland .user-summary .attendance .bottom{display: flex; justify-content: center; align-items: center; gap: 1.8rem; padding-top: 1rem;}
.badgeland .user-summary .condition .stats{font-size: var(--font-body-xxs); letter-spacing: 0; margin-top: 1.2rem; line-height: 1;}
.badgeland .user-summary .condition .stats .current{font-size: var(--font-body-xs); font-weight: 800;}
.badgeland .user-summary .btn-attendance-stat{display: flex; align-items: center; height: 3.2rem; line-height: 1; padding-inline: 1.6rem 1rem; background: var(--variants-green1); border-radius: 99rem; font-size: var(--font-body-xxs); font-weight: 700; }
.badgeland .user-summary .btn-attendance-stat .icon-svg{width: 1.6rem; height: 1.6rem;}
.badgeland .user-summary .btn-attendance-stat .icon-svg svg path{stroke: var(--basic);}
.badgeland .user-summary .check{width: 9.6rem; height: 8.4rem; flex-shrink: 0; background: url(../images/bg_attendance_check.png) 0 0 / 100% auto no-repeat; color: var(--subtext);}
.badgeland .user-summary .check.today{background-position: 0 -8.4rem;}
.badgeland .user-summary .check.complete{background-position: 0 -16.8rem; color: var(--white); pointer-events: none;}
.badgeland .user-summary .check span{display: flex; flex-direction: column; justify-content: center; align-items: center; padding-top: 0.4rem; height: 100%; font-size: var(--font-body-xs); line-height: 1.2;}
.badgeland .user-summary .check span em{display: block; font-weight: 800; line-height: 1.1;}

/* 사용자 정보 로그인 전 */
.badgeland .user-summary.before-login .profile{gap: 5.5rem;}
.badgeland .user-summary.before-login .profile img{width: 6.2rem;}
.badgeland .user-summary.before-login .profile p{flex: 1; font-size: 2rem; text-decoration: underline; text-underline-offset: 0.5rem; color: var(--black); letter-spacing: 0;}
.badgeland .user-summary.before-login .profile p em{display: block; padding-top: 0.3rem; font-weight: 800;}
.badgeland .user-summary.before-login .attendance{display: flex; align-self: center; justify-content: center; flex: 1;}
.badgeland .btn-attendance{display: flex; align-items: center; justify-content: center; width: 19.4rem; height: 6.3rem; background: url(../images/bg_btn_attendance.png) 0 0 / 100% 100% no-repeat; font-weight: 800; color: var(--static-red);}
.badgeland .btn-attendance span{width: 2rem; height: 2rem; margin-top: -0.15rem;}

/* 입구 영역 */
.badgeland .entrance { margin-top: 6rem;} 
.badgeland .entrance .carousel{display: flex; justify-content: center; gap: 5rem;}

/* 배지 영역 */
.badgeland .badge-area{padding-block: 6.4rem 4.8rem;}
.badgeland .badge-area .badge-type{margin-bottom: 5.2rem;}
.badgeland .badge-area .badge-type:last-child{margin-bottom: 0;}
.badgeland .badge-type strong{display: flex; align-items: center; justify-content: center; width: 100%; height: 5.6rem; border-radius: 1rem; background: var(--variants-green-line); font-size: 2.8rem; font-weight: 800; color: var(--basic);}
.badgeland .badge-type ul{display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, auto)); gap: 3.2rem 6.4rem; padding-block: 4rem; width: 100%;}
.badgeland .badge-item{position: relative; display: flex; flex-direction: column; align-items: center; padding: 1.6rem;}
.badgeland .badge-item .new{position: absolute; top: 0; right: -1.8rem; align-content: center; text-align: center; width: 1.8rem; height: 1.8rem; background-color: var(--static-blue); border-radius: 50%; color: var(--white); font-size: 1rem; font-weight: 800; }
.badgeland .badge-item .badge-img{position: relative; display: flex; align-items: center; justify-content: center; width: 10rem !important; height: 10rem !important;}
.badgeland .badge-img svg{position: absolute; top: 0; left: 0;}
.badgeland .badge-img img{width: 100%;}
.badgeland .badge-item .ldBar img{width: 7rem; filter: grayscale(1); opacity: 0.2;}
.badgeland .badge-item .ldBar path.mainline{stroke-width: 0.6rem; stroke: var(--secondary-green); stroke-linecap: round;}
.badgeland .badge-item .ldBar path.baseline{stroke-width: 0.6rem; stroke: var(--global-gray-10); stroke-linecap: round;}
.badgeland .badge-item .ldBar .ldBar-label{display: none;}
.badgeland .badge-item .badge-name{display: block; padding-top: 2.4rem; text-align: center; font-weight: 700;}
.badgeland .badge-item .badge-img.end img{filter: grayscale(1); opacity: 0.2;}
.badgeland .badge-item .badge-img.end::after{content: ''; position: absolute; top: 0; left: 0; display: block; width: 10rem; height: 10rem; background: url(../images/badge/badge_end.png) 0 0 / 100% 100% no-repeat;}
.badgeland .badge-item .badge-stat{display: flex; align-items: center; gap: 0.4rem; height: 2.4rem; margin-top: 0.8rem; padding-inline: 1.6rem; background-color: var(--gray-bg); border-radius: 99rem; font-size: var(--font-body-xxs); line-height: 1;}
.badgeland .badge-item .badge-stat .current{font-weight: 800;}


/* 플로팅네비(도감, 랭킹 공통) */
.badgeland .float{position: fixed; z-index: 15; bottom: 5rem; right: -10rem; text-align: left; opacity: 0; transition: opacity .5s ease, right .5s ease;}
.badgeland .float.on{right: -0.1rem; opacity: 1;}
.badgeland .float.off{right: -9rem;}
.badgeland .float a{display: flex; align-items: center; gap: 1.1rem; width: 15.6rem; height: 7rem; line-height: 1.3; margin-bottom: 0.6rem; padding-left: 2.1rem; border-radius: 99rem 0 0 99rem; background-color: var(--secondary-red); box-sizing: border-box;}
.badgeland .float a img{width: 3.5rem; height: 3.5rem;}
.badgeland .float a span{display: block; width: 6.6rem !important; height: auto !important; margin: 0 !important; font-weight: 800; line-height: 1.3; font-size: var(--font-body-sm); text-indent: 0; background: none !important;}
.badgeland .float a.on{background-color: var(--basic); color: var(--white);}
.badgeland .float a.fold{background-color: var(--white); border: 0.1rem solid var(--basic); border-right: none;}
.badgeland .float a.fold span{line-height: 1;}
.badgeland .float.off a.fold img{transform: rotate(180deg);}


/* 탭(도감, 랭킹 공통) */
.badgeland .badge-tab{background-color: var(--variants-green-bg);}
.badgeland .badge-tab .inr{display: flex; align-items: end;}
.badgeland .badge-tab a{height: 6.6rem; flex: 1; align-content: center; background-color: var(--secondary-green); border-radius: 2rem 0 0 0; text-align: center; color: var(--white); text-shadow: -0.2rem -0.2rem 0 var(--variants-green), -0.2rem 0 0 var(--variants-green), -0.2rem 0.2rem 0 var(--variants-green), 0 -0.2rem 0 var(--variants-green), 0 0.2rem 0 var(--variants-green), 0.2rem -0.2rem 0 var(--variants-green), 0.2rem 0 0 var(--variants-green), 0.2rem 0.2rem 0 var(--variants-green); font-size: var(--font-title-m); font-weight: 800; }
.badgeland .badge-tab a:focus-visible{outline-offset: -0.1rem;}
.badgeland .badge-tab a + a{border-radius: 0 2rem 0 0;}
.badgeland .badge-tab a.on{height: 9rem; background-color: var(--white); color: var(--basic); text-shadow: none; border-radius: 2rem 2rem 0 0; text-decoration: underline; text-underline-offset: 0.5rem;}

.badgeland .badge-tabcont{padding-block: 8rem;}
.badgeland .badge-tabcont .btn-more{display: flex; align-items: center; height: 4.8rem; padding-inline: 2.4rem 2rem; margin: 3.2rem auto 0; gap: 0.5rem; line-height: 1; font-size: var(--font-body-xs); border: 0.1rem solid var(--gray-line); color: var(--basic); border-radius: 99rem; font-weight: 400;}
.badgeland .badge-tabcont .btn-more span{width: 2rem; height: 2rem;}
.badgeland .badge-tabcont .tablist-top{display: flex; align-items: center; justify-content: space-between; margin-bottom: 3.2rem;}

/* 리스트 없을 때(도감, 랭킹 공통) */
.badgeland .no-list{text-align: center;}
.badgeland .no-list img{width: 12rem;}
.badgeland .no-list p{margin-top: 2.4rem; font-weight: 700; color: var(--subtext);}

/** 랭킹왕국 **/

/* 랭킹왕국 타이틀 */
.badgeland .ranking-title{height: 77.6rem; padding-block: 6.4rem 7.2rem; background-color: var(--variants-green-bg);}
.badgeland .ranking-title .ranking-info{display: flex; align-items: center; justify-content: space-between; padding: 2rem 5.2rem; height: 13rem; margin-inline: 21.7rem; background-color: var(--white); border: 0.2rem solid var(--secondary-green); border-radius: 2rem;}
.badgeland .ranking-title .ranking-info .stat{flex: 1;}
.badgeland .ranking-title .ranking-info p{position: relative; display: inline-block; margin-bottom: 0.8rem; color: var(--static-red); font-size: var(--font-body-xxs); font-weight: 700; text-decoration: underline; text-decoration-color: rgba(218, 83, 83, 0.4); text-underline-offset: 0.3rem;}
.badgeland .ranking-title .ranking-info .current{font-size: var(--font-body-m);}
.badgeland .ranking-title .ranking-info .current strong{color: var(--variants-green); font-weight: 800;}
.badgeland .ranking-title .ranking-info .rank{font-weight: 800;}
.badgeland .ranking-title .ranking-info .rank-arrow{display: inline-block; width: 1rem; height: 0.8rem; vertical-align: -0.9rem; background: url(../images/rankarrow.png) 0 0 / 100% auto no-repeat; text-indent: -9999rem;}
.badgeland .ranking-title .ranking-info .rank-arrow.down{background-position: 0 -0.8rem;}
.badgeland .ranking-title .ranking-info .point{color: var(--subtext); font-size: var(--font-body-xxs); font-weight: 700; vertical-align: 0.2rem; line-height: 1;}
.badgeland .ranking-title .ranking-info .img{width: 9rem; height: 9rem; flex-shrink: 0;}
.badgeland .ranking-title .ranking-info .img img{width: 100%;}
.badgeland .ranking-title .ranking-info.before-login{padding-inline: 8rem 6.4rem;}
.badgeland .ranking-title .ranking-info.before-login p{color: var(--basic); font-size: var(--font-body-m); font-weight: 800; text-decoration-color: var(--basic); text-underline-offset: 0.5rem; margin-bottom: 0;}
.badgeland .ranking-title .ranking-info.before-login p:after{border-color: var(--basic);}
.badgeland .ranking-title .benefit{margin-top: 8rem;}
.badgeland .ranking-title .benefit .benefit-tit{display: block; width: 39.2rem; margin-inline: auto;}
.badgeland .ranking-title .benefit .benefit-tit img{width: 100%;}
.badgeland .ranking-title .gift-list{display: flex; align-items: center; justify-content: center; gap: 4rem; margin: 5.8rem 9rem 0;} 
.badgeland .ranking-title .gift-list li{position: relative; width: 34rem; text-align: center;}
.badgeland .ranking-title .gift-list li .img{display: block; width: 100%; aspect-ratio: 1; align-content: center; border-radius: 100%; background-color: var(--variants-green-line);}
.badgeland .ranking-title .gift-list li .img img{margin-top: -2rem;}
.badgeland .ranking-title .gift-list li .rank{position: absolute; top: -1rem; left: 50%; transform: translateX(-50%); display: inline-block; align-content: center; text-align: center; width: 13.6rem; height: 4rem; background-color: var(--secondary-yellow); border-radius: 99rem; font-size: var(--font-body-s); font-weight: 800; line-height: 1;}
.badgeland .ranking-title .gift-list li .gift{position: absolute; top: 26rem; left: 50%; transform: translateX(-50%); display: block; margin-top: 0.8rem; color: var(--variants-green);}


/* 월간랭킹 */
.badgeland .standard-noti{position: relative; font-size: var(--font-body-xs); color: var(--subtext);}
.badgeland .standard-noti .btn-tooltip{vertical-align: -0.3rem;}
.badgeland .standard-noti .btn-tooltip + .tooltip-layer{top: 0; left: calc(100% + 1rem); width: 31rem;}
.badgeland .calendar{position: relative;}
.badgeland .calendar .input-wrap{position: relative; width: 32.8rem; }
.badgeland .calendar .input-wrap span{position: absolute; top: 50%; transform: translateY(-50%); right: 2.4rem;}
.badgeland .calendar .input-wrap:focus-within > .input-text, .badgeland .calendar .input-wrap.acitve > .input-text{background-color: var(--white); border: 0.1rem solid var(--global-gray-80)}
.badgeland .calendar .input-text{width: 100%; height: 100%; padding: 1.2rem 2.4rem 1.2rem 1.6rem; height: 4.8rem; color: var(--global-gray-60); border-radius: 0.6rem; border: 0.1rem solid var(--global-gray-30); font-size: var(--font-body-xs); cursor: pointer; box-sizing: border-box;}
.badgeland .calendar .input-text:focus, .badgeland .calendar .input-text.active{outline: none;}
.badgeland .calendar .input-wrap:hover > .input-text{background-color: var(--global-gray-05);}
.badgeland .calendar .input-wrap.disabled{color: var(--global-gray-60); cursor: default; background-color: var(--white); border-color:var(--global-gray-30);}
.badgeland .calendar .calendar-layer{position: absolute; display: none; z-index: 20; width: 32.8rem; height: 35.8rem; padding: 0.8rem 1.6rem 2.4rem; margin-top: 1.2rem; border-radius: 0.8rem; border: 0.1rem solid var(--global-gray-30); box-shadow: 0.4rem 0.4rem 1.6rem 0 rgba(0, 0, 0, 0.08); background: var(--white)}
.badgeland .calendar .calendar-layer button{outline-offset: 0.2rem; outline-color: var(--default);}
.badgeland .calendar .calendar-layer .calendar-top{display: flex; align-items: center; justify-content: space-between; height: auto; padding: 1.2rem 0.4rem; border-bottom: 0.1rem solid var(--gray-line); box-sizing: border-box;}
.badgeland .calendar .calendar-layer .calendar-top .this-year{font-weight: 800;}
.badgeland .calendar .calendar-layer .btn-yearchange{display: flex; align-items: center; justify-content: center; width: 4rem; height: 4rem; line-height: 4rem;}
.badgeland .calendar .calendar-layer .btn-yearchange svg{width: 2rem; height: 2rem;}
.badgeland .calendar .calendar-layer .btn-yearchange path{stroke: var(--global-gray-80);}
.badgeland .calendar .calendar-layer .month{display: flex; flex-wrap: wrap; gap: 0.9rem 0.8rem; margin-top: 1.2rem;}
.badgeland .calendar .calendar-layer .month button{width: calc((100% - 1.6rem) / 3); height: 4.1rem; color: var(--default); border-radius: 0.8rem; font-size: var(--font-body-xs); font-weight: 800;}
.badgeland .calendar .calendar-layer .month button.select, .badgeland .calendar .calendar-layer .month button.select:hover{background-color: var(--brand-primary-60); color: var(--white);}
.badgeland .calendar .calendar-layer .month button.press{background-color: rgba(0, 0, 0, 0.1);}
.badgeland .calendar .calendar-layer .month button:hover{background-color: rgba(0, 0, 0, 0.05)}
.badgeland .calendar .calendar-layer .month button.disabled{color: #949499; pointer-events: none;}
.badgeland .btn-cancel{display: block; margin: 1.6rem auto 0; font-size: var(--font-body-xs);}
.badgeland .btn-cancel:hover{background-color: var(--global-gray-05);}
.badgeland .btn-cancel.press{background-color: var(--global-gray-10);}

.badgeland .rank-list{text-align: center;}
.badgeland .rank-list li{display: flex; align-items: center; gap: 2.4rem; height: 11.8rem; padding-inline: 3.2rem; border-bottom: 0.1rem solid var(--gray-line); box-sizing: border-box;}
.badgeland .rank-list li:first-child{border-top: 0.1rem solid var(--gray-line);}
.badgeland .rank-list li .rank{width: 4rem; height: 5.3rem; margin-top: 0.6rem; padding-top: 0.8rem; text-align: center; font-size: var(--font-body-s); font-weight: 800; box-sizing: border-box;}
.badgeland .rank-list li .rank.first{background: url(../images/rank_medal_first.png) 0 0 / 100% 100% no-repeat;}
.badgeland .rank-list li .rank.second{background: url(../images/rank_medal_second.png) 0 0 / 100% 100% no-repeat;}
.badgeland .rank-list li .rank.third{background: url(../images/rank_medal_third.png) 0 0 / 100% 100% no-repeat;}
.badgeland .rank-list li .badge-img{width: 6.4rem; height: 6.4rem;}
.badgeland .rank-list li .txt{display: flex; align-items: center; justify-content: space-between; flex: 1;}
.badgeland .rank-list li .my-rank{width: 7rem; height: 3rem; align-content: center; margin-left: 0.8rem; line-height: 1; background-color: var(--secondary-yellow); color: var(--static-red); font-size: var(--font-body-xxs); font-weight: 800; border-radius: 99rem; text-align: center;}
.badgeland .rank-list li .badge-name{font-size: var(--font-body-m); font-weight: 800;}
.badgeland .rank-list li .point{margin-left: auto; font-size: var(--font-body-xs); color: var(--subtext);}
.badgeland .rank-list li .point::before{content: ''; display: inline-block; margin-right: 0.8rem; width: 1.2rem; height: 1.8rem; vertical-align: -0.3rem; background: url(../images/icon_rankpoint.png) 0 0 / 100% 100% no-repeat;}
.badgeland .rank-list li .point em{font-weight: 800;}


/* 연간랭킹 */
.badgeland .year-change{display: flex; align-items: center; gap: 4rem; margin-inline: auto;}
.badgeland .year-change .year-tit{font-size: var(--font-title-lg); font-weight: 800; color: var(--black); line-height: 1.2; box-shadow: inset 0 -0.8rem 0 0 var(--secondary-yellow);}
.badgeland .btn-year-arrow{width: 3rem; height: 3rem; border-radius: 100%; background-color: var(--basic);}
.badgeland .btn-year-arrow:focus-visible{outline-color: red;}
.badgeland .btn-year-arrow svg{width: 2rem; height: 2rem;}
.badgeland .top-rank{margin-block: 9rem 6rem;}
.badgeland .rank-list .top-rank ul{display: flex; justify-content: center; margin-inline: 13.9rem; gap: 4.8rem;}
.badgeland .rank-list .top-rank ul li{flex-direction: column; padding-inline: 8.5rem; gap: 1.6rem; width: 30.2rem; height: 34rem; border-radius: 2rem; border: none;}
.badgeland .rank-list .top-rank ul li:first-child{order: 2; background-image: linear-gradient(rgba(255,150,147, 0.5), #fff);}
.badgeland .rank-list .top-rank ul li:nth-child(2){order: 1; margin-top: 5.6rem; background-image: linear-gradient(rgba(184,217,250, 0.5), #fff);}
.badgeland .rank-list .top-rank ul li:nth-child(3){order: 3; margin-top: 5.6rem; background-image: linear-gradient(rgba(255,233,166,0.5), #fff);}
.badgeland .rank-list .top-rank li .rank{width: 6rem; height: 7.95rem; margin-top: -3rem; padding-top: 1.2rem; font-size: var(--font-title-lg);}
.badgeland .rank-list .top-rank li .rank.first{color: #96322F;}
.badgeland .rank-list .top-rank li .rank.second{color: #3A3A3A;}
.badgeland .rank-list .top-rank li .rank.third{color: #613720;}
.badgeland .rank-list .top-rank ul li:first-child{border-top: none;}
.badgeland .rank-list .top-rank li .badge-img{width: 10rem; height: 10rem; margin-top: 0.8rem;}
.badgeland .rank-list .top-rank li .txt{flex-direction: column; justify-content: normal; gap: 0.8rem;}
.badgeland .rank-list .top-rank li .point{margin-inline: auto; text-align: center;}
.badgeland .rank-list .top-rank li .my-rank{margin-left: 0;}
.badgeland .rank-list .final{padding-top: 2.8rem;}
.badgeland .rank-list .final img{width: 9.6rem;}
.badgeland .rank-list .final p{margin-top: 2.4rem; font-weight: 700;}

/* 나의 배지도감 */
.badgeland .book-title{height: 34rem; padding-block: 7.2rem 8.3rem; background-color: var(--variants-green-bg);}
.badgeland .book-title .inr{display: flex; gap: 5.6rem; padding-left: 18.91%;}
.badgeland .book-title .badge-area{position: relative; flex-shrink: 0; width: 16rem; height: 16rem; aspect-ratio: 1 / 1; padding-block: 2rem 3rem; border: 0.2rem solid var(--black); text-align: center; border-radius: 100%; background-color: var(--white); box-shadow: 0 0.4rem 0 0 var(--black); font-size: 0;}
.badgeland .book-title .badge-area strong{display: block; margin-top: 0.8rem; color: var(--variants-green); font-size: var(--font-title-m); font-weight: 800; line-height: 1;}
.badgeland .book-title .badge-area .txt{color: var(--subtext); font-size: var(--font-body-xxs); margin-top: 1.2rem; line-height: 1.2;}
.badgeland .book-title .badge-area .tooltip-layer{width: 32.5rem; top: 4rem; left: 50%; transform: translateX(-50%);}
.badgeland .book-title .badge-img{width: 10rem; height: 10rem; margin: 1rem auto;}
.badgeland .book-title .btn-badgecancel{height: 4rem; padding-inline: 2.2rem ; border-radius: 99rem; color: var(--white); background-color: var(--basic); font-size: var(--font-body-xs); font-weight: 800;}
.badgeland .book-title .btn-badgecancel:focus-visible{outline-color: red;}
.badgeland .book-title .my-info{margin-top: 0.8rem;}
.badgeland .book-title .my-info .username{display: flex; align-items: flex-end; color: var(--black);}
.badgeland .book-title .my-info .username em{font-size: var(--font-title-m); font-weight: 800;}
.badgeland .book-title .my-info .username span{padding-left: 0.3rem; font-size: var(--font-body-s);}
.badgeland .book-title .my-info ul{margin-top: 1.6rem; font-weight: 700;}
.badgeland .book-title .my-info li{position: relative; padding-left: 1.4rem;}
.badgeland .book-title .my-info li::before{content: '*'; position: absolute; top: 0; left: 0; display: inline-block;}
.badgeland .book-list .badge-type ul{padding-block: 1.6rem;}
.badgeland .book-list .pagination_wrap{margin-top: 4rem;}

/* 나의 배지도감 - 배지도감 */
.badgeland .year-select{position: relative; margin-left: auto;}
.badgeland .year-select .btn-year{gap: 0.2rem;}
.badgeland .year-select .btn-year span + span{margin-right: -0.6rem;}
.badgeland .year-select .sel-list{display: none; box-sizing: content-box; position: absolute; z-index: 1; max-height: 21.6rem; overflow-y: auto; margin-top: 0.8rem; padding: 0.8rem; border-radius: 0.6rem; background-color: var(--white); border: 0.1rem solid rgba(0, 0, 0, 0.1);}
.badgeland .year-select .sel-list::-webkit-scrollbar{width: 0.8rem;}
.badgeland .year-select .sel-list::-webkit-scrollbar-thumb{border-radius: 0.6rem; border: 0.2rem solid #fff; background-color: var(--global-gray-40);}
.badgeland .year-select .sel-list::-webkit-scrollbar-track{margin-block: 0.8rem;}
.badgeland .year-select .sel-list li button{display: block; width: 100%; height: 4rem; padding-inline: 2rem; border-radius: 0.6rem; color: var(--global-gray-60); font-size: 1.5rem; font-weight: 700;}
.badgeland .year-select .sel-list li button.select{color: var(--global-gray-90); background-color: var(--global-gray-05);}
.badgeland .book-list .btn-more.mo{display: none;}

/* 나의 배지도감 - 활동내역 */
.badgeland .book-list table{text-align: center; font-size: var(--font-body-s); color: var(--basic); font-weight: 700;}
.badgeland .book-list table caption{position: relative; font-size: 0;}
.badgeland .book-list table thead{border-top: 0.1rem solid var(--basic); border-bottom: 0.1rem solid var(--basic);}
.badgeland .book-list table th{height: 5.6rem; font-size: var(--font-body-m); font-weight: 800;}
.badgeland .book-list table tbody tr{height: 6.4rem; border-bottom: 0.1rem solid var(--gray-line);}
.badgeland .book-list table td:nth-child(2){color: var(--static-green);}
.badgeland .book-list table td:nth-child(2).minus{color: var(--static-red);}
.badgeland .book-list table td:last-child{font-size: var(--font-body-xs); font-weight: 400;}

/* 랭킹 안내소 */
.badgeland .landinfo-wrap{background: url(../images/bg_landinfo.png) 50% 0 / cover no-repeat; text-align: center; font-size: 0;}
.badgeland .landinfo-wrap img, .badgeland .go-badgeland img{width: 100%; vertical-align: top;}
.badgeland .landinfo-wrap .info-title{position: relative;}
.badgeland .landinfo-wrap .btn-go-badgeland{position: absolute; bottom: 15.38%; left: 50%; transform: translateX(-50%); width: 16.56%; height: 11.15%; display: inline-block; text-indent: -9999rem; border-radius: 99rem;}
.badgeland .go-badgeland{display: block; background-color: #CFFAFF; text-align: center;}
.badgeland .go-badgeland:focus-visible{outline-offset: -0.1em;}


/** 유의사항 **/
.badgeland .notice{padding-block: 4rem 2.4rem; background: var(--gray-bg);}
.badgeland .notice .notice-title{display: flex; align-items: center; gap: 0.8rem; margin-bottom: 1.6rem; color: var(--basic); font-weight: 800; line-height: 1;}
.badgeland .notice .notice-title::after{content: ''; display: inline-block; width: 1rem; height: 0.7rem; background: url(../images/notice_arrow.png) 0 0 / 100% 100% no-repeat; transition: all 0.3s;}
.badgeland .notice .notice-title.on::after{transform: rotate(180deg); transition: all 0.3s;}
.badgeland .notice ul{display: none;}
.badgeland .notice li{position: relative; color: var(--subtext); font-size: var(--font-body-xxs); font-weight: 700; padding-left: 1rem; margin-bottom: 0.8rem; line-height: 1;}
.badgeland .notice li:last-child{margin-bottom: 1.6rem;}
.badgeland .notice li::before{content: ''; position: absolute; top: 50%; transform: translateY(-50%); left: 0; display: inline-block; width: 0.4rem; height: 0.4rem; border-radius: 50%; background-color: var(--subtext);}

/* 모바일 튜토리얼 */
.badgeland .tutorial{display: none;}

/** 팝업 **/
.badgeland .layerpop{margin-top: 0 !important; margin-left: 0 !important; transform: translate(-50%, -50%); border-radius: 1.4rem; background: var(--white); text-align: center;}
.badgeland .layer-close svg path{stroke: var(--global-gray-80);}

/* 출석체크 팝업 */
#attendancePop .layerpop{width: 51.8rem; padding: 4rem 1.4rem 1.6rem;}
#attendancePop h3{font-size: var(--font-title-m); color: var(--default); font-weight: 800; line-height: 3.6rem; display: inline-block; box-shadow: inset 0 -0.8rem 0 0 var(--secondary-yellow);}
#attendancePop .calendar{margin-top: 0.8rem; font-size: var(--font-body-xs); color: var(--black);}
#attendancePop .calendar tr{height: 7rem;}
#attendancePop .calendar th{color: var(--subtext); padding: 0;}
#attendancePop .calendar td{padding: 0; vertical-align: top;}
#attendancePop .calendar td em{display: inline-block; width: 5.4rem; height: 4.6rem; line-height: 4.8rem; background-repeat: no-repeat; background-size: 100% 100%;}
#attendancePop .calendar td.pass em{background-image: url(../images/bg_attendance_pop_pass.png);}
#attendancePop .calendar td.today em{background-image: url(../images/bg_attendance_pop_today.png);}
#attendancePop .calendar td.complete em{background-image: url(../images/bg_attendance_pop_complete.png); color: var(--white);}
#attendancePop .calendar td.complete span{display: block; color: var(--static-orange); font-size: 1.2rem; font-weight: 800; line-height: 1; padding-top: 0.5rem;}
#attendancePop .layer-close{top: 2.4rem; right: 1.8rem;} 

/* 기본도전&단일도전 팝업 */
.challenge-pop.layerpop{width: 40rem; max-height: 78%; padding: 4rem 0 2.4rem; overflow-y: auto;}
.challenge-pop .ing{display: flex; align-items: center; justify-content: center; width: fit-content; height: 3.2rem; line-height: 1; margin: 0 auto 0.4rem; padding-inline: 2rem; border-radius: 99rem; background: var(--variants-yellow); font-size: var(--font-body-xxs);}
.challenge-pop .ing .colon{padding-inline: 0.4rem;}
.challenge-pop .ing em{font-weight: 800;}
.challenge-pop .cheer-phrase{font-size: var(--font-title-m); font-weight: 800; line-height: 1.5; color: var(--black); box-shadow: inset 0 -0.8rem 0 0 #FFE4E3;}
.challenge-pop .badge-list{margin-top: 2.2rem;}
.challenge-pop .badge-list .swiper-container{padding-bottom: 1.8rem;}
.challenge-pop .badge-list .badge-item{width: 16.8rem; min-height: 21rem; height: auto; padding: 2.35rem 3.4rem; box-sizing: border-box;}
.challenge-pop .badge-list .badge-item .badge-name{padding-top: 1.6rem;}
.challenge-pop .badge-list .swiper-pagination{bottom: 0; font-size: 0;}
.challenge-pop .badge-list .swiper-pagination .swiper-pagination-bullet{width: 1rem; height: 1rem; background: var(--gray-line); opacity: 1;}
.challenge-pop .badge-list .swiper-pagination .swiper-pagination-bullet-active{width: 2rem; background: var(--basic); border-radius: 99rem;}
.challenge-pop .badge-data{margin: 2.4rem 2.4rem 0 2.4rem;}
.challenge-pop .badge-data .gray-box{padding: 1.6rem 1.2rem; background-color: var(--gray-bg); border-radius: 0.8rem;}
.challenge-pop .badge-data .gray-box p{font-size: var(--font-body-xs); line-height: 1.5; }
.challenge-pop .task .gray-box{height: 21.8rem; text-align: left;}
.challenge-pop .task .gray-box.full{height: 29rem;}
.challenge-pop .badge-data .scroll{ max-height: 100%; padding-inline: 1.2rem; overflow-y: auto; }
.challenge-pop .badge-data .scroll::-webkit-scrollbar{width: 1rem;}
.challenge-pop .badge-data .scroll::-webkit-scrollbar-thumb{background-color: #E5E5E5;}
.challenge-pop .badge-data .scroll::-webkit-scrollbar-track{ margin: 0.5rem 0.3rem;}
.challenge-pop .task .gray-box span{font-size: var(--font-body-xs); font-weight: 800; color: var(--black); line-height: 1.5;}
.challenge-pop .task .gray-box p{margin-top: 0.3rem;}
.challenge-pop .gain .gray-box{height: 11rem;}
.challenge-pop .btn-badgeshare{display: flex; align-items: center; justify-content: center; gap: 0.4rem; height: 3.6rem; line-height: 1; margin: 1.6rem auto 0; padding-inline: 1.8rem; font-weight: 700; font-size: var(--font-body-xxs); border-radius: 99rem;}
.challenge-pop .btn-badgeshare svg path{stroke: var(--variants-green);}
.challenge-pop .gain .btn-gr{width: 100%; flex: 0 0 100%;}
.challenge-pop .skillful .gray-box{height: 16.2rem;}
.challenge-pop.single .badge-list .swiper-container{padding-bottom: 0;}
.challenge-pop.single .task .gray-box{height: 23.6rem;}
.challenge-pop.single .gain .gray-box{height: 12.8rem;}
.challenge-pop.single .task .gray-box.full{height: 30.8rem;}
.challenge-pop.single .skillful .gray-box{height: 18rem;}

/* 대표배지 설정 관련 팝업 */
.setting-pop.layerpop{width: 30.2rem; height: auto; padding: 3.2rem 1.6rem 1.6rem;}
.setting-pop p{color: var(--black); font-weight: 700;}
.setting-pop .btn{margin-top: 2rem;}
.setting-pop .layer-close{top: 0.8rem; right: 0.8rem;}

/* 랭킹확정 팝업 */
.rank-pop.layerpop{width: 30.2rem; height: auto; padding: 3.2rem 1.6rem 1.6rem;}
.rank-pop p{color: var(--black); font-weight: 700;}
.rank-pop .rank{display: flex; align-items: center; flex-direction: column; margin-top: 1.2rem;}
.rank-pop .my-rank{display: inline-block; width: fit-content; line-height: 1; font-size: var(--font-body-xs); font-weight: 800; color: var(--variants-green); box-shadow: inset 0 -0.8rem 0 0 var(--secondary-yellow)}
.rank-pop .my-rank + .my-rank{margin-top: 1.6rem;}
.rank-pop .btn{margin-top: 2rem;}
.rank-pop .layer-close{top: 0.8rem; right: 0.8rem;}

/* 정보관련 팝업 */
.info-pop.layerpop{width: 30.2rem; height: auto; padding: 3.2rem 1.6rem 1.6rem;}
.info-pop p{color: var(--black); font-weight: 700;}
.info-pop span{display: inline-block; margin-top: 0.8rem; color: var(--subtext); font-size: var(--font-body-xs);}
.info-pop .btn{margin-top: 2rem;}
.info-pop .layer-close{top: 0.8rem; right: 0.8rem;}

#infoPop-3 .layerpop{width: 40rem;}
#infoPop-3 .input-wrap{width: 100%; margin-top: 2rem;}
#infoPop-3 .input-wrap input{width: 100%; height: 4rem; padding-inline: 1.6rem; color: var(--basic); font-size: var(--font-body-xs); background-color: var(--gray-bg); border: none; box-sizing: border-box;}
#infoPop-3 .input-wrap input + input{margin-top: 0.8rem;}
#infoPop-3 .btn{margin: 2rem 4.9rem 0 5rem;}

#agreePop .layerpop{width: 61.2rem; max-height: 92%; overflow-y: auto; padding: 4rem 3.2rem; text-align: left; font-size: var(--font-body-xxs);}
#agreePop .layerpop > div{margin-top: 2.4rem;}
#agreePop .btn{margin: 2.4rem 13rem 0 13rem; gap: 2.4rem;}
#agreePop .pop-tit{display: block; text-align: center; font-size: var(--font-body-m); font-weight: 800; padding-bottom: 2.4rem; border-bottom: 0.1rem solid var(--gray-line);}
#agreePop .pop-stit{display: inline-block; margin-bottom: 1.3rem; font-weight: 700; color: #333; font-size: var(--font-body-s);}
#agreePop .pop-stit em{color: var(--static-red);}

#agreePop .gift ul{display: flex; align-items: center; justify-content: center; gap: 5.6rem; padding-block: 2.4rem; background-color: var(--gray-bg);}
#agreePop .gift ul li{width: 9rem; font-size: var(--font-body-xxs); font-weight: 700; text-align: center;}
#agreePop .gift .rank{position: relative; font-weight: 800;}
#agreePop .gift .img{display: inline-block; width: 9rem; height: 9rem; margin-top: -0.8rem; align-content: center; text-align: center; background-color: var(--white); border-radius: 100%; aspect-ratio: 1;}
#agreePop .gift .img img{width: 5rem; height: 5rem;}
#agreePop .gift .name{display: block; margin-top: 0.8rem; color: var(--subtext); line-height: 1.2;}
#agreePop .agree .rule{overflow-y: auto; max-height: 13.2rem; padding: 1.6rem; border: 0.1rem solid #ccc; color: var(--subtext);}
#agreePop .radio{display: flex; align-items: center; gap: 1.6rem; margin-top: 0.6rem;}
#agreePop .radio input[type="radio"] + label{padding-left: 2.4rem; color: var(--default); font-size: var(--font-body-xxs);}

#agreePop input[type="radio"][class^="radio_"]:focus + label{outline: none;}
#agreePop input[type="radio"][class^="radio_"]:focus + label::before{outline: 0.2rem solid rgba(0, 0, 0, 0.5); outline-offset: 0.2rem;}
#agreePop input[type="radio"][class^="radio_"] + label::before{background: var(--global-gray-05); border: 0.1rem solid var(--global-gray-40);}
#agreePop input[type="radio"][class^="radio_"]:checked + label::before{border-color: var(--brand-primary-60);}
#agreePop input[type="radio"][class^="radio_"]:checked + label::after{background-color: var(--brand-primary-60);}
#agreePop input[type="radio"][class^="radio_"]:disabled:checked + label::before{border-color: var(--global-gray-30);}
#agreePop input[type="radio"][class^="radio_"]:disabled:checked + label::after{background-color: var(--global-gray-30);}
#agreePop input[type="radio"][class^="radio_"]:not(.noaction) + label:hover::before{border-color: var(--global-gray-40);}
#agreePop input[type="radio"][class^="radio_"]:not(.noaction):checked + label:hover::before{border-color: var(--brand-primary-60);}

#agreePop .input-wrap input{width: 100%; height: 4rem; padding-inline: 1.6rem; color: var(--basic); border: 0.1rem solid #ccc; box-sizing: border-box; font-size: var(--font-body-xxs);}
#agreePop .input-wrap input::placeholder{color: var(--subtext) !important;}
#agreePop .input-wrap input + input{margin-top: 0.8rem;}


@media screen and (max-width: 1023px) {
    :root{
        --font-title-lg : 2rem;
        --font-title-m : 1.8rem;
        --font-body-xxs: 1.1rem;
        --font-body-xs: 1.3rem;
        --font-body-s: 1.4rem;
        --font-body-m: 1.6rem;
        --font-label-large: 1.6rem;
        --font-label-m: 1.4rem;

    }
    #contents.badgeland{padding: 0 !important;}
    .badgeland .mo {display: block;}
    .badgeland .pc {display: none;}
    .badgeland .inr {width: auto; padding-inline: 1.6rem;}

    /* 버튼 */
    .badgeland .btn{margin-top: 1.6rem;}
    .badgeland .btn button, .badgeland .btn a{height: 4rem;}

    /* 툴팁 */
    .badgeland .btn-tooltip + .tooltip-layer .btn-close{top: 0.8rem; right: 0.8rem;}
    
    /* 메인 타이틀 */
    .badgeland .title{height: auto; padding-block: 6rem; background: url(../images/bg_title_mo.png) 50% 0 / cover no-repeat;}
    .badgeland .title .title-img img{width: 67.04%;}
    .badgeland .title .title-img p{margin-top: 1.3rem;}

    /* 사용자 정보  */
    .badgeland .user-summary{flex-direction: column; width: auto; margin-top: 2.4rem; background: url(../images/summary_board_mo.png) 0 0 / 100% 100% no-repeat;}
    .badgeland .user-summary::before, .badgeland .user-summary::after{display: none;}
    .badgeland .user-summary .profile{width: 100%; height: auto; padding: 1.6rem 6.15% 1.4rem; gap: 2rem;}
    .badgeland .user-summary .profile::after{display: none;}
    .badgeland .user-summary .leader-badge{width: 6.4rem; gap: 0.8rem;}
    .badgeland .user-summary .leader-badge.no-badge img{width: 4rem;}
    .badgeland .user-summary .info{width: calc(100% - 10.2rem); flex: 1;}
    .badgeland .user-summary .info .bottom{padding-top: 1.2rem; gap: 1.6rem;}
    .badgeland .user-summary .info .rank{font-size: var(--font-body-xxs);}
    .badgeland .user-summary .info .username{margin-top: 0.4rem; padding-bottom: 1.2rem;}
    .badgeland .user-summary .info .username span{padding-left: 0.5rem;}
    .badgeland .user-summary .info .username em{font-size: var(--font-title-lg);}
    .badgeland .user-summary .info .bottom span{font-size: 1.2rem;}
    
    /* 사용자 정보 - 출석체크영역 */
    .badgeland .user-summary .attendance{position: relative; height: 11.4rem; padding: 2.4rem 5rem;}
    .badgeland .user-summary .attendance .top{ position: absolute; left: calc(50% - 12rem); width: fit-content; border-bottom: none; justify-content: start;}
    .badgeland .user-summary .attendance .bottom{justify-content: start; padding-top: 0; width: fit-content;}
    .badgeland .user-summary .attendance .btn-tooltip + .tooltip-layer{left: -20%; top: 2rem; width: 250%;}
    .badgeland .user-summary .attendance .condition{position: absolute; left: calc(50% - 12rem); top: 45%; display: flex; align-items: center; gap: 1.2rem;}
    .badgeland .user-summary .btn-attendance-stat{height: 2.8rem;}
    .badgeland .user-summary .condition .stats{margin-top: 0;}
    .badgeland .user-summary .condition .stats .current{font-size: var(--font-body-s);}
    .badgeland .user-summary .check{z-index: 10; position: absolute; left: 62%; top: 15%; width: 8.2rem; height: 7.2rem;}
    .badgeland .user-summary .check.today{background-position: 0 -7.2rem;}
    .badgeland .user-summary .check.complete{background-position: 0 -14.4rem;}
    .badgeland .user-summary .check span{font-size: var(--font-body-xxs);}
    .badgeland .user-summary .check span em{font-size: var(--font-body-xs); padding-top: 0.4rem;}
    
    /* 사용자 정보 로그인 전 */
    .badgeland .user-summary.before-login .profile{gap: 2.8rem; padding-left: 4rem;}
    .badgeland .user-summary.before-login .profile img{width: 5.2rem;}
    .badgeland .user-summary.before-login .profile p{font-size: 1.4rem;}
    
    /* 입구 영역 */
    .badgeland .entrance .carousel-wrap { position: relative; overflow: visible; padding-block: 0 4.8rem;} 
    .badgeland .entrance .carousel { justify-content: center; position: relative; width: 100%; height: 28rem; display: flex; justify-content: center; align-items: center; transform-style: preserve-3d; } 
    .badgeland .entrance .slide { position: absolute; width: 24rem; height: auto; display: flex; flex-direction: column; align-items: center; justify-content: center; transition: transform 0.6s cubic-bezier(.33, 1, .68, 1); z-index: 1; } 
    .badgeland .entrance .slide img { width: 100%; margin-inline: auto; } 
    .badgeland .entrance .slide.active { opacity: 1; z-index: 2; } 
    .badgeland .entrance .carousel-pagination { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: center; gap: 10px; z-index: 10; } 
    .badgeland .entrance .carousel-pagination .dot { width: 1.6rem; height: 1.6rem; background: none; border: 0.1rem solid var(--basic); border-radius: 100%; transition: background 0.2s; cursor: pointer; } 
    .badgeland .entrance .carousel-pagination .dot.active { background: var(--basic); } 
    
    /* 배지 영역 */
    .badgeland .badge-area{padding-block: 4rem;}
    .badgeland .badge-area .badge-type{margin-bottom: 3.2rem;}
    .badgeland .badge-type ul{grid-template-columns: repeat(auto-fill, minmax(32%, auto)); gap: 0.8rem 0.65rem; padding-block: 1.6rem;}
    .badgeland .badge-type strong{height: 4rem; font-size: 2rem;}
    .badgeland .badge-item{padding: 1.6rem 0.8rem;}
    .badgeland .badge-item .badge-img{width: 6.4rem !important; height: 6.4rem !important;}
    .badgeland .badge-item .new{font-size: 0.7rem; width: 1.6rem; height: 1.6rem; right: -1.6rem;}
    .badgeland .badge-item .ldBar img{width: 4.48rem;}
    .badgeland .badge-item .ldBar path.mainline{stroke-width: 0.256rem;}
    .badgeland .badge-item .ldBar path.baseline{stroke-width: 0.256rem;}
    .badgeland .badge-item .badge-img.end::after{width: 6.4rem; height: 6.4rem; background: url(../images/badge/badge_end_mo.png) 0 0 / 100% 100% no-repeat;}
    .badgeland .badge-item .badge-name{padding-top: 0.8rem;}
    .badgeland .badge-item .badge-stat{height: 1.8rem; font-size: 1.1rem; gap: 0.3rem; margin-top: 0.6rem;}
    
    /* 플로팅네비(도감, 랭킹 공통) */
    .badgeland .float{bottom: 12rem; right: -10rem;}
    .badgeland .float.off{right: -5rem;}
    .badgeland .float a{gap: 0.8rem; width: 9rem; height: 4rem; padding-left: 1.2rem;}
    .badgeland .float a img{width: 2rem; height: 2rem;}
    .badgeland .float a span{width: 4rem !important; font-size: var(--font-body-xxs);}

    /* 탭(도감, 랭킹 공통) */
    .badgeland .badge-tab .inr{padding-inline: 0;}
    .badgeland .badge-tab a{height: 4.8rem; border-radius: 1.4rem 0 0 0;}
    .badgeland .badge-tab a.on{height: 6rem; border-radius: 1.4rem 1.4rem 0 0;}
    .badgeland .badge-tab a + a{border-radius: 0 1.4rem 0 0;}
    .badgeland .badge-tabcont{padding-block: 2.4rem 3.2rem;}
    .badgeland .badge-tabcont .btn-more{height: 4rem;}
    .badgeland .badge-tabcont .btn-more span{width: 1.6rem; height: 1.6rem;}

    /* 리스트 없을 때(도감, 랭킹 공통) */
    .badgeland .no-list img{width: 9rem;}
    .badgeland .no-list p{margin-top: 1.6rem;}

    /** 랭킹왕국 **/

    /* 랭킹왕국 타이틀 */
    .badgeland .ranking-title{height: auto; padding-block: 2.4rem 3.2rem;}
    .badgeland .ranking-title .ranking-info{height: 12.2rem; width: 100%; gap: 0; margin-inline: auto; padding: 1.6rem 2.4rem !important;}
    .badgeland .ranking-title .ranking-info .btn-attendance{flex-shrink: 0; width: 12.4rem; height: 6.6rem; background: url(../images/bg_btn_attendance_mo.png) 0 0 / 100% 100% no-repeat;}
    .badgeland .ranking-title .ranking-info p{padding-bottom: 0.1rem;}
    .badgeland .ranking-title .ranking-info .current{line-height: 1.2;}
    .badgeland .ranking-title .ranking-info .current strong{max-width: 83.5%; display: inline-block; vertical-align: top; text-overflow: ellipsis; white-space: nowrap; overflow: hidden;}
    .badgeland .ranking-title .ranking-info .rank-arrow{vertical-align: -0.5rem;}
    .badgeland .ranking-title .ranking-info.before-login{gap: 2rem;}
    .badgeland .ranking-title .ranking-info.before-login p{text-decoration-color: var(--basic); margin-bottom: 0; text-underline-offset: 0.3rem;}
    .badgeland .ranking-title .benefit{margin-top: 3.2rem;}
    .badgeland .ranking-title .benefit .benefit-tit{width: 69.23%;}
    .badgeland .ranking-title .gift-list{gap: 1.4rem; margin: 3.2rem auto 0; align-items: baseline;}
    .badgeland .ranking-title .gift-list li{width: calc((100% - 2.8rem) / 3);}
    .badgeland .ranking-title .gift-list li .rank{top: -0.8rem; height: 2.4rem; width: max-content; padding-inline: 0.8rem;}
    .badgeland .ranking-title .gift-list li .img img{width: 72.73%; margin-top: 0;}
    .badgeland .ranking-title .gift-list li .gift{position: static; width: 100%; transform: translateX(0);}
    .badgeland .standard-noti .txt em{display: none;}
    .badgeland .standard-noti .btn-tooltip{position: absolute; top: 0; right: -2rem;}
    .badgeland .standard-noti .btn-tooltip + .tooltip-layer{top: 2rem; left: 4rem; width: 18rem;}
    .badgeland .standard-noti .btn-tooltip + .tooltip-layer .btn-close{top: 0.8rem; right: 0.8rem;}
    .badgeland .btn-calendar{width: auto; height: 4rem; padding-inline: 1.2rem 1rem; gap: 0.8rem;}
    .badgeland .btn-calendar span{width: 1.6rem; height: 1.6rem;}
    .badgeland .calendar .calendar-layer{display: none !important;}
    .badgeland .calendar .input-wrap{width: 12rem;}
    .badgeland .calendar .input-wrap span{width: 1.6rem; height: 1.6rem; right: 1.2rem;}
    .badgeland .calendar .input-text{height: 4rem; padding: 1rem 1.2rem;}
    input[type="month"].input-text {-webkit-appearance: none;}
    /* Safari 대상 */
    @supports (-webkit-touch-callout: none) {input[type="month"].input-text {padding-inline-start: 0;}}

    /* 월간랭킹 */
    .badgeland .rank-list li{height: 8rem; padding-inline: 1.6rem; gap: 1.6rem;}
    .badgeland .rank-list li .badge-img{width: 4.8rem; height: 4.8rem;}
    .badgeland .rank-list li .rank{width: 3rem; height: 4rem; margin-top: 0; padding-top: 0.7rem;}
    .badgeland .rank-list li .txt{flex-wrap: wrap; justify-content: start;}
    .badgeland .rank-list li .point{width: 100%; margin-left: 0; text-align: left;}
    .badgeland .rank-list li .my-rank{width: 6rem; height: 2.4rem;}

    /* 연간랭킹 */
    .badgeland .year-change{margin-top: 0.8rem;}
    .badgeland .btn-year-arrow{width: 2.4rem; height: 2.4rem;}
    .badgeland .btn-year-arrow svg{width: 1.6rem; height: 1.6rem;}
    .badgeland .top-rank{margin-block: 7rem 0;}
    .badgeland .rank-list .top-rank ul{gap: 0.8rem; margin-inline: 0;}
    .badgeland .rank-list .top-rank ul li{width: auto; height: 26rem; flex: 1; gap: 0.8rem; padding-inline: 0.6rem; border-radius: 1.4rem;}
    .badgeland .rank-list .top-rank ul li:nth-child(2), .badgeland .rank-list .top-rank ul li:nth-child(3){margin-top: 3.2rem;}
    .badgeland .rank-list .top-rank li .rank{width: 5rem; height: 6.7rem;}
    .badgeland .rank-list .top-rank li .badge-img{width: 6.4rem; height: 6.4rem;}
    .badgeland .rank-list .top-rank li .txt{gap: 0;}
    .badgeland .rank-list .top-rank li .my-rank{margin-top: 0.8rem;}
    .badgeland .rank-list .final{padding-top: 0.8rem;}
    .badgeland .rank-list .final img{width: 7.2rem;}


    /* 나의 배지도감 */
    .badgeland .book-title{padding-block: 3.2rem; height: auto;}
    .badgeland .book-title .inr{justify-content: center; padding-inline: 1.6rem; gap: 1.6rem;}
    .badgeland .book-title .badge-area{width: 13rem; height: 13rem;}
    .badgeland .book-title .badge-area strong{margin-top: 0.5rem;}
    .badgeland .book-title .badge-area .txt{margin-top: 0.5rem;}
    .badgeland .book-title .badge-area .tooltip-layer{width: 18rem; left: -0.8rem; transform: translateX(0);}
    .badgeland .book-title .badge-img{width: 8rem; height: 8rem; margin: 0 auto 0.65rem;}
    .badgeland .book-title .btn-badgecancel{height: 2.8rem; padding-inline: 1.5rem;}
    .badgeland .book-title .my-info .username{width: 100%;}
    .badgeland .book-title .my-info .username em{display: inline-block; max-width: calc(100% - 2.4rem); text-overflow: ellipsis; white-space: nowrap; overflow: hidden;}
    .badgeland .book-title .my-info ul{margin-top: 0.8rem;}
    .badgeland .book-title .my-info li{padding-left: 1rem;}
    .badgeland .book-list .tablist-top{margin-bottom: 1.6rem;}
    .badgeland .book-list .badge-type ul{padding-block: 0;}
    
    /* 나의 배지도감 - 배지도감 */
    .badgeland .year-select .btn-year{height: 2.8rem; line-height: 2.8rem; padding-inline: 1.2rem; font-size: 1.3rem;}
    .badgeland .year-select .btn-year span + span{margin-right: -0.4rem;}
    .badgeland .year-select .sel-list{max-height: 15.6rem;}
    .badgeland .year-select .sel-list li button{height: 2.8rem; padding-inline: 1.2rem; font-size: 1.3rem;}
    .badgeland .book-list .btn-more.mo{display: flex;}

    /* 나의 배지도감 - 활동내역 */
    .badgeland .book-list table thead th{height: 4.2rem;}
    .badgeland .book-list table tbody tr{height: 5.6rem;}
    .badgeland .book-list .pagination_wrap{margin-top: 3.2rem;}

    /* 랭킹 안내소 */
    .badgeland .landinfo-wrap{background: none;}
    .badgeland .landinfo-wrap .inr, .go-badgeland .inr{padding-inline: 0;}
    .badgeland .landinfo-wrap .btn-go-badgeland{width: 35.9%; height: 11.28%; bottom: 18.72%;}
    
    /* 유의사항 */
    .badgeland .notice{padding: 2.4rem 0.8rem 0.8rem;}
    .badgeland .notice li{line-height: 1.4;}
    .badgeland .notice li::before{top: 0.5rem; transform: translateY(0);}

    /* 모바일 튜토리얼 */
    .badgeland .tutorial{position: fixed; top: 0; z-index: 1000; display: block; width: 100%;}
    .badgeland .tutorial .swiper-container{height: 100vh;}
    .badgeland .tutorial .swiper-slide img{width: 100%; height: 100%; object-position: center; object-fit: cover;}
    .badgeland .tutorial .btn-skip{position: absolute; z-index: 10; left: 50%; transform: translateX(-50%); width: 19.49%; height: 8.21vw; text-indent: -9999px; opacity: 0;}
    .badgeland .tutorial .btn-skip.tu1{top: calc(50% - 19.2vw);}
    .badgeland .tutorial .btn-skip.tu2{bottom: calc(50% - 38.8vw);}
    .badgeland .tutorial .btn-skip.tu3{bottom: calc(50% - 31.5vw);}
    .badgeland .tutorial .btn-skip.tu4{top: calc(50% - 65vw);}
    .badgeland .tutorial .btn-skip.tu5{top: calc(50% - 50.7vw);}
    .badgeland .tutorial .btn-skip.tu6{bottom: calc(50% - 48vw);}
    .badgeland .tutorial .btn-skip.tu7{bottom: calc(50% - 16.7vw);}
    .badgeland .tutorial .btn-enter{position: absolute; bottom: calc(50% - 43.5vw); left: 50%; transform: translateX(-50%); display: block; width: 38.46%; height: 10.26vw; text-indent: -9999px;}
    .badgeland .tutorial .page{position: fixed; z-index: 10; bottom: 1.6rem; left: 1.6rem !important; right: 1.6rem !important; display: flex; align-items: center; width: auto; height: 4.8rem; background-color: var(--black); border-radius: 1.4rem;}
    .badgeland .tutorial .page .swiper-pagination{top: 50%; left: 50%; transform: translate(-50%, -50%); width: auto; font-size: var(--font-body-s); color: var(--white); font-weight: 700; line-height: 1;}
    .badgeland .tutorial .swiper-button-prev, .badgeland .tutorial .swiper-button-next {top: 50%; transform: translateY(-50%); left: 4rem; width: 2rem; height: 2rem; background: none; margin-top: 0; opacity: 1;}
    .badgeland .tutorial .swiper-button-prev svg, .badgeland .tutorial .swiper-button-next svg{width: 100%; height: 100%;}
    .badgeland .tutorial .swiper-button-next{right: 4rem; left: auto;}

    
    /** 팝업 **/
    .badgeland .layerpop{width: auto !important; left: 1.6rem !important; right: 1.6rem !important; transform: translate(0, -50%);}

    /* 출석체크 팝업 */
    #attendancePop .layerpop{padding: 2rem 1rem 0.8rem;}
    #attendancePop h3{line-height: 2.7rem;}
    #attendancePop .calendar tr{height: 6.2rem;}
    #attendancePop .calendar td em{width: 4.2rem; height: 3.6rem; line-height: 3.8rem;}
    #attendancePop .calendar td.complete span{font-size: 1.1rem;}
    #attendancePop .layer-close{top: 1.6rem; right: 1.6rem; width: 1.6rem; height: 1.6rem;}

    /* 기본도전&단일도전 팝업 */
    .challenge-pop.layerpop{width: auto; height: auto; max-height: 100%; }
    .challenge-pop .ing{height: 2.6rem; padding-inline: 1.6rem; margin-bottom: 0.6rem;}
    .challenge-pop .cheer-phrase{font-size: var(--font-title-lg); line-height: 1.3;}
    .challenge-pop .badge-list{margin-top: 1.6rem;}
    .challenge-pop .badge-list .swiper-container{padding-bottom: 2rem;}
    .challenge-pop .badge-list .badge-item{width: 17.6rem; min-height: 18rem; padding: 1.2rem 3.8rem;}
    .challenge-pop .badge-list .badge-item .badge-img{width: 10rem !important; height: 10rem !important;}
    .challenge-pop .badge-list .badge-item .badge-img img{width: 10rem;}
    .challenge-pop .badge-list .badge-item .badge-img.end::after{width: 10rem; height: 10rem; background: url(../images/badge/badge_end.png) 0 0 / 100% 100% no-repeat;}
    .challenge-pop .badge-list .badge-item .ldBar img{width: 7rem;}
    .challenge-pop .badge-list .badge-item .ldBar path.mainline{stroke-width: 0.6rem;}
    .challenge-pop .badge-list .badge-item .ldBar path.baseline{stroke-width: 0.6rem;}
    .challenge-pop .badge-data{margin: 1.6rem 2.4rem 0 2.4rem;}
    .challenge-pop .task .gray-box{height: 11.5rem;}
    .challenge-pop.single .task .gray-box{height: 9.5rem;}
    .challenge-pop .task .gray-box span{font-size: var(--font-body-s);}
    .challenge-pop .gain .gray-box, .challenge-pop .skillful .gray-box, .challenge-pop .task .gray-box.full{height: 11rem !important;}
    .challenge-pop .btn-badgeshare{margin-top: 0.8rem; font-size: var(--font-body-xs);}


    /* 대표배지 설정 관련 팝업 */
    .setting-pop.layerpop{width: 25rem !important; left: 50% !important; right: auto !important; transform: translate(-50%, -50%); padding-top: 2.4rem;}
    .setting-pop .layer-close{width: 1.6rem; height: 1.6rem;}

    /* 랭킹확정 팝업 */
    .rank-pop.layerpop{width: 25rem !important; left: 50% !important; right: auto !important; transform: translate(-50%, -50%); padding-top: 2.4rem;}
    .rank-pop .my-rank + .my-rank{margin-top: 0.8rem;}
    .rank-pop .btn{margin-top: 1.6rem;}
    .rank-pop .layer-close{width: 1.6rem; height: 1.6rem;}

    /* 정보관련 팝업 */
    .info-pop.layerpop{width: 25rem !important; left: 50% !important; right: auto !important; transform: translate(-50%, -50%); padding-top: 2.4rem;}
    .info-pop span{margin-top: 0.8rem;}
    .info-pop .btn{margin-top: 1.6rem;}
    .info-pop .layer-close{width: 1.6rem; height: 1.6rem;}

    #infoPop-3 .layerpop{width: 30rem !important;}
    #infoPop-3 .input-wrap{margin-top: 1.6rem;}
    #infoPop-3 .input-wrap input{height: 3.2rem;}
    #infoPop-3 .input-wrap input + input{margin-top: 0.4rem;}
    #infoPop-3 .btn{margin: 1.6rem auto 0;}

    #agreePop .layerpop{padding: 1.6rem; max-height: 90%; overflow-y: auto;}
    #agreePop .layerpop > div{margin-top: 1.6rem;}
    #agreePop .pop-tit{padding-bottom: 1.6rem;}
    #agreePop .pop-stit{margin-bottom: 0.4rem;}
    #agreePop .gift ul{ gap: 3.2rem; padding-block: 1.6rem;}
    #agreePop .gift ul li{width: 7rem;}
    #agreePop .gift .img{width: 7rem; height: 7rem; margin-top: -0.8rem;}
    #agreePop .gift .img img{width: 4rem; height: 4rem;}
    #agreePop .agree .rule{overflow-y: auto; max-height: 13rem; padding: 0.8rem;}
    #agreePop .radio{display: flex; align-items: center; gap: 1.6rem; margin-top: 0.6rem;}
    #agreePop .radio input[type="radio"] + label{padding-left: 2rem; font-size: var(--font-body-xs);}
    #agreePop .input-wrap input{height: 3.2rem; padding-inline: 0.8rem; font-size: 1.2rem;}
    #agreePop .input-wrap input + input{margin-top: 0.4rem;}
    #agreePop .btn{margin: 1.6rem auto 0; gap: 0.8rem;}
}

@media screen and (min-width: 721px) and (max-width: 1023px) {
    .badgeland .user-summary .profile{width: 100%; height: auto; padding: 1.6rem 12% 1.4rem; gap: 2rem;}
}