/* notices.css — 공지 목록 카드. 고정 공지는 액센트로 도드라지게. base.css 뒤 로드, 토큰만. */
.notice-list { max-width: 760px; }
.notice-item { display: flex; gap: 16px; justify-content: space-between; align-items: flex-start;
  padding: 18px 22px; margin-bottom: 12px; border: 1px solid var(--border); border-radius: 14px;
  background: var(--surface); text-decoration: none;
  transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease; }
.notice-item:hover { border-color: var(--accent); box-shadow: 0 8px 24px var(--accent-soft); }
/* 고정 공지 — 액센트 좌측 바 + 소프트 틴트로 '중요 소식'임을 한눈에. */
.notice-item.pinned { border-left: 3px solid var(--accent); background: var(--accent-soft); }
.notice-item-main { min-width: 0; }
.notice-item-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.notice-pin { display: inline-flex; align-items: center; color: var(--accent); flex: 0 0 auto; }
.notice-pin svg { width: 15px; height: 15px; }
/* line-clamp(줄바꿈 허용) — nowrap 은 제목 intrinsic width 로 레이아웃 뷰포트를 부풀려 모바일
   가로 오버플로를 유발한다. 1줄 clamp 로 외관은 유지하되 intrinsic width 를 단어 기준으로 축소. */
.notice-item-title { font-size: 17px; font-weight: 700; color: var(--text); letter-spacing: -.01em;
  min-width: 0; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 1;
  -webkit-box-orient: vertical; word-break: break-word; }
.notice-item .notice-excerpt { color: var(--muted); font-size: 14px; line-height: 1.55; margin: 0;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.notice-item-side { display: flex; align-items: center; gap: 10px; flex: 0 0 auto;
  color: var(--muted); font-size: 13px; white-space: nowrap; }
.notice-item-arrow { color: var(--muted); flex: 0 0 auto;
  transition: transform .15s ease, color .15s ease; }
.notice-item:hover .notice-item-arrow { color: var(--accent); transform: translateX(2px); }
@media (max-width: 640px) {
  .notice-item { flex-direction: column; gap: 8px; }
  .notice-item-side { order: -1; }
}