/* ── home.html 전용 이벤트 달력 섹션 스킨 ──────────────────────────
 * event_calendar.css는 홈에서 로드하지 않으므로 필요한 그리드·아젠다
 * 재정의 값을 이 파일에 그대로 복제한다. 뼈대(.month-grid/.day-cell)는
 * components/calendar.css를 공유하고, 여기서는 .home-cal 하위로만
 * 재정의를 얹는다.
 */

.home-cal {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 23.75rem;
  gap: 1.75rem;
  align-items: start;
}

/* ── 월 내비 ── */
.home-cal .calendar-month-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.home-cal .calendar-month-label {
  margin: 0;
  flex: none;
  white-space: nowrap;
  font-size: 1.375rem;
  font-weight: 300;
  letter-spacing: -0.01em;
}

.home-cal .calendar-month-sep {
  margin: 0 0.2em;
  color: var(--muted);
  font-weight: 400;
}

.home-cal .calendar-month-name {
  font-weight: 400;
}

.home-cal .calendar-month-controls {
  display: flex;
  align-items: center;
  gap: 0.125rem;
}

.home-cal .calendar-month-glyph {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  border-radius: 8px;
  color: var(--muted);
  font-size: 1.15rem;
  text-decoration: none;
}

.home-cal .calendar-month-glyph:hover {
  color: var(--text);
}

.home-cal .calendar-month-today {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0 0.5rem;
  color: var(--brand-ink);
  font-size: var(--fs-sm);
  font-weight: 600;
  text-decoration: none;
}

.home-cal .calendar-month-today:hover {
  text-decoration: underline;
}

/* ── 요일 헤더 ── */
.home-cal .month-grid-head {
  gap: 1px;
  padding-inline: 1px;
  margin-bottom: 0.375rem;
}

.home-cal .month-grid-weekday {
  text-align: left;
  padding: 0 0.25rem;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.06em;
}

.home-cal .month-grid > .month-grid-weekday:nth-child(7n+1) {
  color: var(--brand-ink);
}

.home-cal .month-grid > .month-grid-weekday:nth-child(7n) {
  color: var(--up-ink);
}

/* ── 그리드 본문: 1px 헤어라인으로 셀 사이 선을 그린다 ── */
.home-cal .month-grid-body {
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
}

.home-cal .day-cell {
  border: none;
  border-radius: 0;
  min-height: 4rem;
  padding: 0.4375rem 0.5rem;
  gap: 0.3125rem;
}

.home-cal .day-cell[data-today="true"] {
  border: none;
  box-shadow: inset 0 -3px 0 var(--brand);
}

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

.home-cal .day-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.375rem;
  height: 1.375rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
}

.home-cal .day-cell[data-today="true"] .day-num {
  background: var(--brand);
  color: #fff;
}

.home-cal .month-grid > .day-cell[data-in-month="true"]:nth-child(7n+1):not([data-selected="true"]):not([data-today="true"]) .day-num {
  color: var(--brand-ink);
}

.home-cal .month-grid > .day-cell[data-in-month="true"]:nth-child(7n):not([data-selected="true"]):not([data-today="true"]) .day-num {
  color: var(--up-ink);
}

.home-cal .day-cell:not([data-selected="true"]):not([data-void]):hover {
  background: var(--bg-soft);
}

.home-cal .day-cell:focus,
.home-cal .day-cell:focus-visible {
  outline-offset: -2px;
}

/* ── 카테고리 점(칸 안) ── */
.home-cal-dots {
  display: inline-flex;
  gap: 3px;
  padding-left: 0.25rem;
}

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

.home-cal-dot[data-category="popup_store"] {
  background: var(--cat-popup_store-ink);
}

.home-cal-dot[data-category="collaboration_cafe"] {
  background: var(--cat-collaboration_cafe-ink);
}

.home-cal-dot[data-category="theater_bonus"] {
  background: var(--cat-theater_bonus-ink);
}

.home-cal-dot[data-category="goods_reservation"] {
  background: var(--cat-goods_reservation-ink);
}

.home-cal-dot[data-category="exhibition"] {
  background: var(--cat-exhibition-ink);
}

.home-cal-dot[data-category="fan_meeting"] {
  background: var(--cat-fan_meeting-ink);
}

.home-cal-dot[data-category="concert"] {
  background: var(--cat-concert-ink);
}

/* ── 범례 ── */
.home-cal .calendar-legend {
  display: flex;
  flex-wrap: wrap;
  margin: 0.75rem 0 0;
  gap: 1rem;
}

.home-cal .legend-item {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.75rem;
  color: var(--muted);
}

.home-cal .calendar-legend .home-cal-dot {
  width: 8px;
  height: 8px;
}

/* ── 아젠다 카드 ── */
.home-cal-agenda {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  padding: 1.25rem 1.375rem 1rem;
  scroll-margin-top: calc(var(--site-header-h) + 1rem);
}

.home-cal-agenda:focus {
  outline: none; /* 날짜 이동 후 포커스가 오는 지점일 뿐, 직접 탭하는 컨트롤이 아니다. */
}

.home-cal-agenda .date-detail-head {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  padding-bottom: 0.625rem;
  margin-bottom: 0.25rem;
  border-bottom: 1px solid var(--line);
}

.home-cal-agenda .date-detail-head h3 {
  margin: 0;
  font-size: 0.9375rem;
}

.home-cal-agenda .date-detail-weekday {
  color: var(--muted);
  font-weight: 400;
  font-size: 0.875rem;
}

.home-cal-agenda .date-detail-count {
  margin-left: auto;
  color: var(--muted);
  font-size: 0.78125rem;
}

.home-cal-agenda .notice {
  margin: 0.75rem 0 0;
}

.home-cal-agenda .agenda-rows {
  display: flex;
  flex-direction: column;
}

.home-cal-agenda .agenda-row {
  --row-cat-ink: var(--muted);
  display: grid;
  grid-template-columns: 4px minmax(0, 1fr);
  gap: 0.75rem;
  align-items: start;
  padding: 0.75rem 0.125rem;
  border-bottom: 1px solid var(--border-soft);
}

.home-cal-agenda .agenda-row[data-cat="popup_store"] {
  --row-cat-ink: var(--cat-popup_store-ink);
}

.home-cal-agenda .agenda-row[data-cat="collaboration_cafe"] {
  --row-cat-ink: var(--cat-collaboration_cafe-ink);
}

.home-cal-agenda .agenda-row[data-cat="theater_bonus"] {
  --row-cat-ink: var(--cat-theater_bonus-ink);
}

.home-cal-agenda .agenda-row[data-cat="goods_reservation"] {
  --row-cat-ink: var(--cat-goods_reservation-ink);
}

.home-cal-agenda .agenda-row[data-cat="exhibition"] {
  --row-cat-ink: var(--cat-exhibition-ink);
}

.home-cal-agenda .agenda-row[data-cat="fan_meeting"] {
  --row-cat-ink: var(--cat-fan_meeting-ink);
}

.home-cal-agenda .agenda-row[data-cat="concert"] {
  --row-cat-ink: var(--cat-concert-ink);
}

.home-cal-agenda .agenda-bar {
  align-self: stretch;
  min-height: 2.625rem;
  border-radius: 2px;
  background: var(--row-cat-ink);
}

.home-cal-agenda .agenda-meta {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.6875rem;
}

.home-cal-agenda .agenda-cat {
  color: var(--row-cat-ink);
  font-weight: 600;
}

.home-cal-agenda .agenda-dot {
  flex: none;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--muted);
}

.home-cal-agenda .agenda-tone {
  font-weight: 600;
  color: var(--muted);
}

.home-cal-agenda .agenda-work {
  margin: 0.125rem 0 0;
  font-size: 0.6875rem;
  font-weight: 700;
  color: var(--row-cat-ink);
  word-break: keep-all;
}

.home-cal-agenda .agenda-title {
  margin: 0.1875rem 0;
  font-size: 0.9375rem;
  font-weight: 600;
  word-break: keep-all;
}

.home-cal-agenda .agenda-title a {
  color: inherit;
  text-decoration: none;
}

.home-cal-agenda .agenda-title a:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-radius: 4px;
}

.home-cal-agenda .agenda-date {
  margin: 0 0 0.1875rem;
  font-size: 0.75rem;
  color: var(--muted);
}

.home-cal-agenda .agenda-place {
  margin: 0;
  font-size: 0.75rem;
  color: var(--muted);
}

.home-cal-agenda-more {
  display: block;
  padding: 0.75rem 0.125rem 0.375rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--brand-ink);
  text-decoration: none;
}

.home-cal-agenda-more:hover {
  text-decoration: underline;
}

.home-cal-agenda-more:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ── 반응형 ── */
@media (max-width: 56.25rem) {
  .home-cal {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 45rem) {
  .home-cal .month-grid {
    gap: 2px;
  }

  .home-cal .month-grid-head {
    gap: 2px;
    padding-inline: 0;
  }

  .home-cal .month-grid-body {
    background: none;
    border: none;
    border-radius: 0;
    overflow: visible;
  }

  .home-cal .day-cell {
    min-height: 3.25rem;
    border: 1px solid var(--line);
    border-radius: 0.5rem;
    align-items: center;
    justify-content: center;
    padding: 0.25rem 0.125rem;
  }

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

  .home-cal .day-num {
    font-size: 0.625rem;
    width: 1.25rem;
    height: 1.25rem;
  }

  .home-cal-dots {
    padding-left: 0;
    justify-content: center;
    gap: 2px;
  }

  .home-cal-dot {
    width: 5px;
    height: 5px;
  }
}