/* 通用樣式：適用於所有裝置，或作為最大螢幕的基準 */
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; /* 日期數字大小 */
}

/* === 新增：確保日期是完美正圓形 === */
.day_num {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 44px;  /* 預設圓圈大小 */
    height: 44px;
    border-radius: 50%;
    line-height: 1;
    transition: all 0.2s ease-in-out;
}

/* 系統當天日期背景 (移至圓圈上並放大) */
#calender_section_bot ul li.grey {
    background-color: #fff !important; 
}
#calender_section_bot ul li.grey .day_num {
    background-color: #e74c3c !important;
    color: #fff;
    transform: scale(1.25); /* 當天日期放大 1.25 倍 */
    font-weight: bold;
    box-shadow: 0 3px 6px rgba(0,0,0,0.2);
}

/* 滑鼠移入效果 */
#calender_section_bot ul li.light_sky:hover,
#calender_section_bot ul li.date_cell:hover {
    border: 2px solid #e74c3c;
    background-color: #fff !important;
}
#calender_section_bot ul li.grey:hover {
    border: 2px solid #e74c3c;
    background-color: #fff !important;
}

/* === 修改：完美置中的紅色行程小點 === */
.light_sky:after {
    background: #c0392b;
    border-radius: 50%;
    bottom: 12px; /* 距離底部 */
    display: block;
    content: '';
    height: 6px; /* 稍作縮小讓點更精緻 */
    width: 6px;
    left: 50%;
    transform: translateX(-50%); /* 確保完美水平置中 */
    position: absolute;
}

/*========== Hover Popup ===============*/
.date_cell {
    cursor: pointer;
}
.date_popup_wrap {
    position: absolute;
    width: 140px; /* 預設寬度 */
    height: auto; /* 高度自動調整 */
    z-index: 9999;
    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%;
    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; /* 保留浮動 */
}
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;
}
#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;
}

/* ================= 媒體查詢 (RWD 響應式微調) ================= */

/* 手機版 (小於 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; }
    
    /* 手機版圓圈縮小 */
    .day_num { width: 32px; height: 32px; }
    .light_sky:after { bottom: 4px; }

    .date_popup_wrap {
        width: 120px; 
        padding: 5px;
        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; }
    #calender_section_bot ul li { height: 50px; font-size: 1.1rem; }
    
    /* 平板版圓圈大小 */
    .day_num { width: 36px; height: 36px; }
    .light_sky:after { bottom: 5px; }    

    .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; }
    
    /* 桌機/平板圓圈大小 */
    .day_num { width: 40px; height: 40px; }
    .light_sky:after { bottom: 6px; }

    #event_list h2 { font-size: 1.2rem; }    
    .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; }
    
    /* 桌面版圓圈大小 */
    .day_num { width: 44px; height: 44px; }
    .light_sky:after { bottom: 10px; }

    #event_list ul li { font-size: 1.2rem; }    
    .date_popup_wrap { width: 160px; }
}