/* COMMON-03 §4.1 검색 영역 — 필터 좌측, [검색][초기화] 우측 */
.tpp-search,
.tpp-search-bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 12px;
	margin: 0 0 12px;
}
.tpp-search > .btn:first-of-type,
.tpp-search-bar__actions {
	margin-left: auto;
}
.tpp-search-bar__filters {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 12px;
	flex: 1 1 auto;
}
.tpp-search-bar__actions {
	display: flex;
	gap: 8px;
}

/* COMMON-03 §4.1 목록 도구 — 내보내기 우상단 */
.tpp-list-toolbar {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 12px;
	margin: 0 0 8px;
}

/*
 * 화면 전환/AJAX 로딩중(HoldOn.js) 표시 개선.
 * 1) HoldOn.min.css의 #holdon-overlay 배경이 rgb(255 255 255 / 40%) !important 로 고정되어 있어서,
 *    common.js(loadingDialog)에서 지정한 backgroundColor(rgba(0,0,0,0.8))가 항상 무시되고
 *    "흰색 반투명 배경 위에 흰색 막대 스피너"가 되어 로딩중 표시가 거의 보이지 않는 문제가 있었다.
 *    -> HoldOn.min.css 보다 나중에 로드되는 이 파일에서 동일하게 !important 로 덮어써서
 *       어둡고 대비가 뚜렷한 배경으로 교체한다(스피너 막대는 흰색 그대로 유지되어 잘 보인다).
 * 2) 기본 레이아웃은 스피너(#holdon-content, top:38%)와 안내문구(#holdon-message, top:43%)가
 *    각각 독립된 % 좌표로 배치되어 있어, 화면 높이/내용에 따라 안내문구가 배경 화면의 탭 글자 등과
 *    겹쳐 보여 "글자가 안 보인다"는 문제가 있었다. 두 요소의 부모(#holdon-content-container)를
 *    flex로 바꿔 스피너+문구를 하나의 그룹으로 화면 정중앙에 배치하고, 문구에는 반투명 검정 배경(pill)을
 *    추가로 얹어 어떤 배경 위에서도 항상 또렷하게 보이도록 한다.
 */
#holdon-overlay {
	background: rgba(0, 0, 0, 0.55) !important;
}
#holdon-content-container {
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	justify-content: center !important;
	height: 100% !important;
}
#holdon-content {
	position: static !important;
	top: auto !important;
	left: auto !important;
	margin: 0 !important;
}
#holdon-message {
	position: static !important;
	top: auto !important;
	width: auto !important;
	max-width: 80%;
	margin: 14px 0 0 !important;
	padding: 6px 16px;
	background: rgba(0, 0, 0, 0.4);
	border-radius: 16px;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.4;
	color: #fff;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}