.curriculum-roadmap {
    .rm-grid {
        display: flex; gap: 20px; align-items: stretch; 
        .term {
            position: relative; flex: 1; border: 1px solid var(--line); border-radius: 10px; overflow: hidden;
            &.spring {
                .term-head {
                    background: #00453f;
                }
            }
            &.summer {
                .term-head {
                    background: #295983;
                }
            }
            &.fall {
                .term-head {
                    background: #312f71;
                }
            }
            .term-head {
                text-align: center; padding: 15px 0; font-size: 1.8rem; font-weight: 700; color: #fff;
            }
            .term-body {
                padding: 20px;
                .level {
                    &:not(:last-child) {
                        padding-bottom: 15px;
                    }
                    .level-tag { 
                        display: inline-flex; align-items: center; justify-content: center; padding: 2px 12px; border-radius: 999px; font-size: 1.4rem; font-weight: 800; margin: 0 0 7px; 
                        &.basic { 
                            background: #eafbf1; color: #18690f; border: 1px solid #b1d3b7; 
                        }
                        &.default { 
                            background: #e5efff; color: #1d4ed8; border: 1px solid #a7b8d5; 
                        }
                        &.advanced { 
                            background: #f7ebff; color: #7138ca; border: 1px solid #d0bff1; 
                        }
                        &.expert { 
                            background: #fff0d8; color: #b45309; border: 1px solid #e5c082; 
                        }
                    }
                    .box {
                        padding: 10px 15px; border-radius: 5px; background: #edf0f1; font-size: 1.6rem;
                        .list {
                            .item {
                                position: relative; padding-left: 10px;
                                &:not(:last-child) {
                                    margin-bottom: 5px;
                                }
                                &::before {
                                    content: ""; width: 4px; height: 4px; background: #666; border-radius: 50%; position: absolute; left: 0; top: 10px;
                                }
                            }
                        }
                    }
                }
            }
        }
    }
    .rm-foot {
        margin-top: 15px;
        .rm-legend {
            color: var(--theme); font-size: 1.6rem; font-weight: 700; text-align: center; background: #edf0f1; padding: 7px 0; border-radius: 5px; border: 1px solid var(--line);
        }
    }
}

@media (max-width: 1024px) {
    .curriculum-roadmap {
        .rm-grid {
            gap: 10px;
            .term {
                .term-body {
                    padding: 15px 10px;
                    .level {
                        .level-tag {
                            font-size: 1.2rem;
                        }
                        .box {
                            font-size: 1.4rem; padding: 8px 15px;
                            .list {
                                .item {
                                    padding-left: 8px;
                                    &::before {
                                        width: 3px; height: 3px; top: 8px;
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
        .rm-foot {
            .rm-legend {
                font-size: 1.5rem;
            }
        }
    }
}

@media (max-width: 768px) {
    .curriculum-roadmap {
        .rm-grid {
            flex-direction: column;
            .term {
                border-radius: 7px;
                .term-head {
                    font-size: 1.5rem; padding: 7px 0;
                }
            }
        }
    }
}