/* 교육 신청 화면(목록·상세·신청서) 전용 스타일 (SPEC-EDU-001 REQ-EDU-010).
   시안 sample/edu-mockup/site/css/edu.css 를 옮긴 것이다. 시안 전용 글꼴 선언 4줄은 빼고,
   시안 list.html 의 인라인 <style> 을 '목록' 절로 옮겼다.
   나머지는 모두 기존 common.css / main.css 를 그대로 쓴다. */
[hidden]{display:none !important}

/* 접수 상태 배지: 기존 .badge(검정 테두리), .badge.end(파란 테두리)에 두 가지만 추가 */
.badge{white-space:nowrap}
.badge.on{background:var(--main-color);border-color:var(--main-color);color:#fff}
.badge.off{border-color:var(--black-300);color:var(--black-500)}

/* 목록의 신청하기 버튼 */
.edu_btn{height:40px;padding:0 18px;border-radius:0.5rem;border:1px solid var(--black-900);background:var(--black-900);color:#fff;font-weight:500;white-space:nowrap;transition:.3s}
.edu_btn:hover{background:var(--main-color);border-color:var(--main-color)}
.edu_btn:disabled,.btn_g button:disabled{background:var(--black-100);border-color:var(--black-200);color:var(--black-400);cursor:not-allowed;transform:none}
.list_body table td.ac{text-align:center}
.list_body table td .num{font-variant-numeric:tabular-nums;white-space:nowrap}
.list_body table td .edu_dt,.list_body table td .edu_mthd{display:block;white-space:nowrap}
/* 상세 하단 신청하기: 흰 바탕 + 파란 테두리, 마우스를 올리면 파랗게 채운다 (main.css 의 .view_foot .btn_g button 채움을 이 버튼만 덮는다) */
.view_foot .btn_g .positive:not(:disabled){background:#fff;color:var(--main-color);border-color:var(--main-color)}
.view_foot .btn_g .positive:not(:disabled):hover,.view_foot .btn_g .positive:not(:disabled):focus-visible{background:var(--main-color);color:#fff;border-color:var(--main-color)}

/* 목록 상태 배지는 PC에서는 '상태' 열에, 모바일에서는 제목 위에 하나만 보이게 한다 (시안 list.html 인라인 스타일) */
.list_body table td[data-th="제목"] .badge{display:none}
.list_body table td[data-th="제목"] a{max-width:100%;margin-left:0;white-space:normal}

/* 상세의 교육 안내 표. 차수의 글자는 th:text 로 내고 줄바꿈은 pre-line 으로 살린다 (REQ-EDU-019) */
.edu_intro{font-size:1.0625rem;line-height:1.7;color:var(--black-800);margin-bottom:40px;white-space:pre-line}
.edu_info{border-top:1px solid var(--black-900)}
.edu_info>div{display:flex;border-bottom:1px solid var(--black-200)}
.edu_info dt{flex:none;width:200px;padding:20px;background:var(--black-50);font-weight:600;color:var(--black-800)}
.edu_info dd{flex:1;min-width:0;padding:20px;color:var(--black-700);line-height:1.7;white-space:pre-line}
.edu_info dd.ntc{color:var(--point)}
.edu_info dd strong{color:var(--main-color);font-weight:600}

/* 상태 안내 상자 (신청 전 · 정원 마감 · 신청 종료 · 신청 완료) */
.edu_state{display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center;padding:70px 20px;background:var(--black-50);border-radius:10px}
.edu_state h3{font-size:1.5rem;font-weight:700}
.edu_state p{color:var(--black-700);line-height:1.7}
.edu_state.done h3{color:var(--main-color)}
/* 신청 완료 본문은 차수의 안내사항(NTC_CN) 그대로라 줄바꿈을 살린다 (REQ-EDU-006, REQ-EDU-019) */
.edu_state.done p{white-space:pre-line}
.edu_alert{padding:1rem 1.25rem;border-radius:10px;background:#fff1f1;color:#e5383f;font-weight:500}

/* 신청서: 오류 문구를 입력칸 바로 아래에 보이게 */
.form_bx dl.err p.guide_error{display:block}
.form_bx dl.err input{border-color:#FF535A}
.hp_field{position:absolute;left:-9999px}
.law_box ul{padding-left:1.25rem;margin-top:0.5rem}
.law_box ul li{list-style:disc;line-height:1.7}
.law_box .sm{font-size:0.875rem;color:var(--black-600);margin-top:0.5rem}

/* 선택 동의 상자: 안내 내용(위)과 동의 질문·버튼(아래)을 한 상자 안에서 선으로 나눈다 */
.edu_consent{display:flex;flex-direction:column;width:100%;border:1px solid var(--black-200);border-radius:10px;overflow:hidden}
.edu_consent{gap:0 !important}
.edu_consent>*{width:100%;margin:0 !important}
.edu_consent .law_box{display:block;border-radius:0;margin:0;border:0;max-height:none}
.edu_agree{display:flex;flex-direction:column;align-items:center;gap:1rem;text-align:center;padding:24px 20px;border-top:1px solid var(--black-200);background:#fff}
.edu_agree>strong{font-weight:600}
.edu_agree .chk_g{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:center;gap:12px;width:auto}
.edu_agree .chk_g .chk_btn{width:auto;flex:none}
.edu_agree p.guide_error{position:static;padding:0}

@media screen and (max-width:1023px){
  .list_body table td[data-th="제목"] .badge{display:inline-flex;order:-1}
  .list_body table td.meta{width:100%;font-size:0.875rem;color:var(--black-600)}
  .list_body table td.meta:before{content:attr(data-label) " ";color:var(--black-800);font-weight:500;margin-right:8px}
  /* 이 폭에서는 td 가 inline-flex(common.css)라 교육일시·진행방식이 한 줄에 붙는다 */
  .list_body table td.meta .edu_mthd{margin-left:6px}
  .list_body table td.act{width:100%;margin-top:6px}
  .list_body table td.act .edu_btn{width:100%;height:48px}
  .list_body table td.st{display:none}
}
@media screen and (max-width:767px){
  .edu_info>div{flex-direction:column}
  .edu_info dt{width:100%;padding:12px 16px}
  .edu_info dd{padding:14px 16px}
  .edu_state{padding:48px 16px}
}

/* 필수 안내 상자도 선택 동의 상자와 같은 테두리 */
.form_bx.perac .input_g .law_box{border:1px solid var(--black-200);border-radius:10px}
/* 상태 안내 상자의 목록 버튼: 상세 화면 목록 버튼과 같은 크기, 위 여백은 2배(12px → 24px) */
.edu_state .btn_g{margin-top:12px}
.edu_state .btn_g button{height:52px;min-width:130px}

/* 신청서 상단 제목: 상세 화면처럼 배지 아래 줄에 교육명을 보여 준다 (모바일에서 잘리지 않게 줄바꿈 허용) */
.section_head .edu_tit strong{display:block;padding-top:1rem;font-size:1.25rem;font-weight:700;color:var(--black-900);white-space:normal;word-break:keep-all;overflow-wrap:anywhere}