@import "../table/_table";

.system-table {
    .table-desc {
        text-align: center; padding: 30px 0;
        .tit {
            font-size: 2.2rem; font-weight: 400; color: var(--navy); line-height: 1.5;
            b {
                font-size: 3rem; font-weight: 800;
            }
            &.bold {
                font-weight: 800;
            }
        }
    }
    .default-table {
        table {
            tr {
                th, td {
                    font-size: 1.6rem; background: #fff;
                }
                th {
                    color: #fff;
                }
                td {
                    text-align: left; padding: 10px 15px;
                    .txt {
                        position: relative; padding-left: 10px; color: #333;
                        &:not(:last-child) {
                            margin-bottom: 3px;
                        }
                        &:before {
                            content: ''; width: 4px; height: 4px; border-radius: 50%; background: #777; position: absolute; left: 0; top: 8px;
                        }
                    }
                    &.bg-pink {
                        background: #fff9fd !important;
                    }
                    &.bg-blue {
                        background: #f5faff !important;
                    }
                    &.bg-green {
                        background: #f9fff9 !important;
                    }
                    &.bg-gray {
                        background: #f7f7f7 !important;
                    }
                }
            }
        }
    }
}

.program-wrap {
    padding-top: 70px;
    .program-list {
        display: flex; gap: 10px;
        .item {
            flex: 1; padding-top: 30px; border-top: 1px solid #555;
            .tit-area {
                .label {
                    font-size: 1.4rem; display: inline-block; padding: 6px 10px; border-radius: 3px; line-height: 1; font-weight: 600;
                    &.type-1 {
                        background: #DFF2EB; color: #1a4d3c;
                    }
                    &.type-2 {
                        background: #D4EDF5; color: #1e5f6e;
                    }
                    &.type-3 {
                        background: #E3EEFF; color: #2a4a7e;
                    }
                    &.type-4 {
                        background: #EDE8F5; color: #4a3d6e;
                    }
                    &.type-5 {
                        background: #ffe3f7; color: #53243E;
                    }
                }
                .tit {
                    font-size: 2rem; font-weight: 800; padding-top: 10px;
                }
                .txt {
                    font-size: 1.5rem; line-height: 1.4; padding-top: 10px; color: #333; min-height: 75px;
                }
            }
            .img-area {
                width: 100%; position: relative; padding-bottom: 56%; overflow: hidden; border-radius: 5px; margin-top: 10px;
                img {
                    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; object-fit: cover;
                }
            }
        }
    }
    
}

/* 반응형 */
@media (max-width: 1024px) {
    .program-wrap {
        padding-top: 50px;
        .program-list {
            gap: 8px;
            .item {
                padding-top: 24px;
                .tit-area {
                    .label {
                        font-size: 1.3rem; padding: 5px 8px;
                    }
                    .tit {
                        font-size: 1.8rem; padding-top: 8px;
                    }
                    .txt {
                        font-size: 1.4rem; padding-top: 8px; min-height: 60px;
                    }
                }
                .img-area {
                    padding-bottom: 56%; margin-top: 8px;
                }
            }
        }
    }
    .system-table {
        .table-desc {
            padding: 24px 0;
            .tit {
                font-size: 2rem; line-height: 1.5;
                b {
                    font-size: 2.6rem;
                }
            }
        }
        .default-table {
            table {
                tr {
                    th, td {
                        font-size: 1.5rem;
                    }
                    td {
                        padding: 8px 12px;
                        .txt {
                            padding-left: 8px;
                            &:before {
                                top: 6px;
                            }
                        }
                    }
                }
            }
        }
    }
}

@media (max-width: 768px) {
    .program-wrap {
        padding-top: 40px;
        .program-list {
            flex-wrap: wrap; gap: 20px 8px;
            .item {
                flex: 1 1 calc(50% - 6px); min-width: 0; padding-top: 20px;
                .tit-area {
                    .tit {
                        font-size: 1.7rem; padding-top: 8px;
                    }
                    .txt {
                        font-size: 1.4rem; padding-top: 6px; min-height: 50px;
                    }
                }
                .img-area {
                    margin-top: 8px;
                }
            }
        }
    }
    .system-table {
        .table-desc {
            padding: 20px 0;
            .tit {
                font-size: 1.8rem;
                b {
                    font-size: 2.2rem;
                }
            }
        }
        .default-table {
            overflow-x: auto;
            table {
                min-width: 560px;
                tr {
                    th, td {
                        font-size: 1.4rem;
                    }
                    td {
                        padding: 6px 10px;
                        .txt {
                            font-size: 1.35rem; padding-left: 8px;
                            &:before {
                                width: 3px; height: 3px; top: 6px;
                            }
                        }
                    }
                }
            }
        }
    }
}

@media (max-width: 480px) {
    .program-wrap {
        padding-top: 30px;
        .program-list {
            flex-direction: column; gap: 24px;
            .item {
                flex: none; width: 100%; padding-top: 16px;
                .tit-area {
                    text-align: center; word-break: keep-all;
                    .txt {
                        min-height: auto;
                    }
                }
                .img-area {
                    margin-top: 6px;
                }
            }
        }
    }
    .system-table {
        .table-desc {
            padding: 16px 0;
            .tit {
                font-size: 1.6rem; line-height: 1.6;
                b {
                    font-size: 1.9rem;
                }
            }
        }
        .default-table {
            table {
                min-width: 480px;
                tr {
                    th, td {
                        font-size: 1.3rem;
                    }
                    td {
                        padding: 6px 8px;
                        .txt {
                            font-size: 1.25rem; padding-left: 6px;
                            &:not(:last-child) {
                                margin-bottom: 2px;
                            }
                            &:before {
                                width: 3px; height: 3px; top: 5px;
                            }
                        }
                    }
                }
            }
        }
    }
}