diff --git a/e2e/class/journey-map.spec.ts b/e2e/class/journey-map.spec.ts
index 5a7043f09..e3e1dc194 100644
--- a/e2e/class/journey-map.spec.ts
+++ b/e2e/class/journey-map.spec.ts
@@ -61,6 +61,7 @@ test.beforeEach(async ({ context, baseURL }) => {
 function makeCourseDetail(overrides: Partial<CourseDetailResponse> = {}): {
   content: CourseDetailResponse;
 } {
+  const viewerStatus = overrides.viewerStatus ?? 'FREE_ENROLLED';
   const base: CourseDetailResponse = {
     courseId: COURSE_ID,
     slug: 'vibe-intro',
@@ -86,11 +87,11 @@ function makeCourseDetail(overrides: Partial<CourseDetailResponse> = {}): {
     ],
     earlyBirdEndsAt: null,
     canFreeEnroll: null,
-    isFreeEnrolled: true,
+    isFreeEnrolled: viewerStatus === 'FREE_ENROLLED',
     freeLessonCount: 3,
     journeyMapAvailable: true,
-    hasFullAccess: false,
-    isPaidEnrolled: false,
+    hasFullAccess: viewerStatus === 'PAID',
+    isPaidEnrolled: viewerStatus === 'PAID',
     canPurchase: true,
   };
   return { content: { ...base, ...overrides } };
diff --git a/src/app/(class-lesson)/class/[slug]/lesson/[id]/page.tsx b/src/app/(class-lesson)/class/[slug]/lesson/[id]/page.tsx
index 815e439d4..5a4f00726 100644
--- a/src/app/(class-lesson)/class/[slug]/lesson/[id]/page.tsx
+++ b/src/app/(class-lesson)/class/[slug]/lesson/[id]/page.tsx
@@ -47,16 +47,16 @@ export default function LessonPage({
   const reviewRef = useRef<HTMLDivElement>(null);
   const contentRef = useRef<HTMLDivElement>(null);
   const topBarRef = useRef<HTMLDivElement>(null);
+  const leftColRef = useRef<HTMLDivElement>(null);
 
   function scrollToRef(ref: RefObject<HTMLDivElement | null>) {
-    if (!ref.current) return;
-    const headerHeight = topBarRef.current?.offsetHeight ?? 64;
+    if (!ref.current || !leftColRef.current) return;
+    const container = leftColRef.current;
     const top =
-      ref.current.getBoundingClientRect().top +
-      window.scrollY -
-      headerHeight -
-      16;
-    window.scrollTo({ top, behavior: 'smooth' });
+      container.scrollTop +
+      ref.current.getBoundingClientRect().top -
+      container.getBoundingClientRect().top;
+    container.scrollTo({ top, behavior: 'smooth' });
   }
 
   function handleTabChange(next: LessonTabValue) {
@@ -200,93 +200,101 @@ export default function LessonPage({
       </div>
 
       <div className="mx-auto w-full max-w-[1236px] px-300">
-        <div className="grid grid-cols-content-sidebar-360 items-start gap-250 pt-500">
+        <div className="flex items-start gap-250">
           {/* LEFT */}
-          <div className="min-w-0">
-            <Link
-              href={`/class/${lesson?.courseSlug ?? slug}/home`}
-              className="inline-flex items-center gap-125 rounded-full border border-gray-200 bg-background-default px-200 py-100"
-            >
-              <ArrowLeft className="h-250 w-250 text-gray-800" />
-              <span className="font-designer-14m text-gray-1000">
-                학습 여정 맵 돌아가기
-              </span>
-            </Link>
-
-            <div className="mt-300 flex items-center justify-between">
-              <div className="flex items-center gap-200">
-                <span className="rounded-100 bg-rose-200 px-125 py-25 font-designer-14m text-rose-400">
-                  Lesson {String(lessonId).padStart(2, '0')}
+          <div className="min-w-0 flex-1 flex flex-col h-[calc(100vh-var(--spacing-800))]">
+            {/* Fixed header: back link, title, description, tabs — never scrolls */}
+            <div className="shrink-0 pt-500">
+              <Link
+                href={`/class/${lesson?.courseSlug ?? slug}/home`}
+                className="inline-flex items-center gap-125 rounded-full border border-gray-200 bg-background-default px-200 py-100"
+              >
+                <ArrowLeft className="h-250 w-250 text-gray-800" />
+                <span className="font-designer-14m text-gray-1000">
+                  학습 여정 맵 돌아가기
                 </span>
-                <h1 className="font-designer-32b text-gray-800">
-                  {lesson?.title ?? 'AI 처음 만나는 날'}
-                </h1>
+              </Link>
+
+              <div className="mt-300 flex items-center justify-between">
+                <div className="flex items-center gap-200">
+                  <span className="rounded-100 bg-rose-200 px-125 py-25 font-designer-14m text-rose-400">
+                    Lesson {String(lessonId).padStart(2, '0')}
+                  </span>
+                  <h1 className="font-designer-32b text-gray-800">
+                    {lesson?.title ?? 'AI 처음 만나는 날'}
+                  </h1>
+                </div>
+                <p className="font-designer-16m text-gray-500">
+                  {lesson?.estimatedMinutes
+                    ? `약 ${lesson.estimatedMinutes}분 소요`
+                    : ''}
+                </p>
               </div>
-              <p className="font-designer-16m text-gray-500">
-                {lesson?.estimatedMinutes
-                  ? `약 ${lesson.estimatedMinutes}분 소요`
-                  : ''}
-              </p>
-            </div>
 
-            {lesson?.description ? (
-              <p className="mt-150 whitespace-pre-line font-designer-16r text-gray-700">
-                {lesson.description}
-              </p>
-            ) : null}
+              {lesson?.description ? (
+                <p className="mt-150 whitespace-pre-line font-designer-16r text-gray-700">
+                  {lesson.description}
+                </p>
+              ) : null}
 
-            <div className="sticky top-800 z-20 mt-300 bg-gray-100">
-              <LessonTabs value={tab} onChange={handleTabChange} />
+              <div className="mt-300 bg-gray-100">
+                <LessonTabs value={tab} onChange={handleTabChange} />
+              </div>
             </div>
 
-            <div
-              ref={contentRef}
-              className="mt-300 min-h-[964px] rounded-150 bg-background-default p-500"
-            >
-              {lesson?.contentMarkdown ? (
-                <MarkdownContentCore content={lesson.contentMarkdown} />
-              ) : (
-                <p className="font-designer-16r text-gray-500">
-                  본문이 준비 중입니다.
-                </p>
-              )}
-            </div>
+            {/* Scroll area: content + review form only */}
+            <div ref={leftColRef} className="flex-1 overflow-y-auto">
+              <div
+                ref={contentRef}
+                className="mt-300 min-h-[964px] rounded-150 bg-background-default p-500"
+              >
+                {lesson?.contentMarkdown ? (
+                  <MarkdownContentCore content={lesson.contentMarkdown} />
+                ) : (
+                  <p className="font-designer-16r text-gray-500">
+                    본문이 준비 중입니다.
+                  </p>
+                )}
+              </div>
 
-            <div ref={reviewRef} />
-            <hr className="my-500 border-gray-300" />
+              <div ref={reviewRef} />
+              <hr className="my-500 border-gray-300" />
 
-            {tab === 'review' || tab === 'follow' ? (
-              <LessonReviewForm
-                key={lessonId}
-                retrospectivePurpose={
-                  lesson?.retrospectivePurpose ?? 'ARTIFACT_SHARE'
-                }
-                retrospectivePrompt={lesson?.retrospectivePrompt}
-                artifactSubmissionRequired={
-                  lesson?.artifactSubmissionRequired ?? false
-                }
-                alreadySubmitted={alreadySubmitted}
-                submitting={submitRetrospective.isPending}
-                isLastLesson={isLastLesson}
-                onSubmit={handleSubmit}
-              />
-            ) : null}
+              {tab === 'review' || tab === 'follow' ? (
+                <LessonReviewForm
+                  key={lessonId}
+                  retrospectivePurpose={
+                    lesson?.retrospectivePurpose ?? 'ARTIFACT_SHARE'
+                  }
+                  retrospectivePrompt={lesson?.retrospectivePrompt}
+                  artifactSubmissionRequired={
+                    lesson?.artifactSubmissionRequired ?? false
+                  }
+                  alreadySubmitted={alreadySubmitted}
+                  submitting={submitRetrospective.isPending}
+                  isLastLesson={isLastLesson}
+                  onSubmit={handleSubmit}
+                />
+              ) : null}
 
-            <div className="h-1000" />
+              <div className="h-1000" />
+            </div>
           </div>
 
-          {/* RIGHT sticky sidebar */}
-          <div className="sticky top-800 z-10 flex flex-col gap-250">
-            <LessonQnaCard
-              myQnas={qnaSidebar?.qnas ?? []}
-              builderQnas={qnaSidebar?.builderQnas ?? []}
-              onAskClick={() => setSubmissionModalOpen(true)}
-              onSelectQna={setSelectedQnaId}
-            />
-            <LessonBuilderFeedCard
-              feeds={feedPreview?.feeds ?? []}
-              onSelectFeed={setSelectedFeedId}
-            />
+          {/* RIGHT sidebar — stays put while left column scrolls */}
+          <div className="w-4500 shrink-0 pt-500">
+            <div className="flex flex-col gap-250">
+              <LessonQnaCard
+                myQnas={qnaSidebar?.qnas ?? []}
+                builderQnas={qnaSidebar?.builderQnas ?? []}
+                onAskClick={() => setSubmissionModalOpen(true)}
+                onSelectQna={setSelectedQnaId}
+              />
+              <LessonBuilderFeedCard
+                feeds={feedPreview?.feeds ?? []}
+                onSelectFeed={setSelectedFeedId}
+              />
+            </div>
           </div>
         </div>
       </div>