/* =========================
   ±âº» ÃʱâÈ­
========================= */

* {
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:'Poppins',sans-serif;
}

html, body {
    height:100%;
    margin:0;
    overflow:hidden;
    background:#FFF8FB;
}

/* ¸µÅ© */
a {
    text-decoration:none;
}

/* =========================
   Çì´õ
========================= */

header {
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:80px;
    background:rgba(0,0,0,0.2);
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0 40px;
    z-index:1000;

    backdrop-filter:blur(10px);
    box-shadow:0 2px 12px rgba(0,0,0,.08);
}

.logo img {
    height:50px;
}

.navigation a,
.navigation span,
.navigation button {
    margin-left:20px;
    color:#fff;
    font-weight:500;
}

.navigation button {
    cursor:pointer;
}

/* =========================
   Àüü ·¹À̾ƿô
========================= */

#container {
    position:fixed;
    top:80px;
    left:0;
    right:0;
    bottom:0;
    display:flex;
    overflow:hidden;
}

/* =========================
   ÁÂÃø ¸Þ´º
========================= */

#leftMenu {
    width:250px;
    min-width:200px;
    background:#FFF0F5;
    border-right:1px solid #E5C9D5;
    overflow-y:auto;
    flex-shrink:0;
}

#leftMenu ul {
    list-style:none;
}

#leftMenu li {
    border-bottom:1px solid #EDD8E1;
}

#leftMenu li a {
    display:block;
    padding:12px 20px;
    color:#444;
    cursor:pointer;
    transition:all .25s ease;
}

/* ¸¶¿ì½º ¿À¹ö */

#leftMenu li a:hover {
    background:#FFDDEE;
    color:#C2185B;
}

/* ¼±ÅÃµÈ ¸Þ´º */

#leftMenu li a.active,
#leftMenu li a.active:hover {
    background:#FFC1D9;
    color:#AD1457 !important;
    font-weight:700;
    border-left:6px solid #E91E63;
    box-shadow:0 2px 8px rgba(233,30,99,.20);
}

/* ¼­ºê¸Þ´º */

.submenu {
    max-height:0;
    overflow:hidden;
    background:#FFF5F8;
    transition:max-height 0.3s ease;
}

.submenu a {
    padding-left:40px;
}

/* ¼­ºê¸Þ´º ¼±Åà */

.submenu a.active,
.submenu a.active:hover {
    background:#FFD7E5 !important;
    color:#AD1457 !important;
    border-left:6px solid #E91E63;
    font-weight:700;
}

/* =========================
   ¿ìÃø ÄÜÅÙÃ÷
========================= */

#rightContent {
    flex:1;
    min-width:0;
    min-height:0;
    background:#FAFAFA;
    display:flex;
    box-shadow:inset 0 0 8px rgba(0,0,0,.03);
}

#contentFrame {
    width:100%;
    height:100%;
    border:none;
    display:block;
    overflow:auto;
}

/* =========================
   ¹ÝÀÀÇü
========================= */

@media (max-width:1250px) {

    #container {
        flex-direction:column;
    }

    #leftMenu {
        width:100%;
        height:200px;
    }

    #rightContent {
        flex:1;
    }
}

@media (max-width:768px) {

    header {
        flex-direction:column;
        height:80px;
        padding:10px 20px;
    }

    .navigation {
        margin-top:10px;
        display:flex;
        flex-wrap:wrap;
    }

    .navigation a,
    .navigation span,
    .navigation button {
        margin:5px 10px 0 0;
    }

    #leftMenu {
        height:180px;
    }

    #rightContent {
        flex:1;
    }
}