(function() {
            const colors = {
                'window.innerHeight': '#FF5733',
                'document.documentElement.clientHeight': '#33FF57',
                'document.documentElement.offsetHeight': '#3357FF',
                'document.documentElement.scrollHeight': '#FF33F1',
                'window.screen.height': '#33FFF1',
                'window.screen.availHeight': '#F1FF33',
                'window.outerHeight': '#FF8333',
                '100vh in pixels': '#8333FF',
                'Estimated mobile usable height': '#33FF99'
            };

            function createComparisonContainer() {
                const container = document.createElement('div');
                container.style.cssText = `
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            pointer-events: none;
            z-index: 9999;
        `;
                document.body.appendChild(container);
                return container;
            }

            function createHeightIndicator(height, color, label) {
                const indicator = document.createElement('div');
                indicator.style.cssText = `
            position: absolute;
            left: 0;
            width: 100%;
            height: 2px;
            background-color: ${color};
        `;
                indicator.style.top = `${height}px`;

                const labelElement = document.createElement('div');
                labelElement.style.cssText = `
            position: absolute;
            left: 5px;
            top: 2px;
            background-color: rgba(0, 0, 0, 0.7);
            color: ${color};
            padding: 2px 5px;
            font-size: 10px;
            font-family: monospace;
            white-space: nowrap;
        `;
                labelElement.textContent = `${label}: ${height}px`;
                indicator.appendChild(labelElement);

                return indicator;
            }

            const comparisonContainer = createComparisonContainer();
            const debugBox = document.createElement('div');
            debugBox.style.cssText = `
        position: fixed;
        top: 10px;
        left: 10px;
        background-color: rgba(0, 0, 0, 0.7);
        color: white;
        padding: 10px;
        border-radius: 5px;
        font-family: monospace;
        font-size: 12px;
        z-index: 10000;
        max-width: 300px;
        overflow-y: auto;
        max-height: 80vh;
    `;
            document.body.appendChild(debugBox);

            function getDeviceInfo() {
                const ua = navigator.userAgent;
                const platform = navigator.platform;
                const screenWidth = window.screen.width;
                const screenHeight = window.screen.height;
                const pixelRatio = window.devicePixelRatio;

                let deviceInfo = '';
                let browserInfo = '';

                // 기기 정보 탐지
                if (/iPhone/.test(ua)) {
                    deviceInfo = 'iPhone';
                } else if (/iPad/.test(ua)) {
                    deviceInfo = 'iPad';
                } else if (/Android/.test(ua)) {
                    deviceInfo = 'Android Device';
                } else if (/Mac/.test(platform)) {
                    deviceInfo = 'Mac';
                } else if (/Win/.test(platform)) {
                    deviceInfo = 'Windows';
                } else if (/Linux/.test(platform)) {
                    deviceInfo = 'Linux';
                } else {
                    deviceInfo = 'Unknown Device';
                }

                // 브라우저 정보 탐지
                if (/Chrome/.test(ua)) {
                    browserInfo = 'Chrome';
                } else if (/Firefox/.test(ua)) {
                    browserInfo = 'Firefox';
                } else if (/Safari/.test(ua)) {
                    browserInfo = 'Safari';
                } else if (/Edge/.test(ua)) {
                    browserInfo = 'Edge';
                } else if (/Opera|OPR/.test(ua)) {
                    browserInfo = 'Opera';
                } else {
                    browserInfo = 'Unknown Browser';
                }

                return {
                    device: deviceInfo,
                    browser: browserInfo,
                    screenWidth,
                    screenHeight,
                    pixelRatio
                };
            }

            function updateHeights() {
                const heights = {
                    'window.innerHeight': window.innerHeight,
                    'document.documentElement.clientHeight': document.documentElement.clientHeight,
                    'document.documentElement.offsetHeight': document.documentElement.offsetHeight,
                    // 'document.documentElement.scrollHeight': document.documentElement.scrollHeight,
                    'window.screen.height': window.screen.height,
                    'window.screen.availHeight': window.screen.availHeight,
                    'window.outerHeight': window.outerHeight,
                    '100vh in pixels': Math.max(document.documentElement.clientHeight, window.innerHeight || 0),
                    'Estimated mobile usable height': ('standalone' in window.navigator && window.navigator.standalone)
                        ? screen.height : window.innerHeight
                };

                comparisonContainer.innerHTML = '';
                let html = 'Device Information:
';

                const deviceInfo = getDeviceInfo();
                html += `Device: ${deviceInfo.device}
`;
                html += `Browser: ${deviceInfo.browser}
`;
                html += `Screen Resolution: ${deviceInfo.screenWidth}x${deviceInfo.screenHeight}
`;
                html += `Pixel Ratio: ${deviceInfo.pixelRatio}

`;

                html += 'Height Measurements:
';

                for (const [key, value] of Object.entries(heights)) {
                    const color = colors[key];
                    html += `${key}: ${value}px
`;
                    comparisonContainer.appendChild(createHeightIndicator(value, color, key));
                }

                html += `
Window Size:
`;
                html += `Width: ${window.innerWidth}px
`;
                html += `Height: ${window.innerHeight}px
`;

                html += `
Last updated: ${new Date().toLocaleTimeString()}`;
                debugBox.innerHTML = html;
                console.log('Heights updated:', heights);
            }

            // 초기 업데이트
            updateHeights();

            // 이벤트 리스너
            const events = ['resize', 'scroll', 'orientationchange', 'touchmove'];
            events.forEach(event => {
                window.addEventListener(event, () => {
                    console.log(`${event} event triggered`);
                    updateHeights();
                });
            });

            // 방향 변경 이벤트는 약간의 지연 후 업데이트
            window.addEventListener('orientationchange', () => {
                setTimeout(updateHeights, 100);
            });

            // 페이지 전체 로드 후 한 번 더 체크
            window.addEventListener('load', () => {
                console.log('Page fully loaded');
                updateHeights();
            });
        })();