/** 평가자/사용자/관리자 별 body **/
body {background: #f5f5f5;}
body#evaluator {background: #E1ECF0;}
body#managed {background: #757072;}

/* 공통 */
.inner { margin: auto; width:100%; max-width: 1260px;}

@media screen and (max-width:1280px){
  .inner { padding-right:16px;padding-left:16px;}
 }

/* .bg {position: relative; z-index: 1;background: none;} */
/* .bg::before {position: absolute;top: -92px;left: 0;z-index: -1;width: 100%;height: calc(100% + 92px);content: ""; }
.gray_bg::before {background: #f5f5f5;}
.sky_bg::before {background: #E1ECF0;} */
.main_content{display: flex; gap:0.75rem;justify-content: space-between;padding: 1.875rem 0;min-height: calc(100vh - 244px);}
.sidebar {padding: 1.875rem 1.125rem; width: 200px;background: #fff;border-radius: 18px; flex-shrink: 0; }
.main_content .content{flex:1;}
.card{padding: 1.5rem;background: #fff;border-radius: 18px;}

@media screen and (min-width:1280px) {
  .main_content .content{max-width: calc(100% - 200px - 0.75rem);}
}


/* 메뉴 */
.sidebar ul.menu li{margin-bottom: 15px;}
.sidebar ul.menu li:last-child{margin-bottom: 0;}
.sidebar ul.menu li a{display: flex;align-items: center;font-weight: 500; ;line-height: 1.2;color: var(--gray-900);}
.sidebar ul.menu li a .menu_icon{display: flex;align-items: center;justify-content: center; flex-shrink: 0;margin-right: 8px;width: 50px;height: 50px;background: #f8f8f8;border-radius: 18px;}
.sidebar ul.menu li a:hover .menu_icon,
.sidebar ul.menu li.active a .menu_icon {background: var(--primary);}
#evaluator .sidebar ul.menu li a:hover .menu_icon,
#evaluator .sidebar ul.menu li.active a .menu_icon  {background: var(--evaluator);}
#managed .sidebar ul.menu li a:hover .menu_icon,
#managed .sidebar ul.menu li.active a .menu_icon  {background:#222;}

.sidebar .btn_close{display: none;}
.sidebar ul.menu li a:hover img{filter: brightness(0) invert(1);}
.sidebar ul.menu li.active a img{filter: brightness(0) invert(1);}

@media screen and (max-width:1280px){ 
  .main_content{flex-direction: column;padding-top: .9375rem;min-height: calc(100vh - 228.5px);}
  .sidebar{width: 100%;overflow-x: auto;padding: 0;}
  .sidebar::-webkit-scrollbar {display: none}
  .sidebar ul{display: flex;gap: 15px;}
  .sidebar ul.menu li a{padding: 16px 10px;white-space:nowrap;font-size: 1rem;}
  .sidebar ul.menu li{margin-bottom: 0;}
  .sidebar ul.menu li.active{border-bottom: 2px solid var(--primary);}
}

@media screen and (max-width:1024px){ 
  .sidebar{position: fixed;right: 0;width: 80%;top: 0;background: #fff;z-index: 999;display: none;padding:30px 20px;z-index: 999;border-radius: 0;height: 100%;}
  .sidebar.active{display: block;}
  .shadow:before{content: '';width:100%;height:100vh;top: 0;left: 0;background:rgb(0, 0, 0,0.3);position: fixed;left: 0;top: 0;z-index: 99;}
  .sidebar ul{flex-direction: column;overflow-y:auto;max-height: calc(100vh - 100px);-ms-overflow-style: none;scrollbar-width: none;}
  .sidebar::-webkit-scrollbar {display: none;}
  .sidebar ul.menu li a{padding: 5px;}
  .sidebar .btn_close{position: absolute;right: 30px;top: 30px;width: 28px;height: 28px;display: block;text-indent: -9999px;}
  .sidebar .btn_close::before,
  .sidebar .btn_close::after{content:"";position:absolute;top:50%;left:50%;width:28px;height:2px;background:#333;transform-origin:center}
  .sidebar .btn_close::before{transform:translate(-50%,-50%) rotate(45deg)}
  .sidebar .btn_close::after{transform:translate(-50%,-50%) rotate(-45deg)}
  .sidebar ul.menu li.active{border-bottom: 0;}
  .sidebar ul.menu li a .menu_icon{width: 33px;height: 33px;border-radius: 10px;}
  .sidebar ul.menu li a .menu_icon img{object-fit: contain;height: 50%;}
}

@media screen and (max-width:640px){ 
  .main_content{min-height: calc(100vh - 228.5px);}
}




/* 레이어팝업 */
/* .shadow{position: fixed;top: 0;left: 0;z-index: 9999;width: 100%;height: 100vh;background:#313131;opacity: 0.8;}
.laypop{padding: 3.125rem;position: fixed;top: 50%;left: 50%;z-index: 9999999999999;max-width: 950px;background: #fff;border-radius: 18px;transform: translate(-50%,-50%);}
.laypop_cont{overflow-y: auto;max-height: calc(100vh - 500px);-ms-overflow-style: none;}
.laypop_cont::-webkit-scrollbar{display:none;}
.close_layer{display: block;position: absolute;top: 0;right: -72px;width: 50px;height: 50px;background: url(../../img/laypop_close.svg) no-repeat center;text-indent: -9999px;} */