/* =====================================================
   CATSBE Events — Design System
   ev- prefix namespace
   Builds on Bootstrap 5 + catsbe-common.css variables
   ===================================================== */

/* ── Event-specific CSS Variables ── */
:root {
  --ev-cherry:       #FF6B8A;
  --ev-cherry-dark:  #E85575;
  --ev-cherry-light: #FF8FA8;
  --ev-cherry-bg:    rgba(255, 107, 138, 0.08);
  --ev-cherry-border:rgba(255, 107, 138, 0.30);

  --ev-gold:         #C5A55A;
  --ev-gold-dark:    #AD8F42;
  --ev-gold-light:   #D4B96E;
  --ev-gold-bg:      rgba(197, 165, 90, 0.08);
  --ev-gold-border:  rgba(197, 165, 90, 0.30);

  --ev-teal:         #2E9E8E;
  --ev-teal-bg:      rgba(46, 158, 142, 0.08);
  --ev-purple:       #7C5CBF;
  --ev-purple-bg:    rgba(124, 92, 191, 0.08);
  --ev-blue:         #3B82F6;
  --ev-blue-bg:      rgba(59, 130, 246, 0.08);
  --ev-orange:       #E87C3E;
  --ev-orange-bg:    rgba(232, 124, 62, 0.08);
  --ev-green:        #2E7A44;
  --ev-green-bg:     rgba(46, 122, 68, 0.08);

  --ev-dark:         #1a1a2e;
  --ev-bg:           #faf8f5;
  --ev-surface:      #FFFFFF;
  --ev-border:       #E8E2D8;
  --ev-radius:       12px;
  --ev-radius-sm:    8px;
  --ev-radius-pill:  24px;
  --ev-shadow:       0 1px 4px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
  --ev-shadow-hover: 0 6px 20px rgba(0, 0, 0, 0.10);
  --ev-transition:   0.2s ease;
}


/* =====================================================
   1. LAYOUT
   ===================================================== */

/* ── 알림 메시지 ── */
.ev-messages { margin-bottom: 16px; }
.ev-alert {
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 13px;
  margin-bottom: 8px;
  background: var(--cb-surface-alt, #F8F5F0);
  border: 1px solid var(--cb-border, #E8E2D8);
  color: var(--cb-text-sub, #4A433B);
}
.ev-alert-success { background: rgba(46,122,68,0.08); border-color: rgba(46,122,68,0.2); color: #2E7A44; }
.ev-alert-error, .ev-alert-danger { background: rgba(168,56,56,0.08); border-color: rgba(168,56,56,0.2); color: #A83838; }
.ev-alert-warning { background: rgba(212,160,32,0.08); border-color: rgba(212,160,32,0.2); color: #8A6A10; }
.ev-alert-info { background: rgba(46,106,150,0.08); border-color: rgba(46,106,150,0.2); color: #2E6A96; }

.ev-wrap {
  max-width: 1100px;
  margin: 0 auto;
  padding: 16px 12px 40px;
}

.ev-main {
  min-width: 0;
}

.ev-sidebar {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Single column on mobile, two-column at 768px+ */
@media (min-width: 768px) {
  .ev-wrap {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 24px;
    padding: 24px 20px 60px;
  }
}

@media (min-width: 1024px) {
  .ev-wrap {
    gap: 32px;
    padding: 32px 24px 80px;
  }
}

/* Full-width variant (no sidebar) */
.ev-wrap--full {
  display: block;
}

@media (min-width: 768px) {
  .ev-wrap--full {
    display: block;
    max-width: 1100px;
  }
}


/* ── Event list header ── */
.ev-list-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 28px 0 16px;
  padding: 0 2px;
}

.ev-list-title {
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.3px;
  color: var(--cb-text, #1A1714);
  margin: 0;
}

.ev-list-btn {
  font-size: 0.88rem;
  font-weight: 700;
  color: #fff;
  text-decoration: none;
  padding: 8px 20px;
  background: var(--ev-cherry, #FF6B8A);
  border: none;
  border-radius: var(--ev-radius-pill);
  transition: all var(--ev-transition);
  box-shadow: 0 2px 8px rgba(255, 107, 138, 0.3);
}

.ev-list-btn:hover {
  color: #fff;
  background: var(--ev-cherry-dark, #e8567a);
  box-shadow: 0 3px 12px rgba(255, 107, 138, 0.45);
  text-decoration: none;
  transform: translateY(-1px);
}

@media (min-width: 768px) {
  .ev-list-header {
    margin: 32px 0 20px;
  }
  .ev-list-title {
    font-size: 1.4rem;
  }
}


/* =====================================================
   2. CARD
   ===================================================== */

.ev-card {
  position: relative;
  display: block;
  background: var(--ev-surface);
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: var(--ev-radius);
  overflow: hidden;
  box-shadow: var(--ev-shadow);
  text-decoration: none;
  color: inherit;
  transition: transform var(--ev-transition), box-shadow var(--ev-transition);
}

.ev-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--ev-shadow-hover);
  color: inherit;
  text-decoration: none;
}

/* Card image area */
.ev-card-img {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--ev-bg);
}

.ev-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Gradient overlay on card image */
.ev-card-img::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 60%;
  background: linear-gradient(to top, rgba(26, 26, 46, 0.55) 0%, transparent 100%);
  pointer-events: none;
}

/* Overlay text positioned on image */
.ev-card-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 12px 14px;
  z-index: 1;
  color: #fff;
}

.ev-card-overlay-title {
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: 2px;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}

.ev-card-overlay-sub {
  font-size: 0.78rem;
  opacity: 0.9;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

/* Card body */
.ev-card-body {
  padding: 12px 14px 14px;
}

.ev-card-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--cb-text, #1A1714);
  line-height: 1.35;
  margin-bottom: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.ev-card-pts-badge {
  display: inline-block;
  font-family: 'DM Mono', monospace;
  font-size: 0.72rem; font-weight: 700;
  color: #fff; background: #E05030;
  padding: 1px 6px; border-radius: 3px;
  margin-right: 4px; vertical-align: middle;
  letter-spacing: 0.3px;
}
.ev-card-desc {
  font-size: 0.82rem;
  color: var(--cb-text-muted, #7A7268);
  line-height: 1.45;
  margin-bottom: 8px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.ev-card-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.75rem;
  color: var(--cb-text-muted, #7A7268);
}

.ev-card-meta i {
  font-size: 0.7rem;
  opacity: 0.7;
}

/* Card grid layouts */
.ev-card-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

@media (min-width: 576px) {
  .ev-card-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .ev-card-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
  }
}

/* Horizontal card variant */
.ev-card--row {
  display: flex;
  height: 110px;
}

.ev-card--row:hover {
  transform: none;
  border-color: var(--ev-cherry);
}

.ev-card--row .ev-card-img {
  width: 110px;
  min-width: 110px;
  height: 110px;
  aspect-ratio: auto;
}

.ev-card--row .ev-card-img::after {
  display: none;
}

.ev-card--row .ev-card-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  padding: 10px 14px;
}


/* ── Event card: num badge ── */
.ev-badge-num {
  background: rgba(232,99,10,0.85);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.5px;
  padding: 3px 8px;
  border-radius: 4px;
}
.ev-badge-hot {
  background: var(--ev-cherry);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 4px;
  animation: ev-pulse 1.5s infinite;
}
@keyframes ev-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

/* ── Event card: fallback backgrounds per event_type ── */
.ev-card-bg-attendance .ev-card-placeholder { background: linear-gradient(135deg, #1A3A2A 0%, #2A5A3A 100%); }
.ev-card-bg-first_action .ev-card-placeholder { background: linear-gradient(135deg, #2A1A3A 0%, #4A2A5A 100%); }
.ev-card-bg-leaderboard .ev-card-placeholder { background: linear-gradient(135deg, #3A2A00 0%, #5A4A10 100%); }
.ev-card-bg-challenge .ev-card-placeholder { background: linear-gradient(135deg, #1A2A1A 0%, #2A4A2A 100%); }
.ev-card-bg-bug_report .ev-card-placeholder { background: linear-gradient(135deg, #3A0A0A 0%, #5A1A1A 100%); }
.ev-card-bg-referral .ev-card-placeholder { background: linear-gradient(135deg, #0A1A3A 0%, #1A2A5A 100%); }
.ev-card-bg-sns_share .ev-card-placeholder { background: linear-gradient(135deg, #1A2A3A 0%, #2A3A5A 100%); }
.ev-card-bg-auction_promo .ev-card-placeholder { background: linear-gradient(135deg, #2A1A00 0%, #4A3A10 100%); }
.ev-card-bg-signup_reward .ev-card-placeholder { background: linear-gradient(135deg, #2A0A1A 0%, #4A1A2A 100%); }
.ev-card-bg-lucky_draw .ev-card-placeholder { background: linear-gradient(135deg, #1A0A3A 0%, #3A1A5A 100%); }
.ev-card-bg-raffle .ev-card-placeholder { background: linear-gradient(135deg, #1A0A3A 0%, #3A1A5A 100%); }

.ev-card-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #1A1A2E 0%, #16213E 100%);
}
.ev-card-placeholder i {
  font-size: 2.5rem;
  color: rgba(255,255,255,0.35);
}


/* =====================================================
   3. HERO BANNER (가로 레이아웃)
   ===================================================== */

.ev-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  border-radius: var(--ev-radius);
  overflow: hidden;
  background: var(--ev-dark);
  margin-bottom: 20px;
  text-decoration: none;
  color: inherit;
  transition: box-shadow var(--ev-transition);
}

.ev-hero:hover {
  box-shadow: var(--ev-shadow-hover);
  color: inherit;
  text-decoration: none;
}

/* Hero image area — no dark overlay */
.ev-hero-visual {
  position: relative;
  width: 100%;
  aspect-ratio: 2.2 / 1;
  overflow: hidden;
  flex-shrink: 0;
  max-height: 200px;
}

.ev-hero-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Very subtle tint on image */
.ev-hero-visual::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(26, 26, 46, 0.10) 0%,
    rgba(255, 107, 138, 0.05) 50%,
    rgba(197, 165, 90, 0.03) 100%
  );
  pointer-events: none;
}

/* Legacy: disable old full-area overlay */
.ev-hero::after {
  display: none;
}

/* Info section (text panel) */
.ev-hero-info {
  padding: 20px 18px;
  color: #fff;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* Legacy: keep for backward compat */
.ev-hero-content {
  position: relative;
  z-index: 1;
  padding: 28px 20px;
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 200px;
}

.ev-hero-title {
  font-family: var(--cb-font-serif, 'Cormorant Garamond', Georgia, serif);
  font-size: 1.3rem;
  font-weight: 600;
  line-height: 1.3;
  margin-bottom: 4px;
  letter-spacing: 0.3px;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}

.ev-hero-sub {
  font-size: 0.82rem;
  opacity: 0.85;
  line-height: 1.45;
  max-width: 480px;
  margin-bottom: 2px;
}

.ev-hero-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
}

.ev-hero-meta {
  display: flex;
  gap: 14px;
  font-size: 0.8rem;
  opacity: 0.85;
  margin-top: 4px;
}

/* Desktop: horizontal layout (image left, info right) */
@media (min-width: 768px) {
  .ev-hero {
    flex-direction: row;
    max-height: 240px;
    margin-bottom: 28px;
  }

  .ev-hero-visual {
    flex: 0 0 50%;
    aspect-ratio: auto;
    max-height: 240px;
  }

  .ev-hero-info {
    flex: 1;
    padding: 24px 22px;
    justify-content: center;
  }

  .ev-hero-title {
    font-size: 1.6rem;
  }

  .ev-hero-sub {
    font-size: 0.9rem;
  }
}

@media (min-width: 1024px) {
  .ev-hero {
    max-height: 280px;
  }

  .ev-hero-visual {
    flex: 0 0 55%;
    max-height: 280px;
  }

  .ev-hero-info {
    padding: 32px 28px;
  }

  .ev-hero-title {
    font-size: 1.85rem;
  }
}


/* =====================================================
   4. BADGES
   ===================================================== */

.ev-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 4px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.3px;
  line-height: 1.4;
  white-space: nowrap;
  vertical-align: middle;
}

.ev-badge + .ev-badge {
  margin-left: 4px;
}

/* -- Color variants -- */
.ev-badge-cherry {
  background: var(--ev-cherry);
  color: #fff;
}

.ev-badge-gold {
  background: var(--ev-gold);
  color: #fff;
}

.ev-badge-teal {
  background: var(--ev-teal);
  color: #fff;
}

.ev-badge-purple {
  background: var(--ev-purple);
  color: #fff;
}

.ev-badge-blue {
  background: var(--ev-blue);
  color: #fff;
}

.ev-badge-orange {
  background: var(--ev-orange);
  color: #fff;
}

.ev-badge-green {
  background: var(--ev-green);
  color: #fff;
}

/* -- Status variants -- */
.ev-badge-success {
  background: var(--ev-green-bg);
  color: var(--ev-green);
  border: 1px solid rgba(46, 122, 68, 0.20);
}

.ev-badge-gray {
  background: #F0EBE4;
  color: var(--cb-text-muted, #7A7268);
}

.ev-badge-dark {
  background: var(--ev-dark);
  color: #fff;
}

/* Soft / outline variants */
.ev-badge-cherry-soft {
  background: var(--ev-cherry-bg);
  color: var(--ev-cherry-dark);
  border: 1px solid var(--ev-cherry-border);
}

.ev-badge-gold-soft {
  background: var(--ev-gold-bg);
  color: var(--ev-gold-dark);
  border: 1px solid var(--ev-gold-border);
}

/* Pill shape modifier */
.ev-badge--pill {
  border-radius: var(--ev-radius-pill);
  padding: 3px 12px;
}

/* Small modifier */
.ev-badge--sm {
  font-size: 0.65rem;
  padding: 2px 7px;
}

/* Large modifier */
.ev-badge--lg {
  font-size: 0.82rem;
  padding: 5px 14px;
}


/* =====================================================
   5. TIMER (Countdown)
   ===================================================== */

.ev-timer {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 10px 16px;
  background: var(--ev-dark);
  border-radius: var(--ev-radius);
  color: #fff;
}

.ev-timer-seg {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 42px;
}

.ev-timer-num {
  font-family: var(--cb-font-mono, 'DM Mono', monospace);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 1px;
}

.ev-timer-label {
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  opacity: 0.6;
  margin-top: 2px;
}

.ev-timer-sep {
  font-family: var(--cb-font-mono, 'DM Mono', monospace);
  font-size: 1.3rem;
  font-weight: 700;
  opacity: 0.4;
  align-self: flex-start;
  padding-top: 2px;
}

/* Cherry accent variant */
.ev-timer--cherry {
  background: linear-gradient(135deg, var(--ev-cherry-dark) 0%, var(--ev-cherry) 100%);
}

/* Gold accent variant */
.ev-timer--gold {
  background: linear-gradient(135deg, var(--ev-gold-dark) 0%, var(--ev-gold) 100%);
}

/* Compact inline variant */
.ev-timer--inline {
  padding: 6px 12px;
  gap: 2px;
  border-radius: var(--ev-radius-sm);
}

.ev-timer--inline .ev-timer-seg {
  min-width: 32px;
}

.ev-timer--inline .ev-timer-num {
  font-size: 1.1rem;
}

.ev-timer--inline .ev-timer-label {
  font-size: 0.5rem;
}

/* Expired state */
.ev-timer--expired {
  background: #4a4a5a;
  opacity: 0.7;
}

.ev-timer--expired .ev-timer-num {
  text-decoration: line-through;
  opacity: 0.5;
}

@media (min-width: 768px) {
  .ev-timer-seg {
    min-width: 52px;
  }

  .ev-timer-num {
    font-size: 1.8rem;
  }

  .ev-timer-sep {
    font-size: 1.5rem;
  }
}


/* =====================================================
   6. PROGRESS BAR
   ===================================================== */

.ev-progress {
  width: 100%;
  position: relative;
}

.ev-progress-track {
  width: 100%;
  height: 10px;
  background: #F0EBE4;
  border-radius: 5px;
  overflow: hidden;
}

.ev-progress-bar {
  height: 100%;
  border-radius: 5px;
  background: linear-gradient(90deg, var(--ev-cherry) 0%, var(--ev-cherry-light) 100%);
  transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  min-width: 0;
}

.ev-progress-bar--gold {
  background: linear-gradient(90deg, var(--ev-gold-dark) 0%, var(--ev-gold-light) 100%);
}

.ev-progress-bar--green {
  background: linear-gradient(90deg, #2E7A44 0%, #4CA862 100%);
}

.ev-progress-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 6px;
  font-size: 0.78rem;
  color: var(--cb-text-muted, #7A7268);
}

.ev-progress-pct {
  font-family: var(--cb-font-mono, 'DM Mono', monospace);
  font-weight: 700;
  color: var(--ev-cherry);
}

.ev-progress-pct--gold {
  color: var(--ev-gold);
}

/* Thin variant */
.ev-progress--thin .ev-progress-track {
  height: 6px;
}

/* Thick variant */
.ev-progress--thick .ev-progress-track {
  height: 14px;
  border-radius: 7px;
}

.ev-progress--thick .ev-progress-bar {
  border-radius: 7px;
}


/* =====================================================
   7. STEPS (Stepper)
   ===================================================== */

.ev-steps {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 0;
  padding: 16px 0;
}

.ev-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  flex: 0 0 auto;
}

.ev-step-circle {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.82rem;
  font-weight: 700;
  background: #F0EBE4;
  color: var(--cb-text-muted, #7A7268);
  border: 2px solid transparent;
  position: relative;
  z-index: 1;
  transition: all var(--ev-transition);
}

.ev-step-label {
  font-size: 0.68rem;
  color: var(--cb-text-muted, #7A7268);
  margin-top: 6px;
  text-align: center;
  max-width: 72px;
  line-height: 1.3;
}

/* Connecting line */
.ev-step-line {
  flex: 1;
  height: 2px;
  background: #E0DAD0;
  align-self: center;
  margin-top: -18px;
  min-width: 24px;
}

/* Done state */
.ev-step.done .ev-step-circle {
  background: var(--ev-green);
  color: #fff;
  border-color: var(--ev-green);
}

.ev-step.done + .ev-step-line,
.ev-step-line.done {
  background: var(--ev-green);
}

/* Active state */
.ev-step.active .ev-step-circle {
  background: var(--ev-cherry);
  color: #fff;
  border-color: var(--ev-cherry);
  box-shadow: 0 0 0 4px var(--ev-cherry-bg);
  animation: ev-pulse 2s ease-in-out infinite;
}

.ev-step.active .ev-step-label {
  color: var(--ev-cherry);
  font-weight: 600;
}

@keyframes ev-pulse {
  0%, 100% { box-shadow: 0 0 0 4px var(--ev-cherry-bg); }
  50% { box-shadow: 0 0 0 8px rgba(255, 107, 138, 0.12); }
}

/* Upcoming/inactive */
.ev-step.upcoming .ev-step-circle {
  background: #F8F5F0;
  color: var(--cb-text-faint, #B0A89C);
  border-color: #E0DAD0;
}

@media (min-width: 768px) {
  .ev-step-circle {
    width: 42px;
    height: 42px;
    font-size: 0.9rem;
  }

  .ev-step-label {
    font-size: 0.75rem;
    max-width: 88px;
  }

  .ev-step-line {
    min-width: 40px;
    margin-top: -21px;
  }
}


/* =====================================================
   8. CALENDAR (Attendance Grid)
   ===================================================== */

.ev-calendar {
  background: var(--ev-surface);
  border: 1px solid var(--ev-border);
  border-radius: var(--ev-radius);
  padding: 16px;
  overflow: hidden;
}

.ev-cal-title {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--cb-text, #1A1714);
  margin-bottom: 12px;
  text-align: center;
}

.ev-cal-header {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  margin-bottom: 6px;
}

.ev-cal-header span {
  text-align: center;
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--cb-text-muted, #7A7268);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 4px 0;
}

/* Sunday column */
.ev-cal-header span:last-child {
  color: var(--ev-cherry);
}

.ev-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}

.ev-cal-day {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--ev-radius-sm);
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--cb-text, #1A1714);
  background: #F8F5F0;
  position: relative;
  transition: all var(--ev-transition);
}

/* Empty cell (padding days) */
.ev-cal-day--empty {
  background: transparent;
}

/* Checked (attended) */
.ev-cal-checked {
  background: var(--ev-green-bg);
  color: var(--ev-green);
  font-weight: 700;
}

.ev-cal-checked::after {
  content: "\f00c"; /* Bootstrap Icons check */
  font-family: "bootstrap-icons";
  position: absolute;
  bottom: 2px;
  right: 3px;
  font-size: 0.5rem;
  color: var(--ev-green);
  opacity: 0.7;
}

/* Today */
.ev-cal-today {
  border: 2px solid var(--ev-cherry);
  font-weight: 700;
  color: var(--ev-cherry);
}

.ev-cal-today.ev-cal-checked {
  border-color: var(--ev-green);
  color: var(--ev-green);
}

/* Future (not yet reachable) */
.ev-cal-future {
  opacity: 0.35;
  cursor: default;
}

/* Missed */
.ev-cal-missed {
  color: var(--cb-text-faint, #B0A89C);
  text-decoration: line-through;
  text-decoration-color: rgba(0, 0, 0, 0.15);
}

@media (min-width: 768px) {
  .ev-calendar {
    padding: 20px;
  }

  .ev-cal-day {
    font-size: 0.85rem;
  }
}


/* =====================================================
   9. LEADERBOARD
   ===================================================== */

.ev-leaderboard {
  background: var(--ev-surface);
  border: 1px solid var(--ev-border);
  border-radius: var(--ev-radius);
  overflow: hidden;
}

.ev-leaderboard-header {
  padding: 14px 16px;
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--cb-text, #1A1714);
  border-bottom: 1px solid var(--ev-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.ev-leaderboard table {
  width: 100%;
  border-collapse: collapse;
}

.ev-leaderboard th {
  padding: 10px 14px;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--cb-text-muted, #7A7268);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-bottom: 1px solid var(--ev-border);
  text-align: left;
}

.ev-leaderboard td {
  padding: 10px 14px;
  font-size: 0.85rem;
  color: var(--cb-text, #1A1714);
  border-bottom: 1px solid rgba(0, 0, 0, 0.04);
  vertical-align: middle;
}

/* Alternating rows */
.ev-leaderboard tr:nth-child(even) td {
  background: rgba(248, 245, 240, 0.5);
}

/* Rank column */
.ev-lb-rank {
  font-family: var(--cb-font-mono, 'DM Mono', monospace);
  font-weight: 700;
  text-align: center;
  width: 48px;
}

/* Medal icons for top 3 */
.ev-lb-medal {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  font-size: 0.72rem;
  font-weight: 800;
}

.ev-lb-medal--1 {
  background: linear-gradient(135deg, #FFD700 0%, #F0C800 100%);
  color: #8B6914;
  box-shadow: 0 2px 6px rgba(255, 215, 0, 0.35);
}

.ev-lb-medal--2 {
  background: linear-gradient(135deg, #E0E0E0 0%, #C0C0C0 100%);
  color: #555;
  box-shadow: 0 2px 6px rgba(192, 192, 192, 0.35);
}

.ev-lb-medal--3 {
  background: linear-gradient(135deg, #E0A870 0%, #CD7F32 100%);
  color: #5C3A10;
  box-shadow: 0 2px 6px rgba(205, 127, 50, 0.35);
}

/* User name cell */
.ev-lb-user {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ev-lb-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #F0EBE4;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.65rem;
  font-weight: 700;
  color: var(--cb-text-muted, #7A7268);
  overflow: hidden;
  flex-shrink: 0;
}

.ev-lb-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Current user highlight */
.ev-lb-me td {
  background: var(--ev-cherry-bg) !important;
  font-weight: 600;
}

.ev-lb-me td:first-child {
  border-left: 3px solid var(--ev-cherry);
}

/* Score column */
.ev-lb-score {
  font-family: var(--cb-font-mono, 'DM Mono', monospace);
  font-weight: 700;
  color: var(--ev-cherry);
  text-align: right;
}


/* =====================================================
   10. REWARD CARD
   ===================================================== */

.ev-reward {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: var(--ev-surface);
  border: 1px solid var(--ev-border);
  border-radius: var(--ev-radius);
  transition: border-color var(--ev-transition);
}

.ev-reward:hover {
  border-color: var(--ev-gold-border);
}

.ev-reward-img {
  width: 52px;
  height: 52px;
  border-radius: var(--ev-radius-sm);
  overflow: hidden;
  background: #F8F5F0;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ev-reward-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ev-reward-img i {
  font-size: 1.4rem;
  color: var(--ev-gold);
}

.ev-reward-info {
  flex: 1;
  min-width: 0;
}

.ev-reward-name {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--cb-text, #1A1714);
  margin-bottom: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ev-reward-rank {
  font-size: 0.75rem;
  color: var(--cb-text-muted, #7A7268);
}

.ev-reward-value {
  font-family: var(--cb-font-mono, 'DM Mono', monospace);
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--ev-gold);
  white-space: nowrap;
}

/* Reward grid */
.ev-reward-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

@media (min-width: 768px) {
  .ev-reward-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
}

/* Grand prize highlight */
.ev-reward--grand {
  border-color: var(--ev-gold-border);
  background: linear-gradient(135deg, #FFFDF5 0%, var(--ev-surface) 100%);
}

.ev-reward--grand .ev-reward-name {
  color: var(--ev-gold-dark);
}


/* =====================================================
   11. CTA BUTTONS
   ===================================================== */

.ev-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 24px;
  font-size: 0.9rem;
  font-weight: 600;
  border: 2px solid transparent;
  border-radius: var(--ev-radius);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: all var(--ev-transition);
  line-height: 1.4;
  /* Primary: Cherry Pink */
  background: var(--ev-cherry);
  color: #fff;
}

.ev-cta:hover {
  background: var(--ev-cherry-dark);
  color: #fff;
  text-decoration: none;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(255, 107, 138, 0.30);
}

.ev-cta:active {
  transform: translateY(0);
  box-shadow: none;
}

.ev-cta:disabled,
.ev-cta.disabled {
  opacity: 0.5;
  pointer-events: none;
  cursor: not-allowed;
}

/* Gold variant */
.ev-cta-gold {
  background: var(--ev-gold);
  color: #fff;
}

.ev-cta-gold:hover {
  background: var(--ev-gold-dark);
  color: #fff;
  box-shadow: 0 4px 12px rgba(197, 165, 90, 0.30);
}

/* Outline variant */
.ev-cta-outline {
  background: transparent;
  color: var(--ev-cherry);
  border-color: var(--ev-cherry);
}

.ev-cta-outline:hover {
  background: var(--ev-cherry);
  color: #fff;
  box-shadow: 0 4px 12px rgba(255, 107, 138, 0.20);
}

/* Outline gold */
.ev-cta-outline-gold {
  background: transparent;
  color: var(--ev-gold);
  border-color: var(--ev-gold);
}

.ev-cta-outline-gold:hover {
  background: var(--ev-gold);
  color: #fff;
  box-shadow: 0 4px 12px rgba(197, 165, 90, 0.20);
}

/* Full width */
.ev-cta--block {
  width: 100%;
}

/* Small */
.ev-cta--sm {
  padding: 7px 16px;
  font-size: 0.8rem;
  border-radius: var(--ev-radius-sm);
}

/* Large */
.ev-cta--lg {
  padding: 14px 32px;
  font-size: 1rem;
  border-radius: var(--ev-radius);
}


/* =====================================================
   12. SIDEBAR CARDS
   ===================================================== */

.ev-sidebar-card {
  background: var(--ev-surface);
  border: 1px solid var(--ev-border);
  border-radius: var(--ev-radius);
  overflow: hidden;
}

.ev-sidebar-card-header {
  padding: 12px 16px;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--cb-text, #1A1714);
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  display: flex;
  align-items: center;
  gap: 6px;
}

.ev-sidebar-card-header i {
  color: var(--ev-cherry);
  font-size: 0.9rem;
}

.ev-sidebar-card-body {
  padding: 14px 16px;
}

/* Info row inside sidebar card */
.ev-info-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 0;
  font-size: 0.82rem;
}

.ev-info-row + .ev-info-row {
  border-top: 1px solid rgba(0, 0, 0, 0.04);
}

.ev-info-label {
  color: var(--cb-text-muted, #7A7268);
}

.ev-info-value {
  font-weight: 600;
  color: var(--cb-text, #1A1714);
}

.ev-info-value--mono {
  font-family: var(--cb-font-mono, 'DM Mono', monospace);
}

.ev-info-value--cherry {
  color: var(--ev-cherry);
}

.ev-info-value--gold {
  color: var(--ev-gold);
}

/* Stat block inside sidebar */
.ev-stat-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.ev-stat-item {
  text-align: center;
  padding: 10px 8px;
  background: #F8F5F0;
  border-radius: var(--ev-radius-sm);
}

.ev-stat-num {
  font-family: var(--cb-font-mono, 'DM Mono', monospace);
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--cb-text, #1A1714);
  line-height: 1;
}

.ev-stat-label {
  font-size: 0.68rem;
  color: var(--cb-text-muted, #7A7268);
  margin-top: 4px;
}

/* On mobile, sidebar cards stack below main */
@media (max-width: 767.98px) {
  .ev-sidebar {
    margin-top: 20px;
  }
}


/* =====================================================
   13. CONDITION ITEM
   ===================================================== */

.ev-cond-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ev-cond-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  background: #F8F5F0;
  border-radius: var(--ev-radius-sm);
  font-size: 0.85rem;
  line-height: 1.45;
  color: var(--cb-text, #1A1714);
}

.ev-cond-icon {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.65rem;
  margin-top: 1px;
}

/* Met / checked condition */
.ev-cond-item.met .ev-cond-icon {
  background: var(--ev-green);
  color: #fff;
}

.ev-cond-item.met {
  background: var(--ev-green-bg);
}

/* Unmet / unchecked condition */
.ev-cond-item.unmet .ev-cond-icon {
  background: #E0DAD0;
  color: #fff;
}

.ev-cond-item.unmet {
  opacity: 0.7;
}

.ev-cond-text {
  flex: 1;
}

.ev-cond-text small {
  display: block;
  font-size: 0.75rem;
  color: var(--cb-text-muted, #7A7268);
  margin-top: 2px;
}


/* =====================================================
   14. MILESTONES
   ===================================================== */

.ev-milestones {
  display: flex;
  align-items: center;
  gap: 0;
  padding: 12px 0;
  position: relative;
}

/* Connecting track line */
.ev-milestones::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 16px;
  right: 16px;
  height: 3px;
  background: #E0DAD0;
  transform: translateY(-50%);
  z-index: 0;
}

.ev-milestone {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
}

.ev-milestone-dot {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  font-weight: 700;
  background: #E0DAD0;
  color: var(--cb-text-muted, #7A7268);
  border: 3px solid var(--ev-surface);
  transition: all var(--ev-transition);
}

.ev-milestone-label {
  font-size: 0.62rem;
  color: var(--cb-text-muted, #7A7268);
  margin-top: 4px;
  text-align: center;
  white-space: nowrap;
}

/* Achieved */
.ev-milestone.achieved .ev-milestone-dot {
  background: var(--ev-cherry);
  color: #fff;
  box-shadow: 0 2px 8px rgba(255, 107, 138, 0.30);
}

.ev-milestone.achieved .ev-milestone-label {
  color: var(--ev-cherry);
  font-weight: 600;
}

/* Current (next target) */
.ev-milestone.current .ev-milestone-dot {
  background: var(--ev-surface);
  color: var(--ev-cherry);
  border-color: var(--ev-cherry);
  animation: ev-pulse 2s ease-in-out infinite;
}

/* Reward icon milestone */
.ev-milestone-dot i {
  font-size: 0.75rem;
}

@media (min-width: 768px) {
  .ev-milestone-dot {
    width: 38px;
    height: 38px;
    font-size: 0.78rem;
  }

  .ev-milestone-label {
    font-size: 0.7rem;
  }
}


/* =====================================================
   15. TABS
   ===================================================== */

.ev-tabs {
  display: flex;
  gap: 0;
  border-bottom: 2px solid var(--ev-border);
  margin-bottom: 20px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.ev-tabs::-webkit-scrollbar {
  display: none;
}

.ev-tab {
  position: relative;
  padding: 10px 16px;
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.2px;
  color: var(--cb-text-muted, #7A7268);
  text-decoration: none;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  transition: color var(--ev-transition), border-color var(--ev-transition);
  cursor: pointer;
  background: none;
  border-top: none;
  border-left: none;
  border-right: none;
}

.ev-tab:hover {
  color: var(--cb-text, #1A1714);
  text-decoration: none;
}

.ev-tab.active {
  color: var(--ev-cherry);
  font-weight: 600;
  border-bottom-color: var(--ev-cherry);
}

.ev-tab-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  margin-left: 4px;
  background: #F0EBE4;
  color: var(--cb-text-muted, #7A7268);
  font-size: 0.65rem;
  font-weight: 700;
  border-radius: 9px;
}

.ev-tab.active .ev-tab-count {
  background: var(--ev-cherry-bg);
  color: var(--ev-cherry);
}

@media (min-width: 768px) {
  .ev-tab {
    padding: 12px 24px;
    font-size: 0.92rem;
  }
}


/* =====================================================
   16. REFERRAL PANEL
   ===================================================== */

.ev-referral {
  background: var(--ev-surface);
  border: 1px solid var(--ev-border);
  border-radius: var(--ev-radius);
  padding: 20px;
}

.ev-referral-title {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--cb-text, #1A1714);
  margin-bottom: 12px;
}

.ev-referral-link {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}

.ev-referral-input {
  flex: 1;
  padding: 8px 12px;
  font-size: 0.82rem;
  font-family: var(--cb-font-mono, 'DM Mono', monospace);
  background: #F8F5F0;
  border: 1px solid var(--ev-border);
  border-radius: var(--ev-radius-sm);
  color: var(--cb-text, #1A1714);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ev-referral-input:focus {
  outline: none;
  border-color: var(--ev-cherry);
}

.ev-referral-copy {
  flex-shrink: 0;
  padding: 8px 14px;
  background: var(--ev-cherry);
  color: #fff;
  border: none;
  border-radius: var(--ev-radius-sm);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--ev-transition);
}

.ev-referral-copy:hover {
  background: var(--ev-cherry-dark);
}

.ev-referral-copy.copied {
  background: var(--ev-green);
}

/* Referral stats */
.ev-referral-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.ev-referral-stat {
  text-align: center;
  padding: 10px 8px;
  background: #F8F5F0;
  border-radius: var(--ev-radius-sm);
}

.ev-referral-stat-num {
  font-family: var(--cb-font-mono, 'DM Mono', monospace);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--ev-cherry);
  line-height: 1;
}

.ev-referral-stat-label {
  font-size: 0.65rem;
  color: var(--cb-text-muted, #7A7268);
  margin-top: 4px;
}


/* =====================================================
   17. STATUS BOX (Alert / Participation Status)
   ===================================================== */

.ev-status-box {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-radius: var(--ev-radius);
  font-size: 0.88rem;
  line-height: 1.4;
  margin-bottom: 16px;
}

.ev-status-box i {
  font-size: 1.1rem;
  flex-shrink: 0;
}

.ev-status-box--info {
  background: var(--ev-blue-bg);
  color: #1E4A8C;
  border: 1px solid rgba(59, 130, 246, 0.20);
}

.ev-status-box--success {
  background: var(--ev-green-bg);
  color: #1A5C2E;
  border: 1px solid rgba(46, 122, 68, 0.20);
}

.ev-status-box--warning {
  background: var(--ev-orange-bg);
  color: #8C4A0A;
  border: 1px solid rgba(232, 124, 62, 0.20);
}

.ev-status-box--danger {
  background: var(--ev-cherry-bg);
  color: #8C2040;
  border: 1px solid var(--ev-cherry-border);
}

.ev-status-box--neutral {
  background: #F0EBE4;
  color: var(--cb-text-sub, #4A433B);
  border: 1px solid rgba(0, 0, 0, 0.06);
}

.ev-status-box-title {
  font-weight: 700;
  margin-bottom: 2px;
}

.ev-status-box-text {
  font-size: 0.82rem;
  opacity: 0.85;
}


/* =====================================================
   18. ADMIN PANEL
   ===================================================== */

.ev-admin {
  background: linear-gradient(135deg, #FFF8E1 0%, #FFF3CD 100%);
  border: 1px solid rgba(212, 160, 32, 0.30);
  border-radius: var(--ev-radius);
  padding: 16px 20px;
  margin-bottom: 20px;
}

.ev-admin-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.88rem;
  font-weight: 700;
  color: #856404;
  margin-bottom: 12px;
}

.ev-admin-header i {
  font-size: 1rem;
}

.ev-admin-body {
  font-size: 0.85rem;
  color: #664D03;
  line-height: 1.5;
}

.ev-admin-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.ev-admin-btn {
  padding: 7px 16px;
  font-size: 0.82rem;
  font-weight: 600;
  border-radius: var(--ev-radius-sm);
  border: 1px solid rgba(133, 100, 4, 0.30);
  background: rgba(255, 255, 255, 0.7);
  color: #856404;
  cursor: pointer;
  transition: all var(--ev-transition);
  text-decoration: none;
}

.ev-admin-btn:hover {
  background: #856404;
  color: #fff;
  border-color: #856404;
  text-decoration: none;
}

.ev-admin-btn--danger {
  border-color: rgba(168, 56, 56, 0.30);
  color: var(--cb-danger, #A83838);
}

.ev-admin-btn--danger:hover {
  background: var(--cb-danger, #A83838);
  color: #fff;
  border-color: var(--cb-danger, #A83838);
}


/* =====================================================
   19. EMPTY STATE
   ===================================================== */

.ev-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
  text-align: center;
}

.ev-empty-icon {
  font-size: 2.5rem;
  color: var(--cb-text-faint, #B0A89C);
  margin-bottom: 12px;
  opacity: 0.6;
}

.ev-empty-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--cb-text-sub, #4A433B);
  margin-bottom: 6px;
}

.ev-empty-text {
  font-size: 0.85rem;
  color: var(--cb-text-muted, #7A7268);
  max-width: 320px;
  line-height: 1.5;
  margin-bottom: 16px;
}


/* =====================================================
   20. FORM FIELDS
   ===================================================== */

.ev-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.ev-form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ev-form-label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--cb-text, #1A1714);
}

.ev-form-label .required {
  color: var(--ev-cherry);
  margin-left: 2px;
}

.ev-form-hint {
  font-size: 0.75rem;
  color: var(--cb-text-muted, #7A7268);
  margin-top: 2px;
}

.ev-form-input,
.ev-form-select,
.ev-form-textarea {
  width: 100%;
  padding: 10px 14px;
  font-size: 0.88rem;
  color: var(--cb-text, #1A1714);
  background: var(--ev-surface);
  border: 1px solid var(--ev-border);
  border-radius: var(--ev-radius-sm);
  transition: border-color var(--ev-transition), box-shadow var(--ev-transition);
  font-family: inherit;
}

.ev-form-input:focus,
.ev-form-select:focus,
.ev-form-textarea:focus {
  outline: none;
  border-color: var(--ev-cherry);
  box-shadow: 0 0 0 3px var(--ev-cherry-bg);
}

.ev-form-input::placeholder,
.ev-form-textarea::placeholder {
  color: var(--cb-text-faint, #B0A89C);
}

.ev-form-textarea {
  min-height: 100px;
  resize: vertical;
}

.ev-form-select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%237A7268' viewBox='0 0 16 16'%3E%3Cpath d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 36px;
}

/* Error state */
.ev-form-group.has-error .ev-form-input,
.ev-form-group.has-error .ev-form-select,
.ev-form-group.has-error .ev-form-textarea {
  border-color: var(--ev-cherry);
  background: rgba(255, 107, 138, 0.03);
}

.ev-form-error {
  font-size: 0.75rem;
  color: var(--ev-cherry);
  margin-top: 4px;
}

/* Checkbox / Radio row */
.ev-form-check {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  color: var(--cb-text, #1A1714);
  cursor: pointer;
}

.ev-form-check input[type="checkbox"],
.ev-form-check input[type="radio"] {
  accent-color: var(--ev-cherry);
  width: 16px;
  height: 16px;
  cursor: pointer;
}

/* File upload area */
.ev-form-upload {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px;
  border: 2px dashed var(--ev-border);
  border-radius: var(--ev-radius);
  background: #FDFCFA;
  cursor: pointer;
  transition: border-color var(--ev-transition), background var(--ev-transition);
  text-align: center;
}

.ev-form-upload:hover {
  border-color: var(--ev-cherry-border);
  background: var(--ev-cherry-bg);
}

.ev-form-upload i {
  font-size: 1.5rem;
  color: var(--cb-text-muted, #7A7268);
  margin-bottom: 8px;
}

.ev-form-upload span {
  font-size: 0.82rem;
  color: var(--cb-text-muted, #7A7268);
}

/* Form actions (submit row) */
.ev-form-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  padding-top: 8px;
}


/* =====================================================
   UTILITIES & HELPERS
   ===================================================== */

/* Section divider */
.ev-divider {
  height: 1px;
  background: var(--ev-border);
  margin: 20px 0;
  border: none;
}

/* Section heading */
.ev-section-title {
  font-family: var(--cb-font-serif, 'Cormorant Garamond', Georgia, serif);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--cb-text, #1A1714);
  margin-bottom: 14px;
  letter-spacing: 0.3px;
}

.ev-section-title--sm {
  font-size: 0.92rem;
}

/* Text accent colors */
.ev-text-cherry { color: var(--ev-cherry) !important; }
.ev-text-gold { color: var(--ev-gold) !important; }
.ev-text-green { color: var(--ev-green) !important; }
.ev-text-muted { color: var(--cb-text-muted, #7A7268) !important; }

/* Background accents */
.ev-bg-cherry { background-color: var(--ev-cherry-bg) !important; }
.ev-bg-gold { background-color: var(--ev-gold-bg) !important; }
.ev-bg-warm { background-color: #F8F5F0 !important; }

/* Mono text */
.ev-mono {
  font-family: var(--cb-font-mono, 'DM Mono', monospace);
}

/* Fade-in animation */
.ev-fade-in {
  animation: ev-fadeIn 0.4s ease-out;
}

@keyframes ev-fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Skeleton loading placeholder */
.ev-skeleton {
  background: linear-gradient(90deg, #F0EBE4 25%, #F8F5F0 50%, #F0EBE4 75%);
  background-size: 200% 100%;
  animation: ev-shimmer 1.5s infinite;
  border-radius: var(--ev-radius-sm);
}

@keyframes ev-shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

/* Truncate text */
.ev-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Badge positioned on card image */
.ev-card-badges {
  position: absolute;
  top: 10px;
  left: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  z-index: 2;
}

/* Date range display */
.ev-date-range {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.82rem;
  color: var(--cb-text-muted, #7A7268);
}

.ev-date-range i {
  color: var(--ev-cherry);
  font-size: 0.85rem;
}

/* Participant count */
.ev-participants {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.82rem;
  color: var(--cb-text-muted, #7A7268);
}

.ev-participants i {
  font-size: 0.78rem;
}

.ev-participants strong {
  color: var(--cb-text, #1A1714);
  font-weight: 700;
}

/* Countdown urgency flashing */
.ev-urgent {
  animation: ev-urgentFlash 1s ease-in-out infinite;
}

@keyframes ev-urgentFlash {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}


/* =====================================================
   RESPONSIVE FINE-TUNING
   ===================================================== */

/* Mobile: tighter spacing */
@media (max-width: 575.98px) {
  .ev-hero-title {
    font-size: 1.3rem;
  }

  .ev-hero-sub {
    font-size: 0.82rem;
  }

  .ev-timer-seg {
    min-width: 36px;
  }

  .ev-timer-num {
    font-size: 1.25rem;
  }

  .ev-tab {
    padding: 8px 14px;
    font-size: 0.82rem;
  }

  .ev-card-body {
    padding: 10px 12px 12px;
  }
}

/* Tablet: balanced layout */
@media (min-width: 768px) and (max-width: 1023.98px) {
  .ev-wrap {
    grid-template-columns: 1fr 260px;
  }
}

/* Desktop: max spacing */
@media (min-width: 1024px) {
  .ev-card-title {
    font-size: 1rem;
  }

  .ev-card-desc {
    font-size: 0.85rem;
  }

  .ev-card-body {
    padding: 14px 16px 16px;
  }
}

/* Print: hide interactive elements */
@media print {
  .ev-cta,
  .ev-timer,
  .ev-tabs,
  .ev-admin,
  .ev-referral-copy,
  .ev-sidebar {
    display: none !important;
  }

  .ev-wrap {
    display: block !important;
    max-width: 100% !important;
  }
}


/* =====================================================
   TEMPLATE-SPECIFIC SUPPLEMENTS
   ===================================================== */

/* ── Detail page layout ── */
.ev-detail {
  max-width: 1100px;
  margin: 0 auto;
  padding: 16px 12px 40px;
}

.ev-layout {
  display: block;
}

@media (min-width: 768px) {
  .ev-detail {
    padding: 24px 20px 60px;
  }
  .ev-layout {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 24px;
    align-items: start;
  }
}

@media (min-width: 1024px) {
  .ev-detail {
    padding: 32px 24px 80px;
  }
  .ev-layout {
    gap: 32px;
  }
}

.ev-hero-detail {
  border-radius: var(--ev-radius);
  overflow: hidden;
  position: relative;
}

.ev-hero-detail img {
  width: 100%;
  height: 240px;
  object-fit: cover;
  display: block;
}

@media (min-width: 768px) {
  .ev-hero-detail img {
    height: 320px;
  }
}

.ev-hero-overlay {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 24px 20px;
  background: linear-gradient(to top, rgba(26,26,46,.40) 0%, transparent 100%);
  color: #fff;
}

.ev-hero-meta {
  display: flex;
  gap: 16px;
  font-size: .82rem;
  opacity: .9;
  margin-top: 6px;
}

/* ── List page grid (텍스트 카드용: 1열 → 2열) ── */
.ev-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

@media (min-width: 768px) {
  .ev-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
  }
}

/* ── Card: placeholder ── */
.ev-card-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--ev-bg) 0%, #F0EBE4 100%);
}

.ev-card-placeholder i {
  font-size: 2.5rem;
  color: var(--cb-text-faint, #B0A89C);
  opacity: .5;
}

/* ── Card: status dot ── */
.ev-card-status {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: .72rem;
  font-weight: 600;
  color: var(--cb-text-muted, #7A7268);
  margin-bottom: 4px;
  text-transform: uppercase;
  letter-spacing: .3px;
}

.ev-status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--cb-text-faint, #B0A89C);
  flex-shrink: 0;
}

.ev-status-dot-active { background: var(--ev-green); }
.ev-status-dot-scheduled { background: var(--ev-gold); }
.ev-status-dot-ended { background: var(--cb-text-faint, #B0A89C); }
.ev-status-dot-paused { background: var(--ev-orange); }
.ev-status-dot-judging { background: var(--ev-blue); }

/* ── Card: CTA link ── */
.ev-card-cta {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid rgba(0,0,0,.05);
}

.ev-cta-link {
  font-size: .82rem;
  font-weight: 600;
  color: var(--ev-cherry);
  display: flex;
  align-items: center;
  gap: 4px;
}

.ev-cta-link i {
  font-size: .75rem;
  transition: transform .2s ease;
}

.ev-card:hover .ev-cta-link i {
  transform: translateX(3px);
}

.ev-cta-link-muted { color: var(--cb-text-muted, #7A7268); }
.ev-cta-link-gold { color: var(--ev-gold); }

/* ── Timer wrap ── */
.ev-timer-wrap {
  text-align: center;
}

.ev-timer-wrap .ev-timer-label {
  display: block;
  font-size: .78rem;
  font-weight: 600;
  color: var(--cb-text-muted, #7A7268);
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: .5px;
}

/* timer segment text (d/h/m/s) */
.ev-timer-seg {
  text-align: center;
}

.ev-timer-d, .ev-timer-h, .ev-timer-m, .ev-timer-s {
  font-family: var(--cb-font-mono, 'DM Mono', monospace);
  font-size: 1.5rem;
  font-weight: 700;
  display: block;
  line-height: 1;
}

.ev-timer-seg small {
  font-size: .6rem;
  opacity: .6;
  text-transform: uppercase;
  letter-spacing: .5px;
  margin-top: 2px;
  display: block;
}

@media (min-width: 768px) {
  .ev-timer-d, .ev-timer-h, .ev-timer-m, .ev-timer-s {
    font-size: 1.8rem;
  }
}

/* ── Sidebar card header ── */
.ev-sidebar-card {
  padding: 16px;
}

h6.ev-card-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: .88rem;
  font-weight: 700;
  color: var(--cb-text, #1A1714);
  margin-bottom: 12px;
}

h6.ev-card-title i {
  color: var(--ev-cherry);
  font-size: .95rem;
}

/* ── Sidebar info rows ── */
.ev-info-remaining {
  margin-top: 8px;
  padding: 8px 12px;
  background: var(--ev-cherry-bg);
  border-radius: var(--ev-radius-sm);
  font-size: .82rem;
  font-weight: 600;
  color: var(--ev-cherry);
  text-align: center;
}

/* ── Reward card inside sidebar ── */
.ev-reward + .ev-reward {
  margin-top: 8px;
}

.ev-reward-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--ev-radius-sm);
  background: var(--ev-gold-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.ev-reward-icon i {
  font-size: 1.3rem;
  color: var(--ev-gold);
}

.ev-reward-desc {
  font-size: .75rem;
  color: var(--cb-text-muted, #7A7268);
  margin-top: 2px;
}

.ev-reward-rank {
  font-size: .72rem;
  color: var(--ev-gold);
  font-weight: 600;
}

.ev-reward-qty {
  font-size: .72rem;
  color: var(--cb-text-muted, #7A7268);
  margin-top: 2px;
}

/* ── FCFS (선착순) ── */
.ev-fcfs-box {
  text-align: center;
  padding: 20px;
  background: var(--ev-surface);
  border: 1px solid var(--ev-border);
  border-radius: var(--ev-radius);
}

.ev-fcfs-label {
  font-size: .78rem;
  font-weight: 600;
  color: var(--cb-text-muted, #7A7268);
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: .5px;
}

.ev-fcfs-count {
  margin-bottom: 12px;
}

.ev-fcfs-num {
  font-family: var(--cb-font-mono, 'DM Mono', monospace);
  font-size: 2rem;
  font-weight: 800;
  color: var(--ev-cherry);
}

.ev-fcfs-total {
  font-size: 1rem;
  color: var(--cb-text-muted, #7A7268);
}

/* ── Event desc/rules ── */
.ev-desc {
  font-size: .88rem;
  line-height: 1.7;
  color: var(--cb-text, #1A1714);
}

.ev-desc p { margin-bottom: 8px; }
.ev-desc img { max-width: 100%; border-radius: var(--ev-radius-sm); margin: 8px 0; }

.ev-rules {
  border-left: 3px solid var(--ev-gold);
}

/* ── Status box per entry status ── */
.ev-status-box {
  text-align: center;
  padding: 16px;
  border-radius: var(--ev-radius);
  font-size: .88rem;
  font-weight: 600;
}

.ev-status-box i {
  display: block;
  font-size: 1.5rem;
  margin-bottom: 6px;
}

.ev-status-rewarded { background: var(--ev-green-bg); color: var(--ev-green); border: 1px solid rgba(46,122,68,.2); }
.ev-status-won { background: var(--ev-gold-bg); color: var(--ev-gold-dark); border: 1px solid var(--ev-gold-border); }
.ev-status-completed { background: var(--ev-blue-bg); color: var(--ev-blue); border: 1px solid rgba(59,130,246,.2); }
.ev-status-lost { background: #F0EBE4; color: var(--cb-text-muted, #7A7268); border: 1px solid rgba(0,0,0,.06); }
.ev-status-in_progress { background: var(--ev-teal-bg); color: var(--ev-teal); border: 1px solid rgba(46,158,142,.2); }
.ev-status-entered { background: var(--ev-cherry-bg); color: var(--ev-cherry); border: 1px solid var(--ev-cherry-border); }

/* ── Attendance include ── */
.ev-attend-summary {
  display: flex;
  align-items: baseline;
  gap: 4px;
  margin-bottom: 6px;
}

.ev-attend-count {
  font-family: var(--cb-font-mono, 'DM Mono', monospace);
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--ev-cherry);
}

.ev-attend-label {
  font-size: .85rem;
  color: var(--cb-text-muted, #7A7268);
}

.ev-cal-cell {
  aspect-ratio: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: var(--ev-radius-sm);
  font-size: .78rem;
  font-weight: 500;
  color: var(--cb-text, #1A1714);
  background: #F8F5F0;
  gap: 1px;
}

.ev-cal-date { font-size: .72rem; }
.ev-cal-cell i { font-size: .65rem; }

.ev-cal-checked {
  background: var(--ev-green-bg);
  color: var(--ev-green);
  font-weight: 700;
}

.ev-cal-today {
  border: 2px solid var(--ev-cherry);
  color: var(--ev-cherry);
  font-weight: 700;
}

.ev-cal-clickable {
  cursor: pointer;
  animation: ev-cal-pulse 2s ease-in-out infinite;
}
.ev-cal-clickable:active {
  transform: scale(.92);
}
@keyframes ev-cal-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(200, 60, 60, .4); }
  50% { box-shadow: 0 0 0 6px rgba(200, 60, 60, 0); }
}

.ev-cal-future {
  opacity: .35;
}

.ev-cal-past {
  color: var(--cb-text-faint, #B0A89C);
}

/* ── Milestones (attendance include) ── */
.ev-milestones {
  display: flex;
  gap: 8px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(0,0,0,.06);
  flex-wrap: wrap;
}

.ev-milestone {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
  min-width: 0;
}

.ev-milestone-icon {
  flex-shrink: 0;
  font-size: 1rem;
  color: var(--cb-text-faint, #B0A89C);
}

.ev-milestone-done .ev-milestone-icon { color: var(--ev-green); }

.ev-milestone-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.ev-milestone-days {
  font-size: .72rem;
  font-weight: 700;
  color: var(--cb-text, #1A1714);
}

.ev-milestone-reward {
  font-size: .68rem;
  color: var(--ev-gold);
  font-weight: 600;
}

.ev-milestone-done .ev-milestone-days {
  color: var(--ev-green);
}

/* ── Steps (condition checklist) ── */
.ev-step-summary {
  display: flex;
  align-items: baseline;
  gap: 4px;
  margin-bottom: 6px;
}

.ev-step-count {
  font-family: var(--cb-font-mono, 'DM Mono', monospace);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--ev-cherry);
}

.ev-step-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ev-step-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  background: #F8F5F0;
  border-radius: var(--ev-radius-sm);
  transition: background .2s ease;
}

.ev-step-item.ev-step-done {
  background: var(--ev-green-bg);
}

.ev-step-num {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .75rem;
  font-weight: 700;
  background: #E0DAD0;
  color: var(--cb-text-muted, #7A7268);
}

.ev-step-done .ev-step-num {
  background: transparent;
  color: var(--ev-green);
}

.ev-step-num i {
  font-size: 1.1rem;
}

.ev-step-content {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.ev-step-title {
  font-size: .68rem;
  font-weight: 700;
  color: var(--cb-text-muted, #7A7268);
  text-transform: uppercase;
  letter-spacing: .3px;
}

.ev-step-desc {
  font-size: .85rem;
  color: var(--cb-text, #1A1714);
}

.ev-step-msg {
  margin-top: 10px;
  padding: 8px 12px;
  border-radius: var(--ev-radius-sm);
  font-size: .82rem;
  color: var(--cb-text-muted, #7A7268);
  background: #F8F5F0;
}

.ev-step-msg i { margin-right: 4px; }

.ev-step-msg-done {
  background: var(--ev-green-bg);
  color: var(--ev-green);
  font-weight: 600;
}

/* ── Leaderboard include ── */
.ev-refresh-btn {
  background: none;
  border: 1px solid var(--ev-border);
  border-radius: 50%;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--cb-text-muted, #7A7268);
  transition: all .2s ease;
}

.ev-refresh-btn:hover {
  border-color: var(--ev-cherry);
  color: var(--ev-cherry);
}

.ev-my-rank {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background: var(--ev-cherry-bg);
  border-radius: var(--ev-radius-sm);
  margin-bottom: 12px;
}

.ev-my-rank-label {
  font-size: .75rem;
  color: var(--cb-text-muted, #7A7268);
}

.ev-my-rank-num {
  font-family: var(--cb-font-mono, 'DM Mono', monospace);
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--ev-cherry);
}

.ev-my-rank-score {
  margin-left: auto;
  font-size: .82rem;
  font-weight: 600;
  color: var(--cb-text, #1A1714);
}

.ev-rank-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ev-rank-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: var(--ev-radius-sm);
  font-size: .85rem;
  transition: background .15s ease;
}

.ev-rank-row:nth-child(even) {
  background: rgba(248,245,240,.5);
}

.ev-rank-me {
  background: var(--ev-cherry-bg) !important;
  font-weight: 600;
}

.ev-rank-pos {
  flex-shrink: 0;
  width: 28px;
  text-align: center;
  font-weight: 700;
  font-family: var(--cb-font-mono, 'DM Mono', monospace);
  color: var(--cb-text-muted, #7A7268);
}

.ev-medal {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  font-size: .7rem;
  font-weight: 800;
}

.ev-medal-gold { background: linear-gradient(135deg, #FFD700, #F0C800); color: #8B6914; box-shadow: 0 2px 6px rgba(255,215,0,.35); }
.ev-medal-silver { background: linear-gradient(135deg, #E0E0E0, #C0C0C0); color: #555; box-shadow: 0 2px 6px rgba(192,192,192,.35); }
.ev-medal-bronze { background: linear-gradient(135deg, #E0A870, #CD7F32); color: #5C3A10; box-shadow: 0 2px 6px rgba(205,127,50,.35); }

.ev-rank-user {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ev-rank-score {
  flex-shrink: 0;
  font-family: var(--cb-font-mono, 'DM Mono', monospace);
  font-weight: 700;
  color: var(--ev-cherry);
}

.ev-empty-small {
  text-align: center;
  padding: 20px;
  font-size: .85rem;
  color: var(--cb-text-muted, #7A7268);
}

/* ── Challenge form include ── */
.ev-challenge-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  background: #F8F5F0;
  border-radius: var(--ev-radius-sm);
  margin-bottom: 12px;
}

.ev-challenge-label {
  font-size: .75rem;
  color: var(--cb-text-muted, #7A7268);
}

.ev-challenge-name {
  font-size: .88rem;
  font-weight: 700;
  color: var(--cb-text, #1A1714);
}

.ev-challenge-submitted {
  text-align: center;
  padding: 16px;
  background: var(--ev-green-bg);
  border-radius: var(--ev-radius);
  margin-bottom: 12px;
}

.ev-challenge-submitted i {
  font-size: 1.5rem;
  color: var(--ev-green);
  display: block;
  margin-bottom: 4px;
}

.ev-challenge-sub-label {
  display: block;
  font-size: .75rem;
  color: var(--cb-text-muted, #7A7268);
  margin-bottom: 2px;
}

.ev-challenge-price {
  display: block;
  font-family: var(--cb-font-mono, 'DM Mono', monospace);
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--ev-cherry);
}

.ev-challenge-note {
  font-size: .78rem;
  color: var(--cb-text-muted, #7A7268);
  text-align: center;
}

.ev-challenge-note i { margin-right: 4px; }

.ev-challenge-form { text-align: center; }

.ev-challenge-input-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 10px;
}

.ev-challenge-currency {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--cb-text-muted, #7A7268);
}

.ev-challenge-input {
  flex: 1;
  padding: 10px 14px;
  font-size: 1rem;
  font-family: var(--cb-font-mono, 'DM Mono', monospace);
  font-weight: 700;
  text-align: center;
  border: 2px solid var(--ev-border);
  border-radius: var(--ev-radius-sm);
  transition: border-color .2s ease;
}

.ev-challenge-input:focus {
  outline: none;
  border-color: var(--ev-cherry);
  box-shadow: 0 0 0 3px var(--ev-cherry-bg);
}

.ev-challenge-unit {
  font-size: .88rem;
  color: var(--cb-text-muted, #7A7268);
}

.ev-challenge-hint {
  font-size: .78rem;
  color: var(--cb-text-muted, #7A7268);
  margin-bottom: 12px;
}

.ev-challenge-hint i { color: var(--ev-gold); margin-right: 3px; }

.ev-challenge-closed {
  text-align: center;
  padding: 20px;
  color: var(--cb-text-muted, #7A7268);
  font-size: .88rem;
}

/* ── Referral panel include ── */
.ev-ref-link-box {
  margin-bottom: 14px;
}

.ev-ref-label {
  display: block;
  font-size: .75rem;
  font-weight: 600;
  color: var(--cb-text-muted, #7A7268);
  margin-bottom: 6px;
}

.ev-ref-link-row {
  display: flex;
  gap: 6px;
}

.ev-ref-input {
  flex: 1;
  padding: 8px 12px;
  font-size: .78rem;
  font-family: var(--cb-font-mono, 'DM Mono', monospace);
  background: #F8F5F0;
  border: 1px solid var(--ev-border);
  border-radius: var(--ev-radius-sm);
  color: var(--cb-text, #1A1714);
  overflow: hidden;
  text-overflow: ellipsis;
}

.ev-ref-copy {
  flex-shrink: 0;
  padding: 8px 12px;
  background: var(--ev-cherry);
  color: #fff;
  border: none;
  border-radius: var(--ev-radius-sm);
  cursor: pointer;
  transition: background .2s ease;
}

.ev-ref-copy:hover { background: var(--ev-cherry-dark); }

.ev-ref-copied {
  font-size: .78rem;
  color: var(--ev-green);
  font-weight: 600;
  margin-top: 4px;
}

.ev-ref-stats {
  margin-bottom: 12px;
}

.ev-ref-stat {
  text-align: center;
  padding: 12px;
  background: #F8F5F0;
  border-radius: var(--ev-radius-sm);
}

.ev-ref-stat-num {
  font-family: var(--cb-font-mono, 'DM Mono', monospace);
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--ev-cherry);
  display: block;
}

.ev-ref-stat-label {
  font-size: .72rem;
  color: var(--cb-text-muted, #7A7268);
}

.ev-ref-guide {
  font-size: .78rem;
  color: var(--cb-text-muted, #7A7268);
  padding: 8px 12px;
  background: #F8F5F0;
  border-radius: var(--ev-radius-sm);
}

.ev-ref-guide i { color: var(--ev-blue); margin-right: 4px; }

.ev-ref-login {
  text-align: center;
  padding: 16px 0;
}

.ev-ref-login p {
  font-size: .85rem;
  color: var(--cb-text-muted, #7A7268);
  margin-bottom: 10px;
}

/* ── Action card ── */
.ev-action-card {
  position: sticky;
  top: 80px;
}

/* ── Admin panel inside detail sidebar ── */
.ev-sidebar-card.ev-admin {
  background: linear-gradient(135deg, #FFF8E1 0%, #FFF3CD 100%);
  border-color: rgba(212,160,32,.3);
}

/* ── Empty state (list page) ── */
.ev-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 48px 24px;
}

.ev-empty i {
  font-size: 2.5rem;
  color: var(--cb-text-faint, #B0A89C);
  opacity: .5;
  display: block;
  margin-bottom: 8px;
}

.ev-empty p {
  font-size: .9rem;
  color: var(--cb-text-muted, #7A7268);
}

/* ── Scheduled tab color ── */
.ev-tab.active.scheduled { color: var(--ev-gold); border-bottom-color: var(--ev-gold); }
.ev-tab.active.ended { color: var(--cb-text-muted, #7A7268); border-bottom-color: var(--cb-text-muted, #7A7268); }


/* =====================================================
   EVENT DETAIL — 상세 헤더 (작업지시서 작업4)
   ===================================================== */

.ev-detail-header {
  padding: 24px 16px 20px;
  background: linear-gradient(160deg, #1A1A2E 0%, #16213E 100%);
  color: #fff;
  border-radius: 0 0 20px 20px;
  margin-bottom: 20px;
  text-align: center;
}

.ev-num-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  color: #E8630A;
  border: 1px solid #E8630A;
  padding: 2px 10px;
  border-radius: 20px;
  margin-bottom: 8px;
}

.ev-detail-title {
  font-size: 26px;
  font-weight: 800;
  line-height: 1.2;
  margin: 0 0 8px;
  word-break: keep-all;
}

.ev-detail-subtitle {
  font-size: 14px;
  color: rgba(255,255,255,0.7);
  margin: 0 0 12px;
}

.ev-detail-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
}

.ev-meta-item {
  font-size: 13px;
  color: rgba(255,255,255,0.8);
  background: rgba(255,255,255,0.1);
  padding: 3px 10px;
  border-radius: 20px;
}

.ev-status-chip {
  font-size: 12px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 20px;
}

.ev-status-chip.ev-status-active { background: #E8630A; color: #fff; }
.ev-status-chip.ev-status-scheduled { background: #1A5276; color: #fff; }
.ev-status-chip.ev-status-ended { background: #555; color: #fff; }
.ev-status-chip.ev-status-draft { background: #444; color: #aaa; }
.ev-status-chip.ev-status-paused { background: #8B6914; color: #fff; }

.ev-detail-header .ev-timer-wrap {
  margin-top: 8px;
}

.ev-detail-header .ev-timer-label {
  font-size: 0.7rem;
  opacity: 0.6;
  margin-bottom: 6px;
}

.ev-detail-header .ev-timer {
  background: rgba(0,0,0,0.3);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,0.1);
}

@media (min-width: 768px) {
  .ev-detail-header {
    padding: 32px 24px 28px;
  }
  .ev-detail-title {
    font-size: 32px;
  }
}


/* ── 상세 본문 레이아웃 (단일 컬럼 모바일 퍼스트) ── */

.ev-detail-body {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 12px 100px; /* 하단 CTA sticky 여유 */
}

@media (min-width: 768px) {
  .ev-detail-body {
    padding: 0 20px 100px;
  }
}


/* ── 패널 카드 공통 ── */

.ev-panel-card {
  background: #fff;
  border-radius: 16px;
  padding: 20px;
  margin-bottom: 16px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.08);
}

.ev-panel-title {
  font-size: 15px;
  font-weight: 700;
  color: #1A1A2E;
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid #eee;
  display: flex;
  align-items: center;
  gap: 6px;
}

.ev-panel-title i { opacity: 0.6; }


/* ── 유의사항 accordion ── */

.ev-rules-card details { cursor: pointer; }
.ev-rules-card details[open] .ev-rules-chevron { transform: rotate(180deg); }

.ev-rules-toggle {
  cursor: pointer;
  list-style: none;
  -webkit-user-select: none;
  user-select: none;
  border-bottom: none;
  padding-bottom: 0;
  margin-bottom: 0;
}

.ev-rules-toggle::-webkit-details-marker { display: none; }

.ev-rules-chevron {
  margin-left: auto;
  transition: transform 0.2s ease;
  font-size: 0.8rem;
}

.ev-rules-body {
  padding-top: 12px;
  border-top: 1px solid #eee;
  margin-top: 12px;
  color: var(--cb-text-muted, #7A7268);
  line-height: 1.6;
}


/* ── 보상 리스트 ── */

.ev-reward-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ev-reward {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: #F8F5F0;
  border-radius: var(--ev-radius-sm);
}

.ev-reward-icon {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--ev-gold-bg);
  color: var(--ev-gold);
  font-size: 1rem;
  flex-shrink: 0;
}

.ev-reward-info { flex: 1; min-width: 0; }

.ev-reward-name {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--cb-text, #1A1714);
}

.ev-reward-points {
  font-family: var(--cb-font-mono, 'DM Mono', monospace);
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--ev-cherry);
}


/* ── 조건 아이템 ── */

.ev-cond-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  font-size: 0.85rem;
  border-bottom: 1px solid rgba(0,0,0,0.04);
}
.ev-cond-item:last-child { border-bottom: none; }
.ev-cond-item i { font-size: 1.1rem; flex-shrink: 0; }


/* ── CTA 고정 하단 바 ── */

.ev-cta-sticky {
  position: sticky;
  bottom: 0;
  left: 0; right: 0;
  padding: 12px 16px;
  background: rgba(26,26,46,0.95);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-top: 1px solid rgba(255,255,255,0.1);
  z-index: 100;
  display: flex;
}

.ev-cta-btn {
  display: block;
  width: 100%;
  padding: 14px;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 700;
  text-align: center;
  cursor: pointer;
  border: none;
  text-decoration: none;
  transition: all 0.2s ease;
}

.ev-cta-btn:hover { text-decoration: none; opacity: 0.9; transform: translateY(-1px); }

.ev-cta-btn.cherry { background: #E8630A; color: #fff; }
.ev-cta-btn.cherry:hover { color: #fff; }
.ev-cta-btn.gold { background: #C8882A; color: #fff; }
.ev-cta-btn.gold:hover { color: #fff; }
.ev-cta-btn:disabled { background: #555; color: #999; cursor: not-allowed; transform: none; opacity: 1; }


/* ── 관리자 패널 ── */

.ev-admin-panel {
  background: linear-gradient(135deg, #FFF8E1 0%, #FFF3CD 100%);
  border: 1px solid rgba(212,160,32,.2);
}


/* =====================================================
   GRAND OPENING HERO BANNER
   ===================================================== */

.ev-grand-hero {
  position: relative;
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  min-height: 280px;
  overflow: hidden;
  background: var(--ev-dark);
}

.ev-grand-hero-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0.78;
}

.ev-grand-hero-overlay {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 40px 20px;
  min-height: 280px;
  color: #fff;
  background: linear-gradient(
    135deg,
    rgba(26, 26, 46, 0.30) 0%,
    rgba(255, 107, 138, 0.08) 50%,
    rgba(197, 165, 90, 0.06) 100%
  );
}

.ev-grand-eyebrow {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--ev-cherry-light);
  margin-bottom: 6px;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.5);
}

.ev-grand-title {
  font-family: var(--cb-font-serif, 'Cormorant Garamond', Georgia, serif);
  font-size: 2.2rem;
  font-weight: 700;
  letter-spacing: 3px;
  margin-bottom: 6px;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.6), 0 1px 4px rgba(0, 0, 0, 0.4);
}

.ev-grand-period {
  font-size: 0.88rem;
  opacity: 0.9;
  margin-bottom: 16px;
  letter-spacing: 1.5px;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.5);
}

.ev-grand-hero .ev-timer-wrap {
  margin-top: 4px;
}

.ev-grand-hero .ev-timer-label {
  font-size: 0.72rem;
  opacity: 0.7;
  margin-bottom: 6px;
}

.ev-grand-hero .ev-timer {
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

@media (min-width: 768px) {
  .ev-grand-hero {
    min-height: 340px;
  }
  .ev-grand-hero-overlay {
    min-height: 340px;
    padding: 48px 28px;
  }
  .ev-grand-title {
    font-size: 2.8rem;
  }
}

@media (min-width: 1024px) {
  .ev-grand-hero {
    min-height: 380px;
  }
  .ev-grand-hero-overlay {
    min-height: 380px;
    padding: 56px 36px;
  }
  .ev-grand-title {
    font-size: 3.2rem;
  }
}


/* =====================================================
   FIRST ACTION PANEL (첫 활동 미션)
   ===================================================== */

.ev-first-action .ev-card-title {
  color: var(--ev-cherry);
}

.ev-fa-cards {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ev-fa-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border-radius: var(--ev-radius-sm);
  background: #F8F5F0;
  border: 1px solid var(--ev-border);
  transition: all var(--ev-transition);
}

.ev-fa-card.ev-fa-done {
  background: var(--ev-green-bg);
  border-color: rgba(46, 122, 68, 0.2);
}

.ev-fa-icon {
  font-size: 1.3rem;
  color: var(--cb-text-muted, #7A7268);
  flex-shrink: 0;
  width: 32px;
  text-align: center;
}

.ev-fa-done .ev-fa-icon {
  color: var(--ev-green);
}

.ev-fa-info {
  flex: 1;
  min-width: 0;
}

.ev-fa-label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--cb-text, #1A1714);
  margin-bottom: 2px;
}

.ev-fa-reward {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--ev-cherry);
}

.ev-fa-reward-done {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--ev-green);
}

.ev-fa-link {
  display: inline-block;
  font-size: 0.75rem;
  color: var(--ev-blue);
  text-decoration: none;
  margin-top: 2px;
}

.ev-fa-link:hover {
  text-decoration: underline;
}

/* Completion bonus */
.ev-fa-complete {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background: linear-gradient(135deg, rgba(46,122,68,0.08) 0%, rgba(46,122,68,0.15) 100%);
  border-radius: var(--ev-radius-sm);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--ev-green);
}

.ev-fa-complete i {
  font-size: 1.1rem;
  color: var(--ev-gold);
}

.ev-fa-bonus-hint {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background: var(--ev-gold-bg);
  border-radius: var(--ev-radius-sm);
  font-size: 0.82rem;
  color: var(--ev-gold-dark);
  border: 1px solid var(--ev-gold-border);
}


/* =====================================================
   AI REVIEW BANNER & RESULT (공통: bug_report, sns_share)
   ===================================================== */

.ev-ai-banner {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: linear-gradient(135deg, #0D0D1A 0%, #1A1A3A 100%);
  border-radius: var(--ev-radius-sm);
  color: #fff;
}

.ev-ai-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #00FF88;
  animation: ev-ai-blink 1.5s ease-in-out infinite;
  flex-shrink: 0;
}

@keyframes ev-ai-blink {
  0%, 100% { opacity: 1; box-shadow: 0 0 4px #00FF88; }
  50% { opacity: 0.4; box-shadow: none; }
}

.ev-ai-label {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  font-family: var(--cb-font-mono, 'DM Mono', monospace);
}

/* AI result boxes */
.ev-ai-result {
  border-top: 1px solid var(--ev-border);
  padding-top: 12px;
}

.ev-ai-box {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px;
  border-radius: var(--ev-radius-sm);
  font-size: 0.82rem;
  line-height: 1.45;
}

.ev-ai-box i {
  font-size: 1.2rem;
  flex-shrink: 0;
  margin-top: 1px;
}

.ev-ai-valid {
  background: var(--ev-green-bg);
  border: 1px solid rgba(46, 122, 68, 0.2);
  color: var(--ev-green);
}

.ev-ai-invalid {
  background: rgba(168, 56, 56, 0.06);
  border: 1px solid rgba(168, 56, 56, 0.15);
  color: #A83838;
}

.ev-ai-pending {
  background: var(--ev-gold-bg);
  border: 1px solid var(--ev-gold-border);
  color: var(--ev-gold-dark);
}

.ev-ai-box strong {
  display: block;
  font-size: 0.85rem;
  margin-bottom: 2px;
}

/* Patch hint (bug report) */
.ev-patch-hint {
  padding: 8px 10px;
  background: #F8F5F0;
  border-radius: var(--ev-radius-sm);
  border: 1px solid var(--ev-border);
}

.ev-patch-hint small {
  display: block;
  margin-bottom: 4px;
  font-size: 0.7rem;
  color: var(--cb-text-muted, #7A7268);
}

.ev-patch-code {
  font-family: var(--cb-font-mono, 'DM Mono', monospace);
  font-size: 0.75rem;
  margin: 0;
  padding: 8px;
  background: #1a1a2e;
  color: #e0e0e0;
  border-radius: 4px;
  overflow-x: auto;
  white-space: pre-wrap;
  word-break: break-all;
}


/* =====================================================
   BUG REPORT PANEL
   ===================================================== */

.ev-bugreport .ev-card-title {
  color: var(--ev-orange);
}

.ev-bug-tiers {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ev-bug-tier {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 10px;
  border-radius: var(--ev-radius-sm);
  background: #F8F5F0;
  font-size: 0.82rem;
}

.ev-bug-severity {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  padding: 2px 8px;
  border-radius: 3px;
  font-family: var(--cb-font-mono, 'DM Mono', monospace);
}

.ev-bug-critical {
  background: rgba(168, 56, 56, 0.12);
  color: #A83838;
}

.ev-bug-major {
  background: rgba(232, 124, 62, 0.12);
  color: var(--ev-orange);
}

.ev-bug-minor {
  background: rgba(59, 130, 246, 0.12);
  color: var(--ev-blue);
}

.ev-bug-suggestion {
  background: rgba(46, 158, 142, 0.12);
  color: var(--ev-teal);
}

.ev-bug-points {
  font-weight: 700;
  font-family: var(--cb-font-mono, 'DM Mono', monospace);
  color: var(--ev-cherry);
}

.ev-bug-note {
  font-size: 0.75rem;
  color: var(--cb-text-muted, #7A7268);
  margin: 0;
}

/* Bug history */
.ev-bug-history {
  border-top: 1px solid var(--ev-border);
  padding-top: 12px;
}

.ev-bug-entry {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 0;
  font-size: 0.78rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.04);
}

.ev-bug-entry:last-child {
  border-bottom: none;
}

.ev-bug-entry-date {
  color: var(--cb-text-muted, #7A7268);
  font-family: var(--cb-font-mono, 'DM Mono', monospace);
  font-size: 0.72rem;
}

.ev-status-approved { color: var(--ev-green); font-weight: 600; }
.ev-status-pending { color: var(--ev-gold); font-weight: 600; }
.ev-status-rejected { color: #A83838; font-weight: 600; }


/* =====================================================
   SNS SHARE PANEL
   ===================================================== */

.ev-sns .ev-card-title {
  color: var(--ev-purple);
}

.ev-sns-platforms {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ev-sns-plat {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--ev-radius-sm);
  background: #F8F5F0;
  border: 1px solid var(--ev-border);
  transition: all var(--ev-transition);
}

.ev-sns-plat.ev-sns-done {
  background: var(--ev-green-bg);
  border-color: rgba(46, 122, 68, 0.2);
}

.ev-sns-icon {
  font-size: 1.2rem;
  color: var(--cb-text-muted, #7A7268);
  width: 28px;
  text-align: center;
  flex-shrink: 0;
}

.ev-sns-done .ev-sns-icon {
  color: var(--ev-green);
}

.ev-sns-info {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-width: 0;
}

.ev-sns-name {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--cb-text, #1A1714);
}

.ev-sns-status {
  font-size: 0.72rem;
  font-weight: 600;
}

/* SNS point tiers */
.ev-sns-tiers {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ev-sns-tier {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 10px;
  border-radius: var(--ev-radius-sm);
  background: #F8F5F0;
  font-size: 0.78rem;
  color: var(--cb-text-muted, #7A7268);
  border-left: 3px solid transparent;
}

.ev-sns-tier.ev-sns-tier-done {
  background: var(--ev-green-bg);
  border-left-color: var(--ev-green);
  color: var(--ev-green);
  font-weight: 600;
}

.ev-sns-summary {
  padding: 8px 12px;
  background: var(--ev-cherry-bg);
  border-radius: var(--ev-radius-sm);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--ev-cherry);
  text-align: center;
}


/* =====================================================
   DUTCH AUCTION PANEL
   ===================================================== */

.ev-dutch .ev-card-title {
  color: var(--ev-gold);
}

.ev-dutch-price-wrap {
  text-align: center;
  padding: 16px 0;
}

.ev-dutch-price-label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--cb-text-muted, #7A7268);
  margin-bottom: 4px;
}

.ev-dutch-price {
  font-family: var(--cb-font-mono, 'DM Mono', monospace);
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--ev-cherry);
  letter-spacing: -0.5px;
}

/* Price drop bar */
.ev-dutch-bar-wrap {
  padding: 0 4px;
}

.ev-dutch-bar-labels {
  display: flex;
  justify-content: space-between;
  font-size: 0.68rem;
  color: var(--cb-text-muted, #7A7268);
  margin-bottom: 4px;
}

.ev-dutch-bar {
  height: 8px;
  background: #F0EBE4;
  border-radius: 4px;
  overflow: hidden;
}

.ev-dutch-bar-fill {
  height: 100%;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--ev-cherry) 0%, var(--ev-gold) 100%);
  transition: width 1s ease;
}

/* Next drop countdown */
.ev-dutch-next {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  background: var(--ev-gold-bg);
  border-radius: var(--ev-radius-sm);
  font-size: 0.82rem;
  color: var(--ev-gold-dark);
}

.ev-dutch-step {
  font-weight: 700;
  color: var(--ev-cherry);
  font-family: var(--cb-font-mono, 'DM Mono', monospace);
  font-size: 0.78rem;
}

/* Dutch promo (no config) */
.ev-dutch-promo {
  padding: 8px 0;
}

.ev-dutch-promo p {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--cb-text, #1A1714);
  margin-bottom: 10px;
}

.ev-dutch-benefits {
  list-style: none;
  padding: 0;
  margin: 0 0 12px;
}

.ev-dutch-benefits li {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 0;
  font-size: 0.82rem;
  color: var(--cb-text, #1A1714);
}

.ev-dutch-benefits li i {
  color: var(--ev-gold);
  font-size: 0.9rem;
}


/* =====================================================
   COLLECTION OPEN FORM PANEL
   ===================================================== */

.ev-collect-stat {
  display: flex;
  justify-content: center;
  gap: 24px;
  padding: 12px 0;
  border-bottom: 1px solid var(--ev-border);
  margin-bottom: 12px;
}

.ev-collect-num {
  text-align: center;
}

.ev-collect-num strong {
  display: block;
  font-family: var(--cb-font-mono, 'DM Mono', monospace);
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--ev-cherry);
}

.ev-collect-num small {
  font-size: 0.68rem;
  color: var(--cb-text-muted, #7A7268);
}

/* Collection progress */
.ev-collect-progress {
  margin-bottom: 12px;
}

.ev-collect-step {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  font-size: 0.82rem;
  color: var(--cb-text, #1A1714);
}

.ev-collect-step i {
  font-size: 1rem;
  width: 20px;
  text-align: center;
  flex-shrink: 0;
}

.ev-collect-step.ev-collect-done i {
  color: var(--ev-green);
}

.ev-collect-step span {
  flex: 1;
}


/* =====================================================
   CTA BUTTONS (공통 이벤트 액션)
   ===================================================== */

.ev-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 20px;
  background: linear-gradient(135deg, var(--ev-cherry-dark) 0%, var(--ev-cherry) 100%);
  color: #fff;
  border: none;
  border-radius: var(--ev-radius-sm);
  font-size: 0.88rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: all var(--ev-transition);
}

.ev-cta:hover {
  background: linear-gradient(135deg, var(--ev-cherry) 0%, var(--ev-cherry-light) 100%);
  color: #fff;
  text-decoration: none;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(255, 107, 138, 0.3);
}

.ev-cta-outline {
  background: transparent;
  border: 1.5px solid var(--ev-cherry);
  color: var(--ev-cherry);
}

.ev-cta-outline:hover {
  background: var(--ev-cherry-bg);
  color: var(--ev-cherry-dark);
  box-shadow: none;
}

/* Gold CTA */
.ev-cta-gold {
  background: linear-gradient(135deg, var(--ev-gold-dark) 0%, var(--ev-gold) 100%);
}

.ev-cta-gold:hover {
  background: linear-gradient(135deg, var(--ev-gold) 0%, var(--ev-gold-light) 100%);
  box-shadow: 0 4px 12px rgba(197, 165, 90, 0.3);
}

/* Disabled CTA */
.ev-cta:disabled,
.ev-cta.disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}


/* ev-hero and ev-grid already defined above (sections 3, list page grid) */


/* =====================================================
   PANEL-LEVEL OVERRIDES (작업3: 모바일 퍼스트 패널 UI)
   ===================================================== */

/* ── ① 출석 패널 (attendance) ── */
.ev-attend-panel .ev-panel-title i { color: var(--ev-teal); }

.ev-attend-streak {
  text-align: center;
  padding: 16px 0;
}
.ev-attend-streak-num {
  font-family: var(--cb-font-mono, 'DM Mono', monospace);
  font-size: 2.5rem;
  font-weight: 800;
  color: var(--ev-cherry);
  line-height: 1;
}
.ev-attend-streak-label {
  font-size: 0.85rem;
  color: var(--cb-text-muted, #7A7268);
  margin-top: 4px;
}

.ev-attend-progress { margin-bottom: 16px; }
.ev-attend-progress-info {
  display: flex;
  justify-content: space-between;
  font-size: 0.78rem;
  color: var(--cb-text-muted, #7A7268);
  margin-bottom: 6px;
}

.ev-milestone-heading {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--cb-text, #1A1714);
  margin: 16px 0 8px;
  padding-top: 12px;
  border-top: 1px solid #eee;
}


/* ── ② 첫 활동 패널 (first_action) ── */
.ev-fa-panel .ev-panel-title i { color: var(--ev-cherry); }

.ev-fa-desc {
  font-size: 0.72rem;
  color: var(--cb-text-muted, #7A7268);
  margin: 2px 0 4px;
}

.ev-fa-complete,
.ev-fa-bonus-hint {
  margin-top: 16px;
}


/* ── ③④⑤⑨ 리더보드 패널 (leaderboard) ── */
.ev-lb-panel .ev-panel-title i { color: var(--ev-gold); }

.ev-lb-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.ev-lb-header .ev-panel-title {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}
.ev-lb-refresh {
  background: none;
  border: 1px solid var(--ev-border);
  border-radius: 50%;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--cb-text-muted, #7A7268);
  transition: all 0.2s ease;
}
.ev-lb-refresh:hover {
  border-color: var(--ev-gold);
  color: var(--ev-gold);
}

/* 내 순위 카드 */
.ev-lb-myrank {
  background: linear-gradient(135deg, #1A1A2E 0%, #16213E 100%);
  color: #fff;
  border-radius: 12px;
  padding: 14px 16px;
  margin: 14px 0;
  text-align: center;
}
.ev-lb-myrank-label {
  font-size: 0.72rem;
  opacity: 0.7;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 4px;
}
.ev-lb-myrank-row {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 12px;
}
.ev-lb-myrank-num {
  font-family: var(--cb-font-mono, 'DM Mono', monospace);
  font-size: 2rem;
  font-weight: 800;
  color: var(--ev-gold);
}
.ev-lb-myrank-score {
  font-size: 0.88rem;
  opacity: 0.8;
}

/* Mining Reward Summary */
.ev-mining-summary {
  background: linear-gradient(135deg, #FFF8F2 0%, #FDF5ED 100%);
  border: 1px solid rgba(243, 112, 33, 0.2);
  border-radius: 12px;
  padding: 14px;
  margin: 10px 0 14px;
}
.ev-mining-hero {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
.ev-mining-hero-icon {
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  background: var(--cb-accent);
  color: #fff;
  border-radius: 10px;
  font-size: 18px;
  flex-shrink: 0;
}
.ev-mining-hero-text {
  display: flex; flex-direction: column; gap: 2px;
}
.ev-mining-hero-text strong {
  font-size: 0.95rem;
  color: var(--cb-accent);
  font-weight: 700;
}
.ev-mining-hero-text span {
  font-size: 0.78rem;
  color: var(--cb-text-sub);
}
.ev-mining-caps {
  display: flex;
  gap: 6px;
  margin-bottom: 8px;
}
.ev-mining-cap {
  flex: 1;
  text-align: center;
  padding: 8px 4px;
  background: #fff;
  border-radius: 8px;
  border: 1px solid #EDE6DC;
}
.ev-mining-cap-label {
  display: block;
  font-size: 0.68rem;
  color: var(--cb-text-muted);
  margin-bottom: 2px;
}
.ev-mining-cap-val {
  display: block;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--cb-text);
  font-family: 'DM Mono', monospace;
}
.ev-mining-bonus {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: 6px;
  border-top: 1px solid #EDE6DC;
  margin-top: 4px;
}
.ev-mining-bonus-item {
  display: flex; align-items: flex-start; gap: 6px;
  font-size: 0.75rem;
  color: var(--ev-gold-dark);
}
.ev-mining-bonus-item i {
  font-size: 0.7rem;
  color: var(--ev-gold);
  margin-top: 2px;
  flex-shrink: 0;
}
.ev-mining-bonus-item div {
  display: flex; flex-direction: column; gap: 1px;
}
.ev-mining-bonus-item strong {
  font-size: 0.78rem; font-weight: 700;
  color: var(--cb-text);
}
.ev-mining-bonus-item span {
  font-size: 0.68rem;
  color: var(--cb-text-muted);
}

/* My Mining Stats */
.ev-lb-mystats {
  background: linear-gradient(135deg, #F7F4EF 0%, #FAF7F2 100%);
  border: 1px solid var(--ev-border, #E8E2DA);
  border-radius: 12px;
  padding: 12px;
  margin: 10px 0;
}
.ev-lb-mystats-header {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--cb-text-sub);
  margin-bottom: 8px;
}
.ev-lb-mystats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}
.ev-lb-mystats-item {
  text-align: center;
  padding: 8px 4px;
  background: #fff;
  border-radius: 8px;
  border: 1px solid #EDE6DC;
}
.ev-lb-mystats-val {
  display: block;
  font-family: 'DM Mono', monospace;
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--cb-text);
  line-height: 1.2;
}
.ev-lb-mystats-label {
  display: block;
  font-size: 0.65rem;
  color: var(--cb-text-muted);
  margin-top: 2px;
}
.ev-lb-mystats-total {
  background: rgba(243, 112, 33, 0.06);
  border-color: rgba(243, 112, 33, 0.2);
}
.ev-lb-mystats-total .ev-lb-mystats-val {
  color: var(--cb-accent);
}
.ev-lb-mystats-rank .ev-lb-mystats-val {
  color: var(--ev-gold);
}

/* Top 3 Podium */
.ev-lb-podium {
  display: flex;
  gap: 8px;
  margin: 14px 0;
}
.ev-lb-podium-item {
  flex: 1;
  text-align: center;
  padding: 12px 6px;
  background: #F8F5F0;
  border-radius: 12px;
  border: 1px solid var(--ev-border);
}
.ev-lb-podium-1 {
  background: linear-gradient(135deg, rgba(197,165,90,0.1) 0%, rgba(197,165,90,0.2) 100%);
  border-color: var(--ev-gold-border);
}
.ev-lb-medal {
  font-size: 1.5rem;
  margin-bottom: 4px;
}
.ev-lb-podium-user {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--cb-text, #1A1714);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ev-lb-podium-score {
  font-size: 0.72rem;
  font-family: var(--cb-font-mono, 'DM Mono', monospace);
  color: var(--ev-cherry);
  font-weight: 700;
}

/* 4위~ 테이블 */
.ev-lb-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-bottom: 1px solid rgba(0,0,0,0.04);
  font-size: 0.82rem;
}
.ev-lb-row:last-child { border-bottom: none; }
.ev-lb-row-me { background: rgba(232,99,10,0.06); border-radius: 6px; }
.ev-lb-pos {
  width: 28px;
  text-align: center;
  font-weight: 700;
  color: var(--cb-text-muted, #7A7268);
  font-family: var(--cb-font-mono, 'DM Mono', monospace);
}
.ev-lb-user {
  flex: 1;
  font-weight: 600;
  color: var(--cb-text, #1A1714);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ev-lb-score {
  font-family: var(--cb-font-mono, 'DM Mono', monospace);
  font-weight: 700;
  color: var(--ev-cherry);
}

/* 순위별 보상 */
.ev-lb-prizes {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid #eee;
}
.ev-lb-prizes-title {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--cb-text, #1A1714);
  margin-bottom: 8px;
}
.ev-lb-prize-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  background: var(--ev-gold-bg);
  border-radius: var(--ev-radius-sm);
  margin-bottom: 4px;
  font-size: 0.82rem;
}
.ev-lb-prize-rank {
  font-weight: 700;
  color: var(--ev-gold-dark);
  width: 32px;
}
.ev-lb-prize-name {
  flex: 1;
  color: var(--cb-text, #1A1714);
}
.ev-lb-prize-pts {
  font-family: var(--cb-font-mono, 'DM Mono', monospace);
  font-weight: 700;
  color: var(--ev-cherry);
}

.ev-empty-state {
  text-align: center;
  padding: 24px 0;
  color: var(--cb-text-muted, #7A7268);
}
.ev-empty-state i {
  font-size: 2rem;
  opacity: 0.3;
  display: block;
  margin-bottom: 8px;
}
.ev-empty-state p {
  font-size: 0.85rem;
  margin: 0;
}


/* ── ⑥ 콜렉션 챌린지 패널 ── */
.ev-collect-panel .ev-panel-title i { color: var(--ev-blue); }

.ev-collect-done {
  text-align: center;
  padding: 24px 0;
  color: var(--ev-green);
  font-size: 1rem;
  font-weight: 700;
}
.ev-collect-done i {
  font-size: 2rem;
  display: block;
  margin-bottom: 8px;
}

.ev-collect-stats { margin-bottom: 16px; }
.ev-collect-stat-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  background: #F8F5F0;
  border-radius: 12px;
  border: 1px solid var(--ev-border);
}
.ev-collect-stat-icon {
  font-size: 1.5rem;
  color: var(--ev-blue);
  opacity: 0.7;
}
.ev-collect-stat-num {
  font-family: var(--cb-font-mono, 'DM Mono', monospace);
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--ev-cherry);
}
.ev-collect-stat-label {
  font-size: 0.78rem;
  color: var(--cb-text-muted, #7A7268);
  display: block;
}

.ev-collect-guide {
  margin-bottom: 16px;
  font-size: 0.82rem;
  color: var(--cb-text-muted, #7A7268);
  line-height: 1.5;
}
.ev-collect-guide i {
  color: var(--ev-blue);
  margin-right: 4px;
}

.ev-collect-actions { margin-top: 12px; }
.ev-collect-hint {
  font-size: 0.78rem;
  color: var(--cb-text-muted, #7A7268);
  text-align: center;
  margin-top: 10px;
}

.ev-collect-closed {
  text-align: center;
  padding: 20px 0;
  color: var(--cb-text-muted, #7A7268);
  font-size: 0.88rem;
}
.ev-collect-closed i { margin-right: 6px; }


/* ── ⑦ 버그 리포트 패널 ── */
.ev-bug-panel .ev-panel-title i { color: var(--ev-orange); }
.ev-bug-panel .ev-ai-banner { margin-bottom: 16px; }

.ev-bug-table {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 12px;
}
.ev-bug-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border-radius: var(--ev-radius-sm);
  background: #F8F5F0;
}
.ev-bug-severity-badge {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  padding: 3px 10px;
  border-radius: 4px;
  font-family: var(--cb-font-mono, 'DM Mono', monospace);
}
.ev-bug-row.ev-bug-critical .ev-bug-severity-badge {
  background: rgba(168,56,56,0.15);
  color: #A83838;
}
.ev-bug-row.ev-bug-major .ev-bug-severity-badge {
  background: rgba(232,124,62,0.15);
  color: var(--ev-orange);
}
.ev-bug-row.ev-bug-minor .ev-bug-severity-badge {
  background: rgba(59,130,246,0.15);
  color: var(--ev-blue);
}
.ev-bug-row.ev-bug-trivial .ev-bug-severity-badge {
  background: rgba(46,158,142,0.15);
  color: var(--ev-teal);
}

.ev-bug-history { margin-top: 16px; }
.ev-bug-history-title {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--cb-text, #1A1714);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}


/* ── ⑧ 추천인 패널 ── */
.ev-ref-panel .ev-panel-title i { color: var(--ev-green); }

.ev-ref-stat-card {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 6px;
  padding: 16px;
  background: #F8F5F0;
  border-radius: 12px;
  margin: 16px 0;
  text-align: center;
}
.ev-ref-stat-num {
  font-family: var(--cb-font-mono, 'DM Mono', monospace);
  font-size: 2rem;
  font-weight: 800;
  color: var(--ev-cherry);
}
.ev-ref-stat-label {
  font-size: 0.85rem;
  color: var(--cb-text-muted, #7A7268);
}

.ev-ref-guide {
  font-size: 0.78rem;
  color: var(--cb-text-muted, #7A7268);
  padding: 8px 12px;
  background: #F8F5F0;
  border-radius: var(--ev-radius-sm);
}
.ev-ref-guide i { color: var(--ev-blue); margin-right: 4px; }


/* ── ⑩ SNS 공유 패널 ── */
.ev-sns-panel .ev-panel-title i { color: var(--ev-purple); }
.ev-sns-panel .ev-ai-banner { margin-bottom: 16px; }

.ev-sns-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 16px;
}
.ev-sns-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 14px 10px;
  border-radius: 12px;
  background: #F8F5F0;
  border: 1px solid var(--ev-border);
  transition: all 0.2s ease;
}
.ev-sns-card.ev-sns-done {
  background: var(--ev-green-bg);
  border-color: rgba(46,122,68,0.2);
}
.ev-sns-card .ev-sns-icon {
  font-size: 1.5rem;
}
.ev-sns-card .ev-sns-name {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--cb-text, #1A1714);
}
.ev-sns-check {
  position: absolute;
  top: 6px;
  right: 6px;
  color: var(--ev-green);
  font-size: 0.9rem;
}

.ev-sns-panel .ev-sns-tiers { margin-bottom: 12px; }
.ev-sns-panel .ev-sns-summary { margin-top: 12px; }


/* ── ⑪ 더치 옥션 패널 ── */
.ev-dutch-panel .ev-panel-title i { color: var(--ev-gold); }

.ev-dutch-price-card {
  text-align: center;
  padding: 20px 0 16px;
}
.ev-dutch-price-card .ev-dutch-price-label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--cb-text-muted, #7A7268);
  margin-bottom: 6px;
}
.ev-dutch-price-card .ev-dutch-price {
  font-family: var(--cb-font-mono, 'DM Mono', monospace);
  font-size: 2.2rem;
  font-weight: 800;
  color: var(--ev-cherry);
}

.ev-dutch-panel .ev-dutch-bar-wrap { margin-bottom: 14px; }
.ev-dutch-panel .ev-dutch-next { margin-bottom: 16px; }


/* =====================================================
   ADMIN REVIEW LIST
   ===================================================== */

.ev-review-tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.ev-review-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: var(--ev-radius-pill);
  font-size: 0.82rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--cb-text-sub, #4A433B);
  background: var(--cb-surface-alt, #F8F5F0);
  border: 1px solid var(--ev-border);
  transition: all var(--ev-transition);
}

.ev-review-tab:hover {
  background: var(--ev-cherry-bg);
  border-color: var(--ev-cherry-border);
  color: var(--ev-cherry);
}

.ev-review-tab.active {
  background: var(--ev-cherry);
  border-color: var(--ev-cherry);
  color: #fff;
}

.ev-review-tab.active .badge {
  background: rgba(255,255,255,0.25) !important;
  color: #fff !important;
}

.ev-review-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ev-review-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: var(--ev-radius-sm);
  background: var(--ev-surface);
  border: 1px solid var(--ev-border);
  text-decoration: none;
  color: inherit;
  transition: all var(--ev-transition);
}

.ev-review-row:hover {
  background: var(--ev-cherry-bg);
  border-color: var(--ev-cherry-border);
  box-shadow: var(--ev-shadow-hover);
}

.ev-review-user {
  flex-shrink: 0;
  min-width: 100px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ev-review-content {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.ev-review-text {
  font-size: 0.82rem;
  color: var(--cb-text-sub, #4A433B);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ev-review-img-badge {
  flex-shrink: 0;
  color: var(--ev-blue);
  font-size: 0.9rem;
}

.ev-review-status {
  flex-shrink: 0;
}

@media (max-width: 575px) {
  .ev-review-row {
    flex-wrap: wrap;
    gap: 6px;
  }
  .ev-review-user {
    min-width: auto;
    flex-direction: row;
    gap: 8px;
    align-items: center;
  }
  .ev-review-content {
    width: 100%;
  }
}


/* =====================================================
   ENHANCED HISTORY CARDS (Bug Report / SNS Share)
   ===================================================== */

.ev-bug-entry-card {
  padding: 10px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.ev-bug-entry-card:last-child {
  border-bottom: none;
}

.ev-bug-entry-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
}

.ev-history-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 0.7rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: var(--ev-radius-pill);
}

.ev-badge-valid {
  background: var(--ev-green-bg);
  color: var(--ev-green);
}

.ev-badge-invalid {
  background: rgba(168, 56, 56, 0.08);
  color: #A83838;
}

.ev-badge-pending {
  background: var(--ev-gold-bg);
  color: var(--ev-gold-dark);
}

.ev-bug-entry-body {
  padding-left: 2px;
}

.ev-bug-entry-text {
  font-size: 0.78rem;
  color: var(--cb-text-sub, #4A433B);
  margin: 2px 0 4px;
  line-height: 1.4;
}

.ev-bug-entry-meta {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ev-bug-thumb {
  display: inline-block;
  width: 40px;
  height: 40px;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid var(--ev-border);
  flex-shrink: 0;
}

.ev-bug-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ev-bug-entry-points {
  font-size: 0.75rem;
  font-weight: 700;
  font-family: var(--cb-font-mono, 'DM Mono', monospace);
  color: var(--ev-green);
}

.ev-sns-platform-tag {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 600;
  padding: 1px 8px;
  border-radius: var(--ev-radius-pill);
  background: var(--ev-purple-bg);
  color: var(--ev-purple);
  margin-bottom: 2px;
}


/* =====================================================
   ATTENDANCE BANNER (가로 배너, 이벤트 리스트 상단)
   ===================================================== */

.ev-attend-banner {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  margin-bottom: 20px;
  background: linear-gradient(135deg, #1A3A2A 0%, #2A5A3A 100%);
  border: 1.5px solid rgba(46, 122, 68, 0.30);
  border-radius: var(--ev-radius);
  color: #fff;
  text-decoration: none;
  transition: all var(--ev-transition);
}

.ev-attend-banner:hover {
  box-shadow: var(--ev-shadow-hover);
  border-color: rgba(46, 122, 68, 0.50);
  color: #fff;
  text-decoration: none;
}

.ev-attend-icon {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(46, 122, 68, 0.30);
  border-radius: 50%;
  font-size: 1.3rem;
}

.ev-attend-body {
  flex: 1;
  min-width: 0;
}

.ev-attend-top {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}

.ev-attend-title {
  font-size: 0.92rem;
  font-weight: 600;
  margin: 0;
  line-height: 1.3;
  letter-spacing: -0.1px;
}

.ev-attend-desc {
  font-size: 0.78rem;
  opacity: 0.75;
  margin: 2px 0 0;
  line-height: 1.4;
}

.ev-attend-live {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.7rem;
  font-weight: 700;
  color: #4ADE80;
  letter-spacing: 1px;
}

.ev-live-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #4ADE80;
  animation: ev-pulse 1.5s infinite;
}

.ev-attend-right {
  flex-shrink: 0;
  text-align: right;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ev-attend-cta {
  font-size: 0.85rem;
  font-weight: 600;
  color: #4ADE80;
  display: flex;
  align-items: center;
  gap: 4px;
}

.ev-attend-banner:hover .ev-attend-cta i {
  transform: translateX(3px);
  transition: transform 0.2s ease;
}

.ev-attend-meta {
  font-size: 0.75rem;
  opacity: 0.7;
}

@media (max-width: 575px) {
  .ev-attend-banner {
    flex-wrap: wrap;
    padding: 14px 16px;
    gap: 12px;
  }
  .ev-attend-right {
    width: 100%;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
  }
}


/* =====================================================
   TEXT-FOCUSED EVENT CARD (이미지 없는 텍스트 카드)
   ===================================================== */

.ev-card--text {
  display: flex;
  align-items: stretch;
  border: 1.5px solid var(--ev-border);
  border-radius: var(--ev-radius);
  background: var(--ev-surface);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: all var(--ev-transition);
}

.ev-card--text:hover {
  border-color: var(--ev-cherry-border);
  box-shadow: var(--ev-shadow-hover);
  transform: translateY(-2px);
  color: inherit;
  text-decoration: none;
}

/* Type icon strip (left sidebar) */
.ev-card-type {
  flex: 0 0 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  color: rgba(255, 255, 255, 0.85);
}

/* Type gradient colors */
.ev-type-attendance     { background: linear-gradient(180deg, #1A3A2A 0%, #2A5A3A 100%); }
.ev-type-first_action   { background: linear-gradient(180deg, #2A1A3A 0%, #4A2A5A 100%); }
.ev-type-leaderboard    { background: linear-gradient(180deg, #3A2A00 0%, #5A4A10 100%); }
.ev-type-challenge      { background: linear-gradient(180deg, #1A2A1A 0%, #2A4A2A 100%); }
.ev-type-bug_report     { background: linear-gradient(180deg, #3A0A0A 0%, #5A1A1A 100%); }
.ev-type-referral       { background: linear-gradient(180deg, #0A1A3A 0%, #1A2A5A 100%); }
.ev-type-sns_share      { background: linear-gradient(180deg, #1A2A3A 0%, #2A3A5A 100%); }
.ev-type-auction_promo  { background: linear-gradient(180deg, #2A1A00 0%, #4A3A10 100%); }
.ev-type-signup_reward  { background: linear-gradient(180deg, #2A0A1A 0%, #4A1A2A 100%); }
.ev-type-lucky_draw     { background: linear-gradient(180deg, #1A0A3A 0%, #3A1A5A 100%); }
.ev-type-raffle         { background: linear-gradient(180deg, #1A0A3A 0%, #3A1A5A 100%); }
.ev-type-content_submit { background: linear-gradient(180deg, #1A2A3A 0%, #2A3A5A 100%); }

.ev-card--text .ev-card-body {
  flex: 1;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.ev-card--text .ev-card-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
  margin-bottom: 6px;
}

.ev-card--text .ev-card-status {
  font-size: 0.7rem;
}

.ev-card--text .ev-card-title {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--cb-text, #1A1714);
  line-height: 1.4;
  margin-bottom: 3px;
  letter-spacing: -0.2px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.ev-card--text:hover .ev-card-title {
  color: var(--ev-cherry-dark);
}

.ev-card--text .ev-card-desc {
  font-size: 0.78rem;
  color: var(--cb-text-muted, #7A7268);
  line-height: 1.5;
  margin-bottom: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.ev-card--text .ev-card-footer {
  margin-top: auto;
  padding-top: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid rgba(0, 0, 0, 0.05);
}

.ev-card--text .ev-card-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.73rem;
  color: var(--cb-text-muted, #7A7268);
}

.ev-card--text .ev-card-meta i {
  font-size: 0.68rem;
  opacity: 0.6;
}

.ev-card--text .ev-card-cta {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

/* Grid: 2 columns on tablet, no wide image cards */
@media (min-width: 576px) {
  .ev-card-type {
    flex: 0 0 56px;
    font-size: 1.4rem;
  }
}

@media (min-width: 1024px) {
  .ev-card--text .ev-card-body {
    padding: 16px 20px;
  }
}