/* 바다 탐험대 페이지 꾸미기 */

body {
  font-family: "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  background: linear-gradient(180deg, #7fdbff, #21a1d8, #0b4f8a);
  min-height: 100vh;
  margin: 0;
  padding: 20px;
  text-align: center;
  overflow-x: hidden;
}

.돌아가기 {
  text-align: left;
}

.돌아가기 a {
  color: #ffffff;
  font-size: 18px;
  font-weight: bold;
  text-decoration: none;
  background: rgba(0, 0, 0, 0.2);
  padding: 8px 14px;
  border-radius: 999px;
}

h1 {
  color: #ffffff;
  font-size: 40px;
  text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.25);
}

.hello {
  color: #eaffff;
  font-size: 20px;
}

button {
  background: #ffffff;
  color: #0b6fa8;
  font-size: 22px;
  font-weight: bold;
  border: none;
  border-radius: 999px;
  padding: 16px 36px;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.2);
  transition: transform 0.15s;
}

button:hover {
  transform: scale(1.08);
}

#count {
  color: #ffffff;
  font-size: 22px;
  font-weight: bold;
  margin-top: 24px;
}

/* 🐠 헤엄치는 물고기 */
.물고기 {
  position: fixed;
  font-size: 50px;
  left: -80px;
  animation-name: 헤엄치기;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

.물고기1 { top: 55%; animation-duration: 9s; }
.물고기2 { top: 70%; font-size: 40px; animation-duration: 13s; animation-delay: 2s; }
.물고기3 { top: 85%; font-size: 60px; animation-duration: 16s; animation-delay: 4s; }

@keyframes 헤엄치기 {
  0%   { transform: translateX(0) scaleX(1); }
  45%  { transform: translateX(105vw) scaleX(1); }
  50%  { transform: translateX(105vw) scaleX(-1); }
  95%  { transform: translateX(0) scaleX(-1); }
  100% { transform: translateX(0) scaleX(1); }
}