/* ── 강점 목록 «무한 끌기 사진 판» (igrid · 문서 41 · 38 · 2026-10-29) ─────────────────────────────
   기본(스크립트 없음)은 gl-blocks.css 의 «정지 사진 격자»(.why-igrid-list) 다. gl-igrid.js 가 is-igrid-live 를 달면 —
     · 격자는 «보이지 않되 남는다»(아래 .is-igrid-live .why-igrid-list — 낭독 · Tab 초점이 그대로 산다. 판에서 Tab 을 치면 이 링크들로 간다 = 판 밖으로 나가는 길)
     · 판(.why-igrid-stage)이 드러나고 그 안의 평면(.why-igrid-plane · aria-hidden 장식)에 타일이 끝없이 되풀이된다. 자리는 스크립트가 translate 로 준다.
   🔴 휠은 가로채지 않는다 — 이 판 위에서 휠을 굴리면 페이지가 내려간다. 손가락은 touch-action: pan-y(세로 = 페이지 · 가로 = 판).
   🔴 움직이는 것은 transform(평면 하나) 뿐. 색은 역할 토큰만. */
.why-igrid { position: relative; }
.why-igrid.is-igrid-live .why-igrid-list { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; display: block; }
.why-igrid-stage[hidden] { display: none; }
.why-igrid-stage { --gl-igrid-cw: 300px; --gl-igrid-ch: 225px; --gl-igrid-gap: 16px; position: relative; height: var(--gl-igrid-h, min(72vh, 720px)); overflow: hidden;
  border-radius: var(--r-md, 18px); background: var(--surface-2); touch-action: pan-y; user-select: none; -webkit-user-select: none; cursor: grab; outline: none; }
.why-igrid-stage:focus-visible { box-shadow: 0 0 0 3px var(--accent); }
.why-igrid.is-igrid-drag .why-igrid-stage { cursor: grabbing; }
.why-igrid-plane { position: absolute; left: 0; top: 0; width: 100%; height: 100%; transform: translate(var(--gl-igrid-x, 0px), var(--gl-igrid-y, 0px)); will-change: transform; }
.why-igrid-tile { position: absolute; left: 0; top: 0; width: var(--gl-igrid-cw); height: var(--gl-igrid-ch); padding: calc(var(--gl-igrid-gap) / 2); box-sizing: border-box; }
.why-igrid-tile-in { position: relative; width: 100%; height: 100%; border-radius: var(--r-sm, 10px); overflow: hidden; background: var(--surface); box-shadow: var(--shadow-soft); color: inherit; text-decoration: none; display: block; }
.why-igrid-tile-in img { display: block; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.why-igrid-tile-cap { position: absolute; left: 12px; bottom: 12px; max-width: calc(100% - 24px); padding: 6px 11px; border-radius: 999px; background: var(--bg); color: var(--fg-strong);
  font-size: 12.5px; font-weight: 700; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* 가장자리 — 판 바탕색으로 살짝 잠겨 «이어진다» 는 느낌 */
.why-igrid-stage::after { content: ''; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 72px var(--surface-2); border-radius: inherit; }
/* 상하좌우 버튼 — 판 오른쪽 아래 십자. 처음엔 숨김(hidden) · 스크립트가 드러낸다 */
.why-igrid-nav[hidden] { display: none; }
.why-igrid-nav { position: absolute; right: 14px; bottom: 14px; display: grid; grid-template-columns: repeat(3, 38px); grid-template-rows: repeat(3, 38px); gap: 2px; z-index: 2; }
.why-igrid-btn { width: 38px; height: 38px; background: var(--bg); opacity: .92; box-shadow: var(--shadow-soft); }
.why-igrid-btn[data-gl-move="0,-1"] { grid-area: 1 / 2; }
.why-igrid-btn[data-gl-move="-1,0"] { grid-area: 2 / 1; }
.why-igrid-btn[data-gl-move="1,0"] { grid-area: 2 / 3; }
.why-igrid-btn[data-gl-move="0,1"] { grid-area: 3 / 2; }
.why-igrid-hint { position: absolute; right: calc(100% + 14px); bottom: 0; white-space: nowrap; font-size: 12.5px; font-weight: 700; color: var(--muted); padding: 6px 10px; border-radius: 999px; background: var(--bg); opacity: .92; }
@media (max-width: 720px) {
  .why-igrid-stage { --gl-igrid-cw: 190px; --gl-igrid-ch: 142px; --gl-igrid-gap: 10px; height: var(--gl-igrid-h, min(60vh, 520px)); }
  .why-igrid-hint { display: none; }
}
@media (hover: hover) and (pointer: fine) {
  .why-igrid-nav { opacity: .55; transition: opacity .25s ease; }
  .why-igrid:hover .why-igrid-nav, .why-igrid:focus-within .why-igrid-nav { opacity: 1; }
}