@charset "utf-8";

/* ================================================================
   보증놀이터 이벤트 게시판 스킨 스타일
   ================================================================ */

.ev-wrap { background:#f5f5f5; }

/* ── 배너 ────────────────────────────────── */
.ev-banner {
    display:flex; align-items:center; justify-content:space-between;
    background:linear-gradient(135deg, #e94560 0%, #c0392b 40%, #8e44ad 100%);
    border-radius:0;
    padding:24px 28px;
    position:relative;
    overflow:hidden;
    min-height:140px;
}
.ev-banner-text { position:relative; z-index:2; }
.ev-banner-title {
    font-size:18px; font-weight:800; color:#fff;
    margin:0 0 6px; letter-spacing:-0.3px;
}
.ev-banner-sub { font-size:12px; color:rgba(255,255,255,0.85); margin:0; line-height:1.6; }
.ev-banner-deco { position:absolute; right:20px; top:50%; transform:translateY(-50%); z-index:1; }
.ev-banner-circle {
    position:absolute; border-radius:50%;
    background:rgba(255,255,255,0.12);
}
.ev-banner-circle.c1 { width:100px; height:100px; right:-20px; top:-30px; }
.ev-banner-circle.c2 { width:60px;  height:60px;  right:50px;  bottom:-20px; }
.ev-banner-icon {
    font-size:52px; color:rgba(255,255,255,0.25);
    position:relative; z-index:1;
}

/* ── 탭 row ─────────────────────────────── */
.ev-tabs-row {
    display:flex; align-items:center; justify-content:space-between;
    background:#fff;
    border-bottom:1px solid #eee;
    padding:0 12px;
}
.ev-tabs { display:flex; gap:0; }
.ev-tab {
    display:inline-block;
    padding:11px 18px;
    font-size:13px; font-weight:600; color:#888;
    text-decoration:none;
    border-bottom:3px solid transparent;
    transition:all .15s;
}
.ev-tab:hover { color:#e94560; text-decoration:none; }
.ev-tab.active { color:#e94560; border-bottom-color:#e94560; }

.ev-tabs-btns { display:flex; align-items:center; gap:6px; }
.ev-write-btn {
    display:inline-flex; align-items:center; gap:5px;
    background:#e94560; color:#fff !important;
    border:none; border-radius:6px;
    padding:5px 14px; font-size:12px; font-weight:700;
    text-decoration:none; cursor:pointer; transition:background .15s;
}
.ev-write-btn:hover { background:#c0392b; color:#fff !important; text-decoration:none; }
.ev-icon-btn {
    display:inline-flex; align-items:center; justify-content:center;
    width:28px; height:28px; border-radius:6px;
    border:1px solid #e0e0e0; background:#f5f5f5; color:#666;
    font-size:13px; text-decoration:none; transition:all .15s;
}
.ev-icon-btn:hover { background:#e94560; color:#fff; border-color:#e94560; }

/* ── 공지 ────────────────────────────────── */
.ev-notice-list { background:#fff; border-bottom:1px solid #f0f0f0; }
.ev-notice-item {
    display:flex; align-items:center; gap:8px;
    padding:9px 14px; border-bottom:1px solid #f8f8f8; font-size:12px;
}
.ev-notice-item:last-child { border-bottom:none; }
.ev-notice-badge {
    display:inline-flex; align-items:center; gap:3px;
    background:#fff0f0; color:#e94560;
    font-size:11px; font-weight:700;
    padding:2px 8px; border-radius:10px; white-space:nowrap;
    flex-shrink:0;
}
.ev-notice-link { color:#333; text-decoration:none; flex:1; }
.ev-notice-link:hover { color:#e94560; }
.ev-notice-cmt { color:#e94560; font-size:11px; font-weight:700; white-space:nowrap; }

/* ── 진행중 카운터 ─────────────────────── */
.ev-progress-bar {
    padding:9px 14px;
    background:#fff;
    font-size:12px; color:#555;
    border-bottom:1px solid #f0f0f0;
    display:flex; align-items:center; gap:6px;
}
.ev-progress-bar i { color:#e94560; }
.ev-progress-bar strong { color:#e94560; font-weight:700; }

/* ── 카드 그리드 ──────────────────────── */
.ev-grid {
    display:grid;
    grid-template-columns: repeat(3, 1fr);
    gap:14px;
    padding:14px;
    background:#f5f5f5;
}
@media (max-width:760px) { .ev-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width:480px) { .ev-grid { grid-template-columns: 1fr; } }

/* 카드 */
.ev-card {
    background:#fff;
    border-radius:8px;
    overflow:hidden;
    box-shadow:0 1px 6px rgba(0,0,0,0.06);
    transition:transform .18s, box-shadow .18s;
}
.ev-card:hover { transform:translateY(-3px); box-shadow:0 4px 16px rgba(0,0,0,0.12); }

/* 카드 이미지 영역 */
.ev-card-img {
    display:block;
    position:relative;
    overflow:hidden;
    height:165px;
    background:#222;
    text-decoration:none;
}
.ev-card-img img {
    width:100%; height:100%;
    object-fit:cover;
    display:block;
    transition:transform .3s;
}
.ev-card:hover .ev-card-img img { transform:scale(1.04); }

/* 종료 카드 오버레이 */
.ev-ended .ev-card-img img { filter:grayscale(80%) brightness(0.6); }
.ev-ended-overlay {
    position:absolute; inset:0;
    background:rgba(0,0,0,0.48);
    display:flex; align-items:center; justify-content:center;
    z-index:2;
}
.ev-ended-overlay span {
    color:#fff; font-size:16px; font-weight:700;
    text-shadow:0 1px 4px rgba(0,0,0,0.5);
}

/* 이미지 없을 때 */
.ev-no-img {
    width:100%; height:100%;
    background:#2a2a3e;
    display:flex; align-items:center; justify-content:center;
    color:rgba(255,255,255,0.3); font-size:40px;
}

/* 상태 배지 */
.ev-badge {
    position:absolute; top:8px; left:8px; z-index:3;
    font-size:11px; font-weight:700; padding:3px 9px; border-radius:10px;
}
.ev-badge-active { background:#e94560; color:#fff; }
.ev-badge-end    { background:#888;    color:#fff; }

/* 좋아요/댓글 카운터 */
.ev-card-meta {
    position:absolute; bottom:6px; left:8px; z-index:3;
    display:flex; gap:8px;
    font-size:11px; color:#fff;
}
.ev-card-meta span { display:flex; align-items:center; gap:3px; text-shadow:0 1px 2px rgba(0,0,0,0.6); }

/* 카드 하단 텍스트 */
.ev-card-body { padding:10px 12px 12px; }
.ev-card-title {
    display:block;
    font-size:13px; font-weight:700; color:#1a1a2e;
    text-decoration:none; line-height:1.4;
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
    margin-bottom:4px;
}
.ev-card-title:hover { color:#e94560; }
.ev-card-period { font-size:11px; color:#aaa; display:block; }

/* ── 비어있을 때 ──────────────────────── */
.ev-empty {
    text-align:center; padding:60px 20px;
    font-size:15px; color:#bbb;
    background:#fff;
}
.ev-empty i { font-size:36px; margin-bottom:12px; display:block; color:#ddd; }

/* ── 페이지네이션 ─────────────────────── */
.ev-paging {
    padding:18px 14px;
    background:#fff;
    border-top:1px solid #f0f0f0;
    text-align:center;
}
.ev-paging .pg_wrap { margin:0; }
/* 페이지네이션 공통 스타일 재사용 (테마에서 상속) */

/* ── 하단 정보 섹션 ───────────────────── */
.ev-info-wrap { padding:0 0 20px; background:#f5f5f5; }

/* 설명 배너 */
.ev-desc-banner {
    margin:16px 14px;
    border-radius:10px;
    overflow:hidden;
    background:linear-gradient(120deg, #7b59c0 0%, #c16fba 50%, #e17ca8 100%);
    display:flex;
    align-items:stretch;
    min-height:140px;
    position:relative;
}
.ev-desc-banner-deco {
    width:8px;
    background:rgba(255,255,255,0.25);
    flex-shrink:0;
}
.ev-desc-banner-body {
    padding:22px 24px;
    flex:1;
}
.ev-desc-banner h3 {
    font-size:20px; font-weight:800; color:#fff;
    margin:0 0 10px;
}
.ev-desc-banner p {
    font-size:12px; color:rgba(255,255,255,0.88);
    line-height:1.8; margin:0;
}

/* 이용방법 / 주의사항 */
.ev-guide { margin:0 14px 14px; background:#fff; border-radius:8px; overflow:hidden; }
.ev-guide-header {
    background:#1a1a2e; color:#fff;
    font-size:15px; font-weight:700;
    padding:12px 18px;
    border-left:4px solid #e94560;
}
.ev-guide-list {
    margin:0; padding:14px 18px; list-style:none;
    display:flex; flex-direction:column; gap:14px;
}
.ev-guide-list li {
    display:flex; gap:14px; align-items:flex-start;
    font-size:13px; color:#333; line-height:1.7;
}
.ev-guide-num {
    flex-shrink:0;
    width:28px; height:28px;
    background:#e94560; color:#fff;
    border-radius:50%;
    font-size:11px; font-weight:800;
    display:flex; align-items:center; justify-content:center;
    margin-top:1px;
}
.ev-caution .ev-guide-num { background:#1a1a2e; }
.ev-guide-sub { font-size:12px; color:#888; display:block; margin-top:3px; }

.ev-caution-intro {
    padding:12px 18px;
    font-size:12px; color:#555; line-height:1.8;
    border-bottom:1px solid #f5f5f5;
}

/* ── 반응형 ── */
@media (max-width: 1024px) {
    .ev-banner { padding: 22px 20px; }
}
@media (max-width: 768px) {
    .ev-banner { padding: 20px 16px; min-height: 110px; }
    .ev-banner-deco { display: none; }
    .ev-banner-title { font-size: 15px; }
    .ev-banner-eyebrow { font-size: 10px; }
}
@media (max-width: 480px) {
    .ev-banner { padding: 16px 12px; min-height: 90px; }
    .ev-banner-title { font-size: 13px; }
}