/* How to Join — Figma: Flow Charts / Frame 2147242461 (54:382)
   1. 보이드 모집할 때 (54:383) 1920×1080 — 헤더 90px 는 캔버스 밖이라 990.
   2. 리크루팅 페이지 (54:459) 1920×1696.
   좌표는 Figma 원본값, 캔버스 스케일은 styles.css + assets/fit.js 담당. */

.join-page p,
.join-page h2,
.join-page h3,
.join-page ol,
.join-page dl,
.join-page dd {
  margin: 0;
}

.join-page {
  /* Alte Haas Grotesk 는 배포 웹폰트가 없어 비슷한 그로테스크로 대체한다.
     날짜 속 한글(요일)은 Pretendard 로 떨어진다. */
  --font-alte: "Alte Haas Grotesk", "Helvetica Neue", Helvetica, Arial,
    var(--font-pretendard);
}

/* ══ 1. 보이드 모집할 때 (54:383) ═════════════════════════════════
   상단 90px 는 헤더가 차지하므로 스테이지 좌표 = Figma y − 90 (990px 영역). */

.join {
  height: var(--hero-height, 990px);
  /* 프레임 배경 #e7e7e7 위에 #d9d9d9 20% 사각형(54:384) → #e4e4e4 */
  background: #e4e4e4;
  overflow: hidden;
}

/* 145px 정사각 격자 (54:385, #BBBBBB 50%)
   세로선 x=145n / 가로선은 헤더 90px 만큼 밀려 55 + 145k.
   phase 는 background-position 이 아니라 stop 에 직접 굽는다.      */
.join__grid {
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(
      to right,
      rgba(187, 187, 187, 0.5) 0 var(--grid-line),
      transparent var(--grid-line) 145px
    ),
    repeating-linear-gradient(
      to bottom,
      transparent 0 55px,
      rgba(187, 187, 187, 0.5) 55px calc(55px + var(--grid-line)),
      transparent calc(55px + var(--grid-line)) 145px
    );
}

/* --stage-scale 은 assets/join-fit.js 가 섹션(.join)에 넣는다 */
.join__stage {
  position: absolute;
  left: 0;
  top: 50%;
  width: 1920px;
  height: 990px;
  transform: translateY(-50%) scale(var(--stage-scale, 1));
  transform-origin: center center;
}

/* ── WE'RE RECRUITING / NOW (54:439 Union) ── */
.join__wordmark {
  position: absolute;
  left: 705.44px;
  top: 203px;
  width: 511.242px;
  height: 558.269px;
}

/* ── 프로스티드 카드 (54:445) ── */
.join__card {
  position: absolute;
  left: 710px;
  top: 346.57px;
  width: 500px;
  height: 312px;
  border-radius: 25px;
  background: rgba(247, 247, 247, 0.7);
  backdrop-filter: blur(1.819px);
  -webkit-backdrop-filter: blur(1.819px);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
}

/* 54:451 — 원 + 손잡이, 그룹 opacity 50% (에셋에 포함) */
.join__search-icon {
  position: absolute;
  left: 738.52px;
  top: 373.12px;
  width: 23.193px;
  height: 23.193px;
}

.join__placeholder {
  position: absolute;
  left: 776.77px;
  top: 368.05px;
  font-family: var(--font-outfit);
  font-weight: 400;
  font-size: 23px;
  line-height: 1.5;
  letter-spacing: -0.46px;
  color: #636363;
  opacity: 0.5;
  white-space: nowrap;
}

.join__divider {
  position: absolute;
  left: 710px;
  top: 418.11px;
  width: 500px;
  height: 0.927px;
}

.join__item {
  position: absolute;
  left: 740.61px;
  font-family: var(--font-outfit);
  font-weight: 400;
  font-size: 20px;
  line-height: 1.5;
  letter-spacing: -0.6px;
  text-transform: uppercase;
  color: #636363;
  white-space: nowrap;
}

/* ── 전형 단계 Portfolio / Interview (54:454) ── */
.join__pill {
  position: absolute;
  top: 584.46px;
  width: 179.161px;
  height: 44.861px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: #e7e7e7;
  font-family: var(--font-outfit);
  font-weight: 400;
  font-size: 23px;
  line-height: 1.5;
  letter-spacing: -0.92px;
  /* 글자만 30% — pill 바탕은 불투명 */
  color: rgba(0, 0, 0, 0.3);
  white-space: nowrap;
}

/* ── Scroll (54:442 · 54:443) ──
   Figma 에서 섹션 바닥 기준(글자 top = 100% − 70)이라 무대 밖에 둔다.
   크기와 바닥 여백은 무대와 같은 배율을 따라간다. */
.join__scroll {
  position: absolute;
  left: 50%;
  bottom: calc(40px * var(--stage-scale, 1));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6.03px;
  transform: translateX(-50%) scale(var(--stage-scale, 1));
  transform-origin: center bottom;
  pointer-events: none;
}

.join__scroll-arrow {
  width: 45.64px;
  height: 29.188px;
  /* 에셋은 위를 향한 삼각형 — Figma 에서 세로로 뒤집어 쓴다 */
  transform: scaleY(-1);
}

.join__scroll-label {
  font-family: var(--font-outfit);
  font-weight: 400;
  font-size: 20px;
  line-height: 1.5;
  letter-spacing: -0.4px;
  color: #000;
  opacity: 0.6;
  white-space: nowrap;
}

/* ══ 2. 리크루팅 페이지 (54:459) ══════════════════════════════════
   Figma 가 오토 레이아웃이라 좌표 대신 flex 흐름으로 옮긴다 —
   모바일에서 같은 마크업을 세로로 다시 쌓기 위해서다. */

.recruit {
  height: 1696px;
  background: #e7e7e7;
}

/* 145px 격자 (54:461) — 섹션 기준 세로선 x=145n, 가로선 y=145n.
   어두운 띠·카드·패널 밑으로 숨는다 (z-index 1 / 2).
   Figma 에서는 띠 위로도 지나가지만 띠에는 격자를 보이지 않게 한다. */
.recruit__grid {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-image:
    repeating-linear-gradient(
      to right,
      rgba(187, 187, 187, 0.5) 0 var(--grid-line),
      transparent var(--grid-line) 145px
    ),
    repeating-linear-gradient(
      to bottom,
      rgba(187, 187, 187, 0.5) 0 var(--grid-line),
      transparent var(--grid-line) 145px
    );
}

/* 어두운 띠 (54:460 · 54:509) — 격자(z 1)를 덮는다 */
.recruit__head {
  position: relative;
  z-index: 2;
  height: 308px;
  padding-top: 100px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
  background: #2a2a2a;
  text-align: center;
  white-space: nowrap;
}

.recruit__eyebrow {
  font-family: var(--font-alte);
  font-weight: 400;
  font-size: 30px;
  line-height: 1;
  letter-spacing: -1.2px;
  color: #e0ffde;
  opacity: 0.8;
}

/* Apple SD Gothic Neo SB → Pretendard 600 */
.recruit__title {
  font-family: var(--font-pretendard);
  font-weight: 600;
  font-size: 44px;
  line-height: 1.5;
  letter-spacing: -2.2px;
  color: #f3f3f3;
}

/* 본문 (54:512) — left 120 / top 491, 두 블록 사이 190 */
.recruit__body {
  position: relative;
  z-index: 2;
  width: 1683px;
  margin: 183px 0 0 120px; /* 491 − 띠 308 */
  display: flex;
  flex-direction: column;
  gap: 190px;
}

.recruit__block {
  display: flex;
  align-items: flex-start;
}

.recruit__block--process {
  gap: 218px;
}

.recruit__block--info {
  gap: 215px;
}

.recruit__heading {
  flex-shrink: 0;
  width: 242px;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.recruit__label {
  font-family: var(--font-alte);
  font-weight: 400;
  font-size: 28px;
  line-height: 1;
  letter-spacing: -1.12px;
  color: #7c7c7c;
  opacity: 0.8;
}

.recruit__heading-title {
  font-family: var(--font-pretendard);
  font-weight: 600;
  font-size: 40px;
  line-height: 1.5;
  letter-spacing: -2px;
  color: #333;
}

/* 칩 — 서류 모집 / 지원 자격 … (Apple SD Gothic Neo SB 22) */
.recruit__chip {
  flex-shrink: 0;
  padding: 8px 12px;
  border-radius: 5px;
  background: #e7e7e7;
  font-family: var(--font-pretendard);
  font-weight: 600;
  font-size: 22px;
  line-height: 1.5;
  letter-spacing: -1.1px;
  color: #333;
  white-space: nowrap;
}

/* ── 모집 일정 (54:517) ── */
.recruit__schedule {
  width: 1220px;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 35px;
}

.recruit__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 30px 35px;
  border-radius: 10px;
  background: #f7f7f7;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.05);
}

.recruit__date {
  margin-left: auto;
  font-family: var(--font-alte);
  font-weight: 400;
  font-size: 32px;
  line-height: 1;
  letter-spacing: -1.92px;
  color: #636363;
  opacity: 0.8;
  text-align: right;
  white-space: nowrap;
}

/* 요일 한 글자는 Apple SD Gothic Neo M 30 → Pretendard 500 */
.recruit__day {
  font-family: var(--font-pretendard);
  font-weight: 500;
  font-size: 30px;
}

/* ── 지원 안내 (54:538) ── */
.recruit__panel {
  display: flex;
  align-items: flex-start;
  gap: 143px;
  padding: 45px 120px;
  border-radius: 10px;
  background: #f7f7f7;
}

.recruit__col {
  display: flex;
  flex-direction: column;
  gap: 25px;
}

.recruit__col--left {
  width: 447px;
}

.recruit__col--right {
  width: 396px;
}

.recruit__info {
  display: flex;
  align-items: center;
  gap: 24px;
}

.recruit__info--top {
  align-items: flex-start;
}

/* Apple SD Gothic Neo M 26 → Pretendard 500 */
.recruit__text {
  font-family: var(--font-pretendard);
  font-weight: 500;
  font-size: 26px;
  line-height: 1.5;
  letter-spacing: -1.3px;
  color: #636363;
  white-space: nowrap;
}

.recruit__fields {
  display: flex;
  align-items: center;
  gap: 10px;
}

.recruit__dot {
  flex-shrink: 0;
  width: 6px;
  height: 6px;
}

.recruit__text--stack {
  display: flex;
  flex-direction: column;
  gap: 5px;
  width: 270px;
}

.recruit__note {
  font-family: var(--font-pretendard);
  font-weight: 400;
  font-size: 18px;
  line-height: 1.5;
  letter-spacing: -1.08px;
  color: #b1b1b1;
}

/* ══ 모바일 (≤900px) ════════════════════════════════════════════
   캔버스가 1920 → 390 으로 줄면(배율 0.2) 26px 본문이 5px 가 된다.
   모집 일정·지원 자격은 이 페이지의 본론이라 읽혀야 한다 —
   같은 마크업을 세로로 쌓고 크기는 화면 px 로 정한다.
   --px = 화면 1px 에 해당하는 디자인 px (--page-scale 은 fit.js 가 캔버스에 넣는다) */
@media (max-width: 900px) {
  .recruit {
    --px: calc(1px / var(--page-scale, 1));
    height: auto;
    padding-bottom: calc(72 * var(--px));
  }

  .recruit__head {
    height: auto;
    padding: calc(44 * var(--px)) calc(20 * var(--px)) calc(40 * var(--px));
    gap: calc(10 * var(--px));
    white-space: normal;
  }

  .recruit__eyebrow {
    font-size: calc(14 * var(--px));
    letter-spacing: -0.04em;
  }

  .recruit__title {
    font-size: calc(20 * var(--px));
    line-height: 1.45;
    letter-spacing: -0.05em;
    word-break: keep-all;
  }

  .recruit__body {
    width: auto;
    margin: calc(48 * var(--px)) calc(20 * var(--px)) 0;
    gap: calc(52 * var(--px));
  }

  .recruit__block,
  .recruit__panel {
    flex-direction: column;
    align-items: stretch;
  }

  .recruit__block--process,
  .recruit__block--info {
    gap: calc(16 * var(--px));
  }

  .recruit__heading {
    width: auto;
    gap: calc(4 * var(--px));
  }

  .recruit__label {
    font-size: calc(13 * var(--px));
    letter-spacing: -0.04em;
  }

  .recruit__heading-title {
    font-size: calc(22 * var(--px));
    letter-spacing: -0.05em;
  }

  .recruit__chip {
    padding: calc(3 * var(--px)) calc(8 * var(--px));
    border-radius: calc(4 * var(--px));
    font-size: calc(13 * var(--px));
    letter-spacing: -0.05em;
  }

  .recruit__schedule {
    width: auto;
    gap: calc(10 * var(--px));
  }

  .recruit__row {
    flex-wrap: wrap;
    gap: calc(8 * var(--px)) calc(12 * var(--px));
    padding: calc(14 * var(--px)) calc(16 * var(--px));
    border-radius: calc(8 * var(--px));
    box-shadow: 0 0 calc(5 * var(--px)) rgba(0, 0, 0, 0.05);
  }

  .recruit__date {
    font-size: calc(15 * var(--px));
    letter-spacing: -0.06em;
  }

  .recruit__day {
    font-size: calc(14 * var(--px));
  }

  .recruit__panel {
    gap: calc(14 * var(--px));
    padding: calc(20 * var(--px)) calc(16 * var(--px));
    border-radius: calc(8 * var(--px));
  }

  .recruit__col,
  .recruit__col--left,
  .recruit__col--right {
    width: auto;
    gap: calc(14 * var(--px));
  }

  .recruit__info,
  .recruit__info--top {
    align-items: baseline;
    gap: calc(12 * var(--px));
  }

  .recruit__text {
    min-width: 0;
    font-size: calc(15 * var(--px));
    letter-spacing: -0.05em;
    white-space: normal;
    word-break: keep-all;
  }

  .recruit__fields {
    gap: calc(6 * var(--px));
  }

  .recruit__dot {
    align-self: center;
    width: calc(4 * var(--px));
    height: calc(4 * var(--px));
  }

  .recruit__text--stack {
    width: auto;
    gap: calc(2 * var(--px));
  }

  .recruit__note {
    font-size: calc(12 * var(--px));
    letter-spacing: -0.05em;
  }
}