/* vertical-timeline-container 스타일 추가 */
.vertical-timeline-container { display: flex; flex-direction: column; gap: 15px; position: relative; padding-left: 20px; }
.vertical-timeline-container::before { content: ''; position: absolute; left: 5px; top: 0; bottom: 0; width: 2px; background: #eee; }

.timeline-item { background: #fff; border-radius: 12px; border: 1px solid #eee; padding: 15px; display: flex; align-items: flex-start; gap: 15px; position: relative; transition: 0.2s; cursor: pointer; }
.timeline-item:hover { transform: translateX(5px); border-color: #00b48a; box-shadow: 0 4px 15px rgba(0,0,0,0.05); }
.timeline-item::before { content: ''; position: absolute; left: -19px; top: 22px; width: 10px; height: 10px; background: #fff; border: 2px solid #00b48a; border-radius: 50%; z-index: 1; }

.ti-time { min-width: 60px; font-size: 14px; font-weight: 800; color: #00b48a; }
.ti-content { flex: 1; }
.ti-title-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.ti-name { font-size: 16px; font-weight: 800; color: #111; }
.ti-pax { font-size: 13px; font-weight: 800; color: #00b48a; background: #e6f7f3; padding: 3px 10px; border-radius: 20px; }

.ti-details { font-size: 13px; color: #666; line-height: 1.5; }
.ti-meta { display: flex; gap: 15px; margin-top: 10px; padding-top: 10px; border-top: 1px dashed #eee; font-size: 12px; color: #888; font-weight: 600; }
.ti-meta span { display: flex; align-items: center; gap: 4px; }
.ti-meta .material-icons { font-size: 14px; }

.ti-badge { font-size: 10px; font-weight: 800; padding: 2px 8px; border-radius: 4px; margin-left: 8px; vertical-align: middle; }
.ti-badge.cat-pickup { background: #e8f4ff; color: #007aff; }
.ti-badge.cat-hopping { background: #e6f7f3; color: #00b48a; }
.ti-badge.cat-activity { background: #f3f3f3; color: #666; }