/**
 * 섹션 업그레이드 실험판 - 소개·이야기(intro) 얹은 안(n1) 전용 규칙.
 *
 * 등장 · 손 반응 · 카드 뒤 광채는 연출 공용층(`../_kit/fx`) 부품이 맡는다. 이 파일은
 *  1) 배치 · 글 눈금, 2) 공용층 **변수** 재정의(광채 세기 · 번짐 · 색), 3) 공용층에 없는 이 자리만의 빛
 *  (색 덩이 두 개 · 카드 테두리 빛 · 두 카드를 잇는 선 · 알약 사이 선)만 둔다.
 * `.nxfx-*` 부품의 opacity · transform · animation 은 건드리지 않는다(자기 `nxfx-intro-*` 만 움직인다).
 * 색은 사이트 토큰(foreground · background · accent · muted)에서만 뽑는다. 마스크의 #000 은 색이 아니라 가림값이다.
 */

/* ── 이 자리의 빛 색 ────────────────────────────────────────────────
   기본은 사이트 포인트색 그대로다. 어두운 테마에서 포인트색이 무채색(회색 · 흰색 계열)이면 광채가 회색 안개가 되므로,
   그때만 바탕색의 색조(예: 남색 바탕 → 푸른 빛)에서 밝기 · 채도를 올려 뽑는다. 포인트색에 색이 있으면 포인트색이 그대로 남는다.
   (포인트색의 채도 c 가 0.03 아래면 알파 0, 0.055 위면 알파 1 → color-mix 에서 저절로 빠지거나 남는다) */
.nxfx-intro-sec {
  --nxfx-intro-c: var(--accent);
  --nxfx-intro-ca: var(--nxfx-intro-c);
  --nxfx-intro-cb: var(--nxfx-intro-c);
  --nxfx-intro-gap: clamp(2.25rem, 4.4vw, 3.5rem);
  --nxfx-intro-aura-p: 18%;
  --nxfx-intro-dim: 0.945;
  --nxfx-intro-tint-p: 12%;
}
.nx-root[data-nx-tone="dark"] .nxfx-intro-sec {
  --nxfx-intro-aura-p: 27%;
  --nxfx-intro-dim: 0.72;
  --nxfx-intro-tint-p: 15%;
}
@supports (color: oklch(from red l c h / calc(c * 2))) {
  .nx-root[data-nx-tone="dark"] .nxfx-intro-sec {
    --nxfx-intro-c: oklch(
      from
        color-mix(
          in oklab,
          oklch(from var(--accent) l c h / calc((c - 0.03) * 40)) 88%,
          oklch(from var(--background) 0.74 calc(c * 2.6) h) 12%
        )
        l c h / 1
    );
    /* 공용층의 빛 변수도 같은 색으로(변수만 - 부품 규칙은 그대로) */
    --nxfx-ptr-c: color-mix(in srgb, var(--nxfx-intro-c) 11%, transparent);
    --nxfx-sheen-c: color-mix(in srgb, var(--nxfx-intro-c) 13%, transparent);
    --nxfx-light: color-mix(in oklab, var(--nxfx-intro-c) 72%, var(--foreground));
    --nxfx-light-glow: 0 0 12px color-mix(in srgb, var(--nxfx-intro-c) 70%, transparent);
    --nxfx-title-glow: 0 0 22px color-mix(in srgb, var(--nxfx-intro-c) 46%, transparent);
    --nxfx-grad-b: color-mix(in oklab, var(--nxfx-intro-c) 80%, var(--foreground));
  }
}
@supports (color: oklch(from red l c h)) {
  /* 배경 색 덩이 둘은 서로 다른 색조로 */
  .nxfx-intro-sec {
    --nxfx-intro-ca: oklch(from var(--nxfx-intro-c) l c calc(h - 36));
    --nxfx-intro-cb: oklch(from var(--nxfx-intro-c) l c calc(h + 46));
  }
  /* 카드 광채 색: 공용층은 포인트색에서 색상각을 돌린다 - 여기서는 '이 자리의 빛 색'에서 돌린다 */
  .nxfx-glow.nxfx-intro-glow {
    --nxfx-c: oklch(from var(--nxfx-intro-c) l c calc(h + var(--nxfx-hue, 0)));
  }
}

/* ── 배경: 색 덩이 두 개(내 것) + 격자 · 빛 줄(공용층) ────────────────
   위 · 아래를 흐리게 걷어 섹션 변에서 빛이 끊겨 보이지 않게 한다. */
.nxfx-intro-auras {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 16%, #000 68%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 16%, #000 68%, transparent 100%);
}
.nxfx-intro-auras__mv {
  position: absolute;
  inset: 0;
}
.nxfx-intro-aura {
  position: absolute;
  border-radius: 50%;
  aspect-ratio: 1.2;
}
.nxfx-intro-aura--a {
  left: -9%;
  top: 2%;
  width: max(50%, 320px);
  background: radial-gradient(
    closest-side,
    color-mix(in srgb, var(--nxfx-intro-ca) var(--nxfx-intro-aura-p), transparent),
    color-mix(in srgb, var(--nxfx-intro-ca) calc(var(--nxfx-intro-aura-p) * 0.42), transparent) 52%,
    transparent
  );
}
.nxfx-intro-aura--b {
  right: -7%;
  top: 30%;
  width: max(46%, 300px);
  background: radial-gradient(
    closest-side,
    color-mix(in srgb, var(--nxfx-intro-cb) var(--nxfx-intro-aura-p), transparent),
    color-mix(in srgb, var(--nxfx-intro-cb) calc(var(--nxfx-intro-aura-p) * 0.42), transparent) 52%,
    transparent
  );
}
.nxfx-intro-bd {
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 12%, #000 74%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 12%, #000 74%, transparent 100%);
}
@keyframes nxfxIntroBreath {
  0%, 100% { opacity: 0.62; transform: scale(1) translate3d(0, 0, 0); }
  50% { opacity: 1; transform: scale(1.07) translate3d(1.5%, 2%, 0); }
}

/* ── 머리(왼쪽 정렬 - 운영 D 의 "머리가 아래 두 열을 묶는다" 그대로) ── */
.nxfx-intro-head {
  max-width: 62rem;
}
.nxfx-intro-head > .nx-label {
  margin-bottom: clamp(0.875rem, 0.7rem + 0.7vw, 1.375rem);
}
.nxfx-intro-dash {
  display: inline-block;
}
.nxfx-intro-title {
  max-width: 21em;
}
/* 긴 제목은 눈금을 낮춘다(글은 자르지 않는다 - 줄 수를 잘라 가리지 않고 글자 크기로 줄 수를 줄인다).
   28자 이상 한 단(폰 26px → PC 46px) · 44자 이상 두 단(폰 22px → PC 38px). */
.nx-title.nxfx-intro-title--long {
  max-width: 24em;
  font-size: clamp(1.625rem, 1.2rem + 1.85vw, 2.85rem);
  line-height: 1.2;
}
.nx-title.nxfx-intro-title--xlong {
  max-width: 28em;
  font-size: clamp(1.375rem, 1.02rem + 1.5vw, 2.4rem);
  line-height: 1.28;
  letter-spacing: -0.022em;
}
.nx-root[data-nx-tone="dark"] .nxfx-intro-title {
  /* 넓고 옅게 - 글자 가장자리가 뿌옇게 번져 보이지 않을 만큼만 */
  text-shadow: 0 0 44px color-mix(in srgb, var(--nxfx-intro-c) 17%, transparent);
}

/* 큰 문장(운영의 '왼쪽 강조선 + 큰 글씨' 자리) - 본문 글꼴 굵은 무게로 올려 제목 ↔ 굵은 한 줄 ↔ 본문의 대비를 벌린다 */
.nxfx-intro-lead {
  position: relative;
  margin: clamp(1.25rem, 1rem + 1vw, 2rem) 0 0;
  padding-left: clamp(1.125rem, 0.9rem + 0.9vw, 1.875rem);
  max-width: 46rem;
  font-family: var(--font-body, "Pretendard Variable", sans-serif);
  font-weight: 700;
  font-size: clamp(1.25rem, 1.1rem + 0.62vw, 1.6875rem); /* 20 → 27 */
  line-height: 1.48;
  letter-spacing: -0.022em;
  color: var(--nx-ink-1, var(--foreground));
  white-space: pre-line;
  word-break: keep-all;
  overflow-wrap: anywhere;
  text-wrap: pretty;
}
.nxfx-intro-lead::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.22em;
  bottom: 0.22em;
  width: 2px;
  border-radius: 2px;
  background: linear-gradient(to bottom, var(--nxfx-light, var(--accent)), color-mix(in srgb, var(--nxfx-intro-c) 30%, transparent));
  box-shadow: var(--nxfx-light-glow, 0 0 0 transparent);
}
/* 그라데이션 글이 여러 줄로 꺾여도 줄마다 같은 흐름으로 */
.nxfx-intro-grad {
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* ── 사진 : 본문 두 칸(운영 D 의 열 비율 그대로 - 사진 크기 S · M · L · FULL) ── */
.nxfx-intro-grid {
  display: grid;
  gap: 2rem;
  align-items: stretch;
  margin-top: var(--nx-head-gap, 2rem);
}
.nxfx-intro-cell {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.nxfx-intro-cell > .nxfx-glow,
.nxfx-intro-dim > .nxfx-glow,
.nxfx-intro-plx > .nxfx-glow {
  flex: 1 1 auto;
}
/* 사진 칸은 4:3 그대로 · 윗선 맞춤(운영 items-start) */
.nxfx-intro-cell--photo {
  position: relative;
  align-self: start;
}
/* 반대 카드가 물러나는 층(밝기만 - 카드 부품의 변형 · 투명도는 건드리지 않는다) */
.nxfx-intro-dim,
.nxfx-intro-plx {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-width: 0;
}
.nxfx-intro-dim {
  transition: filter 0.45s var(--nxfx-ease-out, ease-out);
}
@media (min-width: 768px) {
  .nxfx-intro-grid {
    column-gap: var(--nxfx-intro-gap);
    row-gap: clamp(1.25rem, 2.6vw, 1.75rem);
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
  .nxfx-intro-grid[data-size="S"] { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
  .nxfx-intro-grid[data-size="L"] { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
  .nxfx-intro-grid[data-size="FULL"] { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }

  /* 알약 줄이 있을 때: 사진 아래(왼쪽 열)에 알약 줄을 세워 사진 옆 빈 자리를 메운다. 사진 상자는 4:3 그대로다 */
  .nxfx-intro-grid--tags { grid-template-rows: auto 1fr; }
  .nxfx-intro-grid--tags > .nxfx-intro-cell--photo { grid-column: 1; grid-row: 1; }
  .nxfx-intro-grid--tags > .nxfx-intro-cell--text { grid-column: 2; grid-row: 1 / span 2; }
  .nxfx-intro-grid--tags > .nxfx-intro-tags--side { grid-column: 1; grid-row: 2; align-self: start; }

  /* 글이 짧은 가게: 글 카드를 사진 높이로 늘이지 않는다(카드 높이 = 글 높이). 사진 가운데 높이에 서서 잇는 선이 카드 가운데에 닿는다.
     알약 줄은 두 칸 아래를 가로지른다(사진 옆 자리는 글 카드가 가운데에서 채운다). */
  .nxfx-intro-grid > .nxfx-intro-cell--fit { align-self: center; }
  .nxfx-intro-grid--fit.nxfx-intro-grid--tags { grid-template-rows: auto auto; }
  .nxfx-intro-grid--fit.nxfx-intro-grid--tags > .nxfx-intro-cell--text { grid-row: 1; }
  .nxfx-intro-grid--fit.nxfx-intro-grid--tags > .nxfx-intro-tags--side { grid-column: 1 / -1; }
}
@media (min-width: 768px) and (max-width: 899px) {
  /* 알약 줄이 없고 글이 긴 가게: 좁은 두 칸 대신 한 줄로 쌓는다(사진 옆이 크게 비지 않게) */
  .nxfx-intro-grid.nxfx-intro-grid--stack-md { grid-template-columns: minmax(0, 1fr); row-gap: 2rem; }
  .nxfx-intro-grid--stack-md > .nxfx-intro-cell--photo { width: 100%; max-width: 34rem; }
  .nxfx-intro-grid--stack-md .nxfx-intro-bridge { display: none; }
}
@media (min-width: 1200px) {
  /* 넓은 화면: 알약 줄은 두 칸 아래를 가로지르는 한 줄 */
  .nxfx-intro-grid--tags { grid-template-rows: auto auto; row-gap: clamp(1.75rem, 2.4vw, 2.25rem); }
  .nxfx-intro-grid--tags > .nxfx-intro-cell--text { grid-row: 1; }
  .nxfx-intro-grid--tags > .nxfx-intro-tags--side { grid-column: 1 / -1; }
}
@media (hover: hover) {
  .nxfx-intro-grid:has(.nxfx-intro-cell--text .nxfx-glow:hover) .nxfx-intro-cell--photo .nxfx-intro-dim,
  .nxfx-intro-grid:has(.nxfx-intro-cell--photo .nxfx-glow:hover) .nxfx-intro-cell--text .nxfx-intro-dim {
    filter: brightness(var(--nxfx-intro-dim)) saturate(0.9);
  }
}

/* 두 카드를 잇는 선(768px 이상 · 사진 칸 오른쪽 가운데에서 글 카드까지) */
.nxfx-intro-bridge {
  display: none;
}
@media (min-width: 768px) {
  .nxfx-intro-bridge {
    display: block;
    position: absolute;
    left: 100%;
    top: 50%;
    z-index: 1;
    width: var(--nxfx-intro-gap);
    height: 1px;
    pointer-events: none;
    background: linear-gradient(
      90deg,
      color-mix(in srgb, var(--nxfx-light, var(--accent)) 62%, transparent),
      var(--nxfx-line, color-mix(in srgb, var(--foreground) 14%, transparent)) 50%,
      color-mix(in srgb, var(--nxfx-light, var(--accent)) 62%, transparent)
    );
  }
  .nxfx-intro-bridge::before,
  .nxfx-intro-bridge::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 5px;
    height: 5px;
    margin-top: -2.5px;
    border-radius: 50%;
    background: var(--nxfx-light, var(--accent));
    box-shadow: var(--nxfx-light-glow, 0 0 0 transparent);
  }
  .nxfx-intro-bridge::before { left: -2.5px; }
  .nxfx-intro-bridge::after { right: -2.5px; }
  .nxfx-intro-bridge > i {
    position: absolute;
    inset: -1px 0;
    display: block;
    overflow: hidden;
  }
  .nxfx-intro-bridge > i::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 46%;
    background: linear-gradient(90deg, transparent, var(--nxfx-light, var(--accent)), transparent);
    transform: translate3d(-110%, 0, 0);
    opacity: 0;
  }
}
@keyframes nxfxIntroBridge {
  from { transform: translate3d(-110%, 0, 0); }
  to { transform: translate3d(330%, 0, 0); }
}

/* 사진 한 장(4:3 상자 - 안의 그림은 운영 AutoFocalImg 가 그대로 그린다) */
.nxfx-intro-photo {
  position: relative;
  margin: 0;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background-color: var(--muted, color-mix(in srgb, var(--foreground) 7%, var(--background)));
}
.nxfx-intro-photo__mv {
  position: absolute;
  inset: 0;
  overflow: hidden;
  transition: transform 0.9s var(--nxfx-ease, cubic-bezier(0.22, 1, 0.36, 1));
}
/* 그림은 칸의 면이 뜬 뒤에 옅게 떠오른다(등장은 공용 FxReveal 이 한다 - 여기는 자리만 잡는다) */
.nxfx-intro-photo__in,
.nxfx-intro-photo__drift,
.nxfx-intro-photo__ld {
  position: absolute;
  inset: 0;
  display: block;
}
/* 미세 보정(채도 · 대비를 아주 조금) - 사진을 바꾸는 것이 아니라 화면 위에서만 얹는 값이다 */
.nxfx-intro-photo__drift {
  filter: saturate(1.06) contrast(1.03);
  transform-origin: 50% 46%;
}
/* 로드 페이드: 그림을 다 받기 전에는 흐리고 조금 크게 → 받으면 또렷하게 걷힌다(공용 구동기가 figure 에 nxfx-loaded 를 붙인다).
   구동기가 없거나(still) 동작 줄이기면 처음부터 끝 상태다. */
.nxfx-intro-photo__ld {
  transition:
    opacity 0.9s var(--nxfx-ease-out, ease-out),
    filter 1.1s var(--nxfx-ease-out, ease-out),
    transform 1.4s var(--nxfx-ease, cubic-bezier(0.22, 1, 0.36, 1));
}
html.nx-js .nxfx-intro-photo[data-nxfx-img]:not(.nxfx-loaded) .nxfx-intro-photo__ld {
  opacity: 0;
  filter: blur(12px);
  transform: scale(1.05);
}
/* 사진 아래쪽 옅은 빛 띠 + 왼쪽 위 유리 빛 - 사진이 면 위에 얹힌 깊이 */
.nxfx-intro-photo__glaze {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(to top, color-mix(in srgb, var(--nxfx-c, var(--accent)) 16%, transparent), transparent 34%),
    radial-gradient(120% 70% at 8% 0%, color-mix(in srgb, var(--background) 16%, transparent), transparent 52%);
  opacity: 0.7;
  transition: opacity 0.6s var(--nxfx-ease-out, ease-out);
}
@keyframes nxfxIntroDrift {
  from { transform: scale(1.015) translate3d(0, 0, 0); }
  to { transform: scale(1.085) translate3d(-1.1%, -0.9%, 0); }
}
@media (hover: hover) {
  .nxfx-glow:hover .nxfx-intro-photo__mv {
    transform: scale(1.055);
  }
  .nxfx-glow:hover .nxfx-intro-photo__glaze {
    opacity: 1;
  }
}
@media (prefers-reduced-motion: reduce) {
  .nxfx-intro-photo__mv,
  .nxfx-intro-photo__ld,
  .nxfx-intro-photo__glaze {
    transition: none;
  }
  .nxfx-glow:hover .nxfx-intro-photo__mv {
    transform: none;
  }
  html.nx-js .nxfx-intro-photo[data-nxfx-img]:not(.nxfx-loaded) .nxfx-intro-photo__ld {
    opacity: 1;
    filter: none;
    transform: none;
  }
}

/* 사진을 본문 흐름 위 · 아래에 통째로 넣을 때(운영 StoryImage 의 최대폭 그대로) */
.nxfx-intro-wide {
  margin: clamp(3rem, 2.6rem + 1.6vw, 4rem) auto;
  width: 100%;
  max-width: 42rem;
}
.nxfx-intro-wide[data-size="S"] { max-width: 28rem; }
.nxfx-intro-wide[data-size="L"] { max-width: 56rem; }
.nxfx-intro-wide[data-size="FULL"] { max-width: 100%; }
.nxfx-intro-wide--top { margin-top: 0; }

/* ── 카드의 빛(공용층 변수만 바꾼다) ──────────────────────────────────
   정지 상태에서도 '바탕 < 면 < 테두리 < 번진 빛' 네 단이 읽히게 뒤 광채 · 색 그림자를 올리고,
   손이 닿을 때의 번짐은 카드 둘레 안쪽에 머물게 줄였다. 굵은 실선 고리는 끄고(0%) 가는 그라데이션 선으로 바꿨다. */
.nxfx-glow.nxfx-intro-glow {
  --nxfx-aura-o: 0.72;
  --nxfx-aura-o-h: 0.94;
  --nxfx-aura-inset: -30px;
  --nxfx-aura-blur: 36px;
  --nxfx-rest-shadow-p: 52%;
  --nxfx-halo-p: 26%;
  --nxfx-edge-p: 0%;
}
.nx-root[data-nx-tone="dark"] .nxfx-glow.nxfx-intro-glow {
  --nxfx-aura-o: 0.66;
  --nxfx-aura-o-h: 0.96;
  --nxfx-aura-inset: -44px;
  --nxfx-aura-blur: 42px;
  --nxfx-rest-shadow-p: 0%;
  --nxfx-halo-p: 30%;
  --nxfx-fill-p: 15%;
}
/* 사진 카드는 그림이 면을 다 덮어 뒤 빛이 잘 안 읽힌다 - 한 단 더 세게 */
.nxfx-glow.nxfx-intro-glow--photo {
  --nxfx-aura-o: 0.82;
  --nxfx-aura-o-h: 1;
  --nxfx-rest-shadow-p: 64%;
}
.nx-root[data-nx-tone="dark"] .nxfx-glow.nxfx-intro-glow--photo {
  --nxfx-aura-o: 0.72;
  --nxfx-aura-o-h: 1;
  --nxfx-rest-shadow-p: 0%;
}
/* 뒤 광채의 모양: 공용층의 '가운데 한 덩이'는 불투명한 카드 면이 한가운데를 가려, 밝은 테마에서는 바깥 고리만 옅게 남는다.
   → 카드 **모서리 밖으로 비어져 나오는 두 덩이**(서로 다른 색조)로 바꾼다. 사진 카드는 왼쪽 아래 · 오른쪽 위,
     글 카드는 오른쪽 위 · 왼쪽 아래 - 두 카드가 마주 보는 안쪽 모서리에서 빛이 만난다.
   (배경 그림만 바꾼다 - 부품의 투명도 · 변형 · 숨쉬기는 그대로) */
.nxfx-glow.nxfx-intro-glow {
  --nxfx-intro-c2: var(--nxfx-c);
  /* 뒤 광채에 실제로 칠하는 두 색(h1 · h2) */
  --nxfx-intro-h1: var(--nxfx-c);
  --nxfx-intro-h2: var(--nxfx-intro-c2);
}
@supports (color: oklch(from red l c h)) {
  .nxfx-glow.nxfx-intro-glow {
    --nxfx-intro-c2: oklch(from var(--nxfx-c) l c calc(h + 58));
    /* 밝은 바탕: 포인트색을 그대로 번지게 하면 어두운 색이 옅게 깔려 회색 얼룩처럼 보인다 →
       같은 색조에서 밝기만 올려(채도는 조금 올림) '빛'으로 읽히게 한다 */
    --nxfx-intro-h1: oklch(from var(--nxfx-c) calc(l * 0.5 + 0.4) calc(c * 1.25) h);
    --nxfx-intro-h2: oklch(from var(--nxfx-intro-c2) calc(l * 0.5 + 0.4) calc(c * 1.25) h);
  }
  /* 글 카드의 둘째 색은 포인트색 쪽으로 되돌린다(두 카드의 빛이 한 계열 안에서 벌어지게) */
  .nxfx-glow.nxfx-intro-glow--text {
    --nxfx-intro-c2: oklch(from var(--nxfx-c) l c calc(h - 34));
  }
}
.nx-root[data-nx-tone="dark"] .nxfx-glow.nxfx-intro-glow {
  --nxfx-intro-h1: var(--nxfx-c);
  --nxfx-intro-h2: var(--nxfx-intro-c2);
}
.nxfx-glow.nxfx-intro-glow--photo,
.nxfx-glow.nxfx-intro-glow--text {
  --nxfx-aura-o: 0.9;
  --nxfx-aura-o-h: 1;
  --nxfx-aura-inset: -44px;
  --nxfx-aura-blur: 40px;
}
.nx-root[data-nx-tone="dark"] .nxfx-glow.nxfx-intro-glow--photo,
.nx-root[data-nx-tone="dark"] .nxfx-glow.nxfx-intro-glow--text {
  --nxfx-aura-o: 0.74;
  --nxfx-aura-inset: -52px;
  --nxfx-aura-blur: 46px;
}
.nxfx-glow.nxfx-intro-glow--photo > .nxfx-glow__aura::before {
  background:
    radial-gradient(
      52% 56% at 7% 93%,
      var(--nxfx-intro-h1) 0%,
      color-mix(in srgb, var(--nxfx-intro-h1) 50%, transparent) 44%,
      transparent 78%
    ),
    radial-gradient(
      44% 48% at 95% 5%,
      var(--nxfx-intro-h2) 0%,
      color-mix(in srgb, var(--nxfx-intro-h2) 42%, transparent) 42%,
      transparent 76%
    );
}
.nxfx-glow.nxfx-intro-glow--text > .nxfx-glow__aura::before {
  background:
    radial-gradient(
      50% 54% at 94% 6%,
      var(--nxfx-intro-h1) 0%,
      color-mix(in srgb, var(--nxfx-intro-h1) 50%, transparent) 44%,
      transparent 78%
    ),
    radial-gradient(
      44% 50% at 5% 95%,
      var(--nxfx-intro-h2) 0%,
      color-mix(in srgb, var(--nxfx-intro-h2) 42%, transparent) 42%,
      transparent 76%
    );
}
.nxfx-glow.nxfx-intro-glow--solo > .nxfx-glow__aura::before {
  background:
    radial-gradient(
      44% 78% at 14% 16%,
      var(--nxfx-intro-h1) 0%,
      color-mix(in srgb, var(--nxfx-intro-h1) 46%, transparent) 42%,
      transparent 76%
    ),
    radial-gradient(
      40% 74% at 88% 86%,
      var(--nxfx-intro-h2) 0%,
      color-mix(in srgb, var(--nxfx-intro-h2) 42%, transparent) 42%,
      transparent 76%
    );
}
@media (max-width: 640px) {
  .nxfx-glow.nxfx-intro-glow,
  .nx-root[data-nx-tone="dark"] .nxfx-glow.nxfx-intro-glow {
    --nxfx-aura-inset: -18px;
    --nxfx-aura-blur: 26px;
  }
}
@media (hover: hover) {
  .nxfx-glow.nxfx-intro-glow:hover > .nxfx-glow__body {
    border-color: color-mix(in srgb, var(--nxfx-c) 24%, var(--nxfx-border));
  }
}
/* 가는 그라데이션 테두리(왼쪽 위 · 오른쪽 아래가 밝다) */
.nxfx-intro-rim {
  position: absolute;
  inset: 0;
  z-index: 2;
  padding: 1px;
  border-radius: calc(var(--nx-radius, 20px) - 1px);
  pointer-events: none;
  background: linear-gradient(
    140deg,
    color-mix(in srgb, var(--nxfx-c) 74%, transparent),
    color-mix(in srgb, var(--nxfx-c) 10%, transparent) 36%,
    transparent 58%,
    color-mix(in srgb, var(--nxfx-c) 48%, transparent)
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  opacity: 0.6;
  transition: opacity 0.5s var(--nxfx-ease-out, ease-out);
}
/* 윗변 하이라이트 선 */
.nxfx-intro-hl {
  position: absolute;
  top: 0;
  left: 12%;
  right: 12%;
  z-index: 2;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--nxfx-c) 90%, var(--foreground)) 50%, transparent);
  opacity: 0.75;
  transition: opacity 0.5s var(--nxfx-ease-out, ease-out);
}
/* 손이 닿으면 카드 안쪽에 번지는 색(왼쪽 위에서) */
.nxfx-intro-tint {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(160deg, color-mix(in srgb, var(--nxfx-c) var(--nxfx-intro-tint-p), transparent), transparent 62%);
  opacity: 0;
  transition: opacity 0.5s var(--nxfx-ease-out, ease-out);
}
@media (hover: hover) {
  .nxfx-glow:hover .nxfx-intro-rim,
  .nxfx-glow:hover .nxfx-intro-hl,
  .nxfx-glow:hover .nxfx-intro-tint {
    opacity: 1;
  }
}
@media (hover: none) {
  .nxfx-glow:active .nxfx-intro-rim,
  .nxfx-glow:active .nxfx-intro-tint {
    opacity: 1;
    transition-duration: 0.12s;
  }
}

/* ── 이야기 카드(본문을 면 한 장으로) ── */
.nxfx-intro-card {
  justify-content: center;
}
.nxfx-glow.nxfx-intro-glow--text > .nxfx-glow__body {
  padding: clamp(1.5rem, 0.2rem + 2.9vw, 3rem);
}
/* 카드 맨 위 이름표: 표식 선 + 가게 이름(모노) */
.nx-label.nxfx-intro-role {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0;
  letter-spacing: 0.04em;
  white-space: normal;
  overflow-wrap: anywhere;
}
.nxfx-intro-mark {
  display: block;
  flex: none;
  width: 2rem;
  height: 2px;
  border-radius: 2px;
  background-color: var(--nxfx-light, var(--accent));
  box-shadow: var(--nxfx-light-glow, 0 0 0 transparent);
}
/* 카드 첫 문단: 본문 글꼴 굵은 한 줄(머리의 큰 문장보다 한 단 아래 · 본문보다 한 단 위) */
.nxfx-intro-say {
  margin: clamp(0.875rem, 0.75rem + 0.5vw, 1.25rem) 0 0;
  font-family: var(--font-body, "Pretendard Variable", sans-serif);
  font-weight: 600;
  font-size: clamp(1.0625rem, 0.95rem + 0.4vw, 1.25rem); /* 17 → 20 */
  line-height: 1.62;
  letter-spacing: -0.012em;
  color: var(--nx-ink-1, var(--foreground));
  white-space: pre-line;
  word-break: keep-all;
  overflow-wrap: anywhere;
  text-wrap: pretty;
}
/* 문단이 하나뿐인 가게: 그 한 문장을 선언문 눈금으로 세운다(19 → 26px) */
.nxfx-intro-say.nxfx-intro-say--single {
  font-weight: 650;
  font-size: clamp(1.1875rem, 1rem + 0.75vw, 1.625rem);
  line-height: 1.5;
  letter-spacing: -0.02em;
}
/* 문장마다 새 줄(기준 사이트의 '문장마다 줄바꿈') - 글자는 그대로, 줄만 나눈다.
   폰에서는 이어 쓴다: 좁은 폭에서 문장마다 끊으면 "주세요." 같은 외톨이 줄이 문장마다 생겨 오히려 읽기 나쁘다. */
@media (min-width: 641px) {
  .nxfx-intro-sent {
    display: block;
  }
}
.nxfx-intro-rule {
  display: block;
  height: 1px;
  margin-block: clamp(1.125rem, 1rem + 0.6vw, 1.5rem);
  background: linear-gradient(90deg, color-mix(in srgb, var(--nxfx-c, var(--accent)) 55%, transparent), var(--nx-line) 45%, transparent);
}
.nxfx-intro-body {
  display: grid;
  gap: clamp(0.875rem, 0.8rem + 0.35vw, 1.125rem);
}
.nx-body.nxfx-intro-para {
  position: relative;
  max-width: 40rem;
  overflow-wrap: anywhere;
  transition: color 0.35s var(--nxfx-ease-out, ease-out);
}
/* 손이 닿은 문단: 왼쪽에 색 막대가 위에서 아래로 자라고 글이 또렷해진다(기준 사이트의 인터뷰 문단 반응) */
.nx-body.nxfx-intro-para::before {
  content: "";
  position: absolute;
  left: -0.875rem;
  top: calc(var(--nxfx-intro-pt, 0px) + 0.4em);
  bottom: 0.4em;
  width: 2px;
  border-radius: 2px;
  pointer-events: none;
  background: linear-gradient(to bottom, var(--nxfx-light, var(--accent)), color-mix(in srgb, var(--nxfx-intro-c) 28%, transparent));
  box-shadow: var(--nxfx-light-glow, 0 0 0 transparent);
  opacity: 0;
  transform: scaleY(0);
  transform-origin: 50% 0;
  transition:
    transform 0.5s var(--nxfx-ease, cubic-bezier(0.22, 1, 0.36, 1)),
    opacity 0.3s var(--nxfx-ease-out, ease-out);
}
@media (hover: hover) {
  .nx-body.nxfx-intro-para:hover {
    color: var(--nx-ink-1, var(--foreground));
  }
  .nx-body.nxfx-intro-para:hover::before {
    opacity: 1;
    transform: scaleY(1);
  }
}

/* ── 긴 글 접기(폰 전용 · fold.tsx) ──────────────────────────────────
   641px 이상에서는 아무 일도 하지 않는다(버튼 없음 · 전부 보임). 폰에서도 넘칠 때만 접힌다(data-fit 이면 그대로).
   접힌 동안에도 글은 DOM 에 그대로 있다. 아래쪽은 가림값(mask)으로 흐리게 걷는다 - 색을 덧칠하지 않는다. */
.nxfx-intro-fold__btn {
  display: none;
}
@media (max-width: 640px) {
  .nxfx-intro-fold {
    --nxfx-intro-fold-h: 208px;
  }
  .nxfx-intro-fold:not([data-fit]) > .nxfx-intro-fold__in {
    overflow: hidden;
    max-height: var(--nxfx-intro-fold-full, none);
    transition: max-height 0.6s var(--nxfx-ease, cubic-bezier(0.22, 1, 0.36, 1));
  }
  .nxfx-intro-fold[data-open="false"]:not([data-fit]) > .nxfx-intro-fold__in {
    max-height: var(--nxfx-intro-fold-h);
    -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 4.5rem), transparent);
    mask-image: linear-gradient(to bottom, #000 calc(100% - 4.5rem), transparent);
  }
  .nxfx-intro-fold:not([data-fit]) > .nxfx-intro-fold__btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 44px;
    margin-top: 0.75rem;
    padding: 0 1.125rem;
    border: 1px solid var(--nx-line-strong, var(--nx-line));
    border-radius: 999px;
    background-color: color-mix(in srgb, var(--nxfx-intro-c) 7%, transparent);
    color: var(--nx-ink-1, var(--foreground));
    font: inherit;
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition:
      border-color 0.3s var(--nxfx-ease-out, ease-out),
      background-color 0.3s var(--nxfx-ease-out, ease-out),
      transform 0.2s var(--nxfx-ease-out, ease-out);
  }
  .nxfx-intro-fold__btn:active {
    transform: scale(0.97);
    border-color: color-mix(in srgb, var(--nxfx-light, var(--accent)) 60%, transparent);
    background-color: color-mix(in srgb, var(--nxfx-intro-c) 14%, transparent);
  }
  .nxfx-intro-fold__btn:focus-visible {
    outline: 2px solid var(--nxfx-light, var(--accent));
    outline-offset: 3px;
  }
  .nxfx-intro-fold__chev {
    display: block;
    width: 7px;
    height: 7px;
    margin-top: -3px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg);
    transition: transform 0.4s var(--nxfx-ease, cubic-bezier(0.22, 1, 0.36, 1));
  }
  .nxfx-intro-fold[data-open="true"] .nxfx-intro-fold__chev {
    margin-top: 3px;
    transform: rotate(-135deg);
  }
}
/* 스크립트가 꺼진 브라우저: 누를 수 없는 버튼을 보이지 않는다 - 전부 펴고 버튼을 숨긴다 */
@media (scripting: none) {
  .nxfx-intro-fold > .nxfx-intro-fold__in {
    max-height: none !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
  }
  .nxfx-intro-fold > .nxfx-intro-fold__btn {
    display: none !important;
  }
}

/* ── 사진이 없을 때: 전폭 카드 한 장(큰 문장 | 본문) - 빈 칸을 만들지 않는다 ── */
.nxfx-intro-solo {
  margin-top: var(--nx-head-gap, 2rem);
}
.nxfx-intro-split {
  display: grid;
  gap: 0;
}
.nxfx-intro-statement {
  margin: clamp(1rem, 0.85rem + 0.7vw, 1.625rem) 0 0;
  max-width: 34rem;
  font-family: var(--font-body, "Pretendard Variable", sans-serif);
  font-weight: 700;
  font-size: clamp(1.375rem, 1.12rem + 1.08vw, 2rem); /* 22 → 32 */
  line-height: 1.42;
  letter-spacing: -0.026em;
  color: var(--nx-ink-1, var(--foreground));
  white-space: pre-line;
  word-break: keep-all;
  overflow-wrap: anywhere;
  text-wrap: pretty;
}
.nxfx-intro-split--one .nxfx-intro-statement {
  max-width: 48rem;
}
.nxfx-intro-rows {
  margin-top: clamp(1.5rem, 1.3rem + 0.9vw, 2.25rem);
  padding-top: clamp(1.5rem, 1.3rem + 0.9vw, 2.25rem);
  border-top: 1px solid var(--nx-line);
}
.nxfx-intro-rowlist > .nx-body.nxfx-intro-para {
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.125rem); /* 16 → 18 */
}
.nxfx-intro-rowlist > .nx-body + .nx-body {
  --nxfx-intro-pt: clamp(1rem, 0.9rem + 0.45vw, 1.375rem);
  margin-top: var(--nxfx-intro-pt);
  padding-top: var(--nxfx-intro-pt);
  border-top: 1px solid var(--nx-line);
}
@media (min-width: 900px) {
  .nxfx-intro-split {
    padding-block: clamp(0.5rem, 1.2vw, 1.125rem);
  }
  .nxfx-intro-split--two {
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
    align-items: stretch;
  }
  .nxfx-intro-split--two > .nxfx-intro-split__main {
    align-self: center;
    padding-right: clamp(2rem, 4vw, 4rem);
  }
  .nxfx-intro-split--two > .nxfx-intro-rows {
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-top: 0;
    padding-top: 0;
    padding-left: clamp(2rem, 4vw, 4rem);
    border-top: 0;
    border-left: 1px solid var(--nx-line);
  }
}

/* ── 서비스 이름 알약 줄(가게 데이터에 이름이 있을 때만) + 알약 사이 선 ── */
.nxfx-intro-tags {
  min-width: 0;
}
.nx-label.nxfx-intro-tags__label {
  margin: 0 0 0.75rem;
}
.nxfx-intro-tags--solo {
  margin-top: clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem);
}
.nx-pills.nxfx-intro-pills {
  --nxfx-intro-pg: 22px;
  gap: 0.625rem var(--nxfx-intro-pg);
  /* 줄 맨 앞 알약의 왼쪽 선은 가린다(줄이 바뀌어도 선이 허공에 남지 않게). 위 · 아래 · 오른쪽은 들림과 빛 그림자가 보일 만큼 연다 */
  clip-path: inset(-16px -16px -22px 0);
}
/* 바깥 칸(li)은 등장(공용 FxReveal)과 사이 선만 맡고, 들림 · 빛은 안쪽 알약이 맡는다 - 한 요소에 움직임 계통 하나 */
.nxfx-intro-pillwrap {
  position: relative;
  display: flex;
  min-width: 0;
}
.nxfx-intro-pillwrap::before {
  content: "";
  position: absolute;
  right: 100%;
  top: 50%;
  width: var(--nxfx-intro-pg);
  height: 1px;
  pointer-events: none;
  background-color: var(--nxfx-line, color-mix(in srgb, var(--foreground) 14%, transparent));
}
.nxfx-intro-pillwrap:nth-child(2) { --nxfx-intro-i: 1; }
.nxfx-intro-pillwrap:nth-child(3) { --nxfx-intro-i: 2; }
.nxfx-intro-pillwrap:nth-child(4) { --nxfx-intro-i: 3; }
.nxfx-intro-pillwrap:nth-child(5) { --nxfx-intro-i: 4; }
.nxfx-intro-pillwrap:nth-child(6) { --nxfx-intro-i: 5; }
.nxfx-intro-pillwrap:nth-child(7) { --nxfx-intro-i: 6; }
.nxfx-intro-pillwrap:nth-child(8) { --nxfx-intro-i: 7; }
.nx-pill.nxfx-intro-pill {
  overflow-wrap: anywhere;
  transition:
    transform 0.4s var(--nxfx-ease, cubic-bezier(0.22, 1, 0.36, 1)),
    box-shadow 0.4s var(--nxfx-ease-out, ease-out),
    border-color 0.35s var(--nxfx-ease-out, ease-out),
    color 0.35s var(--nxfx-ease-out, ease-out),
    background-color 0.35s var(--nxfx-ease-out, ease-out);
}
@media (hover: hover) {
  /* 줄에 손이 닿으면 알약이 앞에서부터 차례로 밝아진다(0.08초 간격) */
  .nxfx-intro-pills:hover .nx-pill.nxfx-intro-pill {
    border-color: color-mix(in srgb, var(--nxfx-light, var(--accent)) 40%, transparent);
    color: var(--nx-ink-1, var(--foreground));
    transition-delay: calc(var(--nxfx-intro-i, 0) * 80ms);
  }
  /* 손이 닿은 알약: 들리고 아래로 색 빛이 번진다 */
  .nxfx-intro-pills .nx-pill.nxfx-intro-pill:hover {
    transform: translate3d(0, -3px, 0);
    border-color: color-mix(in srgb, var(--nxfx-light, var(--accent)) 72%, transparent);
    background-color: color-mix(in srgb, var(--nxfx-intro-c) 12%, transparent);
    box-shadow:
      0 10px 22px -10px color-mix(in srgb, var(--nxfx-intro-c) 62%, transparent),
      0 0 16px -4px color-mix(in srgb, var(--nxfx-intro-c) 34%, transparent);
    transition-delay: 0s;
  }
}
@media (hover: none) {
  .nx-pill.nxfx-intro-pill:active {
    transform: scale(0.96);
    border-color: color-mix(in srgb, var(--nxfx-light, var(--accent)) 72%, transparent);
    background-color: color-mix(in srgb, var(--nxfx-intro-c) 12%, transparent);
    transition-duration: 0.12s;
  }
}
@keyframes nxfxIntroPill {
  0% { background-position: -150% 0; }
  46%, 100% { background-position: 250% 0; }
}
@media (min-width: 1200px) {
  .nxfx-intro-tags--side,
  .nxfx-intro-tags--solo {
    display: flex;
    align-items: center;
    gap: 1.5rem;
  }
  .nxfx-intro-tags--side > .nx-label.nxfx-intro-tags__label,
  .nxfx-intro-tags--solo > .nx-label.nxfx-intro-tags__label {
    flex: none;
    margin: 0;
  }
  .nxfx-intro-tags--side > .nxfx-intro-pills,
  .nxfx-intro-tags--solo > .nxfx-intro-pills {
    flex: 1 1 auto;
    min-width: 0;
  }
}

/* ── 늘 도는 장식(색 덩이 숨 · 잇는 선의 빛 · 알약 사이 빛) ────────────
   구동기가 살아 있을 때(html.nx-js) · 641px 이상 · 동작 줄이기가 아닐 때만 돈다. 화면 밖에서는 공용 규칙이 멈춘다(data-nxfx-loop). */
@media (min-width: 641px) and (prefers-reduced-motion: no-preference) {
  html.nx-js .nxfx-intro-aura {
    animation: nxfxIntroBreath 9s ease-in-out infinite;
  }
  html.nx-js .nxfx-intro-aura--b {
    animation-duration: 12s;
    animation-delay: -4.5s;
  }
  html.nx-js .nxfx-intro-pillwrap::before {
    background-image: linear-gradient(90deg, transparent, var(--nxfx-light, var(--accent)), transparent);
    background-size: 60% 100%;
    background-repeat: no-repeat;
    background-position: -150% 0;
    animation: nxfxIntroPill 3.6s linear infinite;
    animation-delay: calc(var(--nxfx-intro-i, 0) * 0.45s);
  }
  /* 사진이 늘 아주 천천히 움직인다(20초 왕복 · PC 만) - 화면 밖에서는 공용 규칙이 멈춘다 */
  html.nx-js .nxfx-intro-photo__drift {
    animation: nxfxIntroDrift 20s ease-in-out infinite alternate;
  }
}
@media (min-width: 768px) and (prefers-reduced-motion: no-preference) {
  html.nx-js .nxfx-intro-bridge > i::after {
    opacity: 1;
    animation: nxfxIntroBridge 2.8s linear infinite;
  }
}
@media (prefers-reduced-motion: reduce) {
  .nxfx-intro-dim,
  .nxfx-intro-rim,
  .nxfx-intro-hl,
  .nxfx-intro-tint,
  .nx-body.nxfx-intro-para,
  .nx-body.nxfx-intro-para::before,
  .nx-pill.nxfx-intro-pill,
  .nxfx-intro-fold__in,
  .nxfx-intro-fold__btn,
  .nxfx-intro-fold__chev {
    transition: none !important;
  }
  .nxfx-intro-pills .nx-pill.nxfx-intro-pill:hover {
    transform: none;
  }
}

/* ── 안내 항목(데이터에 있을 때만 - 운영의 '긴 글은 줄로, 짧은 글은 칸으로' 그대로) ── */
.nxfx-intro-notices {
  margin: clamp(3rem, 2.5rem + 2vw, 5rem) 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 1.5rem;
}
@media (min-width: 768px) {
  .nxfx-intro-notices--grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2rem;
  }
  .nxfx-intro-notices--c2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nxfx-intro-notices--c1 { grid-template-columns: minmax(0, 1fr); }
}
.nxfx-intro-notices--rows {
  gap: 0;
  border-top: 1px solid var(--nx-line-strong, var(--nx-line));
}
.nxfx-intro-notice {
  min-width: 0;
}
.nxfx-intro-notices--rows > .nxfx-intro-notice {
  display: grid;
  gap: 0.75rem 2.5rem;
  padding-block: clamp(2rem, 1.7rem + 1.3vw, 3rem);
  border-bottom: 1px solid var(--nx-line);
}
@media (min-width: 768px) {
  .nxfx-intro-notices--rows > .nxfx-intro-notice {
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  }
}
.nxfx-intro-notice__title {
  margin-top: 0.625rem;
  overflow-wrap: anywhere;
  white-space: pre-line;
}
.nxfx-intro-notice__text {
  margin-top: 0.5rem;
  overflow-wrap: anywhere;
}
.nxfx-intro-notices--rows .nxfx-intro-notice__text {
  margin-top: 0;
}