/* =========================================================================
   KNGS 홈 히어로 — "로봇 자동 체결" 모션그래픽 (Future Industrial / Precision Tech)
   소유: 그래픽디자이너 I.  마크업: index.html <!-- KNGS:HERO -->, 스크립트: hero.js
   테마와 무관하게 항상 다크 무대. 색은 토큰 우선, 없으면 폴백.
   ========================================================================= */
.hx {
  --hx-bg: var(--ink-950, #060b14);
  --hx-bg-2: var(--navy-900, #0e1c30);
  --hx-a1: var(--orange-500, #f26a1b);
  --hx-a2: var(--orange-glow, #ff9a4d);
  --hx-line: rgb(255 255 255 / 0.14);
  --hx-glass: rgb(10 20 36 / 0.56);
  --hx-mono: var(--font-mono, ui-monospace, "SF Mono", Menlo, monospace);
  --mx: 0; --my: 0; --out: 0;
  position: relative; isolation: isolate; overflow: hidden; color: #fff;
  background: var(--hx-bg-2); /* 영상 배경(#0e1c30)과 동일 → 세로 태블릿에서 이음매 없음 */
  min-height: calc(100svh - var(--header-h, 60px) - var(--safe-top, 0px) - var(--bottom-ui, 0px));
  display: flex; flex-direction: column;
}

/* ---------- 무대(영상·포스터·장식) ---------- */
.hx__stage { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.hx__media {
  position: absolute; left: 0; right: 0; bottom: 0; aspect-ratio: 4 / 5;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 22%);
          mask-image: linear-gradient(to bottom, transparent 0, #000 22%);
  transform: translate3d(calc(var(--mx) * -10px), calc(var(--my) * -6px), 0) scale(calc(1 + var(--out) * 0.06));
  transform-origin: 70% 60%;
  will-change: transform;
}
.hx__poster, .hx__poster img, .hx__video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 100%; display: block;
}
.hx__video { opacity: 0; transition: opacity .6s ease; background: transparent; }
.hx.has-video .hx__video { opacity: 1; }
/* 폴백 사진(기존 hero-mobile)은 피사체가 아래쪽 → 같은 배치로 맞음 */

.hx__shade { /* 상단 텍스트 가독 + 하단 다음 섹션 연결 + 비네트 */
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, var(--hx-bg) 0%, rgb(6 11 20 / 0.72) 34%, rgb(6 11 20 / 0) 56%, rgb(6 11 20 / 0) 80%, rgb(6 11 20 / 0.7) 100%),
    radial-gradient(120% 90% at 60% 55%, transparent 55%, rgb(3 6 12 / 0.55) 100%);
}
.hx__grid { /* 블루프린트 그리드 */
  position: absolute; inset: 0; opacity: .5;
  background-image:
    linear-gradient(rgb(143 169 204 / 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgb(143 169 204 / 0.07) 1px, transparent 1px);
  background-size: 40px 40px;
  -webkit-mask-image: radial-gradient(90% 60% at 50% 20%, #000 0%, transparent 75%);
          mask-image: radial-gradient(90% 60% at 50% 20%, #000 0%, transparent 75%);
}
.hx__grain {
  position: absolute; inset: -50%; opacity: .07; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* 정밀 프레임(코너 마커·모노 라벨·크로스헤어) — 피사체 영역을 감쌈 */
.hx__frame {
  position: absolute; left: 7%; right: 7%; bottom: 104px; height: 24%;
  transform: translate3d(calc(var(--mx) * 6px), calc(var(--my) * 4px), 0);
  transition: inset .5s var(--ease-out, ease);
}
.hx__corner { position: absolute; width: 18px; height: 18px; border: 0 solid rgb(255 255 255 / 0.5); transition: border-color .35s ease, transform .45s var(--ease-out, ease), filter .35s; }
.hx__corner--tl { top: 0; left: 0; border-top-width: 1.5px; border-left-width: 1.5px; }
.hx__corner--tr { top: 0; right: 0; border-top-width: 1.5px; border-right-width: 1.5px; }
.hx__corner--bl { bottom: 0; left: 0; border-bottom-width: 1.5px; border-left-width: 1.5px; }
.hx__corner--br { bottom: 0; right: 0; border-bottom-width: 1.5px; border-right-width: 1.5px; }
.hx__tag {
  position: absolute; font: 600 10px/1 var(--hx-mono); letter-spacing: .14em; text-transform: uppercase;
  color: rgb(195 210 230 / 0.7); white-space: nowrap;
}
.hx__tag--tl { top: -16px; left: 0; display: none; }
.hx__cross { position: absolute; left: 50%; top: 50%; width: 28px; height: 28px; margin: -14px 0 0 -14px; fill: none; stroke: rgb(255 255 255 / 0.35); stroke-width: 1.2; opacity: 0; transition: opacity .3s, transform .45s var(--ease-out, ease); }
/* LOCK(체결 순간): 코너가 안쪽으로 조여지며 오렌지 발광 */
.hx[data-phase="align"] .hx__cross { opacity: .8; }
.hx[data-phase="lock"] .hx__cross { opacity: 1; stroke: var(--hx-a2); transform: rotate(45deg) scale(.8); }
.hx[data-phase="lock"] .hx__corner { border-color: var(--hx-a2); filter: drop-shadow(0 0 6px rgb(242 106 27 / 0.8)); }
.hx[data-phase="lock"] .hx__corner--tl { transform: translate(8px, 8px); }
.hx[data-phase="lock"] .hx__corner--tr { transform: translate(-8px, 8px); }
.hx[data-phase="lock"] .hx__corner--bl { transform: translate(8px, -8px); }
.hx[data-phase="lock"] .hx__corner--br { transform: translate(-8px, -8px); }
.hx[data-phase="flow"] .hx__corner { border-color: rgb(255 154 77 / 0.75); }

/* 유체 흐름 라인 */
.hx__flow { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 110px; overflow: visible; }
.hx__flow path { fill: none; vector-effect: non-scaling-stroke; }
.hx__flow-base { stroke: rgb(143 169 204 / 0.12); stroke-width: 1; }
.hx__flow-line { stroke: url(#hxFlowG); stroke-width: 1.6; stroke-linecap: round; stroke-dasharray: 140 1100; stroke-dashoffset: 1240; opacity: .55; transition: opacity .6s ease, stroke-width .6s ease; filter: drop-shadow(0 0 4px rgb(242 106 27 / 0.6)); }
.hx__flow-line--2 { stroke-dasharray: 90 1300; opacity: .4; }
.hx__flow-line--3 { stroke-dasharray: 40 700; stroke-width: 2.4; opacity: .35; }
.hx[data-phase="flow"] .hx__flow-line { opacity: .95; stroke-width: 2; }
.hx[data-phase="standby"] .hx__flow-line, .hx[data-phase="return"] .hx__flow-line { opacity: .3; }

/* ---------- 카피 ---------- */
.hx__inner {
  position: relative; flex: 1; width: 100%;
  display: flex; flex-direction: column; gap: var(--sp-4, 16px);
  padding-block: var(--sp-6, 24px) calc(var(--sp-16, 64px) + 8px);
  opacity: calc(1 - var(--out) * 0.85);
  transform: translate3d(0, calc(var(--out) * -28px), 0) scale(calc(1 - var(--out) * 0.03));
  transform-origin: 0 0;
}
.hx__copy { display: flex; flex-direction: column; gap: var(--sp-3, 12px); }
.hx__eyebrow { color: var(--orange-400, #ff8a42); font-size: 13px; font-weight: 700; letter-spacing: .06em; }
.hx__title {
  margin: 0; font-size: clamp(2.125rem, 1.4rem + 3.4vw, 4.5rem); font-weight: var(--fw-black, 800);
  line-height: 1.08; letter-spacing: -0.035em; color: #fff;
}
.hx__line { display: block; overflow: hidden; padding-bottom: .06em; margin-bottom: -.06em; }
.hx__line > span { display: inline-block; }
.hx__title em {
  position: relative; display: inline-block; font-style: normal;
  color: var(--hx-a1);
  background: linear-gradient(100deg, var(--hx-a1) 0%, var(--hx-a2) 55%, #ffd0a8 70%, var(--hx-a2) 85%);
  background-size: 220% 100%; background-position: 100% 0;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  text-shadow: 0 0 28px rgb(242 106 27 / 0.28);
}
.hx__title em::after { /* 하이라이트 스윕 바 */
  content: ""; position: absolute; left: 0; right: 0; bottom: .02em; height: .1em; border-radius: 2px;
  background: linear-gradient(90deg, var(--hx-a1), var(--hx-a2));
  box-shadow: 0 0 14px rgb(242 106 27 / 0.7);
  transform-origin: left; transform: scaleX(1);
}
.hx__lead { margin: 0; font-size: var(--fs-sm, 15px); color: rgb(227 234 244 / 0.82); max-width: 36ch; line-height: 1.55; }

.hx__bottom { display: flex; flex-direction: column; gap: var(--sp-2, 8px); }
.hx__search {
  position: relative; width: 100%; min-height: 52px; border-radius: var(--r-pill, 999px);
  display: flex; align-items: center; gap: var(--sp-2, 8px); padding: 0 8px 0 var(--sp-4, 16px);
  background: rgb(255 255 255 / 0.96); color: var(--gray-500, #6b7280); font-weight: var(--fw-medium, 500); text-align: left;
  box-shadow: 0 0 0 1px rgb(255 154 77 / 0.25), 0 10px 30px -8px rgb(0 0 0 / 0.6), 0 0 40px -12px rgb(242 106 27 / 0.55);
  transition: box-shadow .2s ease, transform .2s ease;
}
.hx__search:hover { box-shadow: 0 0 0 1.5px rgb(255 154 77 / 0.7), 0 10px 30px -8px rgb(0 0 0 / 0.6), 0 0 48px -10px rgb(242 106 27 / 0.75); }
.hx__search svg { width: 22px; height: 22px; color: var(--navy-700, #1f4068); flex: none; }
.hx__search span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hx__kbd { display: none; flex: none; min-width: 28px; height: 28px; padding: 0 8px; border-radius: 8px; border: 1px solid var(--gray-300, #d1d5db); background: transparent; box-shadow: none; font: 600 12px/26px var(--hx-mono); color: var(--gray-500, #6b7280); text-align: center; }
.hx__actions { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2, 8px); }
.hx__actions .btn { padding: 0 var(--sp-3, 12px); }
.hx__cta { background: linear-gradient(135deg, var(--orange-600, #c2470c) 0%, var(--hx-a1) 100%); box-shadow: 0 8px 26px -10px rgb(242 106 27 / 0.9), inset 0 1px 0 rgb(255 255 255 / 0.18); }
.hx__ghost { backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); background: rgb(255 255 255 / 0.08); border-color: rgb(255 255 255 / 0.22); }
.hx__facts { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 0; padding: 0; list-style: none; }
.hx__facts li {
  display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border-radius: var(--r-pill, 999px);
  background: var(--hx-glass); border: 1px solid rgb(255 255 255 / 0.14);
  font-size: var(--fs-xs, 13px); font-weight: var(--fw-semibold, 600); color: rgb(255 255 255 / 0.9);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.hx__facts li::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--hx-a1); box-shadow: 0 0 8px var(--hx-a1); }

/* ---------- HUD (체결 사이클) ---------- */
.hx__hud {
  position: absolute; left: var(--gutter, 16px); right: calc(var(--gutter, 16px) + 68px); bottom: 12px; z-index: 2;
  display: flex; flex-direction: column; gap: 6px;
  padding: 8px 10px 9px; border-radius: 14px;
  background: var(--hx-glass); backdrop-filter: blur(12px) saturate(1.2); -webkit-backdrop-filter: blur(12px) saturate(1.2);
  border: 1px solid transparent;
  background-clip: padding-box;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.1), 0 12px 32px -14px rgb(0 0 0 / 0.8);
  font-family: var(--hx-mono);
  transform: translate3d(calc(var(--mx) * 8px), calc(var(--my) * 6px), 0);
  opacity: calc(1 - var(--out) * 1.2);
  pointer-events: none;
}
.hx__hud::before { /* 그라디언트 헤어라인 */
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
  background: linear-gradient(120deg, rgb(255 154 77 / 0.55), rgb(255 255 255 / 0.06) 40%, rgb(143 169 204 / 0.25));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
.hx__hud-head { display: none; justify-content: space-between; gap: 12px; font-size: 10px; letter-spacing: .16em; color: rgb(195 210 230 / 0.7); }
.hx__hud-state { color: var(--hx-a2); }
.hx__hud-body { display: flex; align-items: center; gap: 10px; }
.hx__ring { display: none; width: 56px; height: 56px; flex: none; transform: rotate(-90deg); fill: none; }
.hx__ring-track { stroke: rgb(255 255 255 / 0.12); stroke-width: 2; }
.hx__ring-prog { stroke: var(--hx-a1); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: calc(100 - var(--hx-p, 0) * 100); filter: drop-shadow(0 0 3px rgb(242 106 27 / 0.8)); }
.hx__ring-ticks path { stroke: rgb(255 255 255 / 0.4); stroke-width: 1.2; }
.hx__ring-dot { fill: rgb(255 255 255 / 0.2); transition: fill .3s; }
.hx[data-phase="lock"] .hx__ring-dot, .hx[data-phase="flow"] .hx__ring-dot { fill: var(--hx-a2); }
.hx__steps { flex: 1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 0; padding: 0; list-style: none; counter-reset: hxs; }
.hx__steps li {
  position: relative; display: flex; flex-direction: column; gap: 2px; padding: 4px 6px 4px 8px;
  border-left: 1.5px solid rgb(255 255 255 / 0.16); transition: border-color .3s, background-color .3s;
}
.hx__steps b { font-size: 10px; font-weight: 700; letter-spacing: .12em; color: rgb(195 210 230 / 0.65); transition: color .3s; }
.hx__steps span { font-family: var(--font-sans, sans-serif); font-size: 12px; font-weight: 600; color: rgb(255 255 255 / 0.62); white-space: nowrap; transition: color .3s; }
.hx__steps li.is-done { border-left-color: rgb(255 154 77 / 0.45); }
.hx__steps li.is-on { border-left-color: var(--hx-a1); background: linear-gradient(90deg, rgb(242 106 27 / 0.2), transparent); }
.hx__steps li.is-on b { color: var(--hx-a2); text-shadow: 0 0 10px rgb(242 106 27 / 0.7); }
.hx__steps li.is-on span { color: #fff; }
.hx__hud-bar { position: relative; display: block; height: 2px; border-radius: 2px; background: rgb(255 255 255 / 0.1); overflow: hidden; }
.hx__hud-bar > i { position: absolute; inset: 0; transform-origin: left; transform: scaleX(var(--hx-p, 0)); background: linear-gradient(90deg, var(--hx-a1), var(--hx-a2)); box-shadow: 0 0 8px var(--hx-a1); }
/* 모션 꺼짐: 3단계를 모두 같은 강도로 고정 표시 */
.hx[data-phase="static"] .hx__steps li { border-left-color: rgb(255 154 77 / 0.6); }
.hx[data-phase="static"] .hx__steps span { color: #fff; }
.hx[data-phase="static"] .hx__hud-bar { display: none; }

/* ---------- 일시정지 / 스크롤 큐 ---------- */
.hx__pause {
  position: absolute; z-index: 3; right: calc(var(--gutter, 16px) - 2px); bottom: 74px;
  width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%;
  background: transparent; color: #fff; cursor: pointer;
}
.hx__pause::before { content: ""; position: absolute; inset: 7px; border-radius: 50%; background: var(--hx-glass); border: 1px solid rgb(255 255 255 / 0.22); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: border-color .2s; }
.hx__pause:hover::before { border-color: rgb(255 154 77 / 0.7); }
.hx__pause svg { position: relative; width: 14px; height: 14px; fill: currentColor; }
.hx__pause .hx__ico-play, .hx__pause[aria-pressed="true"] .hx__ico-pause { display: none; }
.hx__pause[aria-pressed="true"] .hx__ico-play { display: block; }
.hx__pause:focus-visible { outline: 2px solid var(--hx-a2); outline-offset: 0; border-radius: 50%; }
.hx__pause[hidden] { display: none; }

.hx__cue { display: none; }

/* ---------- 입장 모션 ---------- */
@keyframes hx-rise { from { transform: translateY(105%); } to { transform: none; } }
@keyframes hx-fade { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes hx-shine { from { background-position: 100% 0; } to { background-position: 0 0; } }
@keyframes hx-sweep { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes hx-dash { to { stroke-dashoffset: 0; } }
@keyframes hx-wheel { 0% { opacity: 0; transform: translateY(-3px); } 30% { opacity: 1; } 100% { opacity: 0; transform: translateY(7px); } }
@keyframes hx-in-stage { from { opacity: 0; transform: scale(1.04); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: no-preference) {
  .hx__line > span { animation: hx-rise .95s var(--ease-out, cubic-bezier(.22,1,.36,1)) both; animation-delay: calc(120ms + var(--i, 0) * 110ms); }
  .hx-in { animation: hx-fade .8s var(--ease-out, cubic-bezier(.22,1,.36,1)) both; animation-delay: calc(80ms + var(--d, 0) * 80ms); }
  .hx__eyebrow.hx-in { animation-delay: 40ms; }
  .hx__title em { animation: hx-shine 1.4s ease-out .75s both; }
  .hx__title em::after { animation: hx-sweep .7s var(--ease-out, ease) .7s both; }
  .hx__flow-line { animation: hx-dash 5.5s linear infinite; }
  .hx__flow-line--2 { animation-duration: 7.5s; animation-delay: -2s; }
  .hx__flow-line--3 { animation-duration: 4s; animation-delay: -1.2s; }
  .hx__hud { animation: hx-fade .8s var(--ease-out, ease) .9s both; }
  .hx__frame { animation: hx-in-stage 1.2s var(--ease-out, ease) .3s both; }
  .hx.is-paused .hx__flow-line, .hx.is-paused .hx__mouse i { animation-play-state: paused; }
}
@media (prefers-reduced-motion: reduce) {
  .hx__media, .hx__frame, .hx__hud, .hx__inner { transform: none !important; }
  .hx__inner { opacity: 1 !important; }
  .hx__flow-line { stroke-dashoffset: 0; stroke-dasharray: none; opacity: .35; }
}

/* ---------- 작은 폰 높이 보정 ---------- */
@media (min-width: 380px) and (max-width: 767.98px) {
  .hx__facts { flex-wrap: nowrap; gap: 4px; }
  .hx__facts li { height: 26px; padding: 0 8px; font-size: 12px; gap: 5px; white-space: nowrap; letter-spacing: -0.01em; }
}
@media (max-width: 767.98px) and (max-height: 700px) {
  .hx__lead { display: none; }
  .hx__frame { display: none; }
}
@media (max-width: 359.98px) {
  .hx__actions { grid-template-columns: 1fr; }
}

/* 세로 태블릿(768–1023 portrait): 모바일 배치 유지, 피사체 크기만 제한 */
@media (min-width: 600px) and (max-width: 1023.98px) and (orientation: portrait) {
  .hx__media { left: auto; width: min(100%, 680px); }
  .hx__copy, .hx__bottom { max-width: 560px; }
  .hx__hud { max-width: 440px; }
  .hx__frame { left: auto; right: 8%; width: min(70%, 540px); }
}

/* =========================================================================
   md+ : 데스크톱 영상(16:9), 피사체 오른쪽 60% / 왼쪽 텍스트
   ========================================================================= */
@media (min-width: 768px) and (orientation: landscape), (min-width: 1024px) {
  .hx { min-height: min(calc(100vh - var(--header-h, 72px)), 860px); min-height: clamp(600px, calc(100svh - var(--header-h, 72px)), 860px); }
  .hx { background: var(--hx-bg); }
  .hx__media { inset: 0; aspect-ratio: auto; -webkit-mask-image: none; mask-image: none; }
  .hx__poster img, .hx__video { object-position: 100% 50%; }
  .hx__shade {
    background:
      linear-gradient(90deg, var(--hx-bg) 0%, rgb(6 11 20 / 0.86) 26%, rgb(6 11 20 / 0.35) 46%, rgb(6 11 20 / 0) 62%),
      linear-gradient(0deg, rgb(6 11 20 / 0.85) 0%, rgb(6 11 20 / 0) 26%),
      linear-gradient(180deg, rgb(6 11 20 / 0.45) 0%, rgb(6 11 20 / 0) 18%),
      radial-gradient(110% 100% at 70% 50%, transparent 55%, rgb(3 6 12 / 0.6) 100%);
  }
  .hx__grid { -webkit-mask-image: radial-gradient(70% 80% at 22% 45%, #000 0%, transparent 72%); mask-image: radial-gradient(70% 80% at 22% 45%, #000 0%, transparent 72%); }
  .hx__frame { left: 46%; right: calc(var(--gutter, 24px) + 1%); top: 13%; bottom: 252px; height: auto; }
  .hx__tag--tl { display: block; }
  .hx__corner { width: 26px; height: 26px; }
  .hx__tag { font-size: 11px; }
  .hx__flow { height: 160px; }

  .hx__inner { justify-content: center; gap: var(--sp-6, 24px); padding-block: var(--sp-12, 48px) var(--sp-24, 96px); max-width: calc(var(--container, 1240px) + var(--gutter, 24px) * 2); margin-inline: auto; }
  .hx__copy, .hx__bottom { max-width: 560px; }
  .hx__copy { gap: var(--sp-4, 16px); }
  .hx__eyebrow { font-size: 12px; }
  .hx__lead { font-size: var(--fs-lead, 18px); }
  .hx__bottom { gap: var(--sp-3, 12px); }
  .hx__search { max-width: 520px; }
  .hx__kbd { display: inline-block; }
  .hx__actions { display: flex; flex-wrap: wrap; }
  .hx__actions .btn { padding: 0 var(--sp-6, 24px); }

  .hx__hud {
    left: auto; right: calc(var(--gutter, 24px) + 1%); bottom: 100px; width: 380px; padding: 12px 14px 12px; gap: 10px; border-radius: 18px;
  }
  .hx__hud-head { display: flex; }
  .hx__ring { display: block; }
  .hx__steps { gap: 4px; }
  .hx__pause { bottom: 138px; right: calc(var(--gutter, 24px) + 1% + 380px + 10px); }

  .hx__cue {
    position: absolute; z-index: 2; left: 50%; bottom: 22px; transform: translateX(-50%);
    display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 12px;
    color: rgb(195 210 230 / 0.75); text-decoration: none; opacity: calc(1 - var(--out) * 3);
  }
  .hx__cue:hover { color: #fff; }
  .hx__cue:focus-visible { outline: 2px solid var(--hx-a2); outline-offset: 2px; }
  .hx__mouse { position: relative; width: 22px; height: 34px; border: 1.5px solid currentColor; border-radius: 12px; }
  .hx__mouse i { position: absolute; left: 50%; top: 7px; width: 3px; height: 7px; margin-left: -1.5px; border-radius: 2px; background: var(--hx-a2); box-shadow: 0 0 6px var(--hx-a1); }
  .hx__cue-label { font: 600 10px/1 var(--hx-mono); letter-spacing: .2em; }
}
@media (min-width: 768px) and (orientation: landscape) and (prefers-reduced-motion: no-preference), (min-width: 1024px) and (prefers-reduced-motion: no-preference) {
  .hx__mouse i { animation: hx-wheel 1.8s ease-in-out infinite; }
}
@media (min-width: 768px) and (max-width: 1023.98px) and (orientation: landscape) {
  .hx__frame { left: 50%; }
  .hx__hud { width: 340px; }
  .hx__pause { right: calc(var(--gutter, 24px) + 1% + 340px + 10px); }
  .hx__cue { display: none; }
}
@media (min-width: 1280px) {
  .hx__frame { left: 44%; }
}
/* 폴백 사진(hero-wide)은 피사체가 화면 전체 → 왼쪽 쉐이드를 조금 더 */
@media (min-width: 768px) and (orientation: landscape), (min-width: 1024px) {
  .hx.is-fallback .hx__shade { background:
      linear-gradient(90deg, var(--hx-bg) 0%, rgb(6 11 20 / 0.9) 30%, rgb(6 11 20 / 0.5) 52%, rgb(6 11 20 / 0.1) 72%),
      linear-gradient(0deg, rgb(6 11 20 / 0.85) 0%, rgb(6 11 20 / 0) 30%); }
  .hx__poster img { object-position: 100% 50%; }
}

/* 히어로 → 3D 무대(.seq) 연결: 기존 경계 그라디언트를 히어로 바닥색에 맞춤 */
.hx + .seq::before { background: linear-gradient(to bottom, var(--hx-bg, #060b14), var(--navy-900, #0e1c30)); top: 0; height: 48px; }