feat: PullToRefresh 풀다운 새로고침 컴포넌트

src/components/PullToRefresh.css

@@ -0,0 +1,86 @@
+/* PullToRefresh — pull-down-to-refresh wrapper */
+
+.pull-to-refresh {
+  position: relative;
+  overscroll-behavior-y: contain;
+}
+
+/* Indicator circle */
+.pull-to-refresh__indicator {
+  position: absolute;
+  top: -48px;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 36px;
+  height: 36px;
+  border-radius: 50%;
+  background: var(--surface-card);
+  border: 1px solid var(--border-line);
+  box-shadow: var(--shadow-md);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 0.18s var(--ease-out);
+  z-index: 10;
+  color: var(--neon-cyan);
+}
+
+.pull-to-refresh__indicator.is-visible {
+  opacity: 1;
+}
+
+/* Spinner */
+.pull-to-refresh__spinner {
+  display: block;
+  width: 20px;
+  height: 20px;
+  border: 2px solid var(--border-line);
+  border-top-color: var(--neon-cyan);
+  border-radius: 50%;
+  animation: ptr-spin 0.7s linear infinite;
+}
+
+@keyframes ptr-spin {
+  to { transform: rotate(360deg); }
+}
+
+/* Arrow chevron */
+.pull-to-refresh__arrow {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 18px;
+  height: 18px;
+  transition: transform 0.2s var(--ease-out);
+}
+
+.pull-to-refresh__arrow.is-ready {
+  transform: rotate(180deg);
+}
+
+/* Content area */
+.pull-to-refresh__content {
+  will-change: transform;
+}
+
+/* Reduced motion */
+@media (prefers-reduced-motion: reduce) {
+  .pull-to-refresh__spinner {
+    animation: none;
+    border-top-color: var(--neon-cyan);
+  }
+
+  .pull-to-refresh__arrow {
+    transition: none;
+  }
+
+  .pull-to-refresh__indicator {
+    transition: none;
+  }
+
+  .pull-to-refresh__content {
+    transition: none !important;
+  }
+}