.public-notices-shell {
  min-height: 360px;
}

.notice-state {
  padding: 70px 20px;
  color: var(--muted);
  text-align: center;
}

.notice-board {
  overflow: hidden;
  border-top: 2px solid var(--navy);
  border-bottom: 1px solid #dfe5eb;
  background: #fff;
}

.notice-board-head,
.notice-board-row {
  display: grid;
  grid-template-columns: 90px minmax(0, 1fr) 130px;
  align-items: center;
}

.notice-board-head {
  min-height: 54px;
  color: #536980;
  border-bottom: 1px solid #dfe5eb;
  background: #f6f8fa;
  font-size: 12px;
  font-weight: 800;
  text-align: center;
}

.notice-board-row {
  min-height: 68px;
  border-bottom: 1px solid #edf0f3;
  transition: background 0.18s ease;
}

.notice-board-row:last-child {
  border-bottom: 0;
}

.notice-board-row:hover {
  background: #fbfcfe;
}

.notice-number,
.notice-date {
  color: #78899a;
  font-size: 12px;
  text-align: center;
}

.notice-title {
  overflow: hidden;
  padding: 0 18px;
  color: var(--ink);
  font-size: 15px;
  font-weight: 750;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.notice-detail {
  overflow: hidden;
  border-top: 2px solid var(--navy);
  border-bottom: 1px solid #dfe5eb;
  background: #fff;
}

.notice-detail-head {
  padding: 32px 38px 28px;
  border-bottom: 1px solid #e4e9ee;
}

.notice-detail-head span {
  color: var(--pink);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.14em;
}

.notice-detail-head h2 {
  margin: 10px 0 12px;
  color: var(--navy);
  font-size: clamp(24px, 4vw, 34px);
  letter-spacing: -0.04em;
}

.notice-detail-head time {
  color: var(--muted);
  font-size: 12px;
}

.notice-detail-content {
  min-height: 260px;
  padding: 42px 38px 60px;
  color: #31465e;
  line-height: 1.85;
}

.notice-detail-content img {
  max-width: 100% !important;
  height: auto !important;
}

.notice-detail-content a {
  color: #285f9c;
  text-decoration: underline;
}

.notice-list-link {
  display: inline-block;
  margin-top: 24px;
  padding: 13px 24px;
  border-radius: 999px;
  color: #fff;
  background: var(--navy);
  font-size: 13px;
  font-weight: 800;
}

@media (max-width: 720px) {
  .notice-board-head {
    display: none;
  }

  .notice-board-row {
    grid-template-columns: 48px minmax(0, 1fr);
    min-height: 70px;
  }

  .notice-title {
    padding: 0 8px;
    font-size: 14px;
  }

  .notice-date {
    display: none;
  }

  .notice-detail-head,
  .notice-detail-content {
    padding-right: 20px;
    padding-left: 20px;
  }
}