/* ==================================================
   Jobs — 구인공고 상세 (PC)
   pages/jobs/detail.html 전용

   [Namespace]
   이 파일은 `.jobs-detail-*` Namespace만 사용한다.
   부동산 / 중고차 상세의 `.real-estate-detail-*` / `.car-detail-*` Class를
   복사하지 않았다. Header / Footer / Breadcrumb / Wing / TOP / Modal / Share 는
   공통 Component(common.css / layout.css / components.css)를 그대로 재사용한다.

   [Layout]
   1680 Service Frame = 1000 Jobs Main + 40 Gap + 360 Jobs Action Aside
                        + 40 Gap + 240 Advertising Wing
   Main / Gap / Wing Grid는 layout.css 의 .main-layout__inner 가 이미 잡는다.
   이 파일에 .main-wing / .wing-slot / .wing-banner Rule을 두지 않는다.

   부동산 상세(Main 1000 + 공인중개사 360) / 중고차 상세(Main 1000 + Dealer 360)와 달리
   구인구직 상세도 부동산 / 중고차 상세와 같은 Domain Aside 구조를 쓴다.
   layout.css 의 1400px Content Column 안을 .jobs-detail__layout 이 다시 나눈다.
   Main은 1000px,
   지원 Action은 Job Header 안에 통합했다.

   body { min-width: 1680px } (layout.css) 정책을 그대로 상속한다.
   상세화면 전용 Breakpoint를 새로 만들지 않는다.

   [Design Token]
   tokens.css 의 기존 Token만 사용한다. 새 HEX / 새 Token을 만들지 않았다.
================================================== */


/* ==================================================
   01. Page Shell
================================================== */

.jobs-detail-page {
  /* 하단 ↔ Footer 여백(64px)은 layout.css 의 .main-layout--sub 가 담당한다 */
}

.jobs-detail__breadcrumb {
  padding-top: var(--space-6); /* 목록 .jobs-page__breadcrumb 과 동일 */
}


/* ==================================================
   02. Detail Layout
   layout.css 의 Content Column(1400px) 안을 다시 두 Column으로 나눈다.

     [ Jobs Main 1000 ][ Gap 40 ][ Jobs Action Aside 360 ] = 1400
     + Gap 40 + Advertising Wing 240                      = 1680 Service Frame

   부동산 상세(.real-estate-detail__layout) / 중고차 상세(.car-detail__layout)와
   같은 Grid 규약이다. Aside 360px는 Token이 아니라 세 화면이 공유하는 구현값이다.
     --sidebar-width(280) 는 Filter / Navigation / Management Sidebar 전용 Token,
     --wing-width(240)   는 Advertisement 전용 Token이다 (CLAUDE.md).
     Job Action Card는 둘 중 어느 개념도 아니라서 두 Token을 빌려 쓰지 않았고,
     RE / Cars가 이미 같은 판단으로 360을 구현값으로 두고 있어 그대로 맞췄다.

   Gap 40px(--space-10)은 Content ↔ Wing Gap과 같은 리듬이다.
   Wing Column(--wing-width / --content-wing-gap)에는 전혀 관여하지 않는다.
================================================== */

.jobs-detail__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  column-gap: var(--space-10); /* 40px */
}

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

/* Aside Column
   layout.css 의 Wing / 부동산 상세와 동일한 책임 분리다.
     .jobs-detail__aside       → Grid Item / stretch 로 Sticky 이동 범위 확보
     .jobs-detail__aside-inner → Sticky 동작만 담당
   Grid Item에 align-self: start 를 주면 Item 높이가 Card Stack 높이에 딱 맞아
   Sticky 자식의 이동 가능 범위가 0이 되어 고정이 동작하지 않는다. */
.jobs-detail__aside {
  align-self: stretch;
  min-width: 0;
  /* Sticky 이동 범위의 끝을 32px 앞당겨 Card Stack이 본문 마지막 Section보다
     아래로 내려가지 않게 한다. Footer 침범을 구조적으로 막는 지점이다. */
  padding-bottom: var(--space-8);
}

/* Card가 두 장이라 Sticky는 개별 Card가 아니라 Stack이 담당한다.
   Job Action Card에만 sticky를 주면 그 아래 `최근 본 채용공고` Card가
   Scroll 중에 Sticky Card 밑으로 파고들어 겹친다.

   top(32px)은 Wing(.main-wing__inner) / 부동산 Broker Card와 같은 값이라
   세 고정 영역의 상단 높이가 화면에서 일치한다.
   Header(.header)는 이 프로젝트에서 Sticky / Fixed가 아니라 일반 Flow에 있어
   --header-height 만큼의 Offset이 필요 없다. */
.jobs-detail__aside-inner {
  position: sticky;
  top: var(--space-8); /* 32px. Wing sticky top과 동일 */
  display: flex;
  flex-direction: column;
  gap: var(--space-4); /* Card 사이 16px */
}


/* ==================================================
   03. Job Header — 공고 Identity + Secondary Action

   좌 : Identity (Logo → 제목 → 업체·직종 → 지역·경력 → 급여 → 최소 Meta)
   우 : Action   (모집상태 / 저장 · 공유 / 지원하기)

   우측 Column은 Page 단위 Aside가 아니라 Header 내부 Action 영역이다.
   폭을 320px로 고정해 제목이 길어져도 Action 위치가 흔들리지 않게 하고,
   Identity Column은 minmax(0, 1fr) 로 두어 긴 제목 / 긴 업체명이
   Action Column을 밀지 않게 한다.

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

/* Action Column은 고정 320px가 아니라 Button 두 개 폭이다.
   Deadline Badge / 지원하기 CTA가 Aside로 옮겨가면서 320px를 붙잡고 있을 이유가 없어졌고,
   저장 / 공유만 남은 Column을 320px로 두면 Button이 불필요하게 늘어난다.
   auto 로 두면 제목이 쓸 수 있는 좌측 폭도 함께 넓어진다. */
.jobs-detail-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  column-gap: var(--space-10); /* 40px */
  margin-top: var(--space-5);
  padding-bottom: var(--space-8);
  border-bottom: 1px solid var(--border-default);
}

.jobs-detail-header__main {
  min-width: 0;
}

/* Logo — 목록 Card와 같은 Asset / 같은 방식이다.
   원본보다 키우지 않으려고 max-width/height 만 제한하고 width/height는 auto다.
   (object-fit: contain 은 작은 Logo를 Box 크기까지 확대해 흐려진다) */
.jobs-detail-header__logo {
  display: flex;
  align-items: center;
  height: 38px;
}

.jobs-detail-header__logo-image {
  max-width: 140px;
  max-height: 100%;
  width: auto;
  height: auto;
}

.jobs-detail-header__title {
  margin-top: var(--space-4);
  color: var(--text-primary);
  font-size: var(--text-detail-title-size);        /* 28px */
  font-weight: var(--text-detail-title-weight);
  line-height: var(--text-detail-title-line-height);
  /* 1400px 폭 전체로 제목을 펼치지 않는다. 긴 제목도 2줄 안에서 읽히게 한다 */
  max-width: 30em;
}

/* 업체명 · 직종 — 제목의 Subtitle. 목록 Card와 같은 위계다 */
.jobs-detail-header__company {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  margin-top: var(--space-2);
  min-width: 0;
  color: var(--text-secondary);
  font-size: var(--font-size-base); /* 16px */
  line-height: var(--line-height-normal);
}

.jobs-detail-header__company-name {
  color: var(--text-primary);
  font-weight: var(--font-weight-medium);
}

.jobs-detail-header__category::before {
  content: "·";
  margin: 0 var(--space-2);
  color: var(--text-disabled);
}

/* 등록일 — Company / Category보다 한 단계 낮은 Meta Level.

   [제거한 Rule — 요청 §28 Dead CSS 정리]
   근무지역 · 경력(.jobs-detail-header__location*)과 급여(.jobs-detail-header__salary)를
   Header에서 빼면서 그 전용 Rule도 함께 지웠다.
   두 값은 `핵심 근무조건` Section(.jobs-detail-conditions)에 그대로 있고,
   위치 Icon Asset(assets/icons/위치.svg)도 목록 Card와 `회사 위치` Pin에서 계속 쓴다. */
.jobs-detail-header__meta {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  margin-top: var(--space-4);
  color: var(--text-tertiary);
  font-size: var(--font-size-sm); /* 13px */
  line-height: var(--line-height-normal);
}

.jobs-detail-header__meta-value {
  font-variant-numeric: tabular-nums;
}


/* ---------- Action Column ---------- */

.jobs-detail-header__actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

/* [제거한 Rule — Dead CSS 정리]
   Header의 Deadline Badge(.jobs-detail-deadline*)와 Primary Apply CTA
   (.jobs-detail-apply-cta*), 둘을 묶던 Cluster(.jobs-detail-header__apply) 전용 Rule을
   함께 지웠다. Header에서 두 요소를 표시하지 않기로 했기 때문이다.

   같은 역할은 Aside가 맡는다.
     마감일   .jobs-action__value--deadline   (같은 Deadline Color 정책)
     지원하기  .jobs-action__cta               (같은 Naming / 같은 Primary Color)
   목록 Card의 Deadline Rule(.job-card__deadline*)은 jobs.css 에 그대로 있다. */

/* 저장 / 공유 — Primary CTA와 경쟁하지 않도록 Outline Level로만 둔다 */
.jobs-detail-header__buttons {
  display: flex;
  gap: var(--space-2);
}

.jobs-detail-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  height: 44px;
  /* Grid(2 x 1fr / 320px)로 늘어나던 Button이 Column을 auto로 바꾸면서
     내용 폭으로 줄었다. 좌우 Padding으로 원래의 Button 밀도를 유지한다. */
  padding: 0 var(--space-5);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background-color: var(--surface-default);
  color: var(--text-secondary);
  font-size: var(--font-size-md); /* 14px */
  font-weight: var(--font-weight-medium);
  line-height: 1;
  cursor: pointer;
  transition: border-color var(--transition-fast), color var(--transition-fast);
}

.jobs-detail-action:hover {
  border-color: var(--brand-interaction);
  color: var(--brand-interaction);
}

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

.jobs-detail-action__icon {
  font-size: var(--font-size-base);
  line-height: 1;
}

.jobs-detail-action__image {
  width: 16px;
  height: 16px;
}

/* 관심 매물 등록 On 상태 — 다른 도메인 상세 버튼과 같은 빨간 테두리 + 연한 빨강 배경 + 빨간 ♥ */
.jobs-detail-action.is-active {
  border-color: var(--error);
  background-color: var(--error-bg);
  color: var(--error);
}

/* ==================================================
   04. Section Shell

   모든 Section을 Card Box로 감싸지 않는다.
   Section 사이를 Divider + 여백으로만 나누고, Card / Light Container는
   실제로 묶여야 하는 Block(핵심 근무조건 Grid, 지도)에만 쓴다.
================================================== */

.jobs-detail-section {
  margin-top: var(--space-8); /* 32px */
  padding-top: var(--space-10);
  border-top: 1px solid var(--border-default);
}

/* 첫 Section은 Header 아래 Border와 겹치므로 자기 Border를 쓰지 않는다 */
.jobs-detail-header + .jobs-detail-section {
  border-top: 0;
  padding-top: 0;
}

.jobs-detail-section__title {
  color: var(--text-primary);
  font-size: var(--text-subsection-title-size);        /* 20px */
  font-weight: var(--text-subsection-title-weight);
  line-height: var(--text-subsection-title-line-height);
}

.jobs-detail-section__body {
  margin-top: var(--space-5);
}


/* ==================================================
   05. Job Condition Summary

   [기존 Light Container + 4열 Grid를 거두었다]
   12개 항목을 연한 회색 Box에 담아 4×3으로 나열하던 Rule
   (grid-template-columns: repeat(4,...), padding, border, background,
    Label 위 / Value 아래 세로 구조, 급여 전용 --strong 강조)은
   이 화면에서만 쓰던 것이라 정리했다.
   공통 Rule(.jobs-detail-section*)은 건드리지 않는다.

   [Card가 아니라 페이지 흐름 안의 Summary]
   별도 Background / Border Box를 쓰지 않는다.
   상하 경계는 이미 있는 Divider를 그대로 쓴다.
     위  .jobs-detail-header 의 border-bottom (--border-default)
     아래 다음 .jobs-detail-section 의 border-top  (--border-light)
   Summary에 따로 border-bottom을 달면 40px 간격으로 선이 두 개 생기므로
   새 Divider를 추가하지 않았다.

   [2열 × 3행 / Label · Value 수평]
   Label을 고정 Column으로 두어 `경력` 처럼 짧은 Label과
   `근무지역` 처럼 긴 Label이 섞여도 Value 시작 위치가 흔들리지 않는다.
   Column은 고정 px가 아니라 1fr 2개라 1400px 안에서 50 / 50으로 나뉘다.

   Vertical Divider는 넣지 않았다. 좌/우 Column 사이 Gap(48px)과
   Label Column 정렬만으로 구분되고, 선을 넣으면 Summary가 Table처럼 보인다.
   Row 사이 가로 선도 같은 이유로 쓰지 않고 Vertical Rhythm으로만 나눈다.

   Icon을 쓰지 않는 이유는 assets/icons 에 급여 / 시간 / 학력용 Asset이 없기 때문이다.
================================================== */

/* [좌우 실질 간격 축소]
   1000px Main에서 1fr / 1fr 을 끝까지 쓰면 Column 하나가 476px이라
   왼쪽 Value가 끝난 뒤 오른쪽 Label이 시작될 때까지 350px 가까이 비어
   좌/우 Group이 서로 다른 덩어리처럼 읽혔다.

   Column 구조(2 x 1fr)와 Gap(48px), Label 고정 Column은 그대로 두고
   Summary 덩어리에만 max-width를 걸어 정보가 양 끝으로 퍼지지 않게 한다.
   Column은 여전히 고정 px가 아니라 1fr 2개라 Label / Value 시작점 정렬은 유지된다.

   880 / 780 / 700 을 실제로 렌더해 비교했다.
     880  Column 416  좌우 공백 288  아직 두 덩어리로 읽힌다
     780  Column 366  좌우 공백 238  한 덩어리로 읽히고 오른쪽 여백도 과하지 않다
     700  Column 326  좌우 공백 198  가장 조밀하지만 오른쪽에 300px가 남는다
   Main(1000)과의 균형까지 보고 780을 골랐다. */
.jobs-detail-conditions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3) var(--space-12); /* 20px / 48px */
  max-width: 780px;
}

/* Label 고정 Column + Value 가변 Column.
   baseline 정렬이라 Label(14px)과 Value(16px)의 글자 밑선이 맞는다. */
.jobs-detail-conditions__item {
  display: grid;
  grid-template-columns: var(--space-16) minmax(0, 1fr); /* 64px */
  align-items: baseline;
  column-gap: var(--space-5);
  min-width: 0;
}

/* Label은 Secondary Information이다. Brand Color로 강조하지 않는다 */
.jobs-detail-conditions__label {
  color: var(--text-secondary);
  font-size: var(--font-size-md); /* 14px */
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-normal);
  white-space: nowrap;
}

/* Value는 Color로 이미 위계가 생기므로 Weight를 과하게 올리지 않는다.
   6개 값이 하나의 Summary System이라 급여만 키우거나
   다른 Color / Badge로 따로 빼지 않고 전부 같은 Rule을 쓴다. */
.jobs-detail-conditions__value {
  color: var(--brand-interaction);
  font-size: var(--font-size-base); /* 16px */
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-normal);
  overflow-wrap: break-word;
}


/* ==================================================
   06. 기업 등록 공고 이미지 — `[DOMAIN PENDING]`

   기업이 공고 등록 시 첨부하는 이미지를 본문 Content로 그대로 보여주는 영역이다.
   Section 자체의 위/아래 여백과 Divider는 공통 .jobs-detail-section Rule을 쓴다.
   (margin-top 40 + border-top + padding-top 40) 그래서 Summary ↔ 이미지,
   이미지 ↔ `모집부문 및 담당업무` Heading 간격이 다른 Section 사이와 같은 리듬이다.

   [Card Background / Shadow를 씌우지 않는다]
   기업이 등록하는 이미지는 배경 · 여백 · Border가 이미 디자인에 포함돼 있다.
   그 위에 Card를 한 겹 더 씌우면 테두리가 이중으로 보인다.
   Border / Radius도 이미지 가장자리를 잘라 보이게 할 수 있어 쓰지 않는다.

   [원본보다 확대하지 않는다]
   현재 Asset 원본은 958 x 3074 로 Main(1000px)보다 좁다.
   width: 100% 만 주면 958 -> 1000 으로 늘어나 선명도가 떨어진다.
   max-width 를 원본 폭으로 묶고 margin-inline: auto 로 가운데 정렬한다.

   [세로로 긴 이미지]
   모집요강 이미지는 세로로 매우 길 수 있어 height 고정 / overflow: hidden / crop 을
   쓰지 않는다. height: auto 로 원본 비율 그대로 전체를 보여준다.
================================================== */

.jobs-detail-posting {
  display: flex;
  justify-content: center;
}

.jobs-detail-posting__image {
  display: block;
  width: 100%;
  max-width: 958px; /* Asset 원본 폭. 이보다 키우지 않는다 */
  height: auto;
  margin-inline: auto;
}


/* ==================================================
   07. 모집부문 및 담당업무 — Recruitment Table

   기존 2×2 분할(모집부문 / 담당업무 / 우대사항 / 기타 조건) 전용
   Grid · Column · Title · Desc Rule은 이 화면에서만 쓰이던 것이라 정리했다.
   공통 Rule(.jobs-detail-section*, .jobs-detail-chips*)은 건드리지 않는다.

   [Lightweight Table]
   Cell을 전부 진한 선으로 두르는 행정형 Table을 만들지 않는다.
     Table 위/아래   --border-default (1px)
     Header 아래     --border-default (1px)
     Row 사이        --border-light   (1px)
     Column 사이     --border-light   (1px, 아주 연하게)
   Header에 배경을 깔지 않는다. 첫/마지막 Cell의 좌우 Padding을 0으로 두어
   Table이 Section Heading / 다른 Section과 같은 Left Edge에 정렬되기 때문이다.

   [table-layout: fixed]
   Column 폭을 Text 길이가 아니라 colgroup 비율로 고정한다.
   모집부문이 여러 Row가 되어도 Column이 흔들리지 않는다.
================================================== */

.jobs-detail-recruit {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  border-top: 1px solid var(--border-default);
  border-bottom: 1px solid var(--border-default);
}

/* 요청 기준 비율. 1400px Main에서 252 / 448 / 560 / 140px 이다.
   `인원`은 값이 짧지만 `00명` / `인원 협의` 까지 한 줄로 들어가야 해 10%를 유지한다. */
.jobs-detail-recruit__col--part { width: 18%; }
.jobs-detail-recruit__col--duty { width: 32%; }
.jobs-detail-recruit__col--require { width: 36%; }
.jobs-detail-recruit__col--count { width: 14%; }

.jobs-detail-recruit th,
.jobs-detail-recruit td {
  padding: var(--space-5) var(--space-4); /* 20px 16px */
  text-align: left;
  /* 긴 담당업무 / 자격요건과 짧은 모집부문 / 인원이 한 Row에 있으므로
     값이 Row 높이 가운데로 떠 보이지 않게 위쪽에 붙인다 */
  vertical-align: top;
}

/* Table을 Section Left / Right Edge에 그대로 맞춘다 */
.jobs-detail-recruit th:first-child,
.jobs-detail-recruit td:first-child {
  padding-left: 0;
}

.jobs-detail-recruit th:last-child,
.jobs-detail-recruit td:last-child {
  padding-right: 0;
}

/* Column Divider — 아주 연하게. 첫 Column 앞에는 두지 않는다 */
.jobs-detail-recruit tr > * + * {
  border-left: 1px solid var(--border-light);
}

/* Header Row : 배경 없이 Border + Weight로만 구분한다 */
.jobs-detail-recruit thead th {
  text-align: center;
  padding-top: var(--space-4);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--border-default);
  color: var(--text-primary);
  font-size: var(--font-size-lg); /* 18px */
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-normal);
}

/* 모집부문이 여러 Row일 때의 구분선 */
.jobs-detail-recruit tbody tr + tr > * {
  border-top: 1px solid var(--border-light);
}

/* 모집부문 Cell : 직종 대분류 › 세부직종 */
.jobs-detail-recruit tbody th {
  color: var(--text-primary);
  font-size: var(--font-size-base); /* 16px */
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-normal);
}

.jobs-detail-recruit__part {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  min-width: 0;
}

.jobs-detail-recruit__part-detail::before {
  content: "›";
  margin: 0 var(--space-2);
  color: var(--text-disabled);
  font-weight: var(--font-weight-regular);
}

/* 인원 Cell — 값이 짧아 가운데 정렬이 안정적이다.
   Row 안에서 위쪽 정렬은 유지해 첫 Bullet 줄과 눈높이를 맞춘다. */
.jobs-detail-recruit td.jobs-detail-recruit__count {
  color: var(--text-primary);
  font-size: var(--font-size-base); /* 16px */
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-normal);
  text-align: center;
  font-variant-numeric: tabular-nums;
}

/* 자격요건 / 우대사항 Sub Label — Box를 중첩하지 않고 Label + 목록으로만 구분한다 */
.jobs-detail-recruit__sublabel {
  color: var(--text-primary);
  font-size: var(--font-size-md); /* 14px */
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-normal);
}

/* 앞 Group과의 Section Gap. 첫 Sub Label에는 붙지 않는다
   (값이 없는 Group은 Label과 목록을 함께 빼므로 빈 여백이 남지 않는다) */
.jobs-detail-recruit__list + .jobs-detail-recruit__sublabel {
  margin-top: var(--space-5); /* 20px */
}

/* 담당업무 / 자격요건 / 우대사항 공용 목록 — 기존 List Style 그대로다.
   새 Bullet Asset을 만들지 않았다(::before 의 `·`). */
.jobs-detail-recruit__sublabel + .jobs-detail-recruit__list {
  margin-top: var(--space-2);
}

.jobs-detail-recruit__list-item {
  position: relative;
  padding-left: var(--space-4);
  color: var(--text-primary);
  font-size: var(--font-size-base); /* 16px */
  line-height: var(--line-height-relaxed);
}

.jobs-detail-recruit__list-item + .jobs-detail-recruit__list-item {
  margin-top: var(--space-1);
}

.jobs-detail-recruit__list-item::before {
  content: "·";
  position: absolute;
  left: var(--space-1);
  color: var(--text-disabled);
}

/* 업무 특징 Chip이 담당업무 목록 아래에 올 때의 간격 */
.jobs-detail-recruit__list + .jobs-detail-chips {
  margin-top: var(--space-4);
}

/* 기타 안내 — Table Column으로 두기 어려운 안내성 Text */
.jobs-detail-recruit__note {
  margin-top: var(--space-5);
}

.jobs-detail-recruit__note-label {
  color: var(--text-primary);
  font-size: var(--font-size-md); /* 14px */
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-normal);
}

.jobs-detail-recruit__note-text {
  margin-top: var(--space-2);
  /* Note는 Table과 달리 1400px 전체 폭이라 한 줄 길이를 제한한다 */
  max-width: 62ch;
  color: var(--text-secondary);
  font-size: var(--font-size-base);
  line-height: var(--line-height-relaxed);
}


/* ==================================================
   08. Chip (업무 특징 / 우대사항 / 복리후생 / 필요 항목)

   등록 화면의 선택 Chip과 같은 성격이라 하나의 Chip Style로 통일한다.
   새 Badge Color / 새 Badge 종류를 만들지 않았다.
================================================== */

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

.jobs-detail-chips__item {
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-sm);
  background-color: var(--bg-subtle);
  color: var(--text-secondary);
  font-size: var(--font-size-sm); /* 13px */
  line-height: var(--line-height-normal);
}

/* 복리후생처럼 Section 본문 자체가 Chip 목록일 때만 한 단계 크게 쓴다 */
.jobs-detail-chips--lg .jobs-detail-chips__item {
  padding: var(--space-2) var(--space-4);
  font-size: var(--font-size-base); /* 16px */
}


/* ==================================================
   09. 회사 정보

   Guide §12.2 : Jobs의 회사 정보는 공고 등록값(step8.*)이며
   입점자 Card로 승격하지 않는다. Card Box / 별점 / 인증 배지를 쓰지 않고
   Logo + 정의 목록 수준으로만 둔다.
================================================== */

.jobs-detail-company {
  display: flex;
  align-items: center;
  gap: var(--space-8);
}

.jobs-detail-company__logo {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 160px;
  height: 60px;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  background-color: var(--surface-default);
}

.jobs-detail-company__logo-image {
  max-width: 120px;
  max-height: 38px;
  width: auto;
  height: auto;
}

.jobs-detail-company__info {
  display: grid;
  gap: var(--space-3);
  min-width: 0;
}

.jobs-detail-company__row {
  display: flex;
  align-items: baseline;
  gap: var(--space-4);
  min-width: 0;
}

.jobs-detail-company__label {
  flex-shrink: 0;
  width: 80px;
  color: var(--text-tertiary);
  font-size: var(--font-size-md); /* 14px */
  line-height: var(--line-height-normal);
}

.jobs-detail-company__value {
  min-width: 0;
  color: var(--text-primary);
  font-size: var(--font-size-base); /* 16px */
  line-height: var(--line-height-normal);
  overflow-wrap: break-word;
}


/* ==================================================
   10. 지원 안내
================================================== */

.jobs-detail-apply {
  display: grid;
  gap: var(--space-5);
}

.jobs-detail-apply__row {
  display: flex;
  align-items: baseline;
  gap: var(--space-6);
  min-width: 0;
}

.jobs-detail-apply__label {
  flex-shrink: 0;
  width: 160px;
  color: var(--text-tertiary);
  font-size: var(--font-size-md); /* 14px */
  line-height: var(--line-height-normal);
}

.jobs-detail-apply__value {
  min-width: 0;
  max-width: 62ch;
  color: var(--text-primary);
  font-size: var(--font-size-base); /* 16px */
  line-height: var(--line-height-relaxed);
  overflow-wrap: break-word;
}

.jobs-detail-apply__value--muted {
  color: var(--text-secondary);
}


/* ==================================================
   11. 회사 위치

   모바일 detail-map-block (네이버/카카오 SDK + 외부맵 링크) 재사용.
   PC에서는 높이·톤만 보정한다. Mock Canvas는 런타임에서 사용하지 않는다.
================================================== */

.jobs-detail-location .itamra-detail-map {
  height: auto;
  min-height: 220px;
  aspect-ratio: 24 / 7;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--bg-muted);
}

.jobs-detail-location .itamra-map-ext {
  margin-top: var(--space-4);
  padding: var(--space-4) 0 0;
  border-top: 1px solid var(--border-light);
  background: transparent;
}

.jobs-detail-location .itamra-map-ext-name {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
}

.jobs-detail-location .itamra-map-ext-addr {
  margin-top: var(--space-1);
  font-size: var(--font-size-md);
  color: var(--text-secondary);
}

.jobs-detail-location .itamra-map-ext-links {
  margin-top: var(--space-3);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.jobs-detail-location .itamra-map-ext-links a {
  color: var(--brand-secondary);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  text-decoration: none;
}

.jobs-detail-location__canvas {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 320px;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  background-color: var(--bg-muted);
  background-image:
    linear-gradient(to right, var(--border-light) 1px, transparent 1px),
    linear-gradient(to bottom, var(--border-light) 1px, transparent 1px);
  background-size: 40px 40px;
  overflow: hidden;
}

.jobs-detail-location__mock-flag {
  position: absolute;
  top: var(--space-4);
  left: var(--space-4);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-sm);
  background-color: var(--surface-default);
  color: var(--text-tertiary);
  font-size: var(--font-size-xs); /* 12px */
  line-height: var(--line-height-normal);
}

.jobs-detail-location__pin {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-pill);
  background-color: var(--surface-default);
  box-shadow: var(--shadow-sm);
}

.jobs-detail-location__pin-mark {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
}

.jobs-detail-location__pin-mark img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.jobs-detail-location__pin-label {
  color: var(--text-primary);
  font-size: var(--font-size-md); /* 14px */
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-normal);
}

/* 지도 하단 : [주소값] .......... [지도 크게 보기][길 찾기] */
.jobs-detail-location__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  margin-top: var(--space-4);
}

.jobs-detail-location__address {
  min-width: 0;
  color: var(--text-primary);
  font-size: var(--font-size-base); /* 16px */
  line-height: var(--line-height-normal);
  overflow-wrap: break-word;
}

.jobs-detail-location__actions {
  display: flex;
  flex-shrink: 0;
  gap: var(--space-2);
}

.jobs-detail-location__action {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  height: 40px;
  padding: 0 var(--space-4);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background-color: var(--surface-default);
  color: var(--brand-interaction);
  font-size: var(--font-size-md); /* 14px */
  font-weight: var(--font-weight-medium);
  line-height: 1;
  cursor: pointer;
  transition: border-color var(--transition-fast);
}

.jobs-detail-location__action:hover {
  border-color: var(--brand-interaction);
}

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

.jobs-detail-location__action-icon {
  width: 16px;
  height: 16px;
}


/* ==================================================
   12. 이 회사의 다른 공고

   목록에서 확정한 .job-card (jobs.css)를 그대로 재사용한다.
   상세 전용 Related Card를 새로 디자인하지 않았다.
   1400px 안 3열이라 Card 폭이 목록(352px)보다 넓어질 뿐
   Card 내부 구조 / Style은 목록과 동일하다.
================================================== */

.jobs-detail-related {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-5); /* 목록 Grid와 같은 20px */
}

.jobs-detail-related__item {
  display: flex;
  min-width: 0;
}

.jobs-detail-related__item > .job-card {
  width: 100%;
}


/* ==================================================
   13. Job Action Card (Aside 360px)

   상세를 다 읽고 내려온 사용자가 상단으로 돌아가지 않고
   핵심 조건을 다시 확인하고 지원하는 Decision Card다.

   [Main Summary와 같은 Component로 만들지 않는다]
     Main  .jobs-detail-conditions  Label + Value 수평 / 2 Column x 3 Row / Card 아님
     Aside .jobs-action             Label 위 + Value 아래 세로 Stack / Card
   같은 값이 겹쳐도 역할이 달라서(Scan Summary vs Decision Card)
   Visual Pattern을 의도적으로 다르게 둔다.

   Outer는 부동산 Broker Card(.real-estate-broker)와 같은 규약이다.
     Border 1px --border-default / Radius --radius-lg / Padding --space-5 /
     Background --surface-default / Sticky로 실제로 떠 있어 Shadow 허용(tokens.css §15)
   내부 Content는 Jobs 전용이며 Broker / Dealer Card 내부 UI를 복사하지 않았다.

   Card 내부 폭 = 360 - Border 1 x 2 - Padding 20 x 2 = 318px
================================================== */

.jobs-action {
  padding: 25px 20px 25px 20px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  background-color: var(--surface-default);
  box-shadow: var(--shadow-sm);
}

/* 6개 항목 Stack.
   Label + Value가 한 줄에 들어가면서 세로형(Label 위 / Value 아래)일 때 필요했던
   12px보다 Row Gap을 키운다. 한 줄짜리 Row 6개를 12px로 붙이면 Table처럼 빽빽해진다.
   가로 배치 자체로 Card 높이가 크게 줄어들어(451 -> 약 330) 여유가 생긴 만큼을 여기 쓴다.
   Aside Stack이 Viewport(1080 기준 985px) 안에 들어가야 하는 제약은 그대로다. */
.jobs-action__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3); /* 12px */
}

/* Label 고정 Column + Value 가변 Column.
   `직무`(2자)와 `근무지역`(4자)처럼 Label 길이가 달라도 Value 시작점이 6개 모두 같다.
   Card 내부 폭 318 = Label 64 + Gap 12 + Value 242
   baseline 정렬이라 Label(13px)과 Value(16px)의 글자 밑선이 맞는다. */
.jobs-action__item {
  display: grid;
  grid-template-columns: var(--space-16) minmax(0, 1fr); /* 64px */
  align-items: baseline;
  column-gap: var(--space-6); /* 24px */
  min-width: 0;
}

/* Label은 Secondary / Muted. Main Summary의 Label과 같은 위계다 */
.jobs-action__label {
  color: var(--text-secondary);
  font-size: var(--font-size-base); /* 16px */
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-normal);
  white-space: nowrap;
}

/* Value는 이 Card의 Primary Readable Text다.
   Main Summary의 --brand-interaction 을 그대로 복제하지 않는다.
   Aside는 Card 안에서 CTA(--brand-secondary)가 유일한 Action Color여야 하고,
   조건 6개가 전부 Brand Color면 CTA와 경쟁한다. */
.jobs-action__value {
  color: var(--text-primary);
  font-size: var(--font-size-base); /* 16px */
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-normal);
  overflow-wrap: break-word;
}

/* 직무의 `대분류 > 세부직종` 구분자.
   `모집부문 및 담당업무` Table의 모집부문 Cell과 같은 표기다.
   직종 대분류 자체에 `·`(건설·현장)가 들어가서 `·`를 구분자로 쓰지 않는다. */
.jobs-action__value-sep {
  margin: 0 var(--space-1);
  color: var(--text-tertiary);
  font-weight: var(--font-weight-regular);
}

/* 마감일 — Header Badge / 목록 Card와 같은 Deadline Color 정책이다.
     D-N / D-Day          --brand-secondary
     상시모집 / 채용시 마감  --brand-secondary
   새 Status 값 / 새 D-day 계산 규칙을 만들지 않았다. */
.jobs-action__value--deadline {
  color: var(--brand-secondary);
  font-weight: var(--font-weight-bold);
  font-variant-numeric: tabular-nums;
}

/* Primary : 지원하기 / Secondary : 문의하기
   Header에서 CTA를 빼면서 Conversion은 Aside에 모은다.
   지원하기는 jobs-detail.js 가 이력서 선택 Modal(data-modal="job-apply")을 연다. */
.jobs-action__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 48px;
  margin-top: var(--space-4);
  border: 0;
  border-radius: var(--radius-md);
  background-color: var(--brand-secondary);
  color: var(--text-inverse);
  font-size: var(--font-size-base); /* 16px */
  font-weight: var(--font-weight-bold);
  line-height: 1;
  text-decoration: none;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}

.jobs-action__cta:hover {
  background-color: var(--brand-interaction);
  color: var(--text-inverse);
}

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

.jobs-action__cta--secondary {
  margin-top: var(--space-2);
  border: 1px solid var(--border-default);
  background-color: var(--surface-default);
  color: var(--text-secondary);
}

.jobs-action__list + .jobs-action__cta--secondary {
  margin-top: var(--space-4);
}

.jobs-action__cta--secondary:hover {
  background-color: var(--bg-muted);
  color: var(--text-primary);
  border-color: var(--border-strong, var(--border-default));
}

.jobs-action__cta:disabled,
.jobs-action__cta[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
}


/* ==================================================
   13b. 지원하기 — 이력서 선택 Modal
   Markup: _detail-apply-modal.php / Logic: jobs-detail.js
   Modal Shell은 components.css + common.js. 여기선 목록 Card만.
================================================== */

.jobs-apply-modal__desc {
  margin: 0 0 var(--space-4);
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-normal);
}

.jobs-apply-modal__error {
  margin: 0 0 var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm);
  background: var(--color-danger-50, #fef2f2);
  color: var(--color-danger, #dc2626);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-normal);
}

.jobs-apply-resume-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  max-height: 360px;
  overflow-y: auto;
}

.jobs-apply-resume-empty {
  margin: 0;
  padding: var(--space-6) var(--space-4);
  text-align: center;
  color: var(--text-tertiary);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-normal);
}

.jobs-apply-resume-card {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background-color: var(--surface-default);
  text-align: left;
  cursor: pointer;
  transition: border-color var(--transition-fast), background-color var(--transition-fast);
}

.jobs-apply-resume-card:hover {
  border-color: var(--border-strong, var(--border-default));
  background-color: var(--bg-muted);
}

.jobs-apply-resume-card.is-selected {
  border-color: var(--brand-interaction);
  background-color: var(--brand-interaction-soft, #eff6ff);
}

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

.jobs-apply-resume-card__body {
  flex: 1;
  min-width: 0;
}

.jobs-apply-resume-card__title {
  color: var(--text-primary);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-snug);
  word-break: keep-all;
}

.jobs-apply-resume-card__flag {
  display: inline-block;
  margin-right: var(--space-1);
  padding: 1px 6px;
  border-radius: var(--radius-sm);
  background-color: var(--brand-secondary);
  color: var(--text-inverse);
  font-size: 11px;
  font-weight: var(--font-weight-semibold);
  line-height: 1.4;
  vertical-align: middle;
}

.jobs-apply-resume-card__meta {
  margin-top: 2px;
  color: var(--text-tertiary);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-normal);
}

.jobs-apply-resume-card__check {
  flex-shrink: 0;
  display: none;
  width: 20px;
  height: 20px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background-color: var(--brand-interaction);
  color: var(--text-inverse);
  font-size: 12px;
  font-weight: var(--font-weight-bold);
  line-height: 1;
}

.jobs-apply-resume-card.is-selected .jobs-apply-resume-card__check {
  display: inline-flex;
}


/* ==================================================
   14. 최근 본 채용공고 — `[UI MOCK]`

   ⚠ Domain Feature가 아니다. Backend / API / Persistence 없이
   360px Aside의 정보량 · 높이 · Balance를 화면에서 평가하기 위한 정적 Mock이다.

   목록 Card(.job-card)를 360px로 축소 복사하지 않는다.
   Logo / 급여 / 태그 / 등록일을 빼고 Compact Item으로 다시 구성했고,
   Typography · Metadata 구분자 · Deadline Color · Favorite 상태색은
   목록 Card의 Convention을 그대로 따른다.
================================================== */

.jobs-recent {
  padding: var(--space-5);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  background-color: var(--surface-default);
  box-shadow: var(--shadow-sm);
}

.jobs-recent__title {
  color: var(--text-primary);
  font-size: var(--font-size-lg); /* 18px */
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-snug);
}

/* Item 사이 Divider. Card 자체 Border와 겹치지 않게 항목 사이에만 둔다 */
.jobs-recent__list {
  margin-top: var(--space-3);
}

.jobs-recent__item + .jobs-recent__item {
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--border-light);
}

.jobs-recent-card__company {
  overflow: hidden;
  color: var(--text-tertiary);
  font-size: var(--font-size-sm); /* 13px */
  line-height: var(--line-height-normal);
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 제목은 318px 안에서 최대 2줄까지 보여주고 넘치면 잘라낸다.
   목록 Card 제목과 같은 2줄 정책이다. */
.jobs-recent-card__title {
  display: -webkit-box;
  overflow: hidden;
  margin-top: var(--space-1);
  color: var(--text-primary);
  font-size: var(--font-size-base); /* 16px */
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-snug);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.jobs-recent-card__link {
  color: inherit;
}

.jobs-recent-card__link:hover {
  color: var(--brand-interaction);
}

/* 근무지역 · 경력 — 목록 Card(.job-card__condition-item)와 같은 `·` 구분자 규약.
   학력은 목록 Mock에 값이 없어서 넣지 않았다 (없는 값을 만들지 않는다) */
.jobs-recent-card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin-top: var(--space-2);
  color: var(--text-secondary);
  font-size: var(--font-size-sm); /* 13px */
  line-height: var(--line-height-normal);
}

.jobs-recent-card__meta-item + .jobs-recent-card__meta-item::before {
  margin: 0 var(--space-2);
  color: var(--border-strong);
  content: '·';
}

.jobs-recent-card__foot {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

/* Favorite — 목록 Card(.job-card__favorite)와 같은 Visual / 같은 [data-favorite] 규약.
   수치 집계 / 저장 / 전송이 없는 상태 Toggle만 한다(§16 `[UNKNOWN]`).
   기존 jobs-detail.js 의 initFavorite()이 [data-favorite] 전체를 잡으므로
   이 Card를 위해 새 JS를 추가하지 않았다. */
.jobs-recent-card__favorite {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  margin-left: calc(var(--space-2) * -1);
  border-radius: var(--radius-pill);
  color: var(--text-tertiary);
  transition: color var(--transition-fast), background-color var(--transition-fast);
}

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

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

.jobs-recent-card__favorite-icon {
  font-size: var(--font-size-base);
  line-height: 1;
}

.jobs-recent-card__favorite.is-active {
  color: var(--error);
}

/* Deadline은 Favorite과 Apply 사이 남는 폭을 차지한다 */
.jobs-recent-card__deadline {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  color: var(--brand-secondary);
  font-size: var(--font-size-md); /* 14px */
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-snug);
  text-overflow: ellipsis;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* `상시모집` / `채용시 마감` — 목록 Card와 같은 Deadline Slot의 값이다.
   Size / Weight는 동일하고 Color 정책도 --brand-secondary 로 같다. */
.jobs-recent-card__deadline--always {
  color: var(--brand-secondary);
}

/* 작은 지원 Button — `[UI MOCK]`.
   상세의 Primary Apply(.jobs-action__cta)와
   혼동되지 않도록 Outline Level로만 둔다. 실제 지원 API를 연결하지 않았다. */
.jobs-recent-card__apply {
  flex-shrink: 0;
  height: 30px;
  padding: 0 var(--space-3);
  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-sm); /* 13px */
  font-weight: var(--font-weight-medium);
  line-height: 1;
  cursor: pointer;
  transition: border-color var(--transition-fast), color var(--transition-fast);
}

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

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

/* 요약 박스 버튼 아래 안내 (_detail-aside.php $asideNote — 외부 데이터 출처 등) */
.jobs-action__note {
  margin: var(--space-3) 0 0;
  color: var(--text-tertiary);
  font-size: var(--font-size-xs);
  text-align: center;
}