/* 시작 화면 최근 파일 — Photoshop 시작 화면의 Recents 와 같은 자리·같은 짜임
   (docs/adobe-help/md/home-screen-overview.md). 큰 타일로 깔고 이름과 언제인지를 붙인다. */
.start-recent { margin-top: 28px; width: 100%; max-width: 660px; }
.start-recent[hidden] { display: none; }
.start-recent-head {
  margin: 0 0 10px; font-size: 13px; color: var(--text-dim); text-align: left;
}
/* 최근 타일 간격 = 타일 폭의 약 1/8 (Photoshop 시작 화면 실측 2026-09-12 —
   adobe-help ws-home-screen-tabs.png: 타일 256px·간격 32px, 책 41쪽 그림 1.2: 타일 155px·간격 21px).
   전에는 12px(1/12)라 포토샵보다 촘촘했다. 우리 타일 ~156px 기준 20px. */
.start-recent-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 20px;
}
.recent-tile {
  display: flex; flex-direction: column; gap: 4px; padding: 0;
  background: none; border: none; cursor: pointer; text-align: left; color: var(--text);
}
.recent-tile img, .recent-noimg {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block;
  border-radius: 6px; border: 1px solid var(--line); background: var(--panel2);
}
.recent-tile:hover img, .recent-tile:hover .recent-noimg { border-color: var(--accent, #3d84ff); }
.recent-name {
  font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.recent-when { font-size: 11px; color: var(--text-dim); }