@charset "UTF-8";

        .item-container {
            border: 1px solid #ccc;
            border-radius: 4px;
            overflow: hidden;
            background: #fff;
        }
        /* 列表最上方的 Header 標題列 */
        .item-header {
            display: flex;
            padding: 12px 15px;
            background-color: #f4f4f4;
            font-weight: bold;
            border-bottom: 1px solid #ccc;
        }
        .header-date {
            width: 120px;
            flex-shrink: 0;
            margin: 0 auto;
        }
        .header-details {
            flex-grow: 1;
            margin: 0 auto;
            text-align: center;
        }

        /* 每一列的群組（包含相同日期的項目） */
        .item-row {
            display: flex;
            border-bottom: 1px solid #eee;
        }
        .item-row:last-child {
            border-bottom: none;
        }

        /* 日期欄位 (支援 rowspan 合併效果) */
        .row-date {
            width: 130px;
            flex-shrink: 0;
            padding: 15px;
            font-weight: bold;
            color: #444;
            border-right: 1px solid #eee;
            display: flex;
            align-items: center; /* 垂直置中 */
            background-color: #fafafa;
            font-size: 1em;
        }

        /* 該日期底下的詳情清單容器 */
        .row-details-list {
            flex-grow: 1;
            display: flex;
            flex-direction: column;
        }

        /* 個別詳情項目 */
        .sub-item {
            padding: 15px;
            border-bottom: 1px solid #eee;
        }
        .sub-item:last-child {
            border-bottom: none;
        }

        /* 每隔一層群組套用指定背景顏色 #b5d7fd 方便區分 */
        .item-row.highlight .row-date,
        .item-row.highlight .sub-item {
            background-color: #b5d7fd;
        }

        .sub-item p {
            margin: 0;
            padding: 0;
        }

        /* 響應式設計：當螢幕小於 600px (手機版) 時的自動調整 */
        @media screen and (max-width: 600px) {
            .item-header {
                display: none; 
            }
            .item-row {
                flex-direction: column;
                border-bottom: 2px solid #ddd;
            }
            .row-date {
                width: 100%;
                border-right: none;
                border-bottom: 1px dashed #ccc;
                padding: 10px 15px;
                background-color: #f0f0f0 !important;
            }
            .row-date::before {
                content: "日期: ";
                color: #666;
                font-weight: normal;
                margin-right: 5px;
            }
            .sub-item::before {
                content: "詳情: ";
                display: block;
                font-size: 0.85em;
                color: #666;
                margin-bottom: 4px;
                font-weight: bold;
            }
        }