@charset "utf-8";
/* ==================================================
   jobs.css - 구인구직 목록 페이지 전용 스타일
   대상: pages/jobs/index.html

   [Source of Truth]
     docs/jobs/ITAMRA_JOBS_DOMAIN_AUDIT.md
     docs/jobs/ITAMRA_JOBS_IMPLEMENTATION_SPEC.md
     docs/jobs/jobs-web-implementation-guide.md
     docs/ui-policy.md
     docs/platform-scope-policy.md

   [이 파일의 성격]
   부동산 / 중고차 목록에서 검증된 아이탐라 PC Layout / Component /
   Interaction Convention을 재사용하되, Class와 정보구조는
   Jobs Domain 기준으로 독립 정의한다.

   - real-estate.css / cars.css 를 import 하거나
     .real-estate-* / .cars-* Class를 재사용하지 않는다.
     (Web Guide §17.2 : 재사용 대상은 Layout Pattern이고 Domain Schema가 아니다)
   - 부동산 전용 개념(거래유형 / 면적 / 방·욕실)이나
     중고차 전용 개념(제조사 / 차종 / 연식 / 주행거리 / 사고상태)에 대응하는
     Style을 이 파일에 만들지 않는다.
   - 공용 Component(.breadcrumb / .pagination / .main-wing / .wing-banner /
     .scroll-top)는 components.css 의 것을 그대로 쓰고 여기서 재정의하지 않는다.

   [Jobs Domain 특성 반영]
   구인구직은 Image 중심이 아니라 Text / 정보밀도 중심 Domain이다.
   Result는 3열 Grid를 쓰지만 부동산 / 중고차 같은 **Image Card가 아니라**
   기업 / 공고 / 근무조건 / 급여 / 마감정보를 담은 Information Card다.
   Card 상단에 대형 대표사진을 넣지 않는다.

   [Listing v1 변경 이력]
   1400 Content 내부의 우측 `Jobs Utility` Column(360px)을 제거하고
   확보한 폭을 Job Result에 넘겨 1열 가로형 List -> 3열 Card Grid로 바꿨다.
   1400 바깥의 40px Gap + 240px 광고 Wing은 변경하지 않았다.

   [Design Token]
   Color / Font Size / Spacing / Radius / Shadow 는 전부 tokens.css 참조다.
   이 파일에서 새 Token을 만들지 않았고 tokens.css 도 수정하지 않았다.
   새 HEX Color를 만들지 않았다.
   숫자 리터럴은 부동산 / 중고차 구현이 이미 확정해 둔 Component 내부 구현값
   (Control Height / Panel min-width / radio 점 크기 등)과
   이 페이지의 Grid 실측값(Result 1096 / Card 352 / Logo Box 38)만 사용한다.
================================================== */


/* ==================================================
   01. Page Shell
   .jobs-page 는
   <main class="main-layout main-layout--sub jobs-page"> 에 함께 붙는다.
   Layout 골격(1400 + 40 + 240)은 main-layout 이, Domain Context는 이 Class가 갖는다.

   Wing 노출 근거: docs/ui-policy.md "Wing 노출 화면" 목록의 `구인구직 목록`.
   (같은 문서에서 `구인구직 상세`는 미노출이다. 이 파일은 목록 전용이다)

   .main-layout__content 에 좌우 Padding을 두지 않는다.
   Main Content 실폭 = 1400px 이고, 여백 책임은 각 Component가 진다.
================================================== */

/* 하단 ↔ Footer 여백(64px)은 layout.css 의 .main-layout--sub 가 담당한다 (공용화 2026-08-31) */


/* ==================================================
   02. Page Head
   Breadcrumb → Page Title + Subtitle
   Main Content(1400px) Left Edge에 그대로 정렬한다.

   시안의 `구인정보 / 인재정보` 상위 Tab Bar에 해당하는 Style은
   Markup 자체가 없으므로 이 파일에도 없다.
================================================== */

.jobs-page__breadcrumb {
  padding-top: var(--space-6);
}

.jobs-page__head {
  margin-top: var(--space-3);
}

.jobs-page__title {
  color: var(--text-primary);
  font-size: var(--text-page-title-size); /* 32px */
  font-weight: var(--text-page-title-weight);
  line-height: var(--text-page-title-line-height);
}

.jobs-page__subtitle {
  margin-top: var(--space-2);
  color: var(--text-secondary);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-normal);
}


/* ==================================================
   03. Search + 실시간 인기검색어

   메인 Hero의 .hero-search 를 복제하지 않는다.
   Hero는 Landscape 위 Floating Bar(Shadow)이고 이쪽은 White 위 Inline
   Control(Border)이라 Surface 규칙이 다르다. (tokens.css Shadow 정책)

   Search Bar를 Content 전체 폭(1400)으로 늘리지 않는다.
   입력 시작점과 Button이 지나치게 멀어지므로 부동산 / 중고차와 같은 상한을 둔다.

   검색 Backend Contract가 확정되지 않았으므로 Markup에서
   data-domain-status="ui-mock" 으로 표기하고 실제 검색 로직을 만들지 않는다.
================================================== */

.jobs-search {
  margin-top: var(--space-6);
}

.jobs-search__form {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  max-width: 720px; /* 부동산 / 중고차 Search와 동일 상한 */
  height: 56px;     /* 8 + 40 + 8 */
  padding: var(--space-2) var(--space-2) var(--space-2) var(--space-5);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  background-color: var(--surface-default);
}

.jobs-search__form:focus-within {
  border-color: var(--border-focus);
  outline: 2px solid var(--border-focus);
  outline-offset: 2px;
}

/* 공용 Search Asset(assets/icons/search/search-magnifier.svg) 재사용.
   구인구직 전용 Icon Asset을 새로 만들지 않는다. */
.jobs-search__icon {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
}

.jobs-search__icon-image {
  display: block;
  width: 100%;
  height: 100%;
}

.jobs-search__input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: none;
  color: var(--text-primary);
  font-size: var(--font-size-base);
  line-height: var(--line-height-normal);
}

.jobs-search__input::placeholder {
  color: var(--text-tertiary);
}

.jobs-search__input:focus {
  outline: none; /* Focus Ring은 __form(:focus-within)이 담당 */
}

.jobs-search__button {
  flex-shrink: 0;
  height: 40px;
  padding: 0 var(--space-6);
  border-radius: var(--radius-md);
  /* Primary Button은 --brand-secondary 다. --brand-primary 는 Brand Identity 전용 */
  background-color: var(--brand-secondary);
  color: var(--text-inverse);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-normal);
  transition: background-color var(--transition-fast);
}

.jobs-search__button:hover {
  background-color: var(--brand-interaction);
}

.jobs-search__button:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 2px;
}

/* ---------- 실시간 인기검색어 ----------
   `[UI MOCK]` : Ranking Domain / Search Log Contract가 없다.
   표시만 하고 집계 / 순위 변동 / Score 계산을 구현하지 않는다. */

.jobs-search__keyword {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-4);
}

.jobs-search__keyword-title {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  gap: var(--space-2);
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-normal);
}

.jobs-search__keyword-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
}

.jobs-search__keyword-icon-image {
  display: block;
  width: 100%;
  height: 100%;
}

.jobs-search__keyword-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  min-width: 0;
}

.jobs-search__keyword-tag {
  display: inline-flex;
  align-items: center;
  height: 30px;
  padding: 0 var(--space-3);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-pill);
  background-color: var(--surface-default);
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-normal);
  white-space: nowrap;
  transition: border-color var(--transition-fast), background-color var(--transition-fast),
              color var(--transition-fast);
}

.jobs-search__keyword-tag:hover {
  border-color: var(--brand-secondary);
  background-color: var(--bg-brand-light);
  color: var(--brand-secondary);
}

.jobs-search__keyword-tag:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 2px;
}


/* ==================================================
   04. Quick Filter (5종)
   Web Guide §9.1 : 지역 / 직종 / 고용형태 / 급여 / 상세필터

   [Bar를 5개 초과로 늘리지 않는다]
   Jobs Quick Filter 표준이 정확히 이 5종이다.

   [상세필터 Trigger]
   Mobile은 바텀시트지만 PC는 좌측 Detail Filter Panel이 항상 열려 있다.
   그래서 5번째 항목은 Dropdown이 아니라 좌측 Panel로 이동하는 Anchor Action이다.

   Chip 표현은 부동산 / 중고차 Quick Filter와 동일한 Design Language를 따른다.
   (White Surface + 1px --border-default + radius 10px + height 42px)
================================================== */

.jobs-quick-filter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-5) 0;
}

/* Dropdown 기준점. Item 자체가 아니라 Host가 갖는다 */
.jobs-quick-filter__field {
  position: relative;
  display: flex;
}

.jobs-quick-filter__item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  height: 42px;
  padding: 0 var(--space-4);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background-color: var(--surface-default);
  font-size: var(--font-size-md); /* 14px */
  line-height: var(--line-height-normal);
  white-space: nowrap;
  transition: border-color var(--transition-fast), background-color var(--transition-fast),
              color var(--transition-fast);
}

.jobs-quick-filter__item:hover {
  border-color: var(--brand-secondary);
  background-color: var(--bg-brand-light);
  color: var(--brand-secondary);
}

.jobs-quick-filter__item:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 2px;
}

/* Open 상태 : Header Dropdown(.is-open)과 동일한 상태 문법 */
.jobs-quick-filter__field.is-open .jobs-quick-filter__item {
  border-color: var(--brand-secondary);
  background-color: var(--bg-brand-light);
}

.jobs-quick-filter__label {
  color: var(--text-tertiary);
  font-weight: var(--font-weight-regular);
}

.jobs-quick-filter__value {
  color: var(--text-primary);
  font-weight: var(--font-weight-semibold);
}

.jobs-quick-filter__item.is-selected {
  border-color: var(--brand-secondary);
  background-color: var(--surface-selected);
}

.jobs-quick-filter__item.is-selected .jobs-quick-filter__value {
  color: var(--brand-secondary);
}

.jobs-quick-filter__arrow {
  color: var(--text-tertiary);
  font-size: var(--font-size-xs);
  line-height: 1;
}

/* 5번째 `상세필터` — Dropdown이 아니라 좌측 Panel로 이동하는 Action.
   Value / Arrow가 없으므로 Label 하나만 기본 Text 굵기로 읽는다. */
.jobs-quick-filter__item--detail .jobs-quick-filter__label {
  color: var(--text-primary);
  font-weight: var(--font-weight-semibold);
}

/* ---------- Quick Filter Dropdown Panel ---------- */

.jobs-quick-filter__panel {
  position: absolute;
  top: calc(100% + var(--space-2));
  left: 0;
  z-index: var(--z-dropdown);
  min-width: 200px;
  padding: var(--space-2);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background-color: var(--surface-default);
  /* 실제로 떠 있는 요소이므로 Shadow를 사용한다 */
  box-shadow: var(--shadow-md);
}

.jobs-quick-filter__panel[hidden] {
  display: none;
}

.jobs-quick-filter__panel--wide {
  min-width: 260px;
}

/* 직종은 canonical 대분류가 12개다. 선택지를 임의로 줄이지 않고
   Panel 안에서만 스크롤한다. Scrollbar는 좁은 Picker의 시각 노이즈라
   숨기고 Scroll 기능(Wheel / Keyboard / Tab Focus)은 그대로 유지한다. */
.jobs-quick-filter__panel--scroll {
  max-height: 320px;
  overflow-y: auto;
  scrollbar-width: none;      /* Firefox */
  -ms-overflow-style: none;   /* 구형 Edge / IE */
}

.jobs-quick-filter__panel--scroll::-webkit-scrollbar {
  display: none;
}

.jobs-quick-filter__option {
  display: block;
  width: 100%;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  font-size: var(--font-size-md);
  line-height: var(--line-height-normal);
  text-align: left;
  white-space: nowrap;
  transition: background-color var(--transition-fast), color var(--transition-fast);
}

.jobs-quick-filter__option:hover {
  background-color: var(--surface-hover);
  color: var(--brand-secondary);
}

.jobs-quick-filter__option.is-selected {
  background-color: var(--surface-selected);
  color: var(--brand-secondary);
  font-weight: var(--font-weight-semibold);
}

.jobs-quick-filter__option:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: -2px;
}

/* 급여 Panel 하단 안내.
   Quick Filter `급여`가 금액이 아니라 **급여형태** 선택이라는 사실을
   UI에서 직접 읽히게 한다(§9.1 / §7.3). */
.jobs-quick-filter__note {
  margin-top: var(--space-2);
  padding: var(--space-2) var(--space-3) var(--space-1);
  border-top: 1px solid var(--border-light);
  color: var(--text-tertiary);
  font-size: var(--font-size-xs);
  line-height: var(--line-height-normal);
  white-space: normal;
}


/* ==================================================
   05. Body Layout — 1400 Content 내부 2 Column

     Detail Filter(280) + Gap(24) + Job Result(1096) = 1400

   [Listing v1 변경 — Jobs Utility Column 제거]
   기존 `Detail Filter(280) + Gap(24) + Job List(712) + Gap(24) + Utility(360)`
   3 Column에서 우측 Jobs Utility Column을 제거했다.
   확보한 폭(360 + Gap 24 = 384)은 전부 Job Result가 가져가
   Job List 712 -> Job Result 1096 이 되고, 여기에 3열 Card Grid가 들어간다.
   Utility를 다른 위치로 옮긴 것이 아니라 이 화면에서 제거한 것이다.

   [광고 Wing은 그대로다]
   광고 Wing(240)은 이 Grid 바깥, .main-layout__inner 의 두 번째 Column이며
   Gap 40으로 분리되어 1680 Service Frame을 완성한다.
   Utility 제거와 무관하게 유지되며 이 Grid에 --wing-width 를 쓰지 않는다.

   [Filter Column]
   기존 --sidebar-width(280px) Token을 그대로 쓴다. 축소하지 않았다.
   Sidebar(Filter/Navigation)와 Wing(Advertisement)은 다른 개념이다.
   (CLAUDE.md / ui-policy.md)

   [Result Column]
   minmax(0, 1fr) : Viewport가 1680보다 좁아져 Content Column이 줄어도
   Result가 먼저 줄고 가로 Overflow가 발생하지 않게 한다.
   Card Grid도 minmax(0, 1fr) 3열이라 열 수가 바뀌지 않는다.
   ui-policy.md 기준 Breakpoint가 미확정이므로 Media Query를 두지 않는다.

   align-items: start : Filter Column이 Result 높이만큼 늘어나지 않게 한다.
================================================== */

.jobs-body {
  display: grid;
  grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
  column-gap: var(--space-6);
  align-items: start;
}


/* ==================================================
   06. Detail Filter (좌측 10종)
     지역 / 직종 / 고용형태 / 급여형태 / 급여금액 /
     근무요일 / 근무시간 / 경력 / 학력 / 모집상태

   [10종을 줄이지 않는다 — Web Guide §9.2]
   급여금액 / 근무요일 / 근무시간 / 경력 / 학력 5종은 카드 데이터 부족으로
   `[MISMATCH]` 상태지만, 필터 항목 자체는 `[DECIDED]` 표준이므로
   삭제하지 않고 UI로 모두 구성한다. Markup에 data-domain-status="later" 표기.

   [밀도 정책]
   Group이 10개라 전부 펼치면 Panel이 과도하게 길어진다.
   신규 Interaction을 만들지 않고 부동산 / 중고차와 동일하게
   <details>/<summary> Accordion을 쓰며, 초기 open은
   Quick Filter와 겹치는 상위 4종뿐이다.

   [Input 형태]
     단일 선택 완전 일치 조건 (지역 / 직종 / 고용형태 / 급여형태 /
     경력 / 학력 / 모집상태) → radio
     등록 UI가 복수 토글인 조건 (근무요일 / 근무시간)            → checkbox
     금액                                                        → number
================================================== */

.jobs-filter {
  position: sticky;
  top: var(--space-5); /* 스크롤 시 상단 20px */
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  background-color: var(--surface-default);
}

.jobs-filter__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-5) var(--space-5) var(--space-4);
  border-bottom: 1px solid var(--border-light);
}

.jobs-filter__heading {
  min-width: 0;
}

.jobs-filter__title {
  color: var(--text-primary);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-snug);
}

/* 선택 개수는 Quick / Detailed 공유 state 하나에서 센다.
   같은 조건이 양쪽 UI에 있다고 2번 세지 않는다(요청 §44). */
.jobs-filter__selected {
  margin-top: var(--space-1);
  color: var(--text-tertiary);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-normal);
}

.jobs-filter__body {
  /* Group 10개가 Panel이 화면을 넘기지 않도록 Panel 안에서만 스크롤한다.
     Sticky top(20) + Header(약 78) + 하단 여유(30) 를 뺀 값이다. */
  max-height: calc(100vh - 130px);
  overflow-y: auto;

  /* Scrollbar 시각적 숨김 (Scroll 기능은 그대로 유지)
     Wheel / Trackpad / Keyboard / Tab Focus 이동이 전부 정상 동작한다. */
  scrollbar-width: none;      /* Firefox */
  -ms-overflow-style: none;   /* 구형 Edge / IE */
}

.jobs-filter__body::-webkit-scrollbar {
  display: none;
}

/* ---------- Filter Group (Accordion) ---------- */

.jobs-filter__group {
  border-bottom: 1px solid var(--border-light);
}

.jobs-filter__group-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-5);
  color: var(--text-primary);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-normal);
  cursor: pointer;
  list-style: none; /* 기본 삼각형 Marker 제거 (Firefox) */
}

/* 기본 삼각형 Marker 제거 (Chromium / Safari) */
.jobs-filter__group-title::-webkit-details-marker {
  display: none;
}

.jobs-filter__group-title:hover {
  color: var(--brand-secondary);
}

.jobs-filter__group-title:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: -2px;
}

.jobs-filter__group-arrow {
  flex-shrink: 0;
  color: var(--text-tertiary);
  font-size: var(--font-size-xs);
  line-height: 1;
  transition: transform var(--transition-fast);
}

.jobs-filter__group[open] .jobs-filter__group-arrow {
  transform: rotate(180deg);
}

.jobs-filter__group-body {
  padding: 0 var(--space-5) var(--space-5);
}

/* ---------- Option List ---------- */

.jobs-filter__options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3) var(--space-2);
}

.jobs-filter__options--single {
  grid-template-columns: minmax(0, 1fr);
}

.jobs-filter__option-item {
  min-width: 0;
}

.jobs-filter__option-label {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  color: var(--text-secondary);
  font-size: var(--font-size-sm); /* 13px */
  line-height: var(--line-height-normal);
  cursor: pointer;
  transition: color var(--transition-fast);
}

.jobs-filter__option-label:hover {
  color: var(--brand-secondary);
}

/* 공통 Form Control Component가 아직 없어 Domain Namespace로 둔다.
   native input을 숨기지 않고 appearance:none 으로 직접 그리므로
   Focus / Keyboard / Screen Reader 동작이 그대로 유지된다.
   부동산 / 중고차 Filter와 동일한 Component 내부 구현값을 따른다. */
.jobs-filter__option-input {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin: 1px 0 0; /* 13px Text의 첫 줄 중앙에 맞춘다 */
  appearance: none;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-pill);
  background-color: var(--surface-default);
  transition: border-color var(--transition-fast), background-color var(--transition-fast);
}

/* 복수 선택(근무요일 / 근무시간)은 원형이 아니라 사각 Check로 구분한다 */
.jobs-filter__option-input--check {
  border-radius: var(--radius-sm);
}

.jobs-filter__option-input:checked {
  border-color: var(--brand-secondary);
  background-color: var(--brand-secondary);
}

.jobs-filter__option-input:checked::after {
  content: "";
  display: block;
  /* 18px Box(테두리 1px 포함)의 안쪽 16px 기준 중앙에 6px 점.
     부동산 / 중고차 radio와 동일한 Component 내부 구현값이다. */
  width: 6px;
  height: 6px;
  margin: 5px auto;
  border-radius: var(--radius-pill);
  background-color: var(--text-inverse);
}

.jobs-filter__option-input--check:checked::after {
  /* Check Mark : 회전한 ㄴ자 두 변. 새 Asset을 만들지 않는다 */
  width: 5px;
  height: 9px;
  margin: 2px auto;
  border: solid var(--text-inverse);
  border-width: 0 2px 2px 0;
  border-radius: 0;
  background: none;
  transform: rotate(45deg);
}

.jobs-filter__option-input:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 2px;
}

.jobs-filter__option-input:checked + .jobs-filter__option-text {
  color: var(--brand-secondary);
  font-weight: var(--font-weight-medium);
}

.jobs-filter__option-text {
  min-width: 0;
  word-break: keep-all;
}

/* Group 안에서 축을 나눌 때 쓰는 소제목 (근무요일의 `요일 직접 선택`) */
.jobs-filter__subgroup {
  margin-top: var(--space-4);
}

.jobs-filter__subgroup-title {
  margin-bottom: var(--space-2);
  color: var(--text-tertiary);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-normal);
}

/* ---------- 요일 직접 선택 (월~일) ----------
   §7.4 등록 UI의 `요일 직접 토글`을 같은 조작감으로 옮긴 것이다.
   7개가 한 줄에 들어가야 하므로 Checkbox Label이 아니라 Chip Toggle로 그린다.
   native checkbox는 .sr-only 로 남겨 Keyboard / Screen Reader 동작을 유지한다. */

.jobs-filter__days {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: var(--space-1);
}

.jobs-filter__day-item {
  min-width: 0;
}

.jobs-filter__day-label {
  display: block;
  cursor: pointer;
}

.jobs-filter__day {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 30px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  background-color: var(--surface-default);
  color: var(--text-secondary);
  font-size: var(--font-size-xs);
  line-height: 1;
  transition: border-color var(--transition-fast), background-color var(--transition-fast),
              color var(--transition-fast);
}

.jobs-filter__day-label:hover .jobs-filter__day {
  border-color: var(--brand-secondary);
  color: var(--brand-secondary);
}

.jobs-filter__day-input:checked + .jobs-filter__day {
  border-color: var(--brand-secondary);
  background-color: var(--surface-selected);
  color: var(--brand-secondary);
  font-weight: var(--font-weight-semibold);
}

.jobs-filter__day-input:focus-visible + .jobs-filter__day {
  outline: 2px solid var(--border-focus);
  outline-offset: 2px;
}

/* Group 안 보조 문구 */
.jobs-filter__note {
  margin-top: var(--space-2);
  color: var(--text-tertiary);
  font-size: var(--font-size-xs);
  line-height: var(--line-height-normal);
}

/* ---------- 초기화 (Header Text Action) ----------
   Filter Option을 선택하는 즉시 결과가 갱신되는 Interaction 기준이므로
   하단 [적용하기] Action을 두지 않는다.
   선택 0개일 때는 disabled 로 두어 강조하지 않는다.
   (숨기지 않는 이유: 개수가 바뀔 때 Header 높이가 흔들리지 않게 하기 위함)

   초기화는 Quick / Detailed 공유 state 전체를 되돌린다(요청 §45). */

.jobs-filter__reset {
  flex-shrink: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-normal);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color var(--transition-fast);
}

.jobs-filter__reset:not(:disabled):hover {
  color: var(--brand-secondary);
}

.jobs-filter__reset:disabled {
  color: var(--text-disabled);
  text-decoration: none;
}

.jobs-filter__reset:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}


/* ==================================================
   07. 급여금액 Input

   [Domain 근거 — 매우 중요]
   Web Guide §7.3 : 금액 범위는 **같은 급여형태의 금액에만** 적용한다.
   서로 다른 급여형태(시급 ↔ 월급 ↔ 연봉) 간 임의 환산을 하지 않는다.

   그래서 이 Component는 급여형태에 종속된다.
     급여형태 `전체` / `협의` → disabled (금액 비교 자체를 하지 않는다)
     그 외                     → enabled + 해당 급여형태의 단위 표시

   Domain에 최대 금액 key가 없으므로 `최소 금액 이상` 단일 입력만 둔다.
   부동산 / 중고차의 Range Component를 가져오지 않는다.
================================================== */

.jobs-amount__row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.jobs-amount__field {
  display: flex;
  flex: 1;
  min-width: 0;
  align-items: center;
  gap: var(--space-1);
  height: 38px;
  padding: 0 var(--space-3);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  background-color: var(--surface-default);
  transition: border-color var(--transition-fast), background-color var(--transition-fast);
}

.jobs-amount__field:focus-within {
  border-color: var(--border-focus);
}

/* 급여형태 미선택 / 협의 상태 */
.jobs-amount__field.is-disabled {
  border-color: var(--border-light);
  background-color: var(--bg-muted);
}

.jobs-amount__input {
  width: 100%;
  min-width: 0;
  border: 0;
  background: none;
  color: var(--text-primary);
  font-size: var(--font-size-md);
  line-height: var(--line-height-normal);
  text-align: right;
  font-variant-numeric: tabular-nums;
  /* Number Spinner는 Filter 폭을 잡아먹어 숨긴다 */
  appearance: textfield;
}

.jobs-amount__input::-webkit-outer-spin-button,
.jobs-amount__input::-webkit-inner-spin-button {
  margin: 0;
  appearance: none;
}

.jobs-amount__input::placeholder {
  color: var(--text-tertiary);
}

.jobs-amount__input:disabled {
  color: var(--text-disabled);
  cursor: not-allowed;
}

.jobs-amount__input:focus {
  outline: none; /* Focus Ring은 __field(:focus-within)가 담당 */
}

.jobs-amount__unit,
.jobs-amount__suffix {
  flex-shrink: 0;
  color: var(--text-tertiary);
  font-size: var(--font-size-sm);
  line-height: 1;
  white-space: nowrap;
}


/* ==================================================
   08. Result Area (가운데)
================================================== */

.jobs-results {
  min-width: 0;
}

/* ---------- Result Header ----------
   읽어야 할 정보 위계는 2개뿐이다. Result Count / Sort

     [ 구인공고  총 1,284건 ]                       [ 최신등록순 ▼ ]

   Count 단위는 공고라 `건`이다. 1,284는 `[UI MOCK]` 이다.
   Grid / List View Toggle을 두지 않는다. v1은 List View 단일이다. */

.jobs-results__header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-3);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--border-default);
}

.jobs-results__heading {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-3); /* 12px */
  min-width: 0;
}

/* Page Title(32px)보다 낮고 Card Title(16px)보다 높다 */
.jobs-results__title {
  color: var(--text-primary);
  font-size: var(--font-size-xl); /* 20px */
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-snug);
}

.jobs-results__count {
  color: var(--text-tertiary);
  font-size: var(--font-size-md);
  line-height: var(--line-height-normal);
  white-space: nowrap; /* `총 1,284건`이 중간에서 끊기지 않게 */
}

.jobs-results__count-value {
  color: var(--brand-secondary);
  font-weight: var(--font-weight-bold);
  font-variant-numeric: tabular-nums;
}

.jobs-results__controls {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

/* ---------- Sort ----------
   Web Guide §9.3 : 구인구직 정렬 표준은 `[UNKNOWN]` 이다.
   Component만 재사용하고 sortKey / sortOrder 같은 Contract를 만들지 않는다.
   Option Set은 Markup에서 data-domain-status="ui-mock" 으로 표기한다.
   급여 정렬 Option은 급여형태 간 환산을 요구하므로 두지 않았다(§7.3). */

.jobs-sort {
  position: relative;
  display: flex;
}

.jobs-sort__trigger {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  height: 36px;
  padding: 0 var(--space-3);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  background-color: var(--surface-default);
  color: var(--text-primary);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-normal);
  white-space: nowrap;
  transition: border-color var(--transition-fast), color var(--transition-fast);
}

.jobs-sort__trigger:hover {
  border-color: var(--brand-secondary);
  color: var(--brand-secondary);
}

.jobs-sort.is-open .jobs-sort__trigger {
  border-color: var(--brand-secondary);
  color: var(--brand-secondary);
}

.jobs-sort__trigger:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 2px;
}

.jobs-sort__arrow {
  color: var(--text-tertiary);
  font-size: var(--font-size-xs);
  line-height: 1;
}

.jobs-sort__panel {
  position: absolute;
  top: calc(100% + var(--space-2));
  right: 0;
  z-index: var(--z-dropdown);
  min-width: 160px;
  padding: var(--space-2);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background-color: var(--surface-default);
  box-shadow: var(--shadow-md);
}

.jobs-sort__panel[hidden] {
  display: none;
}

.jobs-sort__option {
  display: block;
  width: 100%;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-normal);
  text-align: left;
  white-space: nowrap;
  transition: background-color var(--transition-fast), color var(--transition-fast);
}

.jobs-sort__option:hover {
  background-color: var(--surface-hover);
  color: var(--brand-secondary);
}

.jobs-sort__option.is-selected {
  background-color: var(--surface-selected);
  color: var(--brand-secondary);
  font-weight: var(--font-weight-semibold);
}

.jobs-sort__option:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: -2px;
}


/* ==================================================
   09. Result Grid / Job Card (3열 Information Card)

   [Image Card가 아니라 Information Card다 — 요청 §8]
   부동산 / 중고차처럼 Card 상단에 대형 대표사진을 넣지 않는다.
   구인구직 Card의 핵심은 기업 / 공고 / 근무조건 / 급여 / 마감정보이고,
   사용자는 사진이 아니라 텍스트로 여러 공고를 빠르게 비교한다.

   [Grid 실측]
     Result Width = 1400 - 280(Filter) - 24(Gap) = 1096
     Card Width   = (1096 - 20 x 2) / 3          = 352
     Card 내부 폭  = 352 - 20 x 2 (좌우 Padding)  = 312

   repeat(3, minmax(0, 1fr)) : Card 3장이 항상 같은 폭이고 세 번째 Card의
   오른쪽 Edge가 Result Right Edge와 정확히 맞는다. minmax(0, 1fr) 이라
   Viewport가 좁아져도 Overflow 없이 Card 폭만 줄어들고 열 수는 3열로 유지된다.
   결과가 3의 배수가 아니어도 마지막 행은 왼쪽부터 자연스럽게 채워진다.

   [Card Height 안정화 — 요청 §26]
   Grid Item은 기본 stretch 라 같은 행의 Card 높이는 언제나 동일하다.
   행 간 편차는 아래 4가지로 잡는다. 고정 height로 내용을 잘라내지 않는다.
     1) 제목 2줄 clamp (1줄 제목도 2줄 높이를 예약한다)
     2) 근무조건 / 급여 / 태그는 각각 1줄 고정 + ellipsis
     3) 하단 Meta(D-day / 등록일)를 margin-top:auto 로 바닥에 붙인다
     4) Logo Box 높이 고정
================================================== */

.jobs-results__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-5); /* 20px */
  margin-top: var(--space-5);
}

/* 2px Border / 강한 Shadow / Gradient 를 쓰지 않는다.
   Lift / Scale Animation도 쓰지 않는다. */
.job-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  height: 100%;
  padding: var(--space-5);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg); /* 14px */
  background-color: var(--surface-default);
  transition: box-shadow var(--transition-fast);
}

/* 이 Rule은 목록과 상세(`이 회사의 다른 공고`)가 함께 쓴다.
   detail.html 이 jobs.css 를 같이 로드하기 때문이다.

   [제거한 선언]
   `border-color: var(--border-strong)` 는 기본 Border와 **같은 값**이라
   Hover에서 아무것도 바꾸지 않는 죽은 선언이었다. 함께 transition에 걸려 있던
   border-color 도 뺐다. 기본 Border는 그대로 유지한다(Hover에서 건드리지 않는다). */
.job-card:hover {
  box-shadow: var(--shadow-md);
}

/* ---------- Jobs 목록 Card Hover Elevation ----------
   목록의 Card는 `읽는 면`이 아니라 `누르는 면`이라 Hover Feedback이 필요하다.
   기본 Border가 이미 --border-strong 이라 Boundary는 충분히 서 있고,
   Border를 더 진하게 하거나 Background Tint를 넣으면 Hover가 과해진다.
   그래서 Feedback은 Elevation 하나로만 표현한다.

     Card    --shadow-md (0 4px 16px rgba(17,32,51,0.08))
     Title   기존 .job-card__link:hover (--brand-secondary) 그대로

   Shadow가 제목 Color 변화보다 세게 보이면 안 되므로 --shadow-lg 를 쓰지 않았고,
   새 Shadow Token도 만들지 않았다. Blur 16px < Card Gap 20px 이라
   옆 Card와 Shadow가 겹쳐 보이지 않는다.

   [Scope]
   `.jobs-results__grid` 는 pages/jobs/index.html 에만 있는 Wrapper다.
   좌측 상세조건 Filter(Static Utility Surface) / Wing / Header / Dropdown /
   상세의 `이 회사의 다른 공고` / `최근 본 채용공고` / 다른 Domain Card에는
   이 Elevation이 전파되지 않는다. */
.jobs-results__grid .job-card:hover {
  box-shadow: 0 8px 12px rgba(12, 22, 36, 0.2);
}

/* ---------- 1) 기업 Logo + 관심 ---------- */

.job-card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-2);
}

/* Logo Box — 요청 §11 / §12
   원본이 110x38 / 84x32 두 비율이라 고정 Box 안에서 담는다.
   object-fit: contain 은 작은 Logo를 Box 크기까지 **확대**하므로 쓰지 않고,
   max-width/max-height + width:auto 로 원본보다 커지지 않게 한다.
     - 원본 비율 유지 / Stretch 없음 / Crop 없음 / 확대 없음
   배경은 Design Token(--surface-default)만 쓴다.
   Logo마다 배경색을 임의 생성하지 않는다. */
.job-card__logo {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: flex-start;
  width: 120px;
  height: 38px; /* 원본 Logo 최대 높이 */
  background-color: var(--surface-default);
}

.job-card__logo-image {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
}

.job-card__favorite {
  position: relative;
  z-index: 1; /* .job-card__link::after 위에 둔다 */
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin: calc(var(--space-1) * -1) calc(var(--space-2) * -1) 0 0;
  border-radius: var(--radius-pill);
  color: var(--text-tertiary);
  transition: color var(--transition-fast), background-color var(--transition-fast);
}

.job-card__favorite:hover {
  background-color: var(--bg-muted);
  color: var(--brand-secondary);
}

.job-card__favorite:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 2px;
}

.job-card__favorite-icon {
  font-size: var(--font-size-lg);
  line-height: 1;
}

/* 관심 **수치**는 만들지 않는다(§16 `[UNKNOWN]`). 상태 색만 바뀐다 */
.job-card__favorite.is-active {
  color: var(--error);
}

/* ---------- 2) Header Group : 공고 제목 + 업체명·직종 ----------
   Card Information Hierarchy
     1 Identity   기업 Logo
     2 Primary    공고 제목        <- Logo 바로 아래 핵심 Text
     3 Secondary  업체명 · 직종     <- 제목의 Subtitle / Metadata

   제목과 업체명을 한 Element(.job-card__heading)로 묶는다.
   묶지 않으면 아래 2줄 기준 높이 예약이 제목에만 걸려서
   1줄 제목 Card에서 예약된 빈 줄이 **제목과 업체명 사이**에 들어가고
   Header Group이 두 덩어리로 쪼개져 보인다.
   Group에 걸면 남는 공간이 Group **아래**로 밀려 Section 간격이 된다.

   [2줄 기준 높이를 예약하지 않는다]
   Header Group에 2줄 높이를 예약하면 1줄 제목 Card에서 남는 한 줄이
   Group 아래 여백으로 그대로 남아, Header Group ↔ Conditions 사이가
   30px대로 벌어진다. 이는 이번 개선의 목적(관련 정보끼리 밀접하게)과
   정면으로 어긋나고, 실제로 Mock 10건 중 2줄 제목이 없는 현재 상태에서는
   **모든 Card가 쓰지도 않는 빈 줄을 예약**하게 된다.
   그래서 예약을 두지 않고 Header Group ↔ Conditions 를 8px로 붙인다.

   1줄 제목 Card와 2줄 제목 Card가 같은 Row에 섞이면 그 아래
   업체명 / 근무조건 / 급여 / 태그의 Y 위치가 제목 한 줄(약 22px)만큼
   차이 난다. 대신 아래 두 가지로 Row 안정성을 지킨다.
     - 제목은 2줄 clamp라 차이가 최대 한 줄(약 22px)을 넘지 않는다
     - Card 높이는 Grid stretch, Divider / Footer 위치는
       .job-card__foot 의 margin-top:auto 로 **항상 정확히 일치**한다
   (Y 정렬을 밀도보다 우선하려면 이 Rule에 아래 min-height 를 되살리면 된다.
      min-height: calc(var(--font-size-base) * var(--line-height-snug) * 2
                     + var(--space-1)
                     + var(--font-size-sm) * var(--line-height-normal)); ) */

.job-card__heading {
  margin-top: var(--space-3); /* Logo ↔ Header Group */
  min-width: 0;
}

/* 업체명 + 직종 : Logo와 연계되는 Secondary Identity.
   제목 바로 아래 4px 라 제목과 한 덩어리로 읽힌다.
   긴 업체명은 ellipsis, 직종은 flex-shrink:0 이라 밀리지 않는다. */

.job-card__company {
  display: flex;
  align-items: baseline;
  gap: var(--space-1);
  margin-top: var(--space-1); /* Title ↔ Subtitle : Header Group 내부 간격 */
  min-width: 0;
}

.job-card__company-name {
  min-width: 0;
  overflow: hidden;
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-normal);
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 직종 대분류. 업체명과 구분되도록 앞에 구분점을 둔다 */
.job-card__category {
  flex-shrink: 0;
  color: var(--text-tertiary);
  font-size: var(--font-size-xs);
  line-height: var(--line-height-normal);
  white-space: nowrap;
}

.job-card__category::before {
  content: "·";
  margin-right: var(--space-1);
  color: var(--text-disabled);
}

/* 공고 제목 : Card의 Primary Title. 업체명(13px)보다 높은 위계다.
   최대 2줄 후 Clamp / Ellipsis.
   높이 예약은 .job-card__heading 이 담당하므로 여기서는 걸지 않는다.
   Typography(16px / semibold)는 기존 값을 그대로 유지한다. */

.job-card__title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  color: var(--text-primary);
  font-size: var(--font-size-base); /* 16px */
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-snug);
}

.job-card__link {
  color: inherit;
}

/* Card 전체를 Click 영역으로 확장한다. Favorite Button은 z-index로 위에 둔다 */
.job-card__link::after {
  content: "";
  position: absolute;
  inset: 0;
}

.job-card__link:hover {
  color: var(--brand-secondary);
}

.job-card__link:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* ---------- 4) Location Metadata : 근무지역 · 경력 ----------
   §8.1 근무조건 항목 중 목록 Card에 노출하는 것은 근무지역 / 경력까지다.

   [DISPLAY DECISION — 고용형태 / 근무요일 / 근무시간 목록 비노출]
   3열 Card에서 탐색 판단에 실제로 쓰이는 정보
   (제목 · 기업 · 분야 · 지역 · 경력 · 급여 · 복리후생 · 마감)의 밀도를 높이기 위해
   `고용형태 · 근무요일/근무시간` 2번째 Row를 목록 Card에서 내렸다.
   Domain Field를 제거한 것이 아니라 목록 Display에서만 감춘 것이다.
     - 값은 article 의 data-employment / data-work-days / data-work-times 에 그대로 있다
     - 고용형태 Quick Filter / Detailed Filter, 근무요일 · 근무시간대 Filter는 그대로다
     - 상세 화면에서는 계속 노출한다

   [Dead CSS 정리 — 요청 §27]
   Row가 1줄이 되면서 <ul>/<li> 2행 구조와 그 전용 Rule
   (`.job-card__condition`, `.job-card__condition + .job-card__condition`)이
   더 이상 쓰이지 않아 제거하고, Row Style을 .job-card__conditions 로 합쳤다.
   Class 이름 체계는 그대로 재사용한다(새 Class 최소화).

   baseline -> center : 앞에 Icon이 붙으므로 Text와 수직 중앙을 맞춘다. */

.job-card__conditions {
  display: flex;
  align-items: center;
  margin-top: var(--space-1);
  min-width: 0;
  overflow: hidden;
  color: var(--text-secondary);
  font-size: var(--font-size-xs); /* 12px */
  line-height: var(--line-height-normal);
  white-space: nowrap;
}

/* 위치 Icon — assets/icons/위치.svg
   viewBox 62x62 정사각이고 자체 배경 Shape이 없어
   .event-card__info-icon(components.css)과 같은 방식으로 CSS Box에서만 축소한다.
   그쪽은 Meta Text 14px에 Icon 16px인데 여기 Meta Text는 한 단계 작은 13px이라
   Text보다 세지지 않도록 14px로 맞췄다. 새 Token은 만들지 않았다. */
.job-card__condition-icon {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 12px; /* TODO: Token 승격 검토 */
  height: 12px;
  /* Icon ↔ 지역 Text. 붙어 보이지도, 따로 떨어진 Block으로 보이지도 않는 최소 간격 */
  margin-right: var(--space-1);
}

.job-card__condition-icon img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain; /* 원본 SVG 비율 유지 — Stretch 금지 */
}

.job-card__condition-item {
  flex-shrink: 0;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 뒤쪽 항목(경력)이 지역보다 우선순위가 낮으므로 폭이 부족하면 이쪽이 먼저 줄어든다.
   min-width 를 남겨 항목이 통째로 사라지지 않고 ellipsis 가 보이게 한다. */
.job-card__condition-item:last-child {
  flex-shrink: 1;
  min-width: 4.5em;
}

.job-card__condition-item + .job-card__condition-item::before {
  content: "·";
  margin: 0 var(--space-1);
  color: var(--text-disabled);
}

/* ---------- 5) 급여 ----------
   요청 §17 : 급여는 비교의 핵심이라 Card 안에서 시각 우선순위를 유지한다.
   Jobs Domain의 `급여형태 + 금액` 구조를 그대로 표시하고
   급여형태를 항상 앞에 붙여(`월급 280만원` / `시급 12,000원`)
   무엇의 금액인지 오해가 없게 한다.
   급여형태 간 환산은 하지 않는다(§7.3). */

.job-card__salary {
  /* 근무조건과 급여는 같은 `제안 조건` 덩어리라 4px로 붙인다 */
  margin-top: var(--space-3);
  overflow: hidden;
  color: var(--text-primary);
  font-size: var(--font-size-lg); /* 18px */
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---------- 6) 핵심 태그 ----------
   §8.1 / §8.2 : 우대사항 / 복리후생 / 추가 급여 항목 중 일부.

   [DISPLAY DECISION — 요청 §21]
   Card 최대 노출 3개. Mock Data도 Card마다 정확히 3개로 맞췄다.
   3열 Card에서 태그가 늘어나면 Card 높이가 불안정해지기 때문이다.
   `+N` 같은 신규 overflow 표현이나 Tag Interaction을 만들지 않았고,
   폭이 부족하면 마지막 태그만 ellipsis 로 줄어든다. */

.job-card__tags {
  display: flex;
  flex-wrap: nowrap;
  gap: var(--space-1);
  /* 급여와 복리후생도 같은 덩어리라 4px로 붙인다 */
  margin-top: var(--space-1);
  /* Benefits ↔ Divider : Deadline Footer와 시각적으로 분리하기 위한 여백.
     .job-card__foot 의 margin-top:auto 가 남는 공간을 흡수하므로
     최소 간격은 여기서 확보해야 한다(Flex Item은 margin이 collapse되지 않는다). */
  margin-bottom: var(--space-4);
  min-width: 0;
  overflow: hidden;
}

.job-card__tag {
  flex-shrink: 0;
  min-width: 0;
  overflow: hidden;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  background-color: var(--bg-subtle);
  color: var(--text-tertiary);
  font-size: var(--font-size-xs);
  line-height: var(--line-height-normal);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.job-card__tag:last-child {
  flex-shrink: 1;
}

/* ---------- 7) 하단 Meta : 모집상태·D-day / 등록일 ----------
   긴 Card 정보 사이에 묻히지 않게 Divider 아래 고정 위치에 둔다.
   margin-top: auto 로 Card 바닥에 붙여 같은 행 Card들의 D-day 위치가 맞는다.
   Left = 모집상태·D-day / Right = 등록일 정렬은 그대로 유지한다.

   Benefits ↔ Divider(16px, .job-card__tags 의 margin-bottom)와
   Divider ↔ Footer(16px, 아래 padding-top)로
   Benefits 영역과 Deadline Footer를 명확히 분리한다. */

.job-card__foot {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
  margin-top: auto;
  padding-top: var(--space-4); /* Divider ↔ Footer */
  border-top: 1px solid var(--border-light);
}

/* 모집상태 / D-day — §8.3 5개 값 중 하나.
   상태 단어와 D-day를 혼합 표시하지 않는다.
   Card 상단 Meta 위로 올라오지 않도록 margin-top 은 위 .job-card__foot 가 잡는다. */
.job-card__deadline {
  min-width: 0;
  overflow: hidden;
  color: var(--brand-secondary);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-snug);
  text-overflow: ellipsis;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* D-3 / D-Day 처럼 남은 기간이 짧은 경우의 시각 강조.
   `마감임박` 같은 **새 Status 값**을 만든 것이 아니라
   같은 D-day 값의 표시 Style만 바꾼 것이다(§13 / 요청 §23). */
.job-card__deadline--near {
  color: var(--error);
}

/* `상시모집` / `채용시 마감` 도 `D-N` / `D-Day` 와 **같은 Deadline Slot의 값**이다.
   Font Size / Weight / Line Height / Alignment는 완전히 동일하고 색만 다르다.
     D-N / D-Day          --brand-secondary
     마감 임박(--near)     --error   (기존 강조 정책 유지)
     상시모집 / 채용시 마감  --brand-secondary

   상시모집 / 채용시 마감은 `마감일이 없는 상태값`이라 --text-secondary 로 낮춰 뒀었지만,
   D-day와 같은 무게의 모집상태 정보로 읽히도록 --brand-secondary 로 올린다.
   결과적으로 기본 색과 같아지지만, 기본 색이 바뀌어도 이 상태값이 따라 바뀌지 않도록
   Rule은 남겨 둔다. 새 HEX는 쓰지 않는다. */
.job-card__deadline--always {
  color: var(--brand-secondary);
}

.job-card__registered {
  flex-shrink: 0;
  color: var(--text-tertiary);
  font-size: var(--font-size-xs);
  line-height: var(--line-height-normal);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.jobs-results__pagination {
  margin-top: var(--space-10); /* 40px */
}

/* ───────── 고용24 정부지원일자리 ───────── */

/* 카드 출처 배지 — 고용24에서 가져온 공고 */
.job-card__source {
  flex-shrink: 0;
  margin-left: var(--space-1);
  padding: 1px 6px;
  border-radius: 999px;
  background-color: var(--brand-bg-light);
  color: var(--brand-secondary);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-normal);
  white-space: nowrap;
}

/* 제주 정부지원 일자리 사업 — 목록 상단 안내 */
.gov-programs {
  margin-bottom: var(--space-6);
  padding: var(--space-5);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background-color: var(--surface-default, #fff);
}

.gov-programs__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.gov-programs__title {
  margin: 0;
  color: var(--text-primary);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
}

.gov-programs__title small {
  margin-left: var(--space-2);
  color: var(--text-tertiary);
  font-size: var(--font-size-sm);
  font-weight: normal;
}

.gov-programs__more {
  color: var(--brand-secondary);
  font-size: var(--font-size-sm);
  white-space: nowrap;
}

.gov-programs__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.gov-programs__item a {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  height: 100%;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  color: inherit;
  text-decoration: none;
}

.gov-programs__item a:hover,
.gov-programs__item a:focus-visible {
  border-color: var(--brand-secondary);
  background-color: var(--brand-bg-light);
}

.gov-programs__name {
  display: -webkit-box;
  overflow: hidden;
  color: var(--text-primary);
  font-weight: var(--font-weight-semibold);
  line-height: 1.4;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.gov-programs__meta {
  color: var(--text-tertiary);
  font-size: var(--font-size-xs);
}

.gov-programs__source {
  margin: var(--space-3) 0 0;
  color: var(--text-tertiary);
  font-size: var(--font-size-xs);
}

@media (max-width: 1100px) {
  .gov-programs__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ==================================================
   목록 탭 — 전체 / 구인구직 / 고용24 채용정보 / 정부지원일자리사업
   real-estate.css .real-estate-category 와 같은 Text Tab. 탭은 Page 가 아니라 State 라 <button role="tab">.
================================================== */
.jobs-source {
  margin-top: var(--space-8);
  border-bottom: 1px solid var(--border-default);
}

.jobs-source__list {
  display: flex;
  align-items: stretch;
  gap: var(--space-8);
}

.jobs-source__item {
  display: flex;
}

.jobs-source__link {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  height: 52px;
  padding: 0;
  text-align: left;
  color: var(--text-secondary);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-normal);
  white-space: nowrap;
  transition: color var(--transition-fast);
}

.jobs-source__link:hover {
  color: var(--brand-secondary);
}

.jobs-source__link.is-active {
  color: var(--brand-primary);
  font-weight: var(--font-weight-bold);
}

.jobs-source__link.is-active::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 3px;
  background-color: var(--brand-secondary);
}

.jobs-source__link:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: -2px;
  border-radius: var(--radius-sm);
}

.jobs-source__count {
  color: var(--text-tertiary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-regular, 400);
}

.jobs-source__count:empty {
  display: none;
}

/* 근사 매칭 안내 (JobSearchService notes) */
.jobs-results__notes {
  margin: var(--space-4) 0 0;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  background-color: var(--info-bg);
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  line-height: 1.6;
  list-style: none;
}

.jobs-results__notes li::before {
  content: "ⓘ ";
  color: var(--info);
}

/* 외부 데이터 출처 */
.jobs-results__source {
  margin: var(--space-4) 0 0;
  color: var(--text-tertiary);
  font-size: var(--font-size-xs);
  text-align: right;
}

/* 출처 배지 — 고용24 채용정보는 고용24 CI 색 */
.job-card__source--work24 {
  background-color: #EAF1F8;
  color: #003964;
}

/* 마감 공고 ('마감' 필터) */
.job-card__deadline--closed {
  color: var(--text-disabled);
}

/* 탭별로 숨기는 필터(정부지원 탭의 직종) — 컴포넌트 display 규칙보다 hidden 이 이기게 */
.jobs-quick-filter__field[hidden],
.jobs-filter__group[hidden] {
  display: none !important;
}