/* =============================================================================
   news.css — 공지사항 목록·상세 공용 스타일
   역할: 목록 행(.news-board)과 상세(.post-view) 레이아웃.
   의존: tokens/base/components 이후 로드. 페이지네이션은 components.css 공용.
   주의: 목록 행 마크업은 news.js, 상세 마크업은 news-view.js와 짝.
   ========================================================================== */

/* ===== 목록 ===== */
.news-board { border-top: 2px solid var(--ink); } /* 게시판 상단 강조선 — 인쇄물 표 감성 */
.news-item {
  display: grid;
  grid-template-columns: auto 88px 1fr auto;
  gap: var(--sp-3);
  align-items: center;
  min-height: 64px; /* 8px 그리드 + 터치 영역 여유 */
  padding-block: var(--sp-1);
  border-bottom: 1px solid var(--line);
}
.news-item .no {
  font-family: var(--font-serif);
  color: var(--ink-soft);
  font-size: var(--fs-1);
  min-width: 40px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.news-item h3 { font-family: var(--font-sans); font-weight: 600; font-size: var(--fs-2); }
.news-item:hover h3 { color: var(--wine); }
.news-item time { color: var(--ink-soft); font-size: var(--fs-1); }

/* ===== 상세 ===== */
.post-view { max-width: 800px; margin-inline: auto; }
.post-view .post-head { border-bottom: 2px solid var(--ink); padding-bottom: var(--sp-3); margin-bottom: var(--sp-5); }
.post-view .post-head .badge { margin-bottom: var(--sp-2); }
.post-view h2 { font-size: var(--fs-5); margin-bottom: var(--sp-2); }
.post-view .post-meta { display: flex; gap: var(--sp-3); color: var(--ink-soft); font-size: var(--fs-1); }
.post-view .post-body { font-size: var(--fs-2); line-height: var(--lh-body); }
.post-view .post-thumbnail { margin-bottom: var(--sp-5); }
.post-view .post-images { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); margin-top: var(--sp-5); }
.post-view .post-images .img-frame { aspect-ratio: 4 / 3; cursor: zoom-in; }

@media (max-width: 768px) {
  .news-item { grid-template-columns: 88px 1fr auto; }
  .news-item .no { display: none; } /* 좁은 화면에서 번호는 정보가 아니다 */
  .post-view .post-images { grid-template-columns: 1fr; }
}