// ページを開く
mcp__chrome-devtools__new_page({ url: "<対象URL>" })

// 必要に応じてビューポートをエミュレート
mcp__chrome-devtools__emulate({
  viewport: { width: 320, height: 568, deviceScaleFactor: 2, isMobile: true, hasTouch: true }  // iPhone SE
  // viewport: { width: 375, height: 812, ... }  // iPhone X
  // viewport: { width: 768, height: 1024, ... } // iPad
  // viewport: null  // リセット
})

mcp__chrome-devtools__evaluate_script({
  function: `() => {
    const vw = window.innerWidth;
    const sw = document.body.scrollWidth;
    if (sw <= vw) return { ok: true, message: '横はみ出しなし' };

    // 原因要素を特定
    let maxRight = 0, culprit = null;
    document.querySelectorAll('*').forEach(el => {
      const r = el.getBoundingClientRect();
      if (r.right > maxRight) {
        maxRight = r.right;
        culprit = { tag: el.tagName, class: el.className?.slice(0,80), right: Math.round(r.right) };
      }
    });
    return { ok: false, viewportWidth: vw, scrollWidth: sw, culprit };
  }`
})

// スナップショットでDOM構造を確認
mcp__chrome-devtools__take_snapshot()

// 特定のセレクタで要素を探す
mcp__chrome-devtools__evaluate_script({
  function: `() => {
    const el = document.querySelector('<セレクタ>');
    if (!el) return { found: false };
    const style = getComputedStyle(el);
    return {
      found: true,
      display: style.display,
      visibility: style.visibility,
      opacity: style.opacity,
      rect: el.getBoundingClientRect()
    };
  }`
})

mcp__chrome-devtools__evaluate_script({
  function: `(el) => {
    const style = getComputedStyle(el);
    return {
      width: style.width,
      height: style.height,
      padding: style.padding,
      margin: style.margin,
      display: style.display,
      position: style.position,
      overflow: style.overflow
    };
  }`,
  args: [{ uid: "<要素のuid>" }]
})

// リロードして確認
mcp__chrome-devtools__navigate_page({ type: "reload" })

mcp__chrome-devtools__navigate_page({ type: "reload" })
mcp__chrome-devtools__take_screenshot({ filePath: "./screenshot-fixed.png" })