document.addEventListener("DOMContentLoaded", function() {
  const resizableDivs = document.querySelectorAll("div.resizable");

  // 각 요소의 원래 비율을 data 속성에서 계산합니다.
  resizableDivs.forEach(div => {
    const originalWidth = div.getAttribute('data-original-width');
    const originalHeight = div.getAttribute('data-original-height');
    if (originalWidth && originalHeight) {
      div.dataset.ratio = originalHeight / originalWidth;
    } else {
      // 만약 data 속성이 없다면 현재 크기로 비율 계산 (이 경우는 새로고침 시 문제가 발생할 수 있음)
      const currentWidth = div.offsetWidth;
      const currentHeight = div.offsetHeight;
      if (currentWidth) {
        div.dataset.ratio = currentHeight / currentWidth;
      }
    }
  });

  function updateHeights() {
    resizableDivs.forEach(div => {
      const ratio = parseFloat(div.dataset.ratio);
      if (!isNaN(ratio)) {
        div.style.height = (div.offsetWidth * ratio) + "px";
      }
    });
  }

  // 페이지 로드 시와 창 크기 변경 시에 높이 업데이트
  updateHeights();
  window.addEventListener("resize", updateHeights);
});