body {
            font-family: Arial, sans-serif;
            background-color: #f0f2f5;
            padding: 20px;
            margin: 0;
        }

        h1 {
            text-align: center;
            margin-bottom: 30px;
        }

        /* ✅ Masonry 瀑布流布局 */
        .photo-gallery {
            column-count: 4;              /* 一行4列，可根据屏幕宽度自适应 */
            column-gap: 20px;
            padding: 10px;
        }

        @media (max-width: 1200px) {
            .photo-gallery { column-count: 3; }
        }
        @media (max-width: 800px) {
            .photo-gallery { column-count: 2; }
        }
        @media (max-width: 500px) {
            .photo-gallery { column-count: 1; }
        }

        /* 单个照片项目 */
        .photo-item {
            background-color: white;
            border: 1px solid #ddd;
            padding: 10px;
            padding-bottom: 45px; /* 为日期预留空间 */
            box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.15);
            margin-bottom: 20px;
            position: relative;
            display: inline-block;
            width: 100%;
            box-sizing: border-box;
            transition: transform 0.25s ease, box-shadow 0.25s ease;
            break-inside: avoid; /* 防止跨列断裂 */
        }

        /* 随机旋转 */
        .photo-item:nth-child(5n + 1) { transform: rotate(2deg); }
        .photo-item:nth-child(5n + 2) { transform: rotate(-1.5deg); }
        .photo-item:nth-child(5n + 3) { transform: rotate(1deg); }
        .photo-item:nth-child(5n + 4) { transform: rotate(-2deg); }
        .photo-item:nth-child(5n + 5) { transform: rotate(1.5deg); }

        /* 悬停效果 */
        .photo-item:hover {
            transform: scale(1.05) rotate(0deg) !important;
            box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.25);
            z-index: 10;
        }

        /* 图片样式：根据自身比例显示 */
        .photo-item img {
            width: 100%;
            height: auto;
            display: block;
            object-fit: contain;
            border-radius: 3px;
            cursor: pointer;
        }

        /* 日期样式 */
        .photo-item .date {
            position: absolute;
            bottom: 10px;
            right: 10px;
            font-size: 12px;
            color: #888;
        }

        /* Lightbox 样式 */
        .lightbox-overlay {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.85);
            align-items: center;
            justify-content: center;
            z-index: 1000;
            cursor: zoom-out;
        }

        .lightbox-overlay img {
            max-width: 90%;
            max-height: 90vh;
            box-shadow: 0 0 30px rgba(255, 255, 255, 0.3);
            cursor: default;
            border-radius: 5px;
        }