/* 語言載入防閃爍 (Anti-FOUC for i18n) */
html.i18n-loading [data-i18n],
html.i18n-loading [data-i18n-ph] {
    opacity: 0 !important;
    transition: none !important;
}

body {
    background-color: #f1f4f8; /* 頂級質感灰白色，告別死白 */
    color: #334155;
    overflow-x: hidden; /* 防止手機版左右滑動 */
    margin: 0;
    padding: 0;
    width: 100%;
}

/* 預覽模式模擬外框 (非強制，僅供預覽切換使用) */
#app-wrapper {
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    min-height: 100vh;
    background-color: #f1f4f8; /* 全站質感灰白底色 */
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    margin: 0 auto;
}

/* 當啟用預覽用的手機模式時 */
#app-wrapper.mobile-mode-sim {
    max-width: 414px;
    margin: 20px auto;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    border-radius: 30px;
    overflow: hidden;
    border: 8px solid #1f2937;
    height: 90vh;
    overflow-y: auto;
}

/* 在模擬手機模式下，強制覆蓋視窗寬度判斷，顯示手機版 UI */
#app-wrapper.mobile-mode-sim .desktop-only {
    display: none !important;
}
#app-wrapper.mobile-mode-sim .mobile-only {
    display: flex !important;
}
#app-wrapper.mobile-mode-sim #mobile-menu:not(.hidden) {
    display: block !important;
}

/* 導覽列樣式 (高科技晶亮果凍藍) */
.nav-link {
    position: relative;
    color: #4b5563;
    font-weight: 600;
    padding: 0.5rem 0;
    transition: color 0.3s, text-shadow 0.3s;
    cursor: pointer;
    white-space: nowrap;
    font-size: 1rem;
}
.nav-link:hover, .nav-link.active {
    color: #0076ff;
    text-shadow: 0 0 16px rgba(0, 198, 255, 0.4);
}
.nav-link::after {
    content: '';
    position: absolute;
    width: 0;
    height: 3px;
    bottom: -4px;
    left: 50%;
    background: linear-gradient(90deg, #00c6ff 0%, #0076ff 100%);
    box-shadow: 0 2px 8px rgba(0, 118, 255, 0.6);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    transform: translateX(-50%);
    border-radius: 9999px;
}
.nav-link:hover::after, .nav-link.active::after {
    width: 100%;
}

/* PC版下拉選單 */
.nav-item-dropdown {
    position: relative;
    display: inline-block;
}
.dropdown-menu {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    transition: all 0.3s ease;
    background-color: white;
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
    border-radius: 0.5rem;
    min-width: 160px;
    z-index: 50;
    padding: 0.5rem 0;
    border: 1px solid #e5e7eb;
}
.nav-item-dropdown:hover .dropdown-menu {
    visibility: visible;
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}
.dropdown-item {
    display: block;
    padding: 0.75rem 1.5rem;
    color: #4b5563;
    font-size: 0.95rem;
    transition: background-color 0.2s, color 0.2s;
    cursor: pointer;
    text-align: center;
}
.dropdown-item:hover {
    background-color: #f0f5fa;
    color: #005bac;
}

.lang-menu {
    left: auto;
    right: 0;
    transform: translateX(0) translateY(10px);
    min-width: 120px;
}
.nav-item-dropdown:hover .lang-menu {
    transform: translateX(0) translateY(0);
}

/* 確保文字在手機版不會垂直擠壓 */
.word-break-fix {
    word-break: break-word;
    overflow-wrap: break-word;
}

/* 高科技微動態果凍藍漸層 (Micro-Dynamic High-Tech Jelly Blue - 柔和深邃、無刺眼眩光) */
.tech-gradient {
    background: linear-gradient(135deg, #020d1e 0%, #051937 25%, #082855 55%, #0c3875 80%, #051b3d 100%);
    background-size: 160% 160%;
    animation: jellyFlow 14s ease-in-out infinite;
}
@keyframes jellyFlow {
    0% { background-position: 0% 35%; }
    50% { background-position: 100% 65%; }
    100% { background-position: 0% 35%; }
}

/* 晶亮果凍藍按鈕 (Jelly Blue Glass Button with micro-sheen) */
.btn-sheen {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #0066ee 0%, #0088ff 50%, #0052cc 100%) !important;
    background-size: 200% 200% !important;
    animation: jellyBtnShift 8s ease infinite !important;
    box-shadow: 0 8px 24px -4px rgba(0, 102, 238, 0.4), inset 0 1px 1px rgba(255, 255, 255, 0.4) !important;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
@keyframes jellyBtnShift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}
.btn-sheen:hover {
    background: linear-gradient(135deg, #0052cc 0%, #0099ff 50%, #0040b3 100%) !important;
    box-shadow: 0 12px 28px -4px rgba(0, 136, 255, 0.55), inset 0 1px 2px rgba(255, 255, 255, 0.6) !important;
    transform: translateY(-2px);
}
.btn-sheen::before {
    content: "";
    position: absolute;
    top: 0; left: -75%;
    width: 50%; height: 100%;
    background: linear-gradient(120deg, transparent, rgba(255,255,255,0.4), transparent);
    transform: skewX(-20deg);
    transition: left 0.75s ease;
}
.btn-sheen:hover::before { left: 130%; }

/* 果凍藍透光圖示盒 */
.jelly-glow-icon {
    background: linear-gradient(135deg, rgba(0, 198, 255, 0.15) 0%, rgba(0, 118, 255, 0.08) 100%);
    border: 1px solid rgba(0, 198, 255, 0.3);
    box-shadow: 0 8px 20px -4px rgba(0, 150, 255, 0.25), inset 0 1px 2px rgba(255, 255, 255, 0.8);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.jelly-glow-icon:hover {
    transform: scale(1.06);
    box-shadow: 0 12px 28px -4px rgba(0, 198, 255, 0.45);
}

/* 滾動顯現動畫：響應式平滑滑入，手機端靈巧順暢不卡頓 */
.scroll-reveal-left {
    opacity: 0 !important;
    transform: translateX(-32px) !important;
    transition: opacity 0.65s cubic-bezier(0.16, 1, 0.3, 1), transform 0.65s cubic-bezier(0.16, 1, 0.3, 1) !important;
    will-change: opacity, transform;
}
@media (min-width: 768px) {
    .scroll-reveal-left {
        transform: translateX(-50px) !important;
        transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1) !important;
    }
}
.scroll-reveal-left.revealed {
    opacity: 1 !important;
    transform: translateX(0) !important;
}

/* 全站可愛高科技五角星底紋 (Cute & Tech 5-Point Star Background) */
.bg-luxury-stars {
    background-image: url("star-luxury.svg");
    background-repeat: no-repeat;
    background-position: left -60px top -40px;
    background-size: 540px 540px;
}
@media (min-width: 1024px) {
    .bg-luxury-stars {
        background-size: 680px 680px;
        background-position: left -80px top -50px;
    }
}
.bg-luxury-stars-alt {
    background-image: url("star-luxury.svg");
    background-repeat: no-repeat;
    background-position: right -60px bottom -40px;
    background-size: 560px 560px;
}
@media (min-width: 1024px) {
    .bg-luxury-stars-alt {
        background-size: 700px 700px;
        background-position: right -80px bottom -50px;
    }
}

/* 獨立可愛星芒裝飾組件 (小朋友喜愛的科技五角星，輕盈呼吸微旋轉) */
.luxury-star-ambient {
    background-image: url("star-luxury.svg");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    pointer-events: none;
    z-index: 1;
    animation: starAmbientBreathe 12s ease-in-out infinite;
}
@keyframes starAmbientBreathe {
    0%, 100% { opacity: 0.12; transform: scale(0.98) rotate(0deg); }
    50% { opacity: 0.22; transform: scale(1.03) rotate(3deg); }
}

.bg-primary-900, .bg-primary-800 {
    background-image: radial-gradient(ellipse at top, rgba(0, 118, 255, 0.3), transparent 70%);
}

@keyframes pulseGlow {
    0%, 100% { opacity: 0.18; transform: scale(1); }
    50% { opacity: 0.42; transform: scale(1.15); }
}
.animate-pulse-glow {
    animation: pulseGlow 6s ease-in-out infinite;
}

/* 果凍藍卡片頂部細緻光邊，強化質感 */
.card-glow-top {
    position: relative;
}
.card-glow-top::after {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; height: 2px;
    background: linear-gradient(90deg, transparent, #00c6ff, #0072ff, transparent);
    pointer-events: none;
}

#custom-modal { display: none; }
#custom-modal.active { display: flex; animation: fadeIn 0.3s ease-out forwards; }

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(15px); }
    to { opacity: 1; transform: translateY(0); }
}

/* 零網路請求本地立體方塊底紋 */
.bg-pattern-cubes {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.08'%3E%3Cpath d='M0 38.59l2.83-2.83 1.41 1.41L1.41 40H0v-1.41zM0 1.4l2.83 2.83 1.41-1.41L1.41 0H0v1.41zM38.59 40l-2.83-2.83 1.41-1.41L40 38.59V40h-1.41zM40 1.41l-2.83 2.83-1.41-1.41L38.59 0H40v1.41zM20 18.6l2.83-2.83 1.41 1.41L21.41 20l2.83 2.83-1.41 1.41L20 21.41l-2.83 2.83-1.41-1.41L18.59 20l-2.83-2.83 1.41-1.41L20 18.59z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

/* ==========================================================================
   圖片抗閃爍與極速渲染防護 (Zero Layout Shift & Anti-Flicker)
   ========================================================================== */
img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* 導覽列 Logo：純 CSS 精確尺寸與間距，杜絕位移與覆蓋文字 */
.nav-logo-img {
    height: 2.65rem;
    width: auto;
    object-fit: contain;
    display: inline-block;
    flex-shrink: 0;
    margin-right: 0.35rem;
}
@media (min-width: 768px) {
    .nav-logo-img {
        height: 3.65rem;
        margin-right: 0.5rem;
    }
}

/* 手機版選單平滑展開動效，提升操作滑順感 */
#mobile-menu:not(.hidden) {
    animation: mobileMenuSlide 0.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes mobileMenuSlide {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 無縫瞬間換頁過渡動效 */
main.page-transition-enter {
    animation: pageFadeEnter 0.15s ease-out forwards;
}
@keyframes pageFadeEnter {
    from { opacity: 0.85; transform: translateY(3px); }
    to { opacity: 1; transform: translateY(0); }
}

/* 首頁 4 大特色卡片封面圖片：4 個角全部修半圓 (YouTube 縮圖風格) */
.card-img-cover {
    width: 100%;
    height: 18rem;
    object-fit: cover;
    background-color: #0b1a2d;
    display: block;
    border-radius: 1.25rem;
}
@media (min-width: 768px) {
    .card-img-cover {
        height: 22rem;
        border-radius: 1.5rem;
    }
}
@media (min-width: 1024px) {
    .card-img-cover {
        height: 24rem;
        border-radius: 1.75rem;
    }
}

/* 內容區圖片佔位容器 */
.img-box-placeholder {
    background-color: #f1f5f9;
    border-radius: 1.5rem;
    overflow: hidden;
}

/* 圖片輪播組件通用樣式 */
.slider-container {
    position: relative;
    overflow: hidden;
    width: 100%;
    background-color: #0b1a2d;
}
.slider-slide {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease-in-out, visibility 0.4s ease-in-out;
    pointer-events: none;
}
.slider-slide.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}
.slider-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 20;
    background-color: rgba(0, 0, 0, 0.35);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    color: #ffffff;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 9999px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.25);
    transition: all 0.25s ease;
    cursor: pointer;
}
.slider-btn:hover {
    background-color: rgba(0, 0, 0, 0.7);
    border-color: rgba(255, 255, 255, 0.6);
    transform: translateY(-50%) scale(1.08);
}
@media (min-width: 768px) {
    .slider-btn {
        width: 2.75rem;
        height: 2.75rem;
    }
}
.slider-btn-prev {
    left: 0.75rem;
}
.slider-btn-next {
    right: 0.75rem;
}
.slider-dots {
    position: absolute;
    bottom: 0.85rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 0.4rem;
    z-index: 20;
}
.slider-dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 9999px;
    background-color: rgba(255, 255, 255, 0.4);
    transition: all 0.3s ease;
    cursor: pointer;
}
.slider-dot.active {
    background-color: #ffffff;
    width: 1.25rem;
}