/*
 * 「고객 후기」 얹은 안(n1) 전용 연출 - 연출층(fx) 부품에 없는 것만 이 폴더에 `nxfx-rv-*` 로 만들었다.
 *
 *  ① 채도 비례 빛 색(--nxfx-rv-c)  : 포인트색이 무채색에 가까운 가게(어두운 바탕 + 밝은 회색 포인트)는 빛이
 *                                     '흰 광채'가 되어 글을 덮는다 → 채도가 낮을수록 빛의 세기를 스스로 낮춘다.
 *  ② 가운데 색 광채(.nxfx-rv-aura) : 기준 사이트 후기 구획의 '가운데 오라' 한 가지. 경계가 읽히면 실패다.
 *  ③ 대표 카드(.nxfx-rv-feat*)     : 문장 단위 줄 차례 등장 · 사장님 제목 걷히는 등장 · 세로 구분선 그리기 · 큰 따옴표.
 *  ④ 줄 카드(.nxfx-rv-card)        : 위쪽 밝은 면 · 유리 광택 · 손 닿을 때 들림(6px)/빛 테두리 · 포인터 빛 색 · 조명 넘김.
 *  ⑤ 줄 뒤 빛 띠(.nxfx-rv-band)    : 줄 영역 뒤에 은은하게 깔리는 빛.
 *  ⑥ 마우스로 끌기(.nxfx-rv-grab)  : 줄이 넘칠 때만 손바닥 커서.
 *  ⑦ 글 눈금 · 긴 글 접기           : .nxfx-rv-fit(잰 글 크기를 받는 자리) · .nxfx-rv-clamp(줄 수 접기) · .nxfx-rv-more(더보기).
 *  ⑧ 자리 표시 선(.nxfx-rv-prog)    : 줄 아래 가는 선 - 지금 보고 있는 자리만큼 색이 찬다.
 *  ⑨ 왼쪽 색 막대(.nxfx-rv-bar)     : 줄 카드에 손이 닿으면 위에서 아래로 그어진다. 옆 카드는 글만 물러난다(.nxfx-rv-inner).
 *  ⑩ 우주 배경 변수                 : FxScene cosmic 의 색 물듦(--nxfx-cosmic-p) · 별점(--nxfx-star)을 이 구획 값으로 - 색 물듦도
 *                                     ① 과 같은 채도 비례 색을 쓴다(무채색 포인트 가게의 '탁한 안개' 방지).
 *
 * 규칙: 색은 사이트 토큰(--accent · --foreground · --background)뿐 · 숨김과 반복은 `html.nx-js` 일 때만(still=1 ·
 *       동작 줄이기 · 스크립트 실패면 끝 상태) · 연출층 부품(.nxfx-glow 등)의 opacity/transform/animation 은 덮지 않고
 *       **변수 값만** 다시 정한다 · 폰(640 이하)에서는 늘 도는 장식을 끄고 등장 · 넘김 · 눌림만 남긴다.
 */

/* ── ① 채도 비례 빛 색 ─────────────────────────────────────────────── */
.nxfx-rv-scene {
  --nxfx-rv-c: var(--accent);
  --nxfx-rv-aura-p: 7%;
  --nxfx-rv-band-p: 6%;
  --nxfx-rv-top: color-mix(in srgb, var(--accent) 4.5%, transparent);
  --nxfx-rv-wash: 8%;
  --nxfx-rv-edge-p: 40%;
  --nxfx-rv-halo-p: 30%;
  /* 조명 넘김 띠의 세기 - 밝은 바탕에서는 글 위로 색이 진하게 지나가지 않게 낮춘다. */
  --nxfx-rv-spot-o: 0.6;
  /* 우주 배경(FxScene cosmic)의 색 물듦 · 별점 - 변수만 낮춘다. 밝은 바탕에서는 별점이 먼지처럼 읽히지 않게 옅게,
     색 물듦은 가운데 오라(.nxfx-rv-aura)와 겹쳐 얼룩이 되지 않게 한 단 낮춘다. */
  --nxfx-cosmic-p: 9%;
  --nxfx-star: color-mix(in srgb, var(--accent) 32%, transparent);
}
.nx-root[data-nx-tone="dark"] .nxfx-rv-scene {
  /* 어두운 바탕 - 무채색 포인트 가게에서 색 물듦이 '탁한 안개'로 읽혔다 → 물듦을 낮추고, 별점은 또렷하게 둔다.
     (채도 비례 색을 쓸 수 있는 브라우저에서는 아래 @supports 가 기준 사이트 급 18% 로 올리고 채도로 스스로 낮춘다.) */
  --nxfx-cosmic-p: 8%;
  --nxfx-star: color-mix(in srgb, var(--foreground) 82%, transparent);
  --nxfx-rv-aura-p: 15%;
  --nxfx-rv-band-p: 12%;
  --nxfx-rv-top: color-mix(in srgb, var(--foreground) 7%, transparent);
  --nxfx-rv-wash: 9%;
  --nxfx-rv-edge-p: 46%;
  --nxfx-rv-halo-p: 34%;
  --nxfx-rv-spot-o: 1;
}
/* 우주 배경의 아래쪽 색 물듦은 구획 끝(104%)에 가장 짙어 끝에서 반듯하게 잘린 면('상자')으로 읽혔다 →
   이 구획에서만 층의 아래 1/4 을 스르르 가린다(가림막만 덧댄다 - 층의 opacity · transform · animation 은 그대로).
   가림막은 알파만 쓰므로 색 값은 토큰이면 된다. */
.nxfx-rv-scene .nxfx-bd__cosmic {
  -webkit-mask-image: linear-gradient(to bottom, var(--foreground) 0, var(--foreground) 74%, transparent 100%);
  mask-image: linear-gradient(to bottom, var(--foreground) 0, var(--foreground) 74%, transparent 100%);
}
@supports (color: oklch(from red l c h / calc(0.3 + c * 9))) {
  .nxfx-rv-scene {
    /* 채도 0.078 이상(색이 또렷한 포인트)은 그대로, 무채색에 가까울수록 0.3 배까지 옅어진다. 밝기 · 색상은 그대로다. */
    --nxfx-rv-c: oklch(from var(--accent) l c h / calc(0.3 + c * 9));
  }
  /* 우주 배경의 색 물듦도 같은 값으로 - 이 층 안에서만 포인트색 변수를 채도 비례 색으로 바꿔 준다(변수만 바꾼다).
     색이 또렷한 가게는 기준 사이트 급으로 물들고, 무채색에 가까운 가게는 스스로 0.3 배까지 옅어진다. */
  .nxfx-rv-scene .nxfx-bd__cosmic {
    --accent: var(--nxfx-rv-c);
  }
  .nx-root[data-nx-tone="dark"] .nxfx-rv-scene {
    --nxfx-cosmic-p: 18%;
  }
  /* 대표 카드(광채 카드)의 빛 색을 같은 값으로 - 뒤 광채 · 빛 테두리 · 헤일로가 함께 낮아진다(변수만 바꾼다). */
  .nxfx-rv-feat.nxfx-glow {
    --nxfx-c: var(--nxfx-rv-c);
  }
}
/* 어두운 테마의 대표 카드 - 손 닿을 때 번지는 범위를 줄여 라벨 · 줄 카드를 덮지 않게 한다. */
.nx-root[data-nx-tone="dark"] .nxfx-rv-feat.nxfx-glow {
  --nxfx-aura-inset: -34px;
  --nxfx-aura-blur: 42px;
  --nxfx-aura-o-h: 0.7;
  --nxfx-halo-p: 36%;
  --nxfx-edge-p: 62%;
}
/* 밝은 테마의 대표 카드 - 평상시 뒤 광채를 한 단계 낮춘다(밝은 바탕에서는 색 얼룩으로 읽힌다). */
.nx-root:not([data-nx-tone="dark"]) .nxfx-rv-feat.nxfx-glow {
  --nxfx-aura-o: 0.2;
  /* 손 닿을 때 - 색 구름이 라벨 줄과 줄 카드 윗변까지 번지지 않게 범위와 세기를 줄인다. */
  --nxfx-aura-o-h: 0.34;
  --nxfx-aura-inset: -30px;
  --nxfx-aura-blur: 40px;
}
.nxfx-rv-featbody {
  background-image: linear-gradient(135deg, color-mix(in srgb, var(--nxfx-rv-c) var(--nxfx-rv-wash), transparent) 0%, transparent 58%);
}

/* ── ② 가운데 색 광채 ──────────────────────────────────────────────── */
.nxfx-rv-aura {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}
.nxfx-rv-aura::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 46%;
  width: min(132%, 1680px);
  height: 124%;
  border-radius: 50%;
  /* 여러 단으로 사그라져 타원의 가장자리가 읽히지 않는다("빛이 보이면 실패, 분위기만"). */
  background: radial-gradient(
    closest-side,
    color-mix(in srgb, var(--nxfx-rv-c) var(--nxfx-rv-aura-p), transparent) 0%,
    color-mix(in srgb, var(--nxfx-rv-c) calc(var(--nxfx-rv-aura-p) * 0.72), transparent) 22%,
    color-mix(in srgb, var(--nxfx-rv-c) calc(var(--nxfx-rv-aura-p) * 0.4), transparent) 46%,
    color-mix(in srgb, var(--nxfx-rv-c) calc(var(--nxfx-rv-aura-p) * 0.14), transparent) 70%,
    transparent 100%
  );
  opacity: 0.9;
  transform: translate3d(-50%, -50%, 0);
}
html.nx-js .nxfx-rv-aura::before {
  animation: nxfxRvAura 9s ease-in-out infinite;
}
@keyframes nxfxRvAura {
  0%, 100% { opacity: 0.62; transform: translate3d(-50%, -50%, 0) scale(1); }
  50% { opacity: 1; transform: translate3d(-50%, -50%, 0) scale(1.06); }
}

/* ── 머리: 라벨 옆으로 그어지는 가는 선 ─────────────────────────────── */
.nxfx-rv-headline {
  transform-origin: left center;
}
html.nx-js .nxfx-rv-head:not(.nxfx-done) .nxfx-rv-headline {
  transition: transform 1.1s var(--nxfx-ease) 0.15s;
}
html.nx-js .nxfx-rv-head:not(.nxfx-in) .nxfx-rv-headline {
  transform: scaleX(0);
}

/* ── ③ 대표 카드 ──────────────────────────────────────────────────── */
/* 문장 단위 줄 - 카드가 올라오는 것과 **같은 신호**(바깥 등장 래퍼의 nxfx-in)에 물려 한 줄씩 따라 올라온다. */
.nxfx-rv-line {
  display: block;
}
/* 짧은 글(한마디 · 두세 문장)과 눈금을 맞춘 글은 줄을 고르게 나눈다 - 끝에 한두 낱말만 떨어지지 않는다. */
.nxfx-rv-t0 .nxfx-rv-line,
.nxfx-rv-t1 .nxfx-rv-line,
.nxfx-rv-fit[data-rv-fit] .nxfx-rv-line {
  text-wrap: balance;
}
/* 글 눈금 맞춤(rv-text.tsx) - 맞춘 뒤에는 글 길이 단계의 줄 폭 제한(max-w)을 풀고 자간을 한 값으로 쓴다(잰 값과 같은 자간). */
.nxfx-rv-fit[data-rv-fit] {
  max-width: none;
  letter-spacing: var(--rv-fit-track, -0.028em);
}
/* 재는 동안만(같은 프레임 안에서 되돌린다 · 화면에 그려지지 않는다): 글 100px · 줄바꿈 없음 · 줄마다 제 폭. */
.nxfx-rv-fit[data-rv-measure] {
  display: block !important;
  font-size: 100px !important;
  white-space: nowrap !important;
  letter-spacing: var(--rv-fit-track, -0.028em) !important;
}
.nxfx-rv-fit[data-rv-measure] .nxfx-rv-line {
  display: inline-block !important;
  width: max-content;
}
/* 줄 카드 본문의 줄 높이 - 운영 값(1.78). 전역 :where(p) 가 레이어 밖이라 여기서 정한다. */
.nxfx-rv-body {
  line-height: 1.78;
}

/* ── 긴 글 접기(더보기 · 접기) ─────────────────────────────────────── */
.nxfx-rv-clamp {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: var(--rv-clamp, 6);
  line-clamp: var(--rv-clamp, 6);
  overflow: hidden;
}
.nxfx-rv-clamp--card { --rv-clamp: 6; }
.nxfx-rv-clamp--feat { --rv-clamp: 9; }
@media (min-width: 768px) {
  .nxfx-rv-clamp--feat { --rv-clamp: 7; }
}
.nxfx-rv-more {
  position: relative;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  padding: 9px 0;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1;
  color: color-mix(in srgb, var(--accent) 88%, var(--foreground));
  cursor: pointer;
  transition:
    gap 0.35s var(--nxfx-ease),
    opacity 0.3s var(--nxfx-ease-out);
}
.nxfx-rv-more__i {
  width: 12px;
  height: 12px;
  transition: transform 0.4s var(--nxfx-ease);
}
.nxfx-rv-more[aria-expanded="true"] .nxfx-rv-more__i {
  transform: rotate(180deg);
}
@media (hover: hover) {
  .nxfx-rv-more:hover {
    gap: 10px;
  }
}
.nxfx-rv-more:focus-visible,
.nxfx-rv-arrow:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 999px;
}

/* ── 머리: 실제 평점 숫자(있을 때만) - 다른 구획 큰 제목과 같은 눈금 ─── */
.nxfx-rv-score {
  font-size: var(--nx-fs-title, clamp(1.875rem, 1.36rem + 2.2vw, 3.2rem));
  line-height: 1;
  letter-spacing: -0.03em;
}
.nxfx-rv-scorenote {
  line-height: 1.3;
}
/* 대표 글의 줄 높이 - 글 길이 단계(t0 한마디 … t4 긴 글)마다. 전역 `:where(p){line-height:1.75}` 가 @layer 밖이라
   Tailwind leading 유틸리티로는 안 먹는다 → 여기(레이어 밖 · 클래스 선택자)에서 정한다. */
.nxfx-rv-t0 { line-height: 1.36; }
.nxfx-rv-t1 { line-height: 1.42; }
.nxfx-rv-t2 { line-height: 1.58; }
.nxfx-rv-t3 { line-height: 1.7; }
.nxfx-rv-t4 { line-height: 1.78; }
@media (min-width: 768px) {
  .nxfx-rv-t0 { line-height: 1.3; }
  .nxfx-rv-t1 { line-height: 1.36; }
  .nxfx-rv-t2 { line-height: 1.5; }
}
@media (min-width: 1024px) {
  .nxfx-rv-t0 { line-height: 1.26; }
  .nxfx-rv-t1 { line-height: 1.32; }
  .nxfx-rv-t2 { line-height: 1.46; }
  .nxfx-rv-t3 { line-height: 1.64; }
}
html.nx-js .nxfx-rv-featwrap:not(.nxfx-done) .nxfx-rv-line {
  transition:
    opacity 0.7s var(--nxfx-ease-out) calc(120ms + var(--nxfx-rv-i, 0) * 90ms),
    transform 0.9s var(--nxfx-ease) calc(120ms + var(--nxfx-rv-i, 0) * 90ms);
}
html.nx-js .nxfx-rv-featwrap:not(.nxfx-in) .nxfx-rv-line {
  opacity: 0;
  transform: translate3d(0, 16px, 0);
}
/* 사장님이 적은 후기 제목 - 아래에서 가림막이 걷히며 드러난다. */
html.nx-js .nxfx-rv-featwrap:not(.nxfx-done) .nxfx-rv-title {
  transition:
    clip-path 0.9s var(--nxfx-ease) 60ms,
    transform 0.9s var(--nxfx-ease) 60ms;
}
html.nx-js .nxfx-rv-featwrap:not(.nxfx-in) .nxfx-rv-title {
  clip-path: inset(0 0 100% 0);
  transform: translate3d(0, 12px, 0);
}
/* 세로 구분선 - 위에서 아래로 그어진다(카드 안쪽 높이 전체). */
.nxfx-rv-rule {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 1px;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--nxfx-rv-c) 46%, transparent) 0%,
    color-mix(in srgb, var(--foreground) 12%, transparent) 34%,
    color-mix(in srgb, var(--foreground) 12%, transparent) 100%
  );
  transform-origin: center top;
}
html.nx-js .nxfx-rv-featwrap:not(.nxfx-done) .nxfx-rv-rule {
  transition: transform 1.2s var(--nxfx-ease) 0.2s;
}
html.nx-js .nxfx-rv-featwrap:not(.nxfx-in) .nxfx-rv-rule {
  transform: scaleY(0);
}
/* 큰 따옴표 - 살짝 작았다가 제 크기로(맥박은 안쪽 FxPulse 가 맡는다 · 이 래퍼는 등장만). */
.nxfx-rv-bigq {
  transform-origin: left top;
}
html.nx-js .nxfx-rv-featwrap:not(.nxfx-done) .nxfx-rv-bigq {
  transition:
    opacity 0.7s var(--nxfx-ease-out) 80ms,
    transform 1s var(--nxfx-ease) 80ms;
}
html.nx-js .nxfx-rv-featwrap:not(.nxfx-in) .nxfx-rv-bigq {
  opacity: 0;
  transform: translate3d(0, 10px, 0) scale(0.82);
}
/* 대표 카드의 작성 정보(순번 · 배지/출처) - 글 뒤에 따라 들어온다. */
html.nx-js .nxfx-rv-featwrap:not(.nxfx-done) .nxfx-rv-meta {
  transition: opacity 0.8s var(--nxfx-ease-out) 0.38s;
}
html.nx-js .nxfx-rv-featwrap:not(.nxfx-in) .nxfx-rv-meta {
  opacity: 0;
}
/* 순번 사이의 짧은 선 */
.nxfx-rv-tick {
  display: none; /* 폰은 줄 카드와 같은 "01 / 03" 꼴 - 선은 PC 왼쪽 칸에서만 */
  width: 22px;
  height: 1px;
  background: color-mix(in srgb, var(--foreground) 26%, transparent);
  vertical-align: middle;
}
@media (min-width: 768px) {
  .nxfx-rv-tick {
    display: inline-block;
  }
}

/* ── ④ 줄 카드 ────────────────────────────────────────────────────── */
.nxfx-rv-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  /* 위쪽이 한 단 밝은 면 + 왼쪽 위에서 떨어지는 유리 광택 - 바탕과 같은 색이어도 '면'으로 읽힌다. */
  background-image:
    linear-gradient(180deg, var(--nxfx-rv-top) 0%, transparent 52%),
    radial-gradient(135% 82% at 12% 0%, var(--nxfx-sheen-c), transparent 54%);
  --nxfx-ptr-c: color-mix(in srgb, var(--nxfx-rv-c) 11%, transparent);
  transition:
    transform 0.5s var(--nxfx-ease),
    border-color 0.45s var(--nxfx-ease-out),
    box-shadow 0.55s var(--nxfx-ease-out);
}
.nx-root[data-nx-tone="dark"] .nxfx-rv-card {
  /* 어두운 테마는 그림자가 안 보인다 - 윗변의 가는 빛 선으로 면을 세운다. */
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--foreground) 9%, transparent);
  /* 포인터 빛은 손끝 둘레의 작은 빛이라 채도 비례로 낮추지 않는다(무채색 포인트 가게에서 안 보였다) - 포인트색과 글자색을 섞은 빛. */
  --nxfx-ptr-c: color-mix(in srgb, color-mix(in srgb, var(--accent) 55%, var(--foreground)) 12%, transparent);
}
@media (hover: hover) {
  .nxfx-rv-card:hover {
    transform: translate3d(0, -6px, 0);
    border-color: color-mix(in srgb, var(--nxfx-rv-c) 46%, transparent);
    box-shadow:
      inset 0 0 0 1px color-mix(in srgb, var(--nxfx-rv-c) var(--nxfx-rv-edge-p), transparent),
      0 24px 56px -28px color-mix(in srgb, var(--nxfx-rv-c) var(--nxfx-rv-halo-p), transparent),
      var(--nx-shadow, 0 0 0 transparent);
  }
}
@media (hover: none) {
  .nxfx-rv-card:active {
    transform: scale(0.985);
    border-color: color-mix(in srgb, var(--nxfx-rv-c) 46%, transparent);
    transition-duration: 0.12s;
  }
}
/* 줄 카드의 작은 따옴표 - 느린 맥박(PC 만) */
@media (min-width: 641px) {
  html.nx-js .nxfx-rv-card .nxfx-rv-q {
    animation: nxfxRvPulse 4.2s ease-in-out infinite;
    animation-delay: calc(var(--nxfx-i, 0) * -1.1s);
  }
}
@keyframes nxfxRvPulse {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}
/* 조명 넘김 - 줄이 넘치지 않아 넘길 것이 없는 PC 화면에서, 빛 띠가 카드에서 카드로 차례로 지나간다. */
.nxfx-rv-card::after {
  content: "";
  position: absolute;
  top: -20%;
  bottom: -20%;
  left: 0;
  z-index: 2;
  width: 46%;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--nxfx-sweep-surface), transparent);
  transform: translate3d(-150%, 0, 0) skewX(-14deg);
  opacity: 0;
}
@media (min-width: 641px) {
  html.nx-js .nxfx-rv-card[data-rv-spot="a"]::after {
    animation: nxfxRvSpotA 2.1s cubic-bezier(0.45, 0, 0.3, 1) 1;
  }
  html.nx-js .nxfx-rv-card[data-rv-spot="b"]::after {
    animation: nxfxRvSpotB 2.1s cubic-bezier(0.45, 0, 0.3, 1) 1;
  }
  html.nx-js .nxfx-rv-card[data-rv-spot="a"] {
    animation: nxfxRvSpotEdgeA 2.4s var(--nxfx-ease-out) 1;
  }
  html.nx-js .nxfx-rv-card[data-rv-spot="b"] {
    animation: nxfxRvSpotEdgeB 2.4s var(--nxfx-ease-out) 1;
  }
}
@keyframes nxfxRvSpotA {
  0% { transform: translate3d(-150%, 0, 0) skewX(-14deg); opacity: 0; }
  14% { opacity: var(--nxfx-rv-spot-o, 1); }
  80% { opacity: var(--nxfx-rv-spot-o, 1); }
  100% { transform: translate3d(330%, 0, 0) skewX(-14deg); opacity: 0; }
}
@keyframes nxfxRvSpotB {
  0% { transform: translate3d(-150%, 0, 0) skewX(-14deg); opacity: 0; }
  14% { opacity: var(--nxfx-rv-spot-o, 1); }
  80% { opacity: var(--nxfx-rv-spot-o, 1); }
  100% { transform: translate3d(330%, 0, 0) skewX(-14deg); opacity: 0; }
}
@keyframes nxfxRvSpotEdgeA {
  0%, 100% { border-color: var(--border); }
  28% { border-color: color-mix(in srgb, var(--nxfx-rv-c) 46%, transparent); }
}
@keyframes nxfxRvSpotEdgeB {
  0%, 100% { border-color: var(--border); }
  28% { border-color: color-mix(in srgb, var(--nxfx-rv-c) 46%, transparent); }
}

/* 손 닿을 때 왼쪽에서 그어지는 색 막대 */
.nxfx-rv-bar {
  position: absolute;
  left: 0;
  top: 20%;
  bottom: 20%;
  z-index: 2;
  width: 3px;
  border-radius: 0 3px 3px 0;
  pointer-events: none;
  background: linear-gradient(180deg, transparent 0%, var(--accent) 22%, var(--accent) 78%, transparent 100%);
  transform: scaleY(0);
  transform-origin: center top;
  transition: transform 0.6s var(--nxfx-ease);
}
.nx-root[data-nx-tone="dark"] .nxfx-rv-bar {
  box-shadow: 0 0 14px color-mix(in srgb, var(--accent) 55%, transparent);
}
@media (hover: hover) {
  .nxfx-rv-card:hover .nxfx-rv-bar {
    transform: scaleY(1);
  }
}
/* 옆 카드에 손이 닿으면 나머지 카드의 속만 한 단 가라앉는다(PC · 카드 자신의 등장 값은 안 건드린다). */
@media (hover: hover) and (min-width: 641px) {
  .nxfx-rv-inner {
    transition: opacity 0.45s var(--nxfx-ease-out);
  }
  .nxfx-rv-rail:has(.nxfx-rv-card:hover) .nxfx-rv-card:not(:hover) .nxfx-rv-inner {
    opacity: 0.55;
  }
}

/* ── 화살표 · 줄의 자리 표시 ───────────────────────────────────────── */
.nxfx-rv-arrow {
  background: color-mix(in srgb, var(--foreground) 3%, transparent);
  transition:
    transform 0.4s var(--nxfx-ease),
    border-color 0.3s var(--nxfx-ease-out),
    color 0.3s var(--nxfx-ease-out),
    background-color 0.3s var(--nxfx-ease-out),
    opacity 0.3s var(--nxfx-ease-out);
}
.nxfx-rv-nudge {
  display: inline-flex;
  transition: transform 0.4s var(--nxfx-ease);
}
.nxfx-rv-nudge--prev {
  transform: scaleX(-1);
}
@media (hover: hover) {
  .nxfx-rv-arrow:hover {
    transform: translate3d(0, -2px, 0);
    border-color: var(--accent);
    color: var(--accent);
    background: color-mix(in srgb, var(--accent) 9%, transparent);
  }
  .nxfx-rv-arrow:hover .nxfx-rv-nudge {
    transform: translate3d(3px, 0, 0);
  }
  .nxfx-rv-arrow:hover .nxfx-rv-nudge--prev {
    transform: scaleX(-1) translate3d(3px, 0, 0);
  }
}
.nxfx-rv-arrow:active {
  transform: scale(0.94);
}
.nxfx-rv-arrow[aria-disabled="true"] {
  opacity: 0.32;
  pointer-events: none;
}
.nxfx-rv-prog {
  position: relative;
  display: block;
  height: 2px;
  margin-top: 22px;
  overflow: hidden;
  border-radius: 2px;
  background: color-mix(in srgb, var(--foreground) 10%, transparent);
}
.nxfx-rv-prog__bar {
  position: absolute;
  inset: 0 auto 0 0;
  width: calc(var(--rv-w, 0.3) * 100%);
  border-radius: 2px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 45%, transparent), var(--accent));
  transform: translate3d(calc(var(--rv-p, 0) * (1 / var(--rv-w, 0.3) - 1) * 100%), 0, 0);
  transition: transform 0.5s var(--nxfx-ease-out);
}

/* ── ⑤ 줄 뒤 빛 띠 ─────────────────────────────────────────────────── */
.nxfx-rv-band {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: -1;
  width: min(118%, 1500px);
  height: 150%;
  pointer-events: none;
  border-radius: 50%;
  background: radial-gradient(
    closest-side,
    color-mix(in srgb, var(--nxfx-rv-c) var(--nxfx-rv-band-p), transparent) 0%,
    color-mix(in srgb, var(--nxfx-rv-c) calc(var(--nxfx-rv-band-p) * 0.5), transparent) 40%,
    color-mix(in srgb, var(--nxfx-rv-c) calc(var(--nxfx-rv-band-p) * 0.15), transparent) 70%,
    transparent 100%
  );
  transform: translate3d(-50%, -50%, 0);
}

/* ── ⑥ 마우스로 끌기 ───────────────────────────────────────────────── */
@media (hover: hover) and (pointer: fine) {
  .nxfx-rv-grab {
    cursor: grab;
  }
  .nxfx-rv-grab.nxfx-rv-dragging {
    cursor: grabbing;
    user-select: none;
    -webkit-user-select: none;
  }
  .nxfx-rv-grab.nxfx-rv-dragging .nxfx-rv-card {
    pointer-events: none;
  }
}

/* ── 폰 · 동작 줄이기 ──────────────────────────────────────────────── */
@media (max-width: 640px) {
  html.nx-js .nxfx-rv-aura::before {
    animation: none;
  }
  .nxfx-rv-aura::before {
    width: 190%;
    height: 96%;
  }
  .nxfx-rv-band {
    display: none;
  }
  /* 좁은 화면에서는 우주 배경의 색 물듦이 좁은 덩어리로 모인다 → 물듦만 한 단 더 낮춘다(별점은 그대로 · 아래 끝은 위 가림막이 지운다). */
  .nx-root .nxfx-rv-scene.nxfx-rv-scene {
    --nxfx-cosmic-p: 6%;
  }
  .nx-root[data-nx-tone="dark"] .nxfx-rv-scene.nxfx-rv-scene {
    --nxfx-cosmic-p: 10%;
  }
}
@media (prefers-reduced-motion: reduce) {
  html.nx-js .nxfx-rv-aura::before,
  html.nx-js .nxfx-rv-card .nxfx-rv-q,
  html.nx-js .nxfx-rv-card[data-rv-spot],
  html.nx-js .nxfx-rv-card[data-rv-spot]::after {
    animation: none;
  }
  .nxfx-rv-card {
    transition: none;
    transform: none !important;
  }
  .nxfx-rv-bar,
  .nxfx-rv-inner,
  .nxfx-rv-arrow,
  .nxfx-rv-nudge,
  .nxfx-rv-more,
  .nxfx-rv-more__i,
  .nxfx-rv-prog__bar {
    transition: none;
  }
}

/* 구획 큰 제목(2026-11-12) - 라벨 줄 아래 */
.nxfx-rv-title { margin: 0.6rem 0 0; }