.pachi-timeline{

    /* タイムライン軸 */
    --timeline-axis: 64px;
    position: relative;
    background:#1d2638;
    border-radius:16px;
    overflow:hidden;

}
.pachi-timeline::before{

    content:"";

    position:absolute;

    left:calc(var(--timeline-axis) / 2);

    transform:translateX(-50%);

    top:44px;

    bottom:44px;

    width:2px;

    background:#3a475d;

}

.pachi-timeline-item{

    display:grid;
    grid-template-columns: var(--timeline-axis) 1fr;
    gap:20px;

    padding:20px 24px;

    position:relative;

}

.pachi-timeline-item{

    border-bottom:1px solid #2b364c;

}

.pachi-timeline-item:last-child{

    border-bottom:none;

}

.pachi-timeline-start{

    background:#10b981;

}

.pachi-timeline-end{

    background:#ef4444;

}

.pachi-timeline-viewers{

    background:#0ea5e9;

}
.pachi-timeline-likes{

    background:#f59e0b;

}
.pachi-timeline-peak{

    background:#06b6d4;

}

.pachi-timeline-default{

    background:#666;

}

.pachi-timeline-content{

    flex:1;

    background:#161d2d;

    border-radius:12px;

    padding:18px;

}

.pachi-timeline-title{

    font-size:16px;

    font-weight:700;

    color:#fff;

}

.pachi-timeline-value{

    font-size:30px;

    font-weight:700;

    color:#06d6ff;

    margin-top:10px;

}

.pachi-timeline-time{

    margin-top:10px;

    color:#999;

    font-size:13px;

}

.pachi-highlight-time{

    margin-top:2px;

    font-size:11px;

    color:#8f9cb5;

}

.pachi-time-elapsed{

    display: inline-block;

    color: #00e5ff;

    font-weight: 700;

}

.pachi-timeline-time .pachi-time-elapsed{

    font-size: 14px;

    margin-right: 8px;

}

.pachi-highlight-time .pachi-time-elapsed{

    font-size: 12px;

    margin-right: 6px;

}

.pachi-time-absolute{

    color: #7c8aa5;

    font-size: 0.9em;

}


.pachi-timeline-marker{

    width: var(--timeline-axis);

    display:flex;

    justify-content:center;

    align-items:flex-start;

    position:relative;

    flex-shrink:0;

}

.pachi-timeline-node{

    width:42px;
    height:42px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff;
    font-size:18px;
    position:relative;
    z-index:2;

}

.pachi-timeline-content{

    min-width:0;

}

/* ===========================
   配信ハイライト
=========================== */

.pachi-highlight {

    display: flex;

    flex-direction: column;

    gap: 10px;

}

.pachi-highlight-title {

    display: flex;

    align-items: center;

    gap: 6px;

    margin-bottom: 8px;

    font-size: 14px;

    font-weight: 700;

    color: #fff;

}

.pachi-highlight-item{

    display:flex;

    align-items:flex-start;

    gap:10px;

}

.pachi-highlight-icon{

    width:28px;

    height:28px;

    flex-shrink:0;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    color:#fff;

    font-size:12px;

}

.pachi-highlight-body{

    flex:1;

}

.pachi-highlight-body .pachi-highlight-title{

    margin:0;

    font-size:13px;

    font-weight:600;

    line-height:1.4;

}

.pachi-highlight-item + .pachi-highlight-item{

    padding-top:10px;

    border-top:1px solid rgba(255,255,255,.05);

}