/* 오른쪽 디테일 패널 */
.detail-panel{
  position: fixed;
  top: 10%;
  bottom: 10%;
  left: var(--side-w);
  right: 0;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  pointer-events: none;

  z-index: 20000;
  background: #11111150;
  backdrop-filter: blur(1px);

  transform: translateX(100%);
}

.detail-panel.is-open{ 
  transform: translateX(0); 
  left:260px;
  right:20px;
  pointer-events: auto;
}

@media (max-width: 870px){
  .detail-panel{
    left: 0;
    right: 0;
  }

  .detail-panel.is-open{
    left:2%;
    right:2%;
  }
}

.detail-top{
  display:flex;
  align-items:center;
  justify-content: space-between;
  padding: 12px 16px;
  color:#fff;
}

.detail-close{
  background: transparent;
  border: 0;
  color: #fff;
  cursor: pointer;
  font-size: 16px;
}

.detail-body{
  position: relative;
  height: 80vh;
  overflow: visible;
  padding: 16px;
  color:#fff;
  backdrop-filter: blur(1px);
}

.detail-view{ display:none; }
.detail-view.is-active{ 
  position: relative;
  display:block; 
}

.close-center-page-btn{
  background: transparent;
  border: 0;
  color: #fff;
  cursor: pointer;
  font-size: 16px;
  float: right;
}
.save-center-page-btn{
  border: 1px solid #fff;          /* 기본 아웃라인 화이트 */
  border-radius: 999px;
  background: transparent;
  color: #fff;
  cursor: pointer;
  font-size: 16px;
  position: absolute;
  right: 16px;
  bottom: 16px;
}
.save-center-page-btn:hover{
  background: #ffffff10;

}