.ieum-board-side-nav,
.ieum-board-content-shell {display:none}

.ieum-board-content-shell > [data-ieum-board-content] {position:relative}
.ieum-board-content-shell.is-loading > [data-ieum-board-content] {pointer-events:none}
.ieum-board-content-shell.is-loading > [data-ieum-board-content]::after {
    content:"";
    position:absolute;
    z-index:20;
    top:0;
    right:0;
    left:0;
    height:3px;
    border-radius:999px;
    background:#1268ee;
    opacity:.82;
}

@media (min-width:1700px) {
    body.ieum-board-side-nav-active {
        overflow-x:clip;
    }
    body.ieum-board-side-nav-active .wrapper {
        overflow:visible;
    }
    .wrapper:has(.ieum-board-content-shell.is-mounted) {
        overflow:visible;
    }
    .ieum-board-content-shell.is-mounted {
        --ieum-side-width:220px;
        --ieum-side-gap:38px;
        display:grid;
        grid-template-columns:var(--ieum-side-width) minmax(0,1fr);
        align-items:start;
        gap:var(--ieum-side-gap);
        width:calc(100% + var(--ieum-side-width) + var(--ieum-side-gap));
        flex:0 0 calc(100% + var(--ieum-side-width) + var(--ieum-side-gap));
        max-width:none;
        margin-left:calc((var(--ieum-side-width) + var(--ieum-side-gap)) * -1);
    }
    .ieum-board-content-shell.is-mounted > .basic-body-main {
        width:auto;
        max-width:none;
        min-width:0;
    }
    .ieum-board-side-nav {
        --ieum-side-blue:#1268ee;
        --ieum-side-navy:#0f2342;
        display:flex;
        position:sticky;
        z-index:30;
        top:92px;
        width:220px;
        max-height:calc(100vh - 116px);
        align-self:start;
        flex-direction:column;
        overflow:hidden;
        border:1px solid #d9e5f4;
        border-radius:18px;
        background:#fff;
        box-shadow:0 12px 28px rgba(31,51,82,.06);
        color:var(--ieum-side-navy);
    }
    .ieum-board-side-nav[data-side-nav-section="education"] {
        margin-top:18px;
    }
    .ieum-board-side-nav__panel {
        display:flex;
        min-height:0;
        max-height:inherit;
        flex-direction:column;
    }

    .ieum-board-side-nav__head {
        padding:17px 18px 15px;
        border-bottom:1px solid #e4edf7;
        background:linear-gradient(145deg,#f8fbff 0%,#eef5ff 100%);
    }
    .ieum-board-side-nav__head span {
        display:block;
        margin-bottom:4px;
        color:var(--ieum-side-blue);
        font-size:10px;
        font-weight:800;
        letter-spacing:.12em;
    }
    .ieum-board-side-nav__head strong {font-size:19px;line-height:1.25;letter-spacing:-.04em}

    .ieum-board-side-nav__body {
        min-height:0;
        overflow:auto;
        overscroll-behavior:contain;
        scrollbar-width:thin;
        scrollbar-color:#bdd0e8 transparent;
    }
    .ieum-board-side-nav__body::-webkit-scrollbar {width:5px}
    .ieum-board-side-nav__body::-webkit-scrollbar-thumb {border-radius:10px;background:#bdd0e8}

    .ieum-board-side-nav__group {border-bottom:1px solid #edf2f8}
    .ieum-board-side-nav__group > summary,
    .ieum-board-side-nav__subgroup > summary {
        list-style:none;
        cursor:pointer;
        user-select:none;
    }
    .ieum-board-side-nav__group > summary::-webkit-details-marker,
    .ieum-board-side-nav__subgroup > summary::-webkit-details-marker {display:none}
    .ieum-board-side-nav__group > summary {
        display:flex;
        align-items:center;
        justify-content:space-between;
        min-height:44px;
        padding:0 17px;
        font-size:14px;
        font-weight:750;
        letter-spacing:-.025em;
        transition:background-color .18s ease,color .18s ease;
    }
    .ieum-board-side-nav__group > summary:hover {background:#f5f9ff;color:var(--ieum-side-blue)}
    .ieum-board-side-nav__group.is-current > summary {color:var(--ieum-side-blue)}
    .ieum-board-side-nav__group > summary i,
    .ieum-board-side-nav__subgroup > summary i {
        width:7px;
        height:7px;
        border-right:1.5px solid currentColor;
        border-bottom:1.5px solid currentColor;
        transform:rotate(45deg) translateY(-2px);
        transition:transform .18s ease;
    }
    .ieum-board-side-nav__group[open] > summary i,
    .ieum-board-side-nav__subgroup[open] > summary i {transform:rotate(225deg) translate(-1px,-1px)}

    .ieum-board-side-nav__links {
        padding:2px 10px 10px;
        background:#fbfdff;
    }
    .ieum-board-side-nav__links > a,
    .ieum-board-side-nav__subgroup > div > a {
        display:block;
        position:relative;
        padding:8px 10px;
        border-radius:8px;
        color:#52647c;
        font-size:12.5px;
        font-weight:600;
        line-height:1.3;
        letter-spacing:-.025em;
        text-decoration:none;
        transition:background-color .16s ease,color .16s ease,transform .16s ease;
    }
    .ieum-board-side-nav__links > a:hover,
    .ieum-board-side-nav__subgroup > div > a:hover {
        background:#edf5ff;
        color:var(--ieum-side-blue);
        transform:translateX(2px);
    }
    .ieum-board-side-nav__links a.is-active {
        background:var(--ieum-side-blue);
        color:#fff;
        font-weight:750;
        box-shadow:0 6px 14px rgba(18,104,238,.18);
    }

    .ieum-board-side-nav__subgroup {
        margin:4px 0;
        overflow:hidden;
        border:1px solid #e2eaf4;
        border-radius:10px;
        background:#fff;
    }
    .ieum-board-side-nav__subgroup > summary {
        display:flex;
        align-items:center;
        justify-content:space-between;
        min-height:37px;
        padding:0 10px;
        color:#334963;
        font-size:12.5px;
        font-weight:700;
    }
    .ieum-board-side-nav__subgroup.is-current > summary {color:var(--ieum-side-blue)}
    .ieum-board-side-nav__subgroup > div {padding:0 5px 5px;border-top:1px solid #edf2f8;background:#f8fbff}
    .ieum-board-side-nav__subgroup > div > a {padding:7px 8px;font-size:11.5px}

    /* 디자인 자료도 교육 콘텐츠처럼 하나의 패널 안에서 구분선으로 정리한다. */
    .ieum-board-side-nav[data-side-nav-section="materials"] .ieum-board-side-nav__sections {
        background:#fff;
    }
    .ieum-board-side-nav[data-side-nav-section="materials"] .ieum-board-side-nav__subgroup {
        margin:0;
        border:0;
        border-top:1px solid #edf2f8;
        border-radius:0;
        background:#fff;
    }
    .ieum-board-side-nav[data-side-nav-section="materials"] .ieum-board-side-nav__subgroup:first-child {
        border-top:0;
    }
    .ieum-board-side-nav[data-side-nav-section="materials"] .ieum-board-side-nav__subgroup > summary {
        min-height:42px;
        padding:0 17px;
        color:#18283f;
        font-size:12.5px;
        font-weight:750;
        transition:background-color .18s ease,color .18s ease;
    }
    .ieum-board-side-nav[data-side-nav-section="materials"] .ieum-board-side-nav__subgroup > summary:hover {
        background:#f5f9ff;
        color:var(--ieum-side-blue);
    }
    .ieum-board-side-nav[data-side-nav-section="materials"] .ieum-board-side-nav__subgroup.is-current > summary {
        color:var(--ieum-side-blue);
    }
    .ieum-board-side-nav[data-side-nav-section="materials"] .ieum-board-side-nav__subgroup > div {
        padding:2px 10px 10px;
        border-top:0;
        background:#fbfdff;
    }
    .ieum-board-side-nav[data-side-nav-section="materials"] .ieum-board-side-nav__subgroup > div > a {
        padding:8px 10px;
        font-size:12px;
    }

    .ieum-board-side-nav__note {
        margin:0;
        padding:12px 16px 14px;
        border-top:1px solid #e4edf7;
        background:#f8fbff;
        color:#75859a;
        font-size:10.5px;
        line-height:1.55;
        letter-spacing:-.02em;
    }
}

@media (max-width:1699.98px) {
    .ieum-board-content-shell.is-mounted {
        display:block;
        width:100%;
        flex:0 0 100%;
    }
    .ieum-board-content-shell.is-mounted > .basic-body-main {
        width:100%;
        max-width:100%;
    }
}

@media (prefers-reduced-motion:reduce) {
    .ieum-board-side-nav * {scroll-behavior:auto!important;transition:none!important}
}