/* Input, Textarea 등 form 관련 레이아웃 */
.form_wrap{display:flex;justify-content:space-between;align-items:center;gap:8px;}
.form_wrap.column{flex-direction:column;gap:4px;}

.form_wrap>div{display:flex;flex:1;gap:8px;}
.form_wrap.left, .form_wrap .left{justify-content:flex-start;}
.form_wrap.center,.form_wrap .center{justify-content:center;}
.form_wrap.right,.form_wrap .right{justify-content:flex-end;}


/* 버튼 레이아웃 */
.btn_wrap{display:flex;justify-content:space-between;gap:8px;}
.btn_wrap.column{flex-direction:column;gap:4px;}

.btn_wrap>div{display:flex;flex:1;gap:8px}
.btn_wrap.left, .btn_wrap .left{justify-content:flex-start;}
.btn_wrap.center,.btn_wrap .center{justify-content:center;}
.btn_wrap.right,.btn_wrap .right{justify-content:flex-end;}

.center_btn_wrap {margin:30px 0 0;text-align:center;}

/* 버튼 스타일 */
.btn{border-radius: 5px;}
.btn:hover{box-shadow: 0px 0px 5px 3px rgba(0,0,0,0.12);transition: all 0.3s ease;}

.btn.only_text{padding:0 !important;}
.btn.only_icon{padding:0 !important;}
.btn.mix{display:flex;align-items:center;}
.btn.mix .icon{height:100%;background-size:contain;}

.btn.xssmall{height: 28px;}
.btn.ssmall{height: 30px;}
.btn.small{height: 32px;}
.btn.medium{height: 34px;}
.btn.large{height: 36px;}
.btn.xlarge{height: 38px;}

.btn.fill.primary{background-color: var(--primary-color);color: #fff;}
.btn.fill.primary:hover{background-color: var(--primary-color-hover);color: #fff;}
.btn.fill.primary_light{background-color: var(--primary-light-color);border: 1px solid var(--primary-light-border);color:#222;}
.btn.fill.primary_light:hover{background-color: var(--primary-light-color-hover);}
.btn.fill.secondary{background-color: var(--secondary-color);color: #222;}
.btn.fill.secondary:hover{background-color: var(--secondary-color-hover);color: #222;}
.btn.fill.red{background-color: var(--red-color);color: #fff;}
.btn.fill.red:hover{background-color: var(--red-color-hover);}
.btn.fill.green{background-color: var(--green-color);color: #fff;}
.btn.fill.green:hover{background-color: var(--green-color-hover);}

.btn.line.primary{border: 1px solid var(--primary-color);color: var(--primary-color);}
.btn.line.primary:hover{border: var(--primary-color-hover);color: var(--primary-color-hover);}
.btn.line.secondary{border: 1px solid var(--secondary-color);color: #222;}
.btn.line.secondary:hover{border: 1px solid var(--secondary-color-hover);}
.btn.line.red{border: 1px solid var(--red-color);color: var(--red-color);}
.btn.line.red:hover{border: var(--red-color-hover);color: var(--red-color-hover);}
.btn.line.green{border: 1px solid var(--green-color);color: var(--green-color);}
.btn.line.green:hover{background-color: var(--green-color-hover);}

.btn.fill.disabled,.btn.fill.readonly,.btn.fill:disabled{background:var(--disable-fill-bg-color) !important; color:var(--disable-fill-text-color) !important; pointer-events:none;}
.btn.line.disabled,.btn.line.readonly,.btn.line:disabled{background:var(--disable-line-bg-color) !important;border:1px solid var(--disable-line-border-color);color:var(--disable-line-text-color) !important;pointer-events:none;}


/* button type */
.btnType,[class^="btnType"]{font-size:16px;font-weight:400;border-radius:3px;text-align:center;}
.btnType:hover{box-shadow:0px 0px 10px 0 rgba(0,0,0,0.12);}

.btnType1{padding:0 14px;height:36px;background:#f2f2f2;border:1px solid #d5d5d5;color:var(--primary-color-hover);}
.btnType2{padding:0 6px;height:36px;background-color:var(--primary-color)!important;color:#fff!important;}
.btnType3{padding:0 6px;height:36px;background-color:#fff;border:1px solid var(--primary-color);color:var(--primary-color);}
.btnType4{padding-right:10px;width:90px;height:26px;font-size:14px;background-color:#8e8e8e;background-image:url(/publish/images/arrow1.png);background-repeat:no-repeat;background-position:86% center;color:#fff;vertical-align:inherit;}
.btnType5{padding:0 7px;height:28px;background-color:#fff;border:1px solid var(--primary-color);color:var(--primary-color);}
.btnType6{padding:0 16px;height:40px;font-weight:400;background-color:var(--lightgray-bg)!important;border:1px solid #d5d5d5!important;}
.btnType7{width:100%;max-width:190px;height:40px;font-weight:300;background-color:#fff;border:1px solid var(--gray-border);}
.btnType8{max-width:190px;height:40px;font-weight:300;background-color:var(--secondary-light-color);border:1px solid var(--secondary-light-color-hover);}
.btnType9{max-width:93px;height:40px;font-weight:300;background-color:var(--gray-color)!important;color:#fff!important;}
.btnType10{height:50px;font-size:20px;background-color:#fff;border:1px solid var(--primary-color);color:var(--primary-color);}
.btnType11{height:50px;font-size:20px;background-color:var(--primary-color);color:#fff;}
.btnType12{height:32px;font-size:14px;font-weight:300;background-color:#fff;border:1px solid #b1b1b1;}
.btnType13{height:32px;font-size:14px;font-weight:300;color:#fff;}
.btnType13.c1{background-color:#2a57c8;border:1px solid #2a57c8;}
.btnType13.c2{background-color:#0b96d0;border:1px solid #0b96d0;}
.btnType13.c3{background-color:#129738;border:1px solid #129738;}
.btnType14{padding:0 10px;height:36px;font-size:14px;font-weight:400;letter-spacing:-1px;background-color:#fff;border:1px solid var(--gray-border);color:#6d6d6d;}
.btnType15{margin-right:2px;width:80px;height:32px;font-size:14px;background-color:#fff;border:1px solid #d5d5d5;}
.btnType16{padding:0 39px;height:50px;font-size:18px;background-color:var(--primary-color);color:#fff;}
.btnType17{width:144px;height:50px;font-size:18px;background-color:var(--gray-color)!important;color:#fff!important;}
.btnType18{width:145px;height:50px;font-size:18px;background-color:#fff;border:1px solid var(--primary-color);color:var(--primary-color);}
.btnType19{padding:0 16px;margin-right:2px;height:50px;background-color:#fff;border:1px solid var(--gray-border);color:#222;}
.btnType20{margin:3px 0 0 0;width:70px;height:28px;font-size:14px;font-weight:400;line-height:1.5;background-color:#fff;border:1px solid var(--gray-border);color:#555;}
.btnType21{padding:0 14px;height:36px;background-color:var(--secondary-color);color:#fff;}
.btnType22{padding:0 12px;height:28px;font-size:14px;font-weight:500;background-color:var(--secondary-color);color:#fff;}
.btnType23{padding:4px 13px;margin:0 3px;font-size:14px;font-weight:400;background:var(--gray-color);color:#fff;} /*api에 사용*/
.btnType24{margin:3px 0;width:70px;height:28px;font-size:14px;font-weight:400;line-height:1.5;background:#fff;border:1px solid #8697c2;color:var(--primary-color);} /*재사용 버튼 추가*/
.btnType25{width:76px;height:26px;font-size:14px;line-height:1.5;background:#999;color:#fff;}


.btn_text{padding:0 7px;}

.btn_28{height:28px;}
.btn_30{height:30px;}
.btn_32{height:32px;}
.btn_34{height:34px;}
.btn_36{height:36px;}
.btn_38{height:38px;}

.btn_blue.fill{background:var(--primary-color);color:#fff;}
.btn_lightgray.fill{background:var(--lightgray-color);color:#fff;}
.btn_gray.fill{background:var(--gray-color);color:#fff;}
.btn_yellow.fill{background:var(--secondary-light-color);color:#222;}

.btn_blue.border{border:1px solid var(--primary-color);color:var(--primary-color);}
.btn_gray.border{border:1px solid #6a6c72;color:#666;}

.btnType.fill_gray{background:#6a6c72;color:#fff;}
.btnType.fill_lightgray{background:#8e8e8e;color:#fff;}
.btnType.fill_blue{background:var(--primary-color);color:#fff;}
.btnType.fill_lightblue{background:#b1c6ee;color:#222;}
.btnType.fill_yellow{background:var(--secondary-color);color:#222;}

.btnType.border_gray{border:1px solid #b1b1b1;color:#222;}
.btnType.border_lightgray{border:1px solid #d5d5d5;color:#555;}
.btnType.border_blue{border:1px solid var(--primary-color);color:var(--primary-color);}
.btnType.border_lightblue{border:1px solid #b1c6ee;color:#222;}


/* 기타 버튼 타입 */
button.excel_btn {border: 1px solid #129738 !important; color: #129738;}
button.excel_btn:hover {border: 1px solid #09862d;color: #09862d;}
button.print_btn {border: 1px solid #b1b1b1; color: #555;}
button.pdf_btn {border: 1px solid #e40000 !important; color: #e40000;}
button.txt_btn {border: 1px solid #53a6da !important; color: #53a6da; }
button.txt_btn i {background-image: url(/publish/images/content/txt_img.png); width: 15px; height: 17px; margin: 0 3px 1px 0;}

/*아이폰에서 버튼 텍스트가 파란색으로 나와서 추가 231024
button, html [type="button"] {-webkit-appearance: none;}*/

/* 기타 버튼 타입 아이콘 */
i.remove_img {background-image: url(/publish/images/content/remove_icon.png);width: 10px;height: 10px;margin: 0 3px 1px 0;}
i.add_img {background-image: url(/publish/images/content/add_icon.png);width: 10px;height: 10px;margin: 0 3px 1px 0;}
i.print_img {background-image: url(/publish/images/content/print_icon.png);width: 15px;height: 15px;margin: 0 3px 1px 0;}
i.pdf_img {background-image: url(/publish/images/content/pdf_icon.png);width: 18px;height:20px;margin: 0 3px 1px 0;}
i.uproad {background-image: url(/publish/images/content/excel_get.png); width: 21px; height: 18px;}
i.downroad {background-image: url(/publish/images/content/excel_down.png); width: 21px; height: 18px;}
i.refresh_img {background-image: url(/publish/images/content/refresh_icon.png);width:16px; height:18px;}

.refresh_btn {background:#999; border-radius: 5px; font-size:0; height: 36px; width: 36px;}