/*
  이벤트 상세(CH-U-EV-01-02) — 참여 버튼 영역과 상세 이미지.

  목업(`CH-U-EV-01-02-03.html`)은 버튼(`.check_btn`)을 출석/마일리지 래퍼
  `.event_mileage_area` **안에만** 정의한다. 출석체크는 구현하지 않으므로 래퍼는 의미에 맞는
  `.event_entry_area` 를 쓰고, 목업의 배치·시각 스타일만 그대로 옮겼다.
  목업 원본(`css/page/event.css`)은 수정하지 않는다.

  상세 이미지는 목업이 PC/모바일 2장을 전제해 크기 규칙이 없다 — 우리는 서버가 준 한 장을
  콘텐츠 폭에 맞추고 비율을 유지한다(가로 스크롤·찌그러짐 방지).
*/
.page-event-detail main .event_img_area img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
}

.page-event-detail main .event_entry_area {
  padding: 40px 0;
  border-left: 1px solid var(--color-line);
  border-right: 1px solid var(--color-line);
}

.page-event-detail main .event_entry_area .check_btn {
  display: block;
  width: 460px;
  height: 48px;
  margin: 0 auto;
  padding: 0;
  border: 1px solid #ddd;
  border-radius: 4px;
  background: #597fd0;
  color: #fff;
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 150%;
}

/* 마감·완료·조건 미충족 — 목업 `.check_btn.complete` 와 같은 회색이다 */
.page-event-detail main .event_entry_area .check_btn.complete {
  border: 1px solid #ddd;
  background: #ececec;
  color: var(--color-text-light);
}

.page-event-detail main .event_entry_area .check_btn:disabled {
  cursor: default;
}

@media (max-width: 1024px) {
  .page-event-detail main .event_entry_area {
    border: 0;
  }
}

@media (max-width: 768px) {
  .page-event-detail main .event_entry_area {
    padding: 32px 20px;
  }

  .page-event-detail main .event_entry_area .check_btn {
    width: 100%;
  }
}