/* 공지사항 (announcements.html · announcement-detail.html) — 열람 전용 화면의 최소 부품. */

/* 목록 한 줄 */
.an-row {
  display: flex; align-items: center; gap: 12px;
  padding: 16px var(--s-lg);
  border-top: 1px solid var(--divider);
}
.an-row:first-child { border-top: 0; }
.an-row:hover { background: var(--surface-alt); }
.an-row-main { flex: 1; min-width: 0; }
.an-row-title {
  display: flex; align-items: center; gap: 6px;
  font-size: 16px; font-weight: 600; letter-spacing: var(--ls-lg);
}

/* 고정 표식. 색으로만 구분하지 않고 '고정'이라는 낱말을 그대로 쓴다 —
   색만으로 순서를 설명하면 색을 구분하지 못하는 사람에게는 목록이 그냥 뒤섞여 보인다. */
.an-pin {
  flex: none;
  display: inline-flex; align-items: center; height: 22px; padding: 0 8px;
  border-radius: 6px; font-size: 12px; font-weight: 700;
  background: var(--primary); color: #fff;
}

/* 상세 */
.an-detail-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
/* 🔴 줄바꿈은 여기서 살린다 — 템플릿이 th:utext로 <br>을 넣지 않아도 되는 이유다. */
.an-body {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--divider);
  font-size: 16px; line-height: 1.7;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}