@charset "utf-8";
/* -----------------------------------------------
	* 메인 화면 스타일 정의
--------------------------------------------------
	- 최초 작성일 : 2021.08.15
	- 최초 작성자 : 아보카도
	- 최종 수정일 :
	- 최종 수정자 :
--------------------------------------------------*/

/****************************************************
	메인 레이아웃
****************************************************/


 
@font-face {
    font-family: 'MabinogiClassicR';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_2207-01@1.0/MabinogiClassicR.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}

html, body {
  margin: 0; padding: 0; height: 100%;
  display: flex;
  justify-content: center;
}

#layout_wrapper {
  position: absolute;       /* 내부 절대위치 요소 기준 */
  margin-top: 110px;        /* 최상단 간격 */
    justify-content: center;
}
/* 내부에 있던 절대위치 요소들은 top/left 좌표를
   #layout_wrapper 기준으로 재계산해 주시면 됩니다. */

body {
	background-color: #F8F8F8; /* 다이어리 밖 배경색 */
}

#main_background {
    position: absolute;
    top: -500px;
    width: 1020px;
    height: 730px;
    background-color: #DFDFDF; /* 다이어리 배경색 */
    background-repeat: repeat-y;
    border-radius: 5px;
    border: 1px solid #000;
    z-index: 0;
}

.gallery-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    text-align: center;
}


#main_layout {
	  position:absolute;
      top: 10px;
	  left: 560px;
      display: flex;
      background-color:#DFDFDF; 
      width: 390px;
      height: 600px;
	  overflow:hidden;
    justify-content: center;
    align-items: stretch;
	border-radius: 5px 5px 5px 5px;
     }
	 
	 
#main_box {
	top: -480px;
    left: 10px;
    position: absolute;
	width: 230px;
	height: 625px;
	background-color: #fff;
	border: 1px solid #000;
	border-radius: 5px;
	z-index: 3;
	}
	
	
#main_box_sub {  
	top: -480px;
	left: 245px;
 position: absolute;
	width:725px;
	height: 625px;
	background-color: #fff;
	border: 1px solid #000;
	border-radius: 5px;
	z-index: 2;
	}

#guestbook_wrap {
  position: absolute;
  top: 0;
  left: 245px;
  width: 725px;
  height: 625px;
  z-index: 2;
}

#guestbook_link {
  position: absolute;
  top: 10px;
  left: 0;
  width: 305px;
  height: 605px;
  overflow-y: auto;
  border-radius: 5px;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

#guestbook_chat {
	overflow: hidden !important;
  position: absolute;
  top: 10px;
  left: 345px;
  width: 335px;
  height: 605px;
  overflow-y: auto;
  border-radius: 5px;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

#guestbook_link::-webkit-scrollbar,
#guestbook_chat::-webkit-scrollbar {
  width: 0;
  height: 0;
}

#main_title {
    width:400px;
    height:100px;
    display: flex;
	top: 10px;
    justify-content: center;
    align-items: center;	
}

#main_box_text {
  position: absolute;
  left: 20px;
  top: 10px;
  width: 190px;
  height: 600px;
  overflow: hidden;
}

#main_box_text .inner-content {
  position: absolute;
  top: -335px;
  left: 0px;
}

#main_diary_cover,
#main_draw_cover {
	  position:absolute;
      top:10px;
      left:245px;
    margin: 0;
    padding: 0;
      width: 305px;
      height: 605px;
	  overflow:hidden;
	  border-radius: 5px;
    gap: 5px;
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  overflow-y: auto !important;
    align-content: start;
    align-items: start;
	
  /* 스크롤바 숨기기 */
  -ms-overflow-style: none; /* IE, Edge */
  scrollbar-width: none;    /* Firefox */
}

#main_diary_cover::-webkit-scrollbar,
#main_draw_cover::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Opera */
}


.main_diary_item, .main_draw_item{ 
	cursor: pointer;
    width: 95px;
    height: 140px;
    background-color: #C7C7C7;  /* 썸네일 갤러리 배경색 */
    display: flex;
    text-align: center;
    align-items: center;
    overflow: hidden;
	justify-content: center;
    padding: 0;
    margin: 0;
    border: 1px solid #9F9F9F;  /* 썸네일 갤러리 테두리색 */
	border-radius: 5px;

}

.main_diary_item_empty, .main_draw_item_empty { 
    width: 95px;
    height: 140px;
    background-color: #C7C7C7;  /* 썸네일 갤러리 배경색 */
	color: white;
    display: flex;
    text-align: center;
    align-items: center;
    overflow: hidden;
	justify-content: center;
    padding: 0;
    margin: 0;
    border: 1px solid #9F9F9F;  /* 썸네일 갤러리 테두리색 */
	border-radius: 5px;

}

 .main_diary_item img, .main_draw_item img {
	pointer-events: none;
    width: 95px;
    height: 140px;
    object-fit: cover;
    display: block;
	transition: transform 0.3s ease;
}

#main_layout_iframe {
	        width: 100%;
        height: 100%;
        border: none;
		
}

#main_menu {
	  position:absolute;
      top:-410px;
      left:959px;
      display: flex;
      background-color:#5D89DF; /* 메뉴 버튼색(홈) */
      width: 80px;
      height: 40px;
    justify-content: center;
    align-items: center;		  
	  overflow:hidden;
	  border-radius: 0px 5px 5px 0px;
	border: 1px solid;
	border-color: #000;  /* 메뉴 버튼 테두리색(홈) */
	z-index: 1;
     }

#main_menu_diary {
	  position:absolute;
      top:-360px;
      left:959px;
      display: flex;
      background-color:#5D89DF;  /* 메뉴 버튼색(다이어리) */
      width: 80px;
      height: 40px;
    justify-content: center;
    align-items: center;		  
	  overflow:hidden;
	  border-radius: 0px 5px 5px 0px;
	border: 1px solid;
	border-color: #000;  /* 메뉴 버튼 테두리색(다이어리) */
	z-index: 1;
     }
	 
#main_menu_draw {
	  position:absolute;
      top:-310px;
      left:959px;
      display: flex;
      background-color:#5D89DF;  /* 메뉴 버튼색(낙서) */
      width: 80px;
      height: 40px;
    justify-content: center;
    align-items: center;		  
	  overflow:hidden;
	  border-radius: 0px 5px 5px 0px;
	border: 1px solid;
	border-color: #000;  /* 메뉴 버튼 테두리색(낙서) */
	z-index: 1;
     }
	 
#main_menu_guestbook {
	  position:absolute;
      top:-260px;
      left:959px;
      display: flex;
      background-color:#5D89DF;  /* 메뉴 버튼색(방명록) */
      width: 80px;
      width: 80px;
      height: 40px;
    justify-content: center;
    align-items: center;		  
	  overflow:hidden;
	  border-radius: 0px 5px 5px 0px;
	border: 1px solid;
	border-color: #000;  /* 메뉴 버튼 테두리색(방명록) */
	z-index: 1;
     }

#main_menu_login {
  position: absolute;
  top: 60px;
  left: 969px;
  overflow: hidden;
  z-index: 1;
}


#login_logout_button {
  width: 30px;
  height: 30px;


	border: 1px solid;
	border-color: #302147;
  padding: 0;
  color: transparent;

  background-size: 70%;
  background-position: center;
  background-repeat: no-repeat;
  transition: background-color 0.3s ease;
  cursor: pointer;
}

#login_logout_button.login {
  background-color: #EADCA0;
  background-image: url('/img/login.png');
}

#login_logout_button.logout {
  background-color: #b4595c;
  background-image: url('/img/login.png');
}


#main_home_container {
	position: absolute;
	top: 0px;
    background-color: #f9f9f9;
}

#external_content {
	overflow-y: scroll;
	  position:absolute;
      top:0px;
      left:255px;
      width: 700px;
      height: 620px;
	  overflow:hidden;
	  border: none;
	border-radius: 5px;
     }

#external_content img {
		  position:absolute;
      height: 380px;
		top: 30px;	  
	border-radius: 5px;
	}
	
#main_bottom {
	  position:absolute;
      top:160px;
	  left: 10px;
	  background-color: #ffffff;
      width: 960px;
      height: 50px;
	  overflow:hidden;
	  border-radius: 5px;
	border: 1px solid;
	border-color: #302147;
	z-index: 1;
     }
	 
.main_folder_2 {
	  position:absolute;
	  left: 810px;
top: 3px;
        width: 58px;
        height: 42px;
            background-image: url('/img/folder.png');
            background-position: center;
 transition: background-image 0.3s ease;
background-repeat:no-repeat;
     }
	 
.main_folder_2:hover {
            background-image: url('/img/folder_paper.png');
        }

.main_folder_1 {
	  position:absolute;
	  left: 870px;
top: 3px;
        width: 58px;
        height: 42px;
            background-image: url('/img/folder.png');
            background-position: center;
 transition: background-image 0.3s ease;
background-repeat:no-repeat;
     }
	 
.main_folder_1:hover {
            background-image: url('/img/folder_paper.png');
}

#toggleButton {
background-image: url('여기에 원하는 이미지 링크를 넣으세요');
            position: absolute;
			width: 50px;
			height: 25px;
            top: -504px;
            left: 270px;
            color: white;
            border: none;
            padding: 5px 10px;
            z-index: 1000;
            cursor: pointer;
            background-position: center;
background-color: #EADCA0;
background-repeat:no-repeat;
	border: 1px solid;
border-color: #302147;
        }

        #content {
            background-color: #f4f4f4;
}
        #main_banner {
            position: absolute;
            top: 130px;
            left: 200px;
            width: 200px;
			height: 280px;
            background-color: white;
            box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
            border-bottom: 2px solid #ccc;
            z-index: 1000;
            padding: 20px;
	border: 1px solid;
border-color: #302147;
            display: none;
        }


        #closeButton {
background-image: url('여기에 원하는 이미지 링크를 넣으세요');
            position: absolute;
width: 50px;
height: 25px;
            top: 106px;
            left: 270px;
            color: white;
            border: none;
            padding: 5px 10px;
            z-index: 1000;
            cursor: pointer;
            background-position: center;
background-color: #EADCA0;
background-repeat:no-repeat;
	border: 1px solid;
border-color: #302147;
        }

  #postContent {
    height: 100%;
    overflow-y: scroll;
    /* IE, Edge */
    -ms-overflow-style: none;
    /* Firefox */
    scrollbar-width: none;
  }
  /* Chrome, Safari */
  #postContent::-webkit-scrollbar {
    display: none;
  }
#x_button {
	background-image: url('/img/x_button.png');
            position: absolute;
			width: 50px;
			height: 23px;
            top: -504px;
            left: 323px;
            color: white;
            border: none;
            z-index: 1000;
            cursor: pointer;
            background-position: center;
background-color: #EADCA0;
background-repeat:no-repeat;
	border: 1px solid;
border-color: #302147;}


#login_logout_button.logout {
    background-color: crimson;
    color: white;
}

a.ui-btn.admin { display: none !important; }


#body > .fix-layout {max-width: 1660px;}