/* ═══════════════════════════════════════════════════════════════════════
   올리면 사진 미리보기 — 문서 41 구현 순서 46 (2026-10-29) · 목록형 위젯 꾸미기 mods.hoverpv
     <section data-gl-hoverpv>  사례 목록 · 소식 목록 · 게시판

   글(링크)에 마우스를 올리면 그 글의 대표 사진이 커서 옆 한 장짜리 미리보기(.gl-hoverpv)에 떠서 따라다닌다.
   미리보기는 gl-hoverpv.js 가 화면에 하나만 만든다(aria-hidden · 누를 수 없음). 자리는 transform 하나 · 나타남은 opacity · scale.
   🔴 사진이 있는 글만 · 고운 포인터(마우스)만. 키보드 초점 · 터치 · «움직임 줄이기» 에서는 뜨지 않는다 — 글은 늘 보통 링크다.
   🔴 색은 테마 토큰만.
   ═══════════════════════════════════════════════════════════════════════ */
.gl-hoverpv {
  position: fixed; left: 0; top: 0; z-index: 80;
  width: var(--gl-hoverpv-w, 240px); aspect-ratio: 4 / 3;
  overflow: hidden; pointer-events: none;
  border-radius: var(--r-md, 14px);
  background: var(--surface-2);
  box-shadow: 0 18px 44px color-mix(in srgb, var(--fg-strong) 24%, transparent);
  opacity: 0; scale: .9;
  transition: opacity .2s var(--ease, ease), scale .2s var(--ease, ease);
  will-change: transform, opacity;
}
.gl-hoverpv.is-on { opacity: 1; scale: 1; }
.gl-hoverpv img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 900px) { .gl-hoverpv { --gl-hoverpv-w: 200px; } }
@media (hover: none), (pointer: coarse), (prefers-reduced-motion: reduce) {
  .gl-hoverpv { display: none; }
}