/* ═══════════════════════════════════════════════════════════════════════
   커서 따라 사진 자국 — 문서 41 구현 순서 47 (2026-10-29) · 대문(hero) 꾸미기 mods.trail
     <header class="hero" data-gl-trail='["/img/…", …]'>   사진 목록은 이 대문에 이미 넣은 사진 칸(새 데이터 없음)

   커서가 일정 거리를 지날 때마다 사진 한 장이 그 자리에 잠깐 찍혔다 사라진다. 사진 칸은 gl-trail.js 가 몇 장만 만들어 돌려 쓴다.
   🔴 장식이다 — 층 전체가 aria-hidden · 누를 수 없음. 층은 대문의 글 상자(.container · z-index 1) «바로 앞» 에 끼워
      배경 사진 · 가림막 위 · 글 아래에 깔린다(같은 z-index 1 이면 나중 것이 위). 글 · 버튼은 그대로 눌린다.
   🔴 움직이는 것은 transform · opacity 뿐. 고운 포인터만 · «움직임 줄이기» 면 아무것도 그리지 않는다. 스크립트가 없으면 층 자체가 없다.
   ═══════════════════════════════════════════════════════════════════════ */
:root { --gl-trail-dur: .9s; }
[data-gl-trail].gl-trail-on { position: relative; }
.gl-trail { position: absolute; inset: 0; z-index: 1; overflow: hidden; pointer-events: none; }
.gl-trail-img {
  position: absolute; left: 0; top: 0;
  width: var(--gl-trail-w, 180px); aspect-ratio: 4 / 5; object-fit: cover;
  border-radius: var(--r-md, 14px);
  opacity: 0;
  transform: translate(var(--gl-trail-x, 0px), var(--gl-trail-y, 0px)) translate(-50%, -50%) scale(.85);
}
.gl-trail-img.is-a { animation: gl-trail-a var(--gl-trail-dur) cubic-bezier(.2, .7, .3, 1) both; }
.gl-trail-img.is-b { animation: gl-trail-b var(--gl-trail-dur) cubic-bezier(.2, .7, .3, 1) both; }
@keyframes gl-trail-a {
  0%   { opacity: 0; transform: translate(var(--gl-trail-x, 0px), var(--gl-trail-y, 0px)) translate(-50%, -50%) scale(.85); }
  18%  { opacity: 1; transform: translate(var(--gl-trail-x, 0px), var(--gl-trail-y, 0px)) translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(var(--gl-trail-x, 0px), var(--gl-trail-y, 0px)) translate(-50%, -50%) scale(.96); }
}
@keyframes gl-trail-b {
  0%   { opacity: 0; transform: translate(var(--gl-trail-x, 0px), var(--gl-trail-y, 0px)) translate(-50%, -50%) scale(.85); }
  18%  { opacity: 1; transform: translate(var(--gl-trail-x, 0px), var(--gl-trail-y, 0px)) translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(var(--gl-trail-x, 0px), var(--gl-trail-y, 0px)) translate(-50%, -50%) scale(.96); }
}
@media (max-width: 900px) { :root { --gl-trail-w: 130px; } }
@media (prefers-reduced-motion: reduce) {
  .gl-trail { display: none; }
}