.preview-box {
    width: 24rem;
    background-color: var(--limseo-white);
    /* flex */
    display: flex;
    flex-direction: column;
    /* border */
    border-left-style: solid;
    border-width: var(--border-thickness);
    border-color: var(--light-gray);
    /* position */
    position: fixed;
    z-index: 99;
    top: 0;
    bottom: 0;
    right: 0;
    /* others */
    --elevation: 8;
    /* animation */
    transition: transform .4s ease;
}

    .preview-box > *,
    .preview-box .body > * {
        margin-bottom: 1.5rem;
        transition: opacity .2s ease-in-out;
    }
    .preview-box > .header,
    .preview-box > .footer {
        padding-inline: 2rem;
    }

    .preview-box > .header {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        margin-top: 1.5rem;
        padding-block: 0;
    }
        .preview-box > .header > * { padding: 0; }
        .preview-box > .header > .preview-box-title {
            font-weight: 700;
            margin: 0;
        }
        .preview-box > .header > button {
            font-size: 2.5rem;
            font-weight: 100;
            color: var(--heavy-gray);
            height: 100%;
            aspect-ratio: 1 / 1;
        }

    .preview-box > .body {
        overflow-y: auto;
        padding-inline: 0;
    }
        .preview-box > .body > * {
            display: flex;
            flex-direction: column;
            padding-inline: 0;
        }
            .preview-box > .body > * >.row {
                display: flex;
                flex-direction: row;
                justify-content: space-between;
                align-items: flex-start;
                padding-block: 3px;
                padding-inline: 2rem;
            }
                .preview-box > .body > * > .row > *:first-child { margin-right: 2rem; }
                .preview-box > .body > * > .row > *:last-child { text-align: end; }
                .preview-box > .body > * > .row:hover { background-color: var(--limseo-superlight-lblue); }

    .preview-box > .footer {
        display: flex;
        justify-content: space-between;
        margin-top: auto;
    }
        .preview-box > .footer > button {
            margin-top: 1rem;
            font-size: 1rem;
            font-weight: 600;
            padding: .7rem 1rem;
        }

.slidind_out_X { transform: translateX(100%); }
.fading_out { opacity: 0; }