@charset "UTF-8";
/*
    사이드 메뉴 아이콘 — 메뉴 이름 기준 (main.js navIcon)

    index 기준 sec0N 은 상위메뉴가 늘면 CSS 가 없는 번호가 되어 아이콘이 비어 버린다.
    (sec01~08 만 있어서 사용자및권한관리 · 고객사관리가 빈칸이었다)
    여기서는 인라인 SVG 를 mask 로 써서 파일 추가 없이 색까지 맞춘다.

    색 : 기본은 흰색, 펼친(선택한) 상위메뉴는 사이드바 배경색(#0a529d).
         펼치면 summary 안쪽 배경이 밝은 회색(#f6f7fb)으로 반전되기 때문이다.
*/

.sidenav .nav-sec > summary[class*="nav-ico--"] i{
    width:20px; height:20px; display:inline-block;
    background-image:none !important;   /* 기존 sec0N 배경 이미지를 덮는다 */
    background-color:#fff;
    -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
    -webkit-mask-position:center;  mask-position:center;
    -webkit-mask-size:contain;     mask-size:contain;
}

.sidenav .nav-sec[open] > summary[class*="nav-ico--"] i{
    background-color:#0a529d;
}

.sidenav .nav-sec > summary.nav-ico--dash i{
    -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 13h8V3H3v10Zm0 8h8v-6H3v6Zm10 0h8V11h-8v10Zm0-18v6h8V3h-8Z'/%3E%3C/svg%3E");
    mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 13h8V3H3v10Zm0 8h8v-6H3v6Zm10 0h8V11h-8v10Zm0-18v6h8V3h-8Z'/%3E%3C/svg%3E");
}
.sidenav .nav-sec > summary.nav-ico--supply i{
    -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 7 12 3 4 7v10l8 4 8-4V7Zm-8 2.2L6.5 6.6 12 4l5.5 2.6L12 9.2Z'/%3E%3C/svg%3E");
    mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 7 12 3 4 7v10l8 4 8-4V7Zm-8 2.2L6.5 6.6 12 4l5.5 2.6L12 9.2Z'/%3E%3C/svg%3E");
}
.sidenav .nav-sec > summary.nav-ico--device i{
    -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 2h10a2 2 0 0 1 2 2v16a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2Zm0 2v13h10V4Zm4 15h2v1h-2Z'/%3E%3C/svg%3E");
    mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 2h10a2 2 0 0 1 2 2v16a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2Zm0 2v13h10V4Zm4 15h2v1h-2Z'/%3E%3C/svg%3E");
}
.sidenav .nav-sec > summary.nav-ico--text i{
    -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 5h16v2H4Zm0 4h16v2H4Zm0 4h11v2H4Zm0 4h11v2H4Z'/%3E%3C/svg%3E");
    mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 5h16v2H4Zm0 4h16v2H4Zm0 4h11v2H4Zm0 4h11v2H4Z'/%3E%3C/svg%3E");
}
.sidenav .nav-sec > summary.nav-ico--oper i{
    -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2 4 6v6c0 5 3.4 9.3 8 10 4.6-.7 8-5 8-10V6l-8-4Zm-1 14-3-3 1.4-1.4L11 13.2l4.6-4.6L17 10l-6 6Z'/%3E%3C/svg%3E");
    mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2 4 6v6c0 5 3.4 9.3 8 10 4.6-.7 8-5 8-10V6l-8-4Zm-1 14-3-3 1.4-1.4L11 13.2l4.6-4.6L17 10l-6 6Z'/%3E%3C/svg%3E");
}
.sidenav .nav-sec > summary.nav-ico--apk i{
    -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2 2 7l10 5 10-5-10-5Zm0 7.8L4.6 6 12 4.3 19.4 6 12 9.8ZM2 17l10 5 10-5-2.2-1.1L12 19.7l-7.8-3.8L2 17Zm0-5 10 5 10-5-2.2-1.1L12 14.7 4.2 10.9 2 12Z'/%3E%3C/svg%3E");
    mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2 2 7l10 5 10-5-10-5Zm0 7.8L4.6 6 12 4.3 19.4 6 12 9.8ZM2 17l10 5 10-5-2.2-1.1L12 19.7l-7.8-3.8L2 17Zm0-5 10 5 10-5-2.2-1.1L12 14.7 4.2 10.9 2 12Z'/%3E%3C/svg%3E");
}
.sidenav .nav-sec > summary.nav-ico--chart i{
    -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 20h16v2H4Zm2-8h3v6H6Zm5-6h3v12h-3Zm5 3h3v9h-3Z'/%3E%3C/svg%3E");
    mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 20h16v2H4Zm2-8h3v6H6Zm5-6h3v12h-3Zm5 3h3v9h-3Z'/%3E%3C/svg%3E");
}
.sidenav .nav-sec > summary.nav-ico--account i{
    -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 4a4 4 0 1 1 0 8 4 4 0 0 1 0-8Zm0 10c4.4 0 8 2 8 4.5V21H4v-2.5C4 16 7.6 14 12 14Z'/%3E%3C/svg%3E");
    mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 4a4 4 0 1 1 0 8 4 4 0 0 1 0-8Zm0 10c4.4 0 8 2 8 4.5V21H4v-2.5C4 16 7.6 14 12 14Z'/%3E%3C/svg%3E");
}
.sidenav .nav-sec > summary.nav-ico--customer i{
    -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 21V9l7-5 7 5v3h4v9h-7v-6h-4v6H3Zm4-6h2v-2H7Zm0-4h2V9H7Zm4 4h2v-2h-2Zm0-4h2V9h-2Z'/%3E%3C/svg%3E");
    mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 21V9l7-5 7 5v3h4v9h-7v-6h-4v6H3Zm4-6h2v-2H7Zm0-4h2V9H7Zm4 4h2v-2h-2Zm0-4h2V9h-2Z'/%3E%3C/svg%3E");
}
.sidenav .nav-sec > summary.nav-ico--system i{
    /* 디자인 원본 톱니바퀴 아이콘 파일(nav-m07.svg) 사용 */
    -webkit-mask-image:url("../../design/assets/images/nav-m07.svg");
    mask-image:url("../../design/assets/images/nav-m07.svg");
}
.sidenav .nav-sec > summary.nav-ico--etc i{
    -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3 2 8l10 5 10-5-10-5Zm0 9L2 17l10 5 10-5-10-5Z'/%3E%3C/svg%3E");
    mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3 2 8l10 5 10-5-10-5Zm0 9L2 17l10 5 10-5-10-5Z'/%3E%3C/svg%3E");
}