/* 입퇴원안내 */
:root {
    --admission-padding-base: clamp(2px, 0.781vw, 5px);

    --admission-process-grid-gap: clamp(60px, 7.576vw, 100px);

    --admission-process-grid-item-before-width: calc(var(--admission-process-grid-item-after-width) * 0.265);
    --admission-process-grid-item-after-width: clamp(28px, 2.576vw, 34px);

    --admission-process-grid-item-gap: calc(var(--admission-padding-base) * 4);
    --admission-process-grid-item-height: clamp(180px, 18.561vw, 245px);
    --admission-process-grid-item-border-radius: clamp(9px, 1.364vw, 18px);

    --admission-process-grid-item-span-width: clamp(80px, 14.844vw, 95px);
    --admission-process-grid-item-span-border-radius: 15px;

    --admission-process-grid-item-img-box-height: 60px;

    --admission-list-item-span-width: clamp(28px, 5vw, 32px);
    --admission-list-item-h4-width-sm: clamp(100px, 18.75vw, 120px);
    --admission-list-item-h4-width-lg: 
        calc(var(--admission-list-item-h4-width-sm) 
        + var(--admission-list-item-span-width))
    ;

    --admission-list-grid-02-columns: 
        var(--admission-list-item-h4-width-lg)
        auto
    ;
    --admission-list-grid-03-columns: 
        var(--admission-list-item-span-width) 
        var(--admission-list-item-h4-width-sm)
        auto
    ;

    --admission-note-padding: calc(var(--admission-padding-base) * 8);
}

@media screen and (max-width: 400px) {
    :root {
        --admission-process-grid-item-height: 150px;
        --admission-list-item-h4-width-sm: 80px;
    }
}

.admission-btn-box {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: calc(var(--admission-padding-base) * 2);
    margin-top: var(--mobile-content-vertical-gap-sm);

    & .btn-admission {
        padding: 
            calc(var(--admission-padding-base) * 4) 
            calc(var(--admission-padding-base) * 10)
        ;
        border-radius: var(--admission-process-grid-item-border-radius);
        font-size: var(--font-size-18);
        font-weight: var(--font-weight-bold);
        border: 1px solid var(--color-line-02);

        &.active {
            border: 1px solid var(--color-main-03);
            background-color: var(--color-main-03);
            color: var(--color-main-white);
        }
    }
}

.admission-container {
    padding-bottom: var(--mobile-content-vertical-gap-sm);
}

.admission-process-grid {
    display: grid;
    column-gap: var(--admission-process-grid-gap);
    row-gap: calc(var(--admission-process-grid-gap) / 4);

    &.hospitalization {
        grid-template-columns: repeat(4, 1fr);

        @media screen and (max-width: 600px) {
            & {grid-template-columns: repeat(2, 1fr);}
        }
    }

    &.discharge {
        grid-template-columns: repeat(3, 1fr);

        @media screen and (max-width: 600px) {
            & {grid-template-columns: repeat(2, 1fr);}
        }
    }

    & .admission-process-grid-item {
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: var(--admission-process-grid-item-gap);
        width: 100%;
        height: var(--admission-process-grid-item-height);
        border-radius: var(--admission-process-grid-item-border-radius);
        background-color: var(--color-admission-01);

        /* 오른쪽 동그라미 화살표 */
        &:not(:last-child)::before,
        &:not(:last-child)::after {
            position: absolute;
            display: flex;
            justify-content: center;
            align-items: center;
            aspect-ratio: 1/1;
            content: '';
        }
        &:not(:last-child)::before {
            right: 
                calc((calc(var(--admission-process-grid-gap) / 2) 
                + calc(var(--admission-process-grid-item-before-width) / 2.75) 
                ) * -1);
            width: var(--admission-process-grid-item-before-width);
            border-width: 2px 2px 0 0;
            border-style: solid;
            border-color: var(--color-text-02);
            transform: rotate(45deg);
        }
        &:not(:last-child)::after {
            right: 
                calc((calc(var(--admission-process-grid-gap) / 2) 
                + calc(var(--admission-process-grid-item-after-width) / 2) 
                ) * -1);
            width: var(--admission-process-grid-item-after-width);
            border-radius: 50%;
            border: 1px solid var(--color-line-02);
        }

        @media screen and (max-width: 600px) {
            &:nth-child(2)::before, 
            &:nth-child(2)::after {display: none;}
        }

        & span {
            display: flex;
            justify-content: center;
            align-items: center;
            width: var(--admission-process-grid-item-span-width);
            aspect-ratio: 1/0.316;
            border-radius: var(--admission-process-grid-item-span-border-radius);
            background-color: var(--color-main-03);
            font-size: var(--font-size-14);
            color: var(--color-main-white);
            letter-spacing: 0.5px;
        }

        & .grid-img-box {
            display: flex;
            justify-content: center;
            align-items: center;
            height: var(--admission-process-grid-item-img-box-height);

            & img {max-width: clamp(60px, 5.682vw, 75px);}
        }
        
        & p {
            font-size: var(--font-size-18);
            font-weight: var(--font-weight-bold);

            @media screen and (max-width: 640px) {
                & {font-size: var(--font-size-16);}
            }
        }
    }
}

.admission-list {
    display: flex;
    flex-direction: column;
    width: 100%;

    & .admission-list-item {
        display: grid;
        align-items: center;
        padding: 
            calc(var(--admission-padding-base) * 4) 
            calc(var(--admission-padding-base) * 2)
        ;

        &.grid-02 {grid-template-columns: var(--admission-list-grid-02-columns);}
        &.grid-03 {grid-template-columns: var(--admission-list-grid-03-columns);}

        &:not(:last-child) {
            border-bottom: 1px solid var(--color-line-01);
        }

        & span {
            display: flex;
            justify-content: center;
            align-items: center;
            width: var(--admission-list-item-span-width);
            aspect-ratio: 1/1;
            border-radius: 50%;
            background-color: var(--color-main-03);
            font-size: var(--font-size-14);
            font-weight: var(--font-weight-bold);
            color: var(--color-main-white);
        }
        & :where(h4, p) {
            font-size: var(--font-size-18);

            @media screen and (max-width: 640px) {
                & {font-size: var(--font-size-16);}
            }
        }
        & h4 {
            display: flex;
            align-items: center;
            padding: 0 calc(var(--admission-padding-base) * 4);
        }

        & p {
            padding-left: calc(var(--admission-padding-base) * 4);
            color: var(--color-admission-03);
            line-height: 1.5;

            @media screen and (max-width: 640px) {
                & {padding-left: 0;}
            }

            & em {
                margin-left: calc(var(--admission-padding-base) * 2);
                font-weight: var(--font-weight-semi-bold);
                color: var(--color-main-03);
            }
        }
    }
}

.admission-note {
    margin-top: calc(var(--admission-padding-base) * 4);
    padding: var(--admission-note-padding);
    border-radius: var(--admission-process-grid-item-border-radius);
    background-color: var(--color-admission-01);

    & .admission-note-txt {
        display: flex;
        justify-content: center;
        gap: 5px;
        font-size: var(--font-size-18);
        font-weight: var(--font-weight-bold);
        line-height: 1.3;

        @media screen and (max-width: 640px) {
            & {font-size: var(--font-size-16);}
        }

        & i {color: var(--color-admission-02);}
    }

    & h4 {
        font-size: var(--font-size-22);
    }

    & .admission-note-list {
        display: flex;
        flex-direction: column;
        gap: calc(var(--admission-padding-base) * 4);
        margin-top: calc(var(--admission-padding-base) * 5);

        & li {
            position: relative;
            padding-left: calc(var(--admission-padding-base) * 4);
            font-size: var(--font-size-18);
            color: var(--color-admission-03);
            line-height: 1.3;

            &::before {
                position: absolute;
                left: 0;
                top: calc(var(--font-size-18) / 2.5);
                width: clamp(5px, 1.25vw, 8px);
                aspect-ratio: 1/1;
                border-radius: 50%;
                background-color: var(--color-main-03);
                content: '';
            }

            @media screen and (max-width: 640px) {
                & {
                    font-size: var(--font-size-16);

                    &::before {top: calc(var(--font-size-16) / 2.5);}
                }
            }
        }
    }
}