@charset "utf-8";
/* ==========================================================================
   불편 접수 (consult/complaint) — 메인·입주청소 페이지와 같은 톤앤매너

   [적용 방식]
   이 게시판은 레거시 템플릿(board.css / layout.css / content.css)의 클래스와
   폼 검증·파일첨부 스크립트에 묶여 있다. 마크업을 새로 짜면 그 기능이 함께 깨지므로,
   구조는 그대로 두고 `.complaint-page` 스코프 안에서 겉모습만 다시 입힌다.
   headHtml.jsp 가 싣는 공통 CSS 보다 뒤에 로드되므로 같은 특이성이면 이 파일이 이긴다.

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

/* ---------- 페이지 바탕 ---------- */
/* 레거시 .programCon 의 여백·배경을 걷어내고 섹션 리듬을 다른 페이지와 맞춘다.
   바탕은 흰색 한 가지로 둔다 — 목록·폼을 카드로 띄우지 않고 선으로만 나누기 때문에
   바탕에 색이 깔리면 흰 덩어리가 떠 보인다 */
.complaint-page{
	margin:0 auto;	/* board.css 뒤쪽의 .programCon{margin:15px auto} 가 위 여백에 15px 을 더한다 (리얼후기와 같게 걷어냄) */
	padding:clamp(40px,5vw,52px) 0 clamp(70px,8vw,110px);
	background:var(--bg);
}
.complaint-page .inner{
	width:100%; max-width:1120px; margin:0 auto; padding:0 20px; box-sizing:border-box;
	float:none;			/* 레거시 레이아웃이 float 을 쓰는 경우 대비 */
}
.complaint-page .inner::after{content:""; display:block; clear:both;}

/* ---------- 페이지 머리 (제목 + 설명) ---------- */
.complaint-page .cp-head{margin-bottom:clamp(24px,3vw,40px); text-align:center;}
.complaint-page .cp-head .eyebrow{
	display:block; margin-bottom:10px; color:var(--brand);
	font-size:var(--fs-meta); font-weight:700; letter-spacing:.12em; text-transform:uppercase;
}
.complaint-page .cp-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);
}
.complaint-page .cp-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);
}

/* ==========================================================================
   1. 목록 (index.jsp)
   ========================================================================== */

/* ---------- 검색 ---------- */
.complaint-page .prd_search_wrapper02{
	display:flex; justify-content:flex-start; gap:10px; margin:0 0 clamp(20px,2.4vw,30px);
	float:none; width:auto;
}
.complaint-page .prd_search_wrapper02::after{content:""; display:block; clear:both;}
.complaint-page .prd_search_wrapper02 .login_form_flex_box01{flex:0 0 auto; width:auto; margin:0;}
.complaint-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;
}
.complaint-page .prd_search_wrapper02 select:focus{box-shadow:inset 0 0 0 1.5px var(--brand); outline:none;}
/* 입력 + 돋보기를 한 덩어리로.
   board.css 가 이 상자에 회색 배경(#F9F9F9)과 좌우 여백을 주고 있어 걷어낸다 —
   입력칸 자체에 테두리가 있어 배경까지 깔리면 상자가 두 겹으로 보인다 */
.complaint-page .program_search_box01{
	position:relative; flex:1 1 380px; max-width:420px; width:auto; height:auto;
	margin:0; padding:0; float:none; gap:0; background:none; border-radius:0;
}
.complaint-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;
}
.complaint-page .program_search_box01 input[type="text"]:focus{box-shadow:inset 0 0 0 1.5px var(--brand); outline:none;}
.complaint-page .program_search_box01 input::placeholder{color:var(--muted); opacity:1;}
/* 원본 아이콘(png)은 톤이 맞지 않아 감추고 브랜드색 돋보기를 그린다 */
.complaint-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;
}
.complaint-page .program_search_box01 > a img{display:none;}

/* ---------- 목록 ---------- */
/* 낱장 카드로 흩어 놓지 않고 한 덩어리 목록으로 묶는다. 위아래 선으로만 경계를 주고
   건과 건 사이는 얇은 선으로 나눈다 — 게시판 목록은 훑어 내려가며 읽는 화면이라
   낱장으로 띄우면 시선이 매번 끊긴다 */
.complaint-page .recruitment_table01{
	display:block; width:auto; margin:0; padding:0; float:none;
	border-top:1px solid var(--ink); border-bottom:1px solid var(--line);
}
.complaint-page .recruitment_table01 .box{
	width:auto; margin:0; padding:0; border:0; float:none; background:none;
}
.complaint-page .recruitment_table01 .box + .box{border-top:1px solid var(--line);}
/* 한 건 : 제목줄 아래에 작성자·작업일자·등록일이 나란히 놓인다 */
.complaint-page .noice_board_alt_box{
	display:block; width:auto; padding:clamp(18px,2.2vw,24px) clamp(4px,1vw,10px);
	border:0; border-radius:0; background:none; box-shadow:none;
	transition:background .15s;
}
.complaint-page .noice_board_alt_box:hover{background:var(--bg-alt);}
/* 제목줄 */
.complaint-page .noice_board_alt_box .tit{
	display:block; width:auto; margin:0 0 12px; padding:0; float:none; text-align:left;
}
.complaint-page .noice_board_alt_box .tit > span{display:inline; vertical-align:middle;}
/* 글번호는 카드 UI 에서 군더더기라 감춘다 */
.complaint-page .noice_board_alt_box .num0002{display:none;}
/* ★ board.css 가 .recruitment_table01 계열 제목에 크기를 여러 갈래로 걸어 두어
     (일부는 !important) 여기서 못 박는다 */
.complaint-page .noice_board_alt_box .tit .title_value,
.complaint-page .title_value{
	display:inline; color:var(--ink);
	font-size:18px !important; font-weight:var(--fw-card); line-height:var(--lh-card); letter-spacing:var(--ls-card);
	word-break:break-all;
}
.complaint-page .noice_board_alt_box:hover .title_value{color:var(--brand-deep);}
.complaint-page .lock_iconn01{display:inline-block; margin-right:6px; vertical-align:middle;}
.complaint-page .lock_iconn01 img{width:14px; height:auto; opacity:.55;}
/* 메타(작성자 / 작업일자 / 등록일) — 카드 하단에 한 줄로 */
.complaint-page .noice_board_alt_box .date_box{
	display:inline-block; width:auto; margin:0 18px 0 0; padding:0; float:none; border:0;
	color:var(--muted); font-size:var(--fs-meta); font-weight:var(--fw-meta); letter-spacing:var(--ls-meta);
}
.complaint-page .noice_board_alt_box .date_box:last-child{margin-right:0;}
.complaint-page .review_writer_box,
.complaint-page .review_date{color:inherit; font-size:inherit; font-weight:inherit;}

/* ---------- 배지 (처리상태 / 접수유형) ---------- */
/* index.jsp·read.jsp 안에 있던 인라인 <style> 을 대신한다 */
.complaint-page .complaint_state,
.complaint-page .complaint_type,
.complaint-page .new_icon{
	display:inline-flex; align-items:center; height:26px; margin:0 6px 0 0; padding:0 10px;
	border:0; border-radius:999px; white-space:nowrap; vertical-align:middle;
	font-size:var(--fs-meta); font-weight:700; letter-spacing:var(--ls-meta);
}
/* 접수 : 아직 손대지 않은 상태 — 가장 조용하게 */
.complaint-page .complaint_state.wait,
.complaint-page .new_icon.wait{background:var(--bg-alt); color:var(--muted); box-shadow:inset 0 0 0 1px var(--line);}
/* 처리중 : 진행 중이라는 신호 — 브랜드색 테두리만 */
.complaint-page .complaint_state.answer,
.complaint-page .new_icon.answer{background:var(--brand-soft); color:var(--brand-deep);}
/* 완료 : 결론이 난 상태 — 채운 배지로 가장 또렷하게 */
.complaint-page .complaint_state.open,
.complaint-page .new_icon.open{background:var(--brand); color:#fff;}
/* 접수유형 */
.complaint-page .complaint_type,
.complaint-page .new_icon.sky{background:var(--card); color:var(--ink-2); box-shadow:inset 0 0 0 1px var(--line);}

/* ---------- 글이 없을 때 ---------- */
.complaint-page .recruitment_table01 > div[style]{
	color:var(--muted) !important; font-size:var(--fs-body) !important; font-weight:500 !important;
}

/* ---------- 글쓰기 버튼 ---------- */
/* 목록 오른쪽 끝 아래에 붙인다.
   ★ flex + justify-content 로는 감싼 상자가 목록 폭을 못 채우는 경우 자리가 잡히지 않았다.
     블록 + text-align:right 는 상자 폭이 어떻든 안쪽 버튼을 오른쪽으로 밀어내므로 더 안전하다.
     레거시(board.css)가 이 상자에 폭·정렬을 걸어도 지지 않도록 !important 로 못 박는다. */
.complaint-page .new_write_btn_box{
	display:block !important; width:100% !important; max-width:none !important;
	float:none !important; text-align:right !important;
	margin:clamp(20px,2.4vw,28px) 0 0 !important; padding:0 !important;
}
.complaint-page .new_write_btn_box .login_chk_btn01{
	display:inline-flex !important; width:auto !important; margin:0 0 0 auto !important;
}

/* ---------- 버튼 공통 ---------- */
/* 레거시 .login_chk_btn01 은 목록·폼·읽기에서 두루 쓰인다.
   ★ board.css 가 이 버튼에 width:100% 를 주고 있다. 그대로 두면 버튼이 줄 전체를 차지해
     감싼 상자를 오른쪽 정렬해도 자리가 바뀌지 않으므로 폭을 내용에 맞춘다.
     (폼 하단·비밀번호 화면처럼 꽉 채워야 하는 곳은 각자 폭을 다시 지정한다) */
.complaint-page .login_chk_btn01{
	display:inline-flex; align-items:center; justify-content:center; gap:8px;
	width:auto; min-width:150px; height:52px; padding:0 28px; margin:0; border:0; border-radius:10px;
	background:var(--brand); color:#fff;
	font-size:var(--fs-btn); font-weight:700; line-height:var(--lh-btn); letter-spacing:var(--ls-btn);
	transition:background .15s;
}
.complaint-page .login_chk_btn01:hover{background:var(--brand-dark); color:#fff;}
/* type02 = 보조 동작(취소·삭제) */
.complaint-page .login_chk_btn01.type02{
	background:var(--card); color:var(--ink-2); box-shadow:inset 0 0 0 1px var(--line);
}
.complaint-page .login_chk_btn01.type02:hover{background:var(--bg-alt); color:var(--ink);}

/* ---------- 페이징 ---------- */
.complaint-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;
}
.complaint-page .prd_page_nav_num_box{display:flex; align-items:center; gap:6px;}
.complaint-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;
}
.complaint-page .prd_page_nav_wrapper a:hover{background:var(--brand-soft); color:var(--brand-deep);}
/* 현재 페이지 */
.complaint-page .prd_page_nav_wrapper a.on,
.complaint-page .prd_page_nav_wrapper a.active,
.complaint-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;
}
.complaint-page .prd_page_nav_arw img{width:14px; height:auto; opacity:.6;}
.complaint-page .prd_page_nav_arw.next img{transform:rotate(180deg);}
/* 더보기(모바일) — 레거시 board.css 의 사각 회색 배경 및 외곽 테두리 리셋 */
.complaint-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;
}
.complaint-page .mo_programPage:hover{
	background:none; border:0; box-shadow:none;
}
.complaint-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;
}
.complaint-page .mo_programPage a::after{display:none;}
.complaint-page .mo_programPage a:hover{
	background:var(--brand-soft); color:var(--brand-deep); box-shadow:inset 0 0 0 1px var(--brand-soft);
}

/* ==========================================================================
   2. 작성 / 수정 (write.jsp · edit.jsp)
   ========================================================================== */

.complaint-page.login_bg01{background:var(--bg);}
.complaint-page .new_login_wrapper{
	width:100%; max-width:820px; margin:0 auto; padding:0 20px; box-sizing:border-box; float:none;
}
.complaint-page .new_login_wrapper.wide{max-width:900px;}
/* 폼도 카드로 띄우지 않는다. 입력칸 자체에 테두리가 있어 카드까지 겹치면 상자 안의 상자가 된다 */
.complaint-page .login_form_wrapper{
	display:flex; flex-direction:column; gap:clamp(16px,2vw,22px);
	padding:0; border:0; border-radius:0; background:none; box-shadow:none;
}
/* 한 줄 = 라벨 + 입력 */
.complaint-page .login_form_box01{
	display:block; width:auto; margin:0; padding:0; border:0; float:none;
}
.complaint-page .login_label_tit01{
	display:block; margin:0 0 8px; padding:0; color:var(--ink);
	font-size:var(--fs-meta); font-weight:700; line-height:1.4; letter-spacing:var(--ls-meta);
}
/* 필수 표시 */
/* board.css 는 * 를 absolute(left:0) 로 띄워 라벨 앞 여백에 두는데, 위에서 그 여백을 없앴으므로
   static 으로 돌려 라벨 글자 바로 뒤에 붙인다 (그대로 두면 첫 글자와 겹친다) */
.complaint-page .login_label_tit01.key::after{content:"*"; position:static; margin-left:3px; color:#E2483D;}
.complaint-page .login_input_form_box01,
.complaint-page .login_form_flex_box01{display:block; width:auto; margin:0; padding:0; border:0; float:none;}

/* 입력·선택 공통 */
.complaint-page .login_form_wrapper input[type="text"],
.complaint-page .login_form_wrapper input[type="password"],
.complaint-page .login_form_wrapper select,
.complaint-page .login_form_wrapper textarea{
	width:100%; margin:0; border:0; border-radius:10px; box-sizing:border-box;
	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;
}
.complaint-page .login_form_wrapper input[type="text"],
.complaint-page .login_form_wrapper input[type="password"],
.complaint-page .login_form_wrapper select{height:50px; padding:0 16px;}
.complaint-page .login_form_wrapper select{padding-right:34px;}
.complaint-page .login_form_wrapper textarea,
.complaint-page .form_textarea01{min-height:190px; padding:14px 16px; line-height:1.7; resize:vertical;}
.complaint-page .login_form_wrapper input:focus,
.complaint-page .login_form_wrapper select:focus,
.complaint-page .login_form_wrapper textarea:focus{box-shadow:inset 0 0 0 1.5px var(--brand); outline:none;}
.complaint-page .login_form_wrapper input::placeholder,
.complaint-page .login_form_wrapper textarea::placeholder{color:var(--muted); opacity:1;}
/* 작업일자는 달력으로만 채우므로 readonly — 공통 CSS 의 회색 배경을 되돌린다 */
.complaint-page .login_form_wrapper input[readonly]{background-color:var(--card); cursor:pointer;}

/* 공개 / 비공개 라디오 */
.complaint-page .radio_type01_wrapper{display:flex; gap:10px; margin-top:10px;}
.complaint-page .radio_type01{
	display:inline-flex; align-items:center; gap:7px; height:42px; padding:0 16px; margin: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; cursor:pointer;
	transition:box-shadow .15s, color .15s, background .15s;
}
.complaint-page .radio_type01:hover{background:var(--brand-soft);}
.complaint-page .radio_type01 input[type="radio"]{width:16px; height:16px; margin:0; accent-color:var(--brand);}
/* 선택된 쪽을 브랜드색으로 — :has 미지원 브라우저에서는 테두리만 유지된다 */
.complaint-page .radio_type01:has(input:checked){
	background:var(--brand-soft); color:var(--brand-deep); box-shadow:inset 0 0 0 1.5px var(--brand);
}

/* ---------- 첨부파일 ---------- */
.complaint-page .add_input_box_wrapper01{display:flex; flex-direction:column; gap:10px;}
.complaint-page .add_input_box01{display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin:0;}
.complaint-page .file_label01{
	position:relative; display:flex; align-items:center; flex:1 1 260px; min-width:0;
	height:50px; padding:0 44px 0 16px; margin:0; border-radius:10px; cursor:pointer;
	background:var(--card); box-shadow:inset 0 0 0 1px var(--line);
	color:var(--ink); font-size:var(--fs-meta); font-weight:500;
}
.complaint-page .file_label01 input[type="file"]{
	position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:pointer;
}
.complaint-page .placeholder_txt01{color:var(--muted);}
.complaint-page .file_name01{overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.complaint-page .file_label01_xbtn{
	position:absolute; top:50%; right:12px; transform:translateY(-50%); z-index:2;
	width:22px; height:22px; border-radius:50%; background:var(--bg-alt);
	display:flex; align-items:center; justify-content:center; cursor:pointer;
}
.complaint-page .file_label01_xbtn img{width:9px; height:auto;}
/* 추가·삭제는 보조 버튼이라 본문 버튼보다 작게 */
.complaint-page .add_input_box01 .login_chk_btn01{min-width:0; height:50px; padding:0 18px; font-size:var(--fs-meta);}

/* ---------- 개인정보 수집 동의 ---------- */
/* 동의는 입력과 성격이 달라 위쪽에 선 하나로만 구분한다 */
.complaint-page .login_etc_wrapper{
	margin:clamp(22px,2.6vw,30px) 0 0; padding:clamp(22px,2.6vw,30px) 0 0;
	border:0; border-top:1px solid var(--line); border-radius:0; background:none; box-shadow:none;
}
.complaint-page .login_etc_wrapper .login_label_tit01{
	display:flex; align-items:center; justify-content:flex-start; gap:0; margin-bottom:12px;
}
/* 필수 * 가 제목 바로 뒤에 오도록 버튼을 맨 뒤(order)로 보내고 margin-left:auto 로 오른쪽 끝에 붙인다 */
.complaint-page .jeon_moon_btn{
	order:2; margin-left:auto;
	flex:0 0 auto; display:inline-flex; align-items:center; height:32px; padding:0 14px;
	border-radius:999px; background:var(--brand-soft); color:var(--brand-deep);
	font-size:var(--fs-meta); font-weight:600;
}
.complaint-page .jeon_moon_btn:hover{background:var(--brand); color:#fff;}
.complaint-page .login_etc_box01{margin:0;}
.complaint-page .login_etc_box01 .txt_box{
	max-height:190px; overflow-y:auto; padding:16px 18px; border:0; border-radius:12px;
	background:var(--bg-alt); color:var(--ink-2);
	font-size:var(--fs-meta); line-height:1.7; letter-spacing:var(--ls-meta);
}
.complaint-page .id_save_box{
	display:flex; align-items:center; gap:8px; margin:14px 0 0; padding:0;
	color:var(--ink); font-size:var(--fs-meta); font-weight:600; cursor:pointer;
}
.complaint-page .id_save_box input[type="checkbox"]{width:18px; height:18px; margin:0; accent-color:var(--brand);}

/* ---------- 하단 버튼 ---------- */
.complaint-page .login_submit_btn_box01{
	display:flex; justify-content:center; gap:10px; margin:clamp(24px,3vw,36px) 0 0; padding:0;
}
.complaint-page .login_submit_btn_box01 .login_chk_btn01{flex:0 1 220px;}

/* ==========================================================================
   3. 읽기 (read.jsp)
   ========================================================================== */

/* 목록으로 돌아가기 */
.complaint-page .prd_tab_wrapper{margin:0 0 clamp(16px,2vw,24px); padding:0; border:0; background:none;}
.complaint-page .prd_back_btn01{
	display:inline-flex; align-items:center; gap:8px; height:40px; padding:0 16px 0 12px;
	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;
}
.complaint-page .prd_back_btn01:hover{background:var(--brand-soft); color:var(--brand-deep);}
.complaint-page .prd_back_btn01 img{width:14px; height:auto; opacity:.6;}

.complaint-page .programRead{
	padding:0; border:0; border-radius:0; background:none; box-shadow:none;
}
/* 제목 영역 — 목록과 같은 방식으로 위는 굵은 선, 아래는 얇은 선 */
.complaint-page .recruitment_detail_top_box{
	margin:0 0 clamp(20px,2.6vw,30px); padding:clamp(20px,2.4vw,28px) 0 clamp(18px,2.2vw,24px);
	border-top:1px solid var(--ink); border-bottom:1px solid var(--line);
}
.complaint-page .recruitment_tit{
	margin:0 0 14px; padding:0; color:var(--ink);
	font-size:var(--fs-card); font-weight:var(--fw-card); line-height:var(--lh-card); letter-spacing:var(--ls-card);
}
.complaint-page .recruitment_alt{
	display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
	margin:0; padding:0; border:0;
}
.complaint-page .recruitment_alt .alt{
	color:var(--muted); font-size:var(--fs-meta); font-weight:var(--fw-meta); letter-spacing:var(--ls-meta);
}
.complaint-page .recruitment_alt .alt span{margin:0 8px; opacity:.5;}
/* 수정·삭제 */
.complaint-page .option_box01{display:flex; gap:8px;}
.complaint-page .option_btn01{
	display:inline-flex; align-items:center; gap:6px; height:38px; padding:0 14px; margin:0;
	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;
}
.complaint-page .option_btn01:hover{background:var(--brand-soft); color:var(--brand-deep);}
.complaint-page .option_btn01 img{width:14px; height:auto; opacity:.6;}

/* 접수 정보 표 — 배경 상자 없이 가로선으로만 나눈다 */
.complaint-page .complaint_info_table{
	width:100%; margin:0 0 clamp(22px,2.6vw,30px); border:0; border-collapse:separate; border-spacing:0;
	border-radius:0; background:none;
}
.complaint-page .complaint_info_table th,
.complaint-page .complaint_info_table td{
	padding:14px 18px; border:0; border-bottom:1px solid var(--line);
	font-size:var(--fs-meta); letter-spacing:var(--ls-meta); text-align:left; vertical-align:middle;
}
.complaint-page .complaint_info_table tr:last-child th,
.complaint-page .complaint_info_table tr:last-child td{border-bottom:0;}
.complaint-page .complaint_info_table th{width:150px; background:none; color:var(--muted); font-weight:600;}
.complaint-page .complaint_info_table td{color:var(--ink); font-weight:500;}

/* 본문 */
.complaint-page .readEdit{
	margin:0; padding:0 0 clamp(24px,3vw,36px); border:0; color:var(--ink-2);
	font-size:var(--fs-body); line-height:var(--lh-body); letter-spacing:var(--ls-body);
	word-break:break-all;
}
.complaint-page .readEdit img{max-width:100%; height:auto;}

/* 첨부파일 */
.complaint-page .urlFile{
	margin:clamp(20px,2.4vw,28px) 0 0; padding:14px 0 0;
	border:0; border-top:1px solid var(--line); border-radius:0; background:none;
}
/* board.css 의 `.programCon .urlFile p a` 보다 선택자를 한 단계 더 좁게 잡아야 이긴다 */
.complaint-page .urlFile p{margin:0; padding:4px 0; border:0; font-size:var(--fs-meta); letter-spacing:var(--ls-meta);}
.complaint-page .urlFile p a{color:var(--brand-deep); font-size:var(--fs-meta); font-weight:600;}
.complaint-page .urlFile p a:hover{text-decoration:underline;}
.complaint-page .urlFile img{width:14px; height:auto; opacity:.5;}

/* 답변 — 관리자 답변이라 브랜드 톤 박스로 구분한다 */
.complaint-page .readAnswer{
	margin:clamp(22px,2.6vw,30px) 0 0; padding:clamp(20px,2.4vw,26px);
	border:0; border-radius:14px; background:var(--brand-soft);
}
.complaint-page .custom_answer_tit{
	margin:0 0 10px; color:var(--brand-deep);
	font-size:var(--fs-menu); font-weight:700; letter-spacing:var(--ls-menu);
}
.complaint-page .custom_answer_txt_box{
	color:var(--ink-2); font-size:var(--fs-body); line-height:var(--lh-body); letter-spacing:var(--ls-body);
}

/* 하단 목록 버튼 */
.complaint-page .ej_du_wrap{margin-top:clamp(24px,3vw,36px);}
.complaint-page .mok_rok_btn{display:flex; justify-content:center; margin-top:clamp(20px,2.4vw,28px);}
.complaint-page .mok_rok_btn .btn{
	display:inline-flex; align-items:center; justify-content:center;
	min-width:170px; height:52px; padding:0 28px; border:0; border-radius:10px;
	background:var(--brand); color:#fff;
	font-size:var(--fs-btn); font-weight:700; letter-spacing:var(--ls-btn);
}
.complaint-page .mok_rok_btn .btn:hover{background:var(--brand-dark);}
.complaint-page .mok_rok_btn .btn strong{font-weight:inherit;}

/* ==========================================================================
   4. 비밀번호 확인 (password.jsp)
   ========================================================================== */

.complaint-page fieldset.login{border:0; margin:0; padding:0;}
/* 예전 'PASSWORD' 라벨은 위 .cp-head 의 eyebrow 와 겹치므로 감춘다 */
.complaint-page .login_tit_flex_box01{display:none;}
/* 비밀번호 화면은 입력이 하나뿐이라 카드 폭을 좁게 잡는다 */
.complaint-page .new_login_wrapper:not(.wide){max-width:520px;}
.complaint-page .login_input_form_box01.pw{position:relative;}
.complaint-page .login_input_form_box01.pw input{padding-right:48px;}
.complaint-page .pw_active_btn{
	position:absolute; top:50%; right:14px; transform:translateY(-50%);
	width:22px; height:22px; cursor:pointer; opacity:.5;
	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='%234C5573' stroke-width='1.8'%3E%3Cpath d='M2 12s3.6-6.5 10-6.5S22 12 22 12s-3.6 6.5-10 6.5S2 12 2 12z'/%3E%3Ccircle cx='12' cy='12' r='2.8'/%3E%3C/svg%3E") center/contain no-repeat;
}
.complaint-page .pw_active_btn:hover{opacity:.8;}
.complaint-page .login_chk_btn_box01{display:flex; justify-content:center; margin-top:clamp(20px,2.4vw,28px);}
.complaint-page .login_chk_btn_box01 .login_chk_btn01{width:100%;}

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

@media (max-width:760px){
	.complaint-page .inner,
	.complaint-page .new_login_wrapper{padding:0 16px;}
	/* 검색 : 분류와 입력이 위아래로 */
	.complaint-page .prd_search_wrapper02{flex-wrap:wrap;}
	.complaint-page .prd_search_wrapper02 .login_form_flex_box01,
	.complaint-page .prd_search_wrapper02 select{width:100%;}
	.complaint-page .program_search_box01{flex:1 1 100%; max-width:none;}
	/* 목록 한 건 : 배지 줄 → 제목 줄 → 메타 줄, 모두 같은 왼쪽 선에서 시작
	   ★ board.css 의 `.recruitment_table01.change_box01.list_mode .box.review …` 가
	     특이성이 더 높아(가로 flex·오른쪽 정렬) 같은 높이로 맞춰 덮는다 — 이 파일이 뒤에 로드된다 */
	.complaint-page .recruitment_table01.change_box01 .box.review .noice_board_alt_box{
		display:flex; flex-wrap:wrap; align-items:flex-start; gap:4px 0;
		justify-content:flex-start;	/* 레거시가 flex-end 를 걸어 메타 줄이 오른쪽으로 밀렸다 */
	}
	.complaint-page .recruitment_table01.change_box01 .box.review .noice_board_alt_box .tit{
		flex:0 0 100%; width:100%; max-width:100%; margin:0 0 6px; padding:0;
	}
	.complaint-page .recruitment_table01.change_box01 .box.review .noice_board_alt_box .tit > .text_ov{
		display:flex; flex-wrap:wrap; align-items:center; gap:6px 0;
		width:100%; margin:0; padding:0; white-space:normal; overflow:visible;
	}
	/* 제목은 배지 아래 한 줄을 통째로 차지 · 데스크톱(18px)보다 2px 작게 */
	.complaint-page .recruitment_table01.change_box01 .box.review .noice_board_alt_box .tit .title_value{
		display:block; flex:0 0 100%; width:100%; margin:2px 0 0; padding:0;
		font-size:16px !important; white-space:normal;
	}
	/* 메타(작성자 / 작업일자 / 등록일) — 제목 아래 한 줄로, 제목과 같은 왼쪽 선에서 시작 */
	.complaint-page .recruitment_table01.change_box01 .box.review .noice_board_alt_box .date_box{
		display:block; flex:0 0 auto; width:auto; margin:0 14px 0 0; padding:0; text-align:left;
	}
	.complaint-page .recruitment_table01.change_box01 .box.review .noice_board_alt_box .date_box:last-child{margin-right:0;}
	.complaint-page .recruitment_table01.change_box01 .box.review .noice_board_alt_box .date_box .review_writer_box{
		display:inline; margin:0; padding:0; text-align:left;
	}
	/* 접수 정보 표는 라벨/값을 위아래로 */
	.complaint-page .complaint_info_table th,
	.complaint-page .complaint_info_table td{display:block; width:100%; box-sizing:border-box;}
	/* 라벨(작게·옅게) / 값(크게·진하게)으로 계층을 벌리고, 둘 사이에 숨 쉴 틈을 준다 */
	.complaint-page .complaint_info_table th{
		padding:16px 18px 6px; border-bottom:0;
		font-size:13px; font-weight:500; line-height:1.4;
	}
	.complaint-page .complaint_info_table td{
		padding:0 18px 16px;
		font-size:16px; font-weight:600; line-height:1.5;
	}
	/* 버튼은 가로로 꽉 */
	.complaint-page .login_submit_btn_box01{flex-direction:column-reverse;}
	.complaint-page .login_submit_btn_box01 .login_chk_btn01{flex:1 1 auto; width:100%;}
	.complaint-page .recruitment_alt{align-items:flex-start;}
	.complaint-page .add_input_box01 .login_chk_btn01{flex:1 1 0; min-width:0;}
}