@font-face {
  font-family: Pretendard;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("assets/PretendardVariable.woff2") format("woff2");
}

:root {
  color-scheme: light;
  font-family: Pretendard, "Noto Sans KR", sans-serif;
  color: #293447;
  background: #fffefe;
  font-synthesis: none;
  -webkit-text-size-adjust: 100%;
}

* { box-sizing: border-box; }

body, p, h1 { margin: 0; }

.notice {
  position: relative;
  isolation: isolate;
  min-height: max(920px, 100svh);
  overflow: hidden;
}

.notice__background {
  position: absolute;
  z-index: -1;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center bottom;
  opacity: .9;
  pointer-events: none;
}

.notice__inner {
  width: calc(100% - 80px);
  max-width: 1462px;
  margin-inline: auto;
  padding-block: 159px;
}

.notice__content { width: 640px; max-width: 100%; }

.notice__label {
  display: table;
  padding: 4px 8px;
  border-radius: 2px;
  background: #f5f5f5;
  color: #6c7685;
  font-size: 16px;
  font-weight: 500;
  line-height: 22px;
}

h1 {
  margin-top: 12px;
  color: #202634;
  font-size: 36px;
  font-weight: 700;
  line-height: 43px;
  word-break: keep-all;
}

h1 span, .notice__description span { display: block; }

.notice__description {
  margin-top: 34px;
  font-size: 20px;
  font-weight: 400;
  line-height: 33px;
  word-break: keep-all;
}

.notice__description-tight { letter-spacing: -.64px; }

.notice__updates {
  margin-top: 34px;
  font-size: 16px;
  line-height: 22px;
  word-break: keep-all;
}

.notice__updates p { color: #6c7685; letter-spacing: -.64px; }

.notice__website {
  display: inline-block;
  margin-top: 6px;
  color: #0d74c5;
  font-weight: 500;
  text-decoration: underline;
  text-underline-position: under;
  text-decoration-skip-ink: none;
}

.notice__website:hover { color: #075690; }

a:focus-visible { outline: 2px solid #0d74c5; outline-offset: 4px; }

.notice__contact {
  margin-top: 191px;
  font-size: 16px;
  font-style: normal;
  line-height: 22px;
}

.notice__contact a { color: inherit; text-decoration: none; }
.notice__contact a:hover { text-decoration: underline; }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

@media (max-width: 1199px) {
  .notice { min-height: max(820px, 100svh); }
  .notice__inner { padding-block: 96px; }
  .notice__background { object-position: 55% bottom; }
  .notice__content {
    background: radial-gradient(ellipse at 20% 40%, #fffefe 35%, rgb(255 254 254 / .85) 65%, transparent 85%);
  }
  .notice__contact { margin-top: 150px; }
}

@media (max-width: 699px) {
  .notice { min-height: 100svh; padding-bottom: 240px; }
  .notice__inner { width: auto; margin-inline: 24px; padding-block: 56px 0; }
  .notice__content { width: auto; background: none; }
  .notice__background {
    top: auto;
    bottom: 0;
    height: 330px;
    object-position: 76% bottom;
    mask-image: linear-gradient(transparent, #000 35%);
  }
  .notice__label { font-size: 14px; line-height: 20px; }
  h1 { margin-top: 16px; font-size: clamp(25px, 5vw, 32px); line-height: 1.35; }
  h1 span, .notice__description span { display: inline; }
  .notice__description { margin-top: 28px; font-size: 17px; line-height: 1.75; }
  .notice__updates { margin-top: 28px; font-size: 14px; line-height: 1.65; }
  .notice__website { margin-top: 8px; }
  .notice__contact { margin-top: 64px; font-size: 14px; line-height: 1.65; }
}