@charset "UTF-8";
/* =========================================================
   토스 리디자인 시안 — page-careers.css (careers.html 전용)
   style.css → sub.css 다음에 불러온다. 토큰·컴포넌트는 공용 파일 그대로 쓰고
   이 페이지에만 필요한 배치만 둔다.
     1. 함께 만들 일 (카드 아래 링크)
     2. 직군 카드 (아이콘 | 태그 머리줄)
     3. 2단 배치: 섹션 머리(왼쪽 고정) | 타임라인·아코디언
     4. 반응형
   ========================================================= */

/* ---------- 1. 함께 만들 일 ---------- */
.cr-why .s-card { padding-bottom: 40px; }
.cr-why__more { margin-top: 28px; }

/* ---------- 2. 직군 카드 ---------- */
.cr-role__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  margin-bottom: 20px;
}
.cr-role__head .s-card__meta { justify-content: flex-end; margin-bottom: 0; }
.cr-roles .s-card__desc { margin-bottom: 4px; }

/* ---------- 3. 2단 배치 ---------- */
.cr-split {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  align-items: start;
  gap: 48px 64px;
}
.cr-split__head {
  position: sticky;
  top: calc(var(--gnb-h) + var(--lnb-h) + 40px);
  margin-bottom: 0;
}
.cr-split__head > .link-more { margin-top: 16px; }
.cr-split__tag { margin-top: 20px; }

.cr-timeline { gap: 16px; padding-top: 6px; }
.cr-timeline .timeline__item {
  padding: 24px 28px;
  border-radius: var(--radius-lg);
  background: var(--grey-100);
}
.cr-timeline .timeline__item::before { top: 26px; }
.cr-timeline .timeline__title { margin-top: 2px; }

#faq .acc { border-top-color: var(--grey-300); }
#faq .acc__item { border-bottom-color: var(--grey-300); }
#faq .acc__panel .link-more { margin-top: 4px; }

/* ---------- 4. 반응형 ---------- */
@media (max-width: 1023px) {
  /* 영어 제목은 태블릿 폭에서 강제 줄바꿈 때문에 줄 길이가 들쭉날쭉해져, 줄바꿈을 풀고 balance에 맡김 */
  html[lang="en"] .sub-hero__title br { display: none; }
  .cr-why .s-card:last-child { grid-column: 1 / -1; }
  .cr-split { grid-template-columns: 1fr; gap: 0; }
  .cr-split__head { position: static; margin-bottom: 40px; }
}

@media (max-width: 767px) {
  .cr-why .s-card { padding-bottom: 28px; }
  .cr-why .s-card:last-child { grid-column: auto; }
  .cr-split__head { margin-bottom: 32px; }
  .cr-timeline .timeline__item { padding: 20px; }
  .cr-timeline .timeline__item::before { top: 22px; }
  .cr-role__head { margin-bottom: 16px; }
}