function renderCalendar(events) {
  const now = new Date();
  let year = now.getFullYear();
  let month = now.getMonth(); // 0-indexed

  function buildCalendar() {
    const el = document.getElementById("calendar");
    const firstDay = new Date(year, month, 1).getDay();
    const daysInMonth = new Date(year, month + 1, 0).getDate();

    const monthNames = ["1월","2월","3월","4월","5월","6월","7월","8월","9월","10월","11월","12월"];
    const weekdayNames = ["일","월","화","수","목","금","토"];

    // 이 달의 이벤트만 필터
    const monthEvents = {};
    events.forEach(e => {
      const d = e.eventDate?.toDate();
      if (!d) return;
      if (d.getFullYear() === year && d.getMonth() === month) {
        const day = d.getDate();
        if (!monthEvents[day]) monthEvents[day] = [];
        monthEvents[day].push(e);
      }
    });

    let html = `
      <div class="cal-toolbar">
        <button class="cal-nav-btn" id="cal-prev">◀</button>
        <strong>${year}년 ${monthNames[month]}</strong>
        <button class="cal-nav-btn" id="cal-next">▶</button>
      </div>
      <div class="cal-grid">`;

    weekdayNames.forEach((wd, i) => {
      html += `<div class="cal-weekday">${wd}</div>`;
    });

    const totalCells = firstDay + daysInMonth;
    const totalRows = Math.ceil(totalCells / 7);

    let day = 1;
    for (let i = 0; i < totalRows * 7; i++) {
      const col = i % 7;
      if (i < firstDay || day > daysInMonth) {
        html += `<div class="cal-cell is-empty"></div>`;
      } else {
        const evts = monthEvents[day] || [];
        html += `<div class="cal-cell" data-day="${day}"><span class="cal-day-num">${day}</span></div>`;
        day++;
      }
    }

    html += `</div>`;
    el.innerHTML = html;

    document.getElementById("cal-prev").addEventListener("click", () => {
      month--;
      if (month < 0) { month = 11; year--; }
      buildCalendar();
    });
    document.getElementById("cal-next").addEventListener("click", () => {
      month++;
      if (month > 11) { month = 0; year++; }
      buildCalendar();
    });
  }

  buildCalendar();
}

      } else {
        const evts = monthEvents[day] || [];
        html += `<div class="cal-cell" data-day="${day}"><span class="cal-day-num">${day}</span></div>`;
        day++;
      }

      } else {
        const evts = monthEvents[day] || [];
        const isToday = year === now.getFullYear() && month === now.getMonth() && day === now.getDate();
        const cellClasses = ["cal-cell"];
        if (isToday) cellClasses.push("is-today");
        if (col === 0) cellClasses.push("is-sun");
        if (col === 6) cellClasses.push("is-sat");

        const shown = evts.slice(0, 2);
        const rest = evts.length - shown.length;
        let evtHtml = shown.map(e =>
          `<div class="cal-pill" onclick="location.href='/post/?id=${e.id}'">${e.title}</div>`
        ).join("");
        if (rest > 0) {
          evtHtml += `<div class="cal-more" data-day="${day}">+${rest}개</div>`;
        }

        html += `<div class="${cellClasses.join(" ")}" data-day="${day}"><span class="cal-day-num">${day}</span>${evtHtml}</div>`;
        day++;
      }

    weekdayNames.forEach((wd, i) => {
      html += `<div class="cal-weekday">${wd}</div>`;
    });

    weekdayNames.forEach((wd, i) => {
      const cls = i === 0 ? " cal-sun" : i === 6 ? " cal-sat" : "";
      html += `<div class="cal-weekday${cls}">${wd}</div>`;
    });

    el.innerHTML = html;

    function closePopover() {
      const existing = document.querySelector(".cal-popover");
      if (existing) existing.remove();
      document.removeEventListener("click", onOutsideClick);
    }
    function onOutsideClick(ev) {
      if (!ev.target.closest(".cal-popover") && !ev.target.closest("[data-day]")) {
        closePopover();
      }
    }
    function openPopover(cellEl, day) {
      closePopover();
      const evts = monthEvents[day] || [];
      if (!evts.length) return;
      const pop = document.createElement("div");
      pop.className = "cal-popover";
      pop.innerHTML = evts.map(e =>
        `<div class="cal-popover-item" onclick="location.href='/post/?id=${e.id}'">${e.title}</div>`
      ).join("");
      const rect = cellEl.getBoundingClientRect();
      const gridRect = el.querySelector(".cal-grid").getBoundingClientRect();
      pop.style.top = (rect.bottom - gridRect.top + 4) + "px";
      pop.style.left = (rect.left - gridRect.left) + "px";
      el.querySelector(".cal-grid").appendChild(pop);
      setTimeout(() => document.addEventListener("click", onOutsideClick), 0);
    }

    el.querySelectorAll(".cal-cell[data-day]").forEach(cell => {
      cell.addEventListener("click", (ev) => {
        if (ev.target.closest(".cal-pill")) return; // pill 클릭은 바로 이동, 팝오버 안 띄움
        openPopover(cell, cell.dataset.day);
      });
    });