@charset "utf-8";

/* 검색 폼 */
.form_search {
    display: flex;
    flex-wrap: wrap;
    row-gap: 10px;
    margin-left: -12px;
    margin-right: -12px;
    margin-top: 20px;
}
.form_search .form_group {
    width: 25%;
    padding: 0 12px;
}

/* form group */
.form_group {
    display: flex;
    align-items: center;
}
.form_group > *:not(.ti) {
    width: 100%;
    min-width: 0;
}
.form_group .ti {
    flex-shrink: 0;
    width: 70px;
    font-size: 12px;
    font-weight: 500;
    color: var(--t-gray-800);
}
.input_group {
    display: flex;
    align-items: center; 
    gap: 2px;
}
.input_group.flex_wrap {
    flex-wrap: wrap;
}
.input_group > *:not(span, img) {
    flex: 1 auto;
    min-width: 0;
}
.popup_board_header .form_group .ti {
    width: auto;
    margin-right: 10px;
}

/* 조건 선택 버튼 */
.btn_toggle_group {display: flex; flex-wrap: wrap; gap: 5px 0; margin: 0 -4px;}
.btn_toggle_item {padding: 0 4px;}
.btn_toggle_check {display: none !important;}
.btn_toggle {display: inline-block; width: 100%; height: 25px; line-height: 25px; padding: 0 10px; border-radius: 2px; border: 1px solid var(--t-gray-200); font-size: 12px; background-color: var(--t-gray-100); color: var(--t-gray-600); text-align: center;}
.btn_toggle_check:checked + .btn_toggle {border: 1px solid var(--t-primary); background-color: var(--t-primary); color: #fff;}
.btn_toggle.active {border: 1px solid var(--t-primary); background-color: transparent; color: var(--t-primary);}

/* 검색 폼 너비 조정 */
.form_group.w-auto {width: auto;}
.form_group.w-auto .input_group > *:not(span, img) {width: 125px;}

.form_group.col-auto {flex: 1 1 auto;}
.form_group.col1 {width: 100%;}
.form_group.col2 {width: 50%;}
.form_group.col3 {width: 33.33333%;}
.form_group.col5 {width: 20%;}
.form_group.col6 {width: 16.66667%;}
.form_group.col7 {width: 14.28571%;}
.form_group.col8 {width: 12.5%;}

.form_group.w10 {width: 10%;}
.form_group.w20 {width: 20%;}
.form_group.w30 {width: 30%;}
.form_group.w40 {width: 40%;}
.form_group.w50 {width: 50%;}


/* ============================================================================================================================================================================================
===== media query */
/*=== big desktop */
@media screen and (max-width: 1440px) {
	/**
	검색 폼 */
	.form_group .ti {width: 70px;}
	.form_search .form_group {width: 33.33333%;}
}

/*=== tablet */
@media screen and (max-width: 992px) {
	/**
	검색 폼 */
	.form_search .form_group {width: 50%;}
	.input_group > *:not(span, img) {flex: 1 auto;}
}

/*=== mobile */
@media screen and (max-width: 576px) {
	/**
	검색 폼 */
	.form_search .form_group {width: 100%;}
	.form_group .ti {width: 90px;}
}