.tool-wrap {
	position: relative; display: flex; justify-content: space-between; padding-bottom: 15px; align-items: flex-end;
	.total-count {
		display: flex; align-items: center; gap: 10px; width: 100%; position: relative;
		.txt {
			font-size: 1.5rem; color: #666;
			.num { 
				color: var(--theme); font-weight: 700; 
			}
			.total { 
				color: #666; 
			}
		}
		.selectbox {
			min-width: 80px;
			&:after { 
				top: 9px; right: 10px; width: 5px; height: 5px; opacity: .7; 
			}
			select { 
				padding: 5px 10px; font-size: 1.3rem; 
			}
		}
		.right-btn { 
			position: absolute; bottom: 0; right: 0; 
		}
		.toggle-wrap {
			display: inline-flex; align-items: center; cursor: pointer; gap: 4px;
			.label { 
				font-size: 1.4rem; font-weight: 500; 
			}
			input { 
				display: none; 
			}
			.slider {
				position: relative; width: 30px; height: 15px; background-color: #ccc; border-radius: 20px; transition: background-color .3s;
				&::before { 
					content: ""; position: absolute; left: 4px; top: 2px; width: 10px; height: 10px; border-radius: 50%; background: #fff; transition: transform .3s; 
				}
			}
			input:checked + .slider { 
				background-color: #000; 
			}
			input:checked + .slider::before { 
				transform: translateX(12px); 
			}
		}
	}
	.search-input {
		position: relative; width: 650px; max-width: 100%; display: flex;
		.selectbox {
			width: 25%; border-right: 0;
			select { 
				line-height: normal; border: 0; 
			}
		}
		.input {
			width: 100%; border: 1px solid var(--line); background-color: #fff;
			input { 
				font-size: 1.6rem; padding: 8px 60px 8px 15px; width: 100%; display: block; background: #fff; 
			}
		}
		.button {
			position: absolute; right: 0; top: 0; width: 50px; height: 100%; background: var(--dark); display: flex; justify-content: center; align-items: center;
			button { 
				display: block; width: 100%; height: 100%;
				> img { 
					width: 24px; height: 24px; 
				}
			}
		}
	}
	.selectbox {
		position: relative; border: 1px solid var(--line); background: #fff;
		&:after { 
			content: ''; width: 5px; height: 5px; right: 10px; top: 14px; border-left: 1px solid #666; border-bottom: 1px solid #666; position: absolute; transform: rotate(-45deg); cursor: pointer; 
		}
		select { 
			background: transparent; font-size: 1.5rem; padding: 8px 20px 8px 15px; width: 100%; cursor: pointer; 
		}
	}
	.bord-filter-wrap {
		display: flex; gap: 5px;
		.filter-btn {
			display: inline-block; padding: 5px 10px; min-width: 70px; text-align: center; border: 1px solid #d4d7dd; border-radius: 5px; background-color: #fff; color: #222; font-size: 1.5rem; user-select: none; font-weight: 500; color: #666;
			&:hover { 
				border-color: var(--theme); color: var(--theme); 
			}
			&.active { 
				border-color: var(--theme); background-color: var(--theme); color: #fff; font-weight: 600; 
			}
		}
	}
}

.multi-tool {
	.multi-search {
		width: 100%;
		.search-input {
			width: 100%; min-width: 630px; gap: 5px; max-width: 100%;
			.selectbox {
				&:after { 
					right: 10px; width: 5px; height: 5px; top: 16px; 
				}
				select { 
					padding-left: 10px; padding-right: 13px; 
				}
			}
			&.layout-2 {
				.selectbox { 
					width: 25%; 
				}
			}
			&.layout-3 {
				.selectbox { 
					width: 30%; 
				}
			}
			&.layout-5 {
				.selectbox { 
					width: auto; flex: 1 1 25%; 
				}
			}
			.selectbox { 
				border-right: 1px solid var(--line); 
			}
		}
	}
}

@media (max-width: 900px) {
	.tool-wrap {
		flex-direction: column-reverse; align-items: flex-start; padding-bottom: 10px;
		.total-count {
			padding-top: 10px; justify-content: space-between; flex-wrap: wrap;
			&.has-right-btn {
				padding-right: 70px;
				.right-btn {
					bottom: -2px;
					.a-btn { 
						padding: 6px 18px; 
					}
				}
			}
			.txt { 
				font-size: 1.4rem; 
			}
		}
		.search-input { 
			width: 100%; 
		}
		.bord-filter-wrap {
			margin: 15px 0 5px;
			.filter-btn { 
				font-size: 1.4rem; 
			}
		}
	}
	.multi-tool {
		.multi-search {
			.search-input {
				flex-wrap: wrap; padding-right: 57px; min-width: auto;
				&.layout-2 {
					.selectbox { 
						width: calc(50% - 5px); 
					}
				}
				&.layout-3 {
					.selectbox { 
						width: calc(33% - 3px); 
					}
				}
			}
		}
	}
}

@media (max-width: 768px) {
	.tool-wrap {
		flex-direction: column-reverse; align-items: flex-start; padding-bottom: 10px;
		.total-count {
			padding-top: 30px;
			.txt { 
				font-size: 1.4rem; 
			}
			.filter-checkbox {
				margin-left: 0;
			}
		}
		.search-input {
			width: 100%;
			.input {
				width: 100%;
			}
		}
	}
}

@media (max-width: 475px) {
	.tool-wrap {
		padding-bottom: 5px;
		.search-input {
			.selectbox {
				width: 80px;
				&:after {
					right: 10px; top: 16px; width: 5px; height: 5px;
				}
				select {
					font-size: 1.4rem; padding: 8px 15px 8px 10px;
				}
			}
			.input {
				input {
					font-size: 1.4rem; padding: 8px 10px;
					&::placeholder {
						font-size: 1.4rem;
					}
				}
			}
			.button {
				width: 50px;
				button {
					font-size: 1.4rem; font-weight: 800;
					> img { 
						width: 20px; height: 20px; 
					}
				}
			}
		}
		.total-count {
			padding-top: 15px; justify-content: flex-start;
			.input-check {
				label {
					font-size: 1.4rem;
				}
			}
		}
	}
	.multi-tool {
		.tool-wrap { 
			gap: 0; 
		}
		.multi-search {
			padding: 0; background-color: transparent;
			.search-input {
				padding-right: 0;
				.button {
					height: 42px; top: unset; bottom: 0;
					button { 
						padding: 10px 0; 
					}
				}
			}
		}
	}
}