@charset "UTF-8";
/* ===== KSHEC origin_v0.6 — 선적용 시안 (전체교육일정 · 개별신청 · 신청화면) =====
 * kshec_snapshot_renewal_v1.05/css/renewal.css 에서 사이트 공통 껍데기(상단 메뉴·드로어·서브내비·푸터·퀵바·챗봇·메인)를
 * 걸러낸 것이다. 직접 고치지 말고 _build/build_v05.js 를 고쳐 다시 만든다.
 */
:root{
  /* --- 색 --- */
  --k-brand:#246BEB; --k-brand-dark:#1D56BC; --k-brand-soft:#EEF5FF; --k-brand-tint:#F5F9FF;
  --k-navy:#12324F; --k-ink:#1A2230; --k-gray:#5A6473; --k-muted:#8A94A0; --k-line:#E2E7EE; --k-line-strong:#C9D3DE; --k-bg:#F5F8FC;
  --k-green:#2E9E5B; --k-green-soft:#E6F5EC; --k-amber:#E8912D; --k-amber-soft:#FFF1E0; --k-red:#D64545; --k-red-soft:#FDF0F0;
  --k-kakao:#FEE500; --k-naver:#03C75A;
  /* --- 모양 --- */
  --k-r-sm:8px; --k-r-md:12px; --k-r-lg:16px; --k-r-xl:24px;
  --k-shadow:0 2px 8px rgba(30,50,66,.06); --k-shadow-lg:0 8px 24px rgba(18,50,79,.14);
  --k-font:'Pretendard Variable',Pretendard,'NotoSansKR','Noto Sans KR','Malgun Gothic','맑은 고딕',sans-serif;
  /* --- v2/v3 컴포넌트가 쓰는 별칭 (같은 토큰을 가리킴) --- */
  --rn-blue:var(--k-brand); --rn-navy:var(--k-navy); --rn-green:var(--k-green); --rn-amber:var(--k-amber); --rn-red:var(--k-red);
  --rn-ink:var(--k-ink); --rn-muted:var(--k-gray); --rn-line:var(--k-line); --rn-bg:var(--k-bg);
}
/* 출강문의 랜딩(.lec-inq)의 자체 토큰도 같은 값으로 */
.lec-inq{--brand:var(--k-brand)!important;--brand-dark:var(--k-brand-dark)!important;--brand-soft:var(--k-brand-soft)!important;--ink:var(--k-ink)!important;--gray:var(--k-gray)!important;--line:var(--k-line)!important;--bg-soft:var(--k-bg)!important;--radius:var(--k-r-lg)!important}
.lec-inq .btn{border-radius:var(--k-r-md)!important}
.lec-inq .form-card{border-radius:var(--k-r-lg)!important}

/* ---------- v4-A. 글꼴 통일 ---------- */
body,button,input,select,textarea,.lec-inq,.faq_box .faq_list .faq_con .faq_a,.btn-naeil_enroll,.btn-dg_enroll,#classDropdown{font-family:var(--k-font)!important;-webkit-font-smoothing:antialiased}
body{color:var(--k-ink)}

/* ---------- 8. 글자 크기 확대 (40대 이상 수강자 기준) ---------- */
html{-webkit-text-size-adjust:100%}

.sub_content,.sub_content p,.sub_content li,.sub_content td,.sub_content th,.n_vB_bot,.n_vB_bot p,.tab-item,.table-ncs td,.table-ncs th,.config_box .txt,.sub_title02{font-size:16px!important;line-height:1.65}
.sub_title .tit,.title h2{font-size:26px!important}
.btn-order,a.btn,.btn,button.btn{min-height:44px;font-size:16px!important}
/* 8-1. 강의 상세 탭(과정소개/학습대상/학습목표/교수소개) 본문 — 원본이 워드에서 붙여넣은 10pt 인라인 스타일을 그대로 갖고 있어 위 규칙이 못 덮던 부분.
   신청 여부를 결정하는 실제 안내문(신청 Tip, 위험성평가 안내 등)이라 최우선으로 확대. remote_lecture·sanup_lecture·ebook_lecture·legal_lecture 전 페이지 공통(.tab_con) */
.tab_con .tL,.tab_con .tL *{font-size:16px!important;font-family:inherit!important;line-height:1.7!important}
/* 8-2. 그 외 13px 안팎으로 남아있던 소규모 컴포넌트 */
.ncs-table th,.ncs-table td,.con2 .scroll{font-size:15px!important}
.n_bBox,.n_bBox *{font-size:15px!important}
/* 8-3. 자동조회 업종 확인 모달의 닫기 버튼 — 글자 크기만 있고 여백이 없어 터치 영역이 좁던 문제 */
.industry-modal-close{min-width:44px!important;min-height:44px!important;display:inline-flex!important;align-items:center;justify-content:center}
@media (max-width:768px){
  /* 가로 스크롤 제거: 공통 헤더/푸터의 고정 폭(1300px)과 표 min-width가 원인.
     주의: overflow-x:hidden을 body에도 주면 iOS 사파리 등에서 position:fixed 요소(ChannelIO 챗봇 팝업 등)가 스크롤에 맞춰 같이 밀리거나 정렬이 깨지는 고질적 버그가 있어, 클리핑은 html에만 둔다. */
html{overflow-x:hidden!important}
body{max-width:100%}
.main-container-wrap,.support,.info_banner,.bottom,#lecture,.edu_card .wrapper a{width:100%!important;max-width:100%!important;min-width:0!important;box-sizing:border-box}

.table-ncs-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
body{font-size:17px!important}

.sub_content,.sub_content p,.sub_content li,.sub_content td,.sub_content th,.n_vB_bot,.n_vB_bot p,.tab-item,.table-ncs td,.table-ncs th{font-size:17px!important;line-height:1.7}
.title h2{font-size:24px!important}
.btn-order,a.btn,.btn,button.btn,.sub_tab03 a{min-height:48px;font-size:17px!important}
input:not([type="radio"]):not([type="checkbox"]),select,textarea{font-size:16px!important;min-height:44px}
  /* 접수유형 등 원형 라디오·체크박스는 위 min-height가 적용되면 가로는 그대로인데 세로만 늘어나 타원으로 찌그러짐 → 정사각형 크기로 별도 고정 */
input[type="radio"],input[type="checkbox"]{width:20px;height:20px;min-height:0;min-width:0}
}

.rn-find,.rn-find *,.rn-doc,.rn-doc *,.rn-pre,.rn-pre *,.rn-man,.rn-man *,.rn-filter,.rn-filter *{box-sizing:border-box}
.rn-find,.rn-doc,.rn-pre,.rn-man{max-width:100%;overflow-x:hidden}
/* hidden 속성이 display:flex/grid 규칙에 덮이지 않도록 (과정 찾기 드롭다운 숨김 버그) */
[hidden]{display:none!important}
/* 서브 내비게이션(.sub_navi>ul>li float, 56px)이 55px 컨테이너를 1px 넘쳐 다음 BFC 요소를 오른쪽으로 밀어내던 문제 → 새 페이지 컨테이너는 float 아래로 내림 */
#section,.rn-find,.rn-doc,.rn-pre,.rn-man{clear:both}

/* ---------- 공통 버튼 ---------- */
.rn-btn{appearance:none;border:1px solid var(--rn-line);background:#fff;border-radius:8px;padding:8px 14px;font-size:15px;cursor:pointer;color:var(--rn-ink);text-decoration:none;min-height:44px;display:inline-flex;align-items:center;justify-content:center;font-family:inherit}
.rn-btn.primary{background:var(--rn-blue);border-color:var(--rn-blue);color:#fff}
.rn-btn:focus-visible,.rn-tog:focus-visible,.rn-chip:focus-visible,.rn-big:focus-visible,.rn-sel:focus-visible{outline:3px solid #9DBDF7;outline-offset:2px}

/* ---------- 2.4 광고 차단 안내 토스트 ---------- */
.rn-toast{position:fixed;left:50%;top:16px;transform:translateX(-50%);z-index:100000;max-width:760px;width:calc(100% - 32px);background:#fff;border:1px solid var(--rn-line);border-left:6px solid var(--rn-amber);box-shadow:0 8px 24px rgba(18,50,79,.18);border-radius:10px;padding:14px 16px;display:flex;gap:12px;align-items:center;font-size:16px;line-height:1.5;color:var(--rn-ink);font-family:inherit}
.rn-toast strong{display:block;font-size:17px;margin-bottom:2px}
.rn-toast .rn-ico{flex:none;width:36px;height:36px;border-radius:50%;background:#FFF3E3;color:var(--rn-amber);display:grid;place-items:center;font-weight:800;font-size:20px}
.rn-toast .rn-actions{margin-left:auto;display:flex;gap:8px;flex:none}
@media (max-width:640px){.rn-toast{flex-wrap:wrap}.rn-toast .rn-actions{margin-left:0;width:100%}.rn-toast .rn-actions .rn-btn{flex:1}}

/* ---------- 3. 신청 페이지 날짜 자동 선택 안내 ---------- */
.rn-datehint{max-width:1300px;margin:14px auto;padding:14px 18px;background:#EEF5FF;border:1px solid #CFE0FA;border-radius:10px;color:var(--rn-ink);font-size:16px;line-height:1.55;display:flex;gap:10px;align-items:flex-start;box-sizing:border-box}
.rn-datehint.warn{background:#FFF6E8;border-color:#F5D3A8}
.rn-datehint b{color:var(--rn-blue)}
.rn-datehint.warn b{color:#B35C00}
/* 3-2. 수강신청 페이지 정가/할인가(실결제금액) 스타일 분리 — js/renewal.js의 priceStyle()이 클래스를 붙인다 */
strong.rn-price-list{color:#B7C0CC!important;font-size:15px!important;font-weight:500!important;text-decoration:line-through}
strong.rn-price-sale{color:var(--rn-blue)!important;font-size:24px!important;font-weight:800!important}
/* 접수 가능인원 칸 (#suyong_inwon) */
.rn-seat{display:inline-block;font-weight:800;font-size:18px;padding:4px 14px;border-radius:999px;margin-right:8px;line-height:1.4}
.rn-seat.ok{background:#E6F5EC;color:#1F7A44}.rn-seat.low{background:#FFF1E0;color:#B35C00}.rn-seat.full{background:#F7EDED;color:#9E2B2B}
#suyong_inwon small{font-size:14px;color:var(--rn-muted)}

/* ---------- 2.1-b 모바일에서 필터 접기 (2026-09-17 PM 지적) ----------
   모바일에서 필터가 첫 화면의 절반을 넘게 차지해 정작 달력이 아래로 밀려났다.
   여는 단추를 앞에 두고 **기본은 접는다.** PC는 자리가 넉넉하므로 단추를 감추고 늘 펼친 채로 둔다 */
.rn-filter-toggle{display:none}
@media (max-width:767px){
.rn-filter-toggle{
    display:flex;align-items:center;gap:10px;width:100%;box-sizing:border-box;
    min-height:52px;padding:8px 14px;margin:0 auto 10px;max-width:1300px;
    background:#fff;border:1px solid var(--k-line);border-radius:var(--k-r-md);
    font-family:inherit;color:var(--k-ink);cursor:pointer;text-align:left
  }
.rn-filter-toggle .ic{font-size:17px;line-height:1;flex:none;opacity:.75}
.rn-filter-toggle .t{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:1px}
.rn-filter-toggle .t b{font-size:15.5px;font-weight:700}
.rn-filter-toggle .t small{font-size:13px;color:var(--k-gray);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rn-filter-toggle .ar{flex:none;font-size:13px;color:var(--k-gray)}
.rn-filter-toggle[aria-expanded="true"]{border-color:var(--k-brand);color:var(--k-brand)}
.rn-filter-toggle[aria-expanded="true"] .t small{color:var(--k-brand)}
  /* 접힘이 기본 — .open 이 붙었을 때만 펼친다 */
.rn-filter.rn-filter-collapsible{display:none}
.rn-filter.rn-filter-collapsible.open{display:flex}
}

/* ---------- 2.1 캘린더 필터 바 ---------- */
/* 갈래(업종 · 교육 형태 · 분할수강)마다 **한 줄**을 준다 (운영팀 회의 2026-09-17).
   한 줄에 이어 붙여 놓으면 생김새가 같아 어디까지가 한 갈래인지 보이지 않았다.
   줄 사이에 옅은 선을 그어 경계를 드러내고, 줄 앞의 이름은 폭을 맞춰 단추 시작점을 정렬한다 */
/* 한 줄 = **이름(고정) + 미는 칸**. 이름을 미는 칸 밖에 두어 단추가 이름 자리로 넘어오지 못하게 한다
   (PM 재지적 2026-09-18 — 덮는 방식은 이름 오른쪽에서 단추가 반쯤 비쳤다) */
.rn-filter{max-width:1300px;margin:0 auto 12px;display:flex;flex-direction:column;align-items:stretch;gap:0;padding:4px 14px;background:var(--rn-bg);border:1px solid var(--rn-line);border-radius:12px;box-sizing:border-box}
.rn-filter .rn-group{display:flex;flex-wrap:nowrap;align-items:center;gap:6px;padding:8px 0;border-top:1px solid var(--rn-line);overflow:visible}
.rn-filter .rn-group:first-child{border-top:0}
.rn-filter .rn-group-scroll{flex:1 1 auto;min-width:0;display:flex;flex-wrap:nowrap;gap:6px;align-items:center;
  overflow-x:auto;overflow-y:hidden;scrollbar-width:thin;-webkit-overflow-scrolling:touch;padding:2px 0}
.rn-filter .rn-group-scroll::-webkit-scrollbar{height:4px}
.rn-filter .rn-group-scroll::-webkit-scrollbar-thumb{background:var(--rn-line);border-radius:999px}
/* 줄 이름 — 미는 칸 **밖**에 있으므로 덮을 필요가 없다. 자리만 지킨다 */
.rn-filter .rn-label{flex:none;width:72px;font-size:14px;color:var(--rn-muted);font-weight:700;margin-right:4px}
.rn-tog{flex:none;appearance:none;border:1px solid var(--rn-line);background:#fff;border-radius:999px;padding:0 15px;min-height:44px;font-size:15px;cursor:pointer;color:var(--rn-ink);display:inline-flex;align-items:center;gap:7px;font-family:inherit;font-weight:500;white-space:nowrap}
.rn-tog[aria-pressed="true"]{background:var(--rn-navy);border-color:var(--rn-navy);color:#fff}
.rn-tog .rn-dot{width:10px;height:10px;border-radius:50%;display:inline-block;background:var(--dot,#999);box-shadow:0 0 0 2px #fff}
.rn-legend{display:flex;gap:12px;flex-wrap:wrap;margin-left:0;padding:8px 0;border-top:1px solid var(--rn-line);font-size:13px;color:var(--rn-muted);align-items:center}
.rn-legend i{display:inline-block;width:12px;height:12px;border-radius:3px;margin-right:5px;vertical-align:-1px}
.rn-legend .ok i{background:#BFE3CC}.rn-legend .low i{background:#F5D3A8}.rn-legend .full i{background:#F0BDBD}.rn-legend .closed i{background:#DDE2E8}
/* 분할수강 줄 안쪽 끝의 [분할수강이란?] — 거르는 단추와 헷갈리지 않게 **테두리만 있는 꼴**로 둔다 */
.rn-filter .rn-split-ask-inline{flex:none;margin:0 0 0 2px;min-height:44px;white-space:nowrap}
/* 미는 칸이 화면보다 길면 오른쪽 끝을 흐리게 해 **더 있다**는 것을 알린다 */
.rn-filter .rn-group-scroll{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 20px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 20px),transparent)}
.rn-filter .rn-group-scroll.rn-nooverflow{-webkit-mask-image:none;mask-image:none}
/* 좁은 화면에서도 갈래마다 한 줄을 지킨다 (PM 지시 2026-09-17).
   단추가 두 줄로 접히지 않도록 크기를 한 단계 줄이고, 넘치는 만큼은 그 줄만 가로로 민다 */
@media (max-width:768px){
.rn-filter{margin:0 8px 12px;padding:2px 10px}
.rn-filter .rn-label{width:58px;font-size:13px;margin-right:2px}
.rn-filter .rn-group{padding:7px 0;gap:5px}
.rn-filter .rn-group-scroll{gap:5px}
.rn-legend{padding:7px 0}
.rn-tog{min-height:40px;padding:0 12px;font-size:14px}
.rn-filter .rn-split-ask-inline{min-height:40px;margin-left:2px}
.rn-legend{padding:7px 0;gap:8px;font-size:12px}
}

/* ---------- 2.1 PC 달력 칸: 업종 헤더 + 컬러 칩 / 지난 날짜 숨김 ---------- */
.calendar-grid .schedule-container > .calender-div.rn-done{background:transparent!important;color:inherit!important;border-radius:0!important;padding:0!important;text-align:left;cursor:default;margin:0 0 6px!important}
/* 2차 최적화 피드백: 업종 헤더를 클릭해야 그 업종의 교육 목록이 펼쳐지는 드롭다운 방식(기본 접힘) */
.calendar-grid .rn-group-head{appearance:none;border:0;display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:700;font-family:inherit;color:#fff;padding:4px 10px;border-radius:999px;margin:0 0 4px;line-height:1.6;cursor:pointer;min-height:28px}
.calendar-grid .rn-group-head-ic{font-size:10px;transition:transform .15s}
.calendar-grid .rn-group-head.open .rn-group-head-ic{transform:rotate(180deg)}
/* 칩을 칸 폭에 맞춰 세로로 쌓는다 — 내용 길이에 따라 칩 폭이 달라져 날짜 칸 크기가 들쭉날쭉했다 (2026-09-16) */
.calendar-grid .rn-chips{display:flex;flex-direction:column;gap:5px;margin-bottom:4px}
.calendar-grid .rn-chip{width:100%;box-sizing:border-box;justify-content:space-between}
.calendar-grid .rn-chips[hidden]{display:none}
/* 강의명을 현재 홈페이지 문구 그대로 쓰면서(2026-09-17 PM 결정) 칩 안에서 줄바꿈이 되어야 한다.
   nowrap으로 두면 "혼합교육 16시간 (화상교육 8시간 + 우편교육 8시간)"이 칸 밖으로 삐져나간다 */
.calendar-grid .rn-chip{display:inline-flex;align-items:flex-start;gap:5px;min-height:30px;padding:5px 9px;border-radius:7px;font-size:13px;font-weight:600;line-height:1.35;text-decoration:none;border:1px solid transparent;white-space:normal;word-break:keep-all;color:inherit}
.calendar-grid .rn-chip .lbl{flex:1 1 auto;min-width:0}
/* 잔여석 — 강의명과 글자색이 같아 구분이 안 된다는 지적 (PM 2026-09-17).
   모바일 목록에서 쓰던 방식(흰 배경 알약 + 상태색 점)을 PC 달력에도 그대로 맞춘다.
   글자색은 칩 상태색을 그대로 쓰되, 흰 배경 위에 얹히므로 대비가 올라간다 */
.calendar-grid .rn-chip .n{
  flex:none;display:inline-flex;align-items:center;gap:5px;
  background:#fff;border-radius:999px;padding:3px 9px;
  font-size:12.5px;font-weight:800;line-height:1.25;white-space:nowrap
}
.calendar-grid .rn-chip .n::before{content:'';width:7px;height:7px;border-radius:50%;background:currentColor;flex:none}
/* 업종 헤더의 교육 대상 — "건설업 · 관리감독자" 에서 뒷부분 */
.rn-group-head-target{font-weight:600;opacity:.88}
.rn-chip.ok{background:#E6F5EC;color:#1F7A44;border-color:#BFE3CC}
.rn-chip.low{background:#FFF1E0;color:#B35C00;border-color:#F5D3A8}
.rn-chip.full{background:#F7EDED;color:#9E2B2B;border-color:#EBC6C6}
.rn-chip.full .lbl{text-decoration:line-through;opacity:.75}
.rn-chip.closed{background:#F1F3F6;color:#7A8792;border-color:#DDE2E8}
.rn-chip.closed .n{font-weight:700}
.mobile-schedule-capacity.rn-cap.closed{color:#7A8792}.mobile-schedule-capacity.rn-cap.closed .rn-dotc{background:#B8C0C8}
.mobile-schedule-link.rn-closed{opacity:.7}
.rn-chip .n{font-variant-numeric:tabular-nums;font-weight:800}
.rn-chip:hover{filter:brightness(.95);text-decoration:none}
.calendar-grid td.rn-empty{background:#FAFAFA}
.calendar-grid td.rn-empty .day_top{color:#B8C0C8}
.calendar-grid td.rn-past{background:#F3F4F6}
.calendar-grid td.rn-past .day_top{color:#B8C0C8}
.calendar-grid td.rn-past .schedule-container{display:none!important}
.calendar-grid td{height:auto!important;min-height:150px}
.mobile-day-cell.rn-past{opacity:.35;pointer-events:none}
.mobile-day-cell.rn-past .mobile-schedule-dots{display:none}
.rn-off{display:none!important}

/* 2차 최적화 5번: PC 캘린더가 한 달(5~6주) 전체를 항상 펼쳐 보여 세로가 너무 길다는 피드백 →
   오늘이 속한 주 이전(이미 다 끝난 주)은 기본 접어두고, 토글 버튼으로 펼쳐볼 수 있게 함.
   지난 날짜 자체를 숨기는 것이 아니라(위 .rn-past로 계속 회색 비활성 표시) "주" 단위 행만 접는다. */
.calendar-grid tr.rn-week-collapsed{display:none}
.rn-week-toggle-row td{border:0!important;background:transparent!important;padding:6px 0 14px}
.rn-week-toggle{appearance:none;width:100%;min-height:44px;border:1.5px dashed var(--k-line-strong,#C9D3DE);background:#fff;color:var(--rn-navy);border-radius:10px;font-size:14.5px;font-weight:700;cursor:pointer;font-family:inherit}
.rn-week-toggle:hover{background:var(--rn-bg);border-color:var(--rn-blue)}

/* ---------- 2.1 모바일 달력: 잔여석 칩 ---------- */
.mobile-schedule-capacity.rn-cap{background:#fff!important;display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:4px 12px!important;border-radius:999px!important;font-weight:800!important;font-size:14px!important}
.mobile-schedule-capacity.rn-cap.ok{color:#1F7A44}.mobile-schedule-capacity.rn-cap.low{color:#B35C00}.mobile-schedule-capacity.rn-cap.full{color:#9E2B2B}
.mobile-schedule-capacity.rn-cap .rn-dotc{width:9px;height:9px;border-radius:50%;display:inline-block}
.mobile-schedule-capacity.rn-cap.ok .rn-dotc{background:var(--rn-green)}.mobile-schedule-capacity.rn-cap.low .rn-dotc{background:var(--rn-amber)}.mobile-schedule-capacity.rn-cap.full .rn-dotc{background:var(--rn-red)}
.mobile-schedule-item{min-height:52px}
/* 분할 표시는 카드 안이되 **제목·잔여석 아래 새 줄**에 둔다 (2026-09-17).
   같은 줄에 끼워 넣으면 남는 폭이 줄어 "혼합교육 / 8시간 / (화상교육 / 오후" 처럼 제목이 잘게 쪼개진다 */
.mobile-schedule-item{flex-wrap:wrap!important}
/* 제목은 남는 폭 안에서 여러 줄로 감싸고(flex-basis 0), 잔여석은 오른쪽에 붙어 같은 줄을 지킨다.
   basis를 auto로 두면 긴 제목이 한 줄을 통째로 요구해 잔여석이 아래로 밀린다 */
.mobile-schedule-item > .mobile-schedule-title{flex:1 1 0;min-width:0}
.mobile-schedule-item > .mobile-schedule-capacity{flex:none}
.mobile-schedule-item > .rn-abs{flex:0 0 100%;width:100%;margin-top:6px}
.mobile-schedule-title{font-size:16px!important}
.mobile-day-cell{min-height:64px}

/* ---------- 7. 개별신청 과정 찾기 (ncs/main_renewal.html) ---------- */
.rn-find{max-width:1100px;margin:0 auto;padding:10px 16px 48px;color:var(--rn-ink);font-size:17px;line-height:1.6}
.rn-find h2{font-size:28px;color:var(--rn-navy);margin:6px 0 4px;text-wrap:balance}
.rn-find .lead{color:var(--rn-muted);margin:0 0 18px;font-size:16px}

/* 7-2. 진행률 바 + 스텝 인디케이터 (ex_process.jpg 참고: 전체 대비 얼마나 왔는지 + 각 단계가 뭔지·어디쯤인지) */
.rn-progress{margin:0 0 22px}
.rn-progress-bar-row{display:flex;align-items:center;gap:14px;margin-bottom:18px}
.rn-progress-bar{flex:1;height:8px;border-radius:99px;background:var(--rn-line);overflow:hidden}
.rn-progress-fill{height:100%;width:0;background:var(--rn-blue);border-radius:99px;transition:width .3s ease}
.rn-progress-txt{font-size:14px;font-weight:800;color:var(--rn-navy);white-space:nowrap;flex:none}
.rn-prog-steps{display:flex;list-style:none;margin:0;padding:0}
.rn-prog-steps li{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;position:relative;font-size:13.5px;font-weight:700;color:var(--rn-muted);text-align:center}
.rn-prog-steps li:not(:last-child)::after{content:'';position:absolute;top:14px;left:calc(50% + 20px);right:calc(-50% + 20px);height:2px;background:var(--rn-line)}
.rn-prog-steps li.done:not(:last-child)::after{background:var(--rn-blue)}
.rn-prog-steps .dot{width:28px;height:28px;border-radius:50%;background:var(--rn-line);color:var(--rn-muted);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:800;z-index:1}
.rn-prog-steps li.on .dot{background:var(--rn-blue);color:#fff;box-shadow:0 0 0 4px #DCE8FB}
.rn-prog-steps li.on{color:var(--rn-navy)}
.rn-prog-steps li.done .dot{background:var(--rn-blue);color:#fff}
.rn-prog-steps li.done{color:var(--rn-navy)}
@media(max-width:480px){.rn-prog-steps li{font-size:11px}.rn-prog-steps .dot{width:24px;height:24px;font-size:11px}.rn-prog-steps li:not(:last-child)::after{top:12px}}
.rn-target{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-bottom:16px}
.rn-target button{appearance:none;border:2px solid var(--rn-line);background:#fff;border-radius:12px;min-height:64px;font-size:17px;font-weight:700;color:var(--rn-ink);cursor:pointer;font-family:inherit;padding:8px 10px;line-height:1.3}
.rn-target button[aria-pressed="true"]{border-color:var(--rn-blue);background:#EEF5FF;color:var(--rn-navy)}
/* 2-3. 사업자번호로 교육 대상 여부를 확인하는 자동조회 페이지 진입 배너 */
.rn-wizard-banner{display:flex;align-items:center;gap:14px;background:linear-gradient(90deg,var(--rn-navy),var(--k-brand-dark));color:#fff;border-radius:14px;padding:16px 20px;text-decoration:none;margin:0 0 16px;min-height:64px;box-shadow:var(--k-shadow);box-sizing:border-box}
.rn-wizard-banner .ic{font-size:26px;flex:none}
.rn-wizard-banner .txt{font-size:16px;line-height:1.4;flex:1;color:#fff}
.rn-wizard-banner .txt b{display:block;font-size:17px;margin-bottom:2px}
.rn-wizard-banner .go{font-size:22px;font-weight:800;flex:none}
.rn-wizard-banner:hover{filter:brightness(1.08)}
@media(max-width:480px){.rn-wizard-banner{padding:14px 16px}.rn-wizard-banner .txt{font-size:14.5px}.rn-wizard-banner .txt b{font-size:15.5px}}
/* 드롭다운 4개(교육 종류 → 업종 → 사업장 구분 → 교육 시간). 교육 종류에 따라 필요 없는 칸은 hidden → 남은 칸이 가로를 채움 */
.rn-form{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;padding:16px;background:var(--rn-bg);border:1px solid var(--rn-line);border-radius:14px;margin-bottom:12px}
.rn-form label .step{display:inline-block;width:22px;height:22px;border-radius:50%;background:var(--rn-navy);color:#fff;font-size:13px;text-align:center;line-height:22px;margin-right:6px}
.rn-form label.done .step{background:var(--rn-green)}
.rn-form label{display:flex;flex-direction:column;gap:6px;font-size:16px;font-weight:700;color:var(--rn-muted)}
/* 1-1. 조건을 다 고르기 전, 다음에 고를 드롭다운을 은은하게 강조.
   ※ 2차 최적화 10차 피드백: 이 깜빡임을 <select> "자체"에 걸었더니, 모바일에서 그 드롭다운만
     눌러도 값이 선택되지 않는 문제가 있었다. 모바일 브라우저는 select를 누르면 네이티브 선택
     팝업(하단 시트/목록)을 띄우는데, 그 팝업이 떠 있는 동안 대상 select가 1.5초마다 계속 다시
     그려지면 팝업이 닫혀버려 선택이 확정되지 않는다. PC는 팝업을 OS가 그리므로 영향이 없어
     "모바일에서만" 재현됐다. 강조 대상은 항상 "다음에 골라야 하는 칸"이라, 사용자가 지금 눌러야
     하는 드롭다운이 정확히 안 되는 형태로 나타났다.
   → select에는 테두리 색만 주고, 깜빡이는 링은 label의 가상요소(::after)로 그린다.
     가상요소는 클릭을 받지 않도록 pointer-events:none. */
@keyframes rnPulseGlow{0%,100%{box-shadow:0 0 0 0 rgba(36,107,235,.35)}50%{box-shadow:0 0 0 8px rgba(36,107,235,0)}}
.rn-form label{position:relative}
.rn-form label.rn-pulse .rn-sel{border-color:var(--rn-blue)}
.rn-form label.rn-pulse::after{content:'';position:absolute;left:0;right:0;bottom:0;height:54px;border-radius:10px;pointer-events:none;animation:rnPulseGlow 1.5s ease-in-out infinite}
@media(prefers-reduced-motion:reduce){.rn-form label.rn-pulse::after{animation:none;box-shadow:0 0 0 4px #DCE8FB}}
.rn-sel{appearance:none;-webkit-appearance:none;width:100%;min-height:54px;border:2px solid #C9D3DE;border-radius:10px;background:#fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2312324F' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>") no-repeat right 14px center;padding:0 44px 0 14px;font-size:18px;font-weight:700;color:var(--rn-ink);font-family:inherit}
.rn-sel:disabled{opacity:.5}
.rn-fmt{display:flex;flex-wrap:wrap;gap:8px;margin:4px 0 16px;align-items:center}
.rn-fmt .rn-label{font-size:14px;font-weight:700;color:var(--rn-muted);margin-right:4px}
.rn-hint{background:#EEF5FF;border:1px solid #CFE0FA;border-radius:10px;padding:14px 16px;font-size:17px;line-height:1.55;margin:0 0 16px;display:flex;gap:10px;align-items:flex-start}
.rn-hint.warn{background:#FFF6E8;border-color:#F5D3A8}
.rn-hint a{color:var(--rn-blue);font-weight:700}
/* 2-4. 산재율 조회처럼 명확한 클릭 지점이 필요한 링크는 버튼처럼 눈에 띄게 */
.rn-hint a.rn-strong-link{display:inline-block;margin-top:6px;padding:7px 14px;background:var(--rn-blue);color:#fff!important;border-radius:8px;font-weight:800;text-decoration:none}
.rn-hint a.rn-strong-link:hover{background:var(--rn-navy)}
.rn-count{font-size:15px;color:var(--rn-muted);margin:0 0 10px}
/* 1-1. 조건 미완료 시 카드 대신 보여주는 안내 박스 */
.rn-guide-msg{grid-column:1/-1;display:flex;align-items:center;justify-content:center;gap:10px;padding:32px 20px;text-align:center;color:var(--rn-navy);background:var(--rn-bg);border:1px dashed var(--rn-line);border-radius:12px;font-size:16px;font-weight:600}
.rn-guide-msg span{font-size:22px}
.rn-cards2{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.rn-course{border:1px solid var(--rn-line);border-radius:16px;background:#fff;padding:18px 18px 16px;box-shadow:0 2px 8px rgba(30,50,66,.06);display:flex;flex-direction:column;gap:10px}
.rn-course.reco{border-color:var(--rn-blue);box-shadow:0 0 0 3px #DCE8FB}
.rn-course .tags{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.rn-tag{display:inline-block;font-size:13px;font-weight:700;padding:3px 10px;border-radius:999px;background:#EEF1F5;color:#334}
.rn-tag.video{background:#E3F2FD;color:#0B5CAD}.rn-tag.post{background:#E8F5EA;color:#1F7A44}.rn-tag.reco{background:var(--rn-blue);color:#fff}.rn-tag.ind{background:var(--rn-navy);color:#fff}
.rn-course h3{font-size:19px;margin:0;line-height:1.35;color:var(--rn-navy)}
.rn-course ul{margin:0;padding-left:18px;font-size:16px;color:#3F4B55;line-height:1.55}
.rn-course .price{display:flex;align-items:baseline;gap:10px;margin-top:2px}
.rn-course .price s{color:#B7C0CC;font-size:13px}
.rn-course .price b{font-size:26px;color:var(--rn-ink)}
.rn-course .actions{display:flex;gap:8px;margin-top:4px}
.rn-course .actions a{flex:1;min-height:50px;display:inline-flex;align-items:center;justify-content:center;border-radius:10px;font-size:17px;font-weight:800;text-decoration:none}
/* 2-5. 주 버튼(수강신청)을 보조 버튼(일정 보기)보다 크게 — 시각 크기는 유지, 비율만 조정 */
.rn-course .actions .apply{flex:2;background:var(--rn-blue);color:#fff}
.rn-course .actions .sched{flex:1;background:#fff;color:var(--rn-navy);border:2px solid var(--rn-navy)}
.rn-empty-msg{grid-column:1/-1;padding:28px;text-align:center;color:var(--rn-muted);border:1px dashed var(--rn-line);border-radius:12px}

@media (max-width:860px){.rn-target{grid-template-columns:repeat(2,1fr)}.rn-target button:last-child{grid-column:span 2}.rn-form{grid-template-columns:1fr}.rn-cards2{grid-template-columns:1fr}.rn-find h2{font-size:24px}}
@media (min-width:861px) and (max-width:1100px){.rn-form{grid-template-columns:repeat(2,1fr)}}
@media (min-width:861px) and (max-width:1100px){.rn-target{grid-template-columns:repeat(3,1fr)}}
.rn-tag.warn{background:#FFF3E3;color:#92400E}

/* ---------- 7-1. 개별신청 보강: 신청 확정 요약바 · 법정시간 확인 모달 · FAQ ---------- */
.rn-dock{position:fixed;left:0;right:0;bottom:0;z-index:9000;background:#fff;border-top:1px solid var(--rn-line);box-shadow:0 -6px 24px rgba(18,50,79,.12);padding:12px 16px calc(12px + env(safe-area-inset-bottom));transform:translateY(110%);transition:transform .22s ease}
.rn-dock.show{transform:translateY(0)}
.rn-dock-in{max-width:1100px;margin:0 auto;display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.rn-dock-info{flex:1 1 200px;min-width:0}
.rn-dock-lab{font-size:12px;font-weight:700;color:var(--rn-muted);margin-bottom:2px}
.rn-dock-title{font-size:16px;font-weight:800;color:var(--rn-navy);line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rn-dock-cta{flex:0 0 auto;margin-left:auto;display:flex;align-items:center;gap:14px}
.rn-dock-price{font-size:20px;font-weight:800;color:var(--rn-ink);white-space:nowrap}
.rn-dock-price s{font-size:13px;color:#98A2AC;font-weight:600;margin-right:6px}
.rn-dock-go{flex:none;min-height:50px;padding:0 22px;border-radius:10px;background:var(--rn-blue);color:#fff;font-size:16px;font-weight:800;display:inline-flex;align-items:center;justify-content:center;text-decoration:none;white-space:nowrap}
body.rn-has-dock .rn-find{padding-bottom:96px}
@media(max-width:640px){.rn-dock-in{gap:10px}.rn-dock-title{font-size:14px}.rn-dock-price{font-size:17px}.rn-dock-go{padding:0 16px;font-size:15px}}
@media(max-width:480px){.rn-dock-info{flex-basis:100%}.rn-dock-cta{flex-basis:100%;margin-left:0;justify-content:space-between}body.rn-has-dock .rn-find{padding-bottom:120px}}

.rn-mgr-ov{position:fixed;inset:0;background:rgba(14,23,38,.5);z-index:99999;display:none;align-items:center;justify-content:center;padding:20px}
.rn-mgr-ov.on{display:flex}
.rn-mgr-box{background:#fff;border-radius:16px;max-width:440px;width:100%;padding:26px 24px 22px;box-shadow:0 20px 60px rgba(0,0,0,.25)}
.rn-mgr-box h3{margin:0 0 10px;font-size:19px;color:var(--rn-navy)}
.rn-mgr-box p{margin:0 0 14px;font-size:16px;line-height:1.6;color:#3F4B55}
.rn-mgr-check{display:flex;gap:10px;align-items:flex-start;font-size:15.5px;line-height:1.5;padding:12px 14px;border:1px solid var(--rn-line);border-radius:10px;background:var(--rn-bg);margin-bottom:16px;cursor:pointer}
.rn-mgr-check input{width:20px;height:20px;flex:none;margin-top:1px}
.rn-mgr-btns{display:flex;gap:8px}
.rn-mgr-btns button{flex:1;min-height:48px;border-radius:10px;font-size:16px;font-weight:800;cursor:pointer;font-family:inherit;border:2px solid var(--rn-line);background:#fff;color:var(--rn-ink)}
.rn-mgr-btns .ok{border-color:var(--rn-blue);background:var(--rn-blue);color:#fff}
.rn-mgr-btns .ok:disabled{background:#AEB8C6;border-color:#AEB8C6;cursor:not-allowed}

.rn-faq{margin-top:28px;border-top:1px solid var(--rn-line);padding-top:22px}
.rn-faq h3{font-size:19px;color:var(--rn-navy);margin:0 0 12px}
.rn-faq details{border:1px solid var(--rn-line);border-radius:12px;margin-bottom:8px;overflow:hidden;background:#fff}
.rn-faq summary{list-style:none;cursor:pointer;padding:14px 16px;font-size:15.5px;font-weight:700;color:var(--rn-ink);display:flex;align-items:center;gap:10px}
.rn-faq summary::-webkit-details-marker{display:none}
.rn-faq summary::before{content:'+';flex:none;width:20px;height:20px;border-radius:50%;background:var(--rn-bg);color:var(--rn-navy);font-weight:800;display:flex;align-items:center;justify-content:center;font-size:15px}
.rn-faq details[open] summary::before{content:'–'}
.rn-faq .a{padding:0 16px 16px 46px;font-size:16px;line-height:1.65;color:#3F4B55}
.rn-faq .a p{margin:0 0 8px}
.rn-faq .a p:last-child{margin-bottom:0}
.rn-faq .a a{color:var(--rn-blue);font-weight:700}

/* ---------- 8. 이미지 → 텍스트 전환 페이지 (rn-doc) ---------- */
.rn-doc{max-width:900px;margin:0 auto;padding:6px 16px 32px;color:var(--rn-ink);font-size:17px;line-height:1.75;text-align:left}
.rn-doc h2{font-size:28px;line-height:1.3;color:var(--rn-navy);margin:10px 0 10px;text-wrap:balance}
.rn-doc h3{font-size:21px;color:var(--rn-navy);margin:0 0 8px;line-height:1.35}
.rn-doc p{margin:0 0 12px;max-width:none}
.rn-doc ul,.rn-doc ol{margin:0 0 12px;padding-left:22px}
.rn-doc li{margin-bottom:6px}
.rn-doc-lead{font-size:18px;color:#3F4B55;margin-bottom:18px}
.rn-eyebrow{font-size:14px;font-weight:700;color:var(--rn-blue);letter-spacing:.02em;margin-bottom:4px}
.rn-sec{padding:20px 0 18px;border-top:1px solid var(--rn-line);position:relative}
.rn-num{display:inline-block;font-size:14px;font-weight:800;color:var(--rn-blue);background:#EEF5FF;border-radius:6px;padding:2px 8px;margin-bottom:8px}
.rn-sec.rn-warn{background:#FFF8F0;border:1px solid #F5D3A8;border-radius:12px;padding:18px 20px;margin:12px 0}
.rn-sec.rn-cta{background:#EEF5FF;border:1px solid #CFE0FA;border-radius:12px;padding:18px 20px}
.rn-badges{list-style:none;padding:0!important;display:flex;flex-wrap:wrap;gap:8px}
.rn-badges li{background:#EEF1F5;border-radius:999px;padding:6px 14px;font-size:15px;font-weight:700;margin:0}
.rn-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin:18px 0}
.rn-kpis div{background:var(--rn-bg);border:1px solid var(--rn-line);border-radius:12px;padding:14px 12px;text-align:center}
.rn-kpis b{display:block;font-size:26px;color:var(--rn-blue);line-height:1.2}
.rn-kpis span{font-size:14px;color:var(--rn-muted)}
.rn-table-wrap{overflow-x:auto;margin:10px 0 12px;border:1px solid var(--rn-line);border-radius:10px}
.rn-table{border-collapse:collapse;width:100%;font-size:16px;min-width:520px}
.rn-table th,.rn-table td{padding:10px 12px;border-bottom:1px solid var(--rn-line);text-align:left;vertical-align:top;line-height:1.5}
.rn-table thead th{background:var(--rn-bg);font-weight:700;color:var(--rn-navy)}
.rn-table tbody th{background:#FAFBFC;font-weight:700;width:34%}
.rn-note{font-size:14px;color:var(--rn-muted);background:var(--rn-bg);padding:10px 14px;border-radius:8px}
.rn-steps2{list-style:none;padding:0!important;display:flex;flex-direction:column;gap:8px}
.rn-steps2 li{display:grid;grid-template-columns:200px 1fr;gap:12px;padding:12px 14px;border:1px solid var(--rn-line);border-radius:10px;background:#fff;margin:0}
.rn-steps2 li b{color:var(--rn-navy)}
.rn-steps2 li span{color:#3F4B55}
.rn-cols3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.rn-cols3 > div{background:var(--rn-bg);border:1px solid var(--rn-line);border-radius:12px;padding:14px 16px}
.rn-cols3 b{display:block;margin-bottom:8px;color:var(--rn-navy);font-size:17px}
.rn-cols3 ul{padding-left:18px;font-size:15px}
.rn-timeline{display:flex;flex-direction:column;gap:14px;margin:16px 0}
.rn-year{display:grid;grid-template-columns:110px 1fr;gap:14px;border-left:4px solid var(--rn-blue);padding-left:16px}
.rn-year .y{font-size:26px;font-weight:800;color:var(--rn-blue);line-height:1.2}
.rn-year ul{margin:0;padding-left:18px}
.rn-quote{margin:12px 0;padding:14px 18px;background:var(--rn-bg);border-left:4px solid var(--rn-green);border-radius:0 10px 10px 0}
.rn-quote p{margin:0 0 6px;font-size:16px}
.rn-quote cite{font-style:normal;font-size:14px;color:var(--rn-muted)}
/* 모바일 세로 길이 축소: 신청에 필수는 아닌 "실제 도입 사례"/"믿을 수 있는 OO" 같은 보조 섹션을 접어 기본 스크롤을 줄인다 */
/* group_jeobsu.html: 표(<td>) 밖으로 .rn-doc를 꺼내면서 드러난 문제 — <fieldset>은 브라우저 기본값으로 min-width:min-content를 가져,
   안의 그리드 콘텐츠(.rn-kpis 등)가 좁은 화면에서도 최소 너비를 유지하고 부모(overflow:hidden)에 잘려 보였다. */
.ncs-payment fieldset{min-width:0}
.rn-more-sec{margin-top:16px;border:1px solid var(--rn-line);border-radius:10px;padding:0 14px;background:#fff}
.rn-more-sec summary{cursor:pointer;font-weight:700;color:var(--rn-navy);font-size:16px;padding:14px 0;list-style:none}
.rn-more-sec summary::-webkit-details-marker{display:none}
.rn-more-sec summary::before{content:'+ ';color:var(--rn-blue)}
.rn-more-sec[open] summary::before{content:'– '}
.rn-more-sec .rn-sec{border-top:0;padding:0 0 18px}
.rn-orig{margin-top:20px;border:1px solid var(--rn-line);border-radius:10px;padding:10px 14px;background:#fff}
.rn-orig summary{cursor:pointer;font-weight:700;color:var(--rn-muted);font-size:15px}
.rn-orig img{width:100%;margin-top:10px;display:block}
@media (max-width:720px){.rn-steps2 li{grid-template-columns:1fr;gap:4px}.rn-cols3{grid-template-columns:1fr}.rn-year{grid-template-columns:1fr;gap:4px}.rn-doc h2{font-size:24px}.rn-doc{font-size:17px}}

/* ---------- 5. 컨설팅 신청 페이지 (custom/consult_risk.html, consult_sapa.html) — 출강문의하기와 같은 '안내 + 신청서' 구성 ---------- */
.rn-consult{max-width:980px}
.rn-cta-row{display:flex;gap:10px;flex-wrap:wrap;margin:6px 0 18px}
.rn-cta-row .rn-big{width:auto;flex:1;min-width:220px;min-height:56px;font-size:18px}
.rn-consult .rn-kpis{margin:0 0 6px}
.rn-form2{background:#fff;border:2px solid var(--rn-blue);border-radius:16px;padding:22px}
.rn-form2 .grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.rn-form2 label{display:flex;flex-direction:column;gap:6px;font-size:16px;font-weight:700;color:var(--rn-ink);margin:0}
.rn-form2 label em{color:var(--rn-red);font-style:normal}
.rn-form2 label.full{grid-column:1 / -1}
.rn-form2 input,.rn-form2 select,.rn-form2 textarea{width:100%;min-height:50px;border:2px solid #C9D3DE;border-radius:10px;padding:10px 14px;font-size:17px;font-family:inherit;font-weight:500;background:#fff;color:var(--rn-ink)}
.rn-form2 textarea{min-height:120px;resize:vertical}
.rn-form2 input:focus,.rn-form2 select:focus,.rn-form2 textarea:focus{outline:none;border-color:var(--rn-blue);box-shadow:0 0 0 3px #DCE8FB}
.rn-form2 .agree{flex-direction:row;align-items:flex-start;gap:10px;font-weight:500;font-size:16px;margin:16px 0 12px;padding:12px 14px;border:1px solid var(--rn-line);border-radius:10px;background:var(--rn-bg)}
.rn-form2 .agree input{width:24px;height:24px;min-height:0;flex:none;margin-top:1px}
.rn-form2 .foot{font-size:14px;color:var(--rn-muted);text-align:center;margin:12px 0 0}
.rn-form2 .rn-note{margin-bottom:14px}
/* 필드 8~10개가 구분 없이 한 화면에 몰려 있어 부담스러워 보이는 문제 → 구획 제목으로 시각적으로만 나눔(단계 이동 없음) */
.rn-form2 .sec-title{grid-column:1 / -1;font-size:15px;font-weight:800;color:var(--rn-blue);margin:8px 0 -4px;padding-top:14px;border-top:1px solid var(--rn-line)}
.rn-form2 .sec-title:first-child{border-top:0;padding-top:0;margin-top:0}
.rn-form2 .sec-title small{font-weight:500;color:var(--rn-muted);font-size:13px}

/* 2차 최적화 7번: 인풋 아래 형식 예시를 보여주는 공용 도우미 텍스트 (ex_input.jpg 참고 — "형식 그대로 따라 쓰면 끝").
   .rn-form2뿐 아니라 랜딩/자동조회 등 다른 폼 클래스에서도 재사용하도록 범용 클래스로 둔다. */
.rn-field-hint{display:block;margin-top:6px;font-size:13px;font-weight:500;color:var(--rn-muted);line-height:1.4}
/* 3칸(010/앞4자리/뒷4자리) 분할 phone-wrapper를 단일 입력으로 전환할 때, 기존 5열 grid(4fr 1fr 8fr 1fr 8fr 등)에
   입력창 1개만 남으면 첫 트랙에만 걸쳐 좁게 보이는 문제 → 전체 트랙에 걸치도록 강제. .phone-wrapper가 grid가 아닌
   페이지(구형 news_view 등)에서는 별 효과 없이 무해하게 무시된다. */
.phone-wrapper .rn-phone-auto{grid-column:1 / -1}
.rn-sec.rn-apply{background:#F3F7FF;border:1px solid #CFE0FA;border-radius:14px;padding:20px 20px 22px;margin-top:14px}
.rn-sec.rn-apply h3{font-size:24px}
/* 위험성평가 절차 4단계 흐름 + 갈림길(허용가능/불가능) */
.rn-flow{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:14px 0}
.rn-flow div{background:var(--rn-bg);border:1px solid var(--rn-line);border-radius:12px;padding:14px 10px;text-align:center;position:relative;font-size:14px}
.rn-flow div b{display:block;color:var(--rn-navy);font-weight:700}
.rn-flow div:not(:last-child):after{content:'→';position:absolute;right:-13px;top:50%;transform:translateY(-50%);color:var(--rn-muted);font-size:18px}
.rn-flow-branch{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:10px 0 4px}
.rn-flow-branch div{border-radius:12px;padding:14px;text-align:center;font-size:14px;font-weight:700}
.rn-flow-branch .ok{background:var(--k-green-soft);color:#1F7A44;border:1px solid #BFE3CC}
.rn-flow-branch .no{background:var(--k-amber-soft);color:#8A5A12;border:1px solid #F5D3A8}
/* 왜 대한안전보건교육원인가 — 4칸 카드 */
.rn-why{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin:14px 0}
.rn-why > div{background:#fff;border:1px solid var(--rn-line);border-radius:12px;padding:16px 18px}
.rn-why b{display:block;color:var(--rn-navy);font-size:17px;margin-bottom:6px}
.rn-why ul{margin:6px 0 0;padding-left:18px;font-size:15px}
.rn-why p{margin:0;font-size:15px;color:#3F4B55}
@media (max-width:720px){.rn-form2 .grid{grid-template-columns:1fr}.rn-form2{padding:16px}.rn-cta-row .rn-big{min-width:0;width:100%}.rn-flow{grid-template-columns:1fr 1fr}.rn-flow div:after{display:none}.rn-why{grid-template-columns:1fr}}

/* ---------- 6. 학습 매뉴얼 페이지 (ncs/manual.html) ---------- */
.rn-man{max-width:1100px;margin:0 auto;padding:10px 16px 48px;color:var(--rn-ink);font-size:17px;line-height:1.6}
.rn-man h2{font-size:28px;color:var(--rn-navy);margin:6px 0 4px;text-wrap:balance}
.rn-man .lead{color:var(--rn-muted);margin:0 0 16px;font-size:16px}
.rn-mtabs{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:0 0 14px}
.rn-mtabs button{appearance:none;border:2px solid var(--rn-line);background:#fff;border-radius:12px;min-height:64px;font-size:18px;font-weight:700;color:var(--rn-ink);cursor:pointer;font-family:inherit;padding:8px 12px;line-height:1.3}
.rn-mtabs button[aria-selected="true"]{border-color:var(--rn-blue);background:var(--rn-blue);color:#fff}
.rn-mtabs button small{display:block;font-size:13px;font-weight:500;opacity:.8;margin-top:2px}
.rn-mtop{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:12px 14px;background:var(--rn-bg);border:1px solid var(--rn-line);border-radius:12px;margin-bottom:18px}
.rn-mtop .rn-label{font-size:14px;color:var(--rn-muted);font-weight:700;margin-right:4px}
.rn-mtop a.rn-tog{text-decoration:none}
.rn-mtop .dl{margin-left:auto}
.rn-msec{padding:22px 0 8px;border-top:2px solid var(--rn-line)}
.rn-msec h3{font-size:22px;color:var(--rn-navy);margin:0 0 4px;display:flex;align-items:center;gap:10px}
.rn-msec h3 .rn-num{margin:0;font-size:15px}
.rn-msec .desc{color:var(--rn-muted);font-size:15px;margin:0 0 14px}
.rn-notes{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:10px;margin:0 0 16px}
.rn-notes div{background:var(--rn-navy);color:#fff;border-radius:14px;padding:16px 18px}
.rn-notes b{display:block;font-size:18px;margin-bottom:6px}
.rn-notes ul{margin:0;padding-left:18px;font-size:15px;line-height:1.55}
.rn-notes.light div{background:var(--rn-bg);color:var(--rn-ink);border:1px solid var(--rn-line)}
.rn-notes.light b{color:var(--rn-navy)}
.rn-step{display:grid;grid-template-columns:minmax(260px,1fr) minmax(0,1.5fr);gap:18px;align-items:start;padding:16px 0;border-top:1px dashed var(--rn-line)}
.rn-step:first-of-type{border-top:0}
.rn-step .num{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--rn-blue);color:#fff;font-weight:800;font-size:17px;flex:none}
.rn-step h4{display:flex;align-items:center;gap:10px;font-size:20px;margin:0 0 8px;color:var(--rn-navy);line-height:1.3}
.rn-step ul{margin:0;padding-left:20px;font-size:16px;line-height:1.6}
.rn-step li{margin-bottom:4px}
.rn-step .tip{margin-top:10px;font-size:14px;color:#B35C00;background:#FFF6E8;border:1px solid #F5D3A8;border-radius:8px;padding:8px 12px}
.rn-step figure{margin:0;border:1px solid var(--rn-line);border-radius:12px;overflow:hidden;background:#fff}
.rn-step figure img{width:100%;display:block}
.rn-step figure figcaption{font-size:13px;color:var(--rn-muted);padding:6px 10px;border-top:1px solid var(--rn-line);text-align:right}
.rn-step figure a{color:var(--rn-blue)}
.rn-mfoot{margin-top:24px;padding:16px 18px;background:var(--rn-bg);border-radius:12px;font-size:15px;color:var(--rn-muted)}
@media (max-width:860px){.rn-mtabs{grid-template-columns:1fr}.rn-mtabs button{min-height:54px}.rn-step{grid-template-columns:1fr;gap:10px}.rn-man h2{font-size:24px}.rn-mtop .dl{margin-left:0;width:100%}}

/* ---------- 2.5 밋팀 입장 전 자가 점검 페이지 ---------- */
.rn-pre{max-width:960px;margin:0 auto;padding:10px 16px 40px;font-size:17px;line-height:1.6;color:var(--rn-ink)}
.rn-pre h2{font-size:30px;margin:8px 0 6px;color:var(--rn-navy);text-wrap:balance;line-height:1.3}
.rn-pre .lead{color:#4A5560;font-size:17px;margin:0 0 22px}
.rn-steps{display:flex;gap:10px;margin-bottom:22px}
.rn-steps .s{flex:1;padding:12px 14px;border-radius:12px;border:2px solid var(--rn-line);font-weight:700;font-size:16px;display:flex;gap:10px;align-items:center;color:var(--rn-muted);background:#fff}
.rn-steps .s .num{width:34px;height:34px;border-radius:50%;background:#EEF1F5;display:grid;place-items:center;font-size:16px;flex:none}
.rn-steps .s.on{border-color:var(--rn-blue);color:var(--rn-navy);background:#F3F7FF}
.rn-steps .s.on .num{background:var(--rn-blue);color:#fff}
.rn-steps .s.done{border-color:var(--rn-green);color:#1F7A44;background:#F1FAF4}
.rn-steps .s.done .num{background:var(--rn-green);color:#fff}
.rn-panel{border:1px solid var(--rn-line);border-radius:16px;padding:22px;background:#fff;box-shadow:0 2px 8px rgba(30,50,66,.06);margin-bottom:18px}
.rn-panel h3{font-size:22px;margin:0 0 6px;color:var(--rn-navy)}
.rn-panel .sub{color:var(--rn-muted);margin:0 0 16px;font-size:15px}
.rn-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:12px 0 18px}
.rn-card{border:2px solid var(--rn-line);border-radius:14px;padding:16px;text-align:center;min-height:150px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;background:#fff}
.rn-card .ic{font-size:40px;line-height:1}
.rn-card .t{font-weight:700;font-size:17px}
.rn-card .st{font-size:15px;color:var(--rn-muted)}
.rn-card.ok{border-color:var(--rn-green);background:#F1FAF4}.rn-card.ok .st{color:#1F7A44;font-weight:700}
.rn-card.bad{border-color:var(--rn-red);background:#FDF3F3}.rn-card.bad .st{color:#B42323;font-weight:700}
.rn-preview{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:stretch}
.rn-video{position:relative;background:#0E2A42;border-radius:14px;overflow:hidden;min-height:250px;display:grid;place-items:center;color:#cfe0ec;font-size:15px;text-align:center;padding:12px}
.rn-video video{width:100%;height:100%;object-fit:cover;display:block;position:absolute;inset:0;transform:scaleX(-1)}
.rn-video .guide{position:absolute;inset:0;display:none;place-items:center;pointer-events:none}
.rn-video.face .guide{display:grid}
.rn-video .guide i{width:46%;aspect-ratio:3/4;border:3px dashed rgba(255,255,255,.9);border-radius:50% 50% 46% 46%;display:block}
.rn-video .msg{position:absolute;bottom:10px;left:0;right:0;text-align:center;font-weight:700;text-shadow:0 1px 3px #000;color:#fff;font-size:15px}
.rn-mic{border:2px solid var(--rn-line);border-radius:14px;padding:16px;display:flex;flex-direction:column;gap:10px;justify-content:center;background:#fff}
.rn-mic .t{font-weight:700;font-size:17px}
.rn-meter{height:24px;border-radius:999px;background:#EEF1F5;overflow:hidden;border:1px solid var(--rn-line)}
.rn-meter i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--rn-green),#8FD19E);transition:width .08s}
.rn-big{appearance:none;border:0;border-radius:14px;background:var(--rn-blue);color:#fff;font-size:20px;font-weight:800;min-height:64px;padding:0 28px;cursor:pointer;width:100%;display:inline-flex;align-items:center;justify-content:center;gap:10px;font-family:inherit;text-decoration:none;box-sizing:border-box}
.rn-big.secondary{background:#fff;color:var(--rn-navy);border:2px solid var(--rn-navy)}
.rn-big[disabled]{background:#C7D0DA;cursor:not-allowed;border-color:#C7D0DA;color:#fff}
.rn-help{background:var(--rn-bg);border-radius:12px;padding:14px 16px;font-size:15px;margin-top:14px}
.rn-help b{display:block;margin-bottom:4px}
.rn-help ol{margin:0;padding-left:20px}
.rn-agree{display:flex;flex-direction:column;gap:10px;margin:10px 0 18px}
.rn-agree label{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border:2px solid var(--rn-line);border-radius:12px;cursor:pointer;font-size:16px;background:#fff}
.rn-agree input{width:24px;height:24px;flex:none;margin-top:2px}
.rn-agree label.checked{border-color:var(--rn-green);background:#F1FAF4}
.rn-actions-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:6px}
.rn-actions-row .rn-big{width:auto;flex:1}
@media (max-width:720px){.rn-cards{grid-template-columns:1fr}.rn-steps{flex-direction:column}.rn-preview{grid-template-columns:1fr}.rn-pre h2{font-size:24px}}
@media (prefers-reduced-motion:reduce){.rn-meter i{transition:none}}

/* 페이지 제목 */
#sub_content{margin:36px auto!important}
#sub_content>.title{margin-bottom:28px!important}
#sub_content>.title h2{font-size:28px!important;font-weight:800!important;color:var(--k-navy)!important;letter-spacing:-.5px;margin-bottom:6px!important}
#sub_content>.title h3{font-size:16px!important;color:var(--k-gray)!important;padding:6px 0 18px!important}
#sub_content>.title .line{background:var(--k-line)!important}
.sub_title .tit{border-left:6px solid var(--k-brand)!important;color:var(--k-navy)!important;font-weight:800!important;font-size:22px!important;padding-left:12px!important;letter-spacing:-.3px}
.sub_title .tit02{color:var(--k-navy)!important;font-weight:700!important}
.sub_content{color:var(--k-ink)!important}

/* ---------- v4-D. 버튼 — 사이트의 모든 주요 CTA를 한 가지 모양으로 (WWIT: 주문/결제 패턴의 풀폭 기본 버튼) ---------- */
.btn-naeil_enroll, .btn-dg_enroll, .btn-order, .study-btn, .login_box .l_btn1 input, #main-new .section-wrapper > div > a,
.join_box .ident_box .ident_btn, .ncs-payment .btn, .popup-button .btn-black, .btn_wrap .btn_box .btn4 a, .join_in .btn4 a,
.login_box .seek .btn_box .l_btn2 a, .login_box .seek .btn_box .l_btn3 a, #sub_content>.title button.btn-submit, #sub_content>.title button.btn-submit2,
.rn-big,.rn-btn.primary,.rn-course .actions .apply{
  background:var(--k-brand)!important;color:#fff!important;border:0!important;border-radius:var(--k-r-md)!important;
  font-weight:700!important;letter-spacing:-.2px;line-height:1.2!important;box-shadow:none!important;text-decoration:none;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;transition:background .15s,transform .05s;box-sizing:border-box}
/* 인라인 style="display:none" (접수하기 예비 버튼 등)은 그대로 숨김 유지 */
[style*="display:none"],[style*="display: none"]{display:none}
/* 단체신청 페이지의 초록·하늘·파랑 버튼 3종 통일 */
.type-btn,.copy-button,button.type-btn[style]{background:var(--k-brand)!important;color:#fff!important;border:0!important;border-radius:var(--k-r-sm)!important;min-height:48px;padding:0 16px!important;font-weight:700!important;font-size:16px!important;cursor:pointer}
.type-btn:hover,.copy-button:hover{background:var(--k-brand-dark)!important}
a.form-download,a.form-download[style]{background:var(--k-brand)!important;color:#fff!important;border:0!important;border-radius:var(--k-r-sm)!important;display:inline-flex!important;align-items:center;min-height:48px;padding:0 16px!important;font-weight:700!important;font-size:16px!important;text-decoration:none}
/* 게시판 글쓰기·취소 (1:1문의 등): 검정 → 브랜드 / 테두리형 */
.btn_box3 .b3_btn2{background:var(--k-brand)!important;border:0!important;border-radius:var(--k-r-md)!important;font-weight:700!important;height:48px!important;line-height:48px!important;min-width:120px;color:#fff!important}
.btn_box3 .b3_btn2:focus,.btn_box3 .b3_btn2:hover{background:var(--k-brand-dark)!important;color:#fff!important;border:0!important}
.btn_box3 .b3_btn1{border:1.5px solid var(--k-line-strong)!important;border-radius:var(--k-r-md)!important;color:var(--k-gray)!important;height:48px!important;font-weight:600}
/* 회원가입 약관 동의 체크 행: 오른쪽 넘침 방지 */
p.checkbox02,.agree_box .checkbox{float:none!important;display:flex!important;align-items:center;justify-content:flex-end;gap:8px;padding:10px 0;width:auto!important;max-width:100%;box-sizing:border-box;position:static!important;margin:0!important}
p.checkbox02 label,.agree_box .checkbox label{display:inline-flex!important;align-items:center;gap:8px;font-weight:600;color:var(--k-ink);white-space:nowrap;padding:0!important;margin:0!important;position:static!important;width:auto!important;height:auto!important;min-height:0;background:none!important;border:0!important}
p.checkbox02 input,.agree_box .checkbox input{width:22px!important;height:22px!important;min-height:0;margin:0!important;position:static!important;opacity:1!important;appearance:auto!important;-webkit-appearance:checkbox!important}
p.checkbox02 label:before,p.checkbox02 label:after{display:none!important}
.join_box .fL,.join_box1 .fL{float:none!important;display:block;color:var(--k-gray);font-size:16px}
/* 공지사항 계열 탭(.sub_tab02): 세그먼트 컨트롤 */
ul.sub_tab02{display:flex!important;flex-wrap:wrap;gap:6px;padding:6px;background:var(--k-bg);border:1px solid var(--k-line);border-radius:14px;box-sizing:border-box;table-layout:auto}
ul.sub_tab02 > li{display:block!important;flex:1 1 auto;float:none!important;border:0!important;background:transparent!important;border-radius:10px;position:static!important;text-align:center}
ul.sub_tab02 > li a,ul.sub_tab02 > li span{display:flex!important;align-items:center;justify-content:center;min-height:44px;padding:8px 10px!important;color:var(--k-gray)!important;font-size:16px!important;font-weight:600!important;border-radius:10px;line-height:1.3!important;height:auto!important;letter-spacing:0!important}
ul.sub_tab02 > li.on,ul.sub_tab02 > li.active{background:#fff!important;box-shadow:var(--k-shadow)}
ul.sub_tab02 > li.on a,ul.sub_tab02 > li.on span,ul.sub_tab02 > li.active a{color:var(--k-brand)!important;font-weight:800!important}
ul.sub_tab02 > li.on:after,ul.sub_tab02 > li.on:before{display:none!important}
.login_box .seek .checkbox02{justify-content:flex-start;padding:0}
/* 게시판 검색 상자 */
.board_search select,.board_search input[type=text],.search_box select,.search_box input[type=text]{border:1.5px solid var(--k-line-strong)!important;border-radius:10px!important;min-height:44px;font-size:15px!important}
.btn-naeil_enroll:hover, .btn-dg_enroll:hover, .btn-order:hover, .study-btn:hover, .login_box .l_btn1 input:hover, #main-new .section-wrapper > div > a:hover,
.join_box .ident_box .ident_btn:hover,.ncs-payment .btn:hover,.popup-button .btn-black:hover,.rn-big:hover,.rn-btn.primary:hover,.rn-course .actions .apply:hover{background:var(--k-brand-dark)!important;color:#fff!important}
.btn-naeil_enroll:active,.btn-dg_enroll:active,.btn-order:active,.rn-big:active{transform:translateY(1px)}
.btn-naeil_enroll,.btn-dg_enroll{width:100%!important;min-height:56px;font-size:18px!important;padding:0 16px!important;margin-top:12px!important}
.btn-dg_enroll{background:var(--k-navy)!important}                                  /* 대기신청 = 보조 강조 */
.btn-dg_enroll:hover{background:#0C2238!important}
.btn-order,.btn-readonly{height:auto!important;min-height:48px;border-radius:var(--k-r-md)!important;font-size:16px!important;font-weight:700!important}
.ncs-all tr td .btn-order,.ncs-video .btn-order,.ncs-video2 tr td .btn-order,.ncs-post .btn-order{background:var(--k-brand)!important}   /* 열마다 다르던 파랑·하늘·초록 통일 */
.btn-readonly{background:#8A94A0!important;color:#fff!important}
.study-btn{min-height:44px;padding:0 18px!important;font-size:15px!important}
.login_box .l_btn1 input{width:100%!important;height:56px!important;line-height:56px!important;font-size:18px!important}

.ncs-payment .btn{height:auto!important;line-height:1.2!important;min-height:48px;padding:0 28px!important}
.ncs-payment .ncs-method .btn-wrap .btn-prev,.ncs-payment .content-area .btn-wrap .btn.btn-prev{background:#fff!important;color:var(--k-gray)!important;border:1.5px solid var(--k-line-strong)!important}
#sub_content>.title button.btn-submit,#sub_content>.title button.btn-submit2{font-size:18px!important;font-weight:700!important;padding:14px 24px!important;min-height:52px}
#sub_content>.title button.btn-submit2{background:var(--k-navy)!important}
.join_box .ident_box .ident_btn{height:auto!important;line-height:1.2!important;min-height:52px;border-radius:var(--k-r-md)!important}
/* 보조(테두리) 버튼 */
.rn-big.secondary,.rn-course .actions .sched,.lec-inq .btn-ghost,.login_join_button a,.join_in .btn4 a,.btn_box2 .btn4{border-radius:var(--k-r-md)!important}
.rn-big.secondary,.rn-course .actions .sched,.login_join_button a,.join_in .btn4 a{background:#fff!important;color:var(--k-brand)!important;border:1.5px solid var(--k-brand)!important;font-weight:700}
.rn-big.secondary:hover,.rn-course .actions .sched:hover,.login_join_button a:hover{background:var(--k-brand-soft)!important}
.rn-big{border-radius:var(--k-r-md)!important}
.rn-big[disabled]{background:#C7D0DA!important;color:#fff!important}
/* 소셜 로그인은 각 서비스 브랜드 색을 유지하되 모양만 통일 */
.kakao_start_button,.login_box .kakao_login_area a,.login_box .naver_login_area a{border-radius:var(--k-r-md)!important;overflow:hidden;display:block}

/* ---------- v4-E. 탭 — 세그먼트 컨트롤 한 가지 (WWIT: 선택/리스트 상단 탭) ---------- */
.faq_tab,.sub_tab2 ul,.sub_tab03,.tab_menu{display:flex!important;flex-wrap:wrap;gap:6px;padding:6px!important;background:var(--k-bg)!important;border:1px solid var(--k-line)!important;border-radius:14px!important;table-layout:auto!important;box-sizing:border-box}
.faq_tab li,.sub_tab2 ul li,.sub_tab03 li,.tab_menu li{display:block!important;flex:1 1 auto;float:none!important;height:auto!important;line-height:1.3!important;border:0!important;background:transparent!important;border-radius:10px!important;color:var(--k-gray)!important;font-size:16px!important;font-weight:600!important;text-align:center;position:static!important;min-width:0}
.faq_tab li a,.faq_tab li span,.sub_tab2 ul li a,.sub_tab03 li a,.tab_menu li a{display:flex!important;align-items:center;justify-content:center;gap:6px;min-height:44px;padding:8px 10px!important;line-height:1.3!important;font-size:16px!important;letter-spacing:0!important;color:var(--k-gray)!important;font-weight:600!important;border-radius:10px}
.tab_menu li{padding:12px 8px;min-height:44px;display:flex!important;align-items:center;justify-content:center}
.faq_tab li:hover,.sub_tab2 ul li:hover,.sub_tab03 li:hover,.tab_menu li:hover{background:rgba(36,107,235,.06)!important}
.faq_tab .on,.sub_tab2 ul li.on,.sub_tab03 .on,.tab_menu li.on{background:#fff!important;box-shadow:var(--k-shadow)!important;color:var(--k-brand)!important}
.faq_tab .on a,.faq_tab .on span,.sub_tab2 ul li.on a,.sub_tab03 .on a,.sub_tab03 .on span,.tab_menu li.on a{color:var(--k-brand)!important;font-weight:800!important}
.faq_tab .on:after,.sub_tab2 ul li.on:after,.tab_menu li.on:before{display:none!important}
.sub_tab2 .tab_line{display:none!important}
.sub_tab2 ul li.on{border-color:transparent!important}
.tab_menu.fixed{left:16px!important;right:16px;width:auto!important;box-shadow:var(--k-shadow-lg)!important;z-index:50}
.sub_tab2 .col{width:auto!important}
.tab_box1 .sub_tab2.mo_tab ul li{font-size:14px!important}

/* ---------- v4-F. 표 · 아코디언 · 입력 ---------- */
.table-ncs th{background:var(--k-bg)!important;color:var(--k-navy)!important;border-radius:var(--k-r-sm)!important}
.l_tb01{border:1px solid var(--k-line)!important;border-radius:var(--k-r-md)!important;overflow:hidden;width:100%!important}
.l_th01{background:var(--k-bg)!important;color:var(--k-navy)!important;font-weight:700!important;font-size:14px!important}
.l_td01{font-size:16px!important}
.f_tb01 th,.f_tb01 td{border-color:var(--k-line)!important}
#container th,.sub_content th,#sub_content th{background:var(--k-bg);color:var(--k-navy);font-weight:700}
.faq_box .faq_list .faq_con{border:1px solid var(--k-line)!important;border-radius:var(--k-r-md);margin-bottom:8px;background:#fff;overflow:hidden}
.faq_box .faq_list .faq_con:first-child{border-top:1px solid var(--k-line)!important}
.faq_box .faq_list .faq_con .faq_q{font-size:17px!important;padding:16px 52px!important;color:var(--k-ink)!important;font-weight:600;line-height:1.5;min-height:56px;display:flex;align-items:center}
.faq_box .faq_list .faq_con .faq_q:hover{text-decoration:none!important;background:var(--k-brand-tint)}
.faq_box .faq_list .faq_con .faq_q .q{color:var(--k-brand)!important;font-weight:800!important;top:50%;transform:translateY(-50%)}
.faq_box .faq_list .faq_con .faq_q:before,.faq_box .faq_list .faq_con .faq_q:after{background:var(--k-gray)!important}
.faq_box .faq_list .faq_con .faq_q.on{background:var(--k-brand-soft);color:var(--k-brand)!important}
.faq_box .faq_list .faq_con .faq_q.on:before{border-top:0!important;background:none!important}
.faq_box .faq_list .faq_con .faq_q.on:after{background:var(--k-brand)!important}
.faq_box .faq_list .faq_con .faq_a{background:#fff!important;border-top:1px solid var(--k-line)!important;font-size:16px!important;line-height:1.7;color:var(--k-ink)!important;padding:18px 20px 20px 52px!important}
.faq_box .faq_list .faq_con .faq_a .a{color:var(--k-brand)!important}
.faq_box .faq_list .faq_con .faq_q.on .a{color:var(--k-brand)!important}
/* 입력 — 높이 48~52px, 모서리 10px, 초점은 브랜드 색 (iOS 확대 방지 16px) */
#container input[type=text], #container input[type=password], #container input[type=email], #container input[type=tel], #container input[type=number], #container input[type=search], #container select, #container textarea,
#sub_content input[type=text], #sub_content input[type=password], #sub_content input[type=email], #sub_content input[type=tel], #sub_content input[type=number], #sub_content select, #sub_content textarea,
.login_box .l_txt input,.join_box input[type=text],.join_box input[type=password],.join_box select,#classDropdown{
  border:1.5px solid var(--k-line-strong)!important;border-radius:10px!important;min-height:48px;padding:0 14px!important;font-size:16px!important;color:var(--k-ink)!important;background-color:#fff;box-sizing:border-box;line-height:1.3!important}
#container textarea,#sub_content textarea{padding:12px 14px!important}
#container input:focus,#container select:focus,#container textarea:focus,#sub_content input:focus,#sub_content select:focus,#sub_content textarea:focus,.login_box .l_txt input:focus,#classDropdown:focus{outline:none;border-color:var(--k-brand)!important;box-shadow:0 0 0 3px #DCE8FB}
.login_box .l_txt input{height:52px!important;line-height:52px!important;margin-bottom:10px!important;width:100%!important}
.login_box .l_txt input::placeholder{color:var(--k-muted)!important}
.login_box>h3{font-size:26px!important;color:var(--k-navy);font-weight:800}
.login_box .seek .checkbox02,.login_box .seek .seek_span{font-size:15px!important}
.login_find_links a{color:var(--k-brand);font-weight:600}
.join_box .all_chk{border:1.5px solid var(--k-line)!important;border-radius:var(--k-r-md);color:var(--k-ink)!important;background:var(--k-bg)}
.join_box .chk_box .con{border:1px solid var(--k-line)!important;border-radius:var(--k-r-md);background:#fff!important}
.join_box .chk_box .tit{color:var(--k-navy)}
.join_box .ident_box{border-radius:var(--k-r-lg);background:var(--k-bg)!important}
#classDropdown{width:100%!important;height:50px!important;padding:0 42px 0 14px!important;font-weight:600;background:#fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2312324F' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>") no-repeat right 14px center!important}
.jeongsi_box th,.jeongsi_box td{vertical-align:middle}

/* ---------- v4-I. 모바일 안정화 (≤767px) ---------- */
@media (max-width:767px){
img{max-width:100%;height:auto}

#sub_content{margin:24px auto!important;padding:0 16px;box-sizing:border-box}
#sub_content>.title h2{font-size:24px!important}
.sub_content{padding:0 16px!important}
  /* 표: 화면보다 넓으면 카드 안에서 가로 스크롤 (renewal.js 가 .rn-tscroll 로 감쌈) */
.rn-tscroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 -4px;padding:0 4px;border-radius:var(--k-r-sm)}
.rn-tscroll > table{min-width:520px}
.tab_menu{margin-top:24px!important}
.tab_menu li,.faq_tab li,.sub_tab2 ul li,.sub_tab03 li{flex:1 1 calc(50% - 6px)}
.faq_box .faq_list .faq_con .faq_q{padding:14px 44px 14px 44px!important;font-size:16px!important}
.faq_box .faq_list .faq_con .faq_a{padding:16px 16px 18px 44px!important}
.login_box{padding:0 16px!important}

  /* 하단 고정 CTA (WWIT 주문/결제 패턴) — renewal.js 가 신청 페이지에서 생성 */
body.rn-has-sticky{padding-bottom:88px!important}
.rn-sticky{position:fixed;left:0;right:0;bottom:0;z-index:9000;background:#fff;border-top:1px solid var(--k-line);box-shadow:0 -6px 20px rgba(18,50,79,.12);padding:10px 16px calc(10px + env(safe-area-inset-bottom));display:flex;align-items:center;gap:12px;font-family:var(--k-font)}
.rn-sticky .info{flex:1;min-width:0;line-height:1.25}
.rn-sticky .info b{display:block;font-size:19px;color:var(--k-ink);font-variant-numeric:tabular-nums}
.rn-sticky .info small{display:block;font-size:13px;color:var(--k-gray);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rn-sticky .rn-big{width:auto;flex:0 0 auto;min-width:150px;min-height:52px;font-size:17px;margin:0}
.rn-sticky.wait .rn-big{background:var(--k-navy)!important}
.rn-sticky.off .rn-big{background:#C7D0DA!important}
  /* 달력 모바일: 셀 터치 타깃 */
.mobile-day-cell{min-height:60px}
.mobile-schedule-item{padding:10px 12px}
  

}
@media (min-width:768px){.rn-sticky{display:none!important}}
/* 분할 모드에서는 달력 아래 신청 버튼과 겹쳐 숨긴다 (renewal.js) — display:flex가 [hidden]을 덮으므로 명시한다 */
.rn-sticky[hidden]{display:none!important}

/* 로그인 페이지 데모 계정 안내 */
.rn-login-hint{background:var(--k-bg);border:1px solid var(--k-line);border-radius:var(--k-r-sm);padding:12px 16px;margin:0 0 16px;font-size:14px;color:var(--k-gray);text-align:center}
.rn-login-hint b{color:var(--k-navy)}
.rn-login-err2{color:var(--k-red);font-size:14px;margin:10px 0 0;text-align:center;font-weight:600}

/* ===== v1.05 (2026-09-15) 분할 수강 · 신청 날짜 달력 · 시안 A/B 비교 띠 =====
 * A/B 프로그램 색은 상태 4색(초록·주황·빨강·회색)과 겹치지 않게 브랜드 파랑(A)·네이비(B)로 두고, 글자(A/B)로도 구분한다. */
/* 배지 안에 "A" 한 글자가 아니라 커리큘럼 이름이 들어간다 (2026-09-17) → 높이를 내용에 맡기고 줄바꿈을 막는다 */
.rn-ab{display:inline-flex;align-items:center;justify-content:center;min-width:20px;min-height:20px;padding:2px 7px;border-radius:5px;font-size:12px;font-weight:800;line-height:1.25;color:#fff;vertical-align:1px;font-style:normal;white-space:nowrap}
/* "분할수강" 표 — 칩에서는 **어느 차수가 대상인지만** 가리킨다. 개념 설명은 범례에 한 번 있다.
   ↺(순환)을 쓰다가 "다시 듣기"로 읽힌다는 지적을 받아 **두 칸으로 나뉜 네모**로 바꿨다 (PM 결정 2026-09-17).
   글자가 아니라 CSS로 그린다 — 기기·글꼴에 따라 모양이 달라지지 않는다 */
.rn-split-mark{flex:none;position:relative;display:inline-block;
  width:18px;height:18px;border-radius:4px;background:var(--k-brand);font-size:0}
.rn-split-mark::before{content:'';position:absolute;left:50%;top:4px;bottom:4px;width:2px;
  margin-left:-1px;background:#fff;border-radius:1px}
.rn-abs .rn-ab-lead{flex:0 1 auto;min-width:0;white-space:nowrap;line-height:1.4;font-size:12px;color:#3B4757}
.rn-abs{width:fit-content;max-width:100%}
/* 범례의 설명은 문장이므로 줄바꿈이 되어야 한다 */
.rn-split-legend{display:flex;align-items:flex-start;gap:7px;flex-basis:100%;margin-top:4px}
.rn-split-legend .rn-split-mark{margin-top:2px}
/* [분할수강이란?] — 달력 바로 위. 필터를 펴지 않아도 설명에 닿을 수 있게 한다 */
.rn-split-ask{display:inline-flex;align-items:center;gap:7px;min-height:44px;padding:0 15px;margin:0 auto 12px;
  background:var(--k-brand-soft);border:1px solid #CFE0FA;border-radius:999px;
  font-family:inherit;font-size:14.5px;font-weight:700;color:var(--k-brand-dark);cursor:pointer}
.rn-split-ask:hover{background:#E3EEFF}
/* 단체교육일정의 A·B 표 — 담당자가 **겹치지 않는 조합**을 고르는 데 쓰는 정보라 눈에 띄어야 한다.
   개별 화면에서는 A/B를 감추지만(운영팀 방침), 단체는 이것을 보려고 오는 화면이다 */
/* 달력 월 이동 화살표 — 원래 boxicons 라는 **바깥 글꼴**로 그리던 것이다.
   로컬에서 시안을 열 때 그 글꼴을 받아오느라 화면이 늦게 떠서 부르지 않기로 했고(2026-09-18),
   글꼴이 없으면 화살표 자리가 빈 동그라미로 남는다. 쓰이는 두 개만 글자로 대신한다 */
.bx{font-style:normal;line-height:1}
.bx-chevron-left::before{content:'\2039'}
.bx-chevron-right::before{content:'\203A'}
.bx-chevron-left,.bx-chevron-right{font-size:26px;font-weight:400}

.rn-gab{display:inline-flex;align-items:center;justify-content:center;flex:none;
  min-width:22px;height:20px;margin-left:6px;padding:0 6px;border-radius:5px;
  background:var(--k-brand);color:#fff;font-size:12px;font-weight:800;letter-spacing:-.01em}
.rn-gab.both{background:#6B7684;letter-spacing:-.04em}
/* 단체교육일정 머리 안내 — 이 화면에 왜 왔는지(좌석 확인)와 A·B 읽는 법을 한자리에 둔다 */
.rn-gnote{max-width:1300px;margin:0 auto 12px;padding:12px 16px;background:var(--k-brand-soft);
  border:1px solid #C9DDF8;border-radius:10px;font-size:14.5px;line-height:1.65;color:var(--k-ink)}
.rn-gnote b{font-weight:700}
.rn-gnote-ab{display:block;margin-top:6px;padding-top:6px;border-top:1px dashed #C9DDF8}
.rn-gnote-ab b{color:var(--k-brand-dark)}
@media (max-width:768px){.rn-gnote{margin:0 8px 12px;font-size:13.5px;padding:10px 12px}}
.rn-chip .lbl{min-width:0}
.rn-gogroup{display:inline-flex;align-items:center;min-height:44px;margin-top:4px;
  font-size:15.5px;font-weight:700;color:var(--k-brand);text-decoration:underline;text-underline-offset:3px}
/* "어떻게 신청하시겠습니까?" — 분할수강 가능한 차수를 눌렀을 때 뜨는 두 갈래 */
.rn-pick2{display:grid;gap:12px;padding:4px 2px}
.rn-pick2-b{display:block;padding:16px 18px;border:1.5px solid var(--k-line);border-radius:var(--k-r-md);
  background:#fff;text-decoration:none;color:var(--k-ink)}
.rn-pick2-b:hover{border-color:var(--k-brand);background:var(--k-brand-tint);text-decoration:none}
.rn-pick2-b b{display:flex;align-items:center;gap:8px;font-size:17.5px;font-weight:700;color:var(--k-ink);margin-bottom:4px}
.rn-pick2-b span{display:block;font-size:14.5px;line-height:1.6;color:var(--k-gray)}
.rn-pick2-b span b{display:inline;font-size:inherit;color:var(--k-ink);margin:0}
/* 두 선택지는 **같은 무게**로 둔다 (PM 결정 2026-09-17).
   한쪽을 파랗게 칠하면 "이쪽이 권장"으로 읽히는데, 분할수강이 더 나은 선택은 아니다 —
   하루 8시간이 가능한 분에게는 이틀 출석이 오히려 부담이다. 법정교육이라 근거 없는 권장 표시는 쓰지 않는다.
   대신 **사용자가 누른 것(분할수강)을 첫 번째에 두어** 색 없이도 찾기 쉽게 했다 */
.rn-split-pop{font-size:15.5px;line-height:1.7;color:var(--k-ink);padding:4px 2px}
.rn-split-pop b{color:var(--k-brand-dark)}
.rn-split-pop em{font-style:normal;color:var(--k-gray)}
@media (min-width:768px){.rn-split-ask{margin-left:0} }
/* 범례에서 A·B가 무엇인지 설명하는 문장 */
.rn-ab-note{font-size:12.5px;line-height:1.5;color:var(--k-gray);margin-left:4px}
.rn-ab-note b{color:var(--k-ink);font-weight:700}
.rn-ab-note em{font-style:normal;color:var(--k-muted)}
.rn-ab-a{background:var(--k-brand)}.rn-ab-b{background:var(--k-navy)}
.rn-ab+.rn-ab{margin-left:3px}   /* 한 날짜에 오전·오후 두 배지가 붙는다 */
/* 배지는 칩 안에서 제목 아랫줄로 — 제목 뒤에 붙으면 칩 너비가 들쭉날쭉해 날짜 칸 크기가 흔들린다 */
/* 분할 표시 줄 — 뒤에 무엇이 깔리든 읽히도록 자체 바탕을 깐다 (PM 지적 2026-09-17).
   PC 달력 칩은 연한 색, 모바일 목록은 업종색(진초록 등)이 깔리는데 글자색은 한 가지라,
   모바일에서 진한 배경 위 진회색이 되어 묻혔다. 바탕을 깔면 두 화면이 같아진다 */
.rn-abs{display:flex;flex-wrap:wrap;align-items:center;gap:3px;flex-basis:100%;margin-top:4px;
  background:rgba(255,255,255,.94);border-radius:7px;padding:3px 7px;box-sizing:border-box}
/* "분할 [A] 커리큘럼"의 앞뒤 글자 — 회색을 박아 두었더니 배경이 밝은 PC 칩에서는 읽혔지만
   모바일 목록의 배경에서는 묻혔다 (PM 지적 2026-09-17).
   칩·목록의 글자색을 그대로 따르게 해 어떤 배경에서도 대비가 살아 있게 한다.
   흐리기(opacity)로만 위계를 주므로 배지 [A]·[B]보다 앞서 읽히지도 않는다 */
.rn-ab-lead{font-style:normal;font-size:11.5px;font-weight:700;color:#3B4757;margin-right:1px}
.calendar-grid .rn-chip{flex-wrap:wrap}
.mobile-schedule-item .rn-abs,.mobile-schedule-group .rn-abs{margin-top:4px}
/* B안 안내 배너 — 모바일에서 길어 [자세히]로 접는다 */
.rn-splitguide p{margin:0}
.rn-sg-top{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.rn-sg-btn{appearance:none;min-height:32px;padding:0 10px;border:1px solid #B9CDF0;border-radius:999px;background:#fff;font-family:inherit;font-size:13px;font-weight:700;color:#1B3F7A;cursor:pointer}
.rn-sg-more{margin-top:8px!important;padding-top:8px;border-top:1px solid #C9D9F2}
.rn-legend .ab{display:inline-flex;align-items:center;gap:4px}

/* 시안 비교 띠 */
.rn-splitbar{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;max-width:1320px;margin:12px auto;padding:10px 14px;background:#FFF8EC;border:1px dashed #E8B86B;border-radius:var(--k-r-md);font-size:14px;color:#6B4A12;box-sizing:border-box}
.rn-sb-tag{font-weight:800;font-size:13px;background:#8A5A12;color:#fff;border-radius:6px;padding:3px 9px}
.rn-splitbar a{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 13px;border-radius:999px;border:1px solid #E8C993;background:#fff;color:#6B4A12;text-decoration:none;font-weight:600}
.rn-splitbar a b{font-weight:800}
.rn-splitbar a[aria-current="true"]{background:#8A5A12;border-color:#8A5A12;color:#fff}
.rn-sb-where{flex-basis:100%;font-size:13.5px;color:#6B4A12;line-height:1.55}
.rn-sb-where b{font-weight:800}
.rn-sb-go{min-height:36px!important;padding:0 11px!important;font-size:13px;margin-left:4px}
.rn-sb-note{flex-basis:100%;font-size:12.5px;color:#8A6A33;line-height:1.55}
/* 모바일: 시안 띠가 첫 화면을 밀어내지 않도록 부가 설명은 접는다 (핵심 안내 .rn-sb-where만 남김) */
@media (max-width:767px){.rn-splitbar{margin:10px 12px}.rn-splitbar a{flex:1 1 100%}.rn-splitbar a.rn-sb-go{flex:0 0 auto}.rn-sb-note{display:none}}

/* 전체교육일정 — 시안 B 보기 탭·안내 */
.rn-viewtabs{display:flex;gap:6px;margin:0 0 10px;padding:4px;background:var(--k-bg);border:1px solid var(--k-line);border-radius:var(--k-r-md);max-width:520px}
.rn-viewtabs button{flex:1;appearance:none;border:0;background:transparent;border-radius:9px;min-height:52px;font-family:inherit;font-size:16px;font-weight:700;color:var(--k-gray);cursor:pointer;line-height:1.25}
.rn-viewtabs button small{display:block;font-size:12px;font-weight:600;color:var(--k-muted)}
.rn-viewtabs button[aria-selected="true"]{background:#fff;color:var(--k-brand);box-shadow:0 1px 3px rgba(18,50,79,.14)}
.rn-splitguide{margin:0 0 12px;padding:12px 14px;background:var(--k-brand-soft);border-radius:var(--k-r-md);font-size:15px;line-height:1.65;color:#1B3F7A}
@media (max-width:768px){.rn-viewtabs{margin:0 8px 10px}.rn-splitguide{margin:0 8px 12px}}

/* 신청 화면 공통 — 기존 입력칸은 값 전달용으로만 남긴다 */
.rn-sel-hidden{position:absolute!important;width:1px!important;height:1px!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;white-space:nowrap!important;border:0!important;padding:0!important;margin:-1px!important}
#classDropdown.rn-sel-hidden,#datepicker.rn-sel-hidden{width:1px!important;min-width:0!important;max-width:1px!important;height:1px!important;min-height:0!important}
.rn-th-sub{font-size:12px;color:var(--k-muted);font-weight:500}
.rn-dcal,.rn-dp,.rn-dcal-h,.rn-dcal-pick{max-width:420px}
.rn-dcal{display:flex;flex-direction:column;gap:10px;padding:4px 0}
.rn-dcal-h{display:flex;flex-direction:column;gap:2px;margin:2px 0 6px}
.rn-dcal-h b{font-size:16px;color:var(--k-ink)}
.rn-dcal-h small{font-size:13px;color:var(--k-gray)}
.rn-dcal-nav{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.rn-dcal-nav b{font-size:17px;color:var(--k-ink)}
.rn-dcal-nav button{width:44px;height:44px;border:1px solid var(--k-line);background:#fff;border-radius:10px;font-size:20px;line-height:1;cursor:pointer;color:var(--k-ink)}
.rn-dcal-nav button[disabled]{opacity:.35;cursor:not-allowed}
.rn-dcal-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px;text-align:center}
.rn-dcal-grid .wd{font-size:12px;font-weight:700;color:var(--k-muted);padding:4px 0}
.rn-dcal-grid .wd.sun{color:#C2453E}.rn-dcal-grid .wd.sat{color:#2F5FA8}
.rn-dcal-grid .day{min-height:50px;border-radius:10px;font-size:15px;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1.15;color:#B7BFCA;font-variant-numeric:tabular-nums}
.rn-dcal-grid button.day{appearance:none;border:1.5px solid var(--k-brand);background:#fff;color:var(--k-ink);font-weight:700;cursor:pointer;padding:0;font-family:inherit}
.rn-dcal-grid button.day small{font-size:11px;font-weight:600;color:var(--k-brand-dark)}
.rn-dcal-grid button.day.low small{color:#B35C00}
.rn-dcal-grid button.day.full{border-color:#E7B2B2}.rn-dcal-grid button.day.full small{color:#9E2B2B}
.rn-dcal-grid button.day.closed,.rn-dcal-grid button.day[disabled]{border-color:var(--k-line);background:#F6F8FB;color:#A6AFBB;cursor:not-allowed}
.rn-dcal-grid button.day.closed small{color:#A6AFBB}
.rn-dcal-grid button.day.ab-b{border-color:var(--k-navy)}.rn-dcal-grid button.day.ab-b small{color:var(--k-navy)}
.rn-dcal-grid button.day[aria-pressed="true"]{background:var(--k-brand);border-color:var(--k-brand);color:#fff}
.rn-dcal-grid button.day[aria-pressed="true"] small{color:#DCE7FF}
.rn-dcal-pick{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;padding:10px 12px;background:var(--k-bg);border-radius:10px;font-size:14px;color:var(--k-gray)}
.rn-dcal-pick b{font-size:17px;color:var(--k-ink)}
.rn-dcal-empty{padding:14px;background:var(--k-bg);border-radius:10px;font-size:14px;color:var(--k-gray);text-align:center}
.rn-dmode{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:4px;background:var(--k-bg);border:1px solid var(--k-line);border-radius:var(--k-r-md)}
.rn-dmode button{appearance:none;border:0;background:transparent;border-radius:9px;min-height:58px;padding:6px 8px;cursor:pointer;font-family:inherit;line-height:1.3;color:var(--k-ink)}
.rn-dmode button b{display:block;font-size:16px}
.rn-dmode button small{font-size:13px;color:var(--k-gray)}
.rn-dmode button em{display:block;margin-top:2px;font-style:normal;font-size:12px;font-weight:600;color:var(--k-muted);letter-spacing:-.02em}
/* 고른 쪽은 **파란 배경**으로 — 흰 버튼은 밝은 곳에서 트랙과 구분되지 않았다 (PM 지시 2026-09-17).
   배경이 진해지므로 그 위 글자(제목·금액·설명·NEW 배지)를 모두 흰 계열로 함께 바꾼다 */
.rn-dmode button[aria-pressed="true"]{background:var(--k-brand);box-shadow:0 1px 4px rgba(18,50,79,.24)}
.rn-dmode button[aria-pressed="true"] b{color:#fff}
.rn-dmode button[aria-pressed="true"] small{color:rgba(255,255,255,.90)}
.rn-dmode button[aria-pressed="true"] em{color:rgba(255,255,255,.94)}
.rn-dmode button[aria-pressed="true"] i{background:#fff;color:var(--k-brand)}

.rn-dmode button i{font-style:normal;font-size:11px;font-weight:800;color:#fff;background:var(--k-green);border-radius:4px;padding:1px 5px;margin-right:5px;vertical-align:2px}
/* (위에서 파란 배경으로 다시 정한다) */
.rn-dcal-note{padding:10px 12px;background:var(--k-brand-soft);border-radius:10px;font-size:14px;line-height:1.6;color:#1B3F7A}
.rn-dcal-note em{font-style:normal;font-size:12px;color:#8A6A33;background:#FFF1DC;border-radius:4px;padding:1px 6px;margin-left:4px}
.rn-dstep{border:1px solid var(--k-line);border-radius:var(--k-r-md);padding:12px;background:#fff}
.rn-dstep.locked{background:#F7F9FB;border-style:dashed}
.rn-dstep-h{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin-bottom:6px}
.rn-dstep-h b{font-size:16px;color:var(--k-ink)}
.rn-dstep-h small{font-size:13px;color:var(--k-gray);text-align:right}
.rn-dstep.locked .rn-dstep-h b,.rn-dstep.locked .rn-dstep-h small{color:#A6AFBB}
.rn-dstep-done{display:flex;align-items:center;gap:10px}
.rn-dstep-done div{flex:1;min-width:0}
.rn-dstep-done b{display:block;font-size:17px;color:var(--k-ink)}
.rn-dstep-done small{font-size:13px;color:var(--k-gray)}
.rn-dstep-done .ck{flex:none;width:26px;height:26px;border-radius:50%;background:var(--k-brand);color:#fff;display:grid;place-items:center;font-weight:800}
.rn-dstep-done button{flex:none;min-height:44px;padding:0 14px;border:1.5px solid var(--k-line);background:#fff;border-radius:10px;font-size:14px;font-weight:700;cursor:pointer;font-family:inherit}
.rn-dcal-go{appearance:none;border:0;min-height:52px;border-radius:var(--k-r-md);background:var(--k-brand);color:#fff;font-size:16px;font-weight:700;font-family:inherit;cursor:pointer;padding:0 14px}
.rn-dcal-go[disabled]{background:#B9C4D3;cursor:not-allowed}
/* 모바일: 달력 칸은 표의 두 열을 합쳐 전체 폭으로 쓴다 (renewal.js spanRow) */
@media (max-width:767px){
td.rn-span{padding:10px 4px!important}
.rn-dcal,.rn-dp,.rn-dcal-h,.rn-dcal-pick{max-width:none}
.rn-dstep{padding:10px 8px}
.rn-dcal-grid{gap:3px}
.rn-dmode button{min-height:62px;padding:6px 4px}
}

/* 학습 매뉴얼 — 화면 이미지 대신 "이 화면 열기" 버튼 */
.rn-step.nofig{grid-template-columns:1fr;max-width:820px}
.rn-goto{display:inline-flex;align-items:center;gap:8px;margin-top:12px;min-height:52px;padding:0 20px;border-radius:var(--k-r-md);border:1.5px solid var(--k-brand);background:#fff;color:var(--k-brand);font-size:17px;font-weight:700;text-decoration:none}
.rn-goto:hover,.rn-goto:focus-visible{background:var(--k-brand);color:#fff}
.rn-mnote{margin:-6px 0 18px;padding:12px 14px;background:var(--k-brand-soft);border-radius:12px;font-size:15px;line-height:1.6;color:#1B3F7A}
@media (max-width:767px){.rn-goto{width:100%;justify-content:center}}

/* 학습시작일 — jQuery UI 달력을 펼쳐 두고 칸을 키운다 */
.rn-dp .ui-datepicker{width:100%!important;max-width:420px;padding:8px!important;border:1px solid var(--k-line)!important;border-radius:var(--k-r-md)!important;font-family:var(--k-font)!important;box-sizing:border-box}
.rn-dp .ui-datepicker,.rn-dp .ui-widget-content,.rn-dp .ui-datepicker table,.rn-dp .ui-datepicker thead,.rn-dp .ui-datepicker th{background:#fff!important;background-image:none!important}
.rn-dp .ui-datepicker-prev span,.rn-dp .ui-datepicker-next span{display:none!important}
.rn-dp .ui-datepicker-prev::after,.rn-dp .ui-datepicker-next::after{content:'‹';position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:22px;color:var(--k-ink)}
.rn-dp .ui-datepicker-next::after{content:'›'}
.rn-dp .ui-datepicker-prev.ui-state-disabled,.rn-dp .ui-datepicker-next.ui-state-disabled{opacity:.35}
.rn-dp .ui-datepicker-header{background:#fff!important;border:0!important;padding:6px 0!important}
.rn-dp .ui-datepicker-title{font-size:17px!important;font-weight:700!important;color:var(--k-ink)}
.rn-dp .ui-datepicker-prev,.rn-dp .ui-datepicker-next{width:44px!important;height:44px!important;top:2px!important;border-radius:10px!important;border:1px solid var(--k-line)!important;background:#fff!important;cursor:pointer}
.rn-dp .ui-datepicker table{font-size:15px!important;margin:0!important}
.rn-dp .ui-datepicker th{font-size:12px;color:var(--k-muted);padding:6px 0}
.rn-dp .ui-datepicker td{padding:2px!important}
.rn-dp .ui-datepicker td a,.rn-dp .ui-datepicker td span{min-height:44px;display:flex!important;align-items:center;justify-content:center;border-radius:10px!important;text-align:center!important;padding:0!important}
.rn-dp .ui-datepicker td a{border:1.5px solid var(--k-brand)!important;background:#fff!important;color:var(--k-ink)!important;font-weight:700}
.rn-dp .ui-datepicker td.ui-datepicker-unselectable span{border:0!important;background:transparent!important;color:#B7BFCA!important}
.rn-dp:not(.picked) .ui-datepicker td a.ui-state-active{background:#fff!important;color:var(--k-ink)!important}
.rn-dp.picked .ui-datepicker td a.ui-state-active{background:var(--k-brand)!important;color:#fff!important}

/* ===== 모바일 날짜 선택 (2026-09-16) =====
   표 안 달력은 칸이 34~39px로 작아 오터치(팻핑거)가 잦다.
   모바일에서는 ① 가까운 날짜 3개를 큰 버튼으로 먼저 보여주고 ② 나머지는 전체 화면 달력에서 고르게 한다. */
.rn-dnear-lab{margin:0;font-size:13px;font-weight:700;color:var(--k-gray)}
.rn-dnear{display:flex;flex-direction:column;gap:8px}
.rn-dnear-b{appearance:none;display:flex;align-items:baseline;gap:10px;width:100%;min-height:58px;padding:10px 14px;border:1.5px solid var(--k-brand);border-radius:12px;background:#fff;font-family:inherit;text-align:left;cursor:pointer}
.rn-dnear-b b{font-size:17px;font-weight:700;color:var(--k-ink)}
.rn-dnear-b span{font-size:13px;font-weight:600;color:var(--k-brand-dark)}
.rn-dnear-b.low span{color:#B35C00}
.rn-dnear-b.full{border-color:#E7B2B2}.rn-dnear-b.full span{color:#9E2B2B}
.rn-dnear-b.ab-b{border-color:var(--k-navy)}.rn-dnear-b.ab-b span{color:var(--k-navy)}
.rn-dnear-b[aria-pressed="true"]{background:var(--k-brand);border-color:var(--k-brand)}
.rn-dnear-b[aria-pressed="true"] b,.rn-dnear-b[aria-pressed="true"] span{color:#fff}
.rn-dcal-more{appearance:none;display:flex;align-items:center;justify-content:center;gap:6px;width:100%;min-height:52px;border:1.5px dashed var(--k-line);border-radius:12px;background:var(--k-bg);font-family:inherit;font-size:15px;font-weight:700;color:var(--k-ink);cursor:pointer}

/* 전체 화면 날짜 선택 시트 */
/* 하단 고정바(9000)·챗봇(100001)보다 위에 둔다 — 시트가 열린 동안에는 그 둘을 가린다 */
.rn-sheet-ov{position:fixed;inset:0;z-index:100002;background:rgba(17,24,39,.45);display:flex;align-items:flex-end;justify-content:center}
body.rn-sheet-on .rn-sticky,body.rn-sheet-on .rn-dock{display:none!important}
.rn-sheet-ov[hidden]{display:none!important}
.rn-sheet{display:flex;flex-direction:column;width:100%;max-width:520px;max-height:92vh;background:#fff;border-radius:16px 16px 0 0;overflow:hidden}
.rn-sheet-h{display:flex;align-items:flex-start;gap:10px;padding:14px 16px;border-bottom:1px solid var(--k-line)}
.rn-sheet-t{flex:1;display:flex;flex-direction:column;gap:2px}
.rn-sheet-t b{font-size:17px;color:var(--k-ink)}
.rn-sheet-t small{font-size:13px;color:var(--k-gray)}
.rn-sheet-x{flex:none;appearance:none;width:44px;height:44px;margin:-6px -6px 0 0;border:0;background:transparent;font-size:26px;line-height:1;color:var(--k-gray);cursor:pointer}
.rn-sheet-body{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:14px 12px 24px}
/* 시트 안에서는 폭 제약이 없으므로 칸을 키운다 (약 52px) */
.rn-dcal-sheet .rn-dcal-grid{gap:6px}
.rn-dcal-sheet .rn-dcal-grid .day{min-height:56px;font-size:17px}
.rn-dcal-sheet .rn-dcal-grid button.day small{font-size:12px}
.rn-sheet .rn-dp .ui-datepicker{max-width:none;border:0!important;padding:0!important}
.rn-sheet .rn-dp .ui-datepicker td a,.rn-sheet .rn-dp .ui-datepicker td span{min-height:54px;font-size:17px}
.rn-sheet .rn-dp .ui-datepicker td{padding:3px!important}
@media (min-width:768px){.rn-sheet-ov{align-items:center}.rn-sheet{border-radius:16px;max-height:80vh}}

/* ===== 분할 수강 — 시간대(오전/오후) 선택 · 접히는 안내 (2026-09-16) ===== */
.rn-dcal-head{display:flex;align-items:center;justify-content:space-between;gap:8px}
.rn-dcal-head b{font-size:15px;color:var(--k-ink)}
.rn-dcal-head em{font-style:normal;font-size:12px;font-weight:600;color:#8A6A33;background:#FFF1DC;border-radius:4px;padding:1px 6px;margin-left:6px}
.rn-dhelp{flex:none;appearance:none;width:32px;height:32px;border-radius:50%;border:1.5px solid var(--k-line);background:#fff;color:var(--k-gray);font-size:15px;font-weight:800;font-family:inherit;cursor:pointer;line-height:1}
.rn-dhelp[aria-expanded="true"]{background:var(--k-brand);border-color:var(--k-brand);color:#fff}
.rn-dslot{display:flex;flex-direction:column;gap:8px}
.rn-dslot-lab{margin:0;font-size:14px;font-weight:700;color:var(--k-ink)}
.rn-dslot-sub{margin:-4px 0 2px;font-size:13px;color:var(--k-gray)}
.rn-dslot-b b i.rn-ab{margin-right:5px;vertical-align:1px}
/* 2회차 시간대 필터 — 남은 프로그램 시간에 맞춰 날짜를 좁혀 본다 */
.rn-dtf{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-bottom:4px}
.rn-dtf>span{font-size:13px;font-weight:700;color:var(--k-gray);margin-right:2px}
.rn-dtf button{appearance:none;min-height:36px;padding:0 12px;border:1px solid var(--k-line);border-radius:999px;background:#fff;font-family:inherit;font-size:13.5px;font-weight:700;color:var(--k-gray);cursor:pointer}
.rn-dtf button[aria-pressed="true"]{background:var(--k-brand);border-color:var(--k-brand);color:#fff}
.rn-dslot-b{appearance:none;display:flex;flex-direction:column;gap:2px;width:100%;min-height:62px;padding:10px 14px;border:1.5px solid var(--k-brand);border-radius:12px;background:#fff;font-family:inherit;text-align:left;cursor:pointer}
.rn-dslot-b b{font-size:17px;font-weight:700;color:var(--k-ink)}
.rn-dslot-b span{font-size:13px;font-weight:600;color:var(--k-brand-dark)}
/* 2회차에서 1회차와 내용이 겹쳐 고를 수 없는 시간대 — 지우지 않고 **잠근 채로** 보여 준다.
   빼 버리면 "왜 내가 원하는 시간이 없지?"가 남는다 (PM 결정 2026-09-17) */
.rn-dslot-b.off{border-color:var(--k-line);border-style:dashed;background:#F7F9FB;cursor:not-allowed}
.rn-dslot-b.off b{color:#9AA5B1}
.rn-dslot-b.off span{color:#8A94A0;font-weight:600}
.rn-dslot-b.ab-b{border-color:var(--k-navy)}.rn-dslot-b.ab-b span{color:var(--k-navy)}
/* 되돌아가기 — 글자·밑줄만으로 두면 누를 수 있는지 알기 어렵다 (UX 방향성 §2-6).
   다만 주 선택지(A·B 커리큘럼)와 성격이 달라 배경색으로 구분한다: 선택지는 흰 배경, 이것은 연회색 */
.rn-dslot-back{appearance:none;display:flex;align-items:center;justify-content:center;gap:6px;width:100%;min-height:48px;padding:0 14px;border:1px solid var(--k-line);border-radius:10px;background:var(--k-bg);font-family:inherit;font-size:15px;font-weight:700;color:var(--k-gray);cursor:pointer}
.rn-dslot-back:hover,.rn-dslot-back:focus-visible{border-color:var(--k-gray);color:var(--k-ink)}
/* 한 날짜에 오전·오후가 모두 있는 칸 */
.rn-dcal-grid button.day.ab-both{border-color:var(--k-brand);min-height:62px}
.rn-dcal-grid button.day.ab-both small{color:var(--k-gray);font-size:10.5px;letter-spacing:-.04em;line-height:1.25}
.rn-dcal-sheet .rn-dcal-grid button.day.ab-both{min-height:66px}
.rn-dnear-b.ab-both span{color:var(--k-gray)}

/* 확인 팝업 버튼 — 문구가 길어져(다른 과정 고르기 / 이 과정 선택하기) 모바일에서 한 줄에 안 들어간다.
   좁은 화면에서는 세로로 쌓고, 주 버튼을 위에 둔다 (2026-09-16) */
@media (max-width:480px){
.ap-scope .mc-actions{flex-direction:column-reverse;gap:8px}
.ap-scope .mc-btn{width:100%;padding:0 12px}
}

/* 서브 내비게이션 float 정리 — 겉모습은 현재 홈페이지 그대로, 다음 요소가 옆으로 밀리는 것만 막는다 */
.sub_navi{height:auto!important;min-height:55px}
.sub_navi:after{content:'';display:block;clear:both}