[hidden] { display: none !important; }
/* =========================================================
   Modal: Backdrop ~ Footer (PC/Mobile with <picture>)
   ========================================================= */
.backdrop{
    position:fixed; inset:0;
    background:rgba(0,0,0,.70);
    display:grid; place-items:center;
    padding:16px;            /* narrow screens padding */
    z-index:1000;
}
.modal{position:relative}
.modal.modal--poster{
    /*사이즈 조정*/
    width:min(600px,95vw);
    background:transparent;
}
.modal.modal--poster .panel{
    background:#0e141d;
    border-radius:18px;
    overflow:hidden;
    box-shadow:0 12px 40px rgba(0,0,0,.5);
}
.modal.modal--poster .media{margin:0;position:relative}
.modal.modal--poster .media img{display:block;width:100%;height:auto}

/* Close(X) floating on image */
.modal.modal--poster .close{
    position:absolute;top:16px;right:16px;z-index:3;
    width:36px;height:36px;line-height:36px;text-align:center;
    border-radius:999px;background:transparent;color:#fff;
    border:0px solid rgba(255,255,255,.2);
    font-size: 30px;
    cursor:pointer;
}
.modal.modal--poster .close:hover{filter:brightness(1.08)}

/* Actions */
.modal.modal--poster .actions{
    display:flex;gap:12px;
    padding:20px 40px 40px 40px;
    background: #000000;
}
.modal.modal--poster .actions .btn{
    flex:1;text-align:center;
    font-size:clamp(13px,2.8vw,18px);
    padding:13px 0;border-radius:8px;
    background:#fff;color:#000;
    text-decoration: none;
}
.modal.modal--poster .actions .btn.primary{background:#fff}
.modal.modal--poster .actions .btn:hover{filter:brightness(1.06)}

/* Footer (오늘 하루 보지 않기 / pager optional) */
.modal.modal--poster .foot{
    display:flex;align-items:center;justify-content:space-between;
    gap:10px;padding:10px 6px 8px;
    background:transparent;border:0;
    color:#cbd5e1;font-size:13px;
}

/* Today controls: same tone PC/Mobile */
.nogen,.today-link{
    display:inline-flex;align-items:center;gap:40px;
    font-size:15px;color:#ffffff;
}
.today-link{
    background:none;border:0;padding:6px 10px;
    text-decoration:underline;cursor:pointer;
}

/* ✅ 체크박스 정렬 보정(반응형 동일 적용) */
.nogen input[type="checkbox"],
.foot input[type="checkbox"]{
    position:relative;
    top:2px;
    margin-right:8px;
}

/* Pager (optional) */
.pager{display:flex;align-items:center;gap:12px;opacity:.8;font-size:14px}
.pager-nav{background:transparent;border:0;color:#e5e7eb;font-size:18px;cursor:pointer}
.pager-nav[disabled]{opacity:.35;cursor:default}

/* Visibility helpers */
.pc-only{display:inline-flex}
.mobile-only{display:none; background: #000000; padding-bottom: 20px}

/* ---------- Responsive for modal ---------- */
@media (max-width:768px){
    .modal.modal--poster{width:min(335px,80vw);}
    .modal.modal--poster .actions{gap:10px;padding:16px}
    .modal.modal--poster .actions .btn{font-size:16px;padding:10px 0}
    .modal.modal--poster .foot{justify-content:center;padding-bottom:12px}
    .pc-only{display:none}
    .mobile-only{display:grid;place-items:center;gap:10px}
    .modal.modal--poster .close{right:12px;top:12px;width:32px;height:32px;line-height:32px}
}
@media (max-width:420px){
    .modal.modal--poster .actions .btn{font-size:14px;padding:10px 0}
}