#main-area {
    .main-wrap {
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;

        main {
            width: 100%;
            padding: var(--side-padding);

            #schedule-section {
                width: 100%;
                height: 100%;


                .schedule-info {
                    margin-bottom: var(--size30);

                    .schedule-info-main {
                        background-color: var(--color-main);
                        color: var(--color-bg);
                        padding: var(--size20);
                        border-radius: 8px;
                        text-align: center;

                        ul {
                            list-style: none;
                            display: flex;
                            flex-direction: column;
                            gap: var(--size12);
                            align-items: center;

                            li {

                                color: var(--color-bg);
                                display: flex;
                                align-items: center;
                                gap: var(--size12);

                                &:first-child {
                                    font-weight: bold;

                                    margin-bottom: var(--size08);
                                }

                                &:nth-child(2) {
                                    a {
                                        background-color: var(--color-orange-dark);
                                        color: var(--color-bg);
                                        padding: var(--size08) var(--size16);
                                        border-radius: 4px;
                                        font-weight: bold;
                                        text-decoration: none;
                                        transition: all 0.3s ease;

                                        &:hover {
                                            background-color: var(--color-orange);
                                            transform: translateY(-1px);
                                            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
                                        }
                                    }
                                }

                                &:last-child {

                                    opacity: 0.9;
                                }

                                time {
                                    font-weight: bold;
                                }
                            }
                        }
                    }
                }

                .schedule-list {
                    .schedule-list-card-wrap {
                        display: grid;
                        grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
                        gap: var(--size24);

                        @media screen and (max-width: 768px) {
                            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
                            gap: var(--sp_size12);
                        }

                        @media screen and (max-width: 440px) {
                            grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
                            gap: var(--sp_size12);
                        }

                        .schedule-list-card {
                            background-color: var(--color-bg);
                            border: 2px solid var(--color-main-light);
                            border-radius: 12px;
                            overflow: hidden;
                            transition: all 0.3s ease;
                            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);

                            .schedule-month {
                                background-color: var(--color-main);
                                color: var(--color-bg);
                                font-size: var(--size20);
                                font-weight: bold;
                                padding: var(--size12) var(--size20);
                                margin: 0;
                                text-align: center;
                            }

                            .schedule-list-card-inner {
                                padding: var(--size20);

                                .schedule-list-card-inner-day {
                                    margin-bottom: var(--size16);

                                    ul {
                                        list-style: none;
                                        display: flex;
                                        flex-wrap: wrap;
                                        gap: var(--size08);

                                        li {
                                            border: 1px solid var(--color-orange-dark);
                                            color: var(--color-orange-dark);
                                            font-size: var(--size16);
                                            font-weight: bold;
                                            padding: var(--size04) var(--size08);
                                            border-radius: 12px;
                                            white-space: nowrap;

                                            &.red {
                                                color: var(--color-red);
                                                text-decoration: line-through;
                                            }
                                        }
                                    }
                                }

                                .schedule-list-card-inner-event {
                                    margin-bottom: var(--size16);
                                    border-bottom: 1px solid var(--color-main);
                                    border-top: 1px solid var(--color-main);
                                    padding: var(--size12) 0;

                                    p {
                                        margin: 0;
                                        line-height: 1.6;

                                        &.event-title {
                                            font-weight: bold;
                                            color: var(--color-main);
                                            font-size: var(--size16);
                                            margin-bottom: var(--size04);

                                            &.red {
                                                color: var(--color-red);
                                                text-decoration: line-through;
                                            }
                                        }

                                        &.event-place {
                                            font-weight: bold;
                                            color: var(--color-main);
                                            font-size: var(--size16);
                                            margin-bottom: var(--size04);
                                            margin-top: var(--size12);
                                        }

                                        &:not(.event-title):not(.event-place) {
                                            font-size: var(--size16);
                                            color: var(--color-text-dark);
                                            margin-bottom: var(--size04);

                                            &.red {
                                                color: var(--color-red);
                                                text-decoration: line-through;
                                            }

                                            &.event-name {
                                                font-size: var(--size18);
                                                font-weight: 600;
                                                margin-bottom: var(--size12);
                                            }

                                            &:nth-of-type(4) {
                                                margin-bottom: 0;
                                            }
                                        }
                                    }
                                }

                                .schedule-list-card-inner-etc {
                                    p {
                                        font-size: var(--size16);
                                        color: var(--color-text-dark);
                                        margin: 0;
                                        line-height: 1.4;

                                        &:not(:last-child) {
                                            margin-bottom: var(--size04);
                                        }
                                    }
                                }
                            }

                            @media screen and (max-width: 768px) {
                                border-radius: var(--sp_size10);

                                .schedule-month {
                                    font-size: var(--sp_size20);
                                }

                                .schedule-list-card-inner {
                                    padding: var(--sp_size12);

                                    .schedule-list-card-inner-day {
                                        margin-bottom: var(--sp_size12);
                                        padding: var(--sp_size12);

                                        ul {
                                            gap: var(--sp_size08);

                                            li {
                                                font-size: var(--sp_size16);
                                                padding: var(--sp_size04) var(--sp_size10);
                                                border-radius: var(--sp_size10);
                                            }
                                        }

                                    }


                                    .schedule-list-card-inner-event {
                                        margin-bottom: var(--sp_size12);
                                        padding: var(--sp_size12);

                                        p {
                                            &.event-title {
                                                font-size: var(--sp_size18);
                                                margin-bottom: var(--sp_size08);
                                            }

                                            &.event-place {
                                                font-size: var(--sp_size18);
                                                margin-bottom: var(--sp_size08);
                                                margin-top: var(--sp_size12);
                                            }


                                            &:not(.event-title):not(.event-place) {
                                                font-size: var(--sp_size18);
                                                margin-bottom: var(--sp_size08);

                                                &.event-name {
                                                    font-size: var(--sp_size18);
                                                    margin-bottom: var(--sp_size12);
                                                }
                                            }

                                        }
                                    }

                                    .schedule-list-card-inner-etc {

                                        p {
                                            font-size: var(--sp_size18);

                                            &:not(:last-child) {

                                                margin-bottom: var(--sp_size08);
                                            }
                                        }
                                    }
                                }
                            }

                            @media screen and (max-width: 440px) {
                                border-radius: var(--sp_size10);

                                .schedule-month {
                                    font-size: var(--sp_size28);
                                }

                                .schedule-list-card-inner {
                                    padding: var(--sp_size12);

                                    .schedule-list-card-inner-day {
                                        margin-bottom: var(--sp_size12);
                                        padding: var(--sp_size12);

                                        ul {
                                            gap: var(--sp_size08);

                                            li {
                                                font-size: var(--sp_size22);
                                                padding: var(--sp_size04) var(--sp_size10);
                                                border-radius: var(--sp_size10);
                                                line-height: 1;
                                            }
                                        }

                                    }


                                    .schedule-list-card-inner-event {
                                        margin-bottom: var(--sp_size12);
                                        padding: var(--sp_size12);

                                        p {
                                            &.event-title {
                                                font-size: var(--sp_size24);
                                                margin-bottom: var(--sp_size08);
                                            }

                                            &.event-place {
                                                font-size: var(--sp_size24);
                                                margin-bottom: var(--sp_size08);
                                                margin-top: var(--sp_size12);
                                            }


                                            &:not(.event-title):not(.event-place) {
                                                font-size: var(--sp_size24);
                                                margin-bottom: var(--sp_size08);

                                                &.event-name {
                                                    font-size: var(--sp_size24);
                                                    margin-bottom: var(--sp_size12);
                                                }
                                            }

                                        }
                                    }

                                    .schedule-list-card-inner-etc {

                                        p {
                                            font-size: var(--sp_size24);

                                            &:not(:last-child) {

                                                margin-bottom: var(--sp_size08);
                                            }
                                        }
                                    }
                                }
                            }


                        }
                    }


                }
            }

            .schedule-note {
                background-color: #fff3cd;
                border-left: 4px solid var(--color-orange);
                border-radius: 0 4px 4px 0;
                padding: var(--size16) var(--size20);
                margin: var(--size24) 0;
                font-size: var(--size14);
                color: var(--color-text-light);
                line-height: 1.6;
                font-weight: 500;

                @media screen and (max-width: 768px) {
                    font-size: var(--sp_size18);
                    padding: var(--sp_size12) var(--sp_size20);
                    margin: var(--sp_size12) 0;
                }

                @media screen and (max-width: 440px) {
                    font-size: var(--sp_size20);
                    padding: var(--sp_size12) var(--sp_size20);
                    margin: var(--sp_size12) 0;
                    font-weight: 400;
                }

                /*&::before {
                    content: '📢';
                    margin-right: var(--size08);
                    font-size: var(--size16);
                }*/
            }
        }
    }
}