#scroll-to-top {
  position: fixed;
  z-index: 7;
  right: max(16px, env(safe-area-inset-right, 0px));
  bottom: calc(104px + env(safe-area-inset-bottom, 0px));
  width: 48px;
  height: 48px;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--zine-line, var(--line));
  border-radius: 50%;
  background: var(--zine-paper, var(--sheet));
  color: var(--app-text-strong, var(--ink));
  box-shadow: 3px 3px 0 var(--zine-drop, var(--line));
  font: 800 12px/1.25 'Nanum Gothic', system-ui, sans-serif;
  cursor: pointer;
  touch-action: manipulation;
}
#scroll-to-top[hidden] { display: none }
#scroll-to-top:hover { background: var(--app-hover, var(--soft)) }
#scroll-to-top:focus-visible { outline: 3px solid currentColor; outline-offset: 3px }
#scroll-to-top:active { box-shadow: 1px 1px 0 var(--zine-drop, var(--line)) }
@media (min-width: 1024px) {
  #scroll-to-top {
    right: max(24px, env(safe-area-inset-right, 0px));
    bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  }
}