/* ═══════════════════════════════════════════════════════════════════════
   카드 조명 · 카드 기울기 — 문서 41 구현 순서 12 (spot) · 13 (tilt) · 위젯 꾸미기 mods.spot · mods.tilt

   렌더러가 위젯 맨 앞 태그에 data-gl-spot · data-gl-tilt 와 변수(--gl-spot-a 진하기 · --gl-tilt-max 최대 각도)를 얹고,
   gl-spot.js 가 커서 자리를 카드의 변수로 쓴다. 그리는 것은 전부 여기다.

   «카드» 는 엔진의 카드 칸 여섯 — 강점 목록(.why-item) · 숫자 세기(.stat-card) · 사례 · 게시판 카드(.gcard · .gtile) ·
   소식 카드(.card) · 사업 카드(.biz-card). 새 카드 칸을 만들면 이 목록과 gl-spot.js 의 CARDS 에 함께 더한다.

   🔴 색은 테마 토큰(--accent)만 — 밝은 · 어두운 화면이 모드 칸을 따라 함께 바뀐다.
   🔴 움직이는 것 — 조명은 덮개(::after)의 opacity, 기울기는 rotate(개별 속성) 하나. 크기 · 자리는 안 바뀐다.
      transform 을 쓰지 않는 까닭: 등장 효과(gl-scroll.css)가 카드의 transform 을 애니메이션으로 쥐고 있어 덮어쓰면 등장이 깨지고,
      애니메이션이 쥔 값은 일반 규칙이 못 이긴다. rotate 는 다른 칸이라 둘이 겹쳐 곱해진다.
   🔴 고운 포인터(마우스)에서만 비춘다 · 기운다. 키보드 초점은 마우스 올림과 같은 상태다(조명은 가운데 · 살짝 들림).
      «움직임 줄이기» — 조명은 커서를 따라가지 않고 가운데에 서고(gl-spot.js 가 듣지 않는다), 기울기는 없다.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── 조명 (spot) ───────────────────────────────────────────────────── */
[data-gl-spot] :is(.why-item, .stat-card, .gcard, .gtile, .card, .biz-card) { position: relative; }
[data-gl-spot] :is(.why-item, .stat-card, .gcard, .gtile, .card, .biz-card)::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(var(--gl-spot-r, 320px) circle at var(--gl-spot-x, 50%) var(--gl-spot-y, 50%),
    color-mix(in srgb, var(--accent) var(--gl-spot-a, 18%), transparent), transparent 72%);
  opacity: 0;
  transition: opacity .35s var(--ease, ease);
}
@media (hover: hover) and (pointer: fine) {
  [data-gl-spot] :is(.why-item, .stat-card, .gcard, .gtile, .card, .biz-card):hover::after { opacity: 1; }
}
[data-gl-spot] :is(.why-item, .stat-card, .gcard, .gtile, .card, .biz-card):focus-visible::after { opacity: 1; }

/* ── 기울기 (tilt) ─────────────────────────────────────────────────── */
/* 원근은 격자가 준다(perspective) — 소실점은 gl-spot.js 가 지금 기운 카드의 한가운데로 옮긴다 */
[data-gl-tilt] :is(.why-grid, .stats-grid, .gallery-grid, .biz-grid) { perspective: 1100px; }
[data-gl-tilt] :is(.why-item, .stat-card, .gcard, .gtile, .card, .biz-card) { backface-visibility: hidden; }
[data-gl-tilt] .gl-tilting {
  rotate: var(--gl-tilt-ax, 1) var(--gl-tilt-ay, 0) 0 var(--gl-tilt-a, 0deg);
  will-change: rotate;
}
@media (prefers-reduced-motion: no-preference) {
  [data-gl-tilt] :is(a.why-item, a.gcard, a.gtile, a.card, a.biz-card):focus-visible:not(.gl-tilting) {
    rotate: 1 0 0 calc(var(--gl-tilt-max, 5deg) * .5);
  }
}

/* ── 움직임 줄이기 ─────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  [data-gl-spot] :is(.why-item, .stat-card, .gcard, .gtile, .card, .biz-card)::after { transition: none; }
  [data-gl-tilt] :is(.why-item, .stat-card, .gcard, .gtile, .card, .biz-card),
  [data-gl-tilt] .gl-tilting { rotate: none; will-change: auto; }
}