/* 通知頁（js/notices.js）。class 用 nt- 開頭。顏色、字體、元件都用 design-system 的 token 與 class。 */

.nt-scroll > * { flex: none; }
.nt-scroll .dsh-btn { text-decoration: none; box-sizing: border-box; }

.nt-section { display: flex; flex-direction: column; gap: var(--space-3); }
.nt-section .tp-p { margin: 0; }
.nt-h { margin: 0; font-size: 18px; line-height: 26px; }
.nt-h small { margin-left: var(--space-2); font-family: var(--font-sans); font-size: 13px; font-weight: 700; color: var(--text-muted); }

.nt-avatar {
  flex: none; width: 48px; height: 48px; border-radius: 50%; overflow: hidden; box-sizing: border-box;
  display: flex; align-items: center; justify-content: center;
  background: var(--gold-200); border: var(--stroke-ui) solid var(--outline);
}
.nt-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.nt-avatar--tree { background: var(--green-50); }
.nt-avatar--tree img { width: 32px; height: 32px; object-fit: contain; }

/* 公示卡：沿用異動公告卡（dsh-official），頭部加神獸頭像與倒數 */
.nt-card__head { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4) 0; }
.nt-card__who { flex: 1; min-width: 0; }
.nt-card__name {
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); margin: 0;
  font-family: var(--font-display); font-weight: 900; font-size: 22px; line-height: 30px;
}
.nt-pin {
  display: inline-flex; padding: 1px var(--space-2); background: var(--honor); color: var(--text);
  border: var(--stroke-fine) solid var(--outline); border-radius: var(--radius-sm);
  font-family: var(--font-sans); font-size: 12px; line-height: 18px; font-weight: 900; letter-spacing: 0;
}
.nt-card__meta { margin: 0; font-size: 13px; line-height: 20px; color: var(--text-muted); overflow-wrap: anywhere; }
.nt-card__days {
  flex: none; text-align: center; font-family: var(--font-display); font-weight: 900; font-size: 28px; line-height: 32px;
  color: var(--state-notice-text); font-variant-numeric: tabular-nums;
}
.nt-card__days small { display: block; font-family: var(--font-sans); font-size: 12px; line-height: 16px; font-weight: 700; color: var(--text-muted); }
.nt-card__what { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); margin: var(--space-3) var(--space-4) 0; font-size: 16px; line-height: 24px; }
.nt-card__what .dsh-tag { flex: none; }
.nt-card__foot { flex-direction: column; align-items: stretch; }

/* 樹下活動：沿用通知卡（dsh-notif） */
.nt-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--space-2); }
.nt-list .dsh-notif { grid-template-columns: 48px minmax(0, 1fr) auto; align-items: center; }

/* ── 電腦版：公示卡兩欄並排 ── */
@media (min-width: 1024px) and (hover: hover) and (pointer: fine) {
  .tree-page[data-page="notices"] { --page-max: var(--content-max); }
  .nt-scroll { gap: var(--space-6); }
  .nt-h { font-size: 24px; line-height: 32px; }
  .nt-h small { font-size: 14px; }
  .nt-card__foot { flex-direction: row; }
  .nt-card__foot .dsh-btn { flex: 1; }
  .nt-list .dsh-notif:hover { background: var(--surface-sunken); }
}