/**
 * Unified Filter Bar Component — 4page-ui-unification Phase 0
 * 설계 섹션 5-D 반영
 * 스코프: .page-tc / .page-bd / .page-hs 만 (메인 prep 제외)
 */

.page-tc .filter-bar,
.page-bd .filter-bar,
.page-hs .filter-bar {
  background: var(--ink-100);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  max-width: 900px;  /* D3 */
  margin: 0 auto;
  box-sizing: border-box;
}

.page-tc .filter-row,
.page-bd .filter-row,
.page-hs .filter-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-bottom: var(--space-3);
}

.page-tc .filter-row:last-child,
.page-bd .filter-row:last-child,
.page-hs .filter-row:last-child {
  margin-bottom: 0;
}

.page-tc .filter-label,
.page-bd .filter-label,
.page-hs .filter-label {
  font-size: 13px;
  color: var(--ink-500);
  font-weight: 500;
  min-width: 56px;
}

.page-tc .filter-chips,
.page-bd .filter-chips,
.page-hs .filter-chips {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.page-tc .filter-chip,
.page-bd .filter-chip,
.page-hs .filter-chip {
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--white);
  border: 1px solid var(--ink-300);
  color: var(--ink-700);
  font-family: var(--font-body);
  font-size: 13px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.page-tc .filter-chip:hover,
.page-bd .filter-chip:hover,
.page-hs .filter-chip:hover {
  border-color: var(--page-accent);
  color: var(--page-accent);
}

.page-tc .filter-chip.is-active,
.page-bd .filter-chip.is-active,
.page-hs .filter-chip.is-active {
  background: var(--page-accent);
  border-color: var(--page-accent);
  color: var(--white);
}

.page-tc .filter-search,
.page-bd .filter-search,
.page-hs .filter-search {
  flex: 1;
  position: relative;
  max-width: 400px;
}

.page-tc .filter-search-input,
.page-bd .filter-search-input,
.page-hs .filter-search-input {
  width: 100%;
  padding: 10px 14px 10px 38px;
  border-radius: var(--radius-md);
  border: 1px solid var(--ink-300);
  background: var(--white);
  font-family: var(--font-body);
  font-size: 14px;
  box-sizing: border-box;
}

.page-tc .filter-search-input:disabled,
.page-bd .filter-search-input:disabled,
.page-hs .filter-search-input:disabled {
  background: var(--ink-100);
  color: var(--ink-400);
  cursor: not-allowed;
}

/* 접이식 세부 필터 (관리형 tc만 사용) */
.page-tc .filter-advanced {
  margin-top: var(--space-4);
}

.page-tc .filter-advanced-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 8px 14px;
  background: var(--white);
  border: 1px solid var(--ink-300);
  border-radius: var(--radius-md);
  font-size: 13px;
  cursor: pointer;
  list-style: none;
}

.page-tc .filter-advanced-toggle::-webkit-details-marker {
  display: none;
}

.page-tc .filter-advanced[open] .filter-advanced-toggle {
  background: var(--page-accent-soft);
  border-color: var(--page-accent);
  color: var(--page-accent);
}

.page-tc .filter-advanced-body {
  margin-top: var(--space-4);
  padding: var(--space-4);
  background: var(--white);
  border-radius: var(--radius-md);
}

/* 빈 상태 UI (W3 해결) */
.page-tc .empty-state,
.page-bd .empty-state,
.page-hs .empty-state {
  text-align: center;
  padding: var(--space-7);
  color: var(--ink-500);
}

.page-tc .empty-state p,
.page-bd .empty-state p,
.page-hs .empty-state p {
  margin: 0 0 var(--space-4);
  font-size: 14px;
}

@media (max-width: 768px) {
  .page-tc .filter-bar,
  .page-bd .filter-bar,
  .page-hs .filter-bar {
    padding: var(--space-4);
  }
  .page-tc .filter-row,
  .page-bd .filter-row,
  .page-hs .filter-row {
    gap: var(--space-2);
  }
  .page-tc .filter-label,
  .page-bd .filter-label,
  .page-hs .filter-label {
    min-width: auto;
    width: 100%;
    margin-bottom: var(--space-1);
  }
  .page-tc .filter-search,
  .page-bd .filter-search,
  .page-hs .filter-search {
    max-width: none;
  }
}