@charset "utf-8";

/* ==========================================================================
   FAQ 아코디언 스킨 (new_faq)
   - 공지사항(new_notice) 목록 UI를 그대로 쓰되, 행 클릭 시 답변이 펼쳐지도록 확장
   - 분류(카테고리) 탭은 이벤트 게시판(new_event)과 동일한 UI를 사용
   ========================================================================== */

#bo_cate_ul { 
    display: flex;
    justify-content: center;
    gap: 19px;
    padding: 20px 25px;
    margin-top: 19px;
    margin-bottom: 50px;
    border-radius: 5px;
    overflow: hidden;
}
#bo_cate_ul li{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    width: 140px;
    line-height: 40px;
    background: #FFF;
    border-radius: 40px;
    overflow: hidden;
    border: 1px solid #e0e0e0;
    cursor: pointer;
    transition: all .1s ease;
}

/* 메뉴 포인터 이슈 수정 */
#bo_cate_ul li a {width: 100%; text-align: center;}

#bo_cate_ul li #bo_cate_on {
    width: 100%;
    text-align: center;
    background: #ed623f;
    border-color: #ed623f;
    color: #FFF;    
}

/* --------------------------------------------------------------
   목록 행(질문)
   -------------------------------------------------------------- */
.k_faq_list .bo_list ul li.faq_item {
	display:block;          /* 기본 스킨의 display:table 해제 */
	padding:0;              /* 안쪽 여백은 .faq_q 가 담당 */
	position:relative;
}

.k_faq_list .bo_list ul li.faq_item .faq_q {
	display:flex; align-items:center;
	padding:20px 40px 20px 0;   /* 오른쪽 40px = 펼침 화살표 자리 */
	cursor:pointer;
	position:relative;
}

.k_faq_list .bo_list ul li.faq_item span {float:none;}

/* 목록 헤더(No./질문/날짜)와 본문의 열 위치를 맞춘다.
   본문 행이 화살표 자리로 오른쪽 40px 를 쓰므로 헤더에도 동일하게 준다. */
.k_faq_list .bo_list_head ul li {padding-right:40px;}

.k_faq_list .bo_list_head ul li span.s-name,
.k_faq_list .bo_list ul li.faq_item .faq_q .s-name {width:75%;}

.k_faq_list .bo_list ul li.faq_item .faq_q .s-name,
.k_faq_list .bo_list ul li.faq_item .bo_tit,
.k_faq_list .bo_list ul li.faq_item .faq_mark,
.k_faq_list .bo_list ul li.faq_item .faq_cate_tag,
.k_faq_list .bo_list ul li.faq_item .faq_tit_txt {text-align:left;}

.k_faq_list .bo_list ul li.faq_item .faq_q .bo_tit {
	display:flex; align-items:center; flex-wrap:wrap; gap:0;
	width:100%;
}
/* 제목 : 공지사항 목록(new_notice)과 동일 — 기본 #111, 행 hover 시 #ed623f */
.k_faq_list .bo_list ul li.faq_item .faq_tit_txt {
	flex:1 1 auto; min-width:0;
	color:#111; font-size:1rem; line-height:1.5;
	overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
	transition:color .2s;
}
.k_faq_list .bo_list ul li.faq_item.on .faq_tit_txt {color:#ed623f;}

@media (hover:hover) and (pointer:fine) {
	.k_faq_list .bo_list ul li.faq_item:hover .faq_tit_txt {color:#ed623f;}
}

/* Q / A 표시 */
.k_faq_list .faq_mark {
	flex:0 0 auto;
	display:inline;
	font-style:normal;
	background:none; border:0; padding:0;
	color:inherit;
	margin-right:15px;
}

/* 분류 표시 — 기본 텍스트 */
.k_faq_list .faq_cate_tag {
	flex:0 0 auto;
	display:inline;
	color:#888; font-size:0.938rem; font-weight:400;
	margin-right:6px;
}
.k_faq_list .faq_cate_tag:before {content:"[";}
.k_faq_list .faq_cate_tag:after {content:"]";}

/* 펼침 화살표 */
.k_faq_list .faq_arrow {
	position:absolute; top:50%; right:5px;
	width:11px; height:11px; margin-top:-8px;
	border-right:2px solid #999; border-bottom:2px solid #999;
	transform:rotate(45deg); transition:transform .25s, border-color .25s;
}
.k_faq_list .bo_list ul li.faq_item.on .faq_arrow {
	margin-top:-3px; transform:rotate(-135deg);
	border-color:#ed623f;
}

/* --------------------------------------------------------------
   답변 패널
   -------------------------------------------------------------- */
.k_faq_list .bo_list ul li.faq_item .faq_a {
	display:none;
	background:#f8f8f8;
	border-top:1px solid #eee;
	padding:30px 40px 30px 40px;
}
.k_faq_list .bo_list ul li.faq_item .faq_a_inner {display:flex; align-items:flex-start; gap:0;}
.k_faq_list .bo_list ul li.faq_item .faq_a_con {
	flex:1 1 auto; min-width:0;
	color:#444; font-size:0.988rem; line-height:1.75; text-align:left;
	word-break:break-word;
	/* b_reset.css 의 *{word-break:keep-all!important} 가 위 word-break 를 덮어써서
	   공백 없는 긴 문자열(URL 등)이 있으면 컨테이너 밖으로 밀려나 가로 스크롤이 생기던 문제 수정.
	   word-break 와 다른 속성이라 !important 리셋에 영향받지 않는 overflow-wrap 으로 강제 줄바꿈 처리. */
	overflow-wrap:break-word !important;
	word-wrap:break-word !important; /* overflow-wrap 구버전 별칭, 구형 브라우저 대비 */
}
.k_faq_list .bo_list ul li.faq_item .faq_a_inner .faq_mark_a {
	line-height:1.75; font-size:0.988rem; color:#444;
}
.k_faq_list .bo_list ul li.faq_item .faq_a_con img {max-width:100%; height:auto;}
.k_faq_list .bo_list ul li.faq_item .faq_a_con table {max-width:100%;}
.k_faq_list .bo_list ul li.faq_item .faq_a_con a {color:#ed623f; text-decoration:underline;}

/* 답변 하단 왼쪽 수정 / 삭제 버튼 (공지사항 상세페이지와 동일한 모양) */
.k_faq_list .bo_list ul li.faq_item .faq_a_btn {margin-top:25px;}
.k_faq_list .bo_list ul li.faq_item .faq_a_btn .k_new_btn {justify-content:flex-start;}
.k_faq_list .bo_list ul li.faq_item .faq_a_btn .k_btn_00 {background:#fff;}

/* 빈 목록 */
.k_faq_list .bo_list ul li.faq_empty {display:block; padding:60px 0; color:#888;}

/* --------------------------------------------------------------
   모바일
   -------------------------------------------------------------- */
@media screen and (max-width:760px) {
	/* 이벤트(3개)보다 분류 수가 많아 모바일에서만 줄바꿈 허용 */
	#bo_cate_ul {flex-wrap:wrap; gap:8px; padding:0; margin-top:0; margin-bottom:30px;}
	#bo_cate_ul li {width:calc(31% - 6px);}   /* 한 줄 3개, 폭만 살짝 축소 */

	/* --- 모바일 목록 : 공지사항(new_notice) 목록과 동일한 구조 --- */
	.k_faq_list .bo_list_head {display:none;}
	.k_faq_list .bo_list_head ul li {padding-right:0;}

	/* 제목 -> 날짜 순으로 세로 배치 */
	.k_faq_list .bo_list ul li.faq_item .faq_q {display:block; padding:16px 30px 16px 0;}
	.k_faq_list .bo_list ul li.faq_item .faq_q .s-number {display:none;}
	.k_faq_list .bo_list ul li.faq_item .faq_q .s-name {display:block; width:100%; float:none;}
	.k_faq_list .bo_list ul li.faq_item .faq_q .s-day {display:block; width:100%; float:none; clear:both; text-align:left; margin:0;}

	/* Q [분류] 제목 을 한 칸에 입력한 하나의 문장처럼 — 같은 글꼴·굵기·색 */
	.k_faq_list .bo_list ul li.faq_item .faq_q .bo_tit {
		display:block; padding-bottom:10px;
		font-size:0.938rem; font-weight:400; line-height:1.5; color:#111;
	}
	.k_faq_list .bo_list ul li.faq_item .faq_q .faq_mark,
	.k_faq_list .bo_list ul li.faq_item .faq_q .faq_cate_tag,
	.k_faq_list .bo_list ul li.faq_item .faq_q .faq_tit_txt {
		display:inline; width:auto; float:none;
		font-size:inherit; font-weight:inherit; line-height:inherit; color:inherit;
		margin:0; white-space:normal; overflow:visible; text-overflow:clip;
	}
	.k_faq_list .bo_list ul li.faq_item .faq_q .faq_mark,
	.k_faq_list .bo_list ul li.faq_item .faq_q .faq_cate_tag {margin-right:4px;}

	.k_faq_list .bo_list ul li.faq_item.on .faq_q .bo_tit {color:#ed623f;}

	.k_faq_list .faq_arrow {right:2px; width:9px; height:9px;}

	.k_faq_list .bo_list ul li.faq_item .faq_a {padding:20px 15px;}
	.k_faq_list .bo_list ul li.faq_item .faq_a_con {font-size:0.938rem;}
	.k_faq_list .bo_list ul li.faq_item .faq_a_btn {margin-top:18px;}
}

@media screen and (max-width:760px) and (hover:hover) and (pointer:fine) {
	.k_faq_list .bo_list ul li.faq_item:hover .faq_q .bo_tit {color:#ed623f;}
}

/* --------------------------------------------------------------
   글쓰기 페이지 : 분류(구분) select
   new_event/style.css 의 규칙을 그대로 사용 (이벤트 게시판과 동일)
   -------------------------------------------------------------- */
select { padding: 15px; width: 100%; }

select { border-color: #ddd; }