/* ───────── 썸네일 그리드 ───────── */
.tm-grid{
    display:flex;flex-wrap:wrap;justify-content:center;
    gap:1.5rem;padding:3rem 1rem;
}
.tm-card{
    flex:0 0 220px;height:220px;
    background:#fff;border-radius:8px;box-shadow:0 4px 10px rgba(0,0,0,.25);
    overflow:hidden;cursor:pointer;display:flex;align-items:center;justify-content:center;
    transition:transform .3s;
}
.tm-card:hover{transform:translateY(-6px);}
.tm-card img{max-width:100%;max-height:100%;object-fit:contain;display:block;}

/* ───────── 공통 모달 ───────── */
.book-modal{
    position:fixed;inset:0;background:rgba(0,0,0,.85);
    display:none;flex-direction:column;align-items:center;justify-content:center;z-index:1200;
}
.book-close{position:absolute;top:20px;right:26px;font-size:2rem;border:none;background:none;color:#fff;cursor:pointer;}

/* ─── 데스크톱(책 넘기기) ─── */
.book-wrapper.desktop{display:flex;gap:0;max-width:100vw;max-height:80vh;}
.page-container{position:relative;overflow:hidden;}
.page-img{
    width:30vw;max-height:80vh;object-fit:contain;
    background:#111;border:1px solid #444;border-radius:4px;
    box-shadow:0 0 15px rgba(0,0,0,.5);
    transform:translateZ(0);     /* GPU 레이어 고정 → Panzoom 초기 스케일 안정화 */
}

/* 내비·페이저·Zoom */
.book-nav{
    position:absolute;top:50%;transform:translateY(-50%);
    font-size:3rem;color:#fff;background:none;border:none;cursor:pointer;
    padding:.4rem .8rem;user-select:none;z-index:1210;
}
.book-nav.left{left:1%;}.book-nav.right{right:1%;}
.book-pager{
    margin-top:1.2rem;display:flex;align-items:center;gap:.5rem;
    color:#fff;font-size:.95rem;
}
.book-pager input{
    width:70px;padding:.35rem .4rem;border-radius:4px;border:1px solid #666;
    background:#222;color:#fff;text-align:center;
}
.book-pager button{
    padding:.35rem .8rem;border:none;border-radius:4px;background:#444;color:#fff;
    cursor:pointer;transition:.3s;
}
.book-pager button:hover{background:#666;}
.zoom-fab{
    position:absolute;bottom:20px;right:30px;display:flex;flex-direction:column;gap:.45rem;z-index:1220;
}
.zoom-fab button{
    width:42px;height:42px;font-size:1.3rem;border:none;border-radius:50%;
    background:#444;color:#fff;cursor:pointer;transition:background .3s;
}
.zoom-fab button:hover{background:#666;}

/* ─── 모바일(≤768 px) : 세로 카드 + 하단 고정 페이저 ─── */
@media (max-width:768px){
    /* 썸네일 축소 */
    .tm-card{flex:0 0 160px;height:160px;}

    /* 이미지 리스트(카드) */
    .book-wrapper.mobile{
        display:block;overflow-y:auto;
        max-height:80vh;width:100%;padding:0 4vw 90px; /* ▼ 하단 패딩(페이저 높이) */
        scroll-behavior:smooth;
    }
    .book-wrapper.mobile .page-container{
        background:#fff;border-radius:10px;box-shadow:0 4px 12px rgba(0,0,0,.15);
        padding:1rem;margin-bottom:2rem;
    }
    .book-wrapper.mobile .page-img{
        width:100%;height:auto;max-height:none;background:transparent;border:none;border-radius:6px;
        box-shadow:none;
    }

    /* 📌 하단 고정 페이저 */
    .book-pager{
        position:fixed;left:0;bottom:0;width:100%;
        background:rgba(0,0,0,.9);padding:0.6rem 1rem;
        justify-content:center;align-items:center;gap:.6rem;
        margin:0;z-index:1230;
    }
    .book-pager input{width:60px;background:#111;border:1px solid #555;}

    /* 데스크톱 전용 UI 숨김 */
    .book-nav,.zoom-fab{display:none!important;}
}