diff --git a/app/gyeol/components/IntroStep.tsx b/app/gyeol/components/IntroStep.tsx
new file mode 100644
index 0000000..2118d0b
--- /dev/null
+++ b/app/gyeol/components/IntroStep.tsx
@@ -0,0 +1,44 @@
+'use client';
+
+interface Props {
+  onStart: () => void;
+}
+
+/**
+ * 인트로 step — CONTOUR 로고 + 한글 부제 + 시작 버튼.
+ * spec design PNG 1번째 화면 참조.
+ */
+export default function IntroStep({ onStart }: Props) {
+  return (
+    <div className="min-h-screen flex flex-col items-center justify-center px-6 text-center text-white">
+      {/* 로고 */}
+      <div className="mb-10">
+        <h1
+          className="kx-display text-5xl md:text-7xl font-black tracking-[0.15em] mb-4"
+          style={{
+            background: 'linear-gradient(135deg, #cc97ff 0%, #53ddfc 100%)',
+            WebkitBackgroundClip: 'text',
+            WebkitTextFillColor: 'transparent',
+            backgroundClip: 'text',
+          }}
+        >
+          CONTOUR
+        </h1>
+        <p className="text-base md:text-lg text-white/70 leading-relaxed">
+          나를 더 선명하게 이해하는 3분
+        </p>
+      </div>
+
+      {/* 시작 버튼 */}
+      <button
+        type="button"
+        onClick={onStart}
+        className="kx-btn-primary px-10 py-3 rounded-full text-base font-bold"
+      >
+        시작하기
+      </button>
+
+      <p className="mt-6 text-xs text-white/40 font-mono">7 질문 · 약 3분</p>
+    </div>
+  );
+}