@su-record/vibe 2.16.4 → 3.1.0

package/hooks/scripts/clone-extract.js

@@ -650,34 +650,139 @@ const TAB_CONTENT_FP = `(function (g) {
   return (root.innerText || '').replace(/\\s+/g, ' ').trim().slice(0, 4000);
 })`;
 
-const wait = (ms) => new Promise((r) => setTimeout(r, ms));
+// Hover diff props — 색/그림자/변형 등 호버에서 실제로 바뀌는 것들
+const HOVER_PROPS = [
+  'color', 'background-color', 'border-color', 'box-shadow',
+  'transform', 'opacity', 'text-decoration-line', 'filter', 'outline-width',
+];
 
-async function runInteractionSweep(page) {
-  const behaviors = { scroll: [], interactive: [] };
+// In-view 등장 애니메이션 diff props
+const INVIEW_PROPS = ['opacity', 'transform', 'visibility', 'filter', 'clip-path'];
 
-  // ── Scroll-triggered state (header/nav shrink, background, shadow on scroll) ──
-  const candidates = await page.evaluate(`(${TAG_SCROLL_CANDIDATES})()`);
-  if (candidates.length) {
-    const before = await page.evaluate(`(${SNAP_PROBES})(${JSON.stringify(BEHAVIOR_PROPS)})`);
-    const innerH = await page.evaluate('window.innerHeight');
-    const triggerY = Math.min(700, Math.max(200, Math.round(innerH * 0.9)));
-    await page.evaluate(`window.scrollTo(0, ${triggerY})`);
-    await wait(500);
-    const after = await page.evaluate(`(${SNAP_PROBES})(${JSON.stringify(BEHAVIOR_PROPS)})`);
-    await page.evaluate('window.scrollTo(0, 0)');
-    await wait(300);
-    for (const c of candidates) {
-      const changed = diffStyles(before[c.probe], after[c.probe]);
-      if (Object.keys(changed).length) {
-        behaviors.scroll.push({
-          label: c.cls ? `${c.tag}.${c.cls}` : c.tag,
-          tag: c.tag, cls: c.cls, triggerScrollY: triggerY, changed,
-        });
+// In-page: tag hover candidates. 같은 시그니처(tag+첫 클래스)는 1개만 샘플 — nav 링크 30개 → 1개.
+const TAG_HOVER_CANDIDATES = `(function () {
+  const els = Array.from(document.querySelectorAll('a, button, [role="button"], [class*="btn" i], [class*="card" i]'));
+  const seen = new Set(); const out = []; let i = 0;
+  for (const el of els) {
+    if (i >= 30) break;
+    const r = el.getBoundingClientRect();
+    if (r.width < 8 || r.height < 8) continue;
+    const cls = (el.getAttribute('class') || '').trim().split(/\\s+/).filter(Boolean)[0] || '';
+    const sig = el.tagName + '.' + cls;
+    if (seen.has(sig)) continue;
+    seen.add(sig);
+    el.setAttribute('data-clone-hover', 'h' + i);
+    out.push({ probe: 'h' + i, tag: el.tagName.toLowerCase(), cls, transition: getComputedStyle(el).transition });
+    i++;
+  }
+  return out;
+})`;
+
+// In-page: snapshot computed props of all elements tagged with an attribute.
+const SNAP_ATTR = `(function (attr, props) {
+  const out = {};
+  document.querySelectorAll('[' + attr + ']').forEach((el) => {
+    const cs = getComputedStyle(el); const o = {};
+    for (const p of props) { const v = cs.getPropertyValue(p); if (v) o[p] = v.trim(); }
+    out[el.getAttribute(attr)] = o;
+  });
+  return out;
+})`;
+
+// In-page: tag below-the-fold elements that look "waiting to animate" (opacity 0 / transform offset).
+const TAG_INVIEW = `(function () {
+  const innerH = window.innerHeight;
+  const all = Array.from(document.querySelectorAll('body *')).slice(0, 3000);
+  const out = []; let i = 0;
+  for (const el of all) {
+    if (i >= 20) break;
+    const r = el.getBoundingClientRect();
+    if (r.width < 40 || r.height < 40) continue;
+    if (r.top < innerH) continue;
+    const cs = getComputedStyle(el);
+    const hidden = parseFloat(cs.opacity) < 0.05;
+    const shifted = cs.transform && cs.transform !== 'none';
+    if (!hidden && !shifted) continue;
+    if (el.parentElement && el.parentElement.closest('[data-clone-inview]')) continue;
+    el.setAttribute('data-clone-inview', 'v' + i);
+    const cls = (el.getAttribute('class') || '').trim().split(/\\s+/).filter(Boolean)[0] || '';
+    out.push({ probe: 'v' + i, tag: el.tagName.toLowerCase(), cls, top: Math.round(r.top + window.scrollY) });
+    i++;
+  }
+  return out;
+})`;
+
+// In-page: observe class/style mutations for N ms with no input → time-driven candidates (carousels, cycling).
+const OBSERVE_MUTATIONS = `(function (ms) {
+  return new Promise((resolve) => {
+    const counts = new Map();
+    const obs = new MutationObserver((muts) => {
+      for (const m of muts) {
+        const el = m.target;
+        if (!el || !el.tagName || el === document.body || el === document.documentElement) continue;
+        const tag = el.tagName.toLowerCase();
+        const cls = ((el.getAttribute && el.getAttribute('class')) || '').trim().split(/\\s+/).filter(Boolean)[0] || '';
+        const key = tag + (cls ? '.' + cls : '');
+        const e = counts.get(key) || { tag, cls, mutations: 0, kinds: new Set() };
+        e.mutations++; e.kinds.add(m.type === 'attributes' ? m.attributeName : m.type);
+        counts.set(key, e);
       }
+    });
+    obs.observe(document.body, { subtree: true, attributes: true, attributeFilter: ['class', 'style'], childList: true });
+    setTimeout(() => {
+      obs.disconnect();
+      resolve(Array.from(counts.entries())
+        .map(([label, e]) => ({ label, tag: e.tag, cls: e.cls, mutations: e.mutations, kinds: Array.from(e.kinds) }))
+        .sort((a, b) => b.mutations - a.mutations)
+        .slice(0, 10));
+    }, ms);
+  });
+})`;
+
+// In-page: smooth-scroll library detection (Lenis, Locomotive). 네이티브와 체감이 확연히 달라 놓치면 바로 티가 난다.
+const DETECT_SCROLL_LIB = `(function () {
+  const checks = [
+    ['lenis', 'html.lenis, .lenis, [data-lenis]'],
+    ['locomotive-scroll', '.locomotive-scroll, [data-scroll-container]'],
+  ];
+  for (const [name, sel] of checks) {
+    if (document.querySelector(sel)) return { name, evidence: sel };
+  }
+  if (window.Lenis) return { name: 'lenis', evidence: 'window.Lenis' };
+  if (window.LocomotiveScroll || window.locomotive) return { name: 'locomotive-scroll', evidence: 'window.LocomotiveScroll' };
+  return null;
+})`;
+
+const wait = (ms) => new Promise((r) => setTimeout(r, ms));
+
+// ── Scroll-triggered state (header/nav shrink, background, shadow on scroll) ──
+async function sweepScrollState(page) {
+  const out = [];
+  const candidates = await page.evaluate(`(${TAG_SCROLL_CANDIDATES})()`);
+  if (!candidates.length) return out;
+  const before = await page.evaluate(`(${SNAP_PROBES})(${JSON.stringify(BEHAVIOR_PROPS)})`);
+  const innerH = await page.evaluate('window.innerHeight');
+  const triggerY = Math.min(700, Math.max(200, Math.round(innerH * 0.9)));
+  await page.evaluate(`window.scrollTo(0, ${triggerY})`);
+  await wait(500);
+  const after = await page.evaluate(`(${SNAP_PROBES})(${JSON.stringify(BEHAVIOR_PROPS)})`);
+  await page.evaluate('window.scrollTo(0, 0)');
+  await wait(300);
+  for (const c of candidates) {
+    const changed = diffStyles(before[c.probe], after[c.probe]);
+    if (Object.keys(changed).length) {
+      out.push({
+        label: c.cls ? `${c.tag}.${c.cls}` : c.tag,
+        tag: c.tag, cls: c.cls, triggerScrollY: triggerY, changed,
+      });
     }
   }
+  return out;
+}
 
-  // ── Click-driven tab groups (content swap detection) ──
+// ── Click-driven tab groups (content swap detection) ──
+async function sweepTabGroups(page) {
+  const out = [];
   const groups = await page.evaluate(`(${TAG_TAB_GROUPS})()`);
   for (const grp of groups) {
     try {
@@ -693,7 +798,7 @@ async function runInteractionSweep(page) {
         `(function (g) { const t = document.querySelector('[data-clone-tab="' + g + '_0"]'); if (t) t.click(); })(${grp.group})`
       );
       await wait(200);
-      behaviors.interactive.push({
+      out.push({
         kind: 'tab-group',
         count: grp.count,
         tabLabels: grp.labels,
@@ -701,14 +806,105 @@ async function runInteractionSweep(page) {
       });
     } catch { /* one bad group must not abort the whole sweep */ }
   }
+  return out;
+}
+
+// ── Hover states set by JS (static :hover rules already land in states.json) ──
+async function sweepHover(page) {
+  const out = [];
+  const candidates = await page.evaluate(`(${TAG_HOVER_CANDIDATES})()`);
+  for (const c of candidates) {
+    try {
+      const sel = `[data-clone-hover="${c.probe}"]`;
+      await page.evaluate(`document.querySelector('${sel}')?.scrollIntoView({ block: 'center' })`);
+      await wait(150);
+      const snap = `(${SNAP_ATTR})('data-clone-hover', ${JSON.stringify(HOVER_PROPS)})`;
+      const before = (await page.evaluate(snap))[c.probe];
+      await page.hover(sel);
+      await wait(350);
+      const after = (await page.evaluate(snap))[c.probe];
+      await page.mouse.move(0, 0);
+      await wait(150);
+      const changed = diffStyles(before, after);
+      if (Object.keys(changed).length) {
+        out.push({
+          label: c.cls ? `${c.tag}.${c.cls}` : c.tag,
+          tag: c.tag, cls: c.cls, transition: c.transition, changed,
+        });
+      }
+    } catch { /* fail-open: 요소 하나가 스윕 전체를 죽이면 안 된다 */ }
+  }
+  await page.evaluate('window.scrollTo(0, 0)');
+  await wait(200);
+  return out;
+}
+
+// ── In-view entrance animations (fade-up, slide-in) ──
+// 1회성 등장 애니메이션은 lazy-load 스크롤에서 이미 발화했으므로 페이지를 새로 로드해 관찰한다.
+async function sweepInView(page) {
+  const out = [];
+  await page.goto(page.url(), { waitUntil: 'networkidle2', timeout: 90000 });
+  await wait(800);
+  const candidates = await page.evaluate(`(${TAG_INVIEW})()`);
+  if (!candidates.length) return out;
+  const snap = `(${SNAP_ATTR})('data-clone-inview', ${JSON.stringify(INVIEW_PROPS)})`;
+  const before = await page.evaluate(snap);
+  for (const c of candidates) {
+    try {
+      await page.evaluate(`document.querySelector('[data-clone-inview="${c.probe}"]')?.scrollIntoView({ block: 'center' })`);
+      await wait(600);
+    } catch { /* fail-open */ }
+  }
+  const after = await page.evaluate(snap);
+  await page.evaluate('window.scrollTo(0, 0)');
+  await wait(300);
+  for (const c of candidates) {
+    const changed = diffStyles(before[c.probe], after[c.probe]);
+    if (Object.keys(changed).length) {
+      out.push({
+        label: c.cls ? `${c.tag}.${c.cls}` : c.tag,
+        tag: c.tag, cls: c.cls, triggerY: c.top, changed,
+      });
+    }
+  }
+  await page.evaluate('document.querySelectorAll("[data-clone-inview]").forEach((e) => e.removeAttribute("data-clone-inview"))');
+  return out;
+}
+
+async function runInteractionSweep(page) {
+  const behaviors = { scroll: [], interactive: [], hover: [], inview: [], timeDriven: [], scrollLib: null };
+
+  behaviors.scroll = await sweepScrollState(page);
+  behaviors.interactive = await sweepTabGroups(page);
+  behaviors.hover = await sweepHover(page);
+  // 무입력 3초 관찰 — 캐러셀/자동 사이클 후보
+  try { behaviors.timeDriven = await page.evaluate(`(${OBSERVE_MUTATIONS})(3000)`); } catch { /* fail-open */ }
+  try { behaviors.scrollLib = await page.evaluate(`(${DETECT_SCROLL_LIB})()`); } catch { /* fail-open */ }
 
   // Clean up probe attributes BEFORE static extraction so they don't pollute output.
   await page.evaluate(
-    'document.querySelectorAll("[data-clone-probe],[data-clone-tab]").forEach((e) => { e.removeAttribute("data-clone-probe"); e.removeAttribute("data-clone-tab"); })'
+    'document.querySelectorAll("[data-clone-probe],[data-clone-tab],[data-clone-hover]").forEach((e) => { e.removeAttribute("data-clone-probe"); e.removeAttribute("data-clone-tab"); e.removeAttribute("data-clone-hover"); })'
   );
+
+  // 마지막: in-view 스윕은 리로드를 동반하므로 다른 스윕 뒤에 실행한다.
+  behaviors.inview = await sweepInView(page);
+  // 리로드로 lazy-load 상태가 초기화됐으니 정적 추출 전에 복원한다.
+  await scrollToBottom(page);
   return behaviors;
 }
 
+// In-page: favicon / OG image / webmanifest URLs (Foundation 단계 — public/seo/ 배선용)
+const SEO_EXTRACT = `(function () {
+  const abs = (u) => { try { return new URL(u, location.href).href; } catch { return null; } };
+  const icons = Array.from(document.querySelectorAll(
+    'link[rel*="icon" i], link[rel="apple-touch-icon"], link[rel="manifest"]'
+  )).map((l) => abs(l.getAttribute('href'))).filter(Boolean);
+  const og = Array.from(document.querySelectorAll(
+    'meta[property="og:image"], meta[name="twitter:image"]'
+  )).map((m) => abs(m.getAttribute('content'))).filter(Boolean);
+  return Array.from(new Set(icons.concat(og)));
+})`;
+
 // HTML sanitization: strip scripts/analytics before saving
 function sanitizeHtml(html) {
   return html
@@ -739,8 +935,10 @@ async function capture({ url, opts }) {
   const assetsDir = path.join(opts.out, 'assets');
   const imagesDir = path.join(assetsDir, 'images');
   const fontsDir = path.join(assetsDir, 'fonts');
+  const seoDir = path.join(assetsDir, 'seo');
   fs.mkdirSync(imagesDir, { recursive: true });
   fs.mkdirSync(fontsDir, { recursive: true });
+  fs.mkdirSync(seoDir, { recursive: true });
 
   console.log(`[clone-extract] ${opts.bp || ''} ${viewport.width}x${viewport.height}@${viewport.deviceScaleFactor} ${url}`);
 
@@ -775,7 +973,12 @@ async function capture({ url, opts }) {
     if (opts.interact) {
       try {
         behaviors = await runInteractionSweep(page);
-        console.log(`[clone-extract] interaction sweep: ${behaviors.scroll.length} scroll-state, ${behaviors.interactive.length} tab-group(s)`);
+        console.log(
+          `[clone-extract] interaction sweep: ${behaviors.scroll.length} scroll-state, ` +
+          `${behaviors.interactive.length} tab-group(s), ${behaviors.hover.length} hover, ` +
+          `${behaviors.inview.length} in-view, ${behaviors.timeDriven.length} time-driven` +
+          `${behaviors.scrollLib ? `, scroll-lib: ${behaviors.scrollLib.name}` : ''}`
+        );
       } catch (e) {
         console.log(`[clone-extract] interaction sweep skipped: ${e.message}`);
       }
@@ -805,9 +1008,14 @@ async function capture({ url, opts }) {
       if (sorted[1]) fontDownloadSet.add(sorted[1].url);
     }
 
-    console.log(`[clone-extract] downloading ${extracted.assets.images.length} images, ${fontDownloadSet.size} fonts (filtered from ${extracted.assets.fonts.length})`);
+    // Favicon / OG / webmanifest — Foundation 단계에서 public/seo/ 로 배선한다
+    let seoUrls = [];
+    try { seoUrls = await page.evaluate(`(${SEO_EXTRACT})()`); } catch { /* fail-open */ }
+
+    console.log(`[clone-extract] downloading ${extracted.assets.images.length} images, ${fontDownloadSet.size} fonts (filtered from ${extracted.assets.fonts.length}), ${seoUrls.length} seo assets`);
     const imageMap = await downloadAssets(extracted.assets.images, imagesDir, 8);
     const fontMap = await downloadAssets(Array.from(fontDownloadSet), fontsDir, 4);
+    const seoMap = await downloadAssets(seoUrls, seoDir, 4);
 
     const assetMap = {};
     for (const [u, info] of Object.entries(imageMap)) {
@@ -820,6 +1028,11 @@ async function capture({ url, opts }) {
         ? { local: `assets/fonts/${info.local}`, status: 'ok', bytes: info.bytes, kind: 'font' }
         : { ...info, kind: 'font' };
     }
+    for (const [u, info] of Object.entries(seoMap)) {
+      assetMap[u] = info.status === 'ok'
+        ? { local: `assets/seo/${info.local}`, status: 'ok', bytes: info.bytes, kind: 'seo' }
+        : { ...info, kind: 'seo' };
+    }
 
     // Rewrite HTML — replace remote URLs with local paths
     let html = sanitizeHtml(extracted.html);
@@ -896,8 +1109,9 @@ async function capture({ url, opts }) {
     );
     fs.writeFileSync(path.join(opts.out, 'asset-map.json'), JSON.stringify(assetMap, null, 2));
     if (behaviors) {
-      // Rewrite any remote asset URLs captured in scroll-state background-image diffs.
-      for (const s of behaviors.scroll) {
+      // Rewrite any remote asset URLs captured in behavior diffs (scroll/hover/inview).
+      const diffed = [...behaviors.scroll, ...(behaviors.hover || []), ...(behaviors.inview || [])];
+      for (const s of diffed) {
         for (const ch of Object.values(s.changed)) {
           if (typeof ch.from === 'string') ch.from = rewriteCssValue(ch.from);
           if (typeof ch.to === 'string') ch.to = rewriteCssValue(ch.to);

package/hooks/scripts/clone-merge-responsive.js

@@ -0,0 +1,184 @@
+#!/usr/bin/env node
+
+/**
+ * clone-merge-responsive.js — MO/PC per-BP SCSS → mobile-first responsive merge
+ *
+ * Usage:
+ *   node clone-merge-responsive.js --mo=<styles-dir> --pc=<styles-dir> --out=<dir> [--breakpoint=1024]
+ *
+ * Why this exists (clone Phase 3C):
+ *   Phase 3A/3B produce two fixed-viewport SCSS trees (styles/{feature}/mo, /pc).
+ *   This merges them mobile-first: MO declarations become the base, and only the
+ *   declarations where PC differs go into a single @media (min-width: <bp>) block.
+ *   Deterministic text merge — no value invention. Post-merge correctness is judged
+ *   by Phase 5 (pixel + computed-CSS verification at BOTH viewports).
+ *
+ * Fail-open:
+ *   - PC-only selectors → whole rule inside the media block
+ *   - MO-only selectors → base as-is (reported)
+ *   - unparseable/missing files → reported and skipped, never a hard abort
+ */
+
+import fs from 'fs';
+import path from 'path';
+import { parseScss, normalize } from './clone-validate.js';
+
+// ─── CLI ────────────────────────────────────────────────────────────
+function parseArgs(argv) {
+  const opts = { breakpoint: 1024 };
+  for (const a of argv.slice(2)) {
+    if (a.startsWith('--mo=')) opts.mo = a.slice(5);
+    else if (a.startsWith('--pc=')) opts.pc = a.slice(5);
+    else if (a.startsWith('--out=')) opts.out = a.slice(6);
+    else if (a.startsWith('--breakpoint=')) opts.breakpoint = Number(a.slice(13)) || 1024;
+  }
+  return opts;
+}
+
+// ─── Merge core (pure — exported for tests) ─────────────────────────
+// moRules/pcRules: Map<selector, {prop: value}> (parseScss output)
+// → { base: Map, media: Map, stats }
+function mergeRules(moRules, pcRules) {
+  const base = new Map();
+  const media = new Map();
+  const stats = { selectors: 0, moOnly: 0, pcOnly: 0, overrides: 0, shared: 0 };
+
+  const selectors = new Set([...moRules.keys(), ...pcRules.keys()]);
+  for (const sel of selectors) {
+    stats.selectors++;
+    const mo = moRules.get(sel);
+    const pc = pcRules.get(sel);
+    if (mo && Object.keys(mo).length) base.set(sel, mo);
+
+    if (!pc || !Object.keys(pc).length) { if (mo) stats.moOnly++; continue; }
+    if (!mo || !Object.keys(mo).length) {
+      // PC 전용 셀렉터 — 데스크탑에서만 존재하는 노드
+      media.set(sel, pc);
+      stats.pcOnly++;
+      continue;
+    }
+
+    const diff = {};
+    for (const [prop, val] of Object.entries(pc)) {
+      if (mo[prop] === undefined || normalize(mo[prop]) !== normalize(val)) diff[prop] = val;
+    }
+    if (Object.keys(diff).length) { media.set(sel, diff); stats.overrides++; }
+    else stats.shared++;
+  }
+  return { base, media, stats };
+}
+
+function emitRules(rules, indent) {
+  const out = [];
+  for (const [sel, decls] of rules) {
+    const body = Object.entries(decls).map(([p, v]) => `${indent}  ${p}: ${v};`).join('\n');
+    if (!body) continue;
+    out.push(`${indent}${sel} {\n${body}\n${indent}}`);
+  }
+  return out.join('\n\n');
+}
+
+// Merged partial: MO base rules + one @media (min-width) block with PC diffs.
+function emitMerged(moRules, pcRules, breakpoint, header) {
+  const { base, media, stats } = mergeRules(moRules, pcRules);
+  const parts = [header, '', emitRules(base, '')];
+  if (media.size) {
+    parts.push('');
+    parts.push(`@media (min-width: ${breakpoint}px) {`);
+    parts.push(emitRules(media, '  '));
+    parts.push('}');
+  }
+  return { scss: parts.filter((p) => p !== null).join('\n') + '\n', stats };
+}
+
+// ─── File-level orchestration ───────────────────────────────────────
+function readScssRules(file) {
+  if (!fs.existsSync(file)) return null;
+  try { return parseScss(fs.readFileSync(file, 'utf8')); }
+  catch (e) {
+    console.error(`[clone-merge] parse skipped (${e.message}): ${file}`);
+    return null;
+  }
+}
+
+function listSections(dir) {
+  const d = path.join(dir, 'sections');
+  if (!fs.existsSync(d)) return [];
+  return fs.readdirSync(d).filter((f) => f.startsWith('_') && f.endsWith('.scss'));
+}
+
+function mergeTokens(moDir, pcDir, outDir, breakpoint) {
+  const mo = readScssRules(path.join(moDir, '_tokens.scss')) || new Map();
+  const pc = readScssRules(path.join(pcDir, '_tokens.scss')) || new Map();
+  const { scss } = emitMerged(mo, pc, breakpoint, '// Auto-merged by clone-merge-responsive.js (mobile-first)');
+  fs.writeFileSync(path.join(outDir, '_tokens.scss'), scss);
+}
+
+function copyIfExists(src, dst) {
+  if (fs.existsSync(src)) fs.copyFileSync(src, dst);
+}
+
+function mergeClassPlans(moDir, pcDir, outDir) {
+  const read = (d) => {
+    const f = path.join(d, 'class-plan.json');
+    return fs.existsSync(f) ? JSON.parse(fs.readFileSync(f, 'utf8')) : {};
+  };
+  // MO 우선 — 동일 노드 id가 다른 클래스면 MO가 base이므로 MO를 채택
+  const merged = { ...read(pcDir), ...read(moDir) };
+  fs.writeFileSync(path.join(outDir, 'class-plan.json'), JSON.stringify(merged, null, 2));
+}
+
+function main() {
+  const opts = parseArgs(process.argv);
+  if (!opts.mo || !opts.pc || !opts.out) {
+    console.error('Usage: node clone-merge-responsive.js --mo=<styles-dir> --pc=<styles-dir> --out=<dir> [--breakpoint=1024]');
+    process.exit(2);
+  }
+
+  fs.mkdirSync(path.join(opts.out, 'sections'), { recursive: true });
+
+  const files = [...new Set([...listSections(opts.mo), ...listSections(opts.pc)])].sort();
+  const totals = { selectors: 0, moOnly: 0, pcOnly: 0, overrides: 0, shared: 0 };
+  const merged = [];
+
+  for (const f of files) {
+    const mo = readScssRules(path.join(opts.mo, 'sections', f)) || new Map();
+    const pc = readScssRules(path.join(opts.pc, 'sections', f)) || new Map();
+    if (!mo.size && !pc.size) { console.error(`[clone-merge] empty on both BPs, skipped: ${f}`); continue; }
+    const { scss, stats } = emitMerged(mo, pc, opts.breakpoint, `// Section: ${f} — merged mobile-first`);
+    fs.writeFileSync(path.join(opts.out, 'sections', f), scss);
+    for (const k of Object.keys(totals)) totals[k] += stats[k];
+    merged.push(f);
+  }
+
+  mergeTokens(opts.mo, opts.pc, opts.out, opts.breakpoint);
+  copyIfExists(path.join(opts.mo, '_base.scss'), path.join(opts.out, '_base.scss'));
+  copyIfExists(path.join(opts.mo, '_shared.scss'), path.join(opts.out, '_shared.scss'));
+  mergeClassPlans(opts.mo, opts.pc, opts.out);
+
+  const index = [
+    '// Auto-merged by clone-merge-responsive.js — mobile-first responsive',
+    '',
+    `@use './tokens';`,
+    `@use './base';`,
+    `@use './shared';`,
+    ...merged.map((f) => `@use './sections/${f.replace(/^_|\.scss$/g, '')}';`),
+  ].join('\n') + '\n';
+  fs.writeFileSync(path.join(opts.out, 'index.scss'), index);
+
+  console.log(`[clone-merge] done → ${opts.out}`);
+  console.log(`  sections: ${merged.length}, selectors: ${totals.selectors} (shared ${totals.shared}, overrides ${totals.overrides}, mo-only ${totals.moOnly}, pc-only ${totals.pcOnly})`);
+  console.log(`  breakpoint: @media (min-width: ${opts.breakpoint}px)`);
+}
+
+const isMain = process.argv[1] && process.argv[1].replace(/\\/g, '/').endsWith('clone-merge-responsive.js');
+if (isMain) {
+  try { main(); }
+  catch (e) {
+    console.error(`[clone-merge] FAIL: ${e.message}`);
+    if (process.env.DEBUG) console.error(e.stack);
+    process.exit(1);
+  }
+}
+
+export { mergeRules, emitMerged };

package/hooks/scripts/clone-spec.js

@@ -28,6 +28,7 @@ function parseArgs(argv) {
     else if (a.startsWith('--section=')) opts.section = a.slice(10);
     else if (a.startsWith('--feature=')) opts.feature = a.slice(10);
     else if (a.startsWith('--behaviors=')) opts.behaviors = a.slice(12);
+    else if (a === '--real-content') opts.realContent = true;
   }
   return { sectionsPath, opts };
 }
@@ -101,20 +102,28 @@ function sectionHasNode(section, tag, cls) {
   return (section.children || []).some(hit);
 }
 
+function diffLines(changed) {
+  return Object.entries(changed)
+    .map(([k, v]) => `    - ${k}: \`${v.from}\` → \`${v.to}\``).join('\n');
+}
+
 function behaviorsBlock(section, behaviors) {
   if (!behaviors) return null;
-  const scroll = (behaviors.scroll || []).filter((b) => sectionHasNode(section, b.tag, b.cls));
+  const inSection = (list) => (list || []).filter((b) => sectionHasNode(section, b.tag, b.cls));
+  const scroll = inSection(behaviors.scroll);
+  const hover = inSection(behaviors.hover);
+  const inview = inSection(behaviors.inview);
+  const timed = inSection(behaviors.timeDriven);
   // Tab groups aren't tag-keyed; attach to any section that contains a [role=tab]-ish node.
   const tabs = (behaviors.interactive || []).filter(() =>
     sectionHasNode(section, 'button') || sectionHasNode(section, 'li') || sectionHasNode(section, 'a'),
   );
-  if (!scroll.length && !tabs.length) return null;
+  const lib = behaviors.scrollLib;
+  if (!scroll.length && !tabs.length && !hover.length && !inview.length && !timed.length && !lib) return null;
 
   const lines = [];
   for (const b of scroll) {
-    const diffs = Object.entries(b.changed)
-      .map(([k, v]) => `    - ${k}: \`${v.from}\` → \`${v.to}\``).join('\n');
-    lines.push(`- **Scroll-triggered** on \`${b.label}\` (past ~${b.triggerScrollY}px scroll):\n${diffs}`);
+    lines.push(`- **Scroll-triggered** on \`${b.label}\` (past ~${b.triggerScrollY}px scroll):\n${diffLines(b.changed)}`);
   }
   for (const t of tabs) {
     const labels = (t.tabLabels || []).map((l) => `"${l}"`).join(', ') || '(unlabeled)';
@@ -123,6 +132,19 @@ function behaviorsBlock(section, behaviors) {
       : 'no content swap detected (styling-only tabs)';
     lines.push(`- **Tab group** ×${t.count} [${labels}]: ${swap}`);
   }
+  for (const b of hover) {
+    const tr = b.transition && b.transition !== 'all 0s ease 0s' ? ` (transition: \`${b.transition}\`)` : '';
+    lines.push(`- **Hover** on \`${b.label}\`${tr}:\n${diffLines(b.changed)}`);
+  }
+  for (const b of inview) {
+    lines.push(`- **In-view entrance** on \`${b.label}\` (enters at ~${b.triggerY}px):\n${diffLines(b.changed)}`);
+  }
+  for (const b of timed) {
+    lines.push(`- **Time-driven** \`${b.label}\` — ${b.mutations} mutations/3s [${(b.kinds || []).join(', ')}] → carousel/auto-cycle candidate`);
+  }
+  if (lib) {
+    lines.push(`- **Smooth-scroll library (page-level):** ${lib.name} (evidence: \`${lib.evidence}\`) → wire in globals, not per-section`);
+  }
   return lines.join('\n');
 }
 
@@ -171,7 +193,9 @@ ${cssBlock(section.css)}
 ## Assets (local paths only — never hotlink)
 ${assetsBlock(section.images)}
 
-## Text content (replace copyrighted copy with placeholders)
+## Text content ${meta.realContent
+    ? '(verbatim — user confirmed rights to reuse this copy)'
+    : '(replace copyrighted copy with placeholders)'}
 ${textBlock}
 
 ## Component candidates
@@ -179,7 +203,7 @@ ${componentsBlock(section.components)}
 
 ## Build checklist
 - [ ] HTML semantics + final tags chosen
-- [ ] SCSS via clone-to-scss.js (computed values as-is — no eyeballing)
+- [ ] SCSS started from the clone-to-scss.js draft — value edits only with evidence cited from computed.json/states.json/behaviors.json (no eyeballing); clone-validate.js is the judge
 - [ ] Every state above implemented
 - [ ] Interaction model confirmed on live site & wired
 - [ ] All assets local (public/images/${meta.feature}/) — no hotlinks
@@ -196,6 +220,7 @@ function main() {
     url: data.meta && data.meta.url,
     viewport: data.meta && data.meta.viewport,
     bp: opts.section ? (data.meta && data.meta.bp) : (data.meta && data.meta.bp) || '?',
+    realContent: !!opts.realContent,
   };
   // behaviors.json (active interaction sweep) lives next to the source computed.json.
   const behaviorsPath = opts.behaviors || path.join(path.dirname(sectionsPath), 'behaviors.json');
@@ -223,7 +248,7 @@ function main() {
 const isMain = process.argv[1] && process.argv[1].replace(/\\/g, '/').endsWith('clone-spec.js');
 if (isMain) {
   if (!sectionsPath || !opts.out) {
-    console.error('Usage: node clone-spec.js <sections.json> --out=<dir> [--section=Name] [--feature=name] [--behaviors=path]');
+    console.error('Usage: node clone-spec.js <sections.json> --out=<dir> [--section=Name] [--feature=name] [--behaviors=path] [--real-content]');
     process.exit(1);
   }
   try { main(); }

package/hooks/scripts/clone-validate.js

@@ -34,10 +34,6 @@ function parseArgs(argv) {
 }
 
 const { stylesDir, sectionsPath, opts } = parseArgs(process.argv);
-if (!stylesDir || !sectionsPath) {
-  console.error('Usage: node clone-validate.js <styles-dir> <sections.json> [--section=<name>]');
-  process.exit(2);
-}
 
 // ─── Minimal SCSS parser ────────────────────────────────────────────
 // Strips comments, expands `&::pseudo` (one level), flattens nested rules.
@@ -272,9 +268,19 @@ function main() {
   process.exit(0);
 }
 
-try { main(); }
-catch (e) {
-  console.error(`[clone-validate] FAIL: ${e.message}`);
-  if (process.env.DEBUG) console.error(e.stack);
-  process.exit(2);
+// isMain 가드 — clone-merge-responsive.js가 parseScss를 import할 때 main()이 돌면 안 된다
+const isMain = process.argv[1] && process.argv[1].replace(/\\/g, '/').endsWith('clone-validate.js');
+if (isMain) {
+  if (!stylesDir || !sectionsPath) {
+    console.error('Usage: node clone-validate.js <styles-dir> <sections.json> [--section=<name>]');
+    process.exit(2);
+  }
+  try { main(); }
+  catch (e) {
+    console.error(`[clone-validate] FAIL: ${e.message}`);
+    if (process.env.DEBUG) console.error(e.stack);
+    process.exit(2);
+  }
 }
+
+export { parseScss, normalize, compareValue };