/* 라온 이벤트 게시판 · 이벤트 페이지 · 첫 화면 띠 (2026-10-20, 원본 tools/홈페이지/events/events.css) */
.ev-wrapper { display: flex; flex-direction: column; gap: 22px; max-width: 960px; }
.ev-empty { color: var(--text-muted); }

/* 게시판 카드 */
.ev-board { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.ev-board-card { display: flex; flex-direction: column; border-radius: 14px; overflow: hidden; border: 1px solid var(--border-brand); background: var(--bg-base); }
.ev-board-banner { position: relative; height: 112px; display: flex; align-items: center; justify-content: center; }
.ev-board-icon { font-size: 54px; filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .45)); }
.ev-board-banner .ev-pill { position: absolute; top: 12px; left: 12px; }
.ev-board-body { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 8px; flex: 1 1 auto; }
.ev-board-body h2 { margin: 0; font-size: 19px; font-weight: 800; color: var(--text-primary); }
.ev-board-when { margin: 0; font-size: 13px; color: var(--text-gold); font-weight: 700; }
.ev-board-sum { margin: 0; font-size: 13.5px; line-height: 1.7; color: var(--text-secondary); }
.ev-board-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 0; padding: 0; list-style: none; }
.ev-board-tags li { font-size: 12px; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--border-subtle); color: var(--text-secondary); }
.ev-board-foot { margin-top: auto; padding-top: 10px; display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.ev-board-btn { font-size: 13px; padding: 9px 16px; }
.ev-board-left { font-size: 12.5px; color: var(--emerald-400); font-weight: 700; }
.ev-board-wait { font-size: 13px; color: var(--text-muted); }
/* 게임 화면(흐림) 바탕 — 위는 맑게 두고 아래로 어둡게(본문 카드와 이어지게). 테마 그러데이션의 background 줄임형보다 이겨야 해서 태그를 붙여 한 단계 세게 */
article .ev-board-banner.has-shot { height: 150px; background-size: cover; background-position: center; }
article .ev-board-banner.has-shot::after { content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(8, 12, 16, 0) 35%, rgba(8, 12, 16, .55) 100%); }
.ev-board-banner .ev-pill { z-index: 1; }
div.ev-hero-banner.has-shot { background-size: cover; background-position: center; min-height: 150px; }
a.ev-strip-item.has-shot { background-size: cover; background-position: center; }
.ev-st-after, .ev-st-ended { opacity: .62; }
.ev-st-after .ev-board-banner, .ev-st-ended .ev-board-banner { filter: grayscale(.85); }

/* 상태 표 */
.ev-pill { display: inline-block; font-size: 12px; font-weight: 800; padding: 4px 10px; border-radius: 999px; letter-spacing: .02em; }
.ev-pill-live { background: var(--emerald-400); color: #06150e; }
.ev-pill-upcoming { background: var(--amber-400); color: #1a1205; }
.ev-pill-after, .ev-pill-ended { background: #3a3f46; color: #c9ced6; }

/* 테마 */
.ev-theme-halloween .ev-board-banner, .ev-theme-halloween.ev-hero-banner {
  background: radial-gradient(circle at 78% 30%, rgba(255, 170, 40, .35), transparent 45%),
              linear-gradient(135deg, #2a0f3d 0%, #4a1a5c 45%, #c2410c 100%); }
.ev-theme-promo .ev-board-banner { background: linear-gradient(135deg, #0f2a3d 0%, #155e75 55%, #f59e0b 130%); }
.ev-theme-christmas .ev-board-banner, .ev-theme-christmas.ev-hero-banner { background: linear-gradient(135deg, #0b3d2a 0%, #14532d 50%, #b91c1c 120%); }

/* 이벤트 페이지 */
.ev-hero-banner { border-radius: 16px; padding: 26px 26px 22px; display: flex; align-items: center; gap: 22px; border: 1px solid var(--border-brand); }
.ev-hero-banner .ev-hero-icon { font-size: 72px; line-height: 1; filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .5)); }
.ev-hero-banner h2 { margin: 6px 0 4px; font-size: 26px; font-weight: 900; color: #fff; }
.ev-hero-banner p { margin: 0; color: rgba(255, 255, 255, .86); font-size: 14px; line-height: 1.7; }
.ev-hero-when { font-weight: 700; color: #ffd27a !important; }
.ev-gate { border-radius: 12px; padding: 18px 20px; font-size: 15px; line-height: 1.8; border: 1px solid var(--border-subtle); background: var(--bg-base); color: var(--text-secondary); }
.ev-gate b { color: var(--text-primary); }
.ev-gate a { color: var(--amber-400); font-weight: 700; }
.ev-gate-live { border-color: rgba(52, 211, 153, .45); }
.ev-gate-wait { border-color: rgba(251, 191, 36, .5); text-align: center; padding: 30px 20px; }
.ev-gate-end { text-align: center; padding: 30px 20px; }
.ev-gate-left { display: inline-block; margin-top: 8px; font-size: 22px; font-weight: 900; color: var(--amber-400); }
.ev-gate-sub { font-size: 13px; color: var(--text-muted); }

.ev-card { border-radius: 14px; padding: 24px 26px; border: 1px solid var(--border-brand); background: var(--bg-elevated, var(--bg-base)); }
.ev-card p { color: var(--text-secondary); font-size: 14px; line-height: 1.75; margin: 0 0 10px; }
.ev-h2 { display: flex; align-items: center; gap: 10px; font-size: 19px; font-weight: 800; color: var(--text-primary); margin: 0 0 14px; }
.ev-num { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: var(--amber-500); color: #080c10; font-size: 15px; font-weight: 900; flex: 0 0 auto; }
.ev-note { font-size: 12.5px !important; color: var(--text-muted) !important; }
.ev-glance-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 22px; }
.ev-glance-grid div { display: flex; flex-direction: column; gap: 3px; }
.ev-glance-grid b { font-size: 12.5px; color: var(--text-gold); }
.ev-glance-grid span { font-size: 14px; color: var(--text-secondary); line-height: 1.6; }
.ev-glance-grid em { font-style: normal; color: var(--text-primary); font-weight: 700; }
.ev-card code, .ev-gate code { font-family: var(--font-sans); background: rgba(255, 255, 255, .06); border: 1px solid var(--border-subtle); border-radius: 6px; padding: 1px 6px; color: var(--text-primary); }
.ev-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.ev-tile { border-radius: 12px; padding: 16px 18px; border: 1px solid var(--border-subtle); background: var(--bg-base); }
.ev-tile h3 { margin: 0 0 8px; font-size: 15.5px; color: var(--text-primary); }
.ev-tile p { font-size: 13.5px; }
.ev-table-wrap { overflow-x: auto; margin-bottom: 10px; }
.ev-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.ev-table th, .ev-table td { padding: 9px 12px; border-bottom: 1px solid var(--border-subtle); text-align: left; color: var(--text-secondary); vertical-align: top; }
.ev-table tbody th { color: var(--text-gold); white-space: nowrap; width: 110px; font-weight: 700; }
.ev-table thead th { color: var(--text-muted); font-size: 12px; font-weight: 700; }
.ev-table td b { color: var(--text-primary); }
.ev-stamps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 12px; }
.ev-stamp { border-radius: 12px; padding: 14px; text-align: center; border: 1px dashed rgba(251, 191, 36, .55); background: rgba(251, 191, 36, .05); display: flex; flex-direction: column; gap: 6px; }
.ev-stamp b { font-size: 20px; font-weight: 900; color: var(--amber-400); }
.ev-stamp span { font-size: 13px; color: var(--text-secondary); line-height: 1.55; }
.ev-stamp-big { border-style: solid; background: rgba(251, 191, 36, .1); }
.ev-stamps.ev-stamps-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ev-keyart { margin: 0 0 18px; border-radius: 16px; overflow: hidden; border: 1px solid var(--border-brand); background: #0b1a2a; }
.ev-keyart img { display: block; width: 100%; height: auto; image-rendering: pixelated; }
.ev-keyart figcaption { padding: 8px 14px; font-size: 12.5px; color: var(--text-muted); background: var(--bg-base); border-top: 1px solid var(--border-subtle); }
.ev-list { margin: 0; padding-left: 18px; color: var(--text-secondary); font-size: 14px; line-height: 1.85; }

/* 첫 화면 띠 */
.ev-strip { border-bottom: 1px solid var(--border-subtle); background: rgba(0, 0, 0, .25); }
.ev-strip-row { display: flex; flex-wrap: wrap; gap: 10px; padding-top: 10px; padding-bottom: 10px; }
.ev-strip-item { display: flex; align-items: center; gap: 10px; flex: 1 1 320px; padding: 10px 16px; border-radius: 12px; text-decoration: none; color: #fff; border: 1px solid rgba(255, 255, 255, .12); }
.ev-strip-item.ev-theme-halloween { background: linear-gradient(110deg, #2a0f3d 0%, #4a1a5c 55%, #c2410c 120%); }
.ev-strip-item.ev-theme-christmas { background: linear-gradient(110deg, #0b3d2a 0%, #14532d 55%, #b91c1c 120%); }
.ev-strip-item > span:first-child { font-size: 22px; }
.ev-strip-item { flex-wrap: wrap; }
.ev-strip-item b { font-size: 15px; white-space: nowrap; }
.ev-strip-item span { font-size: 13px; color: rgba(255, 255, 255, .85); }
.ev-strip-item em { margin-left: auto; font-style: normal; font-size: 13px; font-weight: 700; color: #ffd27a; white-space: nowrap; }

@media (max-width: 760px) {
  .ev-board, .ev-grid-2, .ev-glance-grid { grid-template-columns: minmax(0, 1fr); }
  .ev-stamps, .ev-stamps.ev-stamps-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ev-card { padding: 20px 16px; }
  .ev-hero-banner { flex-direction: column; text-align: center; }
  .ev-strip-item em { margin-left: 0; }
}