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

html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  touch-action: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

body {
  background: #fff;
  position: fixed;
  width: 100%;
  height: 100%;
}

.page {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

:root {
  --frame-vh: 100vh;
  --frame-width: min(100vw, calc(var(--frame-vh) * 9 / 16));
  --frame-height: calc(var(--frame-width) * 16 / 9);
}

@supports (height: 100svh) {
  :root {
    --frame-vh: 100svh;
  }

  html,
  body {
    height: 100svh;
  }

  .page {
    height: 100svh;
  }
}

@supports (height: 100dvh) {
  :root {
    --frame-vh: 100dvh;
  }

  html,
  body {
    height: 100dvh;
  }

  .page {
    height: 100dvh;
  }
}

@font-face {
  font-family: "GmarketSans";
  src: url("font/GmarketSansTTFLight.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "HakgyoansimDunggeunmiso";
  src: url("font/Hakgyoansim Dunggeunmiso TTF R.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "KCCHanbit";
  src: url("font/KCC-Hanbit.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Paperlogy";
  src: url("font/Paperlogy-2ExtraLight.ttf") format("truetype");
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}

.hero {
  position: relative;
  width: var(--frame-width);
  height: var(--frame-height);
  max-height: 100svh;
  aspect-ratio: 9 / 16;
  display: flex;
  align-items: center;
  justify-content: center;
}

.main-image {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: cover;
  object-position: center;
}

.main-illustration {
  position: absolute;
  left: 50%;
  top: 44%;
  transform: translate(-50%, -50%);
  width: 90%;
  max-width: 640px;
  height: auto;
}

.main-button {
  padding: 14px 36px;
  border: none;
  border-radius: 999px;
  background: linear-gradient(90deg, #ba8aff, #8f70ff);
  color: #ffffff;
  font-family: "HakgyoansimDunggeunmiso", sans-serif;
  font-size: 17pt;
  font-weight: 400;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.2s ease;
}

.main-button:hover,
.main-button:focus-visible,
.main-button:active {
  background: linear-gradient(90deg, #c5a0ff, #a18cff);
}

.main-button--landing {
  position: absolute;
  left: 50%;
  top: 70%;
  transform: translateX(-50%);
}

.button-caption {
  position: absolute;
  left: 50%;
  top: 79%;
  transform: translateX(-50%);
  margin: 0;
  color: #000000;
  font-family: "Paperlogy", sans-serif;
  font-size: 11pt;
  font-weight: 200;
  line-height: 20pt;
  text-align: center;
}

.button-caption span {
  display: block;
  white-space: nowrap;
}

.social-links {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: center;
}

.social-link {
  display: inline-flex;
  width: 28px;
  height: 28px;
}

.social-link img {
  width: 100%;
  height: 100%;
  display: block;
}

.social-links--landing {
  position: absolute;
  left: 50%;
  top: 88%;
  transform: translateX(-50%);
}

.social-links--affirmation {
  position: absolute;
  left: 50%;
  top: 88%;
  transform: translateX(-50%);
}

.footer-text {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 170px;
  height: auto;
}

.footer-text--landing {
  top: 92%;
}

.footer-text--affirmation {
  top: 92%;
}

.affirmation {
  position: relative;
  width: var(--frame-width);
  height: var(--frame-height);
  max-height: 100svh;
  aspect-ratio: 9 / 16;
}

.affirmation-bg {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.affirmation-card {
  position: absolute;
  left: 0;
  top: 12%;
  width: 100vw;
  height: calc(76% - 12%);
  padding: 0;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: 12px;
  overflow: hidden;
  box-sizing: border-box;
}

.affirmation-title {
  margin: 0;
  color: #aa76e5;
  font-family: "KCCHanbit", sans-serif;
  font-size: 21pt;
  font-weight: 400;
  line-height: 26pt;
  white-space: pre-line;
  text-indent: 0.6em;
  word-wrap: break-word;
  word-break: keep-all;
  overflow-wrap: break-word;
  max-width: 90%;
  box-sizing: border-box;
  position: relative;
  transform: translateY(-22%);
}

.affirmation-desc {
  margin: 0;
  color: #000000;
  font-family: "Paperlogy", sans-serif;
  font-size: 13pt;
  font-weight: 200;
  line-height: 20pt;
  white-space: pre-line;
  text-indent: 0.6em;
  word-wrap: break-word;
  word-break: keep-all;
  overflow-wrap: break-word;
  max-width: 90%;
  box-sizing: border-box;
  position: relative;
  transform: translateY(-22%);
}

.affirmation-buttons {
  position: absolute;
  left: 50%;
  top: 76%;
  transform: translateX(-50%);
  display: flex;
  gap: 12px;
}

.secondary-button {
  padding: 14px 28px;
  border: none;
  border-radius: 999px;
  background: linear-gradient(90deg, #ffffff, #dfdaff);
  color: #8f70ff;
  font-family: "HakgyoansimDunggeunmiso", sans-serif;
  font-size: 15pt;
  font-weight: 400;
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.2s ease;
}

.secondary-button:hover,
.secondary-button:focus-visible,
.secondary-button:active {
  background: linear-gradient(90deg, #ffffff, #cfc7ff);
}

@media (hover: none) and (pointer: coarse) {
  .main-button:active {
    background: linear-gradient(90deg, #c5a0ff, #a18cff);
  }

  .secondary-button:active {
    background: linear-gradient(90deg, #ffffff, #cfc7ff);
  }
}

.logo {
  position: absolute;
  left: 4%;
  top: 4%;
  width: 120px;
  height: auto;
}

.logo-link {
  position: absolute;
  left: 4%;
  top: 4%;
  z-index: 2;
}

.logo-link .logo {
  position: static;
  display: block;
}

.title-image {
  position: absolute;
  left: 2%;
  top: 12%;
  width: 240px;
  height: auto;
}

.subtitle {
  position: absolute;
  left: 4%;
  top: 18%;
  margin: 0;
  color: #000000;
  font-family: "GmarketSans", sans-serif;
  font-weight: 300;
  letter-spacing: 0;
}

.subtitle-line {
  display: block;
  white-space: nowrap;
}

.subtitle-line--primary {
  font-size: 16pt;
  line-height: 18pt;
}

.subtitle-line--secondary {
  font-size: 12pt;
  line-height: 18pt;
}


@media (max-width: 767px) {
  html {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    height: 100dvh;
    overflow: hidden;
    touch-action: none;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
    -ms-touch-action: none;
  }

  body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    height: 100dvh;
    overflow: hidden;
    background: transparent;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    touch-action: none;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
    -ms-touch-action: none;
  }
  
  img {
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    pointer-events: auto;
  }
  
  .hero,
  .affirmation {
    touch-action: none;
    -ms-touch-action: none;
  }

  .page {
    align-items: stretch;
    justify-content: stretch;
    height: 100vh;
    height: 100dvh;
    min-height: 100vh;
    min-height: 100dvh;
    margin: 0;
    padding: 0;
    position: relative;
  }

  .hero,
  .affirmation {
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    min-height: 100vh;
    min-height: 100dvh;
    max-height: none;
    overflow: hidden;
    aspect-ratio: auto;
    position: relative;
    margin: 0;
    padding: 0;
  }
  
  .main-image,
  .affirmation-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    min-width: 100vw;
    min-height: 100vh;
    min-height: 100dvh;
    object-fit: cover;
    object-position: center center;
    display: block;
    margin: 0;
    padding: 0;
  }

  .title-image {
    width: min(68vw, 180px);
    top: 12.5%;
  }

  .subtitle {
    max-width: 92%;
  }

  .subtitle-line--primary {
    font-size: 12pt;
    line-height: 18pt;
    white-space: normal;
  }

  .main-illustration {
    width: 76%;
    max-height: 56vh;
    top: 44%;
  }

  .main-button--landing {
    top: 67%;
  }

  .button-caption {
    top: 75%;
    font-size: 9pt;
    line-height: 17pt;
  }

  .social-links--landing {
    top: 88%;
  }

  .footer-text--landing {
    top: 92%;
    width: 135px;
  }

  .affirmation-card {
    top: 12%;
    width: 100vw;
    height: calc(74% - 12%);
    padding: 0;
    overflow: hidden;
    left: 0;
    transform: none;
  }
  
  .affirmation-title,
  .affirmation-desc {
    max-width: 90%;
    word-wrap: break-word;
    word-break: keep-all;
    overflow-wrap: break-word;
  }

  .affirmation-buttons {
    top: 74%;
  }

  .social-links--affirmation {
    top: 85.5%;
  }

  .footer-text--affirmation {
    top: 91.5%;
    width: 135px;
  }
}