:root {
    --bg-color: #0d1110;
    --card-bg: rgba(30, 40, 35, 0.6);
    --accent-color: #9cdba6;
    --text-main: #f0f0f0;
    --text-dim: #a0a0a0;
    --glass-border: rgba(255, 255, 255, 0.1);
    --frame-wood: #151210;
    --mat-board: #e0e0d5;
}

body {
    background-color: #535353;
}
.main {
    background-color: #666;
    padding-top: 200px;
}

h1 { 
    font-weight: 300; 
    letter-spacing: 8px; 
    color: var(--accent-color); 
    margin-bottom: 30px; 
    text-shadow: 0 0 15px rgba(156, 219, 166, 0.2); text-align: center; 
}

.gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 30px; width: 100%; max-width: 1400px;
    padding-bottom: 90px;
}

.forestcat {
    max-width: 1200px;
    padding: 50px 20px;
    margin-bottom: 80px auto 0 auto;
}
.forestcat ul {
    display: grid;
    grid-template-columns: repeat(5, 1fr); 
    gap: 20px;
    list-style: none;   
    padding: 0;        
    margin: 0;          
}
.forestcat .indexul {
    grid-template-columns: repeat(3, 1fr); 
}

.forestcat li {
    width: auto;
    display: inline-block; /* 確保項目在同一行 */
}

.ali {
    box-sizing: border-box;
    display: inline-block;
    margin-bottom: 10px;
}
.ali p {
    margin-top: 10px;
}

.forestcat a {
    text-align: center; 
    text-decoration: none;
    padding: 5px 10px; 
}

.ali a img:hover {
    border: 1px solid  #f0f0f0;
}

.forestcat a img {
    float: left;
    width: 100%;
}

/* .ali a {
    text-decoration: none;
    padding: 5px 10px;
} */
.ali a img {
    width: 100%;
}

.active-cat {
    text-decoration: none; /* 移除底線 */
    padding: 5px 10px;     /* 增加點擊範圍 */
    color: orangered;
}
.active-no {
    color: var(--accent-color);
}

.card {
    background: var(--card-bg); border: 1px solid var(--glass-border);
    border-radius: 4px; overflow: hidden; transition: all 0.5s ease;
    cursor: pointer; backdrop-filter: blur(8px);
}

.card:hover { transform: translateY(-5px); border-color: var(--accent-color); box-shadow: 0 15px 40px rgba(0, 0, 0, 0.6); }

.img-container { width: 100%; aspect-ratio: 1 / 1; overflow: hidden; background: #000; }
.img-container img { width: 100%; height: au; object-fit: cover; transition: transform 0.8s ease; opacity: 0.85; }
.card:hover img { transform: scale(1.05); opacity: 1; }

.info { padding: 20px; border-top: 1px solid var(--glass-border); }
.day-tag { font-size: 11px; color: var(--accent-color); letter-spacing: 2px; margin-bottom: 8px; display: block; }
.prompt-text { 
    font-size: 14px;
    line-height: 1.8; 
    color: var(--text-main); 
    font-weight: 300; 
    display: -webkit-box; 
    /* -webkit-line-clamp: 2; 
    -webkit-box-orient: vertical;  */
    overflow: hidden; 
}

/* --- 燈箱與裱框 --- */
#lightbox {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(5, 8, 7, 0.98); display: none;
    flex-direction: column; justify-content: center; align-items: center;
    z-index: 1000; backdrop-filter: blur(15px); padding: 20px;
}

.lightbox-content { position: relative; max-width: 50%; text-align: center; animation: fadeIn 0.4s ease; }

.frame-container {
    display: inline-block;
    position: relative;
    padding: 60px; /* 稍微縮小預設 padding 以適應螢幕 */
    background-color: var(--mat-board);
    border: 20px solid var(--frame-wood);
    box-shadow: 0 35px 90px rgba(125,125,125,1), inset 0 0 20px rgba(0,0,0,1);
    line-height: 0;
    cursor: pointer;
}

.inner-mat-shadow {
    display: inline-block;
    position: relative;
    box-shadow: inset 3px 3px 12px rgba(0,0,0,0.5);
    background: #000;
}

#lightbox-img {
    max-width: 100%;
    max-height: 70vh;
    display: block;
    object-fit: contain;
    transition: opacity 0.3s ease;
}

.header {
    background-color: rgba(73, 104, 73, 0.68);
}

@media (min-width: 1024px) {
    .frame-container { padding: 110px; border-width: 30px; }
}

@media (max-width: 960px) {
    .gallery {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        gap: 10px;
        width: 100%;
        max-width: 100%;
        padding: 0 10px;
    }
    .lightbox-content {
        max-width: 96%;
    }

    .forestcat .indexul {
        grid-template-columns: repeat(1, 1fr); 
    }
}


@keyframes fadeIn { from { opacity: 0; transform: scale(0.98); } to { opacity: 1; transform: scale(1); } }