@charset "utf-8";
/* =====================================================================
   우주리뷰 전역 공통 스타일 (2026-07)
   head.sub.php 에서 전 페이지 로드. 스킨 CSS 가 나중에 실리므로
   덮어써야 하는 속성에는 !important 를 사용한다.

   디자인 시스템
   - 코랄: 보더/강조 #FF4E4E, 텍스트·채움 CTA #D23B3B(AA), hover #C63A3A
   - 뉴트럴: #1a1d21 / #5b6169 / #8b9199 / line #e8eaed / soft #f7f8fa
   - Pretendard, 정수 px, radius 10~14, 플랫(컬러 글로우·그라디언트 금지)
   - 터치 타깃 최소 44px, 본문 최소 13px
   ===================================================================== */
:root{
  --wj-pt:#FF4E4E; --wj-cta:#D23B3B; --wj-cta-h:#C63A3A; --wj-cta-bg:#FFF4F4;
  --wj-ink:#1a1d21; --wj-ink2:#5b6169; --wj-ink3:#8b9199;
  --wj-line:#e8eaed; --wj-line2:#dcdfe4; --wj-soft:#f7f8fa;
}

/* =====================================================================
   1. 셸 — 전 페이지 영향
   ===================================================================== */

/* 1-1) 769~1199px 구간 전 페이지 가로 스크롤 제거 (#wrap min-width:1200px) */
#wrap{ min-width:0 !important; width:100% !important; }
html{ max-width:100%; overflow-x:hidden; }
body{ max-width:100%; }

@media (max-width:1199px){
  #header, #footer, #container, .mlist, .bn2, .main_banner, .main_brand_section{
    padding-left:24px !important; padding-right:24px !important;
  }
}
@media (max-width:768px){
  #header, #footer, #container, .mlist, .bn2, .main_banner, .main_brand_section{
    padding-left:16px !important; padding-right:16px !important;
  }
}

/* 1-2) 이미지 오버플로 전역 차단 */
img{ max-width:100%; height:auto; }

/* 1-3) 푸터 사업자정보가 잘려 보이지 않던 문제 (법정 표기) */
#footer{ overflow:visible !important; }
#footer address{ display:block !important; width:auto !important; max-width:100%; }
#footer address span{ float:none !important; display:inline-block; margin:0 14px 4px 0; color:var(--wj-ink2); }
#footer address p.copy{ color:var(--wj-ink3) !important; }
@media (max-width:768px){
  #footer address span{ display:block; margin-right:0; font-size:13px; line-height:1.7; }
}

/* 1-4) 터치 타깃 (헤더 / 푸터 / 하단 탭바) */
.qnb ul li a{ display:inline-flex !important; align-items:center; min-height:44px; padding:0 6px; }
/* 검색 버튼: 터치 영역을 44px 로 키우되, 기존 좌표(top:-11px)가 22px 높이 기준이라
   그대로 두면 돋보기가 위로 밀린다. 높이 증가분만큼 top 을 내려 중심을 유지. */
#sch_submit, #msearch #sch_submit, #hd_sch #sch_submit{
  width:44px !important; height:44px !important;
  top:0 !important; bottom:auto !important;
  background-position:center center !important; background-repeat:no-repeat !important;
}
#footer .ftxt ul li a{ display:inline-flex !important; align-items:center; min-height:44px; color:var(--wj-ink2); }
.mobile_menu ul li a{ min-height:52px; }
.mobile_menu ul li a .menu{ font-size:11px !important; color:var(--wj-ink2) !important; }
/* 아래 폰트 축소는 모바일에서만 적용한다.
   (전역으로 걸었더니 데스크톱 글자까지 작아지는 문제가 있었음) */
@media (max-width:768px){
  .qnb ul li a{ font-size:15px; }
  #footer .ftxt ul li a{ font-size:14px; }
  #footer address span{ font-size:13px; }
  #footer address p.copy{ font-size:13px !important; }
  .bn2 ul li .desc{ font-size:12px !important; }
}
/* 하단 탭 첫 칸: 로고(헤더와 중복) -> 홈 버튼. 다른 탭과 같은 아이콘+라벨 규격 */
.mobile_menu ul li.mhome a{ display:flex; flex-direction:column; align-items:center; justify-content:center; }
.mobile_menu ul li.mhome .icon{
  display:flex; align-items:center; justify-content:center;
  width:34px; height:34px; margin:0 auto; color:var(--wj-ink2);
}
.mobile_menu ul li.mhome .icon svg{ width:24px; height:24px; display:block; }
.mobile_menu ul li.mhome .menu{ font-size:11px !important; color:var(--wj-ink2) !important; }
.bn2 ul li .desc{ font-size:13px !important; color:var(--wj-ink2) !important; }

/* 1-4b) 모바일 카테고리 시트
   기존에는 하단 탭 "카테고리"가 alert 후 새로고침만 되어, 모바일에서 카테고리
   메뉴(g5_menu)에 접근할 방법이 전혀 없었다. 데스크톱과 같은 .fold_header 를
   재사용해 바텀시트로 띄운다. */
.wj_cat_dim{ display:none; }
.wj_cat_close{ display:none; }
@media (max-width:768px){
  body.wj_cat_open .sub_header{ display:block !important; }
  body.wj_cat_open .wj_cat_dim{
    display:block; position:fixed; inset:0; z-index:9998; background:rgba(20,23,26,.5);
  }
  body.wj_cat_open .fold_header{
    display:block !important; position:fixed; left:0; right:0; bottom:0; top:auto !important; z-index:9999;
    height:auto !important; min-height:0 !important; max-height:72vh; overflow-y:auto; -webkit-overflow-scrolling:touch;
    background:#fff; border-radius:18px 18px 0 0; box-shadow:0 -6px 24px rgba(20,23,26,.18);
    padding:8px 0 20px; margin:0 !important;
  }
  body.wj_cat_open .fold_header .inner{
    position:relative; padding:12px 16px 0 !important; width:auto !important; max-width:none !important;
    height:auto !important; min-height:0 !important; margin:0 !important;
  }
  body.wj_cat_open .fold_header .inner:before{
    content:"카테고리"; display:block; padding:4px 0 14px;
    font-size:17px; font-weight:800; color:var(--wj-ink);
  }
  body.wj_cat_open .wj_cat_close{
    display:block; position:absolute; top:0; right:8px; width:40px; height:40px;
    border:0; background:none; color:var(--wj-ink2); font-size:26px; line-height:1; cursor:pointer;
  }
  body.wj_cat_open .fold_header ul{
    display:grid !important; grid-template-columns:repeat(2,1fr); gap:8px !important;
    width:auto !important; float:none !important; height:auto !important; padding:0 !important; margin:0 !important;
  }
  body.wj_cat_open .fold_header li{
    float:none !important; width:auto !important; margin:0 !important; padding:0 !important;
    height:auto !important; min-height:0 !important; line-height:normal !important; background:none !important; border:0 !important;
  }
  body.wj_cat_open .fold_header li a{
    display:flex !important; align-items:center; height:auto !important; min-height:52px; padding:0 16px !important;
    border:1px solid var(--wj-line) !important; border-radius:12px !important; background:#fff !important;
    font-size:15px !important; font-weight:600 !important; color:var(--wj-ink) !important;
    text-decoration:none; line-height:1.3 !important;
  }
  body.wj_cat_open .fold_header li a:hover{ border-color:var(--wj-pt); color:var(--wj-cta); }
}

/* 1-4e) 모바일 헤더에 로고가 없던 문제
   .gnb 를 통째로 숨겨서 그 안의 로고까지 사라지고, 브랜드 마크가 하단 탭바에만
   남아 있었다 -> .gnb 는 살리고 데스크톱 메뉴(.navi)만 숨긴다. */
@media (max-width:768px){
  #header .gnb{ display:flex !important; align-items:center; flex:0 0 auto; }
  #header .gnb .navi, #header .navi{ display:none !important; }
  #header .gnb .logo{ display:block !important; margin:0 !important; }
  #header .gnb .logo img{ width:100px !important; height:auto !important; }
  /* 로고(홈 링크) 실측 100x37 -> 터치 영역만 44px 로 확보.
     ::after 는 absolute 라 헤더 높이에는 영향을 주지 않는다. */
  #header .gnb .logo a{ position:relative; display:block; }
  #header .gnb .logo a::after{
    content:""; position:absolute; left:0; right:0;
    top:50%; transform:translateY(-50%); height:44px;
  }
  #header{ gap:10px; }
  .qnb{ flex:1 1 auto; justify-content:flex-end; }
  /* 헤더가 비좁아 "마이/페이/지" 처럼 글자가 세로로 쪼개지던 문제 */
  .qnb ul{ display:flex; align-items:center; gap:2px; }
  .qnb ul li{ float:none !important; }
  .qnb ul li a{ white-space:nowrap !important; font-size:14px !important; padding:0 8px !important; }
  /* 검색은 카테고리 시트로 이동 (헤더에서는 숨김) */
  #msearch{ display:none !important; }
}

/* 카테고리 시트 안 검색창 (모바일 전용) */
.wj_cat_search{ display:none; }
@media (max-width:768px){
  body.wj_cat_open .wj_cat_search{
    display:flex !important; gap:8px; margin:0 0 16px; padding:0; border:0;
  }
  body.wj_cat_open .wj_cat_search input[type=text]{
    flex:1 1 auto; min-width:0; height:48px; padding:0 14px;
    border:1px solid var(--wj-line2); border-radius:12px; background:#fff;
    font-size:15px; color:var(--wj-ink); box-sizing:border-box;
  }
  body.wj_cat_open .wj_cat_search input[type=text]:focus{ border-color:var(--wj-pt); outline:none; }
  body.wj_cat_open .wj_cat_search button{
    flex:0 0 auto; min-width:72px; height:48px; padding:0 18px;
    border:0; border-radius:12px; background:var(--wj-cta); color:#fff;
    font-size:15px; font-weight:700; cursor:pointer;
  }
  body.wj_cat_open .wj_cat_search button:hover{ background:var(--wj-cta-h); }
}

/* 1-4f) 메인 이벤트 배너 3장 중 2장이 화면 밖이고 스크롤도 되지 않던 문제 */
@media (max-width:768px){
  .main_banner ul{
    width:auto !important; max-width:100% !important;
    overflow-x:auto !important; -webkit-overflow-scrolling:touch;
    scroll-snap-type:x mandatory; column-gap:12px !important; padding:0 15px !important;
    scrollbar-width:none;
  }
  .main_banner ul::-webkit-scrollbar{ display:none; }
  .main_banner ul li{ flex:0 0 85% !important; max-width:85% !important; scroll-snap-align:center; }
}

/* 1-4c) 메인 - 아이콘 메뉴 (7개를 한 줄에 욱여넣어 라벨이 "이용가/이드" 로 쪼개지던 문제) */
@media (max-width:768px){
  .bn2 ul{
    display:grid !important; grid-template-columns:repeat(4,1fr) !important;
    gap:16px 4px !important; width:auto !important; float:none !important;
  }
  .bn2 ul li{ float:none !important; width:auto !important; margin:0 !important; }
  .bn2 ul li a{ display:block; text-align:center; }
  .bn2 ul li .icon img{ width:46px; height:46px; }
  .bn2 ul li .desc{
    font-size:12px !important; line-height:1.35 !important; color:var(--wj-ink2) !important;
    word-break:keep-all; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  }
}
@media (max-width:360px){
  .bn2 ul{ grid-template-columns:repeat(3,1fr) !important; }
}

/* 1-4d) 메인 - 캠페인 카드가 283px 고정이라 모바일에서 화면 절반만 쓰던 문제 */
@media (max-width:768px){
  .mlist .item_list{ display:grid !important; grid-template-columns:repeat(2,1fr) !important; gap:14px !important; }
  .mlist .item_list > li{ float:none !important; width:auto !important; margin:0 !important; }
  .mlist .item{ width:100% !important; }
  .mlist .item .img img{ width:100%; height:auto; }
}
@media (max-width:400px){
  .mlist .item_list{ grid-template-columns:1fr !important; }
}

/* 1-5) 데스크톱 정렬 기준 통일
   섹션마다 폭이 달라(배너는 화면 끝까지, 아이콘 메뉴는 중앙 1200, 카드 목록은 또 다른 폭)
   좌우 시작선이 어긋나 보이던 문제 -> 공통 컨테이너 폭/여백으로 정렬 */
/* 1-5) 데스크톱/태블릿 밸런스 (풀사이즈 유지 - 폭은 줄이지 않는다)
   문제 1: 아이콘 메뉴가 li{width:10%} x 7 = 화면의 70% 만 차지하고 좌측 정렬이라
           오른쪽이 크게 비어 배너/카드 섹션과 시작·끝선이 어긋나 보였다.
   문제 2: 캠페인 카드가 283px 고정 + float 이라 넓은 화면에서 좌측에만 몰렸다.
   문제 3: 사이트 기본 13px 본문은 1920 화면에서 과소. */
@media (min-width:769px){
  /* 아이콘 메뉴: 좌측 정렬 + 고정 간격.
     항목이 계속 추가되는 구조라, 균등 분할(space-between)은 개수가 바뀔 때마다
     간격이 달라지고 줄바꿈 시 마지막 줄이 벌어진다. */
  .bn2 ul{
    margin:0 !important; justify-content:flex-start !important;
    flex-wrap:wrap !important; gap:12px 16px !important;
  }
  .bn2 ul li{
    width:112px !important; flex:0 0 112px !important; padding:0 !important;
  }
  .bn2 ul li img{ max-width:96px !important; }
  .bn2 ul li .desc{ font-size:16px !important; line-height:1.5 !important; }

  /* 캠페인 카드: 고정폭 float -> 반응형 그리드 (좌우 여백 기준 통일) */
  .mlist .item_list{
    display:grid !important; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)) !important;
    gap:24px !important; overflow:visible !important;
  }
  .mlist .item_list > li{ float:none !important; margin:0 !important; width:auto !important; }
  .mlist .item{ width:100% !important; margin:0 !important; }
  .mlist .item .txt .title{ font-size:17px !important; }
  .mlist .item .txt .stitle{ font-size:14px !important; }

  /* 섹션 제목 / 더보기 정렬 */
  .mlist .tit, .main_brand_section .brand_sec .title .tit{ font-size:28px !important; font-weight:700 !important; }
  .mlist .more a, .main_brand_section .more a{ font-size:15px !important; padding-top:0 !important; }
}

/* =====================================================================
   2. 페이지네이션 — 전 게시판 공통 (27x25 파란색 -> 44px 코랄)
   ===================================================================== */
.pg_wrap{ display:flex; justify-content:center; flex-wrap:wrap; gap:6px; margin:0 0 40px; padding:24px 0 0; }
.pg{ display:flex; gap:6px; flex-wrap:wrap; }
.pg_page, .pg_current{
  display:inline-flex !important; align-items:center; justify-content:center;
  min-width:44px !important; height:44px !important; width:auto !important; padding:0 12px !important;
  border:1px solid var(--wj-line) !important; border-radius:10px !important;
  font-size:14px !important; color:var(--wj-ink2) !important; line-height:1 !important;
  background:#fff !important; text-decoration:none;
}
.pg_current{ background:var(--wj-cta) !important; border-color:var(--wj-cta) !important; color:#fff !important; font-weight:700 !important; }
.pg a:hover{ background:var(--wj-soft) !important; text-decoration:none; }

/* =====================================================================
   3. 일반 게시판 (공지사항 / Q&A / 발표 / 리뷰등록)
   ===================================================================== */

/* 3-0) 커뮤니티 상단 3분할 카드 — common/wj_board_menu.php 마크업
        (기존 tab2/tab5/tab4.png 캐릭터 삽화 대체. 문구가 PNG 에 구워져 있어
         검색·번역·확대·다크모드가 전부 불가능했다.) */
.wjch_nav{ max-width:1100px; margin:18px auto 26px; padding:0; box-sizing:border-box; }
.wjch_nav *{ box-sizing:border-box; }
.wjch_grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:12px;
  margin:0; padding:0; list-style:none; width:100%;
}
.wjch_cell{ float:none !important; width:auto !important; min-width:0; margin:0; padding:0; list-style:none; background:none; text-align:left; }
.wjch_card{
  display:flex; align-items:flex-start; gap:12px;
  width:100%; min-height:44px; padding:16px;
  border:1px solid var(--wj-line); border-radius:12px; background:#fff;
  text-decoration:none !important;
}
.wjch_card:hover, .wjch_card:focus{ border-color:var(--wj-pt); background:var(--wj-soft); }
.wjch_card:focus-visible{ outline:2px solid var(--wj-cta); outline-offset:2px; }
.wjch_ico{
  flex:0 0 auto; display:flex; align-items:center; justify-content:center;
  width:44px; height:44px; border-radius:10px; background:var(--wj-soft); color:var(--wj-ink3);
}
.wjch_ico svg{ display:block; }
.wjch_txt{ display:block; min-width:0; padding-top:2px; }
.wjch_tit{ display:block; margin:0 0 4px; font-weight:700; line-height:1.35; letter-spacing:-.02em; color:var(--wj-ink); }
.wjch_desc{ display:block; font-weight:400; line-height:1.5; color:var(--wj-ink2); word-break:keep-all; }
.wjch_card.wjch_on{ border-color:var(--wj-pt); background:var(--wj-cta-bg); }
.wjch_card.wjch_on .wjch_ico{ background:#ffe4e4; color:var(--wj-cta); }
.wjch_card.wjch_on .wjch_tit{ color:var(--wj-cta); }
.wjch_card.wjch_on:hover, .wjch_card.wjch_on:focus{ border-color:var(--wj-cta-h); background:#ffecec; }

@media (min-width:769px){
  .wjch_tit{ font-size:16px; }
  .wjch_desc{ font-size:13px; }
}
@media (max-width:768px){
  .wjch_nav{ margin:12px auto 20px; }
  .wjch_grid{ grid-template-columns:1fr; gap:10px; }
  .wjch_card{ padding:14px; align-items:center; }
  .wjch_tit{ font-size:15px; }
  .wjch_desc{ font-size:13px; }
}

/* 3-1) 레거시 강조색 -> 코랄 */
.bo_current, .cnt_cmt{ color:var(--wj-cta) !important; }
#bo_vc a{ color:var(--wj-cta) !important; }
a.btn_submit{ background:var(--wj-cta) !important; box-shadow:none !important; }
a.btn_admin{ background:#fff !important; border:1px solid var(--wj-line2) !important; color:var(--wj-ink2) !important; }

/* 3-2) 버튼 통일 */
a.btn_b01, a.btn_b02, a.btn_cancel, #bo_list .btn_bo_user a, #bo_v .btn_bo_user a{
  display:inline-flex !important; align-items:center; justify-content:center;
  min-height:46px !important; padding:0 20px !important;
  border:1px solid var(--wj-line) !important; border-radius:10px !important;
  background:#fff !important; color:var(--wj-ink) !important;
  font-size:15px !important; font-weight:600 !important; text-decoration:none !important;
}
a.btn_b02{ background:var(--wj-cta) !important; border-color:var(--wj-cta) !important; color:#fff !important; }
a.btn_b02:hover{ background:var(--wj-cta-h) !important; }

/* 3-3) 검색 폼 (select 20px / input 22px / 버튼 24x25 -> 46px) */
#bo_sch{ margin:0 0 24px !important; padding:0 !important;
  min-width:0 !important; width:100% !important; box-sizing:border-box !important; }
#bo_sch form, #bo_sch fieldset{ display:flex !important; gap:8px; width:100%; max-width:560px; border:0; padding:0; margin:0; }
#bo_sch select, #bo_sch .selpx{
  flex:0 1 108px !important; min-width:0 !important; box-sizing:border-box !important; height:46px !important; padding:0 10px !important;
  border:1px solid var(--wj-line) !important; border-radius:10px !important;
  background:#fff !important; font-size:14px !important; color:var(--wj-ink) !important;
}
#bo_sch input[type=text], #bo_sch .frm_input{
  flex:1 1 auto !important; min-width:0 !important; width:auto !important;
  height:46px !important; padding:0 14px !important;
  border:1px solid var(--wj-line) !important; border-radius:10px !important; font-size:15px !important;
}
#bo_sch input[type=text]:focus{ border-color:var(--wj-pt) !important; outline:none; }
#bo_sch .btn_submit_img, #bo_sch input[type=submit], #bo_sch button[type=submit]{
  flex:0 0 auto; width:auto !important; min-width:72px !important; height:46px !important;
  padding:0 18px !important; background:var(--wj-cta) !important; border:0 !important;
  border-radius:10px !important; color:#fff !important; font-size:15px !important; font-weight:600 !important;
  text-indent:0 !important; font-size:15px !important;
}

/* 3-4) 목록 표 — 커뮤니티 게시판 공통 (공지사항 / 질문게시판 / 체험단발표 / 리뷰등록)
   .basic_tbl 은 basic_board · review_board · qna · basic_board2 · main_banner 스킨만 쓰고
   캠페인 스킨(ticket / blog*)은 쓰지 않는다.

   [로드 순서 실측] pretendard -> 스킨 style.css -> swiper -> wj_common.css -> css/default.css
   (스킨 CSS 는 add_stylesheet() 가 </title> 뒤 첫 <link> 바로 아래에 끼워 넣는다.)
   즉 default.css 가 마지막이고 거기에 .td_num{width:50px} .td_name{width:100px} 같은
   폭 지정이 들어 있으므로, 여기서는 #bo_list 로 스코프를 잡아 특이도를 (1,1,1) 이상으로
   올려 덮는다. 폰트 크기 규칙은 전부 미디어쿼리 안에서만 지정한다.

   PC 는 넉넉한 행(56px+), 모바일(<=768px)은 카드형 리스트로 전환한다. */

#bo_list .basic_tbl{ width:100%; margin:0; border-collapse:collapse; border-spacing:0; }
#bo_list .basic_tbl caption{
  position:absolute; width:1px; height:1px; margin:-1px; padding:0; border:0;
  overflow:hidden; clip:rect(0,0,0,0);
}

/* 헤더 — 회색 띠 제거, 얇은 라인만 */
#bo_list .basic_tbl thead th{
  padding:14px 8px; background:none;
  border-top:2px solid var(--wj-ink); border-bottom:1px solid var(--wj-line);
  color:var(--wj-ink2); font-weight:600; text-align:center; white-space:nowrap;
}
#bo_list .basic_tbl thead th a{ color:var(--wj-ink2); }
#bo_list .basic_tbl thead th a:hover{ color:var(--wj-cta); }
#bo_list .basic_tbl thead th input[type=checkbox]{ vertical-align:middle; }

/* 행 */
#bo_list .basic_tbl td{
  padding:18px 8px; border-top:0; border-bottom:1px solid var(--wj-line);
  color:var(--wj-ink3); text-align:center; vertical-align:middle; line-height:1.5;
}
#bo_list .basic_tbl tbody tr:hover td{ background:var(--wj-soft); }

/* 열 폭 (default.css 의 .td_num 50px / .td_name 100px / .td_date 60px 을 덮는다) */
#bo_list .basic_tbl td.td_chk{ width:44px; }
#bo_list .basic_tbl td.td_num{ width:78px; }
#bo_list .basic_tbl td.td_name{ width:132px; text-align:center; }
#bo_list .basic_tbl td.td_date{ width:92px; }
#bo_list .basic_tbl td.td_subject{ width:auto; text-align:left; }

/* 제목 */
#bo_list .basic_tbl td.td_subject a{
  color:var(--wj-ink); font-weight:500;
  word-break:keep-all; overflow-wrap:anywhere;
}
#bo_list .basic_tbl td.td_subject a:hover{ color:var(--wj-cta); text-decoration:underline; }
#bo_list .basic_tbl td.td_subject img{ vertical-align:middle; }
#bo_list .bo_cate_link{
  position:relative; z-index:1;
  margin:0 6px 0 0; padding:0 6px 0 0; border-right:1px solid var(--wj-line2);
  color:var(--wj-ink3) !important; font-weight:600;
}

/* 글쓴이 — 운영자 계정은 bbs/list.php 에서 로고 이미지로 치환되어 행 정렬이 틀어졌다 */
#bo_list .basic_tbl td.td_name img,
#bo_v_info img{ display:inline-block; width:auto; height:18px; vertical-align:middle; }

/* 공지 — 코랄 배지 */
#bo_list .basic_tbl tr.bo_notice td{ background:var(--wj-soft); }
#bo_list .basic_tbl tr.bo_notice td.td_subject a{ font-weight:700; }
#bo_list .basic_tbl td.td_no strong{
  display:inline-block; min-width:44px; padding:4px 10px; box-sizing:border-box;
  border:1px solid var(--wj-pt); border-radius:999px; background:#fff;
  color:var(--wj-cta); font-weight:700; line-height:1.2; letter-spacing:-.02em;
}
#bo_list .basic_tbl td.td_no .bo_current{ color:var(--wj-cta) !important; font-weight:700; }
#bo_list .basic_tbl td.empty_table{ padding:72px 8px; color:var(--wj-ink3); text-align:center; }

/* 관리자 전용 선택 버튼 (체크박스 열 자체는 bbs/list.php 에서 관리자에게만 출력된다) */
#bo_list .btn_bo_adm{ float:none; display:flex; flex-wrap:wrap; gap:8px; margin:16px 0 0; }
#bo_list .btn_bo_adm li{ float:none; margin:0; }
#bo_list .btn_bo_adm input{
  min-width:96px; height:44px !important; padding:0 16px !important;
  border:1px solid var(--wj-line2) !important; border-radius:10px !important;
  background:#fff !important; color:var(--wj-ink2) !important; cursor:pointer;
}
#bo_list .btn_bo_adm input:hover{ background:var(--wj-soft) !important; border-color:var(--wj-ink3) !important; }

#bo_list_title{ color:var(--wj-ink) !important; font-weight:700 !important; letter-spacing:-.02em; }

/* --- PC (769px 이상) --- */
@media (min-width:769px){
  #bo_list_title{ font-size:28px !important; }
  #bo_list .basic_tbl thead th{ font-size:13px; }
  #bo_list .basic_tbl td{ font-size:14px; }          /* 18+18 + 15px*1.5 = 58.5px 행 */
  #bo_list .basic_tbl td.td_subject a{ font-size:15px; }
  #bo_list .basic_tbl td.td_no strong{ font-size:12px; }
  #bo_list .btn_bo_adm input{ font-size:14px; }
}

/* --- 모바일 (768px 이하) : 표 -> 카드 리스트 --- */
@media (max-width:768px){
  #bo_list_title{ font-size:22px !important; }
  .basic_board{ padding:28px 0 40px !important; }

  #bo_list .basic_tbl,
  #bo_list .basic_tbl tbody,
  #bo_list .basic_tbl tr,
  #bo_list .basic_tbl td{ display:block; width:auto !important; }
  #bo_list .basic_tbl thead,
  #bo_list .basic_tbl caption,
  #bo_list .basic_tbl colgroup{ display:none; }

  #bo_list .basic_tbl tbody tr{
    position:relative; padding:14px 4px;
    border-bottom:1px solid var(--wj-line);
  }
  #bo_list .basic_tbl tbody tr:first-child{ border-top:2px solid var(--wj-ink); }
  #bo_list .basic_tbl tbody tr:hover td,
  #bo_list .basic_tbl tr.bo_notice td{ background:none; }
  #bo_list .basic_tbl td{ padding:0; border:0; text-align:left; }

  /* 번호 / 체크박스 열 숨김 — 공지 배지만 남긴다 */
  #bo_list .basic_tbl td.td_no,
  #bo_list .basic_tbl td.td_chk{ display:none; }
  #bo_list .basic_tbl tr.bo_notice td.td_no{ display:block; margin:0 0 8px; }
  #bo_list .basic_tbl td.td_no strong{ font-size:11px; padding:3px 10px; }

  /* 제목 한 줄(최대 2행까지만 노출) */
  #bo_list .basic_tbl td.td_subject a{
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
    font-size:15px; font-weight:600; line-height:1.45; color:var(--wj-ink);
  }
  /* 카드 전체를 터치 타깃으로 (44px 이상) */
  #bo_list .basic_tbl td.td_subject > a:not(.bo_cate_link)::after{
    content:""; position:absolute; top:0; right:0; bottom:0; left:0;
  }

  /* 메타 한 줄 : 글쓴이 · 날짜 · 조회 */
  #bo_list .basic_tbl td.td_name,
  #bo_list .basic_tbl td.td_date,
  #bo_list .basic_tbl td.td_datetime,
  #bo_list .basic_tbl td.td_hit,
  #bo_list .basic_tbl td.td_good,
  #bo_list .basic_tbl td.td_nogood{
    display:inline-block; width:auto !important; margin:8px 0 0;
    font-size:13px; line-height:1.4; color:var(--wj-ink3); vertical-align:middle;
  }
  #bo_list .basic_tbl td.td_name::after,
  #bo_list .basic_tbl td.td_date::after,
  #bo_list .basic_tbl td.td_datetime::after{ content:"·"; margin:0 7px; color:var(--wj-line2); }
  #bo_list .basic_tbl td.td_hit::before{ content:"조회 "; }
  #bo_list .basic_tbl td.td_good::before{ content:"추천 "; }
  #bo_list .basic_tbl td.td_nogood::before{ content:"비추천 "; }
  #bo_list .basic_tbl td.td_name img{ height:14px; }
  #bo_list .basic_tbl td.empty_table{ padding:56px 4px; text-align:center; }
}

/* 3-5) 상세 보기 */
#bo_v_title{
  padding:24px 0 16px !important; border-top:0 !important;
  border-bottom:1px solid var(--wj-line) !important;
  color:var(--wj-ink) !important; font-size:26px !important; font-weight:700 !important;
  line-height:1.35 !important; letter-spacing:-.02em;
}
#bo_v_info{ padding:14px 0 !important; border-bottom:1px solid var(--wj-line) !important; color:var(--wj-ink3) !important; font-size:13px !important; }
#bo_v_info strong{ color:var(--wj-ink2) !important; font-weight:500 !important; }
#bo_v_con{
  width:auto !important; margin:0 0 32px !important; padding:24px 0 !important;
  font-size:16px !important; line-height:1.75 !important; color:var(--wj-ink) !important;
  word-break:keep-all !important; overflow-wrap:break-word;
}
#bo_v_bot{ display:flex; flex-wrap:wrap; gap:8px; margin-top:32px; }
#bo_v_bot ul{ display:flex; gap:8px; flex:1 1 auto; }
.bo_v_nb, .bo_v_com{ float:none !important; }
.bo_v_nb li, .bo_v_com li{ float:none !important; margin:0 !important; flex:1 1 auto; }
#bo_v_bot a{
  display:flex !important; align-items:center; justify-content:center; min-height:48px !important;
  padding:0 16px !important; border:1px solid var(--wj-line) !important; border-radius:10px !important;
  color:var(--wj-ink) !important; font-size:15px !important; font-weight:600 !important;
}
#bo_vc{ padding:24px 0 8px !important; border-top:1px solid var(--wj-line) !important; background:none !important; }
#bo_vc header{ font-size:13px !important; color:var(--wj-ink3) !important; }
#bo_vc p{ font-size:15px !important; line-height:1.7 !important; color:var(--wj-ink) !important; }
.btn_submit2{ min-height:48px !important; background:var(--wj-cta) !important; border:0 !important; border-radius:10px !important; color:#fff !important; font-weight:700 !important; }

@media (max-width:640px){
  #bo_v_title{ font-size:20px !important; padding:20px 0 14px !important; }
  #bo_v_con{ font-size:15px !important; padding:20px 0 !important; }
  #bo_v_bot ul{ width:100%; }
}

/* 3-6) 글쓰기 폼 (450px min-width 로 가로 스크롤 나던 문제)
        데스크톱에서는 원래의 표 레이아웃을 유지하고 좁은 화면에서만 세로로 쌓는다 */
@media (max-width:768px){
.frm_tbl, .frm_tbl tbody, .frm_tbl tr, .frm_tbl th, .frm_tbl td{ display:block !important; width:auto !important; }
.frm_tbl th{
  padding:0 0 8px !important; border:0 !important; background:none !important;
  text-align:left !important; font-size:14px !important; font-weight:600 !important; color:var(--wj-ink) !important;
}
.frm_tbl td{ padding:0 0 18px !important; border:0 !important; }
.frm_tbl input[type=text], .frm_tbl input[type=password], .frm_tbl select{
  width:100% !important; min-width:0 !important; height:48px !important; padding:0 14px !important;
  border:1px solid var(--wj-line) !important; border-radius:10px !important;
  box-sizing:border-box; font-size:15px !important;
}
.frm_tbl textarea{
  width:100% !important; min-height:180px !important; padding:12px 14px !important;
  border:1px solid var(--wj-line) !important; border-radius:10px !important; box-sizing:border-box; font-size:15px !important;
}
.frm_tbl .frm_input:focus, .frm_tbl textarea:focus{
  border-color:var(--wj-pt) !important; background:#fff !important; color:var(--wj-ink) !important; padding:0 14px !important;
}
.frm_tbl textarea:focus{ padding:12px 14px !important; }
}

/* 3-7) 분류 탭이 728px 고정이던 문제 */
#bo_cate ul{ display:flex !important; flex-wrap:wrap; gap:6px; width:auto !important; }
#bo_cate ul li{ float:none !important; width:auto !important; }
#bo_cate a{
  display:inline-flex !important; align-items:center; width:auto !important; min-height:44px !important;
  padding:0 16px !important; border:1px solid var(--wj-line) !important; border-radius:10px !important;
  letter-spacing:0 !important; font-size:14px !important;
}
#bo_cate a.on{ border-color:var(--wj-pt) !important; background:var(--wj-cta-bg) !important; color:var(--wj-cta) !important; font-weight:700 !important; }

/* =====================================================================
   4. 광고문의 / 홈페이지제작 폼 (390px 에서 문서 폭 870px 였던 화면)
   ===================================================================== */
#bo_w table.tbst_new, #bo_w table.tbst_new tbody, #bo_w table.tbst_new tr{ display:block !important; width:100% !important; }
#bo_w table.tbst_new colgroup{ display:none !important; }
#bo_w table.tbst_new th, #bo_w table.tbst_new td{
  display:block !important; width:auto !important; box-sizing:border-box;
  text-align:left !important; border:0 !important; background:none !important;
}
#bo_w table.tbst_new th{ padding:0 0 8px !important; font-size:14px !important; font-weight:700 !important; color:var(--wj-ink) !important; white-space:normal !important; }
#bo_w table.tbst_new td{ padding:0 0 18px !important; }
#bo_w table.tbst_new input.frm_input{
  width:100% !important; min-width:0 !important; height:48px !important; padding:0 14px !important;
  border:1px solid var(--wj-line) !important; border-radius:10px !important;
  background:#fff !important; font-size:15px !important; box-sizing:border-box;
}
#bo_w table.tbst_new input.frm_input:focus{ border-color:var(--wj-pt) !important; outline:none; }
#bo_w input.btn_submit{
  width:100% !important; max-width:420px; height:54px !important; padding:0 24px !important;
  font-size:17px !important; font-weight:700 !important;
  background:var(--wj-cta) !important; color:#fff !important; border:0 !important; border-radius:12px !important;
}
#bo_w input.btn_submit:hover{ background:var(--wj-cta-h) !important; }

/* 문의 폼을 카드 패널로 (데스크톱에서 화면 전체로 늘어나 허전하던 문제) */
#bo_w:has(table.tbst_new){
  max-width:820px !important; margin:44px auto 90px !important; padding:38px 44px 34px !important;
  background:#fff !important; border:1px solid var(--wj-line) !important; border-radius:20px !important;
  box-shadow:0 10px 36px rgba(20,23,26,.08) !important;
}
#bo_w:has(table.tbst_new) #container_title{
  margin:0 0 26px !important; padding:0 0 18px !important;
  border-bottom:1px solid var(--wj-line) !important; border-top:0 !important;
  font-size:26px !important; font-weight:800 !important; letter-spacing:-.03em; color:var(--wj-ink) !important;
  text-align:left !important; background:none !important;
}
/* :has() 미지원 브라우저 대비 — 폼 자체 폭도 제한 */
#bo_w table.tbst_new{ max-width:740px; margin-left:auto !important; margin-right:auto !important; }
#bo_w table.tbst_new + *, #bo_w .btn_confirm{ max-width:740px; margin-left:auto !important; margin-right:auto !important; }
#bo_w .cke, #bo_w .cke_chrome, #bo_w textarea{ max-width:100% !important; }
#bo_w .btn_confirm{ display:flex !important; justify-content:center; gap:10px; margin-top:28px !important; padding-top:24px !important; border-top:1px solid var(--wj-line) !important; }
@media (max-width:900px){
  #bo_w:has(table.tbst_new){
    max-width:none !important; margin:16px 12px 60px !important; padding:24px 18px 22px !important; border-radius:16px !important;
  }
  #bo_w:has(table.tbst_new) #container_title{ font-size:21px !important; margin-bottom:20px !important; padding-bottom:16px !important; }
}

/* =====================================================================
   5. 회원 / 인증 화면
   ===================================================================== */
/* 5-1) 좌우 여백 0 이던 문제 (입력창이 화면 끝에 붙음) */
.mbskin, .mbskin3{ box-sizing:border-box; }
@media (max-width:480px){
  .mbskin, .mbskin3{ max-width:100% !important; padding-left:16px !important; padding-right:16px !important; }
}

/* 5-2) 로그인 입력창 radius 0 -> 시스템 값 */
#mb_login #login_fs ul{ display:flex; flex-direction:column; gap:10px; }
#mb_login #login_fs .frm_input{
  box-sizing:border-box; height:48px !important; padding:0 14px !important;
  border:1px solid #ccc !important; border-radius:10px !important;
}
#mb_login #login_fs ul li~li .frm_input{ border-top:1px solid #ccc !important; }
#mb_login #login_fs .frm_input:focus{ border-color:var(--wj-pt) !important; border-radius:10px !important; outline:none; }
#mb_login #login_fs .btn_submit{ height:52px !important; line-height:50px !important; border-radius:10px !important; }
.ment .member_btn a{ border-radius:10px !important; height:50px !important; line-height:48px !important; border-color:var(--wj-line2) !important; }
/* 로그인/회원 화면 상단 로고(홈 링크) 실측 134x34 -> 터치 영역만 44px 로 확보.
   ::after 는 absolute 라 로고 위치·여백에는 영향을 주지 않는다. */
.mbskin h1.logo a, .mbskin3 h1.logo a{ position:relative; display:inline-block; }
.mbskin h1.logo a::after, .mbskin3 h1.logo a::after{
  content:""; position:absolute; left:0; right:0;
  top:50%; transform:translateY(-50%); height:44px;
}

/* 5-3) 인증 화면 터치 타깃 */
.check_login .auto_login label, .check_login label{ display:inline-flex !important; align-items:center; min-height:44px; font-size:14px; }
.check_login input[type=checkbox]{ width:20px !important; height:20px !important; accent-color:#FF4E4E; }
.check_login a, .login_foot ul li a, #pw_confirm .btn_confirm a, #mb_confirm .btn_confirm a, #find_info .btn_confirm a{
  display:inline-flex !important; align-items:center; min-height:44px;
}

/* 5-4) 아이디/비밀번호 찾기 (42x30 회색 버튼 + 22px 입력창) */
#find_info{ max-width:440px; margin:0 auto; padding:40px 16px; }
#find_info #win_title{ border:0 !important; padding:0 0 10px !important; font-size:26px !important; font-weight:800 !important; color:var(--wj-ink) !important; }
#find_info #info_fs{ margin:0 !important; padding:0 !important; border:0 !important; }
#find_info #info_fs label{ display:block; margin:0 0 7px; font-size:14px; font-weight:700; color:var(--wj-ink); }
#find_info #info_fs .frm_input{
  display:block !important; width:100% !important; box-sizing:border-box; height:48px !important;
  padding:0 14px !important; font-size:16px !important;
  border:1px solid #ccc !important; border-radius:10px !important; background:#fff !important;
}
#find_info #info_fs .frm_input:focus{ border-color:var(--wj-pt) !important; outline:none; }
#find_info input.check_info, input.check_info{
  display:block !important; width:100% !important; height:52px !important; padding:0 !important;
  background:var(--wj-cta) !important; border:1px solid var(--wj-cta) !important; border-radius:10px !important;
  color:#fff !important; font-size:16px !important; font-weight:700 !important; line-height:50px !important;
}
input.check_info:hover{ background:var(--wj-cta-h) !important; }
.new_win .win_btn button, .new_win .win_btn a{
  display:block !important; width:100% !important; height:48px !important; margin-top:10px !important;
  background:#fff !important; border:1px solid var(--wj-line2) !important; border-radius:10px !important;
  color:var(--wj-ink2) !important; font-weight:600 !important; line-height:46px !important;
}
#win_title{ border-top:0 !important; }

/* 5-5) 비밀번호 확인 화면(게시판 비밀글 등) */
#pw_confirm{ max-width:460px !important; width:auto !important; margin:70px auto 100px !important; padding:0 16px !important; text-align:center; }
#pw_confirm h1{ font-size:26px !important; font-weight:800 !important; color:var(--wj-ink) !important; margin:0 0 12px !important; }
#pw_confirm > p{ margin:0 0 26px !important; padding:0 !important; border:0 !important; background:none !important; font-size:14px !important; color:var(--wj-ink2) !important; line-height:1.75 !important; }
#pw_confirm fieldset{ margin:0 !important; padding:24px 22px !important; border:1px solid var(--wj-line) !important; border-radius:14px !important; background:#fff !important; text-align:left !important; }
#pw_confirm fieldset label{ display:block; margin:0 0 7px; font-size:14px; font-weight:700; color:var(--wj-ink); }
#pw_confirm fieldset .frm_input{
  display:block !important; width:100% !important; box-sizing:border-box; height:48px !important;
  padding:0 14px !important; border:1px solid #ccc !important; border-radius:10px !important;
  font-size:16px !important; background:#fff !important;
}
#pw_confirm fieldset .frm_input:focus{ border-color:var(--wj-pt) !important; outline:none; }
#pw_confirm .btn_confirm a{ font-size:14px !important; color:var(--wj-ink2) !important; font-weight:600 !important; }

/* 5-6) 가입 완료 화면의 파란 배지 -> 코랄 */
.mbskin3 .mis1 strong{
  background:var(--wj-cta-bg) !important; color:var(--wj-cta) !important;
  border:1px solid var(--wj-pt) !important; border-radius:20px !important; padding:4px 12px !important; font-weight:800 !important;
}
#reg_result #result_email{ padding:16px 18px !important; }
#reg_result #result_email span{ width:auto !important; display:block; font-size:13px; color:var(--wj-ink3); }

/* 5-7) 블로그 인증 화면 (민트색 CTA 등) */
.ns_btn a.end{
  background:var(--wj-cta) !important; border-radius:10px !important; font-family:inherit !important;
  font-weight:700 !important; min-height:52px !important; display:inline-flex !important; align-items:center; justify-content:center;
}
.ns_btn a.end:hover{ background:var(--wj-cta-h) !important; }
.ns_btn a.next{ border-radius:10px !important; min-height:52px !important; display:inline-flex !important; align-items:center; justify-content:center; }
.ns_code #code{ color:var(--wj-cta) !important; }
.ns_blog{ border:1px solid var(--wj-line) !important; border-style:solid !important; border-radius:14px !important; padding:24px 20px !important; }
#blog_addr{ height:48px !important; border-radius:10px !important; }

/* 5-8) 포커스 표시 (인증 화면 전반) */
.mbskin a:focus-visible, .mbskin button:focus-visible, .mbskin input:focus-visible,
#find_info a:focus-visible, #find_info input:focus-visible, .ns_btn a:focus-visible{
  outline:2px solid var(--wj-pt); outline-offset:2px; border-radius:6px;
}

/* =====================================================================
   6. 쪽지 / 스크랩 / 포인트 등 팝업형 목록 (표가 세로로 무너지던 문제)
   ===================================================================== */
@media (max-width:600px){
  .new_win .tbl_wrap{ margin:0 16px !important; overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .new_win .tbl_wrap table{ min-width:520px; }
}
.tbl_head01 thead th{ background:var(--wj-soft) !important; border-color:var(--wj-line) !important; color:var(--wj-ink2) !important; letter-spacing:0 !important; }
.tbl_head01 tfoot th, .tbl_head01 tfoot td{ background:var(--wj-soft) !important; border-color:var(--wj-line) !important; }
.win_ul{ background:var(--wj-ink) !important; font-family:inherit !important; }

/* =====================================================================
   7. 이벤트 랜딩 등 서브 페이지 레거시 색상 -> 코랄
   ===================================================================== */
.event .section .button a.solid_type{ background:var(--wj-cta) !important; border-radius:12px !important; }
.event .section .button a.solid_type:hover{ background:var(--wj-cta-h) !important; }
.event .section .button a.line_type{ border:1px solid var(--wj-pt) !important; color:var(--wj-cta) !important; border-radius:12px !important; }
.event .section.sec01 .tit b{ color:var(--wj-cta) !important; }
@media (max-width:768px){
  .event .section.sec01 .tit{ font-size:26px !important; line-height:1.35 !important; }
  .event .section .button a{ min-height:56px !important; padding:0 16px !important; font-size:16px !important; }
}

/* 마이페이지 my4 카테고리 탭 (검정 사각 -> 시스템 탭) */
.my_wrap ul.my4_category{ display:flex !important; gap:8px; padding:0 0 20px !important; flex-wrap:wrap; }
.my_wrap ul.my4_category li{ width:auto !important; }
.my_wrap ul.my4_category li a{
  display:inline-flex !important; align-items:center; min-height:44px !important; padding:0 18px !important;
  border:1px solid var(--wj-line) !important; border-radius:12px !important; background:#fff !important;
  color:var(--wj-ink2) !important; font-size:15px !important; font-weight:600 !important;
}
.my_wrap ul.my4_category li.on a, .my_wrap ul.my4_category li a.on{
  border-color:var(--wj-pt) !important; background:var(--wj-cta-bg) !important; color:var(--wj-cta) !important; font-weight:800 !important;
}

/* 문의 폼(광고문의/홈페이지제작): 회사명·성명·휴대폰·이메일을 PC에서 2x2 배치.
   원본은 tr 하나에 th/td 8칸이라 그리드 좌표로 직접 배치한다. */
@media (min-width:769px){
  #bo_w table.tbst_new tbody tr:first-child{
    display:grid !important; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    column-gap:24px;
  }
  #bo_w table.tbst_new tbody tr:first-child th:nth-of-type(1){ grid-area:1/1; }
  #bo_w table.tbst_new tbody tr:first-child td:nth-of-type(1){ grid-area:2/1; }
  #bo_w table.tbst_new tbody tr:first-child th:nth-of-type(2){ grid-area:1/2; }
  #bo_w table.tbst_new tbody tr:first-child td:nth-of-type(2){ grid-area:2/2; }
  #bo_w table.tbst_new tbody tr:first-child th:nth-of-type(3){ grid-area:3/1; }
  #bo_w table.tbst_new tbody tr:first-child td:nth-of-type(3){ grid-area:4/1; }
  #bo_w table.tbst_new tbody tr:first-child th:nth-of-type(4){ grid-area:3/2; }
  #bo_w table.tbst_new tbody tr:first-child td:nth-of-type(4){ grid-area:4/2; }
}