/* ==========================================================================
   timeline — 연표. 연도 머리 + 세로 선 + 카드 (지도와 같은 밝은 종이 톤)
   ========================================================================== */

.view--timeline.view { max-width: 760px; }

.tl-search { position: relative; display: block; max-width: 420px; margin-bottom: 28px; }
.tl-search .icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--faint); }
.tl-search__input { padding-left: 40px; background: var(--surface); border-color: var(--border); }

.tl-year + .tl-year { margin-top: 36px; }
.tl-year__h {
  position: sticky; top: 0; z-index: 2;
  display: flex; align-items: baseline; gap: 10px;
  padding: calc(env(safe-area-inset-top) + 10px) 0 12px;
  background: var(--paper);
}
.tl-year__num { font-size: 30px; font-weight: 400; line-height: 1; letter-spacing: -0.01em; }
.tl-year__count { font-size: 13px; font-weight: 500; color: var(--muted); }

/* 세로 선과 점 */
.tl-list { position: relative; display: grid; gap: 10px; padding-left: 26px; }
.tl-list::before {
  content: ""; position: absolute; left: 6px; top: 8px; bottom: 8px;
  width: 1px; background: var(--border);
}
.tl-item { position: relative; }
.tl-item::before {
  content: ""; position: absolute; left: -24px; top: 50%;
  width: 9px; height: 9px; margin-top: -4.5px; border-radius: 50%;
  background: var(--accent); box-shadow: 0 0 0 4px var(--paper);
}
.tl-item.is-planned::before { background: var(--paper); box-shadow: inset 0 0 0 1.5px var(--accent), 0 0 0 4px var(--paper); }

.tl-card {
  width: 100%;
  display: grid; grid-template-columns: 64px 1fr auto; align-items: center; gap: 14px;
  padding: 10px 14px 10px 10px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-card);
  text-align: left;
  transition: background-color 160ms var(--ease-out), border-color 160ms;
}
.tl-card:hover { background: var(--raised); border-color: var(--control); }
.tl-card__thumb { width: 64px; height: 64px; border-radius: var(--r-control); overflow: hidden; background: var(--raised); }
.tl-card__img { width: 100%; height: 100%; object-fit: cover; }
.tl-card__thumb .glyph { width: 64px !important; height: 64px !important; border-radius: 0; }
.tl-card__text { display: grid; gap: 2px; min-width: 0; }
.tl-card__name { font-size: 16px; font-weight: 600; line-height: 1.35; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tl-card__parent { margin-left: 6px; font-size: 13px; font-weight: 400; color: var(--muted); }
.tl-card__date { font-size: 15px; color: var(--ink); }
.tl-card__meta { font-size: 13px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* 날짜 없는 '가고 싶어요' */
.tl-wish__title { font-size: 18px; font-weight: 600; }
.tl-wish__list { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; }
.tl-wish__item {
  width: 100%; display: flex; align-items: center; gap: 12px; padding: 8px 12px 8px 8px;
  background: var(--surface); border: 1px dashed var(--control); border-radius: var(--r-card); text-align: left;
}
.tl-wish__item:hover { background: var(--raised); }
.tl-wish__item .tl-card__name { font-size: 15px; }