/* =========================================================
   event.css
   이벤트 비주얼 공용 컴포넌트
   - index.html 의 이벤트 탭 패널
   - /sub/event01~04.html 단독 페이지
   두 곳에서 동일하게 재사용됩니다.

   각 이벤트의 보상/참여방법/유의사항 등 내용은 전부
   img_event01.jpg ~ img_event04.jpg 이미지 한 장에 포함되며,
   실제 동작이 필요한 버튼만 그 위에 position:absolute 로 올립니다.
   ========================================================= */

/* ---------- 이벤트 비주얼 (이미지 한 장 + 그 위에 올라가는 버튼들) ---------- */
.event-visual {
  position: relative;
  width: 100%;
}

.event-visual .placeholder {
  width: 100%;
  min-height: 200px;
}

/* 이미지 위 우측 하단 이벤트 기간 뱃지 */
.event-period-badge {
  position: absolute;
  right: 24px;
  bottom: 20px;
  padding: 8px 16px;
  background: rgba(0, 0, 0, 0.55);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  font-size: 13px;
  color: var(--color-text-dim);
}

.event-period-badge strong {
  color: var(--color-text);
}

/* 이미지 위에 절대배치로 올라가는 액션 버튼 영역 (공통 레이아웃) */
.event-visual-actions {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 20px;
  flex-wrap: nowrap;
  justify-content: center;
  white-space: nowrap;
}

/* 이벤트마다 이미지 속 버튼 위치가 다르므로 이벤트별로 좌표를 따로 둡니다.
   실제 img_event0X.jpg 완성 후 이벤트별로 bottom(%) 값을 조정해 주세요. */
.event01-actions {
  bottom: 11.2%;
  gap: 255px; /* 이벤트01 이미지 속 두 버튼 사이 간격에 맞춘 값 */
}

.event03-actions {
  bottom: 5.7%;
  right: 170px;
  left: auto;
  transform: none;
}

.event04-actions {
  bottom: 5.7%;
  right: 170px;
  left: auto;
  transform: none;
}

/* 이벤트01 액션 버튼 (친구 추천 아이디 입력 / 나의 추천 인원 확인)
   상단 회원가입·다운로드 버튼(btn-cta-join/down, 712x132)과는 별도 디자인이라
   전용 클래스와 이미지 파일명을 사용합니다. 실제 이미지(529x87) 크기에 맞췄습니다. */
.btn-cta-invite {
  width: 529px;
  height: 87px;
  background: url('/Content/Event/images/btn_invite.png') 0 0 no-repeat;
  flex: none;
  padding: 0;
  color: transparent;
}
@media (min-width: 769px) {
  .btn-cta-invite:hover {
    background-image: url('/Content/Event/images/btn_invite_on.png');
  }
}

.btn-cta-mycount {
  width: 529px;
  height: 87px;
  background: url('/Content/Event/images/btn_mycount.png') 0 0 no-repeat;
  flex: none;
  padding: 0;
  color: transparent;
}
@media (min-width: 769px) {
  .btn-cta-mycount:hover {
    background-image: url('/Content/Event/images/btn_mycount_on.png');
  }
}

/* 공식카페 바로가기 (이벤트03/04 공용). 실제 이미지(529x87) 크기에 맞췄습니다. */
.btn-cta-cafe {
  width: 529px;
  height: 87px;
  background: url('/Content/Event/images/btn_cafe.png') 0 0 no-repeat;
  flex: none;
  padding: 0;
  color: transparent;
}
@media (min-width: 769px) {
  .btn-cta-cafe:hover {
    background-image: url('/Content/Event/images/btn_cafe_on.png');
  }
}

/* ---------- 주의사항 리스트 (모달 내 친구 목록 등에서도 재사용) ---------- */
.notice-list {
  /* max-width: 900px; */
  height:356px;
  overflow-y:scroll;
  margin: 0 auto;
  font-size: 80px;
  line-height:1em;
  color: var(--color-text-dim);
  border:solid 2px var(--color-point);
  background:#332d21;
}

.notice-list li {
  position: relative;
  padding-left: 14px;
  margin-bottom: 8px;
  color:#beada1;
}

/* ---------- 768px 이하 모바일 레이아웃 ----------
   375 고정 캔버스 기준(js/common.js 의 zoom 대상과 동일). 모바일 이미지는
   2배수(750 기준)로 작업되므로 width/height/gap/right 등의 px 값은 전부
   "실측 픽셀 / 2" 입니다. event-section 좌우 margin을 3px로 맞춰(main.css)
   img_event0X_mo.jpg(734px 실측, 절반 367px)와 폭이 일치하므로, 아래 위치값은
   실제 이미지를 직접 보고 좌표를 잡은 값입니다. 다만 눈대중 좌표라 몇 px 정도
   어긋날 수 있어, 실제로 띄워보고 미세 조정이 필요할 수 있습니다.
   (percent(%) 값은 캔버스 크기와 무관한 비율이라 절반 계산 대상이 아닙니다) */
@media (max-width: 768px) {
  /* 이벤트 기간은 이미지 상단에 이미 크게 들어가 있어(스크린샷 확인 완료),
     하단 뱃지를 그대로 두면 이벤트03/04의 "공식 카페 바로가기" 버튼과 겹칩니다.
     중복 정보이기도 해서 모바일에서는 숨김 처리했습니다. */
  .event-period-badge {
    display: none;
  }

  /* 이벤트01: 이미지 속 두 버튼이 좌우 끝까지 꽉 차게(margin 없이) 배치되어 있어
     기본값(가운데 정렬)을 풀고 양끝 정렬로 전환.
     실측(2배수): btn_invite_mo/btn_mycount_mo 360x65 → 절반 180x33 */
  .event01-actions {
    left: 0;
    right: 0;
    bottom: 13%;
    transform: none;
    justify-content: space-between;
    gap: 7px;
  }

  .event03-actions,
  .event04-actions {
    bottom: 3%;
    right: 9px;
  }

  /* 친구 추천/카페 바로가기 버튼 - 실측(2배수): btn_invite_mo/btn_mycount_mo 360x65,
     btn_cafe_mo 374x65 → 절반 180x33 / 187x33 */
  .btn-cta-invite,
  .btn-cta-mycount {
    width: 180px;
    height: 33px;
    background-size: contain;
  }
  .btn-cta-cafe {
    width: 187px;
    height: 33px;
  }
  .btn-cta-invite {
    background-image: url('/Content/Event/images/btn_invite_mo.png');
    background-size: contain;
  }
  .btn-cta-invite:active {
    background-image: url('/Content/Event/images/btn_invite_mo_on.png');
  }
  .btn-cta-mycount {
    background-image: url('/Content/Event/images/btn_mycount_mo.png');
    background-size: contain;
  }
  .btn-cta-mycount:active {
    background-image: url('/Content/Event/images/btn_mycount_mo_on.png');
  }
  .btn-cta-cafe {
    background-image: url('/Content/Event/images/btn_cafe_mo.png');
    background-size: contain;
  }
  .btn-cta-cafe:active {
    background-image: url('/Content/Event/images/btn_cafe_mo_on.png');
  }

  /* notice-list 는 항상 모달(#my-invite-list) 안에서만 쓰여서 zoom 캔버스 밖에
     있는 요소입니다 - 그래서 여기 값은 절반으로 줄이지 않고 실제 px 그대로 둡니다. */
  .notice-list {
    height: 130px;
    font-size: 24px;
    border-width: 1px;
  }
}