/* ═══════════════════════════════════════════════════════════════════════
   역방향 스크롤 기둥 — 문서 41 구현 순서 44 (2026-10-29) · 모양 «역방향 기둥»(revcol)
     강점 목록(feature-list)  <div class="why-grid gl-revcol-list" data-gl-revcol>  — 렌더러가 칸을 그린다
     사례 목록(case-list)     <div class="gallery-grid" data-gl-revcol>            — gl-board.js 가 «사진 격자»(gtiles)로 채운다

   사진이 세 기둥(3열 격자)으로 서고, 스크롤하면 가운데 기둥 — 3n+2 번째 칸 — 만 반대 방향으로 흐른다.
   🔴 스크립트가 없다. CSS 스크롤 연동(view-timeline)이 격자가 화면을 지나가는 동안 가운데 칸들의 translate 하나를 옮긴다.
      스크롤을 가로채지 않는다 — 페이지는 늘 하던 대로 내려가고, 가운데 칸만 반대로 움직여 보인다.
   🔴 움직이는 것은 translate(개별 속성) 하나 — 등장 효과(transform) · 카드 기울기(rotate)와 칸이 다르다.
      높이를 재지 않는다 — 크기가 바뀌어도 다시 잴 것이 없다(흐르는 거리는 화면 높이 비례 변수 하나).
   🔴 폴백 — 이것을 모르는 브라우저(@supports 밖) · 휴대폰과 태블릿(900px 이하, 2열) · «움직임 줄이기» 는 흐르지 않는 사진 격자 그대로다.
   색은 테마 토큰만.
   ═══════════════════════════════════════════════════════════════════════ */

[data-gl-revcol] { --gl-revcol-d: clamp(48px, 10vh, 140px); }

/* 정지 모양(세 기둥 격자 · 칸)은 gl-blocks.css 의 «역방향 기둥 (revcol)» 절(.gl-t-revcol)에 있다 — 이 파일은 흐름만 */

/* ── 흐름 — 지원 브라우저 · 넓은 화면 · 움직임 줄이기가 아닐 때만 ───────── */
@supports (view-timeline: --gl-revcol) and (animation-timeline: --gl-revcol) {
  @media (min-width: 901px) and (prefers-reduced-motion: no-preference) {
    [data-gl-revcol] {
      view-timeline: --gl-revcol block;
      /* 가운데 기둥이 격자 위아래로 넘치는 만큼만 자른다(옆으로는 자르지 않는다 — 초점 테두리 · 그림자) */
      overflow-y: clip;
      overflow-clip-margin: 6px;
    }
    [data-gl-revcol] > :nth-child(3n+2) {
      animation: gl-revcol linear both;
      animation-timeline: --gl-revcol;
      animation-range: cover 0% cover 100%;
    }
  }
}
@keyframes gl-revcol {
  from { translate: 0 calc(var(--gl-revcol-d) * -1); }
  to   { translate: 0 var(--gl-revcol-d); }
}
@media (prefers-reduced-motion: reduce) {
  [data-gl-revcol] > * { animation: none; translate: none; }
}