/* ========================================
   TYPOGRAPHY - 텍스트 및 폰트 스타일
   ======================================== */

/* 기본 body 스타일 */
body {
  font-family: var(--font-family);
  background:
    linear-gradient(
      135deg,
      #3a3d5c,
      #4a4d6c,
      #5a5d7c
    );
  color: #c1c3e0;
  min-height: 100vh;
  overflow: hidden auto; /* 가로 스크롤만 제거 */ /* 세로 스크롤 허용 (마우스 휠) */
}

/* 기본 제목 */
.title {
  font-size:
    clamp(
      1.5rem,
      6vw,
      3rem
    ); /* 화면 크기에 따라 유동적으로 조정 (최소 1.5rem, 최대 3rem) */

  font-weight: 700;
  color: #e0e0e0;
  margin: 0 auto 0.5rem;
  text-align: center;
  text-shadow: 0 2px 4px rgb(0 0 0 / 30%);
  white-space: nowrap; /* 한 줄로 유지 */
  overflow: hidden; /* 넘치는 텍스트 숨김 */
  text-overflow: ellipsis; /* 넘치는 텍스트는 말줄임표로 표시 (필요시) */
}

/* 그라데이션 텍스트 */
.gradient-text {
  background:
    linear-gradient(
      135deg,
      #8b9cf7 0%,
      #9d7bf0 50%,
      #f5a5fc 100%
    );
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 30px rgb(139 156 247 / 40%);
}

/* 부제목 */
.subtitle {
  font-size:
    clamp(
      0.7rem,
      2.5vw,
      1.2rem
    ); /* 화면 크기에 따라 유동적으로 조정 (최소 0.7rem, 최대 1.2rem) */

  color: #c1c3e0;
  max-width: 100%; /* 화면이 좁아져도 전체 너비 사용 */
  margin: 0 auto;
  line-height: 1.6;
  white-space: nowrap; /* 한 줄로 유지 */
  overflow: hidden; /* 넘치는 텍스트 숨김 */
  text-overflow: ellipsis; /* 넘치는 텍스트는 말줄임표로 표시 (필요시) */
}