/*
파일 : /css/layout.css
설명 : 화면 레이아웃
Version : 1.0
*/

html,
body{
    width:100%;
    height:100%;
}

body{
    display:flex;
    flex-direction:column;
}

/* ========================= */
/* Header                    */
/* ========================= */

#header{
    height:120px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    background:#ffffff;
    border-bottom:1px solid #dcdcdc;
    padding:15px 20px;
    flex-shrink:0;
}
/* Header Left */
#header-left{
    width:260px;
    display:flex;
    flex-direction:column;
    gap:8px;
}
/* Header Center */
#header-center{
    flex:1;
    text-align:center;
}
/* Header Right */
#header-right{
    width:260px;
    display:flex;
    justify-content:flex-end;
    align-items:flex-start;
}

/* ========================= */
/* Main                      */
/* ========================= */
#main{
    flex:1;
    display:flex;
    overflow:hidden;
}

/* ========================= */
/* Sidebar                   */
/* ========================= */
#sidebar{
    width:260px;
    background:#ffffff;
    border-right:1px solid #dcdcdc;
    overflow-y:auto;
    overflow-x:hidden;
    padding:15px;
}

/* ========================= */
/* Content                   */
/* ========================= */
#content{
    flex:1;
    background:#f7f8fb;
    overflow-y:auto;
    overflow-x:hidden;
    padding:20px;
}

/* ========================= */
/* Footer                    */
/* ========================= */
#footer{
    height:90px;
    background:#ffffff;
    border-top:1px solid #dcdcdc;
    text-align:center;
    padding:10px;
    line-height:1.8;
    flex-shrink:0;
}

/* ========================= */
/* Footer Menu               */
/* ========================= */
.footer-menu{
    display:flex;
    justify-content:center;
    align-items:center;
    flex-wrap:wrap;
    gap:10px;
    margin-bottom:8px;
}

/* ==========================================
   좌측 메뉴 들여쓰기
========================================== */
/* 학년 */
.grade {
    margin-left: 20px;
}

/* 학기 */
.semester {
    margin-left: 25px;
}

/* 단원 */
.menu-item {
    margin-left: 10px;
}

/* ========================= */
/* Scroll                    */
/* ========================= */
#sidebar::-webkit-scrollbar{
    width:8px;
}
#content::-webkit-scrollbar{
    width:8px;
}
#sidebar::-webkit-scrollbar-thumb,
#content::-webkit-scrollbar-thumb{
    background:#c5c5c5;
    border-radius:4px;
}
#sidebar::-webkit-scrollbar-track,
#content::-webkit-scrollbar-track{
    background:#efefef;
}

/* ==========================================
   Mobile Layout
========================================== */
@media (max-width: 768px){
    /* 좌측 메뉴 숨김 */
    #sidebar{
        display:none;
    }
    /* 본문 전체 사용 */
    #content{
        width:100%;
        padding:15px;
    }
    /* 사이트 제목 숨김 */
    #header-center{
        display:none;
    }

}/* ==========================================
   Mobile Menu
========================================== */
#mobileMenu{
    display:none;
}
@media (max-width:768px){
    #mobileMenu{
        display:block;
        position:fixed;
        top:0;
        left:-100%;
        width:100%;
        height:100%;
        background:#ffffff;
        z-index:5000;
        transition:.3s;
        overflow:auto;
    }
    #mobileMenu.open{
        left:0;
    }
}

/* ==========================================
   Header Top Menu
========================================== */
#header-right{
    position:relative;
}
#topMenuList{
    display:none;
    position:absolute;
    top:55px;
    right:0;
    width:220px;
    background:#ffffff;
    border:1px solid #dcdcdc;
    border-radius:8px;
    box-shadow:0 4px 12px rgba(0,0,0,.15);
    overflow:hidden;
    z-index:3000;
}
#topMenuList.open{
    display:block;
}
#topMenuList a{
    display:block;
    padding:12px 16px;
    text-decoration:none;
    color:#333333;
    border-bottom:1px solid #eeeeee;
}
#topMenuList a:last-child{
    border-bottom:none;
}
#topMenuList a:hover{
    background:#f5f5f5;
}

/* ==========================================
   좌측 메뉴 글자크기 (PC화면)
========================================== */
/* 보호자 가이드 / 학습하기 */
#sidebar .menu-title{
    font-size:20px;
}
/* 학년 */
#sidebar .grade > summary{
    font-size:19px;
}/* 학기 */
#sidebar .semester > summary{
    font-size:18px;
}/* 단원 */
#sidebar .menu-item{
    font-size:17px;
}

/* =========================================================
   모바일 메뉴 설정
========================================================= */
@media (max-width:768px){
    /* =====================================================
       상부메뉴
       메뉴크기 : 기본 크기의 1.2배
       한줄메뉴 : 3개
    ===================================================== */
    .mobile-top-menu{
        display:grid;
        /* 한줄에 3개 */
        grid-template-columns:repeat(3, 1fr);
        gap:1px;
        width:100%;
    }
    .mobile-top-menu a{
        /* 메뉴크기 : 기본 글자의 1.2배 */
        font-size:110%;
        text-align:left;   
        padding:8px 5px;
        line-height:1.3;
        box-sizing:border-box;
    }

    /* =====================================================
       보호자 가이드 / 학습하기        메뉴크기 : 2배
    ===================================================== */
    #sidebar .menu-title,
    #mobileMenuBody .menu-title{
        font-size:200%;     /* 메뉴크기 : 2배 */
    }

    /* =====================================================
       학년     메뉴크기 : 1.5배      학년간격 : 20px
    ===================================================== */
    #sidebar .grade,
    #mobileMenuBody .grade{     
        margin-bottom:13px;   /* 학년간격 : 필요하면 숫자 수정 */
    }
    #sidebar .grade > summary,
    #mobileMenuBody .grade > summary{
        font-size:150%;     /* 메뉴크기 : 1.5배 */
        padding-left:20px;    /* 좌우간격 : 각각 20px */
        padding-right:20px;
        line-height:1.5;
        cursor:pointer;
    }

    /* =====================================================
       학기          메뉴크기 : 1.5배
    ===================================================== */
    #sidebar .semester > summary,
    #mobileMenuBody .semester > summary{
        font-size:150%;   /* 메뉴크기 : 1.5배 */
        padding-left:20px;   /* 좌우간격 : 각각 20px */
        padding-right:20px;
        line-height:2;
        cursor:pointer;
    }

    /* =====================================================
       단원 / 학기 선택 메뉴   메뉴크기 : 1.5배        좌우간격 : 각각 20px
    ===================================================== */
    #sidebar .menu-item,
    #mobileMenuBody .menu-item{
        font-size:150%;     /* 메뉴크기 : 1.5배 */
        padding-left:50px;  /* 좌우간격 : 각각 20px */
        padding-right:20px;
        line-height:1.5;
        cursor:pointer;
    }

    /* =====================================================
       선택된 메뉴
       좌우간격 : 문자보다 각각 20px 크게
    ===================================================== */
    #sidebar .menu-item.menu-selected,
    #mobileMenuBody .menu-item.menu-selected{
        padding-left:20px;      /* 좌우간격 : 각각 20px */
        padding-right:20px;
    }
}