@saeroon/cli 0.2.2 → 0.2.4

package/dist/index.js

@@ -98,6 +98,12 @@ async function getApiBaseUrl() {
   const url = config.apiBaseUrl || DEFAULT_API_BASE_URL;
   return validateApiBaseUrl(url);
 }
+async function resolvePexelsApiKey() {
+  const envKey = process.env.PEXELS_API_KEY;
+  if (envKey) return envKey;
+  const config = await loadConfig();
+  return config.pexelsApiKey ?? null;
+}
 var PRIVATE_IP_PATTERNS = [
   /^10\./,
   /^172\.(1[6-9]|2\d|3[01])\./,
@@ -388,7 +394,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
     );
   }
@@ -2095,7 +2101,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: {
@@ -2103,7 +2109,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)
@@ -2122,7 +2128,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;
@@ -2136,7 +2142,7 @@ var PreviewClient = class {
         this.retryCount = 0;
         this.options.onStatusChange?.(true);
         this.startPingInterval();
-        resolve13();
+        resolve15();
       });
       ws.on("message", (data) => {
         this.handleMessage(data);
@@ -2468,88 +2474,63 @@ async function commandPreview(schemaPath, options) {
 import chalk8 from "chalk";
 
 // src/lib/local-validator.ts
+var ELEMENT_TYPE_PROPS = {
+  "heading-block.level": {
+    validValues: /* @__PURE__ */ new Set(["h1", "h2", "h3", "h4", "h5", "h6"]),
+    coerce: (v) => typeof v === "number" && v >= 1 && v <= 6 ? `h${v}` : null
+  },
+  "container.semanticTag": {
+    validValues: /* @__PURE__ */ new Set([
+      "section",
+      "article",
+      "aside",
+      "figure",
+      "figcaption",
+      "ul",
+      "ol",
+      "li",
+      "dl",
+      "dt",
+      "dd",
+      "table",
+      "thead",
+      "tbody",
+      "tfoot",
+      "tr",
+      "td",
+      "th",
+      "details",
+      "summary",
+      "dialog",
+      "form",
+      "fieldset",
+      "legend",
+      "nav",
+      "main",
+      "header",
+      "footer",
+      "address",
+      "blockquote",
+      "pre",
+      "code",
+      "progress",
+      "meter"
+    ]),
+    coerce: () => null
+  }
+};
 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",
@@ -2557,20 +2538,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 = [];
@@ -2579,37 +2552,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;
@@ -2674,6 +2644,42 @@ function validateSchemaLocal(schema) {
           step: 2
         });
       }
+      const props = block.props;
+      if (props) {
+        for (const [key, rule] of Object.entries(ELEMENT_TYPE_PROPS)) {
+          const [targetType, propName] = key.split(".");
+          if (blockType !== targetType) continue;
+          const value = props[propName];
+          if (value == null) continue;
+          if (typeof value === "string") {
+            if (!rule.validValues.has(value)) {
+              errors.push({
+                severity: "error",
+                message: `\uBE14\uB85D "${blockId}": ${propName} \uAC12 "${value}"\uC774(\uAC00) \uC720\uD6A8\uD558\uC9C0 \uC54A\uC2B5\uB2C8\uB2E4. \uD5C8\uC6A9: ${[...rule.validValues].join(", ")}`,
+                path: `${blockPath}.props.${propName}`,
+                step: 2
+              });
+            }
+          } else {
+            const coerced = rule.coerce?.(value);
+            if (coerced && rule.validValues.has(coerced)) {
+              errors.push({
+                severity: "warning",
+                message: `\uBE14\uB85D "${blockId}": ${propName} \uAC12 ${JSON.stringify(value)}\uC740(\uB294) \uBB38\uC790\uC5F4\uC774\uC5B4\uC57C \uD569\uB2C8\uB2E4. "${coerced}"\uB85C \uBCC0\uD658\uD558\uC138\uC694. (\uB80C\uB354\uB9C1 \uD06C\uB798\uC2DC \uC704\uD5D8)`,
+                path: `${blockPath}.props.${propName}`,
+                step: 2
+              });
+            } else {
+              errors.push({
+                severity: "error",
+                message: `\uBE14\uB85D "${blockId}": ${propName} \uAC12 ${JSON.stringify(value)}\uC740(\uB294) \uC720\uD6A8\uD558\uC9C0 \uC54A\uC2B5\uB2C8\uB2E4. \uBB38\uC790\uC5F4\uC774\uC5B4\uC57C \uD558\uBA70 \uD5C8\uC6A9: ${[...rule.validValues].join(", ")}`,
+                path: `${blockPath}.props.${propName}`,
+                step: 2
+              });
+            }
+          }
+        }
+      }
       if (block.children && Array.isArray(block.children)) {
         for (const childId of block.children) {
           if (typeof childId === "string" && !blocks[childId]) {
@@ -2923,11 +2929,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));
   });
 }
@@ -2976,14 +2982,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++;
@@ -3905,77 +3911,1183 @@ 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, writeFile as writeFile8 } 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. Videos \u2500\u2500
+  const videoEls = document.querySelectorAll('video, iframe[src*="youtube"], iframe[src*="youtu.be"], iframe[src*="vimeo"], iframe[data-src*="youtube"], iframe[data-src*="vimeo"]');
+  const videos = [];
+
+  videoEls.forEach(el => {
+    const tag = el.tagName.toLowerCase();
+    let src = '';
+    let type = 'inline';
+    let platform = 'unknown';
+    let autoplay = false;
+    let loop = false;
+    let muted = false;
+    let posterSrc = '';
+
+    if (tag === 'video') {
+      src = el.src || el.querySelector('source')?.src || el.dataset.src || '';
+      posterSrc = el.poster || '';
+      autoplay = el.hasAttribute('autoplay');
+      loop = el.hasAttribute('loop');
+      muted = el.hasAttribute('muted');
+      platform = 'direct';
+
+      // background \uBE44\uB514\uC624 \uD310\uC815: autoplay+muted+loop \uB610\uB294 CSS\uB85C \uBC30\uACBD \uCC98\uB9AC\uB41C \uACBD\uC6B0
+      if ((autoplay && muted) || el.closest('[class*=hero], [class*=banner], [class*=bg-video], [class*=video-bg], [class*=background]')) {
+        type = 'background';
+      }
+    } else if (tag === 'iframe') {
+      src = el.src || el.dataset.src || '';
+      if (/youtube.com|youtu.be/.test(src)) {
+        platform = 'youtube';
+        type = 'embed';
+        // YouTube autoplay \uD30C\uB77C\uBBF8\uD130 \uAC10\uC9C0
+        autoplay = /autoplay=1/.test(src);
+        muted = /mute=1/.test(src);
+        loop = /loop=1/.test(src);
+        // YouTube thumbnail \uCD94\uCD9C
+        const ytMatch = src.match(/(?:embed\\/|v=|youtu\\.be\\/)([a-zA-Z0-9_-]{11})/);
+        if (ytMatch) posterSrc = 'https://img.youtube.com/vi/' + ytMatch[1] + '/hqdefault.jpg';
+      } else if (/vimeo.com/.test(src)) {
+        platform = 'vimeo';
+        type = 'embed';
+        autoplay = /autoplay=1/.test(src);
+        muted = /muted=1/.test(src);
+        loop = /loop=1/.test(src);
+      }
+    }
+
+    if (!src) return;
+
+    const rect = el.getBoundingClientRect();
+    const width = Math.round(rect.width) || 0;
+    const height = Math.round(rect.height) || 0;
+
+    // \uBD80\uBAA8 \uC139\uC158 \uC5ED\uD560 \uCD94\uB860
+    const parentSection = el.closest('section, header, footer, main, [class*=hero], [class*=banner]');
+    const position = parentSection ? inferSectionRole(parentSection) : 'unknown';
+
+    // \uC8FC\uBCC0 \uD14D\uC2A4\uD2B8\uC5D0\uC11C \uB9E5\uB77D \uCD94\uCD9C
+    const nearby = (el.parentElement?.textContent || '').trim().slice(0, 150);
+    const title = el.getAttribute('title') || el.getAttribute('aria-label') || '';
+    const context = (title || nearby).slice(0, 150);
+
+    // background \uBE44\uB514\uC624 \uC911 full-width\uC778 \uACBD\uC6B0 \uBCF4\uAC15
+    if (type === 'inline' && width > window.innerWidth * 0.9 && height > 300) {
+      type = 'background';
+    }
+
+    videos.push({
+      src: src.slice(0, 500),
+      type,
+      platform,
+      aspectRatio: guessAspectRatio(width, height),
+      posterSrc: posterSrc.slice(0, 500),
+      position,
+      context: context.slice(0, 150),
+      autoplay,
+      loop,
+      muted,
+    });
+  });
+
+  // \u2500\u2500 6. Gaps (V2 \uBE14\uB85D\uC73C\uB85C \uB9E4\uD551 \uBD88\uAC00\uB2A5\uD55C \uAE30\uB2A5) \u2500\u2500
+  const gaps = [];
+
+  // video background (\uBE44\uB514\uC624 \uAC10\uC9C0\uB294 \uC139\uC158 5\uC5D0\uC11C \uCC98\uB9AC, gap\uC5D0\uB294 \uBBF8\uC9C0\uC6D0 \uD328\uD134\uB9CC \uAE30\uB85D)
+  const hasScrollScrubVideo = document.querySelector('video[data-scroll-scrub], [class*=scroll-video]');
+  if (hasScrollScrubVideo) {
+    gaps.push('video-scroll-scrub: \uC2A4\uD06C\uB864 \uC5F0\uB3D9 \uBE44\uB514\uC624 \uC7AC\uC0DD (scroll scrub)');
+  }
+  // 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,
+    videos,
+    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: [],
+    videos: [],
+    gaps: []
+  };
+}
+
+// src/lib/pexels-client.ts
+var PexelsClient = class {
+  apiKey;
+  baseUrl = "https://api.pexels.com/videos";
+  constructor(apiKey) {
+    this.apiKey = apiKey;
+  }
+  /**
+   * 키워드로 비디오를 검색합니다.
+   */
+  async searchVideos(options) {
+    const params = new URLSearchParams({
+      query: options.query,
+      per_page: String(options.perPage ?? 1)
+    });
+    if (options.orientation) params.set("orientation", options.orientation);
+    if (options.minDuration) params.set("min_duration", String(options.minDuration));
+    if (options.maxDuration) params.set("max_duration", String(options.maxDuration));
+    const url = `${this.baseUrl}/search?${params}`;
+    const res = await fetch(url, {
+      headers: { Authorization: this.apiKey }
+    });
+    if (!res.ok) {
+      if (res.status === 429) {
+        throw new Error("Pexels API rate limit \uCD08\uACFC. \uC7A0\uC2DC \uD6C4 \uB2E4\uC2DC \uC2DC\uB3C4\uD558\uC138\uC694.");
+      }
+      throw new Error(`Pexels API \uC624\uB958: ${res.status} ${res.statusText}`);
+    }
+    return res.json();
+  }
+  /**
+   * 키워드로 비디오를 검색하여 최적의 파일 URL을 반환합니다.
+   *
+   * 선택 기준:
+   * 1. HD 품질 우선 (sd < hd < uhd)
+   * 2. mp4 파일 타입 우선
+   * 3. 가로형(landscape) 기본 선호
+   */
+  async findVideo(options) {
+    const response = await this.searchVideos(options);
+    if (response.videos.length === 0) return null;
+    const video = response.videos[0];
+    const file = pickBestFile(video.video_files);
+    if (!file) return null;
+    return {
+      src: file.link,
+      poster: video.image,
+      pexelsUrl: video.url,
+      width: file.width,
+      height: file.height,
+      duration: video.duration
+    };
+  }
+  /**
+   * 여러 키워드를 순차적으로 시도하여 첫 번째 매칭되는 비디오를 반환합니다.
+   * 업종 키워드 → 일반 키워드 순으로 fallback.
+   */
+  async findVideoWithFallback(queries, options) {
+    for (const query of queries) {
+      const result = await this.findVideo({ ...options, query });
+      if (result) return result;
+    }
+    return null;
+  }
+};
+var QUALITY_RANK = { sd: 0, hd: 1, uhd: 2 };
+function pickBestFile(files) {
+  const mp4Files = files.filter((f) => f.file_type === "video/mp4");
+  const pool = mp4Files.length > 0 ? mp4Files : files;
+  return pool.sort((a, b) => {
+    const qualityDiff = (QUALITY_RANK[b.quality] ?? 0) - (QUALITY_RANK[a.quality] ?? 0);
+    if (qualityDiff !== 0) return qualityDiff;
+    if (a.quality === "uhd" && b.quality !== "uhd") return 1;
+    if (b.quality === "uhd" && a.quality !== "uhd") return -1;
+    return b.width * b.height - a.width * a.height;
+  })[0];
+}
+function buildVideoSearchQueries(industry, sectionRole, videoType) {
+  const queries = [];
+  const industryKeywords = {
+    // 외식
+    cafe: ["cafe interior", "coffee shop", "barista coffee"],
+    restaurant: ["restaurant kitchen", "dining food", "chef cooking"],
+    bakery: ["bakery bread", "pastry baking", "fresh bread"],
+    bar: ["cocktail bar", "bartender mixing", "bar nightlife"],
+    // 뷰티/건강
+    salon: ["hair salon", "beauty salon", "hairdresser styling"],
+    spa: ["spa massage", "wellness relaxation", "spa treatment"],
+    gym: ["fitness gym", "workout training", "gym exercise"],
+    clinic: ["medical clinic", "healthcare professional", "doctor clinic"],
+    dental: ["dental clinic", "dentist office", "dental care"],
+    dermatology: ["skincare treatment", "dermatology clinic", "skin care"],
+    // 전문 서비스
+    law: ["law office", "legal professional", "law firm"],
+    accounting: ["accounting office", "financial planning", "business meeting"],
+    consulting: ["business consulting", "corporate meeting", "professional office"],
+    realestate: ["real estate", "property tour", "house interior"],
+    // 교육
+    academy: ["classroom learning", "education study", "student learning"],
+    kindergarten: ["children playing", "kids education", "nursery school"],
+    // 소매/서비스
+    shop: ["retail store", "shopping", "product display"],
+    flower: ["flower arrangement", "florist shop", "floral bouquet"],
+    pet: ["pet grooming", "pet care", "cute animals"],
+    cleaning: ["cleaning service", "professional cleaning", "clean home"],
+    moving: ["moving service", "packing boxes", "new home"],
+    // 테크
+    tech: ["technology innovation", "digital workspace", "coding computer"],
+    saas: ["software dashboard", "digital technology", "cloud computing"],
+    startup: ["startup team", "innovation workspace", "creative office"]
+  };
+  const keywords = industryKeywords[industry] ?? [`${industry} professional`, `${industry} business`];
+  if (videoType === "background") {
+    queries.push(...keywords);
+    if (sectionRole === "hero") {
+      queries.push(`${industry} aerial`, `${industry} cinematic`);
+    }
+    queries.push("abstract background loop", "minimal background");
+  } else {
+    if (sectionRole === "hero") {
+      queries.push(...keywords);
+    } else if (sectionRole === "features" || sectionRole === "gallery") {
+      queries.push(...keywords.slice(0, 2));
+    } else if (sectionRole === "testimonials") {
+      queries.push("people talking", "customer interview");
+    } else {
+      queries.push(...keywords.slice(0, 1));
+    }
+    queries.push(`${industry} video`);
+  }
+  return queries;
+}
+
+// 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`));
+    });
+    console.log("");
+    console.log(chalk15.bold("\uBE44\uB514\uC624"));
+    if (analysis.videos.length > 0) {
+      const typeCount = {};
+      analysis.videos.forEach((v) => {
+        typeCount[v.type] = (typeCount[v.type] || 0) + 1;
+      });
+      console.log(chalk15.dim(`  \uCD1D ${analysis.videos.length}\uAC1C \uAC10\uC9C0`));
+      Object.entries(typeCount).forEach(([type, count]) => {
+        console.log(chalk15.dim(`    ${type}: ${count}\uAC1C`));
+      });
+      const pexelsApiKey = await resolvePexelsApiKey();
+      if (pexelsApiKey) {
+        const videoSpinner = spinner("Pexels\uC5D0\uC11C \uC2A4\uD1A1 \uBE44\uB514\uC624 \uAC80\uC0C9 \uC911...");
+        try {
+          const pexels = new PexelsClient(pexelsApiKey);
+          const industry = options.industry ?? inferIndustry(analysis);
+          const resolved = await resolveVideos(pexels, analysis.videos, industry);
+          videoSpinner.stop(chalk15.green(`  ${resolved.length}/${analysis.videos.length}\uAC1C \uC2A4\uD1A1 \uBE44\uB514\uC624 \uB9E4\uCE6D \uC644\uB8CC`));
+          resolved.forEach(({ video, stock }) => {
+            console.log(chalk15.dim(`    [${video.type}] ${video.position} \u2192 ${stock.src.slice(0, 80)}...`));
+          });
+          const videoMapPath = join2(outputDir, "video-stock-map.json");
+          await writeFile8(videoMapPath, JSON.stringify(resolved, null, 2), "utf-8");
+          console.log(chalk15.dim(`  \uB9E4\uCE6D \uACB0\uACFC: ${videoMapPath}`));
+        } catch (error) {
+          videoSpinner.stop(chalk15.yellow("  Pexels \uAC80\uC0C9 \uC2E4\uD328 (\uBE44\uB514\uC624\uB294 \uC218\uB3D9 \uAD50\uCCB4 \uD544\uC694)"));
+          console.log(chalk15.dim(`    ${error instanceof Error ? error.message : String(error)}`));
+        }
+      } else {
+        console.log(chalk15.dim("  PEXELS_API_KEY \uBBF8\uC124\uC815 \u2192 \uC2A4\uD1A1 \uBE44\uB514\uC624 \uC790\uB3D9 \uB9E4\uCE6D \uAC74\uB108\uB700"));
+        console.log(chalk15.dim("  \uC124\uC815: PEXELS_API_KEY \uD658\uACBD\uBCC0\uC218 \uB610\uB294 .saeroon/config.json\uC758 pexelsApiKey"));
+      }
+    } else {
+      console.log(chalk15.dim("  \uBE44\uB514\uC624 \uC5C6\uC74C"));
+    }
+    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);
+  }
+}
+async function resolveVideos(pexels, videos, industry) {
+  const results = [];
+  for (const video of videos) {
+    const queries = buildVideoSearchQueries(industry, video.position, video.type);
+    const orientation = video.type === "background" ? "landscape" : void 0;
+    const maxDuration = video.type === "background" ? 30 : 60;
+    const stock = await pexels.findVideoWithFallback(queries, {
+      orientation,
+      maxDuration
+    });
+    if (stock) {
+      results.push({ video, stock });
+    }
+  }
+  return results;
+}
+function inferIndustry(analysis) {
+  const text = analysis.structure.headingHierarchy.join(" ").toLowerCase();
+  const roles = analysis.structure.sections.map((s) => s.role).join(" ");
+  const combined = text + " " + roles;
+  const industryPatterns = [
+    [/카페|coffee|cafe|커피/, "cafe"],
+    [/레스토랑|restaurant|맛집|음식점|식당/, "restaurant"],
+    [/베이커리|bakery|빵|제과/, "bakery"],
+    [/바|bar|칵테일|cocktail|pub/, "bar"],
+    [/미용|salon|헤어|hair|뷰티|beauty/, "salon"],
+    [/스파|spa|마사지|massage|웰니스/, "spa"],
+    [/피트니스|gym|헬스|fitness|운동/, "gym"],
+    [/병원|clinic|의원|진료|medical/, "clinic"],
+    [/치과|dental|dentist/, "dental"],
+    [/피부|derma|skin|에스테틱/, "dermatology"],
+    [/법률|law|변호사|attorney|법무/, "law"],
+    [/회계|accounting|세무|tax/, "accounting"],
+    [/컨설팅|consulting|자문/, "consulting"],
+    [/부동산|real\s*estate|property|공인중개/, "realestate"],
+    [/학원|academy|교육|education|학습/, "academy"],
+    [/어린이집|유치원|kindergarten|nursery/, "kindergarten"],
+    [/꽃|flower|florist|플라워/, "flower"],
+    [/반려|pet|동물|animal/, "pet"],
+    [/청소|cleaning|클리닝/, "cleaning"],
+    [/이사|moving|포장이사/, "moving"],
+    [/saas|software|플랫폼|platform/, "saas"],
+    [/startup|스타트업/, "startup"]
+  ];
+  for (const [pattern, industry] of industryPatterns) {
+    if (pattern.test(combined)) return industry;
+  }
+  return "business";
+}
+
+// src/commands/compare.ts
+import chalk16 from "chalk";
+import { writeFile as writeFile9, 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 writeFile9(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;
@@ -3983,14 +5095,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",
@@ -4013,7 +5125,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;
@@ -4137,53 +5249,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) {
@@ -4198,10 +5310,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);
   }
@@ -4209,8 +5321,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;
@@ -4223,16 +5335,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)}`
         )
       );
@@ -4244,7 +5356,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 = [
@@ -4265,26 +5377,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 ?? "";
@@ -4298,15 +5410,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) {
@@ -4323,7 +5435,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."));
             }
           }
         }
@@ -4350,22 +5462,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);
@@ -4374,22 +5486,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...");
@@ -4401,17 +5513,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 {
@@ -4419,10 +5531,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);
@@ -4432,22 +5544,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);
@@ -4468,10 +5580,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);
@@ -4480,9 +5592,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);
   }
@@ -4521,22 +5633,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;
@@ -4562,14 +5674,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 {
@@ -4577,10 +5689,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);
@@ -4593,27 +5705,27 @@ 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 chalk18 from "chalk";
+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" },
@@ -4646,64 +5758,64 @@ async function commandPatterns(options) {
         sort: "popular",
         pageSize: 50
       });
-      fetchSpinner.stop(chalk18.green(`${result.total}\uAC1C\uC758 \uACF5\uAC1C \uD328\uD134\uC744 \uC870\uD68C\uD588\uC2B5\uB2C8\uB2E4.`));
+      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(chalk18.gray("\n  \uACF5\uAC1C \uD328\uD134\uC774 \uC5C6\uC2B5\uB2C8\uB2E4.\n"));
+        console.log(chalk19.gray("\n  \uACF5\uAC1C \uD328\uD134\uC774 \uC5C6\uC2B5\uB2C8\uB2E4.\n"));
         return;
       }
       console.log("");
       console.log(
-        `  ${chalk18.gray("ID".padEnd(10))} ${"\uC774\uB984".padEnd(18)} ${chalk18.gray("\uCE74\uD14C\uACE0\uB9AC".padEnd(12))} ${chalk18.gray("\uC0AC\uC6A9")} ${chalk18.gray("\uC791\uC131\uC790")}`
+        `  ${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(chalk18.gray("  " + "-".repeat(70)));
+      console.log(chalk19.gray("  " + "-".repeat(70)));
       for (const p of result.data) {
         const shortId = p.id.substring(0, 8);
         console.log(
-          `  ${chalk18.cyan(shortId.padEnd(10))} ${p.name.padEnd(18)} ${chalk18.gray(p.category.padEnd(12))} ${chalk18.yellow(String(p.usageCount).padEnd(4))} ${chalk18.gray(p.authorName ?? "")}`
+          `  ${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(chalk18.gray(`
+      console.log(chalk19.gray(`
   Fork: npx @saeroon/cli fork-pattern <pattern-id> --site-id <site-id>
 `));
     } catch (error) {
       fetchSpinner.stop(
-        chalk18.red(`\uACF5\uAC1C \uD328\uD134 \uC870\uD68C \uC2E4\uD328: ${error instanceof Error ? error.message : String(error)}`)
+        chalk19.red(`\uACF5\uAC1C \uD328\uD134 \uC870\uD68C \uC2E4\uD328: ${error instanceof Error ? error.message : String(error)}`)
       );
       process.exit(1);
     }
     return;
   }
-  console.log(chalk18.bold("\n  V2 Patterns:\n"));
+  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(`  ${chalk18.cyan(p.id.padEnd(24))} ${p.name.padEnd(12)} ${chalk18.gray(p.description)}`);
+    console.log(`  ${chalk19.cyan(p.id.padEnd(24))} ${p.name.padEnd(12)} ${chalk19.gray(p.description)}`);
   }
-  console.log(chalk18.bold("\n  V1 Patterns (legacy):\n"));
+  console.log(chalk19.bold("\n  V1 Patterns (legacy):\n"));
   for (const p of V1_PATTERNS) {
-    console.log(`  ${chalk18.gray(p.id.padEnd(24))} ${p.name.padEnd(12)} ${chalk18.gray(p.description)}`);
+    console.log(`  ${chalk19.gray(p.id.padEnd(24))} ${p.name.padEnd(12)} ${chalk19.gray(p.description)}`);
   }
-  console.log(chalk18.gray(`
+  console.log(chalk19.gray(`
   \uCD1D ${V2_PATTERNS.length + V1_PATTERNS.length}\uAC1C \uB0B4\uC7A5 \uD328\uD134`));
-  console.log(chalk18.gray(`  \uACF5\uAC1C \uD328\uD134 \uC870\uD68C: npx @saeroon/cli patterns --public
+  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(chalk18.red(`Pattern "${patternId}" not found.`));
-    console.log(chalk18.gray("\uC0AC\uC6A9 \uAC00\uB2A5\uD55C \uD328\uD134: " + [...V2_PATTERNS, ...V1_PATTERNS].map((p) => p.id).join(", ")));
+    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(chalk18.cyan(`
+  console.log(chalk19.cyan(`
   Pattern: ${pattern.name} (${pattern.nameEn})`));
-  console.log(chalk18.gray(`   Category: ${pattern.category}`));
-  console.log(chalk18.gray(`   ${pattern.description}`));
-  console.log(chalk18.yellow("\n   \uD328\uD134 \uC0BD\uC785\uC740 \uC5D0\uB514\uD130 \uB610\uB294 MCP\uC5D0\uC11C \uC2E4\uD589\uD558\uC138\uC694."));
-  console.log(chalk18.gray("   MCP: get_pattern \u2192 \uC2A4\uD0A4\uB9C8 JSON \uBC18\uD658\n"));
+  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(chalk18.red("--site-id \uC635\uC158\uC774 \uD544\uC694\uD569\uB2C8\uB2E4."));
+    console.error(chalk19.red("--site-id \uC635\uC158\uC774 \uD544\uC694\uD569\uB2C8\uB2E4."));
     process.exit(1);
   }
   const apiBaseUrl = await getApiBaseUrl();
@@ -4712,10 +5824,10 @@ async function commandForkPattern(patternId, options) {
   const forkSpinner = spinner("\uACF5\uAC1C \uD328\uD134\uC744 Fork\uD558\uB294 \uC911...");
   try {
     await client.forkPublicPattern(patternId, options.siteId);
-    forkSpinner.stop(chalk18.green(`\uD328\uD134\uC774 \uC0AC\uC774\uD2B8 ${options.siteId}\uB85C Fork\uB418\uC5C8\uC2B5\uB2C8\uB2E4.`));
+    forkSpinner.stop(chalk19.green(`\uD328\uD134\uC774 \uC0AC\uC774\uD2B8 ${options.siteId}\uB85C Fork\uB418\uC5C8\uC2B5\uB2C8\uB2E4.`));
   } catch (error) {
     forkSpinner.stop(
-      chalk18.red(`Fork \uC2E4\uD328: ${error instanceof Error ? error.message : String(error)}`)
+      chalk19.red(`Fork \uC2E4\uD328: ${error instanceof Error ? error.message : String(error)}`)
     );
     process.exit(1);
   }
@@ -4737,7 +5849,8 @@ program.command("add-pattern").description("\uC2A4\uD0A4\uB9C8\uC5D0 \uD328\uD13
 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 + \uBE44\uB514\uC624 \uAC10\uC9C0 + \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").option("--industry <type>", "\uC5C5\uC885 (cafe, restaurant, salon, law \uB4F1 \u2014 \uBE44\uB514\uC624 \uAC80\uC0C9 \uD0A4\uC6CC\uB4DC\uC5D0 \uC0AC\uC6A9)").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);