@charset "utf-8";
/* ==========================================================================
   자주 묻는 질문 (board/faq) — 메인·입주청소·불편접수와 같은 톤앤매너

   [적용 방식]
   불편접수(consult_complaint.css)와 같다. 레거시 템플릿(board.css)의 클래스와
   아코디언 스크립트(tblclick)에 묶여 있으므로 구조는 그대로 두고,
   `.faq-page` 스코프 안에서 겉모습만 다시 입힌다.
   headHtml.jsp 가 싣는 공통 CSS 보다 뒤에 로드되므로 같은 특이성이면 이 파일이 이긴다.

   [열림 상태]
   질문 행(tr) 에 .on_e, 답변 행(tr) 에 .active 가 붙는다 — index.jsp 의 tblclick() 참조.

   [색·타이포]
   site.css 의 토큰만 쓴다(--brand / --ink / --line …). hex 직접 입력 금지.
   ========================================================================== */

/* ---------- 페이지 바탕 ---------- */
/* 목록을 카드로 띄우지 않고 선으로만 나누므로 바탕은 흰색 한 가지로 둔다 */
.faq-page{
	margin:0 auto;	/* board.css 뒤쪽의 .programCon{margin:15px auto} 가 위 여백에 15px 을 더한다 (리얼후기와 같게 걷어냄) */
	padding:clamp(40px,5vw,52px) 0 clamp(70px,8vw,110px);
	background:var(--bg);
}
/* board.css 의 .com_prd_wrapper{padding:18px 0} 이 제목 위에 더해져 리얼후기보다 아래로 밀린다 → 위쪽만 걷어낸다 */
.faq-page .com_prd_wrapper{padding-top:0;}
/* board.css 의 `.programCon_custom01 .com_prd_wrapper > .inner`(1320px) 보다
   선택자를 같은 깊이로 잡아야 폭이 넘어온다 */
.faq-page .com_prd_wrapper > .inner,
.faq-page .inner{
	width:100%; max-width:1120px; margin:0 auto; padding:0 20px; box-sizing:border-box; float:none;
}

/* ---------- 페이지 머리 (제목 + 설명) ---------- */
.faq-page .fq-head{margin-bottom:clamp(24px,3vw,40px); text-align:center;}
.faq-page .fq-head .eyebrow{
	display:block; margin-bottom:10px; color:var(--brand);
	font-size:var(--fs-meta); font-weight:700; letter-spacing:.12em; text-transform:uppercase;
}
.faq-page .fq-head h2{
	margin:0; color:var(--ink);
	font-size:var(--fs-h2); font-weight:var(--fw-h2); line-height:var(--lh-h2); letter-spacing:var(--ls-h2);
}
.faq-page .fq-head p{
	margin:14px 0 0; color:var(--ink-2);
	font-size:var(--fs-body); line-height:var(--lh-body); letter-spacing:var(--ls-body);
}

/* ==========================================================================
   0. 분류 칩 (useCategory · 관리자 "FAQ 카테고리 관리" 항목) — reply.css 와 같은 모양
   ========================================================================== */

.faq-page .chip_filter_wrapper{
	margin:0 0 clamp(20px,2.4vw,30px); padding:0; border:0; background:none;
}
/* 바깥 .inner 안에 들어 있어 폭·패딩을 또 잡으면 제목·목록과 시작선이 어긋난다 */
.faq-page .chip_filter_wrapper > .inner{max-width:none; padding:0;}
.faq-page .chip_filter_row{
	display:flex; align-items:center; flex-wrap:wrap; gap:10px;
	margin:0; padding:0; border:0;
}
.faq-page .chip_filter_row + .chip_filter_row{margin-top:10px;}
.faq-page .chip_filter_row.depth2::before{display:none;}
/* "카테고리" 라벨은 감춘다 — 칩만으로 무엇을 고르는지 충분히 읽힌다 */
.faq-page .chip_filter_label{display:none;}
.faq-page .chip_filter_chips{display:flex; flex-wrap:wrap; gap:8px; margin:0; padding:0;}
.faq-page .chip_filter_item{
	display:inline-flex; align-items:center; flex-shrink:0; white-space:nowrap;
	height:44px; padding:0 22px; margin:0; border:0; border-radius:999px;
	background:var(--card); color:var(--ink-2); box-shadow:inset 0 0 0 1px var(--line);
	font-size:var(--fs-menu); font-weight:var(--fw-menu); line-height:var(--lh-menu); letter-spacing:var(--ls-menu);
	transition:background .15s, color .15s, box-shadow .15s;
}
.faq-page .chip_filter_item:hover{background:var(--brand-soft); color:var(--brand-deep);}
.faq-page .chip_filter_item.active{background:var(--brand); color:#fff; box-shadow:none;}
/* 선택 경로 표시 — 칩의 active 만으로 충분해 감춘다 */
.faq-page .chip_filter_selected,
.faq-page .chip_filter_selected.active{display:none;}

@media (max-width:768px){
	/* 칩이 많으면 한 줄로 두고 좌우로 밀어 본다 */
	.faq-page .chip_filter_wrapper{margin-bottom:18px;}
	.faq-page .chip_filter_row{flex-wrap:nowrap; width:100%;}
	.faq-page .chip_filter_chips{
		flex-wrap:nowrap; width:100%; min-width:0; gap:8px;
		overflow-x:auto; overflow-y:hidden;
		-webkit-overflow-scrolling:touch;
		scrollbar-width:none; -ms-overflow-style:none;
		padding:4px 0 8px;
	}
	.faq-page .chip_filter_chips::-webkit-scrollbar{display:none;}
	.faq-page .chip_filter_item{height:38px; padding:0 16px; font-size:14px;}
}

/* ==========================================================================
   1. 검색
   ========================================================================== */

.faq-page .prd_program_search_wrap{margin:0 0 clamp(20px,2.4vw,30px); padding:0;}
.faq-page .prd_search_wrapper02{
	display:flex; justify-content:flex-start; gap:10px; margin:0; padding:0; float:none; width:auto;
}
.faq-page .prd_search_wrapper02 .login_form_flex_box01{flex:0 0 auto; width:auto; margin:0; padding:0;}
.faq-page .prd_search_wrapper02 select{
	height:48px; min-width:120px; padding:0 34px 0 14px; margin:0; border:0; border-radius:10px;
	background-color:var(--card); box-shadow:inset 0 0 0 1px var(--line); color:var(--ink);
	font-family:inherit; font-size:var(--fs-meta); font-weight:600; letter-spacing:var(--ls-meta);
	transition:box-shadow .15s;
}
.faq-page .prd_search_wrapper02 select:focus{box-shadow:inset 0 0 0 1.5px var(--brand); outline:none;}
.faq-page .prd_search_wrapper{flex:1 1 380px; max-width:420px; margin:0; padding:0; float:none;}
/* board.css 가 이 상자에 회색 배경(#F9F9F9)과 좌우 여백을 준다 — 입력칸에 이미 테두리가
   있어 배경까지 깔리면 상자가 두 겹으로 보이므로 걷어낸다 */
.faq-page .program_search_box01{
	position:relative; width:100%; max-width:none; height:auto;
	margin:0; padding:0; float:none; gap:0; background:none; border-radius:0;
}
.faq-page .program_search_box01 input[type="text"]{
	width:100%; height:48px; padding:0 48px 0 16px; margin:0; border:0; border-radius:10px;
	background:var(--card); box-shadow:inset 0 0 0 1px var(--line); color:var(--ink);
	font-family:inherit; font-size:var(--fs-meta); font-weight:500; letter-spacing:var(--ls-meta);
	transition:box-shadow .15s;
}
.faq-page .program_search_box01 input[type="text"]:focus{box-shadow:inset 0 0 0 1.5px var(--brand); outline:none;}
.faq-page .program_search_box01 input::placeholder{color:var(--muted); opacity:1;}
/* 원본 아이콘(png)은 톤이 맞지 않아 감추고 브랜드색 돋보기를 그린다 */
.faq-page .program_search_box01 > a{
	position:absolute; top:0; right:0; width:48px; height:48px; margin:0; padding:0;
	background:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23229ED4' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.6-3.6'/%3E%3C/svg%3E") center/20px no-repeat;
}
.faq-page .program_search_box01 > a img{display:none;}

/* ==========================================================================
   2. 질문 목록 (아코디언)
   ========================================================================== */

.faq-page .faq_wrapper01{margin:0; padding:0; border:0;}
.faq-page .faq_table{
	width:100%; margin:0; border:0; border-collapse:collapse;
	border-top:1px solid var(--ink);		/* 목록의 시작선 */
}
.faq-page .faq_table tbody,
.faq-page .faq_table tr{border:0; background:none;}

/* ---------- 질문 줄 ---------- */
/* <th> 를 세로 플렉스로 돌려 한 줄 전체가 클릭 영역이 되게 하고, 안쪽 문구를 세로 가운데에 둔다.
   ★ board.css 가 이 칸에 height:60px 를 걸어 두어 padding 과 겹치면 글이 위로 쏠린다.
     height 를 풀고 min-height 로만 최소 높이를 잡는다. */
.faq-page .faq_table th.tit_type{
	position:relative; display:flex; flex-direction:column; justify-content:center; align-items:flex-start;
	width:100%; height:auto; min-height:76px; box-sizing:border-box;
	padding:22px 52px 22px 4px;
	border:0; border-bottom:1px solid var(--line); background:none;
	text-align:left; font-weight:400; cursor:pointer;
	/* ★ 상태 변화에 시간을 주지 않는다. 답변은 display 로 즉시 나타나고 사라지는데
	     배경·화살표만 서서히 바뀌면, 다른 항목을 눌렀을 때 이전 항목이 뒤늦게
	     접히는 것처럼 보인다. 펴짐과 접힘이 같은 순간에 끝나야 한다. */
	transition:none;
}
.faq-page .faq_table tbody tr:hover th.tit_type{background:var(--bg-alt);}
/* 열린 질문 — board.css 의 하늘색(#f3f8fe) 대신 사이트 브랜드 톤으로 맞춘다 */
.faq-page .faq_table tr.on_e th.tit_type{background:var(--brand-soft);}
/* 펼침 화살표 — 열리면 뒤집힌다 */
.faq-page .faq_table th.tit_type::after{
	content:""; position:absolute; top:50%; right:18px; margin-top:-9px;
	width:18px; height:18px; opacity:.45; transition:none;
	background:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23182242' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center/contain no-repeat;
}
.faq-page .faq_table tr.on_e th.tit_type::after{transform:rotate(180deg); opacity:1;}
/* 분류 라벨 (useCategory 를 켰을 때만 나온다) */
.faq-page .faq_table .label01{
	display:inline-flex; align-items:center; height:26px; margin:0 0 8px; padding:0 10px;
	border:0; border-radius:999px; background:var(--card); box-shadow:inset 0 0 0 1px var(--line);
	color:var(--ink-2); font-size:var(--fs-meta); font-weight:600; letter-spacing:var(--ls-meta);
}
/* 질문 문구 ("Q." 는 index.jsp 가 직접 찍고, 제목은 그 안의 .title_value 에 담긴다)
   ★ 안쪽 span 에 board.css 의 다른 규칙이 걸려 상속이 끊기므로 둘 다 명시하고,
     레거시의 !important 규칙에도 지지 않도록 못 박는다 */
.faq-page .faq_table .tit,
.faq-page .faq_table .tit .title_value{
	font-size:18px !important; font-weight:600; line-height:var(--lh-card); letter-spacing:var(--ls-card);
}
.faq-page .faq_table .tit{margin:0; color:var(--ink); word-break:break-all;}
/* 번호(Q1.) + 제목 — 제목이 두 줄이 되면 번호 뒤 선에 맞춰 내려온다 */
.faq-page .faq_table .tit{display:flex; align-items:flex-start; gap:0;}
.faq-page .faq_table .tit .q_no{flex:0 0 auto; min-width:2.6em; padding-right:.3em; box-sizing:border-box;}
.faq-page .faq_table .tit .title_value{flex:1 1 auto; min-width:0;}
.faq-page .faq_table tr.on_e .tit{color:var(--brand-deep);}

/* ---------- 답변 줄 ---------- */
/* 닫혀 있을 때는 칸 자체를 감춘다. 답변 행에만 <td> 가 있으므로 질문 줄은 영향받지 않는다.

   ★ board.css(10265~10283) 가 이 칸에 max-height 슬라이드 애니메이션을 !important 로 걸어 둔다.
     닫힐 때 max-height 가 2000px → 0 으로 줄어드는 방식이라, 답변이 실제로 200px 남짓이면
     앞의 1800px 구간은 화면에서 아무 변화가 없다가 마지막에만 접히고, 게다가 ease-in-out
     곡선의 끝이라 감속까지 붙는다. "접히다 말고 느려지다 팍 접히는" 것이 이 때문이다.
     펴짐과 접힘을 같은 순간에 끝내려면 그 애니메이션을 통째로 무력화해야 하므로,
     같은 선택자 깊이 + !important 로 되돌린다. */
.faq-page .faq_wrapper01 .faq_table>tbody>tr>td{
	display:none !important; max-height:none !important; overflow:visible !important;
	opacity:1 !important; transition:none !important; padding:0 !important;
	border:0; background:none;
}
.faq-page .faq_wrapper01 .faq_table>tbody>tr.active>td{
	display:block !important; max-height:none !important; opacity:1 !important; transition:none !important;
	padding:clamp(22px,2.6vw,28px) 52px clamp(24px,2.8vw,30px) 20px !important;
	width:100%; box-sizing:border-box;
	border:0; border-bottom:1px solid var(--line); background:var(--bg-alt);
	color:var(--ink-2); line-height:var(--lh-body); letter-spacing:var(--ls-body);
}
/* 답변 본문 — 칸과 안쪽 span 을 함께 지정해야 상속이 끊기지 않는다 */
.faq-page .faq_table tr.active td,
.faq-page .faq_table .content_value,
.faq-page .faq_table .content_value *{font-size:16px !important;}
.faq-page .faq_table .content_value{display:block; line-height:var(--lh-body);}
.faq-page .faq_table .content_value img{max-width:100%; height:auto;}
/* 답변 요약 한 줄 — index.jsp 의 faqLead() 가 첫 문장을 떼어 감싼다. 본문보다 1px 크게, 진하게 */
/* ★ 질문 제목과 같은 크기·굵기·색이면 둘이 한 덩어리로 보여 계층이 무너진다.
     제목보다 작고 덜 굵게, 대신 브랜드색으로 "답" 이라는 신호를 준다 */
.faq-page .faq_table .content_value .a_lead{
	display:block; margin:0 0 8px; color:var(--brand-deep);
	font-size:16px !important; font-weight:600; line-height:1.6;
}
/* 답변에 붙는 첨부·관련URL (useFile / useRelationurl 을 켰을 때만 나온다) */
.faq-page .faq_table .urlFile{
	margin:16px 0 0; padding:14px 0 0; border:0; border-top:1px solid var(--line); background:none;
}
.faq-page .faq_table .urlFile p{margin:0; padding:4px 0; border:0; font-size:var(--fs-meta); letter-spacing:var(--ls-meta);}
.faq-page .faq_table .urlFile p a{color:var(--brand-deep); font-size:var(--fs-meta); font-weight:600;}
.faq-page .faq_table .urlFile p a:hover{text-decoration:underline;}
.faq-page .faq_table .urlFile img{width:14px; height:auto; opacity:.5;}

/* ---------- 글이 없을 때 ---------- */
.faq-page .faq_table th[style]{
	border-bottom:1px solid var(--line); cursor:default;
	color:var(--muted) !important; font-size:var(--fs-body) !important; font-weight:500 !important;
}
.faq-page .faq_table th[style]::after{display:none;}
.faq-page .faq_table th[style]:hover{background:none;}

/* ==========================================================================
   3. 페이징 / 더보기
   ========================================================================== */

.faq-page .prd_page_nav_wrapper{
	display:flex; align-items:center; justify-content:center; gap:6px;
	margin:clamp(28px,3.4vw,44px) 0 0; padding:0;
}
.faq-page .prd_page_nav_num_box{display:flex; align-items:center; gap:6px;}
.faq-page .prd_page_nav_wrapper a{
	display:inline-flex; align-items:center; justify-content:center;
	min-width:40px; height:40px; padding:0 8px; margin:0; border:0; border-radius:10px;
	background:var(--card); box-shadow:inset 0 0 0 1px var(--line); color:var(--ink-2);
	font-size:var(--fs-meta); font-weight:600; transition:background .15s, color .15s, box-shadow .15s;
}
.faq-page .prd_page_nav_wrapper a:hover{background:var(--brand-soft); color:var(--brand-deep);}
.faq-page .prd_page_nav_wrapper a.on,
.faq-page .prd_page_nav_wrapper a.active,
.faq-page .prd_page_nav_wrapper strong{
	display:inline-flex; align-items:center; justify-content:center;
	min-width:40px; height:40px; padding:0 8px; border-radius:10px;
	background:var(--brand); color:#fff; box-shadow:none; font-size:var(--fs-meta); font-weight:700;
}
.faq-page .prd_page_nav_arw img{width:14px; height:auto; opacity:.6;}
.faq-page .prd_page_nav_arw.next img{transform:rotate(180deg);}

/* 더보기(모바일) — 레거시 board.css 의 사각 회색 배경 및 외곽 테두리 리셋 */
.faq-page .mo_programPage{
	margin:clamp(20px,2.4vw,32px) 0 0; text-align:center;
	height:auto; line-height:normal; background:none; border:0; border-radius:0; box-shadow:none;
}
.faq-page .mo_programPage:hover{
	background:none; border:0; box-shadow:none;
}
.faq-page .mo_programPage a{
	display:inline-flex; align-items:center; justify-content:center; gap:8px;
	width:auto; height:48px; padding:0 28px; border-radius:999px;
	background:var(--card); box-shadow:inset 0 0 0 1px var(--line); color:var(--ink-2);
	font-size:var(--fs-meta); font-weight:600; text-decoration:none;
	transition:background .15s, color .15s, box-shadow .15s;
}
.faq-page .mo_programPage a::after{display:none;}
.faq-page .mo_programPage a:hover{
	background:var(--brand-soft); color:var(--brand-deep); box-shadow:inset 0 0 0 1px var(--brand-soft);
}

/* ==========================================================================
   4. 좁은 화면
   ========================================================================== */

@media (max-width:760px){
	.faq-page .com_prd_wrapper > .inner,
	.faq-page .inner{padding:0 16px;}
	/* index.jsp 가 인라인으로 flex-wrap:nowrap 을 걸어 두어 여기서만 되돌린다 */
	.faq-page .prd_search_wrapper02{flex-wrap:wrap !important;}
	.faq-page .prd_search_wrapper02 .login_form_flex_box01,
	.faq-page .prd_search_wrapper02 select{width:100%;}
	.faq-page .prd_search_wrapper{flex:1 1 100%; max-width:none;}
	/* 화살표 자리를 줄이고 답변 들여쓰기도 함께 줄인다 */
	.faq-page .faq_table th.tit_type{padding-right:40px;}
	.faq-page .faq_table th.tit_type::after{right:10px;}
	.faq-page .faq_table tr.active td{padding-right:16px; padding-left:14px;}
	/* 질문 문구 — 후기 제목(reply.css)과 같이 Pretendard + 두 줄일 때 행간을 조금 넓힌다.
	   어절 중간에서 끊기지 않게 keep-all (띄어쓰기 없는 긴 문자열만 anywhere 로 끊는다) */
	.faq-page .faq_table .tit,
	.faq-page .faq_table .tit .q_no,
	.faq-page .faq_table .tit .title_value{
		font-family:var(--font-pre); line-height:1.55;
		word-break:keep-all; overflow-wrap:anywhere;
	}

	/* ---------- 모바일 카드형 ----------
	   질문마다 둥근 테두리 카드로 나누고, 펼치면 답변이 같은 카드 안에 이어진다.
	   질문(tr)과 답변(tr)이 별개 행이라 질문 행 = 카드 윗부분, 답변 행 = 카드 아랫부분으로 그린다.
	   번호 칸 폭(--q-indent)을 답변 들여쓰기에도 그대로 써서 질문·답변 글이 같은 선에서 시작한다 */
	.faq-page .faq_table{
		--q-pad:18px; --q-no:38px; --q-indent:calc(var(--q-pad) + var(--q-no));
		display:block; border-top:0;
	}
	.faq-page .faq_table tbody,
	.faq-page .faq_table tr{display:block;}
	/* board.css 가 행마다 윗줄(#eee)을 그어 카드 사이·카드 안에 선이 남는다 */
	.faq-page .faq_wrapper01 .faq_table>tbody>tr{border:0 !important;}
	.faq-page .faq_table tr + tr th.tit_type{margin-top:12px;}
	.faq-page .faq_table th.tit_type{
		min-height:0; padding:20px 46px 20px var(--q-pad);
		border:1px solid var(--line); border-radius:14px; background:var(--card);
	}
	.faq-page .faq_table tbody tr:hover th.tit_type{background:var(--card);}
	/* 펼친 질문 : 배경은 그대로 두고 아래 모서리만 답변 쪽으로 이어 붙인다 */
	.faq-page .faq_table tr.on_e th.tit_type{
		background:var(--card); border-bottom:0; border-radius:14px 14px 0 0; padding-bottom:16px;
	}
	.faq-page .faq_table tr.on_e .tit{color:var(--ink);}
	.faq-page .faq_table .tit,
	.faq-page .faq_table .tit .q_no,
	.faq-page .faq_table .tit .title_value{font-size:17px !important; font-weight:700;}
	.faq-page .faq_table .tit .q_no{min-width:var(--q-no);}
	/* 화살표 : 질문 첫 줄 높이에 맞춘다 */
	.faq-page .faq_table th.tit_type::after{top:22px; margin-top:0; right:16px; width:16px; height:16px; opacity:.5;}
	.faq-page .faq_table tr.on_e th.tit_type::after{opacity:.8;}
	/* 펼친 답변 : 질문 카드의 아랫부분 */
	.faq-page .faq_wrapper01 .faq_table>tbody>tr.active>td{
		padding:16px 20px 22px var(--q-indent) !important;
		border:1px solid var(--line); border-top:0; border-radius:0 0 14px 14px;
		/* 질문과 답변 사이 구분선 — 답변 글 시작선부터 오른쪽 여백 전까지만 긋는다 */
		background:var(--card) linear-gradient(var(--line),var(--line)) no-repeat var(--q-indent) 0 / calc(100% - var(--q-indent) - 20px) 1px;
	}
	.faq-page .faq_table tr.active td,
	.faq-page .faq_table .content_value,
	.faq-page .faq_table .content_value *{font-size:15px !important;}
	.faq-page .faq_table .content_value{color:var(--ink-2); line-height:1.75; word-break:keep-all; overflow-wrap:anywhere;}
	.faq-page .faq_table .content_value .a_lead{font-family:var(--font-pre); font-size:15px !important; margin-bottom:6px;}
}