/* ══ 팝업 ══════════════════════════════════ */
.pop-layer {
    position: fixed; inset: 0; z-index: 200;
    pointer-events: none;
}

.pop-track {
    display: flex; align-items: flex-start; justify-content: flex-start;
    gap: 20px;
    height: 100%; padding: 90px 24px 24px;
    overflow: auto;
}

.pop-item { pointer-events: auto; flex: 0 0 auto; }
.pop-item[hidden] { display: none !important; }

.pop-box {
    width: 400px; max-width: 100%;
    background: #fff; border-radius: var(--radius, 12px); overflow: hidden;
    box-shadow: 0 18px 44px rgba(0,0,0,.28);
    animation: pop-in .28s ease-out;
}

@keyframes pop-in {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}

.pop-img { display: block; line-height: 0; }
.pop-img img { width: 100%; height: auto; display: block; }
a.pop-img { cursor: pointer; }

.pop-foot {
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 6px 0 14px; height: 46px;
    background: #23262b;
}

.pop-today {
    display: flex; align-items: center; gap: 8px;
    padding: 0; border: 0; background: none; cursor: pointer;
    font-size: 13.5px; color: #d1d5db;
}
.pop-today i {
    width: 17px; height: 17px; border-radius: 50%;
    border: 1.5px solid #6b7280; background: transparent;
    transition: background .15s, border-color .15s;
}
.pop-today:hover i { border-color: #fff; background: rgba(255,255,255,.15); }
.pop-today:hover { color: #fff; }

.pop-x {
    display: flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; padding: 0;
    border: 0; background: none; color: #d1d5db; cursor: pointer;
}
.pop-x svg { width: 19px; height: 19px; }
.pop-x:hover { color: #fff; }

.pop-dots { display: none; }

@media (prefers-reduced-motion: reduce) {
    .pop-box { animation: none; }
}

/* ── 모바일 : 중앙 + 좌우 스와이프 ── */
/* ── 모바일 : 중앙 + 좌우 스와이프 ── */
@media (max-width: 768px) {

    /* 레이어를 화면 전체로 깔지 않는다.
       팝업 높이만큼만 차지하게 해서 위아래 여백은 페이지가 그대로 스크롤된다.
       ⚠️ pointer-events: none 을 쓰면 X 버튼도 안 눌린다 */
    .pop-layer {
        inset: auto 0 auto 0;
        top: 50%;
        transform: translateY(-50%);
        background: none;
        pointer-events: auto;
    }

    .pop-track {
        align-items: center; justify-content: flex-start;
        gap: 0; padding: 0;
        height: auto;
        scroll-padding: 0 6%;
        overflow-x: auto; overflow-y: hidden;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }
    .pop-track::-webkit-scrollbar { display: none; }

    /* 옆 팝업이 살짝 보여야 「밀 수 있다」를 배우지 않아도 안다 */
    .pop-item {
        flex: 0 0 88%;
        display: flex; align-items: center; justify-content: center;
        scroll-snap-align: center;
    }

    .pop-box { width: 92%; }
    .pop-img img { max-height: 58vh; object-fit: contain; background: #f3f4f6; }

    /* 딤이 없어서 흰 점은 안 보인다. 캡슐 배경으로 분리 */
    .pop-dots {
        position: absolute; left: 50%; transform: translateX(-50%);
        bottom: -34px;
        display: flex; align-items: center; gap: 8px;
        padding: 7px 12px;
        background: rgba(0,0,0,.45);
        border-radius: 999px;
        pointer-events: auto;
    }
    .pop-dots button {
        width: 8px; height: 8px; padding: 0; border: 0; border-radius: 50%;
        background: rgba(255,255,255,.45); cursor: pointer;
        transition: background .2s, width .2s;
    }
    .pop-dots button.on { width: 20px; border-radius: 4px; background: #fff; }
}