/* 글꼴 */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@700&display=swap');

/* 선호 색상 스키마 */
@media (prefers-color-scheme: dark) {
	textarea {
		background-color: #222222 !important;
		color: #fafafa !important;
	}
	body {
		background-color: #222222 !important;
		color: #fafafa !important;
	}
	#edit_post, .post_content {
		background-color: #222222 !important;
		color: #fafafa !important;
	}
	.user_information, img {
		color: #222222 !important;
	}

	 .comment-read-box {
		background-color: #222222 !important;
		color: #fafafa !important;
		border: 1px solid #667180 ;
	 }
	 .comment-box {
		background-color: #677486 !important;
		color: #fafafa !important; 
		border: 2px solid #606e7e;
	 }
	 .comment-box h3, p {
		color: #fafafa !important;
	 }

	 .post_comments {
		background-color: #222222 !important;
		color: #fafafa !important;
	 }
	 #pagination .page-on a {
		color: #fafafa !important;	 
	 }
	 .post, #content-write {
		background-color: #6a7179 !important; 
	 }
	 .post_metadata {
		color: #fafafa !important;
	 }
	 #menu li a {
		color: #fafafa !important;
	 }

	#search-text {
		background-color: #222222 !important;
		color: #fafafa !important;
	}

	/* post */
	tbody {
		background-color: #333 !important; 
	}
	td:not(:first-child):before {
		color: #fafafa !important;
	}
	#post_list th {
		color: #fafafa !important;
	}
	#post_list tr td {
		background-color: #333 !important; 
		color: #fafafa !important;
	}
	#post_list tr td a {
		color: #fafafa !important;
	}

	#post_list {
		color: #fafafa !important;
		background-color:  #333 !important;
	}
	#post_list tr td {
		color: #cfcfcf !important;
	}

	#post_list a:active,
	#post_list a:hover {
	color:rgb(186, 211, 236) !important;
	}
	.post_box {
		background: #b1bbce !important;
	} 
}

* {
	list-style: none;
}
a {
	white-space: pre-wrap;     
	white-space: -moz-pre-wrap;  
	white-space: -pre-wrap;     
	white-space: -o-pre-wrap;   
	Word-wrap: break-Word;    
	Word-break: break-all;
	word-wrap: break-word;
}


body {
	background-color: rgb(240, 248, 255);
	margin: 0 auto;
}
#all-container-box {
	margin: 0 auto;
	max-width: 1000px;
}

.comment_information {	
	display: inline-block;
}
.comment_img {
    display: inline-block;
	vertical-align: sub;
	margin-top: 15px;
}
.comment_img img {
	width: 30px;
	height: 30px;
	margin-top: -25px;
	border-radius: 50% !important;
}
.comment_nickname_and_time {
	display: inline-block;
	padding: 0;
}
.comment_nickname_and_time li {
	font-size: 0.7rem;
}

hr {
	margin-top: 50px;
}

.sectionTitle {
    text-align:  center;
    margin-bottom: 25px;
    margin-top: 30px;
}

.write_comment {
	clear: both;
}
.submit_button {
		display: block;
		margin: 10px auto 20px auto;
		width: 60px;
		height: 35px;
		background: linear-gradient(to right, #ff9a56, #ff625d);
		border-radius: 5px;
		border: 1.5px solid gray;
		transition: .5s;
		color: white;
		cursor: pointer;
}

/* 댓글삭제버튼 */

.remove_comment_button  {
	display: block;
	margin: 10px auto 20px auto;
	width: 60px;
	height: 35px;
	border-radius: 5px;
	border: 1.5px solid gray;
	background-color: rgb(226, 92, 103);
	transition: .5s;
	color: white;
	cursor: pointer;
	font-size: 0.8rem;
	float: right;
	margin-right: 40px;
}

.remove_button {
	padding: 8px 20px;
	background-color: rgb(226, 92, 103);
	border-radius: 5px;
	border: 1.5px solid gray;
	transition: .5s;
	color: white;
	cursor: pointer;
	font-size: 1rem;
}

.edit_button {
	display: inline-block;
	padding: 8px 20px;
	background-color: #ff7d5d;
	border-radius: 5px;
	border: 1.5px solid gray;
	transition: .5s;
	color: white;
	cursor: pointer;
	font-size: 1rem;
	margin-right: 20px;
}

.list_button {
	display: inline-block;
	padding: 8px 20px;
	background-color: #ff7d5d;
	border-radius: 5px;
	border: 1.5px solid gray;
	transition: .5s;
	color: white;
	cursor: pointer;
	font-size: 1rem;
	margin-left: 20px;
}


.my_post_edit_remove_button {
	text-align: center;
}

#edit_post {
	width: 95%;
	height: 370px;
	padding: 10px;
	margin: 50px auto 0 auto;
	display: block;
	border: 1px solid #6a7179;
	border-radius: 5px;
	background-color: white;
	font-size: 1.3rem;
	overflow-x: hidden;
}

#content-write-container {
	max-width: 1000px;
	border: none;
	margin: 10px auto;
	padding: 10px 20px;
}

#input_post_title {
	width: 95%;
	margin: 10px auto;
}

#content-write {
	border: 2px solid #6a7179;
	border-radius: 5px;
	background-color: wheat;
	margin: 10px auto;
	padding: 10px 20px;
}

#posts {
	padding: 0px 20px;
	margin-bottom: 50px;
	max-width: 1000px;
}

.on_heart-box {
	cursor: pointer;
	float: right;
}

.post-like-button {
	display: inline-block;
	vertical-align: middle;
}

.post-heart-count {
	/* float: right; */
	display: inline-block;
	vertical-align: middle;
	margin: 0 0 0 5px;
	font-size: 1.8rem;
	margin-top: -0.5px;
}

.post {
    border: 2px solid #6a7179;
    border-radius: 5px;
    width: 100%;
    background-color: wheat;
	margin: 0 auto 40px auto;
	clear: both;
}

.post_content {
	background-color: white;
	border: 2px solid #6a7179;
	border-radius: 5px;
	margin: 10px auto;
	padding: 10px;
	display: block;
}

.edit_comment {
	background-color: white;
	border: 2px solid #6a7179;
	border-radius: 5px;
	margin: 10px auto;
	width: 100%;
	padding: 10px;
	display: block;
	font-size: 1.3em;
}

.post_metadata {
	display: inline-block;
	font-size: 0.8rem;
	padding: 0;
}

.post_user_information_and_img {
	display:inline-block;
	width: 100%;
}

.user_information {
	display: inline-block;
}

.user_information_img {
	display: inline-block;
	vertical-align: sub;
	margin-top: 15px;
}

.user_information_img img {
	width: 40px;
	height: 40px;
	margin-top: -30px;
	border-radius: 50% !important;
}

/* 댓글창 */
.post_comments {
	background-color: white;
	border: 2px solid #6a7179;
	border-radius: 5px;
	margin: 10px auto;
	padding: 10px;
	display: block;
	font-size: 1.3em;
}
.post_comments>p {
	margin-right: 10px;
	text-align: right;
	font-size: 0.9rem;
}


.comment_meta {
	margin: 0;
	padding: 0;
}
/* 공지사항 */

.post_box {
	height: 100%;
	background: #fefeff;
	border: 3px solid darkgray;
	padding: 1px;
} 
#post_list a:link {
	color: rgb(54, 54, 54);
	font-weight: bold;
	text-decoration:none;
}
#post_list a:visited {
	color: #5e7de4;
	font-weight:bold;
	text-decoration:none;
}
#post_list a:active,
#post_list a:hover {
	color:rgb(23, 102, 250);
	text-decoration:none;
}
#post_list {
	width: 100%;
	font-family:Arial, Helvetica, sans-serif;
	color:rgb(56, 56, 56);
	font-size:0.8rem;
	margin:0 auto;
	-moz-border-radius:3px;
	-webkit-border-radius:3px;
	border-radius:3px;
	background: #f6f6f6;
}
#post_list th {
	color: #fff;
	font-weight: bold;
	padding:15px;
	/* 배경색 */
	background: rgb(146, 165, 184);
	background: -webkit-gradient(linear, left top, left bottom, from rgb(146, 165, 184), to rgb(146, 165, 184));
	background: -moz-linear-gradient(top,   rgb(146, 165, 184),  rgb(146, 165, 184));
	font-size: 0.8rem;
}
#post_list th:first-child{
	text-align: left;
	padding-left:20px;
	font-size: 0.8rem;
}
#post_list tr:first-child th:first-child{
	-moz-border-radius-topleft:3px;
	-webkit-border-top-left-radius:3px;
	border-top-left-radius:3px;
}

#post_list tr{
	text-align: center;
	padding-left:20px;
	margin-bottom: 10px;
}

#post_list tr td:first-child{
	text-align: left;
	padding-left:20px;
	border-left: 0;
}
#post_list tr td {
	padding:12px 5px;
	border-top: 1px solid #ffffff;
	border-bottom:1px solid #e0e0e0;
	/* 없애면 스크롤생김 */
	max-width: 180px;
	font-size: 0.9rem;
	max-width: 180px;
	/* table-layout: fixed; */
	text-overflow: ellipsis;
	overflow: hidden;
	line-height: 1rem;
	height: 1rem;
}

#post_list tr td a {
	max-width: 50px;
	text-align: center;
	white-space : nowrap;
}

#post_list tr.even td{
	background: #f6f6f6;
	background: -webkit-(#f6f6f6);
	background: -moz-(#f6f6f6);
}

#post_list tr:last-child td:first-child{
	-moz-border-radius-bottomleft:3px;
	-webkit-border-bottom-left-radius:3px;
	border-bottom-left-radius:3px;
}
.text_post  {
	display:none;
}


/* 1920메뉴 */
@media (max-width: 1920px) {
	
	#main_menu {
		position: relative;
		padding-bottom: 15px; margin-bottom: 15px;  
		color: #1a1a1a;
		line-height: 18px;
		font-size: 20px; color: #2f7fa6; padding-bottom: 5px;
	}
	
	#menu {
		position: fixed;
		float:left;
		width:200px;
		margin-left:-47%;
		top:55px;
		left:50%;
	}
	#menu_list {
		width: 100%;
		padding: 0;
		margin-top: 55px;
	}
	/* 메뉴 */
	#menu li {position: relative;}
	#menu li a {
		font-size: 16px; text-transform: uppercase;
		color: #4e4e4e; 
		border-bottom: 1px solid #dbdbdb;
		font-weight: bold;
		padding: 10px;
		display: block;
		transition: box-shadow 0.34s ease, background 0.34s ease;
		text-decoration: none;
	}
	#menu li a i {position: absolute; right: 10px;}
	#menu li a:hover {
		box-shadow: inset 150px 0 0 0 rgba(36,130,174,0.7);
		color: #fff;
		background: rgba(36,130,174,0.9);
	}
}

.comment-box {
	width: 100%;
	background-color: rgb(255, 244, 231);
	margin: 10px auto 10px auto;
	padding: 5px;
	border-radius: 5px;
	display: inline-block;
	clear: both;
}

.comment-box img {
	width: 30px;
	height: 30px;
	margin-left: 5px;
	border-radius: 50% !important;	
}


.comment-read-box {
	background-color: rgb(255, 255, 255);
	padding: 5px;
	border-radius: 5px;
	font-size: 0.8rem;
	margin-bottom: 10px;
	margin-left: 40px;
	margin-right: 40px;
}

/* 파비콘 */

.fa {
	display: inline-block;
	font: normal normal normal 14px/1 FontAwesome;
	font-size: inherit;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
/* 페이지넘기기 */
#pagination {
	text-align: center;
	padding: 0;
	margin-bottom: 35px;
}

#pagination .page-on {
	display: inline-block;
}

#pagination .page-on a {
	padding: 15px;
	margin-right: 3px;
	color: rgb(36, 36, 36);
	font: bold 12px;
	/* font-family: 'Roboto', sans-serif; */
	border: 1px solid rgb(116, 116, 116);
	text-decoration: none;
}

#pagination .page-on a:hover,
#pagination .page-on a:focus {
	color: #fff;
	border: 1px solid rgb(184, 184, 184);
	background-color: #ff625d;
}

@media (max-width: 1600px) {
	#menu {
		width:150px;
	}
}

@media (max-width: 1400px){
	#main_menu #menu li a i {display: none;}
	#main_menu {padding: 0; border-bottom: 0;}
	#main_menu #menu ul {overflow: hidden;}
	#main_menu #menu li {float: left; width: 33.33333%; text-align: center; border-right: 1px solid #dbdbdb; box-sizing: border-box;}
	#main_menu #menu li:nth-child(3n) {border-right: 0;}
	#menu li a:hover {
		box-shadow: inset 200px 0 0 0 rgba(36,130,174,0.7);
	}

	#menu {
		position: relative;
		width:100%;
		display: contents;
		top:55px;
		left:50%;
	}

	#menu_list {
		width: 100%;
		padding: 0;
		margin-top: 30px;
	}

}


@media (max-width: 768px){
	#pagination .page-on a {
		padding: 10px;
	}

	.on_heart-box {
		margin-right: 0;
		margin-top: 0;
	}

.submit_button {
	display: block;
	margin: 10px auto 20px auto;
	width: 60px;
	height: 35px;
	background: linear-gradient(to right, #ff9a56, #ff625d);
	border-radius: 5px;
	border: 1.5px solid gray;
	transition: .5s;
	color: white;
	cursor: pointer;
}

/* 댓글삭제버튼 */

.submit_button, .remove_comment_button, .remove_button, .edit_button,.edit_button  {
font-size: 0.8rem;
}
.remove_comment_button  {
	float: none;
	margin: 0 auto;
	margin-bottom: 15px;
}
}

@media (max-width: 460px) {
	#post_list th {
		display: none;
	}
	td:nth-child(1) {
		width: 100px;
	}
	#post_list tr {
		padding-left: 20px;
		border-bottom: 2px solid lightgray;
		text-align: left;
		table-layout: fixed;
		max-width: 380px;
	}

	#post_list tr td {
		border-top: 0px solid #ffffff;
		border-bottom:0px solid #e0e0e0;
		width: 100%;
		display: contents;
		padding: 0;
		color: rgb(150, 150, 150);
		font-weight: bold;
		font-size: 0.7rem;
		max-width: 300px;
		line-height: 1rem;
		height: 1rem;
		
	}
	#post_list tr td a {
		text-align: center;
		max-width: 300px;
		
	} 

	/* 추가 */
	table, tr, td {
		display: inline-table;
	  }
	  #post_list tr td:first-child {
		  /* 전체넓이로 */
		  display: block;
	  }
	
	  td:not(:first-child) {
		clear: both;
		margin-left: 100px;
		padding: 4px 20px 4px 90px;
		position: relative;
		text-align: left;
	  }
	  td:not(:first-child):before {
	
	  }
	  td:nth-child(2):before{
		background-size: 15px 15px;
		display: inline-block;
		content:"";
		/* margin-right: 10px; */
		vertical-align: text-bottom;
	  }
	 
	  td:nth-child(3):before {
		/* content: '등록자:'; */
		/* content: url("/static/img/date01.png"); */
		/* background-image: url('/static/img/nickname01.png'); */
		background-size: 15px 15px;
		display: inline-block;
		content:"";
		vertical-align: text-bottom;
	
	  }
	  td:nth-child(4):before {
		background-size: 15px 15px;
		display: inline-block;
		content:"";
		vertical-align: text-bottom;
	  }
	  td:nth-child(5):before {
		background-size: 15px 15px;
		display: inline-block;
		content:"";
		vertical-align: text-bottom;
	  }
	  td {
		width: 100%;
		table-layout: fixed;
		text-overflow: ellipsis;
		overflow: hidden;
		white-space : pre-wrap;
	  }
	
	  tr {
		padding: 10px 0;
		position: relative;
		width: 100%;
	  }
	  #post_list tr td:first-child {
		  padding-left: 0;
		  font-size: 0.8rem;
	  }

	  #show_menu {
		display: none;
	  }
	  tr:nth-child(2) {
		  margin-bottom: 10px;
	  } 

	  #post_list a:visited {
		 color: #5e7de4;
	  }
	  #post_list a:active,
	  #post_list a:hover {
		 color:rgb(23, 102, 250);
	  }
	  tbody {
		  display: block;
		  margin-top: 10px;
		  padding-left: 15px;
		  padding-right: 15px;
	  }
	  .text_post { 
		display: inline-block;
	}
	.post_box {
		border: 5px solid rgb(146, 165, 184);
	} 


}