@charset "UTF-8";
/*
 * 모바일 head_mo — common.css(PC 전용, body min-width 등) 미로드로
 * #campaign_detail_modal 오버레이·폭·2단 레이아웃이 깨지는 문제 보강.
 * campaign.css 는 head_mo.php 에서만 추가 로드.
 * head_pc 와 partial 공유이므로 좁은 뷰포트에서만 적용(PC 넓은 화면 레이아웃 유지).
 */

@media screen and (max-width: 1024px) {

#campaign_detail_modal.campaign_detailview_modal {
  --transition: all 0.35s ease;
}

/* common.css 의 .modal / .modal.show 대체 */
#campaign_detail_modal.modal.campaign_detailview_modal {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 100dvh;
  z-index: 10050;
  background: rgba(0, 0, 0, 0.48);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: var(--transition);
  pointer-events: none;
  opacity: 0;
  overflow: hidden;
  box-sizing: border-box;
}

#campaign_detail_modal.modal.campaign_detailview_modal.show {
  pointer-events: auto;
  opacity: 1;
}

/* 닫기 — 터치·safe area */
#campaign_detail_modal .modal_close {
  position: absolute;
  right: max(6px, env(safe-area-inset-right, 0px));
  top: max(6px, env(safe-area-inset-top, 0px));
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10060;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.12);
}

#campaign_detail_modal .modal_close img.icon {
  width: 22px;
  height: 22px;
  display: block;
}

/* 박스: 세로 플렉스, 본문만 스크롤 · 사이드(CTA)는 하단 고정 느낌 */
#campaign_detail_modal .modal_box.modal_layout {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  transform: none;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  max-width: 100%;
  height: 100%;
  max-height: 100%;
  margin: 0;
  padding-top: env(safe-area-inset-top, 0px);
  box-sizing: border-box;
  overflow: hidden;
  border-radius: 0;
}

#campaign_detail_modal.modal.show .modal_box {
  margin-top: 0;
  opacity: 1;
}

#campaign_detail_modal .modal_body {
  width: 100% !important;
  max-width: 100%;
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  margin: 0 !important;
  border-radius: 0;
}

#campaign_detail_modal .modal_side {
  width: 100% !important;
  max-width: 100%;
  position: relative;
  top: auto;
  left: auto;
  flex: 0 0 auto;
  border-radius: 0;
  box-shadow: none;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  padding: 1rem 1rem max(0.75rem, env(safe-area-inset-bottom, 0px));
  box-sizing: border-box;
}

#campaign_detail_modal .modal_body .detail_cont {
  padding: 1rem 0.875rem 1.5rem;
}

#campaign_detail_modal .modal_body .tab_navbox .tab_nav .link {
  font-size: 0.75rem;
  padding: 0.75rem 4px;
  word-break: keep-all;
}

#campaign_detail_modal .detail_info .infobox {
  flex-direction: column;
  align-items: stretch;
  gap: 0.5rem;
}

#campaign_detail_modal .detail_info .infotit {
  width: 100%;
}

#campaign_detail_modal .modal_side .btnbox {
  margin-top: 0.75rem;
}

#campaign_detail_modal .modal_side .btnbox .btn {
  width: 100%;
}

/* PC용 캠페인 신청·신청완료 모달 — 좁은 뷰포트(모바일)에서는 미사용, 노출 시 레이아웃만 가리고 JS는 그대로 */
#campaign_apply_modal.campaign_frm_modal,
#campaign_complete_modal.campaign_frm_modal {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
#campaign_apply_modal.campaign_frm_modal.show,
#campaign_complete_modal.campaign_frm_modal.show {
  display: none !important;
}

} /* max-width 1024px */