/*
 * 캘린더 페이지 전용 스타일. 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(--gray-0);
}

/* ── 본문 ─────────────────────────────────────── */

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

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

.month-bar {
  display: flex;
  gap: var(--space-3);
  align-items: center;
  justify-content: space-between;
  padding: 0 0 var(--space-5);
  border-bottom: 1px solid var(--hairline-strong);
}

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

.month-bar__step:hover {
  border-color: var(--ink);
  color: var(--ink);
}

.month-bar__center {
  text-align: center;
}

.month-bar__label {
  margin: 0;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: var(--display-weight);
  letter-spacing: var(--tracking-display);
}

.month-bar__count {
  margin: var(--space-1) 0 0;
  color: var(--accent);
  font-size: var(--text-2xs);
  letter-spacing: var(--label-tracking);
}

/* ── 그리드 ───────────────────────────────────── */

.calendar-grid {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 0;
  background: var(--gray-0);
  box-shadow: none;
}

/* 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(--gray-0);
}

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

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

.day-cell:hover {
  background: var(--gray-50);
}

.day-cell.is-outside {
  opacity: 0.38;
}

.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: var(--radius-1);
  color: var(--gray-0);
  background: var(--ink);
  place-items: center;
}

.day-cell.is-selected {
  background: var(--gray-50);
  box-shadow: inset 0 0 0 1px var(--ink);
}

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

.day-chip {
  overflow: hidden;
  max-width: 100%;
  padding: var(--space-1) var(--space-1);
  border: 1px solid var(--line);
  border-radius: var(--radius-1);
  font-size: var(--text-2xs);
  line-height: 1.5;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.day-chip--popup {
  color: #615c63;
  background: #f2f0f2;
}

.day-chip--showcase {
  color: #565f58;
  background: #eff2f0;
}

.day-chip--gathering {
  color: #5d6068;
  background: #f0f1f3;
}

.day-chip--festival {
  color: #655a58;
  background: #f3f0ef;
}

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

/*
 * 좁은 화면에서는 칸 폭이 50px 남짓이라 칩 글자가 "부산…" 으로 잘려 정보가 되지 않습니다.
 * 그래서 모바일에서는 칩을 종류별 색 점으로만 보여주고, 이름은 아래 패널에서 읽게 합니다.
 */
@media (max-width: 639px) {
  .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%;
    text-indent: -999px;
  }

  /* 점은 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;
  }
}

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

.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-panel {
  padding: 0 0 var(--space-6);
  border: 0;
  border-top: 1px solid var(--hairline-strong);
  border-bottom: 1px solid var(--hairline-strong);
  border-radius: 0;
  background: var(--gray-0);
  box-shadow: none;
  scroll-margin-top: 70px;
}

.calendar-panel__head {
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--line);
}

.calendar-panel__eyebrow {
  margin: 0;
  color: var(--muted);
  font-size: var(--text-2xs);
  font-weight: var(--weight-strong);
  letter-spacing: var(--label-tracking);
  text-transform: uppercase;
}

.calendar-panel__date {
  margin: var(--space-2) 0 0;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: var(--display-weight);
  letter-spacing: var(--tracking-display);
}

.calendar-panel__empty {
  margin: var(--space-5) 0 0;
  color: var(--muted);
  font-size: var(--text-sm);
  line-height: var(--leading-body);
  word-break: keep-all;
}

.event-link {
  display: inline-flex;
  align-items: center;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-1);
  color: var(--ink);
  font-size: var(--text-xs);
  text-decoration: none;
  background: var(--gray-0);
  transition: border-color 0.16s var(--ease-out);
}

.event-link:hover {
  border-color: var(--ink);
  color: var(--ink);
}

.event-link--external::after {
  margin-left: var(--space-1);
  content: "↗";
  font-size: var(--text-2xs);
}

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

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

  .calendar-panel {
    padding: 0 0 var(--space-6);
  }
}

/* ── 이달의 일정 목록 (우측 패널 하단) ────────── */

.schedule {
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: 1px solid var(--line);
}

.schedule-list {
  display: grid;
  gap: var(--space-1);
  margin: var(--space-3) 0 0;
  padding: 0;
  list-style: none;
  counter-reset: none;
}

.schedule-item__link {
  display: grid;
  gap: var(--space-1) var(--space-2);
  grid-template-columns: 1fr auto;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-2);
  color: inherit;
  text-decoration: none;
  transition: background 0.16s var(--ease-out);
}

.schedule-item__link:hover {
  background: var(--rose-50);
}

.schedule-item__when {
  grid-column: 1;
  color: var(--muted);
  font-size: var(--text-2xs);
  letter-spacing: 0.04em;
}

/* 종류는 색 점 하나로만 구분하고, 글자는 읽기용으로 작게 둡니다. */
.schedule-item__kind {
  display: inline-flex;
  gap: var(--space-1);
  grid-column: 2;
  grid-row: 1;
  align-items: center;
  color: var(--muted);
  font-size: var(--text-2xs);
  letter-spacing: 0.06em;
}

.schedule-item__kind::before {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  content: "";
}

.schedule-item--popup .schedule-item__kind::before { background: var(--popup); }
.schedule-item--showcase .schedule-item__kind::before { background: var(--showcase); }
.schedule-item--gathering .schedule-item__kind::before { background: var(--gathering); }
.schedule-item--festival .schedule-item__kind::before { background: var(--festival); }

.schedule-item__name {
  grid-column: 1 / -1;
  color: var(--ink);
  font-size: var(--text-sm);
  line-height: 1.5;
  word-break: keep-all;
}

/* 선택한 날짜에 걸치는 일정은 목록에서도 짚어 줍니다. */
/* ── 데스크톱: 캘린더 + 우측 패널 ─────────────── */

@media (min-width: 1000px) {
  .calendar-body {
    grid-template-columns: minmax(0, 1fr) 288px;
    align-items: start;
    gap: var(--space-6);
  }

  .calendar-panel {
    position: sticky;
    top: var(--space-11);
    max-height: calc(100vh - 100px);
    overflow-y: auto;
  }

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

@media (prefers-reduced-motion: reduce) {
  .day-cell,
  .month-bar__step,
  .event-link {
    transition: none;
  }
}

.calendar-page {
  background: var(--warm-50);
}

.month-bar {
  border-bottom-color: var(--line);
}

.month-bar__step {
  border-radius: var(--radius-pill);
  background: var(--surface-solid);
  box-shadow: var(--control-shadow);
}

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

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

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

.calendar-grid__week + .calendar-grid__week,
.day-cell + .day-cell {
  border-color: 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 .day-cell__number {
  border-radius: 50%;
  background: var(--rose-500);
}

.day-chip {
  border-color: var(--hairline-soft);
  border-radius: var(--radius-pill);
}

.calendar-panel {
  padding: 0 var(--space-5) var(--space-6);
  border: 1px solid var(--line);
  border-radius: var(--subpage-radius);
  background: var(--surface-solid);
  box-shadow: var(--control-shadow);
}

.event-link {
  border-color: var(--line);
  border-radius: var(--radius-pill);
  background: var(--surface-solid);
  box-shadow: var(--control-shadow);
}

.event-link:hover {
  border-color: rgb(var(--accent-rgb) / 38%);
  color: var(--rose-600);
  background: var(--rose-50);
}

@media (max-width: 639px) {
  .calendar-grid {
    border-radius: var(--radius);
  }

  .day-chip {
    border-radius: 50%;
  }

  .calendar-panel {
    padding-inline: var(--space-4);
  }
}

.schedule-item__tentative {
  margin-left: var(--space-1);
  color: var(--muted);
  font-size: var(--text-2xs);
  letter-spacing: 0.04em;
}

/* ── 우측 일정 목록: 선택일 항목만 펼침 ───────── */

.calendar-panel__selected {
  margin: var(--space-2) 0 0;
  color: var(--muted);
  font-size: var(--text-xs);
  letter-spacing: 0.02em;
}

.calendar-panel__none {
  color: var(--rose-500);
}

.schedule-item__link {
  grid-template-columns: 1fr auto;
  align-items: baseline;
}

/* 진행 중 / 이날 시작 표시 */
.schedule-item__state {
  grid-column: 1 / -1;
  margin-top: var(--space-1);
  color: var(--rose-500);
  font-size: var(--text-2xs);
  letter-spacing: 0.08em;
}

.schedule-item.is-open .schedule-item__link {
  padding-bottom: var(--space-1);
}

.schedule-item__detail {
  padding: 0 var(--space-3) var(--space-3);
}

.schedule-item__venue {
  margin: 0;
  color: var(--muted);
  font-size: var(--text-xs);
  letter-spacing: 0.01em;
  word-break: keep-all;
}

.schedule-item__description {
  margin: var(--space-2) 0 0;
  color: var(--muted);
  font-size: var(--text-sm);
  line-height: 1.72;
  word-break: keep-all;
}

.schedule-item__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: var(--space-3) 0 0;
}

/* 펼쳐진 항목은 카드처럼 묶어 목록에서 도드라지게 합니다. */
.schedule-item.is-open {
  border-radius: var(--radius-3);
  background: var(--rose-50);
}

.schedule-item.is-open .schedule-item__link:hover {
  background: transparent;
}

.schedule-item.is-open .schedule-item__name {
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: var(--weight-strong);
}

/* ── 패널 그룹(지금 열려 있어요 / 선택일) ─────── */

.panel-group + .panel-group {
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: 1px solid var(--line);
}

.panel-group__head {
  display: flex;
  gap: var(--space-2);
  align-items: baseline;
  padding: 0 var(--space-1);
}

.panel-group__title {
  margin: 0;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: var(--weight-strong);
  letter-spacing: -0.005em;
}

.panel-group__day {
  margin-left: var(--space-1);
  color: var(--muted);
  font-family: inherit;
  font-size: var(--text-2xs);
  font-weight: var(--weight-regular);
  letter-spacing: 0.06em;
}

.panel-group__count {
  color: var(--muted);
  font-size: var(--text-2xs);
  letter-spacing: 0.08em;
}

.panel-group .schedule-list {
  margin-top: var(--space-3);
}

/* 상시 목록은 참고용이라 한 줄씩 촘촘하게. 선택일 영역이 화면 밖으로 밀리지 않게 합니다. */
.panel-group--ongoing .schedule-item__link {
  gap: 0 var(--space-2);
  padding: var(--space-2) var(--space-3);
}

.panel-group--ongoing .schedule-item__name {
  display: -webkit-box;
  overflow: hidden;
  font-size: var(--text-sm);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}

.panel-group--ongoing .schedule-item__when,
.panel-group--ongoing .schedule-item__kind {
  font-size: var(--text-2xs);
}

#selected-day {
  scroll-margin-top: 16px;
}

/* ══ 캐릿 비교 후 개선 ══════════════════════════
 * 1) 달력은 '시작/마지막'만 찍는다 → 칩에 역할 라벨을 붙여 의미를 남긴다.
 * 2) 시작 = 채운 칩, 마지막 = 테두리 칩으로 시각 무게를 나눈다.
 * 3) 오늘/타월 칸을 배경 톤으로 구분한다.
 */

/* 끝나는 날은 채우지 않고 테두리로만 — 시작이 더 중요한 정보입니다. */
.day-chip.is-ending {
  border: 1px solid currentcolor;
  background: transparent;
  opacity: 0.72;
}

/* 타월은 투명도 대신 배경으로 눌러 글자 대비를 지킵니다. */
.day-cell.is-outside {
  opacity: 1;
  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.is-today:not(.is-selected) {
  background: rgb(var(--accent-rgb) / 5%);
}

/* ── 우측 날짜 헤더 강화 ──────────────────────── */

.panel-group__title {
  display: flex;
  gap: var(--space-2);
  align-items: baseline;
}

#selected-day .panel-group__head {
  padding-bottom: var(--space-1);
}

#selected-day .panel-group__title {
  font-size: var(--text-2xl);
  letter-spacing: var(--tracking-heading);
}

#selected-day .panel-group__day {
  margin-left: 0;
  font-size: var(--text-xs);
}

/* ── 목록 메타 한 줄 압축 ─────────────────────── */

.schedule-item__meta {
  display: block;
  margin: var(--space-1) 0 0;
  color: var(--muted);
  font-size: var(--text-xs);
  line-height: 1.6;
  word-break: keep-all;
}

@media (max-width: 639px) {
  .day-chip.is-ending {
    border-width: 1.5px;
    opacity: 1;
  }
}

/* 달력 아래 한 줄 설명 — 칩 모양의 의미를 글자 없이 전달하기 위한 최소 안내. */
.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(--rose-600);
  font-weight: var(--weight-strong);
}

/* 칸 폭이 86px 남짓이라 패널을 조금 줄여 이름이 더 보이게 합니다. */
@media (min-width: 1000px) {
  .calendar-body {
    grid-template-columns: minmax(0, 1fr) 272px;
  }
}