#button--firstScreen {
  position: fixed;
  bottom: 0px;
  z-index: 1;
  display: none;
}

#mainScreen--firstScreen {
  height: auto;
}

.screen {
  padding: 32px 16px 48px;
}

.screen--sub {
  background-color: var(--container);
}

/* 첫 화면 레이아웃 */
#firstScreen {
  width: 100%;
  height: 90dvh;
  padding: 16px 32px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

/* =========================================
   텍스트 스타일 (질문/답변/타이틀 등)
   ========================================= */
.question {
  font-size: var(--big);
  margin-bottom: 24px;
}

.answer {
  font-size: var(--big);
  text-align: end;
  margin-bottom: 64px;
}

.answer div {
  display: inline-flex;
}

.answer span {
  text-align: start;
  margin-left: 8px;
}

/* 타이틀 */
#title {
  font-size: clamp(50px, 15vw, 65px);
  font-weight: var(--medium);
  line-height: 1;
}

#title span {
  font-size: clamp(30px, 10vw, 45px);
}

#title div {
  font-size: clamp(70px, 19vw, 85px);
  font-style: italic;
  font-weight: var(--black);
  text-align: end;
}

/* 캐치프레이즈 */
#catchPhrase {
  font-style: italic;
  line-height: 2;
}

#catchPhrase div {
  text-align: end;
}

/* 마지막 마케팅 문구 */
#lastMarketingPhrase {
  font-weight: var(--medium);
  font-size: var(--title);
  text-align: center;
  font-style: italic;
  margin-bottom: 64px;
}

#repeatCatchPhrase {
  font-size: var(--big);
  text-align: center;
  line-height: 2;
}

#repeatCatchPhrase span {
  color: var(--onPrimary);
  font-weight: var(--bold);
}

/* =========================================
   이미지 및 설명 텍스트
   ========================================= */
.img {
  margin: 0 16px 16px;
}

.img img {
  width: 100%;
}

.imgText {
  font-weight: var(--light);
}

/* =========================================
   구글 로그인/약관 영역
   ========================================= */
#gapTitleGoogle {
  height: 25%;
}

#google {
  background-color: #f2f2f2;
  text-align: center;
  border-radius: 20px;
  margin-bottom: 8px;
}

#legalDoc {
  font-size: var(--small);
  margin: 0 16px;
  font-weight: var(--light);
}

#legalDoc a {
  color: var(--onPrimary);
  font-weight: var(--bold);
  text-decoration: none;
}

#gapLegalDocCatchPhrase {
  height: 6%;
}

/* =========================================
   FAQ 스타일
   ========================================= */
details {
  font-weight: var(--light);
  color: var(--onsurfaceDim);
}

summary {
  font-weight: var(--medium);
  color: var(--onSurface);
}

#faqOutline {
  margin: 32px 0 48px 0;
  padding: 16px;
  border: 1px solid var(--outline);
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* =========================================
   Footer 스타일
   ========================================= */
#footer {
  display: flex;
  gap: 48px;
  padding-left: 16px;
  font-size: var(--small);
}

.footerTitle {
  font-weight: var(--black);
  margin-bottom: 16px;
}

#footer a {
  font-weight: var(--light);
  text-decoration: none;
  color: var(--onsurface);
  display: block;
  margin-bottom: 16px;
}

/* 저작권 문구 */
#copyRight {
  font-size: var(--small);
  font-weight: var(--light);
  text-align: end;
  margin-bottom: 48px;
}