@charset "utf-8";
@import url("../font/font.css");

/* ==========================================================================
   雲林色彩 token — 莫蘭迪綠主色階
   對應桃園 taoyuan-ibus-tokens.css 的桃色階（--tao-pink-*）。
   色相 150–155°（青綠），飽和 20–32% 落在莫蘭迪低彩區。

   ★ 為什麼不沿用雲林原有的 #8EA97A：它白底對比僅 2.59:1，做描邊達不到
     非文字 3:1 門檻；而它的色相 94°（黃綠）因人眼對綠光敏感（亮度係數
     0.7152），要壓到足夠對比就會變成橄欖軍綠、失去莫蘭迪的柔和。
     改用青綠後，同樣對比度下能保留較高明度。
   ★ 中性色刻意沿用雲林既有的暖褐調（#3F3A34 等），不跟著桃園換成冷灰，
     否則會和站內既有的米色底（#F5F0CF）打架。

   每階後面的比值＝白底對比，四個關鍵階與桃園等價：
     400 描邊 3.16（桃園 3.45，門檻 3.0）   500 白字 5.11（桃園 5.22）
     600 文字 7.27（桃園 7.15，過 AAA）      700 高對比 10.15（桃園 10.03）
   ========================================================================== */
:root {
    --yun-green-50:  #F2F8F5;   /*  1.08:1 */
    --yun-green-100: #DFECE6;   /*  1.22:1 */
    --yun-green-200: #C1D7CC;   /*  1.52:1 */
    --yun-green-300: #97BAA8;   /*  2.12:1 */
    --yun-green-400: #629D80;   /*  3.16:1 — 描邊下限 */
    --yun-green-500: #457860;   /*  5.11:1 — 承白字 */
    --yun-green-600: #355F4B;   /*  7.27:1 — 主要文字色 */
    --yun-green-700: #264839;   /* 10.15:1 — 高對比模式 */
    --yun-green-800: #172D24;   /* 14.61:1 */

    /* 中性：沿用站內既有暖褐 */
    --yun-ink:      #3F3A34;    /* 11.25:1 */
    --yun-ink-soft: #736E64;    /*  5.07:1 */
    --yun-ink-mute: #A39C8E;
    --yun-line:     #E3E0D6;

    /* 公車狀態（語意層）。對齊桃園 --bus-*：
       ★ 主色是稀有資源 —— 只有「進站中」「即將進站」用綠，其餘一律中性色。 */
    --bus-arriving-bg:     var(--yun-green-500);
    --bus-arriving-text:   #FFFFFF;          /* 5.11:1 */
    --bus-arriving-border: transparent;

    --bus-soon-bg:     transparent;
    --bus-soon-text:   var(--yun-green-600); /* 白底 7.27:1 */
    --bus-soon-border: var(--yun-green-400); /* 白底 3.16:1，過非文字 3:1 */

    --bus-mid-bg:     transparent;
    --bus-mid-text:   var(--yun-ink);        /* 11.25:1 */
    --bus-mid-border: var(--yun-line);

    --bus-far-bg:     transparent;
    --bus-far-text:   var(--yun-ink-soft);   /*  5.07:1 */
    --bus-far-border: transparent;

    --bus-scheduled-bg:     #E8F0F4;
    --bus-scheduled-text:   #0A3D62;         /* 藍底上 9.80:1，沿用站內深藍 */
    --bus-scheduled-border: transparent;

    --bus-ended-bg:     #FFF7E1;             /* 沿用站內米色 */
    --bus-ended-text:   #6B5320;             /* 米底上 6.81:1 */
    --bus-ended-border: #6B5320;

    --bus-inactive-bg:     transparent;
    --bus-inactive-text:   var(--yun-ink-mute);
    --bus-inactive-border: transparent;
}

/* 到站狀態 pill。class 名與 markup 與桃園一致（見 js/pages/bus_status.js），
   差別只在上面 token 的色值。 */
.ty-status {
    display: inline-flex; align-items: center; justify-content: center;
    gap: 4px; min-width: 76px; padding: 4px 8px;
    border: 1px solid transparent; border-radius: 6px;
    font-size: .875rem; font-weight: 500;
    font-variant-numeric: tabular-nums; line-height: 1.4; white-space: nowrap;
}
.ty-status--arriving { background: var(--bus-arriving-bg);  color: var(--bus-arriving-text);  border-color: var(--bus-arriving-border); }
.ty-status--soon     { background: var(--bus-soon-bg);      color: var(--bus-soon-text);      border-color: var(--bus-soon-border); }
.ty-status--mid      { background: var(--bus-mid-bg);       color: var(--bus-mid-text);       border-color: var(--bus-mid-border); }
.ty-status--far      { background: var(--bus-far-bg);       color: var(--bus-far-text);       border-color: var(--bus-far-border); }
.ty-status--scheduled{ background: var(--bus-scheduled-bg); color: var(--bus-scheduled-text); border-color: var(--bus-scheduled-border); }
.ty-status--ended    { background: var(--bus-ended-bg);     color: var(--bus-ended-text);     border-color: var(--bus-ended-border); }
.ty-status--inactive { background: var(--bus-inactive-bg);  color: var(--bus-inactive-text);  border-color: var(--bus-inactive-border); }

/* 脈動點只給「進站中」：它一台車只有一個、稀有；「即將進站」一次五到十個，
   同時脈動會比色塊更吵，也失去「車就在眼前」的意義。 */
.ty-status__pulse { width: 5px; height: 5px; border-radius: 50%; background: currentColor; flex: none; }
@media (prefers-reduced-motion: no-preference) {
    .ty-status--arriving .ty-status__pulse { animation: yun-pulse 1.4s ease-in-out infinite; }
}
@media (prefers-reduced-motion: reduce) {
    .ty-status__pulse { display: none; }
}
@keyframes yun-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

/* 高對比模式：把文字色再往下壓一階 */
@media (prefers-contrast: more) {
    :root { --bus-soon-text: var(--yun-green-700); }  /* 白底 10.15:1 */
}

/* ===== 去回程頁籤（對齊 tao base.css:103-115）=====
   ★ 用 #tabs-tab .nav-link 這種 (1,1,0) 特異性而非單一 class：yun.css 在
     Base.html 是先於 bootstrap.min.css 載入的，特異性不夠會被 bootstrap 蓋掉。
   ★ 作用中底色取 green-500（5.11:1 承白字）而非 green-400（3.16:1 只是描邊下限）。
     桃園自己在這裡不一致（橫幅 pink-400、頁籤 pink-500），雲林兩處統一 500。 */
#tabs-tab .nav-link {
    background-color: transparent !important;
    color: var(--yun-ink-soft) !important;
    font-weight: 600;
    border: none;
    border-bottom: 2px solid transparent;
}
#tabs-tab .nav-link.active {
    background-color: var(--yun-green-500) !important;
    color: #FFFFFF !important;
    border-radius: 6px 6px 0 0;
    border-bottom: none;
}
#tabs-tab .nav-link:disabled,
#tabs-tab .nav-link.disabled { opacity: .45; }

/* ===== 路線待選清單與已選橫幅（對齊 tao 的 .route-list / .route-selected）===== */
.route-list {
    max-height: 320px; overflow-y: auto;
    border: 1px solid var(--yun-line); border-radius: 8px;
    background: #FFFFFF;
}
.route-list-empty { padding: 10px 14px; color: var(--yun-ink-soft); font-size: .9375rem; }
.route-item {
    display: block; width: 100%; text-align: left;
    padding: 10px 14px; border: none; background: none;
    border-bottom: 1px solid var(--yun-line);
    color: var(--yun-ink); font-size: .9375rem; cursor: pointer;
}
.route-item:last-child { border-bottom: none; }
.route-item:hover { background: var(--yun-green-50); }
.route-item.active { background: var(--yun-green-50); color: var(--yun-green-700); font-weight: 600; }
.route-item:focus-visible { outline: 2px solid var(--yun-green-400); outline-offset: -2px; }

/* 已選路線橫幅：實心綠、整條可點（點了重新展開清單） */
.route-selected {
    display: flex; align-items: center; justify-content: space-between;
    width: 100%; padding: 10px 16px;
    border: none; border-radius: 8px;
    background: var(--yun-green-500);   /* 承白字 5.11:1 */
    color: #FFFFFF; font-size: 1rem; font-weight: 600;
    text-align: left; cursor: pointer;
}
.route-selected:hover { background: var(--yun-green-600); }
.route-selected:focus-visible { outline: 2px solid var(--yun-green-700); outline-offset: 2px; }

/* ===== 路線相關資訊膠囊列（對齊 tao 的 .route-links）===== */
.route-links {
    display: flex; flex-wrap: wrap; gap: 8px;
    justify-content: flex-end;
    margin: 6px 4px 8px;
}
.route-link {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 14px;
    border: 1px solid var(--yun-green-400);
    border-radius: 999px;                  /* 膠囊 */
    background: #FFFFFF;
    color: var(--yun-green-700);           /* 白底 10.15:1 */
    font-size: .875rem; font-weight: 500;
    text-decoration: none; white-space: nowrap;
}
.route-link:hover { background: var(--yun-green-50); color: var(--yun-green-700); }
.route-link:focus-visible { outline: 2px solid var(--yun-green-400); outline-offset: 2px; }
.route-link i { font-size: .9em; }

/* ===== ls 第二層分類（全部／市區公車／公路客運…）===== */
.ls-tabs {
    display: flex; flex-wrap: wrap; gap: 6px;
    margin: 4px 0 12px;
}
.ls-tab {
    padding: 5px 16px;
    border: 1px solid transparent; border-radius: 999px;
    background: none;
    color: var(--yun-ink-soft);
    font-size: .9375rem; font-weight: 500;
    cursor: pointer; white-space: nowrap;
}
.ls-tab:hover { background: var(--yun-green-50); color: var(--yun-green-700); }
.ls-tab.active {
    background: var(--yun-green-500);     /* 承白字 5.11:1 */
    color: #FFFFFF;
}
.ls-tab:focus-visible { outline: 2px solid var(--yun-green-400); outline-offset: 2px; }

/* ===== ls 路線清單：行政區跳轉鈕＋編號方塊格 =====
   ★ 一律 .ls-* 前綴，刻意不共用上面 123-138 行的 .route-list / .route-item：
     那兩個是 rt 頁路線待選清單在用的，共用會讓兩頁互相污染。 */

/* 行政區鈕是「跳轉錨點」不是篩選鈕：所有行政區一次全部攤開在同一頁，
   點鈕只是捲到該區。這是照桃園實測來的——它的行政區模式 role="group"、
   內容區同時存在全部區段的小標與方塊格，點鈕後方塊總數不變、只有捲軸位置變。 */
.ls-towns { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
.ls-town {
    display: inline-flex; align-items: baseline; gap: 4px;
    padding: 4px 12px;
    border: 1px solid var(--yun-green-400);   /* 白底 3.16:1，過非文字 3:1 */
    border-radius: 999px;                     /* 膠囊，與上面的 .ls-tab 同一套語彙 */
    background: #FFFFFF;
    color: var(--yun-green-700);              /* 白底 10.15:1 */
    font-size: .875rem; font-weight: 500;
    cursor: pointer; white-space: nowrap;
}
.ls-town__count { font-size: .75rem; color: var(--yun-ink-soft); }
.ls-town:hover { background: var(--yun-green-50); }
.ls-town:focus-visible { outline: 2px solid var(--yun-green-400); outline-offset: 2px; }

/* scroll-margin-top：小標是上方鈕的跳轉目標，而站台頁首是 sticky（yun.css .site-header，
   高 58px）。不留這段空間的話捲過去會被頁首壓住，看起來像跳錯地方。
   120px＝頁首 58 ＋ 種類頁簽與行政區鈕的高度餘裕。 */
.ls-group__title {
    display: flex; align-items: baseline; gap: 8px;
    margin: 12px 0 2px; padding: 0 2px;
    scroll-margin-top: 120px;
    font-size: 1rem; font-weight: 700; color: var(--yun-green-700);
}
.ls-group__count { font-size: .8125rem; font-weight: 400; color: var(--yun-ink-soft); }
.ls-note { margin: 0 0 8px; padding: 0 2px; font-size: .8125rem; color: var(--yun-ink-soft); }

/* 方塊格尺寸與桃園 .route-grid 一致（minmax 70px、方塊 32px 高），
   1440 下同樣是 18 欄。方塊內只有編號，所以不需要更寬的欄。 */
.ls-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));
    gap: 6px;
}
.ls-chip {
    display: flex; align-items: center; justify-content: center;
    min-height: 32px; padding: 3px 2px;
    border: 1px solid var(--yun-line); border-radius: 8px;
    background: #FFFFFF;
    color: var(--yun-ink);                    /* 白底 11.25:1 */
    text-align: center; cursor: pointer; overflow: hidden;
    transition: background-color .15s, border-color .15s;
}
.ls-chip__no { font-size: 1rem; font-weight: 700; line-height: 1.2; white-space: nowrap; }
.ls-chip:hover { background: var(--yun-green-50); border-color: var(--yun-green-400); }
.ls-chip:focus-visible { outline: 2px solid var(--yun-green-400); outline-offset: 2px; }

/* 無障礙圖示：自帶 PNG（與桃園同兩張圖），不走 Font Awesome ——
   雲林的 FA 是綁縣府網域的 kit，換個網域就 403，圖示會變成寬度 0 的空元素。 */
.acc-icon { height: 1em; width: auto; vertical-align: -0.15em; margin-left: 4px; }

/* ===== 動態表格（對齊 tao taoyuan-ibus-components.css）=====
   ★ 模板必須同時拿掉 table-striped / table-light：斑馬紋會蓋掉 ty-status
     pill 的透明底（--soon/--mid/--far 都是 transparent），奇數列會多出底色。 */
.ty-stops th,
.ty-stops td { vertical-align: middle; }        /* 列高置中的來源 */
.ty-stops thead th {
    background: var(--yun-green-50);
    color: var(--yun-green-700);
    font-size: .8125rem;
    font-weight: 500;
    letter-spacing: .02em;
    border-bottom: 2px solid var(--yun-green-200);
}
.ty-thead-icon { color: var(--yun-green-600); }
.ty-stops tbody tr > * { border-bottom: 1px solid var(--yun-line); }
.ty-stops tbody tr:last-child > * { border-bottom: none; }
.ty-stops .ty-seq { color: var(--yun-ink-soft); font-variant-numeric: tabular-nums; }

/* 車牌欄（對齊 tao base.css:587 + tao.css:905）：表格內用 .875rem，
   字重 normal、不換行。只在「進站中」那一站有值，見 midsearch_rt.js */
.plate-cell { white-space: nowrap; font-weight: normal; font-size: .8em; }
table.ty-stops .plate-cell {
    font-size: .875rem;
    font-variant-numeric: tabular-nums;
    letter-spacing: .02em;
    color: var(--yun-ink);
}

/* 我的站點（對齊 tao .ty-fav）：固定觸控尺寸、置中、無底無框。
   空心/實心是唯一的非色彩線索，色覺障礙者也分得出狀態。 */
.ty-fav {
    width: 44px; height: 44px;
    display: inline-flex; align-items: center; justify-content: center;
    background: none; border: none; padding: 0; line-height: 1;
    color: var(--yun-ink-mute); cursor: pointer;
}
.ty-fav[aria-pressed="true"] { color: var(--yun-green-600); }
.ty-fav:hover { color: var(--yun-green-400); }
.ty-fav:focus-visible { outline: 2px solid var(--yun-green-400); outline-offset: 2px; border-radius: 4px; }

/* 表格下方圖例沿用 tao 的 row/col-auto 版面，不需要額外樣式；
   圖示顏色走上面的 .ty-thead-icon。 */

body {
        background-color: #f5f0cf!important;
        font-family: 'Noto Sans TC', sans-serif;
    }

    /* 整體外框 */
    .yun-wrapper {
        padding-top: 0.5rem;
        padding-bottom: 3rem;
    }

    /* 頁首：左文字 + 右LOGO */
    .yun-header-title {
        font-weight: 700;
        letter-spacing: .12em;
        color: #3f3a34;
        font-size: clamp(1.1rem, 3vw, 1.8rem);
    }

    .yun-header-sub {
        font-size: clamp(0.8rem, 2vw, 1.1rem);
        color: #736e64;
    }

    .yun-slogan-logo {
        max-width: 400px;
        width: 100%;
    }

    /* 綠色功能區 */
    .yun-menu-wrap {
        background-color: #8ea97a;
        border-radius: 24px 24px 0 0;
        padding: 1.8rem 1.2rem 1.2rem;
        margin-top: 0.3rem;
        position: relative;
        overflow: visible;       /*讓裝飾圖可以稍微突出 */
    }

    .yun-menu-item {
        text-align: center;
        margin-bottom: 1rem;
    }

    .yun-menu-icon {
        width: 110px;
        max-width: 100%;
        border-radius: 24px;
        display: block;
        margin: 0 auto .4rem;
    }

    .yun-menu-text {
        font-weight: 700;
        color: #f9f6e8;
        font-size: .98rem;
        letter-spacing: .15em;
    }

    @media (min-width: 768px) {
        .yun-menu-icon {
            width: 130px;
        }
        .yun-menu-text {
            font-size: 1.3rem;
            letter-spacing: .07em;
        }
    }

    /* 主內容卡片（公告列表） */
    .yun-main-card {
        background-color: #f8f4e4;
        border-radius: 0 0 24px 24px;
        padding: 2rem 1.5rem 3.2rem;
        box-shadow: 0 10px 24px rgba(104, 84, 54, 0.2);
        position: relative;
    }

    .yun-main-title {
        font-weight: 700;
        color: #4e473f;
        margin-bottom: 1rem;
    }

    .yun-ann-table thead {
        background-color: #f1e0bf;
    }

    .yun-ann-table thead th {
        border-bottom: none;
        font-weight: 700;
    }

    .yun-ann-table tbody tr:nth-child(odd) {
        background-color: #fff7e1;
    }

    .yun-ann-table tbody tr:nth-child(even) {
        background-color: #fff7e1;
    }

    .yun-ann-table tbody tr.table-warning {
        background-color: #fff1c4;
    }

    /* 底部裝飾圖 */
    .yun-decoration-garlic {
        position: absolute;
        left: 1.5rem;
        bottom: .3rem;
        width: 110px;
        opacity: .9;
    }
    .yun-decoration-rice {
        position: absolute;
        right: 1.5rem;     /* 往右靠，想更右就再調大 */
        top: -1.8rem;      /* 往上浮出綠色區塊，數字可自己微調 */
        width: 120px;
        opacity: .95;
        pointer-events: none;  /* 避免擋到按鈕點擊 */
    }

    @media (max-width: 575.98px) {
        .yun-decoration-garlic {
            width: 80px;
            left: .5rem;
        }
    }

    /* 跑馬燈（可直接拿掉） */
    .marquee-area {
        background: #CAD9BF;
        height: 48px;
        overflow: hidden;
        z-index: 5;
        contain: layout paint style;   /* 隔離影響範圍，降低重排/重繪範圍 */

        /*讓上方兩角圓弧 */
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
    }
    .marquee-content {
        height: 100%;
        display: flex;
        align-items: center;
        white-space: nowrap;
        animation: marquee 18s linear infinite;
    }
    /* 跑馬燈文字要停在稻穗左側，不能從圖案底下穿過去。
       ★ 關鍵在「裁切邊」，不在「動畫層的寬度」：overflow 切的是 padding box，
       所以決定文字畫到哪裡的是 .marquee-area 的裁切邊。.marquee-text 是
       nowrap + padding-left:100% 的 flex item，本來就會溢出 .marquee-content，
       縮 .marquee-content 只移動了文字起點、裁不到溢出的部分，溢出的字仍在
       .marquee-area 內被畫到稻穗底下 —— 前一版 width:calc(100% - 152px) 就是敗在這。
       padding 也沒用（padding 區仍屬可視範圍，實測照樣重疊 119px）；
       在會動的 .marquee-content 上加 overflow:hidden 更糟，裁切框跟著 transform
       一起移動，文字與框的相對位置永遠不變，整條跑馬燈會消失。
       只有 border 能把裁切邊往內推，而背景預設畫到 border box，
       所以綠帶與上方兩個圓角維持滿版、外觀不變。
       128px = 稻穗 120px 寬 + 8px 間距。稻穗 right:1.5rem 與卡片左右 padding 同值，
       其右緣正好貼齊綠帶右緣，故不論視窗多寬都只吃進來 120px，這個常數不必隨螢幕調。
       ≥768px 才需要：稻穗掛 d-none d-md-block，小螢幕不顯示，文字用滿版。 */
    @media (min-width: 768px) {
        .marquee-area { border-right: 128px solid transparent; }
    }
    /* 高對比模式（Windows 高對比／forced-colors）會把 border-color 強制換成系統色，
       transparent 會被改成純黑，右端冒出一塊 128px 黑方塊（實測整塊 (0,0,0)）。
       指回 Canvas（系統背景色），border 才會繼續「只裁不畫」。
       改用實色 #CAD9BF 一樣會被強制改寫，所以這條不可省。 */
    @media (forced-colors: active) and (min-width: 768px) {
        .marquee-area { border-right-color: Canvas; }
    }
    .marquee-text {
        font-size: 1rem;
        font-weight: 700;
        padding-left: 100%;
        color: #0a3d62;
    }
    @keyframes marquee {
        0% { transform: translateX(0); }
        100% { transform: translateX(-100%); }
    }


/* ==========================================================================
   頁首：版型比照 tao（品牌靠左、導覽靠右的單列 flex，窄螢幕收成漢堡選單），
   顏色一律用雲林自己的色碼，不引進桃園的品牌色。
   ========================================================================== */
.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background-color: #fff7e1;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}
.shell {
    width: min(1400px, calc(100% - 100px));
    margin: 0 auto;
}
.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    /* 與 .shell 同值：tao 是靠 .shell 定義在後面覆蓋掉 .header-inner 的 calc，
       這裡直接寫成一樣的值，不依賴宣告順序。 */
    width: min(1400px, calc(100% - 100px));
    max-width: none;
    margin: 0 auto;
    padding: 6px 0;
}
.brand {
    display: flex;
    align-items: center;
    gap: 15px;
    color: #3f3a34;
    /* 對齊 tao base.css:460-467。不補這三條會吃 bootstrap 預設 16px/400，
       與桃園的 20px/700 對不上 */
    font-size: 20px;
    font-weight: 700;
    line-height: 1.1;
}
.brand:hover { color: inherit; }
.logo-mark { width: auto; height: 46px; flex: none; }

/* 品牌區中英兩行（對齊 tao base.css:475-476）
   副標色用 --yun-ink-soft #736E64，在頁首米底 #FFF7E1 上 4.74:1，過 AA 4.5 */
.brand-copy { display: flex; flex-direction: column; justify-content: center; }
.brand-sub {
    margin-top: 2px;
    color: var(--yun-ink-soft);
    font-size: 11px;
    font-weight: 400;
    letter-spacing: .02em;
}

.nav-main {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    margin-left: auto;
    gap: 30px;
}
.nav-main a {
    color: #3f3a34;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.1;
    text-decoration: none;
    transition: color 0.3s ease;
}
/* 作用中與 hover 用深藍——那是雲林色票裡唯一的冷色。
   但深藍與一般項目的深棕明度接近，只靠顏色辨識度不足，
   再加一條底線當結構線索（色覺障礙者也分得出來）。 */
.nav-main a:hover { color: #0a3d62; }
.nav-main a[aria-current="page"] {
    color: #0a3d62;
    border-bottom: 3px solid #0a3d62;
    padding-bottom: 2px;
}

/* 漢堡鈕：桌機隱藏，≤991.98px 才出現 */
.nav-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: #3f3a34;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    transition: background 0.2s ease;
}
.nav-toggle:hover { background: rgba(0, 0, 0, 0.06); }
.nav-toggle:focus-visible { background: rgba(0, 0, 0, 0.06); outline: 2px solid #0a3d62; outline-offset: 2px; }

@media (max-width: 991.98px) {
    /* 英文副標在窄螢幕收起（對齊 tao base.css:544）：雲林 LOGO 比桃園寬
       （46px 高時約 91px vs 42px）、導覽又多一項，副標留著會把 nav 擠到折行 */
    .brand-sub { display: none; }
    .shell { width: min(100%, calc(100% - 48px)); }
    .header-inner {
        width: min(100%, calc(100% - 48px));
        flex-wrap: wrap;
        gap: 12px;
    }
    .brand { gap: 10px; }
    .nav-toggle { display: inline-flex; margin-left: auto; }
    .nav-main {
        order: 3;
        flex-basis: 100%;
        flex-direction: column;
        margin-left: 0;
        gap: 0;
        padding: 8px 0;
        border-top: 1px solid rgba(0, 0, 0, 0.08);
    }
    .nav-main:not(.is-open) { display: none; }
    .nav-main a {
        display: block;
        padding: 12px 4px;
        border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    }
    .nav-main a:last-child { border-bottom: none; }
}
@media (max-width: 767.98px) {
    .shell { width: min(100%, calc(100% - 32px)); }
    .header-inner {
        width: min(100%, calc(100% - 32px));
        gap: 8px;
        padding: 4px 0;
    }
    .brand { font-size: 17px; gap: 8px; }   /* 對齊 tao base.css:571 */
    .logo-mark { height: 34px; }
    .nav-toggle { width: 40px; height: 40px; font-size: 22px; }
    .nav-main a { font-size: 18px; }
}


/* ==========================================================================
   公車動態：左表 + 右地圖的滿高版型，整組照搬 tao。
   yun 的 Businfo.html 本來就已經是 rt-layout / rt-panel / rt-map 的結構，
   只是沒有對應 CSS，所以左右兩塊都沒被撐高。
   高度扣的 80px 是頁首（.site-header）的概略高度。
   ========================================================================== */
.rt-layout {
    display: flex;
    flex-direction: row;
    height: calc(100vh - 80px);
}
/* 左欄固定寬、右邊地圖吃剩餘空間（比照 tao）。
   原本是 width:35%，等於兩邊都跟著視窗變，而站序表的內容寬度需求是固定的，
   視窗一縮先被壓扁的永遠是站名欄。鎖住左欄之後，縮放只會改變地圖大小。
   580px（tao 是 520px）：雲林關掉免招手欄後是五欄——序號 46 ＋ 站名 278
   ＋ 到站徽章 139 ＋ 車牌 46 ＋ 愛心 46。車牌字串（ABC-1234）比 46px 寬，
   靠 .plate-cell 的 nowrap 自動撐開、多的向站名欄借，站名仍有 260px 以上。 */
.rt-panel {
    flex: 0 0 580px;
    width: 580px;
    min-width: 0;
    overflow-y: auto;
    padding: 12px;
    align-self: flex-start;                /* 不被 flex 拉滿高，內容多少高多少 */
    max-height: calc(100vh - 80px);        /* 內容超過視窗才捲動 */
}
.rt-map {
    flex: 1;
    position: relative;
}
.rt-map .map-area,
.rt-map #VW iframe {
    width: 100%;
    height: 100%;
    border: none;
}
.rt-map #VW {
    width: 100%;
    height: 80%;
}
.rt-map #VW iframe { display: block; }

/* 斷點 991 → 1024（比照 tao）：橫式平板 1024x600 在舊斷點下仍是左右分欄，
   左欄只剩三百多 px，站名會被壓到一個字一行。這個寬度改成上下排列。
   ★ 必須與 .rt-panel--stops 的 min-width:1025px 嚴格銜接，中間有縫就會破版。 */
@media (max-width: 1024px) {
    .rt-layout {
        flex-direction: column;
        height: auto;
    }
    .rt-panel {
        flex: none;
        width: 100%;
        min-width: unset;
        max-height: none;
        overflow-y: visible;
    }
    .rt-map {
        height: 60vh;
    }
}

/* 車牌標籤（公車動態地圖）：比照 tao。
   Leaflet 預設 padding 6px、line-height 1.5（來自 .leaflet-container）太厚，
   選擇器疊兩個 class 提高權重，避免被 leaflet.css 蓋回去。 */
.leaflet-tooltip.veh-tooltip {
    font-family: 'Noto Sans TC', sans-serif;
    /* 比照 tao：白底在淺色圖資上不顯眼，改深色底白字。
       用 #4e473f 深棕而不是車身那個 #0a3d62——車牌就貼在車子下面，
       同一個顏色會黏成一塊，換色系才看得出是兩個東西。 */
    background: #4e473f;
    color: #ffffff;
    border-color: #4e473f;
    padding: 1px 5px;
    font-size: 15px;
    font-weight: 700;
    line-height: 16px;
}
/* 尖端也要跟著換色，不然會留一撮白色三角 */
.leaflet-tooltip.veh-tooltip.leaflet-tooltip-bottom::before { border-bottom-color: #4e473f; }
.leaflet-tooltip.veh-tooltip.leaflet-tooltip-top::before { border-top-color: #4e473f; }

/* 路線詳情整塊（#div_time）改雲林配色。
   原本是 .lbox 的新竹淺藍底 rgb(112,180,199) ＋ 容器上的 text-white，
   底色淺、字又白，圖例與更新時間那幾行幾乎看不見。
   底改奶油色、字改深棕；.lbox 只有這一處在用，直接改不影響別頁。 */
.lbox { background-color: #fff7e1; }
#div_time { color: #3f3a34; }

/* 路線詳情上方的「票價表／路線時刻表」：
   底是 .lbox 的淺藍 rgb(112,180,199)，文字是白的、圖示是 .cfy1 的亮黃 rgb(255,230,0)，
   兩者在那個底色上都幾乎看不見。整列改成雲林的深棕，圖示跟著文字同色。
   選擇器帶 #div_time 提高權重，壓過 bootstrap 的 .text-white 與 header.css 的 .cfy1。 */
#div_time .row a.text-reset { color: #3f3a34 !important; }
#div_time .row a.text-reset:hover { color: #0a3d62 !important; }
#div_time .row a.text-reset .cfy1 { color: inherit !important; }

/* 好站連結的分組標題：與清單項目拉開層級，用雲林的深棕＋左側綠色短槓 */
.goodsite-group-title {
    margin-bottom: 12px;
    padding-left: 10px;
    border-left: 4px solid #8ea97a;
    color: #3f3a34;
    font-weight: 700;
}

/* 好站連結的圓點：原本沿用新竹的 c7 米黃／c8 青交錯，兩個相近色交替看起來沒規則。
   統一成綠色，與分組標題左側短槓同色，整頁只有一種節奏。
   壓在 .goodsite-list 底下，不動 header.css 的 .c7/.c8（別處還在用）。 */
.goodsite-list .circle { background-color: #8ea97a; }

/* 好站連結中網址已失效的項目：名稱保留、不可點。
   用灰棕色與正常連結區隔，不要讓人以為是點不動的壞連結。 */
.goodsite-disabled { color: #736e64; cursor: default; }

/* 我的站點愛心：比照 tao 的 .ty-fav——可聚焦按鈕、44x44 最小點擊區域，
   未收藏灰色空心、已收藏深藍實心。顏色走雲林色票。 */
.ty-fav {
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    color: #c4bdb2;
}
.ty-fav[aria-pressed="true"] { color: #0a3d62; }
.ty-fav:hover { color: #8ea97a; }
.ty-fav:focus-visible { outline: 2px solid #0a3d62; outline-offset: 2px; border-radius: 6px; }

/* 只捲站牌列表、上下固定（整段照搬 tao）。
   不這樣做的話整個 .rt-panel 一起捲，下方的更新進度條會被捲軸吃掉。
   只在 ≥1025px 生效：以下寬度版面改上下排列、整頁捲動，不需要內層捲動。 */
@media (min-width: 1025px) {
    .rt-panel--stops {
        display: flex;
        flex-direction: column;
        overflow: hidden;              /* 自己不捲，捲動交給下面那一段 */
        align-self: stretch;           /* 覆蓋上面的 flex-start，才吃得到整段高度 */
        height: calc(100vh - 80px);
        max-height: calc(100vh - 80px);
    }
    /* 上方各區塊維持自然高度，不被壓縮 */
    .rt-panel--stops > * { flex: 0 0 auto; }
    /* 站序表那一支吃掉剩餘高度，並把 flex 一路傳到 .tab-content */
    .rt-panel--stops > #div_time,
    .rt-panel--stops > #div_time > .col {
        flex: 1 1 auto;
        min-height: 0;
        display: flex;
        flex-direction: column;
    }
    .rt-panel--stops #div_time > .col > #tabs-tab { flex: 0 0 auto; }
    .rt-panel--stops #tabs-tabContent {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;              /* 捲軸只出現在這裡 */
    }
    .rt-panel--stops #tabs-tabContent > .tab-pane.active { min-height: 0; }
}

/* 搜尋框與公車種類並列（比照 tao），把原本兩列收成一列，空間讓給站牌列表。
   ★ 本檔載入順序在 bootstrap.min.css 之前，同特異性時 bootstrap 會贏。
     `.form-select { width:100% }` 是 (0,1,0)，所以這裡一律用兩層選擇器 (0,2,0)
     才壓得過，寫成單一 class 會整個失效。 */
.ty-filter-row {
    display: flex;
    gap: 8px;
    align-items: center;
}
.ty-filter-row .ty-filter-row__search { flex: 1 1 auto; min-width: 0; }
.ty-filter-row > .ty-filter-row__class { flex: 0 0 auto; width: 42%; max-width: 220px; }
/* 手機版並排會讓兩者都太窄，改回上下兩列 */
@media (max-width: 575px) {
    .ty-filter-row { flex-wrap: wrap; }
    .ty-filter-row > .ty-filter-row__class { width: 100%; max-width: none; }
}