.app-shell { max-width: 430px; margin: 0 auto; }
    .page-sub { font-size: var(--text-callout); color: var(--color-text-secondary); }
    .header-spacer { width: 44px; height: 44px; flex-shrink: 0; }

    /* 타임라인 컨테이너 — 세로 스레드 + 점 */
    .tl-wrap { position: relative; padding-left: 28px; }
    .tl-wrap::before {
      content: ''; position: absolute;
      left: 11px; top: 6px; bottom: 6px;
      width: 2px; border-radius: 2px;
      background: rgba(44,122,252,.18);
    }

    .tl-month {
      position: relative;
      font-size: var(--text-mini); font-weight: var(--weight-bold);
      color: var(--color-text-secondary);
      letter-spacing: 0.4px;
      margin: var(--space-5) 0 var(--space-3);
      padding-left: 4px;
    }
    .tl-month::before {
      content: ''; position: absolute;
      left: -23px; top: 50%; transform: translateY(-50%);
      width: 8px; height: 8px; border-radius: 50%;
      background: var(--color-text-tertiary);
      box-shadow: 0 0 0 3px var(--brand-blue-50);
    }
    .tl-month:first-child { margin-top: 0; }

    .tl { display: flex; flex-direction: column; gap: var(--space-4); }
    /* 카드 패딩은 .card 기본값(--space-5=16px) 그대로 사용 — 덮지 않는다 */
    .tl-item { position: relative; }
    /* 카드 옆 점 — 배지 중앙선에 맞춤 */
    .tl-item::before {
      content: ''; position: absolute;
      left: -22px; top: 23px;
      width: 10px; height: 10px; border-radius: 50%;
      background: white; border: 2.5px solid var(--color-accent);
      box-shadow: 0 0 0 2.5px var(--brand-blue-50);
    }
    .tl-item.is-danger::before { border-color: var(--color-danger); }
    .tl-item.is-success::before { border-color: var(--color-success); }

    .tl-card-head {
      display: flex; align-items: center; gap: var(--space-3);
      margin-bottom: var(--space-3);
    }
    .tl-card-head .tl-date { margin-left: auto; font-size: var(--text-mini); color: var(--color-text-tertiary); font-variant-numeric: tabular-nums; }
    .tl-title { font-size: var(--text-callout); font-weight: var(--weight-bold); margin-bottom: var(--space-2); letter-spacing: -0.2px; }
    .tl-desc { font-size: var(--text-caption); color: var(--color-text-secondary); line-height: var(--leading-normal); }

    /* 진입 애니메이션 */
    .page-sub, .filter-row, .tl-month {
      animation: haru-fade-in-up var(--motion-enter) var(--easing-standard) both;
    }
    .page-sub  { animation-delay: 50ms; }
    .tl-month  { animation-delay: 150ms; }
    .tl-item {
      animation: haru-fade-in-up var(--motion-enter) var(--easing-standard) both;
    }
    .tl > .tl-item:nth-child(1) { animation-delay: 200ms; }
    .tl > .tl-item:nth-child(2) { animation-delay: 260ms; }
    .tl > .tl-item:nth-child(3) { animation-delay: 320ms; }
    .tl > .tl-item:nth-child(4) { animation-delay: 380ms; }
    .tl > .tl-item:nth-child(5) { animation-delay: 440ms; }
    .tl > .tl-item:nth-child(n+6) { animation-delay: 500ms; }
    @media (prefers-reduced-motion: reduce) {
      .page-sub, .filter-row, .tl-month, .tl-item { animation: none !important; }
    }