/**
 * 첫 화면 얹은 안(n1) 전용 배치 · 연출 - 실험 폴더(src/app/hero-next/) 안에서만 쓴다.
 *
 *  · 클래스는 모두 `nxfx-hn` 으로 시작한다(공용 연출층 fx 와 같은 머리말 · 운영 클래스와 겹치지 않는다).
 *  · 공용 부품(`.nxfx-*`)의 opacity · transform · animation 은 여기서 덮지 않는다.
 *    공용 부품에는 색 칸(토큰) · 면색 · 혼합 방식 · 치수만 갈아 끼운다.
 *  · 글 묶음과 띠의 **등장은 이 파일의 CSS 가 첫 그림부터 돌린다**(구동기 스크립트를 기다리지 않는다).
 *    관문은 공용층과 같은 `html.nx-js` 하나다 - 동작 줄이기 · 스크립트 없음 · still=1 이면 붙지 않아 끝 상태로 보인다.
 *  · 색은 사이트 토큰(--background · --foreground · --accent · --card · --muted · --cta-ink)과
 *    얹는 층 토큰(--nx-deep · --nx-on-deep · --nx-line · --nx-ink-*)을 color-mix() · oklch(from …) 로 섞어서만 만든다.
 */

/* ════ 1. 색 · 치수 토큰 ════ */
.nxfx-hn {
  position: relative;
  isolation: isolate;
  background-color: var(--background);
  color: var(--foreground);
  /* 좌우 여백: 폰 16 · 태블릿 24 · PC 32 - 아래 섹션 뼈대(.nx-sec 의 좌우 여백 · .nx-wrap 1280)와 같은 값이라
     첫 화면 글 · 띠 · 다음 섹션 제목의 왼쪽 선이 한 줄로 선다 */
  --nxfx-hn-gutter: 1rem;
  /* 아래 띠가 첫 화면 위로 올라타는 깊이 - 띠가 없으면 0 */
  --nxfx-hn-lap: 0px;
  /* 사진(짙은 층) 위에서 쓰는 밝은 포인트색 - 색상 · 채도는 그대로 두고 명도만 올린다 */
  --nxfx-hn-bright: color-mix(in oklab, var(--accent) 48%, var(--nx-on-deep));
  --nxfx-hn-bright-2: color-mix(in oklab, var(--accent) 16%, var(--nx-on-deep));
  /* 사진 위 어둠 층의 색 - 가게 짙은 톤에 포인트색 기운을 섞는다 */
  --nxfx-hn-tint: var(--nx-deep);
  --nxfx-hn-ease: var(--nxfx-ease-out, cubic-bezier(0.16, 1, 0.3, 1));
}
@supports (color: oklch(from red l c h)) {
  .nxfx-hn {
    --nxfx-hn-bright: oklch(from var(--accent) 0.86 c h);
    --nxfx-hn-bright-2: oklch(from var(--accent) 0.955 calc(c * 0.42) h);
    --nxfx-hn-tint: color-mix(in oklab, var(--nx-deep) 54%, oklch(from var(--accent) 0.2 calc(c * 0.9) h));
  }
}
/* 입장 막은 섹션 밖 형제라(상단 띠까지 덮는다) 같은 색 칸을 따로 받는다 - 값은 위와 같다 */
.nxfx-hn-veil {
  --nxfx-hn-bright: color-mix(in oklab, var(--accent) 48%, var(--nx-on-deep));
  --nxfx-hn-bright-2: color-mix(in oklab, var(--accent) 16%, var(--nx-on-deep));
  --nxfx-hn-tint: var(--nx-deep);
  --nxfx-hn-ease: var(--nxfx-ease-out, cubic-bezier(0.16, 1, 0.3, 1));
}
@supports (color: oklch(from red l c h)) {
  .nxfx-hn-veil {
    --nxfx-hn-bright: oklch(from var(--accent) 0.86 c h);
    --nxfx-hn-bright-2: oklch(from var(--accent) 0.955 calc(c * 0.42) h);
    --nxfx-hn-tint: color-mix(in oklab, var(--nx-deep) 54%, oklch(from var(--accent) 0.2 calc(c * 0.9) h));
  }
}
.nxfx-hn--lap {
  --nxfx-hn-lap: 1.75rem;
}
@media (min-width: 768px) {
  .nxfx-hn {
    --nxfx-hn-gutter: 1.5rem;
  }
  .nxfx-hn--lap {
    --nxfx-hn-lap: 2.75rem;
  }
  .nxfx-hn--lap-one {
    --nxfx-hn-lap: 1.875rem;
  }
}
@media (min-width: 1024px) {
  .nxfx-hn {
    --nxfx-hn-gutter: 2rem;
  }
}

/* ════ 2. 무대: 사진(또는 바탕 장식) + 글 묶음. 글 묶음은 지금 운영과 같은 왼쪽 아래 ════ */
.nxfx-hn__stage {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  --nxfx-hn-ink: var(--foreground);
  --nxfx-hn-label: var(--accent);
  --nxfx-ptr-c: color-mix(in srgb, var(--accent) 15%, transparent);
  /* 흐르는 빛줄(선 · 빛) · 포인터 둘레 격자의 색 - 무대 바탕에 따라 아래에서 갈아 끼운다 */
  --nxfx-hn-beam-line: color-mix(in srgb, var(--foreground) 7%, transparent);
  --nxfx-hn-beam-light: color-mix(in srgb, var(--accent) 82%, transparent);
  --nxfx-hn-spot-c: color-mix(in srgb, var(--accent) 36%, transparent);
}
/* 사진이 있을 때: 한 화면을 거의 채우되 아래 띠 머리가 같은 화면에 걸리게 한 뼘 남긴다 */
.nxfx-hn--photo .nxfx-hn__stage {
  min-height: clamp(540px, calc(100svh - 112px), 780px);
  background-color: var(--nx-deep);
  /* 사진 위 글자색 = 짙은 층의 반대쪽 토큰 */
  --nxfx-hn-ink: var(--nx-on-deep);
  --nxfx-hn-label: color-mix(in oklab, var(--nxfx-hn-bright) 62%, var(--nx-on-deep));
  /* 공용 부품이 열어 둔 색 칸만 이 무대 안에서 갈아 끼운다(포인터 빛 · 그라디언트 글 · 테두리 버튼 글자) */
  --nxfx-ptr-c: color-mix(in srgb, var(--nxfx-hn-bright) 34%, transparent);
  --nxfx-grad-a: var(--nxfx-hn-bright);
  --nxfx-grad-b: var(--nxfx-hn-bright-2);
  --nxfx-ghost-ink: var(--nx-on-deep);
  --nxfx-hn-beam-line: color-mix(in srgb, var(--nx-on-deep) 9%, transparent);
  --nxfx-hn-beam-light: color-mix(in srgb, var(--nxfx-hn-bright) 92%, transparent);
  --nxfx-hn-spot-c: color-mix(in srgb, var(--nxfx-hn-bright-2) 30%, transparent);
}
/* 포인트색이 무채색인 가게: 빛을 색이 아니라 밝기로 쓴다(짙은 층의 반대쪽 토큰) */
.nxfx-hn--photo.nxfx-hn--mono .nxfx-hn__stage {
  --nxfx-hn-beam-light: color-mix(in srgb, var(--nx-on-deep) 78%, transparent);
  --nxfx-hn-spot-c: color-mix(in srgb, var(--nx-on-deep) 40%, transparent);
}
.nxfx-hn--plain.nxfx-hn--mono .nxfx-hn__stage {
  --nxfx-hn-beam-light: color-mix(in srgb, var(--foreground) 62%, transparent);
  --nxfx-hn-spot-c: color-mix(in srgb, var(--foreground) 22%, transparent);
  /* 무채색 오라는 색 기운이 아니라 탁한 안개로 보인다 - 공용 오라의 농도 칸만 낮춘다 */
  --nxfx-bd-aura-p: 8%;
  /* 별 무리 뒤 구름도 같은 이유로 낮춘다 - 별 점은 그대로 반짝인다 */
  --nxfx-cosmic-p: 5%;
}
@media (min-width: 768px) {
  /* 태블릿: 세로로 긴 화면에서 글이 화면 한참 아래에서 시작하지 않게 무대를 낮춘다 */
  .nxfx-hn--photo .nxfx-hn__stage {
    min-height: clamp(560px, calc(100svh - 320px), 700px);
  }
}
@media (min-width: 1024px) {
  .nxfx-hn--photo .nxfx-hn__stage {
    min-height: clamp(600px, calc(100svh - 104px), 980px);
  }
}
/* 사진이 없을 때: 가게 바탕 톤 그대로 글 · 색 · 여백으로 채운다(로고 카드 · 자리 채움 그림 없음) */
.nxfx-hn--plain .nxfx-hn__stage {
  background-color: var(--muted, var(--background));
  border-bottom: 1px solid var(--nx-line);
}
/* 별 무리(어두운 테마 · 사진 없는 무대): 별 점이 글자 사이에 놓이면 가운뎃점 · 마침표처럼 읽힌다 -
   글 묶음이 놓이는 자리에서는 걷고(가림만 · 공용 부품의 투명도 · 움직임은 그대로), 글이 없는 쪽에서만 반짝인다.
   폰 · 태블릿은 글이 전체 폭이라 글 위쪽 띠에만, PC 는 글 묶음 오른쪽에만 남긴다 */
.nxfx-hn--plain .nxfx-hn__stage .nxfx-bd__cosmic {
  -webkit-mask-image: linear-gradient(180deg, var(--nx-deep) 0, var(--nx-deep) 4.5rem, transparent 7.5rem);
  mask-image: linear-gradient(180deg, var(--nx-deep) 0, var(--nx-deep) 4.5rem, transparent 7.5rem);
}
@media (min-width: 1024px) {
  .nxfx-hn--plain .nxfx-hn__stage .nxfx-bd__cosmic {
    --nxfx-hn-star-x: calc(max(var(--nxfx-hn-gutter), (100% - 1280px) / 2) + 44rem);
    -webkit-mask-image: linear-gradient(90deg, transparent 0, transparent var(--nxfx-hn-star-x), var(--nx-deep) calc(var(--nxfx-hn-star-x) + 9rem));
    mask-image: linear-gradient(90deg, transparent 0, transparent var(--nxfx-hn-star-x), var(--nx-deep) calc(var(--nxfx-hn-star-x) + 9rem));
  }
}

/* ── 2-1. 사진 층: 시차(FxParallax) 안에서 느리게 커진다 ── */
.nxfx-hn__bg {
  position: absolute;
  inset: 0;
  z-index: -4;
  overflow: hidden;
  background-color: var(--nx-deep);
}
/* 들어올 때 한 번: 조금 크게 잡혀 있던 사진이 제자리로 당겨 앉는다(transform 만 · 폰도 한 번은 돈다) */
.nxfx-hn__settle {
  position: absolute;
  inset: 0;
  transform-origin: 62% 46%;
}
html.nx-js .nxfx-hn__settle {
  animation: nxfxHnSettle 2s var(--nxfx-hn-ease) var(--nxfx-hn-t0, 0ms) 1 backwards;
}
@keyframes nxfxHnSettle {
  from { transform: scale(1.13); }
  to { transform: scale(1); }
}
.nxfx-hn__plx {
  position: absolute;
  inset: -5% 0;
}
.nxfx-hn__zoom {
  position: absolute;
  inset: 0;
  transform-origin: 62% 46%;
  will-change: transform;
}
.nxfx-hn__zoom > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
}
/* PC · 태블릿: 아주 느린 왕복 확대(영상 대신) */
html.nx-js .nxfx-hn__zoom {
  animation: nxfxHnKen 26s ease-in-out infinite alternate;
}
@keyframes nxfxHnKen {
  from { transform: scale(1.02) translate3d(0, 0, 0); }
  to { transform: scale(1.12) translate3d(-1.2%, -1%, 0); }
}
/* 폰: 한 번만 천천히 커지고 멈춘다(상시 움직임 없음 · transform 만) */
@media (max-width: 640px) {
  html.nx-js .nxfx-hn__zoom {
    animation: nxfxHnKenOnce 7s cubic-bezier(0.22, 0.61, 0.36, 1) 1 both;
  }
}
@keyframes nxfxHnKenOnce {
  from { transform: scale(1) translate3d(0, 0, 0); }
  to { transform: scale(1.09) translate3d(-0.8%, -0.8%, 0); }
}

/* ── 2-2. 어둠 층: 무채색으로 전체를 덮지 않는다. 브랜드 색으로 물들이고 글이 놓이는 쪽에만 모은다 ── */
.nxfx-hn__dawn,
.nxfx-hn__scrim,
.nxfx-hn__aura,
.nxfx-hn__grid,
.nxfx-hn__beams,
.nxfx-hn__spot {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
/* 밝아오는 사진: 사진 위 짙은 겹이 1.5초에 걷힌다(사진 자체는 처음부터 그려져 있다 - 첫 그림을 늦추지 않는다).
   글은 짙은 층의 반대쪽 색이라 걷히는 내내 읽힌다 */
.nxfx-hn__dawn {
  z-index: -3;
  background-color: var(--nxfx-hn-tint);
  opacity: 0;
}
html.nx-js .nxfx-hn__dawn {
  animation: nxfxHnDawn 1.5s cubic-bezier(0.33, 0, 0.2, 1) var(--nxfx-hn-t0, 0ms) 1 backwards;
}
@keyframes nxfxHnDawn {
  from { opacity: 0.84; }
  to { opacity: 0; }
}
.nxfx-hn__scrim {
  z-index: -3;
  /* 폰: 글이 화면 아래쪽 전체 폭에 놓인다 - 아래에서 위로 걷히고, 맨 위는 헤더 글자만 받친다 */
  background:
    linear-gradient(
      0deg,
      color-mix(in srgb, var(--nxfx-hn-tint) 93%, transparent) 0%,
      color-mix(in srgb, var(--nxfx-hn-tint) 82%, transparent) 30%,
      color-mix(in srgb, var(--nxfx-hn-tint) 50%, transparent) 54%,
      color-mix(in srgb, var(--nxfx-hn-tint) 12%, transparent) 76%,
      transparent 100%
    ),
    linear-gradient(180deg, color-mix(in srgb, var(--nxfx-hn-tint) 46%, transparent) 0%, transparent 20%);
}
@media (min-width: 768px) {
  /* PC · 태블릿: 글은 왼쪽 아래 - 왼쪽에서 오른쪽으로 걷혀 오른쪽 사진은 제 밝기에 가깝게 남는다 */
  .nxfx-hn__scrim {
    background:
      linear-gradient(
        90deg,
        color-mix(in srgb, var(--nxfx-hn-tint) 86%, transparent) 0%,
        color-mix(in srgb, var(--nxfx-hn-tint) 72%, transparent) 26%,
        color-mix(in srgb, var(--nxfx-hn-tint) 40%, transparent) 50%,
        color-mix(in srgb, var(--nxfx-hn-tint) 10%, transparent) 72%,
        transparent 88%
      ),
      linear-gradient(
        0deg,
        color-mix(in srgb, var(--nxfx-hn-tint) 62%, transparent) 0%,
        color-mix(in srgb, var(--nxfx-hn-tint) 22%, transparent) 26%,
        transparent 48%
      ),
      linear-gradient(180deg, color-mix(in srgb, var(--nxfx-hn-tint) 44%, transparent) 0%, transparent 18%);
  }
}
@media (min-width: 768px) {
  /* 포인트색이 무채색인 가게: 강조가 색이 아니라 밝기 차이라, 윗줄이 가라앉아도 읽히게 어둠 층을 조금 더 멀리 끈다 */
  .nxfx-hn--mono .nxfx-hn__scrim {
    background:
      linear-gradient(
        90deg,
        color-mix(in srgb, var(--nxfx-hn-tint) 88%, transparent) 0%,
        color-mix(in srgb, var(--nxfx-hn-tint) 78%, transparent) 28%,
        color-mix(in srgb, var(--nxfx-hn-tint) 56%, transparent) 52%,
        color-mix(in srgb, var(--nxfx-hn-tint) 26%, transparent) 74%,
        transparent 94%
      ),
      linear-gradient(
        0deg,
        color-mix(in srgb, var(--nxfx-hn-tint) 62%, transparent) 0%,
        color-mix(in srgb, var(--nxfx-hn-tint) 22%, transparent) 26%,
        transparent 48%
      ),
      linear-gradient(180deg, color-mix(in srgb, var(--nxfx-hn-tint) 44%, transparent) 0%, transparent 18%);
  }
}
/* 어두운 테마 가게: 사진 전체를 한 톤 가라앉히고(오른쪽의 밝은 창 · 하늘이 글보다 먼저 튀지 않게)
   가장자리는 더 깊게, 맨 아래는 띠가 놓인 짙은 바탕으로 녹인다 - 사진과 다음 구획 사이에 칼선이 서지 않는다 */
.nxfx-hn--photo.nxfx-hn--dark .nxfx-hn__scrim::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      0deg,
      color-mix(in srgb, var(--background) 94%, transparent) 0%,
      color-mix(in srgb, var(--background) 46%, transparent) 14%,
      transparent 36%
    ),
    radial-gradient(86% 110% at 34% 56%, transparent 38%, color-mix(in srgb, var(--nxfx-hn-tint) 48%, transparent) 100%);
  background-color: color-mix(in srgb, var(--nxfx-hn-tint) 24%, transparent);
}
/* 밝은 테마 가게(PC · 태블릿): 사진은 제 밝기로 두고 먼 가장자리만 한 톤 깊게 눌러 화면에 깊이를 준다 */
@media (min-width: 768px) {
  .nxfx-hn--photo:not(.nxfx-hn--dark) .nxfx-hn__scrim::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(92% 118% at 44% 54%, transparent 54%, color-mix(in srgb, var(--nxfx-hn-tint) 34%, transparent) 100%);
  }
}
/* 포인트색 기운: 글 묶음 뒤(왼쪽 아래)에서 번진다 */
.nxfx-hn__aura {
  z-index: -3;
  background: radial-gradient(
    64% 78% at 6% 96%,
    color-mix(in srgb, var(--accent) 46%, transparent) 0%,
    color-mix(in srgb, var(--accent) 16%, transparent) 42%,
    transparent 72%
  );
  mix-blend-mode: screen;
  opacity: 0.8;
}
.nxfx-hn--mono .nxfx-hn__aura {
  /* 무채색 포인트는 색이 아니라 뿌연 안개가 된다 - 얹지 않는다 */
  display: none;
}
html.nx-js .nxfx-hn__aura {
  animation: nxfxHnAura 9s ease-in-out infinite;
}
@keyframes nxfxHnAura {
  0%, 100% { opacity: 0.55; }
  50% { opacity: 0.95; }
}
html.nx-js .nxfx-hn--mono .nxfx-hn__aura {
  animation-name: nxfxHnAuraMono;
}
@keyframes nxfxHnAuraMono {
  0%, 100% { opacity: 0.2; }
  50% { opacity: 0.36; }
}
/* 사진 위 옅은 격자 결 - 글 쪽에서 진하고 오른쪽 위로 사라진다 */
.nxfx-hn__grid {
  z-index: -2;
  background-image:
    linear-gradient(color-mix(in srgb, var(--nx-on-deep) 7%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--nx-on-deep) 7%, transparent) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(120% 110% at 0% 100%, var(--nx-deep) 0%, color-mix(in srgb, var(--nx-deep) 55%, transparent) 44%, transparent 78%);
  mask-image: radial-gradient(120% 110% at 0% 100%, var(--nx-deep) 0%, color-mix(in srgb, var(--nx-deep) 55%, transparent) 44%, transparent 78%);
}
@media (max-width: 640px) {
  /* 폰: 늘 도는 장식은 멈춘다(정지 상태로 남는다) */
  html.nx-js .nxfx-hn__aura,
  html.nx-js .nxfx-hn--mono .nxfx-hn__aura {
    animation: none;
  }
  .nxfx-hn__grid {
    background-size: 48px 48px;
  }
}
/* ── 2-3. 흐르는 빛줄: 사진 쪽(오른쪽)에 선 세 줄, 선을 따라 빛이 위에서 아래로 내려간다(PC · 태블릿만).
        글 묶음(왼쪽) 위로는 지나가지 않는다. 위 · 아래 끝은 무대 안으로 사라진다 ── */
.nxfx-hn__beams {
  z-index: -2;
  display: none;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, var(--nx-deep) 18%, var(--nx-deep) 74%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, var(--nx-deep) 18%, var(--nx-deep) 74%, transparent 100%);
}
@media (min-width: 768px) {
  .nxfx-hn__beams {
    display: block;
  }
}
.nxfx-hn__beams > i {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--nxfx-hn-x, 50%);
  width: 1px;
  background-color: var(--nxfx-hn-beam-line);
}
.nxfx-hn__beams > i::after {
  content: "";
  position: absolute;
  top: 0;
  left: -3px;
  width: 7px;
  height: 30%;
  /* 가운데 1px 은 또렷한 빛, 둘레 7px 은 옅은 번짐 */
  background:
    linear-gradient(180deg, transparent, var(--nxfx-hn-beam-light) 74%, transparent) center / 1px 100% no-repeat,
    linear-gradient(180deg, transparent, color-mix(in srgb, var(--nxfx-hn-beam-light) 20%, transparent) 74%, transparent) center / 7px 100% no-repeat;
  transform: translate3d(0, -110%, 0);
  opacity: 0;
}
html.nx-js .nxfx-hn__beams > i::after {
  opacity: 1;
  animation: nxfxHnBeamY var(--nxfx-hn-bt, 10s) linear var(--nxfx-hn-bd, 0s) infinite;
}
@keyframes nxfxHnBeamY {
  from { transform: translate3d(0, -110%, 0); }
  to { transform: translate3d(0, 440%, 0); }
}

/* ── 2-4. 포인터 빛 ── */
/* 사진 위에서는 밝힌 포인트색을 스크린으로 얹어 실제로 보이게 한다(공용 부품의 색 · 혼합만 바꾼다) */
.nxfx-hn--photo .nxfx-hn__stage > .nxfx-ptr {
  mix-blend-mode: screen;
}
/* 포인트색이 무채색인 가게: 넓은 빛은 색 기운 없이 뿌연 안개가 된다 - 넓은 빛은 크게 낮추고, 반응은 아래 격자 결이 맡는다 */
.nxfx-hn--photo.nxfx-hn--mono .nxfx-hn__stage {
  --nxfx-ptr-c: color-mix(in srgb, var(--nxfx-hn-bright) 12%, transparent);
}
/* 포인터 둘레에서만 드러나는 격자 결 - 넓게 번지는 안개가 아니라 또렷한 선이 빛난다.
   좌표(--nxfx-mx · --nxfx-my)와 켜짐(.nxfx-on)은 공용 구동기가 이 요소에 넣는다(PC 정밀 포인터만) */
.nxfx-hn__spot {
  z-index: 0;
  opacity: 0;
  background-image:
    linear-gradient(var(--nxfx-hn-spot-c) 1px, transparent 1px),
    linear-gradient(90deg, var(--nxfx-hn-spot-c) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(
    250px circle at var(--nxfx-mx, 50%) var(--nxfx-my, 50%),
    var(--nx-deep) 0%,
    color-mix(in srgb, var(--nx-deep) 42%, transparent) 46%,
    transparent 100%
  );
  mask-image: radial-gradient(
    250px circle at var(--nxfx-mx, 50%) var(--nxfx-my, 50%),
    var(--nx-deep) 0%,
    color-mix(in srgb, var(--nx-deep) 42%, transparent) 46%,
    transparent 100%
  );
  transition: opacity 0.6s var(--nxfx-hn-ease);
}
.nxfx-hn__spot.nxfx-on {
  opacity: 1;
}
/* 사진 없는 무대의 공용 격자는 가운데 위에서 시작한다 - 선이 겹치게 같은 기준점을 쓴다 */
.nxfx-hn--plain .nxfx-hn__spot {
  background-position: center top;
}
@media (max-width: 640px) {
  .nxfx-hn__spot {
    background-size: 48px 48px;
  }
}

/* ════ 3. 글 묶음: 라벨 → 제목 → 설명 → 버튼(순서 · 문구는 운영 그대로) ════ */
.nxfx-hn__wrap {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: calc(1280px + 2 * var(--nxfx-hn-gutter));
  margin-inline: auto;
  /* 위는 겹쳐 뜨는 헤더 자리, 아래는 띠가 올라타는 깊이만큼 더 비운다 */
  padding: 7rem var(--nxfx-hn-gutter) calc(2.5rem + var(--nxfx-hn-lap));
}
@media (min-width: 768px) {
  .nxfx-hn__wrap {
    padding-top: 8rem;
    padding-bottom: calc(clamp(3rem, 1.2rem + 4.2vh, 4.75rem) + var(--nxfx-hn-lap));
  }
}
@media (min-width: 1024px) {
  .nxfx-hn__wrap {
    padding-top: 9rem;
  }
}
.nxfx-hn--plain .nxfx-hn__wrap {
  padding-top: 8.5rem;
  padding-bottom: calc(3.5rem + var(--nxfx-hn-lap));
}
@media (min-width: 768px) {
  .nxfx-hn--plain .nxfx-hn__wrap {
    padding-top: 10.5rem;
    padding-bottom: calc(5rem + var(--nxfx-hn-lap));
  }
}

/* ── 3-1. 라벨: 한글이 성기지 않게 본문 글꼴 · 좁은 자간으로, 사진 위에서는 밝힌 포인트색으로 ── */
.nxfx-hn .nxfx-hn__label {
  margin-bottom: clamp(0.875rem, 0.62rem + 1.05vw, 1.5rem);
  font-family: inherit;
  font-weight: 700;
  letter-spacing: 0.045em;
  color: var(--nxfx-hn-label);
}
.nxfx-hn--photo .nxfx-hn__label {
  /* 맥박 점(FxPulse)이 읽는 색 칸을 이 라벨 안에서만 밝힌 포인트색으로 */
  --accent: var(--nxfx-hn-bright);
  /* 13px 글자가 흰 꽃 · 창 같은 밝은 덩어리 위에 걸려도 읽히게 - 글자 바로 둘레의 좁은 그늘 */
  text-shadow:
    0 0 2px color-mix(in srgb, var(--nx-deep) 88%, transparent),
    0 0 9px color-mix(in srgb, var(--nx-deep) 66%, transparent),
    0 1px 22px color-mix(in srgb, var(--nx-deep) 58%, transparent);
}
/* 점 둘레의 가는 빛 고리 + 번짐(점 자체의 맥박은 공용 부품이 돌린다) */
.nxfx-hn .nxfx-hn__label .nxfx-pulse--dot {
  gap: 0.8em;
}
.nxfx-hn .nxfx-hn__label .nxfx-pulse--dot::before {
  outline: 1px solid color-mix(in srgb, var(--accent) 58%, transparent);
  outline-offset: 3px;
  filter: drop-shadow(0 0 5px color-mix(in srgb, var(--accent) 80%, transparent));
  margin-left: 4px;
}

/* ── 3-2. 제목: 큰 눈금(40 → 86)을 쓰되, 가장 긴 줄이 한 줄에 들어가는 크기까지만 키운다.
        바닥값보다 작아져야 들어가는 긴 제목은 바닥값에서 어절 단위로 줄을 바꾼다. ── */
.nxfx-hn .nxfx-hn__title {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: 100%;
  color: var(--nxfx-hn-ink);
  font-size: clamp(
    clamp(1.75rem, 1.1rem + 2.6vw, 3.25rem),
    calc((min(100vw, 1280px + 2 * var(--nxfx-hn-gutter)) - 2 * var(--nxfx-hn-gutter) - 1.25rem) / var(--nxfx-hn-em, 12)),
    var(--nx-fs-display)
  );
}
/* 줄: 자리(여백 · 높이)는 등장 전 · 중 · 후가 같다. 가림은 여백이 아니라 clip-path 로만 한다 */
.nxfx-hn__line {
  position: relative;
  display: block;
  max-width: 100%;
}
.nxfx-hn__line-in {
  display: block;
}
/* 그라디언트 강조 줄: 두 줄로 접혀도 줄마다 같은 색 흐름이 되게 + 빛 흐름이 이음매 없이 돌게(한 바퀴 = 무늬 한 폭) */
.nxfx-hn .nxfx-hn__title .nxfx-grad {
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  background-size: 183.34% 100%;
  text-shadow: none;
}
/* 사진 위 제목: 긴 줄이 어둠 층이 걷힌 밝은 쪽까지 뻗어도 읽히게 - 글자 둘레의 얇은 그늘 + 넓은 그늘 */
.nxfx-hn--photo .nxfx-hn__title {
  text-shadow:
    0 1px 2px color-mix(in srgb, var(--nx-deep) 42%, transparent),
    0 2px 30px color-mix(in srgb, var(--nx-deep) 56%, transparent);
}
.nxfx-hn--photo .nxfx-hn__title .nxfx-grad {
  /* 글자 채움이 투명이라 text-shadow 대신 글자 모양 그늘 */
  filter: drop-shadow(0 1px 10px color-mix(in srgb, var(--nx-deep) 46%, transparent));
}
@media (min-width: 641px) {
  /* 강조 줄 둘레의 옅은 포인트색 빛(무채색 포인트는 밑선이 맡는다 · 폰은 그리는 값을 아낀다) */
  .nxfx-hn--photo:not(.nxfx-hn--mono) .nxfx-hn__title .nxfx-grad {
    filter: drop-shadow(0 1px 10px color-mix(in srgb, var(--nx-deep) 46%, transparent))
      drop-shadow(0 0 30px color-mix(in srgb, var(--nxfx-hn-bright) 30%, transparent));
  }
  .nxfx-hn--plain:not(.nxfx-hn--mono) .nxfx-hn__title .nxfx-grad {
    filter: drop-shadow(0 8px 28px color-mix(in srgb, var(--accent) 20%, transparent));
  }
}
/* 포인트색이 무채색인 가게: 색으로는 강조가 갈리지 않는다 - 윗줄을 가라앉히고, 강조 줄은 제 밝기 + 지나가는 결 + 빛나는 밑선 */
.nxfx-hn--mono .nxfx-hn__title--em .nxfx-hn__line:not(.nxfx-hn__line--em) {
  /* 비치는 색이 아니라 짙은 층 쪽으로 섞은 불투명한 색 - 밝은 사진 위에서도 글자 속이 뜨지 않는다 */
  color: color-mix(in oklab, var(--nxfx-hn-ink) 72%, var(--nxfx-hn-tint));
}
@media (max-width: 640px) {
  /* 폰: 어둠 층이 아래에서만 올라와 윗줄 뒤가 더 밝다 - 가라앉히는 정도를 한 단 줄여 읽힘을 지킨다 */
  .nxfx-hn--photo.nxfx-hn--mono .nxfx-hn__title--em .nxfx-hn__line:not(.nxfx-hn__line--em) {
    color: color-mix(in oklab, var(--nxfx-hn-ink) 82%, var(--nxfx-hn-tint));
  }
}
.nxfx-hn--plain.nxfx-hn--mono .nxfx-hn__title--em .nxfx-hn__line:not(.nxfx-hn__line--em) {
  /* 사진 없는 바탕에서는 그 바탕색 쪽으로 가라앉힌다 */
  color: color-mix(in oklab, var(--nxfx-hn-ink) 72%, var(--muted, var(--background)));
}
.nxfx-hn--mono .nxfx-hn__title .nxfx-grad {
  --nxfx-grad-a: var(--nxfx-hn-ink);
  background-image: linear-gradient(
    100deg,
    var(--nxfx-hn-ink) 0%,
    var(--nxfx-hn-ink) 66%,
    color-mix(in oklab, var(--nxfx-hn-ink) 46%, var(--accent)) 74%,
    color-mix(in oklab, var(--nxfx-hn-ink) 34%, transparent) 79%,
    color-mix(in oklab, var(--nxfx-hn-ink) 46%, var(--accent)) 84%,
    var(--nxfx-hn-ink) 92%,
    var(--nxfx-hn-ink) 100%
  );
}
.nxfx-hn--mono .nxfx-hn__title--em .nxfx-hn__line--em::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.2em;
  height: max(2px, 0.045em);
  border-radius: 2px;
  background: linear-gradient(
    90deg,
    var(--nxfx-hn-ink) 0%,
    color-mix(in srgb, var(--accent) 80%, transparent) 46%,
    color-mix(in srgb, var(--accent) 0%, transparent) 100%
  );
  box-shadow:
    0 0 14px color-mix(in srgb, var(--nxfx-hn-ink) 62%, transparent),
    0 0 3px color-mix(in srgb, var(--nxfx-hn-ink) 80%, transparent);
  transform-origin: 0 50%;
}
.nxfx-hn--mono .nxfx-hn__title--em + .nxfx-hn__desc {
  margin-top: calc(clamp(1.125rem, 0.82rem + 1.25vw, 1.875rem) + 0.5rem);
}

/* ── 3-3. 설명 · 버튼 ── */
.nxfx-hn .nxfx-hn__desc {
  max-width: 35rem;
  margin-top: clamp(1.125rem, 0.82rem + 1.25vw, 1.875rem);
  color: color-mix(in srgb, var(--nxfx-hn-ink) 88%, transparent);
}
.nxfx-hn--plain .nxfx-hn__desc {
  color: var(--nx-ink-3);
}
/* 밝은 사진 위에서도 작은 글자 둘레가 가라앉게 - 짙은 층 색의 부드러운 그늘 한 겹(등장에 흐림을 쓰지 않아 얼룩이 생기지 않는다) */
.nxfx-hn--photo .nxfx-hn__desc {
  text-shadow: 0 1px 26px color-mix(in srgb, var(--nx-deep) 46%, transparent);
}
.nxfx-hn__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin-top: clamp(1.75rem, 1.36rem + 1.6vw, 2.75rem);
}
/* 사진 위 테두리 버튼: 밝힌 포인트색 테두리 + 뒤가 비치는 유리 면(면색 · 테두리색 · 흐림만 갈아 끼운다) */
.nxfx-hn--photo .nxfx-hn__actions .nxfx-btn--ghost {
  --accent: var(--nxfx-hn-bright);
}
.nxfx-hn--photo .nxfx-hn__actions .nxfx-btn--ghost .nxfx-btn__face {
  background-color: color-mix(in srgb, var(--nx-on-deep) 9%, transparent);
  border-color: color-mix(in srgb, var(--nx-on-deep) 54%, transparent);
  -webkit-backdrop-filter: blur(10px) saturate(1.2);
  backdrop-filter: blur(10px) saturate(1.2);
}
@media (hover: hover) {
  .nxfx-hn--photo .nxfx-hn__actions .nxfx-btn--ghost:hover .nxfx-btn__face {
    background-color: color-mix(in srgb, var(--nxfx-hn-bright) 20%, transparent);
    border-color: var(--nxfx-hn-bright);
  }
}
/* 움직임을 끈 화면(구동기 없음)에서 배율 1 일 때 둥근 면 안에 가는 가로선이 비치던 것 - 면을 제 층으로 올려 없앤다(값은 건드리지 않는다) */
.nxfx-hn__actions .nxfx-btn__face {
  will-change: transform;
}
@media (max-width: 640px) {
  /* 폰: 버튼 둘이 한 줄에 서게 안쪽 여백만 줄인다(눌림 높이 54px 유지) */
  .nxfx-hn__actions {
    gap: 0.625rem;
  }
  .nxfx-hn__actions .nxfx-btn--lg .nxfx-btn__face {
    min-height: 54px;
    padding: 0 1.45em;
    font-size: 1rem;
  }
}

/* ════ 4. 아래에 올라타는 띠 - 가게 서비스 구획의 이름 · 설명 · 가격만 쓴다. 칸마다 서비스 구획으로 간다 ════ */
.nxfx-hn__lap {
  position: relative;
  z-index: 3;
  margin-top: calc(var(--nxfx-hn-lap) * -1);
  padding-inline: var(--nxfx-hn-gutter);
  padding-bottom: clamp(1rem, 0.7rem + 1.2vw, 1.75rem);
}
.nxfx-hn__lap-in {
  max-width: 1280px;
  margin-inline: auto;
}
/* 판: 불투명한 한 가지 면색(사진에 걸친 윗부분과 아랫부분이 같은 톤) */
.nxfx-hn__plate {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid var(--nx-line);
  border-radius: var(--nx-radius);
  background-color: var(--card, var(--background));
  box-shadow: var(--nx-shadow);
  --nxfx-sweep-surface: color-mix(in srgb, var(--accent) 24%, transparent);
  --nxfx-hn-cell-hover: color-mix(in srgb, var(--accent) 8%, transparent);
  --nxfx-hn-cell-press: color-mix(in srgb, var(--accent) 15%, transparent);
}
/* 윗선을 따라 흐르는 빛줄 - 포인트색의 농담 단계가 이어진다(무늬 한 폭만큼 옮겨 이음매 없이 돈다) */
.nxfx-hn__flow {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
  width: 200%;
  height: 2px;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    transparent 0%,
    color-mix(in srgb, var(--accent) 34%, transparent) 7%,
    var(--accent) 16%,
    color-mix(in oklab, var(--accent) 52%, var(--card, var(--background))) 23%,
    color-mix(in oklab, var(--accent) 70%, var(--foreground)) 30%,
    color-mix(in srgb, var(--accent) 26%, transparent) 40%,
    transparent 50%,
    color-mix(in srgb, var(--accent) 34%, transparent) 57%,
    var(--accent) 66%,
    color-mix(in oklab, var(--accent) 52%, var(--card, var(--background))) 73%,
    color-mix(in oklab, var(--accent) 70%, var(--foreground)) 80%,
    color-mix(in srgb, var(--accent) 26%, transparent) 90%,
    transparent 100%
  );
}
html.nx-js .nxfx-hn__flow {
  animation: nxfxHnFlow 11s linear infinite;
}
@keyframes nxfxHnFlow {
  from { transform: translate3d(-50%, 0, 0); }
  to { transform: translate3d(0, 0, 0); }
}
/* 등장할 때 윗선을 한 번 훑고 지나가는 밝은 빛 */
.nxfx-hn__plate::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  z-index: 4;
  width: 32%;
  height: 3px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--accent) 60%, color-mix(in oklab, var(--accent) 40%, var(--card, var(--background))) 92%, transparent);
  box-shadow: 0 0 16px 1px color-mix(in srgb, var(--accent) 70%, transparent);
  opacity: 0;
}
html.nx-js .nxfx-hn__plate::before {
  animation: nxfxHnBeam 1.25s var(--nxfx-hn-ease) calc(var(--nxfx-hn-t0, 0ms) + 860ms) 1 backwards;
}
@keyframes nxfxHnBeam {
  0% { transform: translate3d(-110%, 0, 0); opacity: 0; }
  14% { opacity: 1; }
  82% { opacity: 1; }
  100% { transform: translate3d(330%, 0, 0); opacity: 0; }
}

.nxfx-hn .nxfx-hn__strip {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}
.nxfx-hn__cell,
.nxfx-hn__head {
  min-width: 0;
  /* 칸 사이 실금 - 오른쪽 · 아래로만 긋고 바깥쪽은 판이 잘라 낸다 */
  box-shadow:
    1px 0 0 var(--nx-line),
    0 1px 0 var(--nx-line);
}
.nxfx-hn__link {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-content: start;
  align-items: center;
  column-gap: 0.75rem;
  row-gap: 0.4375rem;
  height: 100%;
  padding: 1rem 1rem 1.125rem;
  color: var(--nx-ink-1);
  text-decoration: none;
  background-color: transparent;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 0.4s var(--nxfx-hn-ease);
}
.nxfx-hn__link > :where(:not(.nxfx-sweep)) {
  position: relative;
  z-index: 3;
}
.nxfx-hn__num {
  grid-column: 1;
  grid-row: 1;
}
.nxfx-hn__arrow {
  grid-column: 2;
  grid-row: 1;
  flex: none;
  width: 1.125rem;
  height: 1.125rem;
  color: var(--nx-ink-4);
  transition:
    transform 0.45s var(--nxfx-hn-ease),
    color 0.3s var(--nxfx-hn-ease);
}
.nxfx-hn__name {
  grid-column: 1 / -1;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  font-family: var(--font-heading, "Pretendard Variable", sans-serif);
  font-weight: var(--heading-weight, 700);
  font-size: clamp(0.9375rem, 0.86rem + 0.42vw, 1.3125rem);
  line-height: 1.35;
  letter-spacing: -0.015em;
  color: var(--nx-ink-1);
  word-break: keep-all;
  overflow-wrap: break-word;
}
.nxfx-hn__sub {
  grid-column: 1 / -1;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  font-size: 0.8125rem;
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
  color: var(--nx-ink-3);
  word-break: keep-all;
  overflow-wrap: break-word;
}
/* 가격: 한 줄 · 자리 폭이 고정된 숫자(올라가는 동안 흔들리지 않는다) */
.nxfx-hn__price {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--nx-ink-2);
}
@media (min-width: 768px) {
  .nxfx-hn__price {
    font-size: 0.9375rem;
  }
}
/* 손 반응: 면이 밝아지고(포인트색 기운) 위에서 빛이 내려앉고, 아래에 포인트색 선이 왼쪽부터 그어지고, 화살표가 밀린다.
   폰은 누르는 동안 같은 반응 */
.nxfx-hn__link::before,
.nxfx-hn__link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  pointer-events: none;
}
.nxfx-hn__link::after {
  top: 0;
  z-index: 1;
  height: 78%;
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 14%, transparent) 0%, transparent 100%);
  opacity: 0;
  transition: opacity 0.5s var(--nxfx-hn-ease);
}
.nxfx-hn__link::before {
  bottom: 0;
  z-index: 2;
  height: 2px;
  background: linear-gradient(90deg, var(--accent) 0%, color-mix(in srgb, var(--accent) 24%, transparent) 100%);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 0.55s var(--nxfx-hn-ease);
}
.nxfx-hn__name {
  transition: color 0.35s var(--nxfx-hn-ease);
}
@media (hover: hover) {
  .nxfx-hn__link:hover {
    background-color: var(--nxfx-hn-cell-hover);
  }
  .nxfx-hn__link:hover::after {
    opacity: 1;
  }
  .nxfx-hn__link:hover::before {
    transform: scaleX(1);
  }
  .nxfx-hn__link:hover .nxfx-hn__name {
    color: color-mix(in oklab, var(--accent) 38%, var(--nx-ink-1));
  }
  .nxfx-hn__link:hover .nxfx-hn__arrow {
    transform: translate3d(5px, 0, 0);
    color: var(--accent);
  }
}
.nxfx-hn__link:active {
  background-color: var(--nxfx-hn-cell-press);
  transition-duration: 0.08s;
}
.nxfx-hn__link:active::after {
  opacity: 1;
}
.nxfx-hn__link:active::before {
  transform: scaleX(1);
}
.nxfx-hn__link:active .nxfx-hn__arrow {
  transform: translate3d(5px, 0, 0);
  color: var(--accent);
}
.nxfx-hn__link:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -4px;
}

/* 폰 두 칸 격자: 칸이 홀수면 마지막 칸이 한 줄을 다 쓴다 */
@media (max-width: 767.98px) {
  .nxfx-hn__strip[data-n="3"] .nxfx-hn__cell:last-child,
  .nxfx-hn__strip[data-n="5"] .nxfx-hn__cell:last-child {
    grid-column: 1 / -1;
  }
  .nxfx-hn__head {
    grid-column: 1 / -1;
  }
}
@media (min-width: 768px) {
  .nxfx-hn .nxfx-hn__strip {
    grid-template-columns: repeat(var(--nxfx-hn-n, 4), minmax(0, 1fr));
  }
  .nxfx-hn__link {
    row-gap: 0.5rem;
    padding: 1.5rem 1.25rem 1.625rem;
  }
  .nxfx-hn .nxfx-hn__strip--head {
    grid-template-columns: minmax(0, 0.82fr) repeat(var(--nxfx-hn-n, 2), minmax(0, 1fr));
  }
}
/* 태블릿: 다섯 칸은 3 + 2 로 가지런히 */
@media (min-width: 768px) and (max-width: 1023.98px) {
  .nxfx-hn .nxfx-hn__strip[data-n="5"] {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
  .nxfx-hn__strip[data-n="5"] .nxfx-hn__cell {
    grid-column: span 2;
  }
  .nxfx-hn__strip[data-n="5"] .nxfx-hn__cell:nth-child(n + 4) {
    grid-column: span 3;
  }
}
@media (min-width: 1024px) {
  .nxfx-hn__link {
    padding: 1.75rem 1.5rem 1.875rem;
  }
}

/* ── 4-1. 칸이 셋 이하: 큰 칸 - 왼쪽에 구획 라벨 · 제목, 이름은 크게, 설명 · 가격은 작게 ── */
.nxfx-hn__head {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.375rem;
  padding: 1rem 1rem 1.0625rem;
  background-color: color-mix(in srgb, var(--accent) 5%, transparent);
}
.nxfx-hn__head-label {
  font-size: 0.8125rem;
  line-height: 1.5;
  font-weight: 700;
  letter-spacing: 0.045em;
  color: var(--accent);
}
.nxfx-hn__head-title {
  font-family: var(--font-heading, "Pretendard Variable", sans-serif);
  font-weight: var(--heading-weight, 700);
  font-size: clamp(1rem, 0.9rem + 0.45vw, 1.25rem);
  line-height: 1.4;
  letter-spacing: -0.015em;
  color: var(--nx-ink-2);
  word-break: keep-all;
  overflow-wrap: break-word;
}
.nxfx-hn__plate--big .nxfx-hn__link {
  row-gap: 0.625rem;
}
.nxfx-hn__plate--big .nxfx-hn__name {
  font-size: clamp(1.1875rem, 0.82rem + 1.5vw, 1.75rem);
  line-height: 1.25;
  letter-spacing: -0.025em;
}
.nxfx-hn__plate--big .nxfx-hn__sub {
  font-size: 0.875rem;
}
.nxfx-hn__plate--big .nxfx-hn__arrow {
  width: 1.375rem;
  height: 1.375rem;
}
@media (min-width: 768px) {
  .nxfx-hn__head {
    gap: 0.5rem;
    padding: 1.75rem 1.5rem 1.875rem;
  }
  .nxfx-hn__plate--big .nxfx-hn__link {
    padding: 1.75rem 1.5rem 1.875rem;
  }
}
@media (min-width: 1024px) {
  .nxfx-hn__head {
    padding: 2rem 2rem 2.125rem;
  }
  .nxfx-hn__plate--big .nxfx-hn__link {
    padding: 2rem 2rem 2.125rem;
  }
}

/* ── 4-2. 칸이 하나: 띠가 아니라 왼쪽 선에 붙는 작은 알약 ── */
.nxfx-hn__plate--one {
  width: fit-content;
  max-width: 100%;
  border-radius: 999px;
}
.nxfx-hn__plate--one .nxfx-hn__flow,
.nxfx-hn__plate--one::before,
.nxfx-hn__plate--one .nxfx-hn__link::before,
.nxfx-hn__plate--one .nxfx-hn__link::after {
  display: none;
}
.nxfx-hn .nxfx-hn__plate--one .nxfx-hn__strip {
  grid-template-columns: minmax(0, 1fr);
}
.nxfx-hn__plate--one .nxfx-hn__cell {
  box-shadow: none;
}
.nxfx-hn__plate--one .nxfx-hn__link {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.9375rem 1.25rem 0.9375rem 1.5rem;
  border-radius: 999px;
}
.nxfx-hn__pill-label {
  flex: none;
  font-size: 0.8125rem;
  line-height: 1.4;
  font-weight: 700;
  letter-spacing: 0.045em;
  color: var(--accent);
}
.nxfx-hn__plate--one .nxfx-hn__name {
  -webkit-line-clamp: 2;
  font-size: 1rem;
}
.nxfx-hn__plate--one .nxfx-hn__sub {
  flex: none;
  -webkit-line-clamp: 1;
}

/* ════ 5. 등장: 첫 그림부터 CSS 가 돌린다(구동기를 기다리지 않는다)
        · 시각 = --nxfx-hn-t0(입장 막이 뜨는 첫 방문에서만 0.26초) + --nxfx-hn-d(요소마다 넘긴 값)
        · 끝나면 애니메이션 값이 걷혀 제자리 값만 남는다(backwards) - 버튼 · 칸의 손 반응이 그대로 산다 ════ */
html.nx-js:not(.nxfx-veil-seen) .nxfx-hn--veiled {
  /* 막 아래 가장자리가 글 묶음을 지나갈 즈음(0.3초)부터 첫 줄이 오른다 - 등장이 막 뒤에서 끝나 버리지 않는다 */
  --nxfx-hn-t0: 260ms;
}
html.nx-js .nxfx-hn-in {
  animation: nxfxHnRise 0.62s var(--nxfx-hn-ease) calc(var(--nxfx-hn-t0, 0ms) + var(--nxfx-hn-d, 0ms)) 1 backwards;
}
@keyframes nxfxHnRise {
  from { opacity: 0; transform: translate3d(0, 18px, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}
/* 띠 판: 비치는 구간은 앞 0.1초뿐이고(사진 위에서 반투명으로 오래 떠 있지 않는다) 그 뒤로는 제자리로 오르기만 한다 */
html.nx-js .nxfx-hn-plate-in {
  animation: nxfxHnPlate 0.78s var(--nxfx-hn-ease) calc(var(--nxfx-hn-t0, 0ms) + var(--nxfx-hn-d, 0ms)) 1 backwards;
}
@keyframes nxfxHnPlate {
  0% { opacity: 0; transform: translate3d(0, 30px, 0); }
  13% { opacity: 1; }
  100% { opacity: 1; transform: translate3d(0, 0, 0); }
}

/* ── 5-1. 입장 막(가게 이름 · 세션 1회): 내용 위에 얹혀 0.5초에 위로 걷힌다(뒤따르는 옅은 겹까지 0.58초).
        transform 만 움직인다 - 화면 스레드가 바쁜 동안에도(하이드레이션) 합성 스레드에서 제 시간에 걷힌다.
        앞 0.08초만 전면을 덮고 바로 오르기 시작한다. 누름은 막지 않는다.
        막은 섹션 '밖' 형제다(섹션은 isolation 이라 안에 두면 상단 띠가 막 위로 비친다) - 색 칸은 1번 구획에서 따로 받는다 ── */
.nxfx-hn-veil {
  display: none;
}
html.nx-js:not(.nxfx-veil-seen) .nxfx-hn-veil {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 80;
  overflow: hidden;
  pointer-events: none;
}
.nxfx-hn-veil__trail,
.nxfx-hn-veil__face {
  position: absolute;
  inset: 0;
  will-change: transform;
}
/* 뒤따르는 옅은 겹 - 포인트색 기운이 도는 반투명 한 장이 0.08초 늦게 따라 오른다(뒤 내용이 비친다) */
.nxfx-hn-veil__trail {
  background-color: color-mix(in oklab, var(--accent) 44%, var(--nxfx-hn-tint));
  opacity: 0.46;
}
/* 무채색 포인트색 가게: 회색 안개로 보이지 않게 뒤따르는 겹을 짙은 톤 쪽으로 둔다 */
.nxfx-hn-veil--mono .nxfx-hn-veil__trail {
  background-color: color-mix(in oklab, var(--accent) 12%, var(--nxfx-hn-tint));
  opacity: 0.62;
}
.nxfx-hn-veil__face {
  display: grid;
  place-items: center;
  background-color: var(--nxfx-hn-tint);
  color: var(--nx-on-deep);
}
/* 막 아래 가장자리의 빛줄 - 걷히는 선이 빛난다 */
.nxfx-hn-veil__face::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--nxfx-hn-bright) 28%,
    var(--nxfx-hn-bright-2) 50%,
    var(--nxfx-hn-bright) 72%,
    transparent 100%
  );
  box-shadow: 0 0 22px 2px color-mix(in srgb, var(--nxfx-hn-bright) 58%, transparent);
}
.nxfx-hn-veil__mark {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  max-width: calc(100% - 3rem);
  font-family: var(--font-heading, "Pretendard Variable", sans-serif);
  font-weight: var(--heading-weight, 800);
  font-size: clamp(1.25rem, 0.9rem + 1.6vw, 1.875rem);
  line-height: 1.3;
  letter-spacing: 0.01em;
  text-align: center;
  word-break: keep-all;
}
.nxfx-hn-veil__mark::after {
  content: "";
  width: 72px;
  height: 2px;
  border-radius: 2px;
  background: var(--nxfx-hn-bright);
  transform-origin: 0 50%;
}
html.nx-js:not(.nxfx-veil-seen) .nxfx-hn-veil__face {
  animation: nxfxHnVeil 0.5s cubic-bezier(0.76, 0, 0.24, 1) 1 both;
}
html.nx-js:not(.nxfx-veil-seen) .nxfx-hn-veil__trail {
  animation: nxfxHnVeil 0.5s cubic-bezier(0.76, 0, 0.24, 1) 0.08s 1 both;
}
html.nx-js:not(.nxfx-veil-seen) .nxfx-hn-veil__mark::after {
  animation: nxfxHnRule 0.3s var(--nxfx-hn-ease) 1 both;
}
@keyframes nxfxHnVeil {
  0%, 16% { transform: translate3d(0, 0, 0); }
  100% { transform: translate3d(0, -106%, 0); }
}
/* 제목 줄: 줄 상자가 가림막이 되고(clip-path) 글자가 아래에서 올라온다. 여백 · 높이는 건드리지 않는다 */
html.nx-js .nxfx-hn__line {
  animation: nxfxHnClip 0.82s linear calc(var(--nxfx-hn-t0, 0ms) + var(--nxfx-hn-d, 0ms)) 1 backwards;
}
@keyframes nxfxHnClip {
  from, to { clip-path: inset(-0.12em -0.6em -0.18em -0.6em); }
}
html.nx-js .nxfx-hn__line-in {
  animation: nxfxHnLine 0.82s var(--nxfx-hn-ease) calc(var(--nxfx-hn-t0, 0ms) + var(--nxfx-hn-d, 0ms)) 1 backwards;
}
@keyframes nxfxHnLine {
  from { opacity: 0; transform: translate3d(0, 128%, 0); }
  22% { opacity: 1; }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}
/* 무채색 강조의 밑선: 줄이 올라온 뒤 왼쪽에서 그어진다(가림막이 걷힌 뒤라 잘리지 않는다) */
html.nx-js .nxfx-hn--mono .nxfx-hn__title--em .nxfx-hn__line--em::after {
  animation: nxfxHnRule 0.7s var(--nxfx-hn-ease) calc(var(--nxfx-hn-t0, 0ms) + var(--nxfx-hn-d, 0ms) + 820ms) 1 backwards;
}
@keyframes nxfxHnRule {
  from { transform: scaleX(0); opacity: 0; }
  to { transform: scaleX(1); opacity: 1; }
}

/* 동작 줄이기: 관문(html.nx-js)이 애초에 안 붙지만, 붙어 있는 경우에도 전부 끈다 */
@media (prefers-reduced-motion: reduce) {
  html.nx-js .nxfx-hn-in,
  html.nx-js .nxfx-hn-plate-in,
  html.nx-js .nxfx-hn__line,
  html.nx-js .nxfx-hn__line-in,
  html.nx-js .nxfx-hn__settle,
  html.nx-js .nxfx-hn__dawn,
  html.nx-js .nxfx-hn__zoom,
  html.nx-js .nxfx-hn__aura,
  html.nx-js .nxfx-hn__beams > i::after,
  html.nx-js .nxfx-hn__flow,
  html.nx-js .nxfx-hn__plate::before,
  html.nx-js .nxfx-hn--mono .nxfx-hn__title--em .nxfx-hn__line--em::after {
    animation: none;
  }
  html.nx-js .nxfx-hn-veil,
  .nxfx-hn__beams,
  .nxfx-hn__spot {
    display: none;
  }
  .nxfx-hn__link,
  .nxfx-hn__link::before,
  .nxfx-hn__link::after,
  .nxfx-hn__name,
  .nxfx-hn__arrow {
    transition: none;
  }
}
@media (max-width: 640px) {
  /* 폰: 윗선 빛줄은 멈춘 채로 남는다(등장 때 한 번 훑는 빛은 남긴다) */
  html.nx-js .nxfx-hn__flow {
    animation: none;
    transform: translate3d(-18%, 0, 0);
  }
}

/* ════ 9. 폰 첫 화면 - 사진이 장면의 주인공으로 남게(2026-11-12 의뢰인: "모바일에서 히어로가 묻혀 보인다") ════
   실측(390 · 꽃집): 제목 · 라벨 · 버튼 둘 · 진한 어둠 층이 겹쳐 사진이 위쪽 띠로만 남았다(지금 화면은 위 절반이 사진).
   기준 사이트 폰 화면처럼 장면은 크게, 글은 아래쪽 한 덩어리로 작게 둔다. 문구 · 순서 · 버튼 수는 그대로다. */
@media (max-width: 640px) {
  /* 어둠은 글이 놓이는 아래 40% 남짓에만 - 위 절반은 사진 제 밝기(맨 위는 헤더 글자만 받친다) */
  .nxfx-hn__scrim {
    background:
      linear-gradient(
        0deg,
        color-mix(in srgb, var(--nxfx-hn-tint) 90%, transparent) 0%,
        color-mix(in srgb, var(--nxfx-hn-tint) 72%, transparent) 24%,
        color-mix(in srgb, var(--nxfx-hn-tint) 34%, transparent) 42%,
        transparent 60%
      ),
      linear-gradient(180deg, color-mix(in srgb, var(--nxfx-hn-tint) 38%, transparent) 0%, transparent 16%);
  }
  /* 제목은 한 단 작게(지금 운영 폰 제목과 같은 급) - 긴 줄은 예전처럼 어절에서 접힌다 */
  .nxfx-hn .nxfx-hn__title {
    font-size: min(1.72rem, calc((100vw - 2 * var(--nxfx-hn-gutter) - 1.25rem) / var(--nxfx-hn-em, 12)));
    line-height: 1.24;
  }
  .nxfx-hn .nxfx-hn__label {
    margin-bottom: 0.7rem;
  }
  .nxfx-hn .nxfx-hn__desc {
    margin-top: 0.85rem;
    font-size: 0.9375rem;
    line-height: 1.62;
  }
  .nxfx-hn__actions {
    margin-top: 1.35rem;
  }
  /* 버튼: 누르는 높이 48px(접근성 44px 이상) · 둘이 한 줄 */
  .nxfx-hn__actions .nxfx-btn--lg .nxfx-btn__face {
    min-height: 48px;
    padding: 0 1.2em;
    font-size: 0.9375rem;
  }
  /* 서비스 띠는 사진 위로 올라타지 않는다 - 첫 화면은 사진과 글로만 끝나고 띠는 그 아래에서 시작한다 */
  .nxfx-hn {
    --nxfx-hn-lap: 0px;
  }
  .nxfx-hn__wrap {
    padding-bottom: 1.75rem;
  }
  .nxfx-hn__lap {
    padding-top: 1rem;
  }
}

/* AI 템플릿 티 걷기(2026-11-12) - 사진 위 격자 · 포인터 둘레 격자 · 서비스 띠 번호(순서 뜻이 없다) */
.nxfx-hn__grid, .nxfx-hn__spot { display: none; }
.nxfx-hn__num { display: none; }

/* ════ 10. 로고와 같은 왼쪽 기준선(2026-11-12 의뢰인: "PC 에서 로고 끝단에 맞춰져 있던 문구가 가운데로 쏠렸다") ════
   운영 헤더 로고와 운영 첫 화면 글은 화면 폭의 일정 비율(--hm-edge-pad-* · hero-premium/composition HERO_EDGE_PAD_PCT)에 선다.
   V2 첫 화면 글 묶음 · 아래 서비스 띠도 같은 선에 세운다(넓은 화면에서 1280 상자 가운데로 들어가지 않게).
   실측(1920): 로고 86 · 지금 운영 첫 화면 글 86 · V2 고치기 전 320. */
.nxfx-hn__wrap {
  max-width: none;
  margin-inline: 0;
  padding-left: max(var(--nxfx-hn-gutter), calc(var(--hm-edge-pad-m, 5) * 1vw));
}
.nxfx-hn__lap {
  padding-left: max(var(--nxfx-hn-gutter), calc(var(--hm-edge-pad-m, 5) * 1vw));
}
.nxfx-hn__lap-in {
  margin-left: 0;
}
@media (min-width: 768px) {
  .nxfx-hn__wrap,
  .nxfx-hn__lap {
    padding-left: max(var(--nxfx-hn-gutter), calc(var(--hm-edge-pad-d, 4.5) * 1vw));
  }
}

/* ════ 11. 제목 크기 · 빛 번짐 · 어둠 낮추기(2026-11-12 의뢰인: "히어로 글자가 과거보다 너무 커졌고 빛 번짐이 너무 강하다 ·
        너무 어두워지거나 흐려지지 않게") ════
   실측(지금 운영 → V2 고치기 전): PC 제목 52px → 82~86px · 첫 화면 평균 밝기 밝은 집 0.56 → 0.40 / 어두운 집 0.35 → 0.20.
   → 제목은 지금 운영 크기 근처(PC 최대 56px)로 · 글자 둘레 넓은 그늘 · 포인트색 빛 번짐을 걷고 얇은 그늘 한 겹만 ·
     사진 위 어둠 층은 글이 놓이는 쪽에만 옅게(사진이 제 밝기에 가깝게 보이도록). 흐림 필터는 쓰지 않는다. */
@media (min-width: 641px) {
  .nxfx-hn .nxfx-hn__title {
    font-size: min(3.5rem, calc((min(100vw, 1280px + 2 * var(--nxfx-hn-gutter)) - 2 * var(--nxfx-hn-gutter) - 1.25rem) / var(--nxfx-hn-em, 12))) !important;
    line-height: 1.2;
  }
}
.nxfx-hn--photo .nxfx-hn__title {
  text-shadow:
    0 1px 2px color-mix(in srgb, var(--nx-deep) 38%, transparent),
    0 2px 12px color-mix(in srgb, var(--nx-deep) 26%, transparent) !important;
}
.nxfx-hn--photo .nxfx-hn__title .nxfx-grad,
.nxfx-hn--photo:not(.nxfx-hn--mono) .nxfx-hn__title .nxfx-grad,
.nxfx-hn--plain:not(.nxfx-hn--mono) .nxfx-hn__title .nxfx-grad {
  filter: drop-shadow(0 1px 3px color-mix(in srgb, var(--nx-deep) 34%, transparent)) !important;
}
.nxfx-hn--photo .nxfx-hn__desc {
  text-shadow: 0 1px 8px color-mix(in srgb, var(--nx-deep) 30%, transparent) !important;
}
/* 어둠 층 - PC: 왼쪽 글 쪽에만 옅게 · 위는 헤더 글자만 받친다 */
@media (min-width: 768px) {
  .nxfx-hn__scrim {
    background:
      linear-gradient(
        90deg,
        color-mix(in srgb, var(--nxfx-hn-tint) 58%, transparent) 0%,
        color-mix(in srgb, var(--nxfx-hn-tint) 38%, transparent) 28%,
        color-mix(in srgb, var(--nxfx-hn-tint) 12%, transparent) 50%,
        transparent 70%
      ),
      linear-gradient(0deg, color-mix(in srgb, var(--nxfx-hn-tint) 28%, transparent) 0%, transparent 30%),
      linear-gradient(180deg, color-mix(in srgb, var(--nxfx-hn-tint) 30%, transparent) 0%, transparent 16%) !important;
  }
}
/* 폰: 글 아래쪽만 · 위 절반은 사진 제 밝기 */
@media (max-width: 767px) {
  .nxfx-hn__scrim {
    background:
      linear-gradient(
        0deg,
        color-mix(in srgb, var(--nxfx-hn-tint) 80%, transparent) 0%,
        color-mix(in srgb, var(--nxfx-hn-tint) 56%, transparent) 24%,
        color-mix(in srgb, var(--nxfx-hn-tint) 22%, transparent) 44%,
        transparent 62%
      ),
      linear-gradient(180deg, color-mix(in srgb, var(--nxfx-hn-tint) 28%, transparent) 0%, transparent 14%) !important;
  }
}
/* 어두운 테마 가게: 사진 전체를 덮던 한 겹(24%)과 가장자리 어둠을 옅게 */
.nxfx-hn--photo.nxfx-hn--dark .nxfx-hn__scrim::after {
  background:
    linear-gradient(0deg, color-mix(in srgb, var(--background) 80%, transparent) 0%, color-mix(in srgb, var(--background) 30%, transparent) 10%, transparent 26%),
    radial-gradient(90% 115% at 34% 56%, transparent 50%, color-mix(in srgb, var(--nxfx-hn-tint) 26%, transparent) 100%) !important;
  background-color: transparent !important;
}