/* JS 전 화면과 React가 공유하는 8열×4행, 32컷·24FPS. 원본을 유지하고 알 밑면의 좌표만 보정한다. */
.hatch-sprite {
  --hatch-size: 48px;
  display: inline-flex;
  position: relative;
  align-items: center;
  justify-content: center;
  width: var(--hatch-size);
  height: var(--hatch-size);
  flex-shrink: 0;
  overflow: hidden;
}
.hatch-sprite-probe {
  display: none;
}
.hatch-sprite-visual {
  display: block;
  width: 100%;
  height: 100%;
  background-image: url("/assets/hatch-agent-hatching-32.webp");
  background-size: 800% 400%;
  background-position: 100% 100%;
  transform: translate(2.085682074%, -0.020293123%);
  background-repeat: no-repeat;
}
.hatch-sprite-fallback {
  width: 50%;
  height: 50%;
  color: currentColor;
}
.hatch-sprite--ready.hatch-sprite--once .hatch-sprite-visual {
  animation: hatch-once 1.333333333s steps(1, end) 1 both;
}
.hatch-sprite--ready.hatch-sprite--loading .hatch-sprite-visual,
.hatch-sprite--ready.hatch-sprite--bootstrap .hatch-sprite-visual {
  animation: hatch-loading 6s steps(1, end) infinite;
}
.hatch-sprite--bootstrap:not(.hatch-sprite--ready) .hatch-sprite-visual {
  visibility: hidden;
}
.hatch-sprite[data-paused="true"] .hatch-sprite-visual {
  animation-play-state: paused;
}
@keyframes hatch-once {
  0% {
    background-position: 0% 0%;
    transform: translate(-2.536640361%, -10.054114994%);
  }
  3.125% {
    background-position: 14.285714286% 0%;
    transform: translate(-2.423900789%, -10.054114994%);
  }
  6.25% {
    background-position: 28.571428571% 0%;
    transform: translate(-2.762119504%, -10.054114994%);
  }
  9.375% {
    background-position: 42.857142857% 0%;
    transform: translate(0.281848929%, -10.054114994%);
  }
  12.5% {
    background-position: 57.142857143% 0%;
    transform: translate(1.521984216%, -10.054114994%);
  }
  15.625% {
    background-position: 71.428571429% 0%;
    transform: translate(-1.296505073%, -10.054114994%);
  }
  18.75% {
    background-position: 85.714285714% 0%;
    transform: translate(0.394588501%, -10.054114994%);
  }
  21.875% {
    background-position: 100% 0%;
    transform: translate(1.409244645%, -10.054114994%);
  }
  25% {
    background-position: 0% 33.333333333%;
    transform: translate(-1.634723788%, -6.108229989%);
  }
  28.125% {
    background-position: 14.285714286% 33.333333333%;
    transform: translate(-2.198421646%, -6.108229989%);
  }
  31.25% {
    background-position: 28.571428571% 33.333333333%;
    transform: translate(-0.507328072%, -6.108229989%);
  }
  34.375% {
    background-position: 42.857142857% 33.333333333%;
    transform: translate(0.507328072%, -6.108229989%);
  }
  37.5% {
    background-position: 57.142857143% 33.333333333%;
    transform: translate(-0.056369786%, -6.559188275%);
  }
  40.625% {
    background-position: 71.428571429% 33.333333333%;
    transform: translate(-0.620067644%, -7.010146561%);
  }
  43.75% {
    background-position: 85.714285714% 33.333333333%;
    transform: translate(-0.281848929%, -7.010146561%);
  }
  46.875% {
    background-position: 100% 33.333333333%;
    transform: translate(0.507328072%, -7.010146561%);
  }
  50% {
    background-position: 0% 66.666666667%;
    transform: translate(-2.987598647%, -6.671927847%);
  }
  53.125% {
    background-position: 14.285714286% 66.666666667%;
    transform: translate(-2.649379932%, -6.671927847%);
  }
  56.25% {
    background-position: 28.571428571% 66.666666667%;
    transform: translate(-1.183765502%, -6.671927847%);
  }
  59.375% {
    background-position: 42.857142857% 66.666666667%;
    transform: translate(0.056369786%, -7.122886133%);
  }
  62.5% {
    background-position: 57.142857143% 66.666666667%;
    transform: translate(0.620067644%, -7.122886133%);
  }
  65.625% {
    background-position: 71.428571429% 66.666666667%;
    transform: translate(-0.394588501%, -7.122886133%);
  }
  68.75% {
    background-position: 85.714285714% 66.666666667%;
    transform: translate(0.169109357%, -7.122886133%);
  }
  71.875% {
    background-position: 100% 66.666666667%;
    transform: translate(1.860202931%, -7.122886133%);
  }
  75% {
    background-position: 0% 100%;
    transform: translate(-1.634723788%, 0.430665163%);
  }
  78.125% {
    background-position: 14.285714286% 100%;
    transform: translate(-1.74746336%, 0.430665163%);
  }
  81.25% {
    background-position: 28.571428571% 100%;
    transform: translate(-1.183765502%, 0.430665163%);
  }
  84.375% {
    background-position: 42.857142857% 100%;
    transform: translate(-1.521984216%, 0.430665163%);
  }
  87.5% {
    background-position: 57.142857143% 100%;
    transform: translate(-0.958286359%, -0.020293123%);
  }
  90.625% {
    background-position: 71.428571429% 100%;
    transform: translate(-0.620067644%, -0.020293123%);
  }
  93.75% {
    background-position: 85.714285714% 100%;
    transform: translate(0.845546787%, -0.020293123%);
  }
  96.875% {
    background-position: 100% 100%;
    transform: translate(2.085682074%, -0.020293123%);
  }
  100% {
    background-position: 100% 100%;
    transform: translate(2.085682074%, -0.020293123%);
  }
}
@keyframes hatch-loading {
  0% {
    background-position: 0% 0%;
    transform: translate(-2.536640361%, -10.054114994%);
  }
  0.694444444% {
    background-position: 14.285714286% 0%;
    transform: translate(-2.423900789%, -10.054114994%);
  }
  1.388888889% {
    background-position: 28.571428571% 0%;
    transform: translate(-2.762119504%, -10.054114994%);
  }
  2.083333333% {
    background-position: 42.857142857% 0%;
    transform: translate(0.281848929%, -10.054114994%);
  }
  2.777777778% {
    background-position: 57.142857143% 0%;
    transform: translate(1.521984216%, -10.054114994%);
  }
  3.472222222% {
    background-position: 71.428571429% 0%;
    transform: translate(-1.296505073%, -10.054114994%);
  }
  4.166666667% {
    background-position: 85.714285714% 0%;
    transform: translate(0.394588501%, -10.054114994%);
  }
  4.861111111% {
    background-position: 100% 0%;
    transform: translate(1.409244645%, -10.054114994%);
  }
  5.555555556% {
    background-position: 0% 33.333333333%;
    transform: translate(-1.634723788%, -6.108229989%);
  }
  6.25% {
    background-position: 14.285714286% 33.333333333%;
    transform: translate(-2.198421646%, -6.108229989%);
  }
  6.944444444% {
    background-position: 28.571428571% 33.333333333%;
    transform: translate(-0.507328072%, -6.108229989%);
  }
  7.638888889% {
    background-position: 42.857142857% 33.333333333%;
    transform: translate(0.507328072%, -6.108229989%);
  }
  8.333333333% {
    background-position: 57.142857143% 33.333333333%;
    transform: translate(-0.056369786%, -6.559188275%);
  }
  9.027777778% {
    background-position: 71.428571429% 33.333333333%;
    transform: translate(-0.620067644%, -7.010146561%);
  }
  9.722222222% {
    background-position: 85.714285714% 33.333333333%;
    transform: translate(-0.281848929%, -7.010146561%);
  }
  10.416666667% {
    background-position: 100% 33.333333333%;
    transform: translate(0.507328072%, -7.010146561%);
  }
  11.111111111% {
    background-position: 0% 66.666666667%;
    transform: translate(-2.987598647%, -6.671927847%);
  }
  11.805555556% {
    background-position: 14.285714286% 66.666666667%;
    transform: translate(-2.649379932%, -6.671927847%);
  }
  12.5% {
    background-position: 28.571428571% 66.666666667%;
    transform: translate(-1.183765502%, -6.671927847%);
  }
  13.194444444% {
    background-position: 42.857142857% 66.666666667%;
    transform: translate(0.056369786%, -7.122886133%);
  }
  13.888888889% {
    background-position: 57.142857143% 66.666666667%;
    transform: translate(0.620067644%, -7.122886133%);
  }
  14.583333333% {
    background-position: 71.428571429% 66.666666667%;
    transform: translate(-0.394588501%, -7.122886133%);
  }
  15.277777778% {
    background-position: 85.714285714% 66.666666667%;
    transform: translate(0.169109357%, -7.122886133%);
  }
  15.972222222% {
    background-position: 100% 66.666666667%;
    transform: translate(1.860202931%, -7.122886133%);
  }
  16.666666667% {
    background-position: 0% 100%;
    transform: translate(-1.634723788%, 0.430665163%);
  }
  17.361111111% {
    background-position: 14.285714286% 100%;
    transform: translate(-1.74746336%, 0.430665163%);
  }
  18.055555556% {
    background-position: 28.571428571% 100%;
    transform: translate(-1.183765502%, 0.430665163%);
  }
  18.75% {
    background-position: 42.857142857% 100%;
    transform: translate(-1.521984216%, 0.430665163%);
  }
  19.444444444% {
    background-position: 57.142857143% 100%;
    transform: translate(-0.958286359%, -0.020293123%);
  }
  20.138888889% {
    background-position: 71.428571429% 100%;
    transform: translate(-0.620067644%, -0.020293123%);
  }
  20.833333333% {
    background-position: 85.714285714% 100%;
    transform: translate(0.845546787%, -0.020293123%);
  }
  21.527777778% {
    background-position: 100% 100%;
    transform: translate(2.085682074%, -0.020293123%);
  }
  100% {
    background-position: 100% 100%;
    transform: translate(2.085682074%, -0.020293123%);
  }
}
.hatch-boot-splash {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 32px;
  background: #0b0b0b;
  color: #ffffff;
  text-align: center;
  font-family: Pretendard, sans-serif;
}
.hatch-boot-splash > .hatch-sprite {
  --hatch-size: 128px;
}
.hatch-boot-wordmark {
  font-size: 32px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.25;
}
.hatch-boot-status,
.hatch-boot-help {
  margin: 0;
  max-width: 400px;
  font-size: 14px;
  line-height: 1.6;
  color: #b0b0b0;
}
.hatch-boot-splash button {
  min-height: 44px;
  padding: 12px 24px;
  border: 1px solid #737373;
  border-radius: 40px;
  background: #151515;
  color: #ffffff;
  font: inherit;
  cursor: pointer;
}
.hatch-boot-splash button[hidden] {
  display: none;
}
.hatch-boot-splash button:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 4px;
}
.hatch-boot-splash.hatch-boot-splash--failed .hatch-sprite .hatch-sprite-visual {
  animation: none;
  background-position: 100% 100%;
  transform: translate(2.085682074%, -0.020293123%);
}
@media (prefers-reduced-motion: reduce) {
  .hatch-sprite-visual {
    animation: none !important;
    background-position: 100% 100% !important;
    transform: translate(2.085682074%, -0.020293123%) !important;
  }
}

/* 라이트 테마의 준비 화면. 테마는 hatch-theme.js가 첫 화면 전에 정한다. */
:root[data-theme="light"] .hatch-boot-splash { background: #f6f6f6; color: #0b0b0b; }
:root[data-theme="light"] .hatch-boot-status,
:root[data-theme="light"] .hatch-boot-help { color: #525252; }
:root[data-theme="light"] .hatch-boot-splash button { border-color: #8a8a8a; background: #ffffff; color: #0b0b0b; }
:root[data-theme="light"] .hatch-boot-splash button:focus-visible { outline-color: #0b0b0b; }