/* 🔍 🔍 🔍 🔍 Image Lightbox 🖼️ 🖼️ 🖼️ 🖼️ */
/* <!-- 🔍 🔍 🔍 🔍 🔍 🔍 🖼️ 🖼️ 🖼️ 🖼️ 🖼️ 🖼️ --> */
/*<link rel="stylesheet" type="text/css" href="/NewCreatebyKi/imageLightboxSTYLE01.css">*/

  /* 1. lightbox背景設定 */
  .modal {
    display: none; /* 預設隱藏 */
    position: fixed; 
    z-index: 9999; /* 確保在最上層 */
    left: 0; 
    top: 0; 
    width: 100%; 
    height: 100%; 
    background-color: rgba(0, 0, 0, 0.8); /* 半透明黑色背景 */
/* 以下三行用來讓圖片「初始」置中。拖曳時 JS 會接手位置分配 */ 
    justify-content: center; 
    align-items: center;
  }

  /* 2. 彈出視窗(圖片本身)的樣式 */
  .modal-content {
    max-width: 80%; /* 限制初始最大寬度 */
    max-height: 80vh; /* 限制初始最大高度 */
    border: 5px solid white; /* 加上白色邊框，讓它看起來像個「視窗」 */
    box-shadow: 0 4px 15px rgba(0,0,0,0.5); /* 加上陰影 */
    transition: transform 0.05s linear; /* 讓縮放和拖曳更即時流暢，減少延遲感 */
    
    /* 關鍵：設定游標圖案為「小手手」可抓取狀態 */
    cursor: grab; 
    cursor: -webkit-grab; /* 舊版 Safari */
  }

  /* 2.1 圖片抓取時的樣式 (手會握緊) */
  .modal-content.grabbing {
    cursor: grabbing; 
    cursor: -webkit-grabbing;
  }

  /* 3. 關閉按鈕樣式 */
  .close-btn {
    position: absolute; 
    top: 20px; 
    right: 40px; 
    color: white; 
    font-size: 50px; 
    font-weight: bold; 
    cursor: pointer;
    z-index: 10000;
  }

  .close-btn:hover {
    color: #bbb;
  }