/* overlay */
#pgOverlay{
  position:fixed;
  left:0; top:0;
  width:100%; height:100%;
  background:#000;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  z-index:9998;
  cursor:zoom-out;
  transition:opacity .22s ease, visibility 0s linear .22s;
}

body.pg-open #pgOverlay{
  opacity:.78;
  visibility:visible;
  pointer-events:auto;
  transition:opacity .22s ease, visibility 0s linear 0s;
}

/* viewer */
#pgViewer{
  position:fixed;
  left:0; top:0;
  width:100%; height:100%;
  z-index:9999;
  opacity:0;
  visibility:hidden;
  transition:opacity .22s ease, visibility 0s linear .22s;
}

body.pg-open #pgViewer{
  opacity:1;
  visibility:visible;
}

/* frame */
#pgFrame{
  position:absolute;
  left:50%; top:50%;
  transform:translate(-50%,-50%) scale(.965);
  opacity:0;
  z-index:1;

  background:rgba(0,0,0,.86);
  border-radius:18px;
  padding:18px 76px;
  box-shadow:0 20px 55px rgba(0,0,0,.55);
  transition:transform .22s ease, opacity .22s ease;
}

body.pg-open #pgFrame{
  transform:translate(-50%,-50%) scale(1);
  opacity:1;
}

/* image stage */
#pgStage{
  background:#fff;
  border-radius:14px;
  padding:12px;
  position:relative;
  z-index:1;
}

#pgImg{
  display:block;
  width:auto;
  height:auto;
  max-width:calc(100vw - 160px);
  max-height:calc(100vh - 210px);
  border-radius:10px;
  position:relative;
  z-index:1;
}

/* fade */
#pgImg.pgFadeOut{ opacity:0; transition:opacity .12s ease; }
#pgImg.pgFadeIn{  opacity:1; transition:opacity .18s ease; }

/* caption */
#pgCap{
  margin-top:10px;
  text-align:center;
  color:#fff;
  font-size:14px;
}

/* buttons */
.pgBtn{
  position:absolute;
  width:46px; height:46px;
  border-radius:999px;
  background:rgba(255,255,255,.92);
  color:#111;
  line-height:46px;
  text-align:center;
  font-weight:bold;
  font-size:30px;
  cursor:pointer;
  user-select:none;
  z-index:5;

  box-shadow:0 10px 24px rgba(0,0,0,.28);
  transition:transform .12s ease, background .12s ease;
}

.pgBtn:hover{ background:#fff; transform:translateY(-1px); }
.pgBtn:active{ transform:translateY(0) scale(.98); }

/* close */
#pgClose{
  right:-18px;
  top:-18px;
  font-size:24px;
}

/* arrows */
#pgPrev{
  left:18px;
  top:50%;
  margin-top:-23px;
}
#pgNext{
  right:18px;
  top:50%;
  margin-top:-23px;
}

/* SP */
@media screen and (max-width:768px){
  #pgFrame{
    padding:12px;
    border-radius:16px;
  }
  #pgStage{
    padding:8px;
    border-radius:12px;
  }
  #pgImg{
    max-width:calc(100vw - 32px);
    max-height:calc(100vh - 230px);
  }

  .pgBtn{
    width:52px;
    height:52px;
    line-height:52px;
    font-size:34px;
  }

  #pgClose{
    top:-22px;
    right:12px;
    font-size:26px;
  }

  #pgPrev, #pgNext{
    top:auto;
    bottom:-18px;
    margin-top:0;
  }
}