@charset "utf-8";
/* ==========================================================================
   게시판 전용 CSS (/board/themes : standard · community · gallery, 공통 조각 rp-ui.php)
   - head.sub.php 에서 _BOARD_ 일 때만 로드 (sub.css 다음, 순서 3)
   - 게시판 화면은 .bd-* 클래스만 사용 (예외 : fa 아이콘, hidden-xs)
   - 색 · 높이 변수(--pointcolor, --borderColor, --light-gray, --gray, --panelBg, --green, --H, --Radius)만 공용 것 사용
   ========================================================================== */

/* ----- 페이지 ----- */
.bd-page { display: flex; flex-direction: column; color: #fff; } 
.bd-page :is(input, select, textarea, button) { font: inherit; color: inherit; } 
.bd-title { margin-bottom: 2.5rem; font-size: 1.625rem; font-weight: 600; } 
.bd-title small { margin-left: .4rem; color: var(--light-gray); font-size: 1rem; font-weight: 400; } 

/* ----- 버튼 : .bd-btn (기본 테두리) / .bd-btn-point (강조) / .bd-btn-danger (삭제) ----- */
.bd-btn { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; height: 2.75rem; padding: 0 1.25rem; border: 1px solid var(--borderColor); border-radius: var(--Radius); background: transparent; color: #fff; font-size: .875rem; white-space: nowrap; cursor: pointer; transition: border-color .2s, background-color .2s, color .2s; } 
.bd-btn:hover { border-color: #fff; } 
.bd-btn-point { background: var(--pointcolor); border-color: var(--pointcolor); } 
.bd-btn-point:hover { background: #b23804; border-color: #b23804; } 
.bd-btn-danger:hover { border-color: #ff6b6b; color: #ff6b6b; } 
.bd-btns { display: flex; justify-content: flex-end; gap: .4rem; margin-top: 1.5rem; } 
.bd-btns form { display: contents; } 

/* ----- 입력칸 ----- */
.bd-input, .bd-select { width: 100%; height: 2.75rem; padding: 0 1rem; border: 1px solid var(--borderColor); border-radius: var(--Radius); background: transparent; color: #fff; font-size: .875rem; transition: border-color .2s; } 
.bd-input:focus, .bd-select:focus { border-color: var(--pointcolor); outline: 0; } 
.bd-input::placeholder { color: var(--light-gray); } 
.bd-select { padding-right: 2rem; cursor: pointer; } 
.bd-select option { background: #1b1b1a; color: #fff; } 

/* ----- 목록 상단 : 건수 + 검색 ----- */
.bd-top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; } 
.bd-count { font-size: .875rem; } 
.bd-count b { color: var(--pointcolor); font-weight: 600; } 
.bd-count-q { margin-right: .4rem; color: var(--light-gray); } 
.bd-count-reset { margin-left: .6rem; color: var(--light-gray); font-size: .75rem; text-decoration: underline; } 
.bd-count-reset:hover { color: #fff; } 
.bd-search { display: flex; gap: .4rem; } 
.bd-search .bd-select { width: 8rem; flex-shrink: 0; } 
.bd-search .bd-input { width: 16rem; } 
.bd-search .bd-btn { flex-shrink: 0; padding: 0 1rem; } 

/* ----- 목록형 표 : 가로줄만 (모바일에서 칸을 숨겨도 세로줄이 어긋나지 않게) ----- */
.bd-table { width: 100%; border-collapse: collapse; border-top: 1px solid  #bbb; table-layout: fixed; font-size: .875rem; } 
.bd-table th { padding: 1rem .75rem; border-bottom: 1px solid var(--borderColor); color: var(--light-gray); font-weight: 500; text-align: center; } 
.bd-table td { padding: 1rem .75rem; border-bottom: 1px solid var(--borderColor); text-align: center; } 
.bd-table tbody tr { transition: background-color .2s; } 
.bd-table tbody tr:hover { background: rgba(255, 255, 255, .03); } 
.bd-table .bd-c-no { width: 5rem; color: var(--light-gray); } 
.bd-table .bd-c-subject { text-align: left; } 
.bd-table .bd-c-writer { width: 9rem; } 
.bd-table .bd-c-date { width: 8rem; color: var(--light-gray); } 
.bd-table .bd-c-view { width: 5rem; color: var(--light-gray); } 
.bd-table th.bd-c-subject { text-align: center; } 
.bd-subject { display: flex; align-items: center; gap: .4rem; min-width: 0; color: #fff; } 
.bd-subject-txt { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; transition: color .2s; } 
.bd-subject:hover .bd-subject-txt { color: var(--pointcolor); } 
.bd-new { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 1.1rem; height: 1.1rem; border-radius: 50%; background: var(--pointcolor); color: #fff; font-size: .625rem; font-weight: 700; line-height: 1; vertical-align: middle; } 
.bd-empty { padding: 4rem 1rem; color: var(--light-gray); text-align: center; } 
.bd-empty-box { border: 1px solid var(--borderColor); background: var(--panelBg); } 

/* ----- 페이지 번호 ----- */
.bd-paging { display: flex; justify-content: center; flex-wrap: wrap; gap: .3rem; margin-top: 2rem; } 
.bd-paging :is(a, span) { display: inline-flex; align-items: center; justify-content: center; min-width: 2.25rem; height: 2.25rem; padding: 0 .6rem; border: 1px solid var(--borderColor); color: #fff; font-size: .8125rem; transition: border-color .2s; } 
.bd-paging a:hover { border-color: var(--pointcolor); } 
.bd-paging .on { background: var(--pointcolor); border-color: var(--pointcolor); } 

/* ----- 카드형 (블로그 노출데이터) ----- */
.bd-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; } 
.bd-card { display: flex; flex-direction: column; height: 100%; border: 1px solid var(--borderColor); background: var(--panelBg); color: #fff; transition: border-color .3s; } 
.bd-card:hover { border-color: var(--pointcolor); } 
.bd-card-thumb { position: relative; display: flex; align-items: center; justify-content: center; aspect-ratio: 16 / 10; overflow: hidden; background: #1b1b1a; color: var(--gray); font-size: 2rem; } 
.bd-card-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .4s; } 
.bd-card:hover .bd-card-thumb img { transform: scale(1.04); } 
.bd-card-state { position: absolute; top: .6rem; left: .6rem; padding: .2rem .5rem; background: var(--green); color: #fff; font-size: .75rem; } 
.bd-card-state.off { background: var(--gray); } 
.bd-card-body { display: flex; flex-direction: column; justify-content: space-between; gap: .8rem; flex: 1; padding: 1rem 1.1rem; } 
.bd-card-title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-weight: 500; line-height: 1.5; } 
.bd-card-meta { display: flex; justify-content: space-between; gap: .5rem; color: var(--light-gray); font-size: .75rem; } 

/* ----- 글 보기 ----- */
.bd-crumb { display: inline-flex; align-items: center; align-self: flex-start; gap: .4rem; margin-bottom: 1.25rem; color: var(--light-gray); font-size: .875rem; } 
.bd-crumb:hover { color: #fff; } 
.bd-view-head { padding-bottom: 1.25rem; border-bottom: 1px solid var(--borderColor); } 
.bd-view-title { font-size: 1.5rem; font-weight: 600; line-height: 1.4; word-break: keep-all; } 
.bd-view-meta { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: .75rem; color: var(--light-gray); font-size: .8125rem; } 
.bd-info { display: flex; align-items: center; gap: .75rem; margin-top: 1.25rem; padding: .9rem 1.1rem; border: 1px solid var(--borderColor); background: var(--panelBg); font-size: .875rem; } 
.bd-info-label { color: var(--light-gray); } 
.bd-info-link { margin-left: auto; color: var(--pointcolor); font-size: .75rem; } 
/* 본문 (에디터로 쓴 HTML) */
.bd-content { padding: 2rem 0; border-bottom: 1px solid var(--borderColor); line-height: 1.8; word-break: break-word; } 
.bd-content > * + * { margin-top: 1em; } 
.bd-content img { display: inline-block; max-width: 100%; height: auto; } 
.bd-content a { color: var(--pointcolor); text-decoration: underline; } 
.bd-content :is(h1, h2, h3, h4) { font-weight: 600; line-height: 1.4; } 
.bd-content h2 { font-size: 1.375rem; } 
.bd-content h3 { font-size: 1.2rem; } 
.bd-content h4 { font-size: 1.05rem; } 
.bd-content ul { padding-left: 1.4em; list-style: disc; } 
.bd-content ol { padding-left: 1.4em; list-style: decimal; } 
.bd-content blockquote { padding: .8em 1.2em; border-left: 3px solid var(--pointcolor); background: var(--panelBg); color: var(--light-gray); } 
.bd-content table { max-width: 100%; border-collapse: collapse; } 
.bd-content :is(th, td) { padding: .5em .8em; border: 1px solid var(--borderColor); } 
.bd-content figure.image { display: table; margin-left: auto; margin-right: auto; } 
.bd-content figure.image-style-side { float: right; margin-left: 1.5em; max-width: 50%; } 

/* ----- 글쓰기 ----- */
.bd-write { display: flex; flex-direction: column; gap: 1.25rem; } 
.bd-label { display: block; margin-bottom: .4rem; color: var(--light-gray); font-size: .875rem; } 
.bd-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } 
.bd-hint { display: flex; align-items: center; gap: .4rem; margin-top: .6rem; color: var(--light-gray); font-size: .75rem; } 
.bd-write .bd-btns { margin-top: .5rem; } 
/* CKEditor 다크 (본문 글자가 배경색에 묻히지 않게) */
.bd-write .ck.ck-editor__main > .ck-editor__editable { min-height: 22rem; background: #1b1b1a; color: #fff; border-color: var(--borderColor); } 
.bd-write .ck.ck-editor__main > .ck-editor__editable.ck-focused { border-color: var(--pointcolor); box-shadow: none; } 
.bd-write .ck-editor__editable img { display: inline-block; } 
.bd-write .ck.ck-placeholder::before, .bd-write .ck .ck-placeholder::before { color: var(--light-gray); } 

/* ----- 댓글 (/_inc/common/board-comments.php 마크업) ----- */
.board-comments { margin-top: 2.5rem; } 
.board-comments__header h2 { font-size: 1.125rem; font-weight: 500; } 
.board-comments__header strong { color: var(--pointcolor); } 
.board-comment-form { margin-top: 1rem; border: 1px solid var(--borderColor); background: var(--panelBg); } 
.board-comment-form textarea, .board-comment-reply-form textarea { display: block; width: 100%; min-height: 5.5rem; padding: 1rem; border: 0; background: transparent; color: #fff; resize: vertical; } 
.board-comment-form__footer { display: flex; align-items: center; justify-content: space-between; padding: .6rem 1rem; border-top: 1px solid var(--borderColor); color: var(--light-gray); font-size: .75rem; } 
.btn-comment-submit, .board-comment-reply-form button[type="submit"] { padding: .45rem 1rem; border-radius: var(--Radius); background: var(--pointcolor); color: #fff; font-size: .8125rem; } 
.board-comment-login { margin-top: 1rem; padding: 1rem; border: 1px solid var(--borderColor); color: var(--light-gray); font-size: .875rem; text-align: center; } 
.board-comment-login a { color: var(--pointcolor); } 
.board-comment-list { margin-top: 1rem; } 
.board-comment { position: relative; padding: 1rem 0; border-bottom: 1px solid var(--borderColor); } 
.board-comment.is-reply { padding-left: 2rem; } 
.board-comment.is-reply::before { content: '\21B3'; position: absolute; left: .6rem; top: 1rem; color: var(--gray); } 
.board-comment.is-deleted .board-comment__content { color: var(--gray); } 
.board-comment__meta { display: flex; align-items: center; gap: .75rem; font-size: .8125rem; } 
.board-comment__meta time { color: var(--light-gray); } 
.board-comment__content { margin-top: .4rem; line-height: 1.7; word-break: break-word; } 
.board-comment__reply-btn, .board-comment__delete-btn { margin-top: .5rem; margin-right: .6rem; color: var(--light-gray); font-size: .75rem; } 
.board-comment__reply-btn:hover, .board-comment__delete-btn:hover { color: #fff; } 
.board-comment-reply-form { margin-top: .75rem; border: 1px solid var(--borderColor); background: var(--panelBg); } 
.board-comment-reply-form > div { display: flex; justify-content: flex-end; gap: .4rem; padding: .5rem; border-top: 1px solid var(--borderColor); } 
.board-comment-reply-form button[data-cancel-reply] { padding: .45rem 1rem; border: 1px solid var(--borderColor); border-radius: var(--Radius); color: var(--light-gray); font-size: .8125rem; } 
.board-comment-empty { padding: 2rem 0; color: var(--light-gray); font-size: .875rem; text-align: center; } 

/* ----- 반응형 ----- */
@media (max-width: 990px) {
    .bd-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } 
}
@media (max-width: 768px) {   /* hidden-xs 와 같은 기준 : 번호 · 작성자 · 조회 숨김 */
    .bd-title { margin-bottom: 1.5rem; font-size: 1.375rem; } 
    .bd-top { flex-direction: column; align-items: stretch; } 
    /* .bd-search .bd-select { width: 6.5rem; }  */
    .bd-top, .bd-search { min-width: 0; } 
    .bd-search .bd-input { flex: 1 1 0; width: 0; min-width: 0; }
    .bd-table th, .bd-table td { padding: .9rem .5rem; } 
    .bd-table .bd-c-date { width: 5.5rem; font-size: .75rem; } 
    .bd-view-title { font-size: 1.25rem; } 

    .bd-paging { flex-wrap: nowrap; gap: .25rem; } 
    .bd-paging :is(a, span) { min-width: 2rem; height: 2rem; padding: 0 .4rem; } 
    .bd-paging .bd-paging-end, .bd-paging .bd-paging-far { display: none; }
}
@media (max-width: 500px) {
    .bd-grid { grid-template-columns: 1fr; } 
    .bd-field-row { grid-template-columns: 1fr; } 
}



/* ==========================================================================
   체험단 모집 (/board/themes/campaign) + 공용 추가 (배지 · 모달 · 작은 버튼)
   ========================================================================== */
/* ----- 공용 추가 ----- */
.bd-point { color: var(--pointcolor); } 
.bd-btn-sm { height: 2rem; padding: 0 .75rem; font-size: .75rem; } 
.bd-btn-lg { height: var(--H); padding: 0 2.5rem; font-size: 1rem; } 
.bd-btn:disabled { opacity: .45; cursor: not-allowed; border-color: var(--borderColor); background: transparent; } 
.bd-badge { display: inline-flex; align-items: center; height: 1.5rem; padding: 0 .55rem; background: var(--gray); color: #fff; font-size: .75rem; white-space: nowrap; } 
.bd-badge-open { background: var(--pointcolor); } 
.bd-badge-off { background: transparent; border: 1px solid var(--gray); color: var(--light-gray); } 
.bd-badge-line { background: transparent; border: 1px solid var(--borderColor); color: var(--light-gray); } 
.bd-notice { display: flex; gap: .6rem; margin-bottom: 1.5rem; padding: 1rem 1.2rem; border: 1px solid var(--borderColor); background: var(--panelBg); color: var(--light-gray); font-size: .8125rem; line-height: 1.7; } 
.bd-notice .fa { margin-top: .3em; color: var(--pointcolor); } 
.bd-info-col { flex-direction: column; align-items: flex-start; gap: .4rem; margin: 0 0 1.5rem; } 
.bd-sub { margin-bottom: .75rem; font-size: 1.125rem; font-weight: 500; } 
.bd-sub-txt { color: var(--light-gray); font-size: .75rem; } 
.bd-link { color: var(--pointcolor); font-size: .8125rem; white-space: nowrap; } 
.bd-textarea { height: auto; min-height: 6rem; padding: .8rem 1rem; resize: vertical; line-height: 1.6; } 
.bd-range { display: flex; align-items: center; gap: .5rem; } 
.bd-range .bd-input { flex: 1 1 0; width: 0; min-width: 0; } 
.bd-range span { color: var(--light-gray); } 
.bd-page input[type="date"] { color-scheme: dark; } 
.bd-check { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; font-size: .875rem; cursor: pointer; } 
.bd-check input { width: 1.1rem; height: 1.1rem; accent-color: var(--pointcolor); } 
.bd-check a { color: var(--pointcolor); font-size: .8125rem; } 
/* 정보 목록 (dt / dd) */
.bd-dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 1.5rem; border-top: 1px solid var(--borderColor); } 
.bd-dl > div { display: flex; gap: 1rem; padding: 1rem 0; border-bottom: 1px solid var(--borderColor); font-size: .875rem; } 
.bd-dl dt { flex-shrink: 0; width: 6rem; color: var(--light-gray); } 
.bd-dl dd { min-width: 0; word-break: break-word; } 

/* ----- 체험단 목록 (카드) ----- */
.bd-camp-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; } 
.bd-camp { display: flex; flex-direction: column; gap: .75rem; height: 100%; padding: 1.4rem; border: 1px solid var(--borderColor); background: var(--panelBg); color: #fff; transition: border-color .3s; } 
.bd-camp:hover { border-color: var(--pointcolor); } 
.bd-camp.is-closed { opacity: .55; } 
.bd-camp-head { display: flex; align-items: center; flex-wrap: wrap; gap: .4rem; } 
.bd-view-head .bd-camp-head { margin-bottom: .75rem; } 
.bd-camp-dday { margin-left: auto; color: var(--pointcolor); font-size: .8125rem; font-weight: 600; } 
.bd-camp-title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 1.0625rem; font-weight: 500; line-height: 1.5; } 
.bd-camp-company { color: var(--light-gray); font-size: .8125rem; } 
.bd-camp-foot { display: flex; justify-content: space-between; gap: .5rem; margin-top: auto; padding-top: .5rem; color: var(--light-gray); font-size: .75rem; } 
.bd-camp-foot .fa { margin-right: .3rem; } 
.bd-camp-cnt b { color: #fff; } 
.bd-camp-bar { height: 3px; background: var(--gray); } 
.bd-camp-bar i { display: block; height: 100%; background: var(--pointcolor); } 
/* 글 보기 */
.bd-camp-sec { margin-top: 2rem; } 
.bd-camp-sec .bd-content { padding: 1.25rem; border: 1px solid var(--borderColor); background: var(--panelBg); } 
.bd-camp-apply { display: flex; justify-content: center; margin-top: 2.5rem; } 

/* ----- 지원자 관리 표 ----- */
.bd-table-apply .bd-c-name { width: 8rem; } 
.bd-table-apply .bd-c-phone { width: 10rem; } 
.bd-table-apply .bd-c-ch { width: 7rem; } 
.bd-table-apply .bd-c-state { width: 7rem; } 
.bd-table-apply .bd-c-act { width: 9rem; } 
.bd-motive { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; color: var(--light-gray); font-size: .8125rem; line-height: 1.6; } 
.bd-act { display: flex; justify-content: center; gap: .3rem; } 

/* ----- 모달 (체험단 신청) ----- */
.bd-modal { position: fixed; inset: 0; z-index: 99; display: flex; align-items: center; justify-content: center; padding: 1rem; background: rgba(0, 0, 0, .7); } 
.bd-modal[hidden] { display: none; } 
.bd-modal-box { width: 100%; max-width: 32rem; max-height: 90vh; overflow-y: auto; padding: 1.75rem; border: 1px solid var(--gray); background: var(--panelBg); color: #fff; } 
.bd-modal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.5rem; } 
.bd-modal-head h2 { font-size: 1.25rem; font-weight: 600; } 
.bd-modal-x { color: #fff; font-size: 1.5rem; line-height: 1; } 
body.bd-modal-open { overflow: hidden; } 

@media (max-width: 990px) {
    .bd-camp-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } 
}
@media (max-width: 768px) {
    .bd-dl { grid-template-columns: 1fr; } 
    .bd-table-apply .bd-c-name { width: auto; } 
    .bd-table-apply .bd-c-ch { width: 5.5rem; } 
    .bd-table-apply .bd-c-state { width: 5.5rem; } 
    .bd-table-apply .bd-c-act { width: 6.5rem; } 
    .bd-act { flex-direction: column; } 
    .bd-btn-lg { width: 100%; } 
}
@media (max-width: 500px) {
    .bd-camp-list { grid-template-columns: 1fr; } 
}