/**
 * 섹션 업그레이드 실험판 - 얹는 공용층 스타일(2026-11-11).
 *
 * ── 두 갈래 ──────────────────────────────────────────────────────────────
 *  ① `.nx-*`   새로 그리는 부품(섹션 래퍼 · 섹션 머리 · 카드 면 · 번호 · 버튼 …) - next-ui.tsx 가 쓴다.
 *  ② `.nx-up`  **운영 블록을 그대로 감싸** 그 안의 제목 눈금 · 상하 여백 · 카드 면을 끌어올리는 범위 한정 스타일.
 *              래퍼 밖에는 한 글자도 닿지 않는다(모든 선택자가 `.nx-up` 아래).
 *
 * ── 색 ───────────────────────────────────────────────────────────────────
 *  색은 전부 사이트 토큰(--background · --foreground · --accent · --card · --muted · --cta-ink)에서
 *  `color-mix()` 로 파생한다. 흰색 · 검정 · 임의 hex 는 없다 - 어느 테마에서도 같은 깊이가 난다.
 *  밝은 테마와 어두운 테마가 달라야 하는 값(광채 세기 · 그림자 유무)은 `[data-nx-tone]` 한 자리에서만 가른다.
 *
 * ── 우선순위 ─────────────────────────────────────────────────────────────
 *  Tailwind v4 유틸은 `@layer utilities` 안이라 여기(층 밖) 규칙이 이긴다. 운영 블록이 **인라인 style** 로
 *  준 값(제목 글자 크기)과 전역 최소 글자 규칙(`!important`)만 `!important` 로 넘는다.
 */

/* ════════ 1. 눈금(토큰) ════════ */
.nx-root,
.nx,
.nx-up {
  /* 선 · 면 */
  --nx-line: color-mix(in srgb, var(--foreground) 12%, transparent);
  --nx-line-strong: color-mix(in srgb, var(--foreground) 20%, transparent);
  --nx-line-accent: color-mix(in srgb, var(--accent) 45%, transparent);
  /* 글자 진하기 사다리(참고 사이트 1 / .84 / .70 / .55 / .42) */
  --nx-ink-1: var(--foreground);
  --nx-ink-2: color-mix(in srgb, var(--foreground) 84%, transparent);
  --nx-ink-3: color-mix(in srgb, var(--foreground) 70%, transparent);
  --nx-ink-4: color-mix(in srgb, var(--foreground) 55%, transparent);
  --nx-ink-5: color-mix(in srgb, var(--foreground) 42%, transparent);
  /* 움직임 */
  --nx-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --nx-ease-out: cubic-bezier(0.33, 1, 0.68, 1);
  /* 섹션 상하 여백: 폰 72 → PC 136 (얇은 단 44 → 64) */
  /* 섹션 위아래 여백 - 2026-11-12 의뢰인 "손님이 만족할 최적 크기로": 72→136px 에서 56→92px 로
     (섹션 사이 실측 PC 221~280 → 143~182 · 모바일 119~155 → 91~121 · 기존 V1 은 55~155). 폰에서 끊김 없이 훑히고 PC 는 V2 의 여유를 남긴다. */
  --nx-sec-y: clamp(3.5rem, 2.6rem + 3.6vw, 5.75rem);
  --nx-sec-y-thin: clamp(2.75rem, 2.25rem + 2.1vw, 4rem);
  /* 머리(라벨+제목+설명) 아래 간격: 폰 32 → PC 64 */
  --nx-head-gap: clamp(2rem, 1.15rem + 3.55vw, 4rem);
  /* 글자 눈금 */
  --nx-fs-display: clamp(2.5rem, 1.42rem + 4.6vw, 5.4rem); /* 첫 화면 큰 제목 40 → 86 */
  --nx-fs-title: clamp(1.875rem, 1.36rem + 2.2vw, 3.2rem); /* 섹션 제목 30 → 51 */
  --nx-fs-h3: clamp(1.3125rem, 1.16rem + 0.64vw, 1.75rem); /* 카드 제목 21 → 28 */
  --nx-fs-sub: clamp(1rem, 0.93rem + 0.3vw, 1.1875rem); /* 머리 설명 16 → 19 */
  --nx-fs-body: clamp(0.9375rem, 0.9rem + 0.16vw, 1.03125rem); /* 본문 15 → 16.5 */
  --nx-fs-label: clamp(0.8125rem, 0.79rem + 0.1vw, 0.875rem); /* 미니라벨 13 → 14 */
  --nx-track-title: -0.028em;
  --nx-track-display: -0.035em;
  --nx-track-label: 0.04em;
  /* 카드 */
  --nx-radius: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem); /* 20 → 24 */
  --nx-radius-sm: 1rem;
  --nx-card-pad: clamp(1.5rem, 0.95rem + 2.3vw, 3rem); /* 24 → 48 */
  --nx-card-pad-sm: clamp(1.25rem, 1.1rem + 0.65vw, 1.75rem); /* 20 → 28 */
  /* 테마마다 달라지는 값 - 기본은 밝은 테마 */
  --nx-glow-c: var(--accent);
  --nx-glow-o: 0.16;
  --nx-glow-o-hover: 0.42;
  --nx-sheen: color-mix(in srgb, var(--accent) 7%, transparent);
  --nx-shadow: 0 1px 2px color-mix(in srgb, var(--foreground) 5%, transparent),
    0 22px 44px -28px color-mix(in srgb, var(--foreground) 26%, transparent);
  --nx-shadow-hover: 0 2px 4px color-mix(in srgb, var(--foreground) 6%, transparent),
    0 32px 60px -30px color-mix(in srgb, var(--foreground) 34%, transparent);
  --nx-ambient: color-mix(in srgb, var(--accent) 9%, transparent);
  /* 사진 위에 까는 짙은 쪽 / 그 위 글자 - 밝은 테마는 글자색이 짙은 쪽이다 */
  --nx-deep: var(--foreground);
  --nx-on-deep: var(--background);
}
/* 어두운 테마 - 그림자는 안 보이므로 걷고, 광채 · 윗빛을 올린다 */
[data-nx-tone="dark"],
[data-nx-tone="dark"] .nx,
[data-nx-tone="dark"] .nx-up {
  --nx-glow-o: 0.26;
  --nx-glow-o-hover: 0.7;
  --nx-sheen: color-mix(in srgb, var(--foreground) 9%, transparent);
  --nx-shadow: 0 0 0 0 transparent;
  --nx-shadow-hover: 0 0 0 0 transparent;
  --nx-ambient: color-mix(in srgb, var(--accent) 11%, transparent);
  --nx-deep: var(--background);
  --nx-on-deep: var(--foreground);
}

/* ════════ 2. 새로 그리는 부품 ════════ */

/* ── 섹션 래퍼 ── */
.nx-sec {
  position: relative;
  isolation: isolate;
  border-top: 1px solid var(--nx-line);
  background-color: var(--background);
  color: var(--foreground);
  padding-block: var(--nx-sec-y);
  padding-inline: 1rem;
}
@media (min-width: 768px) {
  .nx-sec { padding-inline: 1.5rem; }
}
@media (min-width: 1024px) {
  .nx-sec { padding-inline: 2rem; }
}
.nx-sec--alt { background-color: var(--muted); }
.nx-sec--thin { padding-block: var(--nx-sec-y-thin); }
.nx-sec--flush { border-top-width: 0; }
.nx-sec--clip { overflow: hidden; }

/* ── 본문 폭 사다리 ── */
.nx-wrap { margin-inline: auto; width: 100%; max-width: 1280px; }
.nx-wrap--wide { max-width: 1152px; }
.nx-wrap--base { max-width: 1024px; }
.nx-wrap--text { max-width: 896px; }
.nx-wrap--narrow { max-width: 768px; }
.nx-wrap--tight { max-width: 672px; }

/* ── 섹션 머리 ── */
.nx-head { display: block; margin-bottom: var(--nx-head-gap); max-width: 56rem; }
.nx-head--center { margin-inline: auto; text-align: center; }
.nx-head--flush { margin-bottom: 0; }
.nx-head > .nx-label { margin-bottom: clamp(0.875rem, 0.7rem + 0.7vw, 1.375rem); }
.nx-head > .nx-sub { margin-top: clamp(1rem, 0.8rem + 0.85vw, 1.625rem); }
.nx-head--center > .nx-sub { margin-inline: auto; }

.nx-label {
  display: block;
  margin: 0;
  font-family: var(--font-sdv-mono), "Pretendard Variable", "Pretendard", sans-serif;
  font-size: var(--nx-fs-label) !important; /* 전역 최소 글자 규칙(!important)과 같은 값 이상으로 */
  line-height: 1.55 !important;
  font-weight: 600;
  letter-spacing: var(--nx-track-label);
  color: var(--accent);
  white-space: pre-line;
}

.nx-title,
.nx-display {
  display: block;
  margin: 0;
  font-family: var(--font-heading, "Pretendard Variable", sans-serif);
  font-weight: var(--heading-weight, 700);
  color: var(--foreground);
  white-space: pre-line;
  word-break: keep-all;
  overflow-wrap: break-word;
  text-wrap: balance;
}
.nx-title { font-size: var(--nx-fs-title); line-height: 1.14; letter-spacing: var(--nx-track-title); }
.nx-display { font-size: var(--nx-fs-display); line-height: 1.06; letter-spacing: var(--nx-track-display); }
.nx-title--sm { font-size: clamp(1.5rem, 1.2rem + 1.3vw, 2.25rem); line-height: 1.2; } /* 24 → 36 */
.nx-on-deep { color: var(--nx-on-deep); }

.nx-h3 {
  margin: 0;
  font-family: var(--font-heading, "Pretendard Variable", sans-serif);
  font-weight: var(--heading-weight, 700);
  font-size: var(--nx-fs-h3);
  line-height: 1.3;
  letter-spacing: -0.02em;
  color: var(--foreground);
  word-break: keep-all;
  overflow-wrap: break-word;
}

.nx-sub,
.nx-body {
  margin: 0;
  font-family: var(--font-body, "Pretendard Variable", sans-serif);
  font-weight: 400;
  line-height: 1.75;
  white-space: pre-line;
  word-break: keep-all;
  overflow-wrap: break-word;
}
.nx-sub { max-width: 42rem; font-size: var(--nx-fs-sub); color: var(--nx-ink-3); text-wrap: pretty; }
.nx-body { font-size: var(--nx-fs-body); color: var(--nx-ink-3); }

/* ── 카드 면 + 뒤 광채 ── */
.nx-cardwrap { position: relative; isolation: isolate; display: flex; flex-direction: column; min-width: 0; }
.nx-cardwrap > .nx-card { flex: 1 1 auto; }
.nx-card {
  position: relative;
  min-width: 0;
  border: 1px solid var(--nx-line);
  border-radius: var(--nx-radius);
  background-color: var(--card);
  background-image: radial-gradient(135% 82% at 12% 0%, var(--nx-sheen), transparent 54%);
  box-shadow: var(--nx-shadow);
  padding: var(--nx-card-pad);
  color: var(--foreground);
  transition: transform 0.5s var(--nx-ease), border-color 0.5s var(--nx-ease), box-shadow 0.5s var(--nx-ease);
}
.nx-card--sm { border-radius: var(--nx-radius-sm); padding: var(--nx-card-pad-sm); }
.nx-card--flush { padding: 0; overflow: hidden; }
.nx-card--muted { background-color: var(--muted); }
.nx-card--plain { background-image: none; box-shadow: none; }
/* 강조 카드 - 대각선으로 포인트 색이 번진다(참고 사이트의 대표 후기 카드) */
.nx-card--accent {
  border-color: var(--nx-line-accent);
  background-image: linear-gradient(135deg, color-mix(in srgb, var(--accent) 16%, transparent), transparent 62%),
    radial-gradient(135% 82% at 12% 0%, var(--nx-sheen), transparent 54%);
}
.nx-glow {
  position: absolute;
  inset: -2.75rem;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--nx-glow-c), transparent);
  filter: blur(44px);
  opacity: var(--nx-glow-o);
  pointer-events: none;
  transition: opacity 0.6s var(--nx-ease);
}
/* 색 돌리기(카드마다 조금 다른 빛) - 지원하는 브라우저에서만 · 포인트 색에서 파생 */
@supports (color: oklch(from red l c h)) {
  .nx-glow[data-hue] { --nx-glow-c: oklch(from var(--accent) l c calc(h + var(--nx-hue, 0))); }
}
@media (hover: hover) and (pointer: fine) {
  .nx-lift:hover > .nx-card,
  .nx-card.nx-lift:hover {
    transform: translate3d(0, -6px, 0);
    border-color: var(--nx-line-accent);
    box-shadow: var(--nx-shadow-hover);
  }
  .nx-lift:hover > .nx-glow { opacity: var(--nx-glow-o-hover); }
}
/* 폰 - 광채를 줄인다(넘침 · 번짐 방지) */
@media (max-width: 767px) {
  .nx-glow { inset: -1.25rem; filter: blur(28px); }
}

/* ── 번호 글리프 ── */
.nx-num {
  display: inline-block;
  font-family: var(--font-sdv-mono), "Pretendard Variable", "Pretendard", sans-serif;
  font-size: 0.8125rem !important;
  line-height: 1.2 !important;
  font-weight: 600;
  letter-spacing: 0.24em;
  font-variant-numeric: tabular-nums;
  color: var(--accent);
}
.nx-num--ghost {
  font-family: var(--font-sdv-display), "Pretendard Variable", "Pretendard", sans-serif;
  font-size: clamp(3rem, 2.3rem + 3vw, 5rem) !important;
  line-height: 0.9 !important;
  font-weight: 300;
  letter-spacing: -0.02em;
  color: color-mix(in srgb, var(--accent) var(--tint-behind, 16%), transparent);
  user-select: none;
}

/* ── 알약 버튼 + 뒤 광채 쌍둥이 ── */
.nx-btn {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 3rem;
  padding: 0.875rem 1.75rem;
  border: 1px solid transparent;
  border-radius: 999px;
  background-color: var(--accent);
  color: var(--cta-ink, var(--background));
  font-family: var(--font-body, "Pretendard Variable", sans-serif);
  font-size: 0.9375rem !important;
  line-height: 1.2 !important;
  font-weight: 600;
  letter-spacing: -0.005em;
  text-decoration: none;
  white-space: nowrap;
  transition: transform 0.4s var(--nx-ease), background-color 0.3s ease, border-color 0.3s ease;
}
.nx-btn::before {
  content: "";
  position: absolute;
  inset: 0.375rem 0.75rem -0.375rem;
  z-index: -1;
  border-radius: inherit;
  background: var(--accent);
  filter: blur(18px);
  opacity: 0.32;
  transition: opacity 0.4s var(--nx-ease);
  pointer-events: none;
}
.nx-btn--ghost {
  border-color: var(--nx-line-strong);
  background-color: color-mix(in srgb, var(--background) 55%, transparent);
  color: var(--foreground);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.nx-btn--ghost::before { display: none; }
/* 사진 위(짙은 깔개 위) 유리 버튼 */
.nx-btn--glass {
  border-color: color-mix(in srgb, var(--nx-on-deep) 28%, transparent);
  background-color: color-mix(in srgb, var(--nx-on-deep) 10%, transparent);
  color: var(--nx-on-deep);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.nx-btn--glass::before { display: none; }
.nx-btn--lg { min-height: 3.5rem; padding: 1.0625rem 2.125rem; font-size: 1rem !important; }
@media (hover: hover) and (pointer: fine) {
  .nx-btn:hover { transform: translate3d(0, -2px, 0); }
  .nx-btn:hover::before { opacity: 0.58; }
  .nx-btn--ghost:hover { border-color: var(--nx-line-accent); }
  .nx-btn--glass:hover { background-color: color-mix(in srgb, var(--nx-on-deep) 18%, transparent); }
}
.nx-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* ── 알약 줄(정적 · 누르는 것이 아니다) ── */
.nx-pills { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.625rem; margin: 0; padding: 0; list-style: none; }
.nx-pills--center { justify-content: center; }
.nx-pill {
  display: inline-flex;
  align-items: center;
  padding: 0.5rem 1rem;
  border: 1px solid var(--nx-line-strong);
  border-radius: 999px;
  background-color: color-mix(in srgb, var(--foreground) 3%, transparent);
  color: var(--nx-ink-2);
  font-size: 0.875rem !important;
  line-height: 1.3 !important;
  font-weight: 500;
}
.nx-pill--accent { border-color: var(--nx-line-accent); color: var(--accent); background-color: color-mix(in srgb, var(--accent) 8%, transparent); }

/* ── 수치 띠(사실 수치가 데이터에 있을 때만) ── */
.nx-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  overflow: hidden;
  border: 1px solid var(--nx-line);
  border-radius: var(--nx-radius);
  background-color: var(--nx-line);
}
@media (min-width: 768px) {
  .nx-stats { grid-template-columns: repeat(var(--nx-cols, 4), minmax(0, 1fr)); }
}
.nx-stat {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: clamp(1.25rem, 0.9rem + 1.5vw, 2.25rem);
  background-color: var(--background);
  transition: background-color 0.4s ease;
}
.nx-stat__value {
  font-family: var(--font-heading, "Pretendard Variable", sans-serif);
  font-weight: var(--heading-weight, 700);
  font-size: clamp(1.75rem, 1.3rem + 1.9vw, 2.875rem);
  line-height: 1.05;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  color: var(--foreground);
}
.nx-stat__label { font-size: 0.875rem !important; line-height: 1.5 !important; color: var(--nx-ink-4); }
@media (hover: hover) and (pointer: fine) {
  .nx-stat:hover { background-color: color-mix(in srgb, var(--accent) 5%, var(--background)); }
}

/* ── 사진 ── */
.nx-photo { position: relative; overflow: hidden; border-radius: var(--nx-radius); background-color: var(--muted); }
.nx-photo > img { display: block; width: 100%; height: 100%; object-fit: cover; filter: saturate(1.06) contrast(1.035) brightness(1.01); }
.nx-photo--sm { border-radius: var(--nx-radius-sm); }
.nx-photo--flat { border-radius: 0; }
/* 카드 면으로 녹아드는 사진(아래쪽이 카드 색으로 사라진다) */
.nx-photo--melt::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent 48%, color-mix(in srgb, var(--nx-melt, var(--card)) 78%, transparent) 82%, var(--nx-melt, var(--card)) 100%);
  pointer-events: none;
}
@media (hover: hover) and (pointer: fine) {
  .nx-photo--zoom > img { transition: transform 0.9s var(--nx-ease); }
  .nx-lift:hover .nx-photo--zoom > img,
  .nx-photo--zoom:hover > img { transform: scale(1.04); }
}

/* ── 사진 위 깔개(스크림) · 빛 ── */
.nx-scrim { position: absolute; inset: 0; pointer-events: none; }
/* 아래에서 올라오는 깔개 - 글이 아래에 놓일 때 */
.nx-scrim--bottom {
  background: linear-gradient(to top, color-mix(in srgb, var(--nx-deep) 88%, transparent) 0%, color-mix(in srgb, var(--nx-deep) 52%, transparent) 34%, color-mix(in srgb, var(--nx-deep) 10%, transparent) 68%, transparent 100%);
}
/* 왼쪽에서 들어오는 깔개 - 글이 왼쪽에 놓일 때 */
.nx-scrim--left {
  background: linear-gradient(to right, color-mix(in srgb, var(--nx-deep) 86%, transparent) 0%, color-mix(in srgb, var(--nx-deep) 58%, transparent) 38%, color-mix(in srgb, var(--nx-deep) 12%, transparent) 72%, transparent 100%);
}
/* 전면 깔개 - 가운데 글 */
.nx-scrim--full { background: color-mix(in srgb, var(--nx-deep) 56%, transparent); }
/* 위쪽 얇은 깔개 - 헤더 글자가 읽히게 */
.nx-scrim--top { background: linear-gradient(to bottom, color-mix(in srgb, var(--nx-deep) 46%, transparent), transparent 26%); }
/* 다음 섹션 바탕색으로 이어지는 밑단 */
.nx-scrim--fade { background: linear-gradient(to top, var(--background) 0%, transparent 22%); }

/* 섹션 뒤 잔잔한 빛(정적 - 반복 애니메이션 없음) */
.nx-ambient { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.nx-ambient::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -20%;
  width: min(70rem, 120%);
  aspect-ratio: 2 / 1;
  transform: translateX(-50%);
  background: radial-gradient(closest-side, var(--nx-ambient), transparent);
}
.nx-ambient--left::before { left: 12%; }
.nx-ambient--right::before { left: 88%; }
.nx-ambient--bottom::before { top: auto; bottom: -30%; }

/* 포인터를 따라다니는 빛 - PC(호버 되는 정밀 포인터)에서만 켜진다 */
.nx-pointer { position: relative; isolation: isolate; }
.nx-pointer::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: radial-gradient(var(--nx-pr, 420px) circle at var(--nx-mx, 50%) var(--nx-my, 0%), color-mix(in srgb, var(--accent) 13%, transparent), transparent 70%);
  opacity: 0;
  transition: opacity 0.5s ease;
  pointer-events: none;
}
@media (hover: hover) and (pointer: fine) {
  .nx-pointer.nx-on::after { opacity: 1; }
}

/* ── 격자 도우미 ── */
.nx-grid { display: grid; gap: clamp(1rem, 0.75rem + 1.05vw, 1.75rem); grid-template-columns: minmax(0, 1fr); }
/* 격자 칸은 키를 맞춘다 - 등장 래퍼(NxReveal)가 끼어도 카드가 칸 높이를 다 채운다 */
.nx-grid > * { display: flex; flex-direction: column; min-width: 0; }
.nx-grid > * > :is(.nx-card, .nx-cardwrap) { flex: 1 1 auto; }
@media (min-width: 768px) {
  .nx-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nx-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nx-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .nx-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .nx-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ════════ 3. 등장 ════════
 *  숨김 상태는 `html.nx-js` 일 때만 건다 - 스크립트가 못 돌면(또는 still=1 이면) 처음부터 다 보인다. */
.nx-js [data-nx-rv] {
  opacity: 0;
  transform: translate3d(0, 24px, 0);
  transition: opacity 0.9s var(--nx-ease-out), transform 0.9s var(--nx-ease-out), clip-path 1s var(--nx-ease-out);
  transition-delay: var(--nx-d, 0ms);
  will-change: opacity, transform;
}
.nx-js [data-nx-rv="left"] { transform: translate3d(-28px, 0, 0); }
.nx-js [data-nx-rv="right"] { transform: translate3d(28px, 0, 0); }
.nx-js [data-nx-rv="fade"] { transform: none; }
.nx-js [data-nx-rv="scale"] { transform: scale(0.97); }
.nx-js [data-nx-rv="wipe"] { opacity: 1; transform: translate3d(0, 0.3em, 0); clip-path: inset(0 0 100% 0); }
.nx-js [data-nx-rv].nx-in { opacity: 1; transform: none; will-change: auto; }
.nx-js [data-nx-rv="wipe"].nx-in { clip-path: inset(-0.15em -0.5em -0.3em -0.5em); }

@media (prefers-reduced-motion: reduce) {
  .nx-js [data-nx-rv],
  .nx-js [data-nx-rv="wipe"] { opacity: 1 !important; transform: none !important; clip-path: none !important; transition: none !important; }
  .nx-card, .nx-glow, .nx-btn, .nx-btn::before, .nx-photo--zoom > img, .nx-pointer::after { transition: none !important; }
  .nx-lift:hover > .nx-card, .nx-card.nx-lift:hover, .nx-btn:hover { transform: none !important; }
}

/* ════════ 4. 운영 블록을 감싸 끌어올리는 범위 한정 스타일(.nx-up) ════════
 *  선택자는 운영 블록이 실제로 내는 마크업에서 왔다(blocks/_shared.tsx):
 *   · 섹션        <section class="border-t border-foreground/10 bg-background px-4 py-6 …">
 *   · 미니라벨    .hm-eyebrow
 *   · 큰 제목     <div data-rv="heading"><span 선/><h2 style="font-size:clamp(…)">
 *   · 카드        .hm-pcard (CARD_SKIN)
 *   · 목록        [data-hm-list]
 *  ⚠️ 좌우 여백과 바깥 폭(1280)은 건드리지 않는다 - 헤더 로고 · 첫 화면 글과 같은 기준선에 서 있어야 한다. */

/* 섹션 상하 여백 - 자기 여백을 가진 섹션만(여백 없는 통짜 섹션은 그대로) */
.nx-up section[class*="py-"] { padding-block: var(--nx-sec-y); }
.nx-up--thin section[class*="py-"] { padding-block: var(--nx-sec-y-thin); }
/* 두 톤 교차 - 이 섹션을 보조 바탕으로 */
.nx-up--alt section[class*="bg-background"] { background-color: var(--muted); }
.nx-up--alt .hm-pcard[class*="bg-muted"] { background-color: var(--card); }
/* 운영 격자의 빈 칸 채움(aria-hidden · bg-background)이 보조 바탕 위에서 밝은 네모로 뜨지 않게 */
.nx-up--alt [data-hm-list] > [aria-hidden="true"][class*="bg-background"] { background-color: transparent; }
/* 1px 구분선은 운영 섹션이 이미 긋는다(border-t border-foreground/10) - 색만 눈금에 맞춘다 */
.nx-up section[class*="border-t"] { border-top-color: var(--nx-line); }

/* 미니라벨 */
.nx-up .hm-eyebrow {
  font-size: var(--nx-fs-label) !important;
  font-weight: 600;
  letter-spacing: var(--nx-track-label);
}
/* 큰 제목 - 운영이 인라인 style 로 크기를 주므로 !important 로 넘는다 */
.nx-up [data-rv="heading"] > :is(h1, h2) {
  font-size: var(--nx-fs-title) !important;
  line-height: 1.14;
  letter-spacing: var(--nx-track-title);
  text-wrap: balance;
}
.nx-up [data-rv="heading"] { margin-bottom: clamp(1.5rem, 1.1rem + 1.7vw, 2.75rem); }
.nx-up [data-rv="heading"] > span:first-child { margin-bottom: clamp(0.875rem, 0.75rem + 0.5vw, 1.25rem); }
/* 항목 제목 */
.nx-up :is([data-hm-list], .hm-pcard) h3 {
  font-size: var(--nx-fs-h3);
  line-height: 1.3;
  letter-spacing: -0.02em;
}
/* 줄 목록(약속 B · C 같은 구분선 목록) - 줄마다 숨을 더 준다 */
.nx-up ul[data-hm-list] > li { padding-block: clamp(1.75rem, 1.3rem + 1.9vw, 3rem); border-bottom-color: var(--nx-line); }
.nx-up ul[data-hm-list] { border-top-color: var(--nx-line-strong); }

/* 카드 면 - 둥글기 · 테두리 · 윗빛 · 그림자(밝은 테마) */
.nx-up--cards .hm-pcard {
  border-radius: var(--nx-radius);
  border-color: var(--nx-line);
  background-image: radial-gradient(135% 82% at 12% 0%, var(--nx-sheen), transparent 54%);
  box-shadow: var(--nx-shadow);
  transition: transform 0.5s var(--nx-ease), border-color 0.5s var(--nx-ease), box-shadow 0.5s var(--nx-ease);
}
.nx-up--cards .hm-pcard[class*="p-6"] { padding: var(--nx-card-pad-sm); }
.nx-up--roomy .hm-pcard[class*="p-6"] { padding: var(--nx-card-pad); }
.nx-up--cards [data-hm-list][class*="gap-"] { gap: clamp(1rem, 0.75rem + 1.05vw, 1.75rem); }
@media (hover: hover) and (pointer: fine) {
  .nx-up--lift .hm-pcard:hover {
    transform: translate3d(0, -6px, 0);
    border-color: var(--nx-line-accent);
    box-shadow: var(--nx-shadow-hover);
  }
}
/* 카드 뒤 광채 - 카드 자신이 overflow:hidden 이면 잘려 안 보일 뿐 깨지지 않는다 */
.nx-up--glow [data-hm-list] { isolation: isolate; }
.nx-up--glow .hm-pcard { position: relative; }
.nx-up--glow .hm-pcard::after {
  content: "";
  position: absolute;
  inset: -2.5rem;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--nx-glow-c), transparent);
  filter: blur(44px);
  opacity: var(--nx-glow-o);
  pointer-events: none;
  transition: opacity 0.6s var(--nx-ease);
}
@media (hover: hover) and (pointer: fine) {
  .nx-up--glow .hm-pcard:hover::after { opacity: var(--nx-glow-o-hover); }
}
@media (max-width: 767px) {
  .nx-up--glow .hm-pcard::after { inset: -1rem; filter: blur(26px); }
}
/* 섹션 안 사진의 미세 색감 보정(참고 사이트와 같은 값) */
.nx-up--grade section img { filter: saturate(1.06) contrast(1.035) brightness(1.01); }
/* 섹션 뒤 잔잔한 빛 - 섹션 자신에 건다(운영 섹션은 position 이 없어 여기서 준다) */
.nx-up--ambient > section,
.nx-up--ambient > * > section {
  position: relative;
  isolation: isolate;
  background-image: radial-gradient(60rem 30rem at 50% -8rem, var(--nx-ambient), transparent 70%);
  background-repeat: no-repeat;
}
@media (prefers-reduced-motion: reduce) {
  .nx-up--cards .hm-pcard, .nx-up--glow .hm-pcard::after { transition: none !important; }
  .nx-up--lift .hm-pcard:hover { transform: none !important; }
}

/* ════════ 5. 비교 화면(실험판 자신의 틀 - 사이트 테마 밖) ════════
 *  이 틀은 가게 홈페이지가 아니라 작업 도구다. 색은 브라우저 시스템 색(Canvas · CanvasText)만 쓴다. */
.nxlab {
  min-height: 100vh;
  background: Canvas;
  color: CanvasText;
  font-family: "Pretendard Variable", "Pretendard", system-ui, sans-serif;
  font-size: 14px;
  line-height: 1.6;
  word-break: keep-all;
}
.nxlab a { color: LinkText; text-underline-offset: 3px; }
.nxlab__top { padding: 20px 20px 12px; border-bottom: 1px solid color-mix(in srgb, CanvasText 16%, transparent); }
.nxlab__top h1 { margin: 0 0 6px; font-size: 20px; font-weight: 700; }
.nxlab__top p { margin: 0; color: color-mix(in srgb, CanvasText 70%, transparent); }
.nxlab__nav { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 10px; }
.nxlab__fx { margin-top: 28px; }
.nxlab__fxhead {
  padding: 12px 20px;
  background: color-mix(in srgb, CanvasText 8%, Canvas);
  border-block: 1px solid color-mix(in srgb, CanvasText 16%, transparent);
}
.nxlab__fxhead h2 { margin: 0; font-size: 16px; font-weight: 700; }
.nxlab__fxhead p { margin: 2px 0 0; color: color-mix(in srgb, CanvasText 70%, transparent); }
.nxlab__band {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  padding: 8px 20px;
  background: Canvas;
  border-bottom: 1px solid color-mix(in srgb, CanvasText 16%, transparent);
}
.nxlab__band strong { font-size: 14px; font-weight: 700; }
.nxlab__band span { color: color-mix(in srgb, CanvasText 70%, transparent); }
.nxlab__tag {
  display: inline-block;
  padding: 1px 8px;
  border: 1px solid color-mix(in srgb, CanvasText 40%, transparent);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
}
.nxlab__band .nxlab__tag--on { background: CanvasText; color: Canvas; border-color: CanvasText; }
.nxlab__empty { padding: 28px 20px; color: color-mix(in srgb, CanvasText 60%, transparent); }
.nxlab__cell:empty::after { content: "이 가게 데이터에는 이 섹션이 없습니다(안이 아무것도 그리지 않았습니다)."; display: block; padding: 28px 20px; font-size: 14px; color: var(--nx-ink-4); }
.nxlab__list { margin: 0; padding: 0 0 0 18px; }
.nxlab__list li { margin: 4px 0; }
.nxlab__body { padding: 16px 20px 40px; max-width: 960px; }
.nxlab__body h2 { margin: 24px 0 8px; font-size: 16px; font-weight: 700; }