html, body {
    overflow-x: hidden; /* 強制隱藏超出的水平寬度 */
    width: 100%;
}

@media (max-width: 768px) {

    nav {
        /* 定位設定：強制固定 */
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        
        /* 尺寸設定：高度 90px */
        height: 90px !important;
        padding: 0 25px !important;
        
        /* 外觀與排版 */
        background-color: #121212 !important; /* 實色不透明 */
        box-shadow: 0 4px 10px rgba(0,0,0,0.5);
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        z-index: 10000 !important; /* 最高層級 */
        box-sizing: border-box !important;
    }

    /* --- [重要] 下拉選單 .nav-links 設定 --- */
    .nav-links {
        /* 定位設定：跟隨 Nav 固定 */
        position: fixed !important;
        top: 90px !important;       /* 距離頂部 90px (配合 Nav 高度) */
        right: 15px !important;     /* 靠右 */
        
        /* 外觀與尺寸 */
        width: 200px !important;
        height: auto !important;
        background-color: #1a1a1a !important; /* 選單背景 */
        border: 1px solid #444;
        border-radius: 8px;
        box-shadow: 0 10px 25px rgba(0,0,0,0.8);
        
        /* 排版 */
        display: flex !important;
        flex-direction: column !important;
        gap: 0;
        
        /* 動畫初始狀態 */
        opacity: 0;
        visibility: hidden;
        transform: translateY(-10px);
        transition: all 0.3s ease;
        z-index: 9999 !important;
    }

    /* 選單展開狀態 (JS 控制) */
    .nav-links.open {
        opacity: 1 !important;
        visibility: visible !important;
        transform: translateY(0) !important;
    }

    /* 選單連結樣式 */
    .nav-links li {
        width: 100%;
        display: block;
        text-align: center;
        margin: 0 !important;
    }

    .nav-links a {
        display: block !important;
        padding: 12px 0 !important;
        color: white !important;
        font-size: 1rem !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }
    
    .nav-links a:hover {
        background-color: #333;
        color: #3b82f6 !important;
    }

    /* 確保漢堡按鈕顯示 */
    .hamburger {
        display: flex !important;
        z-index: 10001 !important;
    }

    /* 預設隱藏子選單 */
    .sub-menu {
        display: none !important; /* 預設完全不顯示 */
        background-color: #252525 !important; 
        list-style: none;
        padding: 0 !important;
        margin: 0 !important;
    }

    /* 當父層有 .show-submenu 標籤時才顯示 */
    .dropdown-item.show-submenu .sub-menu {
        display: block !important;
    }

    /* 子選單的連結樣式：再縮小一點以示區別 */
    .sub-menu a {
        padding: 8px 0 !important;
        font-size: 0.85rem !important;
        background-color: #2a2a2a !important;
        color: #bbb !important; /* 顏色稍微淡一點 */
    }
}

    .gallery-section, 
    .youtube-section, 
    .about-section,
    .photo-category-section {
        padding-top: 120px !important; 
    }

    .mobile-break {
        display: block;
    }

    /* --- Hero 標題 --- */
    .hero h1 {
        font-size: 2.2rem;
    }

    /* --- YouTube 標題 --- */
    .yt-section-title {
        font-size: 2.2rem;
        margin-bottom: 40px;
        margin-top: 0px;
    }

    /* --- About 區域 --- */
    .about-container {
        flex-direction: column;
        text-align: center;
    }

    /* --- 回到頂部按鈕 --- */
    .back-to-top-btn {
        width: 40px;
        height: 40px;
        bottom: 20px;
        right: 20px;
        font-size: 0.9rem;
    }

@media (max-width: 768px) {

    /* --- Photo Gallery --- */
    .photo-category-section {
        padding: 50px 5%;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .photo-row-3 {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .main-section-title {
        font-size: 2.5rem;
        margin-bottom: 50px;
    }

    .category-title {
        font-size: 1.2rem;
    }

    .container-80 {
        width: 90%;
    }

    /* --- Footer --- */
    .footer-links {
        flex-direction: column;
        gap: 15px;
    }
    
}


/* ==========================================
   斷點：max-width 500px (超小螢幕)
   ========================================== */
@media (max-width: 500px) {

    /* --- 聯絡圖示 --- */
    .contact-info {
        flex-direction: row;
        gap: 15px;
    }

    .contact-info a {
        display: flex;
        width: 45px;
        height: 45px;
    }
}
/* ============================================
   RWD 手機版適配樣式 (Mobile Responsive)
   ============================================ */
@media screen and (max-width: 768px) {

    /* === Hero 區域調整 === */
    .hero-fullbleed {
        /* 使用 dvh 可以解決手機瀏覽器網址列伸縮的問題 */
        height: 100vh;
        height: 90dvh; 
    }

    .hero-content {
        max-width: 100%;
        padding: 0 25px; /* 增加左右留白，避免貼邊 */
        margin-top: -20px; /* 稍微往上移，因為手機版下方常有瀏覽器按鈕 */
    }

    /* 縮小標題字體 */
    .hero-title {
        font-size: 2.8rem; /* 從 5rem 縮小到 2.8rem */
        line-height: 1.15;
        margin-bottom: 20px;
        letter-spacing: 0px;
    }

    /* 調整副標題 */
    .hero-subtitle {
        font-size: 0.75rem;
        letter-spacing: 3px;
        gap: 10px;
        margin-bottom: 15px;
    }

    /* 縮短裝飾線 */
    .subtitle-line {
        width: 25px;
    }

    /* 調整描述文字 */
    .hero-description {
        font-size: 1rem;
        line-height: 1.6;
        margin-bottom: 25px;
        width: 100%;
        color: rgba(255, 255, 255, 0.85); /* 手機版背景較亮時，增加文字亮度 */
    }

    /* 按鈕區域 */
    .hero-cta {
        width: 100%;
        flex-direction: column; /* 改為垂直排列 */
        gap: 15px;
        margin-bottom: 25px;
    }

    /* 按鈕改為全寬，方便手指點擊 */
    .btn-primary {
        width: 50%;
        text-align: center;
        padding: 12px 0;
        box-sizing: border-box; /* 確保 padding 不會撐開寬度 */
    }

    .btn-play {
        width: 100%;
        justify-content: center;
        margin-top: 2px;
        transition: none;
    }

    /* 隱藏右側的滾動提示 (手機版空間不夠) */
    .scroll-hint {
        display: none;
    }

    /* 調整底部輪播點的位置 */
    .slide-indicators {
        bottom: 25px;
        gap: 10px;
    }
    
    .indicator {
        width: 10px;
        height: 10px;
    }


    /* === 其他區塊的手機版修正 (避免 Hero 正常但下面壞掉) === */

    /* Footer 調整 */
    .footer-links {
        flex-direction: column;
        gap: 15px;
    }
}

@media (max-width: 768px) {
    
    
    /* 1. 確保 Gallery 標籤和子選單是直垂直的 */
    .dropdown-item {
        flex-direction: column !important;
        align-items: stretch !important;
    }

    /* 2. 子選單：直接顯示在下方，不是懸浮 */
    .sub-menu {
        position: relative !important;
        top: 0 !important;
        left: 0 !important;
        transform: none !important;
        
        width: 100% !important;
        background-color: rgba(0, 0, 0, 0.2) !important; /* 深淡色背景 */
        box-shadow: none !important;
        border: none !important;
        border-radius: 0 !important;
        
        /* 預設直接顯示：手機版的子選單通常要輕鬆看得到 */
        opacity: 1 !important;
        visibility: visible !important;
        margin-top: 5px; /* 與主選項間距 */
    }

    /* 3. 子選單連結微調 */
    .sub-menu li a {
        padding: 10px 0 !important;
        font-size: 0.9rem !important;
    }

    /* 4. 移除 Desktop 暫不需要的 Hover 動畫過渡 */
    .sub-menu { transition: none !important; }
}

/* ============================================
   手機版 Gallery 專屬優化 (Responsive Gallery)
   ============================================ */
@media (max-width: 768px) {


    /* 2. 重塑格線：將電腦版的 400px 改為 1 欄或自動填滿 */
    .gallery-grid {
        grid-template-columns: 1fr; /* 手機版強制一列，看起來最乾淨 */
        gap: 25px; /* 縮小作品與作品間的距離 */
        width: 85%;
    }

    /* 3. 調整圖片比例：避免手機上圖片顯得太長 */
    .media-wrapper {
        padding-bottom: 110%; /* 從 110% 調降，適合手機橫向顯示，或是設為 100% 變正方形 */
    }

    /* 4. 統一標題大小：手機標題不需要到 2.3rem 那麼大 */
    .gallery-section h2 {
        font-size: 1.8rem !important;
        padding-left: 15px;
        margin-bottom: 25px !important;
    }

    /* 5. 優化卡片資訊：文字稍微縮小一點 */
    .info {
        padding: 15px;
    }

    .info h3 {
        font-size: 1.1rem;
    }

    .info p {
        font-size: 0.85rem;
    }

    /* 6. Lightbox (圖片放大燈箱) 手機優化 */
    .lightbox img {
        width: 100vw;   /* 寬度撐滿 */
        height: 80vh;   /* 高度自動 */
        max-height: 80vh; 
    }
    
    .close-btn {
        top: 10px;
        right: 20px;
        font-size: 30px;
    }
}


/* === 手機版 Gallery：統一寬度與置中設計 === */
@media (max-width: 768px) {
    
    .gallery-section {
        width: 100%;
        overflow-x: hidden; /* 防止任何子元素溢出 */
    }
    
    /* 1. 容器：確保整體置中，並控制最大寬度讓視覺不壓迫 */
    .gallery-container {
        width: 85%;         /* 左右留出 5% 空隙，看起來更精緻 */
        padding-right: 20px;
        max-width: 100%;    /* 限制手機上照片不要大到失真 */
        align-items: center;
        display: block;      /* 切換為區塊模式 */
    }
    
    .gallery-row {
        flex-direction: column; /* 改為垂直堆疊 */
        height: auto;           /* 高度自動，不再固定 */
    }

    .gallery-item {
        width: 100% !important;
        max-width: 300px; /* 限制手機上的顯示大小 */
        aspect-ratio: 3 / 4 !important; /* 強制所有格子變成 3:4 比例 */
        overflow: hidden; /* 確保超出格子的部分被隱藏（裁切） */
        margin-bottom: 0 !important;
    }

    .gallery-item img {
        width: 100% !important;
        height: 100% !important;
        /* 核心設定：object-fit: cover 會填滿 3:4 的格子，但橫圖左右兩邊會被切掉 */
        object-fit: contain !important; 
        display: block;
    }

/* 5. 徹底隱藏描述字與遮罩 */
    .gallery-item .overlay {
        display: none !important; /* 強制隱藏所有文字描述與半透明遮罩 */
}

/* 確保燈箱開啟時，關閉按鈕永遠在最頂層 */
#lightbox.active .close-btn {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    z-index: 20005 !important; /* 超越導航欄的 10000 */
    position: fixed !important; 
    top: 30px !important;      /* 避開手機螢幕邊緣 */
    right: 25px !important;
    width: 45px;
    height: 45px;
    background-color: rgba(0, 0, 0, 0.5); /* 增加半透明底色，讓白色叉叉更明顯 */
    border-radius: 50%;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

/* 針對單張模式 (single-view) 的特別修正 */
#lightbox.single-view .prev-btn,
#lightbox.single-view .next-btn,
#lightbox.single-view #image-counter {
    display: none !important; /* 單張模式隱藏切換按鈕，只留叉叉 */
}

/* 修正手機版導航欄擋住叉叉的問題 */
@media (max-width: 768px) {
    #lightbox.active {
        z-index: 20000 !important; /* 整個燈箱都要比導航欄高 */
    }
    
    .close-btn {
        top: 20px !important;  /* 手機版位置微調 */
        right: 20px !important;
        font-size: 28px !important;
    }
}

        .gallery-section h2,
        .yt-section-title,
        .main-section-title,
        .section-title { 
        
        /* 1. 統一字體大小 */
        font-size: 1.9rem !important;
        font-weight: 650; 
        
        /* 2. 統一文字行高 (避免標題太擠或太鬆) */
        line-height: 1 !important;
        letter-spacing: 1px;
        text-transform: uppercase;
        color: var(--text-color);
        border-left: 6px solid var(--accent-color);
        padding-left: 8px;
        
        /* 3. 統一邊距 (標題下方的留白) */
        margin-bottom: 40px !important;
        
        /* 5. 確保沒有奇怪的上邊距 */
        margin-top: 0 !important;
        text-align: left;
        text-shadow: none;
    }

    .hero-transition {
        height: 45vh;
        min-height: 220px;
    }
    
    .transition-title {
        font-size: 2.5rem;
        letter-spacing: 8px;
    }

    .transition-overlay {
        background: rgba(12, 12, 12, 0.75);
    }
}

@media (max-width: 850px) {
    .about-integrated {
        margin-right: 30px !important; 
        margin-left: -40px !important;
        min-height: auto; /* Let height be natural on mobile */;
        margin-top: 80px;
    }

    .integrated-grid {
        grid-template-columns: 1fr; /* Stack columns */
        gap: 40px;
    }

    .integrated-photo {
        max-width: 300px; /* Make photo a bit smaller on mobile */
        margin: 0 auto;
    }

    .integrated-details {
        text-align: center; /* Center-align all text within this container */
    }

    /* --- FONT SIZE REDUCTIONS --- */
    .integrated-name {
        font-size: 1.9rem; /* Make name smaller */
    }
    .integrated-role {
        font-size: 1rem;   /* Make role smaller */
        margin-bottom: 30px;
    }
    .list-text span {
        font-size: 0.75rem; /* Make sub-headings smaller */
    }
    .list-text p {
        font-size: 1rem;  /* Make paragraph text smaller */
    }

    /* --- ALIGNMENT FIX FOR THE LIST --- */
    .integrated-list {
        flex-direction: column;
        align-items: center; /* This will center all list items */
        gap: 35px; /* Adjust gap for mobile */
    }

    .integrated-list li {
        text-align: center; /* Ensure list item text is centered */
        max-width: 320px;   /* Prevent text from becoming too wide */
    }

    /* --- ICON SIZE REDUCTION --- */
    .integrated-list i {
        display: none;;
        font-size: 1.3rem; /* Make the main list icons smaller */
        margin-top: 0; /* Remove top margin for better centering */
    }

    .integrated-contact {
        justify-content: center; /* Center the social media icons */
    }

    .integrated-contact a {
    /* --- CHANGED: Made the circle smaller --- */
    width: 44px;
    height: 44px;
    
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    
    /* --- CHANGED: Made the icon inside smaller --- */
    font-size: 1.2rem;
    
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    transition: all 0.3s ease;
    margin-bottom: 30px;
    }
}