<template>
  <router-link to="/" class="home-button">
    <i class="fa fa-home" style="margin-right: 5px;"></i>나가기
  </router-link>
</template>

<script>
export default {
  name: "HomeButton",
};
</script>

<style scoped>
.home-button {
  position: fixed;
  top: 20px;
  right: 20px; /* 드디어 진짜 우측으로! */
  z-index: 1000;
  
  /* 디자인 요소 */
  padding: 8px 16px;
  background-color: rgba(255, 64, 129, 0.7); /* 평소엔 70% 투명도로 슬라이드 방해 최소화 */
  color: white;
  border-radius: 50px; /* 알약 모양으로 동글동글하게 */
  font-size: 14px;
  font-weight: bold;
  text-decoration: none;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* 은은한 그림자 */
  
  /* 마우스 오버 애니메이션 준비 */
  transition: all 0.3s ease; 
}

.home-button:hover {
  background-color: rgba(255, 64, 129, 1); /* 마우스 올리면 100% 진해짐 */
  transform: translateY(-2px); /* 살짝 위로 뽁! 떠오르는 효과 */
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
}
</style>