/**
 * 섹션 업그레이드 실험판 - 「마무리 구간」(FAQ · 오시는 길 · 마지막 문의 유도) 전용 스타일(2026-11-11).
 *
 *  ① `.nxfx-cl-zone`  운영 FaqBlock · MapBlock 을 **그대로 부른 것**을 감싼 범위. 운영 마크업
 *                     (#faq · #visit · #reserve · [data-allow-copy])을 선택자로 짚어 크기 대비 · 숨 · 면의 깊이 ·
 *                     손 반응만 얹는다. 구조 · 글 · 버튼 · 지도 부품은 운영 그대로다.
 *  ② `.nxfx-cl-band`  새로 그리는 「마지막 문의 유도 띠」 - 기준 사이트(pc-06)에서 가져온 배치 요소 하나.
 *
 * 색은 전부 사이트 토큰에서 color-mix 로 파생한다(고정색 없음). 테마마다 달라야 하는 세기는 [data-nx-tone] 한 자리.
 * 연출층(.nxfx-*) 부품의 opacity · transform · animation 은 건드리지 않는다 - 여기 규칙은 전부 `nxfx-cl-` 자기 것이다.
 * Tailwind 유틸은 @layer 안이라 여기(층 밖) 규칙이 이긴다. `!important` 는 전역 최소 글자 규칙을 넘을 때만 쓴다.
 */

/* ════════ 1. 묶음(FAQ + 오시는 길) ════════ */
.nxfx-cl-zone {
  /* 카드 뒤 광채는 의사요소(z-index -1)가 아니라 겹 그림자다 - 손 닿아 카드가 들릴 때 쌓임 맥락이 바뀌며 얼룩지지 않는다 */
  --cl-halo: 0 26px 68px -30px color-mix(in srgb, var(--accent) 34%, transparent);
  --cl-halo-on: 0 26px 72px -26px color-mix(in srgb, var(--accent) 46%, transparent);
  --cl-halo-h: 0 30px 88px -22px color-mix(in srgb, var(--accent) var(--nxfx-halo-p), transparent);
  --cl-top: inset 0 1px 0 color-mix(in srgb, var(--background) 70%, transparent);
  --cl-edge: var(--nxfx-border);
  --cl-edge-on: color-mix(in srgb, var(--accent) 34%, transparent);
  --cl-face-a: color-mix(in srgb, var(--card, var(--background)) 72%, var(--muted, var(--background)));
  --cl-face-b: color-mix(in srgb, var(--accent) 5%, var(--card, var(--background)));
  --cl-face-sheen: var(--nx-sheen);
  --cl-ring: color-mix(in srgb, var(--foreground) 13%, var(--background));
  overflow: clip;
}
/* 어두운 테마 - 그림자가 안 보이므로 면 · 테두리 · 윗면 빛 · 뒤 광채로 깊이를 낸다(강조색이 무채색이어도 보이는 세기) */
[data-nx-tone="dark"] .nxfx-cl-zone {
  /* 넓게 번지는 빛은 낮춰 둔다 - 강조색이 무채색(크림 · 회색)이면 짙은 바탕 위에서 탁한 안개로 보인다.
     상대 색을 아는 브라우저는 아래에서 강조색의 채도만큼만 다시 켠다(유채색 강조색은 예전 세기) */
  --cl-tint: transparent;
  --cl-halo: 0 0 76px -26px color-mix(in srgb, var(--accent) 7%, transparent);
  --cl-halo-on: 0 0 84px -22px color-mix(in srgb, var(--accent) 10%, transparent);
  --cl-halo-h: 0 0 96px -16px color-mix(in srgb, var(--accent) 16%, transparent);
  --nxfx-bd-aura-p: 6%;
  --nxfx-ptr-c: color-mix(in srgb, var(--foreground) 5%, transparent);
  background-image:
    radial-gradient(52% 44% at 6% 0%, var(--cl-tint), transparent 72%),
    radial-gradient(48% 40% at 98% 100%, var(--cl-tint), transparent 72%);
  --cl-top: inset 0 1px 0 color-mix(in srgb, var(--foreground) 16%, transparent);
  --cl-edge: color-mix(in srgb, var(--foreground) 17%, transparent);
  --cl-edge-on: color-mix(in srgb, var(--accent) 40%, transparent);
  --cl-face-a: color-mix(in srgb, var(--foreground) 6.5%, var(--card, var(--background)));
  --cl-face-b: color-mix(in srgb, var(--accent) 10%, var(--card, var(--background)));
  --cl-face-sheen: color-mix(in srgb, var(--foreground) 10%, transparent);
  --cl-ring: color-mix(in srgb, var(--foreground) 20%, var(--background));
}
@supports (color: oklch(from red l c h)) {
  [data-nx-tone="dark"] .nxfx-cl-zone {
    --cl-tint: oklch(from var(--accent) l c h / calc(c * 1.3));
    --cl-halo: 0 0 76px -26px oklch(from var(--accent) l c h / calc(0.03 + c * 2.2));
    --cl-halo-on: 0 0 84px -22px oklch(from var(--accent) l c h / calc(0.04 + c * 3.1));
    --cl-halo-h: 0 0 96px -16px oklch(from var(--accent) l c h / calc(0.08 + c * 3.6));
    --nxfx-ptr-c: oklch(from var(--accent) l c h / calc(0.04 + c * 0.9));
  }
}

/* ── 오시는 길: 머리 ── */
.nxfx-cl-zone #visit > div > div:first-child:not(.grid) {
  margin-bottom: clamp(1.5rem, 1.1rem + 1.7vw, 2.75rem);
}

/* ── 오시는 길: 두 카드(주소 · 예약/문의) ── */
.nxfx-cl-zone #visit .grid {
  isolation: isolate;
  align-items: stretch;
  gap: clamp(1rem, 0.75rem + 1.05vw, 1.75rem);
}
.nxfx-cl-zone #visit .grid > :is(div, aside) {
  position: relative;
  padding: clamp(1.5rem, 1.05rem + 1.9vw, 2.75rem);
  border-radius: var(--nx-radius);
  border-color: var(--cl-edge);
  background-color: var(--cl-face-a);
  background-image: radial-gradient(135% 82% at 10% 0%, var(--cl-face-sheen), transparent 56%);
  /* 겹 순서는 손 닿은 상태와 같다(안쪽 테두리 빛 → 윗면 빛 → 뒤 광채 → 바닥 그림자) - 그래야 부드럽게 넘어간다 */
  box-shadow:
    inset 0 0 0 1px transparent,
    var(--cl-top),
    var(--cl-halo),
    var(--nx-shadow);
  transition:
    transform 0.55s var(--nx-ease),
    border-color 0.55s var(--nx-ease),
    box-shadow 0.55s var(--nx-ease);
}
.nxfx-cl-zone #visit .grid > aside {
  /* 이름표 · 제목 · 설명 · 버튼이 한 덩어리로 카드 가운데에 선다 - 옆 카드와 높이를 맞출 때 생기는 남는 면은
     위아래로 똑같이 나뉜다(예전에는 이름표만 위에 붙고 그 아래가 무늬뿐인 빈 면이었다) */
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-color: var(--cl-edge-on);
  background-color: var(--cl-face-b);
  /* 윗면 광택 → 오른쪽 위 강조색 빛(무늬 없음) */
  background-image:
    radial-gradient(135% 82% at 10% 0%, var(--cl-face-sheen), transparent 56%),
    radial-gradient(120% 70% at 100% 0%, color-mix(in srgb, var(--accent) 9%, transparent), transparent 60%);
  box-shadow:
    inset 0 0 0 1px transparent,
    var(--cl-top),
    var(--cl-halo-on),
    var(--nx-shadow);
}
/* 넓은 화면(1280px 이상) - 주소 카드 안을 두 단으로: 왼쪽 주소 · 지도 버튼 / 오른쪽 영업시간.
   영업시간이 주소 아래로 쌓여 카드만 길어지고 옆 예약 · 문의 카드가 그 높이에 끌려 비던 것을 줄인다.
   영업시간이 없는 가게(dl 없음)는 해당 없음 - 한 단 그대로 */
@media (min-width: 1280px) {
  .nxfx-cl-zone #visit .grid > div:has(> div > dl) {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    column-gap: clamp(1.5rem, 0.9rem + 1.4vw, 2.25rem);
    align-content: start;
  }
  .nxfx-cl-zone #visit .grid > div:has(> div > dl) > * {
    grid-column: 1;
    min-width: 0;
  }
  .nxfx-cl-zone #visit .grid > div:has(> div > dl) > div[class*="border-t"]:has(> dl) {
    grid-column: 2;
    grid-row: 1 / span 5;
    align-self: stretch;
    margin-top: 0;
    padding-top: 0;
    padding-left: clamp(1.5rem, 0.9rem + 1.4vw, 2.25rem);
    border-top-width: 0;
    border-left: 1px solid var(--nx-line);
  }
  /* 좁아진 단에서 시간 글이 낱말 중간(괄호 안)에서 끊기지 않게 */
  .nxfx-cl-zone #visit .grid > div:has(> div > dl) dl > div > dd {
    word-break: keep-all;
    text-wrap: balance;
  }
  /* 안내(note)는 두 단 아래에 가로 전체로 */
  .nxfx-cl-zone #visit .grid > div:has(> div > dl) > div[class*="border-t"]:not(:has(> dl)) {
    grid-column: 1 / -1;
  }
}
/* 손 닿을 때 면 위로 지나가는 빛 띠 - 카드를 자르지 않고(overflow 없음) 배경 자리만 민다 */
.nxfx-cl-zone #visit .grid > :is(div, aside)::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-image: linear-gradient(104deg, transparent 42%, var(--nxfx-sweep-surface) 50%, transparent 58%);
  background-size: 260% 100%;
  background-position: 130% 0;
  background-repeat: no-repeat;
  opacity: 0;
  pointer-events: none;
}
@media (hover: hover) and (pointer: fine) {
  .nxfx-cl-zone #visit .grid > :is(div, aside):hover {
    transform: translate3d(0, -5px, 0);
    border-color: var(--nx-line-accent);
    box-shadow:
      inset 0 0 0 1px color-mix(in srgb, var(--accent) var(--nxfx-edge-p), transparent),
      var(--cl-top),
      var(--cl-halo-h),
      var(--nx-shadow-hover);
  }
  .nxfx-cl-zone #visit .grid > :is(div, aside):hover::before {
    animation: nxfxClSweep 1.1s var(--nx-ease-out) 1;
  }
}
@keyframes nxfxClSweep {
  0% { background-position: 130% 0; opacity: 0; }
  20% { opacity: 1; }
  100% { background-position: -40% 0; opacity: 0; }
}

/* ── 오시는 길: 글자 크기 대비 ── */
/* 작은 이름표(주소 · 영업시간 · 예약 · 문의) */
.nxfx-cl-zone #visit .grid p[class*="text-[12px]"] {
  margin-bottom: clamp(0.75rem, 0.65rem + 0.4vw, 1rem);
  font-size: var(--nx-fs-label) !important;
  letter-spacing: 0.14em;
}
/* 주소 - 이 구간에서 가장 큰 글 */
.nxfx-cl-zone #visit [data-allow-copy] {
  font-size: clamp(1.5rem, 1.2rem + 1.3vw, 2.25rem);
  line-height: 1.24;
  letter-spacing: -0.022em;
  word-break: keep-all;
  text-wrap: balance;
}
/* 예약 · 문의 제목 */
/* 예약 · 문의 제목 - 옆 카드의 주소와 같은 크기(두 카드의 큰 글이 같은 높이에서 맞선다) */
.nxfx-cl-zone #visit #reserve > h3 {
  font-size: clamp(1.5rem, 1.2rem + 1.3vw, 2.25rem);
  line-height: 1.24;
  letter-spacing: -0.022em;
  word-break: keep-all;
}
.nxfx-cl-zone #visit #reserve > h3 + p {
  font-size: var(--nx-fs-body);
  color: var(--nx-ink-3);
}
/* 영업시간 표 · 안내 */
.nxfx-cl-zone #visit .grid > div > div[class*="border-t"] {
  margin-top: clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem);
  padding-top: clamp(1.25rem, 1.05rem + 0.9vw, 1.875rem);
  border-top-color: var(--nx-line);
}
.nxfx-cl-zone #visit dl > div {
  font-size: var(--nx-fs-body);
}
/* 지도 버튼 줄 */
.nxfx-cl-zone #visit [data-allow-copy] ~ div[class*="flex-wrap"] {
  margin-top: clamp(1rem, 0.85rem + 0.6vw, 1.375rem);
}

/* ── 오시는 길: 지도 둘레 - 지도 부품은 그대로, 감싼 칸만 다른 카드와 같은 둥글기 · 테두리 · 그림자로 ── */
.nxfx-cl-zone #visit .grid + div {
  position: relative;
  margin-top: clamp(1rem, 0.75rem + 1.05vw, 1.75rem);
  border-radius: var(--nx-radius);
  overflow: hidden;
  box-shadow: var(--cl-halo), var(--nx-shadow);
}
.nxfx-cl-zone #visit .grid + div::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 1px solid var(--cl-ring);
  pointer-events: none;
}

/* ── 자주 묻는 질문 ── */
/* 공용 줄 목록 여백(28 → 48)은 접히는 줄에는 과하다 - 줄 여백은 버튼이 갖는다 */
.nxfx-cl-zone #faq ul[data-hm-list] > li {
  padding-block: 0;
  /* 들여쓰기는 줄(li)이 갖는다 - 질문과 펼친 답이 같은 왼쪽 선에서 함께 움직인다 */
  transition: background-color 0.4s var(--nx-ease), padding-inline 0.45s var(--nx-ease);
}
.nxfx-cl-zone #faq ul[data-hm-list] > li > h3 {
  font-size: inherit;
  line-height: inherit;
  letter-spacing: inherit;
}
.nxfx-cl-zone #faq ul[data-hm-list] > li > h3 > button {
  padding-block: clamp(1.125rem, 0.95rem + 0.75vw, 1.625rem);
}
.nxfx-cl-zone #faq ul[data-hm-list] > li > h3 > button > span:first-child {
  font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
  letter-spacing: -0.015em;
  transition: color 0.35s var(--nx-ease);
}
.nxfx-cl-zone #faq ul[data-hm-list] > li > div p {
  font-size: var(--nx-fs-body);
  max-width: 46rem;
}
.nxfx-cl-zone #faq ul[data-hm-list] > li:has(> h3 > button[aria-expanded="true"]) {
  background-color: color-mix(in srgb, var(--accent) 4%, transparent);
  padding-inline: 0.75rem;
}
.nxfx-cl-zone #faq ul[data-hm-list] > li > h3 > button[aria-expanded="true"] > span:first-child {
  color: var(--nxfx-title-on);
}
@media (hover: hover) and (pointer: fine) {
  .nxfx-cl-zone #faq ul[data-hm-list] > li:hover {
    background-color: color-mix(in srgb, var(--accent) 5%, transparent);
    padding-inline: 0.75rem;
  }
  .nxfx-cl-zone #faq ul[data-hm-list] > li:hover > h3 > button > span:first-child {
    color: var(--nxfx-title-on);
  }
}
/* 두 구획이 이어질 때 - 오시는 길 위 구분선은 FAQ 의 끝선과 겹치지 않게 색만 눈금으로 */
.nxfx-cl-zone #faq + #visit,
.nxfx-cl-zone :has(> #faq) + * > #visit {
  border-top-color: var(--nx-line);
}
/* 한 구간으로 읽히게 - 질문 끝과 오시는 길 사이는 구획 여백 두 번(72~136 × 2)이 아니라 한 번만 쉰다 */
.nxfx-cl-zone :has(> #faq):has(+ * > #visit) > #faq {
  padding-bottom: clamp(2.25rem, 1.75rem + 2.1vw, 4rem);
}
.nxfx-cl-zone :has(> #faq) + * > #visit {
  padding-top: clamp(2.25rem, 1.75rem + 2.1vw, 4rem);
}

/* ════════ 2. 마지막 문의 유도 띠 ════════ */
.nxfx-cl-band {
  --nxfx-ghost-ink: var(--nx-on-deep);
  /* 짙은 바탕 위에서 쓸리는 빛은 글자 쪽 색으로(밝은 테마의 강조색 17% 는 짙은 면에서 안 보인다) */
  --nxfx-sweep-surface: color-mix(in srgb, var(--nx-on-deep) 10%, transparent);
  /* 연출층 부품(별 점 · 격자 · 빛이 흐르는 글)이 짙은 바탕에서 읽히게 - 부품 규칙이 아니라 부품이 읽는 토큰만 이 띠 안에서 바꾼다 */
  --nxfx-grid-c: color-mix(in srgb, var(--nx-on-deep) 6%, transparent);
  --nxfx-star: color-mix(in srgb, var(--nx-on-deep) 78%, transparent);
  --nxfx-cosmic-p: 15%;
  --nxfx-grad-a: var(--nx-on-deep);
  --nxfx-grad-b: color-mix(in srgb, var(--accent) 46%, var(--nx-on-deep));
  --cl-on-1: var(--nx-on-deep);
  --cl-on-2: color-mix(in srgb, var(--nx-on-deep) 78%, transparent);
  --cl-on-3: color-mix(in srgb, var(--nx-on-deep) 54%, transparent);
  --cl-on-line: color-mix(in srgb, var(--nx-on-deep) 14%, transparent);
  --cl-pad-x: 1rem;
  --cl-shade: 86%;
  /* 빛의 색 - 층마다 한 변수(어두운 테마는 아래에서 강조색의 채도만큼만 켠다) */
  --cl-bed-c: color-mix(in srgb, var(--accent) 26%, transparent);
  --cl-bed-c2: color-mix(in srgb, var(--accent) 20%, transparent);
  --cl-bed-cool: transparent;
  --cl-lamp-c: color-mix(in srgb, var(--accent) 58%, transparent);
  --cl-blob-c: color-mix(in srgb, var(--accent) 66%, transparent);
  --cl-lamp-o: 0.5;
  --cl-blob-o: 0.5;
  --cl-line-light: color-mix(in srgb, var(--accent) 64%, var(--nx-on-deep));
  --cl-streak: color-mix(in srgb, var(--nx-on-deep) 9%, transparent);
  --cl-streak-light: color-mix(in srgb, var(--accent) 66%, var(--nx-on-deep));
  --cl-ghost: color-mix(in srgb, var(--nx-on-deep) 24%, transparent);
  overflow: hidden;
  border-block: 1px solid var(--cl-on-line);
  /* 기준 사이트의 닫는 띠처럼 위아래를 크게 비운다(104 → 152) - 띠 하나만 남는 가게에서도 한 장면으로 선다 */
  padding: clamp(6.5rem, 5.2rem + 5.4vw, 9.5rem) var(--cl-pad-x);
  text-align: center;
}
/* 어두운 테마 - 강조색이 무채색(크림 · 회색)이면 낮은 농도의 넓은 빛이 탁한 안개가 된다.
   그래서 넓은 빛은 글자색(바탕과 같은 찬 색조) 쪽으로 옅게 깔고, 강조색 빛은 낮춰 둔다 */
[data-nx-tone="dark"] .nxfx-cl-band {
  --nxfx-grad-a: var(--foreground);
  --nxfx-grad-b: color-mix(in srgb, color-mix(in srgb, var(--accent) 76%, var(--foreground)) 78%, var(--background));
  --nxfx-cosmic-p: 7%;
  --cl-shade: 89%;
  --cl-bed-c: color-mix(in srgb, var(--accent) 6%, transparent);
  --cl-bed-c2: color-mix(in srgb, var(--accent) 4%, transparent);
  --cl-bed-cool: color-mix(in srgb, var(--foreground) 7%, transparent);
  --cl-lamp-c: color-mix(in srgb, var(--accent) 16%, transparent);
  --cl-blob-c: color-mix(in srgb, var(--accent) 16%, transparent);
  --cl-lamp-o: 0.5;
  --cl-blob-o: 0.5;
}
/* 상대 색을 아는 브라우저 - 강조색의 채도(c)에 비례해 빛을 켠다. 유채색 강조색은 예전 세기 그대로, 무채색 강조색은 거의 0 */
@supports (color: oklch(from red l c h)) {
  [data-nx-tone="dark"] .nxfx-cl-band {
    --cl-bed-c: oklch(from var(--accent) l c h / calc(0.03 + c * 1.1));
    --cl-bed-c2: oklch(from var(--accent) l c h / calc(0.02 + c * 0.7));
    --cl-lamp-c: oklch(from var(--accent) l c h / calc(0.06 + c * 3.6));
    --cl-blob-c: oklch(from var(--accent) l c h / calc(0.06 + c * 4.2));
  }
}
/* 사진이 한 장도 없는 가게 - 사진 대신 빛이 면을 채운다 */
.nxfx-cl-band--bare {
  --cl-bed-c: color-mix(in srgb, var(--accent) 36%, transparent);
  --cl-bed-c2: color-mix(in srgb, var(--accent) 30%, transparent);
}
[data-nx-tone="dark"] .nxfx-cl-band--bare {
  --cl-bed-cool: color-mix(in srgb, var(--foreground) 10%, transparent);
}
/* 흐르는 글이 아래 가장자리를 맡는 띠 - 아래 여백은 그 줄이 갖는다 */
.nxfx-cl-band--flow {
  padding-bottom: clamp(2.25rem, 1.9rem + 1.5vw, 3.25rem);
}
@media (min-width: 768px) {
  .nxfx-cl-band { --cl-pad-x: 1.5rem; }
}
@media (min-width: 1024px) {
  .nxfx-cl-band { --cl-pad-x: 2rem; }
}

/* ── 바탕 층(전부 장식 · 글 뒤) - 띠가 화면에 들어오는 첫 프레임부터 깔려 있다(등장을 기다리지 않는다) ── */
.nxfx-cl-band__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  background-color: var(--nx-deep, var(--foreground));
}
.nxfx-cl-band__bg > * {
  position: absolute;
}
/* 별 점 · 격자(연출층 FxBackdrop) - 부품 기본은 장면 맨 뒤(z-index -1)라 사진 · 어둠 층에 가린다. 이 바탕 안에서는 적힌 순서대로 쌓는다 */
.nxfx-cl-band__bg > .nxfx-bd {
  z-index: auto;
}
/* 사진 - 시차만큼 위아래로 넉넉히(시차 이동은 연출층 FxParallax 가 낸다) */
.nxfx-cl-band__photo {
  inset: -12% 0;
}
.nxfx-cl-band__img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  /* 형체(사람 · 물건)가 읽히지 않게 - 색을 빼고 크게 흐려 밝고 어두운 얼룩으로만 남긴다 */
  filter: grayscale(1) blur(22px);
  transform: scale(1.14);
}
html.nx-js .nxfx-cl-band__img {
  animation: nxfxClKen 28s ease-in-out infinite alternate;
}
@keyframes nxfxClKen {
  from { transform: scale(1.14); }
  to { transform: scale(1.24) translate3d(0, -1.2%, 0); }
}
/* 사진을 분위기로만 남기는 덧층 */
.nxfx-cl-band__shade {
  inset: 0;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--nx-deep) 52%, transparent), transparent 26%, transparent 74%, color-mix(in srgb, var(--nx-deep) 52%, transparent)),
    linear-gradient(180deg, color-mix(in srgb, var(--nx-deep) 40%, transparent), transparent 30%, transparent 58%, color-mix(in srgb, var(--nx-deep) 62%, transparent)),
    color-mix(in srgb, var(--nx-deep) var(--cl-shade), transparent);
}
.nxfx-cl-band--bare .nxfx-cl-band__shade {
  display: none;
}
/* 처음부터 깔린 빛(정지) - 윗선 가운데의 가는 빛줄 + 글 뒤 빛 + 아래에서 올라오는 빛 */
.nxfx-cl-band__bed {
  inset: 0;
  background:
    linear-gradient(90deg, transparent, color-mix(in srgb, var(--cl-line-light) 70%, transparent), transparent) top center / min(44rem, 78%) 1px no-repeat,
    radial-gradient(58% 60% at 50% 42%, var(--cl-bed-c), transparent 74%),
    radial-gradient(92% 58% at 50% 120%, var(--cl-bed-c2), transparent 72%),
    radial-gradient(46% 52% at 50% 40%, var(--cl-bed-cool), transparent 76%);
}
/* 글 뒤에서 숨쉬는 빛 */
.nxfx-cl-band__lamp {
  left: 50%;
  top: 40%;
  width: min(54rem, 120%);
  height: 22rem;
  margin: -11rem 0 0 calc(min(54rem, 120%) / -2);
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--cl-lamp-c), transparent);
  filter: blur(46px);
  opacity: var(--cl-lamp-o);
}
html.nx-js .nxfx-cl-band__lamp {
  animation: nxfxClLamp 9s ease-in-out infinite;
}
@keyframes nxfxClLamp {
  0%, 100% { opacity: calc(var(--cl-lamp-o) * 0.62); transform: scale(0.94); }
  50% { opacity: var(--cl-lamp-o); transform: scale(1.06); }
}
/* 아래 가장자리의 빛덩이 - 스크롤에 따라 사진과 다른 빠르기로 떠오른다(시차는 FxParallax) */
.nxfx-cl-band__blob {
  left: 50%;
  bottom: -15rem;
  width: min(52rem, 130%);
  height: 26rem;
  margin-left: calc(min(52rem, 130%) / -2);
}
.nxfx-cl-band__blob-in {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--cl-blob-c), transparent);
  filter: blur(52px);
  opacity: var(--cl-blob-o);
}
/* 양옆 여백의 세로 빛 줄기 - 글 열(가운데 896px) 밖에서만 흐른다. 넓은 화면 전용 */
.nxfx-cl-band__streaks {
  inset: 0;
  display: none;
}
@media (min-width: 1200px) {
  .nxfx-cl-band__streaks { display: block; }
}
.nxfx-cl-band__streaks > i {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: linear-gradient(180deg, transparent, var(--cl-streak) 16%, var(--cl-streak) 84%, transparent);
}
.nxfx-cl-band__streaks > i:nth-child(1) { left: 5%; }
.nxfx-cl-band__streaks > i:nth-child(2) { left: 11%; }
.nxfx-cl-band__streaks > i:nth-child(3) { right: 11%; }
.nxfx-cl-band__streaks > i:nth-child(4) { right: 5%; }
.nxfx-cl-band__streaks > i::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 34%;
  background: linear-gradient(180deg, transparent, var(--cl-streak-light), transparent);
  filter: drop-shadow(0 0 6px color-mix(in srgb, var(--cl-streak-light) 60%, transparent));
  transform: translate3d(0, -110%, 0);
  opacity: 0;
}
html.nx-js .nxfx-cl-band__streaks > i::after {
  animation: nxfxClStreak 6.4s linear infinite;
}
html.nx-js .nxfx-cl-band__streaks > i:nth-child(2)::after { animation-delay: 2.1s; animation-duration: 7.6s; }
html.nx-js .nxfx-cl-band__streaks > i:nth-child(3)::after { animation-delay: 3.3s; animation-duration: 7.1s; }
html.nx-js .nxfx-cl-band__streaks > i:nth-child(4)::after { animation-delay: 1s; }
@keyframes nxfxClStreak {
  0% { transform: translate3d(0, -110%, 0); opacity: 0; }
  10% { opacity: 1; }
  78% { opacity: 1; }
  100% { transform: translate3d(0, 310%, 0); opacity: 0; }
}
/* 윗선을 따라 달리는 빛 - 띠의 위 테두리(1px) 위를 한 토막의 빛이 왼쪽에서 오른쪽으로 지나간다 */
.nxfx-cl-band__run {
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  overflow: hidden;
}
.nxfx-cl-band__run::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 24%;
  height: 100%;
  background: linear-gradient(90deg, transparent, var(--cl-line-light), transparent);
  transform: translate3d(-110%, 0, 0);
  opacity: 0;
}
html.nx-js .nxfx-cl-band__run::after {
  animation: nxfxClRun 7.5s cubic-bezier(0.45, 0, 0.25, 1) infinite;
}
@keyframes nxfxClRun {
  0% { transform: translate3d(-110%, 0, 0); opacity: 0; }
  8% { opacity: 1; }
  62% { opacity: 1; }
  70%, 100% { transform: translate3d(430%, 0, 0); opacity: 0; }
}
/* 띠가 들어올 때 면 전체를 한 번 쓸고 가는 빛(연출층 FxSweep) - 글 뒤 층이라 읽기를 가리지 않는다 */
.nxfx-cl-band__sweep {
  inset: 0;
}

.nxfx-cl-band__in {
  /* 손 따라 도는 빛(z-index 1)보다 글이 위 - 빛이 글자를 덮지 않는다 */
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
}
/* 제목으로 내려오는 빛 줄(장식) - 가는 세로선 + 끝의 빛 알. 움직일 때는 빛 알이 선을 타고 떨어진다 */
.nxfx-cl-band__drop {
  --cl-drop-h: clamp(2.75rem, 2.2rem + 2.2vw, 4.5rem);
  position: relative;
  display: block;
  width: 1px;
  height: var(--cl-drop-h);
  margin-bottom: clamp(1.25rem, 1.05rem + 0.9vw, 2rem);
  background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--cl-line-light) 62%, transparent));
}
.nxfx-cl-band__drop::after {
  content: "";
  position: absolute;
  left: -2px;
  bottom: -2px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--cl-line-light);
  box-shadow: 0 0 12px 2px color-mix(in srgb, var(--cl-line-light) 56%, transparent);
}
html.nx-js .nxfx-cl-band__drop::after {
  animation: nxfxClDrop 3.6s cubic-bezier(0.6, 0, 0.3, 1) infinite;
}
@keyframes nxfxClDrop {
  0% { transform: translate3d(0, calc(-1 * var(--cl-drop-h)), 0); opacity: 0; }
  18% { opacity: 1; }
  62%, 100% { transform: translate3d(0, 0, 0); opacity: 1; }
}
.nxfx-cl-band__label {
  margin-bottom: clamp(0.875rem, 0.75rem + 0.6vw, 1.375rem);
  color: color-mix(in srgb, var(--accent) 52%, var(--nx-on-deep));
}
/* 큰 글 = 상호. 글자 수에 맞춘 네 단 - 폰에서도 되도록 한 줄에 선다 */
.nxfx-cl-band__title {
  max-width: 100%;
  line-height: 1.14;
  letter-spacing: var(--nx-track-title);
  color: var(--cl-on-1);
  word-break: keep-all;
  overflow-wrap: anywhere;
  text-wrap: balance;
}
.nxfx-cl-band__title--xl { font-size: clamp(3rem, 1.9rem + 4.7vw, 6rem); } /* 6자까지: 48 → 96 */
.nxfx-cl-band__title--lg { font-size: clamp(2rem, 0.9rem + 5.2vw, 5.75rem); } /* 10자까지: 35(390 폭에서 10자가 한 줄) → 92 */
.nxfx-cl-band__title--md { font-size: clamp(1.75rem, 1.2rem + 2.4vw, 3.5rem); line-height: 1.2; } /* 16자까지: 28 → 56 */
.nxfx-cl-band__title--sm { font-size: clamp(1.5rem, 1.15rem + 1.6vw, 2.75rem); line-height: 1.26; } /* 그보다 김: 24 → 44 */
.nxfx-cl-band__sub {
  margin-top: clamp(1rem, 0.85rem + 0.7vw, 1.5rem);
  max-width: 40rem;
  color: var(--cl-on-2);
}
/* 문장마다 한 줄 - 넓은 화면에서만(폰은 이어 쓴다) */
@media (min-width: 768px) {
  .nxfx-cl-band__sent { display: block; }
}
.nxfx-cl-band__acts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.875rem 1rem;
  margin-top: clamp(2rem, 1.6rem + 1.8vw, 3.25rem);
}
/* 대표 버튼 뒤에서 번지는 고리 - 버튼은 그대로, 감싼 칸의 장식만. 멈춘 상태에서는 옅은 두 겹 테로 남는다 */
.nxfx-cl-band__cta {
  position: relative;
  display: inline-flex;
  isolation: isolate;
}
.nxfx-cl-band__ring {
  position: absolute;
  inset: -7px;
  z-index: -1;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--cl-line-light) 46%, transparent);
  opacity: 0.5;
  pointer-events: none;
}
.nxfx-cl-band__ring--b {
  inset: -15px;
  opacity: 0.22;
}
html.nx-js .nxfx-cl-band__ring {
  inset: 0;
  opacity: 0;
  animation: nxfxClRing 3.4s cubic-bezier(0.2, 0.6, 0.3, 1) infinite;
}
html.nx-js .nxfx-cl-band__ring--b {
  animation-delay: 1.15s;
}
@keyframes nxfxClRing {
  0% { transform: scale(1, 1); opacity: 0; }
  12% { opacity: 0.7; }
  70%, 100% { transform: scale(1.16, 1.62); opacity: 0; }
}
.nxfx-cl-band__foot {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  margin-top: clamp(2rem, 1.6rem + 1.8vw, 3.25rem);
}
.nxfx-cl-band__rule {
  display: block;
  width: min(100%, 30rem);
  height: 1px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--accent) 46%, var(--cl-on-line)), transparent);
}
.nxfx-cl-band__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 0.375rem 1.125rem;
  margin: clamp(1.125rem, 1rem + 0.6vw, 1.5rem) 0 0;
  padding: 0;
  list-style: none;
  font-family: var(--font-body, "Pretendard Variable", sans-serif);
  font-size: var(--nx-fs-body);
  line-height: 1.6;
  color: var(--cl-on-2);
}
.nxfx-cl-band__meta > li {
  word-break: keep-all;
}
.nxfx-cl-band__meta > li + li::before {
  content: "";
  display: inline-block;
  width: 3px;
  height: 3px;
  margin-right: 1.125rem;
  border-radius: 50%;
  background: var(--cl-on-3);
  vertical-align: middle;
}
.nxfx-cl-band__tel {
  font-family: var(--font-heading, "Pretendard Variable", sans-serif);
  font-weight: var(--heading-weight, 700);
  font-size: clamp(1.125rem, 1.05rem + 0.35vw, 1.375rem);
  letter-spacing: 0.01em;
  font-variant-numeric: tabular-nums;
  color: var(--cl-on-1);
  text-decoration: none;
  background-image: linear-gradient(90deg, color-mix(in srgb, var(--accent) 70%, var(--nx-on-deep)), color-mix(in srgb, var(--accent) 70%, var(--nx-on-deep)));
  background-size: 0% 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size 0.5s var(--nx-ease), color 0.35s var(--nx-ease);
}
@media (hover: hover) and (pointer: fine) {
  .nxfx-cl-band__tel:hover {
    background-size: 100% 1px;
  }
}
.nxfx-cl-band__tel:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
  border-radius: 4px;
}

/* ── 띠 아래 가장자리로 흐르는 윤곽선 글(연출층 FxMarquee · 장식) ──
   부품의 흐름(움직임 · 가장자리 흐림)은 그대로 두고 글자 크기 · 색만 이 띠에 맞춘다.
   부품 기본 윤곽선은 글자색(--foreground)인데 밝은 테마의 짙은 띠에서는 바탕과 같은 색이라 안 보인다 → 띠 위 글자색으로 */
.nxfx-cl-band__mq {
  position: relative;
  margin: clamp(4rem, 3.2rem + 3.4vw, 6.5rem) calc(-1 * var(--cl-pad-x)) 0;
  padding-top: clamp(1.5rem, 1.25rem + 1vw, 2.25rem);
  border-top: 1px solid var(--cl-on-line);
}
/* 멈춘 상태(스크립트 없음 · 캡쳐)에서도 한 줄 - 여러 줄로 접히지 않고 양끝이 흐려지며 잘린다(흐르다 멈춘 모습) */
.nxfx-cl-band__mq .nxfx-mq {
  -webkit-mask-image: linear-gradient(90deg, transparent, var(--foreground) 9%, var(--foreground) 91%, transparent);
  mask-image: linear-gradient(90deg, transparent, var(--foreground) 9%, var(--foreground) 91%, transparent);
}
.nxfx-cl-band__mq .nxfx-mq__track,
.nxfx-cl-band__mq .nxfx-mq__set {
  flex-wrap: nowrap;
}
.nxfx-cl-band__mq .nxfx-mq__item {
  font-size: clamp(1.75rem, 1.05rem + 3.6vw, 4.25rem); /* 31 → 68 */
  color: var(--cl-ghost);
}
/* 글자는 위가 밝고 아래로 사라지는 옅은 면으로(윤곽선은 가변 글꼴에서 획이 겹친 자리가 안쪽 선으로 드러나 지저분했다) */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .nxfx-cl-band .nxfx-cl-band__mq .nxfx-mq .nxfx-mq__item {
    background-image: linear-gradient(180deg, color-mix(in srgb, var(--nx-on-deep) 30%, transparent) 8%, color-mix(in srgb, var(--nx-on-deep) 5%, transparent) 88%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-stroke: 0 transparent;
  }
}
@media (hover: hover) and (pointer: fine) {
  html.nx-js .nxfx-cl-band .nxfx-cl-band__mq .nxfx-mq .nxfx-mq__item:hover {
    background-image: none;
    color: var(--cl-line-light);
  }
}

/* ════════ 3. 폰 · 동작 줄이기 ════════ */
@media (max-width: 640px) {
  /* 늘 도는 장식은 멈춘다(등장 · 눌림 반응 · 들어올 때 한 번 쓸리는 빛은 연출층이 그대로 낸다) */
  html.nx-js .nxfx-cl-band__lamp,
  html.nx-js .nxfx-cl-band__img,
  html.nx-js .nxfx-cl-band__run::after,
  html.nx-js .nxfx-cl-band__drop::after,
  html.nx-js .nxfx-cl-band__ring {
    animation: none;
  }
  /* 멈춘 고리는 옅은 두 겹 테로 남는다 */
  html.nx-js .nxfx-cl-band__ring { inset: -7px; opacity: 0.5; }
  html.nx-js .nxfx-cl-band__ring--b { inset: -15px; opacity: 0.22; }
  .nxfx-cl-band__img {
    filter: grayscale(1) blur(16px);
  }
  .nxfx-cl-band__lamp {
    height: 16rem;
    margin-top: -8rem;
    filter: blur(34px);
  }
  .nxfx-cl-band__blob {
    bottom: -12rem;
    height: 20rem;
  }
  .nxfx-cl-band__blob-in {
    filter: blur(38px);
  }
  /* 버튼은 알약 그대로(기준 사이트 폰 화면처럼) - 여러 개면 같은 폭으로 세로로 선다 */
  .nxfx-cl-band__acts {
    flex-direction: column;
    align-items: center;
  }
  .nxfx-cl-band__acts .nxfx-btn > .nxfx-btn__face {
    min-width: 13.5rem;
  }
  .nxfx-cl-band__meta {
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
  }
  .nxfx-cl-band__meta > li + li::before {
    display: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  html.nx-js .nxfx-cl-band__lamp,
  html.nx-js .nxfx-cl-band__img,
  html.nx-js .nxfx-cl-band__streaks > i::after,
  html.nx-js .nxfx-cl-band__run::after,
  html.nx-js .nxfx-cl-band__drop::after,
  html.nx-js .nxfx-cl-band__ring {
    animation: none;
  }
  html.nx-js .nxfx-cl-band__ring { inset: -7px; opacity: 0.5; }
  html.nx-js .nxfx-cl-band__ring--b { inset: -15px; opacity: 0.22; }
  .nxfx-cl-zone #visit .grid > :is(div, aside),
  .nxfx-cl-zone #faq ul[data-hm-list] > li,
  .nxfx-cl-zone #faq ul[data-hm-list] > li > h3 > button,
  .nxfx-cl-zone #faq ul[data-hm-list] > li > h3 > button > span:first-child,
  .nxfx-cl-band__tel {
    transition: none;
  }
  .nxfx-cl-zone #visit .grid > :is(div, aside):hover {
    transform: none;
  }
  .nxfx-cl-zone #visit .grid > :is(div, aside):hover::before {
    animation: none;
  }
}

/* 가게 로고(흰 판) - 큰 글 자리 대신. 가로로 긴 로고는 폭으로, 짧은 로고는 높이로 맞춘다 */
.nxfx-cl-band__title--logo { display: flex; justify-content: center; margin-inline: auto; }
.nxfx-cl-band__title--logo img { display: block; height: auto; width: min(100%, 26rem); max-height: clamp(4.5rem, 12vw, 7.5rem); object-fit: contain; }

/* 로고 색이 살게 - 로고 대표색(--cl-logo-glow)으로 뒤 빛 · 글자 둘레 빛을 물들인다(어두운 띠 위 · 장식) */
.nxfx-cl-band__title--logo { position: relative; isolation: isolate; }
.nxfx-cl-band__title--logo img {
  filter: drop-shadow(0 0 1px color-mix(in srgb, var(--cl-logo-glow) 40%, transparent))
    drop-shadow(0 6px 26px color-mix(in srgb, var(--cl-logo-glow) 38%, transparent));
}
.nxfx-cl-band__logo-glow {
  position: absolute;
  z-index: -1;
  left: 50%;
  top: 50%;
  width: min(34rem, 92vw);
  aspect-ratio: 2 / 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--cl-logo-glow) 30%, transparent), color-mix(in srgb, var(--cl-logo-glow) 10%, transparent) 55%, transparent);
  filter: blur(8px);
  pointer-events: none;
}
html.nx-js .nxfx-cl-band__logo-glow { animation: nxClLogoGlow 6s ease-in-out infinite; }
@keyframes nxClLogoGlow {
  0%, 100% { opacity: 0.7; transform: translate(-50%, -50%) scale(0.96); }
  50% { opacity: 1; transform: translate(-50%, -50%) scale(1.04); }
}
@media (prefers-reduced-motion: reduce) {
  html.nx-js .nxfx-cl-band__logo-glow { animation: none; }
}