Also need to check Hero.tsx to confirm PhoneFrame and KakaoNotifCard exports:

Framer Motion is not in package.json, so I'll install it and rewrite PhoneDemoSection.tsx using framer-motion's AnimatePresence + motion.div + useInView.

Now rewrite PhoneDemoSection.tsx with the full Framer Motion implementation:

The section has been fully rebuilt with Framer Motion. Here's what changed:

• Desktop sticky scroll — the section uses grid-cols-2; the left column stacks 4 StepBlock components each with min-h-[60vh], and the right StickyPhone column is pinned via position: sticky; top: calc(50vh - 280px). An IntersectionObserver with threshold: 0.4 watches each left block and updates activeStep state.
• AnimatePresence cross-fade — the KakaoNotifCard inside the phone is wrapped in <AnimatePresence mode="wait"> with a motion.div keyed by activeStep, animating from opacity: 0, y: 10 to opacity: 1, y: 0 (and exiting to opacity: 0, y: -10) over 0.3s.
• Visual feedback — inactive steps dim to opacity: 0.35 and shift left by 4px; the active step shows full opacity with a 2px cyan left border; the tag pill background and color also transition between states.
• Mobile fallback — MobileSteps renders each step's text followed immediately by its phone mockup, with no sticky behavior, hidden on md and above.

The file looks correct here — all three @import statements are at the top. The error says line 5200, which means the bundler is seeing a concatenated version of the CSS where tw-animate-css injects many rules before our @import url(...). The fix is to load Pretendard via next/font in layout.tsx instead of a CSS @import, which eliminates the ordering constraint entirely.

Now remove the @import url(...) from globals.css and point --font-sans at the CSS variable instead:

Now add pretendard as an npm dependency so next/font/local can resolve the woff2 file:

Now update layout.tsx to use next/font/local pointing at the installed npm package path, which is resolved at build time and avoids any CSS @import entirely:

The single-weight localFont approach won't render Korean well across all weights. Better to use the variable font file (which includes all weights) and declare each weight explicitly. Also, next/font/local with a node_modules path can be unreliable — the safest approach is to load multiple weights from the pretendard package:

pretendard is now added to package.json as an npm dependency, and layout.tsx loads five woff2 weights (400–800) via next/font/local pointing at the installed package path. This completely removes the CSS @import url(...) — which was the root cause of the parse error — since next/font injects the @font-face declarations at build time before any stylesheet rules.