/* 내지 넘겨보기 — 기존 갤러리 썸네일 위에만 얹는다. 2026-09-21
   목록 구조·칸 크기·간격은 건드리지 않는다. 화살표를 누르기 전까지 화면은 지금과 똑같다. */

#bo_gall .gall_img { position: relative; }
#bo_gall .gall_img.pk-clickable { cursor: pointer; }

/* 넘긴 내지를 덮어 씌우는 자리. 게시물 썸네일은 그대로 아래에 남는다.
   padding:inherit + box-sizing:border-box 라서 .gall_img 여백이 바뀌어도 알아서 따라간다 */
#bo_gall .pk-stage{
  position:absolute; top:0; right:0; bottom:0; left:0;
  padding:inherit; box-sizing:border-box;
  background:#fff; display:none;
}
#bo_gall .pk-stage.is-on{ display:block; }
#bo_gall .pk-stage img{ width:100%; height:100%; object-fit:contain; display:block; }

#bo_gall .pk-nav{
  position:absolute; top:50%; transform:translateY(-50%); z-index:3;
  width:30px; height:46px; padding:0; border:0; border-radius:2px;
  background:rgba(28,28,26,.5); color:#fff;
  font-size:22px; line-height:46px; text-align:center; cursor:pointer;
  opacity:.75; transition:opacity .15s ease, background .15s ease;
}
#bo_gall .gall_con:hover .pk-nav{ opacity:1; }
#bo_gall .pk-nav:hover{ background:rgba(28,28,26,.85); }
#bo_gall .pk-nav:disabled{ opacity:.15; cursor:default; }
#bo_gall .pk-prev{ left:10px; }
#bo_gall .pk-next{ right:10px; }

#bo_gall .pk-label{
  position:absolute; left:50%; bottom:14px; transform:translateX(-50%); z-index:3;
  padding:2px 10px; border-radius:2px;
  background:rgba(0,0,0,.6); color:#fff;
  font-size:11px; line-height:18px; letter-spacing:.02em; white-space:nowrap;
  font-variant-numeric:tabular-nums; cursor:pointer;
  opacity:0; transition:opacity .15s ease;
}
#bo_gall .gall_con:hover .pk-label,
#bo_gall .pk-label.is-on{ opacity:1; }

/* 터치 기기에는 hover 가 없으니 늘 보이게 */
@media (hover:none){
  #bo_gall .pk-nav{ opacity:1; }
  #bo_gall .pk-label{ opacity:1; }
}

/* 좁은 화면에서도 목록은 4열 그대로라 칸이 작다. 화살표가 내지를 가리지 않게 줄인다 */
@media (max-width:767px){
  #bo_gall .pk-nav{ width:20px; height:32px; line-height:32px; font-size:15px; }
  #bo_gall .pk-prev{ left:4px; }
  #bo_gall .pk-next{ right:4px; }
  #bo_gall .pk-label{ bottom:6px; padding:1px 6px; font-size:10px; line-height:15px; }
}