@font-face {
  font-family: Pretendard;
  src: url("fonts/Pretendard-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
}

body {
  margin: 0;
  color: #fff;
  background: #003390;
  font-family: Pretendard, "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif;
}

.welcome {
  display: grid;
  justify-items: center;
  align-items: end;
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
  background: linear-gradient(to bottom, #ffbf00 3.103%, #3396d7 61.241%, #003390);
  background-size: 100% 112.7%;
  background-position: center bottom;
}

.welcome__scene {
  position: relative;
  container-type: inline-size;
  width: min(100%, calc(100vh * 1194 / 740));
  width: min(100%, calc(100svh * 1194 / 740));
  aspect-ratio: 1194 / 740;
}

.welcome__arch {
  position: absolute;
  inset: 15.135% 20.1% 0;
  border-radius: 50% 50% 0 0 / 57.3% 57.3% 0 0;
  background: rgb(255 255 255 / 20%);
}

.welcome__illustrations,
.welcome__logo {
  position: absolute;
  display: block;
  height: auto;
}

.welcome__illustrations {
  top: 20.95%;
  left: 23.45%;
  width: 51.8%;
}

.welcome__logo {
  top: 4.73%;
  left: 50%;
  width: 8.678%;
  transform: translateX(-50%);
}

.welcome__heading {
  position: absolute;
  inset: 47.57% 0 auto;
  margin: 0;
  text-align: center;
  font-size: clamp(24px, 4.02vw, 48px);
  font-size: clamp(24px, 4.02cqw, 64px);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -.02em;
}

.welcome__start {
  position: absolute;
  bottom: 11.62%;
  left: 50%;
  display: grid;
  place-items: center;
  box-sizing: border-box;
  width: max(144px, 20.1%);
  min-height: 48px;
  min-height: max(48px, 5.025cqw);
  border: 2px solid #e5e5e5;
  border-radius: clamp(12px, 1.34vw, 20px);
  box-shadow: 0 6px #e5e5e5;
  transform: translateX(-50%);
  background: #fff;
  color: #000;
  font-size: clamp(16px, 1.843cqw, 28px);
  font-weight: 600;
  line-height: 1.36;
  letter-spacing: -.01em;
  text-decoration: none;
}

.welcome__start:focus-visible {
  outline: 3px solid #003390;
  outline-offset: 5px;
}

.welcome__start:active {
  box-shadow: 0 2px #e5e5e5;
  transform: translate(-50%, 4px);
}

@media (max-aspect-ratio: 5/4) {
  .welcome__scene {
    --art-width: min(88vw, 34rem);
    --art-top: max(8rem, calc(50% - var(--art-width) * .5));
    width: 100%;
    min-height: max(32rem, 100vh);
    min-height: max(32rem, 100svh);
    aspect-ratio: auto;
  }

  .welcome__arch {
    inset: calc(var(--art-top) - 1.5rem) max(4%, calc(50% - 19rem)) 0;
    border-radius: 50% 50% 0 0 / min(44vw, 19rem) min(44vw, 19rem) 0 0;
  }

  .welcome__illustrations {
    top: var(--art-top);
    left: 50%;
    width: var(--art-width);
    transform: translateX(-50%);
  }

  .welcome__logo {
    top: max(2rem, calc(env(safe-area-inset-top) + 1rem));
    width: clamp(80px, 19vw, 104px);
  }

  .welcome__heading {
    top: calc(var(--art-top) + var(--art-width) * .32);
    font-size: clamp(18px, 5.7vw, 38px);
  }

  .welcome__start {
    bottom: max(2rem, calc(env(safe-area-inset-bottom) + 1rem));
    width: clamp(160px, 50vw, 240px);
  }
}