/* 이메일 말풍선 */
.email-popover{
  position: absolute;
  right: 0;
  bottom: 56px;
  background: #343b45;
  color: #e6ebf2;
  padding: 12px 14px;
  border-radius: 8px;
  display: none;
  align-items: center;
  gap: 14px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.35);
  z-index: 30;
  min-width: 260px;
}

.email-popover.show{ display: flex; animation: pop .12s ease-out; }

@keyframes pop {
  from { transform: translateY(6px); opacity: .6; }
  to   { transform: translateY(0);  opacity: 1; }
}

.email-popover .email-text{
  font-size: 16px;
  letter-spacing: .2px;
  color: #dfe5ef;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.email-popover .sep{
  width: 1px; height: 20px; background: #576072; opacity: .9;
}

.email-popover .copy-btn{
  background: transparent; border: 0; color: #fff; 
  font-weight: 800; letter-spacing: .6px; cursor: pointer;
  padding: 6px 0;
}

.email-popover .caret{
  position: absolute; right: 24px; bottom: -8px;
  width: 0; height: 0; border-left: 8px solid transparent;
  border-right: 8px solid transparent; border-top: 8px solid #343b45;
}

/* SNS 공통 아이콘 버튼 */
.icon-btn{
  width: 44px; height: 44px; border-radius: 999px;
  background: #2b313a; border: 0; display: inline-flex;
  align-items: center; justify-content: center;
  margin-left: 14px; cursor: pointer;
  transition: transform .1s ease, background .15s ease;
}
.icon-btn:hover{ transform: translateY(-1px); background: #343b45; }

.game-card {
  opacity: 0;
  transform: translateX(0); /* 기본값 */
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

/* 처음에는 화면 밖에 살짝 숨겨두기 */
.game-card.from-left {
  transform: translateX(-40px);
}

.game-card.from-right {
  transform: translateX(40px);
}

/* 화면에 들어올 때 붙는 클래스 */
.game-card.show {
  opacity: 1;
  transform: translateX(0);
}
/* Hero 이미지 전환 + 배경 레이아웃 */
.hero {
  position: relative;              /* 자식 absolute 기준을 Hero로 고정 */
  min-height: 100vh;               /* 화면 높이 꽉 채우기 */
  transition: background-image 0.6s ease-in-out;
}

/* Hero 배경 슬라이드 */
.hero-slideshow {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 0;                      /* 배경은 뒤로 */
}

.hero-slideshow .slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 1.5s ease-in-out;
}

.hero-slideshow .slide.active {
  opacity: 1;
}

/* ───────── Store Buttons 공통 (PC 기본) ───────── */
.store-buttons {
  position: absolute;
  bottom: 2%;               /* PC에서 화면 하단 쪽에 고정 */
  left: 50%;
  transform: translateX(-50%);
  display: flex;            /* 가로 정렬 */
  flex-direction: row;      /* PC: 옆으로 나란히 */
  gap: 14px;
  z-index: 5;               /* 배경 위, 메뉴 아래 */
}

.store-buttons img {
  height: 44px;             /* PC에서 보기 좋은 크기 */
  width: auto;
  display: block;
  opacity: 0.95;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.store-buttons img:hover {
  transform: scale(1.05);
  opacity: 1;
}

/* ───────── PC 기본 (좌우 가로 배치) ───────── */
.store-buttons {
  flex-direction: row;
}

/* ───────── 모바일 전용 (세로 배치) ───────── */
@media (max-width: 768px) {
  .store-buttons {
    flex-direction: column;
  }
}

  .store-buttons img {
    height: 40px;           /* 모바일은 조금 더 작게 */
  }
}