// 박스 컨테이너, 박스들 선택
const imgRow = document.querySelector('.img-gallery-row');
const boxes = imgRow ? imgRow.children : [];

window.handleRowHover = function(row, isHover) {
  if (!isHover) {
    // 전체 원상복귀
    for (let box of boxes) {
      box.style.flexBasis = '0';
      box.style.zIndex = '1';
      const img = box.querySelector('img');
      img.style.transform = 'none';
      const overlay = box.querySelector('.img-gallery-overlay');
      overlay.style.opacity = '1'; // 모든 텍스트 표시
    }
  }
};

window.handleBoxHover = function(box, isHover) {
  if (isHover) {
    // 마우스가 올려진 박스 확대, 나머지는 축소
    for (let b of boxes) {
      b.style.flexBasis = (b === box) ? '54%' : '14%'; // 4칸: 14%*3 + 54% = 96% + 4%*3 gap = 100%
      b.style.zIndex = (b === box) ? '10' : '1';
      const img = b.querySelector('img');
      img.style.transform = (b === box) ? 'scale(1.05)' : 'scale(0.85)';
      const overlay = b.querySelector('.img-gallery-overlay');
      overlay.style.opacity = (b === box) ? '1' : '0';
    }
  } else {
    // 마우스가 박스에서 빠졌을 때 row에 마우스가 있으면 다른 박스 hover 유지
    let anyHover = false;
    for (let b of boxes) {
      if (b.matches(':hover')) anyHover = true;
    }
    if (!anyHover) window.handleRowHover(imgRow, false);
  }
};