/* ── calendar.css — shared month-grid component ─────────────────
 * templates/core/partials/_calendar_grid.html(행사 달력)과
 * _archive_calendar_grid.html(내 활동 달력)이 같은 .month-grid/.day-cell
 * 뼈대를 공유하고, 칸 내용만 다르다(행사=제목, 활동=종류별 점).
 * <table> 없이 순수 CSS grid만 쓴다.
 *
 * 범례 점 색(일정=--up-*, 찜=--pink-*, 상태 변경=--brand-*, 방문=--mint-*,
 * 굿즈=--amber-*, --rose-*는 오류 패널 전용이라 종류 표시에는 절대 안
 * 씀)은 `.day-dot[data-kind]`에만 적용된다 — 행사 달력은 data-kind
 * 속성을 안 넣으므로 아래 `.day-dot` 기본(브랜드색 원)에는 영향이 없다.
 */
.month-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 0.375rem;
}

.month-grid-weekday {
  text-align: center;
  padding: 0.25rem 0;
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--muted);
}

/* 실제 날짜 칸(<a>)과 연도 경계를 메우는 빈 칸(<span data-void>)이 같은
   박스 스타일을 공유해, 빈 칸 때문에 그리드에 구멍이 생기지 않는다. */
.day-cell {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  min-height: 6.5rem; /* 데스크톱/태블릿 */
  padding: 0.375rem 0.3125rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  text-decoration: none;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.day-cell:hover {
  border-color: var(--brand);
}

/* 포커스 아웃라인은 base.css의 전역 a:focus 규칙을 그대로 쓴다(여기서
   다시 정의하지 않음). */

.day-cell[data-void] {
  border-color: transparent;
  background: transparent;
  cursor: default;
}

.day-cell[data-today="true"] {
  border: 2px solid var(--brand);
}

.day-cell[data-selected="true"] {
  background: var(--brand-soft);
}

.day-cell[data-selected="true"] .day-num {
  color: var(--brand-ink);
  font-weight: 700;
}

.day-cell[data-in-month="false"] {
  background: var(--bg);
}

.day-cell[data-in-month="false"] .day-num {
  color: var(--muted);
}

/* 다른 달 칸의 일정 제목도 흐리게 처리해 .day-num/.day-more와 톤을
   맞춘다 — 안 그러면 이번 달과 글자 진하기가 같아 눈에 안 띈다. */
.day-cell[data-in-month="false"] .day-item {
  color: var(--muted);
}

.day-num {
  font-size: var(--fs-sm);
  font-weight: 600;
}

/* 데스크톱: 일정 제목 최대 2개(한 줄 말줄임)와 "외 N개" 표시. 모바일에서는
   아래 미디어쿼리로 숨긴다. */
.day-items {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 2px;
}

.day-item {
  font-size: var(--fs-xs);
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--text);
}

.day-more {
  font-size: var(--fs-xs);
  color: var(--muted);
}

/* 모바일: 제목 없이 점과 총 개수만 표시. 기본은 숨김이고, 아래 45rem
   미디어쿼리에서만 보인다. */
.day-mobile-meta {
  display: none;
  align-items: center;
  gap: 0.25rem;
  margin-top: auto;
}

/* 행사 달력은 종류가 하나뿐이라 --brand 색 점 하나만 쓴다. data-kind
   속성이 없는 기본 규칙이라 아래 [data-kind] 색상 재정의의 영향을
   받지 않는다. */
.day-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--brand);
}

/* 내 활동 달력에 보이는 4개 종류의 점 색. "상태 변경(status)"은 서버에서
   걸러져 실제로는 어느 화면에도 렌더되지 않으므로 전용 규칙을 따로 두지
   않았다 — 혹시 나타나도 이 기본 [data-kind] 규칙으로만 떨어진다. */
.day-dot[data-kind] {
  border: none;
}

.day-dot[data-kind="schedule"] {
  background: var(--up-ink);
}

.day-dot[data-kind="interest"] {
  background: var(--pink-ink);
}

.day-dot[data-kind="visit"] {
  background: var(--mint-ink);
}

.day-dot[data-kind="goods"] {
  background: var(--amber-ink);
}

/* 내 활동 달력의 모바일 전용 종류 점 줄(칸당 최대 3개, 템플릿에서
   |slice:":3"으로 제한). 데스크톱 칸은 대신 제목을 보여주므로 이 줄은
   모바일에서만 쓰고, 기본은 숨김이며 아래 45rem 미디어쿼리에서 보인다. */
.day-mobile-dots {
  display: none;
  flex-wrap: wrap;
  gap: 3px;
  margin-top: auto;
}

.day-count {
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--text);
}

/* ── legend (Activity calendar only — 5 kind dot + label pairs) ── */
.calendar-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 0.75rem 0 1.25rem;
  font-size: var(--fs-xs);
  color: var(--muted);
}

.legend-item {
  display: inline-flex;
  align-items: center;
  gap: 0.3125rem;
}

/* ── error panel ──────────────────────────────────────────────
   --rose-*는 이 오류 패널 전용이다 — 종류 표시 점 색으로는 절대 쓰지
   않는다. */
.calendar-error-panel {
  border-color: var(--rose-border);
  background: var(--rose-soft);
}

@media (max-width: 45rem) {
  .month-grid {
    gap: 2px;
  }
  /* 320px 화면에서는 내용 너비 288px를 7칸으로 나누면 칸당 39~41px라
     44px 너비를 지킬 수 없다(계산상 불가능, 알려진 예외). 세로
     44px 최소 높이는 유지한다. */
  .day-cell {
    min-height: 44px;
    padding: 0.25rem 0.125rem;
    border-radius: 6px;
  }
  .day-items {
    display: none;
  }
  .day-mobile-meta {
    display: flex;
  }
  .day-mobile-dots {
    display: flex;
  }
}

@media (prefers-reduced-motion: reduce) {
  .day-cell {
    transition: none;
  }
}