@charset "utf-8";

:root {
	--point : #000; /*포인트 컬러*/
	--white : #fff; /*포인트 컬러와 대비되게 설정 추천*/
}

#main_body {text-align:left;}
.main_div {
	display:block;
	position: relative;
	max-width:450px;
	width:90%;
	margin:10px auto;
	padding:20px 10px;
}

.txt-wrapper {
	max-width:650px; 
	vertical-align: middle; 
	margin-inline: auto;
	padding-top: 30px;
	font-size: 13px; 
}

.card {margin-bottom: 30px; }
.card-last {margin-bottom: 0px; }

.card-title {
    display: inline-block;
    position: relative;
	font-size: 15px; 
	color: var(--white);
    background: var(--point);
    padding: 1px 5px;
	border-radius: 5px;
}

.card-lists { 
	display:block; 
	box-sizing: border-box;
	margin: 10px 0;
	padding: 10px;
	background-color: var(--white);
	border: 1px solid var(--white);
	border-radius: 5px;
    box-shadow: 0px 0px 4px rgba(0,0,0,0.1);
}

.card-lists > li {
	padding-top: 3px;
	padding-bottom: 3px;
}

/*주석*/
.pre {color: rgba(0, 0, 0, 0.6); font-size: 12px;}


/*복사 버튼*/
.copy-btn {
	padding: 2px 4px;
	background-color: var(--white);
	border: 1px solid var(--point);
	color: var(--point);
	cursor: pointer;
	border-radius: 15px;
	transition: background-color 0.3s;
	text-transform: uppercase;
	font-size: 10px;
	margin-right: 5px;
}

.copy-btn:active {
	background-color: #5af4b4;
}