@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css");

*{
	font-family:'Pretendard Variable', sans-serif;
	-o-box-sizing:border-box;
	-ms-box-sizing:border-box;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
}

:root{
	/*	COLOR		*/
	--jb-main:#F48C36;
	--jb-blue:#3154A3;
	--jb-white:#FFF;
	

	/*	TEXT	*/
	--jb-color-bright:#E1E5EA;
	--jb-color-pale:#C2CAD6;
	--jb-color-hazy:#A4B0C1;
	--jb-color-light:#7689A2;
	--jb-color-main:#5D6F89;
	--jb-color-bold:#333D4B;
	--jb-color-black:#15191E;
	--jb-color-remark:#6C9CE0;
	--jb-color-warning:#FF4713;

	/*	BACKGROUND	*/
	--jb-bg-scroll: #F9F9FB;
	--jb-bg-scroll-thumb: #C6CBD2;
	
	--jb-bg-white:#FFF;
	--jb-bg-hazy:#F4F5F7;
	--jb-bg-button:#F0F2F4;
	--jb-bg-button-hover:#D3D7DF;
	--jb-bg-main:#E1E4EA;
	--jb-bg-bold:#C4C9D4;
	--jb-bg-hover:#A6AEBF;

	--jb-bg-foot:#F9F9FB;
	--jb-bg-form:#E6F9FF;
	--jb-bg-form-hover:#F7FAEB;

	--jb-bg-dark:#2F3329;
	--jb-bg-black:#1A1C17;

	/*	BORDER	*/
	--jb-border-list:#E0E6EB;
	--jb-border-form:#C1CDD7;
	--jb-border-form-hover:#839BAF;
	--jb-border-button:#E2E6E9;

	
	/*	RADIUS	*/
	--jb-radius-page: 1.5rem;
	--jb-radius-window: 1rem;
	--jb-radius-button: 0.75rem;
	--jb-radius-form: 0.5rem;
	--jb-radius-inline: 0.25rem;

	/*	BUTTON	*/
}

html{
	font-size: 16px;
}

body{
	font-size: 0.875rem;
	color: var(--jb-color-main);
	letter-spacing: -0.05em;
	word-spacing: 0.1em;
}

@media only screen and (max-width: 767px) {
	/* 모바일 가로	*/
	body{
		font-size:	0.8125rem;
	}
}

table{
	width:100%;
	border-spacing:0px;
	padding:0px;
	border-collapse:collapse;
	table-layout:fixed;
}

a{
	display:inline-block;
	text-decoration:none;
	color:inherit;
}

.material-symbols-rounded,
.material-icons,
.material-icons-round, 
.material-icons-outlined{
	vertical-align:middle;
}

ul, dl, ol, li, dd, dt{
	list-style: none;
}

/******************************************************************
	SCROLL
******************************************************************/
body::-webkit-scrollbar { width: 12px;}
body::-webkit-scrollbar-track { background-color: var(--jb-bg-scroll); }
body::-webkit-scrollbar-thumb { background: var(--jb-bg-scroll-thumb); border-radius:6px;}
body::-webkit-scrollbar-thumb:hover { background: var(--jb-bg-hover); }
body::-webkit-scrollbar-thumb:active { background: var(--jb-bg-hover); }
body::-webkit-scrollbar-button { display: none; }

.term_box::-webkit-scrollbar { width: 6px;}
.term_box::-webkit-scrollbar-track { background-color: var(--jb-bg-scroll); }
.term_box::-webkit-scrollbar-thumb { background: var(--jb-bg-scroll-thumb); border-radius:3px;}
.term_box::-webkit-scrollbar-thumb:hover { background:  var(--jb-bg-hover); }
.term_box::-webkit-scrollbar-thumb:active { background: var(--jb-bg-hover); }
.term_box::-webkit-scrollbar-button { display: none; }


/************************************************
	Material Symbols
************************************************/
.material-symbols-rounded {
	font-variation-settings:
	'FILL' 0,
	'wght' 200,
	'GRAD' 0,
	'opsz' 24
}


/************************************************
	Material Symbols
************************************************/
.swal_title_wrapper{
	display:flex;
	align-items: center;
	column-gap: 6px;
}
.swal_title_wrapper .material_icon{
	font-size:1.5rem;
}

.swal_title_wrapper .text{
	font-size:1.25rem;
}

#swal2-content{
    text-align: center;
    font-size: 1rem;
    color: var(--jb-color-bold);
    font-weight: 400;
}

/************************************************
	FORM
************************************************/
.input_form{
	width:100%;
	height:52px;
	background-color:#0c1427;
	border:2px SOLID #0c1427;
	border-radius:var(--jb-radius-form);
	line-height:40px;
	padding:4px 12px;
	color:#FFF;

}

.textarea_form{
	width:100%;
	background-color:#0c1427;
	border:2px SOLID #0c1427;
	border-radius:var(--jb-radius-form);
	line-height:160%;
	padding:12px;
	color:#FFF;
	overflow:auto
}

.input_form:focus,
.textarea_form:focus{
	border:2px SOLID #FFF;
}

.textarea_form::-webkit-scrollbar { width: 6px;}
.textarea_form::-webkit-scrollbar-track { background-color: var(--jb-bg-scroll); }
.textarea_form::-webkit-scrollbar-thumb { background: var(--jb-bg-scroll-thumb); border-radius:3px;}
.textarea_form::-webkit-scrollbar-thumb:hover { background:  var(--jb-bg-hover); }
.textarea_form::-webkit-scrollbar-thumb:active { background: var(--jb-bg-hover); }
.textarea_form::-webkit-scrollbar-button { display: none; }


.form_list li:not(:first-child){
	padding-top:48px;
}

.form_list .label{
	display:flex;
	align-items: center;
	column-gap: 6px;
	padding-left:6px;
	padding-bottom:6px;
}

.form_list .label .text{
	font-weight:500;
	color:var(--jb-white);
}

.form_list .label .reguired .icon{
	font-size:1rem;
	line-height:100%;
	color:var(--jb-main);
}

/************************************************
	BUTTON
************************************************/
button:not([disabled]){
	cursor:pointer;
}

.form_button{
	height:52px;
	border:none;
	border-radius:var(--jb-radius-form);
}

.submit_button{
	font-size:1rem;
	font-weight:500;
	color:var(--jb-white);
	background-color:var(--jb-main);
	padding-left:24px;
	padding-right:24px;
}

.submit_button:focus,
.submit_button:active{
	background-color:var(--jb-main);
}

.submit_block{
	display:flex;
	justify-content: center;
	column-gap: 12px;
	padding-top:48px;
}


/************************************************
	DOM
************************************************/
.warning_color{
	color:var(--jb-color-warning);
}

.confirm_color{
	color:var(--jb-blue);
}


/************************************************
	BOARD
************************************************/
.board_wrapper{
	max-width:1048px;
	margin-left: auto;
	margin-right:auto;
	padding:120px 60px;	
}

.board_grid{
	border-top: 2px SOLID rgba(255,255,255,0.6);
	border-bottom: 1px SOLID rgba(255,255,255,0.6)
}

.board_grid .announce_row{
	display:flex;
	flex-direction: column;
	align-items: center;
	padding: 60px 0;
}

.board_grid .loading{
	text-align:center;
	padding:60px 0;
	background-image:url('/assets/images/tube-spinner.svg');
	background-repeat:no-repeat;
	background-position:center center;
	background-size:contain;
}

.board_grid .loading:after{
	content:'Loading...';
	font-size:0.8125rem;
	font-weight:600;
	color:var(--jb-main);
}

.board_grid .announce_row .icon .material_icons{
	font-size:4rem;
	color:rgba(255,255,255,0.2);
}

.board_grid .announce_row .message{
	font-size:1rem;
	color:rgba(255,255,255,0.6);
	padding-top:12px;
}

.board_grid .article_row{
	padding-top:12px;
	padding-bottom:12px;
}

.board_grid .article_row .article_summary{
	display:grid;
	align-items: center;
	padding-left:12px;
	padding-right:12px;
}

.board_grid .article_row .article_detail{
	border-radius:var(--jb-radius-form);
	border: 1px SOLID rgba(255,255,255,0.1);
	padding:24px;
	margin-top:6px;
}

.board_grid .article_row:not(:first-child){
	border-top: 1px SOLID rgba(255,255,255,0.2);
}

.board_grid .grid_button button{
	cursor:pointer;
	width:52px;
	height:52px;
	color:rgba(255,255,255,0.6);
	border-radius:var(--jb-radius-form);
	border: 1px SOLID rgba(255,255,255,0.1);
	background-color:transparent;
}

.board_grid .grid_button button:hover{
	color:rgba(255,255,255,1);
	border: 1px SOLID rgba(255,255,255,1);
}

.board_grid .grid_button button .material_icons{
	font-size:2rem;
}

.board_grid .article_summary .label:not(.subject),
.board_grid .article_row .article_detail{
	color:rgba(255,255,255,0.7);
}

.board_grid .article_summary .subject{
	color:rgba(255,255,255,0.8);
	height:52px;
}

#app_insight .board_grid .article_summary{
	grid-template-columns: auto 100px 60px;
}


/*@media only screen and (max-device-width: 767px) {*/
@media only screen and (max-width: 767px) {
	.board_wrapper{
		width:100%;
		max-width:700px;
		padding:60px 0px;	
	}
}