﻿/* =========================================================
   右側固定社群欄(2026 改版,全站共用)
   桌機:Follow Us + 社群圖示 + 回頂部 + 直排標語
   手機(<992px):僅保留回頂部鈕,固定右下角
   ========================================================= */
.follow-fixed {
    position: fixed;
    right: 14px;
    top: 120px;
    z-index: 900;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}
.follow-fixed-label {
    writing-mode: vertical-rl;
    font-size: 12px;
    letter-spacing: .22em;
    color: #666;
    margin-bottom: 4px;
}
.follow-fixed-item {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    overflow: hidden;
    background: #2B2B2B;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .18);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform .2s;
}
.follow-fixed-item:hover { transform: scale(1.12); }
.follow-fixed-item img { width: 100%; height: 100%; object-fit: cover; }

/* 社群品牌色(svg 圖示為白色,需深色底) */
.follow-fixed-fb { background: #1877F2; }
.follow-fixed-yt { background: #FF0000; }
.follow-fixed-ig { background: radial-gradient(circle at 30% 110%, #FDF497 0%, #FD5949 45%, #D6249F 60%, #285AEB 90%); }
.follow-fixed-threads { background: #101010; }

/* 回頂部鈕:黑色圓角方鈕 */
.follow-fixed .scrollToTop {
    position: static;
    width: auto;
    height: auto;
    margin: 6px 0 0;
    background: none;
    box-shadow: none;
}
.follow-fixed .scrollToTop a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 8px;
    background: #1A1A1A;
    color: #fff;
}
.follow-fixed .scrollToTop a:hover { background: #000; color: #fff; }
.follow-fixed .scrollToTop i { font-size: 18px; line-height: 1; }

.follow-fixed-slogan {
    writing-mode: vertical-rl;
    font-size: 11px;
    letter-spacing: .2em;
    color: #999;
    margin-top: 8px;
    max-height: 300px;
    overflow: hidden;
}

/* 手機/平板:只留回頂部鈕,移到右下角 */
@media (max-width: 991.98px) {
    .follow-fixed { top: auto; bottom: 20px; gap: 0; }
    .follow-fixed-label,
    .follow-fixed-item,
    .follow-fixed-slogan { display: none; }
}
