fix(site,skill): 두레 왼쪽 인셋 리듬 수리 — 제목이 가장자리에 붙어 보이던 사고(v23)

사용자 스크린샷을 픽셀 판정으로 해부: 앱바·검색·칩·카드는 24px에서 시작하는데 h2만 16px — 8px 어긋난 큰 명조 제목이 '가장자리에 붙었다'로 읽혔다. .layout 모바일 인셋을 24px로 통일.
- 게이트 공백: 기존 매트릭스는 오른쪽 오버플로만 검사 — e2e 에 M6 왼쪽 인셋 스위트 신설(60단언, 텍스트 시작점 ≥12px + 헤더-제목 같은 축 ±10px), RED 38 실패로 결함 재현 후 GREEN
- 측정 하자 2건 교정: display:none rect=0 필터, 전폭 컨테이너 보더박스가 아닌 텍스트 시작점 기준
- 스킬 mobile-app-ux.md: '왼쪽 인셋은 하나의 축' 규칙 추가. 시각 기준 갱신, verify L0~L6 전 통과(E2E 1,805단언)

apps/site/tools/e2e.mjs

@@ -218,6 +218,40 @@ for (const [app, cfg] of Object.entries(APPS)) {
   ok(after.top === 0, S, `${app} 탭 전환 후 헤더 상단 밀착`, after.top + "px");
 }
 
+// ════════ M6 — 왼쪽 인셋 리듬(제목·카드·헤더가 같은 축에 녹는다) ════════
+// 실측 사고: 두레 제목(h2)은 16px, 앱바·카드는 24px — 8px 어긋난 큰 제목이
+// '가장자리에 붙어 깨졌다'는 보고로 나왔다. 오버플로 검사는 오른쪽만 보므로
+// 왼쪽 인셋의 최소값과 정렬 정합은 별도 검사여야 한다
+for (const [app, cfg] of Object.entries(APPS)) {
+  const S = "M6 왼쪽 인셋";
+  const headerSel = app === "gaon-lms" ? ".topbar" : ".appbar";
+  for (const w of [320, 390]) {
+    await page.setViewport({ width: w, height: 844, isMobile: true, hasTouch: true });
+    await openApp(app);
+    for (const v of cfg.views) {
+      await switchView(app, v);
+      const inset = await page.evaluate((hs) => {
+        const vis = (el) => { if (!el) return false; const r = el.getBoundingClientRect(); const cs = getComputedStyle(el); return cs.display !== "none" && cs.visibility !== "hidden" && r.width > 40 && r.height > 8; };
+        const textLeft = (els) => {
+          // display:none 요소의 rect 는 0 — 보임 검사를 먼저 통과시킨다
+          const ls = els.filter(vis).filter((el) => [...el.childNodes].some((n) => n.nodeType === 3 && n.textContent.trim())).map((el) => el.getBoundingClientRect().left);
+          return ls.length ? Math.round(Math.min(...ls)) : null;
+        };
+        const barLeft = textLeft([...document.querySelectorAll(hs + " *")]);
+        const head = document.querySelector(".view.is-on h1, .view.is-on h2");
+        const headLeft = head && vis(head) ? Math.round(head.getBoundingClientRect().left) : null;
+        // 전폭 컨테이너(보더박스 0)가 아니라 '텍스트가 실제로 시작하는 곳'을 잰다
+        const contentLeft = textLeft([...document.querySelectorAll(".view.is-on *")]);
+        return { barLeft, headLeft, contentLeft };
+      }, headerSel);
+      const min = Math.min(...[inset.headLeft, inset.contentLeft].filter((v2) => v2 !== null));
+      ok(min >= 12, S, `${app}/${v}@${w} 본문 인셋 ≥12px`, `제목 ${inset.headLeft}·카드 ${inset.contentLeft}`);
+      if (inset.barLeft !== null && inset.headLeft !== null)
+        ok(Math.abs(inset.barLeft - inset.headLeft) <= 10, S, `${app}/${v}@${w} 헤더-제목 같은 축(±10px)`, `바 ${inset.barLeft} vs 제목 ${inset.headLeft}`);
+    }
+  }
+}
+
 // ════════ M3+M1+M2 — 구조·터치타깃·대비 매트릭스(전 뷰 × 320/390/768) ════════
 for (const [app, cfg] of Object.entries(APPS)) {
   for (const w of [320, 390, 768]) {