/**
 * 비즈트렌드 달력 페이지 전용 스크립트
 * ===================================
 * biztrend.html (성공예감&별책부록)에서 사용합니다.
 * - 연·월 선택 날짜피커 (휠 UI)
 * - 현재 달 기준 동적 달력 그리드 생성
 * - 스크롤 바닥 감지 시 다음 달 자동 추가 (무한 스크롤)
 */

(function () {
  "use strict";

  // ------------------------------
  // 설정 상수
  // ------------------------------
  var YEAR_START = 2023;
  var YEAR_END = 2026;
  /** 그리드 최상단에서 살짝 내린 시작 위치(이전 달 프리로드를 위해 scrollTop>0 유지) */
  var GRID_SCROLL_TOP_OFFSET = 54;

  // ------------------------------
  // 무한 스크롤 상태
  // ------------------------------
  var loadedMonths = []; // [{year, month}]
  var scrollObserver = null;  // 하단 무한 스크롤 (IntersectionObserver)
  var labelObserver = null;   // 라벨 업데이트
  var articleData = {};       // 날짜별 기사 데이터
  var videoModal = null;      // 공통 비디오 모달 (VideoModalBase)
  var topLoadReady = false;   // 상단 스크롤 활성화 플래그
  /** 날짜피커 확정 직후, 구분선 IntersectionObserver가 라벨을 덮어쓰지 않도록 잠시 무시 */
  var labelObserverQuietUntil = 0;
  var lastLabelYear = null;
  var lastLabelMonth = null;

  // ------------------------------
  // 날짜 값 읽기/쓰기
  // ------------------------------

  function getDateValue() {
    var input = document.querySelector(".biztrend .date-select-value");
    if (!input) return { year: new Date().getFullYear(), month: new Date().getMonth() + 1 };

    var match = (input.value || "").match(/^(\d{4})-(\d{2})$/);
    if (match) {
      return {
        year: parseInt(match[1], 10),
        month: parseInt(match[2], 10),
      };
    }

    var now = new Date();
    return {
      year: now.getFullYear(),
      month: now.getMonth() + 1,
    };
  }

  function setDateValue(year, month) {
    var input = document.querySelector(".biztrend .date-select-value");
    var label = document.querySelector(".biztrend .date-select-label");

    if (input) {
      input.value = year + "-" + String(month).padStart(2, "0");
    }
    if (label) {
      var yearEl = label.querySelector(".date-select-year");
      var monthEl = label.querySelector(".date-select-month");
      if (yearEl) yearEl.textContent = year;
      if (monthEl) monthEl.textContent = month;
    }

    lastLabelYear = year;
    lastLabelMonth = month;
  }

  /** 달력·그리드에서 허용하는 최대 연·월(실시간 오늘 기준) */
  function getMaxCalendarYearMonth() {
    var now = new Date();
    return { year: now.getFullYear(), month: now.getMonth() + 1 };
  }

  /** (year, month)가 오늘 이후면 오늘 연·월로 제한 */
  function clampYearMonthToNow(year, month) {
    var max = getMaxCalendarYearMonth();
    if (year > max.year || (year === max.year && month > max.month)) {
      return { year: max.year, month: max.month };
    }
    return { year: year, month: month };
  }

  /** 날짜피커 연 휠: YEAR_START ~ min(YEAR_END, 올해) */
  function buildYearWheelItems() {
    var max = getMaxCalendarYearMonth();
    var hi = Math.min(YEAR_END, max.year);
    var years = [];
    for (var y = YEAR_START; y <= hi; y++) {
      years.push({ value: y, label: y + "년" });
    }
    if (!years.length) {
      var y = Math.min(YEAR_END, Math.max(YEAR_START, max.year));
      years.push({ value: y, label: y + "년" });
    }
    return years;
  }

  /** 날짜피커 월 휠: 과거 연은 1~12월, 올해는 1~이번 달만 */
  function buildMonthWheelItemsForYear(year) {
    var max = getMaxCalendarYearMonth();
    var endM = 12;
    if (year > max.year) {
      endM = 0;
    } else if (year === max.year) {
      endM = max.month;
    }
    var months = [];
    for (var m = 1; m <= endM; m++) {
      months.push({ value: m, label: m + "월" });
    }
    if (!months.length) {
      months.push({ value: 1, label: "1월" });
    }
    return months;
  }

  // ------------------------------
  // 달력 그리드 동적 생성
  // ------------------------------

  /**
   * 해당 월의 총 일수를 반환합니다.
   */
  function getDaysInMonth(year, month) {
    return new Date(year, month, 0).getDate();
  }

  /**
   * 월의 날짜를 월~토 6열 기준 행 배열로 반환합니다.
   * 일요일은 제외하며, 빈 셀은 null로 채웁니다.
   * @returns {Array<Array<number|null>>}
   */
  function buildMonthRows(year, month) {
    var daysInMonth = getDaysInMonth(year, month);
    var rows = [];
    var currentRow = [];

    for (var d = 1; d <= daysInMonth; d++) {
      var jsDay = new Date(year, month - 1, d).getDay(); // 0=일, 1=월, ..., 6=토

      if (jsDay === 0) continue; // 일요일 제외

      // 월요일이면 새 행 시작 (이전 행이 있으면 6칸 채우고 저장)
      if (jsDay === 1 && currentRow.length > 0) {
        while (currentRow.length < 6) currentRow.push(null);
        rows.push(currentRow);
        currentRow = [];
      }

      // 1일이 월요일이 아닐 때 앞 빈 칸 추가
      if (d === 1 && jsDay !== 1) {
        var emptyCount = jsDay - 1; // 월=0, 화=1, ..., 토=5
        for (var i = 0; i < emptyCount; i++) {
          currentRow.push(null);
        }
      }

      currentRow.push(d);

      // 토요일이면 행 완료
      if (jsDay === 6) {
        rows.push(currentRow);
        currentRow = [];
      }
    }

    // 마지막 행 처리
    if (currentRow.length > 0) {
      while (currentRow.length < 6) currentRow.push(null);
      rows.push(currentRow);
    }

    return rows;
  }

  // ------------------------------
  // 기사 데이터 로드
  // ------------------------------

  /** HTML의 #biztrend-data JSON을 읽어 articleData에 저장 */
  function loadArticleData() {
    var el = document.getElementById("biztrend-data");
    if (!el) return;
    try { articleData = JSON.parse(el.textContent); } catch (e) { articleData = {}; }
  }

  function syncLikedStateByContentId(contentId, isBookmarked) {
    var cid = String(contentId || "");
    if (!cid) return;

    Object.keys(articleData).forEach(function (dateKey) {
      var items = articleData[dateKey];
      if (!Array.isArray(items)) return;
      items.forEach(function (item) {
        if (String(item && item.contentId || "") !== cid) return;
        item.liked = !!isBookmarked;
      });
    });
  }

  function syncLikeButtonsByContentId(contentId, isBookmarked) {
    var cid = String(contentId || "");
    if (!cid) return;

    var selector = '.article-card-content[data-content-id="' + cssEscapeValue(cid) + '"] .article-card-like';
    var buttons = document.querySelectorAll(selector);
    buttons.forEach(function (btn) {
      btn.classList.toggle("is-active", !!isBookmarked);
      btn.setAttribute("aria-label", isBookmarked ? "좋아요 취소" : "좋아요");
    });

    // data-content-id가 없는 구버전 DOM 대비 fallback
    if (buttons.length) return;
    Object.keys(articleData).forEach(function (dateKey) {
      var items = articleData[dateKey];
      if (!Array.isArray(items)) return;
      items.forEach(function (item, idx) {
        if (String(item && item.contentId || "") !== cid) return;
        var contentEl = document.querySelector(
          '.article-card-content[data-date-key="' + cssEscapeValue(dateKey) + '"][data-item-idx="' + idx + '"]'
        );
        if (!contentEl) return;
        var btn = contentEl.querySelector('.article-card-like');
        if (!btn) return;
        btn.classList.toggle("is-active", !!isBookmarked);
        btn.setAttribute("aria-label", isBookmarked ? "좋아요 취소" : "좋아요");
      });
    });
  }

  function cssEscapeValue(value) {
    if (window.CSS && typeof window.CSS.escape === "function") {
      return window.CSS.escape(String(value));
    }
    return String(value).replace(/\\/g, "\\\\").replace(/"/g, '\\"');
  }

  /** XSS 방지용 HTML 이스케이프 */
  function escapeHtml(str) {
    return String(str)
      .replace(/&/g, "&amp;")
      .replace(/</g, "&lt;")
      .replace(/>/g, "&gt;")
      .replace(/"/g, "&quot;");
  }

  /**
   * 기사 콘텐츠 블록 HTML을 반환합니다.
   * @param {Object} item     - articleData의 항목 하나
   * @param {string} dateKey  - 날짜 키 (예: "2026-02-01")
   * @param {number} idx      - 해당 날짜 내 인덱스
   */
  function createContentHTML(item, dateKey, idx) {
    var contentId = String(item && (item.contentId || item.content_id) || "");

    // 제목 + 게이지 + 배지
    var titleBoxHTML =
      '<div class="article-card-title-box">' +
      '<h4 class="article-card-title">' + escapeHtml(item.title) + "</h4>";

    if (item.badge) {
      titleBoxHTML += '<span class="article-card-badge">' + escapeHtml(item.badge) + "</span>";
    }
    if (item.gauge != null) {
      titleBoxHTML +=
        '<div class="gauge-bar"><div class="gauge-fill" style="width:' + item.gauge + '%"></div></div>';
    }
    titleBoxHTML += "</div>";

    // 리스트
    var listHTML = "";
    if (item.list && item.list.length) {
      listHTML = '<ul class="article-card-list">';
      item.list.forEach(function (li) {
        listHTML += "<li>" + escapeHtml(li) + "</li>";
      });
      listHTML += "</ul>";
    }

    // 이미지 여부에 따라 내부 구조 분기
    var bodyHTML = item.image
      ? '<div class="article-card-image">' +
        '<div class="article-card-image-placeholder" aria-hidden="true">' +
        '<img src="' + escapeHtml(item.image) + '" alt="' + escapeHtml(item.title) + '">' +
        "</div>" +
        listHTML +
        "</div>"
      : listHTML;

    var likedClass = item.liked ? " is-active" : "";
    var likedLabel = item.liked ? "좋아요 취소" : "좋아요";

    var dkAttr = dateKey ? ' data-date-key="' + escapeHtml(dateKey) + '" data-item-idx="' + idx + '"' : "";

    var contentIdAttr = contentId
      ? ' data-content-id="' + escapeHtml(contentId) + '" data-content_id="' + escapeHtml(contentId) + '"'
      : "";

    return (
      '<div class="article-card-content"' + dkAttr + contentIdAttr + '>' +
      '<a href="#" class="article-card-link" data-video-id="' + escapeHtml(item.videoId || "") + '">' +
      titleBoxHTML +
      bodyHTML +
      "</a>" +
      '<button type="button" class="article-card-like' + likedClass + '" aria-label="' + likedLabel + '"></button>' +
      "</div>"
    );
  }

  /**
   * 날짜 카드 HTML을 반환합니다.
   */
  function createCardHTML(day, year, month) {
    var today = new Date();
    today.setHours(0, 0, 0, 0);

    var cardDate = new Date(year, month - 1, day);
    cardDate.setHours(0, 0, 0, 0);

    var jsDay = new Date(year, month - 1, day).getDay();
    var isWeekend = jsDay === 6; // 토요일
    var isToday = cardDate.getTime() === today.getTime();
    var isFuture = cardDate > today;

    var classes = ["article-card"];
    if (isWeekend) classes.push("weekend");
    if (isToday) classes.push("today");
    if (isFuture) classes.push("is-future");

    // 날짜 키로 기사 데이터 조회 (예: "2026-02-01")
    var dateKey =
      year + "-" +
      String(month).padStart(2, "0") + "-" +
      String(day).padStart(2, "0");
    var items = articleData[dateKey] || [];

    var contentsHTML = items.map(function (item, idx) {
      return createContentHTML(item, dateKey, idx);
    }).join("");

    return (
      '<article class="' + classes.join(" ") + '">' +
      '<span class="article-card-num" aria-hidden="true">' + day + "</span>" +
      contentsHTML +
      "</article>"
    );
  }

  /**
   * 빈 셀 HTML을 반환합니다.
   */
  function createEmptyCardHTML() {
    return '<article class="article-card is-empty" aria-hidden="true"></article>';
  }

  /**
   * 월 구분선 HTML을 반환합니다.
   */
  function createMonthSeparatorHTML(year, month) {
    return (
      '<div class="article-grid-month-sep" data-year="' + year + '" data-month="' + month + '">' +
      '<span class="article-grid-month-label">' + year + "년 " + month + "월</span>" +
      "</div>"
    );
  }

  /**
   * 특정 월의 모든 행 HTML을 반환합니다.
   */
  function buildMonthHTML(year, month, addSeparator) {
    var rows = buildMonthRows(year, month);
    var html = addSeparator ? createMonthSeparatorHTML(year, month) : "";

    rows.forEach(function (row) {
      html += '<div class="article-grid-row">';
      row.forEach(function (day) {
        if (day === null) {
          html += createEmptyCardHTML();
        } else {
          html += createCardHTML(day, year, month);
        }
      });
      html += "</div>";
    });

    return html;
  }

  /**
   * 다음 연·월을 반환합니다.
   */
  function getNextMonth(year, month) {
    if (month === 12) return { year: year + 1, month: 1 };
    return { year: year, month: month + 1 };
  }

  /**
   * 이전 연·월을 반환합니다.
   */
  function getPrevMonth(year, month) {
    if (month === 1) return { year: year - 1, month: 12 };
    return { year: year, month: month - 1 };
  }

  /**
   * 그리드 상단에 특정 월을 추가합니다. (스크롤 위치 유지)
   */
  function prependMonth(year, month) {
    var gridBody = document.querySelector(".biztrend .article-grid-body");
    if (!gridBody) return;

    // 이미 로드된 월 체크
    var alreadyLoaded = loadedMonths.some(function (m) {
      return m.year === year && m.month === month;
    });
    if (alreadyLoaded) return;

    // YEAR_START 이전은 추가하지 않음
    if (year < YEAR_START || (year === YEAR_START && month < 1)) return;

    loadedMonths.unshift({ year: year, month: month });

    var grid = document.querySelector(".biztrend .article-grid");
    var prevScrollTop = grid ? grid.scrollTop : 0;
    var prevScrollHeight = grid ? grid.scrollHeight : 0;

    // 새 달만 삽입 — appendMonth가 첫 달도 구분선을 포함하도록 맞춤
    var html = buildMonthHTML(year, month, true);

    gridBody.insertAdjacentHTML("afterbegin", html);

    // 그리드 스크롤 컨테이너 기준: 삽입 높이만큼 scrollTop 보정
    if (grid) {
      var addedHeight = grid.scrollHeight - prevScrollHeight;
      grid.scrollTop = prevScrollTop + addedHeight;
    }

    // 새 구분선 라벨 옵저버 등록
    observeMonthSeparators();

    // 새로 추가된 달이 화면 중앙에 올 때까지 상단 로드 비활성화
    topLoadReady = false;
    var newSep = gridBody.querySelector(
      '.article-grid-month-sep[data-year="' + year + '"][data-month="' + month + '"]'
    );
    if (newSep) {
      var centerObserver = new IntersectionObserver(
        function (entries) {
          entries.forEach(function (entry) {
            if (entry.isIntersecting) {
              topLoadReady = true;
              centerObserver.disconnect();
            }
          });
        },
        { root: null, rootMargin: "0px", threshold: 0 }
      );
      centerObserver.observe(newSep);
    } else {
      topLoadReady = true;
    }
  }

  /**
   * 그리드에 특정 월을 추가합니다.
   */
  function appendMonth(year, month) {
    var gridBody = document.querySelector(".biztrend .article-grid-body");
    if (!gridBody) return;

    var capNow = clampYearMonthToNow(year, month);
    if (capNow.year !== year || capNow.month !== month) return;

    // 이미 로드된 월 체크
    var alreadyLoaded = loadedMonths.some(function (m) {
      return m.year === year && m.month === month;
    });
    if (alreadyLoaded) return;

    loadedMonths.push({ year: year, month: month });

    // 첫 달도 구분선 포함 — labelObserver가 스크롤 복귀 시 첫 달을 감지할 수 있게 함
    var html = buildMonthHTML(year, month, true);

    // 센티넬 제거 → 콘텐츠 추가 → 센티넬 재추가
    var sentinel = document.getElementById("article-grid-sentinel");
    if (sentinel) sentinel.remove();

    gridBody.insertAdjacentHTML("beforeend", html);
    gridBody.insertAdjacentHTML(
      "beforeend",
      '<div id="article-grid-sentinel" class="article-grid-sentinel"></div>'
    );

    // 새로 추가된 센티넬 관찰
    if (scrollObserver) {
      var newSentinel = document.getElementById("article-grid-sentinel");
      if (newSentinel) scrollObserver.observe(newSentinel);
    }

    // 새로 추가된 월 구분선을 라벨 옵저버에 등록
    observeMonthSeparators();
  }

  /**
   * 선택한 연·월의 구분선이 그리드 뷰 상단 근처에 오도록 스크롤합니다.
   * (날짜피커로 점프했을 때 이전 scrollTop이 남아 달 상단이 안 보이는 문제 방지)
   */
  function scrollGridToMonthSeparator(year, month) {
    var grid = document.querySelector(".biztrend .article-grid");
    if (!grid) return;
    var sep = grid.querySelector(
      '.article-grid-month-sep[data-year="' + year + '"][data-month="' + month + '"]'
    );
    if (!sep) return;
    var gridRect = grid.getBoundingClientRect();
    var sepRect = sep.getBoundingClientRect();
    var nextTop =
      grid.scrollTop + (sepRect.top - gridRect.top) - GRID_SCROLL_TOP_OFFSET;
    // scrollTop===0이면 상단 무한 스크롤이 바로 동작할 수 있어, 기존과 같이 최소 오프셋 유지
    grid.scrollTop = Math.max(GRID_SCROLL_TOP_OFFSET, Math.max(0, nextTop));
  }

  /**
   * 그리드를 초기화하고 지정 월부터 렌더링합니다.
   */
  function renderCalendar(year, month) {
    var gridBody = document.querySelector(".biztrend .article-grid-body");
    if (!gridBody) return;

    // 휠/데이터 범위(YEAR_START~YEAR_END) 보정 후, 오늘 이후 연·월은 생성하지 않음
    month = Math.max(1, Math.min(12, month));
    if (year < YEAR_START) {
      year = YEAR_START;
      month = 1;
    } else if (year > YEAR_END) {
      year = YEAR_END;
      month = 12;
    }
    var cap = clampYearMonthToNow(year, month);
    year = cap.year;
    month = cap.month;
	//console.log("renderCalendar:");
    setDateValue(year, month);
    // 기존 옵저버 해제
    if (scrollObserver) { scrollObserver.disconnect(); scrollObserver = null; }

    // 상단 스크롤 리스너 정리 (중복 바인딩 방지)
    if (initTopScroll._handler && initTopScroll._target) {
      initTopScroll._target.removeEventListener("scroll", initTopScroll._handler);
      initTopScroll._handler = null;
      initTopScroll._target = null;
    }
    // 라벨 옵저버 초기화
    initLabelObserver();

    // 상태 초기화
    loadedMonths = [];
    topLoadReady = false;
    gridBody.innerHTML = "";

    // 첫 달 렌더링
    appendMonth(year, month);

    // 하단·상단 무한 스크롤 초기화
    initInfiniteScroll();
    initTopScroll();

    // 레이아웃 반영 후: 항상 해당 달 상단(월 구분선)이 보이도록 스크롤 초기화
    requestAnimationFrame(function () {
      requestAnimationFrame(function () {
        scrollGridToMonthSeparator(year, month);
      });
    });
  }

  // ------------------------------
  // 월 구분선 진입 시 라벨 업데이트 (IntersectionObserver)
  // ------------------------------

  /**
   * article-grid-month-sep가 뷰포트 상단 영역에 진입·이탈할 때 라벨을 갱신합니다.
   * - 진입(isIntersecting): 해당 월로 라벨 변경
   * - 이탈(위쪽으로 빠져나감): 이미 지나간 상태이므로 유지
   * - 이탈(아래쪽으로 빠져나감, 스크롤 업): 이전 달로 라벨 복원
   */
  function initLabelObserver() {
    if (labelObserver) labelObserver.disconnect();

    var grid = document.querySelector(".biztrend .article-grid");
	var l_chk = 0; var l_first = 0; var l_seps_length = 2;
    labelObserver = new IntersectionObserver(
      function (entries) {
        if (Date.now() < labelObserverQuietUntil) return;

        // 같은 콜백 안에서 여러 entry가 섞여 들어오면(진입/이탈 이벤트 동시 포함),
        // 기존 로직은 setDateValue가 여러 번 호출되며 라벨이 되돌아갈 수 있습니다.
        // 그래서 콜백마다 "활성 월 1개"만 결정해 1번만 업데이트합니다.
        var candidates = [];
        entries.forEach(function (entry) {
          if (!entry.isIntersecting) return;
          var target = entry.target;
          if (!target || !target.dataset) return;
          if (!target.dataset.year || !target.dataset.month) return;
          candidates.push(entry);
        });

        var chosen = null; 
        if (candidates.length) {
          // root(스케롤 컨테이너) 기준 상단에 가장 가까운 구분선 선택
          candidates.sort(function (a, b) {
            return a.boundingClientRect.top - b.boundingClientRect.top;
          });
          chosen = candidates[0].target;
		  //console.log("if_chosen:"+chosen.dataset.month);
		 // console.log("l_chk:"+l_chk);
		 // console.log("l_first:"+l_first);
		  if (l_first == 1){
			l_chk = 1;
		  }
		  l_first = 1;
        } else {
          // 빠른 스크롤로 intersecting entry가 비는 경우를 대비한 보정
          if (grid) {
            var rootRect = grid.getBoundingClientRect();
            var seps = grid.querySelectorAll(".article-grid-month-sep");
            var bestSep = null;
            var bestDist = Infinity;
            seps.forEach(function (sep) {
              var r = sep.getBoundingClientRect();
              var dist = r.top - rootRect.top;
              // root 상단 근처(약간 위 포함)에서 가장 가까운 것을 선택
              if (dist >= -2 && dist < bestDist) {
                bestDist = dist;
                bestSep = sep;
              }
            });
            chosen = bestSep;
			//console.log("seps.length:"+seps.length);
			if(l_seps_length == seps.length){
				l_chk = l_chk + 1;
			}
			l_seps_length = seps.length;
          }
        }

        if (!chosen || !chosen.dataset) return;
        var year = parseInt(chosen.dataset.year, 10);
        var month = parseInt(chosen.dataset.month, 10);
        if (isNaN(year) || isNaN(month)) return;

		//console.log("l_chk:"+l_chk);

		if(l_chk == 2){
			month = month -1;
			if(month == 0){
				year = year - 1;
				month = 12;
			}
			l_chk = 0;
		}

        // 변경이 있을 때만 업데이트(과도한 setDateValue 호출 방지)
        if (lastLabelYear === year && lastLabelMonth === month)return;
		//console.log("initLabelObserver");
		//console.log("month:"+month);
        setDateValue(year, month);
      },
      {
        // 실제 스크롤 컨테이너 기준으로 교차 판정해야 튐이 줄어듭니다.
        root: grid || null,
        rootMargin: "0px 0px 0px 0px",
        threshold: 0,
      }
    );
  }

  /**
   * 새로 추가된 월 구분선을 라벨 옵저버에 등록합니다.
   */
  function observeMonthSeparators() {
    if (!labelObserver) return;
    document.querySelectorAll(".biztrend .article-grid-month-sep").forEach(function (sep) {
      labelObserver.observe(sep);
    });
  }

  // ------------------------------
  // 무한 스크롤 (IntersectionObserver)
  // ------------------------------

  /** 하단: 다음 달 추가 */
  function initInfiniteScroll() {
    var sentinel = document.getElementById("article-grid-sentinel");
    if (!sentinel) return;

    scrollObserver = new IntersectionObserver(
      function (entries) {
        entries.forEach(function (entry) {
          if (entry.isIntersecting && loadedMonths.length > 0) {
            var last = loadedMonths[loadedMonths.length - 1];
            var next = getNextMonth(last.year, last.month);
            // 현재 달 이후는 로드하지 않음
            var now = new Date();
            var nowYear = now.getFullYear();
            var nowMonth = now.getMonth() + 1;
            if (next.year > nowYear || (next.year === nowYear && next.month > nowMonth)) return;
            appendMonth(next.year, next.month);
          }
        });
      },
      { root: null, rootMargin: "200px", threshold: 0 }
    );

    scrollObserver.observe(sentinel);
  }

  /** 상단: .article-grid 스크롤 최상단(scrollTop === 0)에서 이전 달 추가 */
  function initTopScroll() {
    if (!document.querySelector(".biztrend .article-grid-body")) return;

    var grid = document.querySelector(".biztrend .article-grid");
    if (!grid) return;

    topLoadReady = false;

    if (initTopScroll._handler && initTopScroll._target) {
      initTopScroll._target.removeEventListener("scroll", initTopScroll._handler);
    }

    initTopScroll._target = grid;
    initTopScroll._handler = function () {
      if (!topLoadReady || loadedMonths.length === 0) return;
      if (grid.scrollTop > 0) return;

      var first = loadedMonths[0];
      var prev = getPrevMonth(first.year, first.month);
      if (prev.year < YEAR_START) return;

      var lenBefore = loadedMonths.length;
      topLoadReady = false;
      prependMonth(prev.year, prev.month);
      if (loadedMonths.length === lenBefore) {
        topLoadReady = true;
      }
    };

    grid.addEventListener("scroll", initTopScroll._handler, { passive: true });

    setTimeout(function () { topLoadReady = true; }, 300);
  }

  // ------------------------------
  // 모달 팝업
  // ------------------------------

  /**
   * 공통 비디오 모달 인스턴스를 준비합니다.
   */
  function initModal() {
    if (videoModal) return;
    if (typeof VideoModalBase === "undefined") {
      console.warn("[biztrend] VideoModalBase를 찾을 수 없습니다.");
      return;
    }

    videoModal = new VideoModalBase({
      modalPath: "./_modal/video.php",
      modalPathTemplate: "./_modal/video-{type}.php",
    });
  }

  /**
   * 비디오 팝업을 열고 item 데이터를 채웁니다. (공통 비디오 모달 사용)
   */
  function openModal(dateKey, idx) {
    var items = articleData[dateKey];
    if (!items || !items[idx]) return;

    var item  = items[idx];
    if (!item.videoId) {
      if (typeof alert === "function") alert("방송 영상을 준비 중입니다.");
      return;
    }

    // 인라인 모달(#biztrendVideoModal)을 통해 열기
    if (typeof window._biztrendOpenModal === "function") {
      window._biztrendOpenModal({
        contentId:    item.contentId,
        videoUrl:     item.contentUrl || item.videoId,
        title:        item.title || "",
        description:  item.description || "",
        categoryName: "비즈트렌드",
        subCategory:  item.badge || "성공예감&별책부록",
        watchTm:      item.watchTm || 0,
        contentTm:    item.contentTm || 0,
        bookmark:     !!item.liked
      });
    } else {
      console.warn("[biztrend] _biztrendOpenModal을 찾을 수 없습니다.");
    }
  }

  /**
   * 그리드 클릭 이벤트 위임 — 주말 카드 제외, article-card-content 클릭 시 비디오 팝업 오픈
   */
  function initModalEvents() {
    var grid = document.querySelector(".biztrend .article-grid");
    if (!grid) return;

    grid.addEventListener("click", function (e) {
      // 링크 기본 동작 막기
      var link = e.target.closest(".article-card-link");
      if (link) e.preventDefault();

      // 좋아요(북마크) 버튼 클릭
      var likeBtn = e.target.closest(".article-card-like");
      if (likeBtn) {
        e.preventDefault();
        e.stopPropagation();
        handleLikeClick(likeBtn);
        return;
      }

      var content = e.target.closest(".article-card-content");
      if (!content) return;

      var dateKey = content.dataset.dateKey;
      var idx     = parseInt(content.dataset.itemIdx, 10);
      if (!dateKey || isNaN(idx)) return;

      openModal(dateKey, idx);
    });
  }

  /**
   * 좋아요(북마크) 버튼 클릭 핸들러
   */
  function handleLikeClick(btn) {
    var contentEl = btn.closest(".article-card-content");
    if (!contentEl) return;

    var dateKey = contentEl.dataset.dateKey;
    var idx     = parseInt(contentEl.dataset.itemIdx, 10);
    if (!dateKey || isNaN(idx)) return;

    var items = articleData[dateKey];
    if (!items || !items[idx]) return;

    var item = items[idx];
    if (!item.contentId) return;

    // 현재 상태 토글
    var isCurrentlyLiked = btn.classList.contains("is-active");
    var nextActive = isCurrentlyLiked ? "0" : "1";

    // UI 즉시 반영 (낙관적 업데이트)
    btn.disabled = true;
    btn.classList.toggle("is-active");
    btn.setAttribute("aria-label", isCurrentlyLiked ? "좋아요" : "좋아요 취소");

    var params = new URLSearchParams({
      content_id: String(item.contentId),
      is_active: nextActive
    });

    fetch("/bbs/api/save_wishlist.php", {
      method: "POST",
      headers: { "Content-Type": "application/x-www-form-urlencoded; charset=UTF-8" },
      body: params.toString()
    })
    .then(function (res) { return res.json(); })
    .then(function (data) {
      if (!data || !data.success) {
        // 실패 시 롤백
        btn.classList.toggle("is-active");
        btn.setAttribute("aria-label", isCurrentlyLiked ? "좋아요 취소" : "좋아요");
        console.warn("[biztrend] 북마크 저장 실패", data);
        return;
      }
      // articleData 동기화
      item.liked = !isCurrentlyLiked;
    })
    .catch(function (err) {
      // 에러 시 롤백
      btn.classList.toggle("is-active");
      btn.setAttribute("aria-label", isCurrentlyLiked ? "좋아요 취소" : "좋아요");
      console.warn("[biztrend] 북마크 요청 오류", err);
    })
    .finally(function () {
      btn.disabled = false;
    });
  }

  // ------------------------------
  // 날짜피커 휠 (연·월)
  // ------------------------------

  /**
   * 휠 트랙에 padding/가운데 정렬 마스크가 있으면 scrollTop ≈ index×높이 공식이 깨집니다.
   * 선택 항목 중심을 트랙 가운데에 맞춥니다.
   */
  function setWheelScrollToIndex(trackEl, index) {
    var nodeList = trackEl.querySelectorAll(".datepicker-wheel-item");
    var len = nodeList.length;
    if (!len) return;
    var idx = Math.max(0, Math.min(index, len - 1));
    var item = nodeList[idx];
    trackEl.style.scrollBehavior = "auto";
    var maxScroll = Math.max(0, trackEl.scrollHeight - trackEl.clientHeight);
    var guard = 0;
    while (guard++ < 12) {
      var trackRect = trackEl.getBoundingClientRect();
      var itemRect = item.getBoundingClientRect();
      var trackMid = trackRect.top + trackRect.height / 2;
      var itemMid = itemRect.top + itemRect.height / 2;
      var delta = itemMid - trackMid;
      if (Math.abs(delta) < 0.6) break;
      var nextTop = trackEl.scrollTop + delta;
      nextTop = Math.max(0, Math.min(nextTop, maxScroll));
      if (nextTop === trackEl.scrollTop) break;
      trackEl.scrollTop = nextTop;
    }
    trackEl.style.removeProperty("scroll-behavior");
  }

  function renderWheel(trackEl, items, selectedValue) {
    var idx = items.findIndex(function (i) {
      return i.value === selectedValue;
    });
    if (idx < 0) idx = 0;

    var itemsHtml = items
      .map(function (item, i) {
        var isSelected = i === idx ? " is-selected" : "";
        return (
          '<div class="datepicker-wheel-item' +
          isSelected +
          '" data-value="' +
          item.value +
          '">' +
          item.label +
          "</div>"
        );
      })
      .join("");

    /*
     * 마지막 항목(11·12월 등)도 선택 가이드(트랙 중앙)에 올리려면
     * 스크롤 가능 영역이 아래로 충분히 있어야 합니다. 상·하 패딩 스페이서로 보충합니다.
     */
    function layoutWheelWithPads() {
      trackEl.innerHTML = itemsHtml;
      var first = trackEl.querySelector(".datepicker-wheel-item");
      var ih = first && first.offsetHeight ? first.offsetHeight : 36;
      var ch = trackEl.clientHeight;
      var pad =
        ch > 0
          ? Math.max(0, Math.floor(ch / 2 - ih / 2))
          : Math.max(54, Math.floor(ih * 1.5));
      var padHtml =
        '<div class="datepicker-wheel-pad" aria-hidden="true" style="min-height:' +
        pad +
        "px;height:" +
        pad +
        'px;flex-shrink:0"></div>';
      trackEl.innerHTML = padHtml + itemsHtml + padHtml;
      setWheelScrollToIndex(trackEl, idx);
      syncWheelSelectedClass(trackEl);
    }

    requestAnimationFrame(function () {
      requestAnimationFrame(function () {
        layoutWheelWithPads();
      });
    });
  }

  /** 트랙 시야 중앙에 가장 가까운 항목 값 */
  function getSelectedFromWheel(trackEl) {
    var items = trackEl.querySelectorAll(".datepicker-wheel-item");
    if (!items.length) return null;
    var trackRect = trackEl.getBoundingClientRect();
    var trackMid = trackRect.top + trackRect.height / 2;
    var bestIdx = 0;
    var bestDist = Infinity;
    for (var i = 0; i < items.length; i++) {
      var r = items[i].getBoundingClientRect();
      var itemMid = r.top + r.height / 2;
      var d = Math.abs(itemMid - trackMid);
      if (d < bestDist) {
        bestDist = d;
        bestIdx = i;
      }
    }
    return parseInt(items[bestIdx].dataset.value, 10);
  }

  /** 현재 scrollTop 기준으로 해당 트랙의 is-selected만 맞춤 */
  function syncWheelSelectedClass(trackEl) {
    var val = getSelectedFromWheel(trackEl);
    if (val == null) return;
    trackEl.querySelectorAll(".datepicker-wheel-item").forEach(function (el) {
      el.classList.toggle(
        "is-selected",
        parseInt(el.dataset.value, 10) === val
      );
    });
  }

  function scrollToSelected(trackEl, value) {
    var item = trackEl.querySelector(
      '.datepicker-wheel-item[data-value="' + value + '"]'
    );
    if (!item) return;

    var allItems = trackEl.querySelectorAll(".datepicker-wheel-item");
    var idx = Array.prototype.indexOf.call(allItems, item);
    if (idx < 0) return;

    setWheelScrollToIndex(trackEl, idx);
    allItems.forEach(function (el) {
      el.classList.toggle(
        "is-selected",
        parseInt(el.dataset.value, 10) === value
      );
    });
  }

  // ------------------------------
  // 날짜피커 드롭다운 초기화
  // ------------------------------

  function initDatepickerDropdown() {
    var trigger = document.getElementById("datepicker-trigger");
    var dropdown = document.getElementById("datepicker-dropdown");
    if (!trigger || !dropdown) return;

    var yearTrack = dropdown.querySelector('[data-wheel="year"]');
    var monthTrack = dropdown.querySelector('[data-wheel="month"]');
    var lastYearForMonthWheel = null;

    function refreshMonthWheelFromYear() {
      var y = getSelectedFromWheel(yearTrack);
      if (y == null) return;
      if (lastYearForMonthWheel === y) return;
      lastYearForMonthWheel = y;
      var months = buildMonthWheelItemsForYear(y);
      var curM = getSelectedFromWheel(monthTrack);
      var maxM = months[months.length - 1].value;
      var minM = months[0].value;
      if (curM == null || isNaN(curM)) curM = minM;
      curM = Math.max(minM, Math.min(curM, maxM));
      renderWheel(monthTrack, months, curM);
    }

    function openDropdown() {
      dropdown.classList.add("is-open");
      dropdown.setAttribute("aria-hidden", "false");
      trigger.setAttribute("aria-expanded", "true");

      var raw = getDateValue();
      var v = clampYearMonthToNow(raw.year, raw.month);
      var yearItems = buildYearWheelItems();
      if (yearItems.length && v.year < yearItems[0].value) {
        v.year = yearItems[0].value;
      }
      if (yearItems.length && v.year > yearItems[yearItems.length - 1].value) {
        v.year = yearItems[yearItems.length - 1].value;
      }
      var monthItems = buildMonthWheelItemsForYear(v.year);
      var maxM = monthItems[monthItems.length - 1].value;
      var minM = monthItems[0].value;
      v.month = Math.max(minM, Math.min(v.month, maxM));

      lastYearForMonthWheel = v.year;
      renderWheel(yearTrack, yearItems, v.year);
      renderWheel(monthTrack, monthItems, v.month);

      document.addEventListener("keydown", onEscape);
      setTimeout(function () {
        document.addEventListener("click", onDocumentClick);
      }, 0);
    }

    function closeDropdown() {
      dropdown.classList.remove("is-open");
      dropdown.setAttribute("aria-hidden", "true");
      trigger.setAttribute("aria-expanded", "false");

      document.removeEventListener("keydown", onEscape);
      document.removeEventListener("click", onDocumentClick);
    }

    function onEscape(e) {
      if (e.key === "Escape") closeDropdown();
    }

    function onDocumentClick(e) {
      if (!dropdown.contains(e.target) && e.target !== trigger) {
        closeDropdown();
      }
    }

    function onConfirm() {
      // 모바일 관성 스크롤 직후 scrollTop 반영을 한 프레임 양보
      requestAnimationFrame(function () {
        requestAnimationFrame(function () {
          var year = getSelectedFromWheel(yearTrack);
          var month = getSelectedFromWheel(monthTrack);
          if (year != null && month != null) {
            var picked = clampYearMonthToNow(year, month);
            labelObserverQuietUntil = Date.now() + 600;
            setDateValue(picked.year, picked.month);
            renderCalendar(picked.year, picked.month);
          }
          closeDropdown();
        });
      });
    }

    trigger.addEventListener("click", function (e) {
      e.stopPropagation();
      if (dropdown.classList.contains("is-open")) {
        closeDropdown();
      } else {
        openDropdown();
      }
    });

    dropdown
      .querySelector(".btn-datepicker-cancel")
      .addEventListener("click", function (e) {
        e.stopPropagation();
        closeDropdown();
      });

    dropdown
      .querySelector(".btn-datepicker-confirm")
      .addEventListener("click", function (e) {
        e.stopPropagation();
        onConfirm();
      });

    yearTrack.addEventListener("scroll", function () {
      syncWheelSelectedClass(yearTrack);
      refreshMonthWheelFromYear();
    });
    monthTrack.addEventListener("scroll", function () {
      syncWheelSelectedClass(monthTrack);	  
    });

    yearTrack.addEventListener("click", function (e) {
      var item = e.target.closest(".datepicker-wheel-item");
      if (item) {
        scrollToSelected(yearTrack, parseInt(item.dataset.value, 10));
        requestAnimationFrame(function () {
          requestAnimationFrame(refreshMonthWheelFromYear);
        });
      }
    });
    monthTrack.addEventListener("click", function (e) {
      var item = e.target.closest(".datepicker-wheel-item");
      if (item) {
        scrollToSelected(monthTrack, parseInt(item.dataset.value, 10));
      }
    });
  }

  // ------------------------------
  // 페이지 초기화
  // ------------------------------

  function initBiztrendCalendar() {
    if (!document.querySelector(".wrap.biztrend")) return;

    // 인라인 모달 스크립트에서 발생시키는 북마크 변경 이벤트를 수신해
    // 페이지의 articleData를 동기화한다.
    function onBookmarkChanged(event) {
      var detail = event && event.detail ? event.detail : null;
      if (!detail) return;

      var cid = detail.contentId || detail.content_id;
      if (!cid) return;

      var isBookmarked = !!(detail.isBookmarked || detail.is_bookmarked || detail.isActive === "1");
      syncLikedStateByContentId(cid, isBookmarked);
      syncLikeButtonsByContentId(cid, isBookmarked);
    }

    window.addEventListener("biztrend:bookmark-changed", onBookmarkChanged);
    window.addEventListener("bookmark-changed", onBookmarkChanged);
    window.addEventListener("wishlist:changed", onBookmarkChanged);

    // 기사 데이터 로드 (#biztrend-data JSON)
    loadArticleData();

    // 현재 날짜로 날짜피커 라벨 초기화
    var now = new Date();
    var initYear = now.getFullYear();
    var initMonth = now.getMonth() + 1;
	//console.log("initBiztrendCalendar");
    setDateValue(initYear, initMonth);

    // 현재 달 기준 동적 그리드 렌더링 (renderCalendar 끝에서 스크롤 위치를 맞춤)
    renderCalendar(initYear, initMonth);

    initDatepickerDropdown();
    initModal();
    initModalEvents();
  }

  if (document.readyState === "loading") {
    document.addEventListener("DOMContentLoaded", initBiztrendCalendar);
  } else {
    initBiztrendCalendar();
  }
})();