@charset "utf-8";
/* =====================================================================
   캠페인 신청 팝업(모달) — 체험단 신청하기
   - 사이트 톤: 플랫 / 코랄 / Pretendard / 정수 px
   - 기존 신청 폼(#ex_form)을 그대로 감싸 모달로 표시 (JS/필드명 변경 없음)
   ===================================================================== */
.wj_apply_bar{
  --pt: var(--pointColor, #FF4E4E); --pt-strong:#D23B3B; --pt-hover:#C63A3A;
  --ink:#1a1d21; --ink2:#5b6169; --ink3:#8b9199; --line:#e8eaed; --line2:#dcdfe4; --soft:#f7f8fa;
  margin:34px 0 10px; text-align:center;
}
.wj_apply_btn{
  display:inline-block; min-width:280px; height:58px; line-height:56px; padding:0 34px;
  border:1px solid #D23B3B; border-radius:12px; background:#D23B3B; color:#fff !important;
  font-size:18px; font-weight:700; letter-spacing:-.02em; text-align:center; text-decoration:none;
  cursor:pointer; transition:background .15s ease;
}
.wj_apply_btn:hover{ background:#C63A3A; border-color:#C63A3A; color:#fff !important; }
.wj_apply_btn:focus-visible{ outline:2px solid #1a1d21; outline-offset:2px; }
.wj_apply_btn.done{
  background:#f7f8fa; border-color:#dcdfe4; color:#8b9199 !important; cursor:default;
}
.wj_apply_note{ margin:12px 0 0; font-size:14px; color:#8b9199; line-height:1.6; }

/* 요약 영역의 기존 CTA(리뷰 신청) - 신청 창을 여는 주 버튼으로 통일 */
.review_btn a{
  display:flex !important; align-items:center; justify-content:center;
  min-height:54px !important; padding:0 20px !important; border-radius:12px !important;
  background:#D23B3B !important; border:1px solid #D23B3B !important; color:#fff !important;
  font-size:17px !important; font-weight:700 !important; letter-spacing:-.02em; text-decoration:none !important;
}
.review_btn a:hover{ background:#C63A3A !important; border-color:#C63A3A !important; color:#fff !important; }
.review_btn a.disabled{
  background:#f7f8fa !important; border:1px solid #dcdfe4 !important; color:#8b9199 !important; cursor:default;
}

/* ---------- 모달 ---------- */
.wj_modal{ display:none; position:fixed; inset:0; z-index:10000; }
.wj_modal.on{ display:block; }
.wj_modal .wj_modal_dim{ position:absolute; inset:0; background:rgba(20,23,26,.55); }
.wj_modal .wj_modal_panel{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:calc(100% - 32px); max-width:760px; max-height:90vh; display:flex; flex-direction:column;
  background:#fff; border-radius:16px; overflow:hidden; box-shadow:0 12px 40px rgba(0,0,0,.22);
}
.wj_modal .wj_modal_head{
  flex:0 0 auto; display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:20px 24px; border-bottom:1px solid #e8eaed; background:#fff;
}
.wj_modal .wj_modal_head h3{
  margin:0; padding:0; border:0; background:none;
  font-size:20px; font-weight:800; letter-spacing:-.02em; color:#1a1d21; line-height:1.3;
}
.wj_modal .wj_modal_x{
  flex:0 0 auto; width:38px; height:38px; padding:0; border:1px solid #e8eaed; border-radius:10px;
  background:#fff; color:#5b6169; font-size:22px; line-height:1; cursor:pointer;
}
.wj_modal .wj_modal_x:hover{ background:#f7f8fa; color:#1a1d21; }
.wj_modal .wj_modal_body{ flex:1 1 auto; overflow-y:auto; padding:22px 24px 26px; -webkit-overflow-scrolling:touch; }

/* 모달 안에서는 기존 섹션 제목 숨김(모달 헤더가 대신함) */
.wj_modal .wj_modal_body h3.appply{ display:none !important; }

/* ---------- 신청 폼 재정리 ---------- */
.wj_modal table.apply{ width:100% !important; border-collapse:collapse; border-top:0 !important; margin:0 !important; }
.wj_modal table.apply colgroup{ display:none; }
.wj_modal table.apply tr{ display:block; padding:0 0 20px; border-bottom:1px solid #f0f1f3; margin-bottom:20px; }
.wj_modal table.apply tr:last-of-type{ border-bottom:0; margin-bottom:0; padding-bottom:0; }
.wj_modal table.apply th{
  display:block !important; width:auto !important; padding:0 0 10px !important; border:0 !important;
  background:none !important; text-align:left !important;
  font-size:13px !important; font-weight:800 !important; color:#D23B3B !important; letter-spacing:.04em;
}
.wj_modal table.apply td{
  display:block !important; width:auto !important; padding:0 !important; border:0 !important; background:none !important;
}
.wj_modal table.apply td p.blue{
  margin:0 0 10px !important; padding:0; font-size:15px !important; font-weight:700 !important;
  color:#1a1d21 !important; line-height:1.5;
}
.wj_modal table.apply td br{ display:none; }
.wj_modal input[type=text], .wj_modal select, .wj_modal textarea{
  height:48px; padding:0 14px; border:1px solid #dcdfe4; border-radius:10px;
  font-size:15px; color:#1a1d21; background:#fff; box-sizing:border-box; max-width:100%;
}
.wj_modal select{ padding:0 12px; }
.wj_modal textarea.apply_write{
  width:100% !important; height:auto !important; min-height:130px; padding:14px; line-height:1.7; resize:vertical;
}
.wj_modal input[type=text]:focus, .wj_modal select:focus, .wj_modal textarea:focus{
  border-color:#FF4E4E; outline:none;
}
.wj_modal .blog_s{ width:150px; margin-right:8px; }
.wj_modal .blog_t{ width:calc(100% - 162px); min-width:180px; }
.wj_modal .pro_s{ min-width:220px; }
.wj_modal p.apply_info{
  margin:0 0 8px !important; padding:12px 14px; border:1px solid #e8eaed; border-radius:10px;
  background:#f7f8fa; font-size:15px; color:#1a1d21; line-height:1.5;
}
.wj_modal p.apply_info span{
  display:inline-block; min-width:110px; font-size:13px; font-weight:700; color:#5b6169;
}

/* 신청 버튼 */
.wj_modal .app_btn{ margin:24px 0 0 !important; text-align:center; }
.wj_modal .app_btn a{
  display:block; width:100%; height:56px; line-height:54px; padding:0;
  border:1px solid #D23B3B; border-radius:12px; background:#D23B3B; color:#fff !important;
  font-size:17px; font-weight:700; text-decoration:none; text-align:center;
}
.wj_modal .app_btn a:hover{ background:#C63A3A; border-color:#C63A3A; color:#fff !important; }
.wj_modal .app_btn img{ display:none; }

@media (max-width:640px){
  .wj_apply_btn{ min-width:0; width:100%; font-size:17px; }
  .wj_modal .wj_modal_panel{ max-height:94vh; }
  .wj_modal .wj_modal_head{ padding:16px 18px; }
  .wj_modal .wj_modal_head h3{ font-size:18px; }
  .wj_modal .wj_modal_body{ padding:18px 18px 22px; }
  .wj_modal .blog_s{ width:100%; margin:0 0 8px; }
  .wj_modal .blog_t{ width:100%; }
  .wj_modal .pro_s{ width:100%; }
}
@media (prefers-reduced-motion: reduce){
  .wj_apply_btn{ transition:none; }
}