.store_list, .bill_list{
    background: white;
    padding:10px;
    display: none;
    margin:10px 0;
}
.store_list li, .bill_list li{
    cursor:pointer;
}

.txt.pc{
    display:block;
}

.txt.mb{
    display:none;
}

@media all and (max-width:720px){
    .txt.pc{
        display:none;
    }

    .txt.mb{
        display:block;
    }
}

.no-ship{
    backdrop-filter: blur(4px);
    position: absolute;
    width:100%;
    height:100%;
    inset:0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap:10px;
}

/* Side popup banner: rounded image card with close button outside */
#quick_guide_area > div,
#quick_area_add > div{
    position: relative;
    overflow: visible;
}

#quick_guide_area .quick_img_box,
#quick_area_add .quick_img_box{
    overflow: hidden;
    border-radius: 12%;
}

#quick_guide_area .quick_img_box img,
#quick_area_add .quick_img_box img{
    display: block;
    border-radius: inherit;
    object-fit: cover !important;
}

#quick_guide_area .quick_close_btn,
#quick_area_add .quick_close_btn{
    top: 1px;
    right: -18px;
    left: auto;
    z-index: 5;
}

#quick_guide_area .quick_close_btn img,
#quick_area_add .quick_close_btn img{
    display: block;
}

/* /book page: keep side popups below fixed header when sticky */
.book-list-page #quick_guide_area.on,
.book-list-page #quick_area_add.on{
    top: 55px;
}

/* /book page: brand + author row keeps author truncated instead of wrapping/breaking layout */
.book-list-page .bookListType1 .infor1 .txt2 p.book-meta,
.book-list-page .bookListType3 .infor1 .txt2 p.book-meta{
    display: flex;
    align-items: center;
    overflow: hidden;
}

.book-list-page .bookListType1 .infor1 .txt2 p.book-meta .book-meta-brand,
.book-list-page .bookListType3 .infor1 .txt2 p.book-meta .book-meta-brand{
    flex: 0 0 auto;
}

.book-list-page .bookListType1 .infor1 .txt2 p.book-meta .book-meta-author,
.book-list-page .bookListType3 .infor1 .txt2 p.book-meta .book-meta-author{
    display: block;
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* PC only: keep brand/author each around 5~6 chars for cleaner row balance */
@media all and (min-width: 721px){
    .book-list-page .bookListType1 .infor1 .txt2 p.book-meta,
    .book-list-page .bookListType3 .infor1 .txt2 p.book-meta{
        width: 50%;
        max-width: 50%;
        padding-right: 0;
    }

    .book-list-page .bookListType1 .infor1 .txt2 p.book-meta .book-meta-brand,
    .book-list-page .bookListType3 .infor1 .txt2 p.book-meta .book-meta-brand{
        display: inline-block;
        flex: 0 1 auto;
        max-width: 8em;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .book-list-page .bookListType1 .infor1 .txt2 p.book-meta .book-meta-author,
    .book-list-page .bookListType3 .infor1 .txt2 p.book-meta .book-meta-author{
        display: inline-block;
        flex: 1 1 auto;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}