/* ============================================================
   달력.
   두 모드를 나란히 두는 것이 이 화면의 목적이다.
   보통 달력은 마감 하루만, Backcast 는 착수일과 관문까지 퍼진다.
   ============================================================ */

.cal-bar {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-top: var(--sp-3);
}

.cal-bar__ym {
  flex-grow: 1;
  text-align: center;
  font-size: var(--fs-lg);
  font-weight: 700;
}

.mode-switch {
  display: flex;
  gap: 2px;
  margin-top: var(--sp-3);
  padding: 3px;
  border-radius: var(--r-pill);
  background: var(--cream);
}

.mode-switch button {
  flex: 1 1 0;
  min-height: 38px;
  border-radius: var(--r-pill);
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--sub);
}

.mode-switch button[aria-selected='true'] {
  background: var(--paper);
  color: var(--ink);
  box-shadow: var(--shadow-card);
}

.cal-note {
  margin-top: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-sm);
  background: var(--accent-soft);
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
}

.cal-note--plain {
  background: var(--cream);
  color: var(--sub);
}

/* ---------- 날짜 칸 ---------- */

.cal-week {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  margin-top: var(--sp-4);
}

.cal-week span {
  text-align: center;
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--muted);
}

.cal-week span:first-child { color: var(--accent); }

.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  margin-top: var(--sp-2);
}

.cal-cell {
  position: relative;
  min-height: 52px;
  padding: 5px 0 4px;
  border-radius: var(--r-xs);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}

.cal-cell.is-pad { visibility: hidden; }

.cal-cell__n {
  display: block;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--sub);
}

.cal-cell.is-today { background: var(--accent); }

.cal-cell.is-today .cal-cell__n {
  color: var(--paper);
  font-weight: 700;
}

.cal-cell.is-selected {
  outline: 2px solid var(--ink);
  outline-offset: -2px;
}

.cal-cell__dots {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2px;
  max-width: 34px;
}

/* ---------- 점 ----------
   색은 마스코트 등껍질 칸과 맞춘다. 한 캐릭터로 보이게 하려는 것이다.
   색만으로 구분하지 않는다. 아래 목록에 이름표가 같이 나온다. */

.dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--muted);
}

.dot.start { background: var(--shell); }
.dot.mid { background: var(--tile-todo); }
.dot.due { background: var(--accent); }
.dot.result { background: #6fa3e6; }
.dot.final { background: var(--scarf); }
.dot.repeat { background: #f5b940; }
.dot.prep { background: var(--tile-done); }
.dot.is-done { background: var(--tile-done); }

/* 오늘 칸은 바탕이 빨개서 점이 묻힌다. 테두리를 둘러 띄운다. */
.cal-cell.is-today .dot {
  box-shadow: 0 0 0 1.5px var(--accent);
}

.cal-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-3);
  margin-top: var(--sp-4);
}

.cal-legend div {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: var(--fs-xs);
  color: var(--sub);
}

/* ---------- 그 아래 목록 ---------- */

.day-head {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-top: var(--sp-6);
}

.day-head h2 {
  flex-grow: 1;
  font-size: var(--fs-md);
  font-weight: 700;
}

.day-item {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) auto;
  column-gap: var(--sp-3);
  align-items: center;
  width: 100%;
  min-height: var(--tap);
  padding: var(--sp-3);
  border-radius: var(--r-sm);
  background: var(--paper);
  text-align: left;
}

.day-item + .day-item { margin-top: var(--sp-2); }

.day-item__d {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--muted);
}

.day-item__body {
  display: block;
  min-width: 0;
}

.day-item__t {
  display: block;
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
}

/* 이미 내려간 일의 기록. 지우지 않고 남기되 흐리게 둔다. */
.day-item.is-past .day-item__t {
  color: var(--muted);
  text-decoration: line-through;
}

/* 홈에 끼워 넣은 목록에서 끊었을 때, 나머지를 보러 가는 버튼. */
.day-more {
  width: 100%;
  margin-top: var(--sp-3);
}

/* ---------- 노트북 ----------
   달력 화면은 폭을 base.css 에서 760px 로 잡는다. 그 폭에서는 한 칸이 100px 쯤인데
   높이가 52px 이면 납작해 보여서, 칸을 키우고 숫자를 가운데로 모은다.
   «.app-main 의 직계 자식일 때»로 건 이유는, 홈 오른쪽에 끼워 넣은 달력은
   이미 절반 폭이라 칸이 작아야 하기 때문이다. */
@media (min-width: 1024px) {
  .app-main > #view-calendar .cal-cell {
    min-height: 60px;
    justify-content: center;
  }
}