1c:I[88678,["8500","static/chunks/8500-01a63dafd809e317.js","3725","static/chunks/3725-1271f26d54bf6b57.js","7645","static/chunks/7645-1ca8d29f22f0cbd8.js","9695","static/chunks/9695-49a7c029c38ce6ae.js","2555","static/chunks/2555-08f52e68208a57e8.js","2395","static/chunks/2395-5e305d89191e3da6.js","294","static/chunks/app/library/%5Bslug%5D/page-2dadb29d2213cdf3.js"],"LibraryDetail"] 1f:I[86869,[],"IconMark"] 1d:T5302,"use client"; import { FlaskConical, Hammer, Rocket, Sparkles } from "lucide-react"; import { useEffect, useRef, type HTMLAttributes, type PointerEvent } from "react"; export type BentoVisual = "code" | "chat" | "ring" | "bars" | "toggle" | "deploy"; export interface BentoFeature { title: string; description: string; /** 타일 위쪽에 들어갈 미니 일러스트 종류 */ visual: BentoVisual; } export interface BentoFeaturesProps extends HTMLAttributes { eyebrow?: string; heading?: string; subheading?: string; /** 6개를 넣으면 넓은 타일·세로로 긴 타일이 섞인 벤토 배치가 됩니다. */ features?: BentoFeature[]; } const defaultFeatures: BentoFeature[] = [ { title: "AI 코드 자동완성", description: "의도를 읽고 다음 줄을 먼저 제안해요.", visual: "code" }, { title: "24시간 AI 튜터", description: "막히는 순간 묻고, 이해될 때까지 설명을 들어요.", visual: "chat" }, { title: "진도 한눈에", description: "오늘 목표까지 남은 양을 보여줘요.", visual: "ring" }, { title: "성장 리포트", description: "매주 쌓인 학습 시간을 그래프로.", visual: "bars" }, { title: "나만의 학습 모드", description: "힌트와 자동 리뷰를 켜고 꺼요.", visual: "toggle" }, { title: "원클릭 배포", description: "완성한 프로젝트를 링크로 공유해요.", visual: "deploy" }, ]; // 순서대로 놓이는 타일 크기. 첫 칸은 가로로 넓게, 둘째 칸은 세로로 길게 → 나머지는 자동 배치됩니다. const tileLayout = ["col-span-2", "row-span-2"]; export function BentoFeatures({ eyebrow = "AI CODER 기능", heading = "배우고, 만들고, 배포까지", subheading = "AI 튜터와 실시간 리뷰가 첫 줄부터 배포까지 함께해요.", features = defaultFeatures, className = "", ...props }: BentoFeaturesProps) { const gridRef = useRef(null); useEffect(() => { const grid = gridRef.current; if (!grid) return; // 포인터가 없을 때는 그리드 위쪽 가장자리에 빛을 쉬게 둡니다(썸네일·터치 화면용). const rest = () => { const box = grid.getBoundingClientRect(); moveLight(grid, box.left + box.width * 0.62, box.top); }; rest(); grid.addEventListener("pointerleave", rest); window.addEventListener("resize", rest); return () => { grid.removeEventListener("pointerleave", rest); window.removeEventListener("resize", rest); }; }, []); function handlePointerMove(event: PointerEvent) { moveLight(event.currentTarget, event.clientX, event.clientY); } return (

{eyebrow}

{heading}

{subheading}

{features.map((feature, index) => (

{/* 1px 바깥 여백에만 보이는 빛 → 포인터를 따라다니는 테두리 */}

{feature.title}

{feature.description}

))}

); } // 포인터 좌표를 "각 타일 기준"으로 바꿔 넣으면, 옆 타일의 테두리도 가까운 쪽부터 함께 빛납니다. function moveLight(grid: HTMLElement, clientX: number, clientY: number) { grid.querySelectorAll("[data-bento-tile]").forEach(tile => { const box = tile.getBoundingClientRect(); tile.style.setProperty("--x", `${clientX - box.left}px`); tile.style.setProperty("--y", `${clientY - box.top}px`); }); } function Visual({ type }: { type: BentoVisual }) { if (type === "code") return ; if (type === "chat") return ; if (type === "ring") return ; if (type === "bars") return ; if (type === "toggle") return ; return ; } function CodeVisual() { return (

tutor.ts

1 const tutor = ai.coach()

2 tutor. explain(bug) Tab

); } function ChatVisual() { return (

AI AI 튜터

{/* 세로 공간이 넉넉한 배치에서는 지난 대화를 한 쌍 더 보여 줍니다. */}
useEffect는 언제 실행돼요?

화면이 그려진 직후예요.

질문해 보세요!

이 에러 왜 나요?

3번째 줄에 괄호가 빠졌어요!

); } function RingVisual() { return (

); } const weeklyBars = [34, 48, 40, 62, 55, 78, 100]; function BarsVisual() { return (
{weeklyBars.map((height, index) => ( ))} +24%
); } const switches = ["AI 힌트", "자동 리뷰"]; function ToggleVisual() { return (
{switches.map((label, index) => (
{label}
))}
); } const pipeline = [Hammer, FlaskConical, Rocket]; function DeployVisual() { return (

{pipeline.map((Icon, index) => ( ))}
LIVE
); } export default BentoFeatures;1e:T10dcf,
13:["$","main",null,{"id":"main-content","tabIndex":-1,"className":"library_page__IxXwj","children":[["$","div",null,{"className":"library_headerSpace__cyKqF","children":"$L1b"}],["$","script",null,{"type":"application/ld+json","dangerouslySetInnerHTML":{"__html":"{\"@context\":\"https://schema.org\",\"@graph\":[{\"@type\":\"LearningResource\",\"name\":\"벤토 기능 소개\",\"description\":\"타일마다 작은 애니메이션이 살아 움직이는 벤토 그리드 기능 섹션\",\"url\":\"https://aicoder.kr/library/bento-features\",\"inLanguage\":\"ko-KR\",\"learningResourceType\":\"코드 예제 및 실습\",\"educationalLevel\":\"응용\"},{\"@type\":\"BreadcrumbList\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"홈\",\"item\":\"https://aicoder.kr/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"라이브러리\",\"item\":\"https://aicoder.kr/library\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"벤토 기능 소개\",\"item\":\"https://aicoder.kr/library/bento-features\"}]}]}"}}],["$","div",null,{"className":"library_container__grs86","children":["$","$L1c",null,{"item":{"slug":"bento-features","tags":["React","Tailwind","CSS Grid","컨테이너 쿼리","SVG","CSS 애니메이션"],"files":[{"name":"bento-features.tsx","content":"$1d","language":"tsx"},{"name":"demo.tsx","content":"import { BentoFeatures } from \"@/components/ui/bento-features\";\n\nexport default function Demo() {\n return (\n
\n \n
\n );\n}","language":"tsx"}],"level":"응용","title":"벤토 기능 소개","author":"AI Coder 예제","license":"MIT","category":"feature","exercise":"features 배열에 visual을 바꿔 타일 순서를 섞어 보세요. tileLayout의 첫 값을 \"row-span-2\"로 바꾸면 배치가 어떻게 달라지는지 확인하고, 진도 링의 78%를 다른 숫자로 바꿔 보세요.","sourceUrl":"","objectives":["col-span·row-span과 자동 배치로 크기가 다른 타일이 섞인 벤토 그리드 만들기","컨테이너 쿼리(@container)로 놓인 자리의 너비에 맞춰 촘촘한 배치와 넓은 배치를 전환하기","포인터 좌표를 타일마다 CSS 변수로 넣어 테두리를 따라 흐르는 빛 만들기","애니메이션이 끝난 모습을 기본 스타일로 두어 동작 줄이기 설정에서도 완성된 화면 보여 주기"],"description":"타일마다 작은 애니메이션이 살아 움직이는 벤토 그리드 기능 섹션","previewHtml":"$1e","dependencies":"React · Tailwind CSS · lucide-react"},"highlighted":[{"name":"bento-features.tsx","lines":[[{"content":"\"use client\"","color":"#A5D6FF"},{"content":";","color":"#E6EDF3"}],[],[{"content":"import","color":"#FF7B72"},{"content":" { FlaskConical, Hammer, Rocket, Sparkles } ","color":"#E6EDF3"},{"content":"from","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"\"lucide-react\"","color":"#A5D6FF"},{"content":";","color":"#E6EDF3"}],[{"content":"import","color":"#FF7B72"},{"content":" { useEffect, useRef, ","color":"#E6EDF3"},{"content":"type","color":"#FF7B72"},{"content":" HTMLAttributes, ","color":"#E6EDF3"},{"content":"type","color":"#FF7B72"},{"content":" PointerEvent } ","color":"#E6EDF3"},{"content":"from","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"\"react\"","color":"#A5D6FF"},{"content":";","color":"#E6EDF3"}],[],[{"content":"export","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"type","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"BentoVisual","color":"#FFA657"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"\"code\"","color":"#A5D6FF"},{"content":" ","color":"#E6EDF3"},{"content":"|","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"\"chat\"","color":"#A5D6FF"},{"content":" ","color":"#E6EDF3"},{"content":"|","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"\"ring\"","color":"#A5D6FF"},{"content":" ","color":"#E6EDF3"},{"content":"|","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"\"bars\"","color":"#A5D6FF"},{"content":" ","color":"#E6EDF3"},{"content":"|","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"\"toggle\"","color":"#A5D6FF"},{"content":" ","color":"#E6EDF3"},{"content":"|","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"\"deploy\"","color":"#A5D6FF"},{"content":";","color":"#E6EDF3"}],[],[{"content":"export","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"interface","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"BentoFeature","color":"#FFA657"},{"content":" {","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"title","color":"#FFA657"},{"content":":","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"string","color":"#79C0FF"},{"content":";","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"description","color":"#FFA657"},{"content":":","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"string","color":"#79C0FF"},{"content":";","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"/** 타일 위쪽에 들어갈 미니 일러스트 종류 */","color":"#8B949E"}],[{"content":" ","color":"#E6EDF3"},{"content":"visual","color":"#FFA657"},{"content":":","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"BentoVisual","color":"#FFA657"},{"content":";","color":"#E6EDF3"}],[{"content":"}","color":"#E6EDF3"}],[],[{"content":"export","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"interface","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"BentoFeaturesProps","color":"#FFA657"},{"content":" ","color":"#E6EDF3"},{"content":"extends","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"HTMLAttributes","color":"#79C0FF"},{"content":"<","color":"#E6EDF3"},{"content":"HTMLElement","color":"#FFA657"},{"content":"> {","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"eyebrow","color":"#FFA657"},{"content":"?:","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"string","color":"#79C0FF"},{"content":";","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"heading","color":"#FFA657"},{"content":"?:","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"string","color":"#79C0FF"},{"content":";","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"subheading","color":"#FFA657"},{"content":"?:","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"string","color":"#79C0FF"},{"content":";","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"/** 6개를 넣으면 넓은 타일·세로로 긴 타일이 섞인 벤토 배치가 됩니다. */","color":"#8B949E"}],[{"content":" ","color":"#E6EDF3"},{"content":"features","color":"#FFA657"},{"content":"?:","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"BentoFeature","color":"#FFA657"},{"content":"[];","color":"#E6EDF3"}],[{"content":"}","color":"#E6EDF3"}],[],[{"content":"const","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"defaultFeatures","color":"#79C0FF"},{"content":":","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"BentoFeature","color":"#FFA657"},{"content":"[] ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" [","color":"#E6EDF3"}],[{"content":" { title: ","color":"#E6EDF3"},{"content":"\"AI 코드 자동완성\"","color":"#A5D6FF"},{"content":", description: ","color":"#E6EDF3"},{"content":"\"의도를 읽고 다음 줄을 먼저 제안해요.\"","color":"#A5D6FF"},{"content":", visual: ","color":"#E6EDF3"},{"content":"\"code\"","color":"#A5D6FF"},{"content":" },","color":"#E6EDF3"}],[{"content":" { title: ","color":"#E6EDF3"},{"content":"\"24시간 AI 튜터\"","color":"#A5D6FF"},{"content":", description: ","color":"#E6EDF3"},{"content":"\"막히는 순간 묻고, 이해될 때까지 설명을 들어요.\"","color":"#A5D6FF"},{"content":", visual: ","color":"#E6EDF3"},{"content":"\"chat\"","color":"#A5D6FF"},{"content":" },","color":"#E6EDF3"}],[{"content":" { title: ","color":"#E6EDF3"},{"content":"\"진도 한눈에\"","color":"#A5D6FF"},{"content":", description: ","color":"#E6EDF3"},{"content":"\"오늘 목표까지 남은 양을 보여줘요.\"","color":"#A5D6FF"},{"content":", visual: ","color":"#E6EDF3"},{"content":"\"ring\"","color":"#A5D6FF"},{"content":" },","color":"#E6EDF3"}],[{"content":" { title: ","color":"#E6EDF3"},{"content":"\"성장 리포트\"","color":"#A5D6FF"},{"content":", description: ","color":"#E6EDF3"},{"content":"\"매주 쌓인 학습 시간을 그래프로.\"","color":"#A5D6FF"},{"content":", visual: ","color":"#E6EDF3"},{"content":"\"bars\"","color":"#A5D6FF"},{"content":" },","color":"#E6EDF3"}],[{"content":" { title: ","color":"#E6EDF3"},{"content":"\"나만의 학습 모드\"","color":"#A5D6FF"},{"content":", description: ","color":"#E6EDF3"},{"content":"\"힌트와 자동 리뷰를 켜고 꺼요.\"","color":"#A5D6FF"},{"content":", visual: ","color":"#E6EDF3"},{"content":"\"toggle\"","color":"#A5D6FF"},{"content":" },","color":"#E6EDF3"}],[{"content":" { title: ","color":"#E6EDF3"},{"content":"\"원클릭 배포\"","color":"#A5D6FF"},{"content":", description: ","color":"#E6EDF3"},{"content":"\"완성한 프로젝트를 링크로 공유해요.\"","color":"#A5D6FF"},{"content":", visual: ","color":"#E6EDF3"},{"content":"\"deploy\"","color":"#A5D6FF"},{"content":" },","color":"#E6EDF3"}],[{"content":"];","color":"#E6EDF3"}],[],[{"content":"// 순서대로 놓이는 타일 크기. 첫 칸은 가로로 넓게, 둘째 칸은 세로로 길게 → 나머지는 자동 배치됩니다.","color":"#8B949E"}],[{"content":"const","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"tileLayout","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" [","color":"#E6EDF3"},{"content":"\"col-span-2\"","color":"#A5D6FF"},{"content":", ","color":"#E6EDF3"},{"content":"\"row-span-2\"","color":"#A5D6FF"},{"content":"];","color":"#E6EDF3"}],[],[{"content":"export","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"function","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"BentoFeatures","color":"#D2A8FF"},{"content":"({","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"eyebrow","color":"#FFA657"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"\"AI CODER 기능\"","color":"#A5D6FF"},{"content":",","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"heading","color":"#FFA657"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"\"배우고, 만들고, 배포까지\"","color":"#A5D6FF"},{"content":",","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"subheading","color":"#FFA657"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"\"AI 튜터와 실시간 리뷰가 첫 줄부터 배포까지 함께해요.\"","color":"#A5D6FF"},{"content":",","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"features","color":"#FFA657"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" defaultFeatures,","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#FFA657"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"\"\"","color":"#A5D6FF"},{"content":",","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"...","color":"#FF7B72"},{"content":"props","color":"#FFA657"}],[{"content":"}","color":"#E6EDF3"},{"content":":","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"BentoFeaturesProps","color":"#FFA657"},{"content":") {","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"const","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"gridRef","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"useRef","color":"#D2A8FF"},{"content":"<","color":"#E6EDF3"},{"content":"HTMLDivElement","color":"#FFA657"},{"content":">(","color":"#E6EDF3"},{"content":"null","color":"#79C0FF"},{"content":");","color":"#E6EDF3"}],[],[{"content":" ","color":"#E6EDF3"},{"content":"useEffect","color":"#D2A8FF"},{"content":"(() ","color":"#E6EDF3"},{"content":"=>","color":"#FF7B72"},{"content":" {","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"const","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"grid","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" gridRef.current;","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"if","color":"#FF7B72"},{"content":" (","color":"#E6EDF3"},{"content":"!","color":"#FF7B72"},{"content":"grid) ","color":"#E6EDF3"},{"content":"return","color":"#FF7B72"},{"content":";","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"// 포인터가 없을 때는 그리드 위쪽 가장자리에 빛을 쉬게 둡니다(썸네일·터치 화면용).","color":"#8B949E"}],[{"content":" ","color":"#E6EDF3"},{"content":"const","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"rest","color":"#D2A8FF"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" () ","color":"#E6EDF3"},{"content":"=>","color":"#FF7B72"},{"content":" {","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"const","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"box","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" grid.","color":"#E6EDF3"},{"content":"getBoundingClientRect","color":"#D2A8FF"},{"content":"();","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"moveLight","color":"#D2A8FF"},{"content":"(grid, box.left ","color":"#E6EDF3"},{"content":"+","color":"#FF7B72"},{"content":" box.width ","color":"#E6EDF3"},{"content":"*","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"0.62","color":"#79C0FF"},{"content":", box.top);","color":"#E6EDF3"}],[{"content":" };","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"rest","color":"#D2A8FF"},{"content":"();","color":"#E6EDF3"}],[{"content":" grid.","color":"#E6EDF3"},{"content":"addEventListener","color":"#D2A8FF"},{"content":"(","color":"#E6EDF3"},{"content":"\"pointerleave\"","color":"#A5D6FF"},{"content":", rest);","color":"#E6EDF3"}],[{"content":" window.","color":"#E6EDF3"},{"content":"addEventListener","color":"#D2A8FF"},{"content":"(","color":"#E6EDF3"},{"content":"\"resize\"","color":"#A5D6FF"},{"content":", rest);","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"return","color":"#FF7B72"},{"content":" () ","color":"#E6EDF3"},{"content":"=>","color":"#FF7B72"},{"content":" {","color":"#E6EDF3"}],[{"content":" grid.","color":"#E6EDF3"},{"content":"removeEventListener","color":"#D2A8FF"},{"content":"(","color":"#E6EDF3"},{"content":"\"pointerleave\"","color":"#A5D6FF"},{"content":", rest);","color":"#E6EDF3"}],[{"content":" window.","color":"#E6EDF3"},{"content":"removeEventListener","color":"#D2A8FF"},{"content":"(","color":"#E6EDF3"},{"content":"\"resize\"","color":"#A5D6FF"},{"content":", rest);","color":"#E6EDF3"}],[{"content":" };","color":"#E6EDF3"}],[{"content":" }, []);","color":"#E6EDF3"}],[],[{"content":" ","color":"#E6EDF3"},{"content":"function","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"handlePointerMove","color":"#D2A8FF"},{"content":"(","color":"#E6EDF3"},{"content":"event","color":"#FFA657"},{"content":":","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"PointerEvent","color":"#FFA657"},{"content":"<","color":"#E6EDF3"},{"content":"HTMLDivElement","color":"#FFA657"},{"content":">) {","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"moveLight","color":"#D2A8FF"},{"content":"(event.currentTarget, event.clientX, event.clientY);","color":"#E6EDF3"}],[{"content":" }","color":"#E6EDF3"}],[],[{"content":" ","color":"#E6EDF3"},{"content":"return","color":"#FF7B72"},{"content":" (","color":"#E6EDF3"}],[{"content":" <","color":"#E6EDF3"},{"content":"section","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"{...","color":"#FF7B72"},{"content":"props","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"`bento-features-root @container relative w-full break-keep text-white ${","color":"#A5D6FF"},{"content":"className","color":"#E6EDF3"},{"content":"}`","color":"#A5D6FF"},{"content":"}","color":"#FF7B72"},{"content":">","color":"#E6EDF3"}],[{"content":" <","color":"#E6EDF3"},{"content":"header","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"mb-4 flex flex-col gap-2 @md:mb-3 @md:flex-row @md:items-end @md:justify-between @md:gap-6 @3xl:mb-7\"","color":"#A5D6FF"},{"content":">","color":"#E6EDF3"}],[{"content":" <","color":"#E6EDF3"},{"content":"div","color":"#7EE787"},{"content":">","color":"#E6EDF3"}],[{"content":" <","color":"#E6EDF3"},{"content":"p","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"inline-flex items-center gap-1.5 text-[11px] font-semibold tracking-[0.18em] text-indigo-300\"","color":"#A5D6FF"},{"content":">","color":"#E6EDF3"}],[{"content":" <","color":"#E6EDF3"},{"content":"Sparkles","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"aria-hidden","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"size-3.5\"","color":"#A5D6FF"},{"content":" />","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"{","color":"#FF7B72"},{"content":"eyebrow","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"}],[{"content":" ","color":"#E6EDF3"}],[{"content":" <","color":"#E6EDF3"},{"content":"h2","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"mt-1.5 bg-linear-to-r from-white via-white to-indigo-200 bg-clip-text text-[26px] font-bold leading-tight tracking-tight text-transparent @md:mt-1 @md:text-[22px] @3xl:text-[38px]\"","color":"#A5D6FF"},{"content":">","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"{","color":"#FF7B72"},{"content":"heading","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"}],[{"content":" ","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"}],[{"content":" <","color":"#E6EDF3"},{"content":"p","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"max-w-sm text-balance text-[14px] leading-relaxed text-white/60 @md:max-w-[13.5rem] @md:text-right @md:text-[12.5px] @md:leading-snug @3xl:max-w-xs @3xl:text-[15px] @3xl:leading-relaxed\"","color":"#A5D6FF"},{"content":">","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"{","color":"#FF7B72"},{"content":"subheading","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"}],[{"content":" ","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"}],[],[{"content":" <","color":"#E6EDF3"},{"content":"div","color":"#7EE787"}],[{"content":" ","color":"#E6EDF3"},{"content":"ref","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"gridRef","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"}],[{"content":" ","color":"#E6EDF3"},{"content":"onPointerMove","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"handlePointerMove","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"}],[{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"bento-features-grid grid auto-rows-[minmax(9.75rem,auto)] grid-cols-2 gap-2.5 @md:auto-rows-[6.75rem] @md:grid-cols-[1fr_1fr_1.3fr_1fr] @md:gap-2 @3xl:auto-rows-[12.25rem] @3xl:gap-3\"","color":"#A5D6FF"}],[{"content":" >","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"{","color":"#FF7B72"},{"content":"features.","color":"#E6EDF3"},{"content":"map","color":"#D2A8FF"},{"content":"((","color":"#E6EDF3"},{"content":"feature","color":"#FFA657"},{"content":", ","color":"#E6EDF3"},{"content":"index","color":"#FFA657"},{"content":") ","color":"#E6EDF3"},{"content":"=>","color":"#FF7B72"},{"content":" (","color":"#E6EDF3"}],[{"content":" <","color":"#E6EDF3"},{"content":"article","color":"#7EE787"}],[{"content":" ","color":"#E6EDF3"},{"content":"key","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"feature.title","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"}],[{"content":" ","color":"#E6EDF3"},{"content":"data-bento-tile","color":"#79C0FF"}],[{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"`bento-features-tile group relative isolate rounded-2xl bg-white/[0.08] p-px transition-[transform,box-shadow] duration-300 ease-out hover:-translate-y-1 hover:shadow-[0_22px_45px_-20px_rgba(129,140,248,0.6)] ${","color":"#A5D6FF"},{"content":"tileLayout","color":"#E6EDF3"},{"content":"[","color":"#A5D6FF"},{"content":"index","color":"#E6EDF3"},{"content":"] ","color":"#A5D6FF"},{"content":"??","color":"#FF7B72"},{"content":" ","color":"#A5D6FF"},{"content":"\"\"}`","color":"#A5D6FF"},{"content":"}","color":"#FF7B72"}],[{"content":" >","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"{","color":"#FF7B72"},{"content":"/* 1px 바깥 여백에만 보이는 빛 → 포인터를 따라다니는 테두리 */","color":"#8B949E"},{"content":"}","color":"#FF7B72"}],[{"content":" <","color":"#E6EDF3"},{"content":"span","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"aria-hidden","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"bento-features-light pointer-events-none absolute inset-0 rounded-[inherit] opacity-50 transition-opacity duration-300\"","color":"#A5D6FF"},{"content":" />","color":"#E6EDF3"}],[{"content":" <","color":"#E6EDF3"},{"content":"span","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"aria-hidden","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"bento-features-bloom pointer-events-none absolute -inset-1.5 -z-10 rounded-[22px] opacity-0 blur-md transition-opacity duration-300 group-hover:opacity-60\"","color":"#A5D6FF"},{"content":" />","color":"#E6EDF3"}],[{"content":" <","color":"#E6EDF3"},{"content":"div","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"relative flex h-full flex-col overflow-hidden rounded-[15px] bg-[linear-gradient(180deg,#141628,#0b0c16)] p-3 @md:p-2.5 @3xl:p-5\"","color":"#A5D6FF"},{"content":">","color":"#E6EDF3"}],[{"content":" <","color":"#E6EDF3"},{"content":"span","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"aria-hidden","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"bento-features-glow pointer-events-none absolute inset-0 opacity-0 transition-opacity duration-300 group-hover:opacity-100\"","color":"#A5D6FF"},{"content":" />","color":"#E6EDF3"}],[{"content":" <","color":"#E6EDF3"},{"content":"div","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"aria-hidden","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"relative min-h-0 flex-1\"","color":"#A5D6FF"},{"content":">","color":"#E6EDF3"}],[{"content":" <","color":"#E6EDF3"},{"content":"Visual","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"type","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"feature.visual","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"},{"content":" />","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"}],[{"content":" <","color":"#E6EDF3"},{"content":"h3","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"relative mt-2 truncate text-[14px] font-semibold tracking-tight @md:text-[12.5px] @3xl:mt-3 @3xl:text-[16px]\"","color":"#A5D6FF"},{"content":">","color":"#E6EDF3"},{"content":"{","color":"#FF7B72"},{"content":"feature.title","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"},{"content":"","color":"#E6EDF3"}],[{"content":" <","color":"#E6EDF3"},{"content":"p","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"relative mt-0.5 text-[12px] leading-snug text-white/55 @md:hidden @3xl:mt-1 @3xl:block @3xl:text-[13px]\"","color":"#A5D6FF"},{"content":">","color":"#E6EDF3"},{"content":"{","color":"#FF7B72"},{"content":"feature.description","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"},{"content":"","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"}],[{"content":" ))","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"}],[{"content":" ","color":"#E6EDF3"}],[],[{"content":" <","color":"#E6EDF3"},{"content":"style","color":"#7EE787"},{"content":">","color":"#E6EDF3"},{"content":"{","color":"#FF7B72"},{"content":"`","color":"#A5D6FF"}],[{"content":" @property --bento-features-num { syntax: \"\"; initial-value: 0; inherits: false; }","color":"#A5D6FF"}],[{"content":" .bento-features-light, .bento-features-bloom { background: radial-gradient(210px circle at var(--x, -300px) var(--y, -300px), #fff, rgba(167,139,250,.75) 25%, rgba(99,102,241,.25) 50%, transparent 75%); }","color":"#A5D6FF"}],[{"content":" .bento-features-glow { background: radial-gradient(260px circle at var(--x, -300px) var(--y, -300px), rgba(129,140,248,.2), transparent 70%); }","color":"#A5D6FF"}],[{"content":" .bento-features-grid:hover .bento-features-light { opacity: 1; }","color":"#A5D6FF"}],[],[{"content":" /* 기본 스타일 = 애니메이션이 끝난 모습. 동작 줄이기에서는 이 완성 상태만 보입니다. */","color":"#A5D6FF"}],[{"content":" .bento-features-typed { display: inline-block; vertical-align: bottom; overflow: hidden; white-space: nowrap; width: 6ch; animation: bento-features-type 7s steps(6, end) infinite; }","color":"#A5D6FF"}],[{"content":" .bento-features-line { animation: bento-features-line 7s infinite; }","color":"#A5D6FF"}],[{"content":" .bento-features-ghost { color: #6ee7b7; animation: bento-features-ghost 7s infinite; }","color":"#A5D6FF"}],[{"content":" .bento-features-caret { display: inline-block; width: 1.5px; height: 1.15em; margin: 0 1px; vertical-align: -0.2em; background: #7dd3fc; }","color":"#A5D6FF"}],[{"content":" .bento-features-caret-a { visibility: hidden; animation: bento-features-caret-a 7s step-end infinite, bento-features-blink 1s step-end infinite; }","color":"#A5D6FF"}],[{"content":" .bento-features-caret-b { animation: bento-features-caret-b 7s step-end infinite, bento-features-blink 1s step-end infinite; }","color":"#A5D6FF"}],[{"content":" .bento-features-tab { opacity: 0; animation: bento-features-tab 7s infinite; }","color":"#A5D6FF"}],[{"content":" @keyframes bento-features-type { 0% { width: 0; } 24%, 100% { width: 6ch; } }","color":"#A5D6FF"}],[{"content":" @keyframes bento-features-line { 0%, 90% { opacity: 1; } 96%, 100% { opacity: 0; } }","color":"#A5D6FF"}],[{"content":" @keyframes bento-features-ghost { 0%, 28% { opacity: 0; color: rgba(255,255,255,.4); } 33%, 56% { opacity: 1; color: rgba(255,255,255,.4); } 62%, 100% { opacity: 1; color: #6ee7b7; } }","color":"#A5D6FF"}],[{"content":" @keyframes bento-features-caret-a { 0% { visibility: visible; } 60% { visibility: hidden; } }","color":"#A5D6FF"}],[{"content":" @keyframes bento-features-caret-b { 0% { visibility: hidden; } 60% { visibility: visible; } }","color":"#A5D6FF"}],[{"content":" @keyframes bento-features-blink { 50% { opacity: 0; } }","color":"#A5D6FF"}],[{"content":" @keyframes bento-features-tab { 0%, 34% { opacity: 0; transform: translateY(3px); } 40%, 53% { opacity: 1; transform: none; } 57% { opacity: 1; transform: scale(.85); } 62%, 100% { opacity: 0; } }","color":"#A5D6FF"}],[],[{"content":" .bento-features-user { transform-origin: bottom right; animation: bento-features-user 8s infinite; }","color":"#A5D6FF"}],[{"content":" .bento-features-ai { transform-origin: bottom left; animation: bento-features-ai 8s infinite; }","color":"#A5D6FF"}],[{"content":" .bento-features-dots { opacity: 0; animation: bento-features-dots 8s infinite; }","color":"#A5D6FF"}],[{"content":" .bento-features-dots i { animation: bento-features-bounce 1s ease-in-out infinite; }","color":"#A5D6FF"}],[{"content":" .bento-features-dots i:nth-child(2) { animation-delay: .15s; }","color":"#A5D6FF"}],[{"content":" .bento-features-dots i:nth-child(3) { animation-delay: .3s; }","color":"#A5D6FF"}],[{"content":" @keyframes bento-features-user { 0%, 4% { opacity: 0; transform: translateY(8px) scale(.9); } 10%, 90% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; } }","color":"#A5D6FF"}],[{"content":" @keyframes bento-features-dots { 0%, 14% { opacity: 0; } 18%, 38% { opacity: 1; } 42%, 100% { opacity: 0; } }","color":"#A5D6FF"}],[{"content":" @keyframes bento-features-ai { 0%, 40% { opacity: 0; transform: translateY(8px) scale(.92); } 47%, 90% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; } }","color":"#A5D6FF"}],[{"content":" @keyframes bento-features-bounce { 0%, 60%, 100% { transform: none; } 30% { transform: translateY(-3px); } }","color":"#A5D6FF"}],[],[{"content":" .bento-features-ring { stroke-dashoffset: 22; animation: bento-features-ring 6s cubic-bezier(.6,0,.2,1) infinite; }","color":"#A5D6FF"}],[{"content":" .bento-features-count { --bento-features-num: 78; counter-reset: bento-num var(--bento-features-num); animation: bento-features-count 6s cubic-bezier(.6,0,.2,1) infinite; }","color":"#A5D6FF"}],[{"content":" .bento-features-count::after { content: counter(bento-num) \"%\"; }","color":"#A5D6FF"}],[{"content":" @keyframes bento-features-ring { 0% { stroke-dashoffset: 100; } 40%, 82% { stroke-dashoffset: 22; } 100% { stroke-dashoffset: 100; } }","color":"#A5D6FF"}],[{"content":" @keyframes bento-features-count { 0% { --bento-features-num: 0; } 40%, 82% { --bento-features-num: 78; } 100% { --bento-features-num: 0; } }","color":"#A5D6FF"}],[],[{"content":" .bento-features-bar { transform-origin: bottom; animation: bento-features-bar 6s infinite backwards; }","color":"#A5D6FF"}],[{"content":" .bento-features-badge { animation: bento-features-badge 6s infinite; }","color":"#A5D6FF"}],[{"content":" @keyframes bento-features-bar { 0% { transform: scaleY(.06); animation-timing-function: cubic-bezier(.3,1.5,.5,1); } 32%, 84% { transform: scaleY(1); animation-timing-function: ease-in; } 100% { transform: scaleY(.06); } }","color":"#A5D6FF"}],[{"content":" @keyframes bento-features-badge { 0%, 36% { opacity: 0; transform: translateY(4px); } 44%, 84% { opacity: 1; transform: none; } 92%, 100% { opacity: 0; } }","color":"#A5D6FF"}],[],[{"content":" .bento-features-track { background: #34d399; animation: bento-features-track 5s ease infinite backwards; }","color":"#A5D6FF"}],[{"content":" .bento-features-knob { transform: translateX(100%); animation: bento-features-knob 5s cubic-bezier(.5,1.6,.4,1) infinite backwards; }","color":"#A5D6FF"}],[{"content":" @keyframes bento-features-track { 0%, 14% { background: rgba(255,255,255,.16); } 22%, 72% { background: #34d399; } 80%, 100% { background: rgba(255,255,255,.16); } }","color":"#A5D6FF"}],[{"content":" @keyframes bento-features-knob { 0%, 14% { transform: none; } 22%, 72% { transform: translateX(100%); } 80%, 100% { transform: none; } }","color":"#A5D6FF"}],[],[{"content":" .bento-features-pipe { transform-origin: left; animation: bento-features-pipe 6s ease-in-out infinite; }","color":"#A5D6FF"}],[{"content":" .bento-features-node { animation: 6s ease infinite; }","color":"#A5D6FF"}],[{"content":" .bento-features-live { animation: bento-features-live 6s infinite; }","color":"#A5D6FF"}],[{"content":" .bento-features-ping { animation: bento-features-ping 1.4s ease-out infinite; }","color":"#A5D6FF"}],[{"content":" @keyframes bento-features-pipe { 0%, 6% { transform: scaleX(0); opacity: 1; } 60%, 90% { transform: scaleX(1); opacity: 1; } 97%, 100% { transform: scaleX(1); opacity: 0; } }","color":"#A5D6FF"}],[{"content":" ${","color":"#A5D6FF"},{"content":"[","color":"#A5D6FF"},{"content":"6","color":"#79C0FF"},{"content":", ","color":"#A5D6FF"},{"content":"33","color":"#79C0FF"},{"content":", ","color":"#A5D6FF"},{"content":"60","color":"#79C0FF"},{"content":"].","color":"#A5D6FF"},{"content":"map","color":"#D2A8FF"},{"content":"((","color":"#A5D6FF"},{"content":"at","color":"#79C0FF"},{"content":", ","color":"#A5D6FF"},{"content":"i","color":"#79C0FF"},{"content":") ","color":"#A5D6FF"},{"content":"=>","color":"#FF7B72"},{"content":" ","color":"#A5D6FF"},{"content":"`@keyframes bento-features-node-${","color":"#A5D6FF"},{"content":"i","color":"#E6EDF3"},{"content":"} { 0%, ${","color":"#A5D6FF"},{"content":"at","color":"#E6EDF3"},{"content":"}% { background: #1b1d2e; color: rgba(255,255,255,.45); box-shadow: 0 0 0 1px rgba(255,255,255,.12); } ${","color":"#A5D6FF"},{"content":"at","color":"#E6EDF3"},{"content":" ","color":"#A5D6FF"},{"content":"+","color":"#FF7B72"},{"content":" ","color":"#A5D6FF"},{"content":"5","color":"#79C0FF"},{"content":"}%, 90% { background: #10b981; color: #fff; box-shadow: 0 0 0 1px #6ee7b7, 0 0 14px rgba(16,185,129,.7); } 97%, 100% { background: #1b1d2e; color: rgba(255,255,255,.45); box-shadow: 0 0 0 1px rgba(255,255,255,.12); } }`","color":"#A5D6FF"},{"content":").","color":"#A5D6FF"},{"content":"join","color":"#D2A8FF"},{"content":"(","color":"#A5D6FF"},{"content":"\"","color":"#A5D6FF"},{"content":"\\n","color":"#FF7B72"},{"content":"\"","color":"#A5D6FF"},{"content":")","color":"#A5D6FF"},{"content":"}","color":"#A5D6FF"}],[{"content":" @keyframes bento-features-live { 0%, 64% { opacity: 0; transform: scale(.85); } 71%, 90% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; } }","color":"#A5D6FF"}],[{"content":" @keyframes bento-features-ping { 0% { box-shadow: 0 0 0 0 rgba(52,211,153,.7); } 100% { box-shadow: 0 0 0 6px rgba(52,211,153,0); } }","color":"#A5D6FF"}],[],[{"content":" @media (prefers-reduced-motion: reduce) {","color":"#A5D6FF"}],[{"content":" .bento-features-root *, .bento-features-root *::before, .bento-features-root *::after { animation: none !important; transition: none !important; }","color":"#A5D6FF"}],[{"content":" }","color":"#A5D6FF"}],[{"content":" `","color":"#A5D6FF"},{"content":"}","color":"#FF7B72"},{"content":"","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"}],[{"content":" );","color":"#E6EDF3"}],[{"content":"}","color":"#E6EDF3"}],[],[{"content":"// 포인터 좌표를 \"각 타일 기준\"으로 바꿔 넣으면, 옆 타일의 테두리도 가까운 쪽부터 함께 빛납니다.","color":"#8B949E"}],[{"content":"function","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"moveLight","color":"#D2A8FF"},{"content":"(","color":"#E6EDF3"},{"content":"grid","color":"#FFA657"},{"content":":","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"HTMLElement","color":"#FFA657"},{"content":", ","color":"#E6EDF3"},{"content":"clientX","color":"#FFA657"},{"content":":","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"number","color":"#79C0FF"},{"content":", ","color":"#E6EDF3"},{"content":"clientY","color":"#FFA657"},{"content":":","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"number","color":"#79C0FF"},{"content":") {","color":"#E6EDF3"}],[{"content":" grid.","color":"#E6EDF3"},{"content":"querySelectorAll","color":"#D2A8FF"},{"content":"<","color":"#E6EDF3"},{"content":"HTMLElement","color":"#FFA657"},{"content":">(","color":"#E6EDF3"},{"content":"\"[data-bento-tile]\"","color":"#A5D6FF"},{"content":").","color":"#E6EDF3"},{"content":"forEach","color":"#D2A8FF"},{"content":"(","color":"#E6EDF3"},{"content":"tile","color":"#FFA657"},{"content":" ","color":"#E6EDF3"},{"content":"=>","color":"#FF7B72"},{"content":" {","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"const","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"box","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" tile.","color":"#E6EDF3"},{"content":"getBoundingClientRect","color":"#D2A8FF"},{"content":"();","color":"#E6EDF3"}],[{"content":" tile.style.","color":"#E6EDF3"},{"content":"setProperty","color":"#D2A8FF"},{"content":"(","color":"#E6EDF3"},{"content":"\"--x\"","color":"#A5D6FF"},{"content":", ","color":"#E6EDF3"},{"content":"`${","color":"#A5D6FF"},{"content":"clientX","color":"#E6EDF3"},{"content":" ","color":"#A5D6FF"},{"content":"-","color":"#FF7B72"},{"content":" ","color":"#A5D6FF"},{"content":"box","color":"#E6EDF3"},{"content":".","color":"#A5D6FF"},{"content":"left","color":"#E6EDF3"},{"content":"}px`","color":"#A5D6FF"},{"content":");","color":"#E6EDF3"}],[{"content":" tile.style.","color":"#E6EDF3"},{"content":"setProperty","color":"#D2A8FF"},{"content":"(","color":"#E6EDF3"},{"content":"\"--y\"","color":"#A5D6FF"},{"content":", ","color":"#E6EDF3"},{"content":"`${","color":"#A5D6FF"},{"content":"clientY","color":"#E6EDF3"},{"content":" ","color":"#A5D6FF"},{"content":"-","color":"#FF7B72"},{"content":" ","color":"#A5D6FF"},{"content":"box","color":"#E6EDF3"},{"content":".","color":"#A5D6FF"},{"content":"top","color":"#E6EDF3"},{"content":"}px`","color":"#A5D6FF"},{"content":");","color":"#E6EDF3"}],[{"content":" });","color":"#E6EDF3"}],[{"content":"}","color":"#E6EDF3"}],[],[{"content":"function","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"Visual","color":"#D2A8FF"},{"content":"({ ","color":"#E6EDF3"},{"content":"type","color":"#FFA657"},{"content":" }","color":"#E6EDF3"},{"content":":","color":"#FF7B72"},{"content":" { ","color":"#E6EDF3"},{"content":"type","color":"#FFA657"},{"content":":","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"BentoVisual","color":"#FFA657"},{"content":" }) {","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"if","color":"#FF7B72"},{"content":" (type ","color":"#E6EDF3"},{"content":"===","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"\"code\"","color":"#A5D6FF"},{"content":") ","color":"#E6EDF3"},{"content":"return","color":"#FF7B72"},{"content":" <","color":"#E6EDF3"},{"content":"CodeVisual","color":"#7EE787"},{"content":" />;","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"if","color":"#FF7B72"},{"content":" (type ","color":"#E6EDF3"},{"content":"===","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"\"chat\"","color":"#A5D6FF"},{"content":") ","color":"#E6EDF3"},{"content":"return","color":"#FF7B72"},{"content":" <","color":"#E6EDF3"},{"content":"ChatVisual","color":"#7EE787"},{"content":" />;","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"if","color":"#FF7B72"},{"content":" (type ","color":"#E6EDF3"},{"content":"===","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"\"ring\"","color":"#A5D6FF"},{"content":") ","color":"#E6EDF3"},{"content":"return","color":"#FF7B72"},{"content":" <","color":"#E6EDF3"},{"content":"RingVisual","color":"#7EE787"},{"content":" />;","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"if","color":"#FF7B72"},{"content":" (type ","color":"#E6EDF3"},{"content":"===","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"\"bars\"","color":"#A5D6FF"},{"content":") ","color":"#E6EDF3"},{"content":"return","color":"#FF7B72"},{"content":" <","color":"#E6EDF3"},{"content":"BarsVisual","color":"#7EE787"},{"content":" />;","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"if","color":"#FF7B72"},{"content":" (type ","color":"#E6EDF3"},{"content":"===","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"\"toggle\"","color":"#A5D6FF"},{"content":") ","color":"#E6EDF3"},{"content":"return","color":"#FF7B72"},{"content":" <","color":"#E6EDF3"},{"content":"ToggleVisual","color":"#7EE787"},{"content":" />;","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"return","color":"#FF7B72"},{"content":" <","color":"#E6EDF3"},{"content":"DeployVisual","color":"#7EE787"},{"content":" />;","color":"#E6EDF3"}],[{"content":"}","color":"#E6EDF3"}],[],[{"content":"function","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"CodeVisual","color":"#D2A8FF"},{"content":"() {","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"return","color":"#FF7B72"},{"content":" (","color":"#E6EDF3"}],[{"content":" <","color":"#E6EDF3"},{"content":"div","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"flex h-full items-center\"","color":"#A5D6FF"},{"content":">","color":"#E6EDF3"}],[{"content":" <","color":"#E6EDF3"},{"content":"div","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"w-full rounded-xl border border-white/10 bg-black/40 px-3 py-2 font-mono text-[11px] leading-[18px] text-white/85 shadow-[inset_0_1px_0_rgba(255,255,255,0.06)] @md:py-1.5 @3xl:px-4 @3xl:py-3 @3xl:text-[13px] @3xl:leading-[24px]\"","color":"#A5D6FF"},{"content":">","color":"#E6EDF3"}],[{"content":" <","color":"#E6EDF3"},{"content":"div","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"mb-1.5 flex items-center gap-1 @md:hidden @3xl:flex\"","color":"#A5D6FF"},{"content":">","color":"#E6EDF3"}],[{"content":" <","color":"#E6EDF3"},{"content":"i","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"size-2 rounded-full bg-rose-400/80\"","color":"#A5D6FF"},{"content":" />","color":"#E6EDF3"}],[{"content":" <","color":"#E6EDF3"},{"content":"i","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"size-2 rounded-full bg-amber-300/80\"","color":"#A5D6FF"},{"content":" />","color":"#E6EDF3"}],[{"content":" <","color":"#E6EDF3"},{"content":"i","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"size-2 rounded-full bg-emerald-400/80\"","color":"#A5D6FF"},{"content":" />","color":"#E6EDF3"}],[{"content":" <","color":"#E6EDF3"},{"content":"span","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"ml-1.5 text-[10.5px] text-white/35\"","color":"#A5D6FF"},{"content":">tutor.ts","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"}],[{"content":" <","color":"#E6EDF3"},{"content":"p","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"truncate\"","color":"#A5D6FF"},{"content":"><","color":"#E6EDF3"},{"content":"span","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"text-white/25\"","color":"#A5D6FF"},{"content":">1 <","color":"#E6EDF3"},{"content":"span","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"text-violet-300\"","color":"#A5D6FF"},{"content":">const tutor = <","color":"#E6EDF3"},{"content":"span","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"text-sky-300\"","color":"#A5D6FF"},{"content":">ai.coach()","color":"#E6EDF3"}],[{"content":" <","color":"#E6EDF3"},{"content":"p","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"bento-features-line whitespace-nowrap\"","color":"#A5D6FF"},{"content":">","color":"#E6EDF3"}],[{"content":" <","color":"#E6EDF3"},{"content":"span","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"text-white/25\"","color":"#A5D6FF"},{"content":">2 ","color":"#E6EDF3"}],[{"content":" <","color":"#E6EDF3"},{"content":"span","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"bento-features-typed\"","color":"#A5D6FF"},{"content":">tutor.","color":"#E6EDF3"}],[{"content":" <","color":"#E6EDF3"},{"content":"span","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"bento-features-caret bento-features-caret-a\"","color":"#A5D6FF"},{"content":" />","color":"#E6EDF3"}],[{"content":" <","color":"#E6EDF3"},{"content":"span","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"bento-features-ghost\"","color":"#A5D6FF"},{"content":">explain(bug)","color":"#E6EDF3"}],[{"content":" <","color":"#E6EDF3"},{"content":"span","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"bento-features-caret bento-features-caret-b\"","color":"#A5D6FF"},{"content":" />","color":"#E6EDF3"}],[{"content":" <","color":"#E6EDF3"},{"content":"kbd","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"bento-features-tab ml-1.5 inline-block rounded border border-white/20 bg-white/10 px-1 text-[10px] leading-[14px] text-white/80\"","color":"#A5D6FF"},{"content":">Tab","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"}],[{"content":" );","color":"#E6EDF3"}],[{"content":"}","color":"#E6EDF3"}],[],[{"content":"function","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"ChatVisual","color":"#D2A8FF"},{"content":"() {","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"return","color":"#FF7B72"},{"content":" (","color":"#E6EDF3"}],[{"content":" <","color":"#E6EDF3"},{"content":"div","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"flex h-full flex-col text-[11.5px] leading-snug @md:text-[11px] @3xl:text-[13px]\"","color":"#A5D6FF"},{"content":">","color":"#E6EDF3"}],[{"content":" <","color":"#E6EDF3"},{"content":"div","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"flex items-center gap-2 border-b border-white/[0.07] pb-2 @md:pb-1.5 @3xl:pb-3\"","color":"#A5D6FF"},{"content":">","color":"#E6EDF3"}],[{"content":" <","color":"#E6EDF3"},{"content":"span","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"grid size-6 shrink-0 place-items-center rounded-full bg-[linear-gradient(135deg,#a78bfa,#22d3ee)] text-[9px] font-black @md:size-5 @md:text-[8px] @3xl:size-8 @3xl:text-[11px]\"","color":"#A5D6FF"},{"content":">AI","color":"#E6EDF3"}],[{"content":" <","color":"#E6EDF3"},{"content":"b","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"text-[11.5px] font-semibold text-white/90 @3xl:text-[13px]\"","color":"#A5D6FF"},{"content":">AI 튜터","color":"#E6EDF3"}],[{"content":" <","color":"#E6EDF3"},{"content":"i","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"bento-features-ping ml-auto size-1.5 rounded-full bg-emerald-400\"","color":"#A5D6FF"},{"content":" />","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"}],[{"content":" <","color":"#E6EDF3"},{"content":"div","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"mt-auto flex flex-col gap-1.5 pt-2 @3xl:gap-2\"","color":"#A5D6FF"},{"content":">","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"{","color":"#FF7B72"},{"content":"/* 세로 공간이 넉넉한 배치에서는 지난 대화를 한 쌍 더 보여 줍니다. */","color":"#8B949E"},{"content":"}","color":"#FF7B72"}],[{"content":" <","color":"#E6EDF3"},{"content":"p","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"max-w-[92%] self-end rounded-2xl rounded-br-md bg-indigo-500/25 px-2.5 py-1.5 text-indigo-100/80 @md:hidden @3xl:block @3xl:px-3\"","color":"#A5D6FF"},{"content":">useEffect는 언제 실행돼요?","color":"#E6EDF3"}],[{"content":" <","color":"#E6EDF3"},{"content":"p","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"max-w-[92%] self-start rounded-2xl rounded-bl-md bg-white/[0.06] px-2.5 py-1.5 text-white/55 @md:hidden @3xl:block @3xl:px-3\"","color":"#A5D6FF"},{"content":">화면이 그려진 직후예요.","color":"#E6EDF3"}],[{"content":" <","color":"#E6EDF3"},{"content":"p","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"hidden max-w-[92%] self-start rounded-2xl rounded-bl-md bg-white/[0.06] px-2.5 py-1.5 text-white/55 @md:block @3xl:hidden\"","color":"#A5D6FF"},{"content":">질문해 보세요!","color":"#E6EDF3"}],[{"content":" <","color":"#E6EDF3"},{"content":"p","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"bento-features-user max-w-[92%] self-end rounded-2xl rounded-br-md bg-indigo-500 px-2.5 py-1.5 font-medium text-white shadow-[0_6px_18px_-6px_rgba(99,102,241,0.9)] @3xl:px-3\"","color":"#A5D6FF"},{"content":">이 에러 왜 나요?","color":"#E6EDF3"}],[{"content":" <","color":"#E6EDF3"},{"content":"div","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"relative max-w-[92%] self-start\"","color":"#A5D6FF"},{"content":">","color":"#E6EDF3"}],[{"content":" <","color":"#E6EDF3"},{"content":"span","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"bento-features-dots absolute bottom-0 left-0 flex gap-1 rounded-2xl rounded-bl-md bg-white/10 px-2.5 py-2\"","color":"#A5D6FF"},{"content":">","color":"#E6EDF3"}],[{"content":" <","color":"#E6EDF3"},{"content":"i","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"size-1 rounded-full bg-white/70\"","color":"#A5D6FF"},{"content":" />","color":"#E6EDF3"}],[{"content":" <","color":"#E6EDF3"},{"content":"i","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"size-1 rounded-full bg-white/70\"","color":"#A5D6FF"},{"content":" />","color":"#E6EDF3"}],[{"content":" <","color":"#E6EDF3"},{"content":"i","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"size-1 rounded-full bg-white/70\"","color":"#A5D6FF"},{"content":" />","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"}],[{"content":" <","color":"#E6EDF3"},{"content":"p","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"bento-features-ai rounded-2xl rounded-bl-md bg-white/10 px-2.5 py-1.5 text-white/90 @3xl:px-3\"","color":"#A5D6FF"},{"content":">","color":"#E6EDF3"}],[{"content":" <","color":"#E6EDF3"},{"content":"b","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"font-semibold text-cyan-300\"","color":"#A5D6FF"},{"content":">3번째 줄에 괄호가 빠졌어요!","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"}],[{"content":" );","color":"#E6EDF3"}],[{"content":"}","color":"#E6EDF3"}],[],[{"content":"function","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"RingVisual","color":"#D2A8FF"},{"content":"() {","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"return","color":"#FF7B72"},{"content":" (","color":"#E6EDF3"}],[{"content":" <","color":"#E6EDF3"},{"content":"div","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"flex h-full items-center justify-center gap-3\"","color":"#A5D6FF"},{"content":">","color":"#E6EDF3"}],[{"content":" <","color":"#E6EDF3"},{"content":"div","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"relative size-[60px] @md:size-14 @3xl:size-[84px]\"","color":"#A5D6FF"},{"content":">","color":"#E6EDF3"}],[{"content":" <","color":"#E6EDF3"},{"content":"svg","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"viewBox","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"0 0 64 64\"","color":"#A5D6FF"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"size-full -rotate-90\"","color":"#A5D6FF"},{"content":">","color":"#E6EDF3"}],[{"content":" <","color":"#E6EDF3"},{"content":"defs","color":"#7EE787"},{"content":">","color":"#E6EDF3"}],[{"content":" <","color":"#E6EDF3"},{"content":"linearGradient","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"id","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"bento-features-ring-gradient\"","color":"#A5D6FF"},{"content":" ","color":"#E6EDF3"},{"content":"x1","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"0\"","color":"#A5D6FF"},{"content":" ","color":"#E6EDF3"},{"content":"y1","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"0\"","color":"#A5D6FF"},{"content":" ","color":"#E6EDF3"},{"content":"x2","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"1\"","color":"#A5D6FF"},{"content":" ","color":"#E6EDF3"},{"content":"y2","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"1\"","color":"#A5D6FF"},{"content":">","color":"#E6EDF3"}],[{"content":" <","color":"#E6EDF3"},{"content":"stop","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"offset","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"0\"","color":"#A5D6FF"},{"content":" ","color":"#E6EDF3"},{"content":"stopColor","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"#34d399\"","color":"#A5D6FF"},{"content":" />","color":"#E6EDF3"}],[{"content":" <","color":"#E6EDF3"},{"content":"stop","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"offset","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"1\"","color":"#A5D6FF"},{"content":" ","color":"#E6EDF3"},{"content":"stopColor","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"#22d3ee\"","color":"#A5D6FF"},{"content":" />","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"}],[{"content":" <","color":"#E6EDF3"},{"content":"circle","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"cx","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"32\"","color":"#A5D6FF"},{"content":" ","color":"#E6EDF3"},{"content":"cy","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"32\"","color":"#A5D6FF"},{"content":" ","color":"#E6EDF3"},{"content":"r","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"26\"","color":"#A5D6FF"},{"content":" ","color":"#E6EDF3"},{"content":"fill","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"none\"","color":"#A5D6FF"},{"content":" ","color":"#E6EDF3"},{"content":"stroke","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"rgba(255,255,255,0.08)\"","color":"#A5D6FF"},{"content":" ","color":"#E6EDF3"},{"content":"strokeWidth","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"7\"","color":"#A5D6FF"},{"content":" />","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"{","color":"#FF7B72"},{"content":"/* pathLength=100 덕분에 dashoffset을 \"남은 퍼센트\"로 바로 쓸 수 있어요. */","color":"#8B949E"},{"content":"}","color":"#FF7B72"}],[{"content":" <","color":"#E6EDF3"},{"content":"circle","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"bento-features-ring\"","color":"#A5D6FF"},{"content":" ","color":"#E6EDF3"},{"content":"cx","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"32\"","color":"#A5D6FF"},{"content":" ","color":"#E6EDF3"},{"content":"cy","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"32\"","color":"#A5D6FF"},{"content":" ","color":"#E6EDF3"},{"content":"r","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"26\"","color":"#A5D6FF"},{"content":" ","color":"#E6EDF3"},{"content":"fill","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"none\"","color":"#A5D6FF"},{"content":" ","color":"#E6EDF3"},{"content":"stroke","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"url(#bento-features-ring-gradient)\"","color":"#A5D6FF"},{"content":" ","color":"#E6EDF3"},{"content":"strokeWidth","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"7\"","color":"#A5D6FF"},{"content":" ","color":"#E6EDF3"},{"content":"strokeLinecap","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"round\"","color":"#A5D6FF"},{"content":" ","color":"#E6EDF3"},{"content":"pathLength","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"100","color":"#79C0FF"},{"content":"}","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"strokeDasharray","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"100\"","color":"#A5D6FF"},{"content":" />","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"}],[{"content":" <","color":"#E6EDF3"},{"content":"span","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"bento-features-count absolute inset-0 grid place-items-center text-[13px] font-bold tabular-nums @3xl:text-[18px]\"","color":"#A5D6FF"},{"content":" />","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"}],[{"content":" );","color":"#E6EDF3"}],[{"content":"}","color":"#E6EDF3"}],[],[{"content":"const","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"weeklyBars","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" [","color":"#E6EDF3"},{"content":"34","color":"#79C0FF"},{"content":", ","color":"#E6EDF3"},{"content":"48","color":"#79C0FF"},{"content":", ","color":"#E6EDF3"},{"content":"40","color":"#79C0FF"},{"content":", ","color":"#E6EDF3"},{"content":"62","color":"#79C0FF"},{"content":", ","color":"#E6EDF3"},{"content":"55","color":"#79C0FF"},{"content":", ","color":"#E6EDF3"},{"content":"78","color":"#79C0FF"},{"content":", ","color":"#E6EDF3"},{"content":"100","color":"#79C0FF"},{"content":"];","color":"#E6EDF3"}],[],[{"content":"function","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"BarsVisual","color":"#D2A8FF"},{"content":"() {","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"return","color":"#FF7B72"},{"content":" (","color":"#E6EDF3"}],[{"content":" <","color":"#E6EDF3"},{"content":"div","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"relative flex h-full items-end gap-[5px] px-0.5 pt-4\"","color":"#A5D6FF"},{"content":">","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"{","color":"#FF7B72"},{"content":"weeklyBars.","color":"#E6EDF3"},{"content":"map","color":"#D2A8FF"},{"content":"((","color":"#E6EDF3"},{"content":"height","color":"#FFA657"},{"content":", ","color":"#E6EDF3"},{"content":"index","color":"#FFA657"},{"content":") ","color":"#E6EDF3"},{"content":"=>","color":"#FF7B72"},{"content":" (","color":"#E6EDF3"}],[{"content":" <","color":"#E6EDF3"},{"content":"span","color":"#7EE787"}],[{"content":" ","color":"#E6EDF3"},{"content":"key","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"index","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"}],[{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"`bento-features-bar flex-1 rounded-t-[4px] ${","color":"#A5D6FF"},{"content":"index","color":"#E6EDF3"},{"content":" ","color":"#A5D6FF"},{"content":"===","color":"#FF7B72"},{"content":" ","color":"#A5D6FF"},{"content":"weeklyBars","color":"#E6EDF3"},{"content":".","color":"#A5D6FF"},{"content":"length","color":"#79C0FF"},{"content":" ","color":"#A5D6FF"},{"content":"-","color":"#FF7B72"},{"content":" ","color":"#A5D6FF"},{"content":"1","color":"#79C0FF"},{"content":" ","color":"#A5D6FF"},{"content":"?","color":"#FF7B72"},{"content":" ","color":"#A5D6FF"},{"content":"\"bg-linear-to-t from-fuchsia-500 to-amber-300 shadow-[0_0_14px_rgba(232,121,249,0.6)]\"","color":"#A5D6FF"},{"content":" ","color":"#A5D6FF"},{"content":":","color":"#FF7B72"},{"content":" ","color":"#A5D6FF"},{"content":"\"bg-linear-to-t from-indigo-500/30 to-indigo-300/80\"}`","color":"#A5D6FF"},{"content":"}","color":"#FF7B72"}],[{"content":" ","color":"#E6EDF3"},{"content":"style","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"{ height: ","color":"#E6EDF3"},{"content":"`${","color":"#A5D6FF"},{"content":"height","color":"#E6EDF3"},{"content":"}%`","color":"#A5D6FF"},{"content":", animationDelay: ","color":"#E6EDF3"},{"content":"`${","color":"#A5D6FF"},{"content":"index","color":"#E6EDF3"},{"content":" ","color":"#A5D6FF"},{"content":"*","color":"#FF7B72"},{"content":" ","color":"#A5D6FF"},{"content":"70","color":"#79C0FF"},{"content":"}ms`","color":"#A5D6FF"},{"content":" }","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"}],[{"content":" />","color":"#E6EDF3"}],[{"content":" ))","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"}],[{"content":" <","color":"#E6EDF3"},{"content":"span","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"bento-features-badge absolute right-0 top-0 rounded-full bg-amber-300/15 px-1.5 text-[10.5px] font-bold leading-[16px] text-amber-200 ring-1 ring-amber-300/30\"","color":"#A5D6FF"},{"content":">+24%","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"}],[{"content":" );","color":"#E6EDF3"}],[{"content":"}","color":"#E6EDF3"}],[],[{"content":"const","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"switches","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" [","color":"#E6EDF3"},{"content":"\"AI 힌트\"","color":"#A5D6FF"},{"content":", ","color":"#E6EDF3"},{"content":"\"자동 리뷰\"","color":"#A5D6FF"},{"content":"];","color":"#E6EDF3"}],[],[{"content":"function","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"ToggleVisual","color":"#D2A8FF"},{"content":"() {","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"return","color":"#FF7B72"},{"content":" (","color":"#E6EDF3"}],[{"content":" <","color":"#E6EDF3"},{"content":"div","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"flex h-full flex-col justify-center gap-1.5 @3xl:gap-2\"","color":"#A5D6FF"},{"content":">","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"{","color":"#FF7B72"},{"content":"switches.","color":"#E6EDF3"},{"content":"map","color":"#D2A8FF"},{"content":"((","color":"#E6EDF3"},{"content":"label","color":"#FFA657"},{"content":", ","color":"#E6EDF3"},{"content":"index","color":"#FFA657"},{"content":") ","color":"#E6EDF3"},{"content":"=>","color":"#FF7B72"},{"content":" (","color":"#E6EDF3"}],[{"content":" <","color":"#E6EDF3"},{"content":"div","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"key","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"label","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"flex items-center justify-between gap-1.5 rounded-lg bg-white/[0.05] px-2 py-1.5 ring-1 ring-white/[0.06] @md:px-1.5 @3xl:px-3\"","color":"#A5D6FF"},{"content":">","color":"#E6EDF3"}],[{"content":" <","color":"#E6EDF3"},{"content":"span","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"text-[11px] text-white/75 @3xl:text-[13px]\"","color":"#A5D6FF"},{"content":">","color":"#E6EDF3"},{"content":"{","color":"#FF7B72"},{"content":"label","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"},{"content":"","color":"#E6EDF3"}],[{"content":" <","color":"#E6EDF3"},{"content":"span","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"bento-features-track flex h-4 w-7 shrink-0 rounded-full p-0.5 @md:h-3.5 @md:w-6 @3xl:h-5 @3xl:w-9\"","color":"#A5D6FF"},{"content":" ","color":"#E6EDF3"},{"content":"style","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"{ animationDelay: ","color":"#E6EDF3"},{"content":"`${","color":"#A5D6FF"},{"content":"index","color":"#E6EDF3"},{"content":" ","color":"#A5D6FF"},{"content":"*","color":"#FF7B72"},{"content":" ","color":"#A5D6FF"},{"content":"0.7","color":"#79C0FF"},{"content":"}s`","color":"#A5D6FF"},{"content":" }","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"},{"content":">","color":"#E6EDF3"}],[{"content":" <","color":"#E6EDF3"},{"content":"span","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"bento-features-knob size-3 rounded-full bg-white shadow @md:size-2.5 @3xl:size-4\"","color":"#A5D6FF"},{"content":" ","color":"#E6EDF3"},{"content":"style","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"{ animationDelay: ","color":"#E6EDF3"},{"content":"`${","color":"#A5D6FF"},{"content":"index","color":"#E6EDF3"},{"content":" ","color":"#A5D6FF"},{"content":"*","color":"#FF7B72"},{"content":" ","color":"#A5D6FF"},{"content":"0.7","color":"#79C0FF"},{"content":"}s`","color":"#A5D6FF"},{"content":" }","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"},{"content":" />","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"}],[{"content":" ))","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"}],[{"content":" ","color":"#E6EDF3"}],[{"content":" );","color":"#E6EDF3"}],[{"content":"}","color":"#E6EDF3"}],[],[{"content":"const","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"pipeline","color":"#79C0FF"},{"content":" ","color":"#E6EDF3"},{"content":"=","color":"#FF7B72"},{"content":" [Hammer, FlaskConical, Rocket];","color":"#E6EDF3"}],[],[{"content":"function","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"DeployVisual","color":"#D2A8FF"},{"content":"() {","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"return","color":"#FF7B72"},{"content":" (","color":"#E6EDF3"}],[{"content":" <","color":"#E6EDF3"},{"content":"div","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"flex h-full flex-col items-center justify-center gap-2.5 @3xl:gap-4\"","color":"#A5D6FF"},{"content":">","color":"#E6EDF3"}],[{"content":" <","color":"#E6EDF3"},{"content":"div","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"relative flex w-full max-w-[9rem] items-center justify-between\"","color":"#A5D6FF"},{"content":">","color":"#E6EDF3"}],[{"content":" <","color":"#E6EDF3"},{"content":"span","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"absolute inset-x-3 top-1/2 h-0.5 -translate-y-1/2 rounded-full bg-white/10\"","color":"#A5D6FF"},{"content":">","color":"#E6EDF3"}],[{"content":" <","color":"#E6EDF3"},{"content":"span","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"bento-features-pipe block h-full rounded-full bg-linear-to-r from-emerald-400 to-cyan-300\"","color":"#A5D6FF"},{"content":" />","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"{","color":"#FF7B72"},{"content":"pipeline.","color":"#E6EDF3"},{"content":"map","color":"#D2A8FF"},{"content":"((","color":"#E6EDF3"},{"content":"Icon","color":"#FFA657"},{"content":", ","color":"#E6EDF3"},{"content":"index","color":"#FFA657"},{"content":") ","color":"#E6EDF3"},{"content":"=>","color":"#FF7B72"},{"content":" (","color":"#E6EDF3"}],[{"content":" <","color":"#E6EDF3"},{"content":"span","color":"#7EE787"}],[{"content":" ","color":"#E6EDF3"},{"content":"key","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"index","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"}],[{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"bento-features-node relative grid size-6 place-items-center rounded-full bg-emerald-500 text-white shadow-[0_0_0_1px_#6ee7b7,0_0_14px_rgba(16,185,129,0.7)] @md:size-[22px] @3xl:size-8\"","color":"#A5D6FF"}],[{"content":" ","color":"#E6EDF3"},{"content":"style","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"{ animationName: ","color":"#E6EDF3"},{"content":"`bento-features-node-${","color":"#A5D6FF"},{"content":"index","color":"#E6EDF3"},{"content":"}`","color":"#A5D6FF"},{"content":" }","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"}],[{"content":" >","color":"#E6EDF3"}],[{"content":" <","color":"#E6EDF3"},{"content":"Icon","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"size-3 @3xl:size-4\"","color":"#A5D6FF"},{"content":" ","color":"#E6EDF3"},{"content":"strokeWidth","color":"#79C0FF"},{"content":"={","color":"#FF7B72"},{"content":"2.5","color":"#79C0FF"},{"content":"}","color":"#FF7B72"},{"content":" />","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"}],[{"content":" ))","color":"#E6EDF3"},{"content":"}","color":"#FF7B72"}],[{"content":" ","color":"#E6EDF3"}],[{"content":" <","color":"#E6EDF3"},{"content":"span","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"bento-features-live inline-flex items-center gap-1.5 rounded-full bg-emerald-400/10 px-2 py-0.5 text-[10.5px] font-bold tracking-wide text-emerald-300 ring-1 ring-emerald-400/30 @3xl:text-[12px]\"","color":"#A5D6FF"},{"content":">","color":"#E6EDF3"}],[{"content":" <","color":"#E6EDF3"},{"content":"i","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"bento-features-ping size-1.5 rounded-full bg-emerald-400\"","color":"#A5D6FF"},{"content":" />","color":"#E6EDF3"}],[{"content":" LIVE","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"}],[{"content":" );","color":"#E6EDF3"}],[{"content":"}","color":"#E6EDF3"}],[],[{"content":"export","color":"#FF7B72"},{"content":" ","color":"#FFA657"},{"content":"default","color":"#FF7B72"},{"content":" ","color":"#FFA657"},{"content":"BentoFeatures;","color":"#E6EDF3"}]]},{"name":"demo.tsx","lines":[[{"content":"import","color":"#FF7B72"},{"content":" { BentoFeatures } ","color":"#E6EDF3"},{"content":"from","color":"#FF7B72"},{"content":" ","color":"#E6EDF3"},{"content":"\"@/components/ui/bento-features\"","color":"#A5D6FF"},{"content":";","color":"#E6EDF3"}],[],[{"content":"export","color":"#FF7B72"},{"content":" ","color":"#FFA657"},{"content":"default","color":"#FF7B72"},{"content":" ","color":"#FFA657"},{"content":"function","color":"#FF7B72"},{"content":" ","color":"#FFA657"},{"content":"Demo","color":"#D2A8FF"},{"content":"() ","color":"#FFA657"},{"content":"{","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"},{"content":"return","color":"#FF7B72"},{"content":" (","color":"#E6EDF3"}],[{"content":" <","color":"#E6EDF3"},{"content":"div","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"grid min-h-screen place-items-center bg-[radial-gradient(ellipse_at_50%_0%,#1b1f45,#06070d_65%)] px-4 py-4 sm:px-8 sm:py-8\"","color":"#A5D6FF"},{"content":">","color":"#E6EDF3"}],[{"content":" <","color":"#E6EDF3"},{"content":"BentoFeatures","color":"#7EE787"},{"content":" ","color":"#E6EDF3"},{"content":"className","color":"#79C0FF"},{"content":"=","color":"#FF7B72"},{"content":"\"max-w-5xl\"","color":"#A5D6FF"},{"content":" />","color":"#E6EDF3"}],[{"content":" ","color":"#E6EDF3"}],[{"content":" );","color":"#E6EDF3"}],[{"content":"}","color":"#E6EDF3"}]]}]}]}]]}] 16:null 1a:[["$","title","0",{"children":"벤토 기능 소개 · AI Coder"}],["$","meta","1",{"name":"description","content":"타일마다 작은 애니메이션이 살아 움직이는 벤토 그리드 기능 섹션"}],["$","meta","2",{"name":"application-name","content":"AI Coder"}],["$","link","3",{"rel":"manifest","href":"/manifest.webmanifest","crossOrigin":"$undefined"}],["$","meta","4",{"name":"referrer","content":"strict-origin-when-cross-origin"}],["$","meta","5",{"name":"robots","content":"index, follow, max-video-preview:-1, max-image-preview:large, max-snippet:-1"}],["$","meta","6",{"name":"category","content":"education"}],["$","link","7",{"rel":"canonical","href":"https://aicoder.kr/library/bento-features"}],["$","meta","8",{"name":"naver-site-verification","content":"3347449a2b36f2b5cea3e0cd9fb49ae3959ff348"}],["$","meta","9",{"property":"og:title","content":"벤토 기능 소개 · AI Coder"}],["$","meta","10",{"property":"og:description","content":"타일마다 작은 애니메이션이 살아 움직이는 벤토 그리드 기능 섹션"}],["$","meta","11",{"property":"og:url","content":"https://aicoder.kr/library/bento-features"}],["$","meta","12",{"property":"og:site_name","content":"AI Coder"}],["$","meta","13",{"property":"og:locale","content":"ko_KR"}],["$","meta","14",{"property":"og:image","content":"https://aicoder.kr/social-card.png"}],["$","meta","15",{"property":"og:image:width","content":"1200"}],["$","meta","16",{"property":"og:image:height","content":"630"}],["$","meta","17",{"property":"og:image:alt","content":"AI Coder · AI 코딩 교육과 실전 프로젝트"}],["$","meta","18",{"property":"og:type","content":"website"}],["$","meta","19",{"name":"twitter:card","content":"summary_large_image"}],["$","meta","20",{"name":"twitter:title","content":"벤토 기능 소개 · AI Coder"}],["$","meta","21",{"name":"twitter:description","content":"타일마다 작은 애니메이션이 살아 움직이는 벤토 그리드 기능 섹션"}],["$","meta","22",{"name":"twitter:image","content":"https://aicoder.kr/social-card.png"}],["$","link","23",{"rel":"icon","href":"/favicon.ico?766d9da6178db116","type":"image/x-icon","sizes":"16x16"}],["$","link","24",{"rel":"icon","href":"/icon.png?96c6ddf66156e856","type":"image/png","sizes":"64x64"}],["$","link","25",{"rel":"apple-touch-icon","href":"/apple-icon.png?87c64c22e9bd6762","type":"image/png","sizes":"180x180"}],["$","$L1f","26",{}]]

예제에 포함된 파일