.appr_line_box {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 77px;
    min-width: 330px;
    max-width: 330px;
    margin-left: 50px;
}

@media screen and (max-width: 1560px){
    .appr_line_box {
        display: none;
    }
}

.eap_line_box {
    display: flex;
    width: 100%;
}


.step {
    display: flex;
    align-items: center;
    flex-basis: 100%;


    & + &::before {
        content: '';
        flex-grow: 1;
        width: 40px;
        border-bottom: 1px solid var(--color-divider-light);
    }

    & + &.current::before {
        //width: 40px;
        //border-bottom: 1px dashed #B2B3B9;
    }

    & + &.pending::before {
        border-bottom: 1px dashed var(--color-divider-light);
    }

    &:not(& + &) {
        flex-shrink: 2;
    }
}

.empty {
    width: 100%;
}

.eap_appr_item {
    width: 24px;
    height: 24px;
    aspect-ratio: 1;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.875rem;
    padding: 6px;

    &.complete {
        background-color: var(--accent-teal-700);
        color: var(--color-text-inverse);
    }

    &.pending {
        background-color: var(--color-bg-caution);
        color: var(--color-text-inverse);
    }

    &.current_item {
        width: 48px;
        height: 48px;
        border: 1px dashed  var(--color-border-warning);
        background-color: var(--color-bg-warning-subtler);
    }

    &.current_item.complete {
        border: 1px solid  var(--color-bg-information);
        background-color: var(--color-bg-default);
    }
}


.appr_process {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    place-items: center;


    .appr_target_name_block {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        width: 100%;
        font-family: Pretendard, sans-serif;
        font-size: 0.875rem;
        font-weight: 400;
        line-height: 150%;
        letter-spacing: -0.2px;
        color: var(--color-text);
        padding: 0 12px;


        &.current {
            font-weight: 600;
        }

        & + &::before {
            content: '';
            mask-image: url(../../img/svg/ic_cmm_arrow_right.svg);
            mask-repeat: no-repeat;
            mask-size: auto;
            mask-position: center;
            position: absolute;
            width: 12px;
            height: 12px;
            left: 0;
            background-color: var(--color-icon);
            transform: translateX(-50%);
        }
    }

    .appr_target_name {
        display: flex;
        white-space: nowrap;
    }

    .appr_item_name {
        max-width: 50px;
        margin-right: 5px;
        text-overflow: ellipsis;
        overflow: hidden;
    }
}