:root {
  --page-bg: #090909;
  --page-width: 393;
  --page-height: 1595;
  --text: #ffffff;
  --text-dark: #111111;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
  background: var(--page-bg);
}

body {
  font-family: "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", sans-serif;
  color: var(--text);
}

.page-shell {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  background: #090909;
}

.fortune-page {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 0;
  position: relative;
  width: min(100vw, 393px);
  aspect-ratio: 393 / 1595;
  background: #090909;
  overflow: hidden;
}

.landing-page-layer {
  position: relative;
  width: 100%;
  height: 100%;
}

.sit-frame {
  position: absolute;
  left: 50.0534%;
  top: 0;
  width: 100.0514%;
  height: 81.3644%;
  overflow: hidden;
  transform: translateX(-50%);
}

.sit-frame__image {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.partner-name {
  position: absolute;
  left: 41.2101%;
  top: 23.2899%;
  width: 15.5139%;
  z-index: 2;
  margin: 0;
  color: var(--text-dark);
  font-size: 14px;
  line-height: 20px;
  text-align: center;
  text-shadow: 0 0 2px rgba(255, 255, 255, 0.95);
  white-space: nowrap;
}

.fortune-day-count {
  position: absolute;
  left: 31.8051%;
  top: 24.9987%;
  width: 34.0781%;
  z-index: 2;
  margin: 0;
  color: var(--text-dark);
  font-size: 14px;
  line-height: 20px;
  text-align: center;
  text-shadow: 0 0 2px rgba(255, 255, 255, 0.95);
  white-space: nowrap;
}

.heart-text-bound {
  position: absolute;
  left: 22.9008%;
  top: 40.8%;
  width: 51.8835%;
  height: 12.3282%;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 10px;
  overflow: hidden;
}

.heart-text {
  margin: 0;
  color: var(--text-dark);
  font-size: 16px;
  line-height: 20px;
  text-align: center;
  text-shadow: 0 0 2px rgba(255, 255, 255, 0.95);
  overflow-wrap: anywhere;
}

.fortune-title {
  position: absolute;
  left: 29.7565%;
  top: 64.564%;
  width: 40.4347%;
  z-index: 2;
  margin: 0;
  color: #ffffff;
  font-size: 15px;
  line-height: 1.2;
  text-align: center;
  white-space: nowrap;
}

.fortune-luck-bound,
.fortune-color-bound,
.fortune-comfort-bound {
  position: absolute;
  left: 50%;
  width: 66.6667%;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
  overflow: hidden;
  transform: translateX(-50%);
}

.fortune-luck-bound {
  top: 67.35%;
  height: 7.7047%;
}

.fortune-color-bound {
  top: 77.64%;
  height: 7.7047%;
}

.fortune-comfort-bound {
  top: 87.08%;
  height: 7.7047%;
}

.fortune-luck,
.fortune-color,
.fortune-comfort {
  margin: 0;
  color: var(--text-dark);
  font-size: 13px;
  line-height: 1.5;
  text-align: center;
  overflow-wrap: anywhere;
}

.heart-text,
.fortune-luck,
.fortune-color,
.fortune-comfort {
  --reveal-base-y: 0px;
  opacity: 0;
  filter: blur(10px);
  transform: translateY(calc(var(--reveal-base-y) + 10px)) scale(0.985);
  text-shadow:
    0 0 18px rgba(255, 255, 255, 0.42),
    0 0 2px rgba(255, 255, 255, 0.95);
  will-change: opacity, filter, transform, text-shadow;
}

.heart-text {
  --reveal-base-y: 20px;
}

.fortune-reveal.is-visible {
  animation: crystal-reveal 1080ms cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: var(--reveal-delay, 0ms);
}

@keyframes crystal-reveal {
  0% {
    opacity: 0;
    filter: blur(10px);
    transform: translateY(calc(var(--reveal-base-y) + 10px)) scale(0.985);
    text-shadow:
      0 0 22px rgba(255, 255, 255, 0.5),
      0 0 6px rgba(255, 255, 255, 0.3);
  }

  55% {
    opacity: 0.8;
    filter: blur(3px);
    transform: translateY(calc(var(--reveal-base-y) + 2px)) scale(0.995);
    text-shadow:
      0 0 12px rgba(255, 255, 255, 0.28),
      0 0 3px rgba(255, 255, 255, 0.2);
  }

  100% {
    opacity: 1;
    filter: blur(0);
    transform: translateY(var(--reveal-base-y)) scale(1);
    text-shadow: 0 0 2px rgba(255, 255, 255, 0.95);
  }
}

@media (prefers-reduced-motion: reduce) {
  .heart-text,
  .fortune-luck,
  .fortune-color,
  .fortune-comfort {
    opacity: 1;
    filter: none;
    transform: translateY(var(--reveal-base-y)) scale(1);
    text-shadow: 0 0 2px rgba(255, 255, 255, 0.95);
    will-change: auto;
  }

  .fortune-reveal.is-visible {
    animation: none;
  }
}

.group-3 {
  position: absolute;
  left: 46.916%;
  top: 84.4588%;
  width: 5.9135%;
  height: 1.5433%;
  z-index: 2;
}

.group-3__svg {
  display: block;
  width: 100%;
  height: 100%;
}

.group-3__svg path:first-child,
.group-3__svg path:last-child {
  stroke: #ffffff;
  stroke-linecap: round;
  stroke-miterlimit: 10;
}

.group-3__svg path:nth-child(2),
.group-3__svg path:nth-child(3) {
  fill: #1c1a1a;
  stroke: #ffffff;
}

.fortune-cta-copy {
  position: absolute;
  left: 17.5573%;
  top: 86.7955%;
  width: 64.631%;
  z-index: 2;
  margin: 0;
  color: #ffffff;
  font-size: 15px;
  line-height: 1.2;
  text-align: center;
  white-space: nowrap;
}

.frame-2 {
  position: absolute;
  left: 28.7532%;
  top: 89.6121%;
  width: 42.2392%;
  height: 2.0063%;
  z-index: 2;
  border: 1px solid #ffffff;
  border-radius: 5px;
  background: transparent;
  padding: 0;
  color: #ffffff;
  font: inherit;
  font-size: 12px;
  line-height: 1;
  text-align: center;
  cursor: pointer;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}