/*
 * 홈 합격자 인터뷰 롤링 — 시안에 없는 테마 통합용
 *
 * 시안은 카드 4장을 .grid 격자로 깔았다. 게시판 최신 글 16개를 옆으로 흘리려고
 * .pass-viewport(가림 틀) > .pass-track(줄) 로 바꿨다. 움직임은 js/renew-main.js 가
 * --pass-i(맨 왼쪽 카드 번호)만 바꾸고, 거리 계산은 여기서 한다.
 *
 * 한 화면 카드 수(--pass-per)는 기존 격자와 같다: PC 4 / 1000px 이하 2 / 520px 이하 1
 */
.pass{--pass-per:4;--pass-gap:24px}
@media (max-width:1000px){.pass{--pass-per:2;--pass-gap:22px}}
@media (max-width:767px){.pass{--pass-gap:1rem}}
@media (max-width:520px){.pass{--pass-per:1}}

/* 카드 그림자가 잘리지 않게 틀을 바깥으로 넓힌다. 좌우 여백은 카드 간격보다 작아야
   옆 카드가 비치지 않는다. */
.pass-viewport{overflow:hidden;margin:-12px -12px -28px;padding:12px 12px 28px}
.pass-track{display:flex;gap:var(--pass-gap);touch-action:pan-y;
  transform:translate3d(calc(var(--pass-i,0) * -1 * (100% + var(--pass-gap)) / var(--pass-per)),0,0);
  transition:transform .6s cubic-bezier(.22,.61,.36,1)}
.pass-track.is-jump{transition:none}
.pass-track.is-static .is-clone{display:none}
.pass-track>.card{flex:0 0 calc((100% - (var(--pass-per) - 1) * var(--pass-gap)) / var(--pass-per));min-width:0}
@media (prefers-reduced-motion:reduce){.pass-track{transition:none}}

/* 글마다 길이가 달라 카드 높이가 들쭉날쭉하지 않게 줄 수를 묶는다 */
.pass-track h3{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;letter-spacing:-0.08em;word-break:keep-all}   /* 글 제목 끝 '합격' 이 한 글자만 다음 줄로 넘어가지 않게 (keep-all : 낱말 중간에서 줄을 바꾸지 않는다) */
.pass-track p{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}

/* 사진이 없는 글 */
.pass .av{display:flex;align-items:center;justify-content:center}
.pass-av-empty{width:55%;height:55%;fill:none;stroke:var(--blue);stroke-width:1.6;stroke-linecap:round}

.pass .arrows[hidden]{display:none}