/* 전체 레이아웃 관련 */
/** ResourceLoaderSkinModule: normalize,elements,content-tables,content-links,content-media,interface-message-box,interface-category,toc */

html {
    margin: 0;
    /*padding: 0 0 20px;*/
    padding: 0;
}

/* main layout */
/* width 등의 설정 */
.zp-container {
    max-width: 1200px;
    margin: 0 auto;

    &.zp-spacing {
        padding-left: 8px;
        padding-right: 8px;
    }
}

/* 메인 영역 레이아웃 */
.zp-body {
    display: flex;
    flex-flow: row wrap;
    /* justify-content: center; */
    align-items: stretch;

    /* 사이드 Nav바의 영역 */
    nav.zp-side-nav {
        /* 모바일 상태 */
        flex: 1 1 100%;
        order: 3;
        border-top: 1px solid @color-border-secondary;
        /*padding: 1em;*/

        /* 데스크톱 모드 */
        @media ( min-width: @width-breakpoint-desktop ) {
            order: 1;
            border: 0;
            margin: 1em 0;
        }
    }

    /* 컨텐츠 영역 + Sticky Toc 영역 */
    .zp-content-section {
        flex: 1;
        order: 2;
        /*padding:0.5em;*/
        width: 100%;
    }
}

/* 컨텐츠가 나타나는 영역 */
main.mw-body {
    padding:0.5em;
    width: 100%;
    box-sizing: border-box; /* 혹시 모르니 추가함 */
}


/* 컨텐츠 영역 + Sticky Toc 영역 */
.zp-content-section {
    display: flex;
}
