@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@300;400;700&display=swap');

body {
    font-family: 'Noto Sans TC', sans-serif;
    color: #444;
    background-color: #fff;
}

.tracking-widest {
    letter-spacing: 0.2rem;
}

/**************************************
navbar 導覽列
**************************************/

.navbar-brand {
    font-size: 1.25rem;
    /* 調整品牌文字大小 */
    color: #333;
}

.navbar-brand:hover .brand-text {
    color: #666;
    transition: color 0.5s ease;
    /* 滑鼠移上去時文字稍微變淡，增加互動感 */
}

.brand-text {
    display: inline-block;
    vertical-align: middle;
}

/* 在極小螢幕上縮小 Logo，避免擠壓到購物車 */
@media (max-width: 375px) {
    .navbar-brand img {
        height: 30px !important;
    }

    .brand-text {
        font-size: 1.1rem;
    }
}

/**************************************
高級感 Banner 樣式
**************************************/
#hero-banner {
    position: relative;
    height: 70vh;
    /* 佔據螢幕高度的 70%，非常有視覺張力 */
    overflow: hidden;
    margin-bottom: 10px !important;
    /* 強制縮小間距 */
}

.banner-img {
    height: 70vh;
    object-fit: cover;
    /* 確保圖片不變形地填滿區域 */
    transition: transform 10s ease;
    /* 緩慢放大效果 */
}

/* 讓當前圖片有慢慢放大的動態感 (Ken Burns effect) */
.carousel-item.active .banner-img {
    transform: scale(1.1);
}

/* 黑色半透明遮罩層：這能讓白字更明顯 */
.banner-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom,
            rgba(0, 0, 0, 0.3) 0%,
            rgba(0, 0, 0, 0.5) 100%);
    z-index: 1;
}

.carousel-caption {
    z-index: 2;
    bottom: 25%;
    /* 讓文字靠中一點，不要太貼底 */
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
    /* 文字陰影增加質感 */
}

/* 手機版微調 */
@media (max-width: 768px) {

    #hero-banner,
    .banner-img {
        height: 60vh;
        /* 稍微提高一點，讓文字空間更充裕 */
    }

    .carousel-caption {
        bottom: 15%;
        /* 手機版文字往下一點點，避免擋住圖片視覺焦點 */
        padding-left: 15px;
        padding-right: 15px;
    }

    /* 調整手機版標題大小，避免太擠 */
    .carousel-caption h2 {
        font-size: 1.8rem !important;
        letter-spacing: 2px !important;
        margin-bottom: 10px;
    }

    /* 調整手機版內文大小 */
    .carousel-caption p {
        font-size: 0.9rem;
        margin-bottom: 15px;
    }

    /* 讓按鈕在手機上不要太大 */
    .carousel-caption .btn {
        padding: 8px 30px !important;
        font-size: 0.9rem !important;
    }
}

/**************************************
  🛒 商品分類：橫向不換行 + 絲滑滑動版
**************************************/

/* 分類容器 - 強制單排與手機版滑動優化 */
#category-filter {
    display: flex !important;
    flex-wrap: nowrap !important;
    /* 💡 絕對禁止換行，確保按鈕排成一列 */
    gap: 10px;
    padding: 10px 0;

    /* 桌機預設置中 */
    justify-content: center;

    /* 橫向捲動設定 */
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    /* iOS 絲滑捲動 */

    /* 💡 增加吸附感，滑動停止時會自動對齊按鈕 */
    scroll-snap-type: x mandatory;

    /* 隱藏捲動條 (Firefox, IE) */
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* 隱藏捲動條 (Chrome, Safari, Edge) */
#category-filter::-webkit-scrollbar {
    display: none;
}

/* 分類按鈕基礎樣式 */
#category-filter .btn {
    flex: 0 0 auto;
    /* 💡 防止按鈕被壓縮變形 */
    white-space: nowrap;
    /* 💡 防止按鈕內的文字換行 */
    scroll-snap-align: center;
    /* 滑動停止時按鈕自動靠中對齊 */

    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    font-size: 0.95rem;
    border-width: 1.5px;
    border-radius: 50px;
    /* 膠囊造型 */
    margin-top: 10px;
    margin-right: 10px;
}

/* 點擊時的下壓反饋 (物理感) */
#category-filter .btn:active {
    transform: scale(0.92);
}

/* 當按鈕被選中時的樣式 (如果你 JS 有加 active class) */
#category-filter .btn.active {
    background-color: #333;
    color: #fff;
    border-color: #333;
}

/* 商品卡片淡入動畫 - 讓分類切換更生動 */
.product-item {
    animation: slideUpFade 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    position: relative;
    overflow: hidden;
}

@keyframes slideUpFade {
    0% {
        opacity: 0;
        transform: translateY(20px) scale(0.98);
    }

    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/**************************************
  📱 手機版微調
**************************************/
@media (max-width: 768px) {
    #category-filter {
        /* 💡 關鍵：手機版改為左對齊，客人才滑得動 */
        justify-content: flex-start !important;
        padding-left: 20px;
        /* 左右留白，避免按鈕貼死螢幕邊緣 */
        padding-right: 20px;
    }

    #category-filter .btn {
        font-size: 0.8rem;
        /* 手機版字體稍微縮小 */
        padding: 6px 16px;
        /* 💡 稍微增加按鈕間距，確保視覺上有足夠的「滑動暗示」 */
        margin-right: 8px;
    }
}

/**************************************
 右上購物車按鈕
**************************************/

/* 購物車連結容器 */
.nav-link.position-relative {
    transition: all 0.3s ease;
    /* 讓所有變化都有平滑過渡 */
    display: inline-block;
}

/* 滑鼠移上去時的動作 */
.nav-link.position-relative:hover {
    transform: translateY(-1px);
    /* 向上微浮動 */
    color: #000;
    /* 確保顏色變深 */
}

/* 針對內部的圖示做縮放 */
.nav-link.position-relative:hover i {
    transform: scale(1.1);
    /* 圖示放大 1.1 倍 */
    transition: transform 0.2s ease;
}

/* 購物車數字標籤 (Badge) 的 hover 效果 */
.nav-link.position-relative:hover .badge {
    background-color: #555 !important;
    /* 數字背景稍微變色 */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

/**************************************
 商品卡片
**************************************/

/*商品卡片樣式*/

.product-item {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* ✨ 強制所有內容水平置中 */
    text-align: center;
    /* ✨ 強制文字置中 */
    background: #fff;
    border: 1px solid #eee;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    overflow: hidden;
    padding-bottom: 20px;
    transition: transform 0.3s;
    gap: 20px;
}

/* 1. 確保圖片容器是唯一的基準點 */
#product-list .img-wrapper {
    position: relative !important;
    /* 強制相對定位 */
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden !important;
    /* 強制隱藏超出範圍的遮罩 */
    cursor: pointer;
    background-color: #f8f9fa;
    /* 墊個底色 */
    z-index: 1;
    /* 建立新的堆疊上下文 */
}

/* 2. 圖片基礎樣式 */
#product-list .img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.6s ease;
}

/* 3. 遮罩：絕對定位於 .img-wrapper 內 */
#product-list .add-to-cart-overlay {
    position: absolute !important;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    color: #fff !important;
    display: flex;
    align-items: center;
    justify-content: center;

    /* ✨ 核心設定：使用透明度與縮放來營造浮現感 */
    opacity: 0;
    /* 預設完全透明 */
    transform: scale(1.05);
    /* 初始稍微放大一點，浮現時縮回原位會更平穩 */
    transition: opacity 0.4s ease, transform 0.4s ease;

    font-weight: bold;
    font-size: 1.1rem;
    z-index: 10;
    pointer-events: none;
    backdrop-filter: blur(3px);
    /* 增加毛玻璃感，讓浮現更有深度 */
}

/* 4. 滑鼠滑入效果 (Hover) */
#product-list .img-wrapper:hover .add-to-cart-overlay {
    opacity: 1;
    /* 變為不透明 */
    transform: scale(1);
    /* 縮回到正常比例，產生一種「套上去」的視覺感 */
}

#product-list .img-wrapper:hover img {
    transform: scale(1.1);
}

/* 商品名稱 */
/* 首頁卡片標題樣式 */
.p-name {
    /* ✨ 使用 clamp 讓字體自動縮放 */
    /* 最小值 1rem (手機), 中間值 2.5vw (隨螢幕變動), 最大值 1.3rem (電腦) */
    font-size: clamp(1rem, 2.5vw, 1.3rem) !important;
    font-weight: 700;
    /* 保持粗體 */
    line-height: 1.4;
    /* 增加行高，避免兩行字擠在一起 */
    margin-bottom: 8px !important;
    /* 標題與價格之間的距離 */
    color: #333;
    /* 深灰色看起來比較高級 */

    /* 確保標題長度一致，超過兩行顯示省略號 (選用) */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* 商品描述 */
.product-item p.text-muted.small {
    padding: 0 20px;
    margin-bottom: 0px;
    min-height: 2.5em;
}

/* 特點清單區塊 (置中對齊) */
.product-features {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* ✨ 讓清單在卡片中央 */
    padding: 0;
    margin-bottom: 15px;
    list-style: none;
    width: 100%;
}

.product-features li {
    width: fit-content;
    /* ✨ 讓文字靠左對齊但整體置中 */
    text-align: left;
    font-size: 0.85rem;
    color: #666;
    line-height: 1.8;
}

/* 價格區塊 */
.p-price-display {
    color: #e74c3c !important;
    /* 換成跟彈窗一樣的紅色 */
    font-size: 1.25rem;
    /* 稍微加大字級 */
    font-weight: 800;
    /* 加粗，提升吸引力 */
    margin: 0 auto !important;
}

/* 卡片按鈕：加大並提升質感 */
.action-btn {
    padding: 8px 30px !important;
    /* 增加上下高度，讓按鈕變大 */
    font-size: 1.2rem !important;
    /* 字體放大 */
    letter-spacing: 1px;
    /* 字間距微調，看起來更專業 */
    border-radius: 8px;
    /* 稍微圓角一點，跟整體風格呼應 */
    transition: all 0.3s ease;
    /* 滑鼠滑過時的平滑效果 */
}

/* 按鈕滑過效果（可選，讓使用者知道可以點） */
.action-btn:hover {
    background-color: #333 !important;
    color: #fff !important;
    transform: translateY(-2px);
    /* 輕微往上浮起感 */
}

/* 針對手機版 (螢幕寬度小於 768px) 的微調 */
@media (max-width: 768px) {
    .p-name {
        font-size: 1rem !important;
        /* 手機版固定在稍微小一點的尺寸 */
        margin-bottom: 15px !important;
    }

    /* 剛才說的按鈕，手機版可以稍微扁一點點才不會佔空間 */
    .action-btn {
        padding: 8px 20px !important;
        font-size: 0.9rem !important;
    }
}

/* 針對平板版的微調 */

@media (min-width:769px)and (max-width:1200px) {

    .p-name {
        font-size: 1rem !important;
        margin-bottom: 15px !important;
    }

    .action-btn {
        padding: 8px 20px !important;
        font-size: 0.9rem !important;
    }
}

/**************************************
商品卡片彈跳視窗內容
**************************************/

.modal-main-img {
    aspect-ratio: 1 / 1;
    object-fit: cover;
}

/* 購物車跳動動畫 */
@keyframes cartBounce {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.2);
    }

    100% {
        transform: scale(1);
    }
}

.cart-bounce {
    animation: cartBounce 0.4s ease-in-out;
}

/* 1. 移除彈窗 Header 的空間，讓圖片貼齊頂部 */
#productModal .modal-header {
    padding: 0;
    border: none;
    position: static;
}

/* 2. 強制移除 modal-body 的內邊距 (如果你 HTML 已經加了 p-0 可省略，但建議加上以防萬一) */
#productModal .modal-body {
    padding: 0 !important;
}

/* 3. 確保輪播圖片在彈窗中是圓角的且沒有多餘邊距 */
.modal-content {
    overflow: hidden;
    /* 確保圖片不會超出圓角 */
}

/* 4. 針對行動裝置的微調：確保圖片在手機上不會太高 */
@media (max-width: 768px) {
    .modal-main-img {
        aspect-ratio: 1 / 1;
    }
}

/* 彈窗文字的排版 */

#modal-desc {
    font-size: 14px;
    line-height: 1.8;
    /* 增加行高，長文字才好閱讀 */
    color: #555;
    /* 顏色稍微深一點點 */
    letter-spacing: 0.3px;
    /* 增加一點字距，更有質感 */
    white-space: pre-line;
    /* 重要：這能讓你在 JS 寫的 \n 換行符號生效 */
}

/* 針對彈跳視窗內的價格進行設定 */
#modal-price {
    color: #e74c3c !important;
    /* 這裡可以換成你喜歡的顏色，例如紅色系 */
    font-size: 1.5rem;
    /* 讓價格大一點，吸引注意 */
    font-weight: 800;
    /* 讓價格更粗一點 */
    margin-bottom: 10px;
    /* 增加與下方說明的間距 */
    display: block;
    /* 確保它是獨立一行 */
}

/* 鎖定彈窗外殼：寬度與高度固定 */
@media (min-width: 768px) {
    #productModal .modal-dialog {
        /* 在這區間內，讓寬度盡量佔滿但不貼邊 */
        width: 92%;
        max-width: 900px;
        margin: 1.75rem auto;
    }

    #productModal .modal-content {
        /* 移除 min-height 限制，讓高度由 row 決定 */
        height: auto;
        overflow: hidden;
        border: none;
        border-radius: 15px;
    }

    /* 關鍵：使用 flex-nowrap 並讓對齊方式為 stretch */
    #productModal .row.g-0 {
        display: flex;
        flex-wrap: nowrap;
        align-items: stretch;
        /* 讓左右兩邊高度強行同步 */
    }

    /* 左側圖片區：強制 1:1 正方形 */
    #productModal .col-md-6:first-child {
        flex: 0 0 50%;
        max-width: 50%;
        aspect-ratio: 1 / 1;
        /* 鎖定比例 */
        position: relative;
        background-color: #f8f9fa;
    }

    /* 右側內容區：高度與左側同步，內容過多則捲動 */
    #productModal .col-md-6.p-4 {
        flex: 0 0 50%;
        max-width: 50%;

        /* 核心邏輯：高度設為 0 並靠 flex-grow 撐開，再用 overflow 限制 */
        display: flex;
        flex-direction: column;
        height: auto;

        /* 確保這裡的 max-height 會跟著左邊的正方形連動 */
        /* 在 Flex stretch 模式下，內容過長時需要設定一個絕對定位的內部容器或限制 */
        position: relative;
    }

    /* 針對右側內部的內容包裝層 (需確保 JS 渲染出的內容都在這裡面) */
    /* 如果你的 HTML 結構沒變，直接針對 col-md-6.p-4 即可 */
    #productModal .col-md-6.p-4 {
        max-height: calc(92vw * 0.5);
        /* 這是 768-1000 區間的動態正方形高度 */
        overflow-y: auto;
    }

    /* 當寬度達到 900px 以上時，高度就固定在 450px */
    @media (min-width: 900px) {
        #productModal .col-md-6.p-4 {
            max-height: 450px;
        }
    }
}

/* 確保圖片在任何比例下都填滿左側正方形 */
#productModal .carousel,
#productModal .carousel-inner,
#productModal .carousel-item,
.modal-main-img {
    height: 100% !important;
    width: 100% !important;
}

.modal-main-img {
    object-fit: cover;
}

/* 5. 美化內部捲動條 (確保它是深色且易見的) */
#productModal .col-md-6.p-4::-webkit-scrollbar {
    width: 6px;
}

#productModal .col-md-6.p-4::-webkit-scrollbar-track {
    background: transparent;
}

#productModal .col-md-6.p-4::-webkit-scrollbar-thumb {
    /* 修正：原本的 #f1f1f1 太淺，建議改深一點 */
    background-color: #ccc;
    border-radius: 10px;
}

#productModal .col-md-6.p-4::-webkit-scrollbar-thumb:hover {
    background-color: #aaa;
    /* 滑鼠滑過時變深 */
}

/* 5. 美化內部捲動條 (優化對比度) */
#productModal .col-md-6.p-4::-webkit-scrollbar {
    width: 6px;
}

#productModal .col-md-6.p-4::-webkit-scrollbar-track {
    background: transparent;
    /* 讓軌道透明，視覺更簡潔 */
}

#productModal .col-md-6.p-4::-webkit-scrollbar-thumb {
    /* 修正：原本的 #f1f1f1 在白色背景下幾乎看不見，建議改深一點 */
    background-color: #ddd;
    border-radius: 10px;
}

#productModal .col-md-6.p-4::-webkit-scrollbar-thumb:hover {
    background-color: #bbb;
    /* 滑鼠滑過時變深 */
}

/* 調整 X 按鈕位置，避免擋到捲軸 */
#productModal .btn-close {
    position: absolute;
    top: 2px;
    right: 2px;
    z-index: 1060;
    /* 確保在最上層 */
    background-color: rgba(255, 255, 255, 0.7);
    /* 給它一個半透明底色，讓它在圖片上也能看見 */
    padding: 8px;
    border-radius: 50%;
    transition: all 0.3s;
    margin: 0;
    /* 移除 Bootstrap 預設的 margin */
}

#productModal .btn-close:hover {
    background-color: rgba(255, 255, 255, 1);
    transform: rotate(90deg);
    /* 增加一點互動感 */
}

/* 左右切換箭頭樣式強化 */
.carousel-control-prev,
.carousel-control-next {
    width: 40px;
    /* 縮小感應範圍，才不會誤點 */
    height: 40px;
    background-color: rgba(0, 0, 0, 0.3);
    /* 深色半透明圓底 */
    border-radius: 50%;
    top: 50%;
    /* 置中 */
    transform: translateY(-50%);
    margin: 0 10px;
    /* 離邊緣一點距離 */
    opacity: 0.8;
}

.carousel-control-prev:hover,
.carousel-control-next:hover {
    background-color: rgba(0, 0, 0, 0.6);
    opacity: 1;
}

/* 讓箭頭圖標變小一點，看起來更精緻 */
.carousel-control-prev-icon,
.carousel-control-next-icon {
    width: 20px;
    height: 20px;
}

/* 讓數量輸入框的數字置中 */
#modal-qty {
    text-align: center !important;
}

/* 額外優化：隱藏 Chrome/Safari 預設的小箭頭，讓視覺更乾淨 */
#modal-qty::-webkit-outer-spin-button,
#modal-qty::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* 讓特點清單上方的線離遠一點 */
#modal-features {
    list-style: none;
    padding: 0;
    margin-top: 18px !important;
    /* 增加上方間距 */
    padding-top: 20px;
    border-top: 1px solid #eee;
    /* 上方線條 */
}

/* 自定義勾勾樣式：黑色圓底 + 白色勾勾 */
#modal-features li {
    position: relative;
    padding-left: 25px;
    /* 給勾勾留位子 */
    margin-bottom: 10px;
    font-size: 0.9rem;
    color: #444;
    line-height: 1.5;
    display: flex;
    align-items: center;
}

/* 自定義勾勾樣式：修正手機版變灰色的問題 */
#modal-features li::before {
    /* 1. 核心修正：加上 \FE0E 強制使用文字模式渲染，避免變成系統 Emoji */
    content: '\2714\FE0E';

    position: absolute;
    left: 0;
    width: 18px;
    height: 18px;
    background-color: #333;
    /* 黑底 */
    color: white !important;
    /* 白勾 */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;

    /* 2. 針對手機瀏覽器的優化設定 */
    font-size: 10px;
    /* 勾勾稍微縮小一點才不會超出圓圈 */
    font-weight: bold;
    -webkit-font-smoothing: antialiased;
    /* 讓線條更銳利 */
    text-shadow: none;
    /* 移除可能的陰影 */
}

/* 詳細規格 (modalDesc) 的樣式優化 */
#modal-detail-spec {
    white-space: pre-wrap;
    /* 讓反引號內的換行生效 */
    background-color: #f8f9fa;
    padding: 15px;
    border-radius: 8px;
    font-size: 0.9rem;
    color: #666;
    margin-top: 20px;
}

/* 讓彈窗的圓角跟你的商品卡片一致 */
.swal2-popup {
    border-radius: 20px !important;
    font-family: 'Noto Sans TC', sans-serif !important;
}

/* 調整確認按鈕的樣式 */
.swal2-confirm {
    padding: 10px 30px !important;
    font-weight: bold !important;
}

/**************************************
購物車樣式
**************************************/

/* 懸浮加入按鈕 */
.add-to-cart-overlay {
    position: absolute;
    bottom: -50px;
    left: 0;
    width: 100%;
    background: rgba(0, 0, 0, 0.8);
    color: #fff;
    border: none;
    padding: 12px;
    transition: bottom 0.3s ease;
    font-size: 0.9rem;
}

.product-item:hover .add-to-cart-overlay {
    bottom: 0;
}

/* 簡約輸入框 */
.form-control-custom {
    width: 100%;
    border-bottom: 1px solid #ddd;
    padding: 12px 5px;
    outline: none;
    background-color: #fdfdfd;
    /* 極淺灰底色 */
    border-radius: 4px;
    /* 微圓角 */
    padding: 12px 15px;
    /* 增加內距 */
    border: 1px solid #eee;
    /* 全邊框改為淡色 */
    transition: all 0.3s ease;
}

.form-control-custom:focus {
    background-color: #fff;
    border-color: #000;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    /* 聚焦時輕微發光 */
}

/* 購物車列表樣式 */
.cart-item-row {
    display: flex;
    justify-content: space-between;
    padding: 15px 0;
    border-bottom: 1px dashed #eee;
}

.btn-remove {
    background: none;
    border: none;
    color: #ccc;
    cursor: pointer;
    font-size: 0.8rem;
}

.btn-remove:hover {
    color: #ff4d4d;
}

/**************************************
footer
**************************************/

.footer-p {
    font-size: 16px;
    margin: 8px 0px;
}

/* 只有在電腦版 (寬度 768px 以上) 才顯示垂直分隔線 */
@media (min-width: 768px) {
    .border-end-md {
        border-right: 1px solid #dee2e6 !important;
        /* 細細的淺灰色 */
    }
}

/* 讓 Footer 的連結滑過時有點動態效果 (加分用) */
.footer-links a:hover {
    color: #000 !important;
}

/**************************************
回到頂端 & line 資訊按鈕
**************************************/

/* 浮動按鈕容器 */
.fixed-actions {
    position: fixed;
    right: 20px;
    bottom: 30px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    z-index: 9999;
}

/* 通用按鈕樣式 */
.action-btn-float {
    padding: 10px 0 !important;
    /* 增加上下高度，讓按鈕變大 */
    letter-spacing: 1px;
    /* 字間距微調，看起來更專業 */
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
}

/* 回到頂端：深色風格 */
#back-to-top {
    background-color: #fff;
    color: #333;
    opacity: 0;
    /* 預設隱藏 */
    visibility: hidden;
    transform: translateY(20px);
}

#back-to-top.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* LINE：經典綠色 */
.line-btn {
    background-color: #06C755;
    color: white;
}

.line-btn:hover {
    background-color: #05a547;
    color: white;
    transform: scale(1.1);
}

#back-to-top:hover {
    background-color: #f8f9fa;
    transform: scale(1.1);
}