.modal {
    --first-icon: url("data:image/svg+xml,%3Csvg width='24' height='25' viewBox='0 0 24 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M16.2 8.29996L12 12.5L16.2 16.7' stroke='%233366FF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M8 7L8 18' stroke='%233366FF' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E%0A");
    --prev-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='25' viewBox='0 0 24 25' fill='none'%3E%3Cpath d='M13.8 8.29996L9.60001 12.5L13.8 16.7' stroke='%233366FF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    position: fixed;
    left: 50%;
    top: 50%;
    z-index: var(--z-index);
    transform: translate(-50%, -50%);
    overflow: hidden;
    box-shadow: 0px 0px 25px 100vw #00000099;
    border-radius: 16px;

    &[data-state="open"] {
        display: block;
    }

    &[data-state="close"] {
        display: none;
    }

    .modal-head {
        width: var(--modal-width);
        height: 74px;
        background-color: #3366FF;

        [row] {
            height: 100%;
            justify-content: space-between;
            align-items: center;
            padding: 0 32px;

            p {
                font-size: 24px;
                font-weight: 700;
                line-height: 33.6px;
                color: #fff;
            }
        }
    }

    .modal-body {
        padding: 40px;
        background-color: #fff;

        h2 {
            text-align: center;
        }

        .border-top {
            border-top: 1px solid #DCDCDC;
            padding-top: 20px
        }

        .list-count {
            display: flex;
            gap: 4px;

            p {
                font-size: 1.25em;
                line-height: 1.1935em;
            }

            b {
                font-size: 1.25em;
                line-height: 1.1935em;
                color: #3366FF;
            }
        }


        table {
            &.tbody {
                width: 100%;
                border-radius: 8px;
                border-collapse: collapse;
                overflow: hidden;
                box-shadow: 1px 0 0 0px #BDBDBD;

                tbody {
                    tr {
                        td {
                            padding: 21.5px 20px;
                            border-bottom: 1px solid #BDBDBD;
                            border-top: 1px solid #BDBDBD;
                            font-size: 18px;
                            font-weight: 400;
                            line-height: 25.2px;
                            width: 340px;

                            &[head] {
                                width: 160px;
                                background-color: #EDF1FF;
                            }
                        }
                    }
                }
            }

            &.list {
                width: 100%;
                border-collapse: collapse;

                thead {
                    tr {
                        th {
                            border-top: 1px solid #999999;
                            border-bottom: 1px solid #999999;
                            font-size: 16px;
                            font-weight: 700;
                            line-height: 22.4px;
                            padding: 16px 0;
                        }
                    }
                }

                tbody {
                    tr {
                        td {
                            padding: 16px 0;
                            border-bottom: 1px solid #DCDCDC;
                            text-align: center;
                        }
                    }
                }
            }

            &.human-info {
                tbody {
                    tr {
                        td {
                            font-size: 16px;
                            font-weight: 400;
                            line-height: 22.4px;
                            width: auto;

                            &[head] {
                                width: 100px;
                                text-align: center;
                                font-size: 18px;
                            }

                            &[img] {
                                padding: 0;
                                width: 100px;
                                background-image: var(--img);
                                background-position: center center;
                                background-size: cover;
                                background-repeat: no-repeat;
                            }


                        }
                    }

                }

            }
        }

        .table-nav {
            padding: 28px 0;
            align-items: center;
            justify-content: center;

            button {
                cursor: pointer;
                padding: 8px;
                font-size: 0;
                width: 24px;
                height: 24px;
                display: block;
                background-repeat: no-repeat;
                background-position: center center;

                &.btn-first {
                    background-image: var(--first-icon);
                }

                &.btn-prev {
                    background-image: var(--prev-icon);
                }

                &.btn-last {
                    background-image: var(--first-icon);
                    rotate: 180deg;
                }

                &.btn-next {
                    background-image: var(--prev-icon);
                    rotate: 180deg;
                }
            }

            a {
                font-size: 18px;
                font-weight: 400;
                line-height: 25.2px;
                display: flex;
                justify-content: center;
                align-items: center;
                width: 40px;
                height: 40px;

                &[data-current="true"] {
                    border-radius: 100%;
                    background: #3366FF26;
                    color: #3366FF;
                }
            }



        }

        select {
            width: auto;
            height: 46px;
            padding: 12px 16px 12px 16px;
            border-radius: 8px;
            border: 1px solid #BDBDBD;

        }

        textarea {
            width: 800px;
            height: 112px;
            padding: 12px 16px 12px 16px;
            border: 1px solid #BDBDBD;
            border-radius: 8px;
            overflow: hidden;
            resize: none;
        }

        input {
            &[type="text"] {
                width: 800px;
                padding: 12px;
                border-radius: 8px;
                border: 1px solid #BDBDBD;
                display: flex;

                &[width] {
                    flex: 1 1 auto;
                    width: 100%;
                }
            }

            &[type="date"] {
                width: 148px;
                height: 41px;
                padding: 0 16px;
                gap: 0px;
                border-radius: 8px;
                justify-content: space-between;
                border: 1px solid #BDBDBD;

                &[width] {
                    flex: 1 1 auto;
                    width: 100%;
                }

                &[height] {
                    height: 100%;
                }
            }
        }

        .input-file {
            width: 308px;
            border: 1px solid #BDBDBD;
            border-radius: 8px;
            display: flex;
            align-items: center;

            p {
                width: 100%;
                color: #999999;
                padding-left: 16px
            }

            input {
                width: 0;
                height: 0;

            }
        }

        .category {
            display: inline-block;
            font-weight: 700;
            line-height: 1.4em;
            color: #3366FF;
            border-bottom: 2px solid #3366FF;
            padding-bottom: 2px;

            &.green {
                color: #04AA04;
                border-bottom: 2px solid #04AA04;
            }

            &.violet {
                color: #9835DA;
                border-bottom: 2px solid #9835DA;
            }

            &.orange {
                color: #F18744;
                border-bottom: 2px solid #F18744;
            }

            &.red {
                color: #D01C64;
                border-bottom: 2px solid #D01C64;
            }

            &.garsian {
                color: #0D98A1;
                border-bottom: 2px solid #0D98A1;
            }
        }

        .title {
            p {
                width: calc(var(--modal-width) - 40px - 40px);
                font-size: 24px;
                font-weight: 700;
                line-height: 33.6px;
                display: -webkit-box;
                /* 표시줄수 */
                -webkit-line-clamp: 1;
                -webkit-box-orient: vertical;
                overflow: hidden;
                text-overflow: ellipsis;
            }
        }

        .content {
            p {
                font-size: 16px;
                font-weight: 400;
                line-height: 22.4px;
            }
        }

        button {
            &.close {
                width: 147px;
                height: 60px;
                font-size: 20px;
                font-weight: 600;
                line-height: 28px;

            }
        }


    }
}