#sec-calendar-wrapper {
    max-width: 800px;
    margin: 0 auto;
    font-family: sans-serif;
}

.sec-calendar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

#sec-calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 5px;
}

.sec-day-header {
    font-weight: bold;
    text-align: center;
    padding: 10px;
    background: #f0f0f0;
}

.sec-day {
    border: 1px solid #ddd;
    min-height: 100px;
    padding: 5px;
    cursor: pointer;
    position: relative;
    background: #fff;
}

.sec-day:hover {
    background: #f9f9f9;
}

.sec-day.empty {
    background: #fcfcfc;
    cursor: default;
}

.sec-date-num {
    font-weight: bold;
    display: block;
    margin-bottom: 5px;
}

.sec-event-item {
    color: #333;
    padding: 2px 5px;
    font-size: 0.8em;
    margin-bottom: 2px;
    border-radius: 3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Modal */
.sec-modal {
    position: fixed;
    z-index: 9999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.4);
}

.sec-modal-content {
    background-color: #fefefe;
    margin: 15% auto;
    padding: 20px;
    border: 1px solid #888;
    width: 300px;
    border-radius: 5px;
    position: relative;
}

.sec-close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
}

.sec-close:hover,
.sec-close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

.sec-modal-content input,
.sec-modal-content textarea {
    width: 100%;
    margin-bottom: 10px;
    padding: 5px;
}

.sec-modal-content button {
    background: #0073aa;
    color: #fff;
    border: none;
    padding: 8px 15px;
    cursor: pointer;
    border-radius: 3px;
}

.sec-mobile-weekday {
    display: none;
    font-size: 0.9em;
    font-weight: normal;
    margin-left: 5px;
}

/* Responsive Styles */
@media screen and (max-width: 600px) {
    #sec-calendar-grid {
        display: block;
    }

    .sec-day-header {
        display: none;
    }

    .sec-day.empty {
        display: none;
    }

    .sec-day {
        min-height: auto;
        padding: 10px;
        margin-bottom: 5px;
        border: 1px solid #ddd;
    }

    .sec-date-num {
        font-size: 1.1em;
        margin-bottom: 5px;
        display: flex;
        align-items: center;
    }

    .sec-mobile-weekday {
        display: inline;
    }

    .sec-event-item {
        font-size: 0.9em;
        padding: 3px 5px;
        margin-bottom: 3px;
        /* Reset truncation for vertical view as we have more space, or keep it? 
           User requested truncation previously. Let's keep truncation to be safe, 
           or relax it if vertical space allows multi-line? 
           Vertical list usually implies full width events.
           Let's allow text wrapping in vertical view if needed, or keep ellipsis.
           "タイトルを一部表示のみとして" (display only part of title) was the previous request.
           So we should keep ellipsis but maybe allow it to be wider.
        */
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .sec-modal-content {
        width: 90%;
        margin: 20% auto;
    }
}

/* Event Colors */