/* ============================================
   채용(일하는 방식) - Figma SS/Career/일하는 방식/PC 3135:13896
   ============================================
   파일키 xzue00gaKlYtXNG7Rg6fe3 · 프레임 1200 x 5927
   시안 합계 5927 = 헤더 90 + 히어로 1032 + 핵심가치 1210 + 프로세스 1032
                  + 인재상 1032 + 오피스 891 + 푸터 640

   [구현이 시안과 다른 높이 2곳 — 의도된 차이다]
     · 히어로: 1032px → 100dvh (사용자 지시). 뷰포트마다 달라지므로 위 합계는 성립하지 않는다
     · 헤더  : position: fixed 로 히어로를 덮는다(기존 동작 보존 지시).
               시안에서는 흐름상 배치라 히어로 위에 90px 을 차지한다

   모바일 시안 3135:13955 (375 x 4570) 은 파일 하단 @media 768 블록에 있다.
   그쪽 헤더 높이도 시안 103 이 아니라 58 이다 — 상단 여백을 하단과 같은 15 로
   맞추라는 사용자 지시(모든 페이지 공통)라 시안 합계와 어긋난다.

   [색 토큰] Static/Black #000000  Static/800 #1A1A1A  Static/700 #333333
            Static/500 #666666  Static/200 #CCCCCC  Static/50 #F2F2F2
            Static/White #FFFFFF  Secondary #375CFF
            Primary/50 #FCFFE5  Primary/200 #F3FF99
   [타이포]  64/Bold 64px 700 1.3 -0.25px | 48/Bold 48px 700 1.3 -0.25px
            48/SemiBold 48px 600 1.3 -0.25px | 36/Bold 36px 700 1.3 -0.25px
            30/Bold 30px 700 1.3 -0.25px | 22/SemiBold 22px 600 1.3 -0.11px
            17.5/Medium 17.5px 500 1.5 -0.175px | 17.5/SemiBold 17.5px 600 1.2 -0.15px

   이 파일은 recruit/index.html 과 하위 페이지(process·faq·story·work-style)가
   함께 쓴다. 파일 하단 「레거시」 블록은 하위 페이지만 참조한다 — 지우면 그쪽이 깨진다.
   ============================================ */

/* Reset - 화면 꽉 차게 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* html 에는 overflow 를 걸지 않는다.
   root 의 overflow 가 visible 이 아니면 그 값이 뷰포트로 승격되고 body 는 **자기 스크롤
   컨테이너**가 된다 → window.pageYOffset 이 0 에 고정(스크롤은 body.scrollTop 에 쌓인다).
   ss-scroll-pin.js 는 window 의 scroll 이벤트와 pageYOffset 으로 진행도를 재므로
   그 상태에서는 스크롤 핀이 통째로 무효가 된다.
   root 가 visible 이면 대신 body 의 overflow 가 뷰포트로 승격되므로,
   가로 스크롤 차단은 아래 body 규칙 하나로 그대로 유지된다
   (business-introduce·service-introduce 와 동일 구조). */
html {
  scroll-behavior: smooth;
  width: 100%;
}

body {
  width: 100%;
  /* 100% = ICB(뷰포트) 폭이라 가로 스크롤을 만들지 않는다. 잔존 규칙이지만 무해 */
  min-width: 100%;
  /* 1200 고정 폭 섹션이라 좁은 뷰포트에서 가로 스크롤이 생기지 않게 막는다.
     root 가 visible 이므로 이 값이 뷰포트로 승격된다 */
  overflow-x: hidden;
  font-family: "Pretendard Variable", Pretendard, -apple-system,
    BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI",
    "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji",
    "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
  background: #fff;
}

/* ============================================
   1. 헤더 - Figma 3135:13897 (Section/Top, 1200x90)
   ============================================
   [요소] 좌: logo(139x16) + CAREERS 워드마크(92x16)
          우: 일하는 방식 / 채용 프로세스 / 자주 묻는 질문
   [없는 요소] 기존 파란색 텍스트 CAREERS(22px 600 #365BFF) — SVG 워드마크로 대체
   [없는 요소] 기존 반투명 그라디언트 배경 — 불투명 #FFFFFF 로 교체
   [없는 요소] 「스토리」 메뉴 — 사용자 지시(2026-08-12)로 채용 하위 전 페이지에서 제거
   [없는 요소] 「전체 공고」 NavButton(#375CFF, padding 12px 15px, radius 10)
     — 사용자 지시(2026-08-12)로 제거. .rc-header-btn 규칙 · --rc-header-nav-gap ·
       .rc-header-nav 의 gap · 각 페이지 index.js 의 initJobsAlert 까지 함께 지웠다.
       .rc-header-nav 는 자식이 .rc-header-menu 하나뿐이라 gap 이 무의미하다

   컨테이너 bg #FFFFFF, padding 30px 24px 15px, 내부 폭 1152, row/space-between/center
   page(좌) row gap 24 · Nav/Bar row gap 12
   메뉴 항목 padding 10px 12px, 17.5/Medium, #000000, center, nowrap

   position: fixed 는 기존 동작을 보존한 것이다(시안은 흐름상 배치).
   ============================================ */
.rc-header {
  --rc-header-pad: 30px 24px 15px;
  --rc-header-inner-w: 1152px; /* 프레임 1200 − 좌우 padding 24×2 */
  --rc-header-left-gap: 24px; /* 로고 ↔ 워드마크 */
  --rc-header-bar-gap: 12px; /* 메뉴 항목 간 */
  --rc-header-menu-pad-x: 12px;
  --rc-header-menu-pad-y: 10px;

  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  padding: var(--rc-header-pad);
  background: #ffffff;
}

.rc-header-inner {
  width: 100%;
  max-width: var(--rc-header-inner-w);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* ---- 좌측 page ---- */
.rc-header-left {
  display: flex;
  align-items: center;
  gap: var(--rc-header-left-gap);
  flex-shrink: 0;
}

.rc-header-logo,
.rc-header-wordmark {
  display: flex;
  align-items: center;
}

.rc-header-logo img {
  width: 139px;
  height: 16px;
}

/* 워드마크 바깥 박스 92x16 / 글리프 91.08x15.5 → contain 으로 비율 유지 */
.rc-header-wordmark img {
  width: 92px;
  height: 16px;
  object-fit: contain;
}

/* ---- 우측 Nav/menu ----
   「전체 공고」 제거 후 자식이 .rc-header-menu 하나뿐이라 gap 이 없다 */
.rc-header-nav {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.rc-header-menu {
  display: flex;
  align-items: center;
  gap: var(--rc-header-bar-gap);
}

.rc-header-menu a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--rc-header-menu-pad-y) var(--rc-header-menu-pad-x);
  font-weight: 500; /* 17.5/Medium */
  font-size: 17.5px;
  line-height: 1.5;
  letter-spacing: -0.175px;
  color: #000000;
  text-align: center;
  white-space: nowrap;
  text-decoration: none;
  transition: opacity 0.2s;
}

.rc-header-menu a:hover {
  opacity: 0.7;
}

/* 현재 페이지 강조 (기존 동작 유지) */
.rc-header-menu a.rc-header-menu--active {
  font-weight: 700;
}

/* ============================================
   2. 히어로 - Figma 3135:13900 (Section/MainTitle, 1200x1032)
   ============================================
   배경 hero_bg_new.jpg (cover) + 오버레이 2겹
     위: linear-gradient(180deg, #FFFFFF 0%, rgba(255,255,255,0) 100%)
     아래: linear-gradient(180deg, rgba(255,255,255,0.7) 0%, rgba(255,255,255,0) 100%)
   콘텐츠 column/center/center, padding 0 70px
     내부 블록 column gap 10, padding-bottom 104, width 100%
       logo 래퍼 column padding 10px 0 → logo 139x16
       Title 블록 column gap 10, center, ls -0.25px
         h1 64/Bold #000000 · p 48/SemiBold #333333

   [높이] Figma 는 1032px 고정이지만 **사용자 지시로 뷰포트 한 화면 높이**로 쓴다.
          Figma 원값 1032px — 시안 대조 시 이 값이 기준이다.
          100vh 를 먼저 두는 것은 dvh 미지원 브라우저 폴백이다(순서 중요).
   ============================================ */
.rc-hero {
  position: relative;
  width: 100%;
  height: 100vh; /* 폴백 */
  height: 100dvh; /* 사용자 지시 (Figma 원값 1032px) */
  padding: 0 70px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.rc-hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.rc-hero-overlay {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(
      180deg,
      #ffffff 0%,
      rgba(255, 255, 255, 0) 100%
    ),
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.7) 0%,
      rgba(255, 255, 255, 0) 100%
    );
}

.rc-hero-content {
  position: relative;
  z-index: 1;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding-bottom: 104px;
}

.rc-hero-logo-wrap {
  display: flex;
  flex-direction: column;
  padding: 10px 0;
}

.rc-hero-logo-wrap img {
  width: 139px;
  height: 16px;
}

.rc-hero-text {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
  letter-spacing: -0.25px;
}

.rc-hero-title {
  font-weight: 700; /* 64/Bold */
  font-size: 64px;
  line-height: 1.3;
  color: #000000;
}

.rc-hero-subtitle {
  font-weight: 600; /* 48/SemiBold */
  font-size: 48px;
  line-height: 1.3;
  color: #333333;
}

/* ============================================
   섹션 헤더 Asset/SubTitle - Figma 3135:13902
   ============================================
   핵심가치(3135:13901)와 오피스(3135:13941)가 함께 쓴다.
   column, gap 20, align center, text-align center
   h2 48/Bold #1A1A1A · p 22/SemiBold #666666
   ============================================ */
.rc-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  text-align: center;
}

.rc-head-title {
  font-weight: 700; /* 48/Bold */
  font-size: 48px;
  line-height: 1.3;
  letter-spacing: -0.25px;
  color: #1a1a1a;
}

.rc-head-desc {
  font-weight: 600; /* 22/SemiBold */
  font-size: 22px;
  line-height: 1.3;
  letter-spacing: -0.11px;
  color: #666666;
}

/* ============================================
   3. 핵심가치 - Figma 3135:13901 (1200x1210)
   ============================================
   섹션 column/align center/gap 80/padding 160px 0/bg #FFFFFF
   검산 1210 = 160×2 + [헤더 139.6 + 80 + 칩 170 + 80 + 카드 420]

   칩 3135:13904..13913 : 240x170, radius 40, padding 20,
      column/space-between/align flex-end, 트랙 gap 12
      비활성 bg #FCFFE5 텍스트 #CCCCCC / 활성 bg #F3FF99 텍스트 #1A1A1A
      라벨 width 200, 30/Bold 좌측 정렬 · 번호 19.35px 700 1.3 -0.25px
      아이콘 46x46 우측 하단
   [없는 요소] 기존 칩의 translateY(40px) 선택 효과·번호 배지·회색 필터 아이콘

   상세 카드 3135:13914 (컴포넌트 3135:13818) : 940x420, bg #F2F2F2, radius 40,
      padding 40, row/space-between/align flex-start, shadow 0 0 30px rgba(0,0,0,0.05)
      좌 flex:1 column gap 10 (제목 36/Bold #1A1A1A · 영문 17.5/Medium #666666)
      우 width 540 column gap 20 padding 10px 0
         리드문 22/SemiBold #1A1A1A · 항목 bg #FFFFFF radius 20 padding 16px 20px
   [없는 요소] 기존 card_1..10.png 이미지 카드, 항목 앞 불릿(•)
   ============================================ */
.rc-values {
  --rc-chip-w: 240px;
  --rc-chip-gap: 12px; /* index.js 의 피치 252 와 짝 */

  width: 100%;
  padding: 160px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 80px;
  background: #ffffff;
}

/* 화면 폭보다 넓게 3세트 복제된 트랙을 여기서 자른다 */
.rc-values-marquee {
  width: 100%;
  overflow: hidden;
}

.rc-values-track {
  display: flex;
  gap: var(--rc-chip-gap);
  transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: transform;
}

/* loop 되감기용 — index.js 가 한 프레임만 붙인다 */
.rc-values-track.no-transition {
  transition: none;
}

.rc-value-chip {
  flex-shrink: 0;
  width: var(--rc-chip-w);
  height: 170px;
  padding: 20px;
  border: 0;
  border-radius: 40px;
  background: #fcffe5;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-end;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.3s ease, color 0.3s ease;
}

.rc-value-chip-label {
  width: 200px;
  font-weight: 700; /* 30/Bold */
  font-size: 30px;
  line-height: 1.3;
  letter-spacing: -0.25px;
  color: #cccccc;
  text-align: left;
  transition: color 0.3s ease;
}

/* 윗첨자가 아니라 같은 문단에 붙는 작은 글자다 */
.rc-value-chip-num {
  font-weight: 700;
  font-size: 19.35px;
  line-height: 1.3;
  letter-spacing: -0.25px;
}

/* 아이콘 바깥 박스 46x46 / 글리프 크기는 아이콘마다 다르다 → contain */
.rc-value-chip-icon {
  width: 46px;
  height: 46px;
  object-fit: contain;
}

.rc-value-chip--active {
  background: #f3ff99;
}

.rc-value-chip--active .rc-value-chip-label {
  color: #1a1a1a;
}

/* ---- 상세 카드 ---- */
.rc-values-cards {
  position: relative;
  width: 940px;
  height: 420px;
}

.rc-value-card {
  position: absolute;
  inset: 0;
  padding: 40px;
  border-radius: 40px;
  background: #f2f2f2;
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.05);
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease;
}

.rc-value-card--active {
  opacity: 1;
  pointer-events: auto;
}

.rc-value-card-head {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.rc-value-card-title {
  font-weight: 700; /* 36/Bold */
  font-size: 36px;
  line-height: 1.3;
  letter-spacing: -0.25px;
  color: #1a1a1a;
}

.rc-value-card-en {
  font-weight: 500; /* 17.5/Medium */
  font-size: 17.5px;
  line-height: 1.5;
  letter-spacing: -0.175px;
  color: #666666;
}

.rc-value-card-body {
  flex: 0 0 540px;
  width: 540px;
  padding: 10px 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.rc-value-card-lead {
  font-weight: 600; /* 22/SemiBold */
  font-size: 22px;
  line-height: 1.3;
  letter-spacing: -0.11px;
  color: #1a1a1a;
}

/* 항목 수는 카드마다 1~3개로 다르다 (컴포넌트 prop1/3/5 optional) */
.rc-value-card-list {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
  list-style: none;
}

.rc-value-card-list li {
  padding: 16px 20px;
  border-radius: 20px;
  background: #ffffff;
  font-weight: 500; /* 17.5/Medium */
  font-size: 17.5px;
  line-height: 1.5;
  letter-spacing: -0.175px;
  color: #666666;
}

/* ============================================
   4·5. 슬라이더 배너 - Figma 3135:13927 / 3135:13940 (각 1200x1032)
   ============================================
   두 섹션의 구조·수치가 같아 한 벌로 쓴다.
     .rc-banner--process 채용 프로세스 (슬라이드 5장, 부제 있음)
     .rc-banner--career  인재상        (슬라이드 6장, 부제 없음 — 시안에서 hidden)

   섹션 bg #F2F2F2, padding 160px 128px, column, gap 60, justify center
   헤더 column gap 20, 좌측 정렬 (h2 48/Bold #000000 · p 17.5/Medium #666666)
   슬라이더 블록 column gap 30
     트랙 row gap 8
     슬라이드 944x429, bg #FFFFFF, radius 40, overflow hidden, row/align center
       좌 420 column gap 30 padding 80px 40px
          제목 30/Bold + Secondary Gra2 linear-gradient(90deg,#000000,#99ACFF) 텍스트
          본문 래퍼 row/center/center padding-right 20 · 본문 17.5/Medium #000000 height 200
       우 썸네일 524x429 (flex:1) object-fit cover
     인디케이터 Asset/Bar/Active — 알약 bg #FFFFFF radius 40 padding 20px 40px gap 12
       활성 60x8 radius 10 Primary Gra5 / 비활성 8x8 원형 #CCCCCC
   검산 429 = 80×2 + [제목 39 + 30 + 본문 200] / 944 = 420 + 524

   peek: 슬라이드 944 + gap 8 이라 프레임(1200, 좌우 128) 오른쪽으로 120px 걸친다.
         .rc-banner-inner 의 overflow:hidden 이 그 지점에서 자른다
   동작은 공용 res/js/ss-slider.js — 드래그·방향키·인디케이터 클릭.
   자동재생·무한루프·좌우 화살표는 시안 근거가 없어 없다.
   [없는 요소] 기존 process_top.png 다이어그램, 하단 5단계 텍스트(.rc-process-steps),
              인재상의 아이콘 버튼 6개(.rc-vision-items)·카드 이미지 6장(.rc-vision-card)
   ============================================ */
.rc-banner {
  background: #f2f2f2;
}

.rc-banner-inner {
  width: 1200px;
  height: 1032px;
  margin: 0 auto;
  padding: 160px 128px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 60px;
  overflow: hidden; /* peek 슬라이드를 프레임 폭(1200)에서 자른다 */
}

/* ---- 스크롤 핀 (시안 외 추가 — 사용자 요청) ----
   동작·수치는 공용 res/js/ss-scroll-pin.js. 여기서는 붙는 방식만 정의한다.
   - .is-pinned / --ss-pin-top / 섹션 인라인 height / transform: scale() 은 전부 JS 가 넣는다
   - prefers-reduced-motion: reduce 면 JS 가 클래스를 아예 붙이지 않는다

   위의 overflow: hidden 은 이 요소 **자신의** 클리핑이라 sticky 와 충돌하지 않는다.
   sticky 를 죽이는 것은 스크롤 **조상**의 overflow 다(기업 소개 .co-banner__inner 도
   overflow: hidden + sticky 조합으로 동작한다). 그래서 peek 클리핑은 그대로 둔다. */
.rc-banner-inner.is-pinned {
  position: sticky;
  top: var(--ss-pin-top, 0);
  transform-origin: top center;
}

.rc-banner-head {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.rc-banner-title {
  font-weight: 700; /* 48/Bold */
  font-size: 48px;
  line-height: 1.3;
  letter-spacing: -0.25px;
  color: #000000;
}

.rc-banner-sub {
  font-weight: 500; /* 17.5/Medium */
  font-size: 17.5px;
  line-height: 1.5;
  letter-spacing: -0.175px;
  color: #666666;
}

.rc-banner-body {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 30px;
}

/* peek — 자르는 것은 .rc-banner-inner 담당 */
.rc-banner-viewport {
  overflow: visible;
}

.rc-banner-track {
  display: flex;
  gap: 8px;
  list-style: none;
  transition: transform 0.4s ease;
  touch-action: pan-y; /* 세로 스크롤은 브라우저에 양보 (ss-slider.js 와 짝) */
  cursor: grab;
}

.rc-banner-track.is-dragging {
  transition: none;
  cursor: grabbing;
  user-select: none;
}

.rc-banner-slide {
  flex: 0 0 944px;
  width: 944px;
  height: 429px;
  border-radius: 40px;
  background: #ffffff;
  overflow: hidden;
  display: flex;
  align-items: center;
}

.rc-banner-slide-text {
  flex: 0 0 420px;
  width: 420px;
  height: 100%;
  padding: 80px 40px;
  display: flex;
  flex-direction: column;
  gap: 30px;
}

/* Secondary Gra2 텍스트 그라디언트 */
.rc-banner-slide-title {
  font-weight: 700; /* 30/Bold */
  font-size: 30px;
  line-height: 1.3;
  letter-spacing: -0.25px;
  background-image: linear-gradient(90deg, #000000 0%, #99acff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.rc-banner-slide-body-wrap {
  width: 100%;
  padding-right: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.rc-banner-slide-body {
  height: 200px;
  font-weight: 500; /* 17.5/Medium */
  font-size: 17.5px;
  line-height: 1.5;
  letter-spacing: -0.175px;
  color: #000000;
}

/* 944 − 텍스트 420 = 524. 슬라이드가 좁아지면 이쪽이 먼저 줄어든다 */
.rc-banner-slide-thumb {
  position: relative;
  flex: 1 1 524px;
  min-width: 0;
  width: 524px;
  height: 429px;
  overflow: hidden;
  display: block;
}

.rc-banner-slide-thumb img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  -webkit-user-drag: none;
}

/* Figma 실측 크롭 — 프레임(524x429) 대비 비율 그대로.
   원본 비율과 일치하므로(1024x1024 / 1572x881) fill 로 두어도 왜곡되지 않는다 */
.rc-banner-slide-thumb--crop3 img {
  width: 176.62%;
  height: 215.73%;
  left: -25.51%;
  top: -57.64%;
  object-fit: fill;
}

.rc-banner-slide-thumb--crop6 img {
  width: 225.08%;
  height: 154.08%;
  left: -33.74%;
  top: -9.05%;
  object-fit: fill;
}

/* ---- 인디케이터 Asset/Bar/Active ---- */
.rc-banner-dots {
  width: 100%;
  display: flex;
  justify-content: center;
}

.rc-banner-pill {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 20px 40px;
  border-radius: 40px;
  background: #ffffff;
}

.rc-banner-dot {
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #cccccc;
  cursor: pointer;
}

/* Primary Gra5 */
.rc-banner-dot.is-active {
  width: 60px;
  height: 8px;
  border-radius: 10px;
  background: linear-gradient(90deg, #efff75 1.55%, #cccccc 101.04%);
}

/* ============================================
   6. 오피스 - Figma 3135:13941 (1200x891)
   ============================================
   섹션 column/align center/gap 80/padding 160px 0/relative/overflow hidden
   검산 891 = 160×2 + [헤더 62.4 + 80 + 트랙 429]
   트랙 row gap 12 height 429 · 슬라이드 524x429 radius 24 overflow hidden
   좌우 페이드 3135:13952 / 13953 : 각 200x100%, 절대배치 top 0, pointer-events none
   [없는 요소] 기존 office_1..7.png 7장 참조 → office_new_1..8.jpg 8장
   ============================================ */
.rc-office {
  --rc-office-item-w: 524px;
  --rc-office-gap: 12px; /* index.js 의 피치 536 과 짝 */

  position: relative;
  width: 100%;
  padding: 160px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 80px;
  overflow: hidden;
  background: #ffffff;
}

.rc-office-viewport {
  width: 100%;
  overflow: hidden;
}

.rc-office-track {
  display: flex;
  gap: var(--rc-office-gap);
  height: 429px;
  transition: transform 0.5s ease;
  will-change: transform;
}

.rc-office-track.no-transition {
  transition: none;
}

.rc-office-item {
  flex-shrink: 0;
  width: var(--rc-office-item-w);
  height: 429px;
  border-radius: 24px;
  overflow: hidden;
}

.rc-office-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.rc-office-fade {
  position: absolute;
  top: 0;
  width: 200px;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

.rc-office-fade--left {
  left: 0;
  background: linear-gradient(
    90deg,
    #ffffff 0%,
    rgba(255, 255, 255, 0) 100%
  );
}

.rc-office-fade--right {
  right: 0;
  background: linear-gradient(
    270deg,
    #ffffff 0%,
    rgba(255, 255, 255, 0) 100%
  );
}

/* 모바일 전용 개행 — 오피스 h2 는 시안(3135:13995)에서 2줄이지만 335 폭에서
   자연 개행이 걸리지 않는다. PC 는 1줄이므로 여기서 죽인다(768 블록에서 되살린다).
   <br> 앞에 공백을 두어 PC 에서 "…오피스 자세히…" 의 어절 간격이 유지된다 */
.rc-br-m {
  display: none;
}

/* ============================================
   채용 프로세스 / FAQ 공용 - Figma SS/Career/Process/PC 3135:13889
                              · SS/Career/FAQ/PC 3135:14041
   ============================================
   파일키 xzue00gaKlYtXNG7Rg6fe3 · 프로세스 프레임 1200 x 3786.5
   시안 합계 3786.5 = 헤더 90 + 히어로 658.5 + 프로세스 2398 + 푸터 640
   모바일 3135:14027(전 카드 접힘 361x1348) / 3135:14034(전 카드 펼침 361x2958)
   → 모바일 규칙은 파일 하단 @media 768 블록, 1024 는 그 위 1024 블록에 있다.

   [FAQ 공용] FAQ 페이지(3135:14041 PC / 3135:14017 모바일)는 히어로·카드의
   padding · radius · border · 색 · chevron 규격이 프로세스와 100% 같은 값으로
   실측됐다. 차이는 왼쪽 라벨이 번호(01)가 아니라 Q 라는 것뿐이라 CSS 를 복제하지
   않고 아래 규칙에 .rc-faq-* 셀렉터를 콤마로 묶었다.
   값이 다른 것(히어로 h1 그라디언트 · 섹션 gap · Bottom 문의 블록 · 불릿 목록)만
   아래 「FAQ 페이지 전용」 블록에 따로 있다.
     .rc-process-hero*      ↔ .rc-faq-hero*
     .rc-process(섹션)      ↔ .rc-faq-section
     .rc-process-list       ↔ .rc-faq-list
     .rc-process-card*      ↔ .rc-faq-card*
     .rc-process-card-num   ↔ .rc-faq-card-q        (문구 Q)
     .rc-process-card-title ↔ .rc-faq-card-question

   [구현이 시안과 다른 곳] 헤더가 position: fixed 라 히어로 위에 90px 을 차지하지
   않는다. 그래서 히어로 padding-top 은 시안 363.5 가 아니라 90 + 363.5 = 453.5 다.

   [없는 요소] 이전 구현의 .rc-process-page(-inner/-header/-title/-subtitle),
     .rc-process-accordion, .rc-process-card-desc/-sub/-list, 인라인 SVG chevron,
     카드 hover(#D2D2D2), 아이콘 rotate transition — 시안에 없다.
     ※ 단, 펼침/접힘 높이 transition 은 사용자 지시(2026-08-12)로 추가돼 있다
       (아래 .rc-*-card-answer 참조). "시안에 없으니 넣지 않는다"의 예외다.
     .rc-header-title(파란 CAREERS) / .rc-footer-* 는 story·faq·work-style 이
     아직 쓰므로 CSS 는 그대로 두고 이 페이지 마크업에서만 빠졌다.

   [타이포] PC 64/Bold     64px   700 1.3 -0.25px    히어로 h1
           PC 17.5/Medium 17.5px 500 1.5 -0.175px  히어로 부제 · 카드 본문
           PC 30/Bold     30px   700 1.3 -0.25px    카드 번호
           PC 30/SemiBold 30px   600 1.3 -0.25px    카드 제목
   [색]    #000000 #333333(모바일 부제) #666666(본문) #3358FF(번호)
          #CCD5FF(펼침 chevron 배경) #F2F2F2(테두리·접힘 chevron 배경) #FFFFFF
   ============================================ */

/* --------------------------------------------
   히어로 - Figma 3135:13893 (Section/MainTitle, 1200x658.5)
            FAQ 3135:14045 (1200x658.5) — 같은 규격
   --------------------------------------------
   배경 = 흰색 70% 오버레이 1겹 + radial gradient SVG(Figma 원본 data URI).
   SVG 가 preserveAspectRatio="none" 이라 background-size 100% 100% 로 늘린다.
   컨테이너 column/center, padding-top 363.5 (+ 고정 헤더 90 = 453.5)
   PC 배경 SVG 는 FAQ 도 완전히 같은 값이다(모바일만 다르다 → 768 블록).
   -------------------------------------------- */
.rc-process-hero,
.rc-faq-hero {
  --rc-process-hero-pad-top: 453.5px; /* 시안 363.5 + 고정 헤더 90 */
  --rc-process-hero-pad-x: 70px;

  width: 100%;
  padding-top: var(--rc-process-hero-pad-top);
  display: flex;
  flex-direction: column;
  align-items: center;
  background-image: linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.7) 0%,
      rgba(255, 255, 255, 0.7) 100%
    ),
    url("data:image/svg+xml;utf8,<svg viewBox='0 0 1200 658.5' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'><rect x='0' y='0' height='100%25' width='100%25' fill='url(%23grad)' opacity='1'/><defs><radialGradient id='grad' gradientUnits='userSpaceOnUse' cx='0' cy='0' r='10' gradientTransform='matrix(-45.5 -45.812 83.484 -27.504 1009.6 699.3)'><stop stop-color='rgba(204,204,204,1)' offset='0'/><stop stop-color='rgba(255,255,255,1)' offset='1'/></radialGradient></defs></svg>");
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

/* 파생: 시안 프레임은 1200 고정인데 뷰포트는 더 넓을 수 있다.
   max-width 1200 으로 프레임을 재현해야 헤더(내부 폭 1152 + 좌우 24 = 1200)와
   프로세스 리스트(944 중앙)의 좌측 정렬선이 시안과 같은 간격으로 유지된다.
   이 값을 빼면 1440 에서 히어로만 좌측 70 에 붙어 리스트와 178px 어긋난다 */
.rc-process-hero-inner,
.rc-faq-hero-inner {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--rc-process-hero-pad-x);
  display: flex;
  flex-direction: column;
}

/* column, gap 10, align flex-start, padding-bottom 104, width 100% */
.rc-process-hero-content,
.rc-faq-hero-content {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding-bottom: 104px;
}

.rc-process-hero-logo,
.rc-faq-hero-logo {
  display: flex;
  flex-direction: column;
  padding: 10px 0;
}

.rc-process-hero-logo img,
.rc-faq-hero-logo img {
  width: 139px;
  height: 16px;
}

.rc-process-hero-text,
.rc-faq-hero-text {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-align: left;
}

/* FAQ 는 색만 그라디언트로 덮는다(아래 「FAQ 페이지 전용」 블록) */
.rc-process-hero-title,
.rc-faq-hero-title {
  font-weight: 700; /* 64/Bold */
  font-size: 64px;
  line-height: 1.3;
  letter-spacing: -0.25px;
  color: #000000;
}

.rc-process-hero-desc,
.rc-faq-hero-desc {
  font-weight: 500; /* 17.5/Medium */
  font-size: 17.5px;
  line-height: 1.5;
  letter-spacing: -0.175px;
  color: #666666;
}

/* --------------------------------------------
   아코디언 - Figma 3135:13894 (프로세스 Section/Career, 944x2398)
              Figma 3135:14046 (FAQ Section/Career, 944x4652)
   --------------------------------------------
   섹션 bg #FFFFFF, padding 160px 0, column/center
   리스트 width 944 (프레임 x=128 → 1200 안에서 중앙), gap 8
   카드 Asset/Process — 펼침이 시안 상태이고 접힘은 모바일 시안에서 파생했다
   FAQ 섹션은 gap 60 이 추가로 붙는다(리스트 ↔ Bottom 문의 블록) → FAQ 전용 블록

   사용자 지시: 시안에 없는 transition — 2026-08-12 사용자 요청.
   펼침/접힘을 grid-template-rows 0fr ↔ 1fr 로 애니메이션한다(JS 높이 측정 불필요).
   높이·카드 배경·chevron 배경이 --rc-accordion-duration 하나를 공유한다.
   [함정] display:none 은 애니메이션되지 않아 answer 의 [hidden] 을 걷어냈고,
     세로 간격(PC gap 30 / 모바일 gap 10 · answer padding-bottom 6)은 전부
     .rc-*-card-body 의 padding 으로 옮겼다 — 바깥에 남으면 접힘 높이가 0 이 안 된다.
   -------------------------------------------- */
.rc-process,
.rc-faq-section {
  --rc-process-list-w: 944px;
  --rc-process-list-gap: 8px;
  --rc-process-card-radius: 24px;
  --rc-process-line: #f2f2f2; /* 테두리 · 접힘 chevron 배경 */
  --rc-process-num-color: #3358ff;
  --rc-process-body-color: #666666;
  --rc-process-chevron-radius: 20px;
  --rc-process-chevron-open-bg: #ccd5ff;
  --rc-accordion-duration: 260ms; /* 사용자 지시(2026-08-12) 펼침/접힘 속도 */

  width: 100%;
  padding: 160px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #ffffff;
}

.rc-process-list,
.rc-faq-list {
  width: var(--rc-process-list-w);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--rc-process-list-gap);
}

/* 카드 — border 2px #F2F2F2 / radius 24 는 접힘·펼침 공통.
   배경만 갈린다: 접힘 #FFFFFF(파생) ↔ 펼침 rgba(242,242,242,0.2)
   사용자 지시: 시안에 없는 transition — 2026-08-12 사용자 요청.
   높이(answer)와 같은 260ms 로 맞춰야 색과 높이가 따로 놀지 않는다 */
.rc-process-card,
.rc-faq-card {
  display: flex;
  align-items: center;
  border: 2px solid var(--rc-process-line);
  border-radius: var(--rc-process-card-radius);
  background: #ffffff; /* 파생: PC 접힘 시안 없음 → 모바일 접힘 3135:14031 에서 */
  transition: background-color var(--rc-accordion-duration) ease;
}

.rc-process-card--open,
.rc-faq-card--open {
  background: rgba(242, 242, 242, 0.2);
}

/* 카드 전체를 클릭 가능하게 하려고 padding 을 버튼에 준다(배경·테두리는 카드) */
.rc-process-card-toggle,
.rc-faq-card-toggle {
  width: 100%;
  display: flex;
  /* Figma padding 30/30/30/48 − 내부 stroke 2px.
     Figma 스트로크는 inside 라 프레임 높이에 포함되는데 CSS border 는 auto 높이
     바깥에 더해진다 → 빼지 않으면 카드마다 +4px 커진다 */
  padding: 28px 28px 28px 46px;
  border: 0;
  background: transparent;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.rc-process-card-toggle:focus-visible,
.rc-faq-card-toggle:focus-visible {
  outline: 2px solid var(--rc-process-num-color);
  outline-offset: 2px;
}

/* QnA — Figma 고정폭 854 (TextBox + gap 10 + Chevron 34).
   카드 콘텐츠 폭 862(944 − 테두리 4 − padding 78)보다 8px 좁은 것이 시안값이다.
   1024 이하에서는 카드가 줄어 넘치므로 그 블록에서 width 100% 로 푼다 */
.rc-process-card-qna,
.rc-faq-card-qna {
  width: 854px;
  flex-shrink: 0;
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

/* TextBox — column, justify center, padding 10px 0.
   Figma 의 gap 30(제목행 ↔ Answer)은 .rc-*-card-body 의 padding-top 으로 옮겼다.
   여기 gap 으로 두면 접힘(높이 0) 상태에서도 30px 이 남아 카드가 안 접힌다 */
.rc-process-card-text,
.rc-faq-card-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 10px 0;
}

.rc-process-card-label,
.rc-faq-card-label {
  width: 100%;
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

/* 프로세스는 번호(01), FAQ 는 Q — 규격은 같다 */
.rc-process-card-num,
.rc-faq-card-q {
  width: 40px;
  flex-shrink: 0;
  font-weight: 700; /* 30/Bold */
  font-size: 30px;
  line-height: 1.3;
  letter-spacing: -0.25px;
  color: var(--rc-process-num-color);
}

.rc-process-card-title,
.rc-faq-card-question {
  font-weight: 600; /* 30/SemiBold */
  font-size: 30px;
  line-height: 1.3;
  letter-spacing: -0.25px;
  color: #000000;
  white-space: nowrap;
}

/* Answer — 접힘 상태에서는 [hidden] 으로 통째로 빠진다.
   display 를 flex 로 덮으므로 [hidden] 규칙을 명시해야 한다 */
/* Answer — 사용자 지시: 시안에 없는 transition (2026-08-12 사용자 요청).
   접힘/펼침을 grid-template-rows 0fr ↔ 1fr 로 애니메이션한다. auto 높이가
   그대로 보간되므로 JS 로 높이를 재지 않는다.
   접힘 상태의 스크린리더 낭독·탭 포커스 배제는 visibility: hidden 이 담당한다
   (전이 중에는 보여야 하므로 visibility 만 260ms 지연시켜 끈다).
   [이전 구현] display: flex + [hidden](display:none) — display 는 애니메이션되지 않는다

   ★ 세로 간격(제목행 ↔ 본문)은 반드시 **answer(바깥)** 의 padding 이어야 한다.
     .rc-*-card-body 로 옮기면 접힘 높이가 0 이 되지 않는다 — fr 트랙의 자동 최소
     크기는 grid item 의 **최소 기여값**이고 거기에 item 의 padding 이 그대로 더해진다.
     min-height: 0 은 콘텐츠 박스 최소치만 0 으로 만들 뿐 padding 은 못 없앤다.
     실제로 body 에 두었다가 접힘 트랙이 PC 30px / 모바일 16px 로 측정됐다(2026-08-12).
     그래서 padding 을 answer 에 두고 padding 자체도 함께 transition 한다 —
     접힘에서 세로 padding 이 0 이므로 answer 높이가 정확히 0 이다.
     **다시 body 로 옮기지 말 것.** */
.rc-process-card-answer,
.rc-faq-card-answer {
  width: 100%;
  display: grid;
  grid-template-rows: 0fr;
  grid-template-columns: minmax(0, 1fr); /* pre-wrap 본문이 트랙을 밀지 않게 */
  padding: 0 40px 0 50px; /* 접힘: 세로 0 */
  overflow: hidden;
  visibility: hidden;
  transition: grid-template-rows var(--rc-accordion-duration) ease,
    padding var(--rc-accordion-duration) ease,
    visibility 0s linear var(--rc-accordion-duration);
}

/* padding-top 30 은 Figma 의 .rc-*-card-text gap 30(제목행 ↔ Answer)이다.
   text 의 gap 으로 두면 접힘 상태에도 남으므로 여기 펼침 전용으로 옮겼다 */
.rc-process-card--open .rc-process-card-answer,
.rc-faq-card--open .rc-faq-card-answer {
  grid-template-rows: 1fr;
  padding-top: 30px;
  visibility: visible;
  transition: grid-template-rows var(--rc-accordion-duration) ease,
    padding var(--rc-accordion-duration) ease, visibility 0s;
}

/* white-space: pre-wrap 은 Figma 원값이다.
   마크업의 개행·들여쓰기가 그대로 렌더되므로 본문은 소스에서 한 줄로 유지한다.
   min-height: 0 + overflow: hidden 은 0fr 행에서 내용이 삐져나오지 않게 하는
   grid item 클리핑이다(둘 중 하나만 빠져도 접힘 높이가 0 이 안 된다).
   [padding 금지] 여기에 세로 padding 을 주면 fr 트랙 최소 기여값에 그대로 더해져
     접힘 높이가 0 이 안 된다 — 위 answer 주석 참조 */
.rc-process-card-body,
.rc-faq-card-body {
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  font-weight: 500; /* 17.5/Medium */
  font-size: 17.5px;
  line-height: 1.5;
  letter-spacing: -0.175px;
  color: var(--rc-process-body-color);
  white-space: pre-wrap;
}

/* Chevron 바깥 박스 34x48 = IconSize 24 + padding 12px 5px.
   사용자 지시: 시안에 없는 transition — 2026-08-12 사용자 요청 (카드·높이와 같은 260ms) */
.rc-process-card-chevron,
.rc-faq-card-chevron {
  flex-shrink: 0;
  display: flex;
  padding: 12px 5px;
  border-radius: var(--rc-process-chevron-radius);
  background: var(--rc-process-line); /* 파생: 접힘 */
  transition: background-color var(--rc-accordion-duration) ease;
}

.rc-process-card--open .rc-process-card-chevron,
.rc-faq-card--open .rc-faq-card-chevron {
  background: var(--rc-process-chevron-open-bg);
}

.rc-process-card-icon,
.rc-faq-card-icon {
  position: relative;
  display: block;
  width: 24px;
  height: 24px;
}

/* 두 글리프를 같은 rect 에 겹쳐 두고 상태로 갈아끼운다.
   chevron_down 원본은 11.6317x7.13171 이지만 preserveAspectRatio="none" 이라
   chevron_up 과 같은 rect 로 늘려도 모양이 시안과 같다(파생: PC 접힘 시안 없음) */
.rc-process-card-glyph,
.rc-faq-card-glyph {
  position: absolute;
  display: block;
  left: 3.4286px;
  top: 6.8571px;
  width: 17.4476px;
  height: 10.6373px;
}

.rc-process-card-glyph--up,
.rc-process-card--open .rc-process-card-glyph--down,
.rc-faq-card-glyph--up,
.rc-faq-card--open .rc-faq-card-glyph--down {
  display: none;
}

.rc-process-card--open .rc-process-card-glyph--up,
.rc-faq-card--open .rc-faq-card-glyph--up {
  display: block;
}

/* FAQ Section (채용 메인 등에서 사용) */
.rc-faq {
  width: 100%;
  min-height: 60vh;
  padding: 160px 70px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  background: #fff;
}

.rc-faq-title {
  font-weight: 600;
  font-size: 36px;
  line-height: 1.36;
  letter-spacing: -0.02em;
  color: #000;
  text-align: center;
  margin: 0;
}

.rc-faq-desc {
  font-size: 18px;
  color: #666;
  margin: 0;
}

.rc-faq-email a {
  font-size: 22px;
  font-weight: 600;
  color: #000;
  text-decoration: underline;
}

.rc-faq-email a:hover {
  opacity: 0.7;
}

/* ============================================
   FAQ 페이지 전용 - Figma SS/Career/FAQ/PC 3135:14041
   ============================================
   파일키 xzue00gaKlYtXNG7Rg6fe3 · 프레임 1200 x 6040.5
   시안 합계 6040.5 = 헤더 90 + 히어로 658.5 + FAQ 4652 + 푸터 640
   모바일 3135:14017 (375 x 2430) — 전 카드 접힘이 시안이다
   → 모바일 규칙은 파일 하단 @media 768 블록, 1024 는 그 위 1024 블록에 있다.

   히어로 · 카드 · chevron 은 위 「채용 프로세스 / FAQ 공용」 블록이 전부 담당한다
   (값이 100% 같아 복제하지 않고 셀렉터를 콤마로 묶었다).
   여기 있는 것은 프로세스와 값이 다른 4가지뿐이다.
     1. 히어로 h1 그라디언트 (Secondary Gra2)
     2. 섹션 gap 60 (리스트 ↔ Bottom)
     3. Bottom 문의 블록 (프로세스에 없는 신규)
     4. Q3 불릿 목록

   [없는 요소] 이전 구현의 .rc-faq-page(-inner/-header/-title/-subtitle),
     .rc-faq-accordion, .rc-faq-card-header/-desc, .rc-faq-cta(-title/-email),
     인라인 SVG chevron, 카드 hover(#FAFAFA), 아이콘 rotate transition
     — 신규 시안(3135:14041)에 없다. 아래 .rc-faq-toast 만 그대로 승계한다.
     ※ 펼침/접힘 높이 transition 은 사용자 지시(2026-08-12)로 추가된 예외다
       (공용 블록의 .rc-faq-card-answer 참조).
     ※ .rc-faq / .rc-faq-title / .rc-faq-desc / .rc-faq-email(위 블록)은
       채용 메인이 쓰는 별개 클래스다. 이름이 비슷할 뿐 이 페이지와 무관하다.

   [타이포] PC 22/SemiBold  22px   600 1.3 -0.11px   Bottom 타이틀
           PC 17.5/Medium  17.5px 500 1.5 -0.175px  Bottom 버튼 라벨
   [색]    #333333(Bottom 타이틀) #375CFF(버튼 라벨) #E5EAFF(버튼 배경)
           #000000 → #99ACFF (히어로 h1 그라디언트)
   ============================================ */

/* 히어로 h1 - Figma 스타일 Secondary Gra2
   (bg-gradient-to-r from-black to-[#99ACFF] + bg-clip-text)
   프로세스 h1 은 시안(3135:13893)이 단색 #000000 이라 FAQ 만 그라디언트다.
   같은 패턴이 .rc-banner-slide-title 에 이미 있다 */
.rc-faq-hero-title {
  background-image: linear-gradient(90deg, #000000 0%, #99acff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* 섹션 gap 60 = 리스트 ↔ Bottom (Figma gap-[60px]).
   프로세스 섹션은 자식이 리스트 하나뿐이라 gap 이 없다 */
.rc-faq-section {
  gap: 60px;
}

/* Q3 불릿 목록 - Figma list-disc / ms-[26.25px].
   .rc-faq-card-body 가 pre-wrap 이라 ul·li 마크업도 소스에서 한 줄로 유지한다 */
.rc-faq-card-list {
  list-style: disc outside;
  margin: 0;
  padding: 0;
}

.rc-faq-card-list li {
  margin-inline-start: 26.25px; /* Figma ms-[26.25px] */
}

/* --------------------------------------------
   Bottom 문의 블록 - Figma I3135:14046;2297:14363
   --------------------------------------------
   컨테이너 column, gap 20, align center, width 100%
   버튼 bg #E5EAFF, radius 20, padding 14px 28px, row, gap 10, center
   -------------------------------------------- */
.rc-faq-bottom {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.rc-faq-bottom-title {
  font-weight: 600; /* 22/SemiBold */
  font-size: 22px;
  line-height: 1.3;
  letter-spacing: -0.11px;
  color: #333333;
  text-align: center;
}

/* hover / focus-visible 은 시안에 없는 값이다. 옛 FAQ 페이지 .rc-faq-cta-email 이
   이미 갖고 있던 동작을 그대로 승계했다(신규 창작 아님) */
.rc-faq-bottom-email {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 28px;
  border: 0;
  border-radius: 20px;
  background: #e5eaff;
  font: inherit;
  cursor: pointer;
  transition: opacity 0.2s;
}

.rc-faq-bottom-email:hover {
  opacity: 0.85;
}

.rc-faq-bottom-email:focus-visible {
  outline: 2px solid #365bff;
  outline-offset: 2px;
}

.rc-faq-bottom-email-label {
  font-weight: 500; /* 17.5/Medium */
  font-size: 17.5px;
  line-height: 1.5;
  letter-spacing: -0.175px;
  color: #375cff;
  white-space: nowrap;
}

/* IconSize 24x24 박스 안에 글리프 20x20 (recruit/img/icon_copy.svg 재사용) */
.rc-faq-bottom-email-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
}

.rc-faq-bottom-email-icon img {
  display: block;
  width: 20px;
  height: 20px;
}

/* 복사 완료 토스트 */
.rc-faq-toast {
  position: fixed;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  padding: 12px 24px;
  background: #333;
  color: #fff;
  font-size: 14px;
  border-radius: 8px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s, transform 0.3s;
  z-index: 9999;
}

.rc-faq-toast.rc-faq-toast--show {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

/* ============================================
   레거시 — recruit 하위 페이지 전용 (index.html 은 더 이상 쓰지 않는다)
   ============================================
   3135:13896 개편으로 index.html 에서는 사라졌지만, 아래 페이지들이 아직
   같은 클래스를 참조한다. 지우면 그쪽이 깨지므로 남긴다.

     .rc-header-title  → story / process / faq / work-style  (파란 CAREERS 텍스트)
     .rc-header-right  → story / process / faq / work-style
     .rc-values-* / .rc-slider-* / .rc-card-* / .rc-vision-* → work-style
     .rc-office-title / .rc-office-slider* / .rc-office-slide → story
     .rc-footer-*      → story / process / faq / work-style

   하위 페이지들도 신규 시안으로 옮기면 이 블록은 통째로 삭제된다.
   ============================================ */
.rc-header-title {
  font-weight: 600;
  font-size: 22px;
  line-height: 1em;
  letter-spacing: -0.25px;
  color: #365bff;
  white-space: nowrap;
}

a.rc-header-title {
  text-decoration: none;
}

a.rc-header-title:hover {
  opacity: 0.8;
}

.rc-header-right {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

/* ---- work-style: 핵심가치 구버전 ---- */
.rc-values-header {
  max-width: 950px;
  margin: 0 auto 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
}

.rc-values-title {
  font-weight: 600;
  font-size: 36px;
  line-height: 1.3611111111111112em;
  letter-spacing: -0.02em;
  color: #000000;
  text-align: center;
}

.rc-values-subtitle {
  font-family: Pretendard, sans-serif;
  font-weight: 500;
  font-size: 22px;
  line-height: 1.5em;
  letter-spacing: -0.02em;
  color: #000000;
  text-align: center;
}

.rc-slider-container {
  width: 100%;
  overflow-x: hidden;
  overflow-y: visible;
  margin-bottom: 40px;
  padding: 20px 0 80px;
  position: relative;
}

.rc-slider-track {
  width: 100%;
  overflow: visible;
}

.rc-slider {
  display: flex;
  gap: 12px;
  transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: transform;
}

.rc-slider.no-transition {
  transition: none;
}

.rc-slider-item {
  flex-shrink: 0;
  width: 140px;
  height: 160px;
  border-radius: 40px;
  background: #f0f0f0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.3s ease,
    transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  position: relative;
  overflow: hidden;
}

.rc-slider-item--active {
  background: #efff75;
  transform: translateY(40px);
}

.rc-slider-num {
  position: absolute;
  top: 20px;
  left: 20px;
  font-weight: 600;
  font-size: 12px;
  line-height: 1.193359375em;
  color: #000000;
  z-index: 3;
}

.rc-slider-item img {
  width: 50px;
  height: auto;
  max-height: 60px;
  object-fit: contain;
  transition: filter 0.3s ease;
  filter: grayscale(100%) brightness(0);
}

.rc-slider-item[data-index="6"] img {
  width: 70px;
}

.rc-slider-item--active img {
  filter: none;
}

.rc-slider-item:hover {
  transform: scale(1.02);
}

.rc-slider-item--active:hover {
  transform: translateY(40px) scale(1.02);
}

.rc-card-container {
  position: relative;
  width: 100%;
  max-width: 950px;
  margin: 0 auto;
  height: 406px;
}

.rc-card {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  opacity: 0;
  transition: opacity 0.5s ease;
  pointer-events: none;
}

.rc-card--active {
  opacity: 1;
  pointer-events: auto;
}

.rc-card img {
  width: 100%;
  height: auto;
  border-radius: 40px;
}

/* ---- work-style: 인재상 구버전 ---- */
.rc-vision {
  width: 100%;
  min-width: 100%;
  min-height: 100vh;
  padding: 160px 245px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 10px;
  background: #ffffff;
}

.rc-vision-inner {
  width: 100%;
  max-width: 950px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 60px;
}

.rc-vision-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
  width: 100%;
}

.rc-vision-title {
  font-weight: 600;
  font-size: 36px;
  line-height: 1.3611111111111112em;
  letter-spacing: -0.02em;
  color: #000000;
  text-align: center;
}

.rc-vision-subtitle {
  font-family: Pretendard, sans-serif;
  font-weight: 500;
  font-size: 22px;
  line-height: 1.5em;
  letter-spacing: -0.02em;
  color: #000000;
  text-align: center;
}

.rc-vision-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  width: 100%;
}

.rc-vision-items {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: nowrap;
  width: 900px;
  min-height: 200px;
}

.rc-vision-item {
  flex-shrink: 0;
  width: 140px;
  height: 160px;
  border-radius: 40px;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.rc-vision-item--active {
  transform: translateY(40px);
}

.rc-vision-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.rc-vision-item:hover {
  transform: scale(1.02);
}

.rc-vision-item--active:hover {
  transform: translateY(40px) scale(1.02);
}

.rc-vision-card {
  position: relative;
  width: 100%;
  max-width: 950px;
  height: 406px;
  border-radius: 40px;
  overflow: hidden;
}

.rc-vision-card-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: 40px;
  opacity: 0;
  transition: opacity 0.5s ease;
  pointer-events: none;
}

.rc-vision-card-img--active {
  opacity: 1;
  pointer-events: auto;
}

/* ---- story: 오피스 구버전 ---- */
.rc-office-title {
  font-weight: 600;
  font-size: 36px;
  line-height: 1.36;
  letter-spacing: -0.02em;
  color: #000;
  text-align: center;
  margin-bottom: 60px;
}

.rc-office-slider-container {
  width: 100%;
  overflow: hidden;
}

.rc-office-slider {
  display: flex;
  gap: 24px;
  transition: transform 0.5s ease;
  will-change: transform;
}

.rc-office-slider.no-transition {
  transition: none;
}

.rc-office-slide {
  flex-shrink: 0;
  width: 638px;
  height: 396px;
  border-radius: 20px;
  overflow: hidden;
}

.rc-office-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---- 하위 페이지 푸터 구버전 - Figma 1047:1165 Footer/Default ---- */
.rc-footer {
  background: #fff;
  padding: 160px 70px 40px;
  margin-top: 0;
}

.rc-footer-inner {
  max-width: 1300px;
  margin: 0 auto;
  background: #e6e6e6;
  border-radius: 40px;
  padding: 30px 40px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.rc-footer-logo {
  display: inline-block;
  text-decoration: none;
}

.rc-footer-logo img {
  height: 16px;
  width: auto;
}

.rc-footer-company-info {
  font-family: Pretendard, "Pretendard Variable", sans-serif;
  font-weight: 500;
  font-size: 12.5px;
  line-height: 1.6;
  color: #4d4d4d;
}

.rc-footer-legal {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.rc-footer-legal a {
  font-family: Pretendard, "Pretendard Variable", sans-serif;
  font-weight: 500;
  font-size: 12.5px;
  color: #666666;
  text-decoration: none;
  padding-right: 20px;
  transition: color 0.2s;
}

.rc-footer-legal a:last-child {
  padding-right: 0;
}

.rc-footer-legal a:hover {
  color: #000;
}

.rc-footer-social {
  display: flex;
  gap: 8px;
  align-items: center;
}

.rc-footer-social a {
  width: 36px;
  height: 36px;
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.7;
  transition: opacity 0.2s;
}

.rc-footer-social a:hover {
  opacity: 1;
}

.rc-footer-social img {
  width: 36px;
  height: 36px;
  display: block;
  object-fit: contain;
}

/* ============================================================
   1024 — 시안 없음. 가로 넘침만 막는다
   ============================================================
   PC 프레임(1200)과 고정 폭 블록이 1024 화면을 넘긴다.
   스펙 §8 지시대로 `width: 100%` 급 처리만 하고 새 수치를 만들지 않는다.
   ============================================================ */
@media screen and (max-width: 1024px) {
  /* PC 1200 고정 → 화면 폭. 안쪽 슬라이드(944)는 이 요소의 overflow: hidden 이 자른다 */
  .rc-banner-inner {
    width: 100%;
  }

  /* PC 940 고정 → 화면 폭 안에서만 */
  .rc-values-cards {
    width: 100%;
    max-width: 940px;
  }

  /* ---- 채용 프로세스 (recruit/process/) · FAQ (recruit/faq/) ----
     파생: 스펙 §4-5(프로세스) / §5(FAQ). 리스트 944 고정폭이 1024 뷰포트를
     넘긴다 → 좌우 여백만 확보한다. 두 페이지가 같은 구조라 규칙도 한 벌이다 */
  .rc-process,
  .rc-faq-section {
    padding-left: 24px;
    padding-right: 24px;
  }

  .rc-process-list,
  .rc-faq-list {
    width: 100%;
    max-width: var(--rc-process-list-w);
  }

  /* 파생: 카드가 944 미만으로 줄면 QnA 고정폭 854 가 카드를 넘친다 */
  .rc-process-card-qna,
  .rc-faq-card-qna {
    width: 100%;
  }
}

/* ============================================================
   모바일 - Figma SS/Career/일하는 방식/모바일 3135:13955 (375 x 4570)
   ============================================================
   시안 합계 4570 = 헤더 103 + 히어로 812 + 핵심가치 1078 + 프로세스 812
                  + 인재상 812 + 오피스 692 + 푸터(공용)

   마크업은 PC 와 한 벌이고 여기서 크기만 갈아끼운다.
   푸터는 공용 res/css/ss-footer.css 의 768 분기가 이 시안과 일치해 손대지 않는다.
   햄버거·드로어는 공용 res/css/ss-header.css 가 768 이하에서 켠다 — 여기서 다시 정의하지 않는다.

   [모바일 타이포 토큰]
     30/Bold       30px  700 1.3 -0.25px    히어로 h1 / 핵심가치 h2
     22/SemiBold   22px  600 1.3 -0.11px    히어로 부제 / 배너 h2 / 오피스 h2
     22/Bold       22px  700 1.3 -0.11px    상세카드 제목 / 배너 슬라이드 제목
     17.5/SemiBold 17.5px 600 1.2 -0.15px   핵심가치 칩 라벨
     17.5/Medium   17.5px 500 1.5 -0.175px  상세카드 영문
     14.7/Medium   14.7px 500 1.5 -0.5px    섹션 부제 / 카드 리드문 / 슬라이드 본문
     12.5/Medium   12.5px 500 1.5 -0.0625px 상세카드 항목 칩
     19.35/Bold    19.35px 700 1.3 -0.25px  칩 번호 (PC 와 동일 값 → 재정의 없음)
   색 토큰은 PC 와 동일하다.
   ============================================================ */
@media screen and (max-width: 768px) {
  /* ============================================
     1. 헤더 - Figma 3135:14009 (375x103)
     ============================================
     컨테이너 bg #FFFFFF, padding 15px 20px 15px, row/space-between/align center
       ※ Figma 는 align flex-start → 사용자 지시로 center (아래 [정렬] 주석 참조)
     좌측 row gap 6 align center height 12 — logo h12(139:16) + 워드마크 69x12
     우측 햄버거 28x28 (ss-header.css)
     높이 58 = 15 + 28(햄버거) + 15
       ※ 상단 여백은 Figma 실측 60(높이 103) → **사용자 지시로 15**(상·하 대칭).
         공용 res/css/ss-header.css 의 768 분기도 같은 값으로 맞춰 두었다
     [없는 요소] PC 메뉴 3개 → .rc-header-nav 통째로 숨김.
                 같은 항목은 모바일 드로어(.ss-header__m-nav)로 옮겨 간다.
                 「전체 공고」는 사용자 지시(2026-08-12)로 PC·드로어 양쪽에서 제거됐다

     [스코프] 이 파일은 하위 페이지(process/faq/story/work-style)와 공용이다.
       그쪽 헤더는 마크업이 다르고(.rc-header-title 22px 텍스트 + .rc-header-right)
       햄버거도 없어서, 크기 규칙은 신규 마크업 표식 .rc-header--v2 로 한정한다
       (공유하면 로고 박스 12px 안에서 CAREERS 텍스트가 튀어나온다).
       상·하 여백 15 통일은 헤더 전체가 대상이라 .rc-header 에 걸고,
       좌우가 다른 v2 가 뒤에 와서 덮는다 — 두 규칙의 순서를 바꾸지 말 것
     ============================================ */

  /* 레거시 하위 페이지용. 좌우 24 는 PC 값 그대로 두고 상단만 30 → 15 */
  .rc-header {
    --rc-header-pad: 15px 24px 15px;
  }

  .rc-header--v2 {
    --rc-header-pad: 15px 20px 15px;
    --rc-header-inner-w: 100%;
    --rc-header-left-gap: 6px;
  }

  /* [정렬] Figma 3135:14009 는 align-items: flex-start 지만 **사용자 지시로 center**
     (다른 헤더와 통일 — 공용 .ss-header__inner 도 center 다).
     그래서 여기서 오버라이드하지 않고 PC .rc-header-inner 의 center 를 그대로 쓴다.
     시안값으로 되돌리지 말 것: flex-start 면 로고 12 가 위로 붙어 햄버거 28 과
     세로 중심이 어긋난다. 아래 .rc-header-left { height: 12px } 는 그 center 정렬의
     기준 박스라 유지한다 — 12 짜리 박스가 28 기준 중앙에 놓이는 게 의도다.
     헤더 높이 58 = 15 + 28(햄버거) + 15 은 정렬과 무관하게 그대로다 */
  .rc-header--v2 .rc-header-left {
    height: 12px;
  }

  /* 로고 박스 height 12 · 종횡비 139:16 유지 → width 104.25 */
  .rc-header--v2 .rc-header-logo img {
    width: auto;
    height: 12px;
    aspect-ratio: 139 / 16;
  }

  .rc-header--v2 .rc-header-wordmark img {
    width: 69px;
    height: 12px;
  }

  .rc-header--v2 .rc-header-nav {
    display: none;
  }

  /* ============================================
     2. 히어로 - Figma 3135:13958 (375x812)
     ============================================
     콘텐츠 column/center/center, padding 0 20px
       logo 래퍼 padding 20px 0 → logo 87x10 (PC 139x16)
       Title 블록 padding-bottom 44 (PC 는 콘텐츠 래퍼 padding-bottom 104)
         h1 30/Bold #000000 (PC 64) · p 22/SemiBold #333333 (PC 48)
     오버레이 2겹은 PC 와 동일 → 재정의 없음. 배경 이미지는 같은 원본이지만
     크롭 위치가 PC(중앙)와 다르다 → object-position 재정의 (아래 .rc-hero-bg)

     [높이] Figma 원값 812px. 다만 PC 를 100dvh 로 두라는 사용자 지시가 있었고
            812 은 iPhone X 뷰포트 높이(= 한 화면)라 같은 의도다 → 100dvh 를 그대로 쓴다.
            고정 812px 로 박으면 그보다 낮은 단말에서 잘린다
     [gap] 시안은 로고 래퍼 ↔ Title, h1 ↔ p 모두 gap 0 이다(PC 는 둘 다 10).
           Figma 좌표로 검산: Logo y 310.5 h 50 → Title y 360.5 h 141 로 맞붙는다.
           gap 10 을 두면 콘텐츠가 191 → 211 이 되어 중앙정렬 기준으로 10px 위로 뜬다
     ============================================ */
  .rc-hero {
    padding: 0 20px;
  }

  /* 배경 크롭 — 시안 3135:13958 은 PC(가로 중앙)와 달리 우측 인물 쪽을 보여준다.
     사진은 PC 와 같은 hero_bg_new.jpg(원본 4096x3058) 이고 크롭 위치만 다르다.
     375x812 을 cover 로 채우면 보이는 원본 구간은 폭 1412px(4096 중 34.5%),
     시안 실측 구간은 원본 x 2049~3461 → 2049 / (4096-1412) = 76.34% */
  .rc-hero-bg {
    object-position: 76.34% center;
  }

  .rc-hero-logo-wrap {
    padding: 20px 0;
  }

  .rc-hero-logo-wrap img {
    width: 87px;
    height: 10px;
  }

  .rc-hero-content {
    padding-bottom: 0;
    gap: 0; /* 시안 3135:13958: 로고 래퍼와 Title 이 맞붙는다 */
  }

  .rc-hero-text {
    padding-bottom: 44px;
    gap: 0; /* 시안: h1(39) + p(58) + pb(44) = Title 141 → 사이 간격 없음 */
  }

  .rc-hero-title {
    font-size: 30px; /* 30/Bold */
  }

  /* PC 는 h1·p 둘 다 -0.25px 라 .rc-hero-text 에 몰아 뒀지만,
     모바일은 h1 30/Bold -0.25px · p 22/SemiBold -0.11px 로 갈린다.
     keep-all: 기본 개행(normal)이면 "…싶은 사람들 / 입니다" 로 어절 중간이 끊긴다.
     시안은 "커머스 혁신을 설계하고 싶은 / 사람들입니다" 로 어절 단위 개행이다 */
  .rc-hero-subtitle {
    font-size: 22px; /* 22/SemiBold */
    letter-spacing: -0.11px;
    word-break: keep-all;
  }

  /* ============================================
     3. 핵심가치 - Figma 3135:13959 (375x1078)
     ============================================
     섹션 column/center/gap 30/padding 160px 20px (PC gap 80 / padding 160px 0)
     검산 1078 = 160×2 + [헤더 168.15 + 30 + 칩 110 + 30 + 카드 420]

     헤더 3135:13960 : column gap 4
        h2 30/Bold #000000 (PC 48/Bold #1A1A1A · .rc-head 는 오피스와 공용이라 스코프한다)
        p  래퍼 padding 10px 0 · 14.7/Medium #666666 center, 한 문단
           PC 의 <br> 은 여기서 무력화한다 → 335 폭 자연 개행 3줄(실측 66 = 22.05×3)
     칩 3135:13962 : 130x110, radius 24, padding 14, 트랙 gap 8 (PC 240x170/40/20/12)
        라벨 width 100, 17.5/SemiBold · 번호 19.35/Bold(PC 와 동일) · 아이콘 36 (PC 46)
        활성 텍스트 #000000 (PC #1A1A1A)
     카드 3135:13831 : width 100%(335), min-height 420, radius 24, padding 30px 24px,
        column gap 40 (PC 940x420 / radius 40 / padding 40 / row)

     [스코프] 섹션 규칙은 #work-style 로 한정한다. 레거시 work-style/index.html 도
       같은 .rc-values 를 쓰지만 안쪽 구조가 구버전(.rc-slider-*)이라 padding·gap 을
       공유하면 그쪽 모바일이 함께 바뀐다. 하위 요소(.rc-value-chip 등)는 index.html
       에만 있는 클래스라 스코프가 필요 없다
     ============================================ */
  #work-style.rc-values {
    --rc-chip-w: 130px;
    --rc-chip-gap: 8px; /* index.js 의 모바일 피치 138 과 짝 */

    padding: 160px 20px;
    gap: 30px;
  }

  .rc-values .rc-head {
    gap: 4px;
    width: 100%;
  }

  .rc-values .rc-head-title {
    font-size: 30px; /* 30/Bold */
    line-height: 1.3;
    letter-spacing: -0.25px;
    color: #000000;
  }

  /* Figma 는 p 를 padding 10px 0 래퍼로 감싼다. 마크업에 래퍼가 없어 p 에 직접 준다 */
  .rc-values .rc-head-desc {
    padding: 10px 0;
    font-weight: 500; /* 14.7/Medium */
    font-size: 14.7px;
    line-height: 1.5;
    letter-spacing: -0.5px;
  }

  /* PC 전용 개행 해제 — 모바일은 한 문단 자연 개행 */
  .rc-br-pc {
    display: none;
  }

  /* 파생: 섹션에 좌우 padding 20 이 생겼지만 칩 트랙은 화면 밖까지 이어진다
     (Figma 트랙 x -498.5, width 1372 > 375) → 좌우 20 을 되돌려 full-bleed 로 만든다.
     index.js 의 centerChip 은 이 요소 폭의 정중앙을 쓰므로 375 기준으로 맞아야 한다.

     order: 모바일은 카드가 위, 칩이 아래다 (Figma y: SubTitle 160 → 카드 358 → 칩 808).
     PC 는 칩 → 카드 순이고 마크업은 한 벌이라 여기서 flex order 로만 뒤집는다
     (.rc-head 는 order 기본값 0 이라 그대로 맨 위) */
  .rc-values-marquee {
    order: 2;
    width: calc(100% + 40px);
    margin: 0 -20px;
  }

  .rc-value-chip {
    height: 110px;
    padding: 14px;
    border-radius: 24px;
  }

  .rc-value-chip-label {
    width: 100px;
    font-weight: 600; /* 17.5/SemiBold */
    font-size: 17.5px;
    line-height: 1.2;
    letter-spacing: -0.15px;
  }

  /* 번호는 라벨과 축이 달라 PC 값(19.35px 700 1.3 -0.25px)을 그대로 쓴다.
     Figma 활성 인스턴스(5번)만 11.2875px/600 으로 찍혀 있으나 인스턴스 오버라이드
     편차로 판단해 나머지 9개·PC 와 같은 값으로 통일한다 */
  .rc-value-chip-num {
    font-size: 19.35px;
    line-height: 1.3;
    letter-spacing: -0.25px;
  }

  .rc-value-chip-icon {
    width: 36px;
    height: 36px;
  }

  .rc-value-chip--active .rc-value-chip-label {
    color: #000000;
  }

  /* ---- 상세 카드 ----
     Figma height 420 은 항목이 적은 카드 기준이다. 335 폭에서는 항목 3개 카드가 넘치므로
     min-height 로 이식한다(잘림 금지).
     PC 는 절대배치(inset 0) 스택이라 카드 높이가 컨테이너에 반영되지 않는다 →
     모바일은 같은 칸에 겹쳐 쌓는 1셀 grid 로 바꾼다. 컨테이너 높이가 가장 큰 카드에 맞춰
     고정되므로 4초 자동 전환에서 페이지가 튀지 않는다 */
  .rc-values-cards {
    order: 1; /* 칩(order 2) 보다 위 — 위 .rc-values-marquee 주석 참조 */
    width: 100%;
    height: auto;
    min-height: 420px;
    display: grid;
  }

  .rc-value-card {
    position: static;
    grid-area: 1 / 1;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    gap: 40px;
    padding: 30px 24px;
    border-radius: 24px;
  }

  .rc-value-card-head {
    flex: 0 0 auto;
    gap: 8px;
  }

  .rc-value-card-title {
    font-size: 22px; /* 22/Bold */
    letter-spacing: -0.11px;
  }

  .rc-value-card-body {
    flex: 0 0 auto;
    width: 100%;
    padding: 0;
    gap: 12px;
  }

  .rc-value-card-lead {
    font-weight: 500; /* 14.7/Medium */
    font-size: 14.7px;
    line-height: 1.5;
    letter-spacing: -0.5px;
  }

  .rc-value-card-list {
    gap: 4px;
  }

  .rc-value-card-list li {
    padding: 12px 20px;
    font-size: 12.5px; /* 12.5/Medium */
    letter-spacing: -0.0625px;
  }

  /* ============================================
     4·5. 슬라이더 배너 - Figma 3135:13983 / 3135:13994 (각 375x812)
     ============================================
     섹션 bg #F2F2F2, padding 112px 20px 12.75px, gap 30 (PC padding 160px 128px, gap 60)
        하단 12.75 = Figma 배너1 프레임 잔여값 (812 − 799.25).
        이 요소는 ss-scroll-pin.js 가 뷰포트에 맞춰 transform: scale() 하는 래퍼다.
        콘텐츠가 높을수록 스케일이 작아져 타이포가 시안값에서 멀어지므로(64 일 때 0.8354)
        하단 여백을 실측 최소값으로 낮춰 스케일을 올린다(0.887). 배너2 잔여값 88.75 로
        맞추지 않는 이유도 같다
     헤더 column gap 10 · h2/p 각각 padding 0 20px (섹션 20 + 내부 20 = 좌 40, 시안 실측)
        h2 22/SemiBold #000000 (PC 48/Bold) · p 14.7/Medium #666666 (PC 17.5/Medium)
     트랙 row gap 20 (PC 8)
     슬라이드 335 폭, column (PC 944x429 row)
        상단 텍스트 padding 30 gap 30 → 제목 22/Bold 그라디언트 · 본문 14.7/Medium height 130
        하단 썸네일 width 100%, aspect-ratio 375/307 (= 335 x 274.25)
        총 높이 523.25 = 텍스트 249 + 썸네일 274.25
     peek: 슬라이드 335 = 콘텐츠 폭 전체라 다음 슬라이드는 보이지 않는다.
           트랙은 .rc-banner-inner 의 overflow: hidden 이 그대로 자른다(PC 와 같은 방식)
     [없는 요소] 인디케이터 — 모바일 시안에 dot 바가 없다.
           ss-slider.js 는 dot 없이도 동작하지만 DOM 은 남기고 숨기기만 한다
     ============================================ */
  .rc-banner-inner {
    width: 100%;
    height: auto;
    padding: 112px 20px 12.75px; /* 하단 = Figma 배너1 잔여값 (위 주석 참조) */
    gap: 30px;
  }

  .rc-banner-head {
    gap: 10px;
  }

  .rc-banner-title {
    padding: 0 20px;
    font-weight: 600; /* 22/SemiBold */
    font-size: 22px;
    letter-spacing: -0.11px;
  }

  .rc-banner-sub {
    padding: 0 20px;
    font-size: 14.7px; /* 14.7/Medium */
    letter-spacing: -0.5px;
  }

  /* 각 슬라이드를 제 내용 높이로 둔다. 기본 stretch 면 본문이 짧은 슬라이드도
     가장 긴 슬라이드 높이로 늘어나 썸네일 아래에 흰 여백이 생긴다.
     모바일은 peek 이 없어(슬라이드 335 = 콘텐츠 폭 전체) 높이 차가 화면에 드러나지 않는다 */
  .rc-banner-track {
    gap: 20px;
    align-items: flex-start;
  }

  .rc-banner-slide {
    flex: 0 0 335px;
    width: 335px;
    height: auto;
    flex-direction: column;
    align-items: stretch;
  }

  .rc-banner-slide-text {
    flex: 0 0 auto;
    width: 100%;
    height: auto;
    padding: 30px;
    /* gap 30 은 PC 와 같은 값이라 재정의하지 않는다 */
  }

  .rc-banner-slide-title {
    font-size: 22px; /* 22/Bold */
    letter-spacing: -0.11px;
  }

  .rc-banner-slide-body-wrap {
    padding-right: 0;
  }

  /* Figma 는 height 130 (슬라이드 523.25 = 텍스트 249 + 썸네일 274.25).
     그대로 박으면 프로세스 슬라이드처럼 긴 본문(빈 줄 포함 9줄 ≈ 198px)이 상자를 넘어
     아래 썸네일 위에 겹쳐 찍힌다 — PC 는 넘친 만큼이 텍스트 블록 padding 80 안으로
     들어가 안 보이지만 모바일 padding 은 30 뿐이다.
     상세카드의 height 420 → min-height 420 과 같은 축으로 min-height 로 이식한다.
     본문이 130 안에 드는 슬라이드(인재상 6장)는 시안값 523.25 그대로다 */
  .rc-banner-slide-body {
    min-height: 130px; /* Figma 130 · PC 는 height 200 */
    height: auto;
    font-size: 14.7px; /* 14.7/Medium */
    letter-spacing: -0.5px;
  }

  .rc-banner-slide-thumb {
    flex: 0 0 auto;
    width: 100%;
    height: auto;
    aspect-ratio: 375 / 307; /* 335 x 274.25 */
  }

  .rc-banner-dots {
    display: none;
  }

  /* ============================================
     6. 오피스 - Figma 3135:13995 (375x692)
     ============================================
     섹션 column/center/gap 40/padding 160px 20px (PC gap 80 / padding 160px 0)
     검산 692 = 160×2 + [헤더 57.2 + 40 + 트랙 274]
     h2 22/SemiBold #000000 center (PC 48/Bold #1A1A1A)
     트랙 row gap 12 (PC 와 동일) · 슬라이드 335x274 radius 12 (PC 524x429 radius 24)
     좌우 페이드 각 100x449, bottom 0 (PC 200 x 100%, top 0)

     [스코프] 섹션 규칙은 #story 로 한정한다. 레거시 story/index.html 도 같은
       .rc-office 를 쓰지만 안쪽이 구버전(.rc-office-slider/-slide)이라 padding·gap 을
       공유하면 그쪽 모바일이 함께 바뀐다
     ============================================ */
  #story.rc-office {
    --rc-office-item-w: 335px;

    padding: 160px 20px;
    gap: 40px;
  }

  .rc-office .rc-head-title {
    font-weight: 600; /* 22/SemiBold */
    font-size: 22px;
    letter-spacing: -0.11px;
    color: #000000;
  }

  /* 시안 2줄 "스타일셀러 오피스 / 자세히 보기" — Asset/SubTitle 높이 58 = 22×1.3×2 */
  .rc-br-m {
    display: inline;
  }

  /* 파생: 섹션 좌우 padding 20 을 되돌려 뷰포트를 375 로 만든다.
     index.js 가 활성 슬라이드를 뷰포트 중앙((375−335)/2 = 20)에 놓으므로
     결과적으로 시안대로 좌우 20 여백이 되고, 이웃 사진이 양옆 8px 씩 걸쳐 보인다 */
  .rc-office-viewport {
    width: calc(100% + 40px);
    margin: 0 -20px;
  }

  .rc-office-track {
    height: 274px;
  }

  .rc-office-item {
    height: 274px;
    border-radius: 12px;
  }

  .rc-office-fade {
    top: auto;
    bottom: 0;
    width: 100px;
    height: 449px;
  }

  /* ============================================
     채용 프로세스 (recruit/process/) · FAQ (recruit/faq/)
     - 프로세스 3135:14027(전 카드 접힘 361x1348) / 3135:14034(전 카드 펼침 361x2958)
     - FAQ      3135:14017(375x2430, 전 카드 접힘이 시안 — 펼침 시안 없음)
     ============================================
     헤더는 채용 메인과 같은 .rc-header--v2 마크업이라 위 헤더 규칙을 그대로 탄다.
     푸터도 공용 res/css/ss-footer.css 의 768 분기가 시안(3135:14032)과 일치한다.
     → 이 페이지 전용으로 추가할 규칙은 히어로·아코디언 두 섹션뿐이다.

     FAQ 는 모바일 카드 값도 프로세스와 100% 같아 셀렉터를 콤마로 묶었다.
     다른 것은 히어로 배경 SVG · 섹션 gap · Bottom 문의 블록 · 불릿 들여쓰기뿐이다.

     [모바일 타이포 토큰]
       30/Bold       30px   700 1.3 -0.25px    히어로 h1
       14.7/Medium   14.7px 500 1.5 -0.5px     히어로 부제 / 카드 제목 · 질문
       17.5/SemiBold 17.5px 600 1.2 -0.15px    카드 번호 · Q / FAQ Bottom 타이틀
       12.5/Medium   12.5px 500 lh 20px -0.375px  카드 본문 ← lh 가 배수가 아니라 20px 고정
     ============================================ */

  /* ---- 히어로 - Figma 3135:14030 (프로세스 361x438) / 3135:14020 (FAQ 375x416) ----
     시안 padding 183px 20px 0. 헤더(58)가 위에 겹치는 구조라 183 을 그대로 쓴다
     (PC 처럼 헤더 높이를 더하지 않는다 — 스펙 §4-2 / FAQ 스펙 §2) */
  .rc-process-hero,
  .rc-faq-hero {
    --rc-process-hero-pad-top: 183px;
    --rc-process-hero-pad-x: 20px;
  }

  .rc-process-hero {
    background-image: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0.7) 0%,
        rgba(255, 255, 255, 0.7) 100%
      ),
      url("data:image/svg+xml;utf8,<svg viewBox='0 0 361 438' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'><rect x='0' y='0' height='100%25' width='100%25' fill='url(%23grad)' opacity='1'/><defs><radialGradient id='grad' gradientUnits='userSpaceOnUse' cx='0' cy='0' r='10' gradientTransform='matrix(-13.688 -30.472 25.115 -18.295 303.72 465.14)'><stop stop-color='rgba(204,204,204,1)' offset='0'/><stop stop-color='rgba(255,255,255,1)' offset='1'/></radialGradient></defs></svg>");
  }

  /* FAQ 모바일 배경 SVG 는 FAQ PC 와도 프로세스 모바일과도 다른 전용 값이다
     (viewBox 375x416 · gradientTransform 이 프레임 크기에 맞춰져 있다) */
  .rc-faq-hero {
    background-image: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0.7) 0%,
        rgba(255, 255, 255, 0.7) 100%
      ),
      url("data:image/svg+xml;utf8,<svg viewBox='0 0 375 416' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'><rect x='0' y='0' height='100%25' width='100%25' fill='url(%23grad)' opacity='1'/><defs><radialGradient id='grad' gradientUnits='userSpaceOnUse' cx='0' cy='0' r='10' gradientTransform='matrix(-14.219 -28.941 26.089 -17.376 315.49 441.77)'><stop stop-color='rgba(204,204,204,1)' offset='0'/><stop stop-color='rgba(255,255,255,1)' offset='1'/></radialGradient></defs></svg>");
  }

  .rc-process-hero-inner,
  .rc-faq-hero-inner {
    align-items: flex-start;
  }

  /* 시안은 하단 여백 44 를 Title 블록이 갖는다(PC 는 바깥 블록이 104).
     gap 0 — 모바일 MainTitle 컨테이너에는 gap 클래스가 없다(=0).
     프로세스 3135:14030 · FAQ 3135:14020 둘 다 실측 확인(2026-08-12).
     PC 의 gap 10 은 시안값이라 여기서만 푼다. 안 풀면 Logo 블록 50 뒤에 10 이
     더 붙어 h1 상단이 183 + 50 = 233 이 아니라 243 으로 내려간다 */
  .rc-process-hero-content,
  .rc-faq-hero-content {
    gap: 0;
    padding-bottom: 0;
  }

  .rc-process-hero-logo,
  .rc-faq-hero-logo {
    padding: 20px 0;
  }

  .rc-process-hero-logo img,
  .rc-faq-hero-logo img {
    width: 87px;
    height: 10px;
  }

  .rc-process-hero-text,
  .rc-faq-hero-text {
    gap: 12px;
    padding-bottom: 44px;
  }

  .rc-process-hero-title,
  .rc-faq-hero-title {
    font-size: 30px; /* 30/Bold */
  }

  /* 색이 PC(#666666)와 다르다 */
  .rc-process-hero-desc,
  .rc-faq-hero-desc {
    font-size: 14.7px; /* 14.7/Medium */
    letter-spacing: -0.5px;
    color: #333333;
  }

  /* ---- 아코디언 - Figma 3135:14031(프로세스 접힘) / 3135:14038(펼침) (361x2156)
                    Figma 3135:14021(FAQ 375x1650, 접힘) ----
     카드 padding·radius·번호/제목 크기가 PC 와 다르다. 구조(DOM)는 한 벌 그대로다.
     FAQ 모바일 펼침 시안은 없다 → 카드 배경 rgba(242,242,242,0.2) ·
     chevron 배경 #CCD5FF · 글리프 chevron.up · TextBox gap 10 ·
     라벨행 padding 5px · Answer padding 0 0 6px 30px · 본문 12.5/lh20 은
     전부 파생: 프로세스 모바일 펼침값(3135:14038)을 그대로 쓴다 */
  .rc-process,
  .rc-faq-section {
    --rc-process-card-radius: 30px;

    padding: 80px 20px 60px;
  }

  /* FAQ 섹션 gap 은 PC 60 → 모바일 30 (Figma 3135:14021) */
  .rc-faq-section {
    gap: 30px;
  }

  .rc-process-list,
  .rc-faq-list {
    width: 100%;
  }

  /* Figma padding 14/14/14/24 − 내부 stroke 2px (PC 와 같은 이유) */
  .rc-process-card-toggle,
  .rc-faq-card-toggle {
    padding: 12px 12px 12px 22px;
  }

  /* PC 고정폭 854 → 카드 폭에 맞춘다 */
  .rc-process-card-qna,
  .rc-faq-card-qna {
    width: 100%;
  }

  /* Figma gap 10 은 PC 와 같은 이유로 body 의 padding-top 으로 옮겼다(접힘 높이 0) */
  .rc-process-card-text,
  .rc-faq-card-text {
    padding: 0;
  }

  /* Figma 접힘 라벨행 py 5.5 / 펼침 5 */
  .rc-process-card-label,
  .rc-faq-card-label {
    padding: 5.5px 0;
  }

  .rc-process-card--open .rc-process-card-label,
  .rc-faq-card--open .rc-faq-card-label {
    padding: 5px 0;
  }

  .rc-process-card-num,
  .rc-faq-card-q {
    width: 30px;
    font-weight: 600; /* 17.5/SemiBold */
    font-size: 17.5px;
    line-height: 1.2;
    letter-spacing: -0.15px;
  }

  /* PC 는 nowrap 이지만 모바일은 flex 1 안에서 줄바꿈된다 */
  .rc-process-card-title,
  .rc-faq-card-question {
    flex: 1;
    min-width: 0;
    font-weight: 500; /* 14.7/Medium */
    font-size: 14.7px;
    line-height: 1.5;
    letter-spacing: -0.5px;
    white-space: normal;
  }

  /* 접힘: 세로 padding 0 (가로만). Figma 의 padding-bottom 6 과 TextBox gap 10 은
     아래 --open 규칙으로 옮겼다 — PC 와 같은 이유다(위 answer 주석의 ★ 참조) */
  .rc-process-card-answer,
  .rc-faq-card-answer {
    padding: 0 0 0 30px;
  }

  /* 펼침: 위 10(Figma TextBox gap) / 아래 6(Figma answer padding-bottom) / 좌 30.
     PC --open 의 padding-top: 30 을 shorthand 로 통째 덮는다(같은 특이도·뒤 선언) */
  .rc-process-card--open .rc-process-card-answer,
  .rc-faq-card--open .rc-faq-card-answer {
    padding: 10px 0 6px 30px;
  }

  /* [padding 금지] fr 트랙 최소 기여값에 더해져 접힘 높이가 0 이 안 된다 */
  .rc-process-card-body,
  .rc-faq-card-body {
    padding: 0;
    font-size: 12.5px; /* 12.5/Medium */
    line-height: 20px; /* 배수가 아니라 고정 20px */
    letter-spacing: -0.375px;
  }

  /* 파생: 26.25 × (12.5 / 17.5) = 18.75px — 본문 축소 비율과 같은 비율 */
  .rc-faq-card-list li {
    margin-inline-start: 18.75px;
  }

  /* Chevron 바깥 박스 24x32 = IconSize 16 + padding 8px 4px */
  .rc-process-card-chevron,
  .rc-faq-card-chevron {
    padding: 8px 4px;
  }

  .rc-process-card-icon,
  .rc-faq-card-icon {
    width: 16px;
    height: 16px;
  }

  /* 접힘·펼침 모두 11.6317x7.1317 (펼침의 chevron_up 은 원본 17.4476x10.6373 에서
     줄어들지만 preserveAspectRatio="none" 이라 시안과 같다) */
  .rc-process-card-glyph,
  .rc-faq-card-glyph {
    left: 2.2857px;
    top: 4.5714px;
    width: 11.6317px;
    height: 7.1317px;
  }

  /* FAQ Bottom 문의 블록 - Figma I3135:14021;2297:22864
     타이틀만 17.5/SemiBold 로 줄어든다. 버튼은 PC 값 그대로가 시안이다 */
  .rc-faq-bottom-title {
    font-size: 17.5px; /* 17.5/SemiBold */
    line-height: 1.2;
    letter-spacing: -0.15px;
  }
}

/* ============================================================
   모션 축소 설정 존중 (prefers-reduced-motion: reduce)
   ============================================================
   사용자 지시: 시안에 없는 transition — 2026-08-12 사용자 요청으로 추가한
   아코디언 펼침/접힘 애니메이션을 OS 「동작 줄이기」 설정에서 전부 끈다.
   transition: none 은 shorthand 라 grid-template-rows · **padding** ·
   background-color · visibility 를 한꺼번에 해제한다(개별 나열 불필요).

   visibility 만은 남긴다 — 0s 지연이 사라져도 접힘 시 즉시 숨겨져야
   스크린리더·탭 포커스에서 빠진다. 대신 지연 없이 즉시 적용되도록 0s 로 덮는다.
   ※ 이 블록은 아코디언 전용이다. 다른 슬라이더·마퀴 transition 은 대상이 아니다
     (사용자 지시 범위 밖 — 필요해지면 그때 별도로 논의한다).
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .rc-process-card,
  .rc-faq-card,
  .rc-process-card-chevron,
  .rc-faq-card-chevron {
    transition: none;
  }

  .rc-process-card-answer,
  .rc-faq-card-answer,
  .rc-process-card--open .rc-process-card-answer,
  .rc-faq-card--open .rc-faq-card-answer {
    transition: none;
  }
}