@charset "utf-8";

.board-notice	{ width: 264px; padding: 10px; margin: 0 auto; text-align: center; box-sizing: border-box; }


.avocado-list	{
	display: block;
	position: relative;
	margin: 0;
	padding: 0;
}

.avocado-list li	{
	display: block;
	position: relative; 
	padding: 5px 0; 
	margin-bottom:1px;
} 
.avocado-list li.bo_notice	{  }
.avocado-list li.no-data	{ 
	text-align: center;
	line-height: 200px;
}
.avocado-list li .td_chk { position:absolute; padding-left:5px;line-height: 35px;z-index:10;}
.avocado-list li a	{
	display: block;
	position: relative;
	padding: 0px 200px 0px 120px;
	line-height: 35px;
}
.avocado-list li strong	{
	display: block;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}
.avocado-list li strong .highlight {font-weight:normal;}
.avocado-list li strong .cnt_cmt:before	{ content: "( "; }
.avocado-list li strong .cnt_cmt:after	{ content: " )"; }

.avocado-list li .ico-cate	{
	display: block;
	position: absolute;
	top: 0; 
	left: 20px;
	width: 100px;
	text-align: center;
}
.avocado-list li .name	{
	display: block;
	position: absolute;
	top: 0;
	right: 100px;
	width: 100px;
	text-align: center;
	opacity: .6;
	font-size: 11px;
}
.avocado-list li .date	{
	display: block;
	position: absolute;
	top: 0;
	right: 0;
	width: 100px;
	text-align: center;
	opacity: .6;
	font-size: 11px;
}
.avocado-list li .hit	{
	display: block;
	position: absolute;
	top: 0;
	right: 0;
	width: 50px;
	text-align: center;
	opacity: .6;
	font-size: 11px;
}



.bo_fx {position:relative;padding:20px 0;}
.bo_fx .chk_all{ position:absolute;left:5px;top:20px;}



.board-category	{
	display: block;
	position: relative;
	margin-bottom: 10px; 
	
}
.board-category select	{

}

@media all and (max-width: 640px) {
#bo_v_con * {max-width:100%;}

	.board-category	{
		display: block;
		width: 100%;
		box-sizing: border-box;
		padding: 0 10px;
	}
	.board-category select	{
		width: 100%;
	}

	.bo_fx	{
		display: block;
		width: 100%;
		box-sizing: border-box;
		padding: 20px 10px !important;
	}
	.bo_fx a	{
		display: block;
		width: 100%;
	}
}



.board-write	{  padding: 0 10px; }

.board-write h3	{
	font-size: 26px;
	text-align: center;
	padding: 30px 0 20px;
} 
.board-write .write-notice	{
	padding: 10px;
	font-size: 11px;
}
.board-write > dl {position:relative;}
.board-write > dl > dt { width:70px;position:absolute;line-height:32px;text-align:center; }
.board-write > dl > dd { width:100%;margin-left:0;padding-left:80px;box-sizing:border-box;line-height:32px;}
.board-write input.frm_input.full	{ width: 100%; display:block;margin:1px 0;}




.board-viewer.theme-box	{
	display: block;
	position: relative;
	padding: 20px;
}

.board-viewer .subject	{
	text-align: center;
}
.board-viewer .subject em	{
	display: block;
	position: relative;
	font-size: 14px;
	line-height: 1.2em;
	padding-bottom: 10px;
}
.board-viewer .subject strong	{
	display: block;
	position: relative;
	font-size: 22px;
	line-height: 1.2em;
}

.board-viewer .info	{
    margin-top: 6px;
    padding: 4px 10px;
	text-align: center;
}
.board-viewer .info span	{ display: inline-block; opacity: .8; }
.board-viewer .info span + span:before	{
	content: "";
	display: inline-block;
	width: 1px;
	height: 8px;
	vertical-align: middle;
	margin: 0 10px;
}

.board-viewer {
    width: 320px;
    height: 320px;

    margin: 0 auto !important;
    margin-top: 0px !important;

    overflow-y: auto;
    overflow-x: hidden;

    box-sizing: border-box;

    -ms-overflow-style: none;
    scrollbar-width: none;
}

.board-viewer::-webkit-scrollbar {
    display: none;
}

.board-viewer .contents {
    overflow: visible;
    height: auto;

    margin: 8px 0;
    padding: 12px 15px;

    box-sizing: border-box;
}






#bo_v_bot	{ padding: 20px 0; overflow: hidden; }
.bo_v_nb	{ float: left; }
.bo_v_com	{ float: right; }


.board-comment-list			{ position: relative; }
.board-comment-list .co-line	{
	display: block;
	position: relative;
	clear: both;
	width: 100%;
	height: 1px;
	margin: 0;
	padding: 0;
	border: none;
}
.board-comment-list .item	{
	position: relative;
	padding: 10px 10px 10px 100px;
}
.board-comment-list .co-name	{
	position: absolute;
	top: 0px;
	left: 0;
	bottom: 0;
	width: 90px;
	padding: 10px 10px;
	box-sizing: border-box;
}
.board-comment-list .co-info {
	display: block;
	text-align: right;
	padding-top: 15px;
	font-size: 11px;
	opacity: .7;
}
.board-comment-list .co-info span	{ display: inline-block; opacity: .8; }
.board-comment-list .co-info span + span:before	{
	content: "";
	display: inline-block;
	width: 1px;
	height: 8px;
	vertical-align: middle;
	margin: 0 10px;
}

.board-comment-list .item.reply	{ border-left: 5px solid rgba(255, 255, 255, .1); }
.board-comment-list .item.reply .co-name	{
	background: none;
}


.board-comment-list + .board-comment-write	{
	margin-top: 20px;
}

.board-comment-form	{ 
	position: relative;
	padding-right: 80px;
}
.board-comment-form .btn_confirm	{
	position: absolute;
	top: 0;
	right: 0;
	bottom: 29px;
	width: 80px;
}
.board-comment-form .btn_confirm .ui-btn	{
	width: 100%;
	height: 100%;
}
.board-comment-form p	{
	margin: 0;
	padding: 5px 10px;
}
.board-comment-form textarea	{ display: block; height: 100px; resize: none; border: none; }


@media all and (max-width: 640px) {

	.avocado-list li a	{
		line-height: 1.2em;
		padding: 10px 25px;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}
	.avocado-list li .ico-cate,
	.avocado-list li .name,
	.avocado-list li .date,
	.avocado-list li .hit	{
		position: relative;
		width: auto;
		left: auto;
		right: auto;
		bottom: auto;
		line-height: 1.2em;
	}

	.avocado-list li .info	{
		display: block;
		text-align: right;
		line-height: 1.0em;
		padding-top: 10px;
	}

	.avocado-list li .ico-cate	{ display: inline; }
	.avocado-list li .ico-cate:before	{ content: "[ "; }
	.avocado-list li .ico-cate:after	{ content: " ]"; }

	.avocado-list li strong	{ display: inline; line-height: 1.2em; }

	.avocado-list li .name,
	.avocado-list li .date,
	.avocado-list li .hit	{ display: inline; padding: 0 5px; }

	.board-comment-list .item	{ padding: 0; }
	.board-comment-list .co-name	{ position: relative; width: auto; padding: 5px 10px; }
	.board-comment-list .co-content	{ padding: 10px; word-break:break-all;}

}

/* =========================

/* =========================
   검색 영역
========================= */

.bo_sch_wrap {
    width: 320px;

    margin: -28px auto 0;

    display: flex;
    justify-content: flex-end;
}


#bo_sch {
    display: flex;
    align-items: center;
    gap: 6px;
}


/* =========================
   썸네일 게시판 전용 오버라이드
   ========================= */

/* 카테고리 블록 제거 */
.board-category { display: none; }

/* 검색 드롭다운 숨김 (다른 스킨 공유 대비) */
#sfl { display: none; }

/* ── 그누보드 기본 input/button 리셋 ──
   .tb-search 안의 요소들이 기본 스타일에 덮이지 않도록 */

/* 검색 input */
.tb-search input[type="text"]#stx {
    width: auto;
    height: auto;
    border: none;
    border-radius: 0;
    padding: 5px 12px;
    outline: none;
    background: transparent;
    color: #333;
    font-size: 13px;
    box-shadow: none;
}
.tb-search input[type="text"]#stx::placeholder {
    color: #ccc;
}

/* 검색 버튼 */
.tb-search button[type="submit"] {
    width: auto;
    height: auto;
    border: none;
    border-radius: 0;
    background: transparent;
    color: #ec9a67;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 4px 8px 2px;
    font-size: inherit;
    line-height: 1;
    box-shadow: none;
}

/* ★ 핵심: Material Symbols 아이콘 span — 절대 숨기지 않음 */
.tb-search button[type="submit"] .material-symbols-outlined {
    display: inline-block !important;   /* 이전 "span { display:none }" 무력화 */
    font-family: 'Material Symbols Outlined' !important;
    font-size: 20px;
    color: #ec9a67;
    line-height: 1;
    font-weight: normal;
    font-style: normal;
    text-transform: none;
    letter-spacing: normal;
    word-wrap: normal;
    white-space: nowrap;
    direction: ltr;
    -webkit-font-smoothing: antialiased;
    font-feature-settings: 'liga';
    -webkit-font-feature-settings: 'liga';
}

/* fieldset 기본 스타일 제거 */
.tb-search,
.tb-search fieldset {
    border: none;
    padding: 0;
    margin: 0;
}

/* 페이징 — 그누보드 .pg_wrap 기본 text-align:center 덮어쓰기 */
.tb-paging .pg_wrap {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 0;
    margin: 0;
    text-align: left;
}
.tb-paging .pg_page,
.tb-paging .pg_current {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 26px;
    height: 26px;
    font-size: 12px;
    text-decoration: none;
    color: #555;
    border: none;
    border-radius: 4px;
    padding: 0 4px;
    box-sizing: border-box;
    line-height: 1;
}
.tb-paging .pg_current {
    background: #ec9a67;
    color: #fff;
    font-weight: bold;
}
.tb-paging .pg_page:hover {
    background: #fdf3eb;
    color: #ec9a67;
}

/* ===================================================
   썸네일 게시판 전용: 제목 8글자 줄바꿈 및 정중앙 정렬
   =================================================== */

.tb-item__title {
    flex: 1 !important;
    display: flex !important;
    align-items: center !important;        /* 세로 정중앙 정렬 */
    justify-content: center !important;     /* 가로 정중앙 정렬 */
    padding: 4px 6px !important;
    box-sizing: border-box !important;
    text-align: center !important;
    font-size: 11.5px !important;
    line-height: 1.4 !important;
    
    /* 영문, 숫자, 한글 모두 공백 없이 이어져도 글자 단위로 쪼개지도록 설정 */
    word-break: break-all !important;       
    overflow-wrap: break-word !important;
    
    /* ★ 핵심: 11.5px 폰트 기준, 좌우 여백 제외 8글자가 채워지도록 너비 임계값 제한 */
    max-width: 88px !important;             
    margin: 0 auto !important;
    
    /* 기존 2줄 제한(-webkit-line-clamp) 및 말줄임표(...) 속성 무력화 */
    overflow: visible !important;
    display: flex !important; 
    -webkit-line-clamp: unset !important; 
    -webkit-box-orient: unset !important;
}

/* 이미지 없는 썸네일 카드(100x100)의 완벽한 정중앙 배치 */
.tb-item--no-img .tb-item__title {
    height: 100% !important;
    max-width: 88px !important;
    display: flex !important;
    align-items: center !important;        /* 세로 중앙 */
    justify-content: center !important;     /* 가로 중앙 */
}

.wr_content {position: relative; width: 700px; z-index: 1;}