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

body {
  user-select: none;
  width: 100%;
  height: 100dvh;

  overflow-x: hidden;
  overflow-y: auto;

  background: #ffffff;
}

.install-area {
  font-family:
    -apple-system,
    BlinkMacSystemFont,
    "Pretendard",
    sans-serif;

  animation: pageFadeIn 2.4s ease;
}

/* 페이지 첫 등장 */
@keyframes pageFadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* =========================
   메인 화면
========================= */

/* 가운데 로고 높이 조정 height  */

.main-screen {
  width: 100%;
  height: 75dvh;

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

  padding: 24px;
padding-bottom: 0px;

}

/* 등장 상태 */
.main-screen.show {
  opacity: 1;
  transform: translateY(0);
}

.main-content {

  position: relative;

  z-index: 10;

  text-align: center;

}

.main-logo {
  width: 170px;

  margin-bottom: 20px;

  user-select: none;
  -webkit-user-drag: none;
/* 움직임 속도 */
  animation: floating 4s ease-in-out infinite;
}

/* 로고 효과*/
@keyframes floating {

  0% {
    transform: translateY(0px);
  }
/* 움직임 높이 폭 */
  50% {
    transform: translateY(-7px);
  }

  100% {
    transform: translateY(0px);
  }
}

.main-content p {
  font-size: 13px;
  line-height: 1.6;

  color: #777777;

  margin-bottom: 36px;
}

/* 서비스 목록 */

.service-list {

  width: 100%;

  display: flex;

  flex-direction: column;

  align-items: center;

  gap: 12px;

  margin-bottom: 24px;

}

.service-card {

  width: 240px;

  padding: 14px 18px;

  border-radius: 18px;

  background:
    rgba(255,255,255,0.72);

  border:
    1px solid rgba(0,0,0,0.06);

  text-decoration: none;

  display: flex;

  align-items: center;

  justify-content: space-between;

  backdrop-filter: blur(12px);

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

  transition:
    transform .25s ease,
    background .25s ease,
    border-color .25s ease,
    box-shadow .25s ease;

}

.service-card:hover {

  transform: translateY(-2px);

  background:
    rgba(255,255,255,0.95);

  border-color:
    rgba(0,0,0,0.08);

  box-shadow:
    0 10px 24px rgba(0,0,0,0.08);

}

.service-title {

  font-size: 14px;

  font-weight: 600;

  color: #111111;

}

.service-desc {

  margin-top: 4px;

  font-size: 12px;

  color: #777777;

}

.service-arrow {

  font-size: 18px;

  color: #999999;

  transition:
    transform .25s ease,
    color .25s ease;

}

.service-card:hover .service-arrow {

  transform: translateX(3px);

  color: #111111;

}

/* 버튼 */
.main-button {

  display: block;

  width: 220px;

  border: none;

  background: #111111;

  color: white;


  font-size: 12px;
  font-weight: 600;

  cursor: pointer;

  transition:
    transform 0.25s ease,
    opacity 0.25s ease,
    box-shadow 0.25s ease,
    background 0.25s ease;

}

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

.main-button:hover {

  transform: translateY(-5px);




}

.button-group {

  width: 100%;

  display: flex !important;

  flex-direction: column !important;

  align-items: center;

  justify-content: center;

  gap: 14px;

}


/* 모바일 최적화 */
@media (max-width: 480px) {

  .logo {
    width: 62vw;
    max-width: 220px;
  }

  .main-content h1 {
    font-size: 42px;
  }

  .main-content p {
    font-size: 15px;
  }


}

/* 하단 저작권 텍스트 */
.bottom-text {

  position: fixed;

  pointer-events: none;

  bottom: calc(28px + env(safe-area-inset-bottom));

  left: 50%;

  transform: translateX(-50%);

  text-align: center;

  z-index: 1;

}
.bottom-text p {
  font-size: 10px;
  color: #777777;

  margin-bottom: 1px;

  letter-spacing: -0.2px;
}

.bottom-text span {
  font-size: 10px;
  color: #aaaaaa;

  letter-spacing: 0.5px;
}

/* PC에서는 숨김 */
.install-button {
  display: none;
}


/* 모바일에서만 표시 */
@media screen and (max-width: 768px) {

  .install-button {
    display: block;
  }

}

/* 기본 숨김 */
.desktop-install-button {
  display: none;
}

/* PC에서만 표시 */
@media screen and (min-width: 769px) {

  .desktop-install-button {
    display: block;
  }

}

/* 로그인 버튼 임시 숨김 */

#login-button {
  display: none;
}


/* 우측 상단 설치 영역 */

.install-area {

  position: fixed;

  top: 25px;

  right: 40px;

  left: auto;

  bottom: auto;

  transform: none;

  z-index: 20;

  display: flex;

  flex-direction: row;

  align-items: center;

  gap: 15px;

  z-index: 20;

}

/* 우측 상단 설치 버튼 디자인 */

.bottom-install-button {

  width:30px;
  height: 30px;

  padding:0;

  border-radius: 10px;

  background:
    rgba(255,255,255,0.55);

  color: #777777;

  backdrop-filter:
    blur(14px);

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

  font-size: 12.5px;

  font-weight: 500;

  letter-spacing: 0.2px;


  transition:
    all 0.22s ease;

}

/* 클릭 */

.bottom-install-button:active {

  transform:
    scale(0.985);

}

/* 모바일 설치 말풍선 */


.mobile-install-wrapper {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* 안내 말풍선 */

.install-tooltip {

  position: absolute;

  top: 35px;
  right: -3px;

  width: 200px;

  padding: 6px 10px;

  border-radius: 14px;

  background: rgba(30, 30, 30, 0.62);

  border: 1px solid rgba(255, 255, 255, 0.08);

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

  box-shadow:
    0 10px 30px rgba(0, 0, 0, 0.12);

  color: white;

  font-size: 12px;
  line-height: 1.5;

  text-align: center;

  opacity: 0;
  visibility: hidden;

  pointer-events: none;

  transform:
    translateY(6px)
    scale(0.8);

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

}

/* 말풍선 활성화 */

.install-tooltip.show {

  opacity: 1;

  visibility: visible;

  transform:
    translateY(0)
    scale(1);

}