@charset "utf-8";
@import url("../fonts/font_css/fonts.css");
html {
    font-size:18px;
    scrollbar-width: none;
}
html::-webkit-scrollbar {
     display: none; /* 크롬, 사파리, 오페라 등 */
}
body {
    font-family:'Pretendard';
    color:#222;
}


.viewercenter {
    width:100%;
    height: 100%;
    max-width:720px;
    /* padding:0 20px; */
    margin:auto;
    position: relative;
}
#viewer {
    display: flex;
    flex-direction: column;
    height: 100%;
}
#viewer .viewer_head_foot {
    display:flex;
    align-items:center;
    justify-content:space-between;
    z-index: 10;
}
#viewer .viewer_head_foot .icon {
    width:20px;
    height:30px;
    display:flex;
    align-items:center;
    justify-content:center;
}
#viewer .viewer_head_foot .viewerbtn {
    display:flex;
    align-items:center;
    justify-content: center;
    gap:5px;
    background:transparent;
    /* width:110px; */
}
#viewer .viewer_head_foot .viewerbtn p {
    font-size:0.88rem;
    font-weight:500;
}
#viewer .viewer_head_foot .book_name {
    flex:1;
    font-size:1.22rem;
    text-align:center;
    font-weight:500;
}
#viewer .viewer_head_foot .bookmark_btn.active {
    color:#774C9E;
}

#viewer .viewer_header,
#viewer .viewer_footer {
    background-color:#F9F9F9;
    height:60px;
    display: flex;
    align-items: center;
}
#viewer .viewer_header {
    border-bottom:1px solid #CACACA;
}
#viewer .viewer_footer {
    width: 100%;
    border-bottom:none;
}
#viewer .hide {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}
#viewer .viewer_container {
    flex: 1;
}
#viewer .viewer_container .view_box {
    height: 100%;
    padding:60px 30px 30px 30px;
    max-height:calc(100vh - 120px);
    overflow-y:scroll;
    -ms-overflow-style: none; /* IE 및 Edge */
    scrollbar-width: none;
    line-height:30px;
    font-family: "KoPubWorld Batang";
}
#viewer .viewer_container .view_box p {
    padding: 16px 0;
    line-height: 160%;;
}
#viewer .viewer_container .view_box::-webkit-scrollbar {
     display: none; /* 크롬, 사파리, 오페라 등 */
}
#viewer .viewer_container .ttsbtn {
    position:absolute;
    right:30px;
    top:25px;
    border-radius:999px;
    background-color:#774C9E;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:7px;
    padding:10px;
    font-size:0.75rem;
    font-weight:700;
    text-align:center;
    color:#fff;
}
#viewer .setting_cont {
    position:absolute;
    right:0;
    bottom:60px;
    width:100%;
    max-width:400px;
    padding:10px;
    /* display:flex; */
    flex-direction:column;
    gap:5px;
    border:1px solid #CACACA;
    background-color:#F9F9F9;
    display:none;
}
#viewer .setting_cont.active {
    display:flex;
}
#viewer .setting_cont .setting_box {
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:7px 10px;
}
#viewer .setting_cont .setting_box .setting_name {
    font-size:0.88rem;
    font-weight:500;
}
#viewer .setting_cont .setting_box .setting_option {
    display:flex;
    align-items:center;
    gap:10px;
}
#viewer .setting_cont .setting_box .setting_option button {
    display:flex;
    align-items:center;
    gap:5px;
    border:1px solid #8E8E8E;
    border-radius:5px;
    padding:2px 10px;
    height:30px;
    background-color:#fff;
    font-size:0.77rem;
    color:#555;
    font-weight:600;
}
#viewer .setting_cont .setting_box .setting_option .theme00 {
    border-color:#222;
    background-color:#fff;
    color:#222;
}
#viewer .setting_cont .setting_box .setting_option .theme01 {
    background-color:#EDFAE0;
    color:#222;
}
#viewer .setting_cont .setting_box .setting_option .theme02 {
    background-color:#F5EFCA;
    color:#222;
}
#viewer .setting_cont .setting_box .setting_option .theme03 {
    background-color:#222;
    color:#fff;
}

/* 비회원 제한 */
#viewer .nonmember {
    position:fixed;
    width:100%;
    height:calc(100% - 120px);
    left:0;
    top:60px;
    z-index:10;
    background-color:transparent;
}
#viewer .nonmember .nonmember_blur {
    position:fixed;
    width:100%;
    height:420px;
    left:0;
    bottom:60px;
    z-index:11;
    /* background: RGBA(255,255,255,0); */
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgb(255 255 255 / 100%) 100%);
    /* backdrop-filter: blur(2px); */
    display: flex;
    align-items: flex-end;
    justify-content: center;
}
#viewer .nonmember .nonmember_blur::before {
    content:'';
    width:100%;
    height:400px;
    background: RGBA(255,255,255,0);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgb(255 255 255 / 90%) 62%);
    position: fixed;
    left: 0;
    bottom: 0;
    z-index: 10;
}
#viewer .nonmember .nonmember_blur .nonmember_text {
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:15px;
    position: relative;
    z-index: 12;
    bottom: 50px;
}
#viewer .nonmember .nonmember_blur .nonmember_text .nonmember_ti {
    font-size:0.88rem;
    font-weight:400;
    letter-spacing:-0.48px;
    text-align:center;
}
#viewer .nonmember .nonmember_blur .nonmember_text .nonmember_btn {
    display:flex;
    align-items:center;
    gap:20px;
}
#viewer .nonmember .nonmember_blur .nonmember_text .nonmember_btn a {
    background-color:#555;
    border-radius:5px;
    width:90px;
    padding:3px 10px;
    font-size:0.88rem;
    font-weight:-0.48px;
    font-weight:600;
    color:#fff;
    text-align:center;
}
#viewer .nonmember .nonmember_blur .nonmember_text .nonmember_btn .join {
    background-color:#774C9E;
}


/* 반응형 미디어쿼리 css */
@media (max-width:640px) {
    html {
        font-size:16px;
    }
    #viewer .viewer_head_foot .viewerbtn {
        width:auto;
    }
    #viewer .viewer_header .viewerbtn p {
        display:none;
    }
    #viewer .viewer_footer {
        height:70px;
    }
    #viewer .viewer_footer .viewer_head_foot{
        justify-content:space-evenly;
    }

    #viewer .viewer_footer .viewerbtn {
        display:flex;
        flex-direction:column;
        width:70px;
    }
    #viewer .viewer_head_foot .viewerbtn p {
        font-size:0.75rem;
    }
    #viewer .viewer_container .view_box {
        max-height: calc(100vh - 130px);
    }
    #viewer .nonmember .nonmember_blur {
        bottom:70px;
    }
}