/* 通用樣式：適用於所有裝置，或作為最大螢幕的基準 */
body {
    margin: 0;
    font-family: sans-serif;
    color: #444444;
}
.none {
    display: none;
}
.dropdown {
    color: #444444;
    font-size: 1rem; /* 使用 rem */
}
#calender_section {
    width: 95%; /* 預設使用較寬的百分比，讓日曆佔據更多空間 */
    max-width: 1200px; /* 設定最大寬度以避免在大螢幕上過寬 */
    margin: 20px auto; /* 增加上下 margin */
    box-sizing: border-box; /* 確保 padding 和 border 不會增加元素總寬度 */
}
#calender_section .calender_section_title {
    position: relative;
    margin-bottom: 1rem; /* 使用 rem */
    display: flex; /* 使用 Flexbox 居中標題 */
    justify-content: center;
    align-items: center;
}
#calender_section .calender_section_title h2 {
    color: #444444;
    font-size: 1.8rem; /* 使用 rem */
    text-align: center;
    line-height: 1.5; /* 相對行高 */
    padding: 0;
    width: auto; /* 寬度自動調整 */
    margin: 0; /* 移除預設 margin */
}
#calender_section .calender_section_title a.btn-prev,
#calender_section .calender_section_title a.btn-next {
    position: absolute;
    top: 50%; /* 垂直居中 */
    transform: translateY(-50%); /* 垂直居中 */
    color: #cbd1d2;
    font-size: 2.2rem; /* 使用 rem */
    line-height: 1; /* 行高為 1 */
    padding: 0 10px; /* 增加點擊區域 */
}
#calender_section .calender_section_title a.btn-prev:hover,
#calender_section .calender_section_title a.btn-next:hover {
    color: #333;
}
#calender_section .calender_section_title a.btn-prev {
    left: 0; /* 靠左 */
}
#calender_section .calender_section_title a.btn-next {
    right: 0; /* 靠右 */
}
#calender_section_top ul,
#calender_section_bot ul {
    display: flex; /* 使用 Flexbox 佈局 */
    flex-wrap: wrap; /* 允許項目換行 */
    padding: 0;
    margin: 0;
    list-style-type: none;
    background: #fff; /* for #calender_section_bot */
}
#calender_section_top ul li,
#calender_section_bot ul li {
    flex: 1 0 calc(100% / 7); /* 每個 li 佔據 1/7 的寬度，確保七個項目在一行 */
    box-sizing: border-box; /* 確保 padding 和 border 不會增加元素總寬度 */
    text-align: center;
    min-height: 0;
    background: #fff;
    box-shadow: none;
    border: 2px solid #fff;
    margin: 0;
    padding: 0;
    position: relative;
    /* 為 Flexbox 垂直水平居中內容 */
    display: flex;
    justify-content: center;
    align-items: center;
    line-height: normal; /* 取消固定的行高，讓 Flexbox 居中生效 */
}
#calender_section_top ul li {
    font-size: 1rem; /* 星期文字大小 */
    height: 40px; /* 星期列高度 */
    line-height: 40px;
}
#calender_section_bot ul li {
    height: 80px; /* 日期單元格高度，可在媒體查詢中調整 */
    font-size: 1.2rem; /* 日期數字大小 */
}
#calender_section_bot ul li span {
    margin: 0; /* 清除舊的 margin，讓 Flexbox 居中生效 */
    display: block; /* 確保 span 是塊級元素，能完全居中 */
}
.grey {
    background-color: #e74c3c !important;
    color: #fff;
}
#calender_section_bot ul li.light_sky:hover {
    border: 2px solid #e74c3c;
    background-color: #fff;
}
.light_sky:after {
    background: #c0392b;
    border-radius: 50%;
    bottom: 10px; /* 調整紅點位置 */
    display: block;
    content: '';
    height: 8px;
    left: 50%;
    margin: -5px 0 0 -4px;
    position: absolute;
    width: 8px;
}
/*========== Hover Popup ===============*/
.date_cell {
    cursor: pointer;
    cursor: hand;
    /* text-align: center; /* 已經透過 Flexbox 居中，此行可移除 */
    /* background-color: red; /* 移除，除非有特殊需求 */
    border-radius: 50%; /* 移除，避免影響佈局 */
}
#calender_section_bot ul li.date_cell:hover {
    border: 2px solid #e74c3c;
    background-color: #fff;
}
.date_popup_wrap {
    position: absolute;
    width: 140px; /* 預設寬度 */
    height: auto; /* 高度自動調整 */
    z-index: 9999;
    top: -webkit-calc(100% + 5px); /* 位於下方 5px */
    top: calc(100% + 5px); /* 位於下方 5px */
    left: 50%; /* 水平居中 */
    transform: translateX(-50%); /* 水平居中 */
    background-color: #fff;
    box-shadow: 0 1px 2px #ccc;
    color: #666 !important;
    padding: 10px; /* 內部 padding */
    box-sizing: border-box;
    white-space: normal; /* 允許文字換行 */
    line-height: 1.4; /* 調整行高 */
}
.events_window {
    overflow: hidden;
    overflow-y: auto;
    width: 100%; /* 佔滿彈出視窗寬度 */
    height: auto; /* 高度自動 */
    margin: 0; /* 清除 margin */
    padding: 0; /* 清除 padding */
}
.event_wrap {
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: solid 1px #E4E4E7;
    font-size: 0.9rem; /* 使用 rem */
    padding: 3px;
}
.event_wrap:last-child {
    border-bottom: none; /* 最後一個不顯示底線 */
    margin-bottom: 0;
    padding-bottom: 0;
}
.date_window {
    padding: 5px 0; /* 調整 padding */
    font-size: 1rem; /* 使用 rem */
    text-align: center; /* 確保日期文字居中 */
    font-weight: bold;
}
.popup_event {
    margin-bottom: 2px;
    padding: 2px;
    font-size: 0.9rem; /* 使用 rem */
    width: 100%;
}
.popup_event {
    margin-bottom: 2px;
    padding: 2px;
    font-size: 16px;
    width:100%;
    white-space: normal; /* 讓文字換行 */
    word-wrap: break-word; /* 長單詞也換行 */
}
.popup_event a {
    color: #000000 !important;
    text-decoration: none;
    display: block; /* 讓連結佔滿寬度 */
}
.packeg_box a {
    color: #F58220;
    float: right; /* 保留浮動 */
}
#calender_section_bot a:hover {
    color: #181919;
    text-decoration: underline;
}
/* 事件列表區塊樣式 */
.event_list_info {
    padding: 0 2%; /* 調整左右 padding */
    margin-top: 20px; /* 與日曆區塊的間距 */
    clear: both; /* 清除任何浮動影響 */
}
.event_list_info .event_list_info_de {
    padding: 2%;
    border: 2px solid #e74c3c;
    box-sizing: border-box;
}
.event_list_info > h1 {
    width: 100%;
    line-height: 40px;
    text-align: center;
    color: #fff;
    background-color: #e74c3c;
    font-size: 1.5rem; /* 使用 rem */
    margin: 0; /* 清除預設 margin */
    box-sizing: border-box;
}
#event_list_ddt {
    padding: 10px 0;
    color: #e74c3c;
    font-size: 1rem; /* 使用 rem */
    font-weight: 700;
    text-align: center;
}
#event_list_ddt i {
    margin-right: 10px;
}
#event_list {
    width: 100%;
    display: none; /* 預設隱藏 */
    clear: both;
    margin-top: 0px;
    box-shadow: 0 1px 2px #ccc;
    box-sizing: border-box;
}
#event_list h2 {
    padding: 0 20px;
    line-height: 40px;
    font-size: 1.5rem; /* 使用 rem */
    color: #662d91;
    font-weight: 500;
    text-align: center;
    border-bottom: 2px solid #662d91;
    margin: 0;
    box-sizing: border-box;
}
#event_list h2 span {
    margin-right: 10px;
}
#event_list ul {
    width: 100%;
    padding: 20px 20px 20px 30px;
    list-style-type: disc;
    color: #662d91;
    box-sizing: border-box;
}
#event_list ul li {
    font-size: 1.1rem; /* 使用 rem */
    color: #534741;
    padding-bottom: 10px;
    margin-bottom: 10px;
    /*border-bottom: 1px solid #ccc;*/
}
#event_list ul li:last-child {
    border-bottom: none;
    padding-bottom: 0px;
    margin-bottom: 0px;
}
#event_list ul li p {
    padding: 2px 8px;
    border-radius: 3px;
    color: #fff;
    background-color: #999;
    margin-top: 10px;
    display: inline-block; /* 讓 p 標籤能自適應內容寬度 */
}
#event_list ul li span {
    margin-right: 10px;
    font-size: 1.1rem; /* 使用 rem */
}
#event_list ul li a {
    font-size: 1.1rem; /* 使用 rem */
    color: #534741;
    text-decoration: none;
}
/* 媒體查詢 */
/* 手機版 (小於 480px) */
@media only screen and (max-width: 479px) {
    #calender_section {
        width: 98%; /* 佔據更多寬度 */
        margin: 10px auto;
    }
    #calender_section .calender_section_title h2 {
        font-size: 1.6rem;
    }        
    #calender_section .calender_section_title a.btn-prev,
    #calender_section .calender_section_title a.btn-next {
        font-size: 1.6rem;
        padding: 0 5px;
    }
    #calender_section_top ul li {
        font-size: 1.2rem;
        height: 30px;
        line-height: 30px;
    }
    #calender_section_bot ul li {
        height: 50px;
        font-size: 1.2rem;
    }
    .light_sky:after {
        background: #c0392b;
        border-radius: 50%;
        bottom: 6px;
        display: block;
        content: '';
        height: 8px;
        left: 50%;
        margin: -5px 0 0 -4px;
        position: absolute;
        width: 8px;
    }
    .date_popup_wrap {
        width: 120px; /* 調整彈出視窗寬度 */
        padding: 5px;
        top: -webkit-calc(100% + 2px);
        top: calc(100% + 2px);
    }
    .date_window, .popup_event {
        font-size: 0.8rem;
    }
    .event_list_info > h1 {
        font-size: 1.2rem;
        line-height: 35px;
    }
    #event_list h2 {
        font-size: 1.1rem;
        line-height: 35px;
    }
    #event_list ul li {
        font-size: 1.1rem;
    }
}
/* 平板直立 (480px 到 767px) */
@media only screen and (min-width: 480px) and (max-width: 767px) {
    #calender_section {
        width: 90%;
    }
    #calender_section .calender_section_title h2 {
        font-size: 2rem;
    }
    #calender_section .calender_section_title a.btn-prev,
    #calender_section .calender_section_title a.btn-next {
        font-size: 2rem;
    }
    #calender_section_top ul li {
        height: 35px;
        line-height: 35px;
        font-size: 1.2rem;
    }
    .light_sky:after {
        background: #c0392b;
        border-radius: 50%;
        bottom: 5px;
        display: block;
        content: '';
        height: 8px;
        left: 50%;
        margin: -5px 0 0 -4px;
        position: absolute;
        width: 8px;
    }    
    #calender_section_bot ul li {
        height: 50px;
        font-size: 1.1rem;
    }
    .date_popup_wrap {
        width: 130px;
    }
}
/* 平板橫向 / 小型桌面 (768px 到 1023px) */
@media only screen and (min-width: 768px) and (max-width: 1023px) {
    #calender_section {
        width: 100%;
    }
    #calender_section_top ul li {
        height: 40px;
        line-height: 40px;
        font-size: 1.2rem;
    }
    #calender_section_bot ul li {
        height: 50px;
        font-size: 1.2rem;
    }
    #event_list h2 {
        padding: 0 20px;
        line-height: 40px;
        font-size: 1.2rem; /* 使用 rem */
        color: #662d91;
        font-weight: 500;
        text-align: center;
        border-bottom: 2px solid #662d91;
        margin: 0;
        box-sizing: border-box;
    }    
    .light_sky:after {
        background: #c0392b;
        border-radius: 50%;
        bottom: 5px;
        display: block;
        content: '';
        height: 8px;
        left: 50%;
        margin: -5px 0 0 -4px;
        position: absolute;
        width: 8px;
    }
    .date_popup_wrap {
        width: 150px;
    }
}
/* 桌面 (1024px 及以上) */
@media only screen and (min-width: 1024px) {
    #calender_section {
        width: 100%;
    }
    #calender_section_top ul li {
        height: 45px;
        line-height: 45px;
        font-size: 1.3rem;
    }
    #calender_section_bot ul li {
        height: 70px;
        font-size: 1.3rem;
    }
    .light_sky:after {
        background: #c0392b;
        border-radius: 50%;
        bottom: 10px;
        display: block;
        content: '';
        height: 8px;
        left: 50%;
        margin: -5px 0 0 -5px;
        position: absolute;
        width: 8px;
    }
    #event_list ul li {
        font-size: 1.2rem;
    }    
    .date_popup_wrap {
        width: 160px;
    }
}