document.addEventListener('DOMContentLoaded', function () {
  const overlay = document.getElementById('progressOverlay');
  const progressNumber = document.getElementById('progressNumber');
  
  if (!overlay || !progressNumber) return;

  // Å׸¶ ±âº» ·Î´õ(³×¸ð ½ºÇdzÊ) °­Á¦ Á¾·á ÇÔ¼ö
  function killThemeLoader() {
    document.querySelectorAll('#preloader, .css3-spinner, .page-loader, .preloader')
      .forEach(function (el) {
        el.style.opacity = '0';
        el.style.pointerEvents = 'none';
        el.style.display = 'none';
      });
  }

  // ·Î´õ Á¦°Å
  killThemeLoader();

  // === À̹ÌÁö ·Îµù »óÅ ÃßÀû ===
  let imagesLoaded = 0;
  const images = document.querySelectorAll('.portfolio-item img'); // Æ÷Æ®Æú¸®¿À À̹ÌÁöµé
  const totalImages = images.length;

  function onImageLoad() {
    imagesLoaded++;
    // °¢ À̹ÌÁö°¡ ·ÎµåµÉ ¶§¸¶´Ù À̹ÌÁö¸¦ Á¡ÁøÀûÀ¸·Î º¸ÀÌ°Ô Çϱâ
    const percent = Math.floor((imagesLoaded / totalImages) * 100);
    progressNumber.textContent = percent + '%';

    if (imagesLoaded === totalImages) {
      // ¸ðµç À̹ÌÁö°¡ ·ÎµåµÇ¸é ¿À¹ö·¹ÀÌ ¼û±â±â
      overlay.classList.add('hidden');
    }
  }

  // À̹ÌÁö°¡ ·ÎµåµÉ ¶§¸¶´Ù ½ÇÇà
  images.forEach(img => {
    if (img.complete) {
      imagesLoaded++;  // ÀÌ¹Ì ·ÎµåµÈ À̹ÌÁöµé
    } else {
      img.addEventListener('load', onImageLoad);
      img.addEventListener('error', onImageLoad); // ·Îµå ½ÇÆеµ Ä«¿îÆ®
    }
  });

  // °­Á¦ 7ÃÊ ÈÄ °­Á¦ ¼û±è (·Îµù ½Ã°£ÀÌ ³Ê¹« ±æ¾îÁö´Â °æ¿ì)
  setTimeout(function () {
    if (overlay.classList.contains('hidden')) return;
    overlay.classList.add('hidden');
  }, 7000);
});