/* ÃʱâÈ­ */
* {
    margin:0; 
    padding:0; 
    box-sizing:border-box; 
    font-family:'Poppins', sans-serif;
}
html, body {
    height:100%;
    overflow:hidden;
    background:#CEFBC9;   /* ¹è°æ»ö Àû¿ë */
}

/* ¸ðµç ÇÏÀÌÆÛ¸µÅ© ¹ØÁÙ Á¦°Å */
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;
}
.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:#CEFBC9; 
    border-right:1px solid #ccc;
    overflow-y:auto; 
    flex-shrink:0;
}
#leftMenu ul {list-style:none;}
#leftMenu li {border-bottom:1px solid #ddd;}
#leftMenu li a {
    display:block; 
    padding:12px 20px; 
    color:#333; 
    cursor:pointer;
}
#leftMenu li a:hover {
    background:#CEFBC9;   /* hover »öµµ µ¿ÀÏÇÏ°Ô ¼öÁ¤µÊ */
}
.submenu {
    max-height:0; 
    overflow:hidden; 
    background:#f0f0f0; 
    transition:max-height 0.3s ease;
}
.submenu a {padding-left:40px;}

/* ¿ìÃø ÄÜÅÙÃ÷ */
#rightContent {
    flex:1;
    background:#fff;
    overflow:hidden;
    position:relative;
    height:100%;
}
#contentFrame {
    position:absolute;
    top:0; left:0;
    width:100%; 
    height:100%;
    border:none;
    overflow:auto;
}

/* ¹ÝÀÀÇü */
@media (max-width:1250px) {
    #container {flex-direction:column;}
    #leftMenu {width:100%; height:200px; order:1;}
    #rightContent {order:2; height:calc(100vh - 280px);}
}
@media (max-width:768px) {
    header {
        flex-direction:column; 
        height:auto; 
        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 {height:calc(100vh - 80px - 180px);}
}