feat(seo): add dynamic OG image, theme color, fix broken /og.png ref

- add app/opengraph-image.tsx — 1200x630 PNG generated at build time
  via ImageResponse (brand gradient + tagline)
- add app/twitter-image.tsx — re-uses opengraph-image
- remove dead manual openGraph.images and twitter.images refs that
  pointed to non-existent /og.png
- add viewport.themeColor #0f4c3a (primary brand green)

Author: gracefullight

app/layout.tsx

@@ -1,4 +1,4 @@
-import type { Metadata } from "next";
+import type { Metadata, Viewport } from "next";
 import { Analytics } from "@vercel/analytics/next";
 import { ClarityAnalytics } from "@/components/site/clarity";
 import { SITE } from "@/lib/site";
@@ -24,21 +24,12 @@ export const metadata: Metadata = {
     title: "FIRST FLUKE — Make Your First Win",
     description:
       "AI와 기술로 더 나은 일상을 만드는 팀, FIRST FLUKE.",
-    images: [
-      {
-        url: "/og.png",
-        width: 1200,
-        height: 630,
-        alt: "FIRST FLUKE — Make Your First Win",
-      },
-    ],
   },
   twitter: {
     card: "summary_large_image",
     title: "FIRST FLUKE — Make Your First Win",
     description:
       "AI와 기술로 더 나은 일상을 만드는 팀.",
-    images: ["/og.png"],
   },
   icons: {
     icon: "/favicon.png",
@@ -53,6 +44,10 @@ export const metadata: Metadata = {
   },
 };
 
+export const viewport: Viewport = {
+  themeColor: "#0f4c3a",
+};
+
 const ORGANIZATION_JSONLD = {
   "@context": "https://schema.org",
   "@type": "Organization",

app/opengraph-image.tsx

@@ -0,0 +1,72 @@
+import { ImageResponse } from "next/og";
+
+export const dynamic = "force-static";
+export const size = { width: 1200, height: 630 };
+export const contentType = "image/png";
+export const alt = "FIRST FLUKE — Make Your First Win";
+
+export default async function OpengraphImage() {
+  return new ImageResponse(
+    (
+      <div
+        style={{
+          width: "100%",
+          height: "100%",
+          display: "flex",
+          flexDirection: "column",
+          justifyContent: "space-between",
+          padding: "80px",
+          background:
+            "linear-gradient(135deg, #0f4c3a 0%, #1a6048 50%, #7ab94c 100%)",
+          color: "#fafaf7",
+          fontFamily: "system-ui, sans-serif",
+        }}
+      >
+        <div
+          style={{
+            display: "flex",
+            fontSize: 28,
+            letterSpacing: 4,
+            opacity: 0.85,
+          }}
+        >
+          FIRST FLUKE
+        </div>
+        <div style={{ display: "flex", flexDirection: "column", gap: 24 }}>
+          <div
+            style={{
+              fontSize: 96,
+              fontWeight: 700,
+              lineHeight: 1.05,
+              letterSpacing: -2,
+            }}
+          >
+            Make Your First Win
+          </div>
+          <div
+            style={{
+              fontSize: 36,
+              opacity: 0.9,
+              lineHeight: 1.3,
+            }}
+          >
+            AI와 기술로 더 나은 일상을 만드는 팀
+          </div>
+        </div>
+        <div
+          style={{
+            display: "flex",
+            justifyContent: "space-between",
+            alignItems: "flex-end",
+            fontSize: 24,
+            opacity: 0.85,
+          }}
+        >
+          <div style={{ display: "flex" }}>모두의 창업 2026 선정</div>
+          <div style={{ display: "flex" }}>firstfluke.com</div>
+        </div>
+      </div>
+    ),
+    { ...size },
+  );
+}

app/twitter-image.tsx

@@ -0,0 +1,3 @@
+export { default, size, contentType, alt } from "./opengraph-image";
+
+export const dynamic = "force-static";