/* ===== popup-zone ===== */
html:has(.popup-zone-wrap), html:has(.popup-zone-wrap) body { overflow-x: clip; }
.popup-zone-wrap { position: absolute; top: 100px; right: 0; z-index: 150; display: flex; align-items: center; transform: translateX(calc(100% - 48px)); transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1); }
.popup-zone-wrap.is-open { transform: translateX(0); }

/* panel */
.popup-zone-wrap .popup-panel { width: auto; min-width: 320px; max-width: 60vw; background: #fff; border-radius: 12px 0 0 12px; box-shadow: -4px 4px 20px rgba(0,0,0,0.18); overflow: hidden; pointer-events: none; }
.popup-zone-wrap.is-open .popup-panel { pointer-events: auto; padding: 25px 30px; }

/* panel head */
.popup-panel .popup-panel-head { display: flex; justify-content: space-between; background: #fff; padding-bottom: 20px; }
.popup-panel-head .popup-head-title { font-size: 2.2rem; font-family: 's-coredream', sans-serif; font-weight: 700; color: #111; }
.popup-panel-head .popup-head-nav { display: flex; align-items: center; gap: 6px; }
.popup-head-nav .popup-count { font-size: 1.4rem; color: #555; margin-right: 4px; }
.popup-count em { font-style: normal; font-weight: 700; color: #111; }
.popup-head-nav .popup-nav-btn { position: relative; width: 28px; aspect-ratio: 1; border: 1px solid var(--line); border-radius: 50%; background: #fff; color: #555; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background 0.2s; }
.popup-head-nav .popup-nav-btn:hover { background: #f0f0f0; }
.popup-head-nav .popup-nav-btn::before { content: ""; width: 7px; aspect-ratio: 1; border-top: 1px solid #555; border-right: 1px solid #555; }
.popup-head-nav .popup-nav-btn.popup-nav-prev::before { transform: rotate(-135deg); margin-left: 2px; }
.popup-head-nav .popup-nav-btn.popup-nav-next::before { transform: rotate(45deg); margin-right: 2px; }

/* slides */
.popup-panel .popup-slides-wrap { overflow: hidden; }
.popup-slides-wrap .popup-slides { display: flex; transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1); }
.popup-slides .popup-slide { flex-shrink: 0; width: 100%; display: flex; justify-content: center; }
.popup-slide img { width: auto; max-width: 100%; height: auto; display: block; object-fit: contain; border: 1px solid var(--line); }

/* footer */
.popup-panel .popup-footer { padding-top: 14px; }
.popup-footer .popup-today-check { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.popup-today-check input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--theme); cursor: pointer; flex-shrink: 0; }
.popup-today-check span { font-size: 1.4rem; color: #444; line-height: 1; }

/* tab button */
.popup-title-area { position: relative; width: 48px; flex-shrink: 0; }
.popup-title-area svg { display: block; width: 100%; height: auto; }
.popup-title-area .popup-title { position: absolute; top: 50%; left: 70%; transform: translate(-50%, -50%); z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.popup-title .title { display: flex; flex-direction: column; align-items: center; gap: 1px; }
.popup-title .title span { display: block; line-height: 1; font-size: 1.3rem; color: #656565; font-family: 's-coredream', sans-serif; font-weight: 700; }
.popup-title .popup-close-txt { display: none; }
.popup-zone-wrap.is-open .popup-title .title:not(.popup-close-txt) { display: none; }
.popup-zone-wrap.is-open .popup-title .popup-close-txt { display: flex; }

@media screen and (max-width: 580px) {
    .popup-panel .popup-panel-head { padding-bottom: 10px;}
    .popup-panel-head .popup-head-title { font-size: 1.8rem;}
    .popup-title .title span { font-size: 1.1rem;  line-height: 1.2;}
}