/* 기본 리셋 */
html, body {
  margin: 0;
  padding: 0;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  font-family: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  background-color: #e0f4fc;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* 상단 헤더 영역 */
.header {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 20px;
  z-index: 1000;
  box-sizing: border-box;
}

/* 공통 텍스트 스타일 */
#clock, .title, .whale-counter {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: #333333;
  white-space: nowrap;
  flex-shrink: 0;
}

.title {
  text-align: left;
}

.whale-counter {
  text-align: center;
  padding: 0 10px;
}

#clock {
  text-align: right;
}

/* 💻 대형 모니터(PC) 화면 전용 미디어 쿼리 */
@media (min-width: 1024px) {
  .horizon-islands svg {
    /* PC 화면에서 섬이 지나치게 커지는 것을 막되, 가로 비율은 넓게 유지 */
    max-width: 1200px;
  }
}

/* 모바일 및 화면 폭이 좁을 때 (600px 이하) 줄바꿈 대응 */
@media (max-width: 600px) {
  .header {
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 8px 10px;
  }

  .title, .whale-counter, #clock {
    text-align: center;
    font-size: 13px;
  }
}

/* 📱 모바일 등 아주 작은 화면을 위한 미디어 쿼리 (선택 사항) */
@media (max-width: 480px) {
  .horizon-islands svg {
    max-width: 100%; /* 모바일에서는 화면 폭에 딱 맞게 풀사이즈 사용 */
  }
}

/* 화면 분할: 상단 (하늘) */
.top-section {
  width: 100%;
  height: 50vh;
  background-color: #e0f4fc;
  position: relative;
  z-index: 1;
}

/* 구름 레이어 컨테이너 (레이어 고정) */
.clouds-layer {
  position: absolute;
  top: 75px;
  left: 0;
  width: 100%;
  height: 60px;
  pointer-events: none;
  z-index: 5;
  overflow: hidden; /* 화면 좌우 영역 밖을 나가는 구름 숨김 */
}

/* 개별 구름 공통 무한 순환 애니메이션 정의 */
@keyframes loopCloud {
  0% {
    transform: translateX(-250px); /* 화면 왼쪽 밖에서 시작 */
  }
  100% {
    transform: translateX(calc(100vw + 250px)); /* 화면 오른쪽 밖까지 이동 */
  }
}

/* 개별 구름 SVG 크기 및 애니메이션 고정 */
.cloud-svg {
  position: absolute;
  top: 0;
  width: 72px;
  height: auto;
  display: block;
  shape-rendering: crispEdges;
  flex-shrink: 0;
  
  /* 1초당 약 1px 속도로 우측 이동 (전체 화면 이동 기준 시간) */
  animation: loopCloud 100s linear infinite;
}

/* 1번 구름: 시작 지점 및 이동 속도 */
.cloud-svg:nth-child(1) {
  top: 0px;
  animation-duration: 350s;
  animation-delay: -230s; /* 이미 화면 중간 지점부터 시작하도록 설정 */
}

/* 2번 구름 (가운데 작은 구름): 시작 지점 및 이동 속도 */
.cloud-svg:nth-child(2) {
  top: 15px;
  width: 48px;
  animation-duration: 400s;
  animation-delay: -140s; /* 화면 중간-좌측 지점부터 시작 */
}

/* 3번 구름: 시작 지점 및 이동 속도 */
.cloud-svg:nth-child(3) {
  top: 5px;
  animation-duration: 370s;
  animation-delay: 0s;   /* 왼쪽 끝에서 시작 */
}

/* 📱 모바일 등 헤더가 2줄로 줄바꿈되는 좁은 화면(600px 이하) 대응 */
@media (max-width: 600px) {
  .clouds-layer {
    top: 95px;
  }
}

/* 화면 분할: 하단 (바다) - 말풍선 가림 방지 */
/* 바다 레이어 설정 */
.bottom-section {
  width: 100%;
  height: 50vh;
  background-color: #1d6b8a;
  position: relative;
  overflow: hidden; /* 화면 밖으로 나가는 물결 잘라내기 */
  z-index: 2;
  perspective: 500px; /* 원근감 3D 스케일 착시 부여 */
}

/* 물결 공통 이동 애니메이션 정의 */
@keyframes waveFlowFar {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50px); }
}

@keyframes waveFlowNear {
  0% { transform: translateX(0) translateY(0); }
  50% { transform: translateX(-80px) translateY(4px); } /* 앞으로 일렁이며 다가오는 효과 */
  100% { transform: translateX(-160px) translateY(0); }
}

/* 물결 레이어 기본 설정 */
.wave-layer {
  position: absolute;
  width: 200%; /* 좌우 이동 시 끊김 없도록 폭 확대 */
  color: rgba(255, 255, 255, 0.75);
  font-family: monospace, -apple-system, sans-serif;
  pointer-events: none;
  user-select: none;
  white-space: nowrap;
}

/* 🌊 먼 바다 파도 (천천히 다가옴) */
.far-wave-1 { 
  top: 8%; font-size: 10px; letter-spacing: 12px; word-spacing: 20px; opacity: 0.4; 
  animation: waveFlowFar 12s linear infinite alternate; 
}
.far-wave-2 { 
  top: 18%; font-size: 11px; letter-spacing: 18px; word-spacing: 30px; opacity: 0.5; 
  animation: waveFlowFar 10s linear infinite alternate; 
}

/* 🌊 중간 바다 파도 */
.mid-wave-1 { 
  top: 35%; font-size: 13px; letter-spacing: 35px; word-spacing: 50px; opacity: 0.7; 
  animation: waveFlowNear 8s ease-in-out infinite alternate; 
}
.mid-wave-2 { 
  top: 55%; font-size: 15px; letter-spacing: 55px; word-spacing: 75px; opacity: 0.8; 
  animation: waveFlowNear 7s ease-in-out infinite alternate; 
}

/* 🌊 가깝게 다가오는 앞바다 파도 (속도가 빠르고 아래로 일렁임) */
.near-wave-1 { 
  top: 75%; font-size: 18px; letter-spacing: 90px; word-spacing: 120px; opacity: 0.9; 
  animation: waveFlowNear 5s ease-in-out infinite alternate; 
}
.near-wave-2 { 
  top: 90%; font-size: 20px; letter-spacing: 120px; word-spacing: 160px; opacity: 1; 
  animation: waveFlowNear 4s ease-in-out infinite alternate; 
}

.horizon-islands {
  position: absolute;
  bottom: 0;        /* 바닥에 붙이기 */
  left: 0;
  width: 100%;
  height: 48px;     /* 섬 높이만큼 컨테이너 높이 지정 */
  pointer-events: none;
  z-index: 10;      /* 바다 레이어 위쪽에 위치시킴 */
  
  display: flex;
  justify-content: space-between; /* 3개 섬 간격 자동 벌림 */
  align-items: flex-end;          /* 바닥에 섬 발끝을 맞춤 */
  
  box-sizing: border-box;
  padding: 0 8vw;   /* 좌우 여백 */
}

/* 개별 섬 SVG 크기 고정 */
.island-svg {
  width: 24px;
  height: 24px;
  display: block;   /* 여백 오차 방지 */
  shape-rendering: crispEdges;
}

/* 하이픈 물결 레이어 */
.wave-layer {
  position: absolute;
  width: 100%;
  color: rgba(255, 255, 255, 0.75);
  font-family: monospace, -apple-system, sans-serif;
  pointer-events: none;
  user-select: none;
  white-space: nowrap;
}

.far-wave-1 { top: 8%; font-size: 10px; letter-spacing: 12px; word-spacing: 20px; opacity: 0.5; padding-left: 2%; }
.far-wave-2 { top: 18%; font-size: 11px; letter-spacing: 18px; word-spacing: 30px; opacity: 0.6; padding-left: 15%; }
.mid-wave-1 { top: 35%; font-size: 13px; letter-spacing: 35px; word-spacing: 50px; opacity: 0.75; padding-left: 5%; }
.mid-wave-2 { top: 55%; font-size: 15px; letter-spacing: 55px; word-spacing: 75px; opacity: 0.85; padding-left: 25%; }
.near-wave-1 { top: 75%; font-size: 18px; letter-spacing: 90px; word-spacing: 120px; opacity: 0.95; padding-left: 10%; }
.near-wave-2 { top: 90%; font-size: 20px; letter-spacing: 120px; word-spacing: 160px; opacity: 1; padding-left: 35%; }

/* 고래 & 인어 컨테이너 스타일 */
.whale-container {
  position: absolute;
  transform: translate(-50%, 100%);
  pointer-events: none;
  opacity: 0;
  transition: transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.6s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* 인어 등장 시 최상단 z-index 보장 */
.mermaid-container {
  z-index: 999999 !important;
}

.whale-wrapper {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* 일반 고래 광고 텍스트 박스 */
.ad-box {
  background-color: #ffffff;
  color: #111111;
  border: 3px solid #1a2e40;
  border-radius: 4px;
  padding: 4px 12px;
  font-size: 18px;
  font-weight: 300;
  letter-spacing: -0.01em;
  white-space: nowrap;
  margin-bottom: 6px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
  font-family: Times, serif;
}

/* 인어 전용 프리미엄 광고 텍스트 박스 (1.5배 규격으로 축소) */
.premium-ad-box {
  background-color: #ffffff;
  color: #111111;
  border: 4px solid #ffd700;
  border-radius: 6px;
  padding: 6px 16px;
  font-size: 24px;
  font-weight: 900;
  letter-spacing: -0.01em;
  white-space: nowrap;
  margin-bottom: 8px;
  box-shadow: 0 6px 12px rgba(0,0,0,0.3), 0 0 10px rgba(255, 215, 0, 0.8);
  font-family: Georgia, Times, serif;
}

.whale-container svg {
  shape-rendering: crispEdges;
}

.whale-container.emerged {
  opacity: 1;
  transform: translate(-50%, -50%);
}

.whale-container.submerged {
  opacity: 0;
  transform: translate(-50%, 100%);
}

@keyframes spout-blow {
  0% { opacity: 0; transform: scaleY(0.2); }
  30% { opacity: 1; transform: scaleY(1); }
  70% { opacity: 1; transform: scaleY(1); }
  100% { opacity: 0; transform: scaleY(0.3); }
}

.whale-spout {
  animation: spout-blow 1.8s ease-in-out infinite;
  transform-origin: bottom center;
}

/* 구름 이동 애니메이션 정의 */
@keyframes moveClouds {
  from {
    transform: translateX(0);
  }
  to {
    /* 1초에 1px 속도로 화면 전체 폭(100vw) + 구름 여백만큼 우측으로 이동 */
    transform: translateX(calc(100vw + 200px));
  }
}

/* 구름 컨테이너에 애니메이션 적용 */
.clouds-layer {
  /* 기존 설정 유지... */
  
  /* 👇 [추가] 1초에 1px 속도로 무한 반복 이동 */
  animation: moveClouds 100s linear infinite;
  
  /* 화면 좌측 바깥에서 시작할 수 있도록 초기 위치 설정 */
  left: -200px;
  width: calc(100% + 200px);
}

/* 탭 비활성화 시 모든 CSS 애니메이션 일시정지 */
body.tab-paused *,
body.tab-paused *::before,
body.tab-paused *::after {
  animation-play-state: paused !important;
}