.main-container {
  width: 100%;
  color: #ffffff;
  background: linear-gradient(38deg, #70bdff, #8fc2a5);
  display: flex;
  justify-content: center;
  /* align-items: center; */
  min-height: 100vh;
  margin: 0;
  padding: 20px; /* 추가 여백 */
  overflow-y: auto; /* 세로 스크롤 활성화 */
  overflow-x: hidden; /* 가로 스크롤 비활성화 */
}

.sub-container {
  text-align: center;
  /* padding: 20px; */ 
  padding: 0px;
  max-width: 500px;
  color: #ffffff;
}

.logo {
  margin-top: 1em;
  margin-bottom: 20px;
  text-align: left; /* 왼쪽 정렬 */
}

.logo-image {
  /* width: 184px; */
  width: 6em;
  margin-bottom: 5px;
}

.logo-image-yakple {
  /* width: 120px; */
  width: 4.3em;
  margin-bottom: 5px;
}

.notification-container {
  text-align: center; /* 가로 가운데 정렬 */
  width: 100%; /* 부모 컨테이너 크기 */
}

.notification-container-timer {
  text-align: center; /* 가로 가운데 정렬 */
  width: 100%; /* 부모 컨테이너 크기 */
}

.notification-bar {
  display: flex;
  align-items: center;
  background-color: #333; /* 다크 그레이 배경 */
  color: #fff; /* 흰색 텍스트 */
  margin: 0 auto;
  /* font-family: Arial, sans-serif; */
  /* font-size: 14px; */
  padding: 4px 16px;
  /* margin: 0px 20px; */
  border-radius: 16px; /* 둥근 테두리 */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* 약간의 그림자 */
  max-width: fit-content; /*내용에 맞는 크기*/
}

.dot {
  width: 8px;
  height: 8px;
  background-color: #32cd32; /* 녹색 점 */
  border-radius: 50%; /* 원형으로 만들기 */
  margin-right: 8px; /* 텍스트와 간격 */
}


.main-title {
  /* font-size: 24px; */
  font-weight: bold;
  margin-bottom: 20px;
  line-height: 1.5;
}

.description {
  /* font-size: 14px; */
  line-height: 1.8;
  margin-bottom: 30px;
}

.start-button {
  max-width : 500px;
  width: 100%;
  background-color: #2583b5;
  color: #ffffff;
  border: none;
  border-radius: 25px;
  padding: 15px 30px;
  /* font-size: 16px; */
  /* font-weight: bold; */
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.start-button:hover {
  background-color: #1d6f9c;
}

.marign-top-description {
  margin-top: 4em;
}


.box {
  text-align: left;
  background: radial-gradient(circle, rgba(255, 255, 255, 1) 100%, rgba(255, 255, 255, 1) 100%);
  border: 1px solid #ccc;
  border-radius: 10px;
  padding: 15px;
  margin: 15px 0;
  /* box-shadow: 0 30px 30px rgba(0, 0, 0, 0.3);  */
  /* 그림자 설정 */
}