/**
* 이미지 경로 : /img/inc/...
*
*/

  /* input 전용: btn 과 높이 맞춤 */
  input.btn {
    padding:12px 16px 11px;
  }




/* 버튼 */
.exam-wrap { display:flex; align-items:flex-start; gap:16px; }
/*.btn { display:inline-flex; justify-content:center; align-items:center; padding:11px 16px; border-radius:8px; background:var(--primary); color:var(--white); transition:0.3s; box-sizing: border-box; }*/

.btn,
a.btn,
button.btn,
label.btn,
input.btn { all: unset; display: inline-flex; justify-content: center; align-items: center; padding: 11px 16px; background: var(--primary); color: var(--white); line-height: 1.4; border-radius: 8px; text-align: center;
  cursor: pointer;
  box-sizing: border-box;
  white-space: nowrap;
  text-decoration: none;
  transition:0.3s;
}


.btn-txt { padding:2px; background:var(--white); }





/* 사이즈별 */
.btn.xs { padding:5px 12px 6px; font-size:1.5rem; }
.btn.s { padding:8px 16px 8px; font-size:1.6rem; }
.btn.m { padding:11px 20px 12px; font-size:1.7rem; }
.btn.l { padding:15px 20px 15px; font-size:1.8rem; }
.btn.xl { padding:10px 30px; font-size:1.9rem; }








/* 기능별 */
.btn .svg-icon { width:2.4rem; height:2.4rem; }
.btn.ico-excel { background-color:#138147; gap:4px; }
.btn.ico-excel::before,
.btn.ico-excel.after::after { display:block; content:''; width:20px; height:20px; background:url(/images/inc/ico_excel.png) no-repeat center; }

.btn.ico-hwp { background-color:#148FD0; gap:4px; }
.btn.ico-hwp::before,
.btn.ico-hwp.after::after { display:block; content:''; width:20px; height:20px; background:url(/images/inc/ico_hwp.png) no-repeat center; }

.btn.ico-down { background-color:var(--white); color:var(--gray-90); gap:4px; }
.btn.ico-down::before,
.btn.ico-down.after::after { display:block; content:''; width:20px; height:20px; background:url(/images/inc/ico_down.png) no-repeat center; }



.btn.after::before { display:none; }







/* 링크 */
.btn.link { background-color: #00000000; border-color: #00000000; color: var(--primary); }
.btn.link:not(.icon) .svg-icon { background-color: var(--primary); }
.btn.link:hover { background-color: #ffffff00; }
.btn.link:active, .krds-btn.link:focus { background-color: #ffffff00; }
.btn.link[disabled], .krds-btn.link.disabled { background-color: #ffffff00;  border-color: #00000000; color: var(--gray-40);}
.btn.link[disabled]:not(.icon) .svg-icon, .btn.link.disabled:not(.icon) .svg-icon { background-color: var(--gray-40); }
.btn.link[disabled]:hover, .btn.link.disabled:hover { background-color: #ffffff00; border-color: #00000000; color: var(--gray-40); }

.btn.link { display: inline-block; height: auto !important; padding: 0 0.2rem; font-size: 1.9rem; text-align: left; white-space: normal; }
.btn.link.xsmall { padding: 0 0.2rem; font-size: 1.5rem;}
.btn.link.xsmall .svg-icon { margin-bottom: -0.3rem; }
.btn.link.small { padding: 0 0.2rem; font-size: 1.5rem; }
.btn.link.small .svg-icon { margin-bottom: -0.3rem; }
.btn.link.medium { padding: 0 0.2rem; font-size: 1.7rem; }
.btn.link.medium .svg-icon { margin-bottom: -0.4rem; }
.btn.link.large { padding: 0 0.2rem; font-size: 1.9rem; }
.btn.link.large .svg-icon { margin-bottom: -0.5rem; }
.btn.link.xlarge { padding: 0 0.2rem; font-size:  1.9rem; }

.btn.link.xlarge .svg-icon { margin-bottom: -0.6rem; }
.btn.link.basic { color: var(--gray-90); text-decoration: underline; text-underline-offset: 0.3rem; text-decoration-color: #00000000; }
.btn.link.basic .svg-icon { background-color: var(--gray-90); }

.btn.link.basic:hover,
.btn.link.basic:active,
.btn.link.basic:focus { text-decoration-color: inherit; }

.btn.link:hover { color: var(--primary-60); }
.btn.link:hover .svg-icon { background-color: var(--primary-60); }

.btn.link:active,
.btn.link:focus { color: var(--primary-70); }

.btn.link:active .svg-icon,
.btn.link:focus .svg-icon { background-color: var(--primary-70); }
.btn.link:visited { color: #5917b8;; text-decoration: none; }
.btn.link:visited .svg-icon { background-color: #5917b8;; }
.btn.link .svg-icon { display: inline-block; margin-bottom: -0.5rem; }

@media (max-width: 767px) {
	.btn.link { font-size: 1.9rem; }
	.btn.link.xsmall { font-size: 1.5rem; }
	.btn.link.small { font-size: 1.5rem; }
	.btn.link.medium { font-size: 1.7rem; }
	.btn.link.large { font-size: 1.9rem; }
	.btn.link.xlarge { font-size: 1.9rem; }
}





/* ------------------------------------------------------------- */

/* 버튼 정렬 */
.btn_center {  margin-top:10px; }
.btn_right { width:100%; text-align:right; margin-top:10px; }








/* ------------------------------------------------------------- */

/* 상황별 버튼 색 */
.btn.red { background:var(--danger); color:#fff !important;}
.btn.yellow { background:var(--warning-50); color:#fff !important; }
.btn.blue { background:var(--information-80); color:#fff !important; }
.btn.green { background:var(--success-60); color:#fff !important; }

/*.btn.gray { background:var(--white); border:1px solid var(--gray-50); color:var(--gray-50); }
.btn.bg-gray { background:var(--gray-20); border:1px solid var(--gray-20); color:var(--gray-60); }
.btn.bg-gray { background:var(--gray-40); border:1px solid var(--gray-40); color:var(--gray-5); }*/

.btn.gray { background:var(--gray-50); color:var(--gray-5); }
.btn.darkGray { background:var(--gray-80); color:var(--gray-5); }



	/* 상호작용 효과 */
.btn.red:hover { background:var(--danger-70); color:#fff !important;}
.btn.yellow:hover { background:var(--warning-70); color:#fff !important; }
.btn.blue:hover { background:var(--information-90); color:#fff !important; }
.btn.green:hover { background:var(--success-80); color:#fff !important; }
.btn.gray:hover { background:var(--gray-70); }
.btn.darkGray:hover { background:var(--gray-90); }




/* 라인 버튼 */
.btn.line-gray { background:var(--white); border:1px solid var(--gray-50); color:var(--gray-50); }
.btn.line-red { background:var(--white); border:1px solid var(--secondary); color:var(--black); }
.btn.line-blue { background:var(--primary-5); border:1px solid var(--primary); color:var(--primary); }


	/* 라인 버튼 -  상호작용 */
.btn.line-gray:hover { background:var(--gray-10); color:var(--gray-70); }
.btn.line-gray:focus { outline-color:var(--gray-50); }

.btn.line-red:hover { background:var(--secondary-10); color:var(--secondary-60); }
.btn.line-red:focus { outline-color:var(--secondary-40); }

.btn.line-blue:hover { background:var(--primary-10); }
.btn.line-blue:focus { outline-color:var(--primary-40); }





.btn:active { !important; outline:2px solid var(--primary-20); }
.btn:not(.link):focus { outline-offset:-4px; outline:2px solid var(--primary-10); }
.btn:hover { background:var(--primary-70); } 



.btn-txt:active { outline:2px solid var(--gray-70) !important; }
.btn-txt:focus { outline-offset:0 !important; outline:2px solid var(--gray-70) !important; }
.btn-txt:hover { background:var(--gray-20) !important; }




.btn.search { background-color:var(--white); color:var(--gray-90); gap:4px; }
.btn.search::before,
.btn.search.after::after { display:block; content:''; width:20px; height:20px; background:url(/images/inc/ico_search.png) no-repeat center; }