/* Container */
.container{
  width:760px;
}

/* Header */
.board-header{
  text-align:center;
  margin-bottom:10px;
}
.board-header h1{
  margin:0;
  font-size:34px;
  color:var(--accent);
}

/* Board card */
.board{
  background:var(--card-bg);
  border-radius:12px;
  padding:18px;
  border: 3px solid rgba(31,111,139,0.08);
  box-shadow: 0 10px 30px rgba(16,24,40,0.06);
}
.board-inner{}

/* Title with decorative line */
.board-title{
  margin:0 0 14px 0;
  text-align:center;
  font-size:18px;
  color:var(--accent-2);
  padding:8px 12px;
  border:2px dashed rgba(224,123,0,0.12);
  border-radius:8px;
}

/* Notice area */
.notice-wrap{
  --duration: var(--duration);
  height: 180px;            /* visible area - adjust as needed */
  overflow: hidden;
  position: relative;
  border-radius:10px;
  border: 1px solid rgba(15,34,64,0.06);
  background: linear-gradient(180deg, rgba(255,255,255,0.9), rgba(250,250,250,0.95));
  padding:8px;
}

/* Each track (original + clone) */
.notice-track{
  display: flex;
  flex-direction: column;
  gap:8px;
  /* animate the entire track (two tracks appended -> seamless) */
  animation: scroll var(--duration) linear infinite;
}

/* Pause when wrapper has paused class (touch) or on hover */
.notice-wrap.paused .notice-track,
.notice-wrap:hover .notice-track{
  animation-play-state: paused;
}

/* Individual notice item */
.notice{
  background: rgba(255,255,255,0.6);
  padding:10px 12px;
  border-radius:8px;
  font-size:15px;
  line-height:1.35;
  border-left: 4px solid var(--accent-2);
  box-shadow: 0 6px 14px rgba(10,20,40,0.03);
}

/* small footer */
.board-foot{
  margin-top:10px;
  text-align:center;
  color:#556;
}

/* Keyframes: move from 0 -> -50% because we have duplicated content (two tracks) */
@keyframes scroll {
  0% { transform: translateY(0); }
  100% { transform: translateY(-50%); }
}

/* Responsive */
@media (max-width:800px){
  .container{ width:92%; }
  .notice-wrap{ height:140px; }
  .board-header h1{ font-size:28px; }
}