/* OP | BUTTON TAG CLASS CSS */

/* 기본 형태 설정 */
button { border: none; outline: none; cursor: pointer; transition: all 0.3s; }

button.rounded_btn { min-width: 8.6rem; height: 3.6rem; padding: 0 2rem; border-radius: 4rem; font-size: 1.3rem; border: 1px solid transparent; }
button.sm_rect_btn { padding: 0 0.8rem; height: 2.4rem; border-radius: 0.3rem; background: #fff; border: 1px solid #bbb; font-size: 1.3rem; }
button.mid_rect_btn { min-width: 8.6rem; height: 3.6rem; padding: 0 1.2rem; border-radius: 0.3rem; font-size: 1.3rem; border: 1px solid transparent; }
button.sq_btn { width: 2.6rem; height: 2.6rem; border-radius: 0.3rem; border: 1px solid #bbb; background: transparent; }

/* 활성화 : primary */
button.pri { background: #e5657d; border-color: #e5657d; color: #fff; }
button.pri:hover { background: #e5657d; border-color: #e5657d; color: #fff; box-shadow: 0 0 1rem rgba(0,0,0,0.1); }
button.pri:active { background: #df3f5c; border-color: #df3f5c; color: #fff; box-shadow: 0 0 1rem rgba(0,0,0,0.1); }

/* 활성화 : secondary */
button.sec { background: #fff; border-color: #DF3F5C; color: #DF3F5C; }
button.sec:hover { background: #fff; border-color: #DF3F5C; color: #DF3F5C; box-shadow: 0 0 1rem rgba(0,0,0,0.1); }
button.sec:active { background: #fff; border-color: #DF3F5C; color: #DF3F5C; box-shadow: 0 0 0 0.3rem #DF3F5C33; }

/* 활성화 : tertiary */
button.tert { background: #fff; color: #444; border-color: #bbb; }
button.tert:hover { background: #fff; color: #444; border-color: #bbb; box-shadow: 0 0 1rem rgba(0,0,0,0.1); }
button.tert:active { background: #fff; color: #444; border-color: #bbb; box-shadow: 0 0 0 0.3rem #77777733; }

/* 활성화 : 가장 중요도 낮은 */
button.text { background: transparent; color: #777; border-color: transparent; }
button.text:hover { background: #E5657D; color: #fff; border-color: transparent; }
button.text:active { background: #DF3F5C; color: #fff; border-color: transparent; }

/* 푸른색 버튼 */
button.blue { background: #6873D4; border-color: transparent; color: #fff; }
button.blue:hover { background: #7D87DA; box-shadow: 0 0 1rem rgba(0,0,0,0.1); }
button.blue:active { background: #6873D4; box-shadow: 0 0 1rem rgba(0,0,0,0.1); }

/* 남색 버튼 */
button.navy { background: #4F59AF; border-color: transparent; color: #fff; }
button.navy:hover { background: #727ABF; }
button.navy:active { background: #4F59AF; }

/* 보라색 버튼 */
button.purple { background: #7E46A1; border-color: transparent; color: #fff; }
button.purple:hover { background: #885DBF; box-shadow: 0 0 1rem rgba(0,0,0,0.1); }
button.purple:active { background: #7E46A1; box-shadow: 0 0 1rem rgba(0,0,0,0.1); }

/* 초록색 버튼 */
button.green { background: #4d8f6b; border-color: transparent; color: #fff; }
button.green:hover { background: #217346; box-shadow: 0 0 1rem rgba(0,0,0,0.1); }
button.green:active { background: #217346; box-shadow: inset 0 0.4rem 1rem rgba(0,0,0,0.1); }

/* 테두리만 있는 버튼 ex) sq_btn... */
button.ghost:hover { box-shadow: 0 0 0.5rem rgba(0,0,0,0.1); }
button.ghost:active { box-shadow: inset 0 0 0.5rem 0.1rem rgba(0,0,0,0.1); }

/* 비활성화 */
button.disable { background: #e0e0e0; color: #999; cursor: not-allowed; }
button:disabled { background: #E0E0E0; border-color: #E0E0E0; color: #999; box-shadow: none; cursor: not-allowed; }
button:disabled:hover { background: #E0E0E0; border-color: #E0E0E0; color: #999; box-shadow: none; cursor: not-allowed; }
button.sm_rect_btn:disabled { border-color: #bbb; }

/* iframe 내 네비게이션 버튼 */
button.main_nav_btn { flex: 0 0 12.0rem; height: 100%; background: rgba(255,255,255,0); color: #fff; font-size: 1.4rem; font-weight: 300; letter-spacing: 0.03rem; transition: background 0.3s; }
button.main_nav_btn:not(:first-child) { margin-left: 8.0rem; }
button.main_nav_btn:hover { background: rgba(255,255,255,0.2); }

/* 헤더 버튼 */
button.header_btn {
  position: relative; width: 3.6rem; height: 3.6rem; border-radius: 100%; overflow: hidden;
  background: transparent; margin-left: 1rem; --icon-color: #777; transition: all 0.2s;
}
button.header_btn:first-child { margin-left: 0; }
button.header_btn::before {
  content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: var(--icon-color); transform: scale(1.01);
  mask: var(--icon) no-repeat center center; mask-size: cover;
  -webkit-mask: var(--icon) no-repeat center center; -webkit-mask-size: cover;
}
button.header_btn:hover { background: #F7F4F4; --icon-color: #DF3F5C; }
button.header_btn:active { background: #DF3F5C; --icon-color: #fff; }

/* 팝업 닫기 버튼 */
button.popup_close_btn {
	position: relative; width: 3.0rem; height: 3.0rem; background: radial-gradient(circle, #e0e0e0 46%, rgba(0,0,0,0) 40%);
}
button.popup_close_btn::before,
button.popup_close_btn::after {
	content: ''; position: absolute; top: 50%; left: 50%; width: 2px; height: 1.0rem; background: #fff;
}
button.popup_close_btn::before { transform: translate(-50%,-50%) rotate(45deg); }
button.popup_close_btn::after { transform: translate(-50%,-50%) rotate(-45deg); }

/* 팝업(드래그 가능) 닫기 버튼 */
div.popup_container_modeless button.popup_close_btn { background: radial-gradient(circle, rgba(255,255,255,0.3) 46%, rgba(0,0,0,0) 40%); }

/* 팝업 풋터 버튼 */
div.popup_footer > button:not(:first-child) { margin-left: 1.0rem; }

/* 인풋 클리어 버튼 */
div.input_wrap > button.input_clear_btn {
	position: absolute; top: 50%; right: 0; transform: translateY(-50%); width: 3.0rem; height: 3.0rem;
	background: radial-gradient(circle, #e0e0e0 40%, rgba(0,0,0,0) 40%); visibility: hidden;
}
div.input_wrap > button.input_clear_btn::before,
div.input_wrap > button.input_clear_btn::after {
	content: ''; position: absolute; top: 50%; left: 50%; width: 2px; height: 1.0rem; background: #fff;
}
div.input_wrap > button.input_clear_btn::before { transform: translate(-50%,-50%) rotate(45deg); }
div.input_wrap > button.input_clear_btn::after { transform: translate(-50%,-50%) rotate(-45deg); }

/* 검색버튼 */
button.search_btn {
	position: absolute; top: 0; right: 0; width: 3.6rem; height: 100%;
	background: url('../1_image/skena/04_button/btn_search.svg') no-repeat center center; background-size: cover;
}

/* 테이블 내부 버튼 */
button.in_table_btn {
	width: 100%; height: 100%; background: var(--btn-color);
	mask: var(--icon) no-repeat center center; mask-size: var(--icon-size, cover);
	-webkit-mask: var(--icon) no-repeat center center; -webkit-mask-size: var(--icon-size, cover);
}

/* 페이지네이션 버튼 */
button.page_btn {
  flex: 0 0 3rem; height: 3rem; background: transparent; --icon-color: #bbb;
}
button.page_btn:disabled { --icon-color: #E0E0E0; background: transparent; }
button.page_btn.prev_all { --icon: url('../1_image/skena/04_button/btn_prev_all.svg'); }
button.page_btn.prev { --icon: url('../1_image/skena/04_button/btn_prev.svg'); }
button.page_btn.next_all { --icon: url('../1_image/skena/04_button/btn_next_all.svg'); }
button.page_btn.next { --icon: url('../1_image/skena/04_button/btn_next.svg'); }
button.page_btn.num { flex: 0 0 2.4rem; height: 2rem; font-size: 1.2rem; color: #999; }
button.page_btn.num.current { font-weight: 700; color: #E5657D; }

/* 토스트 팝업 닫기 버튼 */
button.toast_close_btn {
	flex: 0 0 1.5rem; height: 1.5rem; background: var(--icon-color,#444);
	mask: url('../1_image/skena/04_button/btn_popup_close.svg') no-repeat center center; mask-size: contain;
	-webkit-mask: url('../1_image/skena/04_button/btn_popup_close.svg') no-repeat center center; -webkit-mask-size: contain;
}

/*
	svg를 마스크로 넣은 버튼(svg 색상 변경하기 위해 사용 & 배경색 따로 주기 위해 before에 svg 삽입)
	button.has_mask 스타일에 --icon: 이미지주소
	원하는 색상을 background 에 입력하면 svg 색상 변경해서 사용 가능. -> button.has_mask 스타일에 --icon-color: 색상
*/
button.has_mask::before {
  content: ''; display: block; height: 100%; background: var(--icon-color);
  mask: var(--icon) no-repeat center center; mask-size: var(--icon-size, cover);
  -webkit-mask: var(--icon) no-repeat center center; -webkit-mask-size: var(--icon-size, cover);
}

/* icon 추가된 btn */
.icon_btn::after {
	content: ''; display: block; width: var(--icon-width); height: var(--icon-height); 
	margin: 0; color: #fff; background: var(--icon-color); 
	mask-size: 100%; -webkit-mask-size: 100%;
	mask-repeat: no-repeat; -webkit-mask-repeat: no-repeat;
	mask-position: center center; -webkit-mask-position: center center;
	mask-image: var(--icon); -webkit-mask-image: var(--icon);
}

/* OP | BUTTON TAG CLASS CSS END */