/* =========================================================
   board-skin.css
   wireframe_v.2/.../05_고객지원 고충실도 시안 기준
   사용자(프리랜서) 게시판 스킨(boardSkin/2,4,6,8) 공통 스타일.

   .filterbar/.form-row/.btn(-primary)/table.grid/.pagination/.badge 등은
   kwmf-mockup.css(데코레이터에서 전역 로드됨)에 이미 정의되어 있으므로 여기서는
   재선언하지 않는다. 이 파일에는 kwmf-mockup.css에 없는, 게시판 화면에서만
   필요한 보정만 담는다.
   ========================================================= */

/* design.css가 .total-page strong/span에 별도로 17px를 지정해놓아서(.total-page 자체
   font-size와 무관하게 적용됨) 숫자만 커 보인다 — strong/span도 함께 명시적으로 덮어써야 한다. */
#pageinfo .total-page, #pageinfo .total-page strong, #pageinfo .total-page span{font-size:12.5px;}
#pageinfo .total-page{color:#6B7688;}
#pageinfo .total-page strong{color:#182233;font-weight:700;}

/* 모바일 "더보기" 버튼(fncSetKwmfPagination이 필요 시 자동 삽입) — wireframe_v.2 시안에는
   없는 요소지만 기존 사이트의 모바일 무한스크롤형 목록 UX를 유지하기 위해 남겨둔다. */
.list-more{display:none;}
@media (max-width:720px){
  .list-more{display:block;text-align:center;padding:12px;color:#1D5FD6;font-weight:700;border:1px solid #E3E8F0;border-radius:8px;margin-top:12px;text-decoration:none;}
}

/* 상세(boardView) 추천 버튼 눌림 상태 — kwmf-mockup.css .btn-ghost엔 "선택됨" 상태가 없어 추가. */
.btn-ghost.on{background:#EAF1FD;border-color:#1D5FD6;color:#1D5FD6;}

/* layout.css가 body,h1~h4,th,td,input,select,textarea,p,a,span,strong에 전역으로
   font-size:16px;color:#333을 걸어놨다. 부모(div 등)에만 준 인라인/상속 스타일은
   "자기 자신에 매치되는 규칙"인 layout.css한테 밀린다(상속 < 매치된 규칙, 특이도와 무관하게).
   kwmf-mockup.css가 font-size를 따로 재지정하지 않은 td/span에서 이 문제가 발생해 다시 걸어준다. */
table.grid td{font-size:13.5px;}
/* > span(직계 자손)만 지정 — boardView4.jsp의 상태 배지처럼 span 안에 .badge span이 중첩되는
   경우까지 매치되면 .badge(font-size:11px)보다 특이도가 높아져 배지 크기를 깨버린다. */
.bs-meta, .bs-meta > span{font-size:12.5px;color:var(--text-500);}

/* ---------- FAQ 아코디언(boardSkin/6) ----------
   .faq-list/.faq-item/.info-banner 본체는 시안 원본과 같은 web1/mockup.css에 있다. 여기에는
   JSP 쪽 DOM 구조가 시안과 달라 선택자가 빗나가는 한 곳만 보정한다. */
/* 시안은 main 직속이지만 JSP는 검색 파라미터 때문에 form으로 한 번 더 감싼다.
   그래서 mockup.css의 `main > .filterbar + .faq-list` 가 매치되지 않아 상단 여백이 빈다. */
form > .filterbar + .faq-list{margin-top:var(--spacing-2xl);}
/* 퍼블 시안은 .content-area 좌우 패딩이 0이라 main 이 1100px 이고, mockup.css 의
   .info-banner{width:1100px} 가 딱 맞아떨어진다. 이 앱의 셸은 kwmf-mockup.css 의
   .content-area{padding:24px 32px 48px} 때문에 main 이 1036px 이라 배너만 64px 삐져나온다
   (1440px 이하에서는 가로 스크롤까지 생긴다). 셸 패딩은 다른 화면 전부에 걸리므로 손대지 않고
   배너를 담기는 폭에 맞춰 늘린다. */
.info-banner{width:auto;}
/* 캐릭터는 시안의 좌표(left:638)가 아니라 우측 여백(1100-638-364=98px)을 기준으로 붙여야
   컨테이너 폭이 달라져도 시안과 같은 자리에 온다. */
.info-banner__character{left:auto;right:98px;}

/* ---------- 에디터(CKEditor) 본문 영역(.ck-content) ----------
   ckeditor-custom.css의 .ck-content *{font-size:16px} 규칙(특이도 0,1,0)이 본문 안의 p/span/a 등
   모든 자손 태그의 글자크기를 16px로 고정시켜버려서, 게시판 상세 카드(.card 안 .ck-content)나
   FAQ 답변(.faq-a.ck-content)에 지정한 글자크기가 안 먹힌다. 특이도를 더 준 선택자로 다시
   상속(inherit)시켜서, 각 영역에 이미 지정된 font-size가 그대로 내려가게 한다. */
.card .ck-content *, .faq-a.ck-content *{font-size:inherit;}

/* ---------- 파일첨부 버튼(.filebox label) ----------
   design.css의 .filebox label 규칙(배경 #555, 높이 42px 고정, 흰 글씨)이 명시도(class+tag,
   0,1,1)가 .btn-ghost 단독(class, 0,1,0)보다 높아 파일첨부 버튼이 회색 사각형으로 깨져
   보인다. board-skin.css는 사용자 게시판 스킨 화면에만 로드되므로 label 전체를 대상으로
   강제해도 안전하다. */
.filebox label{
  height:auto;line-height:normal;background:#fff;color:var(--text-700);
  padding:6px 12px;border-radius:6px;border:1px solid var(--line);
  font-size:12px;font-weight:600;display:inline-flex;align-items:center;cursor:pointer;
}
.filebox label:hover{border-color:var(--blue-500);color:var(--blue-600);}

/* ---------- 파일첨부 input 항상 숨김 ----------
   checkMultiFile()이 파일을 추가할 때마다 새 input[type=file]을 만드는데, 그 input의
   onchange는 checkMultiFile 자기 자신을 직접 호출하도록 박혀 나온다(래퍼를 거치지 않음).
   그래서 JS가 .filebox 클래스/label을 붙여주기 전 찰나에 원본 input이 잠깐 무방비로
   노출되면 kwmf-mockup.css의 .form-row input(테두리 있는 텍스트 입력창 스타일)을 그대로
   물려받는다(2번째 파일 첨부 시 실제로 보였던 증상). .filebox 여부와 무관하게 이 위젯
   영역 안의 input[type=file]은 항상 시각적으로 숨겨서, 어떤 순간에도 노출되지 않게 한다
   (design.css의 .filebox input[type=file]과 동일한 숨김 기법 — position:absolute + 1px 클립). */
.attachment-file input[type="file"]{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0;}

/* ---------- 첨부파일 목록(.attach-list) ----------
   design.css 원본 .attach-list__item/.attach-list__del을 그대로 두면(career와 동일하게)
   아이콘 배경 이미지 위치·크기 계산이 이 페이지의 폰트/줄높이 컨텍스트와 어긋나 항목마다
   높이가 들쭉날쭉해지고 간격이 과도하게 벌어진다(스크린샷 확인). 외부 아이콘 이미지에
   의존하지 않는 자체 스타일로 목록 한 줄당 높이를 고정해 간격을 예측 가능하게 만든다.

   위아래 여백: design.css .filebox{margin-bottom:10px}에 .form-row의 flex gap:6px까지
   겹쳐서 "파일 선택" 버튼과 목록 사이가 과하게 벌어져 있었다(스크린샷). ul 자체의
   margin-top은 0으로 줄이고(버튼 쪽 여백은 이미 위 두 겹으로 충분하다), 목록과 바로 아래
   안내문구(.form-hint/.form-error, 마진 없음) 사이는 반대로 붙어있었어서 margin-bottom으로
   여백을 만든다. */
.write-file .attach-list{list-style:none;margin:0 0 12px;padding:0;display:flex;flex-direction:column;gap:6px;}
.write-file .attach-list__item{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  height:auto;margin:0;padding:8px 10px;background:#FAFBFD;border:1px solid var(--line);
  border-radius:6px;font-size:13.5px;color:var(--text-700);
}
/* layout.css가 span/a에 직접 font-size:16px를 걸어놔서(자기 자신에 매치되는 규칙이라 상속보다
   우선) 부모(.attach-list__item)에 준 font-size가 안 먹힌다. span/a에도 명시적으로 다시 걸어준다. */
.write-file .attach-list__item > span, .write-file .attach-list__item > span > a{font-size:13.5px;}
.write-file .attach-list__item > span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0;}
.write-file .attach-list__item > span > a{color:var(--text-700);}
.write-file .attach-list__item > span > a:hover{color:var(--blue-600);}
/* 배경 이미지(w_del.png) 대신 CSS만으로 X를 그려서, 이미지 크기·위치 오차와 무관하게
   항상 일정한 크기로 보이게 한다. */
.write-file .attach-list__del{flex:none;width:16px;height:16px;background:none;margin-left:0;position:relative;cursor:pointer;}
.write-file .attach-list__del::before, .write-file .attach-list__del::after{
  content:'';position:absolute;top:50%;left:50%;width:12px;height:2px;background:var(--text-400);
  transform-origin:center;
}
.write-file .attach-list__del::before{transform:translate(-50%,-50%) rotate(45deg);}
.write-file .attach-list__del::after{transform:translate(-50%,-50%) rotate(-45deg);}
.write-file .attach-list__del:hover::before, .write-file .attach-list__del:hover::after{background:var(--red);}

/* ---------- 댓글 영역(.bs-comment) ----------
   boardComment_include.jsp / boardView_include.jsp의 마크업·class(.reply-box, .reply-list,
   #commentview, .reply-mod 등)는 admin(insite)과 분리된 사용자 전용 공용 파일이라 그대로 두고,
   .bs-comment로 감싼 페이지에서만 적용되도록 스코프를 걸어 타이포그래피/여백/색상만 kwmf 톤에
   맞춘다(구조를 table.grid 등으로 바꾸는 재작업은 아님). */
.bs-comment .reply-box{background:#fff;border:1px solid #E3E8F0;border-radius:10px;box-shadow:0 1px 2px rgba(15,31,61,.06), 0 4px 14px rgba(15,31,61,.05);padding:22px 24px;margin-top:16px;}
.bs-comment .reply-title{font-size:15px;font-weight:700;color:#182233;margin-bottom:14px;}
.bs-comment .reply-title #commentcount{color:#1D5FD6;}
.bs-comment .reply__textarea{display:flex;gap:8px;align-items:flex-start;}
.bs-comment .reply__textarea textarea{flex:1;border:1px solid #E3E8F0;border-radius:7px;padding:10px 12px;font-size:13.5px;font-family:inherit;color:#182233;background:#fbfcfe;resize:vertical;min-height:60px;}
.bs-comment .reply__textarea textarea:focus{outline:2px solid #2F6FE4;outline-offset:1px;border-color:#2F6FE4;}
.bs-comment .reply__textarea button{border:none;border-radius:8px;padding:10px 18px;font-size:13.5px;font-weight:700;cursor:pointer;background:#1D5FD6;color:#fff;}
.bs-comment .reply__textarea button:hover{background:#2F6FE4;}
.bs-comment .reply__text.count{font-size:11.5px;color:#95A0B3;margin-top:6px;}
.bs-comment .reply-list{list-style:none;margin:16px 0 0;padding:0;}
.bs-comment .reply-list > li{padding:14px 0;border-top:1px solid #E3E8F0;}
.bs-comment .reply-list > li .name{font-size:13.5px;font-weight:700;color:#182233;margin-right:8px;}
.bs-comment .reply-list > li .day{font-size:11.5px;color:#95A0B3;}
.bs-comment .reply-list .content{font-size:13.5px;color:#3C4658;line-height:1.7;margin-top:6px;}
.bs-comment .reply-mod, .bs-comment .reply-delete, .bs-comment .reply-write{font-size:12px;font-weight:600;color:#6B7688;margin-left:8px;}
.bs-comment .reply-mod:hover, .bs-comment .reply-delete:hover, .bs-comment .reply-write:hover{color:#1D5FD6;}
.bs-comment .reply-margin__content{border:1px solid #E3E8F0;border-radius:8px;background:#FAFBFD;padding:12px 14px;margin-top:10px;}

/* ---------- 1:1문의 목록(boardSkin/4) — 퍼블 FR-CS-003 그리드 배치 보정 ----------
   mockup.css 는 .content-area:has(.qna-list__grid) 를 grid 로 만들고 자식들(page-head /
   .qna-list__btn-row / .qna-list__toolbar / .table-wrap / .pagination)에 grid-row 좌표를
   직접 준다. 시안은 이들이 전부 main 직속이지만 JSP 는 검색 파라미터 때문에 form 으로 한 번 더
   감싼다 — 그래서 좌표를 받아야 할 요소들이 grid item 이 아니게 되고, 대신 form 하나가
   좌표 없는 grid item 이 되어 엉뚱한 행으로 흘러간다.
   form 을 display:contents 로 없애는 대신(내부 요소마다 좌표를 다시 다 지정해야 한다)
   form 자체에 "제목줄 다음 행 전체 폭" 좌표만 주고, 그 안은 평범한 세로 흐름으로 둔다.
   퍼블에 없는 검색 filterbar 가 표 위에 하나 더 들어가는 것도 이 흐름 안에서 해결된다. */
.content-area:has(.qna-list__grid) > main > form{grid-column:1 / -1;grid-row:2;}
/* form 이 grid item 이 되면서 그 안의 .qna-list__toolbar 는 grid-row/column 지정이 무시되고
   margin-top:32px 만 남는다. 그 32px 은 원래 page-head 구분선과의 간격이라 검색바가 그 자리를
   대신하는 지금은 filterbar 로 옮긴다(툴바는 filterbar 바로 아래라 여백이 필요 없다). */
.content-area:has(.qna-list__grid) > main > form > .filterbar{margin-top:var(--spacing-2xl);}
.content-area:has(.qna-list__grid) .qna-list__toolbar{margin-top:0;}
/* 1295px 이하에서 mockup.css 는 1컬럼으로 떨어지며 문의등록 버튼을 grid-row:2 로 내린다.
   form 이 계속 row2 면 버튼과 같은 칸에 겹쳐 그려진다(1280px 뷰포트에서 실제로 겹쳤다).
   퍼블의 나머지 행(toolbar 3 / table 4)과 같이 한 칸씩 민다. */
@media (max-width:1295px){
  .content-area:has(.qna-list__grid) > main > form{grid-row:3;}
}