@font-face {
  font-family: "Cafe24ShiningStar";
  src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_twelve@1.1/Cafe24Shiningstar.woff") format("woff");
  font-display: swap;
  font-style: normal;
  font-weight: normal;
}

.for-jiwoo-page {
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
  background: #041a45;
  color: #f7df8e;
}

.for-jiwoo-page .subpage-header {
  position: fixed;
  top: 0;
  left: 50%;
  z-index: 20;
  width: min(86rem, calc(100vw - 2.8rem));
  padding: 1.35rem 0 1rem;
  border-bottom: 0;
  background: transparent;
  box-shadow: none;
  transform: translateX(-50%);
}

.for-jiwoo-page .subpage-brand,
.for-jiwoo-page .subpage-nav a {
  color: rgba(255, 225, 143, 0.95);
  text-shadow: 0 1px 8px rgba(0, 17, 52, 0.46);
}

.for-jiwoo-page .subpage-nav {
  color: rgba(255, 225, 143, 0.68);
}

.for-jiwoo-page .subpage-nav a[aria-current="page"] {
  color: #fff0b0;
}

.for-jiwoo-main {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  isolation: isolate;
}

.for-jiwoo-backdrop,
.for-jiwoo-backdrop::after {
  position: fixed;
  inset: 0;
}

.for-jiwoo-backdrop {
  z-index: -2;
  background: url("../../assets/lab/for-jiwoo/background-desktop.png") center center / cover no-repeat;
}

.for-jiwoo-backdrop::after {
  content: "";
  z-index: -1;
  background:
    radial-gradient(circle at center, rgba(0, 0, 0, 0) 34%, rgba(0, 7, 28, 0.2) 100%),
    linear-gradient(180deg, rgba(0, 9, 36, 0.16), rgba(0, 10, 34, 0.28));
  pointer-events: none;
}

.for-jiwoo-stage {
  display: grid;
  min-height: 100vh;
  min-height: 100svh;
  place-items: center;
  padding: 5.7rem 1.4rem 3rem;
}

.for-jiwoo-memory-stack {
  display: grid;
  justify-items: center;
  gap: 0.85rem;
  width: min(100%, 34rem);
}

.for-jiwoo-message {
  width: 100%;
  margin: 0;
  color: #ffdd74;
  font-family: "Cafe24ShiningStar", "Apple Chancery", "Apple SD Gothic Neo", "Malgun Gothic", cursive;
  font-size: clamp(1.7rem, 2.7vw, 2.45rem);
  font-weight: 400;
  line-height: 1.02;
  text-align: center;
  text-shadow:
    0 1px 3px rgba(0, 8, 32, 0.76),
    0 0 12px rgba(255, 213, 96, 0.16);
  word-break: keep-all;
}

.for-jiwoo-message-bottom {
  font-size: clamp(1.9rem, 3vw, 2.72rem);
}

.for-jiwoo-message-line + .for-jiwoo-message-line::before {
  content: " ";
}

.for-jiwoo-video-shell {
  width: clamp(17rem, 24vw, 27rem);
  max-width: calc(100vw - 3rem);
  max-height: calc(100svh - 14rem);
  aspect-ratio: 768 / 1084;
  overflow: hidden;
  border: 1px solid rgba(255, 226, 143, 0.3);
  border-radius: 8px;
  background: rgba(4, 13, 30, 0.38);
  box-shadow: 0 14px 42px rgba(0, 8, 30, 0.34);
}

.for-jiwoo-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  background:
    #06132f
    url("../../assets/lab/for-jiwoo/love-name-poster.jpg")
    center center / cover no-repeat;
  cursor: pointer;
}

.for-jiwoo-video::-webkit-media-controls,
.for-jiwoo-video::-webkit-media-controls-panel,
.for-jiwoo-video::-webkit-media-controls-play-button,
.for-jiwoo-video::-webkit-media-controls-timeline,
.for-jiwoo-video::-webkit-media-controls-current-time-display,
.for-jiwoo-video::-webkit-media-controls-time-remaining-display,
.for-jiwoo-video::-webkit-media-controls-mute-button,
.for-jiwoo-video::-webkit-media-controls-volume-slider,
.for-jiwoo-video::-webkit-media-controls-fullscreen-button {
  display: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.for-jiwoo-video:focus-visible {
  outline: 2px solid rgba(255, 226, 143, 0.5);
  outline-offset: -4px;
}

.for-jiwoo-page.is-memory-video-played .for-jiwoo-video {
  cursor: default;
}

.for-jiwoo-signature {
  position: fixed;
  right: 4.25rem;
  bottom: 1.35rem;
  z-index: 21;
  margin: 0;
  color: rgba(255, 226, 143, 0.9);
  font-family: "Cafe24ShiningStar", "Apple Chancery", "Apple SD Gothic Neo", "Malgun Gothic", cursive;
  font-size: clamp(1.35rem, 2vw, 1.9rem);
  line-height: 1;
  text-align: center;
  text-shadow: 0 1px 6px rgba(0, 8, 32, 0.64);
  pointer-events: none;
}

.for-jiwoo-music-button {
  position: fixed;
  right: 1.1rem;
  bottom: 1.1rem;
  z-index: 22;
  display: grid;
  width: 2.55rem;
  height: 2.55rem;
  place-items: center;
  border: 1px solid rgba(255, 226, 143, 0.32);
  border-radius: 999px;
  background: rgba(4, 13, 30, 0.48);
  color: #ffe28f;
  font-size: 1.22rem;
  line-height: 1;
  cursor: pointer;
  backdrop-filter: blur(8px);
}

.for-jiwoo-music-button:hover,
.for-jiwoo-music-button:focus-visible {
  background: rgba(4, 13, 30, 0.64);
  outline: 2px solid rgba(255, 226, 143, 0.34);
  outline-offset: 2px;
}

.for-jiwoo-page.is-music-requested .for-jiwoo-music-button {
  color: #fff4bd;
  background: rgba(4, 13, 30, 0.66);
}

.for-jiwoo-music-audio {
  position: fixed;
  right: 0;
  bottom: 0;
  width: 1px;
  height: 1px;
  border: 0;
  opacity: 0;
  pointer-events: none;
}

.for-jiwoo-loader {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  background:
    linear-gradient(180deg, rgba(0, 9, 36, 0.36), rgba(0, 10, 34, 0.58)),
    url("../../assets/lab/for-jiwoo/background-desktop.png") center center / cover no-repeat,
    #041a45;
  transition:
    opacity 360ms ease,
    visibility 360ms ease;
}

.for-jiwoo-loader-message {
  margin: 0;
  color: #ffdd74;
  font-family: "Cafe24ShiningStar", "Apple Chancery", "Apple SD Gothic Neo", "Malgun Gothic", cursive;
  font-size: clamp(2.4rem, 5.6vw, 5.2rem);
  font-weight: 400;
  line-height: 1;
  text-align: center;
  text-shadow:
    0 1px 4px rgba(0, 8, 32, 0.78),
    0 0 18px rgba(255, 213, 96, 0.18);
}

.for-jiwoo-page:not(.is-loading) .for-jiwoo-loader {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

@media (max-width: 720px) {
  .for-jiwoo-page .subpage-header {
    width: min(100% - 1.6rem, 86rem);
    align-items: flex-start;
    padding-top: 1rem;
  }

  .for-jiwoo-page .subpage-nav {
    display: none;
  }

  .for-jiwoo-page .subpage-brand {
    font-size: 0.82rem;
  }

  .for-jiwoo-backdrop {
    background-image: url("../../assets/lab/for-jiwoo/background-mobile.png");
  }

  .for-jiwoo-loader {
    background:
      linear-gradient(180deg, rgba(0, 9, 36, 0.3), rgba(0, 10, 34, 0.54)),
      url("../../assets/lab/for-jiwoo/background-mobile.png") center center / cover no-repeat,
      #041a45;
  }

  .for-jiwoo-loader-message {
    font-size: clamp(2.35rem, 13vw, 4.2rem);
  }

  .for-jiwoo-stage {
    padding: 3.1rem 1rem 3.9rem;
  }

  .for-jiwoo-memory-stack {
    gap: 0.7rem;
    width: 100%;
  }

  .for-jiwoo-message {
    font-size: clamp(1.72rem, 8.4vw, 2.3rem);
    max-width: 13em;
  }

  .for-jiwoo-message-bottom {
    font-size: clamp(1.9rem, 9vw, 2.45rem);
  }

  .for-jiwoo-message-top .for-jiwoo-message-line {
    display: block;
  }

  .for-jiwoo-message-top .for-jiwoo-message-line + .for-jiwoo-message-line::before {
    content: "";
  }

  .for-jiwoo-video-shell {
    width: min(70vw, 20rem);
    max-height: calc(100svh - 13.8rem);
  }

  .for-jiwoo-music-button {
    right: 0.85rem;
    bottom: 0.85rem;
  }

  .for-jiwoo-signature {
    left: 50%;
    right: auto;
    bottom: 0.75rem;
    font-size: clamp(1.25rem, 6vw, 1.7rem);
    transform: translateX(-50%);
  }
}

@media (orientation: landscape) and (max-height: 620px) {
  .for-jiwoo-stage {
    padding-top: 4.7rem;
    padding-bottom: 1.2rem;
  }

  .for-jiwoo-memory-stack {
    gap: 0.45rem;
  }

  .for-jiwoo-message {
    font-size: 1.05rem;
  }

  .for-jiwoo-video-shell {
    width: min(22vw, 15rem);
    max-height: calc(100svh - 7.2rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  .for-jiwoo-loader {
    transition: none;
  }
}