/* === Notices (Public) ===
   SSOT:
   - /assets/img/notices.json
   - /assets/img/{file}
   Policy:
   - show only when JS sets display:grid
   - always 1 image per row (no 2-column)
   - prevent layout crush (max-height + object-fit)
   - add divider line under notices when not empty
*/

.notice-area{
  display: none;                 /* default hidden; JS sets display:grid when active */
  width: 100%;
  margin: 0 0 14px;
  gap: 12px;
  grid-template-columns: 1fr;    /* ALWAYS 1 per row */
  align-items: start;
}

/* When JS shows it as grid, keep it visible */
.notice-area[style*="display:grid"],
.notice-area[style*="display: grid"]{
  display: grid;
}

.notice-img{
  display: block;
  width: 100%;
  border-radius: 12px;
  overflow: hidden;
  background: rgba(255,255,255,.04);
}

.notice-img img{
  display: block;
  width: 100%;
  height: auto;                 /* keep aspect ratio */
  max-height: 260px;            /* prevents the card from being crushed */
  object-fit: cover;            /* crop instead of stretching */
}

/* Divider under notices (only when there is content) */
.notice-area:not(:empty)::after{
  content: "";
  display: block;
  height: 1px;
  background: rgba(255,255,255,.10);
  margin-top: 14px;
}