@charset "utf-8";

/* =========================================================
   content.css — 공통 UI 컴포넌트 라이브러리 (단일 출처)
   - 폼(.field_box·.field_input·.field_textarea) / 버튼(.btn_fill·.btn_line·.btn_act·.btn_secondary)
   - .infobox·.result·.badge·.data_table·.tab·.pagination 등 콘텐츠 영역 재사용 컴포넌트
   - 토큰·레이아웃 골격은 common.css / 헤더·메뉴·푸터는 layout.css
========================================================= */

/* =========================================================
   콘텐츠 영역 (활동결과목록조회 등 목록형 화면)
   - 디자인 토큰: 본문 var(--color-text-body) / 제목 var(--color-text-title) / 캡션 var(--color-text-caption)
     placeholder var(--color-text-muted) / primary var(--color-primary) / 표 헤더 var(--color-primary-light) / 표 선 var(--color-border)
========================================================= */

/* =========================================================
   위치 경로 (breadcrumb)
========================================================= */
.breadcrumb {padding-bottom:4rem;}
.breadcrumb_list {display:flex; align-items:center; gap:.4rem;}
.breadcrumb_item {display:flex; align-items:center; gap:.4rem;}
.breadcrumb_item + .breadcrumb_item::before {content:""; flex-shrink:0; width:1.6rem; height:1.6rem; background:url(../images/icon/ico_arrow_right_16.svg) no-repeat 50% / contain;} /* 위치 경로 구분 화살표 — CSS 도형 대신 아이콘 사용 */
.breadcrumb_link {display:inline-flex; align-items:center; gap:.4rem; min-height:2.4rem; padding:0 .4rem; font-size:var(--fs-base); line-height:var(--lh-base); color:var(--color-text-body); text-decoration:underline;}
.breadcrumb_link.is_current {color:var(--color-text-body); cursor:default; text-decoration:none;}
.breadcrumb_home::before {content:""; width:1.6rem; height:1.6rem; background:url(../images/icon/ico_home.svg) no-repeat center / contain;}

/* =========================================================
   페이지 제목 / 섹션 (내정보)
========================================================= */
.content_title {margin-bottom:4.8rem; font-size:var(--fs-h1); font-weight:700; line-height:var(--lh-base); color:var(--color-text-strong);}
.section_title {margin-bottom:2.4rem; font-size:var(--fs-h2); font-weight:700; line-height:var(--lh-base); color:var(--color-text-title);}
.section_title.size_sm {font-size:var(--fs-h3); margin-bottom:2rem;} /* 소제목 크기(h3, 2.4rem) + margin-bottom 2.0rem — edu_title 동일 크기·탭 패널 제목 등 (type_tile에서는 margin-bottom:0이 우선) */
.section_receipt {margin:0; font-size:var(--fs-lg); font-weight:400; line-height:var(--lh-base); color:var(--color-text-body);} /* 진행현황 섹션 헤더 접수번호 라벨 — U-QP-02-13 전용 */
.subsection_title {margin-bottom:2rem; font-size:var(--fs-h3); font-weight:700; line-height:var(--lh-base); color:var(--color-text-title);} /* 24px 타이틀 아래 간격은 20px */
/* 스텝 페이지 변형 — 스텝 인디케이터와 함께 오는 제목은 본문까지 간격 40(일반 박스형 24와 구분) */
.section_title.type_step,
.subsection_title.type_step {margin-bottom:4rem;}
/* 자격발급 신청 안내 — 섹션 제목 바로 아래 소제목이 오는 섹션은 본문까지 간격 40 */
#documents .section_title,
#extra .section_title {margin-bottom:4rem;}
.section-body {display:flex; flex-direction:column; gap:4rem;}
.section + .section {margin-top:8rem;}

/* =========================================================
   안내 박스 (infobox)
========================================================= */
.infobox {
	display: flex;
	flex-direction: column;
	gap: .8rem;
	padding: 2.4rem;
	border: 1px solid var(--color-gray-light);
	border-radius: var(--radius-2xl);
	background: var(--color-gray-subtler);
}
.infobox_head {display:flex; align-items:center; gap:.8rem;}
.infobox.type_top .infobox_head {align-items:flex-start;} /* 아이콘을 제목 첫 줄 기준 정렬 */
.infobox.type_top .infobox_ico {height:2.85rem;} /* 제목 첫 줄 라인 높이(1.9rem*1.5)만큼 확보 → 아이콘 이미지가 첫 줄 세로 중앙 */
.infobox_ico {flex-shrink:0; width:2rem; height:2rem; background:url(../images/icon/ico_info.svg) no-repeat center / contain;}
.infobox_title {font-size:var(--fs-h4); font-weight:700; line-height:var(--lh-base); color:var(--color-text-title);}
.infobox_body {padding-left:2.8rem;}
.infobox_body p {font-size:var(--fs-lg); line-height:var(--lh-base); color:var(--color-text-body);}

/* =========================================================
   결과/완료 안내 (회원탈퇴 심사중 등 — 가운데 정렬 상태 박스)
========================================================= */
.result {display:flex; flex-direction:column; align-items:center; gap:4rem; padding:6.4rem 4rem 4rem; border:1px solid var(--color-gray-light); border-radius:var(--radius-3xl); background:var(--color-white);}
.result_main {display:flex; flex-direction:column; align-items:center; gap:2.4rem; width:100%;}
.result_ico {flex-shrink:0; width:6.4rem; height:6.4rem; background:url(../images/icon/ico_attention.svg) no-repeat center / contain;}
.result_text {display:flex; flex-direction:column; align-items:center; gap:.8rem; width:100%;}
.result_title {font-size:var(--fs-h3); font-weight:700; line-height:var(--lh-base); color:var(--color-text-title); text-align:center;}
.result_desc {font-size:var(--fs-lg); line-height:var(--lh-base); color:var(--color-text-body); text-align:center;}
.result_btn {display:inline-flex; align-items:center; justify-content:center; min-width:9rem; height:5.6rem; padding:0 2rem; border-radius:var(--radius-lg); font-size:var(--fs-19); line-height:var(--lh-base); transition:background .2s, border-color .2s;}
.result_status {display:flex; align-items:center; gap:1.6rem; width:100%; padding:2.4rem; border-radius:var(--radius-xl); background:var(--color-gray-subtler);}
.result_status_date {flex:1 1 0; min-width:0; font-size:var(--fs-lg); line-height:var(--lh-base); color:var(--color-text-title);}
.result_status_label {margin-right:.4rem; font-weight:600;}
.result_status_ico {flex-shrink:0; width:2.4rem; height:2.4rem; background:url(../images/icon/ico_check_circle.svg) no-repeat center / contain;}
.result_status_state {flex-shrink:0; font-size:var(--fs-lg); font-weight:600; line-height:var(--lh-base); color:var(--color-text-title);}
/* result 완료(체크) 변형 — 회원가입 완료 등 (기본 result_ico는 attention 아이콘) */
.result.type_check .result_ico {background-image:url(../images/icon/ico_complete.svg);}
/* result 완료(체크) 간격 — 컨테이너 상하 56 / 제목↔설명 24 (디자인 반영) */
.result.type_check {padding:5.6rem 4rem;}
.result.type_check .result_text {gap:2.4rem;}
/* result 진위확인 결과 변형 — 아이콘 + 결과 문구 한 줄만 담는다 (U-QP-07-02) */
.result.type_verify {padding:5.6rem 4rem;}
.result.type_verify .result_ico {background-image:url(../images/icon/ico_complete.svg);}
.result.type_verify.type_invalid .result_ico {background-image:url(../images/icon/ico_attention_error.svg);} /* 자격이 유효하지 않을 때 */
/* result 접수번호 변형 — 리드(접수번호 + 완료 문구) 묶음, 본문(안내)과 간격 24 (자격증 발급 신청 완료) */
.result.type_receipt .result_text {gap:2.4rem;}
.result_lead {display:flex; flex-direction:column; align-items:center; gap:.4rem; width:100%;}
.result_no {font-size:var(--fs-h3); font-weight:700; line-height:var(--lh-base); color:var(--color-primary-dark); text-align:center;}

/* =========================================================
   모바일 앱 설치 안내 (app_guide_android · app_guide_ios) — 화면 가운데 앱 아이콘 + 제목 + 안내, 아래 버튼 또는 설치 방법
========================================================= */
.app_guide {display:flex; flex-direction:column; justify-content:center; flex:1 1 auto; width:100%; max-width:48rem; margin:0 auto; padding:4rem 2rem;}
.app_guide_head {display:flex; flex-direction:column; align-items:center; gap:2.4rem;}
.app_guide_icon {display:flex; align-items:center; justify-content:center; overflow:hidden; width:10rem; height:10rem; border:1px solid var(--color-gray-light); border-radius:2.6rem; background:var(--color-white);}
.app_guide_icon img {width:8.6rem; height:8.6rem;}
.app_guide_title {width:100%; font-size:2.4rem; font-weight:700; line-height:var(--lh-base); color:var(--color-text-title); text-align:center;}
.app_guide_desc {font-size:var(--fs-lg); line-height:var(--lh-base); color:var(--color-text-body); text-align:center;}
.app_guide .btn_area {flex-direction:column; gap:1.2rem; padding-top:3.2rem;}
.app_guide .btn_area button {flex:0 0 auto; width:100%;} /* MO 공통 규칙(가로 균등)보다 우선 — 세로 100% */
.app_guide .infobox {margin-top:3.2rem;}
.app_guide .infobox_title {font-size:var(--fs-lg);}
.app_guide .infobox_body .text_list {gap:0;}

/* infobox 완료(체크) 변형 — 안내 박스에 파란 체크 아이콘 */
.infobox.type_check .infobox_ico {background-image:url(../images/icon/ico_check_circle.svg);}
/* infobox 동작 변형 — 우측에 버튼(반려 → 이의신청 등) */
.infobox.type_action {flex-direction:row; align-items:center; gap:2.4rem;}
.infobox.type_action .infobox_main {flex:1 1 0; min-width:0; display:flex; flex-direction:column; gap:.8rem;}
/* infobox 동작 변형(가운데) — 안내문 가운데 + 하단 가운데 버튼(신청서 불러오기 등, U-QP-05-10) */
.infobox.type_action.type_center {flex-direction:column; align-items:center; gap:2.4rem; text-align:center;}
.infobox.type_action.type_center .infobox_main {flex:0 0 auto; width:100%; align-items:center;}
.infobox.type_action.type_center .infobox_desc {font-size:var(--fs-lg); line-height:var(--lh-base); color:var(--color-text-body);}
/* infobox 파란 톤 변형 — point 강조 안내 */
.infobox.type_primary {border-color:var(--color-secondary-light); background:var(--color-secondary-subtler);}
.infobox.type_primary .infobox_ico {background-image:url(../images/icon/ico_info_primary.svg);}
.infobox.type_primary .infobox_title {color:var(--color-secondary);}
/* infobox 완료(success) 톤 변형 — 신청 완료 등 (초록 배경 + success 아이콘) */
.infobox.type_success {border-color:var(--color-success-border); background:var(--color-success-subtle);}
.infobox.type_success .infobox_ico {background-image:url(../images/icon/ico_system_success.svg);}
.infobox.type_success .infobox_title {color:var(--color-msg-success);}
/* infobox 경고(warning) 톤 변형 — 발급 취소 등 (연노랑 배경 + warning 아이콘) */
.infobox.type_warning {border-color:var(--color-warning-border); background:var(--color-warning-light);}
.infobox.type_warning .infobox_ico {background-image:url(../images/icon/ico_system_warning.svg);}
.infobox.type_warning .infobox_title {color:var(--color-msg-warning);}
/* infobox 한 줄 변형 — 아이콘 + 한 줄 안내(제목·본문 없음) */
.infobox.type_slim {flex-direction:row; align-items:center; gap:.8rem;}
.infobox.type_slim .infobox_text {font-size:var(--fs-lg); line-height:var(--lh-base); color:var(--color-text-title);}
.infobox.type_slim.type_primary .infobox_text {color:var(--color-secondary);}
/* 한 줄 변형인데 안내문이 여러 줄일 때 — 아이콘을 첫 줄에 고정 (U-QP-05-04) */
.infobox.type_slim.type_top {align-items:flex-start;}
.infobox.type_slim.type_top .infobox_ico {height:2.55rem;}
/* 페이지 제목 아래 안내 박스 — 뒤따르는 본문 섹션과 간격을 벌린다 */
.content > .infobox + .section {margin-top:4rem;}
/* infobox 본문 내 링크(외부 URL 등)는 본문과 구분되도록 밑줄 + primary 색 */
.infobox_text a {color:var(--color-primary); text-decoration:underline;}
/* infobox 본문 구분선 + 목록 (Default 변형 본문에서 사용) */
.infobox_divider {height:0; margin:1.2rem 0 0; border:0; border-top:1px dashed var(--color-gray-light);}
.infobox.type_primary .infobox_divider {border-top-color:var(--color-secondary-light);}
.infobox_list {display:flex; flex-direction:column; gap:.8rem; margin:0; padding:0; list-style:none;}
/* 본문 문단·구분선 다음에 목록이 이어질 때만 사이 간격 */
.infobox_body p + .infobox_list,
.infobox_divider + .infobox_list {margin-top:1.2rem;}
.infobox_list li {position:relative; padding-left:2.4rem; font-size:var(--fs-lg); line-height:var(--lh-base); color:var(--color-text-body);}
/* 1뎁스 마커 — 대시(-) */
.infobox_list > li::before {content:""; position:absolute; top:12px; left:.8rem; width:.6rem; height:0; border-top:1px solid var(--color-text-body);}
/* 하위 뎁스 마커 — 점(·) */
.infobox_list ul {display:flex; flex-direction:column; gap:.8rem; margin:.8rem 0 0; padding:0; list-style:none;}
.infobox_list ul > li::before {content:""; position:absolute; top:.9rem; left:.8rem; width:.6rem; height:.6rem; border-radius:100%; background:var(--color-text-body);}
/* infobox 목록 변형 — 아이콘 + 안내 목록(머리/본문 없음, 회원가입 약관동의 등) */
.infobox.type_list {flex-direction:row; align-items:flex-start; gap:.8rem; padding:2.4rem;}
.infobox.type_list .text_list {flex:1 1 0; min-width:0;}
/* 목록 대신 문단 하나만 담는 경우 (U-QP-01-02) — 법령명이 어절째 다음 줄로 밀리지 않도록 글자 단위 줄바꿈 허용(body의 keep-all 해제) */
.infobox.type_list .infobox_text {flex:1 1 0; min-width:0; font-size:var(--fs-lg); line-height:var(--lh-base); color:var(--color-text-title); word-break:normal;}
/* infobox 참고/유의 변형 — 회색 톤 컴팩트 노트, 완료 화면 하단 안내 */
.infobox.type_note {padding:2.4rem; border-radius:var(--radius-2xl);}
/* infobox 본문 전용 변형 — 아이콘·제목 없이 본문만, 테두리 없는 회색 박스 (약관·정책 안내문) */
.infobox.type_plain {border:0; border-radius:var(--radius-xl);}
.infobox.type_plain .infobox_body {padding-left:0;}
.infobox.type_plain .infobox_body p {color:var(--color-text-title);}
/* infobox 도입부 변형 — 원형 아이콘 + 안내문 한 덩어리, 정책 페이지 상단 배너 */
.infobox.type_lead {flex-direction:row; align-items:center; gap:2.4rem; padding:2.8rem; border:0; border-radius:var(--radius-3xl); background:var(--color-secondary-subtler);}
.infobox.type_lead .infobox_ico {width:5.6rem; height:5.6rem; border-radius:50%; background:var(--color-white) url(../images/icon/ico_copyright.svg) no-repeat center / 3.2rem;}
.infobox.type_lead .infobox_text {flex:1 1 0; min-width:0; font-size:var(--fs-lg); line-height:var(--lh-base); color:var(--color-text-title);}

/* =========================================================
   범용 텍스트 목록 (콘텐츠 본문 — 마커 7종)
========================================================= */
@counter-style text-list-circle {system:fixed; symbols:"\2460" "\2461" "\2462" "\2463" "\2464" "\2465" "\2466" "\2467" "\2468" "\2469";}
.text_list {display:flex; flex-direction:column; gap:1.2rem; margin:0; padding:0;}
.text_list li {position:relative; padding-left:2.8rem; font-size:var(--fs-lg); line-height:var(--lh-base); color:var(--color-text-body);}
/* 기본 마커 — 대시(-). 1뎁스는 클래스 없이 쓴다 */
.text_list li::before {content:""; position:absolute; top:12px; left:.8rem; width:.6rem; height:0; border-top:1px solid var(--color-text-body); color:var(--color-text-body);}
/* 점 (·) — 점 마커가 필요할 때만 지정 */
.text_list.type_dot > li::before {top:.9rem; left:.8rem; width:.6rem; height:.6rem; border-top:0; border-radius:50%; background:var(--color-text-body);}
/* 하위 뎁스(중첩 목록·들여쓴 부연 목록)의 점은 한 단계 작게 — li 단위 마커(mk_ref)는 점이 아니므로 제외 */
.text_list .text_list.type_dot > li:not(.mk_ref)::before,
.text_list.type_dot.apply_flow_subnote > li::before {top:1.1rem; width:.4rem; height:.4rem;}
/* 참고표 (※) */
.text_list.type_ref li::before {content:"\203B"; top:0; left:0; width:auto; height:auto; border-top:0; border-radius:0; background:none;}
/* 별표 (*) */
.text_list.type_star li {font-size:var(--fs-base);}
.text_list.type_star li::before {content:"\2217"; top:1px; left:6px; width:auto; height:auto; border-top:0; border-radius:0; background:none;}
/* 순서 목록 — 숫자(1.) */
/* ※ 마커는 직접 자식(> li)에만 — 중첩된 하위 목록(다른 마커)에 침범 방지 */
ol.text_list {counter-reset:text-list-num;}
ol.text_list > li {padding-left:2.8rem; counter-increment:text-list-num;}
ol.text_list > li::before {content:counter(text-list-num) "."; top:0; left:0; width:auto; height:auto; border-top:0; border-radius:0; background:none;}
/* 순서 목록 — 앞 목록에서 번호 이어가기(목록 사이에 표·소제목이 끼는 조문용) */
ol.text_list.type_continue {counter-reset:none;}
/* 순서 목록 — 소문자 알파벳(a.) */
ol.text_list.type_alpha > li {font-size:var(--fs-base);}
ol.text_list.type_alpha > li::before {content:counter(text-list-num, lower-alpha) ".";}
/* 순서 목록 — 원 숫자(①) */
ol.text_list.type_circle > li {padding-left:2.4rem; font-size:var(--fs-xs);}
ol.text_list.type_circle > li::before {content:counter(text-list-num, text-list-circle);}
/* 중첩 목록 — 상위 항목 아래 하위 목록(들여쓰기·항목 간격 축소) */
.text_list .text_list {gap:.8rem; margin-top:1.2rem; padding-left:.4rem;} /* 하위 마커를 상위 항목 첫 글자 라인에 맞춤 */
.text_list .text_list li {padding-left:2.4rem;}
.text_list .text_list li::before {left:0;}
/* 별표 각주형 하위 목록 — 새 목록이 아니라 상위 줄에 붙는 부연설명이라 간격을 더 좁힌다 */
.text_list .text_list.type_star {margin-top:.4rem;}
/* 참고표(※) 각주형 하위 목록 — 상위 항목의 부연설명이라 간격을 좁히고 한 단계 작게 */
.text_list .text_list.type_ref {margin-top:.8rem;}
.text_list .text_list.type_ref li {font-size:var(--fs-base);}
/* li 단위 마커 — 한 목록에 대시·참고표·별표 혼재 시 항목별 지정 */
.text_list li.mk_dash::before {content:""; top:12px; left:7px; width:.6rem; height:0; border-radius:0; background:none; border-top:1px solid var(--color-text-body);}
.text_list li.mk_ref::before {content:"\203B"; top:0; left:0; width:auto; height:auto; border-radius:0; background:none; border-top:0;}
.text_list li.mk_star::before {content:"\2217"; top:1px; left:6px; width:auto; height:auto; border-radius:0; background:none; border-top:0;}
/* 부가정보 목록 — 최상위 항목(라벨+설명)은 진한 텍스트, 중첩된 하위 목록은 기존 회색 유지 */
#extra .subsection > .text_list > li {color:var(--color-text-title);}

/* 텍스트 강조 색상 (primary) */
.c_primary {color:var(--color-primary);}
/* 텍스트 주의 색상 (point-dark) — 확정 전 임시 안내 문구 강조 */
.c_point {color:var(--color-point-dark);}

/* =========================================================
   자격신청 진행 단계 (step indicator)
========================================================= */
.apply_no {margin-bottom:4rem; font-size:var(--fs-lg); line-height:var(--lh-base); color:var(--color-text-title); text-align:right;}
.apply_no strong {font-weight:600;}
/* 카드 머리 — 재발급 상태: 제목(좌) + 접수일시(우) */
.card_head {display:flex; align-items:flex-start; gap:2.4rem; margin-bottom:4rem;}
.card_title {flex:1 1 0; min-width:0; font-size:var(--fs-body1); font-weight:700; line-height:var(--lh-base); color:var(--color-text-title);}
.card_date {flex-shrink:0; margin-left:auto; font-size:var(--fs-lg); line-height:var(--lh-base); color:var(--color-text-body);}
.step_list {display:flex; width:100%;}
.step_item {position:relative; flex:1 1 0; display:flex; flex-direction:column; align-items:center; gap:1.2rem;}
.step_item:not(:last-child)::after {content:""; position:absolute; left:50%; top:9px; z-index:0; width:100%; height:2px; background:var(--color-gray-light);}
.step_item.is_done::after {background:var(--color-element-gray);}
/* 단계 마커 — 순수 CSS (예정 기본 / 완료 / 현재) */
.step_mark {position:relative; z-index:1; flex-shrink:0; width:2rem; height:2rem; border-radius:50%; border:1px solid var(--color-gray-light); background:var(--color-gray-subtle);}
.step_item.is_done .step_mark {border-color:var(--color-element-gray); background:var(--color-element-gray);}
.step_item.is_done .step_mark::before {content:""; position:absolute; left:50%; top:45%; width:.5rem; height:.9rem; border:solid var(--color-white); border-width:0 2px 2px 0; transform:translate(-50%,-50%) rotate(45deg);}
.step_item.is_current .step_mark {border-color:var(--color-primary); background:var(--color-primary);}
.step_item.is_current .step_mark::before {content:""; position:absolute; left:50%; top:50%; width:1.4rem; height:1.4rem; border-radius:50%; border:1.6px solid var(--color-white); background:var(--color-primary); transform:translate(-50%,-50%);}
.step_label {display:flex; flex-direction:column; align-items:center; gap:.2rem;}
.step_no {font-size:var(--fs-base); line-height:var(--lh-base); color:var(--color-text-caption); font-style:normal;}
.step_name {font-size:var(--fs-lg); font-weight:700; line-height:var(--lh-base); color:var(--color-text-title); white-space:nowrap;}

/* =========================================================
   상태 배지 (badge) — 구분(채움 fill) / 처리상태(연한 soft)
   ※ 전체 타입·색(line/fill/soft × 8색)은 Badge 가이드(guide_badge.html) 참고
========================================================= */
.badge {display:inline-flex; align-items:center; justify-content:center; height:3.2rem; padding:0 .8rem; border-radius:var(--radius-sm); font-size:var(--fs-lg); font-weight:400; line-height:var(--lh-base); white-space:nowrap;}
.badge.fill_blue {background:var(--color-primary); color:var(--color-white);}
.badge.fill_green {background:var(--color-success); color:var(--color-white);}
.badge.soft_blue {background:var(--color-primary-light); color:var(--color-primary-dark);}
.badge.soft_green {background:var(--color-success-light); color:var(--color-msg-success);}
.badge.soft_navy {background:var(--color-secondary-subtler); color:var(--color-secondary-dark);}
.badge.soft_yellow {background:var(--color-warning-light); color:var(--color-msg-warning);}
.badge.soft_red {background:#fdefec; color:#bd2c0f;}
.badge.soft_gray {background:var(--color-gray-subtler); color:var(--color-text-body);}
.badge.fill_coral {background:var(--color-point); color:var(--color-white);}
.badge.fill_navy {background:var(--color-secondary); color:var(--color-white);}
.badge.fill_yellow {background:#ffb114; color:var(--color-text-title);}
.badge.line_blue {border:1px solid var(--color-primary); color:var(--color-primary-dark);}
.badge.size_sm {height:2.4rem; font-size:var(--fs-base);}

/* =========================================================
   데이터 표 (data_table) + 더보기
========================================================= */
/* position:relative — 표 안의 숨김 요소(.blind·form_check의 input 등 절대 배치)가 바깥 컨테이너를 기준으로 잡혀 문서 폭을 넓히지 않도록 스크롤 영역 자체를 기준 박스로 삼는다 */
.table_wrap {position:relative; width:100%; overflow-x:auto;}
.table_wrap:focus-visible {outline:2px solid var(--color-input-border-active); outline-offset:2px;} /* 가로 스크롤 표 — 키보드로 초점을 받았을 때만 표시 */
.data_table {width:100%;}
/* 고정폭 열 변형 — 열 수가 많아 콘텐츠(공백 없는 긴 기관명 등)가 넘칠 때 colgroup 폭을 강제하고 셀 안에서 줄바꿈 (U-QP-03-02) */
.data_table.type_fixed {table-layout:fixed;}
/* 공백 없는 긴 한글은 기본 줄바꿈이 안 되므로 넘칠 때만 단어를 끊음 (날짜 등 공백 있는 값은 공백에서 정상 줄바꿈) */
.data_table.type_fixed th,
.data_table.type_fixed td {word-wrap:break-word; overflow-wrap:break-word;}
.data_table th,
.data_table td {padding:1.6rem; border:1px solid var(--color-secondary-light); font-size:var(--fs-lg); line-height:var(--lh-base); text-align:center; word-break:normal; vertical-align:middle;}
.data_table thead th {border-right:0; border-bottom:0; border-left:0; border-top-color:var(--color-text-title); background:var(--color-gray-subtler); font-weight:700; color:var(--color-text-title);}
.data_table tbody td {color:var(--color-text-body);}
.data_table th:first-child,
.data_table td:first-child {border-left:0;}
.data_table th:last-child,
.data_table td:last-child {border-right:0;}
.data_table td.align_left {text-align:left;}
/* MO 카드형에서만 노출하는 항목 — PC 표에서는 열 자체를 비운다 (U-QP-01-02) */
.data_table th.for_mo,
.data_table td.for_mo {display:none;}
/* 행 제목 셀(th scope="row") — 열 머리글과 달리 본문 값처럼 보이도록 굵기·색 정리 */
.data_table tbody th {font-weight:400; color:var(--color-text-body);}
/* 표 안 체크박스 — 폼용 기본 고정폭을 풀고 셀 가운데 정렬 */
.data_table .form_check {display:inline-flex; width:auto;}
.data_table .form_check label {gap:0;}
.data_table .form_check .opt_mark {margin-top:0;}
/* 표 안 액션 버튼(다운로드 등) — 셀 높이에 맞춘 컴팩트 크기 (baseline 여백이 생기지 않도록 가운데 정렬) */
.data_table .btn_act {min-width:6rem; height:3.2rem; padding:0 1rem; border-radius:var(--radius-sm); font-size:var(--fs-base); vertical-align:middle;}
.data_table td:has(> .btn_act) {line-height:0;}
/* 게시판 목록 — 제목 셀(중요 배지 + 제목 링크) · 첨부 아이콘 (정보마당 공지사항 U-QP-06-01) */
.board_subject {display:flex; align-items:center; gap:1.2rem;}
.board_subject .badge {flex-shrink:0;}
.board_link {flex:1 1 0; min-width:0; overflow:hidden; color:var(--color-text-body); text-overflow:ellipsis; white-space:nowrap;}
.board_link:hover,
.board_link:focus {text-decoration:underline;}
.board_subject.is_notice .board_link {font-weight:700;}
.board_file_ico {display:inline-block; width:2.4rem; height:2.4rem; background:url(../images/icon/ico_attach.svg) no-repeat 50% / 2.4rem;}
.board_empty {padding:6rem 0; font-size:var(--fs-lg); line-height:var(--lh-base); color:var(--color-text-body); text-align:center;}

/* 표 빈 상태 — 조회 결과가 없을 때 tbody 첫 행에 colspan 으로 넣는다 */
.data_table td.is_empty {padding:2.4rem 1.6rem;}
.data_empty {display:flex; flex-direction:column; align-items:center; gap:.8rem;}
.data_empty_ico {width:3.2rem; height:3.2rem; background:url(../images/icon/ico_no_data.svg) no-repeat 50% / contain;}
.data_empty p {font-size:var(--fs-lg); line-height:var(--lh-base); color:var(--color-text-body);}

/* 게시판 상세 보기 (정보마당 공지사항 상세 U-QP-06-02) — 제목/메타 + 본문 + 첨부 + 이전다음글 */
.board_view {display:flex; flex-direction:column; gap:4rem;}
/* 제목 영역 — 상하 구분선, 배지+제목, 메타정보(작성자/유형/작성일/조회수) */
.board_view_head {padding:2.4rem 0; border-top:1px solid var(--color-text-title); border-bottom:1px solid var(--color-gray-light);}
.board_view_title {display:flex; align-items:center; gap:1.6rem;}
.board_view_title .badge {flex-shrink:0;}
.board_view_subject {font-size:var(--fs-title); font-weight:700; line-height:var(--lh-base); color:var(--color-text-title);}
.board_view_meta {display:flex; flex-wrap:wrap; align-items:center; margin-top:1.6rem;}
.board_view_meta_item {position:relative; display:flex; align-items:center; gap:1.2rem; font-size:var(--fs-lg); line-height:var(--lh-base); color:var(--color-text-title);}
/* 항목 사이 구분선 — 디자인 기준 높이 16px 고정·세로 가운데 (border-left는 항목 높이만큼 길어져 사용 안 함) */
.board_view_meta_item + .board_view_meta_item {margin-left:1.6rem; padding-left:1.6rem;}
.board_view_meta_item + .board_view_meta_item::before {content:""; position:absolute; left:0; top:50%; width:1px; height:1.6rem; margin-top:-.8rem; background:var(--color-gray);}
.board_view_meta_label {font-weight:600;}
/* 본문 */
.board_view_body {font-size:var(--fs-lg); line-height:var(--lh-base); color:var(--color-text-body); word-break:break-all;}
.board_view_body p {margin:0;}
.board_view_body p + p {margin-top:2.4rem;}
/* 본문 이미지(예시 포스터 등) + 출처 캡션 (자료실 상세 U-QP-06-04) */
.board_view_img {max-width:480px; margin:0;}
.board_view_img img {display:block; width:100%; height:auto;}
.board_view_credit {color:var(--color-text-caption);}
/* 첨부파일 (doc_filelist · doc_file.type_plain · doc_download 재사용) */
.board_view_files {display:flex; flex-direction:column; gap:1.6rem;}
.board_view_files_title {font-size:var(--fs-19); font-weight:700; line-height:var(--lh-base); color:var(--color-text-title);}
.board_view_files_count {color:var(--color-primary);}
/* 이전글/다음글 네비게이션 표 — th 180 회색 라벨 + td 링크(배지 포함 가능). MO에서도 2열 유지
   ※ 라벨 열 너비는 colgroup의 .board_nav_col_th로 제어(PC 180 / MO 77) — th width로 주면 col 인라인폭에 밀려 안 먹힘 */
/* 상단선은 table 에 주되 border-collapse:separate 로 둔다 — collapse 모델에서는 보더가 병합되면서
   colgroup 이 있을 때 첫 열 폭만큼만 그려지거나, 배경이 깔린 th 위쪽만 고해상도 화면(iOS)에서
   1px 더 두껍게 반올림된다. 세로 보더가 없는 구조라 separate + border-spacing:0 으로 두어도 이중선이 생기지 않는다 */
.board_nav {width:100%; border-collapse:separate; border-spacing:0; border-top:1px solid var(--color-text-title);}
.board_nav_col_th {width:180px;}
.board_nav th {padding:1.6rem; border-bottom:1px solid var(--color-border); background:var(--color-gray-subtler); font-size:var(--fs-lg); font-weight:700; line-height:var(--lh-base); color:var(--color-text-title); text-align:left; vertical-align:middle; white-space:nowrap;}
.board_nav td {padding:1.6rem; border-bottom:1px solid var(--color-border); font-size:var(--fs-lg); line-height:var(--lh-base); color:var(--color-text-body); text-align:left; vertical-align:middle;}
.board_nav_link {display:flex; align-items:center; gap:1.2rem; color:var(--color-text-body);}
/* .type_stack — PC는 한 줄(가로), MO에서 분류 배지를 제목 위로 세로 정렬 (자료실 상세 다음글, U-QP-06-04 / MO 규칙은 미디어쿼리) */
.board_nav_link:hover,
.board_nav_link:focus {text-decoration:underline;}
.board_nav td .badge {flex-shrink:0;}

.list_foot {display:flex; justify-content:flex-end; margin-top:2.4rem;}

/* =========================================================
   탭 (tab) — 콘텐츠 전환
========================================================= */
.tab {display:flex;}
.tab_item {flex:1 1 0; min-width:8rem; height:5.6rem; padding:0 .8rem; border:0; border-bottom:2px solid var(--color-gray); background:transparent; font-size:var(--fs-h4); font-weight:700; line-height:var(--lh-base); color:var(--color-text-body); text-align:center; cursor:pointer;}
.tab_item.is_active {border-bottom:4px solid var(--color-secondary); color:var(--color-secondary-dark);}
/* 탭 가로 스와이프 래퍼 — 탭바가 화면폭을 넘칠 때 우측 끝에 페이드 + 다음 이동 버튼 (MO 전용) */
.tab_swipe {position:relative;}
.tab_swipe_prev,
.tab_swipe_next {display:none;}
.section + .tab {margin-top:8rem;}
.tab_panel {display:none;}
.tab_panel.is_active {display:block; margin-top:4rem;}

/* 분류 필터 — 알약형 버튼 그룹 (정보마당 자료실 U-QP-06-03) — 탭(.tab) 아래, 검색 필터 위 */
.cate_filter {display:flex; flex-wrap:wrap; gap:.8rem;}
.cate_btn {height:4.4rem; padding:0 1.6rem; border:0; border-radius:var(--radius-md); background:transparent; font-size:var(--fs-lg); font-weight:700; line-height:var(--lh-base); color:var(--color-text-body); cursor:pointer;}
.cate_btn:hover,
.cate_btn:focus-visible {background:var(--color-primary-subtler);}
.cate_btn.is_active {background:var(--color-secondary); color:var(--color-white);}
.cate_btn.is_active:hover,
.cate_btn.is_active:focus-visible {background:var(--color-secondary);}
.tab_panel_wrap > .cate_filter,
.tab_panel_wrap > .tab_swipe {margin-top:3.2rem;}
/* 모집공고 상세 — 기본정보 카드 아래 상세 안내 하위 탭(훈련과정안내/시간표/교육안내) + 패널 (U-QP-03-03) */
.course_filter {margin-top:4rem;}
/* 기관정보 탭 — 참고 안내 뒤 기관정보 제목 간격 (U-QP-03-03) */
.infobox.type_note + .section-header {margin-top:4rem;}
.course_panel {display:none;}
.course_panel.is_active {display:block; margin-top:2.4rem;}
.course_content {display:flex; flex-direction:column; gap:4rem;}
/* 시간표 (일자별 훈련 시간) — 월 이동 + 목록 (U-QP-03-03) */
.schedule_nav {display:flex; align-items:center; justify-content:center; gap:1.6rem; height:5.6rem;}
.schedule_nav_month {font-size:var(--fs-h4); font-weight:700; line-height:var(--lh-base); color:var(--color-text-title);}
.schedule_nav_btn {flex-shrink:0; position:relative; width:2.4rem; height:2.4rem; background:none; border:0; cursor:pointer;}
.schedule_nav_btn::before {content:""; position:absolute; top:50%; left:50%; width:.9rem; height:.9rem; border-style:solid; border-color:var(--color-text-title); border-width:2px 2px 0 0;}
.schedule_nav_prev::before {transform:translate(-30%,-50%) rotate(-135deg);}
.schedule_nav_next::before {transform:translate(-70%,-50%) rotate(45deg);}
.schedule_list {display:flex; flex-direction:column; margin:0; padding:0; list-style:none; border-top:1px solid var(--color-text-title);}
.schedule_item {display:flex; align-items:center; gap:1.2rem; padding:1.6rem; border-bottom:1px solid var(--color-secondary-light); background:var(--color-white);}
.schedule_col {flex:1 1 0; min-width:0;}
.schedule_col_day {display:flex; align-items:center;}
.schedule_day {display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; width:4rem; height:4rem; border-radius:50%; background:var(--color-primary-subtle); font-size:var(--fs-lg); line-height:var(--lh-base); color:var(--color-text-body);}
.schedule_date {display:flex; flex-direction:column; font-size:var(--fs-lg); font-weight:700; line-height:var(--lh-base); color:var(--color-text-body);}
.schedule_time {display:flex; flex-direction:column; font-size:var(--fs-lg); line-height:var(--lh-base); color:var(--color-text-body);}
.schedule_more {flex-shrink:0; display:inline-flex; align-items:center; justify-content:center; min-width:6rem; height:3.2rem; padding:0 1rem; border:1px solid var(--color-input-border); border-radius:var(--radius-sm); background:var(--color-white); font-size:var(--fs-base); line-height:var(--lh-base); color:var(--color-text-title); cursor:pointer; transition:background .2s;}
.schedule_more:hover,
.schedule_more:focus-visible {background:var(--color-gray-subtler);}

/* 일일단위 시간표 상세 팝업 — 카드(제목 + 라벨:값) 2개 (U-QP-03-03) */
.popup.type_schedule .popup_body {gap:2.4rem;}
.popup .card {display:flex; flex-direction:column; gap:2rem;}
.popup_card_title {font-size:var(--fs-h3); font-weight:700; line-height:var(--lh-base); color:var(--color-text-title);}
.popup .detail_label {width:14rem;}
.popup_hr {height:0; margin:0; border:0; border-top:1px solid var(--color-gray);}

/* 교육안내 — 강사 카드(연한 상단 + 남색 하단) + 교과목 카드 2단 (U-QP-03-03) */
.edu_guide {display:flex; align-items:stretch; gap:2.4rem;}
.edu_teacher {flex-shrink:0; display:flex; flex-direction:column; width:44rem;}
.edu_teacher_profile {flex:1 1 auto; display:flex; flex-direction:column; gap:2rem; padding:2.8rem; border-radius:var(--radius-3xl) var(--radius-3xl) 0 0; background:var(--color-secondary-subtler);}
.edu_teacher_info {display:flex; flex-direction:column; align-items:center; gap:2.4rem;}
.edu_teacher_photo {display:block; overflow:hidden; width:9.2rem; height:12.3rem; border:1px solid var(--color-gray);}
.edu_teacher_photo img {width:100%; height:100%; object-fit:cover;}
.edu_teacher_meta {display:flex; flex-direction:column; align-items:center; gap:.8rem; text-align:center;}
.edu_teacher_name {font-size:var(--fs-19); font-weight:700; line-height:var(--lh-base); color:var(--color-text-title);}
.edu_teacher_time {font-size:var(--fs-lg); line-height:var(--lh-base); color:var(--color-text-body);}
.edu_teacher_time b {font-weight:400; color:var(--color-text-title);}
.edu_teacher_place {display:flex; flex-direction:column; gap:.8rem; padding:2.8rem; border-radius:0 0 var(--radius-3xl) var(--radius-3xl); background:var(--color-secondary);}
.edu_place_row {font-size:var(--fs-lg); line-height:var(--lh-base); color:var(--color-white);}
.edu_place_label {display:inline-block; min-width:7.2rem; margin-right:.8rem;}
.edu_place_row b {font-weight:600;}
.edu_subjects {flex:1 1 0; min-width:0; display:flex; flex-direction:column; gap:2rem; padding:2.8rem; border:1px solid var(--color-gray-light); border-radius:var(--radius-3xl); background:var(--color-white);}
.edu_card_title {font-size:var(--fs-h3); font-weight:700; line-height:var(--lh-base); color:var(--color-text-title);}
.edu_subject_list {display:flex; flex-direction:column; gap:2.4rem; margin:0; padding:0; list-style:none;}
.edu_subject_item {display:flex; flex-direction:column; gap:.4rem;}
.edu_subject_name {font-size:var(--fs-19); font-weight:700; line-height:var(--lh-base); color:var(--color-text-title);}
.edu_subject_time {display:flex; flex-direction:column; font-size:var(--fs-lg); line-height:var(--lh-base);}
.edu_time_label {color:var(--color-text-body);}
.edu_time_value {color:var(--color-text-title);}

/* =========================================================
   상세 정보 그리드 (회색 박스: 라벨 + 값)
========================================================= */
.detail_box {padding:4rem; border-radius:var(--radius-3xl); background:var(--color-gray-subtler);}
/* 카드 다음 이어지는 섹션 제목 — 블록 간 간격 (U-QP-02-18-01) */
.detail_box + .section-header {margin-top:6.4rem;}
.detail_list {display:flex; flex-direction:column; gap:.8rem; margin:0;}
.detail_row {display:flex; gap:4rem;}
.detail_item {flex:1 1 0; min-width:0; display:flex; align-items:center; gap:1.6rem; min-height:5.6rem; margin:0;}
.detail_label {flex-shrink:0; width:100px; font-size:var(--fs-lg); font-weight:700; line-height:var(--lh-base); color:var(--color-text-title);}
.detail_value {flex:1 1 0; min-width:0; margin:0; font-size:var(--fs-lg); line-height:var(--lh-base); color:var(--color-text-body);}
/* 라벨 넓힘 변형 — type_label_wide 는 라벨 폭만, type_wide 는 카드 전체 변형 */
.detail_box.type_wide .detail_label,
.detail_box.type_label_wide .detail_label {width:18rem;}
/* 넓은 상세 카드 — 행을 붙여 쌓는다. 행 높이(5.6rem)가 곧 간격 역할 (Figma 1107:2806) */
.detail_box.type_wide .detail_list {gap:0;}
/* 라벨·값이 두 줄이면 8.2rem — 한 줄일 땐 min-height 5.6rem 에 흡수된다 (Figma 1107:2806) */
.detail_box.type_wide .detail_item {padding:1.1rem 0;}
.detail_box.type_wide .detail_label,
.detail_box.type_wide .detail_value {line-height:3rem;}
/* 진위확인 결과 카드 — 행을 붙여 쌓는다 (U-QP-07-02) */
.detail_box.type_verify .detail_list {gap:0;}
/* 상세 카드 안 체크 그리드(추가자격증) — 행 간격·아이템 폭·3열 제한 (U-QP-02-18-01) */
.detail_item .check_grid {row-gap:2.4rem; max-width:51.6rem;}
.detail_item .check_grid .form_check {width:15.6rem; min-width:0;}
/* 값이 여러 줄(체크 그리드)·파일 박스인 행 — 라벨 상단 정렬 */
.detail_row.type_top .detail_item {align-items:flex-start;}
.detail_row.type_top .detail_label {padding-top:1.6rem;}
/* 상세 값 자리 파일 다운로드 박스 (대표자격증 등, U-QP-02-18-01) */
.detail_file {display:flex; align-items:center; gap:1.6rem; padding:1.6rem; border:1px solid var(--color-gray-light); border-radius:var(--radius-md); background:var(--color-white);}
.detail_file_name {flex:1 1 0; min-width:0; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; font-size:var(--fs-lg); line-height:var(--lh-base); color:var(--color-text-title);}
.detail_file_down {flex-shrink:0; display:inline-flex; align-items:center; gap:.4rem; padding:0; border:0; background:transparent; font-size:var(--fs-lg); line-height:var(--lh-base); color:var(--color-text-title); cursor:pointer;}
.detail_file_down::after {content:""; width:2rem; height:2rem; background:url(../images/icon/ico_download.svg) no-repeat center / contain;}

/* =========================================================
   구비서류 첨부 (파일 리스트) + 신청인 서명
========================================================= */
.doc_attach {display:flex; flex-direction:column; gap:4rem;}
.doc_group {display:flex; flex-direction:column; gap:2rem;}
.doc_title {font-size:var(--fs-lg); font-weight:700; line-height:var(--lh-base); color:var(--color-text-strong);}
.doc_filelist {display:flex; flex-direction:column; gap:1.6rem; margin:0; padding:0; list-style:none;}
.doc_file {display:flex; align-items:center; gap:1.6rem; padding:1.6rem; border:1px solid var(--color-gray-light); border-radius:var(--radius-lg); background:var(--color-white);}
.doc_filename {flex:1 1 0; min-width:0; font-size:var(--fs-lg); line-height:var(--lh-base); color:var(--color-text-strong); word-break:break-all;}
.doc_download,
.doc_preview {flex-shrink:0; display:inline-flex; align-items:center; gap:.4rem; height:3.2rem; padding:0 .2rem; font-size:var(--fs-lg); line-height:var(--lh-base); color:var(--color-text-title); text-decoration:none;}
.doc_download .ico_download {flex-shrink:0; width:2rem; height:2rem; background:url(../images/icon/ico_download.svg) no-repeat center / contain;}
.doc_download .ico_delete {flex-shrink:0; width:2rem; height:2rem; background:url(../images/icon/ico_delete.svg) no-repeat center / contain;}
.doc_preview .ico_arrow_right {flex-shrink:0; width:2rem; height:2rem; background:url(../images/icon/ico_arrow_right.svg) no-repeat center / contain;}
.doc_file.type_plain {background:var(--color-white);}
.signer {display:flex; align-items:center; justify-content:flex-end; gap:1.6rem;}
.signer_label {font-size:var(--fs-lg); line-height:var(--lh-base); color:var(--color-text-strong);}
.signer_box {display:flex; align-items:center; width:201px; height:4.8rem; padding:0 1.6rem; border:1px solid var(--color-input-border); border-radius:var(--radius-md); background:var(--color-gray-subtler); font-size:var(--fs-lg); line-height:var(--lh-base); color:var(--color-text-caption);}
.signer_sign {width:160px; font-size:var(--fs-lg); line-height:var(--lh-base); color:var(--color-text-strong); text-align:right;}

/* 빈 상태 박스 (탭 내역 없음 등) */
.empty_box {display:flex; align-items:center; justify-content:center; min-height:12rem; padding:4rem; border:1px solid var(--color-gray-light); border-radius:var(--radius-xl); background:var(--color-white); font-size:var(--fs-lg); line-height:var(--lh-base); color:var(--color-text-body);}

/* =========================================================
   여러 줄 입력 (textarea) + 글자수 카운터
========================================================= */
.form_area {display:flex; flex-direction:column; gap:.8rem;}
.form_area .field_label {font-size:var(--fs-base); font-weight:700; line-height:var(--lh-base); color:var(--color-text-strong);}
.field_textarea {width:100%; height:14.4rem; padding:.8rem 1.6rem; border:1px solid var(--color-input-border); border-radius:var(--radius-md); background:var(--color-white); font-family:inherit; font-size:var(--fs-base); line-height:var(--lh-base); color:var(--color-text-body); resize:none; outline:none;}
.field_textarea::placeholder {color:var(--color-input-placeholder);}
.field_textarea:focus,
.field_textarea.is_focus {border-width:2px; border-color:var(--color-input-border-active);}
.field_textarea.is_error {border-width:2px; border-color:var(--color-point);}
.field_textarea.is_disabled {background:var(--color-input-surface-disabled); border-color:var(--color-input-border-disabled); color:var(--color-input-text-disabled);}
.field_textarea.type_guide {font-size:var(--fs-19);} /* 안내형 문의 textarea (U-QP-02-21) — PC 글자 크게, MO는 반응형 규칙에서 기본으로 복귀 */

/* 위지윅 에디터 (Toast UI Editor) — 문의 작성 (U-QP-02-21) : textarea와 같은 테두리·글자 사용 */
.field_editor .toastui-editor-defaultUI {overflow:hidden; border:1px solid var(--color-input-border); border-radius:var(--radius-md); font-family:inherit;}
.field_editor .toastui-editor-defaultUI:focus-within {border-width:2px; border-color:var(--color-input-border-active);}
.field_editor .toastui-editor-defaultUI-toolbar {border-radius:var(--radius-md) var(--radius-md) 0 0; padding:0 1.6rem;}
.field_editor .toastui-editor-ww-container .toastui-editor-contents {padding:.8rem 1.6rem; font-family:inherit; font-size:var(--fs-19); line-height:var(--lh-base); color:var(--color-text-body);}
.field_editor .ProseMirror .placeholder {color:var(--color-input-placeholder);}
.field_editor_help {position:absolute; overflow:hidden; width:1px; height:1px; margin:-1px; font-size:var(--fs-xs); line-height:var(--lh-base); color:var(--color-msg-info); clip:rect(0,0,0,0);} /* 편집기 사용 안내 — 평소 숨김 */
.field_editor.is_keyfocus + .field_editor_help {position:static; overflow:visible; width:auto; height:auto; margin:0; clip:auto;} /* 키보드로 편집기에 들어왔을 때만 노출 (마우스 클릭 진입은 숨김) */
.field_counter {display:flex; justify-content:flex-end; gap:.2rem; font-size:var(--fs-base); line-height:var(--lh-base); color:var(--color-text-body);}
.field_counter .count_now {color:var(--color-primary);}
.field_counter.is_error .count_now {color:var(--color-msg-error);}

/* 팝업 폼 블록 (제목 + 입력 묶음) / 안내 묶음 */
.form_block {display:flex; flex-direction:column; gap:1.6rem;}
.form_block_head {display:flex; align-items:center; gap:1.6rem;}
.form_block_title {flex:1 1 auto; min-width:0; font-size:var(--fs-h4); font-weight:700; line-height:var(--lh-base); color:var(--color-text-title);}
.appeal_head {display:flex; flex-direction:column; gap:1.6rem;}
.appeal_no {font-size:var(--fs-lg); line-height:var(--lh-base); color:var(--color-text-body); text-align:right;}

/* =========================================================
   셀렉트박스 (field_box + <select> + 화살표)
========================================================= */
.field_box:has(> select) {padding:0;}
.field_box > select {flex:1 1 0; min-width:0; height:100%; padding:0 4rem 0 1.6rem; border:0; background:none; font-family:inherit; font-size:var(--fs-lg); line-height:var(--lh-base); color:var(--color-text-title); outline:none; appearance:none; -webkit-appearance:none; cursor:pointer;}
.field_box.size_lg > select {font-size:var(--fs-19);}
.field_box.size_sm > select {font-size:var(--fs-base);} /* 목록 도구(list_tools) 셀렉트 — 높이 40(size_sm)·글자 15, PC·MO 공통 */
.field_box > select::-ms-expand {display:none;}
/* 선택 전(값 없는 첫 option) — 입력 전 안내문처럼 흐린 색 */
.field_box > select:has(> option[value=""]:checked) {color:var(--color-input-placeholder);}
.field_box > select option {min-height:3.2rem; padding:.8rem 1.2rem; background:var(--color-white); font-size:var(--fs-md); color:var(--color-text-title);}
.field_arrow {position:absolute; right:16px; top:50%; width:2rem; height:2rem; margin-top:-1rem; pointer-events:none;}
.field_arrow::before {content:""; position:absolute; left:0; top:0; width:2rem; height:2rem; background:url(../images/icon/ico_select_arrow.svg) no-repeat 50%;}

/* =========================================================
   검색 필터 박스 + 목록 도구막대 + 페이지네이션 + 목록 하단
========================================================= */
/* 검색 필터 박스(표준) — 파란 톤(primary-subtler) + 라운드 12. 컨트롤은 .field_box 기본(48), 검색 버튼 78×48
   ※ FAQ·게시판·목록 검색 공통 기준(옛 기준 통일) */
.search_box {display:flex; flex-direction:column; gap:1.6rem; padding:4rem; border-radius:var(--radius-3xl); background:var(--color-primary-subtler);}
.search_row {display:flex; align-items:center; gap:1.6rem;}
.search_row .form_field {flex-shrink:0;}
.search_row .form_field.is_flex,
.search_row .search_keyword {flex:1 1 0; min-width:0;}
/* 검색 버튼 base(주소찾기 등 .addr_search_row 공용 56) — 검색 필터(.search_box) 안에서는 48로 축소 */
.search_btn {flex-shrink:0; display:inline-flex; align-items:center; justify-content:center; min-width:9rem; height:5.6rem; padding:0 2rem; border-radius:var(--radius-lg); font-size:var(--fs-19); line-height:var(--lh-base);}
.search_box .search_btn {min-width:7.8rem; height:4.8rem; padding:0 1.6rem; border-radius:var(--radius-md); font-size:var(--fs-lg);}
.field_w120 {width:120px;}
.field_w140 {width:140px;}
.field_w180 {width:180px;}
.field_w200 {width:200px;}
.field_w260 {width:260px;}
/* 분류 탭 아래 공통 검색 필터(패널 밖, 탭 공유) 상단 간격 */
.tab_panel_wrap > .search_box {margin-top:4rem;}
/* 탭 패널 안 검색 필터 — 아래 목록 도구막대와 간격 (U-QP-04-02 교육목록 탭) */
.tab_panel > .search_box {margin-bottom:4rem;}

/* 라벨형 검색 필터 — 라벨(좌) + 컨트롤(우), 2단 배치 (교육신청 모집공고 목록 U-QP-03-02) */
.filter_row {display:flex; gap:4rem;}
.filter_field {flex:1 1 0; min-width:0; display:flex; align-items:center; gap:.8rem;}
.filter_field.is_full {flex:1 1 100%;}
.filter_label {flex-shrink:0; width:13rem; font-size:var(--fs-lg); font-weight:700; line-height:var(--lh-base); color:var(--color-text-title);}
.filter_field > .field_box,
.filter_field > .field_daterange {flex:1 1 0; min-width:0;}
.field_daterange {display:flex; align-items:center; gap:.8rem;}
.field_daterange > .field_box {flex:1 1 0; min-width:0;}
.field_daterange_sep {flex-shrink:0; font-size:var(--fs-lg); color:var(--color-text-title);}
.search_actions {display:flex; justify-content:flex-end; gap:1.6rem;}

.list_tools {display:flex; align-items:center; gap:1.2rem; margin-bottom:1.6rem;}
.list_total {flex:1 1 auto; min-width:0; font-size:var(--fs-lg); line-height:var(--lh-base); color:var(--color-text-title);}
.list_total strong {margin-left:.8rem; font-weight:700;}
.list_tools .form_field {flex-shrink:0;}

.pagination {display:flex; align-items:center; justify-content:center; gap:.8rem;}
.page_btn,
.page_num {display:inline-flex; align-items:center; justify-content:center; width:3.6rem; height:3.6rem; border-radius:var(--radius-lg); font-size:var(--fs-base); line-height:1; color:var(--color-text-body); text-decoration:none;}
.page_btn:hover,
.page_num:not(.is_active):hover {background-color:var(--color-secondary-subtler);}
.page_btn:active,
.page_num:not(.is_active):active {background-color:var(--color-secondary-light);}
.page_num.is_active {background-color:var(--color-primary); color:var(--color-white);}
.page_btn.is_disabled {pointer-events:none;}
/* 페이지 이동 화살표 아이콘 — 상태별 색 반영 */
.page_btn {background-repeat:no-repeat; background-position:center; background-size:1.6rem 1.6rem;}
.page_first {background-image:url(../images/icon/ico_page_first.svg);}
.page_prev {background-image:url(../images/icon/ico_page_prev.svg);}
.page_next {background-image:url(../images/icon/ico_page_next.svg);}
.page_last {background-image:url(../images/icon/ico_page_last.svg);}
.page_first.is_disabled {background-image:url(../images/icon/ico_page_first_off.svg);}
.page_prev.is_disabled {background-image:url(../images/icon/ico_page_prev_off.svg);}
.page_next.is_disabled {background-image:url(../images/icon/ico_page_next_off.svg);}
.page_last.is_disabled {background-image:url(../images/icon/ico_page_last_off.svg);}
.page_ellipsis {display:inline-flex; align-items:center; justify-content:center; width:3.6rem; height:3.6rem; color:var(--color-text-caption);}

/* =========================================================
   FAQ 아코디언 (정보마당 — 자주 묻는 질문, U-QP-06-06)
   분류 탭(.tab) + 공통 검색 필터(.search_box) 아래 목록
========================================================= */
.faq_list {border-bottom:1px solid var(--color-gray-light);}
.faq_item {border-top:1px solid var(--color-gray-light);}
.faq_item:has(.faq_q.is_open) {border-top-color:var(--color-text-title);} /* 펼친 항목은 윗선을 진하게 (아코디언 공통) */
.faq_head {margin:0;}
.faq_q {display:flex; align-items:center; gap:2.8rem; width:100%; padding:2rem 2.4rem; border:0; background:transparent; text-align:left; cursor:pointer;}
.faq_q_text {flex:1 1 0; min-width:0; font-size:var(--fs-h4); font-weight:700; line-height:var(--lh-base); color:var(--color-secondary);}
.faq_q_mark {margin-right:.8rem; color:var(--color-primary);}
/* 2026-09-01 수정: 보더로 그리던 꺾쇠를 chevron SVG로 교체 — .checklist_toggle_arrow·셀렉트(.field_arrow)·약관 토글(.agree_more)과 같은 방식으로 통일 (아이콘 박스 24×24 / 화살표 폭 15.6 / 색 #33363D) */
.faq_q_arrow {flex-shrink:0; width:2.4rem; height:2.4rem; background:url(../images/icon/ico_select_arrow.svg) no-repeat 50% 50% / 1.56rem auto;}
.faq_q.is_open .faq_q_arrow {transform:rotate(180deg);}
.faq_a {display:flex; gap:1.6rem; margin:0 2.4rem 2rem; padding:2rem; border-radius:var(--radius-lg); background:var(--color-gray-subtler);}
.faq_a[hidden] {display:none;}
.faq_a_mark {flex-shrink:0; font-size:var(--fs-lg); font-weight:700; line-height:var(--lh-base); color:var(--color-text-title);}
.faq_a_text {flex:1 1 0; min-width:0; font-size:var(--fs-lg); line-height:var(--lh-base); color:var(--color-text-body);}
.faq_a_text p {margin:0;}
.faq_empty {padding:4rem 0; font-size:var(--fs-lg); line-height:var(--lh-base); color:var(--color-text-body); text-align:center;}

/* FAQ 추가 안내 박스 (찾는 내용 없을 때 1:1 문의 유도) */
.tab_panel_wrap + .faq_help {margin-top:4rem;}
.faq_help {display:flex; flex-direction:column; gap:.8rem; padding:1.6rem 2.4rem; border-radius:var(--radius-xl); background:var(--color-info-subtler);}
.faq_help_title {font-size:var(--fs-base); font-weight:600; line-height:var(--lh-base); color:var(--color-text-title);}
.faq_help_link {display:inline-flex; align-items:center; gap:.6rem; align-self:flex-start; font-size:var(--fs-base); line-height:var(--lh-base); color:var(--color-primary);}
.faq_help_link::after {content:""; width:.7rem; height:.7rem; border-top:1.5px solid var(--color-primary); border-right:1.5px solid var(--color-primary); transform:rotate(45deg);}

.board_foot {display:flex; align-items:center; gap:1.6rem; padding-top:4rem;}
.board_foot .pagination {flex:1 1 0;}
.board_foot .btn_register {flex-shrink:0; display:inline-flex; align-items:center; justify-content:center; min-width:9.8rem; height:6.4rem; padding:0 2.4rem; border-radius:var(--radius-lg); font-size:var(--fs-19); line-height:var(--lh-base);}

/* 세로형 정보 표 (라벨 th + 값 td · 키-값 표) */
.info_table {width:100%; border-collapse:collapse; table-layout:fixed;}
.info_table th,
.info_table td {padding:1.6rem; border-top:1px solid var(--color-text-title); border-bottom:1px solid var(--color-gray-light); font-size:var(--fs-lg); line-height:var(--lh-base); vertical-align:top;}
.info_table th {width:180px; background:var(--color-gray-subtler); font-weight:700; color:var(--color-text-title); text-align:left;}
.info_table td {color:var(--color-text-body); text-align:left; word-break:break-all;}
.info_table tr {height:16rem;}

/* 섹션 머리 우측 보조 텍스트 (접수 번호·답변일시 등) */
.section_meta {flex-shrink:0; font-size:var(--fs-lg); line-height:var(--lh-base); color:var(--color-text-body);}

/* =========================================================
   카드 / 폼 — textinput 컴포넌트
   - 크기: 기본 medium(48) / large(56) / small(40)
   - 상태: default / is_focus / is_complete / is_error / is_disabled / is_view
   - 메시지: 기본 caption / type_hint / type_info / type_success / type_error
========================================================= */
.card {padding:4rem; border:1px solid var(--color-gray-light); border-radius:var(--radius-3xl); background:var(--color-white);}
.form_group {display:flex; flex-direction:column; gap:1.6rem;}
.form_group:has(.field_box:not(.size_lg)) {gap:.8rem;} /* 필드가 기본 높이(size_lg 아님)일 때 라벨↔필드 간격 축소 */
.form_label {font-size:var(--fs-lg); font-weight:700; line-height:var(--lh-base); color:var(--color-text-title);}
.form_field {display:flex; flex-direction:column; gap:.8rem;}

/* 입력 박스 — 크기 */
.field_box {position:relative; display:flex; align-items:center; gap:.8rem; height:4.8rem; padding:0 1.6rem; border:1px solid var(--color-input-border); border-radius:var(--radius-md); background:var(--color-white);}
.field_box.size_lg {height:5.6rem; border-radius:var(--radius-lg);}
.field_box.size_sm {height:4rem;}
.field_input {flex:1 1 0; min-width:0; height:100%; font-size:var(--fs-lg); line-height:var(--lh-base); color:var(--color-text-title);}
.field_box.size_lg .field_input {font-size:var(--fs-19);}
.field_box.size_sm .field_input {font-size:var(--fs-base);}
.field_input::placeholder {color:var(--color-input-placeholder);}

/* 입력 박스 — 상태 (실제 :focus-within / 가이드 정적 is_*) */
.field_box:focus-within,
.field_box.is_focus {outline:2px solid var(--color-input-border-active); outline-offset:0;}
.field_box .field_input:focus-visible {outline:none;}
.field_box.is_complete {border-color:var(--color-input-border);}
.field_box.is_error {border-width:2px; border-color:var(--color-input-border-error);}
.field_box.is_disabled {border-color:var(--color-input-border-disabled); background:var(--color-input-surface-disabled);}
.field_box.is_disabled .field_input {color:var(--color-input-text-disabled);}
.field_box.is_view {border-color:var(--color-input-border-disabled); background:var(--color-input-surface-disabled);} /* 가이드 원문 준수: 배경·border 회색 (텍스트만 is_disabled와 구분) */
.field_box.is_view .field_input {color:var(--color-text-title);} /* view = 진한 텍스트 — 비활성(is_disabled, 흐림)과 텍스트 색으로 구분 */

/* 입력 박스 — 우측 아이콘 (보기 토글 / 삭제) */
.field_toggle {flex-shrink:0; width:2rem; height:2rem; background:url(../images/icon/ico_visibility_off.svg) no-repeat center / 2rem;}
.field_toggle.is_visible {background-image:url(../images/icon/ico_visibility.svg);}
.field_clear {flex-shrink:0; width:2rem; height:2rem; background:url(../images/icon/ico_input_delete.png) no-repeat center / contain;}
.field_input:placeholder-shown ~ .field_clear,
.field_input[readonly] ~ .field_clear,
.field_input:disabled ~ .field_clear {display:none;}
.field_box.size_lg .field_toggle {width:2.4rem; height:2.4rem; background-size:2.4rem;}
.field_box.size_lg .field_clear {width:2.4rem; height:2.4rem;}
.field_box.size_sm .field_toggle {width:1.6rem; height:1.6rem; background-size:1.6rem;}
.field_box.size_sm .field_clear {width:1.6rem; height:1.6rem;}
/* 날짜 입력 — 우측 달력 아이콘 (클릭 시 데이트피커 열림) */
.field_calendar {flex-shrink:0; width:2.4rem; height:2.4rem; background:url(../images/icon/ico_calendar.svg) no-repeat center / contain; cursor:pointer;}
.field_box.is_disabled .field_calendar,
.field_calendar:disabled {cursor:default;} /* 달력이 열리지 않는 상태 — 클릭 가능 신호 제거 */

/* =========================================================
   데이트피커 (cert-admin 자체 구현 달력 이식 — .field_box 날짜 필드에 적용)
   body에 .datepicker 1개 생성·재배치. 입력 포맷 YYYY.MM.DD
========================================================= */
.datepicker {position:absolute; z-index:1100; display:none; width:28rem; padding:1.6rem 0 0; border:1px solid var(--color-border); border-radius:var(--radius-xl); background:var(--color-white);}
.dp_head {display:flex; align-items:center; gap:1.6rem; padding:.8rem 2.4rem;}
.dp_title {flex:1; font-size:var(--fs-lg); font-weight:700; line-height:var(--lh-base); color:var(--color-text-strong); text-align:center;}
.dp_nav {flex-shrink:0; width:2.8rem; height:2.8rem; margin:-.4rem; border-radius:50%; background:no-repeat 50% / 2rem;} /* 누르는 영역은 아이콘보다 넓게, 음수 여백으로 배치는 아이콘 크기 기준 유지 */
.dp_prev {background-image:url(../images/icon/ico_cal_arr_left.svg);}
.dp_next {background-image:url(../images/icon/ico_cal_arr_right.svg);}
.dp_grid {display:grid; grid-template-columns:repeat(7, minmax(0, 3.4rem)); justify-content:space-between; gap:.2rem 0; padding:1.6rem;} /* MO에서 달력 폭이 입력칸 폭으로 줄면 날짜 칸도 따라 줄어 넘치지 않게 */
.dp_dow {display:flex; align-items:center; justify-content:center; height:2.4rem; margin-bottom:.6rem; font-size:var(--fs-base); line-height:var(--lh-base); color:var(--color-text-strong);} /* 요일 줄과 날짜 사이는 날짜 행 간격보다 넓게 */
.dp_day {display:flex; align-items:center; justify-content:center; height:3.4rem; border-radius:50%; font-size:var(--fs-sm); line-height:var(--lh-base); color:var(--color-text-strong); opacity:.8;}
.dp_day:hover {background:var(--color-secondary-light); opacity:1;} /* 주말 날짜는 글자색 유지 */
.dp_day:focus-visible {opacity:1;} /* 키보드 초점 날짜는 선명하게 — 초점 테두리가 흐려지지 않도록 */
.dp_sun {color:var(--color-point-dark);}
.dp_sat {color:var(--color-primary);}
.dp_day.dp_out {color:var(--color-text-muted); opacity:1;} /* 앞뒤 달 날짜 — 보이기만 하고 선택 불가 */
.dp_day.dp_out:hover {background:none;}
.dp_day.is_today {box-shadow:inset 0 0 0 1px var(--color-gray); color:var(--color-text-strong); opacity:1;} /* 요일과 관계없이 같은 글자색 */
.dp_day.is_selected {background:var(--color-secondary); box-shadow:none; color:var(--color-white); opacity:1;}
.dp_day.is_selected:focus-visible {outline-color:var(--color-text-title);} /* 선택된 날짜는 배경이 기본 초점색과 같아 초점 위치가 묻힘 — 어두운 색으로 구분 */
.dp_foot {display:flex; align-items:center; justify-content:space-between; gap:.8rem; padding:1.2rem 1.6rem; border-top:1px solid var(--color-gray-light);}
.dp_help {font-size:var(--fs-sm); line-height:var(--lh-base); color:var(--color-text-body);}
.dp_close {flex-shrink:0; min-width:6rem; height:3.2rem; padding:0 1rem; border:1px solid var(--color-gray-dark); border-radius:var(--radius-sm); background:var(--color-white); font-size:var(--fs-base); color:var(--color-text-title);}
.dp_close:hover {background:var(--color-bg);}

/* 입력 메시지 — 타입 */
.field_msg {display:flex; align-items:flex-start; gap:.4rem; font-size:var(--fs-base); line-height:var(--lh-base); color:var(--color-text-caption);}
.form_field > .field_msg {margin-top:.8rem;} /* form_field gap(.8) + .8 = field_box↔field_msg 1.6 */
.form_field > .field_msg + .field_msg {margin-top:0;} /* 안내+오류처럼 메시지가 이어질 땐 한 묶음으로 붙인다 */
.form_field:has(> .field_box:not(.size_lg)) > .field_msg {margin-top:0;} /* 필드가 기본 높이(size_lg 아님)일 때는 form_field gap만으로 간격 유지 */
.field_msg[hidden] {display:none;}
.field_msg.type_hint {color:var(--color-msg-hint);}
.field_msg.type_info {color:var(--color-msg-info);}
.field_msg.type_success {color:var(--color-msg-success);}
.field_msg.type_error {color:var(--color-msg-error);}
.field_msg_mark {flex-shrink:0;}
.field_msg_ico {flex-shrink:0; width:1.6rem; height:1.6rem; margin-top:.3rem; background:no-repeat center / contain;}
.field_msg.type_info .field_msg_ico {background-image:url(../images/icon/ico_system_info.svg);}
.field_msg.type_success .field_msg_ico {background-image:url(../images/icon/ico_system_success.svg);}
.field_msg.type_error .field_msg_ico {background-image:url(../images/icon/ico_system_error.svg);}

/* =========================================================
   내정보 상세 — 정보 표시 폼 (읽기 전용 값 + 변경 액션)
========================================================= */
.info_notice {display:flex; align-items:flex-start; gap:.4rem; font-size:var(--fs-lg); line-height:var(--lh-base); color:var(--color-text-body);}
.notice_group {display:flex; flex-direction:column; gap:1.6rem;} /* 안내문구+약관박스 묶음 — 간격 16 (U-QP-02-10) */
.info_notice_mark {flex-shrink:0; color:var(--color-text-caption);}
.info_list {display:flex; flex-direction:column; gap:4rem;}
.info_row {display:flex; align-items:flex-start; gap:6.4rem;}
.info_col {display:flex; flex-direction:column; flex:1 1 0; min-width:0; gap:1.6rem;}
.info_col.is_half {flex:0 1 calc((100% - 6.4rem) / 2);} /* 단독 칼럼을 짝일 때와 동일한 절반 폭으로 고정 */
.info_label {font-size:var(--fs-lg); font-weight:700; line-height:var(--lh-base); color:var(--color-text-title);}
.info_field {display:flex; flex-direction:column; gap:.8rem;}
.info_control {display:flex; gap:1.6rem;} /* 입력칸 옆 액션 버튼 간격 — field_inline과 동일 기준 */
.info_control .btn_act {height:5.6rem;} /* 내정보 필드 버튼 — 옆 info_value(56) 높이 정렬 */
.info_value {flex-shrink:0; width:100%; height:5.6rem; padding:0 1.6rem; border:1px solid var(--color-input-border); border-radius:var(--radius-md); background:var(--color-white); font-size:var(--fs-19); line-height:var(--lh-base); color:var(--color-text-body);}
.info_value[readonly],
.info_value:disabled {border-color:var(--color-input-border-disabled); background:var(--color-input-surface-disabled);}
.info_control .info_value {flex:1 1 0; width:auto; min-width:0;}
.info_control .info_value.is_fixed {flex:0 0 120px;}
.info_addr .info_addr_road {order:1;}
.info_addr .info_addr_detail {order:2;}
.info_addr .info_addr_btn {order:3;}
.info_msg {font-size:var(--fs-xs); line-height:var(--lh-base); color:var(--color-text-caption);}

/* 섹션 헤더 — 제목 옆 버튼 (Tile) */
.section-header.type_tile {display:flex; align-items:center; justify-content:space-between; gap:2.4rem; margin-bottom:2.4rem;}
.section-header.type_tile .section_title,
.section-header.type_tile .section_receipt {flex:1 1 auto; min-width:0; margin-bottom:0;}
.section-header.type_tile .btn_act {flex-shrink:0;}

/* =========================================================
   버튼 — 인라인 액션(변경·출력·보기 등) + 색상 타입
========================================================= */
.btn_act {flex-shrink:0; display:inline-flex; align-items:center; justify-content:center; min-width:7.8rem; height:4.8rem; padding:0 1.6rem; border-radius:var(--radius-md); font-size:var(--fs-lg); line-height:var(--lh-base); transition:background .2s, border-color .2s;}
.btn_act.size_sm {min-width:6.4rem; height:4rem; padding:0 1.2rem; font-size:var(--fs-base);}
.btn_secondary {border:1px solid var(--color-primary); background:var(--color-primary-light); color:var(--color-primary-dark);}
.btn_secondary:hover,
.btn_secondary:focus {background:var(--color-primary-pale);}
.btn_secondary:active {background:var(--color-primary-deeppale);}
.btn_tertiary {border:1px solid var(--color-gray-dark); background:var(--color-white); color:var(--color-text-title);}
.btn_tertiary:hover,
.btn_tertiary:focus {background:var(--color-bg);}
.btn_tertiary:active {background:var(--color-bg-subtle);}
/* 흰 배경 + 파란 테두리 (btn_secondary의 흰 배경 변형) */
.btn_outline {border:1px solid var(--color-primary); background:var(--color-white); color:var(--color-primary-dark);}
.btn_outline:hover,
.btn_outline:focus {background:var(--color-primary-light);}
.btn_outline:active {background:var(--color-primary-pale);}
/* 버튼 안 화살표 표식 — 글자색을 따라감 */
.btn_act_ico {flex-shrink:0; width:.7rem; height:.7rem; margin-left:.4rem; border-top:1.5px solid currentColor; border-right:1.5px solid currentColor; transform:rotate(45deg);}
.btn_act:disabled {border-color:transparent; background:var(--color-disabled); color:var(--color-text-title); cursor:not-allowed;}

/* =========================================================
   하단 버튼 영역
========================================================= */
.btn_area {display:flex; justify-content:center; gap:1.6rem; padding-top:4rem;}
.btn_area button {display:inline-flex; align-items:center; justify-content:center; min-width:9.8rem; height:6.4rem; padding:0 2.4rem; border-radius:var(--radius-lg); font-size:var(--fs-19); line-height:var(--lh-base); transition:background .2s, border-color .2s;}
.btn_fill {background:var(--color-primary); color:var(--color-white);}
.btn_fill:hover,
.btn_fill:focus {background:var(--color-primary-dark);}
.btn_fill:active {background:var(--color-primary-deep);}
/* 비활성 상태 */
.btn_fill:disabled {background:var(--color-disabled); color:var(--color-element-gray); cursor:not-allowed;}
.btn_fill:disabled:hover,
.btn_fill:disabled:focus,
.btn_fill:disabled:active {background:var(--color-disabled);}
.btn_line {border:1px solid var(--color-gray-dark); background:var(--color-white); color:var(--color-text-title);}
.btn_line:hover,
.btn_line:focus {background:var(--color-bg);}
.btn_line:active {background:var(--color-bg-subtle);}
.btn_area.type_between {justify-content:space-between;}
.btn_area.type_end {justify-content:flex-end;}
/* btn_area stack 변형 — PC 가운데(기본 유지) / MO 세로 100% (완료 화면 등 버튼 2개) */
.btn_area + .infobox.type_note {margin-top:6.4rem;}
.btn_group {display:flex; gap:.8rem;}
.btn_area .btn_group {gap:1.6rem;} /* 하단 버튼 영역 안 버튼 간격 — .btn_area 기본 gap과 통일 (U-QP-02-22) */

/* =========================================================
   자격증 신청 체크리스트 (checklist — 질문 + 라디오 네/아니오)
========================================================= */
.checklist_wrap {display:flex; flex-direction:column; gap:2.4rem;}
/* 전체 확인 체크 — 체크 표식과 굵은 문구를 한 줄에 */
.checklist_all .form_check label {align-items:center; gap:1.6rem;}
.checklist_all .opt_mark {margin-top:0;}
.checklist_all .opt_tit {font-weight:700;}
/* 확인 항목 묶음 — 제목을 눌러 문항을 접었다 편다 */
.checklist {display:flex; flex-direction:column; gap:2.4rem;}
.checklist_group {padding:0 2.4rem; border-top:1px solid var(--color-gray-light); border-bottom:1px solid var(--color-gray-light);}
.checklist_group:has(.checklist_toggle.is_open) {border-top-color:var(--color-text-title);} /* 펼친 묶음은 윗선을 진하게 (아코디언 공통) */
.checklist_group_head {margin:0;}
.checklist_toggle {display:flex; align-items:center; gap:2.8rem; width:100%; padding:2.4rem 0 2rem; border:0; background:transparent; text-align:left; cursor:pointer;}
.checklist_toggle_text {flex:1 1 0; min-width:0; font-size:var(--fs-h4); font-weight:700; line-height:var(--lh-base); color:var(--color-secondary);}
/* 2026-09-01 수정: 보더로 그리던 꺾쇠를 chevron SVG로 교체 — 셀렉트(.field_arrow)·약관 토글(.agree_more)과 같은 방식으로 통일.
   Figma 1147-1395 기준 아이콘 박스 24×24 / 화살표 폭 15.6(높이는 원본 비율 auto) / 색 #33363D(= ico_select_arrow.svg 내부 fill) */
.checklist_toggle_arrow {flex-shrink:0; width:2.4rem; height:2.4rem; background:url(../images/icon/ico_select_arrow.svg) no-repeat 50% 50% / 1.56rem auto;}
.checklist_toggle.is_open .checklist_toggle_arrow {transform:rotate(180deg);}
.checklist_body {display:flex; flex-direction:column; gap:2.4rem; padding-bottom:2.4rem;}
.checklist_body[hidden] {display:none;}
.checklist_item {display:flex; flex-direction:column; gap:2.4rem; padding:2.4rem; border-radius:var(--radius-xl); background:var(--color-gray-subtle);}
/* '아니오' 선택 상태 — 빨강 2px 테두리 + 옅은 분홍 배경 (스크립트로 .is_disagree 토글) */
.checklist_item.is_disagree {border:2px solid var(--color-input-border-error); background:var(--color-error-subtle);}
.checklist_row {display:flex; align-items:center; gap:4rem;}
.checklist_question {flex:1 1 0; min-width:0; font-size:var(--fs-lg); line-height:var(--lh-base); color:var(--color-text-title);}
.checklist_answer {flex-shrink:0; display:flex; align-items:center; gap:2.4rem;}
.checklist_answer .form_radio {width:auto;}
/* 문항에 딸린 목록 — 서류 목록은 PC 2열, 참조 안내는 파란 글씨 */
.checklist_item .text_list.type_2col {display:block; columns:2; column-gap:4rem;}
.checklist_item .text_list.type_2col > li {margin-bottom:1.2rem; break-inside:avoid;}
.checklist_item .text_list.type_2col > li:last-child {margin-bottom:0;}
.checklist_item .text_list.type_star > li {font-size:var(--fs-lg);} /* 문항 안내는 본문과 같은 크기 */
.checklist_item .text_list.type_star > li::before {top:-1px; color:var(--color-primary);} /* 커진 글자에 맞춰 별표를 첫 줄 가운데로, 색은 문구와 동일 */
.checklist_item .text_list.type_link > li {color:var(--color-primary);}

/* 체크박스 · 라디오 (가이드 guide_form.html 동기화 — 표식 + 라벨/설명. 공통 베이스 공유, 표식만 다름) */
.form_check,
.form_radio {display:inline-block; width:32rem;}
.form_check > input,
.form_radio > input {position:absolute; overflow:hidden; clip:rect(0,0,0,0); width:1px; height:1px; margin:-1px; padding:0; border:0;}
.form_check label,
.form_radio label {display:flex; align-items:flex-start; gap:.8rem; cursor:pointer;}
.form_check .opt_mark,
.form_radio .opt_mark {position:relative; flex-shrink:0; box-sizing:border-box; width:2.4rem; height:2.4rem; margin-top:.2rem; border:1px solid var(--color-input-border); background:var(--color-white);}
.form_check .opt_mark {border-radius:var(--radius-sm);}
.form_radio .opt_mark {border-radius:50%;}
.form_check .opt_text,
.form_radio .opt_text {display:flex; flex-direction:column; gap:.4rem;}
.form_check .opt_tit,
.form_radio .opt_tit {font-size:var(--fs-lg); line-height:var(--lh-base); color:var(--color-text-strong);}
.form_check .opt_desc,
.form_radio .opt_desc {font-size:var(--fs-lg); line-height:var(--lh-base); color:var(--color-text-body);}

/* 체크박스 — 선택(체크) / 부분선택(indeterminate, JS로 input.indeterminate 설정) */
.form_check > input:checked + label .opt_mark,
.form_check > input:indeterminate + label .opt_mark {border-color:var(--color-primary); background:var(--color-primary);}
.form_check > input:checked + label .opt_mark::after {content:""; position:absolute; left:.8rem; top:.3rem; width:.6rem; height:1.2rem; border:solid var(--color-white); border-width:0 2px 2px 0; transform:rotate(45deg);}
.form_check > input:indeterminate + label .opt_mark::after {content:""; position:absolute; left:50%; top:50%; width:1.2rem; height:0; border-top:2px solid var(--color-white); transform:translate(-50%,-50%);}

/* 라디오 — 선택(흰 배경 + 파랑 테두리 + 가운데 점) */
.form_radio > input:checked + label .opt_mark {border:1.6px solid var(--color-primary);}
.form_radio > input:checked + label .opt_mark::after {content:""; position:absolute; left:50%; top:50%; width:1.2rem; height:1.2rem; border-radius:50%; background:var(--color-primary); transform:translate(-50%,-50%);}

/* 키보드 포커스 링 (마우스 클릭에는 표시 안 함) */
.form_check > input:focus-visible + label .opt_mark,
.form_radio > input:focus-visible + label .opt_mark {outline:2px solid var(--color-input-border-active); outline-offset:2px;}

/* 비활성 (체크박스 표식 테두리는 border-disabled, 라디오는 gray-dark) */
.form_check > input:disabled + label,
.form_radio > input:disabled + label {cursor:default;}
.form_check > input:disabled + label .opt_tit,
.form_check > input:disabled + label .opt_desc,
.form_radio > input:disabled + label .opt_tit,
.form_radio > input:disabled + label .opt_desc {color:var(--color-gray-charcoal);}
.form_check > input:disabled + label .opt_mark,
.form_check > input:disabled:checked + label .opt_mark,
.form_check > input:disabled:indeterminate + label .opt_mark {border-color:var(--color-input-border-disabled); background:var(--color-gray-light);}
.form_check > input:disabled:checked + label .opt_mark::after,
.form_check > input:disabled:indeterminate + label .opt_mark::after {border-color:var(--color-gray-charcoal);}
.form_radio > input:disabled + label .opt_mark {border-color:var(--color-gray-charcoal); background:var(--color-gray-light);}
.form_radio > input:disabled:checked + label .opt_mark {border:1px solid var(--color-gray-charcoal);}
.form_radio > input:disabled:checked + label .opt_mark::after {background:var(--color-gray-charcoal);}

/* =========================================================
   레이어 팝업 / 다이얼로그
   - guide_popup.html 패턴 + 비밀번호 변경 폼 팝업
   - 딤(.popup_layer) 위에 카드(.popup) 가운데, 제목+닫기 한 줄 헤더
   - 본문은 form_group/form_label/form_field + field_box(textinput) 재사용
========================================================= */
.popup_layer {display:none; position:fixed; inset:0; z-index:1000; align-items:center; justify-content:center; padding:2rem; background:var(--color-dim);}
.popup_layer.is_open {display:flex;}
.popup {position:relative; display:flex; flex-direction:column; width:760px; max-width:100%; max-height:80vh; padding:4rem; border-radius:var(--radius-4xl); background:var(--color-white);}
.popup.size_sm {width:400px;}
.popup[tabindex]:focus {outline:none;} /* 알림형 팝업 열림 시 컨테이너로 가는 프로그램 초점 — 박스 외곽선 숨김(접근성 영향 없음) */
.popup_head {display:flex; align-items:center; gap:1.6rem; margin-bottom:2.4rem;}
.popup_title {flex:1 1 auto; min-width:0; font-size:2.4rem; font-weight:700; line-height:var(--lh-base); color:var(--color-text-title);}
.popup_close {flex-shrink:0; width:3.2rem; height:3.2rem; background:url(../images/icon/ico_close.svg) no-repeat center / 2.2rem 2.2rem;}
.popup_body {display:flex; flex-direction:column; gap:4rem; overflow-y:auto; margin:-.4rem; padding:.4rem;}
.popup_body p {font-size:var(--fs-lg); line-height:var(--lh-base); color:var(--color-text-body);}
.popup_body .field_msg {font-size:var(--fs-base);} /* 팝업 본문 p 글자 크기에 덮이지 않도록 field_msg 크기 복원 */
.popup_foot {display:flex; justify-content:center; gap:.8rem; padding-top:2.4rem;}
.popup_foot.type_end {justify-content:flex-end;} /* PC 버튼 우측 정렬 (MO는 flex:1로 균등) */
.popup_foot.type_compact {justify-content:flex-end;} /* PC 버튼 우측 정렬 (U-QP-02-22) — MO 전용 크기 축소는 아래 반응형 규칙 */
.popup_foot button {display:inline-flex; align-items:center; justify-content:center; min-width:9rem; height:5.6rem; padding:0 2rem; border-radius:var(--radius-lg); font-size:var(--fs-19); line-height:var(--lh-base); transition:background .2s, border-color .2s;}

/* 자동 로그아웃 안내 팝업 (auto_logout_01 · auto_logout_02) */
.popup.type_logout {width:520px;}
.popup.type_logout .popup_body {gap:1.6rem;}
.popup.type_logout .popup_foot {justify-content:flex-end; padding-top:4rem;}
.popup.type_logout .popup_foot button {min-width:7.8rem; height:4.8rem; padding:0 1.6rem; border-radius:var(--radius-md); font-size:var(--fs-lg);}
.logout_timer {display:flex; flex-direction:column; gap:.8rem;}
.logout_timer_label {font-size:var(--fs-base); font-weight:700; line-height:var(--lh-base); color:var(--color-text-title);}
.logout_timer_count {font-size:var(--fs-title); font-weight:700; line-height:var(--lh-base); color:var(--color-text-title);}
.logout_timer_num {color:var(--color-primary);}
.logout_notice {display:flex; flex-direction:column; gap:.8rem;}
.logout_notice li {position:relative; padding-left:1.6rem; font-size:var(--fs-lg); line-height:var(--lh-base); color:var(--color-text-body);}
.logout_notice li::before {content:""; position:absolute; top:1rem; left:.2rem; width:.6rem; height:.6rem; border-radius:50%; background:var(--color-text-body);}

/* 메인 공지사항 팝업 (main_popup) — 연파랑 제목 띠 + 가운데 정렬 본문 + 하단 오늘 하루 보지 않기·닫기 우측 정렬 */
.popup.type_notice {width:730px; padding:0; border-radius:0;}
.popup.type_notice .popup_head {margin-bottom:0; padding:4.8rem 4.8rem 2.8rem; background:var(--color-primary-light);}
.popup.type_notice .popup_title {font-size:var(--fs-h2);}
.popup.type_notice .popup_body {margin:0; padding:4rem 4.8rem; text-align:center;}
.popup.type_notice .popup_foot {justify-content:flex-end; align-items:center; gap:1.6rem; padding:0 4.8rem 4rem;}
.popup.type_notice .popup_foot button {min-width:7.8rem; height:4.8rem; padding:0 1.6rem; border-radius:var(--radius-md); font-size:var(--fs-lg);}
.popup.type_notice .form_check {width:auto;} /* 기본 고정 폭(32rem) 해제 — 닫기 버튼 옆에 붙도록 */
.popup.type_notice .opt_tit {font-size:var(--fs-19);}
.notice_pop_body {display:flex; flex-direction:column; gap:2rem;}
.notice_pop_body p {font-size:var(--fs-19);}

/* 주소 검색 팝업 (U-QP-01-04) — 검색 입력(input + 검색 버튼) + 주소검색 Tip */
.popup.type_address .popup_body {gap:2.4rem;}
.addr_search {display:flex; flex-direction:column; gap:1.6rem;}
.addr_search .addr_search_desc {font-size:var(--fs-lg); line-height:var(--lh-base); color:var(--color-text-title);} /* .popup_body p(명시도 0,1,1)에 덮이지 않도록 부모 결합 0,2,0 */
.tip_box {display:flex; flex-direction:column; gap:.8rem; padding:2.4rem; border-radius:var(--radius-xl); background:var(--color-secondary-subtler);}
.tip_title {font-size:var(--fs-19); font-weight:700; line-height:var(--lh-base); color:var(--color-text-title);}
.tip_list {display:flex; flex-direction:column; gap:.8rem; margin:0; padding:0; list-style:none;}
.tip_list li {position:relative; padding-left:1.6rem; font-size:var(--fs-lg); line-height:var(--lh-base); color:var(--color-text-body);}
.tip_list li::before {content:""; position:absolute; top:1rem; left:.2rem; width:.6rem; height:.6rem; border-radius:50%; background:var(--color-text-body);}
.tip_ex {color:var(--color-primary);}

/* 자격증 출력 팝업 (U-QP-02-03) — 자격증 카드 모달 */
.popup.type_cert {gap:2.4rem; overflow-y:auto;}
.cert_top {display:flex; align-items:flex-start; gap:1.6rem;}
.cert_no {flex:1 1 0; min-width:0; font-size:var(--fs-lg); line-height:var(--lh-base); color:var(--color-text-caption);}
.cert_body {display:flex; flex-direction:column; align-items:center; gap:2.8rem;}
.cert_title_area {display:flex; flex-direction:column; gap:.8rem; width:100%; text-align:center;}
.cert_title {font-size:var(--fs-h2); font-weight:700; line-height:var(--lh-base); color:var(--color-text-strong);}
.cert_org {font-size:var(--fs-base); line-height:var(--lh-base); color:var(--color-text-body);}
.cert_person {display:flex; flex-direction:column; align-items:center; gap:1.6rem; width:100%;}
.cert_photo {width:16.3rem; height:20rem; border:1px solid var(--color-gray-light); object-fit:cover;}
.cert_name {font-size:var(--fs-title); font-weight:700; line-height:var(--lh-base); color:var(--color-text-title); text-align:center;}
.cert_birth {font-size:var(--fs-lg); font-weight:600; line-height:var(--lh-base); color:var(--color-text-body); text-align:center;}
.cert_desc {font-size:var(--fs-lg); line-height:var(--lh-base); color:var(--color-text-body); text-align:center;}
.cert_sign {display:flex; flex-direction:column; gap:1.2rem; width:100%;}
.cert_date {font-size:var(--fs-base); font-weight:600; line-height:var(--lh-base); color:var(--color-text-body); text-align:center;}
.cert_minister {display:flex; align-items:center; justify-content:center; font-size:var(--fs-19); font-weight:700; line-height:var(--lh-base); color:var(--color-text-title);}
.cert_seal {width:3.4rem; height:3.5rem; margin-left:-1.6rem; mix-blend-mode:multiply;}
.cert_qr {display:flex; align-items:center; gap:2rem; padding:2.4rem; border-top:1px solid var(--color-primary-subtle); border-radius:var(--radius-lg); background:var(--color-gray-subtler);}
.cert_qr_img {flex-shrink:0; width:6rem; height:6rem;}
.cert_qr_text {font-size:var(--fs-lg); line-height:var(--lh-base); color:var(--color-text-title);}
.cert_qr_group {display:flex; flex-direction:column; gap:1.2rem;}
.cert_qr_guide {font-size:var(--fs-xs); line-height:var(--lh-base); color:var(--color-text-caption);}

/* 주소 검색 결과 팝업 (U-QP-01-05) — 검색행 + 결과 목록 + 페이지네이션 */
.addr_search_row {display:flex; align-items:flex-start; gap:1.6rem;}
.addr_search_row .field_box {flex:1 1 0; min-width:0;}
.addr_search_row .search_btn {flex-shrink:0;}
.addr_result {display:flex; flex-direction:column; gap:1.6rem;}
.addr_result .addr_result_count {font-size:var(--fs-19); font-weight:700; line-height:var(--lh-base); color:var(--color-text-title);} /* .popup_body p(0,1,1)에 덮이지 않도록 부모 결합 0,2,0 */
.addr_result_count strong {font-weight:700; color:var(--color-primary);}
.addr_list {display:flex; flex-direction:column;}
/* 우편번호(좌)와 주소 묶음(우) 배치는 항목이 맡는다 — 도로명·지번을 각각 선택하도록 줄마다 링크를 두기 때문 */
.addr_item {display:flex; align-items:flex-start; gap:2rem; padding:2rem 0; border-top:1px solid var(--color-gray-light);}
.addr_item:last-child {border-bottom:1px solid var(--color-gray-light);}
.addr_zip {flex-shrink:0; font-size:var(--fs-lg); line-height:var(--lh-base); color:var(--color-text-body); white-space:nowrap;}
.addr_detail {flex:1 1 0; min-width:0; display:flex; flex-direction:column; gap:1.6rem;}
.addr_link {display:flex; align-items:flex-start; gap:1.2rem; width:100%;}
.addr_link .badge {flex-shrink:0; min-width:5.5rem;}
.addr_text {flex:1 1 0; min-width:0; font-size:var(--fs-lg); line-height:var(--lh-base); color:var(--color-text-body);}
.addr_link:hover .addr_text,
.addr_link:focus-visible .addr_text {color:var(--color-primary); text-decoration:underline;}

/* =========================================================
   로그인 (아이디 로그인 — U-QP-01-08)
========================================================= */
.content-header.type_login,
.pwfind {max-width:80rem; margin:0 auto; width:100%;}
/* .login은 2단(폼+안내) 레이아웃이라 80rem 공유 묶음에서 분리해 120rem 적용(U-QP-01-08) */
.login {display:flex; flex-direction:column; gap:4rem; margin:0 auto; max-width:120rem; width:100%;}
/* 헤더 바로 뒤에 .login(120rem)이 오는 화면(U-QP-01-08)만 제목도 120rem으로. 공유 80rem 규칙·HTML 클래스 변경 없이 :has()로 스코프 */
.content-header.type_login:has(+ .login) {max-width:120rem;}
.login_head {display:flex; flex-direction:column; gap:.8rem;}
.login_title {font-size:var(--fs-h2); font-weight:700; line-height:var(--lh-base); color:var(--color-text-title);}
.login_desc {font-size:var(--fs-lg); line-height:var(--lh-base); color:var(--color-text-body);}
.login_body {display:flex; align-items:stretch; gap:4rem;}

/* 로그인 폼 카드 (좌측) */
.login_form {flex-shrink:0; display:flex; flex-direction:column; gap:4rem; width:47.2rem; padding:3.6rem; border:1px solid var(--color-gray-light); border-radius:var(--radius-3xl);}
.login_form .form_group {gap:1.6rem;}
.login_fields {display:flex; flex-direction:column; gap:2rem;}
.login_actions {display:flex; flex-direction:column; gap:2rem;}
.login_submit {display:flex; align-items:center; justify-content:center; width:100%; height:5.6rem; border-radius:var(--radius-lg); font-size:var(--fs-19); line-height:var(--lh-base); transition:background .2s;}
.login_links {display:flex; align-items:center; gap:2.4rem; font-size:var(--fs-base); line-height:var(--lh-base); color:var(--color-text-title);}
.login_links_join {flex:1 1 0; min-width:0; color:var(--color-text-title);}
.login_links_find {display:flex; align-items:center; gap:4rem;} /* divider(::before) 양쪽 각 20px = 디자인 */
.login_links_find a {color:var(--color-text-title);}
.login_links_find a + a {position:relative;}
.login_links_find a + a::before {content:""; position:absolute; left:-2rem; top:50%; width:1px; height:1.6rem; margin-top:-.8rem; background:var(--color-gray-light);}
.login_links a:hover,
.login_links a:focus {text-decoration:underline;}

/* 안내 + 다른 로그인 (우측) */
.login_side {display:flex; flex:1 1 0; min-width:0; flex-direction:column; gap:2rem;}
.login_notice {flex:1 1 auto; display:flex; flex-direction:column; gap:2rem; padding:3.6rem; border:1px solid var(--color-gray-light); border-radius:var(--radius-3xl);}
.login_notice_head {display:flex; align-items:center; gap:.8rem;}
.login_notice_ico {flex-shrink:0; width:2.4rem; height:2.4rem; background:url(../images/icon/ico_notice.svg) no-repeat center / contain;}
.login_notice_title {font-size:var(--fs-h4); font-weight:700; line-height:var(--lh-base); color:var(--color-text-title);}
.login_notice_list {display:flex; flex-direction:column; gap:1.2rem;}
.login_notice_list li {position:relative; padding-left:2.8rem; font-size:var(--fs-lg); line-height:var(--lh-base); color:var(--color-text-body);}
.login_notice_list li::before {content:""; position:absolute; top:1.2rem; left:.8rem; width:.6rem; height:0; border-top:1px solid var(--color-text-body);}

.login_other {display:flex; flex-direction:column; gap:.8rem; padding:1.6rem 2.4rem; border-radius:var(--radius-xl); background:var(--color-info-subtler);}
.login_other_title {font-size:var(--fs-base); font-weight:600; line-height:var(--lh-base); color:var(--color-text-title);}
.login_other_link {display:inline-flex; align-items:center; gap:.2rem; font-size:var(--fs-base); line-height:var(--lh-base); color:var(--color-primary);}
.login_other_link:hover,
.login_other_link:focus {text-decoration:underline;}
.login_other_arrow {flex-shrink:0; width:1.6rem; height:1.6rem; background:url(../images/icon/ico_arrow_right_primary.svg) no-repeat center / contain;}

/* =========================================================
   비밀번호 찾기 — 비밀번호 재설정 (U-QP-01-11)
========================================================= */
.pwfind_title {margin-bottom:2.4rem;}
.pwfind_title .for_mo {display:none;}
.pwfind_card {display:flex; flex-direction:column; gap:4rem; padding:3.6rem 20rem; border:1px solid var(--color-gray-light); border-radius:var(--radius-3xl);}
.form_req {color:var(--color-point-dark);}

/* =========================================================
   비밀번호 재설정 (비밀번호 변경 권고 — U-QP-01-12)
========================================================= */
.pwreset {max-width:80rem; margin:0 auto; width:100%; display:flex; flex-direction:column; gap:4rem;}
.pwreset_notice {display:flex; flex-direction:column; align-items:center; gap:2.4rem;}
.pwreset_notice_ico {width:6.4rem; height:6.4rem; background:url(../images/icon/ico_attention.svg) no-repeat center / contain;}
.pwreset_notice_text {display:flex; flex-direction:column; gap:.8rem; text-align:center;}
.pwreset_notice_title {font-size:2.4rem; font-weight:700; line-height:var(--lh-base); color:var(--color-text-title);}
.pwreset_notice_title em {font-style:normal; color:var(--color-primary);}
.pwreset_notice_desc {font-size:var(--fs-lg); line-height:var(--lh-base); color:var(--color-text-body);}
.pwreset_section {display:flex; flex-direction:column; gap:2.4rem;}
.pwreset_subtitle {font-size:2.4rem; font-weight:700; line-height:var(--lh-base); color:var(--color-text-title);}

/* =========================================================
   아이디 찾기 완료 (U-QP-01-10)
========================================================= */
.idfind {max-width:80rem; margin:0 auto; width:100%; display:flex; flex-direction:column; gap:2.4rem;}
.idfind_result {display:flex; flex-direction:column; align-items:center; gap:3.2rem; padding:3.6rem; border:1px solid var(--color-gray-light); border-radius:var(--radius-3xl); text-align:center;}
.idfind_result_text {font-size:var(--fs-19); font-weight:600; line-height:var(--lh-base); color:var(--color-text-title);}
.idfind_result_text strong {font-weight:600; color:var(--color-primary);}
.idfind_login {display:flex; align-items:center; justify-content:center; width:40rem; max-width:100%; height:5.6rem; border-radius:var(--radius-lg); font-size:var(--fs-19); line-height:var(--lh-base); transition:background .2s;}

/* =========================================================
   로그인방식 선택 (U-QP-01-07)
========================================================= */
.login_select {max-width:120rem; margin:0 auto; width:100%; display:flex; flex-direction:column; gap:4rem;}
.login_select_head {display:flex; flex-direction:column; gap:.8rem;}
.login_select_title {font-size:var(--fs-h2); font-weight:700; line-height:var(--lh-base); color:var(--color-text-title);}
.login_select_desc {font-size:var(--fs-lg); line-height:var(--lh-base); color:var(--color-text-body);}

/* 정부 통합로그인 영역 — 개발에서 삽입(영역만 확보) */
.login_sso {position:relative; width:100%;}

/* 방식 선택형 페이지 헤더 — h1을 본문(login_select)과 같은 120rem 폭으로 정렬 (본인인증 — U-QP-01-09) */
.content-header.type_select {max-width:120rem; margin:0 auto; width:100%;}

/* 이용기관 로그인 */
.login_select_org {display:flex; flex-direction:column; gap:2.4rem; padding-top:2.4rem; border-top:1px solid var(--color-gray);}
.login_select_org_title {font-size:var(--fs-h4); font-weight:700; line-height:var(--lh-base); color:var(--color-text-title);}
.login_methods {display:grid; grid-template-columns:repeat(3, 1fr); gap:2.4rem;}
.login_method {display:flex; flex-direction:column; gap:.8rem; min-height:16.4rem; padding:3.2rem; border-radius:var(--radius-xl); background:var(--color-gray-subtler);}
.login_method:hover,
.login_method:focus {background:var(--color-gray-subtle);}
.login_method_top {display:flex; align-items:center; gap:2.4rem;}
.login_method_ico {flex-shrink:0; width:4rem; height:4rem; background:url(../images/icon/ico_login_method.svg) no-repeat center / contain;}
.login_method_head {flex:1 1 0; min-width:0; display:flex; align-items:center; gap:.8rem;}
.login_method_title {flex:1 1 0; min-width:0; font-size:var(--fs-h4); font-weight:700; line-height:var(--lh-base); color:var(--color-text-title);}
.login_method_arrow {flex-shrink:0; width:3.2rem; height:3.2rem; background:url(../images/icon/ico_arrow_method.svg) no-repeat center / contain;}
.login_method_desc {font-size:var(--fs-lg); line-height:var(--lh-base); color:var(--color-text-body);}

/* 회원가입(비로그인 단계형) — 메뉴 없이 80rem 중앙 단일 컬럼. 내부는 위저드 컴포넌트(.step_nav·.agree) 재사용 */
.signup {max-width:80rem; margin:0 auto; width: 100%;}
/* 회원가입 완료(U-QP-01-06) 단계 표시 — 단계 고정폭(좌측 정렬), 상태 색은 컴포넌트 공통 규칙 */
.signup .step_indicator_item {flex:0 0 auto; width:12rem;}
/* 약관동의 단계 — 제목 아래 간격과 카드·박스 모서리를 이 화면 값으로 (U-QP-01-02) */
.signup.type_agree .section_title {margin-bottom:4rem;}
.signup.type_agree .infobox,
.signup.type_agree .agree_card {border-radius:var(--radius-xl);}
.signup.type_agree .agree_box {border-radius:1rem;}

/* =========================================================
   약관·정책 안내 페이지 (이메일수집거부 U-QP-08-01 · 저작권정책 U-QP-08-01-01 · 개인정보 처리방침 U-QP-08-02)
   메뉴 없이 80rem 중앙 단일 컬럼 — 본문은 .infobox.type_plain 재사용
========================================================= */
.policy {max-width:80rem; margin:0 auto; width:100%;}
/* 섹션 간격 축소 변형 — 이메일수집거부처럼 블록이 적은 화면에 붙인다 */
.policy.type_tight .section + .section {margin-top:4.8rem;}
/* 조문 블록 — 조문이 길게 이어지는 처리방침용. 섹션보다 좁은 간격을 쓴다 */
.policy_article + .policy_article {margin-top:4rem;}
/* 소제목 단위 하위 블록 */
.policy .subsection {margin-top:4rem;}
/* 상단 안내 아이콘 — 장식용(마크업에서 aria-hidden) */
.policy_ico {display:block; width:6.4rem; height:6.4rem; margin:0 auto 2.4rem; background:url(../images/icon/ico_mail_reject.svg) no-repeat center / contain;}
/* 안내 박스 아래 이어지는 조문 설명 */
.policy_desc {margin-top:2.4rem; font-size:var(--fs-lg); line-height:var(--lh-base); color:var(--color-text-body);}
/* 안내 박스 바로 아래 붙는 참고 메시지 */
.policy .infobox + .field_msg {margin-top:1.6rem;}
/* 공공누리 유형 마크 이미지 (U-QP-08-01-01) */
.kogl_mark {display:block; width:auto; height:3.9rem; margin:0 auto;}
/* 조문 안 소제목 — 섹션 제목보다 한 단계 작은 소제목 (U-QP-08-02) */
.subsection_title.size_sm {margin-bottom:1.2rem; font-size:var(--fs-body1);}
/* 조문이 촘촘한 화면은 소제목 블록 간격도 좁게 */
.policy.type_tight .subsection {margin-top:2rem;}
/* 소제목 블록(표 포함) 다음에 조문이 이어질 때도 같은 간격을 준다 */
.policy .subsection + .text_list {margin-top:2rem;}
/* 조문 본문 — 긴 법령 문장이 어절 단위로 밀려 줄 끝이 크게 비지 않도록 글자 단위로 채운다 */
.policy .policy_desc,
.policy .text_list li {word-break:normal;}
/* 대시 목록 마커도 숫자 목록과 같은 선에서 시작하도록 왼쪽 끝에 맞춘다 */
.policy ul.text_list > li::before {left:0;}
/* 조문 안 하위 목록 — 상위 항목보다 한 단계 작은 글자 (본문 최소 크기는 지킨다) */
.policy .text_list.type_circle > li,
.policy .text_list .text_list li {font-size:var(--fs-base);}
/* 하위 목록 들여쓰기 — 마커 자리만 남기고 본문 폭을 넓게 쓴다 */
.policy .text_list .text_list {padding-left:0;}
.policy .text_list .text_list li {padding-left:2rem;}
/* 강조 색으로 노출하는 조문 블록 — 소제목·목록 글자와 목록 마커까지 파랑 (U-QP-08-02 쿠키 안내) */
.policy .subsection.type_point .text_list {gap:.8rem;}
.policy .subsection.type_point .subsection_title,
.policy .subsection.type_point .text_list > li {color:var(--color-primary);}
.policy .subsection.type_point .text_list > li::before {border-top-color:var(--color-primary); color:var(--color-primary);}
/* 처리방침 항목 인덱스 카드 — 안내사항 목록 (U-QP-08-02) */
.policy_index {display:flex; flex-wrap:wrap; gap:2rem; padding:2.4rem; border:1px solid var(--color-gray-light); border-radius:var(--radius-xl);}
.policy_index_item {display:flex; align-items:center; gap:1.2rem; width:calc((100% - 4rem) / 3); font-size:var(--fs-lg); line-height:var(--lh-base); color:var(--color-text-body);}
/* 항목 아이콘 — 장식용(마크업에서 aria-hidden), 시안 확정 전 임시 이미지 */
.policy_index_ico {flex-shrink:0; width:4rem; height:4rem;}
/* 항목별 아이콘 */
.policy_index_ico.type_general {background:url(../images/icon/ico_person_info.svg) no-repeat 50% / contain;}
.policy_index_ico.type_item {background:url(../images/icon/ico_person_info_item.svg) no-repeat 50% / contain;}
.policy_index_ico.type_rrn {background:url(../images/icon/ico_person_info_rrn.svg) no-repeat 50% / contain;}
.policy_index_ico.type_arn {background:url(../images/icon/ico_person_info_arn.svg) no-repeat 50% / contain;}
.policy_index_ico.type_sensitive {background:url(../images/icon/ico_person_info_sensitive.svg) no-repeat 50% / contain;}
.policy_index_ico.type_health {background:url(../images/icon/ico_person_info_health.svg) no-repeat 50% / contain;}
.policy_index_ico.type_purpose {background:url(../images/icon/ico_person_info_purpose.svg) no-repeat 50% / contain;}
.policy_index_ico.type_period {background:url(../images/icon/ico_person_info_period.svg) no-repeat 50% / contain;}
.policy_index_ico.type_destroy {background:url(../images/icon/ico_person_info_destroy.svg) no-repeat 50% / contain;}
.policy_index_ico.type_third {background:url(../images/icon/ico_person_info_third.svg) no-repeat 50% / contain;}
.policy_index_ico.type_trust {background:url(../images/icon/ico_person_info_trust.svg) no-repeat 50% / contain;}
.policy_index_ico.type_safety {background:url(../images/icon/ico_person_info_safety.svg) no-repeat 50% / contain;}
.policy_index_ico.type_auto {background:url(../images/icon/ico_person_info_auto.svg) no-repeat 50% / contain;}
.policy_index_ico.type_right {background:url(../images/icon/ico_person_info_right.svg) no-repeat 50% / contain;}
.policy_index_ico.type_agent {background:url(../images/icon/ico_person_info_agent.svg) no-repeat 50% / contain;}
.policy_index_ico.type_manager {background:url(../images/icon/ico_person_info_manager.svg) no-repeat 50% / contain;}
.policy_index_ico.type_view {background:url(../images/icon/ico_person_info_view.svg) no-repeat 50% / contain;}
.policy_index_ico.type_relief {background:url(../images/icon/ico_person_info_relief.svg) no-repeat 50% / contain;}
.policy_index_ico.type_report {background:url(../images/icon/ico_person_info_report.svg) no-repeat 50% / contain;}
.policy_index_ico.type_change {background:url(../images/icon/ico_person_info_change.svg) no-repeat 50% / contain;}
/* 조문 블록 간 간격 — 목록·표·버튼이 이어질 때 (U-QP-08-02) */
/* 조문 제목과 본문 사이 간격 통일 */
.policy .section_title {margin-bottom:2.4rem;}
.policy .section_title + .policy_desc {margin-top:0;}
.policy .policy_desc + .text_list,
.policy .text_list + .table_wrap,
.policy .table_wrap + .text_list,
.policy .table_wrap + .policy_desc {margin-top:1.2rem;}
.policy .policy_desc + .policy_index {margin-top:2.4rem;}
/* 본문 안 다운로드 링크 — 일반 텍스트와 구분되도록 밑줄 */
.link_download {text-decoration:underline;}
/* 조문 안 단독 버튼 줄 */
.policy_btn {margin-top:1.2rem;}
/* 기관 연락처 줄 — 전화번호 + 누리집 링크 */
.policy_contact {display:flex; flex-wrap:wrap; align-items:center; gap:.8rem; font-size:var(--fs-lg); line-height:var(--lh-base); color:var(--color-text-body);}
/* 새 창 링크 — 밑줄 + 새 창 아이콘 */
.link_blank {display:inline-flex; align-items:center; gap:.4rem; color:var(--color-primary); text-decoration:underline;}
.link_blank::after {content:""; flex-shrink:0; width:2rem; height:2rem; background:url(../images/icon/ico_link_blank.svg) no-repeat 50% / 1.5rem auto;}

/* =========================================================
   이용자 만족도 조사 (survey)
   메뉴 없이 중앙 단일 컬럼 — 평가 문항은 .checklist_item, 개인정보 동의는 .agree_card 재사용
========================================================= */
.survey {max-width:80rem; margin:0 auto; width:100%;}
/* 조사 안내문 문단 간격 */
.survey .infobox_body p + p {margin-top:1.2rem;}
/* 평가 문항 5단계 선택지 — 폭이 모자라면 줄바꿈 */
.survey .checklist_answer {flex-wrap:wrap; gap:1.2rem 2.4rem;}
/* 응답 감사 문구 */
.survey_thanks {margin-top:4rem; font-size:var(--fs-lg); line-height:var(--lh-base); color:var(--color-text-title); text-align:center;}

/* =========================================================
   자격증 신청 위저드 — 진행단계(step_nav) · 약관동의(agree) (U-QP-05-03)
========================================================= */
/* 진행 단계 — 번호 원형 + 연결선 (PC 라벨 노출 / MO 원형만) */
.step_nav {margin-bottom:4.8rem;}
.step_nav_list {display:flex; width:100%;}
.step_nav_item {flex:1 1 0; min-width:0; display:flex; flex-direction:column; gap:.8rem;}
.step_nav_item:last-child {flex:0 0 auto;}
.step_nav_head {display:flex; align-items:center; height:2rem;}
.step_nav_mark {flex-shrink:0; position:relative; z-index:1; display:inline-flex; align-items:center; justify-content:center; width:2.4rem; height:2.4rem; border-radius:50%; border:1.2px solid var(--color-gray-light); background:var(--color-gray-subtle); font-size:var(--fs-xs); font-weight:700; line-height:var(--lh-base); color:var(--color-text-caption);}
.step_nav_line {flex:1 1 0; min-width:0; height:.2rem; margin-left:-1px; background:var(--color-gray-light);}
.step_nav_label {padding-right:2.4rem; font-size:var(--fs-base); font-weight:700; line-height:var(--lh-base); color:var(--color-text-title);}
.step_nav_item.is_done .step_nav_mark {border-color:var(--color-element-gray); background:var(--color-element-gray); color:var(--color-white);}
/* 완료 단계의 연결선(활성 단계 이전 구간)은 진한 회색, 활성 단계 이후 구간은 기본 연한 회색 */
.step_nav_item.is_done .step_nav_line {background:var(--color-element-gray);}
.step_nav_item.is_current .step_nav_mark {border-color:var(--color-primary); background:var(--color-primary); color:var(--color-white);}
/* 자격증 신청(U-QP-05-03): 전체 800, 4단계를 5등분(각 20%)해 우측 여백 */
.apply_terms .step_nav {max-width:80rem;}
.apply_terms .step_nav_item,
.apply_terms .step_nav_item:last-child {flex:0 0 20%;}
/* 회원가입(U-QP-01-02): 3단계 좌측 정렬 — 각 단계 12rem 고정 슬롯, 마지막 단계는 후행 연결선 없음 */
.signup .step_nav_item,
.signup .step_nav_item:last-child {flex:0 0 12rem;}
.signup .step_nav_item:last-child .step_nav_line {display:none;}

/* 단계/제목 (예: 2단계 / 4단계 + 약관동의) */
.step_phase {margin-bottom:.8rem; font-size:var(--fs-lg); line-height:var(--lh-base); color:var(--color-text-body);}
.step_phase strong {font-weight:700; color:var(--color-primary-dark);}
/* 제목을 blind 처리한 완료 화면 — 숨긴 제목 자리만큼 step_phase 아래 간격 보정(24) */
.section-header:has(> .section_title.blind) .step_phase {margin-bottom:2.4rem;}
.apply_terms .content_title {margin-bottom:5.6rem;}
.apply_terms .section_title {margin-bottom:4rem;}
/* 진행 단계 아래 안내 박스 → 단계 제목 간격 (U-QP-05-07) */
.apply_terms .infobox + .section {margin-top:4rem;}
/* 카드 안 단일 폼 — 라벨↔입력, 선택지↔직접입력 간격 확대 (U-QP-05-08) */
.apply_terms .card > .form_group {gap:2.4rem;}
.apply_terms .card > .form_group > .form_field {gap:1.6rem;}
/* 발급 신청서 작성 (U-QP-05-05) — 간격은 신청서 디자인 기준이라 공통 컴포넌트 값과 다르다 */
.apply_terms .apply_form > .form_group {gap:1.6rem;}
.apply_terms .apply_form .check_group + .check_group {margin-top:2.4rem;}
.apply_terms .apply_form .check_grid {row-gap:2rem;}
.apply_terms .apply_form .check_grid + .field_msg {margin-top:1.6rem;}
.apply_terms .apply_form .file_attach_title {margin-bottom:1.6rem;}
.apply_terms .apply_form .file_attach + .field_msg {margin-top:.8rem;}
.apply_terms .apply_form .subfield_row {margin-top:2.4rem;}
/* 직접입력 항목 — 앞 체크박스와 같은 줄에서 남는 폭 차지 (기본 변형은 단독 줄) */
.apply_terms .apply_form .check_etc {flex:1 1 32rem;}
/* 입력칸이 낀 줄은 높이가 커지므로 같은 줄 체크박스도 세로 가운데 (세로 나열 변형은 가로 정렬이 되므로 제외) */
.apply_terms .apply_form .check_grid:not(.type_stack) {align-items:center;}

/* 약관동의 — 전체동의 + 개별 약관 카드 */
.agree {display:flex; flex-direction:column; gap:2.4rem;}
.agree_all {display:flex;}
.agree_all .form_check {width:100%;}
.agree_all .form_check label {display:inline-flex; align-items:center; gap:1.6rem;}
.agree_all .opt_mark {margin-top:0;}
.agree_all .opt_tit {font-weight:700;}
.agree_card {display:flex; flex-direction:column; gap:4rem; padding:4rem; border:1px solid var(--color-gray-light); border-radius:var(--radius-3xl); background:var(--color-white);}
.agree_item {display:flex; flex-direction:column; gap:1.6rem;}
/* 약관 근거 조문 설명문 (표 위 리드 문장 — U-QP-01-02) */
.agree_desc {font-size:var(--fs-lg); line-height:var(--lh-base); color:var(--color-text-body);}
/* 약관 카드 안 표는 본문과 같은 크기로 읽히도록 한 단계 키우고 셀 여백도 상하좌우 같게 */
.agree_item .data_table th,
.agree_item .data_table td {padding:1.6rem; font-size:var(--fs-lg);}
/* 약관 표 열 폭 — PC에서 숨기는 for_mo 열(.agree_col_mo)이 있는 표는 4열 폭을 모두 명시한다.
   ⚠ 남는 폭 분배를 브라우저에 맡기면 사파리가 숨긴 for_mo 열에도 폭을 나눠 줘 표가 100%를 못 채운다(3/4 폭으로 줄어듦). MO는 카드형(table이 display:block)이라 이 폭을 쓰지 않는다. (2026-09-01 수정) */
.agree_col {width:33.33%;}
.agree_col_mo {width:0;}
/* 표 안 강조 값(보유기간·고유식별정보 항목) */
.agree_item .data_table strong {font-weight:700; color:var(--color-primary-dark); text-decoration:underline;}
.agree_title {font-size:var(--fs-h4); font-weight:700; line-height:var(--lh-base); color:var(--color-text-title);}
.agree_title em {font-style:normal; color:var(--color-point-dark);}
.agree_more {align-self:flex-start; display:inline-flex; align-items:center; justify-content:center; gap:.4rem; min-width:9.6rem; height:4rem; padding:0 1.2rem; border:1px solid var(--color-primary); border-radius:var(--radius-md); background:var(--color-primary-light); font-size:var(--fs-base); line-height:var(--lh-base); color:var(--color-primary-dark); transition:background .2s;}
/* 텍스트는 가운데(flex 영역), 화살표는 우측 고정 */
.agree_more_text {flex:1 1 0; min-width:0; text-align:center;}
/* 텍스트 우측 아래 화살표(chevron-down) */
.agree_more::after {content:""; flex-shrink:0; width:1.6rem; height:1.6rem; background:url(../images/icon/ico_arrow_down_primary.svg) no-repeat 50% / contain;}
.agree_more:hover,
.agree_more:focus {background:var(--color-primary-pale);}
.agree_more:active {background:var(--color-primary-deeppale);}
.agree_box {display:flex; align-items:center; gap:4rem; padding:2.4rem; border-radius:var(--radius-xl); background:var(--color-gray-subtle);}
/* '동의하지 않음' 선택 상태 — 빨강 2px 테두리 + 옅은 분홍 배경 (스크립트로 .is_disagree 토글) */
.agree_box.is_disagree {border:2px solid var(--color-input-border-error); background:var(--color-error-subtle);}
.agree_box_text {flex:1 1 0; min-width:0; font-size:var(--fs-lg); line-height:var(--lh-base); color:var(--color-text-title);}
.agree_radios {flex-shrink:0; display:flex; align-items:center; gap:2.4rem;}
.agree_radios .form_radio {width:auto;}
.agree_radios .opt_tit {font-size:var(--fs-lg);}

/* 약관 상세 펼침 (이용약관 상세보기 펼친 상태 — U-QP-05-04) */
.agree_more.is_open::after {transform:rotate(180deg);}
/* 약관 상세 — 기본 숨김, .is_open 추가 시 표시 (버튼 클래스와 독립 / 스크립트 연동 예정) */
.agree_detail {display:none; flex-direction:column; gap:1.6rem; padding:2.4rem; border-radius:var(--radius-xl); background:var(--color-gray-subtler);}
.agree_detail.is_open {display:flex;}
/* 회색 박스 없이 카드 본문에 바로 펼치는 변형 (U-QP-01-02) */
.agree_detail.type_plain {padding:0; border-radius:0; background:none;}
.agree_detail_title {font-size:var(--fs-h4); font-weight:700; line-height:var(--lh-base); color:var(--color-text-title);}
.agree_detail_title em {font-style:normal; color:var(--color-point-dark);}
.agree_detail_lead {font-size:var(--fs-lg); line-height:var(--lh-base); color:var(--color-text-body);}
.agree_detail_list {display:flex; flex-direction:column; gap:1.2rem; margin:0; padding:0; list-style:none; counter-reset:agreeitem;}
.agree_detail_list > li {position:relative; counter-increment:agreeitem; padding-left:2.4rem; font-size:var(--fs-lg); line-height:var(--lh-base); color:var(--color-text-body);}
.agree_detail_list > li::before {content:counter(agreeitem) "."; position:absolute; top:0; left:0;}
.agree_detail_sublist {display:flex; flex-direction:column; gap:.8rem; margin:1.2rem 0 0; padding:0; list-style:none;}
.agree_detail_sublist > li {position:relative; padding-left:2.4rem; font-size:var(--fs-base); line-height:var(--lh-base);}
.agree_detail_sublist > li::before {position:absolute; top:0; left:.8rem; font-size:var(--fs-xs);}
.agree_detail_sublist > li:nth-child(1)::before {content:"\2460";}
.agree_detail_sublist > li:nth-child(2)::before {content:"\2461";}
.agree_detail_sublist > li:nth-child(3)::before {content:"\2462";}
.agree_detail_warn {position:relative; padding-left:2.4rem; font-size:var(--fs-lg); line-height:var(--lh-base); color:var(--color-msg-error);}
.agree_detail_warn::before {content:"\203B"; position:absolute; top:0; left:0;}

/* =========================================================
   훈련과정 수강신청 STEP1 — 유의사항 동의 (U-QP-04-06-01)
   신청 안내 박스 묶음 · 신청 절차 흐름 카드 · 절차 하단 안내
========================================================= */
/* 신청대상·신청정보 안내 박스 묶음 */
.apply_notice_group {display:flex; flex-direction:column; gap:2.4rem;}
/* 신청 절차 흐름 카드 + 하단 안내 묶음 */
.apply_flow_wrap {display:flex; flex-direction:column; gap:2.4rem;}
/* 신청 → 접수 → 검토 → 등록 절차 카드 (가로 균등 분할) */
.apply_flow {display:flex; gap:2.4rem; margin:0; padding:0; list-style:none;}
.apply_flow_card {flex:1 1 0; min-width:0; display:flex; align-items:center; gap:1.6rem; padding:2rem; border-radius:var(--radius-3xl); background:var(--color-secondary-subtler);}
.apply_flow_icon {flex-shrink:0; width:5.6rem; height:5.6rem; border-radius:50%; background:var(--color-white) no-repeat 50% / 3.2rem;}
.apply_flow_icon.type_apply {background-image:url(../images/icon/ico_apply.svg);}
.apply_flow_icon.type_submit {background-image:url(../images/icon/ico_submit.svg);}
.apply_flow_icon.type_review {background-image:url(../images/icon/ico_review.svg);}
.apply_flow_icon.type_register {background-image:url(../images/icon/ico_register.svg);}
.apply_flow_text {flex:1 1 0; min-width:0; display:flex; flex-direction:column; gap:.4rem;}
.apply_flow_title {font-size:var(--fs-lg); font-weight:700; line-height:var(--lh-base); color:var(--color-text-title);}
.apply_flow_desc {font-size:var(--fs-lg); line-height:var(--lh-base); color:var(--color-text-body); white-space:nowrap;} /* 각 줄은 br로만 개행 — 공백에서 자동 줄바꿈 방지 */
.apply_flow_arrow {flex-shrink:0; width:2.4rem; height:2.4rem; background:url(../images/icon/ico_arrow_right.svg) no-repeat center / contain;}
/* 절차 하단 안내 (점 목록 + 들여쓴 대시 하위 안내) */
.apply_flow_notice {display:flex; flex-direction:column; gap:1.2rem;}
.apply_flow_subnote {padding-left:3.2rem;}

/* 경고 알림 (alert — danger) */
.alert {display:flex; align-items:flex-start; gap:.8rem; padding:1.6rem; border:1px solid #fcdfd9; border-radius:var(--radius-lg); background:#fdefec;}
.alert_ico {flex-shrink:0; width:2.4rem; height:2.4rem; background:url(../images/icon/ico_system_danger.svg) no-repeat center / contain;}
.alert_text {flex:1 1 0; min-width:0; font-size:var(--fs-lg); line-height:var(--lh-base); color:var(--color-text-body);}
/* 약관 '동의하지 않음' 선택 시 노출되는 거부 경고 토글 — 기본 숨김, .is_show 추가 시 표시 (스크립트 연동 예정) */
.alert.type_toggle {display:none;}
.alert.type_toggle.is_show {display:flex;}

/* 하단 버튼 — PC 양끝 / MO 취소(내용폭) + 주 동작(남은 폭) 가로 배치 */
.btn_area.type_split {justify-content:space-between;}
/* 하단 버튼 — PC 양끝 / MO 두 버튼 균등 가로 배치 */
.btn_area.type_even {justify-content:space-between;}

/* =========================================================
   반응형 (모바일 ≤768)
========================================================= */
/* =========================================================
   서비스 상세 안내 (U-QP-05-01_01)
   앵커 탭 · 회색 안내 박스 · 서비스 개요 박스 · 발급 절차 스텝
========================================================= */
/* 페이지 제목 + 우측 액션 버튼 한 줄 배치 */
.content-header.type_tile {display:flex; align-items:center; justify-content:space-between; gap:2.4rem; margin-bottom:4.8rem;}
.content-header.type_tile .content_title {margin-bottom:0;}
/* 제목 옆 주 동작 버튼 — 색은 .btn_fill, 크기는 이 문맥에서 부여(하단 .btn_area button과 동일 64px) */
.content-header.type_tile .btn_fill,
.content-header.type_tile .btn_line {flex-shrink:0; display:inline-flex; align-items:center; justify-content:center; min-width:9.8rem; height:6.4rem; padding:0 2.4rem; border-radius:var(--radius-lg); font-size:var(--fs-19); line-height:var(--lh-base); transition:background .2s, border-color .2s;}

/* 앵커 탭 — 섹션 이동 인덱스 (PC 노출 / MO 숨김). 시각은 탭(.tab)과 동일 톤 */
/* 스크롤 중 상단 고정 — 고정 헤더(.gnb_in z-index:100)보다 아래에 깔린다 */
.anchor_tab {display:flex; position:sticky; top:0; z-index:50; margin-bottom:4rem; background:var(--color-white); transition:top .4s ease .01s;}
/* 위로 스크롤해 헤더가 다시 내려오면 헤더 높이(--gnb-h, script.js 주입)만큼 내려 가려지지 않게 한다 */
#wrapper.scroll_up .anchor_tab {top:var(--gnb-h, 0);}
.anchor_tab_item {flex:1 1 0; min-width:8rem; height:5.6rem; display:flex; align-items:center; justify-content:center; padding:0 .8rem; border-bottom:2px solid var(--color-gray); font-size:var(--fs-h4); font-weight:700; line-height:var(--lh-base); color:var(--color-text-body); text-align:center; text-decoration:none;}
.anchor_tab_item.is_active {border-bottom:4px solid var(--color-secondary); color:var(--color-secondary-dark);}
.section[tabindex]:focus {outline:none;} /* 앵커 탭 이동 시 구획으로 가는 프로그램 초점 — 구획 외곽선 숨김(접근성 영향 없음) */

/* 회색 안내 박스 — 아이콘 없는 단문 안내 */
.lead_box {padding:2.4rem; border-radius:var(--radius-xl); background:var(--color-gray-subtler); font-size:var(--fs-lg); line-height:var(--lh-base); color:var(--color-text-title);}
/* 파란 톤 변형 — 민원 안내 등 강조 박스 */
.lead_box.type_primary {background:var(--color-primary-subtler);}
/* 제목+버튼 줄 아래 안내 박스 동반(content-header 안에 포함) — 박스는 다음 줄 전체 폭, 줄 간격은 type_tile gap(24) */
.content-header.type_tile.has_detail {flex-wrap:wrap;}
.content-header.type_tile.has_detail .lead_box {flex:0 0 100%;}

/* 본문 문단 (소제목 아래 일반 설명) */
.text_para {font-size:var(--fs-lg); line-height:var(--lh-base); color:var(--color-text-body); word-break:break-all;}
/* 부가정보 법령 안내 문단 — 진한 텍스트 */
#extra .text_para {color:var(--color-text-title);}

/* 서비스 개요 — 회색 박스(라벨 180 + 값) */
.overview_box {padding:4rem; border-radius:var(--radius-3xl); background:var(--color-gray-subtler);}
.overview_list {display:flex; flex-direction:column; gap:1.6rem; margin:0;}
.overview_row {display:flex; align-items:flex-start; gap:2.4rem;}
.overview_label {flex-shrink:0; width:180px; font-size:var(--fs-lg); font-weight:700; line-height:var(--lh-base); color:var(--color-text-title);}
.overview_value {flex:1 1 0; min-width:0; margin:0; font-size:var(--fs-lg); line-height:var(--lh-base); color:var(--color-text-body);}
/* 신청서류 — 숫자(1.) 목록 뒤에 붙는 별표 부연 간격 */
.overview_value .text_list + .text_list.type_star {margin-top:.8rem;}

/* 신청 방법 목록 — 1뎁스 그룹 사이 20, 2뎁스 항목 사이 12 (표 안·각주 목록은 직계 자식만 선택해 제외) */
#process .subsection > .text_list {gap:2rem;}
#process .subsection > .text_list > li > .text_list {gap:1.2rem;}

/* 신청 방법 — '신청 대상' 항목 안 교육과정 블록(소제목 + 표 + ∗·※ 부연) */
.course_block {display:flex; flex-direction:column; gap:.8rem; margin-top:.8rem;}
.course_block_title {font-weight:700; color:var(--color-text-body);}
.course_block > .text_list {gap:1.2rem; margin-top:.4rem; padding-left:0;}
/* 표 안 목록은 중첩 규칙을 풀고 기본 들여쓰기 복원 */
.course_block .data_table .text_list {gap:.8rem; margin-top:0; padding-left:0;}
.course_block .data_table .text_list li {padding-left:2.8rem;}
.course_block .data_table .text_list li::before {left:.8rem;}

/* 제출 서류 — 대상별 2열 비교 표(숫자 목록 + 별표 부연), 표 아래 ※ 파일형식 부연 */
.docs_table td {vertical-align:top;}
.table_wrap[aria-label="제출 서류 표"] + .text_list {margin-top:2rem;}

/* 자격증 발급 절차 — 세로 번호 타임라인 박스 */
.step_flow {display:flex; flex-direction:column; width:58.8rem; max-width:100%; margin:0; padding:3.2rem; border:1px solid var(--color-gray-light); border-radius:var(--radius-3xl); background:var(--color-white); list-style:none;}
.step_flow_item {position:relative; display:flex; gap:1.6rem; padding-left:.8rem;}
.step_flow_item:not(:last-child) {padding-bottom:3.2rem;}
.step_flow_item:not(:last-child)::before {content:""; position:absolute; left:2rem; top:2.4rem; bottom:0; width:1px; background:var(--color-secondary-light);}
.step_flow_num {position:relative; z-index:1; flex-shrink:0; display:inline-flex; align-items:center; justify-content:center; min-width:2.4rem; height:2.4rem; padding:0 .4rem; border-radius:var(--radius-sm); background:var(--color-secondary); font-size:var(--fs-base); font-weight:700; line-height:var(--lh-base); color:var(--color-white);}
.step_flow_body {flex:1 1 0; min-width:0; display:flex; flex-direction:column; gap:.4rem;}
.step_flow_title {font-size:var(--fs-lg); font-weight:700; line-height:var(--lh-base); color:var(--color-secondary);}
.step_flow_desc {margin:0; font-size:var(--fs-lg); line-height:var(--lh-base); color:var(--color-text-body);}

/* =========================================================
   진행 단계 표시 (step indicator) — 자격신청 스텝 (U-QP-05-02 등)
   - is_current: 현재 단계(파랑) / is_done: 완료 단계(회색) / 기본: 진행 전(연회색)
   - 모바일에서는 라벨을 숨기고 숫자 원형만 노출(라벨은 SR용으로 유지)
========================================================= */
.step_indicator {display:flex; align-items:flex-start; max-width:60rem; margin-bottom:4.8rem;}
.step_indicator_item {flex:1 1 0; min-width:0; display:flex; flex-direction:column; gap:.8rem;}
.step_indicator_track {display:flex; align-items:center; height:2.4rem;}
.step_indicator_num {flex-shrink:0; display:inline-flex; align-items:center; justify-content:center; width:2.4rem; height:2.4rem; border-radius:50%; border:1.2px solid var(--color-gray-light); background:var(--color-gray-subtle); font-size:var(--fs-xs); font-weight:700; line-height:var(--lh-base); color:var(--color-text-caption);}
.step_indicator_line {flex:1 1 0; min-width:0; height:1.6px; background:var(--color-gray-light);}
.step_indicator_label {padding-right:2.4rem; font-size:var(--fs-base); font-weight:700; line-height:var(--lh-base); color:var(--color-text-title);}
.step_indicator_item.is_current .step_indicator_num {border-color:var(--color-primary); background:var(--color-primary); color:var(--color-white);}
.step_indicator_item.is_done .step_indicator_num {border-color:var(--color-element-gray); background:var(--color-element-gray); color:var(--color-white);}
.step_indicator_item.is_done .step_indicator_line {background:var(--color-element-gray);}

/* =========================================================
   발급 유형 선택 카드 (issue type) — U-QP-05-02
   - is_primary: 디자인 강조(권장) 카드 / hover·focus 시 동일 강조
========================================================= */
.issue_type {display:flex; gap:2.4rem;}
.issue_type_item {flex:1 1 0; min-width:0; display:flex;}
.issue_card {flex:1 1 0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.8rem; padding:4rem 2.4rem; border:1px solid var(--color-gray-light); border-radius:var(--radius-3xl); background:var(--color-white); text-align:center; transition:border-color .2s, background .2s;}
.issue_card_ico {flex-shrink:0; width:6.4rem; height:6.4rem; background-repeat:no-repeat; background-position:center; background-size:contain;}
.issue_card_ico_license {background-image:url(../images/icon/ico_license.png);}
.issue_card_ico_reissuance {background-image:url(../images/icon/ico_reissuance.png);}
.issue_card_body {display:flex; flex-direction:column; align-items:center; gap:.8rem;}
.issue_card_title {font-size:2.4rem; font-weight:700; line-height:var(--lh-base); color:var(--color-text-strong);}
.issue_card_desc {font-size:var(--fs-body2); line-height:var(--lh-base); color:var(--color-text-body);}
.issue_card.is_primary,
.issue_card:hover,
.issue_card:focus-visible {border-width:2px; border-color:var(--color-primary); background:var(--color-primary-subtler); margin:-1px;}

/* =========================================================
   회원가입 — 회원정보 입력 (U-QP-01-03)
   - 단계 카운트(step_count) · 입력 그룹 카드(join_card)
   - 입력칸 옆 액션 버튼(.btn_act.size_lg) · 한 줄 배치(.field_inline)
   - 분할 입력(.field_split — 주민번호 앞/뒤, 이메일 아이디@도메인)
========================================================= */
/* 단계 카운트 (n단계 / m단계) — 스텝 페이지 제목 위 (U-QP-05-02 공용) */
.step_count {margin-bottom:1.6rem; font-size:var(--fs-body2); line-height:var(--lh-base); color:var(--color-text-body);}
.step_count_now {font-weight:700; color:var(--color-primary-dark);}
/* 선택 표시 (필수 .form_req 는 point-dark = 약관 [필수] em 과 동일) */
.form_opt {color:var(--color-msg-info);}
/* 제목 + 입력 카드 묶음 — 제목 자체 margin 으로 카드와 간격(섹션 그룹 간격은 section-body) */
.join_section {display:flex; flex-direction:column;}
/* 입력 그룹 카드 — 라운드 20, 입력 그룹 간 간격 40 */
.join_card {display:flex; flex-direction:column; gap:4rem; padding:4rem; border:1px solid var(--color-gray-light); border-radius:var(--radius-3xl); background:var(--color-white);}
/* 입력칸 옆 액션 버튼(중복확인·실명인증 등) — 입력 박스(large 56)와 높이 정렬 */
.btn_act.size_lg {min-width:9rem; height:5.6rem; padding:0 2rem; font-size:var(--fs-19);}
/* 입력칸 + 우측 버튼 한 줄 */
.field_inline {display:flex; align-items:flex-start; gap:1.6rem;}
.field_inline > .field_box,
.field_inline > .field_split {flex:1 1 0; min-width:0;}
/* 분할 입력 — 구분 기호로 연결 (주민번호 앞/뒤, 이메일 아이디@도메인) */
.field_split {display:flex; align-items:center; gap:.8rem;}
.field_split > .field_box {flex:1 1 0; min-width:0;}
.field_split_sep {flex-shrink:0; font-size:var(--fs-19); line-height:var(--lh-base); color:var(--color-text-muted);}
/* 전자우편 — 아이디@도메인 + 도메인 선택 (1행은 720px 고정: 아이디·도메인 각 245.5 + @ + 셀렉트 180) */
.field_email {display:flex; align-items:flex-start; gap:1.6rem; max-width:72rem;}
.field_email > .field_split {flex:1 1 0; min-width:0;}
.field_email_domain {flex-shrink:0; width:18.3rem;} /* 도메인 select */
/* 휴대폰번호 — 앞자리 select + 번호 input 한 줄 (U-QP-04-06-02) */
.field_phone {display:flex; align-items:flex-start; gap:1.6rem; max-width:50.6rem;}
.field_phone > .field_box {flex:1 1 0; min-width:0;}
.field_phone > .field_w180 {flex:0 0 18rem;}
/* 전자우편 주소 인증 버튼 183px 고정 (U-QP-01-03 — 모바일은 .field_inline > .btn_act 규칙이 100%로 덮음) · 좁은 폭에서 텍스트 한 줄 유지 */
.email_cert_w183 {width:18.3rem; min-width:0; padding:0 1rem; white-space:nowrap;}
/* 전자우편 — 2행(인증번호+인증버튼)·안내 메시지도 1행과 같은 720 폭으로 통일 (인증번호 506 고정 + 버튼은 내용 폭) */
.form_field.type_email .field_inline,
.form_field.type_email .field_msg {max-width:72rem;}
/* 1행 아이디@도메인 묶음도 2행 인증번호와 같은 506 고정 */
.form_field.type_email .field_email > .field_split {flex:0 0 50.6rem;}
.form_field.type_email .field_inline > .field_box {flex:0 0 50.6rem;}
/* 라디오 가로 나열 (성별 등) */
.radio_group {display:flex; flex-wrap:wrap; gap:1.2rem 4rem;}
.radio_group .form_radio {width:auto;}
/* 라디오 세로 나열 (재발급 사유 선택 등) */
.radio_group.type_stack {flex-direction:column; flex-wrap:nowrap; gap:2.4rem;}
/* 라디오 옆에 선택 필드가 붙는 항목 (내·외국인 여부의 국적 선택 — 체크박스판 .check_etc와 같은 구성, U-QP-01-03) */
.radio_group:has(.radio_etc) {align-items:center;} /* 선택 필드가 섞이면 행 높이가 달라져 라디오를 세로 가운데로 */
.radio_etc {display:flex; align-items:center; gap:1.6rem;}
.radio_etc .form_radio {flex-shrink:0; width:auto;}
.field_nation {width:36rem;}

/* =========================================================
   발급 신청서 작성 (U-QP-05-05)
   - 입력 그룹 세로 스택(.apply_form) · 단일 입력 절반 폭(.size_half)
   - 하위 라벨 입력(.subfield) · 대상구분 체크 그리드(.check_group/.check_grid)
   - 입력 안내 점(-)목록(.field_notes) · 파일 첨부 박스(.file_attach)
   - 증명사진 미리보기(.photo_preview) · 첨부 파일행 오류(.doc_file.is_error)
========================================================= */
.apply_form {display:flex; flex-direction:column; gap:4rem;}
/* 단일 입력·셀렉트 절반 폭(이름·생년월일·휴대폰·교육과정·자격증 정보) — 디자인 기준 506px */
.apply_form .field_box.size_half {max-width:50.6rem;}
/* 우편번호 입력칸+버튼 줄 — input 고정 + 여백 + 버튼 */
.apply_form .field_inline.size_half {max-width:none;}
.apply_form .field_inline.size_half > .field_box {flex:0 0 50.6rem; max-width:100%;}
/* 이수 교육과정 — 라디오 그룹 위아래 간격 (기본 gap 위에 더해 PC 24 / MO 16) */
.apply_form .radio_group[aria-labelledby="eduCourseLabel"] {margin-top:.8rem; margin-bottom:1.6rem;}
/* 대상구분 체크그룹 ↔ 첨부 박스 위아래 간격 (기본 gap 8 위에 더해 PC 32 / MO 16+8=24) */
.apply_form .check_group + .file_attach {margin-top:2.4rem;}

/* 하위 라벨 입력 (수료번호·수료일자·발급기관명) */
.subfield {display:flex; flex-direction:column; gap:.8rem;}
.subfield + .subfield {margin-top:3.2rem;}
.subfield_label {font-size:var(--fs-base); font-weight:700; line-height:var(--lh-base); color:var(--color-text-title);}
/* 하위 라벨 입력 3열 가로 배치 (교육 수료번호/일자/기관 · 자격면허명/번호/취득일자) */
.subfield_row {display:flex; gap:1.6rem; margin-top:1.6rem;}
.subfield_row > .subfield {flex:1 1 0; min-width:0;}
.subfield_row > .subfield + .subfield {margin-top:0;}
.subfield_row + .field_msg {margin-top:.8rem;} /* 하위 입력 묶음 아래 안내 메시지 — form_field gap(.8) + .8 = 1.6 */

/* 대상구분 — 체크박스 그룹(소제목 + 그리드) */
.check_group + .check_group {margin-top:3.2rem;}
.check_group_title {display:flex; align-items:center; gap:1.6rem; margin-bottom:1.6rem; font-size:var(--fs-lg); font-weight:700; line-height:var(--lh-base); color:var(--color-text-strong);}
.check_group_name {flex:0 0 auto; font-size:1.5rem;}
/* 자격증 항목 펼침/접힘 토글 (아코디언) */
.check_group_toggle {display:inline-flex; align-items:center; gap:.4rem; padding:0; border:0; background:transparent; font-size:var(--fs-base); font-weight:400; line-height:var(--lh-base); color:var(--color-text-caption); cursor:pointer;}
.check_group_toggle_text {color:#1e2124;}
.check_group_toggle:focus-visible {outline:2px solid var(--color-input-border-active); outline-offset:2px;}
.check_group_toggle_arrow {position:relative; width:2rem; height:2rem;}
.check_group_toggle_arrow::before {content:""; position:absolute; left:5px; top:5px; width:.8rem; height:.8rem; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:rotate(45deg);}
.check_group_toggle.is_open .check_group_toggle_arrow::before {top:8px; transform:rotate(-135deg);}
/* 컨테이너 is_open 유무로 펼침/접힘 — is_open 없으면 내용 숨김 */
.check_group:not(.is_open) .check_grid,
.check_group:not(.is_open) .field_msg {display:none;}
.check_grid {display:flex; flex-wrap:wrap; column-gap:2.4rem; row-gap:1.6rem; align-items:flex-start;}
.check_grid[hidden] {display:none;}
.check_grid .form_check {width:auto; min-width:20rem;}
.check_grid .form_check.is_wide {flex:1 1 100%; min-width:0;}
/* 한 항목씩 세로 나열 (직무연수과정 — 긴 문구) */
.check_grid.type_stack {flex-direction:column;}
.check_grid.type_stack .form_check {min-width:0;}
/* 도움말 툴팁 체크 항목 — 라벨 끝 도움말 버튼, 누르면 버튼 위로 말풍선 노출(꼬리가 버튼을 가리킴) (U-QP-05-05 직무연수과정) */
.form_check.type_tooltip {display:inline-flex; position:relative; align-items:center; gap:1.2rem;}
.tooltip_wrap {display:inline-flex; position:relative; flex-shrink:0;}
.tooltip_btn {display:block; width:2.4rem; height:2.4rem; padding:0; border:0; border-radius:var(--radius-sm); background:var(--color-white) url(../images/icon/ico_popover_help.svg) no-repeat center / 2.4rem 2.4rem; cursor:pointer;}
.tooltip_btn:focus-visible,
.tooltip_close:focus-visible {outline:2px solid var(--color-input-border-active); outline-offset:2px;}
/* 말풍선 — 꼬리 중심이 버튼 중심에 오도록 왼쪽으로 당김, 화면 밖으로 나가면 script.js가 좌우 위치 보정 */
.tooltip_layer {display:none; position:absolute; bottom:100%; left:-1.1rem; z-index:10; box-sizing:border-box; width:36rem; margin-bottom:1.5rem; padding:2.4rem; border:1px solid var(--color-gray); border-radius:var(--radius-xl); background:var(--color-white); font-size:var(--fs-base); line-height:var(--lh-base); color:var(--color-text-title); text-align:left;}
.tooltip_layer.is_open {display:flex; align-items:flex-start; gap:.8rem;}
.tooltip_body {flex:1 1 0; min-width:0;}
.tooltip_text {display:block;}
.tooltip_close {flex-shrink:0; width:1.6rem; height:1.6rem; padding:0; border:0; background:url(../images/icon/ico_close_16.svg) no-repeat center / 1.6rem 1.6rem; cursor:pointer;}
/* 말풍선 꼬리 — 기준이 테두리 안쪽이라 top:100%가 곧 아래 테두리 줄, 꼬리 첫 줄이 테두리를 덮어 박스와 이어짐 */
.tooltip_arrow {position:absolute; top:100%; left:1.1rem; width:2.2rem; height:1.2rem; background:url(../images/icon/ico_tooltip_arrow.svg) no-repeat 0 0 / 2.2rem 1.2rem;}
/* 목록 항목 도움말 툴팁 — 문구 끝에 도움말 버튼을 이어 붙임 (U-QP-05-01 교육과정 표) */
.text_list .tooltip_wrap {margin-left:.4rem; vertical-align:middle;}
/* 체크 그리드 아래 안내 문구 간격 */
.check_grid + .field_msg {margin-top:2rem;}
/* 직접입력 체크 + 학과명 입력 — 전체폭 독립 행으로 분리(윗줄 체크와 수평 정렬 불필요), 라벨·입력칸 세로 중앙 정렬 */
.check_etc {flex:1 1 100%; min-width:0; display:flex; align-items:center; gap:1.6rem;}
.check_etc .form_check {flex-shrink:0; width:auto; min-width:0;}
.check_etc .field_box {flex:1 1 0; min-width:0; width:auto;}

/* 입력 안내 — 점(-) 목록 (파일 제출 안내 등) */
.field_notes {display:flex; flex-direction:column; gap:.4rem; margin:0; padding:0; list-style:none;}
.field_msg + .field_notes {padding-left:2rem;} /* 안내 메시지에 이어지는 목록 — 메시지 아이콘 폭만큼 들여써 문구와 좌측을 맞춘다 */
.field_notes_item {position:relative; padding-left:2.4rem; font-size:var(--fs-base); line-height:var(--lh-base); color:var(--color-msg-info);}
.field_notes_item::before {content:""; position:absolute; top:1.1rem; left:.7rem; width:.6rem; height:.12rem; background:currentColor;}
.field_notes_item.type_mark {padding-left:0;}
.field_notes_item.type_mark::before {content:none;}
.field_notes + .doc_filelist {margin-top:.8rem;} /* 안내 목록에 이어지는 첨부 파일 목록 — form_field gap(.8) + .8 = 1.6 */

/* 파일 첨부 박스 — 회색 박스 + 첨부파일 라벨 + 파일선택 버튼 */
.file_attach {padding:2.4rem; border-radius:var(--radius-xl); background:var(--color-gray-subtle);}
.file_attach_title {display:block; margin-bottom:1.2rem; font-size:var(--fs-lg); font-weight:400; line-height:var(--lh-base); color:var(--color-text-title);}
.file_attach_row {display:flex; align-items:center; gap:1.6rem;} /* 입력칸 옆 액션 버튼 간격 — field_inline과 동일 기준 */
.file_attach_row > .field_box {flex:1 1 0; min-width:0; background:var(--color-white);}
.file_attach_row > .btn_act {flex-shrink:0;}
/* 파일선택 — label.btn_act 안에 실제 input[type=file] 을 숨겨 트리거로 사용 */
.file_select {cursor:pointer;}
.file_select:focus-within {outline:2px solid var(--color-input-border-active); outline-offset:2px;}
.file_input {position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0,0,0,0); border:0;}
/* 미입력(필수 누락) 경고 상태 — 분홍 배경 + 2px 빨강 테두리 (동반 메시지는 .field_msg.type_error) */
.file_attach.is_error {border:2px solid var(--color-input-border-error); background:var(--color-error-subtle);}

/* 증명사진 미리보기 — 회색 테두리 박스(가로3 X 세로4 비율) */
.photo_preview {width:12rem; height:16rem; border:1px solid var(--color-gray); background:var(--color-white); overflow:hidden;}
.photo_preview img {display:block; width:100%; height:100%; object-fit:cover;}

/* 첨부 파일행 — 오류 상태(분홍 배경 + 2px 빨강 테두리 + 구분선 + 오류 메시지) */
.doc_file.is_error {flex-direction:column; flex-wrap:nowrap; align-items:stretch; gap:1.2rem; border:2px solid var(--color-input-border-error); background:var(--color-error-subtle);}
.doc_file_main {display:flex; min-width:0; align-items:center; gap:1.6rem;} /* min-width:0 — 세로 배치된 오류 카드의 아이템이라 auto 로 두면 파일명 길이만큼 늘어나 말줄임이 걸리지 않는다 */
.doc_file_main .doc_filename {flex:1 1 0; min-width:0;}
.doc_file_msg {display:flex; align-items:flex-start; gap:.4rem; margin:0; padding-top:1.2rem; border-top:1px solid var(--color-gray-charcoal); font-size:var(--fs-lg); line-height:var(--lh-base); color:var(--color-msg-error);}
.doc_file_msg_ico {flex-shrink:0; width:2rem; height:2rem; margin-top:.4rem; background:url(../images/icon/ico_system_danger.svg) no-repeat center / contain;}

/* =========================================================
   마이페이지 나의현황 (U-QP-02-01) — 자격 카드 + 진행 현황 + 이수현황
========================================================= */
/* 상단 2단(자격 카드 + 진행 현황), 모바일 세로 전환 */
.mypage_top {display:flex; gap:2.4rem; align-items:flex-start;}
.mypage_top.type_even {align-items:stretch;} /* 단일 진행현황(U-QP-02-01): 자격카드·진행현황 칼럼 동일 높이 */
.mypage_status {flex:1 1 0; min-width:0; display:flex; flex-direction:column; gap:2.4rem;}
.mypage_status .infobox {border-width:0;} /* 마이페이지 서브 메인(나의현황)에서는 안내 박스 테두리 없음 (서브 페이지에서는 기본 테두리 유지) */
.mypage_status .infobox.is_bordered {border-width:1px;} /* 서브 페이지용 테두리 버전 데모(나의현황 안에서 비교용) */
.mypage_top.type_even .status_card {flex:0 0 auto; height:21.5rem;} /* 진행현황 카드 고정 높이 (U-QP-02-01 전용) */
.mypage_top.type_even .infobox {flex:1 1 auto;} /* 안내 박스가 남는 높이를 채워 자격카드 하단과 정확히 정렬 */

/* 자격 소지 카드 (파란 카드) */
.cert_card {flex-shrink:0; display:flex; flex-direction:column; gap:1.6rem; width:30rem; padding:2.8rem; border-radius:var(--radius-3xl); background:var(--color-primary); color:var(--color-white);}
.cert_card_lead {font-size:var(--fs-lg); font-weight:700; line-height:var(--lh-base);}
.cert_card_name {font-weight:700;}
.cert_card_status {font-size:var(--fs-h3); font-weight:700; line-height:var(--lh-base);}
.cert_card_info {display:flex; flex-direction:column; gap:1.6rem; margin:0; padding:1.2rem 1.6rem; border-radius:var(--radius-lg); background:var(--color-primary-subtler); color:var(--color-text-title);}
.cert_card_info_row {display:flex; flex-direction:column; gap:.4rem; margin:0;}
.cert_card_info_row dt {font-size:var(--fs-base); font-weight:600; line-height:var(--lh-base);}
.cert_card_info_row dd {margin:0; font-size:var(--fs-base); line-height:var(--lh-base);}
.cert_card_btns {display:flex; gap:.8rem; margin-top:auto;}
.cert_card_btn {flex:1 1 0; min-width:0; display:inline-flex; align-items:center; justify-content:center; gap:.4rem; height:4rem; padding:0 1.2rem; border:1px solid var(--color-primary); border-radius:var(--radius-md); background:var(--color-white); font-size:var(--fs-base); line-height:var(--lh-base); color:var(--color-primary-dark); cursor:pointer;}
.cert_card_btn_ico {flex-shrink:0; width:1.6rem; height:1.6rem; background:url(../images/icon/ico_arrow_right_primary.svg) no-repeat center / contain;}

/* 자격신청 진행 현황 카드 */
.status_card {display:flex; flex-direction:column; gap:2.4rem; padding:2.8rem; border-radius:var(--radius-3xl); background:var(--color-secondary-subtler);}
.status_card_head {display:flex; align-items:center; gap:2rem;}
.status_card_title {flex:1 1 0; min-width:0; font-size:var(--fs-h3); font-weight:700; line-height:var(--lh-base); color:var(--color-text-title);}
.status_card_no {flex-shrink:0; font-size:var(--fs-lg); line-height:var(--lh-base); color:var(--color-text-body);}
/* 진행 단계 — 나의현황 배치 변형(상태 색은 컴포넌트 공통 규칙) */
.status_card .step_indicator {max-width:none; margin:0; padding-left:3rem;} /* PC 좌측 인셋(U-QP-02-01_01) */
.card .step_indicator {max-width:none; margin:0; padding:0 3rem 0 5.6rem;} /* card 내 진행 단계(U-QP-02-12) 전체폭 + PC 좌우 인셋 */
.card .step_indicator_item:last-child {flex:0 0 auto;} /* 마지막 단계를 콘텐츠 폭으로 — 6단계를 전체폭에 균등 배치(우측 끝까지) */
/* 진행 현황 — 신청 대상자 아님 상태(아이콘 + 안내, U-QP-02-01_01) */
.status_empty {flex:1 1 0; display:flex; align-items:center; gap:2.4rem;}
.status_empty_ico {flex-shrink:0; display:flex;}
.status_empty_ico img {width:5.6rem; height:5.6rem;}
.status_empty_text {flex:1 1 0; min-width:0;}
.status_empty_title {font-size:var(--fs-19); font-weight:700; line-height:var(--lh-base); color:var(--color-text-title);}
.status_empty_desc {margin-top:.8rem; font-size:var(--fs-lg); line-height:var(--lh-base); color:var(--color-text-body);}

/* 교육 이수현황 — 3단 카드 (양성·보수 교육 진행 단계 / 교육출석현황, U-QP-02-01) */
.edu_grid {display:flex; gap:2.4rem;}
.edu_col {flex:1 1 0; min-width:0; display:flex; flex-direction:column; gap:2.4rem;}
.edu_title {font-size:var(--fs-h3); font-weight:700; line-height:var(--lh-base); color:var(--color-text-title);}
.edu_card {flex:1 1 auto; display:flex; flex-direction:column; gap:2.4rem; padding:3.2rem; border-radius:var(--radius-2xl);}
.edu_card .step_indicator {width:100%; padding:0;} /* .card 공통 좌우 인셋 해제 — 좁은 카드 폭에 4단계를 꽉 채움 */
.edu_card .step_indicator_label {padding-right:0;} /* 카드 폭이 좁아 라벨 우측 여백 해제 — 단계 이름을 한 줄로 유지 */
.edu_card_title {font-size:var(--fs-body1); font-weight:700; line-height:var(--lh-base); color:var(--color-text-title);}
.edu_card_body {display:flex; flex-direction:column; align-items:flex-start; gap:1.6rem;}
.edu_card_badges {display:flex; gap:.8rem;}
.edu_card_date {display:flex; gap:.8rem; font-size:var(--fs-base); line-height:var(--lh-base); color:var(--color-text-body);}
.edu_card_date_label {flex-shrink:0; font-weight:700;}
.edu_attend {display:flex; flex-direction:column; gap:.8rem; margin:0;}
.edu_attend_row {display:flex; align-items:center; gap:1.6rem; margin:0;}
.edu_attend_term {flex-shrink:0; width:5.9rem; font-size:var(--fs-body2); font-weight:700; line-height:var(--lh-base); color:var(--color-text-title); text-align:justify; text-align-last:justify;} /* 라벨 폭 고정 + 양끝 정렬로 값 열 맞춤 */
.edu_attend_desc {margin:0; font-size:var(--fs-body2); line-height:var(--lh-base); color:var(--color-text-title);}
/* 진행중인 교육이 없을 때 — 카드 안 가운데 정렬(아이콘·안내·바로가기 버튼) */
.edu_empty {display:flex; flex-direction:column; align-items:center; gap:1.6rem; margin:auto;}
.edu_empty_head {display:flex; flex-direction:column; align-items:center; gap:.8rem;}
.edu_empty_ico {width:3.2rem; height:3.2rem; background:url(../images/icon/ico_no_data.svg) no-repeat center / contain;}
.edu_empty_text {font-size:var(--fs-lg); line-height:var(--lh-base); color:var(--color-text-body); text-align:center;}
.edu_empty .btn_act {min-width:11.8rem;} /* 바로가기 버튼 폭 고정 (PC·MO 동일) */

/* 더보기 링크 (섹션 머리 우측) */
.more_link {flex-shrink:0; display:inline-flex; align-items:center; gap:.4rem; font-size:var(--fs-lg); line-height:var(--lh-base); color:var(--color-text-title);}
.more_link_ico {width:2rem; height:2rem; background:url(../images/icon/ico_expand_more.svg) no-repeat center / contain;}

/* =========================================================
   출결 현황 (양성교육신청현황 상세 > 출결 내역 탭, U-QP-02-18-01)
========================================================= */
/* 교육정보 카드 + 출결 요약 묶음 */
.attend_summary {display:flex; flex-direction:column; gap:2.4rem;}
.attend_summary + .section-header {margin-top:7.2rem;}
/* 요약 카드 행 + 안내 메시지 */
.stat_group {display:flex; flex-direction:column; gap:1.6rem;}

/* 요약 카드 (출석일수·출석시간·출석률·출결상태) */
.stat_list {display:flex; gap:2.4rem;}
.stat_card {position:relative; flex:1 1 0; display:flex; flex-direction:column; gap:.8rem; min-width:0; padding:2rem; border-radius:var(--radius-3xl); background:var(--color-secondary-subtler);}
.stat_card.type_success {background:var(--color-success-light);}
.stat_card.type_fail {background:var(--color-error-subtle);}
/* 아이콘은 카드 높이에 영향을 주지 않도록 흐름에서 분리 (원형 배경은 아이콘 파일에 포함) */
.stat_card_ico {position:absolute; right:2rem; top:2rem; width:4.8rem; height:4.8rem; background:no-repeat 50% / contain;}
.stat_card_ico.type_days {background-image:url(../images/icon/ico_attend_days.svg);}
.stat_card_ico.type_time {background-image:url(../images/icon/ico_attend_time.svg);}
.stat_card_ico.type_rate {background-image:url(../images/icon/ico_attend_rate.svg);}
.stat_card_ico.type_done {background-image:url(../images/icon/ico_attend_done.svg);}
.stat_card_ico.type_fail {background-image:url(../images/icon/ico_attend_fail.svg);}
.stat_card_title {padding-right:5.6rem; font-size:var(--fs-lg); font-weight:700; line-height:var(--lh-base); color:var(--color-text-title);}
.stat_card_txt {display:flex; flex-direction:column; gap:.4rem;}
.stat_card_value {display:flex; align-items:baseline; gap:.2rem; font-size:var(--fs-title); font-weight:700; line-height:var(--lh-base); color:var(--color-text-title); white-space:nowrap;}
.stat_card.type_success .stat_card_value {color:var(--color-msg-success);}
.stat_card.type_fail .stat_card_value {color:var(--color-msg-error);}
.stat_card_unit {font-size:var(--fs-19);}
.stat_card_sub {display:flex; align-items:center; gap:.8rem; font-size:var(--fs-lg); line-height:var(--lh-base); white-space:nowrap;}
.stat_card_sub_now {font-weight:700; color:var(--color-text-body);}
.stat_card_sub_total {color:var(--color-gray-charcoal);}

/* 일자별 출결내역 표 — 열 폭 (모바일에서도 열 구성을 유지하므로 비율로 지정) */
.attend_col_date {width:18.7%;}
.attend_col_period {width:7.3%;}
.attend_col_time {width:11.4%;}

/* =========================================================
   실습 내역 (양성교육신청현황 상세 > 실습 내역 탭, U-QP-02-18-01)
========================================================= */
.tab_panel > .card + .section-header {margin-top:6.4rem;}
/* 실습차수별 상세내역 표 — 열 폭 · 기간은 한 줄 유지 */
.practice_col_no {width:9.9%;}
.practice_col_term {width:23.9%;}
.practice_col_data {width:16.5%;}
.practice_term {white-space:nowrap;}

/* =========================================================
   1:1 문의 상세 — Q&A 스레드 (U-QP-02-20)
========================================================= */
.qa_thread {display:flex; flex-direction:column; gap:2.4rem;}
.qa_block {display:flex; flex-direction:column; gap:2.4rem;}
.qa_block.type_q {padding-top:2.4rem; border-top:1px solid var(--color-text-title);}
.qa_block.type_a {gap:2.4rem; padding:3.2rem; border-radius:var(--radius-3xl); background:var(--color-gray-subtler);}
.qa_main {display:flex; flex-direction:column; gap:1.6rem;}
.qa_head {display:flex; align-items:center; gap:1.6rem;}
.qa_label {font-size:var(--fs-h3); font-weight:700; line-height:var(--lh-base); color:var(--color-text-title);}
.qa_head .badge {flex-shrink:0;}
.qa_date {flex-shrink:0; margin-left:auto; font-size:var(--fs-base); line-height:var(--lh-base); color:var(--color-text-body);}
/* 답변 머리 우측 액션 버튼(추가 문의하기 등) — 컴팩트 */
.qa_head .btn_act {flex-shrink:0; min-width:6rem; height:3.2rem; padding:0 1rem; border-radius:var(--radius-sm); font-size:var(--fs-base);}
.qa_head .qa_date + .btn_act {margin-left:0;}
.qa_text {font-size:var(--fs-lg); line-height:var(--lh-base); color:var(--color-text-body);}
.qa_block.type_q .qa_text {font-weight:700; color:var(--color-text-title);}
.qa_files {display:flex; flex-direction:column; gap:1.6rem;}
.qa_block.type_a .qa_files {padding-top:2.4rem; border-top:1px solid var(--color-gray-light);}
.qa_files_title {font-size:var(--fs-19); font-weight:700; line-height:var(--lh-base); color:var(--color-text-title);}
/* 추가 문의 — ↳ 표시 + 들여쓰기 */
.qa_reply {display:flex; gap:4rem;}
.qa_reply_ico {flex-shrink:0; width:2.4rem; height:2.4rem; margin-top:2.4rem; background:url(../images/icon/ico_arrow_curve.svg) no-repeat center / contain;}
.qa_reply_body {flex:1 1 0; min-width:0; display:flex; flex-direction:column; gap:2.4rem;}
/* 추가 문의 작성 폼 */
.qa_write_area {display:flex; flex-direction:column; gap:4rem; margin-top:1.6rem;} /* 부모 qa_thread gap에 더해 위 간격을 넓힘 */
.qa_write {display:flex; flex-direction:column; gap:1.6rem;}
.qa_write_body {display:flex; flex-direction:column; gap:1.6rem;} /* 2026-08-24 수정: textarea↔첨부 박스 간격 24→16 (textarea 표준 컴포넌트 교체 디자인 기준) */
.qa_write_body > .doc_filelist {margin-top:.8rem;} /* 안내문→첨부 목록 간격은 24 유지 (1.6 + .8) */
.qa_write_file {display:flex; flex-direction:column; gap:1.6rem;}

/* =========================================================
   제도안내 (U-QP-03-01) — 본문 콘텐츠 컴포넌트
========================================================= */
/* 본문 안내 박스 — 색 톤(기본 회색 / point 연파랑 / info 연하늘) */
.guidebox {padding:2.4rem; border:1px solid var(--color-gray-light); border-radius:var(--radius-xl); background:var(--color-gray-subtler);}
.guidebox > p {font-size:var(--fs-lg); line-height:var(--lh-base); color:var(--color-text-body);}
.guidebox > p + p {margin-top:.8rem;}
.guidebox > .text_list {margin:0;}
.guidebox_title {font-size:var(--fs-base); font-weight:600; line-height:var(--lh-base); color:var(--color-text-title);}
.guidebox_title + p {margin-top:.8rem;}
.guidebox.type_point {border-color:var(--color-secondary-light); background:var(--color-primary-subtler);}
.guidebox.type_point > p {color:var(--color-text-title);}
.guidebox.type_info {padding:1.6rem 2.4rem; border-color:transparent; background:var(--color-info-subtler);}
.guidebox.type_info > p {font-size:var(--fs-base);}
/* type_info 본문 링크 — 문구 전체 파랑 + 쉐브론 화살표, URL만 밑줄 */
.guidebox_link {color:var(--color-primary);}
.guidebox_link:hover,
.guidebox_link:focus {text-decoration:underline;}
.guidebox_link_url {text-decoration:underline;}
.guidebox_link_arrow {display:inline-block; position:relative; width:1.6rem; height:1.6rem; vertical-align:middle;}
.guidebox_link_arrow::before {content:""; position:absolute; left:.3rem; top:50%; width:.7rem; height:.7rem; margin-top:-.45rem; border-top:1.5px solid currentColor; border-right:1.5px solid currentColor; transform:rotate(45deg);}

/* 신청 대상 카드 — 아이콘 + 대상 목록 */
.target_card {display:flex; flex-direction:column; align-items:flex-start; gap:1.6rem; padding:2.4rem; border:1px solid var(--color-gray-light); border-radius:var(--radius-3xl); background:var(--color-white);}
.target_card_ico {flex-shrink:0; width:6.4rem; height:6.4rem; background:url(../images/icon/ico_user_target.svg) no-repeat center / contain;}
.target_card > .text_list {width:100%;}

/* 발급 절차 — 흰 카드 안 번호 배지 타임라인(배지 아래 세로선으로 단계를 잇는다) */
.process_card {width:58.8rem; max-width:100%; padding:3.2rem; border:1px solid var(--color-gray-light); border-radius:var(--radius-xl); background:var(--color-white);}
.infobox + .process_card {margin-top:2.4rem;}
.process_list {display:flex; flex-direction:column; margin:0; padding:0; list-style:none;}
.process_item {position:relative; display:flex; gap:1.6rem;}
.process_item::after {content:""; position:absolute; left:2.4rem; top:2.4rem; bottom:0; width:0; border-left:1px solid var(--color-secondary-light);} /* 배지 중앙에서 다음 단계 배지까지 잇는 선 — 단계 사이 간격은 .process_body 아래 여백이 잡는다 */
.process_list > .process_item:last-child::after {content:none;}
.process_num {flex-shrink:0; display:inline-flex; align-items:center; justify-content:center; width:2.4rem; height:2.4rem; margin:0 1.2rem; border-radius:var(--radius-sm); background:var(--color-secondary); font-size:var(--fs-base); font-weight:700; line-height:var(--lh-base); color:var(--color-white);}
.process_body {flex:1 1 0; min-width:0; padding-bottom:3.2rem;}
.process_list > .process_item:last-child .process_body {padding-bottom:0;}
.process_title {font-size:var(--fs-lg); font-weight:700; line-height:var(--lh-base); color:var(--color-secondary);}
.process_desc {margin-top:.4rem; font-size:var(--fs-lg); line-height:var(--lh-base); color:var(--color-text-body);}
/* 자격검정 그룹 — 묶음 제목을 띠 형태 머리로 두고, 마지막 단계의 선은 그룹 바깥 다음 배지까지 잇는다 */
.process_group_item {padding-bottom:3.2rem;}
.process_group {border-radius:var(--radius-xl); background:var(--color-secondary-subtler);}
.process_group_title {padding:1.6rem 2rem; border-radius:var(--radius-xl) var(--radius-xl) 0 0; background:var(--color-secondary-light); font-size:var(--fs-19); font-weight:700; line-height:var(--lh-base); color:var(--color-secondary);}
.process_group .process_list {padding-top:1.6rem;}
.process_group .process_list > .process_item:last-child .process_body {padding-bottom:1.6rem;}
.process_group .process_item:last-child::after {content:""; bottom:-3.2rem;} /* 다음 단계 배지까지 그룹 바깥으로 이어 내린다 */

/* 교육 과정 — 과정별 묶음. PC는 섹션 본문과 같은 간격, MO만 좁힌다 */
.course_group {display:flex; flex-direction:column; gap:4rem;}
/* 교육 과정 표 — 데이터 표(.data_table) 변형. 대상 칸은 목록이 길어 상단 정렬한다 */
.course_table td.align_left {vertical-align:top;}
.course_table .text_list {display:block;} /* block — 항목 간격은 li margin으로(base flex gap 미적용) */
.course_table .text_list > li {margin-bottom:1.2rem; break-inside:avoid;}
.course_table .text_list > li:last-child {margin-bottom:0;}
/* 단축교육과정 대상 — PC 2열 배치(좌 3 / 우 4) */
.course_table .text_list.type_2col {columns:2; column-gap:1.6rem;}
.course_table .text_list.type_2col > li:nth-child(4) {break-before:column;}
.table_wrap + .infobox {margin-top:2.4rem;}

/* 신청 안내 박스 다음 버튼 — 좌측 정렬·간격 20 */
.guidebox + .btn_area {padding-top:2rem; justify-content:flex-start;}

/* =========================================================
   QR코드 자격 진위 확인 이용방법 — 목업 안내 카드 (U-QP-07-01)
   PC: 목업이 한 줄로 나란히 → 설명 목록이 그 아래 전체 폭
   MO: order를 풀어 목업 → 해당 설명 순서로 번갈아 쌓인다
========================================================= */
.qr_guide {display:flex; gap:4rem;}
.qr_guide_card {flex:1 1 0; min-width:0; display:flex; flex-direction:column;}
.qr_guide_body {flex:1 1 auto; display:flex; flex-wrap:wrap; gap:1.2rem 2.4rem;}
.qr_guide_body > .text_list {order:2; width:100%;}
.qr_guide_body > .text_list:first-of-type {margin-top:2.8rem;} /* 목업 줄과 첫 설명 사이를 넓힌다 */

/* 휴대폰 목업 — 앱 화면 이미지(폰 프레임까지 이미지에 포함)
   카드가 좁아져도 한 줄을 유지하도록 폭을 나눠 갖고, 디자인 크기를 최대값으로 둔다 */
.qr_guide_device {order:1; flex:1 1 0; min-width:0; max-width:21.1rem; height:auto;}

/* 종이 자격증 출력물 이미지 영역 */
.qr_guide_paper {order:1; flex:1 1 100%; display:flex; align-items:center; justify-content:center; min-height:45.8rem; border:1px solid var(--color-gray-light); overflow:hidden;}
.qr_guide_paper_img {width:26.1rem; max-width:100%; height:auto;}


/* MO 전용 줄바꿈 — PC 숨김 / MO 표시(.br_pc 의 반대) */
.br_mo {display:none;}

@media (max-width:768px) {
.br_pc {display:none;}
.br_mo {display:inline;}
.breadcrumb {padding-bottom:3.2rem;}
.infobox_body p {word-break:break-all;}
/* 1:1 문의 상세 Q&A — 모바일 */
.qa_write_area {gap:2.4rem;}
.qa_block.type_a {padding:2.4rem;}
.qa_head {flex-wrap:wrap; gap:.8rem 1.6rem;}
.qa_head .badge {margin-left:auto;}
.qa_date {order:3; width:100%; margin-left:0;}
.qa_head .qa_date + .btn_act {order:2; margin-left:auto;}
.qa_reply {gap:1.2rem;}
.qa_reply_ico {margin-top:2rem;}
.qa_text {word-break:break-all;}
.doc_file {flex-wrap:wrap; gap:.8rem 1.6rem; padding:1.2rem 1.6rem;} /* MO: 파일명 한 줄·액션 줄바꿈, 세로 간격/버튼 간격/패딩 조정 (U-QP-02-13) */
.doc_filename {flex:1 1 100%;}
.doc_fileinfo {display:block;} /* MO: 파일 형식·용량[]을 파일명 아래 줄로 */
.doc_filename_text {display:block; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;} /* MO: 파일명이 좁아지면 줄바꿈 대신 말줄임 (U-QP-02-13) */
.doc_file.type_plain:has(.ico_delete):not(.is_error) {flex-wrap:nowrap;} /* MO: 삭제 버튼형은 가로 유지(파일명 옆 삭제) (U-QP-02-13) */
.doc_file.type_plain:has(.ico_delete):not(.is_error) .doc_filename {flex:1 1 0;}
.doc_file.type_plain:has(.ico_delete) {padding:1.6rem;} /* MO: 삭제 버튼형 첨부 행은 상하 여백도 좌우와 동일하게 */
.qa_files .doc_file {flex-wrap:wrap; gap:.8rem 1.6rem;}
.infobox.type_action {flex-direction:column; align-items:stretch; gap:1.2rem;} /* MO: 세로 전환 */
.infobox.type_action:not(.type_center) .btn_group {justify-content:flex-end; gap:.8rem;} /* MO: 버튼 우측 정렬 */
.infobox.type_action:not(.type_center) .btn_group .btn_act {flex:0 0 auto; width:auto;} /* MO: 버튼 내용 폭 유지(전체폭 채우지 않음) */
/* 훈련과정 수강신청 절차 카드 — MO 세로 스택, 화살표 아래 방향 (U-QP-04-06-01) */
.apply_flow {flex-direction:column;}
.apply_flow_arrow {transform:rotate(90deg);}
.apply_no {margin-bottom:2.4rem;}
.card_head {flex-direction:column; gap:.8rem; margin-bottom:2.4rem;}
.card_date {margin-left:0; font-size:var(--fs-base);} /* MO: 세로 스택 시 우측 밀림 해제·좌측 정렬 + 서브텍스트 작게 */
.step_list {overflow-x:auto;}
.step_item {flex:1 0 auto; min-width:8.4rem;}
/* 자격증 신청 위저드 (U-QP-05-03) — 단계 라벨 숨김 · 약관 박스 세로 전환 */
.step_nav {margin-bottom:3.2rem;}
.step_nav_label {display:none;}
/* 라벨 숨김 상태에서는 원형 마커를 전체 폭 균등 배치 — apply_terms의 PC용 20% 슬롯 해제 */
.apply_terms .step_nav_item {flex:1 1 0;}
.apply_terms .step_nav_item:last-child {flex:0 0 auto;}
/* 회원가입(U-QP-01-02): MO는 후행 연결선 없이 원형 균등 배치 — PC 고정 슬롯 해제 */
.signup .step_nav_item {flex:1 1 0;}
.signup .step_nav_item:last-child {flex:0 0 auto;}
.signup .step_nav_item:last-child .step_nav_line {display:none;}
.apply_terms .content_title {margin-bottom:2.4rem;}
.apply_terms .section_title {margin-bottom:2.4rem;}
.apply_terms .section-body {gap:3.2rem;}
/* 발급 신청서 작성 (U-QP-05-05) — MO 간격·하위 라벨 크기 */
.apply_terms .apply_form > .form_group {gap:2.4rem;}
.apply_terms .apply_form .check_group + .check_group {margin-top:1.6rem;}
.apply_terms .apply_form .check_grid {row-gap:2.4rem;}
.apply_terms .apply_form .check_grid:not(.type_stack) {align-items:stretch;} /* MO 세로 나열에선 PC 세로 가운데 정렬이 가로 가운데로 작동해 직접입력 항목이 들여쓰기되므로 해제 */
.apply_terms .apply_form .subfield_row {margin-top:1.6rem;}
.apply_terms .apply_form .subfield_label {font-size:var(--fs-lg);}
.apply_terms .apply_form .check_etc {flex:none; gap:1.6rem;}
.agree_card {gap:3.2rem; padding:2.4rem;}
.agree_detail {padding:2rem;}
.agree_box {flex-direction:column; align-items:stretch; gap:1.6rem; padding:2rem;}
.agree_radios {flex-direction:column; align-items:flex-start; gap:1.2rem;}
/* 데이터 표(data_table) 모바일 카드형 전환 — HTML 무수정, CSS만. 골격은 전 표 공통, 라벨 글자만 표별 주입
   단 .type_scroll 표는 카드형으로 바꾸지 않고 표 형태 그대로 가로 스크롤한다 */
/* 탭 — MO에서는 비활성 탭의 회색 밑줄을 없애고 활성 탭만 표시한다 (전 탭 화면 공통) */
.tab_item {border-bottom:0;}
/* 스와이프형 탭 — 항목을 콘텐츠 폭으로 두고(균등분할 해제) 화면폭을 넘치면 가로 스크롤 (U-QP-06-01·06-06)
   ⚠ 분류가 적어 균등분할이 디자인인 탭(U-QP-06-03 자료/서식 등)은 래퍼를 씌우지 않으므로 그대로 유지된다 */
.tab_swipe > .tab,
.tab_swipe > .cate_filter {overflow-x:auto; -ms-overflow-style:none; scrollbar-width:none;}
/* 분류 필터는 기본이 줄바꿈이라 스와이프할 땐 한 줄로 편다 */
.tab_swipe > .cate_filter {flex-wrap:nowrap;}
.tab_swipe .cate_btn {flex-shrink:0;}
.tab_swipe > .tab::-webkit-scrollbar,
.tab_swipe > .cate_filter::-webkit-scrollbar {display:none;}
/* 안내 버튼이 마지막 탭을 덮으므로, 스와이프 중일 땐 버튼 폭만큼 여백을 둬 끝까지 밀면 다 보이게 한다 */
.tab_swipe.is_swipe > .tab,
.tab_swipe.is_swipe > .cate_filter {padding-right:6.4rem;}
.tab_swipe .tab_item {flex:0 0 auto; min-width:6.4rem; height:4.8rem; font-size:var(--fs-lg);}
.tab_swipe .tab_item.is_active {border-bottom:3px solid var(--color-secondary);}
/* 스와이프 안내 — 넘칠 때만 .is_swipe 부여(script.js), 끝까지 밀면 .is_end 로 감춤 */
.tab_swipe.is_swipe .tab_swipe_next {display:flex; position:absolute; right:0; top:0; bottom:0; align-items:center; justify-content:flex-end; width:6.4rem; padding:0 .8rem 0 0; border:0; background:linear-gradient(to right, rgba(255,255,255,.25) 0, rgba(255,255,255,.25) .65rem, var(--color-white) 2.4rem); cursor:pointer;}
.tab_swipe.is_swipe.is_end .tab_swipe_next {display:none;}
/* 되돌아가기 — 오른쪽으로 민 상태에서만 노출(맨 앞이면 .is_start). 잘린 탭을 흰 그라디언트로 덮는다 */
.tab_swipe.is_swipe:not(.is_start) .tab_swipe_prev {display:flex; position:absolute; left:0; top:0; bottom:0; align-items:center; justify-content:flex-start; width:6.4rem; padding:0 0 0 .8rem; border:0; background:linear-gradient(to left, rgba(255,255,255,.25) 0, rgba(255,255,255,.25) .65rem, var(--color-white) 2.4rem); cursor:pointer;}
.tab_swipe_prev::before,
.tab_swipe_next::before {content:""; flex-shrink:0; width:3.2rem; height:3.2rem; border:1px solid var(--color-gray-light); border-radius:50%; background:var(--color-white) url(../images/icon/ico_arrow_right.svg) no-repeat 50% / 1.92rem;}
.tab_swipe_prev::before {transform:rotate(180deg);}
.data_table:not(.type_scroll) {display:block; width:100%; min-width:0; border-top:1px solid var(--color-text-title);}
.data_table:not(.type_scroll) thead {position:absolute; overflow:hidden; clip:rect(0,0,0,0); width:1px; height:1px;}
.data_table:not(.type_scroll) tbody {display:block;}
.data_table:not(.type_scroll) tr {display:block; padding:2rem .4rem; border-bottom:1px solid var(--color-gray-light);}
.data_table:not(.type_scroll) td {display:block; padding:.8rem 0; border:0; font-size:var(--fs-base); overflow:hidden; text-align:right; word-break:keep-all;}
.data_table:not(.type_scroll) td.align_left {text-align:right;}
.data_table:not(.type_scroll) td::before {float:left; min-width:10rem; padding-right:2.4rem; font-weight:700; text-align:left; color:var(--color-text-title);}
/* 카드형에서는 라벨과 버튼이 같은 줄에 놓이므로 표에서 줄였던 줄높이를 되살린다 */
.data_table:not(.type_scroll) td:has(> .btn_act) {line-height:var(--lh-base);}
/* 행 제목 셀(th scope="row")도 카드형에서는 값 줄로 전환 */
.data_table:not(.type_scroll) tbody th {display:block; padding:.8rem 0; border:0; font-size:var(--fs-base); overflow:hidden; text-align:right; word-break:keep-all;}
.data_table:not(.type_scroll) tbody th::before {float:left; min-width:10rem; padding-right:2.4rem; font-weight:700; text-align:left; color:var(--color-text-title);}
/* 행 상하 여백은 tr 이 잡는다 — 첫·마지막 셀 자체 여백을 없애 tr padding 값 그대로 유지 */
.data_table:not(.type_scroll) tr > :first-child {padding-top:0;}
.data_table:not(.type_scroll) tr > :last-child {padding-bottom:0;}
/* 가로 스크롤 표 — 열 구성을 유지하려면 최소 폭이 필요하고, 넘치는 만큼 .table_wrap이 스크롤한다 */
.data_table.type_scroll {min-width:68rem;}
.data_table.type_scroll th,
.data_table.type_scroll td {padding:1.6rem .8rem; font-size:var(--fs-base);}
/* 표 빈 상태 행 — 카드형에서도 가운데 정렬하고, 아래 표별 라벨(td::before) 주입 대상에서 뺀다 */
.data_table:not(.type_scroll) td.is_empty {padding:1.6rem 0; text-align:center;}
.data_table:not(.type_scroll) tbody td.is_empty:first-child::before {content:none;}
/* 표별 라벨 : 1:1 문의 내역(U-QP-02-19) */
  .table_wrap[aria-label="1:1 문의 내역 표"] .data_table td:nth-child(1)::before {content:"번호";}
  .table_wrap[aria-label="1:1 문의 내역 표"] .data_table td:nth-child(2)::before {content:"문의 구분";}
  .table_wrap[aria-label="1:1 문의 내역 표"] .data_table td:nth-child(3)::before {content:"문의 분류";}
  .table_wrap[aria-label="1:1 문의 내역 표"] .data_table td:nth-child(4)::before {content:"문의 번호";}
  .table_wrap[aria-label="1:1 문의 내역 표"] .data_table td:nth-child(5)::before {content:"문의 내용";}
  .table_wrap[aria-label="1:1 문의 내역 표"] .data_table td:nth-child(6)::before {content:"문의일";}
  .table_wrap[aria-label="1:1 문의 내역 표"] .data_table td:nth-child(7)::before {content:"답변일";}
  .table_wrap[aria-label="1:1 문의 내역 표"] .data_table td:nth-child(8)::before {content:"처리 상태";}
  /* 표별 라벨 : 자격신청내역(U-QP-02-12) */
  .table_wrap[aria-label="자격신청내역 표"] .data_table td:nth-child(1)::before {content:"번호";}
  .table_wrap[aria-label="자격신청내역 표"] .data_table td:nth-child(2)::before {content:"구분";}
  .table_wrap[aria-label="자격신청내역 표"] .data_table td:nth-child(3)::before {content:"신청번호";}
  .table_wrap[aria-label="자격신청내역 표"] .data_table td:nth-child(4)::before {content:"신청일";}
  .table_wrap[aria-label="자격신청내역 표"] .data_table td:nth-child(5)::before {content:"발급일";}
  .table_wrap[aria-label="자격신청내역 표"] .data_table td:nth-child(6)::before {content:"처리상태";}
  .table_wrap[aria-label="자격신청내역 표"] .data_table td:nth-child(7)::before {content:"처리일자";}
  .table_wrap[aria-label="자격신청내역 표"] .data_table td:nth-child(8)::before {content:"담당자";}
  .table_wrap[aria-label="자격신청이력 표"] .data_table td:nth-child(1)::before {content:"번호";}
  .table_wrap[aria-label="자격신청이력 표"] .data_table td:nth-child(2)::before {content:"교육 과정";}
  .table_wrap[aria-label="자격신청이력 표"] .data_table td:nth-child(3)::before {content:"교육기관";}
  .table_wrap[aria-label="자격신청이력 표"] .data_table td:nth-child(4)::before {content:"신청일";}
  .table_wrap[aria-label="자격신청이력 표"] .data_table td:nth-child(5)::before {content:"담당자";}
  .table_wrap[aria-label="자격신청이력 표"] .data_table td:nth-child(6)::before {content:"처리 상태";}
  .table_wrap[aria-label="1:1 문의 내역조회 표"] .data_table td:nth-child(1)::before {content:"번호";}
  .table_wrap[aria-label="1:1 문의 내역조회 표"] .data_table td:nth-child(2)::before {content:"문의 내용";}
  .table_wrap[aria-label="1:1 문의 내역조회 표"] .data_table td:nth-child(3)::before {content:"등록일";}
  .table_wrap[aria-label="1:1 문의 내역조회 표"] .data_table td:nth-child(4)::before {content:"답변일";}
  .table_wrap[aria-label="1:1 문의 내역조회 표"] .data_table td:nth-child(5)::before {content:"답변자";}
  /* 표별 라벨 : 공지사항(U-QP-06-01) */
  .table_wrap[aria-label="공지사항 표"] .data_table td:nth-child(1)::before {content:"번호";}
  .table_wrap[aria-label="공지사항 표"] .data_table td:nth-child(2)::before {content:"구분";}
  .table_wrap[aria-label="공지사항 표"] .data_table td:nth-child(3)::before {content:"제목";}
  .table_wrap[aria-label="공지사항 표"] .data_table td:nth-child(4)::before {content:"등록일";}
  .table_wrap[aria-label="공지사항 표"] .data_table td:nth-child(5)::before {content:"첨부";}
  .table_wrap[aria-label="공지사항 표"] .data_table td:nth-child(6)::before {content:"조회수";}
  .table_wrap[aria-label="자료실 표"] .data_table td:nth-child(1)::before {content:"번호";}
  .table_wrap[aria-label="자료실 표"] .data_table td:nth-child(2)::before {content:"구분";}
  .table_wrap[aria-label="자료실 표"] .data_table td:nth-child(3)::before {content:"제목";}
  .table_wrap[aria-label="자료실 표"] .data_table td:nth-child(4)::before {content:"등록일";}
  .table_wrap[aria-label="자료실 표"] .data_table td:nth-child(5)::before {content:"첨부";}
  .table_wrap[aria-label="자료실 표"] .data_table td:nth-child(6)::before {content:"작성자";}
  .table_wrap[aria-label="자료실 표"] .data_table td:nth-child(7)::before {content:"조회수";}
  /* 표별 라벨 : 모집공고(U-QP-03-02) */
  .table_wrap[aria-label="모집공고 표"] .data_table td:nth-child(1)::before {content:"순번";}
  .table_wrap[aria-label="모집공고 표"] .data_table td:nth-child(2)::before {content:"지역";}
  .table_wrap[aria-label="모집공고 표"] .data_table td:nth-child(3)::before {content:"공고명";}
  .table_wrap[aria-label="모집공고 표"] .data_table td:nth-child(4)::before {content:"교육과정명";}
  .table_wrap[aria-label="모집공고 표"] .data_table td:nth-child(5)::before {content:"교육기관";}
  .table_wrap[aria-label="모집공고 표"] .data_table td:nth-child(6)::before {content:"교육 기간";}
  .table_wrap[aria-label="모집공고 표"] .data_table td:nth-child(7)::before {content:"상세 구분";}
  .table_wrap[aria-label="모집공고 표"] .data_table td:nth-child(8)::before {content:"모집 기간";}
  .table_wrap[aria-label="모집공고 표"] .data_table td:nth-child(9)::before {content:"교육 비용";}
  .table_wrap[aria-label="모집공고 표"] .data_table td:nth-child(10)::before {content:"교육 장소";}
  .table_wrap[aria-label="모집공고 표"] .data_table td:nth-child(11)::before {content:"모집 인원";}
  .table_wrap[aria-label="모집공고 표"] .data_table td:nth-child(12)::before {content:"공고 상태";}
  /* 표별 라벨 : 훈련강사(U-QP-03-03) */
  .table_wrap[aria-label="교육강사 표"] .data_table td:nth-child(1)::before {content:"번호";}
  .table_wrap[aria-label="교육강사 표"] .data_table td:nth-child(2)::before {content:"강사명";}
  .table_wrap[aria-label="교육강사 표"] .data_table td:nth-child(3)::before {content:"강사전공";}
  .table_wrap[aria-label="교육강사 표"] .data_table td:nth-child(4)::before {content:"강사자격";}
  /* 표별 라벨 : 종사자(U-QP-03-03) */
  .table_wrap[aria-label="종사자 표"] .data_table td:nth-child(1)::before {content:"번호";}
  .table_wrap[aria-label="종사자 표"] .data_table td:nth-child(2)::before {content:"기관명";}
  .table_wrap[aria-label="종사자 표"] .data_table td:nth-child(3)::before {content:"강사명";}
  .table_wrap[aria-label="종사자 표"] .data_table td:nth-child(4)::before {content:"주소";}
  /* 표별 라벨 : 실습기간(U-QP-03-03) */
  .table_wrap[aria-label="실습기간 표"] .data_table td:nth-child(1)::before {content:"번호";}
  .table_wrap[aria-label="실습기간 표"] .data_table td:nth-child(2)::before {content:"시설 구분";}
  .table_wrap[aria-label="실습기간 표"] .data_table td:nth-child(3)::before {content:"시설명";}
  .table_wrap[aria-label="실습기간 표"] .data_table td:nth-child(4)::before {content:"주소";}
  /* 표별 라벨 : 강의실(U-QP-03-03) */
  .table_wrap[aria-label="강의실 표"] .data_table td:nth-child(1)::before {content:"번호";}
  .table_wrap[aria-label="강의실 표"] .data_table td:nth-child(2)::before {content:"시설 종류";}
  .table_wrap[aria-label="강의실 표"] .data_table td:nth-child(3)::before {content:"시설명";}
  .table_wrap[aria-label="강의실 표"] .data_table td:nth-child(4)::before {content:"시설 면적";}
  .table_wrap[aria-label="강의실 표"] .data_table td:nth-child(5)::before {content:"1인당 확보 면적";}
  .table_wrap[aria-label="강의실 표"] .data_table td:nth-child(6)::before {content:"등록일자";}
  /* 표별 라벨 : 교육기관 목록(U-QP-04-01) */
  .table_wrap[aria-label="교육기관 표"] .data_table td:nth-child(1)::before {content:"번호";}
  .table_wrap[aria-label="교육기관 표"] .data_table td:nth-child(2)::before {content:"지역";}
  .table_wrap[aria-label="교육기관 표"] .data_table td:nth-child(3)::before {content:"기관명";}
  .table_wrap[aria-label="교육기관 표"] .data_table td:nth-child(4)::before {content:"소재지";}
  .table_wrap[aria-label="교육기관 표"] .data_table td:nth-child(5)::before {content:"분류";}
  .table_wrap[aria-label="교육기관 표"] .data_table td:nth-child(6)::before {content:"대표 번호";}
  .table_wrap[aria-label="교육기관 표"] .data_table td:nth-child(7)::before {content:"이메일 주소";}
  /* 표별 라벨 : 실습기관(U-QP-04-02) */
  .table_wrap[aria-label="실습기관 표"] .data_table td:nth-child(1)::before {content:"번호";}
  .table_wrap[aria-label="실습기관 표"] .data_table td:nth-child(2)::before {content:"시설구분";}
  .table_wrap[aria-label="실습기관 표"] .data_table td:nth-child(3)::before {content:"시설명";}
  .table_wrap[aria-label="실습기관 표"] .data_table td:nth-child(4)::before {content:"주소";}
  /* 표별 라벨 : 교육기관 강의실(U-QP-04-02) — 4열이 시설인력(모집공고 강의실 표와 상이) */
  .table_wrap[aria-label="교육기관 강의실 표"] .data_table td:nth-child(1)::before {content:"번호";}
  .table_wrap[aria-label="교육기관 강의실 표"] .data_table td:nth-child(2)::before {content:"시설 종류";}
  .table_wrap[aria-label="교육기관 강의실 표"] .data_table td:nth-child(3)::before {content:"시설명";}
  .table_wrap[aria-label="교육기관 강의실 표"] .data_table td:nth-child(4)::before {content:"시설 인력";}
  .table_wrap[aria-label="교육기관 강의실 표"] .data_table td:nth-child(5)::before {content:"1인당 확보 면적";}
  /* 표별 라벨 : 교육신청내역(U-QP-02-18) */
  .table_wrap[aria-label="교육신청내역 표"] .data_table td:nth-child(1)::before {content:"번호";}
  .table_wrap[aria-label="교육신청내역 표"] .data_table td:nth-child(2)::before {content:"신청번호";}
  .table_wrap[aria-label="교육신청내역 표"] .data_table td:nth-child(3)::before {content:"교육과정";}
  .table_wrap[aria-label="교육신청내역 표"] .data_table td:nth-child(4)::before {content:"교육기관";}
  .table_wrap[aria-label="교육신청내역 표"] .data_table td:nth-child(5)::before {content:"신청일";}
  .table_wrap[aria-label="교육신청내역 표"] .data_table td:nth-child(6)::before {content:"수료일";}
  .table_wrap[aria-label="교육신청내역 표"] .data_table td:nth-child(7)::before {content:"처리상태";}
  /* 표별 라벨 : 실습차수별 상세내역(U-QP-02-18-01) — 첫 칸이 행 제목 셀이라 th에도 라벨을 준다 */
  .table_wrap[aria-label="실습차수별 상세내역 표"] .data_table tbody th::before {content:"실습차수";}
  .table_wrap[aria-label="실습차수별 상세내역 표"] .data_table td:nth-child(2)::before {content:"실습기간";}
  .table_wrap[aria-label="실습차수별 상세내역 표"] .data_table td:nth-child(3)::before {content:"실습기관";}
  .table_wrap[aria-label="실습차수별 상세내역 표"] .data_table td:nth-child(4)::before {content:"실습평가 총점수";}
  .table_wrap[aria-label="실습차수별 상세내역 표"] .data_table td:nth-child(5)::before {content:"실습결과";}
/* 게시판 제목 셀 — 모바일 카드형: 좌측 라벨(제목) float 옆, 배지+제목을 우측 끝에 정렬(다른 값들과 동일).
   .board_subject는 flex(독립 포매팅 컨텍스트)라 float 옆 남는 폭만 차지, justify-content:flex-end로 우측 붙임.
   .board_link는 내용폭(flex:0 1 auto)이라 짧으면 우측에 붙고, 길면 남는 폭에 맞춰 말줄임(…) — 앞부분이 보이도록 내부 텍스트는 좌측 정렬 */
.board_subject {overflow:hidden; justify-content:flex-end; text-align:left;}
.board_link {flex:0 1 auto;}
/* 게시판 상세 — 모바일: 제목영역(배지 위·제목 아래) 세로 정렬, 메타정보 세로 스택(구분선 숨김·라벨 폭 정렬), 이전다음글 라벨 칸 축소 */
.board_view {gap:3.2rem;}
.board_view_title {flex-direction:column; align-items:flex-start; gap:.8rem;}
.board_view_subject {font-size:var(--fs-h2);}
.board_view_meta {flex-direction:column; align-items:flex-start; gap:.8rem; margin-top:1.2rem;}
.board_view_meta_item {gap:1.2rem;}
.board_view_meta_item + .board_view_meta_item {margin-left:0; padding-left:0;}
.board_view_meta_item + .board_view_meta_item::before {display:none;}
.board_view_meta_label {min-width:5.6rem;}
.board_view_img {max-width:100%;}
.board_nav_link.type_stack {flex-direction:column; align-items:flex-start; gap:.8rem;}
.board_nav_col_th {width:7.7rem;}
/* 마이페이지 나의현황 — 모바일 세로 전환 */
.mypage_top {flex-direction:column;}
.cert_card {width:100%;}
.status_card_head {flex-direction:column; align-items:flex-start; gap:.8rem;}
.status_card {padding:2.4rem;} /* MO: 패딩 축소(PC 대비) */
.mypage_top.type_even .status_card {height:auto;} /* MO: 세로 전환 시 PC 고정 높이(215px) 해제 — 내용 높이에 맞춤 */
.edu_grid {flex-direction:column;}
/* 출결 현황 — 요약 카드 2열, 아이콘 없이 텍스트만 (U-QP-02-18-01) */
.attend_summary + .section-header {margin-top:4.8rem;}
.stat_list {flex-wrap:wrap; gap:1.6rem;}
.stat_card {flex:1 1 calc(50% - .8rem);}
.stat_card_ico {display:none;}
.stat_card_title {padding-right:0;}
/* 카드 폭이 좁아 보조 텍스트는 줄바꿈시키되 각 항목 안에서는 끊지 않는다 */
.stat_card_sub {flex-wrap:wrap; gap:0 .8rem; white-space:normal;}
.stat_card_sub_now,
.stat_card_sub_total {white-space:nowrap;}
.content_title {margin-bottom:3.2rem;}
.section_title {margin-bottom:2rem;}
.subsection_title {margin-bottom:2rem;}
.section_title.type_step,
.subsection_title.type_step {margin-bottom:2.4rem;}
.section-body {gap:2.4rem;}
.section + .section {margin-top:4rem;}
.infobox {padding:2.4rem;}
.card {padding:2.4rem;}
.result {gap:2.4rem; padding:4.8rem 2.4rem 2.4rem;}
.result.type_check {padding:4.8rem 2.4rem 2.4rem;} /* PC 스코프 규칙이 MO까지 덮지 않도록 MO 값 유지 */
/* 진위확인 결과 카드 (U-QP-07-02) — MO는 아이콘↔문구가 붙고 여백도 좁다 */
.result.type_verify {padding:2.4rem;}
.result.type_verify .result_main {gap:1.6rem;}
.result_status {flex-wrap:wrap; justify-content:flex-start;}
.result_status_date {flex:1 1 100%; text-align:left;}
.result_status_label {display:block; margin-right:0;} /* MO: 라벨을 줄바꿈해 일시를 다음 줄로 */
.field_textarea.type_guide {font-size:var(--fs-base);} /* 안내형 문의 textarea (U-QP-02-21) — MO 기본 글자 크기로 복귀 */
.field_editor .toastui-editor-ww-container .toastui-editor-contents {font-size:var(--fs-base);} /* 위지윅 에디터 (U-QP-02-21) — MO 기본 글자 크기로 복귀 */
.btn_area {gap:1.2rem; padding-top:2.4rem;}
.btn_area button {flex:1 1 0;}
.btn_area.type_stack {flex-direction:column; gap:1.6rem;}
.btn_area.type_stack > button {flex:0 0 auto; width:100%;}
.btn_area + .infobox.type_note {margin-top:3.2rem;}
.checklist_row {flex-direction:column; align-items:stretch; gap:1.2rem;}
.checklist_answer {flex-direction:column; align-items:flex-start; gap:.8rem;}
.checklist_item .text_list.type_2col {columns:1;}
/* MO: 질문 글자 단위 줄바꿈(줄을 꽉 채움) — 전역 keep-all 해제 */
.checklist_question {word-break:break-all;}
.info_list {gap:2.4rem;}
.info_row {flex-direction:column; align-items:stretch; gap:2.4rem;}
.info_col.is_half {flex:1 1 0;} /* MO 세로 스택: 단독 칼럼 절반 폭 해제 */
.info_control {gap:1rem;}
.info_control.is_full .btn_act {flex:1 1 0;}
.info_control.is_wrap {flex-wrap:wrap;}
.info_control.is_wrap .info_value {flex:1 1 100%;}
.info_control.is_wrap .btn_act {flex:1 1 0;}
.info_control.is_stack {flex-direction:column;}
.info_control.is_stack .info_value,
.info_control.is_stack .info_value.is_fixed {flex:0 0 auto; width:100%;}
.info_addr {flex-wrap:wrap;}
.info_addr .info_value.is_fixed {flex:1 1 0;}
.info_addr .info_addr_btn {order:1;}
.info_addr .info_addr_road {order:2; flex:1 1 100%;}
.info_addr .info_addr_detail {order:3; flex:1 1 100%;}
.section-header.type_tile {flex-direction:column; align-items:flex-start; gap:1.6rem;}
.section-header.type_tile:has(.section_meta) {gap:.4rem;} /* MO: 제목+메타 텍스트 조합은 간격 좁게 (U-QP-02-13) */
.section_meta {font-size:var(--fs-base);} /* MO: 메타 텍스트 작게 (U-QP-02-13) */
.section-header.type_tile .section_title,
.section-header.type_tile .section_receipt {flex:0 0 auto; width:100%;}
.section-header.type_tile .btn_group {width:100%; flex-wrap:wrap;}
.section-header.type_tile .btn_group button {flex:0 1 auto;}
/* 더보기 등 짧은 인라인 액션은 모바일에서도 제목과 한 줄 유지 */
.section-header.type_tile.type_inline {flex-direction:row; align-items:center; gap:1.2rem;}
.section-header.type_tile.type_inline .section_title {flex:1 1 auto; width:auto;}
.section-header.type_tile.type_inline .btn_group {width:auto; flex-shrink:0;} /* MO: 한 줄 유지 — 버튼 그룹 내용폭(제목이 밀려 줄바꿈되지 않도록) */
.btn_area.type_between {flex-direction:column; gap:1.2rem;}
.btn_area.type_between > button {flex:0 0 auto;}
/* 취소는 내용 폭을 유지하고 주 동작 버튼이 남은 폭을 채운다 */
.btn_area.type_split {gap:1.6rem;}
.btn_area.type_split > button {flex:0 0 auto;}
.btn_area.type_split > button:last-child {flex:1 1 0; min-width:0;}
/* type_trio — 모바일에서 3개 버튼(취소 / 목록 / 등록) 한 줄 균등 배치 */
.btn_area.type_between.type_trio {flex-direction:row; gap:.8rem; padding-top:0;}
.btn_area.type_between.type_trio > .btn_group {flex:1 1 0; width:auto; gap:.8rem;}
.btn_area.type_between.type_trio > .btn_group:last-child {flex:2 1 0;}
.btn_area.type_between.type_trio button {min-width:0;}
.btn_group {width:100%;}
.btn_group button {flex:1 1 0;}
.btn_area .btn_group {gap:.8rem;} /* MO: 그룹 내 버튼 간격은 기존 유지 */
.section + .tab {margin-top:3.2rem;}
.tab_panel.is_active {margin-top:2.4rem;}
.info_table,
.info_table tbody,
.info_table tr,
.info_table th,
.info_table td {display:block; width:100%; height:auto;}
.info_table th {text-align:left; padding:2rem 0 .8rem; border-bottom:0; background:none;} /* MO: 라벨 회색배경 제거·가로여백 제거, 값 위로 세로 배치 (U-QP-02-13) */
.info_table td {padding:0 0 2rem; border-top:0;}
.detail_box {padding:2.4rem;}
.detail_box + .section-header {margin-top:4rem;} /* MO: 카드↔다음 섹션 제목 간격 축소 (U-QP-02-18-01) */
.detail_list {gap:1.6rem;}
.detail_row {flex-direction:column; gap:1.6rem;}
.detail_item {min-height:auto; flex-direction:column; align-items:flex-start; gap:.8rem;} /* MO: 라벨/값 세로 정렬, 간격은 overview(U-QP-05-01) 기준 (U-QP-02-13) */
.detail_row.type_top .detail_label {padding-top:0;} /* MO: 세로 스택이라 라벨 상단 인셋 불필요 (U-QP-02-18-01) */
.detail_box.type_verify .detail_list {gap:1.6rem;} /* MO: 행이 세로로 풀리므로 항목 간격과 같게 맞춘다 (U-QP-07-02) */
.detail_box.type_wide .detail_list {gap:1.6rem;} /* MO: type_verify 와 같은 이유로 PC 의 gap:0 을 되돌린다 (U-QP-02-16-01) */
.detail_box.type_wide .detail_item {padding:0;} /* MO: 세로 스택이라 두 줄 높이 보정이 필요 없다 (U-QP-02-16-01) */
.detail_box.type_wide .detail_label,
.detail_box.type_wide .detail_value {line-height:var(--lh-base);} /* MO: 두 줄 높이 보정용 line-height 도 되돌린다 */
.doc_attach {gap:2.4rem;}
.signer_sign {width:auto;}
.search_box {padding:2.4rem;}
.search_row {flex-direction:column; align-items:stretch; gap:1.2rem;}
.search_row .form_field,
.search_row .form_field.is_flex,
.search_row .search_keyword {flex:0 0 auto; width:100%;}
/* 라벨형 검색 필터 — MO 세로 스택(라벨 위·컨트롤 아래) (U-QP-03-02) */
.filter_row {flex-direction:column; gap:1.2rem;}
.filter_field {flex-direction:column; align-items:stretch; gap:.8rem;}
/* 세로 방향에선 flex:1이 컨트롤 높이를 줄이므로 해제 */
.filter_field > .field_box,
.filter_field > .field_daterange {flex:0 0 auto;}
/* 날짜범위 — MO 에서도 PC 와 같이 한 줄(시작일 ~ 종료일)로 두고, 묶음만 전체 폭을 채운다 */
.field_daterange {width:100%;}
.filter_label {width:auto;}
.search_actions .search_btn {flex:1 1 0; min-width:0; width:auto;}
.field_w120,
.field_w140,
.field_w180,
.field_w200,
.field_w260 {width:100%;}
/* 휴대폰번호 — MO 세로 스택 (U-QP-04-06-02) — 세로 방향에선 flex:1이 높이를 줄이므로 flex 해제·전체폭 */
.field_phone {flex-direction:column; max-width:none;}
.field_phone > .field_box {flex:0 0 auto; width:100%;}
.search_btn {width:100%;}
.faq_q {padding-right:0; padding-left:0;}
.faq_a {margin-right:0; margin-left:0;}
.list_tools {flex-wrap:wrap; gap:.8rem; margin-bottom:2.4rem;}
.list_tools .field_box.size_sm {height:4.8rem;}
.list_tools .field_box.size_sm > select {font-size:var(--fs-lg);} /* 높이를 48로 키운 만큼 글자도 48 기준으로 맞춘다 */
.list_total {flex:1 1 100%;}
.board_foot {flex-direction:column; gap:1.6rem;}
.board_foot .pagination {flex:0 0 auto;}
.board_foot .btn_register {width:100%;}
/* 시간표 — MO: 요일 배지는 콘텐츠폭으로(빈 열 제거)·간격 축소 (U-QP-03-03) */
.schedule_item {gap:.8rem;}
.schedule_col_day {flex:0 0 auto;}
/* 시간 값은 마크업의 br_mo 로 끊는다 — "09:50분~17:30분"처럼 공백 없는 덩어리는
   word-break:keep-all 탓에 스스로 줄바꿈되지 못하고 상세보기 버튼 위로 넘친다.
   overflow-wrap 은 더 좁은 화면에서도 겹치지 않게 하는 안전망 */
.schedule_time {overflow-wrap:anywhere;}
/* 교육안내 — MO: 강사·교과목 세로 스택 (U-QP-03-03) */
.edu_guide {flex-direction:column;}
.edu_teacher {width:100%;}
/* MO: 이중화살표(처음·마지막)·말줄임·먼 번호 숨김 + 비활성 단일화살표(이전·다음)도 숨김 → 근접 번호(1~5)와 활성 이전/다음만 노출 */
.pagination .page_first,
.pagination .page_last,
.pagination .page_ellipsis,
.pagination .page_num_far,
.pagination .page_prev.is_disabled,
.pagination .page_next.is_disabled {display:none;}
.popup {padding:2.8rem;}
.popup_body {gap:2.4rem;}
.popup_title {font-size:2.2rem;}
.popup_foot {gap:1.6rem;}
.popup_foot button {flex:1 1 0;}
.popup_foot.type_compact {justify-content:flex-end;} /* MO: 하단 버튼 우측 정렬·콘텐츠 폭·작게 (U-QP-02-13) */
.popup_foot.type_compact button {flex:0 0 auto; min-width:7.8rem; height:4.8rem; padding:0 1.6rem; border-radius:var(--radius-md); font-size:var(--fs-lg);}
/* 메인 공지사항 팝업 — MO: 여백 축소, 본문 17 */
.popup.type_notice .popup_head {padding:2.8rem 2.8rem 2rem;}
.popup.type_notice .popup_body {padding:2.8rem;}
.popup.type_notice .popup_foot {padding:0 2.8rem 2.8rem;}
.popup.type_notice .popup_foot button {flex:0 0 auto;}
.popup.type_notice .opt_tit {font-size:var(--fs-lg);}
.notice_pop_body {gap:1.6rem;}
.notice_pop_body p {font-size:var(--fs-lg);}
/* 주소 검색 결과 팝업 (U-QP-01-05) — 검색행·결과행 세로 적층 */
.addr_search_row {flex-direction:column; align-items:stretch;}
.addr_search_row .field_box {flex:none; width:100%;}
.addr_search_row .search_btn {width:100%;}
.addr_item {flex-direction:column; gap:1.2rem;}
/* 로그인 (U-QP-01-08) — 1열 적층 */
.login {gap:2.4rem;}
.login_body {flex-direction:column; gap:2.4rem;}
.login_form {gap:3.2rem; width:100%; padding:2.4rem;}
.login_fields {gap:3.2rem;}
.login_submit {height:6.4rem;}
.login_links_find {gap:3.2rem;} /* MO: divider 양쪽 각 16px = 디자인 */
.login_links_find a + a::before {left:-1.6rem;}
.login_notice {padding:2.4rem;}
/* 비밀번호 찾기 (U-QP-01-11) */
.pwfind_card {gap:3.2rem; padding:2.4rem;}
.pwfind .btn_area {padding-top:3.2rem;}
.pwfind_title .for_pc {display:none;}
.pwfind_title .for_mo {display:inline;}
/* 비밀번호 재설정 (U-QP-01-12) */
.pwreset {gap:3.2rem;}
.pwreset .pwfind_card {gap:4rem;}
.pwreset .btn_area {padding-top:3.2rem;}
.pwreset .btn_area.type_between {gap:1.6rem;}
/* 아이디 찾기 완료 (U-QP-01-10) */
.idfind_result {padding:2.4rem;}
.idfind_login {width:100%; height:6.4rem;}
/* 로그인방식 선택 (U-QP-01-07) */
.login_select {gap:2.4rem;}
.login_methods {grid-template-columns:1fr;}
.login_method {min-height:0; gap:.8rem; padding:2rem;}
.login_method_top {flex-direction:column; align-items:flex-start; gap:2.4rem;}
.login_method_head {width:100%;}
.login_method_ico {width:3.2rem; height:3.2rem;}
.login_method_arrow {width:2.4rem; height:2.4rem;}
/* 서비스 상세 안내 (U-QP-05-01_01) — 탭 숨김 · 개요/스텝 1열 */
.content-header.type_tile {flex-direction:column; align-items:stretch; gap:1.6rem; margin-bottom:2.4rem;}
/* MO: 제목 → 민원 박스 → 신청하기 버튼 순(버튼을 박스 아래로), 항목 간격 20 */
.content-header.type_tile.has_detail {gap:2rem; margin-bottom:3.2rem;}
.content-header.type_tile.has_detail .lead_box {flex:0 1 auto; order:1;}
.content-header.type_tile.has_detail .btn_fill {order:2; margin-top:1.2rem;}/* 박스↔버튼 간격 확보 */
.content-header.type_tile .btn_fill {width:100%;}
.anchor_tab {display:none;}
.lead_box {padding:2rem;}
.overview_box {padding:2.4rem;}
.overview_row {flex-direction:column; gap:.8rem;}
.overview_label {width:auto;}
.step_flow {width:100%; padding:2.4rem;}
/* 발급 유형 선택 (U-QP-05-02) — 스텝 라벨 숨김(SR 유지) · 카드 1열 */
.step_indicator {margin-bottom:3.2rem;}
.card .step_indicator {padding:0;} /* MO: PC 좌우 인셋 해제 */
.status_card .step_indicator {padding-left:0;} /* MO: PC 좌측 인셋 해제 */
.step_indicator_item:last-child {flex:0 0 auto;}
.step_indicator_label {position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0,0,0,0);}
.edu_card .step_indicator_label {position:static; width:auto; height:auto; margin:0; padding-right:0; overflow:visible; clip:auto;} /* 교육 이수현황 카드는 MO에서도 단계 이름 노출 */
/* 진행 현황 카드(U-QP-02-01_01) — MO는 현재 단계 이름만 원 아래에 노출. 폭 0으로 두어 단계 간격은 그대로 유지 */
.status_card .step_indicator_item.is_current .step_indicator_label {position:static; width:0; height:auto; margin:0; padding:0; overflow:visible; clip:auto; white-space:nowrap;}
.status_card .step_indicator_item.is_current:last-child .step_indicator_label {width:12rem; margin-left:calc(2.4rem - 12rem); text-align:right;} /* 마지막 단계는 원 우측 끝에 맞춰 왼쪽으로 흐르게 — 카드 밖으로 넘치지 않게(음수 여백으로 트랙 폭은 유지) */
/* 회원가입 완료(U-QP-01-06) — 모바일은 단계 균등 분할(라벨 숨김은 위 공통 규칙 적용) */
.signup .step_indicator_item {flex:1 1 0; width:auto;}
.signup .step_indicator_item:last-child {flex:0 0 auto;}
/* 약관동의 단계 — 제목·안내·약관 카드 간격을 이 화면 값으로 (U-QP-01-02) */
.signup.type_agree .section_title {margin-bottom:2.4rem;}
.signup.type_agree .section-body {gap:3.2rem;}
.signup.type_agree .agree {gap:1.6rem;}
/* 약관·정책 안내 페이지 (U-QP-08-01 · U-QP-08-01-01 · U-QP-08-02) — 섹션·요소 간격 축소 (PC 규칙이 특정도로 남지 않게 가드) */
.policy.type_tight .section + .section {margin-top:4rem;}
.policy .subsection {margin-top:2.4rem;}
.policy_ico {margin-bottom:2rem;}
.policy_desc {margin-top:2rem;}
.policy .section_title {margin-bottom:1.2rem;}
.policy .section_title + .policy_desc {margin-top:0;}
/* 처리방침 항목 인덱스 카드 — 1열 전환 (U-QP-08-02) */
.policy_index {gap:2.4rem 2rem; padding:2.5rem;}
/* MO는 2열 — 아이콘 위, 항목명 아래 가운데 정렬 */
.policy_index_item {flex-direction:column; gap:1.2rem; width:calc((100% - 2rem) / 2); text-align:center;}
/* 조문 안 소제목 — PC와 같은 간격 유지 */
.subsection_title.size_sm {margin-bottom:1.2rem;}
/* 도입부 안내 배너는 아이콘 위·안내문 아래로 세로 전환 */
.infobox.type_lead {flex-direction:column; align-items:flex-start; gap:2.4rem;}
/* 공공누리 유형 표 — 유형명(머리글)을 각 이미지 위에 회색 띠로 반복 노출 */
.data_table.type_kogl:not(.type_scroll) tr {padding:0; border-bottom:0;}
.data_table.type_kogl:not(.type_scroll) td {overflow:visible; padding:1.6rem; border-bottom:1px solid var(--color-gray-light); text-align:center;} /* 머리글 띠가 셀 폭 끝까지 닿도록 음수 여백을 허용 */
.data_table.type_kogl:not(.type_scroll) td::before {float:none; display:block; min-width:0; margin:-1.6rem -1.6rem 1.6rem; padding:1.6rem; border-bottom:1px solid var(--color-gray-light); background:var(--color-gray-subtler); text-align:center;}
.table_wrap[aria-label="공공누리마크 유형 표"] .data_table td:nth-child(1)::before {content:"제 1유형";}
.table_wrap[aria-label="공공누리마크 유형 표"] .data_table td:nth-child(2)::before {content:"제 2유형";}
.table_wrap[aria-label="공공누리마크 유형 표"] .data_table td:nth-child(3)::before {content:"제 3유형";}
.table_wrap[aria-label="공공누리마크 유형 표"] .data_table td:nth-child(4)::before {content:"제 4유형";}
.table_wrap[aria-label="공공저작물 실무 담당자 표"] .data_table td:nth-child(1)::before {content:"부서";}
.table_wrap[aria-label="공공저작물 실무 담당자 표"] .data_table td:nth-child(2)::before {content:"성명";}
.table_wrap[aria-label="공공저작물 실무 담당자 표"] .data_table td:nth-child(3)::before {content:"연락처";}
/* 값이 긴 문서형 표 — 카드형에서 라벨을 값 위 줄로 올리고 값은 좌측 정렬해 읽기 흐름을 지킨다 */
.data_table.type_stack:not(.type_scroll) td,
.data_table.type_stack:not(.type_scroll) td.align_left {text-align:left;}
.data_table.type_stack:not(.type_scroll) td::before {float:none; display:block; min-width:0; margin-bottom:.4rem; padding-right:0;}
/* PC에서 비워 둔 항목을 카드형에서는 한 줄로 노출 */
.data_table:not(.type_scroll) td.for_mo {display:block;}
/* 약관 카드 안 표 — 카드형 항목 사이 간격(행 그룹 상하 여백은 tr 이 잡는다) */
.agree_item .data_table:not(.type_scroll) td {padding:0 0 1.2rem;}
.agree_item .data_table:not(.type_scroll) tr > td:last-child {padding-bottom:0;}
/* 표별 라벨 : 회원가입 약관동의(U-QP-01-02) */
.table_wrap[aria-label="개인정보 수집 및 이용 표"] .data_table td:nth-child(1)::before {content:"개인정보 항목";}
.table_wrap[aria-label="개인정보 수집 및 이용 표"] .data_table td:nth-child(2)::before {content:"수집 목적";}
.table_wrap[aria-label="개인정보 수집 및 이용 표"] .data_table td:nth-child(3)::before {content:"보유기간";}
.table_wrap[aria-label="개인정보 수집 및 이용 표"] .data_table td:nth-child(4)::before {content:"처리 및 보유기간";}
.table_wrap[aria-label="고유식별정보 수집 및 이용 표"] .data_table td:nth-child(1)::before {content:"개인정보 항목";}
.table_wrap[aria-label="고유식별정보 수집 및 이용 표"] .data_table td:nth-child(2)::before {content:"수집 목적";}
.table_wrap[aria-label="고유식별정보 수집 및 이용 표"] .data_table td:nth-child(3)::before {content:"보유기간";}
/* 표별 라벨 : 자격증 발급 신청 약관동의(U-QP-05-04) */
.table_wrap[aria-label="자격 신청 개인정보 수집 및 이용 표"] .data_table td:nth-child(1)::before {content:"구분";}
.table_wrap[aria-label="자격 신청 개인정보 수집 및 이용 표"] .data_table td:nth-child(2)::before {content:"개인정보 항목";}
.table_wrap[aria-label="자격 신청 개인정보 수집 및 이용 표"] .data_table td:nth-child(3)::before {content:"수집 목적";}
.table_wrap[aria-label="자격 신청 개인정보 수집 및 이용 표"] .data_table td:nth-child(4)::before {content:"보유기간";}
.table_wrap[aria-label="자격 신청 고유식별정보 수집 및 이용 표"] .data_table td:nth-child(1)::before,
.table_wrap[aria-label="자격 신청 민감정보 수집 및 이용 표"] .data_table td:nth-child(1)::before {content:"개인정보 항목";}
.table_wrap[aria-label="자격 신청 고유식별정보 수집 및 이용 표"] .data_table td:nth-child(2)::before,
.table_wrap[aria-label="자격 신청 민감정보 수집 및 이용 표"] .data_table td:nth-child(2)::before {content:"수집 목적";}
.table_wrap[aria-label="자격 신청 고유식별정보 수집 및 이용 표"] .data_table td:nth-child(3)::before,
.table_wrap[aria-label="자격 신청 민감정보 수집 및 이용 표"] .data_table td:nth-child(3)::before,
.table_wrap[aria-label="자격 신청 민감정보 수집 및 이용 표"] .data_table td:nth-child(4)::before {content:"보유기간";}
/* 세로로 병합한 셀은 카드형에서 행마다 노출하는 for_mo 셀이 대신한다 */
.agree_item .data_table:not(.type_scroll) td[rowspan] {display:none;}
/* 표별 라벨 : 훈련과정 수강신청 유의사항 동의(U-QP-04-06-01) */
.table_wrap[aria-label="행정정보 공동이용 사전동의 표"] .data_table td:nth-child(1)::before {content:"이용 기관 명칭";}
.table_wrap[aria-label="행정정보 공동이용 사전동의 표"] .data_table td:nth-child(2)::before {content:"성평등가족부";}
/* 표별 라벨 : 이용자 만족도 조사 개인정보 동의(survey) — 5·6번째는 병합 셀을 대신하는 for_mo 셀 */
.table_wrap[aria-label="만족도 조사 개인정보 수집 및 이용 표"] .data_table td:nth-child(1)::before {content:"수집목적";}
.table_wrap[aria-label="만족도 조사 개인정보 수집 및 이용 표"] .data_table td:nth-child(2)::before {content:"수집항목";}
.table_wrap[aria-label="만족도 조사 개인정보 수집 및 이용 표"] .data_table td:nth-child(3)::before,
.table_wrap[aria-label="만족도 조사 개인정보 수집 및 이용 표"] .data_table td:nth-child(5)::before {content:"보유기간";}
.table_wrap[aria-label="만족도 조사 개인정보 수집 및 이용 표"] .data_table td:nth-child(4)::before,
.table_wrap[aria-label="만족도 조사 개인정보 수집 및 이용 표"] .data_table td:nth-child(6)::before {content:"수집근거";}
/* 두 열을 합친 셀(colspan)은 라벨도 합쳐서 보여준다 */
.table_wrap[aria-label="개인정보 수집 및 이용 표"] .data_table td[colspan]::before,
.table_wrap[aria-label="고유식별정보 수집 및 이용 표"] .data_table td[colspan]::before,
.table_wrap[aria-label="자격 신청 개인정보 수집 및 이용 표"] .data_table td[colspan="2"]::before,
.table_wrap[aria-label="자격 신청 고유식별정보 수집 및 이용 표"] .data_table td[colspan]::before,
.table_wrap[aria-label="자격 신청 민감정보 수집 및 이용 표"] .data_table td[colspan]::before {content:"수집 목적 및 보유기간";}
/* 세 열을 합친 셀은 앞 열 라벨까지 이어 붙인다 */
.table_wrap[aria-label="자격 신청 개인정보 수집 및 이용 표"] .data_table td[colspan="3"]::before {content:"개인정보 항목 및 수집 목적 및 보유기간";}
/* 표별 라벨 : 개인정보 처리방침(U-QP-08-02) */
.table_wrap[aria-label="개인정보 처리 목적 및 보유기간 표"] .data_table td:nth-child(1)::before {content:"구분";}
.table_wrap[aria-label="개인정보 처리 목적 및 보유기간 표"] .data_table td:nth-child(2)::before {content:"처리 목적";}
.table_wrap[aria-label="개인정보 처리 목적 및 보유기간 표"] .data_table td:nth-child(3)::before {content:"처리 개인정보 항목";}
.table_wrap[aria-label="개인정보 처리 목적 및 보유기간 표"] .data_table td:nth-child(4)::before {content:"처리 및 보유기간";}
.table_wrap[aria-label="개인정보 처리 위탁 표"] .data_table td:nth-child(1)::before {content:"위탁받는 자(수탁자)";}
.table_wrap[aria-label="개인정보 처리 위탁 표"] .data_table td:nth-child(2)::before {content:"위탁 업무";}
.table_wrap[aria-label="개인정보보호 책임자 표"] .data_table td:nth-child(1)::before {content:"소속 부서명";}
.table_wrap[aria-label="개인정보보호 책임자 표"] .data_table td:nth-child(2)::before {content:"직책";}
.table_wrap[aria-label="개인정보보호 책임자 표"] .data_table td:nth-child(3)::before {content:"성명";}
.table_wrap[aria-label="개인정보보호 책임자 표"] .data_table td:nth-child(4)::before {content:"전화번호";}
.table_wrap[aria-label="개인정보보호 책임자 표"] .data_table td:nth-child(5)::before {content:"이메일";}
.table_wrap[aria-label="개인정보보호 책임자 표"] .data_table td:nth-child(6)::before {content:"팩스번호";}
.table_wrap[aria-label="개인정보 열람 등 청구 접수·처리 부서 표"] .data_table td:nth-child(1)::before,
.table_wrap[aria-label="개인정보보호 담당 부서 표"] .data_table td:nth-child(1)::before,
.table_wrap[aria-label="개인정보보호 관련 고객 상담 및 신고 표"] .data_table td:nth-child(1)::before {content:"부서명";}
.table_wrap[aria-label="개인정보 열람 등 청구 접수·처리 부서 표"] .data_table td:nth-child(2)::before,
.table_wrap[aria-label="개인정보보호 담당 부서 표"] .data_table td:nth-child(2)::before,
.table_wrap[aria-label="개인정보보호 관련 고객 상담 및 신고 표"] .data_table td:nth-child(2)::before {content:"전화번호";}
.table_wrap[aria-label="개인정보 열람 등 청구 접수·처리 부서 표"] .data_table td:nth-child(3)::before,
.table_wrap[aria-label="개인정보보호 담당 부서 표"] .data_table td:nth-child(3)::before,
.table_wrap[aria-label="개인정보보호 관련 고객 상담 및 신고 표"] .data_table td:nth-child(3)::before {content:"이메일";}
.table_wrap[aria-label="개인정보 열람 등 청구 접수·처리 부서 표"] .data_table td:nth-child(4)::before,
.table_wrap[aria-label="개인정보보호 담당 부서 표"] .data_table td:nth-child(4)::before,
.table_wrap[aria-label="개인정보보호 관련 고객 상담 및 신고 표"] .data_table td:nth-child(4)::before {content:"팩스번호";}
.issue_type {flex-direction:column; gap:1.6rem;}
.issue_card {padding:2.4rem;}
/* 회원가입 (U-QP-01-03) — 카드 패딩 축소 · 입력칸+버튼 세로 적층 */
.join_card {gap:2.4rem; padding:2.4rem;}
.field_inline {flex-direction:column; align-items:stretch; gap:1.2rem;}
.field_inline > .field_box,
.field_inline > .field_split {flex:0 0 auto;}
.field_inline > .btn_act {width:100%;}
.field_email {flex-direction:column; align-items:stretch; gap:1.2rem;}
.field_email_domain {width:100%;}
/* 전자우편 영역 세로 전환 시 720 폭 제한·인증번호 고정폭 해제 */
.form_field.type_email .field_inline,
.form_field.type_email .field_msg {max-width:100%;}
.form_field.type_email .field_email > .field_split {flex:0 0 auto;}
.form_field.type_email .field_inline > .field_box {flex:0 0 auto;}
/* 발급 신청서 작성 (U-QP-05-05) — 절반 폭 해제 · 그리드/박스 세로 전환 */
.apply_form {gap:3.2rem;}
.apply_form .field_box.size_half,
.apply_form .field_inline.size_half {max-width:100%;}
.apply_form .field_inline.size_half > .field_box {flex:0 0 auto;} /* MO는 우편번호칸 506 고정 해제(세로 풀폭) */
/* 이수 교육과정 — 라디오 그룹 위아래 간격 MO 16 (기본 gap 8 + 8) · MO 세로 정렬(면제 항목 옆 배치 방지) */
.apply_form .radio_group[aria-labelledby="eduCourseLabel"] {flex-direction:column; flex-wrap:nowrap; margin-bottom:.8rem;}
.apply_form .check_group + .file_attach {margin-top:1.6rem;}
.check_grid {flex-direction:column;}
.check_grid .form_check {min-width:0; width:100%;}
/* 도움말 툴팁 체크 항목 — 긴 문구가 줄바꿈되면 도움말 버튼이 마지막 줄 끝에 이어지도록 인라인 흐름으로 전환 */
.form_check.type_tooltip {display:block; padding-left:3.2rem;}
.form_check.type_tooltip label {display:inline;}
.form_check.type_tooltip .opt_mark {position:absolute; top:.2rem; left:0; margin-top:0;}
.form_check.type_tooltip .opt_text,
.form_check.type_tooltip .opt_tit {display:inline;}
.form_check.type_tooltip .tooltip_wrap {display:inline-block; position:static; margin-left:.4rem; vertical-align:middle;}
/* MO 말풍선 — 항목 전체 폭, 꼬리는 아래 가운데. 세로 위치는 script.js가 꼬리 끝이 버튼 바로 위에 오도록 맞춤(PC와 같은 margin-bottom 사용) */
.tooltip_layer {left:0; right:0; width:auto;}
.tooltip_arrow {left:50%; margin-left:-1.1rem;}
/* 목록 항목 도움말 툴팁 — 말풍선 기준을 항목(li)으로 넘기고, 카드형 표 셀 밖으로 나가는 말풍선이 잘리지 않게 한다 (U-QP-05-01) */
.text_list .tooltip_wrap {display:inline-block; position:static;}
.data_table:not(.type_scroll) td:has(.tooltip_wrap) {overflow:visible;}
.check_etc {flex:none; flex-direction:column; align-items:stretch; gap:1.2rem;}
/* 라디오 + 선택 필드 — MO는 라디오·필드를 세로로 쌓고 필드는 풀폭 (U-QP-01-03 내·외국인 여부) */
.radio_group:has(.radio_etc) {gap:1.6rem;}
.radio_etc {flex:1 1 100%; flex-direction:column; align-items:stretch;}
.field_nation {width:100%;}
.subfield_row {flex-direction:column; gap:2.4rem;}
.field_msg + .field_notes {padding-left:1.6rem;} /* MO: 목록 들여쓰기 축소 */
.check_etc .field_box {flex:none; width:100%;}
.file_attach {padding:2rem;}
.file_attach_row {flex-direction:column; align-items:stretch; gap:1.6rem;}
.file_attach_row > .field_box {flex:0 0 auto;}
.file_attach_row > .btn_act {width:100%;}
/* 제도안내 (U-QP-03-01) — 교육 과정 표 카드형(라벨 위·값 아래), 대상 카드 아이콘 중앙, 발급 절차 카드 풀폭 */
.course_group {gap:3.2rem;}
.data_table.course_table tr {padding:2rem 0;} /* 좌우 여백 없이 라벨을 표 선에 맞춘다 */
.data_table.course_table td,
.data_table.course_table td::before {font-size:var(--fs-lg);} /* 본문형 표라 카드형에서도 본문 크기 유지 */
.data_table.course_table td:nth-child(1)::before {content:"교육시간";}
.data_table.course_table td:nth-child(2)::before {content:"교육방식";}
.data_table.course_table td:nth-child(3)::before {content:"대상";}
.course_table .text_list.type_2col {columns:1;} /* MO는 단일 열 */
.course_table .text_list.type_2col > li:nth-child(4) {break-before:auto;}
.target_card {align-items:center;}
.process_card {width:100%; padding:2rem;}
/* 자격증 발급 신청안내 (U-QP-05-01) — 신청 방법 교육과정 표 카드형(라벨 위·값 아래) */
.course_block {margin-left:-2.8rem;} /* MO는 목록 들여쓰기를 풀어 블록을 화면 좌측에 맞춘다 */
.data_table.apply_course_table tr {padding:2rem 0;} /* 좌우 여백 없이 라벨을 표 선에 맞춘다 */
.data_table.apply_course_table td,
.data_table.apply_course_table td::before {font-size:var(--fs-lg);} /* 본문형 표라 카드형에서도 본문 크기 유지 */
.table_wrap[aria-label="교육과정 표"] .data_table td:nth-child(1)::before {content:"교육과정";}
.table_wrap[aria-label="교육과정 표"] .data_table td:nth-child(2)::before {content:"교육시간";}
.table_wrap[aria-label="교육과정 표"] .data_table td:nth-child(3)::before {content:"방식";}
.table_wrap[aria-label="교육과정 표"] .data_table td:nth-child(4)::before {content:"대상";}
/* 제출 서류 표 — 카드형 라벨(대상 구분)·카드 사이 구분선, 본문 크기 유지 */
.data_table.docs_table:not(.type_scroll) tr {padding:2rem 0;}
.data_table.docs_table:not(.type_scroll) td + td {margin-top:2rem; border-top:1px solid var(--color-gray-light); padding-top:2rem;}
.data_table.docs_table td,
.data_table.docs_table td::before {font-size:var(--fs-lg);}
.table_wrap[aria-label="제출 서류 표"] .data_table td:nth-child(1)::before {content:"표준교육과정 및 단축교육과정 이수자";}
.table_wrap[aria-label="제출 서류 표"] .data_table td:nth-child(2)::before {content:"직무연수과정 이수자 및 양성교육 면제자";}
/* QR 진위 확인 이용방법 (U-QP-07-01) — 안내 카드 세로 전환, order를 풀어 목업↔설명을 번갈아 쌓는다 */
.qr_guide {flex-direction:column; gap:2.4rem;}
.qr_guide_body {gap:2.4rem;}
.qr_guide_body > .text_list,
.qr_guide_device,
.qr_guide_paper {order:0;}
.qr_guide_body > .text_list:first-of-type {margin-top:0;}
.qr_guide_device {flex:0 0 auto; width:21.1rem; max-width:100%; margin-left:auto; margin-right:auto;}
}