@charset "utf-8";
/* [AI-GENERATED] 작성일: 2026-09-03
   관리자(insite) 화면 전용 규칙. 퍼블(web1) CSS 에 대응 컴포넌트가 없는 잔여분만 둔다.
   각 규칙은 화면 고유 접두어(.cr- .jt- .ctm- 등)로 스코프가 잡혀 있다 - 접두어 없는 규칙을 추가하지 말 것.
   ⚠ manager_panel / manager_popup_panel 이 퍼블 CSS 뒤에 이 파일을 링크한다. */

/* 사용자·사용처 표 머리칸·행 높이 50px 통일(관리자는 45px 유지).
   #wrapper 는 사용자 데코레이터에만 있다. (0,2,1) 로 맞춰 퍼블 table.grid th/td (0,1,2) 는 이기고,
   아래 화면별 height:auto(증명서 발급이력 버튼칸 등)에는 지게 한다 - table.grid 로 쓰면 (0,2,2) 가 되어
   그 height:auto 를 이겨 두 줄 버튼이 행 밖으로 넘친다. 그래서 이 절을 파일 맨 앞에 둔다.
   900px 이하는 퍼블이 표를 카드로 접으므로 걸지 않는다. */
@media (min-width: 901px) {
  [id="wrapper"] .grid th,
  [id="wrapper"] .grid td {
    height: 50px;
  }
  /* 퍼블이 화면별로 48/52px 를 준 표. 공용 규칙보다 선택자가 무거워 앞에 [id="wrapper"] 를 붙여 덮는다 */
  body:has(.my-home__banner) [id="wrapper"] .my-home__period table.grid th,
  body:has(.my-home__banner) [id="wrapper"] .my-home__panel table.grid th,
  body:has(.my-home__banner) [id="wrapper"] .my-home__panel table.grid td,
  [id="wrapper"] .consent-pool table.grid th,
  [id="wrapper"] .consent-pool table.grid td,
  [id="wrapper"] table.grid.cert-detail__grid th,
  [id="wrapper"] table.grid.cert-detail__grid td,
  [id="wrapper"] table.grid.talent-detail__contract-grid th,
  [id="wrapper"] table.grid.talent-detail__contract-grid td {
    height: 50px;
  }
  /* 10행 스크롤 높이: th 50 + 행 50 x 10 + 테두리 2 */
  [id="wrapper"] .table-wrap.table-wrap--scroll {
    max-height: 552px;
  }
}

/* ======================================================================
   퍼블(web1/mockup.css) 최하단에 있던 AI 작성분
   ⚠ 순서 때문에 이 파일의 기존 내용보다 앞에 둔다 - 원래 캐스케이드가
      [mockup.css 전체] → [ai-ext.css 전체] 였으므로 여기 와야 그 관계가 그대로다.
   ⚠ var(--navy/--line/--bg/--surface/--text-*) 등 kwmf-mockup.css 토큰 참조가 남아 있다.
   ====================================================================== */

/* [AI-GENERATED] 작성일: 2026-08-20 13:10 | 수정일: 2026-08-24 */

/* =========================================================
   퍼블(/inc/web1/css/layout.css, mockup.css)이 다루지 않는 보강분 — 전 화면 통합
   퍼블 원본을 직접 고치면 다음 배포 때 덮어써지므로 여기 모은다.
   원본과 같은 특이도라 로드 순서로 이긴다 — 각 화면에서 mockup.css 뒤에 싣는다.
   ========================================================= */

/* =========================================================
   공용
   ========================================================= */
/* ---------- 직종 4단 연동 셀렉트 ---------- */
/* KECO 2025 세분류 495종이라 대/중/소/세 4단이다. careerList(필터)·careerForm(입력)이 같은 마크업을 쓴다 */
.jobtype-cascade {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}
/* 퍼블 select 는 폭이 max-width 기반이라 4등분 칸에서 어긋난다 */
.jobtype-cascade select {
  width: 100%;
  min-width: 0;
}
@media (max-width: 900px) {
  .jobtype-cascade {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

}
/* ---------- 필터바: 직종 4단이 들어간 검색조건 ---------- */
/* 직종 4칸 + 나머지 조건 + 버튼을 퍼블의 한 줄(.filterbar > .form-row{flex:1 0 0})에 늘어놓으면
   셀렉트 하나가 130px 남짓이 되어 코드명이 잘린다. 직종만 한 줄을 통째로 쓰게 해 두 줄로 접는다 */
.filterbar--wrap {
  flex-wrap: wrap;
}
.filterbar--wrap .form-row.jobtype-row {
  flex: 1 0 100%;
}
/* talentSearch.jsp(CO-TAL-001)처럼 form-row.wide(검색어)가 같은 filterbar--wrap 안에 있으면,
   모바일에서 .filterbar:has(.form-row.wide) .form-row(0,4,0)가 위 규칙(0,3,0)을 이겨 직종 4단이 반칸으로 찌그러진다.
   더 높은 특이도로 데스크톱과 같은 한 줄 전체 폭을 되돌린다 */
@media (max-width: 744px) {
  .filterbar:has(.form-row.wide) .form-row.jobtype-row {
    flex: 1 0 100%;
  }
}

/* ---------- 검색바(.mentor-search-bar): 직종 4단이 들어간 검색조건 ---------- */
/* 퍼블 검색바는 검색어 한 칸뿐이라 한 줄이다. 인재검색/나의 스크랩은 직종 4단이 함께 들어가,
   위 .filterbar--wrap 과 같은 이유로 --full 조건이 한 줄을 통째로 쓰게 한다 */
.mentor-search-bar--wrap {
  flex-wrap: wrap;
  row-gap: 12px;
}
.mentor-search-bar--wrap .mentor-search-bar__field--full {
  flex: 1 0 100%;
}
/* [AI-GENERATED] 작성일: 2026-09-14 15:58 | 수정일: 2026-09-14 15:58
   퍼블의 버튼 전체폭 규칙은 .filterbar 안의 버튼만 잡아, 검색바 박스 안의 버튼은 글자폭(66px)에 머물렀다 */
@media (max-width: 744px) {
  .mentor-search-bar--wrap .mentor-search-bar__submit {
    flex: 1 0 100%;
    justify-content: center;
  }
  /* [AI-GENERATED] 작성일: 2026-09-14 16:40 | 수정일: 2026-09-14 16:40
     일자리공고 목록(사용처·프리랜서)도 같다. 퍼블 전체폭 규칙은 .btn.btn-sm 만 잡는데 이 두 화면 버튼엔 btn-sm 이 없다.
     직종 4단(.jobtype-row) 필터바로 좁혀 btn-sm 없는 게시판·관리자 조회 버튼은 건드리지 않는다 */
  .filterbar:has(.jobtype-row) > .btn.btn-primary {
    width: 100%;
    justify-content: center;
  }
}

/* ---------- 페이지 번호 ---------- */
/* 공통 함수가 만드는 a.first/.prev/.paging-num/.next/.last 를 퍼블 .pagination button 모양으로 맞추는 매핑.
   a[class] 로 쓰는 이유: 스킨 design.css 의 .list-paging .first/.prev/.next/.last(0,2,0)가
   이미지 배경·회전을 걸어 두어 .list-paging a(0,1,1)로는 특이도에서 진다 */
.list-paging {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
}
.list-paging a[class] {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-xs);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--color-gray-700, #333);
  /* 스킨이 .next/.last 에 rotate(180deg) 를 걸어 화살표 문자가 뒤집힌다 */
  transform: none;
  background-image: none;
}
.list-paging a[class].paging-num--active {
  background: var(--color-primary, #2d65f2);
  color: #fff;
  font-weight: 600;
}
.list-paging a[class].first,
.list-paging a[class].prev,
.list-paging a[class].next,
.list-paging a[class].last {
  background: var(--color-white, #fff);
  border: 1px solid var(--color-border, #d8dce4);
  color: #767676;
}
/* 시안 화살표는 인라인 svg다. a 태그에는 내용이 없어 문자로 대신 그린다 */
.list-paging a.first::before {
  content: "\00AB";
}
.list-paging a.prev::before {
  content: "\2039";
}
.list-paging a.next::before {
  content: "\203A";
}
.list-paging a.last::before {
  content: "\00BB";
}

/* =========================================================
   FR-CR-001 경력정보 목록
   ========================================================= */

/* ---------- 1) 보완요청 사유 모달 ---------- */
/* 퍼블 .modal-box 는 400px 고정. 사유 본문이 길고 회차가 쌓일 수 있어 넓히고 넘치면 스크롤한다 */
.career-list__reason-modal .modal-box {
  width: 460px;
  max-height: 80vh;
  overflow-y: auto;
}
.career-list__reason-item {
  border-top: 1px solid var(--color-border-divider, #e9eef8);
  padding: 12px var(--spacing-xl);
}
.career-list__reason-item:first-child {
  border-top: none;
  padding-top: 0;
}
/* ---------- 2) 업무내용·계약기간·빈 목록 ---------- */
/* 업무내용은 자유입력이라 길면 표 전체를 밀어낸다. td에 max-width를 걸면 표가 auto 레이아웃이라
   무시되므로 안쪽 span에 건다 */
.career-list__grid .career-list__ellipsis {
  display: block;
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* 계약기간 날짜는 숫자 중간에서 꺾이지 않게 묶어둔다 */
.career-list__grid .career-list__ym {
  white-space: nowrap;
}
/* 퍼블 .list-empty-state 를 그대로 쓰되, 표 안(td)에 들어가므로 셀 여백을 걷어낸다 */
.career-list__grid td.career-list__empty-cell {
  height: auto;
  padding: 16px 0;
}
/* 900px 이하 카드뷰에서는 td가 세로 스택이라 폭 제한이 오히려 방해가 된다 */
@media (max-width: 900px) {
  .career-list__grid .career-list__ellipsis {
    max-width: none;
    white-space: normal;
  }
}
/* 데스크톱 표에서는 헤더 칸이 전체선택을 맡는다. 툴바 체크박스는 thead가 숨는 900px 이하 전용이다.
   #ecChkAll(확장경력 목록)도 같은 이유로 같이 묶는다 */
@media (min-width: 901px) {
  .list-toolbar #crChkAll,
  .list-toolbar #ecChkAll {
    display: none;
  }
  .career-list__grid th:first-child {
    text-align: center;
    padding: 0;
  }
}

/* =========================================================
   FR-CR-002 경력정보 등록·수정
   ========================================================= */

/* =========================================================
   FR-JOB-001 일자리공고 목록
   ========================================================= */
/* ---------- 공고 항목(카드형) ---------- */
/* 상시채용. 퍼블 배지는 배경 채움이라 테두리형이 없다 */
.jobnotice__badge-open {
  background: var(--color-white);
  border: 1px solid var(--amber);
  color: var(--amber);
}

/* ---------- 공고 카드 - 시안 .job-card(design.css) 적용분 ---------- */
/* 여기 있는 건 시안이 다루지 않은 사정뿐이다 - 시안은 div+a 격자에 짧은 표본 데이터를 담지만
   이 화면은 ul+li 에 위임 클릭이고, 배지+기업명 줄이 하나 더 붙고, 실제 값이 훨씬 길다 */

/* ① 시안 격자는 div 인데 이 화면은 ul 이다. 목록 기본 스타일을 지운다 */
ul.job-list__grid {
  list-style: none;
  margin: 0;
  padding: 0;
}
/* ② 시안 카드는 a 라 카드 전체가 링크다. 이 화면은 li + 위임 클릭이라 손가락 커서를 직접 준다
   (준비중 카드는 클릭이 걸리지 않으므로 제외한다 - D-17) */
li.job-card:not(.job-card--delay) {
  cursor: pointer;
  transition: border-color 0.15s;
}
li.job-card:not(.job-card--delay):hover {
  border-color: var(--color-primary);
}
/* ③ 시안 카드는 세 덩어리라 높이 170px 고정인데, 이 화면은 배지+기업명 줄이 하나 더 붙어 내용이 넘친다.
   고정 높이를 최소 높이로 바꾸고, 본문과 맨아랫줄 사이 간격(24px)을 줄여 4열 카드 높이를 맞춘다 */
li.job-card {
  height: auto;
  min-height: 170px;
  gap: var(--spacing-sm);
}
/* ④ 제목 위에 붙는 모집상태 배지 + 기업명 줄. 배지와 글자의 세로 중심을 맞춘다 */
.job-card__org {
  display: flex;
  align-items: center;
  gap: var(--spacing-2xs);
  width: 100%;
  min-width: 0;
  margin: 0;
}
/* ⑤ 가로 넘침 방지.
   퍼블 카드의 직종 박스·마감일은 white-space:nowrap 이라 글자 길이가 곧 칸의 최소폭이 된다.
   시안 데이터는 짧지만 실제 값("기타 문리 · 기술 및 예능 강사" 등)이 길어 두 군데가 터졌다:
     - 1296px 이상: repeat(4, 1fr) 의 1fr 하한이 min-content 라 격자가 컨테이너를 452px 넘어갔다.
       하한을 0 으로 풀어 준다.
     - 900px 근방: 채용기간 한 줄이 카드 안쪽 폭을 2~6px 넘었다.
   날짜는 …로 자르지 않는다 - 잘리면 마감이 언제인지가 사라진다. 좁으면 두 줄로 접는다 */
@media (min-width: 1296px) {
  ul.job-list__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
li.job-card .job-card__cat {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}
li.job-card .job-card__foot {
  min-width: 0;
  justify-content: flex-start;
}
li.job-card .job-card__date {
  white-space: normal;
  text-align: left;
}
/* 날짜값 자체는 끊지 않는다. 하이픈이 줄바꿈 지점이라 이게 없으면 "2026-10-" / "15" 로 갈린다 */
li.job-card .jobnotice__period {
  white-space: nowrap;
}
.job-card__org .jobnotice__orgnm {
  min-width: 0;
  font-size: var(--font-size-13);
  font-weight: 600;
  color: var(--color-text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---------- 리스트형 ---------- */
/* 카드와 같은 항목을 한 줄에 하나씩 전체 폭으로 그린다. 카드는 테두리로 구분되지만 여기는 아래 실선 하나로 나눈다 */
.jobnotice__row {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 16px 4px;
  border-bottom: 1px solid var(--color-border-divider);
  cursor: pointer;
}
.jobnotice__row:hover {
  background: var(--bg);
}
/* ---------- 툴바 / 선택 줄 ---------- */
/* 카드/리스트 전환 버튼은 오른쪽 끝. org 목록의 선택삭제·공고 등록은 목록 아래 오른쪽에 둔다 -
   툴바에 같이 두면 auto 여백 둘이 남는 폭을 반씩 나눠 전환 버튼이 가운데로 간다 */
.jobnotice__toolbar {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 10px;
  margin: 0 0 14px;
}
.jobnotice__toolbar .list-view {
  margin-left: auto;
}
/* 전환 버튼의 <li class="card"> 가 퍼블 .card 카드박스를 물어 버튼이 상자로 부푼다.
   아이콘 자체는 스킨 design.css 의 .list-view 정의를 그대로 쓴다 */
.jobnotice__toolbar .list-view li {
  display: inline-block;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
  margin-top: 0;
}
.jobnotice__selbar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 10px;
}
.jobnotice__selall {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: var(--font-size-14);
  color: var(--color-gray-700);
  white-space: nowrap;
  cursor: pointer;
}
.jobnotice__selcnt {
  font-size: var(--font-size-14);
  font-weight: 600;
  color: var(--color-primary);
}

/* 상단 툴바용 "총 N건" */
.jobnotice__toolbar-count {
  font-size: var(--font-size-13);
  color: var(--color-text-secondary);
}
.jobnotice__toolbar-count strong {
  color: var(--color-text-heading);
  font-weight: 600;
}

/* ---------- 건수 / 빈 목록 ---------- */
.jobnotice__total {
  font-size: var(--font-size-13);
  color: var(--color-text-secondary);
  margin-top: 14px;
}
.jobnotice__total strong {
  color: var(--color-text-heading);
  font-weight: 600;
}
.jobnotice__empty {
  padding: 48px 0;
  text-align: center;
  color: var(--color-text-secondary);
  grid-column: 1 / -1;
}

/* =========================================================
   FR-CR-005 확장경력 목록
   ========================================================= */

/* 퍼블 .career-ext-list__toolbar 는 건수만 두는 줄이다. 시안에 없는 [+ 등록]을 같은 줄 오른쪽에 붙인다 */
.career-ext-list__toolbar {
  justify-content: space-between;
  gap: 10px;
}
/* 체크박스·[사유보기] 열만 폭을 고정한다. 탭마다 헤더가 달라 colgroup 을 쓸 수 없다 */
.career-ext-list__grid th:first-child,
.career-ext-list__grid td:first-child {
  width: 44px;
}
.career-ext-list__grid th:last-child,
.career-ext-list__grid td:last-child {
  width: 96px;
}
/* 구분·발급일·처리일에 최소폭을 주고 표에 min-width 를 건다 - table.grid 는 width:100% 라
   min-width 가 없으면 칸이 계속 눌리기만 하고 .table-wrap 의 overflow-x 가 일하지 않는다.
   탭마다 헤더 구성이 달라 nth-child 를 쓸 수 없어 td 는 data-label 로 고른다(헤더는 EC_COLUMNS 가 그린다).
   모바일 카드뷰(≤900px)는 td { width:100% } 공통 규칙이 살아야 하므로 데스크톱 폭에만 건다 */
@media (min-width: 901px) {
  .career-ext-list__grid {
    min-width: 900px;
  }
  .career-ext-list__grid th {
    white-space: nowrap;
  }
  .career-ext-list__grid td[data-label='구분'] {
    width: 132px;
    white-space: nowrap;
  }
  /* 자격명은 나머지 폭을 흡수하는 칸이라 표가 좁아지면 가장 먼저 눌린다. 최소폭만 주고 늘어나게 둔다 */
  .career-ext-list__grid td[data-label='자격명'] {
    min-width: 200px;
  }
  .career-ext-list__grid td[data-label='발급일'],
  .career-ext-list__grid td[data-label='처리일'] {
    width: 120px;
    white-space: nowrap;
  }
}
/* 900px 이하 카드뷰 — 시안 FR-CR-005 와 같은 카드 구성이다.
   세 탭을 표 하나로 그려 탭마다 열 위치가 달라지므로 td 의 data-label 로 고른다(헤더는 EC_COLUMNS 가 그린다).
   라벨:값 행들은 order 를 주지 않아 DOM 순서 그대로 쌓인다 - 카드 머리(체크박스·제목·배지)만
   음수 order 로 앞에, [사유보기]만 양수 order 로 맨 뒤에 둔다 */
@media (max-width: 900px) {
  .career-ext-list__grid tr:hover,
  .career-ext-list__grid tr:hover td {
    background: transparent;
  }
  .career-ext-list__grid tbody tr {
    display: flex;
    flex-wrap: wrap;
    background: var(--white, #fff);
    border-color: var(--color-border-default);
    border-radius: var(--radius-md);
    padding: 0;
  }
  .career-ext-list__grid tbody td {
    height: auto;
  }
  /* No.는 시안 카드에 없다 */
  .career-ext-list__grid td[data-label='No'] {
    display: none;
  }
  /* 라벨:값 행 - 구분선 없이 쌓는다. 카드 머리(제목·배지)는 아래에서 다시 잡는다 */
  .career-ext-list__grid td[data-label] {
    border-bottom: none;
    padding: 0 var(--spacing-sm);
  }
  /* 카드 머리 바로 아래 첫 행(자격증·교육이수=구분, 학력=졸업년도)만 위 여백을 준다 */
  .career-ext-list__grid td[data-label='구분'],
  .career-ext-list__grid td[data-label='졸업년도'] {
    padding-top: var(--spacing-xs);
  }
  /* 체크박스 - 제목 왼쪽 */
  .career-ext-list__grid tbody td:first-child {
    order: -3;
    width: auto !important;
    flex: 0 0 auto;
    border-bottom: none;
    padding: var(--spacing-sm) var(--spacing-2xs) var(--spacing-sm) var(--spacing-sm);
  }
  .career-ext-list__grid tbody td:first-child::before {
    content: none;
  }
  /* 제목(자격명/학교명/교육·훈련명) - 진행상태 배지와 한 줄 */
  .career-ext-list__grid td[data-label='자격명'],
  .career-ext-list__grid td[data-label='학교명'],
  .career-ext-list__grid td[data-label='교육·훈련명'] {
    order: -2;
    width: auto !important;
    flex: 1 1 0%;
    min-width: 0;
    border-bottom: none;
    padding: var(--spacing-sm) 0;
    font-size: var(--font-size-18);
    font-weight: 700;
    text-align: left;
  }
  .career-ext-list__grid td[data-label='자격명']::before,
  .career-ext-list__grid td[data-label='학교명']::before,
  .career-ext-list__grid td[data-label='교육·훈련명']::before {
    content: none;
  }
  .career-ext-list__grid td[data-label='자격명'] > .cell-content,
  .career-ext-list__grid td[data-label='학교명'] > .cell-content,
  .career-ext-list__grid td[data-label='교육·훈련명'] > .cell-content,
  .career-ext-list__grid td[data-label='자격명'] a,
  .career-ext-list__grid td[data-label='학교명'] a,
  .career-ext-list__grid td[data-label='교육·훈련명'] a {
    display: block;
    text-align: left;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  /* 진행상태 배지 - 제목 오른쪽 */
  .career-ext-list__grid td[data-label='진행상태'] {
    order: -1;
    width: auto !important;
    flex: 0 0 auto;
    border-bottom: none;
    padding: var(--spacing-sm) var(--spacing-sm) var(--spacing-sm) 0;
  }
  .career-ext-list__grid td[data-label='진행상태']::before {
    content: none;
  }
  /* [사유보기] - 라벨 없이 전폭. 버튼 없는 행은 공통 td:empty 규칙이 숨긴다 */
  .career-ext-list__grid tbody td:last-child {
    order: 6;
    border-bottom: none;
    padding: 0 var(--spacing-sm) var(--spacing-sm);
  }
  .career-ext-list__grid tbody td:last-child::before {
    content: none;
  }
  .career-ext-list__grid tbody td:last-child > .cell-content {
    width: 100%;
    justify-content: stretch;
  }
  .career-ext-list__grid tbody td:last-child .btn {
    width: 100%;
  }
}
/* 반려 사유 모달 — 퍼블 .modal-box 는 400px 고정. 사유가 길고 회차가 쌓일 수 있어 넓힌다 */
.career-ext-list__reason-modal .modal-box {
  width: 460px;
  max-height: 80vh;
  overflow-y: auto;
}
/* 리스트형 표(구직자·사용처). 공고명에 링크를 걸지 않는다 - 행 전체가 클릭 대상이라 파란 링크색이 표에서 튄다 */
.jobnotice__grid tbody tr {
  cursor: pointer;
}
.jobnotice__grid td[data-label="No."],
.jobnotice__grid th:first-child {
  text-align: center;
  color: var(--text-500);
}
@media (min-width: 901px) {
  .jobnotice__grid th:first-child,
  .jobnotice__grid td[data-label="No."] {
    width: 50px;
  }
  /* 열이 7~8개라 auto 레이아웃이 선호폭을 눌러 버린다 - min-width 라야 지켜진다.
     사용처 목록은 1열이 체크박스라 th:first-child 로는 못 집는다 - No. 머리칸에 클래스를 달아 집는다 */
  .jobnotice__grid th.col-no,
  .jobnotice__grid td[data-label="No."] {
    min-width: 50px;
  }
}
/* 급여는 값이 짧아 꺾이면 읽기 나쁘다 */
.jobnotice__grid td[data-label="급여"] {
  white-space: nowrap;
}
/* 채용기간도 한 줄로 둔다. 접으면 900px 이하 카드뷰에서 값이 두 줄로 갈린다 */
.jobnotice__grid td[data-label="채용기간"] {
  white-space: nowrap;
}
.jobnotice__grid td.jobnotice__empty-cell {
  height: auto;
  padding: 16px 0;
}

/* 표가 눌리면 기업명·공고명·직종이 잘게 꺾인다. 최소 폭을 주어 좁을 때는 .table-wrap 의 가로 스크롤로 넘긴다.
   [!] 901px 이상에서만 건다. 900px 이하는 퍼블이 표를 카드로 접는데(td::before 가 data-label 을
   항목명으로 쓴다), min-width 가 남아 있으면 접히지 않고 가로 스크롤만 남는다 */
@media (min-width: 901px) {
  .jobnotice__grid {
    min-width: 1120px;
  }
  .jobnotice__grid td[data-label="기업명"],
  .jobnotice__grid th:nth-last-child(5) {
    min-width: 150px;
  }
  .jobnotice__grid td[data-label="공고명"],
  .jobnotice__grid th:nth-last-child(4) {
    min-width: 300px;
  }
  .jobnotice__grid td[data-label="채용기간"],
  .jobnotice__grid th:last-child {
    min-width: 175px;
  }
  .jobnotice__grid td[data-label="직종"],
  .jobnotice__grid th:nth-last-child(3) {
    min-width: 170px;
  }
}
/* 사용처 목록은 체크박스 표라 공용 규칙이 전부 왼쪽으로 민다 - 기업명·직종·급여·채용기간만 가운데로 되돌린다.
   .content-area 를 달아야 체크박스 표 규칙의 특이도를 이긴다 */
@media (min-width: 901px) {
  .content-area table.grid.jobnotice__grid th:nth-last-child(-n+3),
  .content-area table.grid.jobnotice__grid th:nth-last-child(5),
  .content-area table.grid.jobnotice__grid td[data-label="기업명"],
  .content-area table.grid.jobnotice__grid td[data-label="직종"],
  .content-area table.grid.jobnotice__grid td[data-label="급여"],
  .content-area table.grid.jobnotice__grid td[data-label="채용기간"] {
    text-align: center;
  }
}
/* 가운데 칸은 일반 목록처럼 #767676. :not([colspan]) 은 체크박스 표 본문색(#333) 규칙의 특이도를 넘기 위한 것.
   모바일 카드에서도 웹과 같은 색이어야 해 미디어쿼리 밖에 둔다 */
.content-area table.grid.jobnotice__grid td[data-label="기업명"]:not([colspan]),
.content-area table.grid.jobnotice__grid td[data-label="직종"]:not([colspan]),
.content-area table.grid.jobnotice__grid td[data-label="급여"]:not([colspan]),
.content-area table.grid.jobnotice__grid td[data-label="채용기간"]:not([colspan]) {
  color: var(--color-text-tertiary, #767676);
}
/* 900px 이하 리스트형 카드 - 경력정보관리(.career-list__grid) 카드와 같은 구성·간격.
   top: [체크박스(사용처만)] 공고명(파란 굵은 글씨) … 상태 배지
   task: 기업명 - 라벨 없는 단독 줄 + 아래 구분선
   body: 직종/급여/채용기간 - 흐린 라벨:값 줄. No. 는 뺀다.
   사용처 체크박스 칸만 data-label 이 없어 :not([data-label]) 로 집는다(colspan 빈 칸은 제외) */
@media (max-width: 900px) {
  table.grid.jobnotice__grid tr {
    display: flex;
    flex-wrap: wrap;
    padding: 0;
  }
  table.grid.jobnotice__grid td {
    height: auto;
  }
  table.grid.jobnotice__grid td[data-label="No."] {
    display: none;
  }
  table.grid.jobnotice__grid td:not([data-label]):not([colspan]) {
    order: -3;
    flex: 0 0 auto;
    width: auto !important;
    border-bottom: none;
    padding: var(--spacing-sm) 0 0 var(--spacing-sm);
  }
  table.grid.jobnotice__grid td[data-label="공고명"] {
    order: -2;
    display: block;
    flex: 1 1 0%;
    width: auto !important;
    min-width: 0;
    border-bottom: none;
    padding: var(--spacing-sm) 0 0 var(--spacing-sm);
    font-size: var(--font-size-heading-h3);
    font-weight: 700;
    text-align: left;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  table.grid.jobnotice__grid td[data-label="상태"] {
    order: -1;
    flex: 0 0 auto;
    width: auto !important;
    border-bottom: none;
    padding: var(--spacing-sm) var(--spacing-sm) 0 var(--spacing-sm);
  }
  table.grid.jobnotice__grid td[data-label="기업명"] {
    order: 0;
    display: block;
    width: 100% !important;
    border-bottom: 1px solid var(--color-border-light);
    padding: var(--spacing-xs) var(--spacing-sm) var(--spacing-sm);
    font-size: var(--font-size-body-m);
    text-align: left;
  }
  table.grid.jobnotice__grid td:not([data-label]):not([colspan])::before,
  table.grid.jobnotice__grid td[data-label="공고명"]::before,
  table.grid.jobnotice__grid td[data-label="상태"]::before,
  table.grid.jobnotice__grid td[data-label="기업명"]::before {
    content: none;
  }
  table.grid.jobnotice__grid td[data-label="직종"],
  table.grid.jobnotice__grid td[data-label="급여"],
  table.grid.jobnotice__grid td[data-label="채용기간"] {
    flex: 1 1 100%;
    border-bottom: none;
    padding: 0 var(--spacing-sm);
    font-size: var(--font-size-body-m);
  }
  table.grid.jobnotice__grid td[data-label="직종"] {
    order: 3;
    padding-top: var(--spacing-sm);
  }
  table.grid.jobnotice__grid td[data-label="급여"] {
    order: 4;
    margin-top: var(--spacing-xs);
  }
  table.grid.jobnotice__grid td[data-label="채용기간"] {
    order: 5;
    margin-top: var(--spacing-xs);
    padding-bottom: var(--spacing-sm);
  }
  table.grid.jobnotice__grid td::before {
    font-weight: 400;
    color: var(--color-text-tertiary, #767676);
  }
}

/* =========================================================
   공용 — 버튼 줄
   ========================================================= */

/* 퍼블 .btn-outline 은 .btn 의 치수를 자체 값으로 덮어써(padding 8px 14px / 12.5px / radius 12px /
   border 1.5px) 같은 줄의 .btn-primary(44px / 15px / radius 6px)와 높이·글자·모서리가 어긋난다.
   버튼이 나란히 서는 .btn-row 안에서는 .btn 치수로 되돌린다 - 색만 outline 을 유지한다.
   (표 위 툴바는 .career-list__btn-row / .career-ext-list__toolbar 가 따로 36px 로 맞춘다) */
.btn-row .btn.btn-outline,
/* 관리자 화면의 하단 버튼줄은 .btn-row 가 아니라 .btn-align 이다.
   .btn-sm 은 작은 치수를 일부러 쓰는 자리(답변 카드의 수정·삭제)라 뺀다 -
   넣으면 옆의 .btn-primary.btn-sm(30px) 과 높이가 어긋난다. */
.btn-align .btn.btn-outline:not(.btn-sm) {
  height: 44px;
  padding: 0 20px;
  font-size: 15px;
  font-weight: 600;
  border-width: 1px;
  border-radius: 6px;
}
/* ---- 퍼블 file-upload 보조 스타일 ----
   퍼블 mockup.css 의 .file-upload__zone/__item 에 없는 것만 둔다(목록 ul, 숨은 input, 드래그중).
   1:1 문의 답변처럼 JS 로 같은 마크업을 만드는 자리에서도 필요하다. */
.file-upload__list {display:flex; flex-direction:column; gap:8px; width:100%; margin:0; padding:0; list-style:none;}
/* 파일 선택은 드롭존의 [업로드] 버튼이 연다. click() 이 먹어야 하므로 display:none 이 아니라 투명 1px 이다 */
.file-upload__input {position:absolute; width:1px; height:1px; opacity:0;}
.file-upload--dragover .file-upload__zone {border-color:#2d65f2; background:#eef3fe;}
/* 확장자별 아이콘(icon-file-*.svg)은 21.01x26.56 비율이라 높이만 24 로 맞추고 폭은 비율대로 둔다 */
img.file-upload__item-icon {width:auto; height:24px;}
/* 관리자 표·목록 칸의 첨부 파일명 앞 아이콘(common/fileLinkIcon_include.jsp). 글자 높이에 맞춘다 */
/* 퍼블 리셋이 img 를 display:block 으로 둬서 인라인으로 되돌리지 않으면 파일명이 다음 줄로 떨어진다 */
img.file-link-icon {display:inline-block; width:auto; height:18px; margin-right:6px; vertical-align:middle;}
/* 좁은 칸에서 파일명이 아이콘과 다른 줄로 떨어지지 않게, 이름은 아이콘 옆 한 덩어리 안에서 줄바꿈한다 */
img.file-link-icon + a {display:inline-block; max-width:calc(100% - 24px); vertical-align:middle; text-align:left;}
.file-upload__item-name a {color:inherit; text-decoration:none;}
.file-upload__item-name a:hover {text-decoration:underline;}
/* .file-upload 는 align-items:flex-start 라 자식 div(파일박스·목록 래퍼)가 내용 폭으로 줄어든다 */
.file-upload > div {width:100%;}

/* 게시판 등록 [상단공지] 기간칸. 구 스킨 껍데기는 30px 인데 퍼블 폼 규칙이 안쪽 입력을 44px 로 키워
   껍데기를 뚫고 나가면서 껍데기 밑선이 입력칸을 가로지른다.
   ⚠ 껍데기를 지우지는 못한다 - inBoard.js 가 부모의 이 클래스를 보고 search-disable(비활성 배경)을 건다.
   #iph-content 를 붙이지 않으면 퍼블 .form-row input 규칙을 못 이긴다.
   #pop_wrapper 는 같은 등록화면을 팝업(NP, manager_popup_panel)으로 열 때의 바깥 틀이다. */
#iph-content .form-row .search-input-calendar,
#pop_wrapper .form-row .search-input-calendar {
  height: 44px;
  box-sizing: border-box;
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-sm);
  overflow: hidden;
  /* 화면들이 인라인 style 로 128px 을 주는데, 아이콘 몫(28px)과 안쪽 여백을 빼면
     글자 자리가 84px 밖에 안 남아 '2026-08-25'(15px 폰트로 약 90px)가 잘린다.
     min-width 는 인라인 width 를 이기므로 JSP 를 건드리지 않고 여기서 넓힌다. */
  min-width: 150px;
}
#iph-content .form-row .search-input-calendar input[type="text"],
#pop_wrapper .form-row .search-input-calendar input[type="text"] {
  height: 100%;
  padding: 0 16px;
  border-radius: 0;
  background: none;
}
/* 바로 위 background:none 은 인풋의 흰 배경을 걷으려는 것인데, 단축속성이라 달력 아이콘
   (bcnimda/design.css 의 input.calendar 배경 이미지)까지 함께 지운다. 아이콘만 되살린다 -
   표(.write-basic)를 쓰던 시절에는 .form-row 가 없어 이 규칙에 걸리지 않았고 아이콘이 있었다. */
#iph-content .form-row input.calendar,
#iph-content .form-row .search-input-calendar input.calendar,
#pop_wrapper .form-row input.calendar,
#pop_wrapper .form-row .search-input-calendar input.calendar {
  background-image: url(../../../files/bcnimda/images/common/ico_mon.png);
  background-repeat: no-repeat;
  background-position: right 8px center;
  /* 아이콘 몫 28px 을 오른쪽에 남기고, 왼쪽 여백은 10px 로 눌러 글자 자리를 번다 */
  padding: 0 28px 0 10px;
}

/* 삭제처럼 되돌릴 수 없는 동작은 테두리형이되 위험 색이어야 한다. 퍼블에는 빨간 테두리
   버튼이 없어(.btn-danger 는 빨강 채움, .btn-outline 은 파랑 테두리) .btn-outline 위에
   색만 바꾸는 수식 클래스를 둔다 - 치수·모서리는 .btn-outline 이 그대로 갖는다.
   빨강은 .btn-danger 가 쓰던 --red 를 그대로 쓴다(같은 화면에서 색이 달라지지 않게). */
.btn.btn-outline.btn-outline--danger {
  border-color: var(--red);
  color: var(--red);
}
.btn.btn-outline.btn-outline--danger:hover {
  background: var(--red-bg, #fdf1f1);
}

/* =========================================================
   [FR-COM-011/012] 멘토 상세 · Q&A
   퍼블 mockup.css 의 .mentor-detail-card 세트(반응형 포함)가 다루지 않는
   상태(사진 없는 멘토·경력 목록·잠긴 제목)만 둔다.
   ========================================================= */

/* 퍼블 아바타는 <img> 전제라 사진이 없는 멘토를 그릴 수단이 없다 */
.mentor-detail-card__avatar--initial {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-avatar-bg, #f2f3f8);
  color: var(--text-500);
  font-size: 28px;
  font-weight: 700;
}

/* 자유입력(멘토 소개)의 줄바꿈을 <br/> 주입 없이 살린다 */
.mentor-qna-detail__pre {
  white-space: pre-wrap;
  word-break: break-all;
}

/* 경력사항 - 퍼블의 career-grid 는 "라벨 · 값" 한 줄짜리라 여러 줄 항목에 맞지 않는다 */
.mentor-qna-detail__career-item {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px 14px;
  background: var(--surface);
}
.mentor-qna-detail__career-item + .mentor-qna-detail__career-item {
  margin-top: 8px;
}
.mentor-qna-detail__career-corp {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: var(--font-size-16);
  font-weight: 600;
  color: var(--color-gray-900);
  margin-bottom: 4px;
}
.mentor-qna-detail__career-meta {
  display: block;
  font-size: var(--font-size-14);
  color: var(--text-500);
  line-height: 1.6;
}

/* Q&A 목록 - 데스크톱 열 폭만 잡는다. 900px 이하는 퍼블이 카드로 접는다 */
@media (min-width: 901px) {
  .mentor-qna__grid th:nth-child(1), .mentor-qna__grid td:nth-child(1) { width: 70px; text-align: center; }
  .mentor-qna__grid th:nth-child(3), .mentor-qna__grid td:nth-child(3) { width: 120px; }
  .mentor-qna__grid th:nth-child(4), .mentor-qna__grid td:nth-child(4) { width: 100px; text-align: center; }
  .mentor-qna__grid th:nth-child(5), .mentor-qna__grid td:nth-child(5) { width: 120px; text-align: center; }
  .mentor-qna__grid th:nth-child(6), .mentor-qna__grid td:nth-child(6) { width: 80px; text-align: center; }
}
.mentor-qna__title-cell { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.mentor-qna__title-link { color: var(--text-700); cursor: pointer; }
.mentor-qna__title-link:hover { text-decoration: underline; }
.mentor-qna__lock { color: var(--text-400); cursor: not-allowed; }

/* 빈 상태 행은 카드로 접히면 테두리가 이중이 된다 */
@media (max-width: 900px) {
  .mentor-qna__grid tr.mentor-qna__empty-row { border: none; padding: 0; background: none; }
  .mentor-qna__grid tr.mentor-qna__empty-row td { border-bottom: none; padding: 0; display: block; }
}

/* 질문/답변 상세(FR-COM-012) */
.mentor-qna-view__head { padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.mentor-qna-view__title {
  margin: 0 0 8px;
  font-size: var(--font-size-22);
  font-weight: 600;
  color: var(--color-text-heading);
  word-break: break-all;
}
.mentor-qna-view__meta {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  font-size: var(--font-size-14);
  color: var(--text-500);
}
.mentor-qna-view__meta strong { color: var(--text-700); font-weight: 600; }
.mentor-qna-view__body {
  padding: 20px 0;
  font-size: var(--font-size-16);
  color: var(--text-700);
  line-height: 1.8;
  word-break: break-all;
}

/* 첨부 목록 - 퍼블 .file-upload__item 은 업로드 진행 UI 전용이라 조회 화면에는 무겁다 */
.mentor-qna-view__files {
  margin-top: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--bg);
  padding: 10px 12px;
}
.mentor-qna-view__files ul { margin: 0; padding: 0; list-style: none; }
.mentor-qna-view__files li {
  display: flex;
  gap: 8px;
  align-items: center;
  font-size: var(--font-size-14);
  color: var(--text-700);
  padding: 4px 0;
}
.mentor-qna-view__files li + li { border-top: 1px solid var(--line); }
.mentor-qna-view__file-nm { flex: 1; min-width: 0; word-break: break-all; }

.mentor-qna-view__answer {
  margin-top: 8px;
  border-left: 3px solid var(--color-primary);
  background: var(--color-primary-bg, #f5f8ff);
  border-radius: 0 8px 8px 0;
  padding: 16px 18px;
}
.mentor-qna-view__answer-head { display: flex; gap: 10px; align-items: center; margin-bottom: 10px; flex-wrap: wrap; }
.mentor-qna-view__answer-date { font-size: var(--font-size-13); color: var(--text-500); }
.mentor-qna-view__answer-title {
  margin: 0 0 8px;
  font-size: var(--font-size-18);
  font-weight: 600;
  color: var(--color-gray-900);
  word-break: break-all;
}
.mentor-qna-view__answer-body {
  font-size: var(--font-size-16);
  color: var(--text-700);
  line-height: 1.8;
  word-break: break-all;
}

/* =========================================================
   [FR-JOB-002] 일자리공고 등록·수정 (사용처)
   [FR-CR-003] 경력·확장경력 상세 (읽기 전용)
   [FR-COM-005] 설문 목록 · 나의 참여내역 · 상세 · 응답(문항 표 포함)
   ========================================================= */

/* 퍼블 .tab-btn 은 <button> 전제다. 이 화면의 탭은 서로 다른 URL이라 <a> 로 둔다.
   display 는 덮지 않는다 - inline-block 으로 되돌리면 글자가 44px 알약 안에서 위로 붙는다 */
a.tab-btn { text-decoration: none; }
a.tab-btn:hover { color: var(--blue-600); }

.poll-list .list-toolbar { margin-bottom: 12px; }
.poll-list .list-foot { margin-top: 16px; }
.poll-list .list-foot .list-paging { margin-top: 0; }

/* 화면 제목. 퍼블 h3 는 본문 소제목용이라 작다 */
.poll-list__muted { color: var(--text-400); }
.poll-list__actions { display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; }
/* 데스크톱 열 폭만 잡는다. 900px 이하는 퍼블이 카드로 접는다 */
@media (min-width: 901px) {
  .poll-list__grid th:nth-child(1), .poll-list__grid td:nth-child(1) { width: 50px; text-align: center; }
  .poll-list__grid th:nth-child(2), .poll-list__grid td:nth-child(2) { width: 140px; text-align: center; white-space: nowrap; }
  .poll-list__grid th:nth-child(4), .poll-list__grid td:nth-child(4) { width: 100px; text-align: center; }
  .poll-list__grid th:nth-child(5), .poll-list__grid td:nth-child(5) { width: 130px; text-align: center; }
  .poll-list__grid th:nth-child(6), .poll-list__grid td:nth-child(6) { width: 100px; text-align: center; }
  .poll-list__grid--my th:nth-child(5), .poll-list__grid--my td:nth-child(5) { width: 200px; text-align: left; }
}

@media (max-width: 900px) {
  .poll-list__grid tr.poll-list__empty-row { border: none; padding: 0; background: none; height: auto; }
  /* table.grid td{height:52px}(고정값)를 못 이겨 빈 상태 안내문(.empty-state, 실측 139px)이 아래
     페이지네이션(.list-foot)과 겹쳐 보였다 - 이 행만 height:auto로 되돌린다 */
  .poll-list__grid tr.poll-list__empty-row td { border-bottom: none; padding: 0; display: block; height: auto; }
}

/* ---------- 모바일 카드뷰 (시안 FR-COM-005 와 같은 형태) ---------- */
/* 목록(6열)·참여내역(5열)이 같은 .poll-list__grid 를 달고 있어 목록 규칙은 :not(--my) 로 좁힌다.
   공통 시스템의 `table.grid td{width:100% !important}` 를 이겨야 해 제목·배지에 !important 가 필요하다. */
@media (max-width: 900px) {
  .poll-list__grid tbody tr:not(.poll-list__empty-row) {
    display: flex;
    flex-wrap: wrap;
    background: var(--white, #fff);
    border-color: var(--color-border-default);
    border-radius: var(--radius-md);
    padding: 0;
  }
  .poll-list__grid tbody tr:not(.poll-list__empty-row) td {
    height: auto;
  }
  /* No.는 시안 카드에 없다 */
  .poll-list__grid td[data-label='No.'] {
    display: none;
  }
  /* 라벨:값 본문. [!] tbody 를 붙이지 않는다 - 아래 열별 규칙보다 특이도가 높아져 그쪽 padding 이 무시된다 */
  .poll-list__grid td[data-label] {
    border-bottom: none;
    padding: 0 var(--spacing-sm);
  }
  .poll-list__grid td[data-label='마감일'],
  .poll-list__grid td[data-label='참여일'] {
    order: 2;
    padding-bottom: var(--spacing-xs);
  }
  .poll-list__grid td[data-label='대상여부'] {
    order: 3;
    padding-bottom: var(--spacing-xs);
  }
  /* 제목 - 상태 배지와 한 줄 */
  .poll-list__grid td[data-label='설문 제목'] {
    order: -2;
    width: auto !important;
    flex: 1 1 0%;
    min-width: 0;
    padding: var(--spacing-sm);
    font-size: var(--font-size-18);
    font-weight: 700;
    color: var(--color-text-body);
    text-align: left;
  }
  .poll-list__grid td[data-label='설문 제목']::before {
    content: none;
  }
  .poll-list__grid td[data-label='설문 제목'] > .cell-content,
  .poll-list__grid td[data-label='설문 제목'] a {
    display: block;
    text-align: left;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  /* 상태 배지 - 제목 오른쪽. 목록은 '응답상태', 참여내역은 '상태' 열이다 */
  .poll-list__grid td[data-label='응답상태'],
  .poll-list__grid td[data-label='상태'] {
    order: -1;
    width: auto !important;
    flex: 0 0 auto;
    padding: var(--spacing-sm) var(--spacing-sm) var(--spacing-sm) 0;
  }
  .poll-list__grid td[data-label='응답상태']::before,
  .poll-list__grid td[data-label='상태']::before {
    content: none;
  }
  /* 관리 - 라벨 없이 카드 아래 전폭. 버튼이 둘 다 붙는 경우 폭을 반씩 나눈다
     (.poll-list__actions 가 이미 gap 을 가진 flex 라 flex:1 만 주면 된다) */
  .poll-list__grid td[data-label='관리'] {
    order: 4;
    padding-bottom: var(--spacing-sm);
  }
  .poll-list__grid td[data-label='관리']::before {
    content: none;
  }
  .poll-list__grid td[data-label='관리'] > .cell-content {
    width: 100%;
    justify-content: stretch;
  }
  /* 참여내역 버튼은 .poll-list__link 가 아니라 .btn-outline 이라 따로 집어야 전폭이 된다 */
  .poll-list__grid td[data-label='관리'] .poll-list__actions > a.btn-outline {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1 1 0%;
    min-width: 0;
    height: 36px;
    border: 1px solid var(--color-primary);
    border-radius: var(--radius-xs);
    color: var(--color-primary);
    font-size: var(--font-size-14);
    font-weight: 500;
    text-decoration: none;
  }
  /* 라벨:값 텍스트 - 다른 카드뷰 목록과 동일(16px Regular 라벨 #767676) */
  .poll-list__grid tbody td::before {
    font-weight: 400;
    color: var(--color-text-tertiary, #767676);
  }
}

/* 설문 상세(pollView) · 응답(pollPartiForm) - 퍼블에 없는 조회용 요소 */
.poll-view__desc {
  margin: 16px 0;
  padding: 16px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  font-size: var(--font-size-16);
  color: var(--text-700);
  line-height: 1.7;
  white-space: pre-wrap;
}
/* 읽기 전용 값은 입력칸 모양에 넣지 않는다. 라벨을 값 위에 얹은 2단 배치 */
.poll-parti__agree {
  margin-top: 20px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--bg);
}
.poll-parti__agree .form-error { margin: 6px 0 0; }

/* 임시저장 안내는 버튼줄 바로 위에 우측 정렬로 붙인다(시안의 최종저장일시 표기와 같은 자리) */
.poll-parti__lastsave {
  margin: 16px 0 0;
  text-align: right;
  font-size: var(--font-size-14);
  color: var(--color-gray-600);
}
/* 퍼블 FR-COM-007 은 이 규칙들을 id(#mentor-qna-form)로 걸지만, <form:form> 의 id 는
   Spring(modelAttribute)·화면 JS($("#wf"))가 쓴다. 클래스로 옮겼다 - 특이도는 낮지만 경쟁 규칙이 없다 */
.mentor-qna-form .form-row label { font-weight: 400; }
.mentor-qna-form .form-row input:not([type="radio"]):not([type="checkbox"]),
.mentor-qna-form .form-row select,
.mentor-qna-form .form-row textarea { border-color: var(--color-border-default); }
.mentor-qna-form .form-row textarea { height: 120px; }
.mentor-qna-form + .btn-row,
.mentor-qna-form .btn-row {
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-top: 0;
  padding-top: 24px;
}

/* ---------- 설문 문항·응답 표 (PollBean 이 Java 에서 찍는 마크업) ----------
   마크업이 JSP 가 아니라 Java 문자열이라 건드리지 않고 여기서 표시만 바로잡는다.
   [!] .table-basic 은 사용자 화면 전역 관례(262곳)라 스코프를 .poll-list 로 좁힌다. */

/* caption 은 스크린리더용인데 숨기는 규칙이 없어 문항마다 가운데에 보였다 */
.poll-list .table-basic table caption {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

/* .table-basic 본체 규칙(width·padding·line-height·테두리)은 popup.css 에만 있고 이 화면은 싣지 않아
   표가 UA 기본값으로 쭈그러들었다. popup.css 통째 로드 대신 표에 필요한 만큼만 채운다. */
.poll-list .table-basic {
  border-top: 2px solid var(--color-gray-900, #111);
  margin-bottom: 20px;
}
.poll-list .table-basic table {
  width: 100%;
  line-height: 21px;
}
.poll-list .table-basic table thead th,
.poll-list .table-basic table tbody th {
  background: var(--bg);
  border: 1px solid var(--line);
  padding: 12px 10px;
  font-size: var(--font-size-16) !important;
  font-weight: 600;
}
.poll-list .table-basic table tbody td {
  border: 1px solid var(--line);
  padding: 12px 15px;
  font-size: var(--font-size-16) !important;
}

/* 보기 목록 - 스킨의 .input-align3 도 같은 토큰에 기대고 있어 간격만 여기서 잡는다 */
.poll-list .ques-list ul { margin: 0; padding: 0; list-style: none; }
.poll-list .ques-list li { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 4px 0; }
.poll-list .ques-list li .input-radio,
.poll-list .ques-list li .input-checkbox { display: flex; align-items: center; gap: 6px; }
.poll-list .ques-list li label { cursor: pointer; }

/* 모바일 - colgroup 의 20% 가 인라인 style 이라 셀을 블록으로 풀어 세로로 쌓는다 */
@media (max-width: 744px) {
  .poll-list .table-basic table,
  .poll-list .table-basic table thead,
  .poll-list .table-basic table tbody,
  .poll-list .table-basic table tr,
  .poll-list .table-basic table th,
  .poll-list .table-basic table td {
    display: block;
    width: 100%;
  }
  .poll-list .table-basic table thead th { border-bottom: none; }
  .poll-list .table-basic table thead th:last-child { border-bottom: 1px solid var(--line); }
}

/* ---------- FR-COM-014 설문 응답 - 문항 표를 시안의 라벨 + 보기 한 줄 배치로 푼다 ----------
   문항 마크업은 PollBean(Java)이 찍어 바꿀 수 없다. .survey-response__questions 안에서만 풀고,
   같은 표를 쓰는 PO04 등 래퍼 밖은 위 표 규칙 그대로다.
   .poll-list 를 한 번 더 붙인 이유: 위 표 규칙과 클래스 수가 같으면 순서로만 이겨 조용히 뒤집힌다. */
.poll-list .survey-response__questions .table-basic {
  border-top: none;
  margin-bottom: 0;
}
.poll-list .survey-response__questions .table-basic + .table-basic { margin-top: var(--spacing-2xl); }
.poll-list .survey-response__questions .table-basic table,
.poll-list .survey-response__questions .table-basic thead,
.poll-list .survey-response__questions .table-basic tbody,
.poll-list .survey-response__questions .table-basic tr,
.poll-list .survey-response__questions .table-basic th,
.poll-list .survey-response__questions .table-basic td {
  display: block;
  width: 100%;
}
.poll-list .survey-response__questions .table-basic colgroup { display: none; }

/* 문항번호 th 와 문항명 th 를 시안의 한 줄 라벨(Q1. …)로 붙인다 */
.poll-list .survey-response__questions .table-basic thead tr {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--spacing-3xs);
}
.poll-list .survey-response__questions .table-basic table thead th,
.poll-list .survey-response__questions .table-basic table tbody th {
  display: inline-block;
  width: auto;
  padding: 0;
  background: none;
  border: none;
  text-align: left;
  font-size: var(--font-size-18) !important;
  font-weight: 700;
  line-height: 1.45;
  color: var(--color-text-body);
}
/* 필수 표시는 시안의 .survey-response__required 와 같은 크기·색으로 */
.poll-list .survey-response__questions .table-basic thead th .red {
  font-size: var(--font-size-14);
  font-weight: 500;
  color: var(--color-required);
}
.poll-list .survey-response__questions .table-basic table tbody td {
  padding: var(--spacing-xs) 0 0;
  border: none;
}

/* 설명문항(H) - 응답이 아닌 안내문이라 문항 표와 구분되게 박스로 뺀다.
   PollBean 이 H 에만 .table-basic--notice 를 붙인다. 문항명은 Q번호·필수표시 없이 안내문 본문으로 쓴다. */
.poll-list .survey-response__questions .table-basic--notice {
  width: 100%;
  box-sizing: border-box;
  background: var(--color-bg-info-banner, #dfeaff);
  border: 1px solid var(--color-primary-border-light, #abc3fb);
  border-left: 3px solid var(--color-primary, #2d65f2);
  border-radius: var(--radius-sm, 8px);
  padding: var(--spacing-md) var(--spacing-lg);
}
.poll-list .survey-response__questions .table-basic--notice thead th {
  font-size: var(--font-size-15) !important;
  font-weight: 500;
  color: var(--color-text-body);
}

/* 보기 목록 - 시안 .survey-response__options (가로 배치, 최소 높이 44px) */
.poll-list .survey-response__questions .ques-list ul.input-align3 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-xl);
  min-height: 44px;
}
.poll-list .survey-response__questions .ques-list li { padding: 0; }

/* 문항 표가 카드 폭을 채우게 한다. .survey-response__questions 는 align-items:flex-start 라
   그냥 두면 내용 폭(주관식은 textarea 기본값 cols=20 ≒ 236px)만큼만 남는다 */
.poll-list .survey-response__questions > * { width: 100%; }

/* 서술형 - 시안 .survey-response__textarea */
.poll-list .survey-response__questions .textarea-box textarea {
  display: block;
  width: 100%;
  min-height: 120px;
  padding: var(--spacing-sm) var(--spacing-md);
  background: var(--color-white);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: var(--font-size-16);
  line-height: var(--line-height-base);
  color: var(--color-text-body);
  resize: vertical;
}
.poll-list .survey-response__questions .textarea-box__bottom {
  margin-top: var(--spacing-3xs);
  font-size: var(--font-size-13);
  color: var(--color-text-tertiary);
}

/* 시안에 없는 블록(응답자 정보·개인정보 동의·소제목)도 카드 폭을 채우게 한다.
   .survey-response 는 align-items:flex-start 라 그냥 두면 내용 폭만큼만 줄어든다. */
.poll-list .survey-response > * { width: 100%; }
.poll-list .survey-response > .poll-parti__agree { margin-top: 0; }
/* 헤더 카드 - 시안은 한 줄 고정(nowrap)이지만 실제 설문명·기간은 길이가 제각각이라 접히게 둔다 */
.poll-list .survey-response__title { white-space: normal; }
.poll-list .survey-response__meta { flex-wrap: wrap; }
.poll-list .survey-response__meta-item,
.poll-list .survey-response__meta-note { white-space: normal; }
/* 설문 소개가 헤더 카드 안에 들어가므로 바깥에서 쓰던 구분선을 뗀다 */
.poll-list .survey-response__header .poll-view__desc {
  margin: 0;
  padding: 0;
  border: none;
}

@media (max-width: 744px) {
  .poll-list .survey-response__questions .ques-list ul.input-align3 {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-sm);
  }
}

/* 설문 전체 결과(pollTotRstView) - 문항 머리줄과 차트 배치만. 표 테두리 카드는 선택형 목록과 같은 값이다 */
.poll-totrst__group,
.poll-totrst__qst {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  width: 100%;
}
.poll-totrst__group { gap: var(--spacing-2xl); }
.poll-totrst__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--spacing-xs);
}
.poll-list .poll-totrst__head .survey-response__label { display: block; padding: 0; white-space: normal; }
.poll-totrst__head .survey-response__required { margin-left: var(--spacing-3xs); }
.poll-totrst__meta { font-size: var(--font-size-14); color: var(--color-text-tertiary); }
.poll-totrst__desc { font-size: var(--font-size-15); color: var(--color-text-secondary); }
.poll-totrst__table {
  border: 1px solid var(--color-border-table, #e3e8f0);
  border-radius: var(--radius-sm);
}
.poll-totrst__table table.grid tbody tr:last-child td { border-bottom: none; }
.poll-totrst__etc { margin-left: var(--spacing-xs); }
.poll-totrst__empty { height: 80px; text-align: center; color: var(--color-text-tertiary); }
.poll-totrst__charts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--spacing-md);
}
.poll-totrst__charts--single { grid-template-columns: minmax(0, 1fr); }
.poll-totrst__charts > div {
  min-height: 300px;
  border: 1px solid var(--color-border-table, #e3e8f0);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.poll-totrst__more { text-align: center; }
/* 900px 이하에서는 table.grid 행이 각자 카드가 되므로 바깥 테두리를 떼야 이중 테두리가 안 된다 */
@media (max-width: 900px) {
  .poll-totrst__table { border: none; border-radius: 0; }
}
@media (max-width: 744px) {
  .poll-totrst__charts { grid-template-columns: minmax(0, 1fr); }
}

/* [FR-JOB-002] 일자리공고 수정(사용처) - 폼은 퍼블 form-grid 그대로 쓰고, 삭제 버튼만 붉게 둔다 */
.jobnotice-form__delete { color: var(--red); border-color: var(--red); }

/* =========================================================
   [FR-CR-003 / FR-CR-006] 경력·확장경력 상세 (읽기 전용)
   퍼블에는 조회 전용 폼이 없다. 등록 화면(form-grid/form-row)의 배치를 그대로 쓰되
   값 칸만 입력칸과 구분되게 둔다 - 입력칸 모양이면 고칠 수 있는 것처럼 읽힌다.
   ========================================================= */

.detail-view h3.detail-view__heading {
  margin: 0;
  font-size: var(--font-size-22);
  font-weight: 600;
  color: var(--color-text-heading);
}
.detail-view__title-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}

.detail-view__value {
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 10px 12px;
  font-size: var(--font-size-15);
  background: var(--bg);
  color: var(--color-gray-900);
  min-height: 40px;
  box-sizing: border-box;
}
.detail-view__value--multiline { white-space: pre-wrap; word-break: break-all; }

.detail-view__files { margin: 0; padding: 0; list-style: none; }
.detail-view__files li {
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--bg);
  font-size: var(--font-size-15);
}
.detail-view__files li + li { margin-top: 6px; }
.detail-view__files a { color: var(--blue-600); }
.detail-view__files a:hover { text-decoration: underline; }
.detail-view__files-empty { color: var(--text-500); }

/* =========================================================
   CH-01 증명서 발급이력
   ========================================================= */

/* 이 화면의 버튼은 전부 <a> 다(마크업을 그대로 두고 클래스만 퍼블로 바꿨다).
   퍼블 .btn 은 <button> 을 전제해 링크 색·밑줄을 끊지 않으므로 여기서 끊는다 */
.cert-hist-list__filterbar .btn,
.cert-hist-list__grid .btn {
  text-decoration: none;
}
/* 표 안 버튼 치수는 .career-list__grid .btn-outline 와 같게 맞춘다 */
.cert-hist-list__grid .btn {
  height: 32px;
  padding: 0 12px;
  border-radius: var(--radius-xs);
  font-size: var(--font-size-14);
  font-weight: 500;
  vertical-align: middle;
}
.cert-hist-list__grid .btn-outline {
  border-width: 1px;
  border-color: var(--color-primary);
  color: var(--color-primary);
}
.cert-hist-list__grid .btn-primary {
  color: var(--color-white);
}
/* inCertPdf.js 가 캡처 중 중복클릭을 막으려 붙이는 클래스. 이 규칙이 없으면 클래스만 붙고 클릭은 계속 먹는다 */
.cert-hist-list__grid .btn.cr-disabled {
  pointer-events: none;
  opacity: 0.5;
}

/* 퍼블 .list-empty-state 를 그대로 쓰되, 표 안(td)에 들어가므로 셀 여백을 걷어낸다 */
.cert-hist-list__grid td.cert-hist-list__empty-cell {
  height: auto;
  padding: 16px 0;
}

/* 액션 열 폭이 행마다 흔들리지 않게 한다.
   900px 이하는 퍼블이 표를 카드로 접어 td 가 세로로 쌓이므로 걸지 않는다 */
@media (min-width: 901px) {
  /* 액션([PDF 다운로드]/[재발급]/[진위확인])을 한 줄로 세운다(행 높이 50px 통일).
     .cell-content 는 퍼블 design.js 가 라벨을 뺀 나머지를 감쌀 때 생긴다 - ajax 렌더라 없을 수도 있어 둘 다 잡는다 */
  .cert-hist-list__grid td.ch-actions,
  .cert-hist-list__grid td.ch-actions > .cell-content {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    column-gap: 6px;
  }
  /* td 가 flex 라 표의 height 가 먹지 않는다. 버튼 32 + 위 9 + 아래 8 + 테두리 1 = 50px 로 다른 행과 맞춘다 */
  .cert-hist-list__grid td.ch-actions {
    height: auto;
    padding-top: 9px;
    padding-bottom: 8px;
  }
  /* 액션 열은 버튼 한 줄만큼만 가져간다(1% + nowrap 은 내용 폭으로 접는 관용값) */
  .cert-hist-list__grid th:last-child,
  .cert-hist-list__grid td:last-child {
    width: 1%;
    white-space: nowrap;
  }
  /* 액션 열에서 돌려받은 폭을 날짜 두 열이 한 줄로 쓰게 한다 */
  .cert-hist-list__grid th:nth-child(2),
  .cert-hist-list__grid td:nth-child(2),
  .cert-hist-list__grid th:nth-child(4),
  .cert-hist-list__grid td:nth-child(4) {
    width: 120px;
    white-space: nowrap;
  }
}

/* 900px 이하 카드뷰 - 확장경력 목록(career-ext-list__grid)과 같은 카드 구성: 머리줄에 증명서유형 + 상태 배지,
   그 아래 라벨:값. 시안에 이 화면 모바일이 없어 같은 사이트의 다른 목록 카드에 맞췄고,
   열 위치는 고정이지만 data-label 로 골라 열 순서 변경에 덜 민감하게 둔다.
   미리보기 행(.ch-preview-row)은 카드가 아니라 카드 아래 펼쳐지는 칸이라 제외한다. */
@media (max-width: 900px) {
  .cert-hist-list__grid tbody tr:not(.ch-preview-row) {
    display: flex;
    flex-wrap: wrap;
    background: var(--white, #fff);
    border-color: var(--color-border-default);
    border-radius: var(--radius-md);
    padding: 0;
  }
  .cert-hist-list__grid tbody tr:not(.ch-preview-row) td {
    height: auto;
  }
  /* No.는 카드에 두지 않는다 */
  .cert-hist-list__grid td[data-label='No'] {
    display: none;
  }
  /* 라벨:값 행 - 구분선 없이 쌓는다. 머리줄은 아래에서 다시 잡는다 */
  .cert-hist-list__grid td[data-label] {
    border-bottom: none;
    padding: 0 var(--spacing-sm);
  }
  .cert-hist-list__grid td[data-label='발급일'] {
    padding-top: var(--spacing-xs);
  }
  /* 제목(증명서유형) - 상태 배지와 한 줄 */
  .cert-hist-list__grid td[data-label='증명서유형'] {
    order: -2;
    width: auto !important;
    flex: 1 1 0%;
    min-width: 0;
    padding: var(--spacing-sm);
    font-size: var(--font-size-18);
    font-weight: 700;
    text-align: left;
  }
  .cert-hist-list__grid td[data-label='증명서유형']::before {
    content: none;
  }
  .cert-hist-list__grid td[data-label='증명서유형'] > .cell-content {
    display: block;
    text-align: left;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  /* 상태 배지 - 제목 오른쪽 */
  .cert-hist-list__grid td[data-label='상태'] {
    order: -1;
    width: auto !important;
    flex: 0 0 auto;
    padding: var(--spacing-sm) var(--spacing-sm) var(--spacing-sm) 0;
  }
  .cert-hist-list__grid td[data-label='상태']::before {
    content: none;
  }
  /* 액션 - 라벨 없이 전폭 칸. 버튼이 넷이라 한 줄에 못 서므로 접히게 두고 왼쪽에 붙인다.
     [!] td{height:52px} 를 그대로 두면 두 줄(70px)이 칸 밖으로 삐져나온다. .cell-content 는 design.js 가 만든다 */
  .cert-hist-list__grid td.ch-actions,
  .cert-hist-list__grid td.ch-actions > .cell-content {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    column-gap: 6px;
    row-gap: 6px;
  }
  .cert-hist-list__grid td.ch-actions {
    order: 6;
    width: 100%;
    height: auto;
    border-bottom: none;
    padding: var(--spacing-xs) var(--spacing-sm) var(--spacing-sm);
  }
  .cert-hist-list__grid td.ch-actions::before {
    content: none;
  }
  .cert-hist-list__grid td.ch-actions > .cell-content {
    width: 100%;
  }
}

/* =========================================================
   FR-CR-004 외부연동 현황 (동의 목록)
   ========================================================= */

/* No. 칸은 careerList 의 번호 칸과 같은 처리 */
.consent-list__grid th:first-child,
.consent-list__grid td:first-child {
  text-align: center;
}
.consent-list__grid td:first-child {
  color: var(--text-500);
}
.consent-list__grid th:first-child {
  color: var(--color-text-heading);
}
/* [상세보기]는 표 안 버튼이라 .cert-hist-list__grid .btn 과 같은 치수로 맞춘다 */
.consent-list__grid .btn {
  height: 32px;
  padding: 0 12px;
  border-radius: var(--radius-xs);
  border-width: 1px;
  border-color: var(--color-primary);
  color: var(--color-primary);
  font-size: var(--font-size-14);
  font-weight: 500;
}
/* colgroup 을 걷어낸 자리. 900px 이하는 퍼블이 카드로 접으며 th/td 를 100% 로 되돌린다 */
@media (min-width: 901px) {
  /* No. 열은 목록 공통 폭 50px */
  .consent-list__grid th:first-child,
  .consent-list__grid td:first-child {
    width: 50px;
    padding-left: 8px;
    padding-right: 8px;
    white-space: nowrap;
  }
  .consent-list__grid th:nth-child(3),
  .consent-list__grid td:nth-child(3),
  .consent-list__grid th:nth-child(4),
  .consent-list__grid td:nth-child(4) {
    width: 160px;
    white-space: nowrap;
  }
  .consent-list__grid th:last-child,
  .consent-list__grid td:last-child {
    width: 120px;
  }
}

/* =========================================================
   [FR-CT-001] 증명서 발급 신청
   퍼블은 1·2·3단계가 각각 별도 페이지(HTML 3장)다. 구현은 한 화면 안에서 패널을 갈아끼우므로
   그 전환과, 퍼블에 없는 요소(발급 요약 카드 · 인라인 양식 미리보기)만 여기서 보강한다.
   표·버튼·배지·안내박스·단계표시는 전부 퍼블 원본 규칙을 그대로 쓴다.
   ========================================================= */

/* ---------- 1단계 표 ---------- */
/* 안내박스가 STEP 헤더와 표 사이에 끼는 경우(재발급 프리필 제외 안내)에도 표의 상단 간격을 유지한다.
   퍼블 원본에는 `.timeline + .card-head + .table-wrap` 만 있어 이 배치에서 간격이 사라진다. */
.timeline + .card-head + .alert-box + .table-wrap {
  margin-top: var(--spacing-xl);
}
/* 행 아무 데나 눌러도 선택된다(certIssueForm.jsp 행 클릭 핸들러). 손가락 커서로 그 사실을 알린다 -
   선택 불가 행은 토글되지 않으므로 제외한다. */
.cert-issue__grid tbody tr:not(.cert-issue__row-disabled) {
  cursor: pointer;
}
/* 표 바로 뒤에 오는 안내(선택 가능한 항목 0건 등) */
.table-wrap + .empty-state {
  margin-top: var(--spacing-lg);
}

/* ---------- 1단계 표 모바일 카드뷰 (FR-COM-002 나의 상담이력과 동일한 형태) ---------- */
/* 이 표는 페이지 스코프 클래스가 없어 공통 카드 시스템만 적용됐다. HTML 은 그대로 두고
   `main.cert-apply-step` 스코프로만 잡아 counsel-history__grid 와 같은 카드(제목+배지 한 줄 → 라벨:값)로 맞춘다. */
@media (max-width: 900px) {
  main.cert-apply-step table.grid:not(.cert-issue__grid) tr {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    border-color: var(--color-border-default);
    border-radius: var(--radius-md);
    padding: 0;
  }
  main.cert-apply-step table.grid:not(.cert-issue__grid) td {
    height: auto;
  }
  /* 체크박스: 카드 좌측 상단, 라벨(빈 th에서 온 빈 data-label) 제거 */
  main.cert-apply-step table.grid:not(.cert-issue__grid) td:nth-child(1) {
    order: -3;
    width: auto !important;
    flex: 0 0 auto;
    border-bottom: none;
    padding: var(--spacing-sm) 0 var(--spacing-sm) var(--spacing-sm);
  }
  main.cert-apply-step table.grid:not(.cert-issue__grid) td:nth-child(1)::before {
    content: none;
  }
  /* 경력명: 카드 제목 — 1줄+말줄임, 배지와 한 줄 */
  main.cert-apply-step table.grid:not(.cert-issue__grid) td:nth-child(2) {
    order: -2;
    width: auto !important;
    flex: 1 1 0%;
    min-width: 0;
    border-bottom: none;
    padding: var(--spacing-sm);
    font-size: var(--font-size-18);
    font-weight: 700;
    color: var(--color-text-body);
    text-align: left;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  main.cert-apply-step table.grid:not(.cert-issue__grid) td:nth-child(2)::before {
    content: none;
  }
  main.cert-apply-step table.grid:not(.cert-issue__grid) td:nth-child(2) > .cell-content {
    display: block;
    flex: 1 1 0%;
    min-width: 0;
    text-align: left;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  /* 승인여부 배지: 제목 오른쪽 */
  main.cert-apply-step table.grid:not(.cert-issue__grid) td:nth-child(4) {
    order: -1;
    width: auto !important;
    flex: 0 0 auto;
    border-bottom: none;
    padding: var(--spacing-sm) var(--spacing-sm) var(--spacing-sm) 0;
  }
  main.cert-apply-step table.grid:not(.cert-issue__grid) td:nth-child(4)::before {
    content: none;
  }
  /* 근무기간·등급: 구분선 없는 라벨:값 본문 그룹 */
  main.cert-apply-step table.grid:not(.cert-issue__grid) td:nth-child(3),
  main.cert-apply-step table.grid:not(.cert-issue__grid) td:nth-child(5) {
    border-bottom: none;
    padding: 0 var(--spacing-sm);
  }
  main.cert-apply-step table.grid:not(.cert-issue__grid) td:nth-child(3) {
    order: 2;
    padding-top: var(--spacing-xs);
    padding-bottom: var(--spacing-xs);
  }
  main.cert-apply-step table.grid:not(.cert-issue__grid) td:nth-child(5) {
    order: 3;
    padding-bottom: var(--spacing-sm);
  }
  /* 라벨:값 텍스트 — 다른 카드뷰 목록과 동일(16px Regular 라벨 #767676) */
  main.cert-apply-step table.grid:not(.cert-issue__grid) td::before {
    font-weight: 400;
    color: var(--color-text-tertiary, #767676);
  }
}

/* ---------- 2·3단계 선택 표 모바일 카드뷰 ---------- */
/* 위 1단계 규칙은 클래스 없는 table.grid 만 잡아 실화면 .cert-issue__grid 는 `:not()` 에 걸려 빠진다.
   열 위치가 시안(5열)과 달라 규칙을 합치지 않는다 - 실화면은 2번째가 제목, 배지는 2단계에만 있다.
   .cell-content 는 퍼블 design.js 가 라벨을 뺀 나머지를 감싸며 만든다(data-label 도 같이 붙인다). */
@media (max-width: 900px) {
  main.cert-apply-step table.cert-issue__grid tbody tr {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    /* 카드 전체가 선택 대상이다(certIssueForm.jsp 의 행 클릭 토글) */
    cursor: pointer;
    border-color: var(--color-border-default);
    border-radius: var(--radius-md);
    padding: 0 0 var(--spacing-sm);
  }
  main.cert-apply-step table.cert-issue__grid tbody td {
    height: auto;
  }
  /* 라벨:값 본문 - 구분선 없이 쌓는다. 카드 머리(체크박스·제목·배지)는 아래에서 다시 잡는다 */
  main.cert-apply-step table.cert-issue__grid tbody td[data-label] {
    border-bottom: none;
    padding: var(--spacing-2xs) var(--spacing-sm);
  }
  /* 체크박스 - 제목 왼쪽. 빈 th 에서 온 라벨이 없어 ::before 도 없다 */
  main.cert-apply-step table.cert-issue__grid tbody td:first-child {
    order: -3;
    width: auto !important;
    flex: 0 0 auto;
    border-bottom: none;
    padding: var(--spacing-sm) 0 var(--spacing-sm) var(--spacing-sm);
  }
  /* 제목(근무처·종목 및 등급·교육ᆞ훈련명·학교명) - 네 표 모두 2번째 열이다 */
  main.cert-apply-step table.cert-issue__grid tbody td:nth-child(2) {
    order: -2;
    width: auto !important;
    flex: 1 1 0%;
    min-width: 0;
    border-bottom: none;
    padding: var(--spacing-sm);
    font-size: var(--font-size-18);
    font-weight: 700;
    color: var(--color-text-body);
    text-align: left;
  }
  main.cert-apply-step table.cert-issue__grid tbody td:nth-child(2)::before {
    content: none;
  }
  main.cert-apply-step table.cert-issue__grid tbody td:nth-child(2) > .cell-content {
    display: block;
    text-align: left;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  /* 인증여부 배지 - 제목 오른쪽. 2단계 표에만 있다(3단계 세 표는 마지막 열도 일반 값이다) */
  #ctStep2 table.cert-issue__grid tbody td:nth-child(6) {
    order: -1;
    width: auto !important;
    flex: 0 0 auto;
    border-bottom: none;
    padding: var(--spacing-sm) var(--spacing-sm) var(--spacing-sm) 0;
  }
  #ctStep2 table.cert-issue__grid tbody td:nth-child(6)::before {
    content: none;
  }
  /* 라벨:값 텍스트 - 다른 카드뷰 목록과 동일(16px Regular 라벨 #767676) */
  main.cert-apply-step table.cert-issue__grid tbody td::before {
    font-weight: 400;
    color: var(--color-text-tertiary, #767676);
  }
  /* [AI-GENERATED] 작성일: 2026-09-14 | 수정일: 2026-09-14
     구분선 - 경력(2단계)은 담당업무 설명 줄 아래, 확장경력(3단계)은 머리(체크박스·제목) 아래에 긋는다. */
  #ctStep2 table.cert-issue__grid tbody td:nth-child(4) {
    order: 0;
    width: 100% !important;
    border-bottom: 1px solid var(--color-border-light);
    padding: var(--spacing-xs) var(--spacing-sm) var(--spacing-sm);
    font-size: var(--font-size-body-m);
    color: var(--color-text-body);
  }
  #ctStep2 table.cert-issue__grid tbody td:nth-child(4)::before {
    content: none;
  }
  #ctStep2 table.cert-issue__grid tbody td:nth-child(4) > .cell-content {
    display: block;
    text-align: left;
  }
  #ctStep2 table.cert-issue__grid tbody td:nth-child(3) {
    order: 3;
    padding-top: var(--spacing-sm);
  }
  #ctStep2 table.cert-issue__grid tbody td:nth-child(5) {
    order: 4;
  }
}

/* ---------- 3단계 발급 요약 카드 ---------- */
/* 맞춤형 사용처 N곳이면 발급 건수만큼 카드가 생긴다 */
.cert-issue__summary {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-sm, 10px);
  margin-top: var(--spacing-xl);
}
.cert-issue__summary-card {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-sm, 10px);
  padding: 14px 18px;
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md, 12px);
  background: var(--color-white, #fff);
}
.cert-issue__summary-card p {
  margin: 0;
  font-size: var(--font-size-15);
  color: var(--color-text-body);
}
.cert-issue__summary-card p strong {
  font-weight: 600;
}

/* ---------- 3단계 인라인 양식 미리보기 ---------- */
/* overflow-x 는 필수다. 조각이 A4 폭 194mm(약 733px) 고정이라 화면이 더 좁으면 iframe 내부가 잘린다.
   iframe 높이는 로드 후 ctFitTmplFrame() 이 맞춘다(여기 값은 로드 전 임시 높이). */
.ct-preview-box {
  margin-top: var(--spacing-xl);
}
/* [PDF로 미리보기] 버튼을 제목 옆에 두는 헤더 행 */
.cert-issue__preview-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-sm, 10px);
  margin-bottom: var(--spacing-sm, 10px);
}
.cert-issue__preview-head .cert-issue__preview-title {
  margin-bottom: 0;
}
.cert-issue__preview-title {
  margin: 0 0 var(--spacing-sm, 10px);
  font-size: var(--font-size-17);
  font-weight: 600;
  color: var(--color-text-heading);
}
.ct-preview-scroll {
  overflow-x: auto;
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md, 12px);
  background: var(--color-white, #fff);
}
.ct-preview-frame {
  display: block;
  width: 100%;
  min-width: 740px;
  height: 600px;
  border: 0;
  background: var(--color-white, #fff);
}

/* ---------- 단계 표시(timeline) 레거시 제거 ---------- */
/* 데코레이터가 계속 싣는 kwmf-mockup.css 의 옛 timeline 이 .done/.current 의 background·font-weight 를
   속성 단위로 남긴다(mockup.css 는 color 만 다시 선언). 같은 특이도라 이 파일이 뒤에 실려 이긴다. */
.timeline .step.done,
.timeline .step.current {
  background: none;
  border: none;
  font-weight: 500;
}
/* 옛 규칙의 세로 구분선 잔재. 퍼블 커넥터는 ::before 다 */
.timeline .step:not(:last-child)::after {
  content: none;
}

/* ---------- 1단계 담당업무 열 ---------- */
/* 담당업무는 주관식이라 길면 표 전체를 밀어낸다. td 에 max-width 는 auto 레이아웃에서 무시되므로
   셀 자체에 걸고 한 줄로 자른다(값이 텍스트 노드라 감쌀 span 이 없다). */
.cert-issue__grid td.cert-issue__ellipsis {
  max-width: 260px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (max-width: 900px) {
  .cert-issue__grid td.cert-issue__ellipsis {
    max-width: none;
    white-space: normal;
  }
}
/* ---------- 2단계 확장경력 카드 ---------- */
/* 카드 안에 표가 들어간다. 퍼블 .card 는 본문 여백이 없어 hint 와 표가 붙는다. */
main.cert-apply-step .tab-panel .card .hint + .table-wrap {
  margin-top: 12px;
}
main.cert-apply-step .tab-panel .card .empty-state {
  margin-top: 12px;
}

/* =========================================================
   [FR-MY-002] 내정보관리
   ========================================================= */
/* 퍼블 원본은 배치를 #tabset1-0 에 걸고 .form-row 를 :nth-child(1)~(6)으로 못 박는다.
   이 화면은 시안에 없는 항목이 더 많아 그 고정을 쓸 수 없다 - #tabset1-0 은 쓰지 않는다.
   구조(섹션 2열 그리드 + .form-grid display:contents)는 원본을 따르고, 프로필 사진만 명시 배치한 뒤
   나머지는 자동배치에 맡긴다. 컴포넌트 자체는 원본 그대로 쓴다. */
.my-info > form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 40px;
  row-gap: var(--spacing-xl);
  align-content: start;
}
.my-info .form-grid {
  display: contents;
}
/* 폼 폭 전체를 쓰는 것들 - 자동배치가 남은 칸에 끼워 넣지 않도록 한 줄을 통째로 차지시킨다.
   .section-title 을 빼면 좌측 칸만 차지해 바로 뒤 입력 항목이 우측 칸으로 밀린다(1296px 이상). */
.my-info > form > .section-title,
.my-info > form > .my-info__withdraw-link,
.my-info > form > .btn-row {
  grid-column: 1 / -1;
}

/* 입력줄: 인풋 + 옆 버튼 */
.my-info .form-row__control {
  width: 100%;
  min-height: 44px;
  gap: var(--spacing-xs, 8px);
}
.my-info .form-row__control > input:not([type="radio"]):not([type="checkbox"]) {
  flex: 1 0 0;
  min-width: 40px;
}
.my-info .form-row__control > .btn.btn-sm {
  height: 44px;
  padding: 0 20px;
  font-size: var(--font-size-15);
  font-weight: 600;
  border-radius: var(--radius-xs);
  flex: none;
}
/* 퍼블은 :disabled 만 회색으로 눌러 준다. 본인인증으로만 갱신되는 readonly 항목도
   "여기는 못 고친다"가 눈으로 구분돼야 한다. */
.my-info .form-row input[readonly] {
  background: var(--color-bg-subtle);
  color: var(--color-text-secondary);
  cursor: default;
}

/* 프로필 사진 - 이 화면에서 자리를 명시하는 유일한 항목. 나머지는 이 블록을 피해 자동배치된다. */
.my-info > form > .profile-photo-row {
  grid-column: 2;
  grid-row: 1 / span 2;
  justify-self: end;
  align-self: start;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 140px;
}
.my-info .profile-photo-row__field .form-row {
  margin-bottom: 0;
}
.my-info .profile-photo-row__field .form-row__control {
  justify-content: center;
  min-height: 0;
}
/* 용량·확장자 안내는 140px 컬럼 안에서 두 줄로 접히므로 가운데로 맞춘다 */
.my-info .profile-photo-row__field .form-hint {
  text-align: center;
}
/* 원본 아이콘은 시안 실루엣 SVG 를 상자 밖으로 흘려보내는 절대배치다.
   여기 들어가는 건 회원이 올린 실제 사진이라 상자에 맞춰 채운다. */
.my-info .profile-photo-row__placeholder-icon {
  position: static;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* 선택한 파일명이 들어가는 자리(inUtilFile.js checkProfileImg 가 채운다) */
.my-info .profile-photo-row__field .file_list {
  margin: var(--spacing-2xs, 6px) 0 0;
  padding: 0;
  list-style: none;
  font-size: var(--font-size-13);
  color: var(--color-text-secondary);
  text-align: center;
  word-break: break-all;
}

/* 인재풀 등록 여부 카드 */
.my-info .my-info__talentpool {
  background: var(--color-primary-bg);
  border-radius: var(--radius-sm);
  padding: var(--spacing-xl) var(--spacing-2xl);
  gap: var(--spacing-md, 12px);
}
/* 인재풀 동의 원문 박스 - 토글을 Y로 올렸을 때만 펼친다 */
.my-info__consent {
  display: none;
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-sm);
  padding: 24px 24px;
  background: var(--color-white, #fff);
}
.my-info__consent-title {
  margin-bottom: 8px;
  font-size: var(--font-size-17);
  font-weight: 600;
  color: var(--color-text-heading);
}
.my-info__consent table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 10px;
  font-size: var(--font-size-15);
  color: var(--color-text-body);
}
.my-info__consent td {
  padding: 4px 8px 4px 0;
  vertical-align: top;
}
/* 문안이 관리자 동의서 관리(PG03)의 에디터 HTML(표 + 안내문단)이라 키 칸에 클래스를 달 수 없다 -
   키 칸은 th, 안내문단은 p 로 받는다. */
.my-info__consent th {
  width: 120px;
  padding: 4px 8px 4px 0;
  vertical-align: top;
  text-align: left;
  font-weight: 400;
  color: var(--color-text-secondary);
}
.my-info__consent-doc p {
  margin: 0 0 10px;
  font-size: var(--font-size-13);
  color: var(--color-text-secondary);
}
.my-info__consent label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--font-size-15);
  font-weight: 400;
  color: var(--color-text-heading);
  cursor: pointer;
}

/* ---------- 회원가입 2화면(joinForm3 STEP3 / socialJoinForm2 STEP2) ----------
   가입 카드(step-card 안쪽 668px)에서는 위 .my-info__* 의 칸 폭 캡(180px)이 맞지 않아 [추가] 버튼이
   다음 줄로 밀린다 - 고정 px 대신 flex:1 1 0 으로 버튼이 쓰는 만큼 남기고 4칸이 나눠 갖게 한다. */
.jf-jobtype-picker,
.sj-job-picker {display:flex; gap:8px; align-items:center; flex-wrap:nowrap;}
.jf-jobtype-cascade,
.sj-job-cascade {display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:6px; flex:1 1 0; min-width:0;}
.jf-jobtype-cascade select {width:100%; min-width:0;}
/* 소셜가입은 퍼블 폼 컴포넌트가 붙기 전 화면이라 셀렉트 겉모양을 직접 갖는다 */
.sj-job-cascade select {border:1px solid var(--line); border-radius:7px; padding:9px 10px; font-size:12.5px; background:#fff; font-family:inherit; width:100%; min-width:0;}
.sj-job-cascade select:disabled {background:#F1F3F7; color:#98A2B3;}
@media (max-width:900px) {
  .jf-jobtype-picker, .sj-job-picker {flex-wrap:wrap;}
  .jf-jobtype-cascade, .sj-job-cascade {flex:1 1 100%; grid-template-columns:repeat(2,minmax(0,1fr));}
}
/* line-height:normal 이 필요한 이유: 스킨 전역 button{line-height:0} 이 높이를 0 으로 만든다 */
.jf-jobtype-add {line-height:normal; border:1px solid #1D5FD6; background:#1D5FD6; color:#fff; border-radius:7px; padding:9px 16px; font-size:13px; font-weight:700; cursor:pointer; white-space:nowrap;}
.jf-jobtype-add:hover {background:#2F6FE4;}
.sj-job-add {line-height:normal; border:1px solid var(--blue-600); background:var(--blue-600); color:#fff; border-radius:7px; padding:9px 16px; font-size:12.5px; font-weight:700; cursor:pointer; white-space:nowrap;}
/* 4칸 셀렉트에서 잘린 분류명을 아래 한 줄로 펼친다. .form-hint 보다 진하게 - 안내가 아니라 고른 값이다. */
.jf-picker-path {display:block; margin:8px 0 0; font-size:var(--font-size-13); line-height:1.5; color:var(--color-primary); word-break:keep-all;}
.jf-picker-path:empty {display:none;}

/* 칩 레시피는 아래 .my-info__jobtype-chips 와 같은 값이다 - 세 화면의 직종 UI 를 통일한다 */
.jf-jobtype-chips,
.sj-job-select {display:flex; flex-wrap:wrap; gap:8px; margin:10px 0 0; padding:0; list-style:none;}
.jf-jobtype-chips li,
.sj-job-chip {display:inline-flex; align-items:center; gap:6px; padding:5px 6px 5px 12px; border:1px solid var(--color-primary); border-radius:var(--radius-full); background:var(--color-primary-bg); font-size:var(--font-size-13); color:var(--color-primary);}
.jf-jobtype-chips button,
.sj-job-chip button {display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto; width:18px; height:18px; padding:0; border:none; border-radius:50%; background:var(--color-primary); color:#fff; font-size:12px; line-height:1; cursor:pointer;}
.sj-step-card {margin-bottom:16px;}
.sj-inline-row {display:flex; gap:8px; align-items:center;}
/* min-width:0 이 없으면 744px 이하에서 우편번호 칸이 [주소검색] 버튼과 함께 카드 밖으로 넘친다 */
.sj-inline-row select, .sj-inline-row input {flex:1; min-width:0;}
/* 전역 .btn-sm 의 height:auto 가 .btn 의 44px 보다 나중에 정의돼 이긴다 - 옆 인풋과 높이를 맞춘다 */
.sj-inline-row .btn.btn-sm {height:44px; padding:0 20px; font-size:var(--font-size-15); font-weight:600; border-radius:var(--radius-xs); flex:none;}
/* 위 .my-info .my-info__talentpool 은 내정보 스코프다 - 가입 화면에는 .my-info 조상이 없다 */
.my-info__talentpool {background:var(--color-primary-bg); border-radius:var(--radius-sm); padding:var(--spacing-xl) var(--spacing-2xl);}
/* 가입 화면은 바로 위에 "인재풀 등록 여부" 라벨이 있어 토글 ON 라벨이 같은 말을 두 번 한다 - 지운다.
   내정보는 시안 그대로 두므로 .signup-wrap 으로만 좁힌다. :has() 조건을 그대로 다는 이유는 특이도다 -
   빼면 mockup.css 원본이 이긴다. */
.signup-wrap .my-info__talentpool .form-row__control:has(> .toggle-switch input:checked)::after {content:none;}
/* 가입 화면은 동의 박스 바깥 여백이 더 필요하다 */
.my-info__consent {margin-top:14px;}

/* 직종 4단 연동 + 선택칩 - 퍼블에 대응 컴포넌트가 없다.
   공용 .jobtype-cascade 는 4칸 그리드라 [추가] 버튼과 한 줄로 세우려면 감싸는 줄이 필요하다. */
.my-info__jobtype-picker {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
/* 셀렉트가 1fr 로 늘어나면 4칸이 줄을 다 먹어 [추가] 가 다음 줄로 밀린다.
   칸 폭을 세분류명이 들어가는 선(180px)에서 끊어 버튼 자리를 남긴다. */
.my-info__jobtype-picker .jobtype-cascade {
  flex: 0 1 auto;
  min-width: 0;
  grid-template-columns: repeat(4, minmax(0, 180px));
  gap: 6px;
}
.my-info__jobtype-picker .jobtype-cascade select {
  padding-left: 8px;
  padding-right: 8px;
}
/* 2단으로 접히는 폭에서는 버튼을 다음 줄로 내려보낸다 */
@media (max-width: 900px) {
  .my-info__jobtype-picker .jobtype-cascade {
    flex: 1 1 auto;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.my-info__jobtype-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
}
.my-info__jobtype-chips li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 6px 5px 12px;
  border: 1px solid var(--color-primary);
  border-radius: var(--radius-full);
  background: var(--color-primary-bg);
  font-size: var(--font-size-13);
  color: var(--color-primary);
}
/* 직종 칩은 대>중>소분류를 작은 회색 경로로 위에, 세분류를 제목처럼 아래에 둔다.
   NCS 칩(#miNcsChips)도 같은 li 를 쓰므로 안쪽 클래스에만 건다. */
.my-info__jobtype-chips .my-info__jobtype-chip {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 2px;
  min-width: 0;
  /* li 패딩은 한 줄 칩 기준이라 2단 글자가 테두리에 붙는다. 안쪽에서 더 띄운다. */
  padding: 5px 6px 5px 4px;
}
.my-info__jobtype-chip__path {
  order: 1;
  font-size: 12px;
  line-height: 1.3;
  color: var(--color-gray-500, #666);
}
.my-info__jobtype-chip__name {
  order: 0;
  margin-right: 5px;
  font-size: var(--font-size-15);
  font-weight: 600;
  line-height: 1.3;
  color: var(--color-gray-900, #111);
}
/* 모바일에서는 폭이 좁아 경로가 여러 줄로 접힌다. 세분류만 남긴다. */
@media (max-width: 744px) {
  .my-info__jobtype-chip__path {
    display: none;
  }
}
/* 스킨 전역 button{line-height:0} 이 &times; 를 아래로 민다. flex 정렬로 의존을 끊는다. */
.my-info__jobtype-chips button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--color-primary);
  color: var(--color-white, #fff);
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
}

/* 회원탈퇴 링크 - 시안은 모달이지만 이 프로젝트는 LNB 에 별도 메뉴가 있어 withdraw 화면으로 보낸다 */
.my-info .my-info__withdraw-link {
  margin-top: var(--spacing-md, 12px);
}

/* 태블릿/모바일: 2열 그리드를 세로 한 줄로 편다(퍼블 원본과 같은 1295px 기준).
   grid 를 유지하면 프로필 사진의 grid-column/grid-row 가 남아 우측에 붙는다 - flex 에서는 무시된다. */
@media (max-width: 1295px) {
  .my-info > form {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--spacing-xl);
  }
  .my-info > form > .profile-photo-row {
    align-self: flex-start;
  }
}

/* =========================================================
   [FR-CS-005 / FR-COM-010] 공지사항 상세 · 자료실 상세
   ========================================================= */
/* 두 화면은 시안의 같은 .notice-detail 컴포넌트를 쓴다. 여기 있는 건
   시안이 다루지 않은 실제 데이터 사정 세 가지뿐이다. */

/* ① 첨부는 시안이 한 건만 그린다. 두 게시판 모두 여러 건이 올라온다. */
.notice-detail__attachments {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs, 8px);
}
/* ② 시안 첨부 상자는 표시만 한다. 실제로는 눌러서 받아야 하므로 a 로 만든다. */
a.notice-detail__attachment {
  text-decoration: none;
  cursor: pointer;
  transition:
    border-color 0.15s,
    background-color 0.15s;
}
a.notice-detail__attachment:hover {
  border-color: var(--color-primary);
  background: var(--color-primary-bg);
}
a.notice-detail__attachment:hover .notice-detail__attachment-name {
  color: var(--color-primary);
}
/* 퍼블은 파일명에 white-space:nowrap 만 걸어 둬서 긴 이름이 상자 밖으로 흘러나간다 */
.notice-detail__attachment-name {
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

/* ③ 본문은 CKEditor 산출물이라 자체 font-size 를 달고 온다. 퍼블 __body 값(16px/1.5)으로 맞춘다. */
.notice-detail__body .ck-content,
.notice-detail__body .ck-content * {
  font-size: inherit;
}
.notice-detail__body .ck-content img {
  max-width: 100%;
  height: auto;
}

/* =========================================================
   [FR-JOB-004] 일자리공고 상세
   ========================================================= */
/* 시안이 공지사항 상세와 같은 .notice-detail 컴포넌트를 쓴다. 여기 있는 건 이 화면만의 사정 두 가지다.
   첨부(다건·다운로드 상자)는 위 [FR-CS-005 / FR-COM-010] 보강분을 그대로 공유한다. */

/* ① 배지가 세 상태다. 퍼블 .notice-detail__badge 는 마감(빨강) 한 벌뿐이라 나머지 둘만 색을 덮는다
   (치수·라운드는 원본 값). 값은 목록(.jobnotice__badge-open / .badge-blue)과 같은 뜻으로 맞춘다. */
.notice-detail__badge--open {
  background: var(--color-white);
  border: 1px solid var(--color-status-warning);
  color: var(--color-status-warning);
}
.notice-detail__badge--ing {
  background: var(--color-primary-bg);
  color: var(--color-primary);
}
/* 마감임박 - 목록의 .badge-amber 와 같은 값 */
.notice-detail__badge--imminent {
  background: var(--amber-bg);
  color: var(--amber);
}

/* ② 모집 상세 정보(근무형태·급여·근무기간 …). 퍼블에 대응 컴포넌트가 없어 토큰으로만 짠다.
   .notice-detail 이 gap:2xl 로 자식을 벌리므로 바깥 여백을 따로 주지 않는다. */
.notice-detail__info {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--spacing-sm) var(--spacing-xl);
  width: 100%;
  margin: 0;
  padding: var(--spacing-lg);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-sm);
  background: var(--color-bg-subtle);
}
.notice-detail__info-item {
  display: flex;
  gap: var(--spacing-sm);
  align-items: flex-start;
  min-width: 0;
}
.notice-detail__info-item dt {
  flex: 0 0 88px;
  margin: 0;
  font-size: var(--font-size-14);
  font-weight: 600;
  line-height: 1.5;
  color: var(--color-text-tertiary);
}
.notice-detail__info-item dd {
  flex: 1;
  min-width: 0;
  margin: 0;
  font-size: var(--font-size-15);
  font-weight: 400;
  line-height: 1.5;
  color: var(--color-text-body);
  word-break: break-all;
}

@media (max-width: 744px) {
  .notice-detail__info {
    grid-template-columns: 1fr;
    padding: var(--spacing-md);
  }
}

/* 본문이 비어 있을 때의 안내 문구. 퍼블 __body 는 본문 글자색만 가져 안내와 본문이 구분되지 않는다 */
.notice-detail__empty {
  color: var(--color-text-tertiary);
}

/* 설문 응답 화면의 [임시저장]을 [제출] 옆에 붙인다. 퍼블 .btn-row:has(.btn-row__back) 은
   space-between 이라 버튼이 셋이면 가운데가 밀려난다 - [목록]만 왼쪽에 고정한다.
   같은 main.poll-list 를 쓰는 설문 상세는 건드리지 않도록 :has() 로 응답 화면만 고른다. */
main.poll-list:has(.survey-response) .btn-row {
  justify-content: flex-end;
}
main.poll-list:has(.survey-response) .btn-row .btn-row__back {
  margin-right: auto;
}

/* =========================================================
   통합검색 오버레이 (user_globalsearch.jsp)
   기본 숨김값은 원본 -210px 대신 -2000px 을 쓴다 - 콘텐츠 높이와 무관하게 가려야 한다.
   사용 토큰(--blue-*, --surface, --line, --text-*, --gray-bg, --red)은 web1 :root 에 있다.
   ========================================================= */
.total-search-div{background:var(--blue-50);padding:50px 0 45px;width:100%;position:relative;}
.total-search__inner{width:860px;margin:0 auto;position:relative;}
.total-search__section{display:flex;}
.total-search__top{height:62px;border:1px solid var(--blue-600);border-radius:15px;box-shadow:1px 1px 20px rgba(29,95,214,.1);background:var(--surface);box-sizing:border-box;padding:0 20px 0 10px;display:flex;align-items:center;flex:1;}
.total-search__top.active{border:0;box-shadow:1px 8px 24px rgba(29,95,214,.2);border-radius:15px 15px 0 0;}
.total-search__input{flex:1;display:flex;align-items:center;margin-right:25px;}
.total-search__input__left{flex:1;display:flex;align-items:center;}
.total-search__input__right{display:flex;align-items:center;}
.total-search__input input[type="text"]{border:none;flex:1;font-size:18px;font-weight:600;color:var(--blue-600);background:none;}
.total-search__input input[type="text"]::placeholder{color:var(--text-400);font-weight:400;}
.total-search__input input[type="text"]:focus{outline:none;}
.total-search__delete{width:12px;height:12px;background:url(../../../files/web1/images/common/total-search_bg2.png) no-repeat left top;background-size:12px 12px;display:none;}
.total-search__btn{width:26px;height:26px;background:url(../../../files/web1/images/common/total-search_bg1.png) no-repeat left top;background-size:26px 26px;}
.total-search-div .btn-align__right{margin:0 auto !important;display:flex;flex-direction:row-reverse;gap:4px;}
.popul-search{display:flex;margin:20px 0 0;align-items:flex-start;padding:0 20px;}
.popul-search__left{display:flex;margin:5px 30px 0 0;align-items:center;}
.popul-search__left::before{content:'';width:17px;height:16px;background:url(../../../files/web1/images/common/total-search_bg3.png) no-repeat left top;background-size:17px 16px;margin-right:10px;}
.popul-search__left strong{color:var(--text-900);font-weight:600;}
.popul-search__list{display:flex;flex-wrap:wrap;gap:10px 32px;flex:1;}
.popul-search .popul-search__list{gap:10px 8px;}
.popul-search .popul-search__list li a{background:var(--blue-500);padding:4px 8px;border-radius:100px;color:#fff;}
.popul-search__list li{display:flex;align-items:center;}
.popul-search__list li a{color:var(--text-500);font-size:15px;}
.popul-search__list li .delete{padding:8px;display:block;border-radius:4px;background:var(--gray-bg) url(../../../files/web1/images/common/bookmark-close2.png) no-repeat center center / 6px auto;margin-left:5px;}
.lately-search{display:flex;margin:20px 0 0;align-items:flex-start;border-top:1px solid var(--line);padding:20px 20px 0;}
.lately-search__left{display:flex;margin:5px 30px 0 26px;align-items:center;}
.total-search__detail{padding:30px 40px;background:var(--surface);border-radius:15px;box-shadow:5px 10px 10px rgba(29,95,214,.1);margin-top:10px;box-sizing:border-box;position:relative;display:none;}
.total-search__detail .btn-align{margin:20px 0 0;border-top:1px solid var(--line);padding:20px 0 0;}
.total-search__detail .btn-reset{font-size:16px;}
.total-search__dl{display:flex;align-items:center;padding:10px 0;}
.total-search__dt{width:105px;margin:1px 0 0;font-size:16px;font-weight:600;color:var(--text-900);}
.total-search__dd{flex:1;display:flex;gap:10px;align-items:center;}
.total-search__dd .input-align{display:flex;gap:30px;margin-top:0;}
.total-search__dd .input-align li{margin:0 !important;}
.total-search__year{display:flex;}
.total-search__year li{margin-right:-1px;position:relative;z-index:0;}
.total-search__year li a{min-width:70px;height:42px;padding:0 5px;display:flex;align-items:center;justify-content:center;border:1px solid var(--line);box-sizing:border-box;font-size:16px;}
.total-search__year li:first-child a{border-radius:5px 0 0 5px;}
.total-search__year li:last-child a{border-radius:0 5px 5px 0;}
.total-search__year li.on{z-index:1;}
.total-search__year li.on a{border:1px solid var(--blue-600);background:var(--blue-50);color:var(--blue-600);}
.total-search__detail__close{position:absolute;right:30px;top:20px;background:url(../../../files/web1/images/common/total_search_detail_close.png) no-repeat left top;width:15px;height:15px;background-size:15px 15px;display:block;}
.search-auto{border:1px solid var(--blue-600);position:absolute;left:0;top:62px;width:60%;background:var(--surface);border-radius:15px;z-index:2;}
.search-auto.active{border:0;box-shadow:1px 16px 16px rgba(29,95,214,.2);border-radius:0 0 15px 15px;top:62px;width:calc(100% - 134px);}
.search-auto .search-auto__content{padding:12px 0;}
.search-auto ul li a{display:block;padding:5px 20px;font-size:15px;}
.search-auto ul li a strong{font-weight:600;font-size:15px;color:var(--red);}
.search-auto ul li a:hover{background:var(--blue-50);}
.search-auto .search-auto__btn{border-top:1px solid var(--line);padding:10px 20px;display:flex;align-items:center;gap:10px;}
.search-auto .search-auto__btn a{font-size:14px;display:inline-flex;align-items:center;}
.search-auto .search-auto__btn a:last-child::before{content:'';display:block;width:1px;height:10px;background:var(--line);margin:0 10px 0 0;}
.search-auto .search-auto__btn a:hover{text-decoration:underline;}
.search-auto .search-auto__btn a.active{color:var(--blue-600);font-weight:600;}
@media (max-width:900px){
  .total-search-div{padding:30px 16px;box-sizing:border-box;}
  .total-search__inner{width:100%;margin:0 auto;}
  .total-search__section{flex-wrap:wrap;}
  .total-search__top{height:42px;border-radius:10px;padding:0 15px 0 20px;width:100%;}
  .total-search__input{margin-right:0;}
  .total-search__input__left{margin-right:20px;}
  .total-search__input__right{display:none;}
  .total-search__input input[type="text"]{flex:unset;font-size:15px;width:95%;}
  .total-search__btn{width:19px;height:19px;background-size:19px 19px;}
  .popul-search{margin:15px 0 0;}
  .popul-search__left{margin:1px 15px 0 0;}
  .popul-search__list{gap:6px 10px;}
  .popul-search__list li a{font-size:14px;}
  .total-search__detail{padding:30px 20px;border-radius:10px;}
  .total-search__dl{padding:15px 0;flex-wrap:wrap;}
  .total-search__dt{width:100%;margin:0;font-size:15px;}
  .total-search__dd{flex:unset;flex-wrap:wrap;margin-top:15px;}
  .total-search__dd .input-align{gap:20px;flex-wrap:unset;width:100%;}
  .total-search__year li a{min-width:70px;height:38px;font-size:15px;}
  .total-search__detail__close{right:20px;top:20px;}
  .search-auto{left:0;top:45px;width:100%;border-radius:15px;}
  .search-auto.active{top:42px;width:100%;}
}

/* 신청절차 안내 - 탭 자체는 공용 .tabs/.tab-btn/.tab-panel 재사용.
   .tab-panel 은 공용이라 .apply-guide 자식으로 스코프해 .tabs 와의 간격만 상쇄한다. */
.apply-guide__panel {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-lg);
  width: 100%;
  padding: 50px;
  background: var(--color-bg-card);
  border-radius: var(--radius-lg);
}
.apply-guide__callout {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-xs);
  width: 100%;
  padding: var(--spacing-sm) var(--spacing-md);
  background: var(--color-blue-50);
  border-radius: var(--radius-sm);
}
.apply-guide__callout-icon {
  flex-shrink: 0;
  width: 23px;
  height: 23px;
}
.apply-guide__callout-text {
  flex: 1 0 0;
  min-width: 0;
  font-size: var(--font-size-body-m);
  line-height: var(--line-height-base);
  color: var(--color-blue-500);
}
.apply-guide__callout-text p {
  margin: 0;
}
.apply-guide__step {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-2xl);
  width: 100%;
  padding: var(--spacing-2xl) var(--spacing-3xl);
  background: var(--color-bg-page);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  opacity: 0;
  transform: translateY(24px);
  animation: apply-guide-step-slide-in 0.5s ease forwards;
}
.apply-guide__panel > .apply-guide__step:nth-child(2) {
  animation-delay: 0s;
}
.apply-guide__panel > .apply-guide__step:nth-child(3) {
  animation-delay: 0.15s;
}
.apply-guide__panel > .apply-guide__step:nth-child(4) {
  animation-delay: 0.3s;
}
.apply-guide__panel > .apply-guide__step:nth-child(5) {
  animation-delay: 0.45s;
}
@keyframes apply-guide-step-slide-in {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes docs-guide-item-slide-in {
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
.apply-guide__step-icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
  width: 90px;
  height: 80px;
}
.apply-guide__step-icon img {
  height: 60px;
}
.apply-guide__step-icon--1 img {
  width: 68px;
}
.apply-guide__step-icon--2 img {
  width: 66px;
}
.apply-guide__step-icon--3 img {
  width: 63px;
}
.apply-guide__step-icon--4 img {
  width: 57px;
}
.apply-guide__step-icon--cert1 img {
  width: 68px;
}
.apply-guide__step-icon--cert2 img {
  width: 68px;
}
.apply-guide__step-icon--cert3 img {
  width: 57px;
}
.apply-guide__step-icon--cert4 img {
  width: 60px;
  height: 76px;
}
.apply-guide__status-single {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-2xs);
  flex: 1 0 0;
  min-width: 0;
}
.apply-guide__status-desc-group p {
  margin: 0;
}
.apply-guide__step-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  flex: 1 0 0;
  min-width: 0;
}
.apply-guide__step-head {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
}
.apply-guide__step-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  background: var(--color-primary);
  border: 2px solid var(--color-primary);
  border-radius: var(--radius-full);
  font-weight: 700;
  font-size: var(--font-size-body-l);
  line-height: var(--line-height-relaxed);
  color: var(--color-bg-page);
  text-align: center;
}
.apply-guide__step-title {
  font-weight: 700;
  font-size: var(--font-size-heading-h3);
  line-height: var(--line-height-snug);
  color: var(--color-text-heading);
}
.apply-guide__step-desc {
  width: 100%;
  font-weight: 400;
  font-size: var(--font-size-body-m);
  line-height: var(--line-height-base);
  color: var(--color-text-body);
}
.apply-guide__status {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-4xl);
  width: 100%;
  padding: var(--spacing-2xl);
  background: var(--color-bg-page);
  border: 1px solid var(--color-primary-border-light);
  border-radius: var(--radius-lg);
}
.apply-guide__status-head {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2xs);
  flex-shrink: 0;
  width: 260px;
}
.apply-guide__status-title {
  font-weight: 700;
  font-size: var(--font-size-heading-h3);
  line-height: var(--line-height-snug);
  color: var(--color-text-body);
}
.apply-guide__status-desc {
  font-weight: 400;
  font-size: var(--font-size-body-s);
  line-height: var(--line-height-base);
  color: var(--color-text-tertiary);
}
.apply-guide__status-divider {
  align-self: stretch;
  flex-shrink: 0;
  width: 0;
  border-left: 1px dashed var(--color-primary-border-light);
}
.apply-guide__status-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-md);
  flex: 1 0 0;
  min-width: 0;
}
.apply-guide__status-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 6px;
}
.apply-guide__status-arrow {
  font-size: 13px;
  color: var(--color-text-tertiary);
}
.apply-guide__status-notes {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.apply-guide__status-note {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--font-size-body-s);
  line-height: var(--line-height-base);
  color: var(--color-text-secondary);
}
.apply-guide__links {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-lg);
  width: 100%;
  margin-top: var(--spacing-2xl);
}
.apply-guide__link {
  display: flex;
  flex: 1 0 0;
  min-width: 0;
  align-items: center;
  gap: var(--spacing-md);
  padding: var(--spacing-2xl);
  border-radius: var(--radius-lg);
  text-decoration: none;
}
.apply-guide__link--primary {
  background: var(--color-primary-bg);
}
.apply-guide__link--success {
  background: var(--color-status-success-bg);
}
.apply-guide__link--warning {
  background: var(--color-status-warning-bg);
}
.apply-guide__link-icon {
  flex-shrink: 0;
  transition: transform 0.25s ease;
}
.apply-guide__link:hover .apply-guide__link-icon {
  animation: apply-guide-icon-bounce 0.6s ease;
}
@keyframes apply-guide-icon-bounce {
  0%,
  100% {
    transform: translateY(0);
  }
  30% {
    transform: translateY(-6px);
  }
  55% {
    transform: translateY(0);
  }
  75% {
    transform: translateY(-3px);
  }
}
.apply-guide__link-icon--business {
  width: 36px;
  height: 40px;
  overflow: visible;
}
.apply-guide__link-icon--business path {
  transform-box: fill-box;
  transform-origin: center;
  transition: transform 0.3s ease;
}
.apply-guide__link:hover .apply-guide__link-icon--business path:nth-child(1) {
  transition-delay: 0s;
  transform: scale(1.15);
}
.apply-guide__link:hover .apply-guide__link-icon--business path:nth-child(2) {
  transition-delay: 0.05s;
  transform: scale(1.1);
}
.apply-guide__link:hover .apply-guide__link-icon--business path:nth-child(3) {
  transition-delay: 0.1s;
  transform: scale(1.1);
}
.apply-guide__link:hover .apply-guide__link-icon--business path:nth-child(4) {
  transition-delay: 0.15s;
  transform: scale(1.2);
}
.apply-guide__link-icon--note {
  width: 40px;
  height: 40px;
  overflow: visible;
}
.apply-guide__link-icon--note path {
  transform-box: fill-box;
  transform-origin: center;
  transition: transform 0.3s ease;
}
.apply-guide__link:hover .apply-guide__link-icon--note path:nth-child(1) {
  transition-delay: 0s;
  transform: scale(1.15);
}
.apply-guide__link:hover .apply-guide__link-icon--note path:nth-child(2) {
  transition-delay: 0.05s;
  transform: scale(1.1);
}
.apply-guide__link:hover .apply-guide__link-icon--note path:nth-child(3) {
  transition-delay: 0.1s;
  transform: scale(1.1);
}
.apply-guide__link:hover .apply-guide__link-icon--note path:nth-child(4) {
  transition-delay: 0.15s;
  transform: scale(1.2);
}
.apply-guide__link-icon--faq {
  width: 42px;
  height: 40px;
  overflow: visible;
}
.apply-guide__link-icon--faq path {
  transform-box: fill-box;
  transform-origin: center;
  transition: transform 0.3s ease;
}
.apply-guide__link:hover .apply-guide__link-icon--faq path:nth-child(1) {
  transition-delay: 0s;
  transform: scale(1.15);
}
.apply-guide__link:hover .apply-guide__link-icon--faq path:nth-child(2) {
  transition-delay: 0.05s;
  transform: scale(1.1);
}
.apply-guide__link:hover .apply-guide__link-icon--faq path:nth-child(3) {
  transition-delay: 0.1s;
  transform: scale(1.1);
}
.apply-guide__link:hover .apply-guide__link-icon--faq path:nth-child(4) {
  transition-delay: 0.15s;
  transform: scale(1.2);
}
.apply-guide__link-body {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2xs);
  flex: 1 0 0;
  min-width: 0;
  transition: transform 0.25s ease;
}
.apply-guide__link:hover .apply-guide__link-body {
  transform: translateX(4px);
}
.apply-guide__link-title {
  font-weight: 700;
  font-size: var(--font-size-heading-h4);
  line-height: var(--line-height-snug);
  color: var(--color-text-body);
}
.apply-guide__link-desc {
  font-weight: 400;
  font-size: var(--font-size-body-s);
  line-height: var(--line-height-base);
  color: var(--color-text-tertiary);
}
.apply-guide__link-arrow {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  transition: transform 0.25s ease;
}
.apply-guide__link:hover .apply-guide__link-arrow {
  transform: translateX(4px);
}
/* 경력신청절차 모바일 전용 문구 */
.apply-guide__status-note--mobile {
  display: none;
}
.apply-guide__callout-text--mobile {
  display: none;
}

/* ---------- 태블릿(1295px 이하) ---------- */
@media (max-width: 1295px) {
  .apply-guide__status {
    flex-direction: column;
    align-items: stretch;
  }
  .apply-guide__status-head {
    width: 100%;
  }
  .apply-guide__status-divider {
    display: none;
  }
  .apply-guide__links {
    flex-direction: column;
  }
  .apply-guide__link {
    flex: none;
    width: 100%;
  }
}

/* ---------- 모바일(744px 이하) ---------- */
@media (max-width: 744px) {
  .apply-guide__callout-text {
    font-size: 13px;
  }
  .apply-guide__callout-text p {
    display: inline;
    margin: 0;
  }
  .apply-guide__callout-text--desktop {
    display: none;
  }
  .apply-guide__callout-text--mobile {
    display: block;
  }
  .apply-guide__panel {
    padding: 0;
    background: none;
    border-radius: 0;
    gap: var(--spacing-md);
  }
  .apply-guide__step {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-sm);
    padding: var(--spacing-md);
    background: var(--color-bg-page);
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-lg);
    box-shadow: 0 1px 1px rgba(17, 24, 39, 0.06);
  }
  .apply-guide__step-icon {
    display: none;
  }
  .apply-guide__step-head {
    gap: 8px;
  }
  .apply-guide__step-indicator {
    width: 24px;
    height: 24px;
  }
  .apply-guide__step-title {
    font-weight: 600;
    font-size: var(--font-size-body-m);
    line-height: var(--line-height-base);
  }
  .apply-guide__step-desc {
    font-size: var(--font-size-caption-s);
    line-height: var(--line-height-tight);
  }
  .apply-guide__status {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-sm);
    padding: var(--spacing-md);
    border-color: var(--color-border-default);
  }
  .apply-guide__status-head {
    width: 100%;
  }
  .apply-guide__status-desc,
  .apply-guide__status-divider,
  .apply-guide__status-note--desktop,
  .apply-guide__status-notes--desktop {
    display: none;
  }
  .apply-guide__status-title {
    font-weight: 600;
    font-size: var(--font-size-body-s);
    line-height: var(--line-height-base);
  }
  .apply-guide__status-chips {
    gap: 8px 4px;
  }
  .apply-guide__status-arrow {
    font-size: 12px;
  }
  .apply-guide__status-note--mobile {
    display: flex;
    align-items: center;
    gap: var(--spacing-2xs);
    font-size: var(--font-size-caption-s);
    line-height: var(--line-height-tight);
    color: var(--color-text-secondary);
  }
  .apply-guide__links {
    flex-direction: column;
    gap: var(--spacing-sm);
  }
  .apply-guide__link {
    flex: none;
    width: 100%;
    padding: var(--spacing-md);
    gap: var(--spacing-sm);
  }
  .apply-guide__link-icon--business,
  .apply-guide__link-icon--note,
  .apply-guide__link-icon--faq {
    width: 24px;
    height: 24px;
  }
  .apply-guide__link-title {
    font-weight: 600;
    font-size: var(--font-size-body-s);
    line-height: var(--line-height-base);
  }
  .apply-guide__link-desc {
    font-size: var(--font-size-caption-s);
    line-height: var(--line-height-tight);
  }
}

/* ---------- 제출서류 ---------- */
.docs-guide__columns {
  display: flex;
  align-items: stretch;
  gap: var(--spacing-2xl);
  width: 100%;
}
.docs-guide__card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-xl);
  flex: 1 0 0;
  min-width: 0;
  padding: var(--spacing-2xl);
  background: var(--color-bg-page);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}
.docs-guide__card-head {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding-top: var(--spacing-xl);
  padding-bottom: var(--spacing-3xl);
  border-bottom: 2px solid var(--color-black);
}
.docs-guide__card-title {
  font-weight: 700;
  font-size: var(--font-size-heading-h2);
  line-height: var(--line-height-tight);
  color: var(--color-text-heading);
}
.docs-guide__card-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-lg);
  width: 100%;
}
.docs-guide__callout {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  width: 100%;
  padding: var(--spacing-sm) var(--spacing-md);
  background: var(--color-blue-50);
  border-radius: var(--radius-sm);
}
.docs-guide__callout-icon {
  flex-shrink: 0;
  width: 23px;
  height: 23px;
}
.docs-guide__callout-text {
  font-size: var(--font-size-body-m);
  line-height: var(--line-height-base);
  color: var(--color-blue-500);
}
.docs-guide__group {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-md);
  width: 100%;
}
.docs-guide__group-label {
  font-weight: 700;
  font-size: var(--font-size-heading-h4);
  line-height: var(--line-height-snug);
  color: var(--color-text-body);
}
.docs-guide__list {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-lg);
  width: 100%;
  padding: var(--spacing-lg);
  background: var(--color-bg-card);
  border-radius: var(--radius-sm);
}
.docs-guide__list--loose {
  padding: var(--spacing-lg) var(--spacing-md);
}
.docs-guide__item {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-2xs);
  width: 100%;
  opacity: 0;
  transform: translateX(-16px);
  animation: docs-guide-item-slide-in 0.7s ease forwards;
}
.docs-guide__list > .docs-guide__item:nth-child(1) {
  animation-delay: 0s;
}
.docs-guide__list > .docs-guide__item:nth-child(2) {
  animation-delay: 0.06s;
}
.docs-guide__list > .docs-guide__item:nth-child(3) {
  animation-delay: 0.12s;
}
.docs-guide__list > .docs-guide__item:nth-child(4) {
  animation-delay: 0.18s;
}
.docs-guide__list > .docs-guide__item:nth-child(5) {
  animation-delay: 0.24s;
}
.docs-guide__list > .docs-guide__item:nth-child(6) {
  animation-delay: 0.3s;
}
.docs-guide__list > .docs-guide__item:nth-child(7) {
  animation-delay: 0.36s;
}
.docs-guide__list > .docs-guide__item:nth-child(8) {
  animation-delay: 0.42s;
}
.docs-guide__item p {
  flex: 1 0 0;
  min-width: 0;
  font-size: var(--font-size-body-m);
  line-height: var(--line-height-base);
  color: var(--color-text-body);
}
.docs-guide__check {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
}
.docs-guide__divider {
  width: 100%;
  border-top: 1px dashed var(--color-border-strong);
}

/* ---------- 모바일(744px 이하) ---------- */
@media (max-width: 744px) {
  .docs-guide__columns {
    flex-direction: column;
    gap: var(--spacing-md);
  }
  .docs-guide__card {
    gap: var(--spacing-sm);
    padding: var(--spacing-md);
  }
  .docs-guide__card-head {
    padding-top: var(--spacing-sm);
    padding-bottom: var(--spacing-lg);
  }
  .docs-guide__card-body {
    gap: var(--spacing-md);
  }
  .docs-guide__card:has(.docs-guide__callout) .docs-guide__card-body {
    gap: var(--spacing-xs);
  }
  .docs-guide__callout {
    padding: var(--spacing-sm) var(--spacing-xs) var(--spacing-sm) var(--spacing-sm);
  }
  .docs-guide__group {
    gap: var(--spacing-xs);
  }
  .docs-guide__list {
    gap: var(--spacing-sm);
    padding: var(--spacing-md) var(--spacing-sm);
  }
  .docs-guide__list--loose {
    padding: var(--spacing-lg) var(--spacing-sm);
  }
}

/* ==========================================================================
   AD-AUTH-001 관리자 로그인 — 입력폼 ↔ 버튼 간격
   .auth-form-actions{margin-top:4px} 가 .auth-card > *+* 를 덮어써 버튼이 폼에
   붙는다. 소셜 버튼이 없는 로그인 카드도 FR-AUTH-001 과 같은 20px 로 맞춘다.
   ========================================================================== */
.login-wrap .auth-card:not(:has(.social-btn)) .auth-form-actions {
  margin-top: 20px;
}

/* 관리자(bcnimda) 페이지(footer.foot 보유)는 본문 진입 페이드인 모션을 쓰지 않는다 */
.app:has(footer.foot) .content-area,
.app:has(footer.foot) .content-area .page-head,
.app:has(footer.foot) .content-area main,
.app:has(footer.foot) .content-area > *,
.app:has(footer.foot) .content-area > main > * {
  opacity: 1;
  transform: none;
  animation: none;
}

/* .card + .card 의 margin-top 이 grid-2 안 두 번째 카드에도 걸려 오른쪽 카드만
   아래로 밀렸다. 간격은 grid gap 이 담당한다 */
.grid-2 > .card + .card {
  margin-top: 0;
}

/* 관리자 화면의 경고 안내문 — web1/web2 의 .alert-box.warn 은 그대로 두어야 해서
   관리자 화면으로만 한정한다 */
.app:has(footer.foot) .alert-box.warn {
  align-items: center;
  gap: var(--spacing-xs);
  border: none;
  border-radius: var(--radius-sm);
  padding: var(--spacing-sm) var(--spacing-md);
  background: var(--color-status-error-bg);
  color: var(--color-status-error);
  font-size: var(--font-size-16);
  line-height: var(--line-height-base);
}

.app:has(footer.foot) .alert-box.warn .ico {
  flex: none;
  width: 23px;
  height: 23px;
  font-size: 0;
  color: transparent;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='23' height='23' viewBox='0 0 23 23' fill='none'%3E%3Cpath d='M11.5 20.7C16.581 20.7 20.7 16.581 20.7 11.5C20.7 6.41898 16.581 2.3 11.5 2.3C6.41898 2.3 2.3 6.41898 2.3 11.5C2.3 16.581 6.41898 20.7 11.5 20.7Z' stroke='%23ee4b47' stroke-width='1.6'/%3E%3Cpath d='M11.5 7.0725V12.8225' stroke='%23ee4b47' stroke-width='1.6' stroke-linecap='round'/%3E%3Cpath d='M11.5 15.6975V15.9275' stroke='%23ee4b47' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E")
    no-repeat center / 23px 23px;
}

/* 확장경력 3단계의 빈 상태는 표 자리 대신이 아니라 카드 한 장의 본문이라 퍼블의
   상하 64px 이 과하다(카드가 3장이라 그만큼 쌓인다) */
#ctStep3 .list-empty-state {
  padding: var(--spacing-xl);
}

/* 관리자 게시판 상세는 한 카드 안에 게시글 정보 표와 본문을 나란히 둔다 - 경계가 없어 보여 띄운다 */
.card > .table-wrap + .ck-content {
  margin-top: var(--spacing-lg);
}

/* 카드 바로 뒤에 오는 관리자 버튼줄(.btn-align)을 .card + .card 와 같은 간격으로 띄운다 */
.card + .btn-align,
.card .btn-align {
  margin-top: var(--spacing-md);
}

/* 진위확인 결과 패널과 그 아래 안내문 사이 간격 */
.cert-verify + .alert-box {
  margin-top: var(--spacing-lg);
}

/* QR 아래 고유번호 칸이 QR 틀과 같은 200px 이라 번호(16px)가 잘렸다(측정 198/226).
   QR 틀은 세로 flex + align-items:center 라 칸을 넓혀도 QR 은 가운데 그대로다. */
.cert-verify__qr,
.cert-verify__code-field {
  width: 260px;
}

/* 목록(pagination) 아래 미리보기 안내는 pagination 이 위에 두는 간격(32px)과 같게,
   안내와 카드 사이는 .card + .card(16px) 와 같게 맞춘다 */
.pagination + .empty-state {
  margin-top: 32px;
}

.empty-state + .card {
  margin-top: 16px;
}

/* 버튼 줄 다음 안내는 .btn-row 가 위에 두는 간격(--spacing-2xl)과 같게 맞춘다 */
.btn-row + .empty-state {
  margin-top: var(--spacing-2xl);
}

/* CO-TAL-002(나의 스크랩)처럼 카드 목록 아래에 안내 블록이 이어지는 경우 -
   .pagination + .empty-state 와 같은 간격으로 맞춘다 */
.card-list + .empty-state {
  margin-top: var(--spacing-2xl);
}

/* 표 안(td)의 빈 상태에서는 점선 테두리를 걷는다 - 퍼블 .empty-state 는 표 밖
   독립 블록용이라 표 자신의 테두리와 이중으로 겹쳐 보인다. 표 밖에서 쓰는
   화면(증명서 발급 등)은 원형 그대로 둔다. */
td .empty-state {
  border: 0;
  background: none;
}

/* 빈 목록 안내 칸에는 행 hover 강조를 걸지 않는다 - 갈 곳이 없는 칸이라 커서를
   올리면 안내문 뒤가 근거 없이 물든다. td.empty-state 는 칸 자체에 클래스를 준
   경우다(certVerify.jsp).
   [!] !important 가 필요하다. 퍼블은 tr:hover 배경을 화면마다 따로 두는데(63벌)
   그중 #FR-COM-005-1-tabs-0/-1 은 ID 스코프라 명시도로 이길 수가 없다. 화면 ID 를
   나열하면 퍼블이 스코프를 늘릴 때마다 조용히 새는 자리가 생긴다. */
table.grid tr:hover td:has(> .list-empty-state),
table.grid tr:hover td:has(> .empty-state),
table.grid tr:hover td.empty-state {
  background: transparent !important;
}

/* 관리자 폼은 모바일에서도 .form-grid 2열이 남아 라벨/입력이 좁게 눌렸다 */
@media (max-width: 744px) {
  .app:has(footer.foot) .form-grid {
    grid-template-columns: 1fr;
  }
}

/* 열이 4개 이상인 표가 들어간 카드는 grid-2 의 좁은 칸에서 셀이 눌려 읽기 어렵다 */
.grid-2:has(table.grid th:nth-child(4)) {
  grid-template-columns: 1fr;
}

/* 통계카드가 권한에 따라 한 장 빠지는 화면이 있다(심사배정 목록의 배정대기 카드는
   관리자 전용). 칸 수가 고정이면 남는 칸이 빈 채로 보여 실제 카드 수에 맞춰 나눈다.
   공용 .grid-2 는 차트용 비대칭(1.15fr/0.85fr)이라 카드에는 쓸 수 없다. */
.grid-3:has(> .stat-card:nth-child(2):last-child),
.grid-4:has(> .stat-card:nth-child(2):last-child) {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.grid-4:has(> .stat-card:nth-child(3):last-child) {
  grid-template-columns: repeat(3, 1fr);
}

/* OCR 검토 카드의 액션 버튼 두 개는 글자 수가 달라 폭이 서로 달랐다 */
.btn-row:has(> .btn-sm) .btn-sm {
  min-width: 110px;
}

/* 내용을 비워둔 아이콘만 배지와 같은 컬러 원 하나로 표현한다 - 의미가 있는
   이모지/아이콘을 쓰는 화면은 그대로 유지된다 */
.stat-icon:empty:not([class*="ico-"]) {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: currentColor;
}

/* 통계 카드 아이콘 — mask 로 그려서 색은 배지와 같은 currentColor 를 따른다 */
.stat-icon[class*="ico-"]::before {
  content: "";
  width: 20px;
  height: 20px;
  background-color: currentColor;
  -webkit-mask: var(--ico) no-repeat center / contain;
  mask: var(--ico) no-repeat center / contain;
}
.stat-icon.ico-doc {
  --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H7.5A2.5 2.5 0 0 0 5 5.5v13A2.5 2.5 0 0 0 7.5 21h9a2.5 2.5 0 0 0 2.5-2.5V8z'/%3E%3Cpath d='M14 3v5h5'/%3E%3Cpath d='M9 13h6'/%3E%3Cpath d='M9 17h6'/%3E%3C/svg%3E");
}
/* 파일 다운로드 링크 아이콘 — 색은 링크 색(currentColor)을 따른다 */
.file-link::after {
  content: "";
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-left: 4px;
  vertical-align: -2px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.5v12'/%3E%3Cpath d='M7.2 10.8L12 15.6l4.8-4.8'/%3E%3Cpath d='M4.5 20h15'/%3E%3C/svg%3E")
    no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.5v12'/%3E%3Cpath d='M7.2 10.8L12 15.6l4.8-4.8'/%3E%3Cpath d='M4.5 20h15'/%3E%3C/svg%3E")
    no-repeat center / contain;
}

/* FR-CR-006 경력정보 등록·수정: 입력값(왼쪽)과 증빙자료(오른쪽)를 좌우로 나눈다 */
/* 공용 .grid-2 는 왼쪽이 넓다(1.15fr/0.85fr). 경력 입력은 항목이 짧아 왼쪽이 남고
   증빙 쪽이 눌리므로 이 화면에서만 반반으로 나눈다. */
main.career-form .career-form__cols,
main.detail-view .career-form__cols {
  grid-template-columns: 1fr 1fr;
}
/* 위 규칙은 특이도가 (0,3,0) 이라 퍼블의 @media (max-width:900px) .grid-2 {1fr} (0,1,0) 을
   이겨 좁은 폭에서도 2열로 남았다. 375px 에서 증빙자료 카드가 92px 로 눌리고 가로
   스크롤까지 났다. 같은 브레이크포인트에서 우리 규칙도 1열로 풀어 준다. */
@media (max-width: 900px) {
  main.career-form .career-form__cols,
  main.detail-view .career-form__cols {
    grid-template-columns: minmax(0, 1fr);
  }
}
main.career-form .career-form__cols > .card > h3,
main.detail-view .career-form__cols > .card > h3 {
  /* .card h3 기본 여백(4px)은 바로 아래 표가 오는 카드 기준이다. 입력폼은 더 떨어져야 읽힌다 */
  margin-bottom: 16px;
}
/* 계약금액 입력 아래 한글 금액(#totalpayKor) — 안내문구가 아니라 방금 입력한 값이라
   .form-hint 보다 진하게 둔다 */
main.career-form .cr-pay-kor {
  margin: 6px 0 0;
  color: var(--color-primary);
  font-weight: 600;
}
main.career-form .cr-pay-kor:empty {
  display: none;
}
/* 증빙 종류는 오른쪽 좁은 칸에서 2열로 두면 라벨이 두 줄로 접힌다 */
main.career-form .career-form__proof .checkbox-grid,
main.detail-view .career-form__proof .checkbox-grid {
  grid-template-columns: 1fr;
}
/* 증빙 첨부는 관리자 심사 상세의 '증빙자료 검토' 와 같은 [구분 | 첨부파일 | 원본] 표다 */
/* .proof-file-row 는 목록(li)일 때 쓰던 이름이라 display:flex 를 갖고 있다.
   표에서는 tr 이 flex 상자가 돼 머리칸과 본문 칸의 폭이 따로 놀아 되돌린다. */
/* ⚠ 900px 이하에서는 걸지 않는다. 퍼블은 그 폭에서 table.grid 를 카드형으로 접는데
   (tr/td block + thead 숨김 + td::before), table-row/table-cell 로 되돌리면 3칸이
   좁은 폭에 구겨진다(375px 실측 150/86/49px). */
@media (min-width: 901px) {
  table.proof-file-grid .proof-file-row {
    display: table-row;
  }
  table.proof-file-grid .proof-file-row > td {
    display: table-cell;
    vertical-align: middle;
  }
}
.proof-file-wrap {
  margin-top: 8px;
}
/* 파일 한 줄(아이콘·이름·상태·삭제)이 표 기본 행높이(45px)보다 크다 */
table.proof-file-grid td {
  height: auto;
  padding: 10px 12px;
}
table.proof-file-grid th {
  padding: 0 12px;
}
/* 구분·원본은 값이 짧다. 남는 폭은 파일명이 들어가는 첨부파일 칸이 가져간다.
   위와 같은 이유로 카드형으로 접히는 900px 이하에서는 폭을 고정하지 않는다. */
@media (min-width: 901px) {
  table.proof-file-grid .proof-file-row__label {
    width: 34%;
  }
  table.proof-file-grid .proof-file-row__view {
    width: 76px;
    white-space: nowrap;
  }
}
/* 표 칸이 이미 행을 나눈다 - 파일 한 줄은 테두리 없이 붙이고 폭은 칸에 맞춘다 */
table.proof-file-grid .file-upload__item {
  width: auto;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
}
table.proof-file-grid .file-upload__item-info {
  min-width: 0;
}
table.proof-file-grid .file-upload__item-name {
  word-break: break-all;
}
/* 미리보기는 행을 하나 더 써서 표 아래로 펼친다 */
table.proof-file-grid .proof-viewer-row td {
  padding: 0 12px 12px;
}
/* 저장된 증빙 원본 미리보기(FR-CR-006 수정, 상세). 관리자 심사 상세와 같은 크기다 */
.proof-view-link {
  color: var(--brand-600, #2D65F2);
  font-weight: 600;
}
.proof-viewer {
  padding: 8px 0;
}
.proof-viewer__f {
  width: 100%;
  height: 420px;
  border: 1px solid var(--line, #E3E8F0);
  border-radius: 8px;
}
.proof-viewer__i {
  max-width: 100%;
  border: 1px solid var(--line, #E3E8F0);
  border-radius: 8px;
}

/* 준비중 안내 이미지(no-page.html) - 콘텐츠 영역 가운데 정렬 */
.no-page {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 420px;
}
.no-page img {
  max-width: 100%;
}

  /* 직종 4단을 한 줄로 편다 */
  .cr-pop .cr-jobtype-cascade {display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:6px;}
  /* 한 줄에 네 칸이라 칸마다 100px 남짓이다. 퍼블 셀렉트의 좌우 여백(16/44px)을 그대로 두면
       글자 자리가 60px 밖에 안 남아 직종명이 잘린다 - 이 네 칸에서만 여백을 줄인다 */
  .cr-pop .cr-jobtype-cascade select {width:100%; padding:0 26px 0 10px; background-position:right 8px center; font-size:13px;}
  /* select 도 같은 규칙을 탄다 - 관리자 공통 design.css 가 select 에 별도 값을 준다 */
  .cr-pop input[type="text"], .cr-pop textarea, .cr-pop select {border:1px solid #E3E8F0; border-radius:7px; padding:10px 12px; font-size:15px; background:#fbfcfe; font-family:inherit; color:#182233; width:100%; height:auto; box-sizing:border-box;}
  .cr-pop input[type="text"]:focus, .cr-pop textarea:focus, .cr-pop select:focus {outline:2px solid #2F6FE4; outline-offset:1px; border-color:#2F6FE4;}

  /* 패널 ②(상세 + 안건 등록)는 세로가 길어 .cr-pop 이 스크롤된다. 버튼이 스크롤 아래로
       숨으면 등록할 방법이 없어 보이므로 하단에 고정한다. 배경/여백은 스크롤되는 본문이
       버튼 뒤로 비쳐 보이지 않게 하려는 것이다. */
  .cr-pop .cr-actions {
    display:flex; justify-content:flex-end; gap:8px; margin-top:14px;
    position:sticky; bottom:-20px; background:#fff; padding:12px 0 0; margin-bottom:-20px;
    padding-bottom:20px; border-top:1px solid #E3E8F0;
  }
  /* 왼쪽 끝으로 빼는 버튼(닫기). 나머지는 flex-end 정렬을 그대로 쓴다 */
  .cr-pop .cr-actions .cr-btn-left {margin-right:auto;}
  /* [취소]만 <a> 다(모달 컴포넌트가 .btn-cancel 앵커에 닫기 핸들러를 붙인다). 관리자 스킨의
       a 기본색·밑줄이 남아 옆 <button> 과 글자색이 갈리므로 여기서 끊는다 */
  .cr-pop .cr-actions a.btn {text-decoration:none; color:var(--color-text-heading, #111);}

  /* 대상 목록은 모달 안이라 세로로 무한정 늘릴 수 없다. 표 자체 규칙은 퍼블 table.grid 가 갖고,
       여기서는 높이 상한만 얹는다 */
  .cr-pop .cr-list-scroll {overflow:auto; max-height:260px;}
  .cr-pop table.grid.cr-vertical th {width:130px;}
  /* 위 width 가 '내용' 헤드까지 잡아 두 컬럼이 같은 폭이 되는 것을 막는다 */
  .cr-pop table.grid.cr-vertical thead th:last-child {width:auto;}
  /* 세로 표는 첫 칸이 머리글이라 퍼블 th 배경을 그대로 두면 본문 줄까지 회색이 된다.
       퍼블 th 는 가로 표 전제라 white-space:nowrap 이다. 세로 표의 머리글은 '담당 프로젝트
       및 업무내용'처럼 길어 폭(130px)을 넘어 내용 칸을 덮고 나온다 - 이 표에서만
       줄바꿈을 허용하고 높이도 내용에 맞게 푼다. */
  .cr-pop table.grid.cr-vertical tbody th {font-weight:600; white-space:normal; line-height:1.4; height:auto; padding:10px 16px; word-break:keep-all;}

  .cr-pop .cr-2col {display:grid; grid-template-columns:1fr 1fr; gap:14px;}
  /* 퍼블 .card + .card 는 세로로 쌓는 전제라 16px 을 얹는다. 여기선 두 카드가 grid 로 나란히
       놓여 오른쪽 카드만 아래로 밀린다 - 간격은 gap 이 이미 갖고 있다 */
  .cr-pop .cr-2col .card + .card {margin-top:0;}
  /* 등록 화면은 상세(2단) + 등록 폼이라 어떤 배치로도 한 화면에 들어가지 않는다. 상한을 두지
       않으면 상세가 높이를 다 먹어 [안건 등록] 카드가 하단 고정 버튼바에 가려 테두리만 보인다.
       입력 폼이 잘리는 대신 상세 쪽을 스크롤시킨다. 열람 전용 뷰(#crViewActions)는 폼이 없어 제외. */
  .cr-pop #crRegistPanel:not(.cr-viewonly) .cr-2col {max-height:44vh; overflow-y:auto;}
  .cr-pop .card h3 {margin:0 0 10px; font-size:14px; color:#182233;}

  /* 페이저는 관리자 목록과 같은 마크업(.list-page__left/__center + .page-num)을 쓰고 같은
       렌더 함수로 그린다. 관리자 공용 규칙은 #iph-content 스코프인데 팝업은 데코레이터
       밖(#popup_modal_1)이라 닿지 않는다 - design.css "관리자 공용 페이저" 값을 .cr-pop 으로
       옮겨 적는다. */
  .cr-pop .list-page {display:flex; justify-content:center; align-items:center; gap:8px; margin-top:16px; margin-bottom:0;}
  .cr-pop .list-page__left {font-size:13px; color:#666;}
  .cr-pop .list-page__right {display:none;}
  .cr-pop .list-page__center {display:flex; align-items:center; gap:8px;}
  .cr-pop .list-page__center a {display:flex; align-items:center; justify-content:center; width:40px; height:40px; border:none; border-radius:4px; background:none; font-size:15px; font-weight:400; line-height:1.5; color:#333; text-decoration:none;}
  .cr-pop .list-page__center a.page-num--active {background:#fff; border:1px solid #2d65f2; color:#2d65f2; font-weight:600;}
  /* 처음/이전/다음/끝은 이미지 아이콘이라 시안 화살표 버튼과 같은 테두리 상자로 감싼다 */
  .cr-pop .list-page__center a:has(img) {background:#fff; border:1px solid #d8dce4;}
  .cr-pop .list-page__center a img {display:none;}
  .cr-pop .list-page__center a:has(img)::before {content:""; width:20px; height:20px; background-color:#767676; -webkit-mask:var(--pager-ico) no-repeat center / 20px 20px; mask:var(--pager-ico) no-repeat center / 20px 20px;}
  .cr-pop .list-page__center a:has(img[src*="page_f"]) { --pager-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M10.5 5L5.5 10L10.5 15M15.5 5L10.5 10L15.5 15' stroke='%23767676' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
  .cr-pop .list-page__center a:has(img[src*="page_p"]) { --pager-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M12.5 5L7.5 10L12.5 15' stroke='%23767676' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
  .cr-pop .list-page__center a:has(img[src*="page_n"]) { --pager-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M7.5 5L12.5 10L7.5 15' stroke='%23767676' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
  .cr-pop .list-page__center a:has(img[src*="page_l"]) { --pager-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M9.5 5L14.5 10L9.5 15M4.5 5L9.5 10L4.5 15' stroke='%23767676' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }

  .cr-pop .cr-hint {font-size:12.5px; line-height:1.4; color:#6B7688;}
  .cr-pop .cr-file-link {color:#1D5FD6; font-weight:600; text-decoration:none; cursor:pointer;}
  .cr-pop .cr-file-link:hover {text-decoration:underline;}
  /* 증빙자료 인라인 뷰어. 값은 경력 심사 상세(careerJudgeForm.jsp)와 같다 - 같은 자료를
       보는 화면이라 크기가 달라질 이유가 없다. 모달 안이라 높이만 420px 로 줄인다
       (.cr-pop 자체가 80vh 스크롤이다). */
  .cr-pop .cr-viewer {padding:8px 0;}
  .cr-pop .cr-viewer__f {width:100%; height:420px; border:1px solid #E3E8F0; border-radius:8px;}
  .cr-pop .cr-viewer__i {max-width:100%; border:1px solid #E3E8F0; border-radius:8px;}
  /* ==================== career/careerJudgerPop.jsp ==================== */
/* 값은 careerAgendaTargetPop.jsp의 .cr-pop 스코프를 그대로 옮긴 것이며 새 색을 만들지 않는다 */
  .cr-pop {padding:20px; max-height:80vh; overflow-y:auto;}
  .cr-pop h4 {margin:0 0 8px; font-size:15.5px; color:#182233;}
  .cr-pop h4::before {display:none;}
  .cr-pop p.cr-lead {margin:0 0 16px; font-size:13px; color:#6B7688; line-height:1.6;}

  .cr-pop .table-basic {overflow:auto; max-height:360px;}
  .cr-pop .table-basic {width:100%; border-collapse:collapse; font-size:13.5px;}
  .cr-pop .table-basic th {background:#FAFBFD; color:#6B7688; font-size:12px; font-weight:700; border-bottom:2px solid #E3E8F0; padding:10px 12px; text-align:left; white-space:nowrap;}
  .cr-pop .table-basic td {border-bottom:1px solid #E3E8F0; padding:10px 12px; color:#3C4658;}
  .cr-pop .table-basic td.col-no {text-align:center; color:#6B7688;}

  .cr-pop .cr-actions {display:flex; justify-content:flex-end; gap:8px; margin-top:14px; padding-top:12px; border-top:1px solid #E3E8F0;}

/* ==================== cert/certTmplList.jsp ==================== */
/* 등급기준 탭은 입력이 2개뿐이라 시안 2열 그리드가 넓게 벌어진다. 이 화면에서만 폭을 제한한다 */
  #ctmGradePanel .form-grid {max-width:760px;}
  /* 미리보기 열은 버튼 하나만 들어가므로 폭을 고정해 템플릿명 열을 넓게 쓴다 */
  /* 미리보기 iframe 박스 */
  /* 모달 폭 760 은 career 선례와 같고, 조각의 A4 폭 194mm 가 약 733px 이라 가로 스크롤 없이 들어간다 */
  /* showModal 컨테이너는 body 에 append 되므로(customDialog) #ctmTplPanel 하위로 한정하면 적용되지 않는다 */
  .ctm-preview-frame {width:100%; height:70vh; border:0;}
  /* 편집 모달. 위와 같은 이유로 조상 선택자를 붙이지 않는다 */
  .ctm-edit-table {margin-top:16px;}
  /* 손잡이 + 표시용 순번이 들어가 폭을 넓게 잡는다 */
  .ctm-edit-table th.ctm-edit-col-drag, .ctm-edit-table td.ctm-edit-col-drag {width:52px; white-space:nowrap;}
  .ctm-edit-drag {cursor:move; color:#999; padding-right:4px;}
  .ctm-edit-seq {color:#999;}
  .ctm-edit-table th.ctm-edit-col-use, .ctm-edit-table td.ctm-edit-col-use {width:48px; text-align:center;}
  /* 배지 문구가 길어 줄바꿈을 허용하고 폭을 넓게 잡는다 */
  .ctm-edit-table th.ctm-edit-col-src, .ctm-edit-table td.ctm-edit-col-src {width:150px;}
  /* 자유 항목 삭제 버튼이 ▲▼ 옆에 하나 더 들어간다 */
  .ctm-edit-table th.ctm-edit-col-ops, .ctm-edit-table td.ctm-edit-col-ops {width:96px; white-space:nowrap;}
  .ctm-edit-table input[type="text"] {width:100%; box-sizing:border-box;}
  .ctm-edit-table input[readonly] {background:#f5f5f5; color:#888;}
  /* 값 출처 배지. 자유 항목은 모든 발급 건에 같은 글자가 나가고 시스템 항목만 발급 데이터로 채워진다 */
  .ctm-edit-badge-free, .ctm-edit-badge-sys {display:inline-block; padding:1px 6px; border-radius:10px; font-size:11px; line-height:17px; white-space:normal;}
  .ctm-edit-badge-free {background:#e8f3ff; color:#1a63c4;}
  .ctm-edit-badge-sys {background:#f0f0f0; color:#666;}
  /* 자유 항목 수 / 상한 표시 */
  .ctm-edit-freecnt {margin-left:8px; color:#888; font-size:12px;}
  /* 저장 전 미리보기 상자. 두 번째 모달을 겹치지 않고 편집 모달 안에 심으므로 닫아도 입력이 남는다 */
  .ctm-edit-preview-box {margin-top:16px;}
  .ctm-edit-preview-box .ctm-preview-frame {height:60vh; border:1px solid #ddd;}

/* ==================== counsel/counselreceipt/counselreceiptForm.jsp ==================== */
/* 이스케이프한 문자열에 마크업을 다시 주입하지 않고 CSS로만 줄바꿈을 보존한다(CSQ-02) */
  .cs-pre {white-space:pre-wrap; word-break:break-all; line-height:1.7;}
  .cs-audit {display:block; margin-top:6px; font-size:12px; color:#6B7688;}
  .cst-row {width:100%; height:405px; margin-bottom:30px;}
  .cst-chart {width:49%; display:inline-block; border:1px solid #e8e8e8; height:100%;}
  .cst-table {width:49%; display:inline-block; float:right; height:100%; overflow-y:auto;}
  .cst-num {text-align:right;}
  .cst-total {font-weight:700; background:#f7f8fa;}

/* ==================== extcareer/extCareerJudgeForm.jsp ==================== */
.ec-sec-head {display:flex; align-items:baseline; gap:8px; margin:20px 0 10px;}
  .ec-sec-head h3 {margin:0; font-size:15px; color:#182233;}

  /* 신청정보와 증빙자료 검토를 좌우 반반으로 놓고 대조한다. 좁은 화면에서는 표가 눌리므로 1단으로 되돌린다 */
  /* 그리드 자식은 기본 min-width:auto라 내부 표가 칸을 밀어낸다. 0으로 눌러야 반반이 지켜진다 */

  .ec-title-row {display:flex; align-items:center; gap:10px; margin-bottom:16px;}
  .ec-title-row h2 {margin:0; font-size:22px; letter-spacing:-.3px; color:#182233;}

  .ec-hint {font-size:12.5px; line-height:1.4; color:#6B7688;}
  /* 완료 건의 처리일·처리자. 라벨 오른쪽에 붙으므로 라벨보다 흐리게 둔다 */
  .ec-meta {margin-left:8px; font-size:12.5px; font-weight:400; color:#95A0B3;}

  /* 심사 상세 3화면(경력·확장경력·심의안건) 공통 하단 버튼 줄. 카드 밖, 왼쪽 이동 / 오른쪽 처리 */
  .judge-btn-bar {display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap; margin-top:16px;}
  .judge-btn-bar__l, .judge-btn-bar__r {display:flex; align-items:center; gap:10px; flex-wrap:wrap;}
  .judge-btn-bar__r {margin-left:auto;}

  .ec-file-link {color:#1D5FD6; text-decoration:none;}
  .ec-file-link:hover {text-decoration:underline;}

  /* 증빙자료 인라인 뷰어. 2단 그리드의 오른쪽 칸이라 폭은 칸에 맞추고 높이만 고정한다 */
  .ec-viewer {padding:8px 0;}
  .ec-viewer__f {width:100%; height:520px; border:1px solid #E3E8F0; border-radius:8px;}
  .ec-viewer__i {max-width:100%; border:1px solid #E3E8F0; border-radius:8px;}
  .jt-hint {margin:0; font-size:11.5px; color:#95A0B3;}
  .jt-inline {display:flex; align-items:center; gap:8px; flex-wrap:wrap;}
  .jt-inline input[type=text], .jt-inline select {width:auto; flex:1 1 130px;}
  .jt-choice {display:flex; gap:18px; flex-wrap:wrap; font-size:13.5px; color:#3C4658;}
  .jt-choice-grid {display:grid; grid-template-columns:repeat(2,1fr); gap:8px 18px; font-size:13.5px; color:#3C4658;}
  .jt-choice label, .jt-choice-grid label {display:flex; align-items:flex-start; gap:6px;}
  .jt-choice-desc {color:#95A0B3; font-style:normal;}
  .jt-upload {border:1px dashed #C7D0DE; background:#FAFBFD; border-radius:8px; padding:22px; text-align:center; color:#6B7688; font-size:13px;}
  /* 관리자 공통 design.css 의 h5 가 display:flex 라 여백·굵기가 먹지 않는다 */
  .jt-col-title {display:block; margin:0 0 14px; color:#3C4658; font-size:13.5px; font-weight:700;}
  /* 증빙 첨부표. 등록화면은 위 체크박스를 켠 종류만 행이 남는데, 미리보기는 전 종류를 펼쳐 둔다 */
  .jt-proof-table {width:100%; border-collapse:collapse; font-size:12.5px;}
  .jt-proof-table th, .jt-proof-table td {border:1px solid #E3E8F0; padding:8px 10px; text-align:left; color:#6B7688;}
  .jt-proof-table th {background:#FAFBFD; color:#3C4658; font-weight:700; white-space:nowrap;}
  .jt-proof-btn {display:inline-block; border:1px solid #C7D0DE; border-radius:6px; background:#FFF; padding:5px 12px; color:#95A0B3; font-size:12px;}

  @media (max-width:900px) {.jt-choice-grid {grid-template-columns:1fr;}}
  #iph-content .jobtype-cascade {display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:var(--spacing-xs);}
  #iph-content .jobtype-cascade select:disabled {background:var(--color-bg-muted); color:var(--color-text-tertiary);}
  @media (max-width:900px) {#iph-content .jobtype-cascade {grid-template-columns:repeat(2, minmax(0, 1fr));}}

  /* No. 열 본문칸. 체크박스가 있는 선택형 목록은 칸 전체를 왼쪽정렬하므로 제외한다 */
  #iph-content table.grid:not(:has(input[type="checkbox"])) td.col-no {text-align:center;}
  #iph-content table.grid td.col-no {color:var(--color-text-tertiary);}

/* ==================== poll/0/pollQstList.jsp ==================== */
.resultitem{
  margin-bottom:5px;
}
.resultitem.S .deleteresultitem{
  display:none;
}
/* .input-radio input[type=checkbox] ~ .etctext{
background:#eee;
}
.input-radio input[type=checkbox]:checked ~ .etctext{
background:inherit;
} */

.tdonclick:hover{
  text-decoration:underline;
  cursor:pointer;
}

/* ==================== poll/include/pollTargetJobtype_include.jsp ==================== */
/* 스킨의 .survtype-group 은 display:flex(가로)라, 피커와 칩 목록을 그 바로 밑에 두면 둘이 옆으로 붙는다.
       세로로 쌓을 것들을 이 상자 하나로 묶어 .ti 옆의 flex 아이템 한 칸을 차지하게 한다. */
  .tg-jobtype-body {flex:1 1 auto; min-width:0; align-self:flex-start;}
  .tg-jobtype-picker {display:flex; gap:8px; align-items:center; flex-wrap:wrap;}
  .tg-jobtype-cascade {display:flex; gap:8px; flex-wrap:wrap; flex:1 1 auto;}
  .tg-jobtype-cascade select {flex:1 1 160px; min-width:120px;}
  .tg-jobtype-add {padding:0 16px; height:36px; border:0; border-radius:4px; background:#3C7DEE; color:#fff; cursor:pointer;}
  /* 칩을 [추가] 버튼 아래에 한 줄에 하나씩 쌓는다. 세분류는 "대 > 중 > 소 > 세" 경로라 길어서,
       가로로 접히면 어디서 한 항목이 끝나는지 읽히지 않는다 */
  .tg-jobtype-chips {display:flex; flex-direction:column; align-items:flex-start; gap:6px; list-style:none; margin:10px 0 0; padding:0;}
  .tg-jobtype-chips li {display:inline-flex; align-items:center; gap:6px; padding:5px 10px; border:1px solid #C6D0E0; border-radius:16px; background:#F4F7FC; font-size:13px;}
  .tg-jobtype-chips button {width:16px; height:16px; border:0; border-radius:50%; background:#D8E1EF; color:#37445C; line-height:1; cursor:pointer;}

/* ==================== poll/pollList.jsp ==================== */
#pollListBody .poll-row {cursor:pointer;}

/* ==================== poll/pollMngList.jsp ==================== */
.pm-row-menu {position:absolute; z-index:100; min-width:160px; padding:4px 0; background:var(--white,#fff); border:1px solid var(--gray-line,#dcdcdc); border-radius:4px; box-shadow:0 2px 8px rgba(0,0,0,.12);}
      .pm-row-menu__label {padding:8px 16px; color:#767676; font-size:13px; border-bottom:1px solid var(--gray-line,#dcdcdc);}
      .pm-row-menu__sep {margin:4px 0; border-top:1px solid var(--gray-line,#dcdcdc);}
      .pm-row-menu li a {display:block; padding:8px 16px; white-space:nowrap;}
      .pm-row-menu li a:hover {background:var(--table-bgcolor,#f5f6f9);}
      .pm-optbtn {display:inline-flex; align-items:center; justify-content:center;}

/* ==================== poll/pollTargetExcelPop.jsp ==================== */
@page {
    size: auto;
    margin: 0;
}

/* ==================== poll/pollTargetList.jsp ==================== */
.upload-menu {position:absolute; z-index:20; margin-top:4px; padding:4px 0; background:var(--white); border:1px solid var(--gray-line); border-radius:4px; box-shadow:0 2px 8px rgba(0,0,0,.12);}
              .upload-menu li a {display:block; padding:8px 16px; white-space:nowrap;}
              .upload-menu li a:hover {background:var(--table-bgcolor);}

/* ==================== poll/popupOrgList.jsp ==================== */
#selecteddeptdiv li button {
                display: none;
              }

/* ==================== visitorstats/uniqueVisitorStats.jsp ==================== */
.bg_merge {
  background: #F7F7F7;
}

/* ==================== visitorstats/visitorEnvStats.jsp ==================== */
.toastui-chart-export-menu-btn {
  font-size: 14px
}

/* ==================== extcareer/extCareerJudgeList.jsp ==================== */
/* 시안 ②: 상세 진입은 신청자명 클릭이다 */

  /* 시안 통계카드. grid-4 클래스에 카드가 3개뿐인 것은 시안 그대로다(확장경력.md Q4) */

/* ==================== cert/certIssueStatList.jsp ==================== */
  /* 열 폭은 canvas measureText 로 잰 실제 최대 내용폭(합 822)에 여유를 더한 값이며 합계 916 이라 컨테이너 안에 들어간다.
       ⚠ 열을 더하거나 넓힐 때는 합계를 다시 계산할 것 - table-layout:fixed 라 넘치면 조용히 잘린다. */
  /* 발급자 폭. 이 표는 관리자 공통 CSS 때문에 table-layout:fixed + word-break:break-all 이라,
       폭 없는 열은 6px 까지 눌리고 이름이 한 글자씩 세로로 접히며 옆 열 위로 넘친다 - 다른 열과 같이 폭을 준다 */
  /* box-sizing 이 없으면 위 폭이 content-box 기준이 되어 셀마다 좌우 패딩 24px 이 덧붙는다 */
  /* 발급일시는 날짜+시각이라 좁은 폭에서 두 줄로 접히면 목록이 들쭉날쭉해진다.
       값은 'YYYY-MM-DD HH:MI' 16자 고정이다(매퍼 TO_CHAR) */
  /* [검색]은 셀렉트 3개와 같은 줄에 서지만 label 이 없어 기준선이 위로 뜬다 */
  .ctm-filterbar .btn {align-self:flex-end;}
  /* 검색어 칸. .form-row 는 certMng.css 에서 max-width:200px 라 'CERT-2026-000824-U2W3' 가 절반만 보인다.
       이 칸만 상한을 풀고 input 이 칸을 꽉 채우게 한다 - 폭을 지정하지 않으면 기본 size=20 이 남아 칸 오른쪽이 빈다. */
  .ctm-form-row-keyword {max-width:none; width:260px;}
  .ctm-form-row-keyword input {width:100%; box-sizing:border-box;}
  /* 교체된 3열. 유효기간은 'YYYY-MM-DD' 10자 고정이라 접힐 일이 없고,
       상태·포함경력은 값이 짧아 가운데 정렬이 헤더와 어긋나 보이지 않는다. */
  /* '경력 N / 확장 M' 라벨이 붙어 폭을 늘린다. nowrap 이라 좁으면 옆 열을 밀어낸다 */
  /* 상태 배지. 폐기·만료만 색으로 구분하고 유효는 기본색으로 둔다 - 정상 상태가 대부분이라
       전부 색을 주면 예외 두 가지가 묻힌다 */
  .ctm-badge-valid {background:#E6F6EF; color:#1B7A4D;}
  .ctm-badge-expired {background:#FDF3E2; color:#8A5A12;}
  .ctm-badge-discarded {background:#FCEBEC; color:#B32430;}
  /* 앵커링 처리중 배지. 사용자 발급내역 '처리중'과 같은 계열 */
  .ctm-badge-pending {background:#E7F0FB; color:#1B54A8;}

/* ==================== cert/certVerifyMngList.jsp ==================== */
/* 고유번호는 숫자·영문이 섞인 고정 자릿수라 비례폭 글꼴에서 열마다 자릿수가 어긋나 보인다 */
  /* 조회일시는 날짜+시각이라 좁은 폭에서 두 줄로 접히면 목록이 들쭉날쭉해진다 */
  /* 조회자 구분은 값이 2~3자라 헤더가 접히지 않을 만큼만 잡아 준다 */
  /* 검색조건 6개를 한 줄로 늘어놓지 않고 두 줄로 나눈다(1행 4개 / 2행 3개).
       퍼블 기본값(flex 1 1 240px)은 폭이 남으면 6개를 한 줄에 밀어 넣어 라벨과 긴 옵션 문구가 잘린다.
       4×(25%-15px) + 3×20px = 100% 라 다섯 번째부터 반드시 다음 줄로 넘어간다 - 줄바꿈용 빈 요소를 마크업에 끼우지 않는 이유다.
       min-width 200px 은 [조회자 구분] 라벨과 가장 긴 옵션([위변조 의심])이 접히지 않는 선이다
       (퍼블의 240px 은 본문 폭 약 930px 에서 계산폭을 이겨 3개만 들어간다). */
  .ctm-filterbar-4col .form-row {flex:1 1 calc(25% - 15px); min-width:200px;}
  /* certMng.css 는 green/blue/amber/purple/red 만 갖고 있어 회색 2단만 보탠다.
       연회색은 결과 열의 형식오류(입력 실수)와 조회자 구분의 비회원에 함께 쓰고,
       진회색은 이상 조회 집계 대상(없는 번호·폐기건)이다 */
  .ctm-badge-graydark {color:#3D4553; background:#DEE1E6;}
  /* 상세 모달(#ctmDetailModal)은 퍼블 레이어팝업 컴포넌트(.modal-overlay/.modal-box/
     career-list-modal__row)를 그대로 쓴다 - 여백·글자 규격을 여기 옮겨 적지 않는다. */
  /* 고유번호는 목록 열과 같은 이유로 고정폭 글꼴이다(위 .ctm-col-serial 과 짝) */
  .ctm-detail-serial {font-family:Consolas, "Courier New", monospace; letter-spacing:.2px;}
  /* 관리자 스킨의 전역 h4::before(4px 점)는 시안 팝업 제목에 없는 장식이다
     (.cr-modal-form h4::before 와 같은 처리) */
  #ctmDetailModal h4::before {display:none;}
  /* 뒷배경은 olp()/customDialog 가 만드는 .dimmed-blur 와 같게 한다 - 색을 덮지 않고 흐리기만 한다.
     퍼블 .modal-overlay 의 var(--color-dim) 은 화면 색이 통째로 어두워져 다른 팝업과 달라 보였다 */
  #ctmDetailModal {background:rgba(0, 0, 0, .1); backdrop-filter:blur(2px); z-index:998;}

  /* 시안 AD-VR-002의 [보완요청] btn-danger. 승인(primary)과 나란히 놓이므로 색으로 구분한다 */
  /* 시안 .chart-placeholder 자리 - 안내문구 대신 실제 차트가 들어간다 */
  .cr-chart-box {border:1px solid #E3E8F0; border-radius:8px; background:#FAFBFD; padding:12px 14px; margin-bottom:16px;}
  .cr-chart-box .cap {font-size:12.5px; color:#6B7688; text-align:center; margin-top:6px;}

  /* margin-bottom:10px / padding:10px 12px 는 목업 리터럴이며 8px 그리드로 "정리"하지 않는다(UI-SPEC Spacing Exceptions) */
  .cr-sec-head {margin-top:24px; margin-bottom:10px; display:flex; justify-content:space-between; align-items:center;}
  .cr-sec-head h3 {margin:0; font-size:15px; font-weight:700; line-height:1.3; color:#182233;}
  .cr-sec-head h3 .badge {margin-left:8px; vertical-align:middle;}

  /* 시안 .grid-2 - 신청 경력정보 | 증빙자료 검토 2단. 비율 1.15fr/.85fr 과 900px 브레이크포인트는 시안 값 그대로다. */
  .cr-2col {display:grid; grid-template-columns:1.15fr .85fr; gap:16px; align-items:stretch;}
  @media (max-width:900px) {.cr-2col {grid-template-columns:1fr;}}
  /* 퍼블 .card + .card 세로 간격이 나란한 오른쪽 카드만 아래로 민다(.grid-2 와 같은 보정) */
  .cr-2col > .card + .card {margin-top:0;}

  /* 좌측 카드는 시안처럼 항목/내용 세로 표다. 폭 고정은 좌측 열에만 건다 - thead th 전체에 걸면 '내용' 열까지 눌린다 */

  .cr-hint {font-size:12.5px; line-height:1.3; color:#6B7688;}
  /* 처리일·처리자. 라벨 오른쪽에 붙으므로 라벨보다 흐리게 둔다 */
  .cr-meta {margin-left:8px; font-weight:400; color:#95A0B3;}
  .cr-body {font-size:13.5px; line-height:1.5; color:#3C4658;}
  /* 심사의견·사유·회부사유는 입력 당시 개행이 들어 있다 */
  .cr-multiline {white-space:pre-wrap;}
  .cr-notice {border:1px solid #E3E8F0; background:#FAFBFD; border-radius:10px; padding:16px;}
  .cr-notice h5 {margin:0 0 6px; font-size:12.5px; font-weight:700; line-height:1.4; color:#3C4658;}
  .cr-notice p {margin:0; font-size:13.5px; font-weight:400; line-height:1.5; color:#6B7688;}

  .cr-file-link {color:#1D5FD6; text-decoration:none;}
  .cr-file-link:hover {text-decoration:underline;}

  /* 증빙자료 원본 뷰어. 심사 처리 화면(careerJudgeForm.jsp)의 같은 클래스를 값 변경 없이 재선언한다
       - 두 화면의 증빙 카드가 같아야 한다는 것이 이 화면의 전제다 */
  .cr-viewer {padding:8px 0;}
  .cr-viewer__f {width:100%; height:520px; border:1px solid #E3E8F0; border-radius:8px;}
  .cr-viewer__i {max-width:100%; border:1px solid #E3E8F0; border-radius:8px;}

  .jm-radio-row {display:flex; gap:18px; align-items:center; font-size:13.5px; color:#3C4658;}
  .jm-radio-row label {display:inline-flex; align-items:center; gap:6px; cursor:pointer; font-weight:400;}

  .jm-jobtype-cascade {display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:8px;}
  .jm-jobtype-cascade select:disabled {background:#F1F3F7; color:#98A2B3;}
  @media (max-width:900px) {.jm-jobtype-cascade {grid-template-columns:repeat(2, minmax(0, 1fr));}}

  .jm-hint {font-size:12px; line-height:1.5; color:#6B7688; margin:6px 0 0;}

  .jm-hint-list {font-size:12.5px; line-height:1.3; color:#6B7688;}

  /* 관리자 공통 design.css 의 h5 가 display:flex 라 가운데 정렬이 제목에 먹지 않는다 */

  /* 검색 영역. careerJudgeList.jsp 의 cr-filterbar 를 값 변경 없이 옮겨 온 것이다 */
  /* design.css 가 select/input 에 별도 규칙을 두고 있어 이 화면 안에서만 시안 값으로 덮는다 */

/* 빈 목록 표시. 퍼블 .empty-state 의 점선 테두리·배경은 쓰지 않는다 - 표 안 한 칸에 들어가는 자리라
   상자를 한 겹 더 그리면 표와 이중 테두리가 된다. h5 는 관리자 공통 design.css 가 display:flex 라
   text-align:center 가 먹지 않아 block 으로 되돌린다 */
.empty-state {border:none; background:none;}
.empty-state h5 {display:block;}

/* ==================== cms/code/codeList.jsp ==================== */
.code-control {
  align-items: flex-start;
  gap: 10px;
}
.list-basic [id^=btndiv] {
  height: 40px;
  line-height: 38px;
  padding: 0 12px;
}
.list-basic [id^=treegridbox] {
  display: flex;
  min-height: 300px;
  padding: 0px;
  border: none !important;
}
.list-basic [id^=treegridbox] .dhx_list-item {
  border: none;
}
    #summarytb {
      border-collapse: collapse;
    }
    #summarytb thead {
      position: sticky;
      top: 0;
      z-index: 10;
      background: #fff;
      box-shadow: 0 2px 4px rgba(0,0,0,0.1);
      border-bottom: 2px solid #ddd;
    }
    #summarytb thead tr:first-child th {
      border-bottom: none;
    }

/* ==================== cms/popup/menuConnectPop.jsp ==================== */
tr[class*=dnone]{
    display : none;
  }

/* ==================== jobnotice/jobnoticeForm_include.jsp ==================== */
/* 4단 셀렉트를 한 줄에 늘어놓되 폭이 좁으면 접힌다. 관리자·사용처 두 스킨에서 함께 쓰므로
       바깥 테이블 폭에 기대지 않고 이 컨테이너 안에서만 배치를 정한다. */
  .jn-jobtype-cascade {display:flex; flex-wrap:wrap; gap:6px;}
  .jn-jobtype-cascade select {flex:1 1 140px; min-width:120px;}
  /* 상시채용 체크는 채용기간 두 칸과 같은 줄에 선다 */
  .jn-always {display:inline-flex; align-items:center; gap:4px; margin-left:12px; vertical-align:middle;}
  /* 상시채용일 때 잠긴 달력칸. readonly 라 타이핑은 원래 막혀 있고, 클릭으로 datepicker 가
       열리는 것만 끊으면 된다. */
  .jn-locked {pointer-events:none; background:#F0F1F4 !important; color:#95A0B3 !important;}
  /* 잠긴 칸은 테두리 안 전체를 회색으로 - 인풋만 칠하면 래퍼 가장자리가 흰 띠로 남는다 */
  .jn-cal:has(.jn-locked) {background:#F0F1F4 !important;}

  /* 달력칸 텍스트 잘림 보정. 두 스킨의 달력 아이콘 배치가 서로 다르다
       (관리자 bcnimda 는 인풋 위에 겹치고, 사용처 web1 은 인풋 옆에 flow 로 놓인다).
       인풋 폭을 100% 로 주면 관리자는 끝 글자가 아이콘에 가리고 사용처는 아이콘이 다음 줄로 떨어지므로,
       아이콘 몫 24px 을 인풋 오른쪽 여백으로 남긴다.
       안쪽 여백을 양쪽 6px + 4px 로 눌러 두 스킨 모두 글자 자리 106px 을 확보한다('2026-10-20' 은 13px 폰트로 71px).
       칸 폭 150px - 근무기간 셀 내부가 338px(실측)이라 두 칸 + '~' 가 한 줄에 선다(170px 로 두면 세로로 쌓인다). */
  .jn-cal {width:150px !important; padding:0 !important; flex-wrap:nowrap;}
  /* 기업명 선택 박스 + [기타] 체크 + 직접입력 칸이 한 줄에 선다 */
  .jn-orgnm {display:flex; flex-wrap:wrap; align-items:center; gap:8px;}
  /* 셀 폭을 다 먹지 않게 고정폭으로 둔다 - 기업명은 짧아 늘려 봐야 빈 칸만 넓어진다.
     늘고 줄지 않으므로 [기타]를 켜 직접입력 칸이 나와도 선택 박스가 그대로 서 있다. */
  .jn-orgnm select {flex:0 0 320px; width:320px;}
  .jn-orgnm input[type="text"] {flex:0 0 320px; width:320px;}
  .jn-orgnm label {display:inline-flex; align-items:center; gap:4px; white-space:nowrap;}
  .jn-cal input[type="text"] {
    width:100% !important; padding:0 28px 0 10px !important; font-size:15px;
    text-overflow:clip; box-sizing:border-box;
  }

/* ==================== jobnotice/jobnoticeList.jsp ==================== */
  /* 카드형/리스트형 전환 아이콘. 관리자 스킨(manager_panel)은 web1/design.css 를 링크하지 않아 여기서 다시 선언한다
       (값은 design.css 의 것이고 이미지 경로만 절대경로로 폈다). */

  /* 카드형. dhx.Grid 는 표만 그리므로 카드는 별도 컨테이너에 직접 그린다. */
  .jn-cards {display:grid; grid-template-columns:repeat(auto-fill, minmax(300px, 1fr)); gap:14px; padding:4px 2px;}
  /* 카드 전체가 수정 화면으로 가는 클릭 대상이다 */
  .jn-card {background:#fff; border:1px solid #E3E8F0; border-radius:10px; padding:18px 20px;
    box-shadow:0 1px 2px rgba(15,31,61,.06), 0 4px 14px rgba(15,31,61,.05); display:flex; flex-direction:column; gap:10px;
    cursor:pointer; transition:border-color .15s, box-shadow .15s;}
  .jn-card:hover {border-color:#2F6FE4; box-shadow:0 4px 14px rgba(15,31,61,.12);}
  .jn-card .check {cursor:default;}
  .jn-card__title {font-size:15px; font-weight:600; color:#0F1F3D; line-height:1.4; word-break:break-all; margin:0;}
  /* 카드 머리 = 선택 체크박스 + 모집상태·등록주체 배지 */
  .jn-card__head {display:flex; align-items:center; gap:8px; flex-wrap:wrap;}
  .jn-card__head .check {flex:none; padding-top:0;}
  /* 기업명 줄. 공고명보다 위계를 낮춘다 */
  .jn-card__org {margin:0; font-size:12.5px; font-weight:600; color:#3C4658; word-break:break-all;}
  /* 한 줄에 하나씩. 가로 배치로는 직종이 여러 줄로 늘어날 때 줄바꿈 지점이 항목 경계와 어긋난다 */
  .jn-card__meta {display:flex; flex-direction:column; gap:4px; font-size:12.5px; color:#6B7688;}
  .jn-card__meta > span {font-size:12.5px; color:#6B7688; line-height:1.5;}
  .jn-badge {display:inline-block; border-radius:999px; padding:3px 10px; font-size:12px; font-weight:700;}
  .jn-badge + .jn-badge {margin-left:4px;}
  .jn-badge--open {background:#E8F1FE; color:#1D5FD6;}
  .jn-badge--close {background:#F1F3F7; color:#6B7684;}
  .jn-badge--expired {background:#FDECEC; color:#D94A4A;}
  /* 상시채용. 프리랜서·사용처 목록과 같은 주황 테두리 */
  .jn-badge--always {background:#fff; color:#E8590C; border:1px solid #FFA94D;}
  /* 마감임박. 프리랜서·사용처 목록의 .badge-amber 와 같은 뜻이다
       (거기는 퍼블 mockup.css 토큰을 쓰고, 관리자 스킨에는 그 토큰이 없어 값으로 적는다). */
  .jn-badge--imminent {background:#FFF4E6; color:#E8590C;}
  /* 직종 네모칸(세분류 한 칸). 프리랜서·사용처 카드의 .job-card__cat 과 같은 모양이며,
       관리자 스킨에는 퍼블 토큰이 없어 값으로 적었다. .jn-card__meta > span 이 색을 갖고 있어 자식 선택자로 받는다. */
  .jn-card__meta > .jn-card__cat {
    align-self:flex-start; max-width:100%; padding:3px 8px;
    background:#F5F6F9; border-radius:4px;
    font-size:12.5px; line-height:1.4; color:#4A5468;
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  }
  /* 행 전체가 수정 화면으로 가는 클릭 대상이다. 손끝에서 알 수 있게 커서를 바꾼다. */
  .dhx_grid-body .dhx_grid-cell {cursor:pointer;}
  .dhx_grid-body .dhx_grid-cell.jn-cell-check {cursor:default;}
  .jn-empty {padding:48px 0; text-align:center; color:#6B7684; grid-column:1/-1;}

  /* 툴바 전체선택 + 선택 건수 */
  .jn-selbar {display:flex; align-items:center; gap:10px; margin:0 0 10px;}
  .jn-selall {display:inline-flex; align-items:center; gap:5px; font-size:13px; color:#3C4658; white-space:nowrap; cursor:pointer;}
  .jn-selcnt {font-size:12.5px; font-weight:700; color:#1D5FD6; min-width:52px;}
input[name*=rstlist]:checked ~ .etctext{display: revert;}

/* ==================== poll/0/pollRstUserModify.jsp ==================== */
.pr-textarea-box {width:99%; border:1px solid var(--colorcf);}
.pr-textarea-box textarea {width:100%; height:150px; border:none; box-sizing: border-box;}
.pr-textarea-box__bottom {font-size:14px; padding:15px 20px 15px 20px;  background:#fbfbfb; color:var(--color666)}
.pr-textarea-box__bottom strong {font-size:14px;}

.etctext{display: none; width:50%;}
input[name*=rstlist]:checked:checked ~ .etctext{display: revert;}

.qstrnktext{display: none;background: var(--blue); border: 1px solid var(--blue); color: var(--white); border-radius:3px; width:30px !important; text-align:center; padding:0px !important;}
input[name*=rstlist]:checked ~ .qstrnktext{display: revert;}

/* ==================== poll/PO04/pollStatisticsFactor1.jsp ==================== */
.group_row_css{
      background:#f7f7f7;
  }

                  .search-wrap .ps-exmark {
                    align-items: inherit;
                  }
                  .ps-exmark:hover .ico-exmark__popup {
                    top: auto; left: auto; transform: translate(3%, 50%);
                  }

/* ==================== poll/include/pollQstAi_include.jsp ==================== */
#aiPanel.surv-box .surv-box__cont .surv-option { display: flex !important; flex-wrap: wrap; gap: 12px 40px; }
#aiPanel, #aiResultArea {
  .surv-box__cont .surv-option {
    display: flex !important;
    flex-wrap: wrap;
    gap: 12px 40px;
  }
}
.ai-btn-refresh {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 0;
  text-decoration: none;
  border-radius: 4px;
}
.ai-btn-refresh:hover { background: rgba(0,0,0,.06); }
.ai-ico-refresh {
  background: url(../../../files/bcnimda/images/common/ico_sch_refresh.png) no-repeat;
  display: block;
  width: 20px;
  height: 20px;
}

/* ==================== poll/include/pollQst_head_include.jsp ==================== */
.no-drag {
  cursor: not-allowed;
}
.ui-sortable-helper {
  pointer-events: none !important;
}
.drop-area-spacer {
  height: 10px;
  margin: 2px 0;
  background: transparent;
  border: none;
  pointer-events: none;
}
.previewdiv {
  width: 100%;
}

/* 문항 유형 드롭다운을 못 누르게 막는 규칙이다. 원래는 pollQst_head_include.jsp 안에서
   <c:if test="${objectinfo eq 'PO0103'}"> 로 감싼 <style> 이었는데(학생비교과-자가평가는
   유형이 고정이라 바꾸지 못하게 한 것), 인라인 style 을 걷어낼 때(1e1023f6) 조건이 빠지고
   전역이 됐다. 그래서 다른 설문(예: 201)에서도 [문항추가] 뒤 유형 드롭다운이 안 눌렸다.
   조건을 body 클래스로 되살린다. 여는 동작 자체(selecter_Init 의 위임 핸들러)는 멀쩡했다. */
.poll-po0103 .surv-selecter>button {
  pointer-events: none;
  background:transparent !important;
}
/* 척도 안내 문구 */
.tritem_iscompyn .survtype-group {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
.comp-scale-notice {
  font-size: 12px;
  color: #888;
  margin-left: auto;
  padding-left: 12px;
  white-space: nowrap;
}

/* ==================== prog/include/cardContent.jsp ==================== */
/* :root{font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Noto Sans KR', 'Apple SD Gothic Neo', 'Malgun Gothic', '맑은 고딕', sans-serif;color:#222} */
/* body{margin:0;background:#f6f8fb;padding:24px} */
.pending_card {margin:18px auto;background:#fff;border-radius:12px;box-shadow:0 6px 20px rgba(20,30,50,0.08);padding:22px}
.pending_card p.lead{margin:0 0 18px;color:#444}
.pending_card details{border:1px solid #e5e7eb;border-radius:8px;padding:10px 14px;background:#fafafa}
.pending_card summary{font-weight:700;cursor:pointer;outline:none;font-size:16px;color:#0b5ed7;transition:color 0.2s ease}
.pending_card summary:hover{color:#dc2626}
.pending_card summary::-webkit-details-marker{color:#3b82f6;margin-right:6px}
.pending_card dl{margin-top:12px}
.pending_card dt{font-weight:600;color:#0f1724;margin-top:10px}
.pending_card dd{margin:4px 0 10px 0;color:#333;line-height:1.5}
.pending_card .note{margin-top:8px;padding:8px 10px;background:#f1f7ff;border-left:4px solid #3b82f6;border-radius:6px;color:#0b2a66}
.pending_card .example{margin-top:8px;background:#fff;border-radius:6px;padding:10px;font-family:monospace;font-size:13px;color:#0b1220;border:1px dashed #ccc}
.pending_card .actions{display:flex;gap:8px;margin-top:18px}
.pending_card .btn{padding:8px 12px;border-radius:8px;border:0;background:#0f1724;color:#fff;font-weight:600;cursor:pointer}
.pending_card .btn.secondary{background:#e6eefc;color:#0b2a66}
.pending_card footer{margin-top:18px;color:#6b7280;font-size:13px}
.pending_card .list_condition {margin-bottom:16px; padding:10px 14px; background:#fafafa; border-radius:6px; color:#0b2a66; font-size:14px; line-height:1.6;}

/* ==================== jobnotice/jobnoticeList.jsp (.list-view) ==================== */
/* 카드형/리스트형 전환 아이콘. 관리자·프리랜서·사용처 세 화면이 같은 마크업을 쓰는데 이 클래스를
   정의하는 곳이 어디에도 없다(옛 kwmf 스킨에 있던 것이고, 그 스킨은 더 이상 링크되지 않는다).
   그래서 스코프를 두지 않는다 - 가두면 나머지 두 화면은 아이콘이 안 보인 채로 남는다.
   ⚠ <li class="card"> 가 퍼블 .card(흰 상자·테두리·그림자·패딩 22px)를 물어 버튼이 상자로 부푼다.
      여기서 그 값을 되돌린다. */
.list-view {display:flex; flex-wrap:wrap; align-self:center; margin:0; padding:0; list-style:none;}
.list-view li {display:inline-block; margin:0 5px 0 0; padding:0; list-style:none;
  background:none; border:0; border-radius:0; box-shadow:none;}
.list-view li a {display:block; width:36px; height:36px; background-repeat:no-repeat; background-position:left top; background-size:36px 36px;}
.list-view li.card a {background-image:url(/files/web1/images/common/ico_list2_off.png);}
.list-view li.card.active a {background-image:url(/files/web1/images/common/ico_list2_on.png);}
.list-view li.list a {background-image:url(/files/web1/images/common/ico_list1_off.png);}
.list-view li.list.active a {background-image:url(/files/web1/images/common/ico_list1_on.png);}

/* ==================== stats/ 관리자 통계 4화면 ====================
   차트 배치. 차트는 시안에 없던 요소라 퍼블 mockup.css 에 대응이 없다.
   카드·머리·표는 퍼블 것을, 필터·버튼·빈상태(.ctm-*)는 certMng.css 를 그대로 쓴다 - 여기에 다시 정의하지 않는다. */

/* 차트 2단·3단 배치. .grid-4 와 같은 gap 을 써야 카드줄과 차트줄의 세로선이 맞는다.
   900px 이하에서 1단이 되는 것도 mockup.css .grid-4 의 미디어쿼리와 같은 기준이다. */
.sts-chart-grid {display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:16px; margin-bottom:16px;}
@media (max-width: 900px) {
  .sts-chart-grid {grid-template-columns:1fr;}
}

/* 차트 한 칸. .ctm-card 와 같은 테두리·그림자를 쓰되 안쪽 여백을 줄인다 —
   toastui 가 캔버스 바깥에 자체 여백을 그려 .ctm-card 의 22px 을 그대로 쓰면 헐거워 보인다. */
.sts-chart-card {background:#FFFFFF; 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:18px 20px;}

/* 차트 제목. 표 제목(h4)과 같은 크기·굵기로 맞춘다 */
.sts-chart-card h4 {margin:0 0 4px; font-size:15px; font-weight:700; color:#182233;}
.sts-chart-card .sts-chart-desc {margin:0 0 12px; font-size:12px; color:#6B7688;}

/* 캔버스 자리. 높이를 지정하지 않으면 toastui 가 0px 로 그려 아무것도 보이지 않는다.
   너비는 지정하지 않는다 — 차트가 컨테이너 폭을 읽어 스스로 맞춘다. */
.sts-chart-box {height:300px;}
.sts-chart-box--tall {height:340px;}

/* 표 위 제목줄. .list-toolbar 는 건수 표시 전용이라 제목을 넣을 자리가 없다 */
.sts-section-head {display:flex; align-items:baseline; gap:10px; margin:24px 0 10px;}
.sts-section-head h4 {margin:0; font-size:15px; font-weight:700; color:#182233;}
.sts-section-head p {margin:0; font-size:12px; color:#6B7688;}

/* 숫자 열. 표에서 자릿수를 비교해 읽는 값이라 오른쪽 정렬한다.
   ⚠ 선택자에 table.grid 를 붙여야 한다 - mockup.css 의 `table.grid th {text-align:left}` 가
   `.sts-num` 단독보다 우선순위가 높아, 머리글만 왼쪽에 남고 값은 오른쪽에 붙어 어긋나 보였다. */
table.grid th.sts-num, table.grid td.sts-num {text-align:right;}

/* 비율 막대. 표 안에서 크기를 눈으로 비교하는 자리라 숫자만으로는 순위가 잘 안 읽힌다 */
.sts-bar {position:relative; height:6px; background:#EEF2F8; border-radius:3px; margin-top:5px;}
.sts-bar span {position:absolute; left:0; top:0; height:100%; border-radius:3px; background:#1D5FD6;}

/* 검색 조건이 비어 있을 때 카드 밑에 붙는 안내. .ctm-empty 는 표 안쪽 전용이라 따로 둔다 */
.sts-note {margin:0 0 16px; font-size:12px; color:#6B7688;}

/* ==================== stats/jobtypeStats.jsp · periodStats.jsp · judgeStats.jsp ==================== */
/* 기간 칸 2개. .calendar 는 manager_panel 의 datepicker 가 붙는 클래스라 지우면 달력이 안 뜬다 */
.filterbar .form-row.sts-form-row-date {flex:1 0 0; min-width:150px;}
/* 검색어 칸(직종별통계). .ctm-form-row 는 certMng.css 에서 max-width:200px 라 직종명이 절반만 보인다 */
.filterbar .form-row.sts-form-row-keyword {flex:0 0 240px; min-width:240px; max-width:240px;}
.filterbar .form-row.sts-form-row-keyword input {width:100%; box-sizing:border-box;}

/* ==================== cert/ ====================
   카드·필터바·버튼·빈상태·배지·통계카드·탭·표는 퍼블(mockup.css) 것을 그대로 쓴다.
   여기 남은 것은 퍼블에 대응이 없는 안내박스와 진위확인 화면 고유 규칙뿐이다. */

/* 서식 안내 박스. 퍼블에는 이 모양의 경고 상자가 없다 */
.ctm-alert-warn {display:flex; gap:12px; border-radius:8px; padding:16px 18px; margin-bottom:20px; font-size:13px; background:#FDF3E2; border:1px solid #F0D6A8; color:#8A5A0B;}
.ctm-alert-warn .ico {font-size:18px;}
.ctm-alert-warn b {display:block; margin-bottom:4px; font-size:13.5px;}

/* ---------------- 증명서 진위확인(AD-CT-005) 화면 ---------------- */
/* certVerifyForm.jsp 고유 규칙. 결과 카드(.cert-verify__*)는 퍼블 원본(web1/mockup.css)을 링크해 쓰고,
   여기에는 퍼블에 없거나 관리자 셸이 덮어 버리는 것만 둔다.
   ⚠ 이 파일이 퍼블 CSS 뒤에 링크되므로 우선순위는 로드 순서로 성립한다. */
.ctv-form-row {max-width:360px;}

.ctv-btnbar {display:flex; gap:8px; margin-top:18px; flex-wrap:wrap;}
/* 표시는 클래스 토글로만 한다 - style.display 를 대입하면 표시 상태가 두 곳에 생긴다 */
.ctv-note {display:none; margin:12px 0 0; padding:12px 14px; border-radius:8px; font-size:13px; font-weight:400;}
.ctv-note.ctv-on {display:block;}
.ctv-note-warn {background:#FDF3E2; border:1px solid #F3DFB6; color:#8A6212;}

/* 카메라 안내는 사용자 화면(certVerify.jsp)과 같은 퍼블 CalloutBox(.alert-box.info)를 쓴다.
   여닫는 것은 ctvSetNote 의 ctv-on 이므로 기본을 감추고, 열릴 때 flex 로 되돌린다 */
#ctvCamNote {display:none; margin:12px 0 0;}
#ctvCamNote.ctv-on {display:flex;}

.ctv-scan {display:none; margin:14px 0 0;}
.ctv-scan.ctv-on {display:block;}
.ctv-scan video {width:100%; max-width:360px; border-radius:10px; background:#000; display:block;}

/* 위변조 의심 안내. .ctm-alert-warn 은 주의(주황)라 색이 달라 따로 둔다 */
.ctv-alert-warn {background:#FDECEA; border:1px solid #F5C6C0; color:#8E2A1F; border-radius:8px; padding:16px 18px; margin:18px 0 0; font-size:13.5px;}
.ctv-alert-warn p {margin:0;}

/* 결과 카드만 감춘다 - 입력폼은 계속 보인다(D-09) */
.ctv-result {display:none; margin-top:16px;}
.ctv-result.ctv-on {display:block;}
#ctvResultArea .ctv-btnbar {display:flex; justify-content:center; margin-top:var(--spacing-2xl);}

/* 관리자 셸이 덮는 것만 되돌린다(값의 출처는 mockup.css .cert-verify__* 다).
   ⚠ 고유번호 칸: bcnimda/layout.css 의 input[type="text"] / input[readonly] 가 속성 선택자라
   퍼블의 클래스 규칙보다 세다 - 아이디로 스코프해 되돌리지 않으면 칸이 눌리고 색이 달라진다. */
#ctvResultArea .cert-verify__banner-desc {margin:0;}
#ctvResultArea .cert-verify__code-input {
  height:44px; line-height:normal; padding:0 var(--spacing-md);
  border:1px solid var(--color-border-default); background:var(--color-bg-subtle);
  font-weight:400; font-family:inherit;
}
#ctvResultArea .cert-verify__info-value {word-break:break-all;}

/* 인쇄물 대조표 5절. 표·제목·빈 상태는 공개면과 같은 퍼블 컴포넌트(mockup.css 의
   .cert-detail__grid / .mentor-detail__section-header / .list-empty-state)가 소유한다 -
   여기서 다시 그리지 않는다. 절 사이 여백·구분선도 퍼블 section-header 가 갖는다. */
#ctvResultArea .ctv-career-section {margin:0;}
/* 관리자 셸은 페이지 제목이 h1 이라 절 제목(26px)이 그보다 커진다 - 이 화면에서만 줄인다 */
#ctvResultArea .mentor-detail__section-title {font-size:var(--font-size-18);}
/* 해시 3자 대조 표. 64자 해시가 한 줄에 안 들어가므로 값 열을 가장 넓게 잡고 왼쪽 정렬·강제 줄바꿈한다
   (공용 cert-detail__grid 는 가운데 정렬·52px 고정 행높이라 해시에는 맞지 않는다). */
table.grid.ctv-diag-table td {height:auto; padding-top:10px; padding-bottom:10px;}
table.grid.ctv-diag-table th:nth-child(1), table.grid.ctv-diag-table td:nth-child(1) {width:16%;}
table.grid.ctv-diag-table th:nth-child(2), table.grid.ctv-diag-table td:nth-child(2) {width:62%; text-align:left; word-break:break-all;}
table.grid.ctv-diag-table th:nth-child(3), table.grid.ctv-diag-table td:nth-child(3) {width:22%;}
/* 좁은 화면에서는 카드 접기를 쓰지 않고 표 그대로 두고 가로 스크롤한다.
   관리자 셸은 사이드바가 239px 고정이라 뷰포트 390px 에서 본문이 145px 밖에 남지 않는다(실측) -
   그 폭에서 64자 지문을 카드로 접으면 글자가 한 자씩 세로로 쪼개져 읽을 수 없다.
   ⚠ 대조표 5절(cert-detail__grid)은 반대로 카드 접기가 맞다 - 값이 짧고 칸 이름이 필요하다.
   여기만 예외인 이유는 값이 64자 고정 문자열이기 때문이다. */
@media (max-width: 900px) {
  #ctvResultArea .table-wrap {overflow-x:auto; -webkit-overflow-scrolling:touch;}
  table.grid.ctv-diag-table {display:table; min-width:520px;}
  table.grid.ctv-diag-table thead {display:table-header-group;}
  table.grid.ctv-diag-table tbody {display:table-row-group;}
  table.grid.ctv-diag-table tr {display:table-row; border:0; border-radius:0; padding:0; margin:0; background:transparent;}
  table.grid.ctv-diag-table th, table.grid.ctv-diag-table td {display:table-cell; width:auto !important;}
  table.grid.ctv-diag-table td {border-bottom:1px solid var(--color-border-default); padding:10px var(--spacing-sm); font-size:var(--font-size-13); font-weight:400;}
  table.grid.ctv-diag-table td::before {content:none;}
}
#ctvResultArea .mentor-detail__section-header {margin:var(--spacing-xl) 0 var(--spacing-md); padding:0 0 var(--spacing-sm);}

/* 빈 상태 제목. 관리자 공통 CSS 가 h5 를 flex 로 만들어 text-align:center 가 먹지 않는다 */
.empty-state h5 {margin:0 0 6px; color:#3C4658; font-size:14px; font-weight:700; justify-content:center;}
.empty-state p {margin:0; color:#6B7688; font-size:13px;}

/* 진위확인 안내문. 퍼블 .page-desc 자리에 쓰지만 카드 안이라 아래 여백이 다르다 */
.ctv-desc {color:#6B7688; font-size:13.5px; margin:0 0 20px;}

/* ==================== 관리자 검색줄(.sch-container) ====================
   관리자 목록의 검색박스를 퍼블 .filterbar 구조로 옮기며 필요한 보강.
   .sch-container 는 필터바와 조건칩줄(.filter-wrap)을 한 그릇에 두는 관리자 전용 껍데기다 -
   조건칩은 퍼블에 없는 기능이고, 검색 JS 가 이 그릇 안에서 둘을 찾는다. */
#iph-content .sch-container { margin-bottom: 16px; }
#iph-content .sch-container > .filterbar { margin-bottom: 0; }
/* 한 칸에 검색분류 셀렉트와 검색어 입력이 같이 서는 줄. 입력이 남는 폭을 쓴다 */
#iph-content .filterbar .form-row__control { gap: 8px; }
#iph-content .filterbar .form-row__control > input[type="text"] { flex: 1 1 0; width: auto; min-width: 0; }
/* 그 줄은 두 칸이 다 들어가야 해서 다른 항목보다 넓게 잡는다 */
#iph-content .filterbar .form-row:has(.form-row__control > select):has(.form-row__control > input[type="text"]) {
  flex-basis: 420px;
  min-width: 420px;
}
/* 날짜 두 칸을 쓰는 줄 */
#iph-content .filterbar .form-row:has(.form-row__control > .search-input-calendar) {
  flex-basis: 380px;
  min-width: 380px;
}
/* 그 줄의 달력 칸. 스킨 design.css 의 .search-input-calendar 는 30px 짜리 껍데기(테두리+달력아이콘)인데,
   퍼블 .filterbar .form-row input[type=text] 가 안쪽 입력을 44px·라운드로 키워 껍데기 밖으로 삐져나온다 -
   껍데기 밑선이 입력칸을 가로질러 밑변이 두 줄로 보인다. 껍데기를 퍼블 치수의 상자로 맞추고
   입력은 그 안을 채우게 한다. 관리자 검색줄 16개 화면 모두 달력 아이콘 button 이 없어 껍데기는 테두리 역할만 한다. */
#iph-content .filterbar .search-input-calendar {
  height: 44px;
  box-sizing: border-box;
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-sm);
  background: var(--color-white);
  overflow: hidden;
}
/* 화면마다 인라인 width(120·128px)가 박혀 있다. 기간 두 칸이 줄 폭을 반씩 나눠 채운다 */
#iph-content .filterbar .form-row__control > .search-input-calendar {
  flex: 1 1 0;
  width: auto !important;
  min-width: 0;
}
#iph-content .filterbar .search-input-calendar:focus-within {
  border-color: var(--color-primary);
}
#iph-content .filterbar .search-input-calendar input[type="text"] {
  height: 100%;
  border-radius: 0;
  background: none;
}
/* AI-GENERATED: 작성일: 2026-09-11 17:20 | 수정일: 2026-09-11 17:20
   검색줄 달력 칸의 달력 아이콘. #iph-content 는 관리자 셸이라 사용자단엔 닿지 않는다.
   바로 위 background:none 과 특정도가 같아 순서로 이긴다 - 이 블록을 위로 옮기지 말 것.
   래퍼 없이 인풋만 쓰는 통계 화면(.sts-form-row-date)까지 함께 잡는다. */
#iph-content .filterbar .search-input-calendar input.calendar,
#iph-content .filterbar .form-row input.calendar {
  background-image: url(/files/bcnimda/images/common/ico_mon.png);
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 32px;
}
/* 앞 항목이 줄을 다 써서 [검색]만 다음 줄에 남을 때, 왼쪽 끝에 홀로 두지 않고 오른쪽 끝으로 보낸다.
   같은 줄에 항목이 있으면 .form-row(flex-grow:1)들이 남는 폭을 다 가져가 이 auto 는 아무 일도 안 한다. */
#iph-content .filterbar > .btn-search {
  margin-left: auto;
}

/* 코드관리 분류 카드 머리 - 제목은 가운데 그대로 두고 [등록]만 오른쪽 끝으로 보낸다.
   th 는 table-cell 이라 flex 로 바꾸면 표 폭 계산이 깨진다 - 절대배치로 뽑는다. */
#iph-content .code-section thead th {
  position: relative;
}
#iph-content .code-section thead th > .btn {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
}

/* 목록 상자는 어댑터가 만든 <div> 한 겹이라 폭이 표 내용까지만 줄어든다(td 는 flex).
   그대로 두면 행의 [수정]이 카드 오른쪽 끝에서 90px 쯤 안으로 들어와 머리의 [등록]과
   선이 어긋난다. 칸을 채우게 해 두 버튼을 같은 선에 세운다. */
#iph-content .code-section td[id^="treegridbox"] > div {
  flex: 1;
  min-width: 0;
}
/* 분류 항목명은 왼쪽정렬. 이름 링크가 flex:1 로 줄을 채워서 상속받은 가운데정렬이 글자에 그대로 걸렸다.
   머리(1차분류 등)는 위 규칙대로 가운데에 둔다. */
#iph-content .code-section .mlist_h3 p > a:first-child {
  text-align: left;
}

/* 셀렉트가 둘 이상인 줄(대/소분류, 년·월 기간)은 셀렉트 폭(200px)만큼만 차지한다.
   한 줄을 통째로 쓰면 옆 항목과 [검색]이 다음 줄로 밀린다 */
#iph-content .filterbar .form-row:has(.form-row__control > select:nth-of-type(2)) {
  flex: 0 0 auto;
}
/* 같은 칸에 검색어 입력이 붙어 있으면(FAQ 구분·분류·검색어) 입력이 쓸 폭까지 늘어난다 */
#iph-content .filterbar .form-row:has(.form-row__control > select:nth-of-type(2)):has(.form-row__control > input[type="text"]) {
  flex: 1 1 auto;
}
/* URI관리(progList·progPendingList·progMenuList): 입력칸 3개(URI·URI설명·MENUID)가 윗줄을 채워
   대/소분류·사용여부·사용자구분을 아랫줄로 모은다 */
#iph-content .prog-filterbar > .form-row:has(> input[type="text"]) {
  flex: 1 0 calc((100% - 40px) / 3);
}
/* 대/소분류는 한 줄을 혼자 쓰고, 사용여부·사용자구분은 그 다음 줄로 내린다 */
#iph-content .prog-filterbar > .form-row:has(#searchcategory) {
  flex: 0 0 100%;
}
#iph-content .prog-filterbar > .form-row:has(#searchcategory) .form-row__control > select {
  flex: 1 1 0;
  width: auto !important;
  min-width: 0;
}
/* bcnimda layout.css 의 select option{font-weight:300} 은 web1 에만 선언된 Pretendard-Light 를
   드롭다운을 처음 열 때에야 받게 해, 대체 폰트 높이로 잡힌 목록 창 아래가 비었다. 이미 받은 400 으로 그린다(donga 와 같은 결과) */
#iph-content select option {
  font-weight: 400;
}
/* 월별 접속자통계 년·월 기간: 칸이 [검색] 앞까지 늘어나고 셀렉트 4개가 폭을 나눠 채운다 */
#iph-content .filterbar > .form-row:has(#searchstartmonth) {
  flex: 1 1 auto;
}
#iph-content .filterbar > .form-row:has(#searchstartmonth) .form-row__control > select {
  flex: 1 1 0;
  width: auto !important;
  min-width: 0;
}
/* 라디오·체크 칸은 입력칸(44px)보다 낮아, 입력칸과 한 줄에 서면 가운데 정렬로 라벨이 처진다 */
#iph-content .filterbar .form-row > .check-wrap {
  min-height: 44px;
  display: flex;
  align-items: center;
}
/* 조건칩줄. 필터바 밖으로 나왔으므로 이어 붙은 것처럼 보이게 한다 */
#iph-content .sch-container > .filter-wrap {
  background: var(--color-bg-filterbar, #ecedf2);
  border: 1px solid var(--color-border-divider, #e9eef8);
  border-top: 0;
  border-radius: 0 0 var(--radius-sm, 8px) var(--radius-sm, 8px);
  padding: 8px 20px;
}
#iph-content .sch-container > .filterbar:has(+ .filter-wrap) { border-radius: var(--radius-sm, 8px) var(--radius-sm, 8px) 0 0; }

/* ==================== 표 위 [15개 보기] 툴바 ==================== */

/* ---------- 표 위 왼쪽 툴바 ----------
   [15개 보기] 셀렉트 자리다. 건수·페이지는 표 아래 왼쪽(.list-page__left)이 맡고,
   .list-count 규칙은 페이징 없이 건수만 찍는 화면이 아직 써서 남겨 둔다. */
/* 게시판을 팝업(NP)으로 열면 *_include.jsp 가 게시판명을 .popinner > h5 로 붙인다.
   등록·상세·수정 스킨의 .page-head 제목과 겹치므로 팝업에서는 h5 하나만 남긴다. */
.popinner > h5 ~ .page-head {
  display: none;
}
#iph-content .list-toolbar,
#pop_wrapper .list-toolbar {
  display: flex;
  align-items: center;
  min-height: 56px;
  padding: 8px;
}
/* 퍼블 layout.css 의 리셋 select{margin:0;padding:0} 이 관리자 layout.css 의
   select{padding:0 20px 0 10px} 을 덮는다 - 특정도가 같고 퍼블이 나중에 실린다.
   글자가 잘린 빈 칸으로 보인다. 구 관리자 목록([15개 보기])과 같은 모양으로 되돌린다.
   #pop_wrapper 는 게시판 목록을 팝업(NP)으로 열 때의 바깥 틀이다. */
#iph-content .list-toolbar select,
#iph-content .btn-align__left select,
#pop_wrapper .list-toolbar select,
#pop_wrapper .btn-align__left select {
  width: auto;
  min-width: 120px;
  height: 34px;
  box-sizing: border-box;
  padding: 0 30px 0 12px;
  border: 1px solid #d6d6d6;
  border-radius: var(--radius-xs, 4px);
  background: #fff url(/files/bcnimda/images/common/user_arr.png) no-repeat right 10px center;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  font-size: 14px;
  line-height: 32px;
  color: #333;
  cursor: pointer;
}
/* AI-GENERATED: 작성일: 2026-09-14 | 수정일: 2026-09-14
   같은 리셋이 등록·수정 표(.write-basic/.write_type_h1)의 셀렉트 여백도 0 으로 만들어 글자가 테두리에 붙는다.
   :where 로 특정도를 (0,1,0)에 묶는다 - 리셋(select)은 이기되, 화면별 셀렉트 규칙(.survtype-group select 등)에는 진다. */
.write-basic :where(select),
.write_type_h1 :where(select) {
  padding: 0 20px 0 10px;
}
/* 표 위 툴바에 버튼줄을 함께 둔 화면(심사배정현황)의 배치.
   공용 .btn-row 는 폼 맨 아래 줄을 가정해 폭 100% 에 윗여백을 갖는다 - 툴바 안에서는 둘 다 푼다.
   :has 로 좁히는 이유: .list-toolbar 는 19개 화면이 쓰는데 나머지는 건수 한 덩어리만 담아,
   space-between 을 무조건 주면 그 화면들의 배치가 함께 바뀐다. */
#iph-content .list-toolbar:has(.btn-row) {
  justify-content: space-between;
  gap: var(--spacing-sm, 12px);
}
#iph-content .list-toolbar .btn-row {
  width: auto;
  margin-top: 0;
  flex-wrap: nowrap;
  align-items: center;
}

/* ---------- 검색줄의 관리자 전용 부분 ----------
   퍼블에 대응이 없어 남는 것만 여기 둔다 - 상세검색 접힘칸, 조건칩줄, 기간 단축버튼. */
/* 상세검색 접힘칸. 필터바 안에서 한 줄을 통째로 쓰고, 열리면 항목들이 필터바와 같은 간격으로 선다 */
#iph-content .filterbar > .sch-advanced { width: 100%; column-gap: 20px; row-gap: 18px; }
/* 상세검색 토글은 아이콘만 있는 정사각 버튼이다 */
#iph-content .sch-container .btn-sch-detail { width: 44px; height: 44px; padding: 0; }
/* 조건칩줄의 [선택 해제]. 링크처럼 보여야 해서 버튼 껍데기를 벗긴다 */
#iph-content .sch-container .filter-wrap .btn-refresh {
  height: auto; padding: 0; background: transparent; border-radius: 0;
  font-size: var(--font-size-13, 13px);
}
/* 기간 단축 버튼은 퍼블에 대응 컴포넌트가 없다. 입력칸과 높이만 맞춘다 */
#iph-content .filterbar .date-btn-group button {
  height: 44px; font-size: var(--font-size-13, 13px);
  border-color: var(--color-border-default, #dadfe6);
}
#iph-content .filterbar .date-btn-group button:first-child { border-radius: var(--radius-sm, 8px) 0 0 var(--radius-sm, 8px); }
#iph-content .filterbar .date-btn-group button:last-child { border-radius: 0 var(--radius-sm, 8px) var(--radius-sm, 8px) 0; }
/* 검색조건 셀렉트 폭을 하나로 통일한다. 화면마다 인라인 width(100px / 250px / 20% …)가 박혀 80~800px 로
   제각각이어서, 69개 화면 마크업에서 인라인 width 를 걷어내는 대신 여기서 !important 로 한 번에 맞춘다.
   직종 4단(.jobtype-cascade)은 그리드로 폭을 나눠 갖는 별도 구성이라 제외한다.
   flex-basis 는 건드리지 않는다 - .form-row 는 세로로 쌓는 flex 라 basis 가 높이로 먹는다. */
#iph-content .filterbar .form-row select:not(.jobtype-cascade select) {
  width: 100% !important;
  max-width: 100%;
  flex: 0 0 auto;
}
#iph-content .filterbar .form-row .form-row__control > select:not(:only-child) {
  width: 200px !important;
}
/* 직종 4단을 .form-row__control 로 감싼 화면은 그리드가 내용폭에 머물러 줄 끝까지 가지 않았다 */
#iph-content .filterbar .form-row__control > .jobtype-cascade {
  flex: 1 1 auto;
  min-width: 0;
}

/* ======================================================================
   사용자단(web/**) 화면 규칙 — 관리자 셸이 없으므로 #iph-content 로 감싸지 않고,
   화면 고유 접두어(.cv- .mt- .cs- 등)로 닫아 퍼블 컴포넌트 이름을 덮지 않는다.
   ====================================================================== */

/* ==================== 사용자단 cert/certVerify.jsp ==================== */
/* cr- 스코프 인라인 스타일. 태그 구조와 클래스명은 두고 CSS 선언만 갱신한다(WebContent/CLAUDE.md) */

  /* D-03/CI-03: 영역 전환은 이 클래스 토글로만 한다 - JSP 를 쪼개면 whitelist NOAUTH 등록과
     데코레이터 분기를 2곳에 걸쳐야 한다.
     시안의 .cert-check 는 align-items:flex-start 라 폭을 안 잡으면 내용 폭으로 쪼그라든다 */
  .cv-panel {display:none; width:100%;}
  .cv-panel.cv-on {display:block;}

  /* 오류 안내(cvRenderError)의 [다시 입력]. .empty-state 는 p 아래 여백이 없어 버튼이 문구에 붙는다 */
  #cvResultBody .empty-state .btn {margin-top:var(--spacing-lg);}

  /* 색은 퍼블 CalloutBox(.alert-box.info / .alert-box.error)가 갖고, 여기서는 토글과 여백만 맡는다 */
  .cv-note {display:none; margin:var(--spacing-sm) 0 0;}
  .cv-note.cv-on {display:flex;}

  .cv-scan {display:none; margin:var(--spacing-md) 0 0;}
  .cv-scan.cv-on {display:block;}
  .cv-scan video {width:100%; max-width:360px; border-radius:var(--radius-sm); background:#000; display:block;}

  /* badge-gray 는 만료 병기 전용이며 진위 상태 색과 겹치지 않아야 한다 */


  /* 절 사이 여백·구분선은 퍼블 .mentor-detail__section-header 가 갖는다 -
     여기서 border-top 을 또 주면 결과 카드 밖 페이지 배경에 선이 두 겹으로 그어진다. */
  .cv-career-section {margin:0;}

  .mt-status {width:100%; border-collapse:collapse; margin-bottom:22px; border:1px solid #E3E8F0; border-radius:10px; overflow:hidden;}
  .mt-status th, .mt-status td {padding:11px 14px; font-size:13px; text-align:left; border-top:1px solid #F1F3F7;}
  .mt-status tr:first-child th, .mt-status tr:first-child td {border-top:none;}
  .mt-status th {width:110px; background:#FAFBFD; color:#6B7688; font-weight:700;}
  .mt-status td {color:#182233;}
  .mt-status td.mt-reject {color:#B33B33; line-height:1.6; word-break:break-all;}

  .mt-btn-row {display:flex; gap:10px; align-items:center; margin-top:22px; padding-top:18px; border-top:1px solid #E3E8F0;}
  .mt-btn-row .mt-right {margin-left:auto; display:flex; gap:10px;}

  .mt-searchbar {display:flex; gap:8px; align-items:center; margin-bottom:14px;}
  .mt-searchbar input[type=text] {
    flex:1; border:1px solid #E3E8F0; border-radius:7px; padding:10px 12px; font-size:13.5px;
    background:#fbfcfe; font-family:inherit; color:#182233;
  }
  .mt-searchbar input[type=text]:focus {outline:2px solid #2F6FE4; outline-offset:1px; border-color:#2F6FE4;}

  .mt-sortbar {display:flex; gap:6px; align-items:center; margin-bottom:18px;}
  .mt-sort {border:1px solid #E3E8F0; background:#fff; color:#6B7688; border-radius:20px; padding:6px 14px; font-size:12.5px; font-weight:700; cursor:pointer; font-family:inherit;}
  .mt-sort.mt-on {border-color:#2F6FE4; color:#1D5FD6; background:#EAF1FD;}

  .mt-btn-disabled {background:#F1F3F7; color:#9AA5B5; cursor:not-allowed;}
  .mt-gate-hint {margin:0; align-self:center; margin-right:auto; font-size:12.5px; color:#6B7688;}
  .mt-btn-row-list {display:flex; gap:10px; justify-content:flex-end; margin-top:16px; padding-top:16px; border-top:1px solid #E3E8F0;}

  /* 멘토 카드 그리드 */
  .mt-grid {display:grid; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); gap:14px; list-style:none; margin:0; padding:0;}
  .mt-mentor {border:1px solid #E3E8F0; border-radius:10px; padding:18px; background:#fff; cursor:pointer; transition:border-color .15s, box-shadow .15s;}
  .mt-mentor:hover {border-color:#2F6FE4; box-shadow:0 4px 14px rgba(15,31,61,.08);}
  .mt-mentor-top {display:flex; gap:14px; align-items:flex-start;}
  .mt-mentor-pic {flex:none; width:64px; height:64px; border-radius:50%; overflow:hidden; background:#F1F3F7; display:flex; align-items:center; justify-content:center;}
  .mt-mentor-pic img {width:100%; height:100%; object-fit:cover;}
  .mt-mentor-pic span {font-size:22px; font-weight:700; color:#9AA5B5;}
  .mt-mentor-info {flex:1; min-width:0;}
  .mt-mentor-name {display:block; font-size:15.5px; font-weight:700; color:#182233; margin-bottom:4px;}
  .mt-mentor-career {display:block; font-size:12.5px; color:#6B7688; line-height:1.5; word-break:break-all;}
  .mt-mentor-topic {margin-top:12px; padding-top:12px; border-top:1px solid #F1F3F7; font-size:13px; color:#3C4658; line-height:1.6; word-break:break-all;}
  .mt-mentor-meta {margin-top:10px; display:flex; gap:6px; align-items:center; flex-wrap:wrap;}

  /* design.css 가 .total-page(strong/span 포함)에 전역으로 큰 폰트를 줘서
       board-skin.css 의 #pageinfo 오버라이드(12.5px)와 같은 값으로 다시 누른다 */
  #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;}

/* ==================== 사용자단 mentor/usr/mentorForm.jsp ==================== */
  .mt-card {background:#FFFFFF; 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;}
  .mt-subtext {margin:0 0 18px; font-size:13px; color:#6B7688;}

  .mt-sec {margin:0 0 10px; font-size:15px; font-weight:700; color:#182233;}
  .mt-sec-gap {margin-top:28px;}

  .mt-row {display:flex; gap:14px; border-top:1px solid #F1F3F7; padding:13px 0;}
  .mt-row:first-child {border-top:none;}
  .mt-label {flex:none; width:120px; padding-top:9px; font-size:13px; font-weight:700; color:#3C4658;}
  .mt-field {flex:1; min-width:0; display:flex; gap:6px; align-items:center; flex-wrap:wrap;}
  .mt-req {color:#D8443C; margin-left:2px;}
  .mt-static {padding-top:9px; font-size:13.5px; color:#182233;}

  .mt-input, .mt-field select, .mt-field textarea {
    border:1px solid #E3E8F0; border-radius:7px; padding:9px 11px; font-size:13.5px;
    background:#fbfcfe; font-family:inherit; color:#182233;
  }
  .mt-input:focus, .mt-field select:focus, .mt-field textarea:focus {outline:2px solid #2F6FE4; outline-offset:1px; border-color:#2F6FE4;}
  .mt-input[readonly] {background:#F1F3F7; color:#6B7688;}
  .mt-w-full {width:100%;}
  .mt-w-half {width:min(320px, 100%);}
  .mt-w-sm {width:110px;}
  .mt-field textarea {width:100%; min-height:120px; resize:vertical; line-height:1.6;}
  .mt-count {width:100%; margin:4px 0 0; font-size:12px; color:#9AA5B5; text-align:right;}
  .mt-hint {width:100%; margin:6px 0 0; font-size:12px; color:#6B7688;}

  .mt-btn-row-form {display:flex; gap:10px; justify-content:flex-end; margin-top:22px; padding-top:18px; border-top:1px solid #E3E8F0;}

  .mt-chk {display:inline-flex; align-items:center; gap:5px; font-size:12.5px; color:#3C4658; cursor:pointer;}

  /* 프로필 사진 (MTI). filebox 이하 DOM id 구조는 inUtilFile.js가 직접 조작하므로 바꾸지 않는다 */
  .mt-pic {width:160px; height:210px; border-radius:8px; overflow:hidden; background:#F1F3F7; border:1px solid #E3E8F0; cursor:pointer;}
  .mt-pic img {width:100%; height:100%; object-fit:cover;}

  /* 경력사항 반복 블록 */
  .mt-career {position:relative; border:1px solid #E3E8F0; border-radius:10px; padding:16px 18px; margin-bottom:12px; background:#fff;}
  .mt-career-head {display:flex; align-items:center; gap:12px; margin-bottom:4px;}
  .mt-career-title {font-size:14px; font-weight:700; color:#182233;}
  .mt-career-del {margin-left:auto;}
  .mt-add {width:100%; border:1px dashed #E3E8F0; background:#FAFBFD; border-radius:10px; padding:13px; font-size:13px; font-weight:700; color:#3C4658; cursor:pointer; font-family:inherit;}
  .mt-add:hover {border-color:#2F6FE4; color:#1D5FD6;}

  .cs-head-row {display:flex; justify-content:flex-end; margin:0 0 12px;}

  .cs-radio-row {display:flex; gap:18px; flex-wrap:wrap; align-items:center;}
  .cs-radio-row label {font-weight:400; font-size:13px; color:#3C4658; display:flex; align-items:center; gap:4px; white-space:nowrap;}

  .cs-hint-text {font-size:13.5px; color:#6B7688; margin:0 0 12px; line-height:1.7;}
  .cs-warning-text {font-size:11.5px; color:#C6404A; margin:6px 0 0;}

  .cs-btn-row {display:flex; gap:10px; justify-content:flex-end; margin-top:20px; padding-top:16px; border-top:1px solid #E3E8F0;}
  .cs-modal-overlay {display:none; position:fixed; left:0; top:0; width:100%; height:100%; background:rgba(15,31,61,.45); z-index:99999;}
  .cs-modal-overlay.cs-open {display:flex; align-items:center; justify-content:center;}
  .cs-modal-box {background:#fff; border-radius:10px; padding:26px 28px; width:420px; max-width:90%; box-shadow:0 10px 30px rgba(15,31,61,.2);}
  .cs-modal-box h4 {margin:0 0 14px; font-size:17px; font-weight:700; color:#182233;}
  .cs-modal-actions {display:flex; gap:10px; justify-content:flex-end; margin-top:18px;}

/* ==================== 사용자단 findPassword.jsp ==================== */
/* 폭은 mockup.css 의 .auth-card(480px)에 맞춘다 - 더 좁게 잡으면 카드가 부모를 넘쳐
       오른쪽으로 밀리면서 카드 안 내용만 중앙에서 어긋난다. */
  .find-tabs{width:480px;max-width:100%;justify-content:center;}
  .find-panel{width:480px;max-width:100%;}
  .find-tab-panel{display:none;}
  .find-tab-panel.active{display:block;}
  .auth-guide{font-size:14px;color:#555;line-height:1.6;margin:4px 0 0;}
  .auth-verify-btn{width:100%;justify-content:center;margin-top:18px;height:52px;font-size:15px;font-weight:600;}
  .field-msg{margin:6px 0 0;font-size:12px;min-height:16px;}
  .field-msg.ok{color:var(--green);}
  .field-msg.err{color:var(--red);}
  /* margin:0 으로 두면 퍼블의 .auth-card > * + * (16px) 까지 지워져 제목에 붙는다 */
  .idfound-list{list-style:none;margin:20px 0 0;padding:0;display:flex;flex-direction:column;gap:10px;}
  .idfound-list li{border:1px solid #d8dce4;border-radius:8px;padding:14px 16px;font-size:16px;font-weight:600;color:#111;background:#f9fafc;text-align:center;}
  /* 소셜 가입 계정은 아이디가 아니라 안내문이다 - 같은 굵기로 두면 아이디처럼 읽힌다 */
  .idfound-list li.is-social{font-size:14px;font-weight:400;color:#555;}
  @media (max-width:744px){
    .find-tabs, .find-panel{width:100%;}
  }


/* ==================== 사용자단 main.jsp ==================== */
#popup_modal_1 button {line-height:normal; padding:6px 12px; margin:2px; border:1px solid #D5DBE5;
        border-radius:6px; background:#fff; color:#182233; font-size:13px; cursor:pointer;}
      #popup_modal_1 button:hover {border-color:#1D5FD6; color:#1D5FD6;}

/* ==================== 사용자단 member/org/talentSearch.jsp ==================== */

/* ==================== 사용자단 recruit/apirecruit/jobkoreaList.jsp ==================== */
#calendarDiv {position: relative; padding-top: 56%; width: 100%; height: 0;}
#calendarDiv > iframe {position: absolute; top: 0;left: 0; width: 100%; height: 100%;}

/* ==================== 사용자단 jobnotice/jobnoticeView.jsp ==================== */
.job-detail__jobtype {white-space:normal; word-break:keep-all;}

/* ======================================================================
   관리자(bcnimda) 보정 절 — 이 파일은 퍼블 CSS 뒤에 실린다
   ====================================================================== */

/* ==========================================================================
   [AI-GENERATED] 2026-09-01 — 퍼블(web1) 기준 화면용 관리자 보정
   ---------------------------------------------------------------------------
   퍼블에 대응 규칙이 없어 관리자쪽에서만 채워야 하는 것만 둔다.
   본문 영역(#iph-content) 밖으로 새지 않게 전부 그 스코프를 붙인다.

   1) 셸 보정 - 퍼블 CSS 가 관리자 셸을 덮는 두 곳(실측 확인)
      .gnb  : 퍼블의 position:absolute/flex/padding 때문에 GNB 가 로고 위를 덮었다
      body  : 퍼블 기본 16px, 관리자 기준은 14px
   2) 관리자에만 있는 마크업(공용 페이저 .list-page 등)을 퍼블 값에 잇는 규칙
   ========================================================================== */

/* ---------- 셸 보정 ---------- */
/* 퍼블 CSS 가 이 파일보다 나중에 로드돼 특정도가 같으면 퍼블이 이긴다 -
   body 는 html 을 덧붙여 한 단계 올린다(.gnb 는 #iph-header 로 이미 이긴다). */
html body {
  font-size: 14px;
}
#iph-header .gnb {
  display: block;
  position: relative;
  width: auto;
  padding: 0;
  column-gap: normal;
  /* 퍼블이 높이를 56px 로 덮으면 헤더 안쪽(55px)보다 1px 커지고, 헤더가 align-items:center 라
     그 1px 이 위아래로 나뉘어 활성 메뉴 밑줄이 헤더 경계선 아래로 떨어져 보였다. */
  height: 100%;
}

/* ---------- 관리자 등록/수정 폼 카드(.card > .form-grid) ----------
   .form-row label 은 "항목 이름"용(15px/600)이라, 체크·라디오 옆 선택지 글자까지 굵어졌다.
   선택지는 값이지 항목 이름이 아니므로 본문 굵기로 되돌린다.
   (.input-align 은 관리자 선택지 묶음, .jn-orgnm 은 일자리공고 기업명 줄의 [기타] 체크) */
/* 폼 안의 "고칠 수 없는 값" 표시. 입력칸과 같은 줄 높이로 서서 라벨-값 간격이 입력칸 줄과 맞는다.
   관리자 팝업(#iph-content 밖)에서도 써야 해서 스코프를 붙이지 않는다 - 새 클래스라 충돌하지 않는다. */
.form-row__value {
  margin: 0;
  line-height: 24px;
  font-size: var(--font-size-15, 15px);
  color: var(--color-gray-900, #182233);
  word-break: break-all;
}

/* 관리자 팝업의 카드 제목. 퍼블 .card h3 는 항목 라벨과 같은 15px/여백 4px 이라
   제목인지 항목인지 구분이 안 되고 첫 항목과 맞붙는다. */
#pop_wrapper .card > h3 {
  margin-bottom: 14px;
  font-size: 16px;
  font-weight: 700;
}

/* IP 네 칸 + 마침표. 칸은 가운데 정렬이라 숫자가 점을 기준으로 나란히 선다. */
.ip-input {
  display: flex;
  align-items: center;
  gap: 6px;
}
.ip-input input[type="text"] {
  width: 72px;
  text-align: center;
}
.ip-input > span {
  color: var(--color-gray-500, #6B7684);
}

/* 동의서 등록/수정은 기본정보 카드 다음에 안내상자가 온다. .card 에는 바깥 여백이 없어
   (.card + .card 만 16px) 카드 밑선과 안내상자가 맞붙는다. 그 카드에만 걸리도록
   .pc-block 으로 좁힌다 - .card + .line-topbox 로 두면 다른 화면까지 벌어진다. */
#iph-content .card.pc-block + .line-topbox {
  margin-top: 24px;
}

/* 카드 제목. 공용 .card h3 는 15px/600 이라 바로 아래 .form-row label(15px/600)과
   글자가 같아 항목명인지 카드 제목인지 구분되지 않았다 - 크기를 키우고 밑줄로 가른다. */
#iph-content .card > h3.card-title {
  margin: 0 0 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--color-border, #E5E8EB);
  font-size: 17px;
  font-weight: 700;
  color: var(--color-gray-900, #111);
}

/* 동의서 등록/수정의 하단 버튼줄은 폼 바깥에 있어 카드와 형제가 아니다 - 3194행의
   .card + .btn-align 이 걸리지 않아 마지막 카드에 맞붙는다. 같은 구조인 화면이 더 있을 수 있어
   .pc-block 으로 이 두 화면만 잡는다(기본정보 카드가 폼 첫 카드다). */
#iph-content form:has(> .card.pc-block) + .btn-align {
  margin-top: var(--spacing-md);
}

/* 동의서 카드 사이에는 항목 순번을 나르는 <input type="hidden"> 이 형제로 끼어 있어
   .card + .card 가 끊긴다 - 기본정보(.pc-block) 를 뺀 카드에 같은 간격을 직접 준다. */
#iph-content form:has(> .card.pc-block) > .card:not(.pc-block) {
  margin-top: 16px;
}

/* 확정된 동의서는 본문을 에디터 없이 그대로 찍는다(.personal-content). 그 안의 표는 에디터로
   만든 것이라 클래스가 없어, 구 스킨에서는 .write-basic table 규칙이 후손으로 걸려 폭·테두리를
   받고 있었다 - 카드로 옮기면서 그 밖이 됐으므로 같은 자리를 여기서 잇는다. */
#iph-content .card .personal-content table {
  width: 100%;
}
#iph-content .card .personal-content th,
#iph-content .card .personal-content td {
  border: 1px solid var(--color-border, #E5E8EB);
  padding: 8px 12px;
}

/* .form-row 는 세로 flex 라 안에 놓인 버튼이 칸 너비만큼 늘어난다 - 글자 폭만 차지하게 둔다. */
#iph-content .card .form-row > .btn {
  align-self: flex-start;
}

/* ---------- 동의서 미리보기 팝업(privacyConsentPreviewPop) ---------- */
/* #popup-title 은 position:absolute(popup.css) 라 본문을 밀지 않는다. 제목 높이(56px)만큼
   비켜 준 적이 없어 첫 동의 박스가 제목 바에 맞붙어 있었다(2026-09-28 실측: 간격 -1px). */
#popup-wrapper #popup-center {
  padding-top: 88px;
}
/* 동의 박스 사이도 붙어 있었다 - 카드끼리와 같은 간격으로 띄운다. */
#popup-wrapper .popup-center > .personal-content + .personal-content {
  margin-top: 16px;
}
/* 하단 [닫기]. popup.css 는 구 스킨 .btn-basic 만 알아서 퍼블 .btn 은 오른쪽 정렬만 먹고
   모양이 없었다 - mockup.css 를 실어 모양을 되찾고, 버튼줄 여백만 여기서 잡는다. */
#popup-wrapper .popup-center > .btn-align {
  margin-top: 24px;
}

/* 첨부 [파일 선택]은 퍼블 폼 규칙이 인풋을 height:44px 로 키우면서 상자 위쪽에 붙어 있었다.
   안쪽 버튼·파일명은 shadow 내용이라 align-items 로는 브라우저에 따라 움직이지 않는다
   (display:flex 만으로는 크롬 정식 빌드에서 그대로였다 - 2026-09-23 실측).
   높이를 내용에 맡기고 위아래 여백을 같이 줘, 어느 브라우저에서나 가운데로 온다. */
#iph-content .card .form-row input[type="file"] {
  height: auto;
  min-height: 44px;
  padding: 10px 16px;
  box-sizing: border-box;
}

#iph-content .card .form-row .input-align label,
#iph-content .card .form-row .jn-orgnm label,
#iph-content .card .form-row label:has(> input[type="checkbox"]),
#iph-content .card .form-row label:has(> input[type="radio"]) {
  font-weight: 400;
  align-items: center;
}

/* ---------- 관리자 공용 페이저(.list-page)를 시안 .pagination 모양으로 ----------
   fncSetPagination(inlab.js)이 .list-page__center 에 <a> 를 찍는다. 시안은 <button> 이라
   pubskin.css 의 .pagination 규칙이 안 걸린다 - 같은 값으로 여기서 이어 준다.
   좌측 "총게시물 N, 페이지 x / y" 자리잡기는 .list-page__left 절대배치가 하고 여기서는 글자만 맞춘다. */
#iph-content .list-page {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-top: 32px;
}
#iph-content .list-page__left {
  font-size: 13px;
  color: var(--color-gray-500, #666);
}
#iph-content .list-page__right {
  display: none;
}
#iph-content .list-page__center {
  display: flex;
  align-items: center;
  gap: 8px;
}
#iph-content .list-page__center a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: none;
  /* --radius-xs 를 정의하는 web1/layout.css 는 관리자 셸이 싣지 않는다 - 미정의 토큰을 가리키면
     선언이 무효가 되어 0(각진 모서리)으로 떨어지므로 폴백이 필수다. */
  border-radius: var(--radius-xs, 4px);
  background: none;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--color-gray-700, #333);
  text-decoration: none;
}
#iph-content .list-page__center a.page-num--active {
  background: var(--color-white, #fff);
  border: 1px solid var(--color-primary, #2d65f2);
  color: var(--color-primary, #2d65f2);
  font-weight: 600;
}
/* 처음/이전/다음/끝은 이미지 아이콘이라 시안의 화살표 버튼과 같은 테두리 상자로 감싼다 */
#iph-content .list-page__center a:has(img) {
  background: var(--color-white, #fff);
  border: 1px solid var(--color-border, #d8dce4);
}

/* ---------- 페이지 머리(제목 + 안내문구) ----------
   관리자 본문은 #iph-content 가 이미 32px 패딩을 갖고 있어, 기본값 `.page-head{padding:24px 32px 0}`
   을 그대로 두면 좌우가 두 번 들어간다. 시안의 `.content-area .page-head` 값으로 맞춘다. */
#iph-content .page-head {
  padding: 0 0 16px;
  border-bottom: 1px solid #aab4c1;
  /* 위 페이저와 같은 이유로 폴백을 붙인다(layout.css 미로드 화면에서 0 으로 떨어졌다) */
  margin-bottom: var(--spacing-2xl, 32px);
}

/* ---------- 페이저 화살표를 퍼블 아이콘으로 ----------
   퍼블은 20x20 선 SVG(#767676, stroke 1.6, round), 관리자 공용 페이저는 PNG 다.
   마크업은 건드리지 않고 img 를 감춘 뒤 같은 스펙의 mask 아이콘을 씌운다.
   처음·끝(«, »)은 퍼블에 없는 버튼이라 같은 선 스펙으로 이중 화살표를 만든다. */
#iph-content .list-page__center a img {
  display: none;
}
#iph-content .list-page__center a:has(img)::before {
  content: "";
  width: 20px;
  height: 20px;
  background-color: #767676;
  -webkit-mask: var(--pager-ico) no-repeat center / 20px 20px;
  mask: var(--pager-ico) no-repeat center / 20px 20px;
}
#iph-content .list-page__center a:has(img[src*="page_f"]) { --pager-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M10.5 5L5.5 10L10.5 15M15.5 5L10.5 10L15.5 15' stroke='%23767676' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
#iph-content .list-page__center a:has(img[src*="page_p"]) { --pager-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M12.5 5L7.5 10L12.5 15' stroke='%23767676' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
#iph-content .list-page__center a:has(img[src*="page_n"]) { --pager-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M7.5 5L12.5 10L7.5 15' stroke='%23767676' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
#iph-content .list-page__center a:has(img[src*="page_l"]) { --pager-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M9.5 5L14.5 10L9.5 15M4.5 5L9.5 10L4.5 15' stroke='%23767676' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }

/* ---------- 체크박스·No. 열 폭 최소화 ----------
   퍼블 표는 모든 셀에 좌우 16px 패딩을 줘서 앞쪽 두 열이 불필요하게 넓었다.
   ⚠ 이 표들은 table-layout:fixed 로 그려진다(실측). fixed 에서는 min-width 가 안 먹고
     지정한 width 가 그대로 열 폭이 되므로, 1% 같은 상대값이면 3자리 숫자가 세로로 잘린다 -
     반드시 px 로 준다. No. 3자리 ≈ 24px + 패딩 16px → 여유 두어 44px,
     체크박스는 16px + 패딩 16px → 34px.
   열 위치는 체크박스 열 유무에 따라 한 칸 밀리므로 :has() 로 갈라 잡는다(마크업은 안 건드린다). */
#iph-content table.grid th:first-child:has(input[type="checkbox"]),
#iph-content .table-basic > table th:first-child:has(input[type="checkbox"]),
#iph-content table.grid:has(thead th input[type="checkbox"]) td:first-child,
#iph-content .table-basic > table:has(thead th input[type="checkbox"]) td:first-child {
  width: 34px;
  padding-left: 8px;
  padding-right: 8px;
  white-space: nowrap;
}
#iph-content table.grid:has(thead th input[type="checkbox"]) th:nth-child(2),
#iph-content .table-basic > table:has(thead th input[type="checkbox"]) th:nth-child(2),
#iph-content table.grid:has(thead th input[type="checkbox"]) td:nth-child(2),
#iph-content .table-basic > table:has(thead th input[type="checkbox"]) td:nth-child(2),
/* 체크박스 열이 없는 표는 첫 칸이 No. 다.
   ⚠ table.grid 와 :not() 사이에 공백을 두면 후손 선택자가 돼 규칙이 걸리지 않는다(실제로 안 걸렸다) */
/* 세로표(항목/내용)는 첫 칸이 라벨이라 tbody 의 th 로 갈라낸다 -
   여기에 50px·8px 이 걸리면 라벨이 잘리고 퍼블 table.grid th 의 16px 패딩도 사라진다 */
#iph-content table.grid:not(:has(thead th input[type="checkbox"])):not(:has(tbody th)) th:first-child,
#iph-content table.grid:not(:has(thead th input[type="checkbox"])):not(:has(tbody th)) td:first-child,
#iph-content .table-basic > table:not(:has(thead th input[type="checkbox"])):not(:has(tbody th)) th:first-child,
#iph-content .table-basic > table:not(:has(thead th input[type="checkbox"])):not(:has(tbody th)) td:first-child {
  width: 50px;
  padding-left: 8px;
  padding-right: 8px;
  white-space: nowrap;
}
/* 화면마다 th 에 인라인 width 가 박혀 있어(체크박스 40px) !important 로만 덮인다 */
#iph-content th[style*="width:40px"],
#iph-content th[style*="width: 40px"] {
  width: 34px !important;
}

/* ==========================================================================
   [AI-GENERATED] 2026-09-01 — 관리자 공통 마크업을 퍼블(web1) 기준 모양으로
   ---------------------------------------------------------------------------
   관리자 공통 마크업(.search-box / .table-basic)을 퍼블 컴포넌트(.filterbar / table.grid)와
   같은 값으로 그려 준다. HTML 구조·클래스명은 건드리지 않는다(WebContent/CLAUDE.md).
   토큰(--color-*)은 퍼블 layout.css 에만 있어 이 파일 단독 로드 화면에서는 비어 있다 -
   실제 값을 쓰고 토큰은 폴백으로만 얹는다.
   ========================================================================== */

/* ---------- 레이어팝업 안의 퍼블 버튼 배경 되살리기(재동기화 대비) ----------
   퍼블 mockup.css 의 ".popup-modal button {background:transparent}" 를 ".popup-modal > button" 으로
   좁혀 고쳤지만, 퍼블 파일은 화면 단위로 원본에서 다시 옮겨오므로 자손 선택자가 되살아날 수 있다.
   이 절은 그 안전망이며 자손 선택자를 하나 더 얹어 (0,2,0)으로 이긴다. */
.popup-modal .btn-primary { background: var(--color-primary, #2d65f2); }
.popup-modal .btn-primary:hover { background: var(--color-primary-hover, #1f4fd1); }
.popup-modal .btn-ghost { background: var(--color-white, #fff); }
.popup-modal .btn-ghost:hover { background: var(--color-bg-subtle, #f5f6f9); }
.popup-modal .btn-outline { background: var(--color-white, #fff); }
.popup-modal .btn-outline:hover { background: var(--color-primary-bg, #eaf1fd); }
.popup-modal .btn-danger { background: var(--red, #d64545); }

#iph-content .list-count {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--font-size-15, 15px);
}
#iph-content .list-count-label {
  color: var(--color-gray-500, #666);
  font-weight: 400;
}
#iph-content .list-count-value {
  color: var(--color-gray-900, #111);
  font-weight: 600;
}

/* ---------- 퍼블 필터바의 관리자 전용 보강 ----------
   퍼블 .filterbar 는 한 줄 배치만 정의한다. 심사 목록의 직종 4단 셀렉트가 한 줄을 통째로
   차지해야 해서 줄바꿈이 필요하다 - 화면마다 두지 않고 여기서 한 번만 준다. */
#iph-content .filterbar--wrap {
  flex-wrap: wrap;
}
#iph-content .filterbar .form-row.jobtype-filter {
  flex: 1 1 100%;
  max-width: none;
}
/* 직종 4단 연동 셀렉트. 퍼블에 .jobtype-cascade 가 있지만 관리자 본문 안에서는 4칸 그리드로 세운다 */
#iph-content .jobtype-cascade {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--spacing-xs, 8px);
}
#iph-content .jobtype-cascade select:disabled {
  background: var(--color-bg-muted, #f1f3f7);
  color: var(--color-text-tertiary, #767676);
}
@media (max-width: 900px) {
  #iph-content .jobtype-cascade { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* 목록 안 상세 진입 링크. 퍼블 목록은 이 칸이 평문이라 셀 본문색을 물려받고
   링크임은 hover 밑줄로만 알린다 */
#iph-content .list-link {
  color: inherit;
  font-weight: inherit;
}
#iph-content .list-link:hover { text-decoration: underline; }
#iph-content .list-muted { color: var(--color-text-tertiary, #767676); }

/* ---------- 화면 제목 줄(.page-head) ----------
   퍼블 CSS 를 링크한 화면은 mockup.css 값을 쓰고, 나머지 화면은 퍼블을 싣지 않으므로
   여기서 같은 값을 준다. 본문(#iph-content)이 이미 좌우 패딩을 가져 좌우는 0 이다. */
#iph-content .page-head {
  display: block;
  padding: 0 0 16px;
  border-bottom: 1px solid #aab4c1;
  margin-bottom: var(--spacing-2xl, 32px);
}
#iph-content .page-head .title-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
}
#iph-content .page-head .title-row h1 {
  margin: 0;
  font-size: 26px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0;
  color: #111;
}
#iph-content .page-head .page-desc {
  margin: 4px 0 0;
  font-size: 16px;
  line-height: 1.5;
  color: #666;
}
/* 화면이 자기 제목 줄을 갖고 있으면 데코레이터가 만든 자동 제목은 접는다 */
#iph-content:has(.page-head:not(.page-head--auto)) .page-head--auto {
  display: none;
}

/* ---------- 머리 없는 목록 표(.table-wrap--rows) ----------
   코드관리처럼 열 머리 없이 행만 늘어놓는 목록이다. 셀 테두리 없이 행 구분선만 남긴다. */
.table-wrap--rows > table > tbody > tr > td {
  height: 44px;
  padding: 0 16px;
  border: 0;
  border-bottom: 1px solid var(--color-border-divider, #e9eef8);
  line-height: var(--line-height-base, 1.5);
  color: var(--color-gray-700, #333);
}
.table-wrap--rows > table > tbody > tr:last-child > td {
  border-bottom: 0;
}
.table-wrap--rows > table > tbody > tr:hover > td {
  background: var(--color-gray-75, #fafbfd);
}

/* 목록 No. 칸은 가운데 정렬에 흐린 글씨다.
   체크박스가 있는 선택형 목록은 칸 전체를 왼쪽정렬하므로 정렬만 빼 준다 */
#iph-content table.grid:not(:has(input[type="checkbox"])) td.col-no,
#iph-content .table-basic > table:not(:has(input[type="checkbox"])) td.col-no {
  text-align: center;
}
#iph-content table.grid td.col-no,
#iph-content .table-basic > table td.col-no {
  color: var(--color-text-tertiary, #767676);
}

/* ---------- 표에서 직접 고치는 칸 ----------
   URI 관리처럼 표에서 값을 고치고 한 번에 저장하는 화면의 입력칸이다.
   칸 안에 꽉 차게 넣어 편집 중에도 열 폭이 흔들리지 않게 한다. */
#iph-content .table-basic .ing-edit,
#iph-content table.grid .ing-edit {
  width: 100%;
  height: 32px;
  box-sizing: border-box;
  padding: 0 8px;
  border: 1px solid var(--color-primary, #2d65f2);
  border-radius: var(--radius-xs, 4px);
  background: var(--color-white, #fff);
  font-family: inherit;
  font-size: 13px;
  color: var(--color-text-heading, #111);
}
/* 고친 칸 표시(화면이 addCellCss 로 붙인다) */
#iph-content .table-basic td.bg1,
#iph-content table.grid td.bg1 {
  background: #fff8e1;
}

/* ---------- 목록 표 열 폭을 내용에 맞춘다 ----------
   관리자 전역 리셋(layout.css)이 모든 table 에 table-layout:fixed 와 word-break:break-all 을 건다.
   fixed 는 열 폭을 내용과 무관하게 고정해 날짜·상태·버튼 칸이 두 줄로 접혔고, break-all 은
   한글 단어 중간을 잘랐다. 목록 표(thead 가 있는 것)만 auto 로 돌리고 넘치면 가로 스크롤로 흘린다.
   상세·입력 표는 손대지 않는다. */
#iph-content .table-wrap > table.grid,
#iph-content table.grid {
  table-layout: auto;
  /* normal 로는 부족하다 - 한글은 글자 사이에서 끊을 수 있어 브라우저가 열을 안 넓히고
     이름을 세 줄로 접었다. keep-all 이면 띄어쓰기에서만 끊어 열 폭이 낱말 길이에 맞는다.
     낱말이 칸보다 길 때만 overflow-wrap 이 끊어 준다. */
  word-break: keep-all;
  overflow-wrap: break-word;
}
#iph-content .table-wrap {
  overflow-x: auto;
}
/* 날짜·상태·버튼처럼 짧은 값만 들어가는 칸은 줄바꿈 자체를 막는다.
   .nowrap 은 표를 그리는 쪽(inGridTable.js)이 값이 짧을 때 붙인다 */
#iph-content .table-wrap > table.grid td.center,
#iph-content .table-wrap > table.grid td.nowrap,
#iph-content table.grid td.center,
#iph-content table.grid td.nowrap {
  white-space: nowrap;
}

/* ---------- 퍼블 CSS 를 직접 링크한 화면의 레이어팝업 여백 ----------
   관리자 모달은 래퍼(.content)가 여백을 갖는 전제인데, 퍼블 web1/mockup.css 는 같은 셀렉터를
   padding:0 4px 0 0 으로 두어 왼쪽이 0 으로 눌렸다.
   모달은 body 직속이라 #iph-content 로 감쌀 수 없어 관리자 셸이 있는 문서인지로 좁힌다. */
body:has(#iph-content) .popup-modal .content {
  padding: 16px 32px 32px 32px;
}

/* ======================================================================
   개인정보 동의서 블록(web1) — 회원가입 STEP1 / 회원탈퇴 안내문
   퍼블 web1/mockup.css 의 .consent-block/.consent-head/.consent-check 는 그대로 쓰고,
   #jfForm1(joinForm1) / #wdConsent(withdraw) / #ojConsent(orgJoinForm) 로 스코프를 잡아
   다른 화면에 새지 않게 한다.
   ⚠ 이 절만 관리자(insite)가 아니라 사용자(web1) 화면 대상이다.
   ====================================================================== */

/* 동의 블록이 2개 이상이면 테두리가 맞붙는다 - .consent-block 에 margin 이 없고
   부모 <form> 에도 gap 이 없다(.step-card 의 gap:16px 은 form 바깥까지만 먹는다). */
#jfForm1,
#wdConsent {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* 가입 동의 항목 접기/펼치기(inConsentAccordion.js) - joinForm1 / orgJoinForm.
   항목을 카드 여러 장이 아니라 한 박스 안의 줄로 보인다. 처음엔 본문을 접어 두고,
   필수 항목은 본문을 끝까지 내리기 전까지 체크박스를 흐리게 잠근다. */
.consent-accordion {
  display: flex;
  flex-direction: column;
  border: 1px solid #d8dce4;
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
}
.consent-accordion .consent-block {
  border: 0;
  border-radius: 0;
  padding: 16px 20px;
  gap: 12px;
}
.consent-accordion .consent-block + .consent-block {
  border-top: 1px solid #eceef3;
}
.consent-accordion .consent-block:not(.is-open) .consent-doc {
  display: none;
}
.consent-accordion .consent-toggle {
  margin-left: auto;
  border: 0;
  background: none;
  padding: 4px 0;
  font-size: 14px;
  color: #666;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
}
.consent-accordion .consent-toggle::after {
  content: "";
  width: 7px;
  height: 7px;
  border-right: 2px solid #888;
  border-bottom: 2px solid #888;
  transform: rotate(45deg);
  margin-top: -4px;
  transition: transform .2s;
}
.consent-accordion .consent-block.is-open .consent-toggle::after {
  transform: rotate(-135deg);
  margin-top: 4px;
}
.consent-accordion .consent-hint {
  margin: -6px 0 0;
  font-size: 13px;
  color: #e5484d;
}
.consent-accordion .consent-block.is-read .consent-hint {
  display: none;
}
.consent-accordion .consent-check:has(input[aria-disabled="true"]) {
  color: #999;
  cursor: not-allowed;
}
.consent-accordion .consent-check input[aria-disabled="true"] {
  opacity: .5;
  cursor: not-allowed;
}

/* 탈퇴 화면은 위의 경고 박스(.alert-box), 아래 비밀번호 입력(.form-grid)과 붙지 않게 띄운다 */
#wdConsent {
  margin: 16px 0;
}

/* 퍼블 값은 자리표시자 한 줄 기준의 height:100px/overflow:hidden 이라 약관 전문이 잘린다.
   스크롤로 바꾸고 높이는 320px 로 잡았다 - 필수 동의 본문(428px)에서 표 세 칸이 다 들어온다.
   전체 높이까지 늘리면 [다음] 버튼이 첫 화면 밖으로 밀려난다. */
#jfForm1 .consent-doc,
#wdConsent .consent-doc,
#ojConsent .consent-doc {
  height: auto;
  max-height: 320px;
  overflow-y: auto;
}

/* 관리자 에디터가 만든 본문 HTML(문단 + 수집항목 표) */
#jfForm1 .consent-doc p,
#wdConsent .consent-doc p,
#ojConsent .consent-doc p {
  margin: 0 0 10px;
}
#jfForm1 .consent-doc p:last-child,
#wdConsent .consent-doc p:last-child,
#ojConsent .consent-doc p:last-child {
  margin-bottom: 0;
}
#jfForm1 .consent-doc table,
#wdConsent .consent-doc table,
#ojConsent .consent-doc table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 10px;
}
#jfForm1 .consent-doc th,
#jfForm1 .consent-doc td,
#wdConsent .consent-doc th,
#ojConsent .consent-doc th,
#wdConsent .consent-doc td,
#ojConsent .consent-doc td {
  border: 1px solid #d8dce4;
  padding: 8px 10px;
  text-align: left;
  vertical-align: top;
}
/* 라벨 칸은 width:1% + nowrap 으로 "가장 긴 라벨이 한 줄로 들어가는 폭"에서 멈춘다.
   고정 폭(132px)이면 라벨보다 넓어 내용 칸을 그만큼 잡아먹었다. */
#jfForm1 .consent-doc th,
#wdConsent .consent-doc th,
#ojConsent .consent-doc th {
  width: 1%;
  background: #eceef3;
  color: #333;
  font-weight: 600;
  white-space: nowrap;
}
/* 표 머리행(구분/내용). 첫 칸은 tbody 라벨 칸과 폭을 맞춰 세로줄이 이어지게 두고,
   둘째 칸만 나머지를 차지하게 푼다 - 안 풀면 라벨 폭으로 같이 눌린다. */
#jfForm1 .consent-doc thead th + th,
#wdConsent .consent-doc thead th + th,
#ojConsent .consent-doc thead th + th {
  width: auto;
}
#jfForm1 .consent-doc thead th,
#wdConsent .consent-doc thead th,
#ojConsent .consent-doc thead th {
  text-align: center;
}

/* 선택 항목 배지 - 퍼블 .req-badge 는 파란 "필수" 전용이라 선택은 회색으로 구분한다 */
#jfForm1 .req-badge.opt,
#wdConsent .req-badge.opt,
#ojConsent .req-badge.opt {
  background: #f1f3f7;
  color: #666;
}

/* 편집 불가 입력칸 배경 — 퍼블은 :disabled 에만 걸어 뒀는데 우리 폼은 값을 같이 보내야 해서
   readonly 를 쓴다. 퍼블과 같은 스코프·같은 값으로 [readonly] 만 덧댄다 -
   cert-verify__code-input 처럼 .form-row 밖의 readonly 입력은 그대로 둔다. */
.form-row input:not([type="radio"]):not([type="checkbox"]):not(.datepicker__input)[readonly],
.form-row select[readonly],
.form-row textarea[readonly] {
  background: var(--color-bg-subtle);
  color: var(--color-text-secondary);
  cursor: not-allowed;
}

/* 경력 등록·수정은 좌우 2카드(career-form__cols)라, 카드 안에 공용 .form-grid 2열이 그대로 걸리면
   열 하나가 244px 이 되고 .full 이 아닌 행이 카드 폭의 절반만 쓴다. 카드 안에서는 1열로 둔다. */
main.career-form .card > .form-grid,
main.detail-view .card > .form-grid {
  grid-template-columns: minmax(0, 1fr);
}

/* 증빙자료 체크박스 — 퍼블 .checkbox-grid__item(0,1,0) 이 .form-row label(0,1,1) 에 진다.
   이 항목을 .form-row 안에 넣었기 때문이다. 값은 퍼블 것을 두고 특이도만 맞춘다. */
.form-row label.checkbox-grid__item {
  gap: 8px;
  align-items: flex-start;
}

/* ---------- 날짜+시각 설정 팝업(dateTimePop / pollResetDtPop)의 시·분 셀렉트 ----------
   .date-area select 에 폭이 없어 appearance:none 인 채로 19px 까지 줄어들었다(실측).
   '00' 도 다 못 담고 화살표도 없어 옆의 맨텍스트 '시'·'분' 과 따로 노는 상자로 보였다.
   화살표는 관리자 공통 셀렉트(.ipf-chip-select)와 같은 이미지를 쓴다. */
.date-area select {
  width: 64px;
  height: 34px;
  padding: 0 22px 0 10px;
  background: #fff url('../../../files/bcnimda/images/common/from_select.png') no-repeat right 6px center;
  cursor: pointer;
  /* 관리자 스킨의 전역 select 는 color:#A9A9A9(빈 값 안내문 기준)다 -
     여기 담기는 건 고른 값이라 본문 색으로 읽혀야 한다 */
  color: #000;
  flex-shrink: 0;
}

/* ---------- 관리자 팝업의 주관식 답변란 ----------
   미리보기(pollPreviewPop)·개별응답 상세(pollRstOnePop)는 사용자 응답화면과 같은
   PollBean.qstAnswerAreaHtml 을 쓰지만 .poll-list .survey-response__questions 스코프 밖이라
   구 스킨(.ques-list .textarea-box)으로 그려졌다. 미리보기는 "응답자에게 이렇게 보인다"를
   보여주는 화면이라 같은 모양이어야 한다. 값은 .survey-response__questions .textarea-box 와 같다. */
#pop_wrapper .ques-list .textarea-box {
  border: none;
  width: 100%;
}
#pop_wrapper .ques-list .textarea-box textarea {
  display: block;
  width: 100%;
  height: auto;
  min-height: 120px;
  padding: var(--spacing-sm) var(--spacing-md);
  background: var(--color-white);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: var(--font-size-16);
  line-height: var(--line-height-base);
  color: var(--color-text-body);
  resize: vertical;
}
#pop_wrapper .ques-list .textarea-box__bottom {
  margin-top: var(--spacing-3xs);
  padding: 0;
  background: none;
  font-size: var(--font-size-13);
  color: var(--color-text-tertiary);
}

/* 문항 편집의 "답변란 안내문구" 입력칸. .ques-list .usertxt 는 폭 규칙이 없어 textarea 기본값
   (cols=20 ≒ 161px)으로 남아 안내문구를 20자도 못 보고 쓰던 칸이다.
   회색 상자(.usertxt)는 그대로 두고 안쪽 입력칸만 상자를 채우게 한다. */
.ques-list .usertxt textarea {
  width: 100%;
  min-height: 40px;
  box-sizing: border-box;
  background: transparent;
  border: none;
  resize: vertical;
  font-family: inherit;
  font-size: 14px;
}

/* ---------- 문항 불러오기 팝업(pollRecallPop) ----------
   레이어팝업 본문에 관리자 검색박스 래퍼(.search-basic > .search-keyword > .select-style)를
   그대로 넣어 흰 다이얼로그 안에 회색 검색바가 앉아 있었다.
   폭도 안 맞았다 - 400px 컨테이너 안쪽 332px 에 셀렉트 250px + [미리보기] 94px 이라
   버튼이 다음 줄로 밀렸다. 다른 다이얼로그를 건드리지 않게 이 팝업에만 있는 #searchselect 로 스코프한다. */
.confirm-container:has(#searchselect) {
  width: 520px;
}
.confirm-container:has(#searchselect) .search-basic {
  background: none;
  padding: 0;
}
.confirm-container:has(#searchselect) .select-style {
  display: flex;
  align-items: center;
  gap: 8px;
  /* 부모 .search-keyword 가 flex 라 그냥 두면 내용 폭으로 줄어든다 */
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
}
/* 인라인 style="width:250px" 을 덮는다 - 남는 폭을 셀렉트가 쓰고 설문명이 잘리지 않게 */
.confirm-container:has(#searchselect) #searchselect {
  width: auto !important;
  flex: 1 1 auto;
  min-width: 0;
  margin-right: 0;
}

/* ---------- 관리자 로드형 모달을 퍼블 레이어팝업으로 ----------
   심사자 배정(career/extcareer)·안건등록 팝업의 껍데기를 certVerifyMngList 상세팝업과 같게 한다.
   컨테이너를 .modal-overlay 로 두면 customDialog 가 .dimmed-blur(흐리기)를 만들어 주므로,
   오버레이 자신은 배경을 그리지 않는다 - 안 그러면 두 겹으로 어두워진다.
   본문 클래스(.cr-pop)는 그대로 둔다 - 폼·표 스타일이 거기 매달려 있다. */
.modal-overlay.cr-refer-modal,
.modal-overlay.cr-judger-modal,
.modal-overlay.cr-agenda-modal {
  background: none;
  backdrop-filter: none;
  z-index: 999; /* .dimmed-blur(998) 바로 위 */
}
/* .popup-modal 이 주던 카드 모양(흰 배경·모서리·그림자)을 본문이 직접 갖는다 */
.modal-overlay.cr-judger-modal > .cr-pop,
.modal-overlay.cr-agenda-modal > .cr-pop {
  position: relative;
  background: var(--color-white);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  max-width: 90vw;
  max-height: 85vh;
  overflow-y: auto;
}
/* width 를 showModal 인자로 넘기면 customDialog 가 오버레이에 걸어 전체를 못 덮는다 - 여기서 준다 */
.modal-overlay.cr-judger-modal > .cr-pop { width: 720px; }
.modal-overlay.cr-agenda-modal > .cr-pop { width: 940px; }

/* 배정·안건등록 팝업의 제목과 닫기 X. 폭이 넓어 .modal-box 를 쓰지 않으므로,
   퍼블 .modal-box h4 / .modal-close 와 같은 치수만 .cr-pop 안에서 낸다. */
.modal-overlay.cr-judger-modal > .cr-pop > h4,
.modal-overlay.cr-agenda-modal > .cr-pop h4:first-of-type {
  font-size: var(--font-size-22);
  font-weight: 700;
  line-height: var(--line-height-tight);
  color: var(--color-text-heading);
  padding-right: 60px;
}
.modal-overlay.cr-judger-modal > .cr-pop > .modal-close,
.modal-overlay.cr-agenda-modal > .cr-pop > .modal-close {
  top: var(--spacing-lg);
  right: var(--spacing-md);
  z-index: 1;
}

/* 회부 팝업은 .modal-box(퍼블 400px 고정)를 쓰는데 입력이 세 칸이라 좁다. 폭만 넓힌다.
   .modal-box 는 좌우 여백을 h4/p 등 자식이 각자 갖는 구조라, 폼 블록에도 같은 여백을 준다. */
.modal-overlay.cr-refer-modal > .modal-box { width: 520px; }
.modal-overlay.cr-refer-modal > .modal-box > .form-row,
.modal-overlay.cr-refer-modal > .modal-box > .modal-actions {
  padding-left: var(--spacing-xl);
  padding-right: var(--spacing-xl);
}

/* 직원 비밀번호 변경 모달. 안내문이 한 줄로 떨어지도록 회부 팝업과 같은 폭을 쓴다. */
.modal-overlay.staff-pw-modal > .modal-box { width: 520px; }
.modal-overlay.staff-pw-modal > .modal-box > .staff-pw-target,
.modal-overlay.staff-pw-modal > .modal-box > .form-row,
.modal-overlay.staff-pw-modal > .modal-box > .modal-actions {
  padding-left: var(--spacing-xl);
  padding-right: var(--spacing-xl);
}
.modal-overlay.staff-pw-modal > .modal-box > .staff-pw-target {
  color: var(--color-text-body);
  margin-bottom: var(--spacing-lg);
}

/* 인터페이스 관리(interfaceAdministration) - 좌우 표 균등 폭.
   기본 .division-half__top 은 좌측 가변 / 우측 500px 고정이라 표 두 개를 나란히 두면 폭이 어긋난다. */
.division-half__top--even .leftstage,
.division-half__top--even .rightstage {
  width: calc(50% - 16px);
  min-width: 0;
}

/* ======================================================================
   비밀번호 조건 표시 (.pw-rules)
   ----------------------------------------------------------------------
   회원가입·비밀번호찾기·내정보·직원관리·장기미변경 팝업이 함께 쓴다.
   마크업과 판정은 inUtilString.js 의 fncBindPasswordRules 가 만든다.
   사용자단(web1)·관리자단(bcnimda)이 같이 쓰므로 양쪽에 모두 있는
   --green/--red 를 쓰고 폴백값을 같이 준다.
   ====================================================================== */
.pw-rules {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0 4px;
}
.pw-rules li {
  position: relative;
  padding-left: 14px;
  font-size: 12px;
  line-height: 1.6;
  color: var(--text-400, #8b93a1);
}
/* 네 항목이 한 문장으로 읽히게 콤마로 잇는다 - 항목마다 색이 갈려야 해 li 는 유지한다 */
.pw-rules li:not(:last-child)::after {
  content: ',';
  color: var(--text-400, #8b93a1);
}
/* 기본은 회색 점, 충족하면 체크, 미충족(입력 시작 후)은 빨강 */
.pw-rules li::before {
  content: '·';
  position: absolute;
  left: 2px;
  top: 0;
  font-weight: 700;
}
.pw-rules li.ok {
  color: var(--green, #00bf5f);
}
.pw-rules li.ok::before {
  content: '\2713';
  left: 0;
  font-size: 11px;
}
.pw-rules li.err {
  color: var(--red, #d92d20);
}
.pw-rules li.err::before {
  content: '\00d7';
  left: 1px;
  font-size: 11px;
}

/* 새 비밀번호 확인칸의 일치 여부 - inUtilString.js 의 fncBindPasswordEq 가 만든다.
   p 가 아니라 span 인 이유: mockup.css 의 `.modal-box p`(16px·좌우 padding 24px)가 특이도 싸움에서
   이겨 모달 안에서만 이 줄이 크고 들여쓰여 보인다. span 은 그 규칙에 아예 걸리지 않는다. */
.pw-eqmsg {
  display: block;
  margin-top: 8px;
  min-height: 16px;
  font-size: 12px;
  line-height: 1.6;
  color: var(--text-400, #8b93a1);
}
.pw-eqmsg.ok {
  color: var(--green, #00bf5f);
}
.pw-eqmsg.err {
  color: var(--red, #d92d20);
}

/* ===== 목록 표 정렬 통일 =====
   목록 표의 칸은 가운데정렬, 제목류 명칭 열만 왼쪽정렬한다.
   라벨:값 상세 표(th[scope="row"] 또는 tbody th)는 값까지 몰려 읽기 어려우므로 제외한다.
   모바일 카드뷰(900px 이하)는 카드 규칙이 정렬을 따로 잡으므로 데스크톱에만 건다. */
@media (min-width: 901px) {
  table.grid:not(:has(th[scope="row"])):not(:has(tbody th)) th,
  table.grid:not(:has(th[scope="row"])):not(:has(tbody th)) td {
    text-align: center;
  }

  /* 제목 열은 thead th 에 .col-tit 만 달면 되게 열 번호로 본문 칸까지 이어 준다
     (본문 칸은 대부분 JS 가 클래스 없이 찍는다). colspan 칸(빈 목록 안내)은 열 번호가 어긋나 제외. */
  /* 위 가운데정렬 규칙과 특이도를 맞춰야 이긴다 - :not() 두 개를 그대로 달고 간다 */
  table.grid:not(:has(th[scope="row"])):not(:has(tbody th)) th.col-tit,
  /* 관리자 목록(inGridTable)은 컬럼 설정의 align 값을 th 와 td 양쪽에 클래스로 찍으므로
     td 에도 같은 규칙이 필요하다 */
  table.grid:not(:has(th[scope="row"])):not(:has(tbody th)) td.col-tit {
    text-align: left;
  }
  table.grid:has(thead th:nth-child(1).col-tit) tbody td:nth-child(1):not([colspan]),
  table.grid:has(thead th:nth-child(2).col-tit) tbody td:nth-child(2):not([colspan]),
  table.grid:has(thead th:nth-child(3).col-tit) tbody td:nth-child(3):not([colspan]),
  table.grid:has(thead th:nth-child(4).col-tit) tbody td:nth-child(4):not([colspan]),
  table.grid:has(thead th:nth-child(5).col-tit) tbody td:nth-child(5):not([colspan]),
  table.grid:has(thead th:nth-child(6).col-tit) tbody td:nth-child(6):not([colspan]),
  table.grid:has(thead th:nth-child(7).col-tit) tbody td:nth-child(7):not([colspan]),
  table.grid:has(thead th:nth-child(8).col-tit) tbody td:nth-child(8):not([colspan]),
  table.grid:has(thead th:nth-child(9).col-tit) tbody td:nth-child(9):not([colspan]),
  table.grid:has(thead th:nth-child(10).col-tit) tbody td:nth-child(10):not([colspan]),
  table.grid:has(thead th:nth-child(11).col-tit) tbody td:nth-child(11):not([colspan]),
  table.grid:has(thead th:nth-child(12).col-tit) tbody td:nth-child(12):not([colspan]),
  table.grid:has(thead th:nth-child(13).col-tit) tbody td:nth-child(13):not([colspan]),
  table.grid:has(thead th:nth-child(14).col-tit) tbody td:nth-child(14):not([colspan]) {
    text-align: left;
  }

  /* 체크박스가 있는 선택형 목록은 칸 전체를 왼쪽정렬한다(사용자 지시).
     ⚠ 위 가운데정렬 규칙을 이기려면 :not() 두 개를 그대로 달고 :has() 를 더해야 한다 -
       :not(:has(X)) 는 X 의 특이도를 그대로 더하므로 선택자를 줄이면 규칙이 죽는다. */
  table.grid:not(:has(th[scope="row"])):not(:has(tbody th)):has(input[type="checkbox"]) th,
  table.grid:not(:has(th[scope="row"])):not(:has(tbody th)):has(input[type="checkbox"]) td {
    text-align: left;
  }
  /* 체크박스가 든 칸만은 가운데다 - 폭이 좁아(아래 56px 규칙) 왼쪽으로 붙으면 눈에 띄게 치우친다 */
  table.grid:not(:has(th[scope="row"])):not(:has(tbody th)):has(input[type="checkbox"]) th:has(input[type="checkbox"]),
  table.grid:not(:has(th[scope="row"])):not(:has(tbody th)):has(input[type="checkbox"]) td:has(input[type="checkbox"]) {
    text-align: center;
  }
}

/* ===== 목록 표 글자색 (퍼블 지시) =====
   사용자·사용처만 - .content-area 는 사용자 데코레이터에만 있다.
   정렬과 달리 미디어쿼리 밖에 둔다 - 900px 이하 카드뷰에서도 열별 색은 웹과 같아야 한다(사용자 지시). */
.content-area table.grid:not(:has(th[scope="row"])):not(:has(tbody th)) td {
  color: var(--color-text-tertiary, #767676);
}
.content-area table.grid:not(:has(th[scope="row"])):not(:has(tbody th)) td.col-tit,
.content-area table.grid:has(thead th:nth-child(1).col-tit) tbody td:nth-child(1):not([colspan]),
.content-area table.grid:has(thead th:nth-child(2).col-tit) tbody td:nth-child(2):not([colspan]),
.content-area table.grid:has(thead th:nth-child(3).col-tit) tbody td:nth-child(3):not([colspan]),
.content-area table.grid:has(thead th:nth-child(4).col-tit) tbody td:nth-child(4):not([colspan]),
.content-area table.grid:has(thead th:nth-child(5).col-tit) tbody td:nth-child(5):not([colspan]),
.content-area table.grid:has(thead th:nth-child(6).col-tit) tbody td:nth-child(6):not([colspan]),
.content-area table.grid:has(thead th:nth-child(7).col-tit) tbody td:nth-child(7):not([colspan]),
.content-area table.grid:has(thead th:nth-child(8).col-tit) tbody td:nth-child(8):not([colspan]),
.content-area table.grid:has(thead th:nth-child(9).col-tit) tbody td:nth-child(9):not([colspan]),
.content-area table.grid:has(thead th:nth-child(10).col-tit) tbody td:nth-child(10):not([colspan]),
.content-area table.grid:has(thead th:nth-child(11).col-tit) tbody td:nth-child(11):not([colspan]),
.content-area table.grid:has(thead th:nth-child(12).col-tit) tbody td:nth-child(12):not([colspan]),
.content-area table.grid:has(thead th:nth-child(13).col-tit) tbody td:nth-child(13):not([colspan]),
.content-area table.grid:has(thead th:nth-child(14).col-tit) tbody td:nth-child(14):not([colspan]),
.content-area table.grid:not(:has(th[scope="row"])):not(:has(tbody th)):has(input[type="checkbox"]) td {
  color: var(--color-gray-700, #333);
}
.content-area table.grid:not(:has(th[scope="row"])):not(:has(tbody th)):has(input[type="checkbox"]) th {
  color: #4A5468;
}


/* ===== 선택형 목록의 체크박스 열 폭 =====
   화면마다 36px·52px 로 갈려 있던 것을 같은 값으로 맞춘다.
   모바일 카드뷰(900px 이하)는 열 개념이 없어 데스크톱에만 건다. */
@media (min-width: 901px) {
  table.grid.career-list__grid th:first-child,
table.grid.career-list__grid td:first-child,
table.grid.extra-career__edu-grid th:first-child,
table.grid.extra-career__edu-grid td:first-child,
table.grid.extra-career__award-grid th:first-child,
table.grid.extra-career__award-grid td:first-child,
table.grid.career-ext-list__grid th:first-child,
table.grid.career-ext-list__grid td:first-child,
table.grid.cert-issue__grid th:first-child,
table.grid.cert-issue__grid td:first-child {
    width: 56px;
    min-width: 56px;
    padding-left: 0;
    padding-right: 0;
    text-align: center;
    white-space: nowrap;
  }
}


/* ===== 목록 표 링크 색 =====
   목록 표 안의 링크를 본문색(#333)으로 통일하고 링크임은 hover 밑줄로만 알린다(사용자 지시).
   버튼 모양으로 쓰는 a(.btn*)는 제 색을 지켜야 하므로 뺀다. */
table.grid tbody a:not([class*="btn"]) {
  color: var(--color-gray-700, #333);
}
/* 사용자·사용처는 900px 이하 카드에서도 웹과 같게 둔다 - 퍼블 경력목록 모바일 카드의
   `.career-list__grid td:nth-child(3) a { color: --color-text-link }`(0,3,3)가 위 규칙을 이겨 제목만 파랬다 */
.content-area table.grid tbody td a:not([class*="btn"]) {
  color: var(--color-gray-700, #333);
}
table.grid tbody a:not([class*="btn"]):hover {
  text-decoration: underline;
}


/* ===== 목록 열 폭 고정 =====
   table.grid 는 table-layout:auto 라 지정한 width 를 '선호값'으로만 본다 - 열이 많으면 눌리고
   여유가 남으면 늘어난다. 기준(번호 80 / 일자 140 / 첨부파일 100)을 내용이 아니라 배분 때문에
   벗어난 열만 골라 못박는다.
   ⚠ 내용이 실제로 더 필요한 열(경력목록 처리일, 동의여부 상태변경일, 관리자 게시판 등록일 -
      이름만 '일'이고 값은 일시)은 140 으로 줄이면 두 줄로 접혀 일부러 뺐다.
   ⚠ th 에만 걸면 듣지 않는다 - 열 폭은 th·td 를 함께 봐야 정해진다(실측). */
@media (min-width: 901px) {
  /* 인재POOL 자격 표 취득일 열 */
  table.grid.consent-pool__cert-grid th:nth-child(4),
  table.grid.consent-pool__cert-grid td:nth-child(4) {
    min-width: 140px;
    max-width: 140px;
  }
  /* 관리자 목록(inGridTable)은 본문 칸에도 컬럼 설정의 align 값이 클래스로 찍히므로,
     날짜 열에 col-date 를 주면 th·td 가 함께 잡힌다 - 기업 목록 가입일이 123px 로 눌려 있었다 */
  table.grid th.col-date,
  table.grid td.col-date {
    width: 140px;
    min-width: 140px;
    max-width: 140px;
  }
}


/* ===== 일자리나누기 목록 모바일 카드 =====
   1:1문의(.qna-list__grid)와 같은 카드 구성으로 맞춘다(사용자 지시) - 공용 table.grid 카드
   규칙만으로는 모든 열이 '라벨 : 값' 한 줄씩 늘어서서 제목이 묻힌다.
   퍼블 시안이 없는 화면이라 퍼블 mockup.css 가 아니라 여기에 둔다.
   ⚠ '구분' 열이 게시판 설정에 따라 끼었다 빠졌다 하므로 nth-child 가 아니라 data-label 로 집는다
     (라벨은 design.js 가 thead 에서 채운다). */
@media (max-width: 900px) {
  table.grid.jobshare-list__grid tr {
    display: flex;
    flex-wrap: wrap;
    padding: 0;
  }
  table.grid.jobshare-list__grid td {
    height: auto;
    flex: 1 1 100%;
  }
  table.grid.jobshare-list__grid td[data-label="No."] {
    display: none;
  }
  table.grid.jobshare-list__grid td[data-label="제목"] {
    order: -2;
    border-bottom: none;
    padding: var(--spacing-sm);
    font-size: var(--font-size-18);
    font-weight: 700;
    text-align: left;
  }
  table.grid.jobshare-list__grid td[data-label="제목"]::before {
    content: none;
  }
  table.grid.jobshare-list__grid td[data-label="제목"] > .cell-content {
    display: block;
    justify-content: flex-start;
    text-align: left;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  table.grid.jobshare-list__grid td[data-label="제목"] a {
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  table.grid.jobshare-list__grid td[data-label="구분"],
  table.grid.jobshare-list__grid td[data-label="직종"],
  table.grid.jobshare-list__grid td[data-label="작성자"],
  table.grid.jobshare-list__grid td[data-label="등록일"],
  table.grid.jobshare-list__grid td[data-label="조회"],
  table.grid.jobshare-list__grid td[data-label="첨부파일"] {
    border-bottom: none;
    padding: 0 var(--spacing-sm);
  }
  table.grid.jobshare-list__grid td[data-label="구분"] { order: 1; padding-top: var(--spacing-xs); }
  table.grid.jobshare-list__grid td[data-label="직종"] { order: 2; padding-top: var(--spacing-xs); }
  table.grid.jobshare-list__grid td[data-label="작성자"] { order: 3; }
  table.grid.jobshare-list__grid td[data-label="등록일"] { order: 4; }
  /* 첨부는 자료실(.archive-list__grid)처럼 라벨 없이 제목 오른쪽 아이콘으로 둔다(사용자 지시).
     첨부 없는 글은 그 칸이 td:empty 로 숨으므로 카드 아래 여백은 늘 있는 조회 줄이 갖는다. */
  table.grid.jobshare-list__grid td[data-label="조회"] { order: 5; padding-bottom: var(--spacing-sm); }
  table.grid.jobshare-list__grid td[data-label="제목"] {
    flex: 1 1 0%;
    width: auto !important;
    min-width: 0;
    padding: var(--spacing-sm) 0 var(--spacing-sm) var(--spacing-sm);
  }
  table.grid.jobshare-list__grid td[data-label="첨부파일"] {
    order: -1;
    flex: 0 0 auto;
    width: auto !important;
    padding: var(--spacing-sm) var(--spacing-sm) var(--spacing-sm) 0;
  }
  table.grid.jobshare-list__grid td[data-label="첨부파일"]::before {
    content: none;
  }
}

/* ===== No. 열 50px 이 실제로 지켜지게 =====
   퍼블 table.grid th 의 좌우 패딩 16px 때문에 'No.' 글자만으로도 칸이 56px 로 벌어져 width:50px 가
   무시됐다(실측). 50px 를 직접 적어 둔 머리칸만 집으므로 다른 열에는 걸리지 않는다. */
@media (min-width: 901px) {
  table.grid th[style*="width:50px"],
  table.grid th[style*="width: 50px"] {
    padding-left: 8px;
    padding-right: 8px;
    white-space: nowrap;
  }
}

/* ===== 인재POOL 상세(관리자)는 표를 전부 왼쪽정렬한다 (사용자 지시) =====
   표 여섯 개가 한 화면에 줄줄이 서는데 열마다 정렬이 갈리면 눈이 좌우로 튄다.
   체크박스가 없는 화면이라 공통 규칙으로는 가운데가 되므로 화면 전용 클래스로 덮는다.
   ⚠ 공통 가운데정렬 규칙과 특이도를 맞춰야 이긴다 - :not() 두 개를 그대로 달고 간다. */
@media (min-width: 901px) {
  table.grid.talent-detail__grid:not(:has(th[scope="row"])):not(:has(tbody th)) th,
  table.grid.talent-detail__grid:not(:has(th[scope="row"])):not(:has(tbody th)) td {
    text-align: left;
  }
}
/* ===== 증명서 발급 STEP3 의 자격·학력·교육 묶음 =====
   인재풀경력관리(/usr/member/talentPoolDetail)와 같은 모양으로 맞춘다(사용자 지시).
   퍼블 .card 를 전역으로 손대지 않으려고 이 세 묶음에만 전용 클래스를 달았고,
   값은 .consent-pool .card / .consent-pool .card h3 와 같은 토큰을 그대로 쓴다. */
.ct-ext-sec {
  padding: var(--spacing-sm) var(--spacing-2xl) var(--spacing-2xl);
  background: var(--color-bg-card);
  border: 0;
  border-radius: var(--radius-xl);
  box-shadow: none;
  margin-top: 16px;
}
.ct-ext-sec > h3 {
  margin: 0;
  padding: var(--spacing-lg) 0 var(--spacing-md);
  font-size: 15px;
}

/* ===== 기간 열 240px 고정 =====
   시작~종료를 한 줄로 내는 기간 칸의 공통 폭이다. th 에 .col-term 만 달면 같은 자리의
   본문 칸까지 함께 잡힌다(.col-tit 과 같은 방식).
   ⚠ width 만으로는 안 된다 - table-layout:auto 에서 width 는 선호값이라 남는 폭을 비례로
     나눠 가지면 240 이 471 까지 늘어난다(실측). min/max 를 th·td 양쪽에 걸어야 한다.
   모바일 카드뷰(900px 이하)는 열 개념이 없어 데스크톱에만 건다. */
@media (min-width: 901px) {
  table.grid th.col-term {
    width: 240px;
    min-width: 240px;
    max-width: 240px;
  }
  table.grid:has(thead th:nth-child(1).col-term) tbody td:nth-child(1):not([colspan]),
  table.grid:has(thead th:nth-child(2).col-term) tbody td:nth-child(2):not([colspan]),
  table.grid:has(thead th:nth-child(3).col-term) tbody td:nth-child(3):not([colspan]),
  table.grid:has(thead th:nth-child(4).col-term) tbody td:nth-child(4):not([colspan]),
  table.grid:has(thead th:nth-child(5).col-term) tbody td:nth-child(5):not([colspan]),
  table.grid:has(thead th:nth-child(6).col-term) tbody td:nth-child(6):not([colspan]),
  table.grid:has(thead th:nth-child(7).col-term) tbody td:nth-child(7):not([colspan]),
  table.grid:has(thead th:nth-child(8).col-term) tbody td:nth-child(8):not([colspan]) {
    width: 240px;
    min-width: 240px;
    max-width: 240px;
  }
}

/* 인재 상세의 명칭 열이 눌리지 않게 바닥을 준다. 기간 열을 240 으로 못 박으면 남는 폭을
   내용이 긴 열이 가져가 "학교명" 같은 짧은 열이 72px 까지 눌려 두 줄로 접혔다(실측). */
@media (min-width: 901px) {
  table.grid.talent-detail__grid th.col-tit {
    min-width: 140px;
  }
}

/* 로그인 회원 프로필 사진 아바타(모바일 메뉴·메인 인사말). 기본 아바타 svg 는 위치값이 따로 있어
   사진은 별도 클래스로 원 안을 채운다. 메인은 img 한 장이라 비율만 지킨다. */
.gnb__overlay-avatar-photo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.main-user__avatar {
  object-fit: cover;
}

/* 사용처 인재 상세는 명칭 열(.col-tit)만 왼쪽, 나머지는 가운데다(2026-09-15 퍼블 지시).
   위 관리자 전용 왼쪽정렬 규칙이 같은 클래스를 잡으므로 .content-area(사용자 데코레이터)로 덮는다.
   ⚠ 아래 왼쪽 복귀 규칙이 td 가운데 규칙보다 특이도가 높아야 한다 - td 쪽에 :not([colspan]) 를 달면 뒤집힌다. */
@media (min-width: 901px) {
  .content-area table.grid.talent-detail__grid:not(:has(th[scope="row"])):not(:has(tbody th)) th:not(.col-tit),
  .content-area table.grid.talent-detail__grid:not(:has(th[scope="row"])):not(:has(tbody th)) td {
    text-align: center;
  }
  .content-area table.grid.talent-detail__grid:has(thead th:nth-child(1).col-tit) tbody td:nth-child(1),
  .content-area table.grid.talent-detail__grid:has(thead th:nth-child(4).col-tit) tbody td:nth-child(4) {
    text-align: left;
  }
}

/* ===== 관리자 댓글 편집기 [취소] 크기 =====
   같은 줄 [등록](.btn-outline)은 32px 로 재정의돼 있으나 [취소](.btn-ghost)는 .btn 기본값(44px)을
   그대로 받아 혼자 커 보인다. .btn-ghost 자체를 줄이면 폼 하단 [목록][취소] 같은 44px 짝이 무너지므로
   댓글 편집기 안으로 스코프를 좁힌다(대댓글 1곳 + 댓글수정 2곳이 같은 컨테이너를 쓴다). */
.reply-profile__editor__btn .btn.btn-ghost {
  height: 32px;
  padding: 0 12px;
  border-radius: var(--radius-xs, 4px);
  font-size: 14px;
  font-weight: 500;
}

/* 일자리나누기 상세 메타의 직종 경로는 길어 모바일에서 화면을 뚫고 나갔다(퍼블 meta-item 이 nowrap).
   이 칸만 줄바꿈을 허용하고 한 줄을 통째로 쓰게 한다. */
.notice-detail__meta-item--wrap {
  white-space: normal;
  flex-wrap: wrap;
  min-width: 0;
  word-break: keep-all;
  overflow-wrap: anywhere;
}
@media (max-width: 900px) {
  .notice-detail__meta-item--wrap { flex-basis: 100%; }
}

/* 일자리공고 등록(사용처) 모바일 넘침. 폼 트랙이 1fr(=minmax(auto,1fr))이라 가장 넓은 칸의
   최소폭을 따라가는데, CKEditor 툴바가 줄바꿈 없이 665px 를 요구해 모든 입력칸이 669px 로 벌어지고
   화면 밖이 잘렸다(375px 실측). 트랙 최소폭을 0 으로 풀고 툴바는 여러 줄로 접는다. */
@media (max-width: 900px) {
  main.jobnotice-form .form-grid { grid-template-columns: minmax(0, 1fr); }
  main.jobnotice-form .form-grid > .form-row { min-width: 0; }
  main.jobnotice-form .ck.ck-editor { min-width: 0; max-width: 100%; }
  main.jobnotice-form .ck.ck-toolbar > .ck-toolbar__items { flex-wrap: wrap; }
  main.jobnotice-form .form-row__range > * { min-width: 0; }
}

/* 증명서 발급 완료 제목의 띄어쓰기. design.js 가 .done-card h2 를 글자마다 inline-block span 으로
   쪼개는데, 공백 한 글자짜리 inline-block 은 폭이 0 으로 접혀 "증명서가발급되었습니다." 로 붙는다. */
main.cert-apply-step .done-card__char { white-space: pre; }
/* 발급 완료 카드는 테두리 없이 본문 폭 전체에서 가운데 정렬한다. design.css 의 .done-card 가
   가입완료용 width:768px 고정이라 이 화면에서는 왼쪽에 붙은 좁은 박스로 보였다. */
main.cert-apply-step .done-card { width: 100%; border: 0; box-shadow: none; }

/* [AI-GENERATED] 작성일: 2026-09-14 15:39 | 수정일: 2026-09-14 15:39
   확장경력 목록 900px 이하 카드를 경력목록(.career-list__grid) 카드와 같은 간격으로 맞춘다(사용자 지시).
   [반려사유 보기] 칸이 td:empty 로 숨는 카드가 대부분이라 처리일이 테두리에 붙었다.
   구분선은 업무내용 같은 단독 줄이 없어 머리(체크박스·제목·배지) 아래에 긋는다(사용자 지시).
   교육이수·상훈(award)=제목4·배지7·라벨 3,5,6,8 / 학력(edu)=제목3·배지7·라벨 4,5,6,8 */
@media (max-width: 900px) {
  table.grid.extra-career__edu-grid td:nth-child(1),
  table.grid.extra-career__award-grid td:nth-child(1) {
    padding: var(--spacing-sm) 0 0 var(--spacing-sm);
  }
  /* 제목에 왼쪽 여백을 줘서 체크박스 칸이 빈 행은 퍼블 min-width 보정 없이 숨겨도 줄이 맞는다 */
  table.grid.extra-career__edu-grid td:nth-child(1):empty,
  table.grid.extra-career__award-grid td:nth-child(1):empty {
    display: none;
  }
  table.grid.extra-career__edu-grid td:nth-child(3),
  table.grid.extra-career__award-grid td:nth-child(4) {
    padding: var(--spacing-sm) 0 0 var(--spacing-sm);
    font-size: var(--font-size-heading-h3);
  }
  table.grid.extra-career__edu-grid td:nth-child(7),
  table.grid.extra-career__award-grid td:nth-child(7) {
    padding: var(--spacing-sm) var(--spacing-sm) 0 var(--spacing-sm);
  }
  table.grid.extra-career__edu-grid td:nth-child(4),
  table.grid.extra-career__edu-grid td:nth-child(5),
  table.grid.extra-career__edu-grid td:nth-child(6),
  table.grid.extra-career__edu-grid td:nth-child(8),
  table.grid.extra-career__award-grid td:nth-child(3),
  table.grid.extra-career__award-grid td:nth-child(5),
  table.grid.extra-career__award-grid td:nth-child(6),
  table.grid.extra-career__award-grid td:nth-child(8) {
    margin-top: var(--spacing-xs);
    font-size: var(--font-size-body-m);
  }
  table.grid.extra-career__edu-grid td:nth-child(4),
  table.grid.extra-career__award-grid td:nth-child(3) {
    margin-top: 0;
    padding-top: var(--spacing-sm);
  }
  table.grid.extra-career__edu-grid td:nth-child(8),
  table.grid.extra-career__award-grid td:nth-child(8) {
    padding-bottom: var(--spacing-sm);
  }
  /* id 로 특이도를 올린다 - 퍼블 tr:last-child td(border-bottom:none)를 이겨야 마지막 카드에도 선이 남는다 */
  #ecListTable.extra-career__edu-grid tbody tr td:nth-child(3),
  #ecListTable.extra-career__award-grid tbody tr td:nth-child(4),
  #ecListTable tbody tr td:nth-child(1),
  #ecListTable tbody tr td:nth-child(7) {
    align-self: stretch;
    border-bottom: 1px solid var(--color-border-light);
    padding-bottom: var(--spacing-sm);
  }
}

/* [AI-GENERATED] 작성일: 2026-09-14 16:20 | 수정일: 2026-09-14 16:20
   증명서 발급 STEP3(#ctStep3)와 인재풀경력관리(/usr/member/talentPoolDetail)의 자격·학력·교육 카드를
   모바일에서 같은 모양으로 맞춘다(사용자 지시). 두 화면 표는 열 구성이 같다:
   1 체크박스 / 2 제목(종목·학교명·교육ᆞ훈련명) / 3~ 라벨:값.
   퍼블 규칙은 시안 열 구성을 전제로 2열을 숨기고 3·4열을 제목으로 잡아 실화면과 어긋나므로 여기서 다시 잡는다.
   카드 안 간격은 경력목록 카드와 같다(제목 위 12 / 첫 줄 위 12 / 줄 사이 8 / 카드 아래 12).
   마지막 칸이 비어 td:empty 로 숨는 행(학위 등)이 있어 아래 여백은 행(tr)에 준다. */
@media (max-width: 900px) {
  #ctStep3 .table-wrap:has(table.cert-issue__grid) {
    background: transparent;
  }
  #ctStep3 table.cert-issue__grid tbody tr,
  .consent-pool table.grid.consent-pool__cert-grid tbody tr,
  .consent-pool table.grid.consent-pool__edu-grid tbody tr,
  .consent-pool table.grid.consent-pool__award-grid tbody tr {
    align-items: flex-start;
    padding: 0 0 var(--spacing-sm);
  }
  #ctStep3 table.cert-issue__grid tbody tr:last-child {
    margin-bottom: 0;
  }
  #ctStep3 table.cert-issue__grid tbody td:nth-child(1),
  .consent-pool table.grid.consent-pool__cert-grid tbody td:nth-child(1),
  .consent-pool table.grid.consent-pool__edu-grid tbody td:nth-child(1),
  .consent-pool table.grid.consent-pool__award-grid tbody td:nth-child(1) {
    order: -2;
    width: auto !important;
    flex: 0 0 auto;
    border-bottom: none;
    padding: var(--spacing-sm) 0 0 var(--spacing-sm);
  }
  #ctStep3 table.cert-issue__grid tbody td:nth-child(2),
  .consent-pool table.grid.consent-pool__cert-grid tbody td:nth-child(2),
  .consent-pool table.grid.consent-pool__edu-grid tbody td:nth-child(2),
  .consent-pool table.grid.consent-pool__award-grid tbody td:nth-child(2) {
    order: -1;
    display: flex;
    width: auto !important;
    flex: 1 1 0%;
    min-width: 0;
    border-bottom: none;
    padding: var(--spacing-sm) var(--spacing-sm) 0;
    font-size: var(--font-size-heading-h3);
    font-weight: 700;
    color: var(--color-text-heading);
    text-align: left;
  }
  /* [AI-GENERATED] 작성일: 2026-09-14 | 수정일: 2026-09-14
     확장경력 카드는 설명 열이 없어 머리(체크박스·제목) 아래에 구분선을 긋는다(경력 카드의 담당업무 구분선 자리).
     tr 을 넣어 특이도를 올린다 - 위 두 규칙(border-bottom:none)과 퍼블 .consent-pool … tr:last-child td(0,4,4)를
     이겨야 한 건뿐인 카드(= 마지막 행)에도 선이 남는다. */
  #ctStep3 table.cert-issue__grid tbody tr td:nth-child(-n+2),
  .consent-pool table.grid.consent-pool__cert-grid tbody tr td:nth-child(-n+2),
  .consent-pool table.grid.consent-pool__edu-grid tbody tr td:nth-child(-n+2),
  .consent-pool table.grid.consent-pool__award-grid tbody tr td:nth-child(-n+2) {
    /* 행이 align-items:flex-start 라 체크박스 칸(45px)이 제목 칸(52px)보다 낮아 선이 계단졌다 */
    align-self: stretch;
    border-bottom: 1px solid var(--color-border-light);
    padding-bottom: var(--spacing-sm);
  }
  #ctStep3 table.cert-issue__grid tbody td:nth-child(2)::before,
  .consent-pool table.grid.consent-pool__cert-grid tbody td:nth-child(2)::before,
  .consent-pool table.grid.consent-pool__edu-grid tbody td:nth-child(2)::before,
  .consent-pool table.grid.consent-pool__award-grid tbody td:nth-child(2)::before {
    content: none;
  }
  #ctStep3 table.cert-issue__grid tbody td:nth-child(2) > .cell-content,
  .consent-pool table.grid.consent-pool__cert-grid tbody td:nth-child(2) > .cell-content,
  .consent-pool table.grid.consent-pool__edu-grid tbody td:nth-child(2) > .cell-content,
  .consent-pool table.grid.consent-pool__award-grid tbody td:nth-child(2) > .cell-content {
    display: block;
    flex: 1 1 0%;
    min-width: 0;
    text-align: left;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  #ctStep3 table.cert-issue__grid tbody td:nth-child(n+3),
  .consent-pool table.grid.consent-pool__cert-grid tbody td:nth-child(n+3),
  .consent-pool table.grid.consent-pool__edu-grid tbody td:nth-child(n+3),
  .consent-pool table.grid.consent-pool__award-grid tbody td:nth-child(n+3) {
    order: 0;
    display: flex;
    width: 100% !important;
    flex: 0 0 100%;
    min-width: 0;
    margin-top: var(--spacing-xs);
    border-bottom: none;
    padding: 0 var(--spacing-sm);
    font-size: var(--font-size-body-m);
    font-weight: 400;
    color: var(--color-text-body);
    text-align: right;
    overflow: visible;
    white-space: normal;
  }
  #ctStep3 table.cert-issue__grid tbody td:nth-child(n+3)::before,
  .consent-pool table.grid.consent-pool__cert-grid tbody td:nth-child(n+3)::before,
  .consent-pool table.grid.consent-pool__edu-grid tbody td:nth-child(n+3)::before,
  .consent-pool table.grid.consent-pool__award-grid tbody td:nth-child(n+3)::before {
    content: attr(data-label);
    font-weight: 400;
    color: var(--color-text-tertiary, #767676);
  }
  #ctStep3 table.cert-issue__grid tbody td:nth-child(n+3) > .cell-content,
  .consent-pool table.grid.consent-pool__cert-grid tbody td:nth-child(n+3) > .cell-content,
  .consent-pool table.grid.consent-pool__edu-grid tbody td:nth-child(n+3) > .cell-content,
  .consent-pool table.grid.consent-pool__award-grid tbody td:nth-child(n+3) > .cell-content {
    display: flex;
    justify-content: flex-end;
    text-align: right;
    overflow: visible;
    white-space: normal;
  }
  #ctStep3 table.cert-issue__grid tbody td:nth-child(3),
  .consent-pool table.grid.consent-pool__cert-grid tbody td:nth-child(3),
  .consent-pool table.grid.consent-pool__edu-grid tbody td:nth-child(3),
  .consent-pool table.grid.consent-pool__award-grid tbody td:nth-child(3) {
    margin-top: 0;
    padding-top: var(--spacing-sm);
  }
  /* 위 display:flex 가 공용 td:empty 숨김을 이기므로 빈 값 칸(학위 등)은 다시 숨긴다 */
  #ctStep3 table.cert-issue__grid tbody td:nth-child(n+3):empty,
  .consent-pool table.grid.consent-pool__cert-grid tbody td:nth-child(n+3):empty,
  .consent-pool table.grid.consent-pool__edu-grid tbody td:nth-child(n+3):empty,
  .consent-pool table.grid.consent-pool__award-grid tbody td:nth-child(n+3):empty {
    display: none;
  }
}
/* 묶음 상자 - 인재풀 .consent-pool .card 모바일 값(744px 이하)과 같게 */
@media (max-width: 744px) {
  .ct-ext-sec {
    padding: var(--spacing-xs) var(--spacing-md) var(--spacing-md);
    border-radius: var(--radius-lg);
  }
  .ct-ext-sec > h3 {
    padding: var(--spacing-md) 0 var(--spacing-sm);
    font-size: var(--font-size-16);
  }
}

/* [AI-GENERATED] 작성일: 2026-09-14 16:50 | 수정일: 2026-09-14 16:50
   인재풀경력관리 경력 정보 카드(모바일). 퍼블 규칙이 시안 7열을 전제로 2열을 숨기고 3열을 제목으로 잡아
   실화면(1 체크박스/2 근무처/3 근무기간/4 담당업무/5 부서·직위/6 인증여부)과 어긋났다. 경력목록 카드 구성으로 맞춘다:
   체크박스+근무처 … 인증여부 배지 → 담당업무(단독 줄+구분선, 퍼블 4열 규칙 그대로) → 근무기간·부서/직위.
   부서/직위가 비어 td:empty 로 숨는 행이 있어 아래 여백은 행(tr)에 준다. */
@media (max-width: 900px) {
  .consent-pool table.grid.consent-pool__career-grid tbody tr {
    padding: 0 0 var(--spacing-sm);
  }
  .consent-pool table.grid.consent-pool__career-grid tbody td:nth-child(2) {
    order: -2;
    display: flex;
    width: auto !important;
    flex: 1 1 0%;
    min-width: 0;
    border-bottom: none;
    padding: var(--spacing-sm) 0 0 var(--spacing-sm);
    font-size: var(--font-size-heading-h3);
    font-weight: 700;
    color: var(--color-text-heading);
    text-align: left;
  }
  .consent-pool table.grid.consent-pool__career-grid tbody td:nth-child(2)::before {
    content: none;
  }
  .consent-pool table.grid.consent-pool__career-grid tbody td:nth-child(2) > .cell-content {
    display: block;
    flex: 1 1 0%;
    min-width: 0;
    text-align: left;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .consent-pool table.grid.consent-pool__career-grid tbody td:nth-child(6) {
    order: -1;
    width: auto !important;
    flex: 0 0 auto;
    margin-top: 0;
    border-bottom: none;
    padding: var(--spacing-sm) var(--spacing-sm) 0 var(--spacing-sm);
  }
  .consent-pool table.grid.consent-pool__career-grid tbody td:nth-child(6)::before {
    content: none;
  }
  .consent-pool table.grid.consent-pool__career-grid tbody td:nth-child(3),
  .consent-pool table.grid.consent-pool__career-grid tbody td:nth-child(5) {
    width: 100% !important;
    flex: 0 0 100%;
    min-width: 0;
    border-bottom: none;
    padding: 0 var(--spacing-sm);
    font-size: var(--font-size-body-m);
    font-weight: 400;
    color: var(--color-text-body);
    text-align: right;
    overflow: visible;
    white-space: normal;
  }
  .consent-pool table.grid.consent-pool__career-grid tbody td:nth-child(3)::before,
  .consent-pool table.grid.consent-pool__career-grid tbody td:nth-child(5)::before {
    content: attr(data-label);
    font-weight: 400;
    color: var(--color-text-tertiary, #767676);
  }
  .consent-pool table.grid.consent-pool__career-grid tbody td:nth-child(3) > .cell-content,
  .consent-pool table.grid.consent-pool__career-grid tbody td:nth-child(5) > .cell-content {
    display: flex;
    justify-content: flex-end;
    text-align: right;
    overflow: visible;
    white-space: normal;
  }
  .consent-pool table.grid.consent-pool__career-grid tbody td:nth-child(3) {
    order: 3;
    margin-top: 0;
    padding-top: var(--spacing-sm);
  }
  /* 근무기간 값이 날짜 하이픈에서 꺾였다(2026-09- / 30). 값은 한 줄로 두고 폭이 모자라면 긴 라벨이 접힌다 */
  .consent-pool table.grid.consent-pool__career-grid tbody td:nth-child(3)::before {
    flex: 0 1 auto;
    min-width: 0;
  }
  .consent-pool table.grid.consent-pool__career-grid tbody td:nth-child(3) > .cell-content {
    flex: none;
    white-space: nowrap;
  }
  .consent-pool table.grid.consent-pool__career-grid tbody td:nth-child(5) {
    order: 4;
    margin-top: var(--spacing-xs);
  }
}

/* [AI-GENERATED] 작성일: 2026-09-14 17:15 | 수정일: 2026-09-14 17:15
   경력목록 모바일 카드의 업무내용 구분선이 마지막 카드에서만 사라진다 - 데스크톱 이중선 방지 규칙
   `table.grid.career-list__grid tbody tr:last-child td { border-bottom:none }`(mockup.css)이 특이도로 이긴다. */
@media (max-width: 900px) {
  table.grid.career-list__grid tbody tr:last-child td:nth-child(4) {
    border-bottom: 1px solid var(--color-border-light);
  }
}

/* [AI-GENERATED] 작성일: 2026-09-14 17:30 | 수정일: 2026-09-14 17:30
   인재검색·나의 스크랩 검색바(.mentor-search-bar)의 글씨·입력칸을 경력목록 필터바(.filterbar)와 같게 한다(사용자 지시).
   멘토 목록 시안에서 온 컴포넌트라 값이 달랐다. 아래 값은 경력목록 화면 실측값이고,
   .mentor-search-bar 는 이 두 화면에서만 쓴다. */
.mentor-search-bar {
  background: rgb(236, 237, 242);
  border-radius: 8px;
}
.mentor-search-bar__label {
  font-size: 13px;
  font-weight: 500;
  line-height: 1.5;
  color: #666666;
}
.mentor-search-bar__input {
  font-size: 14px;
  line-height: 1.5;
  color: #111111;
  border-color: #d8dce4;
}
select.mentor-search-bar__input {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 44px;
  color: #767676;
  background: #ffffff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M5 7.5L10 12.5L15 7.5' stroke='%23767676' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 16px center / 20px 20px;
}
.mentor-search-bar__submit.btn-primary {
  font-size: 13px;
  line-height: 1.5;
  border-radius: 6px;
}
@media (max-width: 744px) {
  .mentor-search-bar {
    padding: 16px;
  }
}

/* [AI-GENERATED] 작성일: 2026-09-14 17:45 | 수정일: 2026-09-14 17:45
   사용처 인재상세(/org/member/talentDetail) 자격증·학력·교육이수/상훈 탭 모바일 카드를
   경력 탭(.talent-detail__contract-grid, mockup.css)과 같은 형식으로 둔다(사용자 지시).
   1열(종목 및 등급·학교명·교육ᆞ훈련명)을 굵은 제목으로 앞세우고 나머지는 구분선 없는 라벨:값 줄.
   마지막 칸이 비어 숨는 행(학위 등)이 있어 아래 여백은 행(tr)에 준다. */
@media (max-width: 900px) {
  table.grid.talent-detail__grid:not(.talent-detail__contract-grid) tbody tr {
    display: flex;
    flex-wrap: wrap;
    background: var(--white, #fff);
    border-color: var(--color-border-default);
    border-radius: var(--radius-md);
    padding: 0 0 var(--spacing-sm);
  }
  table.grid.talent-detail__grid:not(.talent-detail__contract-grid) tbody td {
    height: auto;
    border-bottom: none;
  }
  table.grid.talent-detail__grid:not(.talent-detail__contract-grid) tbody td:nth-child(1) {
    padding: var(--spacing-sm);
    font-size: var(--font-size-18);
    font-weight: 700;
    text-align: left;
  }
  table.grid.talent-detail__grid:not(.talent-detail__contract-grid) tbody td:nth-child(1)::before {
    content: none;
  }
  table.grid.talent-detail__grid:not(.talent-detail__contract-grid) tbody td:nth-child(1) > .cell-content {
    display: block;
    flex: 1 1 0%;
    min-width: 0;
    text-align: left;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  table.grid.talent-detail__grid:not(.talent-detail__contract-grid) tbody td:nth-child(n+2) {
    padding: 0 var(--spacing-sm);
    font-size: var(--font-size-body-m);
    text-align: right;
  }
  table.grid.talent-detail__grid:not(.talent-detail__contract-grid) tbody td:nth-child(2) {
    padding-top: var(--spacing-xs);
  }
  table.grid.talent-detail__grid:not(.talent-detail__contract-grid) tbody td:nth-child(n+2)::before {
    font-weight: 400;
    color: var(--color-text-tertiary, #767676);
  }
}

/* 표 영역 10행 높이 세로 스크롤 - 퍼블 원본에 없는 컴포넌트다.
   497px = th 45px + 45px 행 10줄 + 위아래 테두리 2px. 행 높이(mockup.css table.grid th/td)가 바뀌면 같이 고친다.
   표 머리는 sticky 로 남긴다 - th 가 불투명 배경을 가져 본문이 비치지 않는다. */
.table-wrap.table-wrap--scroll {
  max-height: 497px;
  overflow-y: auto;
}
.table-wrap.table-wrap--scroll table.grid th {
  position: sticky;
  top: 0;
  z-index: 1;
}

/* [AI-GENERATED] 작성일: 2026-09-17 10:00 | 수정일: 2026-09-17 10:00 */
/* 행 전체가 눌리는 목록은 손가락 커서를 띄운다. is-rowlink 는 inlab.js 가 행에 마우스를 올릴 때 붙인다.
   ing-grid--click 은 inGridTable 에 cellClick 이 걸린 관리자 그리드이고,
   아래 세 곳은 행 클릭을 화면에서 직접 건 목록이다 */
table.grid > tbody > tr.is-rowlink,
table.grid.ing-grid--click > tbody > tr[data-rowid],
#jbRows > tr[data-jobnoticeno],
#jnRows > tr[data-jobnoticeno],
#pmBody > tr[data-pollno] > td:not(.pm-noclick),
.consent-pool table.grid > tbody > tr {
  cursor: pointer;
}

/* [AI-GENERATED] 작성일: 2026-09-22 10:00 | 수정일: 2026-09-22 10:00 */
/* 순서변경 화면(inGridTable dragItem:"row"). 놓일 자리는 행 위·아래 선으로 보인다 -
   표가 border-collapse 라 테두리 대신 안쪽 그림자로 긋는다 */
table.grid.ing-grid--drag > tbody > tr[data-rowid] {
  cursor: move;
}
table.grid.ing-grid--drag > tbody > tr.is-dragging {
  opacity: .4;
}
table.grid.ing-grid--drag > tbody > tr.ing-drop-before > td {
  box-shadow: inset 0 2px 0 var(--color-primary);
}
table.grid.ing-grid--drag > tbody > tr.ing-drop-after > td {
  box-shadow: inset 0 -2px 0 var(--color-primary);
}

/* [AI-GENERATED] 작성일: 2026-09-23 10:40 | 수정일: 2026-09-23 10:40 */
/* 표 방식 등록 폼(.write-basic)의 항목명·입력칸을 .form-row 화면과 같은 15px 로 맞춘다.
   관리자 공통(bcnimda design.css)의 표 규칙이 14px 이라 같은 특이도로 두고 로드 순서로 이긴다 */
.write-basic table tbody th,
.write-basic table tbody td,
.write-basic table tbody label,
.write-basic table tbody input:not([type="radio"]):not([type="checkbox"]),
.write-basic table tbody select,
.write-basic table tbody textarea {
  font-size: 15px;
}

/* [AI-GENERATED] 작성일: 2026-09-23 11:20 | 수정일: 2026-09-23 11:20 */
/* 관리자 설문 참여의 개인정보 동의. 문항 카드와 같은 모양이라 마지막 문항처럼 읽혀,
   문구와 예/아니오를 한 줄에 둔 옅은 띠로 낮춘다. 마크업은 그대로 두고 CSS 로만 바꾼다 -
   __top 의 인라인 margin-top:-35px 는 인라인이라 !important 로만 눌린다 */
.surv-wrap.agreement-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 4px;
  padding: 14px 18px;
  border: 1px solid #E3E8F0;
  border-radius: 8px;
  background: #FAFBFD;
}
/* 설문 본문 첫 칸을 띄우려는 `.view-header + form > .surv-wrap`(padding-top:40px)이 이 박스에도
   걸려 위가 벌어진다. 같은 자리에서 한 단계 좁은 선택자로 되돌린다 */
.view-header + form > .surv-wrap.agreement-box {
  padding: 12px 18px;
  margin-top: 0;
}
.surv-wrap.agreement-box .agreement-box__top {
  margin-top: 0 !important;
  padding: 0;
  border-bottom: 0;
  background: none;
}
.surv-wrap.agreement-box .UNI_h4 {
  font-size: 15px;
  font-weight: 400;
  color: #4B5563;
}
.surv-wrap.agreement-box .agreement-box__bot {
  padding: 0;
}
.surv-wrap.agreement-box .agreement-box__bot ul,
.surv-wrap.agreement-box .agreement-box__bot li {
  list-style: none;
  margin: 0;
  padding: 0;
}
.surv-wrap.agreement-box .input-radio {
  display: flex;
  align-items: center;
  gap: 18px;
  white-space: nowrap;
}
.surv-wrap.agreement-box .input-radio label {
  font-size: 15px;
  color: #333;
}