@import url('https://fonts.googleapis.com/css2?family=Gowun+Batang:wght@400;700&family=Noto+Serif+KR:wght@200;300;400;500;600;700;900&display=swap');


html, body {margin : 0; width: 100%; height: 100%; font-family: 'Gowun Batang', serif;}
p {margin:0; padding: 0;}
  

section{display:flex; flex-direction: column;  min-height:calc(100%);}
.main{display:flex;}

/* sidebar */
.sidebar {flex:1.5; background-color: rgba(256,256,256,50%); height : 100vh; overflow-y:scroll}
.sidebar::-webkit-scrollbar{width : 10px;}
.sidebar::-webkit-scrollbar-track{background-color : #eee;}
.sidebar::-webkit-scrollbar-thumb{background-color : #777; border-radius: 20px; border:1px solid #000;}

.sg-blog-title{font-size: 2rem; font-weight: 900; padding: 20px; text-align: center; margin-top: 20px;}
.sg-title-deco .first {width: 100%; height: 10px; background-color: rgb(251, 255, 18);}
.sg-title-deco .second {width: 100%; height: 10px; background-color: rgb(255, 145, 19);}
.sg-searchbar{ width:auto; height : 30px; padding: 10px; display:flex; justify-content: center; align-items: center;}
.sg-searchbar-input{ height:100%; display:flex; gap:0;}
.sg-searchbar-input input{border:1px solid #111; border-radius : 10px 0 0 10px; background-color:#fff; padding-left:10px;}
.sg-searchbar-input button{border-radius: 0 10px 10px 0; border:none; background-color: #111;}

.sidebar-content {background-color: #fff; padding: 10px; margin: 10px 0;}
.sidebar-content p{font-size: 15px;}
.sidebar-content h2 {font-size : 25px; margin-left: 20px;}
.google-ads_content {display:flex; justify-content: center; align-items: center;}
.notice_content li{list-style: none;}
.category_content li{list-style:none;}
#treeComponent {margin-left: 20px; width:80%;}
#treeComponent #category_0{display:none;}
#treeComponent tbody{padding:20px;}

/* text-overflow 적용하기 */
.recent_content p {width: 200px; font-size: 15px; overflow:hidden; white-space: nowrap; text-overflow:ellipsis; }
.recentPost a{overflow:hidden; white-space:nowrap; text-overflow:ellipsis}
.archive_content p {font-size: 15px;}
.archive_content-list{display:flex; justify-content: space-between; font-size:15px; padding:5px 30px; border:1px solid #111;}
.archive_table li{list-style:none; border:1px solid #000; display:flex; justify-content: space-between; font-size:15px; padding:5px 30px;}
.calendar_content{width:80%; margin:0 auto;}
.tt-calendar td{text-align:center;}
.tt-calendar tbody td.cal_day4 {background-color : #eee;}
.tt-calendar tbody td.cal_day_sunday {color : red;}
.tt-calendar thead th:nth-child(1) {color : red;}
.tt-calendar tbody td:nth-child(7) {color : blue;}
.tt-calendar thead th:nth-child(7) {color : blue;}

/* content */
.content {flex:4; background-color: rgba(256,256,256,50%); height: 100vh; position:relative; overflow:scroll; }
.content-articles{display:flex; flex-direction: column; padding: 10px 100px;}
.content-articles h2{font-size: 40px;}
.content-articles p{font-size: 20px;}
.content-articles .content-articles-desc{border-bottom: 5px solid #000; }
.content-articles .content-footer{display:flex; flex-direction: row; justify-content: space-between; align-items: center; padding: 5px 20px;}
.content-articles .content-footer span{font-size: 20px;}

.mobile-menu{position:relative; padding:10px 0;}
.mobile-menu-container{display:flex; flex-direction: row; justify-content: space-between; align-items: center; padding:0 10px; font-size: 50px; color:#000; font-weight: bold;}
.sidebar-menu{margin:10px 10px; cursor:pointer; z-index: 999;}
.mobile-sidebar{
    position: fixed;
    top: 0;
    right: 0;
    width: 250px;
    height: 100%;
    background-color: #eee;
    transition: transform 0.1s ease-in-out;
    transform: translateX(100%);
    z-index:998;
}
.mobile-sidebar ul{
    position:absolute;
    top:60px;
    left:10px;
    padding:10px;
}
.mobile-sidebar li{
    list-style-type: none;
    font-size: 20px;
    font-weight: bold;
}
.mobile-sidevar-open {
    transform: translateX(0); /* 사이드바가 나타날 때 위치 조정 */
  }

/* footer */
footer{
    display:flex;
    justify-content: space-between;
    font-size : 10px;
    padding: 0 20px;
    font-weight: 900;
    padding-bottom : 20px;
}

footer #powered-by {
    color : rgba(0, 73, 170, 0.861)
}

/* responsive screen */

 /* 핸드폰 크기 미디어 쿼리 */
 @media only screen and (max-width: 767px) {
    .content {
        flex:100vw;
    }
    .mobile-menu{
        display:block !important;
    }
  }

  /* 데스크탑 크기 미디어 쿼리 */
  @media only screen and (min-width: 768px) {
    .mobile-menu{
        display:none !important;
    }
  }