@charset "utf-8";
/* ==========================================================================
   rb.BoardFactory — 부품: 이벤트 (.ev-state · .ev-list · .ev-card …)

   메인 이벤트(latest bf.event) · 이벤트 목록(board bf.event).
   쓰는 곳이 부품을 싣는다 — bf_part('event') (rb.theme/theme.lib.php).
   목업 css 에서 옮긴 규칙이다. 모양을 바꿀 때는 목업과 같이 고친다.
   ========================================================================== */

/* --------------------------------------------------------------------------
   7. 게시글 리스트 — main.css 에서
   -------------------------------------------------------------------------- */
.ev-state {
  flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; height: 22px; padding: 0 7px;
  border-radius: var(--r-xs);
  font-size: 11.5px; font-weight: 700;
  background: #E4F8F3; color: #0F9D86;
}
.ev-state.ev-ready { background: var(--sky-100); color: var(--sky-t3); }
.ev-state.ev-end { background: #EFF2F5; color: var(--ink-400); }
/* 목업 theme.css 는 .ev-state 전체를 덮어서, 가중치가 낮은 '예정'(.ev-ready)까지
   진행중과 같은 민트 바탕이 된다. 예정은 토큰 색이라 다크에서 이미 어두워지므로
   목업 주석대로 박힌 색을 쓰는 진행중 · 종료만 덮는다 */
:root[data-theme="dark"] .ev-state:not(.ev-ready) { background: #113630; }
:root[data-theme="dark"] .ev-state.ev-end { background: #28323B; }

/* --------------------------------------------------------------------------
   18. 이벤트 목록 · 캘린더 — sub.css 에서
   -------------------------------------------------------------------------- */
.ev-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px 20px; }
.ev-card { display: block; }
.ev-thumb {
  position: relative; display: block;
  aspect-ratio: 16 / 9;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--sky-100);
  transition: transform .3s, box-shadow .3s;
}
.ev-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .45s; }
/* 다크 — 배너 · 이벤트 사진은 그대로 두되 아주 살짝만 눌러 준다(목업 theme.css 2절) */
:root[data-theme="dark"] .ev-thumb img { filter: brightness(.92); }
.ev-card:hover .ev-thumb { transform: translateY(-4px); box-shadow: var(--sh-md); }
.ev-card:hover .ev-thumb img { transform: scale(1.05); }
.ev-thumb .ev-state {
  position: absolute; left: 10px; top: 10px; z-index: 2;
  min-width: 0; height: 24px; padding: 0 10px;
  font-size: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,.16);
}
.ev-ing { background: var(--mint); color: #fff; }
.ev-thumb .ev-ready { background: var(--sky-500); color: #fff; }
.ev-thumb .ev-end { background: var(--ink-400); color: #fff; }
.ev-info { display: block; padding-top: 13px; }
.ev-info strong {
  display: block;
  font-size: 16.5px; font-weight: 700; line-height: 1.42; color: var(--ink-900);
}
.ev-card:hover .ev-info strong { color: var(--sky-t3); }
.ev-desc {
  display: block; margin-top: 6px;
  font-size: 13.5px; line-height: 1.6; color: var(--ink-500);
}
.ev-period {
  display: flex; align-items: center; gap: 5px;
  margin-top: 10px;
  font-family: var(--font-en);
  font-size: 12.5px; color: var(--ink-400);
}
.ev-period .ico { width: 14px; height: 14px; }

/* --------------------------------------------------------------------------
   24. 반응형 — sub.css 에서
   -------------------------------------------------------------------------- */
@media (max-width: 1080px) {
  .ev-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  /* ----- 이벤트 · 캘린더 ----- */
  .ev-list { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .ev-info strong { font-size: 15.5px; }
}