/* =========================================================
   高雄市教育產業工會 2026 新版樣式 (keu2026.css)
   參考風格：淺色頁首＋雙行選單、粉彩橫幅、
   中英標題區塊、斑馬紋消息列表、右側資訊卡、紫色頁尾
   ---------------------------------------------------------
   想換配色只要改下面 :root 的變數即可
   ========================================================= */

:root {
    /* ---- 預設：工會橘黃暖色系 ---- */
    --c-primary: #c8691a;      /* 主色：選單 hover、more+、按鈕 */
    --c-primary-dk: #5a4028;   /* 深咖啡 */
    --c-accent: #d0661a;       /* 強調：英文副標、日期 */
    --c-soft: #fdf0d5;         /* 淡黃：卡片按鈕底 */
    --c-row: #fffaf0;          /* 斑馬紋 */
    --c-footer: #9a5b1e;       /* 頁尾 */
    --c-btn: #e08a2c;
    --c-brand: #5a4028;        /* 頁首工會名稱 */
    --c-brand-sub: #9b7a5a;
    --c-hero-from: #fde9b8;    /* 橫幅漸層 */
    --c-hero-to: #fbd38d;
    --c-text: #212529;
    --c-text-2: #3b3b3b;
    --c-muted: #6b7280;
    --c-line: #e6dccb;
    --c-bg: #ffffff;
    --c-header: #fffdf7;
    --radius: 10px;
    --container: 1300px;      /* 內容最大寬度 */

    /* ---- 紫粉色版（參考網站配色），要用就把上面同名變數換成這組 ----
    --c-primary: #6c2c9e;
    --c-primary-dk: #4e1f73;
    --c-accent: #d56b8f;
    --c-soft: #f4e2ff;
    --c-row: #f5fbf9;
    --c-footer: #8f68a1;
    --c-btn: #ae66c8;
    --c-brand: #2b3a7a;
    --c-brand-sub: #4a5a9a;
    --c-hero-from: #f4e2ff;
    --c-hero-to: #f4e2ff;
    --c-line: #d9d9d9;
    --c-header: #f8f9fa;
    */
}

/* ---------- 基本 ---------- */
html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    padding: 0;
    background: var(--c-bg) !important;
    color: var(--c-text);
    font-family: "Microsoft JhengHei", "微軟正黑體", "Noto Sans TC", "PingFang TC", "Heiti TC", sans-serif;
    font-size: 21px;
    line-height: 1.6;
}

*, *::before, *::after { box-sizing: border-box; }

a:link, a:visited { color: var(--c-text); text-decoration: none; }
a:hover, a:focus { color: var(--c-primary); background-color: transparent; font-size: inherit; }

img { max-width: 100%; height: auto; }

.keu-wrap {
    width: 100%;
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 20px;
}

/* ---------- 頂部工具列 ---------- */
.topbar {
    background: var(--c-header);
    border-bottom: 1px solid #eceef1;
    font-size: 16px;
    color: var(--c-muted);
}

.topbar-inner {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 18px;
    min-height: 34px;
    flex-wrap: wrap;
}

.topbar-inner span,
.topbar-inner a:link,
.topbar-inner a:visited { color: var(--c-muted); }
.topbar-inner a:hover { color: var(--c-primary); }

.topbar .counter-num { color: var(--c-primary); font-weight: 600; }

.topbar .login-btn:link,
.topbar .login-btn:visited {
    display: inline-block;
    padding: 2px 14px;
    border-radius: 4px;
    background: var(--c-btn);
    color: #fff;
}
.topbar .login-btn:hover { background: var(--c-primary); color: #fff; }

/* ---------- 頁首品牌列 ---------- */
.site-header { background: var(--c-header); }

.header-main {
    display: flex;
    align-items: center;
    gap: 28px;
    padding-top: 14px;
    padding-bottom: 14px;
    flex-wrap: wrap;
}

.brand:link, .brand:visited {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--c-text);
}
.brand:hover { color: var(--c-text); }

.brand img { width: 72px; height: 72px; object-fit: contain; display: block; }

.brand-text { display: flex; flex-direction: column; line-height: 1.25; }
.brand-text strong {
    font-size: 34px;
    font-weight: 700;
    letter-spacing: 2px;
    color: var(--c-brand);
}
.brand-text small {
    font-size: 16px;
    color: var(--c-brand-sub);
    letter-spacing: .3px;
}

.brand-sub img { width: 60px; height: 60px; }
.brand-sub .brand-text strong { font-size: 26px; letter-spacing: 1px; }

.nav-toggle {
    display: none;
    margin-left: auto;
    width: 44px;
    height: 40px;
    border: 1px solid #cfd4da;
    border-radius: 6px;
    background: #fff;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
    color: #555;
}

/* ---------- 主選單 (asp:Menu) ---------- */
.main-nav {
    background: #fff;
    border-top: 1px solid #eceef1;
    border-bottom: 3px solid var(--c-hero-to);
}

.main-nav div.menu,
.main-nav .menu {
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
}

.main-nav .menu ul.level1 {
    display: flex !important;
    flex-wrap: wrap;
    justify-content: center;
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100% !important;
    float: none !important;
}

.main-nav .menu ul.level1 > li {
    float: none !important;
    position: relative;
    background: transparent !important;
}

.main-nav .menu ul.level1 > li > a,
.main-nav .menu ul.level1 > li > a:visited {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    padding: 10px 16px 8px !important;
    color: #555 !important;
    background: transparent !important;
    border: 0 !important;
    border-bottom: 3px solid transparent !important;
    margin-bottom: -3px;
    font-size: 21px !important;
    line-height: 1.3;
    white-space: nowrap;
    transition: color .2s, border-color .2s;
}

.main-nav .menu .nav-en {
    font-size: 14px;
    color: #9aa0a6;
    letter-spacing: .3px;
    margin-top: 2px;
}

.main-nav .menu ul.level1 > li > a:hover,
.main-nav .menu ul.level1 > li > a.selected {
    color: var(--c-primary) !important;
    border-bottom-color: var(--c-primary) !important;
    background: transparent !important;
}
.main-nav .menu ul.level1 > li > a:hover .nav-en,
.main-nav .menu ul.level1 > li > a.selected .nav-en { color: var(--c-accent); }

.main-nav .menu a.disabled { opacity: .5; }

/* ---------- 首頁橫幅 ---------- */
.hero {
    background: transparent;   /* 整條不上色 */
    padding: 22px 0;
}
/* 橫幅後面的色塊：跟內容同寬、圓角，不再橫跨整個螢幕 */
.banner-band {
    background: linear-gradient(135deg, var(--c-hero-from), var(--c-hero-to));
    border-radius: 16px;
    padding: 18px;
}
.hero .flexslider {
    margin: 0 auto;
    border: 0;
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: 0 6px 18px rgba(154, 91, 30, .18);
    background: #fff;
}
.hero .flexslider .slides img { width: 100%; display: block; }
.hero .flex-direction-nav a { opacity: .8; }

/* ---------- 主內容兩欄 ---------- */
.site-main { padding-top: 26px; padding-bottom: 40px; }

.layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 380px;   /* 右側欄加寬（原 320px） */
    gap: 40px;
    align-items: start;
}

.content-column { min-width: 0; }
.content-column img { max-width: 100%; height: auto; }
.content-column iframe, .content-column video, .content-column table { max-width: 100%; }

/* ---------- 區塊標題（中文＋英文＋虛線＋more+） ---------- */
.sec-title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 6px 0 12px;
    text-align: left;
}
.sec-title .sec-icon { width: 34px; height: 34px; object-fit: contain; flex: none; }
.sec-title .tc { font-size: 26px; color: var(--c-text); white-space: nowrap; }
.sec-title .en { font-size: 23px; color: var(--c-accent); white-space: nowrap; }
.sec-title .line {
    flex: 1;
    min-width: 30px;
    border-top: 1px solid #bfbfbf;
    margin: 0 4px;
}
.sec-title a.more:link, .sec-title a.more:visited { color: var(--c-primary); font-size: 20px; white-space: nowrap; }
.sec-title a.more:hover { color: var(--c-accent); }

.section { margin-bottom: 34px; }

/* ---------- 公告／搜尋列 ---------- */
.notice-bar {
    background: var(--c-row);
    border-left: 4px solid var(--c-accent);
    padding: 10px 14px;
    border-radius: 6px;
    font-size: 20px;
    margin-bottom: 14px;
}
.notice-bar a:link, .notice-bar a:visited { color: var(--c-primary); }
.notice-bar img { vertical-align: middle; }

.toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 24px;
    font-size: 20px;
}
.toolbar .social-link:link, .toolbar .social-link:visited {
    color: var(--c-primary);
    padding: 3px 10px;
    border: 1px solid var(--c-soft);
    border-radius: 999px;
    background: #fff;
}
.toolbar .social-link:hover { background: var(--c-soft); }
.toolbar .search { display: flex; gap: 6px; margin-left: auto; }

.input-search {
    width: 180px;
    padding: 6px 10px;
    border: 1px solid #cfd4da;
    border-radius: 4px;
    font-size: 18px;
}
.input-search:focus { outline: 2px solid var(--c-soft); border-color: var(--c-btn); }

.btn-purple, .btn-ghost {
    padding: 6px 14px;
    border-radius: 4px;
    font-size: 18px;
    cursor: pointer;
    border: 0;
}
.btn-purple { background: var(--c-btn); color: #fff; }
.btn-purple:hover { background: var(--c-primary); }
.btn-ghost { background: #fff; color: var(--c-muted); border: 1px solid #cfd4da; }
.btn-ghost:hover { color: var(--c-accent); border-color: var(--c-accent); }

/* ---------- 重大訊息／置頂（DataList） ---------- */
.news-list { width: 100%; border-collapse: collapse; }
.news-list caption { caption-side: top; text-align: left; }
.news-list td {
    padding: 12px 10px;
    border-bottom: 1px solid var(--c-line);
    font-size: 20px;
    color: var(--c-text-2);
}
.news-list tr:nth-child(even) td { background: var(--c-row); }
.news-list td img { vertical-align: middle; margin-right: 6px; }
.news-list a:link, .news-list a:visited { color: var(--c-text-2); }
.news-list a:hover { color: var(--c-primary); }
.news-list.pinned td { background: #fff4e0; }

/* ---------- 消息列表（GridView） ---------- */
.news-table {
    width: 100%;
    border-collapse: collapse !important;
    border: 0 !important;
    font-size: 20px;
}
.news-table caption { display: none; }
.news-table th {
    background: transparent;
    color: var(--c-muted);
    font-weight: 500;
    font-size: 16px;
    padding: 8px 10px;
    border-bottom: 2px solid var(--c-soft);
    text-align: left;
    white-space: nowrap;
}
.news-table th a:link, .news-table th a:visited { color: var(--c-muted); }
.news-table td {
    padding: 12px 10px;
    border: 0;
    border-bottom: 1px solid var(--c-line);
    color: var(--c-text-2);
    vertical-align: top;
}
.news-table tr.alt td { background: var(--c-row); }
.news-table td a:link, .news-table td a:visited { color: var(--c-text-2); }
.news-table td a:hover { color: var(--c-primary); }
.news-table .col-id { color: #9aa0a6; font-size: 16px; white-space: nowrap; }
.news-table .col-date { color: var(--c-accent); font-size: 16px; white-space: nowrap; }
.news-table .col-hit { color: var(--c-muted); font-size: 16px; text-align: right; }
.news-table .pager td {
    background: #fff !important;
    border-bottom: 0;
    text-align: right;
    font-size: 18px;
    color: var(--c-muted);
}
.news-table .pager select { padding: 2px 6px; border-radius: 4px; border: 1px solid #cfd4da; }

/* ---------- 特約廠商輪播 ---------- */
.partner-strip {
    background: #fff;
    border: 1px solid #eee;
    border-radius: var(--radius);
    padding: 12px 0;
}

/* 首頁橫幅廣告（淡入淡出輪播） */
.banner {
    position: relative;
    max-width: none;          /* 橫幅跟內容同寬（原 1000px） */
    margin: 0 auto;
    border-radius: var(--radius);
    overflow: hidden;
    background: #fff;
    box-shadow: 0 6px 18px rgba(154, 91, 30, .18);
}
.banner-track { position: relative; }
.banner-slide { display: block; }
.banner-slide:not(:first-child) {
    position: absolute;
    inset: 0;
}
.banner-slide { opacity: 0; visibility: hidden; transition: opacity .7s ease, visibility .7s; }
.banner-slide.is-active { opacity: 1; visibility: visible; z-index: 1; }
.banner-slide img { display: block; width: 100%; height: 100%; object-fit: cover; }
.banner-slide:first-child img { height: auto; }

.banner-nav {
    position: absolute;
    top: 50%;
    z-index: 2;
    width: 40px; height: 40px;
    margin-top: -20px;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .85);
    color: var(--c-primary-dk);
    font-size: 32px;
    line-height: 38px;
    cursor: pointer;
    opacity: 0;
    transition: opacity .2s, background .2s;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .15);
}
.banner:hover .banner-nav { opacity: 1; }
.banner-nav:hover { background: #fff; }
.banner-prev { left: 12px; }
.banner-next { right: 12px; }

.banner-dots {
    position: absolute;
    left: 0; right: 0; bottom: 10px;
    z-index: 2;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px;
    padding: 0 50px;
}
.banner-dots button {
    width: 9px; height: 9px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, .7);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .15);
    cursor: pointer;
    transition: width .25s, background .25s;
}
.banner-dots button.is-active { width: 22px; background: var(--c-btn); }

/* 首頁黃色橫框裡的特約廠商列 */
.hero-partners { padding: 18px 0 0; }
.partner-bar {
    display: flex;
    align-items: center;
    gap: 14px;
    background: #fff;
    border: 1px solid #f0e6d6;
    border-radius: var(--radius);
    padding: 10px 16px;
    box-shadow: 0 3px 12px rgba(154, 91, 30, .08);
}
/* 特約廠商列放在黃色橫框下方的白底區 */
.partner-wrap { padding-top: 18px; }
.partner-bar .marquee { flex: 1; min-width: 0; }
.partner-label:link, .partner-label:visited {
    flex: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 8px 14px;
    border-radius: 8px;
    background: var(--c-btn);
    color: #fff;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 1px;
}
.partner-label small { font-size: 14px; font-weight: 400; letter-spacing: .3px; opacity: .9; }
.partner-label:hover { background: var(--c-primary); color: #fff; }
.partner-more:link, .partner-more:visited { flex: none; color: var(--c-primary); font-size: 20px; }
.partner-more:hover { color: var(--c-accent); }

/* 特約廠商跑馬燈（不依賴 flexslider） */
.marquee { overflow: hidden; position: relative; }
/* 兩端淡出：用遮罩做，不管底下是什麼顏色都不會出現白色色塊 */
.marquee {
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%);
}
.marquee-track {
    display: flex;
    width: max-content;
    list-style: none;
    margin: 0;
    padding: 0;
    animation: keu-marquee 120s linear infinite;
}
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-track li { flex: none; margin-right: 12px; }
.marquee-track a:link, .marquee-track a:visited { display: block; }
.marquee-track img {
    display: block;
    width: 150px;
    height: 65px;
    object-fit: contain;
    border: 1px solid #f0e6d6;
    border-radius: 6px;
    background: #fff;
    transition: transform .2s;
}
.marquee-track a:hover img { transform: translateY(-2px); }
@keyframes keu-marquee {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

/* ---------- 粉絲團精選 ---------- */
/* 一次顯示 --fb-cols 則，其餘左右滑動 */
.fb-slider { position: relative; --fb-cols: 5; }
.fb-grid {
    display: flex;
    gap: 14px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 4px 2px 8px;
}
.fb-grid::-webkit-scrollbar { display: none; }
.fb-grid > * {
    flex: 0 0 calc((100% - (var(--fb-cols) - 1) * 14px) / var(--fb-cols));
    scroll-snap-align: start;
    min-width: 0;
}
.fb-nav {
    position: absolute;
    top: 50%;
    z-index: 2;
    width: 44px;
    height: 44px;
    margin-top: -22px;
    border: 0;
    border-radius: 50%;
    background: #fff;
    color: var(--c-primary);
    font-size: 30px;
    line-height: 40px;
    cursor: pointer;
    box-shadow: 0 3px 12px rgba(0, 0, 0, .18);
    transition: opacity .2s;
}
.fb-prev { left: -16px; }
.fb-next { right: -16px; }
.fb-nav:hover { background: var(--c-primary); color: #fff; }
.fb-nav:disabled { opacity: 0; pointer-events: none; }
.fb-slider.no-scroll .fb-nav { display: none; }
.fb-grid .fb-item {
    height: 500px;
    overflow: hidden;
    border-radius: var(--radius);
    border: 1px solid #eee;
    background: #fff;
}
.fb-grid iframe { width: 100% !important; max-width: 100%; border: 0; }

/* 自製卡片（有圖片的貼文）：不靠 Facebook 嵌入，任何手機都不會出現哭臉 */
.fb-grid .fb-card {
    display: flex;
    flex-direction: column;
    height: 500px;
    overflow: hidden;
    border-radius: var(--radius);
    border: 1px solid #eee;
    background: #fff;
    color: inherit;
    text-decoration: none;
    transition: box-shadow .2s, transform .2s;
}
.fb-grid .fb-card:hover { box-shadow: 0 8px 22px rgba(154, 91, 30, .16); transform: translateY(-2px); text-decoration: none; }
/* 圖片完整顯示不裁切：直式海報會在左右留淡色底 */
.fb-card-img { display: flex; align-items: center; justify-content: center; height: 300px; background: var(--c-soft); overflow: hidden; flex: none; }
.fb-card-img img { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.fb-card-body { display: flex; flex-direction: column; flex: 1; min-height: 0; padding: 12px 14px 14px; gap: 8px; }
.fb-card-text {
    font-size: 16px;
    line-height: 1.6;
    color: #3b3b3b;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 5;
    overflow: hidden;
}
.fb-card-more, .fb-grid a.fb-embed-link { font-size: 15px; font-weight: 700; color: var(--c-primary); }
.fb-card-more { margin-top: auto; }
.fb-grid .fb-card:hover .fb-card-more { text-decoration: underline; }

/* 嵌入型（只有網址的貼文）：下方固定一條「在 Facebook 查看」 */
.fb-grid .fb-embed { display: flex; flex-direction: column; }
.fb-embed-frame { flex: 1; min-height: 0; overflow: hidden; }
.fb-embed-frame iframe { height: 100%; }
.fb-grid a.fb-embed-link { flex: none; display: block; padding: 9px 14px; border-top: 1px solid #f0e6d6; background: #fffaf0; text-decoration: none; }
.fb-grid a.fb-embed-link:hover { text-decoration: underline; }

/* ---------- 右側欄卡片 ---------- */
.sidebar { display: flex; flex-direction: column; gap: 22px; }

.side-card {
    background: #fff;
    border: 1px solid #eee;
    border-radius: var(--radius);
    overflow: hidden;
}
.side-card .sec-title { padding: 12px 14px 0; margin: 0 0 6px; }
.side-card .sec-title .tc { font-size: 23px; }
.side-card .sec-title .en { font-size: 18px; }
.side-card .sec-title .sec-icon { width: 28px; height: 28px; }
.side-card-body { padding: 8px 14px 16px; }

.quick-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 12px; }

/* 入會／活動報名 大按鈕 */
.quick-btns a.qb:link, .quick-btns a.qb:visited {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 16px 8px 14px;
    border-radius: 12px;
    text-align: center;
    overflow: hidden;
    transition: transform .2s, box-shadow .2s;
}
.quick-btns a.qb::after {               /* 右上角淡淡的光暈 */
    content: "";
    position: absolute;
    top: -30px; right: -30px;
    width: 80px; height: 80px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .18);
    pointer-events: none;
}
.quick-btns a.qb:hover { transform: translateY(-3px); box-shadow: 0 8px 18px rgba(154, 91, 30, .28); }

.qb-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .9);
}
.qb-icon svg { width: 26px; height: 26px; }

.qb-text { display: flex; flex-direction: column; line-height: 1.3; }
.qb-text strong { font-size: 23px; font-weight: 700; letter-spacing: 2px; }
.qb-text small { font-size: 16px; letter-spacing: 1px; opacity: .92; }

/* 加入會員：深橘 */
.quick-btns a.qb-join:link, .quick-btns a.qb-join:visited {
    background: linear-gradient(145deg, #f0943a, #c8691a);
    color: #fff;
    box-shadow: 0 3px 10px rgba(200, 105, 26, .25);
}
.qb-join .qb-icon { color: #c8691a; }

/* 活動報名：金黃 */
.quick-btns a.qb-event:link, .quick-btns a.qb-event:visited {
    background: linear-gradient(145deg, #fde29a, #f2b93b);
    color: #5a4028;
    box-shadow: 0 3px 10px rgba(242, 185, 59, .3);
}
.qb-event .qb-icon { color: #b8770f; }
.quick-btns a.qb-event:hover { color: #5a4028; }
.quick-btns a.qb-join:hover { color: #fff; }

/* 訂閱牛奶瓶報報：奶油白 */
.quick-btns a.qb-milk:link, .quick-btns a.qb-milk:visited {
    background: linear-gradient(145deg, #fffaf0, #f6dcae);
    color: #5a4028;
    border: 1px solid #efd7a8;
    box-shadow: 0 3px 10px rgba(201, 150, 70, .2);
}
.qb-milk .qb-icon { color: #c8691a; background: #fff; }
.quick-btns a.qb-milk:hover { color: #5a4028; }

/* 安裝高教產 App：深咖啡 */
.quick-btns a.qb-app:link, .quick-btns a.qb-app:visited {
    background: linear-gradient(145deg, #8a5a2b, #5a4028);
    color: #fff;
    box-shadow: 0 3px 10px rgba(90, 64, 40, .3);
}
.qb-app .qb-icon { color: #5a4028; }
.quick-btns a.qb-app:hover { color: #fff; }

/* 左側選單 (asp:Menu, vertical) 變成兩欄膠囊按鈕 */
.side-menu, .side-menu ul.level1 { width: 100% !important; }
.side-menu ul.level1 {
    float: none !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    list-style: none;
    margin: 0;
    padding: 0;
}
.side-menu ul.level1 > li { float: none !important; position: relative; }
.side-menu ul.level1 > li > a,
.side-menu ul.level1 > li > a:visited {
    display: block !important;
    text-align: center;
    padding: 8px 6px !important;
    border-radius: 6px;
    background: var(--c-soft) !important;
    color: var(--c-primary-dk) !important;
    font-size: 20px;
    white-space: nowrap;
}
.side-menu ul.level1 > li > a:hover {
    background: var(--c-btn) !important;
    color: #fff !important;
}

.pill-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.pill-list a:link, .pill-list a:visited {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 9px 12px;
    border-radius: 6px;
    border: 1px solid var(--c-soft);
    color: var(--c-text-2);
    font-size: 20px;
}
.pill-list a::after { content: "›"; color: var(--c-accent); font-size: 23px; }
.pill-list a:hover { background: var(--c-soft); color: var(--c-primary); }

.qr-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; text-align: center; }
.qr-row a:link, .qr-row a:visited { color: var(--c-muted); font-size: 15px; }
/* 三張 QR 卡片比例不同時，下方文字對齊同一條線 */
.qr-row a:link, .qr-row a:visited { display: flex; flex-direction: column; justify-content: space-between; align-items: center; }
.qr-row img {
    margin-bottom: 6px;
    aspect-ratio: 3 / 4;          /* 三張卡片統一比例，高度一致 */
    object-fit: cover;            /* 比例不同的圖只裁掉一點邊緣，QR 在中間不受影響 */
    object-position: center;
}
.qr-row img { width: 100%; border-radius: 6px; border: 1px solid #eee; display: block; margin-bottom: 4px; }

/* ---------- 頁尾 ---------- */
.site-footer {
    background: var(--c-footer);
    color: #fff;
    border-top: 6px solid #f2c94c;
    font-size: 16px;
    text-align: center;
    padding: 26px 0 22px;
}
.site-footer .social {
    display: flex;
    justify-content: center;
    gap: 22px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}
.site-footer .social a:link, .site-footer .social a:visited {
    color: #fff;
    font-size: 21px;
    font-weight: 600;
    padding: 4px 14px;
    border: 1px solid rgba(255,255,255,.5);
    border-radius: 999px;
}
.site-footer .social a:hover { background: rgba(255,255,255,.15); }
.site-footer p { margin: 4px 0; line-height: 1.8; color: #fff; }
.site-footer p a:link, .site-footer p a:visited { color: #fff; text-decoration: underline; }
.site-footer .social a:link, .site-footer .social a:visited { text-decoration: none; }

/* ---------- 消息內容頁 (newView.aspx) ---------- */
.article { max-width: 980px; }

.article-top {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
}
.article-back:link, .article-back:visited {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 14px 4px 10px;
    border: 1px solid var(--c-line);
    border-radius: 999px;
    color: var(--c-muted);
    font-size: 18px;
    background: #fff;
}
.article-back:hover { color: var(--c-primary); border-color: var(--c-primary); }

.article-tags { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.article-tags a.tag:link, .article-tags a.tag:visited {
    display: inline-block;
    padding: 3px 12px;
    border-radius: 999px;
    background: var(--c-soft);
    color: var(--c-primary-dk);
    font-size: 16px;
}
.article-tags a.tag:hover { background: var(--c-btn); color: #fff; }

.article-title {
    margin: 0 0 14px;
    padding: 0 0 14px;
    font-size: 34px !important;
    font-weight: 700 !important;
    font-variant: normal !important;
    line-height: 1.45;
    color: var(--c-text) !important;
    border-bottom: 3px solid var(--c-soft);
    word-break: break-word;
}

.article-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 18px;
    font-size: 18px;
    color: var(--c-muted);
    margin-bottom: 14px;
}
.meta-item { display: inline-flex; align-items: center; gap: 5px; }
.meta-item svg {
    width: 16px; height: 16px;
    fill: none; stroke: var(--c-accent); stroke-width: 2;
    stroke-linecap: round; stroke-linejoin: round;
}
.meta-deadline { color: var(--c-text-2); }
.badge {
    display: inline-block;
    padding: 1px 8px;
    border-radius: 4px;
    font-size: 15px;
    font-weight: 700;
    margin-right: 4px;
    vertical-align: 1px;
}
.badge-open { background: #e3f4e5; color: #23753a; }
.badge-closed { background: #fde2e1; color: #b42318; }
.meta-edit a.edit-link:link, .meta-edit a.edit-link:visited { color: var(--c-muted); font-size: 16px; }
.meta-edit a.edit-link:hover { color: var(--c-primary); }

.article-share {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 22px;
}
.share-label { font-size: 16px; color: var(--c-muted); margin-right: 2px; }
.share-btn, a.share-btn:link, a.share-btn:visited {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 999px;
    border: 0;
    font-size: 16px;
    font-family: inherit;
    cursor: pointer;
    color: #fff;
}
a.share-line:link, a.share-line:visited { background: #06c755; color: #fff; }
a.share-fb:link, a.share-fb:visited { background: #1877f2; color: #fff; }
.share-copy { background: #fff; color: var(--c-text-2) !important; border: 1px solid var(--c-line) !important; }
.share-btn:hover { opacity: .85; color: #fff; }
.share-copy:hover { color: var(--c-primary) !important; }

.article-signup { display: block; margin-bottom: 22px; }
.article-signup:empty { display: none; }
.article-signup a.btn-signup:link, .article-signup a.btn-signup:visited {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 26px;
    border-radius: 12px;
    background: linear-gradient(145deg, #f0943a, #c8691a);
    color: #fff;
    font-size: 26px;
    font-weight: 700;
    letter-spacing: 1px;
    box-shadow: 0 6px 16px rgba(200, 105, 26, .3);
    transition: transform .2s, box-shadow .2s;
}
.article-signup a.btn-signup:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(200, 105, 26, .35); color: #fff; }
.btn-signup-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; border-radius: 50%;
    background: rgba(255, 255, 255, .9); color: #c8691a; font-size: 22px;
}
.btn-signup-arrow { font-size: 32px; line-height: 1; margin-left: 2px; }

.article-files {
    background: var(--c-row);
    border: 1px solid #f3e6cc;
    border-radius: var(--radius);
    padding: 14px 16px;
    margin-bottom: 24px;
}
.files-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--c-primary-dk);
    margin-bottom: 10px;
    padding-left: 10px;
    border-left: 4px solid var(--c-btn);
}
.article-files a.file-img:link, .article-files a.file-img:visited {
    display: block;
    margin: 4px 0 10px;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .08);
}
.article-files a.file-img img { display: block; width: 100%; height: auto; }
.article-files a.file-link:link, .article-files a.file-link:visited {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 12px;
    margin-bottom: 8px;
    background: #fff;
    border: 1px solid #f0e6d6;
    border-radius: 8px;
    color: var(--c-text-2);
    font-size: 20px;
}
.article-files a.file-link:hover { border-color: var(--c-btn); color: var(--c-primary); }
.article-files a.file-link img { width: 18px; height: auto; flex: none; }
.file-name { flex: 1; min-width: 0; word-break: break-all; }
.file-size { flex: none; font-size: 15px; color: var(--c-muted); }

.article-body {
    font-size: 22px;
    line-height: 1.9;
    color: var(--c-text);
    word-break: break-word;
    overflow-wrap: anywhere;
}
.article-body p { margin: 0 0 1em; line-height: 1.9; }
.article-body img { max-width: 100% !important; height: auto !important; border-radius: 6px; }
.article-body table { max-width: 100%; border-collapse: collapse; }
.article-body iframe, .article-body video { max-width: 100%; }
.article-body a:link, .article-body a:visited { color: var(--c-primary); text-decoration: underline; }

.article-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 34px;
    padding-top: 16px;
    border-top: 1px solid var(--c-line);
}
.article-totop:link, .article-totop:visited { font-size: 18px; color: var(--c-muted); }
.article-totop:hover { color: var(--c-primary); }

@media (max-width: 760px) {
    .article-title { font-size: 25px !important; }
    .article-body { font-size: 19px; }
    .article-signup a.btn-signup:link, .article-signup a.btn-signup:visited {
        display: flex; justify-content: center; font-size: 21px; padding: 12px 16px;
    }
    .article-files { padding: 12px; }
}

/* ---------- 舊頁面相容 ---------- */
.GVCss { color: #1f5ca9; background-color: #fff; }
.text_Title, .NewTitle { text-decoration: none; }
.loginDisplay { position: static; color: inherit; padding: 0; font-size: inherit; }

/* ---------- 響應式 ---------- */
@media (max-width: 1100px) {
    .fb-slider { --fb-cols: 4; }
    .main-nav .menu ul.level1 > li > a { padding: 10px 10px 8px !important; font-size: 20px !important; }
}

@media (max-width: 960px) {
    .layout { grid-template-columns: 1fr; gap: 24px; }
    .fb-slider { --fb-cols: 3; }

    /* 單欄時：會員服務卡片排到內容最上方，其餘側欄卡片仍在最下面 */
    .sidebar { display: contents; }
    .side-member { order: -1; }
    .content-column { order: 0; }
    .sidebar > .side-card:not(.side-member) { order: 1; }
    /* 只有首頁（有公告列的頁面）才把會員服務放最上面，內頁仍放在內容下方 */
    .layout:not(:has(.notice-bar)) .side-member { order: 1; }

    /* 會員服務卡片在手機上緊湊一點 */
    .side-member .side-card-body { padding-bottom: 12px; }
    .side-member .side-menu ul.level1 { grid-template-columns: repeat(3, 1fr); gap: 6px; }
    .side-member .side-menu ul.level1 > li > a { padding: 7px 4px !important; font-size: 18px; }
    .side-member .quick-btns a.qb:link, .side-member .quick-btns a.qb:visited {
        flex-direction: row;
        justify-content: center;
        gap: 8px;
        padding: 10px 6px;
        text-align: left;
    }
    .side-member .qb-icon { width: 36px; height: 36px; flex: none; }
    .side-member .quick-btns a.qb::after { display: none; }
    .side-member .qb-icon svg { width: 20px; height: 20px; }
    .side-member .qb-text strong { font-size: 21px; letter-spacing: 1px; }
    .side-member .qb-text small { font-size: 15px; letter-spacing: 0; }
}

@media (max-width: 760px) {
    body { font-size: 18px; }   /* 手機基本字級（桌機為 21px） */
    .keu-wrap { padding: 0 16px; }
    .brand-text strong { font-size: 21px; letter-spacing: 0; white-space: nowrap; }
    .brand-text small { font-size: 13px; }
    .brand:not(.brand-sub) img:first-child { display: none; }
    .brand img { width: 48px; height: 48px; }
    .brand-sub { display: none !important; }
    .nav-toggle { display: block; }
    .header-main { gap: 12px; flex-wrap: nowrap; }

    .main-nav { display: none; }
    .main-nav.open { display: block; }
    .main-nav .menu ul.level1 { flex-direction: column; }
    .main-nav .menu ul.level1 > li > a {
        flex-direction: row !important;
        justify-content: space-between;
        border-bottom: 1px solid #f0f0f0 !important;
        margin-bottom: 0;
    }

    .sec-title .en { display: none; }
    .toolbar .search { margin-left: 0; width: 100%; }
    .input-search { flex: 1; width: auto; }
    .fb-slider { --fb-cols: 2; }
    .fb-card-img { height: 210px; }
    .fb-prev { left: -6px; }
    .fb-next { right: -6px; }
    .fb-grid .fb-item, .fb-grid .fb-card { height: 420px; }
    .fb-card-text { -webkit-line-clamp: 4; font-size: 15px; }
    .fb-card-more, .fb-grid a.fb-embed-link { font-size: 14px; white-space: nowrap; }
    /* 消息列表：手機改成「標題一整行＋日期/附件在下一行」的卡片式 */
    .news-table, .news-table tbody, .news-table tr { display: block; width: 100%; }
    .news-table th { display: none; }
    .news-table tr {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 4px 10px;
        padding: 12px 6px;
        border-bottom: 1px solid var(--c-line);
    }
    .news-table tr:has(> th) { display: none; }
    .news-table tr.alt { background: var(--c-row); }
    .news-table td { display: block; padding: 0; border: 0; background: transparent !important; }
    .news-table .col-id, .news-table .col-hit { display: none; }
    .news-table .col-title { order: 1; width: 100% !important; font-size: 19px; line-height: 1.55; }
    .news-table .col-date { order: 2; font-size: 15px; }
    .news-table .col-file { order: 3; font-size: 15px; }
    .news-table .col-file img { height: 16px; width: auto; vertical-align: middle; }
    .news-table tr.pager { display: block; padding: 0 0 10px; border: 0; background: #fff; }
    .news-table tr.pager td { text-align: left; }

    .news-list td { font-size: 18px; padding: 10px 6px; }
    .sec-title .tc { font-size: 22px; }
    .sec-title .sec-icon { width: 30px; height: 30px; }
    .notice-bar { font-size: 16px; }
    .toolbar { gap: 6px; }
    .partner-strip { padding: 8px 0; }
    .hero-partners { padding: 10px 0 0; }
    .banner { border-radius: 8px; }
    .banner-band { padding: 10px; border-radius: 12px; }
    .banner-nav { display: none; }
    .banner-dots { bottom: 6px; gap: 4px; }
    .banner-dots button { width: 7px; height: 7px; }
    .banner-dots button.is-active { width: 16px; }
    .partner-bar { padding: 8px 10px; gap: 8px; }
    .partner-wrap { padding-top: 12px; }
    .partner-label { padding: 6px 8px !important; font-size: 16px !important; }
    .partner-label small, .partner-more { display: none !important; }
    .marquee-track img { width: 120px !important; height: 52px !important; }
    .topbar { font-size: 14px; }
    .topbar-inner { justify-content: space-between; flex-wrap: nowrap; gap: 8px; white-space: nowrap; min-height: 38px; }
    .topbar .tb-online { display: none; }
    .site-main { padding-top: 18px; }
}