@saeroon/cli 0.2.1 → 0.2.3

package/dist/index.js

@@ -249,6 +249,49 @@ var SaeroonApiClient = class _SaeroonApiClient {
       false
     );
   }
+  // --- Public Patterns ---
+  /**
+   * 공개 패턴 목록 조회. 인증 필요.
+   * GET /api/v1/hosting/public/patterns
+   */
+  async getPublicPatterns(options) {
+    const params = new URLSearchParams();
+    if (options?.category) params.set("category", options.category);
+    if (options?.search) params.set("search", options.search);
+    params.set("sort", options?.sort ?? "popular");
+    params.set("page", String(options?.page ?? 1));
+    params.set("pageSize", String(options?.pageSize ?? 50));
+    return this.request(
+      "GET",
+      `/api/v1/hosting/public/patterns?${params.toString()}`,
+      void 0,
+      true
+    );
+  }
+  /**
+   * 공개 패턴 상세 조회. 인증 필요.
+   * GET /api/v1/hosting/public/patterns/{patternId}
+   */
+  async getPublicPatternDetail(patternId) {
+    return this.request(
+      "GET",
+      `/api/v1/hosting/public/patterns/${encodeURIComponent(patternId)}`,
+      void 0,
+      true
+    );
+  }
+  /**
+   * 공개 패턴을 내 사이트로 Fork. 인증 필요.
+   * POST /api/v1/hosting/public/patterns/{patternId}/fork
+   */
+  async forkPublicPattern(patternId, targetSiteId) {
+    return this.request(
+      "POST",
+      `/api/v1/hosting/public/patterns/${encodeURIComponent(patternId)}/fork`,
+      { targetSiteId },
+      true
+    );
+  }
   // --- Template Submission ---
   /**
    * 템플릿을 마켓플레이스에 제출.
@@ -345,7 +388,7 @@ var SaeroonApiClient = class _SaeroonApiClient {
     await this.request(
       "PUT",
       `/api/v1/hosting/developer/sites/${encodeURIComponent(siteId)}/schema`,
-      { schema },
+      { schemaJson: JSON.stringify(schema), isDraft: true },
       true
     );
   }
@@ -1166,7 +1209,7 @@ https://hosting.saeroon.com/llms-full.txt
 
 // src/templates/starters/restaurant.ts
 var RESTAURANT_STARTER = {
-  version: "1.16.0",
+  version: "1.21.0",
   settings: {
     title: "\uB9DB\uC788\uB294 \uD55C\uC2DD\uB2F9",
     description: "\uC815\uC131\uC744 \uB2F4\uC740 \uD55C\uC2DD \uC694\uB9AC \uC804\uBB38\uC810. \uC2E0\uC120\uD55C \uC7AC\uB8CC\uB85C \uB9CC\uB4E0 \uAC74\uAC15\uD55C \uD55C \uB07C\uB97C \uC81C\uACF5\uD569\uB2C8\uB2E4."
@@ -1244,7 +1287,7 @@ var RESTAURANT_STARTER = {
 
 // src/templates/starters/portfolio.ts
 var PORTFOLIO_STARTER = {
-  version: "1.16.0",
+  version: "1.21.0",
   settings: {
     title: "Jane Doe \u2014 Designer & Developer",
     description: "Creative portfolio showcasing design and development work."
@@ -1317,7 +1360,7 @@ var PORTFOLIO_STARTER = {
 
 // src/templates/starters/business.ts
 var BUSINESS_STARTER = {
-  version: "1.16.0",
+  version: "1.21.0",
   settings: {
     title: "Apex Consulting",
     description: "Strategic consulting for growing businesses. We help you scale smarter."
@@ -1421,7 +1464,7 @@ var BUSINESS_STARTER = {
 
 // src/templates/starters/saas.ts
 var SAAS_STARTER = {
-  version: "1.16.0",
+  version: "1.21.0",
   settings: {
     title: "Flowboard \u2014 Project Management Made Simple",
     description: "The all-in-one project management tool for modern teams. Plan, track, and ship faster."
@@ -2052,7 +2095,7 @@ var PreviewClient = class {
    * POST /api/v1/developer/preview 호출하여 Preview 세션 생성.
    */
   async createSession(schema) {
-    const url = `${this.options.apiBaseUrl}/api/v1/developer/preview`;
+    const url = `${this.options.apiBaseUrl}/api/v1/hosting/developer/preview`;
     const response = await fetch(url, {
       method: "POST",
       headers: {
@@ -2060,7 +2103,7 @@ var PreviewClient = class {
         Authorization: `Bearer ${this.options.apiKey}`
       },
       body: JSON.stringify({
-        schema,
+        schemaJson: JSON.stringify(schema),
         device: this.options.device
       }),
       signal: AbortSignal.timeout(3e4)
@@ -2079,7 +2122,7 @@ var PreviewClient = class {
    * WebSocket 연결 수립 및 이벤트 핸들러 등록.
    */
   connectWebSocket() {
-    return new Promise((resolve13, reject) => {
+    return new Promise((resolve15, reject) => {
       if (!this.session) {
         reject(new Error("\uC138\uC158\uC774 \uC5C6\uC2B5\uB2C8\uB2E4."));
         return;
@@ -2093,7 +2136,7 @@ var PreviewClient = class {
         this.retryCount = 0;
         this.options.onStatusChange?.(true);
         this.startPingInterval();
-        resolve13();
+        resolve15();
       });
       ws.on("message", (data) => {
         this.handleMessage(data);
@@ -2426,87 +2469,17 @@ import chalk8 from "chalk";
 
 // src/lib/local-validator.ts
 var VALID_BLOCK_TYPES = /* @__PURE__ */ new Set([
-  // Element (9)
+  // Primitives (10)
+  "container",
   "text-block",
   "heading-block",
   "button-block",
   "image-block",
-  "video-block",
+  "embed-block",
+  "icon-block",
+  "input-block",
   "divider",
   "spacer",
-  "icon-block",
-  "container",
-  // Feature (70)
-  "image-slider",
-  "map-block",
-  "contact-form",
-  "demolition-calculator",
-  "floating-social-widget",
-  "modal-block",
-  "sticky-cta-bar",
-  "product-grid",
-  "cart-widget",
-  "product-gallery",
-  "product-price",
-  "stock-badge",
-  "variant-selector",
-  "product-filter",
-  "product-search",
-  "related-products",
-  "add-to-cart",
-  "cart-contents",
-  "cart-summary",
-  "coupon-input",
-  "checkout-form",
-  "order-confirmation",
-  "order-history",
-  "order-lookup",
-  "review-list",
-  "cart-drawer",
-  "wishlist",
-  "recently-viewed",
-  "booking-calendar",
-  "medical-booking-block",
-  "booking-button",
-  "service-detail-block",
-  "booking-service-list",
-  "booking-service-detail",
-  "booking-checkout",
-  "booking-confirmation",
-  "booking-my-bookings",
-  "booking-staff-list",
-  "booking-guest-cancel",
-  "booking-class-schedule",
-  "booking-course-detail",
-  "booking-course-progress",
-  "booking-resource-calendar",
-  "booking-resource-list",
-  "auth-block",
-  "member-profile-block",
-  "member-only-section",
-  "board-block",
-  "board-detail-block",
-  "faq-accordion",
-  "gallery-block",
-  "before-after-slider",
-  "testimonials-section",
-  "tabs-section",
-  "countdown-timer",
-  "newsletter",
-  "marquee-block",
-  "before-after-gallery",
-  "content-showcase",
-  "staff-showcase",
-  "site-menu",
-  "stats-counter",
-  "scroll-to-top",
-  "anchor-nav",
-  "trademark-search-block",
-  "trademark-detail-block",
-  "nice-class-browser-block",
-  "lottie-block",
-  "model-block",
-  "image-sequence-block",
   // Structure (6)
   "header-block",
   "footer-block",
@@ -2514,20 +2487,12 @@ var VALID_BLOCK_TYPES = /* @__PURE__ */ new Set([
   "main-block",
   "aside-block",
   "article-block",
-  // Pattern (13, legacy but valid)
-  "hero",
-  "cta-banner",
-  "feature-grid",
-  "pricing-table",
-  "team-profile-section",
-  "logo-cloud",
-  "social-proof",
-  "timeline",
-  "announcement-list",
-  "service-card-grid",
-  "business-hours",
-  "split-landing-hero",
-  "event-banner"
+  // Specialized (5)
+  "site-menu",
+  "floating-action-widget",
+  "sticky-cta-bar",
+  "cookie-consent-bar",
+  "announcement-bar"
 ]);
 function validateSchemaLocal(schema) {
   const errors = [];
@@ -2536,37 +2501,34 @@ function validateSchemaLocal(schema) {
     return errors;
   }
   const s = schema;
-  if (!s.schemaVersion && !s.version) {
-    errors.push({ severity: "error", message: '\uD544\uC218 \uD544\uB4DC \uB204\uB77D: "schemaVersion"', path: "schemaVersion", step: 1 });
+  if (!s.version) {
+    errors.push({ severity: "error", message: '\uD544\uC218 \uD544\uB4DC \uB204\uB77D: "version"', path: "version", step: 1 });
   }
-  if (!s.global && !s.settings) {
-    errors.push({ severity: "error", message: '\uD544\uC218 \uD544\uB4DC \uB204\uB77D: "global"', path: "global", step: 1 });
+  if (!s.name) {
+    errors.push({ severity: "warning", message: '\uD544\uB4DC \uB204\uB77D: "name" (\uC0AC\uC774\uD2B8\uBA85)', path: "name", step: 1 });
   }
   if (!s.pages) {
     errors.push({ severity: "error", message: '\uD544\uC218 \uD544\uB4DC \uB204\uB77D: "pages"', path: "pages", step: 1 });
   }
-  const version2 = s.schemaVersion ?? s.version;
+  const version2 = s.version;
   if (version2 && typeof version2 === "string") {
     const parts = version2.split(".").map(Number);
     if (parts[0] !== 1 || parts[1] !== void 0 && parts[1] < 15) {
       errors.push({
         severity: "warning",
-        message: `\uC2A4\uD0A4\uB9C8 \uBC84\uC804 "${version2}"\uC774 \uC624\uB798\uB418\uC5C8\uC2B5\uB2C8\uB2E4. \uCD5C\uC2E0: 1.20.0`,
+        message: `\uC2A4\uD0A4\uB9C8 \uBC84\uC804 "${version2}"\uC774 \uC624\uB798\uB418\uC5C8\uC2B5\uB2C8\uB2E4. \uCD5C\uC2E0: 1.21.0`,
         path: "schemaVersion",
         step: 1
       });
     }
   }
-  const global = s.global ?? s.settings;
-  if (global && typeof global === "object") {
-    if (!global.name && !global.title) {
-      errors.push({
-        severity: "error",
-        message: "global.name (\uB610\uB294 settings.title) \uC740 \uD544\uC218\uC785\uB2C8\uB2E4.",
-        path: "global.name",
-        step: 2
-      });
-    }
+  if (s.pages && !Array.isArray(s.pages)) {
+    errors.push({
+      severity: "error",
+      message: "pages\uB294 \uBC30\uC5F4\uC774\uC5B4\uC57C \uD569\uB2C8\uB2E4. (object map \uD615\uC2DD\uC740 \uC9C0\uC6D0\uD558\uC9C0 \uC54A\uC2B5\uB2C8\uB2E4)",
+      path: "pages",
+      step: 1
+    });
   }
   if (!s.pages) return errors;
   const pages = s.pages;
@@ -2880,11 +2842,11 @@ async function computeFileHashes(localRefs) {
   return results;
 }
 async function computeSha256(filePath) {
-  return new Promise((resolve13, reject) => {
+  return new Promise((resolve15, reject) => {
     const hash = createHash("sha256");
     const stream = createReadStream(filePath);
     stream.on("data", (chunk) => hash.update(chunk));
-    stream.on("end", () => resolve13(hash.digest("hex")));
+    stream.on("end", () => resolve15(hash.digest("hex")));
     stream.on("error", (err) => reject(err));
   });
 }
@@ -2933,14 +2895,14 @@ function createConcurrencyLimiter(concurrency) {
   function next() {
     if (queue.length > 0 && active < concurrency) {
       active++;
-      const resolve13 = queue.shift();
-      resolve13?.();
+      const resolve15 = queue.shift();
+      resolve15?.();
     }
   }
   return async function limit(fn) {
     if (active >= concurrency) {
-      await new Promise((resolve13) => {
-        queue.push(resolve13);
+      await new Promise((resolve15) => {
+        queue.push(resolve15);
       });
     } else {
       active++;
@@ -3174,7 +3136,7 @@ async function deployToStaging(client, siteId, schema, _syncTemplate, templateId
     await client.updateSiteSchema(siteId, schema);
     deploySpinner.stop(chalk9.green("Staging \uBC30\uD3EC \uC644\uB8CC!"));
     console.log("");
-    console.log(chalk9.cyan(`Staging URL: https://${siteId}.staging.hosting.saeroon.com`));
+    console.log(chalk9.cyan(`Staging URL: https://hosting.saeroon.com/staging-sites/${siteId}`));
     console.log(chalk9.dim("  \u2192 Draft \uC2A4\uD0A4\uB9C8\uAC00 \uC5C5\uB370\uC774\uD2B8\uB418\uC5C8\uC2B5\uB2C8\uB2E4. \uC2A4\uD14C\uC774\uC9D5\uC5D0\uC11C \uD655\uC778\uD558\uC138\uC694."));
     console.log("");
     console.log(chalk9.dim("\uD504\uB85C\uB355\uC158 \uBC30\uD3EC: npx @saeroon/cli deploy --target production"));
@@ -3862,77 +3824,881 @@ async function commandGenerate(options) {
   }
 }
 
-// src/commands/compare.ts
+// src/commands/analyze.ts
 import chalk15 from "chalk";
-import { resolve as resolve12 } from "path";
-import { execSync, spawnSync } from "child_process";
+import { resolve as resolve13, join as join2 } from "path";
+import { mkdir as mkdir4 } from "fs/promises";
+
+// src/scripts/analyze-reference.ts
+import { spawnSync } from "child_process";
+import { writeFile as writeFile7, mkdir as mkdir3 } from "fs/promises";
+import { join } from "path";
+var VIEWPORTS = [
+  { name: "mobile", width: 375, height: 812 },
+  { name: "tablet", width: 768, height: 1024 },
+  { name: "laptop", width: 1280, height: 800 },
+  { name: "desktop", width: 1536, height: 900 }
+];
+var EXTRACTION_SCRIPT = `
+(() => {
+  // \u2500\u2500 Helpers \u2500\u2500
+  function getComputedProp(el, prop) {
+    return window.getComputedStyle(el).getPropertyValue(prop).trim();
+  }
+
+  function parsePixel(val) {
+    return Math.round(parseFloat(val) || 0);
+  }
+
+  function rgbToHex(rgb) {
+    if (!rgb || rgb === 'transparent') return 'transparent';
+    if (rgb.startsWith('#')) return rgb;
+    const match = rgb.match(/\\d+/g);
+    if (!match || match.length < 3) return rgb;
+    const [r, g, b] = match.map(Number);
+    return '#' + [r, g, b].map(c => c.toString(16).padStart(2, '0')).join('');
+  }
+
+  function detectLayout(el) {
+    const display = getComputedProp(el, 'display');
+    const flexDir = getComputedProp(el, 'flex-direction');
+    const position = getComputedProp(el, 'position');
+    if (display.includes('grid')) return 'grid';
+    if (position === 'absolute' || position === 'fixed') return 'absolute';
+    if (display.includes('flex')) {
+      return flexDir === 'row' ? 'flex-row' : 'flex-column';
+    }
+    return 'block';
+  }
+
+  function inferSectionRole(el) {
+    const tag = el.tagName.toLowerCase();
+    const cls = (el.className || '').toString().toLowerCase();
+    const id = (el.id || '').toLowerCase();
+    const text = (el.textContent || '').slice(0, 200).toLowerCase();
+    const combined = tag + ' ' + cls + ' ' + id + ' ' + text;
+
+    if (tag === 'header' || tag === 'nav') return 'header';
+    if (tag === 'footer') return 'footer';
+    if (/hero|banner|jumbotron|splash|main-?visual/.test(combined)) return 'hero';
+    if (/feature|service|benefit|what-?we/.test(combined)) return 'features';
+    if (/testimonial|review|feedback|client|customer/.test(combined)) return 'testimonials';
+    if (/faq|accordion|question|q-?and-?a/.test(combined)) return 'faq';
+    if (/team|staff|member|about-?us|who-?we/.test(combined)) return 'team';
+    if (/pricing|plan|package/.test(combined)) return 'pricing';
+    if (/contact|inquiry|form|cta|call-?to-?action|get-?started/.test(combined)) return 'cta';
+    if (/gallery|portfolio|work|project|showcase/.test(combined)) return 'gallery';
+    if (/blog|news|article|post/.test(combined)) return 'blog';
+    if (/partner|client|logo|brand|trust/.test(combined)) return 'partners';
+    if (/map|location|address|direction/.test(combined)) return 'map';
+    if (/stat|counter|number|achievement/.test(combined)) return 'stats';
+    return 'section';
+  }
+
+  function guessAspectRatio(w, h) {
+    if (!w || !h) return 'unknown';
+    const r = w / h;
+    if (Math.abs(r - 16/9) < 0.15) return '16:9';
+    if (Math.abs(r - 4/3) < 0.15) return '4:3';
+    if (Math.abs(r - 3/2) < 0.15) return '3:2';
+    if (Math.abs(r - 1) < 0.15) return '1:1';
+    if (Math.abs(r - 9/16) < 0.15) return '9:16';
+    if (Math.abs(r - 21/9) < 0.15) return '21:9';
+    return w + ':' + h;
+  }
+
+  function inferImageRole(img, parentRole) {
+    const src = (img.src || '').toLowerCase();
+    const alt = (img.alt || '').toLowerCase();
+    const cls = (img.className || '').toString().toLowerCase();
+    const parent = img.closest('section, header, footer, [class*=hero], [class*=banner]');
+    const pRole = parentRole || inferSectionRole(parent || img.parentElement);
+
+    if (/logo/.test(cls + ' ' + alt + ' ' + src)) return 'logo';
+    if (/icon|svg/.test(cls)) return 'icon';
+    if (pRole === 'hero') return 'hero-bg';
+    if (pRole === 'team') return 'team-photo';
+    if (pRole === 'gallery') return 'gallery-item';
+    if (pRole === 'partners') return 'partner-logo';
+    if (pRole === 'testimonials') return 'avatar';
+
+    const rect = img.getBoundingClientRect();
+    if (rect.width > window.innerWidth * 0.8 && rect.height > 300) return 'hero-bg';
+    if (rect.width < 80 && rect.height < 80) return 'icon';
+    return 'card-thumbnail';
+  }
+
+  // \u2500\u2500 1. Structure \u2500\u2500
+  const sectionSelectors = 'body > header, body > footer, body > nav, body > main, body > section, body > div, body > article, body > aside';
+  const topLevelEls = document.querySelectorAll(sectionSelectors);
+  const sections = [];
+  let maxDepth = 0;
+
+  topLevelEls.forEach(el => {
+    // \uC228\uACA8\uC9C4 \uC694\uC18C \uB610\uB294 \uB108\uBE44 0\uC778 \uC694\uC18C \uC81C\uC678
+    const rect = el.getBoundingClientRect();
+    if (rect.height < 10) return;
+
+    const tag = el.tagName.toLowerCase();
+    const layout = detectLayout(el);
+    const bgImg = getComputedProp(el, 'background-image');
+
+    sections.push({
+      tag,
+      role: inferSectionRole(el),
+      childCount: el.children.length,
+      layout,
+      gridColumns: layout === 'grid' ? getComputedProp(el, 'grid-template-columns') : undefined,
+      hasBackgroundImage: bgImg !== 'none' && bgImg !== '',
+    });
+
+    // nesting depth
+    let depth = 0;
+    let cursor = el;
+    while (cursor.firstElementChild) {
+      depth++;
+      cursor = cursor.firstElementChild;
+    }
+    if (depth > maxDepth) maxDepth = depth;
+  });
+
+  // heading hierarchy
+  const headings = Array.from(document.querySelectorAll('h1, h2, h3, h4, h5, h6'));
+  const headingHierarchy = headings.map(h => h.tagName.toLowerCase() + ': ' + (h.textContent || '').trim().slice(0, 80));
+
+  // \u2500\u2500 2. Design Tokens \u2500\u2500
+
+  // 2a. Colors \u2014 \uBAA8\uB4E0 \uC694\uC18C\uC758 color, backgroundColor \uC218\uC9D1
+  const colorMap = {};
+  const bgColorMap = {};
+  const allEls = document.querySelectorAll('*');
+  const sampleEls = allEls.length > 500
+    ? Array.from(allEls).filter((_, i) => i % Math.ceil(allEls.length / 500) === 0)
+    : Array.from(allEls);
+
+  sampleEls.forEach(el => {
+    const color = rgbToHex(getComputedProp(el, 'color'));
+    const bg = rgbToHex(getComputedProp(el, 'background-color'));
+    if (color && color !== 'transparent') colorMap[color] = (colorMap[color] || 0) + 1;
+    if (bg && bg !== 'transparent' && bg !== '#000000') bgColorMap[bg] = (bgColorMap[bg] || 0) + 1;
+  });
+
+  const sortedColors = Object.entries(colorMap).sort((a, b) => b[1] - a[1]);
+  const sortedBgs = Object.entries(bgColorMap).sort((a, b) => b[1] - a[1]);
+
+  // primary = body\uB098 heading\uC758 \uAC00\uC7A5 \uBE48\uBC88\uD55C \uD14D\uC2A4\uD2B8 \uC0C9\uC0C1\uC774 \uC544\uB2CC \uC0C9 \uC911 1\uC704
+  const bodyColor = rgbToHex(getComputedProp(document.body, 'color'));
+  const bodyBg = rgbToHex(getComputedProp(document.body, 'background-color'));
+  const nonBodyColors = sortedColors.filter(([c]) => c !== bodyColor && c !== '#ffffff' && c !== '#000000');
+  const allPalette = [...new Set([...sortedColors.map(c => c[0]), ...sortedBgs.map(c => c[0])])].slice(0, 20);
+
+  // 2b. Typography
+  const typographyScale = {};
+  ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'p', 'a', 'button', 'span', 'li'].forEach(tag => {
+    const el = document.querySelector(tag);
+    if (el) {
+      typographyScale[tag] = {
+        size: getComputedProp(el, 'font-size'),
+        weight: getComputedProp(el, 'font-weight'),
+        lineHeight: getComputedProp(el, 'line-height'),
+      };
+    }
+  });
+
+  const fontFamilySet = new Set();
+  sampleEls.forEach(el => {
+    const ff = getComputedProp(el, 'font-family');
+    if (ff) fontFamilySet.add(ff.split(',')[0].trim().replace(/['"]/g, ''));
+  });
+
+  // 2c. Spacing
+  const sectionGaps = [];
+  for (let i = 1; i < sections.length; i++) {
+    const prev = topLevelEls[i - 1];
+    const curr = topLevelEls[i];
+    if (prev && curr) {
+      const prevRect = prev.getBoundingClientRect();
+      const currRect = curr.getBoundingClientRect();
+      const gap = currRect.top - prevRect.bottom;
+      if (gap > 0 && gap < 500) sectionGaps.push(gap);
+    }
+  }
+
+  const firstContent = document.querySelector('main, [class*=container], [class*=wrapper], body > div > div');
+  const contentPadding = firstContent ? parsePixel(getComputedProp(firstContent, 'padding-left')) : 16;
+
+  // card gap \uCD94\uC815: \uCCAB \uBC88\uC9F8 grid/flex \uCEE8\uD14C\uC774\uB108\uC758 gap
+  let cardGap = 0;
+  const gridContainers = document.querySelectorAll('[style*="grid"], [class*="grid"], [style*="flex"]');
+  for (const gc of gridContainers) {
+    const gap = parsePixel(getComputedProp(gc, 'gap') || getComputedProp(gc, 'column-gap'));
+    if (gap > 0) { cardGap = gap; break; }
+  }
+
+  // base unit \uCD94\uC815 (\uAC00\uC7A5 \uD754\uD55C \uAC04\uACA9\uAC12\uC758 \uCD5C\uB300\uACF5\uC57D\uC218)
+  const allGaps = [...sectionGaps, contentPadding, cardGap].filter(v => v > 0);
+  function gcd(a, b) { return b === 0 ? a : gcd(b, a % b); }
+  const baseUnit = allGaps.length > 1 ? allGaps.reduce((a, b) => gcd(a, b)) : (allGaps[0] || 8);
+
+  // 2d. BorderRadius
+  const radiusValues = [];
+  sampleEls.forEach(el => {
+    const br = parsePixel(getComputedProp(el, 'border-radius'));
+    if (br > 0) radiusValues.push(br);
+  });
+  const uniqueRadii = [...new Set(radiusValues)].sort((a, b) => a - b);
+
+  // \u2500\u2500 3. Interactions \u2500\u2500
+  const styleSheets = Array.from(document.styleSheets);
+  const animationNames = new Set();
+  const transitionProps = new Set();
+
+  try {
+    styleSheets.forEach(ss => {
+      try {
+        const rules = Array.from(ss.cssRules || []);
+        rules.forEach(rule => {
+          if (rule instanceof CSSKeyframesRule) {
+            animationNames.add(rule.name);
+          }
+          if (rule instanceof CSSStyleRule) {
+            const style = rule.style;
+            if (style.animationName && style.animationName !== 'none') {
+              animationNames.add(style.animationName);
+            }
+            if (style.transition && style.transition !== 'none' && style.transition !== 'all 0s ease 0s') {
+              transitionProps.add(style.transition);
+            }
+          }
+        });
+      } catch { /* cross-origin sheets */ }
+    });
+  } catch { /* stylesheet access error */ }
+
+  const hasCarousel = !!(
+    document.querySelector('[class*=carousel], [class*=slider], [class*=swiper], [class*=slick]') ||
+    document.querySelector('[data-slick], [data-swiper]')
+  );
+  const hasAccordion = !!(
+    document.querySelector('details, [class*=accordion], [class*=collapse], [data-toggle=collapse]')
+  );
+  const hasModal = !!(
+    document.querySelector('dialog, [class*=modal], [class*=lightbox], [role=dialog]')
+  );
+  const hasStickyHeader = (() => {
+    const header = document.querySelector('header, [class*=header], nav');
+    if (!header) return false;
+    const pos = getComputedProp(header, 'position');
+    return pos === 'sticky' || pos === 'fixed';
+  })();
+  const hasScrollAnimations = !!(
+    document.querySelector('[class*=aos], [data-aos], [class*=wow], [class*=scroll-animate], [class*=animate-on-scroll]') ||
+    animationNames.size > 2
+  );
+  const hasParallax = !!(
+    document.querySelector('[class*=parallax], [data-parallax], [class*=jarallax]') ||
+    (() => {
+      let found = false;
+      sampleEls.forEach(el => {
+        const ba = getComputedProp(el, 'background-attachment');
+        if (ba === 'fixed') found = true;
+      });
+      return found;
+    })()
+  );
+  const hasHoverEffects = transitionProps.size > 0;
+
+  // \u2500\u2500 4. Images \u2500\u2500
+  const imgEls = document.querySelectorAll('img, picture source, [style*="background-image"]');
+  const images = [];
+
+  imgEls.forEach(el => {
+    let src = '';
+    let alt = '';
+    let width = 0;
+    let height = 0;
+
+    if (el.tagName === 'IMG') {
+      src = el.src || el.dataset.src || '';
+      alt = el.alt || '';
+      width = el.naturalWidth || el.width;
+      height = el.naturalHeight || el.height;
+    } else if (el.tagName === 'SOURCE') {
+      src = el.srcset ? el.srcset.split(',')[0].trim().split(' ')[0] : '';
+    } else {
+      const bg = getComputedProp(el, 'background-image');
+      const match = bg.match(/url\\(["']?(.+?)["']?\\)/);
+      if (match) src = match[1];
+    }
+
+    if (!src || src.startsWith('data:image/svg') || src.includes('.svg')) return;
+
+    const rect = el.getBoundingClientRect();
+    if (!width) width = Math.round(rect.width);
+    if (!height) height = Math.round(rect.height);
+    if (width < 20 || height < 20) return;
+
+    const parentSection = el.closest('section, header, footer, main, [class*=hero], [class*=banner]');
+    const parentRole = parentSection ? inferSectionRole(parentSection) : 'unknown';
+
+    images.push({
+      src: src.slice(0, 500),
+      alt: (alt || '').slice(0, 200),
+      width,
+      height,
+      aspectRatio: guessAspectRatio(width, height),
+      role: inferImageRole(el, parentRole),
+      dominantColor: '',  // \uC11C\uBC84 \uC0AC\uC774\uB4DC\uC5D0\uC11C \uCD94\uCD9C \uB610\uB294 Vision \uBD84\uC11D
+      position: parentRole,
+    });
+  });
+
+  // \u2500\u2500 5. Gaps (V2 \uBE14\uB85D\uC73C\uB85C \uB9E4\uD551 \uBD88\uAC00\uB2A5\uD55C \uAE30\uB2A5) \u2500\u2500
+  const gaps = [];
+
+  // video background
+  if (document.querySelector('video[autoplay], video[muted]')) {
+    gaps.push('video-background-autoplay: \uC790\uB3D9 \uC7AC\uC0DD \uBE44\uB514\uC624 \uBC30\uACBD');
+  }
+  // canvas / WebGL
+  if (document.querySelector('canvas')) {
+    gaps.push('canvas-webgl: Canvas \uB610\uB294 WebGL \uAE30\uBC18 \uC778\uD130\uB799\uC158');
+  }
+  // custom cursor
+  const bodyCursor = getComputedProp(document.body, 'cursor');
+  if (bodyCursor !== 'auto' && bodyCursor !== 'default') {
+    gaps.push('custom-cursor: \uCEE4\uC2A4\uD140 \uB9C8\uC6B0\uC2A4 \uCEE4\uC11C');
+  }
+  // 3D transforms
+  let has3d = false;
+  sampleEls.slice(0, 100).forEach(el => {
+    const tf = getComputedProp(el, 'transform');
+    if (tf.includes('matrix3d') || tf.includes('perspective')) has3d = true;
+  });
+  if (has3d) {
+    gaps.push('3d-transforms: CSS 3D \uBCC0\uD658 \uC0AC\uC6A9');
+  }
+  // SVG animation
+  if (document.querySelector('svg animate, svg animateTransform, svg animateMotion')) {
+    gaps.push('svg-animation: SVG \uC778\uB77C\uC778 \uC560\uB2C8\uBA54\uC774\uC158');
+  }
+  // marquee / ticker
+  if (document.querySelector('marquee, [class*=marquee], [class*=ticker]')) {
+    gaps.push('marquee-ticker: \uC218\uD3C9 \uC2A4\uD06C\uB864 \uD14D\uC2A4\uD2B8/\uC774\uBBF8\uC9C0');
+  }
+  // infinite scroll
+  if (document.querySelector('[class*=infinite], [data-infinite]')) {
+    gaps.push('infinite-scroll: \uBB34\uD55C \uC2A4\uD06C\uB864 \uB85C\uB529');
+  }
+  // chat widget (\uC678\uBD80 \uC5F0\uB3D9\uC740 embed\uC73C\uB85C \uAC00\uB2A5\uD558\uC9C0\uB9CC \uAE30\uB85D)
+  if (document.querySelector('[class*=chat-widget], [id*=chat], #ch-plugin, .channel-talk')) {
+    gaps.push('chat-widget: \uC678\uBD80 \uCC44\uD305 \uC704\uC82F (embed-block integration \uD544\uC694)');
+  }
+
+  // \u2500\u2500 Return \u2500\u2500
+  return {
+    structure: {
+      sections,
+      headingHierarchy,
+      totalSections: sections.length,
+      nestingDepth: maxDepth,
+    },
+    designTokens: {
+      colors: {
+        primary: (nonBodyColors[0] || sortedColors[0] || ['#000000'])[0],
+        secondary: (nonBodyColors[1] || sortedColors[1] || ['#666666'])[0],
+        background: bodyBg || '#ffffff',
+        text: bodyColor || '#000000',
+        accent: (nonBodyColors[2] || sortedColors[2] || ['#0066ff'])[0],
+        palette: allPalette,
+      },
+      typography: {
+        fontFamilies: [...fontFamilySet].slice(0, 5),
+        scale: typographyScale,
+      },
+      spacing: {
+        sectionGap: sectionGaps.length > 0 ? Math.round(sectionGaps.reduce((a, b) => a + b, 0) / sectionGaps.length) : 80,
+        contentPadding,
+        cardGap: cardGap || 16,
+        baseUnit: Math.max(baseUnit, 4),
+      },
+      borderRadius: {
+        small: uniqueRadii[0] || 0,
+        medium: uniqueRadii[Math.floor(uniqueRadii.length / 2)] || 0,
+        large: uniqueRadii[uniqueRadii.length - 1] || 0,
+      },
+    },
+    interactions: {
+      hasScrollAnimations,
+      hasHoverEffects,
+      hasCarousel,
+      hasAccordion,
+      hasModal,
+      hasStickyHeader,
+      hasParallax,
+      detectedAnimations: [...animationNames].slice(0, 20),
+      detectedTransitions: [...transitionProps].slice(0, 20),
+    },
+    images,
+    gaps,
+  };
+})()
+`;
+async function analyzeReference(options) {
+  const { url, outputDir, timeout = 3e4 } = options;
+  const screenshotDir = join(outputDir, "screenshots");
+  await mkdir3(screenshotDir, { recursive: true });
+  const screenshots = {};
+  for (const vp of VIEWPORTS) {
+    const filePath = join(screenshotDir, `${vp.name}-${vp.width}px.png`);
+    captureScreenshot(url, filePath, vp.width, vp.height, timeout);
+    screenshots[vp.name] = filePath;
+  }
+  const extractedData = await extractPageData(url, timeout);
+  const analysis = {
+    url,
+    analyzedAt: (/* @__PURE__ */ new Date()).toISOString(),
+    screenshots: {
+      mobile: screenshots.mobile,
+      tablet: screenshots.tablet,
+      laptop: screenshots.laptop,
+      desktop: screenshots.desktop
+    },
+    ...extractedData
+  };
+  const analysisPath = join(outputDir, "analysis.json");
+  await writeFile7(analysisPath, JSON.stringify(analysis, null, 2), "utf-8");
+  return analysis;
+}
+function captureScreenshot(url, outputPath, width, height, timeout) {
+  const result = spawnSync("npx", [
+    "playwright",
+    "screenshot",
+    "--browser",
+    "chromium",
+    "--viewport-size",
+    `${width},${height}`,
+    "--wait-for-timeout",
+    "3000",
+    "--full-page",
+    url,
+    outputPath
+  ], {
+    stdio: "pipe",
+    timeout: timeout + 15e3
+  });
+  if (result.status !== 0) {
+    const stderr = result.stderr?.toString() ?? "";
+    throw new Error(`\uC2A4\uD06C\uB9B0\uC0F7 \uCEA1\uCC98 \uC2E4\uD328 (${width}px): ${stderr || "unknown error"}`);
+  }
+}
+async function extractPageData(url, timeout) {
+  const scriptContent = `
+    const { chromium } = require('playwright');
+    (async () => {
+      const browser = await chromium.launch({ headless: true });
+      const context = await browser.newContext({
+        viewport: { width: 1280, height: 800 },
+        userAgent: 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36',
+      });
+      const page = await context.newPage();
+      await page.goto(${JSON.stringify(url)}, { waitUntil: 'networkidle', timeout: ${timeout} });
+      await page.waitForTimeout(2000);
+      const data = await page.evaluate(${JSON.stringify(EXTRACTION_SCRIPT)});
+      await browser.close();
+      process.stdout.write(JSON.stringify(data));
+    })().catch(e => {
+      process.stderr.write(e.message);
+      process.exit(1);
+    });
+  `;
+  const result = spawnSync("node", ["-e", scriptContent], {
+    stdio: "pipe",
+    timeout: timeout + 3e4,
+    env: { ...process.env }
+  });
+  if (result.status !== 0) {
+    const stderr = result.stderr?.toString() ?? "";
+    console.error(`DOM \uCD94\uCD9C \uC2E4\uD328 (fallback \uC0AC\uC6A9): ${stderr}`);
+    return createFallbackData();
+  }
+  try {
+    const output = result.stdout.toString();
+    return JSON.parse(output);
+  } catch {
+    console.error("DOM \uCD94\uCD9C \uACB0\uACFC \uD30C\uC2F1 \uC2E4\uD328 (fallback \uC0AC\uC6A9)");
+    return createFallbackData();
+  }
+}
+function createFallbackData() {
+  return {
+    structure: {
+      sections: [],
+      headingHierarchy: [],
+      totalSections: 0,
+      nestingDepth: 0
+    },
+    designTokens: {
+      colors: {
+        primary: "#000000",
+        secondary: "#666666",
+        background: "#ffffff",
+        text: "#000000",
+        accent: "#0066ff",
+        palette: []
+      },
+      typography: {
+        fontFamilies: [],
+        scale: {}
+      },
+      spacing: {
+        sectionGap: 80,
+        contentPadding: 16,
+        cardGap: 16,
+        baseUnit: 8
+      },
+      borderRadius: { small: 0, medium: 0, large: 0 }
+    },
+    interactions: {
+      hasScrollAnimations: false,
+      hasHoverEffects: false,
+      hasCarousel: false,
+      hasAccordion: false,
+      hasModal: false,
+      hasStickyHeader: false,
+      hasParallax: false,
+      detectedAnimations: [],
+      detectedTransitions: []
+    },
+    images: [],
+    gaps: []
+  };
+}
+
+// src/commands/analyze.ts
+async function commandAnalyze(url, options) {
+  console.log(chalk15.bold("\n\uB808\uD37C\uB7F0\uC2A4 \uBD84\uC11D (Reference Analysis)\n"));
+  if (!url) {
+    console.error(chalk15.red("URL\uC774 \uD544\uC694\uD569\uB2C8\uB2E4."));
+    console.error(chalk15.dim("  \uC608: npx @saeroon/cli analyze https://example.com"));
+    process.exit(1);
+  }
+  if (!url.startsWith("http://") && !url.startsWith("https://")) {
+    url = "https://" + url;
+  }
+  const domain = new URL(url).hostname.replace(/^www\./, "");
+  const timestamp2 = (/* @__PURE__ */ new Date()).toISOString().slice(0, 10);
+  const defaultDir = join2(".saeroon", "analysis", `${domain}-${timestamp2}`);
+  const outputDir = resolve13(process.cwd(), options.outputDir ?? defaultDir);
+  const timeout = parseInt(options.timeout ?? "30000", 10);
+  await mkdir4(outputDir, { recursive: true });
+  console.log(chalk15.dim(`  URL:    ${url}`));
+  console.log(chalk15.dim(`  \uCD9C\uB825:   ${outputDir}`));
+  console.log(chalk15.dim(`  \uD0C0\uC784\uC544\uC6C3: ${timeout}ms`));
+  console.log("");
+  const analysisSpinner = spinner("\uB808\uD37C\uB7F0\uC2A4 \uBD84\uC11D \uC911... (\uC2A4\uD06C\uB9B0\uC0F7 4\uC7A5 + DOM/CSS \uCD94\uCD9C)");
+  try {
+    const analysis = await analyzeReference({ url, outputDir, timeout });
+    analysisSpinner.stop(chalk15.green("  \uBD84\uC11D \uC644\uB8CC!"));
+    console.log("");
+    console.log(chalk15.bold("\uAD6C\uC870"));
+    console.log(chalk15.dim(`  \uC139\uC158: ${analysis.structure.totalSections}\uAC1C`));
+    console.log(chalk15.dim(`  \uCD5C\uB300 \uC911\uCCA9: ${analysis.structure.nestingDepth}`));
+    if (analysis.structure.headingHierarchy.length > 0) {
+      console.log(chalk15.dim("  Heading hierarchy:"));
+      analysis.structure.headingHierarchy.slice(0, 10).forEach((h) => {
+        console.log(chalk15.dim(`    ${h}`));
+      });
+      if (analysis.structure.headingHierarchy.length > 10) {
+        console.log(chalk15.dim(`    ... +${analysis.structure.headingHierarchy.length - 10}\uAC1C`));
+      }
+    }
+    console.log("");
+    console.log(chalk15.bold("\uB514\uC790\uC778 \uD1A0\uD070"));
+    const { colors, typography, spacing } = analysis.designTokens;
+    console.log(chalk15.dim(`  Primary:    ${colors.primary}`));
+    console.log(chalk15.dim(`  Secondary:  ${colors.secondary}`));
+    console.log(chalk15.dim(`  Background: ${colors.background}`));
+    console.log(chalk15.dim(`  Text:       ${colors.text}`));
+    console.log(chalk15.dim(`  Accent:     ${colors.accent}`));
+    console.log(chalk15.dim(`  \uD3F0\uD2B8:       ${typography.fontFamilies.join(", ") || "(\uCD94\uCD9C \uC2E4\uD328)"}`));
+    console.log(chalk15.dim(`  \uC139\uC158 \uAC04\uACA9:  ${spacing.sectionGap}px`));
+    console.log(chalk15.dim(`  \uAE30\uBCF8 \uB2E8\uC704:  ${spacing.baseUnit}px`));
+    console.log("");
+    console.log(chalk15.bold("\uC778\uD130\uB799\uC158"));
+    const { interactions } = analysis;
+    const detected = [
+      interactions.hasStickyHeader && "Sticky Header",
+      interactions.hasScrollAnimations && "Scroll Animations",
+      interactions.hasCarousel && "Carousel",
+      interactions.hasAccordion && "Accordion",
+      interactions.hasModal && "Modal",
+      interactions.hasParallax && "Parallax",
+      interactions.hasHoverEffects && "Hover Effects"
+    ].filter(Boolean);
+    console.log(chalk15.dim(`  \uAC10\uC9C0: ${detected.length > 0 ? detected.join(", ") : "(\uC5C6\uC74C)"}`));
+    console.log("");
+    console.log(chalk15.bold("\uC774\uBBF8\uC9C0"));
+    console.log(chalk15.dim(`  \uCD1D ${analysis.images.length}\uAC1C \uAC10\uC9C0`));
+    const roleCount = {};
+    analysis.images.forEach((img) => {
+      roleCount[img.role] = (roleCount[img.role] || 0) + 1;
+    });
+    Object.entries(roleCount).forEach(([role, count]) => {
+      console.log(chalk15.dim(`    ${role}: ${count}\uAC1C`));
+    });
+    if (analysis.gaps.length > 0) {
+      console.log("");
+      console.log(chalk15.bold(chalk15.yellow("Gap \uAC10\uC9C0")));
+      analysis.gaps.forEach((gap) => {
+        console.log(chalk15.yellow(`  \u26A0 ${gap}`));
+      });
+    }
+    console.log("");
+    console.log(chalk15.bold("\uC2A4\uD06C\uB9B0\uC0F7"));
+    console.log(chalk15.dim(`  mobile:  ${analysis.screenshots.mobile}`));
+    console.log(chalk15.dim(`  tablet:  ${analysis.screenshots.tablet}`));
+    console.log(chalk15.dim(`  laptop:  ${analysis.screenshots.laptop}`));
+    console.log(chalk15.dim(`  desktop: ${analysis.screenshots.desktop}`));
+    console.log("");
+    console.log(chalk15.green.bold("\uBD84\uC11D \uC644\uB8CC!"));
+    console.log(chalk15.dim(`  \uACB0\uACFC: ${join2(outputDir, "analysis.json")}`));
+    console.log("");
+  } catch (error) {
+    analysisSpinner.stop(chalk15.red("  \uBD84\uC11D \uC2E4\uD328"));
+    console.error(chalk15.red(`
+${error instanceof Error ? error.message : String(error)}`));
+    console.log("");
+    console.log(chalk15.dim("Playwright\uAC00 \uC124\uCE58\uB418\uC5B4 \uC788\uB294\uC9C0 \uD655\uC778\uD558\uC138\uC694:"));
+    console.log(chalk15.cyan("  npx playwright install chromium\n"));
+    process.exit(1);
+  }
+}
+
+// src/commands/compare.ts
+import chalk16 from "chalk";
+import { writeFile as writeFile8, mkdir as mkdir5 } from "fs/promises";
+import { resolve as resolve14, join as join3 } from "path";
+import { execSync as execSync2, spawnSync as spawnSync2 } from "child_process";
 async function commandCompare(options) {
-  console.log(chalk15.bold("\n\uC2DC\uAC01 \uBE44\uAD50 (Visual Diff)\n"));
+  console.log(chalk16.bold("\n\uC2DC\uAC01 \uBE44\uAD50 (Visual Diff)\n"));
   if (!options.ref || !options.preview) {
-    console.error(chalk15.red("--ref <url> \uACFC --preview <url> \uC740 \uBAA8\uB450 \uD544\uC218\uC785\uB2C8\uB2E4."));
-    console.error(chalk15.dim("  \uC608: npx @saeroon/cli compare --ref https://example.com --preview https://preview.saeroon.com/abc"));
+    console.error(chalk16.red("--ref <url> \uACFC --preview <url> \uC740 \uBAA8\uB450 \uD544\uC218\uC785\uB2C8\uB2E4."));
+    console.error(chalk16.dim("  \uC608: npx @saeroon/cli compare --ref https://example.com --preview https://preview.saeroon.com/abc"));
     process.exit(1);
   }
   const playwrightAvailable = checkPlaywright();
   if (!playwrightAvailable) {
-    console.log(chalk15.yellow("Playwright\uAC00 \uD544\uC694\uD569\uB2C8\uB2E4."));
-    console.log(chalk15.dim("  \uB2E4\uC74C \uBA85\uB839\uC73C\uB85C \uC124\uCE58\uD558\uC138\uC694:"));
-    console.log(chalk15.cyan("    npx playwright install chromium\n"));
+    console.log(chalk16.yellow("Playwright\uAC00 \uD544\uC694\uD569\uB2C8\uB2E4."));
+    console.log(chalk16.dim("  \uB2E4\uC74C \uBA85\uB839\uC73C\uB85C \uC124\uCE58\uD558\uC138\uC694:"));
+    console.log(chalk16.cyan("    npx playwright install chromium\n"));
     process.exit(1);
   }
+  if (options.viewports) {
+    await runMultiViewportCompare(options);
+  } else {
+    await runSingleViewportCompare(options);
+  }
+}
+var ALL_VIEWPORTS = [
+  { name: "mobile", width: 375, height: 812 },
+  { name: "tablet", width: 768, height: 1024 },
+  { name: "laptop", width: 1280, height: 800 },
+  { name: "desktop", width: 1536, height: 900 }
+];
+async function runMultiViewportCompare(options) {
+  const viewports = parseViewports(options.viewports);
+  const outputDir = resolve14(process.cwd(), options.outputDir ?? ".saeroon/compare");
+  await mkdir5(outputDir, { recursive: true });
+  console.log(chalk16.dim(`  \uB808\uD37C\uB7F0\uC2A4: ${options.ref}`));
+  console.log(chalk16.dim(`  \uD504\uB9AC\uBDF0:   ${options.preview}`));
+  console.log(chalk16.dim(`  \uBDF0\uD3EC\uD2B8:   ${viewports.map((v) => `${v.name}(${v.width}px)`).join(", ")}`));
+  console.log(chalk16.dim(`  \uCD9C\uB825:     ${outputDir}`));
+  console.log("");
+  const hasMagick = checkCommand("magick");
+  const results = [];
+  for (const vp of viewports) {
+    const vpSpinner = spinner(`${vp.name} (${vp.width}px) \uBE44\uAD50 \uC911...`);
+    const refPath = join3(outputDir, `ref-${vp.name}.png`);
+    const previewPath = join3(outputDir, `preview-${vp.name}.png`);
+    const diffPath = join3(outputDir, `diff-${vp.name}.png`);
+    try {
+      captureScreenshot2(options.ref, refPath, vp.width, vp.height);
+      captureScreenshot2(options.preview, previewPath, vp.width, vp.height);
+      let diffPercentage = 0;
+      if (hasMagick) {
+        diffPercentage = generateDiffWithMagick(refPath, previewPath, diffPath);
+      } else {
+        generateSideBySide(refPath, previewPath, diffPath);
+        diffPercentage = -1;
+      }
+      results.push({
+        name: vp.name,
+        width: vp.width,
+        referenceScreenshot: refPath,
+        previewScreenshot: previewPath,
+        diffScreenshot: diffPath,
+        diffPercentage
+      });
+      const pctText = diffPercentage >= 0 ? `${diffPercentage.toFixed(1)}%` : "(\uACC4\uC0B0 \uBD88\uAC00)";
+      const pctColor = diffPercentage <= 10 ? chalk16.green : diffPercentage <= 25 ? chalk16.yellow : chalk16.red;
+      vpSpinner.stop(`  ${vp.name}: diff ${pctColor(pctText)}`);
+    } catch (error) {
+      vpSpinner.stop(chalk16.red(`  ${vp.name}: \uC2E4\uD328 \u2014 ${error instanceof Error ? error.message : String(error)}`));
+      results.push({
+        name: vp.name,
+        width: vp.width,
+        referenceScreenshot: refPath,
+        previewScreenshot: previewPath,
+        diffScreenshot: diffPath,
+        diffPercentage: -1
+      });
+    }
+  }
+  const validResults = results.filter((r) => r.diffPercentage >= 0);
+  const overallDiff = validResults.length > 0 ? validResults.reduce((sum, r) => sum + r.diffPercentage, 0) / validResults.length : -1;
+  const report = {
+    timestamp: (/* @__PURE__ */ new Date()).toISOString(),
+    referenceUrl: options.ref,
+    previewUrl: options.preview,
+    viewports: results,
+    overallDiffPercentage: Math.round(overallDiff * 10) / 10
+  };
+  const reportPath = join3(outputDir, "comparison-report.json");
+  await writeFile8(reportPath, JSON.stringify(report, null, 2), "utf-8");
+  console.log("");
+  console.log(chalk16.bold("\uBE44\uAD50 \uC694\uC57D"));
+  for (const r of results) {
+    const pct = r.diffPercentage >= 0 ? `${r.diffPercentage.toFixed(1)}%` : "N/A";
+    const icon = r.diffPercentage <= 10 ? chalk16.green("\u25CF") : r.diffPercentage <= 25 ? chalk16.yellow("\u25CF") : chalk16.red("\u25CF");
+    console.log(`  ${icon} ${r.name.padEnd(8)} ${pct.padStart(6)}  ${chalk16.dim(r.diffScreenshot)}`);
+  }
+  console.log("");
+  if (overallDiff >= 0) {
+    const overallColor = overallDiff <= 10 ? chalk16.green : overallDiff <= 25 ? chalk16.yellow : chalk16.red;
+    console.log(chalk16.bold(`\uC804\uCCB4 \uD3C9\uADE0 diff: ${overallColor(`${overallDiff.toFixed(1)}%`)}`));
+    if (overallDiff <= 10) {
+      console.log(chalk16.green("  \u2192 \uBE44\uAD50 \uB8E8\uD504 \uC644\uB8CC! CEO \uCD5C\uC885 \uD655\uC778 \uC694\uCCAD \uAC00\uB2A5"));
+    } else {
+      console.log(chalk16.yellow("  \u2192 diff > 10%: Vision \uBE44\uAD50 \u2192 \uC2A4\uD0A4\uB9C8 \uC218\uC815 \uD544\uC694"));
+    }
+  }
+  console.log(chalk16.dim(`
+  \uB9AC\uD3EC\uD2B8: ${reportPath}`));
+  console.log("");
+}
+function parseViewports(input) {
+  if (input === "all") return ALL_VIEWPORTS;
+  const names = input.split(",").map((s) => s.trim().toLowerCase());
+  return names.map((name) => ALL_VIEWPORTS.find((v) => v.name === name)).filter((v) => v !== void 0);
+}
+function generateDiffWithMagick(refPath, previewPath, diffPath) {
+  try {
+    execSync2(
+      `magick "${previewPath}" -resize "$(magick identify -format '%wx%h' "${refPath}")" -extent "$(magick identify -format '%wx%h' "${refPath}")" "${previewPath}"`,
+      { stdio: "pipe" }
+    );
+  } catch {
+  }
+  try {
+    const result = spawnSync2("magick", [
+      "compare",
+      "-metric",
+      "AE",
+      refPath,
+      previewPath,
+      diffPath
+    ], { stdio: "pipe", timeout: 3e4 });
+    const stderr = result.stderr?.toString().trim() ?? "";
+    const diffPixels = parseFloat(stderr) || 0;
+    try {
+      const sizeStr = execSync2(`magick identify -format '%w %h' "${refPath}"`, { stdio: "pipe" }).toString().trim();
+      const [w, h] = sizeStr.split(" ").map(Number);
+      const totalPixels = w * h;
+      if (totalPixels > 0) {
+        return Math.round(diffPixels / totalPixels * 1e3) / 10;
+      }
+    } catch {
+    }
+    return diffPixels > 0 ? 50 : 0;
+  } catch {
+    try {
+      execSync2(
+        `magick composite -blend 50x50 "${refPath}" "${previewPath}" "${diffPath}"`,
+        { stdio: "pipe" }
+      );
+    } catch {
+    }
+    return -1;
+  }
+}
+function generateSideBySide(refPath, previewPath, diffPath) {
+  try {
+    execSync2(
+      `magick montage "${refPath}" "${previewPath}" -geometry +2+2 -tile 2x1 "${diffPath}"`,
+      { stdio: "pipe" }
+    );
+  } catch {
+    try {
+      execSync2(`cp "${refPath}" "${diffPath}"`, { stdio: "pipe" });
+    } catch {
+    }
+  }
+}
+async function runSingleViewportCompare(options) {
   const width = parseInt(options.width ?? "1280", 10);
   const height = parseInt(options.height ?? "800", 10);
-  const outputPath = resolve12(process.cwd(), options.output ?? "compare-result.png");
+  const outputPath = resolve14(process.cwd(), options.output ?? "compare-result.png");
   const captureSpinner = spinner("\uB808\uD37C\uB7F0\uC2A4 \uC2A4\uD06C\uB9B0\uC0F7 \uCEA1\uCC98 \uC911...");
   try {
-    const refScreenshot = resolve12(process.cwd(), ".compare-ref.png");
-    const previewScreenshot = resolve12(process.cwd(), ".compare-preview.png");
-    captureScreenshot(options.ref, refScreenshot, width, height);
-    captureSpinner.stop(chalk15.green("  \uB808\uD37C\uB7F0\uC2A4 \uCEA1\uCC98 \uC644\uB8CC"));
+    const refScreenshot = resolve14(process.cwd(), ".compare-ref.png");
+    const previewScreenshot = resolve14(process.cwd(), ".compare-preview.png");
+    captureScreenshot2(options.ref, refScreenshot, width, height);
+    captureSpinner.stop(chalk16.green("  \uB808\uD37C\uB7F0\uC2A4 \uCEA1\uCC98 \uC644\uB8CC"));
     const previewSpinner = spinner("\uD504\uB9AC\uBDF0 \uC2A4\uD06C\uB9B0\uC0F7 \uCEA1\uCC98 \uC911...");
-    captureScreenshot(options.preview, previewScreenshot, width, height);
-    previewSpinner.stop(chalk15.green("  \uD504\uB9AC\uBDF0 \uCEA1\uCC98 \uC644\uB8CC"));
+    captureScreenshot2(options.preview, previewScreenshot, width, height);
+    previewSpinner.stop(chalk16.green("  \uD504\uB9AC\uBDF0 \uCEA1\uCC98 \uC644\uB8CC"));
     const diffSpinner = spinner("\uC2DC\uAC01 \uBE44\uAD50 \uC0DD\uC131 \uC911...");
     const hasMagick = checkCommand("magick");
     if (hasMagick) {
       try {
-        execSync(
+        execSync2(
           `magick compare -metric AE "${refScreenshot}" "${previewScreenshot}" "${outputPath}" 2>&1`,
           { stdio: "pipe" }
         );
       } catch {
-        execSync(
+        execSync2(
           `magick composite -blend 50x50 "${refScreenshot}" "${previewScreenshot}" "${outputPath}"`,
           { stdio: "pipe" }
         );
       }
-      diffSpinner.stop(chalk15.green("  Diff \uC774\uBBF8\uC9C0 \uC0DD\uC131 \uC644\uB8CC (ImageMagick)"));
+      diffSpinner.stop(chalk16.green("  Diff \uC774\uBBF8\uC9C0 \uC0DD\uC131 \uC644\uB8CC (ImageMagick)"));
     } else {
-      execSync(
+      execSync2(
         `magick montage "${refScreenshot}" "${previewScreenshot}" -geometry +2+2 -tile 2x1 "${outputPath}" 2>/dev/null || cp "${refScreenshot}" "${outputPath}"`,
         { stdio: "pipe" }
       );
-      diffSpinner.stop(chalk15.yellow("  \uB098\uB780\uD788 \uBE44\uAD50 \uC774\uBBF8\uC9C0 \uC0DD\uC131 (ImageMagick \uC5C6\uC74C \u2014 \uC624\uBC84\uB808\uC774 \uBE44\uAD50\uB294 magick \uC124\uCE58 \uD544\uC694)"));
+      diffSpinner.stop(chalk16.yellow("  \uB098\uB780\uD788 \uBE44\uAD50 \uC774\uBBF8\uC9C0 \uC0DD\uC131 (ImageMagick \uC5C6\uC74C \u2014 \uC624\uBC84\uB808\uC774 \uBE44\uAD50\uB294 magick \uC124\uCE58 \uD544\uC694)"));
     }
     try {
-      execSync(`rm -f "${refScreenshot}" "${previewScreenshot}"`, { stdio: "pipe" });
+      execSync2(`rm -f "${refScreenshot}" "${previewScreenshot}"`, { stdio: "pipe" });
     } catch {
     }
     console.log("");
-    console.log(chalk15.green.bold("\uBE44\uAD50 \uC644\uB8CC!"));
-    console.log(chalk15.dim(`  \uCD9C\uB825: ${outputPath}`));
-    console.log(chalk15.dim(`  \uD574\uC0C1\uB3C4: ${width}\xD7${height}`));
-    console.log(chalk15.dim(`  \uB808\uD37C\uB7F0\uC2A4: ${options.ref}`));
-    console.log(chalk15.dim(`  \uD504\uB9AC\uBDF0:   ${options.preview}`));
+    console.log(chalk16.green.bold("\uBE44\uAD50 \uC644\uB8CC!"));
+    console.log(chalk16.dim(`  \uCD9C\uB825: ${outputPath}`));
+    console.log(chalk16.dim(`  \uD574\uC0C1\uB3C4: ${width}\xD7${height}`));
+    console.log(chalk16.dim(`  \uB808\uD37C\uB7F0\uC2A4: ${options.ref}`));
+    console.log(chalk16.dim(`  \uD504\uB9AC\uBDF0:   ${options.preview}`));
     console.log("");
   } catch (error) {
-    console.error(chalk15.red(`\uBE44\uAD50 \uC2E4\uD328: ${error instanceof Error ? error.message : String(error)}`));
+    console.error(chalk16.red(`\uBE44\uAD50 \uC2E4\uD328: ${error instanceof Error ? error.message : String(error)}`));
     process.exit(1);
   }
 }
 function checkPlaywright() {
   try {
-    execSync("npx playwright --version", { stdio: "pipe" });
+    execSync2("npx playwright --version", { stdio: "pipe" });
     return true;
   } catch {
     return false;
@@ -3940,14 +4706,14 @@ function checkPlaywright() {
 }
 function checkCommand(cmd) {
   try {
-    execSync(`which ${cmd}`, { stdio: "pipe" });
+    execSync2(`which ${cmd}`, { stdio: "pipe" });
     return true;
   } catch {
     return false;
   }
 }
-function captureScreenshot(url, outputPath, width, height) {
-  const result = spawnSync("npx", [
+function captureScreenshot2(url, outputPath, width, height) {
+  const result = spawnSync2("npx", [
     "playwright",
     "screenshot",
     "--browser",
@@ -3970,7 +4736,7 @@ function captureScreenshot(url, outputPath, width, height) {
 }
 
 // src/commands/diff.ts
-import chalk16 from "chalk";
+import chalk17 from "chalk";
 function compareSchemas(draft, published) {
   const draftObj = draft;
   const pubObj = published;
@@ -4094,53 +4860,53 @@ function compareSettings(draftSettings, pubSettings, result) {
 }
 function printDiffResult(result) {
   if (!result.hasDifferences) {
-    console.log(chalk16.green("\nDraft\uC640 Published \uC2A4\uD0A4\uB9C8\uAC00 \uB3D9\uC77C\uD569\uB2C8\uB2E4. \uBCC0\uACBD \uC0AC\uD56D \uC5C6\uC74C.\n"));
+    console.log(chalk17.green("\nDraft\uC640 Published \uC2A4\uD0A4\uB9C8\uAC00 \uB3D9\uC77C\uD569\uB2C8\uB2E4. \uBCC0\uACBD \uC0AC\uD56D \uC5C6\uC74C.\n"));
     return;
   }
-  console.log(chalk16.bold("\nStaging vs Production \uC2A4\uD0A4\uB9C8 \uBE44\uAD50:\n"));
+  console.log(chalk17.bold("\nStaging vs Production \uC2A4\uD0A4\uB9C8 \uBE44\uAD50:\n"));
   if (result.pages.added.length > 0 || result.pages.removed.length > 0 || result.pages.modified.length > 0) {
-    console.log(chalk16.bold.underline("  Pages"));
+    console.log(chalk17.bold.underline("  Pages"));
     for (const page of result.pages.added) {
-      console.log(`    ${chalk16.green("+")} ${page}`);
+      console.log(`    ${chalk17.green("+")} ${page}`);
     }
     for (const page of result.pages.removed) {
-      console.log(`    ${chalk16.red("-")} ${page}`);
+      console.log(`    ${chalk17.red("-")} ${page}`);
     }
     for (const page of result.pages.modified) {
-      console.log(`    ${chalk16.yellow("~")} ${page}`);
+      console.log(`    ${chalk17.yellow("~")} ${page}`);
     }
     console.log("");
   }
   if (result.blocks.added.length > 0 || result.blocks.removed.length > 0 || result.blocks.modified.length > 0) {
-    console.log(chalk16.bold.underline("  Blocks"));
+    console.log(chalk17.bold.underline("  Blocks"));
     for (const block of result.blocks.added) {
-      console.log(`    ${chalk16.green("+")} ${block}`);
+      console.log(`    ${chalk17.green("+")} ${block}`);
     }
     for (const block of result.blocks.removed) {
-      console.log(`    ${chalk16.red("-")} ${block}`);
+      console.log(`    ${chalk17.red("-")} ${block}`);
     }
     for (const block of result.blocks.modified) {
-      console.log(`    ${chalk16.yellow("~")} ${block}`);
+      console.log(`    ${chalk17.yellow("~")} ${block}`);
     }
     console.log("");
   }
   if (result.settings.changed.length > 0) {
-    console.log(chalk16.bold.underline("  Settings"));
+    console.log(chalk17.bold.underline("  Settings"));
     for (const { key, draft, published } of result.settings.changed) {
       if (published === void 0) {
-        console.log(`    ${chalk16.green("+")} ${key}: ${chalk16.green(formatValue(draft))}`);
+        console.log(`    ${chalk17.green("+")} ${key}: ${chalk17.green(formatValue(draft))}`);
       } else if (draft === void 0) {
-        console.log(`    ${chalk16.red("-")} ${key}: ${chalk16.red(formatValue(published))}`);
+        console.log(`    ${chalk17.red("-")} ${key}: ${chalk17.red(formatValue(published))}`);
       } else {
-        console.log(`    ${chalk16.yellow("~")} ${key}:`);
-        console.log(`      ${chalk16.red(`- ${formatValue(published)}`)}`);
-        console.log(`      ${chalk16.green(`+ ${formatValue(draft)}`)}`);
+        console.log(`    ${chalk17.yellow("~")} ${key}:`);
+        console.log(`      ${chalk17.red(`- ${formatValue(published)}`)}`);
+        console.log(`      ${chalk17.green(`+ ${formatValue(draft)}`)}`);
       }
     }
     console.log("");
   }
   const totalChanges = result.pages.added.length + result.pages.removed.length + result.pages.modified.length + result.blocks.added.length + result.blocks.removed.length + result.blocks.modified.length + result.settings.changed.length;
-  console.log(chalk16.dim(`  \uCD1D ${totalChanges}\uAC74\uC758 \uBCC0\uACBD \uC0AC\uD56D
+  console.log(chalk17.dim(`  \uCD1D ${totalChanges}\uAC74\uC758 \uBCC0\uACBD \uC0AC\uD56D
 `));
 }
 function formatValue(value) {
@@ -4155,10 +4921,10 @@ function formatValue(value) {
 async function commandDiff(options) {
   const projectConfig = await loadProjectConfig();
   if (!projectConfig?.siteId) {
-    console.error(chalk16.red("\nsiteId\uAC00 \uC124\uC815\uB418\uC9C0 \uC54A\uC558\uC2B5\uB2C8\uB2E4.\n"));
-    console.error(chalk16.yellow("\uB2E4\uC74C \uC911 \uD558\uB098\uB97C \uC2E4\uD589\uD558\uC138\uC694:"));
-    console.error(chalk16.dim("  1. npx @saeroon/cli init --from-site <siteId> \uB85C \uD504\uB85C\uC81D\uD2B8\uB97C \uCD08\uAE30\uD654"));
-    console.error(chalk16.dim('  2. saeroon.config.json\uC5D0 "siteId" \uD544\uB4DC\uB97C \uC9C1\uC811 \uCD94\uAC00'));
+    console.error(chalk17.red("\nsiteId\uAC00 \uC124\uC815\uB418\uC9C0 \uC54A\uC558\uC2B5\uB2C8\uB2E4.\n"));
+    console.error(chalk17.yellow("\uB2E4\uC74C \uC911 \uD558\uB098\uB97C \uC2E4\uD589\uD558\uC138\uC694:"));
+    console.error(chalk17.dim("  1. npx @saeroon/cli init --from-site <siteId> \uB85C \uD504\uB85C\uC81D\uD2B8\uB97C \uCD08\uAE30\uD654"));
+    console.error(chalk17.dim('  2. saeroon.config.json\uC5D0 "siteId" \uD544\uB4DC\uB97C \uC9C1\uC811 \uCD94\uAC00'));
     console.error("");
     process.exit(1);
   }
@@ -4166,8 +4932,8 @@ async function commandDiff(options) {
   const apiKey = await resolveApiKey(options.apiKey);
   const apiBaseUrl = await getApiBaseUrl();
   const client = new SaeroonApiClient(apiKey, apiBaseUrl);
-  console.log(chalk16.bold("\nStaging vs Production \uC2A4\uD0A4\uB9C8 \uBE44\uAD50\n"));
-  console.log(chalk16.dim(`  \uC0AC\uC774\uD2B8 ID: ${siteId}`));
+  console.log(chalk17.bold("\nStaging vs Production \uC2A4\uD0A4\uB9C8 \uBE44\uAD50\n"));
+  console.log(chalk17.dim(`  \uC0AC\uC774\uD2B8 ID: ${siteId}`));
   console.log("");
   const fetchSpinner = spinner("Draft \uBC0F Published \uC2A4\uD0A4\uB9C8\uB97C \uAC00\uC838\uC624\uB294 \uC911...");
   let draftSchema;
@@ -4180,16 +4946,16 @@ async function commandDiff(options) {
     draftSchema = safeJsonParse(draftResult.schemaJson);
     publishedSchema = safeJsonParse(publishedResult.schemaJson);
     fetchSpinner.stop("");
-    console.log(chalk16.dim(`  Draft:     ${draftResult.isDraft ? "Draft" : "Published"} (editVersion: ${draftResult.editVersion})`));
-    console.log(chalk16.dim(`  Published: ${publishedResult.isDraft ? "Draft" : "Published"} (editVersion: ${publishedResult.editVersion})`));
+    console.log(chalk17.dim(`  Draft:     ${draftResult.isDraft ? "Draft" : "Published"} (editVersion: ${draftResult.editVersion})`));
+    console.log(chalk17.dim(`  Published: ${publishedResult.isDraft ? "Draft" : "Published"} (editVersion: ${publishedResult.editVersion})`));
   } catch (error) {
     if (error instanceof ApiError) {
       fetchSpinner.stop(
-        chalk16.red(`API \uC5D0\uB7EC (${error.statusCode}): ${error.message}`)
+        chalk17.red(`API \uC5D0\uB7EC (${error.statusCode}): ${error.message}`)
       );
     } else {
       fetchSpinner.stop(
-        chalk16.red(
+        chalk17.red(
           `\uC2A4\uD0A4\uB9C8 \uC870\uD68C \uC2E4\uD328: ${error instanceof Error ? error.message : String(error)}`
         )
       );
@@ -4201,7 +4967,7 @@ async function commandDiff(options) {
 }
 
 // src/commands/template.ts
-import chalk17 from "chalk";
+import chalk18 from "chalk";
 import { createInterface as createInterface5 } from "readline/promises";
 import { stdin as stdin5, stdout as stdout5 } from "process";
 var TEMPLATE_CATEGORIES2 = [
@@ -4222,26 +4988,26 @@ var TEMPLATE_CATEGORIES2 = [
 async function commandTemplateRegister(options) {
   const projectConfig = await loadProjectConfig();
   if (!projectConfig?.siteId) {
-    console.error(chalk17.red("\nsiteId\uAC00 \uC124\uC815\uB418\uC9C0 \uC54A\uC558\uC2B5\uB2C8\uB2E4.\n"));
-    console.error(chalk17.yellow("\uB2E4\uC74C \uC911 \uD558\uB098\uB97C \uC2E4\uD589\uD558\uC138\uC694:"));
-    console.error(chalk17.dim("  1. npx @saeroon/cli init --from-site <siteId> \uB85C \uD504\uB85C\uC81D\uD2B8\uB97C \uCD08\uAE30\uD654"));
-    console.error(chalk17.dim('  2. saeroon.config.json\uC5D0 "siteId" \uD544\uB4DC\uB97C \uC9C1\uC811 \uCD94\uAC00'));
+    console.error(chalk18.red("\nsiteId\uAC00 \uC124\uC815\uB418\uC9C0 \uC54A\uC558\uC2B5\uB2C8\uB2E4.\n"));
+    console.error(chalk18.yellow("\uB2E4\uC74C \uC911 \uD558\uB098\uB97C \uC2E4\uD589\uD558\uC138\uC694:"));
+    console.error(chalk18.dim("  1. npx @saeroon/cli init --from-site <siteId> \uB85C \uD504\uB85C\uC81D\uD2B8\uB97C \uCD08\uAE30\uD654"));
+    console.error(chalk18.dim('  2. saeroon.config.json\uC5D0 "siteId" \uD544\uB4DC\uB97C \uC9C1\uC811 \uCD94\uAC00'));
     console.error("");
     process.exit(1);
   }
   if (projectConfig.templateId) {
-    console.error(chalk17.yellow("\n\uC774 \uD504\uB85C\uC81D\uD2B8\uC5D0\uB294 \uC774\uBBF8 \uD15C\uD50C\uB9BF\uC774 \uB4F1\uB85D\uB418\uC5B4 \uC788\uC2B5\uB2C8\uB2E4."));
-    console.error(chalk17.dim(`  templateId: ${projectConfig.templateId}`));
-    console.error(chalk17.dim("  \uBA54\uD0C0\uB370\uC774\uD130 \uC218\uC815: saeroon template update"));
-    console.error(chalk17.dim("  \uBC84\uC804 \uB3D9\uAE30\uD654: saeroon template sync"));
+    console.error(chalk18.yellow("\n\uC774 \uD504\uB85C\uC81D\uD2B8\uC5D0\uB294 \uC774\uBBF8 \uD15C\uD50C\uB9BF\uC774 \uB4F1\uB85D\uB418\uC5B4 \uC788\uC2B5\uB2C8\uB2E4."));
+    console.error(chalk18.dim(`  templateId: ${projectConfig.templateId}`));
+    console.error(chalk18.dim("  \uBA54\uD0C0\uB370\uC774\uD130 \uC218\uC815: saeroon template update"));
+    console.error(chalk18.dim("  \uBC84\uC804 \uB3D9\uAE30\uD654: saeroon template sync"));
     console.error("");
     process.exit(1);
   }
   const apiKey = await resolveApiKey(options.apiKey);
   const apiBaseUrl = await getApiBaseUrl();
   const client = new SaeroonApiClient(apiKey, apiBaseUrl);
-  console.log(chalk17.bold("\n\uD15C\uD50C\uB9BF \uB4F1\uB85D\n"));
-  console.log(chalk17.dim(`  \uC18C\uC2A4 \uC0AC\uC774\uD2B8: ${projectConfig.siteId}`));
+  console.log(chalk18.bold("\n\uD15C\uD50C\uB9BF \uB4F1\uB85D\n"));
+  console.log(chalk18.dim(`  \uC18C\uC2A4 \uC0AC\uC774\uD2B8: ${projectConfig.siteId}`));
   console.log("");
   let name = options.name ?? "";
   let category = options.category ?? "";
@@ -4255,15 +5021,15 @@ async function commandTemplateRegister(options) {
         while (!name) {
           name = (await rl.question("  \uC774\uB984: ")).trim();
           if (!name) {
-            console.log(chalk17.red("  \uC774\uB984\uC740 \uD544\uC218\uC785\uB2C8\uB2E4."));
+            console.log(chalk18.red("  \uC774\uB984\uC740 \uD544\uC218\uC785\uB2C8\uB2E4."));
           }
         }
       }
       if (!category) {
         console.log("");
-        console.log(chalk17.dim("  \uCE74\uD14C\uACE0\uB9AC \uBAA9\uB85D:"));
+        console.log(chalk18.dim("  \uCE74\uD14C\uACE0\uB9AC \uBAA9\uB85D:"));
         TEMPLATE_CATEGORIES2.forEach((cat, i) => {
-          console.log(chalk17.dim(`    ${i + 1}. ${cat}`));
+          console.log(chalk18.dim(`    ${i + 1}. ${cat}`));
         });
         console.log("");
         while (!category) {
@@ -4280,7 +5046,7 @@ async function commandTemplateRegister(options) {
             } else if (input) {
               category = input;
             } else {
-              console.log(chalk17.red("  \uCE74\uD14C\uACE0\uB9AC\uB97C \uC120\uD0DD\uD574\uC8FC\uC138\uC694."));
+              console.log(chalk18.red("  \uCE74\uD14C\uACE0\uB9AC\uB97C \uC120\uD0DD\uD574\uC8FC\uC138\uC694."));
             }
           }
         }
@@ -4307,22 +5073,22 @@ async function commandTemplateRegister(options) {
       sourceSiteId: projectConfig.siteId
     };
     const result = await client.registerTemplate(request);
-    registerSpinner.stop(chalk17.green("\uD15C\uD50C\uB9BF \uB4F1\uB85D \uC644\uB8CC!"));
+    registerSpinner.stop(chalk18.green("\uD15C\uD50C\uB9BF \uB4F1\uB85D \uC644\uB8CC!"));
     await saveProjectConfig({ templateId: result.id });
     if (options.json) {
       console.log(JSON.stringify(result, null, 2));
     } else {
       formatTemplateDetail(result);
-      console.log(chalk17.dim("  templateId\uAC00 saeroon.config.json\uC5D0 \uC800\uC7A5\uB418\uC5C8\uC2B5\uB2C8\uB2E4."));
-      console.log(chalk17.dim("  \uBC84\uC804 \uB3D9\uAE30\uD654: saeroon template sync"));
+      console.log(chalk18.dim("  templateId\uAC00 saeroon.config.json\uC5D0 \uC800\uC7A5\uB418\uC5C8\uC2B5\uB2C8\uB2E4."));
+      console.log(chalk18.dim("  \uBC84\uC804 \uB3D9\uAE30\uD654: saeroon template sync"));
       console.log("");
     }
   } catch (error) {
     if (error instanceof ApiError) {
-      registerSpinner.stop(chalk17.red(`API \uC5D0\uB7EC (${error.statusCode}): ${error.message}`));
+      registerSpinner.stop(chalk18.red(`API \uC5D0\uB7EC (${error.statusCode}): ${error.message}`));
     } else {
       registerSpinner.stop(
-        chalk17.red(`\uB4F1\uB85D \uC2E4\uD328: ${error instanceof Error ? error.message : String(error)}`)
+        chalk18.red(`\uB4F1\uB85D \uC2E4\uD328: ${error instanceof Error ? error.message : String(error)}`)
       );
     }
     process.exit(1);
@@ -4331,22 +5097,22 @@ async function commandTemplateRegister(options) {
 async function commandTemplateSync(options) {
   const projectConfig = await loadProjectConfig();
   if (!projectConfig?.templateId) {
-    console.error(chalk17.red("\ntemplateId\uAC00 \uC124\uC815\uB418\uC9C0 \uC54A\uC558\uC2B5\uB2C8\uB2E4.\n"));
-    console.error(chalk17.yellow("\uBA3C\uC800 \uD15C\uD50C\uB9BF\uC744 \uB4F1\uB85D\uD558\uC138\uC694:"));
-    console.error(chalk17.dim("  saeroon template register"));
+    console.error(chalk18.red("\ntemplateId\uAC00 \uC124\uC815\uB418\uC9C0 \uC54A\uC558\uC2B5\uB2C8\uB2E4.\n"));
+    console.error(chalk18.yellow("\uBA3C\uC800 \uD15C\uD50C\uB9BF\uC744 \uB4F1\uB85D\uD558\uC138\uC694:"));
+    console.error(chalk18.dim("  saeroon template register"));
     console.error("");
     process.exit(1);
   }
   if (!projectConfig.siteId) {
-    console.error(chalk17.red("\nsiteId\uAC00 \uC124\uC815\uB418\uC9C0 \uC54A\uC558\uC2B5\uB2C8\uB2E4.\n"));
+    console.error(chalk18.red("\nsiteId\uAC00 \uC124\uC815\uB418\uC9C0 \uC54A\uC558\uC2B5\uB2C8\uB2E4.\n"));
     process.exit(1);
   }
   const apiKey = await resolveApiKey(options.apiKey);
   const apiBaseUrl = await getApiBaseUrl();
   const client = new SaeroonApiClient(apiKey, apiBaseUrl);
-  console.log(chalk17.bold("\n\uD15C\uD50C\uB9BF \uBC84\uC804 \uB3D9\uAE30\uD654\n"));
-  console.log(chalk17.dim(`  \uC18C\uC2A4 \uC0AC\uC774\uD2B8:  ${projectConfig.siteId}`));
-  console.log(chalk17.dim(`  \uD15C\uD50C\uB9BF ID:    ${projectConfig.templateId}`));
+  console.log(chalk18.bold("\n\uD15C\uD50C\uB9BF \uBC84\uC804 \uB3D9\uAE30\uD654\n"));
+  console.log(chalk18.dim(`  \uC18C\uC2A4 \uC0AC\uC774\uD2B8:  ${projectConfig.siteId}`));
+  console.log(chalk18.dim(`  \uD15C\uD50C\uB9BF ID:    ${projectConfig.templateId}`));
   console.log("");
   if (!options.force) {
     const diffSpinner = spinner("\uC2A4\uD0A4\uB9C8 \uBCC0\uACBD \uC0AC\uD56D \uD655\uC778 \uC911...");
@@ -4358,17 +5124,17 @@ async function commandTemplateSync(options) {
       diffSpinner.stop("");
       const diff = compareSchemas(safeJsonParse(draftResult.schemaJson), safeJsonParse(publishedResult.schemaJson));
       if (!diff.hasDifferences) {
-        console.log(chalk17.green("  \uBCC0\uACBD \uC0AC\uD56D \uC5C6\uC74C. \uC774\uBBF8 \uCD5C\uC2E0 \uC0C1\uD0DC\uC785\uB2C8\uB2E4.\n"));
+        console.log(chalk18.green("  \uBCC0\uACBD \uC0AC\uD56D \uC5C6\uC74C. \uC774\uBBF8 \uCD5C\uC2E0 \uC0C1\uD0DC\uC785\uB2C8\uB2E4.\n"));
         return;
       }
       printSyncDiffSummary(diff);
       const rl = createInterface5({ input: stdin5, output: stdout5 });
       try {
         const answer = await rl.question(
-          chalk17.yellow("  \uC774 \uBCC0\uACBD \uC0AC\uD56D\uC73C\uB85C \uC0C8 \uBC84\uC804\uC744 \uBC1C\uD589\uD558\uC2DC\uACA0\uC2B5\uB2C8\uAE4C? (y/N): ")
+          chalk18.yellow("  \uC774 \uBCC0\uACBD \uC0AC\uD56D\uC73C\uB85C \uC0C8 \uBC84\uC804\uC744 \uBC1C\uD589\uD558\uC2DC\uACA0\uC2B5\uB2C8\uAE4C? (y/N): ")
         );
         if (answer.trim().toLowerCase() !== "y") {
-          console.log(chalk17.dim("\n  \uB3D9\uAE30\uD654\uAC00 \uCDE8\uC18C\uB418\uC5C8\uC2B5\uB2C8\uB2E4.\n"));
+          console.log(chalk18.dim("\n  \uB3D9\uAE30\uD654\uAC00 \uCDE8\uC18C\uB418\uC5C8\uC2B5\uB2C8\uB2E4.\n"));
           return;
         }
       } finally {
@@ -4376,10 +5142,10 @@ async function commandTemplateSync(options) {
       }
     } catch (error) {
       if (error instanceof ApiError) {
-        diffSpinner.stop(chalk17.red(`API \uC5D0\uB7EC (${error.statusCode}): ${error.message}`));
+        diffSpinner.stop(chalk18.red(`API \uC5D0\uB7EC (${error.statusCode}): ${error.message}`));
       } else {
         diffSpinner.stop(
-          chalk17.red(`\uC2A4\uD0A4\uB9C8 \uBE44\uAD50 \uC2E4\uD328: ${error instanceof Error ? error.message : String(error)}`)
+          chalk18.red(`\uC2A4\uD0A4\uB9C8 \uBE44\uAD50 \uC2E4\uD328: ${error instanceof Error ? error.message : String(error)}`)
         );
       }
       process.exit(1);
@@ -4389,22 +5155,22 @@ async function commandTemplateSync(options) {
   const syncSpinner = spinner("\uC0C8 \uBC84\uC804 \uBC1C\uD589 \uC911...");
   try {
     const result = await client.syncTemplateVersion(projectConfig.templateId);
-    syncSpinner.stop(chalk17.green(`\uD15C\uD50C\uB9BF v${result.version} \uBC1C\uD589 \uC644\uB8CC!`));
+    syncSpinner.stop(chalk18.green(`\uD15C\uD50C\uB9BF v${result.version} \uBC1C\uD589 \uC644\uB8CC!`));
     if (options.json) {
       console.log(JSON.stringify(result, null, 2));
     } else {
       console.log("");
       console.log(`  \uBC84\uC804:    v${result.version}`);
       console.log(`  \uC774\uB984:    ${result.name}`);
-      console.log(`  \uBC1C\uD589:    ${chalk17.dim(result.updatedAt ?? "")}`);
+      console.log(`  \uBC1C\uD589:    ${chalk18.dim(result.updatedAt ?? "")}`);
       console.log("");
     }
   } catch (error) {
     if (error instanceof ApiError) {
-      syncSpinner.stop(chalk17.red(`API \uC5D0\uB7EC (${error.statusCode}): ${error.message}`));
+      syncSpinner.stop(chalk18.red(`API \uC5D0\uB7EC (${error.statusCode}): ${error.message}`));
     } else {
       syncSpinner.stop(
-        chalk17.red(`\uB3D9\uAE30\uD654 \uC2E4\uD328: ${error instanceof Error ? error.message : String(error)}`)
+        chalk18.red(`\uB3D9\uAE30\uD654 \uC2E4\uD328: ${error instanceof Error ? error.message : String(error)}`)
       );
     }
     process.exit(1);
@@ -4425,10 +5191,10 @@ async function commandTemplateStatus(options) {
     }
   } catch (error) {
     if (error instanceof ApiError) {
-      fetchSpinner.stop(chalk17.red(`API \uC5D0\uB7EC (${error.statusCode}): ${error.message}`));
+      fetchSpinner.stop(chalk18.red(`API \uC5D0\uB7EC (${error.statusCode}): ${error.message}`));
     } else {
       fetchSpinner.stop(
-        chalk17.red(`\uC870\uD68C \uC2E4\uD328: ${error instanceof Error ? error.message : String(error)}`)
+        chalk18.red(`\uC870\uD68C \uC2E4\uD328: ${error instanceof Error ? error.message : String(error)}`)
       );
     }
     process.exit(1);
@@ -4437,9 +5203,9 @@ async function commandTemplateStatus(options) {
 async function commandTemplateUpdate(options) {
   const projectConfig = await loadProjectConfig();
   if (!projectConfig?.templateId) {
-    console.error(chalk17.red("\ntemplateId\uAC00 \uC124\uC815\uB418\uC9C0 \uC54A\uC558\uC2B5\uB2C8\uB2E4.\n"));
-    console.error(chalk17.yellow("\uBA3C\uC800 \uD15C\uD50C\uB9BF\uC744 \uB4F1\uB85D\uD558\uC138\uC694:"));
-    console.error(chalk17.dim("  saeroon template register"));
+    console.error(chalk18.red("\ntemplateId\uAC00 \uC124\uC815\uB418\uC9C0 \uC54A\uC558\uC2B5\uB2C8\uB2E4.\n"));
+    console.error(chalk18.yellow("\uBA3C\uC800 \uD15C\uD50C\uB9BF\uC744 \uB4F1\uB85D\uD558\uC138\uC694:"));
+    console.error(chalk18.dim("  saeroon template register"));
     console.error("");
     process.exit(1);
   }
@@ -4478,22 +5244,22 @@ async function commandTemplateUpdate(options) {
         currentSpinner.stop("");
       } catch (error) {
         if (error instanceof ApiError) {
-          currentSpinner.stop(chalk17.red(`API \uC5D0\uB7EC (${error.statusCode}): ${error.message}`));
+          currentSpinner.stop(chalk18.red(`API \uC5D0\uB7EC (${error.statusCode}): ${error.message}`));
         } else {
-          currentSpinner.stop(chalk17.red("\uC870\uD68C \uC2E4\uD328"));
+          currentSpinner.stop(chalk18.red("\uC870\uD68C \uC2E4\uD328"));
         }
         process.exit(1);
       }
       const current = templates.find((t) => t.id === projectConfig.templateId);
       if (!current) {
-        console.error(chalk17.red(`
+        console.error(chalk18.red(`
 \uD15C\uD50C\uB9BF\uC744 \uCC3E\uC744 \uC218 \uC5C6\uC2B5\uB2C8\uB2E4: ${projectConfig.templateId}
 `));
         process.exit(1);
       }
-      console.log(chalk17.bold("\n\uD604\uC7AC \uD15C\uD50C\uB9BF \uC815\uBCF4:"));
+      console.log(chalk18.bold("\n\uD604\uC7AC \uD15C\uD50C\uB9BF \uC815\uBCF4:"));
       formatTemplateDetail(current);
-      console.log(chalk17.bold("\uC218\uC815\uD560 \uD56D\uBAA9\uC744 \uC785\uB825\uD558\uC138\uC694 (\uBE48 \uAC12 = \uBCC0\uACBD \uC5C6\uC74C):\n"));
+      console.log(chalk18.bold("\uC218\uC815\uD560 \uD56D\uBAA9\uC744 \uC785\uB825\uD558\uC138\uC694 (\uBE48 \uAC12 = \uBCC0\uACBD \uC5C6\uC74C):\n"));
       const newName = (await rl.question(`  \uC774\uB984 [${current.name}]: `)).trim();
       if (newName) {
         request.name = newName;
@@ -4519,14 +5285,14 @@ async function commandTemplateUpdate(options) {
     }
   }
   if (!hasChanges) {
-    console.log(chalk17.dim("\n  \uBCC0\uACBD \uC0AC\uD56D \uC5C6\uC74C.\n"));
+    console.log(chalk18.dim("\n  \uBCC0\uACBD \uC0AC\uD56D \uC5C6\uC74C.\n"));
     return;
   }
   console.log("");
   const updateSpinner = spinner("\uD15C\uD50C\uB9BF \uBA54\uD0C0\uB370\uC774\uD130 \uC218\uC815 \uC911...");
   try {
     const result = await client.updateTemplate(projectConfig.templateId, request);
-    updateSpinner.stop(chalk17.green("\uD15C\uD50C\uB9BF \uC218\uC815 \uC644\uB8CC!"));
+    updateSpinner.stop(chalk18.green("\uD15C\uD50C\uB9BF \uC218\uC815 \uC644\uB8CC!"));
     if (options.json) {
       console.log(JSON.stringify(result, null, 2));
     } else {
@@ -4534,10 +5300,10 @@ async function commandTemplateUpdate(options) {
     }
   } catch (error) {
     if (error instanceof ApiError) {
-      updateSpinner.stop(chalk17.red(`API \uC5D0\uB7EC (${error.statusCode}): ${error.message}`));
+      updateSpinner.stop(chalk18.red(`API \uC5D0\uB7EC (${error.statusCode}): ${error.message}`));
     } else {
       updateSpinner.stop(
-        chalk17.red(`\uC218\uC815 \uC2E4\uD328: ${error instanceof Error ? error.message : String(error)}`)
+        chalk18.red(`\uC218\uC815 \uC2E4\uD328: ${error instanceof Error ? error.message : String(error)}`)
       );
     }
     process.exit(1);
@@ -4550,25 +5316,134 @@ function printSyncDiffSummary(diff) {
   const settingChanges = diff.settings.changed.length;
   if (pageChanges > 0) {
     const detail = [];
-    if (diff.pages.added.length > 0) detail.push(chalk17.green(`+${diff.pages.added.length}`));
-    if (diff.pages.removed.length > 0) detail.push(chalk17.red(`-${diff.pages.removed.length}`));
-    if (diff.pages.modified.length > 0) detail.push(chalk17.yellow(`~${diff.pages.modified.length}`));
+    if (diff.pages.added.length > 0) detail.push(chalk18.green(`+${diff.pages.added.length}`));
+    if (diff.pages.removed.length > 0) detail.push(chalk18.red(`-${diff.pages.removed.length}`));
+    if (diff.pages.modified.length > 0) detail.push(chalk18.yellow(`~${diff.pages.modified.length}`));
     parts.push(`\uD398\uC774\uC9C0 ${detail.join(" ")}`);
   }
   if (blockChanges > 0) {
     const detail = [];
-    if (diff.blocks.added.length > 0) detail.push(chalk17.green(`+${diff.blocks.added.length}`));
-    if (diff.blocks.removed.length > 0) detail.push(chalk17.red(`-${diff.blocks.removed.length}`));
-    if (diff.blocks.modified.length > 0) detail.push(chalk17.yellow(`~${diff.blocks.modified.length}`));
+    if (diff.blocks.added.length > 0) detail.push(chalk18.green(`+${diff.blocks.added.length}`));
+    if (diff.blocks.removed.length > 0) detail.push(chalk18.red(`-${diff.blocks.removed.length}`));
+    if (diff.blocks.modified.length > 0) detail.push(chalk18.yellow(`~${diff.blocks.modified.length}`));
     parts.push(`\uBE14\uB85D ${detail.join(" ")}`);
   }
   if (settingChanges > 0) {
-    parts.push(`\uC124\uC815 ${chalk17.yellow(`~${settingChanges}`)}`);
+    parts.push(`\uC124\uC815 ${chalk18.yellow(`~${settingChanges}`)}`);
   }
   console.log(`  \uBCC0\uACBD \uAC10\uC9C0: ${parts.join(", ")}`);
   console.log("");
 }
 
+// src/commands/pattern.ts
+import chalk19 from "chalk";
+var V2_PATTERNS = [
+  { id: "v2-faq-accordion", name: "FAQ \uC544\uCF54\uB514\uC5B8", nameEn: "FAQ Accordion", category: "interactive", description: "\uB124\uC774\uD2F0\uBE0C details/summary \uAE30\uBC18 \uC811\uAE30/\uD3BC\uCE58\uAE30" },
+  { id: "v2-card-grid", name: "\uCE74\uB4DC \uADF8\uB9AC\uB4DC", nameEn: "Card Grid", category: "content", description: "repeat \uAE30\uBC18 \uCE74\uB4DC \uB808\uC774\uC544\uC6C3" },
+  { id: "v2-image-gallery", name: "\uC774\uBBF8\uC9C0 \uAC24\uB7EC\uB9AC", nameEn: "Image Gallery", category: "content", description: "\uADF8\uB9AC\uB4DC + \uB77C\uC774\uD2B8\uBC15\uC2A4" },
+  { id: "v2-tabs", name: "\uD0ED", nameEn: "Tabs", category: "interactive", description: "exclusive \uD328\uB110 \uC804\uD658" },
+  { id: "v2-contact-form", name: "\uC5F0\uB77D\uCC98 \uD3FC", nameEn: "Contact Form", category: "form", description: "input-block + form behavior" },
+  { id: "v2-image-slider", name: "\uC774\uBBF8\uC9C0 \uC2AC\uB77C\uC774\uB354", nameEn: "Image Slider", category: "hero", description: "CSS scroll-snap \uCE90\uB7EC\uC140" },
+  { id: "v2-testimonials", name: "\uACE0\uAC1D \uD6C4\uAE30", nameEn: "Testimonials", category: "social", description: "\uCE74\uB4DC \uADF8\uB9AC\uB4DC \uCD94\uCC9C\uC0AC" },
+  { id: "v2-newsletter", name: "\uB274\uC2A4\uB808\uD130 \uAD6C\uB3C5", nameEn: "Newsletter", category: "marketing", description: "\uC774\uBA54\uC77C \uC785\uB825 + \uAD6C\uB3C5 \uBC84\uD2BC" },
+  { id: "v2-stats-counter", name: "\uD1B5\uACC4 \uCE74\uC6B4\uD130", nameEn: "Stats Counter", category: "social", description: "\uC22B\uC790 \uD1B5\uACC4 \uAC15\uC870" },
+  { id: "v2-naver-map", name: "\uC9C0\uB3C4", nameEn: "Map", category: "content", description: "embed-block \uAE30\uBC18 \uC9C0\uB3C4" }
+];
+var V1_PATTERNS = [
+  { id: "hero", name: "\uD788\uC5B4\uB85C", nameEn: "Hero", category: "hero", description: "\uD788\uC5B4\uB85C \uC139\uC158 (3 \uB808\uC774\uC544\uC6C3)" },
+  { id: "cta-banner", name: "CTA \uBC30\uB108", nameEn: "CTA Banner", category: "marketing", description: "\uC561\uC158 \uC720\uB3C4 \uBC30\uB108" },
+  { id: "feature-grid", name: "\uAE30\uB2A5 \uADF8\uB9AC\uB4DC", nameEn: "Feature Grid", category: "content", description: "\uAE30\uB2A5 \uC18C\uAC1C \uCE74\uB4DC" },
+  { id: "pricing-table", name: "\uAC00\uACA9\uD45C", nameEn: "Pricing Table", category: "marketing", description: "\uAC00\uACA9 \uBE44\uAD50 \uD14C\uC774\uBE14" },
+  { id: "team-profile", name: "\uD300 \uC18C\uAC1C", nameEn: "Team Profile", category: "team", description: "\uD300\uC6D0 \uD504\uB85C\uD544 \uCE74\uB4DC" }
+];
+async function commandPatterns(options) {
+  if (options?.public) {
+    const apiBaseUrl = await getApiBaseUrl();
+    const apiKey = await resolveApiKey();
+    const client = new SaeroonApiClient(apiKey, apiBaseUrl);
+    const fetchSpinner = spinner("\uACF5\uAC1C \uD328\uD134\uC744 \uC870\uD68C\uD558\uB294 \uC911...");
+    try {
+      const result = await client.getPublicPatterns({
+        category: options.role,
+        search: options.search,
+        sort: "popular",
+        pageSize: 50
+      });
+      fetchSpinner.stop(chalk19.green(`${result.total}\uAC1C\uC758 \uACF5\uAC1C \uD328\uD134\uC744 \uC870\uD68C\uD588\uC2B5\uB2C8\uB2E4.`));
+      if (result.data.length === 0) {
+        console.log(chalk19.gray("\n  \uACF5\uAC1C \uD328\uD134\uC774 \uC5C6\uC2B5\uB2C8\uB2E4.\n"));
+        return;
+      }
+      console.log("");
+      console.log(
+        `  ${chalk19.gray("ID".padEnd(10))} ${"\uC774\uB984".padEnd(18)} ${chalk19.gray("\uCE74\uD14C\uACE0\uB9AC".padEnd(12))} ${chalk19.gray("\uC0AC\uC6A9")} ${chalk19.gray("\uC791\uC131\uC790")}`
+      );
+      console.log(chalk19.gray("  " + "-".repeat(70)));
+      for (const p of result.data) {
+        const shortId = p.id.substring(0, 8);
+        console.log(
+          `  ${chalk19.cyan(shortId.padEnd(10))} ${p.name.padEnd(18)} ${chalk19.gray(p.category.padEnd(12))} ${chalk19.yellow(String(p.usageCount).padEnd(4))} ${chalk19.gray(p.authorName ?? "")}`
+        );
+      }
+      console.log(chalk19.gray(`
+  Fork: npx @saeroon/cli fork-pattern <pattern-id> --site-id <site-id>
+`));
+    } catch (error) {
+      fetchSpinner.stop(
+        chalk19.red(`\uACF5\uAC1C \uD328\uD134 \uC870\uD68C \uC2E4\uD328: ${error instanceof Error ? error.message : String(error)}`)
+      );
+      process.exit(1);
+    }
+    return;
+  }
+  console.log(chalk19.bold("\n  V2 Patterns:\n"));
+  const patterns = options?.role ? V2_PATTERNS.filter((p) => p.category === options.role) : V2_PATTERNS;
+  for (const p of patterns) {
+    console.log(`  ${chalk19.cyan(p.id.padEnd(24))} ${p.name.padEnd(12)} ${chalk19.gray(p.description)}`);
+  }
+  console.log(chalk19.bold("\n  V1 Patterns (legacy):\n"));
+  for (const p of V1_PATTERNS) {
+    console.log(`  ${chalk19.gray(p.id.padEnd(24))} ${p.name.padEnd(12)} ${chalk19.gray(p.description)}`);
+  }
+  console.log(chalk19.gray(`
+  \uCD1D ${V2_PATTERNS.length + V1_PATTERNS.length}\uAC1C \uB0B4\uC7A5 \uD328\uD134`));
+  console.log(chalk19.gray(`  \uACF5\uAC1C \uD328\uD134 \uC870\uD68C: npx @saeroon/cli patterns --public
+`));
+}
+async function commandAddPattern(patternId) {
+  const pattern = V2_PATTERNS.find((p) => p.id === patternId) || V1_PATTERNS.find((p) => p.id === patternId);
+  if (!pattern) {
+    console.error(chalk19.red(`Pattern "${patternId}" not found.`));
+    console.log(chalk19.gray("\uC0AC\uC6A9 \uAC00\uB2A5\uD55C \uD328\uD134: " + [...V2_PATTERNS, ...V1_PATTERNS].map((p) => p.id).join(", ")));
+    process.exit(1);
+  }
+  console.log(chalk19.cyan(`
+  Pattern: ${pattern.name} (${pattern.nameEn})`));
+  console.log(chalk19.gray(`   Category: ${pattern.category}`));
+  console.log(chalk19.gray(`   ${pattern.description}`));
+  console.log(chalk19.yellow("\n   \uD328\uD134 \uC0BD\uC785\uC740 \uC5D0\uB514\uD130 \uB610\uB294 MCP\uC5D0\uC11C \uC2E4\uD589\uD558\uC138\uC694."));
+  console.log(chalk19.gray("   MCP: get_pattern \u2192 \uC2A4\uD0A4\uB9C8 JSON \uBC18\uD658\n"));
+}
+async function commandForkPattern(patternId, options) {
+  if (!options.siteId) {
+    console.error(chalk19.red("--site-id \uC635\uC158\uC774 \uD544\uC694\uD569\uB2C8\uB2E4."));
+    process.exit(1);
+  }
+  const apiBaseUrl = await getApiBaseUrl();
+  const apiKey = await resolveApiKey();
+  const client = new SaeroonApiClient(apiKey, apiBaseUrl);
+  const forkSpinner = spinner("\uACF5\uAC1C \uD328\uD134\uC744 Fork\uD558\uB294 \uC911...");
+  try {
+    await client.forkPublicPattern(patternId, options.siteId);
+    forkSpinner.stop(chalk19.green(`\uD328\uD134\uC774 \uC0AC\uC774\uD2B8 ${options.siteId}\uB85C Fork\uB418\uC5C8\uC2B5\uB2C8\uB2E4.`));
+  } catch (error) {
+    forkSpinner.stop(
+      chalk19.red(`Fork \uC2E4\uD328: ${error instanceof Error ? error.message : String(error)}`)
+    );
+    process.exit(1);
+  }
+}
+
 // src/index.ts
 var require2 = createRequire(import.meta.url);
 var { version } = require2("../package.json");
@@ -4580,9 +5455,13 @@ program.command("init").description("\uD504\uB85C\uC81D\uD2B8 \uCD08\uAE30\uD654
 program.command("preview").description("\uC2A4\uD0A4\uB9C8 \uD30C\uC77C\uC744 \uAC10\uC2DC\uD558\uACE0 \uC2E4\uC2DC\uAC04 \uD504\uB9AC\uBDF0 \uC81C\uACF5").argument("[schema-path]", "\uC2A4\uD0A4\uB9C8 JSON \uD30C\uC77C \uACBD\uB85C", "schema.json").option("--api-key <key>", "API Key").option("--device <device>", "\uD504\uB9AC\uBDF0 \uB514\uBC14\uC774\uC2A4: mobile|tablet|desktop", "desktop").option("--mode <mode>", "\uD504\uB9AC\uBDF0 \uBAA8\uB4DC: rest|ws", "rest").action(commandPreview);
 program.command("validate").description("\uC2A4\uD0A4\uB9C8 \uC720\uD6A8\uC131 \uAC80\uC99D + \uD488\uC9C8 \uC810\uC218 \uD655\uC778").argument("[schema-path]", "\uAC80\uC99D\uD560 \uC2A4\uD0A4\uB9C8 JSON \uD30C\uC77C \uACBD\uB85C", "schema.json").option("--api-key <key>", "API Key").option("--local", "\uB85C\uCEEC \uAC80\uC99D\uB9CC \uC218\uD589 (\uB124\uD2B8\uC6CC\uD06C \uBD88\uD544\uC694)").action(commandValidate);
 program.command("blocks").description("\uBE14\uB85D \uCE74\uD0C8\uB85C\uADF8 \uC870\uD68C").argument("[block-type]", "\uD2B9\uC815 \uBE14\uB85D \uD0C0\uC785 \uC0C1\uC138 \uC870\uD68C").action(commandBlocks);
+program.command("patterns").description("\uD328\uD134 \uCE74\uD0C8\uB85C\uADF8 \uC870\uD68C").option("--role <category>", "\uCE74\uD14C\uACE0\uB9AC \uD544\uD130").option("--public", "\uACF5\uAC1C \uD328\uD134 \uBAA9\uB85D \uC870\uD68C (API)").option("--search <query>", "\uD328\uD134 \uAC80\uC0C9 (--public\uACFC \uD568\uAED8 \uC0AC\uC6A9)").action(commandPatterns);
+program.command("add-pattern").description("\uC2A4\uD0A4\uB9C8\uC5D0 \uD328\uD134 \uC0BD\uC785 (\uC5D0\uB514\uD130/MCP \uC5F0\uB3D9)").argument("<pattern-id>", "\uC0BD\uC785\uD560 \uD328\uD134 ID").action(commandAddPattern);
+program.command("fork-pattern").description("\uACF5\uAC1C \uD328\uD134\uC744 \uB0B4 \uC0AC\uC774\uD2B8\uB85C \uD3EC\uD06C").argument("<pattern-id>", "\uD3EC\uD06C\uD560 \uACF5\uAC1C \uD328\uD134 ID").requiredOption("--site-id <id>", "\uB300\uC0C1 \uC0AC\uC774\uD2B8 ID").action(commandForkPattern);
 program.command("add").description("schema.json\uC5D0 \uBE14\uB85D \uCD94\uAC00 (\uAE30\uBCF8 props \uD3EC\uD568)").argument("<block-type>", "\uCD94\uAC00\uD560 \uBE14\uB85D \uD0C0\uC785 (e.g., heading-block, image-block)").option("--id <id>", "\uBE14\uB85D ID (\uBBF8\uC9C0\uC815 \uC2DC \uC790\uB3D9 \uC0DD\uC131)").option("--parent <parentId>", "\uBD80\uBAA8 \uBE14\uB85D ID").option("--after <siblingId>", "\uC0BD\uC785 \uC704\uCE58 (\uD615\uC81C \uBE14\uB85D \uB4A4)").option("--page <pageId>", "\uB300\uC0C1 \uD398\uC774\uC9C0 ID").action(commandAdd);
 program.command("generate").description("AI\uB85C \uC0AC\uC774\uD2B8 \uC2A4\uD0A4\uB9C8 \uC0DD\uC131").option("--ref <url>", "\uB808\uD37C\uB7F0\uC2A4 URL (\uC0AC\uC774\uD2B8\uB97C \uBD84\uC11D\uD558\uC5EC \uC720\uC0AC\uD55C \uC2A4\uD0A4\uB9C8 \uC0DD\uC131)").option("--prompt <text>", "\uD504\uB86C\uD504\uD2B8 \uD14D\uC2A4\uD2B8 (\uC124\uBA85 \uAE30\uBC18 \uC0DD\uC131)").option("--output <file>", "\uCD9C\uB825 \uD30C\uC77C \uACBD\uB85C", "schema.json").option("--api-key <key>", "API Key").action(commandGenerate);
-program.command("compare").description("\uB808\uD37C\uB7F0\uC2A4 \u2194 \uD504\uB9AC\uBDF0 \uC2DC\uAC01 \uBE44\uAD50 (Playwright \uC2A4\uD06C\uB9B0\uC0F7)").option("--ref <url>", "\uB808\uD37C\uB7F0\uC2A4 URL").option("--preview <url>", "\uD504\uB9AC\uBDF0 URL").option("--output <file>", "\uCD9C\uB825 \uD30C\uC77C \uACBD\uB85C", "compare-result.png").option("--width <px>", "\uBDF0\uD3EC\uD2B8 \uB108\uBE44", "1280").option("--height <px>", "\uBDF0\uD3EC\uD2B8 \uB192\uC774", "800").action(commandCompare);
+program.command("analyze").description("\uB808\uD37C\uB7F0\uC2A4 URL \uBD84\uC11D (\uC2A4\uD06C\uB9B0\uC0F7 4\uC7A5 + DOM/CSS \uCD94\uCD9C + \uC778\uD130\uB799\uC158 \uAC10\uC9C0)").argument("<url>", "\uBD84\uC11D\uD560 \uB808\uD37C\uB7F0\uC2A4 URL").option("--output-dir <dir>", "\uBD84\uC11D \uACB0\uACFC \uCD9C\uB825 \uB514\uB809\uD1A0\uB9AC").option("--timeout <ms>", "\uD398\uC774\uC9C0 \uB85C\uB4DC \uD0C0\uC784\uC544\uC6C3 (ms)", "30000").action(commandAnalyze);
+program.command("compare").description("\uB808\uD37C\uB7F0\uC2A4 \u2194 \uD504\uB9AC\uBDF0 \uC2DC\uAC01 \uBE44\uAD50 (Playwright \uC2A4\uD06C\uB9B0\uC0F7)").option("--ref <url>", "\uB808\uD37C\uB7F0\uC2A4 URL").option("--preview <url>", "\uD504\uB9AC\uBDF0 URL").option("--output <file>", "\uCD9C\uB825 \uD30C\uC77C \uACBD\uB85C (\uB2E8\uC77C \uBDF0\uD3EC\uD2B8)", "compare-result.png").option("--output-dir <dir>", "\uCD9C\uB825 \uB514\uB809\uD1A0\uB9AC (\uBA40\uD2F0 \uBDF0\uD3EC\uD2B8)").option("--width <px>", "\uBDF0\uD3EC\uD2B8 \uB108\uBE44 (\uB2E8\uC77C \uBAA8\uB4DC)", "1280").option("--height <px>", "\uBDF0\uD3EC\uD2B8 \uB192\uC774 (\uB2E8\uC77C \uBAA8\uB4DC)", "800").option("--viewports <list>", "\uBE44\uAD50 \uBDF0\uD3EC\uD2B8: all | mobile,tablet,laptop,desktop").action(commandCompare);
 program.command("upload").description("\uC774\uBBF8\uC9C0\uB97C Saeroon CDN\uC5D0 \uC5C5\uB85C\uB4DC").argument("<path>", "\uC5C5\uB85C\uB4DC\uD560 \uD30C\uC77C \uB610\uB294 \uB514\uB809\uD1A0\uB9AC \uACBD\uB85C").option("--replace-in <file>", "\uC5C5\uB85C\uB4DC \uD6C4 \uD30C\uC77C \uB0B4 \uB85C\uCEEC \uACBD\uB85C\uB97C CDN URL\uB85C \uAD50\uCCB4").option("--site-id <id>", "\uC0AC\uC774\uD2B8 ID").option("--api-key <key>", "API Key").action(commandUpload);
 program.command("deploy").description("\uC0AC\uC774\uD2B8\uC5D0 \uC2A4\uD0A4\uB9C8 \uBC30\uD3EC").option("--api-key <key>", "API Key").option("--target <target>", "\uBC30\uD3EC \uB300\uC0C1: staging|production", "staging").option("--dry-run", "\uC2E4\uC81C \uC5C5\uB85C\uB4DC/\uBC30\uD3EC \uC5C6\uC774 \uC5D0\uC14B \uB9AC\uD3EC\uD2B8\uB9CC \uCD9C\uB825").option("--sync-template", "Production \uBC30\uD3EC \uD6C4 \uB9C8\uCF13\uD50C\uB808\uC774\uC2A4 \uD15C\uD50C\uB9BF \uBC84\uC804 \uC790\uB3D9 \uB3D9\uAE30\uD654").action(commandDeploy);
 program.command("publish").description("[deprecated] \uB9C8\uCF13\uD50C\uB808\uC774\uC2A4\uC5D0 \uD15C\uD50C\uB9BF \uB4F1\uB85D \u2192 saeroon template register \uC0AC\uC6A9").argument("[schema-path]", "\uC81C\uCD9C\uD560 \uC2A4\uD0A4\uB9C8 JSON \uD30C\uC77C \uACBD\uB85C", "schema.json").option("--api-key <key>", "API Key").action(commandPublish);