@charset "utf-8";

/***** Let's begin *****/
div#mc-board-top {
	margin-top: 1rem;
	text-align: right;
}

/* [1] 카테고리 */
div#mc-board-category {
	margin-top: 1rem;
	line-height: 120%;
}
div#mc-board-category ul {
	display: flex;
	list-style: none;
}
div#mc-board-category ul li {
	border: 0;
	border-radius: 0;
	border-right: 1px dashed rgb(220 220 220);
	border-bottom: 0;
	flex-grow: 1;
	text-align: center;
	background-color: rgb(245 245 245);
}
div#mc-board-category ul li:first-of-type {
	border-style: solid;
	border-radius: 6px 0 0 6px;
}
div#mc-board-category ul li:last-of-type {
	border-radius: 0 6px 6px 0;
	border-right: 0;
}
div#mc-board-category ul li a {
	display: inline-block;
	width: 100%;
	padding: 0.5rem 0.5rem;
}
div#mc-board-category ul li a:hover {
	font-weight: 600;
	background-color: rgb(255 255 255);
	border-bottom: 2px solid var(--accent-color);
}
div#mc-board-category a#bo_cate_on {
	font-weight: 600;
	background-color: rgb(255 255 255);
	border-bottom: 2px solid var(--accent-color);
}
div#mc-board-category a#bo_cate_on::before { content: "[ "; }
div#mc-board-category a#bo_cate_on::after { content: " ]"; }

/* [2] 목록 */
div#mc-gallery-list {
	margin-top: 1rem;
	border-radius: 6px;
	background: linear-gradient( 135deg, rgb(100,100,100), rgb(50,50,50) );
}
div#mc-gallery-list div#bo-li-headr {
	padding: 0.2rem 0.7rem;
	text-align: center;
	font-weight: 500;
	color: rgb(255, 255, 255);
	font-size: 0.9rem;
}
div#mc-gallery-list div.bo-li-cols {
	display: grid;
}

div#mc-gallery-list div.bo-li-no {
	text-align: center;
	font-size: 0.9rem;
}
div#mc-gallery-list span.bo-li-cat {
	font-size: 0.9rem;
	color: rgb(150 150 150);
	font-weight: 600;
	letter-spacing: -0.03em;
	line-height: 100%;
}
div#mc-gallery-list span.bo-li-cat::after {
	content: " :: ";
}
div#mc-gallery-list span.bo-li-cmt {
	font-size: 0.9rem;
	color: rgb(150 150 150);
	font-weight: 600;
	letter-spacing: -0.03em;
	line-height: 100%;
}
div#mc-gallery-list span.bo-li-cmt::before {
	content: "+";
}
#mc-gallery-list div.bo-li-wrtr {
	text-align: center;
	font-size: 0.9rem;
}
#mc-gallery-list div.bo-li-date {
	text-align: center;
	font-size: 0.9rem;
}
#mc-gallery-list div.bo-li-views {
	text-align: center;
	font-size: 0.9rem;
}
#mc-gallery-list div.bo-li-gng {
	text-align: center;
	font-size: 0.9rem;
	color: rgb(var(--color));
}
#mc-gallery-list div.gal-li-gng {
	position: absolute; top: 0.5rem; right: -0.5rem;
	padding: 0.1rem 0.5rem;
	background-color: rgb(255 255 255 / 0.8);
	border-radius: 1rem;
	box-shadow: 0px 0px 3px 0px rgb(0 0 0 / 0.3);
	text-align: center;
	font-size: 0.9rem;
	color: rgb(50 50 50);
}
#mc-gallery-list ul {
	list-style: none;
	padding: 0.2rem 0.5rem 1rem 0.5rem;
	border-radius: 6px;
	background-color: rgb(255 255 255);
	box-shadow: 0px 0px 3px 0px rgb(0 0 0 / 0.3);
	display: grid;
	justify-content: space-between;
	align-items: start;
}
#mc-gallery-list ul li {
	position: relative;
	padding-top: 1rem;
	margin: 0 0.5rem;
	line-height: 140%;
	place-self: start center;
}
#mc-gallery-list ul li img {
	padding: 6px;
	margin-bottom: 0.5rem;
	box-shadow: 0px 1px 3px 0px rgb(0 0 0 / 0.3);
	border-radius: 6px;
	/*transition: border 500ms ease-out;*/
}
#mc-gallery-list ul li:hover img {
	box-shadow: 0px 2px 6px 0px rgb(0 0 0 / 0.5);
}
#mc-gallery-list ul li a::before { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; }
#mc-gallery-list ul li:hover a { font-weight: 500; color: rgb(0, 50, 128); }
#mc-gallery-list ul li .gal-li-info {
	padding: 2px 6px;
	display: flex;
	line-height: 100%;
	background-color: rgb(245 245 245);
	border-radius: 4px;
}
#mc-gallery-list ul li .gal-li-i-c {
	font-size: 0.9rem;
	color: rgb(150 150 150);
	font-weight: 600;
	letter-spacing: -0.03em;
	line-height: 100%;
}
#mc-gallery-list ul li .gal-li-i-c::before {
	content: "+";
}
#mc-gallery-list ul li .gal-li-i-d {
	font-size: 0.9rem;
	color: rgb(100 100 100);
}

#mc-gallery-list ul li.now img {
	box-shadow: 0px 2px 6px 0px rgb(0 0 0 / 0.5);
}
#mc-gallery-list ul li.now a {
	font-weight: 500;
	color: rgb(0, 50, 128);
}
#mc-gallery-list ul li.gal-li-notice {
	place-self: stretch stretch;
	margin: 0;
	padding: 0.4rem 0.2rem;
	border-radius: 4px;
	border-bottom: 0;
}
#mc-gallery-list ul li.gal-li-notice:hover {
	background-color: rgb(245, 245, 245);
}
/*
#mc-gallery-list ul li.gal-li-notice a {
	line-height: 100%;
}
#mc-gallery-list ul li.gal-li-notice a:hover {
	color: rgb(0, 50, 128);
	/*font-weight: 600;* /
}
*/
#mc-gallery-list ul li#no-articles {
	padding: 1rem;
	text-align: center;
}
div#mc-gallery-list div#bo-li-footr {
	display: grid;
	grid-template-columns: 1fr 2fr 1fr;
	padding: 0.3rem 0.5rem;
}

/* [2-1] 검색칸 */
div#mc-board-search {
	text-align: center;
	border-radius: 4px;
	background-color: rgb(255, 255, 255);
}
div#mc-board-search select {
	border: 0;
	font-size: 0.9rem;
}
div#mc-board-search input#stx {
	border: 0;
	font-size: 0.9rem;
}

/* [2-2] 페이지 표시 */
div#mc-board-pagination {
	padding: 0.5rem 0.5rem;
	text-align: center;
	font-size: 0.8rem;
}
div#mc-board-pagination a {
	display: inline-block;
	font-size: 0.9rem;
	min-width: 1.8rem;
	padding: 0 0.5rem;
	margin: 0 0.1rem;
	border-radius: 1.4rem;
	border: 1px solid rgb(200,200,200);
}
div#mc-board-pagination a:hover {
	border-color: rgb(150,150,150);
}
div#mc-board-pagination a:first-child {
	margin-right: 0.5rem;
}
div#mc-board-pagination a:last-child {
	margin-left: 0.5rem;
}
div#mc-board-pagination a.now {
	background-color: rgb(230, 244, 255);
}

/***** [3] 읽기 *****/
/* [3-1] 제목, 정보 */
div#mc-board-view {
	margin-top: 1rem;
	margin-bottom: 1.5rem;
	border-radius: 6px;
	background-color: rgb(245,245,245);
	border-bottom: 2px solid rgb(200,200,200);
}
div#mc-board-view div#bo-vw-t {
	padding: 0.5rem 1rem;
	font-size: 1.2rem;
	font-weight: 600;
	line-height: 140%;
}
div#mc-board-view div#bo-vw-t span.bo-vw-t-ca {
	display: block;
	font-size: 1rem;
	color: rgb(100 100 100);
	letter-spacing: -0.03em;
}
div#mc-board-view div#bo-vw-t span.bo-vw-t-ca::after {
	content: " :: ";
}
div#mc-board-view div#bo-vw-i {
	display: grid;
	grid-template-columns: auto max-content;
	grid-gap: 1rem; gap: 1rem;
	font-size: 0.9rem;
	border-radius: 6px 6px 0 0;
	border-top: 2px solid rgb(200 200 200);
	background-color: rgb(255 255 255);
	padding: 0.5rem 1rem;
	color: rgb(90 90 90);
}
div#mc-board-view div#bo-vw-i div.bo-vw-i-btns {
	justify-self: end;
}

/* [3-2] 글 내용 */
div#mc-board-view div#bo-vw-c {
	display: block;
	padding: 0.5rem 1rem 1rem 1rem;
	border-radius: 0 0 6px 6px;
	background-color: rgb(255 255 255);
}
div#mc-board-view div#bo-vw-c .video-wrap { /* php fn: embedYT() */
	margin-bottom: 1rem;
}
div#mc-board-view div#bo-vw-c div#bo-vw-c-img img {
	border-radius: 6px; }

/* [3-3] 첨부파일, 관련링크 */
div#bo-vw-c-at {
	margin-top: 2rem; }
div#bo-vw-c-at div.bo-vw-c-at-i {
	display: flex;
	font-size: 0.9rem;
	letter-spacing: -0.03em;
	color: rgb(50 50 50);
	line-height: 140%;
	margin-top: 0.5rem; }

div#bo-vw-c-at div.bo-vw-c-at-i > div:nth-of-type(1) {
	flex-shrink: 0;
	width: 5.5rem;
	font-weight: 500;
	border-right: 2px solid rgb(100 100 100); }
div#bo-vw-c-at div.bo-vw-c-at-i > div:nth-of-type(2) {
	flex-grow: 1;
	margin-left: 0.5rem; }
div#bo-vw-c-at div.bo-vw-c-at-i a {
	padding: 0.1rem 0.2rem;
	border-radius: 0.25rem;
	color: rgb(90 90 90);
	font-weight: 500; }
div#bo-vw-c-at div.bo-vw-c-at-i a:hover {
	background-color: rgb(245 245 245);
	color: rgb(0 0 0); }

div#mc-board-view div#bo-vw-c div#bo-vw-c-sig {
	border: 1px solid rgb(200 200 200);
	padding: 1rem;
	margin-top: 1rem; }

/* [3-4] 추천, 비추천, 스크랩 */
div#mc-board-view div#bo-vw-c div#bo-vw-c-act {
	margin-top: 1rem;
	display: flex;
	justify-content: center;
}
div#mc-board-view div#bo-vw-c div#bo-vw-c-act a {
	padding: 0.5rem;
	border: 1px solid rgb(200 200 200);
	border-right-width: 0;
	background-color: rgb(255 255 255);
}
div#mc-board-view div#bo-vw-c div#bo-vw-c-act a:first-of-type {
	border-radius: 6px 0 0 6px;
}
div#mc-board-view div#bo-vw-c div#bo-vw-c-act a:last-of-type {
	border-radius: 0 6px 6px 0;
	border-right-width: 1px;
}
div#mc-board-view div#bo-vw-c div#bo-vw-c-act a:hover {
	color: rgb(255 255 255);
	border-color: rgb(from var(--accent-color) calc(r / 2) calc(g / 2) calc(b / 2));
	background-color: var(--accent-color);
}

/* [3-5] 이전 글 - 다음 글 */
div#mc-board-view div#bo-vw-pn {
	width: 100%;
	display: grid;
	grid-template-columns: 1fr 1fr;
	margin-top: 0.5rem;
	cursor: default;
	grid-gap: 0.5rem; gap: 0.5rem; }
div#mc-board-view div#bo-vw-pn div.bo-vw-pn-btn {
	width: 100%; position: relative;
	display: grid; align-items: center;
	padding: 0.5rem; line-height: 140%;
	border-radius: 6px;
	border: 1px solid rgb(255 255 255); }
div#mc-board-view div#bo-vw-pn div.bo-vw-pn-btn:nth-of-type(1) {
	grid-template-columns: 2rem 1fr; text-align: left; }
div#mc-board-view div#bo-vw-pn div.bo-vw-pn-btn:nth-of-type(2) {
	grid-template-columns: 1fr 2rem; text-align: right; }
div#mc-board-view div#bo-vw-pn div.bo-vw-pn-btn:hover {
	background-color: rgb(255 255 245); border-color: rgb(220 220 220); }
div#mc-board-view div#bo-vw-pn div.bo-vw-pn-btn a::before {
	content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; }
div#mc-board-view div#bo-vw-pn div.bo-vw-pn-d {
	color: var(--accent-color); }
div#mc-board-view div#bo-vw-pn div.bo-vw-pn-t { }
div#mc-board-view div#bo-vw-pn div.bo-vw-pn-t .bo-vw-pn-tt {
	font-weight: 500; }
div#mc-board-view div#bo-vw-pn div.bo-vw-pn-t .bo-vw-pn-td {
	padding-right: 0.2rem;
	color: rgb(100 100 100); font-style: italic; font-size: 0.9rem; }
div#mc-board-view div#bo-vw-pn div.bo-vw-pn-t .bo-vw-pn-tn {
	padding-right: 0.2rem;
	color: rgb(100 100 100); font-style: italic; font-size: 1rem; }

/* [3-6] 댓글 */
div#mc-board-view div#bo-vw-cmt {
	padding: 1rem; }
div#bo-vw-cmt div.cmt-v-none {
	position: relative;
	background-color: rgb(255 255 255);
	padding: 0.5rem;
	border-radius: 4px;
	text-align: center; }
div#bo-vw-cmt div.cmt-v {
	position: relative;
	background-color: rgb(255,255,255);
	margin-bottom: 0.5rem;
	padding: 0.5rem;
	border-radius: 0 4px 4px 4px; }
div#bo-vw-cmt div.cmt-v.cmt-v-r::before {
	content: "";
	display: inline-block;
	position: absolute;
	left: -1.1rem; top: -0.4rem;
	width: 1rem; height: 1.5rem;
	border-style: solid;
	border-width: 0 0 2px 2px;
	border-color: rgb(220 220 220);
	border-radius: 0 0 0 4px; }
div#bo-vw-cmt div.cmt-v div.cmt-v-c {
	padding: 0 0.5rem 0.5rem 0.3rem;
	position: relative; }
div#bo-vw-cmt div.cmt-v div.cmt-v-i {
	display: inline-block;
	line-height: 100%;
	background-color: rgb(245 245 245);
	padding: 0.3rem 0.5rem;
	border-radius: 4px;
	font-size: 0.9rem;
	color: rgb(90 90 90); }
div#bo-vw-cmt div.cmt-v div.cmt-v-i.cmt-v-hl {
	background-color: rgb(255 240 230); }
div#bo-vw-cmt div.cmt-v div.cmt-v-btn {
	display: inline-block; }
#bo-vw-cmt .cmt-v-c a.s_cmt::before { /* 비밀 댓글 */
	content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; }

div#bo-vw-cmt div#cmt-w-divider {
	width: 30%; height: 0;
	position: relative;
	left: 35%;
	border-bottom: 2px dotted rgb(150 150 150);
	margin: 0.5rem 0; }
div#bo-vw-cmt div#cmt-wr {
	background-color: rgb(255,255,255);
	padding: 0.5rem;
	border-radius: 4px;
	line-height: 100%;
	outline: 2px solid rgb(245 245 245); }
div#bo-vw-cmt div#cmt-wr div#cmt-wr-i {
	margin-bottom: 0.5rem; }
div#bo-vw-cmt div#cmt-wr div#cmt-wr-c {
	margin-bottom: 0.5rem; }
div#bo-vw-cmt div#cmt-wr div#cmt-wr-c textarea {
	vertical-align: top;
	line-height: 160%;
	width: 100%;
	height: 8rem;
	padding: 0.5rem;
	resize: none;
	border-bottom-right-radius: 0;
	border-bottom-left-radius: 0; }
div#bo-vw-cmt div#cmt-wr div#cmt-wr-c-i {
	padding: 0.2rem 0.5rem;
	text-align: right;
	font-size: 0.9rem; color: rgb(100 100 100);
	border: 1px solid rgb(220 220 220);
	border-top: 0;
	border-bottom-right-radius: 4px;
	border-bottom-left-radius: 4px;
	background-color: rgb(245 245 245); }
div#bo-vw-cmt div#cmt-wr div#cmt-wr-b {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
}

/***** [4] 글쓰기(수정) *****/
#mc-board-write {
	margin-top: 1rem;
	border-radius: 6px;
	background-color: rgb(245,245,245);
	border-bottom: 2px solid rgb(200,200,200);
}

#mc-board-write textarea{ height:300px }
#mc-board-write textarea.plain-editor {
	vertical-align: top;
	line-height: 160%;
	padding: 0.5rem;
	resize: vertical;
	border-bottom-right-radius: 0;
	border-bottom-left-radius: 0;
}
#mc-board-write .wr-i {
	display: grid;
	grid-template-columns: 6.5rem auto;
	grid-gap: 0.3rem; gap: 0.3rem;
	align-items: center;
	padding: 0.8rem 1rem;
}
#mc-board-write .wr-c {
	border-radius: 6px;
	border-top: 2px solid rgb(200,200,200);
	background-color: rgb(255,255,255);
	padding: 1rem;
	line-height: 100%;
}
#mc-board-write .wr-c-i {
	padding: 0.2rem 0.5rem;
	text-align: right;
	font-size: 0.9rem; color: rgb(100 100 100);
	border: 1px solid rgb(220 220 220);
	border-top: 0;
	border-bottom-right-radius: 4px;
	border-bottom-left-radius: 4px;
	background-color: rgb(245 245 245);
}
.wr-b {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	padding: 0.5rem; }

/* [4-2] 자동저장 */
#autosave_wrapper {
	display: inline-block;
	position: relative }
#autosave_pop {
	display: none;
	position: absolute !important; top: 37px; right: 0; z-index: 10;
	border: 1px solid rgb(50 50 50); border-radius: 4px;
	padding: 0.5rem;
	background: rgb(255 255 255);
	-webkit-box-shadow:2px 2px 3px 0px rgba(0,0,0,0.2);
	-moz-box-shadow:2px 2px 3px 0px rgba(0,0,0,0.2);
	box-shadow:2px 2px 3px 0px rgba(0,0,0,0.2) }
#autosave_pop::before {
	content: ""; position: absolute; top: -8px; right: 50px; width: 0; height: 0;
	border-style: solid; border-width: 0 6px 8px 6px;
	border-color: transparent transparent rgb(50 50 50) transparent }
#autosave_pop::after {
	content: ""; position: absolute; top: -6px; right: 50px; width: 0; height: 0;
	border-style: solid; border-width:0 6px 8px 6px;
	border-color: transparent transparent rgb(255 255 255) transparent }
html.no-overflowscrolling #autosave_pop {
	/* overflow 미지원 기기 대응 */
	height: auto; max-height: 10000px !important } 
#autosave_pop ul {
	width: 400px; height: 150px;
	list-style: none;
	overflow-y: scroll;
	margin-bottom: 0.5rem	}
#autosave_pop li {
	padding: 0.3rem 0.5rem;
	border-bottom: 1px solid rgb(150 150 150) }
#autosave_pop li:hover {
	background-color: rgb(245 245 245);
}
#autosave_pop li:last-of-type {border-bottom:0}
#autosave_pop li::after {display:block;visibility:hidden;clear:both;content:""}
#autosave_pop li a {display:block;float:left;}
#autosave_pop span {display:block;float:right;font-size:0.9rem;color:rgb(100 100 100)}
#autosave_pop div {
	text-align: center }
button.autosave_del {
	display: inline-block;
	margin-left: 0.5rem;
	
	border-radius: 4px;
	border: 1px solid rgb( 150 0 20 / 0.5 );
	border-bottom-width: 2px;
	padding: 0.3rem 0.5rem;
	
	color: rgb( 150 0 20 );
	font-size: 0.9rem;
	font-weight: 500;
	line-height: 100%;
	
	background-clip: padding-box;
	background-color: rgb( 255 255 255 );
	cursor: pointer }
button.autosave_del:hover {
	border-color: rgb( 150 0 20 / 1 ) }

/***** 기본 style 수정 *****/
#mc-board-write .btn_cke_sc {
	height: auto;
	padding: 0.3rem 0.7rem;
	line-height: 100%;
}
#mc-board-write .btn_cke_sc_close {
	display: none;
}
#bo-vw-c img {
	padding: 1rem;
	margin-bottom: 2rem;
	box-shadow: 0px 1px 3px 0px rgb(0 0 0 / 0.3);
	border-radius: 6px;
}