/* 시작 화면 최근 파일 — 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);
}
/* 타일 = 정사각 회색 상자 안에 그림을 자르지 않고 통째로 앉힌다 (Photoshop 시작 화면 실측 2026-09-23 —
   책 41쪽 그림 1.2: 상자 272×272·안쪽 여백 13 (약 5%), photoshopessentials all-recent-files: 상자 152×157).
   전에는 4:3 으로 잘라 채워서 세로 사진의 머리·발이 잘렸다. */
.recent-tile img, .recent-noimg {
  width: 100%; aspect-ratio: 1 / 1; object-fit: contain; display: block; box-sizing: border-box;
  padding: 5%; 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); }
/* 상자와 이름 사이 = 타일 폭의 약 14% (책 41쪽: 상자 272·이름까지 39, photoshopessentials: 152·21).
   전에는 4px(약 3%)라 이름이 그림에 붙어 보였다. 우리 타일 ~150px 기준 4 + 17 = 21px. */
.recent-name {
  margin-top: 17px;
  font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.recent-when { font-size: 11px; color: var(--text-dim); }