:root { --primary-accent: #554d3d; --text-dark: #2c2519; --border-ink: #b8b09c; }


/* ＝響應式多重背景設計＝ */

body { color: var(--text-dark); font-family: 'Noto Serif TC', 'Microsoft JhengHei', serif; margin: 0; padding: 0; min-height: 100vh;            

/* 【預設：電腦大螢幕版】左、右雙圖片分開平行並存 */
background-image: url('20260830_left.png'), url('20260830_right.png');
background-repeat: no-repeat, no-repeat;
background-position: left center, right center;
background-size: 50% auto, 50% auto;
background-attachment: fixed, fixed;
}

@media (max-width: 1880px) {
    body {
        color: var(--text-dark);
        font-family: 'Noto Serif TC', 'Microsoft JhengHei', serif;
        margin: 0;
        padding: 0;
        min-height: 100vh;
                
        /* 【預設：電腦大螢幕版】左、右雙圖片分開平行並存 */
        background-image: url('20260830_left.png'), url('20260830_right.png');
        background-repeat: no-repeat, no-repeat;
        background-position: left center, right center;
        background-size: 60% auto, 60% auto;
        background-attachment: fixed, fixed;
    }
}


@media (max-width: 1600px) {
    body {
        color: var(--text-dark);
        font-family: 'Noto Serif TC', 'Microsoft JhengHei', serif;
        margin: 0;
        padding: 0;
        min-height: 100vh;
        
        /* 【預設：電腦大螢幕版】左、右雙圖片分開平行並存 */
        background-image: url('20260830_left.png'), url('20260830_right.png');
        background-repeat: no-repeat, no-repeat;
        background-position: left center, right center;
        background-size: 70% auto, 70% auto;
        background-attachment: fixed, fixed;
    }
}


@media (max-width: 1300px) {
    body {
        color: var(--text-dark);
        font-family: 'Noto Serif TC', 'Microsoft JhengHei', serif;
        margin: 0;
        padding: 0;
        min-height: 100vh;
        
        /* 【預設：電腦大螢幕版】左、右雙圖片分開平行並存 */
        background-image: url('20260830_left_v1.png'), url('20260830_right_v1.png');
        background-repeat: no-repeat, no-repeat;
        background-position: left center, right center;
        background-size: 70% auto, 70% auto;
        background-attachment: fixed, fixed;
    }
}



/* 主動容器：預設桌機版維持全畫面居中 */
.main-container { min-height: 100vh; display: flex; justify-content: center; /* 桌機版預設置中 */ align-items: center; padding: 40px 20px; background: rgba(0, 0, 0, 0.02); }

/* 報名表單核心區塊 */
.form-section { 
    background: rgba(248, 246, 240, 0.92); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px);
    width: 100%;  max-width: 680px; /* 桌機版最大寬度 */  padding: 50px 60px;  border-radius: 4px;  border: 1px solid var(--border-ink);  box-shadow: 0 10px 30px rgba(44, 37, 25, 0.15);
}


/* ─── 關鍵修改：【平板螢幕版】調整表單靠左 ─── */
@media (min-width: 768px) and (max-width: 1200px) {
    body {
        /* 平板只留右圖 */
        background-image: url('20260830_right.png');
        background-position: right center; /* 靠右對齊 */
        background-size: cover;
        background-attachment: fixed;
    }

    .main-container {
        justify-content: flex-start; /* 讓內容改為「靠左對齊」 */
        padding-left: 5%;           /* 左邊留白 10% */
        padding-right: 5%;          /* 調整右邊間距 */
    }

    .form-section {
        /* 限制表單寬度佔總畫面的 50%，右邊自然會空出約 40% 給背景圖 */
        max-width: 70% !important; 
        padding: 40px 30px; /* 稍微縮小表單內襯，避免字體太擠 */
    }
}


/* 【手機版】螢幕寬度小於 768px 時，左右圖隱藏，改為置頂的 Banner 圖片 */
@media (max-width: 767.98px) {
    body {
        background-image: url('phone_top.png');
        background-repeat: no-repeat;
        /*background-position: center top;*/
        /*background-size: 100% 300px; */
        background-attachment: scroll;
        background-position: left top, right top;
        background-size: 100% auto, 100% auto;
    }
            
    /* 手機版還原置中對齊，並推開頂部距離 */
    .main-container { justify-content: center; /*padding-top: 320px !important; */ padding-top: 200px !important; }
}

/* 響應式：手機版調整表單間距 */
@media (max-width: 576px) {
    .main-container { padding-left: 10px; padding-right: 10px; padding-bottom: 15px; }
    .form-section { padding: 35px 20px; }
}

/* 大會大標題區塊 Header */
.conference-header { text-align: center; margin-bottom: 30px; padding-bottom: 20px; border-bottom: 2px solid var(--primary-accent); }
.conference-header p { margin: 0; padding: 2px 0; font-size: 1.4rem; font-weight: 700; letter-spacing: 3px; color: var(--primary-accent); }


/* ─── 核心修改：優化研討會公告區塊基礎結構 ─── */
.announcement-box { 
    padding: 22px 24px; 
    margin-bottom: 18px; 
    border-radius: 4px; 
    font-size: 0.96rem; 
    line-height: 1.7; 
}

/* 公告區內的段落微調 */
.announcement-box p {
    margin-top: 0;
    margin-bottom: 8px;
    letter-spacing: 0.5px;
}
.announcement-box p:last-child {
    margin-bottom: 0;
}



/* ─── 核心新增：公告區塊內的數字列表整齊排版 ─── */
.announcement-box ol {
    margin: 0;
    padding-left: 20px;       /* 控制數字左側的縮排距離，讓整體往左對齊 */
    list-style-type: decimal; /* 強制使用標準阿拉伯數字 */
}

.announcement-box ol li {
    margin-bottom: 8px;       /* 每一條注意事項之間的間距 */
    padding-left: 4px;        /* 數字跟文字之間的微調呼吸空間 */
    letter-spacing: 0.5px;    /* 維持優雅字距 */
}

.announcement-box ol li:last-child {
    margin-bottom: 0;         /* 最後一項不留底邊距 */
}



/* 樣式 A：【研討會報名說明】茶褐色調 */
.text-box-brown {
    background: rgba(85, 77, 61, 0.06);
    border: 1px solid rgba(184, 176, 156, 0.6);
    color: #4a3f2c;
}
.text-box-brown strong {
    color: var(--primary-accent);
    font-size: 1.1rem;
    display: block;
    margin-bottom: 10px;
}
.text-box-brown a {
    color: #8c2d2d;
    text-decoration: none;
    font-weight: 700;
    border-bottom: 1px solid rgba(140, 45, 45, 0.4);
}
.text-box-brown a:hover {
    color: #b23b3b;
}

/* 樣式 B：【公告注意事項】暮灰藍色調 */
.text-box-blue {
    background: rgba(70, 85, 95, 0.06); 
    border: 1px solid rgba(150, 165, 175, 0.5); 
    color: #2e3a42; 
}
.text-box-blue strong {
    color: #34495e; 
    font-size: 1.1rem;
    display: block;
    margin-bottom: 10px;
}

/* 樣式 C：【網路報名注意事項】淡茜紅色調 */
.text-box-red {
    background: rgba(140, 45, 45, 0.04); 
    border: 1px solid rgba(184, 150, 150, 0.4); 
    color: #5a2c2c; 
}
.text-box-red strong {
    color: #8c2d2d; 
    font-size: 1.1rem;
    display: block;
    margin-bottom: 10px;
}


.form-label { font-weight: 600; color: var(--primary-accent); margin-bottom: 6px; }
.required::after { content: ' *'; color: #b23b3b; }

.form-control { background-color: transparent; border: none; border-bottom: 1px solid var(--border-ink); border-radius: 0; padding-left: 5px; padding-right: 5px; color: var(--text-dark); transition: all 0.3s ease; }
.form-control:focus { background-color: rgba(85, 77, 61, 0.04); border-color: var(--primary-accent); box-shadow: none; }
.lunch-group { background: rgba(184, 176, 156, 0.2); padding: 15px 20px; border-radius: 4px; border-left: 4px solid var(--primary-accent); margin-bottom: 25px; }
.btn-submit { background-color: var(--primary-accent); color: #ffffff; border: none; border-radius: 2px; padding: 12px 30px; font-size: 1.1rem; letter-spacing: 2px; transition: all 0.3s ease; width: 100%; margin-top: 15px; }
.btn-submit:hover { background-color: #3e382c; color: #ffffff; box-shadow: 0 4px 12px rgba(0,0,0,0.2); }

/* 聯絡資訊區塊樣式 */
.contact-box { background: rgba(85, 77, 61, 0.05); border: 1px solid var(--border-ink); padding: 15px 20px; margin-top: 30px; margin-bottom: 20px; border-radius: 4px; font-size: 0.95rem; }
.contact-box .contact-title { font-weight: 700; color: var(--primary-accent); margin-bottom: 5px; border-bottom: 1px solid rgba(85, 77, 61, 0.2); padding-bottom: 3px; }


/* 報名截止專用古典風樣式 */
.alert-timeout {
    background-color: rgba(210, 199, 180, 0.3) !important; 
    border: 1px solid rgba(85, 77, 61, 0.3) !important;    
    border-left: 5px solid #554d3d !important;             
    color: #4a3f2c !important;                             
    letter-spacing: 4px;                                   
    font-weight: 700;
    border-radius: 4px;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.02);
}

.alert-timeout p {
    margin: 0; 
}