.popup{--popup-gap: .5rem;position:fixed;inset:0;background:#000000bf;display:flex;align-items:center;justify-content:center;z-index:1000;opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s}.popup.active{opacity:1;visibility:visible}.popup__body{position:relative;background:#fff;padding:var(--popup-gap);max-width:calc(100vw - (2 * var(--popup-gap)));max-height:calc(100vh - (2 * var(--popup-gap)));display:inline-flex;flex-direction:column;align-items:center;box-sizing:border-box}.popup__img{display:block;max-width:calc(100vw - (4 * var(--popup-gap)));max-height:calc(100vh - (4 * var(--popup-gap)));width:auto;height:auto;object-fit:contain}.popup__msg{position:absolute;bottom:.5rem;left:50%;transform:translate(-50%);max-width:calc(100% - (2 * var(--popup-gap)));padding:3px 10px;border-radius:5px;background:#ecececbf;font-size:1rem;font-weight:700;color:#000;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;pointer-events:none}.popup__prev,.popup__next{position:absolute;top:0;width:25%;height:100%;z-index:5}.popup__prev:hover,.popup__next:hover{cursor:pointer}.popup__prev{left:0}.popup__next{right:0}.popup__close{position:absolute;top:.5rem;right:.5rem;z-index:10}.popup__prev .control-btn,.popup__next .control-btn{opacity:0;pointer-events:none;transition:opacity .2s ease,background .2s ease}@media(hover:hover)and (pointer:fine){.popup__prev:hover .control-btn,.popup__next:hover .control-btn{opacity:1;pointer-events:auto;background:#000c}}.control-btn{width:32px;height:32px;border-radius:50%;border:none;background:#0009;cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:10;transition:background .2s ease}.control-btn:hover{background:#000c}.control-btn svg{width:24px;height:24px;stroke:#fff;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}.prev{position:absolute;left:16px;top:50%;transform:translateY(-50%)}.next{position:absolute;right:16px;top:50%;transform:translateY(-50%)}.close{position:absolute;top:16px;right:16px}