/* 첫 화면 · 사용 안내 · 가입 안내 창 (10-27)
   첫 화면에서는 머리줄과 탭을 숨긴다. 들어오자마자 고를 것은 «어떻게 시작할지» 하나뿐이다. */

.is-welcome .app-header,
.is-welcome .tabbar {
  display: none;
}

.is-welcome .app-main {
  padding-bottom: calc(var(--sp-8) + env(safe-area-inset-bottom));
}

.view.is-active.welcome {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  max-width: 420px;
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0 auto;
  padding: calc(var(--sp-6) + env(safe-area-inset-top)) 0 var(--sp-6);
  text-align: center;
}

.welcome__art {
  display: flex;
  justify-content: center;
  margin-bottom: var(--sp-4);
}

.welcome__brand {
  font-family: var(--font-display);
  font-size: 40px;
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: var(--lh-tight);
}

.welcome__lead {
  margin-top: var(--sp-2);
  font-size: var(--fs-md);
  color: var(--sub);
}

.welcome__title {
  font-size: var(--fs-title);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: var(--lh-tight);
}

.welcome__desc {
  margin-top: var(--sp-3);
  font-size: var(--fs-md);
  line-height: var(--lh-loose);
  color: var(--sub);
  white-space: pre-line;   /* 문구 안의 줄바꿈 문자를 살린다 */
}

.welcome__actions {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  width: 100%;
  margin-top: var(--sp-8);
}

.welcome__note {
  margin-top: var(--sp-2);
  font-size: var(--fs-xs);
  line-height: var(--lh-normal);
  color: var(--sub);
}

.welcome__privacy {
  margin-top: var(--sp-6);
  font-size: var(--fs-sm);
  font-weight: 700;   /* 처리방침 링크는 다른 글자와 구분되게 둔다(표준지침 제20조①) */
  color: var(--ink);
  text-decoration: underline;
}

/* ---- 사용 안내 세 장 ---- */

/* 위 줄(1/3 · 건너뛰기)은 맨 위, 버튼은 맨 아래에 붙이고 그림과 글은 그 사이에 둔다.
   가운데 정렬만 쓰면 장마다 글 길이가 달라 위 줄이 오르내렸다(첫 판 스크린샷에서 110px). */
.view.is-active.welcome--step {
  justify-content: flex-start;
}

.welcome--step .welcome__art,
.welcome--step .welcome__actions {
  margin-top: auto;
}

/* 남는 높이가 없으면 auto 가 0 이 되어 점과 버튼이 붙는다(360×640 에서 그랬다). 간격은 안쪽 여백으로 지킨다 */
.welcome--step .welcome__actions {
  padding-top: var(--sp-6);
}

/* 키가 작은 폰에서는 미리두를 줄여 셋째 장의 버튼과 안내 글이 한 화면에 들어오게 한다 */
@media (max-height: 720px) {
  .welcome__art svg {
    width: 132px;
    height: auto;
  }

  .welcome__desc {
    margin-top: var(--sp-2);
    line-height: var(--lh-normal);
  }

  .welcome__top {
    margin-bottom: var(--sp-2);
  }
}

.welcome__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: var(--tap);
  margin-bottom: var(--sp-6);
}

.welcome__count {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--muted);
}

.welcome__skip {
  min-height: var(--tap);
  padding: 0 var(--sp-2);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--sub);
}

.welcome__dots {
  display: flex;
  gap: var(--sp-2);
  margin-top: var(--sp-6);
}

.welcome__dots i {
  width: 8px;
  height: 8px;
  border-radius: var(--r-pill);
  background: var(--line);
}

.welcome__dots i.is-on {
  width: 22px;
  background: var(--ink);
}

/* ---- 가입 안내 창 ---- */

.consent {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  margin-top: var(--sp-5);
}

.consent__box {
  padding: var(--sp-4);
  border-radius: var(--r-sm);
  background: var(--cream);
}

.consent__head {
  margin-bottom: var(--sp-3);
  font-size: var(--fs-sm);
  font-weight: 700;
}

.consent__tag {
  margin-left: var(--sp-1);
  padding: 2px 8px;
  border-radius: var(--r-pill);
  background: var(--paper);
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--sub);
}

.consent__list {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--sp-2) var(--sp-3);
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
  text-align: left;
}

.consent__list dt {
  font-weight: 600;
  color: var(--sub);
}

.consent__note {
  margin-top: var(--sp-3);
  font-size: var(--fs-xs);
  line-height: var(--lh-normal);
  color: var(--sub);
}

/* 꼭 필요한 것 «확인했어요». 체크해야 «구글로 계속하기»가 눌린다(현찬 10-27) */
.consent__ack {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  min-height: var(--tap);
  margin-top: var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-xs);
  background: var(--paper);
  font-size: var(--fs-sm);
  font-weight: 600;
  cursor: pointer;
}

.consent__check {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  accent-color: var(--ink);
}

.consent__note a {
  font-weight: 700;
  color: var(--ink);
  text-decoration: underline;
}

@media (min-width: 1024px) {
  .is-welcome #app {
    padding-left: 0;
  }

  /* base.css 의 «홈 말고는 760px» 규칙(.app-main > .view:not(#view-home))이 위 420px 를 이긴다.
     그보다 구체적으로 써서 첫 화면은 폰 폭 그대로 둔다. 버튼이 760px 로 늘어나 있었다 */
  .is-welcome .app-main > #view-welcome.welcome {
    max-width: 420px;
  }
}