/* TIMELINE */
.timeline { position: relative; }
.timeline::before { content: ''; position: absolute; left: 28px; top: 0; bottom: 0; width: 0; background: var(--paper3); }

.tl-item { position: relative; padding-left: 56px; margin-bottom: 10px; }
.tl-item::before { content: ''; position: absolute; left: 28px; top: 0; bottom: -10px; width: 1.5px; background: var(--paper3); }
.tl-item:last-child::before { display: none; }
.tl-dot { 
  position: absolute; left: 20px; top: 16px;
  width: 18px; height: 18px; border-radius: 50%; 
  background: var(--paper); border: 2px solid var(--paper3);
  display: flex; align-items: center; justify-content: center;
  font-size: 8px; z-index: 1;
}
.tl-dot.accent { border-color: var(--accent); background: var(--accent); }
.tl-dot.transport { border-color: var(--blue); background: var(--blue); }
.tl-dot.hotel { border-color: var(--green); background: var(--green); }

.tl-card {
  background: white; border-radius: var(--radius); padding: 12px 14px;
  box-shadow: var(--shadow); cursor: pointer; transition: transform 0.15s, box-shadow 0.15s;
  border: 1px solid rgba(200,216,232,0.6);
}
.tl-card:active { transform: scale(0.98); box-shadow: 0 1px 8px rgba(15,25,35,0.06); }
.tl-time { font-size: 11px; color: var(--ink3); margin-bottom: 4px; font-weight: 500; letter-spacing: 0.03em; }
.tl-name { font-size: 15px; font-weight: 600; color: var(--ink); }
.tl-desc { font-size: 12px; color: var(--ink3); margin-top: 3px; line-height: 1.5; }
.tl-tags { display: flex; gap: 5px; margin-top: 8px; flex-wrap: wrap; }
.tag { font-size: 10px; padding: 3px 9px; border-radius: 99px; font-weight: 600; letter-spacing: 0.02em; }
.tag-map { background: #e0f2f1; color: #0d7a72; }
.tag-food { background: #fde8e0; color: #b5420a; }
.tag-culture { background: #e8f4fd; color: #1a5c9a; }
.tag-shop { background: #fef3e2; color: #9a6200; }
.tag-hotel { background: #f0e8fd; color: #6a2c9a; }

/* TRANSPORT CARD */
.transport-card {
  background: #e8f4fd; border-radius: 12px; padding: 10px 14px;
  border-left: 3px solid #1a5c9a; margin-bottom: 10px;
}
.transport-route { font-size: 13px; font-weight: 600; color: #1a5c9a; }
.transport-detail { font-size: 11px; color: var(--ink3); margin-top: 3px; }
.transport-info { display: flex; gap: 12px; margin-top: 6px; }
.transport-stat { font-size: 11px; color: var(--ink2); }
.transport-stat span { font-weight: 700; color: var(--ink); }

/* EXPENSE SUMMARY */
.expense-day-total {
  background: var(--paper2); border-radius: var(--radius); padding: 14px 16px; margin-bottom: 14px;
}
.expense-title { font-size: 11px; color: var(--ink3); margin-bottom: 8px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; }
.expense-amount { font-size: 22px; font-weight: 700; color: var(--ink); font-family: 'Outfit', sans-serif; }
.expense-twd { font-size: 12px; color: var(--ink3); margin-top: 2px; }
.expense-list { margin-top: 10px; border-top: 1px solid var(--paper3); padding-top: 10px; }
.expense-row { display: flex; justify-content: space-between; align-items: center; padding: 5px 0; font-size: 13px; }
.expense-row-name { color: var(--ink2); }
.expense-row-amt { font-weight: 600; color: var(--ink); }