@charset "utf-8";
/* ==================================================================================
   [마사지스타] 일반 게시판 디자인 시스템 (2026-07-19)
   공지사항 · 자유수다 등 BS4-Basic-List 스킨 공통.
   style.css 뒤에 로드되어 기존 클래스를 재정의합니다. (구조/기능 변경 없음)
================================================================================== */

#bo_list_wrap,
#bo_v,
#bo_w,
#bo_vc{
    --bd-ink:#111827; --bd-ink2:#4b5563; --bd-ink3:#98a1b0;
    --bd-line:#e9ebf0; --bd-line2:#f2f4f8;
    --bd-acc:#6d28d9; --bd-acc2:#8b5cf6; --bd-soft:#f5f3ff;
    --bd-radius:16px;
    --bd-shadow:0 1px 2px rgba(16,24,40,.04), 0 10px 26px -18px rgba(16,24,40,.2);
    -webkit-font-smoothing:antialiased;
}

/* ==================================================================================
   1. 목록
================================================================================== */
#bo_list{
    background:#fff;
    border:1px solid var(--bd-line);
    border-radius:var(--bd-radius);
    box-shadow:var(--bd-shadow);
    overflow:hidden;
}

/* 헤더 행 */
#bo_list .na-table-head,
#bo_list .list-head{
    background:linear-gradient(180deg,#fbfcfe,#f6f8fc) !important;
    border:0 !important;
    border-bottom:1px solid var(--bd-line) !important;
    font-size:13px !important;
    font-weight:800 !important;
    color:#4b5563 !important;
    letter-spacing:-.1px;
}
#bo_list .na-table-head > div,
#bo_list .list-head > div{ padding-top:12px !important; padding-bottom:12px !important; }
#bo_list .na-table-head a,
#bo_list .na-table-head a *{ color:#4b5563 !important; font-weight:800; }

/* 본문 행 — 구분선은 확실히 보이는 색으로 (연한 색은 흰 배경에서 안 보임) */
#bo_list ul.na-table > li{
    border-bottom:1px solid #dde1ea !important;
    transition:background .16s ease;
}
#bo_list ul.na-table > li:last-child{ border-bottom:0 !important; }
#bo_list ul.na-table > li:hover{ background:#faf9ff !important; }
/* 데스크톱 표 형태일 때 각 셀에도 같은 구분선 (표 셀은 li 의 border 가 안 보이는 경우가 있음) */
@media (min-width:768px){
    #bo_list ul.na-table > li > div{ border-bottom:1px solid #dde1ea; }
    #bo_list ul.na-table > li:last-child > div{ border-bottom:0; }
}

/* 빈 목록 안내 */
.bd-empty{
    text-align:center; padding:56px 20px 52px;
    background:linear-gradient(180deg,#fdfdff,#fafaff);
    border-top:1px solid var(--bd-line2);
}
.bd-empty .ic{ display:block; font-size:40px; margin-bottom:12px; opacity:.5; }
.bd-empty .t{ font-size:17px; font-weight:900; color:#4b5563; letter-spacing:-.4px; margin-bottom:7px; }
.bd-empty .d{ font-size:13.5px; color:#6b7280; margin:0; line-height:1.7; }
.bd-empty.small{
    padding:22px 20px;
    background:#fbfcfe;
    border-top:1px solid var(--bd-line2);
}
.bd-empty.small .d{
    display:inline-flex; align-items:center; gap:7px;
    font-size:13.5px; font-weight:700; color:#5b6472;
    background:#fff; border:1px solid #e5e8ef;
    padding:9px 18px; border-radius:999px;
}
.bd-empty.small .d::before{ content:'📌'; font-size:13px; }

/* 번호 / 날짜 / 이름 셀 — 회색이 너무 연해서 안 읽히던 문제 수정 */
#bo_list ul.na-table > li > div{ font-size:13px; color:#5b6472; }
/* 등록자 · 날짜는 조금 더 또렷하게 */
#bo_list ul.na-table > li .xp-nick,
#bo_list ul.na-table > li a{ color:#4b5563; }
#bo_list ul.na-table > li .na-date,
#bo_list ul.na-table > li time{ color:#5b6472 !important; font-weight:600; }
/* 부트스트랩 text-muted(#6c757d)가 셀 전체를 흐리게 만들던 것 보정 */
#bo_list ul.na-table > li.text-muted{ color:#5b6472 !important; }

/* 제목 */
#bo_list .na-subject{
    font-size:15px !important;
    font-weight:700 !important;
    color:var(--bd-ink) !important;
    letter-spacing:-.35px;
    line-height:1.5;
    transition:color .16s ease;
}
#bo_list ul.na-table > li:hover .na-subject{ color:var(--bd-acc) !important; }
#bo_list .na-subject strong,
#bo_list .na-subject b{ font-weight:900; }

/* 댓글 수 뱃지 */
#bo_list .na-info .count-plus{
    display:inline-flex; align-items:center; justify-content:center;
    min-width:20px; height:20px; padding:0 7px;
    margin-left:5px;
    border-radius:999px;
    background:var(--bd-soft);
    border:1px solid #e5deff;
    color:var(--bd-acc) !important;
    font-size:11px; font-weight:900; line-height:1;
}

/* 공지 행 */
#bo_list ul.na-table > li.bg-light{
    background:linear-gradient(90deg,#faf8ff,#fff) !important;
}
#bo_list .na-notice{
    display:inline-block; width:auto !important; height:auto !important;
    padding:3px 10px; border-radius:999px;
    background:linear-gradient(135deg,var(--bd-acc),var(--bd-acc2)) !important;
    color:#fff !important; font-size:10.5px; font-weight:800;
}
#bo_list .na-notice::after{ content:'공지'; }

/* 아이콘 */
#bo_list .na-icon.na-new,
#bo_list .na-icon.na-hot{ vertical-align:middle; }

/* 상단 버튼줄 */
#bo_btn_top{ margin-bottom:12px; }
/* "전체 4 / 1 페이지" — 연회색이라 안 보이던 것 진하게 */
#bo_list_total,
#bo_list_total *{ font-size:13.5px !important; color:#4b5563 !important; font-weight:700 !important; }
#bo_list_wrap .btn-pill{
    display:inline-flex; align-items:center; gap:6px;
    padding:10px 20px !important;
    border-radius:11px !important;
    background:linear-gradient(135deg,var(--bd-acc),var(--bd-acc2)) !important;
    color:#fff !important; border:0 !important;
    font-size:14px; font-weight:800; text-decoration:none;
    box-shadow:0 10px 20px -12px rgba(109,40,217,.9);
    transition:transform .18s ease, filter .2s ease;
}
#bo_list_wrap .btn-pill:hover{ transform:translateY(-2px); filter:brightness(1.05); }

/* 검색창 */
#bo_sch .input-group .form-control,
#bo_sch .input-group select{
    border-radius:11px 0 0 11px !important;
    border-color:#d9dde5 !important;
    font-size:14px;
}
#bo_sch .input-group .btn{
    border-radius:0 11px 11px 0 !important;
    background:linear-gradient(135deg,var(--bd-acc),var(--bd-acc2)) !important;
    border-color:transparent !important; color:#fff !important; font-weight:800;
}

/* ==================================================================================
   2. 페이지네이션
================================================================================== */
.pagination .page-link{
    border:1px solid var(--bd-line) !important;
    color:var(--bd-ink2) !important;
    margin:0 3px;
    border-radius:10px !important;
    min-width:38px; text-align:center;
    font-weight:700; font-size:13.5px;
    transition:all .16s ease;
}
.pagination .page-link:hover{
    background:var(--bd-soft) !important;
    border-color:#ddd0f7 !important;
    color:var(--bd-acc) !important;
}
.pagination .page-item.active .page-link,
.pagination .page-link.active{
    background:linear-gradient(135deg,var(--bd-acc),var(--bd-acc2)) !important;
    border-color:transparent !important;
    color:#fff !important;
    box-shadow:0 8px 18px -10px rgba(109,40,217,.95);
}

/* ==================================================================================
   3. 글 읽기
================================================================================== */
#bo_v{
    background:#fff;
    border:1px solid var(--bd-line);
    border-radius:var(--bd-radius);
    box-shadow:var(--bd-shadow);
    overflow:hidden;
    padding:0 !important;
}
#bo_v_top, #bo_v_title, #bo_v_info, #bo_v_atc, #bo_v_con, #bo_v_bot{ padding-left:24px; padding-right:24px; }

#bo_v_title{
    font-size:24px !important;
    font-weight:900 !important;
    line-height:1.4 !important;
    letter-spacing:-.8px !important;
    color:var(--bd-ink);
    padding-top:24px; padding-bottom:12px;
    word-break:keep-all;
}
#bo_v_info{
    font-size:12.5px; color:var(--bd-ink3); font-weight:600;
    padding-bottom:16px;
    border-bottom:1px solid var(--bd-line2);
}
#bo_v_con{
    padding-top:24px; padding-bottom:28px;
    font-size:16px !important;
    line-height:1.9 !important;
    color:var(--bd-ink2);
    min-height:180px !important;
}
#bo_v_con img{ border-radius:12px; }
#bo_v_con h2, #bo_v_con h3{ font-weight:900; letter-spacing:-.4px; color:var(--bd-ink); margin:26px 0 12px; }
#bo_v_con a{ color:var(--bd-acc); font-weight:700; }
#bo_v_con blockquote{
    margin:0 0 16px; padding:14px 17px;
    border-left:4px solid var(--bd-acc2); border-radius:0 12px 12px 0;
    background:var(--bd-soft); color:var(--bd-ink2);
}

/* 첨부파일 */
#bo_v_file li{
    border:1px solid var(--bd-line) !important;
    border-radius:11px; margin-bottom:7px; padding:11px 14px !important;
    background:#fbfcfe;
}
#bo_v_file a{ color:var(--bd-ink2) !important; font-weight:700; font-size:13.5px; }
#bo_v_file a:hover{ color:var(--bd-acc) !important; }

/* 추천·비추천·스크랩·공유·신고 버튼 묶음
   ⚠ 보라색 원형 배경 위에 아이콘이 어두운 색이라 거의 안 보이던 문제 수정 */
#bo_v_btn_group{ padding-top:8px !important; padding-bottom:22px !important; }
#bo_v_btn_group .btn-group{
    display:inline-flex; flex-wrap:wrap; gap:9px;
    box-shadow:none !important;
}
#bo_v_btn_group .btn,
#bo_v_btn_group .btn-basic{
    display:inline-flex; align-items:center; justify-content:center; gap:6px;
    width:auto !important; min-width:52px; height:auto !important;
    padding:11px 17px !important;
    border-radius:999px !important;
    background:#fff !important;
    border:1px solid #dfe3ea !important;
    color:var(--bd-ink2) !important;
    font-size:13.5px !important; font-weight:800 !important;
    box-shadow:0 1px 2px rgba(16,24,40,.05) !important;
    transition:all .18s ease;
}
/* 아이콘은 배경과 확실히 대비되게 */
#bo_v_btn_group .btn i,
#bo_v_btn_group .btn .fa{
    color:var(--bd-acc) !important;
    font-size:15px !important;
    opacity:1 !important;
}
#bo_v_btn_group .btn b{ color:var(--bd-ink) !important; font-weight:900 !important; }
#bo_v_btn_group .btn:hover{
    background:var(--bd-soft) !important;
    border-color:#ddd0f7 !important;
    color:var(--bd-acc) !important;
    transform:translateY(-2px);
}
#bo_v_btn_group .btn:hover i{ color:var(--bd-acc) !important; }

/* SNS 공유 모달 안 아이콘 */
#bo_v_sns_icon img{ width:44px !important; height:44px; border-radius:50%; margin:6px !important; }

/* 읽기 하단 버튼 */
#bo_v_top .btn, #bo_v_bot .btn,
#bo_v_top .btn-pill, #bo_v_bot .btn-pill{
    border-radius:11px !important;
    font-weight:800 !important;
    font-size:13.5px !important;
}
#bo_v_bot{ padding-bottom:22px; }

/* ==================================================================================
   4. 댓글
================================================================================== */
#bo_vc{ margin-top:18px; }
#bo_vc h2, #bo_vc_w h2{ font-size:15px; font-weight:900; letter-spacing:-.4px; color:var(--bd-ink); }
#bo_vc .cmt-box, #bo_vc_w .cmt-box{
    border:1px solid var(--bd-line) !important;
    border-radius:14px !important;
    background:#fff;
    box-shadow:0 1px 2px rgba(16,24,40,.03);
}
#bo_vc .by-writer{
    background:var(--bd-soft) !important;
    border-color:#e5deff !important;
    border-top-color:#e5deff !important;
}
.cmt-content{ font-size:14.5px; line-height:1.8; color:var(--bd-ink2); }
.cmt-btn ul > li > a{ color:var(--bd-ink3) !important; font-weight:700; }
.cmt-btn ul > li > a:hover{ color:var(--bd-acc) !important; }
#bo_vc_w textarea, #fviewcomment textarea{
    border:1px solid #d9dde5 !important;
    border-radius:12px !important;
    font-size:14.5px; line-height:1.7; padding:13px 15px !important;
}
#bo_vc_w textarea:focus, #fviewcomment textarea:focus{
    border-color:var(--bd-acc) !important;
    box-shadow:0 0 0 3px rgba(109,40,217,.13) !important;
    outline:none;
}
/* ⚠ 예전에 '#bo_vc_w .btn' 로 싸잡아 보라 배경을 칠했더니
   댓글 도구모음(이모티콘·이미지·확대·축소 등) 아이콘 버튼까지 보라 원이 되어
   아이콘(text-black-50 = 진회색)이 배경에 묻혀 안 보였음.
   → 등록/제출 버튼에만 적용하고, 도구 버튼은 아이콘 버튼답게 따로 처리. */
#bo_vc_w button[type=submit],
#bo_vc_w .btn-primary,
#fviewcomment button[type=submit],
#fviewcomment .btn-primary{
    border-radius:11px !important;
    background:linear-gradient(135deg,#6d28d9,#8b5cf6) !important;
    border-color:transparent !important;
    color:#fff !important;
    font-weight:800 !important;
}

/* 댓글 도구모음 (이모티콘 / 폰트어썸 / 동영상 / 이미지 / 확대 / 축소 / 새로작성) */
#bo_vc_w .btn-group .btn,
#fviewcomment .btn-group .btn{
    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
    padding:6px !important;
    border-radius:9px !important;
    transition:background .16s ease;
}
#bo_vc_w .btn-group .btn i,
#fviewcomment .btn-group .btn i,
#bo_vc_w .btn-group .btn .fa,
#fviewcomment .btn-group .btn .fa{
    color:#7a8496 !important;      /* text-black-50 보다 또렷하게 */
    font-size:17px !important;
    opacity:1 !important;
}
#bo_vc_w .btn-group .btn:hover,
#fviewcomment .btn-group .btn:hover{ background:#f0ecfe !important; }
#bo_vc_w .btn-group .btn:hover i,
#fviewcomment .btn-group .btn:hover i,
#bo_vc_w .btn-group .btn:hover .fa,
#fviewcomment .btn-group .btn:hover .fa{ color:#6d28d9 !important; }

/* "댓글 0" 제목이 박스 선에 붙어 있던 것 여백 확보 */
#bo_vc > h2,
#bo_vc_w > h2,
#bo_vc .cmt-count,
#bo_vc h2:first-child{
    padding:16px 20px 14px !important;
    margin:0 !important;
    font-size:15px !important;
    font-weight:900 !important;
    letter-spacing:-.3px;
}
#bo_vc h2 .orangered,
#bo_vc h2 b{ color:#6d28d9 !important; margin-left:4px; }

/* 댓글 없음 안내 */
#bo_vc .text-center.py-5,
#bo_vc .cmt-none{
    color:#98a1b0 !important; font-size:14px; font-weight:600;
}

/* ==================================================================================
   5. 글쓰기
================================================================================== */
#bo_w{
    background:#fff;
    border:1px solid var(--bd-line);
    border-radius:var(--bd-radius);
    box-shadow:var(--bd-shadow);
    padding:20px 22px !important;
}
#bo_w .list-group-item{
    border-left:0; border-right:0;
    border-color:var(--bd-line2) !important;
    padding-top:14px !important; padding-bottom:14px !important;
}
#bo_w label, #bo_w .col-form-label{
    font-size:13.5px; font-weight:800; color:var(--bd-ink2); letter-spacing:-.2px;
}
#bo_w input[type=text],
#bo_w input[type=password],
#bo_w select,
#bo_w textarea{
    border:1px solid #d9dde5 !important;
    border-radius:11px !important;
    font-size:14.5px !important;
    padding:11px 14px !important;
    height:auto !important;
}
#bo_w input[type=text]:focus,
#bo_w select:focus,
#bo_w textarea:focus{
    border-color:var(--bd-acc) !important;
    box-shadow:0 0 0 3px rgba(109,40,217,.13) !important;
    outline:none;
}
#bo_w .btn_confirm .btn,
#bo_w .btn-group .btn{ border-radius:12px !important; font-weight:800 !important; padding:13px 30px !important; }
#bo_w .btn-primary{
    background:linear-gradient(135deg,var(--bd-acc),var(--bd-acc2)) !important;
    border-color:transparent !important;
    box-shadow:0 12px 24px -14px rgba(109,40,217,.95);
}

/* ==================================================================================
   6. 반응형
================================================================================== */
@media (max-width:767px){
    #bo_list{ border-radius:14px; }
    #bo_list ul.na-table > li{ padding:13px 15px !important; }
    #bo_list .na-subject{ font-size:14.5px !important; }
    #bo_v_top, #bo_v_title, #bo_v_info, #bo_v_atc, #bo_v_con, #bo_v_bot{ padding-left:16px; padding-right:16px; }
    #bo_v_title{ font-size:20px !important; padding-top:18px; }
    #bo_v_con{ font-size:15.5px !important; padding-top:18px; }
    #bo_w{ padding:15px 16px !important; border-radius:14px; }
}

@media (prefers-reduced-motion: reduce){
    #bo_list ul.na-table > li,
    #bo_list_wrap .btn-pill,
    .pagination .page-link{ transition:none !important; transform:none !important; }
}