@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Abel&display=swap');
@font-face {
    font-family: 'ChosunGu';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-04@1.0/ChosunGu.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Chosunilbo_myungjo';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_one@1.0/Chosunilbo_myungjo.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'NanumSquareNeo-Variable';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_11-01@1.0/NanumSquareNeo-Variable.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Somi';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/naverfont_10@1.0/Somi.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Pretendard-Regular';
    src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}

:root {
	/*폰트*/
	--head-text: 'Abel', sans-serif; /*항목*/
	--title-text:'NanumSquareNeo-Variable'; /*시나리오명*/
	--basic-text: 'ChosunGu'; /*기본*/
	--phrase-text:'Chosunilbo_myungjo'; 
	--ruby-text:'Somi'; /*루비문자*/
	
	/*레이아웃*/
	--phrase-color: #5252526d;
	--line-color: #333333; /*영수증 선*/
	--text-color: #333333; /*기본 텍스트*/
	--link-color: #333333; /*링크, 수정,삭제 버튼*/
	--back-color: #ffffff; /*배경색*/
	--ruby-color: rgba(0, 0, 0, 0.233); /*코드네임*/
	--truby-color: #96141485; /*캠페인 명*/


	/*입력폼*/
	--plho-text: 'Pretendard-Regular'; /*입력폼 설명*/
	--plho-color: #adadad; /*입력폼 설명 폰트색*/
	--spo-color: #333333; /*스포방지 체크박스 폰트색*/	
	--border-color: #C6BCC1; /*입력폼 선 색*/

	--title-shadow: rgba(0, 0, 0, 0.222); /*시나리오명 폰트 그림자*/
	--receipt-shadow: #cfcfcf99; /*영수증 그림자*/
}

/** Notice Box **/
.board-notice	{ max-width: 430px; padding: 20px; margin: 20px auto 30px; text-align: center;} 

#page_board_content input, #page_board_content select, #page_board_content .ui-btn, #page_board_content .ui-btn.point,#page_board_content .pg_wrap .pg_page {height:24px;line-height:22px;}
#page_board_content .pg_wrap .pg_page {border: 0 none; background:none; color:inherit;padding:0 2px; font-size:12px;}
#page_board_content .pg_wrap .pg_page:before {font-size:12px;}

.ui-text-area{ position:relative; padding-right:60px; box-sizing:border-box;}
.ui-text-area button {position:absolute;right:0;top:0;width:60px;}

.ui-option					{ clear: both; }

 .adm-box { margin-bottom:5px;text-align:right;margin-right:5px;}

.ui-top {position:relative;padding:0 5px; box-sizing:border-box;}
.ui-top .search-box	{ display:inline-block;position:relative;width:40%;margin-bottom: 5px; padding-right:24px;vertical-align:top;text-align:right;box-sizing:border-box;} 
.ui-top .search-box form {display:inline-block;}
.ui-top .search-box input {width:95%;}
.ui-top .search-box button.ui-btn {width:24px;height:24px;line-height:22px;padding:0;position:absolute;right:0;top:0;}

.ui-top .ui-write-area {display:inline-block;margin-bottom: 5px;  width:60%;vertical-align:top;}

.ui-write-box				{ position:relative; padding-left:24px; padding-right:0; } 
.ui-write-box p				{ position:relative; height:24px;width:0;overflow:hidden; box-sizing:border-box;}

.ui-write-box.update p, .ui-write-box p.on {width:100%;height:auto; padding-right:60px;}
.ui-write-box .write_open.ui-btn.point	{position:absolute;left:0;top:0;display:inline-block;width:24px;height:24px;line-height:22px;padding:0;margin:0;}
.ui-write-box.update .write_open.ui-btn.point {display:none;}

.ui-text-area.ui-write-box button		{ position:absolute;width:60px;top:0;right:0;}   

.ui-text-area.ui-write-box.update {padding-left:0;}
.ui-text-area.ui-write-box.update p{ position:relative; padding-right:120px; }
.ui-text-area.ui-write-box.update p button {position:absolute;right:60px;top:1px;width:60px;}
.ui-text-area.ui-write-box.update p a {position:absolute;right:0;top:1px;width:60px;}

.ui-memo-list					{ position: relative; clear: both;  } 
.ui-memo-list hr.line			{ margin:0; }
.ui-memo-list li:last-child hr.line	{display:none;}
.ui-memo-list li li:last-child hr.line	{display:block; }
.ui-memo-list li					{ position: relative; } 
.ui-memo-list li strong		{ font-weight:normal; }
.ui-memo-list li em			{ font-style: normal;display:inline-block;text-align:center; width:14px;} 
.ui-memo-list li .date	{ display:inline-block;vertical-align:middle;width:50px;text-align:center; } 

#page_board_content .ui-memo-list li .write_open.secret.ui-btn {margin:2px 5px; height:20px;line-height:18px;padding:0 8px;}
.ui-memo-list li .pass_in{display:inline-block;vertical-align:middle;width:0;white-space:nowrap;overflow:hidden;}
.ui-memo-list li .pass_in input{border:0 none;width:100px;}
#page_board_content .ui-memo-list li .pass_in button {padding:0 5px;width:50px;height:20px;line-height:18px;margin:2px;}
.ui-memo-list li .pass_in.on {width:160px;}

.content-area	{position:relative;padding-right:50px;line-height:20px; }
.content-area .control {display:inline-block; position:absolute; right:0;top:0;font-size:12px;}
.content-area .control a{display:inline-block;width:15px;text-align:center;vertical-align:middle; }

.ui-memo-list .no-data			{ text-align: center; line-height: 100px; }
.bo_fx {padding-top:5px;}
.bo_fx .chkall {float:left;} 

.content-area .con {word-break:break-all;}

/* 리플 색상 */
.comment-content span {color:#aaa;}

@media all and (max-width:480px) {
	.content-area {padding-right:0;}
	.content-area .con {display:block;padding-left:18px;}
}


@media all and (max-width:350px) {
	.ui-top .search-box,.ui-top .ui-write-area {width:100%;padding-top:30px;}
	.ui-top .search-box  {position:absolute;top:0;right:0;height:24px;width:100%;}
	.ui-top .search-box form{ width:100%;}
	.ui-top .search-box input {position:absolute;top:0;left:5px;right:48px;}
	.ui-top .search-box a{right:5px;}
	#wr_name,#wr_password		{  width:100%;}
}

/*DX3*/
#sortable { position: relative;}
.ui-memo-list{
	width: 100%;
    margin-left: auto;
    margin-right: auto;
}

@media only screen and (min-width:750px){
	.ui-memo-list{
		width: 70% ; /*영수증 가로 길이*/
		margin-left: auto;
		margin-right: auto;
	}
} 

td.control{
	font-size:15px !important;
	letter-spacing: 3px !important;
	opacity:0.6 !important;
} 

.fx-control {margin:5px 0;display:flex;flex-wrap:wrap;justify-content:space-between;}

.other-site-link		{ font-weight: bold; }
.other-site-link:before	{ content: "\f0c1"; font-family: 'fontawesome'; padding-right: 2px; }
.link-box		{ display: block; padding-bottom: 10px; }

#page_board_content .sortable, #page_board_content .mod .unsortable, #page_board_content .mod .done .sortable {display:none;}
#page_board_content .mod .sortable, #page_board_content .unsortable  {display:inline-block;}
#page_board_content .mod .done {opacity:0.6;} 
.ui-sortable-handle {cursor:pointer;}


.content-area .mng {position:relative;}
.content-area .btn-ctrl{display:inline-block;margin-bottom:1px;width:15px;text-align:center;font-family:'dotum',sans-serif;}
.content-area .chk_id {margin-bottom:1px;width:12px;height:12px;line-height:10px;border-radius:2px;text-align:center;vertical-align: middle;}
li:not(.done) .content-area .chk_id {background:none;}
.over .content-area .chk_id {cursor:default;}
.content-area .tdate { display:inline-block;vertical-align:middle;padding:0 5px;text-align:center; opacity:0.7;}

table { border-spacing:0px; background: rgb(255, 255, 255) url("./img/paper.png") repeat scroll 0px 0px / auto padding-box border-box;}

.tbl_wrap table	{ width: 100%; position:relative; line-height:20px; 
	border-bottom: 1px dashed var(--line-color);}

.tbl_head01 thead	{ }
.tbl_head01 thead th	{
	font-weight: bold;
	padding: 7px 3px;
	border-top: 1px solid var(--line-color);
	border-bottom: 1px dashed var(--line-color);
	border-left-width: 0;
	border-right-width: 0;
	font-size: 14px;
	color: var(--text-color);
	font-family: var(--head-text);
	text-align: center;
}
.tbl_head01 thead th:first-child	{ border-left-width: 0px; }
.tbl_head01 thead th:last-child		{ border-right-width: 0px; }

.tbl_head01 .bo-right		{ border-right-width: 0px !important; }
.tbl_head01 .bo-left		{ border-left-width: 0px !important; }
.tbl_head01 .bo-top		{ border-top-width: 1px !important; }
.tbl_head01 .bo-bottom	{ border-bottom-width: 1px !important; border-bottom-style: dashed !important;}

.tbl_head01 .bo-no-right		{ border-right-width: 0px !important; }
.tbl_head01 .bo-no-left		{ border-left-width: 0px !important; }
.tbl_head01 .bo-no-top		{ border-top-width: 0px !important; }
.tbl_head01 .bo-no-bottom		{ border-bottom-width: 0px !important; }




.tbl_head01  tbody td	{
	color: var(--text-color);
	font-weight: normal;
	padding: 5px 3px;
	font-family: var(--basic-text); font-size: 12px; 
	text-align:center;
}

.stitle		{ font-family: var(--title-text); font-weight: normal; text-align: left !important; } 
.sname		{ text-align: center !important; } 
.sline		{ white-space: pre-line;} 
.slink   	{ font-size:10px; opacity: 0.5; }
a:link {color: var(--text-color) !important;} 
a:visited {color: var(--link-color) !important;}  

.dx3logo{
	display:block;
	width:100%;
	margin:auto;
	padding-bottom:20px;
	background: var(--back-color) url("./img/paper.png") repeat scroll 0px 0px / auto padding-box border-box;
	text-align:center;
}
.dx3phrase{
	display:block;
	width:100%;
	margin:auto;
	padding-bottom:20px;
	background: var(--back-color) url("./img/paper.png") repeat scroll 0px 0px / auto padding-box border-box;
	font-family: var(--phrase-text);
	font-style: italic;
	text-align:center;
	color: var(--phrase-color);
	font-size:12px;
	font-weight:bold;
}


.dx3bottom{
	display:block;
	width:100%;
	padding-bottom:30px;
	padding-top:20px;
	background: var(--back-color) url("./img/paper.png") repeat scroll 0px 0px / auto padding-box border-box;
	font-family: var(--basic-text);
	text-align:center;
	color: var(--text-color);
	font-size:12px;
	font-weight:normal;
	margin:auto;
	line-height:180%;
	-webkit-mask-image: linear-gradient(0deg, transparent 10px, white 10px), linear-gradient(-135deg, white 5px, transparent 5px), linear-gradient(135deg, white 5px, transparent 5px);
    -webkit-mask-position: left bottom;
    -webkit-mask-repeat: repeat-x;
    -webkit-mask-size: 100% 100%, 10px 10px, 10px 10px;
}


span.exptotal{
	font-family: var(--basic-text) !important;
	font-size:25px !important;
	color: #333333;
	line-height:180%;
	text-align:right !important;
	margin-right:20px;
}

.receipt{
	filter: drop-shadow(2px 3px 10px var(--receipt-shadow));
} 


/*루비문자*/
.codename {
	display: inline-block;
	position:relative;
	color: var(--text-color);
	line-height: 1.3em;
	margin-top: 0.2em;
	letter-spacing:-1px;
	margin-bottom: 0.2em;
	width:100%;
	text-align: center;
   }
  
   .codename:after {
	content:attr(data-text);
	font-size: 15px;
	color: var(--ruby-color);
	position:absolute;
	left:0;
	right: 0;
	white-space: nowrap;
	margin-top: -9px !important;
	font-family:var(--ruby-text);
   }
 
 .title {
	display: inline-block;
	position:relative;
	color: var(--text-color);
	line-height: 1.3em;
	margin-top: 0.2em;
	letter-spacing:-1px;
	margin-bottom: 0.2em;
	filter: drop-shadow(0px 0px 3px var(--title-shadow));
   }
   .title:after {
	content:attr(data-text);
	font-size: 15px;
	color: var( --truby-color);
	position:absolute;
	left:0;
	width: max-content;
	top: -11px;
	font-family:var(--ruby-text);
	font-weight:normal !important; 
   }


/*입력창 레이아웃*/
#page_board_content input { margin: 1px 0; }
textarea {
    box-sizing: border-box;
    border-width: 1px;
    border-style: groove;
    border-radius: 5px;
    padding: 0 10px;
    max-width: 100%;
    min-height: 15px !important;
    font-size: 12px;
	color:var(--text-color) !important;
	font-family: var(--basic-text);
	background-color: var(--back-color) !important;
	border-color: var(--border-color) ;
}
.form-input, input[type="text"], input[type="password"], input[type="file"], select {
    box-sizing: border-box;
    border-width: 1px;
    border-style: groove;
    border-radius: 5px;
    padding: 0 10px;
    max-width: 100%;
    font-size: 12px !important;
	color:var(--text-color) !important;
    font-family: var(--basic-text) !important;
	background-color: var(--back-color) !important;
	border-color: var(--border-color) ;
}
input[type="date"] {
	box-sizing: border-box;
	color: var(--plho-color) !important;
	font-family: var(--plho-text);
	border-width: 1px;
	border-style: groove;
	border-radius: 5px;
	max-width: 100%;
	font-size: 11px;
	font-style: italic;
	padding: 0 5px;
	border-color: var(--border-color) ;
	height: 24px;
    line-height: 22px;
  }
  input[type="number"]  {
	box-sizing: border-box;
	color: var(--plho-color) !important;
	font-family: var(--plho-text);
	border-width: 1px;
	border-style: groove;
	border-radius: 5px;
	max-width: 100%;
	font-size: 11px;
	font-style: italic;
	padding: 0 5px;
	border-color: var(--border-color) ;
	height: 24px;
	width: 70px ;
    line-height: 22px;
  }
input::placeholder  {
	color: var(--plho-color);
	font-family: var(--plho-text);
	font-size: 11px;
	font-style: italic;
	padding: 0 5px;
	line-height: 22px;
  }
textarea::placeholder {
	color: var(--plho-color);
	font-family: var(--plho-text);
	font-size: 11px;
	font-style: italic;
	padding: 0 5px;
  }
label {    font-size: 11px !important;
	color:var(--spo-color) !important;
    font-family: var(--basic-text) !important;
	margin-left: 3px;}


/*영수증 하단 합계와 카운트*/

.tbl_wrap2 table	{ width: 55%; position:relative; line-height:20px; border-bottom: 1px dashed var(--line-color); margin-bottom: 20px;}

.tbl_head02 thead	{ }
.tbl_head02 thead th	{
	font-weight: normal;
	padding: 5px 1px;
	border-top: 1px dashed var(--line-color);
	border-bottom: 1px dashed var(--line-color);
	border-left-width: 0;
	border-right-width: 0;
	font-size: 12px;
	font-family: var(--head-text);
	text-align: center;
}
.tbl_head02  tbody td	{
	color: var(--text-color);
	font-weight: normal;
	padding: 5px 1px;
	font-family: var(--head-text); font-size: 12px; 
	text-align:center;
}
.bt_tb {font-weight: bold;}


/* 스포일러 방지*/
.spoiler { 	filter: blur(4px); transition:filter .2s;    }
.spoiler-off{ filter:blur(0px) !important; }