/* 由 common/footer.html 的内联 <style> 抽出(2026-08-27)。footer 在全站每页,外置后全站受益。*/
/* 二維碼外層：承載懸浮放大浮層，不能設置 overflow */
    .footer .qr-item {
        position: relative;
        width: 82px;
        flex: 0 0 auto;
    }

    .footer a.qr-container {
        text-decoration: none;
        cursor: pointer;
    }

    /* 懸浮浮層：透明外殼，靠 padding-bottom 銜接鼠標路徑，避免移動途中收起 */
    .footer .qr-popup {
        position: absolute;
        left: 50%;
        bottom: 100%;
        width: 240px;
        padding-bottom: 10px;
        z-index: 999;
        opacity: 0;
        visibility: hidden;
        transform: translateX(-50%) scale(0.92);
        transform-origin: center bottom;
        transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
    }

    /* 浮層裡的白框本身就是下載連結，可以直接點 */
    .footer .qr-popup-box {
        display: block;
        padding: 10px;
        background-color: #fff;
        border-radius: 8px;
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
        text-decoration: none;
        cursor: pointer;
    }

    /* tailwind 的 img{max-width:100%} 會把圖壓成容器寬，這裡顯式覆蓋 */
    .footer .qr-popup-box img {
        display: block;
        width: 100%;
        max-width: none;
        height: auto;
    }

    .footer .qr-item:hover .qr-popup {
        opacity: 1;
        visibility: visible;
        transform: translateX(-50%) scale(1);
    }