body {
    font-family: 'Segoe UI', sans-serif;
}

#gallery img {
    width: 100%;
    height: 250px;
    object-fit: cover;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.heart {
    cursor: pointer;
    font-size: 1.5rem;
    transition: color 0.3s;
}

.heart.liked {
    color: red !important;
}

#dateList .list-group-item {
    cursor: pointer;
    transition: background 0.2s;
}

#dateList .list-group-item:hover {
    background-color: #f0f0f0;
}

#dateList .active {
    background-color: #0d6efd;
    color: white;
}

.lightbox {
    display: none;
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0,0,0,0.8);
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

.lightbox img {
    max-width: 90%;
    max-height: 90%;
    border-radius: 12px;
}

.star {
    cursor: pointer;
    font-size: 1.6rem;
    transition: color 0.3s;
    color: #ccc; /* 空心星星默认灰色 */
}

.star.liked {
    color: #ffd700; /* 实心星星金色 */
}

body, html {
    margin: 0;
    padding: 0;
    height: 100%;
}

.container-fluid {
    padding: 0; /* 移除 Bootstrap 默认的内边距 */
}

.row {
    margin: 0; /* 移除 Bootstrap 默认的外边距 */
}

#dateList {
    margin-bottom: 0; /* 确保没有底部外边距 */
}

#gallery {
    margin-top: 0; /* 确保没有顶部外边距 */
}

body, html {
    margin: 0;
    padding: 0;
    height: 100%;
}

.container-fluid {
    display: flex;
    flex-direction: column;
    height: 100vh; /* 视口高度 */
}

.row {
    flex: 1; /* 让行充满剩余空间 */
    display: flex;
    flex-wrap: wrap;
}

.col-md-2, .col-md-10 {
    flex: 1; /* 让列充满整个行 */
}

#dateList {
    overflow-y: auto; /* 如果内容超出，允许滚动 */
    max-height: 50vh; /* 最大高度为视口的50% */
}

#gallery {
    margin-top: 0;
    padding-top: 0;
    overflow-y: auto; /* 如果内容超出，允许滚动 */
}

/* ========= 电脑端：窄边栏 ========= */
@media (min-width: 769px) {
    .col-md-2 {               /* 左侧日期栏 */
        flex: 0 0 220px !important;   /* 固定 220px，不放大不缩小 */
        max-width: 220px;
    }
    .col-md-10 {              /* 右侧内容区 */
        flex: 1 1 0% !important;      /* 占满剩余宽度 */
        max-width: none;
    }
}

/* ========= 移动端：日期在上，图片全宽 ========= */
/* ===== 移动端：消灭右侧大空白 ===== */
@media (max-width: 768px) {
    /* 1. 强制 2 列布局，占满屏幕宽度 */
    #gallery.row {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    #gallery > [class*="col-"] {
        padding-left: 4px !important;
        padding-right: 4px !important;
        flex: 0 0 50% !important;   /* 一行 2 张 */
        max-width: 50% !important;
    }

    /* 2. 极小屏（< 400px）自动变 1 列 */
    @media (max-width: 400px) {
        #gallery > [class*="col-"] {
            flex: 0 0 100% !important;
            max-width: 100% !important;
        }
    }

    /* 3. 图片完全填满格子，不留黑边 */
    #gallery img {
        width: 100%;
        height: auto;
        aspect-ratio: 1 / 1;   /* 正方形，可改 4/3 等 */
        max-height: none;
    }
}

/* ===== 可缩放容器 ===== */
.pinch-box {
    width: 90vw;
    height: 90vh;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: zoom-out;
}

.pinch-box img {
    max-width: 100%;
    max-height: 100%;
    user-select: none;
    pointer-events: none;   /* 让点击透给容器，关闭灯箱 */
}