@adstage/web-sdk 2.3.7 → 2.4.1

package/dist/index.esm.js

@@ -1,6 +1,3 @@
-import { jsx } from 'react/jsx-runtime';
-import { createContext, useState, useEffect, useContext } from 'react';
-
 // 광고 타입 정의
 var AdType;
 (function (AdType) {
@@ -31,6 +28,86 @@ var DeviceType;
     DeviceType["TABLET"] = "TABLET";
 })(DeviceType || (DeviceType = {}));
 
+/**
+ * VIEWABLE 이벤트 추적 및 중복 방지 관리 클래스
+ * - 메모리 기반 중복 확인
+ * - 세션 스토리지 기반 영구 추적
+ * - 자동 정리 기능
+ * - ViewabilityTracker와 함께 사용하여 중복 viewable 이벤트 방지
+ */
+class ViewableEventTracker {
+    /**
+     * 중복 viewable 이벤트 여부 확인
+     */
+    static isDuplicateViewable(adId, slotId, debug = false) {
+        const key = `${adId}_${slotId}`;
+        const now = Date.now();
+        // 메모리 기반 중복 확인 (새로고침 시 초기화됨)
+        const lastViewable = ViewableEventTracker.viewableTracker.get(key);
+        if (lastViewable && (now - lastViewable) < ViewableEventTracker.VIEWABLE_COOLDOWN) {
+            if (debug) {
+                console.log(`Duplicate viewable blocked for ad ${adId} in slot ${slotId}. Cooldown: ${Math.round((ViewableEventTracker.VIEWABLE_COOLDOWN - (now - lastViewable)) / 1000)}s remaining`);
+            }
+            return true;
+        }
+        // 세션 스토리지 기반 중복 확인 (새로고침 시에도 유지)
+        const sessionKey = `adstage_viewable_${key}`;
+        const sessionViewable = sessionStorage.getItem(sessionKey);
+        if (sessionViewable) {
+            const sessionTime = parseInt(sessionViewable, 10);
+            if (!isNaN(sessionTime) && (now - sessionTime) < ViewableEventTracker.VIEWABLE_COOLDOWN) {
+                if (debug) {
+                    console.log(`Session-based duplicate viewable blocked for ad ${adId} in slot ${slotId}. Cooldown: ${Math.round((ViewableEventTracker.VIEWABLE_COOLDOWN - (now - sessionTime)) / 1000)}s remaining`);
+                }
+                // 메모리에도 기록하여 이후 요청 최적화
+                ViewableEventTracker.viewableTracker.set(key, sessionTime);
+                return true;
+            }
+        }
+        // viewable 이벤트 시점 기록 (메모리 + 세션 스토리지)
+        ViewableEventTracker.viewableTracker.set(key, now);
+        sessionStorage.setItem(sessionKey, now.toString());
+        // 오래된 세션 스토리지 데이터 정리 (선택적)
+        ViewableEventTracker.cleanupOldViewables();
+        return false;
+    }
+    /**
+     * 오래된 viewable 추적 데이터 정리
+     */
+    static cleanupOldViewables() {
+        const now = Date.now();
+        const cleanupThreshold = ViewableEventTracker.VIEWABLE_COOLDOWN * 2; // 쿨다운의 2배 시간이 지난 데이터 정리
+        // 세션 스토리지 정리
+        for (let i = 0; i < sessionStorage.length; i++) {
+            const key = sessionStorage.key(i);
+            if (key && key.startsWith('adstage_viewable_')) {
+                const timestamp = sessionStorage.getItem(key);
+                if (timestamp) {
+                    const time = parseInt(timestamp, 10);
+                    if (!isNaN(time) && (now - time) > cleanupThreshold) {
+                        sessionStorage.removeItem(key);
+                        i--; // 인덱스 조정
+                    }
+                }
+            }
+        }
+        // 메모리 정리
+        for (const [key, timestamp] of ViewableEventTracker.viewableTracker.entries()) {
+            if ((now - timestamp) > cleanupThreshold) {
+                ViewableEventTracker.viewableTracker.delete(key);
+            }
+        }
+    }
+    /**
+     * 모든 추적 데이터 정리
+     */
+    static clear() {
+        ViewableEventTracker.viewableTracker.clear();
+    }
+}
+ViewableEventTracker.viewableTracker = new Map();
+ViewableEventTracker.VIEWABLE_COOLDOWN = 300000; // 5분 쿨다운
+
 /**
  * SSR 안전한 DOM API 래퍼 클래스
  * 서버사이드 렌더링 환경에서 DOM API 접근 시 오류를 방지합니다.
@@ -318,454 +395,1053 @@ class DOMUtils {
 }
 
 /**
- * 기본 광고 렌더러 추상 클래스
+ * 디바이스 정보 수집 클래스
+ * - 브라우저 환경 정보 수집
+ * - 디바이스 ID 생성 및 관리
+ * - 세션 ID 생성 및 관리
  */
-class BaseAdRenderer {
-    constructor(trackEvent) {
-        this.trackEvent = trackEvent;
-    }
+class DeviceInfoCollector {
     /**
-     * 공통 클릭 이벤트 핸들러 (SSR 안전)
+     * 디바이스 ID 생성 및 반환 (SSR 안전)
      */
-    addClickHandler(element, ad, slot) {
-        DOMUtils.safeAddEventListener(element, 'click', () => {
-            this.trackEvent?.(ad._id, slot.id, 'CLICK');
-            if (ad.linkUrl) {
-                DOMUtils.safeWindowOpen(ad.linkUrl, '_blank');
-            }
-        });
+    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;
     }
     /**
-     * 공통 스타일 적용 유틸리티 (SSR 안전)
+     * 세션 ID 생성 및 반환 (SSR 안전)
      */
-    applyStyles(element, styles) {
-        DOMUtils.safeApplyStyles(element, styles);
+    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;
     }
     /**
-     * 크기 값 파싱 유틸리티 (px, %, number 지원)
+     * 모바일 디바이스 여부 확인
      */
-    parseSizeValue(value) {
-        if (!value)
-            return undefined;
-        if (typeof value === 'number') {
-            return value > 0 ? `${value}px` : undefined;
-        }
-        if (typeof value === 'string') {
-            const trimmed = value.trim();
-            if (!trimmed)
-                return undefined;
-            // 퍼센트 값 처리
-            if (trimmed.endsWith('%')) {
-                const percent = parseFloat(trimmed);
-                return !isNaN(percent) && percent > 0 ? trimmed : undefined;
-            }
-            // px 값 처리 (px 단위 포함/미포함 모두 지원)
-            const numValue = trimmed.endsWith('px')
-                ? parseFloat(trimmed.slice(0, -2))
-                : parseFloat(trimmed);
-            return !isNaN(numValue) && numValue > 0 ? `${numValue}px` : undefined;
-        }
-        return undefined;
+    static isMobile() {
+        return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
     }
     /**
-     * 기본 컨테이너 스타일 (사용자 지정 크기만 적용)
+     * 플랫폼 타입 반환 (서버 enum에 맞춤)
      */
-    getBaseContainerStyles(slot) {
-        const styles = {
-            cursor: 'pointer',
-            position: 'relative',
-            overflow: 'hidden',
-        };
-        // 사용자가 지정한 크기가 있을 때만 적용
-        const parsedWidth = this.parseSizeValue(slot.width);
-        const parsedHeight = this.parseSizeValue(slot.height);
-        if (parsedWidth) {
-            styles.width = parsedWidth;
-        }
-        if (parsedHeight) {
-            styles.height = parsedHeight;
+    static getPlatform() {
+        const userAgent = navigator.userAgent.toLowerCase();
+        if (/iphone|ipad|ipod/.test(userAgent)) {
+            return 'ios';
         }
-        return styles;
-    }
-    /**
-     * 이미지 스타일 (고유 사이즈 유지, 사용자 지정 크기 우선)
-     */
-    getImageStyles(slot) {
-        const styles = {
-            display: 'block',
-            'object-position': 'center', // 🎯 이미지 항상 중앙 정렬
-        };
-        // 사용자가 컨테이너 크기를 지정했는지 확인
-        const parsedWidth = this.parseSizeValue(slot?.width);
-        const parsedHeight = this.parseSizeValue(slot?.height);
-        const hasUserDefinedSize = parsedWidth || parsedHeight;
-        if (hasUserDefinedSize) {
-            // 🎯 사용자가 크기를 지정한 경우: 컨테이너에 꽉 차도록 설정
-            styles.width = '100%';
-            styles.height = '100%';
-            styles['object-fit'] = 'cover'; // 컨테이너에 꽉 찬 상태로 비율 유지
-            styles['object-position'] = 'center';
+        if (/android/.test(userAgent)) {
+            return 'android';
         }
-        else {
-            // 사용자가 크기를 지정하지 않은 경우: 원본 이미지 크기 유지
-            styles['max-width'] = '100%';
-            styles.height = 'auto';
+        if (DeviceInfoCollector.isMobile()) {
+            return 'web'; // 모바일 웹
         }
-        return styles;
+        return 'desktop'; // 데스크톱 웹
     }
     /**
-     * 기본 폰트 스타일
+     * 완전한 디바이스 정보 수집
      */
-    getBaseFontStyles() {
+    static collectDeviceInfo() {
+        const viewportInfo = DOMUtils.getViewportInfo();
         return {
-            'font-family': 'Arial, sans-serif',
-            'line-height': '1.4',
-            'word-break': 'keep-all',
+            deviceId: DeviceInfoCollector.generateDeviceId(),
+            sessionId: DeviceInfoCollector.generateSessionId(),
+            osVersion: DOMUtils.isBrowser() ? navigator.platform : 'SSR',
+            deviceModel: DOMUtils.isBrowser() ? navigator.platform : 'SSR',
+            appVersion: '1.0.0',
+            sdkVersion: '1.0.0',
+            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 안전)
-     */
-    createImageElement(imageUrl, alt = '', slot) {
-        const img = DOMUtils.safeCreateElement('img');
-        if (!img)
-            return null;
-        img.src = imageUrl;
-        img.alt = alt;
-        this.applyStyles(img, this.getImageStyles(slot));
-        return img;
-    }
-    /**
-     * 텍스트 요소 생성 (SSR 안전)
+     * 슬롯 위치 정보 가져오기 (SSR 안전)
      */
-    createTextElement(text, tag = 'div', additionalStyles = {}) {
-        const element = DOMUtils.safeCreateElement(tag);
+    static getSlotPosition(containerId) {
+        const element = DOMUtils.safeGetElementById(containerId);
         if (!element)
-            return null;
-        DOMUtils.safeSetTextContent(element, text);
-        this.applyStyles(element, {
-            ...this.getBaseFontStyles(),
-            ...additionalStyles,
-        });
-        return 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 헤더 생성
      */
-    createPlaceholder(slot, text = '광고') {
-        let placeholder = DOMUtils.safeCreateElement('div');
-        // SSR 환경에서 DOM을 사용할 수 없는 경우, 런타임에 생성되도록 함
-        if (!placeholder) {
-            // SSR에서는 빈 div를 반환하되, 브라우저에서는 제대로 작동하도록 함
-            if (typeof document !== 'undefined') {
-                placeholder = document.createElement('div');
-            }
-            else {
-                // SSR 환경에서는 더미 객체 반환 (타입 단언 사용)
-                placeholder = {};
-            }
+    static create(apiKey, options) {
+        if (!apiKey) {
+            throw new Error('API key is required');
         }
-        // DOM이 사용 가능한 경우에만 스타일 적용
-        if (DOMUtils.canUseDOM() && placeholder) {
-            this.applyStyles(placeholder, {
-                ...this.getBaseContainerStyles(slot),
-                background: '#f8f9fa',
-                display: 'flex',
-                'align-items': 'center',
-                'justify-content': 'center',
-                color: '#6c757d',
-                ...this.getBaseFontStyles(),
-                // 플레이스홀더는 최소 크기 보장
-                'min-width': '100px',
-                'min-height': '100px',
-            });
-            DOMUtils.safeSetTextContent(placeholder, text);
+        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;
         }
-        return placeholder;
+        // X-Current-URL은 현재 서버에서 사용하지 않으므로 제거
+        // 필요시 이벤트 데이터 body에 포함
+        return headers;
     }
-}
-
-/**
- * 배너 광고 렌더러 - 이미지만 표시
- */
-class BannerAdRenderer extends BaseAdRenderer {
-    render(ad, slot) {
-        const adElement = DOMUtils.safeCreateElement('div');
-        if (!adElement) {
-            // SSR 환경에서는 기본 div 반환
-            return document.createElement('div');
-        }
-        // 기본 컨테이너 스타일 적용 (불필요한 스타일 제거)
-        this.applyStyles(adElement, this.getBaseContainerStyles(slot));
-        // 배너 광고는 이미지만 표시
-        if (!ad.imageUrl) {
-            // 이미지가 없는 경우 플레이스홀더 반환
-            const placeholder = this.createPlaceholder(slot, '배너 광고');
-            return placeholder || adElement;
-        }
-        const img = this.createImageElement(ad.imageUrl, '', slot);
-        if (img) {
-            DOMUtils.safeAppendChild(adElement, img);
-            // 클릭 이벤트 추가
-            this.addClickHandler(adElement, ad, slot);
+    /**
+     * 이벤트 추적용 헤더 생성
+     * User-Agent는 서버에서 실제로 사용됨
+     */
+    static createForEvents(apiKey, eventData) {
+        const baseHeaders = ApiHeaders.create(apiKey);
+        // User-Agent 오버라이드 (서버에서 실제 사용)
+        if (eventData?.userAgent) {
+            baseHeaders['User-Agent'] = eventData.userAgent;
         }
-        return adElement;
+        // 다른 정보들은 HTTP 헤더가 아닌 이벤트 데이터 body에 포함하는 것이 적절
+        // (currentUrl, referrer 등은 POST body로 전송)
+        return baseHeaders;
     }
 }
 
 /**
- * 텍스트 광고 렌더러 - textContent만 표시
+ * 광고 이벤트 추적 관리 클래스
+ * - 광고 전용 이벤트 추적 및 전송
+ * - Viewable 이벤트 중복 방지 통합
+ * - 광고 서버 API 통신
  */
-class TextAdRenderer extends BaseAdRenderer {
-    render(ad, slot) {
-        let adElement = DOMUtils.safeCreateElement('div');
-        if (!adElement) {
-            return this.createPlaceholder(slot, '텍스트 광고');
-        }
-        // 기본 컨테이너 스타일
-        const containerStyles = {
-            ...this.getBaseContainerStyles(slot),
-            padding: '20px',
-            background: 'transparent',
-            display: 'flex',
-            'align-items': 'center',
-            'justify-content': 'center',
-            // text-align은 사용자가 설정할 수 있도록 기본값에서 제외
-            ...this.getBaseFontStyles(),
-        };
-        // 사용자가 크기를 지정하지 않은 경우 컨텐츠에 맞춤
-        if (!slot.width || slot.width === 0) {
-            containerStyles.display = 'inline-flex';
-            containerStyles['white-space'] = 'nowrap';
-            containerStyles['justify-content'] = 'flex-start'; // 좌측 정렬로 변경
-        }
-        // height만 자동인 경우 줄바꿈 허용
-        if ((slot.width && slot.width !== 0) && (!slot.height || slot.height === 0)) {
-            containerStyles['white-space'] = 'normal';
-            containerStyles['min-height'] = 'auto';
-            containerStyles['justify-content'] = 'flex-start'; // 좌측 정렬로 변경
-        }
-        this.applyStyles(adElement, containerStyles);
-        // 텍스트 광고는 textContent만 표시
-        if (!ad.textContent) {
-            // 텍스트가 없는 경우 플레이스홀더 반환
-            return this.createPlaceholder(slot, '텍스트 광고');
-        }
-        // 텍스트 콘텐츠 생성
-        const textContent = this.createTextElement(ad.textContent, 'div', {
-            'font-size': '16px',
-            'font-weight': '500',
-            color: '#212529',
-            width: '100%', // 전체 너비 사용하여 텍스트 정렬이 적용되도록 함
-        });
-        if (textContent) {
-            adElement.appendChild(textContent);
-        }
-        // 사용자가 text-align을 지정했는지 확인하고 레이아웃 조정
-        setTimeout(() => {
-            if (!adElement || typeof window === 'undefined')
-                return;
-            const computedStyle = window.getComputedStyle(adElement);
-            const textAlign = computedStyle.textAlign;
-            // 사용자가 text-align을 설정했고, width가 없는 경우
-            if (textAlign && textAlign !== 'start' && textAlign !== 'left' && (!slot.width || slot.width === 0)) {
-                // 블록 레벨로 변경하여 text-align이 제대로 작동하도록 함
-                adElement.style.display = 'block';
-                adElement.style.whiteSpace = 'normal';
-                // 최소 너비 설정 (텍스트가 한 줄일 때를 위해)
-                if (textContent) {
-                    const textRect = textContent.getBoundingClientRect();
-                    if (textRect.width > 0) {
-                        adElement.style.minWidth = `${textRect.width}px`;
-                    }
+class AdvertisementEventTracker {
+    constructor(baseUrl, apiKey, debug, slots) {
+        this.baseUrl = baseUrl;
+        this.apiKey = apiKey;
+        this.debug = debug;
+        this.slots = slots;
+    }
+    /**
+     * 광고 이벤트 추적 - viewability 데이터 지원
+     */
+    async trackAdvertisementEvent(adId, slotId, eventType, additionalData) {
+        try {
+            // VIEWABLE 이벤트의 경우 중복 확인
+            if (eventType === AdEventType.VIEWABLE) {
+                if (ViewableEventTracker.isDuplicateViewable(adId, slotId, this.debug)) {
+                    return; // 중복 viewable 이벤트이므로 추적하지 않음
                 }
             }
-        }, 0);
-        // 클릭 이벤트 추가
-        this.addClickHandler(adElement, ad, slot);
-        return adElement;
-    }
-}
-
-/**
- * 네이티브 광고 렌더러 - 이미지 + textContent 표시
- */
-class NativeAdRenderer extends BaseAdRenderer {
-    render(ad, slot) {
-        const adElement = DOMUtils.safeCreateElement('div');
-        if (!adElement) {
-            return document.createElement('div');
+            // 현재 슬롯 정보 가져오기
+            const slot = this.slots.get(slotId);
+            // 디바이스 정보 수집
+            const deviceInfo = DeviceInfoCollector.collectDeviceInfo();
+            // 광고 이벤트 데이터 구성 (DTO 구조에 맞춤)
+            const eventData = {
+                // 서버에서 자동 설정: orgId, advertisementId, action
+                // 하지만 DTO 검증을 위해 임시값 제공
+                orgId: 'temp', // 서버에서 API 키로부터 덮어씀
+                advertisementId: adId, // 서버에서 URL 파라미터로부터 덮어씀
+                action: eventType, // 서버에서 URL 파라미터로부터 덮어씀
+                // 필수 필드들
+                adType: slot?.adType || 'BANNER',
+                platform: deviceInfo.platform,
+                // 디바이스 정보는 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: '1.0.0',
+                    timestamp: Date.now(),
+                },
+                // viewable 관련 추가 데이터 (DTO 필드명과 매칭)
+                ...(additionalData?.viewabilityMetrics && {
+                    isViewable: additionalData.viewabilityMetrics.isViewable,
+                    exposureTime: additionalData.viewabilityMetrics.exposureTime,
+                    maxVisibilityRatio: additionalData.viewabilityMetrics.maxVisibilityRatio,
+                    firstViewableTime: additionalData.viewabilityMetrics.firstViewableTime,
+                    // IAB 표준 준수 여부
+                    iabCompliant: additionalData.viewabilityMetrics.isViewable,
+                }),
+                // fraud 관련 데이터 (DTO 필드명과 매칭)
+                ...(additionalData?.fraudScore !== undefined && {
+                    fraudScore: additionalData.fraudScore,
+                    fraudReasons: additionalData.fraudReasons,
+                    riskLevel: additionalData.riskLevel,
+                }),
+            };
+            await fetch(`${this.baseUrl}/advertisements/events/${adId}/${eventType}`, {
+                method: 'POST',
+                headers: ApiHeaders.createForEvents(this.apiKey, eventData),
+                body: JSON.stringify(eventData),
+            });
+            if (this.debug) {
+                console.log(`Tracked advertisement event: ${eventType} for ad ${adId}`, eventData);
+            }
         }
-        // 컨테이너 스타일 적용 (불필요한 스타일 제거)
-        this.applyStyles(adElement, this.getBaseContainerStyles(slot));
-        // 네이티브 광고는 이미지만 표시
-        if (!ad.imageUrl) {
-            // 이미지가 없는 경우 플레이스홀더 반환
-            const placeholder = this.createPlaceholder(slot, '네이티브 광고');
-            return placeholder || adElement;
+        catch (error) {
+            console.error('Failed to track advertisement event:', error);
         }
-        // 이미지 생성 (고유 사이즈 또는 사용자 지정 크기)
-        const img = this.createImageElement(ad.imageUrl, '', slot);
-        if (img) {
-            DOMUtils.safeAppendChild(adElement, img);
-            // 클릭 이벤트 추가
-            this.addClickHandler(adElement, ad, slot);
+    }
+    /**
+     * 크기 값을 숫자로 변환 (서버 API용)
+     */
+    static parseNumericValue(value) {
+        if (typeof value === 'number') {
+            return value;
         }
-        return adElement;
+        if (typeof value === 'string') {
+            // px 단위 제거하고 숫자만 추출
+            const numericValue = parseFloat(value.replace(/px$/, ''));
+            return isNaN(numericValue) ? 0 : numericValue;
+        }
+        return 0; // 기본값
     }
 }
 
 /**
- * 비디오 광고 렌더러 - 비디오 또는 이미지 표시
+ * IAB 표준 준수 viewable impression 측정
  */
-class VideoAdRenderer extends BaseAdRenderer {
-    render(ad, slot) {
-        let adElement = DOMUtils.safeCreateElement('div');
-        if (!adElement) {
-            return this.createPlaceholder(slot, '비디오 광고');
-        }
-        // 컨테이너 스타일 적용 (불필요한 스타일 제거)
-        this.applyStyles(adElement, {
-            ...this.getBaseContainerStyles(slot),
-            background: '#000',
-        });
-        // 비디오 광고는 비디오만 표시
-        if (!ad.videoUrl) {
-            // 비디오가 없는 경우 플레이스홀더 반환
-            return this.createPlaceholder(slot, '비디오 광고');
-        }
-        const video = this.createVideoElement(ad.videoUrl, ad, slot);
-        if (video) {
-            adElement.appendChild(video);
-        }
-        // 클릭 이벤트 추가
-        this.addClickHandler(adElement, ad, slot);
-        return adElement;
+// 광고 타입별 IAB 표준 설정
+const VIEWABILITY_STANDARDS = {
+    BANNER: {
+        threshold: 0.5,
+        minDuration: 1000,
+        maxMeasureTime: 30000
+    },
+    VIDEO: {
+        threshold: 0.5,
+        minDuration: 2000,
+        maxMeasureTime: 60000
+    },
+    NATIVE: {
+        threshold: 0.5,
+        minDuration: 1000,
+        maxMeasureTime: 30000
+    },
+    INTERSTITIAL: {
+        threshold: 0.5,
+        minDuration: 1000,
+        maxMeasureTime: 10000
+    },
+    TEXT: {
+        threshold: 0.5,
+        minDuration: 1000,
+        maxMeasureTime: 30000
+    },
+    POPUP: {
+        threshold: 0.5,
+        minDuration: 1000,
+        maxMeasureTime: 10000
     }
-    /**
-     * 비디오 요소 생성
-     */
-    createVideoElement(videoUrl, ad, slot) {
-        const video = DOMUtils.safeCreateElement('video');
-        if (!video)
-            return null;
-        video.src = videoUrl;
-        video.controls = true;
-        // 비디오도 이미지와 같은 스타일 적용
-        this.applyStyles(video, this.getImageStyles(slot));
-        // 비디오 이벤트 추적
-        video.addEventListener('play', () => {
-            this.trackEvent?.(ad._id, slot.id, 'VIDEO_START');
-        });
-        video.addEventListener('ended', () => {
-            this.trackEvent?.(ad._id, slot.id, 'VIDEO_COMPLETE');
-        });
-        return video;
+};
+class ViewabilityTracker {
+    constructor(element, adType, onViewable) {
+        this.observer = null;
+        this.viewabilityTimer = null;
+        this.maxVisibilityTimer = null;
+        this.startTime = 0;
+        this.maxVisibilityRatio = 0;
+        this.firstViewableTime = null;
+        this.isViewableAchieved = false;
+        this.element = element;
+        this.config = VIEWABILITY_STANDARDS[adType] || VIEWABILITY_STANDARDS.BANNER;
+        this.onViewableCallback = onViewable;
+        this.startTime = performance.now();
+        this.initIntersectionObserver();
+        this.initMaxMeasureTimer();
     }
-}
-
-/**
- * 전면/팝업 광고 렌더러 - 핵심 콘텐츠만 표시
- */
-class InterstitialAdRenderer extends BaseAdRenderer {
-    render(ad, slot) {
-        let adElement = DOMUtils.safeCreateElement('div');
-        if (!adElement) {
-            return this.createPlaceholder(slot, '전면 광고');
+    initIntersectionObserver() {
+        // IntersectionObserver 지원 확인
+        if (!('IntersectionObserver' in window)) {
+            console.warn('IntersectionObserver not supported, viewability tracking disabled');
+            return;
         }
-        // 컨테이너 스타일 적용 (불필요한 스타일 제거)
-        this.applyStyles(adElement, {
-            ...this.getBaseContainerStyles(slot),
-            display: 'flex',
-            'flex-direction': 'column',
+        this.observer = new IntersectionObserver((entries) => this.handleIntersection(entries), {
+            threshold: [0, 0.1, 0.25, 0.5, 0.75, 1.0],
+            rootMargin: '0px'
         });
-        // 우선순위: 1. 이미지, 2. 비디오, 3. 텍스트
-        if (ad.imageUrl) {
-            const img = this.createImageElement(ad.imageUrl, '', slot);
-            if (img) {
-                adElement.appendChild(img);
+        this.observer.observe(this.element);
+    }
+    handleIntersection(entries) {
+        entries.forEach(entry => {
+            const visibilityRatio = entry.intersectionRatio;
+            const isVisible = this.isDocumentVisible();
+            // 최대 가시성 비율 추적
+            this.maxVisibilityRatio = Math.max(this.maxVisibilityRatio, visibilityRatio);
+            // Viewable 조건 확인 (50% 이상 + 문서 가시성)
+            if (visibilityRatio >= this.config.threshold && isVisible) {
+                this.startViewabilityTimer();
             }
-        }
-        else if (ad.videoUrl) {
-            // 이미지가 없고 비디오가 있는 경우
-            const video = this.createVideoElement(ad.videoUrl, ad, slot);
-            if (video) {
-                adElement.appendChild(video);
+            else {
+                this.stopViewabilityTimer();
             }
+        });
+    }
+    isDocumentVisible() {
+        // 단순한 문서 가시성 확인
+        return !document.hidden && document.visibilityState === 'visible';
+    }
+    startViewabilityTimer() {
+        if (this.viewabilityTimer || this.isViewableAchieved)
+            return;
+        if (this.firstViewableTime === null) {
+            this.firstViewableTime = performance.now();
         }
-        else {
-            // 모든 콘텐츠가 없는 경우
-            return this.createPlaceholder(slot, '전면 광고');
+        this.viewabilityTimer = setTimeout(() => {
+            this.onViewabilityAchieved();
+        }, this.config.minDuration);
+    }
+    stopViewabilityTimer() {
+        if (this.viewabilityTimer) {
+            clearTimeout(this.viewabilityTimer);
+            this.viewabilityTimer = null;
         }
-        // 클릭 이벤트 추가
-        this.addClickHandler(adElement, ad, slot);
-        return adElement;
     }
-    /**
-     * 비디오 요소 생성
-     */
-    createVideoElement(videoUrl, ad, slot) {
-        const video = DOMUtils.safeCreateElement('video');
-        if (!video)
-            return null;
-        video.src = videoUrl;
-        video.controls = true;
-        // 비디오도 이미지와 같은 스타일 적용
-        this.applyStyles(video, this.getImageStyles(slot));
-        // 비디오 이벤트 추적
-        video.addEventListener('play', () => {
-            this.trackEvent?.(ad._id, slot.id, 'VIDEO_START');
-        });
-        video.addEventListener('ended', () => {
-            this.trackEvent?.(ad._id, slot.id, 'VIDEO_COMPLETE');
-        });
-        return video;
+    initMaxMeasureTimer() {
+        // 최대 측정 시간 후 자동 종료
+        this.maxVisibilityTimer = setTimeout(() => {
+            this.destroy();
+        }, this.config.maxMeasureTime);
     }
-}
-
-var _a;
-/**
- * 광고 렌더러 팩토리
- * - 광고 타입에 따라 적절한 렌더러 인스턴스를 반환
- */
-class AdRendererFactory {
-    /**
-     * 광고 타입에 맞는 렌더러 생성
-     */
-    static createRenderer(adType, trackEvent) {
-        const RendererClass = this.renderers.get(adType);
-        if (!RendererClass) {
-            console.warn(`No renderer found for ad type: ${adType}, falling back to Banner renderer`);
-            return new BannerAdRenderer(trackEvent);
+    onViewabilityAchieved() {
+        if (this.isViewableAchieved)
+            return;
+        this.isViewableAchieved = true;
+        const metrics = this.calculateMetrics();
+        if (this.onViewableCallback) {
+            this.onViewableCallback(metrics);
         }
-        return new RendererClass(trackEvent);
     }
-    /**
-     * 광고 렌더링 (편의 메서드)
-     */
-    static render(ad, slot, trackEvent) {
-        const renderer = this.createRenderer(slot.adType, trackEvent);
-        return renderer.render(ad, slot);
+    calculateMetrics() {
+        const currentTime = performance.now();
+        const exposureTime = this.firstViewableTime
+            ? currentTime - this.firstViewableTime
+            : 0;
+        return {
+            isViewable: this.isViewableAchieved,
+            exposureTime,
+            maxVisibilityRatio: this.maxVisibilityRatio,
+            firstViewableTime: this.firstViewableTime,
+            measureStartTime: this.startTime,
+        };
     }
-    /**
-     * 사용 가능한 렌더러 타입 목록
-     */
-    static getSupportedAdTypes() {
-        return Array.from(this.renderers.keys());
+    getMetrics() {
+        return this.calculateMetrics();
     }
-    /**
-     * 커스텀 렌더러 등록
-     */
-    static registerRenderer(adType, RendererClass) {
-        this.renderers.set(adType, RendererClass);
+    destroy() {
+        this.stopViewabilityTimer();
+        if (this.maxVisibilityTimer) {
+            clearTimeout(this.maxVisibilityTimer);
+            this.maxVisibilityTimer = null;
+        }
+        if (this.observer) {
+            this.observer.disconnect();
+            this.observer = null;
+        }
     }
 }
-_a = AdRendererFactory;
-AdRendererFactory.renderers = new Map();
-(() => {
-    // 렌더러 등록
-    _a.renderers.set(AdType.BANNER, BannerAdRenderer);
-    _a.renderers.set(AdType.TEXT, TextAdRenderer);
+
+/**
+ * BasicFraudDetector - 현실적 구현 버전
+ * 기본적인 봇 탐지 및 간단한 행동 패턴 분석
+ */
+class BasicFraudDetector {
+    constructor() {
+        this.mouseEvents = 0;
+        this.keyboardEvents = 0;
+        this.scrollEvents = 0;
+        this.startTime = Date.now();
+        this.initBasicTracking();
+    }
+    initBasicTracking() {
+        // 기본적인 사용자 상호작용 추적
+        document.addEventListener('mousemove', () => this.mouseEvents++, { passive: true });
+        document.addEventListener('keydown', () => this.keyboardEvents++, { passive: true });
+        document.addEventListener('scroll', () => this.scrollEvents++, { passive: true });
+    }
+    calculateFraudScore() {
+        let score = 0;
+        const reasons = [];
+        // 1. 웹드라이버 탐지 (기본)
+        if (this.detectWebDriver()) {
+            score += 50;
+            reasons.push('WebDriver detected');
+        }
+        // 2. 헤드리스 브라우저 기본 탐지
+        if (this.detectBasicHeadless()) {
+            score += 40;
+            reasons.push('Headless browser signatures');
+        }
+        // 3. 사용자 상호작용 부족
+        const sessionTime = Date.now() - this.startTime;
+        if (sessionTime > 5000) { // 5초 이상 경과
+            if (this.mouseEvents === 0) {
+                score += 20;
+                reasons.push('No mouse interaction');
+            }
+            if (this.scrollEvents === 0 && sessionTime > 10000) {
+                score += 15;
+                reasons.push('No scroll activity');
+            }
+        }
+        // 4. 브라우저 환경 이상 징후
+        const browserCheck = this.checkBrowserEnvironment();
+        score += browserCheck.score;
+        reasons.push(...browserCheck.reasons);
+        // 5. 시간 패턴 이상 (너무 빠른 페이지 로드 후 즉시 클릭)
+        if (sessionTime < 1000) {
+            score += 25;
+            reasons.push('Suspiciously fast interaction');
+        }
+        const finalScore = Math.min(score, 100);
+        return {
+            score: finalScore,
+            riskLevel: this.getRiskLevel(finalScore),
+            reasons: reasons
+        };
+    }
+    detectWebDriver() {
+        // 기본적인 웹드라이버 탐지
+        return !!(window.webdriver ||
+            navigator.webdriver ||
+            window.__webdriver_evaluate ||
+            window.__selenium_evaluate ||
+            window.__webdriver_script_function ||
+            window.__webdriver_script_func ||
+            window.__webdriver_script_fn ||
+            window.__fxdriver_evaluate ||
+            window.__driver_unwrapped ||
+            window.__webdriver_unwrapped ||
+            window.__driver_evaluate ||
+            window.__selenium_unwrapped ||
+            window.__fxdriver_unwrapped);
+    }
+    detectBasicHeadless() {
+        const signatures = [];
+        // PhantomJS 탐지
+        if (window._phantom || window.phantom) {
+            signatures.push('PhantomJS');
+        }
+        // Chrome headless 기본 탐지
+        if (navigator.userAgent.includes('HeadlessChrome')) {
+            signatures.push('Chrome Headless');
+        }
+        // 플러그인 없음 (일반적이지 않음)
+        if (navigator.plugins.length === 0) {
+            signatures.push('No plugins');
+        }
+        return signatures.length > 0;
+    }
+    checkBrowserEnvironment() {
+        let score = 0;
+        const reasons = [];
+        // 언어 설정 이상
+        if (!navigator.language || navigator.language === 'C') {
+            score += 10;
+            reasons.push('Unusual language setting');
+        }
+        // 쿠키 비활성화
+        if (!navigator.cookieEnabled) {
+            score += 15;
+            reasons.push('Cookies disabled');
+        }
+        // 화면 해상도 이상
+        if (screen.width === 0 || screen.height === 0) {
+            score += 20;
+            reasons.push('Invalid screen resolution');
+        }
+        // 시간대 정보 없음
+        try {
+            const timezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
+            if (!timezone || timezone === 'UTC') {
+                score += 5;
+                reasons.push('No timezone info');
+            }
+        }
+        catch (e) {
+            score += 10;
+            reasons.push('Timezone detection failed');
+        }
+        return { score, reasons };
+    }
+    getRiskLevel(score) {
+        if (score >= 70)
+            return 'CRITICAL';
+        if (score >= 50)
+            return 'HIGH';
+        if (score >= 30)
+            return 'MEDIUM';
+        return 'LOW';
+    }
+    getBrowserInfo() {
+        return {
+            userAgent: navigator.userAgent,
+            language: navigator.language,
+            platform: navigator.platform,
+            cookieEnabled: navigator.cookieEnabled,
+            doNotTrack: navigator.doNotTrack,
+            timezone: Intl.DateTimeFormat().resolvedOptions().timeZone,
+            screenResolution: `${screen.width}x${screen.height}`,
+            viewportSize: `${window.innerWidth}x${window.innerHeight}`
+        };
+    }
+    destroy() {
+        // 이벤트 리스너 정리는 생략 (메모리 누수 방지를 위해 필요시 구현)
+    }
+}
+
+/**
+ * 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',
+        events: '/advertisements/events'
+    },
+    /** 이벤트 관련 */
+    events: {
+        track: '/events/track',
+        batch: '/events/batch'
+    }
+};
+/**
+ * 완전한 API URL 생성 헬퍼
+ */
+class EndpointBuilder {
+    constructor(baseUrl) {
+        /**
+         * 광고 엔드포인트
+         */
+        this.advertisements = {
+            list: () => `${this.baseUrl}${API_PATHS.advertisements.list}`,
+            events: (adId, eventType) => `${this.baseUrl}${API_PATHS.advertisements.events}/${adId}/${eventType}`
+        };
+        /**
+         * 이벤트 엔드포인트
+         */
+        this.events = {
+            track: () => `${this.baseUrl}${API_PATHS.events.track}`,
+            batch: () => `${this.baseUrl}${API_PATHS.events.batch}`
+        };
+        // 기본값은 베타 환경 사용
+        this.baseUrl = baseUrl || API_ENDPOINTS.beta;
+    }
+    /**
+     * 기본 URL 변경
+     */
+    setBaseUrl(url) {
+        this.baseUrl = url;
+        console.log('🔄 API endpoint changed:', url);
+    }
+    /**
+     * 기본 URL 반환
+     */
+    getBaseUrl() {
+        return this.baseUrl;
+    }
+    /**
+     * 커스텀 경로 생성
+     */
+    custom(path) {
+        return `${this.baseUrl}${path.startsWith('/') ? path : `/${path}`}`;
+    }
+}
+/**
+ * 전역 엔드포인트 빌더 인스턴스 (기본: 베타 환경)
+ */
+const endpoints = new EndpointBuilder();
+
+/**
+ * 기본 광고 렌더러 추상 클래스
+ */
+class BaseAdRenderer {
+    constructor(trackEvent) {
+        this.trackEvent = trackEvent;
+    }
+    /**
+     * 공통 클릭 이벤트 핸들러 (SSR 안전)
+     */
+    addClickHandler(element, ad, slot) {
+        DOMUtils.safeAddEventListener(element, 'click', () => {
+            this.trackEvent?.(ad._id, slot.id, 'CLICK');
+            if (ad.linkUrl) {
+                DOMUtils.safeWindowOpen(ad.linkUrl, '_blank');
+            }
+        });
+    }
+    /**
+     * 공통 스타일 적용 유틸리티 (SSR 안전)
+     */
+    applyStyles(element, styles) {
+        DOMUtils.safeApplyStyles(element, styles);
+    }
+    /**
+     * 크기 값 파싱 유틸리티 (px, %, number 지원)
+     */
+    parseSizeValue(value) {
+        if (!value)
+            return undefined;
+        if (typeof value === 'number') {
+            return value > 0 ? `${value}px` : undefined;
+        }
+        if (typeof value === 'string') {
+            const trimmed = value.trim();
+            if (!trimmed)
+                return undefined;
+            // 퍼센트 값 처리
+            if (trimmed.endsWith('%')) {
+                const percent = parseFloat(trimmed);
+                return !isNaN(percent) && percent > 0 ? trimmed : undefined;
+            }
+            // px 값 처리 (px 단위 포함/미포함 모두 지원)
+            const numValue = trimmed.endsWith('px')
+                ? parseFloat(trimmed.slice(0, -2))
+                : parseFloat(trimmed);
+            return !isNaN(numValue) && numValue > 0 ? `${numValue}px` : undefined;
+        }
+        return undefined;
+    }
+    /**
+     * 기본 컨테이너 스타일 (사용자 지정 크기만 적용)
+     */
+    getBaseContainerStyles(slot) {
+        const styles = {
+            cursor: 'pointer',
+            position: 'relative',
+            overflow: 'hidden',
+        };
+        // 사용자가 지정한 크기가 있을 때만 적용
+        const parsedWidth = this.parseSizeValue(slot.width);
+        const parsedHeight = this.parseSizeValue(slot.height);
+        if (parsedWidth) {
+            styles.width = parsedWidth;
+        }
+        if (parsedHeight) {
+            styles.height = parsedHeight;
+        }
+        return styles;
+    }
+    /**
+     * 이미지 스타일 (고유 사이즈 유지, 사용자 지정 크기 우선)
+     */
+    getImageStyles(slot) {
+        const styles = {
+            display: 'block',
+            'max-width': '100%',
+            height: 'auto',
+            'object-position': 'center', // 🎯 이미지 항상 중앙 정렬
+        };
+        // 사용자가 컨테이너 크기를 지정한 경우에만 크기 제한
+        const parsedWidth = this.parseSizeValue(slot?.width);
+        const parsedHeight = this.parseSizeValue(slot?.height);
+        if (parsedWidth && parsedHeight) {
+            styles.width = '100%';
+            styles.height = '100%';
+            styles['object-fit'] = 'cover';
+            styles['object-position'] = 'center'; // 🎯 크기 조정 시에도 중앙 정렬
+        }
+        return styles;
+    }
+    /**
+     * 기본 폰트 스타일
+     */
+    getBaseFontStyles() {
+        return {
+            'font-family': 'Arial, sans-serif',
+            'line-height': '1.4',
+            'word-break': 'keep-all',
+        };
+    }
+    /**
+     * 이미지 요소 생성 (SSR 안전)
+     */
+    createImageElement(imageUrl, alt = '', slot) {
+        const img = DOMUtils.safeCreateElement('img');
+        if (!img)
+            return null;
+        img.src = imageUrl;
+        img.alt = alt;
+        this.applyStyles(img, this.getImageStyles(slot));
+        return img;
+    }
+    /**
+     * 텍스트 요소 생성 (SSR 안전)
+     */
+    createTextElement(text, tag = 'div', additionalStyles = {}) {
+        const element = DOMUtils.safeCreateElement(tag);
+        if (!element)
+            return null;
+        DOMUtils.safeSetTextContent(element, text);
+        this.applyStyles(element, {
+            ...this.getBaseFontStyles(),
+            ...additionalStyles,
+        });
+        return element;
+    }
+    /**
+     * 플레이스홀더 요소 생성
+     */
+    createPlaceholder(slot, text = '광고') {
+        let placeholder = DOMUtils.safeCreateElement('div');
+        // SSR 환경에서 DOM을 사용할 수 없는 경우, 런타임에 생성되도록 함
+        if (!placeholder) {
+            // SSR에서는 빈 div를 반환하되, 브라우저에서는 제대로 작동하도록 함
+            if (typeof document !== 'undefined') {
+                placeholder = document.createElement('div');
+            }
+            else {
+                // SSR 환경에서는 더미 객체 반환 (타입 단언 사용)
+                placeholder = {};
+            }
+        }
+        // DOM이 사용 가능한 경우에만 스타일 적용
+        if (DOMUtils.canUseDOM() && placeholder) {
+            this.applyStyles(placeholder, {
+                ...this.getBaseContainerStyles(slot),
+                background: '#f8f9fa',
+                display: 'flex',
+                'align-items': 'center',
+                'justify-content': 'center',
+                color: '#6c757d',
+                ...this.getBaseFontStyles(),
+                // 플레이스홀더는 최소 크기 보장
+                'min-width': '100px',
+                'min-height': '100px',
+            });
+            DOMUtils.safeSetTextContent(placeholder, text);
+        }
+        return placeholder;
+    }
+}
+
+/**
+ * 배너 광고 렌더러 - 이미지만 표시
+ */
+class BannerAdRenderer extends BaseAdRenderer {
+    render(ad, slot) {
+        const adElement = DOMUtils.safeCreateElement('div');
+        if (!adElement) {
+            // SSR 환경에서는 기본 div 반환
+            return document.createElement('div');
+        }
+        // 기본 컨테이너 스타일 적용 (불필요한 스타일 제거)
+        this.applyStyles(adElement, this.getBaseContainerStyles(slot));
+        // 배너 광고는 이미지만 표시
+        if (!ad.imageUrl) {
+            // 이미지가 없는 경우 플레이스홀더 반환
+            const placeholder = this.createPlaceholder(slot, '배너 광고');
+            return placeholder || adElement;
+        }
+        const img = this.createImageElement(ad.imageUrl, '', slot);
+        if (img) {
+            DOMUtils.safeAppendChild(adElement, img);
+            // 클릭 이벤트 추가
+            this.addClickHandler(adElement, ad, slot);
+        }
+        return adElement;
+    }
+}
+
+/**
+ * 텍스트 광고 렌더러 - textContent만 표시
+ */
+class TextAdRenderer extends BaseAdRenderer {
+    render(ad, slot) {
+        let adElement = DOMUtils.safeCreateElement('div');
+        if (!adElement) {
+            return this.createPlaceholder(slot, '텍스트 광고');
+        }
+        // 기본 컨테이너 스타일
+        const containerStyles = {
+            ...this.getBaseContainerStyles(slot),
+            padding: '20px',
+            background: 'transparent',
+            display: 'flex',
+            'align-items': 'center',
+            'justify-content': 'center',
+            // text-align은 사용자가 설정할 수 있도록 기본값에서 제외
+            ...this.getBaseFontStyles(),
+        };
+        // 사용자가 크기를 지정하지 않은 경우 컨텐츠에 맞춤
+        if (!slot.width || slot.width === 0) {
+            containerStyles.display = 'inline-flex';
+            containerStyles['white-space'] = 'nowrap';
+            containerStyles['justify-content'] = 'flex-start'; // 좌측 정렬로 변경
+        }
+        // height만 자동인 경우 줄바꿈 허용
+        if ((slot.width && slot.width !== 0) && (!slot.height || slot.height === 0)) {
+            containerStyles['white-space'] = 'normal';
+            containerStyles['min-height'] = 'auto';
+            containerStyles['justify-content'] = 'flex-start'; // 좌측 정렬로 변경
+        }
+        this.applyStyles(adElement, containerStyles);
+        // 텍스트 광고는 textContent만 표시
+        if (!ad.textContent) {
+            // 텍스트가 없는 경우 플레이스홀더 반환
+            return this.createPlaceholder(slot, '텍스트 광고');
+        }
+        // 텍스트 콘텐츠 생성
+        const textContent = this.createTextElement(ad.textContent, 'div', {
+            'font-size': '16px',
+            'font-weight': '500',
+            color: '#212529',
+            width: '100%', // 전체 너비 사용하여 텍스트 정렬이 적용되도록 함
+        });
+        if (textContent) {
+            adElement.appendChild(textContent);
+        }
+        // 사용자가 text-align을 지정했는지 확인하고 레이아웃 조정
+        setTimeout(() => {
+            if (!adElement || typeof window === 'undefined')
+                return;
+            const computedStyle = window.getComputedStyle(adElement);
+            const textAlign = computedStyle.textAlign;
+            // 사용자가 text-align을 설정했고, width가 없는 경우
+            if (textAlign && textAlign !== 'start' && textAlign !== 'left' && (!slot.width || slot.width === 0)) {
+                // 블록 레벨로 변경하여 text-align이 제대로 작동하도록 함
+                adElement.style.display = 'block';
+                adElement.style.whiteSpace = 'normal';
+                // 최소 너비 설정 (텍스트가 한 줄일 때를 위해)
+                if (textContent) {
+                    const textRect = textContent.getBoundingClientRect();
+                    if (textRect.width > 0) {
+                        adElement.style.minWidth = `${textRect.width}px`;
+                    }
+                }
+            }
+        }, 0);
+        // 클릭 이벤트 추가
+        this.addClickHandler(adElement, ad, slot);
+        return adElement;
+    }
+}
+
+/**
+ * 네이티브 광고 렌더러 - 이미지 + textContent 표시
+ */
+class NativeAdRenderer extends BaseAdRenderer {
+    render(ad, slot) {
+        const adElement = DOMUtils.safeCreateElement('div');
+        if (!adElement) {
+            return document.createElement('div');
+        }
+        // 컨테이너 스타일 적용 (불필요한 스타일 제거)
+        this.applyStyles(adElement, this.getBaseContainerStyles(slot));
+        // 네이티브 광고는 이미지만 표시
+        if (!ad.imageUrl) {
+            // 이미지가 없는 경우 플레이스홀더 반환
+            const placeholder = this.createPlaceholder(slot, '네이티브 광고');
+            return placeholder || adElement;
+        }
+        // 이미지 생성 (고유 사이즈 또는 사용자 지정 크기)
+        const img = this.createImageElement(ad.imageUrl, '', slot);
+        if (img) {
+            DOMUtils.safeAppendChild(adElement, img);
+            // 클릭 이벤트 추가
+            this.addClickHandler(adElement, ad, slot);
+        }
+        return adElement;
+    }
+}
+
+/**
+ * 비디오 광고 렌더러 - 비디오 또는 이미지 표시
+ */
+class VideoAdRenderer extends BaseAdRenderer {
+    render(ad, slot) {
+        let adElement = DOMUtils.safeCreateElement('div');
+        if (!adElement) {
+            return this.createPlaceholder(slot, '비디오 광고');
+        }
+        // 컨테이너 스타일 적용 (불필요한 스타일 제거)
+        this.applyStyles(adElement, {
+            ...this.getBaseContainerStyles(slot),
+            background: '#000',
+        });
+        // 비디오 광고는 비디오만 표시
+        if (!ad.videoUrl) {
+            // 비디오가 없는 경우 플레이스홀더 반환
+            return this.createPlaceholder(slot, '비디오 광고');
+        }
+        const video = this.createVideoElement(ad.videoUrl, ad, slot);
+        if (video) {
+            adElement.appendChild(video);
+        }
+        // 클릭 이벤트 추가
+        this.addClickHandler(adElement, ad, slot);
+        return adElement;
+    }
+    /**
+     * 비디오 요소 생성
+     */
+    createVideoElement(videoUrl, ad, slot) {
+        const video = DOMUtils.safeCreateElement('video');
+        if (!video)
+            return null;
+        video.src = videoUrl;
+        video.controls = true;
+        // 비디오도 이미지와 같은 스타일 적용
+        this.applyStyles(video, this.getImageStyles(slot));
+        // 비디오 이벤트 추적
+        video.addEventListener('play', () => {
+            this.trackEvent?.(ad._id, slot.id, 'VIDEO_START');
+        });
+        video.addEventListener('ended', () => {
+            this.trackEvent?.(ad._id, slot.id, 'VIDEO_COMPLETE');
+        });
+        return video;
+    }
+}
+
+/**
+ * 전면/팝업 광고 렌더러 - 핵심 콘텐츠만 표시
+ */
+class InterstitialAdRenderer extends BaseAdRenderer {
+    render(ad, slot) {
+        let adElement = DOMUtils.safeCreateElement('div');
+        if (!adElement) {
+            return this.createPlaceholder(slot, '전면 광고');
+        }
+        // 컨테이너 스타일 적용 (불필요한 스타일 제거)
+        this.applyStyles(adElement, {
+            ...this.getBaseContainerStyles(slot),
+            display: 'flex',
+            'flex-direction': 'column',
+        });
+        // 우선순위: 1. 이미지, 2. 비디오, 3. 텍스트
+        if (ad.imageUrl) {
+            const img = this.createImageElement(ad.imageUrl, '', slot);
+            if (img) {
+                adElement.appendChild(img);
+            }
+        }
+        else if (ad.videoUrl) {
+            // 이미지가 없고 비디오가 있는 경우
+            const video = this.createVideoElement(ad.videoUrl, ad, slot);
+            if (video) {
+                adElement.appendChild(video);
+            }
+        }
+        else {
+            // 모든 콘텐츠가 없는 경우
+            return this.createPlaceholder(slot, '전면 광고');
+        }
+        // 클릭 이벤트 추가
+        this.addClickHandler(adElement, ad, slot);
+        return adElement;
+    }
+    /**
+     * 비디오 요소 생성
+     */
+    createVideoElement(videoUrl, ad, slot) {
+        const video = DOMUtils.safeCreateElement('video');
+        if (!video)
+            return null;
+        video.src = videoUrl;
+        video.controls = true;
+        // 비디오도 이미지와 같은 스타일 적용
+        this.applyStyles(video, this.getImageStyles(slot));
+        // 비디오 이벤트 추적
+        video.addEventListener('play', () => {
+            this.trackEvent?.(ad._id, slot.id, 'VIDEO_START');
+        });
+        video.addEventListener('ended', () => {
+            this.trackEvent?.(ad._id, slot.id, 'VIDEO_COMPLETE');
+        });
+        return video;
+    }
+}
+
+var _a;
+/**
+ * 광고 렌더러 팩토리
+ * - 광고 타입에 따라 적절한 렌더러 인스턴스를 반환
+ */
+class AdRendererFactory {
+    /**
+     * 광고 타입에 맞는 렌더러 생성
+     */
+    static createRenderer(adType, trackEvent) {
+        const RendererClass = this.renderers.get(adType);
+        if (!RendererClass) {
+            console.warn(`No renderer found for ad type: ${adType}, falling back to Banner renderer`);
+            return new BannerAdRenderer(trackEvent);
+        }
+        return new RendererClass(trackEvent);
+    }
+    /**
+     * 광고 렌더링 (편의 메서드)
+     */
+    static render(ad, slot, trackEvent) {
+        const renderer = this.createRenderer(slot.adType, trackEvent);
+        return renderer.render(ad, slot);
+    }
+    /**
+     * 사용 가능한 렌더러 타입 목록
+     */
+    static getSupportedAdTypes() {
+        return Array.from(this.renderers.keys());
+    }
+    /**
+     * 커스텀 렌더러 등록
+     */
+    static registerRenderer(adType, RendererClass) {
+        this.renderers.set(adType, RendererClass);
+    }
+}
+_a = AdRendererFactory;
+AdRendererFactory.renderers = new Map();
+(() => {
+    // 렌더러 등록
+    _a.renderers.set(AdType.BANNER, BannerAdRenderer);
+    _a.renderers.set(AdType.TEXT, TextAdRenderer);
     _a.renderers.set(AdType.NATIVE, NativeAdRenderer);
     _a.renderers.set(AdType.VIDEO, VideoAdRenderer);
     _a.renderers.set(AdType.INTERSTITIAL, InterstitialAdRenderer);
@@ -803,12 +1479,11 @@ class CarouselSliderManager {
                 width = `${slot.width}px`;
             }
             containerStyles.width = width;
-            containerStyles.display = 'block'; // ✅ 하단 공백 제거를 위해 block 사용
+            containerStyles.display = 'inline-block'; // 지정된 크기에 맞춤 (좌측 정렬)
         }
         else {
-            // 컨텐츠 크기에 맞춤 - fit-content로 컨텐츠에 맞는 크기 설정
-            containerStyles.display = 'block';
-            containerStyles.width = 'fit-content'; // 컨텐츠 크기에 맞춤
+            // 컨텐츠 크기에 맞춤
+            containerStyles.display = 'inline-block';
         }
         if (slot.height && slot.height !== 0) {
             const height = typeof slot.height === 'string' ? slot.height : `${slot.height}px`;
@@ -917,7 +1592,7 @@ class CarouselSliderManager {
         let currentSlide = 0;
         const totalSlides = advertisements.length;
         const autoSlideInterval = (options?.autoSlideInterval || 3) * 1000; // 기본 3초
-        // 슬라이드 이동 함수 (무한 루프 지원 + 동적 높이 조정)
+        // 슬라이드 이동 함수 (무한 루프 지원)
         const moveToSlide = (index, instant = false) => {
             currentSlide = index;
             // 애니메이션 임시 비활성화 (무한 루프용)
@@ -929,33 +1604,6 @@ class CarouselSliderManager {
             }
             // 항상 퍼센트 기반으로 이동
             slideContainer.style.transform = `translateX(-${(100 / extendedAds.length) * currentSlide}%)`;
-            // 🆕 동적 높이 조정: 현재 슬라이드의 이미지 높이에 맞춰 컨테이너 높이 조정
-            if (!instant && !slot.height && !slot.width) { // 사용자가 크기를 지정하지 않은 경우에만
-                const currentSlideElement = slideContainer.children[currentSlide];
-                if (currentSlideElement) {
-                    const currentAdElement = currentSlideElement.children[0];
-                    if (currentAdElement) {
-                        // 이미지 요소 찾기
-                        const imgElement = currentAdElement.querySelector('img');
-                        if (imgElement) {
-                            // 이미지 로드 완료 후 높이 조정
-                            const adjustHeight = () => {
-                                const imgHeight = imgElement.getBoundingClientRect().height;
-                                if (imgHeight > 0) {
-                                    sliderWrapper.style.height = `${imgHeight}px`;
-                                    sliderWrapper.style.transition = instant ? 'none' : 'height 0.4s ease-out';
-                                }
-                            };
-                            if (imgElement.complete && imgElement.naturalHeight > 0) {
-                                adjustHeight();
-                            }
-                            else {
-                                imgElement.addEventListener('load', adjustHeight, { once: true });
-                            }
-                        }
-                    }
-                }
-            }
             // 도트 업데이트 (무채색 스타일) - 실제 광고 인덱스 기준, 텍스트 광고가 아닐 때만
             const actualIndex = currentSlide === totalSlides ? 0 : currentSlide;
             if (dotContainer) {
@@ -1087,252 +1735,24 @@ class CarouselSliderManager {
                     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);
-                }
-            }
-        });
-    }
-}
-
-/**
- * 텍스트 전환 효과 관리 클래스
- * - 텍스트 광고 전용 페이드 인/아웃 + 상하 움직임 효과
- * - 부드러운 전환 애니메이션 (vertical transition)
- * - 무한 루프 지원
- */
-class TextTransitionManager {
-    /**
-     * 텍스트 전환 슬라이더 컨테이너 생성
-     */
-    static createTextTransitionContainer(slot, advertisements, options, trackEventCallback) {
-        const sliderWrapper = document.createElement('div');
-        sliderWrapper.className = 'adstage-fade-slider-wrapper';
-        // 래퍼 스타일 설정
-        const containerStyles = {
-            position: 'relative',
-            overflow: 'hidden',
-            display: 'block', // ✅ 하단 공백 제거를 위해 block 사용
-            width: '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;
-        }
-        if (slot.height && slot.height !== 0) {
-            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%;
-      height: 100%;
-    `;
-        // 크기 측정을 위한 임시 컨테이너 (자동 크기 계산이 필요한 경우)
-        let measureContainer = null;
-        const needsWidthMeasurement = !slot.width || slot.width === 0;
-        const needsHeightMeasurement = !slot.height || slot.height === 0;
-        if (needsWidthMeasurement || needsHeightMeasurement) {
-            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 = AdRendererFactory.render(ad, slot, trackEventCallback);
-                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`;
-            }
-            if (needsHeightMeasurement && maxHeight > 0) {
-                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';
-            slideElement.style.cssText = `
-        position: absolute;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        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 = AdRendererFactory.render(ad, slot, trackEventCallback);
-            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];
-            // 이전 슬라이드 페이드 아웃 (아래로)
-            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';
-                }
-            });
-            currentSlide = index;
-            // 현재 슬라이드의 광고에 대해 노출 이벤트 추적
-            if (currentSlide > 0) { // 첫 번째는 이미 loadSlot에서 추적됨
-                trackEventCallback(advertisements[currentSlide]._id, slot.id, AdEventType.VIEWABLE);
-            }
-        };
-        // 자동 슬라이드
-        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;
+            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) {
+    static addTouchSupport(container, moveToSlide, getCurrentSlide, totalSlides, handleInfiniteLoop) {
         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) => {
@@ -1345,19 +1765,21 @@ class TextTransitionManager {
                 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 diff = startX - endX;
+            if (Math.abs(diff) > 50) { // 50px 이상 스와이프 시
                 const currentSlide = getCurrentSlide();
-                if (diffX > 0) {
+                if (diff > 0) {
                     // 왼쪽으로 스와이프 (다음 슬라이드)
-                    moveToSlide(currentSlide + 1);
+                    const nextIndex = currentSlide + 1;
+                    moveToSlide(nextIndex);
+                    if (handleInfiniteLoop) {
+                        handleInfiniteLoop();
+                    }
                 }
                 else {
                     // 오른쪽으로 스와이프 (이전 슬라이드)
-                    moveToSlide(currentSlide - 1);
+                    const prevIndex = currentSlide > 0 ? currentSlide - 1 : totalSlides - 1;
+                    moveToSlide(prevIndex);
                 }
             }
         });
@@ -1365,698 +1787,844 @@ class TextTransitionManager {
 }
 
 /**
- * VIEWABLE 이벤트 추적 및 중복 방지 관리 클래스
- * - 메모리 기반 중복 확인
- * - 세션 스토리지 기반 영구 추적
- * - 자동 정리 기능
- * - ViewabilityTracker와 함께 사용하여 중복 viewable 이벤트 방지
+ * 텍스트 전환 효과 관리 클래스
+ * - 텍스트 광고 전용 페이드 인/아웃 + 상하 움직임 효과
+ * - 부드러운 전환 애니메이션 (vertical transition)
+ * - 무한 루프 지원
  */
-class ViewableEventTracker {
+class TextTransitionManager {
     /**
-     * 중복 viewable 이벤트 여부 확인
+     * 텍스트 전환 슬라이더 컨테이너 생성
      */
-    static isDuplicateViewable(adId, slotId, debug = false) {
-        const key = `${adId}_${slotId}`;
-        const now = Date.now();
-        // 메모리 기반 중복 확인 (새로고침 시 초기화됨)
-        const lastViewable = ViewableEventTracker.viewableTracker.get(key);
-        if (lastViewable && (now - lastViewable) < ViewableEventTracker.VIEWABLE_COOLDOWN) {
-            if (debug) {
-                console.log(`Duplicate viewable blocked for ad ${adId} in slot ${slotId}. Cooldown: ${Math.round((ViewableEventTracker.VIEWABLE_COOLDOWN - (now - lastViewable)) / 1000)}s remaining`);
+    static createTextTransitionContainer(slot, advertisements, options, trackEventCallback) {
+        const sliderWrapper = document.createElement('div');
+        sliderWrapper.className = 'adstage-fade-slider-wrapper';
+        // 래퍼 스타일 설정
+        const containerStyles = {
+            position: 'relative',
+            overflow: 'hidden',
+            display: 'inline-block',
+        };
+        // 사용자가 크기를 지정한 경우
+        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`;
             }
-            return true;
-        }
-        // 세션 스토리지 기반 중복 확인 (새로고침 시에도 유지)
-        const sessionKey = `adstage_viewable_${key}`;
-        const sessionViewable = sessionStorage.getItem(sessionKey);
-        if (sessionViewable) {
-            const sessionTime = parseInt(sessionViewable, 10);
-            if (!isNaN(sessionTime) && (now - sessionTime) < ViewableEventTracker.VIEWABLE_COOLDOWN) {
-                if (debug) {
-                    console.log(`Session-based duplicate viewable blocked for ad ${adId} in slot ${slotId}. Cooldown: ${Math.round((ViewableEventTracker.VIEWABLE_COOLDOWN - (now - sessionTime)) / 1000)}s remaining`);
-                }
-                // 메모리에도 기록하여 이후 요청 최적화
-                ViewableEventTracker.viewableTracker.set(key, sessionTime);
-                return true;
+            else {
+                width = `${slot.width}px`;
             }
+            containerStyles.width = width;
         }
-        // viewable 이벤트 시점 기록 (메모리 + 세션 스토리지)
-        ViewableEventTracker.viewableTracker.set(key, now);
-        sessionStorage.setItem(sessionKey, now.toString());
-        if (debug) {
-            console.log(`🎯 New viewable event allowed for ad ${adId} in slot ${slotId}`);
-        }
-        // 오래된 세션 스토리지 데이터 정리 (선택적)
-        ViewableEventTracker.cleanupOldViewables();
-        return false;
-    }
-    /**
-     * 오래된 viewable 추적 데이터 정리
-     */
-    static cleanupOldViewables() {
-        const now = Date.now();
-        const cleanupThreshold = ViewableEventTracker.VIEWABLE_COOLDOWN * 2; // 쿨다운의 2배 시간이 지난 데이터 정리
-        // 세션 스토리지 정리
-        for (let i = 0; i < sessionStorage.length; i++) {
-            const key = sessionStorage.key(i);
-            if (key && key.startsWith('adstage_viewable_')) {
-                const timestamp = sessionStorage.getItem(key);
-                if (timestamp) {
-                    const time = parseInt(timestamp, 10);
-                    if (!isNaN(time) && (now - time) > cleanupThreshold) {
-                        sessionStorage.removeItem(key);
-                        i--; // 인덱스 조정
-                    }
-                }
+        if (slot.height && slot.height !== 0) {
+            let height;
+            if (typeof slot.height === 'string') {
+                height = slot.height.includes('px') || slot.height.includes('%') ? slot.height : `${slot.height}px`;
             }
-        }
-        // 메모리 정리
-        for (const [key, timestamp] of ViewableEventTracker.viewableTracker.entries()) {
-            if ((now - timestamp) > cleanupThreshold) {
-                ViewableEventTracker.viewableTracker.delete(key);
+            else {
+                height = `${slot.height}px`;
             }
+            containerStyles.height = height;
         }
-    }
-    /**
-     * 모든 추적 데이터 정리
-     */
-    static clear() {
-        ViewableEventTracker.viewableTracker.clear();
-    }
-}
-ViewableEventTracker.viewableTracker = new Map();
-ViewableEventTracker.VIEWABLE_COOLDOWN = 30000; // 30초 쿨다운 (테스트용으로 단축)
-
-/**
- * 디바이스 정보 수집 클래스
- * - 브라우저 환경 정보 수집
- * - 디바이스 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;
-    }
-    /**
-     * 모바일 디바이스 여부 확인
-     */
-    static isMobile() {
-        return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
-    }
-    /**
-     * 플랫폼 타입 반환 (서버 enum에 맞춤)
-     */
-    static getPlatform() {
-        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: '1.0.0',
-            sdkVersion: '1.0.0',
-            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(),
+        // 스타일 적용
+        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%;
+      height: 100%;
+    `;
+        // 크기 측정을 위한 임시 컨테이너 (자동 크기 계산이 필요한 경우)
+        let measureContainer = null;
+        const needsWidthMeasurement = !slot.width || slot.width === 0;
+        const needsHeightMeasurement = !slot.height || slot.height === 0;
+        if (needsWidthMeasurement || needsHeightMeasurement) {
+            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 = AdRendererFactory.render(ad, slot, trackEventCallback);
+                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`;
+            }
+            if (needsHeightMeasurement && maxHeight > 0) {
+                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';
+            slideElement.style.cssText = `
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        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 = AdRendererFactory.render(ad, slot, trackEventCallback);
+            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];
+            // 이전 슬라이드 페이드 아웃 (아래로)
+            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';
+                }
+            });
+            currentSlide = index;
+            // 현재 슬라이드의 광고에 대해 노출 이벤트 추적
+            if (currentSlide > 0) { // 첫 번째는 이미 loadSlot에서 추적됨
+                trackEventCallback(advertisements[currentSlide]._id, slot.id, AdEventType.VIEWABLE);
+            }
         };
+        // 자동 슬라이드
+        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;
     }
     /**
-     * 슬롯 위치 정보 가져오기 (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)}`;
+    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);
+                }
+            }
+        });
     }
 }
 
 /**
- * AdStage SDK - API 헤더 유틸리티
- * 공통 헤더 생성 로직
+ * AdRenderer - 광고 렌더링 전용 클래스
+ * AdsModule에서 렌더링 관련 기능을 분리
  */
-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;
+class AdRenderer {
+    constructor(debug = false, advertisementEventTracker) {
+        this.debug = debug;
+        this.advertisementEventTracker = advertisementEventTracker || null;
     }
     /**
-     * 이벤트 추적용 헤더 생성
-     * User-Agent는 서버에서 실제로 사용됨
+     * Placeholder(슬롯 컨테이너) 생성
      */
-    static createForEvents(apiKey, eventData) {
-        const baseHeaders = ApiHeaders.create(apiKey);
-        // User-Agent 오버라이드 (서버에서 실제 사용)
-        if (eventData?.userAgent) {
-            baseHeaders['User-Agent'] = eventData.userAgent;
+    createPlaceholder(container, slotId, type, options, _config) {
+        const adElement = document.createElement('div');
+        adElement.id = slotId;
+        adElement.className = `adstage-slot adstage-${String(type).toLowerCase()}`;
+        adElement.setAttribute('data-adstage-container', 'true');
+        adElement.setAttribute('data-adstage-type', String(type));
+        adElement.setAttribute('data-adstage-slot', slotId);
+        const { width, height } = this.calculateAdSize(container, type, options, _config) || {
+            width: '100%',
+            height: '250px'
+        };
+        adElement.style.width = width;
+        adElement.style.height = height;
+        adElement.style.border = '1px dashed #ccc';
+        adElement.style.display = 'flex';
+        adElement.style.alignItems = 'center';
+        adElement.style.justifyContent = 'center';
+        adElement.style.backgroundColor = '#f9f9f9';
+        adElement.style.color = '#666';
+        adElement.innerHTML = `<span>Loading ${type} ad...</span>`;
+        container.appendChild(adElement);
+        if (this.debug) {
+            console.log(`📦 Placeholder created for slot: ${slotId} (${width} x ${height})`);
         }
-        // 다른 정보들은 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;
     }
     /**
-     * 광고 이벤트 추적 - viewability 데이터 지원
+     * 여러 광고의 최적 컨테이너 크기 계산 (동적 크기 조정)
      */
-    async trackAdvertisementEvent(adId, slotId, eventType, additionalData) {
-        try {
-            // 중복 확인은 AdsModule에서 이미 수행됨 - 여기서는 제거
-            // 현재 슬롯 정보 가져오기
-            const slot = this.slots.get(slotId);
-            // 디바이스 정보 수집
-            const deviceInfo = DeviceInfoCollector.collectDeviceInfo();
-            // 광고 이벤트 데이터 구성 (DTO 구조에 맞춤)
-            const eventData = {
-                // 서버에서 자동 설정: orgId, advertisementId, action
-                // 하지만 DTO 검증을 위해 임시값 제공
-                orgId: 'temp', // 서버에서 API 키로부터 덮어씀
-                advertisementId: adId, // 서버에서 URL 파라미터로부터 덮어씀
-                action: eventType, // 서버에서 URL 파라미터로부터 덮어씀
-                // 필수 필드들
-                adType: slot?.adType || 'BANNER',
-                platform: deviceInfo.platform,
-                // 디바이스 정보 - 스키마에 맞게 최상위 레벨로 추출
-                deviceId: deviceInfo.deviceId,
-                osVersion: deviceInfo.osVersion,
-                deviceModel: deviceInfo.deviceModel,
-                appVersion: deviceInfo.appVersion,
-                sdkVersion: deviceInfo.sdkVersion,
-                language: deviceInfo.language,
-                country: deviceInfo.country,
-                timezone: deviceInfo.timezone,
-                viewportWidth: deviceInfo.viewportWidth,
-                viewportHeight: deviceInfo.viewportHeight,
-                screenWidth: deviceInfo.screenWidth,
-                screenHeight: deviceInfo.screenHeight,
-                connectionType: deviceInfo.connectionType,
-                // 페이지 및 슬롯 정보
-                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: '1.0.0',
-                    timestamp: Date.now(),
-                },
-                // viewable 관련 추가 데이터 (DTO 필드명과 매칭)
-                ...(additionalData?.viewabilityMetrics && {
-                    isViewable: additionalData.viewabilityMetrics.isViewable,
-                    exposureTime: additionalData.viewabilityMetrics.exposureTime,
-                    maxVisibilityRatio: additionalData.viewabilityMetrics.maxVisibilityRatio,
-                    firstViewableTime: additionalData.viewabilityMetrics.firstViewableTime,
-                    // IAB 표준 준수 여부
-                    iabCompliant: additionalData.viewabilityMetrics.isViewable,
-                }),
-                // fraud 관련 데이터 (DTO 필드명과 매칭)
-                ...(additionalData?.fraudScore !== undefined && {
-                    fraudScore: additionalData.fraudScore,
-                    fraudReasons: additionalData.fraudReasons,
-                    riskLevel: additionalData.riskLevel,
-                }),
+    async calculateOptimalContainerSize(advertisements, containerWidth, adType) {
+        if (!advertisements.length || adType !== AdType.BANNER) {
+            return {
+                width: '100%',
+                height: this.getDefaultHeightForAdType(adType) || '250px',
+                aspectRatio: 16 / 9
             };
-            await fetch(`${this.baseUrl}/advertisements/events/${adId}/${eventType}`, {
-                method: 'POST',
-                headers: ApiHeaders.createForEvents(this.apiKey, eventData),
-                body: JSON.stringify(eventData),
-            });
+        }
+        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.getDefaultHeightForAdType(adType) || '250px',
+                    aspectRatio: 16 / 9
+                };
+            }
+            const strategy = this.selectOptimalSizeStrategy(validDimensions);
+            const optimalHeight = this.calculateOptimalHeight(validDimensions, containerWidth, strategy);
             if (this.debug) {
-                console.log(`Tracked advertisement event: ${eventType} for ad ${adId}`, eventData);
+                console.log(`📐 Optimal container calculated: ${containerWidth}x${optimalHeight} (strategy: ${strategy})`);
             }
+            return {
+                width: '100%',
+                height: `${optimalHeight}px`,
+                aspectRatio: containerWidth / optimalHeight
+            };
         }
         catch (error) {
-            console.error('Failed to track advertisement event:', error);
+            console.warn('Failed to calculate optimal size, using defaults:', error);
+            return {
+                width: '100%',
+                height: this.getDefaultHeightForAdType(adType) || '250px',
+                aspectRatio: 16 / 9
+            };
         }
     }
     /**
-     * 크기 값을 숫자로 변환 (서버 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;
+    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';
         }
-        return 0; // 기본값
-    }
-}
-
-/**
- * IAB 표준 준수 viewable impression 측정
- */
-// 광고 타입별 IAB 표준 설정
-const VIEWABILITY_STANDARDS = {
-    BANNER: {
-        threshold: 0.5,
-        minDuration: 1000,
-        maxMeasureTime: 30000
-    },
-    VIDEO: {
-        threshold: 0.5,
-        minDuration: 2000,
-        maxMeasureTime: 60000
-    },
-    NATIVE: {
-        threshold: 0.5,
-        minDuration: 1000,
-        maxMeasureTime: 30000
-    },
-    INTERSTITIAL: {
-        threshold: 0.5,
-        minDuration: 1000,
-        maxMeasureTime: 10000
-    },
-    TEXT: {
-        threshold: 0.5,
-        minDuration: 1000,
-        maxMeasureTime: 30000
-    },
-    POPUP: {
-        threshold: 0.5,
-        minDuration: 1000,
-        maxMeasureTime: 10000
-    }
-};
-class ViewabilityTracker {
-    constructor(element, adType, onViewable) {
-        this.observer = null;
-        this.viewabilityTimer = null;
-        this.maxVisibilityTimer = null;
-        this.startTime = 0;
-        this.maxVisibilityRatio = 0;
-        this.firstViewableTime = null;
-        this.isViewableAchieved = false;
-        this.element = element;
-        this.config = VIEWABILITY_STANDARDS[adType] || VIEWABILITY_STANDARDS.BANNER;
-        this.onViewableCallback = onViewable;
-        this.startTime = performance.now();
-        this.initIntersectionObserver();
-        this.initMaxMeasureTimer();
-    }
-    initIntersectionObserver() {
-        // IntersectionObserver 지원 확인
-        if (!('IntersectionObserver' in window)) {
-            console.warn('IntersectionObserver not supported, viewability tracking disabled');
-            return;
+        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';
         }
-        this.observer = new IntersectionObserver((entries) => this.handleIntersection(entries), {
-            threshold: [0, 0.1, 0.25, 0.5, 0.75, 1.0],
-            rootMargin: '0px'
-        });
-        this.observer.observe(this.element);
+        return 'average';
     }
-    handleIntersection(entries) {
-        entries.forEach(entry => {
-            const visibilityRatio = entry.intersectionRatio;
-            const isVisible = this.isDocumentVisible();
-            // 최대 가시성 비율 추적
-            this.maxVisibilityRatio = Math.max(this.maxVisibilityRatio, visibilityRatio);
-            // Viewable 조건 확인 (50% 이상 + 문서 가시성)
-            if (visibilityRatio >= this.config.threshold && isVisible) {
-                this.startViewabilityTimer();
+    /**
+     * 전략에 따른 최적 높이 계산
+     */
+    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);
             }
-            else {
-                this.stopViewabilityTimer();
+            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);
             }
-        });
-    }
-    isDocumentVisible() {
-        // 단순한 문서 가시성 확인
-        return !document.hidden && document.visibilityState === 'visible';
-    }
-    startViewabilityTimer() {
-        if (this.viewabilityTimer || this.isViewableAchieved)
-            return;
-        if (this.firstViewableTime === null) {
-            this.firstViewableTime = performance.now();
         }
-        this.viewabilityTimer = setTimeout(() => {
-            this.onViewabilityAchieved();
-        }, this.config.minDuration);
     }
-    stopViewabilityTimer() {
-        if (this.viewabilityTimer) {
-            clearTimeout(this.viewabilityTimer);
-            this.viewabilityTimer = null;
+    /**
+     * 배너 광고를 위한 컨테이너 최적화
+     */
+    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, slot.adType);
+            adElement.style.height = optimalSize.height;
+            slot.optimizedHeight = optimalSize.height;
+            slot.aspectRatio = optimalSize.aspectRatio;
+            if (this.debug) {
+                console.log(`🔧 Container optimized for ${advertisements.length} banner ads: ${optimalSize.height}`);
+            }
         }
-    }
-    initMaxMeasureTimer() {
-        // 최대 측정 시간 후 자동 종료
-        this.maxVisibilityTimer = setTimeout(() => {
-            this.destroy();
-        }, this.config.maxMeasureTime);
-    }
-    onViewabilityAchieved() {
-        if (this.isViewableAchieved)
-            return;
-        this.isViewableAchieved = true;
-        const metrics = this.calculateMetrics();
-        if (this.onViewableCallback) {
-            this.onViewableCallback(metrics);
+        catch (error) {
+            console.warn('Container optimization failed, using default size:', error);
         }
     }
-    calculateMetrics() {
-        const currentTime = performance.now();
-        const exposureTime = this.firstViewableTime
-            ? currentTime - this.firstViewableTime
-            : 0;
-        return {
-            isViewable: this.isViewableAchieved,
-            exposureTime,
-            maxVisibilityRatio: this.maxVisibilityRatio,
-            firstViewableTime: this.firstViewableTime,
-            measureStartTime: this.startTime,
+    /**
+     * 광고 슬라이더 렌더링 (여러 광고 또는 autoSlide 옵션)
+     */
+    async renderAdSlider(slot, advertisements) {
+        const container = document.getElementById(slot.containerId);
+        if (!container) {
+            throw new Error(`Container not found: ${slot.containerId}`);
+        }
+        const trackEventCallback = 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 {
+                    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);
+                    }
+                }
+            }
         };
-    }
-    getMetrics() {
-        return this.calculateMetrics();
-    }
-    destroy() {
-        this.stopViewabilityTimer();
-        if (this.maxVisibilityTimer) {
-            clearTimeout(this.maxVisibilityTimer);
-            this.maxVisibilityTimer = null;
+        let sliderElement;
+        const optimizedSliderOptions = {
+            autoSlideInterval: (slot.config?.slideInterval || 5000) / 1000,
+            ...slot.config,
+            optimizedHeight: slot.optimizedHeight,
+            aspectRatio: slot.aspectRatio
+        };
+        if (slot.adType === AdType.TEXT) {
+            sliderElement = TextTransitionManager.createTextTransitionContainer(slot, advertisements, optimizedSliderOptions, trackEventCallback);
+            if (this.debug) {
+                console.log(`✨ Text transition created for TEXT slot: ${slot.id} with ${advertisements.length} ads`);
+            }
         }
-        if (this.observer) {
-            this.observer.disconnect();
-            this.observer = null;
+        else {
+            sliderElement = CarouselSliderManager.createSliderContainer(slot, advertisements, optimizedSliderOptions, trackEventCallback);
+            if (this.debug) {
+                console.log(`🎠 Carousel slider created for ${slot.adType} slot: ${slot.id} with ${advertisements.length} ads (optimized: ${slot.optimizedHeight || 'default'})`);
+            }
+        }
+        container.innerHTML = '';
+        container.appendChild(sliderElement);
+        if (this.debug) {
+            console.log(`� Slider uses manual VIEWABLE event tracking for ${advertisements.length} ads`);
         }
     }
-}
-
-/**
- * BasicFraudDetector - 현실적 구현 버전
- * 기본적인 봇 탐지 및 간단한 행동 패턴 분석
- */
-class BasicFraudDetector {
-    constructor() {
-        this.mouseEvents = 0;
-        this.keyboardEvents = 0;
-        this.scrollEvents = 0;
-        this.startTime = Date.now();
-        this.initBasicTracking();
-    }
-    initBasicTracking() {
-        // 기본적인 사용자 상호작용 추적
-        document.addEventListener('mousemove', () => this.mouseEvents++, { passive: true });
-        document.addEventListener('keydown', () => this.keyboardEvents++, { passive: true });
-        document.addEventListener('scroll', () => this.scrollEvents++, { passive: true });
+    /**
+     * 광고 렌더링 (단일 광고용)
+     */
+    async renderAd(slot) {
+        if (!slot.advertisement) {
+            throw new Error('No advertisement to render');
+        }
+        await this.renderAdElement(slot, slot.advertisement);
+        slot.isLoaded = true;
     }
-    calculateFraudScore() {
-        let score = 0;
-        const reasons = [];
-        // 1. 웹드라이버 탐지 (기본)
-        if (this.detectWebDriver()) {
-            score += 50;
-            reasons.push('WebDriver detected');
+    /**
+     * 광고 요소 렌더링 (기본 구현)
+     */
+    async renderAdElement(slot, ad) {
+        const container = document.getElementById(slot.containerId);
+        if (!container)
+            return;
+        const adElement = document.createElement('div');
+        adElement.className = 'adstage-ad';
+        const optimizedHeight = slot.optimizedHeight;
+        const containerElement = container.parentElement || container;
+        if (optimizedHeight) {
+            adElement.style.width = '100%';
+            adElement.style.height = String(optimizedHeight);
         }
-        // 2. 헤드리스 브라우저 기본 탐지
-        if (this.detectBasicHeadless()) {
-            score += 40;
-            reasons.push('Headless browser signatures');
+        else {
+            const { width, height } = this.calculateAdSize(containerElement, slot.adType, slot.config || {}, { debug: this.debug }) ||
+                { width: '100%', height: '250px' };
+            adElement.style.width = width;
+            adElement.style.height = height;
         }
-        // 3. 사용자 상호작용 부족
-        const sessionTime = Date.now() - this.startTime;
-        if (sessionTime > 5000) { // 5초 이상 경과
-            if (this.mouseEvents === 0) {
-                score += 20;
-                reasons.push('No mouse interaction');
-            }
-            if (this.scrollEvents === 0 && sessionTime > 10000) {
-                score += 15;
-                reasons.push('No scroll activity');
+        switch (slot.adType) {
+            case AdType.BANNER:
+                if (ad.imageUrl) {
+                    await this.renderOptimizedBannerImage(adElement, ad, slot);
+                }
+                break;
+            case AdType.TEXT: {
+                const textDiv = document.createElement('div');
+                textDiv.innerHTML = `
+          <h3>${ad.title}</h3>
+          ${ad.description ? `<p>${ad.description}</p>` : ''}
+          ${ad.textContent ? `<div>${ad.textContent}</div>` : ''}
+        `;
+                adElement.appendChild(textDiv);
+                break;
             }
+            case AdType.VIDEO:
+                if (ad.videoUrl) {
+                    const video = document.createElement('video');
+                    video.src = ad.videoUrl;
+                    video.controls = true;
+                    video.style.width = '100%';
+                    video.style.height = '100%';
+                    adElement.appendChild(video);
+                }
+                break;
+            default:
+                adElement.innerHTML = `<div>${ad.title}</div>`;
         }
-        // 4. 브라우저 환경 이상 징후
-        const browserCheck = this.checkBrowserEnvironment();
-        score += browserCheck.score;
-        reasons.push(...browserCheck.reasons);
-        // 5. 시간 패턴 이상 (너무 빠른 페이지 로드 후 즉시 클릭)
-        if (sessionTime < 1000) {
-            score += 25;
-            reasons.push('Suspiciously fast interaction');
+        if (ad.linkUrl) {
+            adElement.style.cursor = 'pointer';
+            adElement.addEventListener('click', () => {
+                window.open(ad.linkUrl, '_blank');
+            });
         }
-        const finalScore = Math.min(score, 100);
-        return {
-            score: finalScore,
-            riskLevel: this.getRiskLevel(finalScore),
-            reasons: reasons
-        };
-    }
-    detectWebDriver() {
-        // 기본적인 웹드라이버 탐지
-        return !!(window.webdriver ||
-            navigator.webdriver ||
-            window.__webdriver_evaluate ||
-            window.__selenium_evaluate ||
-            window.__webdriver_script_function ||
-            window.__webdriver_script_func ||
-            window.__webdriver_script_fn ||
-            window.__fxdriver_evaluate ||
-            window.__driver_unwrapped ||
-            window.__webdriver_unwrapped ||
-            window.__driver_evaluate ||
-            window.__selenium_unwrapped ||
-            window.__fxdriver_unwrapped);
+        container.innerHTML = '';
+        container.appendChild(adElement);
     }
-    detectBasicHeadless() {
-        const signatures = [];
-        // PhantomJS 탐지
-        if (window._phantom || window.phantom) {
-            signatures.push('PhantomJS');
+    /**
+     * 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-banner'),
+                element.closest('.adstage-text'),
+                element.closest('.adstage-video'),
+                element.closest('.adstage-native'),
+                element.closest('.adstage-interstitial')
+            ].filter(Boolean);
+            const generalContainers = [
+                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, ...generalContainers];
+            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(`⚠️ Ad container collapsed (${containerType}): ${slot.id}`, targetContainer);
+                }
+            }
+            else {
+                this.createEmptyContainer(slot);
+            }
         }
-        // Chrome headless 기본 탐지
-        if (navigator.userAgent.includes('HeadlessChrome')) {
-            signatures.push('Chrome Headless');
+        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';
+            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 AdStage container: ${slot.id}`);
+            }
         }
-        // 플러그인 없음 (일반적이지 않음)
-        if (navigator.plugins.length === 0) {
-            signatures.push('No plugins');
+    }
+    /**
+     * 광고 타입별 기본 높이 반환
+     */
+    getDefaultHeightForAdType(type) {
+        switch (type) {
+            case AdType.BANNER:
+                return '250px'; // 일반 배너
+            case AdType.TEXT:
+                return '120px'; // 텍스트는 좀 더 작게
+            case AdType.VIDEO:
+                return '360px'; // 비디오는 16:9 비율 고려
+            case AdType.NATIVE:
+                return '200px'; // 네이티브는 중간 크기
+            case AdType.INTERSTITIAL:
+                return '400px'; // 전면광고는 크게
+            default:
+                return '250px';
         }
-        return signatures.length > 0;
     }
-    checkBrowserEnvironment() {
-        let score = 0;
-        const reasons = [];
-        // 언어 설정 이상
-        if (!navigator.language || navigator.language === 'C') {
-            score += 10;
-            reasons.push('Unusual language setting');
+    /**
+     * 컨테이너와 광고 타입에 따른 스마트한 크기 계산
+     */
+    calculateAdSize(container, type, options, config) {
+        // 사용자가 명시적으로 크기를 지정한 경우
+        const explicitWidth = options.width;
+        const explicitHeight = options.height;
+        // 너비 처리
+        let width;
+        if (typeof explicitWidth === 'number') {
+            width = `${explicitWidth}px`;
         }
-        // 쿠키 비활성화
-        if (!navigator.cookieEnabled) {
-            score += 15;
-            reasons.push('Cookies disabled');
+        else if (typeof explicitWidth === 'string') {
+            width = explicitWidth;
         }
-        // 화면 해상도 이상
-        if (screen.width === 0 || screen.height === 0) {
-            score += 20;
-            reasons.push('Invalid screen resolution');
+        else {
+            width = '100%'; // 기본값은 100%
         }
-        // 시간대 정보 없음
-        try {
-            const timezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
-            if (!timezone || timezone === 'UTC') {
-                score += 5;
-                reasons.push('No timezone info');
-            }
+        // 높이 처리 - 핵심 로직
+        let height;
+        if (typeof explicitHeight === 'number') {
+            height = `${explicitHeight}px`;
         }
-        catch (e) {
-            score += 10;
-            reasons.push('Timezone detection failed');
+        else if (typeof explicitHeight === 'string' && explicitHeight !== '100%' && explicitHeight !== 'auto') {
+            // 명시적인 크기 문자열 (예: '200px', '50vh' 등)
+            height = explicitHeight;
         }
-        return { score, reasons };
-    }
-    getRiskLevel(score) {
-        if (score >= 70)
-            return 'CRITICAL';
-        if (score >= 50)
-            return 'HIGH';
-        if (score >= 30)
-            return 'MEDIUM';
-        return 'LOW';
-    }
-    getBrowserInfo() {
-        return {
-            userAgent: navigator.userAgent,
-            language: navigator.language,
-            platform: navigator.platform,
-            cookieEnabled: navigator.cookieEnabled,
-            doNotTrack: navigator.doNotTrack,
-            timezone: Intl.DateTimeFormat().resolvedOptions().timeZone,
-            screenResolution: `${screen.width}x${screen.height}`,
-            viewportSize: `${window.innerWidth}x${window.innerHeight}`
-        };
-    }
-    destroy() {
-        // 이벤트 리스너 정리는 생략 (메모리 누수 방지를 위해 필요시 구현)
+        else {
+            // 100%, auto이거나 높이가 지정되지 않은 경우 스마트 계산
+            const containerHeight = this.getContainerHeight(container);
+            if (containerHeight > 0) {
+                // 컨테이너에 높이가 있으면 100% 사용
+                height = '100%';
+                if (config?.debug) {
+                    console.log(`📏 Using 100% height (container: ${containerHeight}px)`);
+                }
+            }
+            else {
+                // 컨테이너에 높이가 없으면 타입별 기본값 사용 (나중에 동적 조정됨)
+                height = this.getDefaultHeightForAdType(type);
+                if (config?.debug) {
+                    console.log(`📏 Using default height ${height} (will be optimized for ${type})`);
+                }
+            }
+        }
+        return { width, height };
     }
-}
-
-/**
- * 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',
-        events: '/advertisements/events'
-    },
-    /** 이벤트 관련 */
-    events: {
-        track: '/events/track',
-        batch: '/events/batch'
+    /**
+     * 컨테이너의 실제 높이 계산
+     */
+    getContainerHeight(container) {
+        // 현재 계산된 스타일에서 높이 확인
+        const computedStyle = window.getComputedStyle(container);
+        const height = parseFloat(computedStyle.height);
+        // height가 auto이거나 0이면 다른 방법들 시도
+        if (!height || height === 0) {
+            // min-height 확인
+            const minHeight = parseFloat(computedStyle.minHeight);
+            if (minHeight > 0)
+                return minHeight;
+            // CSS로 설정된 고정 높이 확인
+            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;
     }
-};
-/**
- * 완전한 API URL 생성 헬퍼
- */
-class EndpointBuilder {
-    constructor(baseUrl) {
-        /**
-         * 광고 엔드포인트
-         */
-        this.advertisements = {
-            list: () => `${this.baseUrl}${API_PATHS.advertisements.list}`,
-            events: (adId, eventType) => `${this.baseUrl}${API_PATHS.advertisements.events}/${adId}/${eventType}`
-        };
-        /**
-         * 이벤트 엔드포인트
-         */
-        this.events = {
-            track: () => `${this.baseUrl}${API_PATHS.events.track}`,
-            batch: () => `${this.baseUrl}${API_PATHS.events.batch}`
-        };
-        // 기본값은 베타 환경 사용
-        this.baseUrl = baseUrl || API_ENDPOINTS.beta;
+    /**
+     * 이미지 로드 및 실제 크기 획득 (Promise 기반)
+     */
+    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;
+        });
     }
     /**
-     * 기본 URL 변경
+     * 이미지와 컨테이너 비율을 고려한 최적화 스타일 적용
      */
-    setBaseUrl(url) {
-        this.baseUrl = url;
-        console.log('🔄 API endpoint changed:', url);
+    applyOptimizedImageStyle(img, imageAspectRatio, containerAspectRatio) {
+        const ratio = imageAspectRatio / containerAspectRatio;
+        if (Math.abs(ratio - 1) < 0.1) {
+            // 비율이 거의 같으면 cover 사용
+            img.style.objectFit = 'cover';
+            img.style.objectPosition = 'center';
+        }
+        else if (ratio > 1.3) {
+            // 이미지가 훨씬 가로형이면 contain으로 전체 보이기
+            img.style.objectFit = 'contain';
+            img.style.objectPosition = 'center';
+            img.style.backgroundColor = '#f0f0f0'; // 빈 공간 배경색
+        }
+        else if (ratio < 0.7) {
+            // 이미지가 훨씬 세로형이면 cover로 채우기
+            img.style.objectFit = 'cover';
+            img.style.objectPosition = 'center';
+        }
+        else {
+            // 적당한 차이면 스마트 cover
+            img.style.objectFit = 'cover';
+            img.style.objectPosition = 'center';
+        }
+        if (this.debug) {
+            console.log(`🎨 Image style applied: objectFit=${img.style.objectFit}, ratio=${ratio.toFixed(2)}`);
+        }
     }
     /**
-     * 기본 URL 반환
+     * 배너 이미지 최적화 렌더링
+     * 이미지 실제 크기를 로드한 후 컨테이너와 비율을 맞춤
      */
-    getBaseUrl() {
-        return this.baseUrl;
+    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 || 'Advertisement';
+        // 이미지 로딩 상태 표시
+        container.innerHTML = '<div style="display: flex; align-items: center; justify-content: center; height: 100%; color: #999;">Loading...</div>';
+        try {
+            // 이미지 URL 체크
+            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(`📸 Image dimensions: ${imageDimensions.width}x${imageDimensions.height}`);
+                console.log(`📦 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);
+            // 클릭 이벤트 등록
+            if (advertisement.linkUrl) {
+                img.style.cursor = 'pointer';
+                img.addEventListener('click', () => {
+                    if (this.advertisementEventTracker) {
+                        // AdvertisementEventTracker의 실제 메소드명을 확인해야 함
+                        console.log(`Click tracked for ad: ${advertisement._id}`);
+                    }
+                    window.open(advertisement.linkUrl, '_blank');
+                });
+            }
+            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);
+                if (advertisement.linkUrl) {
+                    img.style.cursor = 'pointer';
+                    img.addEventListener('click', () => {
+                        if (this.advertisementEventTracker) {
+                            console.log(`Click tracked for ad: ${advertisement._id}`);
+                        }
+                        window.open(advertisement.linkUrl, '_blank');
+                    });
+                }
+            }
+            return img;
+        }
     }
     /**
-     * 커스텀 경로 생성
+     * 디버그 로그 출력
      */
-    custom(path) {
-        return `${this.baseUrl}${path.startsWith('/') ? path : `/${path}`}`;
+    log(message, ...args) {
+        if (this.debug) {
+            console.log(message, ...args);
+        }
     }
-}
-/**
- * 전역 엔드포인트 빌더 인스턴스 (기본: 베타 환경)
- */
-const endpoints = new EndpointBuilder();
+}
 
 /**
  * AdStage SDK - Ads 모듈
@@ -2069,6 +2637,8 @@ class AdsModule {
         this.slots = new Map();
         // Advertisement 이벤트 추적 관련
         this.advertisementEventTracker = null;
+        // 렌더링 관련
+        this.adRenderer = null;
     }
     /**
      * Ads 모듈 초기화 (동기)
@@ -2077,6 +2647,8 @@ class AdsModule {
         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);
         this._isReady = true;
         if (config.debug) {
             console.log('🎯 Ads module initialized (sync mode)');
@@ -2226,8 +2798,8 @@ class AdsModule {
         }
         // 고유한 슬롯 ID 생성
         const slotId = `adstage-${type}-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
-        // 즉시 placeholder 생성
-        this.createAdSlot(container, slotId, type, options);
+        // 즉시 placeholder 생성 (AdRenderer 위임)
+        this.adRenderer?.createPlaceholder(container, slotId, type, options, this._config);
         // 광고 슬롯 정보 저장
         const slot = {
             id: slotId,
@@ -2243,7 +2815,7 @@ class AdsModule {
             advertisement: undefined, // 나중에 로드
             config: { type, ...options },
             load: async () => this.fetchAdData(type, options).then(ads => ads[0] || null),
-            render: (ad) => this.renderAdElement(slot, ad),
+            render: (ad) => this.adRenderer?.renderAdElement(slot, ad),
             refresh: async () => this.refreshAdSlot(slot),
             destroy: () => this.destroy(slotId)
         };
@@ -2257,293 +2829,19 @@ class AdsModule {
         }
         return slotId;
     }
-    /**
-     * 즉시 광고 슬롯 생성 (placeholder)
-     */
-    createAdSlot(container, slotId, type, options) {
-        const adElement = document.createElement('div');
-        adElement.id = slotId;
-        adElement.className = `adstage-slot adstage-${type.toLowerCase()}`;
-        // 확실한 컨테이너 식별을 위한 데이터 속성 추가
-        adElement.setAttribute('data-adstage-container', 'true');
-        adElement.setAttribute('data-adstage-type', type);
-        adElement.setAttribute('data-adstage-slot', slotId);
-        // 스마트한 크기 설정
-        const { width, height } = this.calculateAdSize(container, type, options);
-        adElement.style.width = width;
-        adElement.style.height = height;
-        adElement.style.border = '1px dashed #ccc';
-        adElement.style.display = 'flex';
-        adElement.style.alignItems = 'center';
-        adElement.style.justifyContent = 'center';
-        adElement.style.backgroundColor = '#f9f9f9';
-        adElement.style.color = '#666';
-        adElement.innerHTML = `<span>Loading ${type} ad...</span>`;
-        container.appendChild(adElement);
-        if (this._config?.debug) {
-            console.log(`📦 Placeholder created for slot: ${slotId} (${width} x ${height})`);
-        }
-    }
-    /**
-     * 컨테이너와 광고 타입에 따른 스마트한 크기 계산
-     */
-    calculateAdSize(container, type, options) {
-        // 사용자가 명시적으로 크기를 지정한 경우
-        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 (this._config?.debug) {
-                    console.log(`📏 Using 100% height (container: ${containerHeight}px)`);
-                }
-            }
-            else {
-                // 컨테이너에 높이가 없으면 타입별 기본값 사용 (나중에 동적 조정됨)
-                height = this.getDefaultHeightForAdType(type);
-                if (this._config?.debug) {
-                    console.log(`📏 Using default height ${height} (will be optimized for ${type})`);
-                }
-            }
-        }
-        return { width, height };
-    }
-    /**
-     * 컨테이너의 실제 높이 계산
-     */
-    getContainerHeight(container) {
-        // 현재 계산된 스타일에서 높이 확인
-        const computedStyle = window.getComputedStyle(container);
-        const height = parseFloat(computedStyle.height);
-        // height가 auto이거나 0이면 다른 방법들 시도
-        if (!height || height === 0) {
-            // min-height 확인
-            const minHeight = parseFloat(computedStyle.minHeight);
-            if (minHeight > 0)
-                return minHeight;
-            // CSS로 설정된 고정 높이 확인
-            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;
-    }
-    /**
-     * 광고 타입별 기본 높이 반환
-     */
-    getDefaultHeightForAdType(type) {
-        switch (type) {
-            case AdType.BANNER:
-                return '250px'; // 일반 배너
-            case AdType.TEXT:
-                return '120px'; // 텍스트는 좀 더 작게
-            case AdType.VIDEO:
-                return '360px'; // 비디오는 16:9 비율 고려
-            case AdType.NATIVE:
-                return '200px'; // 네이티브는 중간 크기
-            case AdType.INTERSTITIAL:
-                return '400px'; // 전면광고는 크게
-            default:
-                return '250px';
-        }
-    }
-    /**
-     * 이미지 크기 정보 로드 (프리로딩)
-     */
-    async 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;
-        });
-    }
+    // createAdSlot 제거: AdRenderer.createPlaceholder 사용
     /**
      * 여러 광고의 최적 컨테이너 크기 계산 (동적 크기 조정)
      */
-    async calculateOptimalContainerSize(advertisements, containerWidth, adType) {
-        if (!advertisements.length || adType !== AdType.BANNER) {
-            // 배너가 아니거나 광고가 없으면 기본값
-            return {
-                width: '100%',
-                height: this.getDefaultHeightForAdType(adType),
-                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.getDefaultHeightForAdType(adType),
-                    aspectRatio: 16 / 9
-                };
-            }
-            // 최적 전략 선택
-            const strategy = this.selectOptimalSizeStrategy(validDimensions);
-            const optimalHeight = this.calculateOptimalHeight(validDimensions, containerWidth, strategy);
-            if (this._config?.debug) {
-                console.log(`📐 Optimal container calculated: ${containerWidth}x${optimalHeight} (strategy: ${strategy})`);
-            }
-            return {
-                width: '100%',
-                height: `${optimalHeight}px`,
-                aspectRatio: containerWidth / optimalHeight
-            };
-        }
-        catch (error) {
-            console.warn('Failed to calculate optimal size, using defaults:', error);
-            return {
-                width: '100%',
-                height: this.getDefaultHeightForAdType(adType),
-                aspectRatio: 16 / 9
-            };
-        }
-    }
-    /**
-     * 최적 크기 조정 전략 선택
-     */
-    selectOptimalSizeStrategy(dimensions) {
-        const aspectRatios = dimensions.map(d => d.width / d.height);
-        // 1. 공통 비율이 있는지 확인 (±0.1 허용)
-        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;
-        // 70% 이상이 비슷한 비율이면 dominant 전략
-        if (maxGroup / totalImages >= 0.7) {
-            return 'dominant';
-        }
-        // 표준 비율들이 많으면 common 전략
-        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._config?.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);
-        }
-    }
-    /**
-     * 개별 이미지에 최적화된 렌더링 스타일 적용
-     */
-    applyOptimizedImageStyle(img, imageAspectRatio, containerAspectRatio) {
-        const ratio = imageAspectRatio / containerAspectRatio;
-        if (Math.abs(ratio - 1) < 0.1) {
-            // 비율이 거의 같으면 cover 사용
-            img.style.objectFit = 'cover';
-            img.style.objectPosition = 'center';
-        }
-        else if (ratio > 1.3) {
-            // 이미지가 훨씬 가로형이면 contain으로 전체 보이기
-            img.style.objectFit = 'contain';
-            img.style.objectPosition = 'center';
-            img.style.backgroundColor = '#f0f0f0'; // 빈 공간 배경색
-        }
-        else if (ratio < 0.7) {
-            // 이미지가 훨씬 세로형이면 cover로 채우기
-            img.style.objectFit = 'cover';
-            img.style.objectPosition = 'center';
-        }
-        else {
-            // 적당한 차이면 스마트 cover
-            img.style.objectFit = 'cover';
-            img.style.objectPosition = 'center';
-        }
-        if (this._config?.debug) {
-            console.log(`🎨 Image style applied: objectFit=${img.style.objectFit}, ratio=${ratio.toFixed(2)}`);
-        }
-    }
+    // calculateOptimalContainerSize 제거: AdRenderer.calculateOptimalContainerSize 사용
+    /**
+     * 최적 크기 조정 전략 선택
+     */
+    // selectOptimalSizeStrategy 제거: AdRenderer 내부 구현 사용
+    /**
+     * 전략에 따른 최적 높이 계산
+     */
+    // calculateOptimalHeight 제거: AdRenderer 내부 구현 사용
     /**
      * 백그라운드에서 광고 콘텐츠 로드
      */
@@ -2552,21 +2850,21 @@ class AdsModule {
             // 광고 데이터 가져오기 - 여러 개 로드
             const adstageData = await this.fetchAdData(slot.adType, slot.config);
             if (!adstageData || adstageData.length === 0) {
-                this.renderFallback(slot);
+                this.adRenderer?.renderFallback(slot);
                 return;
             }
             // 🆕 동적 크기 조정: 배너 광고의 경우 이미지 크기 기반으로 컨테이너 최적화
             if (slot.adType === AdType.BANNER && adstageData.length > 0) {
-                await this.optimizeContainerForBannerAds(slot, adstageData);
+                await this.adRenderer?.optimizeContainerForBannerAds(slot, adstageData);
             }
             // 광고가 여러 개이거나 autoSlide 옵션이 있으면 슬라이더로 렌더링
             if (adstageData.length > 1 || slot.config?.autoSlide) {
-                await this.renderAdSlider(slot, adstageData);
+                await this.adRenderer?.renderAdSlider(slot, adstageData);
             }
             else {
                 // 광고가 1개면 일반 렌더링
                 slot.advertisement = adstageData[0];
-                await this.renderAdElement(slot, adstageData[0]);
+                await this.adRenderer?.renderAdElement(slot, adstageData[0]);
                 // ✅ 신규: Viewable impression 추적 시작 (기존 즉시 추적 대신)
                 this.startBasicViewabilityTracking(slot, adstageData[0]);
             }
@@ -2577,35 +2875,13 @@ class AdsModule {
         }
         catch (error) {
             console.error(`❌ Failed to load ad for slot: ${slot.id}`, error);
-            this.renderFallback(slot);
+            this.adRenderer?.renderFallback(slot);
         }
     }
     /**
      * 배너 광고를 위한 컨테이너 최적화
      */
-    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, slot.adType);
-            // 컨테이너 크기 동적 조정
-            adElement.style.height = optimalSize.height;
-            // 슬롯 정보 업데이트
-            slot.optimizedHeight = optimalSize.height;
-            slot.aspectRatio = optimalSize.aspectRatio;
-            if (this._config?.debug) {
-                console.log(`🔧 Container optimized for ${advertisements.length} banner ads: ${optimalSize.height}`);
-            }
-        }
-        catch (error) {
-            console.warn('Container optimization failed, using default size:', error);
-        }
-    }
+    // optimizeContainerForBannerAds 제거: AdRenderer.optimizeContainerForBannerAds 사용
     /**
      * 기본 viewability 추적 시작
      */
@@ -2659,109 +2935,11 @@ class AdsModule {
     /**
      * Fallback 광고 렌더링 - AdStage 확실한 컨테이너 우선 탐지
      */
-    renderFallback(slot) {
-        const element = document.getElementById(slot.id);
-        if (element) {
-            // 1순위: AdStage가 생성한 확실한 컨테이너들 (데이터 속성 기반)
-            const adstageContainers = [
-                element.querySelector('[data-adstage-container="true"]'), // 내부 AdStage 컨테이너
-                element.closest('[data-adstage-container="true"]'), // 상위 AdStage 컨테이너
-                element, // 자기 자신이 AdStage 컨테이너인 경우
-            ].filter(el => el && el.hasAttribute('data-adstage-container'));
-            // 2순위: AdStage 클래스 기반 컨테이너들
-            const classBasedContainers = [
-                element.closest('.adstage-slot'),
-                element.closest('.adstage-banner'),
-                element.closest('.adstage-text'),
-                element.closest('.adstage-video'),
-                element.closest('.adstage-native'),
-                element.closest('.adstage-interstitial'),
-            ].filter(Boolean);
-            // 3순위: 일반적인 광고 컨테이너 패턴들 (fallback)
-            const generalContainers = [
-                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,
-                ...generalContainers
-            ];
-            // 가장 적절한 컨테이너 선택
-            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._config?.debug) {
-                    console.warn(`⚠️ Ad container collapsed (${containerType}): ${slot.id}`, targetContainer);
-                }
-            }
-            else {
-                // 컨테이너를 찾지 못한 경우 새로운 빈 컨테이너 생성
-                this.createEmptyContainer(slot);
-            }
-        }
-        // 슬롯 상태 업데이트 (제거하지 않고 빈 상태로 마킹)
-        slot.advertisement = undefined;
-        slot.isEmpty = true;
-    }
+    // renderFallback 제거: AdRenderer.renderFallback 사용
     /**
      * 빈 컨테이너 생성 (컨테이너를 찾지 못한 경우)
      */
-    createEmptyContainer(slot) {
-        const originalContainer = document.getElementById(slot.containerId);
-        if (originalContainer) {
-            // 기존 내용 제거
-            originalContainer.innerHTML = '';
-            // 빈 AdStage 컨테이너 생성
-            const emptyElement = document.createElement('div');
-            emptyElement.id = slot.id;
-            emptyElement.className = 'adstage-slot adstage-empty';
-            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._config?.debug) {
-                console.warn(`⚠️ Created empty AdStage container: ${slot.id}`);
-            }
-        }
-    }
+    // createEmptyContainer 제거: AdRenderer 내부 구현 사용
     /**
      * 광고 데이터 가져오기
      */
@@ -2804,228 +2982,15 @@ class AdsModule {
     /**
      * 광고 슬라이더 렌더링 (여러 광고 또는 autoSlide 옵션)
      */
-    async renderAdSlider(slot, advertisements) {
-        const container = document.getElementById(slot.containerId);
-        if (!container) {
-            throw new Error(`Container not found: ${slot.containerId}`);
-        }
-        // 이벤트 추적 콜백 함수 (중복 노출 방지 포함)
-        const trackEventCallback = async (adId, slotId, eventType) => {
-            // 노출 이벤트인 경우 중복 확인
-            if (eventType === AdEventType.VIEWABLE) {
-                if (ViewableEventTracker.isDuplicateViewable(adId, slotId, this._config?.debug)) {
-                    if (this._config?.debug) {
-                        console.log(`🚫 Duplicate viewable blocked for ad ${adId} in slot ${slotId}`);
-                    }
-                    return; // 중복 노출이면 추적하지 않음
-                }
-                if (this._config?.debug) {
-                    console.log(`✅ New viewable recorded for ad ${adId} in slot ${slotId}`);
-                }
-            }
-            // 실제 API 호출로 이벤트 전송
-            if (this.advertisementEventTracker) {
-                try {
-                    await this.advertisementEventTracker.trackAdvertisementEvent(adId, slotId, eventType, {} // 기본 메타데이터
-                    );
-                    if (this._config?.debug) {
-                        console.log(`📊 Advertisement event tracked: ${eventType} for ad ${adId} in slot ${slotId}`);
-                    }
-                }
-                catch (error) {
-                    if (this._config?.debug) {
-                        console.error(`❌ Failed to track ${eventType} event for ad ${adId}:`, error);
-                    }
-                }
-            }
-            // 🆕 슬라이더에서 VIEWABLE 이벤트 발생 시 해당 광고로 ViewabilityTracker 교체
-            if (eventType === AdEventType.VIEWABLE && advertisements.length > 1) {
-                const currentAd = advertisements.find(ad => ad._id === adId);
-                if (currentAd) {
-                    // 기존 ViewabilityTracker 정리
-                    if (slot.viewabilityTracker) {
-                        slot.viewabilityTracker.destroy();
-                        slot.viewabilityTracker = null;
-                    }
-                    // 현재 광고에 대해 새로운 ViewabilityTracker 시작
-                    this.startBasicViewabilityTracking(slot, currentAd);
-                    if (this._config?.debug) {
-                        console.log(`🔄 ViewabilityTracker switched to ad ${adId} in slider: ${slot.id}`);
-                    }
-                }
-            }
-        };
-        let sliderElement;
-        // 최적화된 슬라이더 옵션 준비
-        const optimizedSliderOptions = {
-            autoSlideInterval: (slot.config?.slideInterval || 5000) / 1000,
-            ...slot.config,
-            // 🆕 동적 크기 정보 전달
-            optimizedHeight: slot.optimizedHeight,
-            aspectRatio: slot.aspectRatio
-        };
-        // 텍스트 광고는 TextTransitionManager 사용, 그 외는 CarouselSliderManager 사용
-        if (slot.adType === AdType.TEXT) {
-            sliderElement = TextTransitionManager.createTextTransitionContainer(slot, advertisements, optimizedSliderOptions, trackEventCallback);
-            if (this._config?.debug) {
-                console.log(`✨ Text transition created for TEXT slot: ${slot.id} with ${advertisements.length} ads`);
-            }
-        }
-        else {
-            sliderElement = CarouselSliderManager.createSliderContainer(slot, advertisements, optimizedSliderOptions, trackEventCallback);
-            if (this._config?.debug) {
-                console.log(`🎠 Carousel slider created for ${slot.adType} slot: ${slot.id} with ${advertisements.length} ads (optimized: ${slot.optimizedHeight || 'default'})`);
-            }
-        }
-        // 기존 내용 제거하고 슬라이더 추가
-        container.innerHTML = '';
-        container.appendChild(sliderElement);
-        // ✅ 신규: 슬라이더에서도 첫 번째 광고에 대해 ViewabilityTracker 시작
-        if (advertisements.length > 0) {
-            this.startBasicViewabilityTracking(slot, advertisements[0]);
-            if (this._config?.debug) {
-                console.log(`🎯 Viewability tracking started for first ad in slider: ${slot.id}`);
-            }
-        }
-    }
+    // renderAdSlider 제거: AdRenderer.renderAdSlider 사용
     /**
      * 광고 렌더링 (단일 광고용)
      */
-    async renderAd(slot) {
-        if (!slot.advertisement) {
-            throw new Error('No advertisement to render');
-        }
-        await this.renderAdElement(slot, slot.advertisement);
-        slot.isLoaded = true;
-    }
+    // renderAd 제거: AdRenderer.renderAd 사용
     /**
      * 광고 요소 렌더링 (기본 구현)
      */
-    async renderAdElement(slot, ad) {
-        const container = document.getElementById(slot.containerId);
-        if (!container)
-            return;
-        // 기본 HTML 구조 생성
-        const adElement = document.createElement('div');
-        adElement.className = 'adstage-ad';
-        // 스마트한 크기 설정 - 최적화된 크기가 있으면 사용
-        const optimizedHeight = slot.optimizedHeight;
-        const containerElement = container.parentElement || container;
-        if (optimizedHeight) {
-            adElement.style.width = '100%';
-            adElement.style.height = optimizedHeight;
-        }
-        else {
-            const { width, height } = this.calculateAdSize(containerElement, slot.adType, slot.config || {});
-            adElement.style.width = width;
-            adElement.style.height = height;
-        }
-        // 광고 타입별 렌더링
-        switch (slot.adType) {
-            case AdType.BANNER:
-                if (ad.imageUrl) {
-                    await this.renderOptimizedBannerImage(adElement, ad, slot);
-                }
-                break;
-            case AdType.TEXT:
-                const textDiv = document.createElement('div');
-                textDiv.innerHTML = `
-          <h3>${ad.title}</h3>
-          ${ad.description ? `<p>${ad.description}</p>` : ''}
-          ${ad.textContent ? `<div>${ad.textContent}</div>` : ''}
-        `;
-                adElement.appendChild(textDiv);
-                break;
-            case AdType.VIDEO:
-                if (ad.videoUrl) {
-                    const video = document.createElement('video');
-                    video.src = ad.videoUrl;
-                    video.controls = true;
-                    video.style.width = '100%';
-                    video.style.height = '100%';
-                    adElement.appendChild(video);
-                }
-                break;
-            default:
-                adElement.innerHTML = `<div>${ad.title}</div>`;
-        }
-        // 클릭 이벤트 추가
-        if (ad.linkUrl) {
-            adElement.style.cursor = 'pointer';
-            adElement.addEventListener('click', () => {
-                window.open(ad.linkUrl, '_blank');
-            });
-        }
-        container.innerHTML = '';
-        container.appendChild(adElement);
-    }
-    /**
-     * 최적화된 배너 이미지 렌더링
-     */
-    async renderOptimizedBannerImage(adElement, ad, slot) {
-        try {
-            // 사용자가 크기를 지정했는지 확인
-            const configWidth = slot.config?.width;
-            const configHeight = slot.config?.height;
-            const hasUserDefinedWidth = configWidth &&
-                (typeof configWidth === 'number' || (typeof configWidth === 'string' && configWidth !== '100%'));
-            const hasUserDefinedHeight = configHeight &&
-                (typeof configHeight === 'number' || (typeof configHeight === 'string' && configHeight !== 'auto'));
-            const hasUserDefinedSize = hasUserDefinedWidth || hasUserDefinedHeight;
-            // 이미지 요소 생성
-            const img = document.createElement('img');
-            img.src = ad.imageUrl;
-            img.alt = ad.title;
-            if (hasUserDefinedSize) {
-                // 🎯 사용자가 크기를 지정한 경우: 컨테이너에 꽉 차도록 설정
-                img.style.width = '100%';
-                img.style.height = '100%';
-                img.style.objectFit = 'cover'; // 컨테이너에 꽉 찬 상태로 비율 유지
-                img.style.objectPosition = 'center';
-                if (this._config?.debug) {
-                    console.log(`🎯 User-defined size detected: filling container completely`);
-                }
-            }
-            else {
-                // 사용자가 크기를 지정하지 않은 경우: 동적 최적화 적용
-                const imageDimensions = await this.loadImageDimensions(ad.imageUrl);
-                const imageAspectRatio = imageDimensions.width / imageDimensions.height;
-                const containerAspectRatio = slot.aspectRatio || 16 / 9;
-                img.style.width = '100%';
-                img.style.height = '100%';
-                // 🎨 최적화된 스타일 적용
-                this.applyOptimizedImageStyle(img, imageAspectRatio, containerAspectRatio);
-                if (this._config?.debug) {
-                    console.log(`🖼️ Optimized banner image loaded: ${imageDimensions.width}x${imageDimensions.height} (ratio: ${imageAspectRatio.toFixed(2)})`);
-                }
-            }
-            // 이미지 로드 완료 처리
-            img.onload = () => {
-                if (this._config?.debug) {
-                    console.log(`✅ Banner image loaded successfully`);
-                }
-            };
-            // 에러 처리
-            img.onerror = () => {
-                console.warn(`Failed to load banner image: ${ad.imageUrl}`);
-                // 폴백 텍스트 표시
-                adElement.innerHTML = `<div style="display: flex; align-items: center; justify-content: center; background: #f0f0f0; color: #666;">${ad.title}</div>`;
-            };
-            adElement.appendChild(img);
-        }
-        catch (error) {
-            console.warn('Failed to optimize banner image, using fallback:', error);
-            // 기본 이미지 렌더링 (폴백)
-            const img = document.createElement('img');
-            img.src = ad.imageUrl;
-            img.alt = ad.title;
-            img.style.width = '100%';
-            img.style.height = '100%';
-            img.style.objectFit = 'cover';
-            img.style.objectPosition = 'center'; // 🎯 폴백 이미지도 중앙 정렬
-            adElement.appendChild(img);
-        }
-    }
+    // renderAdElement 제거: AdRenderer.renderAdElement 사용
     /**
      * 광고 슬롯 새로고침
      */
@@ -3035,7 +3000,7 @@ class AdsModule {
             const newAdData = await this.fetchAdData(slot.adType, slot.config || {});
             if (newAdData && newAdData.length > 0) {
                 slot.advertisement = newAdData[0]; // 첫 번째 광고로 업데이트
-                await this.renderAd(slot);
+                await this.adRenderer?.renderAd(slot);
                 // 새로운 노출 추적
                 if (this.advertisementEventTracker) {
                     console.log('New advertisement viewable tracked for slot:', slot.id);
@@ -3282,13 +3247,6 @@ class AdStage {
             productionMode: false,
             ...config
         };
-        // baseUrl이 설정되었으면 endpoints에 적용
-        if (config.baseUrl) {
-            endpoints.setBaseUrl(config.baseUrl);
-            if (config.debug) {
-                console.log('🔄 API base URL set to:', config.baseUrl);
-            }
-        }
         // 모듈 동기 초기화
         const enabledModules = instance._config.modules || ['ads', 'events', 'config'];
         for (const moduleName of enabledModules) {
@@ -3351,82 +3309,6 @@ class AdStage {
     }
 }
 
-const AdStageContext = createContext(null);
-function AdStageProvider({ children, config }) {
-    const [isInitialized, setIsInitialized] = useState(false);
-    const [currentConfig, setCurrentConfig] = useState(null);
-    const [error, setError] = 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);
-        }
-    };
-    // 자동 초기화
-    useEffect(() => {
-        if (config && !isInitialized) {
-            initialize(config);
-        }
-    }, [config, isInitialized]);
-    const contextValue = {
-        isInitialized,
-        config: currentConfig,
-        initialize,
-        reset,
-        error
-    };
-    return (jsx(AdStageContext.Provider, { value: contextValue, children: children }));
-}
-/**
- * AdStage Context Hook
- * AdStageProvider 내에서 SDK 상태에 접근할 수 있습니다.
- */
-function useAdStage() {
-    const context = useContext(AdStageContext);
-    if (!context) {
-        throw new Error('useAdStage must be used within an AdStageProvider');
-    }
-    return context;
-}
-/**
- * AdStage SDK Hook
- * 초기화된 AdStage 인스턴스에 직접 접근할 수 있습니다.
- */
-function useAdStageSDK() {
-    const { isInitialized } = useAdStage();
-    if (!isInitialized) {
-        throw new Error('AdStage SDK is not initialized. Please call initialize() first or provide config to AdStageProvider.');
-    }
-    return AdStage;
-}
-
 /**
  * AdStage Web SDK
  * 네임스페이스 아키텍처 기반 SDK
@@ -3436,4 +3318,4 @@ function useAdStageSDK() {
 const SDK_VERSION = '2.0.0';
 const SUPPORTED_MODULES = ['ads', 'events', 'config'];
 
-export { AdStage, AdStageProvider, SDK_VERSION, SUPPORTED_MODULES, useAdStage, useAdStageSDK };
+export { AdStage, SDK_VERSION, SUPPORTED_MODULES };