/* 공지 화면 — 밝은 화면과 어두운 화면 양쪽에서 글자가 읽히도록 토큰만 씁니다.
   색을 직접 박으면 어두운 화면에서 검정 위 검정이 되는 일이 다시 생깁니다
   (2026-07-27 에 그 문제로 101곳을 고쳤습니다).
   대비 기준 본문 4.5:1 https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html */

.notice-page {
  max-width: 780px;
  margin: 0 auto;
  padding: 24px 16px 64px;
}

.notice-lead {
  color: var(--nv-text-2);
  margin: 4px 0 20px;
  font-size: 0.95rem;
  line-height: 1.6;
}

/* 묶음 고르기 */
.notice-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 20px;
}

.notice-chip {
  padding: 7px 14px;
  border: 1px solid var(--nv-line);
  border-radius: 999px;
  background: var(--nv-bg-1);
  color: var(--nv-text-1);
  font: inherit;
  font-size: 0.875rem;
  cursor: pointer;
}

.notice-chip:hover { border-color: var(--nv-primary); }

.notice-chip.is-on {
  background: var(--nv-primary);
  color: var(--nv-on-primary);
  border-color: var(--nv-primary);
}

/* 목록 */
.notice-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.notice-item {
  border: 1px solid var(--nv-line);
  border-radius: 12px;
  background: var(--nv-card-bg);
  padding: 16px 18px;
}

.notice-item.is-pinned { border-color: var(--nv-primary); }

.notice-item__meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}

.notice-item__date {
  color: var(--nv-text-2);
  font-size: 0.8rem;
}

.notice-item__title {
  margin: 0 0 6px;
  font-size: 1.05rem;
  line-height: 1.45;
  color: var(--nv-text-1);
}

.notice-item__summary {
  margin: 0;
  color: var(--nv-text-2);
  font-size: 0.92rem;
  line-height: 1.6;
}

.notice-item__span {
  margin-top: 8px;
  font-size: 0.82rem;
  color: var(--nv-text-2);
}

/* 묶음 표시 — 칠은 원색을 쓰고 글자는 흰색으로 대비를 확보합니다 */
.notice-kind {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  color: #fff;
  background: var(--nv-primary-dim);
}

.notice-kind.is-feature { background: #1d4ed8; }
.notice-kind.is-improve { background: #2E7D32; }
.notice-kind.is-fix { background: #8A6D00; }
.notice-kind.is-maint { background: #C62828; }

.notice-pin {
  font-size: 0.72rem;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--nv-primary);
  color: var(--nv-text-1);
}

@media (max-width: 520px) {
  .notice-page { padding: 16px 12px 48px; }
  .notice-item { padding: 14px; }
}