/* 개편(mood-A v3) 운영본 — 원본 design/mockups/mood-A/v3/css/careers-job.css(채용 공고 상세 /recruiting/jobs/:id, 서버 렌더 recruiting-job-detail.njk).
   시안과 차이: 필수 서류 칸(.jdoc — 공고에 지정됐을 때) · 접수 완료(.jsuccess) — 시안에 없던 운영 상태 */

/* 버튼 — 채움(어두운 바탕: 흰 채움 · 호버 시 톤만, 문의 완료 · 채용 CTA와 같은 규칙) / 잉크 채움(밝은 바탕) */
.btn.jbtn-fill {
  background: var(--white);
  color: var(--ink);
  border-color: var(--white);
  --btn-ink: #d9d9d9;
  --btn-paper: var(--ink);
}
.btn.jbtn-fill:hover {
  background: var(--white);
  border-color: #d9d9d9;
}
.btn.jbtn-ink {
  background: var(--ink);
  color: var(--white);
  border-color: var(--ink);
  --btn-ink: #333;
  --btn-paper: var(--white);
}
.btn.jbtn-ink:hover {
  background: var(--ink);
  border-color: #333;
}

/* ① 공고 머리 — 채용 히어로 사진을 깊게 누른 어두운 띠 */
.jhero {
  position: relative;
  overflow: hidden;
  padding: calc(var(--hdr-h) + 56px) 0 56px;
  background: var(--ink);
  color: var(--white);
}
.jhero__bg {
  position: absolute;
  inset: 0;
}
.jhero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 40%;
}
.jhero__bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0) 52%, rgba(0, 0, 0, 0.42) 76%, rgba(0, 0, 0, 0.78) 100%),
    linear-gradient(
      180deg,
      rgba(0, 0, 0, 0.78) 0%,
      rgba(0, 0, 0, 0.5) 45%,
      rgba(0, 0, 0, 0.54) 70%,
      rgba(0, 0, 0, 0.82) 100%
    ),
    linear-gradient(90deg, rgba(0, 0, 0, 0.28) 0%, rgba(0, 0, 0, 0) 60%);
} /* 10-07: 칩 · 제목이 놓이는 가운데 띠만 덮개를 조금 걷어 유리 칩 너머로 사진이 비치게 · 사용자: 하단 딤 — 절반 아래부터 짙어져 맨 아래는 거의 검정(채용 히어로와 같은 결) */
.jhero__inner {
  position: relative;
  z-index: 1;
}
.jhero__crumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  font: 500 14px/1.4 var(--sans);
  color: rgba(255, 255, 255, 0.66);
}
.jhero__crumb a {
  transition: color 0.2s;
}
.jhero__crumb a:hover {
  color: var(--white);
}
.jhero__title {
  max-width: 22em;
  margin-top: 24px;
  font: 400 30px/1.26 var(--serif);
  letter-spacing: -0.015em;
}
.jhero__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 20px;
}
.jhero__chips span {
  position: relative;
  padding: 7px 12px;
  font: 500 14px/1.2 var(--sans);
  color: var(--white);
} /* 10-07 사용자: 칩은 유리 — 사이트 공통 레시피(.svc-glass: 사선 명암 · 1px 그라데이션 테두리 · 좌상단 L자 림) */
.jhero__chips .svc-glass {
  --glass-fill: rgba(255, 255, 255, 0.07);
  --glass-start: rgba(255, 255, 255, 0.04);
  --glass-end: rgba(255, 255, 255, 0.14);
  --glass-border: rgba(255, 255, 255, 0.34);
  -webkit-backdrop-filter: blur(4px) saturate(150%) brightness(1.18);
  backdrop-filter: blur(4px) saturate(150%) brightness(1.18);
} /* 10-07 사용자: 뒤가 비치게 — 채움을 어두운 0.34 → 밝은 0.07로, 블러 12 → 4px, 비친 사진을 살짝 밝게 */
.jhero__sub {
  max-width: 40em;
  margin-top: 24px;
  font: 400 16px/1.7 var(--sans);
  color: rgba(255, 255, 255, 0.82);
} /* 인재풀 — 사용자 지정 안내 문구 */
.jhero .btn {
  margin-top: 32px;
}
@media (min-width: 768px) {
  .jhero {
    padding: calc(var(--hdr-h) + 80px) 0 72px;
  }
  .jhero__title {
    font-size: 40px;
    line-height: 1.22;
  }
}
@media (min-width: 1280px) {
  .jhero {
    padding: calc(var(--hdr-h) + 96px) 0 88px;
  }
  .jhero__title {
    font-size: 48px;
    line-height: 1.2;
  }
  .jhero__sub {
    font-size: 18px;
  }
}

/* ② 공고 본문 — 관리자가 입력한 HTML(배너 이미지 · h2 · h3 · 문단 · 목록)에 사이트 서체 · 여백만 입힘. 어떤 공고가 와도 같은 톤 */
.jbody {
  padding-block: var(--sec-y);
} /* 10-08: 사이트 공통 섹션 여백 */
.jbody__inner {
  row-gap: 40px;
  align-items: start;
}
.jprose {
  min-width: 0;
  font: 400 16px/1.8 var(--sans);
  color: #2a2a2a;
  word-break: keep-all;
}
.jprose > :first-child {
  margin-top: 0;
}
.jprose img {
  display: block;
  width: 100%;
  height: auto;
}
.jprose p {
  margin: 16px 0 0;
}
.jprose h2 {
  margin: 56px 0 0;
  font: 400 26px/1.35 var(--serif);
  letter-spacing: -0.01em;
  color: var(--ink);
}
.jprose h2 + h2 {
  margin-top: 8px;
} /* '[CEO Letter]' 다음 제목 */
.jprose h3 {
  margin: 32px 0 0;
  font: 600 18px/1.5 var(--sans);
  color: var(--ink);
}
.jprose h2 strong,
.jprose h3 strong {
  font-weight: inherit;
}
.jprose ul {
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}
.jprose li {
  position: relative;
  padding-left: 18px;
}
.jprose li + li {
  margin-top: 6px;
}
.jprose li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.9em;
  width: 8px;
  height: 1px;
  background: rgba(10, 10, 10, 0.5);
}
.jprose li ul {
  margin-top: 6px;
}
.jprose strong {
  font-weight: 600;
  color: var(--ink);
}
.jprose em {
  font-style: normal;
  color: var(--muted);
}
.jside {
  padding: 24px;
  background: #f5f5f5;
} /* 10-07 사용자: #f4f4f4 → #f8f8f8 → #f5f5f5(흰 본문 위에서 조금 더 보이게) */
.jside__list {
  margin: 0;
}
.jside__list div {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(10, 10, 10, 0.08);
}
.jside__list dt {
  font: 500 14px/1.4 var(--sans);
  color: var(--muted);
}
.jside__list dd {
  margin: 0;
  font: 500 16px/1.4 var(--sans);
  color: var(--ink);
  text-align: right;
}
.jside .btn {
  width: 100%;
  justify-content: center;
  margin-top: 24px;
}
@media (min-width: 1280px) {
  .jprose {
    grid-column: 1 / 8;
    font-size: 18px;
  }
  .jprose h2 {
    margin-top: 72px;
    font-size: 32px;
  }
  .jprose h3 {
    margin-top: 40px;
    font-size: 20px;
  }
  .jside {
    grid-column: 9 / 13;
    position: sticky;
    top: calc(var(--hdr-h) + 24px);
    padding: 28px;
  } /* 9번째 칸 — 채용 페이지 Team 설명 · 공고 칩과 같은 시작선 */
}

/* ③ 지원 — 10-07 사용자: 밝은 그레이 바탕(#f8f8f8) · 문의 폼과 같은 밑줄 칸(밝은 바탕용으로 색만 뒤집음). 항목이 많아 이름표는 보이게 */
.japply {
  padding-block: var(--sec-y);
  background: #f8f8f8;
  color: var(--ink);
  scroll-margin-top: var(--hdr-h);
} /* 10-07 사용자: 그레이 확정, 조금 더 밝게 #f2f2f2 → #f8f8f8 */
.japply__inner {
  row-gap: 40px;
  align-items: start;
}
.japply__desc {
  margin-top: 16px;
  font: 400 16px/1.7 var(--sans);
  color: var(--muted);
}
.jform {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px 28px;
  align-content: start;
}
.jform__hp {
  position: absolute !important;
  left: -10000px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
} /* 봇 차단용 빈 칸(name=website) — 값이 들어가면 서버가 버린다 */
.jfield {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.jfield__label {
  padding: 0;
  font: 600 14px/1.4 var(--sans);
  color: var(--ink);
} /* 10-07 사용자: 필드명은 더 진하고 굵게(500 · 66% → 600 · 검정) */
.jfield__opt {
  font-weight: 400;
  color: rgba(10, 10, 10, 0.42);
}
.jfield__req {
  margin-left: 3px;
  color: #d4382c;
} /* 10-07 사용자: 필수 칸은 빨간 * — 서버 필수 검사 항목과 같음 */
.jfield input[type='text'],
.jfield input[type='email'],
.jfield input[type='tel'],
.jfield input[type='url'],
.jfield textarea {
  width: 100%;
  margin-top: 8px;
  padding: 12px 14px;
  border: 1px solid rgba(10, 10, 10, 0.14);
  border-radius: 0;
  background: var(--white);
  color: var(--ink);
  font: 400 16px/1.5 var(--sans);
  outline: none;
  transition: border-color 0.2s;
  -webkit-appearance: none;
  appearance: none;
} /* 10-07 사용자: 라인 → 박스(흰 채움 · 얇은 테두리 · 각진 모서리) — 긴 폼 · 여러 줄 칸 경계가 분명하게 */
.jfield textarea {
  min-height: 156px;
  resize: vertical;
}
.jfield input::placeholder,
.jfield textarea::placeholder {
  color: rgba(10, 10, 10, 0.36);
}
.jfield input:focus,
.jfield textarea:focus {
  border-color: var(--ink);
}
.jfield.is-err input,
.jfield.is-err textarea {
  border-color: #d4382c;
}
.jfield__error {
  margin-top: 6px;
  font: 500 12px/1.4 var(--sans);
  color: #d4382c;
}
.jfield__error:empty {
  display: none;
}
.jform > .jfield__error {
  margin-top: -18px;
} /* 동의 칸 오류는 폼 칸 사이(24px)가 아니라 다른 칸처럼 바로 아래(6px)에 */
.jattach__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
} /* 10-07 사용자: 첨부 영역 정리 — 제출 방식 전환은 제목 줄 오른쪽 한 덩어리, 파일은 입력칸과 같은 박스 */
.jattach__tabs {
  display: inline-flex;
  flex: none;
  padding: 3px;
  background: rgba(10, 10, 10, 0.06);
} /* 10-07 사용자: 검정 채움 버튼(지원하기 · 지원서 제출)과 구분 — 회색 바탕 위 흰 칸이 고른 쪽 */
.jattach__tabs label {
  position: relative;
  cursor: pointer;
}
.jattach__tabs input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.jattach__tabs span {
  display: block;
  min-width: 56px;
  padding: 6px 14px;
  font: 500 14px/1 var(--sans);
  text-align: center;
  color: rgba(10, 10, 10, 0.5);
  transition:
    background-color 0.2s,
    color 0.2s,
    box-shadow 0.2s;
}
.jattach__tabs label:hover span {
  color: var(--ink);
}
.jattach__tabs input:checked + span {
  background: var(--white);
  color: var(--ink);
  box-shadow: 0 0 0 1px rgba(10, 10, 10, 0.1);
}
.jattach__tabs input:focus-visible + span {
  outline: 1px solid var(--ink);
  outline-offset: 2px;
}
.jattach__drop {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 8px;
  padding: 14px;
  border: 1px solid rgba(10, 10, 10, 0.14);
  background: var(--white);
  cursor: pointer;
  transition:
    border-color 0.2s,
    background-color 0.2s;
}
.jattach__drop input {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
} /* 투명 입력이 박스를 덮어 누르기 · 끌어다 놓기를 브라우저가 처리 */
.jattach__drop:hover {
  border-color: rgba(10, 10, 10, 0.4);
}
.jattach__drop:focus-within,
.jattach__drop.is-drag {
  border-color: var(--ink);
}
.jattach__drop.is-drag {
  background: #f5f5f5;
}
.jfield.is-err .jattach__drop {
  border-color: #d4382c;
}
.jattach__icon {
  flex: none;
  width: 20px;
  height: 20px;
  color: rgba(10, 10, 10, 0.42);
  transition: color 0.2s;
}
.jattach__drop:hover .jattach__icon,
.jattach__drop.has-files .jattach__icon {
  color: var(--ink);
}
.jattach__text {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.jattach__main {
  overflow: hidden;
  font: 400 16px/1.5 var(--sans);
  color: rgba(10, 10, 10, 0.56);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.jattach__drop.has-files .jattach__main {
  color: var(--ink);
}
.jattach__sub {
  font: 400 14px/1.5 var(--sans);
  color: rgba(10, 10, 10, 0.42);
}
.jattach__sub {
  overflow: hidden;
}
.jattach__subin {
  display: flex;
  flex-wrap: wrap;
  margin-left: -12px;
} /* 규칙은 형식 · 용량 두 덩어리 — 좁으면 덩어리째 다음 줄로, 줄 첫머리 구분점은 잘라 숨김 */
.jattach__subin > span {
  position: relative;
  padding-left: 12px;
  text-wrap: balance;
}
.jattach__subin > span::before {
  content: '·';
  position: absolute;
  left: 0;
  width: 12px;
  text-align: center;
}
.jattach__btn {
  flex: none;
  padding: 9px 14px;
  border: 1px solid rgba(10, 10, 10, 0.24);
  font: 500 14px/1 var(--sans);
  color: var(--ink);
  transition: border-color 0.2s;
}
.jattach__drop:hover .jattach__btn {
  border-color: var(--ink);
}
@media (hover: none), (pointer: coarse) {
  .jattach__dnd {
    display: none;
  }
} /* 터치 기기는 '파일을 선택해 주세요' */
@media (max-width: 767px) {
  .jattach__btn {
    display: none;
  }
} /* 좁은 화면은 박스 전체가 버튼 — 글자 자리 확보 */
.jconsent {
  display: flex;
  align-items: flex-start;
  gap: 4px;
  font: 400 14px/1.6 var(--sans);
  color: rgba(10, 10, 10, 0.7);
  cursor: pointer;
}
.jconsent input {
  margin: 4px 0 0;
  accent-color: var(--ink);
} /* 10-07 사용자: 체크박스 ↔ 문구 4px — 브라우저 기본 여백(좌 4 · 우 3)을 없애 정확히 4px, 왼쪽은 입력칸 가장자리에 맞춤 */
.jconsent a {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.jform__submit {
  justify-self: start;
}
.btn.jform__submit {
  transition:
    background-color 0.25s,
    color 0.25s,
    border-color 0.25s;
}
.btn.jform__submit[aria-disabled='true'] {
  background: rgba(10, 10, 10, 0.08);
  border-color: transparent;
  color: rgba(10, 10, 10, 0.36);
  cursor: default;
} /* 10-07 사용자: 필수 칸이 다 채워지기 전엔 비활성 모양, 채워지면 검정 — 눌러도 막지 않고 빠진 칸을 알려 줌 */
.btn.jform__submit[aria-disabled='true']::before {
  content: none;
}
.jform__status {
  min-height: 1.4em;
  font: 500 14px/1.4 var(--sans);
}
@media (min-width: 768px) {
  .jform {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .jfield--wide,
  .jform__submit,
  .jform__status {
    grid-column: 1 / -1;
  }
}
@media (min-width: 1280px) {
  .japply__intro {
    grid-column: 1 / 5;
    position: sticky;
    top: calc(var(--hdr-h) + 24px);
  }
  .jform {
    grid-column: 6 / 13;
  }
}

/* 운영 전용 — 접수 완료: 폼 자리에 같은 흰 박스, 문구는 운영 그대로(줄바꿈 유지) */
.jsuccess {
  padding: 40px 28px;
  border: 1px solid rgba(10, 10, 10, 0.14);
  background: var(--white);
}
.jsuccess:focus {
  outline: none;
}
.jsuccess__title {
  font: 400 28px/1.3 var(--serif);
  letter-spacing: -0.01em;
  color: var(--ink);
}
.jsuccess__desc {
  margin-top: 16px;
  font: 400 16px/1.7 var(--sans);
  color: var(--muted);
  white-space: pre-line;
}
.jsuccess .btn {
  margin-top: 28px;
}
@media (min-width: 1280px) {
  .jsuccess {
    grid-column: 6 / 13;
    padding: 56px 48px;
  }
  .jsuccess__title {
    font-size: 32px;
  }
}