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

/* --------------------------------------------------------------------------
   기간(시작일 · 종료일) — 이벤트 글쓰기 칸 · 글 보기 머리 줄 (board bf.event, rb.theme/skin.lib.php bf_event_*)
   -------------------------------------------------------------------------- */
.ev-date-row .wf-label em { font-style: normal; font-weight: 400; color: var(--ink-400); }
.ev-date { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ev-date-f { display: block; }
.ev-date .frm_input { width: 170px; height: 44px; padding: 0 12px; font-family: var(--font-en); }
.ev-date-sep { color: var(--ink-400); font-weight: 600; }
.ev-date-help { flex: 1 1 100%; margin: 2px 0 0; font-size: 12.5px; line-height: 1.6; color: var(--ink-500); }
.ev-view-when {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--line);
  font-family: var(--font-en); font-size: 14px; font-weight: 600; color: var(--ink-700);
}
.ev-view-when .ico { width: 16px; height: 16px; color: var(--sky-t2); }
@media (max-width: 600px) {
  .ev-date .frm_input { width: calc(50vw - 40px); }
}

/* --------------------------------------------------------------------------
   이벤트 목록 — 달력 보기 (board bf.event ?view=cal · list.cal.php)
   보기 방식 단추(카드 | 달력)는 링크라 .view-mode button 모양을 a 에도 입힌다.
   한 주 = 날짜 칸 7개(바탕) 위에 막대 줄(grid)을 겹친다. 막대 줄 수는 --lanes(주마다 다름).
   -------------------------------------------------------------------------- */
.ev-view-mode a {
  display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px;
  border-radius: var(--r-xs);
  border: 1px solid var(--line); background: var(--surface); color: var(--ink-500);
}
.ev-view-mode a:hover { border-color: var(--sky-b2); color: var(--sky-t2); }
.ev-view-mode a.on { background: var(--sky-500); border-color: var(--sky-500); color: #fff; }
.ev-view-mode .ico { width: 16px; height: 16px; }

.ev-cal { --ev-num: 30px; --ev-bar: 24px; --ev-gap: 4px; }
.ev-cal-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 14px; }
.ev-cal-tit { margin: 0 4px; font-size: 20px; font-weight: 700; color: var(--ink-900); font-variant-numeric: tabular-nums; }
.ev-cal-tit em { font-style: normal; color: var(--sky-t2); }
.ev-cal-nav {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid var(--line); background: var(--surface); color: var(--ink-600);
}
.ev-cal-nav:hover { border-color: var(--sky-b2); color: var(--sky-t2); }
.ev-cal-nav .ico { width: 16px; height: 16px; }
.ev-cal-today {
  height: 30px; padding: 0 12px; display: inline-flex; align-items: center;
  border-radius: 15px; border: 1px solid var(--line); font-size: 13px; font-weight: 600; color: var(--ink-600);
}
.ev-cal-today:hover { border-color: var(--sky-b2); color: var(--sky-t2); }
.ev-cal-legend { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--ink-500); }
.ev-cal-legend i { width: 10px; height: 10px; border-radius: 3px; margin-left: 6px; }
.ev-cal-legend .ev-ready { background: var(--sky-500); }
.ev-cal-legend .ev-end { background: var(--ink-400); }

.ev-cal-grid { border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; background: var(--surface); }
.ev-cal-dow, .ev-cal-days, .ev-cal-bars { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.ev-cal-dow { border-bottom: 1px solid var(--line); background: var(--sky-50); }
.ev-cal-dow span { padding: 9px 0; text-align: center; font-size: 12.5px; font-weight: 600; color: var(--ink-500); }
.ev-cal-dow .sun { color: #EF6A63; }
.ev-cal-dow .sat { color: var(--sky-t1); }
.ev-cal-week { position: relative; }
.ev-cal-week + .ev-cal-week { border-top: 1px solid var(--line); }
.ev-cal-days { min-height: calc(var(--ev-num) + var(--lanes, 0) * (var(--ev-bar) + var(--ev-gap)) + 22px); min-height: max(96px, calc(var(--ev-num) + var(--lanes, 0) * (var(--ev-bar) + var(--ev-gap)) + 22px)); }
.ev-cal-day { position: relative; padding: 6px 8px; }
.ev-cal-day + .ev-cal-day { border-left: 1px solid var(--line); }
.ev-cal-num { display: inline-flex; align-items: center; justify-content: center; min-width: 24px; height: 24px; font-family: var(--font-en); font-size: 13px; font-weight: 600; color: var(--ink-700); }
.ev-cal-day.sun .ev-cal-num { color: #EF6A63; }
.ev-cal-day.sat .ev-cal-num { color: var(--sky-t1); }
.ev-cal-day.off { background: var(--sky-50); }
.ev-cal-day.off .ev-cal-num { opacity: .45; }
.ev-cal-day.today .ev-cal-num { border-radius: 12px; background: var(--sky-500); color: #fff; }
.ev-cal-more { position: absolute; right: 8px; bottom: 5px; font-size: 11.5px; font-weight: 700; color: var(--ink-500); }

.ev-cal-bars {
  position: absolute; left: 0; right: 0; top: var(--ev-num);
  grid-auto-rows: var(--ev-bar); row-gap: var(--ev-gap);
  pointer-events: none;
}
.ev-bar {
  pointer-events: auto;
  display: block; min-width: 0; margin: 0 1px; padding: 0 8px;
  line-height: var(--ev-bar); font-size: 12.5px; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  background: var(--mint); color: #fff;
}
.ev-bar.is-s { margin-left: 6px; border-top-left-radius: 6px; border-bottom-left-radius: 6px; }
.ev-bar.is-e { margin-right: 6px; border-top-right-radius: 6px; border-bottom-right-radius: 6px; }
.ev-bar.ev-ready { background: var(--sky-500); }
.ev-bar.ev-end { background: var(--ink-400); }
.ev-bar:hover { filter: brightness(1.08); text-decoration: underline; }
.ev-bar .bf-ico { width: 12px; height: 12px; margin-right: 3px; vertical-align: -1px; }

.ev-cal-list { margin: 18px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.ev-cal-list li { display: flex; align-items: center; gap: 10px; padding: 11px 4px; border-bottom: 1px solid var(--line); }
.ev-cal-when { flex: none; min-width: 96px; font-family: var(--font-en); font-size: 13px; font-weight: 600; color: var(--sky-t2); font-variant-numeric: tabular-nums; }
.ev-cal-list a { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14.5px; color: var(--ink-800); }
.ev-cal-list a:hover { color: var(--sky-t2); text-decoration: underline; }
.ev-cal-note { margin: 12px 0 0; font-size: 12.5px; color: var(--ink-500); }
.ev-cal-note a { color: var(--sky-t2); text-decoration: underline; }

@media (max-width: 768px) {
  .ev-cal { --ev-num: 26px; --ev-bar: 8px; --ev-gap: 3px; }
  .ev-cal-legend { flex-basis: 100%; margin-left: 0; }
  .ev-cal-day { padding: 4px 3px; text-align: center; }
  .ev-cal-num { font-size: 12px; min-width: 22px; height: 22px; }
  .ev-bar { padding: 0; font-size: 0; }            /* 좁으면 막대만 — 이름은 아래 목록 */
  .ev-bar .bf-ico { display: none; }
  .ev-bar.is-s { margin-left: 3px; } .ev-bar.is-e { margin-right: 3px; }
  .ev-cal-days { min-height: calc(var(--ev-num) + var(--lanes, 0) * (var(--ev-bar) + var(--ev-gap)) + 16px); min-height: max(58px, calc(var(--ev-num) + var(--lanes, 0) * (var(--ev-bar) + var(--ev-gap)) + 16px)); }
  .ev-cal-more { right: 3px; bottom: 2px; font-size: 10.5px; }
  .ev-view-mode { display: flex; }                 /* 보드DB 보기 단추와 달리 좁은 화면에서도 둔다 */
}