/**
 * 사진 갤러리 얹은 판(n1) 전용 연출 - 연출 공용층(fx)에 없는 것만 여기 둔다(2026-11-11).
 *
 * 지키는 것
 *  · 공용층 클래스(.nxfx-glow · .nxfx-sweep …)의 opacity · transform · animation 은 건드리지 않는다.
 *    공용층에는 **커스텀 속성(--nxfx-*)만** 이 구획 범위에서 다시 준다(빛 세기 · 색 · 반경).
 *  · 새 효과는 전부 `nxfx-gal-` 로 시작하는 새 클래스다.
 *  · 숨김 · 반복은 `html.nx-js` 일 때만(still=1 · 스크립트 실패 = 끝 상태). 반복은 보일 때만(.nxfx-play).
 *  · 폰(640px 이하)은 상시 장식 움직임(숨쉬기 · 느린 확대)을 끄고 빛은 켜 둔다. 등장 · 눌림은 남는다.
 *  · 색은 사이트 토큰에서만 온다. 마스크의 #000 은 가림값이다(색이 아니다).
 *    강조색이 무채색이면 빛도 무채색이다 - 테마에 없는 색을 지어내지 않는다(1).
 *  · 사진 로드 페이드는 공용 FxPhoto 의 css 를 그대로 쓴다(여기서는 겉 상자의 자리만 맞춘다).
 */

/* ════════ 1. 구획 눈금 ════════ */
.nxfx-gal-sec {
  position: relative;
  isolation: isolate;
  overflow-x: clip;
  /* 모서리 - 한 구획 안에서 하나(기준 24px). 타일 · 카드 · 그림자 · 빛이 모두 이 값을 쓴다. */
  --nx-radius: 1.5rem;
  /* 타일 빛 두 색 - 관계색을 못 쓰는 브라우저는 강조색 그대로 */
  --nxfx-gal-ca: var(--accent);
  --nxfx-gal-cb: var(--accent);
  /* 공용 광채 카드 눈금(커스텀 속성만) - 가만히 있어도 보이게 */
  --nxfx-aura-o: 0.27;
  --nxfx-aura-o-h: 0.7;
  /* 공용 광채는 타일 사이 틈 안에서만 번지게 좁힌다(옆 사진 위로 넘어가지 않게) - 넓은 빛은 아래 halo 층이 맡는다 */
  --nxfx-aura-inset: -18px;
  --nxfx-aura-blur: 24px;
  --nxfx-rest-shadow-p: 44%;
  /* 손 닿을 때 빛 띠(공용 FxSweep · 0.9초 중 앞 0.35초에 지나간다) - 그 짧은 동안 읽히게 세기를 올린다 */
  --nxfx-sweep-photo: color-mix(in srgb, var(--background) 90%, transparent);
  /* 등장 끝 빛 띠(이 구획 · 1.15초로 천천히 지나간다) - 오래 보이므로 은은하게 */
  --nxfx-gal-shine-c: color-mix(in srgb, var(--background) 70%, transparent);
  /* 이 구획의 층 */
  --nxfx-gal-halo-o: 0.33;
  --nxfx-gal-halo-o-h: 0.6;
  /* 밝은 바탕: 빛이 타일 아래로 깔리게(위 · 옆은 좁게) - 타일 사이 틈이 통째로 물들지 않는다 */
  --nxfx-gal-halo-inset: -6px -16px -34px;
  /* 장수가 많은 격자(가로 넘김 줄이 서는 장수)에서는 빛을 덜어 낸다 - 아래 3 */
  --nxfx-gal-halo-k: 1;
  --nxfx-gal-halo-blur: 44px;
  --nxfx-gal-sky-p: 11%;
  --nxfx-gal-field-o: 0.15;
  --nxfx-gal-field-o-h: 0.56;
  --nxfx-gal-shadow: color-mix(in srgb, var(--foreground) 46%, transparent);
  --nxfx-gal-shade: color-mix(in srgb, var(--foreground) 15%, transparent);
  --nxfx-gal-ease: var(--nxfx-ease, cubic-bezier(0.16, 1, 0.3, 1));
  --nxfx-gal-ease-out: var(--nxfx-ease-out, cubic-bezier(0.33, 1, 0.68, 1));
}
.nx-root[data-nx-tone="dark"] .nxfx-gal-sec {
  --nxfx-aura-o: 0.44;
  --nxfx-aura-o-h: 1;
  --nxfx-aura-inset: -20px;
  --nxfx-aura-blur: 28px;
  --nxfx-sweep-photo: color-mix(in srgb, var(--foreground) 62%, transparent);
  --nxfx-gal-shine-c: color-mix(in srgb, var(--foreground) 36%, transparent);
  --nxfx-gal-halo-o: 0.54;
  --nxfx-gal-halo-o-h: 0.86;
  --nxfx-gal-halo-inset: -42px;
  --nxfx-gal-halo-blur: 48px;
  --nxfx-gal-sky-p: 17%;
  --nxfx-gal-field-o: 0.24;
  --nxfx-gal-field-o-h: 0.62;
  --nxfx-gal-shadow: color-mix(in srgb, var(--background) 80%, transparent);
  --nxfx-gal-shade: color-mix(in srgb, var(--background) 46%, transparent);
}
/**
 * 타일 빛 두 색 - 강조색에서 색상각만 갈라 따뜻한 쪽 · 차가운 쪽을 만든다.
 *  T = 강조색에 색이 있는 정도(채도 0.04 이하 = 0 · 0.065 이상 = 1).
 *  · 색이 있는 강조색(T = 1): 색상각을 ∓24° 돌리고, 채도가 낮으면 0.14 까지만 올린다.
 *  · 무채색 강조색(T = 0 - 회백색 강조색을 쓰는 어두운 테마): **색상각도 채도도 건드리지 않는다.**
 *    테마에 없는 색(호박빛 · 푸른빛)을 지어내지 않는다 - 두 빛이 같은 회백색이 되고, 세기도 0.6 배로 낮춘다.
 *  밝기는 바탕 위에서 빛으로 읽히는 구간으로만 묶는다. 임의 색값을 적지 않는다.
 */
@supports (color: oklch(from red clamp(0.5, l, 0.72) calc(c + max(0, 0.14 - c) * clamp(0, (c - 0.04) * 40, 1)) calc(h - 24 * clamp(0, (c - 0.04) * 40, 1)) / calc(0.6 + 0.4 * clamp(0, (c - 0.04) * 40, 1)))) {
  .nxfx-gal-sec {
    --nxfx-gal-ca: oklch(from var(--accent) clamp(0.5, l, 0.72) calc(c + max(0, 0.14 - c) * clamp(0, (c - 0.04) * 40, 1)) calc(h - 24 * clamp(0, (c - 0.04) * 40, 1)) / calc(0.6 + 0.4 * clamp(0, (c - 0.04) * 40, 1)));
    --nxfx-gal-cb: oklch(from var(--accent) clamp(0.5, l, 0.72) calc(c + max(0, 0.14 - c) * clamp(0, (c - 0.04) * 40, 1)) calc(h + 24 * clamp(0, (c - 0.04) * 40, 1)) / calc(0.6 + 0.4 * clamp(0, (c - 0.04) * 40, 1)));
  }
  .nx-root[data-nx-tone="dark"] .nxfx-gal-sec {
    --nxfx-gal-ca: oklch(from var(--accent) clamp(0.68, l, 0.82) calc(c + max(0, 0.15 - c) * clamp(0, (c - 0.04) * 40, 1)) calc(h - 24 * clamp(0, (c - 0.04) * 40, 1)) / calc(0.6 + 0.4 * clamp(0, (c - 0.04) * 40, 1)));
    --nxfx-gal-cb: oklch(from var(--accent) clamp(0.68, l, 0.82) calc(c + max(0, 0.15 - c) * clamp(0, (c - 0.04) * 40, 1)) calc(h + 24 * clamp(0, (c - 0.04) * 40, 1)) / calc(0.6 + 0.4 * clamp(0, (c - 0.04) * 40, 1)));
    --nxfx-gal-shadow: oklch(from var(--background) calc(l * 0.3) c h / 0.85);
  }
}

/* ════════ 2. 구획 뒤 빛(하늘 + 두 빛 덩어리) ════════
 *  위아래 가장자리를 마스크로 흐려 구획 경계에서 잘린 선이 생기지 않는다(낮은 구획 · 태블릿 폭 포함). */
.nxfx-gal-field {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 18%, #000 80%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 18%, #000 80%, transparent 100%);
}
.nxfx-gal-field__sky {
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(44% 58% at 22% 54%, color-mix(in oklab, var(--nxfx-gal-ca) var(--nxfx-gal-sky-p), transparent), transparent 74%),
    radial-gradient(44% 58% at 80% 48%, color-mix(in oklab, var(--nxfx-gal-cb) var(--nxfx-gal-sky-p), transparent), transparent 74%);
  opacity: 0.86;
}
.nxfx-gal-field__a,
.nxfx-gal-field__b {
  position: absolute;
  top: 52%;
  width: min(46rem, 64%);
  aspect-ratio: 1;
  border-radius: 50%;
  filter: blur(60px);
  opacity: var(--nxfx-gal-field-o);
  transform: translate3d(-50%, -50%, 0) scale(0.72);
  transition:
    opacity 0.82s var(--nxfx-gal-ease-out),
    transform 0.95s var(--nxfx-gal-ease);
}
.nxfx-gal-field__a {
  left: 24%;
  background: radial-gradient(circle, color-mix(in oklab, var(--nxfx-gal-ca) 78%, transparent) 0%, color-mix(in oklab, var(--nxfx-gal-ca) 34%, transparent) 44%, transparent 70%);
}
.nxfx-gal-field__b {
  left: 78%;
  background: radial-gradient(circle, color-mix(in oklab, var(--nxfx-gal-cb) 78%, transparent) 0%, color-mix(in oklab, var(--nxfx-gal-cb) 34%, transparent) 44%, transparent 70%);
}
.nx-root[data-nx-tone="dark"] .nxfx-gal-field__a,
.nx-root[data-nx-tone="dark"] .nxfx-gal-field__b {
  mix-blend-mode: screen;
}
/* 타일에 손이 닿으면 구획 뒤 빛이 그 타일 색 쪽으로 밝아진다 */
@media (hover: hover) {
  .nxfx-gal-sec:has(.nxfx-gal-cell--a:hover) .nxfx-gal-field__a,
  .nxfx-gal-sec:has(.nxfx-gal-cell--b:hover) .nxfx-gal-field__b {
    opacity: var(--nxfx-gal-field-o-h);
    transform: translate3d(-50%, -50%, 0) scale(1.1);
  }
  .nxfx-gal-sec:has(.nxfx-gal-cell--a:hover) .nxfx-gal-field__b,
  .nxfx-gal-sec:has(.nxfx-gal-cell--b:hover) .nxfx-gal-field__a {
    opacity: calc(var(--nxfx-gal-field-o) * 0.6);
  }
}
html.nx-js .nxfx-gal-field.nxfx-play .nxfx-gal-field__sky {
  animation: nxfxGalSky 15s ease-in-out infinite;
}
@keyframes nxfxGalSky {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 1; }
}

/* ════════ 3. 타일 칸 = 뒤 빛(halo) + 올라오는 판(rise) ════════
 *  뒤 빛은 격자 전체의 맨 아래 층에 깔린다(z-index -1 · 격자가 겹침 기준) - 옆 타일 사진 위로 번지지 않는다. */
.nxfx-gal-grid {
  isolation: isolate;
}
.nxfx-gal-cell {
  position: relative;
  min-width: 0;
  --nxfx-gal-c: var(--nxfx-gal-ca);
}
.nxfx-gal-cell--b {
  --nxfx-gal-c: var(--nxfx-gal-cb);
}
.nxfx-gal-cell .nxfx-glow {
  --nxfx-c: var(--nxfx-gal-c);
}
.nxfx-gal-cell--fill,
.nxfx-gal-cell--fill > .nxfx-gal-rise {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}
.nxfx-gal-cell--fill {
  height: 100%;
}
.nxfx-gal-halo {
  position: absolute;
  inset: var(--nxfx-gal-halo-inset);
  z-index: -1;
  pointer-events: none;
  opacity: calc(var(--nxfx-gal-halo-o) * var(--nxfx-gal-halo-k, 1));
  transform: scale(0.97);
  transition:
    opacity 0.8s var(--nxfx-gal-ease-out),
    transform 0.95s var(--nxfx-gal-ease);
}
/* 장수가 많은 격자 - 타일마다 빛을 다 켜면 틈이 전부 물든다. 가만히 있을 때의 빛만 0.55 배로 덜어 낸다(손 닿을 때는 그대로) */
.nxfx-gal-grid:has(> .nxfx-gal-rail) {
  --nxfx-gal-halo-k: 0.55;
  --nxfx-aura-o: 0.2;
}
.nxfx-gal-halo::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 56px;
  background: radial-gradient(
    120% 120% at 30% 22%,
    var(--nxfx-gal-c) 0%,
    color-mix(in oklab, var(--nxfx-gal-c) 62%, transparent) 58%,
    color-mix(in oklab, var(--nxfx-gal-c) 30%, transparent) 100%
  );
  filter: blur(var(--nxfx-gal-halo-blur));
}
@media (hover: hover) {
  .nxfx-gal-cell:hover > .nxfx-gal-halo {
    opacity: var(--nxfx-gal-halo-o-h);
    transform: scale(1.07);
  }
}
.nxfx-gal-cell:focus-within > .nxfx-gal-halo {
  opacity: var(--nxfx-gal-halo-o-h);
}
html.nx-js .nxfx-gal-grid.nxfx-play .nxfx-gal-halo::before {
  animation: nxfxGalBreath 8s ease-in-out infinite;
  animation-delay: calc(var(--nxfx-gal-i, 0) * -1.7s);
}
@keyframes nxfxGalBreath {
  0%, 100% { opacity: 0.58; }
  50% { opacity: 1; }
}
/* ── 한 장뿐인 벽: 타일 하나가 두 색을 다 받는다(왼쪽 위 따뜻한 빛 → 오른쪽 아래 차가운 빛) ──
 */
.nxfx-gal-cell:only-child > .nxfx-gal-halo::before {
  background: linear-gradient(
    122deg,
    color-mix(in oklab, var(--nxfx-gal-ca) 76%, transparent) 0%,
    color-mix(in oklab, var(--nxfx-gal-ca) 46%, transparent) 40%,
    color-mix(in oklab, var(--nxfx-gal-cb) 46%, transparent) 60%,
    color-mix(in oklab, var(--nxfx-gal-cb) 76%, transparent) 100%
  );
}
/* 한 장 배치(왼쪽 글 줄 + 오른쪽 큰 사진 - 아래 6)일 때 빛 덩어리를 사진 뒤로 모은다 */
@media (min-width: 1024px) {
  .nxfx-gal-sec:has(.nxfx-gal-solo) .nxfx-gal-field__sky {
    background-image:
      radial-gradient(34% 56% at 52% 44%, color-mix(in oklab, var(--nxfx-gal-ca) var(--nxfx-gal-sky-p), transparent), transparent 74%),
      radial-gradient(36% 58% at 86% 60%, color-mix(in oklab, var(--nxfx-gal-cb) var(--nxfx-gal-sky-p), transparent), transparent 74%);
  }
  .nxfx-gal-sec:has(.nxfx-gal-solo) .nxfx-gal-field__a {
    left: 50%;
    top: 40%;
  }
  .nxfx-gal-sec:has(.nxfx-gal-solo) .nxfx-gal-field__b {
    left: 86%;
    top: 66%;
  }
}
@media (hover: hover) {
  /* 한 장일 때는 손이 닿으면 두 빛이 함께 밝아진다 */
  .nxfx-gal-sec:has(.nxfx-gal-cell:only-child:hover) .nxfx-gal-field__b {
    opacity: var(--nxfx-gal-field-o-h);
    transform: translate3d(-50%, -50%, 0) scale(1.1);
  }
}
/* 판 - 깊은 그림자(기준: 0 30px 70px -40px). 테두리 1px 은 공용 광채 카드가 그린다. */
.nxfx-gal-rise {
  position: relative;
  border-radius: var(--nx-radius);
  box-shadow: 0 30px 70px -40px var(--nxfx-gal-shadow);
}

/* ── 등장: 빛이 먼저 깔리고 사진이 따라 올라온다 ──
 *  시작 상태가 투명이 아니다(옅게 · 살짝 아래) - 스크립트가 늦어도 사진은 처음부터 보인다. */
html.nx-js .nxfx-gal-in:not(.nxfx-done) .nxfx-gal-rise {
  transition:
    opacity 0.9s var(--nxfx-gal-ease-out) calc(var(--nxfx-gal-d, 0ms) + 170ms),
    transform 0.95s var(--nxfx-gal-ease) calc(var(--nxfx-gal-d, 0ms) + 170ms);
}
html.nx-js .nxfx-gal-in:not(.nxfx-in) .nxfx-gal-rise {
  opacity: 0.42;
  transform: translate3d(0, 28px, 0) scale(0.985);
}
html.nx-js .nxfx-gal-in:not(.nxfx-done) .nxfx-gal-halo {
  transition-delay: var(--nxfx-gal-d, 0ms);
}
html.nx-js .nxfx-gal-in:not(.nxfx-in) .nxfx-gal-halo {
  opacity: 0;
  transform: scale(0.8);
}

/* ── 등장 끝 빛 띠: 판이 다 올라온 뒤 사진 위로 한 번 지나간다(타일마다 시차를 따라간다) ──
 *  손 닿을 때의 빛 띠는 공용 FxSweep 가 맡는다. 이것은 등장 한 번만 돈다. */
.nxfx-gal-shine {
  position: absolute;
  inset: 0;
  z-index: 2;
  overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
}
.nxfx-gal-shine::after {
  content: "";
  position: absolute;
  top: -20%;
  bottom: -20%;
  left: 0;
  width: 42%;
  opacity: 0;
  background: linear-gradient(105deg, transparent 0%, var(--nxfx-gal-shine-c) 50%, transparent 100%);
  transform: translate3d(-140%, 0, 0) skewX(-10deg);
}
html.nx-js .nxfx-gal-in.nxfx-in .nxfx-gal-shine::after,
html.nx-js .nxfx-gal-cine.nxfx-in .nxfx-gal-shine::after {
  animation: nxfxGalShine 1.15s var(--nxfx-gal-ease-out) calc(var(--nxfx-gal-d, 0ms) + 860ms) 1;
}
@keyframes nxfxGalShine {
  0% { opacity: 0; transform: translate3d(-140%, 0, 0) skewX(-10deg); }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { opacity: 0; transform: translate3d(340%, 0, 0) skewX(-10deg); }
}

/* ── 사진 느린 확대(한 장짜리 벽 · 화면 폭 사진 띠) ── */
.nxfx-gal-drift {
  transform-origin: 50% 50%;
}
html.nx-js .nxfx-play .nxfx-gal-drift {
  animation: nxfxGalDrift 18s ease-in-out infinite alternate;
}
@keyframes nxfxGalDrift {
  0% { transform: scale(1.01) translate3d(0, 0, 0); }
  100% { transform: scale(1.09) translate3d(-1.2%, -1%, 0); }
}

/* ── 사진 로드 페이드: 공용 FxPhoto 의 겉(.nxfx-photo)을 사진 상자에 꽉 채워 건다 ──
 *  공용층의 opacity · transform · animation 은 그대로 둔다. 자리(position) · 비율 · 모서리 · 바탕만 이 구획에 맞춘다
 *  (비율 · 모서리 · 바탕은 바깥 사진 상자가 이미 갖고 있다). */
.nxfx-gal-sec .nxfx-gal-ph {
  position: absolute;
  inset: 0;
  display: block;
  aspect-ratio: auto;
  border-radius: 0;
  background-color: transparent;
}
.nxfx-gal-ph__drift {
  position: absolute;
  inset: 0;
  display: block;
}

/* ── 확대 표식: 손 닿을 때만 사진 구석에 뜬다(글자 없음 · 손가락 화면에는 없다) ── */
.nxfx-gal-zoom {
  position: absolute;
  right: 0.875rem;
  bottom: 0.875rem;
  z-index: 3;
  display: none;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 999px;
  color: var(--foreground);
  background-color: color-mix(in srgb, var(--background) 76%, transparent);
  border: 1px solid color-mix(in srgb, var(--foreground) 14%, transparent);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  pointer-events: none;
  opacity: 0;
  transform: translate3d(0, 8px, 0) scale(0.86);
  transition:
    opacity 0.35s var(--nxfx-gal-ease-out),
    transform 0.55s var(--nxfx-gal-ease);
}
@media (hover: hover) and (min-width: 641px) {
  .nxfx-gal-zoom {
    display: flex;
  }
  .nxfx-gal-cell:hover .nxfx-gal-zoom,
  .nxfx-gal-cell:focus-within .nxfx-gal-zoom {
    opacity: 1;
    transform: none;
  }
}

/* ════════ 4. 화면 폭 사진 띠 ════════
 *  영상 대신 사진 한 장을 화면 폭으로 건다 - 느린 확대 + 스크롤 시차 + 위아래가 바탕으로 녹는 어둠 층. */
.nxfx-gal-cine {
  position: relative;
  margin-bottom: clamp(1.75rem, 1rem + 3vw, 4rem);
}
.nxfx-gal-cine__frame {
  position: relative;
  display: block;
  width: 100%;
  /* 영상 띠처럼 16:9 - 4:3 사진을 걸어도 위아래가 12% 남짓만 잘린다(납작한 띠는 사람 · 물건이 잘려 나간다). 넓은 화면은 화면 높이의 82% 까지 */
  height: clamp(15rem, 56.25vw, min(82vh, 52rem));
  overflow: hidden;
  background-color: var(--muted);
  /* 위아래를 가림값으로 녹인다 - 바탕색을 덧칠하지 않으므로 구획 뒤 빛 위에서도 경계선이 생기지 않는다 */
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 9%, #000 89%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 9%, #000 89%, transparent 100%);
}
button.nxfx-gal-cine__frame {
  cursor: zoom-in;
}
.nxfx-gal-cine__plx {
  position: absolute;
  inset: -56px 0;
  display: block;
}
.nxfx-gal-cine__mv {
  position: absolute;
  inset: 0;
  display: block;
}
.nxfx-gal-cine__shade {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  /* 가장자리 어둠 층 - 밝은 테마는 글자색을 옅게(바탕색을 덮으면 사진이 뿌옇게 뜬다), 어두운 테마는 바탕색으로 가라앉힌다 */
  background: radial-gradient(120% 96% at 50% 50%, transparent 58%, var(--nxfx-gal-shade) 100%);
}
html.nx-js .nxfx-gal-cine:not(.nxfx-done) .nxfx-gal-cine__frame {
  transition:
    clip-path 1.2s var(--nxfx-gal-ease),
    opacity 0.9s var(--nxfx-gal-ease-out);
}
html.nx-js .nxfx-gal-cine:not(.nxfx-in) .nxfx-gal-cine__frame {
  clip-path: inset(14% 7% 14% 7% round 28px);
  opacity: 0.5;
}
html.nx-js .nxfx-gal-cine .nxfx-gal-cine__frame {
  clip-path: inset(0 0 0 0 round 0px);
}

/* ════════ 5. 머리 - 미니라벨 옆으로 가는 선 ════════
 *  글이 미니라벨뿐인 머리. 문구를 더하지 않고, 라벨에서 오른쪽으로 선 하나를 그어 "여기서 사진첩이 시작된다"를 만든다.
 *  라벨은 숨기지 않는다. 선만 왼쪽에서 그어지고, 그 위로 강조색 빛 알갱이가 지나간다. */
.nx-up .nxfx-gal-sec.nxfx-gal-sec--bare {
  /* 미니라벨 한 줄뿐인 머리가 넓은 위 여백 아래 떠 보이지 않게 - 위 여백만 0.62 배 */
  padding-top: calc(var(--nx-sec-y, 6rem) * 0.62);
}
.nxfx-gal-head {
  display: flex;
  align-items: center;
  gap: clamp(0.875rem, 0.6rem + 1vw, 1.5rem);
  margin-bottom: clamp(1.5rem, 1.1rem + 1.7vw, 2.75rem);
}
.nxfx-gal-sec .nxfx-gal-head > :first-child {
  flex: none;
  margin-bottom: 0;
}
.nxfx-gal-head__rule {
  position: relative;
  flex: 1 1 auto;
  min-width: 2rem;
  height: 1px;
  overflow: hidden;
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--foreground) 26%, transparent) 0%,
    color-mix(in srgb, var(--foreground) 9%, transparent) 62%,
    transparent 100%
  );
  transform-origin: 0 50%;
}
.nxfx-gal-head__rule::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 22%;
  opacity: 0;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  transform: translate3d(-110%, 0, 0);
}
html.nx-js .nxfx-gal-head:not(.nxfx-done) .nxfx-gal-head__rule {
  transition: transform 1.15s var(--nxfx-gal-ease) 0.12s;
}
html.nx-js .nxfx-gal-head:not(.nxfx-in) .nxfx-gal-head__rule {
  transform: scaleX(0);
}
html.nx-js .nxfx-gal-head.nxfx-in .nxfx-gal-head__rule::after {
  animation: nxfxGalGlint 1.5s var(--nxfx-gal-ease-out) 0.55s 1;
}
@media (min-width: 641px) {
  html.nx-js .nxfx-gal-head.nxfx-done.nxfx-play .nxfx-gal-head__rule::after {
    animation: nxfxGalGlintLoop 8s ease-in-out 1.2s infinite;
  }
}
@keyframes nxfxGalGlint {
  0% { opacity: 0; transform: translate3d(-110%, 0, 0); }
  12% { opacity: 1; }
  80% { opacity: 1; }
  100% { opacity: 0; transform: translate3d(460%, 0, 0); }
}
@keyframes nxfxGalGlintLoop {
  0% { opacity: 0; transform: translate3d(-110%, 0, 0); }
  3% { opacity: 1; }
  20% { opacity: 1; }
  25%, 100% { opacity: 0; transform: translate3d(460%, 0, 0); }
}

/* ════════ 6. 한 장 배치 - 왼쪽 글 줄 + 오른쪽 큰 사진 ════════
 *  넓은 화면(1024px 부터)만 두 칸. 그 아래는 글 → 가로 전체 사진으로 쌓인다.
 *  글 줄에 미니라벨만 있으면 위 맞춤(선이 사진 쪽으로 그어진다), 글(제목 · 소개 · 묶음 글)이 있으면 가운데 맞춤. */
.nxfx-gal-solo__rail,
.nxfx-gal-solo__photo {
  min-width: 0;
}
@media (min-width: 1024px) {
  .nxfx-gal-solo {
    display: grid;
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    column-gap: clamp(2rem, 4vw, 4.5rem);
    align-items: start;
  }
  .nxfx-gal-solo--text {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    align-items: center;
  }
  .nxfx-gal-sec .nxfx-gal-solo__rail > :last-child,
  .nxfx-gal-sec .nxfx-gal-solo__rail > :last-child > p:last-child {
    margin-bottom: 0;
  }
  .nxfx-gal-sec .nxfx-gal-solo:not(.nxfx-gal-solo--text) .nxfx-gal-head {
    margin-top: 0.5rem;
  }
}
@media (max-width: 1023.98px) {
  .nxfx-gal-solo__rail > :last-child:not(.nxfx-gal-head) {
    margin-bottom: 1.25rem;
  }
}

/* ════════ 7. 폰 가로 넘김 줄 ════════
 *  641px 부터는 상자가 없다(display: contents) - 안의 칸이 격자에 그대로 선다.
 *  폰에서만 첫 장 아래에 가로로 넘기는 줄이 된다(한 장씩 걸리고, 다음 장이 오른쪽에 걸쳐 보인다).
 *  위아래 안 여백은 뒤 빛 · 그림자가 줄 상자에 잘리지 않게 둔 자리다(같은 만큼 음수 바깥 여백으로 되돌린다). */
.nxfx-gal-rail {
  display: contents;
}
.nxfx-gal-railbar {
  display: none;
}
@media (max-width: 640px) {
  .nxfx-gal-sec .nxfx-gal-rail {
    grid-column: 1 / -1;
    display: flex;
    gap: 0.75rem;
    min-width: 0;
    margin: -1.5rem -1rem -2.25rem;
    padding: 1.5rem 1rem 2.25rem;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 1rem;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    /* 줄 상자가 뒤 빛을 자르는 자리(위 · 아래 끝)를 가림값으로 녹인다 - 사진은 안 여백 안쪽에 있어 가려지지 않는다 */
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 1.25rem, #000 calc(100% - 1.75rem), transparent 100%);
    mask-image: linear-gradient(180deg, transparent 0, #000 1.25rem, #000 calc(100% - 1.75rem), transparent 100%);
    /* 줄 안의 뒤 빛은 줄 상자 안에서 끝나게 좁힌다 */
    --nxfx-gal-halo-inset: -10px;
    --nxfx-gal-halo-blur: 15px;
    --nxfx-aura-inset: -8px;
    --nxfx-aura-blur: 12px;
  }
  .nxfx-gal-sec .nxfx-gal-rail::-webkit-scrollbar {
    display: none;
  }
  .nxfx-gal-sec .nxfx-gal-rail > .nxfx-gal-cell {
    flex: 0 0 68%;
    scroll-snap-align: start;
  }
  .nxfx-gal-sec .nxfx-gal-rail--case > .nxfx-gal-cell {
    flex-basis: 80%;
    height: auto;
  }
  /* 넘김 위치 막대 - 줄을 넘긴 만큼 채워진다(스크롤 연동을 아는 브라우저에서만 보인다. 모르면 막대 자체가 없다) */
  @supports (animation-timeline: scroll()) and (timeline-scope: --nxfx-gal-rail) {
    .nxfx-gal-grid:has(> .nxfx-gal-rail) {
      timeline-scope: --nxfx-gal-rail;
    }
    .nxfx-gal-sec .nxfx-gal-rail {
      scroll-timeline: --nxfx-gal-rail x;
    }
    .nxfx-gal-railbar {
      grid-column: 1 / -1;
      position: relative;
      display: block;
      justify-self: center;
      width: 3.5rem;
      height: 2px;
      margin-top: 0.25rem;
      border-radius: 2px;
      overflow: hidden;
      background-color: color-mix(in srgb, var(--foreground) 14%, transparent);
    }
    .nxfx-gal-railbar::after {
      content: "";
      position: absolute;
      inset: 0;
      background-color: var(--accent);
      transform-origin: 0 50%;
      transform: scaleX(0.2);
      animation: nxfxGalRailbar linear both;
      animation-timeline: --nxfx-gal-rail;
    }
  }
}
@keyframes nxfxGalRailbar {
  from { transform: scaleX(0.2); }
  to { transform: scaleX(1); }
}

/* ════════ 7-2. 태블릿 폭(641 ~ 1023px) - 구획 아래 여백이 100px 안팎으로 줄어든다.
 *  어두운 테마의 넓은 뒤 빛(-42px + 흐림 48px)은 그 여백보다 멀리 번져 구획 아래 경계에서 잘린 선이 남는다 → 빛을 여백 안으로 줄인다. */
@media (min-width: 641px) and (max-width: 1023px) {
  .nx-root[data-nx-tone="dark"] .nxfx-gal-sec {
    --nxfx-gal-halo-inset: -26px -26px -18px;
    --nxfx-gal-halo-blur: 28px;
  }
}

/* ════════ 8. 폰 - 상시 장식 움직임은 끄고 빛은 켜 둔다 ════════ */
@media (max-width: 640px) {
  .nxfx-gal-sec {
    --nx-radius: 1.25rem;
    --nxfx-aura-o: 0.24;
    --nxfx-aura-inset: -8px;
    --nxfx-aura-blur: 16px;
    --nxfx-gal-halo-o: 0.3;
    --nxfx-gal-halo-inset: -2px -8px -16px;
    --nxfx-gal-halo-blur: 18px;
    --nxfx-gal-field-o: 0.1;
    --nxfx-gal-sky-p: 5%;
  }
  .nx-root[data-nx-tone="dark"] .nxfx-gal-sec {
    --nxfx-gal-halo-o: 0.56;
    --nxfx-gal-halo-inset: -18px;
    --nxfx-gal-halo-blur: 26px;
    --nxfx-gal-field-o: 0.24;
    --nxfx-gal-sky-p: 13%;
  }
  /* 빛 덩어리를 위 · 아래 모서리에 작게 상시 켠다(손 닿음이 없는 화면).
     구획 바탕이 통째로 물들지 않게 화면 폭보다 작게 두고 세기도 낮춘다 - 사진 사이 바탕은 바탕색으로 남는다. */
  .nxfx-gal-field__a,
  .nxfx-gal-field__b {
    width: 84%;
    filter: blur(40px);
  }
  .nxfx-gal-field__a { left: 14%; top: 26%; }
  .nxfx-gal-field__b { left: 88%; top: 78%; }
  html.nx-js .nxfx-gal-field.nxfx-play .nxfx-gal-field__sky,
  html.nx-js .nxfx-gal-grid.nxfx-play .nxfx-gal-halo::before,
  html.nx-js .nxfx-play .nxfx-gal-drift {
    animation: none;
  }
  .nxfx-gal-halo::before {
    border-radius: 36px;
  }
  .nxfx-gal-cine__plx {
    inset: 0;
  }
  html.nx-js .nxfx-gal-in:not(.nxfx-in) .nxfx-gal-rise {
    transform: translate3d(0, 18px, 0);
  }
}

/* ════════ 9. 동작 줄이기 ════════ */
@media (prefers-reduced-motion: reduce) {
  html.nx-js .nxfx-gal-head .nxfx-gal-head__rule::after {
    animation: none !important;
  }
  html.nx-js .nxfx-gal-head .nxfx-gal-head__rule {
    transition: none !important;
    transform: none !important;
  }
  .nxfx-gal-zoom {
    transition: none !important;
  }
  html.nx-js .nxfx-gal-field.nxfx-play .nxfx-gal-field__sky,
  html.nx-js .nxfx-gal-grid.nxfx-play .nxfx-gal-halo::before,
  html.nx-js .nxfx-play .nxfx-gal-drift,
  html.nx-js .nxfx-gal-shine::after {
    animation: none !important;
  }
  .nxfx-gal-field__a,
  .nxfx-gal-field__b,
  .nxfx-gal-halo,
  html.nx-js .nxfx-gal-in .nxfx-gal-rise,
  html.nx-js .nxfx-gal-in .nxfx-gal-halo,
  html.nx-js .nxfx-gal-cine .nxfx-gal-cine__frame {
    transition: none !important;
  }
  html.nx-js .nxfx-gal-in .nxfx-gal-rise {
    opacity: 1 !important;
    transform: none !important;
  }
  html.nx-js .nxfx-gal-in .nxfx-gal-halo {
    opacity: calc(var(--nxfx-gal-halo-o) * var(--nxfx-gal-halo-k, 1)) !important;
    transform: none !important;
  }
  html.nx-js .nxfx-gal-cine .nxfx-gal-cine__frame {
    clip-path: none !important;
    opacity: 1 !important;
  }
}