@adstage/web-sdk 2.6.1 → 2.6.3

package/dist/index.umd.js

@@ -0,0 +1,4791 @@
+(function (global, factory) {
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
+    typeof define === 'function' && define.amd ? define(['exports'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.AdStage = {}));
+})(this, (function (exports) { 'use strict';
+
+    // 광고 타입 정의
+    var AdType;
+    (function (AdType) {
+        AdType["BANNER"] = "BANNER";
+        AdType["POPUP"] = "POPUP";
+        AdType["INTERSTITIAL"] = "INTERSTITIAL";
+        AdType["NATIVE"] = "NATIVE";
+        AdType["VIDEO"] = "VIDEO";
+        AdType["TEXT"] = "TEXT";
+    })(AdType || (AdType = {}));
+    // 플랫폼 정의
+    var Platform;
+    (function (Platform) {
+        Platform["WEB"] = "WEB";
+        Platform["MOBILE"] = "MOBILE";
+    })(Platform || (Platform = {}));
+    // 광고 이벤트 타입
+    var AdEventType;
+    (function (AdEventType) {
+        AdEventType["VIEWABLE"] = "VIEWABLE";
+        AdEventType["CLICK"] = "CLICK";
+    })(AdEventType || (AdEventType = {}));
+    // 디바이스 타입
+    var DeviceType;
+    (function (DeviceType) {
+        DeviceType["DESKTOP"] = "DESKTOP";
+        DeviceType["MOBILE"] = "MOBILE";
+        DeviceType["TABLET"] = "TABLET";
+    })(DeviceType || (DeviceType = {}));
+
+    /**
+     * SSR 안전한 DOM API 래퍼 클래스
+     * 서버사이드 렌더링 환경에서 DOM API 접근 시 오류를 방지합니다.
+     */
+    class DOMUtils {
+        /**
+         * 브라우저 환경 여부 체크
+         */
+        static isBrowser() {
+            return typeof window !== 'undefined' && typeof document !== 'undefined';
+        }
+        /**
+         * SSR 환경 여부 체크
+         */
+        static isSSR() {
+            return !this.isBrowser();
+        }
+        /**
+         * DOM 사용 가능 여부 체크
+         */
+        static canUseDOM() {
+            return this.isBrowser() && document.readyState !== undefined;
+        }
+        /**
+         * 안전한 getElementById
+         */
+        static safeGetElementById(id) {
+            if (!this.canUseDOM())
+                return null;
+            return document.getElementById(id);
+        }
+        /**
+         * 안전한 querySelector
+         */
+        static safeQuerySelector(selector) {
+            if (!this.canUseDOM())
+                return null;
+            return document.querySelector(selector);
+        }
+        /**
+         * 안전한 querySelectorAll
+         */
+        static safeQuerySelectorAll(selector) {
+            if (!this.canUseDOM())
+                return [];
+            return Array.from(document.querySelectorAll(selector));
+        }
+        /**
+         * 안전한 createElement
+         */
+        static safeCreateElement(tagName) {
+            if (!this.canUseDOM())
+                return null;
+            return document.createElement(tagName);
+        }
+        /**
+         * 안전한 addEventListener
+         */
+        static safeAddEventListener(element, event, handler, options) {
+            if (!this.canUseDOM() || !element)
+                return;
+            element.addEventListener(event, handler, options);
+        }
+        /**
+         * 안전한 removeEventListener
+         */
+        static safeRemoveEventListener(element, event, handler, options) {
+            if (!this.canUseDOM() || !element)
+                return;
+            element.removeEventListener(event, handler, options);
+        }
+        /**
+         * 안전한 window 속성 접근
+         */
+        static getWindowProperty(property, defaultValue) {
+            if (!this.isBrowser())
+                return defaultValue;
+            return window[property] ?? defaultValue;
+        }
+        /**
+         * 안전한 document 속성 접근
+         */
+        static getDocumentProperty(property, defaultValue) {
+            if (!this.canUseDOM())
+                return defaultValue;
+            return document[property] ?? defaultValue;
+        }
+        /**
+         * 안전한 window.open
+         */
+        static safeWindowOpen(url, target, features) {
+            if (!this.isBrowser())
+                return null;
+            return window.open(url, target, features);
+        }
+        /**
+         * 안전한 getComputedStyle
+         */
+        static safeGetComputedStyle(element) {
+            if (!this.isBrowser() || !element)
+                return null;
+            return window.getComputedStyle(element);
+        }
+        /**
+         * DOM Ready 상태 체크
+         */
+        static isDOMReady() {
+            if (!this.canUseDOM())
+                return false;
+            return document.readyState !== 'loading';
+        }
+        /**
+         * DOM Ready 대기 (SSR 안전)
+         */
+        static waitForDOM() {
+            return new Promise((resolve) => {
+                if (!this.canUseDOM()) {
+                    resolve(); // SSR 환경에서는 즉시 resolve
+                    return;
+                }
+                if (this.isDOMReady()) {
+                    resolve();
+                }
+                else {
+                    this.safeAddEventListener(document, 'DOMContentLoaded', () => resolve());
+                }
+            });
+        }
+        /**
+         * 안전한 스타일 적용
+         */
+        static safeApplyStyles(element, styles) {
+            if (!this.canUseDOM() || !element)
+                return;
+            Object.entries(styles).forEach(([property, value]) => {
+                element.style.setProperty(property, value);
+            });
+        }
+        /**
+         * 안전한 클래스 추가
+         */
+        static safeAddClass(element, className) {
+            if (!this.canUseDOM() || !element)
+                return;
+            element.classList.add(className);
+        }
+        /**
+         * 안전한 클래스 제거
+         */
+        static safeRemoveClass(element, className) {
+            if (!this.canUseDOM() || !element)
+                return;
+            element.classList.remove(className);
+        }
+        /**
+         * 안전한 텍스트 콘텐츠 설정
+         */
+        static safeSetTextContent(element, text) {
+            if (!this.canUseDOM() || !element)
+                return;
+            element.textContent = text;
+        }
+        /**
+         * 안전한 HTML 콘텐츠 설정
+         */
+        static safeSetInnerHTML(element, html) {
+            if (!this.canUseDOM() || !element)
+                return;
+            element.innerHTML = html;
+        }
+        /**
+         * 안전한 자식 요소 추가
+         */
+        static safeAppendChild(parent, child) {
+            if (!this.canUseDOM() || !parent || !child)
+                return;
+            parent.appendChild(child);
+        }
+        /**
+         * 안전한 자식 요소 제거
+         */
+        static safeRemoveChild(parent, child) {
+            if (!this.canUseDOM() || !parent || !child)
+                return;
+            parent.removeChild(child);
+        }
+        /**
+         * 현재 페이지 정보 가져오기 (SSR 안전)
+         */
+        static getPageInfo() {
+            return {
+                url: this.getWindowProperty('location', { href: '' }).href,
+                title: this.getDocumentProperty('title', ''),
+                referrer: this.getDocumentProperty('referrer', ''),
+            };
+        }
+        /**
+         * 뷰포트 정보 가져오기 (SSR 안전)
+         */
+        static getViewportInfo() {
+            return {
+                width: this.getWindowProperty('innerWidth', 0),
+                height: this.getWindowProperty('innerHeight', 0),
+                pixelRatio: this.getWindowProperty('devicePixelRatio', 1),
+            };
+        }
+        /**
+         * 스크롤 정보 가져오기 (SSR 안전)
+         */
+        static getScrollInfo() {
+            const scrollTop = this.canUseDOM()
+                ? (window.pageYOffset || document.documentElement.scrollTop)
+                : 0;
+            return {
+                scrollTop,
+                scrollLeft: this.getWindowProperty('pageXOffset', 0),
+            };
+        }
+        /**
+         * DOM 요소가 나타날 때까지 기다리기 (사용자 친화적 API)
+         */
+        static async waitForElement(id, options = {}) {
+            const { timeout = 3000, retryInterval = 100, debug = false } = options;
+            if (!this.canUseDOM()) {
+                throw new Error('DOM을 사용할 수 없는 환경입니다.');
+            }
+            // 즉시 찾을 수 있으면 바로 반환
+            const immediateElement = document.getElementById(id);
+            if (immediateElement) {
+                if (debug) {
+                    console.log(`✅ 컨테이너 즉시 발견: ${id}`);
+                }
+                return immediateElement;
+            }
+            if (debug) {
+                console.log(`⏳ 컨테이너 대기 시작: ${id} (최대 ${timeout}ms)`);
+            }
+            return new Promise((resolve, reject) => {
+                let attempts = 0;
+                const maxAttempts = Math.ceil(timeout / retryInterval);
+                const checkElement = () => {
+                    attempts++;
+                    const element = document.getElementById(id);
+                    if (element) {
+                        if (debug) {
+                            console.log(`✅ 컨테이너 발견: ${id} (${attempts}번째 시도, ${attempts * retryInterval}ms 경과)`);
+                        }
+                        resolve(element);
+                        return;
+                    }
+                    if (attempts >= maxAttempts) {
+                        const errorMessage = `❌ 컨테이너를 찾을 수 없습니다: "${id}"
+          
+다음을 확인해보세요:
+1. HTML에 id="${id}" 요소가 있는지 확인
+2. React 등에서 컴포넌트가 렌더링된 후 SDK 호출
+3. 철자가 정확한지 확인
+4. 중복된 ID가 없는지 확인
+
+대기 시간: ${timeout}ms (${attempts}번 시도)`;
+                        if (debug) {
+                            console.error(errorMessage);
+                        }
+                        reject(new Error(errorMessage));
+                        return;
+                    }
+                    if (debug && attempts % 10 === 0) {
+                        console.log(`⏳ 컨테이너 대기 중: ${id} (${attempts}/${maxAttempts})`);
+                    }
+                    // Exponential backoff: 처음엔 빠르게, 나중엔 느리게
+                    const nextInterval = Math.min(retryInterval * Math.pow(1.2, attempts), 500);
+                    setTimeout(checkElement, nextInterval);
+                };
+                // 첫 번째 체크는 즉시 실행
+                setTimeout(checkElement, retryInterval);
+            });
+        }
+        /**
+         * 여러 DOM 요소를 동시에 기다리기
+         */
+        static async waitForElements(ids, options = {}) {
+            const promises = ids.map(id => this.waitForElement(id, options));
+            return Promise.all(promises);
+        }
+    }
+
+    /**
+     * AdStage SDK - 버전 정보 유틸리티
+     */
+    // package.json에서 버전 정보 가져오기 (빌드 시 자동으로 교체됨)
+    const SDK_VERSION$1 = '"2.6.3"';
+    /**
+     * SDK 버전 정보 반환
+     */
+    function getSDKVersion() {
+        return SDK_VERSION$1;
+    }
+
+    /**
+     * AdStage SDK - 설정 유틸리티
+     * 전역 설정에 대한 접근 기능 제공
+     */
+    class ConfigUtils {
+        /**
+         * AdStage 전역 설정 반환
+         */
+        static getConfig() {
+            // AdStage 클래스 동적 임포트로 순환 참조 방지
+            try {
+                const { AdStage } = require('../core/adstage');
+                return AdStage.getConfig();
+            }
+            catch {
+                return null;
+            }
+        }
+        /**
+         * 고객 앱 버전 반환
+         */
+        static getAppVersion() {
+            const config = ConfigUtils.getConfig();
+            return config?.appVersion || '1.0.0';
+        }
+        /**
+         * 디버그 모드 여부 확인
+         */
+        static isDebugMode() {
+            const config = ConfigUtils.getConfig();
+            return config?.debug || false;
+        }
+        /**
+         * API 키 반환
+         */
+        static getApiKey() {
+            const config = ConfigUtils.getConfig();
+            return config?.apiKey;
+        }
+        /**
+         * 타임아웃 값 반환
+         */
+        static getTimeout() {
+            const config = ConfigUtils.getConfig();
+            return config?.timeout || 30000;
+        }
+        /**
+         * 플레이스홀더 모드 반환
+         */
+        static getPlaceholderMode() {
+            const config = ConfigUtils.getConfig();
+            return config?.placeholderMode || 'subtle';
+        }
+        /**
+         * 활성화된 모듈 목록 반환
+         */
+        static getEnabledModules() {
+            const config = ConfigUtils.getConfig();
+            return config?.modules || ['ads', 'events', 'config'];
+        }
+    }
+
+    /**
+     * 디바이스 정보 수집 클래스
+     * - 브라우저 환경 정보 수집
+     * - 디바이스 ID 생성 및 관리
+     * - 세션 ID 생성 및 관리
+     */
+    class DeviceInfoCollector {
+        /**
+         * 디바이스 ID 생성 및 반환 (SSR 안전)
+         */
+        static generateDeviceId() {
+            if (!DOMUtils.isBrowser())
+                return 'ssr_device_' + Date.now();
+            const stored = localStorage.getItem('adstage_device_id');
+            if (stored)
+                return stored;
+            const deviceId = 'device_' + Math.random().toString(36).substr(2, 9) + '_' + Date.now();
+            localStorage.setItem('adstage_device_id', deviceId);
+            return deviceId;
+        }
+        /**
+         * 세션 ID 생성 및 반환 (SSR 안전)
+         */
+        static generateSessionId() {
+            if (!DOMUtils.isBrowser())
+                return 'ssr_session_' + Date.now();
+            const stored = sessionStorage.getItem('adstage_session_id');
+            if (stored)
+                return stored;
+            const sessionId = 'session_' + Math.random().toString(36).substr(2, 9) + '_' + Date.now();
+            sessionStorage.setItem('adstage_session_id', sessionId);
+            return sessionId;
+        }
+        /**
+         * 모바일 디바이스 여부 확인 (SSR 안전)
+         */
+        static isMobile() {
+            if (!DOMUtils.isBrowser())
+                return false;
+            return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
+        }
+        /**
+         * 플랫폼 타입 반환 (서버 enum에 맞춤, SSR 안전)
+         */
+        static getPlatform() {
+            if (!DOMUtils.isBrowser())
+                return 'web';
+            const userAgent = navigator.userAgent.toLowerCase();
+            if (/iphone|ipad|ipod/.test(userAgent)) {
+                return 'ios';
+            }
+            if (/android/.test(userAgent)) {
+                return 'android';
+            }
+            if (DeviceInfoCollector.isMobile()) {
+                return 'web'; // 모바일 웹
+            }
+            return 'desktop'; // 데스크톱 웹
+        }
+        /**
+         * 완전한 디바이스 정보 수집
+         */
+        static collectDeviceInfo() {
+            const viewportInfo = DOMUtils.getViewportInfo();
+            return {
+                deviceId: DeviceInfoCollector.generateDeviceId(),
+                sessionId: DeviceInfoCollector.generateSessionId(),
+                osVersion: DOMUtils.isBrowser() ? navigator.platform : 'SSR',
+                deviceModel: DOMUtils.isBrowser() ? navigator.platform : 'SSR',
+                appVersion: ConfigUtils.getAppVersion(), // AdStage.init()에서 설정 또는 기본값 '1.0.0'
+                sdkVersion: getSDKVersion(), // package.json에서 동적 로드
+                language: DOMUtils.isBrowser() ? (navigator.language || 'ko') : 'ko',
+                country: 'KR', // 기본값
+                ipAddress: '', // 서버에서 자동으로 설정됨
+                userAgent: DOMUtils.isBrowser() ? navigator.userAgent : 'SSR',
+                timezone: DOMUtils.isBrowser() ? Intl.DateTimeFormat().resolvedOptions().timeZone : 'UTC',
+                viewportWidth: viewportInfo.width,
+                viewportHeight: viewportInfo.height,
+                screenWidth: DOMUtils.isBrowser() ? screen.width : 0,
+                screenHeight: DOMUtils.isBrowser() ? screen.height : 0,
+                colorDepth: DOMUtils.isBrowser() ? screen.colorDepth : 24,
+                pixelRatio: viewportInfo.pixelRatio,
+                connectionType: DOMUtils.isBrowser() ? (navigator.connection?.effectiveType || 'unknown') : 'unknown',
+                platform: DeviceInfoCollector.getPlatform(),
+            };
+        }
+        /**
+         * 슬롯 위치 정보 가져오기 (SSR 안전)
+         */
+        static getSlotPosition(containerId) {
+            const element = DOMUtils.safeGetElementById(containerId);
+            if (!element)
+                return 'unknown';
+            const rect = element.getBoundingClientRect();
+            const scrollInfo = DOMUtils.getScrollInfo();
+            return `x:${Math.round(rect.left)},y:${Math.round(rect.top + scrollInfo.scrollTop)}`;
+        }
+    }
+
+    /**
+     * AdStage SDK - API 헤더 유틸리티
+     * 공통 헤더 생성 로직
+     */
+    class ApiHeaders {
+        /**
+         * 표준 API 헤더 생성
+         */
+        static create(apiKey, options) {
+            if (!apiKey) {
+                throw new Error('API key is required');
+            }
+            const headers = {
+                'x-api-key': apiKey,
+                'Content-Type': options?.contentType || 'application/json'
+            };
+            // User-Agent는 이벤트 추적에서 실제로 사용됨
+            if (typeof navigator !== 'undefined') {
+                headers['User-Agent'] = options?.userAgent || navigator.userAgent;
+            }
+            // X-Current-URL은 현재 서버에서 사용하지 않으므로 제거
+            // 필요시 이벤트 데이터 body에 포함
+            return headers;
+        }
+        /**
+         * 이벤트 추적용 헤더 생성
+         * User-Agent는 서버에서 실제로 사용됨
+         */
+        static createForEvents(apiKey, eventData) {
+            const baseHeaders = ApiHeaders.create(apiKey);
+            // User-Agent 오버라이드 (서버에서 실제 사용)
+            if (eventData?.userAgent) {
+                baseHeaders['User-Agent'] = eventData.userAgent;
+            }
+            // 다른 정보들은 HTTP 헤더가 아닌 이벤트 데이터 body에 포함하는 것이 적절
+            // (currentUrl, referrer 등은 POST body로 전송)
+            return baseHeaders;
+        }
+    }
+
+    /**
+     * 광고 이벤트 추적 관리 클래스
+     * - 광고 전용 이벤트 추적 및 전송
+     * - Viewable 이벤트 중복 방지 통합
+     * - 광고 서버 API 통신
+     */
+    class AdvertisementEventTracker {
+        constructor(baseUrl, apiKey, debug, slots) {
+            this.baseUrl = baseUrl;
+            this.apiKey = apiKey;
+            this.debug = debug;
+            this.slots = slots;
+        }
+        /**
+         * 광고 이벤트 추적 - 단순화된 viewable 처리
+         */
+        async trackAdvertisementEvent(adId, slotId, eventType) {
+            try {
+                if (this.debug) {
+                    console.log(`🚀 AdvertisementEventTracker: Processing ${eventType} event for ad ${adId} in slot ${slotId}`);
+                }
+                // 현재 슬롯 정보 가져오기
+                const slot = this.slots.get(slotId);
+                // 디바이스 정보 수집
+                const deviceInfo = DeviceInfoCollector.collectDeviceInfo();
+                // 광고 이벤트 데이터 구성 (단순화됨)
+                const eventData = {
+                    // 필수 필드들 (DTO 검증용)
+                    adType: slot?.adType || 'BANNER',
+                    platform: deviceInfo.platform,
+                    deviceId: deviceInfo.deviceId,
+                    // 디바이스 정보는 deviceInfo 객체로 래핑
+                    deviceInfo: deviceInfo,
+                    // 페이지 및 슬롯 정보
+                    pageUrl: DOMUtils.getPageInfo().url,
+                    pageTitle: DOMUtils.getPageInfo().title,
+                    referrer: DOMUtils.getPageInfo().referrer,
+                    slotId,
+                    slotPosition: DeviceInfoCollector.getSlotPosition(slot?.containerId || ''),
+                    slotWidth: AdvertisementEventTracker.parseNumericValue(slot?.width),
+                    slotHeight: AdvertisementEventTracker.parseNumericValue(slot?.height),
+                    sessionId: deviceInfo.sessionId,
+                    // 성능 메트릭
+                    pageLoadTime: performance.now(),
+                    // 추가 메타데이터
+                    metadata: {
+                        eventType,
+                        sdkVersion: getSDKVersion(),
+                        timestamp: Date.now(),
+                    },
+                    // VIEWABLE 이벤트의 경우 단순한 플래그만 설정
+                    ...(eventType === AdEventType.VIEWABLE && {
+                        isViewable: true,
+                        iabCompliant: true, // 50% 노출 기준으로 단순 판정
+                    }),
+                };
+                const url = `${this.baseUrl}/advertisements/events/${adId}/${eventType}`;
+                const headers = ApiHeaders.createForEvents(this.apiKey, eventData);
+                if (this.debug) {
+                    console.log(`🚀 Sending advertisement event: ${eventType} for ad ${adId}`, {
+                        url,
+                        headers,
+                        eventData
+                    });
+                    console.log(`🌐 Full API call details:`, {
+                        method: 'POST',
+                        url,
+                        hasApiKey: !!this.apiKey,
+                        bodySize: JSON.stringify(eventData).length
+                    });
+                }
+                const response = await fetch(url, {
+                    method: 'POST',
+                    headers,
+                    body: JSON.stringify(eventData),
+                });
+                if (this.debug) {
+                    console.log(`📡 API Response Status: ${response.status} ${response.statusText}`, {
+                        url,
+                        ok: response.ok
+                    });
+                }
+                if (!response.ok) {
+                    const errorText = await response.text();
+                    throw new Error(`API request failed: ${response.status} ${response.statusText} - ${errorText}`);
+                }
+                if (this.debug) {
+                    console.log(`✅ Successfully tracked advertisement event: ${eventType} for ad ${adId}`);
+                }
+            }
+            catch (error) {
+                console.error('❌ Failed to track advertisement event:', error);
+                console.error('🔍 Debug info:', {
+                    baseUrl: this.baseUrl,
+                    apiKey: this.apiKey ? `${this.apiKey.substring(0, 8)}...` : 'NOT_SET',
+                    url: `${this.baseUrl}/advertisements/events/${adId}/${eventType}`,
+                    eventType,
+                    adId,
+                    slotId
+                });
+            }
+        }
+        /**
+         * 크기 값을 숫자로 변환 (서버 API용)
+         */
+        static parseNumericValue(value) {
+            if (typeof value === 'number') {
+                return value;
+            }
+            if (typeof value === 'string') {
+                // px 단위 제거하고 숫자만 추출
+                const numericValue = parseFloat(value.replace(/px$/, ''));
+                return isNaN(numericValue) ? 0 : numericValue;
+            }
+            return 0; // 기본값
+        }
+    }
+
+    /**
+     * 단순한 광고 노출 추적 (50% 노출시 즉시 VIEWABLE 이벤트)
+     */
+    class SimpleViewabilityTracker {
+        constructor(element, onViewable) {
+            this.observer = null;
+            this.isViewableTriggered = false;
+            this.element = element;
+            this.onViewableCallback = onViewable;
+            this.initIntersectionObserver();
+        }
+        initIntersectionObserver() {
+            // IntersectionObserver 지원 확인
+            if (!('IntersectionObserver' in window)) {
+                console.warn('IntersectionObserver not supported, viewability tracking disabled');
+                return;
+            }
+            this.observer = new IntersectionObserver((entries) => this.handleIntersection(entries), {
+                threshold: 0.5, // 50% 노출
+                rootMargin: '0px'
+            });
+            this.observer.observe(this.element);
+        }
+        handleIntersection(entries) {
+            entries.forEach(entry => {
+                // 50% 이상 노출되고 문서가 가시상태이며 아직 트리거되지 않은 경우
+                if (entry.intersectionRatio >= 0.5 &&
+                    this.isDocumentVisible() &&
+                    !this.isViewableTriggered) {
+                    this.isViewableTriggered = true;
+                    if (this.onViewableCallback) {
+                        this.onViewableCallback();
+                    }
+                }
+            });
+        }
+        isDocumentVisible() {
+            return !document.hidden && document.visibilityState === 'visible';
+        }
+        destroy() {
+            if (this.observer) {
+                this.observer.disconnect();
+                this.observer = null;
+            }
+        }
+    }
+
+    /**
+     * AdStage SDK 엔드포인트 상수 관리
+     * 모든 API URL을 중앙에서 관리
+     */
+    /**
+     * 환경별 API 엔드포인트 (읽기 전용)
+     */
+    const API_ENDPOINTS = {
+        /** 프로덕션 환경 */
+        production: 'https://api.adstage.io',
+        /** 베타 환경 (기본값) */
+        beta: 'https://beta-api.adstage.app'
+    };
+    /**
+     * API 경로 상수
+     */
+    const API_PATHS = {
+        /** 광고 관련 */
+        advertisements: {
+            list: '/advertisements/list',
+            detail: '/advertisements',
+            events: '/advertisements/events'
+        },
+        /** 이벤트 관련 */
+        events: {
+            track: '/events/track',
+        }
+    };
+    /**
+     * 완전한 API URL 생성 헬퍼
+     */
+    class EndpointBuilder {
+        constructor(baseUrl) {
+            /**
+             * 광고 엔드포인트
+             */
+            this.advertisements = {
+                list: () => `${this.baseUrl}${API_PATHS.advertisements.list}`,
+                detail: (adId) => `${this.baseUrl}${API_PATHS.advertisements.detail}/${adId}`,
+                events: (adId, eventType) => `${this.baseUrl}${API_PATHS.advertisements.events}/${adId}/${eventType}`
+            };
+            /**
+             * 이벤트 엔드포인트
+             */
+            this.events = {
+                track: () => `${this.baseUrl}${API_PATHS.events.track}`,
+            };
+            // 기본값은 베타 환경 사용
+            this.baseUrl = baseUrl || API_ENDPOINTS.production;
+        }
+        /**
+         * 기본 URL 변경
+         */
+        setBaseUrl(url) {
+            this.baseUrl = url;
+        }
+        /**
+         * 기본 URL 반환
+         */
+        getBaseUrl() {
+            return this.baseUrl;
+        }
+        /**
+         * 커스텀 경로 생성
+         */
+        custom(path) {
+            return `${this.baseUrl}${path.startsWith('/') ? path : `/${path}`}`;
+        }
+    }
+    /**
+     * 전역 엔드포인트 빌더 인스턴스 (기본: 베타 환경)
+     */
+    const endpoints = new EndpointBuilder();
+
+    /**
+     * 슬라이더 이벤트 추적 공통 유틸리티
+     * - 모든 슬라이더 타입에서 일관된 VIEWABLE 이벤트 추적
+     * - 중복 방지는 상위 레벨에서 처리
+     */
+    class SliderEventTracker {
+        /**
+         * 슬라이드 변경 시 VIEWABLE 이벤트 추적
+         * @param advertisement 현재 슬라이드의 광고
+         * @param slot 광고 슬롯
+         * @param slideIndex 현재 슬라이드 인덱스
+         * @param trackEventCallback 이벤트 추적 콜백
+         * @param debug 디버그 모드
+         */
+        static trackSlideViewable(advertisement, slot, slideIndex, trackEventCallback, debug = false) {
+            if (debug) {
+                console.log(`🎯 Triggering VIEWABLE event for slide change: ad ${advertisement._id} (index: ${slideIndex}) in slot: ${slot.id}`);
+            }
+            // 모든 슬라이드에 대해 VIEWABLE 이벤트 추적 (첫 번째 포함)
+            trackEventCallback(advertisement._id, slot.id, AdEventType.VIEWABLE);
+        }
+        /**
+         * 초기 슬라이드 로딩 시 VIEWABLE 이벤트 추적
+         * @param advertisement 첫 번째 슬라이드의 광고
+         * @param slot 광고 슬롯
+         * @param trackEventCallback 이벤트 추적 콜백
+         * @param debug 디버그 모드
+         */
+        static trackInitialSlideViewable(advertisement, slot, trackEventCallback, debug = false) {
+            if (debug) {
+                console.log(`🎯 Triggering initial VIEWABLE event: ad ${advertisement._id} (index: 0) in slot: ${slot.id}`);
+            }
+            // 첫 번째 슬라이드도 동일하게 추적
+            trackEventCallback(advertisement._id, slot.id, AdEventType.VIEWABLE);
+        }
+    }
+
+    /**
+     * 광고 클릭 이벤트 핸들러 유틸리티
+     * 모든 광고 타입에서 일관된 클릭 이벤트 처리를 위한 공통 컴포넌트
+     */
+    class AdClickHandler {
+        /**
+         * 광고 요소에 클릭 이벤트를 추가하는 공통 함수
+         * @param element - 클릭 이벤트를 추가할 DOM 요소
+         * @param advertisement - 광고 데이터
+         * @param slot - 광고 슬롯 정보
+         * @param trackEventCallback - 이벤트 추적 콜백 함수
+         * @param debug - 디버그 모드
+         * @param adTypeLabel - 광고 타입 라벨 (로그용, 선택사항)
+         */
+        static addClickEvent(element, advertisement, slot, trackEventCallback, debug = false, adTypeLabel) {
+            // linkUrl이 없으면 클릭 이벤트 추가하지 않음
+            if (!advertisement.linkUrl) {
+                return;
+            }
+            // 커서 스타일 설정
+            element.style.cursor = 'pointer';
+            // 클릭 이벤트 리스너 추가
+            element.addEventListener('click', (e) => {
+                e.preventDefault();
+                e.stopPropagation();
+                // 이벤트 추적
+                if (trackEventCallback) {
+                    trackEventCallback(advertisement._id, slot.id, AdEventType.CLICK);
+                }
+                // 링크 이동
+                window.open(advertisement.linkUrl, '_blank');
+                // 디버그 로그
+                if (debug) {
+                    const typeLabel = adTypeLabel || String(slot.adType).toLowerCase();
+                    console.log(`🔗 ${typeLabel} ad clicked: ${advertisement._id} -> ${advertisement.linkUrl}`);
+                }
+            });
+        }
+        /**
+         * 렌더러에서 사용할 수 있는 간편한 클릭 이벤트 추가 함수
+         * BaseAdRenderer를 상속받은 클래스에서 사용
+         * @param element - 클릭 이벤트를 추가할 DOM 요소
+         * @param advertisement - 광고 데이터
+         * @param slot - 광고 슬롯 정보
+         * @param createEventTrackingCallback - 이벤트 추적 콜백 생성 함수
+         * @param debug - 디버그 모드
+         * @param adTypeLabel - 광고 타입 라벨 (로그용, 선택사항)
+         */
+        static addClickEventForRenderer(element, advertisement, slot, createEventTrackingCallback, debug = false, adTypeLabel) {
+            // linkUrl이 없으면 클릭 이벤트 추가하지 않음
+            if (!advertisement.linkUrl) {
+                return;
+            }
+            // 커서 스타일 설정
+            element.style.cursor = 'pointer';
+            // 클릭 이벤트 리스너 추가
+            element.addEventListener('click', (e) => {
+                e.preventDefault();
+                e.stopPropagation();
+                // 이벤트 추적 콜백 생성
+                const trackEventCallback = createEventTrackingCallback();
+                trackEventCallback(advertisement._id, slot.id, AdEventType.CLICK);
+                // 링크 이동
+                window.open(advertisement.linkUrl, '_blank');
+                // 디버그 로그
+                if (debug) {
+                    const typeLabel = adTypeLabel || String(slot.adType).toLowerCase();
+                    console.log(`🔗 ${typeLabel} ad clicked: ${advertisement._id} -> ${advertisement.linkUrl}`);
+                }
+            });
+        }
+        /**
+         * 슬라이더/매니저에서 사용할 수 있는 클릭 이벤트 추가 함수
+         * 이미 trackEventCallback이 준비된 상황에서 사용
+         * @param element - 클릭 이벤트를 추가할 DOM 요소
+         * @param advertisement - 광고 데이터
+         * @param slot - 광고 슬롯 정보
+         * @param trackEventCallback - 준비된 이벤트 추적 콜백
+         * @param debug - 디버그 모드
+         * @param adTypeLabel - 광고 타입 라벨 (로그용, 선택사항)
+         */
+        static addClickEventForSlider(element, advertisement, slot, trackEventCallback, debug = false, adTypeLabel) {
+            this.addClickEvent(element, advertisement, slot, trackEventCallback, debug, adTypeLabel);
+        }
+        /**
+         * 클릭 가능한 광고인지 확인하는 헬퍼 함수
+         * @param advertisement - 광고 데이터
+         * @returns linkUrl이 있으면 true, 없으면 false
+         */
+        static isClickable(advertisement) {
+            return Boolean(advertisement.linkUrl);
+        }
+        /**
+         * 여러 요소에 대해 일괄적으로 클릭 이벤트를 추가하는 함수
+         * @param elements - 클릭 이벤트를 추가할 DOM 요소들
+         * @param advertisements - 광고 데이터 배열 (elements와 같은 순서)
+         * @param slot - 광고 슬롯 정보
+         * @param trackEventCallback - 이벤트 추적 콜백
+         * @param debug - 디버그 모드
+         * @param adTypeLabel - 광고 타입 라벨 (로그용, 선택사항)
+         */
+        static addClickEventsBatch(elements, advertisements, slot, trackEventCallback, debug = false, adTypeLabel) {
+            elements.forEach((element, index) => {
+                const advertisement = advertisements[index];
+                if (advertisement) {
+                    this.addClickEvent(element, advertisement, slot, trackEventCallback, debug, adTypeLabel);
+                }
+            });
+        }
+    }
+
+    /**
+     * 캐러셀 슬라이더 관리 클래스
+     * - 배너/비디오 광고용 가로 슬라이드 (횡 스크롤)
+     * - 무한 루프 캐러셀 지원
+     * - 터치 제스처 및 자동 슬라이드 기능
+     * - 도트 인디케이터 포함
+     */
+    class CarouselSliderManager {
+        /**
+         * 간단한 광고 요소 생성 (크기 측정용)
+         */
+        static createSimpleAdElement(slot, advertisement) {
+            const adElement = document.createElement('div');
+            adElement.className = `adstage-ad adstage-${String(slot.adType).toLowerCase()}`;
+            adElement.setAttribute('data-adstage-ad-id', advertisement._id);
+            adElement.setAttribute('data-adstage-slot-id', slot.id);
+            // 기본 스타일 설정
+            adElement.style.display = 'block';
+            adElement.style.width = '100%';
+            adElement.style.height = 'auto';
+            // 광고 타입별 기본 컨테이너 설정
+            switch (slot.adType) {
+                case AdType.BANNER:
+                    if (advertisement.imageUrl) {
+                        const img = document.createElement('img');
+                        img.src = advertisement.imageUrl;
+                        img.style.width = '100%';
+                        img.style.height = 'auto';
+                        img.style.objectFit = 'cover';
+                        adElement.appendChild(img);
+                    }
+                    else {
+                        adElement.style.height = '100px';
+                        adElement.style.backgroundColor = '#f0f0f0';
+                        adElement.style.border = '1px dashed #ccc';
+                        adElement.textContent = 'Banner Ad';
+                    }
+                    break;
+                case AdType.VIDEO:
+                    if (advertisement.videoUrl) {
+                        const video = document.createElement('video');
+                        video.src = advertisement.videoUrl;
+                        video.style.width = '100%';
+                        video.style.height = 'auto';
+                        adElement.appendChild(video);
+                    }
+                    else {
+                        adElement.style.height = '200px';
+                        adElement.style.backgroundColor = '#000';
+                        adElement.style.border = '1px solid #666';
+                        adElement.textContent = 'Video Ad';
+                        adElement.style.color = 'white';
+                    }
+                    break;
+                case AdType.TEXT:
+                    if (advertisement.textContent) {
+                        const textDiv = document.createElement('div');
+                        textDiv.textContent = advertisement.textContent || '';
+                        textDiv.style.padding = '8px';
+                        textDiv.style.fontSize = '14px';
+                        adElement.appendChild(textDiv);
+                    }
+                    else {
+                        adElement.style.height = '50px';
+                        adElement.style.padding = '8px';
+                        adElement.textContent = 'Text Ad';
+                    }
+                    break;
+                default:
+                    adElement.style.height = '100px';
+                    adElement.style.border = '1px dashed #ccc';
+                    adElement.style.backgroundColor = '#f9f9f9';
+                    adElement.textContent = `${slot.adType} Ad`;
+            }
+            return adElement;
+        }
+        /**
+         * Create carousel slider container with dot indicators and navigation
+         */
+        static createSliderContainer(slot, advertisements, options, trackEventCallback, debug = false) {
+            const sliderWrapper = document.createElement('div');
+            sliderWrapper.className = 'adstage-slider-wrapper';
+            // 사용자 지정 크기가 있으면 적용, 없으면 콘텐츠 크기에 맞춤
+            const containerStyles = {
+                position: 'relative',
+                overflow: 'hidden',
+            };
+            // 사용자가 크기를 지정한 경우
+            if (slot.width && slot.width !== 0) {
+                let width;
+                if (typeof slot.width === 'string') {
+                    // 문자열인 경우 px 단위가 있는지 확인
+                    width = slot.width.includes('px') || slot.width.includes('%') ? slot.width : `${slot.width}px`;
+                }
+                else {
+                    // 숫자인 경우 px 단위 추가
+                    width = `${slot.width}px`;
+                }
+                containerStyles.width = width;
+                containerStyles.display = 'inline-block'; // 지정된 크기에 맞춤 (좌측 정렬)
+            }
+            else {
+                // 컨텐츠 크기에 맞춤
+                containerStyles.display = 'inline-block';
+            }
+            if (slot.height && slot.height !== 0) {
+                const height = typeof slot.height === 'string' ? slot.height : `${slot.height}px`;
+                containerStyles.height = height;
+            }
+            // 스타일 적용
+            Object.entries(containerStyles).forEach(([key, value]) => {
+                sliderWrapper.style.setProperty(key, value);
+            });
+            // 크기 측정 (width나 height가 설정되지 않은 경우)
+            const needsWidthMeasurement = !slot.width || slot.width === 0;
+            const needsHeightMeasurement = !slot.height || slot.height === 0;
+            if (needsWidthMeasurement || needsHeightMeasurement) {
+                const measureContainer = document.createElement('div');
+                measureContainer.style.cssText = `
+        position: absolute;
+        visibility: hidden;
+        white-space: nowrap;
+        top: -9999px;
+        left: -9999px;
+      `;
+                // width가 설정되어 있으면 측정 컨테이너에도 적용
+                if (!needsWidthMeasurement && slot.width) {
+                    let width;
+                    if (typeof slot.width === 'string') {
+                        width = slot.width.includes('px') || slot.width.includes('%') ? slot.width : `${slot.width}px`;
+                    }
+                    else {
+                        width = `${slot.width}px`;
+                    }
+                    measureContainer.style.width = width;
+                    measureContainer.style.whiteSpace = 'normal'; // width가 있으면 줄바꿈 허용
+                }
+                document.body.appendChild(measureContainer);
+                let maxWidth = 0;
+                let maxHeight = 0;
+                // 모든 광고의 크기를 측정하여 최대 크기 찾기
+                advertisements.forEach(ad => {
+                    const measureAdElement = this.createSimpleAdElement(slot, ad);
+                    measureContainer.appendChild(measureAdElement);
+                    const rect = measureAdElement.getBoundingClientRect();
+                    if (rect.width > maxWidth)
+                        maxWidth = rect.width;
+                    if (rect.height > maxHeight)
+                        maxHeight = rect.height;
+                    // 측정 후 요소 제거
+                    measureContainer.removeChild(measureAdElement);
+                });
+                // 측정된 최대 크기로 래퍼 크기 설정
+                if (needsWidthMeasurement && maxWidth > 0) {
+                    sliderWrapper.style.width = `${maxWidth}px`;
+                    containerStyles.width = `${maxWidth}px`;
+                }
+                if (needsHeightMeasurement && maxHeight > 0) {
+                    sliderWrapper.style.height = `${maxHeight}px`;
+                    containerStyles.height = `${maxHeight}px`;
+                }
+                // 측정 컨테이너 제거
+                document.body.removeChild(measureContainer);
+            }
+            // 무한 루프를 위해 첫 번째 슬라이드를 마지막에 복사
+            const extendedAds = [...advertisements, advertisements[0]];
+            // 슬라이드 컨테이너
+            const slideContainer = document.createElement('div');
+            slideContainer.className = 'adstage-slide-container';
+            // 슬라이드 컨테이너 스타일 - 항상 기본 설정 적용
+            const slideContainerStyles = {
+                display: 'flex',
+                transition: 'transform 0.4s ease-out',
+                width: `${extendedAds.length * 100}%`,
+            };
+            if (slot.height && slot.height !== 0) {
+                slideContainerStyles.height = '100%';
+            }
+            Object.entries(slideContainerStyles).forEach(([key, value]) => {
+                slideContainer.style.setProperty(key, value);
+            });
+            // 각 광고를 슬라이드로 생성 (복사된 첫 번째 포함)
+            extendedAds.forEach((ad, index) => {
+                const slideElement = document.createElement('div');
+                slideElement.className = 'adstage-slide';
+                // 슬라이드 스타일 설정 - 항상 균등 분할
+                const slideStyles = {
+                    width: `${100 / extendedAds.length}%`,
+                    'flex-shrink': '0',
+                    display: 'flex',
+                    'align-items': 'center',
+                    'justify-content': 'center'
+                };
+                if (slot.height && slot.height !== 0) {
+                    slideStyles.height = '100%';
+                }
+                Object.entries(slideStyles).forEach(([key, value]) => {
+                    slideElement.style.setProperty(key, value);
+                });
+                // 광고 렌더링
+                const adElement = this.createSimpleAdElement(slot, ad);
+                // 클릭 이벤트 추가 (공통 컴포넌트 사용)
+                AdClickHandler.addClickEventForSlider(adElement, ad, slot, trackEventCallback, debug, String(slot.adType).toLowerCase());
+                slideElement.appendChild(adElement);
+                slideContainer.appendChild(slideElement);
+            });
+            // 텍스트 광고인지 확인 (모든 광고가 텍스트 타입인 경우)
+            const isAllTextAds = advertisements.every(ad => ad.adType === AdType.TEXT);
+            // 무채색 도트 인디케이터 생성 (원본 광고 수만큼) - 텍스트 광고가 아닐 때만
+            const dotContainer = isAllTextAds ? null : this.createMinimalDotIndicator(advertisements.length);
+            // 슬라이더 상태 관리
+            let currentSlide = 0;
+            const totalSlides = advertisements.length;
+            const autoSlideInterval = (options?.autoSlideInterval || 3) * 1000; // 기본 3초
+            // 슬라이드 이동 함수 (무한 루프 지원)
+            const moveToSlide = (index, instant = false) => {
+                currentSlide = index;
+                // 애니메이션 임시 비활성화 (무한 루프용)
+                if (instant) {
+                    slideContainer.style.transition = 'none';
+                }
+                else {
+                    slideContainer.style.transition = 'transform 0.4s ease-out';
+                }
+                // 항상 퍼센트 기반으로 이동
+                slideContainer.style.transform = `translateX(-${(100 / extendedAds.length) * currentSlide}%)`;
+                // 도트 업데이트 (무채색 스타일) - 실제 광고 인덱스 기준, 텍스트 광고가 아닐 때만
+                const actualIndex = currentSlide === totalSlides ? 0 : currentSlide;
+                if (dotContainer) {
+                    const dots = dotContainer.querySelectorAll('.adstage-dot');
+                    dots.forEach((dot, i) => {
+                        const dotElement = dot;
+                        if (i === actualIndex) {
+                            dotElement.classList.add('active');
+                            dotElement.style.background = '#666666';
+                            dotElement.style.borderColor = '#666666';
+                            dotElement.style.opacity = '1';
+                        }
+                        else {
+                            dotElement.classList.remove('active');
+                            dotElement.style.background = 'transparent';
+                            dotElement.style.borderColor = '#cccccc';
+                            dotElement.style.opacity = '0.7';
+                        }
+                    });
+                }
+                // 🎯 공통 슬라이더 이벤트 추적 적용 (모든 슬라이드 포함)
+                SliderEventTracker.trackSlideViewable(advertisements[actualIndex], slot, actualIndex, trackEventCallback, debug // debug 모드
+                );
+            };
+            // 무한 루프 처리 함수
+            const handleInfiniteLoop = () => {
+                if (currentSlide === totalSlides) {
+                    // 복사된 첫 번째 슬라이드에 도달하면 즉시 원본 첫 번째로 이동
+                    setTimeout(() => {
+                        moveToSlide(0, true); // 애니메이션 없이 즉시 이동
+                    }, 400); // transition 시간과 맞춤
+                }
+            };
+            // 도트 클릭 이벤트 (텍스트 광고가 아닐 때만)
+            if (dotContainer) {
+                const dots = dotContainer.querySelectorAll('.adstage-dot');
+                dots.forEach((dot, index) => {
+                    dot.addEventListener('click', () => moveToSlide(index));
+                });
+            }
+            // 자동 슬라이드 (한 방향으로만 무한 진행)
+            let autoSlideTimer = setInterval(() => {
+                const nextIndex = currentSlide + 1;
+                moveToSlide(nextIndex);
+                handleInfiniteLoop();
+            }, autoSlideInterval);
+            // 마우스 호버 시 자동 슬라이드 일시정지
+            sliderWrapper.addEventListener('mouseenter', () => {
+                clearInterval(autoSlideTimer);
+            });
+            sliderWrapper.addEventListener('mouseleave', () => {
+                autoSlideTimer = setInterval(() => {
+                    const nextIndex = currentSlide + 1;
+                    moveToSlide(nextIndex);
+                    handleInfiniteLoop();
+                }, autoSlideInterval);
+            });
+            // 터치 제스처 지원 수정 (무한 루프 지원)
+            this.addTouchSupport(slideContainer, moveToSlide, () => currentSlide, totalSlides, handleInfiniteLoop);
+            // 요소들 조립 (화살표 제거, 도트는 텍스트 광고가 아닐 때만 추가)
+            sliderWrapper.appendChild(slideContainer);
+            if (dotContainer) {
+                sliderWrapper.appendChild(dotContainer);
+            }
+            // 첫 번째 도트 활성화 (moveToSlide에서 자동으로 VIEWABLE 이벤트 발생)
+            moveToSlide(0);
+            // 사용자가 크기를 지정하지 않은 경우, 첫 번째 슬라이드 크기에 맞춰 래퍼 크기 동적 조정
+            if (!slot.width || slot.width === 0) {
+                // DOM 렌더링 후 크기 측정
+                setTimeout(() => {
+                    const firstSlide = slideContainer.children[0];
+                    if (firstSlide) {
+                        const firstAdElement = firstSlide.children[0];
+                        if (firstAdElement) {
+                            const rect = firstAdElement.getBoundingClientRect();
+                            sliderWrapper.style.width = `${rect.width}px`;
+                            if (!slot.height || slot.height === 0) {
+                                sliderWrapper.style.height = `${rect.height}px`;
+                            }
+                            // 크기 조정 후 overflow hidden 재적용
+                            sliderWrapper.style.overflow = 'hidden';
+                        }
+                    }
+                }, 10);
+            }
+            return sliderWrapper;
+        }
+        /**
+         * 무채색 미니멀 도트 인디케이터 생성
+         */
+        static createMinimalDotIndicator(count) {
+            const dotContainer = document.createElement('div');
+            dotContainer.className = 'adstage-dots';
+            dotContainer.style.cssText = `
+      position: absolute;
+      bottom: 15px;
+      left: 50%;
+      transform: translateX(-50%);
+      display: flex;
+      gap: 12px;
+      z-index: 3;
+      padding: 8px 16px;
+      border-radius: 20px;
+      background: rgba(255, 255, 255, 0.1);
+      backdrop-filter: blur(10px);
+    `;
+            for (let i = 0; i < count; i++) {
+                const dot = document.createElement('button');
+                dot.className = 'adstage-dot';
+                dot.style.cssText = `
+        width: 8px;
+        height: 8px;
+        border-radius: 50%;
+        border: 1px solid #cccccc;
+        background: transparent;
+        cursor: pointer;
+        transition: all 0.3s ease;
+        outline: none;
+        opacity: 0.7;
+        padding: 0;
+        margin: 0;
+        flex-shrink: 0;
+      `;
+                // 호버 효과
+                dot.addEventListener('mouseenter', () => {
+                    if (!dot.classList.contains('active')) {
+                        dot.style.borderColor = '#999999';
+                        dot.style.opacity = '0.9';
+                    }
+                });
+                dot.addEventListener('mouseleave', () => {
+                    if (!dot.classList.contains('active')) {
+                        dot.style.borderColor = '#cccccc';
+                        dot.style.opacity = '0.7';
+                    }
+                });
+                dotContainer.appendChild(dot);
+            }
+            return dotContainer;
+        }
+        /**
+         * 터치 제스처 지원 추가
+         */
+        static addTouchSupport(container, moveToSlide, getCurrentSlide, totalSlides, handleInfiniteLoop) {
+            let startX = 0;
+            let isDragging = false;
+            container.addEventListener('touchstart', (e) => {
+                startX = e.touches[0].clientX;
+                isDragging = true;
+            });
+            container.addEventListener('touchmove', (e) => {
+                if (!isDragging)
+                    return;
+                e.preventDefault();
+            });
+            container.addEventListener('touchend', (e) => {
+                if (!isDragging)
+                    return;
+                isDragging = false;
+                const endX = e.changedTouches[0].clientX;
+                const diff = startX - endX;
+                if (Math.abs(diff) > 50) { // 50px 이상 스와이프 시
+                    const currentSlide = getCurrentSlide();
+                    if (diff > 0) {
+                        // 왼쪽으로 스와이프 (다음 슬라이드)
+                        const nextIndex = currentSlide + 1;
+                        moveToSlide(nextIndex);
+                        if (handleInfiniteLoop) {
+                            handleInfiniteLoop();
+                        }
+                    }
+                    else {
+                        // 오른쪽으로 스와이프 (이전 슬라이드)
+                        const prevIndex = currentSlide > 0 ? currentSlide - 1 : totalSlides - 1;
+                        moveToSlide(prevIndex);
+                    }
+                }
+            });
+        }
+    }
+
+    /**
+     * 단순한 VIEWABLE 이벤트 중복 방지 관리 클래스
+     * - 세션당 동일 광고 1회만 VIEWABLE 이벤트 허용
+     * - 메모리 기반 추적으로 단순화
+     */
+    class ViewableEventTracker {
+        /**
+         * 중복 viewable 이벤트 여부 확인
+         */
+        static isDuplicateViewable(adId, slotId, debug = false) {
+            const key = `${adId}_${slotId}`;
+            // 이미 VIEWABLE 이벤트가 발생한 광고인지 확인
+            if (ViewableEventTracker.viewableTracker.has(key)) {
+                if (debug) {
+                    console.log(`Duplicate viewable blocked for ad ${adId} in slot ${slotId}`);
+                }
+                return true;
+            }
+            // 새로운 VIEWABLE 이벤트 기록
+            ViewableEventTracker.viewableTracker.add(key);
+            if (debug) {
+                console.log(`✅ New viewable recorded for ad ${adId} in slot ${slotId}`);
+            }
+            return false;
+        }
+        /**
+         * 모든 추적 데이터 정리 (디버그용)
+         */
+        static clear() {
+            ViewableEventTracker.viewableTracker.clear();
+        }
+        /**
+         * 특정 광고의 viewable 추적 초기화 (디버그용)
+         */
+        static clearAdViewable(adId, slotId) {
+            const key = `${adId}_${slotId}`;
+            ViewableEventTracker.viewableTracker.delete(key);
+        }
+    }
+    ViewableEventTracker.viewableTracker = new Set();
+
+    /**
+     * 베이스 광고 렌더러 - 공통 기능 구현
+     */
+    class BaseAdRenderer {
+        constructor(adType, debug = false, advertisementEventTracker) {
+            this.adType = adType;
+            this.debug = debug;
+            this.advertisementEventTracker = advertisementEventTracker || null;
+        }
+        /**
+         * Placeholder(슬롯 컨테이너) 생성 - 공통 구현
+         */
+        createPlaceholder(container, slotId, options, config) {
+            const adElement = document.createElement('div');
+            adElement.id = slotId;
+            adElement.className = `adstage-slot adstage-${String(this.adType).toLowerCase()}`;
+            adElement.setAttribute('data-adstage-container', 'true');
+            adElement.setAttribute('data-adstage-type', String(this.adType));
+            adElement.setAttribute('data-adstage-slot', slotId);
+            const { width, height } = this.calculateAdSize(container, options, config) || {
+                width: '100%',
+                height: this.getDefaultHeight()
+            };
+            adElement.style.width = width;
+            adElement.style.height = height;
+            // 플레이스홀더 스타일 모드 결정
+            const placeholderMode = config?.placeholderMode || options.placeholderMode || 'invisible';
+            this.applyPlaceholderStyle(adElement, placeholderMode);
+            container.appendChild(adElement);
+            if (this.debug) {
+                console.log(`📦 Placeholder created for ${this.adType} slot: ${slotId} (${width} x ${height}) - Mode: ${placeholderMode}`);
+            }
+        }
+        /**
+         * 플레이스홀더 스타일 적용
+         */
+        applyPlaceholderStyle(element, mode) {
+            switch (mode) {
+                case 'invisible':
+                    // 완전히 투명한 플레이스홀더
+                    element.style.backgroundColor = 'transparent';
+                    element.style.border = 'none';
+                    element.style.opacity = '0';
+                    element.innerHTML = '';
+                    break;
+                case 'transparent':
+                    // 투명하지만 공간은 차지
+                    element.style.backgroundColor = 'transparent';
+                    element.style.border = 'none';
+                    element.style.display = 'block';
+                    element.innerHTML = '';
+                    break;
+                case 'subtle':
+                    // 매우 은은한 표시
+                    element.style.backgroundColor = 'rgba(0, 0, 0, 0.02)';
+                    element.style.border = 'none';
+                    element.style.borderRadius = '4px';
+                    element.style.display = 'flex';
+                    element.style.alignItems = 'center';
+                    element.style.justifyContent = 'center';
+                    element.innerHTML = '<span style="color: rgba(0, 0, 0, 0.3); font-size: 11px; font-family: sans-serif;">•••</span>';
+                    break;
+                case 'minimal':
+                    // 최소한의 표시 (기본값)
+                    element.style.backgroundColor = 'rgba(248, 249, 250, 0.5)';
+                    element.style.border = '1px solid rgba(0, 0, 0, 0.08)';
+                    element.style.borderRadius = '6px';
+                    element.style.display = 'flex';
+                    element.style.alignItems = 'center';
+                    element.style.justifyContent = 'center';
+                    element.innerHTML = '<span style="color: rgba(0, 0, 0, 0.4); font-size: 12px; font-family: -apple-system, sans-serif;">•••</span>';
+                    break;
+                case 'debug':
+                    // 개발/디버그용 명확한 표시
+                    element.style.border = '2px dashed #e74c3c';
+                    element.style.display = 'flex';
+                    element.style.alignItems = 'center';
+                    element.style.justifyContent = 'center';
+                    element.style.backgroundColor = 'rgba(231, 76, 60, 0.1)';
+                    element.style.color = '#e74c3c';
+                    element.style.fontFamily = 'monospace';
+                    element.style.fontSize = '11px';
+                    element.innerHTML = `<span>Loading ${this.adType} ad...</span>`;
+                    break;
+                default:
+                    // 기존 스타일 (legacy)
+                    element.style.border = '1px dashed #ccc';
+                    element.style.display = 'flex';
+                    element.style.alignItems = 'center';
+                    element.style.justifyContent = 'center';
+                    element.style.backgroundColor = '#f9f9f9';
+                    element.style.color = '#666';
+                    element.innerHTML = `<span>Loading ${this.adType} ad...</span>`;
+            }
+        }
+        /**
+         * 광고 크기 계산 - 공통 구현
+         */
+        calculateAdSize(container, options, config) {
+            // 사용자가 명시적으로 크기를 지정한 경우
+            const explicitWidth = options.width;
+            const explicitHeight = options.height;
+            // 너비 처리
+            let width;
+            if (typeof explicitWidth === 'number') {
+                width = `${explicitWidth}px`;
+            }
+            else if (typeof explicitWidth === 'string') {
+                width = explicitWidth;
+            }
+            else {
+                width = '100%'; // 기본값은 100%
+            }
+            // 높이 처리 - 핵심 로직
+            let height;
+            if (typeof explicitHeight === 'number') {
+                height = `${explicitHeight}px`;
+            }
+            else if (typeof explicitHeight === 'string' && explicitHeight !== '100%' && explicitHeight !== 'auto') {
+                // 명시적인 크기 문자열 (예: '200px', '50vh' 등)
+                height = explicitHeight;
+            }
+            else {
+                // 100%, auto이거나 높이가 지정되지 않은 경우 스마트 계산
+                const containerHeight = this.getContainerHeight(container);
+                if (containerHeight > 0) {
+                    // 컨테이너에 높이가 있으면 100% 사용
+                    height = '100%';
+                    if (config?.debug || this.debug) {
+                        console.log(`📏 Using 100% height (container: ${containerHeight}px)`);
+                    }
+                }
+                else {
+                    // 컨테이너에 높이가 없으면 타입별 기본값 사용
+                    height = this.getDefaultHeight();
+                    if (config?.debug || this.debug) {
+                        console.log(`📏 Using default height ${height} for ${this.adType}`);
+                    }
+                }
+            }
+            return { width, height };
+        }
+        /**
+         * 컨테이너의 실제 높이 계산 - 공통 구현
+         */
+        getContainerHeight(container) {
+            const computedStyle = window.getComputedStyle(container);
+            const height = parseFloat(computedStyle.height);
+            if (!height || height === 0) {
+                const minHeight = parseFloat(computedStyle.minHeight);
+                if (minHeight > 0)
+                    return minHeight;
+                if (container.style.height && container.style.height !== 'auto') {
+                    const styleHeight = parseFloat(container.style.height);
+                    if (styleHeight > 0)
+                        return styleHeight;
+                }
+                const heightAttr = container.getAttribute('height');
+                if (heightAttr) {
+                    const attrHeight = parseFloat(heightAttr);
+                    if (attrHeight > 0)
+                        return attrHeight;
+                }
+            }
+            return height || 0;
+        }
+        /**
+         * 이벤트 트래킹 콜백 생성 - 공통 구현
+         */
+        createEventTrackingCallback() {
+            return async (adId, slotId, eventType) => {
+                if (eventType === AdEventType.VIEWABLE) {
+                    if (ViewableEventTracker.isDuplicateViewable(adId, slotId, this.debug)) {
+                        if (this.debug) {
+                            console.log(`🚫 Duplicate viewable blocked for ad ${adId} in slot ${slotId}`);
+                        }
+                        return;
+                    }
+                    if (this.debug) {
+                        console.log(`✅ New viewable recorded for ad ${adId} in slot ${slotId}`);
+                    }
+                }
+                if (this.advertisementEventTracker) {
+                    try {
+                        if (this.debug) {
+                            console.log(`🔄 Starting advertisement event tracking: ${eventType} for ad ${adId} in slot ${slotId}`);
+                        }
+                        await this.advertisementEventTracker.trackAdvertisementEvent(adId, slotId, eventType);
+                        if (this.debug) {
+                            console.log(`📊 Advertisement event tracked: ${eventType} for ad ${adId} in slot ${slotId}`);
+                        }
+                    }
+                    catch (error) {
+                        if (this.debug) {
+                            console.error(`❌ Failed to track ${eventType} event for ad ${adId}:`, error);
+                        }
+                    }
+                }
+                else {
+                    if (this.debug) {
+                        console.warn(`⚠️ AdvertisementEventTracker not available for ${eventType} event`);
+                    }
+                }
+            };
+        }
+        /**
+         * Fallback 광고 렌더링 - 공통 구현
+         */
+        renderFallback(slot) {
+            const element = document.getElementById(slot.id);
+            if (element) {
+                const adstageContainers = [
+                    element.querySelector('[data-adstage-container="true"]'),
+                    element.closest('[data-adstage-container="true"]'),
+                    element
+                ].filter(el => el && el.hasAttribute('data-adstage-container'));
+                const classBasedContainers = [
+                    element.closest('.adstage-slot'),
+                    element.closest(`.adstage-${String(this.adType).toLowerCase()}`),
+                    element.closest('[class*="ad"]'),
+                    element.closest('[class*="banner"]'),
+                    element.closest('[class*="container"]'),
+                    element.closest('div[style*="height"]'),
+                    element.closest('div[style*="min-height"]'),
+                    element.parentElement
+                ].filter(Boolean);
+                const possibleContainers = [...adstageContainers, ...classBasedContainers];
+                const targetContainer = possibleContainers[0];
+                if (targetContainer) {
+                    let containerType = 'unknown';
+                    if (targetContainer.hasAttribute('data-adstage-container')) {
+                        containerType = 'adstage-official';
+                    }
+                    else if (targetContainer.classList.contains('adstage-slot')) {
+                        containerType = 'adstage-class';
+                    }
+                    else {
+                        containerType = 'generic';
+                    }
+                    targetContainer.style.cssText += `
+          height: 0px !important;
+          min-height: 0px !important;
+          padding: 0px !important;
+          margin: 0px !important;
+          border: none !important;
+          overflow: hidden !important;
+          display: block !important;
+        `;
+                    targetContainer.innerHTML = '';
+                    targetContainer.setAttribute('data-adstage-empty', 'true');
+                    if (this.debug) {
+                        console.warn(`⚠️ ${this.adType} container collapsed (${containerType}): ${slot.id}`, targetContainer);
+                    }
+                }
+                else {
+                    this.createEmptyContainer(slot);
+                }
+            }
+            slot.advertisement = undefined;
+            slot.isEmpty = true;
+        }
+        /**
+         * 빈 컨테이너 생성 - 공통 구현
+         */
+        createEmptyContainer(slot) {
+            const originalContainer = document.getElementById(slot.containerId);
+            if (originalContainer) {
+                originalContainer.innerHTML = '';
+                const emptyElement = document.createElement('div');
+                emptyElement.id = slot.id;
+                emptyElement.className = `adstage-slot adstage-empty adstage-${String(this.adType).toLowerCase()}`;
+                emptyElement.setAttribute('data-adstage-container', 'true');
+                emptyElement.setAttribute('data-adstage-empty', 'true');
+                emptyElement.setAttribute('data-adstage-slot', slot.id);
+                emptyElement.style.cssText = `
+        height: 0px !important;
+        min-height: 0px !important;
+        padding: 0px !important;
+        margin: 0px !important;
+        border: none !important;
+        overflow: hidden !important;
+        display: block !important;
+      `;
+                originalContainer.appendChild(emptyElement);
+                if (this.debug) {
+                    console.warn(`⚠️ Created empty ${this.adType} container: ${slot.id}`);
+                }
+            }
+        }
+        /**
+         * 디버그 로그 출력 - 공통 구현
+         */
+        log(message, ...args) {
+            if (this.debug) {
+                console.log(`[${this.adType}] ${message}`, ...args);
+            }
+        }
+    }
+
+    /**
+    import { AdSlot, Advertisement, AdType } from '../../../types/advertisement';
+    import { AdvertisementEventTracker } from '../../../managers/ads/advertisement-event-tracker';
+    import { CarouselSliderManager } from '../../../managers/ads/carousel-slider-manager';
+    import { BaseAdRenderer } from './base-ad-renderer';
+    import { AdRenderOptions } from '../interfaces/i-ad-renderer'; 광고 전용 렌더러
+     */
+    class BannerAdRenderer extends BaseAdRenderer {
+        constructor(debug = false, advertisementEventTracker) {
+            super(AdType.BANNER, debug, advertisementEventTracker);
+        }
+        /**
+         * 배너 광고 기본 높이
+         */
+        getDefaultHeight() {
+            return '250px';
+        }
+        /**
+         * 단일 배너 광고 렌더링
+         */
+        async renderAdElement(slot, advertisement) {
+            const container = document.getElementById(slot.containerId);
+            if (!container)
+                return;
+            const adElement = document.createElement('div');
+            adElement.className = 'adstage-ad adstage-banner-ad';
+            const optimizedHeight = slot.optimizedHeight;
+            const containerElement = container.parentElement || container;
+            if (optimizedHeight) {
+                adElement.style.width = '100%';
+                adElement.style.height = String(optimizedHeight);
+            }
+            else {
+                const config = slot.config;
+                const options = {
+                    width: config?.width,
+                    height: config?.height
+                };
+                const { width, height } = this.calculateAdSize(containerElement, options, { debug: this.debug });
+                adElement.style.width = width;
+                adElement.style.height = height;
+            }
+            if (advertisement.imageUrl) {
+                await this.renderOptimizedBannerImage(adElement, advertisement, slot);
+            }
+            else {
+                adElement.innerHTML = `<div>${advertisement.title || 'Banner Ad'}</div>`;
+            }
+            // 클릭 이벤트 추가 (공통 컴포넌트 사용)
+            AdClickHandler.addClickEventForRenderer(adElement, advertisement, slot, () => this.createEventTrackingCallback(), this.debug, 'Banner');
+            container.innerHTML = '';
+            container.appendChild(adElement);
+        }
+        /**
+         * 다중 배너 광고 렌더링 (슬라이더)
+         */
+        async renderMultipleAds(slot, advertisements) {
+            const container = document.getElementById(slot.containerId);
+            if (!container) {
+                throw new Error(`Container not found: ${slot.containerId}`);
+            }
+            // 배너 광고를 위한 컨테이너 최적화
+            await this.optimizeContainerForBannerAds(slot, advertisements);
+            const trackEventCallback = this.createEventTrackingCallback();
+            const optimizedSliderOptions = {
+                autoSlideInterval: (slot.config?.slideInterval || 5000) / 1000,
+                ...slot.config,
+                optimizedHeight: slot.optimizedHeight,
+                aspectRatio: slot.aspectRatio
+            };
+            const sliderElement = CarouselSliderManager.createSliderContainer(slot, advertisements, optimizedSliderOptions, trackEventCallback, this.debug);
+            if (sliderElement) {
+                container.innerHTML = '';
+                container.appendChild(sliderElement);
+                if (this.debug) {
+                    console.log(`🎠 Banner carousel created for slot: ${slot.id} with ${advertisements.length} ads (optimized: ${slot.optimizedHeight || 'default'})`);
+                }
+            }
+        }
+        /**
+         * 여러 광고의 최적 컨테이너 크기 계산
+         */
+        async calculateOptimalContainerSize(advertisements, containerWidth) {
+            if (!advertisements.length) {
+                return {
+                    width: '100%',
+                    height: this.getDefaultHeight(),
+                    aspectRatio: 16 / 9
+                };
+            }
+            try {
+                const imageDimensions = await Promise.allSettled(advertisements
+                    .filter(ad => ad.imageUrl)
+                    .map(ad => this.loadImageDimensions(ad.imageUrl)));
+                const validDimensions = imageDimensions
+                    .filter((result) => result.status === 'fulfilled')
+                    .map(result => result.value);
+                if (validDimensions.length === 0) {
+                    return {
+                        width: '100%',
+                        height: this.getDefaultHeight(),
+                        aspectRatio: 16 / 9
+                    };
+                }
+                const strategy = this.selectOptimalSizeStrategy(validDimensions);
+                const optimalHeight = this.calculateOptimalHeight(validDimensions, containerWidth, strategy);
+                if (this.debug) {
+                    console.log(`📐 Optimal banner container calculated: ${containerWidth}x${optimalHeight} (strategy: ${strategy})`);
+                }
+                return {
+                    width: '100%',
+                    height: `${optimalHeight}px`,
+                    aspectRatio: containerWidth / optimalHeight
+                };
+            }
+            catch (error) {
+                console.warn('Failed to calculate optimal banner size, using defaults:', error);
+                return {
+                    width: '100%',
+                    height: this.getDefaultHeight(),
+                    aspectRatio: 16 / 9
+                };
+            }
+        }
+        /**
+         * 배너 광고를 위한 컨테이너 최적화
+         */
+        async optimizeContainerForBannerAds(slot, advertisements) {
+            try {
+                const container = document.getElementById(slot.containerId);
+                const adElement = document.getElementById(slot.id);
+                if (!container || !adElement)
+                    return;
+                const containerWidth = container.getBoundingClientRect().width || 300;
+                const optimalSize = await this.calculateOptimalContainerSize(advertisements, containerWidth);
+                adElement.style.height = optimalSize.height;
+                slot.optimizedHeight = optimalSize.height;
+                slot.aspectRatio = optimalSize.aspectRatio;
+                if (this.debug) {
+                    console.log(`🔧 Banner container optimized for ${advertisements.length} ads: ${optimalSize.height}`);
+                }
+            }
+            catch (error) {
+                console.warn('Banner container optimization failed, using default size:', error);
+            }
+        }
+        /**
+         * 최적 크기 조정 전략 선택
+         */
+        selectOptimalSizeStrategy(dimensions) {
+            const aspectRatios = dimensions.map(d => d.width / d.height);
+            const ratioGroups = new Map();
+            aspectRatios.forEach(ratio => {
+                const roundedRatio = Math.round(ratio * 10) / 10;
+                const key = roundedRatio.toString();
+                ratioGroups.set(key, (ratioGroups.get(key) || 0) + 1);
+            });
+            const maxGroup = Math.max(...ratioGroups.values());
+            const totalImages = dimensions.length;
+            if (maxGroup / totalImages >= 0.7) {
+                return 'dominant';
+            }
+            const standardRatios = [16 / 9, 4 / 3, 1 / 1, 3 / 2];
+            const standardCount = aspectRatios.filter(ratio => standardRatios.some(standard => Math.abs(ratio - standard) < 0.1)).length;
+            if (standardCount / totalImages >= 0.5) {
+                return 'common';
+            }
+            return 'average';
+        }
+        /**
+         * 전략에 따른 최적 높이 계산
+         */
+        calculateOptimalHeight(dimensions, containerWidth, strategy) {
+            const aspectRatios = dimensions.map(d => d.width / d.height);
+            switch (strategy) {
+                case 'dominant': {
+                    const ratioGroups = new Map();
+                    aspectRatios.forEach(ratio => {
+                        const roundedRatio = Math.round(ratio * 10) / 10;
+                        const key = roundedRatio.toString();
+                        const existing = ratioGroups.get(key);
+                        if (existing) {
+                            existing.count++;
+                        }
+                        else {
+                            ratioGroups.set(key, { ratio: roundedRatio, count: 1 });
+                        }
+                    });
+                    const dominantGroup = Array.from(ratioGroups.values()).reduce((max, current) => current.count > max.count ? current : max);
+                    return Math.round(containerWidth / dominantGroup.ratio);
+                }
+                case 'common': {
+                    const standardRatios = [
+                        { ratio: 16 / 9, name: '16:9' },
+                        { ratio: 4 / 3, name: '4:3' },
+                        { ratio: 1 / 1, name: '1:1' },
+                        { ratio: 3 / 2, name: '3:2' }
+                    ];
+                    const avgRatio = aspectRatios.reduce((sum, ratio) => sum + ratio, 0) / aspectRatios.length;
+                    const bestStandard = standardRatios.reduce((best, current) => Math.abs(current.ratio - avgRatio) < Math.abs(best.ratio - avgRatio) ? current : best);
+                    if (this.debug) {
+                        console.log(`📊 Using standard ratio: ${bestStandard.name} (avg: ${avgRatio.toFixed(2)})`);
+                    }
+                    return Math.round(containerWidth / bestStandard.ratio);
+                }
+                case 'average':
+                default: {
+                    const averageRatio = aspectRatios.reduce((sum, ratio) => sum + ratio, 0) / aspectRatios.length;
+                    return Math.round(containerWidth / averageRatio);
+                }
+            }
+        }
+        /**
+         * 이미지 로드 및 실제 크기 획득
+         */
+        loadImageDimensions(imageUrl) {
+            return new Promise((resolve, reject) => {
+                const img = new Image();
+                img.onload = () => {
+                    resolve({ width: img.naturalWidth, height: img.naturalHeight });
+                };
+                img.onerror = () => {
+                    reject(new Error(`Failed to load image: ${imageUrl}`));
+                };
+                img.src = imageUrl;
+            });
+        }
+        /**
+         * 이미지와 컨테이너 비율을 고려한 최적화 스타일 적용
+         */
+        applyOptimizedImageStyle(img, imageAspectRatio, containerAspectRatio) {
+            const ratio = imageAspectRatio / containerAspectRatio;
+            if (Math.abs(ratio - 1) < 0.1) {
+                img.style.objectFit = 'cover';
+                img.style.objectPosition = 'center';
+            }
+            else if (ratio > 1.3) {
+                img.style.objectFit = 'contain';
+                img.style.objectPosition = 'center';
+                img.style.backgroundColor = '#f0f0f0';
+            }
+            else if (ratio < 0.7) {
+                img.style.objectFit = 'cover';
+                img.style.objectPosition = 'center';
+            }
+            else {
+                img.style.objectFit = 'cover';
+                img.style.objectPosition = 'center';
+            }
+            if (this.debug) {
+                console.log(`🎨 Banner image style applied: objectFit=${img.style.objectFit}, ratio=${ratio.toFixed(2)}`);
+            }
+        }
+        /**
+         * 배너 이미지 최적화 렌더링 - public으로 변경
+         */
+        async renderOptimizedBannerImage(container, advertisement, slot) {
+            const img = document.createElement('img');
+            img.style.width = '100%';
+            img.style.height = '100%';
+            img.style.display = 'block';
+            img.style.borderRadius = '8px';
+            img.alt = advertisement.title || 'Banner Advertisement';
+            container.innerHTML = '<div style="display: flex; align-items: center; justify-content: center; height: 100%; color: #999;">Loading...</div>';
+            try {
+                if (!advertisement.imageUrl) {
+                    throw new Error('Image URL is not provided');
+                }
+                const imageDimensions = await this.loadImageDimensions(advertisement.imageUrl);
+                const containerRect = container.getBoundingClientRect();
+                const containerWidth = containerRect.width;
+                const containerHeight = containerRect.height;
+                if (this.debug) {
+                    console.log(`📸 Banner image dimensions: ${imageDimensions.width}x${imageDimensions.height}`);
+                    console.log(`📦 Banner container dimensions: ${containerWidth}x${containerHeight}`);
+                }
+                const imageAspectRatio = imageDimensions.width / imageDimensions.height;
+                const containerAspectRatio = containerWidth / containerHeight;
+                this.applyOptimizedImageStyle(img, imageAspectRatio, containerAspectRatio);
+                img.src = advertisement.imageUrl;
+                container.innerHTML = '';
+                container.appendChild(img);
+                // 클릭 이벤트 추가 (공통 컴포넌트 사용)
+                AdClickHandler.addClickEventForRenderer(img, advertisement, slot, () => this.createEventTrackingCallback(), this.debug, 'Banner');
+                if (this.debug) {
+                    console.log(`✅ Optimized banner image rendered for ad: ${advertisement._id}`);
+                }
+                return img;
+            }
+            catch (error) {
+                console.error('❌ Failed to load optimized banner image:', error);
+                if (advertisement.imageUrl) {
+                    img.src = advertisement.imageUrl;
+                    img.style.objectFit = 'cover';
+                    img.style.objectPosition = 'center';
+                    container.innerHTML = '';
+                    container.appendChild(img);
+                    // 클릭 이벤트 추가 (공통 컴포넌트 사용)
+                    AdClickHandler.addClickEventForRenderer(img, advertisement, slot, () => this.createEventTrackingCallback(), this.debug, 'Banner');
+                }
+                return img;
+            }
+        }
+    }
+
+    /**
+     * 텍스트 광고 공통 유틸리티 함수들
+     */
+    class TextAdUtils {
+        /**
+         * 텍스트 광고의 기본 스타일을 생성
+         * @param isSimple 간단한 스타일 여부
+         * @returns CSS 스타일 문자열
+         */
+        static createTextAdStyles(isSimple = false) {
+            const baseStyles = `
+      font-family: 'Arial', sans-serif;
+      text-decoration: none;
+      display: block;
+      text-align: left;
+      transition: color 0.3s ease;
+      width: 100%;
+      box-sizing: border-box;
+      overflow: visible;
+      padding-right: 2px;
+      padding-left: 2px;
+      white-space: nowrap;
+    `;
+            return baseStyles;
+        }
+        /**
+         * 텍스트 광고의 콘텐츠를 설정 (textContent 우선, 없으면 title)
+         * @param element 설정할 HTML 요소
+         * @param adData 광고 데이터
+         */
+        static setTextAdContent(element, adData) {
+            const content = adData.textContent || adData.title || '';
+            element.textContent = content;
+        }
+    }
+
+    /**
+     * 텍스트 전환 효과 관리 클래스
+     * - 텍스트 광고 전용 페이드 인/아웃 + 상하 움직임 효과
+     * - 부드러운 전환 애니메이션 (vertical transition)
+     * - 무한 루프 지원
+     */
+    class TextTransitionManager {
+        /**
+         * 간단한 광고 요소 생성 (크기 측정용)
+         */
+        static createSimpleAdElement(slot, advertisement) {
+            const adElement = document.createElement('div');
+            adElement.className = `adstage-ad adstage-${String(slot.adType).toLowerCase()}`;
+            adElement.setAttribute('data-adstage-ad-id', advertisement._id);
+            adElement.setAttribute('data-adstage-slot-id', slot.id);
+            // 🎯 공통 스타일 및 콘텐츠 적용 (중복 제거)
+            adElement.style.cssText = TextAdUtils.createTextAdStyles(true);
+            TextAdUtils.setTextAdContent(adElement, advertisement);
+            return adElement;
+        }
+        /**
+         * 텍스트 전환 컨테이너 생성
+         */
+        static createTextTransitionContainer(slot, advertisements, options, trackEventCallback, debug = false) {
+            // 사용자가 높이를 지정했는지 미리 확인 ('auto'나 undefined면 자동 높이)
+            const hasUserDefinedHeight = slot.height && slot.height !== 0 && slot.height !== 'auto';
+            const sliderWrapper = document.createElement('div');
+            sliderWrapper.className = 'adstage-fade-slider-wrapper';
+            // 래퍼 스타일 설정
+            const containerStyles = {
+                position: 'relative',
+                overflow: 'hidden',
+                display: 'block',
+            };
+            // 높이가 지정되지 않은 경우 자동 높이 사용
+            if (!hasUserDefinedHeight) {
+                containerStyles.height = 'auto';
+                containerStyles.minHeight = 'fit-content';
+            }
+            // 사용자가 크기를 지정한 경우
+            if (slot.width && slot.width !== 0) {
+                let width;
+                if (typeof slot.width === 'string') {
+                    width = slot.width.includes('px') || slot.width.includes('%') ? slot.width : `${slot.width}px`;
+                }
+                else {
+                    width = `${slot.width}px`;
+                }
+                containerStyles.width = width;
+            }
+            // 사용자가 높이를 명시적으로 지정한 경우에만 적용 ('auto'는 제외)
+            if (slot.height && slot.height !== 0 && slot.height !== 'auto' && hasUserDefinedHeight) {
+                let height;
+                if (typeof slot.height === 'string') {
+                    height = slot.height.includes('px') || slot.height.includes('%') ? slot.height : `${slot.height}px`;
+                }
+                else {
+                    height = `${slot.height}px`;
+                }
+                containerStyles.height = height;
+            }
+            // 스타일 적용
+            Object.entries(containerStyles).forEach(([key, value]) => {
+                sliderWrapper.style.setProperty(key, value);
+            });
+            // 슬라이드 컨테이너
+            const slideContainer = document.createElement('div');
+            slideContainer.className = 'adstage-fade-slide-container';
+            slideContainer.style.cssText = `
+      position: relative;
+      width: 100%;
+      ${hasUserDefinedHeight ? 'height: 100%;' : 'height: auto; min-height: fit-content;'}
+    `;
+            // 크기 측정을 위한 임시 컨테이너 (자동 크기 계산이 필요한 경우)
+            let measureContainer = null;
+            const needsWidthMeasurement = !slot.width || slot.width === 0;
+            const needsHeightMeasurement = !slot.height || slot.height === 0 || slot.height === undefined || slot.height === 'auto';
+            // 너비 측정만 필요한 경우 (높이는 자동으로 유지)
+            if (needsWidthMeasurement || (needsHeightMeasurement && hasUserDefinedHeight)) {
+                measureContainer = document.createElement('div');
+                measureContainer.style.cssText = `
+        position: absolute;
+        visibility: hidden;
+        white-space: nowrap;
+        top: -9999px;
+        left: -9999px;
+      `;
+                // width가 설정되어 있으면 측정 컨테이너에도 적용
+                if (!needsWidthMeasurement && slot.width) {
+                    let width;
+                    if (typeof slot.width === 'string') {
+                        width = slot.width.includes('px') || slot.width.includes('%') ? slot.width : `${slot.width}px`;
+                    }
+                    else {
+                        width = `${slot.width}px`;
+                    }
+                    measureContainer.style.width = width;
+                    measureContainer.style.whiteSpace = 'normal'; // width가 있으면 줄바꿈 허용
+                }
+                document.body.appendChild(measureContainer);
+                let maxWidth = 0;
+                let maxHeight = 0;
+                // 모든 광고의 크기를 측정하여 최대 크기 찾기
+                advertisements.forEach(ad => {
+                    const measureAdElement = this.createSimpleAdElement(slot, ad);
+                    measureContainer.appendChild(measureAdElement);
+                    const rect = measureAdElement.getBoundingClientRect();
+                    if (rect.width > maxWidth)
+                        maxWidth = rect.width;
+                    if (rect.height > maxHeight)
+                        maxHeight = rect.height;
+                    // 측정 후 요소 제거
+                    measureContainer.removeChild(measureAdElement);
+                });
+                // 측정된 최대 크기로 래퍼 크기 설정
+                if (needsWidthMeasurement && maxWidth > 0) {
+                    sliderWrapper.style.width = `${maxWidth}px`;
+                }
+                // 사용자가 높이를 지정하지 않은 경우 auto 높이 유지 (측정된 높이 적용하지 않음)
+                if (needsHeightMeasurement && maxHeight > 0 && hasUserDefinedHeight) {
+                    sliderWrapper.style.height = `${maxHeight}px`;
+                }
+                // 측정 컨테이너 제거
+                document.body.removeChild(measureContainer);
+            }
+            // 각 광고를 슬라이드로 생성
+            const slideElements = [];
+            advertisements.forEach((ad, index) => {
+                const slideElement = document.createElement('div');
+                slideElement.className = 'adstage-fade-slide';
+                // 자동 높이일 때는 첫 번째 슬라이드만 relative로 높이 확보
+                const isFirstSlide = index === 0;
+                const positionStyle = hasUserDefinedHeight ? 'absolute' : (isFirstSlide ? 'relative' : 'absolute');
+                slideElement.style.cssText = `
+        position: ${positionStyle};
+        top: ${positionStyle === 'absolute' ? '0' : 'auto'};
+        left: ${positionStyle === 'absolute' ? '0' : 'auto'};
+        width: 100%;
+        ${hasUserDefinedHeight ? 'height: 100%;' : 'height: auto;'}
+        display: flex;
+        align-items: center;
+        justify-content: flex-start;
+        opacity: ${index === 0 ? '1' : '0'};
+        transform: translateY(${index === 0 ? '0' : '20px'});
+        transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
+        z-index: ${index === 0 ? '2' : '1'};
+      `;
+                // 광고 렌더링 - 공통 함수 사용으로 일관성 유지
+                const adElement = this.createSimpleAdElement(slot, ad);
+                // 클릭 이벤트 추가 (공통 컴포넌트 사용)
+                AdClickHandler.addClickEventForSlider(adElement, ad, slot, trackEventCallback, debug, 'Text');
+                slideElement.appendChild(adElement);
+                slideContainer.appendChild(slideElement);
+                slideElements.push(slideElement);
+            });
+            // 슬라이더 상태 관리
+            let currentSlide = 0;
+            const totalSlides = advertisements.length;
+            const autoSlideInterval = (options?.autoSlideInterval || 4) * 1000; // 기본 4초 (페이드는 조금 더 길게)
+            // 슬라이드 이동 함수 (페이드 효과)
+            const moveToSlide = (index) => {
+                if (index >= totalSlides) {
+                    index = 0; // 무한 루프
+                }
+                else if (index < 0) {
+                    index = totalSlides - 1;
+                }
+                const previousSlide = slideElements[currentSlide];
+                const nextSlide = slideElements[index];
+                // 자동 높이 모드일 때는 위치 변경
+                if (!hasUserDefinedHeight) {
+                    // 이전 슬라이드를 absolute로 변경
+                    if (previousSlide.style.position === 'relative') {
+                        previousSlide.style.position = 'absolute';
+                        previousSlide.style.top = '0';
+                        previousSlide.style.left = '0';
+                    }
+                    // 다음 슬라이드를 relative로 변경하여 높이 확보
+                    nextSlide.style.position = 'relative';
+                    nextSlide.style.top = 'auto';
+                    nextSlide.style.left = 'auto';
+                }
+                // 이전 슬라이드 페이드 아웃 (아래로)
+                previousSlide.style.opacity = '0';
+                previousSlide.style.transform = 'translateY(-20px)';
+                previousSlide.style.zIndex = '1';
+                // 다음 슬라이드 페이드 인 (위에서)
+                nextSlide.style.opacity = '1';
+                nextSlide.style.transform = 'translateY(0)';
+                nextSlide.style.zIndex = '2';
+                // 다른 슬라이드들은 숨김
+                slideElements.forEach((slide, i) => {
+                    if (i !== index && i !== currentSlide) {
+                        slide.style.opacity = '0';
+                        slide.style.transform = 'translateY(20px)';
+                        slide.style.zIndex = '1';
+                        // 자동 높이 모드일 때는 다른 슬라이드들을 absolute로
+                        if (!hasUserDefinedHeight && slide.style.position === 'relative') {
+                            slide.style.position = 'absolute';
+                            slide.style.top = '0';
+                            slide.style.left = '0';
+                        }
+                    }
+                });
+                currentSlide = index;
+                // 🎯 공통 슬라이더 이벤트 추적 적용 (모든 슬라이드 포함)
+                SliderEventTracker.trackSlideViewable(advertisements[currentSlide], slot, currentSlide, trackEventCallback, debug // debug 모드 상속
+                );
+            };
+            // 자동 슬라이드
+            let autoSlideTimer = setInterval(() => {
+                const nextIndex = currentSlide + 1;
+                moveToSlide(nextIndex);
+            }, autoSlideInterval);
+            // 마우스 호버 시 자동 슬라이드 일시정지
+            sliderWrapper.addEventListener('mouseenter', () => {
+                clearInterval(autoSlideTimer);
+            });
+            sliderWrapper.addEventListener('mouseleave', () => {
+                autoSlideTimer = setInterval(() => {
+                    const nextIndex = currentSlide + 1;
+                    moveToSlide(nextIndex);
+                }, autoSlideInterval);
+            });
+            // 터치 제스처 지원
+            TextTransitionManager.addTouchSupport(sliderWrapper, moveToSlide, () => currentSlide, totalSlides);
+            // 요소들 조립
+            sliderWrapper.appendChild(slideContainer);
+            return sliderWrapper;
+        }
+        /**
+         * 터치 제스처 지원 추가
+         */
+        static addTouchSupport(container, moveToSlide, getCurrentSlide, totalSlides) {
+            let startX = 0;
+            let startY = 0;
+            let isDragging = false;
+            container.addEventListener('touchstart', (e) => {
+                startX = e.touches[0].clientX;
+                startY = e.touches[0].clientY;
+                isDragging = true;
+            });
+            container.addEventListener('touchmove', (e) => {
+                if (!isDragging)
+                    return;
+                e.preventDefault();
+            });
+            container.addEventListener('touchend', (e) => {
+                if (!isDragging)
+                    return;
+                isDragging = false;
+                const endX = e.changedTouches[0].clientX;
+                const endY = e.changedTouches[0].clientY;
+                const diffX = startX - endX;
+                const diffY = startY - endY;
+                // 가로 스와이프가 세로 스와이프보다 클 때만 처리
+                if (Math.abs(diffX) > Math.abs(diffY) && Math.abs(diffX) > 50) {
+                    const currentSlide = getCurrentSlide();
+                    if (diffX > 0) {
+                        // 왼쪽으로 스와이프 (다음 슬라이드)
+                        moveToSlide(currentSlide + 1);
+                    }
+                    else {
+                        // 오른쪽으로 스와이프 (이전 슬라이드)
+                        moveToSlide(currentSlide - 1);
+                    }
+                }
+            });
+        }
+    }
+
+    /**
+     * 텍스트 광고 전용 렌더러
+     */
+    class TextAdRenderer extends BaseAdRenderer {
+        constructor(debug = false, advertisementEventTracker) {
+            super(AdType.TEXT, debug, advertisementEventTracker);
+        }
+        /**
+         * 텍스트 광고 기본 높이
+         */
+        getDefaultHeight() {
+            return '60px';
+        }
+        /**
+         * 단일 텍스트 광고 렌더링
+         */
+        async renderAdElement(slot, advertisement) {
+            const container = document.getElementById(slot.containerId);
+            if (!container)
+                return;
+            const adElement = document.createElement('div');
+            adElement.className = 'adstage-ad adstage-text-ad';
+            const optimizedHeight = slot.optimizedHeight;
+            const containerElement = container.parentElement || container;
+            if (optimizedHeight) {
+                adElement.style.width = '100%';
+                adElement.style.height = String(optimizedHeight);
+            }
+            else {
+                const config = slot.config;
+                const options = {
+                    width: config?.width,
+                    height: config?.height
+                };
+                const { width, height } = this.calculateAdSize(containerElement, options, { debug: this.debug });
+                adElement.style.width = width;
+                adElement.style.height = height;
+            }
+            // 텍스트 콘텐츠 렌더링
+            const textDiv = document.createElement('div');
+            textDiv.className = 'adstage-text-content';
+            textDiv.style.cssText = TextAdUtils.createTextAdStyles(false);
+            TextAdUtils.setTextAdContent(textDiv, advertisement); // 최대 라인 수 제한
+            const maxLines = slot.config?.maxLines;
+            if (maxLines && typeof maxLines === 'number') {
+                textDiv.style.display = '-webkit-box';
+                textDiv.style.webkitLineClamp = String(maxLines);
+                textDiv.style.webkitBoxOrient = 'vertical';
+                textDiv.style.overflow = 'hidden';
+            }
+            adElement.appendChild(textDiv);
+            // 클릭 이벤트 추가 (공통 컴포넌트 사용)
+            AdClickHandler.addClickEventForRenderer(adElement, advertisement, slot, () => this.createEventTrackingCallback(), this.debug, 'Text');
+            container.innerHTML = '';
+            container.appendChild(adElement);
+            if (this.debug) {
+                console.log(`✨ Single text ad rendered: ${advertisement._id}`);
+            }
+        }
+        /**
+         * 다중 텍스트 광고 렌더링 (전환 효과)
+         */
+        async renderMultipleAds(slot, advertisements) {
+            const container = document.getElementById(slot.containerId);
+            if (!container) {
+                throw new Error(`Container not found: ${slot.containerId}`);
+            }
+            const trackEventCallback = this.createEventTrackingCallback();
+            const optimizedSliderOptions = {
+                autoSlideInterval: (slot.config?.slideInterval || 5000) / 1000,
+                ...slot.config,
+                optimizedHeight: slot.optimizedHeight,
+                aspectRatio: slot.aspectRatio
+            };
+            const sliderElement = TextTransitionManager.createTextTransitionContainer(slot, advertisements, optimizedSliderOptions, trackEventCallback, this.debug);
+            if (sliderElement) {
+                container.innerHTML = '';
+                container.appendChild(sliderElement);
+                if (this.debug) {
+                    console.log(`✨ Text transition created for slot: ${slot.id} with ${advertisements.length} ads`);
+                }
+            }
+        }
+    }
+
+    /**
+     * 비디오 광고 전용 렌더러
+     */
+    class VideoAdRenderer extends BaseAdRenderer {
+        constructor(debug = false, advertisementEventTracker) {
+            super(AdType.VIDEO, debug, advertisementEventTracker);
+        }
+        /**
+         * 비디오 광고 기본 높이 (16:9 비율 고려)
+         */
+        getDefaultHeight() {
+            return '360px';
+        }
+        /**
+         * 단일 비디오 광고 렌더링
+         */
+        async renderAdElement(slot, advertisement) {
+            const container = document.getElementById(slot.containerId);
+            if (!container)
+                return;
+            // 비디오 전용 컨테이너 생성
+            const videoContainer = document.createElement('div');
+            videoContainer.className = 'adstage-video-container';
+            videoContainer.style.cssText = `
+      width: 100%;
+      height: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background: #000;
+      border-radius: 8px;
+      overflow: hidden;
+    `;
+            // 비디오 요소 렌더링
+            this.renderVideoElementDirect(videoContainer, advertisement, slot);
+            container.innerHTML = '';
+            container.appendChild(videoContainer);
+            if (this.debug) {
+                console.log(`🎬 Single video ad rendered: ${advertisement._id}`);
+            }
+        }
+        /**
+         * 다중 비디오 광고 렌더링 - 비디오는 단일 렌더링만 지원
+         */
+        async renderMultipleAds(slot, advertisements) {
+            const container = document.getElementById(slot.containerId);
+            if (!container) {
+                throw new Error(`Container not found: ${slot.containerId}`);
+            }
+            if (advertisements.length > 0) {
+                const videoAd = advertisements[0]; // 첫 번째 비디오만 사용
+                // 비디오 전용 컨테이너 생성
+                const videoContainer = document.createElement('div');
+                videoContainer.className = 'adstage-video-container';
+                videoContainer.style.cssText = `
+        width: 100%;
+        height: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        background: #000;
+        border-radius: 8px;
+        overflow: hidden;
+      `;
+                // 비디오 요소 렌더링
+                this.renderVideoElementDirect(videoContainer, videoAd, slot);
+                // 컨테이너에 추가
+                container.innerHTML = '';
+                container.appendChild(videoContainer);
+                // VIEWABLE 이벤트 추적
+                const trackEventCallback = this.createEventTrackingCallback();
+                setTimeout(() => {
+                    trackEventCallback(videoAd._id, slot.id, AdEventType.VIEWABLE);
+                }, 100);
+                if (this.debug) {
+                    console.log(`🎬 Single video rendered for VIDEO slot: ${slot.id} (${videoAd._id})`);
+                }
+            }
+            else {
+                if (this.debug) {
+                    console.warn(`⚠️ No video advertisements available for slot: ${slot.id}`);
+                }
+            }
+        }
+        /**
+         * 비디오 요소 직접 렌더링
+         */
+        renderVideoElementDirect(container, advertisement, slot) {
+            // 비디오 컨테이너를 relative로 설정
+            container.style.position = 'relative';
+            const video = document.createElement('video');
+            // 비디오 기본 설정
+            video.style.width = '100%';
+            video.style.height = '100%';
+            video.style.objectFit = 'contain';
+            video.preload = 'metadata';
+            // 슬롯 설정에서 비디오 옵션들 확인 (기본값 적용)
+            const config = slot.config;
+            // 디버깅: config 내용 확인
+            if (this.debug) {
+                console.log('🎬 Video config received:', config);
+            }
+            // 기본 설정: 모든 컨트롤 숨김 (사용자 요구사항 - config에 상관없이 기본값 적용)
+            video.controls = false;
+            // 기본 설정: 자동 재생 true (config에 상관없이 기본값 적용, 단 사용자가 명시적으로 false 설정시 존중)
+            video.autoplay = config?.autoplay === false ? false : true;
+            // 기본 설정: 음소거 true (기본값 강제 적용)
+            video.muted = true;
+            // 기본 설정: 반복 재생 true (config에 상관없이 기본값 적용, 단 사용자가 명시적으로 false 설정시 존중)
+            video.loop = config?.loop === false ? false : true;
+            // 디버깅: 최종 비디오 설정 확인
+            if (this.debug) {
+                console.log('🎬 Final video settings:', {
+                    autoplay: video.autoplay,
+                    muted: video.muted,
+                    loop: video.loop,
+                    controls: video.controls
+                });
+            }
+            // playsinline 설정 (모바일에서 전체화면 방지)
+            if (config?.playsinline !== false) {
+                video.setAttribute('playsinline', '');
+            }
+            // 사용자가 명시적으로 controls=true를 설정한 경우에만 오버라이드 (첫 번째 비디오는 기본값 유지)
+            if (config?.controls === true) {
+                video.controls = true;
+                if (this.debug) {
+                    console.log('🎬 User explicitly enabled controls, overriding default');
+                }
+            }
+            // 특별한 컨트롤 설정 처리
+            if (config?.hideControls) {
+                // 완전히 모든 컨트롤 숨김 (pointer-events까지 차단)
+                video.controls = false;
+                video.style.cssText += `
+        pointer-events: none;
+      `;
+            }
+            else if (config?.customControls) {
+                // controls가 true일 때만 특정 컨트롤 숨기기 (CSS로 처리)
+                if (video.controls) {
+                    const customControlsStyle = document.createElement('style');
+                    customControlsStyle.textContent = `
+          video::-webkit-media-controls-play-button {
+            display: ${config.customControls.hidePlayButton ? 'none' : 'block'} !important;
+          }
+          video::-webkit-media-controls-timeline {
+            display: ${config.customControls.hideProgressBar ? 'none' : 'block'} !important;
+          }
+          video::-webkit-media-controls-current-time-display {
+            display: ${config.customControls.hideCurrentTime ? 'none' : 'block'} !important;
+          }
+          video::-webkit-media-controls-time-remaining-display {
+            display: ${config.customControls.hideRemainingTime ? 'none' : 'block'} !important;
+          }
+          video::-webkit-media-controls-volume-slider {
+            display: ${config.customControls.hideVolumeSlider ? 'none' : 'block'} !important;
+          }
+          video::-webkit-media-controls-mute-button {
+            display: ${config.customControls.hideMuteButton ? 'none' : 'block'} !important;
+          }
+          video::-webkit-media-controls-fullscreen-button {
+            display: ${config.customControls.hideFullscreenButton ? 'none' : 'block'} !important;
+          }
+        `;
+                    document.head.appendChild(customControlsStyle);
+                }
+            }
+            else if (video.controls) {
+                // controls=true이지만 특별한 설정이 없을 때, 기본 스타일 적용 (시간만 표시)
+                const defaultControlsStyle = document.createElement('style');
+                defaultControlsStyle.id = 'adstage-video-default-controls';
+                defaultControlsStyle.textContent = `
+        .adstage-video-container video::-webkit-media-controls-mute-button {
+          display: none !important;
+        }
+        .adstage-video-container video::-webkit-media-controls-fullscreen-button {
+          display: none !important;
+        }
+        .adstage-video-container video::-webkit-media-controls-toggle-closed-captions-button {
+          display: none !important;
+        }
+        .adstage-video-container video::-webkit-media-controls-volume-slider {
+          display: none !important;
+        }
+        .adstage-video-container video::-webkit-media-controls-overflow-button {
+          display: none !important;
+        }
+        .adstage-video-container video::-webkit-media-controls-picture-in-picture-button {
+          display: none !important;
+        }
+        video::-webkit-media-controls-mute-button {
+          display: none !important;
+        }
+        video::-webkit-media-controls-fullscreen-button {
+          display: none !important;
+        }
+        video::-webkit-media-controls-toggle-closed-captions-button {
+          display: none !important;
+        }
+        video::-webkit-media-controls-volume-slider {
+          display: none !important;
+        }
+        video::-webkit-media-controls-overflow-button {
+          display: none !important;
+        }
+        video::-webkit-media-controls-picture-in-picture-button {
+          display: none !important;
+        }
+      `;
+                // 스타일이 이미 존재하지 않으면 추가
+                if (!document.getElementById('adstage-video-default-controls')) {
+                    document.head.appendChild(defaultControlsStyle);
+                }
+            }
+            // 기본값이 controls=false이므로 아무것도 표시하지 않음
+            if (this.debug) {
+                console.log('🎬 Video controls setting:', video.controls ? 'enabled' : 'disabled (default)');
+            }
+            // 커스텀 음소거 토글 버튼 생성 (기본적으로 항상 표시)
+            const muteButton = document.createElement('button');
+            muteButton.className = 'adstage-video-mute-button';
+            muteButton.style.cssText = `
+      position: absolute;
+      top: 12px;
+      left: 12px;
+      width: 40px;
+      height: 40px;
+      border: none;
+      border-radius: 50%;
+      background: rgba(0, 0, 0, 0.7);
+      color: white;
+      font-size: 16px;
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      z-index: 10;
+      transition: all 0.3s ease;
+      backdrop-filter: blur(4px);
+    `;
+            // hideControls가 true면 음소거 버튼도 숨김
+            if (config?.hideControls) {
+                muteButton.style.display = 'none';
+            }
+            // 음소거 상태에 따른 아이콘 업데이트
+            const updateMuteButtonIcon = () => {
+                const mutedIcon = `
+        <svg width="20" height="20" viewBox="0 0 24 24" fill="white">
+          <path d="M16.5 12c0-1.77-1.02-3.29-2.5-4.03v2.21l2.45 2.45c.03-.2.05-.41.05-.63zm2.5 0c0 .94-.2 1.82-.54 2.64l1.51 1.51C20.63 14.91 21 13.5 21 12c0-4.28-2.99-7.86-7-8.77v2.06c2.89.86 5 3.54 5 6.71zM4.27 3L3 4.27 7.73 9H3v6h4l5 5v-6.73l4.25 4.25c-.67.52-1.42.93-2.25 1.18v2.06c1.38-.31 2.63-.95 3.69-1.81L19.73 21 21 19.73l-9-9L4.27 3zM12 4L9.91 6.09 12 8.18V4z"/>
+        </svg>
+      `;
+                const unmutedIcon = `
+        <svg width="20" height="20" viewBox="0 0 24 24" fill="white">
+          <path d="M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.49 7-8.77s-2.99-7.86-7-8.77z"/>
+        </svg>
+      `;
+                muteButton.innerHTML = video.muted ? mutedIcon : unmutedIcon;
+                muteButton.title = video.muted ? 'Click to unmute' : 'Click to mute';
+            };
+            // 초기 아이콘 설정
+            updateMuteButtonIcon();
+            // 음소거 버튼 클릭 이벤트
+            muteButton.addEventListener('click', (e) => {
+                e.stopPropagation(); // 비디오 클릭 이벤트 방지
+                video.muted = !video.muted;
+                updateMuteButtonIcon();
+                if (this.debug) {
+                    console.log(`🔊 Video mute toggled: ${video.muted ? 'muted' : 'unmuted'}`);
+                }
+            });
+            // 마우스 호버 효과
+            muteButton.addEventListener('mouseenter', () => {
+                muteButton.style.background = 'rgba(0, 0, 0, 0.9)';
+                muteButton.style.transform = 'scale(1.1)';
+            });
+            muteButton.addEventListener('mouseleave', () => {
+                muteButton.style.background = 'rgba(0, 0, 0, 0.7)';
+                muteButton.style.transform = 'scale(1)';
+            });
+            // 비디오 URL 설정
+            if (advertisement.videoUrl) {
+                video.src = advertisement.videoUrl;
+                // 자동 재생을 위한 다단계 시도
+                const attemptAutoplay = () => {
+                    if (video.autoplay && video.muted && video.paused) {
+                        video.play().catch(error => {
+                            if (this.debug) {
+                                console.warn('🎬 Auto-play was prevented:', error);
+                                console.warn('🎬 Trying muted autoplay fallback...');
+                            }
+                            // 음소거 상태에서 다시 시도
+                            video.muted = true;
+                            video.play().catch(fallbackError => {
+                                if (this.debug) {
+                                    console.error('🎬 Autoplay completely failed:', fallbackError);
+                                }
+                            });
+                        });
+                    }
+                };
+                // 다양한 이벤트에서 자동 재생 시도
+                video.addEventListener('loadedmetadata', () => {
+                    if (this.debug) {
+                        console.log('🎬 Video metadata loaded, attempting autoplay...');
+                    }
+                    attemptAutoplay();
+                });
+                video.addEventListener('canplay', () => {
+                    if (this.debug) {
+                        console.log('🎬 Video can play, attempting autoplay...');
+                    }
+                    attemptAutoplay();
+                });
+                video.addEventListener('loadeddata', () => {
+                    if (this.debug) {
+                        console.log('🎬 Video data loaded, attempting autoplay...');
+                    }
+                    attemptAutoplay();
+                });
+                // 비디오 로드 시작 즉시 한 번 시도
+                setTimeout(() => {
+                    if (this.debug) {
+                        console.log('🎬 Initial autoplay attempt after timeout...');
+                    }
+                    attemptAutoplay();
+                }, 100);
+            }
+            else if (advertisement.imageUrl) {
+                // 비디오 URL이 없으면 이미지를 대체 표시
+                const img = document.createElement('img');
+                img.src = advertisement.imageUrl;
+                img.style.width = '100%';
+                img.style.height = '100%';
+                img.style.objectFit = 'contain';
+                img.alt = advertisement.title || 'Video thumbnail';
+                container.appendChild(img);
+                return;
+            }
+            // 클릭 이벤트 추가 (공통 컴포넌트 사용)
+            AdClickHandler.addClickEventForRenderer(video, advertisement, slot, () => this.createEventTrackingCallback(), this.debug, 'Video');
+            // 비디오 로드 에러 처리
+            video.addEventListener('error', (e) => {
+                console.error('Video load failed:', e);
+                // 대체 이미지 표시
+                if (advertisement.imageUrl) {
+                    const img = document.createElement('img');
+                    img.src = advertisement.imageUrl;
+                    img.style.width = '100%';
+                    img.style.height = '100%';
+                    img.style.objectFit = 'contain';
+                    img.alt = advertisement.title || 'Video thumbnail';
+                    // 클릭 이벤트 추가 (공통 컴포넌트 사용)
+                    AdClickHandler.addClickEventForRenderer(img, advertisement, slot, () => this.createEventTrackingCallback(), this.debug, 'Video fallback');
+                    container.innerHTML = '';
+                    container.appendChild(img);
+                }
+            });
+            // 비디오와 음소거 버튼을 컨테이너에 추가
+            container.appendChild(video);
+            container.appendChild(muteButton);
+            if (this.debug) {
+                console.log(`🎬 Video element created for ad: ${advertisement._id} (autoplay: ${video.autoplay}, muted: ${video.muted}, loop: ${video.loop})`);
+            }
+        }
+    }
+
+    /**
+     * 네이티브 광고 전용 렌더러
+     */
+    class NativeAdRenderer extends BaseAdRenderer {
+        constructor(debug = false, advertisementEventTracker) {
+            super(AdType.NATIVE, debug, advertisementEventTracker);
+        }
+        /**
+         * 네이티브 광고 기본 높이
+         */
+        getDefaultHeight() {
+            return '200px';
+        }
+        /**
+         * 단일 네이티브 광고 렌더링
+         */
+        async renderAdElement(slot, advertisement) {
+            const container = document.getElementById(slot.containerId);
+            if (!container)
+                return;
+            const adElement = document.createElement('div');
+            adElement.className = 'adstage-ad adstage-native-ad';
+            adElement.style.cssText = `
+      width: 100%;
+      height: 100%;
+      display: flex;
+      flex-direction: column;
+      padding: 16px;
+      background: #fff;
+      border: 1px solid #e5e7eb;
+      border-radius: 8px;
+      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+    `;
+            // 제목
+            if (advertisement.title) {
+                const title = document.createElement('h3');
+                title.textContent = advertisement.title;
+                title.style.cssText = `
+        margin: 0 0 8px 0;
+        font-size: 16px;
+        font-weight: 600;
+        color: #111827;
+        line-height: 1.3;
+      `;
+                adElement.appendChild(title);
+            }
+            // 설명
+            if (advertisement.textContent) {
+                const description = document.createElement('p');
+                description.textContent = advertisement.textContent;
+                description.style.cssText = `
+        margin: 0 0 12px 0;
+        font-size: 14px;
+        color: #6b7280;
+        line-height: 1.4;
+        flex: 1;
+      `;
+                adElement.appendChild(description);
+            }
+            // 이미지 (있는 경우)
+            if (advertisement.imageUrl) {
+                const imageContainer = document.createElement('div');
+                imageContainer.style.cssText = `
+        width: 100%;
+        height: 120px;
+        margin-bottom: 12px;
+        border-radius: 6px;
+        overflow: hidden;
+        background: #f3f4f6;
+      `;
+                const img = document.createElement('img');
+                img.src = advertisement.imageUrl;
+                img.alt = advertisement.title || 'Native Advertisement';
+                img.style.cssText = `
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+      `;
+                imageContainer.appendChild(img);
+                adElement.appendChild(imageContainer);
+            }
+            // CTA 버튼 (링크가 있는 경우)
+            if (advertisement.linkUrl) {
+                const ctaButton = document.createElement('button');
+                ctaButton.textContent = 'Learn More';
+                ctaButton.style.cssText = `
+        padding: 8px 16px;
+        background: #3b82f6;
+        color: white;
+        border: none;
+        border-radius: 6px;
+        font-size: 14px;
+        font-weight: 500;
+        cursor: pointer;
+        align-self: flex-start;
+        transition: background-color 0.2s;
+      `;
+                ctaButton.addEventListener('click', () => {
+                    if (this.advertisementEventTracker) {
+                        console.log(`Native click tracked for ad: ${advertisement._id}`);
+                    }
+                    window.open(advertisement.linkUrl, '_blank');
+                });
+                ctaButton.addEventListener('mouseenter', () => {
+                    ctaButton.style.backgroundColor = '#2563eb';
+                });
+                ctaButton.addEventListener('mouseleave', () => {
+                    ctaButton.style.backgroundColor = '#3b82f6';
+                });
+                adElement.appendChild(ctaButton);
+            }
+            container.innerHTML = '';
+            container.appendChild(adElement);
+            if (this.debug) {
+                console.log(`🏠 Single native ad rendered: ${advertisement._id}`);
+            }
+        }
+        /**
+         * 다중 네이티브 광고 렌더링 - 현재는 단일 렌더링만 지원
+         */
+        async renderMultipleAds(slot, advertisements) {
+            if (advertisements.length > 0) {
+                await this.renderAdElement(slot, advertisements[0]);
+                if (this.debug) {
+                    console.log(`🏠 Native ad rendered (first of ${advertisements.length}): ${slot.id}`);
+                }
+            }
+            else {
+                if (this.debug) {
+                    console.warn(`⚠️ No native advertisements available for slot: ${slot.id}`);
+                }
+            }
+        }
+    }
+
+    /**
+     * 전면광고 전용 렌더러
+     */
+    class InterstitialAdRenderer extends BaseAdRenderer {
+        constructor(debug = false, advertisementEventTracker) {
+            super(AdType.INTERSTITIAL, debug, advertisementEventTracker);
+        }
+        /**
+         * 전면광고 기본 높이 (크게 설정)
+         */
+        getDefaultHeight() {
+            return '400px';
+        }
+        /**
+         * 단일 전면광고 렌더링
+         */
+        async renderAdElement(slot, advertisement) {
+            const container = document.getElementById(slot.containerId);
+            if (!container)
+                return;
+            // 전면광고 오버레이 생성
+            const overlay = document.createElement('div');
+            overlay.className = 'adstage-interstitial-overlay';
+            overlay.style.cssText = `
+      position: fixed;
+      top: 0;
+      left: 0;
+      width: 100vw;
+      height: 100vh;
+      background: rgba(0, 0, 0, 0.8);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      z-index: 10000;
+      animation: fadeIn 0.3s ease-out;
+    `;
+            // 전면광고 콘텐츠
+            const adContent = document.createElement('div');
+            adContent.className = 'adstage-interstitial-content';
+            adContent.style.cssText = `
+      position: relative;
+      max-width: 90vw;
+      max-height: 90vh;
+      background: white;
+      border-radius: 12px;
+      padding: 24px;
+      box-shadow: 0 25px 50px rgba(0, 0, 0, 0.25);
+      animation: slideUp 0.3s ease-out;
+      overflow: auto;
+    `;
+            // 닫기 버튼
+            const closeButton = document.createElement('button');
+            closeButton.innerHTML = '×';
+            closeButton.style.cssText = `
+      position: absolute;
+      top: 12px;
+      right: 12px;
+      width: 32px;
+      height: 32px;
+      border: none;
+      background: #f3f4f6;
+      color: #6b7280;
+      font-size: 20px;
+      font-weight: bold;
+      border-radius: 50%;
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      transition: all 0.2s;
+    `;
+            closeButton.addEventListener('click', () => {
+                this.closeInterstitial(overlay);
+            });
+            closeButton.addEventListener('mouseenter', () => {
+                closeButton.style.backgroundColor = '#e5e7eb';
+                closeButton.style.color = '#374151';
+            });
+            closeButton.addEventListener('mouseleave', () => {
+                closeButton.style.backgroundColor = '#f3f4f6';
+                closeButton.style.color = '#6b7280';
+            });
+            // 이미지 (있는 경우)
+            if (advertisement.imageUrl) {
+                const img = document.createElement('img');
+                img.src = advertisement.imageUrl;
+                img.alt = advertisement.title || 'Interstitial Advertisement';
+                img.style.cssText = `
+        width: 100%;
+        max-height: 300px;
+        object-fit: cover;
+        border-radius: 8px;
+        margin-bottom: 16px;
+      `;
+                adContent.appendChild(img);
+            }
+            // 제목
+            if (advertisement.title) {
+                const title = document.createElement('h2');
+                title.textContent = advertisement.title;
+                title.style.cssText = `
+        margin: 0 0 12px 0;
+        font-size: 24px;
+        font-weight: 700;
+        color: #111827;
+        line-height: 1.3;
+      `;
+                adContent.appendChild(title);
+            }
+            // 설명
+            if (advertisement.textContent) {
+                const description = document.createElement('p');
+                description.textContent = advertisement.textContent;
+                description.style.cssText = `
+        margin: 0 0 20px 0;
+        font-size: 16px;
+        color: #6b7280;
+        line-height: 1.5;
+      `;
+                adContent.appendChild(description);
+            }
+            // CTA 버튼 (링크가 있는 경우)
+            if (advertisement.linkUrl) {
+                const ctaButton = document.createElement('button');
+                ctaButton.textContent = 'Get Started';
+                ctaButton.style.cssText = `
+        width: 100%;
+        padding: 12px 24px;
+        background: #3b82f6;
+        color: white;
+        border: none;
+        border-radius: 8px;
+        font-size: 16px;
+        font-weight: 600;
+        cursor: pointer;
+        transition: background-color 0.2s;
+      `;
+                ctaButton.addEventListener('click', () => {
+                    if (this.advertisementEventTracker) {
+                        console.log(`Interstitial click tracked for ad: ${advertisement._id}`);
+                    }
+                    window.open(advertisement.linkUrl, '_blank');
+                    this.closeInterstitial(overlay);
+                });
+                ctaButton.addEventListener('mouseenter', () => {
+                    ctaButton.style.backgroundColor = '#2563eb';
+                });
+                ctaButton.addEventListener('mouseleave', () => {
+                    ctaButton.style.backgroundColor = '#3b82f6';
+                });
+                adContent.appendChild(ctaButton);
+            }
+            // ESC 키로 닫기
+            const handleEscape = (event) => {
+                if (event.key === 'Escape') {
+                    this.closeInterstitial(overlay);
+                    document.removeEventListener('keydown', handleEscape);
+                }
+            };
+            document.addEventListener('keydown', handleEscape);
+            // 오버레이 클릭으로 닫기
+            overlay.addEventListener('click', (event) => {
+                if (event.target === overlay) {
+                    this.closeInterstitial(overlay);
+                }
+            });
+            // CSS 애니메이션 추가
+            if (!document.getElementById('adstage-interstitial-styles')) {
+                const styles = document.createElement('style');
+                styles.id = 'adstage-interstitial-styles';
+                styles.textContent = `
+        @keyframes fadeIn {
+          from { opacity: 0; }
+          to { opacity: 1; }
+        }
+        @keyframes slideUp {
+          from { 
+            opacity: 0;
+            transform: translateY(20px);
+          }
+          to { 
+            opacity: 1;
+            transform: translateY(0);
+          }
+        }
+      `;
+                document.head.appendChild(styles);
+            }
+            adContent.appendChild(closeButton);
+            overlay.appendChild(adContent);
+            document.body.appendChild(overlay);
+            if (this.debug) {
+                console.log(`🖼️ Interstitial ad rendered: ${advertisement._id}`);
+            }
+        }
+        /**
+         * 다중 전면광고 렌더링 - 현재는 단일 렌더링만 지원
+         */
+        async renderMultipleAds(slot, advertisements) {
+            if (advertisements.length > 0) {
+                await this.renderAdElement(slot, advertisements[0]);
+                if (this.debug) {
+                    console.log(`🖼️ Interstitial ad rendered (first of ${advertisements.length}): ${slot.id}`);
+                }
+            }
+            else {
+                if (this.debug) {
+                    console.warn(`⚠️ No interstitial advertisements available for slot: ${slot.id}`);
+                }
+            }
+        }
+        /**
+         * 전면광고 닫기
+         */
+        closeInterstitial(overlay) {
+            overlay.style.animation = 'fadeOut 0.3s ease-out forwards';
+            // CSS 애니메이션이 없으면 즉시 제거
+            setTimeout(() => {
+                if (overlay.parentNode) {
+                    overlay.parentNode.removeChild(overlay);
+                }
+            }, 300);
+            if (this.debug) {
+                console.log('🖼️ Interstitial ad closed');
+            }
+        }
+    }
+
+    /**
+     * AdRenderer - 광고 렌더링 팩토리 클래스
+     * 광고 타입별로 적절한 렌더러를 생성하고 관리
+     */
+    class AdRenderer {
+        constructor(debug = false, advertisementEventTracker) {
+            this.renderers = new Map();
+            this.debug = debug;
+            this.advertisementEventTracker = advertisementEventTracker || null;
+            // 각 광고 타입별 렌더러 초기화
+            this.initializeRenderers();
+        }
+        /**
+         * 광고 타입별 렌더러 초기화
+         */
+        initializeRenderers() {
+            this.renderers.set(AdType.BANNER, new BannerAdRenderer(this.debug, this.advertisementEventTracker));
+            this.renderers.set(AdType.TEXT, new TextAdRenderer(this.debug, this.advertisementEventTracker));
+            this.renderers.set(AdType.VIDEO, new VideoAdRenderer(this.debug, this.advertisementEventTracker));
+            this.renderers.set(AdType.NATIVE, new NativeAdRenderer(this.debug, this.advertisementEventTracker));
+            this.renderers.set(AdType.INTERSTITIAL, new InterstitialAdRenderer(this.debug, this.advertisementEventTracker));
+            if (this.debug) {
+                console.log(`🏭 AdRenderer factory initialized with ${this.renderers.size} renderers`);
+            }
+        }
+        /**
+         * 광고 요소를 동기적으로 생성해서 반환 (크기 측정 등을 위한 helper)
+         */
+        createAdElement(slot, advertisement) {
+            const renderer = this.getRenderer(slot.adType);
+            // 기본 광고 요소 생성
+            const adElement = document.createElement('div');
+            adElement.className = `adstage-ad adstage-${String(slot.adType).toLowerCase()}`;
+            adElement.setAttribute('data-adstage-ad-id', advertisement._id);
+            adElement.setAttribute('data-adstage-slot-id', slot.id);
+            // 광고 타입별 기본 컨테이너 설정
+            const { width, height } = renderer.calculateAdSize(adElement, slot.config || {}, advertisement);
+            adElement.style.width = width;
+            adElement.style.height = height;
+            adElement.style.display = 'block';
+            // 간단한 내용 설정 (크기 측정용)
+            switch (slot.adType) {
+                case AdType.BANNER:
+                    if (advertisement.imageUrl) {
+                        const img = document.createElement('img');
+                        img.src = advertisement.imageUrl;
+                        img.style.width = '100%';
+                        img.style.height = '100%';
+                        img.style.objectFit = 'cover';
+                        adElement.appendChild(img);
+                    }
+                    break;
+                case AdType.VIDEO:
+                    if (advertisement.videoUrl) {
+                        const video = document.createElement('video');
+                        video.src = advertisement.videoUrl;
+                        video.style.width = '100%';
+                        video.style.height = '100%';
+                        adElement.appendChild(video);
+                    }
+                    break;
+                case AdType.TEXT:
+                    if (advertisement.textContent) {
+                        const textDiv = document.createElement('div');
+                        textDiv.textContent = advertisement.textContent || '';
+                        textDiv.style.padding = '8px';
+                        adElement.appendChild(textDiv);
+                    }
+                    break;
+                default:
+                    // 기본 placeholder
+                    adElement.style.border = '1px dashed #ccc';
+                    adElement.style.backgroundColor = '#f9f9f9';
+                    adElement.textContent = `${slot.adType} Ad`;
+            }
+            return adElement;
+        }
+        /**
+         * 광고 타입에 따른 렌더러 획득
+         */
+        getRenderer(adType) {
+            const renderer = this.renderers.get(adType);
+            if (!renderer) {
+                throw new Error(`No renderer found for ad type: ${adType}`);
+            }
+            return renderer;
+        }
+        /**
+         * Placeholder(슬롯 컨테이너) 생성
+         */
+        createPlaceholder(container, slotId, type, options, config) {
+            const renderer = this.getRenderer(type);
+            renderer.createPlaceholder(container, slotId, options, config);
+        }
+        /**
+         * 배너 광고를 위한 컨테이너 최적화 (배너 전용)
+         */
+        async optimizeContainerForBannerAds(slot, advertisements) {
+            if (slot.adType !== AdType.BANNER) {
+                if (this.debug) {
+                    console.warn(`⚠️ Container optimization is only supported for BANNER ads, got: ${slot.adType}`);
+                }
+                return;
+            }
+            const bannerRenderer = this.getRenderer(AdType.BANNER);
+            await bannerRenderer.optimizeContainerForBannerAds(slot, advertisements);
+        }
+        /**
+         * 광고 슬라이더 렌더링 (여러 광고 또는 autoSlide 옵션)
+         */
+        async renderAdSlider(slot, advertisements) {
+            const renderer = this.getRenderer(slot.adType);
+            await renderer.renderMultipleAds(slot, advertisements);
+        }
+        /**
+         * 광고 렌더링 (단일 광고용)
+         */
+        async renderAd(slot) {
+            if (!slot.advertisement) {
+                throw new Error('No advertisement to render');
+            }
+            const renderer = this.getRenderer(slot.adType);
+            await renderer.renderAdElement(slot, slot.advertisement);
+            slot.isLoaded = true;
+        }
+        /**
+         * 광고 요소 렌더링 (기본 구현) - 호환성을 위해 유지
+         */
+        async renderAdElement(slot, ad) {
+            const renderer = this.getRenderer(slot.adType);
+            await renderer.renderAdElement(slot, ad);
+        }
+        /**
+         * Fallback 광고 렌더링 - 컨테이너 접기/생성
+         */
+        renderFallback(slot) {
+            const renderer = this.getRenderer(slot.adType);
+            renderer.renderFallback(slot);
+        }
+        /**
+         * 광고 타입별 기본 높이 반환
+         */
+        getDefaultHeightForAdType(type) {
+            const renderer = this.getRenderer(type);
+            return renderer.getDefaultHeight();
+        }
+        /**
+         * 컨테이너와 광고 타입에 따른 스마트한 크기 계산
+         */
+        calculateAdSize(container, type, options, config) {
+            const renderer = this.getRenderer(type);
+            return renderer.calculateAdSize(container, options, config);
+        }
+        /**
+         * 이미지 로드 및 실제 크기 획득 (배너 전용)
+         */
+        loadImageDimensions(imageUrl) {
+            return new Promise((resolve, reject) => {
+                const img = new Image();
+                img.onload = () => {
+                    resolve({ width: img.naturalWidth, height: img.naturalHeight });
+                };
+                img.onerror = () => {
+                    reject(new Error(`Failed to load image: ${imageUrl}`));
+                };
+                img.src = imageUrl;
+            });
+        }
+        /**
+         * 배너 이미지 최적화 렌더링 (배너 전용)
+         */
+        async renderOptimizedBannerImage(container, advertisement, slot) {
+            if (slot.adType !== AdType.BANNER) {
+                throw new Error('renderOptimizedBannerImage is only supported for BANNER ads');
+            }
+            const bannerRenderer = this.getRenderer(AdType.BANNER);
+            return await bannerRenderer.renderOptimizedBannerImage(container, advertisement, slot);
+        }
+        /**
+         * 여러 광고의 최적 컨테이너 크기 계산 (배너 전용)
+         */
+        async calculateOptimalContainerSize(advertisements, containerWidth, adType) {
+            if (adType !== AdType.BANNER) {
+                const renderer = this.getRenderer(adType);
+                return {
+                    width: '100%',
+                    height: renderer.getDefaultHeight(),
+                    aspectRatio: 16 / 9
+                };
+            }
+            const bannerRenderer = this.getRenderer(AdType.BANNER);
+            return await bannerRenderer.calculateOptimalContainerSize(advertisements, containerWidth);
+        }
+        /**
+         * 디버그 로그 출력
+         */
+        log(message, ...args) {
+            if (this.debug) {
+                console.log(`[AdRenderer] ${message}`, ...args);
+            }
+        }
+    }
+
+    /**
+     * AdStage SDK - Ads 모듈
+     * 광고 관리 및 렌더링 기능
+     */
+    class AdsModule {
+        constructor() {
+            this._isReady = false;
+            this._config = null;
+            this.slots = new Map();
+            // Advertisement 이벤트 추적 관련
+            this.advertisementEventTracker = null;
+            // 렌더링 관련
+            this.adRenderer = null;
+            // DOM 변화 감지를 위한 MutationObserver
+            this.mutationObserver = null;
+        }
+        /**
+         * Ads 모듈 초기화 (동기)
+         */
+        init(config) {
+            this._config = config;
+            // AdvertisementEventTracker 초기화 (환경 자동 감지된 엔드포인트 사용)
+            this.advertisementEventTracker = new AdvertisementEventTracker(endpoints.getBaseUrl(), config.apiKey, config.debug || false, this.slots);
+            // AdRenderer 초기화
+            this.adRenderer = new AdRenderer(config.debug || false, this.advertisementEventTracker);
+            // DOM 변화 감지를 위한 MutationObserver 설정
+            this.setupAutoCleanup();
+            this._isReady = true;
+            if (config.debug) {
+                console.log('🎯 Ads module initialized (sync mode) with auto-cleanup');
+            }
+        }
+        /**
+         * 모듈 준비 상태 확인
+         */
+        isReady() {
+            return this._isReady;
+        }
+        /**
+         * 모듈 설정 반환
+         */
+        getConfig() {
+            return this._config;
+        }
+        /**
+         * 배너 광고 생성 (동기)
+         */
+        banner(containerId, options) {
+            this.ensureReady();
+            const adstageOptions = {
+                width: options?.width || '100%',
+                height: options?.height || 'auto', // 🔧 동적 크기 조정 활용
+                autoSlide: options?.autoSlide || false,
+                slideInterval: options?.slideInterval || 5000,
+                onClick: options?.onClick,
+                // 특정 광고 ID
+                adId: options?.adId,
+                // 필터링 옵션들 전달
+                language: options?.language,
+                deviceType: options?.deviceType,
+                country: options?.country
+            };
+            return this.createAd(containerId, AdType.BANNER, adstageOptions);
+        }
+        /**
+         * 텍스트 광고 생성 (동기)
+         */
+        text(containerId, options) {
+            this.ensureReady();
+            const adstageOptions = {
+                maxLines: options?.maxLines || 3,
+                style: options?.style || 'default',
+                onClick: options?.onClick,
+                // 특정 광고 ID
+                adId: options?.adId,
+                // 필터링 옵션들 전달
+                language: options?.language,
+                deviceType: options?.deviceType,
+                country: options?.country
+            };
+            return this.createAd(containerId, AdType.TEXT, adstageOptions);
+        }
+        /**
+         * 비디오 광고 생성 (동기) - 단일 비디오만 지원
+         */
+        video(containerId, options) {
+            this.ensureReady();
+            const adstageOptions = {
+                width: options?.width || 640,
+                height: options?.height || 360,
+                autoplay: options?.autoplay !== undefined ? options.autoplay : true, // 기본값 true (사용자 요구사항)
+                muted: options?.muted !== undefined ? options.muted : true, // 기본값 true
+                loop: options?.loop !== undefined ? options.loop : true, // 기본값 true (사용자 요구사항)
+                playsinline: options?.playsinline !== false, // 기본값 true
+                controls: options?.controls !== undefined ? options.controls : false, // 기본값 false (사용자 요구사항)
+                hideControls: options?.hideControls || false,
+                customControls: options?.customControls,
+                autoSlide: false, // 비디오는 슬라이드 비활성화
+                maxAds: 1, // 하나의 비디오만 가져오기
+                onClick: options?.onClick,
+                ...(options?.adId && { adId: options.adId }) // 특정 비디오 ID가 있으면 사용
+            };
+            return this.createAd(containerId, AdType.VIDEO, adstageOptions);
+        }
+        /**
+         * 네이티브 광고 생성 (동기)
+         */
+        native(containerId, options) {
+            this.ensureReady();
+            return this.createAd(containerId, AdType.NATIVE, options || {});
+        }
+        /**
+         * 전면 광고 생성 (동기)
+         */
+        interstitial(containerId, options) {
+            this.ensureReady();
+            return this.createAd(containerId, AdType.INTERSTITIAL, options || {});
+        }
+        /**
+         * 광고 새로고침
+         */
+        refresh(slotId) {
+            this.ensureReady();
+            const slot = this.slots.get(slotId);
+            if (!slot) {
+                throw new Error(`Ad slot not found: ${slotId}`);
+            }
+            // 광고 새로고침 로직
+            this.refreshAdSlot(slot);
+            if (this._config?.debug) {
+                console.log(`🔄 Ad slot refreshed: ${slotId}`);
+            }
+        }
+        /**
+         * 광고 제거
+         */
+        destroy(slotId) {
+            this.ensureReady();
+            const slot = this.slots.get(slotId);
+            if (!slot) {
+                throw new Error(`Ad slot not found: ${slotId}`);
+            }
+            // SimpleViewabilityTracker 정리
+            if (slot.viewabilityTracker) {
+                slot.viewabilityTracker.destroy();
+            }
+            // DOM에서 제거
+            const container = document.getElementById(slot.containerId);
+            if (container) {
+                container.innerHTML = '';
+            }
+            // 슬롯 제거
+            this.slots.delete(slotId);
+            if (this._config?.debug) {
+                console.log(`🗑️ Ad slot destroyed: ${slotId}`);
+            }
+        }
+        /**
+         * 모든 광고 슬롯 반환
+         */
+        getAllSlots() {
+            this.ensureReady();
+            return Array.from(this.slots.values());
+        }
+        /**
+         * 특정 광고 슬롯 반환
+         */
+        getSlotById(slotId) {
+            this.ensureReady();
+            return this.slots.get(slotId) || null;
+        }
+        /**
+         * 광고 생성 내부 메소드 (동기 + Lazy 로딩)
+         */
+        createAd(containerId, type, options) {
+            if (!this._config?.apiKey) {
+                throw new Error('API key not configured');
+            }
+            // 즉시 슬롯 ID 생성 (개발자에게 바로 반환)
+            const slotId = `adstage-${type}-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
+            // 비동기로 광고 생성 처리 (디바운싱 및 재시도 로직 포함)
+            this.createAdWithRetry(containerId, type, options, slotId, 0);
+            return slotId;
+        }
+        async createAdWithRetry(containerId, type, options, slotId, attempt) {
+            const maxAttempts = 5;
+            const delays = [0, 50, 100, 200, 500]; // 점진적 지연
+            let container = null;
+            let containerIdString;
+            // HTMLElement인지 string인지 구분
+            if (typeof containerId === 'string') {
+                // string인 경우 DOM에서 찾기
+                containerIdString = containerId;
+                container = document.getElementById(containerId);
+                if (!container) {
+                    if (attempt < maxAttempts - 1) {
+                        if (this._config?.debug) {
+                            console.warn(`Container not found: ${containerId}. Retrying in ${delays[attempt + 1]}ms... (attempt ${attempt + 1}/${maxAttempts})`);
+                        }
+                        setTimeout(() => {
+                            this.createAdWithRetry(containerId, type, options, slotId, attempt + 1);
+                        }, delays[attempt + 1]);
+                        return;
+                    }
+                    else {
+                        console.error(`Container not found after ${maxAttempts} attempts: ${containerId}`);
+                        return;
+                    }
+                }
+            }
+            else {
+                // HTMLElement인 경우 직접 사용
+                container = containerId;
+                containerIdString = container.id || `auto-${slotId}`;
+                // ID가 없으면 자동 생성
+                if (!container.id) {
+                    container.id = containerIdString;
+                }
+            }
+            // 컨테이너를 찾았으면 광고 생성
+            try {
+                this.createAdInternal(containerIdString, type, options, slotId, container);
+            }
+            catch (error) {
+                console.error('광고 생성 중 오류 발생:', error);
+            }
+        }
+        createAdInternal(containerId, type, options, slotId, container) {
+            // 컨테이너에 슬롯 ID 속성 추가 (MutationObserver가 감지할 수 있도록)
+            container.setAttribute('data-adstage-slot-id', slotId);
+            // 즉시 placeholder 생성 (AdRenderer 위임)
+            this.adRenderer?.createPlaceholder(container, slotId, type, options, this._config);
+            // 광고 슬롯 정보 저장
+            const slot = {
+                id: slotId,
+                containerId,
+                adType: type,
+                width: options.width || '100%',
+                height: options.height || (type === AdType.TEXT ? 'auto' : 250), // 텍스트 광고는 콘텐츠 높이에 맞춤
+                isLoaded: false,
+                isVisible: false,
+                refreshRate: 0,
+                lazyLoad: false,
+                targeting: {},
+                advertisement: undefined, // 나중에 로드
+                config: { type, ...options },
+                load: async () => this.fetchAdData(type, options).then(ads => ads[0] || null),
+                render: (ad) => this.adRenderer?.renderAdElement(slot, ad),
+                refresh: async () => this.refreshAdSlot(slot),
+                destroy: () => this.destroy(slotId)
+            };
+            // 슬롯 저장
+            this.slots.set(slotId, slot);
+            // 백그라운드에서 광고 로드
+            this.loadAdContentInBackground(slot);
+            // 이벤트 추적 준비
+            if (this.advertisementEventTracker && this._config?.debug) {
+                console.log(`📊 Advertisement event tracking enabled for slot: ${slotId}`);
+            }
+        }
+        /**
+         * 백그라운드에서 광고 콘텐츠 로드
+         */
+        async loadAdContentInBackground(slot) {
+            try {
+                // 광고 데이터 가져오기 - 여러 개 로드
+                const adstageData = await this.fetchAdData(slot.adType, slot.config);
+                if (!adstageData || adstageData.length === 0) {
+                    this.adRenderer?.renderFallback(slot);
+                    return;
+                }
+                // 🆕 동적 크기 조정: 배너 광고의 경우 이미지 크기 기반으로 컨테이너 최적화
+                if (slot.adType === AdType.BANNER && adstageData.length > 0) {
+                    await this.adRenderer?.optimizeContainerForBannerAds(slot, adstageData);
+                }
+                // 광고가 여러 개이거나 autoSlide 옵션이 있으면 슬라이더로 렌더링
+                if (adstageData.length > 1 || slot.config?.autoSlide) {
+                    await this.adRenderer?.renderAdSlider(slot, adstageData);
+                    // 🔧 슬라이더는 CarouselSliderManager에서 자체적으로 모든 광고의 VIEWABLE 이벤트를 처리
+                    if (this._config?.debug) {
+                        console.log(`🎠 Slider will handle VIEWABLE events for ${adstageData.length} ads automatically`);
+                    }
+                }
+                else {
+                    // 광고가 1개면 일반 렌더링
+                    slot.advertisement = adstageData[0];
+                    await this.adRenderer?.renderAdElement(slot, adstageData[0]);
+                    // ✅ 신규: Viewable impression 추적 시작 (기존 즉시 추적 대신)
+                    this.startSimpleViewabilityTracking(slot, adstageData[0]);
+                }
+                slot.isLoaded = true;
+                if (this._config?.debug) {
+                    console.log(`✅ Ad loaded for slot: ${slot.id} (${adstageData.length} ads)`);
+                }
+            }
+            catch (error) {
+                console.error(`❌ Failed to load ad for slot: ${slot.id}`, error);
+                this.adRenderer?.renderFallback(slot);
+            }
+        }
+        /**
+         * 배너 광고를 위한 컨테이너 최적화
+         */
+        // optimizeContainerForBannerAds 제거: AdRenderer.optimizeContainerForBannerAds 사용
+        /**
+         * 단순한 노출 추적 시작 (재시도 로직 포함)
+         */
+        startSimpleViewabilityTracking(slot, ad) {
+            const tryStartTracking = (retryCount = 0) => {
+                const element = document.getElementById(slot.id);
+                if (!element) {
+                    if (retryCount < 5) {
+                        // 최대 5번 재시도 (총 1.5초)
+                        setTimeout(() => tryStartTracking(retryCount + 1), 300);
+                        if (this._config?.debug) {
+                            console.log(`🔄 Retrying viewability tracking for slot: ${slot.id} (attempt ${retryCount + 1})`);
+                        }
+                    }
+                    else {
+                        console.warn(`❌ Failed to find element for viewability tracking: ${slot.id}`);
+                    }
+                    return;
+                }
+                // 단순한 노출 추적
+                const tracker = new SimpleViewabilityTracker(element, async () => {
+                    await this.handleViewableEvent(ad, slot);
+                });
+                // 정리를 위해 저장
+                slot.viewabilityTracker = tracker;
+                if (this._config?.debug) {
+                    console.log(`🎯 Simple viewability tracking started for slot: ${slot.id} (element found)`);
+                }
+            };
+            tryStartTracking();
+        }
+        /**
+         * Viewable 이벤트 처리 (단순화됨)
+         */
+        async handleViewableEvent(ad, slot) {
+            try {
+                // VIEWABLE 이벤트 전송
+                if (this.advertisementEventTracker) {
+                    await this.advertisementEventTracker.trackAdvertisementEvent(ad._id, slot.id, AdEventType.VIEWABLE);
+                    if (this._config?.debug) {
+                        console.log(`✅ Simple viewable impression tracked for ad ${ad._id}`);
+                    }
+                }
+            }
+            catch (error) {
+                console.error(`❌ Failed to track viewable impression:`, error);
+            }
+        }
+        /**
+         * 광고 데이터 가져오기
+         */
+        async fetchAdData(type, options) {
+            if (!this._config?.apiKey) {
+                throw new Error('API key not configured');
+            }
+            // 특정 광고 ID가 지정된 경우, 해당 광고만 요청
+            if (options.adId) {
+                const url = `${endpoints.advertisements.detail(options.adId)}`;
+                const response = await fetch(url, {
+                    method: 'GET',
+                    headers: ApiHeaders.create(this._config.apiKey)
+                });
+                if (!response.ok) {
+                    if (response.status === 404) {
+                        console.warn(`🚫 Advertisement not found with ID: ${options.adId}`);
+                        return [];
+                    }
+                    throw new Error(`Failed to fetch ad data: ${response.status}`);
+                }
+                const advertisement = await response.json();
+                if (this._config?.debug) {
+                    console.log(`📊 Fetched specific ad with ID: ${options.adId}`, advertisement);
+                }
+                return [advertisement];
+            }
+            // 일반적인 광고 목록 요청
+            const params = new URLSearchParams();
+            params.append('adType', type);
+            // 백엔드 API에서 실제 지원하는 필터링 옵션들만 추가
+            if (options.language) {
+                params.append('language', options.language);
+            }
+            if (options.deviceType) {
+                params.append('deviceType', options.deviceType);
+            }
+            if (options.country) {
+                params.append('country', options.country);
+            }
+            const url = `${endpoints.advertisements.list()}?${params.toString()}`;
+            const response = await fetch(url, {
+                method: 'GET',
+                headers: ApiHeaders.create(this._config.apiKey)
+            });
+            if (!response.ok) {
+                throw new Error(`Failed to fetch ad data: ${response.status}`);
+            }
+            const result = await response.json();
+            const advertisements = result.advertisements || [];
+            if (this._config?.debug) {
+                console.log(`📊 Fetched ${advertisements.length} ads for type: ${type}, filters:`, {
+                    language: options.language,
+                    deviceType: options.deviceType,
+                    country: options.country
+                });
+            }
+            return advertisements;
+        }
+        /**
+         * 광고 슬롯 새로고침
+         */
+        async refreshAdSlot(slot) {
+            try {
+                // 새로운 광고 데이터 가져오기 (config에서 타입과 옵션 정보 사용)
+                const newAdData = await this.fetchAdData(slot.adType, slot.config || {});
+                if (newAdData && newAdData.length > 0) {
+                    slot.advertisement = newAdData[0]; // 첫 번째 광고로 업데이트
+                    await this.adRenderer?.renderAd(slot);
+                    // 새로운 노출 추적
+                    if (this.advertisementEventTracker) {
+                        console.log('New advertisement viewable tracked for slot:', slot.id);
+                    }
+                }
+            }
+            catch (error) {
+                console.error(`Failed to refresh ad slot: ${slot.id}`, error);
+            }
+        }
+        /**
+         * 모듈 준비 상태 확인
+         */
+        ensureReady() {
+            if (!this._isReady) {
+                throw new Error('Ads module not initialized. Call AdStage.init() first.');
+            }
+        }
+        /**
+         * DOM 변화 감지를 통한 자동 정리 설정
+         */
+        setupAutoCleanup() {
+            // 브라우저 환경에서만 실행
+            if (typeof window === 'undefined' || typeof document === 'undefined') {
+                return;
+            }
+            // 기존 observer가 있으면 해제
+            if (this.mutationObserver) {
+                this.mutationObserver.disconnect();
+            }
+            // 새로운 MutationObserver 생성
+            this.mutationObserver = new MutationObserver((mutations) => {
+                mutations.forEach((mutation) => {
+                    // 제거된 노드들 확인
+                    mutation.removedNodes.forEach((node) => {
+                        if (node.nodeType === Node.ELEMENT_NODE) {
+                            this.handleRemovedElement(node);
+                        }
+                    });
+                });
+            });
+            // document 전체를 관찰 (childList와 subtree 옵션 사용)
+            this.mutationObserver.observe(document.body, {
+                childList: true,
+                subtree: true
+            });
+            if (this._config?.debug) {
+                console.log('🔍 Auto-cleanup MutationObserver enabled');
+            }
+        }
+        /**
+         * 제거된 요소에서 광고 슬롯 정리
+         */
+        handleRemovedElement(element) {
+            // 제거된 요소가 광고 컨테이너인지 확인
+            const slotId = element.getAttribute('data-adstage-slot-id');
+            if (slotId) {
+                this.autoDestroy(slotId);
+                return;
+            }
+            // 제거된 요소의 하위에 광고 컨테이너가 있는지 확인
+            const adContainers = element.querySelectorAll('[data-adstage-slot-id]');
+            adContainers.forEach((container) => {
+                const containerSlotId = container.getAttribute('data-adstage-slot-id');
+                if (containerSlotId) {
+                    this.autoDestroy(containerSlotId);
+                }
+            });
+        }
+        /**
+         * 자동 정리 (로그 없이 조용히 정리)
+         */
+        autoDestroy(slotId) {
+            const slot = this.slots.get(slotId);
+            if (slot) {
+                try {
+                    // 슬롯 정리 (로그 출력 최소화)
+                    this.slots.delete(slotId);
+                    if (this._config?.debug) {
+                        console.log(`🧹 Auto-cleanup: slot ${slotId} removed`);
+                    }
+                }
+                catch (error) {
+                    if (this._config?.debug) {
+                        console.warn(`Auto-cleanup failed for slot ${slotId}:`, error);
+                    }
+                }
+            }
+        }
+        /**
+         * 모듈 종료 시 정리
+         */
+        destroyModule() {
+            const debugMode = this._config?.debug;
+            // MutationObserver 해제
+            if (this.mutationObserver) {
+                this.mutationObserver.disconnect();
+                this.mutationObserver = null;
+            }
+            // 모든 슬롯 정리
+            this.slots.clear();
+            // 다른 리소스들 정리
+            this.advertisementEventTracker = null;
+            this.adRenderer = null;
+            this._isReady = false;
+            this._config = null;
+            if (debugMode) {
+                console.log('🗑️ Ads module destroyed');
+            }
+        }
+    }
+
+    /**
+     * AdStage SDK - Config 모듈
+     * 설정 관리 및 API 키 검증
+     */
+    class ConfigModule {
+        constructor() {
+            this._isReady = false;
+            this._config = null;
+            this._organizationInfo = null;
+        }
+        /**
+         * Config 모듈 초기화 (동기)
+         */
+        init(config) {
+            // 설정만 저장 (서버 검증 없음)
+            this._config = {
+                timeout: 30000,
+                debug: false,
+                modules: ['ads', 'events', 'config'],
+                ...config
+            };
+            // 사용자가 baseUrl을 제공한 경우 endpoints에 설정
+            if (config.baseUrl) {
+                endpoints.setBaseUrl(config.baseUrl);
+            }
+            this._isReady = true;
+            if (config.debug) {
+                console.log('✅ Config module initialized (sync mode)', {
+                    modules: this._config.modules,
+                    endpoint: endpoints.getBaseUrl(),
+                    mode: 'development'
+                });
+            }
+        }
+        /**
+         * 모듈 준비 상태 확인
+         */
+        isReady() {
+            return this._isReady;
+        }
+        /**
+         * 현재 설정 반환
+         */
+        getConfig() {
+            return this._config;
+        }
+        /**
+         * 조직 정보 반환
+         */
+        getOrganizationInfo() {
+            return this._organizationInfo;
+        }
+        /**
+         * API 엔드포인트 반환
+         */
+        getApiEndpoint() {
+            return endpoints.getBaseUrl();
+        }
+        /**
+         * 디버그 모드 여부 확인
+         */
+        isDebugMode() {
+            return this._config?.debug || false;
+        }
+        /**
+         * 활성화된 모듈 목록 반환
+         */
+        getEnabledModules() {
+            return this._config?.modules || [];
+        }
+        /**
+         * 특정 모듈이 활성화되어 있는지 확인
+         */
+        isModuleEnabled(moduleName) {
+            return this.getEnabledModules().includes(moduleName);
+        }
+        /**
+         * 설정 업데이트 (런타임)
+         */
+        updateConfig(updates) {
+            if (!this._config) {
+                throw new Error('Config module not initialized');
+            }
+            this._config = {
+                ...this._config,
+                ...updates
+            };
+            if (this.isDebugMode()) {
+                console.log('🔄 Config updated', updates);
+            }
+        }
+        /**
+         * API 헤더 생성 (공통 유틸리티 사용)
+         */
+        getApiHeaders() {
+            if (!this._config?.apiKey) {
+                throw new Error('API key not available');
+            }
+            return ApiHeaders.create(this._config.apiKey);
+        }
+    }
+
+    /**
+     * AdStage SDK - 이벤트용 디바이스 정보 수집기
+     * Events API 스키마에 최적화된 디바이스 정보 수집
+     * DeviceInfoCollector를 재사용하여 중복 제거
+     */
+    class EventDeviceCollector {
+        /**
+         * Events API용 디바이스 정보 반환
+         * TrackEventDto.DeviceInfoInput 형태에 맞춤
+         */
+        static getDeviceInfo() {
+            if (!DOMUtils.isBrowser()) {
+                return {
+                    category: 'other',
+                    platform: 'SSR',
+                    model: 'SSR',
+                    appVersion: ConfigUtils.getAppVersion(), // AdStage.init()에서 설정 또는 기본값 '1.0.0'
+                    osVersion: 'SSR'
+                };
+            }
+            const userAgent = navigator.userAgent.toLowerCase();
+            let category = 'desktop';
+            // 디바이스 카테고리 판별 (DeviceInfoCollector 재사용)
+            if (/tablet|ipad/.test(userAgent)) {
+                category = 'tablet';
+            }
+            else if (DeviceInfoCollector.isMobile()) {
+                category = 'mobile';
+            }
+            // 플랫폼 정보 매핑 (Events API용)
+            const platformType = DeviceInfoCollector.getPlatform();
+            const platformString = EventDeviceCollector.mapPlatformForEvents(platformType);
+            return {
+                category,
+                platform: platformString,
+                model: navigator.platform,
+                appVersion: ConfigUtils.getAppVersion(), // AdStage.init()에서 설정 또는 기본값 '1.0.0'
+                osVersion: navigator.platform
+            };
+        }
+        /**
+         * 플랫폼 타입을 Events API용 문자열로 매핑
+         */
+        static mapPlatformForEvents(platformType) {
+            switch (platformType) {
+                case 'ios': return 'ios';
+                case 'android': return 'android';
+                case 'web': return 'mobile-web';
+                case 'desktop': return 'desktop-web';
+                default: return 'unknown';
+            }
+        }
+        /**
+         * 디바이스 상세 정보 (디버깅용)
+         */
+        static getDetailedInfo() {
+            if (!DOMUtils.isBrowser()) {
+                return {
+                    userAgent: 'SSR',
+                    language: 'ko-KR',
+                    platform: 'SSR',
+                    cookieEnabled: false,
+                    onLine: true,
+                    screenResolution: '0x0',
+                    viewportSize: '0x0'
+                };
+            }
+            const viewportInfo = DOMUtils.getViewportInfo();
+            return {
+                userAgent: navigator.userAgent,
+                language: navigator.language || 'ko-KR',
+                platform: navigator.platform,
+                cookieEnabled: navigator.cookieEnabled,
+                onLine: navigator.onLine,
+                screenResolution: `${screen.width}x${screen.height}`,
+                viewportSize: `${viewportInfo.width}x${viewportInfo.height}`
+            };
+        }
+    }
+
+    /**
+     * AdStage SDK - 이벤트용 사용자 정보 수집기
+     * Events API 스키마에 최적화된 사용자 정보 수집
+     */
+    class EventUserCollector {
+        /**
+         * Events API용 사용자 정보 반환
+         * TrackEventDto.UserAttributesInput 형태에 맞춤
+         */
+        static getUserInfo() {
+            const baseInfo = EventUserCollector.getBaseUserInfo();
+            // 설정된 사용자 속성과 병합
+            return {
+                ...baseInfo,
+                ...EventUserCollector._userProperties
+            };
+        }
+        /**
+         * 기본 사용자 정보 수집 (브라우저 기반)
+         */
+        static getBaseUserInfo() {
+            if (!DOMUtils.isBrowser()) {
+                return {
+                    language: 'ko-KR',
+                    country: 'KR'
+                };
+            }
+            // 브라우저 언어 설정에서 국가 추출
+            const language = navigator.language || 'ko-KR';
+            const country = EventUserCollector.extractCountryFromLanguage(language);
+            return {
+                language,
+                country
+            };
+        }
+        /**
+         * 언어 코드에서 국가 추출
+         */
+        static extractCountryFromLanguage(language) {
+            const countryMap = {
+                'ko': 'KR',
+                'ko-KR': 'KR',
+                'en': 'US',
+                'en-US': 'US',
+                'en-GB': 'GB',
+                'ja': 'JP',
+                'ja-JP': 'JP',
+                'zh': 'CN',
+                'zh-CN': 'CN',
+                'zh-TW': 'TW',
+                'de': 'DE',
+                'de-DE': 'DE',
+                'fr': 'FR',
+                'fr-FR': 'FR'
+            };
+            // 정확한 매칭 시도
+            if (countryMap[language]) {
+                return countryMap[language];
+            }
+            // 언어 코드만 추출해서 매칭
+            const langCode = language.split('-')[0];
+            return countryMap[langCode] || 'KR';
+        }
+        /**
+         * 사용자 속성 설정
+         */
+        static setUserProperties(properties) {
+            EventUserCollector._userProperties = {
+                ...EventUserCollector._userProperties,
+                ...properties
+            };
+        }
+        /**
+         * 특정 사용자 속성 설정
+         */
+        static setUserProperty(key, value) {
+            EventUserCollector._userProperties[key] = value;
+        }
+        /**
+         * 사용자 속성 초기화
+         */
+        static clearUserProperties() {
+            EventUserCollector._userProperties = {};
+        }
+        /**
+         * 현재 설정된 사용자 속성 반환
+         */
+        static getCurrentUserProperties() {
+            return { ...EventUserCollector._userProperties };
+        }
+        /**
+         * 사용자 지역 정보 추정 (타임존 기반)
+         */
+        static estimateLocation() {
+            if (!DOMUtils.isBrowser()) {
+                return {
+                    timezone: 'UTC',
+                    estimatedCountry: 'KR'
+                };
+            }
+            const timezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
+            // 타임존 기반 국가 추정
+            const timezoneCountryMap = {
+                'Asia/Seoul': 'KR',
+                'Asia/Tokyo': 'JP',
+                'Asia/Shanghai': 'CN',
+                'Asia/Hong_Kong': 'HK',
+                'Asia/Taipei': 'TW',
+                'America/New_York': 'US',
+                'America/Los_Angeles': 'US',
+                'Europe/London': 'GB',
+                'Europe/Berlin': 'DE',
+                'Europe/Paris': 'FR'
+            };
+            return {
+                timezone,
+                estimatedCountry: timezoneCountryMap[timezone] || 'KR'
+            };
+        }
+    }
+    EventUserCollector._userProperties = {};
+
+    /**
+     * AdStage SDK - 이벤트용 세션 관리자
+     * 세션 ID 생성 및 사용자 ID 관리
+     */
+    class EventSessionManager {
+        /**
+         * 세션 ID 생성 및 반환 (SSR 안전)
+         */
+        static getSessionId() {
+            if (!DOMUtils.isBrowser()) {
+                return 'ssr_session_' + Date.now();
+            }
+            const stored = sessionStorage.getItem('adstage_session_id');
+            if (stored) {
+                return stored;
+            }
+            const sessionId = 'session_' + Math.random().toString(36).substr(2, 9) + '_' + Date.now();
+            sessionStorage.setItem('adstage_session_id', sessionId);
+            // 세션 시작 시간 기록
+            if (!EventSessionManager._sessionStartTime) {
+                EventSessionManager._sessionStartTime = Date.now();
+                if (DOMUtils.isBrowser()) {
+                    sessionStorage.setItem('adstage_session_start', String(EventSessionManager._sessionStartTime));
+                }
+            }
+            return sessionId;
+        }
+        /**
+         * 사용자 ID 설정
+         */
+        static setUserId(userId) {
+            EventSessionManager._userId = userId;
+            if (DOMUtils.isBrowser()) {
+                localStorage.setItem('adstage_user_id', userId);
+            }
+        }
+        /**
+         * 현재 사용자 ID 반환
+         */
+        static getUserId() {
+            // 메모리에 있는 값 우선 반환
+            if (EventSessionManager._userId) {
+                return EventSessionManager._userId;
+            }
+            // 로컬 스토리지에서 복원
+            if (DOMUtils.isBrowser()) {
+                const stored = localStorage.getItem('adstage_user_id');
+                if (stored) {
+                    EventSessionManager._userId = stored;
+                    return stored;
+                }
+            }
+            return undefined;
+        }
+        /**
+         * 사용자 ID 제거
+         */
+        static clearUserId() {
+            EventSessionManager._userId = undefined;
+            if (DOMUtils.isBrowser()) {
+                localStorage.removeItem('adstage_user_id');
+            }
+        }
+        /**
+         * 세션 정보 전체 반환
+         */
+        static getSessionInfo() {
+            const sessionId = EventSessionManager.getSessionId();
+            const userId = EventSessionManager.getUserId();
+            const isNewSession = EventSessionManager.isNewSession();
+            const sessionDuration = EventSessionManager.getSessionDuration();
+            return {
+                sessionId,
+                userId,
+                sessionDuration,
+                isNewSession
+            };
+        }
+        /**
+         * 새 세션인지 확인
+         */
+        static isNewSession() {
+            if (!DOMUtils.isBrowser())
+                return true;
+            const sessionId = sessionStorage.getItem('adstage_session_id');
+            const sessionStart = sessionStorage.getItem('adstage_session_start');
+            return !sessionId || !sessionStart;
+        }
+        /**
+         * 세션 지속 시간 반환 (ms)
+         */
+        static getSessionDuration() {
+            if (!DOMUtils.isBrowser())
+                return 0;
+            const sessionStart = sessionStorage.getItem('adstage_session_start');
+            if (!sessionStart)
+                return 0;
+            return Date.now() - parseInt(sessionStart, 10);
+        }
+        /**
+         * 세션 새로고침 (새로운 세션 ID 생성)
+         */
+        static refreshSession() {
+            if (DOMUtils.isBrowser()) {
+                sessionStorage.removeItem('adstage_session_id');
+                sessionStorage.removeItem('adstage_session_start');
+            }
+            EventSessionManager._sessionStartTime = undefined;
+            return EventSessionManager.getSessionId();
+        }
+        /**
+         * 세션 만료 확인 (24시간 기준)
+         */
+        static isSessionExpired(maxDurationHours = 24) {
+            const duration = EventSessionManager.getSessionDuration();
+            const maxDuration = maxDurationHours * 60 * 60 * 1000; // ms 변환
+            return duration > maxDuration;
+        }
+        /**
+         * 세션 통계 반환 (디버깅용)
+         */
+        static getSessionStats() {
+            const sessionId = EventSessionManager.getSessionId();
+            const userId = EventSessionManager.getUserId();
+            const duration = EventSessionManager.getSessionDuration();
+            const isExpired = EventSessionManager.isSessionExpired();
+            const isNewSession = EventSessionManager.isNewSession();
+            let startTime;
+            if (DOMUtils.isBrowser()) {
+                const stored = sessionStorage.getItem('adstage_session_start');
+                startTime = stored ? parseInt(stored, 10) : undefined;
+            }
+            return {
+                sessionId,
+                userId,
+                startTime,
+                duration,
+                isExpired,
+                isNewSession
+            };
+        }
+    }
+
+    /**
+     * AdStage SDK - Events 모듈
+     * 이벤트 추적 시스템
+     */
+    class EventsModule {
+        constructor() {
+            this._isReady = false;
+            this._config = null;
+        }
+        /**
+         * Events 모듈 초기화 (동기)
+         */
+        init(config) {
+            this._config = config;
+            this._isReady = true;
+            if (config.debug) {
+                console.log('📊 Events module initialized');
+            }
+        }
+        /**
+         * 모듈 준비 상태 확인
+         */
+        isReady() {
+            return this._isReady;
+        }
+        /**
+         * 모듈 설정 반환
+         */
+        getConfig() {
+            return this._config;
+        }
+        /**
+         * 사용자 ID 설정
+         */
+        setUserId(userId) {
+            EventSessionManager.setUserId(userId);
+            if (this._config?.debug) {
+                console.log('👤 User ID set:', userId);
+            }
+        }
+        /**
+         * 현재 사용자 ID 반환
+         */
+        getUserId() {
+            return EventSessionManager.getUserId();
+        }
+        /**
+         * 사용자 속성 설정
+         */
+        setUserProperties(properties) {
+            EventUserCollector.setUserProperties(properties);
+            if (this._config?.debug) {
+                console.log('👤 User properties set:', properties);
+            }
+        }
+        /**
+         * 현재 사용자 속성 반환
+         */
+        getUserProperties() {
+            return EventUserCollector.getCurrentUserProperties();
+        }
+        /**
+         * 이벤트 추적
+         * @param eventName 이벤트 이름
+         * @param properties 이벤트 속성
+         */
+        async track(eventName, properties) {
+            if (!this._isReady) {
+                console.warn('Events module not initialized. Call AdStage.init() first.');
+                return;
+            }
+            if (!this._config?.apiKey) {
+                console.warn('API key not configured for event tracking.');
+                return;
+            }
+            try {
+                const eventData = {
+                    eventName,
+                    userId: EventSessionManager.getUserId(),
+                    sessionId: EventSessionManager.getSessionId(),
+                    device: EventDeviceCollector.getDeviceInfo(),
+                    user: EventUserCollector.getUserInfo(),
+                    params: properties || {}
+                };
+                await this.sendEventToServer(eventData);
+                if (this._config.debug) {
+                    console.log('✅ Event tracked:', eventName, properties);
+                }
+            }
+            catch (error) {
+                console.error('❌ Failed to track event:', error);
+                if (this._config.debug) {
+                    console.error('Event data:', { eventName, properties });
+                }
+            }
+        }
+        /**
+         * 페이지 뷰 이벤트 (track의 편의 메소드)
+         */
+        async pageView(pageData) {
+            const properties = {};
+            if (pageData?.page)
+                properties.page = pageData.page;
+            if (pageData?.title)
+                properties.title = pageData.title;
+            if (pageData?.category)
+                properties.category = pageData.category;
+            // pageData의 다른 속성들도 포함
+            if (pageData) {
+                Object.keys(pageData).forEach(key => {
+                    if (key !== 'page' && key !== 'title' && key !== 'category') {
+                        properties[key] = pageData[key];
+                    }
+                });
+            }
+            // 현재 페이지 정보 자동 수집
+            if (typeof window !== 'undefined') {
+                if (!properties.page)
+                    properties.page = window.location.pathname;
+                if (!properties.title)
+                    properties.title = document.title;
+                properties.url = window.location.href;
+                properties.referrer = document.referrer;
+            }
+            await this.track('page_view', properties);
+        }
+        /**
+         * 서버에 이벤트 전송
+         */
+        async sendEventToServer(eventData) {
+            const response = await fetch(endpoints.events.track(), {
+                method: 'POST',
+                headers: {
+                    ...ApiHeaders.create(this._config.apiKey),
+                    'Content-Type': 'application/json'
+                },
+                body: JSON.stringify(eventData)
+            });
+            if (!response.ok) {
+                throw new Error(`Event tracking failed: ${response.status} ${response.statusText}`);
+            }
+        }
+    }
+
+    /**
+     * AdStage SDK - 메인 네임스페이스 클래스
+     * v2.0.0 - 확장 가능한 모듈 아키텍처
+     */
+    class AdStage {
+        constructor() {
+            this._isInitialized = false;
+            this._config = null;
+            // 모듈 초기화 (ads, config는 완전 구현, events는 기본 구조)
+            this.config = new ConfigModule();
+            this.ads = new AdsModule();
+            this.events = new EventsModule();
+        }
+        /**
+         * AdStage SDK 초기화 (동기)
+         */
+        static init(config) {
+            if (!AdStage.instance) {
+                AdStage.instance = new AdStage();
+            }
+            const instance = AdStage.instance;
+            // 설정 검증
+            if (!config.apiKey) {
+                throw new Error('API key is required for AdStage initialization');
+            }
+            // 설정 저장 (서버 검증 없음)
+            instance._config = {
+                timeout: 30000,
+                debug: false,
+                modules: ['ads', 'events', 'config'],
+                ...config
+            };
+            // 🔧 baseUrl이 설정된 경우 전역 endpoints 객체 업데이트
+            if (instance._config.baseUrl) {
+                endpoints.setBaseUrl(instance._config.baseUrl);
+                if (config.debug) {
+                    console.log('🌐 API endpoint configured:', instance._config.baseUrl);
+                }
+            }
+            // 모듈 동기 초기화
+            const enabledModules = instance._config.modules || ['ads', 'events', 'config'];
+            for (const moduleName of enabledModules) {
+                const module = instance[moduleName];
+                if (module && typeof module.init === 'function') {
+                    module.init(instance._config);
+                }
+            }
+            instance._isInitialized = true;
+            if (config.debug) {
+                console.log('🚀 AdStage SDK initialized (sync mode)', {
+                    version: '2.0.0',
+                    modules: enabledModules,
+                    apiKey: config.apiKey.substring(0, 8) + '...',
+                    mode: 'development'
+                });
+            }
+        }
+        /**
+         * SDK 초기화 상태 확인
+         */
+        static isReady() {
+            return AdStage.instance?._isInitialized || false;
+        }
+        /**
+         * 현재 설정 반환
+         */
+        static getConfig() {
+            return AdStage.instance?._config || null;
+        }
+        /**
+         * SDK 인스턴스 반환 (공개 메소드로 변경)
+         */
+        static getInstance() {
+            if (!AdStage.instance) {
+                throw new Error('AdStage not initialized. Call AdStage.init() first.');
+            }
+            return AdStage.instance;
+        }
+        /**
+         * 편의성을 위한 정적 모듈 접근자들
+         */
+        static get ads() {
+            return AdStage.getInstance().ads;
+        }
+        static get events() {
+            return AdStage.getInstance().events;
+        }
+        static get config() {
+            return AdStage.getInstance().config;
+        }
+        /**
+         * SDK 리셋 (테스트용)
+         */
+        static reset() {
+            if (AdStage.instance) {
+                AdStage.instance._isInitialized = false;
+                AdStage.instance._config = null;
+            }
+        }
+    }
+    /**
+     * 디버그용 메서드들
+     */
+    AdStage.debug = {
+        /**
+         * 모든 viewable 추적 데이터 초기화
+         */
+        clearAllViewable: () => {
+            ViewableEventTracker.clear();
+            console.log('✅ AdStage Debug: 모든 viewable 추적 데이터 초기화됨');
+        },
+        /**
+         * 특정 광고의 viewable 추적 초기화
+         */
+        clearAdViewable: (adId, slotId) => {
+            ViewableEventTracker.clearAdViewable(adId, slotId);
+            console.log(`✅ AdStage Debug: 광고 ${adId}(${slotId})의 viewable 추적 초기화됨`);
+        },
+        /**
+         * 현재 추적 중인 viewable 상태 확인
+         */
+        getViewableStatus: () => {
+            console.log('📊 AdStage Debug: 현재 viewable 추적 상태', {
+                trackedCount: ViewableEventTracker.viewableTracker.size,
+                trackedItems: Array.from(ViewableEventTracker.viewableTracker)
+            });
+        }
+    };
+
+    /**
+     * AdStage SDK - 전역 이벤트 함수들
+     * Firebase Analytics와 유사한 간단한 API 제공
+     */
+    /**
+     * 이벤트 추적 (메인 함수)
+     * @param eventName 이벤트 이름
+     * @param properties 이벤트 속성
+     *
+     * @example
+     * track('purchase', {
+     *   transaction_id: 'T123',
+     *   value: 99.99,
+     *   currency: 'USD'
+     * });
+     */
+    function track(eventName, properties) {
+        if (!AdStage.isReady()) {
+            console.warn('AdStage not initialized. Call AdStage.init() first.');
+            return Promise.resolve();
+        }
+        return AdStage.events.track(eventName, properties);
+    }
+    /**
+     * 페이지 뷰 추적
+     * @param pageData 페이지 정보
+     *
+     * @example
+     * pageView({ page: '/products', title: 'Products Page' });
+     */
+    function pageView(pageData) {
+        if (!AdStage.isReady()) {
+            console.warn('AdStage not initialized. Call AdStage.init() first.');
+            return Promise.resolve();
+        }
+        return AdStage.events.pageView(pageData);
+    }
+    /**
+     * 사용자 ID 설정
+     * @param userId 사용자 ID
+     *
+     * @example
+     * setUserId('user123');
+     */
+    function setUserId(userId) {
+        if (!AdStage.isReady()) {
+            console.warn('AdStage not initialized. Call AdStage.init() first.');
+            return;
+        }
+        AdStage.events.setUserId(userId);
+    }
+    /**
+     * 현재 사용자 ID 반환
+     */
+    function getUserId() {
+        if (!AdStage.isReady()) {
+            console.warn('AdStage not initialized. Call AdStage.init() first.');
+            return undefined;
+        }
+        return AdStage.events.getUserId();
+    }
+
+    var jsxRuntime = {exports: {}};
+
+    var reactJsxRuntime_production_min = {};
+
+    var react = {exports: {}};
+
+    var react_production_min = {};
+
+    /**
+     * @license React
+     * react.production.min.js
+     *
+     * Copyright (c) Facebook, Inc. and its affiliates.
+     *
+     * This source code is licensed under the MIT license found in the
+     * LICENSE file in the root directory of this source tree.
+     */
+
+    var hasRequiredReact_production_min;
+
+    function requireReact_production_min () {
+    	if (hasRequiredReact_production_min) return react_production_min;
+    	hasRequiredReact_production_min = 1;
+    var l=Symbol.for("react.element"),n=Symbol.for("react.portal"),p=Symbol.for("react.fragment"),q=Symbol.for("react.strict_mode"),r=Symbol.for("react.profiler"),t=Symbol.for("react.provider"),u=Symbol.for("react.context"),v=Symbol.for("react.forward_ref"),w=Symbol.for("react.suspense"),x=Symbol.for("react.memo"),y=Symbol.for("react.lazy"),z=Symbol.iterator;function A(a){if(null===a||"object"!==typeof a)return null;a=z&&a[z]||a["@@iterator"];return "function"===typeof a?a:null}
+    	var B={isMounted:function(){return !1},enqueueForceUpdate:function(){},enqueueReplaceState:function(){},enqueueSetState:function(){}},C=Object.assign,D={};function E(a,b,e){this.props=a;this.context=b;this.refs=D;this.updater=e||B;}E.prototype.isReactComponent={};
+    	E.prototype.setState=function(a,b){if("object"!==typeof a&&"function"!==typeof a&&null!=a)throw Error("setState(...): takes an object of state variables to update or a function which returns an object of state variables.");this.updater.enqueueSetState(this,a,b,"setState");};E.prototype.forceUpdate=function(a){this.updater.enqueueForceUpdate(this,a,"forceUpdate");};function F(){}F.prototype=E.prototype;function G(a,b,e){this.props=a;this.context=b;this.refs=D;this.updater=e||B;}var H=G.prototype=new F;
+    	H.constructor=G;C(H,E.prototype);H.isPureReactComponent=!0;var I=Array.isArray,J=Object.prototype.hasOwnProperty,K={current:null},L={key:!0,ref:!0,__self:!0,__source:!0};
+    	function M(a,b,e){var d,c={},k=null,h=null;if(null!=b)for(d in void 0!==b.ref&&(h=b.ref),void 0!==b.key&&(k=""+b.key),b)J.call(b,d)&&!L.hasOwnProperty(d)&&(c[d]=b[d]);var g=arguments.length-2;if(1===g)c.children=e;else if(1<g){for(var f=Array(g),m=0;m<g;m++)f[m]=arguments[m+2];c.children=f;}if(a&&a.defaultProps)for(d in g=a.defaultProps,g)void 0===c[d]&&(c[d]=g[d]);return {$$typeof:l,type:a,key:k,ref:h,props:c,_owner:K.current}}
+    	function N(a,b){return {$$typeof:l,type:a.type,key:b,ref:a.ref,props:a.props,_owner:a._owner}}function O(a){return "object"===typeof a&&null!==a&&a.$$typeof===l}function escape(a){var b={"=":"=0",":":"=2"};return "$"+a.replace(/[=:]/g,function(a){return b[a]})}var P=/\/+/g;function Q(a,b){return "object"===typeof a&&null!==a&&null!=a.key?escape(""+a.key):b.toString(36)}
+    	function R(a,b,e,d,c){var k=typeof a;if("undefined"===k||"boolean"===k)a=null;var h=!1;if(null===a)h=!0;else switch(k){case "string":case "number":h=!0;break;case "object":switch(a.$$typeof){case l:case n:h=!0;}}if(h)return h=a,c=c(h),a=""===d?"."+Q(h,0):d,I(c)?(e="",null!=a&&(e=a.replace(P,"$&/")+"/"),R(c,b,e,"",function(a){return a})):null!=c&&(O(c)&&(c=N(c,e+(!c.key||h&&h.key===c.key?"":(""+c.key).replace(P,"$&/")+"/")+a)),b.push(c)),1;h=0;d=""===d?".":d+":";if(I(a))for(var g=0;g<a.length;g++){k=
+    	a[g];var f=d+Q(k,g);h+=R(k,b,e,f,c);}else if(f=A(a),"function"===typeof f)for(a=f.call(a),g=0;!(k=a.next()).done;)k=k.value,f=d+Q(k,g++),h+=R(k,b,e,f,c);else if("object"===k)throw b=String(a),Error("Objects are not valid as a React child (found: "+("[object Object]"===b?"object with keys {"+Object.keys(a).join(", ")+"}":b)+"). If you meant to render a collection of children, use an array instead.");return h}
+    	function S(a,b,e){if(null==a)return a;var d=[],c=0;R(a,d,"","",function(a){return b.call(e,a,c++)});return d}function T(a){if(-1===a._status){var b=a._result;b=b();b.then(function(b){if(0===a._status||-1===a._status)a._status=1,a._result=b;},function(b){if(0===a._status||-1===a._status)a._status=2,a._result=b;});-1===a._status&&(a._status=0,a._result=b);}if(1===a._status)return a._result.default;throw a._result;}
+    	var U={current:null},V={transition:null},W={ReactCurrentDispatcher:U,ReactCurrentBatchConfig:V,ReactCurrentOwner:K};function X(){throw Error("act(...) is not supported in production builds of React.");}
+    	react_production_min.Children={map:S,forEach:function(a,b,e){S(a,function(){b.apply(this,arguments);},e);},count:function(a){var b=0;S(a,function(){b++;});return b},toArray:function(a){return S(a,function(a){return a})||[]},only:function(a){if(!O(a))throw Error("React.Children.only expected to receive a single React element child.");return a}};react_production_min.Component=E;react_production_min.Fragment=p;react_production_min.Profiler=r;react_production_min.PureComponent=G;react_production_min.StrictMode=q;react_production_min.Suspense=w;
+    	react_production_min.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED=W;react_production_min.act=X;
+    	react_production_min.cloneElement=function(a,b,e){if(null===a||void 0===a)throw Error("React.cloneElement(...): The argument must be a React element, but you passed "+a+".");var d=C({},a.props),c=a.key,k=a.ref,h=a._owner;if(null!=b){void 0!==b.ref&&(k=b.ref,h=K.current);void 0!==b.key&&(c=""+b.key);if(a.type&&a.type.defaultProps)var g=a.type.defaultProps;for(f in b)J.call(b,f)&&!L.hasOwnProperty(f)&&(d[f]=void 0===b[f]&&void 0!==g?g[f]:b[f]);}var f=arguments.length-2;if(1===f)d.children=e;else if(1<f){g=Array(f);
+    	for(var m=0;m<f;m++)g[m]=arguments[m+2];d.children=g;}return {$$typeof:l,type:a.type,key:c,ref:k,props:d,_owner:h}};react_production_min.createContext=function(a){a={$$typeof:u,_currentValue:a,_currentValue2:a,_threadCount:0,Provider:null,Consumer:null,_defaultValue:null,_globalName:null};a.Provider={$$typeof:t,_context:a};return a.Consumer=a};react_production_min.createElement=M;react_production_min.createFactory=function(a){var b=M.bind(null,a);b.type=a;return b};react_production_min.createRef=function(){return {current:null}};
+    	react_production_min.forwardRef=function(a){return {$$typeof:v,render:a}};react_production_min.isValidElement=O;react_production_min.lazy=function(a){return {$$typeof:y,_payload:{_status:-1,_result:a},_init:T}};react_production_min.memo=function(a,b){return {$$typeof:x,type:a,compare:void 0===b?null:b}};react_production_min.startTransition=function(a){var b=V.transition;V.transition={};try{a();}finally{V.transition=b;}};react_production_min.unstable_act=X;react_production_min.useCallback=function(a,b){return U.current.useCallback(a,b)};react_production_min.useContext=function(a){return U.current.useContext(a)};
+    	react_production_min.useDebugValue=function(){};react_production_min.useDeferredValue=function(a){return U.current.useDeferredValue(a)};react_production_min.useEffect=function(a,b){return U.current.useEffect(a,b)};react_production_min.useId=function(){return U.current.useId()};react_production_min.useImperativeHandle=function(a,b,e){return U.current.useImperativeHandle(a,b,e)};react_production_min.useInsertionEffect=function(a,b){return U.current.useInsertionEffect(a,b)};react_production_min.useLayoutEffect=function(a,b){return U.current.useLayoutEffect(a,b)};
+    	react_production_min.useMemo=function(a,b){return U.current.useMemo(a,b)};react_production_min.useReducer=function(a,b,e){return U.current.useReducer(a,b,e)};react_production_min.useRef=function(a){return U.current.useRef(a)};react_production_min.useState=function(a){return U.current.useState(a)};react_production_min.useSyncExternalStore=function(a,b,e){return U.current.useSyncExternalStore(a,b,e)};react_production_min.useTransition=function(){return U.current.useTransition()};react_production_min.version="18.3.1";
+    	return react_production_min;
+    }
+
+    {
+      react.exports = requireReact_production_min();
+    }
+
+    var reactExports = react.exports;
+
+    /**
+     * @license React
+     * react-jsx-runtime.production.min.js
+     *
+     * Copyright (c) Facebook, Inc. and its affiliates.
+     *
+     * This source code is licensed under the MIT license found in the
+     * LICENSE file in the root directory of this source tree.
+     */
+
+    var hasRequiredReactJsxRuntime_production_min;
+
+    function requireReactJsxRuntime_production_min () {
+    	if (hasRequiredReactJsxRuntime_production_min) return reactJsxRuntime_production_min;
+    	hasRequiredReactJsxRuntime_production_min = 1;
+    var f=reactExports,k=Symbol.for("react.element"),l=Symbol.for("react.fragment"),m=Object.prototype.hasOwnProperty,n=f.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner,p={key:!0,ref:!0,__self:!0,__source:!0};
+    	function q(c,a,g){var b,d={},e=null,h=null;void 0!==g&&(e=""+g);void 0!==a.key&&(e=""+a.key);void 0!==a.ref&&(h=a.ref);for(b in a)m.call(a,b)&&!p.hasOwnProperty(b)&&(d[b]=a[b]);if(c&&c.defaultProps)for(b in a=c.defaultProps,a)void 0===d[b]&&(d[b]=a[b]);return {$$typeof:k,type:c,key:e,ref:h,props:d,_owner:n.current}}reactJsxRuntime_production_min.Fragment=l;reactJsxRuntime_production_min.jsx=q;reactJsxRuntime_production_min.jsxs=q;
+    	return reactJsxRuntime_production_min;
+    }
+
+    {
+      jsxRuntime.exports = requireReactJsxRuntime_production_min();
+    }
+
+    var jsxRuntimeExports = jsxRuntime.exports;
+
+    const AdStageContext = reactExports.createContext(null);
+    function AdStageProvider({ children, config }) {
+        const [isInitialized, setIsInitialized] = reactExports.useState(false);
+        const [currentConfig, setCurrentConfig] = reactExports.useState(null);
+        const [error, setError] = reactExports.useState(null);
+        const initialize = (newConfig) => {
+            try {
+                setError(null);
+                // 기존 인스턴스가 있으면 리셋
+                if (isInitialized) {
+                    AdStage.reset();
+                }
+                AdStage.init(newConfig);
+                setCurrentConfig(newConfig);
+                setIsInitialized(true);
+                if (newConfig.debug) {
+                    console.log('✅ AdStage SDK initialized successfully via React Provider');
+                }
+            }
+            catch (err) {
+                const errorMessage = err instanceof Error ? err.message : 'Unknown error';
+                setError(errorMessage);
+                console.error('❌ AdStage SDK initialization failed:', err);
+                setIsInitialized(false);
+                setCurrentConfig(null);
+            }
+        };
+        const reset = () => {
+            try {
+                AdStage.reset();
+                setIsInitialized(false);
+                setCurrentConfig(null);
+                setError(null);
+            }
+            catch (err) {
+                console.error('❌ AdStage SDK reset failed:', err);
+            }
+        };
+        // 자동 초기화
+        reactExports.useEffect(() => {
+            if (config && !isInitialized) {
+                initialize(config);
+            }
+        }, [config, isInitialized]);
+        const contextValue = {
+            isInitialized,
+            config: currentConfig,
+            initialize,
+            reset,
+            error
+        };
+        return (jsxRuntimeExports.jsx(AdStageContext.Provider, { value: contextValue, children: children }));
+    }
+    /**
+     * AdStage Context Hook
+     * AdStageProvider 내에서 SDK 상태에 접근할 수 있습니다.
+     */
+    function useAdStageContext() {
+        const context = reactExports.useContext(AdStageContext);
+        if (!context) {
+            throw new Error('useAdStageContext must be used within an AdStageProvider');
+        }
+        return context;
+    }
+    /**
+     * AdStage Instance Hook
+     * 초기화된 AdStage 인스턴스에 직접 접근할 수 있습니다.
+     */
+    function useAdStageInstance() {
+        const { isInitialized } = useAdStageContext();
+        if (!isInitialized) {
+            console.warn('AdStage SDK is not initialized. Please call initialize() first or provide config to AdStageProvider.');
+            return null;
+        }
+        return AdStage;
+    }
+
+    /**
+     * AdStage Web SDK
+     * 네임스페이스 아키텍처 기반 SDK
+     */
+    // 메인 네임스페이스 클래스
+    // 버전 정보
+    const SDK_VERSION = '2.0.0';
+    const SUPPORTED_MODULES = ['ads', 'events', 'config'];
+    // 브라우저 환경에서 전역 객체로 노출 (디버깅용)
+    if (typeof window !== 'undefined') {
+        window.AdStage = AdStage;
+    }
+
+    exports.AdStage = AdStage;
+    exports.AdStageProvider = AdStageProvider;
+    exports.SDK_VERSION = SDK_VERSION;
+    exports.SUPPORTED_MODULES = SUPPORTED_MODULES;
+    exports.getUserId = getUserId;
+    exports.pageView = pageView;
+    exports.setUserId = setUserId;
+    exports.track = track;
+    exports.useAdStageContext = useAdStageContext;
+    exports.useAdStageInstance = useAdStageInstance;
+
+}));