html, body {
  margin: 0;
  overflow: hidden;
}

.stage {
  box-sizing: border-box;
  min-height: 100vh;
  display: grid;
  place-items: center;
  margin: 0;
  background: #17141a;
  font-family: -apple-system, "Segoe UI", "Noto Sans KR", sans-serif;
  padding: clamp(8px, 4vw, 24px);
}

@property --sky-top {
  syntax: "<color>";
  inherits: true;
  initial-value: #807eb6;
}
@property --sky-mid {
  syntax: "<color>";
  inherits: true;
  initial-value: #b38fa8;
}
@property --sky-low {
  syntax: "<color>";
  inherits: true;
  initial-value: #e6b7ab;
}
@property --stop-a {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 44%;
}
@property --stop-b {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 63%;
}
@property --sun-y {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 56%;
}
@property --sun {
  syntax: "<color>";
  inherits: true;
  initial-value: #e4bca4;
}
@property --sea-top {
  syntax: "<color>";
  inherits: true;
  initial-value: #bc8d8f;
}
@property --sea-deep {
  syntax: "<color>";
  inherits: true;
  initial-value: #3e5c8a;
}
@property --glint-a {
  syntax: "<number>";
  inherits: true;
  initial-value: 0.98;
}
@keyframes sunset {
  0% {
    --sky-top: #a1c1e3;
    --sky-mid: #bacee8;
    --sky-low: #f0e2de;
    --stop-a: 30%;
    --stop-b: 66%;
    --sun-y: 32.0%;
    --sun: #ffe9bf;
    --sea-top: #b9c0cc;
    --sea-deep: #5480aa;
    --glint-a: 1;
  }
  30% {
    --sky-top: #96a0d6;
    --sky-mid: #c0b3c3;
    --sky-low: #ffd0a6;
    --stop-a: 38%;
    --stop-b: 64%;
    --sun-y: 47.0%;
    --sun: #ffd4a2;
    --sea-top: #c3b4a7;
    --sea-deep: #5480aa;
    --glint-a: 1;
  }
  55% {
    --sky-top: #807eb6;
    --sky-mid: #b38fa8;
    --sky-low: #e6b7ab;
    --stop-a: 44%;
    --stop-b: 63%;
    --sun-y: 56.0%;
    --sun: #e4bca4;
    --sea-top: #bc8d8f;
    --sea-deep: #3e5c8a;
    --glint-a: 0.98;
  }
  80% {
    --sky-top: #5c5c9c;
    --sky-mid: #966d96;
    --sky-low: #df959a;
    --stop-a: 48%;
    --stop-b: 62%;
    --sun-y: 62.0%;
    --sun: #e1a99c;
    --sea-top: #ac6f85;
    --sea-deep: #304474;
    --glint-a: 0.3;
  }
  100% {
    --sky-top: #393c74;
    --sky-mid: #5f5283;
    --sky-low: #99729a;
    --stop-a: 50%;
    --stop-b: 62%;
    --sun-y: 67.0%;
    --sun: #e09a97;
    --sea-top: #705b86;
    --sea-deep: #243062;
    --glint-a: 0;
  }
}
@keyframes shimmer {
  50% {
    transform: translate(0.6em, 7px);
  }
  to {
    transform: translate(0, 14px);
  }
}
.sc {
  position: relative;
  width: min(92vw, 160vh - 12.8vw);
  aspect-ratio: 480/300;
  font-size: calc(min(92vw, 160vh - 12.8vw) / 30);
  margin: 0 auto;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 14px 24px rgba(23, 20, 26, 0.32);
  background: #17141a;
  animation: sunset 3.2s ease-in-out infinite alternate;
}

.sc__sky {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 65% var(--sun-y), color-mix(in srgb, var(--sun) 55%, transparent) 0, transparent 7.5em), radial-gradient(circle at 65% var(--sun-y), var(--sun) 0.94em, transparent 1.04em), linear-gradient(180deg, var(--sky-top) 0%, var(--sky-mid) var(--stop-a), var(--sky-low) var(--stop-b));
}

.sc__sea {
  position: absolute;
  left: 0;
  right: 0;
  top: 62%;
  bottom: 0;
  overflow: hidden;
  background: linear-gradient(180deg, color-mix(in srgb, var(--sky-low) 45%, transparent) 0, transparent 40%), linear-gradient(180deg, var(--sea-top), var(--sea-deep));
}

.sc__glint {
  position: absolute;
  inset: -1em 0;
  background: repeating-linear-gradient(180deg, color-mix(in srgb, var(--sun) 55%, white) 0 2px, transparent 2px 7px), repeating-linear-gradient(180deg, white 0 1px, transparent 1px 14px);
  clip-path: polygon(61% 0, 69% 0, 82% 100%, 48% 100%);
  mask-image: linear-gradient(90deg, transparent 40%, #000 56%, #000 74%, transparent 90%), repeating-linear-gradient(90deg, #000 0 6%, transparent 6% 7.5%, #000 7.5% 15%, transparent 15% 17%, #000 17% 24%, transparent 24% 25%);
  mask-composite: intersect;
  opacity: var(--glint-a);
  animation: shimmer 1.6s linear infinite;
}

.sc__toggle {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.sc__status {
  position: absolute;
  left: 12px;
  top: 12px;
  max-width: 62%;
  margin: 0;
  padding: 4px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.85);
  color: #17141a;
  font-weight: 500;
  font-size: 11px;
  line-height: 1.4;
  pointer-events: none;
}

.sc__btn {
  position: absolute;
  right: 12px;
  bottom: 12px;
  margin: 0;
  padding: 4px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.85);
  color: #17141a;
  font-weight: 500;
  font-size: 12px;
  line-height: 1.4;
  cursor: pointer;
}

.sc__on {
  display: none;
}

.sc__toggle:checked ~ .sc__btn .sc__on {
  display: inline;
}

.sc__toggle:checked ~ .sc__btn .sc__off {
  display: none;
}

.sc__toggle:focus-visible ~ .sc__btn {
  outline: 2px solid #ffffff;
  outline-offset: 2px;
}

.sc:has(.sc__toggle:checked),
.sc:has(.sc__toggle:checked) .sc__glint {
  animation-play-state: paused;
}

@media (max-width: 340px) {
  .sc__btn {
    font-size: 10px;
    padding: 4px 8px;
  }
  .sc__status {
    font-size: 10px;
    max-width: 58%;
  }
}
@media (prefers-reduced-motion: reduce) {
  .sc, .sc__glint {
    animation: none;
  }
}