/* 검색·필터 - 검색줄(라벨|입력 격자)·기간 줄 ‹ ›·조건 칩·휴대폰 접기. 동작은 search-filter.js, 규칙은 claude_common/ui/search-filter.md
   입력칸·알약(.input .select .filter-check)은 form.css를 같이 싣는다 */

/* ── 검색줄 ── `라벨 | 입력`을 두 벌 놓은 네 칸 격자. 라벨 폭이 고정이라 입력 시작선이 세로로 맞는다 */
/* 검색 영역은 늘 따로 떨어진 카드다 - 목록 카드 위(2026-10-05 "검색영역 자체가 카드로 구분") */
.list-search {
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 1fr) 5.5rem minmax(0, 1fr);
  column-gap: .6rem; row-gap: .45rem; align-items: center;
  margin-bottom: var(--card-gap, 18px);
  padding: 1.15rem 1.3rem;
  background: var(--uk-surface);
  border-radius: var(--card-radius, var(--uk-r-sm));
  box-shadow: var(--uk-up);
}
.list-search-label { font-size: 13px; color: var(--uk-muted); white-space: nowrap; text-align: right; line-height: var(--form-field-h, 34px); }
.list-search-field { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; min-width: 0; }
.list-search-field.is-full,
.list-search-field:has(.filter-options) { grid-column: 2 / -1; }        /* 보기가 많은 조건은 줄을 통째로 */
.list-search-field.is-half:has(.filter-options) { grid-column: auto; }  /* 보기가 적은 두 조건을 나란히 */
/* 줄을 통째로 쓰는 칸의 라벨은 늘 줄 맨 앞에서 - 앞 칸 수가 홀수면 라벨만 오른쪽에 남고 입력이 다음 줄로 떨어졌다(2026-10-05) */
.list-search-label:has(+ .list-search-field.is-full) { grid-column: 1; }
/* (보기가 많은 줄은 마크업에 is-full을 단다 - :has 안에 :has는 쓸 수 없어 따로 잡지 못한다) */
.list-search-field > .input { flex: 1 1 8rem; min-width: 0; }
.list-search-field > .select { flex: 0 0 auto; }
.list-search .filter-check { min-width: 6.5rem; justify-content: flex-start; } /* 알약 너비를 맞춘다 - 글자 수대로면 들쭉날쭉 */
.list-search .filter-check.is-apart { margin-left: 0; }                        /* 검색줄에서는 떼지 않는다 */
.list-search-actions { grid-column: 2 / -1; justify-self: end; display: flex; gap: .4rem; }
/* .is-card - 예전 이름. 지금은 기본이 카드다 */

/* ── 기간 줄 ── ‹ [날짜] ~ [날짜] › - ‹ ›는 기간 전체를 한 달 옮기고 바로 검색 */
.date-range { display: inline-flex; align-items: center; gap: .3rem; min-width: 0; }
.date-range > .tilde { color: var(--uk-muted); }
.date-step {
  flex: 0 0 auto; width: 2rem; height: var(--form-field-h, 34px); padding: 0;
  border: 1px solid var(--uk-border); border-radius: var(--uk-r-sm); background: var(--uk-surface);
  color: var(--uk-fg); font: inherit; font-size: 18px; line-height: 1; cursor: pointer;
}
.date-step:hover { border-color: var(--uk-brand); color: var(--uk-brand); }
.period-btns { display: inline-flex; flex-wrap: wrap; gap: .25rem; }
.period-btn {
  height: 28px; padding: 0 .7rem; border: 1px solid var(--uk-border); border-radius: var(--uk-r-pill);
  background: var(--uk-surface); color: var(--uk-fg); font: inherit; font-size: 12.5px; cursor: pointer;
}
.period-btn:is([aria-pressed="true"], [aria-current="true"]) { border-color: var(--uk-pick); background: var(--uk-pick-light); color: var(--uk-pick-dark); }
/* 기간 버튼이 주소로 가는 링크일 때(서버가 그린 검색줄) - 버튼과 같은 모양, 지금 기간은 aria-current="true". 묶음(달·분기·연도·전체)이 여럿이면 사이를 조금 띄운다 (2026-10-05) */
a.period-btn { display: inline-flex; align-items: center; text-decoration: none; white-space: nowrap; }
.period-btn:hover { border-color: var(--uk-brand); color: var(--uk-brand-dark); }
.period-btns + .period-btns { margin-left: .4rem; }
/* 기간 줄은 버튼까지 길어 두 줄로 꺾일 수 있다 - 라벨은 첫 줄(날짜 칸)에 맞춘다. 가운데로 두면 라벨만 두 줄 사이로 내려간다 */
.list-search-label:has(+ .list-search-field > .date-range) { align-self: start; }

/* ── 걸린 조건 칩 ── 접힌 패널·휴대폰에서도 지금 조건이 보이게. × 로 하나씩 뗀다 */
.filter-chips { display: flex; flex-wrap: wrap; gap: .35rem; padding: .55rem 1.1rem; border-bottom: 1px solid var(--uk-line); }
.filter-chips:empty { display: none; }
.filter-chip {
  display: inline-flex; align-items: center; gap: .2rem; height: 28px; padding: 0 .3rem 0 .7rem;
  border-radius: var(--uk-r-pill); background: var(--uk-pick-light); color: var(--uk-pick-dark); font-size: 13px;
}
.filter-chip button { width: 22px; height: 22px; border: 0; border-radius: 50%; background: none; color: inherit; font: inherit; font-size: 15px; line-height: 1; cursor: pointer; }
.filter-chip button:hover { background: var(--uk-surface); }

/* ── 결과 자리 ── 찾는 동안 흐리게, 자리 크기는 그대로 */
.list-result { transition: opacity .15s; }
.list-result.is-loading { opacity: .45; pointer-events: none; }

/* ── 휴대폰 접기(앱 화면만) ── [🔍]로 열고 닫는다. 조건이 걸려 있으면 점 표시 */
.list-search-toggle {
  display: none; position: relative; width: 40px; height: 40px; border: 0; border-radius: var(--uk-r-md);
  background: none; color: var(--uk-fg); cursor: pointer;
}
.list-search-toggle:hover { background: var(--uk-head); }
.list-search-toggle.has-value::after {
  content: ""; position: absolute; top: 8px; right: 8px; width: 8px; height: 8px; border-radius: 50%;
  background: var(--uk-brand); box-shadow: 0 0 0 2px var(--uk-surface);
}

@media (max-width: 1100px) {
  .list-search { grid-template-columns: 5.5rem minmax(0, 1fr); }
  .list-search-field.is-full,
  .list-search-field:has(.filter-options),
  .list-search-field.is-half:has(.filter-options),
  .list-search-actions { grid-column: 2; }
}
/* 휴대폰(767px 이하) - 라벨을 칸 위로, 입력이 한 줄을 다 쓴다 */
@media (max-width: 767px) {
  .list-search { grid-template-columns: minmax(0, 1fr); row-gap: .2rem; padding: .8rem 16px; }
  .list-search-label { text-align: left; line-height: 1.4; margin-top: .5rem; }
  .list-search-label:first-child { margin-top: 0; }
  .list-search-field,
  .list-search-field.is-full,
  .list-search-field:has(.filter-options),
  .list-search-field.is-half:has(.filter-options),
  .list-search-actions { grid-column: 1 / -1; }
  .list-search .filter-check { min-width: 0; }
  .list-search-actions { justify-self: stretch; margin-top: .5rem; }
  .list-search-actions > * { flex: 1 1 0; }
  /* 기간 줄은 한 줄을 통째로, 두 날짜 칸이 남은 폭을 반씩. 기간 버튼은 다음 줄부터, 사이 없이 붙인다 */
  .date-range { flex: 1 1 100%; gap: .25rem; }
  .date-range .input[type="date"] { flex: 1 1 0; width: auto; min-width: 0; padding-left: .35rem; padding-right: .2rem; }
  .date-step { width: 1.75rem; }
  .period-btns { gap: 0; }
  .period-btns + .period-btns { margin-left: 0; }
  .period-btn { padding: 0 .45rem; }   /* 달 묶음(3)과 분기 묶음(4)이 360px대 폰에서 한 줄에 들어가게 (2026-10-05) */
  .filter-chips { padding: .5rem 16px; }
  .list-search-toggle { display: inline-grid; place-items: center; }
  .list-search.is-foldable:not(.is-open) { display: none; }
}
@media (max-width: 767px) and (pointer: coarse) {
  .list-search .date-range .input[type="date"]::-webkit-calendar-picker-indicator { display: none; } /* 칸을 누르면 달력이 뜬다 - 그림 자리를 글자에 */
}