#layoutDimmed{display:block; opacity:0; pointer-events:none; transition: opacity .25s ease;}
#aside { z-index:1001; visibility:hidden; transform: translateX(0); position:fixed; top: 0; bottom:0; width:100%;  max-width:390px; background-color:var(--mono-ff); left:0; transform: translateX(-100%); 
    transition: transform 500ms cubic-bezier(0.25,0.46,0.45,0.94); will-change: transform;
    overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: thin; scrollbar-color: rgba(0,0,0,.25) transparent;}

body {}
body.slideM {position:relative; width:100%;  height: 100%; min-height:100%; overflow: hidden; touch-action: none;}
body.slideM #aside { visibility:visible;  transform: translateX(0);}
body.slideM #layoutDimmed {opacity:1; pointer-events:auto;}

.aside {}
.aside nav{padding: 28px 30px; box-sizing: border-box;}
.aside .btnClose {z-index: 2; position:absolute; top:20px; right :12px; width:18px; height:18px; font-size: 0;}

.aside_nav .sideArrow { position: absolute; width: 20%; height:100%; right:0; top: 0; z-index:10;}
.aside_nav .sideArrow::after {content: ""; display: block; width: 6px; height: 6px; border-top: 1px solid #000; border-right: 1px solid #000; position:absolute; right:0; top: 43%;  transform: rotate(135deg); transition: transform 0.3s; transform-origin: 50% 50%;}
.aside_nav .navi_cate .d1 > a i.sideArrow {display: none;}
.aside_nav .navi_cate .d1.pre > a i.sideArrow {display: block;}
.aside_nav .navi_cate .d1.pre.selected > a .sideArrow::after{transform: rotate(-45deg);}


.aside_util{padding: 24px 30px 0; box-sizing: border-box; width: 100%; background: var(--mono-ff);}
.aside_util .inner{border-bottom: 1px solid var(--mono-3-c9); padding: 0 0 30px;}
.aside_util .util_tit{}
.aside_util .util_tit h1{font-size: 22px; font-weight: 700;}
.aside_util .util_tit p{color: var(--mono-2-95); margin: 7px 0 20px;}
.aside_util ul{display: flex; align-items: center; gap: 8px;}
.aside_util ul li{border-radius: 4px; height: 40px; line-height: 40px; text-align: center; width: calc((100% - 8px) / 2);}
.aside_util ul li.loginBtn a{color:var(--point-color-primary);}
.aside_util ul li.joinBtn{background:var(--point-color-primary);}
.aside_util ul li.joinBtn a{color:var(--point-font-color-primary);}
.aside_util ul li.mypageBtn{}
.aside_util ul li.mypageBtn a{color:var(--point-color-primary);}
.aside_util ul li.logoutBtn{border: 1px solid var(--mono-2-95);}
.aside_util ul li.logoutBtn a{color:var(--mono-2-95);}
.aside_util ul li a{font-size: 14px; font-weight: 700; display: block; width: 100%; height: 100%;}

.aside_nav {}
.aside_nav .navi_cate {}
.aside_nav .navi_cate .d1 {margin-bottom: 24px;}
.aside_nav .navi_cate .d1.board {margin-bottom: 32px;}
.aside_nav .navi_cate .d1 > a {display: flex; align-items: center; gap:20px;font-size: 14px; font-weight: 500; width:100%; position: relative; margin-bottom: 12px;}
.aside_nav .navi_cate .d1 > a > img{width:100%; max-width:44px; height:auto; border-radius:100%;}
.aside_nav .navi_cate .d1 > a > h3{font-size: 14px; font-weight: 500;}
.aside_nav .navi_cate .d1 .lnb {display:none; background: var(--mono-5-f6); border-radius: 8px; padding: 18px 20px; box-sizing: border-box;}
.aside_nav .navi_cate .d1 .lnb > li {display: inline-block; width: calc((100% - 5px)/2); margin:0 0 10px;}
.aside_nav .navi_cate .d1 .lnb > li > a {display: block; font-size: 12px; font-weight:500; color: var(--mono-1-66);}
.aside_nav .navi_cate .d1 .lnb > li:last-child,
.aside_nav .navi_cate .d1 .lnb > li:nth-last-child(2){margin-bottom: 0;}

.aside_cs{margin: 0 0 28px;}
.aside_cs h3{font-size:14px; font-weight:500;}
.aside_cs h1{font-size:24px; font-weight:700; margin:16px 0 12px;}

/* 사이드 메뉴 환영 문구는 페이지 대표 제목이 아닌 일반 문구로 표시 */
.aside_util .util_tit .util_tit__title{
    margin: 0;
    color: var(--font-color-heading);
    font-size: 22px;
    font-weight: 700;
}
.aside_cs p{font-size:13px; font-weight:400; color:var(--mono-1-66); line-height: 1.6;}

.aside_bnr{}
.aside_bnr img{width:100%; height:auto; border-radius:8px;}





#aside::-webkit-scrollbar{width: 4px; height: 4px;}
#aside::-webkit-scrollbar-track{background: transparent;}
#aside::-webkit-scrollbar-thumb{background: rgba(0,0,0,.22); border-radius: 999px; border: 2px solid transparent; background-clip: padding-box;}

/* 호버 가능한 환경(PC 등) */
@media (hover:hover){
    #aside::-webkit-scrollbar-thumb:hover{background: rgba(0,0,0,.35); border: 2px solid transparent; background-clip: padding-box;}
}

/* iOS/Safari */
@supports (-webkit-touch-callout: none){
    #aside::-webkit-scrollbar{width: 4px;}
    #aside::-webkit-scrollbar-thumb{background: rgba(0,0,0,.18);}
}

/* WebKit 계열 (Chrome, Edge, Safari, Android) */
#aside::-webkit-scrollbar-button{display: none; width: 0; height: 0;}

/* 기타 브라우저 */
#aside::-webkit-scrollbar-button:single-button{display: none;}