/**
 * 섹션 업그레이드 실험판 - 「약속」 n1 전용 규칙(2026-11-11 · 3차 2026-11-12: 전체 화면 검수 지적 반영).
 *
 * 연출 공용층(_kit/fx)에 없는 것만 여기 둔다. 전부 `nxfx-pm` 으로 시작한다.
 *   · 한 장(sheet)을 1px 선으로 나눈 칸 - 기준 사이트 「숫자 4칸 띠」의 말씨(테두리 방식 · 마지막 줄은 남는 칸을 채운다)
 *   · 머리의 알약 줄(FxSteps) - 알약 모양 · 차례로 켜지는 박자 · 손 닿은 칸과 같은 번호의 알약이 켜지는 짝
 *   · 칸마다 늘 켜진 2px 서명선(가로 칸 = 윗변 · 두 열 줄 목록 = 왼변) + 그 위를 01 → 02 → 03 차례로 건너가는 빛(기준 사이트 adNodeFlow)
 *   · 줄 목록(6줄까지) = 스크롤 진행선(FxTimeline)의 자리 잡기 - 줄기 · 점을 한 장 안쪽 줄에 세운다(배치값만 · 움직임은 공용층 그대로)
 *   · 손 닿은 칸만: 윗면 빛 번짐 · 아랫변 흐름선 · 글 들림 · 번호 · 제목
 *   · 등장 직후 한 번 지나가는 빛 쓸림 · 머리 실금이 그어지는 등장
 *
 * 색은 사이트 토큰(--accent · --foreground · --background)과 공용층 토큰(--nx-* · --nxfx-*)만 섞는다.
 * 숨김 · 반복은 `html.nx-js` 일 때만(still=1 · 동작 줄이기 · 스크립트 실패면 끝 상태).
 * ⚠️ 공용층 클래스(.nxfx-glow · .nxfx-stag · .nxfx-tl · .nxfx-steps …)의 opacity · transform · animation 은 덮지 않는다
 *    - 자리(left · top · width · padding · display)와 세기 토큰만 바꾼다.
 */

/* ── 구획 · 세기 토큰(밝은 테마 기본) ─────────────────────────── */
.nxfx-pm {
  border-top: 1px solid var(--nx-line);
  --nxfx-pm-pad: clamp(1.375rem, 1rem + 1.6vw, 2.5rem);
  --nxfx-pm-fill: 12%;
  --nxfx-pm-sig-a: 92%;
  --nxfx-pm-glow-a: 32%;
  --nxfx-pm-run-a: 60%;
  --nxfx-pm-ring-a: 24%;
  --nxfx-pm-sweep-c: color-mix(in srgb, var(--accent) 12%, transparent);
  --nxfx-pm-sweep-hot: color-mix(in srgb, var(--accent) 30%, transparent);
  /* 구획의 빛 색(색상각을 돌리지 않은 것) - 한 장의 뒤 광채 · 머리 실금에 쓴다 */
  --nxfx-pm-c0: var(--accent);
}
@supports (color: oklch(from red l c h)) {
  /* 무채색에 가까운 강조색은 채도를 조금 올려 빛이 회색 안개로 보이지 않게 한다(색상각은 가게 색 그대로) */
  .nxfx-pm {
    --nxfx-pm-c0: oklch(from var(--accent) l min(calc(c * 5), max(c, 0.06)) h);
  }
}
/* 어두운 테마: 넓고 흐린 안개 대신 밝은 심 + 좁은 번짐 */
.nx-root[data-nx-tone="dark"] .nxfx-pm {
  --nxfx-pm-fill: 13%;
  --nxfx-pm-sig-a: 80%;
  --nxfx-pm-glow-a: 40%;
  --nxfx-pm-run-a: 66%;
  --nxfx-pm-ring-a: 28%;
  --nxfx-pm-sweep-c: color-mix(in srgb, var(--foreground) 7%, transparent);
  --nxfx-pm-sweep-hot: color-mix(in srgb, var(--foreground) 26%, transparent);
}
/* 위아래 여백 - 운영은 좁힌 구획이지만(SECTION_PAD_TIGHT) 전체 화면에서 얇은 띠로 읽혔다. 좁은 값과 보통 값의 사이(60 → 104px)로 키운다 */
.nxfx-pm__scene {
  /* 2026-11-12 섹션 여백과 같은 비율로 줄임(60→104 → 46→72px) */
  padding-block: clamp(2.75rem, 2.1rem + 3.1vw, 4.5rem);
  padding-inline: 1rem;
}
@media (min-width: 768px) {
  .nxfx-pm__scene { padding-inline: 1.5rem; }
}
@media (min-width: 1024px) {
  .nxfx-pm__scene { padding-inline: 2rem; }
}
/* 어두운 바탕: 점빛(cosmic)의 바탕 물들임을 낮춘다 - 무채색 강조색이 뿌연 회색 안개로 고이지 않게. 점만 또렷이 남는다 */
.nx-root[data-nx-tone="dark"] .nxfx-pm__scene {
  --nxfx-cosmic-p: 6%;
  --nxfx-bd-aura-p: 8%;
}

/* 배경 장식(격자 · 빛 · 세로 빛줄기)이 구획 끝에서 칼같이 잘리지 않게 위아래를 흐린다 */
.nxfx-pm__scene > .nxfx-bd {
  -webkit-mask-image: linear-gradient(
    180deg,
    transparent 0,
    color-mix(in srgb, var(--foreground) 100%, transparent) 3rem,
    color-mix(in srgb, var(--foreground) 100%, transparent) calc(100% - 3.5rem),
    transparent 100%
  );
  mask-image: linear-gradient(
    180deg,
    transparent 0,
    color-mix(in srgb, var(--foreground) 100%, transparent) 3rem,
    color-mix(in srgb, var(--foreground) 100%, transparent) calc(100% - 3.5rem),
    transparent 100%
  );
}

/* ── 머리: 미니라벨 + 실금 + 알약 줄(큰 제목은 그리지 않는다 - 2026-10-08) ───── */
.nxfx-pm-head {
  margin-bottom: clamp(1.5rem, 1.1rem + 1.7vw, 2.75rem);
}
.nxfx-pm-head__row {
  display: flex;
  align-items: center;
  gap: clamp(0.875rem, 0.6rem + 1vw, 1.5rem);
  min-height: 1.5rem;
}
.nxfx-pm-head__row > .nx-label {
  flex: none;
}
.nxfx-pm-head__rule {
  flex: 1 1 auto;
  height: 1px;
  min-width: 2rem;
  background: linear-gradient(90deg, color-mix(in srgb, var(--nxfx-pm-c0) 62%, transparent), var(--nx-line) 38%, transparent);
  transform-origin: left center;
  transition: transform 1.1s var(--nxfx-ease) 0.1s;
}
html.nx-js .nxfx-rv:not(.nxfx-in) .nxfx-pm-head__rule {
  transform: scaleX(0);
}
.nxfx-pm-head__lead > .nx-sub {
  margin-top: clamp(0.875rem, 0.7rem + 0.7vw, 1.25rem);
}
/* 알약 줄: 768px 부터 알약(번호 + 배지 글), 그 아래는 번호 동그라미 한 줄(아래 768px 미만 규칙) */
.nxfx-pm-head__rail {
  display: none;
}
@media (min-width: 768px) {
  .nxfx-pm-head--rail {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    column-gap: clamp(0.75rem, 0.4rem + 0.9vw, 1.25rem);
  }
  .nxfx-pm-head__rail {
    display: block;
    min-width: 0;
  }
  /* 실금이 알약 줄까지 이어진다(끝을 흐리지 않는다) */
  .nxfx-pm-head--rail .nxfx-pm-head__rule {
    background: linear-gradient(90deg, color-mix(in srgb, var(--nxfx-pm-c0) 62%, transparent), var(--nx-line-strong, var(--nx-line)) 42%, var(--nxfx-line));
  }
}

/* 알약 줄(FxSteps) - 알약은 제 크기만큼만 선다(공용층은 같은 폭으로 늘린다) */
.nxfx-pm .nxfx-pm-rail {
  align-items: center;
}
.nxfx-pm .nxfx-pm-rail > .nxfx-steps__item {
  flex: 0 0 auto;
}
/* 번호만 적는 줄(5개부터)은 연결선을 짧게 - 8개도 한 줄에 선다 */
.nxfx-pm .nxfx-pm-rail--nums > .nxfx-link {
  width: clamp(12px, 1.9vw, 30px);
}
.nxfx-pm-pill {
  --nxfx-pm-c: var(--accent);
  --nxfx-pm-hot: var(--accent);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  height: 2.125rem;
  padding: 0 0.875rem 0 0.75rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--nxfx-pm-c) 36%, transparent);
  background-color: color-mix(in srgb, var(--nxfx-pm-c) 7%, transparent);
  font-family: var(--font-sdv-mono), "Pretendard Variable", "Pretendard", sans-serif;
  font-size: 0.75rem;
  line-height: 1;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  color: color-mix(in srgb, var(--foreground) 62%, transparent);
  user-select: none;
  transition:
    border-color 0.4s var(--nxfx-ease-out),
    background-color 0.4s var(--nxfx-ease-out),
    box-shadow 0.4s var(--nxfx-ease-out),
    color 0.4s var(--nxfx-ease-out);
}
@supports (color: oklch(from red l c h)) {
  .nxfx-pm-pill {
    --nxfx-pm-c: oklch(from var(--accent) l min(calc(c * 5), max(c, 0.06)) calc(h + var(--nxfx-pm-hue, 0) * min(1, c * 12)));
    --nxfx-pm-hot: oklch(from var(--accent) calc(l + 0.1) min(calc(c * 6), max(calc(c * 1.25), 0.075)) calc(h + var(--nxfx-pm-hue, 0) * min(1, c * 12)));
  }
  .nxfx-pm-pill[data-k="0"],
  .nxfx-pm-pill[data-k="3"],
  .nxfx-pm-pill[data-k="6"] { --nxfx-pm-hue: -26; }
  .nxfx-pm-pill[data-k="2"],
  .nxfx-pm-pill[data-k="5"] { --nxfx-pm-hue: 26; }
}
.nx-root[data-nx-tone="dark"] .nxfx-pm-pill {
  --nxfx-pm-hot: color-mix(in oklab, var(--foreground) 46%, var(--nxfx-pm-c));
}
.nxfx-pm-pill__n {
  font-variant-numeric: tabular-nums;
  color: color-mix(in srgb, var(--nxfx-pm-c) 78%, var(--foreground));
}
.nxfx-pm-pill__t {
  max-width: 9em;
  overflow: hidden;
  text-overflow: ellipsis;
}
.nxfx-pm-rail--nums .nxfx-pm-pill {
  justify-content: center;
  width: 2.125rem;
  padding: 0;
  letter-spacing: 0.06em;
  text-indent: 0.06em;
}
/* 알약 넷이 배지 글까지 적으면 좁은 PC 폭에서 넘친다 - 1024px 아래에서는 번호만 */
@media (max-width: 1023px) {
  .nxfx-pm-rail:has(> :nth-child(7)) .nxfx-pm-pill__t {
    display: none;
  }
}
/* 폰 · 좁은 태블릿(768px 아래): 번호 동그라미만 가로 한 줄 - 미니라벨 오른쪽에 선다.
   공용층 연결선은 이 폭에서 세로로 서므로 감추고(배치만), 동그라미 사이는 제 실금으로 잇는다. 빛은 동그라미가 차례로 켜지는 것으로 흐른다. */
@media (max-width: 767px) {
  .nxfx-pm-head--rail {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    column-gap: 0.75rem;
  }
  .nxfx-pm-head--rail .nxfx-pm-head__row {
    min-height: 1.625rem;
  }
  .nxfx-pm-head--rail .nxfx-pm-head__rule {
    min-width: 0.75rem;
    background: linear-gradient(90deg, color-mix(in srgb, var(--nxfx-pm-c0) 62%, transparent), var(--nx-line-strong, var(--nx-line)) 42%, var(--nxfx-line));
  }
  .nxfx-pm-head__rail {
    display: block;
    min-width: 0;
  }
  .nxfx-pm .nxfx-pm-rail {
    flex-direction: row;
  }
  .nxfx-pm .nxfx-pm-rail > .nxfx-link {
    display: none;
  }
  .nxfx-pm .nxfx-pm-rail > .nxfx-steps__item {
    position: relative;
  }
  .nxfx-pm .nxfx-pm-rail > .nxfx-steps__item ~ .nxfx-steps__item {
    margin-left: 0.5rem;
  }
  .nxfx-pm .nxfx-pm-rail > .nxfx-steps__item ~ .nxfx-steps__item::before {
    content: "";
    position: absolute;
    right: 100%;
    top: 50%;
    width: 0.5rem;
    height: 1px;
    background: var(--nxfx-line);
  }
  .nxfx-pm .nxfx-pm-rail .nxfx-pm-pill {
    justify-content: center;
    width: 1.625rem;
    height: 1.625rem;
    padding: 0;
    font-size: 0.625rem;
    letter-spacing: 0.04em;
    text-indent: 0.04em;
  }
  .nxfx-pm .nxfx-pm-rail .nxfx-pm-pill__t {
    display: none;
  }
  /* 일곱 개부터는 간격을 좁힌다(360px 폭에서도 한 줄) */
  .nxfx-pm .nxfx-pm-rail:has(> :nth-child(13)) > .nxfx-steps__item ~ .nxfx-steps__item {
    margin-left: 0.25rem;
  }
  .nxfx-pm .nxfx-pm-rail:has(> :nth-child(13)) > .nxfx-steps__item ~ .nxfx-steps__item::before {
    width: 0.25rem;
  }
  .nxfx-pm .nxfx-pm-rail:has(> :nth-child(13)) .nxfx-pm-pill {
    width: 1.5rem;
    height: 1.5rem;
  }
}
/* 차례로 켜진다 - 공용층 연결선의 빛(2.8초 · 칸마다 0.7초 뒤)과 같은 박자: 빛이 알약을 떠나는 순간 그 알약이 켜진다 */
html.nx-js .nxfx-pm-pill {
  animation: nxfxPmPill 2.8s linear calc(var(--nxfx-pm-k, 0) * 0.7s) infinite;
}
@keyframes nxfxPmPill {
  0%, 46%, 100% {
    border-color: color-mix(in srgb, var(--nxfx-pm-c) 36%, transparent);
    background-color: color-mix(in srgb, var(--nxfx-pm-c) 7%, transparent);
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--nxfx-pm-c) 0%, transparent);
  }
  10% {
    border-color: color-mix(in srgb, var(--nxfx-pm-hot) 88%, transparent);
    background-color: color-mix(in srgb, var(--nxfx-pm-c) 17%, transparent);
    box-shadow:
      0 0 0 3px color-mix(in srgb, var(--nxfx-pm-c) 14%, transparent),
      0 0 18px -2px color-mix(in srgb, var(--nxfx-pm-hot) 62%, transparent);
  }
}

/* ── 한 장 ───────────────────────────────────────────────
   한 장 전체의 손 반응은 가늘고 조용하게(공용층 토큰만 낮춘다) - 반응의 주인은 손 닿은 칸이다.
   들림은 한 장이 아니라 칸의 글이 한다(FxGlowCard lift=0 → 옆으로 커지지 않는다). */
/* 한 장의 등장: 칸이 켜지는 것과 같은 순간에 한 장이 떠오른다(칸이 아직 숨어 있을 때 빈 판만 먼저 보이지 않게).
   내 덩어리(.nxfx-pm-frame)만 건드린다 - :has 를 모르는 브라우저에서는 이 규칙이 통째로 빠져 한 장이 그냥 보인다. */
.nxfx-pm-frame {
  transition:
    opacity 0.55s var(--nxfx-ease-out),
    transform 0.9s var(--nxfx-ease-out);
}
html.nx-js .nxfx-pm-frame:has(.nxfx-pm-cells:not(.nxfx-in)),
html.nx-js .nxfx-pm-frame:has(.nxfx-pm-tl):not(:has(.nxfx-seen)) {
  opacity: 0;
  transform: translate3d(0, 18px, 0);
}
.nxfx-pm .nxfx-pm-sheet {
  --nxfx-c: var(--nxfx-pm-c0);
  --nxfx-aura-o: 0.26;
  --nxfx-aura-o-h: 0.4;
  --nxfx-edge-p: 20%;
  --nxfx-halo-p: 10%;
  --nxfx-fill-p: 4%;
}
.nx-root[data-nx-tone="dark"] .nxfx-pm .nxfx-pm-sheet {
  --nxfx-aura-o: 0.5;
  --nxfx-aura-o-h: 0.66;
  --nxfx-aura-inset: -20px;
  --nxfx-aura-blur: 26px;
  --nxfx-edge-p: 11%;
  --nxfx-halo-p: 7%;
  --nxfx-fill-p: 4%;
}

/* ── 칸 격자: 테두리 방식(오른쪽 · 아래 선을 한 장 밖으로 1px 밀어 겉 선과 겹치지 않게) ──
   칸 수 규칙은 운영 cardGridCols 와 같다(2 · 4개는 두 칸 · 그 밖은 세 칸).
   세 칸은 640px 부터 가로로 선다 - 한 장으로 묶인 칸은 카드보다 좁아도 읽힌다. */
.nxfx-pm-cells {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  margin: 0 -1px -1px 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 640px) {
  .nxfx-pm-cells--c2,
  .nxfx-pm-cells--c4,
  .nxfx-pm-cells--many {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .nxfx-pm-cells--c3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
/* 5개부터(두 칸 폭): 홀수면 마지막 칸이 줄을 다 쓴다 - 빈 칸이 드러나지 않는다 */
@media (min-width: 640px) and (max-width: 1023px) {
  .nxfx-pm-cells--many > .nxfx-pm-cell:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }
}
/* 5개부터(세 칸 폭): 여섯 줄눈 위에 두 눈씩 - 마지막 줄에 하나 남으면 줄을 다 쓰고, 둘 남으면 반씩 나눈다 */
@media (min-width: 1024px) {
  .nxfx-pm-cells--many {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
  .nxfx-pm-cells--many > .nxfx-pm-cell {
    grid-column: span 2;
  }
  .nxfx-pm-cells--many > .nxfx-pm-cell:last-child:nth-child(3n + 1) {
    grid-column: 1 / -1;
  }
  .nxfx-pm-cells--many > .nxfx-pm-cell:nth-last-child(2):nth-child(3n + 1),
  .nxfx-pm-cells--many > .nxfx-pm-cell:last-child:nth-child(3n + 2) {
    grid-column: span 3;
  }
  /* 줄 목록 두 열(7줄부터): 홀수면 마지막 줄이 두 열을 다 쓴다 */
  .nxfx-pm-cells--duo {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .nxfx-pm-cells--duo > .nxfx-pm-cell:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }
}

/* ── 칸 ──────────────────────────────────────────────── */
.nxfx-pm-cell {
  /* 칸의 빛 색 = 가게 강조색(밝기 · 채도 그대로, 색상각만 칸마다 살짝) · 달리는 빛의 심 = 그보다 한 단 밝게 */
  --nxfx-pm-c: var(--accent);
  --nxfx-pm-hot: var(--accent);
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  border-right: 1px solid var(--nxfx-border);
  border-bottom: 1px solid var(--nxfx-border);
}
@supports (color: oklch(from red l c h)) {
  .nxfx-pm-cell {
    --nxfx-pm-c: oklch(from var(--accent) l min(calc(c * 5), max(c, 0.06)) calc(h + var(--nxfx-pm-hue, 0) * min(1, c * 12)));
    --nxfx-pm-hot: oklch(from var(--accent) calc(l + 0.1) min(calc(c * 6), max(calc(c * 1.25), 0.075)) calc(h + var(--nxfx-pm-hue, 0) * min(1, c * 12)));
  }
  .nxfx-pm-cell:nth-child(3n + 1) { --nxfx-pm-hue: -26; }
  .nxfx-pm-cell:nth-child(3n + 3) { --nxfx-pm-hue: 26; }
}
.nx-root[data-nx-tone="dark"] .nxfx-pm-cell {
  --nxfx-pm-hot: color-mix(in oklab, var(--foreground) 46%, var(--nxfx-pm-c));
}

/* 손 닿을 때 윗면에서 번지는 빛(기준 사이트 숫자 띠의 칸 호버) */
.nxfx-pm-cell::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(180deg, color-mix(in srgb, var(--nxfx-pm-c) var(--nxfx-pm-fill), transparent), transparent 58%);
  transition: opacity 0.5s var(--nxfx-ease-out);
}
/* 손 닿은 칸의 안쪽 빛 테 + 바닥 번짐(칸 단위의 빛 그림자) */
.nxfx-pm-cell::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--nxfx-pm-c) var(--nxfx-pm-ring-a), transparent),
    inset 0 -36px 44px -38px color-mix(in srgb, var(--nxfx-pm-c) var(--nxfx-pm-glow-a), transparent);
  transition: opacity 0.5s var(--nxfx-ease-out);
}

/* 칸 안(글) - 손 닿으면 이 덩어리만 들린다 */
.nxfx-pm-cell__in {
  position: relative;
  z-index: 1;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: var(--nxfx-pm-pad) var(--nxfx-pm-pad) calc(var(--nxfx-pm-pad) * 1.3);
  transition: transform 0.55s var(--nxfx-ease);
}

/* ── 서명선: 늘 켜진 2px(가로 칸 = 윗변). 옆으로만 자르고 위아래는 열어 둔다 → 빛 번짐이 칸 안으로 흘러나온다 ── */
.nxfx-pm-sig {
  position: absolute;
  z-index: 2;
  pointer-events: none;
  top: 0;
  left: 0;
  right: -1px;
  height: 2px;
  opacity: 0.78;
  background: linear-gradient(90deg, transparent 3%, color-mix(in srgb, var(--nxfx-pm-c) var(--nxfx-pm-sig-a), transparent) 38%, color-mix(in srgb, var(--nxfx-pm-c) var(--nxfx-pm-sig-a), transparent) 62%, transparent 97%);
  -webkit-clip-path: inset(-1.75rem 0 -1.75rem 0);
  clip-path: inset(-1.75rem 0 -1.75rem 0);
  transform-origin: left center;
  transition:
    opacity 0.45s var(--nxfx-ease-out),
    filter 0.45s var(--nxfx-ease-out),
    transform 0.9s var(--nxfx-ease) calc(180ms + var(--nxfx-i, 0) * 120ms);
}
/* 등장: 칸이 튀어 오를 때 서명선이 그어진다 */
html.nx-js .nxfx-pm-cells:not(.nxfx-in) .nxfx-pm-sig {
  transform: scaleX(0);
}
/* 건너가는 빛 - ::before = 번짐(타원) · ::after = 밝은 심(3px). 칸 폭의 절반 길이 */
.nxfx-pm-sig::before,
.nxfx-pm-sig::after {
  content: "";
  position: absolute;
  left: 0;
  width: 50%;
  transform: translate3d(-101%, 0, 0);
}
.nxfx-pm-sig::before {
  top: -19px;
  height: 40px;
  background: radial-gradient(50% 50% at 50% 50%, color-mix(in srgb, var(--nxfx-pm-hot) var(--nxfx-pm-run-a), transparent), transparent 100%);
}
.nxfx-pm-sig::after {
  top: -0.5px;
  height: 3px;
  border-radius: 3px;
  background: linear-gradient(90deg, transparent, var(--nxfx-pm-hot) 36%, var(--nxfx-pm-hot) 64%, transparent);
}
/* 칸마다 1.6초씩 늦게 출발 · 한 칸을 2.4초에 건넌다(같은 속도) → 앞 칸을 빠져나가는 순간 다음 칸으로 들어선다 */
html.nx-js .nxfx-pm-sig::before,
html.nx-js .nxfx-pm-sig::after {
  animation: nxfxPmRunX 6.4s linear calc(1.3s + var(--nxfx-i, 0) * 1.6s) infinite;
}
@keyframes nxfxPmRunX {
  0% { transform: translate3d(-101%, 0, 0); }
  37.5%, 100% { transform: translate3d(201%, 0, 0); }
}
@keyframes nxfxPmRunY {
  0% { transform: translate3d(0, -101%, 0); }
  37.5%, 100% { transform: translate3d(0, 201%, 0); }
}

/* ── 아랫변 흐름선: 손 닿은 칸에만 켜지고, 그 위로 빛이 흐른다 ───────── */
.nxfx-pm-flow {
  position: absolute;
  z-index: 2;
  pointer-events: none;
  left: 1rem;
  right: 1rem;
  bottom: 0;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--nxfx-pm-c) 78%, transparent), transparent);
  transition: opacity 0.45s var(--nxfx-ease-out);
}
.nxfx-pm-flow::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 40%;
  background: linear-gradient(90deg, transparent, var(--nxfx-pm-hot), transparent);
  transform: translate3d(-101%, 0, 0);
}
@keyframes nxfxPmFlow {
  from { transform: translate3d(-101%, 0, 0); }
  to { transform: translate3d(251%, 0, 0); }
}

/* ── 등장 직후 한 번: 빛 쓸림(칸이 켜진 뒤 0.5초) ─────────────── */
.nxfx-pm-sweep {
  position: absolute !important;
  inset: 0;
  z-index: 3 !important;
  pointer-events: none;
  overflow: hidden;
}
.nxfx-pm-sweep::after {
  content: "";
  position: absolute;
  top: -20%;
  bottom: -20%;
  left: 0;
  width: 34%;
  opacity: 0;
  background: linear-gradient(
    90deg,
    transparent,
    var(--nxfx-pm-sweep-c) 30%,
    var(--nxfx-pm-sweep-hot) 50%,
    var(--nxfx-pm-sweep-c) 70%,
    transparent
  );
  transform: translate3d(-130%, 0, 0) skewX(-14deg);
}
html.nx-js .nxfx-pm-cells.nxfx-in ~ .nxfx-pm-sweep::after,
html.nx-js .nxfx-pm-tl:has(.nxfx-seen) ~ .nxfx-pm-sweep::after {
  animation: nxfxPmSweep 1.25s cubic-bezier(0.4, 0, 0.2, 1) 0.5s 1 both;
}
@keyframes nxfxPmSweep {
  0% { transform: translate3d(-130%, 0, 0) skewX(-14deg); opacity: 0; }
  18% { opacity: 1; }
  78% { opacity: 1; }
  100% { transform: translate3d(330%, 0, 0) skewX(-14deg); opacity: 0; }
}

/* ── 가로 칸(운영 A): 머리줄(번호 + 배지) → 제목 → 본문 ─────────────── */
.nxfx-pm-cell__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  min-height: 1.625rem;
}
/* 번호 - 운영 A 그대로 작은 고정폭 글씨(13px · 자간 0.25em · 본문색 40%). 앞의 점은 빛이 건너갈 때 켜지는 마디 */
.nxfx-pm-idx {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 0.625rem;
  font-family: var(--font-sdv-mono), "Pretendard Variable", "Pretendard", sans-serif;
  font-size: 0.8125rem;
  line-height: 1.55;
  letter-spacing: 0.25em;
  font-variant-numeric: tabular-nums;
  color: color-mix(in srgb, var(--foreground) 40%, transparent);
  user-select: none;
  transition: color 0.45s var(--nxfx-ease-out);
}
.nxfx-pm-idx::before {
  content: "";
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--nxfx-pm-c);
  opacity: 0.5;
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--nxfx-pm-c) 0%, transparent);
  transition:
    opacity 0.45s var(--nxfx-ease-out),
    box-shadow 0.45s var(--nxfx-ease-out);
}
html.nx-js .nxfx-pm-idx::before {
  animation: nxfxPmNode 6.4s linear calc(1.3s + var(--nxfx-i, 0) * 1.6s) infinite;
}
@keyframes nxfxPmNode {
  0%, 30%, 100% {
    opacity: 0.5;
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--nxfx-pm-c) 0%, transparent);
  }
  7% {
    opacity: 1;
    box-shadow:
      0 0 0 4px color-mix(in srgb, var(--nxfx-pm-c) 24%, transparent),
      0 0 12px 2px color-mix(in srgb, var(--nxfx-pm-hot) 60%, transparent);
  }
}

/* 배지 - 운영 그대로 채운 알약(강조색 바탕 · 그 위 글자 토큰 · 고정폭 · 자간 0.18em) */
.nxfx-pm-tag {
  display: inline-flex;
  flex: none;
  align-items: center;
  max-width: 100%;
  padding: 0.25rem 0.625rem;
  border-radius: 999px;
  background-color: var(--accent);
  color: var(--cta-ink, var(--background));
  font-family: var(--font-sdv-mono), "Pretendard Variable", "Pretendard", sans-serif;
  font-size: 0.6875rem;
  line-height: 1.5;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: box-shadow 0.45s var(--nxfx-ease-out);
}

.nxfx-pm-title {
  margin-top: clamp(1rem, 0.85rem + 0.7vw, 1.5rem);
  text-wrap: balance;
  transition:
    color 0.45s var(--nxfx-ease-out),
    text-shadow 0.45s var(--nxfx-ease-out);
}
.nxfx-pm-body {
  margin-top: 0.875rem;
  max-width: 34rem;
  text-wrap: pretty;
}

/* 2칸: 칸이 넓다 - 안 여백과 제목을 한 단 키운다 */
@media (min-width: 768px) {
  .nxfx-pm-cells--c2 > .nxfx-pm-cell > .nxfx-pm-cell__in {
    padding: calc(var(--nxfx-pm-pad) * 1.15) calc(var(--nxfx-pm-pad) * 1.2) calc(var(--nxfx-pm-pad) * 1.45);
  }
  .nxfx-pm-cells--c2 .nxfx-pm-title {
    font-size: clamp(1.5rem, 1.2rem + 0.9vw, 2rem);
  }
  .nxfx-pm-cells--c2 .nxfx-pm-body {
    max-width: 30rem;
  }
}
/* 1칸: 본문 폭을 다 쓰는 넓은 띠 - 왼쪽에 머리줄 + 제목, 오른쪽에 본문(가운데로 좁혀 띄우지 않는다) */
.nxfx-pm-cells--c1 .nxfx-pm-title {
  font-size: clamp(1.5rem, 1.15rem + 1.5vw, 2.375rem);
}
@media (min-width: 768px) {
  .nxfx-pm-cells--c1 > .nxfx-pm-cell > .nxfx-pm-cell__in {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    grid-template-rows: auto 1fr;
    column-gap: clamp(2rem, 0.5rem + 4vw, 4.5rem);
    padding: calc(var(--nxfx-pm-pad) * 1.2) calc(var(--nxfx-pm-pad) * 1.3) calc(var(--nxfx-pm-pad) * 1.4);
  }
  /* 머리 줄(번호 · 배지)은 칸 전체 폭 - 배지가 칸 오른쪽 끝에 선다(여러 칸일 때와 같은 자리) */
  .nxfx-pm-cells--c1 .nxfx-pm-cell__top {
    grid-column: 1 / -1;
    grid-row: 1;
  }
  .nxfx-pm-cells--c1 .nxfx-pm-title {
    grid-column: 1;
    grid-row: 2;
  }
  .nxfx-pm-cells--c1 .nxfx-pm-body {
    grid-column: 2;
    grid-row: 2;
    align-self: end;
    margin-top: 0;
    max-width: 40rem;
    font-size: clamp(1rem, 0.93rem + 0.3vw, 1.125rem);
  }
  /* 본문이 없으면 한 단으로 */
  .nxfx-pm-cells--c1 > .nxfx-pm-cell--nobody > .nxfx-pm-cell__in {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ── 줄 목록(운영 C 의 뼈대): 물러난 큰 번호 | 제목 + 배지(제목 옆) · 본문 ─────── */
.nxfx-pm-cell--row {
  --nxfx-pm-row-py: clamp(1.5rem, 1.25rem + 1.1vw, 2.375rem);
  --nxfx-pm-num-size: 3rem;
}
.nxfx-pm-cell--row .nxfx-pm-cell__in {
  display: block;
  padding-block: var(--nxfx-pm-row-py);
}
/* 번호 - 운영 C 와 같은 글씨(디스플레이 · 굵기 300 · 폰 48 → PC 72px · 강조색 옅게) */
.nxfx-pm-num {
  display: block;
  margin-bottom: 0.75rem;
  font-family: var(--font-sdv-display), "Pretendard Variable", "Pretendard", sans-serif;
  font-size: var(--nxfx-pm-num-size, 3rem);
  line-height: 1;
  font-weight: 300;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: color-mix(in srgb, var(--accent) calc(var(--tint-behind, 16%) * 2), transparent);
  user-select: none;
  transition: color 0.5s var(--nxfx-ease-out);
}
/* 빛이 그 줄을 지날 때 번호가 한 번 밝아진다(01 → 02 → 03) */
html.nx-js .nxfx-pm-num {
  animation: nxfxPmNum 6.4s linear calc(1.3s + var(--nxfx-i, 0) * 1.6s) infinite;
}
@keyframes nxfxPmNum {
  0%, 44%, 100% { color: color-mix(in srgb, var(--accent) calc(var(--tint-behind, 16%) * 2), transparent); }
  16% { color: color-mix(in srgb, var(--nxfx-pm-hot) 74%, transparent); }
}
.nxfx-pm-row__main {
  min-width: 0;
}
.nxfx-pm-row__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
  min-width: 0;
}
.nxfx-pm-cell--row .nxfx-pm-title {
  margin-top: 0;
  font-size: clamp(1.5rem, 1.38rem + 0.5vw, 1.75rem);
  text-wrap: pretty;
}
.nxfx-pm-cell--row .nxfx-pm-body {
  margin-top: 0.75rem;
  max-width: 48rem;
}
/* 줄의 서명선은 왼변에 세로로 - 줄마다 이어져 한 줄기가 되고, 빛이 위에서 아래로 줄을 차례로 건넌다 */
.nxfx-pm-cell--row .nxfx-pm-sig {
  top: 0;
  bottom: -1px;
  left: 0;
  right: auto;
  width: 2px;
  height: auto;
  background: color-mix(in srgb, var(--nxfx-pm-c) var(--nxfx-pm-sig-a), transparent);
  -webkit-clip-path: inset(0 -1.75rem 0 -1.75rem);
  clip-path: inset(0 -1.75rem 0 -1.75rem);
  transform-origin: center top;
}
.nxfx-pm-cell--row:first-child > .nxfx-pm-sig {
  background: linear-gradient(180deg, transparent 12%, color-mix(in srgb, var(--nxfx-pm-c) var(--nxfx-pm-sig-a), transparent) 46%);
}
.nxfx-pm-cell--row:last-child > .nxfx-pm-sig {
  background: linear-gradient(0deg, transparent 12%, color-mix(in srgb, var(--nxfx-pm-c) var(--nxfx-pm-sig-a), transparent) 46%);
}
.nxfx-pm-cell--row:only-child > .nxfx-pm-sig {
  background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--nxfx-pm-c) var(--nxfx-pm-sig-a), transparent) 50%, transparent);
}
@media (min-width: 1024px) {
  /* 두 열: 열마다 줄기의 위 · 아래 끝을 흐린다 */
  .nxfx-pm-cells--duo > .nxfx-pm-cell--row:nth-child(2) > .nxfx-pm-sig {
    background: linear-gradient(180deg, transparent 12%, color-mix(in srgb, var(--nxfx-pm-c) var(--nxfx-pm-sig-a), transparent) 46%);
  }
  .nxfx-pm-cells--duo > .nxfx-pm-cell--row:nth-last-child(2) > .nxfx-pm-sig {
    background: linear-gradient(0deg, transparent 12%, color-mix(in srgb, var(--nxfx-pm-c) var(--nxfx-pm-sig-a), transparent) 46%);
  }
}
html.nx-js .nxfx-pm-cells:not(.nxfx-in) .nxfx-pm-cell--row > .nxfx-pm-sig {
  transform: scaleY(0);
}
.nxfx-pm-cell--row .nxfx-pm-sig::before,
.nxfx-pm-cell--row .nxfx-pm-sig::after {
  top: 0;
  width: auto;
  height: 50%;
  transform: translate3d(0, -101%, 0);
}
.nxfx-pm-cell--row .nxfx-pm-sig::before {
  left: -11px;
  width: 24px;
}
.nxfx-pm-cell--row .nxfx-pm-sig::after {
  left: -0.5px;
  width: 3px;
  background: linear-gradient(180deg, transparent, var(--nxfx-pm-hot) 36%, var(--nxfx-pm-hot) 64%, transparent);
}
html.nx-js .nxfx-pm-cell--row .nxfx-pm-sig::before,
html.nx-js .nxfx-pm-cell--row .nxfx-pm-sig::after {
  animation-name: nxfxPmRunY;
}
/* 줄의 손 반응은 왼쪽에서 번진다. 안쪽 테는 긋지 않는다(어두운 바탕에서 얇은 밝은 외곽선으로 떠 보였다) */
.nxfx-pm-cell--row::before {
  background: linear-gradient(90deg, color-mix(in srgb, var(--nxfx-pm-c) var(--nxfx-pm-fill), transparent), transparent 52%);
}
.nxfx-pm-cell--row::after {
  box-shadow: inset 34px 0 38px -32px color-mix(in srgb, var(--nxfx-pm-c) var(--nxfx-pm-glow-a), transparent);
}
@media (min-width: 768px) {
  .nxfx-pm-cell--row {
    --nxfx-pm-num-size: 4.5rem;
  }
  .nxfx-pm-cell--row .nxfx-pm-cell__in {
    display: grid;
    grid-template-columns: clamp(6rem, 4.6rem + 3vw, 7.5rem) minmax(0, 1fr);
    align-items: center;
    column-gap: clamp(0.5rem, 0.1rem + 1vw, 1.25rem);
    padding-inline: clamp(1.75rem, 1.2rem + 1.5vw, 2.5rem);
  }
  .nxfx-pm-num {
    /* 옛 숫자꼴은 글자 상자 아래쪽에 앉는다 - 잉크가 글 덩어리 가운데에 오게 조금 올린다(운영 6619 와 같은 뜻) */
    position: relative;
    top: -0.14em;
    margin-bottom: 0;
  }
}
/* 줄이 많을 때(5줄부터): 줄 높이를 줄여 한 화면에 더 담는다 */
.nxfx-pm-cell--dense {
  --nxfx-pm-row-py: clamp(1rem, 0.9rem + 0.5vw, 1.375rem);
  --nxfx-pm-num-size: 2.5rem;
}
.nxfx-pm-cell--dense .nxfx-pm-num {
  margin-bottom: 0.5rem;
}
.nxfx-pm-cell--dense .nxfx-pm-title {
  font-size: clamp(1.25rem, 1.18rem + 0.3vw, 1.4375rem);
}
.nxfx-pm-cell--dense .nxfx-pm-body {
  margin-top: 0.375rem;
}
@media (min-width: 768px) {
  .nxfx-pm-cell--dense {
    --nxfx-pm-num-size: 3.25rem;
  }
  .nxfx-pm-cell--dense .nxfx-pm-cell__in {
    grid-template-columns: clamp(4.75rem, 3.9rem + 1.8vw, 5.75rem) minmax(0, 1fr);
  }
  .nxfx-pm-cell--dense .nxfx-pm-num {
    margin-bottom: 0;
  }
}

/* ── 줄 목록 = 스크롤 진행선(FxTimeline)의 자리 ───────────────────────
   공용층의 줄기 · 점 · 줄 등장(opacity · transform)은 그대로 두고 **자리만** 한 장 안쪽 줄로 옮긴다.
   줄기: 한 장 왼쪽 안쪽에 세로로(내려가면 차오른다) · 점: 그 위, 줄마다 번호 높이에 · 서명선: 줄기 위를 달리는 빛만 남긴다 */
.nxfx-pm-tl {
  --nxfx-pm-rail-x: 1.375rem;
  --nxfx-pm-rail-gap: 1.125rem;
}
@media (min-width: 768px) {
  .nxfx-pm-tl {
    --nxfx-pm-rail-x: clamp(2rem, 1.3rem + 1.6vw, 2.75rem);
    --nxfx-pm-rail-gap: clamp(1.5rem, 1rem + 1.2vw, 2.25rem);
  }
}
.nxfx-pm .nxfx-pm-tl > .nxfx-tl__rail {
  left: calc(var(--nxfx-pm-rail-x) - 1px);
  top: 0;
  bottom: 0;
  z-index: 2;
  -webkit-mask-image: linear-gradient(
    180deg,
    transparent 0,
    color-mix(in srgb, var(--foreground) 100%, transparent) 1.25rem,
    color-mix(in srgb, var(--foreground) 100%, transparent) calc(100% - 1.25rem),
    transparent 100%
  );
  mask-image: linear-gradient(
    180deg,
    transparent 0,
    color-mix(in srgb, var(--foreground) 100%, transparent) 1.25rem,
    color-mix(in srgb, var(--foreground) 100%, transparent) calc(100% - 1.25rem),
    transparent 100%
  );
}
.nxfx-pm .nxfx-pm-tl > .nxfx-tl__list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  margin: 0 -1px -1px 0;
}
.nxfx-pm .nxfx-pm-tl .nxfx-tl__item {
  padding: 0;
}
.nxfx-pm .nxfx-pm-tl .nxfx-tl__item > .nxfx-tl__body {
  position: relative;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-width: 0;
}
/* 점: 줄기 위 · 번호의 가운데 높이(폰 = 번호가 위에 서므로 번호 높이 / PC = 줄의 가운데) */
.nxfx-pm .nxfx-pm-tl .nxfx-tl__item > .nxfx-tl__dot {
  left: calc(var(--nxfx-pm-rail-x) - 6.5px);
  /* 옛 숫자꼴은 글자 상자 아래쪽에 앉는다 - 잉크의 가운데에 맞춘다 */
  top: calc(var(--nxfx-pm-row-py) + var(--nxfx-pm-num-size) * 0.61 - 6.5px);
  z-index: 3;
  width: 13px;
  height: 13px;
  border-color: var(--nxfx-pm-c);
  background-color: var(--nxfx-pm-c);
}
@media (min-width: 768px) {
  .nxfx-pm .nxfx-pm-tl .nxfx-tl__item > .nxfx-tl__dot {
    top: calc(50% - 6.5px);
  }
}
/* 줄 안쪽: 줄기 오른쪽에서 시작한다 */
.nxfx-pm .nxfx-pm-cell--tl .nxfx-pm-cell__in {
  padding-left: calc(var(--nxfx-pm-rail-x) + var(--nxfx-pm-rail-gap));
}
/* 서명선: 줄기 자리에 겹쳐 세우고 바탕 선은 비운다(바탕 = 공용층 줄기) - 01 → 02 → 03 으로 건너가는 빛만 남는다 */
.nxfx-pm .nxfx-pm-cell--tl .nxfx-pm-sig {
  left: calc(var(--nxfx-pm-rail-x) - 1px);
  background: none;
  opacity: 1;
}
/* 아직 지나지 않은 줄의 제목은 한 단 물러난다(지나면 제 색으로) */
.nxfx-pm-cell--tl .nxfx-pm-title {
  transition:
    color 0.6s var(--nxfx-ease-out),
    text-shadow 0.45s var(--nxfx-ease-out);
}
html.nx-js .nxfx-pm-cell--tl:not(.nxfx-on) .nxfx-pm-title {
  color: color-mix(in srgb, var(--foreground) 58%, transparent);
}
html.nx-js .nxfx-pm-cell--tl:not(.nxfx-on) .nxfx-pm-tag {
  opacity: 0.62;
}
.nxfx-pm-cell--tl .nxfx-pm-tag {
  transition:
    opacity 0.6s var(--nxfx-ease-out),
    box-shadow 0.45s var(--nxfx-ease-out);
}
/* 한 화면에 함께 들어온 줄은 차례로 뜬다(시간차만 - 공용층의 등장 모양은 그대로) */
.nxfx-pm .nxfx-pm-tl .nxfx-tl__item:nth-child(2) > .nxfx-tl__body { transition-delay: 0.1s; }
.nxfx-pm .nxfx-pm-tl .nxfx-tl__item:nth-child(3) > .nxfx-tl__body { transition-delay: 0.2s; }
.nxfx-pm .nxfx-pm-tl .nxfx-tl__item:nth-child(4) > .nxfx-tl__body { transition-delay: 0.3s; }
.nxfx-pm .nxfx-pm-tl .nxfx-tl__item:nth-child(5) > .nxfx-tl__body { transition-delay: 0.4s; }
.nxfx-pm .nxfx-pm-tl .nxfx-tl__item:nth-child(6) > .nxfx-tl__body { transition-delay: 0.5s; }

/* 넓은 줄(PC · 진행선 줄 목록): 번호 | 제목 + 배지 | 본문 세 단 - 본문 폭을 다 쓰는 줄의 오른쪽이 비지 않는다 */
@media (min-width: 1024px) {
  .nxfx-pm-cell--wide .nxfx-pm-cell__in {
    grid-template-columns: clamp(6rem, 4.6rem + 3vw, 7.5rem) minmax(0, 5fr) minmax(0, 6fr);
    column-gap: clamp(1rem, 0.2rem + 1.7vw, 2.25rem);
  }
  .nxfx-pm-cell--wide.nxfx-pm-cell--dense .nxfx-pm-cell__in {
    grid-template-columns: clamp(4.75rem, 3.9rem + 1.8vw, 5.75rem) minmax(0, 5fr) minmax(0, 6fr);
  }
  .nxfx-pm-cell--wide .nxfx-pm-row__main {
    display: contents;
  }
  .nxfx-pm-cell--wide .nxfx-pm-row__head {
    grid-column: 2;
  }
  .nxfx-pm-cell--wide .nxfx-pm-row__head:only-child {
    grid-column: 2 / -1;
  }
  .nxfx-pm-cell--wide .nxfx-pm-body {
    grid-column: 3;
    margin-top: 0;
    max-width: 40rem;
  }
}

/* 세 칸이 좁게 서는 폭(640 ~ 899px): 안 여백을 조금 줄인다 */
@media (min-width: 640px) and (max-width: 899px) {
  .nxfx-pm-cells--c3 > .nxfx-pm-cell > .nxfx-pm-cell__in {
    padding: 1.25rem 1.125rem 1.375rem;
  }
}

/* ── 손 반응: 손 닿은 칸만 ──────────────────────────────── */
@media (hover: hover) {
  .nxfx-pm-cell:hover::before,
  .nxfx-pm-cell:hover::after {
    opacity: 1;
  }
  .nxfx-pm-cell:hover .nxfx-pm-sig {
    opacity: 1;
    filter: drop-shadow(0 0 7px color-mix(in srgb, var(--nxfx-pm-hot) 80%, transparent));
  }
  .nxfx-pm-cell:hover .nxfx-pm-flow {
    opacity: 1;
  }
  html.nx-js .nxfx-pm-cell:hover .nxfx-pm-flow::after {
    animation: nxfxPmFlow 1.5s linear infinite;
  }
  .nxfx-pm-cell:hover .nxfx-pm-cell__in {
    transform: translate3d(0, -5px, 0);
  }
  .nxfx-pm-cell--row:hover .nxfx-pm-cell__in {
    transform: translate3d(0, -3px, 0);
  }
  .nxfx-pm-cell:hover .nxfx-pm-idx {
    color: var(--nxfx-title-on);
  }
  .nxfx-pm-cell:hover .nxfx-pm-idx::before {
    animation: none;
    opacity: 1;
    box-shadow:
      0 0 0 4px color-mix(in srgb, var(--nxfx-pm-c) 24%, transparent),
      0 0 12px 2px color-mix(in srgb, var(--nxfx-pm-hot) 60%, transparent);
  }
  .nxfx-pm-cell:hover .nxfx-pm-num {
    animation: none;
    color: color-mix(in srgb, var(--nxfx-pm-hot) 82%, transparent);
  }
  html.nx-js .nxfx-pm-cell:hover .nxfx-pm-title,
  .nxfx-pm-cell:hover .nxfx-pm-title {
    color: var(--nxfx-title-on);
    text-shadow: var(--nxfx-title-glow);
  }
  html.nx-js .nxfx-pm-cell:hover .nxfx-pm-tag,
  .nxfx-pm-cell:hover .nxfx-pm-tag {
    opacity: 1;
    box-shadow: 0 0 20px -3px color-mix(in srgb, var(--accent) 70%, transparent);
  }
  /* 어두운 바탕: 한 장의 겉 테가 손 닿을 때 밝은 외곽선으로 뜨지 않게 낮춘다(빛은 손 닿은 줄이 낸다) */
  .nx-root[data-nx-tone="dark"] .nxfx-pm .nxfx-pm-sheet:hover > .nxfx-glow__body {
    border-color: color-mix(in srgb, var(--nxfx-c) 22%, transparent);
  }
  /* 손 닿은 칸과 같은 번호의 알약이 켜진다(머리 ↔ 칸의 짝) */
  .nxfx-pm:has(.nxfx-pm-cell:nth-child(1):hover) .nxfx-pm-pill[data-k="0"],
  .nxfx-pm:has(.nxfx-pm-cell:nth-child(2):hover) .nxfx-pm-pill[data-k="1"],
  .nxfx-pm:has(.nxfx-pm-cell:nth-child(3):hover) .nxfx-pm-pill[data-k="2"],
  .nxfx-pm:has(.nxfx-pm-cell:nth-child(4):hover) .nxfx-pm-pill[data-k="3"],
  .nxfx-pm:has(.nxfx-pm-cell:nth-child(5):hover) .nxfx-pm-pill[data-k="4"],
  .nxfx-pm:has(.nxfx-pm-cell:nth-child(6):hover) .nxfx-pm-pill[data-k="5"],
  .nxfx-pm:has(.nxfx-pm-cell:nth-child(7):hover) .nxfx-pm-pill[data-k="6"],
  .nxfx-pm:has(.nxfx-pm-cell:nth-child(8):hover) .nxfx-pm-pill[data-k="7"] {
    animation: none;
    border-color: color-mix(in srgb, var(--nxfx-pm-hot) 92%, transparent);
    background-color: color-mix(in srgb, var(--nxfx-pm-c) 20%, transparent);
    color: var(--foreground);
    box-shadow:
      0 0 0 3px color-mix(in srgb, var(--nxfx-pm-c) 16%, transparent),
      0 0 20px -2px color-mix(in srgb, var(--nxfx-pm-hot) 66%, transparent);
  }
}
/* 손가락: 누르는 순간(폰에서도 남긴다) */
@media (hover: none) {
  .nxfx-pm-cell:active::before,
  .nxfx-pm-cell:active::after {
    opacity: 1;
    transition-duration: 0.12s;
  }
  .nxfx-pm-cell:active .nxfx-pm-sig {
    opacity: 1;
    filter: drop-shadow(0 0 7px color-mix(in srgb, var(--nxfx-pm-hot) 80%, transparent));
    transition-duration: 0.12s;
  }
  .nxfx-pm-cell:active .nxfx-pm-flow {
    opacity: 1;
    transition-duration: 0.12s;
  }
  .nxfx-pm-cell:active .nxfx-pm-cell__in {
    transform: scale(0.985);
    transition-duration: 0.18s;
  }
  .nxfx-pm-cell:active .nxfx-pm-idx {
    color: var(--nxfx-title-on);
  }
  .nxfx-pm-cell:active .nxfx-pm-num {
    animation: none;
    color: color-mix(in srgb, var(--nxfx-pm-hot) 82%, transparent);
  }
  html.nx-js .nxfx-pm-cell:active .nxfx-pm-title,
  .nxfx-pm-cell:active .nxfx-pm-title {
    color: var(--nxfx-title-on);
  }
}

/* ── 폰: 늘 도는 빛은 등장 직후 한 바퀴만 돌고 멈춘다(등장 · 진행선 · 빛 쓸림 · 누름은 그대로) ───── */
@media (max-width: 640px) {
  html.nx-js .nxfx-pm-sig::before,
  html.nx-js .nxfx-pm-sig::after,
  html.nx-js .nxfx-pm-idx::before,
  html.nx-js .nxfx-pm-num {
    animation-iteration-count: 1;
    animation-delay: calc(0.9s + var(--nxfx-i, 0) * 0.5s);
  }
  html.nx-js .nxfx-pm-pill {
    animation-iteration-count: 2;
  }
  .nxfx-pm-sweep::after {
    width: 62%;
  }
}

/* ── 동작 줄이기 ───────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .nxfx-pm-sig::before,
  .nxfx-pm-sig::after,
  .nxfx-pm-idx::before,
  .nxfx-pm-num,
  .nxfx-pm-pill,
  .nxfx-pm-flow::after,
  .nxfx-pm-sweep::after {
    animation: none !important;
  }
  .nxfx-pm-sig,
  .nxfx-pm-cell__in,
  .nxfx-pm-frame,
  .nxfx-pm-head__rule {
    transition: none;
  }
  html.nx-js .nxfx-pm-frame:has(.nxfx-pm-cells:not(.nxfx-in)),
  html.nx-js .nxfx-pm-frame:has(.nxfx-pm-tl):not(:has(.nxfx-seen)) {
    opacity: 1;
    transform: none;
  }
  html.nx-js .nxfx-pm-cells:not(.nxfx-in) .nxfx-pm-sig {
    transform: none;
  }
  html.nx-js .nxfx-pm-cell--tl:not(.nxfx-on) .nxfx-pm-title {
    color: inherit;
  }
  html.nx-js .nxfx-pm-cell--tl:not(.nxfx-on) .nxfx-pm-tag {
    opacity: 1;
  }
  .nxfx-pm-cell:hover .nxfx-pm-cell__in,
  .nxfx-pm-cell:active .nxfx-pm-cell__in {
    transform: none;
  }
}

/* 구획 큰 제목(2026-11-12) - 머리 줄 아래 · 카드 위 */
.nxfx-pm-title { margin: 0.4rem 0 clamp(1.5rem, 1rem + 2vw, 2.5rem); }

/* 넓은 줄(PC) 정렬(2026-11-12 의뢰인 "섹션 정렬이 깨졌다") - 실측: 배지가 제목 옆이 아니라 다음 줄로 넘어가
   번호 · 제목 · 설명의 가운데가 20px 어긋났다 → 제목과 배지를 한 줄에 붙이고(제목이 길면 제목만 줄바꿈) 세 칸이 같은 가운데에 선다 */
@media (min-width: 1024px) {
  .nxfx-pm-cell--wide .nxfx-pm-cell__in { align-items: center; }
  .nxfx-pm-cell--wide .nxfx-pm-row__head { flex-wrap: nowrap; align-items: center; }
  .nxfx-pm-cell--wide .nxfx-pm-row__head .nxfx-pm-title { flex: 0 1 auto; min-width: 0; margin: 0; }
  .nxfx-pm-cell--wide .nxfx-pm-row__head .nxfx-pm-tag { flex: none; }
  .nxfx-pm-cell--wide .nxfx-pm-num { margin-bottom: 0; }
}
/* 알약(배지) 세로 정렬(2026-11-12 의뢰인 "핑크 미니 알약 위치도 대칭으로") - 제목 길이와 상관없이
   알약이 제목 칸 오른쪽 끝 같은 세로선에 선다(제목은 왼쪽 · 알약은 오른쪽 · 가운데 높이 같음) */
@media (min-width: 1024px) {
  .nxfx-pm-cell--wide .nxfx-pm-row__head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 1rem;
    align-items: center;
  }
  .nxfx-pm-cell--wide .nxfx-pm-row__head .nxfx-pm-tag { justify-self: end; }
}
/* 알약 칸을 고정 폭(4.75rem)으로 두고 그 가운데에 세운다 - 2글자 · 3글자 알약의 좌우 끝까지 대칭 */
@media (min-width: 1024px) {
  .nxfx-pm-cell--wide .nxfx-pm-row__head { grid-template-columns: minmax(0, 1fr) 4.75rem; }
  .nxfx-pm-cell--wide .nxfx-pm-row__head .nxfx-pm-tag { justify-self: center; }
}
/* 알약 칸 고정 뒤 제목이 두 줄로 꺾이던 것 - 제목 칸을 설명 칸보다 넓게(6 : 5) · 알약 칸 4.25rem · 사이 간격 0.75rem */
@media (min-width: 1024px) {
  .nxfx-pm-cell--wide .nxfx-pm-cell__in { grid-template-columns: clamp(6rem, 4.6rem + 3vw, 7.5rem) minmax(0, 6fr) minmax(0, 5fr); }
  .nxfx-pm-cell--wide.nxfx-pm-cell--dense .nxfx-pm-cell__in { grid-template-columns: clamp(4.75rem, 3.9rem + 1.8vw, 5.75rem) minmax(0, 6fr) minmax(0, 5fr); }
  .nxfx-pm-cell--wide .nxfx-pm-row__head { grid-template-columns: minmax(0, 1fr) 4.25rem; column-gap: 0.75rem; }
}