.. 제목: 내 IP 주소는 무엇입니까
.. 슬러그: 내 IP가 뭐죠?
.. 날짜: 2026-01-24 10:00:00 UTC
.. 태그: 네트워킹, IP 주소, 위치정보, 개인 정보 보호, 보안, 도구
.. 카테고리: 이더넷 및 IP 도구
.. 링크:
.. 설명: 공용 IPv4 및 IPv6 주소, 지리적 위치, ISP 세부 정보, VPN/프록시 감지 및 IP 평판 정보를 검색하세요.
.. 유형: 텍스트
<link href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" rel="stylesheet"/>
<style>
    .ip-container {
        max-width: 1200px;
        margin: 20px auto;
        padding: 20px;
    }

    .tool-header {
        margin-bottom: 30px;
        padding: 25px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        border-radius: 12px;
        box-shadow: 0 4px 6px rgba(0,0,0,0.1);
        color: white;
    }

    .tool-header h2 {
        margin-top: 0;
        color: white;
        font-size: 28px;
        margin-bottom: 10px;
    }

    .tool-header p {
        margin: 10px 0 0 0;
        opacity: 0.95;
        font-size: 15px;
        line-height: 1.6;
    }

    .ip-display-section {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 20px;
        margin-bottom: 20px;
    }

    .ip-card {
        background: white;
        border-radius: 12px;
        padding: 25px;
        box-shadow: 0 4px 6px rgba(0,0,0,0.1);
        text-align: center;
        position: relative;
        overflow: hidden;
    }

    .ip-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 4px;
    }

    .ip-card.ipv4::before {
        background: linear-gradient(90deg, #4CAF50, #8BC34A);
    }

    .ip-card.ipv6::before {
        background: linear-gradient(90deg, #2196F3, #03A9F4);
    }

    .ip-card .ip-label {
        font-size: 14px;
        color: #666;
        text-transform: uppercase;
        letter-spacing: 1px;
        margin-bottom: 10px;
    }

    .ip-card .ip-value {
        font-family: 'Courier New', monospace;
        font-size: 24px;
        font-weight: bold;
        color: #333;
        word-break: break-all;
        margin-bottom: 15px;
        min-height: 36px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .ip-card .ip-value.loading {
        color: #999;
        font-size: 16px;
    }

    .ip-card .ip-value.error {
        color: #f44336;
        font-size: 14px;
    }

    .ip-card .ip-value.unavailable {
        color: #999;
        font-size: 14px;
        font-style: italic;
    }

    .copy-btn {
        padding: 8px 20px;
        background: #667eea;
        color: white;
        border: none;
        border-radius: 6px;
        cursor: pointer;
        font-size: 14px;
        transition: all 0.3s ease;
    }

    .copy-btn:hover {
        background: #5a6fd6;
        transform: translateY(-1px);
    }

    .copy-btn:disabled {
        background: #ccc;
        cursor: not-allowed;
        transform: none;
    }

    .copy-btn.copied {
        background: #4CAF50;
    }

    .section-card {
        background: white;
        border-radius: 12px;
        margin-bottom: 20px;
        box-shadow: 0 4px 6px rgba(0,0,0,0.1);
        overflow: hidden;
    }

    .section-header {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        padding: 15px 20px;
        font-weight: bold;
        font-size: 18px;
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .section-header .icon {
        font-size: 20px;
    }

    .section-content {
        padding: 20px;
    }

    .info-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: 15px;
    }

    .info-item {
        display: flex;
        flex-direction: column;
        padding: 12px 15px;
        background: #f8f9fa;
        border-radius: 8px;
        border-left: 4px solid #667eea;
    }

    .info-item .label {
        font-size: 12px;
        color: #666;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        margin-bottom: 5px;
    }

    .info-item .value {
        font-size: 16px;
        color: #333;
        font-weight: 500;
        word-break: break-word;
    }

    .info-item .value.mono {
        font-family: 'Courier New', monospace;
    }

    #locationMap {
        width: 100%;
        height: 350px;
        border-radius: 8px;
        margin-bottom: 20px;
        z-index: 1;
    }

    .status-badge {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 6px 12px;
        border-radius: 20px;
        font-size: 13px;
        font-weight: 600;
    }

    .status-badge.safe {
        background: #e8f5e9;
        color: #2e7d32;
    }

    .status-badge.warning {
        background: #fff3e0;
        color: #ef6c00;
    }

    .status-badge.danger {
        background: #ffebee;
        color: #c62828;
    }

    .status-badge.info {
        background: #e3f2fd;
        color: #1565c0;
    }

    .status-badge .dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: currentColor;
    }

    .privacy-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 15px;
        margin-bottom: 20px;
    }

    .privacy-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 15px;
        background: #f8f9fa;
        border-radius: 8px;
    }

    .privacy-item .label {
        font-weight: 500;
        color: #333;
    }

    .reputation-alert {
        padding: 15px 20px;
        border-radius: 8px;
        margin-top: 15px;
        display: flex;
        align-items: flex-start;
        gap: 15px;
    }

    .reputation-alert.clean {
        background: #e8f5e9;
        border: 1px solid #81c784;
    }

    .reputation-alert.warning {
        background: #fff3e0;
        border: 1px solid #ffb74d;
    }

    .reputation-alert.danger {
        background: #ffebee;
        border: 1px solid #ef9a9a;
    }

    .reputation-alert .alert-icon {
        font-size: 24px;
        flex-shrink: 0;
    }

    .reputation-alert .alert-content h4 {
        margin: 0 0 5px 0;
        font-size: 16px;
    }

    .reputation-alert .alert-content p {
        margin: 0;
        font-size: 14px;
        color: #666;
    }

    .device-table {
        width: 100%;
        border-collapse: collapse;
    }

    .device-table th,
    .device-table td {
        padding: 12px 15px;
        text-align: left;
        border-bottom: 1px solid #eee;
    }

    .device-table th {
        background: #f8f9fa;
        font-weight: 600;
        color: #555;
        font-size: 13px;
        text-transform: uppercase;
        width: 40%;
    }

    .device-table td {
        font-family: 'Courier New', monospace;
        color: #333;
    }

    .device-table tr:last-child td,
    .device-table tr:last-child th {
        border-bottom: none;
    }

    .referrer-section {
        background: #e3f2fd;
        border: 1px solid #90caf9;
        border-radius: 8px;
        padding: 15px 20px;
        display: none;
    }

    .referrer-section.show {
        display: block;
    }

    .referrer-section .label {
        font-size: 13px;
        color: #1565c0;
        margin-bottom: 5px;
    }

    .referrer-section .value {
        font-family: 'Courier New', monospace;
        color: #0d47a1;
        word-break: break-all;
    }

    .refresh-btn {
        position: fixed;
        bottom: 30px;
        right: 30px;
        width: 56px;
        height: 56px;
        border-radius: 50%;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        border: none;
        cursor: pointer;
        box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
        font-size: 24px;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.3s ease;
        z-index: 1000;
    }

    .refresh-btn:hover {
        transform: scale(1.1);
        box-shadow: 0 6px 16px rgba(102, 126, 234, 0.5);
    }

    .refresh-btn.spinning {
        animation: spin 1s linear infinite;
    }

    @keyframes spin {
        from { transform: rotate(0deg); }
        to { transform: rotate(360deg); }
    }

    .skeleton {
        background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
        background-size: 200% 100%;
        animation: skeleton-loading 1.5s infinite;
        border-radius: 4px;
        height: 20px;
    }

    @keyframes skeleton-loading {
        0% { background-position: 200% 0; }
        100% { background-position: -200% 0; }
    }

    .accuracy-note {
        background: #fff8e1;
        border: 1px solid #ffca28;
        border-radius: 6px;
        padding: 10px 15px;
        font-size: 13px;
        color: #f57f17;
        margin-top: 15px;
    }

    @media (max-width: 768px) {
        .ip-display-section {
            grid-template-columns: 1fr;
        }

        .ip-card .ip-value {
            font-size: 18px;
        }

        .info-grid {
            grid-template-columns: 1fr;
        }

        .privacy-grid {
            grid-template-columns: 1fr;
        }

        #locationMap {
            height: 250px;
        }

        .refresh-btn {
            bottom: 20px;
            right: 20px;
            width: 48px;
            height: 48px;
            font-size: 20px;
        }
    }
</style>
<div class="ip-container">
<div class="tool-header">
<h2>내 IP 주소는 무엇입니까?</h2>
<p>공용 IP 주소, 지리적 위치, ISP 정보, 개인 정보 보호 상태 및 장치 세부 정보를 확인하세요. 모든 조회는 개인정보 보호를 위해 클라이언트 측에서 수행됩니다.</p>
</div>
IP 주소 표시
<div class="ip-display-section">
<div class="ip-card ipv4">
<div class="ip-label">IPv4 주소</div>
<div class="ip-value loading" id="ipv4Value">감지 중...</div>
<button class="copy-btn" disabled="" id="copyIpv4Btn" onclick="copyToClipboard('ipv4')">복사</button>
</div>
<div class="ip-card ipv6">
<div class="ip-label">IPv6 주소</div>
<div class="ip-value loading" id="ipv6Value">감지 중...</div>
<button class="copy-btn" disabled="" id="copyIpv6Btn" onclick="copyToClipboard('ipv6')">복사</button>
</div>
</div>
추천인 섹션
<div class="referrer-section" id="referrerSection">
<div class="label">도착지:</div>
<div class="value" id="referrerValue"></div>
</div>
위치 지도
<div class="section-card">
<div class="section-header">
<span class="icon">🌎</span>지리적 위치</div>
<div class="section-content">
<div id="locationMap"></div>
<div class="info-grid" id="locationInfo">
<div class="info-item">
<span class="label">도시</span>
<span class="value" id="geoCity"><div class="skeleton"></div></span>
</div>
<div class="info-item">
<span class="label">지역</span>
<span class="value" id="geoRegion"><div class="skeleton"></div></span>
</div>
<div class="info-item">
<span class="label">국가</span>
<span class="value" id="geoCountry"><div class="skeleton"></div></span>
</div>
<div class="info-item">
<span class="label">좌표</span>
<span class="value mono" id="geoCoords"><div class="skeleton"></div></span>
</div>
<div class="info-item">
<span class="label">시간대</span>
<span class="value" id="geoTimezone"><div class="skeleton"></div></span>
</div>
<div class="info-item">
<span class="label">우편번호</span>
<span class="value" id="geoZip"><div class="skeleton"></div></span>
</div>
</div>
<div class="accuracy-note">
<strong>메모:</strong>지리적 위치는 대략적이며 IP 데이터베이스 기록을 기반으로 합니다. 정확도는 ISP에 따라 다르며 특히 모바일 또는 CGNAT 연결의 경우 정확한 위치가 아닌 ISP의 지역 허브가 표시될 수 있습니다.</div>
</div>
</div>
ISP 및 네트워크 데이터
<div class="section-card">
<div class="section-header">
<span class="icon">📡</span>ISP 및 네트워크 정보</div>
<div class="section-content">
<div class="info-grid" id="ispInfo">
<div class="info-item">
<span class="label">ISP/통신사</span>
<span class="value" id="ispName"><div class="skeleton"></div></span>
</div>
<div class="info-item">
<span class="label">조직</span>
<span class="value" id="ispOrg"><div class="skeleton"></div></span>
</div>
<div class="info-item">
<span class="label">AS번호</span>
<span class="value mono" id="ispAsn"><div class="skeleton"></div></span>
</div>
<div class="info-item">
<span class="label">연결 유형</span>
<span class="value" id="connectionType"><div class="skeleton"></div></span>
</div>
</div>
</div>
</div>
안전 및 개인 정보 보호 통찰력
<div class="section-card">
<div class="section-header">
<span class="icon">🔒</span>안전 및 개인 정보 보호 통찰력</div>
<div class="section-content">
<div class="privacy-grid" id="privacyGrid">
<div class="privacy-item">
<span class="label">VPN / 프록시</span>
<span id="vpnStatus"><div class="skeleton" style="width: 80px;"></div></span>
</div>
<div class="privacy-item">
<span class="label">호스팅/데이터센터</span>
<span id="hostingStatus"><div class="skeleton" style="width: 80px;"></div></span>
</div>
<div class="privacy-item">
<span class="label">모바일 연결</span>
<span id="mobileStatus"><div class="skeleton" style="width: 80px;"></div></span>
</div>
</div>
<div id="reputationAlert">
평판 경고가 여기에 삽입됩니다.
</div>
</div>
</div>
브라우저 및 장치 컨텍스트
<div class="section-card">
<div class="section-header">
<span class="icon">💻</span>브라우저 및 장치 정보</div>
<div class="section-content">
<table class="device-table">
<tr>
<th>운영 체제</th>
<td id="deviceOS">-</td>
</tr>
<tr>
<th>브라우저</th>
<td id="deviceBrowser">-</td>
</tr>
<tr>
<th>화면 해상도</th>
<td id="deviceScreen">-</td>
</tr>
<tr>
<th>장치 픽셀 비율</th>
<td id="deviceDPR">-</td>
</tr>
<tr>
<th>CPU 스레드</th>
<td id="deviceCPU">-</td>
</tr>
<tr>
<th>예상 RAM</th>
<td id="deviceRAM">-</td>
</tr>
<tr>
<th>언어 기본 설정</th>
<td id="deviceLang">-</td>
</tr>
<tr>
<th>연결 유형</th>
<td id="deviceConnection">-</td>
</tr>
<tr>
<th>터치 지원</th>
<td id="deviceTouch">-</td>
</tr>
<tr>
<th>쿠키 활성화됨</th>
<td id="deviceCookies">-</td>
</tr>
</table>
</div>
</div>
</div>
<button class="refresh-btn" id="refreshBtn" onclick="refreshAll()" title="Refresh all data">↻</button>
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
<script>
'use strict';

/**
 * What's My IP - Complete IP information tool
 * Uses local hierarchical data files for geo/ASN lookups (same as BGP lookup tool)
 */

let map = null;
let marker = null;
let currentIPv4 = null;
let currentIPv6 = null;
let lookupData = null;

// Configuration for data paths (same as BGP lookup tool)
const CONFIG = {
    ipv4Path: '/data/ipv4',
    ipv6Path: '/data/ipv6'
};

// Data cache for hierarchical files
const dataCache = new Map();

/**
 * Initialize on page load
 */
document.addEventListener('DOMContentLoaded', function() {
    detectDeviceInfo();
    checkReferrer();
    detectIPAddresses();
});

/**
 * Refresh all data
 */
async function refreshAll() {
    const btn = document.getElementById('refreshBtn');
    btn.classList.add('spinning');

    // Reset displays
    resetDisplays();

    // Re-detect everything
    await detectIPAddresses();

    btn.classList.remove('spinning');
}

/**
 * Reset all display fields to loading state
 */
function resetDisplays() {
    document.getElementById('ipv4Value').className = 'ip-value loading';
    document.getElementById('ipv4Value').textContent = 'Detecting...';
    document.getElementById('ipv6Value').className = 'ip-value loading';
    document.getElementById('ipv6Value').textContent = 'Detecting...';
    document.getElementById('copyIpv4Btn').disabled = true;
    document.getElementById('copyIpv6Btn').disabled = true;

    // Reset geo info
    ['geoCity', 'geoRegion', 'geoCountry', 'geoCoords', 'geoTimezone', 'geoZip'].forEach(id => {
        document.getElementById(id).innerHTML = '<div class="skeleton"></div>';
    });

    // Reset ISP info
    ['ispName', 'ispOrg', 'ispAsn', 'connectionType'].forEach(id => {
        document.getElementById(id).innerHTML = '<div class="skeleton"></div>';
    });

    // Reset privacy info
    ['vpnStatus', 'hostingStatus', 'mobileStatus'].forEach(id => {
        document.getElementById(id).innerHTML = '<div class="skeleton" style="width: 80px;"></div>';
    });

    document.getElementById('reputationAlert').innerHTML = '';
}

// ============================================================================
// IP Conversion Utilities (from BGP lookup tool)
// ============================================================================

/**
 * Convert IPv4 address to 32-bit unsigned integer
 */
function ipv4ToInt(ip) {
    const parts = ip.split('.');
    return (parseInt(parts[0]) << 24 |
            parseInt(parts[1]) << 16 |
            parseInt(parts[2]) << 8 |
            parseInt(parts[3])) >>> 0;
}

/**
 * Normalize IPv6 address to full canonical form
 */
function normalizeIPv6(ip) {
    ip = ip.trim();

    // Handle IPv4-mapped IPv6 addresses
    const ipv4MappedMatch = ip.match(/^::ffff:(\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3})$/i);
    if (ipv4MappedMatch) {
        const ipv4 = ipv4MappedMatch[1];
        const ipv4Parts = ipv4.split('.');
        if (ipv4Parts.every(p => {
            const num = parseInt(p, 10);
            return num >= 0 && num <= 255;
        })) {
            const hex1 = (parseInt(ipv4Parts[0]) * 256 + parseInt(ipv4Parts[1])).toString(16).padStart(4, '0');
            const hex2 = (parseInt(ipv4Parts[2]) * 256 + parseInt(ipv4Parts[3])).toString(16).padStart(4, '0');
            return `0000:0000:0000:0000:0000:ffff:${hex1}:${hex2}`;
        }
        return null;
    }

    // Handle :: compression
    if (ip.indexOf('::') !== -1) {
        if ((ip.match(/::/g) || []).length > 1) {
            return null;
        }

        let beforeDouble = '';
        let afterDouble = '';

        if (ip.startsWith('::')) {
            afterDouble = ip.substring(2);
        } else if (ip.endsWith('::')) {
            beforeDouble = ip.substring(0, ip.length - 2);
        } else {
            const doubleSplit = ip.split('::');
            beforeDouble = doubleSplit[0];
            afterDouble = doubleSplit[1];
        }

        const beforeGroups = beforeDouble ? beforeDouble.split(':').filter(g => g !== '') : [];
        const afterGroups = afterDouble ? afterDouble.split(':').filter(g => g !== '') : [];

        const existingGroups = beforeGroups.length + afterGroups.length;
        if (existingGroups > 7) {
            return null;
        }

        const zeroGroups = 8 - existingGroups;
        const allGroups = [
            ...beforeGroups,
            ...Array(zeroGroups).fill('0'),
            ...afterGroups
        ];

        if (allGroups.length !== 8) {
            return null;
        }

        const normalized = allGroups.map(group => {
            if (!/^[0-9a-fA-F]{1,4}$/.test(group)) {
                return null;
            }
            return group.padStart(4, '0');
        });

        if (normalized.includes(null)) {
            return null;
        }

        return normalized.join(':');
    } else {
        const parts = ip.split(':');
        if (parts.length !== 8) {
            return null;
        }

        const normalized = parts.map(part => {
            if (!/^[0-9a-fA-F]{1,4}$/.test(part)) {
                return null;
            }
            return part.padStart(4, '0');
        });

        if (normalized.includes(null)) {
            return null;
        }

        return normalized.join(':');
    }
}

/**
 * Convert IPv6 address to 128-bit BigInt
 */
function ipv6ToBigInt(ip) {
    const normalized = normalizeIPv6(ip);
    if (!normalized) {
        throw new Error('Invalid IPv6 address');
    }
    const hexString = normalized.replace(/:/g, '');
    return BigInt('0x' + hexString);
}

/**
 * Extract prefix length from CIDR notation
 */
function getPrefixLength(prefix) {
    if (!prefix || typeof prefix !== 'string') return 0;
    const match = prefix.match(/\/(\d+)$/);
    return match ? parseInt(match[1], 10) : 0;
}

/**
 * Find matching IP ranges and select most specific
 */
function findMatchingRange(ipInt, ranges) {
    if (!ranges || ranges.length === 0) {
        return null;
    }

    const isBigInt = typeof ipInt === 'bigint';
    const matchingRanges = [];

    for (let i = 0; i < ranges.length; i++) {
        const range = ranges[i];
        const rangeStart = isBigInt ? BigInt(range.start) : range.start;
        const rangeEnd = isBigInt ? BigInt(range.end) : range.end;

        if (ipInt >= rangeStart && ipInt <= rangeEnd) {
            matchingRanges.push(range);
        }
    }

    if (matchingRanges.length === 0) {
        return null;
    }

    if (matchingRanges.length === 1) {
        return matchingRanges[0];
    }

    // Multiple matches: select most specific prefix and merge data
    matchingRanges.sort((a, b) => {
        const lenA = getPrefixLength(a.prefix);
        const lenB = getPrefixLength(b.prefix);
        return lenB - lenA;
    });

    const mostSpecific = matchingRanges[0];
    const mergedResult = { ...mostSpecific };

    for (let i = 1; i < matchingRanges.length; i++) {
        const range = matchingRanges[i];

        if (!mergedResult.asn && range.asn) {
            mergedResult.asn = range.asn;
            mergedResult.asn_name = range.asn_name;
            mergedResult.asn_org = range.asn_org;
            mergedResult.asn_country = range.asn_country;
        }

        if (!mergedResult.geoip && range.geoip) {
            mergedResult.geoip = range.geoip;
        }

        if (!mergedResult.whois && range.whois) {
            mergedResult.whois = range.whois;
        }

        if (!mergedResult.reputation && range.reputation) {
            mergedResult.reputation = range.reputation;
        }
    }

    return mergedResult;
}

/**
 * Fetch hierarchical data file with caching
 */
async function fetchHierarchicalData(path) {
    if (dataCache.has(path)) {
        return dataCache.get(path);
    }

    try {
        const response = await fetch(path);
        if (!response.ok) {
            if (response.status === 404) {
                return null;
            }
            throw new Error(`HTTP ${response.status}`);
        }

        const data = await response.json();
        dataCache.set(path, data);
        return data;
    } catch (error) {
        console.error(`Error fetching ${path}:`, error);
        return null;
    }
}

// ============================================================================
// IP Detection and Lookup
// ============================================================================

/**
 * Detect both IPv4 and IPv6 addresses
 */
async function detectIPAddresses() {
    try {
        // Fetch IPv4 and IPv6 in parallel
        const [ipv4Result, ipv6Result] = await Promise.allSettled([
            fetch('https://api.ipify.org?format=json').then(r => r.json()),
            fetch('https://api64.ipify.org?format=json').then(r => r.json())
        ]);

        // Process IPv4
        if (ipv4Result.status === 'fulfilled') {
            currentIPv4 = ipv4Result.value.ip;
            displayIPv4(currentIPv4);
        } else {
            displayIPv4Error();
        }

        // Process IPv6
        if (ipv6Result.status === 'fulfilled') {
            const ipv6 = ipv6Result.value.ip;
            // Check if it's actually different from IPv4 (ipv6 endpoint returns IPv4 if no IPv6)
            if (ipv6 && ipv6 !== currentIPv4 && ipv6.includes(':')) {
                currentIPv6 = ipv6;
                displayIPv6(currentIPv6);
            } else {
                displayIPv6Unavailable();
            }
        } else {
            displayIPv6Unavailable();
        }

        // Fetch detailed info for the primary IP using local data
        const primaryIP = currentIPv4 || currentIPv6;
        if (primaryIP) {
            await fetchIPDetailsFromLocalData(primaryIP);
        }

    } catch (error) {
        console.error('IP detection failed:', error);
        displayIPv4Error();
        displayIPv6Error();
    }
}

/**
 * Display IPv4 address
 */
function displayIPv4(ip) {
    const el = document.getElementById('ipv4Value');
    el.className = 'ip-value';
    el.textContent = ip;
    document.getElementById('copyIpv4Btn').disabled = false;
}

/**
 * Display IPv4 error
 */
function displayIPv4Error() {
    const el = document.getElementById('ipv4Value');
    el.className = 'ip-value error';
    el.textContent = 'Detection failed';
}

/**
 * Display IPv6 address
 */
function displayIPv6(ip) {
    const el = document.getElementById('ipv6Value');
    el.className = 'ip-value';
    el.textContent = ip;
    document.getElementById('copyIpv6Btn').disabled = false;
}

/**
 * Display IPv6 unavailable
 */
function displayIPv6Unavailable() {
    const el = document.getElementById('ipv6Value');
    el.className = 'ip-value unavailable';
    el.textContent = 'Not available on your network';
}

/**
 * Display IPv6 error
 */
function displayIPv6Error() {
    const el = document.getElementById('ipv6Value');
    el.className = 'ip-value error';
    el.textContent = 'Detection failed';
}

/**
 * Copy IP to clipboard
 */
function copyToClipboard(type) {
    const ip = type === 'ipv4' ? currentIPv4 : currentIPv6;
    if (!ip) return;

    navigator.clipboard.writeText(ip).then(() => {
        const btn = document.getElementById(type === 'ipv4' ? 'copyIpv4Btn' : 'copyIpv6Btn');
        btn.textContent = 'Copied!';
        btn.classList.add('copied');
        setTimeout(() => {
            btn.textContent = 'Copy';
            btn.classList.remove('copied');
        }, 2000);
    }).catch(err => {
        console.error('Copy failed:', err);
    });
}

/**
 * Fetch detailed IP information from local hierarchical data files
 * Uses the same data source as the BGP/WHOIS lookup tool
 */
async function fetchIPDetailsFromLocalData(ip) {
    try {
        let matchedData = null;
        const isIPv6 = ip.includes(':');

        if (isIPv6) {
            // IPv6 lookup
            const normalized = normalizeIPv6(ip);
            if (!normalized) {
                throw new Error('Invalid IPv6 address');
            }

            const firstHextet = normalized.substring(0, 4).toLowerCase();
            const path = `${CONFIG.ipv6Path}/${firstHextet}.json`;

            const data = await fetchHierarchicalData(path);

            if (data?.ranges) {
                const ipInt = ipv6ToBigInt(ip);
                matchedData = findMatchingRange(ipInt, data.ranges);
            }
        } else {
            // IPv4 lookup
            const firstOctet = ip.split('.')[0];
            const path = `${CONFIG.ipv4Path}/${firstOctet}.json`;

            const data = await fetchHierarchicalData(path);

            if (data?.ranges) {
                const ipInt = ipv4ToInt(ip);
                matchedData = findMatchingRange(ipInt, data.ranges);
            }
        }

        if (matchedData) {
            lookupData = matchedData;

            // Display geographic info from local data
            displayGeoInfoFromLocal(matchedData);

            // Display ISP/ASN info from local data
            displayISPInfoFromLocal(matchedData);

            // Display privacy info (basic - from reputation data if available)
            displayPrivacyInfoFromLocal(matchedData);

            // Initialize map if we have coordinates
            if (matchedData.geoip && matchedData.geoip.lat && matchedData.geoip.lon) {
                const lat = parseFloat(matchedData.geoip.lat);
                const lon = parseFloat(matchedData.geoip.lon);
                if (!isNaN(lat) && !isNaN(lon)) {
                    initializeMap(lat, lon, matchedData);
                } else {
                    displayMapUnavailable();
                }
            } else {
                displayMapUnavailable();
            }
        } else {
            // No local data found
            displayGeoError();
            displayISPError();
            displayPrivacyError();
            displayMapUnavailable();
        }

    } catch (error) {
        console.error('IP details fetch failed:', error);
        displayGeoError();
        displayISPError();
        displayPrivacyError();
    }
}

/**
 * Display "map unavailable" message
 */
function displayMapUnavailable() {
    const mapContainer = document.getElementById('locationMap');
    if (map) {
        map.remove();
        map = null;
    }
    mapContainer.innerHTML = '<div style="display: flex; align-items: center; justify-content: center; height: 100%; color: #999; font-style: italic;">Map coordinates not available for this IP range</div>';
}

/**
 * Display geographic information from local hierarchical data
 */
function displayGeoInfoFromLocal(data) {
    const geo = data.geoip || {};

    document.getElementById('geoCity').textContent = geo.city || 'Unknown';
    document.getElementById('geoRegion').textContent = geo.region_name || 'Unknown';

    // Format country display
    const countryName = geo.country_name || geo.country || 'Unknown';
    const countryCode = geo.country || '';
    document.getElementById('geoCountry').textContent = countryCode && countryName !== countryCode
        ? `${countryName} (${countryCode})`
        : countryName;

    // Coordinates
    const lat = parseFloat(geo.lat);
    const lon = parseFloat(geo.lon);
    document.getElementById('geoCoords').textContent = (!isNaN(lat) && !isNaN(lon) && lat !== 0 && lon !== 0)
        ? `${lat.toFixed(4)}, ${lon.toFixed(4)}`
        : 'Not available';

    document.getElementById('geoTimezone').textContent = geo.time_zone || 'Unknown';
    document.getElementById('geoZip').textContent = geo.postal_code || geo.zip || 'Unknown';
}

/**
 * Display geographic error state
 */
function displayGeoError() {
    ['geoCity', 'geoRegion', 'geoCountry', 'geoCoords', 'geoTimezone', 'geoZip'].forEach(id => {
        document.getElementById(id).textContent = 'Unavailable';
    });
}

/**
 * Display ISP/ASN information from local hierarchical data
 */
function displayISPInfoFromLocal(data) {
    // ISP/Carrier name - use ASN name or org
    document.getElementById('ispName').textContent = data.asn_name || data.asn_org || 'Unknown';

    // Organization
    document.getElementById('ispOrg').textContent = data.asn_org || data.asn_name || 'Unknown';

    // AS Number with full format
    const asnDisplay = data.asn ? `AS${data.asn}` : 'Unknown';
    document.getElementById('ispAsn').textContent = asnDisplay;

    // Connection type - infer from ASN name if possible
    let connectionType = 'Unknown';
    const asnName = (data.asn_name || '').toLowerCase();
    const asnOrg = (data.asn_org || '').toLowerCase();
    const combined = asnName + ' ' + asnOrg;

    if (combined.includes('mobile') || combined.includes('wireless') || combined.includes('cellular')) {
        connectionType = 'Mobile Carrier';
    } else if (combined.includes('hosting') || combined.includes('cloud') || combined.includes('datacenter') ||
               combined.includes('amazon') || combined.includes('google') || combined.includes('microsoft') ||
               combined.includes('digitalocean') || combined.includes('linode') || combined.includes('vultr')) {
        connectionType = 'Data Center / Hosting';
    } else if (data.asn) {
        connectionType = 'ISP / Residential';
    }

    document.getElementById('connectionType').textContent = connectionType;
}

/**
 * Display ISP error state
 */
function displayISPError() {
    ['ispName', 'ispOrg', 'ispAsn', 'connectionType'].forEach(id => {
        document.getElementById(id).textContent = 'Unavailable';
    });
}

/**
 * Display privacy/security information from local data
 */
function displayPrivacyInfoFromLocal(data) {
    const reputation = data.reputation || {};

    // VPN/Proxy status - check reputation data
    const vpnEl = document.getElementById('vpnStatus');
    if (reputation.listed && reputation.firehol_level) {
        vpnEl.innerHTML = '<span class="status-badge warning"><span class="dot"></span>Flagged</span>';
    } else {
        vpnEl.innerHTML = '<span class="status-badge safe"><span class="dot"></span>Not Detected</span>';
    }

    // Hosting/Data Center status - infer from ASN name
    const hostingEl = document.getElementById('hostingStatus');
    const asnName = (data.asn_name || '').toLowerCase();
    const asnOrg = (data.asn_org || '').toLowerCase();
    const combined = asnName + ' ' + asnOrg;

    const isHosting = combined.includes('hosting') || combined.includes('cloud') ||
                      combined.includes('datacenter') || combined.includes('amazon') ||
                      combined.includes('google') || combined.includes('microsoft') ||
                      combined.includes('digitalocean') || combined.includes('linode') ||
                      combined.includes('vultr') || combined.includes('ovh') ||
                      combined.includes('hetzner') || combined.includes('akamai');

    if (isHosting) {
        hostingEl.innerHTML = '<span class="status-badge info"><span class="dot"></span>Yes</span>';
    } else {
        hostingEl.innerHTML = '<span class="status-badge safe"><span class="dot"></span>No</span>';
    }

    // Mobile status - infer from ASN name
    const mobileEl = document.getElementById('mobileStatus');
    const isMobile = combined.includes('mobile') || combined.includes('wireless') ||
                     combined.includes('cellular') || combined.includes('lte') ||
                     combined.includes('4g') || combined.includes('5g');

    if (isMobile) {
        mobileEl.innerHTML = '<span class="status-badge info"><span class="dot"></span>Yes</span>';
    } else {
        mobileEl.innerHTML = '<span class="status-badge safe"><span class="dot"></span>No</span>';
    }

    // Show reputation alert if flagged
    displayReputationAlert(data);
}

/**
 * Display reputation alert based on local data
 */
function displayReputationAlert(data) {
    const alertContainer = document.getElementById('reputationAlert');
    const reputation = data.reputation || {};

    if (reputation.listed && reputation.firehol_level) {
        const level = reputation.firehol_level;
        const severityClass = level === 1 ? 'danger' : 'warning';
        const severityText = level === 1 ? 'Critical Risk' : (level === 2 ? 'High Risk' : 'Moderate Risk');
        const icon = level === 1 ? '&#9888;' : '&#9888;';

        alertContainer.innerHTML = `
            <div class="reputation-alert ${severityClass}">
                <span class="alert-icon">${icon}</span>
                <div class="alert-content">
                    <h4>${severityText}: IP Listed on Threat Intelligence</h4>
                    <p>
                        This IP address is listed on FireHOL Level ${level} blocklist.
                        ${level === 1 ? 'This indicates confirmed malicious activity.' :
                          level === 2 ? 'This indicates suspicious or potentially malicious activity.' :
                          'This IP appears on extended threat lists.'}
                    </p>
                </div>
            </div>
        `;
    } else {
        alertContainer.innerHTML = `
            <div class="reputation-alert clean">
                <span class="alert-icon">&#9989;</span>
                <div class="alert-content">
                    <h4>No Known Threats Detected</h4>
                    <p>Based on public threat intelligence data (FireHOL, IPsum), no malicious activity has been reported for this IP address.</p>
                </div>
            </div>
        `;
    }
}

/**
 * Display privacy error state
 */
function displayPrivacyError() {
    ['vpnStatus', 'hostingStatus', 'mobileStatus'].forEach(id => {
        document.getElementById(id).innerHTML = '<span class="status-badge">Unknown</span>';
    });
    document.getElementById('reputationAlert').innerHTML = '';
}

/**
 * Initialize Leaflet map
 */
function initializeMap(lat, lon, data) {
    const mapContainer = document.getElementById('locationMap');

    // Clear existing map if present
    if (map) {
        map.remove();
        map = null;
    }

    if (!lat || !lon || isNaN(lat) || isNaN(lon)) {
        mapContainer.innerHTML = '<div style="display: flex; align-items: center; justify-content: center; height: 100%; color: #999;">Location data unavailable</div>';
        return;
    }

    // Initialize map
    map = L.map('locationMap', {
        zoomControl: true,
        scrollWheelZoom: true
    }).setView([lat, lon], 10);

    // Add OpenStreetMap tiles
    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>',
        maxZoom: 18
    }).addTo(map);

    // Add marker - use geoip data from local structure
    const geo = data.geoip || {};
    const location = [geo.city, geo.region_name, geo.country_name || geo.country].filter(Boolean).join(', ');
    marker = L.marker([lat, lon]).addTo(map);
    marker.bindPopup(`
        <strong>Your Approximate Location</strong><br>
        ${location || 'Location data limited'}<br>
        <small>${lat.toFixed(4)}, ${lon.toFixed(4)}</small>
    `).openPopup();

    // Ensure map renders correctly
    requestAnimationFrame(() => {
        requestAnimationFrame(() => {
            if (map) map.invalidateSize();
        });
    });
}


/**
 * Detect device/browser information
 */
function detectDeviceInfo() {
    // Operating System
    const os = detectOS();
    document.getElementById('deviceOS').textContent = os;

    // Browser
    const browser = detectBrowser();
    document.getElementById('deviceBrowser').textContent = browser;

    // Screen resolution
    const screen = `${window.screen.width} x ${window.screen.height}`;
    document.getElementById('deviceScreen').textContent = screen;

    // Device pixel ratio
    const dpr = window.devicePixelRatio || 1;
    document.getElementById('deviceDPR').textContent = `${dpr}x`;

    // CPU threads
    const cpu = navigator.hardwareConcurrency || 'Unknown';
    document.getElementById('deviceCPU').textContent = cpu;

    // RAM (Chrome only)
    const ram = navigator.deviceMemory ? `${navigator.deviceMemory} GB` : 'Not available';
    document.getElementById('deviceRAM').textContent = ram;

    // Languages
    const languages = navigator.languages ? navigator.languages.join(', ') : navigator.language || 'Unknown';
    document.getElementById('deviceLang').textContent = languages;

    // Connection type
    let connectionInfo = 'Not available';
    if (navigator.connection) {
        const conn = navigator.connection;
        const parts = [];
        if (conn.effectiveType) parts.push(conn.effectiveType.toUpperCase());
        if (conn.downlink) parts.push(`${conn.downlink} Mbps`);
        if (parts.length > 0) connectionInfo = parts.join(' - ');
    }
    document.getElementById('deviceConnection').textContent = connectionInfo;

    // Touch support
    const hasTouch = 'ontouchstart' in window || navigator.maxTouchPoints > 0;
    document.getElementById('deviceTouch').textContent = hasTouch ? 'Yes' : 'No';

    // Cookies
    document.getElementById('deviceCookies').textContent = navigator.cookieEnabled ? 'Yes' : 'No';
}

/**
 * Detect operating system from user agent
 */
function detectOS() {
    const ua = navigator.userAgent;
    const platform = navigator.platform || '';

    if (ua.includes('Windows NT 10')) return 'Windows 10/11';
    if (ua.includes('Windows NT 6.3')) return 'Windows 8.1';
    if (ua.includes('Windows NT 6.2')) return 'Windows 8';
    if (ua.includes('Windows NT 6.1')) return 'Windows 7';
    if (ua.includes('Windows')) return 'Windows';

    if (ua.includes('Mac OS X')) {
        const match = ua.match(/Mac OS X (\d+[._]\d+)/);
        if (match) {
            const version = match[1].replace('_', '.');
            return `macOS ${version}`;
        }
        return 'macOS';
    }

    if (ua.includes('iPhone')) return 'iOS (iPhone)';
    if (ua.includes('iPad')) return 'iPadOS';
    if (ua.includes('Android')) {
        const match = ua.match(/Android (\d+(\.\d+)?)/);
        return match ? `Android ${match[1]}` : 'Android';
    }

    if (ua.includes('Linux')) return 'Linux';
    if (ua.includes('CrOS')) return 'Chrome OS';

    return platform || 'Unknown';
}

/**
 * Detect browser from user agent
 */
function detectBrowser() {
    const ua = navigator.userAgent;

    // Check for specific browsers (order matters - check specific before generic)
    if (ua.includes('Edg/')) {
        const match = ua.match(/Edg\/(\d+(\.\d+)?)/);
        return match ? `Microsoft Edge ${match[1]}` : 'Microsoft Edge';
    }

    if (ua.includes('OPR/') || ua.includes('Opera')) {
        const match = ua.match(/(?:OPR|Opera)\/(\d+(\.\d+)?)/);
        return match ? `Opera ${match[1]}` : 'Opera';
    }

    if (ua.includes('Firefox/')) {
        const match = ua.match(/Firefox\/(\d+(\.\d+)?)/);
        return match ? `Firefox ${match[1]}` : 'Firefox';
    }

    if (ua.includes('Safari/') && !ua.includes('Chrome')) {
        const match = ua.match(/Version\/(\d+(\.\d+)?)/);
        return match ? `Safari ${match[1]}` : 'Safari';
    }

    if (ua.includes('Chrome/')) {
        const match = ua.match(/Chrome\/(\d+(\.\d+)?)/);
        return match ? `Chrome ${match[1]}` : 'Chrome';
    }

    return 'Unknown Browser';
}

/**
 * Check and display referrer
 */
function checkReferrer() {
    const referrer = document.referrer;
    const section = document.getElementById('referrerSection');
    const valueEl = document.getElementById('referrerValue');

    if (!referrer) {
        section.classList.remove('show');
        return;
    }

    try {
        const url = new URL(referrer);
        const hostname = url.hostname.toLowerCase();

        // Filter out baud9600.com and related domains
        if (hostname.includes('baud9600.com') ||
            hostname.includes('baud9600.local') ||
            hostname === 'localhost') {
            section.classList.remove('show');
            return;
        }

        // Display external referrer
        valueEl.textContent = referrer;
        section.classList.add('show');

    } catch (e) {
        // Invalid URL, hide section
        section.classList.remove('show');
    }
}
</script>