/* 이도랑 블로그(blog.html 목록 · blog-*.html 글) — tools/make_blog.py 가 만든 화면 전용.
 * 틀은 안내 글(main.doc, common.css 17절)과 같고, 여기에는 글 본문·그림·목록 행만 더한다. 색은 common.css 변수만 쓴다. */

/* 글 본문 */
main.post h1 { text-wrap: balance; word-break: keep-all; }
.post-body { margin-top: 32px; }
.post-body h2 {
  font-family: var(--font-display); font-size: 23px; line-height: 1.4;
  margin: 40px 0 12px; padding-top: 24px; border-top: 1px solid var(--ink-rule);
}
.post-body h3 { margin: 24px 0 8px; font-size: 19px; }
.post-body p, .post-body li { font-size: 17px; word-break: keep-all; }
.post-body strong { font-weight: 700; }
.post-body a { color: var(--text); text-underline-offset: 3px; }
.post-figure { margin: 24px 0 28px; }
.post-figure img { display: block; width: 100%; height: auto; border: 1px solid var(--line); background: var(--surface); }
.post-figure figcaption { margin-top: 8px; font-size: 15px; line-height: 1.6; color: var(--muted); word-break: keep-all; }
.post-note {
  margin: 16px 0; padding: 12px 16px; border-left: 3px solid var(--seal);
  background: var(--surface); color: var(--text);
}
main.post .cta { margin-top: 40px; }

/* 목록: 날짜 | 제목·요약 | → */
.blog-index { display: flex; flex-direction: column; margin-top: 8px; }   /* 위 선은 .page-title 아래 선 하나만 */
.post-row {
  display: grid; grid-template-columns: 112px minmax(0, 1fr) 24px; gap: 0 16px; align-items: start;
  padding: 18px 0; border-bottom: 1px solid var(--line); color: var(--text); text-decoration: none;
}
.post-row:hover { background: var(--row-hover, var(--surface-2)); }
.post-row:focus-visible { outline: 2px solid var(--text); outline-offset: -2px; }
.post-row .date { font-size: 14px; color: var(--muted); padding-top: 4px; font-variant-numeric: tabular-nums; }
.post-row .text { display: flex; flex-direction: column; gap: 6px; }
.post-row strong { font-family: var(--font-display); font-size: 20px; line-height: 1.4; word-break: keep-all; }
.post-row .desc { font-size: 16px; line-height: 1.6; color: var(--muted); word-break: keep-all; }
.post-row .go { font-size: 18px; text-align: right; padding-top: 2px; }
.blog-feed-link { margin-top: 24px; font-size: 15px; }
.blog-feed-link a { color: var(--muted); }

@media (max-width: 599px) {
  .post-body h2 { font-size: 21px; }
  .post-row { grid-template-columns: minmax(0, 1fr) 20px; }
  .post-row .date { grid-column: 1 / -1; padding: 0 0 4px; }
  .post-row strong { font-size: 18px; }
}