/*@font-face {
    font-family: "MixSansSerif";*/
    /*src: local("Noto Sans TC");*/
    /*src: local("Noto Sans TC"), local("PingFang TC"), local("Microsoft JhengHei");
    unicode-range: U+4E00-9FFF;*/ /* 中文 */
/*}

@font-face {
    font-family: "MixSansSerif";*/
    /*src: local("Noto Serif TC");*/
    /*src: local("Playfair Display");
    unicode-range: U+0020-007E;*/ /* 英文 */
    /*unicode-range: U+0000-00FF;*/
/*}*/

/* ================================
   Default Theme = LIGHT
   ================================ */

/*body {
    font-family: "MixSansSerif", serif;
    font-language-override: "ZHT";
    background: #e9e5dc;*/ /* 暖白紙張感 */
    /*color: #1f2430;
}*/
body {
    /*font-family: "Playfair Display", "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;*/
    font-family: "Playfair Display", "Noto Sans TC", sans-serif;
    font-language-override: "ZHT";
    background: #e9e5dc; /* 暖白紙張感 */
    color: #1f2430;
}

/* Luxury Background (LIGHT default) */
.luxury-bg {
    background:
    /* 中央整體亮區（沒有上下方向性） */
    radial-gradient( ellipse at center, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0.35) 40%, transparent 70% ),
    /* 左右非常輕的收邊（不影響上下） */
    linear-gradient( to right, rgba(0, 0, 0, 0.04), transparent 22%, transparent 78%, rgba(0, 0, 0, 0.04) ),
    /* 均勻底色（無方向） */
    #e3e6eb;
    position: relative;
}


/*.luxury-bg::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background-image: radial-gradient(circle at 12% 18%, rgba(255, 255, 255, 0.35) 0%, transparent 55%), radial-gradient(circle at 72% 28%, rgba(255, 255, 255, 0.28) 0%, transparent 60%), radial-gradient(circle at 38% 70%, rgba(255, 255, 255, 0.24) 0%, transparent 65%), radial-gradient(circle at 90% 85%, rgba(255, 255, 255, 0.20) 0%, transparent 65%), radial-gradient(circle at 25% 40%, rgba(255, 255, 255, 0.14) 0%, transparent 80%), radial-gradient(circle at 60% 55%, rgba(255, 255, 255, 0.12) 0%, transparent 80%);
    opacity: 0.26;
    mix-blend-mode: normal;
}

.luxury-bg::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background-image: linear-gradient( 115deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0.06) 18%, transparent 38%, transparent 62%, rgba(255, 255, 255, 0.08) 82%, rgba(255, 255, 255, 0.18) 100% );
    opacity: 0.16;
    mix-blend-mode: normal;
}*/

.luxury-article-bg {
    position: relative;
    background: #f7f8f9;
}

/* Sparkle (LIGHT default) */
#sparkles {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0; /* 在背景層 */
}
.sparkle {
    position: absolute;
    border-radius: 50%;
    /* 柔焦夢幻漸層（沒有硬邊） */
    background: radial-gradient( circle, rgba(255,255,255,0.9) 0%, rgba(245,248,255,0.55) 35%, rgba(230,235,255,0.25) 60%, rgba(230,235,255,0.08) 75%, transparent 90% );
    /* 霧狀光暈（拿掉強烈白圈） */
    box-shadow: 0 0 12px rgba(255,255,255,0.35), 0 0 28px rgba(220,225,255,0.25), 0 0 60px rgba(200,210,255,0.15);
    mix-blend-mode: screen;
    filter: blur(0.3px);
    animation: sparkle 4s ease-in-out infinite;
}

.sparkle-small {
    width: 6px;
    height: 6px;
}

.sparkle-medium {
    width: 12px;
    height: 12px;
}

.sparkle-large {
    width: 18px;
    height: 18px;
}

.sparkle-xlarge {
    width: 26px;
    height: 26px;
}


@keyframes sparkle {
    0% {
        opacity: 0;
        transform: scale(0.6);
    }

    35% {
        opacity: 0.9;
        transform: scale(1);
    }

    65% {
        opacity: 0.7;
        transform: scale(0.95);
    }

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



@keyframes float {
    0%, 100% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-20px);
    }
}

/* Header / Footer glass (LIGHT default) */
.glass-header {
    background: rgba(255, 255, 255, 0.86);
    backdrop-filter: blur(22px);
    border-bottom-color: rgba(15, 23, 42, 0.08);
}

.glass-footer {
    background: rgba(253, 249, 241, 0.95);
    border-top-color: rgba(15, 23, 42, 0.08);
}

/* Gold (LIGHT default) */
.gold-text {
    color: #b8891f;
}

.gold-text-bright {
    background: linear-gradient(135deg, #ffd76a 0%, #d4a432 50%, #b88418 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.gold-border {
    border-color: rgba(184, 137, 31, 0.7);
    box-shadow: 0 0 18px rgba(184, 137, 31, 0.35);
}

.gold-bg {
    background: #d89a13; /*linear-gradient(135deg, #f6d776 10%, #d2962d 50%, #d2962d 100%);*/
    /*box-shadow: 0 10px 35px rgba(184, 137, 31, 0.45);*/
}

.gold-bg-luxury {
    background: linear-gradient( to bottom, #f4efe2 0%, #faf7f0 45%, #fdfcf9 75%, #ffffff 100% );
    border: 2px solid rgba(210, 200, 185, 0.32);
    box-shadow: 0 14px 32px rgba(180, 175, 165, 0.08), inset 0 1px 1px rgba(255, 255, 255, 0.9), inset 0 -1px 2px rgba(240, 236, 228, 0.35);
}

/* Card (LIGHT default) */
.luxury-card {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(18px);
    border: 1px solid rgba(15, 23, 42, 0.1);
    box-shadow: 0 2px 3px rgba(15, 23, 42, 0.05), 0 0 0 1px rgba(255, 255, 255, 0.7);
    transition: border-color 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease, transform 0.25s ease;
}

    .luxury-card:hover {
        border-color: rgba(184, 137, 31, 0.3);
        box-shadow: 0 6px 15px rgba(15, 23, 42, 0.2), 0 0 0 1px rgba(255, 255, 255, 0.7);
        transform: translateY(-2px);
    }
    .luxury-card:hover .luxury-card-title {
        background-image: var(--color-text-highlight);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
    }

    .luxury-card:hover .arrow {
        transform: translateX(5px);
    }

    /* Decorative */
    .gold-line,
    .gold-line-middle {
        height: 2px;
        background: linear-gradient(90deg, transparent 0%, rgba(184, 137, 31, 0.9) 50%, transparent 100%);
        margin: 2rem 0;
    }

.corner-decoration {
    border: 2px solid rgba(212, 175, 55, 0.22);
}

    .corner-decoration.top-left {
        top: 0;
        left: 0;
        border-right: none;
        border-bottom: none;
    }

    .corner-decoration.top-right {
        top: 0;
        right: 0;
        border-left: none;
        border-bottom: none;
    }

    .corner-decoration.bottom-left {
        bottom: 0;
        left: 0;
        border-right: none;
        border-top: none;
    }

    .corner-decoration.bottom-right {
        bottom: 0;
        right: 0;
        border-left: none;
        border-top: none;
    }

.highlight-line {
    border-left: 3px solid rgba(212, 175, 55, 0.8); /* 金色直線 */
}

.highlight-box {
    background: #f6f0e3;
    border: 1px solid #efddbe;
}

.benefit-badge {
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.16) 0%, rgba(212, 175, 55, 0.04) 100%);
    border: 1px solid rgba(184, 137, 31, 0.55);
}

.btn-gold {
    background: linear-gradient(135deg, #f6d776 0%, #d4af37 100%);
    color: #3b2b00;
    font-weight: 600;
    transition: all 0.3s ease;
    box-shadow: 0 4px 18px rgba(191, 148, 38, 0.4);
}

    .btn-gold:hover {
        transform: translateY(-2px);
        box-shadow: 0 7px 26px rgba(191, 148, 38, 0.55);
        background: linear-gradient(135deg, #ffe07a 0%, #e1b94a 100%);
    }

/* Article */
.article-tag {
    background: rgba(255, 250, 238, 0.96);
    color: #b8891f;
    border-color: rgba(184, 137, 31, 0.7);
}

.article-panel {
    background: #f6efe4;
    border: 1px solid #f0e0c4;
    position: relative;
    overflow: hidden;
    /*box-shadow: 0 16px 40px rgba(15, 23, 42, 0.08);*/
}

.article-panel-orb {
    background: radial-gradient(circle at center, rgba(212, 175, 55, 0.18), transparent 70%);
    filter: blur(18px);
}

.article-line {
    border: 1px solid #f0e0c4;
}

.article-pill {
    background: #f4f3f1;
    border: 1px solid #dadada;
    box-shadow: 0 8px 15px rgba(15, 23, 42, 0.04);
}

.article-gradient-cta {
    background: linear-gradient(135deg, rgba(255, 248, 230, 0.9) 0%, rgba(255, 255, 255, 0.95) 100%);
    border: 2px solid rgba(184, 137, 31, 0.6);
    position: relative;
    overflow: hidden;
}

.article-gradient-overlay {
    background: radial-gradient(circle at center, rgba(212, 175, 55, 0.16), transparent 70%);
    filter: blur(20px);
}

.gold-panel-subtle {
    background: #fffaf0;
    border: 2px solid rgba(212, 175, 55, 0.3);
}

/* Lang dropdown (LIGHT default) */
#langDropdown {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(18px) saturate(1.25);
    border: 1px solid rgba(200, 200, 210, 0.55);
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.08);
}

.lang-option {
    border-bottom: 1px solid rgba(220, 220, 230, 0.6);
    color: #444;
    background: transparent;
}

    .lang-option:hover {
        background: linear-gradient(90deg, rgba(255, 255, 255, 0.8) 0%, rgba(240, 240, 255, 0.65) 100%);
        color: #bfa45a;
        transition: 0.25s ease;
    }

#langDropdown .lang-option:last-child {
    border-bottom: none;
}

.lang-icon {
    width: 16px;
    height: 16px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.3;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex-shrink: 0;
}

.lang-label {
    cursor: pointer;
}

/* Hero / section glow */
.hero-badge {
    background: rgba(255, 250, 238, 0.96);
    border-color: rgba(184, 137, 31, 0.55);
}

.hero-orb {
    background: radial-gradient(circle at center, rgba(212, 175, 55, 0.18), transparent 65%);
    filter: blur(18px);
}

.section-glow {
    background: linear-gradient(to bottom, transparent, rgba(212, 175, 55, 0.05), transparent);
}

/* Tailwind gray overrides in LIGHT (kept as-is) */
.text-gray-50 {
    color: #111827 !important;
}

.text-gray-100 {
    color: #111827 !important;
}

.text-gray-200 {
    color: #4b5563 !important;
}

.text-gray-300 {
    color: #4b5563 !important;
}

.text-gray-500 {
    color: #6b7280 !important;
}

.text-gray-600 {
    color: #9ca3af !important;
}

.border-gray-800 {
    border-color: rgba(15, 23, 42, 0.1) !important;
}

/* ================================
   Theme Tokens (Default = LIGHT)
   ================================ */
@layer base {
    :root {
        --color-text-primary: #30251d;
        --color-text-second-primary: #443a32;
        --color-text-highlight: linear-gradient(300deg, #ffd76a 0%, #d4a432 40%, #d4a432 70%, #ad7929 100%);
        --color-text-subtle: #847062;
        --color-text-emphasis: #d2962d;
    }
}

@layer utilities {
    .text-highlight {
        /*display: inline-block;*/
        background-image: var(--color-text-highlight);
        background-size: 100% 100%;
        background-repeat: no-repeat;
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
        -webkit-text-fill-color: transparent;
    }
}

/* ================================
   DARK Theme (opt-in)
   body[data-theme="dark"]
   ================================ */

body[data-theme="dark"] {
    background: #1a1a1a;
    color: #f5f5f7;
}

    /* Luxury Background (DARK opt-in) */
    body[data-theme="dark"] .luxury-bg {
        background: radial-gradient(circle at 20% 30%, rgba(212, 175, 55, 0.15) 0%, transparent 50%), radial-gradient(circle at 80% 70%, rgba(139, 116, 56, 0.12) 0%, transparent 50%), linear-gradient(135deg, #0f0f0f 0%, #1a1514 50%, #0a0a0a 100%);
        position: relative;
    }

        body[data-theme="dark"] .luxury-bg::before {
            content: "";
            position: absolute;
            inset: 0;
            pointer-events: none;
            background-image: repeating-linear-gradient(90deg, rgba(212, 175, 55, 0.04) 0px, transparent 2px, transparent 40px), repeating-linear-gradient(0deg, rgba(212, 175, 55, 0.04) 0px, transparent 2px, transparent 40px);
        }

    body[data-theme="dark"] .luxury-article-bg {
        background: #3d3d3d;
    }

    body[data-theme="dark"] .sparkle {
        background: radial-gradient(circle, #FFD700 0%, transparent 70%);
        opacity: 0;
        box-shadow: 0 0 10px rgba(212, 175, 55, 0.5);
    }

    body[data-theme="dark"] .sparkle-small {
        width: 3px;
        height: 3px;
    }

    body[data-theme="dark"] .sparkle-medium {
        width: 5px;
        height: 5px;
    }

    body[data-theme="dark"] .sparkle-large {
        width: 8px;
        height: 8px;
    }

    body[data-theme="dark"] .glass-header {
        background: rgba(20, 20, 20, 0.8);
        backdrop-filter: blur(20px);
    }

    body[data-theme="dark"] .glass-footer {
        background: rgba(15, 15, 15, 0.9);
    }

    body[data-theme="dark"] .gold-text {
        color: #D4AF37;
        text-shadow: 0 0 20px rgba(212, 175, 55, 0.3);
    }

    body[data-theme="dark"] .gold-border {
        border-color: #D4AF37;
        box-shadow: 0 0 20px rgba(212, 175, 55, 0.2);
    }

    body[data-theme="dark"] .gold-bg {
        background: linear-gradient(135deg, #D4AF37 0%, #B8941E 100%);
        box-shadow: 0 10px 40px rgba(212, 175, 55, 0.3);
    }

    body[data-theme="dark"] .gold-bg-luxury {
        background: linear-gradient(135deg, #2a2520 0%, #1a1614 100%);
        border: 2px solid rgba(212, 175, 55, 0.3);
        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(212, 175, 55, 0.1);
    }

    body[data-theme="dark"] .luxury-card {
        background: rgba(255, 255, 255, 0.06);
        backdrop-filter: blur(20px);
        border: 1px solid rgba(255, 255, 255, 0.12);
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.06);
    }

        body[data-theme="dark"] .luxury-card:hover {
            border-color: rgba(212, 175, 55, 0.6);
            background: rgba(255, 255, 255, 0.12);
            box-shadow: 0 20px 50px rgba(0, 0, 0, 0.55), 0 6px 20px rgba(212, 175, 55, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.12);
            transform: translateY(-4px);
        }

@layer base {
    body[data-theme="dark"] {
        --color-text-primary: #fff;
        --color-text-second-primary: #d4af37;
        --color-text-highlight: linear-gradient(90deg, #ffe2a3, #ffbb55);
        --color-text-subtle: #fcaa71;
        --color-text-emphasis: #ecdbbe;
    }
}