.timeline-container {
position: relative;
min-height: 320px;
width: 100%;
}
.timeline-line {
position: absolute;
top: 50%;
left: 0;
width: 100%;
height: 4px;
background: #ccc;
transform: translateY(-50%);
z-index: 1;
}
.timeline-item {
position: absolute;
top: calc(50% - 5px);
transform: translateX(-50%);
text-align: center;
z-index: 2;
}
.timeline-item.explanation-up {
top: calc(50% - 85px);
padding-top: 80px;
}
.timeline-item.explanation-up .explanation {
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
}
.timeline-item .circle {
width: 10px;
height: 10px;
border-radius: 50%;
background: black;
margin: 0 auto 5px;
}
.timeline-item .label-top {
flex-direction: column-reverse;
position: absolute;
top: -20px;
left: 50%;
transform: translateX(-50%);
}
.timeline-item .date {
margin-top: 5px;
font-weight: bold;
}
.timeline-item .explanation {
left: 50%;
transform: translateX(-50%);
display: flex;
flex-direction: column;
align-items: center;
width: 200px;
}
.timeline-item.explanation-up .explanation {
top: -20px;
flex-direction: column-reverse;
}
.timeline-item.explanation-down .explanation {
position: relative;
margin-top: 8px;
flex-direction: column;
}
.timeline-item .explanation-line {
width: 2px;
height: 24px;
background: #999;
flex-shrink: 0;
}
.timeline-item .explanation-box {
padding: 10px;
background: #f5f5f5;
border: 1px solid #ccc;
border-radius: 6px;
font-size: 14px;
line-height: 1.4;
color: #333;
width: auto;
box-sizing: border-box;
}
.timeline-item.red .circle { background: red; }
.timeline-item.blue .circle { background: blue; }
.timeline-item.green .circle { background: green; }
.timeline-item.black .circle { background: black; }