.noticeboard-section {
  background: #fbf8f4;
  border-top: 1px solid #efe4dc;
  border-bottom: 1px solid #efe4dc;
}

.noticeboard-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 32px;
  padding-bottom: 25px;
  border-bottom: 2px solid var(--wine);
}

.noticeboard-heading h2 { font-size: clamp(30px, 3vw, 42px); }
.noticeboard-intro { margin: 16px 0 0; color: #62555d; font-size: 14px; line-height: 1.8; }
.noticeboard-tag {
  flex: 0 0 auto;
  margin-top: 11px;
  padding: 8px 12px;
  border: 1px solid #d7b8a8;
  color: var(--wine);
  background: #fff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .06em;
}

.noticeboard-state {
  margin: 0;
  padding: 26px 28px;
  border-left: 3px solid var(--orange);
  background: #fff;
  color: #5d5058;
  font-size: 14px;
  line-height: 1.7;
}
.noticeboard-state.is-count { padding: 0 0 14px; border: 0; background: none; color: var(--wine); font-size: 12px; font-weight: 800; }
.noticeboard-state.is-error { border-left-color: var(--wine); }

.noticeboard-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.noticeboard-card { min-width: 0; border: 1px solid #e5d8d6; background: #fff; }
.noticeboard-preview {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  overflow: hidden;
  border: 0;
  background: #f1e8e1;
  text-align: left;
}
.noticeboard-preview img { display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: contain; }
.noticeboard-zoom {
  position: absolute;
  right: 0;
  bottom: 0;
  padding: 10px 13px;
  background: var(--wine);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
}
.noticeboard-preview:hover .noticeboard-zoom,
.noticeboard-preview:focus-visible .noticeboard-zoom { background: var(--orange-deep); }
.noticeboard-preview:focus-visible,
.noticeboard-link:focus-visible,
.poster-dialog button:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; }
.noticeboard-card-info { padding: 20px 19px 22px; overflow-wrap: anywhere; }
.noticeboard-card-title { margin: 0 0 12px; color: var(--wine); font-size: 19px; font-weight: 800; line-height: 1.45; }
.noticeboard-description { margin: 0 0 15px; color: #4b4247; font-size: 13px; line-height: 1.75; }
.noticeboard-organizer,
.noticeboard-meta { margin: 6px 0; color: #746970; font-size: 12px; line-height: 1.6; }
.noticeboard-link {
  display: inline-block;
  margin-top: 17px;
  padding-bottom: 5px;
  border-bottom: 2px solid var(--orange);
  color: var(--wine);
  font-size: 12px;
  font-weight: 800;
}
.noticeboard-link:hover { color: var(--orange-deep); }

.poster-dialog {
  width: min(92vw, 820px);
  max-height: 92dvh;
  padding: 0 0 18px;
  border: 0;
  background: #fff;
  color: var(--ink);
  box-shadow: 0 25px 90px rgba(24, 8, 16, .35);
}
.poster-dialog::backdrop { background: rgba(35, 13, 28, .82); }
.poster-dialog-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  padding: 14px 19px;
  border-bottom: 2px solid var(--orange);
  color: var(--wine);
}
.poster-dialog-heading strong { font-size: 16px; line-height: 1.5; overflow-wrap: anywhere; }
.poster-dialog-heading button { flex: 0 0 auto; padding: 7px 10px; border: 1px solid #d9cbd0; background: #fff; color: var(--wine); font-size: 12px; font-weight: 800; }
.poster-dialog img { width: auto; max-width: calc(100% - 32px); max-height: calc(92dvh - 130px); margin: 15px auto 0; object-fit: contain; }
.poster-dialog p { margin: 12px 19px 0; color: #63575e; font-size: 12px; line-height: 1.5; }
.poster-dialog p:empty { display: none; }

@media (max-width: 760px) {
  .noticeboard-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
}
@media (max-width: 560px) {
  .noticeboard-heading { display: block; margin-bottom: 25px; padding-bottom: 20px; }
  .noticeboard-tag { display: inline-block; margin-top: 17px; }
  .noticeboard-grid { grid-template-columns: 1fr; }
  .noticeboard-state { padding: 22px 19px; }
  .noticeboard-card-info { padding: 18px; }
  .poster-dialog { width: min(94vw, 820px); }
  .poster-dialog-heading { padding: 11px 13px; }
}