@charset "utf-8";

/* =========================================================
   event.css  —  이벤트 목록(list) / 상세보기(read) 공통 스타일
   ========================================================= */
:root{
  --ev-max:1040px;               /* 콘텐츠 폭 (cs/mypage와 동일) */
  --ev-tab-track:#f1f2f4;        /* 탭 트랙 배경 */
  --ev-tab-from:#e2231a;         /* 활성 탭 그라데이션(밝은쪽) */
  --ev-tab-to:#cd0111;           /* 활성 탭 그라데이션(브랜드 레드) */
  --ev-thumb-bg:#f3f3f3;         /* 썸네일 로딩 전 배경 */
  --ev-badge-ready:#9a9da3;      /* 준비중 라벨 */
  --ev-badge-end:#5f636b;        /* 종료 라벨 */
  --ev-mask:rgba(20,22,28,.6);  /* 종료 마스크 */
  --ev-btn-line:#d6d6d6;
  --ev-tab-active:#222;          /* 추가: 활성 탭 배경(라이트) */
}

/* ---- 레이아웃 / 타이틀 ---- */
.event-page{max-width:var(--ev-max);margin:0 auto;padding:44px 20px 80px;color:var(--color-text-default);}
.event-page__title{text-align:center;font-size:1.9rem;font-weight:500;letter-spacing:-0.03em;color:var(--color-text-default);font-family:'NoonnuBasicGothic', sans-serif;margin-bottom:40px;}

/* =========================================================
   탭 (진행중 / 종료) — radio 토글
   ========================================================= */
.event-tabs__radio{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none;}
.event-tabs__nav{display:flex;max-width:520px;margin:0 auto 40px;background:var(--ev-tab-track);}
.event-tabs__btn{flex:1;text-align:center;padding:14px 10px;font-size:.98rem;font-weight:700;color:var(--color-text-sub);cursor:pointer;transition:color .2s,background .2s;}
/* 활성 세그먼트 */
#ev-tab-live:checked ~ .event-tabs__nav label[for="ev-tab-live"],
#ev-tab-end:checked  ~ .event-tabs__nav label[for="ev-tab-end"]{color:#fff;background:var(--ev-tab-active);}
/* 패널 표시 */
.event-tabs__panel{display:none;}
#ev-tab-live:checked ~ .event-tabs__panel--live{display:block;}
#ev-tab-end:checked  ~ .event-tabs__panel--end{display:block;}

/* =========================================================
   이벤트 카드 그리드 (한 줄 3개)
   ========================================================= */
.event-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:30px 24px;}
.event-card__link{display:block;}
.event-card__thumb{position:relative;display:block;overflow:hidden;background:var(--ev-thumb-bg);transition:transform .2s ease,box-shadow .2s ease;}
.event-card__thumb img{width:100%;height:auto;display:block;}
.event-card__title{display:block;margin-top:14px;font-size:.95rem;font-weight:600;color:var(--color-text-default);line-height:1.45;letter-spacing:-0.01em;transition:color .15s;}

/* hover (진행/준비 카드만) */
.event-card:not(.event-card--end) .event-card__link:hover .event-card__thumb{transform:translateY(-4px);box-shadow:0 8px 14px rgba(0,0,0,.05);}
.event-card:not(.event-card--end) .event-card__link:hover .event-card__title{color:var(--point);}

/* ---- 라벨 (좌상단) ---- */
.event-card__badge{position:absolute;top:0;left:0;z-index:2;padding:5px 12px;font-size:.78rem;font-weight:700;line-height:1.4;color:#fff;letter-spacing:-0.02em;}
.event-card__badge--live{background:var(--point);}          /* 진행중 */
.event-card__badge--ready{background:var(--ev-badge-ready);} /* 준비중 */
.event-card__badge--end{background:var(--ev-badge-end);}     /* 종료 */

/* ---- 종료 카드 (마스크 + 안내문구) ---- */
.event-card--end .event-card__thumb img{filter:grayscale(.8) brightness(.6);}
.event-card__mask{position:absolute;inset:0;z-index:1;display:flex;align-items:center;justify-content:center;padding:0 16px;text-align:center;font-size:.95rem;font-weight:600;color:#fff;background:var(--ev-mask);}

/* =========================================================
   상세보기 (read)
   ========================================================= */
/* 상단 : 뒤로가기 (우측 정렬) */
.event-view__head{display:flex;justify-content:flex-end;    /* ★ 우측 끝 정렬 */align-items:center;margin-bottom:26px;}
.event-view__back{padding:8px 16px;font-size:.88rem;font-weight:500;color:var(--color-text-default);background:transparent;border:1px solid var(--btn-line-default);border-radius:4px;transition:border-color .15s,color .15s;}

/* 이벤트 이미지 */
.event-view__image{overflow:hidden;background:var(--ev-thumb-bg);margin-bottom:42px;}
.event-view__image img{width:100%;height:auto;display:block;}

/* 본문(가운데 정렬) */
.event-view__desc{max-width:680px;margin:0 auto 52px;text-align:center;}
.event-view__desc p{margin-bottom:24px;font-size:.98rem;line-height:1.95;color:var(--color-text-sub);}
.event-view__desc p:last-child{margin-bottom:0;}
.event-view__notes{margin-top:4px;}
.event-view__notes li{font-size:.92rem;line-height:1.95;color:var(--color-text-sub);}

/* 하단 이벤트 목록 제목(선택) */
.event-view__list-title{font-size:1.05rem;font-weight:800;color:var(--color-text-default);margin-bottom:20px;}

/* 전체보기 버튼 */
.event-view__more{margin-top:60px;text-align:center;}
.btn-event-all{min-width:200px;height:52px;padding:20px 30px;font-size:.98rem;font-weight:600;color:var(--color-text-default);background:transparent;border:1px solid var(--btn-line-default);border-radius:4px;transition:border-color .15s,color .15s;}


/* =========================================================
   반응형
   ========================================================= */
/* 태블릿 : 2열 */
@media (max-width:1024px){
  .event-page{padding:36px 20px 64px;}
  .event-grid{grid-template-columns:repeat(2,1fr);gap:24px 20px;}
  .event-view__related{display:none;}   /* 이벤트상세보기에서 하단 이벤트목록 미노출 */
  .event-view__head{margin-bottom:20px;}
}
/* 모바일 : 1열 */
@media (max-width:560px){
  .event-page{padding:20px 16px 35px;}
  .event-page__title{font-size:1.5rem;margin-bottom:28px;}
  .event-tabs__nav{margin-bottom:26px;}
  .event-tabs__btn{padding:12px 8px;font-size:.9rem;}
  .event-grid{grid-template-columns:1fr;gap:22px;}
  .event-view__image{margin-bottom:32px;}
  .event-view__desc{margin-bottom:40px;}
  .event-view__desc p{font-size:.94rem;}
  .btn-event-all{width:100%;padding:15px 30px;}
}


/* =========================================================
   이벤트 목록 - NEW
   ========================================================= */
.evl-page{
  --evl-line:#e5e5ea;
  --evl-point:var(--point, #cd0111);
  --evl-thumb-bg:#f2f3f5;
  --evl-badge-end:#9a9da3;
  --evl-surface:#ffffff;
  --evl-max:1040px;   /* 콘텐츠 폭 (이벤트 상세 --ev-max와 동일) */

  max-width:var(--evl-max);
  margin:0 auto;
  padding:44px 20px 80px;
  color:var(--color-text-default);
}

/* ---- 타이틀 ---- */
.evl-page__title{text-align:center;font-size:1.9rem;font-weight:500;letter-spacing:-0.03em;color:var(--color-text-default);font-family:'NoonnuBasicGothic', sans-serif;margin-bottom:30px;}

/* ---- 상단배너 ---- */
.evl-banner{margin-bottom:18px;}
.evl-banner__img{display:block;width:100%;height:auto;}

/* 기본(데스크탑) : PC만 노출 */
.evl-banner__img--tab,
.evl-banner__img--mo{display:none;}

/* ---- 탭메뉴 ---- */
.evl-filter{display:flex;border-bottom:1px solid var(--evl-line);margin-bottom:4px;}
.evl-filter__item{position:relative;padding:12px 26px;font-size:.92rem;font-weight:600;color:var(--color-text-sub);background:none;border:0;cursor:pointer;transition:color .15s;}
.evl-filter__item:hover{color:var(--color-text-default);}
.evl-filter__item.is-active{color:var(--evl-point);}
.evl-filter__item.is-active::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--evl-point);}

/* ---- 이벤트 목록 ---- */
.evl-list{list-style:none;margin:0;padding:0;}
.evl-item{border-bottom:1px dashed var(--evl-line);}
.evl-item__link{display:flex;align-items:center;gap:26px;padding:20px 4px;color:inherit;transition:background .15s;}
.evl-item__link:hover{background:rgba(0,0,0,.015);}
.evl-item--empty{padding: 10px;border: unset;}

/* 썸네일 (영역만) */
.evl-item__thumb{flex:0 0 auto;display:block;width:360px;aspect-ratio:16 / 7;background:var(--evl-thumb-bg);border-radius:2px;overflow:hidden;}
.evl-item__thumb img{width:100%;height:100%;object-fit:cover;display:block;}

/* 정보 */
.evl-item__body{display:block;min-width:0;flex:1;}
.evl-item__head{display:flex;align-items:center;gap:14px;margin-bottom:16px;}
.evl-item__title{min-width:0;font-size:1rem;font-weight:700;line-height:1.4;color:var(--color-text-default);word-break:break-all;}
.evl-item__period{display:flex;align-items:center;gap:14px;}
.evl-item__period-label{flex:0 0 auto;font-style:normal;font-size:.9rem;font-weight:700;color:var(--color-text-default);}
.evl-item__period-date{font-size:.9rem;color:var(--color-text-sub);font-family:'Roboto',sans-serif;}

/* 상태 뱃지 */
.evl-badge{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;min-width:50px;height:24px;padding:0 8px;font-style:normal;font-size:.68rem;font-weight:600;color:#fff;border-radius:2px;}
.evl-badge--ing{background:var(--evl-point);}
.evl-badge--end{background:var(--evl-badge-end);}

/* 종료 이벤트 : 살짝 흐리게 */
.evl-item.is-end .evl-item__title{color:var(--color-text-sub);}

/* ---- 더보기(모바일 전용) ---- */
.evl-more-wrap{display:none;margin-top:16px;}
.evl-more{width:100%;height:46px;font-size:.92rem;font-weight:600;color:var(--color-text-default);background:#fff;border:1px solid var(--color-line);border-radius:4px;cursor:pointer;transition:border-color .15s,color .15s;}
.evl-more:hover{border-color:var(--evl-point);color:var(--evl-point);}

/* 페이지네이션은 layout.css 공통(.pagination) 사용 */
.pagination__dots{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:34px;color:var(--color-text-sub);}

/* ---- 반응형 ---- */
@media (max-width:1024px){
  .evl-page{padding:36px 20px 64px;}
  .evl-page__title{font-size:1.6rem;margin-bottom:24px;}
  /* 배너 : 태블릿용만 노출 */
  .evl-banner__img--pc{display:none;}
  .evl-banner__img--tab{display:block;}
  .evl-item__link{gap:20px;padding:18px 4px;}
  .evl-item__thumb{width:280px;}
  .evl-item__head{margin-bottom:12px;}
}

@media (max-width:767px){
  .evl-page{padding:20px 16px 35px;}
  .evl-page__title{font-size:1.4rem;margin-bottom:18px;}
  /* 배너 : 모바일용만 노출 */
  .evl-banner__img--tab{display:none;}
  .evl-banner__img--mo{display:block;}
  .evl-banner{margin-bottom:12px;}
  /* 탭 : 화면폭 3등분 */
  .evl-filter__item{flex:1;padding:12px 0;text-align:center;font-size:.9rem;}
  /* 목록 : 세로 카드 */
  .evl-item__link{flex-direction:column;align-items:stretch;gap:12px;padding:18px 0;}
  .evl-item__link:hover{background:none;}
  .evl-item__thumb{width:100%;aspect-ratio:16 / 7;}
  .evl-item__head{gap:10px;margin-bottom:10px;}
  .evl-item__title{font-size:.95rem;}
  .evl-badge{min-width:52px;height:24px;font-size:.68rem;padding:0 8px;}
  .evl-item__period{gap:12px;}
  .evl-item__period-label{font-size:.86rem;}
  .evl-item__period-date{font-size:.86rem;}
  /* 더보기 표시 / 페이지네이션 숨김 */
  .evl-more-wrap{display:block;}
  .evl-page .pagination{display:none;}
}
@media (max-width:380px){
  .evl-item__title{font-size:.9rem;}
  .evl-item__period-date{font-size:.8rem;}
}

/* ---- 이벤트 종료 모달팝업 ---- */
.evl-modal{--evl-modal-surface:#ffffff;position:fixed;inset:0;z-index:1000;display:none;}
.evl-modal.is-open{display:block;}
.evl-modal__dim{position:absolute;inset:0;background:rgba(0,0,0,.5);}
.evl-modal__box{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:calc(100% - 40px);max-width:400px;
  background:var(--evl-modal-surface);
  border-radius:10px;overflow:hidden;
  box-shadow:0 20px 60px rgba(0,0,0,.25);
  animation:evlUp .22s ease;
}
@keyframes evlUp{from{opacity:0;transform:translate(-50%,-46%);}to{opacity:1;transform:translate(-50%,-50%);}}
.evl-modal__head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 20px;border-bottom:1px solid var(--color-line);}
.evl-modal__title{font-size:1.05rem;font-weight:700;color:var(--color-text-default);}
.evl-modal__close{width:32px;height:32px;display:flex;align-items:center;justify-content:center;color:var(--color-text-sub);background:none;border:0;cursor:pointer;}
.evl-modal__close:hover{color:var(--color-text-default);}
.evl-modal__close svg{width:20px;height:20px;}
.evl-modal__body{padding:30px 20px;text-align:center;}
.evl-modal__text{font-size:.95rem;line-height:1.6;color:var(--color-text-default);}
.evl-modal__foot{padding:0 20px 20px;text-align:center;}
.evl-modal__confirm{
  min-width:110px;height:44px;padding:0 24px;
  font-size:.95rem;font-weight:700;color:#fff;
  background:var(--point, #cd0111);
  border:0;border-radius:4px;cursor:pointer;
}

html.evl-modal-open,
body.evl-modal-open{overflow:hidden;}

@media (max-width:560px){
  .evl-modal__box{width:calc(100% - 40px);max-width:340px;}
  .evl-modal__body{padding:26px 18px;}
  .evl-modal__text{font-size:.9rem;}
}