* {
    --popWd: 400px;
    --popHg: 400px;
    --mgn400: clamp(10px, 20vw, calc(50vw - var(--popWd) / 2));
}

input.pop {
    display: none;
}

[data-pop] {
    visibility: hidden;
    opacity: 0;
    z-index: 5;
    width: 100%;
    height: 100vh;
    top: 0;
    position: fixed;
    overflow-y: scroll;
    overscroll-behavior: contain;
    transition: 200ms;
}

.popbg {
    width: 100%;
    height: calc(100vh + 1px);
    background-color: #0006;
}

.popWin {
    position: fixed;
    top: 10vh;
    left: var(--mgn400);
    right: var(--mgn400);
    height: var(--popHg);
    max-height: 80vh;
    overflow: auto;
    overscroll-behavior: contain;
}

.popWin>div {
    width: 100%;
    height: calc(var(--popHg) - 1px);
    padding: 5px;
}

.popWin>.clzPop {
    transition: 50ms;
    position: absolute;
    top: 5px;
    right: 5px;
    height: 40px;
    width: 40px;
    border-radius: 100%;
    background-color: #fff0;
}

.popWin>.clzPop:hover {
    background-color: #fff3;
}

:checked+[data-pop] {
    visibility: visible;
    opacity: 1;
}