/* 🔹 Skip link */
.skip-link {
    position: absolute;
    left: -999px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

    .skip-link:focus {
        position: static;
        width: auto;
        height: auto;
        background: #004aad;
        color: #fff;
        padding: 8px 12px;
        z-index: 1000;
    }

/* 🔹 focus 可見 */
:focus {
    outline: 3px solid #004aad;
    outline-offset: 2px;
}

/* 🔹 Checkbox 樣式 */
.ch.small-font {
    font-size: 1.1rem !important;
}

.flexBox {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

    .flexBox .grids {
        width: calc(24% - 8px);
        box-sizing: border-box;
    }

@media screen and (max-width: 768px) {
    .flexBox .grids {
        width: calc(50% - 8px);
    }
}

@media screen and (max-width: 480px) {
    .flexBox .grids {
        width: 100%;
    }
}

/* 🔹 Lazyload 圖片避免跳動 */
img[loading="lazy"] {
    background-color: #f5f5f5;
    aspect-ratio: 16 / 9;
    display: block;
}

/* 🔹 Like 按鈕 focus 狀態 */
.likebtn:focus {
    outline: 2px solid #007aff;
}

/* 🔹 高對比文字 */
.h2Title .ch, .h2Title .en {
    color: #111;
}

/* 🔹 aria live 狀態 */
.stateDiv {
    display: flex;
    align-items: center;
    gap: 4px;
}


.filterBox .square {
    width: 25px;
    height: 25px;
    border: #c2dbfe 5px solid;
    border-radius: 6px;
}
/*
 .flexCheckbox{ display: flex; align-items: baseline; }
 .flexCheckbox .txt{ padding: 0 0 0 10px; font-size: 1.125rem; color: #636363; }
 .flexCheckbox .txt .ch{ display: block; font-size: inherit; color: inherit; }
 .flexCheckbox .txt .ch.black{ color: #000; }
 .flexCheckbox .txt .en{ display: block; font-size: inherit; color: inherit; }
 .flexCheckbox .txt a{ color: #0080A3; font-size: inherit; }
 .square{ width: 16px; height: 16px; border: 1px solid #757575; border-radius: 3px; position: relative; flex-shrink:0; }
 input[type="checkbox"]{ display: none; }
 input[type="checkbox"]:checked + .flexCheckbox .square:before{ content: ""; position: absolute; width: 4px; height: 11px; background-color: #0080A3; transform: rotate(-45deg); top: 3px; left: 0px; }
 input[type="checkbox"]:checked + .flexCheckbox .square:after{ content: ""; position: absolute; width: 4px; height: 21px; background-color: #0080A3; transform: rotate(45deg); top: -5px; left: 10px; }
*/

/* 🔹 隱藏原生 Checkbox，但保留焦點 + 鍵盤操作 + 無障礙朗讀 */
.real-checkbox {
    position: absolute;
    opacity: 0;
    width: 20px;
    height: 20px;
    margin: 0;
    cursor: pointer;
}

    /* 🔹 當 checkbox 聚焦時，給 label 明確的 focus 樣式（無障礙 AA 必備） */
    .real-checkbox:focus + .flexCheckbox {
        outline: 2px solid #005fcc;
        outline-offset: 3px;
    }


/* ===== 以下完全沿用你原本的視覺樣式 ===== */

.flexCheckbox {
    display: flex;
    align-items: baseline;
    cursor: pointer;
}

    .flexCheckbox .txt {
        padding-left: 10px;
        font-size: 1.125rem;
        color: #636363;
    }

        .flexCheckbox .txt .ch {
            display: block;
            font-size: inherit;
            color: inherit;
        }

            .flexCheckbox .txt .ch.black {
                color: #000;
            }

.square {
    width: 16px;
    height: 16px;
    border: 1px solid #757575;
    border-radius: 3px;
    position: relative;
    flex-shrink: 0;
}


/* 🔹 勾選（保留你原本的兩條線 γ 字型） */
.real-checkbox:checked + .flexCheckbox .square:before {
    content: "";
    position: absolute;
    width: 4px;
    height: 11px;
    background-color: #0080A3;
    transform: rotate(-45deg);
    top: 3px;
    left: 0px;
}

.real-checkbox:checked + .flexCheckbox .square:after {
    content: "";
    position: absolute;
    width: 4px;
    height: 21px;
    background-color: #0080A3;
    transform: rotate(45deg);
    top: -5px;
    left: 10px;
}