/* =========================================================
   메인 히어로 — 문구·버튼은 index.html 정적 HTML(바로 표시),
   오른쪽 3D 띠만 js/hero.bundle.js(React)가 .nkh-3d 안에 그린다.
   .nk-hero--react 가 붙은 히어로에서만 기존 .nk-hero(main.css)를 덮어쓴다.
   ========================================================= */
.nk-hero--react {
  display: block;
  height: 820px;
  padding: 0;
  text-align: left;
  background: #030312;
}

.nkh {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background:
    radial-gradient(900px 600px at 78% 45%, rgba(34, 91, 225, 0.16), transparent 70%),
    #030312;
}

/* ---------- 3D 띠 (React가 이 안에만 그림) ---------- */
.nkh-3d {
  position: absolute;
  inset: 0;
}
/* 3D가 준비되기 전 보여주는 흐린 미리보기 이미지(46KB).
   느린 인터넷에서도 띠 자리가 비어 보이지 않고, 3D가 뜨면 선명해지며 자연스럽게 바뀜 */
.nkh-3d::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("../assets/hero-helix-poster.webp") right center / auto 100% no-repeat;
  filter: blur(6px);
  opacity: 0.85;
  transition: opacity 0.8s ease;
  pointer-events: none;
}
.nkh-3d:has(.nkh-helix.is-ready)::before { opacity: 0; }
.nkh-helix {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.6s ease;
}
.nkh-helix.is-ready { opacity: 1; }
.nkh-helix canvas { display: block; width: 100%; height: 100%; }
.nkh-helix--fallback {
  opacity: 1;
  background: radial-gradient(600px 500px at 80% 50%, rgba(40, 120, 230, 0.35), transparent 70%);
}
/* 왼쪽 글자 영역 가독성용 그림자 */
.nkh-shade {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(3, 3, 18, 0.92) 0%, rgba(3, 3, 18, 0.6) 32%, transparent 58%),
    linear-gradient(0deg, rgba(3, 3, 18, 0.8) 0%, transparent 22%);
}

/* ---------- 문구 ---------- */
.nkh-container {
  position: relative;
  z-index: 1;
  height: 100%;
  max-width: var(--nk-content-max-width, 1280px);
  margin: 0 auto;
  padding: 0 var(--nk-space-24);
  display: flex;
  align-items: center;
  box-sizing: border-box;
}
.nkh-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: 600px;
}
.nkh-icon {
  width: 104px;
  height: 104px;
  border-radius: 26px;
  display: grid;
  place-items: center;
  margin-bottom: 36px;
  background:
    radial-gradient(circle at 50% 40%, rgba(90, 170, 255, 0.35), transparent 70%),
    linear-gradient(160deg, #1b2c55 0%, #0b1330 100%);
  border: 1.5px solid rgba(130, 190, 255, 0.45);
  box-shadow:
    inset 0 0 18px rgba(120, 190, 255, 0.35),
    0 0 40px rgba(34, 91, 225, 0.35);
}
.nkh-icon img { width: 64%; height: 64%; object-fit: contain; filter: drop-shadow(0 4px 10px rgba(0, 20, 80, 0.6)); }

.nkh-title {
  margin: 0;
  font-family: var(--nk-font-family);
  font-weight: 700;
  font-size: clamp(38px, 4.6vw, 64px);
  line-height: 1.15;
  letter-spacing: -0.03em;
  word-break: keep-all;
  background: linear-gradient(180deg, #ffffff 0%, #c9d3e6 100%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}
.nkh-title span { display: block; }
.nkh-desc {
  margin: 28px 0 0;
  font: var(--nk-text-p18-m);
  font-size: 19px;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.68);
  word-break: keep-all;
}
.nkh-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 44px;
}
.nkh-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 52px;
  padding: 0 26px;
  border-radius: 10px;
  font-family: var(--nk-font-family);
  font-size: 17px;
  font-weight: 600;
  text-decoration: none;
  transition: transform 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}
.nkh-btn:hover { transform: translateY(-2px); }
.nkh-btn--primary {
  color: #fff;
  background: var(--nk-color-primary);
  box-shadow: 0 10px 30px rgba(34, 91, 225, 0.45);
}
.nkh-btn--primary:hover { background: var(--nk-color-primary-hover); }
.nkh-btn--ghost {
  color: rgba(255, 255, 255, 0.85);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.18);
}
.nkh-btn--ghost:hover { border-color: rgba(255, 255, 255, 0.4); }

/* ---------- 반응형 ---------- */
@media (max-width: 768px) {
  .nk-hero--react { height: 720px; }
  .nkh-3d::before { background-position: right top; background-size: auto 62%; }
  .nkh-container { align-items: flex-end; padding-bottom: 64px; }
  .nkh-shade {
    background: linear-gradient(0deg, rgba(3, 3, 18, 0.95) 0%, rgba(3, 3, 18, 0.75) 45%, rgba(3, 3, 18, 0.1) 80%);
  }
  .nkh-icon { width: 76px; height: 76px; border-radius: 20px; margin-bottom: 24px; }
  .nkh-title { font-size: 32px; }
  .nkh-desc { font-size: 15px; margin-top: 18px; }
  .nkh-actions { margin-top: 32px; width: 100%; }
  .nkh-btn { flex: 1 1 100%; justify-content: center; }
}

/* ---------- 등장 모션 (CSS만, 라이브러리 없음) ---------- */
.nkh-in {
  animation: nkh-fade-up 0.8s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes nkh-fade-up {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .nkh-in { animation: none; }
  .nkh-helix { transition: none; }
}