座標が表示できるhtmlを作ったが座標の要素がずれてしまう

実現したいこと

正確な座標にしたいが正確な位置よりずれてしまう

発生している問題・分からないこと

やっと上手くいったhtmlが作れましたが正確な位置を反映させたら斜め左上くらい座標が違うみたいです。正確な座標よりずれてしまいます。
元が正確な座標となると、画面からはみ出てしまう感じのズレになります。

Adobedwで見たら要素がずれてるみたいだったんですが、、、
何度か直したのですがわかりません。
多分要素のズレで正確な座標じゃなくなってるのです。
初期値にすれば治るんですかね？

ちなみに座標ステータスがわかるHTMLを制作しています。ズレ以外はうまくいきました

エラーメッセージ

error
1例えば座標が(131,119)なはずが189px, 176pxの配置になってしまいます。

該当のソースコード

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>画像の表示/ドラッグ</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      margin: 0;
      padding: 0;
      background-image: url(bk.png);  /* 背景画像指定 */
      overflow: hidden; /* スクロールを禁止 */
    }
    #image {
      width: 100px;
      height: 100px;
      background-size: contain;
      background-repeat: no-repeat;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      cursor: move; /* ドラッグ可能なカーソル */
      max-width: 100%; /* 拡大を防止 */
      max-height: 100%; /* 拡大を防止 */
    }
    .status {
      position: fixed;
      top: 20px;
      left: 20px;
      z-index: 1001; /* メニューより前面に表示 */
      padding: 10px;
      background-color: rgba(0, 0, 0, 0.7); /* 半透明の黒 */
      color: white;
      font-family: monospace; /* 文字を等幅フォントにする */
    }
  </style>
</head>
<body>
  <input type="text" id="image-file-name">
  <div id="image"></div>
  <div class="status" id="status">座標: ( - , - )</div>
  <script>
    // 画像ファイル名を取得する関数
    function getFileName() {
      return document.getElementById("image-file-name").value;
    }
    // 画像を表示する関数
    function showImage(fileName) {
      const image = document.getElementById("image");
      image.style.backgroundImage = `url(${fileName})`;
      makeDraggable(image); // 画像をドラッグ可能にする
    }
    // 画像をドラッグして移動できるようにする関数
    function makeDraggable(element) {
      let pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
      if (document.getElementById(element.id)) {
        // カーソルがクリックされたときにドラッグを開始する関数
        element.onmousedown = function(e) {
          e.preventDefault();
          pos3 = e.clientX;
          pos4 = e.clientY;
          document.onmouseup = closeDragElement;
          // カーソルが動いたときに要素を移動する関数を呼び出す
          document.onmousemove = function(e) {
            e.preventDefault();
            pos1 = pos3 - e.clientX;
            pos2 = pos4 - e.clientY;
            pos3 = e.clientX;
            pos4 = e.clientY;
            // 要素を移動
            element.style.top = (element.offsetTop - pos2) + "px";
            element.style.left = (element.offsetLeft - pos1) + "px";
            // ステータスを更新
            document.getElementById("status").innerText = `座標: (${element.style.left}, ${element.style.top})`;
          }
        };
      }
      // ドラッグを停止する関数
      function closeDragElement() {
        document.onmouseup = null;
        document.onmousemove = null;
      }
    }

    // 画像を表示するための処理
    const fileNameInput = document.getElementById("image-file-name");
    fileNameInput.addEventListener("change", function() {
      const fileName = getFileName();
      showImage(fileName);
    });
  </script>
</body>
</html>