/* ── /events/calendar/ page skin ───────────────────────────────── */
/* 디자인 출처: claude.ai/design "행사 달력 페이지 v2 (에디토리얼).dc.html".
 *
 * 달력 그리드/셀 모양을 바꾸는 건 이 파일뿐이다. 뼈대(.month-grid/.day-cell
 * 등)는 components/calendar.css에 그대로 있고 활동 달력과 공유한다 — 그
 * 파일은 건드리지 않는다. 이 파일의 규칙은 그 위에 얹는 재정의이고,
 * 활동 달력 페이지는 이 스타일시트를 로드하지 않으니 영향이 없다.
 *
 * 이 페이지는 event_list.html의 셸(.events-page/.events-head/.layout 등)을
 * 그대로 공유한다. 그래서 브레이크포인트가 두 개다 — 56.25rem은 공유
 * `.layout`의 접힘, 45rem은 이 페이지 자체 그리드/아젠다 접힘이다.
 */

/* ── month nav: 1fr auto 1fr, "YYYY · M월" left, prev/today/next centered */
.calendar-month-nav {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.875rem;
}

/* `.events-page` 접두사가 없으면 components/cards.css의
   `.panel h2 { font-size: 1rem }`(특이도 (0,1,1))가 이겨 월 라벨이
   16px로 고정된다. */
.events-page .calendar-month-label {
  margin: 0;
  min-width: 0;
  font-size: 1.6875rem; /* 이 페이지 전용 값(--fs-xl은 홈 히어로 전용) */
  font-weight: 300;
  letter-spacing: -0.01em;
}

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

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

.calendar-month-controls {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  justify-self: center;
}

.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;
}

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

.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;
}

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

/* ── month grid: seamless 1px hairline grid, radius 12, no per-cell border ── */
/* 헤더도 본문과 같은 gap(1px)을 써야 한다 — 안 그러면 본문(1px)과
   헤더(공용 6px)의 열이 누적으로 어긋난다. 1px 안쪽 여백은 본문의
   1px 테두리만큼 좁아진 콘텐츠 박스를 맞추기 위함이다. */
.month-grid-head {
  gap: 1px;
  padding-inline: 1px;
  margin-bottom: 0.5rem;
}

.month-grid-body {
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
}

.day-cell {
  border: none;
  border-radius: 0;
  min-height: 7.375rem;
  padding: 0.6875rem 0.6875rem 0.8125rem;
  gap: 0.375rem;
}

/* 속성 셀렉터(특이도 (0,2,0))가 일반 클래스((0,1,0))를 항상 이겨서
   공용 2px 테두리는 여기서 명시적으로 지워야 한다. */
.day-cell[data-today="true"] {
  border: none;
}

.day-cell[data-selected="true"] {
  background: var(--bg-soft);
  box-shadow: inset 0 -3px 0 var(--brand);
}

/* [data-in-month="false"] 배경은 일부러 그대로 둔다 — 공용 규칙이 이미
   적용되고 있어 다시 선언하면 값이 두 곳에 따로 존재하게 된다. */

.day-num {
  text-align: right;
  align-self: flex-end;
  font-size: 1.0625rem;
  font-weight: 300;
}

/* 오늘: brand 색 원형 배지로 표시하고 셀 테두리는 없앤다. */
.day-cell[data-today="true"] .day-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 999px;
  background: var(--brand);
  color: #fff;
  font-weight: 600;
}

/* 요일 헤더는 왼쪽 정렬, 굵게. 일/토 색은 기존 nth-child 방식을 그대로 쓴다. */
.month-grid-weekday {
  text-align: left;
  padding: 0 0.375rem;
  font-size: 0.65625rem;
  font-weight: 700;
  letter-spacing: 0.06em;
}

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

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

.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);
}

.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);
}

/* 그리드의 overflow:hidden이 첫 행/열 셀의 포커스 링을 잘라내므로
   2px 안쪽으로 그려 셀 박스 안에 완전히 들어오게 한다. */
.day-cell:focus,
.day-cell:focus-visible {
  outline-offset: -2px;
}

/* 셀에 테두리가 없어 hover는 배경색을 바꾸는 방식으로 대신한다.
   선택/공백 상태는 이미 자기 배경이 있어 제외한다. */
.day-cell:not([data-selected="true"]):not([data-void]):hover {
  background: var(--bg-soft);
}

/* ── date items: 3px category bar + 1-line title, "외 N개" overflow ──── */
.day-item-cat[data-category="popup_store"],
.day-mobile-dot[data-category="popup_store"] {
  background: var(--cat-popup_store-ink);
}

.day-item-cat[data-category="collaboration_cafe"],
.day-mobile-dot[data-category="collaboration_cafe"] {
  background: var(--cat-collaboration_cafe-ink);
}

.day-item-cat[data-category="theater_bonus"],
.day-mobile-dot[data-category="theater_bonus"] {
  background: var(--cat-theater_bonus-ink);
}

.day-item-cat[data-category="goods_reservation"],
.day-mobile-dot[data-category="goods_reservation"] {
  background: var(--cat-goods_reservation-ink);
}

.day-item-cat[data-category="exhibition"],
.day-mobile-dot[data-category="exhibition"] {
  background: var(--cat-exhibition-ink);
}

.day-item-cat[data-category="fan_meeting"],
.day-mobile-dot[data-category="fan_meeting"] {
  background: var(--cat-fan_meeting-ink);
}

/* flex 컨텍스트가 없으면 3px 막대는 인라인 박스라 width가 적용 안 돼
   색은 맞는데 너비가 0으로 사라진다. */
.day-item {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.day-item-cat {
  width: 3px;
  align-self: stretch;
  min-height: 0.85em;
  border-radius: 2px;
  flex: none;
  background: var(--brand);
}

.day-item-title {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* .day-item과 같은 함정이다 — inline <span>이라 flex 부모가 없으면
   width가 무시돼 0px로 그려진다. */
.day-mobile-cats {
  display: inline-flex;
  gap: 3px;
}

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

/* ── selected-date agenda (flat rows, no ticket-stub card) ──────── */
.date-detail-section {
  margin-top: 1.25rem;
}

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

.date-detail-head h2 {
  margin: 0;
  font-size: var(--fs-base);
}

.date-detail-weekday {
  color: var(--muted);
  font-weight: 400;
  font-size: var(--fs-md);
}

.date-detail-count {
  color: var(--muted);
  font-size: var(--fs-sm);
}

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

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

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

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

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

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

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

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

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

/* status.js가 .agenda-row 자체에 .status-inline-error를 붙인다. 이
   규칙이 없으면 오류가 3번째(auto) 열에만 갇혀 행 전체를 못 덮는다. */
.agenda-row > .status-inline-error {
  grid-column: 1 / -1;
}

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

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

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

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

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

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

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

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

/* 여러 날 걸치는 행사에만 표시한다 — 단일일 행사는 섹션 제목이 이미
   그 날짜를 말하므로 중복이다. */
.agenda-date {
  margin: 0 0 0.1875rem;
  font-size: 0.72rem;
  color: var(--muted);
}

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

.agenda-end {
  display: flex;
  align-items: center;
  gap: 0.625rem;
}

/* home.css의 .section-more와 같은 방식으로, 공용 archive 버튼이 아니라
   작은 brand 텍스트 링크다. */
.agenda-more {
  position: relative;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--brand-ink);
  text-decoration: none;
}

.agenda-more::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 44px;
  height: 44px;
  transform: translate(-50%, -50%);
}

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

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

@media (max-width: 45rem) {
  /* 위 데스크톱 블록이 없앤 것들을 여기서 되돌린다. `gap`도 다시 선언해야
     한다 — 데스크톱 `gap: 1px`이 캐스케이드상 나중이라 안 그러면
     모바일에서도 그 값이 이겨버린다. */
  .month-grid {
    gap: 2px;
  }

  /* 본문이 테두리를 잃으니 헤더의 테두리 보정값도 함께 없앤다. */
  .month-grid-head {
    gap: 2px;
    padding-inline: 0;
  }

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

  .day-cell {
    min-height: 3.25rem;
    border: 1px solid var(--line);
    border-radius: 0.5rem;
  }

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

  .day-num {
    text-align: center;
    align-self: center;
    font-size: 0.625rem;
    font-weight: 600;
  }

  .day-cell[data-today="true"] .day-num {
    width: 1.375rem;
    height: 1.375rem;
    font-size: 0.625rem;
  }

  .calendar-month-nav {
    grid-template-columns: 1fr auto;
  }

  .events-page .calendar-month-label {
    font-size: 1.5rem;
  }

  .agenda-row {
    padding: 0.6875rem 0.125rem;
  }

  .agenda-title {
    font-size: 0.85rem;
  }

  .agenda-place {
    font-size: 0.72rem;
  }
}

/* ── agenda row action links (자세히 / 로그인하고 찜하기) hover ───────── */
/* `.side-action-link`은 다른 페이지도 쓰는 공용 컴포넌트라 여기서는
   `.events-page .agenda-end`로 좁혀 다른 페이지에 영향이 없게 한다. */
.events-page .agenda-end .side-action-link {
  transition: background-color 0.15s ease, border-color 0.15s ease,
    color 0.15s ease;
}
.events-page .agenda-end .side-action-link:hover {
  background: var(--bg-soft);
  border-color: var(--brand);
  color: var(--brand-ink);
}

@media (prefers-reduced-motion: reduce) {
  .events-page .agenda-end .side-action-link {
    transition: none;
  }
}