.notice-page {
  --notice-bg: #f5f8fc;
  --notice-surface: #ffffff;
  --notice-soft: #eef4fb;
  --notice-line: #dce6f2;
  --notice-text: #142033;
  --notice-muted: #66758b;
  --notice-primary: #2f73e5;
  --notice-primary-soft: #e7f0ff;
  --notice-warm: #a26417;
  --notice-warm-soft: #fff4df;
  margin: 0;
  background: var(--notice-bg);
  color: var(--notice-text);
}

.notice-main {
  width: min(100% - 32px, 1120px);
  margin: 0 auto;
  padding: 84px 0 64px;
}

.notice-topbar {
  padding: 20px 22px;
  border: 1px solid var(--notice-line);
  border-radius: 22px;
  background: var(--notice-surface);
  box-shadow: 0 10px 26px rgba(38, 57, 83, 0.05);
}

.notice-title-block {
  min-width: 0;
}

.notice-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
}

.notice-title-block h1 {
  margin: 0;
  color: var(--notice-text);
  font-size: 28px;
  font-weight: 850;
  line-height: 1.15;
  letter-spacing: 0;
}

.notice-title-block p {
  margin: 8px 0 0;
  color: var(--notice-muted);
  font-size: 14px;
  line-height: 1.7;
}

.notice-count-inline {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 30px;
  padding: 0 11px;
  border-radius: 999px;
  background: var(--notice-soft);
  color: var(--notice-muted);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.notice-count-inline strong {
  color: var(--notice-text);
  font-size: 14px;
  font-weight: 850;
}

.notice-latest-card {
  margin-top: 16px;
  padding: 20px 22px;
  border: 1px solid #d8e3f3;
  border-radius: 24px;
  background: #fdfefe;
  box-shadow: 0 14px 34px rgba(38, 57, 83, 0.06);
}

.notice-latest-head,
.notice-card-head,
.notice-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.notice-latest-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--notice-primary);
  font-size: 14px;
  font-weight: 850;
}

.notice-latest-label i {
  font-size: 19px;
}

.notice-latest-card time,
.notice-author time {
  color: var(--notice-muted);
  font-size: 12px;
  font-weight: 650;
  white-space: nowrap;
}

.notice-latest-card p {
  display: -webkit-box;
  margin: 14px 0 0;
  overflow: hidden;
  color: #2f3c50;
  font-size: 15px;
  line-height: 1.8;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  word-break: break-word;
  white-space: pre-wrap;
}

.notice-feed-section {
  margin-top: 28px;
}

.notice-section-head {
  margin-bottom: 12px;
}

.notice-section-head h2 {
  margin: 0;
  color: var(--notice-text);
  font-size: 20px;
  font-weight: 850;
}

.notice-section-head p {
  margin: 5px 0 0;
  color: var(--notice-muted);
  font-size: 13px;
}

.notice-feed {
  display: grid;
  gap: 12px;
}

.notice-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 15px;
  padding: 18px;
  border: 1px solid var(--notice-line);
  border-radius: 22px;
  background: var(--notice-surface);
  box-shadow: 0 10px 28px rgba(38, 57, 83, 0.05);
  transition: border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}

.notice-card:hover {
  border-color: #c9d8ed;
  box-shadow: 0 16px 34px rgba(38, 57, 83, 0.08);
  transform: translateY(-1px);
}

.notice-card.is-latest {
  border-color: #bcd2f3;
  background: #fbfdff;
}

.notice-card-index {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 14px;
  background: var(--notice-primary-soft);
  color: var(--notice-primary);
  font-size: 13px;
  font-weight: 850;
}

.notice-card-main {
  min-width: 0;
}

.notice-author {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 10px;
}

.notice-author img {
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  border: 1px solid var(--notice-line);
  border-radius: 12px;
  object-fit: cover;
  background: var(--notice-soft);
}

.notice-author strong {
  display: block;
  overflow: hidden;
  color: var(--notice-text);
  font-size: 14px;
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.notice-latest-badge {
  flex: 0 0 auto;
  padding: 5px 10px;
  border-radius: 999px;
  background: var(--notice-warm-soft);
  color: var(--notice-warm);
  font-size: 12px;
  font-weight: 850;
}

.notice-content {
  margin: 14px 0 0;
  color: #334258;
  font-size: 15px;
  line-height: 1.85;
  word-break: break-word;
  white-space: pre-wrap;
}

.notice-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  margin-top: 14px;
  padding: 0 13px;
  border-radius: 999px;
  background: var(--notice-primary-soft);
  color: var(--notice-primary);
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
}

.notice-link:hover {
  background: var(--notice-primary);
  color: #fff;
}

.notice-link i {
  font-size: 16px;
}

.notice-empty-card {
  padding: 54px 24px;
  border: 1px dashed #cfdced;
  border-radius: 24px;
  background: var(--notice-surface);
  color: var(--notice-muted);
  text-align: center;
}

.notice-empty-card i {
  color: #94a3b8;
  font-size: 48px;
}

.notice-empty-card h3 {
  margin: 14px 0 6px;
  color: var(--notice-text);
  font-size: 18px;
}

.notice-empty-card p {
  margin: 0;
  font-size: 14px;
}

@media (max-width: 860px) {
  .notice-main {
    width: min(100% - 24px, 1120px);
    padding: 58px 0 48px;
  }

  .notice-topbar {
    padding: 18px;
  }

  .notice-title-block h1 {
    font-size: 26px;
  }

  .notice-latest-card {
    border-radius: 22px;
    padding: 18px;
  }

  .notice-card {
    gap: 12px;
    padding: 15px;
    border-radius: 20px;
  }

  .notice-card-index {
    width: 38px;
    height: 38px;
    border-radius: 13px;
  }
}

@media (max-width: 560px) {
  .notice-main {
    width: min(100% - 20px, 1120px);
  }

  .notice-title-row {
    align-items: flex-start;
    flex-direction: column;
  }

  .notice-latest-head,
  .notice-card-head {
    align-items: flex-start;
    flex-direction: column;
    gap: 10px;
  }

  .notice-card {
    grid-template-columns: 1fr;
  }

  .notice-card-index {
    width: fit-content;
    min-width: 38px;
    height: 34px;
  }
}

@media (prefers-color-scheme: dark) {
  .notice-page {
    --notice-bg: #111827;
    --notice-surface: #172033;
    --notice-soft: rgba(255, 255, 255, 0.07);
    --notice-line: rgba(205, 219, 238, 0.16);
    --notice-text: #e8eef8;
    --notice-muted: #9aa8bc;
    --notice-primary: #8db7ff;
    --notice-primary-soft: rgba(72, 126, 216, 0.18);
    --notice-warm: #ffd08a;
    --notice-warm-soft: rgba(180, 112, 23, 0.18);
  }

  .notice-topbar,
  .notice-latest-card,
  .notice-card,
  .notice-empty-card {
    box-shadow: none;
  }

  .notice-latest-card,
  .notice-card.is-latest {
    background: #172033;
  }

  .notice-latest-card p,
  .notice-content {
    color: #d5dfef;
  }
}