@charset "utf-8";

/* ============================================================
   정보센터 › 채용안내
   시안: Figma 3gC6DdCllqkGj4ATOQ8mMI  node 2048:1069

   모든 치수는 calc(N * var(--u)). N 은 시안(1920) 원값 그대로다.
   --u 는 /gnb/gnb.css, 히어로는 /css/page-hero.css,
   하위 메뉴 탭은 /css/page-tabs.css 가 맡는다.

   구성
     수시채용 띠   1400 × 95 라운드 20 (#f8f8f8) + 코발트 알약
     채용 프로세스 원 150 다섯 개 (간격 313) + 뒤로 지나는 연결선
     지원방법      680 × 170 카드 둘
   ============================================================ */

html {
  scroll-snap-type: none;
  scroll-behavior: auto;
}
body.page {
  background: var(--color-white);
  color: var(--color-ink);
  overflow-x: clip;
}

.rec-page {
  --rec-point: #135a9c;      /* 시안 --color / Ellipse 54 */
  --rec-ink:   #222;         /* 시안 --black */
  --rec-off:   #f4f4f4;      /* 시안 Ellipse 53 — 아직 안 켜진 원 */
  --rec-track: #f8f8f8;      /* 시안 Line 42 — 연결선 바탕 */
  --rec-band:  #f8f8f8;      /* 수시채용 띠 */
  --rec-card:  #f4f4f4;      /* 지원방법 카드 */

  --grid-w: 1400;            /* 시안 260~1660 */
  --gutter: 40;

  --circle: 150;             /* 시안 원 지름 */
  --step-gap: 163;           /* 시안 원 간격 313 - 지름 150 */

  /*
    등장 시간.
    선이 1.5초에 걸쳐 그어지고, 각 단계는 선이 자기에게 닿는 순간 켜진다.
    다섯 칸이므로 닿는 시각은 1.5 × (i/4) = 0.375초 간격이다.
    (0.3 으로 잡으면 마지막 단계가 선보다 0.3초 먼저 켜져 어긋난다)
  */
  --line-dur: 1.5s;
  --step-step: .375s;
}

.rec-wrap {
  width: min(calc(var(--grid-w) * var(--u)), calc(100% - var(--gutter) * var(--u) * 2));
  margin: 0 auto;
}

/* ==================== 섹션 머리 ==================== */
.rec-sec + .rec-sec { margin-top: calc(150 * var(--u)); }

.rec-sec__head { text-align: center; }

.rec-sec__title {
  margin: 0;
  font-family: "Open Sans", var(--font-base);
  font-weight: 600;
  font-size: calc(46 * var(--u));     /* 시안 55 */
  line-height: 1.3;
  letter-spacing: -.05em;             /* -2.75 / 55 */
  color: #000;
}
/* 시안 Ellipse 65 — 제목 뒤에 붙는 12 점 */
.rec-sec__title::after {
  content: "";
  display: inline-block;
  width: calc(12 * var(--u));
  height: calc(12 * var(--u));
  margin-left: calc(14 * var(--u));
  border-radius: 50%;
  background: var(--rec-point);
  vertical-align: baseline;
}

.rec-sec__lead {
  margin: calc(28 * var(--u)) 0 0;
  font-weight: 300;
  font-size: max(calc(23 * var(--u)), 15px);   /* 시안 25 */
  line-height: 1.5;                            /* 시안 35/25 */
  letter-spacing: -.03em;
  color: var(--gray);
  word-break: keep-all;
}

/* ==================== 수시채용 띠 ====================
   시안 2048:1164 — 1400 × 95 라운드 20 */
.rec-band {
  display: flex;
  align-items: center;
  gap: calc(49 * var(--u));           /* 시안 알약 끝(480) → 글자(529) */
  min-height: calc(95 * var(--u));
  margin-top: calc(80 * var(--u));    /* 시안 탭(1026) → 띠(1126) */
  padding: calc(14 * var(--u)) calc(50 * var(--u));
  border-radius: calc(20 * var(--u));
  background: var(--rec-band);
}

.rec-band__badge {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(170 * var(--u));
  height: calc(55 * var(--u));
  border-radius: calc(47.5 * var(--u));
  background: var(--rec-point);
  font-weight: 700;
  font-size: calc(20 * var(--u));
  letter-spacing: -.03em;
  color: var(--color-white);
  white-space: nowrap;
}

.rec-band__text {
  margin: 0;
  font-size: max(calc(21 * var(--u)), 14px);   /* 시안 23 */
  letter-spacing: -.03em;
  color: var(--rec-ink);
  word-break: keep-all;
}

/* ==================== 채용 프로세스 ==================== */
.rec-flow {
  position: relative;
  margin-top: calc(74 * var(--u));    /* 시안 리드(1455) → 원(1619) */
}

/* ---------- 연결선 ----------
   시안 Line 42 — 2.5 두께 #f8f8f8. 원 뒤로 지나간다.
   첫 원 중심에서 마지막 원 중심까지다. */
.rec-flow__line {
  position: absolute;
  left: calc(var(--circle) * var(--u) / 2);
  right: calc(var(--circle) * var(--u) / 2);
  top: calc(var(--circle) * var(--u) / 2);
  height: calc(2.5 * var(--u));
  background: var(--rec-track);
  transform: translateY(-50%);
  pointer-events: none;
}
/* 그어지는 부분. 왼쪽에서 오른쪽으로 자란다 */
.rec-flow__fill {
  position: absolute;
  inset: 0;
  background: var(--rec-point);
  transform: scaleX(0);
  transform-origin: left;
}
.js .rec-flow.is-in .rec-flow__fill {
  transform: scaleX(1);
  /* 일정한 속도로 그어야 각 단계에 닿는 시각을 계산할 수 있다 */
  transition: transform var(--line-dur) linear;
}

/* ---------- 단계 ---------- */
.rec-flow__list {
  position: relative;
  display: grid;
  /* 그냥 1fr 은 최소 너비가 '내용 크기' 라서, 칸보다 넓은 설명이
     칸을 밀어 다섯 원의 간격이 시안보다 벌어진다 */
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: calc(var(--step-gap) * var(--u));
  margin: 0;
  padding: 0;
  list-style: none;
}

.rec-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* 원 + 단계명 묶음. 커지고 작아지는 것은 이 묶음이다 */
.rec-step__badge {
  position: relative;
  width: calc(var(--circle) * var(--u));
  height: calc(var(--circle) * var(--u));
  transition: transform .35s ease;
}

.rec-step__circle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  /* 아래쪽에 이름 자리를 비워 번호를 시안 위치(원 위에서 64)로 올린다 */
  padding-bottom: calc(24 * var(--u));
  border-radius: 50%;
  background: var(--rec-off);
  transition: background-color .45s ease, box-shadow .35s ease;
}

/* 시안 50 Open Sans Extrabold. 켜지기 전에는 흐린 회색 */
.rec-step__num {
  font-family: "Open Sans", var(--font-base);
  font-weight: 800;
  /* 원 크기가 시안 그대로이므로 번호도 줄이지 않는다.
     번호 + 이름이 55 + 4 + 22 = 81, 시안의 묶음 84 와 맞는다 */
  font-size: calc(50 * var(--u));
  line-height: 1.1;
  letter-spacing: -.03em;
  color: #d2d2d2;
  transition: color .45s ease;
}
/* 넓은 화면에서는 원 안에 겹쳐 놓는다 (시안 원 위에서 91) */
.rec-step__name {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(91 * var(--u));
  margin: 0;
  font-weight: 700;
  font-size: max(calc(17 * var(--u)), 13px);
  line-height: 1.3;
  letter-spacing: -.03em;
  color: #535353;
  white-space: nowrap;
  transition: color .45s ease;
}

.rec-step__desc {
  /*
    시안의 설명 상자는 원보다 넓을 수 있다 — 03 이 188 로 가장 넓다.
    칸 너비(원 지름)에 맞추면 03 만 세 줄로 접혀 다섯이 어긋난다.
    가운데 정렬이라 넘치는 만큼은 양옆으로 고르게 나간다.
  */
  /*
    칸보다 넓게 쓰되 원 중심에 맞춰야 한다.
    margin:auto 로는 안 된다 — 남는 공간이 음수면 auto 는 0 으로 취급되어
    가운데 정렬이 풀리고 상자가 칸 왼쪽 끝에 붙는다(글자가 오른쪽으로 밀린다).
    좌우로 같은 만큼 음수 여백을 줘서 바깥 상자를 칸 크기로 되돌린다.
    그러면 align-items:center 가 제 몫을 하고 안쪽 상자도 원 중심에 온다.
  */
  width: calc(100% + 140 * var(--u));
  margin: calc(25 * var(--u)) calc(-70 * var(--u)) 0;  /* 시안 원 아래(1769) → 설명(1794) */
  /*
    아래끝을 14 로 잡으면 1024~1280 구간에서 글자만 커져 03 이 세 줄이 된다.
    글이 짧아 13 으로도 읽힌다
  */
  font-size: max(calc(19 * var(--u)), 13px);   /* 시안 20 */
  line-height: 1.45;
  letter-spacing: -.03em;
  color: var(--rec-ink);
  word-break: keep-all;
}

/* ---------- 켜진 단계 ----------
   시안 2048:1152 가 그 모습이다 — 원이 코발트로 차고 글자가 희어진다 */
.js .rec-flow.is-in .rec-step__circle { background: var(--rec-point); }
.js .rec-flow.is-in .rec-step__num,
.js .rec-flow.is-in .rec-step__name { color: var(--color-white); }

/* 선이 자기에게 닿는 순간에 켜진다. --d 는 몇 번째인지 (js 가 넣는다) */
.js .rec-flow.is-in .rec-step__circle,
.js .rec-flow.is-in .rec-step__num,
.js .rec-flow.is-in .rec-step__name {
  transition-delay: calc(var(--d, 0) * var(--step-step));
}

/* 등장 전 — 원은 조금 작게, 글은 아래에서 */
.js .rec-flow .rec-step__badge { transform: scale(.6); }
.js .rec-flow.is-in .rec-step__badge {
  transform: scale(1);
  transition-delay: calc(var(--d, 0) * var(--step-step));
}

.js .rec-flow .rec-step__desc {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .5s ease-out, transform .5s ease-out;
}
.js .rec-flow.is-in .rec-step__desc {
  opacity: 1;
  transform: none;
  /* 원이 켜진 뒤에 글이 따라온다 */
  transition-delay: calc(var(--d, 0) * var(--step-step) + .15s);
}

/* 다 그어진 뒤 마지막 단계를 한 번 짚어 준다 */
@keyframes recPulse {
  0%   { box-shadow: 0 0 0 0 rgba(19, 90, 156, .45); }
  100% { box-shadow: 0 0 0 calc(22 * var(--u)) rgba(19, 90, 156, 0); }
}
.js .rec-flow.is-in .rec-step:last-child .rec-step__circle {
  animation: recPulse 1s ease-out var(--line-dur) 1;
}

/* ---------- 올렸을 때 ---------- */
.rec-step:hover .rec-step__circle,
.rec-step:focus-within .rec-step__circle {
  box-shadow: 0 calc(16 * var(--u)) calc(34 * var(--u)) rgba(19, 90, 156, .3);
}
/* 등장이 끝난 뒤에도 올리는 움직임이 걸려야 한다 */
.rec-step:hover .rec-step__badge,
.rec-step:focus-within .rec-step__badge,
.js .rec-flow.is-in .rec-step:hover .rec-step__badge,
.js .rec-flow.is-in .rec-step:focus-within .rec-step__badge {
  transform: scale(1.08);
  transition-delay: 0s;
}
.rec-step:hover .rec-step__desc,
.rec-step:focus-within .rec-step__desc { color: var(--rec-point); }

/* ==================== 지원방법 ====================
   시안 2048:1092 — 680 × 170 라운드 25 카드 둘 */
.rec-apply {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: calc(40 * var(--u));
  margin-top: calc(94 * var(--u));    /* 시안 리드(2125) → 카드(2254) */
}

.rec-apply__card {
  display: flex;
  align-items: flex-start;
  gap: calc(34 * var(--u));           /* 시안 번호칸 끝(119) → 글자(153) */
  min-height: calc(170 * var(--u));
  padding: calc(42 * var(--u)) calc(40 * var(--u)) calc(42 * var(--u)) calc(34 * var(--u));
  border-radius: calc(25 * var(--u));
  background: var(--rec-card);
}

/* 시안 2048:1102 — 코발트 85 × 85 라운드 15 */
.rec-apply__num {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(85 * var(--u));
  height: calc(85 * var(--u));
  border-radius: calc(15 * var(--u));
  background: var(--rec-point);
  font-family: "Open Sans", var(--font-base);
  font-weight: 800;
  font-size: calc(35 * var(--u));
  color: var(--color-white);
}

.rec-apply__name {
  margin: 0;
  font-weight: 800;
  font-size: calc(25 * var(--u));
  line-height: 1.3;
  letter-spacing: -.03em;
  color: var(--rec-ink);
}
.rec-apply__desc {
  margin: calc(14 * var(--u)) 0 0;    /* 시안 2292 → 2337 */
  font-weight: 300;
  font-size: max(calc(19 * var(--u)), 14px);   /* 시안 20 */
  line-height: 1.5;
  letter-spacing: -.03em;
  color: #969696;
  word-break: keep-all;
}

/* ==================== 등장 ====================
   js/reveal.js 가 화면에 들어온 [data-reveal] 에 .is-in 을 붙인다 */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .8s ease-out, transform .8s ease-out;
}
.js [data-reveal].is-in { opacity: 1; transform: none; }
.js .rec-apply__card[data-reveal] { transition-delay: calc(var(--d, 0) * .12s); }
/*
  프로세스 덩어리는 통째로 페이드하지 않는다.
  선이 그어지고 단계가 하나씩 켜지는 것이 이 구간의 등장 자체이므로,
  겉을 한 번 더 페이드하면 그 동안 안쪽 연출이 안 보인다.
*/
.js .rec-flow[data-reveal] { opacity: 1; transform: none; transition: none; }

main { padding-bottom: calc(180 * var(--u)); }

/* ==================== 좁은 화면 (≤768) ==================== */
@media (max-width: 768px) {
  .rec-page {
    --gutter: 16;
    --circle: 84;
    /* 한 줄에 하나씩 들어오므로 순번이 길어진다. 간격을 절반으로 줄인다 */
    --step-step: .19s;
  }

  /* 히어로→본문. 히어로 아래 여백·탭 위 여백과 겹쳐 가장 큰 값이 남는다 */
  .rec-wrap { margin-top: var(--sp-block); }
  .rec-sec + .rec-sec { margin-top: var(--sp-section); }
  .rec-sec__title { font-size: calc(28 * var(--u)); }
  .rec-sec__title::after {
    width: calc(7 * var(--u));
    height: calc(7 * var(--u));
    margin-left: calc(8 * var(--u));
  }
  .rec-sec__lead {
    margin-top: calc(12 * var(--u));
    font-size: max(calc(15 * var(--u)), 14px);
    line-height: 1.7;
  }

  /* 띠는 알약을 위로 올린다 — 옆에 두면 글자가 두 줄로 접힌다 */
  .rec-band {
    flex-direction: column;
    align-items: flex-start;
    gap: calc(10 * var(--u));
    min-height: 0;
    margin-top: var(--sp-block);        /* 탭→띠 */
    padding: calc(16 * var(--u));
    border-radius: calc(14 * var(--u));
  }
  .rec-band__badge {
    width: calc(110 * var(--u));
    height: calc(34 * var(--u));
    font-size: calc(14 * var(--u));
  }
  .rec-band__text { font-size: max(calc(14 * var(--u)), 13px); }

  /*
    다섯을 가로로 두면 원이 60px 도 안 된다.
    세로 타임라인으로 세운다 — 원이 왼쪽, 글이 오른쪽.
    선도 세로로 서고 위에서 아래로 그어진다.
  */
  .rec-flow { margin-top: var(--sp-head); }
  .rec-flow__line {
    left: calc(var(--circle) * var(--u) / 2);
    right: auto;
    top: calc(var(--circle) * var(--u) / 2);
    bottom: calc(var(--circle) * var(--u) / 2);
    width: calc(2.5 * var(--u));
    height: auto;
    transform: translateX(-50%);
  }
  .rec-flow__fill { transform: scaleY(0); transform-origin: top; }
  .js .rec-flow.is-in .rec-flow__fill { transform: scaleY(1); }

  .rec-flow__list {
    grid-template-columns: 1fr;
    gap: calc(24 * var(--u));
  }
  /*
    이름을 원 밖으로 꺼낸다.
    원 안에 두면 11px 짜리가 되어 읽기 어렵고, 오른쪽 칸에는 짧은 설명
    두 줄만 남아 허전하다. display:contents 로 묶음을 풀면
    원 / 이름 / 설명이 .rec-step 의 직접 칸이 되어 두 줄로 세울 수 있다.
      1열 = 원 (두 줄에 걸침)   2열 = 이름 위, 설명 아래
  */
  .rec-step {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: calc(18 * var(--u));
    align-items: center;
    /* 줄 높이를 원 크기로 고정해야 첫 원과 마지막 원의 중심이
       세로선의 끝과 어긋나지 않는다 */
    min-height: calc(var(--circle) * var(--u));
    text-align: left;
  }
  .rec-step__badge {
    display: contents;
  }
  .rec-step__circle {
    grid-column: 1;
    grid-row: 1 / span 2;
    width: calc(var(--circle) * var(--u));
    height: calc(var(--circle) * var(--u));
    padding-bottom: 0;          /* 이름이 빠졌으니 번호를 가운데로 */
  }
  /* display:contents 인 묶음은 상자가 없어 크기 변화를 담지 못한다.
     넓은 화면에서 묶음이 하던 몫을 여기서는 원이 맡는다 */
  .js .rec-flow .rec-step__circle {
    transform: scale(.6);
    transition: background-color .45s ease, box-shadow .35s ease, transform .35s ease;
  }
  .js .rec-flow.is-in .rec-step__circle { transform: scale(1); }
  .rec-step__num { font-size: calc(30 * var(--u)); }
  .rec-step__name {
    position: static;
    grid-column: 2;
    grid-row: 1;
    align-self: end;
    margin-bottom: calc(3 * var(--u));
    font-size: max(calc(17 * var(--u)), 15px);
    color: var(--rec-ink);
    white-space: normal;
  }
  .rec-step__desc {
    grid-column: 2;
    grid-row: 2;
    align-self: start;
    width: auto;
    margin: 0;
    font-size: max(calc(14 * var(--u)), 13px);
    line-height: 1.5;
    color: var(--gray);
  }
  /* 켜지면 이름이 코발트로 바뀐다 — 원 안에 있을 때의 흰 글씨 대신이다 */
  .js .rec-flow.is-in .rec-step__name { color: var(--rec-point); }

  /* 올렸을 때의 효과는 끈다 — 터치에서는 한 번 누르면 눌어붙는다 */
  .rec-step:hover .rec-step__circle,
  .rec-step:focus-within .rec-step__circle { box-shadow: none; }
  .rec-step:hover .rec-step__badge,
  .rec-step:focus-within .rec-step__badge,
  .js .rec-flow.is-in .rec-step:hover .rec-step__badge,
  .js .rec-flow.is-in .rec-step:focus-within .rec-step__badge { transform: scale(1); }
  .rec-step:hover .rec-step__desc,
  .rec-step:focus-within .rec-step__desc { color: var(--gray); }

  .rec-apply { grid-template-columns: 1fr; gap: calc(14 * var(--u)); margin-top: var(--sp-head); }
  .rec-apply__card {
    min-height: 0;
    gap: calc(16 * var(--u));
    padding: calc(18 * var(--u));
    border-radius: calc(14 * var(--u));
  }
  .rec-apply__num {
    width: calc(48 * var(--u));
    height: calc(48 * var(--u));
    border-radius: calc(10 * var(--u));
    font-size: calc(20 * var(--u));
  }
  .rec-apply__name { font-size: calc(18 * var(--u)); }
  .rec-apply__desc { margin-top: calc(8 * var(--u)); font-size: max(calc(14 * var(--u)), 13px); }

  /* 시안(1920)의 줄바꿈 자리는 좁은 화면에서 문장을 어중간하게 끊는다.
     이어 붙여 칸 너비대로 흐르게 둔다 */
  .rec-sec__lead .rec-br,
  .rec-step__desc .rec-br,
  .rec-apply__desc .rec-br { display: none; }

  main { padding-bottom: var(--sp-section); }   /* 마지막 카드→푸터 */
}

/* ==================== 모션 최소화 ==================== */
@media (prefers-reduced-motion: reduce) {
  /*
    선 그리기와 크기 변화를 빼고 페이드만 남긴다.
    차례로 켜지는 맛도 없앤다 — 순서를 기다리는 것 자체가 움직임이다.
  */
  .js .rec-flow__fill,
  .js .rec-flow.is-in .rec-flow__fill {
    transform: none;            /* 처음부터 다 그어져 있다 */
    transition: none;
  }
  /* 커지는 몫은 넓은 화면에서는 묶음이, 좁은 화면에서는 원이 맡는다.
     둘 다 눌러 둔다 */
  .js .rec-flow .rec-step__badge,
  .js .rec-flow.is-in .rec-step__badge,
  .rec-step:hover .rec-step__badge,
  .rec-step:focus-within .rec-step__badge,
  .js .rec-flow.is-in .rec-step:hover .rec-step__badge,
  .js .rec-flow.is-in .rec-step:focus-within .rec-step__badge {
    transform: none;
    transition: none;
  }
  .js .rec-flow .rec-step__circle,
  .js .rec-flow.is-in .rec-step__circle,
  /* 마지막 단계의 파동은 :last-child 가 붙어 우선순위가 높다.
     같은 선택자로 받아쳐야 꺼진다 */
  .js .rec-flow.is-in .rec-step:last-child .rec-step__circle {
    transform: none;
    animation: none;
    transition: background-color .5s ease;
    transition-delay: 0s;
  }
  .js .rec-flow .rec-step__num,
  .js .rec-flow .rec-step__name,
  .js .rec-flow.is-in .rec-step__num,
  .js .rec-flow.is-in .rec-step__name {
    transition: color .5s ease;
    transition-delay: 0s;
  }
  .js .rec-flow .rec-step__desc {
    transform: none;
    transition: opacity .5s ease;
  }
  .js .rec-flow.is-in .rec-step__desc { transition-delay: 0s; }

  .js [data-reveal] { transform: none; transition: opacity .5s ease; }
  .js .rec-apply__card[data-reveal] { transition-delay: 0s; }

  .rec-step:hover .rec-step__circle,
  .rec-step:focus-within .rec-step__circle,
  .js .rec-flow.is-in .rec-step:hover .rec-step__circle,
  .js .rec-flow.is-in .rec-step:focus-within .rec-step__circle { transform: none; }
}