/* rows 공통 */
.bbs_wrap .img_animate img{
	width: 100%;
	height: auto;
	object-fit: cover;
	transition: transform .2s cubic-bezier(.165,.84,.44,1);
}
.bbs_wrap .img_animate:hover img{
	transform: scale(1.05);
}
.bbs_wrap .new_icon{
	color: var(--red);
	display: block;
	font-size: 12px;
	letter-spacing: -1px;
	min-width: max-content;
}

/* 게시판 리스트 체크박스 */
.bbs_wrap .h_form.bbs_rows_checkbox label{
	padding-right:5px;
}

/* 게시글 관리팝업창 */
.post_move_tit{height:60px; color:var(--text)}

.bbs_move_pop{
	position:absolute;
	top:-370px;
	left:0;
	z-index:1;
	width:390px;
	max-width:calc(100vw - 32px);
	height:310px;
	border:1px solid var(--line);
	background:var(--card);
	border-radius:3px;
	box-shadow:0 2px 8px 0 rgba(0,0,0,0.1);
}
.bbs_move_pop_head{
	background:var(--bg2);
	border-bottom:1px solid var(--line);
	padding:0px 20px;
}
.bbs_move_pop_head a{color:var(--text)}

.bbs_move_table table {
	border-collapse: collapse;
	border-spacing: 0;
	width: 100%;
}

.bbs_move_table table th {
	width:100px;
	text-align:left;
	font-size:15px;
	font-family: 'Noto Sans KR' !important;
	font-weight:400 !important;
	color:var(--text2);
	height:60px;
	border-bottom:1px solid var(--line-soft);
}

.bbs_move_table table td {
	padding:10px 0px 10px 10px;
	border-bottom:1px solid var(--line-soft);
	text-align:left;
}

/* 게시판 sns 이미지 */
.bbs_wrap .bbs_sns_img img { width:32px; display:inline-block; max-width: max-content !important;}

.bbs_wrap .bbs_cw {
	display: inline-block !important;
	padding: 7px 20px !important;
	vertical-align: middle !important;
	font-size:14px !important;
	line-height: 1 !important;
	text-align: center !important;
	text-decoration: none !important;
	text-transform: uppercase !important;
	transition: 0.1s ease-in-out !important;
	transition-property: color, background-color, border-color !important;
	border-radius:2em !important;
	background-color: transparent !important;
	color: #fff !important;
	border:1px solid #fff !important;
	position:relative !important;
	margin-left:5px !important;
}

.bbs_wrap .bbs_cw_icon {
	padding-left:40px !important;
}

.bbs_wrap .bbs_cw svg {
	position:absolute;
	top:7px;
	left:16px;
	color:#ffffff !important;
}

.bbs_wrap .bbs_cw_01 {
	display: inline-block !important;
	width:48px !important;
	height:48px !important;
	vertical-align: middle !important;
	font-size: 14px !important;
	line-height: 1 !important;
	text-align: center !important;
	text-decoration: none !important;
	text-transform: uppercase !important;
	transition: 0.1s ease-in-out !important;
	transition-property: color, background-color, border-color !important;
	border-radius:2em !important;
	background-color: transparent !important;
	color: #fff !important;
	border:1px solid #fff !important;
	position:relative !important;
}

.bbs_wrap .bbs_cw_01_icon {
	padding-top:21px !important;
}

.bbs_wrap .bbs_cw_01 svg {
	position:absolute;
	top:3px;
	left:15px;
	color:#ffffff !important;
}

/* 게시판 신고하기 모달 (html/modal_report_write.html) — 인라인 #333/#d5d5d5 를 토큰으로 이관 */
.hj-report-title{color:var(--text); letter-spacing:-1px; font-size:20px}
.hj-report-target{display:flex; gap:15px; align-items:center; color:var(--text)}
.hj-report-close{color:var(--text3)}

/* 게시판 신고하기 */
.bbs_wrap .bbs_detail_report_buttons{
	display: flex;
	align-items: center;
	gap: 10px;
	justify-content: flex-end;
}
.bbs_wrap .bbs_detail_report_buttons a{
	font-size: 15px;
	color: var(--text3) !important;
}

/* =========================================================================
   게시판 목록/상세/등록 껍데기 레이아웃 (body.bbs-page)
   ※ 레이아웃(.cm-wrap/.cm-layout)과 우측 사이드바(.cm-side)는 커뮤니티·고객센터
     메인과 공용이다. 아래는 게시판 페이지에만 필요한 본문 카드 정도만 얹는다.
   ※ 예전 .container .bbs_wrap(flex 2단) / .bbs_left / .bbs_right / .bbs_wrap .aside_box_*
     규칙은 껍데기를 .cm-layout 으로 바꾸면서 출력되지 않는 죽은 CSS 가 되어 삭제함.
   ========================================================================= */
body.bbs-page .cm-main{
	gap:0;
	background:var(--card);
	border:1px solid var(--line-soft);
	border-radius:20px;
	box-shadow:0 3px 14px rgba(24,39,75,.05);
	padding:30px;
	word-break:break-all;
}
[data-theme="dark"] body.bbs-page .cm-main{box-shadow:0 3px 14px rgba(0,0,0,.28)}

/* 사이드바는 스크롤을 따라오게 (메인 페이지는 섹션이 길어 sticky 를 쓰지 않는다) */
body.bbs-page .cm-side{position:sticky;top:110px;height:max-content}

@media (max-width:1024px){
	body.bbs-page .cm-side{position:static;top:auto}
	body.bbs-page .cm-main{padding:24px 20px;border-radius:16px}
}
@media (max-width:768px){
	body.bbs-page .cm-main{padding:18px 14px;border-radius:14px}
}

/* 게시판 리스트 페이지 */

/* 게시판 제목 */
.bbs_wrap .bbs_top_title{
	font-size: 28px;
	font-weight: 700;
	letter-spacing:-.02em;
	color: var(--text);
	padding-bottom: 20px;
}

/* 게시판 검색 */
.bbs_wrap .bbs_top_search{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap:10px;
	border-top: 1px solid var(--line-soft);
	padding: 20px 0px;
}

.bbs_wrap .bbs_top_search .bbs_top_search_left{
	display:flex;
	align-items:center;
	gap:6px;
	flex-wrap:wrap;
}
.bbs_wrap .bbs_top_search .bbs_top_search_left select{
	width:150px;
}
.bbs_wrap .bbs_top_search .bbs_top_search_right form{
	display:flex;
	gap:5px;
}

/* ★매크로가 인라인 색을 찍는 아이콘 보정★
   {{BOARD.attach}} 는 첨부 있음=#222222 / 없음=#dadada 로 uk-icon 인라인 색을 출력한다.
   UIkit 이 stroke 를 currentColor 로 바꾸므로 다크모드에서 첨부아이콘이 안 보인다.
   인라인은 CSS !important 로만 덮을 수 있어 속성 선택자로 상태를 구분해 토큰으로 바꾼다. */
.bbs_wrap [uk-icon][style*="#222222"]{color:var(--text) !important}
.bbs_wrap [uk-icon][style*="#dadada"]{color:var(--line) !important}
/* 공지 행의 종 아이콘은 관리자설정 색({{배경색.게시판1}})을 인라인으로 받는다.
   라이트는 관리자값 그대로 두고, 어두운 값이 오면 안 보이는 다크에서만 메인색으로 바꾼다. */
[data-theme="dark"] .bbs_wrap [uk-icon^="icon:bell"]{color:var(--primary) !important}

/* 목록 영역 — 예전에는 템플릿 인라인 style 로 {{B_CONF.bar_color}}(#222) 를 찍었으나
   인라인은 다크모드에서 덮을 수 없어 CSS 토큰으로 이관했다.
   라이트는 기존과 같은 진한 선, 다크는 흰 선이 튀므로 일반 구분선 색을 쓴다. */
:root{--bbs-bar:#222222}
[data-theme="dark"] body.hj-page{--bbs-bar:var(--line)}
.bbs_wrap .bbs_list_area{
	border-top:1px solid var(--bbs-bar);
}

/* 게시판 페이징 — 다른 리스킨 페이지와 동일하게 <nav class="hj-paging"> 를 쓴다.
   (예전 .page_wrap_st 구 페이징에서 교체. 스타일 본체는 page_style.css 의 .hj-paging 섹션) */
.bbs_wrap .hj-paging{margin-top:40px}

/* 게시판 하단 버튼 */
.bbs_wrap .bbs_bottom_btn{
	margin-top: 20px;
	display: grid;
	/* ★칸을 반반(1fr 1fr)으로 가르면 좌측이 텅 비어도 우측이 줄바꿈된다★ (2026-08-18 사용자 지적)
	   좌측 [추천][소스보기] 는 92px 인데 우측 [수정][삭제][답변][목록보기] 는 424px 이 필요하다.
	   920px 본문에서 반반이면 우측 칸이 455 → 383px(1200px 화면)으로 떨어져 두 줄이 됐다.
	   → 칸은 내용폭(auto)으로 잡고 남는 공간을 가운데로 몰아준다. */
	grid-template-columns: auto auto;
	justify-content: space-between;
	justify-items: stretch;
	/* ★한쪽이 두 줄로 접히면 반대쪽은 위에 붙인다★ (2026-08-21 사용자 지적)
	   grid 기본값 align-items:normal(=stretch) 이라 짧은 쪽 칸이 긴 쪽 높이까지 늘어나고,
	   그 안이 flex + align-items:center 라 버튼이 **세로 가운데**로 내려갔다.
	   (좁은 폭에서 좌측 [전체선택][선택복사][선택이동][선택삭제] 가 두 줄이 될 때) */
	align-items: start;
	gap:10px;
}
.bbs_wrap .bbs_bottom_btn_lined{
	border-top:1px solid var(--line);
	padding-top:20px;
}
.bbs_wrap .bbs_bottom_btn .bbs_bottom_btn_left{
	display: flex;
	align-items: center;
	gap: 10px;
	justify-content: flex-start;
	flex-wrap:wrap;
}
.bbs_wrap .bbs_bottom_btn .bbs_bottom_btn_right{
	display: flex;
	align-items: center;
	gap: 10px;
	justify-content:flex-end;
	flex-wrap:wrap;
}

/* 게시판 리스트 작성자 날짜 */
.bbs_wrap .bbs_rows_by,
.bbs_wrap .bbs_rows_by a{
	color: var(--text2);
	font-size: 15px;
}

.bbs_wrap .bbs_rows_num{
	color:var(--text3);
	font-size: 15px;
}

.bbs_wrap .bbs_rows_date{
	color:var(--text3);
	font-size: 15px;
}

/* 게시판 텍스트 리스트 */
.bbs_wrap .bbs_list_title_bar{
	table-layout:fixed;
}
.bbs_wrap .bbs_list_title_bar td,
.bbs_wrap .bbs_list_title_bar th{
	text-align: center;
	height: 60px;
	font-size: 15px;
	font-family: 'Noto Sans KR' !important;
	font-weight: 400 !important;
	border-bottom: 1px solid var(--line-soft);
}
.bbs_wrap .bbs_list_title_bar th{
	color:var(--text2);
}

/* 행 hover — 예전에는 row 템플릿의 onMouseOver 가 인라인 배경색을 찍었다.
   인라인 배경은 다크모드에서 덮을 수 없어 CSS :hover 로 이관 */
.bbs_wrap .bbs_rows_text_wrap:hover,
.bbs_wrap .bbs_rows_line:hover,
.bbs_wrap .bbs_faq_item .bbs_rows_list_faq_wrap:hover{
	background-color:var(--bg2);
}

.bbs_wrap .bbs_rows_text_wrap .bbs_rows_title,
.bbs_wrap .bbs_rows_text_wrap .bbs_rows_title a{
	font-size: 15px;
	color: var(--text);
}

.bbs_wrap .bbs_rows_text_wrap .bbs_rows_title a:hover .bbs_cate{
	color:var(--primary);
}

/* ★목록에서 제목 앞 카테고리가 길면 잘라낸다★ (2026-08-28 사용자 지시)
   inline 이라 길이 제한이 없어서 카테고리 이름이 길면 제목 자리를 통째로 먹었다.
   inline-block + max-width 로 바꿔야 자기 몫만 쓰고 남으면 … 로 잘린다.
   (overflow:hidden 인 inline-block 은 아래쪽 모서리가 베이스라인이 돼 글자가 뜬다
    → vertical-align:bottom 으로 제목과 밑선을 맞춘다.)
   ※ 상세 제목(.bbs_detail_title)의 카테고리는 자르면 안 되므로 아래에서 되돌린다. */
.bbs_wrap .bbs_cate{
	display:inline-block;
	max-width:30%;
	overflow:hidden;
	text-overflow:ellipsis;
	white-space:nowrap;
	vertical-align:bottom;
}
.bbs_wrap .bbs_detail_title .bbs_cate,
.bbs_wrap .bbs_detail_title_faq .bbs_cate{
	display:inline;max-width:none;overflow:visible;white-space:normal;vertical-align:baseline;
}
/* ★갤러리 카드에서는 카테고리를 따로 자르지 않는다★ (2026-09-07 사용자 지적)
   카드 제목은 이미 .ellipsis_line_1(한 줄 말줄임)이라, 카테고리까지 자기 말줄임을 가지면
   폭을 줄일 때 **카테고리에서 한 번, 제목에서 또 한 번** 잘려 "…" 가 두 개 생긴다.
   → 카드에서는 평범한 inline 으로 두고 '카테고리+제목' 전체를 한 덩어리로 한 번만 자른다.
   (위 30% 제한은 넓은 텍스트 목록용이다 — 거기서는 긴 카테고리가 제목 자리를 통째로 먹었다.) */
.bbs_wrap .bbs_gall_wrap .bbs_cate{
	display:inline;max-width:none;overflow:visible;white-space:normal;vertical-align:baseline;
}

.bbs_wrap .bbs_rows_text_wrap .bbs_rows_reply{
	color: var(--text2);
	padding-left:5px;
	display:flex;
	align-items:center;
	font-size: 15px;
	gap:5px;
}

/* 공지 행(테이블 없는 형태) */
.bbs_wrap .bbs_notice_row{
	width:100%;
	height:55px;
	display:flex;
	align-items:center;
	border-bottom:1px solid var(--line-soft);
}

/* ---------- 베스트형(추천베스트 박스) ----------
   목록형을 '베스트'로 설정한 게시판에서만 출력된다.
   예전에는 박스·제목·설명 색이 전부 인라인 style 이었다 → 토큰으로 이관 */
.bbs_wrap .bbs_best_box{
	padding:30px;
	border:3px solid var(--line);
	border-radius:14px;
	background:var(--bg2);
	margin-bottom:20px;
}
.bbs_wrap .bbs_best_head{
	display:flex;
	justify-content:space-between;
	align-items:center;
	gap:10px;
}
.bbs_wrap .bbs_best_tit{color:var(--text); font-size:20px}
.bbs_wrap .bbs_best_desc{color:var(--text3); font-size:15px}
.bbs_wrap .bbs_best_body{
	margin-top:20px;
	border-top:1px solid var(--line);
}
.bbs_wrap .bbs_gallery_best_rows_wrap{
	padding-top:20px;
	display:grid;
	grid-template-columns:repeat(2,1fr);
	gap:20px;
}
.bbs_wrap .bbs_best_row{justify-content:space-between}
.bbs_wrap .bbs_best_row_title{
	height:22px;
	flex:1;
	min-width:0;
	display:flex;
	align-items:center;
}
.bbs_wrap .bbs_best_row_title .bbs_rows_reply{padding-left:5px}
.bbs_wrap .bbs_best_row_rec{
	display:inline-flex;
	align-items:center;
	gap:5px;
	flex:none;
	color:var(--primary);
}
.bbs_wrap .bbs_best_row_rec svg{stroke:currentColor}
.bbs_wrap .bbs_best_row .bbs_best_row_rec{width:60px; padding-left:20px; justify-content:flex-start}

/* 게시판 자주하는질문 리스트 페이지 */
.bbs_wrap .bbs_faq_item{
	border-bottom:1px solid var(--line-soft);
}
.bbs_wrap .bbs_rows_list_faq_wrap{
	padding:20px 0px;
	display: flex;
	align-items: center;
	cursor:pointer;
}
.bbs_wrap .bbs_rows_icon{
	width:80px;
	flex:none;
	text-align:center;
	color:var(--text);
}
.bbs_wrap .bbs_rows_icon svg{stroke:currentColor}
.bbs_wrap .bbs_faq_q,
.bbs_wrap .bbs_faq_a{display:flex; flex:1; min-width:0}
.bbs_wrap .bbs_faq_toggle{width:80px; flex:none; text-align:center}

.bbs_wrap .bbs_rows_list_faq_wrap .bbs_rows_title{
	flex:1;
	min-width:0;
	display:flex;
	align-items:center;
}

.bbs_wrap .bbs_rows_list_faq_wrap .bbs_rows_title a{
	color: var(--text);
	font-size: 18px;
	font-weight: 500;
}

.bbs_wrap .bbs_rows_list_faq_wrap .bbs_rows_reply{
	color: var(--text2);
	padding-left:5px;
	display:flex;
	align-items:center;
	font-size: 18px;
	font-weight: 500;
}

.bbs_wrap .bbs_faq_answer{
	background:var(--bg2);
	padding:20px 0px;
	border-top:1px solid var(--line-soft);
	text-align:left;
}
.bbs_wrap .bbs_rows_list_faq_view_wrap{
	display:flex;
	padding-right:80px;
}

.bbs_wrap .bbs_rows_list_faq_view_wrap .bbs_rows_review a{
	color: var(--text2);
	font-size: 15px;
	font-weight: 400;
}

/* 게시판 질문과답변 리스트 페이지 — 답변상태 뱃지 */
.bbs_radio_info_01 {font-size:15px; display:inline-block; color:#ffffff; background:var(--primary); border-radius:3px; padding:5px 0px; box-sizing: border-box; width:77px; text-align:center;}
.bbs_radio_info_02 {font-size:15px; display:inline-block; color:var(--text); background:var(--card); border-radius:3px; border:1px solid var(--line); padding:5px 0px; box-sizing: border-box;  width:77px; text-align:center;}

/* 게시판 이미지 텍스트 리스트 페이지 */
.bbs_wrap .bbs_rows_line{
	border-bottom:1px solid var(--line-soft);
}
.bbs_wrap .bbs_rows_imgtext{padding:20px 0px 20px 20px}
.bbs_wrap .bbs_rows_news{padding:20px}

.bbs_wrap .bbs_rows_img_text_wrap{
	display: flex;
	align-items: center;
	gap: 20px;
}
.bbs_wrap .bbs_rows_img_text_wrap .bbs_rows_img_text_left{
	flex:1;
	min-width:0;
}
.bbs_wrap .bbs_rows_img_text_wrap .bbs_rows_title{
	flex:1;
	min-width:0;
	display:flex;
	align-items:center;
}

.bbs_wrap .bbs_rows_img_text_wrap .bbs_rows_title a{
	color: var(--text);
	font-size: 18px;
	font-weight: 500;
}
.bbs_wrap .bbs_rows_img_text_wrap .bbs_rows_review a{
	color: var(--text3);
	font-size: 15px;
	font-weight: 400;
}

.bbs_wrap .bbs_rows_img_text_wrap .bbs_rows_reply{
	color: var(--text2);
	padding-left:5px;
	display:flex;
	align-items:center;
	font-size: 18px;
	font-weight: 500;
}

.bbs_wrap .bbs_rows_img_text_wrap .bbs_rows_img_text_right{
	width:200px;
	flex:none;
	height:auto;
	overflow: hidden;
	border-radius: 10px;
}

.bbs_wrap .bbs_rows_img_text_wrap .bbs_rows_img_text_right img{
	width: 100%;
	height: auto;
	object-fit: cover;
	transition: transform .2s cubic-bezier(.165,.84,.44,1);
}

/* ---------- 갤러리(이미지) 리스트 ----------
   ※ 예전에는 목록 템플릿마다 인라인 <style> 로 열 수를 지정했다(반응형 불가) →
     bbs_gallery_big/mid/small 클래스로 이관하고 브레이크포인트별로 열 수만 줄인다.
     ★갤러리는 화면이 좁아져도 이미지 그리드를 유지한다(텍스트 목록으로 바꾸지 않음)★ */
.bbs_wrap .bbs_gallery_rows_wrap,
.bbs_wrap .bbs_gallery_rows_wrap form{
	display:grid;
	gap:20px;
}
/* 글이 없을 때 매크로가 form 을 뱉으므로 그때는 그리드를 풀어준다 */
.bbs_wrap .bbs_gallery_rows_wrap:has(form){display:block}
.bbs_wrap .bbs_gallery_rows_wrap{padding-top:20px}

.bbs_wrap .bbs_gallery_big,
.bbs_wrap .bbs_gallery_big form{grid-template-columns:repeat(2,1fr)}
.bbs_wrap .bbs_gallery_mid,
.bbs_wrap .bbs_gallery_mid form{grid-template-columns:repeat(3,1fr)}
.bbs_wrap .bbs_gallery_small,
.bbs_wrap .bbs_gallery_small form{grid-template-columns:repeat(4,1fr)}

.bbs_wrap .bbs_gall_wrap .bbs_info{
	position:relative;
	overflow: hidden;
	border-radius: 10px 10px 0px 0px;
}
/* ★테두리는 카드 전체에 두른다★ (2026-09-07 사용자 지적)
   예전에는 아래쪽 .bbs_content 에만 border 가 있어서 이미지는 테두리 밖에 있고
   글 영역만 상자로 묶여 보였다. → 테두리·라운드를 카드(.bbs_gall_wrap)로 옮기고
   overflow:hidden 으로 이미지 위쪽 모서리까지 깎는다. */
.bbs_wrap .bbs_gall_wrap{
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	min-width:0;
	border:1px solid var(--line-soft);
	border-radius:10px;
	overflow:hidden;
	background:var(--card);
}
.bbs_wrap .bbs_gall_wrap .bbs_content{
	position: relative;
	background:var(--card);
	height:100%;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}
.bbs_wrap .bbs_gall_big .bbs_content{padding:25px}
.bbs_wrap .bbs_gall_mid .bbs_content{padding:13px 15px}
.bbs_wrap .bbs_gall_small .bbs_content{padding:15px}

.bbs_wrap .bbs_gall_meta{
	display:flex;
	justify-content:space-between;
	gap:5px;
	margin-top:10px;
}
.bbs_wrap .bbs_gall_big .bbs_gall_meta{padding-top:30px; border-top:1px solid var(--line-soft)}
.bbs_wrap .bbs_gall_small .bbs_gall_meta{padding-top:10px; border-top:1px solid var(--line-soft)}
.bbs_wrap .bbs_gall_mid .bbs_gall_meta{margin-top:0}

.bbs_wrap .bbs_gall_wrap .bbs_info:hover .bbs_info_more{
	display: block !important;
}
.bbs_wrap .bbs_gall_wrap .bbs_rows_title a{
	color: var(--text);
	font-size: 18px;
	font-weight: 500;
}

/* 게시판 중형 이미지 리스트 */
.bbs_wrap .bbs_gall_wrap .bbs_review{
	font-size: 15px;
}
.bbs_wrap .bbs_gall_wrap .bbs_review a{color:var(--text2)}

/* =========================================================================
   게시판 목록 반응형
   · 갤러리형 = 그리드 열 수만 축소(형태 유지)
   · 텍스트형 = 정보가 많으므로 좁아지면 항목을 줄이고 제목 + 메타 2줄로 접는다
   ========================================================================= */
@media (max-width:1024px){
	.bbs_wrap .bbs_gallery_small,
	.bbs_wrap .bbs_gallery_small form{grid-template-columns:repeat(3,1fr)}
}

@media (max-width:768px){
	.bbs_wrap .bbs_top_title{font-size:22px; padding-bottom:14px}
	.bbs_wrap .bbs_top_search{
		flex-direction:column;
		align-items:stretch;
		gap:8px;
		padding:14px 0;
	}
	.bbs_wrap .bbs_top_search .bbs_top_search_left select{width:100%}
	.bbs_wrap .bbs_top_search .bbs_top_search_right form{width:100%}
	.bbs_wrap .bbs_top_search .bbs_top_search_right form select{width:104px !important; flex:none}
	.bbs_wrap .bbs_top_search .bbs_top_search_right form input[type=text]{width:auto !important; flex:1; min-width:0}

	.bbs_wrap .hj-paging{margin-top:28px}
	/* ★모바일 버튼 축소★ (2026-08-18 사용자 지시)
	   기본 [12px 20px + 아이콘자리 44px]·14px 이라 4개(수정·삭제·답변·목록보기)가
	   424px 을 먹어 375px 화면에서 두 줄이 됐다.
	   ★`.icon_m{padding-left:44px !important}`(h_form.css) 라 !important 없이는 못 이긴다★
	   아이콘은 position:absolute 라 padding-left 를 줄이면 좌표도 같이 옮겨야 한다. */
	.bbs_wrap .bbs_bottom_btn .bbs_bottom_btn_left,
	.bbs_wrap .bbs_bottom_btn .bbs_bottom_btn_right{gap:5px}
	/* ★아이콘 자리(왼쪽 여백)는 아이콘이 있는 버튼에만★ (2026-08-18 사용자 지적)
	   전에는 `.bbs_bottom_btn a` 전체에 padding-left:24px 를 줘서 아이콘이 없는
	   [전체선택·선택복사·선택이동·선택삭제] 왼쪽에 빈 24px 이 생겼다. */
	.bbs_wrap .bbs_bottom_btn a{padding:7px 9px !important; font-size:13px}
	.bbs_wrap .bbs_bottom_btn a.icon_s{padding-left:20px !important}
	.bbs_wrap .bbs_bottom_btn a.icon_m{padding-left:24px !important}
	.bbs_wrap .bbs_bottom_btn a.icon_b{padding-left:28px !important}
	.bbs_wrap .bbs_bottom_btn a svg{top:8px; left:7px; width:14px; height:14px}

	/* ----- 텍스트 계열 표 해체 : 제목 한 줄 + 메타 한 줄 ----- */
	.bbs_wrap .bbs_list_title_bar:has(th){display:none}          /* 헤더행(번호/제목/작성자/…)은 숨김 */
	.bbs_wrap .bbs_list_title_bar,
	.bbs_wrap .bbs_list_title_bar tbody{display:block; width:100%}
	.bbs_wrap .bbs_list_title_bar colgroup{display:none}
	.bbs_wrap .bbs_list_title_bar tr{
		display:flex;
		flex-wrap:wrap;
		align-items:center;
		gap:4px 10px;
		padding:14px 2px;
		border-bottom:1px solid var(--line-soft);
	}
	.bbs_wrap .bbs_list_title_bar tr > td{
		display:flex;
		align-items:center;
		gap:9px;
		height:auto;
		border-bottom:0;
		padding:0;
		text-align:left !important;
	}
	/* 제목 셀만 폭 100% (게시판 종류마다 열 순서가 달라 :has 로 제목칸을 찾는다) */
	.bbs_wrap .bbs_list_title_bar tr > td:has(.bbs_rows_title){flex-basis:100%; width:100%; order:-1}
	.bbs_wrap .bbs_rows_text_wrap .bbs_rows_by,
	.bbs_wrap .bbs_rows_text_wrap .bbs_rows_by a,
	.bbs_wrap .bbs_rows_text_wrap .bbs_rows_date{font-size:13px}
	.bbs_wrap .bbs_rows_text_wrap .bbs_rows_by{max-width:130px}

	/* ★번호는 모바일에서 출력하지 않는다(2026-08-10 사용자 지시)★
	   단 번호 칸 안에는 관리자 일괄선택 체크박스가 같이 들어 있으므로,
	   체크박스가 실제로 있을 때(관리자)만 칸을 남기고 번호 텍스트만 지운다. */
	.bbs_wrap .bbs_rows_text_wrap .bbs_rows_num{display:none}
	/* ★칸의 gap 도 같이 꺼야 한다★ (2026-08-18 사용자 지적) — 칸이 flex 라
	   숨긴 번호 텍스트와 구분점(::after)도 각각 '익명 플렉스 아이템'으로 남는다.
	   gap:9px × 2 = 18px 이 체크박스(25px) 오른쪽에 그대로 붙어 칸이 43px 이 됐다. */
	.bbs_wrap .bbs_rows_text_wrap .bbs_rows_num:has(input){display:flex; font-size:0; gap:0}
	.bbs_wrap .bbs_rows_text_wrap .bbs_rows_num:has(input) .bbs_rows_checkbox{font-size:13px}

	/* 값이 비어 있는 칸은 구분점만 남으므로 칸 자체를 숨긴다
	   (답변글의 상태 / 첨부파일 없는 글 — 매크로가 회색 아이콘을 항상 출력한다) */
	.bbs_wrap .bbs_rows_state:not(:has(.bbs_radio_info_01,.bbs_radio_info_02)),
	.bbs_wrap .bbs_rows_attach:has([uk-icon][style*="#dadada"]){display:none}

	/* 메타 사이 구분점 — 각 메타칸 "뒤"에 붙인다.
	   ★::before(앞) 가 아니라 ::after(뒤) 여야 한다★ : display:none 인 칸은 ::after 도 렌더되지 않으므로
	   번호·빈 첨부칸을 숨겨도 점이 남지 않는다. */
	.bbs_wrap .bbs_list_title_bar tr > td:not(:has(.bbs_rows_title))::after{
		content:'·'; color:var(--text3); flex:none;
	}
	.bbs_wrap .bbs_list_title_bar tr > td:not(:has(.bbs_rows_title)):last-child::after{content:none}
	/* 상태칸(질문과답변)은 답변글에서 비어 숨겨지므로 날짜 뒤 점을 항상 떼고,
	   상태 뱃지가 실제로 있을 때만 상태칸 앞에 점을 붙인다.
	   ★:has() 안에 :has() 는 쓸 수 없다★ — `날짜:has(+ 상태:not(:has(뱃지)))` 는 통째로 무효가 된다(2026-08-10). */
	.bbs_wrap .bbs_list_title_bar tr > td.bbs_rows_date:has(+ .bbs_rows_state)::after{content:none}
	.bbs_wrap .bbs_rows_state:has(.bbs_radio_info_01, .bbs_radio_info_02)::before{
		content:'·'; color:var(--text3); flex:none;
	}
	.bbs_radio_info_01,.bbs_radio_info_02{font-size:12px; width:auto; padding:3px 10px}

	/* 베스트 박스 */
	.bbs_wrap .bbs_best_box{padding:16px; border-width:2px; border-radius:12px}
	.bbs_wrap .bbs_best_head{flex-direction:column; align-items:flex-start; gap:2px}
	.bbs_wrap .bbs_best_tit{font-size:17px}
	.bbs_wrap .bbs_best_desc{font-size:12.5px}
	.bbs_wrap .bbs_best_body{margin-top:14px}
	.bbs_wrap .bbs_gallery_best_rows_wrap{padding-top:14px; gap:14px}

	/* 공지 행(테이블 없는 형태) */
	.bbs_wrap .bbs_notice_row{height:auto !important; padding:12px 0; flex-wrap:wrap}
	.bbs_wrap .bbs_notice_row > div:first-child{width:34px !important}
	.bbs_wrap .bbs_notice_row > div:last-child{width:auto !important; padding-left:34px; text-align:left !important; font-size:13px}

	/* 갤러리 : 열 수만 축소 */
	.bbs_wrap .bbs_gallery_rows_wrap{gap:14px}
	.bbs_wrap .bbs_gallery_mid,
	.bbs_wrap .bbs_gallery_mid form,
	.bbs_wrap .bbs_gallery_small,
	.bbs_wrap .bbs_gallery_small form{grid-template-columns:repeat(2,1fr)}
	.bbs_wrap .bbs_gall_big .bbs_content{padding:16px}
	.bbs_wrap .bbs_gall_big .bbs_gall_meta{padding-top:14px}
	.bbs_wrap .bbs_gall_wrap .bbs_rows_title a{font-size:15px}

	/* 이미지+텍스트 : 썸네일 축소 후 유지 */
	.bbs_wrap .bbs_rows_imgtext{padding:16px 0}
	.bbs_wrap .bbs_rows_news{padding:16px 0}
	.bbs_wrap .bbs_rows_img_text_wrap{gap:12px; align-items:flex-start}
	.bbs_wrap .bbs_rows_img_text_wrap .bbs_rows_img_text_right{width:104px}
	.bbs_wrap .bbs_rows_img_text_wrap .bbs_rows_title a{font-size:15.5px}
	.bbs_wrap .bbs_rows_img_text_wrap .bbs_rows_reply{font-size:15.5px}
	.bbs_wrap .bbs_rows_img_text_wrap .bbs_rows_review a{font-size:13px}
	.bbs_wrap .bbs_rows_by_date{font-size:12px}

	/* FAQ : 좌우 80px 고정칸 축소 */
	.bbs_wrap .bbs_rows_icon{width:34px}
	.bbs_wrap .bbs_faq_toggle{width:34px}
	.bbs_wrap .bbs_rows_list_faq_view_wrap{padding-right:34px}
	.bbs_wrap .bbs_rows_list_faq_wrap{padding:15px 0}
	.bbs_wrap .bbs_rows_list_faq_wrap .bbs_rows_title a,
	.bbs_wrap .bbs_rows_list_faq_wrap .bbs_rows_reply{font-size:15.5px}
}

@media (max-width:480px){
	/* ★하단 버튼은 480px 아래에서만 세로로 쌓는다★ (2026-08-18 사용자 지시)
	   버튼을 줄이고 나니 [추천] 59 + [수정·삭제·답변·목록보기] 275 + 사이 10 = 344 라
	   481~768 은 좌우 배치가 그대로 들어간다(440px 까지 실측 확인).
	   ≤480 은 좌측에 버튼이 2개인 게시판까지 감안해 안전하게 쌓는다. */
	.bbs_wrap .bbs_bottom_btn{grid-template-columns:1fr; justify-content:stretch; gap:8px}
	.bbs_wrap .bbs_bottom_btn .bbs_bottom_btn_left,
	.bbs_wrap .bbs_bottom_btn .bbs_bottom_btn_right{justify-content:center}
	/* 검색어 칸이 [분류 104][검색어][검색 92] 한 줄에 눌려 375px 에서 107px 까지 좁아지고
	   placeholder('검색어를 입력하세요')가 잘린다 → 분류 셀렉트만 윗줄로 올린다.
	   결과 375px : 분류 343 / [검색어 246][검색 92]. (2026-08-12 자체검수) */
	.bbs_wrap .bbs_top_search .bbs_top_search_right form{flex-wrap:wrap}
	.bbs_wrap .bbs_top_search .bbs_top_search_right form select{width:100% !important; flex:1 1 100%}

	.bbs_wrap .bbs_gallery_big,
	.bbs_wrap .bbs_gallery_big form,
	.bbs_wrap .bbs_gallery_mid,
	.bbs_wrap .bbs_gallery_mid form,
	.bbs_wrap .bbs_gallery_best_rows_wrap{grid-template-columns:1fr}
	.bbs_wrap .bbs_rows_img_text_wrap .bbs_rows_img_text_right{width:84px}
}

/* 게시판 리스트 페이지 */

/* 게시판 상세 페이지 */

/* 첨부파일명 */
.bbs_attach_file{margin-bottom: 10px;}
.bbs_attach_file a {margin: 0px 10px 0px 0px;}


/* 게시판 공유 말풍선(상세) */
.bbs_wrap .bbs_talk_box_sns {
	position:absolute;
	top:10px;
	left:-60px;
	z-index:1;
	border-radius:5px;
	box-shadow: 0 2px 8px 0 rgba(0,0,0,0.1);
	background:var(--bg2);
	border:1px solid var(--line);
	padding:30px;
	display: flex;
	gap: 10px;
}
.bbs_wrap .bbs_talk_box_sns:after {
	content:"";
	position:absolute;
	background:url('../skin/joba/img/bg_talk_box_arrow.png');
	top:-17px;
	left:75px;
	z-index:2;
	width:17px;
	height:17px;
}

/* 아이콘회전 */
.bbs_wrap .sel_menu {
	cursor:pointer;
}

.bbs_wrap .sel_menu .sel_menu_hover {
	color:var(--text3) !important;
	transition: 0.4s ease-in-out;
	transition-property: transform;
	transition-duration: .2s;
	-webkit-transform: rotate(0deg);
	transform: rotate(0deg);
	vertical-align:middle;
	margin-top:-8px;
}

.bbs_wrap .sel_menu.uk-open .sel_menu_hover {
	color:var(--text) !important;
	transition: 0.4s ease-in-out;
	transition-property: transform;
	transition-duration: .2s;
	-webkit-transform: rotate(-180deg);
	transform: rotate(-180deg);
}

/* 게시판 댓글 말풍선(상세) */
.bbs_wrap .bg_reply_list{
	/* background: url(../img/bg_reply_list.gif) left top repeat; */
}
.bbs_wrap #reply_view_bool > div:last-child > div{
	border-bottom:none !important;
}
/* 댓글 점선 구분선 색 — 프로그램(bbs_detail.php)이 인라인 style 로 #d4d4d4 를 박아 넣는다.
     1179·1198행 : <div class=$Content_Depth style='border-bottom:1px dashed #d4d4d4;'>
     1048·1077행 : <div class='reply_reply_box' style='… border-top:1px dashed #d4d4d4;'>
   프로그램은 건드리지 않고 여기서 덮는다. 인라인이라 !important 가 필요하고,
   색을 바꿀 땐 아래 --bbs-reply-line 한 줄만 고치면 된다.
   ($Content_Depth 는 depth 에 따라 reply_content_depth_0,_1,_2… 로 늘어나므로 전방일치로 잡는다) */
:root{--bbs-reply-line:#d4d4d4}
[data-theme="dark"] body.hj-page{--bbs-reply-line:var(--line)}
[class^="reply_content_depth"],
[class*=" reply_content_depth"]{border-bottom-color:var(--bbs-reply-line) !important}
.reply_reply_box{border-top-color:var(--bbs-reply-line) !important}

.reply_content_depth_1, .reply_reply_box {padding-left:35px; position:relative; box-sizing:border-box; width:100%;}
.reply_content_depth_1:before, .reply_reply_box:before{content:''; width:13px; height:12px; display:block; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='12' viewBox='0 0 13 12'%3E%3Cpath fill='%23A7A7A7' d='M0 0h1v1H0zM0 2h1v1H0zM0 4h1v1H0zM0 6h1v1H0zM0 8h1v1H0zM2 8h1v1H2zM4 8h1v1H4zM6 8h1v1H6zM8 8h1v1H8zM10 8h1v1h-1zM12 8h1v1h-1zM9 5h1v1H9zM10 6h1v1h-1zM11 7h1v1h-1zM11 9h1v1h-1zM10 10h1v1h-1zM9 11h1v1H9z'/%3E%3C/svg%3E") no-repeat; position:absolute; top:16px; left:10px;}
.reply_content_depth_1 textarea.dd_txt_box, .reply_reply_box textarea.dd_txt_box{width:100%; max-width:728px; height:71px; border:1px solid var(--line); font-size:12px;}

.reply_content_depth_2 { margin-left:3%; padding-left:35px;  position:relative;  box-sizing:border-box; width:97%;}
.reply_content_depth_2:before{content:''; width:13px; height:12px; display:block; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='12' viewBox='0 0 13 12'%3E%3Cpath fill='%23A7A7A7' d='M0 0h1v1H0zM0 2h1v1H0zM0 4h1v1H0zM0 6h1v1H0zM0 8h1v1H0zM2 8h1v1H2zM4 8h1v1H4zM6 8h1v1H6zM8 8h1v1H8zM10 8h1v1h-1zM12 8h1v1h-1zM9 5h1v1H9zM10 6h1v1h-1zM11 7h1v1h-1zM11 9h1v1h-1zM10 10h1v1h-1zM9 11h1v1H9z'/%3E%3C/svg%3E") no-repeat; position:absolute; top:16px; left:10px;}
.reply_content_depth_2 textarea.dd_txt_box{width:100%; max-width:700px; height:71px; border:1px solid var(--line); font-size:12px;}

.bbs_wrap .short_comment_size {
	width: calc(100% - 140px);
}

/* 댓글 버튼 */
.bbs_wrap .bbs_detail_comment_btn > a{
	color:var(--text3);
	position:relative;
}
.bbs_wrap .bbs_detail_comment_btn > a::after{
	content:'•';
	position:absolute;
	top:0;
	right:-15px;
}
.bbs_wrap .bbs_detail_comment_btn > a:last-child::after{
	display:none;
}

.bbs_wrap .bbs_detail_comment_btn .bbs_detail_dropdown{
	background: var(--card);
	border:1px solid var(--line-soft);
	width: max-content !important;
	min-width: max-content !important;
}
.bbs_wrap .bbs_detail_comment_btn .bbs_detail_dropdown a{
	padding: 10px 20px 0 20px;
	display: block;
	color:var(--text);
}
.bbs_wrap .bbs_detail_comment_btn .bbs_detail_dropdown a:hover{
	background:var(--primary);
	color:#FFF;
}

/* ★댓글 매크로({{댓글}})가 찍는 인라인 색 보정★
   `수정/삭제`(color:#000000)·`답글쓰기`(color:#000) 등은 lib.php 출력이라 템플릿에서 못 고친다.
   인라인은 !important 로만 덮을 수 있어 다크에서만 토큰으로 바꾼다.
   ※ style 속성 부분일치라 `background-color:#000…` 까지 걸리지 않게 :not([style*="background"]) 로 막는다. */
[data-theme="dark"] .bbs_wrap .bbs_reply_area [style*="color:#000"]:not([style*="background"]),
[data-theme="dark"] .bbs_detail_dropdown a[style*="color:#000"]:not([style*="background"]){color:var(--text) !important}
[data-theme="dark"] .bbs_detail_dropdown a[style*="color:#000"]:hover{color:#FFF !important}
[data-theme="dark"] .bbs_wrap .bbs_reply_area [style*="color:#6f6f6f"],
[data-theme="dark"] .bbs_wrap .bbs_reply_area [style*="color:#797979"]{color:var(--text2) !important}
[data-theme="dark"] .bbs_wrap .bbs_reply_area [style*="color:#a8a8a8"]{color:var(--text3) !important}

/* 게시판 상세 */
.bbs_wrap .bbs_cate{
	color: var(--primary);
}

/* 제목 / 본문 — 예전에는 템플릿 인라인 style 로 {{B_CONF.bar_color}}·{{B_CONF.down_color}}·
   {{B_CONF.detail_color}} 를 찍었다. 인라인은 다크모드에서 덮을 수 없어 CSS 로 이관 */
.bbs_wrap .bbs_detail_title{
	font-size:26px;
	color:var(--text);
	padding-top:30px;
	border-top:1px solid var(--bbs-bar);
}
.bbs_wrap .bbs_detail_title_txt{color:var(--text)}
.bbs_wrap .bbs_detail_title_faq{display:flex; align-items:flex-start; gap:10px}
.bbs_wrap .bbs_detail_faq_icon{color:var(--primary); flex:none; margin-top:2px}
.bbs_wrap .bbs_detail_body{
	background:var(--card);
	margin-top:60px;
}
.bbs_wrap .bbs_detail_body_faq{margin-top:30px}
.bbs_wrap .bbs_detail_body #ct{color:var(--text)}
/* 본문(위지윅)에 들어온 넓은 표는 페이지를 밀지 않고 자기 영역 안에서 가로 스크롤 */
.bbs_wrap .bbs_detail_body #ct{overflow-x:auto}
.bbs_wrap .bbs_detail_body img{max-width:100%; height:auto}
.bbs_wrap .bbs_detail_body #ct table{max-width:100%}
/* {{BOARD.img_auto}} 는 <table><td class="bbs_img_auto_box"><img width="800"> 를 출력해
   좁은 화면에서 페이지 폭을 밀어낸다 → 표·이미지를 컨테이너 폭에 맞춘다 */
.bbs_wrap .bbs_detail_body table:has(td.bbs_img_auto_box){
	width:100% !important;
	max-width:100%;
	table-layout:fixed;
}
.bbs_wrap .bbs_detail_body td.bbs_img_auto_box img{width:auto; max-width:100%; height:auto}
.bbs_wrap .bbs_reply_area{
	border-top:1px solid var(--bbs-bar);
	margin-top:60px;
}
.bbs_wrap .bbs_reply_head{
	background:var(--card);
	border-bottom:1px solid var(--line);
}
.bbs_wrap .bbs_reply_head_in{
	width:100%;
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:10px;
	height:60px;
}
.bbs_wrap .bbs_reply_cnt{
	text-align:left;
	color:var(--text);
	font-size:20px;
}
.bbs_wrap .bbs_reply_toggle_txt{font-size:20px; color:var(--text)}
.bbs_wrap .bbs_detail_news_sub{
	padding-top:20px;
	text-align:left;
	color:var(--text3);
	line-height:19px;
}
.bbs_wrap .bbs_detail_count_lined{
	margin-top:30px;
	padding-top:30px;
	border-top:1px solid var(--line-soft);
}
.bbs_wrap .bbs_bottom_btn_top{margin-top:0}

.bbs_wrap .bbs_cate span{
	margin-right: 6px;
}

.bbs_wrap .bbs_gubun_line {
	display: inline-block;
	height: 12px;
	border-left: 1px solid var(--line);
	margin: 0px 10px;
}

.bbs_wrap .bbs_detail_count_wrap{
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap:10px;
	flex-wrap:wrap;
}

.bbs_wrap .bbs_detail_date{
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap:10px;
	flex-wrap:wrap;
	padding:30px 0px;
	border-bottom:1px solid var(--line-soft);
}

.bbs_wrap .bbs_detail_date .bbs_by{
	font-size:15px;
	color: var(--text2);
}

.bbs_wrap .bbs_detail_date .bbs_date{
	font-size:15px;
	color: var(--text3);
}

.bbs_wrap .bbs_detail_count_wrap .bbs_detail_count_left{
	display: flex;
	align-items: center;
	gap: 10px;
}

.bbs_wrap .bbs_detail_count_wrap .bbs_detail_count{
	display: flex;
	align-items: center;
	gap: 10px;
}

.bbs_wrap .bbs_detail_count_wrap .bbs_cw_detail_icon {
	padding-left: 40px !important;
}

.bbs_wrap .bbs_detail_count_wrap .bbs_cw_detail {
	padding: 9px 20px;
	font-size: 14px;
	line-height: 1;
	border-radius: 2em;
	color: var(--text);
	border: 1px solid var(--line);
	position: relative;
}

.bbs_wrap .bbs_detail_count_wrap .bbs_cw_detail svg {
	position: absolute !important;
	top: 7px !important;
	left: 16px !important;
}

/* 게시판 자주하는질문 상세 페이지 */
.bbs_wrap .bbs_detail_faq_box{
	border-radius: 5px;
	box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.1);
	background: var(--bg2);
	border: 1px solid var(--line);
	padding: 30px 30px 30px 30px;
	font-family: 'Noto Sans KR' !important;
	font-weight: 400 !important;
}

/* ---------- 게시글잠금(비밀글 비밀번호 입력) ----------
   bbs_detail.php 가 인라인으로 흰 박스(#f9f9f9 / #e2e2e2 / #222222 / #999999, width:350px)를 직접 그린다.
   PHP 라 마크업을 못 고치므로 인라인 style 속성 선택자로 잡아 다크에서만 토큰으로 덮는다. */
.bbs_wrap form[name="regiform"] > div[style*="#f9f9f9"]{max-width:100%; box-sizing:border-box}
[data-theme="dark"] .bbs_wrap form[name="regiform"] > div[style*="#f9f9f9"]{
	background:var(--bg2) !important;
	border-color:var(--line) !important;
}
[data-theme="dark"] .bbs_wrap form[name="regiform"] > div[style*="#f9f9f9"] div[style*="#222222"]{color:var(--text) !important}
[data-theme="dark"] .bbs_wrap form[name="regiform"] > div[style*="#f9f9f9"] div[style*="#999999"]{color:var(--text3) !important}
/* ★[확인] 버튼도 인라인 `background:#ffffff` 다★ (2026-08-12 자체검수에서 발견)
   박스만 덮고 버튼을 빠뜨려서 다크에서 **흰 버튼 + 회색 글자(대비 2.3)** 로 남아 있었다.
   bbs_detail.php 580·597 행 두 곳이 같은 인라인을 찍으므로 `#ffffff` 로 한 번에 잡는다. */
[data-theme="dark"] .bbs_wrap form[name="regiform"] button[style*="#ffffff"]{
	background:var(--chip) !important;
	color:var(--text) !important;
	border:1px solid var(--line) !important;
}

/* ---------- 게시판 상세 반응형 ---------- */
@media (max-width:768px){
	.bbs_wrap .bbs_detail_title{font-size:20px; padding-top:20px}
	.bbs_wrap .bbs_detail_date{padding:16px 0}
	.bbs_wrap .bbs_detail_count_wrap{margin-top:18px !important}
	.bbs_wrap .bbs_detail_count_wrap .bbs_cw_detail{padding:8px 14px 8px 34px; font-size:13px}
	.bbs_wrap .bbs_detail_count_wrap .bbs_cw_detail_icon{padding-left:34px !important}
	.bbs_wrap .bbs_detail_count_wrap .bbs_cw_detail svg{left:12px !important}
	.bbs_wrap .bbs_detail_body{margin-top:26px}
	.bbs_wrap .bbs_detail_body_faq{margin-top:20px}
	.bbs_wrap .bbs_reply_area{margin-top:30px}
	.bbs_wrap .bbs_detail_faq_box{padding:18px}
	.bbs_wrap .bbs_reply_cnt,
	.bbs_wrap .bbs_reply_toggle_txt{font-size:17px}
	.bbs_wrap .bbs_reply_head_in{height:52px}
	/* 공유 말풍선이 화면 밖으로 나가지 않게 — 버튼 오른쪽 끝에 맞춰 건다.
	   ★flex-wrap 을 주면 안 된다★ : 부모(#bbs_sns_layer)가 34px 라 shrink-to-fit 폭이 좁아져
	     아이콘이 세로로 한 줄씩 쌓인다(데스크톱은 가로 한 줄이라 서로 달라짐, 2026-08-10). */
	.bbs_wrap .bbs_talk_box_sns{
		left:auto; right:-10px; width:max-content; padding:14px; gap:8px;
	}
	.bbs_wrap .bbs_talk_box_sns:after{left:auto; right:22px}
	.bbs_wrap .short_comment_size{width:100%}
	.reply_content_depth_1, .reply_reply_box{padding-left:24px}
	.reply_content_depth_2{margin-left:0; padding-left:24px; width:100%}
	.reply_content_depth_1:before, .reply_reply_box:before, .reply_content_depth_2:before{left:2px}
}

/* 게시판 상세 페이지 */

/* 게시판 등록 • 수정 페이지 */
.bbs_wrap .bbs_form_content{
	border-top:1px solid var(--bbs-bar);
}
.bbs_wrap .bbs_form_content .bbs_form_row{
	display: flex;
	align-items: stretch;
	border-bottom: 1px solid var(--line-soft);
}
.bbs_wrap .bbs_form_content .bbs_form_row:last-child{
	border-bottom: none;
}
.bbs_wrap .bbs_form_content .bbs_form_row .bbs_form_title{
	flex: 0 1 150px;
	position: relative;
	background-color: var(--bg2);
	border-right: 1px solid var(--line-soft);
	display: flex;
	align-items: center;
	padding-left: 15px;
	font-size: 15px;
	font-weight: 400;
	color: var(--text2);
}
.bbs_wrap .bbs_form_content .bbs_form_row .bbs_form_info{
	flex: 1;
	min-width:0;
	background-color: var(--card);
	padding: 15px;
	display: inline-flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: center;
}
.bbs_wrap .bbs_form_content .bbs_form_row .bbs_form_info label{
	margin:0 !important;
}
.bbs_wrap .bbs_form_content .bbs_form_row .bbs_form_info select{
	width: 200px !important;
}
/* 이메일 행의 '@' 구분자 (예전 인라인 color:#afafaf) */
.bbs_wrap .bbs_email_at{color:var(--text3); font-size:15px; flex:none}
.bbs_wrap .bbs_reg_bottom_btn{
	padding-top: 20px;
	text-align: center;
	border-top:1px solid var(--bbs-bar);
}
.bbs_wrap .bbs_reg_bottom_btn a{
	margin:0 5px;
}
.bbs_wrap .bbs_dobae{
	display: inline-block;
	color: var(--text);
	background: var(--card);
	font-size: 15px;
	font-family: 'Noto Sans KR' !important;
	font-weight: 500 !important;
	border: 1px solid var(--line);
	border-radius: 0.3em;
	height: 40px;
	vertical-align: middle;
	box-sizing: border-box;
	line-height: 38px;
	padding: 0px 10px;
	flex:none;
	white-space:nowrap;
}
/* ★도배방지키의 '가짜 숫자' 처리★ (2026-08-10 사용자 지적)
   bbs_regist.php:687~ 이 봇 교란용으로 진짜 숫자 사이에 <font color=#ffffff>N</font> 을 끼워 넣는다.
   흰 배경일 때만 안 보이도록 만든 값이라 **다크모드에서는 가짜 숫자가 그대로 드러나** 어느 걸
   입력해야 하는지 알 수 없었다. PHP 라 못 고치므로 테마와 무관하게 투명 처리한다. */
.bbs_wrap .bbs_dobae font{color:transparent !important}

/* 도배방지키 : 입력칸과 키를 항상 한 줄에 */
.bbs_wrap .bbs_form_content .bbs_form_row .bbs_form_info:has(input[name="dobae"]){
	flex-wrap:nowrap;
	gap:8px;
}

/* ---------- ★좁은 화면에서 도배방지키가 넘치던 문제★ (2026-08-10) ----------
   대상은 게시글 등록 폼이 아니라 **댓글 폼**이다. `bbs_detail.php:897~` 이
   클래스 없이 만드는 마크업이라 `.bbs_dobae` 를 기준으로 부모를 잡는다 :
     div[인라인 display:flex; justify-content:space-between]
       ├ div : 비밀번호 입력 + 안내문
       └ div : 도배방지키 입력(130px) + span.bbs_dobae(159px)   ← 합 294px
   320px(스크롤바 제외 실폭 305)에서 오른쪽 묶음이 페이지를 10px 넘겼다.
   → 두 묶음을 위아래로 쌓고(flex-wrap), 오른쪽 묶음 안에서는 키를 고정폭으로 두고
     입력칸만 남는 폭을 쓰게 한다. 키 자체도 살짝 줄인다. */
@media (max-width:400px){
	.bbs_wrap div:has(> div > input[name="dobae"]){flex-wrap:wrap; gap:8px}
	.bbs_wrap div:has(> input[name="dobae"] + .bbs_dobae){
		display:flex;
		align-items:center;
		gap:5px;
		width:100%;
		float:none;
	}
	/* 인라인 style="width:130px" 을 이겨야 한다 */
	.bbs_wrap div:has(> input[name="dobae"] + .bbs_dobae) > input[name="dobae"]{
		width:auto !important;
		flex:1 1 70px;
		min-width:0;
	}
	/* 인라인 style="margin-left:5px" 을 이겨야 한다 */
	.bbs_wrap .bbs_dobae{
		margin-left:0 !important;
		flex:none;
		padding:0 6px;
		font-size:14px;
	}
}

/* ---------- 등록·수정·답변 폼 반응형 ----------
   ※ 폼 컨트롤 자체의 색·테두리·radius 는 h_form 에 맡기고 여기서는 배치만 잡는다 */
@media (max-width:768px){
	/* 라벨을 입력칸 위로 올린다. 이때 라벨칸의 회색 배경·구분선은 오히려 방해가 되므로 없앤다
	   (2026-08-10 사용자 지시) — 행 구분선만 남긴다 */
	.bbs_wrap .bbs_form_content .bbs_form_row{
		flex-direction:column;
		align-items:stretch;
		padding:14px 0;
	}
	.bbs_wrap .bbs_form_content .bbs_form_row .bbs_form_title{
		flex:none;
		background:none;
		border:0;
		padding:0 0 8px;
		font-size:14px;
		font-weight:600;
		color:var(--text);
	}
	.bbs_wrap .bbs_form_content .bbs_form_row .bbs_form_info{
		background:none;
		padding:0;
	}
	.bbs_wrap .bbs_form_content .bbs_form_row .bbs_form_info select{
		width:100% !important;
	}
	.bbs_wrap .bbs_form_content .bbs_form_row .bbs_form_info input[type=text],
	.bbs_wrap .bbs_form_content .bbs_form_row .bbs_form_info input[type=password],
	.bbs_wrap .bbs_form_content .bbs_form_row .bbs_form_info textarea{
		width:100% !important;
		max-width:100%;
	}

	/* ★이메일 행은 `아이디 @ 도메인` 을 한 줄로 묶는다(2026-08-10 사용자 지적)★
	   위 규칙이 input 을 100% 로 만들어 '@' 가 혼자 줄바꿈돼 어색했다.
	   도메인 선택 셀렉트만 다음 줄에 전체 폭으로. */
	.bbs_wrap .bbs_form_info:has(input[name="bbs_email_at_user"]){gap:8px}
	.bbs_wrap .bbs_form_content .bbs_form_row .bbs_form_info input[name="bbs_email_at_user"],
	.bbs_wrap .bbs_form_content .bbs_form_row .bbs_form_info input[name="bbs_email_at_host"]{
		width:auto !important;
		flex:1 1 0;
		min-width:0;
	}
	.bbs_wrap .bbs_form_content .bbs_form_row .bbs_form_info:has(input[name="bbs_email_at_user"]) select{
		flex:1 0 100%;
		width:100% !important;
	}

	/* ★도배방지키 입력칸은 늘리지 않는다★ (2026-08-21 사용자 지시)
	   예전에는 flex:1 1 0 으로 남는 폭을 다 먹어 316px 까지 늘어났다. 4자리만 넣는
	   칸이라 그럴 이유가 없다 → 인라인 style="width:130px" 과 같은 값으로 고정한다.
	   ★단 0 1 130px 로 둬서 '늘지는 않되 아주 좁은 화면에서는 줄어들 수 있게' 한다★
	   (키 이미지 99px + gap 8 과 나란히 서야 해서 완전 고정이면 320px 에서 넘친다) */
	.bbs_wrap .bbs_form_content .bbs_form_row .bbs_form_info input[name="dobae"]{
		width:130px !important;
		flex:0 1 130px;
		min-width:0;
	}

	/* ★하단 버튼 3개를 한 줄에★ (2026-08-21 사용자 지시)
	   데스크톱 값(padding 15px 30px 15px 53px / font 16px)이면 목록보기 144 +
	   글쓰기 129 + 다시쓰기 144 = 417px + 여백이라 420px 안팎에서 두 줄로 접혔다.
	   → 아이콘 자리와 좌우 여백을 줄이고 flex 로 묶어 한 줄을 유지한다. */
	.bbs_wrap .bbs_reg_bottom_btn{
		display:flex;
		justify-content:center;
		align-items:center;
		flex-wrap:nowrap;
		gap:6px;
	}
	.bbs_wrap .bbs_reg_bottom_btn a,
	.bbs_wrap .bbs_reg_bottom_btn button{
		margin:0 !important;
		flex:0 1 auto;
		min-width:0;
		white-space:nowrap;
		padding:12px 12px 12px 32px !important;
		font-size:14px;
	}
	.bbs_wrap .bbs_reg_bottom_btn a svg,
	.bbs_wrap .bbs_reg_bottom_btn button svg{left:10px; width:16px; height:16px}
}

/* 아주 좁은 화면(320~480)에서는 한 번 더 조인다 — 세 버튼 합이 화면 안에 들어와야 한다 */
@media (max-width:480px){
	.bbs_wrap .bbs_reg_bottom_btn{gap:4px}
	.bbs_wrap .bbs_reg_bottom_btn a,
	.bbs_wrap .bbs_reg_bottom_btn button{padding:11px 8px 11px 26px !important; font-size:13px}
	.bbs_wrap .bbs_reg_bottom_btn a svg,
	.bbs_wrap .bbs_reg_bottom_btn button svg{left:7px; width:14px; height:14px}
}
/* 게시판 등록 • 수정 페이지 */

/* =========================================================================
   HAPPYJOB 리스킨 — 커뮤니티 / 고객센터 메인
   기준 시안 : happyjob_site/3_1_community.html · 3_2_support.html
              (css/community.css · css/support.css)
   대상 : html_file/bbs_index.html          + html/bbs_default_community.html
          html_file/bbs_index_customer.html + html/bbs_default_customer.html
   ※ 사이드바(aside_bbs_com/custom.html)는 게시판 목록·상세 페이지와 마크업을 공유하므로
     마크업은 그대로 두고 body.cm-page 안에서만 시안 스타일을 입힌다.
   ========================================================================= */

/* 은은한 틴트 배경 → 흰 카드가 떠 보이게 (시안 body.cm-page) */
body.cm-page{background:var(--bg2)}

/* ---------- 레이아웃 ---------- */
.cm-wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
.cm-layout{display:grid;grid-template-columns:minmax(0,1fr) 250px;gap:48px;margin-top:36px;padding-bottom:8px}
.cm-main{min-width:0;display:flex;flex-direction:column;gap:44px}
.cm-side{min-width:0}
.cm-sec{min-width:0}

/* ---------- 섹션 공통 헤더 ---------- */
.cm-sec-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}
.cm-sec-head h2{position:relative;display:flex;align-items:center;font-size:23px;font-weight:800;letter-spacing:-.03em}
.cm-sec-head h2 a{color:var(--text)}
.cm-sec-head h2 a:hover{color:var(--primary)}
.cm-more{flex:none;display:inline-flex;align-items:center;gap:1px;font-size:13px;font-weight:600;color:var(--text3);transition:color .14s}
.cm-more:hover{color:var(--primary)}
.cm-more .msi{font-size:17px}

/* ---------- 태그 = 게시판 분류 ----------
   {{BOARD.b_category_con_no}} 가 <span class="category_st">분류</span> 를 출력한다.
   ★분류를 안 쓰는 게시판은 빈 값이 나오므로 칩 자리를 통째로 감춘다★
   (:empty 는 템플릿 줄바꿈/공백 때문에 안 맞을 수 있어 :has 로 실제 내용 유무를 본다) */
.cm-tag{display:inline-flex;align-items:center;height:25px;padding:0 12px;border-radius:999px;
	background:var(--primary-weak);color:var(--primary);font-size:11.5px;font-weight:800;letter-spacing:-.02em}
.cm-tag:not(:has(.category_st)),
.cm-pick-badges:not(:has(.category_st)),
.cm-thumb .ov-tag:not(:has(.category_st)){display:none}

/* ---------- 카드 공통 (플로팅) ---------- */
.cm-card{background:var(--card);border:1px solid var(--line-soft);border-radius:20px;
	box-shadow:0 3px 14px rgba(24,39,75,.05);transition:border-color .16s,box-shadow .16s}
[data-theme="dark"] .cm-card{box-shadow:0 3px 14px rgba(0,0,0,.28)}
a.cm-card:hover{border-color:var(--primary);box-shadow:0 8px 22px rgba(51,107,255,.12)}
/* 모든 썸네일 공통 비율 */
.cm-thumb{position:relative;overflow:hidden;aspect-ratio:3/2;background:var(--bg2)}
.cm-thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease}
a.cm-card:hover .cm-thumb img{transform:scale(1.06)}
.cm-thumb .ov-tag{position:absolute;left:14px;top:14px;z-index:2;background:rgba(255,255,255,.95);
	color:var(--primary);height:27px;padding:0 13px;border-radius:999px;display:inline-flex;align-items:center;
	font-size:11.5px;font-weight:800;box-shadow:0 3px 10px rgba(0,0,0,.14)}
.cm-title{font-size:16px;font-weight:700;color:var(--text);line-height:1.45;
	display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.cm-excerpt{margin-top:9px;font-size:13px;color:var(--text2);line-height:1.62;
	display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.cm-date{margin-top:15px;font-size:12px;color:var(--text3);font-variant-numeric:tabular-nums}

/* ---------- 1) 카드 3열 (구인구직 가이드) ---------- */
.cm-pick{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.cm-pickcard{display:flex;flex-direction:column;padding:18px}
.cm-pick-badges{display:flex;align-items:center;gap:6px;margin-bottom:13px}
.cm-pickcard .cm-title{-webkit-line-clamp:1}
.cm-pickcard .cm-excerpt{-webkit-line-clamp:2;flex:1}

/* ---------- 2) 취업꿀팁 (오버레이 히어로 + 랭킹 리스트) ---------- */
.cm-feat{display:grid;grid-template-columns:1.32fr .78fr;gap:18px;align-items:stretch}
.cm-feat-big{position:relative;overflow:hidden;display:block}
.cm-feat-big .cm-thumb{border-radius:20px}
.cm-feat-big .scrim{position:absolute;inset:0;z-index:1;
	background:linear-gradient(to top,rgba(16,22,38,.9) 6%,rgba(16,22,38,.35) 46%,rgba(16,22,38,.02) 78%)}
.cm-feat-cap{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:32px 34px 34px;color:#fff}
.cm-feat-cap .cm-tag{background:rgba(255,255,255,.94)}
.cm-feat-title{margin-top:16px;font-size:23px;font-weight:800;color:#fff;line-height:1.34;letter-spacing:-.03em;
	display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.cm-feat-ex{margin-top:11px;font-size:14px;color:rgba(255,255,255,.86);line-height:1.6;
	display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.cm-feat-date{margin-top:14px;font-size:12.5px;color:rgba(255,255,255,.72);font-variant-numeric:tabular-nums}
/* 시안에는 순번(1·2·3)이 있으나 사용하지 않기로 함(2026-08-05) — 왼쪽 들여쓰기도 함께 제거 */
.cm-rank-list{display:flex;flex-direction:column;overflow:hidden;align-self:stretch}
.cm-rankrow{display:flex;flex-direction:column;justify-content:center;flex:1;padding:18px;
	border-bottom:1px solid var(--line-soft);transition:background .12s}
.cm-rankrow:last-child{border-bottom:none}
.cm-rankrow:hover{background:var(--bg2)}
.cm-rankrow .rtop{display:flex;align-items:flex-start}
.cm-rankrow .cm-title{font-size:15.5px;-webkit-line-clamp:1;flex:1}
.cm-rankrow .cm-excerpt{margin-top:6px;-webkit-line-clamp:1;font-size:12.5px}
.cm-rankrow .cm-date{margin-top:8px}

/* ---------- 3) 취준생뉴스 / 직장인뉴스 ---------- */
.cm-duo{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.cm-duo > div{min-width:0}
.cm-news{overflow:hidden}
.cm-news-body{padding:10px}
.cm-nrow{display:flex;align-items:center;gap:14px;height:44px;padding:0 12px;border-radius:10px;transition:background .12s}
.cm-nrow:hover{background:var(--bg2)}
.cm-nrow .dot{flex:none;width:6px;height:6px;border-radius:50%;background:linear-gradient(var(--primary),var(--secondary))}
.cm-news.g .cm-nrow .dot{background:linear-gradient(var(--secondary),var(--primary))}
.cm-nrow .tt{flex:1;min-width:0;font-size:14px;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cm-nrow:hover .tt{color:var(--primary)}
.cm-nrow .dt{flex:none;font-size:12px;color:var(--text3);font-variant-numeric:tabular-nums}

/* ---------- 4) 인재인터뷰 (3열 카드) ---------- */
.cm-grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.cm-vcard{display:flex;flex-direction:column;overflow:hidden}
.cm-vcard .cm-thumb{border-radius:20px 20px 0 0}
.cm-vcard .body{padding:18px}

/* ---------- 5) 직무인터뷰 · 광고/공모전 (썸네일 가로 리스트) ---------- */
.cm-flist{display:flex;flex-direction:column;gap:18px}
.cm-frow{display:flex;gap:22px;padding:18px;align-items:center}
.cm-frow .cm-thumb{flex:none;width:224px;border-radius:14px}
.cm-frow .txt{flex:1;min-width:0}
.cm-frow .cm-title{font-size:18px;-webkit-line-clamp:1}

/* ---------- 6) 포토갤러리 (4열) ---------- */
.cm-grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.cm-pcard{display:flex;flex-direction:column;overflow:hidden}
.cm-pcard .cm-thumb{border-radius:20px 20px 0 0}
.cm-pcard .body{padding:18px}
.cm-pcard .cm-title{font-size:15px;-webkit-line-clamp:1}
.cm-pcard .cm-excerpt{-webkit-line-clamp:2;font-size:12.5px}

/* =========================================================================
   고객센터 (시안 support.css)
   ========================================================================= */
/* ---------- 1) 게시판 바로가기 타일 (가로 4열) ----------
   시안은 [대표번호 카드 + 2×2 타일] 이었으나 대표번호 카드를 빼고
   타일을 전체 폭 가로 배치로 변경(2026-08-05 사용자 지시). */
.sc-quick{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.sc-qtile{position:relative;display:flex;flex-direction:column;padding:22px}
.sc-qtile .ic{width:46px;height:46px;border-radius:14px;display:flex;align-items:center;justify-content:center;
	background:var(--primary-weak);color:var(--primary);margin-bottom:14px}
.sc-qtile.g .ic{background:var(--secondary-weak);color:var(--secondary)}
.sc-qtile.v .ic{background:#F0E9FF;color:#7C5CFF}
.sc-qtile.o .ic{background:#FFF1E3;color:#F5871F}
[data-theme="dark"] .sc-qtile.v .ic{background:#2A2440}
[data-theme="dark"] .sc-qtile.o .ic{background:#3A2E1F}
.sc-qtile .ic .msi{font-size:25px;font-variation-settings:'FILL' 1}
.sc-qtile .t{font-size:15.5px;font-weight:700;color:var(--text)}
.sc-qtile .d{margin-top:5px;font-size:12.5px;color:var(--text3);line-height:1.5}
.sc-qtile .go{position:absolute;top:18px;right:16px;display:inline-flex;align-items:center;gap:1px;
	font-size:12px;font-weight:400;color:var(--text3);transition:color .14s}
.sc-qtile .go .msi{font-size:16px}
a.sc-qtile:hover .go{color:var(--primary)}

/* ---------- 2) 공지사항 · 광고문의 (라인 구분 리스트) ---------- */
.sc-notice{overflow:hidden}
.sc-nlist.sep{padding:0}
.sc-nrow{display:flex;align-items:center;gap:14px;height:58px;padding:0 20px;
	border-bottom:1px solid var(--line-soft);transition:background .12s}
.sc-nrow:last-child{border-bottom:none}
.sc-nrow:hover{background:var(--bg2)}
.sc-nrow .cat{flex:none;display:inline-flex;align-items:center;justify-content:center;min-width:62px;height:24px;
	padding:0 10px;border-radius:8px;font-size:11.5px;font-weight:700;background:var(--bg2);color:var(--text3)}
/* 분류를 안 쓰는 게시판이면 칩 자리를 비우지 않는다 (커뮤니티 태그와 같은 방식) */
.sc-nrow .cat:not(:has(.category_st)){display:none}
.sc-nrow .tt{flex:1;min-width:0;font-size:15px;font-weight:600;color:var(--text);
	overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sc-nrow:hover .tt{color:var(--primary)}
.sc-nrow .dt{flex:none;font-size:12px;color:var(--text3);font-variant-numeric:tabular-nums}

/* ---------- 3) 자주묻는질문 ---------- */
.sc-faq{padding:0;overflow:hidden}
.sc-frow{display:flex;align-items:center;gap:15px;height:58px;padding:0 20px;
	border-bottom:1px solid var(--line-soft);transition:background .12s}
.sc-frow:last-child{border-bottom:none}
.sc-frow:hover{background:var(--bg2)}
.sc-frow .q{flex:none;width:27px;height:27px;border-radius:9px;background:var(--primary);color:#fff;
	display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:800}
.sc-frow .tt{flex:1;min-width:0;font-size:15px;font-weight:600;color:var(--text);
	overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sc-frow:hover .tt{color:var(--primary)}
.sc-frow .dt{flex:none;font-size:12px;color:var(--text3);font-variant-numeric:tabular-nums}

/* ---------- 4) 질문과답변 / 1:1고객문의 ---------- */
.sc-thread{padding:0;overflow:hidden}
.sc-qitem{display:block;padding:18px 20px;border-bottom:1px solid var(--line-soft);transition:background .12s}
.sc-qitem:last-child{border-bottom:none}
.sc-qitem:hover{background:var(--bg2)}
.sc-qhead{display:flex;align-items:center;gap:13px}
.sc-qhead .q{flex:none;width:26px;height:26px;border-radius:8px;background:var(--primary);color:#fff;
	display:flex;align-items:center;justify-content:center;font-size:12.5px;font-weight:800}
.sc-qhead .q.lock{background:var(--text3)}
.sc-qhead .q .msi{font-size:16px}
.sc-qhead .tt{flex:1;min-width:0;font-size:15px;font-weight:600;color:var(--text);
	overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sc-qitem:hover .sc-qhead .tt{color:var(--primary)}
.sc-qhead .dt{flex:none;font-size:12px;color:var(--text3);font-variant-numeric:tabular-nums}
/* 답변상태 : {{BOARD.radio1_info}} 가 완료/접수 span 을 출력한다 */
.sc-qhead .sc-badge{flex:none;display:inline-flex}
.sc-qhead .sc-badge:empty{display:none}
.sc-qhead .bbs_radio_info_01,
.sc-qhead .bbs_radio_info_02{display:inline-flex;align-items:center;justify-content: center;height:23px;padding:0 11px;border-radius:999px;
	font-size:11px;font-weight:800;letter-spacing:-.01em}
.sc-qhead .bbs_radio_info_01{background:var(--secondary-weak);color:var(--secondary)}
.sc-qhead .bbs_radio_info_02{background:var(--bg2);color:var(--text3)}
.sc-qitem:hover .sc-qhead .bbs_radio_info_02{background:var(--chip)}

/* =========================================================================
   우측 사이드바
   ※ 마크업(aside_bbs_com/custom.html)은 게시판 목록·상세와 공유하므로 건드리지 않고
     .cm-side 안에서만 시안(.cm-scard) 형태로 바꾼다.
   ========================================================================= */
.cm-side .aside_box_wrap{border:1px solid var(--line-soft);border-radius:20px;background:var(--card);padding:18px;
	box-shadow:0 3px 14px rgba(24,39,75,.05)}
[data-theme="dark"] .cm-side .aside_box_wrap{box-shadow:0 3px 14px rgba(0,0,0,.28)}
.cm-side .aside_box_wrap + .aside_box_wrap{margin-top:20px}
.cm-side .aside_box_title{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.cm-side .aside_box_title .title_st{font-size:17px;font-weight:800;letter-spacing:-.02em;color:var(--text)}
.cm-side .aside_box_title a.title_st:hover{color:var(--primary)}
.cm-side .aside_box_title .title_st .point_color{color:var(--primary) !important;margin-left:4px}
.cm-side .aside_box_title .list_more{width:30px;height:30px;display:flex;align-items:center;justify-content:center;
	border-radius:8px;color:var(--text3);transition:color .14s,background .14s}
.cm-side .aside_box_title .list_more:hover{color:var(--primary);background:var(--bg2)}
.cm-side .aside_box_title .list_more svg{stroke:currentColor}
.cm-side .aside_box_title .list_more:hover svg{animation:cm-spin .5s ease}
@keyframes cm-spin{from{transform:rotate(0)}to{transform:rotate(360deg)}}

/* 게시판 목록 = 시안 .cm-nav */
.cm-side .aside_list_area{display:flex;flex-direction:column;gap:1px}
.cm-side .aside_list_area .bbs_list_item{display:flex;align-items:center;gap:9px;height:40px;padding:0 12px;
	border-radius:10px;font-size:14px;font-weight:500;color:var(--text2);transition:color .12s,background .12s}
.cm-side .aside_list_area .bbs_list_item::before{content:'';width:4px;height:4px;border-radius:50%;
	background:var(--text3);opacity:.5;transition:.12s}
.cm-side .aside_list_area .bbs_list_item:hover{background:var(--bg2);color:var(--primary)}
.cm-side .aside_list_area .bbs_list_item:hover::before{background:var(--primary);opacity:1}

/* 현재접속자 (iframe) */
.cm-side .s_connect_list_wrap{border:0;padding:0}
.cm-side .s_connect_list_wrap iframe{width:100% !important;height:170px !important;border:0;display:block}

/* 실시간 인기검색어 (vTicker 롤링 유지)
   ※ 아래 행 스타일은 통합검색(all_search.php) 사이드바에도 같이 건다 —
     두 곳 디자인이 달라 게시판 기준으로 통일하라는 지시(2026-08-19).
     같은 템플릿(keyword_html_roll_sub2.html)을 쓰지만 껍데기가 달라서
     게시판=.cm-side / 통합검색=.all_search_aside_wrap 두 스코프가 필요하다.
     테두리·패딩은 각 페이지 것을 그대로 두되, 보이는 줄수(=.vTicker 높이)도 게시판에 맞춰
     6줄 창으로 통일했다(2026-08-19 사용자 지시). 216px = 36px 행 × 6줄.
     매크로는 양쪽 다 10개를 뽑으므로 나머지 4줄은 롤링으로 넘어간다. */
.cm-side .bbs_keyword_list_wrap{border:0;padding:0}
.cm-side .bbs_keyword_list_wrap .vTicker,
.all_search_aside_wrap .vTicker{height:216px !important}
.cm-side .hj-krank-row,
.all_search_aside_wrap .hj-krank-row{height:36px !important;display:flex;align-items:center}
.cm-side .hj-krank-inner,
.all_search_aside_wrap .hj-krank-inner{display:flex;align-items:center;gap:11px;width:100%;padding:0 4px}
/* 순위 뱃지 — 1~3위만 포인트색, 4위부터는 연한 회색 뱃지.
   :nth-child 는 못 쓴다. vTicker 가 li 를 잘라 뒤로 붙이는 방식이라 롤링될 때마다
   DOM 순서가 밀려서 4번째 항목이 계속 바뀐다 → 템플릿이 찍는 data-rank 로 고정. */
.cm-side .hj-krank-num,
.all_search_aside_wrap .hj-krank-num{flex:none;width:21px;height:21px;border-radius:6px;font-size:11px;font-weight:800;
	background:var(--chip) !important;color:var(--text2)}
.cm-side .hj-krank-num[data-rank="1"],
.cm-side .hj-krank-num[data-rank="2"],
.cm-side .hj-krank-num[data-rank="3"],
.all_search_aside_wrap .hj-krank-num[data-rank="1"],
.all_search_aside_wrap .hj-krank-num[data-rank="2"],
.all_search_aside_wrap .hj-krank-num[data-rank="3"]{background:var(--primary) !important;color:#fff}
.cm-side .hj-krank-word,
.all_search_aside_wrap .hj-krank-word{flex:1;min-width:0;font-size:13.5px;color:var(--text);
	overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cm-side .hj-krank-word:hover,
.all_search_aside_wrap .hj-krank-word:hover{color:var(--primary)}
.cm-side .hj-krank-diff,
.all_search_aside_wrap .hj-krank-diff{position:static;transform:none;flex:none;font-size:11px;font-weight:800;color:var(--text3)}
/* ★순위 변동 아이콘은 원본 크기 그대로★ (2026-08-28 사용자 지적)
   `height:9px` 로 묶어 놨더니 10px 짜리 gif 두 개가 축소되면서 흐려졌다
   (new 25×10 → 22.5×9, 하락 8×10 → 7.2×9 / 상승·유지 8×9 는 원래 딱 맞았다).
   gif 는 비트맵이라 0.9배만 줄여도 뭉개진다 → 크기를 강제하지 않는다.
   높이가 9·10px 로 1px 섞이지만 부모가 align-items:center 라 눈에 띄지 않는다. */
.cm-side .hj-krank-diff img,
.all_search_aside_wrap .hj-krank-diff img{display:block;width:auto;height:auto}

/* 클라우드 인기검색어 = 시안 .cm-cloud
   매크로가 <div class="cloud_tag_txt_N"> 를 float 로 뿌리므로 flex 로 다시 잡는다 */
.cm-side .bbs_cloud_list_wrap{border:0;padding:0}
.cm-side .bbs_cloud_list_wrap > div{width:auto !important;height:auto !important;overflow:visible !important;
	display:flex;flex-wrap:wrap;gap:9px}
.cm-side .bbs_cloud_list_wrap > div > div{float:none !important;margin:0 !important;
	display:inline-flex;align-items:center;height:32px;padding:0 14px !important;border-radius:10px;
	font-size:13px !important;font-weight:600;transition:filter .12s}
.cm-side .bbs_cloud_list_wrap > div > div:hover{filter:brightness(1.06)}

/* =========================================================================
   반응형
   ========================================================================= */
@media (max-width:1024px){
	.cm-layout{grid-template-columns:1fr;gap:28px}
	.cm-side{order:-1}
	/* 정보 카드(현재접속·실시간·클라우드)는 숨기고 게시판 목록만 상단 가로 칩으로.
	   ★칩(흰 배경 + 테두리 + 라운드)은 메인·목록 모두 유지한다(2026-08-10 사용자 확정)★
	   다만 칩을 감싼 카드 박스의 배경·그림자는 상단에 올라온 상태에서 불필요하므로 끈다.
	   ※ 다크의 box-shadow 는 [data-theme=dark] .cm-side .aside_box_wrap (0,3,0) 이라
	     여기 (0,2,0) 규칙으로는 못 이긴다 → 같은 명시도로 따로 꺼 줘야 그림자가 사라진다. */
	.cm-side .aside_box_wrap{padding:0;border:0;background:none;box-shadow:none;border-radius:0}
	[data-theme="dark"] .cm-side .aside_box_wrap{box-shadow:none}
	.cm-side .aside_box_wrap + .aside_box_wrap{margin-top:0;display:none}
	.cm-side .aside_box_title{display:none}
	.cm-side .aside_list_area{flex-direction:row;overflow-x:auto;gap:6px;padding-bottom:2px}
	.cm-side .aside_list_area .bbs_list_item{flex:none;height:36px;padding:0 15px;border:1px solid var(--line);
		border-radius:999px;background:var(--card);font-weight:600;white-space:nowrap}
	.cm-side .aside_list_area .bbs_list_item::before{display:none}
	.sc-quick{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:768px){
	.cm-wrap{padding:0 16px}
	.cm-layout{margin-top:22px;gap:36px}
	.cm-sec-head h2{font-size:19px}
	.cm-feat{grid-template-columns:1fr;gap:18px}
	.cm-feat-cap{padding:16px 18px 18px}
	.cm-feat-title{font-size:19px;-webkit-line-clamp:1}
	.cm-duo{grid-template-columns:1fr;gap:20px}
	/* 리스트 : 제목/날짜 상하 배치 */
	.cm-news-body{padding:0}
	.cm-nrow{flex-wrap:wrap;height:auto;row-gap:6px;padding:18px 20px;border-radius:0;
		border-bottom:1px solid var(--line-soft)}
	.cm-nrow:last-child{border-bottom:none}
	.cm-nrow .dot{display:none}
	.cm-nrow .dt{flex-basis:100%;width:100%}
	/* 카드 그리드 : 가로 스와이프 */
	.cm-grid3,.cm-grid4,.cm-pick{display:flex;overflow-x:auto;gap:14px;scroll-snap-type:x mandatory;
		margin:0;padding:0 0 8px}
	.cm-grid3 > *,.cm-grid4 > *,.cm-pick > *{flex:none;scroll-snap-align:start}
	.cm-pick > *{width:80%}
	.cm-grid3 > *{width:74%}
	.cm-grid4 > *{width:47%}
	.cm-frow{gap:16px;padding:16px}
	.cm-frow .cm-thumb{width:140px}
	.cm-frow .cm-title{font-size:15.5px}

	/* 고객센터 */
	.sc-quick{gap:10px}
	.sc-qtile{padding:18px}
	.sc-nrow{flex-direction:column;align-items:flex-start;height:auto;gap:8px;padding:20px}
	.sc-nrow .tt,.sc-frow .tt,.sc-qhead .tt{white-space:nowrap;width:100%}
	.sc-frow .q,.sc-qhead .q{display:none}
	.sc-nrow .dt,.sc-frow .dt,.sc-qhead .dt{flex-basis:100%;width:100%}
	.sc-frow{flex-wrap:wrap;height:auto;row-gap:7px;padding:20px}
	.sc-qhead{flex-wrap:wrap;row-gap:10px}
	.sc-qitem{padding:20px}
}
@media (max-width:480px){
	.cm-feat-ex{display:none}
	.cm-frow{flex-direction:column;align-items:stretch}
	.cm-frow .cm-thumb{width:100%}
	.sc-quick{grid-template-columns:1fr}
}


/* ===================================================================
   소스보기 팝업 (bbs_source_view.php · window.open 500x400)
   PHP 가 HTML 을 직접 print 하는 페이지라 템플릿이 없다.
   body 에 hj-page 를 붙여 다크 스코프에 편입시키고, 인라인으로 박혀 있던
   padding / 여백 / textarea 배경(#fafafa)을 여기로 옮겼다. (2026-08-14)
   =================================================================== */
body.hj-source-page{ margin:0; }

body.hj-source-page .hj-source-wrap{
	display:flex; flex-direction:column; gap:14px;
	padding:20px; min-height:100vh; box-sizing:border-box;
}

body.hj-source-page .hj-source-title{
	font-size:20px; font-weight:700; letter-spacing:-0.5px;
	color:var(--text);
}

body.hj-source-page .hj-source-area{
	width:100%; flex:1 1 auto; min-height:200px; resize:vertical;
	background:var(--bg2); color:var(--text);
	border:1px solid var(--line); border-radius:6px;
	padding:12px; box-sizing:border-box;
	font-family:ui-monospace,SFMono-Regular,Consolas,monospace;
	font-size:13px; line-height:1.6;
}

body.hj-source-page .hj-source-btns{ text-align:center; flex:none; }

@media (max-width:480px){
	body.hj-source-page .hj-source-wrap{ padding:14px; gap:10px; }
	body.hj-source-page .hj-source-title{ font-size:17px; }
	body.hj-source-page .hj-source-area{ min-height:160px; font-size:12px; }
}