@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;700&family=Montserrat:wght@200;400&display=swap');

* { margin: 0; padding: 0; box-sizing: border-box; }
body { 
  width: 100vw; height: 100vh; overflow: hidden; 
  font-family: 'Montserrat', sans-serif; 
  background: #000;
  user-select: none;
}

/* 하단 테마 변경 네비게이션 */
.nav { 
  position: absolute; bottom: 40px; left: 50%; transform: translateX(-50%); 
  z-index: 100; display: flex; gap: 30px; 
  background: rgba(255, 255, 255, 0.05); padding: 15px 30px; 
  border-radius: 40px; backdrop-filter: blur(10px); 
  border: 1px solid rgba(255,255,255,0.1);
  transition: 0.3s;
}
.nav a { 
  text-decoration: none;
  background: none; border: none; color: white; font-size: 14px; 
  cursor: pointer; opacity: 0.4; transition: 0.4s; font-family: 'Montserrat', sans-serif;
}
.nav a.active, .nav a:hover { 
  opacity: 1; text-shadow: 0 0 15px rgba(255,255,255,0.8); 
}

/* 컨테이너 공통 */
.theme-container { 
  position: absolute; top: 0; left: 0; width: 100%; height: 100%; 
  display: flex; justify-content: center; align-items: center; flex-direction: column; 
}

/* 반응형 (Responsive) 미디어 쿼리 - 모바일/태블릿 대응 */
@media (max-width: 768px) {
  /* 네비게이션 크기 축소 */
  .nav {
    gap: 15px;
    padding: 10px 20px;
    bottom: 25px;
    width: 85%;
    justify-content: center;
  }
  .nav a { font-size: 12px; }
}