/* 리퀴드 버튼 호버 — 문서 41 구현 순서 48 (2026-10-29) · 사이트 설정 site.motion.liquid = "on"

   버튼(.btn · .nav-cta)에 마우스를 올리면 커서가 들어온 자리에서 둥근 원(::before)이 번져 버튼 바탕을 채우고,
   나가면 나간 자리 쪽으로 오므라든다. 자리는 gl-liquid.js 가 변수(--gl-liquid-x · -y)로 적는다 — 스크립트가 없으면 가운데에서 번진다.
   🔴 원 확대 단순판 — SVG goo 필터를 쓰지 않는다(그리기 비쌈). 움직이는 것은 transform(scale) 하나.
   🔴 버튼 안에 요소를 넣지 않는다 — ::before 하나 · 누를 수 없음 · 글 뒤(z-index -1 · isolation). 누름 물결(::after · gl-ripple)과 같이 쓸 수 있다.
   🔴 색은 버튼 글자색(currentColor)을 옅게 섞는다 — 채운 버튼 · 테두리 버튼 · 어두운 띠 어디서나 글자와 대비가 유지된다. 색값을 새로 적지 않는다.
   🔴 키보드 초점(:focus-visible)도 같은 상태 — 가운데에서 번진다. «움직임 줄이기» 는 번지지 않고 색만 바뀐다(전환 없음). */
:root { --gl-liquid-dur: .45s; --gl-liquid-mix: 16%; }
:root[data-gl-liquid="on"] :is(.btn, .nav-cta) { position: relative; overflow: hidden; isolation: isolate; }
:root[data-gl-liquid="on"] :is(.btn, .nav-cta)::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  left: var(--gl-liquid-x, 50%); top: var(--gl-liquid-y, 50%);
  width: 300%; aspect-ratio: 1; border-radius: 50%;
  background: color-mix(in srgb, currentColor var(--gl-liquid-mix), transparent);
  transform: translate(-50%, -50%) scale(0);
  transition: transform var(--gl-liquid-dur) cubic-bezier(.3, .7, .3, 1);
}
@media (hover: hover) {
  :root[data-gl-liquid="on"] :is(.btn, .nav-cta):hover::before { transform: translate(-50%, -50%) scale(1); }
}
:root[data-gl-liquid="on"] :is(.btn, .nav-cta):focus-visible::before { transform: translate(-50%, -50%) scale(1); }
:root[data-gl-liquid="on"] :is(.btn, .nav-cta)[aria-disabled="true"]::before,
:root[data-gl-liquid="on"] :is(.btn, .nav-cta):disabled::before { content: none; }
@media (prefers-reduced-motion: reduce) {
  :root[data-gl-liquid="on"] :is(.btn, .nav-cta)::before { transition: none; }
}