.bap-wrap{display:flex; gap:40px; align-items:flex-start; justify-content:space-between; padding:10px;}
.bap-left{flex:1; min-width:260px;}
.bap-right{width:320px; text-align:center;}
.bap-heading{margin:0 0 12px; font-weight:500; letter-spacing:.08em;}

.bap-notice{background:#fff7ef; border:1px solid rgba(255,140,0,.25); color:#d97900; padding:16px 18px; border-radius:6px; display:inline-block;}
.bap-result h2{margin:0 0 12px; font-weight:500; letter-spacing:.08em;}
.bap-result ul{margin:0; padding-left:18px;}
.bap-result li{margin:6px 0; opacity:.9;}

.bap-imgbox{position:relative; width:100%; max-width:320px; margin:0 auto;}
.bap-img{width:100%; height:auto; display:block; object-fit:contain;}

.bap-spot{
  position:absolute;
  width:18px; height:18px;
  border-radius:50%;
  transform:translate(-50%,-50%);
  background:#8fc7ff; border:3px solid #59aefe;
  box-shadow:0 10px 22px rgba(0,0,0,.18);
  cursor:pointer; padding:0; outline:none;
  transition:transform .15s ease;
}
.bap-spot:hover{
  transform:translate(-50%,-50%) scale(var(--bap-hover-scale, 1.12));
}
.bap-spot.is-active{background:#4aa3ff; border-color:#1f86ff;}

@media (max-width:767px){
  .bap-wrap{flex-direction:column; gap:18px;}
  .bap-right{width:100%;}
  .bap-imgbox{max-width:280px;}
}