* { box-sizing: border-box; margin: 0; padding: 0; }
       /* 原本格式 body { font-family: -apple-system, BlinkMacSystemFont, sans-serif; background-color: #f5f5f7; color: #333; }*/
         
        body {
    /* 1. 外框內距：設定整個網頁內容與邊界之間的留白。
          上下留出 1rem（大約 16px），左右留出 0.5rem（大約 8px）。
          這樣可以確保網頁內容在手機畫面的時候，最左邊和最右邊不會死貼著螢幕邊緣 */
    padding: 1rem .5rem;

    /* 2. 預設字型大小：設定整個網頁的基本字體大小為 1.3rem。
          這比網頁預設的字體（通常是 1rem / 16px）稍微放大了一點點（大約 20px），
          非常適合用來提升長輩或是手機瀏覽時的閱讀舒適度 */
    font-size: 1.3rem;

    /* 3. 行高（行距）：設定每行文字之間的行高為 1.2 倍。
          這樣文字上下排在一起時會比較緊湊，如果未來網頁上有大標題（例如：115年相片簿），
          這個行高可以讓標題看起來更精緻、不鬆散 */
    line-height: 1.2;

    /* 4. 最大寬度限制：限制整個網頁內容「最寬只能放大到 60rem（大約 960px）」。
          這是非常經典且專業的作法！這樣當使用者用大電腦螢幕看您的相簿時，
          照片和文字才不會被無限拉寬、導致排版變形或變得很難看 */
    max-width: 60rem;

    /* 5. 區塊置中：當大電腦螢幕寬度超過 960px 時，這行指令會發揮神奇作用。
          `0` 代表上下外距不額外增加，`auto` 會自動把左右兩邊的空間平均分配，
          直接把整個網頁內容「完美推到畫面正中間」 */
    margin: 0 auto;

    /* 6. 文字顏色：設定文字預設顏色為深灰色（#333）。
          不直接用純黑色（#000）的原因是深灰色在白底上看起來比較柔和、眼睛比較不容易疲勞 */
    color: #333;

    /* 7. 背景顏色：將整個網頁底色設定為「淺灰色（#dadada）」。
          如果您在這個 body 裡面放了先前我們聊過的純白卡片（.album-card），
          那純白卡片在這種淺灰底色上就會顯得非常立體、好看！ */
    background: #dadada;

    /* 8. 文字對齊：設定網頁裡面所有的文字、圖片和行內元素預設通通「置中對齊」。
          這對於相簿網站來說很常用，可以讓標題、按鈕和照片輕鬆維持在中央軸線上 */
}


        
        
          
        
        img { 
            width: 100%; 
            height: 100%; 
            object-fit: contain; /* 自動縮小配合 DIV，不裁切 */
            display: block; 
        }
        
        /* 導覽列 */
        .header { 
    /* 1. 背景顏色：設定為純白色 */
    background-color: #fff; 
    
    /* 2. 內距（留白）：上下留出 15 像素、左右留出 20 像素的空間，
          讓裡面的文字和下拉選單不會太貼近邊緣，看起來比較舒適 */
    padding: 15px 20px; 
    
    /* 3. 下邊框：在頂端列的「最下方」加上一條 1 像素粗、顏色很淡的灰色實線，
          用來優雅地隔開上方的導覽列與下方的相簿內容 */
    border-bottom: 1px solid #e5e5e5; 
    
    /* 4. 黏性定位：超級重要！當使用者「往下捲動網頁」時，這個 header 會自動「黏」在畫面的指定位置 */
    position: sticky; 
    
    /* 5. 黏貼頂端：搭配上面的 sticky 使用。意思是當捲到最上面（距離頂端 0 像素）時就固定住，
          也就是俗稱的「吸頂效果（Fixed Header）」，方便使用者隨時切換年份，不用每次都滾回最上面 */
    top: 0; 
    
    /* 6. 圖層落點：設定這個區塊的立體層級為 100（數字越大代表層級越高）。
          這樣可以確保網頁相簿往下捲動時，相片字卡會「乖乖滑進 header 的下方」，而不會覆蓋在文字上面 */
    z-index: 100;
    
    /* 7. 彈性佈局：啟動 Flexbox 排版工具，用來輕鬆控制裡面「標題」與「下拉選單」的排列 */
    display: flex;
    
    /* 8. 兩端對齊：這是 Flexbox 的絕招。它會自動把「網站大標題」推到最左邊，
          把「選擇年份的下拉選單」推到最右邊，兩者在同一行自動拉開最大距離，非常整齊 */
    justify-content: space-between;
    
    /* 9. 垂直置中：確保左邊的文字和右邊的下拉選單，在高度上能夠「完美上下對齊置中」，
          不會有選單偏上、文字偏下的不協調感 */
    align-items: center;
}

        .header h1 { font-size: 1.3rem; font-weight: 600; }
        
        .year-select {
    /* 1. 按鈕內距（留白）：設定選單文字上下留出 8 像素、左右留出 16 像素的空間。
          這能增加手指點擊的「安全範圍」，在手機上操作時更不容易點錯 */
    padding: 8px 16px;

    /* 2. 字體大小：設定為 1rem（也就是標準大小 16 像素）。
          這與大標題 h1 的 1.3rem 互相搭配，形成明顯的「視覺主從關係」，大標題明顯、選單精緻 */
    font-size: 1rem;

    /* 3. 邊框風格：加上一條 1 像素粗的灰色實線。
          這裡用的顏色 `#d2d2d7` 是非常經典的「蘋果官網標準淡灰色」，看起來非常乾淨、不突兀 */
    border: 1px solid #d2d2d7;

    /* 4. 圓角效果：將選單的四個角做成 8 像素的圓弧。
          這跟您之前設定的相簿字卡圓角（16px）互相呼應，按鈕的圓角稍微小一點（8px），看起來會更俐落、像個功能鍵 */
    border-radius: 8px;

    /* 5. 背景顏色：設定為純白色（#fff）。
          讓選單在淺灰色的 body 背景上，可以像純白卡片一樣亮眼跳出來 */
    background-color: #fff;

    /* 6. 滑鼠游標：超級重要！當使用者用電腦把滑鼠移到這個下拉選單上時，游標會自動變成「一隻小手（👆）」。
          這是在網頁上提示使用者「這個按鈕可以點擊」的最標準作法，能大大提升使用體驗 */
    cursor: pointer;
}


        .year-section-title {
            font-size: 1.8rem;
            font-weight: 700;
            margin: 40px 0 20px 0;
            color: #1d1d1f;
            border-left: 5px solid #0071e3;
            padding-left: 12px;
            scroll-margin-top: 80px; 
        }

        .timeline-container { max-width: 800px; margin: 0 auto; padding: 0 20px 40px 20px; }
        
        /* 卡片主體 */
        .album-card { 
    /* 1. 背景顏色：設定為純白色 */
    background: #fff; 
    
    /* 2. 圓角效果：讓卡片的四個角有 16 像素的圓滑弧度，看起來更現代、不生硬 */
    border-radius: 16px; 
    
    /* 3. 溢出隱藏：非常重要！因為卡片設定了圓角，如果裡面的相片或內容太大撐出來，
          這個設定會把超出圓角邊框的部分自動切掉（修齊），確保四周永遠維持完美的圓角 */
    overflow: hidden; 
    
    /* 4. 下方外距：讓這張卡片跟下一張卡片之間，保持 30 像素的距離，網頁才不會擠在一起 */
    margin-bottom: 30px; 
    
    /* 5. 陰影效果：幫卡片加上一層非常輕薄、淡雅的陰影，讓卡片看起來像微微「浮在背景上」，有立體感。
          (0 4px 12px 代表向下偏移 4px、模糊範圍 12px，rgba 最後的 0.05 代表只有 5% 透明度的黑色) */
    box-shadow: 0 4px 12px rgba(0,0,0,0.05); 
    
    /* 6. 彈性佈局：啟動 Flexbox 排版工具，用來控制卡片內部元素的排列方式 */
    display: flex;
    
    /* 7. 排列方向：設定為「由上往下」垂直排列。
          這樣卡片裡面的「文字標題（日期/地點）」跟「照片區域」就會乖乖地從上到下排好 */
    flex-direction: column;
}

            
        /* 文字標題區：點擊可另開視窗 */
        .card-meta-link {
            text-decoration: none;
            color: inherit;
            display: block;
            padding: 15px 20px; 
            background: #fff;
            transition: background 0.2s;
        }
        .card-meta-link:hover {
            background: #fdfdfd;
        }
        .card-date { font-size: 1.1rem; font-weight: 700; color: #1d1d1f; }
        .card-location { font-size: 0.9rem; color: #0071e3; margin-top: 2px; }
        
        /* 💡 首頁照片展示容器 (加上相對定位以利浮動按鈕排版) */
        .photo-wrapper {
            position: relative;
            height: 400px;
            background-color: #111; /* 留白處背景色 */
            overflow: hidden;
        }
        
        /* 點擊照片本身也能另開視窗的超連結層 */
        .photo-click-overlay {
            display: block;
            width: 100%;
            height: 100%;
        }

        

        /* 💡 首頁左右側浮動案件/按鈕 */
       .card-nav {
    /* 1. 絕對定位：這行是魔法關鍵！它讓按鈕像貼紙一樣，可以直接「漂浮」在照片的上方，
          而不會把照片擠到下面去 */
    position: absolute;

    /* 2. 靠頂對齊：讓按鈕的最上緣死貼著照片的最上緣 */
    top: 0;

    /* 3. 滿版高度：高度設定為 100%，代表這個按鈕的觸控點擊範圍「跟照片一樣高」，
          使用者隨手一晃很好點擊，不用辛苦去對準一個小箭頭 */
    height: 100%;

    /* 4. 寬度限制：設定為照片寬度的 6%。這是一個非常剛好的完美比例，
          既不會太寬遮擋照片，又保留了足夠的手指點擊空間 */
    width: 6%;

    /* 5. 彈性排版與置中：啟動 Flexbox，並用下面兩行讓箭頭符號（❮ 或 ❯）
          在 100% 高、6% 寬的長條範圍內，「垂直、水平通通完美置中」 */
    display: flex;
    align-items: center;
    justify-content: center;

    /* 6. 滑鼠游標：當滑鼠移到這個長條區域時，自動變成「小手符號（👆）」，提示可以點擊 */
    cursor: pointer;

    /* 7. 微光漸層背景（魔鬼細節！）：從左到右，由「30%透明度的黑色」慢慢淡化到「完全透明」。
          這是在照片邊緣加上一層淡淡的陰影，目的是為了「襯托出白色箭頭」，
          這樣如果照片背景剛好是白色的（例如拍白色帳篷或天空），白色的箭頭才不會隱形看不見！ */
    background: linear-gradient(to right, rgba(0,0,0,0.3), rgba(0,0,0,0));

    /* 8. 箭頭顏色：設定為「60%透明度的純白色」，看起來帶點優雅的高級感，不會死白 */
    color: rgba(255,255,255,0.6);

    /* 9. 箭頭大小：設定為 1.8rem（大約 28 像素），大小非常醒目好按 */
    font-size: 2.8rem;

    /* 10. 防止文字反白：超級重要！因為使用者在手機上快速連續點擊「上一張、下一張」時，
           很容易誤觸系統功能導致箭頭符號被反白（變藍色字體框），這行能徹底防呆，怎麼點都不會變色 */
    user-select: none;

    /* 11. 動態轉場特效：當這個按鈕從「隱藏變出現」或「變色」時，會花 0.2 秒的時間平滑過渡，
           畫面才不會有瞬間閃爍、硬梆梆的感覺 */
    transition: all 0.2s;

    /* 12. 圖層定位：層級設定為 10。確保箭頭一定是飄在相片（.card-img）的最上面，
           才不會被相片擋住而點不到 */
    z-index: 10;

    /* 13. 預設隱藏：不透明度設定為 0（完全透明）。
           這就是小G前面提到的貼心設計，平時不讓箭頭打擾使用者欣賞首頁的精選照片 */
    opacity: 0; 
}

        /* 滑鼠移入照片範圍時顯現按鈕 */
        .photo-wrapper:hover .card-nav {
    /* 當使用者的滑鼠「移入」照片外殼（.photo-wrapper）的範圍時，
       後面緊跟著的切換按鈕（.card-nav）的「不透明度」會瞬間變成 1（完全顯現） */
    opacity: 1;
}

        .card-nav:hover {
    /* 1. 背景顏色加深：當滑鼠懸停在箭頭長條區域時，
          背景會從原先的「半透明漸層」，變成「60% 透明度的純黑色（rgba 的 0.6）」 */
    background: rgba(0,0,0,0.6);

    /* 2. 箭頭變亮：原本平時的箭頭顏色是帶有透明度的淡白色（rgba(255,255,255,0.6)），
          現在直接拔高變成「100% 全亮純白色（#fff）」 */
    color: #fff;
}

        /* ============ 左邊按鈕設定 ============ */
.nav-left { 
    /* 1. 靠左對齊：設定距離照片最左邊為 0，把「上一張 (❮)」按鈕死死貼在卡片左側 */
    left: 0; 
    
    /* 2. 左側漸層陰影：背景採用線性漸層，方向為「從左到右（to right）」。
          最左邊邊緣是「40% 透明度的黑色（rgba 0.4）」，向右慢慢淡化，直到完全透明（rgba 0）。
          這樣會在照片左側邊緣刷上一層淡淡的黑影，讓白色的「❮」按鈕在任何照片上都能清晰顯現 */
    background: linear-gradient(to right, rgba(0,0,0,0.4), rgba(0,0,0,0)); 
}

/* ============ 右邊按鈕設定 ============ */
.nav-right { 
    /* 1. 靠右對齊：設定距離照片最右邊為 0，把「下一張 (❯)」按鈕死死貼在卡片右側 */
    right: 0; 
    
    /* 2. 右側漸層陰影：背景一樣是漸層，但方向相反，改為「從右到左（to left）」。
          最右邊邊緣是「40% 透明度的黑色」，向左慢慢淡化到完全透明。
          這樣能在照片右側對稱地刷上一層黑影，完美襯托出右邊的「❯」按鈕 */
    background: linear-gradient(to left, rgba(0,0,0,0.4), rgba(0,0,0,0)); 
}

        /* 當瀏覽器或手機螢幕寬度在 768px 以下時，才執行以下大括號 {} 內的所有設定 */
@media (max-width: 768px) {

    /* ============ 1. 頂端導覽列改造 ============ */
    .header { 
        /* 改變排列方向：從原本電腦版的「橫向左右並排」，變成手機版的「由上往下垂直排」 */
        flex-direction: column; 
        
        /* 元素間距：讓上面的「大標題」跟下面的「年份下拉選單」之間，自動空出 10px 的安全距離，不擠在一起 */
        gap: 10px; 
        
        /* 文字置中：讓標題文字和選單在手機畫面上全部乖乖置中對齊，看起來更對稱 */
        text-align: center; 
    }

    /* ============ 2. 整個時間軸外殼縮減留白 ============ */
    .timeline-container { 
        /* 縮減左右內距：電腦版可能留白很多，手機版寸土寸金，所以把左右留白縮小到 10px，
           把寶貴的空間讓給照片顯示 */
        padding: 0 10px; 
    }

    /* ============ 3. 固定照片區塊高度 ============ */
    .photo-wrapper { 
        /* 強制限制高度：不管照片原本多大，在手機上這個照片外殼（框框）高度一律固定為 250px。
           這樣可以保證使用者往下捲動網頁時，每張相簿字卡的大小都很一致，不會忽大忽小 */
        height: 250px; 
    }

    /* ============ 4. 重點！手機端切換箭頭大改版 ============ */
    .card-nav { 
        /* 強制常開顯現（最關鍵！）：把原本在電腦版設定的 `opacity: 0`（滑鼠移入才出現）直接改成 `1`（完全顯現）。
           因為手機沒有滑鼠游標、沒辦法做 :hover 移入動作，所以箭頭必須「永遠顯示在照片兩側」，使用者才知道可以點！ */
        opacity: 1; 

        /* 放大點擊範圍：把寬度從電腦版的 6% 拓寬到 15%。
           這是非常貼心的 UI 設計，手指比滑鼠粗很多，這樣大範圍才不容易按錯、卡關 */
        width: 15%; 

        /* 縮小按鈕字體：原本電腦版是 1.8rem，手機上稍微縮小到 1.5rem（約 24px），
           配合手機螢幕比例，既夠大好按，又不會顯得太粗糙 */
        font-size: 1.5rem; 
    }
}

/* 🚀 新增：回頂端按鈕的樣式 */
       .back-to-top {
           position: fixed;
           bottom: 30px;
           right: 30px;
           width: 50px;
           height: 50px;
           background-color: #333333;
           color: #ffffff;
           border-radius: 50%;
           display: flex;
           align-items: center;
           justify-content: center;
           font-size: 24px;
           cursor: pointer;
           box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.3);
           z-index: 1000;
           transition: opacity 0.3s ease, transform 0.3s ease;
           
           /* 預設隱藏，滑動後才顯示 */
           opacity: 0;
           pointer-events: none; 
       }

       /* 懸停效果 */
       .back-to-top:hover {
           background-color: #555555;
           transform: translateY(-5px);
       }

       /* 當按鈕被加上 .show 時才顯示 */
       .back-to-top.show {
           opacity: 1;
           pointer-events: auto;
       }


/* 📍 新增：搜尋框樣式 */
.search-container {
    flex: 1;
    max-width: 300px;
    margin: 0 15px;
}
#album-search {
    width: 100%;
    padding: 8px 12px;
    font-size: 0.95rem;
    border: 1px solid #d2d2d7;
    border-radius: 10px; /* 圓角設計比較現代 */
    outline: none;
    transition: all 0.3s;
}
#album-search:focus {
    border-color: #0071e3; /* 點擊時變成藍色外框 */
    box-shadow: 0 0 8px rgba(0,113,227,0.2);
}

/* RWD 手機版微調 */
@media (max-width: 768px) {
    .header {
        flex-direction: column; /* 手機版時標題、搜尋框、下拉選單上下排 */
        gap: 10px;
    }
    .search-container {
        max-width: 100%;
        width: 100%;
        margin: 5px 0;
    }
}

/* 📍 修正：讓搜尋結果的內容文字往後退，避開圓角 */
#search-results-list .album-card a {
    display: block;          /* 讓整個格子都變成可以點擊的超連結 */
    
    /* 關鍵：上下留白 12 像素，左右留白 20 像素！ */
    /* 這樣第一個字就會自動往後退 20 像素，絕對不會被圓角削到 */
    padding: 4px 20px;      
    
    text-decoration: none;   /* 拿掉超連結醜醜的底線 */
    color: #ffffff;          /* 您的內容文字顏色（可依喜好修改，如改回 #333 或 #fff） */
}

/* 如果您希望日期與地點中間有點距離，可以加這一小段 */
#search-results-list .card-date {
    margin-bottom: 5px;      /* 日期下方空出 5 像素，再顯示地點 */
    font-weight: bold;       /* 日期加粗比較好閱讀 */
}



/* 分頁css */