/* =====================================================================
   start.css — 시작 화면(SCR-01) 모양

   이 파일이 하는 일
   - 위쪽 노란 점무늬 면(만들닷 글자 · 배지 · 캐릭터 라인업), 제목 · 소개 · 소요 시간 칩,
     맨 아래 "테스트 시작" 버튼과 개인정보 안내를 배치한다.
   - 기준 화면: design/drafts/c/index.html 의 SCR-01.
   - 색·크기 값은 tokens.css 의 이름(var(--...))으로만 쓴다.

   "스크롤 없이 한 화면" (F-01 완료 기준)
   - 화면 전체를 휴대폰 높이로 두고, 위 노란 면이 남는 높이만큼만 차지한다.
     작은 휴대폰(375×667)에서는 노란 면과 캐릭터 그림이 줄어들어 버튼까지 한 화면에 들어온다.
   ===================================================================== */

/* 노란 면 위로 제목이 겹쳐 붙지 않게, 화면 위쪽 여백은 노란 면이 맡는다 */
.start-screen {
  min-height: 100vh;
  min-height: 100dvh;
}

/* ---------- 1. 위쪽 노란 점무늬 면 ---------- */
.start-top {
  display: flex;
  flex-direction: column;
  flex: 1 1 0;            /* 남는 높이를 이 면이 차지 → 화면이 작으면 줄어든다 */
  min-height: 200px;      /* 아주 작은 화면(아이폰 SE 사파리 실제 보이는 높이 약 548px)에서도 캐릭터가 알아볼 만큼은 남긴다 */
  max-height: 52vh;       /* 큰 화면(PC·큰 휴대폰)에서 노란 면이 너무 길어지지 않게 (시안: 화면의 약 절반) */
  padding-top: env(safe-area-inset-top);
  border-bottom: var(--border);
  border-radius: 0 0 calc(var(--radius-lg) + var(--space-3)) calc(var(--radius-lg) + var(--space-3));
  background-color: var(--color-primary);  /* 점 무늬는 .dots(components.css)가 더한다 */
}

/* PC처럼 화면이 앱 최대 너비(480px)보다 넓으면 노란 면 양옆에도 테두리를 그어
   "위에 매달린 카드"처럼 보이게 한다 (휴대폰에서는 화면 끝까지 차므로 옆 테두리 없음) */
@media (min-width: 481px) {
  .start-top {
    border-left: var(--border);
    border-right: var(--border);
  }
}

/* 만들닷 글자(로고 대신) + "만들차 메이커 테스트" 배지 */
.brand {
  display: flex;
  flex-wrap: wrap;        /* 화면을 크게 확대해 폭이 아주 좁아지면 배지가 다음 줄로 내려간다 (잘리지 않게, F-05) */
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-4) var(--gutter) 0;
}

.brand__name {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-weight: var(--weight-heavy);
  line-height: 1;
}
.brand__ko {
  font-size: var(--text-choice);
  letter-spacing: -0.01em;
}
.brand__en {
  font-size: var(--text-small);
}

/* 캐릭터 라인업 그림: 칸 높이에 맞춰 비율을 지키며 줄어든다 (object-fit: contain).
   칸이 그림보다 길면 그림을 아래쪽에 붙여, 아래 스티커가 언제나 캐릭터에 걸쳐 붙게 한다 */
.start-hero {
  position: relative;
  flex: 1 1 0;
  min-height: 0;
  margin: var(--space-2) var(--space-2) var(--space-3);
}
.start-hero img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: contain;
  object-position: 50% 100%;
}

/* "이 중에 나는 누구?" 흰 스티커: 그림 아래쪽 가운데에 기울여 붙인다 */
.start-who {
  position: absolute;
  left: 50%;
  bottom: -2px;
  z-index: 1;
  padding: 9px 16px 8px;
  transform: translateX(-50%) rotate(-3deg);
}

/* 키가 작은 휴대폰(아이폰 SE 사파리처럼 보이는 높이 600px 이하): 노란 면이 줄어 그림이 작아지면
   스티커가 아래 줄 캐릭터를 거의 가렸다 (묶음 1 알려진 문제). 그래서 스티커를 노란 면 아래 테두리에 걸쳐 붙인다
   (스티커 가운데 = 테두리 선). 노란 면 아래 여백(--space-3) + 스티커 높이의 절반(약 19px)만큼 내린다 */
@media (max-height: 600px) {
  .start-who {
    bottom: calc((var(--space-3) + 19px) * -1);
  }
}

/* ---------- 2. 제목 · 소개 · 소요 시간 ---------- */
.start-body {
  padding-top: var(--space-6);
}

/* 화면이 바뀔 때 JS가 제목으로 초점을 옮긴다. 제목은 누르는 것이 아니라서 초점 고리는 그리지 않는다 */
.start-title:focus {
  outline: none;
}

.start-lead {
  margin-top: var(--space-2);
  font-size: var(--text-lead);           /* 17px (D-41 ⑧, C안 시안 값) */
  font-weight: var(--weight-regular);
  line-height: var(--leading-body);
}

.start-time {
  margin-top: var(--space-4);
}

/* ---------- 3. 맨 아래: 시작 버튼 · 오류 안내 · 개인정보 안내 ---------- */
.start-foot {
  margin-top: auto;       /* 화면 맨 아래로 밀어 붙인다 */
  padding-top: var(--space-6);
}

.start-privacy {
  margin-top: var(--space-3);
}

/* 콘텐츠를 못 불러왔을 때 시작 버튼 자리에 보이는 안내.
   누를 수 있는 버튼으로 오해하지 않게 그림자 없이 점선 테두리 + 크림 바탕으로 둔다 */
.start-error {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--btn-height);
  padding: var(--space-3) var(--space-4);
  border: var(--border-width) dashed var(--color-ink);
  border-radius: var(--radius-md);
  background-color: var(--color-bg);
  font-size: var(--text-choice);
  font-weight: var(--weight-heavy);
  line-height: var(--leading-snug);
  text-align: center;
}