Search Filter

좌측 코드가 전달용 마크업, 우측이 적용 UI. 라벨-좌측 수평형 검색 필터(.search-filter) · 흰 패널 내장 · 우측 끝 정사각 검색 버튼. 컨트롤 폭은 디자인 314 고정, 라벨/입력 폭은 CSS 변수로 조정.

기본형 (텍스트 · 셀렉트 · 텍스트) .search-filter > .search-filter-fields(.search-field…) + .search-btn 
<form class="search-filter">
  <div class="search-filter-fields">
    <div class="search-field">
      <label>카드 프로파일 ID</label>
      <input type="text" class="input" />
    </div>
    <div class="search-field">
      <label>상태</label>
      <div class="select-box">…</div>
    </div>
    <div class="search-field">
      <label>카드 프로파일 명</label>
      <input type="text" class="input" />
    </div>
  </div>
  <button type="submit" class="search-btn" aria-label="검색">
    <i class="ico ico-search"></i>
  </button>
</form>
  • 전체
  • 사용
  • 만료
날짜 · 상태 필터 셀렉트 + 날짜 필드(.f-date) 조합 · 날짜칸도 동일 314 폭 
<div class="search-field">
  <label>처리 일시(시작)</label>
  <div class="f-date">
    <input type="text" class="input" value="2026-07-07" data-datepicker />
    <i class="ico ico-calendar"></i>
  </div>
</div>
  • 전체
  • 완료
  • 실패
폭 노브 (라벨 · 입력 폭) 페이지 전용 SCSS 에서 --search-label-w / --search-input-w 재정의 
/* 페이지 전용 SCSS — 최장 라벨/원하는 입력폭에 맞춤 */
.search-filter {
  --search-label-w: 112px; /* 라벨 폭(통일 → 입력 시작점 정렬) */
  --search-input-w: 314px; /* 입력·셀렉트·날짜 폭(@Guide 기본) */
}

<!-- 개별 필터에서 인라인으로도 조정 가능 -->
<form class="search-filter" style="--search-label-w:64px; --search-input-w:220px">…</form>