/* ============================================================
   KANS Concept 1 — 내부 페이지 프레임 + 반응형 안전망 (Day 2, 2026-09-17)
   로드 위치: theme/kans/head.sub.php (레거시 CSS와 concept1.css 뒤 = 마지막). 범위: body.c1-sub
   원칙
   - 헤더/푸터는 concept1.css(홈과 동일). 이 파일은 그 사이의 '서브 프레임'만 다룬다:
     .sv_wrap(히어로) · .lnb_wrap(브레드크럼 드롭다운) · .dep_4_wrap(4차 탭) · .sub_layout/.tit_bg(본문 컨테이너/페이지 제목)
   - 콘텐츠 마크업·PHP·스킨은 손대지 않는다. 레거시 고정폭(viewport 1400) 콘텐츠가 device-width 뷰포트에서
     깨지지 않도록 하는 CSS 안전망만 제공한다(≤1023 / ≤767).
   - 본문 타이포(line-height 28px · #666)는 기존값을 유지(글꼴만 Pretendard 로 통일).
   ============================================================ */

/* ---------- 0. 문서 · 컨테이너 ---------- */
body.c1-sub { min-width: 0; background: #fff; }
.c1-sub .sub_wrap { margin-top: 0 !important; line-height: 28px; color: #666; }
.c1-sub .ct1 { max-width: 1280px; min-width: 0; width: auto; margin: 0 auto; padding: 0 20px; box-sizing: border-box; }
.c1-sub .ct1 .ct1 { max-width: none; padding: 0; }
/* .ct1 이 표/폼에도 붙어 있음(예: 교육일정 달력 table.cal_tb.ct1) → 컨테이너 규칙(width:auto) 대신 가로 100% 유지 */
.c1-sub table.ct1, .c1-sub form.ct1 { width: 100%; max-width: 100%; min-width: 0; padding: 0; margin-left: auto; margin-right: auto; }
.c1-sub input, .c1-sub select, .c1-sub textarea, .c1-sub button { font-family: var(--c1-font); }
.c1-sub #hd_login_msg { position: absolute; top: 0; left: 0; width: 0; height: 0; overflow: hidden; }

/* ---------- 1. 히어로(카테고리 타이틀) ---------- */
.c1-sub .sv_wrap {
  position: relative; overflow: hidden;
  background: linear-gradient(180deg, #F4F8FC 0%, #EDF4FB 100%);
  border-bottom: 1px solid var(--c1-line-page);
}
.c1-sub .sv_wrap::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(rgba(28, 95, 208, 0.06) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(28, 95, 208, 0.06) 1px, transparent 1px);
  background-size: 48px 48px;
  -webkit-mask-image: linear-gradient(90deg, transparent 35%, #000 100%);
          mask-image: linear-gradient(90deg, transparent 35%, #000 100%);
}
.c1-sub .sv_wrap::after {
  content: ''; position: absolute; right: -120px; top: -160px; width: 420px; height: 420px; border-radius: 50%;
  background: radial-gradient(circle, rgba(63, 182, 220, 0.18) 0%, rgba(63, 182, 220, 0) 70%); pointer-events: none;
}
.c1-sub .sv_sec { height: auto; background: none; z-index: auto; transition: none; padding: 46px 0 42px; }
.c1-sub .sv_sec .tit_box { top: 0; color: var(--c1-t-heading); position: relative; z-index: 1; }
.c1-sub .sv_sec .tit_box span {
  font-family: var(--c1-mono); font-size: 12.5px; font-weight: 600; letter-spacing: 0.18em;
  color: var(--c1-blue); margin-bottom: 12px; line-height: 1;
}
.c1-sub .sv_sec .tit_box h4 {
  font-family: var(--c1-font); font-size: 38px; font-weight: 900; letter-spacing: -0.02em;
  line-height: 1.2; margin: 0; color: var(--c1-t-heading);
}
.c1-sub .sv_sec .tit_box h4:empty { display: none; }

/* ---------- 2. 브레드크럼 LNB (마크업/JS 그대로: .lnb_dep1 > a 클릭 → 형제 페이지 드롭다운) ---------- */
.c1-sub .lnb_wrap { border-top: 1px solid var(--c1-grey-300); border-bottom: 1px solid var(--c1-grey-300); background: #fff; z-index: 20; } /* 외곽선을 토큰 grey-300 으로 — 흰 배경에서 또렷하게 */
.c1-sub .lnb_box { display: flex; align-items: stretch; }
.c1-sub .lnb_box > * { float: none; width: auto; height: 54px; border: 0; border-left: 1px solid var(--c1-grey-300); }
.c1-sub .lnb_box > *:last-child { border-right: 1px solid var(--c1-grey-300); }
.c1-sub .lnb_box > .home { flex: 0 0 auto; }
.c1-sub .lnb_box > .home a {
  width: 50px; height: 54px; background: #fff no-repeat center; background-size: 18px 18px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%2333465F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M3 10.5 12 3l9 7.5'/><path d='M5 9.5V21h14V9.5'/><path d='M10 21v-6h4v6'/></svg>");
}
.c1-sub .lnb_box > .home a:hover { background-color: var(--c1-bg-tint); }
.c1-sub .lnb_box > div:not(.home) { flex: 0 1 auto; min-width: 180px; }
.c1-sub .lnb_box > div:not(.home) > a {
  font-size: 14.5px; font-weight: 600; line-height: 54px; color: var(--c1-t-emph);
  padding: 0 44px 0 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.c1-sub .lnb_box > div:not(.home) > a:hover { color: var(--c1-blue); }
.c1-sub .lnb_box > div:not(.home) > a::after {
  width: 7px; height: 7px; background: none; right: 20px; margin-top: -6px;
  border-right: 1.6px solid var(--c1-t-meta); border-bottom: 1.6px solid var(--c1-t-meta);
  transform: rotate(45deg);
}
.c1-sub .lnb_box > div:not(.home) > a.on::after { transform: rotate(225deg); margin-top: -1px; }
.c1-sub .lnb_box > div:not(.home) > div {
  top: 54px; left: -1px; width: calc(100% + 2px); background: #fff; /* 트리거 셀과 같은 폭(좌우 1px 테두리 포함) */
  border: 1px solid var(--c1-line); border-top: 0; border-radius: 0 0 14px 14px;
  box-shadow: var(--c1-shadow-frame); overflow: hidden;
}
.c1-sub .lnb_box > div:not(.home) > div ul li { border: 0; border-top: 1px solid var(--c1-line-inner); }
.c1-sub .lnb_box > div:not(.home) > div ul li:first-child { border-top: 0; }
.c1-sub .lnb_box > div:not(.home) > div ul li:last-child { border-bottom: 0; }
.c1-sub .lnb_box > div:not(.home) > div ul li a {
  line-height: 1.45; padding: 11px 18px; font-size: 14px; color: var(--c1-t-body); background: #fff;
  white-space: normal; word-break: keep-all; /* 옵션이 셀 폭을 넘으면 줄바꿈 */
}
.c1-sub .lnb_box > div:not(.home) > div ul li:hover > a,
.c1-sub .lnb_box > div:not(.home) > div ul li.current > a { background: var(--c1-bg-tint); color: var(--c1-blue-deep); }

/* ---------- 3. 4차 탭 (.dep_4) → 필 탭 ---------- */
.c1-sub .dep_4_wrap { background: #fff; border-bottom: 1px solid var(--c1-line-page); }
.c1-sub .dep_4_wrap ul.ct1 { display: flex; flex-wrap: wrap; gap: 8px; padding: 14px 20px; }
.c1-sub .dep_4_wrap ul li { display: block; padding: 0; }
.c1-sub .dep_4_wrap ul li::after { display: none; }
.c1-sub .dep_4_wrap ul li a {
  display: inline-flex; align-items: center; height: 38px; padding: 0 16px;
  border: 1px solid var(--c1-line); border-radius: 999px; background: #fff;
  font-size: 14px; font-weight: 600; line-height: 1; color: var(--c1-t-body);
  transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}
.c1-sub .dep_4_wrap ul li:hover a { border-color: var(--c1-blue); color: var(--c1-blue-deep); font-weight: 600; }
.c1-sub .dep_4_wrap ul li.current a { background: var(--c1-blue); border-color: var(--c1-blue); color: #fff; font-weight: 700; }

/* ---------- 4. 본문 컨테이너 · 페이지 제목 ---------- */
.c1-sub .sub_layout { margin: 44px auto 100px !important; }
.c1-sub .tit_bg {
  position: relative; font-size: 30px; line-height: 1.3; font-weight: 900; letter-spacing: -0.02em;
  color: var(--c1-t-heading); background: none; padding: 0 0 18px; box-shadow: none;
  border-bottom: 1px solid var(--c1-line-page);
}
.c1-sub .tit_bg::after { content: ''; position: absolute; left: 0; bottom: -1px; width: 56px; height: 3px; border-radius: 2px; background: var(--c1-blue); }
.c1-sub .cnt_box { border: 1px solid var(--c1-line); border-radius: 20px; box-shadow: 0 14px 34px rgba(11, 29, 58, 0.06); }
.c1-sub .bd_sec, .c1-sub .faq_list { margin: 30px auto 100px !important; }
.c1-sub .sub_layout img { max-width: 100%; }
.c1-sub .sub_layout table { max-width: 100%; }
.c1-sub .c1-tbl-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ============================================================
   RESPONSIVE — 태블릿 (≤1023)
   ============================================================ */
@media (max-width: 1023px) {
  .c1-sub .sv_sec { padding: 34px 0 30px; }
  .c1-sub .sv_sec .tit_box h4 { font-size: 30px; }
  .c1-sub .lnb_box > div:not(.home) { min-width: 150px; }
  .c1-sub .sub_layout { margin: 32px auto 72px !important; }
  .c1-sub .cnt_box { padding: 32px 28px 56px; }
  .c1-sub .sub_layout img { height: auto; }
  .c1-sub .fiex_box, .c1-sub .flex_box { flex-wrap: wrap; }
  .c1-sub .sub_layout iframe, .c1-sub .sub_layout video, .c1-sub .sub_layout embed, .c1-sub .sub_layout object { max-width: 100%; }
  .c1-sub .layer_box { width: 94vw !important; max-width: 94vw !important; }
  /* 정회원 혜택 · 대관 안내의 1067px 배경 리스트(.bg_col4) → 배경 제거 후 2열 카드 */
  .c1-sub .bg_col4 { width: 100%; height: auto; background: none; display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
  .c1-sub .bg_col4 li { float: none; width: calc(50% - 6px); margin: 0; padding: 18px 12px; box-sizing: border-box; border: 1px solid var(--c1-line); border-radius: 14px; background: var(--c1-bg-cool); }
  .c1-sub .bg_col4 li * { max-width: 100%; }
}

/* ============================================================
   RESPONSIVE — 모바일 (≤767)
   ============================================================ */
@media (max-width: 767px) {
  .c1-sub .ct1 { padding: 0 16px; }

  /* 히어로 */
  .c1-sub .sv_sec { padding: 26px 0 24px; }
  .c1-sub .sv_sec .tit_box span { font-size: 11px; margin-bottom: 8px; }
  .c1-sub .sv_sec .tit_box h4 { font-size: 24px; }

  /* 브레드크럼: 홈 + 1·2차 한 줄(반씩), 3차는 다음 줄 전체 */
  .c1-sub .lnb_box { flex-wrap: wrap; }
  .c1-sub .lnb_box > * { height: 48px; }
  .c1-sub .lnb_box > .home a { width: 44px; height: 48px; background-size: 16px 16px; }
  .c1-sub .lnb_box > div:not(.home) { flex: 1 1 0; min-width: 0; }
  .c1-sub .lnb_box > div:not(.home) > a { line-height: 48px; font-size: 13.5px; padding: 0 26px 0 10px; }
  .c1-sub .lnb_box > div:not(.home) > a::after { right: 9px; }
  /* 모바일: 셀이 100px 남짓이라 드롭다운은 브레드크럼 바 전체 폭(좌우 16px 여백)으로 펼침 — 기준을 셀(.lnb_dep*)이 아닌 .lnb_box 로 */
  .c1-sub .lnb_box > div:not(.home) { position: static; }
  .c1-sub .lnb_box > div:not(.home) > div { top: 48px; left: 16px; right: 16px; width: auto; min-width: 0; border-top: 1px solid var(--c1-grey-300); border-radius: 0 0 14px 14px; }
  .c1-sub .lnb_box > div:not(.home) > div ul li a { padding: 11px 16px; font-size: 14px; }

  /* 4차 탭: 가로 스크롤 */
  .c1-sub .dep_4_wrap ul.ct1 { flex-wrap: nowrap; overflow-x: auto; padding: 12px 16px; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .c1-sub .dep_4_wrap ul.ct1::-webkit-scrollbar { display: none; }
  .c1-sub .dep_4_wrap ul li { flex: 0 0 auto; }
  .c1-sub .dep_4_wrap ul li a { height: 34px; padding: 0 14px; font-size: 13px; }

  /* 본문 컨테이너 */
  .c1-sub .sub_layout { margin: 24px auto 56px !important; }
  .c1-sub .tit_bg { font-size: 22px; padding-bottom: 14px; }
  .c1-sub .cnt_box { margin-top: 20px; padding: 22px 16px 36px; border-radius: 14px; }
  .c1-sub .bd_sec, .c1-sub .faq_list { margin: 20px auto 56px !important; }
  .c1-sub .sub_layout p, .c1-sub .sub_layout li, .c1-sub .sub_layout td, .c1-sub .sub_layout th, .c1-sub .sub_layout dd { word-break: keep-all; overflow-wrap: anywhere; }

  /* 레거시 고정폭 콘텐츠 안전망 (sub.css 의 px 폭 · float 컬럼) */
  .c1-sub .sub_layout .fiex_box > li, .c1-sub .sub_layout .flex_box > li,
  .c1-sub .s112_col2 > *, .c1-sub .s3_col3 > li, .c1-sub .s3_col2 > *, .c1-sub .s401_col3 > *,
  .c1-sub .new_page_arti .flex_box > li { width: 100% !important; margin: 0 0 12px !important; }
  .c1-sub .new_page_arti .flex_box > li a::after { right: 20px; }
  .c1-sub .s1111 .arti1 .fiex_box > li { margin-bottom: 16px; }
  .c1-sub .s1111 .arti1 .fiex_box > li::after { display: none; }
  .c1-sub .s103 .arti2 > *, .c1-sub .s103 .map_list .wrap > * { float: none !important; width: 100% !important; }
  .c1-sub .s103 .arti2 .rbx { margin-top: 12px; }
  .c1-sub .s402 .arti2 .col4 > li { width: 48% !important; margin: 0 1% 12px !important; }
  .c1-sub .bg_col4 li { width: 100%; }
  .c1-sub .history_box > ul > li > h3 { width: auto; padding-left: 0; font-size: 26px; }
  .c1-sub .link_a, .c1-sub .s4_link_a { width: auto; max-width: 100%; font-size: 17px; line-height: 56px; height: 56px; margin-top: 32px; }
  .c1-sub .link_a span { top: 0; }
  .c1-sub .form_pass .cnt input { width: 100%; }
  .c1-sub .cal_group_application .table_nomal { width: 100%; }
  .c1-sub .pay_check_pop { width: 92%; left: 4%; margin-left: 0; height: auto; }
  .c1-sub .tit_h3 { font-size: 20px; line-height: 1.3; padding-left: 16px; }
  .c1-sub .tit_h3::before { height: 100%; }
  .c1-sub .tit_h3::after { height: 50%; }
  .c1-sub .dot_ul li { font-size: 15px; line-height: 1.6; padding-left: 14px; }
  .c1-sub .dot_ul li::before { top: 10px; }
  .c1-sub .table_nomal th, .c1-sub .table_nomal td { font-size: 13px; line-height: 1.5; padding: 8px 6px; }
  .c1-sub .c1-tbl-scroll { margin: 0 -16px; padding: 0 16px; }
  .c1-sub .c1-tbl-scroll > table { min-width: 640px; }
  .c1-sub .c1-tbl-scroll[data-cols="3"] > table { min-width: 560px; }
  .c1-sub .sub_layout input[type="text"], .c1-sub .sub_layout input[type="password"], .c1-sub .sub_layout input[type="email"],
  .c1-sub .sub_layout input[type="tel"], .c1-sub .sub_layout input[type="number"], .c1-sub .sub_layout input[type="search"],
  .c1-sub .sub_layout select, .c1-sub .sub_layout textarea { max-width: 100%; }

  /* 게시판 목록(.respon_l 스킨: basic·basic220530·s1_1_1_2·s6_2·wt_*): 모바일은 카드형으로 재배치 —
     번호·글쓴이·날짜·조회 전부 표시(데스크톱 표는 ≥768 그대로). 마크업/PHP 무변경, CSS만. */
  .c1-sub .tb_outline { border-top: 0; border-bottom: 0; overflow: visible; }
  .c1-sub .respon_l .div_tb { display: block; width: 100%; }
  .c1-sub .respon_l .div_tb > .div_tb_tr:first-child { display: none; }               /* 열 제목 행(div_th) */
  .c1-sub .respon_l .div_tb > .div_tb_tr { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 6px 0;
    padding: 12px 14px; margin-bottom: 8px; background: var(--c1-bg-cool); border: 1px solid var(--c1-line); border-radius: 12px; }  /* 모든 행: 쿨 톤 배경(공지 행과 동일) */
  /* 1행: 번호 · 제목 / 줄바꿈 / 2행: 글쓴이(좌) | 조회(중앙) | 날짜(우) — 컨테이너 ::after 를 100% 폭 플렉스 아이템으로 두어 줄을 나눔 */
  .c1-sub .respon_l .div_tb > .div_tb_tr::after { content: ''; display: block; flex-basis: 100%; height: 0; order: 3; }
  .c1-sub .respon_l .div_tb_tr:hover .div_td { background: transparent; }
  .c1-sub .respon_l .div_td { display: inline-flex; align-items: center; width: auto !important; padding: 0; border: 0;
    background: transparent; text-align: left; font-size: 12.5px; color: var(--c1-t-meta); line-height: 1.5; }
  .c1-sub .respon_l .div_td.col_num { order: 0; margin-right: 10px; padding-top: 2px; white-space: nowrap; }
  .c1-sub .respon_l .div_td.col_subject { display: block; order: 1; flex: 1 1 0; min-width: 0; margin: 0; font-size: 15px; color: var(--c1-t-heading);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.45; }   /* 제목은 한 줄 + 말줄임 */
  .c1-sub .respon_l .div_td.col_writer, .c1-sub .respon_l .div_td.col_hit, .c1-sub .respon_l .div_td.col_date {
    flex: 0 0 33.333%; box-sizing: border-box; min-width: 0; margin: 2px 0 0; padding: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .c1-sub .respon_l .div_td.col_writer { order: 4; justify-content: flex-start; }
  .c1-sub .respon_l .div_td.col_hit { order: 5; justify-content: center; border-left: 1px solid var(--c1-line); border-right: 1px solid var(--c1-line); }
  .c1-sub .respon_l .div_td.col_date { order: 6; justify-content: flex-end; }
  .c1-sub .respon_l .div_td.col_writer::before { content: '글쓴이: '; white-space: pre; color: var(--c1-t-meta); }
  .c1-sub .respon_l .div_td.col_subject a { display: inline; white-space: nowrap; overflow: visible; color: var(--c1-t-heading); font-weight: 600; line-height: 1.45; }
  .c1-sub .respon_l .div_td.col_subject img { vertical-align: middle; margin-left: 4px; }
  .c1-sub .respon_l .div_td.col_num::before { content: '번호: '; white-space: pre; }
  .c1-sub .respon_l .bo_notice .div_td.col_num::before { content: none; }
  .c1-sub .respon_l .col_num strong { display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: 999px;
    background: rgba(28, 95, 208, 0.1); color: var(--c1-blue-deep); font-size: 11.5px; font-weight: 700; }
  .c1-sub .respon_l .col_num .bo_current { color: var(--c1-blue); font-weight: 700; }
  .c1-sub .respon_l .div_td.col_check { order: 0; margin-right: 8px; }
  .c1-sub .respon_l .div_td.col_hit::before { content: '조회: '; white-space: pre; color: var(--c1-t-meta); }
  .c1-sub .respon_l .div_nodata { border: 0; padding: 40px 0; font-size: 14px; color: var(--c1-t-meta); }
  .c1-sub #bo_list_total { font-size: 13px; color: var(--c1-t-meta); }
  .c1-sub .bo_fx { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; }

  /* 마이페이지 */
  /* .form_filter / .mypage_lnb → §15 에서 폭별 레이아웃 정의 */
  .c1-sub .my_info th, .c1-sub .my_info td { font-size: 13px; }
  .c1-sub .smb_my_act { display: flex; flex-wrap: wrap; gap: 8px; }

  /* 교육일정(cal) 필터 */
  .c1-sub .cal_wrap { margin-top: 24px; margin-bottom: 56px; }
  .c1-sub .fillter_cal table tr > th { width: 88px; font-size: 13px; }
  .c1-sub .fillter_cal table tr > td .box ul > li { display: block; margin: 0 0 6px; }
  .c1-sub .fillter_cal table tr > td .box ul > li select { min-width: 0; width: 100%; }
  .c1-sub .fillter_cal > input { width: 100%; margin: 20px 0 30px; }

  /* 레이어 팝업(개인정보·이메일·사이트맵·결제 등): 화면 안에 맞추고 닫기 버튼을 안쪽으로 */
  .c1-sub .layer_box { height: auto !important; max-height: 86vh !important; padding: 56px 16px 20px !important; overflow-y: auto; }
  .c1-sub .layer_box > h3 { font-size: 20px; margin-bottom: 16px; }
  .c1-sub .layer_box .btn_close { right: 4px; top: 4px; width: 44px; height: 44px; background-size: 18px; }
  .c1-sub .layer_box.layer_sitemap .btn_close { width: 44px; height: 44px; }
  .c1-sub .layer_box.layer_sitemap .btn_close::after { width: 44px; height: 44px; background-size: 18px; }
  .c1-sub .layer_box .email_box { height: auto; padding: 24px 12px; }
  .c1-sub .layer_email { width: 94vw !important; }
}

/* ============================================================
   5. 콘텐츠 버튼 · 컴포넌트 — Concept 1 토큰 정합 (2026-09-17)
   레거시 팔레트(주황 #fd7400 · 구 블루 #0094dc/#098bec · 회색 #666/#333/#3d4752 · 녹색 #95cc1a/#76da4f/#00bfb7)
   를 concept1.css 의 토큰(--c1-blue/--c1-blue-deep/--c1-navy/--c1-cyan/--c1-line/--c1-bg-tint)으로 치환.
   크기·배치·마크업·동작은 그대로(색·라운드·hover/focus/disabled 만). 규격은 .c1-btn(--primary/--ghost) 을 따른다.
   ============================================================ */

/* --- 5-1. 기본형(primary): 블루 채움 --- */
.c1-sub .link_a, .c1-sub .s4_link_a,
.c1-sub .left_down > a,
.c1-sub .fillter_cal > input,
.c1-sub .btn_submit,
.c1-sub .bd_search .btn_search, .c1-sub #bo_sch input[type="submit"],
.c1-sub .form_filter_btn,
.c1-sub a.btn_b02, .c1-sub .btn_b02,
.c1-sub .btn_confirm > input[type="submit"],
.c1-sub .pay_check_pop .cnt .btn_box input,
.c1-sub .btn_blue, .c1-sub a.btn_blue, .c1-sub .cs_top_qa .btn_blue,
.c1-sub .layer_cont div .btn_pop_question,
.c1-sub .b-popup .enter-btn, .c1-sub .b-popup .regist-btn {
  background-color: var(--c1-blue) !important; background-image: none; border-color: var(--c1-blue) !important; color: #fff !important;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.c1-sub .link_a:hover, .c1-sub .s4_link_a:hover,
.c1-sub .left_down > a:hover,
.c1-sub .fillter_cal > input:hover,
.c1-sub .btn_submit:hover,
.c1-sub .bd_search .btn_search:hover, .c1-sub #bo_sch input[type="submit"]:hover,
.c1-sub .form_filter_btn:hover,
.c1-sub a.btn_b02:hover, .c1-sub .btn_b02:hover,
.c1-sub .btn_confirm > input[type="submit"]:hover,
.c1-sub .pay_check_pop .cnt .btn_box input:hover,
.c1-sub .btn_blue:hover, .c1-sub a.btn_blue:hover,
.c1-sub .layer_cont div .btn_pop_question:hover,
.c1-sub .b-popup .enter-btn:hover, .c1-sub .b-popup .regist-btn:hover {
  background-color: var(--c1-blue-deep) !important; border-color: var(--c1-blue-deep) !important;
}
.c1-sub .link_a, .c1-sub .s4_link_a { border-radius: var(--c1-r-btn); box-shadow: var(--c1-shadow-btn); }
.c1-sub .left_down > a, .c1-sub .fillter_cal > input, .c1-sub .btn_submit, .c1-sub a.btn_b02, .c1-sub .btn_b02,
.c1-sub .bd_search .btn_search, .c1-sub #bo_sch input[type="submit"], .c1-sub .form_filter_btn,
.c1-sub .btn_confirm > input[type="submit"], .c1-sub .btn_confirm > a, .c1-sub #bo_v_top a,
.c1-sub .btn_ty, .c1-sub .btn_ty03, .c1-sub a.btn_b01, .c1-sub .btn_cancel, .c1-sub .btn_frmline,
.c1-sub .layer_cont .layer_esti_btns span { border-radius: 10px; }
/* FAQ 검색 버튼은 아이콘 배경 이미지를 유지하고 색만 교체 */
.c1-sub #faq_sch .btn_submit { background-color: var(--c1-blue); border-radius: 0 10px 10px 0; }
.c1-sub #faq_sch .btn_submit:hover { background-color: var(--c1-blue-deep); }
/* 마이페이지 액션 버튼(인라인 style="background:#0094dc")도 토큰으로 */
.c1-sub .smb_my_act .btn02, .c1-sub .smb_my_act a.btn02[style] { background: var(--c1-blue) !important; border-color: var(--c1-blue) !important; color: #fff !important; border-radius: 10px; }
.c1-sub .smb_my_act .btn02:hover, .c1-sub .smb_my_act a.btn02[style]:hover { background: var(--c1-blue-deep) !important; border-color: var(--c1-blue-deep) !important; }

/* --- 5-2. 보조형(ghost): 흰 배경 + 라인 (.c1-btn--ghost 와 동일 규격) --- */
.c1-sub .btn_ty, .c1-sub .btn_ty03,
.c1-sub #bo_v_top a, .c1-sub .btn_confirm > a,
.c1-sub a.btn_b01, .c1-sub .btn_b01, .c1-sub a.btn_cancel, .c1-sub button.btn_cancel,
.c1-sub .layer_cont div .btn_pop_cancel,
.c1-sub #faq_con .closer_btn,
.c1-sub .b-popup .renter-btn {
  background-color: #fff !important; background-image: none; border: 1px solid var(--c1-line) !important; color: var(--c1-t-heading) !important;
  transition: border-color 0.2s ease, color 0.2s ease, background-color 0.2s ease;
}
.c1-sub .btn_ty:hover, .c1-sub .btn_ty:focus, .c1-sub .btn_ty03:hover, .c1-sub .btn_ty03:focus,
.c1-sub #bo_v_top a:hover, .c1-sub .btn_confirm > a:hover,
.c1-sub a.btn_b01:hover, .c1-sub .btn_b01:hover, .c1-sub a.btn_cancel:hover, .c1-sub button.btn_cancel:hover,
.c1-sub .layer_cont div .btn_pop_cancel:hover,
.c1-sub #faq_con .closer_btn:hover,
.c1-sub .b-popup .renter-btn:hover {
  background-color: var(--c1-bg-tint) !important; border-color: var(--c1-blue) !important; color: var(--c1-blue-deep) !important;
}

/* --- 5-3. 강조형(navy): 진한 배경이 필요한 곳 --- */
.c1-sub .issued_btn, .c1-sub #fregisterform .btn_grd, .c1-sub #mb_confirm .btn_submit,
.c1-sub a.btn_frmline, .c1-sub button.btn_frmline, .c1-sub .btn_cke_sc, .c1-sub .btn_cke_sc_close,
.c1-sub .pay_check_pop .cnt .btn_box > *:last-child {
  background-color: var(--c1-navy) !important; color: #fff !important; border-color: var(--c1-navy) !important;
}
.c1-sub .issued_btn:hover, .c1-sub #fregisterform .btn_grd:hover, .c1-sub #mb_confirm .btn_submit:hover,
.c1-sub a.btn_frmline:hover, .c1-sub button.btn_frmline:hover { background-color: var(--c1-navy-700) !important; }
/* 관리자 버튼(.btn_admin)은 경고색(빨강) 유지 */

/* --- 5-4. 포커스 · 비활성 --- */
.c1-sub .link_a:focus-visible, .c1-sub .s4_link_a:focus-visible, .c1-sub .left_down > a:focus-visible,
.c1-sub .btn_submit:focus-visible, .c1-sub .btn_ty:focus-visible, .c1-sub .btn_ty03:focus-visible,
.c1-sub a.btn_b01:focus-visible, .c1-sub a.btn_b02:focus-visible, .c1-sub #bo_v_top a:focus-visible,
.c1-sub .btn_confirm > a:focus-visible, .c1-sub .btn_confirm > input:focus-visible,
.c1-sub .fillter_cal > input:focus-visible, .c1-sub .form_filter_btn:focus-visible, .c1-sub .btn02:focus-visible,
.c1-sub .pg_wrap a:focus-visible, .c1-sub .dep_4 a:focus-visible, .c1-sub .bd_cate a:focus-visible,
.c1-sub .lnb_box a:focus-visible { outline: 2px solid var(--c1-cyan); outline-offset: 2px; }
.c1-sub button:disabled, .c1-sub input[type="submit"]:disabled, .c1-sub input[type="button"]:disabled,
.c1-sub .btn_ty[disabled], .c1-sub a.btn_b02[disabled] { opacity: 0.45; cursor: default; pointer-events: none; }

/* --- 5-5. 페이지네이션 · 카테고리 탭 · 마이페이지 탭 (내비게이션 버튼) --- */
.c1-sub .pg_wrap .pg_page, .c1-sub .pg_wrap .pg_current { border: 1px solid var(--c1-line); color: var(--c1-t-body); border-radius: 8px; margin: 0 2px; background: #fff; }
.c1-sub .pg_wrap .pg_page:hover, .c1-sub .pg_wrap .pg_page:focus, .c1-sub .pg_wrap .pg_page:active { border-color: var(--c1-blue); color: var(--c1-blue-deep); background: var(--c1-bg-tint); }
.c1-sub .pg_wrap .pg_current { border-color: var(--c1-blue); background: var(--c1-blue); color: #fff; font-weight: 700; }
.c1-sub .bd_cate > li > a#bo_cate_on, .c1-sub .bd_cate > li > a:hover, .c1-sub .bd_cate > li > a:focus { color: var(--c1-blue-deep); }
.c1-sub .bd_cate > li > a::after { background: var(--c1-blue); }
/* .mypage_lnb 탭 → §15-3 에서 전 폭 통일 */

/* --- 5-6. 콘텐츠 액센트(구 블루/녹색 → 토큰): 제목 바 · 표 · 불릿 · 색상 카드 --- */
.c1-sub .tit_h3::before { background: var(--c1-cyan); }
.c1-sub .tit_h3::after { background: var(--c1-blue); }
.c1-sub .table_nomal { border-top-color: var(--c1-blue); }
.c1-sub .table_nomal th { background: var(--c1-bg-tint); color: var(--c1-navy); }
.c1-sub .dot_ul li::before { background: var(--c1-blue); }
.c1-sub .dot_ul li b { color: var(--c1-navy); }
.c1-sub .color_sky, .c1-sub .mcol { color: var(--c1-blue); }
.c1-sub .bg_blue { background: var(--c1-blue) !important; }
.c1-sub .bg_sky { background: var(--c1-blue-deep) !important; }
.c1-sub .bg_green { background: var(--c1-cyan) !important; }
.c1-sub .new_page_arti .flex_box > li:first-child { background: var(--c1-blue); border-color: var(--c1-blue); box-shadow: var(--c1-shadow-btn); }
.c1-sub .new_page_arti .flex_box > li:nth-child(2) { background: var(--c1-blue-deep); border-color: var(--c1-blue-deep); box-shadow: var(--c1-shadow-btn); }
.c1-sub .new_page_arti .flex_box > li:nth-child(3) { background: var(--c1-cyan); }
.c1-sub .form_filter th { background: var(--c1-bg-tint); }
.c1-sub .fillter_cal table tr > th { background: var(--c1-bg-tint); }

/* ============================================================
   6. 교육일정 달력(/cal/cal_list.php, table.cal_tb — tbody 는 ajax.cal.php 로드) — 모바일도 데스크톱과 같은 7열 월 그리드
   레거시 cal-list.css(≤800)는 표를 세로 목록으로 풀어버림 → 그리드로 복원(요일 헤더·날짜·과정 배지), 상세(.view_pop)는 탭 시 하단 시트.
   cal-list.css 가 본문에서 뒤에 로드되므로 body.c1-sub 접두로 우선순위 확보. 마크업/AJAX 무변경.
   ============================================================ */
body.c1-sub .cal_head > a { background: var(--c1-navy); border-radius: 8px; }
body.c1-sub .cal_head > a:hover { background: var(--c1-blue); }
@media (max-width: 767px) {
  body.c1-sub .cal_head { width: auto; max-width: 300px; }
  body.c1-sub .cal_tb { display: table; width: 100%; table-layout: fixed; border-spacing: 3px; border-collapse: separate; }
  body.c1-sub .cal_tb thead { display: table-header-group; }
  body.c1-sub .cal_tb tbody { display: table-row-group; }
  body.c1-sub .cal_tb tbody tr { display: table-row; height: auto; }
  body.c1-sub .cal_tb thead th {
    display: table-cell; padding: 7px 0; font-size: 12px; font-weight: 700; line-height: 1;
    background: var(--c1-bg-cool); color: var(--c1-t-emph); border: 1px solid var(--c1-line); border-radius: 6px;
  }
  body.c1-sub .cal_tb thead tr th:nth-child(1) { background: rgba(180, 85, 78, 0.08); color: var(--c1-cal-sun); }
  body.c1-sub .cal_tb thead tr th:nth-last-child(1) { background: rgba(61, 95, 176, 0.08); color: var(--c1-cal-sat); }
  body.c1-sub .cal_tb tbody td, body.c1-sub .cal_tb tbody td.update, body.c1-sub .cal_tb tbody td.default {
    display: table-cell; width: auto !important; height: 62px; margin: 0 !important; padding: 4px 3px 5px !important;
    box-sizing: border-box; vertical-align: top; text-align: left; background: #fff; border: 1px solid var(--c1-line); border-radius: 6px; cursor: default;
  }
  body.c1-sub .cal_tb tbody td.default:not(.update) { background: var(--c1-bg-cool); border-color: transparent; }
  body.c1-sub .cal_tb tbody td .date { font-size: 12px; line-height: 1; text-align: right; color: var(--c1-t-meta); margin-bottom: 4px; }
  body.c1-sub .cal_tb tbody td .date::after { content: none; }                        /* 요일 접미(레거시 모바일) 제거 — 헤더가 요일 표시 */
  body.c1-sub .cal_tb tbody td:nth-child(7n-6) .date { color: var(--c1-cal-sun); }
  body.c1-sub .cal_tb tbody td:nth-child(7n) .date { color: var(--c1-cal-sat); }
  body.c1-sub .cal_tb tbody td div:not(.view_pop) { padding: 0; margin-top: 3px; }
  body.c1-sub .cal_tb tbody td .date + div { margin-top: 0; }
  /* 과정: 셀 폭(≈45px)에는 제목이 들어가지 않으므로 종류 배지만 표시(색상 = 기존 ctype-* 클래스), 제목/상세는 탭 시 시트에서 */
  body.c1-sub .cal_tb tbody td a { display: block; position: relative; padding: 0 !important; font-size: 0; line-height: 0; }
  body.c1-sub .cal_tb tbody td a .cate_s {
    display: block; height: 16px; padding: 0 3px; border-radius: 4px; font-size: 9.5px; line-height: 16px; font-weight: 700;
    color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center;
  }
  /* 상세 시트: 화면 하단 고정, 탭(:hover)/포커스 시 표시 — 기존 hover 동작 그대로 */
  body.c1-sub .cal_tb tbody td a .view_pop {
    display: none; position: fixed !important; left: 12px; right: 12px; bottom: 12px; top: auto; width: auto; z-index: 1200;
    max-height: 72vh; overflow-y: auto; background: #fff; border: 1px solid var(--c1-line); border-radius: 14px;
    box-shadow: var(--c1-shadow-frame); font-size: 14px; line-height: 1.5; text-align: left;
  }
  body.c1-sub .cal_tb tbody td a:hover .view_pop, body.c1-sub .cal_tb tbody td a:focus .view_pop,
  body.c1-sub .cal_tb tbody td a:hover + .view_pop { display: block; }
  body.c1-sub .cal_tb tbody td a .view_pop b { display: block; padding: 10px 14px; font-size: 13px; font-weight: 700; color: #fff; border-radius: 13px 13px 0 0; }
  body.c1-sub .cal_tb tbody td a .view_pop ul { padding: 4px 0; }
  body.c1-sub .cal_tb tbody td a .view_pop ul > li { border-color: var(--c1-line-inner); }
  body.c1-sub .cal_tb tbody td a .view_pop ul > li > h5 { width: 84px; background: var(--c1-bg-tint); color: var(--c1-navy); font-size: 12.5px; }
  body.c1-sub .cal_tb tbody td a .view_pop ul > li > p { font-size: 13.5px; color: var(--c1-t-body); padding: 6px 12px; }
  body.c1-sub .cal_tb tbody td a .view_pop input[type='button'] { width: calc(100% - 28px); height: 42px; line-height: 42px; margin: 10px auto 14px; border-radius: 10px; background: var(--c1-blue); font-size: 14px; font-weight: 700; }
  body.c1-sub .hint_box li { margin: 0 6px 6px 0; }
}

/* 6b. (2026-10-14) 달력 데스크톱(≥768): 금·토 열의 상세 팝(.view_pop)만 왼쪽으로 열어 화면 우측/바로가기 레일에 잘리지 않게.
   팝 디자인 자체는 레거시(cal-list.css) 그대로 둔다 — 위치만 보정. 마크업/AJAX 무변경 */
@media (min-width: 768px) {
  body.c1-sub .cal_tb tbody td:nth-child(6) a .view_pop,
  body.c1-sub .cal_tb tbody td:nth-child(7) a .view_pop { left: auto; right: 80px; }
}

/* ============================================================
   7. 콘텐츠 > 일반인 (/s3/s3_1_1.php: .s3_col3 링크 박스 · .s3_col2 초급/고급 영상 목록) — 모바일 재배치 (마크업 무변경)
   ============================================================ */
@media (max-width: 767px) {
  .c1-sub .s3_col3 { flex-direction: column; gap: 10px; margin-bottom: 36px; }
  .c1-sub .s3_col3 > li { width: 100% !important; margin: 0 !important; border-radius: 12px; overflow: hidden; }
  .c1-sub .s3_col3 > li a { display: block; line-height: 56px; font-size: 15px; padding: 0 70px 0 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .c1-sub .s3_col3 > li span { width: 56px; height: 56px; background-color: var(--c1-navy); background-size: 18px auto; }
  .c1-sub .s3_col2 { flex-direction: column; gap: 24px; margin: 20px 0 36px; }
  .c1-sub .s3_col2 > * { width: 100% !important; }
  .c1-sub .s3_col2 > .rbx { margin-left: 0; }
  .c1-sub .s3_col2 h4 { line-height: 48px; font-size: 16px; background: var(--c1-blue); border-radius: 10px 10px 0 0; }
  .c1-sub .s3_col2 ul > li { display: flex; align-items: center; gap: 8px; min-height: 60px; padding: 12px 62px 12px 14px; font-size: 14.5px; line-height: 1.45; }
  .c1-sub .s3_col2 ul > li span { flex: 0 0 auto; width: 28px; font-size: 14px; line-height: 1; }
  .c1-sub .s3_col2 ul > li a { right: 12px; width: 40px; height: 40px; margin-top: -20px; background-size: 20px auto; }
}

/* 콘텐츠 > 원자력전문인력양성 (/s3/s3_2_1.php, .s321): 좌측 열 = 홀수 번호, 우측 열 = 짝수 번호 → 모바일 1열에서는 01,02,03… 순서로 끼워 넣기
   (열 래퍼와 ul 을 display:contents 로 풀고 li 에 order 부여). 마크업 무변경. */
@media (max-width: 767px) {
  .c1-sub .s321 .s3_col2 { gap: 0; }
  .c1-sub .s321 .s3_col2 > .lbx, .c1-sub .s321 .s3_col2 > .rbx, .c1-sub .s321 .s3_col2 > .lbx > ul, .c1-sub .s321 .s3_col2 > .rbx > ul { display: contents; }
  .c1-sub .s321 .s3_col2 .lbx li:nth-child(1) { order: 1; }  .c1-sub .s321 .s3_col2 .rbx li:nth-child(1) { order: 2; }
  .c1-sub .s321 .s3_col2 .lbx li:nth-child(2) { order: 3; }  .c1-sub .s321 .s3_col2 .rbx li:nth-child(2) { order: 4; }
  .c1-sub .s321 .s3_col2 .lbx li:nth-child(3) { order: 5; }  .c1-sub .s321 .s3_col2 .rbx li:nth-child(3) { order: 6; }
  .c1-sub .s321 .s3_col2 .lbx li:nth-child(4) { order: 7; }  .c1-sub .s321 .s3_col2 .rbx li:nth-child(4) { order: 8; }
  .c1-sub .s321 .s3_col2 .lbx li:nth-child(5) { order: 9; }  .c1-sub .s321 .s3_col2 .rbx li:nth-child(5) { order: 10; }
  .c1-sub .s321 .s3_col2 .lbx li:nth-child(6) { order: 11; }  .c1-sub .s321 .s3_col2 .rbx li:nth-child(6) { order: 12; }
  .c1-sub .s321 .s3_col2 .lbx li:nth-child(7) { order: 13; }  .c1-sub .s321 .s3_col2 .rbx li:nth-child(7) { order: 14; }
  .c1-sub .s321 .s3_col2 .lbx li:nth-child(8) { order: 15; }  .c1-sub .s321 .s3_col2 .rbx li:nth-child(8) { order: 16; }
  .c1-sub .s321 .s3_col2 .lbx li:nth-child(9) { order: 17; }  .c1-sub .s321 .s3_col2 .rbx li:nth-child(9) { order: 18; }
  .c1-sub .s321 .s3_col2 .lbx li:nth-child(10) { order: 19; }  .c1-sub .s321 .s3_col2 .rbx li:nth-child(10) { order: 20; }
  .c1-sub .s321 .s3_col2 .lbx li:nth-child(11) { order: 21; }  .c1-sub .s321 .s3_col2 .rbx li:nth-child(11) { order: 22; }
  .c1-sub .s321 .s3_col2 .lbx li:nth-child(12) { order: 23; }  .c1-sub .s321 .s3_col2 .rbx li:nth-child(12) { order: 24; }
  .c1-sub .s321 .s3_col2 li { background: #fff !important; }          /* 인라인 style 줄무늬 무시 → 짝수 번호(우측 열) 행만 음영 */
  .c1-sub .s321 .s3_col2 .rbx li { background: var(--c1-bg-cool) !important; }
}

/* 콘텐츠 > 방사선정보 (/s3/s3_3_1.php, .s331): 용어정리 표가 <col width="320"> 로 용어 열이 고정 320px → 모바일에서 설명 열이 밀림.
   ≤767 에서는 행을 '용어(라벨) / 설명' 블록으로 세로 배치. 마크업 무변경. */
@media (max-width: 767px) {
  .c1-sub .s331 .arti2 { margin-top: 44px !important; }
  .c1-sub .s331 .table_nomal { display: block; width: 100%; border-top: 0; }
  .c1-sub .s331 .table_nomal colgroup { display: none; }
  .c1-sub .s331 .table_nomal tbody, .c1-sub .s331 .table_nomal tr, .c1-sub .s331 .table_nomal th, .c1-sub .s331 .table_nomal td { display: block; width: 100%; box-sizing: border-box; }
  .c1-sub .s331 .table_nomal tr { margin-bottom: 10px; border: 1px solid var(--c1-line); border-radius: 10px; overflow: hidden; }
  .c1-sub .s331 .table_nomal th { padding: 9px 14px; border: 0; text-align: left; font-size: 14px; line-height: 1.4; background: var(--c1-bg-tint); color: var(--c1-navy); }
  .c1-sub .s331 .table_nomal td { padding: 10px 14px 12px; border: 0; text-align: left; font-size: 14px; line-height: 1.6; color: var(--c1-t-body); }
}

/* .link_a / .s4_link_a (집합교육일정바로가기·주기율표 등 외부 링크 버튼): 텍스트+아이콘을 플렉스로 정중앙 정렬.
   레거시는 아이콘 span 을 top:23px 로 밀어 맞추던 구조라 버튼 높이가 바뀌면 아이콘이 위로 떠 보임(모바일 56px 에서 노출). 전 폭 공통. */
.c1-sub .link_a, .c1-sub .s4_link_a { display: flex; align-items: center; justify-content: center; gap: 8px; }
.c1-sub .link_a span, .c1-sub .s4_link_a span { position: static; top: auto; margin: 0; display: inline-flex; align-items: center; line-height: 0; }
.c1-sub .link_a span img, .c1-sub .s4_link_a span img { display: block; vertical-align: middle; }

/* ============================================================
   8. 정회원 > 가입 안내 및 혜택 (/s4/s4_1.php, .s401) — 모바일 재배치 (마크업 무변경)
   ============================================================ */
.c1-sub .s401 .b_box p b { color: var(--c1-blue); }   /* 문의 라벨 주황 → 토큰 */
@media (max-width: 767px) {
  .c1-sub .s401 .arti2, .c1-sub .s401 .arti3, .c1-sub .s401 .arti4 { margin-top: 44px; }
  .c1-sub .s401 .arti5.mt100 { margin-top: 44px !important; }
  /* 가입 4단계: 배경 이미지 대신 번호 칩 + 카드 */
  .c1-sub .bg_col4 { counter-reset: c1step; gap: 8px; margin-top: 18px; }
  .c1-sub .bg_col4 li { display: flex; align-items: center; gap: 12px; padding: 12px 14px; text-align: left; font-size: 15px; line-height: 1.4; }
  .c1-sub .bg_col4 li::before {
    counter-increment: c1step; content: counter(c1step, decimal-leading-zero);
    flex: 0 0 auto; width: 34px; height: 34px; border-radius: 10px; background: var(--c1-blue); color: #fff;
    font-family: var(--c1-mono); font-size: 12.5px; display: inline-flex; align-items: center; justify-content: center;
  }
  /* 문의 (Tel · E-mail) 세로 배치 */
  .c1-sub .s401 .b_box p { margin-top: 24px !important; display: flex; flex-direction: column; gap: 6px; text-align: left; }
  .c1-sub .s401 .b_box p span { padding: 0; font-size: 15px; line-height: 1.5; }
  .c1-sub .s401 .b_box p span:first-child::after { display: none; }
  .c1-sub .s401 .b_box p b { font-size: 15px; }
  /* 혜택 카드: 아이콘 고정폭 + 텍스트 */
  .c1-sub .s401_col3 { flex-direction: column; align-items: stretch; gap: 10px; }
  .c1-sub .s401_col3 > * { height: auto !important; padding: 14px 16px !important; border-radius: 12px; }
  .c1-sub .s401_col3 > * .cnt { gap: 14px; }
  .c1-sub .s401_col3 > * .cnt figure { flex: 0 0 auto; }
  .c1-sub .s401_col3 > * .cnt figure img { width: 56px; height: auto; }
  .c1-sub .s401_col3 > * .cnt p { padding-left: 0; font-size: 14.5px; line-height: 1.5; }
  .c1-sub .s401_col3 > * .cnt p br { display: none; }
  /* 입금계좌 */
  .c1-sub .s401 .arti5 .bd_box { padding: 16px; border-radius: 12px; margin-top: 20px; }
  .c1-sub .s401 .arti5 .bd_box p { display: flex; align-items: flex-start; gap: 10px; font-size: 14.5px; line-height: 1.6; }
  .c1-sub .s401 .arti5 .bd_box span { margin-right: 0; flex: 0 0 auto; }
  .c1-sub .s401 .arti5 .bd_box span img { width: 36px; height: auto; }
}

/* .s401 가입 4단계: 데스크톱 배경 그래픽(s401_col4_bg.jpg 1067×203, 원형 4개 @x=0/288/578/866, 각 202px)을 카드마다 68px 원형으로 잘라 표시 — 번호 칩 대신 */
@media (max-width: 1023px) {
  .c1-sub .s401 .bg_col4 li { display: flex; align-items: center; gap: 14px; padding: 10px 14px; font-size: 15px; line-height: 1.4; text-align: left; }
  /* 원본 그래픽은 원 안 아래쪽에 캡션 자리를 비워 두어 아이콘이 위로 치우쳐 있음(중심 대비 -20px).
     → 이미지에서 '아이콘만' 확대해 뽑아 배지 정중앙에 놓고(배율 0.7), 링은 CSS(원본 링색 #006B88)로 그림 */
  .c1-sub .s401 .bg_col4 li::before {
    content: ''; counter-increment: none; flex: 0 0 auto; width: 72px; height: 72px; border-radius: 50%;
    background: #fff url(/theme/kans/images/sub/s401_col4_bg.jpg) no-repeat -35.4px -20.0px / 747px auto;
    box-shadow: inset 0 0 0 5px #006B88;
  }
  .c1-sub .s401 .bg_col4 li:nth-child(2)::before { background-position: -239.8px -21.4px; }
  .c1-sub .s401 .bg_col4 li:nth-child(3)::before { background-position: -438.6px -21.4px; }
  .c1-sub .s401 .bg_col4 li:nth-child(4)::before { background-position: -640.2px -24.2px; }
  /* 입금계좌: '우리은행 :' 라벨 줄바꿈 금지 */
  .c1-sub .s401 .arti5 .bd_box p b { flex: 0 0 auto; white-space: nowrap; }
}

/* .s401 가입 단계 카드 사이 진행 화살표(데스크톱 그래픽의 '›'를 세로 진행 '∨' 로) — 1열로 쌓이는 모바일에서만 */
@media (max-width: 767px) {
  .c1-sub .s401 .bg_col4, .c1-sub .s505 .bg_col4 { gap: 30px; }
  .c1-sub .s401 .bg_col4 li, .c1-sub .s505 .bg_col4 li { position: relative; overflow: visible; }
  .c1-sub .s401 .bg_col4 li:not(:last-child)::after,
  .c1-sub .s505 .bg_col4 li:not(:last-child)::after {
    content: ''; position: absolute; left: 50%; bottom: -21px; width: 12px; height: 12px;
    border-right: 2.5px solid var(--c1-grey-300); border-bottom: 2.5px solid var(--c1-grey-300);
    transform: translateX(-50%) rotate(45deg);
  }
}

/* ============================================================
   9. 협회소개 > 인사말 (/s5/s5_1.php, .s501) — 모바일: 사진 위 · 본문 아래 (마크업/인라인 style 무변경)
   레거시 .s501 .arti1 .tbx { padding-left:90px } 가 인라인 flex 래퍼(.tbx.chairman_wrap)에 붙어 본문 폭이 180px 로 좁아짐.
   ============================================================ */
@media (max-width: 767px) {
  .c1-sub .s501 .arti1 { display: block; height: auto; background: none; }
  .c1-sub .s501 .gray_box { display: block; box-sizing: border-box; width: 100%; padding: 18px 16px 20px; border-radius: 12px; }  /* 레거시 width:100% + 패딩 → border-box 로 카드 안에 맞춤 */
  .c1-sub .s501 .gray_box > * { display: block; }
  .c1-sub .s501 .gray_box > br { display: none; }
  .c1-sub .s501 .arti1 .tbx { padding: 0; }
  .c1-sub .s501 .chairman_wrap { flex-direction: column-reverse !important; align-items: center !important; gap: 16px !important; }  /* DOM: 본문 → 사진 이므로 reverse 로 사진을 위에 */
  .c1-sub .s501 .chairman_img img { height: auto !important; width: 132px; border-radius: 12px; display: block; }
  .c1-sub .s501 .chairman_text { width: 100%; }
  .c1-sub .s501 .gray_box > .tbx p, .c1-sub .s501 .chairman_text p { font-size: 15px; line-height: 1.75; text-align: left; word-break: keep-all; color: var(--c1-t-body); }
  .c1-sub .s501 .chairman_name { font-size: 16px !important; text-align: right; margin-top: 14px; color: var(--c1-navy); }
}

/* ============================================================
   10. 협회소개 > 단체 개요 (/s5/s5_2.php, .s502) — 모바일 (마크업/인라인 style 무변경)
   - .gray_box: table 레이아웃(figure 215px) → 이미지 위/본문 아래
   - .arti2 .flex_box.col2: 2열 50% + 42/30px 패딩 → 1열
   - .arti3 .flex_box: ul 인라인 white-space:nowrap 때문에 임원 명단이 잘리고 가로 오버플로우 → 줄바꿈 허용 + 1열
   - .arti4 .box: 좌우 비대칭 패딩(0 / 30px) → 균등
   ============================================================ */
@media (max-width: 767px) {
  .c1-sub .s502 .arti2.mt100, .c1-sub .s502 .arti3.mt100, .c1-sub .s502 .arti4.mt100 { margin-top: 44px !important; }
  .c1-sub .s502 .tit_h3 { margin-bottom: 18px; }
  .c1-sub .s502 .tit_h4 { font-size: 15px; line-height: 1.5; word-break: keep-all; }
  /* 설립목적 */
  .c1-sub .s502 .gray_box { display: block; box-sizing: border-box; width: 100%; height: auto; padding: 16px; border-radius: 12px; }
  .c1-sub .s502 .gray_box > * { display: block; }
  .c1-sub .s502 .gray_box > figure { width: 100%; text-align: center; margin-bottom: 14px; }
  .c1-sub .s502 .gray_box > figure img { max-width: 220px; width: 100%; height: auto; }
  .c1-sub .s502 .gray_box > .tbx { width: 100%; }
  .c1-sub .s502 .gray_box > .tbx p { font-size: 15px; line-height: 1.7; word-break: keep-all; }
  /* 사업 */
  .c1-sub .s502 .arti2 .flex_box { flex-direction: column; margin-top: 16px; }
  .c1-sub .s502 .arti2 .flex_box > * { width: 100% !important; padding: 14px 4px !important; }
  .c1-sub .s502 .arti2 .flex_box > *:first-child { border-right: 0 !important; border-bottom: 1px solid var(--c1-line); }
  .c1-sub .s502 .arti2 .flex_dot li { font-size: 14.5px; line-height: 1.55; word-break: keep-all; margin-bottom: 8px; }
  .c1-sub .s502 .arti2 .flex_dot li br { display: none; }
  /* 임원 */
  .c1-sub .s502 .arti3 .flex_box { display: block; white-space: normal !important; }
  .c1-sub .s502 .arti3 .flex_box > * {
    display: flex; align-items: flex-start; gap: 10px; white-space: normal !important;
    font-size: 14.5px; line-height: 1.5; padding: 10px 0; word-break: keep-all;
  }
  .c1-sub .s502 .arti3 .flex_box > *:empty { display: none; }
  .c1-sub .s502 .arti3 .flex_box > * span { flex: 0 0 auto; width: 62px; line-height: 26px; font-size: 12.5px; border-color: var(--c1-blue); color: var(--c1-blue); }
  /* 정관 */
  .c1-sub .s502 .arti4 .box { padding: 18px 16px !important; border-radius: 12px; }
  .c1-sub .s502 .arti4 .box > * { font-size: 14.5px; line-height: 1.7; word-break: keep-all; }
  .c1-sub .s502 .arti4 .box h5 { font-size: 15px; margin-top: 22px; }
}

/* ============================================================
   11. 협회소개 > 연혁 및 조직 (/s5/s5_3.php, .s503) — 모바일 (마크업 무변경)
   - .history_box: 연도 316px 셀 + 날짜 135px 셀 고정 → 내용 p 가 34px 로 찌그러짐. 연도를 위로 올리고 날짜·내용은 한 줄 배치
   - .arti1 .figure: 290px 배너 축소 / .arti2: 조직도 이미지 아래 빈 150px 패딩(구 절대배치 박스 잔재) 제거
   ============================================================ */
@media (max-width: 767px) {
  .c1-sub .s503 .arti1 .figure { height: 150px; }
  .c1-sub .s503 .arti1 .figure .tbx h4 { font-size: 20px; letter-spacing: 0.3em; margin-bottom: 10px; }
  .c1-sub .s503 .arti1 .figure .tbx p { font-size: 14px; line-height: 1.5; padding: 0 16px; word-break: keep-all; }
  /* 연혁 타임라인 */
  .c1-sub .s503 .history_box { margin-top: 26px; }
  .c1-sub .s503 .history_box > ul::before, .c1-sub .s503 .history_box > ul::after { display: none; }   /* 315px 세로선·끝점 */
  .c1-sub .s503 .history_box > ul > li { display: block; width: 100%; padding-bottom: 22px; }
  .c1-sub .s503 .history_box > ul > li:nth-child(3) { padding-bottom: 22px; }
  .c1-sub .s503 .history_box > ul > li > * { display: block; }
  .c1-sub .s503 .history_box > ul > li > h3 {
    width: auto; padding: 0 0 8px; font-size: 26px; line-height: 1.1; color: var(--c1-blue);
    border-bottom: 1px solid var(--c1-line); margin-bottom: 10px;
  }
  .c1-sub .s503 .history_box > ul > li > h3::before, .c1-sub .s503 .history_box > ul > li > h3::after { display: none; }
  .c1-sub .s503 .history_box > ul > li ol li { display: flex; align-items: flex-start; gap: 10px; width: 100%; padding: 4px 0; }
  .c1-sub .s503 .history_box > ul > li ol li > * { display: block; font-size: 14.5px; line-height: 1.55; }
  .c1-sub .s503 .history_box > ul > li ol li > span { flex: 0 0 auto; width: 46px; padding-left: 0; font-family: var(--c1-mono); font-size: 13px; color: var(--c1-t-meta); }
  .c1-sub .s503 .history_box > ul > li ol li > p { flex: 1 1 auto; min-width: 0; color: var(--c1-t-body); word-break: keep-all; }
  /* 조직도 */
  .c1-sub .s503 .arti2 { padding-bottom: 0; }
  .c1-sub .s503 .arti2.mt100 { margin-top: 44px !important; }
  .c1-sub .s503 .arti2 figure { padding-top: 0; }
  .c1-sub .s503 .arti2 figure img { width: 100%; height: auto; }
}

/* ============================================================
   12. 협회소개 > 대관사업 (/s5/s5_5.php, .s505) — 모바일 (마크업 무변경)
   - 대관 절차 .bg_col4: 데스크톱 원형 그래픽(s505_1.jpg 1069×203, 원 4개 @1/289/579/867)을 카드 아이콘으로, h5 의 65/87px 오프셋 제거
   - 결제안내 .tg(4열 1행: 아이콘·계좌 / 아이콘·카드) → 가로 스크롤 대신 세로 스택
   ============================================================ */
@media (max-width: 1023px) {
  .c1-sub .s505 .bg_col4 li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; padding: 10px 14px !important; text-align: left; font-size: 15px; line-height: 1.4; }
  .c1-sub .s505 .bg_col4 li::before {
    content: ''; flex: 0 0 auto; width: 72px; height: 72px; border-radius: 50%;
    background: #fff url(/theme/kans/images/sub/s505_1.jpg) no-repeat -35.4px -20.0px / 748px auto;
    box-shadow: inset 0 0 0 5px #006B88;
  }
  .c1-sub .s505 .bg_col4 li:nth-child(2)::before { background-position: -239.8px -21.4px; }
  .c1-sub .s505 .bg_col4 li:nth-child(3)::before { background-position: -439.3px -21.4px; }
  .c1-sub .s505 .bg_col4 li:nth-child(4)::before { background-position: -640.2px -21.4px; }
  .c1-sub .s505 .bg_col4 > li h5 { flex: 1 1 100%; margin: 0 0 0 86px !important; width: auto !important; font-size: 13px; line-height: 1.4; color: var(--c1-t-meta); }
  .c1-sub .s505 .bg_col4 li a p { color: var(--c1-blue) !important; }
}
@media (max-width: 767px) {
  .c1-sub .s505 .arti2.mt100 { margin-top: 44px !important; }
  .c1-sub .s505 .arti3 { margin-top: 44px; }
  /* 결제안내: 4열 1행 표 → 아이콘+설명 세로 스택 (스크롤 래퍼 해제) */
  .c1-sub .s505 .arti3 .c1-tbl-scroll { overflow: visible; margin: 0; padding: 0; }
  .c1-sub .s505 .arti3 table.tg { display: block; min-width: 0 !important; width: 100%; }
  .c1-sub .s505 .arti3 table.tg thead, .c1-sub .s505 .arti3 table.tg tbody, .c1-sub .s505 .arti3 table.tg tr { display: block; width: 100%; }
  .c1-sub .s505 .arti3 table.tg td { display: block; width: 100%; padding: 4px 0; text-align: center; font-size: 14.5px; line-height: 1.6; }
  .c1-sub .s505 .arti3 table.tg td img { max-width: 92px; height: auto; }
  .c1-sub .s505 .arti3 table.tg td:nth-child(2) { padding-bottom: 20px; border-bottom: 1px solid var(--c1-line); margin-bottom: 18px; }
  .c1-sub .s505 .arti1 p { font-size: 14.5px; line-height: 1.6; word-break: keep-all; }
}

/* 마이페이지 본문 버튼(레거시 .my_page_new .arti2 a/button = #0094dc) → 토큰.
   페이지네이션(nav.pg_wrap 안)은 §5-5 를 그대로 쓰도록 `.bt_box > div > span > a` 로 한정 */
.c1-sub .my_page_new .arti2 .table_nomal a:not(.disable), .c1-sub .my_page_new .arti2 .table_nomal button,
.c1-sub .my_page_new .arti2 .bt_box > div > span > a { background: var(--c1-blue); border-radius: 10px; }
.c1-sub .my_page_new .arti2 .table_nomal a:not(.disable):hover, .c1-sub .my_page_new .arti2 .table_nomal button:not(:disabled):hover,
.c1-sub .my_page_new .arti2 .bt_box > div > span > a:hover { background: var(--c1-blue-deep); }
.c1-sub .my_page_new .arti2 a.disable, .c1-sub .my_page_new .arti2 .table_nomal a.disable { background: #fff; border: 1px solid var(--c1-blue); color: var(--c1-t-heading); border-radius: 10px; }
.c1-sub .my_page_new .arti2 a.disable.complete, .c1-sub .my_page_new .arti2 .table_nomal a.disable.complete { background: var(--c1-navy); border-color: var(--c1-navy); color: #fff; }
/* 온라인교육 데이터 갱신하기: 인라인 style 의 레거시 주황(#fd7400) → 토큰 (인라인이라 !important 필요) */
.c1-sub .my_page_new .arti2 .top_bx button[style*="fd7400"] { background-color: var(--c1-blue-deep) !important; border-radius: 10px; }
.c1-sub .my_page_new .arti2 .top_bx button[style*="fd7400"]:hover { background-color: var(--c1-navy) !important; }

/* ============================================================
   13. 마이페이지 (/my_page/*.php, .my_page_new) — 모바일 (마크업 무변경)
   - .my_info: 8셀 1행 → th(라벨)/td(값) 세로 스택 (모바일에서 td 폭이 0 이 되어 값이 보이지 않던 문제)
   - .form_filter: 6열 폼 표 → 라벨 위 / 입력 아래, select·input 이 카드 밖으로 나가던 가로 오버플로우 해소
   - .mypage_lnb: 1/6 고정폭(글자 세로 줄바꿈) → 2열
   - 결과 표: 마크업의 data-th 라벨을 활용해 카드형으로 (가로 스크롤 대신)
   ============================================================ */
@media (max-width: 767px) {
  .c1-sub .my_page_new .cnt_box { padding: 18px 16px 28px; }
  /* 상단 액션 버튼 */
  .c1-sub .my_page_new .smb_my_act { display: flex; flex-wrap: wrap; gap: 8px; }
  .c1-sub .my_page_new .smb_my_act li { flex: 1 1 calc(50% - 4px); }
  .c1-sub .my_page_new .smb_my_act .btn02 { display: block; width: 100%; box-sizing: border-box; text-align: center; font-size: 13.5px; padding: 10px 6px; }
  .c1-sub .my_page_new .my_info_sub_tit { font-size: 16px; margin: 22px 0 10px; }
  /* 내 정보 */
  .c1-sub .my_page_new .my_info, .c1-sub .my_page_new .my_info tbody,
  .c1-sub .my_page_new .my_info tr, .c1-sub .my_page_new .my_info th, .c1-sub .my_page_new .my_info td {
    display: block; width: 100% !important; box-sizing: border-box;
  }
  .c1-sub .my_page_new .my_info { border-top: 1px solid var(--c1-line); min-width: 0 !important; }
  .c1-sub .my_page_new .arti1 .c1-tbl-scroll { overflow: visible; margin: 0; padding: 0; }   /* 캐시된 구 스크립트가 감싼 경우 대비 */
  .c1-sub .my_page_new .my_info tr > * { line-height: 1.5; }
  .c1-sub .my_page_new .my_info th {
    padding: 8px 12px; border: 0; text-align: left; font-size: 13px; font-weight: 700;
    background: var(--c1-bg-tint); color: var(--c1-navy);
  }
  .c1-sub .my_page_new .my_info td { padding: 9px 12px; border: 0; border-bottom: 1px solid var(--c1-line); text-align: left; font-size: 14.5px; line-height: 1.5; word-break: break-all; }
  /* 좌측 탭 */
  /* 탭 → §15-3 */
  /* 검색 필터 */
  .c1-sub .my_page_new .form_filter table, .c1-sub .my_page_new .form_filter tbody,
  .c1-sub .my_page_new .form_filter tr, .c1-sub .my_page_new .form_filter th, .c1-sub .my_page_new .form_filter td {
    display: block; width: 100% !important; box-sizing: border-box;
  }
  .c1-sub .my_page_new .form_filter th { padding: 8px 10px !important; border: 0; text-align: left; font-size: 13px; line-height: 1.4; background: var(--c1-bg-tint); color: var(--c1-navy); }
  .c1-sub .my_page_new .form_filter td { padding: 8px 0 12px !important; border: 0; line-height: normal; }
  /* 필터 컨트롤 → §15-2 */
  /* 건수 · 페이지당 개수 */
  /* .top_bx → §15-4 */
  /* 결과 목록: data-th 라벨을 쓰는 카드형 */
  .c1-sub .my_page_new .table_wrap { overflow: visible; }
  .c1-sub .my_page_new .table_wrap .table_nomal { display: block; width: 100%; border-top: 0; }
  .c1-sub .my_page_new .table_wrap .table_nomal colgroup { display: none; }
  .c1-sub .my_page_new .table_wrap .table_nomal tbody { display: block; }
  .c1-sub .my_page_new .table_wrap .table_nomal tbody tr {
    display: block; margin-bottom: 10px; padding: 12px 14px; background: var(--c1-bg-cool);
    border: 1px solid var(--c1-line); border-radius: 12px;
  }
  .c1-sub .my_page_new .table_wrap .table_nomal tbody td {
    display: flex; align-items: flex-start; gap: 10px; width: 100% !important; padding: 3px 0 !important;
    border: 0; text-align: left !important; font-size: 14px; line-height: 1.5;
  }
  .c1-sub .my_page_new .table_wrap .table_nomal tbody td[data-th]::before {
    content: attr(data-th); flex: 0 0 82px; color: var(--c1-t-meta); font-size: 12.5px; line-height: 1.6;
  }
  .c1-sub .my_page_new .table_wrap .table_nomal tbody td[data-th="교육명"] { padding-left: 0 !important; font-weight: 600; color: var(--c1-t-heading); }
  .c1-sub .my_page_new .table_wrap .table_nomal tbody td:not([data-th])::before { content: '선택'; flex: 0 0 82px; color: var(--c1-t-meta); font-size: 12.5px; line-height: 1.6; }
  .c1-sub .my_page_new .table_wrap .table_nomal tbody td:not([data-th]) { align-items: center; }
  .c1-sub .my_page_new .table_wrap .table_nomal tbody td.empty_table { display: block; padding: 32px 0 !important; text-align: center !important; color: var(--c1-t-meta); }
  .c1-sub .my_page_new .table_wrap .table_nomal tbody td.empty_table::before { content: none; }
  /* 하단: 결제하기 · 엑셀 · 페이지네이션 */
  .c1-sub .my_page_new .arti2 .bt_box { display: flex; flex-direction: column; gap: 10px; align-items: stretch; margin-top: 20px; }
  .c1-sub .my_page_new .arti2 .bt_box > div { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
  .c1-sub .my_page_new .arti2 .bt_box > div > span { flex: 1 1 auto; }
  .c1-sub .my_page_new .arti2 .bt_box > div > span > a, .c1-sub .my_page_new .bt_box .btn02 { display: block; width: 100%; box-sizing: border-box; text-align: center; line-height: 40px !important; }
  .c1-sub .my_page_new .arti2 .bt_box .pg_wrap span { flex: none; }
  .c1-sub .my_page_new .arti2 .bt_box .pg_wrap { flex: 1 1 100%; margin-top: 4px; text-align: center; }
}

/* ============================================================
   14. 자주묻는질문 (/bbs/faq.php, theme/kans/mobile/skin/faq/basic) — 토큰 정합 + 모바일 (마크업 무변경)
   - Q/A 배지 레거시 #1d9bea / #0c3353 → --c1-blue / --c1-navy, 프레임 선 → --c1-line
   - ≤480: 스킨의 vw 글자(3.4vw/3.2vw = 403px 에서 13.7/12.9px, 320px 에서 10.9px)를 고정 px 로, 답변 우측 패딩 0 → 12px
   ============================================================ */
.c1-sub #faq_con { border: 1px solid var(--c1-line); border-radius: 12px; overflow: hidden; }  /* 스킨은 border-top:0 + 첫 h3 상단선 → 프레임 선을 섹션에 통일 */
.c1-sub #faq_con h3 { border-top-color: var(--c1-line); }
.c1-sub #faq_con h3 a { color: var(--c1-t-heading); word-break: keep-all; }
.c1-sub #faq_con h3 .con_q { background: var(--c1-blue); }
.c1-sub #faq_con .con_a { background: var(--c1-navy); }
.c1-sub #faq_con .con_inner { border-top-color: var(--c1-line); color: var(--c1-t-body); background: var(--c1-bg-cool); }
.c1-sub #faq_con li:first-child h3 { border-top: 0; }
@media (max-width: 480px) {
  .c1-sub #faq_wrap { padding-top: 0; }
  .c1-sub #faq_con h3 a { font-size: 14.5px; line-height: 1.45; padding: 9px 34px 9px 42px; margin-right: 0; min-height: 30px; box-sizing: border-box; background-position: right 12px center; }
  .c1-sub #faq_con h3 .con_q, .c1-sub #faq_con .con_a { width: 30px; height: 30px; line-height: 30px; font-size: 14px; top: 6px; left: 6px; border-radius: 8px; }
  .c1-sub #faq_con .con_inner { padding: 10px 12px 12px 42px; font-size: 14px; line-height: 1.7; word-break: keep-all; }
  .c1-sub #faq_con .con_inner img { max-width: 100%; height: auto; }
  .c1-sub #faq_con .con_closer { margin-top: 8px; }
  .c1-sub #faq_con .closer_btn { font-size: 13px; padding: 4px 10px; border-radius: 8px; }
}

/* ============================================================
   15. 마이페이지 — 데스크톱 회귀 수정 + 공통 컨트롤 정합 (2026-09-17)
   대상: /my_page/my_complete.php · my_enroll.php · my_pay.php (동일 마크업). 마크업/PHP/JS 동작 무변경.
   데스크톱 진단(1440): 필터 표가 auto 레이아웃 + th 191px 로 select 47px/입력 98px 까지 눌리고 조회 버튼이 152px 높이로 늘어남,
   결과 표는 colgroup 고정폭 합(1200) > 컨테이너(1138) + table-layout:fixed 로 교육명(*) 열이 0px → 글자가 세로로 한 자씩 깨짐.
   모바일 진단(403): 탭 li 50% + 0.8px 테두리(content-box) 로 한 줄에 1개만 배치, 년도/월 select 48%+4% 가 줄바꿈, 상단 안내문·버튼 가로 압축, thead 숨김으로 전체선택 유실.
   ============================================================ */

/* --- 15-1. 폼 컨트롤 공통(select · text input): 높이 40 · 라인 --c1-grey-300 · 라운드 10 · 커스텀 화살표 · 포커스 링 --- */
.c1-sub .form_filter select, .c1-sub .form_filter input[type="text"],
.c1-sub .top_bx select, .c1-sub .fillter_cal select, .c1-sub #bo_sch select {
  -webkit-appearance: none; appearance: none; box-sizing: border-box;
  height: 40px; margin: 0; padding: 0 12px; line-height: 38px;
  border: 1px solid var(--c1-grey-300); border-radius: 10px; background-color: #fff;
  color: var(--c1-t-heading); font-family: var(--c1-font); font-size: 14px; font-weight: 500; vertical-align: middle;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.c1-sub .form_filter select, .c1-sub .top_bx select, .c1-sub .fillter_cal select, .c1-sub #bo_sch select {
  padding-right: 36px; cursor: pointer;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path d='M2 4l4 4 4-4' fill='none' stroke='%230B1D3A' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 12px 12px;
}
.c1-sub .form_filter select:hover, .c1-sub .top_bx select:hover, .c1-sub .fillter_cal select:hover, .c1-sub #bo_sch select:hover,
.c1-sub .form_filter input[type="text"]:hover { border-color: var(--c1-blue); }
.c1-sub .form_filter select:focus, .c1-sub .form_filter input[type="text"]:focus,
.c1-sub .top_bx select:focus, .c1-sub .fillter_cal select:focus, .c1-sub #bo_sch select:focus {
  outline: none; border-color: var(--c1-blue); box-shadow: 0 0 0 3px rgba(28, 95, 208, 0.15);
}
.c1-sub .form_filter select:disabled, .c1-sub .top_bx select:disabled, .c1-sub .fillter_cal select:disabled,
.c1-sub .form_filter input[type="text"]:disabled { background-color: var(--c1-bg-cool); color: var(--c1-t-meta); cursor: default; }
.c1-sub .form_filter input[type="text"]::placeholder { color: var(--c1-t-meta); }
.c1-sub .form_filter select::-ms-expand { display: none; }

/* --- 15-2. 검색 필터 (.form_filter) --- */
/* 데스크톱(≥1024): 표 유지, table-layout:fixed 로 라벨 112px 고정 → 입력란이 남는 폭을 균등 배분 */
.c1-sub .form_filter { display: flex; flex-direction: row; align-items: stretch; justify-content: space-between; gap: 12px; margin-bottom: 28px; }
.c1-sub .form_filter table { width: calc(100% - 137px); table-layout: fixed; border-collapse: collapse; }
.c1-sub .form_filter tr > * { box-sizing: border-box; height: 58px; padding: 8px 12px; border: 1px solid var(--c1-line); font-size: 14px; line-height: 1.4; text-align: left; vertical-align: middle; }
.c1-sub .form_filter th { width: 112px; font-weight: 600; color: var(--c1-navy); background: var(--c1-bg-tint); white-space: nowrap; }
.c1-sub .form_filter th label { cursor: default; }
.c1-sub .form_filter td { width: auto; }
.c1-sub .form_filter select, .c1-sub .form_filter input[type="text"] { width: 100%; }
/* 년도·월 두 select 를 한 줄 2분할: 셀 font-size 0 으로 inline-block 사이 공백 제거 */
.c1-sub .form_filter td:has(> select[name="smonth"]) { font-size: 0; }
.c1-sub .form_filter select[name="syear"], .c1-sub .form_filter select[name="smonth"] { width: calc(50% - 4px); }
.c1-sub .form_filter select[name="syear"] { margin-right: 8px; }
.c1-sub .form_filter_btn {
  flex: 0 0 125px; min-width: 125px; align-self: stretch; padding: 0 12px;
  font-size: 16px; font-weight: 700; letter-spacing: -0.01em; border-radius: 12px; cursor: pointer;
}
/* 태블릿(768–1023): 표 → 라벨/입력 2쌍 그리드(112px + 1fr), 조회 버튼은 아래 전폭 */
@media (max-width: 1023px) {
  .c1-sub .form_filter { flex-direction: column; gap: 12px; }
  .c1-sub .form_filter table, .c1-sub .form_filter tbody { display: block; width: 100%; border-top: 1px solid var(--c1-line); border-left: 1px solid var(--c1-line); }
  .c1-sub .form_filter tbody { border: 0; }
  .c1-sub .form_filter tr { display: grid; grid-template-columns: 112px minmax(0, 1fr) 112px minmax(0, 1fr); }
  .c1-sub .form_filter tr > * { display: block; height: auto; min-height: 56px; border: 0; border-right: 1px solid var(--c1-line); border-bottom: 1px solid var(--c1-line); }
  .c1-sub .form_filter th { display: flex; align-items: center; }
  .c1-sub .form_filter td { display: flex; align-items: center; }
  .c1-sub .form_filter td:has(> select[name="smonth"]) { font-size: 0; }
  .c1-sub .form_filter_btn { flex: none; width: 100%; height: 48px; align-self: auto; }
}
/* 모바일(≤767): 라벨 위 / 입력 아래 (1열) */
@media (max-width: 767px) {
  .c1-sub .form_filter table, .c1-sub .form_filter tbody { border: 0; }
  .c1-sub .form_filter tr { display: block; }
  .c1-sub .form_filter tr > * { display: block; min-height: 0; border: 0; }
  .c1-sub .form_filter th { padding: 8px 10px; font-size: 13px; line-height: 1.4; border-radius: 6px; }
  .c1-sub .form_filter td { padding: 8px 0 12px; }
  .c1-sub .form_filter select, .c1-sub .form_filter input[type="text"], .c1-sub .top_bx select { height: 44px; line-height: 42px; }
  .c1-sub .form_filter_btn { height: 46px; margin-top: 2px; border-radius: 12px; }
}

/* --- 15-3. 마이페이지 탭 (.mypage_lnb) — 6개 균등, 네이비 바 · 선택 블루 (링크/경로 무변경) --- */
.c1-sub .mypage_lnb {
  display: flex; flex-wrap: wrap; margin-top: 28px; padding: 0;
  background-color: var(--c1-navy); border: 0; border-radius: 12px; overflow: hidden;
}
.c1-sub .mypage_lnb li { flex: 1 1 0; width: auto; min-width: 0; padding: 0; box-sizing: border-box; text-align: center; border: 0; border-right: 1px solid rgba(255, 255, 255, 0.12); }
.c1-sub .mypage_lnb li:last-child { border-right: 0; }
.c1-sub .mypage_lnb li a {
  display: block; padding: 14px 8px; font-size: 15px; font-weight: 600; line-height: 1.3;
  color: rgba(255, 255, 255, 0.82); background: transparent; word-break: keep-all; text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.c1-sub .mypage_lnb li a:hover, .c1-sub .mypage_lnb li a:focus-visible { background-color: var(--c1-navy-700); color: #fff; outline: none; }
.c1-sub .mypage_lnb li.selected, .c1-sub .mypage_lnb li.selected a { background-color: var(--c1-blue); color: #fff; font-weight: 700; }
.c1-sub .mypage_lnb li.selected a:hover { background-color: var(--c1-blue-deep); }
@media (max-width: 1023px) {
  .c1-sub .mypage_lnb li { flex: 0 0 33.3333%; border-bottom: 1px solid rgba(255, 255, 255, 0.12); }
  .c1-sub .mypage_lnb li:nth-child(3n) { border-right: 0; }
  .c1-sub .mypage_lnb li:nth-last-child(-n+3) { border-bottom: 0; }
  .c1-sub .mypage_lnb li a { padding: 13px 6px; font-size: 14px; }
}
@media (max-width: 767px) {
  .c1-sub .mypage_lnb { margin-top: 22px; border-radius: 10px; }
  .c1-sub .mypage_lnb li { flex: 0 0 50%; border-right: 1px solid rgba(255, 255, 255, 0.12); border-bottom: 1px solid rgba(255, 255, 255, 0.12); }
  .c1-sub .mypage_lnb li:nth-child(3n) { border-right: 1px solid rgba(255, 255, 255, 0.12); }
  .c1-sub .mypage_lnb li:nth-child(2n) { border-right: 0; }
  .c1-sub .mypage_lnb li:nth-last-child(-n+3) { border-bottom: 1px solid rgba(255, 255, 255, 0.12); }
  .c1-sub .mypage_lnb li:nth-last-child(-n+2) { border-bottom: 0; }
  .c1-sub .mypage_lnb li a { padding: 12px 6px; font-size: 13.5px; }
}

/* --- 15-4. 결과 상단 바 (.top_bx): 안내문 좌 · 갱신 버튼/페이지당 개수 우 --- */
.c1-sub .my_page_new .arti2 .top_bx { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 14px; }
.c1-sub .my_page_new .arti2 .top_bx p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--c1-t-meta); word-break: keep-all; }
.c1-sub .my_page_new .arti2 .top_bx ul { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.c1-sub .my_page_new .arti2 .top_bx ul > li { display: block; margin: 0; }
.c1-sub .my_page_new .arti2 .top_bx ul > li select { height: 40px; min-width: 130px; }
.c1-sub .my_page_new .arti2 .top_bx button {
  height: 40px; line-height: 38px; padding: 0 16px; border: 0; border-radius: 10px;
  font-size: 14px; font-weight: 600; color: #fff; white-space: nowrap; cursor: pointer;
}
@media (max-width: 767px) {
  .c1-sub .my_page_new .arti2 .top_bx { flex-direction: column; align-items: stretch; gap: 10px; }
  .c1-sub .my_page_new .arti2 .top_bx p { font-size: 13.5px; }
  .c1-sub .my_page_new .arti2 .top_bx ul { justify-content: flex-end; flex-wrap: wrap; }
  .c1-sub .my_page_new .arti2 .top_bx ul > li:has(button) { flex: 1 1 100%; }
  .c1-sub .my_page_new .arti2 .top_bx button { width: 100%; height: 44px; line-height: 42px; }
  .c1-sub .my_page_new .arti2 .top_bx ul > li select { width: 100%; min-width: 0; height: 44px; line-height: 42px; }
  .c1-sub .my_page_new .arti2 .top_bx ul > li:has(select) { flex: 1 1 100%; }
}

/* --- 15-5. 내 정보 (.my_info) 데스크톱 토큰 정합 (모바일 스택은 §13) --- */
.c1-sub .my_page_new .arti1 .my_info { border-top: 2px solid var(--c1-navy); }
.c1-sub .my_page_new .arti1 .my_info tr > * { border-bottom-color: var(--c1-line); font-size: 15px; }
.c1-sub .my_page_new .arti1 .my_info tr > th { background: var(--c1-bg-tint); color: var(--c1-navy); font-weight: 600; }
.c1-sub .my_page_new .my_info_sub_tit { color: var(--c1-navy); }
.c1-sub .my_page_new .arti1 > .smb_my_act { margin-bottom: 28px; }
.c1-sub .my_page_new .arti1 > .smb_my_act > li { margin-left: 6px; }
.c1-sub .my_page_new .arti1 > .smb_my_act > li:first-child { margin-left: 0; }

/* --- 15-6. 결과 표 (데스크톱/태블릿): 교육명(*) 열 0px 붕괴 해소 — 고정폭 합이 컨테이너보다 커서 * 열이 0 이 되던 것을
       auto 레이아웃 + 교육명 최소폭으로 바꾸고, 넘치는 폭은 .table_wrap 가로 스크롤(레거시 동작)로 처리 --- */
@media (min-width: 768px) {
  .c1-sub .my_page_new .arti2 .table_wrap { overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; border-radius: 0; }
  .c1-sub .my_page_new .arti2 .table_wrap .table_nomal { table-layout: auto; width: auto; min-width: 100%; }
  .c1-sub .my_page_new .arti2 .table_wrap .table_nomal col { width: auto; }
  .c1-sub .my_page_new .arti2 .table_wrap .table_nomal tr > * { font-size: 14px; line-height: 1.5; padding: 10px 7px; white-space: nowrap; word-break: keep-all; }   /* 13열 × 좌우 7px → 1440 에서 스크롤 없이 수용 */
  .c1-sub .my_page_new .arti2 .table_wrap .table_nomal th { font-weight: 600; }
  .c1-sub .my_page_new .arti2 .table_wrap .table_nomal td[data-th="교육명"] { min-width: 260px; max-width: 420px; white-space: normal; text-align: left; }
  .c1-sub .my_page_new .arti2 .table_wrap .table_nomal th:first-child, .c1-sub .my_page_new .arti2 .table_wrap .table_nomal td:first-child { width: 44px; text-align: center; }
  .c1-sub .my_page_new .arti2 .table_wrap .table_nomal .empty_table { white-space: normal; text-align: center; padding: 40px 0; color: var(--c1-t-meta); }
}

/* --- 15-7. 체크박스 — Concept 1 색, 터치 가능한 크기 --- */
.c1-sub .my_page_new input[type="checkbox"] { width: 18px; height: 18px; margin: 0; vertical-align: middle; accent-color: var(--c1-blue); cursor: pointer; }
.c1-sub .my_page_new input[type="checkbox"]:focus-visible { outline: 2px solid var(--c1-cyan); outline-offset: 2px; }

/* --- 15-8. 모바일 전체 선택 — 카드형에서 thead 를 숨기되 첫 th(#chkall, 기존 all_checked 호출)만 '전체 선택' 바로 노출 --- */
@media (max-width: 767px) {
  .c1-sub .my_page_new .table_wrap .table_nomal thead, .c1-sub .my_page_new .table_wrap .table_nomal thead tr { display: block; width: 100%; }
  .c1-sub .my_page_new .table_wrap .table_nomal thead th { display: none; }
  .c1-sub .my_page_new .table_wrap .table_nomal thead th:first-child {
    display: flex; align-items: center; gap: 10px; width: 100%; box-sizing: border-box; margin: 0 0 10px; padding: 10px 14px;
    background: #fff; border: 1px solid var(--c1-line); border-radius: 10px; font-size: 14px; font-weight: 600; color: var(--c1-t-heading); text-align: left;
  }
  .c1-sub .my_page_new .table_wrap .table_nomal thead th:first-child::after { content: '전체 선택'; }
  .c1-sub .my_page_new .table_wrap .table_nomal tbody td:not([data-th]) input[type="checkbox"] { margin-left: 2px; }
}

/* --- 15-9. 버튼 규격 통일(마이페이지): 높이 40 · 라운드 10 · 14px/600 --- */
.c1-sub .my_page_new .arti2 .table_nomal a:not(.disable), .c1-sub .my_page_new .arti2 .table_nomal button,
.c1-sub .my_page_new .arti2 a.disable, .c1-sub .my_page_new .arti2 .bt_box > div > span > a {
  display: inline-block; box-sizing: border-box; height: 34px; line-height: 32px; padding: 0 12px;
  font-size: 13.5px; font-weight: 600; border-radius: 10px; white-space: nowrap; text-decoration: none;
}
.c1-sub .my_page_new .arti2 .table_nomal a:not(.disable), .c1-sub .my_page_new .arti2 .table_nomal button { border: 1px solid var(--c1-blue); }
.c1-sub .my_page_new .arti2 .bt_box > div > span > a { height: 40px; line-height: 38px; padding: 0 18px; font-size: 14px; border: 1px solid var(--c1-blue); }
.c1-sub .my_page_new .arti2 .bt_box > div > span > a:hover { border-color: var(--c1-blue-deep); }
.c1-sub .my_page_new .arti2 .bt_box > div > span { margin-right: 6px; }
.c1-sub .my_page_new .arti2 .table_nomal button:disabled, .c1-sub .my_page_new .arti2 .table_nomal a[disabled] { opacity: 0.45; cursor: default; pointer-events: none; }
.c1-sub .smb_my_act .btn02, .c1-sub .smb_my_act a.btn02[style] { height: 40px; line-height: 38px; padding: 0 16px; box-sizing: border-box; font-size: 14px; font-weight: 600; }
@media (max-width: 767px) {
  .c1-sub .my_page_new .arti2 .bt_box > div > span > a, .c1-sub .my_page_new .bt_box .btn02 { height: 44px; line-height: 42px !important; }
  .c1-sub .my_page_new .arti2 .bt_box > div > span { margin-right: 0; }
  .c1-sub .my_page_new .smb_my_act .btn02 { height: 44px; line-height: 42px; padding: 0 8px; font-size: 13.5px; }
}

/* --- 15-10. 게시판 검색(#bo_sch): 스킨 입력창/버튼(45px)과 select 높이 정렬 + 입력창 토큰 라인·라운드 (마크업 무변경) --- */
.c1-sub #bo_sch select { height: 45px; line-height: 43px; }
.c1-sub #bo_sch #stx, .c1-sub #bo_sch .input_ty { box-sizing: border-box; height: 45px; border: 1px solid var(--c1-grey-300); border-radius: 10px; padding: 0 12px; font-family: var(--c1-font); font-size: 14px; color: var(--c1-t-heading); vertical-align: middle; transition: border-color 0.15s ease, box-shadow 0.15s ease; }
.c1-sub #bo_sch #stx:hover, .c1-sub #bo_sch .input_ty:hover { border-color: var(--c1-blue); }
.c1-sub #bo_sch #stx:focus, .c1-sub #bo_sch .input_ty:focus { outline: none; border-color: var(--c1-blue); box-shadow: 0 0 0 3px rgba(28, 95, 208, 0.15); }
.c1-sub #bo_sch #stx::placeholder { color: var(--c1-t-meta); }

/* --- 15-11. 마이페이지 상단 액션 버튼(.smb_my_act) 모바일 정렬 — §15-5 의 li margin-left 6px(데스크톱 간격)가 모바일 2열 계산(50%-4px ×2 + gap 8)을
       넘겨 한 줄에 1개씩 떨어지고 첫 버튼만 6px 넓어지던 문제 + a.btn02[style](인라인 배경) 만 40px 로 남던 높이 불일치 --- */
@media (max-width: 767px) {
  .c1-sub .my_page_new .arti1 > .smb_my_act { display: flex; flex-wrap: wrap; gap: 8px; width: 100%; margin-bottom: 22px; text-align: center; }
  .c1-sub .my_page_new .arti1 > .smb_my_act > li { flex: 0 0 calc(50% - 4px); max-width: calc(50% - 4px); margin: 0; }
  .c1-sub .my_page_new .smb_my_act .btn02, .c1-sub .my_page_new .smb_my_act a.btn02[style] {
    display: block; width: 100%; box-sizing: border-box; height: 44px; line-height: 42px; padding: 0 8px;
    font-size: 13.5px; font-weight: 600; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
}

/* --- 16. 회원 비밀번호 확인 (/bbs/member_confirm.php, #mb_confirm) — Concept 1 카드 · 컨트롤 (레거시 style.css 는 #mb_confirm_pw 를 가리키나 실제 id 는 confirm_mb_password) --- */
.c1-sub #mb_confirm { max-width: 560px; margin: 48px auto; padding: 32px 28px; border: 1px solid var(--c1-line); border-radius: 16px; box-shadow: var(--c1-shadow-frame); background: #fff; }
.c1-sub #mb_confirm p { margin-bottom: 20px; font-size: 14.5px; line-height: 1.6; color: var(--c1-t-body); word-break: keep-all; }
.c1-sub #mb_confirm p strong { display: block; margin-bottom: 6px; font-size: 18px; font-weight: 700; color: var(--c1-navy); }
.c1-sub #mb_confirm fieldset { padding: 18px 92px 18px 18px; border: 1px solid var(--c1-line); border-radius: 12px; background: var(--c1-bg-cool); font-size: 13px; color: var(--c1-t-meta); }
.c1-sub #mb_confirm #mb_confirm_id { display: block; width: 100%; height: 40px; line-height: 38px; margin: 4px 0 10px; padding: 0 12px; text-indent: 0; box-sizing: border-box; border: 1px solid var(--c1-line); border-radius: 10px; background: #fff; color: var(--c1-t-heading); font-size: 14px; font-weight: 600; }
.c1-sub #mb_confirm #confirm_mb_password { display: block; width: 100%; height: 40px; margin-top: 4px; padding: 0 12px; box-sizing: border-box; border: 1px solid var(--c1-grey-300); border-radius: 10px; background: #fff; font-size: 14px; color: var(--c1-t-heading); transition: border-color 0.15s ease, box-shadow 0.15s ease; }
.c1-sub #mb_confirm #confirm_mb_password:focus { outline: none; border-color: var(--c1-blue); box-shadow: 0 0 0 3px rgba(28, 95, 208, 0.15); }
.c1-sub #mb_confirm .btn_submit { right: 18px; width: 64px; height: 64px; border-radius: 12px; font-size: 14px; font-weight: 700; color: #fff; }
.c1-sub #mb_confirm .btn_confirm { text-align: center; }
.c1-sub #mb_confirm .btn_confirm a { display: inline-block; height: 40px; line-height: 38px; padding: 0 18px; border-radius: 10px; font-size: 14px; }
@media (max-width: 767px) {
  .c1-sub #mb_confirm { margin: 20px 16px; padding: 22px 18px; }
  .c1-sub #mb_confirm fieldset { padding: 16px; }
  .c1-sub #mb_confirm .btn_submit { position: static; transform: none; display: block; width: 100%; height: 46px; margin-top: 12px; }
}

/* --- 17. 모바일 원본 이미지 확대 링크 (concept1-sub.js 가 큰 안내 이미지를 감싼 <a>) --- */
@media (max-width: 767px) {
  .c1-sub .c1-img-zoom { position: relative; display: block; border-radius: 12px; overflow: hidden; }
  .c1-sub .c1-img-zoom img { display: block; width: 100%; height: auto; }
  .c1-sub .c1-img-zoom::after {
    content: '크게 보기'; font-family: var(--c1-font); font-weight: 700;
    position: absolute; right: 10px; bottom: 10px; padding: 7px 12px 7px 30px; border-radius: 999px;
    background: rgba(11, 29, 58, 0.82) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round'><circle cx='11' cy='11' r='7'/><path d='m20 20-4.3-4.3M11 8.5v5M8.5 11h5'/></svg>") no-repeat 10px center;
    color: #fff; font-size: 12.5px; line-height: 1; letter-spacing: -0.01em;
  }
  .c1-sub .c1-img-zoom:active::after { background: var(--c1-blue); }
}

/* ============================================================
   18. 콘텐츠 팔레트 잔여분 → Concept 1 토큰 (2026-09-17, 전수 점검 결과)
   레거시 sub.css 의 #0094dc(구 블루) · #0c3353(구 네이비) · #00bfb7 · #1d9bea · #6699ff 가 남아 있던 곳.
   색상만 교체하고 크기·배치·마크업·동작은 그대로 둔다.
   ============================================================ */

/* --- 공통 액센트 (불릿 · 강조 · 표 머리) --- */
.c1-sub .dot_ul li::before { background: var(--c1-blue); }
.c1-sub .dot_ul li b { color: var(--c1-navy); }
.c1-sub .flex_dot > li::before { background: var(--c1-blue); }
.c1-sub .color_sky, .c1-sub .s1111 .color_sky, .c1-sub .s501 .arti1 .tbx span { color: var(--c1-blue); }
.c1-sub .sv_sec .tit_box span { color: var(--c1-blue); }
/* (제거) .dep_4_wrap current 색 지정은 §3 의 흰 글자 규칙을 덮어써 삭제 — 레거시 #0094dc 는 §3 가 이미 대체 */
.c1-sub .lnb_box > div:not(.home) > div ul li.current > a { background: var(--c1-bg-tint); color: var(--c1-blue-deep); }

/* --- 교육안내: 단기강좌(s112*) 라벨 · 온라인교육 --- */
.c1-sub .s112_col2 > * dt { background: var(--c1-blue); }
.c1-sub .s112_col2 > .rbx dt { background: var(--c1-cyan); }
.c1-sub .s112_list li span { border-color: var(--c1-line); color: var(--c1-t-heading); }
.c1-sub .s1123 .arti2 .line_box h5 { color: var(--c1-navy); }

/* --- 콘텐츠(s3): 카드 화살표 버튼 · 2열 제목 · 번호 --- */
.c1-sub .s3_col3 > li span { background-color: var(--c1-navy); }
.c1-sub .s3_col3 > li:hover span { background-color: var(--c1-blue); }
.c1-sub .s3_col2 h4 { background: var(--c1-blue); }
.c1-sub .s3_col2 ul > li span { color: var(--c1-navy); }

/* --- 정회원(s4) 절차 카드 라벨 --- */
.c1-sub .bg_col4 li { color: var(--c1-navy); }

/* --- 협회소개(s5): 단체개요 임원 배지/구분선, 연혁, 연구과제 --- */
.c1-sub .s502 .arti2 .flex_box { border-top-color: var(--c1-navy); }
.c1-sub .s502 .arti3 .flex_box > * span { border-color: var(--c1-blue); color: var(--c1-blue); }
.c1-sub .s503 .bt_box_box > * > dl dt { background: var(--c1-blue); }
.c1-sub .history_box > ul > li > h3 { color: var(--c1-blue); }
.c1-sub .history_box > ul > li > h3::before { background: var(--c1-blue); }
.c1-sub .s504_his { border-top-color: var(--c1-blue); }
.c1-sub .s504_his > li > h3 { color: var(--c1-blue); }

/* --- 신규 안내 블록 · 마이페이지(구) · 결제 팝업 --- */
.c1-sub .new_page_arti .flex_box > li ol > li { color: var(--c1-navy); }
.c1-sub .new_page_arti .flex_box > li ol > li span { background: var(--c1-navy); border-color: var(--c1-navy); }
.c1-sub .new_page_arti .flex_box > li ol > li:last-child span { background: #fff; border-color: var(--c1-navy); color: var(--c1-navy) !important; }
.c1-sub .my_page .arti1 { border-top-color: var(--c1-navy); }
.c1-sub .form_pass .cnt a, .c1-sub .bt_write { background: var(--c1-blue); border-radius: 10px; }
.c1-sub .form_pass .cnt a:hover, .c1-sub .bt_write:hover { background: var(--c1-blue-deep); }
.c1-sub .pay_check_pop .poptop { background: var(--c1-blue); }
.c1-sub .pay_check_pop .poptop span { background: var(--c1-navy); }
.c1-sub .pay_check_pop .cnt table { border-top-color: var(--c1-blue); }

/* --- 19. 교육일정 필터(.fillter_cal): 레거시 #ddd 라인·기본 체크박스 → 토큰 (2026-09-17) --- */
.c1-sub .fillter_cal select { border-color: var(--c1-grey-300) !important; }
.c1-sub .fillter_cal input[type="checkbox"], .c1-sub .fillter_cal input[type="radio"] { width: 17px; height: 17px; accent-color: var(--c1-blue); vertical-align: middle; cursor: pointer; }
.c1-sub .fillter_cal label { cursor: pointer; }
.c1-sub .fillter_cal table { border-top: 1px solid var(--c1-line); }
.c1-sub .fillter_cal table tr > * { border-color: var(--c1-line); }

/* ============================================================
   20. 교육안내 > 단기강좌 (/s1/s1_1_2_1~3.php, .s112_col2 · .s112_list) — 태블릿/모바일 (마크업 무변경)
   .s112_col2 는 595px 고정폭 2열 flex 라 403px 에서 각 열이 154px 로 눌리고, 그 안의 dl(dt 100px + dd 나머지)에서
   dd 가 54px 가 되어 일정 텍스트가 한 글자씩 세로로 깨졌다. 열을 1열로 풀고 라벨/본문 비율을 다시 잡는다.
   ============================================================ */
@media (max-width: 1023px) {
  .c1-sub .s112_col2 { flex-direction: column; gap: 12px; margin-bottom: 24px; }
  .c1-sub .s112_col2 > * { width: 100% !important; margin-right: 0 !important; }
  /* 테두리는 dd 가 아니라 dl 에 두어야 라운드 모서리가 끊기지 않는다 (dd 테두리는 사각이라 clip 되며 선이 잘려 보였음) */
  .c1-sub .s112_col2 > * dl { height: auto; border: 1px solid var(--c1-line); border-radius: 12px; overflow: hidden; background: #fff; }
  .c1-sub .s112_col2 > * dt { flex: 0 0 92px; width: 92px; font-size: 15px; font-weight: 600; }
  .c1-sub .s112_col2 > * dd { width: auto; flex: 1 1 0; min-width: 0; padding: 16px; border: 0; border-left: 1px solid var(--c1-line); }
  .c1-sub .s112_col2 > * dd ul li, .c1-sub .s112_col2 > * dd p { font-size: 15px; line-height: 1.7; word-break: keep-all; }
  .c1-sub .s112_list li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; line-height: 1.6; font-size: 15px; margin-bottom: 10px; word-break: keep-all; }
  .c1-sub .s112_list li span { flex: 0 0 auto; width: 92px; margin-right: 0; line-height: 30px; font-size: 13.5px; border-color: var(--c1-line); color: var(--c1-navy); }
}
@media (max-width: 767px) {
  .c1-sub .s112_col2 > * dt { flex: 0 0 76px; width: 76px; font-size: 14px; }
  .c1-sub .s112_col2 > * dd { padding: 14px; border-left-width: 1px; }
  .c1-sub .s112_col2 > * dd ul li, .c1-sub .s112_col2 > * dd p { font-size: 14.5px; }
  .c1-sub .s112_list li { font-size: 14.5px; }
  .c1-sub .s112_list li span { width: 84px; font-size: 13px; }
  .c1-sub .s1122 .arti1 { height: auto; min-height: 150px; padding: 20px 16px; margin-bottom: 30px; }
  .c1-sub .s1122 .arti1 p { font-size: 14.5px; line-height: 1.7; word-break: keep-all; }
  .c1-sub .s1123 .arti2 .line_box { padding: 18px 16px; border-color: var(--c1-line); border-radius: 12px; margin-top: 22px; }
  .c1-sub .s1123 .arti2 .line_box h5 { font-size: 15px; margin-bottom: 10px; }
  .c1-sub .s1123 .arti2 .line_box p { font-size: 14.5px; line-height: 1.7; word-break: keep-all; }
  .c1-sub .s1123 .link_a { width: 100%; }
  .c1-sub .s1121 .arti1 p { font-size: 14.5px; line-height: 1.7; margin-bottom: 24px; word-break: keep-all; }
}

/* ============================================================
   21. .link_a / .s4_link_a 줄바꿈 대응 (2026-09-17)
   레거시는 height/line-height 를 75px(모바일 56px)로 고정해 한 줄만 가정한다. 표 안(신청서 다운로드 등) 처럼
   폭이 좁아 두 줄이 되면 글자가 버튼 밖으로 삐져나왔다(예: /s1/s1_1_2_3.php 신청서, 150px 칸에서 필요 높이 84px).
   높이를 auto + min-height 로 바꾸고 줄 간격·패딩을 주어 몇 줄이 되어도 알약 안에 담기게 한다.
   ============================================================ */
.c1-sub .link_a, .c1-sub .s4_link_a {
  height: auto; min-height: 75px; line-height: 1.35; padding: 12px 22px; box-sizing: border-box;
  word-break: keep-all; text-align: center;
}
.c1-sub .link_a span, .c1-sub .s4_link_a span { top: 0; margin-left: 0; flex: 0 0 auto; }
/* 표 셀 안에서는 칸 폭을 넘지 않게 */
.c1-sub td .link_a, .c1-sub td .s4_link_a, .c1-sub th .link_a, .c1-sub th .s4_link_a {
  width: auto; max-width: 100%; min-height: 52px; padding: 10px 14px; font-size: 15px; margin-left: auto; margin-right: auto;
}
@media (max-width: 767px) {
  .c1-sub .link_a, .c1-sub .s4_link_a { min-height: 56px; padding: 11px 16px; font-size: 15.5px; }
  .c1-sub td .link_a, .c1-sub td .s4_link_a { min-height: 48px; padding: 9px 12px; font-size: 14px; }
  .c1-sub .s1123 .link_a { width: auto; }
}

/* --- 22. 빈 페이지 제목 숨김 (2026-09-18) ---
   theme/kans/mobile/head.php 는 메뉴 변수($cate_name~$sspage_name)로 항상 <h2 class="tit_bg"> 를 출력하는데,
   페이지가 본문에서 자기 제목을 따로 출력하는 경우(s1_4_1_1 등) 프레임 쪽 변수가 비어 빈 h2 만 남고
   그 ::after(파란 56px 바)가 제목 위 짧은 선처럼 보였다. 내용이 없는 제목은 바까지 통째로 숨긴다. */
.c1-sub .tit_bg:empty { display: none; }

/* --- 23. 협회소개 > 단체개요 임원 목록 데스크톱 정렬 (2026-09-18) ---
   레거시 .s502 .arti3 .flex_box > * 가 flex: 1 1 40% 라서 왼쪽 항목의 글자 길이에 따라 오른쪽 항목의 시작점(배지 위치)이
   행마다 달라졌다. 두 열을 정확히 50%씩 고정하고 배지(84px)를 flex 고정폭으로 두어 배지가 열 안에서 한 줄로 맞춰지게 한다.
   ul 인라인 white-space:nowrap 은 li 에서 normal 로 되돌려 긴 직함이 열 밖으로 넘치지 않고 배지 오른쪽에서 줄바꿈되게 한다.
   빈 <li></li>(이사장 단독 행 스페이서)와 점선 구분선(::after), 색상 토큰(§18), 모바일 1열(§10)은 그대로. */
@media (min-width: 768px) {
  .c1-sub .s502 .arti3 .flex_box > * {
    flex: 0 0 50%; box-sizing: border-box; display: flex; align-items: flex-start; gap: 12px;
    padding: 13px 20px 13px 12px; white-space: normal; word-break: keep-all; line-height: 1.5; min-height: 66px;
  }
  .c1-sub .s502 .arti3 .flex_box > * span { flex: 0 0 84px; width: 84px; margin: 0; line-height: 38px; }
}

/* --- 24. 게시판 검색바(#bo_sch) 모바일 — 검색 버튼 눌림 (2026-09-18, 사용자 리포트 /bbs/board.php?bo_table=s2_2) ---
   스킨 style.css 480px 미디어 규칙 `#bo_sch input[type=submit]{padding:0 5px}` + 입력창 width:50% 이 인라인 배치라
   403px 에서 버튼이 45×45 정도로 눌려 글자만 겨우 보였다. 폼을 flex 행으로: select 고정폭 · 입력창이 남는 폭 · 버튼은 내용폭(패딩 18px).
   높이(45px)·토큰 라인·라운드·색상은 §5/§15-10 그대로, 마크업/PHP 무변경. */
@media (max-width: 767px) {
  .c1-sub #bo_sch { overflow: visible; }
  .c1-sub #bo_sch form { display: flex; align-items: center; gap: 6px; padding: 0 12px; }
  .c1-sub #bo_sch select { flex: 0 0 auto; width: auto; min-width: 92px; max-width: none; padding-left: 12px !important; font-size: 14px; }
  .c1-sub #bo_sch #stx, .c1-sub #bo_sch input[type="text"] { flex: 1 1 0; width: auto; min-width: 0; font-size: 14px; }
  .c1-sub #bo_sch input[type="submit"] { flex: 0 0 auto; height: 45px; line-height: 45px; padding: 0 18px !important; font-size: 14px; font-weight: 700; white-space: nowrap; border-radius: 10px; }
}

/* --- 25. 교육일정 달력 월 이동 로딩 표시 (2026-09-18, 사용자 요청 /cal/cal_list.php) ---
   cal/cal.php getCalendar() 가 요청 중 .cal_wrap 에 is-loading 을 붙인다. 표(.cal_tb_wrap) 위에 반투명 오버레이 + 스피너 + 문구를 덮고
   이전/다음 달 버튼과 월 선택 제목을 잠근다. 첫 로드(빈 tbody)에서도 보이도록 최소 높이 확보. 토큰만 사용, 감속 모션 설정 존중. */
.c1-sub .cal_tb_wrap { position: relative; }
.c1-sub .cal_wrap.is-loading .cal_tb_wrap { min-height: 240px; }
.c1-sub .cal_loading {
  display: none; position: absolute; inset: 0; z-index: 5; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  background: rgba(255, 255, 255, 0.72); border-radius: 12px; -webkit-backdrop-filter: blur(1px); backdrop-filter: blur(1px);
}
.c1-sub .cal_wrap.is-loading .cal_loading { display: flex; }
.c1-sub .cal_loading_spin {
  width: 36px; height: 36px; border-radius: 50%; box-sizing: border-box;
  border: 3px solid var(--c1-line); border-top-color: var(--c1-blue); animation: c1-cal-spin 0.8s linear infinite;
}
.c1-sub .cal_loading_txt { font-size: 14px; font-weight: 600; color: var(--c1-navy); letter-spacing: -0.01em; }
@keyframes c1-cal-spin { to { transform: rotate(360deg); } }
.c1-sub .cal_wrap.is-loading .cal_head > a, .c1-sub .cal_wrap.is-loading .cal_head > h3 { pointer-events: none; opacity: 0.55; }
.c1-sub .cal_wrap.is-loading .cal_tb tbody { opacity: 0.6; transition: opacity 0.15s ease; }
.c1-sub .cal_tb td.cal_error { padding: 40px 16px !important; text-align: center; font-size: 14px; color: var(--c1-t-meta); background: var(--c1-bg-cool); border-radius: 12px; }
@media (prefers-reduced-motion: reduce) {
  .c1-sub .cal_loading_spin { animation: none; border-top-color: var(--c1-line); }
}
@media (max-width: 767px) {
  .c1-sub .cal_wrap.is-loading .cal_tb_wrap { min-height: 200px; }
  .c1-sub .cal_loading_spin { width: 30px; height: 30px; }
  .c1-sub .cal_loading_txt { font-size: 13px; }
}

/* --- 26. 게시글 보기(basic 스킨 view.skin.php, #bo_v) 웹·모바일 (2026-09-18, 사용자 요청 /bbs/board.php?bo_table=s2_4&wr_id=…) ---
   레거시: 회색 박스 제목(#f1f1f1 + #ddd 상하 선), 작성일/조회 float 행, 본문 word-break:break-all, 모바일 vw 글자크기, 에디터 인라인 글꼴(바탕/굴림 등)·양쪽정렬.
   Concept 1: 네이비 상단선 + 굵은 제목, 메타는 가는 회색 한 줄, 첨부/링크는 칩 카드, 본문은 Pretendard·keep-all·1.8 행간(인라인 글꼴·양쪽정렬은 무력화),
   하단 버튼은 §5 ghost 규격 그대로 flex 정렬. 마크업/PHP 무변경. */
.c1-sub #bo_v { margin: 0 0 8px; padding: 0; overflow: visible; }
.c1-sub #bo_v_table { display: none; }
.c1-sub .respon_v > header {
  margin: 0; padding: 22px 4px 0; background: none !important; border: 0 !important; border-top: 2px solid var(--c1-navy) !important; overflow: visible;
}
.c1-sub .respon_v > header > h1, .c1-sub #bo_v_title {
  margin: 0; padding: 0 !important; font-size: 22px !important; font-weight: 800 !important; line-height: 1.4; letter-spacing: -0.01em;
  color: var(--c1-t-heading) !important; word-break: keep-all; overflow-wrap: anywhere;
}
.c1-sub .respon_v #bo_v_info { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 0; padding: 12px 4px 16px; border-bottom: 1px solid var(--c1-line); overflow: visible; }
.c1-sub .respon_v #bo_v_info ul { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 0; width: 100%; overflow: visible; }
.c1-sub .respon_v #bo_v_info li { float: none !important; margin: 0 !important; padding: 0; font-size: 13px !important; line-height: 1.4; color: var(--c1-t-meta); overflow: visible; }
.c1-sub .respon_v #bo_v_info li + li::before { content: ''; display: inline-block; width: 1px; height: 11px; margin: 0 12px; background: var(--c1-grey-300); vertical-align: -1px; }
.c1-sub .respon_v #bo_v_info li strong { font-weight: 500; color: var(--c1-t-body); }
/* 첨부파일 · 관련링크 */
.c1-sub .respon_v #bo_v_file, .c1-sub .respon_v #bo_v_link { padding: 14px 4px 0; }
.c1-sub #bo_v_file li, .c1-sub #bo_v_link li {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 0 0 6px; padding: 9px 14px;
  background: var(--c1-bg-cool); border: 1px solid var(--c1-line); border-radius: 10px;
}
.c1-sub #bo_v_file a, .c1-sub #bo_v_link a { display: inline-flex; align-items: center; gap: 8px; padding: 0; font-size: 14px; color: var(--c1-t-heading); word-break: break-all; }
.c1-sub #bo_v_file a:hover strong, .c1-sub #bo_v_link a:hover { color: var(--c1-blue-deep); text-decoration: underline; }
.c1-sub #bo_v_file a img { width: 14px; height: auto; }
.c1-sub .bo_v_file_cnt, .c1-sub .bo_v_link_cnt { margin: 0; font-size: 12px; color: var(--c1-t-meta); }
/* 본문 */
.c1-sub #bo_v_atc { min-height: 160px; padding: 26px 4px 30px; border-bottom: 1px solid var(--c1-line); overflow: visible; }
.c1-sub #bo_v_con {
  margin: 0; font-family: var(--c1-font); font-size: 16px; line-height: 1.8; color: var(--c1-t-body);
  word-break: keep-all; overflow-wrap: anywhere; overflow: visible;
}
.c1-sub #bo_v_con p { margin: 0 0 0.4em; }
.c1-sub #bo_v_con [style*="font-family"], .c1-sub #bo_v_con font[face] { font-family: var(--c1-font) !important; }
.c1-sub #bo_v_con [style*="justify"] { text-align: left !important; }
.c1-sub #bo_v_con a { display: inline; color: var(--c1-blue-deep); text-decoration: underline; text-underline-offset: 2px; word-break: break-all; }
.c1-sub #bo_v_con img { max-width: 100%; height: auto; }
.c1-sub #bo_v_con iframe, .c1-sub #bo_v_con video { max-width: 100%; }
.c1-sub #bo_v_con table { max-width: 100%; }
.c1-sub #bo_v_con table td, .c1-sub #bo_v_con table th { word-break: break-word; }
.c1-sub #bo_v_act { display: none; }
/* 하단 버튼(이전글/다음글 · 수정/답변/목록): §5 ghost 규격, 양끝 정렬 */
.c1-sub #bo_v_top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; margin-top: 20px; }
.c1-sub #bo_v_top .sort_l, .c1-sub #bo_v_top .sort_r { display: flex; flex-wrap: wrap; gap: 8px; float: none !important; }
.c1-sub #bo_v_top .sort_r { margin-left: auto; }
.c1-sub #bo_v_top a { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; min-width: 88px; height: 42px !important; line-height: 1 !important; padding: 0 18px !important; margin: 0 !important; font-size: 14px !important; font-weight: 600; }
@media (max-width: 767px) {
  .c1-sub .respon_v > header { padding: 16px 0 0; }
  .c1-sub .respon_v > header > h1, .c1-sub #bo_v_title { font-size: 18px !important; line-height: 1.45; }
  .c1-sub .respon_v #bo_v_info { padding: 10px 0 14px; }
  .c1-sub .respon_v #bo_v_info li { font-size: 12.5px !important; }
  .c1-sub .respon_v #bo_v_file, .c1-sub .respon_v #bo_v_link { padding: 12px 0 0; }
  .c1-sub #bo_v_atc { padding: 20px 0 24px; }
  .c1-sub #bo_v_con { font-size: 15px; line-height: 1.75; }
  .c1-sub #bo_v_top { margin-top: 16px; }
  .c1-sub #bo_v_top .sort_l, .c1-sub #bo_v_top .sort_r { flex: 1 1 100%; }
  .c1-sub #bo_v_top .sort_l a, .c1-sub #bo_v_top .sort_r a { flex: 1 1 0; min-width: 0; height: 44px !important; padding: 0 10px !important; }
}

/* --- 27. 모바일 하단 바로가기 바(v2 .sl-mbar 56px, 구 .c1-shortcut-strip 64px) 와의 간섭 회피 (2026-09-18 · 2026-10-14) --- */
@media (max-width: 767px) {
  body:has(.c1-shortcut-strip) .cal_tb tbody td a .view_pop { bottom: calc(64px + 12px + env(safe-area-inset-bottom, 0px)); }
  body:has(.sl-mbar) .cal_tb tbody td a .view_pop { bottom: calc(56px + 12px + env(safe-area-inset-bottom, 0px)); }
}

/* --- 28. 연락처 링크(tel:/mailto:) — /s4/s4_1.php .b_box .robo, /s5/s5_5.php (2026-09-22): 글자색 유지, 밑줄 없이, 호버 시 블루 --- */
.c1-sub .b_box .robo a, .c1-sub .s505 h5 a, .c1-sub .s5_5 h5 a, .c1-sub h5 a[href^="tel:"] { display: inline; color: inherit; text-decoration: none; border-bottom: 1px dotted var(--c1-grey-300); }   /* display:inline — 테마 common.css 의 전역 a{display:block} 무력화(2026-09-22) */
.c1-sub .b_box .robo a:hover, .c1-sub h5 a[href^="tel:"]:hover { color: var(--c1-blue-deep); border-bottom-color: var(--c1-blue); }

/* --- 29. 색 대비 보정 (2026-09-23 axe serious) — 게시판 모바일 카드 메타·달력 날짜 --- */
@media (max-width: 767px) {
  .c1-sub .respon_l .div_td.col_writer, .c1-sub .respon_l .div_td.col_hit, .c1-sub .respon_l .div_td.col_date,
  .c1-sub .respon_l .div_td.col_writer .sv_member, .c1-sub .respon_l .div_td.col_writer .sv_guest,
  .c1-sub .respon_l .div_td.col_writer::before, .c1-sub .respon_l .div_td.col_hit::before { color: var(--c1-t-body); }
}
body.c1-sub .cal_tb tbody td .date { color: var(--c1-t-body); }