/**
 * 섹션 업그레이드 실험판 - 「서비스 · 메뉴」 n1 전용 규칙(2026-11-11 · 2026-11-12 마무리).
 *
 * 연출 공용층(_kit/fx) · 얹는 공용층(_kit/next.css)에 없는 것만 여기 둔다. 전부 `nxfx-svc` 로 시작한다.
 *   · 카드 광채 세기 - 공용 FxGlowCard 의 손잡이(--nxfx-*)만 이 구획 카드에서 조정한다(뒤 빛 · 광택 · 안쪽 차오름 · 테두리 · 큰 광채).
 *     `.nxfx-*` 의 opacity · transform · animation 은 건드리지 않는다.
 *   · 카드마다 다른 빛 - 포인트 색에서 색상을 돌리고(-34° · 0° · +40°), 무채색 포인트는 밝기 · 온도(포인트 ↔ 글자색)로 가른다
 *   · 어두운 화면 - 뒤 빛(안개)은 줄이고 빛을 테두리로 옮긴다(빗금 테두리 빛 + 테두리를 도는 빛). 색이 없는 포인트일수록 뒤 빛이 더 옅다
 *   · 격자 - 폰 1열 · 태블릿 2열 · PC 3열. 마지막 줄에 빈 칸이 남지 않게 남는 카드를 넓힌다(5장 = 3 + 2)
 *   · 카드 안 해부 - 작은 모노 번호 + 실금 → 이름 → (영문 이름) → 설명 → 포함 항목 → 선으로 나눈 가격 발치 · 뒤에 배경 큰 숫자
 *   · 이름뿐인 목록 - 카드를 포스터로 세운다(번호 위 · 이름 아래 · 배경 큰 숫자가 카드 높이를 채운다)
 *   · 사진 머리 - 한 줄이 같은 높이(4:3 틀). 사진은 자르지 않고 틀 안에 통째로 넣고, 남는 자리는 같은 사진을 흐려 깐다
 *   · 옆 카드 물러남 - 한 장에 손이 닿으면 나머지 칸이 한 걸음 어두워진다(칸 = .nxfx-svc-cell 의 밝기만)
 *   · 조금 이른 등장 - 등장 표식이 달린 칸 위로 보이지 않는 여백을 달아, 화면 아랫선에 닿기 조금 전에 등장이 시작된다
 *
 * 색은 사이트 토큰(--accent · --foreground · --background)과 공용층 토큰(--nx-* · --nxfx-*)만 섞는다.
 * 숨김은 `html.nx-js` 일 때만(still=1 · 동작 줄이기 · 스크립트 실패면 끝 상태).
 */

/* ── 구획: 장면(FxScene)의 격자 · 빛이 비치게 구획 바탕만 비운다 ───────── */
.nxfx-svc.nx-sec {
  background-color: transparent;
  /* 조금 이른 등장 - 등장 표식 칸이 위로 더 갖는 보이지 않는 높이(구동기는 칸이 화면 아랫선에서 10% 들어와야 등장을 건다) */
  --nxfx-svc-pre: min(13vh, 7rem);
  --nxfx-svc-pre-grid: min(14vh, 8rem);
}
/* 장면 장식(격자 · 빛덩이 · 빛줄기)은 구획 위아래 끝에서 옅어진다 */
.nxfx-svc-scene > .nxfx-bd {
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 7rem, #000 calc(100% - 11rem), transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 7rem, #000 calc(100% - 11rem), transparent 100%);
}

/* 별빛 층(cosmic) - 어두운 화면에서만 별이 뜬다. 밝은 화면에서는 별이 먼지로 읽혀 별 색 손잡이만 비운다(색 구름은 남는다).
   머리(라벨 · 제목) 둘레는 가림값으로 비운다 - 별 한 점이 라벨 옆 마침표처럼 보이지 않게 */
.nx-root:not([data-nx-tone="dark"]) .nxfx-svc-scene {
  --nxfx-star: transparent;
}
.nxfx-svc-scene .nxfx-bd__cosmic {
  -webkit-mask-image: radial-gradient(ellipse 36rem 8.5rem at 6% calc(var(--nx-sec-y, 6rem) + 2.75rem), transparent 0, transparent 72%, #000 100%);
  mask-image: radial-gradient(ellipse 36rem 8.5rem at 6% calc(var(--nx-sec-y, 6rem) + 2.75rem), transparent 0, transparent 72%, #000 100%);
}

/* ── 머리: 미니라벨 → 큰 제목(가림막 등장) ───────────────────────── */
.nxfx-svc-head {
  max-width: 56rem;
  margin-bottom: var(--nx-head-gap);
}
.nxfx-svc-head--bare {
  margin-bottom: clamp(1.5rem, 1.1rem + 1.7vw, 2.5rem);
}
.nxfx-svc-pre {
  margin-top: calc(var(--nxfx-svc-pre) * -1);
  padding-top: var(--nxfx-svc-pre);
  pointer-events: none;
}
.nxfx-svc-pre > * {
  pointer-events: auto;
}
.nxfx-svc-head > .nx-title {
  margin-top: calc(clamp(0.875rem, 0.7rem + 0.7vw, 1.375rem) - var(--nxfx-svc-pre));
  padding-top: var(--nxfx-svc-pre);
  pointer-events: none;
}
.nxfx-svc-head > .nx-title > * {
  pointer-events: auto;
}
/* 제목 눈금 - 공용 눈금 그대로(폰 30 → PC 51 · 다른 구획 제목과 같은 크기). 문장만큼 긴 제목만 한 단계 줄인다 */
.nxfx-svc-title--long.nx-title {
  font-size: clamp(1.625rem, 1.33rem + 1.25vw, 2.5rem); /* 26 → 40 */
  line-height: 1.22;
}

/* ── 격자 ─────────────────────────────────────────────── */
.nxfx-svc-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.5rem; /* 뒤 광채가 옆 카드에 묻히지 않는 최소 간격 */
  margin: calc(var(--nxfx-svc-pre-grid) * -1) 0 0;
  padding: var(--nxfx-svc-pre-grid) 0 0;
  list-style: none;
  pointer-events: none;
}
.nxfx-svc-grid > * {
  pointer-events: auto;
}
@media (min-width: 640px) and (max-width: 1023.98px) {
  .nxfx-svc-grid:not(.nxfx-svc-grid--solo) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  /* 홀수면 마지막 한 장이 줄을 다 쓴다(빈 칸 없음) */
  .nxfx-svc-grid:not(.nxfx-svc-grid--solo) > :last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }
}
@media (min-width: 1024px) {
  .nxfx-svc-grid {
    gap: 1.75rem;
  }
  .nxfx-svc-grid:not(.nxfx-svc-grid--solo) {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
  .nxfx-svc-grid:not(.nxfx-svc-grid--solo) > * {
    grid-column: span 2;
  }
  /* 3으로 나눠 2장이 남으면 마지막 2장이, 1장이 남으면 마지막 4장(2 + 2)이 반씩 쓴다 */
  .nxfx-svc-grid--r2 > :nth-last-child(-n + 2),
  .nxfx-svc-grid--r1 > :nth-last-child(-n + 4) {
    grid-column: span 3;
  }
}
/* 한 장뿐이면 제목과 같은 왼쪽 기준선에서 줄을 다 쓴다 - 글 카드는 왼쪽 글 · 오른쪽 배경 큰 숫자, 사진 카드는 그림 반 · 글 반.
   (사진 자체는 한 칸 크기(최대 480px)를 넘지 않는다 - 한 장이라고 사진이 화면을 덮지 않게 · 운영 6504) */

/* 칸 - 차례 등장의 단위 · 옆 카드에 손이 닿으면 물러나는 층. 카드 부품(.nxfx-glow)은 이 안에서 칸을 꽉 채운다 */
.nxfx-svc-cell {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  --nxfx-svc-dim: 0.95;
  transition: filter 0.45s var(--nxfx-ease-out, ease);
}
.nx-root[data-nx-tone="dark"] .nxfx-svc-cell {
  --nxfx-svc-dim: 0.66;
}
@media (hover: hover) {
  .nxfx-svc-cell:hover {
    z-index: 1;
  }
  /* 손 닿은 카드 말고는 한 걸음 물러난다(밝기 · 채도만 - 글은 그대로 읽힌다) */
  .nxfx-svc-grid:has(.nxfx-svc-cell:hover) > .nxfx-svc-cell:not(:hover) {
    filter: brightness(var(--nxfx-svc-dim)) saturate(0.86);
  }
}

/* ── 카드: 광채 세기 손잡이 ─────────────────────────────────── */
.nxfx-svc-card {
  flex: 1 1 auto;
}
.nxfx-svc-card.nxfx-glow {
  /* 이 구획 카드의 빛 색(뒤 빛 · 테두리 · 배경 숫자 · 도는 빛이 함께 쓴다) */
  --nxfx-svc-c: var(--accent);
  /* 쉬는 상태에서도 '빛나는 카드'로 읽히게 - 뒤 빛을 짙게 · 넓게 */
  --nxfx-aura-o: 0.66;
  --nxfx-aura-o-h: 1;
  --nxfx-aura-inset: -44px;
  --nxfx-aura-blur: 40px;
  /* 손 닿을 때 - 안쪽 가운데부터 차오르는 빛 · 포인트 색 테두리 · 큰 광채 */
  --nxfx-fill-p: 36%;
  --nxfx-edge-p: 92%;
  --nxfx-halo-p: 58%;
  /* 카드 면 윗부분의 색 기운 · 카드 아래 색 그림자 · 테두리 */
  --nxfx-sheen-c: color-mix(in srgb, var(--nxfx-svc-c) 20%, transparent);
  --nxfx-rest-shadow-p: 62%;
  --nxfx-border: color-mix(in srgb, var(--nxfx-svc-c) 30%, var(--nx-line));
  /* 테두리 빛 - 빗금으로 물든 테두리(쉬는 상태) · 테두리를 도는 빛 */
  --nxfx-svc-ring-a: color-mix(in srgb, var(--nxfx-svc-c) 62%, transparent);
  --nxfx-svc-ring-b: color-mix(in srgb, var(--nxfx-svc-c) 30%, transparent);
  --nxfx-svc-comet: color-mix(in srgb, var(--nxfx-svc-c) 92%, transparent);
}
.nx-root[data-nx-tone="dark"] .nxfx-svc-card.nxfx-glow {
  /* 어두운 화면 - 뒤 빛은 좁고 옅게(넓게 번지면 안개로 읽힌다), 빛은 테두리 쪽으로 */
  --nxfx-aura-o: 0.46;
  --nxfx-aura-o-h: 0.86;
  --nxfx-aura-inset: -34px;
  --nxfx-aura-blur: 38px;
  --nxfx-fill-p: 26%;
  --nxfx-edge-p: 96%;
  --nxfx-halo-p: 46%;
  --nxfx-sheen-c: color-mix(in srgb, var(--nxfx-svc-c) 12%, transparent);
  --nxfx-rest-shadow-p: 34%;
  --nxfx-border: color-mix(in srgb, var(--nxfx-svc-c) 20%, var(--nx-line));
  --nxfx-svc-ring-a: color-mix(in srgb, var(--nxfx-svc-c) 74%, transparent);
  --nxfx-svc-ring-b: color-mix(in srgb, var(--nxfx-svc-c) 34%, transparent);
  --nxfx-svc-comet: color-mix(in oklab, var(--nxfx-svc-c) 70%, var(--foreground));
}
@media (max-width: 640px) {
  /* 폰 - 옆으로 넘치지 않을 만큼만 */
  .nxfx-svc-card.nxfx-glow {
    --nxfx-aura-inset: -24px;
    --nxfx-aura-blur: 30px;
  }
  .nx-root[data-nx-tone="dark"] .nxfx-svc-card.nxfx-glow {
    --nxfx-aura-inset: -22px;
    --nxfx-aura-blur: 28px;
  }
}
/* 카드마다 다른 빛 - 포인트 색에서 파생: 색상은 카드별로 돌리고(--nxfx-hue), 밝은 화면에서는 한 단계 밝고 맑게 올린다.
   채도는 곱으로만 올린다(무채색 포인트는 무채색으로 남는다 - 없는 색을 만들지 않는다). */
@supports (color: oklch(from red l c h)) {
  .nxfx-svc-card.nxfx-glow {
    --nxfx-svc-c: oklch(from var(--accent) clamp(0.58, l + 0.1, 0.76) min(c * 1.5, 0.17) calc(h + var(--nxfx-hue, 0)));
    --nxfx-c: var(--nxfx-svc-c);
  }
  .nx-root[data-nx-tone="dark"] .nxfx-svc-card.nxfx-glow {
    --nxfx-svc-c: oklch(from var(--accent) clamp(0.72, l, 0.9) min(c * 3, 0.17) calc(h + var(--nxfx-hue, 0)));
  }
  /* 어두운 화면 · 무채색에 가까운 포인트는 색상을 돌려도 차이가 없다 - 둘째 · 셋째 카드는 글자색(차가운 흰빛) 쪽으로 온도를 옮긴다 */
  .nx-root[data-nx-tone="dark"] .nxfx-svc-card--k1.nxfx-glow {
    --nxfx-svc-c: color-mix(in oklab, oklch(from var(--accent) clamp(0.72, l, 0.9) min(c * 3, 0.17) calc(h + var(--nxfx-hue, 0))) 62%, var(--foreground));
  }
  .nx-root[data-nx-tone="dark"] .nxfx-svc-card--k2.nxfx-glow {
    --nxfx-svc-c: color-mix(in oklab, oklch(from var(--accent) clamp(0.72, l, 0.9) min(c * 3, 0.17) calc(h + var(--nxfx-hue, 0))) 78%, var(--foreground));
  }
}
/* 어두운 화면의 뒤 빛 · 안쪽 차오름은 색이 있는 만큼만 짙다 - 색이 거의 없는 포인트(회색 · 크림)는 뒤 빛이 뿌연 안개로 읽히므로 더 옅게.
   (뒤 빛 조각과 카드 면 조각의 빛 색 손잡이만 바꾼다 - 테두리 빛은 그대로 또렷하다) */
@supports (color: oklch(from red l c h / calc(c * 2))) {
  .nx-root[data-nx-tone="dark"] .nxfx-svc-card > .nxfx-glow__aura {
    --nxfx-c: oklch(from var(--nxfx-svc-c) l c h / clamp(0.46, 0.34 + c * 5, 1));
  }
}

/* 테두리 빛 - 카드 테두리 안쪽 1.5px 띠(가림값으로 띠만 남긴다). 쉬는 상태는 왼쪽 위 · 오른쪽 아래가 물든 빗금 테두리,
   그 위로 빛 한 점이 테두리를 따라 천천히 돈다(PC · 화면에 보일 때만 · 카드마다 박자가 어긋난다) */
.nxfx-svc-ring {
  position: absolute;
  inset: 0;
  z-index: 2;
  overflow: hidden;
  padding: 1.5px;
  border-radius: inherit;
  pointer-events: none;
  background-image: linear-gradient(
    138deg,
    var(--nxfx-svc-ring-a) 0%,
    transparent 30%,
    transparent 68%,
    var(--nxfx-svc-ring-b) 100%
  );
  -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);
}
.nxfx-svc-ring::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: max(260%, 60rem);
  aspect-ratio: 1;
  background-image: conic-gradient(from 0deg, transparent 0turn, transparent 0.6turn, var(--nxfx-svc-comet) 0.92turn, transparent 1turn);
  transform: translate(-50%, -50%) rotate(calc(28deg + var(--nxfx-i, 0) * 67deg));
  opacity: 0.9;
}
/* 도는 빛 판을 카드 대각선 길이만큼만 깐다 - 판이 카드 폭의 2.6배(한 변 약 1,560px)면 카드마다 큰 층이 생겨 첫 그림이 늦는다.
   원뿔 빛은 크기와 무관하게 같은 모양이라 보이는 것은 그대로다. 단위를 못 읽는 브라우저는 위의 큰 판을 그대로 쓴다 */
@supports (width: hypot(1px, 1px)) and (container-type: size) {
  .nxfx-svc-ring {
    container-type: size;
  }
  .nxfx-svc-ring::before {
    width: calc(hypot(100cqw, 100cqh) + 8px);
  }
}
@media (min-width: 641px) {
  html.nx-js .nxfx-svc-ring::before {
    animation: nxfxSvcOrbit 11s linear infinite;
    animation-delay: calc(var(--nxfx-i, 0) * -2.9s);
  }
}
@keyframes nxfxSvcOrbit {
  from {
    transform: translate(-50%, -50%) rotate(0turn);
  }
  to {
    transform: translate(-50%, -50%) rotate(1turn);
  }
}

/* ── 카드 안 ─────────────────────────────────────────────── */
.nxfx-svc-card__in {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-width: 0;
  padding: var(--nx-card-pad-sm, 24px);
}
@media (min-width: 1024px) {
  .nxfx-svc-card__in {
    padding: clamp(1.75rem, 1.1rem + 1vw, 2.25rem);
  }
}
/* 항목이 적거나 이름뿐인 목록은 여백을 넉넉히 */
.nxfx-svc-grid--roomy .nxfx-svc-card__in {
  padding: var(--nx-card-pad, 32px);
}
/* 글 카드 윗부분에 카드 빛이 한 겹 더 물든다(밝은 화면에서 '흰 카드'로만 읽히지 않게) */
.nxfx-svc-card--text .nxfx-svc-card__in {
  background-image: linear-gradient(168deg, color-mix(in srgb, var(--nxfx-svc-c) 10%, transparent), transparent 52%);
}
.nxfx-svc-main {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-width: 0;
}

/* 이름뿐인 목록 - 포스터 카드: 얇은 띠로 눕지 않게 카드에 키를 주고, 번호는 위 · 이름은 아래에 세운다.
   배경 큰 숫자가 카드 높이를 채우고, 숫자 뒤로 카드 빛이 한 겹 비친다. (min-height 라 이름이 길면 카드는 더 자란다) */
.nxfx-svc-grid--bare .nxfx-svc-card__in {
  min-height: 11.5rem;
  background-image:
    radial-gradient(74% 120% at 94% 0%, color-mix(in srgb, var(--nxfx-svc-c) 15%, transparent), transparent 70%),
    linear-gradient(168deg, color-mix(in srgb, var(--nxfx-svc-c) 9%, transparent), transparent 52%);
}
.nxfx-svc-grid--bare .nxfx-svc-top {
  margin-bottom: auto;
}
.nxfx-svc-grid--bare .nxfx-svc-name.nx-h3 {
  margin-top: 1.5rem;
}
@media (min-width: 640px) {
  .nxfx-svc-grid--bare .nxfx-svc-card__in {
    min-height: 14rem;
  }
}
@media (min-width: 1024px) {
  .nxfx-svc-grid--bare .nxfx-svc-card__in {
    min-height: 15.5rem;
  }
  .nxfx-svc-grid--bare.nxfx-svc-grid--few .nxfx-svc-card__in {
    min-height: clamp(16.5rem, 9.5rem + 11vw, 20rem); /* 1280 에서 약 293px */
  }
}

/* 작은 모노 번호 + 실금 - 읽는 번호는 이쪽이다(포인트 색 · 이름 위) */
.nxfx-svc-top {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.nxfx-svc-num.nx-num {
  flex: none;
  font-size: 0.8125rem !important;
  letter-spacing: 0.22em;
  color: var(--accent);
  transition: color 0.5s var(--nxfx-ease-out, ease);
}
.nxfx-svc-grid--roomy .nxfx-svc-num.nx-num {
  font-size: 0.875rem !important;
}
.nxfx-svc-rule {
  flex: none;
  width: 2.5rem;
  height: 1px;
  background: linear-gradient(90deg, var(--nx-line-accent), transparent);
  transform-origin: left center;
  transition:
    transform 1.1s var(--nxfx-ease, ease),
    width 0.6s var(--nxfx-ease, ease),
    background-color 0.5s var(--nxfx-ease-out, ease);
}

/* 배경 큰 숫자 - 사진 없는 카드에만. 카드 오른쪽 위에서 아래로 옅어지는 장식(글이 아니다 · aria-hidden) */
.nxfx-svc-bgnum {
  position: absolute;
  top: -0.13em;
  right: 0.06em;
  z-index: 0;
  font-family: var(--font-sdv-display), "Pretendard Variable", "Pretendard", sans-serif;
  font-size: clamp(7.5rem, 6.4rem + 4.6vw, 10.5rem) !important; /* 120 → 168 */
  line-height: 1 !important;
  font-weight: 300;
  letter-spacing: -0.03em;
  font-variant-numeric: lining-nums tabular-nums;
  white-space: nowrap;
  color: color-mix(in srgb, var(--nxfx-svc-c) 17%, transparent);
  opacity: 0.8;
  pointer-events: none;
  user-select: none;
  transition:
    opacity 0.7s var(--nxfx-ease-out, ease),
    transform 1s var(--nxfx-ease, ease);
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .nxfx-svc-bgnum {
    color: transparent;
    background-image: linear-gradient(to bottom, color-mix(in srgb, var(--nxfx-svc-c) 34%, transparent) 10%, color-mix(in srgb, var(--nxfx-svc-c) 3%, transparent) 72%);
    -webkit-background-clip: text;
    background-clip: text;
  }
  .nx-root[data-nx-tone="dark"] .nxfx-svc-bgnum {
    background-image: linear-gradient(to bottom, color-mix(in srgb, var(--nxfx-svc-c) 30%, transparent) 10%, color-mix(in srgb, var(--nxfx-svc-c) 4%, transparent) 84%);
  }
}
/* 이름뿐인 목록의 숫자는 카드 높이를 채운다 */
.nxfx-svc-grid--bare .nxfx-svc-bgnum {
  font-size: clamp(9.5rem, 7.6rem + 8vw, 12rem) !important; /* 152(폰 360) → 192 */
}
@media (min-width: 1024px) {
  /* 반 폭 카드 · 한 장 카드 · 사진 줄에 선 글 카드는 면이 넓다 - 숫자가 카드 높이를 채운다 */
  .nxfx-svc-card--wide .nxfx-svc-bgnum,
  .nxfx-svc-grid--shot .nxfx-svc-bgnum {
    right: 0.12em;
    font-size: clamp(11rem, 5rem + 9vw, 14rem) !important; /* 176 → 224 */
  }
  .nxfx-svc-grid--bare .nxfx-svc-bgnum {
    font-size: clamp(11rem, 5rem + 9vw, 14rem) !important;
  }
  .nxfx-svc-grid--bare.nxfx-svc-grid--few .nxfx-svc-card--wide .nxfx-svc-bgnum {
    right: 0.1em;
    font-size: clamp(14rem, 6rem + 12.5vw, 18.5rem) !important; /* 1280 에서 약 256px */
  }
  .nxfx-svc-grid--solo .nxfx-svc-bgnum {
    right: 0.2em;
    font-size: clamp(13rem, 6rem + 11vw, 17rem) !important;
  }
}

/* 이름이 길어 숫자 위까지 흐르는 목록은 배경 숫자를 한 단계 더 옅게(이름이 먼저 읽힌다) */
.nxfx-svc-grid--dense .nxfx-svc-bgnum {
  opacity: 0.5;
}

/* 이름 - 가장 긴 이름 하나로 모든 카드가 같은 규격을 쓴다(운영 1574 · "…" 로 자르지 않는다) */
.nxfx-svc-name.nx-h3 {
  margin-top: clamp(0.75rem, 0.66rem + 0.4vw, 1rem);
  font-size: clamp(1.25rem, 1.16rem + 0.38vw, 1.5rem); /* 20 → 24 */
  text-wrap: balance;
}
.nxfx-svc-grid--roomy .nxfx-svc-name.nx-h3 {
  font-size: clamp(1.375rem, 1.24rem + 0.6vw, 1.75rem); /* 22 → 28 */
}
/* 이름이 짧고 항목이 적거나 이름뿐이면 이름이 카드의 주인공이다 */
.nxfx-svc-grid--big .nxfx-svc-name.nx-h3 {
  margin-top: clamp(0.875rem, 0.7rem + 0.7vw, 1.375rem);
  font-size: clamp(1.625rem, 1.42rem + 0.9vw, 2.25rem); /* 26 → 36 */
  line-height: 1.22;
}
.nxfx-svc-grid--long1 .nxfx-svc-name.nx-h3 {
  font-size: clamp(1.09375rem, 1.06rem + 0.16vw, 1.1875rem); /* 17.5 → 19 */
  line-height: 1.45;
  text-wrap: pretty;
}
.nxfx-svc-grid--long2 .nxfx-svc-name.nx-h3 {
  font-size: clamp(1rem, 0.97rem + 0.12vw, 1.0625rem); /* 16 → 17 */
  line-height: 1.5;
  text-wrap: pretty;
}
/* 영문 이름 - 이름 아래 포인트 색 모노 부제(값이 있을 때만) */
.nxfx-svc-sub {
  margin: 0.375rem 0 0;
  font-family: var(--font-sdv-mono), "Pretendard Variable", "Pretendard", sans-serif;
  font-size: var(--nx-fs-label, 0.8125rem) !important;
  line-height: 1.5 !important;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--accent);
  overflow-wrap: anywhere;
}
.nxfx-svc-desc {
  margin-top: clamp(0.625rem, 0.55rem + 0.3vw, 0.875rem);
}
.nxfx-svc-incl {
  margin-top: clamp(0.875rem, 0.8rem + 0.3vw, 1.125rem);
}

/* 가격 발치 - 카드 맨 아래에 붙고, 실금으로 위와 나뉜다(실금은 왼쪽에서 그어진다) */
.nxfx-svc-foot {
  margin-top: auto;
  padding-top: clamp(1.125rem, 1rem + 0.55vw, 1.5rem);
}
.nxfx-svc-foot__in {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.375rem 1rem;
  padding-top: clamp(0.875rem, 0.8rem + 0.3vw, 1.125rem);
}
.nxfx-svc-foot__in::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background-color: var(--nx-line);
  transform-origin: left center;
  transition:
    transform 1.1s var(--nxfx-ease, ease),
    background-color 0.5s var(--nxfx-ease-out, ease);
}
.nxfx-svc-price {
  display: inline-flex;
  align-items: baseline;
  gap: 0.35em;
  min-width: 0;
  margin: 0;
  font-family: var(--font-body, "Pretendard Variable", "Pretendard", sans-serif);
  font-size: clamp(1.1875rem, 1.1rem + 0.36vw, 1.4375rem) !important; /* 19 → 23 */
  line-height: 1.3 !important;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.015em;
  color: var(--accent);
  overflow-wrap: anywhere;
}
.nxfx-svc-price__won {
  font-size: 0.74em;
  font-weight: 600;
  color: color-mix(in srgb, var(--accent) 72%, transparent);
  transition: opacity 0.6s var(--nxfx-ease-out, ease);
}
/* 가격 값 - 처음부터 끝 값이다(세어 올리지 않는다). 글자 하나씩 실금 아래에서 차례로 굴러 올라온다 */
.nxfx-svc-price__v {
  position: relative;
  display: inline-block;
  clip-path: inset(-0.12em -0.3em -0.16em -0.3em);
}
.nxfx-svc-price__v > [aria-hidden="true"] {
  white-space: nowrap;
}
.nxfx-svc-roll {
  display: inline-block;
  transition: transform 0.8s var(--nxfx-ease, ease);
}
.nxfx-svc-dur {
  margin: 0;
  font-family: var(--font-sdv-mono), "Pretendard Variable", "Pretendard", sans-serif;
  font-size: var(--nx-fs-label, 0.8125rem) !important;
  line-height: 1.5 !important;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--nx-ink-4);
  overflow-wrap: anywhere;
}

/* 카드 안 등장 - 카드가 올라온 뒤 실금이 그어지고 숫자 · 가격이 따라온다. 차례 지연은 등장하는 동안에만 건다(손 반응은 바로) */
html.nx-js .nxfx-stag:not(.nxfx-done) .nxfx-svc-rule,
html.nx-js .nxfx-stag:not(.nxfx-done) .nxfx-svc-foot__in::before,
html.nx-js .nxfx-stag:not(.nxfx-done) .nxfx-svc-bgnum {
  transition-delay: calc(0.24s + var(--nxfx-i, 0) * var(--nxfx-step, 110ms));
}
html.nx-js .nxfx-stag:not(.nxfx-done) .nxfx-svc-price__won {
  transition-delay: calc(0.34s + var(--nxfx-i, 0) * var(--nxfx-step, 110ms));
}
html.nx-js .nxfx-stag:not(.nxfx-done) .nxfx-svc-roll {
  transition-delay: calc(0.34s + var(--nxfx-i, 0) * var(--nxfx-step, 110ms) + var(--nxfx-svc-k, 0) * 40ms);
}
html.nx-js .nxfx-stag:not(.nxfx-in) .nxfx-svc-rule,
html.nx-js .nxfx-stag:not(.nxfx-in) .nxfx-svc-foot__in::before {
  transform: scaleX(0);
}
html.nx-js .nxfx-stag:not(.nxfx-in) .nxfx-svc-bgnum {
  opacity: 0;
  transform: translate3d(28px, 0, 0);
}
html.nx-js .nxfx-stag:not(.nxfx-in) .nxfx-svc-roll {
  transform: translate3d(0, 118%, 0);
}
/* 원 표시도 값과 함께 나온다 - 값보다 먼저 혼자 서 있지 않게 */
html.nx-js .nxfx-stag:not(.nxfx-in) .nxfx-svc-price__won {
  opacity: 0;
}

/* ── 사진 머리: 한 줄이 같은 높이(4:3 틀) · 사진은 자르지 않는다 · 아래가 카드 면으로 녹는다 ── */
.nxfx-svc-shot {
  position: relative;
  flex: none;
  margin: 0;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background-color: color-mix(in srgb, var(--nxfx-svc-c) 10%, var(--nxfx-surface, var(--background)));
}
.nxfx-svc-shot > img {
  position: absolute;
  display: block;
  max-width: none;
}
/* 틀과 비율이 다른 사진의 남는 자리 - 같은 사진을 크게 흐려 깐다(색만 남는다) */
.nxfx-svc-shot__bg {
  inset: -14%;
  z-index: 0;
  width: 128%;
  height: 128%;
  object-fit: cover;
  filter: blur(26px) saturate(1.15);
  opacity: 0.55;
}
.nxfx-svc-shot__img {
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: saturate(1.06) contrast(1.035) brightness(1.01);
  transition:
    transform 0.9s var(--nxfx-ease, ease),
    opacity 0.9s var(--nxfx-ease-out, ease),
    filter 0.9s var(--nxfx-ease-out, ease);
}
/* 사진이 다 받아지기 전 - 흐린 채 숨어 있다가 또렷하게 나온다(구동기가 .nxfx-loaded 를 붙인다 · 3초 안전판) */
html.nx-js .nxfx-svc-shot[data-nxfx-img]:not(.nxfx-loaded) > .nxfx-svc-shot__img {
  opacity: 0;
  filter: blur(12px) saturate(1.06);
}
.nxfx-svc-shot::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    transparent 60%,
    color-mix(in srgb, var(--nxfx-surface, var(--background)) 58%, transparent) 86%,
    var(--nxfx-surface, var(--background)) 100%
  );
}
.nxfx-svc-card--shot .nxfx-svc-card__in {
  padding-top: clamp(0.5rem, 0.4rem + 0.4vw, 0.875rem);
}
/* 폰(1열)은 높이를 맞출 옆 카드가 없다 - 사진을 제 비율 그대로 카드 폭에 꽉 채운다(옆 띠 없음).
   아주 긴 세로 사진만 높이를 묶고(416px), 그때 남는 자리는 흐린 바탕이 채운다 */
@media (max-width: 639.98px) {
  .nxfx-svc-shot {
    aspect-ratio: auto;
    min-height: 9rem;
  }
  .nxfx-svc-shot > .nxfx-svc-shot__img {
    position: relative;
    inset: auto;
    height: auto;
    max-height: 26rem;
  }
}

/* 그림 반 · 글 반으로 눕는 사진 카드 - PC 의 반 폭 카드 · 태블릿의 홀수 마지막 한 장 · 한 장뿐인 카드.
   사진칸은 카드 높이만큼 서고(자르지 않는다), 오른쪽이 카드 면으로 녹는다 */
@media (min-width: 1024px) {
  .nxfx-svc-card--side > .nxfx-glow__body {
    flex-direction: row;
    align-items: stretch;
  }
  .nxfx-svc-card--side .nxfx-svc-shot {
    flex: 0 0 46%;
    align-self: stretch;
  }
  .nxfx-svc-card--side .nxfx-svc-shot__img {
    object-position: left center; /* 사진이 카드 왼쪽 가장자리에 붙는다 - 남는 자리는 오른쪽(카드 면으로 녹는 쪽)에만 */
  }
  .nxfx-svc-card--side .nxfx-svc-shot::after {
    background: linear-gradient(to right, transparent 64%, color-mix(in srgb, var(--nxfx-surface, var(--background)) 58%, transparent) 88%, var(--nxfx-surface, var(--background)) 100%);
  }
  .nxfx-svc-card--side .nxfx-svc-card__in {
    flex: 1 1 0;
    padding-top: clamp(1.75rem, 1.1rem + 1vw, 2.25rem);
    padding-left: clamp(1rem, 0.6rem + 0.8vw, 1.5rem);
  }
  .nxfx-svc-card--side .nxfx-svc-main {
    justify-content: center;
  }
}
@media (min-width: 640px) and (max-width: 1023.98px) {
  .nxfx-svc-grid:not(.nxfx-svc-grid--solo) > :last-child:nth-child(odd) > .nxfx-svc-card--shot > .nxfx-glow__body {
    flex-direction: row;
    align-items: stretch;
  }
  .nxfx-svc-grid:not(.nxfx-svc-grid--solo) > :last-child:nth-child(odd) > .nxfx-svc-card--shot .nxfx-svc-shot {
    flex: 0 0 46%;
    align-self: stretch;
  }
  .nxfx-svc-grid:not(.nxfx-svc-grid--solo) > :last-child:nth-child(odd) > .nxfx-svc-card--shot .nxfx-svc-shot__img {
    object-position: left center;
  }
  .nxfx-svc-grid:not(.nxfx-svc-grid--solo) > :last-child:nth-child(odd) > .nxfx-svc-card--shot .nxfx-svc-shot::after {
    background: linear-gradient(to right, transparent 64%, color-mix(in srgb, var(--nxfx-surface, var(--background)) 58%, transparent) 88%, var(--nxfx-surface, var(--background)) 100%);
  }
  .nxfx-svc-grid:not(.nxfx-svc-grid--solo) > :last-child:nth-child(odd) > .nxfx-svc-card--shot .nxfx-svc-card__in {
    flex: 1 1 0;
    padding-top: var(--nx-card-pad-sm, 24px);
  }
  .nxfx-svc-grid:not(.nxfx-svc-grid--solo) > :last-child:nth-child(odd) > .nxfx-svc-card--shot .nxfx-svc-main {
    justify-content: center;
  }
}
@media (min-width: 640px) {
  .nxfx-svc-grid--solo .nxfx-svc-card--shot > .nxfx-glow__body {
    flex-direction: row;
    align-items: stretch;
  }
  .nxfx-svc-grid--solo .nxfx-svc-card--shot .nxfx-svc-shot {
    flex: 0 0 min(44%, 30rem); /* 사진은 한 칸 크기(480px)를 넘지 않는다 */
    align-self: stretch;
  }
  .nxfx-svc-grid--solo .nxfx-svc-card--shot .nxfx-svc-shot__img {
    object-position: left center;
  }
  .nxfx-svc-grid--solo .nxfx-svc-card--shot .nxfx-svc-shot::after {
    background: linear-gradient(to right, transparent 64%, color-mix(in srgb, var(--nxfx-surface, var(--background)) 58%, transparent) 88%, var(--nxfx-surface, var(--background)) 100%);
  }
  .nxfx-svc-grid--solo .nxfx-svc-card--shot .nxfx-svc-card__in {
    flex: 1 1 0;
    padding-top: var(--nx-card-pad, 32px);
  }
  .nxfx-svc-grid--solo .nxfx-svc-card--shot .nxfx-svc-main {
    justify-content: center;
  }
  /* 한 장뿐인 글 카드 - 글은 읽기 좋은 폭까지만, 오른쪽 반은 배경 큰 숫자가 맡는다.
     (폭은 글 덩어리 · 가격 발치에만 건다 - 카드 안 면에 걸면 면의 빛 물듦이 그 폭에서 세로로 끊겨 보인다) */
  .nxfx-svc-grid--solo .nxfx-svc-card--text .nxfx-svc-main,
  .nxfx-svc-grid--solo .nxfx-svc-card--text .nxfx-svc-foot {
    max-width: 43rem;
  }
}

/* 사진 카드와 한 줄에 선 글 카드(사진이 일부 항목에만 있을 때 · 여러 칸일 때만):
   카드가 사진 카드 키만큼 늘어난다 - 번호는 위, 글 덩어리는 아래(옆 사진 카드의 글과 같은 높이대)에 서고,
   가격 발치는 옆 카드와 같은 아랫선에 선다. 빈 윗면은 배경 큰 숫자가 채운다 */
@media (min-width: 640px) {
  .nxfx-svc-grid--shot:not(.nxfx-svc-grid--solo) .nxfx-svc-card--text .nxfx-svc-top {
    margin-bottom: auto;
  }
}

/* ── 손 반응 묶음(카드 한 장) - 들림 · 광채 · 테두리 · 빛 띠는 FxGlowCard 가 한다 ─────────── */
@media (hover: hover) {
  .nxfx-glow:hover .nxfx-svc-rule {
    width: 4.5rem;
    background: linear-gradient(90deg, var(--accent), transparent);
  }
  .nxfx-glow:hover .nxfx-svc-foot__in::before {
    background-color: var(--nx-line-accent);
  }
  .nxfx-glow:hover .nxfx-svc-bgnum {
    opacity: 1;
    transform: translate3d(-8px, 4px, 0);
  }
  .nxfx-glow:hover .nxfx-svc-shot__img {
    transform: scale(1.04);
  }
}
@media (hover: none) {
  .nxfx-glow:active .nxfx-svc-rule {
    width: 4.5rem;
    background: linear-gradient(90deg, var(--accent), transparent);
  }
  .nxfx-glow:active .nxfx-svc-bgnum {
    opacity: 1;
  }
}

/* ── 아래: 문의 버튼 · 추가 안내 · 이름 띠 ─────────────────────── */
.nxfx-svc-cta {
  margin-top: calc(clamp(2rem, 1.5rem + 2.1vw, 3.5rem) - var(--nxfx-svc-pre));
  padding-top: var(--nxfx-svc-pre);
  pointer-events: none;
  /* 버튼 칸을 제 층에 올린다 - 칸이 소수점 위치(예: 367.2px)에 서면 알약 버튼의 둥근 가림 안쪽에 실금 사각형이 비친다(폰 폭에서 확인) */
  will-change: transform;
}
.nxfx-svc-cta > * {
  pointer-events: auto;
}
.nxfx-svc-pair {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.625rem 2rem;
  margin-top: clamp(2rem, 1.5rem + 2.1vw, 3.5rem);
  padding-top: clamp(1.25rem, 1.1rem + 0.65vw, 1.75rem);
  border-top: 1px solid var(--nx-line);
}
@media (min-width: 768px) {
  .nxfx-svc-pair--labeled {
    grid-template-columns: minmax(0, 3fr) minmax(0, 9fr);
  }
}
.nxfx-svc-pair > .nx-body {
  max-width: 46rem;
}
/* 이름 띠는 흐를 때만 보인다 - 멈춘 화면(스크립트 없음 · 동작 줄이기)에서는 카드 이름을 되풀이한 글일 뿐이라 그리지 않는다.
   글자는 옅게 채운다(윤곽선 글자는 획이 겹쳐 지저분하다) */
html:not(.nx-js) .nxfx-svc-mq {
  display: none;
}
.nxfx-svc-mq {
  margin-top: clamp(3rem, 2.3rem + 3vw, 5.5rem);
  margin-inline: -1rem;
}
.nxfx-svc-mq .nxfx-mq__item {
  color: color-mix(in srgb, var(--foreground) 13%, transparent);
}
.nxfx-svc-mq .nxfx-mq__item::after {
  background: color-mix(in srgb, var(--accent) 55%, transparent);
}
@media (min-width: 768px) {
  .nxfx-svc-mq { margin-inline: -1.5rem; }
}
@media (min-width: 1024px) {
  .nxfx-svc-mq { margin-inline: -2rem; }
}

@media (prefers-reduced-motion: reduce) {
  .nxfx-svc-rule,
  .nxfx-svc-foot__in::before,
  .nxfx-svc-bgnum,
  .nxfx-svc-roll,
  .nxfx-svc-shot__img {
    transition: none;
    transform: none !important;
  }
  .nxfx-svc-price__won {
    transition: none;
    opacity: 1 !important;
  }
  .nxfx-svc-bgnum {
    opacity: 0.8 !important;
  }
  .nxfx-svc-cell {
    transition: none;
  }
  .nxfx-svc-ring::before {
    animation: none !important;
  }
}

/* AI 템플릿 티 걷기(2026-11-12) - 서비스 번호(순서 뜻이 없다) · 배경 큰 숫자 */
.nxfx-svc-num, .nxfx-svc-bgnum { display: none; }