/* ysun-blog — 블로그 전용 스타일
   공통 토큰/컴포넌트는 design-system.css 에 있습니다. 여기에는 이 사이트에만
   필요한 소소한 조정만 둡니다. */

/* ---------------------------------------------------------------------------
   글 목차 (index.html)
   js/main.js 가 assets/posts.js 를 읽어 아래 구조를 렌더링합니다.
     · 평면 목록:  ul.toc > li.toc-item > a.toc-link
     · 월별 그룹:  section.toc-group > h2.toc-month + ul.toc
   --------------------------------------------------------------------------- */
.post-index { padding-block: var(--space-6); }
.post-index__empty { color: var(--color-muted); }

.toc { list-style: none; padding: 0; margin: 0; }

/* 월별 그룹 헤더 */
.toc-group + .toc-group { margin-top: var(--space-6); }
.toc-month {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-muted);
  letter-spacing: 0.02em;
  padding-bottom: var(--space-2);
  margin-bottom: var(--space-1);
  border-bottom: 1px solid var(--color-border);
}

/* 한 줄 = 날짜 + 제목 (+ 종류 배지, 외부 링크 표시) */
.toc-item + .toc-item { border-top: 1px solid var(--color-border); }
.toc-link {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  padding-block: var(--space-3);
  color: inherit;
}
.toc-link:hover { text-decoration: none; }
.toc-link:hover .toc-title { color: var(--color-link); }

.toc-date {
  flex: none;
  min-width: 5.75rem;                /* 평면 목록: "2026.07.08" 정렬 폭 */
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--color-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.toc-date--day {                     /* 월별 그룹: 일자만 (월은 헤더가 나타냄) */
  min-width: 2.75rem;
  text-align: right;
}

.toc-title {
  flex: 1 1 auto;
  min-width: 0;
  font-size: var(--text-base);
}

.toc-kind {
  flex: none;
  align-self: center;
  font-size: var(--text-xs);
  color: var(--color-muted);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  padding: 0.05rem var(--space-2);
  white-space: nowrap;
}
.toc-kind--link { color: var(--color-accent); border-color: var(--color-accent-soft); }

.toc-ext { flex: none; color: var(--color-muted); font-size: var(--text-sm); }

/* 좁은 화면: 날짜 폭을 줄여 제목에 자리를 더 줍니다 */
@media (max-width: 30rem) {
  .toc-date { min-width: 5rem; font-size: var(--text-xs); }
}

/* ---------------------------------------------------------------------------
   본문 사진 (photo 템플릿)
   --------------------------------------------------------------------------- */
.prose figure { margin-top: var(--space-5); }
.prose figure img { border-radius: var(--radius); }
.prose figcaption {
  font-size: var(--text-sm);
  color: var(--color-muted);
  margin-top: var(--space-2);
  text-align: center;
}