:root{
  --nav-bg: rgba(20, 26, 40, 0.42);
  --nav-border: rgba(255,255,255,0.18);
  --nav-text: #eaf2ff;
  --chip-bg: rgba(255,255,255,0.06);
  --chip-border: rgba(255,255,255,0.22);
  --glow: 0 0 12px rgba(255, 240, 160, .35), 0 0 24px rgba(255, 210, 120, .18);
}

.nav {
  position: fixed; z-index: 1; display: flex; gap: .5rem;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--nav-border);
  background: var(--nav-bg);
  border-radius: 12px; padding: .5rem;
  box-shadow: 0 6px 24px rgba(0,0,0,.25);
  color: var(--nav-text); font-family: system-ui, -apple-system, "Noto Sans KR", sans-serif;
}

/* PC = 수정함 */
@media (min-width: 821px) {
  .nav {
    /* ▼ PC에서 버튼 위치 조정 (왼쪽/위 기준) */
    left:   max(84px, env(safe-area-inset-left));   /* ← X축 위치(왼쪽 여백) */
    top:    max(152px, env(safe-area-inset-top));    /* ← Y축 위치(상단 여백) */
    right:  auto;                                    /* 오른쪽 기준 해제 */
    bottom: auto !important;                         /* 모바일 규칙 덮어쓰기 */
  }
}

/* Mobile = 상단바 왼편 고정(가로 스크롤 칩) */
@media (max-width: 820px), (max-aspect-ratio: 10/16) {
  .nav {
    /* ▼ 모바일 위치: 왼쪽 + 하단 고정 (top은 반드시 해제) */
    left:   max(4px,  env(safe-area-inset-left));
    right:  auto;
    top:    auto;           /* 상단값 제거 */
    bottom: 677px;          /* 하단 여백 */

    /* 스크롤 정책: 가로만, 세로 숨김 (세로로 길어지는 투명 패널 방지) */
    overflow-x: auto;
    overflow-y: hidden;

    /* 컨테이너는 내용 너비만큼만 */
    display: inline-flex;
  }
}


.nav__list { display:flex; gap:.5rem; align-items:center; }
.nav__btn {
  position: relative; display:inline-flex; align-items:center; justify-content:center;
  height: 36px; padding: 0 .9rem; border-radius: 999px;
  border: 1px solid var(--chip-border); background: var(--chip-bg); color: var(--nav-text);
  text-decoration:none; font-weight:600; letter-spacing:.2px; outline:0; cursor:pointer;
  transition: transform .25s ease, background .25s ease, border-color .25s ease, box-shadow .25s ease;
  box-shadow: var(--glow);
  overflow: hidden; /* 내부 오로라 애니메이션 클립 */
}
/* 모바일 손가락 타깃 키우기 */
@media (max-width: 820px), (max-aspect-ratio: 10/16) {
  .nav__btn {
    height: 20px;   /* 기존 40px → 절반 */
    padding: 0 .5rem; /* 좌우 여백도 절반 */
    font-size: 0.7rem; /* 글씨도 줄임 */
  }
}

/* 은은한 맥동 */
@keyframes glowPulse {
  0%,100% { box-shadow: 0 0 6px rgba(255,240,160,.18), 0 0 16px rgba(255,210,120,.10); }
  50%     { box-shadow: 0 0 10px rgba(255,240,160,.35), 0 0 30px rgba(255,210,120,.18); }
}
.nav__btn { animation: glowPulse 3.2s ease-in-out infinite; }

/* 호버/포커스 업리프트 */
.nav__btn:hover,
.nav__btn:focus-visible { transform: translateY(-2px) scale(1.05); border-color: rgba(255,255,255,.65);
  box-shadow: 0 0 20px rgba(180,240,255,.4), 0 0 40px rgba(120,210,255,.25);
}

/* 클릭 시 유성 트레일 */
.nav__btn:active::after {
  content:'';
  position:absolute; inset:-2px; border-radius:inherit; pointer-events:none;
  background:
   radial-gradient(8px 8px at left center, rgba(255,240,180,.9), transparent 55%) ,
   conic-gradient(from 0deg, rgba(255,240,160,.6), rgba(255,210,120,.0) 45%);
  filter: blur(.5px);
  animation: comet .5s ease-out 1;
}

/* 버튼 내부 오로라(그라데이션 흐름) */
.nav__btn::after {
  content:''; position:absolute; inset:0; border-radius:inherit;
  background: linear-gradient(120deg,
    rgba(80,180,255,0.25) 0%, rgba(255,160,220,0.18) 30%,
    rgba(180,255,200,0.22) 60%, rgba(255,240,160,0.2) 100%);
  background-size: 300% 300%;
  animation: aurora 8s ease-in-out infinite;
  mix-blend-mode: screen; pointer-events:none;
}
@keyframes aurora {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* 클릭 시 파티클 번짐 */
.nav__btn:active::before {
  content:''; position:absolute; inset:-10%; border-radius:inherit;
  background: radial-gradient(circle, rgba(255,255,200,.7) 0%, transparent 60%);
  animation: burst .4s ease-out forwards;
}
@keyframes burst {
  from { transform: scale(0.2); opacity: .9; }
  to   { transform: scale(2.2); opacity: 0; }
}
@keyframes comet {
  from { clip-path: inset(0 100% 0 0); transform: translateX(-6%); opacity:.95; }
  to   { clip-path: inset(0 0 0 0);    transform: translateX(6%);  opacity:0; }
}

/* 버튼 안에 작은 반짝임 (미세한 노이즈) */
.nav__btn::before {
  content:''; position:absolute; inset:0; pointer-events:none; border-radius:inherit;
  background-image:
    radial-gradient(2px 2px at 20% 60%, rgba(255,255,220,.8), transparent 60%),
    radial-gradient(1.5px 1.5px at 70% 30%, rgba(255,250,200,.7), transparent 60%),
    radial-gradient(2px 2px at 40% 20%, rgba(255,230,160,.6), transparent 60%);
  opacity:.35; mix-blend-mode: screen; filter: blur(.2px);
  animation: twinkle 2.8s ease-in-out infinite;
}
@keyframes twinkle {
  0%,100% { opacity:.22; transform: translateY(0); }
  50% { opacity:.42; transform: translateY(-.5px); }
}

/* 접근성: 모션 최소화 */
@media (prefers-reduced-motion: reduce) {
  .nav__btn, .nav__btn::before { animation: none !important; }
}