/* ══════════════════════════════════════════
   SHARED NAV & FOOTER — landing/shared.css
   ══════════════════════════════════════════ */

@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.css');

/* ════════════════════════════════════
   TOP NAV
   ════════════════════════════════════ */
nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  /* Aurora-tinted glass — 좌측 보라, 우측 시안 subtle tint */
  background:
    linear-gradient(90deg,
      rgba(124,58,237,.07) 0%,
      transparent 28%,
      transparent 72%,
      rgba(0,229,255,.05) 100%),
    rgba(0,0,0,0.90);
  -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px);
  border-bottom: none;
}

/* ── 그라디언트 하단 경계선 ── */
nav::before {
  content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(124,58,237,.55) 22%,
    rgba(0,229,255,.70)  50%,
    rgba(124,58,237,.45) 78%,
    transparent 100%
  );
  pointer-events: none;
}

/* ── 경계선 위 이동하는 빛줄기 ── */
nav::after {
  content: ''; position: absolute; bottom: 0; left: 0;
  width: 160px; height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.95) 50%, transparent 100%);
  pointer-events: none;
  animation: nav-travel 9s ease-in-out infinite;
}
@keyframes nav-travel {
  0%   { left: -15%; opacity: 0; }
  8%   { opacity: 1; }
  92%  { opacity: 1; }
  100% { left: 115%; opacity: 0; }
}

/* Inner layout */
nav .inner {
  max-width: 1200px; margin: 0 auto; padding: 0 32px;
  display: flex; align-items: center; justify-content: space-between; height: 58px;
  gap: 16px;
}

/* ════════════════════════════════════
   LOGO
   ════════════════════════════════════ */
nav .logo {
  font-family: var(--heading, 'Pretendard Variable', Pretendard, sans-serif);
  font-size: 16px; font-weight: 800; color: var(--text-1);
  text-decoration: none; display: flex; align-items: center; gap: 10px;
  letter-spacing: 0.08em; text-transform: uppercase;
  flex-shrink: 0;
}

/* X 배지 — 색상 펄스 + 반짝임 sweep */
nav .logo .x {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 5px;
  font-size: 13px; font-weight: 800; color: #000;
  position: relative; overflow: hidden;
  animation: badge-cycle 6s ease-in-out infinite;
}
/* 반짝임 sweep */
nav .logo .x::after {
  content: '';
  position: absolute; top: 0; left: -80%; width: 55%; height: 100%;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.7) 50%, transparent 100%);
  animation: x-scan 6s ease-in-out infinite;
  pointer-events: none;
}
@keyframes badge-cycle {
  0%, 100% {
    background: #00e5ff;
    box-shadow: 0 0 10px rgba(0,229,255,.35);
  }
  45% {
    background: #a78bfa;
    box-shadow: 0 0 0 2px rgba(124,58,237,.22), 0 0 14px rgba(124,58,237,.45);
  }
  55% {
    background: #a78bfa;
    box-shadow: 0 0 10px rgba(124,58,237,.35);
  }
}
@keyframes x-scan {
  0%   { left: -80%; opacity: 0; }
  12%  { opacity: 1; }
  45%  { left: 190%; opacity: 0; }
  100% { left: 190%; }
}

/* ════════════════════════════════════
   NAV PAGES
   ════════════════════════════════════ */
nav .nav-pages { display: flex; gap: 2px; list-style: none; }
nav .nav-pages li a {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 6px 12px; border-radius: 3px;
  color: var(--text-4, #585858);
  font-family: var(--heading, 'Pretendard Variable', Pretendard, sans-serif);
  font-size: 13px; font-weight: 500; letter-spacing: 0.01em; text-transform: none;
  text-decoration: none; transition: color 0.2s, background 0.2s;
}
nav .nav-pages li a .page-dot {
  width: 5px; height: 5px; border-radius: 50%; flex-shrink: 0;
  transition: opacity 0.2s;
}
nav .nav-pages li a:hover  { color: var(--text-1, #FAFAFA); background: rgba(255,255,255,0.04); }
nav .nav-pages li a.current { color: var(--text-1, #FAFAFA); background: rgba(255,255,255,0.06); }

/* ════════════════════════════════════
   RIGHT GROUP: 상태칩 + CTA
   ════════════════════════════════════ */
.nav-right {
  display: flex; align-items: center; gap: 12px; flex-shrink: 0;
}

/* Runtime 상태 칩 */
.nav-runtime {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 11px; border-radius: 20px;
  border: 1px solid rgba(0,229,255,.20);
  background: rgba(0,229,255,.05);
  color: rgba(0,229,255,.65);
  font-family: var(--heading, 'Pretendard Variable', Pretendard, sans-serif);
  font-size: 10px; font-weight: 700; letter-spacing: 0.10em; text-transform: uppercase;
  white-space: nowrap; cursor: default;
  transition: border-color .2s, background .2s;
}
.nav-runtime:hover {
  border-color: rgba(0,229,255,.40);
  background: rgba(0,229,255,.09);
  color: rgba(0,229,255,.9);
}
.nav-runtime-dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: #00e5ff;
  box-shadow: 0 0 6px rgba(0,229,255,.9);
  flex-shrink: 0;
  animation: runtime-pulse 2.4s ease-in-out infinite;
}
@keyframes runtime-pulse {
  0%, 100% { opacity: 1;   box-shadow: 0 0 6px rgba(0,229,255,.9); }
  50%       { opacity: .35; box-shadow: 0 0 2px rgba(0,229,255,.3); }
}

/* CTA — 그라디언트 보더 */
nav .nav-cta {
  padding: 7px 20px; border-radius: 4px;
  border: 1px solid transparent;
  background:
    linear-gradient(rgba(10,10,10,.8), rgba(10,10,10,.8)) padding-box,
    linear-gradient(90deg, #7c3aed, #00e5ff) border-box;
  color: var(--text-1, #FAFAFA);
  font-family: var(--heading, 'Pretendard Variable', Pretendard, sans-serif);
  font-size: 12px; font-weight: 700; letter-spacing: 0.05em;
  text-decoration: none; text-transform: uppercase;
  transition: background .25s, box-shadow .25s;
}
nav .nav-cta:hover {
  background:
    linear-gradient(rgba(124,58,237,.18), rgba(0,229,255,.13)) padding-box,
    linear-gradient(90deg, #7c3aed, #00e5ff) border-box;
  color: #fff;
  box-shadow: 0 0 20px rgba(0,229,255,.18), 0 0 8px rgba(124,58,237,.15);
}

/* ════════════════════════════════════
   DROPDOWN
   ════════════════════════════════════ */
.has-dropdown { position: relative; }
.has-dropdown > a { cursor: default; }
.has-dropdown .dropdown {
  visibility: hidden; opacity: 0;
  position: absolute; top: calc(100% + 8px); right: -8px;
  min-width: 200px;
  background: rgba(8,8,8,0.97);
  -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 6px; padding: 6px;
  box-shadow: 0 16px 48px rgba(0,0,0,.85), 0 0 0 1px rgba(124,58,237,.08);
  list-style: none;
  transform: translateY(-6px) scale(0.98);
  transition: opacity 0.18s, transform 0.18s, visibility 0.18s;
}
.has-dropdown .dropdown::before {
  content: ''; position: absolute; top: -12px; left: 0; right: 0; height: 12px;
}
.has-dropdown:hover .dropdown {
  visibility: visible; opacity: 1; transform: translateY(0) scale(1);
}
.dropdown li a {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 12px; border-radius: 3px;
  color: var(--text-2, #C0C0C0);
  font-family: var(--heading, 'Pretendard Variable', Pretendard, sans-serif);
  font-size: 13px; font-weight: 500; letter-spacing: 0.01em; text-transform: none;
  text-decoration: none; transition: color 0.15s, background 0.15s;
}
.dropdown li a .page-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.dropdown li a:hover   { color: var(--text-1, #FAFAFA); background: rgba(255,255,255,0.05); }
.dropdown li a.current { color: var(--text-1, #FAFAFA); background: rgba(0,229,255,0.08); }
.has-dropdown > a .chevron { transition: transform 0.2s; }
.has-dropdown:hover > a .chevron { transform: rotate(180deg); }

/* ════════════════════════════════════
   FOOTER
   ════════════════════════════════════ */
footer {
  border-top: 1px solid var(--border, #1A1A1A);
  padding: 40px 0; text-align: center;
}
footer p {
  font-size: 11px; color: var(--text-4, #444);
  font-family: var(--heading, 'Pretendard Variable', Pretendard, sans-serif);
  letter-spacing: 0.05em;
}

/* ════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════ */
@media (max-width: 900px) {
  nav .nav-pages { display: none; }
  .nav-runtime   { display: none; }
  .nav-right      { gap: 8px; }
  nav .nav-cta   { margin-left: auto; }
}
@media (prefers-reduced-motion: reduce) {
  nav::after { animation: none !important; }
  nav .logo .x,
  nav .logo .x::after { animation: none !important; background: var(--accent, #00e5ff) !important; }
  .nav-runtime-dot    { animation: none !important; }
}