@charset "utf-8";
/* =====================================================================
   캠페인 상세(체험단 정보) 모바일 가독성
   - 대상: skin/board/*/view.skin.php 의 정보표 table.pro_spac
   - 짧은 항목(발표/상품/인원 등)은 "라벨 | 값" 한 줄로 압축
   - 긴 항목(키워드/미션/주의사항)만 전체 폭으로 펼침 (.wj_long, JS가 부여)
   - 데스크톱 레이아웃은 건드리지 않는다
   ===================================================================== */

.campaign_wrap table.pro_spac th,
.campaign_wrap table.pro_spac td{ line-height:1.7; }

@media (max-width:820px){
  .campaign_wrap table.pro_spac{
    width:100% !important; float:none !important; display:block !important;
    border-top:2px solid #1a1d21 !important; border-collapse:collapse;
  }
  .campaign_wrap table.pro_spac colgroup{ display:none !important; }
  .campaign_wrap table.pro_spac tbody{ display:block !important; width:100% !important; }

  /* 기본: 라벨 | 값  한 줄 압축 */
  .campaign_wrap table.pro_spac tr{
    display:flex !important; align-items:flex-start; width:100% !important;
    border-bottom:1px solid #eef0f2 !important;
  }
  .campaign_wrap table.pro_spac th{
    display:block !important; flex:0 0 96px; width:96px !important;
    padding:13px 10px 13px 14px !important; border:0 !important; background:#fff !important;
    text-align:left !important; vertical-align:top !important; white-space:normal !important;
    font-size:14px !important; font-weight:700 !important; color:#5b6169 !important;
  }
  .campaign_wrap table.pro_spac td{
    display:block !important; flex:1 1 auto; width:auto !important; min-width:0;
    padding:13px 14px 13px 4px !important; border:0 !important; background:#fff !important;
    text-align:left !important; font-size:14.5px !important; color:#1a1d21 !important;
    word-break:break-word;
  }
  .campaign_wrap table.pro_spac tr:last-child{ border-bottom:0 !important; }

  /* 긴 항목만 세로로 펼침 */
  .campaign_wrap table.pro_spac tr.wj_long{ display:block !important; }
  .campaign_wrap table.pro_spac tr.wj_long th{
    width:100% !important; flex:none; padding:14px 14px 6px !important;
    background:#f7f8fa !important; font-size:15px !important; font-weight:800 !important; color:#1a1d21 !important;
    position:relative; padding-left:24px !important;
  }
  .campaign_wrap table.pro_spac tr.wj_long th:before{
    content:""; position:absolute; left:12px; top:17px; width:4px; height:14px;
    background:var(--pointColor, #FF4E4E); border-radius:2px;
  }
  .campaign_wrap table.pro_spac tr.wj_long td{
    width:100% !important; flex:none; padding:12px 14px 18px !important; line-height:1.8 !important;
  }

  /* 표 안 입력 요소 */
  .campaign_wrap table.pro_spac td select,
  .campaign_wrap table.pro_spac td input[type=text]{ max-width:100%; }
}

@media (max-width:480px){
  .campaign_wrap table.pro_spac th{ flex:0 0 86px; width:86px !important; font-size:13.5px !important; padding-left:12px !important; }
  .campaign_wrap table.pro_spac td{ font-size:14px !important; }
  .campaign_wrap table.pro_spac tr.wj_long th{ font-size:14.5px !important; }
}

/* =====================================================================
   캠페인 상세 — PC / 모바일 반응형 재정의
   [PC]     우측 sticky 사이드바가 신청 CTA를 담당
   [Mobile] 사이드바를 하단 고정 CTA 바로 전환 (하단 탭 위에 겹쳐 배치)
   ===================================================================== */
:root{ --wj-tabbar: 62px; }

/* --- 상품 목록: 더미 select → 텍스트 칩 --------------------------- */
.campaign_wrap table.pro_spac td.wj_goods{ line-height:1.5; }
.wj_goods_it{
  display:inline-block; margin:2px 6px 2px 0; padding:5px 11px;
  border:1px solid #e8eaed; border-radius:8px; background:#f7f8fa;
  color:#1a1d21; font-size:14px !important; font-weight:600; letter-spacing:-.2px;
}

/* ================= PC (769px~) ================= */
@media only screen and (min-width:769px){
  /* 정보 테이블을 본문 폭에 꽉 채운다 (기존 float+고정폭 해제) */
  .campaign_wrap table.pro_spac{
    width:100% !important; float:none !important; margin:0 0 24px !important;
    table-layout:fixed;
  }
  .campaign_wrap table.pro_spac th{ width:120px !important; }
  .campaign_wrap table.pro_spac td{ width:auto !important; }
  .pro_spac th{ font-size:15px !important; color:#5b6169; font-weight:600; }
  .pro_spac td{ font-size:15px !important; color:#1a1d21; }
}

/* ================= Mobile (~768px) ================= */
@media only screen and (max-width:768px){

  /* 1) 정보 테이블: 4열 압착 → 라벨/값 2열 그리드로 재배치 */
  .pro_spac,
  .pro_spac tbody,
  .pro_spac tr,
  .pro_spac th,
  .pro_spac td{ display:block; width:auto; }
  .pro_spac{ width:100% !important; float:none !important; border-top:1px solid #e8eaed; }
  .campaign_wrap table.pro_spac tr{
    display:grid; grid-template-columns:84px minmax(0,1fr);
    align-items:start; column-gap:12px; row-gap:6px;
    padding:13px 2px; border-bottom:1px solid #f0f1f3;
  }
  .campaign_wrap table.pro_spac tr th{
    padding:0; text-align:left; font-size:14px !important; font-weight:600;
    color:#8b9199; letter-spacing:-.3px; line-height:1.5; background:none; border:0;
  }
  .campaign_wrap table.pro_spac tr td{
    padding:0; font-size:15px !important; font-weight:500; color:#1a1d21;
    letter-spacing:-.3px; line-height:1.55; word-break:keep-all; border:0;
  }
  /* 값이 비어 있어도 행 높이가 무너지지 않게 */
  .pro_spac td:empty::before{ content:'-'; color:#b6bbc2; }

  .campaign_wrap table.pro_spac td .type_badge,
  .pro_spac td .wj_badge{ font-size:13px !important; }
  .wj_goods_it{ font-size:14px !important; padding:6px 12px; }

  /* 2) 탭 (체험단 정보 / 당첨자 / 신청자) */
  .tab_wrap li a, .pro_tab li a, ul.tab li a{ font-size:15px !important; }

  /* 3) 본문 가독성 */
  #bo_v_con, .view_con, .con_txt{
    font-size:16px !important; line-height:1.75; color:#31353b; letter-spacing:-.3px;
  }
  #bo_v_con img{ max-width:100%; height:auto; }

  /* 4) 하단 고정 신청 바 (PC 사이드바의 모바일 형태) */
  .campaign_side{
    display:block !important;
    position:fixed; left:0; right:0; top:auto;
    bottom:calc(var(--wj-tabbar) + env(safe-area-inset-bottom, 0px)) !important;
    width:100%; height:auto; min-height:0; padding:0;
    background:#fff; border-left:0; border-top:1px solid #e8eaed;
    box-shadow:0 -4px 16px rgba(0,0,0,.06); z-index:90;
  }
  .campaign_side .campagn_side_info{ width:100%; padding:10px 16px; }
  .campaign_side .campagn_side_info .section{ display:none; }
  .campaign_side .review_btn{ margin:0; }
  .campaign_side .review_btn a{
    margin:0; height:52px; line-height:52px; border-radius:12px;
    font-size:17px !important; font-weight:700; letter-spacing:-.3px;
  }
  /* 고정 바에 본문이 가리지 않도록 여백 확보 */
  #bo_v, .campaign_wrap, .view_wrap{ padding-bottom:96px; }
}

/* 아주 좁은 화면 */
@media only screen and (max-width:360px){
  .campaign_wrap table.pro_spac tr{ grid-template-columns:74px minmax(0,1fr); }
  .campaign_wrap table.pro_spac tr th{ font-size:13px !important; }
  .campaign_wrap table.pro_spac tr td{ font-size:14px !important; }
}

/* ---------------------------------------------------------------
   상세 하단 편집 메뉴 (수정/삭제/재등록/이동/목록/글쓰기)
   li 가 세로로 쌓이고 버튼 폭이 글자수대로 달랐다 -> 한 줄 정렬 + 폭 통일
   --------------------------------------------------------------- */
#bo_v_top ul.bo_v_com{
  display:flex !important; flex-wrap:wrap; align-items:center;
  gap:8px; margin:28px 0 0 !important; padding:20px 0 0 !important;
  border-top:1px solid #e8eaed; list-style:none;
}
#bo_v_top ul.bo_v_com li{
  float:none !important; margin:0 !important; padding:0 !important;
  list-style:none; display:block;
}
#bo_v_top ul.bo_v_com li a{
  display:inline-flex !important; align-items:center; justify-content:center;
  min-width:88px; height:44px; padding:0 18px; box-sizing:border-box;
  border:1px solid #dcdfe4 !important; border-radius:10px !important;
  background:#fff !important; color:#5b6169 !important;
  font-size:14px !important; font-weight:600; letter-spacing:-.3px;
  line-height:1 !important; text-decoration:none; white-space:nowrap;
  transition:border-color .15s, color .15s;
}
#bo_v_top ul.bo_v_com li a:hover{
  border-color:#FF4E4E !important; color:#D23B3B !important;
}
/* 글쓰기는 주 액션 */
#bo_v_top ul.bo_v_com li a.btn_b02{
  margin-left:auto; border-color:#D23B3B !important;
  background:#D23B3B !important; color:#fff !important;
}
#bo_v_top ul.bo_v_com li a.btn_b02:hover{
  border-color:#C63A3A !important; background:#C63A3A !important; color:#fff !important;
}

@media (max-width:768px){
  #bo_v_top ul.bo_v_com{ gap:8px; }
  #bo_v_top ul.bo_v_com li{ flex:1 1 calc(33.333% - 6px); }
  #bo_v_top ul.bo_v_com li a{ width:100%; min-width:0; padding:0 8px; font-size:13px !important; }
  #bo_v_top ul.bo_v_com li a.btn_b02{ margin-left:0; }
}

/* ---------------------------------------------------------------
   키워드 / 미션 / 주의사항 — 긴 자유 텍스트 행 가독성
   광고주가 ▶ 나 "1." 로 목록을 흉내내 입력하는데, 줄바꿈만으로 이어져
   줄이 넘어가면 번호와 본문이 어긋났다. 행잉 인덴트로 정렬을 맞춘다.
   --------------------------------------------------------------- */
.campaign_wrap table.pro_spac tr.wj_long td{
  padding:18px 16px !important; line-height:1.85 !important;
  color:#31353b; word-break:keep-all; overflow-wrap:anywhere;
}
/* <br> 로만 구분된 문단에 숨 쉴 틈을 준다 */
.campaign_wrap table.pro_spac tr.wj_long td br{ line-height:2.4; }

/* JS 가 줄 단위로 감싼 결과 */
.campaign_wrap table.pro_spac tr.wj_long .wj_ln{
  display:block; margin:0 0 6px;
}
.campaign_wrap table.pro_spac tr.wj_long .wj_ln:last-child{ margin-bottom:0; }
/* 번호/기호로 시작하는 줄: 마커를 빼내고 본문을 들여써 정렬 */
.campaign_wrap table.pro_spac tr.wj_long .wj_ln.wj_li{
  padding-left:22px; text-indent:-22px;
}
.campaign_wrap table.pro_spac tr.wj_long .wj_ln.wj_li .wj_mk{
  display:inline-block; min-width:22px; text-indent:0;
  color:#D23B3B; font-weight:700;
}
/* 주의사항 행: 고지성 문구이므로 톤을 낮춘다 */
.campaign_wrap table.pro_spac tr.wj_caution td{
  background:#fafbfc; border-left:3px solid #e8eaed;
  font-size:14px !important; color:#5b6169;
}
.campaign_wrap table.pro_spac tr.wj_caution .wj_ln.wj_li .wj_mk{ color:#8b9199; }

@media (max-width:768px){
  .campaign_wrap table.pro_spac tr.wj_long td{ padding:12px 2px 16px !important; }
  .campaign_wrap table.pro_spac tr.wj_caution td{
    padding-left:12px !important; font-size:13.5px !important;
  }
}