/* Filter/search bar -- design-handoffs/asportal-public/design-guide/
   Portal_Search.css, confirmed against its own .png. Structure/colors/
   sizes match admin's search.css closely (same select+search-box+button
   row, same inline "label | label" advanced-search pattern) -- the one
   real difference is Mobile, which the guide's own .png shows restacking
   in a way admin's purely-reactive flex-wrap never had to define:

   - Basic search: PC/Tablet is one row -- [select] [search box] [초기화
     button]. Mobile splits into two rows -- row 1 is [select] [초기화
     button] side by side, row 2 is the full-width search box *below*
     them. Achieved with `order` below rather than changing markup per
     breakpoint: the search box moves after the button in visual order
     and gets flex-basis: 100% to force its own line, all in one <form>
     with the same DOM order at every breakpoint.
   - Advanced/detail search: PC/Tablet keeps every "label | field" pair
     inline on one row (계정 선택 [select] | 등록일 [date]-[date]).
     Tablet is identical to PC here -- only Mobile stacks each pair into
     its own full-width block (label above its field), dropping the "|"
     divider since there's no longer a shared inline row to divide. */

.search-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 24px;
  background: var(--color-nav-bg);
  border-radius: var(--radius-md);
}

.search-area.open {
  gap: 24px;
  padding: 24px 4px 4px;
}

.search-fields {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 8px;
  width: 100%;
}

.search-fields .select,
.search-fields .field {
  flex: 0 1 120px;
  max-width: 120px;
  width: 120px;
  height: 36px;
  border-radius: var(--radius-md);
}

.search-fields .btn {
  flex: 0 0 auto;
}

.search-box {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  /* PC/Tablet uses the fixed 420px control from the Portal guide; mobile
     replaces this in its own breakpoint below. */
  flex: 0 0 420px;
  width: 420px;
  max-width: 100%;
  height: 36px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

.search-box:focus-within {
  border-color: var(--color-text-muted);
}

.search-box-input {
  flex: 1;
  min-width: 0;
  height: 100%;
  padding: 0 12px;
  border: none;
  background: none;
  font-family: var(--font-family);
  /* 16px, not 15px -- iOS Safari auto-zooms the whole page in on focus
     when a text input's own font-size is under 16px. Same fix applied
     to .login-input/.field, see that rule's own note. */
  font-size: 16px;
  letter-spacing: var(--letter-spacing-tight);
  color: var(--color-text-primary);
}

.search-box-input:focus {
  outline: none;
}

.search-box-input::placeholder {
  color: var(--color-text-placeholder);
}

.search-box-divider {
  flex: none;
  width: 1px;
  height: 20px;
  background: var(--color-border);
}

.search-box-submit {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 100%;
  padding: 0;
  border: none;
  background: none;
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  cursor: pointer;
}

.search-box-submit:active {
  background: var(--color-surface-muted);
}

@media (hover: hover) {
  .search-box-submit:hover {
    background: var(--color-surface-muted);
  }
}

.search-box-submit .icon {
  color: var(--color-text-muted);
}

.search-advanced {
  display: none;
  align-self: stretch;
  align-items: center;
  justify-content: center;
  gap: 8px 16px;
  flex-wrap: wrap;
  padding: 24px;
  background: var(--color-surface);
  border-radius: 0 0 var(--radius-md) var(--radius-md);
}

.search-advanced.open {
  display: flex;
}

.search-advanced .select,
.search-advanced .field {
  flex: 1 1 140px;
  max-width: 220px;
}

.search-advanced-label {
  flex: none;
  font-family: var(--font-family);
  font-size: 14px;
  color: var(--color-text-faint);
}

.search-advanced-divider {
  flex: none;
  width: 1px;
  height: 20px;
  background: var(--color-border);
}

.search-advanced-toggle {
  display: flex;
  align-items: center;
  gap: 4px;
  width: fit-content;
  margin: 0 auto;
  padding: 5px 12px;
  background: var(--color-nav-bg);
  border: none;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  color: var(--color-text-faint);
  font-family: var(--font-family);
  font-size: 14px;
  cursor: pointer;
}

.search-advanced-toggle .icon {
  transition: transform 0.15s ease;
}

.search-advanced-toggle:active {
  background: var(--color-surface-hover);
}

@media (hover: hover) {
  .search-advanced-toggle:hover {
    background: var(--color-surface-hover);
  }
}

.search-advanced-toggle.open {
  margin-top: 0;
}

.search-advanced-toggle.open .icon {
  transform: rotate(180deg);
}

@media (max-width: 767px) {
  /* select (order 0) + 초기화 (order 1) share row 1, search box (order 2)
     is always its own full-width row 2 below. The select must actually
     be able to shrink -- flex-basis: 0 + min-width: 0 remove its default
     intrinsic-content floor (a bare <select> resists shrinking below its
     longest <option> text otherwise) -- so it and 초기화 (fixed to its
     own natural width, flex: 0 0 auto) reliably stay paired on one row,
     edges lining up with the search box's full width below instead of
     each wrapping onto its own oddly-sized line ("pyramid" edges, caught
     via a real narrow-phone screenshot -- see DEV_LOG 2026-07-21, later
     entry). This two-row layout matches the design's own Mobile PNG
     (`design-handoffs/asportal-public/license status/M) Portal_패키지
     현황.png`) exactly and holds for the entire Mobile tier down to
     250px -- the further full-stack collapse below is a pathologically
     narrow desktop-resize case with no design coverage, see the
     `<=249px` tier below. */
  .search-fields .select {
    order: 0;
    flex: 1 1 0;
    min-width: 0;
    /* The base (always-on) rule above caps this at max-width: 220px --
       harmless at PC/Tablet where the row has plenty of other fields to
       share space with, but here it stopped the select from actually
       filling the row, leaving .search-fields's own justify-content:
       center to center the (short, capped) [select][초기화] pair inside
       a wide empty row instead of stretching to match the search box's
       full width below -- the real cause of the reported "pyramid". */
    max-width: none;
  }

  .search-fields .btn {
    order: 1;
    flex: 0 0 auto;
  }

  /* flex: 0 0 100% (not just a standalone flex-basis: 100% override) --
     the base rule's flex-grow: 3/flex-shrink: 1 stayed active otherwise,
     and percentage flex-basis inside a flex-wrap container is one of the
     genuinely inconsistent corners of the flexbox spec: this line's
     "0 remaining space to grow into" arithmetic doesn't reliably hold,
     confirmed via a real narrow-width overflow bug (.search-box computed
     to 230px wide inside a 210px-wide .search-fields at 290px viewport --
     .search-box-input's own min-width: 0 wasn't the gap, .search-box
     itself never had one, see DEV_LOG 2026-07-21, later entry). Fixing
     grow/shrink to 0 removes any ambiguity -- this box is always exactly
     the row's width, never more, never less. */
  .search-box {
    order: 2;
    flex: 0 0 100%;
    width: 100%;
    min-width: 0;
    max-width: none;
    box-sizing: border-box;
  }

  /* Each "label | field" advanced-search pair stacks into its own
     full-width block instead of staying inline -- the divider only made
     sense between two things sharing one row. */
  .search-advanced {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
  }

  .search-advanced-divider {
    display: none;
  }

  .search-advanced-label {
    display: block;
    margin-bottom: 8px;
  }

  .search-advanced .select,
  .search-advanced .field,
  .search-advanced .date-range-field {
    max-width: none;
    width: 100%;
  }
}

/* Pathologically narrow desktop-browser-resize case, not a real device
   width and not covered by any design export -- matches top.css's own
   <=249px tier for the same reason (교육신청 dropping from the Top bar).
   Below this, even select+초기화 shrunk to their bare minimums don't
   reliably fit side by side -- both switch to full-width rows of their
   own instead, matching the search box. Per explicit user clarification
   this was never meant to apply at real Mobile widths (250-767px), see
   DEV_LOG 2026-07-21. */
@media (max-width: 249px) {
  .search-fields .select,
  .search-fields .btn {
    flex: 1 1 100%;
  }
}