/* ══ 살아있는 랜딩 공용 — 첫 화면 글꼴 한 번에 + 글자 등장 + 숫자 굴러가기 + 버튼 광택 + 오른쪽 진행 막대 ══════════
   (2026-09-17 사장 지시 skillone.kr 참고 → 2026-09-18 "다른 랜딩들에도 적용" — 메인 랜딩에 인라인으로 있던 것을 여섯 지면 공용으로 뺐다)

   🔒 public/style.css 는 건드리지 않는다. 이 파일은 그 뒤에 실려 지면별로 **표식이 붙은 것만** 건드린다.
      표식이 없는 지면은 이 파일을 실어도 아무것도 달라지지 않는다.

   지면이 붙이는 표식(마크업)
     data-rc-hero          첫 화면 구역(section) — 이 구역과 헤더 글자를 먼저 받는다. 한 지면에 하나.
     data-rc-title         첫 화면 큰 제목(h1) — 글자 하나씩 등장. 한 지면에 하나.
     data-rc-wipe          그 제목 안에서 왼쪽부터 닦여 나타날 부분(메인의 .highlight, 다른 지면의 em)
     data-rc-in="fade|rise|pop"  첫 화면에서 함께 등장할 요소. 시차는 style="--rc-d:.3s"
     data-rc-odo           첫 화면 통계 숫자(메인·생산직·면접은 .count 가 대신한다)
     data-rc-shine         버튼 광택을 추가로 줄 요소(.btn-accent·.btn-primary·.m-cta-bar .mcb-main 은 기본)
     data-rc-nav="라벨"     오른쪽 진행 막대의 구간
     data-rc-chars         화면에 들어올 때 글자가 하나씩 올라올 제목(구간 제목)

   문서에 붙는 클래스(머리 조건 스크립트 + landing-intro.js)
     rc-fontgate  글꼴 API 가 있다      rc-hero-font  첫 화면 글꼴 'RC Hero' 도착
     rc-intro     모션 허용             rc-intro-go   첫 화면 등장 시작
     rc-intro-now 휴대폰(글자 안 숨김)   rc-intro-late 2.4초 넘어 풀림 — 효과 없이 바로
     rc-page-font 본문 글꼴 'RC Page' 도착   rc-font-skip 이번 방문은 시스템 글꼴 그대로

   안전: 머리 스크립트가 2.6초에 첫 화면을 무조건 풀고, CSS 만으로도 3.2초(구간 제목은 8초) 뒤 보인다.
   롤백: 지면에서 이 <link> 와 두 스크립트 줄을 빼면 그 지면만 원래대로 돌아간다. */

/* ── ① 글꼴 — 본문은 시스템 글꼴로 먼저, 다 받은 뒤 한 번에. 첫 화면(헤더·히어로·카카오 버튼)은 작은 글꼴로 ──
   두 글꼴 모두 Noto Sans KR 에서 쓰인 글자만 뽑은 가변 굵기(300~800) 한 벌이다(landing-intro.js).
   ⚠️ 뒤에 구글 글꼴 'Noto Sans KR' 을 두지 않는다 — 빠진 글자가 생기면 그 글자마다 구글 조각(굵기별 약 95개 중 하나, 수십 KB)을 불러
      문서를 다시 배치했다(2026-09-17 '버벅임'의 원인). 나중에 그려지는 글자는 landing-intro.js 가 지켜보다 더 받는다 */
html.rc-fontgate:not(.rc-page-font) body { font-family: 'Apple SD Gothic Neo', 'Malgun Gothic', 'Pretendard', system-ui, -apple-system, sans-serif; }
html.rc-fontgate.rc-page-font body { font-family: 'RC Page', 'Apple SD Gothic Neo', 'Malgun Gothic', 'Pretendard', system-ui, -apple-system, sans-serif; }
html.rc-fontgate.rc-hero-font :is(.site-header, [data-rc-hero], .kakao-float) { font-family: 'RC Hero', 'RC Page', 'Apple SD Gothic Neo', 'Malgun Gothic', 'Pretendard', system-ui, -apple-system, sans-serif; }
/* 버튼과 입력칸은 브라우저 기본값이 '글꼴을 물려받지 않음'이다 — 지면 CSS 가 font-family: inherit 를 빠뜨린 버튼
   (메인 후기 '더 보기' 등)은 Arial 로, 한글은 맑은 고딕으로 그려져 그 버튼만 글꼴이 달랐다(2026-09-19 실측) */
html.rc-fontgate :is(button, input, select, textarea) { font-family: inherit; }

/* ── ② 등장 전 — 히어로 배경은 바로 보이고, 글자만 숨는다 ── */
html.rc-intro:not(.rc-intro-go) :is(.site-header .header-inner, [data-rc-hero] .container > *, .kakao-float),
html.rc-intro:not(.rc-intro-go) [data-rc-title] .rc-c { animation: rcIntroSafe 0s linear 3.2s forwards; }
html.rc-intro:not(.rc-intro-go) :is(.site-header .header-inner, [data-rc-hero] .container > *, .kakao-float) { opacity: 0; }
/* 휴대폰(글자를 숨기지 않는 방식)도 제목만은 글자로 나뉠 때까지 숨긴다 — 나누기 전에 그려진 제목을 나누면 깜빡인다. 3.2초 안전장치 */
html.rc-intro-now [data-rc-title]:not(.rc-split) { opacity: 0; animation: rcIntroSafe 0s linear 3.2s forwards; }
.rc-w { display: inline-block; white-space: nowrap; }
.rc-c { display: inline-block; }
[data-rc-title] { --rc-blur: 8px; }
html.rc-intro:not(.rc-intro-go) [data-rc-title] .rc-c { opacity: 0; transform: translateY(.45em); filter: blur(var(--rc-blur)); }
@keyframes rcIntroSafe { to { opacity: 1; transform: none; filter: none; } }

/* ── ③ 등장 — 헤더 → 배지 → 제목 글자 하나씩 → 초록 줄이 왼쪽부터 닦이며 → 버튼 → 통계 숫자 → 카카오 버튼.
      채우기는 backwards 만 쓴다: 끝난 뒤 원래 hover 들뜸(transform)을 덮지 않게.
      제목 글자는 전환(transition)이 아니라 애니메이션이다 — 느린 기기는 첫 그림 전에 등장을 켜는데, 전환은 '바뀌기 전 모습'이
      한 번도 계산되지 않았으면 효과 없이 끝나지만 애니메이션은 첫 그림부터 돈다.
   ⚠️ LCP(가장 큰 글자 덩어리가 보인 시각, 광고 품질과 검색에 쓰인다) — 가장 큰 덩어리에 등장 효과를 걸면
      브라우저는 효과가 끝난 시각을 LCP 로 잡는다(실측: 효과 전 0.62초 → 투명도 등장 2.3초 → 잘라 내기 1.8초 → 떠오르기만 해도 1.7초).
      그래서 첫 화면의 설명 문단과 통계 상자에는 data-rc-in 을 달지 않는다(verify:landings [12] 가 막는다) ── */
html.rc-intro.rc-intro-go [data-rc-in="fade"] { animation: rcFadeIn .5s ease var(--rc-d, 0s) backwards; }
html.rc-intro.rc-intro-go [data-rc-in="rise"] { animation: rcRise .6s cubic-bezier(.2,.7,.2,1) var(--rc-d, 0s) backwards; }
html.rc-intro.rc-intro-go [data-rc-in="pop"] { animation: rcPop .6s cubic-bezier(.3,1.5,.5,1) var(--rc-d, 0s) backwards; }
html.rc-intro.rc-intro-go [data-rc-title] .rc-c { animation: rcChar .65s cubic-bezier(.2,.8,.2,1) calc(.05s + var(--i, 0) * 28ms) backwards; }
/* 메인 랜딩의 초록 줄(.highlight)은 style.css 의 흐르는 빛(sheen)을 그대로 두고 닦기만 얹는다 */
html.rc-intro.rc-intro-go [data-rc-wipe].highlight { animation: sheen 6s linear infinite, rcWipe .85s cubic-bezier(.3,.6,.2,1) .3s backwards; }
html.rc-intro.rc-intro-go [data-rc-wipe]:not(.highlight) { animation: rcWipe .85s cubic-bezier(.3,.6,.2,1) .3s backwards; }
@keyframes rcChar { from { opacity: .01; transform: translateY(.45em); filter: blur(var(--rc-blur)); } }
@keyframes rcFadeIn { from { opacity: .01; } }
@keyframes rcRise { from { opacity: .01; transform: translateY(18px); } }
@keyframes rcPop { from { opacity: .01; transform: translateY(14px) scale(.9); } }
@keyframes rcWipe {
  from {
    opacity: .01; filter: blur(8px);
    -webkit-mask-image: linear-gradient(90deg, #000 40%, transparent 60%); mask-image: linear-gradient(90deg, #000 40%, transparent 60%);
    -webkit-mask-size: 300% 100%; mask-size: 300% 100%; -webkit-mask-position: 100% 0; mask-position: 100% 0;
  }
  to {
    opacity: 1; filter: blur(0);
    -webkit-mask-image: linear-gradient(90deg, #000 40%, transparent 60%); mask-image: linear-gradient(90deg, #000 40%, transparent 60%);
    -webkit-mask-size: 300% 100%; mask-size: 300% 100%; -webkit-mask-position: 0 0; mask-position: 0 0;
  }
}
/* 늦게 풀렸으면(느린 회선) 효과 없이 바로 — 이미 보이던 글자가 다시 숨었다 나타나지 않게 */
html.rc-intro-late [data-rc-in] { animation: none !important; }
html.rc-intro-late [data-rc-wipe].highlight { animation: sheen 6s linear infinite !important; }
html.rc-intro-late [data-rc-wipe]:not(.highlight) { animation: none !important; }
html.rc-intro-late [data-rc-title] .rc-c { animation: none !important; }
html.rc-intro-late [data-rc-hero] .rc-odo-host .rc-os { transition: none !important; }
@media (max-width: 768px) {
  /* 휴대폰은 흐림 없이 위로만(글자마다 흐림을 계산하지 않는다) */
  [data-rc-title], [data-rc-chars] { --rc-blur: 0px; }
}

/* ── ④ 숫자 굴러가기 — 자리마다 0~9 띠가 위로 올라간다. 자리 너비와 기준선은 투명한 같은 숫자(.rc-og, 실제 글자)가 잡고
      (Noto Sans KR 숫자는 폭이 모두 같다 — 굴러가는 동안 옆 글자가 흔들리지 않는다),
      띠는 CSS 생성 글자(::before)라 문서 글자에 섞이지 않는다 — 검색, 복사, 화면 읽기에는 원래 숫자만 남는다 ── */
.rc-odo { white-space: nowrap; }
.rc-od { position: relative; display: inline-block; }
.rc-og { opacity: 0; }
.rc-ow { position: absolute; inset: 0; overflow: hidden; }
.rc-os::before { content: attr(data-s); white-space: pre; }
.rc-os {
  display: block; text-align: center;
  transform: translateY(calc(var(--k, 0) * -100% / var(--len)));
  transition: transform 1.8s cubic-bezier(.16,.8,.22,1) calc(var(--odo-delay, 0s) + var(--ci, 0) * 90ms);
}
.rc-odo-host.is-rolled .rc-os,
html.rc-intro-go [data-rc-hero] .rc-odo-host .rc-os { --k: var(--n); }
.rc-odo-host.is-instant .rc-os { transition: none; }
[data-rc-hero] { --odo-delay: .55s; }
/* 휴대폰 — 첫 화면 통계가 화면 아래면 들어올 때까지 0 에 붙잡는다(첫 화면 등장과 함께 굴리면 화면 밖이라 아무도 못 본다) */
html.rc-intro-go .rc-odo-wait .rc-odo-host .rc-os { --k: 0; transition: none; }
/* 히어로 통계는 그라디언트 글자다 — 부모의 background-clip:text 는 움직이는 자식을 칠하지 못해 칸마다 같은 그라디언트를 준다 */
.stat-num .rc-os {
  background: linear-gradient(180deg, #ffffff 0%, #d7e6ff 100%) 0 0 / 100% calc(100% / var(--len)) repeat-y;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
}

/* ── ⑤ 버튼 광택 — 누르지 않아도 주력 버튼에 빛이 한 번씩 지나간다.
      초록 주력 버튼(.btn-accent)은 style.css 의 hover 광택(::after)을 그대로 두고 가만히 있을 때 지나가는 주기만 더한다.
      남색 버튼(.btn-primary), 휴대폰 하단 신청 바에는 같은 모양을 새로 단다. 윤곽 버튼, 크몽 버튼은 빼서 주력 버튼만 빛난다.
      버튼마다 시작 시각을 엇갈려 한꺼번에 번쩍이지 않게 한다. 모션 줄이기면 없음 ── */
@media (prefers-reduced-motion: no-preference) {
  .btn-accent::after { animation: rcShine 4.6s cubic-bezier(.45,.05,.3,1) var(--shine-delay, 1.8s) infinite; }
  .btn-primary, .m-cta-bar .mcb-main, [data-rc-shine] { position: relative; overflow: hidden; }
  .btn-primary::after, .m-cta-bar .mcb-main::after, [data-rc-shine]::after {
    content: ''; position: absolute; top: 0; left: -120%; width: 60%; height: 100%; pointer-events: none;
    background: linear-gradient(100deg, transparent, rgba(255,255,255,.28), transparent);
    transform: skewX(-20deg);
    animation: rcShine 4.6s cubic-bezier(.45,.05,.3,1) var(--shine-delay, 2.6s) infinite;
  }
  @keyframes rcShine {
    0% { transform: translateX(0) skewX(-20deg); }
    32%, 100% { transform: translateX(470%) skewX(-20deg); }
  }
  .hero-cta-group .btn-accent, [data-rc-hero] .btn-accent { --shine-delay: 2.3s; }
  .site-header .btn-primary { --shine-delay: 3.5s; }
  .m-cta-bar .mcb-main { --shine-delay: .9s; }
  #submitBtn { --shine-delay: 1.2s; }
}

/* ── ⑥ 오른쪽 진행 막대 — 동작은 public/landing-motion.js.
      1200px 이상에서만 보인다(좁으면 본문을 가린다). 이름표는 1440px 이상에서만 늘 보인다
      (1280px 은 본문 바깥 여백이 90px 뿐이라 이름표가 글자를 덮는다 — 그 폭에서는 마우스를 올렸을 때만) ── */
.rc-side { position: fixed; right: 18px; top: 50%; z-index: 80; transform: translateY(-50%); display: flex; flex-direction: column; align-items: flex-end; opacity: 0; transition: opacity .6s ease; }
.rc-side.is-ready { opacity: 1; }
/* 선은 첫 점 가운데(18px)부터 끝 점 가운데까지 — 점 가운데는 오른쪽에서 8px(여백) + 6px(점 반지름) */
.rc-side-track { position: absolute; top: 18px; bottom: 18px; right: 13px; width: 2px; border-radius: 2px; background: rgba(120,134,158,.32); pointer-events: none; }
.rc-side-fill { position: absolute; left: 0; top: 0; width: 100%; height: calc(var(--p, 0) * 100%); border-radius: 2px; background: linear-gradient(180deg, #27AE60, #4FE0A3); box-shadow: 0 0 8px rgba(79,224,163,.55); transition: height .18s linear; }
.rc-side-item { position: relative; display: flex; align-items: center; justify-content: flex-end; gap: 10px; height: 36px; padding: 0 8px 0 12px; background: none; border: 0; cursor: pointer; font: inherit; color: inherit; }
.rc-side-dot { position: relative; flex: 0 0 auto; width: 12px; height: 12px; border-radius: 50%; background: #fff; border: 2px solid rgba(120,134,158,.7); box-shadow: 0 1px 4px rgba(15,23,42,.22); transition: transform .3s cubic-bezier(.3,1.6,.5,1), background-color .3s, border-color .3s, box-shadow .3s; }
.rc-side-item.is-done .rc-side-dot { background: #27AE60; border-color: #27AE60; }
.rc-side-item.is-on .rc-side-dot { background: #27AE60; border-color: #fff; transform: scale(1.4); box-shadow: 0 0 0 5px rgba(39,174,96,.25), 0 2px 10px rgba(15,23,42,.3); }
.rc-side-item:hover .rc-side-dot { transform: scale(1.3); }
.rc-side-label {
  font-size: .74rem; font-weight: 600; line-height: 1; color: var(--navy); white-space: nowrap;
  background: rgba(255,255,255,.94); border: 1px solid rgba(27,43,75,.1); border-radius: 100px; padding: 5px 10px;
  box-shadow: 0 2px 10px rgba(15,23,42,.1);
  opacity: 0; transform: translateX(6px); transition: opacity .2s ease, transform .2s ease; pointer-events: none;
}
.rc-side-item:hover .rc-side-label, .rc-side-item:focus-visible .rc-side-label { opacity: 1; transform: none; }
.rc-side-item:focus-visible { outline: none; }
.rc-side-item:focus-visible .rc-side-dot { box-shadow: 0 0 0 3px rgba(39,174,96,.6); }
@media (min-width: 1440px) {
  .rc-side-label { opacity: .8; transform: none; }
  .rc-side-item.is-on .rc-side-label { opacity: 1; font-weight: 800; color: #1E7A45; border-color: rgba(39,174,96,.35); }
}
@media (max-width: 1199px) { .rc-side { display: none; } }

/* ── ⑥-2 휴대폰·좁은 화면 구간 막대 — 오른쪽 막대가 숨는 폭(1200px 미만)에서 같은 정보를 위쪽 칸으로 준다.
      칸 수로 '몇 구간 중 어디'가 보이고, 구간이 바뀌면 이름표가 1.6초 떴다 사라진다(손가락에 걸리지 않게 pointer-events 없음).
      지면에 이미 있는 상단 진행 바는 이 막대가 대신한다 — 한 화면에 진행 바를 둘 두지 않는다 ── */
.rc-mrail, .rc-mtag { display: none; }
@media (max-width: 1199px) {
  html.rc-mrail-on :is(.scroll-progress, .m-progress) { display: none; }
  .rc-mrail {
    display: flex; gap: 2px; position: fixed; top: 0; left: 0; right: 0; z-index: 130;
    height: 3px; padding: 0 2px; pointer-events: none;
  }
  .rc-mseg { flex: 1 1 0; min-width: 0; height: 100%; border-radius: 0 0 2px 2px; background: rgba(120,134,158,.24); overflow: hidden; }
  .rc-mseg::after {
    content: ''; display: block; height: 100%; width: calc(var(--f, 0) * 100%);
    background: linear-gradient(90deg, #27AE60, #4FE0A3); transition: width .18s linear;
  }
  .rc-mseg.is-on { background: rgba(39,174,96,.22); box-shadow: 0 0 6px rgba(79,224,163,.5); }
  /* 이름표는 아래 가운데 — 위쪽은 로고와 메뉴 버튼이 있어 겹친다. 하단 신청 바가 있으면 그 위로 */
  .rc-mtag {
    display: block; position: fixed; left: 50%; bottom: calc(84px + env(safe-area-inset-bottom, 0px)); z-index: 125;
    max-width: calc(100vw - 48px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-size: .76rem; font-weight: 700; line-height: 1; color: #fff;
    background: rgba(27,43,75,.86); border-radius: 100px; padding: 7px 14px;
    box-shadow: 0 4px 16px rgba(15,23,42,.24); pointer-events: none;
    opacity: 0; transform: translateX(-50%) translateY(6px); transition: opacity .25s ease, transform .25s ease;
  }
  .rc-mtag.is-on { opacity: 1; transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .rc-mseg::after, .rc-mtag { transition: none; }
}

/* ── ⑦ 구간 제목 글자 등장 — landing-motion.js 가 화면에 들어올 때 .rc-go 로 바꾼다.
      스크립트가 안 돌면 아무것도 나뉘지 않아 제목은 원래대로 보이고, 나뉜 뒤 무슨 일이 생겨도 8초면 보인다 ── */
[data-rc-chars] { --rc-blur: 6px; }
[data-rc-chars].rc-wait .rc-c { opacity: 0; transform: translateY(.5em); filter: blur(var(--rc-blur)); animation: rcIntroSafe 0s linear 8s forwards; }
[data-rc-chars].rc-go .rc-c { animation: rcChar .6s cubic-bezier(.2,.8,.2,1) calc(.1s + var(--i, 0) * 26ms) backwards; }