@font-face {
    font-family: "Outfit";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("../fonts/outfit-bold-pdf.woff2") format("woff2");
    unicode-range: U+44, U+46, U+50;
}

.ptt-art {
    --ptt-ease: cubic-bezier(.22, 1, .36, 1);
    --ptt-line: #F9B4A8;
    --ptt-sk: #DCDFE4;
    position: relative;
    width: 150px;
    height: 106px;
}

.ptt-art .ptt-pdoc,
.ptt-art .ptt-tdoc {
    position: absolute;
    box-sizing: border-box;
    border-radius: 10px;
    border: 1.5px solid var(--ptt-line);
    box-shadow: 0 1px 2px rgba(18, 24, 38, .06), 0 4px 14px rgba(18, 24, 38, .06);
    transition: transform .6s var(--ptt-ease), opacity .45s var(--ptt-ease);
    will-change: transform;
}

.ptt-art .ptt-pdoc {
    left: 46.25px;
    top: 16.485px;
    width: 57.5px;
    height: 71.03px;
    z-index: 2;
    background: linear-gradient(160deg, #FFFFFF 35%, #FFF1EE);
}

.ptt-art .ptt-tdoc {
    left: 50.5px;
    top: 22px;
    width: 49px;
    height: 60px;
    z-index: 1;
    background: #FFFFFF;
    opacity: 0;
    transform: scale(.9);
}

.ptt-art .ptt-tdoc b {
    position: absolute;
    left: 7px;
    top: 7px;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .04em;
    line-height: 1;
    color: #E2533D;
}

.ptt-art .ptt-tag {
    position: absolute;
    left: 7px;
    bottom: 6px;
    padding: 3px 5px;
    font-family: "Outfit", sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .05em;
    line-height: 1;
    color: #FF6F59;
    transform: translate(6px, -20px) scale(1.4);
    transition: transform .6s var(--ptt-ease);
}

.ptt-art .ptt-lns {
    position: absolute;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ptt-art .ptt-pdoc .ptt-lns {
    left: 8.5px;
    top: 11px;
    gap: 5px;
}

.ptt-art .ptt-tdoc .ptt-lns {
    left: 7px;
    top: 20px;
    gap: 4px;
}

.ptt-art .ptt-lns i {
    display: block;
    height: 4px;
    border-radius: 3px;
    background: var(--ptt-sk);
    opacity: 0;
    transition: opacity .4s ease;
}

.ptt-art .ptt-pdoc .ptt-lns i { width: 36px; }
.ptt-art .ptt-pdoc .ptt-lns i:nth-child(2) { width: 27px; }
.ptt-art .ptt-pdoc .ptt-lns i:nth-child(3) { width: 33px; }
.ptt-art .ptt-pdoc .ptt-lns i:nth-child(4) { width: 20px; }
.ptt-art .ptt-tdoc .ptt-lns i { width: 32px; }
.ptt-art .ptt-tdoc .ptt-lns i:nth-child(2) { width: 24px; }
.ptt-art .ptt-tdoc .ptt-lns i:nth-child(3) { width: 29px; }

#drop-zone:hover .ptt-art .ptt-pdoc,
#drop-zone.upload-area-hover .ptt-art .ptt-pdoc {
    transform: translateX(-17px) rotate(-6deg);
}

#drop-zone:hover .ptt-art .ptt-tdoc,
#drop-zone.upload-area-hover .ptt-art .ptt-tdoc {
    opacity: 1;
    transform: translateX(29px) rotate(7deg);
}

#drop-zone:hover .ptt-art .ptt-tag,
#drop-zone.upload-area-hover .ptt-art .ptt-tag {
    transform: none;
}

#drop-zone:hover .ptt-art .ptt-lns i,
#drop-zone.upload-area-hover .ptt-art .ptt-lns i {
    opacity: 1;
}

#drop-zone:hover .ptt-art .ptt-pdoc .ptt-lns i:nth-child(1) { transition-delay: .12s; }
#drop-zone:hover .ptt-art .ptt-pdoc .ptt-lns i:nth-child(2) { transition-delay: .18s; }
#drop-zone:hover .ptt-art .ptt-pdoc .ptt-lns i:nth-child(3) { transition-delay: .24s; }
#drop-zone:hover .ptt-art .ptt-pdoc .ptt-lns i:nth-child(4) { transition-delay: .3s; }
#drop-zone:hover .ptt-art .ptt-tdoc .ptt-lns i:nth-child(1) { transition-delay: .22s; }
#drop-zone:hover .ptt-art .ptt-tdoc .ptt-lns i:nth-child(2) { transition-delay: .28s; }
#drop-zone:hover .ptt-art .ptt-tdoc .ptt-lns i:nth-child(3) { transition-delay: .34s; }

@media (prefers-reduced-motion: reduce) {
    .ptt-art * {
        transition: none !important;
    }
}

.ptt-page {
    position: relative;
    flex-shrink: 0;
    max-width: 100%;
    border-radius: 8px;
    background: #FFFFFF;
    box-shadow: 0px 1px 8px -2px rgba(0, 0, 0, 0.08);
}

.ptt-page > img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 8px;
}

.ptt-page::after {
    content: "";
    position: absolute;
    inset: 0;
    border: 1px solid #E8E8E8;
    border-radius: inherit;
    pointer-events: none;
}

.ptt-page-delete {
    z-index: 1;
    display: none;
}

.ptt-page-number {
    display: none;
}

@media (max-width: 639px) {
    #ptt-preview-modal .ptt-page {
        margin-bottom: 22px;
    }

    #ptt-preview-modal .ptt-page-number {
        display: block;
        position: absolute;
        right: 0;
        top: calc(100% + 6px);
        font-size: 12px;
        font-weight: 500;
        line-height: 16px;
        color: #7A7B8E;
    }
}

.ptt-page-tooltip {
    opacity: 0;
    transition: opacity 0.2s ease-out;
}

#ptt-preview-modal .ptt-pages-ready .ptt-page:hover .ptt-page-delete {
    display: block;
}

.ptt-scroll-thumb:hover .ptt-page-tooltip,
.ptt-scroll-thumb.ptt-dragging .ptt-page-tooltip,
.ptt-scroll-thumb.ptt-tooltip-show .ptt-page-tooltip {
    opacity: 1;
}

@media (hover: none) {
    #ptt-preview-modal .ptt-pages-ready .ptt-page-delete {
        display: block;
    }
}

.cross_img:disabled,
.ptt-cancel-upload:disabled,
.processing-div .start_over:disabled {
    cursor: not-allowed;
    opacity: .5;
}

.ptt-compare-page + .ptt-compare-page {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid #E8E8E8;
}

.ptt-frost {
    background-image: linear-gradient(89.26deg, #F6FCF8 2.33%, #FFF9F8 99.42%);
}

.ptt-no-scrollbar {
    scrollbar-width: none;
}

.ptt-no-scrollbar::-webkit-scrollbar {
    display: none;
}

@keyframes ptt-loader {
    from {
        left: -482px;
    }

    to {
        left: 100%;
    }
}

.ptt-loader-fill {
    animation: ptt-loader 1.4s linear infinite;
    background-image: linear-gradient(90deg, rgba(255, 153, 136, 0) 0%, #FF9988 32.21%, #FF7A64 65.39%, rgba(255, 122, 100, 0) 100%);
}