/*
 * 캘린더 페이지 전용 스타일. calendar/show.html.erb 에서만 로드합니다.
 * application.css 의 :root 변수를 재사용하고 전역 규칙은 건드리지 않습니다.
 *
 * 구조: 월 타이틀 → 주간 스트립(오늘이 속한 주) → 보기 세그먼트(전체/진행 중/곧 시작)
 * → 일정 리스트 → 월간 전체 보기(달력 그리드, 아래에 늘 있습니다 — 데스크톱에선 이게 주 뷰).
 * 자바스크립트 없이 전부 링크·쿼리 파라미터로 동작합니다.
 */

/* 레이아웃상 이 파일이 application.css 보다 먼저 실려서, 전역 높이 규칙만 특이도로 이깁니다. */
html body {
  height: auto;
  min-height: 100%;
}

.calendar-page {
  --popup: var(--exhibit);
  --showcase: var(--walk);
  --gathering: var(--night);
  --festival: var(--food);

  max-width: var(--subpage-width-wide);
  min-height: 100dvh;
  margin: 0 auto;
  padding: 0 var(--page-gutter) var(--space-10);
  background: var(--warm-50);
}

.calendar-body {
  display: grid;
  gap: var(--space-6);
  padding: 0;
}

/* ── 월 이동 바 ───────────────────────────────── */

.month-bar {
  display: flex;
  gap: var(--space-4);
  align-items: baseline;
  padding: 0 0 var(--space-4);
  border-bottom: 1px solid var(--line);
}

.month-bar__label {
  margin: 0;
  color: var(--ink);
  font-family: var(--font-serif);
  font-size: var(--text-lg);
  font-weight: var(--weight-strong);
  letter-spacing: -0.01em;
}

.month-bar__nav {
  display: flex;
  gap: var(--space-1);
  margin-left: auto;
}

.month-bar__step {
  display: grid;
  width: 36px;
  height: 36px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-pill);
  color: var(--ink);
  font-size: var(--text-xs);
  text-decoration: none;
  background: var(--surface-solid);
  box-shadow: var(--control-shadow);
  place-items: center;
  transition: border-color 0.16s var(--ease-out), color 0.16s var(--ease-out), background 0.16s var(--ease-out);
}

.month-bar__step:hover {
  border-color: rgb(var(--accent-rgb) / 38%);
  color: var(--accent-strong);
  background: var(--rose-50);
}

/* ── 주간 스트립 ──────────────────────────────── */
/* 오늘(정확히는 선택일)이 속한 한 주. 요일·날짜·그 날 일정 종류 색점(최대 3개)만 보여주고,
   날을 누르면 그 주로 이동합니다 — 자바스크립트 없이 링크만으로 동작합니다. */

.week-strip {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  padding: var(--space-2) var(--space-1);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-4);
  background: var(--surface-card);
  box-shadow: var(--shadow-card);
}

.week-strip__cell {
  display: grid;
  gap: 3px;
  min-height: 52px;
  padding: var(--space-1) 0;
  border-radius: var(--radius-1);
  color: inherit;
  text-decoration: none;
  justify-items: center;
  transition: background 0.16s var(--ease-out);
}

.week-strip__cell:hover {
  background: var(--surface-sunken);
}

.week-strip__cell.is-today {
  background: var(--surface-sunken);
}

.week-strip__cell.is-selected {
  box-shadow: inset 0 0 0 1px rgb(var(--accent-rgb) / 28%);
}

.week-strip__dow {
  color: var(--gray-500);
  font-size: var(--text-2xs);
}

.week-strip__dow.is-weekend {
  color: var(--accent-strong);
}

.week-strip__num {
  color: var(--ink);
  font-size: var(--text-md);
  font-weight: var(--weight-regular);
  font-variant-numeric: tabular-nums;
}

.week-strip__cell.is-today .week-strip__num {
  font-weight: var(--weight-label);
}

.week-strip__dots {
  display: flex;
  gap: 3px;
  min-height: 4px;
}

.week-strip__dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
}

.week-strip__dot--popup { background: var(--popup); }
.week-strip__dot--showcase { background: var(--showcase); }
.week-strip__dot--gathering { background: var(--gathering); }
.week-strip__dot--festival { background: var(--festival); }

/* ── 보기 세그먼트 ────────────────────────────── */
/* 전체 / 진행 중 / 곧 시작 — 오늘 기준 상태로 쿼리 파라미터(view=)를 바꿔 서버에서 거릅니다. */

.view-segment {
  display: flex;
  gap: var(--space-2);
  align-items: center;
}

.view-segment__option {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 var(--space-4);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-pill);
  color: var(--muted);
  font-size: var(--text-xs);
  font-weight: var(--weight-regular);
  text-decoration: none;
  transition: border-color 0.16s var(--ease-out), color 0.16s var(--ease-out), background 0.16s var(--ease-out);
}

.view-segment__option:hover {
  border-color: rgb(var(--accent-rgb) / 38%);
  color: var(--accent-strong);
  background: var(--rose-50);
}

.view-segment__option.is-active {
  border-color: transparent;
  color: var(--gray-50);
  font-weight: var(--weight-strong);
  background: var(--ink-gradient);
}

.view-segment__option.is-active:hover {
  color: var(--gray-50);
  background: var(--ink-gradient);
}

.view-segment__day {
  margin-left: auto;
  color: var(--gray-500);
  font-size: var(--text-2xs);
  letter-spacing: 0.02em;
  white-space: nowrap;
}

/* ── 일정 목록 ────────────────────────────────── */

.schedule-section {
  scroll-margin-top: var(--space-4);
}

.schedule-section__empty {
  margin: 0;
  padding: var(--space-6) 0;
  color: var(--gray-500);
  font-size: var(--text-sm);
  line-height: var(--leading-body);
  text-align: center;
  word-break: keep-all;
}

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

.schedule-row + .schedule-row {
  border-top: 1px solid var(--line);
}

.schedule-row__link {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: var(--space-3);
  align-items: center;
  padding: var(--space-3) 0;
  color: inherit;
  text-decoration: none;
}

.schedule-row__thumb {
  display: grid;
  overflow: hidden;
  aspect-ratio: 1;
  border-radius: var(--radius-3);
  background: var(--gray-100);
  box-shadow: var(--shadow-sm);
  place-items: center;
}

.schedule-row__thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.schedule-row__thumb-icon {
  color: var(--row-tone, var(--muted));
}

.schedule-row--popup { --row-tone: var(--popup); }
.schedule-row--showcase { --row-tone: var(--showcase); }
.schedule-row--gathering { --row-tone: var(--gathering); }
.schedule-row--festival { --row-tone: var(--festival); }

.schedule-row__body {
  min-width: 0;
}

.schedule-row__head {
  display: flex;
  gap: var(--space-2);
  align-items: center;
}

.schedule-row__icon {
  flex: none;
  color: var(--muted);
}

.schedule-row__name {
  overflow: hidden;
  min-width: 0;
  color: var(--ink);
  font-size: var(--text-md);
  font-weight: var(--weight-strong);
  letter-spacing: -0.01em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.schedule-row__state {
  flex: none;
  margin-left: auto;
  color: var(--accent-strong);
  font-size: var(--text-2xs);
  font-style: normal;
  font-weight: var(--weight-strong);
  letter-spacing: 0.08em;
}

.schedule-row__meta {
  display: block;
  margin-top: 5px;
  padding-left: 24px;
  color: var(--gray-500);
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums;
  word-break: keep-all;
}

.schedule-row__tentative {
  margin-left: var(--space-1);
  color: var(--muted);
}

.calendar-reveal-link {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  color: var(--muted);
  font-size: var(--text-xs);
  font-weight: var(--weight-strong);
  letter-spacing: 0.06em;
  text-decoration: none;
}

.calendar-reveal-link:hover {
  color: var(--accent-strong);
}

/* ── 월간 전체 보기(달력 그리드) ──────────────── */
/* 새 목록 아래 늘 있습니다(완전히 숨기지 않음). 데스크톱에서는 오른쪽 목록과 나란히
   놓이는 주 화면이라 위 라벨을 감춥니다. */

.calendar-monthgrid {
  margin-top: var(--space-4);
  padding-top: var(--space-6);
  border-top: 1px solid var(--line);
}

.calendar-grid {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--subpage-radius);
  background: var(--surface-solid);
  box-shadow: var(--panel-shadow);
}

/* minmax(0, 1fr) 이어야 긴 칩 텍스트가 열 너비를 밀어내지 않고 7등분이 유지됩니다. */
.calendar-grid__weekdays,
.calendar-grid__week {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
}

.calendar-grid__weekdays {
  border-bottom: 1px solid var(--line);
  background: var(--rose-50);
}

.calendar-grid__weekday {
  padding: var(--space-3) 0;
  color: var(--muted);
  font-size: var(--text-2xs);
  font-weight: var(--weight-strong);
  letter-spacing: var(--label-tracking);
  text-align: center;
}

.calendar-grid__weekday.is-weekend {
  color: var(--muted);
}

.calendar-grid__week + .calendar-grid__week {
  border-top: 1px solid var(--hairline-soft);
}

.day-cell {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
  min-height: 74px;
  padding: var(--space-2) var(--space-2);
  color: inherit;
  text-decoration: none;
  transition: background 0.16s var(--ease-out);
}

.day-cell + .day-cell {
  border-left: 1px solid var(--hairline-soft);
}

.day-cell:hover,
.day-cell.is-selected {
  background: rgb(var(--accent-rgb) / 6%);
}

.day-cell.is-selected {
  box-shadow: inset 0 0 0 1px rgb(var(--accent-rgb) / 28%);
}

.day-cell.is-today:not(.is-selected) {
  background: rgb(var(--accent-rgb) / 5%);
}

/* 타월은 투명도 대신 배경으로 눌러 글자 대비를 지킵니다. */
.day-cell.is-outside {
  background: var(--rose-50);
}

.day-cell.is-outside .day-cell__number {
  color: var(--muted);
  opacity: 0.55;
}

.day-cell.is-outside .day-chip {
  opacity: 0.45;
}

.day-cell__number {
  color: var(--ink);
  font-family: var(--font-display);
  font-size: var(--text-sm);
  line-height: 1.4;
  text-align: center;
}

.day-cell.is-weekend .day-cell__number {
  color: var(--muted);
}

.day-cell.is-today .day-cell__number {
  display: inline-grid;
  justify-self: center;
  width: 21px;
  height: 21px;
  border-radius: 50%;
  color: var(--gray-0);
  background: var(--rose-500);
  place-items: center;
}

.day-cell__chips {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
}

.day-chip {
  display: flex;
  gap: var(--space-1);
  align-items: flex-start;
  overflow: hidden;
  max-width: 100%;
  padding: var(--space-1) var(--space-2);
  border: 1px solid var(--hairline-soft);
  border-radius: var(--radius-2);
  color: var(--gray-700);
  font-size: var(--text-2xs);
  line-height: 1.35;
  word-break: keep-all;
}

/* 종류는 글자색 대신 칩 머리의 원색 도트로 구분합니다. 범례와 같은 색입니다. */
.day-chip::before {
  flex: 0 0 auto;
  width: 5px;
  height: 5px;
  margin-top: 0.34em;
  border-radius: 50%;
  content: "";
  background: var(--chip-tone, var(--muted));
}

/* 끝나는 날은 채우지 않고 테두리로만 — 시작이 더 중요한 정보입니다.
   테두리는 종류 색을 이어받아 무엇이 끝나는지도 함께 읽힙니다. */
.day-chip.is-ending {
  border: 1px solid var(--chip-tone, currentcolor);
  background: transparent;
  opacity: 0.72;
}

/* 한 줄 말줄임은 "2026 청년…"처럼 정보가 되지 않아 두 줄까지 보여줍니다.
   클램프는 패딩 없는 안쪽 요소에 걸어야 세 번째 줄이 패딩에 비치지 않습니다. */
.day-chip__name {
  display: -webkit-box;
  overflow: hidden;
  min-width: 0;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.day-chip--popup {
  --chip-tone: var(--event-popup);

  background: #f4f1f7;
}

.day-chip--showcase {
  --chip-tone: var(--event-showcase);

  background: #eef4f1;
}

.day-chip--gathering {
  --chip-tone: var(--event-gathering);

  background: #eff2f8;
}

.day-chip--festival {
  --chip-tone: var(--event-festival);

  background: #f7f1f0;
}

.day-cell__more {
  color: var(--muted);
  font-size: var(--text-2xs);
  text-align: center;
}

/*
 * 좁은 화면에서는 칸 폭이 50px 남짓이라 칩 글자가 "부산…" 으로 잘려 정보가 되지 않습니다.
 * 그래서 모바일에서는 칩을 종류별 색 점으로만 보여주고, 이름은 위 일정 목록에서 읽게 합니다.
 */
@media (max-width: 639px) {
  .calendar-grid {
    border-radius: var(--radius);
  }

  .day-cell {
    align-items: center;
    gap: var(--space-1);
  }

  .day-cell__chips {
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--space-1);
    align-items: center;
    justify-content: center;
  }

  .day-chip {
    overflow: hidden;
    width: 5px;
    min-width: 5px;
    height: 5px;
    padding: 0;
    border-radius: 50%;
  }

  /* 점 모드에서는 칩 배경색만 남기고 도트·이름을 감춥니다. */
  .day-chip::before,
  .day-chip .day-chip__name {
    display: none;
  }

  /* 점은 5px 밖에 안 되므로 칩 배경(20% 투명)이 아니라 원색을 씁니다. */
  .day-chip--popup { background: var(--popup); }
  .day-chip--showcase { background: var(--showcase); }
  .day-chip--gathering { background: var(--gathering); }
  .day-chip--festival { background: var(--festival); }

  .day-cell__more {
    font-size: var(--text-2xs);
    line-height: 1;
  }

  .day-chip.is-ending {
    border-width: 1.5px;
    opacity: 1;
  }
}

/* ── 범례 ─────────────────────────────────────── */

.calendar-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  margin: var(--space-4) 0 0;
  padding: 0;
  list-style: none;
}

.calendar-legend__item {
  display: inline-flex;
  gap: var(--space-2);
  align-items: center;
  color: var(--muted);
  font-size: var(--text-2xs);
  letter-spacing: 0.06em;
}

.calendar-legend__dot {
  width: 7px;
  height: 7px;
  border-radius: var(--radius-1);
}

.calendar-legend__dot--popup { background: var(--popup); }
.calendar-legend__dot--showcase { background: var(--showcase); }
.calendar-legend__dot--gathering { background: var(--gathering); }
.calendar-legend__dot--festival { background: var(--festival); }

/* 달력 아래 한 줄 설명 — 칩 모양의 의미를 글자 없이 전달하기 위한 최소 안내. */
.calendar-note {
  margin: var(--space-3) 0 0;
  color: var(--muted);
  font-size: var(--text-xs);
  line-height: var(--leading-body);
  word-break: keep-all;
}

.calendar-note strong {
  color: var(--accent-strong);
  font-weight: var(--weight-strong);
}

/* ── 접근성 ───────────────────────────────────── */

.calendar-page a:focus-visible {
  outline: 1px solid var(--ink);
  outline-offset: 3px;
}

/* ── 태블릿 ───────────────────────────────────── */

@media (min-width: 640px) {
  .day-cell {
    min-height: 96px;
    padding: var(--space-2) var(--space-2);
  }

  .day-cell__number {
    font-size: var(--text-md);
    text-align: left;
  }

  .day-cell.is-today .day-cell__number {
    justify-self: start;
  }

  .day-chip {
    font-size: var(--text-2xs);
  }
}

/* ── 데스크톱: 위(월 타이틀·세그먼트) 전체 폭, 아래는 그리드 + 목록 2단 ─────── */
/* 주간 스트립은 전체 달력 그리드가 이미 같은 역할을 하므로 데스크톱에서는 뺍니다.
   달력 그리드가 주 뷰라 늘 펼쳐져 있고, '월간 전체 보기' 라벨·이동 링크는 감춥니다. */

@media (min-width: 1000px) {
  .calendar-body {
    grid-template-columns: minmax(0, 1fr) 272px;
    grid-template-areas:
      "month   month"
      "segment segment"
      "grid    list";
    align-items: start;
  }

  .month-bar { grid-area: month; }
  .view-segment { grid-area: segment; }
  .calendar-monthgrid { grid-area: grid; }

  .week-strip {
    display: none;
  }

  .month-bar__label {
    font-size: var(--text-2xl);
  }

  .calendar-monthgrid {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
  }

  .schedule-section {
    position: sticky;
    top: var(--space-11);
    grid-area: list;
    max-height: calc(100vh - 100px);
    overflow-y: auto;
  }

  .calendar-reveal-link {
    display: none;
  }

  .day-cell {
    min-height: 108px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .day-cell,
  .month-bar__step,
  .week-strip__cell,
  .view-segment__option,
  .schedule-row__link {
    transition: none;
  }
}