<<style>
  /* 팝업 전체 배경 */
  #custom-popup {
    display: none;
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0,0,0,0.6);
    z-index: 9999;
  }

  /* 팝업 박스 */
  .popup-box {
    position: relative;
    width: 90%;
    max-width: 500px;
    margin: 10% auto;
    background: transparent;
    border-radius: 10px;
    overflow: hidden;
  }

  /* 이미지 배경 */
  .popup-image {
    width: 100%;
    display: block;
  }

  /* 자세히 보기 버튼 */
  .popup-button {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    background-color: #ffffffdd;
    color: #000;
    padding: 10px 20px;
    border: none;
    font-weight: bold;
    border-radius: 6px;
    cursor: pointer;
  }

  /* 닫기 버튼 (X) */
  .popup-close {
    position: absolute;
    top: 12px;
    right: 12px;
    background: rgba(255,255,255,0.8);
    border: none;
    font-size: 20px;
    font-weight: bold;
    padding: 4px 10px;
    border-radius: 50%;
    cursor: pointer;
  }
</style>

<!-- 팝업 열기 버튼 -->
<button onclick="document.getElementById('custom-popup').style.display='block'">팝업 보기</button>

<!-- 팝업창 -->
<div id="custom-popup">
  <div class="popup-box">
    <img src="https://via.placeholder.com/500x300.png?text=팝업+이미지" class="popup-image" alt="팝업 이미지">
    
    <button class="popup-button" onclick="window.location.href='https://your-link.com'">자세히 보기</button>
    <button class="popup-close" onclick="document.getElementById('custom-popup').style.display='none'">×</button>
  </div>
</div>