/**
 * 연출 공용층(fx) 2/3: 빛과 면 - 카드 뒤 광채 · 유리 면 · 배경 장식 · 포인터 빛 · 알약 버튼 · 그라디언트 글 · 지금 블록에 얹는 층.
 * 색 규칙 · 관문(html.nx-js) 은 fx.css 머리말과 같다.
 */

/* ── 광채 카드(FxGlowCard) ───────────────────────────────────────
   겉(.nxfx-glow) = 들림 / 뒤(.__aura) = 색 광채 / 면(.__body) = 유리 광택 + 호버 안쪽 빛 / 테(.__edge) = 빛 테두리 */
.nxfx-glow {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  min-width: 0;
  transition: transform 0.5s var(--nxfx-ease);
}
@supports (color: oklch(from red l c h)) {
  .nxfx-glow {
    /* 카드마다 색상각만 살짝 돌린다(밝기 · 채도는 사이트 강조색 그대로 - 새 색을 지어내지 않는다) */
    --nxfx-c: oklch(from var(--accent) l c calc(h + var(--nxfx-hue, 0)));
  }
}
.nxfx-glow__aura {
  position: absolute;
  inset: var(--nxfx-aura-inset);
  z-index: -1;
  pointer-events: none;
  border-radius: 48px;
  opacity: var(--nxfx-aura-o);
  filter: blur(var(--nxfx-aura-blur));
  transform: scale(0.9);
  transition:
    opacity 0.6s var(--nxfx-ease-out),
    transform 0.7s var(--nxfx-ease);
}
.nxfx-glow__aura::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(
    circle at center,
    var(--nxfx-c) 0%,
    color-mix(in srgb, var(--nxfx-c) 52%, transparent) 38%,
    color-mix(in srgb, var(--nxfx-c) 18%, transparent) 62%,
    transparent 80%
  );
}
html.nx-js .nxfx-glow--breathe .nxfx-glow__aura::before {
  animation: nxfxBreath 8s ease-in-out infinite;
  animation-delay: calc(var(--nxfx-i, 0) * -1.6s);
}
@keyframes nxfxBreath {
  0%, 100% { opacity: 0.55; }
  50% { opacity: 1; }
}
.nxfx-glow__body {
  position: relative;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: var(--nx-card-pad-sm, 24px);
  border-radius: var(--nx-radius, 20px);
  border: 1px solid var(--nxfx-border);
  background-color: var(--nxfx-surface);
  box-shadow:
    0 1px 2px color-mix(in srgb, var(--foreground) 5%, transparent),
    0 16px 36px -24px color-mix(in srgb, var(--nxfx-c) var(--nxfx-rest-shadow-p), transparent);
  transition:
    border-color 0.45s var(--nxfx-ease-out),
    box-shadow 0.55s var(--nxfx-ease-out);
}
.nxfx-glow--roomy > .nxfx-glow__body {
  padding: var(--nx-card-pad, 32px);
}
.nxfx-glow--flush > .nxfx-glow__body {
  padding: 0;
}
/* 유리 광택(왼쪽 위에서 떨어지는 빛) */
.nxfx-glow__body::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(135% 82% at 12% 0%, var(--nxfx-sheen-c), transparent 54%);
}
/* 호버 때 안쪽이 밝아지는 면 */
.nxfx-glow__body::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  mix-blend-mode: var(--nxfx-fill-blend);
  background: radial-gradient(
    circle at 50% 52%,
    color-mix(in srgb, var(--nxfx-c) var(--nxfx-fill-p), transparent) 0%,
    color-mix(in srgb, var(--nxfx-c) calc(var(--nxfx-fill-p) * 0.5), transparent) 38%,
    color-mix(in srgb, var(--nxfx-c) calc(var(--nxfx-fill-p) * 0.17), transparent) 60%,
    transparent 78%
  );
  transition: opacity 0.45s var(--nxfx-ease-out) 0.075s;
}
:where(.nxfx-glow__body) > :where(*) {
  position: relative;
  z-index: 1;
}
.nxfx-glow__edge {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  border-radius: var(--nx-radius, 20px);
  opacity: 0;
  box-shadow:
    inset 0 0 0 1.5px color-mix(in srgb, var(--nxfx-c) var(--nxfx-edge-p), transparent),
    0 0 84px -14px color-mix(in srgb, var(--nxfx-c) var(--nxfx-halo-p), transparent);
  transition: opacity 0.55s var(--nxfx-ease-out);
}
/* 카드 안 제목 · 화살표(호버 묶음이 함께 움직인다) */
.nxfx-title {
  transition:
    color 0.45s var(--nxfx-ease-out),
    text-shadow 0.45s var(--nxfx-ease-out);
}
.nxfx-arrow {
  display: inline-block;
  flex: none;
  width: 1.1em;
  height: 1.1em;
  transition: transform 0.45s var(--nxfx-ease);
}
@media (hover: hover) {
  .nxfx-glow--lift:hover {
    z-index: 1;
    transform: translate3d(0, calc(var(--nxfx-lift, 8px) * -1), 0) scale(1.012);
  }
  .nxfx-glow:hover > .nxfx-glow__aura {
    opacity: var(--nxfx-aura-o-h);
    transform: scale(1.08);
  }
  .nxfx-glow:hover > .nxfx-glow__body {
    border-color: color-mix(in srgb, var(--nxfx-c) 46%, transparent);
    box-shadow:
      0 2px 4px color-mix(in srgb, var(--foreground) 6%, transparent),
      0 30px 64px -30px color-mix(in srgb, var(--nxfx-c) calc(var(--nxfx-rest-shadow-p) * 1.7), transparent);
  }
  .nxfx-glow:hover > .nxfx-glow__body::after,
  .nxfx-glow:hover > .nxfx-glow__edge {
    opacity: 1;
  }
  .nxfx-glow:hover .nxfx-title {
    color: var(--nxfx-title-on);
    text-shadow: var(--nxfx-title-glow);
  }
  .nxfx-glow:hover .nxfx-arrow,
  .nxfx-btn:hover .nxfx-arrow {
    transform: translate3d(5px, 0, 0);
  }
}
.nxfx-glow:focus-within > .nxfx-glow__aura {
  opacity: var(--nxfx-aura-o-h);
  transform: scale(1.08);
}
.nxfx-glow:focus-within > .nxfx-glow__body::after,
.nxfx-glow:focus-within > .nxfx-glow__edge {
  opacity: 1;
}
.nxfx-glow:focus-within .nxfx-title {
  color: var(--nxfx-title-on);
}
/* 손가락: 누르는 순간의 반응(폰에서도 남긴다) */
@media (hover: none) {
  .nxfx-glow:active {
    transform: scale(0.985);
  }
  .nxfx-glow:active > .nxfx-glow__edge,
  .nxfx-glow:active > .nxfx-glow__body::after {
    opacity: 1;
    transition-duration: 0.12s;
    transition-delay: 0s;
  }
  .nxfx-glow:active > .nxfx-glow__aura {
    opacity: var(--nxfx-aura-o-h);
  }
}

/* ── 장면(FxScene) + 배경 장식(FxBackdrop) ──────────────────────── */
.nxfx-scene {
  position: relative;
  isolation: isolate;
  background-color: var(--background);
}
.nxfx-scene--alt {
  background-color: var(--muted, var(--background));
}
.nxfx-scene--deep {
  background-color: var(--nx-deep, var(--foreground));
  color: var(--nx-on-deep, var(--background));
}
/* 지금 블록을 감쌀 때: 블록의 본문 바탕만 비워 장식이 비치게 한다(블록 구조 · 글은 그대로) */
.nxfx-scene--live section[class*="bg-background"] {
  background-color: transparent !important;
}
.nxfx-bd {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}
.nxfx-bd__grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--nxfx-grid-c) 1px, transparent 1px),
    linear-gradient(90deg, var(--nxfx-grid-c) 1px, transparent 1px);
  background-size: 64px 64px;
  background-position: center top;
  -webkit-mask-image: radial-gradient(ellipse 82% 72% at 50% 38%, #000 18%, transparent 78%);
  mask-image: radial-gradient(ellipse 82% 72% at 50% 38%, #000 18%, transparent 78%);
}
.nxfx-bd__aura {
  position: absolute;
  left: -14%;
  top: -30%;
  width: 62%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--accent) var(--nxfx-bd-aura-p), transparent), transparent);
  opacity: 0.8;
}
.nxfx-bd__aura--b {
  left: auto;
  top: auto;
  right: -16%;
  bottom: -38%;
  width: 56%;
  background: radial-gradient(
    closest-side,
    color-mix(in srgb, color-mix(in srgb, var(--accent) 60%, var(--foreground)) var(--nxfx-bd-aura-p), transparent),
    transparent
  );
}
html.nx-js .nxfx-bd__aura {
  animation: nxfxAura 8s ease-in-out infinite;
}
html.nx-js .nxfx-bd__aura--b {
  animation-duration: 11s;
  animation-delay: -4s;
}
@keyframes nxfxAura {
  0%, 100% { opacity: 0.5; transform: scale(1) translate3d(0, 0, 0); }
  50% { opacity: 1; transform: scale(1.08) translate3d(2%, 3%, 0); }
}
.nxfx-bd__streak {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--nxfx-x, 50%);
  width: 1px;
  overflow: hidden;
  background: linear-gradient(180deg, transparent, var(--nxfx-grid-c) 18%, var(--nxfx-grid-c) 82%, transparent);
}
.nxfx-bd__streak::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 34%;
  background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--accent) 78%, transparent), transparent);
  transform: translate3d(0, -110%, 0);
  opacity: 0;
}
html.nx-js .nxfx-bd__streak::after {
  opacity: 1;
  animation: nxfxFlowY var(--nxfx-t, 9s) linear infinite;
  animation-delay: var(--nxfx-dl, 0s);
}
@keyframes nxfxFlowY {
  from { transform: translate3d(0, -110%, 0); }
  to { transform: translate3d(0, 400%, 0); }
}
/* 가벼운 우주 톤: 색 틴트 세 곳 + 점 몇 개(CSS 만 · 캔버스 없음) */
.nxfx-bd__cosmic {
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(2.4px 2.4px at 9% 18%, var(--nxfx-star) 50%, transparent 54%),
    radial-gradient(1.8px 1.8px at 23% 64%, var(--nxfx-star) 50%, transparent 54%),
    radial-gradient(3px 3px at 37% 28%, var(--nxfx-star) 50%, transparent 54%),
    radial-gradient(1.8px 1.8px at 52% 82%, var(--nxfx-star) 50%, transparent 54%),
    radial-gradient(2.4px 2.4px at 64% 14%, var(--nxfx-star) 50%, transparent 54%),
    radial-gradient(1.8px 1.8px at 76% 56%, var(--nxfx-star) 50%, transparent 54%),
    radial-gradient(3px 3px at 88% 30%, var(--nxfx-star) 50%, transparent 54%),
    radial-gradient(1.8px 1.8px at 93% 78%, var(--nxfx-star) 50%, transparent 54%),
    radial-gradient(2.4px 2.4px at 45% 46%, var(--nxfx-star) 50%, transparent 54%),
    radial-gradient(44% 56% at 14% 10%, color-mix(in srgb, var(--accent) var(--nxfx-cosmic-p), transparent), transparent 70%),
    radial-gradient(40% 50% at 88% 20%, color-mix(in srgb, color-mix(in srgb, var(--accent) 55%, var(--foreground)) var(--nxfx-cosmic-p), transparent), transparent 70%),
    radial-gradient(56% 48% at 54% 104%, color-mix(in srgb, var(--accent) var(--nxfx-cosmic-p), transparent), transparent 72%);
  opacity: 0.9;
}
/* 두 번째 점 무리 - 첫 무리와 엇박으로 깜빡여 반짝임이 난다 */
.nxfx-bd__cosmic::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(2px 2px at 5% 72%, var(--nxfx-star) 50%, transparent 54%),
    radial-gradient(2.6px 2.6px at 16% 40%, var(--nxfx-star) 50%, transparent 54%),
    radial-gradient(1.8px 1.8px at 30% 86%, var(--nxfx-star) 50%, transparent 54%),
    radial-gradient(2.2px 2.2px at 42% 10%, var(--nxfx-star) 50%, transparent 54%),
    radial-gradient(1.8px 1.8px at 58% 36%, var(--nxfx-star) 50%, transparent 54%),
    radial-gradient(2.6px 2.6px at 70% 88%, var(--nxfx-star) 50%, transparent 54%),
    radial-gradient(2px 2px at 82% 8%, var(--nxfx-star) 50%, transparent 54%),
    radial-gradient(1.8px 1.8px at 96% 48%, var(--nxfx-star) 50%, transparent 54%);
  opacity: 0.7;
}
html.nx-js .nxfx-bd__cosmic {
  animation: nxfxCosmic 9s ease-in-out infinite;
}
html.nx-js .nxfx-bd__cosmic::after {
  animation: nxfxTwinkle 5.5s ease-in-out infinite;
}
@keyframes nxfxCosmic {
  0%, 100% { opacity: 0.62; }
  50% { opacity: 1; }
}
@keyframes nxfxTwinkle {
  0%, 100% { opacity: 0.15; }
  50% { opacity: 1; }
}

/* ── 포인터를 따라다니는 빛(FxPointerGlow · PC 전용) ──────────────── */
.nxfx-ptr {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0;
  border-radius: inherit;
  background: radial-gradient(
    var(--nxfx-pr, 480px) circle at var(--nxfx-mx, 50%) var(--nxfx-my, 50%),
    var(--nxfx-ptr-c),
    transparent 72%
  );
  transition: opacity 0.5s var(--nxfx-ease-out);
}
.nxfx-ptr--over {
  z-index: 1;
}
.nxfx-glow__body > .nxfx-ptr {
  z-index: 0;
}
.nxfx-ptr.nxfx-on {
  opacity: 1;
}

/* ── 알약 버튼(FxButton) + 뒤 광채 ──────────────────────────────── */
.nxfx-btn {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  max-width: 100%;
  border-radius: 999px;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.45s var(--nxfx-ease);
}
.nxfx-btn__glow {
  position: absolute;
  inset: 8px 12px -8px;
  z-index: -1;
  pointer-events: none;
  border-radius: 999px;
  background: var(--accent);
  filter: blur(18px);
  opacity: var(--nxfx-btn-glow-o);
  transition:
    opacity 0.45s var(--nxfx-ease-out),
    transform 0.45s var(--nxfx-ease);
}
.nxfx-btn__face {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  min-height: 52px;
  padding: 0 1.75em;
  overflow: hidden;
  border-radius: 999px;
  border: 1px solid transparent;
  background-color: var(--accent);
  color: var(--cta-ink, var(--background));
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
  transition:
    background-color 0.45s var(--nxfx-ease-out),
    border-color 0.45s var(--nxfx-ease-out);
}
.nxfx-btn__face::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(180deg, var(--nxfx-btn-sheen), transparent 56%);
  opacity: 0.55;
}
.nxfx-btn__face > :where(:not(.nxfx-sweep)) {
  position: relative;
  z-index: 3;
}
.nxfx-btn--lg .nxfx-btn__face {
  min-height: 60px;
  padding: 0 2.1em;
  font-size: 1.0625rem;
}
.nxfx-btn--ghost .nxfx-btn__glow {
  opacity: 0;
}
.nxfx-btn--ghost .nxfx-btn__face {
  background-color: color-mix(in srgb, var(--accent) 8%, transparent);
  border-color: color-mix(in srgb, var(--accent) 46%, transparent);
  /* 링크 기본색을 물려받지 않게 사이트 글자색으로 고정 - 사진 위에서는 감싼 요소에 --nxfx-ghost-ink 를 준다 */
  color: var(--nxfx-ghost-ink, var(--foreground));
}
.nxfx-btn--ghost .nxfx-btn__face::before {
  opacity: 0.25;
}
@media (hover: hover) {
  .nxfx-btn:hover {
    transform: translate3d(0, -3px, 0) scale(1.02);
  }
  .nxfx-btn:hover .nxfx-btn__glow {
    opacity: 0.95;
    transform: scale(1.08);
  }
  .nxfx-btn--ghost:hover .nxfx-btn__glow {
    opacity: 0.4;
  }
  .nxfx-btn--ghost:hover .nxfx-btn__face {
    background-color: color-mix(in srgb, var(--accent) 16%, transparent);
    border-color: var(--accent);
  }
}
.nxfx-btn:active {
  transform: scale(0.97);
  transition-duration: 0.12s;
}
.nxfx-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}

/* ── 그라디언트 글(FxGradientText) ─────────────────────────────── */
.nxfx-grad {
  color: var(--nxfx-grad-a);
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .nxfx-grad {
    background-image: linear-gradient(100deg, var(--nxfx-grad-a) 0%, var(--nxfx-grad-b) 50%, var(--nxfx-grad-a) 100%);
    background-size: 220% 100%;
    background-position: 0% 50%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    /* 받침 아래 획 · 기울어진 글꼴이 잘리지 않게 */
    padding-bottom: 0.08em;
  }
  html.nx-js .nxfx-grad--shine {
    animation: nxfxShine 7s linear infinite;
  }
}
@keyframes nxfxShine {
  from { background-position: 0% 50%; }
  to { background-position: -220% 50%; }
}

/* ── 지금 블록에 얹는 층(FxLive): 블록 마크업은 그대로, 손 반응 · 빛만 ─ */
.nxfx-live {
  position: relative;
}
.nxfx-live--hover .hm-pcard {
  position: relative;
  transition:
    transform 0.5s var(--nxfx-ease),
    border-color 0.45s var(--nxfx-ease-out),
    box-shadow 0.55s var(--nxfx-ease-out);
}
.nxfx-live--hover .hm-pcard img {
  transition: transform 0.9s var(--nxfx-ease);
}
.nxfx-live--hover .hm-pcard :is(h3, h4) {
  transition: color 0.45s var(--nxfx-ease-out);
}
@media (hover: hover) {
  .nxfx-live--hover .hm-pcard:hover {
    transform: translate3d(0, -8px, 0);
    border-color: color-mix(in srgb, var(--accent) 52%, transparent);
    box-shadow:
      inset 0 0 0 1px color-mix(in srgb, var(--accent) var(--nxfx-edge-p), transparent),
      0 0 64px -18px color-mix(in srgb, var(--accent) var(--nxfx-halo-p), transparent),
      var(--hm-pcard-sh-h, 0 0 0 transparent);
  }
  .nxfx-live--hover .hm-pcard:hover img {
    transform: scale(1.05);
  }
  .nxfx-live--hover .hm-pcard:hover :is(h3, h4) {
    color: var(--nxfx-title-on);
  }
}
@media (hover: none) {
  .nxfx-live--hover .hm-pcard:active {
    transform: scale(0.985);
    border-color: color-mix(in srgb, var(--accent) 52%, transparent);
    transition-duration: 0.12s;
  }
}
/* 빛 쓸림: ::after 는 .nx-up--glow 가 쓰므로 ::before 를 쓴다(배경 위치만 움직인다) */
.nxfx-live--sweep .hm-pcard {
  position: relative;
  overflow: hidden;
}
.nxfx-live--sweep .hm-pcard::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  border-radius: inherit;
  background-image: linear-gradient(104deg, transparent 38%, var(--nxfx-sweep-surface) 50%, transparent 62%);
  background-size: 260% 100%;
  background-position: 130% 0;
  background-repeat: no-repeat;
  opacity: 0;
}
@media (hover: hover) {
  .nxfx-live--sweep .hm-pcard:hover::before {
    animation: nxfxSweepBg 0.95s var(--nxfx-ease-out) 1;
  }
}
@keyframes nxfxSweepBg {
  0% { background-position: 130% 0; opacity: 0; }
  18% { opacity: 1; }
  100% { background-position: -40% 0; opacity: 0; }
}
/* 후기 가로 넘김(지금 것 그대로) - 겉만 다듬는다: 유리 면 · 손 닿을 때 빛 테두리 · 따옴표 맥박 */
.nxfx-live--slider [data-review-card] {
  position: relative;
  background-image: radial-gradient(135% 82% at 12% 0%, var(--nxfx-sheen-c), transparent 54%);
  transition:
    transform 0.5s var(--nxfx-ease),
    border-color 0.45s var(--nxfx-ease-out),
    box-shadow 0.55s var(--nxfx-ease-out);
}
@media (hover: hover) {
  .nxfx-live--slider [data-review-card]:hover {
    transform: translate3d(0, -4px, 0);
    border-color: color-mix(in srgb, var(--accent) 52%, transparent);
    box-shadow:
      inset 0 0 0 1px color-mix(in srgb, var(--accent) var(--nxfx-edge-p), transparent),
      0 22px 54px -26px color-mix(in srgb, var(--accent) 50%, transparent);
  }
}
html.nx-js .nxfx-live--slider [data-review-card] > span[aria-hidden]:first-child {
  animation: nxfxPulse 4.2s ease-in-out infinite;
}
html.nx-js .nxfx-live--pulse .hm-eyebrow {
  animation: nxfxPulse 4.2s ease-in-out infinite;
}

/* ══ AI 템플릿 티 걷기(2026-11-12 의뢰인 승인) - 정보 없이 깔린 장식은 빼고, 시선을 잡는 연출은 한 곳에만 ══
   빼기: 라벨 앞 숨쉬는 점 · 격자 무늬 · 별 점 / 한 곳만: 카드 광채 · 광택 · 포인터 빛 = 서비스 카드(.nxfx-svc-scene) */
.nxfx-pulse--dot { gap: 0; }
.nxfx-pulse--dot::before { display: none; }
.nxfx-bd__grid { display: none; }
.nxfx-bd__cosmic { --nxfx-star: transparent; }
.nxfx-bd__cosmic::after { display: none; }
.nxfx-ptr { display: none !important; }
.nxfx-svc-scene .nxfx-ptr { display: block !important; }
.nxfx-glow:not(.nxfx-svc-scene .nxfx-glow) > .nxfx-glow__aura { display: none; }
.nxfx-glow:not(.nxfx-svc-scene .nxfx-glow) > .nxfx-glow__body > .nxfx-sweep:not(.nxfx-sweep--in) { display: none; }