﻿:root {	
    --primary-blue: #004596;	
        --border-color: #e2e8f0;	
        --text-main: #333;	
        --text-gray: #666;	
        --bg-light: #f8fafc;	
    }	
    * {	
        margin: 0;	
        padding: 0;	
        box-sizing: border-box;	
        font-family: "Microsoft YaHei", sans-serif;	
    }	
    body {	
        background-color: #fff;	
        color: var(--text-main);	
            padding: 40px;	
            }	
    .detail-container {	
        max-width: 1400px;	
        margin: 0 auto;	
    }	
    /* 隐藏 CMS 数据容器，仅供 JS 解析使用 */	
    #cmsDataContainer, .infoList {	
        display: none !important;	
    }	
    /* Header */	
    .detail-header {	
        display: flex;	
        justify-content: space-between;	
        align-items: flex-end;	
        margin-bottom: 30px;	
        padding-bottom: 15px;	
        border-bottom: 1px solid var(--border-color);	
            }	
    .brand h1 {	
        font-size: 28px;	
        color: var(--primary-blue);	
            font-weight: 800;	
            margin-bottom: 8px;	
            }	
    .brand-line {	
        width: 60px;	
        height: 4px;	
        background: #ff5722;	
    }	
    .breadcrumbs {	
        font-size: 14px;	
        color: #999;	
    }	
    .breadcrumbs a {	
        color: #666;	
        text-decoration: none;	
        transition: color 0.3s;	
    }	
    .breadcrumbs a:hover {	
        color: var(--primary-blue);	
            text-decoration: underline;	
            }	
    .breadcrumbs span {	
        color: var(--text-gray);	
            }	
    /* Filters */	
    .calendar-filters {	
        display: flex;	
        justify-content: flex-end;	
        margin-bottom: 20px;	
    }	
    .select-group {	
        display: flex;	
        gap: 15px;	
    }	
    select {	
        padding: 8px 35px 8px 15px;	
        border: 1px solid var(--border-color);	
            border-radius: 4px;	
            font-size: 16px;	
            color: var(--text-main);	
                background: #fdfdfd;	
                cursor: pointer;	
                appearance: none;	
                background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");	
                background-repeat: no-repeat;	
                background-position: right 8px center;	
                background-size: 16px;	
                }	
    /* Calendar Grid */	
    .detail-calendar-grid {	
        border: 1px solid var(--border-color);	
            background: #fff;	
            }	
    .grid-header {	
        display: grid;	
        grid-template-columns: repeat(7, 1fr);	
        background: var(--bg-light);	
            border-bottom: 1px solid var(--border-color);	
                }	
    .weekday {	
        padding: 15px;	
        text-align: center;	
        font-weight: 600;	
        color: var(--text-gray);	
            border-right: 1px solid var(--border-color);	
                }	
    .weekday:last-child {	
        border-right: none;	
    }	
    .grid-body {	
        display: grid;	
        grid-template-columns: repeat(7, 1fr);	
    }	
    .day-cell {	
        min-height: 160px;	
        padding: 15px;	
        /* 统一内边距 */	
        border-right: 1px solid var(--border-color);	
            border-bottom: 1px solid var(--border-color);	
                position: relative;	
                transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);	
                background: #fff;	
                display: flex;	
                flex-direction: column;	
                align-items: flex-start;	
                /* 强制所有内部元素左对齐 */	
                }	
    .day-cell:hover:not(.other-month) {	
        background: #fcfdfe;	
    }	
    .day-cell.other-month {	
        background: #fdfdfd;	
        border-color: #f1f5f9;	
    }	
    .day-number {	
        font-size: 15px;	
        color: #4a5568;	
        margin-bottom: 15px;	
        display: inline-flex;	
        align-items: center;	
        justify-content: flex-start;	
        /* 日期数字左对齐 */	
        width: 28px;	
        height: 28px;	
        position: relative;	
        z-index: 2;	
        font-weight: 600;	
        flex-shrink: 0;	
    }	
    .day-cell.today .day-number::after {	
        content: '';	
        position: absolute;	
        left: 50%;	
        /* 居中红圈 */	
        top: 50%;	
        transform: translate(-50%, -50%);	
        width: 30px;	
        height: 30px;	
        background: #e11d48;	
        border-radius: 50%;	
        z-index: -1;	
        box-shadow: 0 2px 4px rgba(225, 29, 72, 0.2);	
    }	
    .day-cell.today .day-number {	
        color: #fff;	
        justify-content: center;	
        /* 今日数字在红圈内居中 */	
    }	
    /* Event List in Cells */	
    .cell-events {	
        display: flex;	
        flex-direction: column;	
        gap: 8px;	
        /* 规范事项间的间距 */	
        flex: 1;	
        width: 100%;	
        /* 撑满宽度确保对齐 */	
    }	
    .detail-event-item {	
        background: #004596;	
        color: #fff;	
        padding: 8px 12px;	
        /* 增加内边距提升易读性 */	
        border-radius: 4px;	
        font-size: 13px;	
        /* 稍微调大字号 */	
        line-height: 1.6;	
        /* 规范行高，确保多行文本对齐 */	
        text-decoration: none;	
        display: block;	
        cursor: pointer;	
        word-break: break-all;	
        text-align: justify;	
        /* 两端对齐，使每行字看起来更整齐 */	
        overflow: visible;	
        transition: all 0.2s ease;	
        margin-bottom: 0;	
    }	
    .detail-event-item:hover,	
    .detail-event-item:focus-visible {	
        background: #ff8a00;	
        color: #fff;	
        outline: none;	
    }	
    /* Responsive */	
    @media (max-width: 1200px) {	
        .weekday {	
            font-size: 14px;	
            padding: 10px;	
        }	
        .day-cell {	
            min-height: 150px;	
        }	
    }	
