@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700&family=Noto+Sans+TC:wght@400;500;700&family=Zen+Antique+Soft&display=swap');

/* --- 設計系統變數 (Design System Tokens) --- */
:root {
    /* 版面寬度限制 */
    --container-width: 1400px;

    /* 色彩系統 - 基本 (暖色淺色系) */
    --primary-color: #915a1c;      /* 主色 */
    --primary-hover: #b98448;      /* 懸浮色 */
    --primary-muted: #878787;     /* 輔助色 */
    --bg-color: #ffffff;           /* 全域背景 */
    --bg-color-ts: rgba(55, 55, 55, 0.6);
    --bg-ts:rgba(55, 55, 55, 0);
    --bg-black:#0f0e0e;
    
    /* 文字系統 - 針對淺色背景優化 */
    --text-main: #2c2c2c;          /* 標題與重要文字：深碳灰，提高對比度 */
    --text-body: #555555;          /* 內文文字：深灰 */
    --text-light: #fdfaf5;
    --text-light-subtitle:#d7d5d1;  
    --text-muted: #9b9b9b;         /* 輔助與次要文字：中灰 */
    
    /* 遮罩與特殊背景 */
    --overlay-dark: rgba(0, 0, 0, 0.1);        /* 卡片預設遮罩 (略微調淺) */
    --overlay-hover: rgba(0, 0, 0, 0.15);      /* 卡片懸浮遮罩 */
    --card-default-bg: #f5f0e6;                /* 卡片底色：淺米色 */
    --hero-fallback-bg: #545454;                 /* Hero 底色 */
    --sns-btn-bg: rgba(0, 0, 0, 0.05);         /* SNS按鈕背景：極淺灰背景 */
    --sns-btn-icon: #5d4037;                   /* SNS圖示顏色：改用深咖啡色 */


    /* 圖示顏色 */
    --icon-color: #484746;
    --icon-muted: #c9c9c9;
    --icon-light: #fdfaf5;
    --icon-hover: #ab3e03;

    /* 圓點分頁標記顏色 */
    --dot-color: rgba(255, 255, 255, 0.3);
    --dot-active-color: rgb(255, 255, 255);
    --dot-shadow: 0 0 4px rgba(0, 0, 0, 0.8);

    /* 陰影 */
    --text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
    --text-shadow-dark: 0 4px 10px rgba(0, 0, 0, 0.8);

    /* New 頁面專用變數 */
    --accent-color: #e65100;       /* 焦橘色 (保留作為重點強調) */
    --card-bg: #ffffff;            /* 作品卡片底色：純白，在米白背景下產生層次感 */


    

/* 字體順序：繁體中文 -> 日文 -> 系統預設 */
    --font-main: 'Noto Sans TC', 'Noto Sans JP', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    
    /* 文字大小定義 */
    --fs-h1: 1.8rem;       
    --fs-h2: 1.3rem;     
    --fs-h3: 1.25rem;    
    --fs-p: 0.9rem;        
    --fs-label: 1.2rem;
    --fs-span: 0.8rem;  

    /* 圓角與間距 */
    --radius-md: 4px;
    --radius-full: 9999px;
    --container-gap: 16px;

    /* 動態效果 */
    --transition-base: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --hover-lift: translateY(-8px);
}

/* --- 基礎重設 (Reset) --- */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html, body {
    height: 100%;
    font-family: var(--font-main);
    color: var(--text-body);
    background-color: var(--bg-color);
    line-height: 1.5;
    /* min-height: 200vh; */
}

ul, li { list-style: none; }
a { 
    text-decoration: none; 
    color: inherit; 
    transition: var(--transition-base);
}

h1 { font-size: var(--fs-h1); font-weight: 700; color: var(--text-main); }
h2 { font-size: var(--fs-h2); font-weight: 700; color: var(--text-main); }
h3 { font-size: var(--fs-h3); font-weight: 500; color: var(--text-main); }
p  { font-size: var(--fs-p); color: var(--text-body); }
span {font-size: var(--fs-span); color: var(--text-muted)}

/* 基礎圖示樣式 */
.icon-svg {
    display: inline-block;
    width: 32px;   /* 圖示寬度 */
    height: 32px;  /* 圖示高度 */
    background-color: currentColor; /*關鍵：讓圖示顏色隨文字顏色變化*/
    color: var(--icon-light);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-position: center;
    mask-position: center;
    vertical-align: middle;
}

/* 關閉圖示 Close */
.icon-close {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath d='M256-227.69 227.69-256l224-224-224-224L256-732.31l224 224 224-224L732.31-704l-224 224 224 224L704-227.69l-224-224-224 224Z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath d='M256-227.69 227.69-256l224-224-224-224L256-732.31l224 224 224-224L732.31-704l-224 224 224 224L704-227.69l-224-224-224 224Z'/%3E%3C/svg%3E");
}

/* 返回圖示 Arrow Back */
.icon-arrow-back {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath d='m276.85-460 231.69 231.69L480-200 200-480l280-280 28.54 28.31L276.85-500H760v40H276.85Z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath d='m276.85-460 231.69 231.69L480-200 200-480l280-280 28.54 28.31L276.85-500H760v40H276.85Z'/%3E%3C/svg%3E");
}

/* 備用：手機板專屬換行符號 */
.mobile-br {
    display: none;
}

/* 當螢幕寬度小於 768px（手機/平板）時啟用換行 */
@media (max-width: 767px) {
    .mobile-br {
        display: inline;
    }
}


/* --- 佈局結構 --- */
.index-container{
    display: flex;
    flex-direction: column;
    height: 100vh;
    max-width: 1400px;
    margin: 0 auto;
}

/* 1. Hero 區塊 */
.page-hero {
    position: relative;
    height: 25vh;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.page-hero-small {
    height: 140px;
    padding: 20px 0;
}
.page-hero-small .hero-content h1 {
    margin: 0;
    font-size: 1.5rem;
}
.page-hero-small .hero-content p {
    font-size: 0.7rem;
    margin-top: 4px;
}

.page-hero-large {
    height: 25vh;
}

.page-hero-bg {
    width: 100%;
    height: 100%;
    position: absolute;
    inset: 0;
    background-image: var(--hero-img, url('img/page-hero.jpg')); 
    background-size: cover;
    background-position: center;
    background-color: var(--hero-fallback-bg);
}

/* hero隱藏過度效果 */
/* 確保 page-hero 有過渡動畫 */
.page-hero-small {
    transition: transform 0.4s ease, opacity 0.4s ease;
    position: fixed; /* 或 fixed/sticky，視您的排版而定 */
    top: 0;
    z-index: 10;
}

/* 當加上 hidden 類別時的效果 */
.page-hero-small.hidden {
    transform: translateY(-100%); /* 向上推開隱藏 */
    opacity: 0;
    pointer-events: none; /* 隱藏後防止點擊 */
}

/* 配合hero隱藏，調整 main 上邊距 */
.info-container, .new-container  { margin: 150px auto 0; }
.gallery-container{ margin: 180px auto 0; }
.blog-container{ margin: 140px auto 0; }


/* 2. 依照各頁面類別定義圖片路徑 */
.page-index.page-hero-bg {
    --hero-img: url('img/hero/page-hero.jpg');
}

.page-gallery .page-hero-bg {
    --hero-img: url('img/hero/gallery.jpg');
}

.page-life .page-hero-bg {
    --hero-img: url('img/hero/life.jpg');
}

.page-info .page-hero-bg {
    --hero-img: url('img/hero/info.jpg');
    z-index: 0;
}

.page-info .page-hero-bg {
    --hero-img: url('img/hero/info.jpg');
}

.page-hero-bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.2); /* 調整遮罩深淺 */
}

.hero-content {
    position: relative;
    z-index: 2;
    text-align: center;
    padding: 0 20px;
}

   


.hero-content p{
    color: var(--text-light);
    letter-spacing: 3px;
}

.hero-content p:first-child {
    color: var(--accent-color); /* 使用焦橘色 */
    letter-spacing: 3px;
    font-weight: 700;
    font-size: 0.9rem;
    margin-bottom: 8px;
    text-transform: uppercase;
}

.hero-content h1 {
    color: var(--text-light);
    font-size: 0.6rem;
    letter-spacing: 2px;
    word-spacing: 6px;
    margin-bottom: 16px;
    text-shadow: var(--text-shadow);
}

@media (max-width: 900px) {
    .hero-content h1 {
        font-weight: 500;
        letter-spacing: 1px;
        word-spacing: 3px;
    }
}

@media (min-width: 900px) {
    .hero-content h1 {font-size: 0.8em;}

}

/* 標題與注音的容器 */
.hero-content .hero-title {
    font-family: "Zen Antique Soft", "Noto Sans JP", serif;
    color: var(--text-light);
    font-size: 1.6rem;           /* 維持原本 p 的字體大小 */
    letter-spacing: 0px;        /* 維持原本 p 的字距 */
    line-height: 2.2;           /* 增加行高，為下方的假名留空間 */
    text-shadow: var(--text-shadow);
    margin-bottom: 56px;        /* 使用原本 .memo 的下邊距，維持佈局高度 */
}

/* 設定注音位置在下方 */
.hero-content .hero-title ruby {
    ruby-position: under;
    -webkit-ruby-position: after;
}

/* 針對注音假名 (rt) 的樣式優化 */
.hero-content .hero-title rt {
    color: var(--text-light);   /* 維持原本 .memo 的顏色 */
    font-size: 0.4rem;          /* 使用原本 .memo 的大小 */
    ruby-align: center;
    font-weight: normal;
    text-shadow: var(--text-shadow);
    /* 修正由於 ruby 預設導致的間距縮減 */
    margin-top: 0.6em; 
}

/* 針對電腦版 (min-width: 900px) 的調整 */
@media (min-width: 900px) {
    .hero-content .hero-title {
        font-size: 2rem;         /* 維持原本電腦版 p 的大小 */
        letter-spacing: 15px;    /* 維持原本電腦版 p 的字距 */
        text-indent: 15px;
        margin-bottom: 50px;     /* 維持原本電腦版 .memo 的下邊距 */
    }
    
    .hero-content .hero-title rt {
        font-size: 0.5rem;       /* 維持原本電腦版 .memo 的大小 */
    }
}


/* 2. Logo 中心對齊 Hero 下邊界 */
.logo-container {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translate(-50%, 50%);
    z-index: 10;
}

.main-logo {
    width: 88px;
    height: 88px;
    border-radius: var(--radius-full);
    background: white;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    object-fit: cover;
    transition: var(--transition-base);
}

.main-logo:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 16px rgba(0,0,0,0.15);
}

/* 3. 三欄卡片 */
.card-container {
    flex: 1;
    display: flex;
    padding: 60px 20px 0px 20px;
    gap: var(--container-gap);
}

.card {
    flex: 1;
    position: relative;
    max-height: 450px;
    border-radius: var(--radius-md);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: var(--card-default-bg);
}

.card span {
    font-size: var(--fs-h2);
    position: relative;
    z-index: 2;
    color: white;
    font-weight: 700;
    text-shadow: var(--text-shadow)
}
.card-text{
    margin-top: 12px;
    color: var(--text-light);
    z-index: 2;
    text-align: center;
    text-shadow: var(--text-shadow-dark)
}

/* 卡片背景與遮罩 */
.card::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: var(--card-img);
    background-size: cover;
    background-position: center;
    transition: var(--transition-base);
}

.card::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--overlay-dark);
    transition: var(--transition-base);
}

.card-info { --card-img: url('img/hero/info.jpg'); }
.card-gallery { --card-img: url('img/hero/gallery.jpg'); }
.card-life { --card-img: url('img/hero/life.jpg'); }



/* --- 4. Footer 區塊修正 --- */
.footer {
    padding: 20px 0;
    margin-top: 0px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 8px;
}
.index-footer{
    margin-top: 20px;
}

.footer p, .visitor-count-text {
    font-size: 0.75rem;
    color: var(--text-muted);
    line-height: 1.4;
    text-align: center;
}

 .visitor-count-text span {
    font-size: 0.75rem;
 }



/* 電腦版微調 */
@media (min-width: 900px) {
    .footer { padding: 30px 0; }
}
/* 手機板微調 */
@media (max-width: 900px) {
    .card span {font-size: var(--fs-label);}
    .card-text { display: none; }
    .footer { gap: 4px; }
    .footer p { font-size: 0.5rem; }
    .visitor-count-text span { font-size: 0.5rem; }
}



/* --- 導覽選單樣式 --- */
.menu-toggle {
    position: fixed;
    top: 20px;
    left: 20px;
    z-index: 1000;
    cursor: pointer;
    padding: 6px 12px;
    background: var(--bg-color-ts);
    border-radius: 4px;
    font-size: 1.2rem;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.menu-icon{color: var(--icon-light);}

.menu-toggle.hidden {
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translateY(-20px);
}

.full-menu {
    position: fixed;
    top: -100%;
    left: 0;
    width: 15%;
    height: 100%;
    padding-left: 30px;
    padding-top: 80px;
    background: rgba(255, 255, 255, 0.95);
    z-index: 999;
    display: flex;
    flex-direction: column;
    transition: var(--transition-base);
    opacity: 0;
}

.full-menu.active {
    top: 0;
    opacity: 1;
}

/* 修正：僅在電腦端（有滑鼠）套用 hover 效果 */
@media (hover: hover) {

    .full-menu a:hover {
        color: var(--primary-hover);
        letter-spacing: 2px;
    }
}

/* 手機版：取消 hover 狀態，改用 :active 產生點擊回饋（可選） */
@media (max-width: 900px) {
    .full-menu{
        width: 100%;    
        background: var(--bg-color);    
    }

    .full-menu a:active {
        background: rgba(255, 255, 255, 0.1);
    }
}

.close-menu {
    position: absolute;
    height: 60px;
    width: 60px;
    top: 30px;
    left: 30px;
    color: var(--text-main);
    font-size: 1.5rem;
    cursor: pointer;
}

/* --- 1. 基礎選單連結樣式 (不含 Hover) --- */
.full-menu a {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--text-main);
    margin: 15px 0;
    text-decoration: none;
    transition: var(--transition-base); /* 確保變化平滑 */
    display: block; /* 增加點擊範圍 */
}

/* --- 2. 僅針對「有滑鼠」的裝置套用 Hover 效果 --- */
@media (hover: hover) {
    .full-menu a:hover {
        color: var(--accent-color); /* 統一使用您指定的焦橘色做為重點 */
        padding-left: 10px;         /* 微調偏移感 */
        letter-spacing: 2px;        /* 增加質感 */
    }
}

/* --- 3. 針對「觸控裝置」的點擊回饋 (替代 Hover) --- */
/* 使用 :active 可以在手指按下時提供瞬間回饋，放開即消失，不會像 Hover 一樣卡住 */
@media (hover: none) {
    .full-menu a:active {
        color: var(--primary-hover);
        background: rgba(var(--primary-color), 0.05); /* 給予極輕微的底色回饋 */
    }
}


/* 拍手功能樣式 */

.clap-section {
    flex-shrink: 0; opacity: 0; visibility: hidden;
    transition: opacity 0.4s ease; min-height: 32px;
    display: flex; align-items: center;
}

.clap-section.ready { opacity: 1; visibility: visible; }

.clap-btn, #clappedStatus {
    background: transparent; border: none; color: #ccc;
    display: flex; align-items: center; gap: 8px;
    font-size: 0.95rem !important; font-weight: 500;
    padding: 4px 0; cursor: pointer; transition: 0.3s;
}

#clappedStatus { color: var(--primary-hover) !important; cursor: default; }
.clap-btn:hover { opacity: 0.8; transform: translateY(-1px); }
.material-symbols-outlined { font-variation-settings: 'FILL' 0, 'wght' 200; font-size: 22px; }
.icon { font-size: 22px; color: var(--icon-light); }
#clappedStatus .material-symbols-outlined { font-variation-settings: 'FILL' 1, 'wght' 200; }


/* life專屬樣式 */
.blog-container { max-width: 1100px; padding: 0 20px; min-height: 60vh; }

/* 1. 卡片容器：確保子元素等高 */
.blog-card {
    border-top: 1px solid #d6d6d6;
    display: flex;
    gap: 20px;
    padding-top: 20px;
    margin-bottom: 20px;

    /* 關鍵：預設為 stretch，讓圖片區與文字區高度永遠相等 */
    align-items: stretch;
    min-height: 300px; /* 確保即使文字只有一行，圖片也至少有 300px 高 */
}

/* 2. 圖片容器：設定固定寬度，高度隨父層縮放 */
.blog-image {
    flex: 0 0 40%;
    /* max-width: 450px; */
    position: relative; /* 為了讓內容物絕對定位 */
    border-radius: 4px;
    overflow: hidden;
}

/* 3. 圖片本身：強制填滿容器且不變形 */
.blog-image img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    object-fit: cover; 
    display: block;
}

.blog-image.portrait-mode img{
    height: 100%; /* 強制圖片高度填滿容器 */
    /* 核心 1：讓圖片填滿容器並保持比例，自動裁切多餘部分 */
    object-fit: cover;
    /* 核心 2：指定裁切後的對齊位置為正中央 */
    object-position: center;
    display: block;
}

/* 4. 文字內容區：確保內部撐開 */
.blog-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 5px 0; 
    
}
.blog-meta { display: flex;  justify-content: space-between; align-items: center; margin-bottom: 4px; }

/* --- 電腦版佈局邏輯修正 --- */
.blog-body { 
    position: relative; 
    width: 100%; 
}

.content-wrapper {
    display: block; /* 確保區塊級渲染 */
    column-count: 1;
    column-gap: 30px;
    height: 15em; 
    overflow-y: visible; 
    line-height: 1.8;
    text-align: justify;
    padding-right: 15px; /* 增加空間，讓捲動條有位置顯示 */
    /* 針對 Firefox 的極細捲動條設定 */
    scrollbar-width: thin;
    scrollbar-color: var(--icon-muted, #ccc) transparent;
}


.content-text
{
    white-space: pre-wrap;
}
/* 為了保險起見，確保電腦版下文字不受到 line-clamp 限制 */
@media (min-width: 901px) {
    .content-wrapper .content-text {
        display: block !important;
        -webkit-line-clamp: initial !important;
        overflow: visible !important;
    }
}

.content-wrapper p{
    font-size: var(--fs-p);
}

/* 針對 Webkit (Chrome, Edge, Safari) 的捲動條設定 */
/* 必須確保選擇器與 HTML 結構完全匹配 */
.content-wrapper::-webkit-scrollbar {
    width: 4px; 
    display: block;
}

.content-wrapper::-webkit-scrollbar-track {
    background: transparent;
}

.content-wrapper::-webkit-scrollbar-thumb {
    background-color: var(--primary-color, #ccc);
    border-radius: 10px;
    border: none;
}

/* 增加滑動時的反應，方便使用者辨識 */
.content-wrapper::-webkit-scrollbar-thumb:hover {
    background-color: var(--primary-hover);
}


/* 電腦版下隱藏展開元件與遮罩 */
@media (min-width: 901px) {
    .more-btn, .fade-overlay { display: none !important; }
}
/* --- 手機版 RWD 修正 (900px 以下) --- */
@media (max-width: 900px) {
    
    .blog-card { 
        flex-direction: column; 
        gap: 10px; 
        margin-bottom: 40px; 
        cursor: pointer;
        align-items: flex-start; /* 手機版不需要等高，回到頂部對齊 */
        min-width: auto;
    }
    
    .blog-image { 
        flex: 0 0 auto; 
        width: 100%; 
        min-width: auto;
        height: 200px; /* 統一卡片圖片區域高度 */
        overflow: hidden; /* 確保超出垂直範圍的圖片被裁切 */
        display: flex;
        justify-content: center; /* 水平居中 */
        align-items: center;     /* 垂直居中 */
    }

    .blog-image.portrait-mode img{
        height: 100%; /* 強制圖片高度填滿容器 */
        /* 核心 1：讓圖片填滿容器並保持比例，自動裁切多餘部分 */
        object-fit: cover;
        /* 核心 2：指定裁切後的對齊位置為正中央 */
        object-position: center;
        display: block;
    }
    
    .blog-image.landscape-mode img {
        width: 100%; 
        height: auto;
        object-fit: cover; 
        object-position: center; /* 裁切時保留圖片中心區域 */
        display: block;
    }

    .blog-main {
        width: 100%;
        columns: 1;
    }

    .content-wrapper {
        column-count: 1;
        /* 移除固定 height，改用 line-height 搭配 clamp */
        height: auto; 
        max-height: 3.6em; /* 假設行高 1.8em，兩行為 3.6em */
        line-height: 1.8em;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        padding-right: 0;
        transition: max-height 0.3s ease; /* 加入平滑過渡 */
    }

    /* 修正點：確保選擇器正確指向 .blog-card.expanded 並覆蓋 max-height */
    .blog-card.expanded .content-wrapper {
        display: block; /* 移除 flexbox 限制 */
        -webkit-line-clamp: initial;
        max-height: none; /* 關鍵：必須取消高度限制 */
        overflow: visible;
    }

    /* 修正點：統一處理 .content-text (如果有使用的話) */
    .blog-card.expanded .content-text {
        display: block;
        -webkit-line-clamp: initial;
        overflow: visible;
    }

    /* 手機版：重新啟用更多按鈕 (仿社群樣式) */
    .more-btn {
        display: inline-block;
        background: none;
        border: none;
        color: var(--icon-hover);
        font-weight: bold;
        font-size: 0.95rem;
        cursor: pointer;
        padding: 0;
        margin-top: 5px;
    }

/* 展開後隱藏按鈕 */
    .blog-card.expanded .more-btn {
        display: none !important;
    }
}

/* 拍手樣式 */
.clap-section { display: flex; align-items: center; gap: 5px; opacity: 0.8; }
.clap-count { font-size: 0.9rem; color: #888; }
.material-symbols-outlined { font-size: 20px; }


/* 分頁樣式 */
.pagination { display: flex; justify-content: center; gap: 10px; margin-top: 20px; margin-bottom: 20px; }
.page-btn {
    width: 40px; height: 40px; border: 1px solid var(--primary-color);
    background: transparent; color: var(--primary-color);
    border-radius: 50%; cursor: pointer; transition: 0.3s;
}
.page-btn.active, .page-btn:hover { background: var(--primary-color); color: #fff; }

/*Gallery專屬樣式 */
.gallery-container { padding: 40px 0; min-height: 80vh; max-width: 1200px; padding: 0 20px; }
.category-filter { display: flex; justify-content: flex-start; gap: 12px; margin-top: 20px; margin-bottom: 40px; flex-wrap: wrap; }
.filter-btn { padding: 6px 24px; border: 1px solid var(--primary-color); background: transparent; color: var(--primary-color); border-radius: var(--radius-full); cursor: pointer; transition: 0.3s; }
.filter-btn.active, .filter-btn:hover { background: var(--primary-color); color: #fff; }
.category-group { margin-bottom: 40px; position: relative; }
.category-title { color: var(--primary-color); margin-bottom: 20px; padding-bottom: 10px; border-bottom: 1px solid var(--text-light-subtitle); font-weight: 700; }
.gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; }

/* --- 網格卡片樣式 --- */
/* .work-card { position: relative; background: #eee; aspect-ratio: 1 / 1; overflow: hidden; cursor: pointer; transition: 0.3s; }
.work-card:hover { opacity: 0.9; transform: scale(1.02); }
.work-card img { width: 100%; height: 100%; object-fit: cover; display: block; } */

.work-card {
    position: relative;
    /* 這裡使用淡灰色漸層模擬光影 */
    background: #eee linear-gradient(
        90deg, 
        rgba(255, 255, 255, 0) 0%, 
        rgba(255, 255, 255, 0.5) 50%, 
        rgba(255, 255, 255, 0) 100%
    );
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite; /* 循環播放閃爍動畫 */
    
    aspect-ratio: 1 / 1;
    overflow: hidden;
    cursor: pointer;
    transition: 0.3s;
}

/* 閃爍動畫：控制背景位置產生位移感 */
@keyframes shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

.work-card:hover {
    opacity: 0.9;
    transform: scale(1.02);
}



.work-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    /* 確保圖片未載入前是透明的，才看得到底下的動畫 */
    background-color: transparent;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
}

.work-card img.loaded {
    opacity: 1;
}

.series-badge { position: absolute; top: 10px; right: 10px; background: rgba(0, 0, 0, 0.6); color: #fff; padding: 4px 8px; border-radius: 4px; font-size: 0.75rem; display: flex; align-items: center; gap: 5px; z-index: 5; }



.overlay.active { display: flex; top: 0;}

.overlay-close, .overlay-back {
    position: fixed; top: 30px; right: 30px;
    display: flex; align-items: center; justify-content: center;
    width: 48px; height: 48px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 50%; cursor: pointer; z-index: 1010; transition: 0.3s; border: none;
}
.overlay-close:hover, .overlay-back:hover { background: rgba(255, 255, 255, 0.15); }
.material-symbols-outlined, .overlay-back .material-symbols-outlined { font-weight: 100;  color: #fff; }

.overlay-content { 
    position: relative; width: 95%; max-width: 1400px; height: 100vh; 
    display: flex; align-items: center; justify-content: center; margin: 0 auto; 
}




/* --- Overlay 燈箱樣式修正 --- */
.overlay { 
    overflow: hidden; 
    padding-bottom: env(safe-area-inset-bottom);
    box-sizing: border-box;
}

/* --- Overlay 核心層 --- */
.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(5, 5, 5, 0.95); /* 半透明背景 */
    z-index: 2000;
    display: none; /* 由 JS 切換 active */
    opacity: 0;
    transition: opacity 0.3s ease;
    align-items: center;
    justify-content: center;
}

.overlay.active {
    display: flex;
    opacity: 1;
}



/* --- 第一層：資訊層（對齊 Viewer Layer 的尺寸邏輯） --- */
.info-layer {
    display: flex;
    flex-direction: row;
    width: 100%;
    max-width: var(--container-width);
    height: 95vh; /* 使用螢幕高度 */
    margin: auto;
    gap: 60px;
    align-items: center;
    justify-content: center;
    background: transparent;
    overflow: hidden; /* 防止溢出 */
}


.info-cover-box {
    position: relative;

    /* 修改 1：不主動放大，基礎寬度設為自動 */
    flex: 0 1 auto; 
    
    /* 修改 2：高度固定為 95% 視窗高度，讓圖片有明確的參考基準 */
    height: 95vh; 
    max-height: 95vh;
    
    /* 修改 3：寬度根據內容(圖片)自動縮放 */
    width: fit-content; 
    max-width: 80%; /* 給予上限避免橫圖太寬擠掉文字 */

    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}


#infoCoverImg {
    height: 100%; 
    width: auto;  /* 寬度隨比例自動計算 */

    max-width: 100%;
    max-height: 100%;

    object-fit: contain;
    display: block;
    box-shadow: 0 15px 50px rgba(0,0,0,0.15);
}


/* 文字區塊：緊貼圖片容器 */
.info-details {
    flex: 0 0 auto;     
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* 移除左側 padding，改由父層 gap 控制距離 */
    padding-left: 0; 
}
@media (min-width: 900px) {
    .info-details.portrait-info{ width: 300px; }
    .info-cover-box{max-height: 90vh;}
    .info-details.landscape-info{ width: 200px; }
}


.info-cover-box.is-series { cursor: pointer;  transform: scale(1.01);}

/* 建立半透明遮罩層 */
.info-cover-box::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    
    background-color: rgba(0, 0, 0, 0.5); /* 半透明黑色，可自行調整數值 */
    backdrop-filter: blur(1px);           /* 關鍵：背景模糊效果 */
    -webkit-backdrop-filter: blur(8px);    /* 支援 Safari 瀏覽器 */
    
    z-index: 1;                            /* 確保在圖片 (預設 0) 之上 */
    pointer-events: none;                  /* 讓點擊事件可以穿透遮罩，點到下方的圖片或容器 */
    display: none;
}

.info-cover-box.is-series::after { display: block;}

.info-nav-btn {
    position: fixed; top: 50%; transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.05); color: white; border: none;
    width: 50px; height: 50px; cursor: pointer; z-index: 1005;
    transition: 0.3s; display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
}
.info-nav-btn.prev { left: 30px; }
.info-nav-btn.next { right: 30px; }


.page-count-label {
    position: absolute;
    top: 50%;              /* 距離頂部 50% */
    left: 50%;             /* 距離左側 50% */
    transform: translate(-50%, -50%); /* 關鍵：向左及向上偏移自身寬高的 50% 以達到精準置中 */
    text-align: center;
    color: var(--text-light-subtitle);
    background: var(--bg-black);
    padding: 4px 16px;
    min-width: 200px;
    border-radius: 8px;
    font-size: 0.9rem; 
    font-weight: 500;
    display: none; 
    cursor: pointer;
}

.badge-icon::before {
    content: "";
    display: inline-block;
    
    /* 1. 尺寸與對齊 */
    width: 16px;
    height: 16px;
    vertical-align: -13%; /* 建議用 middle 或 text-bottom 較精準 */
    margin-right: 6px;

    /* 2. 核心遮罩設定 (Masking) */
    /* 這裡把圖片當成模板，只有有形狀的地方會顯示背景色 */
    -webkit-mask-image: url("img/icon/icon-read-more.svg");
    mask-image: url("img/icon/icon-read-more.svg");
    
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;

    /* 3. 客製化填色 */
    /* 只要改這一行，SVG 就會變色 */
    background-color: var(--text-light-subtitle); 
    
}
.page-count-label.active { display: block; z-index: 1000; }

/* .info-details {
    flex: 0.5; display: flex; flex-direction: column; align-items: flex-start;
    padding: 16px 0; min-width: 200px;
} */
.info-details h2 { font-size: 1.2rem; margin: 10px 0 15px 0; color: #fff; font-weight: 700; line-height: 1.2; }
.info-details p { font-size: 0.9rem; line-height: 1.8; color: #ccc; margin-bottom: 25px; }

.info-header-meta {
    display: flex; justify-content: space-between; align-items: center;
    width: 100%; margin-bottom: 10px; min-height: 32px;
}
.date-tag {display: flex; font-size: 0.8em; text-align: center; color: var(--primary-hover); font-weight: bold; line-height: 1.8; }

/* --- 第二層：瀏覽層 (Viewer Layer) --- */
.viewer-layer { 
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    display: none; flex-direction: column; align-items: center; 
    justify-content: end;
    z-index: 20;
}
.viewer-layer.active { display: flex; }

/* 修正：確保閱覽層垂直排列並填滿高度 */
#viewerLayer.active {
    display: flex !important; /* 強制覆蓋 JS 的 block */
    flex-direction: column;
    height: 90%;
    width: 100%;
    position: relative;
}
.viewer-img-container {
    /* position: relative; */
    position: absolute; top: 0; left: 0;
    width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
.viewer-img-container img { max-width: 100%; max-height: 100%; object-fit: contain; transition: transform 0.1s ease-out; }

.nav-btn {
    position: absolute; top: 50%; transform: translateY(-50%);
    background: rgba(255,255,255,0.05); color: #fff; border: none;
    width: 50px; height: 50px; cursor: pointer; border-radius: 50%; z-index: 30;
}
.prev-btn { left: 20px; } .next-btn { right: 20px; }
.btn-hidden { visibility: hidden !important; }

/* 修正：Indicator 置中並確保在最上層 */
.viewer-indicator {
    position: absolute;
    left: 50%;
    bottom: -4px;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
    z-index: 1000;
    pointer-events: none; /* 防止遮擋點擊 */
}

@media (min-width: 900px) {
    .viewer-indicator {margin-bottom: -20px; }
    .viewer-layer.viewer-layer-life{ height: 100%; }
    .viewer-layer-life img { height: 90%;}
    .life-img img { height: 90%; }
}
.dot { width: 8px; height: 8px; background: rgba(255,255,255,0.2); border-radius: 50%; transition: 0.3s; }
.dot.active { background: #fff; transform: scale(1.2); }

/* --- RWD 修正 (max-width: 900px) --- */
@media (max-width: 900px) {
    /* 1. 基礎佈局 */
    .gallery-grid { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));}
    .overlay-content { 
        width: 100%; 
        height: 100%; 
    }

    .info-layer { 
        flex-direction: column; 
        height: 100%;
        gap: 8px; 
        padding-top: 60px; 
        overflow-y: auto; 
        position: relative; 
        touch-action: pan-y; /* 資訊層允許垂直捲動以閱讀文字 */
        justify-content: flex-start; /* 手機版從頂部開始排列 */
    }
    .viewer-layer.active{
        justify-content: center;        
    }
    #viewerLayer.active {
        height: 100%;
    }
    

    /* 2. 圖片/檢視容器 (移除重複的 touch-action 與 min-width) */
    .info-cover-box, 
    .viewer-img-container {
        flex: 0 0 auto;
        top: 0;
        height: auto;
        min-height: 300px;
        max-height: 80%;
        max-width: 100%;
        width: 100%;             /* 佔滿手機寬度 */
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;        /* 確保縮放動畫不溢出 */
        touch-action: pan-y;
        overflow-y: auto; /* 確保內容超出時可以捲動 */
        overflow-x: hidden; /* 嚴格禁止水平溢出 */
    }

    

    /* 3. 圖片主體 (整合 #infoCoverImg 與 #viewerImg，移除衝突設定) */
    #infoCoverImg, 
    #viewerImg {
        max-height: 100%;        /* 統一高度限制 */
        /* max-width: 100%; */
        width: auto;             /* 確保比例正確不拉伸 */
        height: auto;            /* 確保比例正確不拉伸 */
        object-fit: contain;     /* 雙重保險：確保不被裁切 */
        pointer-events: none;    /* 事件穿透 */
        user-select: none;
        -webkit-user-drag: none;
        will-change: transform;  /* 硬體加速 */
        box-shadow: 0 10px 30px rgba(0,0,0,0.3);
        transition: transform 0.1s ease-out; /* 保留平滑動畫 */
    }

    /* 4. 詳情與 UI 介面 */
    .info-details { 
        /* margin-top: 8px; */
        padding: 8px 16px;
        gap: 0;
        width: 100%; 
        box-sizing: border-box; 
    }
    .info-header-meta {
        margin-bottom: 0px;
    }
    .info-details h2 { font-size: 0.9rem; line-height: 1.2; margin: 0 0 8px 0; color: #fff; font-weight: 700; line-height: 1; }
    .info-details p { font-size: 0.9rem; line-height: 1.2; color: #ccc; margin-bottom: 8px; }

    .viewer-layer { 
        height: 100%; 
    }
    .viewer-layer-life{
        justify-content: center;
    }

    .viewer-indicator {
        position: absolute; 
        bottom: 20px; 
        left: 50%;
        transform: translateX(-50%); 
    }

    /* 5. 導覽與操作按鈕 */
    .nav-btn, 
    .info-nav-btn { 
        display: none !important; 
    }

    .overlay-close, 
    .overlay-back { 
        width: 24px;
        height: 24px;
        top: 20px; 
        left: 20px; 
        right: auto; 
        background: rgba(0,0,0,0.5); 
    }

    .ui-hidden { 
        opacity: 0; 
        pointer-events: none; 
        transition: opacity 0.3s ease;
    }
}

/* New專屬樣式 */
.new-container {
            flex: 1;
            display: flex;          /* 使用 Flex 佈局 */
            flex-direction: column; /* 讓內容垂直排列 */
            align-items: center;    /* 關鍵：將子元素（包含按鈕）水平置中 */
            margin: 0 auto;
            padding: 20px 20px;
        }



        /* --- 動態內容容器 (work Section) --- */
        .work-row {
            max-width: 1200px;
            margin: 20px auto;
            padding: 0 20px;
            display: flex;
            flex-direction: column;
            gap: 80px; /* 控制各筆作品之間的距離 */
        }

        .work-item {
            display: flex;
            align-items: center;
            gap: 50px;
            width: 100%;
        }

        /* 關鍵：維持原始結構，偶數筆圖片在右側 */
        .work-item:nth-child(even) {
            flex-direction: row-reverse;
        }

        /* 圖片包裝層 */
        .work-img-wrap {
            flex: 0 1 auto; 
            max-width: 50%;
            height: 100%;
            overflow: hidden;
            border-radius: var(--radius-md);
            box-shadow: 0 20px 40px rgba(0,0,0,0.15);
            
        }

        .work-img-wrap img {
            width: 100%;
            max-height: 80vh;   /* 關鍵設定：最大高度為視窗的 90% */
            display: block;
            transition: transform 0.5s ease;
            object-fit: cover;
        }


        /* 文字內容層 */
        .work-content {
            flex: 0 0 auto; 
            width: 300px; /* 給予文字區塊一個穩定的寬度 */
            /* flex: 1;
            display: flex; */
            flex-direction: column;
            /* 如果希望文字也置中，可開啟下方兩行，目前維持原始靠左/靠右感 */
            /* align-items: center; */
            /* text-align: center; */
        }

        .date-label {
            font-size: 0.85rem;
            color: var(--accent-color);
            font-weight: 700;
            margin-bottom: 16px;
            text-transform: uppercase;
        }

        .work-content h2 {
            color: var(--text-main);
            margin-bottom: 4px;
        }

        .work-content p {
            color: var(--text-body);
            line-height: 1.6;
            margin-bottom: 20px;
        }


        /* 按鈕樣式 */
        .btn-more {
            width: 200px;           /* 1. 設定固定寬度 (依需求調整數值) */
            display: inline-flex;   /* 2. 使用 inline-flex 讓按鈕寬度受控 */
            display: flex;
            justify-content: center;
            padding: 12px 30px;
            border: 1px solid var(--accent-color);
            color: var(--accent-color);
            border-radius: var(--radius-full);
            font-weight: 500;
            transition: var(--transition-base);
        }

        .btn-more:hover {
            background: var(--accent-color);
            color: white;
        }

        /* 加載中與錯誤提示 */
        .loading-text {
            text-align: center;
            padding: 100px 0;
            color: var(--text-muted);
        }

        /* 電腦版尺寸調整 */
        @media (min-width: 900px) {
            :root {
                --container-gap: 32px;
            }
        }

        /* --- 手機版 RWD 排版 --- */
        @media (max-width: 900px) {
            .new-container{
                padding: 0px 10px;
            }
            .work-item, .work-item:nth-child(even) {
                flex-direction: column;
                align-items: center;
                gap: 30px;
            }
            .work-row {
                padding: 0;
                gap: 60px; /* 手機版減少作品間距 */
            }
            /* 圖片包裝層 */
            .work-img-wrap {
                flex: 1.2; /*圖片佔比略大*/
                max-width: 100%;
                height: 100%;
                overflow: hidden;
                border-radius: var(--radius-md);
                box-shadow: 0 20px 40px rgba(0,0,0,0.15);
            }
            .work-content {
                padding-left: 8px;
            }
        

        }
/* info 頁面新增樣式 */
/* --- 佈局結構 --- */
.page-info {
    height: auto !important;
}

.info-container{
    padding: 20px 30px;
    max-width: 1200px;
    display: flex;
    flex-direction: column;
    gap:20px;
}


.intro{
    gap: 40px;
}
.intro-text{
    margin-bottom: 40px;
    line-height: 1.8;
    color: var(--text-body);
}

/* --- Footer SNS 區塊修正 --- */
/* 共用 SNS 按鈕基礎樣式 */
.main-logo.info-logo:hover{
    transform: scale(1);
}
.sns-links {
    display: flex;
    flex-direction: column;
    gap: 30px;
    list-style: none;
    padding: 0;
}

.sns-links li {
    gap: 20px;
    display: flex;
    flex-direction: row;
    align-items: center;
}
.sns-links p{
    font-size: 0.75rem;
}
@media(min-width: 900px) {

    .info-container{
        margin: auto;
        margin-top: 180px;
        margin-bottom: 40px;
        flex-direction: row;
        justify-content: center;
        align-items: start;
        gap: 40px;
        transform: translateX(-50px);
    }
    /* .main-logo.info-logo{
        position: static;
    } */
    .intro-text{
        margin-bottom: 80px;
    }
    .sns-links {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
    }
    .sns-links li {
        gap: 10px;
    }
}

.sns-btn {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full);
    transition: all 0.3s ease;
}
/* PNG 圖示統一處理邏輯 */
.png-icon {
    background-image: var(--icon); /* 使用行內定義的預設圖 */
    background-size: 32px;         /* 統一控制圖示大小 */
    background-repeat: no-repeat;
    background-position: center;
}

.png-icon:hover {
    background-image: var(--hover); /* 懸停時自動切換為行內定義的 Hover 圖 */
    background-color: transparent;  /* 根據需求決定是否保留背景色 */
    transform: translateY(-3px);
}


/* 讓圖片在 src 改變時平滑切換 */
#infoCoverImg {
    transition: opacity 0.25s ease-in-out;
    opacity: 1;
}

/* 下載中的透明度（您可以根據喜好調整 0.3 ~ 0.5） */
.img-loading {
    opacity: 0.3 !important;
}