/**
 * atJeju — 당겨서 새로고침
 */

html.pull-to-refresh-enabled {
  overscroll-behavior-y: none;
}

.ptr {
  position: fixed;
  top: calc(var(--safe-top, 0px) + var(--header-h, 56px));
  left: 50%;
  z-index: calc(var(--z-header, 100) + 2);
  transform: translate3d(-50%, -120%, 0);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.15s ease, transform 0.2s ease, visibility 0.15s ease;
}

.ptr.ptr--visible,
.ptr.ptr--refreshing {
  opacity: 1;
  visibility: visible;
}

.ptr.ptr--visible:not(.ptr--refreshing) {
  transition: none;
}

.ptr.ptr--refreshing {
  transition: transform 0.18s ease;
}

.ptr__inner {
  display: flex;
  align-items: center;
  gap: var(--space-2, 8px);
  min-height: 40px;
  padding: var(--space-2, 8px) var(--space-4, 16px);
  border-radius: var(--radius-full, 999px);
  background: var(--color-surface, #fff);
  border: 1px solid var(--color-border, #e5e7eb);
  box-shadow: var(--shadow-md, 0 4px 12px rgba(0, 0, 0, 0.08));
  color: var(--color-text-muted, #6b7280);
  font-size: var(--font-size-sm, 0.875rem);
  white-space: nowrap;
}

.ptr__spinner {
  width: 18px;
  height: 18px;
  border: 2px solid var(--color-border, #e5e7eb);
  border-top-color: var(--color-primary, #0d9488);
  border-radius: 50%;
  flex-shrink: 0;
  opacity: 0.35;
}

.ptr--ready .ptr__spinner,
.ptr--refreshing .ptr__spinner {
  opacity: 1;
}

.ptr--refreshing .ptr__spinner {
  animation: ptr-spin 0.7s linear infinite;
}

@keyframes ptr-spin {
  to {
    transform: rotate(360deg);
  }
}

html.ptr-refreshing .app-main {
  transition: transform 0.18s ease;
  transform: translateY(4px);
}