:root { color-scheme: light; font-family: "Noto Sans KR", -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif; }
* { box-sizing: border-box; }
body {
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  color: #233b53;
  background: radial-gradient(ellipse at 80% 12%, #fff 0%, transparent 58%), radial-gradient(ellipse at 10% 90%, #d5f1ff 0%, transparent 65%), linear-gradient(155deg, #fafbff 0%, #f0f9ff 50%, #e3f5ff 100%);
}
main { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 40px 20px 64px; gap: 34px; }
.logo { position: relative; width: clamp(200px, 28vw, 300px); aspect-ratio: 1; }
.logo img, .logo canvas { display: block; width: 100%; height: 100%; }
.logo img { object-fit: contain; }
.logo canvas { position: absolute; inset: 0; opacity: 0; }
.logo.is-animated img { visibility: hidden; }
.logo.is-animated canvas { opacity: 1; }
h1 { margin: 0; font-size: clamp(23px, 3.8vw, 34px); font-weight: 600; letter-spacing: -.055em; line-height: 1.5; text-align: center; word-break: keep-all; }
@media (max-width: 480px) { main { gap: 26px; padding-bottom: 56px; } .logo { width: 220px; } }
@media (prefers-reduced-motion: reduce) { .logo.is-animated img { visibility: visible; } .logo canvas { display: none; } }