/* ============================================================
   reference.css — "레퍼런스(도입 교육기업)" 아크 스크럽 캐러셀
   잉크본 TiltCarousel(아크 스크럽 + 드래그/스와이프 + lerp 관성 +
   진입 블룸) 메커니즘을 바닐라로 이식. 본사 site/ 턱시도 문법 상속.
   - 배경: 라이트(--white) · 오렌지 포인트 · 조연(≈50~60vh, 거창 금지)
   - 카드 transform은 reference.js(rAF lerp)가 구동 — CSS는 정적 스타일만.
   - 격자/바둑판 패턴 없음 · 흰바탕 보라 그라디언트 없음 · 신규 폰트 없음.
   index.html · online/index.html 두 페이지 공용. 토큰(:root)은 각 페이지 상속.
   ============================================================ */

.ref-carousel{
  position:relative;
  background:var(--white);
  color:var(--ink);
  /* 조연: 뷰포트 높이에 비례해 ≈50~60vh로 컴팩트 유지(거창 금지) */
  padding:clamp(30px,3.6vh,48px) 0;
  overflow:hidden;
}

/* ── 헤더 — 분할(좌: 킥커 표준 좌측 / 우: 나인스쿨 블록 우정렬). .eyebrow 문법 상속 ── */
.rc-head{
  display:flex;align-items:flex-start;justify-content:space-between;
  gap:clamp(24px,5vw,64px);
  text-align:left;
  margin-bottom:clamp(20px,2.6vh,32px);
}
.rc-head-l{flex:0 0 auto;padding-top:4px}   /* 킥커: 사이트 표준 좌측(헤어라인+대문자) */
.rc-sub{                                     /* "도입 교육기업" — 킥커 아래 서브카피로 이동 */
  margin-top:12px;font-size:14px;letter-spacing:.01em;
  color:var(--gray);
}
.rc-head-r{                                  /* 나인스쿨 블록: 헤드+배지+로고 우정렬 스택 */
  flex:1 1 auto;min-width:0;
  display:flex;flex-direction:column;align-items:flex-end;text-align:right;
}
.rc-h2{
  font-family:var(--display);font-weight:400;
  font-size:clamp(28px,3.6vw,44px);line-height:1.1;  /* 다른 섹션 헤드 동급으로 축소 */
  /* 연두 그라데이션(라이트 배경 명도대비 확보 · 형광 과채도 금지) */
  background:linear-gradient(102deg,#4d8f0f 0%,#2a9a44 52%,#13924a 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}
/* 로고+회사이름 인라인(우리 로고처럼 로고가 이름 앞) — 로고 하단을 이름 하단에 정렬 */
.rc-brand{display:flex;align-items:flex-end;justify-content:flex-end;gap:4px}
.rc-badges{
  margin-top:16px;
  display:flex;flex-direction:column;align-items:flex-end;gap:8px;  /* 배지 2개 이름 아래 세로 스택 */
}
.rc-badge{
  font-size:13px;font-weight:600;letter-spacing:.01em;line-height:1.3;
  color:#b06200;                /* 라이트 배경 위 오렌지 대비 보정(사이트 규칙) */
  background:rgba(232,127,0,.08);
  border:1px solid rgba(232,127,0,.34);
  border-radius:999px;
  padding:7px 16px;
}
.rc-logo{
  height:60px;width:auto;                 /* 나인앱 2색 원본(얼굴 남색+글씨) — 이름 앞 인라인 */
  display:block;margin-bottom:3px;margin-right:-6px;        /* 로고 위로 + 오른쪽으로(약간) */
}
@media (min-width:1223px){ .rc-logo{margin-bottom:6.5px} }   /* 전체화면(h2 clamp 최대 44px)에서만 로고 3.5px 더 위로 */

/* ── 아크 뷰포트 (풀블리드 · 좌우 페이드 마스크) ── */
.rc-viewport{
  position:relative;
  width:100%;
  cursor:grab;
  touch-action:pan-y;           /* 세로 스크롤은 페이지에, 가로 스와이프는 카드 넘김에 */
  user-select:none;-webkit-user-select:none;
  /* 좌·우 끝 사라짐 = 마스크 그라데이션(세로 크롭 아님). 잉크본 .viewport 원형 8%/92% */
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.rc-viewport.is-dragging{cursor:grabbing}
@media (hover:none){.rc-viewport{cursor:default}}

.rc-track{
  display:flex;
  width:max-content;
  gap:clamp(18px,2.4vw,30px);
  /* 세로 잘림 방지 = 트랙 세로 패딩으로 원호 처짐(sag) 이동분 흡수(잉크본 .track 방식,
     overflow로 자르지 않음). 처짐은 아래로 크므로 하단을 넉넉히. */
  padding:44px clamp(20px,4vw,48px) 120px;
}

/* ── 카드 — 전 카드 동일 프레임(교육부장관상 원비율 1.225:1 = 735/600 통일) ── */
.rc-card{
  position:relative;flex:0 0 auto;
  height:clamp(178px,22vh,246px);
  aspect-ratio:735/600;            /* 폭=높이×1.225 → 전 카드 폭·높이 동일 */
  border-radius:12px;
  overflow:hidden;
  background:var(--card);
  box-shadow:0 18px 40px -22px rgba(10,11,15,.45);
  /* transform은 JS 아크 엔진이 인라인으로 구동. 호버=그림자 상승만(transform 비충돌) */
  transition:box-shadow .25s ease-out;
  will-change:transform;
}
.rc-card img{
  display:block;width:100%;height:100%;
  object-fit:cover;                /* 프레임 채우고 넘침만 크롭(비율 유지, 배너·인증서·사진 혼합) */
  border-radius:inherit;
  /* 기본 = 흑백 대기. 섹션 진입 시 흑백→컬러 블룸 1회 */
  filter:grayscale(1);
  -webkit-user-drag:none;user-select:none;pointer-events:none;
}
.rc-viewport:hover .rc-card{box-shadow:0 14px 34px -20px rgba(10,11,15,.35)}
.rc-card:hover{box-shadow:0 26px 54px -22px rgba(10,11,15,.55)}

/* 인증서(세로형) = 크롭 대신 축소해 전체 노출 + 사이트 블랙 매트로 빈여백 채움 */
.rc-card.is-cert{background:var(--black,#0a0b0f)}
.rc-card.is-cert img{object-fit:contain;padding:10px;box-sizing:border-box}

/* 진입 블룸: 흑백→컬러, 0.8s ease-out 1회 + 카드별 가벼운 스태거 */
.ref-carousel.is-inview .rc-card img{
  animation:rc-bloom .8s ease-out both;
}
.ref-carousel.is-inview .rc-card:nth-child(1) img{animation-delay:0s}
.ref-carousel.is-inview .rc-card:nth-child(2) img{animation-delay:.07s}
.ref-carousel.is-inview .rc-card:nth-child(3) img{animation-delay:.14s}
.ref-carousel.is-inview .rc-card:nth-child(4) img{animation-delay:.21s}
.ref-carousel.is-inview .rc-card:nth-child(5) img{animation-delay:.28s}
.ref-carousel.is-inview .rc-card:nth-child(6) img{animation-delay:.35s}
.ref-carousel.is-inview .rc-card:nth-child(7) img{animation-delay:.42s}
.ref-carousel.is-inview .rc-card:nth-child(8) img{animation-delay:.49s}
@keyframes rc-bloom{
  0%{filter:grayscale(1) contrast(1.04)}
  100%{filter:grayscale(0) saturate(1.05)}
}

/* ── reduced-motion 폴백 — 아크·스크럽 전부 끄고 정적 가로 스크롤 스트립 ── */
@media (prefers-reduced-motion:reduce){
  .rc-viewport{
    overflow-x:auto;overflow-y:hidden;
    cursor:default;
    -webkit-mask-image:none;mask-image:none;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:thin;
  }
  .rc-track{
    transform:none!important;
    padding-block:clamp(8px,1.2vh,16px);
  }
  .rc-card{transform:none!important}
  .rc-card img{filter:grayscale(0) saturate(1.05)!important;animation:none!important}
}

/* ── 모바일 — 헤더 세로 스택(킥커 위·나인스쿨 블록 아래, 가독 위해 좌정렬), 카드 축소 ── */
@media (max-width:700px){
  .rc-head{
    flex-direction:column;align-items:stretch;gap:14px;
    margin-bottom:clamp(16px,2.2vh,24px);
  }
  .rc-head-l{padding-top:0}
  .rc-sub{margin-top:8px;font-size:13px}
  .rc-head-r{align-items:flex-start;text-align:left}
  .rc-brand{justify-content:flex-start}
  .rc-h2{font-size:clamp(26px,7.4vw,34px)}
  .rc-badges{align-items:flex-start}
  .rc-card{height:170px;border-radius:10px}          /* aspect-ratio 상속 → 폭 208px 동일 */
  .rc-track{gap:16px;padding:30px 20px 76px}         /* 좁은 폭=처짐 작아 하단 여유 축소 */
  .rc-badge{font-size:12px;padding:6px 13px}
  .rc-logo{height:48px}
}