@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--issue 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='M1 21h22L12 2 1 21Zm12-3h-2v-2h2v2Zm0-4h-2v-5h2v5Z'/%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='M1 21h22L12 2 1 21Zm12-3h-2v-2h2v2Zm0-4h-2v-5h2v5Z'/%3E%3C/svg%3E");
}
.sidenav .nav-sec > summary.nav-ico--calendar 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='M19 4h-1V2h-2v2H8V2H6v2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2Zm0 16H5V10h14v10ZM5 8V6h14v2H5Zm2 4h4v4H7v-4Z'/%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='M19 4h-1V2h-2v2H8V2H6v2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2Zm0 16H5V10h14v10ZM5 8V6h14v2H5Zm2 4h4v4H7v-4Z'/%3E%3C/svg%3E");
}
.sidenav .nav-sec > summary.nav-ico--history 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='M13 3a9 9 0 0 0-9 9H1l3.9 3.9.1.2L9 12H6a7 7 0 1 1 2.1 5L6.7 18.4A9 9 0 1 0 13 3Zm-1 5v5l4.2 2.5.8-1.3-3.5-2V8H12Z'/%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='M13 3a9 9 0 0 0-9 9H1l3.9 3.9.1.2L9 12H6a7 7 0 1 1 2.1 5L6.7 18.4A9 9 0 1 0 13 3Zm-1 5v5l4.2 2.5.8-1.3-3.5-2V8H12Z'/%3E%3C/svg%3E");
}
.sidenav .nav-sec > summary.nav-ico--share 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='M18 16.1a3 3 0 0 0-2 .8l-7.1-4.2a3.3 3.3 0 0 0 0-1.4L16 7.1a3 3 0 1 0-1-2.2c0 .2 0 .5.1.7L8 9.8a3 3 0 1 0 0 4.4l7.1 4.2c-.1.2-.1.4-.1.6a3 3 0 1 0 3-2.9Z'/%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='M18 16.1a3 3 0 0 0-2 .8l-7.1-4.2a3.3 3.3 0 0 0 0-1.4L16 7.1a3 3 0 1 0-1-2.2c0 .2 0 .5.1.7L8 9.8a3 3 0 1 0 0 4.4l7.1 4.2c-.1.2-.1.4-.1.6a3 3 0 1 0 3-2.9Z'/%3E%3C/svg%3E");
}

/* 이름이 어디에도 안 걸릴 때 (새 메뉴를 만들면 여기로 온다) */
.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");
}