/* 목록·연대기·소개·개인정보처리방침 공용. 색·간격은 base.css 변수만 쓴다. */
.hero { padding: var(--space-4) 0 var(--space-5); }
.hero-title { font-size: 2rem; margin-bottom: var(--space-2); }
.hero-sub { margin-bottom: var(--space-4); }

.tag-bar { margin-bottom: var(--space-4); color: var(--muted); }
.tag-bar strong { color: var(--ink); }

.post-list { display: block; }
.post-card { position: relative; padding: var(--space-5) 0; border-bottom: 1px solid var(--line); }
.post-card:first-child { border-top: 1px solid var(--line); }
.card-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-2); color: var(--muted); font-size: 0.875rem; line-height: 1.6; margin-bottom: var(--space-1); }
.card-meta a { position: relative; z-index: 1; color: var(--muted); }
.card-title { font-size: 1.25rem; line-height: 1.5; margin: 0 0 var(--space-2); }
.card-title a { color: var(--ink); text-decoration: none; }
.card-title a:hover { text-decoration: underline; text-decoration-color: var(--orange); text-decoration-thickness: 2px; text-underline-offset: 4px; }
/* 카드 전체를 제목 링크의 눌림 영역으로 넓힌다. 닉네임·태그 링크는 위에 따로 얹는다. */
.card-title a::after { content: ""; position: absolute; inset: 0; }
.card-excerpt { color: var(--ink); font-size: 0.9375rem; line-height: 1.7; margin-bottom: var(--space-3); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.post-card .tags { position: relative; z-index: 1; margin-bottom: var(--space-2); }
.card-foot { display: flex; justify-content: flex-end; color: var(--muted); font-size: 0.875rem; line-height: 1.6; }

.more-wrap { text-align: center; margin: var(--space-5) 0 0; }
.empty { padding: var(--space-6) 0; text-align: center; }
.empty p { margin-bottom: var(--space-4); }

/* 연대기 */
.author-head { margin-bottom: var(--space-5); }
.author-head h1 { margin-bottom: var(--space-1); }
.mine-note { margin-bottom: var(--space-4); padding: var(--space-3) var(--space-4); border-left: 3px solid var(--orange); background: var(--surface); font-size: 0.9375rem; line-height: 1.6; }
.timeline { list-style: none; margin: 0; padding: 0 0 0 var(--space-5); border-left: 2px solid var(--line); }
.timeline li + li { margin-top: 0; }
.timeline-year { position: relative; margin: var(--space-5) 0 var(--space-3); font-weight: 700; font-size: 1.125rem; line-height: 1.4; }
.timeline-year:first-child { margin-top: 0; }
.timeline-item { position: relative; padding-bottom: var(--space-5); }
.timeline-item::before { content: ""; position: absolute; left: calc(-1 * var(--space-5) - 7px); top: 0.6em; width: 12px; height: 12px; border-radius: var(--radius-pill); background: var(--cream); border: 2px solid var(--orange); }
.timeline-date { color: var(--muted); font-size: 0.875rem; line-height: 1.6; }
.timeline-title { font-size: 1.0625rem; font-weight: 700; line-height: 1.5; margin: 0 0 var(--space-1); display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-2); }
.timeline-excerpt { margin: 0; color: var(--muted); font-size: 0.9375rem; line-height: 1.6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* 소개·방침 */
.about-mark { display: block; width: 96px; height: 96px; margin-bottom: var(--space-4); }
.about h2 { margin-top: var(--space-5); }
.about-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-6); }
.doc h2 { font-size: 1.15rem; margin-top: var(--space-5); }
.doc-toc { margin: var(--space-4) 0; padding: var(--space-3) var(--space-4); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-m); font-size: 0.9375rem; line-height: 1.7; }
.doc-toc ol { margin: 0; padding-left: 1.6em; }
.doc-toc li + li { margin-top: 0; }
.doc h2 { scroll-margin-top: var(--space-4); }