/* ── /events/ page skin ────────────────────────────────────────── */
/* 디자인 출처: claude.ai/design "행사 목록 페이지 (에디토리얼).dc.html".
 * 카드 그리드 대신 3/4 카테고리 타일 + 텍스트 열 + 우측 상태 배지/찜
 * 원형 버튼으로 된 매거진식 행 목록이다.
 *
 * 이 파일은 templates/core/events/calendar.html도 함께 로드한다 — 두
 * 페이지가 `.events-page`/`.events-head`/`.layout`/`.filters` 등 같은
 * 셸 마크업을 공유하기 때문이다. 그 공유 클래스를 다시 꾸미는 규칙은
 * 모두 `.events-page`로 스코프해 다른 셸을 쓰는 페이지로 새지 않게 한다.
 */

/* ── page head: title left, 목록/달력 tabs centered ───────────── */
/* `1fr auto 1fr`로 짜서 탭은 시각적으로 중앙에 있으면서도 제목 칸이
   최소 너비를 확보해 320px에서 겹치지 않는다. */
  .events-head {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
  }
  .events-head h1 {
    margin: 0;
    font-size: 1.375rem;
    font-weight: 800;
  }
  .events-tabs {
    display: flex;
    gap: 1.5rem;
  }
  /* 채운 필 대신 밑줄로 활성 상태를 표시한다 — 내비게이션 칩이 아니라
     섹션 탭이라서다. */
  .events-tabs a {
    position: relative;
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0.25rem 0.125rem 0.5rem;
    text-decoration: none;
    color: var(--muted);
    font-size: 0.94rem;
    font-weight: 600;
    transition: color 0.15s ease;
  }
  .events-tabs a:hover {
    color: var(--brand-ink);
  }
  .events-tabs a.active {
    color: var(--text);
    font-weight: 700;
  }
  .events-tabs a.active::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0.375rem;
    height: 2px;
    border-radius: 2px;
    background: var(--brand);
  }

/* ── search row ───────────────────────────────────────────────── */
/* 다른 페이지도 쓰는 공용 `.search`를 덮어쓰지 않고 이 페이지 전용
   클래스를 둔다 — 44px 필드에 ⌕ 아이콘, brand 채움 버튼이라 다른
   페이지엔 영향을 주면 안 된다. */
  .events-search {
    gap: 0.5rem;
    margin: 0 0 1rem;
  }
  .events-search-field {
    position: relative;
    display: flex;
    align-items: center;
    flex: 1;
    min-width: 0;
  }
  .events-search-icon {
    position: absolute;
    left: 0.9375rem;
    color: var(--muted);
    font-size: 0.95rem;
    line-height: 1;
    pointer-events: none;
  }
  .events-search input {
    height: 44px;
    padding: 0 0.9375rem 0 2.25rem;
    border: 1px solid var(--border-soft);
    border-radius: 10px;
    font-size: var(--fs-md);
  }
  .events-search button {
    height: 44px;
    padding: 0 1.25rem;
    border: 1px solid var(--brand);
    border-radius: 10px;
    background: var(--brand);
    color: #fff;
    font-size: var(--fs-md);
    font-weight: 700;
  }
  .events-search button:hover {
    filter: brightness(0.95);
  }

/* ── quick chips ──────────────────────────────────────────────── */
/* .quick-row로 스코프해 다른 곳의 공용 `.chip` 모습은 그대로 둔다.
   여기서는 활성 상태를 더 부드러운 brand-soft/brand-ink 조합으로 쓴다. */
  .quick-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4375rem;
    margin-bottom: 1.25rem;
  }
  .quick-row .chip {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    border: 1px solid var(--border-soft);
    background: var(--surface);
    color: var(--text);
    font-size: 0.78rem;
    padding: 0.375rem 0.8125rem;
    text-decoration: none;
  }
  .quick-row .chip.active {
    background: var(--brand-soft);
    border-color: var(--brand);
    color: var(--brand-ink);
    font-weight: 600;
  }

/* ── two-column layout ────────────────────────────────────────── */
/* .layout은 달력 페이지도 같이 쓰지만 두 페이지 모양이 동일해
   .events-page 접두사 없이 그대로 둔다. */
  .layout {
    display: grid;
    grid-template-columns: minmax(180px, 232px) minmax(0, 1fr);
    gap: 1.75rem;
    align-items: start;
  }
  /* 공용 .panel 박스를 이 두 열에서만 평평하게 만든다 — padding만 지우면
     원래 박스 스타일이 일부 남으므로 4개 속성을 전부 다시 선언한다. */
  .layout .panel {
    background: none;
    border: none;
    box-shadow: none;
    padding: 0;
  }
  .filters {
    align-self: start;
    position: sticky;
    top: calc(var(--site-header-h) + 1rem);
  }

/* ── sidebar filter sections (list page only) ─────────────────── */
/* `:first-child` 대신 `.filter-group + .filter-group`로 구분선을 준다 —
   폼의 첫 자식이 조건부 숨김 `q` 입력일 수 있어 first-child는 검색어가
   있을 때 잘못된 요소를 가리킨다. */
  .events-page .filter-group {
    margin: 0;
    padding: 0;
    border: none;
    background: none;
    min-width: 0;
  }
  .events-page .filter-group + .filter-group,
  .events-page .filter-actions {
    margin-top: 0.875rem;
    padding-top: 0.9375rem;
    border-top: 1px solid var(--line);
  }
  .events-page .filter-group h2,
  .events-page .filter-group legend {
    margin: 0 0 0.5625rem;
    padding: 0;
    font-size: 0.69rem;
    font-weight: 800;
    letter-spacing: 0.07em;
    color: var(--muted);
  }
  .events-page .filter-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 0;
  }
  .events-page .filter-check {
    display: flex;
    gap: 0.5625rem;
    align-items: center;
    padding: 0.3125rem 0;
    color: var(--muted);
    font-size: 0.84rem;
  }
  .events-page .filter-check input {
    flex: none;
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: var(--brand);
  }
  /* 체크된 행은 진하고 굵게 표시한다. :has()를 지원 안 하는 브라우저는
     이 효과만 빠지고 체크박스 자체는 정상 표시된다. */
  .events-page .filter-check:has(input:checked) {
    color: var(--text);
    font-weight: 600;
  }
  .events-page .filter-actions {
    display: flex;
    gap: 0.5rem;
  }
  .events-page .results-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.625rem;
    margin-bottom: 0.75rem;
  }
  /* `.events-page` 접두사가 없으면 components/cards.css의
     `.panel h2 { font-size: 1rem }`(특이도 (0,1,1))가 이겨 제목이
     16px로 고정된다. */
  .events-page .results-title {
    margin: 0;
    font-size: 0.94rem;
    font-weight: 700;
  }
  .results-count {
    color: var(--brand-ink);
  }
/* 정렬 패널은 절대 위치라 열려도 아래 행 목록이 밀리지 않는다. */
  .results-sort {
    position: relative;
    flex: none;
  }
  .results-sort-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.3125rem;
    min-height: 44px;
    padding: 0 0.125rem;
    font-size: 0.78rem;
    color: var(--muted);
    cursor: pointer;
    list-style: none;          /* Firefox 기본 마커 제거 */
    white-space: nowrap;
  }
  /* Safari/Chrome는 이게 없으면 기본 삼각형을 라벨 반대쪽에 그린다. */
  .results-sort-toggle::-webkit-details-marker {
    display: none;
  }
  .results-sort-toggle span {
    color: var(--text);
    font-weight: 600;
  }
  .results-sort-toggle::after {
    content: "▾";
    font-size: 0.66rem;
    color: var(--muted);
    transition: transform 0.15s ease;
  }
  .results-sort[open] .results-sort-toggle::after {
    transform: rotate(180deg);
  }
  .results-sort-toggle:focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: 2px;
    border-radius: 4px;
  }
  .results-sort-menu {
    position: absolute;
    right: 0;
    top: calc(100% - 0.375rem);
    z-index: 30;
    min-width: 9.5rem;
    margin: 0;
    padding: 0.3125rem;
    list-style: none;
    background: var(--surface);
    border: 1px solid var(--border-soft);
    border-radius: 10px;
    box-shadow: var(--shadow-dropdown);
  }
  .results-sort-menu a {
    display: flex;
    align-items: center;
    min-height: 40px;
    padding: 0 0.6875rem;
    border-radius: 7px;
    font-size: 0.8rem;
    color: var(--text);
    text-decoration: none;
    white-space: nowrap;
  }
  .results-sort-menu a:hover {
    background: var(--bg-soft);
  }
  /* 상태는 aria-current 속성 하나로만 관리한다 — 별도 클래스와
     동기화할 필요가 없다. */
  .results-sort-menu a[aria-current="true"] {
    background: var(--brand-soft);
    color: var(--brand-ink);
    font-weight: 700;
  }
  @media (prefers-reduced-motion: reduce) {
    .results-sort-toggle::after {
      transition: none;
    }
  }

/* ── editorial event rows ─────────────────────────────────────── */
/* 포스터 타일 대신 날짜 열 | 정보 열 | 행동 열의 3열 구조다. 카테고리·
   상태 색은 행 자체의 커스텀 속성으로 발행해 라벨·D-day 배지가 같은
   값을 셀렉터 반복 없이 공유한다. */
  .event-rows {
    display: flex;
    flex-direction: column;
  }
  .event-index-row {
    --row-cat-ink: var(--muted);
    --row-tone-ink: var(--muted);
    --row-tone-soft: var(--muted-soft);
    display: grid;
    grid-template-columns: 4.625rem minmax(0, 1fr) auto;
    gap: 1rem;
    align-items: start;
    padding: 1.125rem 0.125rem;
    border-bottom: 1px solid var(--line);
  }
  .event-index-row[data-cat="popup_store"] {
    --row-cat-ink: var(--cat-popup_store-ink);
  }
  .event-index-row[data-cat="collaboration_cafe"] {
    --row-cat-ink: var(--cat-collaboration_cafe-ink);
  }
  .event-index-row[data-cat="theater_bonus"] {
    --row-cat-ink: var(--cat-theater_bonus-ink);
  }
  .event-index-row[data-cat="goods_reservation"] {
    --row-cat-ink: var(--cat-goods_reservation-ink);
  }
  .event-index-row[data-cat="exhibition"] {
    --row-cat-ink: var(--cat-exhibition-ink);
  }
  .event-index-row[data-cat="fan_meeting"] {
    --row-cat-ink: var(--cat-fan_meeting-ink);
  }
  .event-index-row[data-tone="ongoing"] {
    --row-tone-ink: var(--mint-ink);
    --row-tone-soft: var(--mint-soft);
  }
  .event-index-row[data-tone="closing_soon"] {
    --row-tone-ink: var(--amber-ink);
    --row-tone-soft: var(--amber-soft);
  }
  .event-index-row[data-tone="upcoming"] {
    --row-tone-ink: var(--up-ink);
    --row-tone-soft: var(--up-soft);
  }
  .event-index-row[data-tone="ended"] {
    --row-tone-ink: var(--end-ink);
    --row-tone-soft: var(--end-soft);
  }
  /* status.js가 .event-index-row 자체에 .status-inline-error를 붙인다.
     이 규칙이 없으면 오류가 3번째(auto) 열에만 갇혀 행 전체를 못 덮는다. */
  .event-index-row > .status-inline-error {
    grid-column: 1 / -1;
  }

/* 날짜 열: month/day 큰 표기 + 종료일이 다를 때만 짧은 기간 보조 표기.
   `_archive_results_visits.html`의 record-row-date 패턴을 재사용한다. */
  .event-index-date {
    text-align: center;
  }
  .event-index-date-value {
    display: block;
  }
  .event-index-month {
    display: block;
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--muted);
  }
  .event-index-day {
    display: block;
    font-size: 1.3rem;
    font-weight: 800;
    color: var(--text);
    line-height: 1.15;
  }
  .event-index-date-end {
    display: block;
    margin-top: 0.125rem;
    font-size: 0.66rem;
    color: var(--muted);
  }
  .event-index-date-empty {
    display: block;
    padding-top: 0.375rem;
    font-size: 0.72rem;
    color: var(--muted);
  }

  .event-index-main {
    min-width: 0;
  }
  .event-index-work {
    margin: 0 0 0.1875rem;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--row-cat-ink);
    word-break: keep-all;
  }
  .events-page .event-index-title {
    margin: 0 0 0.3125rem;
    font-size: 1.09rem;
    font-weight: 700;
    line-height: 1.35;
    word-break: keep-all;
    overflow-wrap: anywhere;
  }
  .event-index-title a {
    color: inherit;
    text-decoration: none;
  }
  .event-index-title a:focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: 2px;
    border-radius: 4px;
  }
  .event-index-meta {
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4375rem;
    font-size: 0.78rem;
    color: var(--muted);
  }
  .event-index-cat {
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--row-cat-ink);
  }
  .event-index-dot {
    flex: none;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: var(--muted);
  }
  .event-index-place {
    overflow-wrap: anywhere;
  }

  .event-index-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.625rem;
  }
  .event-index-dday {
    border-radius: 999px;
    padding: 0.25rem 0.6875rem;
    font-size: 0.75rem;
    font-weight: 700;
    white-space: nowrap;
    background: var(--row-tone-soft);
    color: var(--row-tone-ink);
  }
  /* 찜 버튼은 행 끝 열의 테두리 원형이다 — 포스터 오버레이가 아니라서
     반투명 검정 대신 테마 토큰을 그대로 쓴다. */
  .event-index-interest {
    flex: none;
    width: 30px;
    height: 30px;
    min-height: 0;
    padding: 0;
    gap: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid var(--border-soft);
    background: var(--surface);
    color: var(--muted);
    font-size: 0.875rem;
    line-height: 1;
  }
  .event-index-interest:hover {
    border-color: var(--pink-ink);
    background: var(--pink-soft);
    color: var(--pink-ink);
  }
  .event-index-interest.active {
    border-color: var(--pink-border);
    background: var(--pink-soft);
    color: var(--pink-ink);
    font-weight: 700;
  }
  /* 공용 .is-loading 스피너는 앞에 텍스트가 있다고 가정한다. 이 버튼은
     아이콘만 있어 그대로 두면 나란히 표시돼 30px 원을 벗어난다. */
  .event-index-interest.is-loading [data-interest-glyph] {
    display: none;
  }
  .event-index-interest.is-loading::after {
    margin-left: 0;
  }

/* ── filter disclosure (tablet and below) ─────────────────────── */
/* 목록·달력 두 페이지가 같은 event_list.js 핸들러로 .filter-toggle/
   .filter-body를 여닫는 단일 접힘 지점이다 — 여기 고치면 두 페이지 다
   확인해야 한다. */
  .filter-toggle {
    display: none;
  }
  @media (max-width: 56.25rem) {
    .layout {
      grid-template-columns: 1fr;
      gap: 1rem;
    }
    .filters {
      position: static;
    }
    .filter-toggle {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 0.375rem;
      width: 100%;
      min-height: 44px;
      border: 1px solid var(--border-soft);
      background: var(--surface);
      color: var(--text);
      border-radius: 10px;
      padding: 0.625rem 0.75rem;
      font-size: var(--fs-md);
      font-weight: 600;
      cursor: pointer;
    }
    .filter-body {
      display: none;
    }
    .filters.open .filter-body {
      display: block;
      padding-top: 0.875rem;
    }
  }

  @media (max-width: 45rem) {
    .page {
      padding: 1rem var(--page-pad-x) 3rem;
    }
    .events-head {
      margin-bottom: 0.75rem;
    }
    .events-head h1 {
      font-size: 1.25rem;
    }
    .events-tabs {
      gap: 1.25rem;
    }
    .events-tabs a {
      font-size: 0.85rem;
    }
    .events-search input {
      height: 40px;
      font-size: var(--fs-sm);
    }
    .events-search button {
      height: 40px;
      padding: 0 1rem;
    }
    .quick-row {
      gap: 0.375rem;
      margin-bottom: 0.875rem;
    }
    .quick-row .chip {
      font-size: 0.72rem;
      padding: 0.3125rem 0.6875rem;
      white-space: nowrap;
    }
    /* 결과 제목은 아래 행 제목보다 작아야 한다 — 데스크톱 크기를 그대로
       쓰면 모바일 행 제목보다 커져 위계가 뒤집힌다. */
    .events-page .results-title {
      font-size: 0.78rem;
      font-weight: 600;
      color: var(--muted);
    }
    .results-count {
      font-weight: 700;
    }
    .results-sort {
      font-size: 0.72rem;
    }
    /* 모바일은 3열 그리드를 접어 세로 한 흐름으로 만든다. 날짜 열이
       소스에서 이미 정보 열보다 앞에 있으므로 `order:`를 쓰지 않고도
       제목 위 가로 eyebrow로 자연스럽게 올라간다(WCAG 1.3.2). */
    .event-index-row {
      grid-template-columns: 1fr;
      gap: 0.25rem;
      padding: 1rem 0;
    }
    .event-index-date {
      text-align: left;
      display: flex;
      align-items: baseline;
      flex-wrap: wrap;
      gap: 0.3125rem;
    }
    .event-index-date-value {
      display: inline-flex;
      align-items: baseline;
      gap: 0.1875rem;
    }
    .event-index-month,
    .event-index-day {
      display: inline;
      font-size: 0.72rem;
      font-weight: 700;
      color: var(--muted);
    }
    .event-index-date-end {
      display: inline;
      margin-top: 0;
      font-size: 0.66rem;
    }
    .event-index-date-empty {
      display: inline;
      padding-top: 0;
      font-size: 0.72rem;
    }
    .event-index-work {
      font-size: 0.66rem;
    }
    .events-page .event-index-title {
      font-size: 0.9rem;
      margin-bottom: 0.25rem;
    }
    .event-index-meta {
      gap: 0.375rem;
      font-size: 0.72rem;
    }
    .event-index-actions {
      flex-direction: row;
      align-items: center;
      justify-content: flex-start;
      gap: 0.5rem;
      margin-top: 0.125rem;
    }
    .event-index-dday {
      font-size: 0.66rem;
      padding: 0.1875rem 0.5rem;
    }
    .event-index-interest {
      width: 26px;
      height: 26px;
      font-size: 0.75rem;
    }
  }