@charset "utf-8";

/* ============================================================
   首頁 2026
   ============================================================ */

.at-home {
    --at-home-ink: #222;
    --at-home-main: #69A3D8;
    --at-home-deep: #2E6BA8;
    --at-home-soft: #EAF3FB;
    --at-home-line: #e0e1e8;
    --at-home-inner: 1240px;

    background: #FFF;
    color: var(--at-home-ink);
}

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

/* 區塊標題 */
/* 區塊標題：左上角四角星 + 中文 + 英文，跟內頁標題同一套寫法 */
.at-home-title {
    display: flex;
    align-items: baseline;
    gap: 12px;
    position: relative;
    margin: 0;
    padding-left: 24px;
    color: var(--at-home-deep);
    font-size: 1.75rem;
    font-weight: 700;
    letter-spacing: .04em;
}

/* 四角星，clip-path 與內頁 .at-title-area::before 同一組座標 */
.at-home-title::before,
.at-home-esg__title::before {
    content: "";
    position: absolute;
    left: 0;
    top: .15em;
    width: 14px;
    height: 14px;
    background: var(--at-home-main);
    clip-path: polygon(50% 0,
            61% 39%,
            100% 50%,
            61% 61%,
            50% 100%,
            39% 61%,
            0 50%,
            39% 39%);
}

.at-home-title__en {
    flex: 0 0 auto;
    font-size: .75em;
    font-weight: 500;
    letter-spacing: .06em;
}

.at-home-more {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: var(--at-home-ink);
    font-size: .9375rem;
    white-space: nowrap;
}

/* 箭頭圖示：線穿進細圓框（至 functions.php 的 at_arrow_icon()）
   線與圓都是 currentColor，大小用 width/height 控制 */
.at-arrow {
    display: block;
    flex: 0 0 auto;
    width: 35.5px;
    height: 29px;
    overflow: visible;
    transition: transform .3s cubic-bezier(.215, .61, .355, 1);
}

.at-arrow--flip {
    transform: scaleX(-1);
}

.at-home-more .at-arrow {
    color: var(--at-home-main);
}

.at-home-more:hover .at-arrow {
    color: var(--at-home-deep);
    transform: translateX(4px);
}

.at-home-more:hover {
    color: var(--at-home-deep);
    text-decoration: none;
}



/* ------------------------------------------------------------
   1. 主視覺
   ------------------------------------------------------------ */
.at-home-hero {
    position: relative;
    min-height: 720px;
    padding: 0 0 40px;
    background: #FFF;
    overflow: hidden;
}

/* 背景照片：右側滿版、左下角大圓角 */
.at-home-hero__bg {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 40px;
    left: 5%;
    border-radius: 0 0 0 330px;
    overflow: hidden;
}

.at-home-hero__bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* 輪播往左拉，一次並排三張：左邊兩張完整，第三張切在畫面右緣 */
.at-home-hero__slider {
    position: relative;
    z-index: 2;
    width: 90%;
    margin: 0 -6% 0 auto;
    padding: 150px 0 0;
}

.at-home-hero__item {
    padding: 0 13px;
}

.at-home-hero__slide {
    display: block;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .18);
    transition: transform .4s cubic-bezier(.215, .61, .355, 1);
}

.at-home-hero__slide:hover {
    transform: translateY(-4px);
}

.at-home-hero__slide img {
    display: block;
    width: 100%;
}

/* 影片輪播：比照圖片（皆為正方形）固定 1:1，超出比例的部分裁掉，
   輪播各張高度才會一致 */
.at-home-hero__slide video {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    background: #000;
}

/* slick 尚未初始化前先只顯示第一張，避免閃爍 */
.at-home-hero__slider:not(.slick-initialized) .at-home-hero__item:nth-child(n+2) {
    display: none;
}

/* 左下的圓形 Menu */
.at-home-hero__menu {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    position: absolute;
    left: 5%;
    /* .at-home-hero 有 overflow:hidden，貼齊下緣的話投影會被切平，
       所以往上讓出 40px（正好對齊背景圖的下緣） */
    bottom: 40px;
    z-index: 3;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    background: #FFF;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .12);
    color: var(--at-home-deep);
    font-size: .875rem;
    font-weight: 700;
    line-height: 1.5;
    text-align: center;
    transition: .2s cubic-bezier(.215, .61, .355, 1);
}

.at-home-hero__menu:hover {
    color: var(--at-home-deep);
    text-decoration: none;
    transform: translateY(-3px);
}

/* ------------------------------------------------------------
   2. 快速連結：一排色塊
   - 每塊：標題 26px、說明一小段、底部兩顆相連的外框按鈕（高 35px）
   - hover：色塊往左上移 15px、加陰影、右上與左下變 30px 圓角，.3s linear
   - 第一塊左下角固定 30px 圓角
   顏色由 PHP 以 --at-quick-color 逐塊帶入（客戶色票的實際像素值）
   ------------------------------------------------------------ */
.at-home-shortcut {
    padding: 24px 20px 64px;
}

.at-home-quick {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    max-width: var(--at-home-inner);
    margin: 0 auto;
    padding: 0;
    list-style: none;
}

/* 外層只負責佔位；真正上色、會移動的是裡面的 __box，
   這樣 hover 位移時不會推擠到隔壁，滑鼠也不會因為色塊移走而失去 hover */
.at-home-quick__item {
    position: relative;
    height: 210px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.at-home-quick__box {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 28px 20px 20px;
    overflow: hidden;
    background: var(--at-quick-color, #136BA5);
    color: #FFF;
    transition: all .3s linear;
}

.at-home-quick__item:first-child .at-home-quick__box {
    border-radius: 0 0 0 30px;
}

/* 標題列：標題後面緊跟一張小圖，垂直置中 */
.at-home-quick__head {
    display: flex;
    align-items: center;
    gap: 6px;
    min-height: 44px;
    margin: 0 0 8px;
}

.at-home-quick__title {
    display: block;
    flex: 0 1 auto;
    min-width: 0;
    margin: 0;
    font-size: 1.375rem;
    font-weight: 600;
    line-height: 30px;
    white-space: nowrap;
}

.at-home-quick__icon {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    object-fit: contain;
    pointer-events: none;
}

.at-home-quick__desc {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    margin: 0;
    overflow: hidden;
    font-size: .875rem;
    line-height: 20px;
}

/* 底部按鈕：兩顆各半、框線相連（第二顆不畫左框） */
.at-home-quick__btns {
    display: flex;
    position: absolute;
    right: 0;
    bottom: 28px;
    left: 0;
    padding: 0 20px;
}

.at-home-quick__btns a {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1 1 50%;
    position: relative;
    z-index: 0;
    min-width: 0;
    height: 35px;
    border: 1px solid rgba(255, 255, 255, .6);
    border-left: 0;
    color: #FFF;
    font-size: .8125rem;
    white-space: nowrap;
    transition: all .3s ease;
}

.at-home-quick__btns a:first-child {
    border-left: 1px solid rgba(255, 255, 255, .6);
}

.at-home-quick__btns a:hover,
.at-home-quick__btns a:focus {
    z-index: 1;
    border-color: #FFF;
    background: #FFF;
    color: var(--at-quick-color, #136BA5);
    text-decoration: none;
}

@media (min-width: 1024px) {

    .at-home-quick__item:hover,
    .at-home-quick__item:focus-within {
        z-index: 2;
    }

    .at-home-quick__item:hover .at-home-quick__box,
    .at-home-quick__item:focus-within .at-home-quick__box {
        top: -15px;
        left: -15px;
        border-radius: 0 30px 0 30px;
        box-shadow: 5px 5px 5px rgba(0, 0, 0, .2);
    }
}

/* ------------------------------------------------------------
   3. 最新消息
   標題列（右側膠囊按鈕、下方一條分隔線）＋ 左邊分類頁籤 ＋ 右邊列表
   ------------------------------------------------------------ */
.at-home-news {
    max-width: calc(var(--at-home-inner) + 40px);
    margin: 0 auto;
    padding: 0 20px 72px;
}

/* 電腦版整塊內縮成 80%（1240 → 992）並置中；平板以下維持滿寬。
   區塊本身改成滿版、用左右 padding 把內容收回 992，
   這樣右側留白處才放得進底圖，也不會因為超出畫面產生橫向捲軸 */
@media (min-width: 992px) {
    .at-home-news {
        max-width: none;
        padding-right: max(20px, calc((100% - var(--at-home-inner) * .8) / 2));
        padding-left: max(20px, calc((100% - var(--at-home-inner) * .8) / 2));
    }
}

/* 右下角的裝飾底圖（只在電腦版）：幼苗與地球貼齊區塊底部、落在列表右側的留白裡，
   右邊的線條延伸出畫面。用的是 assets/images/home/homebg.webp（透明、約 2.07:1）。
   圖裡地球佔寬度的 19%～77.5%，以下兩個數字就是照這個比例算的：
   - 圖寬 = 右側留白 x 1.45（寫成 (100vw - 內容寬) x .725）
   - 往右推出 圖寬 x 11.8% + 25px
   這樣地球左緣會停在列表右緣外約 18px、右緣留在畫面內，任何寬度都不會壓到文字。
   1400px 以上才顯示：再窄圖會小到沒有意義 */
@media (min-width: 1400px) {
    .at-home-news {
        --at-news-bg-w: calc((100vw - var(--at-home-inner) * .8) * .725);
        background-image: url(../images/home/homebg.webp);
        background-repeat: no-repeat;
        background-size: var(--at-news-bg-w) auto;
        background-position: right calc(var(--at-news-bg-w) * -.118 - 25px) bottom 0;
    }
}

/* 標題列與醫師介紹共用；分隔線只有最新消息有 */
.at-home-news__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin: 0 0 20px;
}

.at-home-news>.at-home-news__head {
    padding-bottom: 20px;
    border-bottom: 1px solid #A1A1A1;
}

/* 一覽表：實心膠囊，右側 chevron；hover 反白 */
.at-home-news__more {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    position: relative;
    /* 整顆按鈕縮成原本的八成 */
    min-width: 152px;
    min-height: 34px;
    padding: 4px 50px 4px 18px;
    border: 2px solid var(--at-home-deep);
    border-radius: 30px;
    background: var(--at-home-deep);
    color: #FFF;
    font-size: .875rem;
    font-weight: 700;
    transition: background-color .2s linear, color .2s linear;
}

.at-home-news__more .at-arrow {
    position: absolute;
    top: 50%;
    right: 13px;
    width: 25px;
    height: 20px;
    margin-top: -10px;
}

.at-home-news__more:hover {
    background: #FFF;
    color: var(--at-home-deep);
    text-decoration: none;
}

.at-home-news__content {
    display: flex;
}

/* 左：分類頁籤。目前所在的分類變色，前面多一個實心三角 */
.at-home-news__tabs {
    flex: 0 0 auto;
    min-width: 200px;
    margin: 0;
    padding: 0 20px 0 20px;
    list-style: none;
}

.at-home-news__tabs>li {
    margin: 0 0 10px;
    padding: 0;
    list-style: none;
}

.at-home-news__tab {
    display: inline-block;
    position: relative;
    padding: 0;
    border: 0;
    background: none;
    color: var(--at-home-ink);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.8;
    text-align: left;
    cursor: pointer;
    transition: color .2s linear;
}

.at-home-news__tab:hover,
.at-home-news__tab.is-current {
    color: var(--at-home-deep);
}

.at-home-news__tab.is-current::before {
    content: "\f0da";
    display: flex;
    align-items: center;
    position: absolute;
    top: 0;
    left: -20px;
    height: 100%;
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-size: 1.125rem;
    color: var(--at-home-deep);
}

/* 右：列表。每列 日期 / 分類膠囊 / 標題，最右一個 chevron，hover 往右滑 */
.at-home-news__panels {
    flex: 1 1 auto;
    min-width: 0;
}

.at-home-news__list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.at-home-news__list>li {
    display: flex;
    align-items: flex-start;
    position: relative;
    margin: 0 0 20px;
    padding: 0 40px 20px 0;
    border-bottom: 1px solid #D5D3D0;
    list-style: none;
}

.at-home-news__list>li::before {
    content: "\f054";
    position: absolute;
    top: 4px;
    right: 10px;
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-size: .8125rem;
    color: var(--at-home-ink);
    transition: right .3s ease, color .3s ease;
}

.at-home-news__list>li:hover::before {
    right: 0;
    color: var(--at-home-deep);
}

.at-home-news__date {
    flex: 0 0 auto;
    width: 5.2rem;
    margin-right: 20px;
    color: var(--at-home-ink);
    font-size: .875rem;
    line-height: 1.9;
}

.at-home-news__cat {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    min-width: 80px;
    margin: 3px 20px 0 0;
    padding: 0 10px;
    border-radius: 30px;
    /* 底色由 PHP 依分類帶入（同快捷色塊的色票），沒帶到才是灰 */
    background: var(--at-cat-color, #707070);
    color: #FFF;
    font-size: .75rem;
    line-height: 1.75;
    white-space: nowrap;
    transition: filter .2s linear;
}

/* hover 不換色，只把該分類的顏色壓深一點 */
.at-home-news__cat:hover {
    filter: brightness(.82);
    color: #FFF;
    text-decoration: none;
}

.at-home-news__title {
    flex: 1 1 auto;
    min-width: 0;
    color: var(--at-home-ink);
    font-size: .9375rem;
    line-height: 1.75;
}

.at-home-news__title:hover {
    color: var(--at-home-ink);
    text-decoration: underline;
}

.at-home-news__empty {
    margin: 0;
    padding: 10px 0 30px;
    color: #888;
}

/* ------------------------------------------------------------
   4. 醫師介紹
   ------------------------------------------------------------ */
.at-home-doctor {
    padding: 0 0 72px;
    /* 卡片會往右溢出，真正的裁切在這裡做。
       這一層是滿版的，所以等於切在畫面邊緣，也不會多出橫向捲軸 */
    overflow: hidden;
}

/* 底色左右滿版、只有左上跟右下做圓角。
   左右 padding 改成 0，輪播才能整排拉到畫面兩側；
   標題列與控制列則各自補回內距，維持跟其他區塊一致的內容邊界 */
.at-home-doctor__inner {
    padding: 56px 0 60px;
    border-radius: 120px 0 120px 0;
    background: var(--at-home-soft);
}

.at-home-doctor .at-home-news__head,
.at-home-doctor__nav {
    padding-right: max(20px, calc((100% - var(--at-home-inner)) / 2 + 60px));
    padding-left: max(20px, calc((100% - var(--at-home-inner)) / 2 + 60px));
}

/* 卡片間距，slick 的 slide padding 與 .slick-list 的負 margin 都由這個值推算 */
.at-home-doctor__list {
    --at-doc-gap: 40px;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: var(--at-doc-gap);
}

/* slick 還沒接手前先只留一排，避免閃一下兩排 */
.at-home-doctor__list:not(.slick-initialized)>.at-home-doc:nth-child(n+6) {
    display: none;
}

/* slick 接手後改用它自己的排版，卡片間距改用 slide 的左右 padding */
.at-home-doctor__list.slick-initialized {
    display: block;
}

/* 左右要切齊內容邊界，才會剛好只看到 slidesToShow 指定的張數；
   但上下不能切，否則 hover 放大時露出框外的頭部會被切掉。
   overflow 沒辦法只裁一個方向，所以改用 clip-path：
   上下各留 120px，左右切在 .slick-list 的邊界上 */
.at-home-doctor__list .slick-list {
    overflow: visible;
    margin: 0 calc(var(--at-doc-gap) / -2);
    clip-path: inset(-120px 0 -120px 0);
}

.at-home-doctor__list .slick-track {
    display: flex;
    align-items: stretch;
}

.at-home-doctor__list .slick-slide {
    height: auto;
    padding: 0 calc(var(--at-doc-gap) / 2);
}

/* 每位醫師整張卡等比縮成 90%：卡寬、照片、字級、間距都乘上同一個比例，並在格子裡置中。
   不用 zoom，實測這個瀏覽器不吃 zoom（卡片量出來仍是 100%，還被邊界推歪）。
   要調整大小改 --at-doc-scale 一個值即可 */
.at-home-doctor__list {
    --at-doc-scale: .9;
}

/* slick 會在每張卡片上寫死 inline 的 width:100%; display:inline-block，
   一般 CSS 蓋不過 inline style，這兩個屬性只能用 !important
   （順便把卡片原本的 flex 直排還原） */
.at-home-doctor__list .at-home-doc {
    display: flex !important;
    width: calc(100% * var(--at-doc-scale)) !important;
    margin-right: auto;
    margin-left: auto;
}

.at-home-doctor__list .at-home-doc::before,
.at-home-doctor__list .at-home-doc__img::after {
    height: calc(100% - 60px * var(--at-doc-scale));
}

/* 人物左右各內縮 20px，跟白色底板的左右邊留出距離。
   白底仍是滿寬；照片變窄後高度跟著變矮，
   底部仍貼齊白底下緣，頭部還是露在白底上方 */
.at-home-doctor__list .at-home-doc__img img {
    width: calc(100% - 40px);
}

.at-home-doctor__list .at-home-doc__en {
    top: calc(40px * var(--at-doc-scale));
    right: calc(20px * var(--at-doc-scale));
    font-size: calc(.75rem * var(--at-doc-scale));
}

.at-home-doctor__list .at-home-doc__label {
    padding: calc(6px * var(--at-doc-scale)) calc(13px * var(--at-doc-scale)) calc(7px * var(--at-doc-scale));
    font-size: calc(.8125rem * var(--at-doc-scale));
}

.at-home-doctor__list .at-home-doc__text {
    padding-top: calc(16px * var(--at-doc-scale));
}

.at-home-doctor__list .at-home-doc__name {
    margin-bottom: calc(10px * var(--at-doc-scale));
    font-size: calc(1.125rem * var(--at-doc-scale));
}

.at-home-doctor__list .at-home-doc__pre {
    gap: calc(10px * var(--at-doc-scale));
    margin-bottom: calc(12px * var(--at-doc-scale));
    padding-bottom: calc(12px * var(--at-doc-scale));
    font-size: calc(.8125rem * var(--at-doc-scale));
}

.at-home-doctor__list .at-home-doc__head {
    min-height: calc(48px * var(--at-doc-scale));
    padding-right: calc(26px * var(--at-doc-scale));
    font-size: calc(.875rem * var(--at-doc-scale));
}

.at-home-doctor__list .at-home-doc__head .at-arrow {
    width: calc(29px * var(--at-doc-scale));
    height: calc(24px * var(--at-doc-scale));
}

/* 下方控制列：兩顆圓形箭頭 + 進度條 */
.at-home-doctor__nav {
    display: flex;
    align-items: center;
    margin: 44px 0 0;
}

.at-home-doctor__arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 56px;
    height: 56px;
    margin-right: 8px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .64);
    color: var(--at-home-deep);
    transition: background-color .2s linear, opacity .2s linear;
}

.at-home-doctor__arrow:hover:not([disabled]) {
    background: #FFF;
}

.at-home-doctor__arrow[disabled] {
    opacity: .3;
    cursor: default;
}

.at-home-doctor__progress {
    display: block;
    flex: 1 1 auto;
    height: 4px;
    margin-left: 24px;
    background: rgba(46, 107, 168, .16);
}

.at-home-doctor__progress-bar {
    display: block;
    width: 0;
    height: 100%;
    background: var(--at-home-deep);
    transition: width .8s cubic-bezier(.215, .61, .355, 1);
}

.at-home-doc {
    display: flex;
    flex-direction: column;
    position: relative;
    z-index: 0;
    color: var(--at-home-ink);
}

.at-home-doc:hover {
    color: var(--at-home-ink);
    text-decoration: none;
}

/* 卡片背後的白色面板，hover 時放大浮起。
   從上緣往下、往左右放大（origin 50% 0），
   白底瞬間出現不做淡入，只有放大與陰影有過場 */
.at-home-doc::before {
    content: "";
    position: absolute;
    z-index: 0;
    left: 0;
    bottom: 0;
    width: 100%;
    height: calc(100% - 60px);
    transform-origin: 50% 0;
    transition: transform .25s cubic-bezier(.215, .61, .355, 1), box-shadow .15s linear;
}

.at-home-doc__img,
.at-home-doc__text {
    position: relative;
    z-index: 1;
}

/* 照片不裁切，頭部會露在底板之外 */
.at-home-doc__img {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    position: relative;
    width: 100%;
}

/* 白色底板，比照片矮 60px 並靠下，上方 60px 就是露出來的頭部 */
.at-home-doc__img::after {
    content: "";
    position: absolute;
    z-index: -1;
    left: 0;
    bottom: 0;
    width: 100%;
    height: calc(100% - 60px);
    background: #FFF;
}

.at-home-doc__img img {
    display: block;
    width: 100%;
    height: auto;
    /* 從底部中心放大，頭往上長，不會被切掉 */
    transform-origin: 50% 100%;
    transition: transform .25s cubic-bezier(.215, .61, .355, 1);
}

/* 直排英文名 */
.at-home-doc__en {
    display: block;
    position: absolute;
    top: 40px;
    right: 20px;
    writing-mode: vertical-rl;
    color: #aaa;
    font-size: .75rem;
    line-height: 1.4;
    letter-spacing: .35em;
    transition: color .1s cubic-bezier(.215, .61, .355, 1);
}

/* 標籤：外層容器 hover 時撐寬，標籤才會往外推 */
.at-home-doc__label-wrap {
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 100%;
    height: 100%;
    transform: translateX(-50%);
    transition: width .25s cubic-bezier(.215, .61, .355, 1);
    pointer-events: none;
}

.at-home-doc__label {
    box-sizing: border-box;
    display: block;
    position: absolute;
    right: 0;
    bottom: 0;
    padding: 6px 13px 7px;
    /* 預設主色藍底白字；hover 換淺藍底深藍字（跟首頁圓形快捷同一組配色） */
    background: var(--at-doc-label-bg, var(--at-main));
    color: #FFF;
    font-size: .8125rem;
    line-height: 1.4;
    transition: background-color .1s cubic-bezier(.215, .61, .355, 1), color .1s cubic-bezier(.215, .61, .355, 1);
}

.at-home-doc__text {
    display: block;
    padding: 16px 0 0;
}

.at-home-doc__name {
    display: block;
    margin: 0 0 10px;
    font-size: 1.125rem;
    font-weight: 700;
}

.at-home-doc__pre {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin: 0 0 12px;
    padding: 0 0 12px;
    border-bottom: 1px solid #d6e3ef;
    font-size: .8125rem;
    color: #666;
}

.at-home-doc__pre-title {
    flex: 0 0 auto;
    white-space: nowrap;
}

/* 職稱下方的專長：右側留出箭頭的位置 */
.at-home-doc__head {
    display: block;
    position: relative;
    min-height: 48px;
    padding-right: 26px;
    font-size: .875rem;
    line-height: 1.7;
    transition: color .1s cubic-bezier(.215, .61, .355, 1);
}

/* 最多兩行，超出的部分收成刪節號，卡片高度才不會被長短不一的專長撐歪 */
.at-home-doc__good {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    /* 右邊讓出箭頭的位置，文字不會壓到箭頭 */
    padding-right: 36px;
    overflow: hidden;
}

/* 箭頭固定在兩行文字的右下角，文字被截斷也不會跟著消失 */
.at-home-doc__head .at-arrow {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 29px;
    height: 24px;
    color: var(--at-home-main);
    transition: transform .4s cubic-bezier(.215, .61, .355, 1);
}

/* hover 效果只在有滑鼠的桌機出現 */
@media (min-width: 1024px) {
    .at-home-doc:hover {
        z-index: 2;
    }

    .at-home-doc:hover::before {
        transform: scale(1.08, 1.045);
        background-color: #FFF;
        box-shadow: 0 0 20px rgba(0, 20, 40, .15);
    }

    .at-home-doc:hover .at-home-doc__img img {
        transform: scale(1.08, 1.08);
    }

    .at-home-doc:hover .at-home-doc__en,
    .at-home-doc:hover .at-home-doc__name,
    .at-home-doc:hover .at-home-doc__head {
        color: var(--at-home-deep);
    }

    .at-home-doc:hover .at-home-doc__label {
        background: var(--at-doc-label-hover-bg, #9ED3E8);
        color: var(--at-doc-label-hover-ink, #1A5271);
    }

    .at-home-doc:hover .at-home-doc__label-wrap {
        width: 108%;
    }

    .at-home-doc:hover .at-home-doc__head .at-arrow {
        transform: translateX(4px);
    }
}

/* 捲動進場：圖片 → 職稱 → 專長，三段式淡入上移 */
.at-home-doc.js-scrollup .at-home-doc__img,
.at-home-doc.js-scrollup .at-home-doc__name,
.at-home-doc.js-scrollup .at-home-doc__pre,
.at-home-doc.js-scrollup .at-home-doc__head {
    opacity: 0;
    transition: opacity .4s linear, transform 1s cubic-bezier(.075, .82, .165, 1);
}

.at-home-doc.js-scrollup .at-home-doc__img {
    transform: translateY(45px);
}

.at-home-doc.js-scrollup .at-home-doc__name,
.at-home-doc.js-scrollup .at-home-doc__pre {
    transform: translateY(30px);
    transition-delay: .15s;
}

.at-home-doc.js-scrollup .at-home-doc__head {
    transform: translateY(30px);
    /* 進場的淡入上移延遲 .3s；hover 變色（color .1s）另外列出且不延遲，
       否則會被進場的 transition 整個蓋掉，滑上去時瞬間變色 */
    transition:
        opacity .4s linear .3s,
        transform 1s cubic-bezier(.075, .82, .165, 1) .3s,
        color .1s cubic-bezier(.215, .61, .355, 1) 0s;
}

.at-home-doc.js-scrollup.is-visible .at-home-doc__img,
.at-home-doc.js-scrollup.is-visible .at-home-doc__name,
.at-home-doc.js-scrollup.is-visible .at-home-doc__pre,
.at-home-doc.js-scrollup.is-visible .at-home-doc__head {
    opacity: 1;
    transform: translateY(0);
}

/* 關掉動態效果的使用者直接顯示 */
@media (prefers-reduced-motion: reduce) {

    .at-home-doc.js-scrollup .at-home-doc__img,
    .at-home-doc.js-scrollup .at-home-doc__name,
    .at-home-doc.js-scrollup .at-home-doc__pre,
    .at-home-doc.js-scrollup .at-home-doc__head {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* ------------------------------------------------------------
   5. 亮點專區
   ------------------------------------------------------------ */
/* 上方是 ESG 的滿版色塊，標題要離開它的下緣才不會黏在一起 */
.at-home-banner {
    padding: 80px 20px;
}

.at-home-banner__inner {
    max-width: var(--at-home-inner);
    margin: 0 auto;
}

.at-home-banner .at-home-title {
    margin: 0 0 28px;
}

/* 每排之間、每格之間都只留 1px，貼齊的磚牆 */
.at-home-banner__list {
    display: flex;
    gap: 1px;
    margin: 1px 0 0;
    padding: 0;
    list-style: none;
}

.at-home-banner__list>li {
    flex: 1 1 0;
    min-width: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* 圖片原尺寸：上排 798x480、下排 1200x480，
   用 aspect-ratio 固定比例，換圖也不會跑版 */
.at-home-banner__list--3>li {
    aspect-ratio: 399 / 240;
}

.at-home-banner__list--2>li {
    aspect-ratio: 600 / 240;
}

.at-home-banner__list>li>a {
    display: block;
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    color: #FFF;
}

.at-home-banner__list>li>a:hover {
    color: #FFF;
    text-decoration: none;
}

.at-home-banner__thumb {
    display: block;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.at-home-banner__list img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .4s cubic-bezier(.215, .61, .355, 1);
}

.at-home-banner__body {
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

/* 底部深色漸層，讓白字壓在照片上也讀得到 */
.at-home-banner__body::before {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 80px;
    background: linear-gradient(rgba(28, 44, 67, 0) 0%, rgba(28, 44, 67, .75) 55%, rgba(28, 44, 67, .85) 100%);
}

.at-home-banner__text {
    position: absolute;
    left: 24px;
    bottom: 18px;
    color: #FFF;
    font-size: 1.25rem;
    font-weight: 500;
    line-height: 1.25;
}

.at-home-banner__ico {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    right: 22px;
    bottom: 20px;
    color: #FFF;
    transition: transform .3s cubic-bezier(.215, .61, .355, 1);
}

@media (min-width: 1024px) {
    .at-home-banner__list>li>a:hover img {
        transform: scale(1.06);
    }

    .at-home-banner__list>li>a:hover .at-home-banner__ico {
        transform: translateX(5px);
    }
}

/* ------------------------------------------------------------
   6. ESG 永續發展專區
   左邊白字、右邊一張長圖無限向上循環
   ------------------------------------------------------------ */
.at-home-esg {
    /* 底色與光暈色，改這兩個值就能整區換色 */
    --at-home-esg-deep: #2E7FA8;
    --at-home-esg-light: 158, 211, 232;

    position: relative;
    /* 不留上下內距，圖片才能上下都滿版貼齊區塊邊緣 */
    padding: 0;
    background: var(--at-home-esg-deep);
    overflow: hidden;
}

/* 左側那層較亮的光暈，用漸層做。
   淺色只鋪到 45%，文字起點（約 17%）那一帶還壓在深色上，白字才讀得到 */
.at-home-esg::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: linear-gradient(100deg,
            rgba(var(--at-home-esg-light), .5) 0%,
            rgba(var(--at-home-esg-light), 0) 45%);
    pointer-events: none;
}

/* 左欄起點對齊其他區塊的內容邊界，右欄貼近畫面右緣；
   文字收窄、圖片往左挪，中間留寬一點的間距，左右份量才平衡。
   文字垂直置中對齊圖片，圖片則撐滿整列高度 */
.at-home-esg__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 640px);
    gap: 100px;
    align-items: center;
    position: relative;
    z-index: 1;
    padding: 0 max(20px, 4%) 0 max(20px, calc((100% - var(--at-home-inner)) / 2 + 60px));
}

.at-home-esg__title {
    display: flex;
    align-items: baseline;
    gap: 12px;
    position: relative;
    margin: 0 0 30px;
    padding-left: 24px;
    color: #FFF;
    font-size: 1.75rem;
    font-weight: 500;
    line-height: 1.5;
}

/* 深藍底上星號改白色 */
.at-home-esg__title::before {
    background: #FFF;
}

/* 左側那一大塊底色上放地球當背景（assets/images/home/2026/nature.webp），只在電腦版。
   --at-esg-gutter 是文字左邊留白的寬度（跟 __inner 的 padding-left 同一個算式）：
   - 地球大小 = 留白 x 1.3，最小 240、最大 460（原圖 600px，再大會糊）
   - 地球右緣停在文字左邊 24px 處，所以不會壓到字；左邊超出的部分讓它被畫面切掉
   - 垂直置中
   ::before 已經用在左側的光暈，所以地球用 ::after；文字那層 z-index:1 會蓋在上面 */
@media (min-width: 1400px) {
    .at-home-esg::after {
        --at-esg-gutter: calc((100vw - var(--at-home-inner)) / 2 + 60px);
        --at-esg-globe: clamp(240px, calc(var(--at-esg-gutter) * 1.3), 460px);
        content: "";
        position: absolute;
        top: 50%;
        left: calc(var(--at-esg-gutter) - 24px - var(--at-esg-globe));
        width: var(--at-esg-globe);
        height: var(--at-esg-globe);
        background: url(../images/home/2026/nature.webp) center / contain no-repeat;
        /* 調淡才像背景，不跟右邊的文字搶；要更淡或更實改這個值（0 ~ 1） */
        opacity: .18;
        transform: translateY(-50%);
        pointer-events: none;
    }
}

.at-home-esg__text p {
    margin: 0 0 30px;
    color: #FFF;
    font-size: 1rem;
    line-height: 2;
}

.at-home-esg__text p:last-child {
    margin-bottom: 0;
}

/* 內文右下角「了解更多」：白字粗體 + 線穿圓框箭頭
   字級 19px 粗體屬於大字，白字對 ESG 藍底 4.45 高於大字標準 3.0 */
.at-home-esg__text .at-home-esg__more {
    display: flex;
    justify-content: flex-end;
    margin: 24px 0 0;
}

.at-home-esg__more a {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: #FFF;
    font-size: 1.1875rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-decoration: none;
}

.at-home-esg__more a:hover,
.at-home-esg__more a:focus {
    color: #FFF;
    text-decoration: underline;
    text-underline-offset: 5px;
}

.at-home-esg__more .at-arrow {
    color: #FFF;
}

.at-home-esg__more a:hover .at-arrow,
.at-home-esg__more a:focus .at-arrow {
    transform: translateX(4px);
}

html[data-theme="dark"] .at-home .at-home-esg__more a,
html[data-theme="dark"] .at-home .at-home-esg__more a:hover {
    color: #FFF;
}

/* 循環捲動的圖片：外框負責裁切，內層放兩張接在一起的圖。
   高度即整個區塊的高度（區塊沒有上下內距），所以上下緣都是滿版 */
.at-home-esg__media {
    position: relative;
    align-self: stretch;
    height: 620px;
    margin: 0;
    overflow: hidden;
}

.at-home-esg__loop {
    display: block;
    animation: at-esg-loop 30s linear infinite;
}

.at-home-esg__loop img {
    display: block;
    width: 100%;
    height: auto;
}

/* 移動一張圖的高度（= 容器的一半）後接回原點，看起來就是無縫
   這裡刻意不加 prefers-reduced-motion 的關閉規則：
   Windows 關掉「動畫效果」後這一區就完全不會動，是刻意保留循環播放 */
@keyframes at-esg-loop {
    from {
        transform: translateY(0);
    }

    to {
        transform: translateY(-50%);
    }
}

/* ------------------------------------------------------------
   6b. 急診即時資訊
   舊首頁「資訊圖像化」搬過來：外形與配色比照上方的快捷色塊 ——
   五塊相連無間距、只有第一塊左下角 30px 圓角、整塊單色白字
   （底色由 PHP 以 --at-er-color 帶入，同快捷色塊那組色票）。
   標題置中、下方一條分隔線；「詳細資訊..」是右下角的文字連結，跟更新日期同一列
   ------------------------------------------------------------ */
/* 位在相關連結（底部是藍色帶）之後，上方要留白才不會貼著色帶 */
.at-home-erinfo {
    padding: 72px 20px 72px;
}

.at-home-erinfo__inner {
    max-width: var(--at-home-inner);
    margin: 0 auto;
}

.at-home-erinfo__head {
    display: flex;
    justify-content: center;
    margin: 0 0 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid #A1A1A1;
}

/* 標題左邊 24px 是留給星號的，星號本身佔 14px，實際多出來的是 10px，
   置中時右邊補回同樣的量，視覺上才會真正居中 */
.at-home-erinfo__head .at-home-title {
    margin-right: 10px;
}

/* 單元標題「資訊圖像化」：置中，放在框線外 */
.at-home-erinfo__section-head {
    display: flex;
    justify-content: center;
    margin: 0 0 32px;
}

.at-home-erinfo__section-head .at-home-title {
    margin-right: 10px;
}

/* 框線：包住急診即時資訊整塊 */
.at-home-erinfo__box {
    padding: 36px 56px 40px;
    border: 2px solid #D6E3EF;
    border-radius: 30px;
    background: #FFF;
    box-shadow: 0 8px 24px rgba(46, 107, 168, .06);
}

/* 框內的「急診即時資訊」是次標題，字小一階 */
.at-home-title--sub {
    font-size: 1.375rem;
}

@media (max-width: 767px) {
    .at-home-erinfo__box {
        padding: 24px 16px 28px;
        border-radius: 20px;
    }
}

html[data-theme="dark"] .at-home .at-home-erinfo__box {
    border-color: rgba(255, 255, 255, .12);
    background: #1e293b;
    box-shadow: none;
}

.at-home-erinfo__list {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    margin: 0;
    padding: 0;
    list-style: none;
}

.at-home-erinfo__item {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    background: var(--at-er-color, #136BA5);
    color: #FFF;
    list-style: none;
    text-align: center;
}

.at-home-erinfo__item:first-child {
    border-radius: 0 0 0 30px;
}

.at-home-erinfo__label {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    min-height: 100px;
    padding: 0 15px;
    overflow: hidden;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.35;
}

/* 標題後方的淡灰圖示：貼在標題區左側、垂直置中，壓在文字下面當底紋 */
.at-home-erinfo__icon {
    position: absolute;
    top: 50%;
    left: 12px;
    z-index: 0;
    color: #D9D9D9;
    font-size: 64px;
    line-height: 1;
    opacity: .28;
    transform: translateY(-50%);
    pointer-events: none;
}

/* 文字要疊在圖示上面 */
.at-home-erinfo__label-text {
    position: relative;
    z-index: 1;
}

/* 數字區：同一底色，只用一條半透明的白線跟標題隔開 */
.at-home-erinfo__value {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100px;
    padding: 0 15px;
    border-top: 1px solid rgba(255, 255, 255, .35);
    font-size: 2.1rem;
    font-weight: 700;
}

.at-home-erinfo__foot {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 20px;
    margin: 18px 0 0;
}

.at-home-erinfo__date {
    margin: 0;
    color: #666;
    font-size: .9375rem;
}

.at-home-erinfo__more {
    flex: 0 0 auto;
    color: var(--at-home-deep);
    font-size: 1rem;
    font-weight: 700;
}

.at-home-erinfo__more:hover {
    color: var(--at-home-deep);
    text-decoration: underline;
}

/* ------------------------------------------------------------
   7. 社群相簿：滿版方形圖輪播 + 下方白字跑馬燈
   ------------------------------------------------------------ */
.at-home-sns {
    position: relative;
    padding-bottom: 20px;
    overflow: hidden;
    background: #FFF;
}

/* 底色從輪播的約三分之二高度開始，上半截仍是白底，
   往下只伸出圖片底部 20px（= 區塊的 padding-bottom）。
   輪播高度＝(畫面寬 - 4 個間距) / 5 ≈ 20vw，所以 7vw 那段用 vw 推算才會跟著縮放 */
.at-home-sns::before {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: calc(7vw + 20px);
    background: linear-gradient(180deg, var(--at-home-main) 0%, var(--at-home-deep) 100%);
}

/* 標題：跟亮點專區同一條內容邊界（置中 1240） */
.at-home-sns__head {
    position: relative;
    z-index: 1;
    /* 左右內距算在盒子裡，所以寬度要多加 40px，
       內容才會落在 --at-home-inner 上、跟亮點專區的標題切齊 */
    max-width: calc(var(--at-home-inner) + 40px);
    margin: 0 auto;
    padding: 0 20px 28px;
}

.at-home-sns__slider {
    position: relative;
    z-index: 1;
}

.at-home-sns__slider .slick-list {
    margin: 0 -12px;
}

.at-home-sns__slider .slick-slide {
    height: auto;
    padding: 0 12px;
}

/* slick 接手前先只留一排 */
.at-home-sns__slider:not(.slick-initialized) {
    display: flex;
}

.at-home-sns__slider:not(.slick-initialized) .at-home-sns__item {
    flex: 0 0 20%;
    padding: 0 12px;
}

.at-home-sns__thumb {
    display: block;
    position: relative;
    aspect-ratio: 1 / 1;
    overflow: hidden;
}

.at-home-sns__thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

}

/* ------------------------------------------------------------
   RWD
   ------------------------------------------------------------ */
@media (max-width: 1100px) {
    .at-home-doctor__list {
        grid-template-columns: repeat(2, 1fr);
    }

    .at-home-doctor__list:not(.slick-initialized)>.at-home-doc:nth-child(n+3) {
        display: none;
    }

    .at-home-doctor__inner {
        padding: 40px 0 44px;
        border-radius: 70px 0 70px 0;
    }

    .at-home-doctor .at-home-news__head,
    .at-home-doctor__nav {
        padding-right: max(20px, calc((100% - var(--at-home-inner)) / 2 + 30px));
        padding-left: max(20px, calc((100% - var(--at-home-inner)) / 2 + 30px));
    }

    .at-home-doctor__list {
        --at-doc-gap: 28px;
    }
}

@media (max-width: 1199px) {
    /* 快速連結：平板改成一排三塊 */
    .at-home-quick {
        grid-template-columns: repeat(3, 1fr);
    }

    .at-home-quick__item {
        height: 190px;
    }
}

@media (max-width: 991px) {
    .at-home-erinfo__list {
        grid-template-columns: repeat(3, 1fr);
    }

    .at-home-erinfo__label {
        min-height: 84px;
        font-size: 1.125rem;
    }

    .at-home-erinfo__value {
        min-height: 84px;
        font-size: 1.75rem;
    }

    .at-home-esg__inner {
        grid-template-columns: 1fr;
        gap: 40px;
        padding: 56px 20px 0;
    }

    .at-home-esg__media {
        height: 360px;
    }

    /* 最新消息：頁籤改橫排、列表每列拆成兩行（日期＋分類 / 標題） */
    .at-home-news__content {
        flex-wrap: wrap;
    }

    .at-home-news__tabs {
        display: flex;
        flex-wrap: wrap;
        gap: 4px 34px;
        width: 100%;
        min-width: 0;
        margin-bottom: 18px;
    }

    .at-home-news__tabs>li {
        margin: 0;
    }

    .at-home-news__list>li {
        flex-wrap: wrap;
        margin-bottom: 12px;
        padding-bottom: 12px;
    }

    .at-home-news__title {
        flex: 0 0 100%;
        margin-top: 6px;
    }

    .at-home-hero {
        min-height: 0;
        padding: 0 0 30px;
    }

    .at-home-hero__bg {
        left: 0;
        bottom: 30px;
        border-radius: 0 0 0 120px;
    }

    /* 手機、平板的頁首不壓在 banner 上，上方不用再留 120px，縮成 40px */
    .at-home-hero__slider {
        width: 86%;
        margin: 0 auto;
        padding: 40px 0 36px;
    }

    /* 手機版不顯示「醫療資訊 Menu」圓鈕（手機有自己的選單按鈕） */
    .at-home-hero__menu {
        display: none;
    }

    .at-home-hero__menu:hover {
        transform: translateY(-3px);
    }

    .at-home-hero__title {
        font-size: 2rem;
    }

    .at-home-hero__menu {
        width: 96px;
        height: 96px;
        font-size: .75rem;
    }
}

@media (max-width: 767px) {

    .at-home-doctor__list {
        grid-template-columns: 1fr;
    }

    .at-home-doctor__list:not(.slick-initialized)>.at-home-doc:nth-child(n+2) {
        display: none;
    }

    .at-home-doctor__inner {
        border-radius: 40px 0 40px 0;
    }

    .at-home-doctor__list {
        --at-doc-gap: 20px;
    }

    .at-home-doctor__arrow {
        width: 46px;
        height: 46px;
    }

    .at-home-banner {
        padding: 48px 20px 56px;
    }

    /* 手機：每格各佔一排，維持各自的圖片比例不裁切 */
    .at-home-banner__list {
        flex-wrap: wrap;
    }

    .at-home-banner__list>li {
        flex: 0 0 100%;
    }

    .at-home-banner__list--3>li+li,
    .at-home-banner__list--2>li+li {
        margin-top: 1px;
    }

    .at-home-title {
        font-size: 1.375rem;
    }

    /* 快速連結：手機一排兩塊 */
    .at-home-quick {
        grid-template-columns: repeat(2, 1fr);
    }

    .at-home-quick__box {
        padding: 22px 16px 16px;
    }

    .at-home-quick__title {
        font-size: 1.125rem;
    }

    .at-home-quick__head {
        min-height: 34px;
    }

    .at-home-quick__icon {
        width: 34px;
        height: 34px;
    }

    .at-home-quick__btns {
        bottom: 18px;
        padding: 0 16px;
    }

    .at-home-erinfo__list {
        grid-template-columns: repeat(2, 1fr);
    }

    .at-home-erinfo__item:first-child {
        border-radius: 0 0 0 20px;
    }

    .at-home-erinfo__label {
        min-height: 72px;
        font-size: 1rem;
    }

    .at-home-erinfo__icon {
        left: 8px;
        font-size: 44px;
    }

    .at-home-erinfo__value {
        min-height: 64px;
        font-size: 1.5rem;
    }

    /* 小螢幕：一覽表按鈕縮小，才不會跟標題擠在一起 */
    .at-home-news__more {
        min-width: 112px;
        min-height: 34px;
        padding: 4px 36px 4px 14px;
        font-size: .8125rem;
    }

    /* 手機：一次三張，跑馬燈字縮小，底色帶也跟著調 */
    .at-home-sns::before {
        height: calc(11vw + 20px);
    }

    .at-home-sns__slider:not(.slick-initialized) .at-home-sns__item {
        flex: 0 0 33.3333%;
    }

    .at-home-sns__head {
        padding-bottom: 20px;
    }

    .at-home-esg__inner {
        padding-top: 44px;
    }

    .at-home-esg__title {
        font-size: 1.375rem;
    }

    .at-home-esg__media {
        height: 280px;
    }
}

/* ============================================================
   深色主題（頁首右上的太陽／月亮按鈕切換）
   style.css 有一套通用的深色覆寫（所有連結變青綠色、標題變淺灰），
   首頁 2026 的色塊都有自己的底色，這裡把文字顏色明確寫回來。
   選擇器都以 html[data-theme="dark"] 開頭，權重才蓋得過通用規則。
   ============================================================ */
html[data-theme="dark"] .at-home {
    --at-home-ink: #e2e8f0;
    --at-home-deep: #8FC9EC;
    --at-home-soft: #1e293b;
    --at-home-line: rgba(255, 255, 255, .12);

    background: #0f172a;
    color: var(--at-home-ink);
}

/* 區塊標題、更多連結 */
html[data-theme="dark"] .at-home .at-home-title,
html[data-theme="dark"] .at-home .at-home-title__en {
    color: var(--at-home-deep);
}

html[data-theme="dark"] .at-home .at-home-more,
html[data-theme="dark"] .at-home .at-home-more:hover {
    color: var(--at-home-ink);
}

/* hero 左下「醫療資訊 Menu」白色圓：維持白底、深藍字 */
html[data-theme="dark"] .at-home .at-home-hero {
    background: #0f172a;
}

html[data-theme="dark"] .at-home .at-home-hero__menu,
html[data-theme="dark"] .at-home .at-home-hero__menu * {
    color: #2E6BA8;
}

/* 所有自帶底色的色塊：快速連結、急診資訊、分類標籤、科別標籤、ESG、亮點專區 → 一律白字 */
html[data-theme="dark"] .at-home .at-home-quick__box,
html[data-theme="dark"] .at-home .at-home-quick__box *,
html[data-theme="dark"] .at-home .at-home-erinfo__item,
html[data-theme="dark"] .at-home .at-home-erinfo__item span,
html[data-theme="dark"] .at-home .at-home-news__cat,
html[data-theme="dark"] .at-home .at-home-news__cat:hover,
html[data-theme="dark"] .at-home .at-home-doc__label,
html[data-theme="dark"] .at-home .at-home-esg__title,
html[data-theme="dark"] .at-home .at-home-esg__text p,
html[data-theme="dark"] .at-home .at-home-banner__list>li>a,
html[data-theme="dark"] .at-home .at-home-banner__list>li>a *,
html[data-theme="dark"] .at-home .at-home-news__more {
    color: #FFF;
}

html[data-theme="dark"] .at-home .at-home-erinfo__icon {
    color: #D9D9D9;
}

/* 快速連結按鈕 hover：白底、字用色塊本身的顏色 */
html[data-theme="dark"] .at-home .at-home-quick__btns a:hover,
html[data-theme="dark"] .at-home .at-home-quick__btns a:hover *,
html[data-theme="dark"] .at-home .at-home-quick__btns a:focus,
html[data-theme="dark"] .at-home .at-home-quick__btns a:focus * {
    color: var(--at-quick-color, #136BA5);
}

/* 最新消息 */
html[data-theme="dark"] .at-home .at-home-news__more {
    border-color: #2E6BA8;
    background: #2E6BA8;
}

html[data-theme="dark"] .at-home .at-home-news__more:hover {
    border-color: #FFF;
    background: #FFF;
    color: #2E6BA8;
}

html[data-theme="dark"] .at-home .at-home-news__tab,
html[data-theme="dark"] .at-home .at-home-news__date,
html[data-theme="dark"] .at-home .at-home-news__title,
html[data-theme="dark"] .at-home .at-home-news__title:hover,
html[data-theme="dark"] .at-home .at-home-news__list>li::before {
    color: var(--at-home-ink);
}

html[data-theme="dark"] .at-home .at-home-news__tab.is-current,
html[data-theme="dark"] .at-home .at-home-news__tab.is-current::before,
html[data-theme="dark"] .at-home .at-home-news__list>li:hover::before {
    color: var(--at-home-deep);
}

html[data-theme="dark"] .at-home .at-home-news__list>li {
    border-bottom-color: rgba(255, 255, 255, .15);
}

html[data-theme="dark"] .at-home .at-home-news__empty {
    color: #94a3b8;
}

/* 醫師介紹 */
html[data-theme="dark"] .at-home .at-home-doc,
html[data-theme="dark"] .at-home .at-home-doc:hover,
html[data-theme="dark"] .at-home .at-home-doc__name,
html[data-theme="dark"] .at-home .at-home-doc__good {
    color: var(--at-home-ink);
}

html[data-theme="dark"] .at-home .at-home-doc:hover .at-home-doc__head,
html[data-theme="dark"] .at-home .at-home-doc:hover .at-home-doc__good {
    color: var(--at-home-deep);
}

html[data-theme="dark"] .at-home .at-home-doc:hover::before {
    background-color: #273449;
}

html[data-theme="dark"] .at-home .at-home-doc__pre {
    border-bottom-color: rgba(255, 255, 255, .15);
    color: #94a3b8;
}

html[data-theme="dark"] .at-home .at-home-doc__pre * {
    color: #94a3b8;
}

html[data-theme="dark"] .at-home .at-home-doc:hover .at-home-doc__label {
    color: var(--at-doc-label-hover-ink, #1A5271);
}

html[data-theme="dark"] .at-home .at-home-doctor__arrow {
    color: #2E6BA8;
}

html[data-theme="dark"] .at-home .at-home-doctor__progress {
    background: rgba(255, 255, 255, .15);
}

html[data-theme="dark"] .at-home .at-home-doctor__progress-bar {
    background: var(--at-home-deep);
}

/* 相關連結 */
html[data-theme="dark"] .at-home .at-home-sns {
    background: #0f172a;
}

/* 急診即時資訊 */
html[data-theme="dark"] .at-home .at-home-erinfo__date {
    color: #94a3b8;
}

html[data-theme="dark"] .at-home .at-home-erinfo__more,
html[data-theme="dark"] .at-home .at-home-erinfo__more:hover {
    color: var(--at-home-deep);
}

/* 英文首頁沒有亮點專區，相關連結直接接在 ESG 下方：
   補上跟亮點專區底部一樣的留白（電腦 80px、手機 56px），標題才不會黏在 ESG 上 */
.at-home-esg + .at-home-sns {
    padding-top: 80px;
}

@media (max-width: 767px) {
    .at-home-esg + .at-home-sns {
        padding-top: 56px;
    }
}

/* hero 左下「醫療資訊 Menu」圓鈕：跟快速連結「ESG 永續」色塊同一個綠、白字
   （ESG 綠已由 #57A513 調深為 #3F7F0E，白字對比 4.95，符合無障礙 AA 4.5） */
.at-home-hero__menu {
    background: #3F7F0E;
    color: #FFF;
}

.at-home-hero__menu:hover,
.at-home-hero__menu:focus {
    color: #FFF;
}

/* 深色模式原本把字改成藍色（白底用），綠底要維持白字 */
html[data-theme="dark"] .at-home .at-home-hero__menu,
html[data-theme="dark"] .at-home .at-home-hero__menu * {
    color: #FFF;
}