@font-face {
  font-family: "Montserrat";
  src: url("assets/fonts/Montserrat-VF.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* 로고 글자가 검정이라 밝은 무지개 배경에 진한 글자로 고정한다. */
:root {
  color-scheme: light;
  --ink: #0b0b0b;
  --paper: #ffffff;
  --font: "Montserrat", "Apple SD Gothic Neo", "Pretendard", "Malgun Gothic", "Noto Sans KR", system-ui, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  word-break: keep-all;
  -webkit-font-smoothing: antialiased;
}

/* 무지개 배경: 100vmax 주기로 반복되는 띠를 정확히 한 주기만큼 옮겨 끊김 없이 순환한다. */
body::before {
  content: "";
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: -1;
  width: 400vmax;
  height: 400vmax;
  margin: -200vmax 0 0 -200vmax;
  background: repeating-linear-gradient(
    90deg,
    #ff9aa2 0,
    #ffc48a 14.2857vmax,
    #fff08a 28.5714vmax,
    #a0f0a8 42.8571vmax,
    #8fd8ff 57.1429vmax,
    #aeb4ff 71.4286vmax,
    #e3a6ff 85.7143vmax,
    #ff9aa2 100vmax
  );
  animation: rainbow 16s linear infinite;
  will-change: transform;
}

@keyframes rainbow {
  from { transform: rotate(25deg) translateX(-50vmax); }
  to { transform: rotate(25deg) translateX(50vmax); }
}

@media (prefers-reduced-motion: reduce) {
  body::before { animation: none; transform: rotate(25deg); }
}

main {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  justify-content: center;
  padding: 48px 16px;
  text-align: center;
}

.logo {
  display: block;
  width: clamp(160px, 24vw, 240px);
  height: auto;
  margin-bottom: 48px;
}

h1 {
  margin: 0 0 24px;
  font-size: clamp(1.75rem, 7.5vw, 4.5rem);
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  h1 {
    background: linear-gradient(90deg, #a8001c, #5a13a0, #0a2f8f);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}

.soon {
  margin: 0;
  font-size: clamp(1.5rem, 5vw, 2.5rem);
  font-weight: 900;
  letter-spacing: 0.08em;
}

footer {
  padding: 24px 16px;
  font-size: 0.9rem;
  text-align: center;
}