.main {
    /*user-select: none;*/
}

.title {
    font-size: 1em;
}

ul.tab-list-inline {
}

ul.tab-list-inline > li {
    display: inline-block;
    font-size: .8125rem;
    font-weight:bold;
}

    ul.tab-list-inline > li:not(:first-child)::before {
        content: "\00B7";
        margin: 0 5px 0 0px;
    }

    ul.tab-list-inline > li.active[data-bs-theme=light] {
        font-weight: 800;
        color: var(--phoenix-gray-900) !important;
    }
    ul.tab-list-inline > li:not(.active) {
        color: var(--phoenix-gray-600) !important;
    }

ul.tab2-list-inline > li {
    display: inline-block;
    font-size: .8125rem;
}

    ul.tab2-list-inline > li:not(:first-child)::before {
        content: "\00B7";
        margin: 0 5px 0 0px;
    }

ul.tabicon-list-inline {
}
    ul.tabicon-list-inline > li {
        padding-left: 1.125rem;
        padding-right: 1.125rem;
        /*border-right:solid 1px;*/
        display: inline-block; /* 인라인 블록 요소로 설정하여 한 줄에 표시 */
        text-align: center; /* 내부 요소를 가운데 정렬 */
    }

    ul.tabicon-list-inline > li:last-child {
        padding-right: 0rem;
    }

    ul.tabicon-list-inline > li:last-child {
        border-right:none;
    }
    ul.tabicon-list-inline > li > span  {
        display:block;
        align-items:center;
        justify-content:center;
    }
    ul.tabicon-list-inline > li > i {
        display: block;
        align-items: center;
        justify-content: center;
        line-height:25px;
    }
.webtoon-poster {
    max-width: 250px;
    width: 100%; /* 또는 다른 값을 적용 */
    height: 0; /* 초기 값 설정 */
    padding-bottom: 130%; /* height 값을 width의 1.5배로 설정 */
    position: relative; /* 상대 위치 설정 */
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    border: 1px solid rgba(0, 0, 0, 0.1);
}
.webtoon-profile {
    width: 100%; /* 또는 다른 값을 적용 */
    height: 0; /* 초기 값 설정 */
    padding-bottom: 130%; /* height 값을 width의 1.5배로 설정 */
    position: relative; /* 상대 위치 설정 */
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    border: 1px solid rgba(0, 0, 0, 0.1);
}
.webtoon-profile-right {
    width: 100px; /* 또는 다른 값을 적용 */
    height: 0; /* 초기 값 설정 */
    padding-bottom: 120%; /* height 값을 width의 1.5배로 설정 */
    position: relative; /* 상대 위치 설정 */
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    border: 1px solid rgba(0, 0, 0, 0.1);
}
.bg-black {
    background-color:black;
}
.text-white {
    color:white;
}
.fs-8-5 {
    font-size: 0.938rem;
}
.fs-9-5 {
    font-size: 0.72rem;
}
.fs-12px {
    font-size: 0.75rem;
}
.fs-13px {
    font-size: 0.813rem;
}
.fs-14px {
    font-size: 0.875rem;
}
.fs-16px {
    font-size: 1rem;
}
.fs-15px {
    font-size: 0.875rem;
}
.fs-17px {
    font-size: 1.063rem;
}
.fs-24px {
    font-size:24px;
}
.list-inline > li:not(:last-child) {
    margin-right: 1.25rem;
}
ul.list-item-gap-0 > li:not(:last-child) {
    margin-right:0px;
}

.webtoon-profile-horizon {
    width: 100%; /* 또는 다른 값을 적용 */
    height: 0; /* 초기 값 설정 */
    padding-bottom: 60%; /* height 값을 width의 1.5배로 설정 */
    position: relative; /* 상대 위치 설정 */
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    border: 1px solid rgba(0, 0, 0, 0.1);
}

.border-text {
    color: black; /* 텍스트의 색상을 검정으로 설정 */
    text-shadow: 1px 1px 0 white, -1px -1px 0 white, 1px -1px 0 white, -1px 1px 0 white; /* 여러 그림자를 추가하여 테두리 효과를 생성 */
}

.truncate-multiline {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3; /* 표시할 최대 줄 수 */
    -webkit-box-orient: vertical;
}
.fa-icon-wait {
    opacity: 1 !important;
}

.summery {
    white-space: pre-line;
    letter-spacing: -.5px;
    line-height:20px;
}
.btn-hover-disable {
    pointer-events:none !important;
}
.webtoon-icon {
    width:20px;
}

ul.list-inline-sp > li {
    margin-right:3px !important;
    
}
    ul.list-inline-sp > li:not(:last-child)::after {
        content: "\00B7";
        margin-left: 5px !important;
    }

ul.list-inline-grap > li {
    margin-right: 5px !important;
}

.line-height-1 {
    line-height: 1.438rem;
}

.btn-white {
    background-color:white !important;
}
.btn-outline-black {
    background-color: black !important;
    color: white !important;
    border-color: rgb(102, 102, 102) !important;
}
.positon-new {
    top:7px;
    left:7px;
    position:absolute;
}
.textarea-comment {
    resize:none;
}

.comment-list > .comment-item:last-child {
    border-bottom:none !important;
}

.text-new {
    color: #fff !important;
    background-color: RGBA(250, 59, 29, 1) !important;
}
.pt-2px {
    padding-top: 0.125rem;
}

.webtoon-content {
    padding-bottom: 2.5rem;
}
.webtoon-header, .webtoon-footer {
    transition: transform 0.5s ease, opacity 0.5s ease;
    position: fixed;
    left: 0;
    width: 100%;
    opacity: 1;
    color: white;
    z-index:999;
}
    .webtoon-header i {
        font-size: 1.688rem !important;
    }

.webtoon-header {
    top: 0;
    transform: translateY(0%);

    padding-top: 0.375rem;
    padding-bottom: 0.375rem;
}

.webtoon-footer {
    bottom: 0;
    transform: translateY(0%);
    padding-top: 0.375rem;
    padding-bottom: 0.375rem;
}
    .webtoon-footer  .comment i {
        font-size: 1rem !important;
    }

    .webtoon-footer i {
        font-size: 1.688rem !important;
    }
    .webtoon-footer ul {
        margin-bottom:0px;
    }
    .webtoon-footer span {
        font-size: 0.938rem;
        font-weight: 400;
    }
    /* 보이도록 변경된 스타일 */
    .webtoon-header.visible {
        opacity: 0;
        transform: translateY(-110%);
    } 
    .webtoon-footer.visible {
        opacity: 0;
        transform: translateY(110%);
    }

.webtoon-view .webtoon-view-item {
    display: flex;
    justify-content: center;
}
    .webtoon-view .webtoon-view-item img {
        max-width: 100%;
    }
.webtoon-list .webtoon-list-item {
    padding-top: 1rem;
    padding-bottom: 1rem;
}
    .webtoon-list .webtoon-list-item:not(:last-child) {
        border-bottom-color: rgb(242,242,242) !important;
        border-bottom: solid;
        border-width: 1px;
    }

.webtoon-thumnail {
    width: 100%;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

.btn-outline-gray, [data-bs-theme=dark] {
    border-color: rgb(63,63,63);
    color: white;
}
.btn-outline-gray {
    border-color: rgb(242,242,242);
    color: black;
}

    .btn-outline-gray:hover {
        border-color: rgb(242,242,242);
    }

.hover-scale:hover {
    transition: transform 0.3s ease;
    transform: scale(1.15);

    z-index:900;
}
.img-container {
}

    .img-container.img-container-4-3 {
        position: relative;
        width: 100%;
        padding-top: 75%; 
        overflow: hidden;
    }
    .img-container.img-container-10-13 {
        position: relative;
        width: 100%;
        padding-top: 130%; 
        overflow: hidden;
    }
    .img-container.img-container-16-9 {
        position: relative;
        width: 100%;
        padding-top: 56.25%;
        overflow: hidden;
    }
.img-container img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* 이미지를 cover로 설정하여 부모 요소에 맞게 조정 */

    border: 1px solid rgba(0, 0, 0, 0.1);
}

    .img-container.img-border-0 img {
        border:none;
    }
    .img-container.img-hover img:hover {
        transition: transform 0.3s ease;
        transform: scale(1.15);
    }
    .hover-scale .img-hover img:hover {
        transform: none;
    }

.swiper-slide {
    max-width: 17%;
    margin-left: 0.625rem;
}

.swiper-initialized .swiper-slide {
    margin-left: initial;
    max-width: initial;
}

.video-card {
    border:none;
}

    .video-card .playtime {
        position: absolute;
        right: 0.313rem;
        bottom: 0.313rem;
        font-size: 0.938rem;
        background-color: rgb(49,55,74);
        color: white;
        border-radius: 0.313rem;
        padding: 0.031rem 0.25rem 0.031rem 0.25rem;
    }

    .video-card span.title {
        font-weight:600;
    }

.video-container {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.video-container-16-9 {
    padding-bottom: 56.25%; /* 16:9 비율을 유지하기 위해 9 / 16 * 100% = 56.25% */
}

.video-container .video-js {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.preview {
    position: relative;
}

.preview-16-9 {
    padding-bottom: 56.25%; /* 16:9 비율을 유지하기 위해 9 / 16 * 100% = 56.25% */
}

.preview .preview-thumnail img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* 이미지를 cover로 설정하여 부모 요소에 맞게 조정 */
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    transition: transform 0.3s ease;
}

.preview .preview-thumnail {
    position: absolute;
    width: 100%;
    z-index: 90;
}

.preview .preview-video {
    position: absolute;
    width: 100%;
    opacity: 0;
    z-index: 100;
    transition-delay: 0.3s;
    transition: opacity 0 ease;
}

.preview:hover .preview-thumnail img  {
    transform:scale(1.1);
}

.preview:hover .preview-video {
    opacity: 1;
}

.preview .preview-timeline {
    position: absolute;
    right: 0.313rem;
    bottom: 0.513rem;
    font-size: 0.938rem;
    background-color: rgb(49,55,74);
    color: white;
    border-radius: 0.313rem;
    padding: 0.031rem 0.25rem 0.031rem 0.25rem;

    z-index:110;
}

.preview .preview-video .progress {
    position:absolute;
    bottom:0;
    z-index:110;
    width:100%;
    border-radius:0px;
}
.cursor-pointer:hover {
    cursor:pointer
}

.card-body-list:last-child {
    margin-bottom: 0px;
}
.card-body-list:not(:last-child) {
    margin-bottom: 2rem !important;
}
.diabled-button button {
    pointer-events: none;
    opacity: 0.6;
    cursor: not-allowed;
}
/* flatpickr 월 배경색 제거 */
.flatpickr-monthDropdown-months {
    background: transparent !important;
}

.print-page {
    margin-bottom: 20px;
}