/* =========================================
   1. 字體載入 (Fonts)
   ========================================= */
/* 載入標準字體 (包含 100 到 900 的粗細) */
@font-face {
    font-family: 'Inter';
    src: url('../fonts/Inter/Inter-VariableFont.woff2') format('woff2'), url('../fonts/Inter/Inter-VariableFont.woff') format('woff');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

/* 載入斜體字體 */
@font-face {
    font-family: 'Inter';
    src: url('../fonts/Inter/Inter-Italic-VariableFont_opsz,wght.ttf') format('truetype');
    font-weight: 100 900;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: "Roboto";
    src: url("../fonts/Roboto-VariableFont_wdth,wght.ttf") format("truetype-variations");
    font-weight: 100 900;
    font-stretch: 75% 125%;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Inknut Antiqua";
    src: url("../fonts/InknutAntiqua-SemiBold.ttf") format("truetype");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

/* =========================================
   2. 全域變數設計系統 (Design Tokens)
   ========================================= */
:root {
    /* --- Figma 顏色系統 --- */
    --color-white: #FFFFFF;
    --color-page-background: #FDFBF2;
    --color-text: #5A4A37;
    --color-gray2: #808080;
    --color-light-gray: #D3D3D3;
    --color-disable: #E5D8BC;
    --color-logo-orange: #F9B400;
    --color-logo-yellow: #FFD501;
    --color-dark-yellow: #CEA144;
    --color-dark-yellow-lighten: #CEA144CC;
    --color-decorate: #F6EFE5;
    --color-light-yellow: #FFEC70;
    --color-apricot: #EED6A5;
    --color-pink: #F8D1D1;
    --color-red: #FF7878;
    /* --- 覆寫 Bootstrap 預設行為 --- */
    --bs-body-bg: var(--color-page-background);
    --bs-body-color: var(--color-text);
    --font-weight-lighter: lighter;
    --font-weight-light: 300;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-bolder: bolder;
}

/* =========================================
   擴充 Bootstrap Spacers (6 ~ 10)
   6=4rem(64px), 7=5rem(80px), 8=6rem(96px), 9=8rem(128px), 10=10rem(160px)
   ========================================= */
/* --- Gap --- */
.gap-6 {
    gap: 4rem !important;
}

.gap-7 {
    gap: 5rem !important;
}

.gap-8 {
    gap: 6rem !important;
}

.gap-9 {
    gap: 8rem !important;
}

.gap-10 {
    gap: 10rem !important;
}

/* --- Padding (全方向) --- */
.p-6 {
    padding: 4rem !important;
}

.p-7 {
    padding: 5rem !important;
}

.p-8 {
    padding: 6rem !important;
}

/* --- Padding Y (上下) --- */
.py-6 {
    padding-top: 4rem !important;
    padding-bottom: 4rem !important;
}

.py-7 {
    padding-top: 5rem !important;
    padding-bottom: 5rem !important;
}

.py-8 {
    padding-top: 6rem !important;
    padding-bottom: 6rem !important;
}

/* --- Padding X (左右) --- */
.px-6 {
    padding-left: 4rem !important;
    padding-right: 4rem !important;
}

.px-7 {
    padding-left: 5rem !important;
    padding-right: 5rem !important;
}

.px-8 {
    padding-left: 6rem !important;
    padding-right: 6rem !important;
}

/* --- Margin (全方向) --- */
.m-6 {
    margin: 4rem !important;
}

.m-7 {
    margin: 5rem !important;
}

.m-8 {
    margin: 6rem !important;
}

/* --- Margin Y (上下) --- */
.my-6 {
    margin-top: 4rem !important;
    margin-bottom: 4rem !important;
}

.my-7 {
    margin-top: 5rem !important;
    margin-bottom: 5rem !important;
}

.my-8 {
    margin-top: 6rem !important;
    margin-bottom: 6rem !important;
}

/* --- Margin Bottom (單獨下間距) --- */
.mb-6 {
    margin-bottom: 4rem !important;
}

.mb-7 {
    margin-bottom: 5rem !important;
}

.mb-8 {
    margin-bottom: 6rem !important;
}

/* =========================================
   3. 基礎 HTML 標籤設定 (Base)
   ========================================= */
body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
    font-style: normal;
    font-size: 16px;
    min-width: 375px;
    background-color: #F9F8F3;
    color: var(--color-text)
}

a {
    text-decoration: none;
    color: var(--color-text);
}

input, button, select, textarea {
    font-family: inherit;
    font-weight: inherit;
}

/*將Bootstrap為body新增的padding-right移除*/
body.modal-open {
    padding-right: 0px !important;
}

/* =========================================
   4. Figma 排版通用類別 (Typography Utilities)
   ========================================= */
.typo-10-m {
    font-size: 10px !important;
    font-weight: var(--font-weight-medium) !important;
    line-height: 14px !important;
    letter-spacing: 1px !important;
}

.typo-12-r {
    font-size: 12px !important;
    font-weight: var(--font-weight-normal) !important;
    line-height: 14.5px !important;
    letter-spacing: 0px !important;
}

.typo-12-m {
    font-size: 12px !important;
    font-weight: var(--font-weight-medium) !important;
    line-height: 14.5px !important;
    letter-spacing: 0.8px !important;
}

.typo-14-390-web-text {
    font-size: 14px !important;
    font-weight: var(--font-weight-medium) !important;
    line-height: 20px !important;
    letter-spacing: 1px !important;
}

.typo-14-m {
    font-size: 14px !important;
    font-weight: var(--font-weight-medium) !important;
    line-height: 22px !important;
    letter-spacing: 0.8px !important;
}

.typo-16-390-web-text {
    font-size: 16px !important;
    font-weight: var(--font-weight-medium) !important;
    line-height: 18px !important;
    letter-spacing: 1px !important;
}

.typo-16-m {
    font-size: 16px !important;
    font-weight: var(--font-weight-medium) !important;
    line-height: 28px !important;
    letter-spacing: 1px !important;
}

.typo-18-m {
    font-size: 18px !important;
    font-weight: var(--font-weight-medium) !important;
    line-height: 32px !important;
    letter-spacing: 1.2px !important;
}

.typo-24-m {
    font-size: 24px !important;
    font-weight: var(--font-weight-medium) !important;
    line-height: 32px !important;
    letter-spacing: 1.2px !important;
}

.typo-20-sb {
    font-size: 20px !important;
    font-weight: var(--font-weight-semibold) !important;
    line-height: 28px !important;
    letter-spacing: 1.2px !important;
}

.typo-24-sb {
    font-size: 24px !important;
    font-weight: var(--font-weight-semibold) !important;
    line-height: 34px !important;
    letter-spacing: 1.3px !important;
}

.typo-32-r {
    font-size: 32px !important;
    font-weight: var(--font-weight-normal) !important;
    line-height: 38.7px !important;
    letter-spacing: 1.5px !important;
}

.typo-32-sb {
    font-size: 32px !important;
    font-weight: var(--font-weight-semibold) !important;
    line-height: 38.7px !important;
    letter-spacing: 1.5px !important;
}

.typo-48-sb {
    font-size: 48px !important;
    font-weight: var(--font-weight-semibold) !important;
    line-height: 58.1px !important;
    letter-spacing: 1.5px !important;
}

/* =========================================
   5. Figma 色彩通用類別 (Color Utilities)
   ========================================= */
/* --- 文字顏色 --- */
.text-white {
    color: var(--color-white) !important;
}

.text-text {
    color: var(--color-text) !important;
}

.text-gray2 {
    color: var(--color-gray2) !important;
}

.text-light-gray {
    color: var(--color-light-gray) !important;
}

.text-disable {
    color: var(--color-disable) !important;
}

.text-logo-orange {
    color: var(--color-logo-orange) !important;
}

.text-logo-yellow {
    color: var(--color-logo-yellow) !important;
}

.text-dark-yellow {
    color: var(--color-dark-yellow) !important;
}

.text-red {
    color: var(--color-red) !important;
}

.text-dark-yellow-lighten {
    color: var(--color-dark-yellow-lighten) !important;
}

/* --- 背景顏色 --- */
.bg-page {
    background-color: var(--color-page-background) !important;
}

.bg-disable {
    background-color: var(--color-disable) !important;
}

.bg-logo-orange {
    background-color: var(--color-logo-orange) !important;
}

.bg-logo-yellow {
    background-color: var(--color-logo-yellow) !important;
}

.bg-dark-yellow {
    background-color: var(--color-dark-yellow) !important;
}

.bg-decorate {
    background-color: var(--color-decorate) !important;
}

.bg-light-yellow {
    background-color: var(--color-light-yellow) !important;
}

.bg-apricot {
    background-color: var(--color-apricot) !important;
}

.bg-pink {
    background-color: var(--color-pink) !important;
}

.bg-red {
    background-color: var(--color-red) !important;
}

.bg-dark-yellow-lighten {
    background-color: var(--color-dark-yellow-lighten ) !important;
}


/* --- 邊框顏色 --- */
.border-dark-yellow {
    border-color: var(--color-dark-yellow-lighten ) !important;
}

.border-text {
    border-color: var(--color-text) !important;
}

/* =========================================
   Figma Shadow
   ========================================= */
.drop-shadow {
    box-shadow: 1px 1px 10px rgba(142, 142, 142, 0.25) !important;
}

/* =========================================
   6. 元件專用與通用尺寸 (Components & Utilities)
   ========================================= */
.input-no-outline:focus {
    outline: none !important;
}

.header-search-desktop {
    width: 200px;
}

.logo-text {
    color: #A47E3D;
}

/* --- 品牌 Logo & Title --- */
.brand-logo-lg {
    width: 340px;
    height:auto;
}

.brand-logo-md {
    width: 231px;
    height: auto;
}

.brand-logo-sm {
    width: 231px;
    height: auto;
}

.brand-subtitle-en {
    font-size: 18px !important;
    font-weight: 400 !important;
    letter-spacing: 2px !important;
}

.brand-subtitle-en-sm {
    font-size: 14px !important;
    font-weight: 500 !important;
    letter-spacing: 2px !important;
    line-height: 22px !important;
}

.brand-title {
    font-size: 32px !important;
    font-weight: 400 !important;
    letter-spacing: 1.5px !important;
    line-height: 100% !important;
}

.brand-title-sm {
    font-size: 24px !important;
    font-weight: 400 !important;
    letter-spacing: 1.2px !important;
    line-height: 28px !important;
}

/* --- 頭像與圖示 --- */
.avatar-48 {
    width: 48px;
    height: 48px;
}

.icon-box-15 {
    width: 15px;
    height: 15px;
}

.icon-box-16 {
    width: 16px;
    height: 16px;
}

.icon-box-18 {
    width: 18px;
    height: 18px;
}

.icon-box-20 {
    width: 20px;
    height: 20px;
}

.icon-box-25 {
    width: 25px;
    height: 25px;
}

.icon-box-30 {
    width: 30px;
    height: 30px;
}

.icon-box-32 {
    width: 32px;
    height: 32px;
}

.icon-box-40 {
    width: 40px;
    height: 40px;
}

.icon-box-50 {
    width: 50px;
    height: 50px;
}

.icon-box-80 {
    width: 80px;
    height: 80px;
}

.icon-box-100 {
    width: 100px;
    height: 100px;
}

.login-placeholder-icon {
    font-size: 3rem;
    line-height: 1;
}

.hamburger-icon-md {
    width: 40px !important;
    height: 35px !important;
}

.hamburger-icon-sm {
    width: 28px !important;
    height: 25px !important;
}

.offcanvas-mobile-menu {
    max-width: 100%;
}

/* --- Placeholder --- */
.placeholder-light-gray::placeholder {
    color: var(--color-light-gray) !important;
    opacity: 1;
}

.placeholder-disable::placeholder {
    color: var(--color-disable) !important;
    opacity: 1;
}

.click-login-text {
    line-height: 32px;
    letter-spacing: 1.2px;
}

/* --- Scrollbar & Safe Area --- */
.hide-scrollbar {
    scrollbar-width: none;
    -ms-overflow-style: none;
}

    .hide-scrollbar::-webkit-scrollbar {
        display: none;
    }

.shadow-safe-area {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    margin-left: -1rem !important;
    margin-right: -1rem !important;
    padding-bottom: 1rem !important;
    margin-bottom: -1rem !important;
}

input[type="checkbox"] {
    /* 1. 清除瀏覽器預設的 checkbox 樣式 */
    appearance: none;
    -webkit-appearance: none;
    min-width: 18px;
    min-height: 18px;
    cursor: pointer;
    position: relative;
    /* 2. 設定未勾選時的框框樣式 */
    border: 2px solid var(--color-disable); /* 框線顏色 */
    border-radius: 3px; /* 圓角 */
    background-color: transparent /* 背景色 */
}

/* 3. 勾選時的樣式 (畫出勾勾) */
input[type="checkbox"]:checked::after {
    content: "";
    position: absolute;
    /* 勾勾的位置跟大小 (可視需求微調) */
    left: 4px;
    top: 1px;
    width: 6px;
    height: 9px;
    /* 這裡就是勾勾的顏色！你想改什麼顏色都可以 */
    border: solid var(--color-white);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

/* (選擇性) 勾選時，如果你連框框的背景色都想改，寫在這裡 */
input[type="checkbox"]:checked {
    background-color: var(--color-dark-yellow); /* 背景色 */
    border-color: var(--color-dark-yellow); /* 框線顏色 */
}

.header-separator {
    width: 1px;
    height: 20px;
    background-color: var(--color-light-gray);
    flex-shrink: 0;
}

.white-space-nowrap {
    white-space: nowrap;
}

.header-search-wrap {
    position: relative;
}

.header-search-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 12px);
    right: 0;
    width: 300px;
    background-color: var(--color-white);
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    padding: 16px;
    z-index: 1000;
}

    .header-search-dropdown.is-open {
        display: block;
    }

/* ── Header 會員下拉選單 ── */
.header-member-dropdown::before {
    content: "";
    position: absolute;
    bottom: 100%;
    right: 44%;
    border-width: 0 8px 8px 8px;
    border-style: solid;
    border-color: transparent transparent var(--color-dark-yellow) transparent;
}
.header-member-dropdown {
    display: none;
    position: absolute;
    top: 90%;
    background: var(--color-dark-yellow);
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    padding: 0;
    z-index: 1000;
}

    .header-member-dropdown.is-open {
        display: block;
    }

.header-member-dropdown__logout {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 34px;
    border-radius: 24px;
    color: var(--color-white);
    text-decoration: none;
    font-size: 16px;
    font-weight: 400;
    transition: background 0.2s;
    white-space: nowrap;
}

    .header-member-dropdown__logout:hover {
        background: rgba(255, 255, 255, 0.15);
        color: var(--color-white);
    }
/* =========================================
   7. Footer 專用樣式
   ========================================= */
:root {
    --color-footer: #1D1611;
}

/* --- 7.1 主容器 --- */
.footer-main {
    position: relative;
    z-index: 1;
    background:white;
}
.footer-inner {
    display: flex;
    align-items: center;
    gap: 96px;
    margin: 0 auto;
    padding: 66px 60px 30px;
    max-width:1440px;
}

/* --- 7.2 Logo --- */
.footer-logo-col {
    flex-shrink: 0;
}

.footer-logo-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
}

.footer-logo-img {
    height: 154px;
    width:115px;
}

.footer-logo-text {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 4px;
}


/* --- 7.3 資訊欄位群組 --- */
.footer-info-group {
    display: flex;
    flex: 1;
    justify-content: space-between;
    gap: 24px;
}

.footer-info-col {
    flex: 1;
    min-width: 0;
}

.footer-col-title {
    font-size: 20px;
    font-weight: 600;
    color: var(--color-text);
    margin-bottom: 12px;
}

.footer-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

    .footer-list li {
        color: var(--color-text);
        font-size: 16px;
        font-weight: 500;
        line-height: 1.6;
    }

        .footer-list li a {
            color: var(--color-text);
            text-decoration: none;
            transition: color 0.2s;
        }

            .footer-list li a:hover {
                color: var(--color-logo-yellow);
            }

.footer-arrow {
    color: var(--color-text);
    margin-right: 4px;
}

/* --- 7.4 關於我們：2 欄排列 --- */
.footer-info-col:first-child .footer-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 20px;
    max-width:200px;
}

/* --- 7.5 QR Code --- */
.footer-app-col {
    flex: 0 0 auto;
    width: auto;
}

.footer-qrcode {
    width: 80px;
    height: 80px;
    border-radius: 6px;
}

/* --- 7.6 底部列 --- */
.footer-bottom {
    margin: 0 auto; 
    padding: 0 80px 24px;
}

.footer-bottom-divider {
    height: 1px;
    background-color: #937C61;
    margin: 32px 0 16px;
}

.footer-bottom-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.footer-policy a {
    color: #937C61;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    transition: opacity 0.2s;
}

    .footer-policy a:hover {
        opacity: 0.7;
    }

.footer-policy-sep {
    color: #937C61;
    margin: 0 8px;
    font-size: 14px;
}

.footer-social {
    display: flex;
    align-items: center;
    gap: 12px;
}

.footer-social-label {
    color: #937C61;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 1px;
    margin-right: 4px;
}

.footer-social-icon {
    width: 28px;
    height: 28px;
}

    .footer-social-icon:hover {
        opacity: 0.7;
    }

.footer-copyright {
    color: #937C61;
    font-size: 12px;
}

.hover-text-yellow:hover {
    color: #937C61 !important;
    transition: color 0.3s ease;
}

.footer-bottom-left {
    display: flex;
    align-items: center;
    gap: 0;
}

.footer-sep-social {
    margin: 0 12px;
}

/* =========================================
   8. 首頁 (Home) 專用樣式
   ========================================= */

/* --- 8.0 共用容器 --- */
.home-container {
    max-width: 1024px;
    width: 100%;
    position: relative;
    margin: 0 auto;
    padding: 0;
}

.home-vertical-title {
    position: absolute;
    top: 0;
    right: 100%;
    margin-right: 3.5rem;
    white-space: nowrap;
    display: flex;
    flex-direction: row-reverse;
    align-items: flex-start;
    padding-top: 1.5rem !important;
}

    .home-vertical-title::before {
        content: "";
        position: absolute;
        top: 0px;
        left: 75%;
        transform: translateX(-50%);
        width: 232px;
        height: 140px;
        background: url('../images/home-title-background.png') no-repeat center top;
        background-size: contain;
        filter: none;
        z-index: -1;
        filter: blur(6px);
    }

/* --- 8.1 Carousel 輪播圖 --- */
.home-carousel-img {
    aspect-ratio: 1375 / 700;
    object-fit: cover;
    width: 100%;
    border-radius: 0 0 150px 150px;
}

.slick-carousel-home .slick-list {
    border-radius: 0 0 150px 150px;
    padding: 0 31px;
    overflow: hidden;
}


.slick-dots-horizontal li button {
    font-size: 0;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.5);
    border: 5px solid transparent;
    padding: 0;
    cursor: pointer;
    transition: all 0.3s ease;
}

.slick-dots-horizontal li.slick-active button {
    background-color: var(--color-white);
    border: 5px solid var(--color-white);
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.4);
}

.slick-dots-horizontal {
    position: absolute;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    display: flex !important;
    flex-direction: row;
    gap: 10px;
    list-style: none;
    margin: 0;
    padding: 0;
    z-index: 10;
}
/* --- 8.2 熱門搜尋 --- */
.news-section-bg {
    position: relative;
}


.news-type-card {
    display: block;
}
.news-type-img-overlay {
    position: absolute;
    inset: 0;
    background-color: #FFF0C033;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.news-type-card:hover .news-type-img-overlay {
    opacity: 1;
}

.news-type-img-wrap {
    overflow: hidden;
    border-radius: 6px;
}

.news-type-img {
    aspect-ratio: 300 / 213;
    object-fit: cover;
    width: 100%;
    transition: transform 0.3s ease;
}

.news-type-card:hover .news-type-img {
    transform: scale(1.05);
}

.news-type-name-wrap {
    display: inline-flex;
    flex-direction: column;
}

.news-type-underline {
    width: 40px;
    height: 3px;
    background-color: var(--color-dark-yellow);
    margin-top: 4px;
    border-radius: 2px;
    transition: width 0.3s ease;
}

.news-type-card:hover .news-type-underline {
    width: 100%;
}

/* --- 8.3 品牌導覽 --- */
.brand-section-bg {
    position: relative;

}
    .brand-section-bg::after {
        content: "";
        position: absolute;
        top: 0%;
        bottom: -3rem;
        left: 0;
        right: 0;
        background-image: url('../images/circle-orange.png');
        background-size: 30%; /* 在這裡調整數值，例如改為 50% 或 200px */
        background-position: center;
        background-repeat: no-repeat;
        z-index: -1;
        opacity:0.3;
    }
.brand-card {
    transition: background-color 0.3s ease;
    aspect-ratio: 1 / 1;
    background-color: white;
    position: relative;
}

.brand-en {
    font-size: 16px;
    font-weight: var(--font-weight-bold);
    line-height: 25px;
    letter-spacing: 1px;
    position: absolute;
    top: 12px;
    right: 1px;
    display: flex;
    flex-direction: column;
    align-items: start;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    text-align: left;
    justify-content: flex-start;
    margin: 0 !important;
    pointer-events: none;
    max-height: 100%;
}

.brand-icon-wrap {
    width: 90px;
    height: 90px;
    position: relative;
    z-index: 1;
}

    .brand-icon-wrap::before {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: 50%;
        background-color: transparent;
        z-index: -1;
        transition: background-color 0.3s ease, transform 0.3s ease;
    }

.home-brand-icon {
    width: 70px;
    height: 70px;
}

.brand-card:hover {
    background-color: #F9F4A7;
}

    .brand-card:hover .brand-icon-wrap::before {
        background-color: var(--color-white);
        transform: scale(1.22);
    }

    .brand-card:hover .brand-title-name {
        color: var(--color-logo-orange) !important;
    }

/* --- 8.4 樓層介紹 --- */
.floor-section-bg {
    position: relative;
}

    .floor-section-bg::before {
        content: "";
        position: absolute;
        width: 1100px;
        height: 829px;
        background-image: url('../images/circle-orange.png');
        background-size: contain;
        opacity: 0.3;
        background-repeat: no-repeat;
        z-index: -1;
        top: 5rem;
        left: -100px;
    }

    .floor-section-bg::after {
        content: "";
        position: absolute;
        width: 550px;
        height: 550px;
        background-image: url('../images/circle-orange.png');
        background-size: contain;
        opacity: 0.1;
        background-repeat: no-repeat;
        z-index: -1;
        transform: rotate(-170deg);
        top: -170px;
        bottom: 0;
        right: -100px;
    }

.floor-glass-container {
    background-color: rgba(255, 255, 255, 0.7);
    border-radius: 10px;
}

.floor-brand-container {
    max-width: 349px;
}

.brand-list {
    padding-left: 0;
    margin-bottom: 0;
}

    .brand-list li {
        list-style: none;
        display: flex;
        align-items: center;
        gap: .4rem;
    }

        .brand-list li::before {
            content: "•";
            flex-shrink: 0;
        }

.floor-img-pc,
.floor-img-md {
    position: relative;
    overflow: hidden;
}

    .floor-img-pc::after,
    .floor-img-md::after {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        background: linear-gradient(180deg, rgba(255,255,255,0) 50.1%, rgba(255,255,255,0) 92.51%, rgba(255,255,255,.4) 95.01%, #fff 100%), linear-gradient(0deg, rgba(255,255,255,0) 49.9%, rgba(255,255,255,0) 92.49%, rgba(255,255,255,.4) 94.99%, #fff 100%), linear-gradient(269.93deg, rgba(255,255,255,0) 50%, rgba(255,255,255,0) 94.17%, rgba(255,255,255,.4) 96.62%, #fff 99.08%), linear-gradient(90.02deg, rgba(255,255,255,0) 50%, rgba(255,255,255,0) 93.19%, rgba(255,255,255,.4) 95.59%, #fff 97.99%);
    }

.floor-img-mask {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.floor-img-pc {
    aspect-ratio: 577 / 385;
    max-width: 577px;
}

.floor-img-md {
    aspect-ratio: 614 / 409;
}

.nav-floor .nav-link {
    color: var(--color-text);
    background-color: transparent;
    transition: 0.3s;
    border-radius: 50px;
}

    .nav-floor .nav-link:hover,
    .nav-floor .nav-link.active {
        background-color: var(--color-dark-yellow) !important;
        color: var(--color-white) !important;
    }

/* --- 8.5 耐斯王子大飯店主題餐敘 / 館外設施 --- */
.outsite-section {
    background-image: url('../images/outsite-bg.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size:cover;
}
.outside-card {
    border: 1px solid var(--color-text);
    border-radius: 10px;
    padding: 20px 24px;
    gap: 16px;
    background-color: var(--color-white);
    transition: box-shadow 0.3s ease, transform 0.3s ease;
}

    .outside-card:hover {
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
        transform: translateY(-2px);
    }

.outside-card-icon {
    width: 60px;
    height: 60px;
    flex-shrink: 0;
}

    .outside-card-icon img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }
.outside-card-arrow {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: var(--color-text);
    color: var(--color-white);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 12px;
}

/* --- 共用工具 --- */
.outline-text {
    -webkit-text-stroke: 1px var(--color-text);
    color: transparent;
}

.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    max-height: 2.8em;
}

/* =========================================
   10. 側邊工具列 (Side Toolbar)
   ========================================= */
.side-toolbar-container {
    position: fixed;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    background-color: var(--color-logo-orange);
    z-index: 1040; /* 確保在一般內容之上，但不超過 Modal */
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 48px 15px;
    gap: 40px;
    /* 左上與左下圓角 */
    border-top-left-radius: 30px;
    border-bottom-left-radius: 30px;
}

.side-toolbar-icon {
    width: 30px;
    height: 30px;
    cursor: pointer;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

    .side-toolbar-icon:hover {
        transform: scale(1.1);
        opacity: 0.9;
    }
/* =========================================
   11. 列表頁通用 & News 列表 (List Pages)
   ========================================= */

/* --- Hero 區塊與麵包屑 --- */
.page-hero-section {
    height: 345px; /* 預設桌機版高度 */
}

.page-hero-bg {
    background: url('../images/page_hero_bg.jpg') left 75% / cover no-repeat;
    z-index: 0;
}
.page-hero-bg-dm {
    background: url('../images/dm_hero_bg.png') left 58% / cover no-repeat;
    z-index: 0;
}

.page-hero-bg-corporate-section {
    background: url('../images/corporate_section_hero_bg.jpg') left 75% / cover no-repeat;
    z-index: 0;
}
.page-hero-bg-service {
    background: url('../images/service_hero_bg.png') left 60% / cover no-repeat;
    z-index: 0;
}
.page-hero-bg-brand {
    background: url('../images/brand_hero_bg.jpg') left 75% / cover no-repeat;
    z-index: 0;
}
.page-hero-bg-news {
    background: url('../images/news_hero_bg.png') left 45% / cover no-repeat;
    z-index: 0;
}
.page-hero-bg-about {
    /* 30% 代表水平偏左，80% 代表垂直偏下 */
    background: url('../images/about_us_hero_bg.png') left 75% / cover no-repeat;
    z-index: 0;
}
.page-hero-bg-member-area {
    background: url('../images/member_area_hero_bg.png') left 55% / cover no-repeat;
    z-index: 0;
}

.page-search-box {
    width: 300px;
    max-width: 100%;
}

.hero-subtitle {
    position: relative;
    display: inline-block; /* 寬度等於文字寬度 */
}
.hero-subtitle::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: -15%; /* 左右各多一點 */
    width: 130%; /* 比文字寬 10% */
    height: 3px;
    background: #FFFFFF;
}

.title {
    position: relative;
    display: inline-block;
    padding-top: 12px;
    letter-spacing: 50px !important;
    /* 抵銷最後一個字右邊多出來的 50px */
    margin-right: -50px !important;
}
.custom-breadcrumb .breadcrumb-item + .breadcrumb-item::before {
    content: "";
    float: none;
    display: inline-flex;
    margin: 0 10px;
    align-self: center;
    /* 1. 設定你想要的 icon 大小 */
    width: 12px;
    height: 12px;
    /* 2. 替換成你的 SVG 檔案路徑 */
    background-image: url('../images/icons/icon_section_arrow.svg');
    /* 3. 確保圖片能完整塞入並置中 */
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.custom-breadcrumb.is-dm .breadcrumb-item + .breadcrumb-item::before {
    content: "";
    float: none;
    display: inline-flex;
    margin: 0 10px;
    align-self: center;
    width: 12px;
    height: 12px;
    background-image: url('../images/icons/icon_section_arrow.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    /* 💡 加上這行：先變全黑 (brightness(0))，再反轉成全白 (invert(1)) */
    filter: brightness(0) invert(1);
}
.breadcrumb-item + .breadcrumb-item {
    padding-left: 0px;
}

/* --- 桌機版 Tabs (分類選項) --- */
.news-tab-item {
    width: 208px;
    padding: 14px 0px;
    color: var(--color-gray2);
    font-size: 18px;
    font-weight: var(--font-weight-medium);
    transition: all 0.3s ease;
    border: 1px solid var(--color-light-gray);
    border-right: none;
    display: flex;
    align-items: center;
    justify-content: center;
}
.news-img-wrap {
    position: relative;
    overflow: hidden;
    border-radius: 6px;
}
.news-overlay {
    position: absolute;
    inset: 0;
    background-color: #FFF0C033;
    opacity: 0;
    transition: opacity 0.3s ease;
}
.news-date-line {
    height: 2px;
    background-color: var(--color-logo-yellow);
    width: 35%;
    transition: width 0.3s ease;
}

.news-card:hover .news-img-wrap img {
    transform: scale(1.05);
}

.news-card:hover .news-overlay {
    opacity: 1;
}

.news-card:hover .news-title {
    color: var(--color-dark-yellow) !important;
}

.news-card:hover .news-date-line {
    width: 100%;
}

.page-tab-container > *:last-child .news-tab-item,
.page-tab-container > a.news-tab-item:last-child {
    border-right: 1px solid var(--color-light-gray);
}

.news-tab-item:hover {
    color: var(--color-dark-yellow);
}

.news-tab-item.active {
    background-color: var(--color-dark-yellow);
    color: var(--color-white);
    border-color: var(--color-dark-yellow);
}

/* 桌機版 Tabs 的下拉選單 (Hover 觸發) */
.news-tab-dropdown:hover .dropdown-menu {
    display: block;
    margin-top: 0;
}

.news-tab-dropdown-menu {
    border-radius: 8px;
    min-width: 180px;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
}

.news-dropdown-item-wrap {
    position: relative;
}

.hover-bg-decorate:hover {
    background-color: var(--color-decorate);
}

/* --- News Grid 系統 (自動排版) --- */
.news-list-grid {
    display: grid;
    justify-content: center;
    justify-self:center;
    grid-template-columns: repeat(auto-fill, 320px); /* 預設桌機版 320px */
    gap: 40px; /* 預設桌機版間距 */
    max-width:1040px;
}

.news-list-card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
    aspect-ratio: 320 / 227; /* 預設桌機版比例 */
}

.list-new-tag {
    position: absolute;
    top: 95%;
    z-index: 1;
    background-color: var(--color-logo-yellow);
    border-radius: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    color: var(--color-text);
}

/* --- 分頁 Pagination --- */
.custom-pagination {
    max-width: 100%;
    flex-wrap: nowrap;
}
    .custom-pagination .page-nav-item {
        visibility: hidden;
    }

    .custom-pagination.pagination-ready .page-nav-item {
        visibility: visible;
    }
.arrow, .arrow-disable {
    display: inline-block;
    width: 8px;
    height: 8px;
}

.arrow {
    border-top: 2px solid var(--color-gray2);
    border-right: 2px solid var(--color-gray2);
}

.arrow-disable {
    border-top: 2px solid var(--color-light-gray);
    border-right: 2px solid var(--color-light-gray);
}

.arrow-left {
    transform: rotate(-135deg);
}

.arrow-right {
    transform: rotate(45deg);
}

.page-link-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    color: var(--color-text);
    text-decoration: none;
    font-size: 16px;
    transition: all 0.3s ease;
    border: 1px solid var(--color-light-gray);
}

    .page-link-btn:hover {
        border-color: var(--color-logo-orange);
        color: var(--color-logo-orange);
    }

    .page-link-btn.active {
        background-color: var(--color-logo-orange);
        color: var(--color-white);
        font-weight: var(--font-weight-semibold);
        border-color: var(--color-logo-orange);
    }

.page-ellipsis {
    pointer-events: none;
    cursor: default;
    border-color: transparent !important;
    background: transparent !important;
    color: var(--color-gray2);
}

    .page-ellipsis:hover {
        border-color: transparent !important;
        color: var(--color-gray2);
    }

.page-nav-dots {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 36px;
    color: var(--color-gray2);
    font-size: 16px;
    pointer-events: none;
    user-select: none;
}

.page-arrow-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    color: var(--color-gray2);
    text-decoration: none;
    font-size: 20px;
    transition: color .3s ease;
}

    .page-arrow-btn:hover .arrow {
        border-top-color: var(--color-logo-orange);
        border-right-color: var(--color-logo-orange);
    }

/* =========================================
   12. 頁籤與搜尋列對齊 & 懸浮排版
   ========================================= */
.page-tab-container {
    max-width: 1040px;
    margin: 0 auto;
    width: 100%;
}

.overlap-tab-wrapper {
    margin-top: -30px;
    position: relative;
    z-index: 10;
}


/* ---- 內容模板(BlockTemplate)相關 ---- */
/* --- 1. 基礎與共用文字規格 --- */
.ck-content p {
    overflow-wrap: break-word; 
    word-break: break-all;
    max-width: 100%; 
}

.ck-content img {
    max-width: 100%;
    height: auto;
}
.has-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    border-top: 1px solid var(--color-light-gray);
}

.block-h1,
.block-h2,
.content-text,
.image-bottom-text {
    font-family: "Noto Sans TC", sans-serif !important;
    color: var(--color-text);
    margin: 0;
    white-space:pre-line;
}

.block-h1 {
    font-size: 24px;
    font-weight: 700;
    letter-spacing: 1px;
}

.block-h2 {
    font-size: 18px;
    font-weight: 400;
    line-height: 23.97px;
    margin-top: 8px;
}

.content-text {
    font-size: 18px;
    line-height: 25.2px;
}

.image-bottom-text {
    font-size: 14px;
    text-align: right;
    margin-top: 4px;
    line-height: 23.97px;
}

/* --- 2. Template 1 樣式 --- */
.template-1 {
    width: 100%;
    margin: 0 auto;
}

.t1-image-container {
    display: flex;
    column-gap: 24px;
    margin-top: 24px;
}

.t1-image-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    max-width: 462px;
}

.t1-default-img {
    width: 100%;
    aspect-ratio: 462 / 363 !important;
    background-color: transparent !important;
    display: flex;
    justify-content: center;
    align-items: center;
}

.t1-content-container {
    margin-top: 24px;
}

/* --- 3. Template 2 樣式 --- */
.template-2 {
    width: 100%;
    margin: 0 auto;
}

.template-2-top-row {
    display: flex;
    column-gap: 36px;
    align-items: center;
}

.template-2-image-wrapper {
    flex: 0 0 558px;
    display: flex;
    flex-direction: column;
}

.template-2-default-img {
    width: 100%;
    height: 438px;
    background-color: transparent !important;
    display: flex;
    justify-content: center;
    align-items: center;
}

.template-2-header-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    text-align: left;
}

.template-2-content-container {
    margin-top: 24px;
}

/* --- 4. Template 3 樣式 --- */
.template-3 {
    width: 100%;
    margin: 0 auto;
}

.template-3-top-row {
    display: flex;
    column-gap: 36px;
    align-items: center;
}

.template-3-image-wrapper {
    flex: 0 0 390px;
    display: flex;
    flex-direction: column;
}

.template-3-default-img {
    width: 100%;
    aspect-ratio: 390 / 440 !important;
    background-color: transparent !important;
    display: flex;
    justify-content: center;
    align-items: center;
}

.template-3-header-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    text-align: left;
}

.template-3-content-container {
    margin-top: 24px;
}

/* --- 5. Template 4 樣式 --- */
.template-4 {
    width: 100%;
    margin: 0 auto;
}

.t4-image-container {
    display: flex;
    column-gap: 24px;
    margin-top: 24px;
}

.t4-image-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    max-width: 462px;
}

.t4-default-img {
    width: 100%;
    aspect-ratio: 462 / 550 !important;
    background-color: transparent !important;
    display: flex;
    justify-content: center;
    align-items: center;
}

.t4-content-container {
    margin-top: 24px;
}

/* --- 5. Template 5 樣式 --- */
/* Template 5 專屬樣式 */
.template-5 {
    width: 100%;
    margin: 0 auto;
}

.t5-content-container {
    margin-top: 24px;
}

.template-5 img {
    max-width: 100%;
    height: auto;
    display: block;
}

.full-img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 關鍵：確保圖片不變形且填滿指定高度 */
    display: block;
    border-radius: 6px;
}

.content-block {
    margin-top: 32px;
}

/* =========================================
   13. News 內頁 資訊卡片 (News Info Card)
   ========================================= */
.news-article-container {
    padding-top: 50px;
    padding-bottom: 50px;
}

.content-limit-container {
    max-width: 1099px;
    min-width: 1099px;
}

.news-info-card {
    display: flex;
    align-items: stretch; /* 💡 修改這裡：從 flex-start 改為 stretch，讓右側內容區塊與左側圖片一樣高 */
    gap: 40px;
    background-color: var(--color-white);
    border-radius: 10px;
    padding: 32px;
    width: 100%;
    box-shadow: 1px 1px 10px rgba(142, 142, 142, 0.15);
}

.news-info-img-wrap {
    flex: 0 0 420px;
    max-width: 420px;
    width: 100%;
    border-radius: 6px;
    overflow: hidden;
}

.news-info-img {
    width: 100%;
    aspect-ratio: 420 / 265;
    object-fit: cover;
    display: block;
}

.news-info-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    text-align: left;
}

/* --- 分享按鈕 & 選單 --- */
.news-share-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 9px 16px;
    border-radius: 6px;
    border: 1px solid var(--color-light-gray);
    color: var(--color-gray2);
    font-size: 14px;
    font-weight: var(--font-weight-medium);
    white-space: nowrap;
    transition: all 0.2s ease;
    background-color: var(--color-white);
}

.news-share-menu {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    background: var(--color-white);
    border: 1px solid var(--color-light-gray);
    border-radius: 8px;
    padding: 8px;
    min-width: 160px;
    box-shadow: 1px 1px 10px rgba(142, 142, 142, 0.25);
    z-index: 20;
    list-style: none;
    margin: 0;
}

    .news-share-menu.show {
        display: block;
    }

    .news-share-menu li a {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 8px;
        border-radius: 6px;
        color: var(--color-text);
        font-size: 14px;
    }

        .news-share-menu li a:hover {
            background-color: var(--color-decorate);
        }


.news-content-type-title {
    margin-top: 100px;
}

/* =========================================
   15. 櫃位導覽 (Brand List)
   ========================================= */

.brand-type-grid {
    gap: 30px;
    max-width: 1230px;
}

.brand-type-item {
    min-width: 110px; /* 原本 width: 110px 改成 min-width */
    width: auto;
    gap: 20px;
}

.brand-type-icon-circle {
    width: 90px;
    height: 90px;
    box-shadow: 1px 1px 10px rgba(142, 142, 142, 0.2);
    transition: background-color 0.3s ease;
}

    .brand-type-icon-circle img {
        width: 50px;
        height: 50px;
        transition: filter 0.3s ease;
    }

.brand-type-name {
    color: var(--color-gray2);
    transition: color 0.3s ease;
    white-space: nowrap;
}

/* Hover 與 Active：圓底變橘、圖示反白、文字變橘 */
.brand-type-item:hover .brand-type-icon-circle,
.brand-type-item.active .brand-type-icon-circle {
    background-color: var(--color-logo-orange) !important;
}

    .brand-type-item:hover .brand-type-icon-circle img,
    .brand-type-item.active .brand-type-icon-circle img {
        filter: brightness(0) invert(1);
    }

.brand-type-item:hover .brand-type-name,
.brand-type-item.active .brand-type-name {
    color: var(--color-logo-orange) !important;
}

.brand-info {
    flex: 1 1 auto;
    min-width: 0;
}

.brand-sort-btn {
    color: var(--color-text);
    transition: color 0.3s ease;
}

    .brand-sort-btn:hover,
    .brand-sort-btn.active {
        color: var(--color-dark-yellow);
    }

/* --- 品牌類別篩選：md/sm 輪播 --- */
.brand-type-track {
    gap: 30px; /* JS 會依斷點動態覆寫 (md:30 / sm:8) */
    will-change: transform;
}

.brand-type-dots {
    gap: 10px;
    margin-top: 30px;
}

.brand-type-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #F9B4004D;
    border: none;
    padding: 0;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

    .brand-type-dot.active {
        background-color: var(--color-logo-orange);
    }

/* --- 類別說明列 --- */
.brand-type-header-icon {
    width: 70px;
    height: 70px;
    object-fit: contain;
}

.brand-list-container {
    max-width: 1040px;
    padding-left:0px;
    padding-right:0px;
}

/* --- 品牌列表 Grid --- */
.brand-content-wrapper {
    width: 100%; /* JS 計算前的預設值，避免閃動 */
}

.brand-list-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, 230px);
    gap: 40px;
}

.brand-list-img-wrap {
    border: 1px solid var(--color-light-gray);
    border-radius: 6px;
    transition: border-color 0.3s ease;
}

.brand-list-card-img {
    aspect-ratio: 238 / 150;
}
.brand-list-name {
    text-align: right;
    word-break: break-word transition: color 0.3s ease;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    width: 100%;
}

/* Hover / 點擊：名稱變黃、圖片外框變橘 */
.brand-list-card:hover .brand-list-img-wrap,
.brand-list-card:active .brand-list-img-wrap {
    border-color: var(--color-logo-orange);
}

.brand-list-card:hover .brand-list-name,
.brand-list-card:active .brand-list-name {
    color: var(--color-dark-yellow) !important;
}

/* --- 樓層篩選：圓圈內顯示 FloorLocation 文字 --- */


.floor-circle-text {
    color: var(--color-dark-yellow);
    transition: color 0.3s ease;
}

.brand-type-item:hover .floor-circle .floor-circle-text,
.brand-type-item.active .floor-circle .floor-circle-text {
    color: var(--color-white);
}

.brand-type-track .brand-type-item.is-offpage {
    visibility: hidden;
}

/* --- 樓層說明列：左側大字 FloorLocation --- */
.floor-header-location {
    font-size: 48px;
    font-weight: var(--font-weight-semibold);
    line-height: 1;
    letter-spacing: 1.5px;
}

/* --- 品牌內頁：圖片輪播 --- */
.brand-page-carousel {
    position: relative;
    width: 100%;
    border-radius: 6px;
    overflow: hidden;
}


.brand-carousel-img {
    display: block;
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.5s ease;
    pointer-events: none;
}

    .brand-carousel-img.active {
        opacity: 1;
        pointer-events: auto;
        position: relative; /* active 那張用正常流撐起容器高度 */
    }

.brand-carousel-dots {
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
    gap: 8px;
    z-index: 5;
}

.brand-carousel-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.6);
    border: none;
    padding: 0;
    cursor: pointer;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
    transition: background-color 0.3s ease;
}

    .brand-carousel-dot.active {
        background-color: var(--color-white);
    }

/* --- 品牌內頁：說明文字 (純文字保留換行) --- */
.brand-description {
    white-space: pre-line;
    width: 100%;
    padding-top: 8px;
}

/* =========================================
   16. 貼心服務(CusomterService)
   ========================================= */

.customer-service-list-name {
    transition: color 0.3s ease;
}

.customer-service-list-img-wrap {
    border: 1px solid transparent;
    border-radius: 6px;
    transition: border-color 0.3s ease;
}

.brand-list-card:hover .customer-service-list-img-wrap,
.brand-list-card:active .customer-service-list-img-wrap {
    border-color: var(--color-logo-orange);
}


.brand-list-card:hover .customer-service-list-name,
.brand-list-card:active .customer-service-list-name {
    color: var(--color-logo-orange) !important;
}

/* =========================================
   17. 常見問題 (QA Accordion)
   ========================================= */
.accordion-item {
    padding: 30px 40px 30px 40px;
}
/* 預設 (收合)：page-background 底色 */
.qa-accordion .accordion-item {
    background-color: var(--color-page-background);
    transition: background-color 0.3s ease;
}

.qa-accordion .accordion-button {
    color: var(--color-text);
    background-color: transparent; /* 跟隨 item 的底色 */
}

    /* 展開：整個 item 變白底、問題文字變 dark-yellow */
    .qa-accordion .accordion-button:not(.collapsed) {
        color: var(--color-dark-yellow);
        background-color: transparent;
        box-shadow: none;
    }

.qa-accordion .accordion-item:has(.accordion-button:not(.collapsed)) {
    background-color: var(--color-white);
}

/* 右側 +/− 指示符號 */
.qa-accordion .accordion-button::after {
    content: "";
    width: 20px;
    height: 20px;
    background-image: url('../images/icon_plus2.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    transition: none;
    transform: none;
}

.qa-accordion .accordion-button:not(.collapsed)::after {
    background-image: url('../images/icon_minus2.png');
}

/* Answer 為純文字，保留資料中的換行 */
.qa-answer {
    white-space: pre-line;
}

.qa-answer img{
   max-width:100%;
   height:auto;
}

/* =========================================
   18. 卡片專區 (Membership Cards)
   ========================================= */
.member-card {
    background-color: transparent;
    border: 1px solid transparent; /* 預留邊框空間，Hover 時不位移 */
    transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

/* --- 圖片：三斷點統一 320/202 比例，寬度依斷點調整 --- */
.member-card-img-wrap {
    width: 320px;
}

.member-card-img {
    aspect-ratio: 320 / 202;
    object-fit: cover;
}

/* --- Hover 遮罩 (預設隱藏) --- */
.member-card-overlay {
    inset: 0;
    background-color: #00000066;
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 2; /* 保險：確保蓋在圖片上 */
}

.member-card-arrow {
    width: 44px;
    height: 44px;
    background-color: var(--color-dark-yellow);
}

.member-card-arrow-icon {
    border-top-color: var(--color-white);
    border-right-color: var(--color-white);
    margin-left: -4px; /* 視覺置中修正 (箭頭圖形重心偏右) */
}

/* --- Hover / 點擊效果：白底 + 邊框 + 遮罩浮現 --- */
.member-card:hover,
.member-card:active {
    background-color: var(--color-white);
    border-color: var(--color-dark-yellow);
    box-shadow: 1px 1px 10px rgba(142, 142, 142, 0.15);
}

    .member-card:hover .member-card-overlay,
    .member-card:active .member-card-overlay {
        opacity: 1;
    }

/* =========================================
   19. 集團專區 (Corporate Section)
   ========================================= */

.corporate-section-item-line {
    height: 2px;
    background-color: var(--color-logo-yellow);
    width: 16%;
    transition: width 0.3s ease;
}

.corporate-container {
    padding-left: 0px !important;
    padding-right: 0px !important;
    max-width:1040px;
}

.corporate-card-img {
    aspect-ratio: 230 / 157; /* 與 brand-list-card 一致，依實際設計稿高度可微調 */
    object-fit: contain;
    background-color: var(--color-white);
    transition: transform 0.3s ease;
}


.corporate-card-name {
    transition: color 0.3s ease;
}

/* Hover：Logo 微放大、名稱變色、底線延伸 (沿用 news-date-line 動畫) */
.corporate-card:hover .corporate-card-img {
    transform: scale(1.05);
}

.corporate-card:hover .corporate-card-name {
    color: var(--color-dark-yellow) !important;
}

.corporate-card:hover .news-date-line {
    width: 100%;
}

/* =========================================
   20. 客製頁面(Custom Page)
   ========================================= */
.custom-page-container {
    padding: 50px 0px 50px 0px;
    max-width: 1040px;
}

.custom-page-has-content {
    border-top: 1px solid var(--color-light-gray);
    padding-top: 50px;
    margin-top: 16px;
}

.custom-page-container p {
    font-size: 18px;
    font-weight: var(--font-weight-medium);
    line-height: 32px;
    letter-spacing: 1.2px;
    color: var(--color-gray2);
    margin: 0px;
}

.custom-page-container h1,
.custom-page-container h2,
.custom-page-container h3,
.custom-page-container h4,
.custom-page-container h5 {
    margin: 0;
}

/* =========================================
   21. 線上DM (Online DM)
   ========================================= */
.dm-container {
    padding-left: 200px !important;
    padding-right: 200px !important;
    display: flex;
    justify-content: center;
}

.dm-list-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, 284px); /* xl：284px，間距 94px */
    gap: 48px 94px; /* 上下 50px、左右 94px */
    max-width:1040px;
}

.dm-card-img-wrap {
    border: 2px solid transparent; /* 預留邊框空間，Hover 時不位移 */
    border-radius: 6px;
    transition: border-color 0.3s ease;
}

.dm-card-img {
    aspect-ratio: 284 / 409; /* 三斷點比例幾乎一致，統一以 xl 為準 */
    object-fit: cover;
}

.dm-card-name {
    transition: color 0.3s ease;
}

/* Hover / 點擊：圖片黃框、名稱變色、底線延伸 */
.dm-card:hover .dm-card-img-wrap,
.dm-card:active .dm-card-img-wrap {
    border-color: var(--color-logo-yellow);
}

.dm-card:hover .dm-card-name,
.dm-card:active .dm-card-name {
    color: var(--color-dark-yellow) !important;
}

.dm-card:hover .news-date-line,
.dm-card:active .news-date-line {
    width: 100%;
}

/* --- DM 內頁 (Dm Page) --- */
.dm-page-container {
    max-width: 1040px; /* xl */
    width: 100%;
}

/* 主圖：多張疊放，只顯示 active；依寬度等比縮放不變形 */
/* 主圖：多張疊放，只顯示 active */
.dm-main-img-wrap {
    display: none;
    max-width: 100%;
    position: relative;
}

    .dm-main-img-wrap.active {
        display: block;
    }

/* 圖片容器：放大時可拖拉 */
.dm-zoom-viewport {
    overflow: hidden;
    border-radius: 8px;
    position: relative;
    touch-action: none;
}

    .dm-zoom-viewport.is-zoomed {
        cursor: grab;
    }

    .dm-zoom-viewport.is-dragging {
        cursor: grabbing;
    }

.dm-main-img {
    max-width: 100%;
    height: auto;
    display: block;
    transition: transform 0.15s ease;
    transform-origin: 0 0;
    pointer-events: none;
    user-select: none;
}

/* 右下角縮放控制列 */
.dm-zoom-bar {
    position: absolute;
    right: 12px;
    bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-radius: 20px;
    padding: 6px 14px;
    z-index: 10;
    user-select: none;
}

.dm-zoom-bar__label {
    color: #fff;
    font-size: 12px;
    font-weight: 500;
    min-width: 36px;
    text-align: center;
}

.dm-zoom-bar__slider {
    -webkit-appearance: none;
    appearance: none;
    width: 100px;
    height: 4px;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 2px;
    outline: none;
    cursor: pointer;
}

    .dm-zoom-bar__slider::-webkit-slider-thumb {
        -webkit-appearance: none;
        appearance: none;
        width: 16px;
        height: 16px;
        border-radius: 50%;
        background: #fff;
        cursor: pointer;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
    }

    .dm-zoom-bar__slider::-moz-range-thumb {
        width: 16px;
        height: 16px;
        border-radius: 50%;
        background: #fff;
        cursor: pointer;
        border: none;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
    }

.dm-zoom-bar__btn {
    background: none;
    border: none;
    color: #fff;
    font-size: 18px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    padding: 0 2px;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .dm-zoom-bar__btn:hover {
        color: var(--color-dark-yellow);
    }

.dm-thumbs-panel {
    background-color: #FFFEF8 !important;
    border: 0.5px solid #DEDBCF;
    border-radius: 10px;
}
/* 縮圖列：橫向捲動 + 拖曳 */
.dm-thumbs-scroll {
    overflow-x: auto;
    gap: 30px; /* xl/md 間距 30 */
    cursor: grab;
    scroll-behavior: smooth;
}

    .dm-thumbs-scroll.is-dragging {
        cursor: grabbing;
        scroll-behavior: auto; /* 拖曳中要即時跟手，不要平滑 */
        user-select: none;
    }

.dm-thumb-item {
    width: 170px; /* xl/md：170×170 */
    height: 170px;
    padding: 10px !important;
    border: 1px solid transparent;
    transition: border-color 0.3s ease;
    cursor: pointer;
    border-radius: 12px !important;
}

    .dm-thumb-item.active {
        border-color: var(--color-dark-yellow); /* 當前頁：黃框 */
        background-color: #FFDB0133 !important;
    }

.dm-thumb-img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 縮圖直接裁切成正方形 */
    pointer-events: none; /* 拖曳時不要被 img 攔截事件 */
}

/* =========================================
   22. 交通資訊 (Traffic Info / CustomPage 內容)
   ========================================= */
.traffic-section-gap {
    margin-top: 60px;
}

/* --- Google 地圖 --- */
.traffic-map-wrap iframe {
    width: 100%;
    aspect-ratio: 1042 / 662;
    border: 0;
    border-radius: 6px;
    display: block;
}

/* --- 圖文兩欄 Row --- */
.traffic-row {
    display: flex;
    gap: 40px;
    align-items: flex-start;
    margin-top: 40px;
}

.traffic-row-reverse {
    flex-direction: row-reverse;
}

.traffic-row-img {
    flex: 0 0 48.2%;
    max-width: 48.2%;
}

    .traffic-row-img img {
        width: 100%;
        height: auto;
        border-radius: 6px;
        display: block;
        aspect-ratio: 502 / 375;
    }

.traffic-row-body {
    flex: 1;
    min-width: 0;
}

.traffic-h3 {
    font-size: 24px;
    font-weight: var(--font-weight-semibold);
    letter-spacing: 1.3px;
    color: var(--color-text);
    margin-bottom: 8px !important;
}

.traffic-sub {
    color: var(--color-dark-yellow) !important;
    margin-top: 16px !important;
}

/* --- 停車資訊：橘色圓圈編號清單 --- */
.traffic-num-list {
    list-style: none;
    counter-reset: tnum;
    padding: 0;
    margin: 16px 0 0 0;
}

    .traffic-num-list li {
        counter-increment: tnum;
        display: flex;
        align-items: center;
        gap: 12px;
        font-size: 18px;
        font-weight: var(--font-weight-medium);
        line-height: 32px;
        letter-spacing: 1.2px;
        color: var(--color-gray2);
        margin-bottom: 8px;
    }

        .traffic-num-list li::before {
            content: counter(tnum);
            width: 26px;
            height: 26px;
            border-radius: 50%;
            background-color: var(--color-logo-orange);
            color: var(--color-white);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 15px;
            flex-shrink: 0;
        }

.traffic-notes {
    margin-top: 24px;
}

/* --- 深色背景時刻表區 (滿版出) --- */
.traffic-dark-section {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-top: 60px;
    padding: 60px 24px;
    background: linear-gradient(rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.55)), url('../images/traffic_dark_bg.png') center/cover no-repeat;
}

.traffic-dark-title {
    text-align: center;
    color: var(--color-white) !important;
    font-size: 32px !important;
    font-weight: var(--font-weight-semibold) !important;
    letter-spacing: 1.5px !important;
    margin-bottom: 40px !important;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
}

    .traffic-dark-title span {
        font-size: 16px;
        font-weight: var(--font-weight-medium);
    }

.traffic-card-list {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 40px;
}

/* --- 預設狀態：毛玻璃卡 --- */
.traffic-card {
    background-color: rgba(255, 255, 255, 0.75);
    /*    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);*/
    border: 1px solid transparent;
    border-radius: 10px;
    padding: 48px 32px;
    width: 380px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    text-decoration: none;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

.traffic-card-icon {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    background-color: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
    transition: background-color 0.3s ease;
}

    .traffic-card-icon img {
        width: 48px;
        height: 48px;
        transition: filter 0.3s ease;
    }

.traffic-card-title {
    font-size: 24px !important;
    font-weight: var(--font-weight-semibold) !important;
    letter-spacing: 1.3px !important;
    color: var(--color-text) !important;
    display: flex;
    align-items: center;
    gap: 10px;
}

    .traffic-card-title span {
        font-size: 18px;
        font-weight: var(--font-weight-medium);
        color: var(--color-gray2);
    }

.traffic-card-desc {
    color: var(--color-gray2) !important;
    font-size: 16px !important;
    line-height: 28px !important;
    letter-spacing: 1px !important;
    margin: 24px 0 40px 0 !important;
}

/* 按鈕預設：描邊樣式 */
.traffic-card-btn {
    display: inline-block;
    border: 1px solid var(--color-gray2);
    color: var(--color-gray2);
    background-color: transparent;
    border-radius: 50px;
    padding: 8px 28px;
    font-size: 16px;
    letter-spacing: 1px;
    margin-top: auto;
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}


/* --- Hover 狀態：白底黃框、icon 圓底反白、按鈕實心 --- */
.traffic-card:hover {
    background-color: var(--color-white);
    border-color: var(--color-dark-yellow);
}

    .traffic-card:hover .traffic-card-icon {
        background-color: var(--color-logo-orange);
    }

        .traffic-card:hover .traffic-card-icon img {
            filter: brightness(0) invert(1);
        }

    .traffic-card:hover .traffic-card-btn {
        background-color: var(--color-dark-yellow);
        border-color: var(--color-dark-yellow);
        color: var(--color-white);
    }


.traffic-card-btn:hover {
    color: var(--color-white);
}

/* --- 停車優惠 --- */
.traffic-discount-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column; /* xl：兩組直向堆疊 */
    gap: 32px;
}


.traffic-row-discount-img {
    flex: 0 0 65%;
    max-width: 65%;
}

    .traffic-row-discount-img img {
        width: 100%;
        height: auto;
        border-radius: 6px;
        display: block;
        aspect-ratio: 683 / 507;
    }


.traffic-discount-col {
    flex: 1;
    min-width: 0;
}

.traffic-discount-title {
    font-size: 20px !important;
    font-weight: var(--font-weight-semibold) !important;
    color: var(--color-text) !important;
    margin-bottom: 12px !important;
}

.traffic-discount-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 16px;
    font-size: 16px;
    font-weight: var(--font-weight-medium);
    line-height: 34px;
    letter-spacing: 1px;
    color: var(--color-gray2);
}

    .traffic-discount-row strong {
        color: var(--color-dark-yellow);
        font-size: 20px;
        font-weight: var(--font-weight-semibold);
        margin: 0 2px;
    }

    .traffic-discount-row .traffic-amount {
        font-size: 22px;
    }

.traffic-discount-note {
    margin-top: 8px !important;
    font-size: 16px !important;
    color: var(--color-gray2) !important;
}

/* =========================================
   23. 關於我們 (About Us / CustomPage 內容)
   ========================================= */
.about-section-gap {
    margin-top: 60px !important;
}

/* --- 圖文兩欄 Row --- */
.about-row {
    display: flex;
    gap: 48px;
    align-items: flex-start;
}

.about-row-reverse {
    flex-direction: row-reverse;
}
    /* --- 劍湖山圖片：背後的不規則色塊裝飾 --- */
    .about-row-reverse .about-row-img {
        position: relative;
    }

        /* 主色塊：比圓圖大一圈、偏右上 */
        .about-row-reverse .about-row-img::before {
            content: "";
            position: absolute;
            top: -12%;
            right: -15%;
            width: 144%;
            height: 144%;
            background: url('../images/about_blob.png') center/contain no-repeat;
            z-index: -1;
            pointer-events: none;
        }

.about-row-img {
    flex: 0 0 44%;
    max-width: 44%;
}

    .about-row-img img {
        width: 100%;
        height: auto;
        border-radius: 6px;
        display: block;
    }

    /* 圓形圖 (劍湖山摩天輪) */
    .about-row-img .about-img-circle {
        aspect-ratio: 1 / 1;
        object-fit: cover;
        border-radius: 50%;
    }

.about-row-body {
    flex: 1;
    min-width: 0;
}

/* --- 小標 About Nice / 大標 --- */
.about-label {
    font-size: 16px !important;
    letter-spacing: 1px !important;
    color: var(--color-gray2) !important;
    margin-bottom: 4px !important;
}

    .about-label span {
        color: var(--color-dark-yellow);
    }

.about-h2 {
    font-size: 28px !important;
    font-weight: var(--font-weight-semibold) !important;
    letter-spacing: 1.4px !important;
    line-height: 1.4 !important;
    color: var(--color-text) !important;
    margin-bottom: 16px !important;
}

/* 段落間距 (custom-page-container p 的 margin 是 0，用這個補) */
.about-p-gap {
    margin-top: 20px !important;
}

/* 內文橘色強調字 */
.about-highlight {
    color: var(--color-dark-yellow);
}

/* --- 里程碑面板 --- */
.milestone-section {
    background-color: #FBF5E3;
    border-radius: 10px;
    padding: 50px 60px;
}

.milestone-title {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    font-size: 28px !important;
    font-weight: var(--font-weight-semibold) !important;
    letter-spacing: 1.4px !important;
    color: var(--color-text) !important;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--color-light-gray);
    margin-bottom: 24px !important;
}

    .milestone-title span {
        font-size: 16px;
        font-weight: var(--font-weight-medium);
        color: var(--color-gray2);
    }

.milestone-intro {
    margin-bottom: 48px !important;
}

/* --- 時間軸 --- */
.milestone-list {
    position: relative;
    max-width: 760px;
    margin: 0 auto;
}

    /* 左側灰色垂直線 */
    .milestone-list::before {
        content: "";
        position: absolute;
        left: 4px;
        top: 0;
        bottom: 0;
        width: 1px;
        background-color: var(--color-light-gray);
    }

.milestone-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 32px;
    padding-left: 110px; /* 留給黃點 + 虛線的空間 */
    margin-bottom: 40px;
}

    .milestone-item:last-child {
        margin-bottom: 0;
    }

    /* 垂直線上的黃點 */
    .milestone-item::before {
        content: "";
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 9px;
        height: 9px;
        border-radius: 50%;
        background-color: var(--color-logo-orange);
        z-index: 1;
    }

    /* 黃點到圓形圖片的虛線 */
    .milestone-item::after {
        content: "";
        position: absolute;
        left: 16px;
        top: 50%;
        width: 84px;
        border-top: 2px dashed var(--color-logo-orange);
    }

    /* --- 虛線長短交錯 --- */
    /* 奇數項：長虛線 */
    .milestone-item:nth-child(odd) {
        padding-left: 110px;
    }

        .milestone-item:nth-child(odd)::after {
            width: 84px;
        }

    /* 偶數項：短虛線 */
    .milestone-item:nth-child(even) {
        padding-left: 60px;
    }

        .milestone-item:nth-child(even)::after {
            width: 34px;
        }

.milestone-img {
    flex-shrink: 0;
    width: 96px;
    height: 96px;
    border-radius: 50%;
    border: 2px solid var(--color-logo-yellow);
    overflow: hidden;
    background-color: var(--color-white);
}

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

.milestone-body {
    flex: 1;
    min-width: 0;
}

.milestone-year {
    display: flex !important;
    align-items: center;
    gap: 12px;
    font-size: 22px !important;
    font-weight: var(--font-weight-semibold) !important;
    letter-spacing: 1.2px !important;
    color: var(--color-dark-yellow) !important;
    margin-bottom: 6px !important;
}

.milestone-divider {
    width: 1px;
    height: 20px;
    background-color: var(--color-light-gray);
    flex-shrink: 0;
}

.milestone-event {
    color: var(--color-text);
    font-size: 20px;
}

/* =========================================
   24. 聯絡我們 (Contact Message)
   ========================================= */
.contact-container {
    max-width: 1040px;
    padding: 50px 0px;
}

.contact-form-title {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    font-size: 28px !important;
    font-weight: var(--font-weight-semibold) !important;
    letter-spacing: 1.4px !important;
    color: var(--color-text) !important;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--color-light-gray);
    margin-bottom: 32px !important;
}

    .contact-form-title span {
        font-size: 16px;
        font-weight: var(--font-weight-medium);
    }

.content-note {
    display: flex;
    align-items: flex-start;
    gap: 24px;
    margin-bottom: 20px;
    max-width: 860px;
    margin-left: auto;
    margin-right: auto;
}

.contact-star {
    color: var(--color-logo-orange);
}

/* --- 欄位列：label 左 / input 右 --- */
.contact-field-row {
    display: flex;
    align-items: flex-start;
    gap: 24px;
    margin-bottom: 30px;
    max-width: 860px;
    margin-left: auto;
    margin-right: auto;
}

.contact-label {
    flex: 0 0 130px;
    color: var(--color-text);
    padding-top: 8px;
    white-space: nowrap;
}

.contact-input-wrap {
    flex: 1;
    min-width: 0;
}

.contact-input {
    border: 1px solid var(--color-light-gray);
    border-radius: 4px;
    background-color: var(--color-white);
    padding: 10px 16px;
    font-size: 16px;
    letter-spacing: 1px;
    color: var(--color-text);
}

    .contact-input:focus {
        border-color: var(--color-dark-yellow);
        box-shadow: 0 0 0 3px rgba(206, 161, 68, 0.15);
    }

    .contact-input::placeholder {
        color: var(--color-light-gray);
    }

    /* 驗證失敗：紅框 (jquery validate 會加 input-validation-error) */
    .contact-input.input-validation-error {
        border-color: var(--color-red);
    }

.contact-textarea {
    resize: vertical;
    min-height: 180px;
}

.contact-error {
    display: block;
    color: var(--color-red);
    margin-top: 4px;
    min-height: 0;
}

/* --- 驗證碼 --- */
.contact-captcha-wrap {
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

.contact-captcha-img {
    height: 46px;
    border-radius: 4px;
    cursor: pointer;
    flex-shrink: 0;
}

/* --- 按鈕 --- */
.contact-btn-row {
    display: flex;
    justify-content: center;
    gap: 30px;
    margin-top: 48px;
}

.contact-btn {
    width: 360px;
    max-width: 45%;
    padding: 12px 0;
    border-radius: 4px;
    font-size: 18px;
    letter-spacing: 1.2px;
    font-weight: var(--font-weight-medium);
    transition: all 0.3s ease;
}

.contact-btn-cancel {
    background-color: transparent;
    border: 1px solid var(--color-dark-yellow);
    color: var(--color-dark-yellow);
}

    .contact-btn-cancel:hover {
        background-color: var(--color-decorate);
    }

.contact-btn-submit {
    background-color: var(--color-dark-yellow);
    border: 1px solid var(--color-dark-yellow);
    color: var(--color-white);
}

    .contact-btn-submit:hover {
        background-color: var(--color-logo-orange);
        border-color: var(--color-logo-orange);
    }

    .contact-btn-submit:disabled {
        background-color: var(--color-disable);
        border-color: var(--color-disable);
        cursor: not-allowed;
    }

/* =========================================
   25. 活動場次與報名彈窗 (Event Session)
   ========================================= */
.session-table-container {
    border-top: 1px solid var(--color-light-gray)
}
/* --- xl 表格 --- */
.session-table {
    border-radius: 15px;
    overflow: hidden;
    background-color: var(--color-white);
}

.session-table-header {
    background-color: var(--color-logo-orange);
    padding: 16px 24px;
}

.session-table-row {
    padding: 20px 24px;
    border-bottom: 1px solid var(--color-decorate);
}

    .session-table-row:last-child {
        border-bottom: none;
    }

.session-col-name {
    flex: 0 0 34%;
}

.session-col-loc {
    flex: 0 0 26%;
}

.session-col-time {
    flex: 0 0 18%;
}

.session-col-btn {
    flex: 1;
    text-align: center;
}

.session-reg-btn {
    display: inline-block;
    border: 1px solid var(--color-dark-yellow);
    color: var(--color-dark-yellow);
    background-color: transparent;
    border-radius: 6px;
    padding: 6px 32px;
    font-size: 16px;
    letter-spacing: 1px;
    transition: all 0.3s ease;
}

    .session-reg-btn:hover {
        background-color: var(--color-dark-yellow);
        color: var(--color-white);
    }

    .session-reg-btn.is-full,
    .session-reg-btn:disabled {
        color: var(--color-light-gray);
        border: none;
        cursor: not-allowed;
        pointer-events: none;
    }
/* --- md/sm 卡片 --- */
.session-card {
    border-radius: 8px;
    overflow: hidden;
    background-color: var(--color-white);
}

.session-card-header {
    background: linear-gradient(180deg, #F9B400 0%, #F9B400 100%);
    padding: 10px 20px;
}

.session-card-body {
    padding: 16px 20px 20px 20px;
}

.session-card-item {
    display: flex;
    gap: 24px;
    align-items: center;
    padding-bottom: 6px;
    margin-bottom: 6px;
    border-bottom: 1px solid #F4EBD9;
}

    .session-card-item img {
        margin-top: 4px;
        flex-shrink: 0;
    }

/* =========================================
   Event Modal 相關彈窗樣式
   ========================================= */

/* --- 1. 遮罩層 (Overlay) --- */
.event-modal-overlay {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1050;
    overflow-y: auto;
    padding: 40px 16px;
    align-items: flex-start;
    display: none; /* 預設隱藏，開啟時由 .is-open 切成 flex */
}

    .event-modal-overlay.is-open {
        display: flex; /* 垂直置中：內容矮時由 box 的 margin:auto 置中，高時正常捲動 */
    }

/* --- 2. 彈窗外殼與底部裝飾 (Modal Box) --- */
.event-modal-box {
    position: relative;
    max-width: 1025px;
    margin: auto;
    width: 100%;
    background-color: var(--color-page-background);
    border-radius: 10px;
    padding: 56px 48px 48px 48px;
    overflow: hidden; /* 底圖不超出圓角 */
}

    .event-modal-box::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 45%;
        background:
        /* 1. 最上層漸層：從上方 100% 的背景色，往下漸漸變透明，完美消除切割邊界 */
        linear-gradient(to bottom, var(--color-page-background) 0%, rgba(253, 251, 242, 0) 90%),
        /* 2. Figma 設定的黃色濾鏡 */
        linear-gradient(0deg, #FFFFFFB2, #FFDB2666),
        /* 3. Figma 設定的白色濾鏡 */
        linear-gradient(0deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.7)),
        /* 4. 最底層的實際圖片 */
        url('../images/modal_bg.jpg') center bottom / cover no-repeat;
        pointer-events: none;
        z-index: 0;
    }

    /* 內容墊高在裝飾層之上 */
    .event-modal-box > * {
        position: relative;
        z-index: 1;
    }

/* --- 3. 關閉按鈕 (Close Button) --- */
.event-modal-x {
    position: absolute;
    top: 16px;
    right: 20px;
    border: none;
    background: transparent;
    font-size: 32px;
    line-height: 1;
    color: var(--color-dark-yellow);
    cursor: pointer;
    z-index: 2; /* 高於 step (z-index:1)，避免登入模式滿版內容蓋住點擊 */
}

/* --- 4. 步驟與內部排版 (Steps & Content) --- */
.event-modal-step {
    display: none;
}

    .event-modal-step.is-active {
        display: block;
    }

    .event-modal-step.step-centered.is-active {
        display: flex;
        min-height: 45dvh;
        flex-direction: column;
        justify-content: center;
    }

.event-modal-center {
    text-align: center;
    padding: 40px 0;
}

.event-qrcode-img {
    width: 280px;
    max-width: 80%;
}

/* --- 5. 按鈕群組 (Buttons) --- */
.event-modal-btn-row {
    display: flex;
    justify-content: center;
    gap: 24px;
    margin-top: 40px;
}

.event-btn-outline,
.event-btn-solid {
    flex: 1;
    max-width: 380px;
    padding: 12px 0;
    border-radius: 6px;
    font-size: 18px;
    letter-spacing: 1.2px;
    transition: all 0.3s ease;
    text-decoration: none;
}

    .event-btn-outline.login,
    .event-btn-solid.login {
        max-width: none;
        flex: none;
        padding: 10px 0px;
    }

.event-btn-outline {
    border: 1px solid var(--color-dark-yellow);
    color: var(--color-dark-yellow);
    background-color: transparent;
}

    .event-btn-outline:hover {
        background-color: var(--color-logo-orange);
        color: var(--color-white);
    }

.event-btn-solid {
    border: 1px solid var(--color-dark-yellow);
    background-color: var(--color-dark-yellow);
    color: var(--color-white);
}

    .event-btn-solid:hover {
        background-color: var(--color-logo-orange);
        border-color: var(--color-logo-orange);
        color: var(--color-white);
    }

/* --- 6. 登入步驟：滿版兩欄模式 (Login Mode) --- */
.event-modal-box.is-login-mode {
    padding: 0;
    max-width: 1025px;
    min-height: 55dvh;
    background-color: var(--color-white); /* 設計圖右半是純白 */
    overflow: hidden; /* 底圖不超出圓角 */
    display: flex; /* 讓 step 撐滿 box */
    flex-direction: column;
}

    .event-modal-box.is-login-mode::after {
        display: none; /* 登入模式不要底部裝飾圖 */
    }

    .event-modal-box.is-login-mode .event-modal-step.is-active {
        display: flex; /* login step 撐滿並讓 layout 繼續延展 */
        flex: 1;
        flex-direction: column;
    }

    .event-modal-box.is-login-mode .event-login-layout {
        flex: 1; /* layout 吃滿 step 高度，圖片 stretch 到底 */
    }

.event-login-layout {
    display: flex;
    align-items: stretch;
    gap: 40px;
}

.event-login-img {
    flex: 0 0 40%;
    background: url('../images/event_login_modal_bg.jpg') center/cover no-repeat;
}

.event-login-form {
    flex: 1;
    min-width: 0;
    padding-right: 50px;
    display: flex;
    flex-direction: column;
    justify-content: center; /* 關鍵：欄高 45svh，但內容維持自然高度、整包置中 */
}

/* --- 7. 表單頂部場次摘要卡 (Session Summary) --- */
.event-session-summary {
    display: flex;
    gap: 32px;
    background-color: var(--color-white);
    border-radius: 10px;
    padding: 24px;
}

.event-session-summary-img {
    flex: 0 0 42%;
    max-width: 42%;
    aspect-ratio: 420 / 265;
    object-fit: cover;
    border-radius: 6px;
}

.event-session-summary-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.event-qrcode-img {
    width: 280px;
    max-width: 80%;
}

.contact-error .field-error,
span.field-error {
    display: block;
    color: var(--color-red);
    font-size: 14px !important;
    letter-spacing: 0.8px !important;
}

/* =========================================
   26. APP QRcode 共用彈窗 (Bootstrap modal 外殼 + event 彈窗視覺)
   ========================================= */
.app-qrcode-modal-content {
    position: relative;
    background-color: var(--color-page-background);
    border-radius: 10px;
    padding: 40px 32px 32px 32px;
    overflow: hidden; /* 關鍵1：確保底圖不會超出版面圓角 */
}

    /* 關鍵2：套用與 event-modal-box 相同的底圖與漸層設定 */
    .app-qrcode-modal-content::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 45%;
        background:
        /* 1. 最上層漸層：完美消除切割邊界 */
        linear-gradient(to bottom, var(--color-page-background) 0%, rgba(253, 251, 242, 0) 90%),
        /* 2. 黃色濾鏡 */
        linear-gradient(0deg, #FFFFFFB2, #FFDB2666),
        /* 3. 白色濾鏡 */
        linear-gradient(0deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.7)),
        /* 4. 最底層的實際圖片 */
        url('../images/modal_bg.jpg') center bottom / cover no-repeat;
        pointer-events: none;
        z-index: 0;
    }

    /*  關鍵3：精準鎖定內容區塊墊高，不影響原本的 X 按鈕 */
    .app-qrcode-modal-content .event-modal-center {
        position: relative;
        z-index: 1;
    }

    /* 確保 X 按鈕也在底圖之上，但不改變它原本的 position (absolute) */
    .app-qrcode-modal-content .event-modal-x {
        z-index: 2;
    }

/* =========================================
   27. 登入彈窗 (Login Modal)
   ========================================= */

/* --- 遮罩層 --- */
/* --- 遮罩層 --- */
.login-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 1060;
    background: rgba(0, 0, 0, 0.5);
    display: none;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

    .login-modal-overlay.is-open {
        display: block;
    }

/* --- 彈窗外殼 --- */
.login-modal-box {
    position: relative;
    max-width: 840px;
    width: 90%;
    margin: 60px auto;
    background: var(--color-white);
    border-radius: 12px;
    overflow: hidden;
}

/* --- 關閉按鈕 --- */
.login-modal-close {
    position: absolute;
    top: 16px;
    right: 20px;
    z-index: 2;
    background: none;
    border: none;
    font-size: 28px;
    color: var(--color-gray2);
    cursor: pointer;
    line-height: 1;
    padding: 0;
}

    .login-modal-close:hover {
        color: var(--color-text);
    }

/* --- 兩欄佈局 --- */
.login-modal-layout {
    display: flex;
    align-items: stretch;
}

/* --- 左欄：登入表單 --- */
.login-modal-form {
    flex: 1;
    padding: 48px 40px;
    min-width: 0;
}

.login-modal-title {
    font-size: 28px;
    font-weight: var(--font-weight-semibold);
    color: var(--color-dark-yellow);
    margin: 0 0 32px;
}

.login-modal-field {
    margin-bottom: 20px;
}

.login-modal-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 16px;
    font-weight: var(--font-weight-medium);
    color: var(--color-text);
    margin-bottom: 8px;
}

.login-modal-label-icon {
    width: 18px;
    height: 18px;
}

.login-modal-input {
    display: block;
    width: 100%;
    border: 1px solid var(--color-light-gray);
    border-radius: 4px;
    background: var(--color-white);
    padding: 10px 16px;
    font-size: 16px;
    color: var(--color-text);
    letter-spacing: 0.5px;
}

    .login-modal-input:focus {
        outline: none;
        border-color: var(--color-dark-yellow);
        box-shadow: 0 0 0 3px rgba(206, 161, 68, 0.15);
    }

    .login-modal-input::placeholder {
        color: var(--color-light-gray);
    }

.login-modal-error {
    display: block;
    font-size: 14px;
    color: var(--color-red);
    margin-top: 4px;
    min-height: 20px;
}

/* --- 記住我 / 忘記密碼 --- */
.login-modal-options {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
}

.login-modal-remember {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 15px;
    color: var(--color-text);
    cursor: pointer;
}

    .login-modal-remember input[type="checkbox"] {
        /* 1. 清除瀏覽器預設的 checkbox 樣式 */
        appearance: none;
        -webkit-appearance: none;
        width: 18px;
        height: 18px;
        cursor: pointer;
        position: relative;
        /* 2. 設定未勾選時的框框樣式 */
        border: 2px solid var(--color-disable); /* 框線顏色 */
        border-radius: 3px; /* 圓角 */
        background-color:transparent /* 背景色 */
    }

        /* 3. 勾選時的樣式 (畫出勾勾) */
        .login-modal-remember input[type="checkbox"]:checked::after {
            content: "";
            position: absolute;
            /* 勾勾的位置跟大小 (可視需求微調) */
            left: 4px;
            top: 1px;
            width: 6px;
            height: 9px;
            /* 這裡就是勾勾的顏色！你想改什麼顏色都可以 */
            border: solid var(--color-white);
            border-width: 0 2px 2px 0;
            transform: rotate(45deg);
        }

        /* (選擇性) 勾選時，如果你連框框的背景色都想改，寫在這裡 */
        .login-modal-remember input[type="checkbox"]:checked {
            background-color: var(--color-dark-yellow); /* 背景色 */
            border-color: var(--color-dark-yellow); /* 框線顏色 */
        }

.login-modal-forgot {
    font-size: 15px;
    color: var(--color-gray2);
    text-decoration: none;
}

    .login-modal-forgot:hover {
        color: var(--color-dark-yellow);
    }

/* --- 登入按鈕 --- */
.login-modal-btn {
    display: block;
    width: 100%;
    padding: 12px 0;
    border: none;
    border-radius: 4px;
    background: var(--color-dark-yellow);
    color: var(--color-white);
    font-size: 18px;
    font-weight: var(--font-weight-medium);
    cursor: pointer;
    letter-spacing: 1px;
}

    .login-modal-btn:hover {
        background: var(--color-logo-orange);
    }

    .login-modal-btn:disabled {
        background: var(--color-disable);
        cursor: not-allowed;
    }

/* --- 右欄：註冊引導 --- */
.login-modal-info {
    flex: 0 0 340px;
    padding: 48px 36px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.login-modal-info-title {
    font-size: 22px;
    font-weight: var(--font-weight-semibold);
    color: var(--color-dark-yellow);
    margin: 0 0 8px;
}

.login-modal-info-desc {
    font-size: 14px;
    color: var(--color-gray2);
    margin: 0 0 28px;
}

/* --- 權益列表 --- */
.login-modal-benefits {
    list-style: none;
    padding: 0;
    margin: 0 0 32px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

    .login-modal-benefits li {
        display: flex;
        align-items: center;
        gap: 12px;
        font-size: 15px;
        color: var(--color-text);
    }

.login-modal-benefit-icon {
    flex: 0 0 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

    .login-modal-benefit-icon img {
        width: 22px;
        height: 22px;
    }

/* --- 立即註冊按鈕 --- */
.login-modal-register-btn {
    display: block;
    width: 100%;
    padding: 12px 0;
    text-align: center;
    border: 1.5px solid var(--color-dark-yellow);
    border-radius: 4px;
    background: transparent;
    color: var(--color-dark-yellow);
    font-size: 18px;
    font-weight: var(--font-weight-medium);
    text-decoration: none;
    letter-spacing: 1px;
}

    .login-modal-register-btn:hover {
        background: var(--color-dark-yellow);
        color: var(--color-white);
    }

/* =========================================
   28. 註冊頁面 (Register Page)
   ========================================= */
.register-container {
    max-width: 860px;
    padding: 50px 0 80px;
}

.register-form-title {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    font-size: 28px;
    font-weight: var(--font-weight-semibold);
    letter-spacing: 1.4px;
    color: var(--color-text);
    padding-bottom: 16px;
    border-bottom: 1px solid var(--color-light-gray);
    margin-bottom: 16px;
}

    .register-form-title span:last-child {
        font-size: 16px;
        font-weight: var(--font-weight-medium);
    }

.register-required-note {
    margin-bottom: 24px;
    max-width: 860px;
    margin-left: auto;
    margin-right: auto;
}

/* --- 下拉選單箭頭 --- */
.register-select {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1.5l5 5 5-5' stroke='%23808080' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 36px;
    cursor: pointer;
}

/* --- 生日三欄 --- */
.register-birth-group {
    display: flex;
    gap: 12px;
}

    .register-birth-group select {
        flex: 1;
        min-width: 0;
    }

/* --- 地址三欄 --- */
.register-address-group {
    display: flex;
    gap: 12px;
}

    .register-address-group select {
        flex: 0 0 calc(30% - 8px);
        min-width: 0;
    }

    .register-address-group input {
        flex: 1;
        min-width: 0;
    }

/* --- 單選按鈕 --- */
.register-radio-group {
    display: flex;
    align-items: center;
    gap: 24px;
    padding-top: 8px;
}

.register-radio {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 16px;
    color: var(--color-text);
    cursor: pointer;
}
    .register-radio input[type="radio"] {
        /* 1. 清除瀏覽器預設的 Radio 樣式 */
        appearance: none;
        -webkit-appearance: none;
        /* 2. 設定基礎大小與形狀 */
        width: 18px;
        height: 18px;
        border-radius: 50%;
        cursor: pointer;
        vertical-align: middle; /* 讓按鈕與旁邊的文字垂直對齊 */
        /* 3. 未選取時的樣式 (淡色邊框) */
        border: 2px solid var(--color-disable); /* 這裡的色號抓圖二的淡金色，可依需求微調 */
        background-color: transparent; /* 配合你背景的微黃色，若是純白可改 #FFF */
        /* 加入一點過場動畫讓點擊更滑順 */
        transition: all 0.2s ease-in-out;
    }

        /* 選取時的狀態 (:checked) */
        .register-radio input[type="radio"]:checked {
            /* 外圈邊框變成深金色 */
            border: 2px solid var(--color-dark-yellow);
            /* 中間填滿深金色 */
            background-color: var(--color-dark-yellow);
            /* 4. 神奇的魔法：用向內的陰影 (inset) 擠出中間的白色/背景色空隙 */
            box-shadow: inset 0 0 0 3px #FAFAFA; /* 這個顏色要跟你的網頁背景色一樣 */
        }

input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--color-dark-yellow);
    cursor: pointer;
}

/* --- 隱私權同意 --- */
.register-privacy {
    text-align: center;
    margin: 36px 0 40px;
}

.register-privacy-label {
    display: inline-flex;
    align-items: start;
    gap: 8px;
    font-size: 15px;
    color: var(--color-text);
    cursor: pointer;
}

    .register-privacy-label input[type="checkbox"] {
        width: 18px;
        height: 18px;
        accent-color: var(--color-dark-yellow);
        cursor: pointer;
        margin-top:3px;
    }

.register-privacy .contact-error {
    display: block;
    margin-top: 4px;
}

/* --- 驗證碼 Modal --- */
.verify-modal-box {
    max-width: 680px;
    padding: 56px 48px 48px;
}

.verify-modal-content {
    position: relative;
    z-index: 1;
}

/* =========================================
   28. Loading 共用元件
   ========================================= */
.loader-mask {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.75);
}

.loader-mask--local {
    position: absolute;
    inset: 0;
    z-index: 10;
    border-radius: inherit;
}

.loader-container {
    text-align: center;
}

.luxury-spinner {
    width: 40px;
    height: 40px;
    margin: 0 auto 12px;
    border: 3px solid var(--color-light-gray);
    border-top-color: var(--color-logo-orange);
    border-radius: 50%;
    animation: loader-spin 0.8s linear infinite;
}

@keyframes loader-spin {
    to {
        transform: rotate(360deg);
    }
}

.loader-text {
    font-size: 14px;
    color: var(--color-text);
    letter-spacing: 0.1em;
    margin: 0;
}

/* =========================================
   30. 會員優惠 (Member Discount)
   ========================================= */
.member-discount-header {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 8px;
    justify-content:center;
}

.member-discount-divider {
    border-top: 1px solid var(--color-light-gray);
    margin-bottom: 32px;
}

/* =========================================
   31. 點數查詢 (Bonus Record)
   ========================================= */
.bonus-record {
    max-width: 1040px;
    margin: 0 auto;
    padding-bottom: 80px;
}

.bonus-record__top {
    display: flex;
    gap: 24px;
    padding: 40px 0;
}

/* -- 會員卡 -- */
.bonus-record__card {
    flex: 0 0 calc(63% - 30px);
    display: flex;
    gap: 30px;
    border-radius: 12px;
    padding: 30px;
    box-shadow: 1px 1px 10px 0px rgba(142, 142, 142, 0.25);
    justify-content: space-between;
    background: #FFFFFFB2;
}

.bonus-record__card-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-top: 8px;
}

.bonus-record__card-name {
    font-size: 24px;
    font-weight: var(--font-weight-semibold);
    color: var(--color-dark-yellow);
    margin-bottom: 16px;
}

.bonus-record__card-sub {
    font-size: 18px;
    color: var(--color-text);
}

.bonus-record__card-img {
    width: auto;
    max-width: 300px;
}

    .bonus-record__card-img img {
        width: 100%;
        height: auto;
        display: block;
    }

/* -- 點數摘要 -- */
.bonus-record__summary {
    flex: 1;
    border-radius: 12px;
    padding: 30px;
    box-shadow: 1px 1px 10px 0px rgba(142, 142, 142, 0.25);
    background: #FFFFFFB2;
}

.bonus-record__summary-top {
    display: flex;
    align-items: center;
    gap: 24px;
    margin-bottom: 4px;
}

.bonus-record__summary-badge {
    width: 50px;
    height: 50px;
}

.bonus-record__summary-main {
    display: flex;
    flex-direction: column;
}

.bonus-record__summary-header {
    font-size: 16px;
    font-weight: var(--font-weight-medium);
    color: var(--color-text);
    margin-bottom: 0;
}

.bonus-record__summary-total {
    display: flex;
    align-items: baseline;
    gap: 6px;
}

.bonus-record__summary-value {
    font-size: 24px;
    font-weight: var(--font-weight-semibold);
    color: var(--color-dark-yellow);
    line-height: 34px;
    letter-spacing: 1.3px;
}

.bonus-record__summary-unit {
    font-size: 18px;
    color: var(--color-text);
    line-height: 34px;
    letter-spacing: 1.3px;
    font-weight: var(--font-weight-medium);
}

.bonus-record__summary-desc {
    font-size: 13px;
    color: var(--color-gray2);
    margin-top: 2px;
    margin-bottom: 0;
}

.bonus-record__summary-expire {
    display: flex;
    padding-top: 20px;
}

.bonus-record__expire-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

    .bonus-record__expire-item + .bonus-record__expire-item {
        border-left: 1px solid var(--color-light-gray);
        padding-left: 32px;
    }

.bonus-record__expire-label {
    font-size: 16px;
    font-weight: var(--font-weight-medium);
    color: var(--color-text);
}

.bonus-record__expire-points {
    display: flex;
    align-items: baseline;
    gap: 6px;
}

.bonus-record__expire-value {
    font-size: 28px;
    font-weight: bold;
    color: var(--color-dark-yellow);
    line-height: 1.2;
}

.bonus-record__expire-unit {
    font-size: 14px;
    color: var(--color-text);
}

.bonus-record__expire-date {
    font-size: 12px;
    color: var(--color-gray2);
}

/* -- 消費紀錄標題 -- */
.bonus-record__history-header {
    display: flex;
    align-items: baseline;
    gap: 16px;
    justify-content: center;
}

.bonus-record__history-title {
    font-size: 32px;
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
}

.bonus-record__history-subtitle {
    font-size: 14px;
    color: var(--color-text);
}

.bonus-record__divider {
    border: none;
    border-top: 1px solid var(--color-light-gray);
    margin: 16px 0 0;
}

/* -- Tab -- */
.bonus-record__tabs {
    display: flex;
    justify-content: center;
    gap: 0;
    padding: 24px 0 20px;
}

.bonus-record__tab {
    padding: 8px 32px;
    font-size: 16px;
    border: 0px;
    background-color: transparent;
    color: var(--color-gray2);
    cursor: pointer;
    transition: all 0.2s;
    border-radius: 24px;
}

    .bonus-record__tab + .bonus-record__tab {
        margin-left: 8px;
    }

    .bonus-record__tab.is-active {
        background: var(--color-dark-yellow);
        color: var(--color-white);
    }

/* -- Panel -- */
.bonus-record__panel {
    display: none;
}

    .bonus-record__panel.is-active {
        display: block;
    }

/* -- Table -- */
.bonus-record__table-wrap {
    overflow-x: auto;
    box-shadow: 1px 1px 4px 0px rgba(142, 142, 142, 0.25);
}


.bonus-record__table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}
    .bonus-record__table tbody {
        background-color: #FFFFFF;
    }

    .bonus-record__table thead th {
        background-color: var(--color-logo-orange);
        color: #fff;
        font-size: 18px;
        font-weight: var(--font-weight-medium);
        padding: 14px 24px;
        text-align: left;
        white-space: nowrap;
    }

        .bonus-record__table thead th:first-child {
            border-radius: 12px 0 0 0;
        }

        .bonus-record__table thead th:last-child {
            border-radius: 0 12px 0 0;
        }

    .bonus-record__table tbody tr:last-child td:first-child {
        border-radius: 0 0 0 12px;
    }

    .bonus-record__table tbody tr:last-child td:last-child {
        border-radius: 0 0 12px 0;
    }

    .bonus-record__table tbody tr {
        border-bottom: 1px solid var(--color-light-gray);
    }

    .bonus-record__table tbody td {
        padding: 20px 24px;
        font-size: 15px;
        color: var(--color-gray2);
        border-bottom: 1px solid var(--color-light-gray);
        vertical-align: middle;
    }

/* -- 類型欄 icon + 文字 -- */
.bonus-record__type {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
}

.bonus-record__type-icon {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 14px;
    font-weight: bold;
    line-height: 1;
}

.bonus-record__type-icon--earn {
    background-color: var(--color-logo-orange);
    color: #fff;
}

.bonus-record__type-icon--redeem {
    background-color: var(--color-gray2);
    color: #fff;
}

/* 點數變動欄 */
.bonus-record__points {
    font-size: 18px;
    font-weight: var(--font-weight-medium);
    color: var(--color-dark-yellow);
}

/* -- Empty -- */
.bonus-record__empty {
    text-align: center;
    padding: 60px 0;
    color: var(--color-gray2);
    font-size: 16px;
}

/* -- 載入更多 -- */
.bonus-record__load-more {
    text-align: center;
    padding: 24px 0;
}

.bonus-record__load-more-btn {
    padding: 10px 48px;
    font-size: 16px;
    border: 1px solid var(--color-dark-yellow);
    border-radius: 24px;
    background-color:transparent;
    color: var(--color-dark-yellow);
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}

    .bonus-record__load-more-btn:hover {
        background: var(--color-dark-yellow);
        color: #fff;
    }

/* =========================================
   32. 會員資料 (Profile)
   ========================================= */

/* 唯讀 input */
.profile-input-readonly {
    color: var(--color-gray2) !important;
    background-color: var(--color-light-gray) !important;
    cursor: not-allowed;
}

/* 行動電話 + 修改手機按鈕 */
.profile-mobile-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.profile-mobile-input {
    flex: 1;
    min-width: 0;
}

.profile-btn-mobile {
    flex-shrink: 0;
    padding: 10px 24px;
    font-size: 16px;
    color: var(--color-white);
    background-color: var(--color-dark-yellow);
    border: 1px solid var(--color-dark-yellow);
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.3s ease;
    white-space: nowrap;
    font-weight: var(--font-weight-medium);
    letter-spacing: 1px;
}

    .profile-btn-mobile:hover {
        background-color: var(--color-logo-orange);
        border-color: var(--color-logo-orange);
    }

/* 區塊分隔線 */
.profile-divider {
    border: none;
    border-top: 1px solid var(--color-light-gray);
    margin: 48px auto;
    max-width: 860px;
}

/* =========================================
   33. 點數專區列表 (PointZoneList)
   ========================================= */

.point-zone {
    max-width: 1046px;
    width: 100%;
    margin: 0 auto;
    padding: 50px 0 80px;
}

/* 卡片 grid */
.point-zone__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.point-zone__card {
    display: flex;
    border: 1px solid var(--color-light-gray);
    border-radius: 12px;
    overflow: hidden;
    background: var(--color-white);
    padding: 20px;
    text-decoration: none;
    color: inherit;
    transition: box-shadow 0.2s ease;
    cursor: pointer;
}

    .point-zone__card:hover {
        border: 1px solid var(--color-logo-orange);
        color: inherit;
        text-decoration: none;
    }

.point-zone__card--soldout {
    opacity: 0.75;
}

/* 圖片區 */
.point-zone__card-img {
    flex: 0 0 142px;
    height: 142px;
    overflow: hidden;
    position: relative;
    border-radius: 6px;
}

    .point-zone__card-img img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.point-zone__card-noimg {
    width: 100%;
    height: 100%;
    background: #f0ede5;
}

/* 已贈迄 overlay */
.point-zone__card-soldout-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.5);
}

    .point-zone__card-soldout-overlay img {
        width: 130px;
        height: auto;
        object-fit: contain;
    }

/* 右側內容 */
.point-zone__card-body {
    flex: 1;
    min-width: 0;
    padding-left: 8px;
    display: flex;
    flex-direction: column;
}

.point-zone__card-title {
    color: var(--color-text);
    margin: 0 0 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.point-zone__card-points {
    margin: 0 0 2px;
    color:var(--color-dark-yellow);
}

.point-zone__card-desc {
    font-size: 14px;
    color: var(--color-text);
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: flex;
    align-items: center;
    gap: 4px;
}

.point-zone__card-desc-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.point-zone__card-footer {
    display: flex;
    align-items: center;
    margin-top: auto;
    padding-top: 8px;
}

.point-zone__card-remain {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color:var(--color-gray2);
}

    .point-zone__card-remain img {
        width: 16px;
        height: 16px;
    }

.point-zone__empty {
    text-align: center;
    padding: 80px 20px;
    color: var(--color-gray2);
    font-size: 16px;
}

/* =========================================
   34. 點數專區內頁 (PointZonePage)
   ========================================= */

.pz-detail-plaza {
    max-width: 1041px;
    width: 100%;
    margin: 0 auto;
    padding: 50px 0 80px;
}

/* ===== 上方卡片 ===== */
.pz-card {
    display: flex;
    border: 1px solid var(--color-light-gray);
    border-radius: 4px;
    background: var(--color-white);
    padding: 20px;
    gap: 24px;
    flex-wrap: wrap;
}

.pz-card__img {
    flex: 0 0 200px;
    height: 200px;
    overflow: hidden;
}

    .pz-card__img img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.pz-card__img-empty {
    width: 100%;
    height: 100%;
    background: #f0ede5;
}

.pz-card__body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.pz-card__header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
}

.pz-card__info {
    flex: 1;
    min-width: 0;
}

.pz-card__title {
    color: var(--color-text);
    margin: 0 0 8px;
}

.pz-card__points {
    color: var(--color-dark-yellow);
    margin: 0;
}

.pz-card__footer {
    margin-top: auto;
    padding-top: 16px;
}

.pz-card__remain {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--color-gray2);
}

    .pz-card__remain img {
        width: 18px;
        height: 18px;
    }

.pz-card__remain-count {
    color: var(--color-dark-yellow);
}

.pz-card__share-mobile {
    width: 100%;
    text-align: center;
}

/* ===== 活動資訊區塊 ===== */
.pz-info {
    margin-top: 40px;
}

.pz-info__title-row {
    text-align: center;
    margin-bottom: 8px;
}

.pz-info__title {
    color: var(--color-text);
    margin: 0;
    display: inline;
}

.pz-info__title-sub {
    color: var(--color-gray2);
    margin-left: 12px;
}

.pz-info__divider {
    border: none;
    border-top: 1px solid var(--color-light-gray);
    margin: 0 0 32px;
}

.pz-info__section {
    margin-bottom: 24px;
}

.pz-info__section-title {
    color: var(--color-text);
    margin: 0 0 12px;
}

.pz-info__desc-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

    .pz-info__desc-list li {
        color: var(--color-gray2);
    }

.pz-info__label {
    color: var(--color-gray2);
}

.pz-info__rich-text {
    word-break: break-word;
}

/* 耐斯APP 連結 */
.pz-info__app-link {
    color: var(--color-dark-yellow);
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}

    .pz-info__app-link:hover {
        text-decoration: underline;
        color: var(--color-dark-yellow);
    }

/* 點數兌換提醒 */
.pz-info__reminder {
    color: var(--color-gray2);
    margin: 32px 0 0;
}

/* 我要兌換按鈕 */
.pz-info__btn-row {
    display: flex;
    justify-content: center;
    padding: 50px 0 0;
}

.pz-info__redeem-btn {
    display: block;
    width: 280px;
    padding: 12px 0;
    border: none;
    border-radius: 4px;
    background: var(--color-dark-yellow);
    color: var(--color-white);
    font-size: 18px;
    font-weight: 500;
    cursor: pointer;
    text-align: center;
    transition: opacity 0.2s;
    letter-spacing: 2px;
}

    .pz-info__redeem-btn:hover {
        opacity: 0.85;
    }

.pz-info__redeem-btn-disabled {
    display: block;
    width: 280px;
    padding: 12px 0;
    border: none;
    border-radius: 4px;
    background: var(--color-disable);
    color: var(--color-white);
    font-size: 18px;
    font-weight: 500;
    text-align: center;
    letter-spacing: 2px;
    cursor: not-allowed;
}

/* =========================================
   35. 我的票匣 (MyTickets)
   ========================================= */

.tk {
    max-width: 1040px;
    width: 100%;
    margin: 0 auto;
    padding: 0 0 80px;
}

/* Tab 切換 */
.tk__tabs {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 46px 0 26px;
}

.tk__tab {
    padding: 9px 16.5px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--color-gray2);
    cursor: pointer;
    transition: all 0.2s;
}

    .tk__tab.is-active {
        background: var(--color-logo-orange);
        color: var(--color-white);
    }

/* Panel */
.tk__panel {
    display: none;
}

    .tk__panel.is-active {
        display: block;
    }

/* 列表 */
.tk__list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* ===== 卡片 ===== */
.tk__card {
    border: 1px solid var(--color-light-gray);
    border-radius: 8px;
    background: var(--color-white);
    overflow: hidden;
    transition: box-shadow 0.2s;
}

    .tk__card[role="button"] {
        cursor: pointer;
    }

        .tk__card[role="button"]:hover {
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
        }

.tk__card--disabled {
    opacity: 0.7;
}

/* 卡片主要內容（橫排） */
.tk__card-main {
    display: flex;
    align-items: stretch;
    padding: 16px 24px;
    gap: 100px;
}

/* 左側橘色標籤 */
.tk__card-label {
    flex: 0 0 139px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #FFD50133;
    border-radius: 6px;
    padding: 12px 24px;
    min-height: 90px;
}

.tk__card-label--disabled {
    background: var(--color-light-gray)
}

.tk__card-label-text {
    font-weight: var(--font-weight-medium);
    color: var(--color-dark-yellow);
    text-align: center;
    word-break: keep-all;
}

.tk__card-label--disabled .tk__card-label-text{
    color:var(--color-gray2);
}
/* 中間主體 */
.tk__card-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: start;
}

.tk__card-title {
    color: var(--color-text);
    margin: 0 0 6px;
}

/* xl 時直接顯示的內容區 */
.tk__card-content-xl {
    color: var(--color-gray2);
}

    .tk__card-content-xl p {
        margin: 0;
    }

    .tk__card-content-xl ul {
        margin: 0;
        padding-left: 20px;
    }

    .tk__card-content-xl li {
        margin-bottom: 2px;
    }

/* 右側日期區 */
.tk__card-date {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    white-space: nowrap;
    min-width:115px;
}

.tk__card-date-label {
    color: var(--color-gray2);
}

.tk__card-date-value {
    color: var(--color-gray2);
}

.tk__card-remain {
    margin-top:8px;
    color: var(--color-dark-yellow);
}

    .tk__card-remain strong {
    }

/* 可折疊展開區（md/xs 才顯示） */
.tk__card-expand-area {
    display: none;
}

.tk__card-divider {
    border: none;
    border-top: 1px solid var(--color-light-gray);
    margin: 0 24px;
}

.tk__card-detail {
    padding: 12px 24px 0;
    font-size: 14px;
    color: var(--color-gray2);
    line-height: 1.6;
    display: none;
}

    .tk__card-detail p {
        margin: 0;
    }

    .tk__card-detail ul {
        margin: 0;
        padding-left: 20px;
    }

.tk__card-toggle {
    display: flex;
    justify-content: center;
    width: 100%;
    padding: 8px 0;
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--color-gray2);
    font-size: 18px;
    transition: color 0.2s;
}

    .tk__card-toggle:hover {
        color: var(--color-dark-yellow);
    }

/* 空狀態 */
.tk__empty {
    text-align: center;
    padding: 80px 20px;
    color: var(--color-gray2);
    font-size: 16px;
}

/* 載入更多 */
.tk__load-more {
    text-align: center;
    padding: 32px 0 0;
}

.tk__load-more-btn {
    display: inline-block;
    padding: 8px 32px;
    border: 1px solid var(--color-dark-yellow);
    border-radius: 24px;
    background: transparent;
    color: var(--color-dark-yellow);
    font-size: 16px;
    cursor: pointer;
    transition: all 0.2s;
}

    .tk__load-more-btn:hover {
        background: var(--color-dark-yellow);
        color: var(--color-white);
    }

/* md/sm 的 inline 日期，xl 隱藏 */
.tk__card-date-inline {
    display: none;
}

/* ===== Forgot/Edit Password Modal Fields ===== */
.verify-field-group {
    margin-bottom: 20px;
}

    .verify-field-group label {
        display: block;
        margin-bottom: 8px;
    }

.verify-input {
    width: 100%;
    height: 48px;
    padding: 0 16px;
    border: 1px solid var(--color-border, #d9d9d9);
    border-radius: 6px;
    font-size: 14px;
    color: var(--color-text);
    background-color: #fff;
    outline: none;
    transition: border-color 0.2s;
}

    .verify-input:focus {
        border-color: var(--color-dark-yellow);
    }

    .verify-input::placeholder {
        color: var(--color-gray2, #999);
    }

.verify-error {
    display: block;
    min-height: 20px;
    margin-top: 4px;
    font-size: 13px;
    color: #e53e3e;
    line-height: 1.4;
}

.verify-btn-row {
    display: flex;
    gap: 12px;
    justify-content: center;
}

    .verify-btn-row .btn-outline-gold {
        flex: 1;
        max-width: 180px;
        height: 48px;
        border: 1px solid var(--color-dark-yellow);
        border-radius: 6px;
        background: transparent;
        color: var(--color-dark-yellow);
        font-size: 16px;
        font-weight: 600;
        cursor: pointer;
        transition: background-color 0.2s, color 0.2s;
    }

        .verify-btn-row .btn-outline-gold:hover {
            background-color: var(--color-dark-yellow);
            color: #fff;
        }

    .verify-btn-row .btn-solid-gold {
        flex: 1;
        max-width: 180px;
        height: 48px;
        border: none;
        border-radius: 6px;
        background-color: var(--color-dark-yellow);
        color: #fff;
        font-size: 16px;
        font-weight: 600;
        cursor: pointer;
        transition: opacity 0.2s;
    }

        .verify-btn-row .btn-solid-gold:hover {
            opacity: 0.85;
        }

        .verify-btn-row .btn-solid-gold:disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }

/* ===== 回到頂部按鈕 ===== */
.scroll-to-top {
    position: fixed;
    bottom: 50px;
    right: 32px;
    z-index: 999;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s;
}

    .scroll-to-top.is-visible {
        opacity: 1;
        visibility: visible;
    }

.scroll-to-top-arrow {
    display: block;
    width: 14px;
    height: 14px;
    border-left: 2px solid var(--color-text);
    border-top: 2px solid var(--color-text);
    transform: rotate(45deg);
    margin-bottom: -4px;
}

.scroll-to-top-text {
    font-size: 18px;
    font-weight: 500;
    color: var(--color-text);
    line-height: 1;
}

.scroll-to-top:hover .scroll-to-top-arrow {
    border-color: var(--color-dark-yellow);
}

.scroll-to-top:hover .scroll-to-top-text {
    color: var(--color-dark-yellow);
}

.search-section .news-list-grid{
    justify-self:start;
}
/* =========================================
   14. 響應式排版集中區 (Media Queries)
   ========================================= */
/* --- [ 平板斷點：1200px 以下 (md, lg 等) ] --- */
@media (max-width: 1200px) {
    /* --- Figma 排版通用類別 (MD 斷點) --- */
    .typo-md-10-m {
        font-size: 10px !important;
        font-weight: var(--font-weight-medium) !important;
        line-height: 14px !important;
        letter-spacing: 1px !important;
    }

    .typo-md-12-r {
        font-size: 12px !important;
        font-weight: var(--font-weight-normal) !important;
        line-height: 14.5px !important;
        letter-spacing: 0px !important;
    }

    .typo-md-12-m {
        font-size: 12px !important;
        font-weight: var(--font-weight-medium) !important;
        line-height: 14.5px !important;
        letter-spacing: 0.8px !important;
    }

    .typo-md-14-390-web-text {
        font-size: 14px !important;
        font-weight: var(--font-weight-medium) !important;
        line-height: 20px !important;
        letter-spacing: 1px !important;
    }

    .typo-md-14-m {
        font-size: 14px !important;
        font-weight: var(--font-weight-medium) !important;
        line-height: 22px !important;
        letter-spacing: 0.8px !important;
    }

    .typo-md-16-390-web-text {
        font-size: 16px !important;
        font-weight: var(--font-weight-medium) !important;
        line-height: 18px !important;
        letter-spacing: 1px !important;
    }

    .typo-md-16-m {
        font-size: 16px !important;
        font-weight: var(--font-weight-medium) !important;
        line-height: 28px !important;
        letter-spacing: 1px !important;
    }

    .typo-md-18-m {
        font-size: 18px !important;
        font-weight: var(--font-weight-medium) !important;
        line-height: 32px !important;
        letter-spacing: 1.2px !important;
    }

    .typo-md-20-sb {
        font-size: 20px !important;
        font-weight: var(--font-weight-semibold) !important;
        line-height: 28px !important;
        letter-spacing: 1.2px !important;
    }

    .typo-md-24-sb {
        font-size: 24px !important;
        font-weight: var(--font-weight-semibold) !important;
        line-height: 34px !important;
        letter-spacing: 1.3px !important;
    }

    .typo-md-32-r {
        font-size: 32px !important;
        font-weight: var(--font-weight-normal) !important;
        line-height: 38.7px !important;
        letter-spacing: 1.5px !important;
    }

    .typo-md-32-sb {
        font-size: 32px !important;
        font-weight: var(--font-weight-semibold) !important;
        line-height: 38.7px !important;
        letter-spacing: 1.5px !important;
    }

    .typo-md-48-sb {
        font-size: 48px !important;
        font-weight: var(--font-weight-semibold) !important;
        line-height: 58.1px !important;
        letter-spacing: 1.5px !important;
    }
    /* 首頁覆寫 */
    .home-container {
        max-width: 685px;
    }
    .home-carousel-img {
        border-radius: 0 0 100px 100px;
    }

    .slick-carousel-home .slick-list {
        border-radius: 0 0 100px 100px;
        padding: 0 20px;
    }
    .news-type-img {
        aspect-ratio: 230 / 163;
    }

    .home-brand-icon {
        width: 50px;
        height: 50px;
    }

    .brand-icon-wrap {
        width: 70px;
        height: 70px;
    }

    .brand-en {
        font-weight: var(--font-weight-medium);
        line-height: 19px;
        letter-spacing: 1px;
    }
    /* News 列表覆寫 */
    .page-hero-section {
        height: 318px;
    }

    .news-list-grid {
        grid-template-columns: repeat(auto-fill, 200px);
        gap: 22.5px;
        max-width:645px;
    }

    .news-list-card-img {
        aspect-ratio: 200 / 142;
    }

    .block-h1 {
        font-size: 18px !important;
        letter-spacing: 0.01em !important;
        line-height: 25.2px !important;
    }

    .block-h2 {
        font-size: 14px !important;
        line-height: 1.4 !important;
    }

    .content-text {
        font-size: 12px !important;
        line-height: 1.4 !important;
    }

    .image-bottom-text {
        font-size: 8px !important;
        line-height: 10.88px !important;
        margin-top: 1px !important;
    }

    /* T1 手機：強制 1:1 正方形 */
    .t1-image-container {
        column-gap: 16px;
        margin-top: 11px;
    }

    .t1-default-img {
        height: auto !important;
        aspect-ratio: 462 / 363 !important;
    }

    .t1-content-container {
        margin-top: 11px;
    }

    /* T2 手機：維持原圖比例 */
    .template-2-top-row {
        flex-direction: column;
        align-items: flex-start;
        row-gap: 11px;
    }

    .template-2-image-wrapper {
        width: 100%;
        flex: none;
    }

    .template-2-default-img {
        height: auto !important;
        aspect-ratio: 558 / 438 !important;
    }

    .template-2-content-container {
        margin-top: 11px;
    }

    /* T3 手機：維持狹長比例 */
    .template-3-top-row {
        flex-direction: column;
        align-items: flex-start;
        row-gap: 11px;
    }

    .template-3-image-wrapper {
        width: 100%;
        flex: none;
    }

    .template-3-default-img {
        height: auto !important;
        aspect-ratio: 390 / 440 !important;
    }

    .template-3-content-container {
        margin-top: 11px;
    }

    /* T4 手機：維持長方形比例 */
    .t4-image-container {
        column-gap: 16px;
        margin-top: 11px;
    }

    .t4-default-img {
        height: auto !important;
        aspect-ratio: 462 / 550 !important;
    }

    .t4-content-container {
        margin-top: 11px;
    }

    .t5-content-container {
        margin-top: 11px;
    }


    /*    熱門搜尋*/

    .content-limit-container {
        max-width: 645px;
        min-width: 645px;
    }

    .news-info-card {
        flex-direction: column;
        gap: 16px;
        padding: 30px;
    }

    .news-info-img-wrap {
        flex: none;
        max-width: 100%;
    }

    .news-info-img {
        aspect-ratio: 585 / 394;
    }


    .news-info-meta {
        gap: 0;
        margin-top: 16px;
    }

    .brand-type-header-icon {
        width: 50px;
        height: 50px;
    }

    .brand-list-container {
        padding-left: 60px !important;
        padding-right: 60px !important;
    }

    .brand-list-grid {
        grid-template-columns: repeat(auto-fill, 200px);
        gap: 22.5px;
    }



    /* Hover 與 Active：圓底變橘、圖示反白、文字變橘 */
    .brand-type-item:hover .brand-type-icon-circle,
    .brand-type-item.active .brand-type-icon-circle {
        background-color: var(--color-dark-yellow) !important;
    }

    .brand-type-item:hover .brand-type-name,
    .brand-type-item.active .brand-type-name {
        color: var(--color-dark-yellow) !important;
    }

    .floor-header-location {
        font-size: 36px;
    }

    .floor-header-location {
        font-size: 28px;
    }

    .member-card-img-wrap {
        width: 295px;
    }

    .corporate-container {
        padding-left: 60px !important;
        padding-right: 60px !important;
    }

    .custom-page-container {
        padding: 50px 60px 50px 60px;
    }

    .custom-page-has-content {
        padding-top: 30px;
    }

    .dm-container {
        padding-left: 60px !important;
        padding-right: 60px !important;
    }

    .dm-list-grid {
        grid-template-columns: repeat(auto-fill, 298px); /* md：298px，間距 47px */
        gap: 24px 47px;
        max-width:645px;
    }

    .dm-page-container {
        max-width: 648px;
    }

    .dm-main-stage {
        display: block !important;
        position: relative;
        transition: height 0.3s ease;
    }

    .dm-main-img-wrap {
        display: none !important;
    }

        .dm-main-img-wrap.active {
            display: flex !important;
            justify-content: center;
            height: fit-content;
        }

        .dm-main-img-wrap .dm-zoom-viewport {
            touch-action: auto;
            display: inline-block;
        }

    .dm-main-img {
        display: block;
        width: auto;
        max-width: 100%;
        height: auto;
        transform: none !important;
    }

    .dm-zoom-bar {
        display: none;
    }

    .traffic-row,
    .traffic-row-reverse {
        flex-direction: column;
        gap: 20px;
    }

    .traffic-row-img {
        flex: none;
        max-width: 100%;
        width: 100%;
    }

    .traffic-section-gap {
        margin-top: 40px;
    }

    .traffic-discount-body {
        flex-direction: row; /* md：持卡優惠、滿額優惠左右並排 */
        gap: 40px;
        width: 100%;
    }

    .traffic-row-discount-img {
        flex: none;
        max-width: 100%;
        width: 100%;
    }

    .about-section-gap {
        margin-top: 40px !important;
    }

    .about-row {
        flex-direction: column-reverse; /* 耐斯生活：HTML 圖在前 → 文上圖下 */
        gap: 24px;
    }

    .about-row-reverse {
        flex-direction: column; /* 劍湖山：HTML 文在前... */
        gap: 24px;
    }

    .about-row-img {
        flex: none;
        max-width: 100%;
        width: 100%;
    }

    /* 主色塊：比圓圖大一圈、偏右上 */
    .about-row-reverse .about-row-img::before {
        content: "";
        position: absolute;
        top: -30%;
        right:0px;
        width: 140%;
        height: 140%;
    }

    .milestone-section {
        padding: 40px 24px;
    }

    .milestone-item {
        padding-left: 40px; /* 縮短虛線區 */
        gap: 20px;
    }

        .milestone-item::after {
            width: 20px;
        }

    .milestone-img {
        width: 80px;
        height: 80px;
    }

    .milestone-item:nth-child(odd) {
        padding-left: 46px;
    }

        .milestone-item:nth-child(odd)::after {
            width: 24px;
        }

    .milestone-item:nth-child(even) {
        padding-left: 32px;
    }

        .milestone-item:nth-child(even)::after {
            width: 10px;
        }

    .contact-container {
        max-width: 700px;
    }

    .event-modal-box {
        max-width: 700px;
        padding: 48px 32px 40px 32px;
    }

    .event-session-summary {
        flex-direction: column;
        gap: 16px;
    }

    .event-session-summary-img {
        flex: none;
        max-width: 100%;
        width: 100%;
    }

    .event-login-form {
        padding: 16px 24px
    }
    /* --- 27. Login Modal (md) --- */
    .login-modal-box {
        max-width: 520px;
        margin: 40px auto;
    }

    .login-modal-layout {
        flex-direction: column;
    }

    .login-modal-info {
        flex: none;
        padding: 32px 40px;
    }
    /* --- 28. Register (md) --- */
    .register-container {
        max-width: 600px;
    }

    .verify-modal-box {
        max-width: 520px;
        padding: 48px 32px 40px;
    }

    /* -- 點數查詢 RWD md -- */
    .bonus-record {
        padding-left: 29px;
        padding-right: 29px;
    }

    .bonus-record__card-img {
        max-width: 160px;
    }

    .bonus-record__table tbody td {
        padding: 18px 20px;
    }
    /* -- 會員資料 RWD sm -- */
    .profile-mobile-row {
        flex-wrap: wrap;
    }

    .profile-btn-mobile {
        width: 100%;
        text-align: center;
        margin-top: 8px;
    }
    /* -- 點數專區列表 RWD md -- */
    .point-zone {
        padding-left: 29px;
        padding-right: 29px;
    }

    .point-zone__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

    /* -- 點數專區內頁 RWD md -- */
    .pz-detail-plaza {
        padding-left: 29px;
        padding-right: 29px;
    }
    /* -- 我的票匣 RWD md -- */
    .tk {
        padding-left: 29px;
        padding-right: 29px;
    }

    .tk__card-content-xl {
        display: none;
    }

    .tk__card-expand-area {
        display: block;
    }

    /* -- 我的票匣 RWD md 追加 -- */

    /* 隱藏 xl 右欄日期，改用 body 內的 inline 日期 */
    .tk__card-date {
        display: none;
    }

    .tk__card-date-inline {
        display: flex;
        align-items: baseline;
        gap: 12px;
        margin-top: 8px;
        flex-wrap: wrap;
    }

        .tk__card-date-inline .tk__card-remain {
            margin-top: 0;
        }

    .tk__card-date-inline-group {
        display: inline-flex;
        align-items: baseline;
    }
    /* --- Footer md --- */
    .footer-inner {
        flex-direction: column;
        align-items: center;
        padding: 40px 40px 0;
        gap: 32px;
    }

    .footer-info-group {
        width: 100%;
    }

    .footer-info-col:first-child .footer-list {
        grid-template-columns: 1fr 1fr;
        gap: 10px 16px;
    }

    .footer-bottom {
        padding: 0 40px 20px;
    }
}

/* --- [ 手機斷點：576px 以下 (sm, xs 等) ] --- */
@media (max-width: 576px) {
    /* --- Figma 排版通用類別 (SM 斷點) --- */
    .typo-sm-10-m {
        font-size: 10px !important;
        font-weight: var(--font-weight-medium) !important;
        line-height: 14px !important;
        letter-spacing: 1px !important;
    }

    .typo-sm-12-r {
        font-size: 12px !important;
        font-weight: var(--font-weight-normal) !important;
        line-height: 14.5px !important;
        letter-spacing: 0px !important;
    }

    .typo-sm-12-m {
        font-size: 12px !important;
        font-weight: var(--font-weight-medium) !important;
        line-height: 14.5px !important;
        letter-spacing: 0.8px !important;
    }

    .typo-sm-14-390-web-text {
        font-size: 14px !important;
        font-weight: var(--font-weight-medium) !important;
        line-height: 20px !important;
        letter-spacing: 1px !important;
    }

    .typo-sm-14-m {
        font-size: 14px !important;
        font-weight: var(--font-weight-medium) !important;
        line-height: 22px !important;
        letter-spacing: 0.8px !important;
    }

    .typo-sm-16-390-web-text {
        font-size: 16px !important;
        font-weight: var(--font-weight-medium) !important;
        line-height: 18px !important;
        letter-spacing: 1px !important;
    }

    .typo-sm-16-m {
        font-size: 16px !important;
        font-weight: var(--font-weight-medium) !important;
        line-height: 28px !important;
        letter-spacing: 1px !important;
    }

    .typo-sm-18-m {
        font-size: 18px !important;
        font-weight: var(--font-weight-medium) !important;
        line-height: 32px !important;
        letter-spacing: 1.2px !important;
    }

    .typo-sm-20-sb {
        font-size: 20px !important;
        font-weight: var(--font-weight-semibold) !important;
        line-height: 28px !important;
        letter-spacing: 1.2px !important;
    }

    .typo-sm-24-sb {
        font-size: 24px !important;
        font-weight: var(--font-weight-semibold) !important;
        line-height: 34px !important;
        letter-spacing: 1.3px !important;
    }

    .typo-sm-32-r {
        font-size: 32px !important;
        font-weight: var(--font-weight-normal) !important;
        line-height: 38.7px !important;
        letter-spacing: 1.5px !important;
    }

    .typo-sm-32-sb {
        font-size: 32px !important;
        font-weight: var(--font-weight-semibold) !important;
        line-height: 38.7px !important;
        letter-spacing: 1.5px !important;
    }

    .typo-sm-48-sb {
        font-size: 48px !important;
        font-weight: var(--font-weight-semibold) !important;
        line-height: 58.1px !important;
        letter-spacing: 1.5px !important;
    }
    /* 首頁覆寫 */
    .home-container {
        max-width: 330px;
    }
    .home-carousel-img {
        border-radius: 0 0 50px 50px;
    }

    .slick-carousel-home .slick-list {
        border-radius: 0 0 50px 50px;
        padding: 0 15px;
    }
    .news-section-bg::before {
        top: -50px;
        left: -17%;
        width: 407px;
        height: 402px;
        transform: rotate(65deg);
    }

    .news-type-img {
        aspect-ratio: 330 / 234;
    }

    .brand-section-bg::after {
        background-image: url('../images/circle-orange.png');
        background-size: 165%; /* 在這裡調整數值，例如改為 50% 或 200px */
        background-position: center;
        background-repeat: no-repeat;
        z-index: -1;
        opacity: 0.3;
    }

    .brand-en {
        font-size: 14px;
        font-weight: var(--font-weight-medium);
        line-height: 15px;
        letter-spacing: 0.7px;
    }

    .floor-section-bg::before {
        width: 900px;
        height: 629px;
        top: 15rem;
        left: -300px;
    }

    .floor-section-bg::after {
        width: 450px;
        height: 450px;
        top: -100px;
    }

    .outside-card {
        padding: 24px 20px;
        flex-direction: column;
        text-align: center;
        gap: 12px;
    }

    .outside-card-arrow {
        display: none;
    }

    .outside-card-icon {
        width: 56px;
        height: 56px;
    }
    .outsite-section {
        background-image: url('../images/outsite-bg.png');
        background-size:cover;
    }

    /* News 列表覆寫 */
    .page-hero-section {
        height: 195px;
    }

    .news-list-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .news-list-card-img {
        aspect-ratio: 150 / 106;
    }

    /* 工具類覆寫 */
    .w-sm-100 {
        width: 100% !important;
    }

    /* 字體大小響應式覆寫 (由 C# 傳入的結構) */
    .news-date-text {
        font-size: 12px !important;
        font-weight: var(--font-weight-medium) !important;
        line-height: 14.5px !important;
        letter-spacing: 0.8px !important;
    }

    .news-title {
        font-size: 14px !important;
        font-weight: var(--font-weight-medium) !important;
        line-height: 22px !important;
        letter-spacing: 0.8px !important;
    }

    /*    熱門搜尋內頁*/
    .news-article-container {
        padding-top: 30px;
        padding-bottom: 30px;
    }

    .news-content-type-title {
        margin-top: 30px;
    }

    .content-limit-container {
        max-width: 330px;
        min-width: 330px;
    }

    .news-info-card {
        padding: 20px;
    }

    .news-info-img {
        aspect-ratio: 290 / 158;
    }


    .news-info-meta {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
        margin-top: 16px;
    }



    .news-share-wrap.mx-auto .news-share-menu {
        left: 50%;
        right: auto;
        transform: translateX(-50%);
    }


    .brand-type-icon-circle {
        width: 70px;
        height: 70px;
    }

        .brand-type-icon-circle img {
            width: 30px;
            height: 30px;
            object-fit: contain;
            transition: filter 0.3s ease;
        }


    .brand-type-header-icon {
        width: 40px;
        height: 40px;
    }

    .brand-list-container {
        padding-left: 30px !important;
        padding-right: 30px !important;
    }

    .brand-list-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .accordion-item {
        padding: 15px 20px 15px 20px;
    }

    .member-card-img-wrap {
        width: 100%; /* sm 直向排列，圖片滿版 */
    }

    .member-card-description {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
    }


    .corporate-container {
        padding-left: 30px !important;
        padding-right: 30px !important;
    }

    .custom-page-container {
        padding: 30px 30px 30px 30px;
    }

    .custom-page-has-content {
        padding-top: 16px;
    }

    .dm-container {
        padding-left: 30px !important;
        padding-right: 30px !important;
    }

    .dm-list-grid {
        grid-template-columns: 298px; /* sm：單欄置中 */
        gap: 30px; /* 上下間距 30px */
    }

    .dm-page-container {
        max-width: 330px;
    }

    .dm-thumbs-scroll {
        gap: 16px; /* sm 間距 16 */
    }

    .dm-thumb-item {
        width: 80px; /* sm：80×80 */
        height: 80px;
        padding: 10px !important;
    }


    .traffic-card {
        width: 100%;
    }

    .traffic-dark-section {
        padding: 40px 24px;
    }

    .traffic-num-list li,
    .traffic-discount-row {
        font-size: 14px;
        line-height: 24px;
    }

    .traffic-discount-body {
        flex-direction: column; /* sm：堆回直向 */
        gap: 24px;
    }

    .about-h2 {
        font-size: 22px !important;
    }

    .milestone-item {
        padding-left: 28px;
        gap: 14px;
    }

        .milestone-item::after {
            width: 10px;
        }

    .milestone-img {
        width: 64px;
        height: 64px;
    }

    .milestone-year {
        font-size: 18px !important;
    }

    .milestone-event {
        font-size: 16px;
    }


    .milestone-item:nth-child(odd) {
        padding-left: 34px;
    }

        .milestone-item:nth-child(odd)::after {
            width: 14px;
        }

    .milestone-item:nth-child(even) {
        padding-left: 24px;
    }

        .milestone-item:nth-child(even)::after {
            width: 6px;
        }

    .contact-container {
        padding: 30px 24px;
    }

    .content-note {
        margin-bottom: 16px;
    }

    .contact-field-row {
        flex-direction: column; /* sm：label 在上、input 在下 */
        gap: 8px;
        margin-bottom: 20px;
    }

    .contact-label {
        flex: none;
        padding-top: 0;
    }

    .contact-input-wrap {
        width: 100%;
    }

    .contact-btn-row {
        gap: 16px;
    }

    .event-modal-box {
        padding: 48px 20px 32px 20px;
    }

    .event-modal-btn-row {
        gap: 12px;
    }

    .session-table-header,
    .session-table-row {
        padding: 12px 16px;
    }
    .login-modal-box {
        max-width: 95dvh;
        margin: 40px auto;
    }

    .login-modal-layout {
        flex-direction: column;
    }

    .login-modal-form {
        padding: 30px 28px;
    }

    .login-modal-info {
        flex: none;
        padding: 30px 28px;
    }
    .login-modal-field{
        margin-bottom:0px;
    }
    .login-modal-info-desc{
        margin-bottom:30px;
    }
    .login-modal-benefit-icon img{
        width:30px;
        height:30px;
    }
    /* --- 28. Register (xs) --- */
    .register-container {
        padding: 30px 20px 48px;
    }

    .register-form-title {
        font-size: 22px;
        gap: 8px;
    }

    .register-birth-group {
        gap: 6px;
    }

    .register-address-group {
        flex-direction: column;
        gap: 10px;
    }

        .register-address-group select {
            flex: none;
        }

    .register-privacy {
        text-align: start;
    }

    .verify-modal-box {
        padding: 48px 20px 32px;
    }

    /* -- 點數查詢 RWD sm -- */
    .bonus-record {
        padding: 0 16px 48px;
    }

    .bonus-record__top {
        flex-direction: column;
        gap: 16px;
        padding: 24px 0;
    }

    .bonus-record__card {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 8px;
    }

    .bonus-record__card-info {
        flex-direction: row-reverse;
        align-items: center;
        gap: 6px;
    }

        .bonus-record__card-info p {
            margin-bottom: 0;
        }

    .bonus-record__card-img {
        max-width: 100%;
    }

    .bonus-record__summary {
        padding: 24px 20px;
    }

    .bonus-record__summary-top {
        align-items: center;
        text-align: center;
    }

    .bonus-record__summary-header {
        font-size: 16px;
        color: var(--color-text);
        text-align: start;
        margin-bottom: 15px;
    }

    .bonus-record__summary-value {
        font-size: 32px;
    }

    .bonus-record__summary-desc {
        text-align: center;
    }

    .bonus-record__summary-expire {
        justify-content: space-between;
        border-top: 1px solid var(--color-light-gray);
        padding-top: 24px;
        margin-top: 24px;
    }

    .bonus-record__expire-item {
        align-items: start;
        text-align: start;
    }

        .bonus-record__expire-item + .bonus-record__expire-item {
            padding-left: 0;
            border: none;
        }

    .bonus-record__history-header {
        align-items: center;
        gap: 16px;
    }

    .bonus-record__history-title {
        font-size: 24px;
        margin-bottom: 0;
    }

    .bonus-record__tab {
        padding: 8px 24px;
        font-size: 14px;
    }

    /* 手機版隱藏類型欄 */
    .bonus-table thead th:nth-child(3),
    .bonus-table tbody td:nth-child(3) {
        display: none;
    }

    .bonus-record__table thead th {
        font-size: 13px;
        padding: 10px 12px;
    }

    .bonus-record__table tbody td {
        padding: 14px 12px;
        font-size: 14px;
    }

    .bonus-record__points {
        font-size: 16px;
    }

    /* -- 會員資料 RWD sm -- */
    .profile-mobile-row {
        flex-wrap: wrap;
    }

    .profile-btn-mobile {
        width: 100%;
        text-align: center;
        margin-top: 8px;
    }

    /* -- 點數專區列表 RWD sm -- */
    .point-zone {
        padding: 30px;
    }

    .point-zone__grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    /* -- 點數專區內頁 RWD sm -- */
    .pz-detail-plaza {
        padding: 1.5rem 1.5rem 48px;
    }

    .pz-card {
        flex-direction: column;
        align-items: center;
        gap: 16px;
        padding: 16px;
    }

    .pz-card__img {
        flex: none;
        width: 100%;
        max-width: 280px;
        height: auto;
        aspect-ratio: 1 / 1;
    }

    .pz-card__body {
        width: 100%;
    }

    .pz-card__header {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .pz-card__footer {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .pz-info {
        margin-top: 24px;
    }


    .pz-info__title-sub {
        margin-left: 8px;
    }

    .pz-info__divider {
        margin: 0 0 20px;
    }



    .pz-info__redeem-btn {
        width: 100%;
        max-width: 100%;
    }

    /* -- 我的票匣 RWD sm -- */
    .tk {
        padding: 0 16px 48px;
    }

    .tk__tabs {
        padding: 16px 0 12px;
    }

    .tk__tab {
        font-size: 14px;
        padding: 6px 16px;
    }

    .tk__card-main {
        flex-direction: column;
        align-items: flex-start;
        padding: 16px;
        gap: 12px;
    }

    .tk__card-label {
        flex: none;
        width: 100%;
        min-height: auto;
        padding: 12px 16px;
        flex-direction: row;
        gap: 12px;
    }

    .tk__card-label-text {
        font-size: 16px;
    }

    /* 原本的 .tk__card-date sm 樣式刪掉，因為 xl 的 date 欄在 md 已隱藏 */

    .tk__card-date-inline {
        display: flex;
        flex-direction: column;
        gap: 4px;
        margin-top: 8px;
    }

        .tk__card-date-inline .tk__card-remain {
            margin-top: 0;
        }

    .tk__card-date-inline-group {
        display: inline-flex;
        align-items: baseline;
    }

    .tk__card-divider {
        margin: 0 16px;
    }

    .tk__card-detail {
        padding: 12px 16px 0;
    }

    .tk__card-title {
        font-size: 16px;
    }

    /* --- Footer sm --- */
    .footer-inner {
        flex-direction: column;
        align-items: center;
        padding: 32px 24px 0;
        gap: 0;
    }

    .footer-logo-col {
        margin-bottom: 24px;
    }

    .footer-brand-title {
        font-size: 24px;
    }

    .footer-brand-sub {
        font-size: 14px;
    }

    .footer-brand-desc {
        font-size: 12px;
    }

    .footer-info-group {
        flex-direction: column;
        gap: 24px;
    }

    .footer-info-col:first-child .footer-list {
        grid-template-columns: 1fr 1fr;
        gap: 8px 16px;
    }

    .footer-app-col {
        align-items: start;
        display: flex;
        flex-direction: column;
    }

    .footer-qrcode {
        width: 100px;
        height: 100px;
    }

    .footer-bottom {
        padding: 0 24px 20px;
    }

    .footer-bottom-divider {
        margin: 24px 0 16px;
    }

    /* --- Footer sm --- */
    /* --- Footer sm 底部 --- */
    .footer-bottom-content {
        flex-direction: column;
        align-items: center;
        gap: 12px;
    }

    .footer-bottom-left {
        flex-direction: column;
        align-items: center;
        gap: 12px;
    }

    .footer-sep-social {
        display: none;
    }

    .footer-social {
        order: -1;
    }

    .scroll-to-top {
        bottom: 20px;
        right: 20px;
    }

    .title {
        margin-right: 0px !important;
        padding-top:20px;
    }
    .hero-subtitle::after {
        bottom: -8px;
    }
    .page-hero-bg-about {
        /* 將原本的 cover 替換為你想要的放大比例，例如 120% 或 150% */
        background: url('../images/about_us_hero_bg.png') right 65% / 185% auto no-repeat;
        z-index: 0;
    }
    .page-nav-dots {
        width: 16px;
        height: 28px;
        font-size: 13px;
    }
}