/*
  이 변수들은 페이지 전체에서 재사용하는 색상과 그림자입니다.
  사이트 분위기를 바꾸고 싶다면 개별 규칙보다 먼저 여기의 값을 수정하세요.
*/
:root {
  --page-start: #eff6ff;
  --page-end: #dbeafe;
  --card-background: #ffffff;
  --title-color: #1e3a8a;
  --text-color: #334155;
  --card-shadow: 0 20px 45px rgba(30, 64, 175, 0.16);
}

/*
  브라우저마다 다른 기본 여백을 제거하고, 요소 크기 계산을 단순하게 합니다.
  이후 추가하는 요소도 이 규칙을 자동으로 적용받습니다.
*/
* {
  box-sizing: border-box;
}

/*
  body가 화면 전체 높이를 사용하도록 만들어 카드가 세로 가운데에 배치됩니다.
  배경의 부드러운 색 변화는 별도 이미지 없이 페이지에 깊이를 더합니다.
*/
body {
  min-height: 100vh;
  margin: 0;
  background: linear-gradient(135deg, var(--page-start), var(--page-end));
  color: var(--text-color);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
    "Segoe UI", sans-serif;
}

/*
  page-shell은 카드의 위치를 담당합니다.
  display: grid와 place-items: center를 사용해 가로·세로 모두 가운데로 정렬합니다.
*/
.page-shell {
  display: grid;
  min-height: 100vh;
  place-items: center;
  padding: 24px;
}

/*
  welcome-card는 실제 인사말을 담는 흰색 영역입니다.
  max-width가 있어 큰 화면에서도 텍스트 줄이 지나치게 길어지지 않습니다.
*/
.welcome-card {
  width: min(100%, 560px);
  padding: 56px 40px;
  border-radius: 24px;
  background: var(--card-background);
  box-shadow: var(--card-shadow);
  text-align: center;
}

/* 제목의 크기는 clamp로 관리합니다. 화면 폭에 따라 부드럽게 커지되 최소·최대 크기를 넘지 않습니다. */
h1 {
  margin: 0;
  color: var(--title-color);
  font-size: clamp(2.5rem, 8vw, 4.5rem);
  letter-spacing: -0.05em;
  line-height: 1.05;
}

/* 소개 문구는 제목과 충분히 분리해 읽기 쉬운 시각적 위계를 만듭니다. */
p {
  margin: 20px 0 0;
  font-size: clamp(1.1rem, 3vw, 1.4rem);
  line-height: 1.6;
}

/*
  좁은 모바일 화면에서는 카드 안쪽 여백을 줄여 콘텐츠가 답답하지 않게 합니다.
  나머지 레이아웃은 위의 반응형 단위(clamp, min)로 자동 조정됩니다.
*/
@media (max-width: 480px) {
  .welcome-card {
    padding: 40px 24px;
    border-radius: 18px;
  }
}