/* 개편(mood-A v3) 운영본 — 원본 design/mockups/mood-A/v3/css/careers.css(채용 /recruiting). 차이 없음 — 시안을 고치면 여기도 같이 */

/* ① Hero — 10-06 사용자: 배경 사진은 꽉 차게(풀블리드 · 고정 헤더 뒤까지), 제목 · 서브 · 버튼은 가운데 정렬.
   제목은 사이트 히어로 세리프 · 같은 위계 크기(64 · 52 · 32), 서브 없음 · 버튼은 사이트 기존 .btn(10-06 사용자).
   높이는 메인 · 회사 소개 · 서비스 소개 히어로와 같게(80vh · 520–900px, 10-06 사용자). 글 묶음은 높이 40% 지점 — 사진의 두 사람(가로 60–88% · 세로 70–98% 높이) 위, 발코니 자리에 얹힘.
   덮개(10-06 사용자: dim 더 세게, Scale 참고) — Scale 덮개(위 투명 → 아래 검정) + 사진 전체를 한 번 누르는 층 + 위 메뉴 글자 · 가운데 제목 자리 보강 */
.crr-hero {
  position: relative;
  height: 80vh;
  min-height: 520px;
  max-height: 900px;
  overflow: hidden;
  background: var(--ink);
  color: var(--white);
}
.crr-hero__media {
  position: absolute;
  inset: 0;
}
.crr-hero__media picture,
.crr-hero__media img {
  display: block;
  width: 100%;
  height: 100%;
}
.crr-hero__media img {
  object-fit: cover;
  object-position: 50% 50%;
  transform: scale(1.014);
  animation: crr-hero-zoom 1.8s var(--expo) both;
} /* 처음 열릴 때 살짝 물러나며 자리 잡음 */
@keyframes crr-hero-zoom {
  from {
    transform: scale(1.08);
  }
}
@media (prefers-reduced-motion: reduce) {
  .crr-hero__media img {
    animation: none;
  }
}
.crr-hero__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 62% 42% at 50% 40%, rgba(0, 0, 0, 0.36) 0%, rgba(0, 0, 0, 0) 72%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.42) 0%, rgba(0, 0, 0, 0) 22%),
    linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.88) 100%), rgba(0, 0, 0, 0.24);
}
.crr-hero__inner {
  position: absolute;
  z-index: 1;
  left: 0;
  right: 0;
  top: 40%;
  transform: translateY(-50%);
} /* 글 묶음의 가운데가 높이 40% */
.crr-hero__copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
  max-width: 72rem;
  margin-inline: auto;
  text-align: center;
}
.crr-hero__title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(30px, 8.2vw, 38px);
  line-height: 1.16;
  letter-spacing: -0.015em;
  text-shadow: 0 2px 40px rgba(0, 0, 0, 0.35);
}
.crr-hero__title .crr-br-m {
  display: none;
}
@media (max-width: 767px) {
  .crr-hero__title .crr-br-m {
    display: inline;
  }
} /* 좁은 화면은 'M&A 업계의 / 업무 방식을 / 혁신하고 있습니다' 세 줄(그냥 두면 '방식을'만 홀로 떨어짐) */
.crr-hero .btn {
  --btn-ink: var(--white);
  --btn-paper: var(--ink);
} /* 사이트 기존 버튼 — 메인 히어로와 같은 흰 테두리, 호버 시 흰 채움 · 글자 검정 */
@media (min-width: 768px) {
  .crr-hero__title {
    font-size: 52px;
    line-height: 1.14;
  }
}
@media (min-width: 1280px) {
  .crr-hero__copy {
    gap: 40px;
  }
  .crr-hero__title {
    font-size: 64px;
    line-height: 1.12;
  }
}

/* ② Our Mission — 10-06 사용자: 위 왼쪽 제목 · 오른쪽 서브(.sec-head), 아래 주요 지표 4칸(메인 About .stats 부품 — 글자 크기 · 등장 모션 그대로, 칸 수만 4) */
.crr-nw {
  white-space: nowrap;
} /* 'M&A 종합 금융사로'처럼 갈라지면 어색한 말 묶음 */
.crr-stats {
  margin-top: 16px;
}
.crr-mission .stats__asof {
  margin-top: 20px;
}
@media (min-width: 768px) {
  .crr-stats {
    margin-top: 24px;
  }
}
@media (min-width: 1280px) {
  .crr-stats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-top: 40px;
  }
  .crr-mission .stats__asof {
    margin-top: 24px;
  }
}

/* ③ Our Standard — 회사 소개 Our Value 줄(.value--lines .vlines, our-firm.css) 그대로라 채용 고유 규칙 없음(10-06 사용자: 항목 3개, 아래 문단 삭제, 라벨은 Our Standard) */

/* ⑤ 지원(What We Offer) — 10-06 사용자: 시안 3개 중 시안 1(Optiver 탭) 확정. 항목은 환경 · 성장 기회 · 복지 · 보상 */
.crr-offer {
  background: var(--ink);
  color: var(--white);
}
.crr-offer .sec-head__side {
  color: rgba(255, 255, 255, 0.64);
}

/* 시안 1 — Optiver 'A career built on impact' 탭 실측(1440): 판 줄 높이 692 · 사이 12, 펼친 판이 남는 폭을 채우고 접힌 판 102, 전환 0.6s.
   접힌 판: 사진 위 항목명(위) · 번호(아래). 펼친 판: 사진은 그대로 보이고(10-06 사용자: 사진 시인성), 설명은 아래 유리 카드(.svc-glass — 메인 What We Do 타일과 같은 문법)에만. 767↓는 세로 펼침 */
.crr-o1 .sec-head {
  margin-bottom: 32px;
}
.crr-o1__row {
  --o1-ease: cubic-bezier(0.65, 0, 0.35, 1);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.crr-o1__panel {
  position: relative;
  overflow: hidden;
  background: #111;
}
.crr-o1__panel.is-on {
  min-height: 560px;
} /* 767↓ 세로 펼침 — 카드(복지 다섯 줄이면 약 240px) 위로 사진이 절반 이상 보이게 */
.crr-o1__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.crr-o1__bg img,
.crr-o1__bg video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.crr-o1__bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.55) 0%,
    rgba(0, 0, 0, 0.15) 40%,
    rgba(0, 0, 0, 0.25) 70%,
    rgba(0, 0, 0, 0.75) 100%
  );
  transition: opacity 0.6s ease;
}
.crr-o1__bg::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 45%, rgba(0, 0, 0, 0.4) 100%);
  opacity: 0;
  transition: opacity 0.6s ease;
} /* 펼친 판: 접힌 판 덮개(위 · 아래 진하게)를 걷고 카드 뒤만 살짝 */
.crr-o1__panel.is-on .crr-o1__bg::after {
  opacity: 0;
}
.crr-o1__panel.is-on .crr-o1__bg::before {
  opacity: 1;
}
.crr-o1__tab {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 88px;
  padding: 20px 24px;
  color: var(--white);
  text-align: left;
  -webkit-tap-highlight-color: transparent;
}
.crr-o1__tab:focus-visible {
  outline: 1px solid var(--white);
  outline-offset: -6px;
}
.crr-o1__tab-label {
  font: 600 16px/1.3 var(--sans);
}
.crr-o1__num {
  font: 500 16px/1 var(--sans);
  font-variant-numeric: tabular-nums;
}
.crr-o1__panel.is-on .crr-o1__tab {
  display: none;
}
.crr-o1__pane {
  position: absolute;
  z-index: 2;
  left: 12px;
  right: 12px;
  bottom: 12px;
  display: none;
  flex-direction: column;
  padding: 20px;
  color: var(--white);
}
.crr-o1__panel.is-on .crr-o1__pane {
  display: flex;
  animation: crr-o1-in 0.6s ease 0.15s both;
}
@keyframes crr-o1-in {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
}
.crr-o1__pane-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
}
.crr-o1__label {
  font: 600 16px/1.3 var(--sans);
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.72);
} /* 10-06 사용자: 정보 카드 작은 글자 짝수로 한 단계 — 항목명 · 번호 14 → 16, 설명 16 → 18(1280↑) */
.crr-o1__pane .crr-o1__num {
  font-size: 16px;
  color: rgba(255, 255, 255, 0.72);
}
.crr-o1__title {
  margin-top: 12px;
  font: 400 22px/1.3 var(--serif);
  letter-spacing: -0.01em;
}
.crr-o1__text,
.crr-o1__list {
  max-width: 40em;
  margin: 10px 0 0;
  padding: 0;
  font: 400 16px/1.65 var(--sans);
  color: rgba(255, 255, 255, 0.8);
  list-style: none;
}
.crr-o1__list li {
  position: relative;
  padding-left: 16px;
  break-inside: avoid;
}
.crr-o1__list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.8em;
  width: 6px;
  height: 1px;
  background: rgba(255, 255, 255, 0.55);
}
@media (min-width: 768px) {
  .crr-o1__row {
    flex-direction: row;
    height: clamp(420px, calc(100vh - 380px), 600px);
  } /* 섹션(위아래 64 + 머리 ≈ 178 + 판 줄)이 고정 헤더를 뺀 한 화면 안에 */
  .crr-o1__panel {
    flex: 0 0 72px;
    transition:
      flex-grow 0.6s var(--o1-ease),
      flex-basis 0.6s var(--o1-ease);
  }
  .crr-o1__panel.is-on {
    flex: 1 1 0;
    min-height: 0;
  }
  .crr-o1__tab {
    position: absolute;
    inset: 0;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    min-height: 0;
    padding: 40px 8px 32px;
    text-align: center;
  }
  .crr-o1__tab-label {
    word-break: keep-all;
  }
  .crr-o1__pane {
    left: 16px;
    right: 16px;
    bottom: 16px;
    padding: 24px 28px;
  }
  .crr-o1__title {
    font-size: 26px;
  }
}
@media (min-width: 1280px) {
  .crr-o1 .sec-head {
    margin-bottom: 40px;
  }
  .crr-o1__row {
    height: clamp(420px, calc(100vh - 392px), 692px);
  } /* 1440×900 → 508 · 1280×800 → 420 · 1512×982 → 590 · 1920×1080 → 688(Optiver 692) — 고정 헤더 아래 한 화면 */
  .crr-o1__panel {
    flex-basis: 102px;
  }
  .crr-o1__pane {
    left: 20px;
    right: 20px;
    bottom: 20px;
    padding: 28px 32px;
  }
  .crr-o1__title {
    font-size: 32px;
    line-height: 1.25;
  }
  .crr-o1__text,
  .crr-o1__list {
    font-size: 18px;
    line-height: 1.6;
  }
  .crr-o1__list {
    columns: 2;
    column-gap: 40px;
    max-width: none;
  } /* 복지 다섯 줄을 두 단으로 — 카드가 사진을 덜 가리게 */
}
@media (prefers-reduced-motion: reduce) {
  .crr-o1__panel {
    transition: none;
  }
  .crr-o1__panel.is-on .crr-o1__pane {
    animation: none;
  }
}

/* ⑦ 지원 절차 — 네 단계(위 선이 차례로 그어지는 타임라인). 10-07 채용공고(흰)가 위에 들어와 검정 바탕으로 */
.crr-process {
  background: var(--ink);
  color: var(--white);
}
.crr-steps {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}
.crr-step {
  position: relative;
  padding-block: 24px;
}
.crr-step__no {
  display: block;
  font: 400 14px/1 var(--sans);
  color: rgba(255, 255, 255, 0.56);
}
.crr-step__title {
  margin-top: 16px;
  font: 400 24px/1.3 var(--serif);
  letter-spacing: -0.01em;
}
.crr-step__text {
  margin-top: 10px;
  font: 400 16px/1.7 var(--sans);
  color: rgba(255, 255, 255, 0.66);
}
@media (min-width: 768px) {
  .crr-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--gap);
  }
}
@media (min-width: 1280px) {
  .crr-steps {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .crr-step {
    padding-block: 32px 0;
  }
  .crr-step__title {
    font-size: 28px;
  }
  .crr-step__text {
    font-size: 18px;
    line-height: 1.6;
  } /* 10-06 사용자: What We Offer 카드 설명과 같은 18px */
}

/* ⑥ 채용공고 — 10-07 사용자: 지원 절차 위 목록(별도 채용공고 페이지 없앨 예정). 줄마다 제목 · 칩(직군 · 고용형태 · 채용유형) · 화살표, 위 선은 라인 모션. 운영은 DB 공고 */
.crr-jobs {
  scroll-margin-top: var(--hdr-h);
} /* '채용 중인 포지션 보기'(#openings)로 넘어왔을 때 고정 헤더가 머리를 가리지 않게 */
.crr-joblist {
  margin: 0;
  padding: 0;
  list-style: none;
}
.crr-job {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px 24px;
  align-items: center;
  padding-block: 24px;
}
.crr-job__title {
  font: 500 18px/1.45 var(--sans);
}
.crr-job__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.crr-job__meta span {
  padding: 6px 10px;
  border: 1px solid rgba(10, 10, 10, 0.16);
  font: 500 14px/1.2 var(--sans);
  color: var(--muted);
}
.crr-job__go {
  grid-column: 2;
  grid-row: 1 / 3;
  font-size: 20px;
  transition: transform 0.35s var(--expo);
}
@media (hover: hover) {
  .crr-job:hover .crr-job__go {
    transform: translateX(4px);
  }
  .crr-job:hover .crr-job__title {
    text-decoration: underline;
    text-underline-offset: 5px;
    text-decoration-thickness: 1px;
  }
}
@media (min-width: 1280px) {
  /* 10-07 사용자: 칩 시작선을 Team 섹션 설명(.sec-head__side 9 / 13)과 맞춤 — 사이트 12칸 그리드 · 같은 칸 간격 */
  .crr-job {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--gap);
    row-gap: 0;
    padding-block: 32px;
  }
  .crr-job__title {
    grid-column: 1 / 9;
    font-size: 20px;
  }
  .crr-job__meta {
    grid-column: 9 / 12;
  }
  .crr-job__go {
    grid-column: 12 / 13;
    grid-row: auto;
    justify-self: end;
  }
}

/* ⑦ 채용공고 CTA — 10-06 사용자: 제목만(52 · 40 · 28) + 채움 버튼 하나, 배경은 밝고 웅장한 빌딩(맑은 낮 · 두 유리 타워),
   글 묶음은 각진 유리 판(사이트 공통 .svc-glass — 사선 명암 · 1px 그라데이션 테두리 · 좌상단 L자 림)으로 엣지 있게. 테두리는 조금 또렷하게(0.175 → 0.3) */
.crr-join {
  position: relative;
  display: grid;
  align-items: center;
  min-height: 460px;
  padding-block: 64px;
  overflow: hidden;
  background: var(--ink);
  color: var(--white);
}
.crr-join__bg {
  position: absolute;
  inset: 0;
}
.crr-join__bg video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.crr-join__bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(10, 10, 10, 0.5) 0%,
    rgba(10, 10, 10, 0.08) 30%,
    rgba(10, 10, 10, 0.08) 70%,
    rgba(10, 10, 10, 0.5) 100%
  );
} /* 10-07 사용자: 메인 히어로 4번째 영상(흐름장) — 원래 검정 바탕이라 덮개는 가볍게, 위아래만 눌러 앞(지원 절차) · 뒤(푸터) 검정과 이어지게 */
.crr-join__inner {
  position: relative;
  z-index: 1;
  width: 100%;
}
.crr-join__glass {
  --glass-fill: rgba(255, 255, 255, 0.05);
  --glass-start: rgba(255, 255, 255, 0.03);
  --glass-end: rgba(255, 255, 255, 0.1);
  --glass-border: rgba(255, 255, 255, 0.32);
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 920px;
  margin-inline: auto;
  padding: 48px 24px;
  text-align: center;
  -webkit-backdrop-filter: blur(10px) saturate(140%) brightness(1.2);
  backdrop-filter: blur(10px) saturate(140%) brightness(1.2);
} /* 10-07: 배경이 어두운 흐름장 영상으로 바뀌어 짙은 남색 유리(밝은 사진용) → 밝은 유리, 뒤 선이 비쳐 유리로 읽히게 */
.crr-join__glass .eyebrow {
  color: rgba(255, 255, 255, 0.74);
}
.crr-join__title {
  font: 400 28px/1.2 var(--serif);
  letter-spacing: -0.015em;
  text-wrap: balance;
} /* 10-06 사용자: 조금 줄임 64 · 48 · 32 → 52 · 40 · 28 */
.crr-join .btn {
  margin-top: 32px;
  background: var(--white);
  color: var(--ink);
  border-color: var(--white);
  --btn-ink: #d9d9d9;
  --btn-paper: var(--ink);
} /* 10-06 사용자: 채움 버튼 — 문의 완료 · 문의 목록과 같은 규칙(어두운 바탕 흰 채움, 호버는 톤만 바뀜) */
.crr-join .btn:hover {
  background: var(--white);
  border-color: #d9d9d9;
}
@media (max-width: 767px) {
  .crr-join__title br {
    display: inline;
  }
}
@media (min-width: 768px) {
  .crr-join {
    min-height: 480px;
    padding-block: 72px;
  }
  .crr-join__glass {
    padding: 52px 56px;
  }
  .crr-join__title {
    font-size: 40px;
    line-height: 1.18;
  }
}
@media (min-width: 1280px) {
  .crr-join {
    min-height: clamp(480px, 58vh, 560px);
  } /* 10-06 2차: 높이 줄임(80vh · 640–820 → 58vh · 480–560) */
  .crr-join__glass {
    padding: 56px 72px;
  }
  .crr-join__title {
    font-size: 52px;
    line-height: 1.16;
  }
  .crr-join .btn {
    margin-top: 36px;
  }
}

/* 운영 전용 — 열린 공고가 없을 때(DB) */
.crr-jobs__empty {
  padding-block: 24px;
  font: 400 16px/1.6 var(--sans);
  color: var(--muted);
}