*{margin:0; padding:0; box-sizing:border-box;}
body {display:flex; justify-content:center; align-items:center; min-height:100vh;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    font-family:'Arial', sans-serif; padding:20px; }
.phone-frame { width:375px; height:95vh;  /* ความสูง 90% ของหน้าจอ  812px  */
    border: 12px solid #1a1a1a; border-radius:50px;
    overflow: hidden; box-shadow:  0 20px 60px rgba(0, 0, 0, 0.5),
        inset 0 0 0 1px rgba(255, 255, 255, 0.1);
    background: #000; position:relative;}
.phone-frame::before {content:''; position:absolute; top:0;
    left: 50%; transform:translateX(-50%); width:150px; height:30px;
    background:#1a1a1a; border-radius:0 0 30px 30px; z-index: 10;
}
.wallpaper-container {width:100%; height:100%; overflow:hidden; position:relative;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}
.wallpaper-img {position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
    opacity:0; transition:opacity .4s ease;
}
.wallpaper-img.active {opacity:1;}
.wallpaper-img2 {width:90%; object-fit:contain;}

/*

<link rel='stylesheet' href='https://pok.youyod.com/wallpaperphone.css'>

<div class='phone-frame'>
    <div class='wallpaper-container'>
        <img src='img/pok052.png' alt='Wallpaper' class='wallpaper-img active'>
        <img src='img/pok23.png' alt='Wallpaper' class='wallpaper-img'>
        <img src='img/pok15.png' alt='Wallpaper' class='wallpaper-img'>
    </div>
</div>

ทำเป็น ภาพสไลด์
<script>
    const slides=document.querySelectorAll('.wallpaper-img');
    let current=0;
    setInterval(() => {
        slides[current].classList.remove('active');
        current=(current + 1) % slides.length;
        slides[current].classList.add('active');
    },1000);
</script>


*/