/*!
 * ═══════════════════════════════════════════════════════════════════
 * 📦 Satz Blocks — hover-grid-fill (v1.0.0)
 * ═══════════════════════════════════════════════════════════════════
 *
 * 리스트/그리드 행에 브랜드 컬러 오버레이를 채운 뒤 hover·focus 시 텍스트를 반전시킵니다.
 *
 * ═══════════════════════════════════════════════════════════════════
 * 🎯 Webflow Designer — 필수 3단계 (MUST)
 * ═══════════════════════════════════════════════════════════════════
 *
 * ┌─────────────────────────────────────────────────────────────────┐
 * │ 1️⃣ List Wrapper Attribute 추가                                  │
 * └─────────────────────────────────────────────────────────────────┘
 *
 *   📍 대상: 여러 항목을 감싸는 최상위 Div Block
 *
 *   Designer → Div Block 선택 → Settings → Custom Attributes:
 *   ┌──────────────────────────────────────┐
 *   │ Name:  data-satz                     │
 *   │ Value: hover-grid-fill-list          │
 *   └──────────────────────────────────────┘
 *
 *   💡 역할: 행 컨테이너들의 공통 토큰과 보더를 제어하는 루트 래퍼
 *
 * ┌─────────────────────────────────────────────────────────────────┐
 * │ 2️⃣ Row Attribute 추가 (필수!)                                   │
 * └─────────────────────────────────────────────────────────────────┘
 *
 *   📍 대상: 각 항목을 감싸는 행 Div Block
 *
 *   Designer → 행 Div Block 선택 → Custom Attributes:
 *   ┌──────────────────────────────────────┐
 *   │ Name:  data-satz                     │
 *   │ Value: hover-grid-fill               │
 *   └──────────────────────────────────────┘
 *
 *   💡 역할: hover/focus 시 오버레이와 텍스트 컬러가 전환되는 실제 대상
 *
 * ┌─────────────────────────────────────────────────────────────────┐
 * │ 3️⃣ Variant Attribute 설정 (선택)                                │
 * └─────────────────────────────────────────────────────────────────┘
 *
 *   📍 대상: 2️⃣에서 지정한 행 Div Block
 *
 *   채움 진행 방향을 바꾸려면 다음 속성을 추가하세요:
 *   ┌──────────────────────────────────────┐
 *   │ Name:  data-satz-variant             │
 *   │ Value: ttb | btt | ltr | rtl         │
 *   └──────────────────────────────────────┘
 *
 *   💡 역할: 오버레이의 전개 축과 원점을 제어 (기본값: ttb)
 *
 * ═══════════════════════════════════════════════════════════════════
 * 📐 구조 예시 (Webflow Navigator)
 * ═══════════════════════════════════════════════════════════════════
 *
 *   Div Block [data-satz="hover-grid-fill-list"]  ← 리스트 래퍼
 *     ├─ Div Block [data-satz="hover-grid-fill"]  ← 행 1
 *     │  └─ Link Block                                  ← 콘텐츠
 *     └─ Div Block [data-satz="hover-grid-fill"]  ← 행 2
 *        └─ Link Block                                  ← 콘텐츠
 */

/* 🎨 Theme tokens — update these four values to restyle hover-out vs hover-in states. */
:root {
  /* Hover-out (기본 상태) */
  --hover-out-bg: #FFFFFF;
  /* 기본 배경색 */
  --hover-out-text: #000000;
  /* 기본 텍스트색 */

  /* Hover-in (오버레이 상태) */
  --hover-in-bg: #000000;
  /* hover/focus 시 채워지는 배경색 */
  --hover-in-text: #FFFFFF;
  /* hover/focus 시 텍스트색 */

  --hover-bg: var(--hover-out-bg);
  --hover-text: var(--hover-out-text);
  --hover-fill: var(--hover-in-bg);
  --hover-text-on-fill: var(--hover-in-text);
  --hover-border: color-mix(in srgb,
      var(--hover-out-bg) 70%,
      var(--hover-out-text) 30%);
  --hover-border-width: 0;
  --hover-duration: 0.48s;
  --hover-ease: cubic-bezier(0.2, 0.6, 0.1, 1);
}

[data-satz="hover-grid-fill-list"],
.hover-grid

/* @deprecated: .hover-grid */
  {
  display: grid;
  border-top: var(--hover-border-width) solid var(--hover-border);
}

[data-satz="hover-grid-fill"],
.hover-item

/* @deprecated: .hover-item */
  {
  --_hover-bg: var(--hover-bg);
  --_hover-text: var(--hover-text);
  --_hover-border: var(--hover-border);
  --_hover-fill: var(--hover-fill);
  --_hover-text-on-fill: var(--hover-text-on-fill,
      var(--hover-in-text, var(--_hover-text)));
  --_hover-duration: var(--hover-duration);
  --_hover-ease: var(--hover-ease);
  --_hover-border-width: var(--hover-border-width, 1px);

  --_overlay-transform: scaleY(0);
  --_overlay-transform-active: scaleY(1);
  --_overlay-origin: top;

  position: relative;
  display: grid;
  align-items: center;
  border-bottom: var(--_hover-border-width) solid var(--_hover-border);
  color: var(--_hover-text);
  background: var(--_hover-bg);
  overflow: hidden;
  isolation: isolate;
  transition: color var(--_hover-duration) var(--_hover-ease);
}

:is([data-satz="hover-grid-fill"], .hover-item)::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--_hover-fill);
  transform: var(--_overlay-transform);
  transform-origin: var(--_overlay-origin);
  transition: transform var(--_hover-duration) var(--_hover-ease);
  z-index: 0;
  will-change: transform;
}

:is([data-satz="hover-grid-fill"], .hover-item)>* {
  position: relative;
  z-index: 1;
  color: var(--_hover-text);
  transition: color var(--_hover-duration) var(--_hover-ease);
}

:is([data-satz="hover-grid-fill"], .hover-item):is( :hover,
  :focus-visible,
  :focus-within)::before {
  transform: var(--_overlay-transform-active);
}

:is([data-satz="hover-grid-fill"], .hover-item):is( :hover,
  :focus-visible,
  :focus-within) {
  color: var(--_hover-text-on-fill);
  border-bottom-color: var(--_hover-fill);
}

:is([data-satz="hover-grid-fill"], .hover-item):is( :hover,
  :focus-visible,
  :focus-within)>* {
  color: var(--_hover-text-on-fill);
}

:is([data-satz="hover-grid-fill"], .hover-item):has(+ :is([data-satz="hover-grid-fill"], .hover-item):is( :hover,
    :focus-visible,
    :focus-within)) {
  border-bottom-color: var(--_hover-fill);
}

[data-satz="hover-grid-fill-list"]:has( :is([data-satz="hover-grid-fill"], .hover-item):is( :hover,
    :focus-visible,
    :focus-within)),
.hover-grid:has( :is([data-satz="hover-grid-fill"], .hover-item):is( :hover,
    :focus-visible,
    :focus-within)) {
  border-top-color: var(--hover-fill);
}

:is([data-satz="hover-grid-fill"], .hover-item)[data-satz-variant="ttb"] {
  --_overlay-transform: scaleY(0);
  --_overlay-transform-active: scaleY(1);
  --_overlay-origin: top;
}

:is([data-satz="hover-grid-fill"], .hover-item)[data-satz-variant="btt"] {
  --_overlay-transform: scaleY(0);
  --_overlay-transform-active: scaleY(1);
  --_overlay-origin: bottom;
}

:is([data-satz="hover-grid-fill"], .hover-item)[data-satz-variant="ltr"] {
  --_overlay-transform: scaleX(0);
  --_overlay-transform-active: scaleX(1);
  --_overlay-origin: left;
}

:is([data-satz="hover-grid-fill"], .hover-item)[data-satz-variant="rtl"] {
  --_overlay-transform: scaleX(0);
  --_overlay-transform-active: scaleX(1);
  --_overlay-origin: right;
}

@media (prefers-reduced-motion: reduce) {
  :is([data-satz="hover-grid-fill"], .hover-item) {
    transition: none;
  }

  :is([data-satz="hover-grid-fill"], .hover-item)::before {
    transition: none;
    transform: var(--_overlay-transform);
    will-change: auto;
  }

  :is([data-satz="hover-grid-fill"], .hover-item)>* {
    transition: none;
  }
}