/* ───────── 공통(데스크톱 + 모바일) ───────── */
.book-area{display:flex;flex-direction:column;align-items:center;gap:1.4rem;}
.page-img{object-fit:contain;display:block;}
.pager input{width:70px;padding:.35rem .4rem;border:1px solid #666;border-radius:4px;background:#222;color:#fff;text-align:center;}
.pager button{padding:.35rem .8rem;border:none;border-radius:4px;background:#444;color:#fff;cursor:pointer;transition:.3s;}
.pager button:hover{background:#666;}

/* ─── 데스크톱 (>768 px) : 책‑넘기기 ─── */
@media (min-width:769px){
    .book-wrapper.desktop{position:relative;display:flex;gap:0;max-width:100vw;max-height:80vh;}
    .page-box{position:relative;overflow:hidden;}
    .page-img{width:30vw;max-height:80vh;background:#111;border:1px solid #444;border-radius:4px;box-shadow:0 0 12px rgba(0,0,0,.5);}
    .nav-btn{position:absolute;top:50%;transform:translateY(-50%);font-size:3rem;padding:0 .5rem;background:none;border:none;cursor:pointer;color:#fff;user-select:none;z-index:100;}
    #prev-btn{left:1%;}#next-btn{right:1%;}
    .zoom-fab{position:absolute;bottom:20px;right:28px;display:flex;flex-direction:column;gap:.5rem;z-index:105;}
    .zoom-fab button{width:42px;height:42px;font-size:1.3rem;border:none;border-radius:50%;background:#444;color:#fff;cursor:pointer;transition:.3s;}
    .zoom-fab button:hover{background:#666;}
    .pager{display:flex;align-items:center;gap:.6rem;color:#fff;font-size:.95rem;}
}

/* ─── 모바일 (≤768 px) : 세로 카드 목록 ─── */
@media (max-width:768px){
    /* 책‑넘기기 요소 숨김 */
    .book-wrapper.desktop,.nav-btn,.zoom-fab{display:none!important;}

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

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