@charset "utf-8";
:root {
	--shd_h:400px;
	--tree_line: rgba(0,0,0,0.7);
	--tree_line_on: rgba(0,0,0,0.9);
	--tree_pos1: 35px;
}

:root[user-theme="light"] {
	--side_color: #fff;
	--side_df_color: #000;
	--side_etc_color: #a6a6a6;
	--side_head: #12173d;
	--side_logo_fill: #0042d6;
	--side_nav_on:#005cbd;
	--side_h_title:#353f51;
	--side_mn: #777;
	--side_con:#fff;
	--side_con_txt: #333;
	--side_bg_default:#fafafa;
	--side_bg_spc:#e3f1ff;
	--side_out_line:rgba(255,255,255,0.3);
	--side_body:rgba(0,0,0,0.35);
	--side_count_not:red;
	--side_count_ok:#2e8f00;
	--side_my_title:#003f7e;
	--side_my_title_span:#003f7e;
	--side_my_icon:rgba(255,255,255,0.8);
}

:root[user-theme="dark"] {
	--side_color: #fff;
	--side_df_color: #fff;
	--side_etc_color: #a6a6a6;
	--side_head: #05122b;
	--side_logo_fill: #0042d6;
	--side_nav_on:#1dd3ff;
	--side_h_title:#353f51;
	--side_mn: #999;
	--side_con:#1c2433;
	--side_con_txt: #999;
	--side_bg_default:rgba(0,0,0,0.3);
	--side_bg_spc:rgba(0,0,0,0.4);
	--side_out_line:rgba(255,255,255,0.3);
	--side_body:#152535;
	--side_count_not:red;
	--side_count_ok:#2e8f00;
	--side_my_title:#3fa0ff;
	--side_my_title_span:#003383;
	--side_my_icon:rgba(255,255,255,0.07);
}

aside {position:fixed; top:0; inset-inline-end:0; transform:translateX(100%); max-width:400px; width:calc(100% - 75px); height:100%; visibility: hidden; opacity:0;  transition: all .3s; z-index:51;}
aside:after {content:""; position:absolute; top: 0; inset-inline-start: 0; width: 100%; height: 100%; background:rgba(0,0,0,0.45);}
aside.show {transform:translateX(0); visibility: visible; opacity: 1; }
aside .close_side {position:absolute; top:0; inset-inline-end:0; width:var(--tm_size); height:var(--tm_size);color:red; font-size:22px; transition:all .3s; z-index: 1; cursor: pointer;}
/* 주의: 중앙 정렬을 위한 left:50%; 는 그대로 둡니다 */
aside .close_side i {position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); font-size:var(--icon_size); color:var(--side_color);transition:all .3s; font-variation-settings: 'wght' 100;}
aside .close_side i:before {content:'close';}
aside .sd_head {position:relative; text-align: center; height:calc(env(safe-area-inset-top) + var(--shd_h));padding-top:env(safe-area-inset-top); transition: all .3s; z-index:2; background:var(--side_head);}
aside .sd_head .sh_box {position:relative; height:var(--shd_h);text-align:start;}
aside .sd_head .sys_info {font-size:0; padding: 35px 0 0; padding-inline: 25px 35px;}
aside .sd_head .si_text,
aside .sd_head .logo {display:inline-block; vertical-align:top; }
aside .sd_head .logo {width:65px;}
aside .sd_head .logo img,

aside .sd_head .logo svg { width: 100%; }
aside .sd_head .logo svg .logo_base { fill: var(--side_logo_fill); }
aside .sd_head .logo svg .logo_point { fill: #005cbd; }

aside .sd_head .si_text {width:calc(100% - 150px); padding: 3px 0 0; padding-inline-start: 25px;}
aside .sd_head .si_text h2 {font-size:17px; font-weight:700; color:var(--side_color);}
aside .sd_head .si_text span {display:inline-block; vertical-align:top; width:100%; font-size:9px; font-weight:500; color:#999;}
aside .sd_head .si_text span ver {color:var(--side_color); display:inline-block; padding-inline-start:5px;}
aside .sd_head .my_info {position:relative; margin-top: 20px; padding: 20px 0; padding-inline: 100px 35px;}
aside .sd_head .my_info > div {line-height:1;}
aside .sd_head .my_info .m_photo {width:50px; position:absolute; top:50%; inset-inline-start:35px; transform:translateY(-50%); border-radius:100%; overflow:hidden; cursor: pointer;}
/* 주의: 중앙 정렬을 위한 left:50%; 는 그대로 둡니다 */
aside .sd_head .my_info .m_photo img {width: 100%; height: 100%; object-fit: cover; object-position: center;position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); }
aside .sd_head .my_info .m_photo i {position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); font-size: 27px;font-variation-settings:'wght' 100;}
aside .sd_head .my_info .m_photo:before {content:"\e9f5"; font-family: xeicon !important; display: inline-block; speak: none; font-style: normal; font-weight: 400; font-variant: normal; text-transform: none; line-height: 1; -webkit-font-smoothing: antialiased; 	position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); font-size:30px; opacity:0.3;}
aside .sd_head .my_info .m_photo:after {content:""; display:block; padding-top:100%; background:rgba(0,0,0,0.8);}
aside .sd_head .my_info .m_name {}
aside .sd_head .my_info .m_name span {position:relative;font-size:15px; font-weight:700; color:var(--side_color);}

aside .sd_head .my_info .m_name span i {position: absolute; top: 0px; inset-inline-start: initial; inset-inline-end: -22px; width: 16px; height: 16px; font-size: 16px; transform: none; padding: 0; text-align: center; line-height: 16px; border-radius:3px;}
aside .sd_head .my_info .m_name span i.xi-naver,
aside .sd_head .my_info .m_name span i.xi-kakaotalk {display:block;}
aside .sd_head .my_info .m_name span i.xi-naver {background:#22ba4f; color:#fff;font-size: 11px;}
aside .sd_head .my_info .m_name span i.xi-kakaotalk {background:#fae100; color:#3b1c1c;}

aside .sd_head .my_info .m_id {font-size:11px; font-weight:500; color:var(--side_etc_color); padding:8px 0 0 0;}
aside .sd_head .my_info .m_reg {font-size:9px; font-weight:300; color:var(--side_etc_color); padding:6px 0 0 0;}
aside .sd_head .my_info .m_out {position:absolute; bottom:15px; inset-inline-end:20px; }
aside .sd_head .my_info .m_out a {display:block; color:var(--side_color); cursor:pointer;font-size:11px; font-weight:600; padding:5px 3px; border-bottom:1px dashed var(--side_out_line);}
aside .sd_head .my_info i {position:absolute; top:0px; inset-inline-start:10px; padding:10px; font-size:15px; color:var(--side_etc_color); cursor:pointer;}

aside .sd_head .my_info.naver .m_photo {border:2px solid red;}
aside .sd_head .my_info.kakao .m_photo {border:2px solid green;}

aside .sd_head ul.short_info {display:flex; text-align:center; padding: 10px 0 0; padding-inline: 25px;}
aside .sd_head ul.short_info li {flex:1; border-inline-end:1px solid #eee; padding:10px 0;}
aside .sd_head ul.short_info li:last-child {border:0;}
aside .sd_head ul.short_info li > div {display:inline-block; width:100%; line-height:1; position:relative;}
aside .sd_head ul.short_info li .tit {font-size:12px; color:var(--side_etc_color); letter-spacing:-0.05em; padding-top:7px;}
aside .sd_head ul.short_info li .txt {font-size:14px; color:var(--side_color); font-weight:800;}
aside .sd_head ul.short_info li > div span {display:inline-block; position:relative;}
aside .sd_head ul.short_info li .tit em {display:inline-block; width:100%;  font-style:normal; font-size:9px; color:#999; padding-top:5px;}

aside .sd_head ul.body_setting {display:flex; text-align:center; padding: 30px 0 17px; padding-inline: 15px;}
aside .sd_head ul.body_setting li {flex:1; padding:15px 0; font-size:12px; margin-inline-end:5px; color:#fff; background:var(--side_body); line-height:1; border-radius:30px; cursor:pointer; position: relative;}
aside .sd_head ul.body_setting li:last-child {margin:0;}
aside .sd_head ul.body_setting li i {position: absolute; top: 50%; inset-inline-start: 20px; line-height: 1; font-size: 20px; transform: translateY(-50%); font-variation-settings: 'FILL' 1, 'wght' 250;}
aside .sd_head ul.body_setting li.health i {color: #ff5d00;}
aside .sd_head ul.body_setting li.today i {color: rgba(255,255,255,0.6);}

/* 중앙정렬 툴팁 구조는 그대로 둡니다 */
aside .sd_head ul.body_setting li span {position: absolute; top: -18px; left: 50%; transform: translateX(-50%); line-height: 1; background: #333; color: #fff; font-size: 9px; padding: 3px 8px; border-radius: 10px;}
aside .sd_head ul.body_setting li span:after {content: ""; position: absolute; bottom: -7px; left: 50%; transform: translateX(-50%); border-top: 8px solid #333; border-left: 3px solid transparent; border-right: 3px solid transparent;}
aside .sd_head ul.body_setting li span.not {background: var(--side_count_not);}
aside .sd_head ul.body_setting li span.not:after {border-top-color: var(--side_count_not);}
aside .sd_head ul.body_setting li span.ok {background: var(--side_count_ok);}
aside .sd_head ul.body_setting li span.ok:after {border-top-color: var(--side_count_ok);}

aside .sd_head ul.short_minfo {padding: 10px 0 0; padding-inline: 30px 25px; font-size:0;}
aside .sd_head ul.short_minfo li {display:inline-block; width:100%; font-size:0; margin-top:12px; position: relative;}
aside .sd_head ul.short_minfo li > div {display:inline-block; vertical-align:middle; line-height:1; position:relative;}
aside .sd_head ul.short_minfo li .tit {width:90px; font-size:12px; color:var(--side_etc_color); letter-spacing:-0.05em; position: absolute; top: 50%; inset-inline-start: 0; transform:translateY(-50%);}
aside .sd_head ul.short_minfo li .tit:before {content:"ㆍ";}
aside .sd_head ul.short_minfo li .txt {width:100%; font-size:12px; color:var(--side_color); font-weight:800; padding-inline-start: 90px;}
aside .sd_head ul.short_minfo li > div span {display:inline-block; position:relative;}
aside .sd_head ul.short_minfo li .tit em {display:inline-block; width:100%;  font-style:normal; font-size:9px; color:#999; padding-top:5px;}
aside .sd_head ul.short_minfo li .txt em {position:absolute; top:50%; inset-inline-end:0; transform:translateY(-50%); font-style:normal; font-size:9px; color:#c7c7c7; font-weight:200;}
aside .sd_head .my_challenge_go {display: none !important;}

aside .sd_content {position:relative; height:calc(100% - var(--shd_h));z-index:2; background:var(--side_con); padding-bottom: calc(0px + env(safe-area-inset-bottom));}
aside .sd_content {overflow-y:overlay;}
aside .sd_content:: {-ms-overflow-style: none;}
aside .sd_content::-webkit-scrollbar {background: transparent; width:5px; height:5px; border-radius:15px;}
aside .sd_content::-webkit-scrollbar-thumb {background:rgba(0,0,0,0); border-radius:15px;  transition:all .3s;}
aside .sd_content:hover::-webkit-scrollbar-thumb {background:rgba(0,0,0,0.3); transition:all .3s;}

/* nav */
aside .sd_content nav {font-size:0; padding: 25px 0; padding-inline: 10px; display: flex;}
aside .sd_content nav > li {flex: 1; position:relative; text-align:start; }
aside .sd_content nav > li.spc {display:none; }
aside .sd_content nav > li.hid {display:none; }
aside .sd_content nav > li > a {display:block; padding:10px 0px;transition:all .3s; font-size:0; position:relative;}
aside .sd_content nav > li > a > div {}
aside .sd_content nav > li > a i,
aside .sd_content nav > li > a span {display:inline-block; vertical-align:middle; width:100%; text-align:center;}
aside .sd_content nav > li > a i {font-size:38px;font-variation-settings: 'wght' 200;text-align:center; color:var(--side_df_color);}
aside .sd_content nav > li > a span {font-size:12px; color:var(--side_mn); padding:3px 0 0 0; font-weight:500;}
aside .sd_content nav > li.on > a i {color:var(--side_nav_on);font-variation-settings: 'FILL' 1, 'wght' 250;}
aside .sd_content nav > li.on > a span {color:var(--side_nav_on); font-weight:600;}
aside .sd_content ul.sub_cate1 {position: relative;  line-height: 1; padding:5px 0px 25px 0px; font-size:0;}
aside .sd_content ul.sub_cate1 > li {display:inline-block; vertical-align:middle; line-height: 1; width:100%; margin:0px; padding: 0; padding-inline-start: 41px; position:relative;}
aside .sd_content ul.sub_cate1 > li:before,
aside .sd_content ul.sub_cate1 > li:after {content:""; position:absolute; inset-inline-start:var(--tree_pos1);width:13px; display:none;}
aside .sd_content ul.sub_cate1 > li:before {top:0; height:100%; transform:translateX(-100%);border-inline-start:1px solid var(--tree_line); }
aside .sd_content ul.sub_cate1 > li:last-child:before {height:calc(50% + 2px);}
aside .sd_content ul.sub_cate1 > li:after {top:10px; border-top:1px solid var(--tree_line); transform:translateX(-100%);}
aside .sd_content.on ul.sub_cate1 > li:before,
aside .sd_content.on ul.sub_cate1 > li:after {border-color:var(--tree_line_on); }
aside .sd_content.on ul.sub_cate1 > li.on:after {/*border-color:yellow; */}
aside .sd_content ul.sub_cate1 > li > a {display:block; line-height:1; padding: 5px 0; padding-inline-start: 5px;}
aside .sd_content ul.sub_cate1 > li > a span {font-size:12px; line-height:1; color:var(--side_df_color); transition:all .3s;}
aside .sd_content ul.sub_cate1 > li.on > a span {color:#d9005a !important;}

/* 진행중 챌린지 */
aside .sd_content .ing_bx {position:relative;background:var(--side_bg_spc);  border-radius:7px; inset-inline:0; width:calc(100% - 20px); margin:0 auto 10px auto; padding:30px; overflow:hidden;}
aside .sd_content .ing_bx a {position:absolute;top:0; inset-inline-start:0; width:100%; height:100%; font-size:0; z-index:1;}
aside .sd_content .ing_bx h3 {font-size:17px; color:var(--side_my_title); font-weight:600; letter-spacing:-0.05em; position:relative;}
aside .sd_content .ing_bx h3 span {position:relative; border: 0px solid red; margin:0 3px; color: #fff;letter-spacing:0;}
/* 주의: 중앙 정렬을 위한 left:50%; 는 그대로 둡니다 */
aside .sd_content .ing_bx h3 span:after {content: ""; position:absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: calc(100% + 6px); height: calc(100% + 6px); background: var(--side_my_title_span);}
aside .sd_content .ing_bx h3 span kind {position: relative; z-index: 1; color: #fff; font-weight: 600;}
aside .sd_content .ing_bx i {font-size:95px; color:var(--side_my_icon); font-variation-settings: 'FILL' 1, 'wght' 250; position:absolute; bottom:-15px; inset-inline-end:-15px; }
aside .sd_content .ing_bx p {font-size:10px; color:var(--side_df_color); font-weight:500; position:relative; line-height:150%; padding:5px 0 0 0; opacity:0.5;}

aside .sd_content .ing_bx .challenge_list {height:80px; overflow:hidden; position:relative;background:var(--side_bg_spc);  border-radius:7px; margin-top:7px;}
aside .sd_content .ing_bx ul.ch_bx {position: absolute;top: 0;inset-inline-start: 0; width: 100%; }
aside .sd_content .ing_bx ul.ch_bx li {line-height:1; padding:25px 25px; height: 80px;}
aside .sd_content .ing_bx ul.ch_bx li h4 {font-size:13px; color:var(--side_df_color); font-weight:500;}
aside .sd_content .ing_bx ul.ch_bx li span {font-size:10px; padding-top:7px; display:inline-block; color:var(--side_con_txt);}

/* 공지 */
aside .notice_box {position:relative; inset-inline:0; width:calc(100% - 20px); margin:auto; padding:20px 20px; font-size:0; background:var(--side_bg_default); border-radius:7px;}
aside .notice_box h2 {display:inline-block; vertical-align:middle; line-height:1;width:35px; text-align:center; padding:5px 0; background:var(--side_h_title); color:#fff; font-size:9px; border-radius:15px; font-weight:500;}
aside .notice_box h2 i {font-size:18px;}
aside .notice_box ul.app_notice {display:inline-block; vertical-align:middle; width:calc(100% - 35px); padding-inline-start:10px;}
aside .notice_box ul.app_notice li {font-size:0;line-height:1;}
aside .notice_box ul.app_notice li h3,
aside .notice_box ul.app_notice li span {display:inline-block; vertical-align:middle; line-height:1; }
aside .notice_box ul.app_notice li h3 {width:calc(100% - 80px);}
aside .notice_box ul.app_notice li h3 a {display:block; font-size:11px; color:var(--side_con_txt); text-overflow: ellipsis; overflow:hidden; white-space:nowrap; font-weight:500;}
aside .notice_box ul.app_notice li h3 a i {display:inline-block; font-size:14px; color:red; vertical-align:middle; margin-inline-start:3px;}
aside .notice_box ul.app_notice li span {width:80px; text-align:end; font-size:9px; color:#999;}
aside .sd_content .etc_box {position: relative; padding: 20px 20px 30px 20px;margin-bottom:calc(0px + env(safe-area-inset-bottom));}
aside ul.pf_rule {font-size:0;}
aside ul.pf_rule li {display:inline-block; vertical-align:middle; width:50%; margin:0px; border:0px solid #e9e9e9; font-size:12px; line-height:1; padding:7px 10px; text-align:start; cursor:pointer; color:var(--side_con_txt);}
aside ul.pf_info {font-size:0; line-height:1; padding: 25px 0 0; padding-inline: 15px; display:none;}
aside ul.pf_info li {display:inline-block; vertical-align:middle; width:100%; line-height:1; margin-top:5px;}
aside ul.pf_info li.cmp {width:100%; font-size:12px; margin:0 0 5px 0;}
aside ul.pf_info li span {display:inline-block; vertical-align:top; font-size:10px; line-height:1; }
aside ul.pf_info li .tit {width:55px; color:#999;}
aside ul.pf_info li .tit:before {content:"ㆍ"; }
aside ul.pf_info li .txt {width:calc(100% - 55px); color:var(--side_df_color);}

@media screen and (max-width: 600px){
	aside {max-width:100%; width:100%;}
	aside .close_side {inset-inline-start:initial; inset-inline-end:0;}
	aside .close_side i:before {content:'arrow_right_alt';}
}

.aside_mask {position: fixed; top: 0;  inset-inline-start: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.7); visibility: hidden; opacity: 0; transition: all .3s; z-index:50;}
.aside_mask.show {opacity: 1; visibility: visible; }

/* ===================== RTL 전용 화살표 및 슬라이드 방향 반전 ===================== */
/* 1. 사이드바 진입/퇴장 슬라이드 방향 반전 */
html[dir="rtl"] aside { transform: translateX(-100%); }
html[dir="rtl"] aside.show { transform: translateX(0); }

/* 2. 트리 메뉴 뻗어 나오는 방향 반전 */
html[dir="rtl"] aside .sd_content ul.sub_cate1 > li:before,
html[dir="rtl"] aside .sd_content ul.sub_cate1 > li:after { transform: translateX(100%); }

/* 3. 모바일 사이즈에서 닫기 화살표 좌우 반전 */
@media screen and (max-width: 600px){
    html[dir="rtl"] aside .close_side i { transform: translate(-50%, -50%) scaleX(-1); }
}