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

html,
body {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

body {
  position: relative;
  background-color: #000;
  font-family: Arial, sans-serif;
}

/* 유튜브 영상 전체 배경 */
.video-background {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: #000;
  z-index: 0;
}

.video-background iframe {
  position: absolute;
  top: 50%;
  left: 50%;

  /* 기본적으로 16:9 영상이 화면을 완전히 덮도록 설정 */
  width: 100vw;
  height: 56.25vw;

  min-width: 177.78vh;
  min-height: 100vh;

  border: none;
  transform: translate(-50%, -50%);

  /* 영상 자체를 클릭하지 못하게 함 */
  pointer-events: none;
}

/* 글자나 책상이 잘 보이도록 영상 위에 얇은 어두운 막 */
.video-overlay {
  position: fixed;
  inset: 0;
  z-index: 1;

  background: rgba(0, 0, 0, 0.08);
  pointer-events: none;
}

/* 책상과 타이머 등이 들어갈 화면 */
.study-screen {
  position: relative;
  z-index: 2;

  width: 100%;
  height: 100vh;
}

/* 앞으로 책상 이미지를 배치할 영역 */
.desk-area {
  position: absolute;
  left: 50%;
  bottom: 0;

  width: min(100%, 1600px);
  height: 48vh;

  transform: translateX(-50%);
}

/* 왼쪽 상단 뒤로 가기 버튼 */
.back-button {
  position: fixed;
  top: 32px;
  left: 32px;
  z-index: 10;

  display: flex;
  align-items: center;
  justify-content: center;

  width: 58px;
  height: 58px;

  color: #111;
  font-size: 36px;
  line-height: 1;
  text-decoration: none;

  background: rgba(255, 255, 255, 0.78);
  border-radius: 50%;


  transition:
    transform 0.2s ease,
    background-color 0.2s ease;
}

.back-button:hover {
  transform: scale(1.08);
  background: rgba(255, 255, 255, 0.95);
}
/* 공부 시간 칭찬 문구 */
.praise-message {
  position: fixed;
  top: 115px;
  left: 50%;
  z-index: 100;

  transform: translate(-50%, 15px);

  font-family: "CherrySpoon", sans-serif;
  font-size: clamp(21px, 2.3vw, 34px);
  font-weight: normal;

  color: white;
  white-space: nowrap;
  text-align: center;

  text-shadow:
    0 3px 12px rgba(15, 91, 148, 0.55),
    0 2px 6px rgba(0, 0, 0, 0.5);

  opacity: 0;
  visibility: hidden;

  transition:
    opacity 0.6s ease,
    transform 0.6s ease,
    visibility 0.6s ease;

  pointer-events: none;
  user-select: none;
}

.praise-message.show {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}
/* 가로 아이패드 전용 */
@media screen
  and (min-width: 768px)
  and (max-width: 1366px)
  and (orientation: landscape) {

  .desk-image {
    /* 가로 아이패드에서 맞춘 값 */
    width: 1200px;
    bottom: -70px;
    left: 50%;
    transform: translateX(-50%);
  }

  .coffee-image {
    width: 200px;
    bottom: 95px;
    left: 50%;
    transform: translateX(-50%);
  }

  .study-timer {
    top: 28px;
    font-size: 52px;
  }
}

/* 휴대폰 */
@media (max-width: 430px) {
  .back-button {
    top: 65px;
    left: 18px;

    width: 46px;
    height: 46px;

    font-size: 28px;
  }

  .desk-area {
    height: 40vh;
  }
  .praise-message {
  top: 80px;
  width: 90%;
  font-size: 21px;
  white-space: normal;
}
}
/* ================================
   Switzerland 데스크톱 배치
   ================================ */

.australia-desk {
  position: fixed;
  left: 3vw;
  bottom: -31vw;
  width: 95vw;
  height: auto;
  z-index: 20;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
  filter: none;
}

.australia-coffee {
  position: fixed;
  left: 29%;
  bottom: 1%;
  width: 42vw;
  max-width: 604px;
  height: auto;
  z-index: 21;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
  transition: opacity 0.35s ease;
}


/* ================================
   아이패드 가로
   ================================ */

@media screen
  and (min-width: 768px)
  and (max-width: 1366px)
  and (orientation: landscape) {

  .australia-desk {
    left: 3vw;
    bottom: -31vw;
    width: 95vw;
  }

  .australia-coffee {
    left: 29%;
    bottom: 1%;
    width: 42vw;
    max-width: 604px;
  }

  .study-timer {
    top: 28px;
    font-size: 52px;
  }

  .praise-message {
    top: 105px;
    font-size: 27px;
  }
}


/* ================================
   휴대폰 세로
   ================================ */

@media (max-width: 430px) and (orientation: portrait) {
  .back-button {
    top: 65px;
    left: 18px;
    width: 46px;
    height: 46px;
    font-size: 28px;
  }

  .desk-area {
    height: 40vh;
  }

  .australia-desk {
    left: -50vw;
    bottom: -31vw;
    width: 198vw;
  }

  .australia-coffee {
    left: -11%;
    bottom: 12%;
    width: 124vw;
    max-width: 600px;
  }

  .study-timer {
    top: 22px;
    font-size: 34px;
  }

  .praise-message {
    top: 80px;
    width: 90%;
    font-size: 21px;
    white-space: normal;
  }
}


/* ================================
   휴대폰 가로
   ================================ */

@media (max-width: 950px) and (orientation: landscape) {
  .back-button {
    top: 14px;
    left: 14px;
    width: 40px;
    height: 40px;
    font-size: 25px;
  }

  .australia-desk {
    left: 0vw;
    bottom: -34vw;
    width: 101vw;
  }

  .australia-coffee {
    left: 27%;
    bottom: -1%;
    width: 53vw;
    max-width: 390px;
  }

  .study-timer {
    top: 12px;
    font-size: 29px;
  }

  .praise-message {
    top: 55px;
    width: 85%;
    font-size: 18px;
    white-space: normal;
  }

  .flight-loading {
    padding-bottom: 35px;
  }

  .flight-text {
    font-size: 24px;
  }
}
/* 유튜브 소리 버튼 */
.sound-button {
  position: fixed;
  top: 47px;
  right: 179px;
  z-index: 200;

  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  padding: 11px 17px;

  border: none;
  border-radius: 999px;

  background: rgba(255, 255, 255, 0.78);
  color: #111;

  font-family: "CherrySpoon", sans-serif;
  font-size: 17px;

  cursor: pointer;

  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);

  transition:
    transform 0.2s ease,
    background-color 0.2s ease;
}

.sound-button:hover {
  transform: scale(1.06);
  background: rgba(255, 255, 255, 0.95);
}

.sound-button:active {
  transform: scale(0.96);
}

.sound-button.sound-on {
  background: rgba(255, 255, 255, 0.95);
}

#soundIcon {
  font-size: 20px;
  line-height: 1;
}

@media (max-width: 430px) {
  .sound-button {
    top: 148px;
    right: 138px;

    padding: 9px 13px;
    font-size: 14px;
  }

  #soundIcon {
    font-size: 17px;
  }
}

@media (max-width: 950px) and (orientation: landscape) {
  .sound-button {
    top: 12px;
    right: 14px;

    padding: 8px 12px;
    font-size: 13px;
  }
}