feat(gyeol): ProgressBar — 진행률 (보라/시안 그라데이션 라인)

intro/thanks step에서는 미렌더. q1~q7만 표시.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

app/gyeol/components/ProgressBar.tsx

@@ -0,0 +1,34 @@
+import { QUESTION_STEPS, TOTAL_QUESTIONS, type SurveyStep } from '@/lib/survey/types';
+
+interface Props {
+  step: SurveyStep;
+}
+
+/**
+ * 상단 진행률 바.
+ * intro/thanks에서는 렌더링 안 됨 (질문 step 만 표시).
+ */
+export default function ProgressBar({ step }: Props) {
+  const idx = QUESTION_STEPS.indexOf(step as 'q1');
+  if (idx < 0) return null;
+
+  const current = idx + 1;
+  const percent = (current / TOTAL_QUESTIONS) * 100;
+
+  return (
+    <div className="w-full max-w-md mx-auto mb-8">
+      <div className="flex items-center justify-between mb-2 text-white/60 text-xs font-mono tracking-widest">
+        <span>{current}/{TOTAL_QUESTIONS}</span>
+      </div>
+      <div className="h-[2px] bg-white/10 rounded-full overflow-hidden">
+        <div
+          className="h-full transition-all duration-500 ease-out"
+          style={{
+            width: `${percent}%`,
+            background: 'linear-gradient(90deg, #cc97ff 0%, #53ddfc 100%)',
+          }}
+        />
+      </div>
+    </div>
+  );
+}