/* five-column course board */
* {
  box-sizing: border-box;
}

html {
  min-width: 1180px;
  background: #fff;
}

body {
  margin: 0;
  color: #111;
  font-family: "Times New Roman", Times, serif;
  font-size: 16px;
  line-height: 1.3;
}

.course-board {
  display: grid;
  min-height: 100vh;
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.course-column {
  min-width: 0;
  padding: 1.25rem 1.15rem 3rem;
  border-left: 1px solid #111;
}

.course-column:first-child {
  border-left: 0;
}

h1 {
  margin: 0 0 1rem;
  font-size: 1.45rem;
  line-height: 1;
}

.course-note {
  margin: -0.7rem 0 1rem;
  color: #555;
  font-size: 0.85rem;
}

.deadline-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.deadline {
  padding: 0.55rem 0 0.6rem;
  border-top: 1px solid #bbb;
}

.deadline:first-child {
  border-top-color: #111;
}

.deadline label {
  display: grid;
  grid-template-columns: 0.9rem minmax(0, 1fr);
  gap: 0.4rem;
  cursor: pointer;
}

.deadline input {
  width: 0.78rem;
  height: 0.78rem;
  margin: 0.2rem 0 0;
  accent-color: #111;
}

.deadline time {
  display: block;
  margin: 0.12rem 0 0 1.3rem;
  color: #555;
  font-size: 0.82rem;
  line-height: 1.25;
}

.deadline:has(input:checked) span,
.deadline:has(input:checked) time {
  color: #888;
  text-decoration: line-through;
}

@media (max-width: 1180px) {
  body {
    overflow-x: auto;
  }
}