@charset "utf-8";

.notice-grid {display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 140px; gap: 36px; padding: 20px;}
.grid-item {box-shadow: 0px 6px 24px 0px #0000001A; border-radius: 16px; overflow: hidden; display: flex; flex-direction: column; cursor: pointer; position: relative; transition: 0.5s;}
.grid-item:hover {transform: scale(1.1); transition: 0.3s;}
.size-1x1 {grid-column: span 1; grid-row: span 1;}
.size-1x2 {grid-column: span 1; grid-row: span 2;}
.size-3x2 {grid-column: span 3; grid-row: span 2;}
.img-area {width: 100%; aspect-ratio: 4 / 3; overflow: hidden;}
.img-area img {width: 100%; height: 100%; object-fit: cover; display: block;}
.text-area {padding: 20px; display: flex; flex-direction: column; justify-content: space-around; flex-grow: 1; background: #fff;}
.board-subject {font-size: 12px; color: #999; margin-bottom: 4px;}
.post-title {font-size: 16px; font-weight: bold; margin-bottom: 8px; overflow: hidden; text-overflow: ellipsis;}
.board-sub-box {cursor: default; display: flex; align-items: center;}
.post-time {font-size: 12px; color: #aaa;margin-bottom: 6px; margin-left: auto;}
.post-content {font-size: 13px; color: #555; line-height: 1.5em; height: 3em; overflow: hidden; text-overflow: ellipsis;}
.link-area {position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 10;}

.text-area.notice {
  background: linear-gradient(90deg, #fff1f1, #f1fff1, #f1f1ff);
  background-size: 600% 600%;
  animation: gradientShift 9s ease infinite;
}

@keyframes gradientShift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}



@media (max-width: 900px) {
  .notice-grid {display: flex;flex-direction: column; align-items: center; gap: 24px; padding: 10px;}
  .grid-item { width: 95%; height: auto;}
  .img-area {width: 100%; height: auto; aspect-ratio: unset;}
  .img-area img {width: 100%; height: auto; object-fit: contain;}
  .text-area {padding: 16px;}
}