@charset "UTF-8";
/* ==========================================================================
   KREMA 교육센터 스킨 2026 (skin-2026.css)
   --------------------------------------------------------------------------
   · 목적 : 메인 게이트웨이(/main.php)의 R.E.VIBE 톤(틸/민트 + 네이비)을
            교육센터 PC(/center/) · 모바일(/center/m/)에 얹는 오버라이드 레이어.
   · 원칙 : style.css / sub.css / main.css / jquery-ui.css 는 수정하지 않는다.
            이 파일은 그 뒤에 로드되어 "색·모서리·간격"만 덮어쓴다.
   · 금지 : 전역(*) 리셋, 폰트 크기 확대, 컬럼 폭(width) 변경, .sub_left 의
            display 지정(=$Left off 인라인 스타일을 이겨서는 안 된다).
   · 색 교체 규율 : 테마색으로 쓰인 파랑(#5480ee·#0077a3)·기존 그린(#1ec17e)만
            교체한다. 본문 회색(#444·#666·#999)과 브랜드색은 그대로 둔다.
   ========================================================================== */

:root {
  --navy:       #00423f;
  --navy-600:   #00625b;
  --point:      #00a99d;
  --point-700:  #00857c;
  --point-soft: #e3f6f3;
  --bg:         #eef3f2;
  --surface:    #ffffff;
  --text:       #14201f;
  --text-soft:  #5a6b6a;
  --text-mute:  #69807d;
  --line:       #e2ebe9;
  --shadow:     0 4px 16px rgba(0,66,63,.08), 0 1px 3px rgba(0,66,63,.05);
  --shadow-lg:  0 18px 40px -12px rgba(0,66,63,.22);
  --grad-gold:  linear-gradient(135deg, #ff8f88 0%, #ff6b6b 100%);
}

/* --------------------------------------------------------------------------
   1. 타이포 — 크기는 건드리지 않고 서체·자간·렌더링만 교체
   -------------------------------------------------------------------------- */
html, body,
body input, body select, body textarea, body button, body table {
  font-family: "Pretendard", "Pretendard Variable", "Noto Sans KR",
               -apple-system, "Malgun Gothic", "맑은 고딕", sans-serif;
}
body {
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: -0.2px;
}

/* --------------------------------------------------------------------------
   2. 상단 유틸 바(.top) — 흰 바탕 + 얇은 민트기 라인, 링크는 알약 버튼
   -------------------------------------------------------------------------- */
#header .head {
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}
#header .head .top .my .login {
  background: var(--point);
  border-radius: 999px;
  box-shadow: 0 1px 3px rgba(0,66,63,.14);
}
#header .head .top .my .login a { color: #fff; font-weight: 600; }
#header .head .top .my .login:hover { background: var(--point-700); }

#header .head .top .my .join a { color: var(--text-soft); font-weight: 500; }
#header .head .top .my .join a:hover { color: var(--point-700); }

#header .head .top .my .btn {
  border: 1px solid var(--line);
  border-radius: 999px;
  background-color: #f6faf9;
  transition: border-color .18s, background-color .18s;
}
#header .head .top .my .btn:hover {
  border-color: var(--point);
  background-color: var(--point-soft);
}
#header .head .top .my .btn a.home,
#header .head .top .my .btn a.blog { color: var(--text-soft); font-weight: 500; }
#header .head .top .my .btn:hover a.home,
#header .head .top .my .btn:hover a.blog { color: var(--point-700); }

/* 사용 안 하는 우측 대형 CTA(마크업상 주석 처리돼 있음) — 살아날 경우 대비 */
#header .head .top .btn1 { background: var(--point); }

/* --------------------------------------------------------------------------
   3. 대메뉴(.big_menu) — 흰 바탕 유지 + 민트 언더라인 강조
      (고정폭 1200 레이아웃이라 배경 반전보다 언더라인이 안전·가독성 우위)
   -------------------------------------------------------------------------- */
#header .menu {
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}
#header .menu > ul > li > a {
  color: var(--text);
  font-weight: 600;
  position: relative;
  transition: color .18s;
}
#header .menu > ul > li > a:after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 3px;
  background: var(--point);
  border-radius: 3px 3px 0 0;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform .22s cubic-bezier(.2,.7,.2,1);
}
#header .menu > ul > li:hover > a,
#header .menu > ul > li > a:hover { color: var(--point-700); }
#header .menu > ul > li:hover > a:after { transform: scaleX(1); }

/* 기존 슬라이딩 배경(menu_bg.png)은 순수 CSS 강조로 대체 — 이미지 숨김 */
#header .menu .nav_pink,
#header .menu .nav_pink1 { display: none !important; }

/* 서브메뉴 드롭다운 — 기존 라임그린 반투명을 민트로 */
.submenu_div { background: rgba(0,169,157,0.95); }
.submenu_div > .submenu > ul.submenu_ul > li > div > a {
  color: #fff;
  font-weight: 500;
  border-radius: 999px;
  padding: 0 6px;
  transition: background-color .16s;
}
.submenu_div > .submenu > ul.submenu_ul > li > div > a:hover {
  background: rgba(255,255,255,.18);
}

/* --------------------------------------------------------------------------
   4. 서브 비주얼 — 기존 배너 이미지 위에 네이비 그라디언트 오버레이
      (이미지 교체 없음. 좌측 .sub_left .title 이 위에 겹쳐 그려지므로
       오버레이에는 양수 z-index 를 주지 않는다)
   -------------------------------------------------------------------------- */
.sub_visual1, .sub_visual2, .sub_visual3, .sub_visual4, .sub_visual5 {
  position: relative;
  background-size: cover;
}
.sub_visual1:after, .sub_visual2:after, .sub_visual3:after,
.sub_visual4:after, .sub_visual5:after {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 0; bottom: 0;
  pointer-events: none;
  background: linear-gradient(100deg,
              rgba(0,66,63,.72) 0%,
              rgba(0,90,84,.46) 46%,
              rgba(0,169,157,.24) 100%);
}

/* --------------------------------------------------------------------------
   5. 좌측 메뉴(.sub_left)
      ⚠ display 속성은 절대 쓰지 않는다($Left=off 인라인 스타일 보호)
   -------------------------------------------------------------------------- */
.sub_left .title {
  background: linear-gradient(160deg, var(--navy) 0%, var(--navy-600) 100%);
  color: #fff;
  font-weight: 700;
  letter-spacing: -0.6px;
}
.sub_left > ul { border-top: 2px solid var(--navy); }
.sub_left > ul > li { border-bottom: 1px solid var(--line); }
.sub_left > ul > li > a {
  color: var(--text-soft);
  font-weight: 500;
  border-left: 3px solid transparent;
  transition: background-color .16s, color .16s, border-color .16s;
}
.sub_left > ul > li > a:hover {
  background: #f5faf9;
  color: var(--point-700);
  border-left-color: var(--point-soft);
}
.sub_left > ul > li.on > a {
  background-color: var(--point-soft);
  background-image: none;
  color: var(--point-700);
  font-weight: 700;
  border-left-color: var(--point);
}
.sub_left > ul > li > ul > li a { color: var(--text-mute); }
.sub_left > ul > li > ul > li a:hover { color: var(--point-700); }
.sub_left > ul > li > ul > li.on a {
  color: var(--point-700);
  font-weight: 600;
  border-bottom: 1px solid var(--point);
}

/* --------------------------------------------------------------------------
   6. 페이지 제목 / breadcrumb
   -------------------------------------------------------------------------- */
#content .sub_title { position: relative; padding-bottom: 16px; }
#content .sub_title:after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 42px; height: 3px;
  background: var(--point);
  border-radius: 2px;
}
#content .sub_title h3 {
  color: var(--text);
  font-weight: 700;
  letter-spacing: -0.5px;
}
#content .sub_title p { color: var(--text-mute); }

#content .sub_home .tit, #content .sub_home .stit { color: var(--text-mute); font-size: 13px; }
#content .sub_home .stit { color: var(--point-700); font-weight: 500; }

/* --------------------------------------------------------------------------
   7. 게시판 / 표 — 헤더 네이비, 구분선 --line, 호버 연민트
      ⚠ width 가 지정된 th/td 는 건드리지 않는다(색·선만 교체)
   -------------------------------------------------------------------------- */
#content .board_list1, #content .board_list2 { border-top: 2px solid var(--navy); }
#content .board_list1 ul li, #content .board_list2 ul li {
  border-bottom: 1px solid var(--line);
  transition: background-color .16s;
}
#content .board_list1 ul li:hover, #content .board_list2 ul li:hover { background: #f7fbfa; }
#content .board_list1 ul li h3 { color: var(--text); font-weight: 600; }
#content .board_list1 ul li .txt span,
#content .board_list2 ul li .txt h3,
.board_top .txt span,
.board_top1 .txt span { color: var(--point-700); }

#content .board_list1 ul li .txt .btn1,
#content .board_list2 ul li .txt .btn1 { background: var(--point); border-radius: 999px; }
#content .board_list1 ul li .txt .btn2,
#content .board_list2 ul li .txt .btn2 { background: #eef1f0; color: #9aa8a6; border-radius: 999px; }

.board_view { border-top: 2px solid var(--navy); }
.board_view .title { background: var(--point-soft); border-bottom: 1px solid var(--line); }
.board_view .title h3 { color: var(--navy); font-weight: 700; }
.board_view .title p { color: var(--text-mute); }
.board_view .con, .board_view .db { border-bottom: 1px solid var(--line); }
.board_view .db { color: var(--point-700); }

#content .board_view1 h3 { background: var(--navy); }
#content .board_view1 table th { background: var(--point-soft); color: var(--navy); border-bottom: 1px solid var(--line); }
#content .board_view1 table td { border-bottom: 1px solid var(--line); }
#content .board_view1 > p { background: #f5faf9; border-bottom: 1px solid var(--line); }
#content .board_view1 .tt, #content .board_view1 .con { border-bottom: 1px solid var(--line); }

#content .board_view2 { border-top: 2px solid var(--navy); }
#content .board_view2 .title { background: var(--navy); }
#content .board_view2 .table1 { border-bottom: 2px solid var(--navy); }
#content .board_view2 .table1 th,
#content .board_view2 .hidden table th,
#content .board_view2 .table4 table th { background: var(--point-soft); color: var(--navy); }

#content .board_write1 table, #content .board_write2 table { border-top: 2px solid var(--navy); }
#content .board_write1 table th, #content .board_write2 table th {
  background: var(--point-soft); color: var(--navy); border-bottom: 1px solid var(--line);
}
#content .board_write1 table td, #content .board_write2 table td { border-bottom: 1px solid var(--line); }

.press_table th { background: var(--navy); }
.press_table td { border-bottom: 1px solid var(--line); }

.s21_con23 table, .board_riqi3 table { border-top: 2px solid var(--navy); }
.s21_con12 table th, .s21_con13 table th, .s21_con22 table th,
.s21_con23 table th, .s21_con32 table th, .s21_con33 table th {
  background: var(--point-soft); color: var(--navy);
}
.board_riqi2 table tr th { background: var(--navy); border-right-color: rgba(255,255,255,.22); }
.board_riqi2 table tr td .con { background: var(--point-soft); color: var(--point-700); }
.board_riqi3 table tr td .a1, .board_riqi3 table tr td .a4, .board_riqi3 table tr td .a7 {
  background: var(--point-soft); color: var(--point-700);
}
.board_riqi3 table tr td .a1 h3, .board_riqi3 table tr td .a4 h3, .board_riqi3 table tr td .a7 h3 {
  background: var(--point);
}

/* --------------------------------------------------------------------------
   8. 버튼 — 알약형. 폭·높이는 기존 규칙 유지, 색과 모서리만 교체
      코랄(--grad-gold)은 "교육신청" 최종 행동 버튼을 구분할 클래스가 없어
      쓰지 않는다(억지 구분 금지). 주요 동작은 전부 민트로 통일.
   -------------------------------------------------------------------------- */
.write_btn dl dt { background: var(--point); border-radius: 999px; box-shadow: var(--shadow); }
.write_btn dl dt:hover { background: var(--point-700); }
.write_btn dl dd { border: 1px solid var(--line); border-radius: 999px; background: var(--surface); }
.write_btn dl dd:hover { border-color: var(--point); }
.write_btn dl dd a { color: var(--text-soft); }
.write_btn dl dd:hover a { color: var(--point-700); }

.board_top .board_search .btn,
.board_search1 .btn {
  background: var(--point);
  border-radius: 999px;
  font-weight: 600;
  cursor: pointer;
}
.board_top .board_search .btn:hover,
.board_search1 .btn:hover { background: var(--point-700); }

.board_boxac .con .table .btn { background: var(--navy); border-radius: 12px; }
.board_boxac .con .table .btn:hover { background: var(--navy-600); }

.order2_con1 .con dl dd .btn1,
.my2page1_con1 .con dl dd .btn1 { background: var(--point); border-radius: 999px; }
.order2_con1 .con dl dd .btn2 { border-color: var(--point); color: var(--point-700); border-radius: 999px; }

#content .board_list3 ul li .bt .btn1 { background: var(--point); border-radius: 999px; }

/* --------------------------------------------------------------------------
   9. 폼 — 테두리·모서리·포커스만. 높이/폭은 기존 규칙 유지
   -------------------------------------------------------------------------- */
.sub_content input[type=text],
.sub_content input[type=password],
.sub_content input[type=tel],
.sub_content input[type=email],
.sub_content input[type=number],
.sub_content input[type=date],
.sub_content select,
.sub_content textarea,
.board_top .board_search select,
.board_top .board_search input[type=text],
.board_search1 select,
.board_search1 input[type=text] {
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--text);
  transition: border-color .16s, box-shadow .16s;
}
.sub_content input[type=text]:focus,
.sub_content input[type=password]:focus,
.sub_content input[type=tel]:focus,
.sub_content input[type=email]:focus,
.sub_content input[type=number]:focus,
.sub_content input[type=date]:focus,
.sub_content select:focus,
.sub_content textarea:focus,
.board_top .board_search select:focus,
.board_top .board_search input[type=text]:focus,
.board_search1 select:focus,
.board_search1 input[type=text]:focus {
  border-color: var(--point);
  box-shadow: 0 0 0 3px rgba(0,169,157,.14);
  outline: none;
}
.board_search1 { background: #f5faf9; border-radius: 14px; }

/* --------------------------------------------------------------------------
   10. 페이지네이션 — 현재 페이지 민트 원형
   -------------------------------------------------------------------------- */
.page ul li {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 50%;
  transition: border-color .16s, color .16s;
}
.page ul li:hover { border-color: var(--point); }
.page ul li a { color: var(--text-mute); }
.page ul li:hover a { color: var(--point-700); }
.page ul li strong {
  background: var(--point);
  color: #fff;
  border-radius: 50%;
  font-weight: 700;
}

/* --------------------------------------------------------------------------
   11. 푸터 — 네이비 배경 (PC·모바일 공통. 모바일은 #footer > .foot 에 배경이
       따로 걸려 있어 두 선택자를 같이 덮는다)
   -------------------------------------------------------------------------- */
#footer, #footer .foot { background: var(--navy); }
.foot .foot_copy { color: rgba(255,255,255,.55); }
.foot .link, .foot .foot_copy .link { color: rgba(255,255,255,.28); }
.foot .link a, .foot .foot_copy .link a { color: rgba(255,255,255,.82); }
.foot .link a:hover, .foot .foot_copy .link a:hover { color: #8ef0e6; }
.foot .foot_copy p { color: rgba(255,255,255,.5); }
/* .foot .box 는 모바일 전용(교육센터 문의전화 박스) */
.foot .box { background: rgba(255,255,255,.08); border-radius: 12px; }
.foot .box .t3 { color: #8ef0e6; }

/* 사이트맵 팝업 — 협회/교육센터 두 색 라인 통일 */
#sitemap .box .con1 .mn { border-top-color: var(--point); border-bottom-color: var(--point); }
#sitemap .box .con1 .mn ul li a { color: var(--point-700); }
#sitemap .box .con2 .mn { border-top-color: var(--navy); border-bottom-color: var(--navy); }
#sitemap .box .con2 .mn ul li a { color: var(--navy); }
#sitemap .box .con1 .title, #sitemap .box .con2 .title { color: var(--text); font-weight: 700; }
#sitemap .box .con1 .smn, #sitemap .box .con2 .smn { border-bottom-color: var(--line); }
#sitemap .box .con1 .smn ul li a:hover,
#sitemap .box .con2 .smn ul li a:hover { color: var(--point-700); }

/* ==========================================================================
   ── 모바일 (/center/m/) ──
   --------------------------------------------------------------------------
   PC와 마크업이 다르다. 아래 이름은 center/m/header.php · m/footer.php ·
   m/index.php · m/css/style.css · m/css/sub.css 를 직접 열어 확인한 실제
   클래스다(추측 아님).
     헤더  : #header.global > img / .logo / .my / .Mmenu_Btn#Mmenu
     서랍  : nav.lnb > .lnbarea > .lnbmove > .close / .my / .tit / .mn
     래퍼  : 서브 = <div id="sub" class="hospitalinfo">
             메인 = <div id="main" class="hospitalinfo">
     본문  : .sub_visual(.bg1~.bg5) > .title / .sub_home(.home_icon .tit .stit)
             .sub_content > .sub_title / .content
     목록  : .board_txt / .board_list1~4 / .board_view1~2 /
             .board_write1·11·2 / .sub_search1 / .page / .write_btn
     푸터  : #footer > .foot > .foot_copy(.link .box .t1~.t3)

   ⚠ 스코프 규칙 : 미디어쿼리 대신 `.hospitalinfo` 래퍼로 구분한다.
      PC(viewport width=1200)에는 이 클래스가 없어 절대 새지 않고,
      모바일은 화면 폭과 무관하게 항상 적용된다(브레이크포인트 오판 없음).
      `.lnb` · `.sub_visual` · `.foot .box` 처럼 모바일에만 존재하는
      이름은 스코프 없이 둔다. `.page` · `.write_btn` · 폼 규칙은 위
      공통 구획이 이미 모바일에도 적용되므로 여기서 중복하지 않는다.
   ========================================================================== */

/* --- 헤더 · 서랍(LNB) : 모바일 전용 이름 --- */
.lnb .lnbarea .lnbmove .close img { background: var(--point); }
.lnb .lnbarea .lnbmove .my { background: #f5faf9; border-bottom: 1px solid var(--line); }
.lnb .lnbarea .lnbmove .my dl dt a,
.lnb .lnbarea .lnbmove .my dl dd a { color: var(--text-soft); font-weight: 600; }
.lnb .lnbarea .lnbmove .my dl dd { border-left: 1px solid var(--line); }
.lnb .lnbarea .lnbmove .tit { border-bottom: 1px solid var(--line); }
.lnb .lnbarea .lnbmove .mn > ul > li:before { background: var(--line); }
.lnb .lnbarea .lnbmove .mn > ul > li > a { color: var(--point-700); font-weight: 600; }
.lnb .lnbarea .lnbmove .mn > ul > li ul li a { color: var(--text-soft); }

/* --- 서브 비주얼 : 기존 배너 이미지 위 네이비 오버레이(이미지 교체 없음) --- */
.sub_visual.bg1, .sub_visual.bg2, .sub_visual.bg3,
.sub_visual.bg4, .sub_visual.bg5 { position: relative; }
.sub_visual.bg1:after, .sub_visual.bg2:after, .sub_visual.bg3:after,
.sub_visual.bg4:after, .sub_visual.bg5:after {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 0; bottom: 0;
  pointer-events: none;
  background: linear-gradient(160deg,
              rgba(0,66,63,.70) 0%,
              rgba(0,90,84,.44) 55%,
              rgba(0,169,157,.22) 100%);
}
.sub_visual > .title { position: relative; z-index: 2; font-weight: 700; letter-spacing: -0.6px; }
.sub_visual > .sub_home { position: relative; z-index: 2; }

/* --- breadcrumb 바 : PC와 이름이 같으므로 .hospitalinfo 로 스코프 --- */
.hospitalinfo .sub_home { background: rgba(0,66,63,.86); }
.hospitalinfo .sub_home .tit,
.hospitalinfo .sub_home .stit { border-left: 1px solid rgba(255,255,255,.3); color: #fff; }
.hospitalinfo .sub_home .tit ul li,
.hospitalinfo .sub_home .stit ul li { border-color: var(--line); }
.hospitalinfo .sub_home .tit ul li a,
.hospitalinfo .sub_home .stit ul li a { color: var(--text-soft); }
.hospitalinfo .sub_home .tit ul li.on a,
.hospitalinfo .sub_home .stit ul li.on a {
  background: var(--point-soft); color: var(--point-700); font-weight: 600;
}

/* --- 페이지 제목 : 모바일 .sub_title 은 텍스트 자체(PC는 컨테이너) --- */
.hospitalinfo .sub_content .sub_title { color: var(--text); font-weight: 700; letter-spacing: -0.4px; }
.hospitalinfo .sub_content .sub_title:before { background: var(--point); }
.hospitalinfo .sub_content .sub_title p { color: var(--text-mute); }

/* --- 목록 --- */
.hospitalinfo .board_txt span { color: var(--point-700); }
.hospitalinfo .board_list1 ul li { border: 1px solid var(--line); border-radius: 12px; }
.hospitalinfo .board_list1 ul li h3 { color: var(--text); font-weight: 600; }
.hospitalinfo .board_list1 ul li .txt span { color: var(--point-700); }
.hospitalinfo .board_list1 ul li .btn1 { background: var(--point); border-radius: 999px; }
.hospitalinfo .board_list1 ul li .btn2 { background: #eef1f0; color: #9aa8a6; border-radius: 999px; }
.hospitalinfo .board_list2 ul li { border: 1px solid var(--line); border-radius: 12px; }
.hospitalinfo .board_list3 > ul > li { border: 1px solid var(--line); border-radius: 12px; }
.hospitalinfo .board_list3 ul li .tt { border-bottom: 1px solid var(--line); }
.hospitalinfo .board_list3 ul li .tt h3 { color: var(--point-700); }
.hospitalinfo .board_list3 ul li .bt .btn1 { background: var(--point); border-radius: 999px; }
.hospitalinfo .board_list3 ul li .bt .icon_off,
.hospitalinfo .board_list3 ul li .bt .icon_on { border-color: var(--line); border-radius: 8px; }
.hospitalinfo .board_list4 { border-top: 2px solid var(--navy); }
.hospitalinfo .board_list4 dl { border-bottom: 1px solid var(--line); }
.hospitalinfo .board_list4 dl dd span { color: var(--point-700); }
.hospitalinfo .board_list4 dl .mapbtn1 { background-color: var(--point-soft); }

/* --- 상세 · 작성 --- */
.hospitalinfo .board_view1 h3 { border: 1px solid var(--point); background: var(--point-soft); color: var(--navy); }
.hospitalinfo .board_view1 table { border-right-color: var(--line); }
.hospitalinfo .board_view1 table th { background: var(--point-soft); color: var(--navy); }
.hospitalinfo .board_view1 table th,
.hospitalinfo .board_view1 table td { border-color: var(--line); }
.hospitalinfo .board_view1 .tt,
.hospitalinfo .board_view1 .con { border-bottom: 1px solid var(--line); }
.hospitalinfo .board_view2 .logo { border-color: var(--line); }
.hospitalinfo .board_write1 table,
.hospitalinfo .board_write2 table { border-top: 2px solid var(--navy); }
.hospitalinfo .board_write1 table th,
.hospitalinfo .board_write2 table th { background: var(--point-soft); color: var(--navy); }
.hospitalinfo .board_write1 table th, .hospitalinfo .board_write1 table td,
.hospitalinfo .board_write2 table th, .hospitalinfo .board_write2 table td { border-color: var(--line); }
.hospitalinfo .board_write11 table td.box {
  border: 1px solid var(--line); background: #f5faf9; border-radius: 8px;
}
.hospitalinfo .board_write1 table .input1,
.hospitalinfo .board_write11 table .input1 { border: 1px solid var(--line); border-radius: 8px; }

/* --- 모바일 전용 검색 박스 --- */
.sub_search1 { background: #f5faf9; border-radius: 12px; }
.sub_search1 select, .sub_search1 input[type=text] {
  border: 1px solid var(--line); border-radius: 8px;
}

/* ==========================================================================
   ══ 2단계: 페이지 전용 ══                                      (2026-08-11)
   --------------------------------------------------------------------------
   1단계(위)는 헤더·푸터·게시판 같은 "공통 껍데기"를 덮었다. 이 구획은
   교육센터의 핵심 페이지들을 각각 다듬는다.

   ⚠ 원칙(1단계와 동일)
     · DB 루프가 HTML 을 그리는 페이지들이라 PHP·마크업은 손대지 않는다.
       여기 있는 규칙만으로 화면을 바꾼다.
     · width / colgroup / position / top·left / height 는 선언하지 않는다
       (고정폭 1200 레이아웃과 bxSlider 인라인 스타일을 이겨서는 안 된다).
     · `.ui-` (jQuery UI 달력) 규칙은 0건을 유지한다.
     · 전역(*) 셀렉터·전역 box-sizing 금지.

   ⚠ PC / 모바일 공유 주의
     교육센터는 PC(/center/)와 모바일(/center/m/)이 클래스 이름을 상당수
     공유한다(.gallery_list · .main_con1~5 · .sub_search1 · .board_write2 …).
     아래 규칙은 그 공유를 이용해 한 번에 두 화면을 덮되, 한쪽에만 있는
     이름(.s33_con=모바일 교육일정, .type_tab2=PC 교육일정)은 따로 적었다.
     한쪽에만 있어야 하는 값은 `.hospitalinfo`(모바일 래퍼)로 스코프한다.
   ========================================================================== */

/* --------------------------------------------------------------------------
   2-1. 교육일정 — PC pages/sub03_03.php
        (연간/월별 탭 · 지역 탭 · 연도 이동 · 연간 표)
        표의 폭·칸 높이는 건드리지 않고 색과 모서리만 바꾼다.
   -------------------------------------------------------------------------- */
.type_tab2 {
  border: 1px solid var(--line);
  border-radius: 30px;      /* 높이 60px → 알약 */
  overflow: hidden;         /* .on a 의 margin:-1px 가 밖으로 새는 것을 막는다 */
  background: var(--surface);
}
.type_tab2 ul li { border-right: 1px solid var(--line); }
.type_tab2 ul li a { color: var(--text-soft); font-weight: 500; transition: color .16s, background-color .16s; }
.type_tab2 ul li a:hover { color: var(--point-700); background: #f5faf9; }
.type_tab2 ul li.on a { background: var(--point); color: #fff; font-weight: 700; }
.type_tab2 ul li.on a:hover { background: var(--point-700); color: #fff; }

/* 지역 탭(전체/서울/…) — DB 목록이라 개수는 유동적. 알약 모양만 통일 */
.board_riqi3 .top {
  background: #f5faf9;
  border: 1px solid var(--line);
  border-radius: 14px;
}
.board_riqi3 .top ul li a {
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--text-soft);
  transition: color .16s, background-color .16s, border-color .16s;
}
.board_riqi3 .top ul li a:hover {
  border-color: var(--point);
  background: var(--point-soft);
  color: var(--point-700);
}
.board_riqi3 .top ul li.on a {
  background: var(--point);
  border-color: var(--point);
  color: #fff;
  font-weight: 600;
}

/* 연도 이동 타이틀 */
.board_riqi3 .title { color: var(--navy); font-weight: 700; letter-spacing: -0.4px; }

/* 연간 표 — 헤더/구분선. 셀 안의 일정 블록(.a1~.a9)은 1단계에서 이미 처리 */
.board_riqi3 table tr th {
  background: var(--point-soft);
  color: var(--navy);
  font-weight: 600;
  border-right-color: var(--line);
  border-bottom-color: var(--line);
}
.board_riqi3 table tr td { border-right-color: var(--line); border-bottom-color: var(--line); }
.board_riqi3 table tr td:first-child,
.board_riqi3 table tr th:first-child { border-left-color: var(--line); }
/* 행 호버 : 셀 안의 일정 블록이 이미 --point-soft 라 같은 값을 쓰면 뭉갠다.
   그보다 옅은 민트 틴트로 "행"만 드러낸다(헤더 행은 td 가 없어 반응 안 함). */
.board_riqi3 table tr:hover td { background: rgba(0,169,157,.05); }

/* 모바일 교육일정(m/pages/sub03_03.php)은 마크업이 아예 달라 .s33_con 을 쓴다 */
.hospitalinfo .s33_con .top:before { color: var(--text-mute); }
.hospitalinfo .s33_con .top dl select { border: 1px solid var(--line); border-radius: 8px; }
.hospitalinfo .s33_con .list ul li { border-bottom: 1px solid var(--line); }
.hospitalinfo .s33_con .list ul li h3 { color: var(--text); font-weight: 600; }
.hospitalinfo .s33_con .list ul li h3 span { color: var(--point-700); }
.hospitalinfo .s33_con .list ul li dl dt {
  background: var(--point-soft);
  color: var(--point-700);
  border-radius: 8px;
}
.hospitalinfo .s33_con .list ul li dl dd { color: var(--text); }

/* --------------------------------------------------------------------------
   2-2. 교육과정 안내 — pages/sub02_03.php (PC·모바일 마크업 동일)
        DB 이미지(/filebox/item/…) 카드 목록. 원래는 이미지와 글상자에
        각각 회색 테두리가 붙어 있었다 → li 를 하나의 카드로 묶는다.
   -------------------------------------------------------------------------- */
.gallery_top .txt { color: var(--text); }
.gallery_top .txt span { color: var(--point-700); font-weight: 600; }

.gallery_list ul li {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: var(--shadow);
  overflow: hidden;         /* 이미지 모서리를 카드 라운드에 맞춰 깎는다 */
  transition: border-color .18s, box-shadow .18s, transform .18s;
}
.gallery_list ul li:hover {
  border-color: var(--point);
  box-shadow: var(--shadow-lg);
  transform: translateY(-2px);
}
.gallery_list ul li .img { background: #f5faf9; border: 0; }
.gallery_list ul li .img img { max-width: 100%; height: auto; }
.gallery_list ul li .txt { border: 0; }
.gallery_list ul li .txt p { color: var(--text); font-weight: 500; }
.gallery_list ul li .txt dl dt { color: var(--text-mute); }
.gallery_list ul li .txt dl dd { color: var(--point-700); }
.gallery_list ul li .txt dl dd a { border-bottom: 1px solid var(--point); }

/* --------------------------------------------------------------------------
   2-3. 공지사항 — pages/sub04_01.php (미세 조정만)
        실제 목록은 .board_list1 이 아니라 .press_table 이다(파일 확인).
   -------------------------------------------------------------------------- */
.board_top .txt { color: var(--text); }
.board_top .board_search select,
.board_top .board_search input[type=text],
.board_top .board_search .btn { vertical-align: middle; }
.board_top .board_search .btn { box-shadow: 0 2px 8px rgba(0,169,157,.22); }

.press_table td { border-bottom: 1px solid var(--line); color: var(--text); }
.press_table tr:hover td { background: #f7fbfa; }
.press_table td.link a { color: var(--text); }
.press_table td.link a:hover { color: var(--point-700); text-decoration: underline; }
.press_table td p { color: var(--text-mute); }

/* --------------------------------------------------------------------------
   2-4. 교육신청 — pages/sub03_01.php  ⚠ 가장 위험한 페이지
        jQuery UI 달력(.ui-*)·결제 진입 폼이 살아 있다.
        라벨 색 / 입력칸 모서리 / 검색·초기화 버튼 / 상단 탭까지만 손댄다.
        (.ui- 로 시작하는 규칙은 이 파일 전체에 0건이어야 한다)
   -------------------------------------------------------------------------- */
.sub_search1 .con dl dt { color: var(--navy); font-weight: 600; }
.sub_search1 .con dl dd input,
.sub_search1 .con dl dd select { border: 1px solid var(--line); border-radius: 8px; }
.sub_search1 .btn dl dt {
  background: var(--point);
  border-radius: 999px;
  box-shadow: 0 2px 8px rgba(0,169,157,.24);
  transition: background-color .16s;
}
.sub_search1 .btn dl dt:hover { background: var(--point-700); }
.sub_search1 .btn dl dd {
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  transition: border-color .16s;
}
.sub_search1 .btn dl dd:hover { border-color: var(--point); }
.sub_search1 .btn dl dd a { color: var(--text-soft); }
.sub_search1 .btn dl dd:hover a { color: var(--point-700); }

/* 교육분류 탭(PC 는 display:none 상태, 모바일 m/pages/sub03_01.php 는 노출) */
.type_tab4 {
  border: 1px solid var(--line);
  border-radius: 25px;      /* 높이 50px → 알약 */
  overflow: hidden;
  background: var(--surface);
}
.type_tab4 ul li { border-right-color: var(--line); }
.type_tab4 ul li a { color: var(--text-soft); }
.type_tab4 ul li a:hover { color: var(--point-700); background: #f5faf9; }
.type_tab4 ul li.on a { background: var(--point); color: #fff; font-weight: 600; }
.type_tab4 ul li.on a:hover { background: var(--point-700); color: #fff; }

.board_txt { color: var(--text); }
.board_txt span { color: var(--point-700); font-weight: 600; }

/* --------------------------------------------------------------------------
   2-5. 교육센터 메인 — index.php · m/index.php
        ⚠ bxSlider 가 li 의 위치·크기를 인라인 style 로 계산한다.
          position / top / left / width / height 는 한 줄도 쓰지 않는다.
          배경도 shorthand(background:) 대신 background-color 만 덮어
          기존 배경 이미지(main_rollbg.png 등)를 지우지 않는다.
        PC·모바일이 .main_con1~5 이름을 공유하되 하위 구조가 다른 곳
        (.main_roll ↔ .list)은 두 셀렉터를 함께 적었다.
   -------------------------------------------------------------------------- */
/* 비주얼 슬라이드 위의 문구 박스(초록/파랑/보라 → 민트/네이비 단계) */
#visualSlide li .vtxt12 { background: rgba(0,169,157,.94); }
#visualSlide li .vtxt22 { background: rgba(0,66,63,.90); }
#visualSlide li .vtxt32 { background: rgba(0,133,124,.94); }
/* 모바일 슬라이더 페이저(하늘색 점 → 민트). PC 페이저는 썸네일 이미지라 제외 */
.hospitalinfo .main_visual .bx-pager .bx-pager-item a { background-color: rgba(255,255,255,.55); }
.hospitalinfo .main_visual .bx-pager .bx-pager-item a.active { background-color: var(--point); }

/* 아이콘 바로가기 줄 */
.main_con1 { background: #f7fbfa; border-top-color: var(--line); border-bottom-color: var(--line); }
.main_con1 ul li a { color: var(--text); font-weight: 500; transition: color .16s; }
.main_con1 ul li a:hover { color: var(--point-700); }

/* 섹션 제목 공통 */
.main_con2 .title,
.main_con4 .title,
.main_con5 .title { color: var(--text); font-weight: 700; letter-spacing: -0.6px; }

/* 교육일정 롤링 카드 — 3색 순환을 민트 계열 3단계로 (배경 이미지는 유지) */
.main_con2 .main_roll ul li.bg0, .main_con2 .list ul li.bg0 { background-color: var(--point); }
.main_con2 .main_roll ul li.bg1, .main_con2 .list ul li.bg1 { background-color: var(--navy-600); }
.main_con2 .main_roll ul li.bg2, .main_con2 .list ul li.bg2 { background-color: #3fb8ad; }

/* 공지사항 · 교육자료 박스 */
.main_con3 { background: #f4f8f7; }
.main_con3 .board1,
.main_con3 .board2 { border-color: var(--line); border-radius: 16px; box-shadow: var(--shadow); }
.main_con3 .title { border-bottom-color: var(--line); }
.main_con3 .title h3 { color: var(--text); font-weight: 700; border-bottom-color: var(--point); }
.main_con3 .title .more a { transition: opacity .16s; }
.main_con3 .title .more a:hover { opacity: .65; }
.main_con3 .list dl dt { color: var(--text-soft); }
.main_con3 .list dl dt a { color: var(--text-soft); transition: color .16s; }
.main_con3 .list dl dt a:hover { color: var(--point-700); }
.main_con3 .list dl dd { color: var(--text-mute); }

/* 이달의 교육일정 박스 (PC 는 바깥 테두리 있음 / 모바일은 없음 →
   border 를 새로 만들지 않고 border-color 만 덮어 양쪽 모두 안전하게) */
.main_con4 { border-color: var(--line); border-radius: 18px; }
.main_con4 .title .more { color: var(--point-700); }
.main_con4 .box { background-color: #f5faf9; border-radius: 14px; border-color: var(--line); }
.main_con4 .box .more { color: var(--point-700); border-bottom-color: var(--line); }
.main_con4 .box dl dt { border-color: var(--line); color: var(--text-soft); }
.main_con4 .box dl dd { color: var(--text); }

/* 하단 교육과정 카드 */
.main_con5 .list ul li {
  border-color: var(--line);
  border-radius: 16px;
  box-shadow: var(--shadow);
  transition: border-color .18s, box-shadow .18s;
}
.main_con5 .list ul li:hover { border-color: var(--point); box-shadow: var(--shadow-lg); }
.main_con5 .list ul li .t1 { color: var(--point-700); }
.main_con5 .list ul li .t2 { color: var(--text); }
.main_con5 .list ul li .t3 { color: var(--text-soft); }
.main_con5 .list ul li .line { background: var(--point); }

/* ⚠ "푸터 위 여백"은 일부러 손대지 않았다 —
   PC 는 #main{margin-bottom:138px}, 모바일은 .main_con5{margin-bottom:60px}
   로 이미 여백이 있어, 여기서 padding/margin 을 덮으면 지금 간격이 오히려
   줄어든다. 간격을 더 벌릴지는 시안을 보고 판단할 사항. */

/* ══════════════════════════════════════════════════════════════════════════
   3단계: 메인 히어로 — 이미지 속 글자를 HTML 로 분리 (2026-08-11)
   --------------------------------------------------------------------------
   · 배경 : PC 는 visual1_txt1.png(헤드라인)·visual_banner_txt01_01.png(카드)
            안에 문구가 그려져 있었고, 모바일은 사진·문구·카드가 통째로 합성된
            main_visual_00X_01.jpg 였다. 이제 사진만 이미지로 남기고 문구는 HTML.
   · ⚠ 건드리지 않은 것
       - .main_visual{height:587px; min-width:1920px}  (슬라이더 계산에 쓰인다)
       - #visualSlide li p{opacity:0}  (bxSlider 가 0→1 로 애니메이션한다.
         여기서 opacity:1 로 덮으면 슬라이드 3장이 겹쳐 보인다)
       - p.vtxt11/21/31 의 top·margin-left  (JS 가 top 을 149→119 로 움직인다)
       - main.css / style.css / sub.css / jquery-ui.css  (무수정 원칙)
   · .vtxt12/22/32 에 width·height 를 새로 준 이유 : 안에 있던 580x330 이미지가
     사라져 크기를 잃었기 때문. <li> 가 아니라 그 안의 <div> 이므로 bxSlider 의
     인라인 계산과 충돌하지 않는다.
   · 카드 3색은 위 2-5 절 값을 이 절이 덮는다(로드 순서상 뒤가 이긴다).
     원본의 밝기 차이 순서(v1<v2<v3)를 유지한 초록 3단계.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── PC : 헤드라인 (사진 위 흰 글자) ───────────────────────────────────── */
#visualSlide li p.vtxt11,
#visualSlide li p.vtxt21,
#visualSlide li p.vtxt31 { width: 600px; }

#visualSlide li .edu-hero-bar {
  display: block; width: 54px; height: 5px; border-radius: 3px;
  background: var(--point); margin-bottom: 22px;
  box-shadow: 0 2px 8px rgba(0,40,38,.45);
}
#visualSlide li .edu-hero-l1,
#visualSlide li .edu-hero-l2 {
  display: block; color: #fff; white-space: nowrap;
  font-size: 36px; line-height: 52px; letter-spacing: -1.4px;
  text-shadow: 0 2px 12px rgba(0,38,36,.55), 0 1px 3px rgba(0,0,0,.38);
}
#visualSlide li .edu-hero-l1 { font-weight: 800; }
#visualSlide li .edu-hero-l2 { font-weight: 400; }

/* ── PC : 카드 (초록 3단계 · 밝기 순서 유지) ──────────────────────────── */
#visualSlide li .vtxt12 { background: rgba(0,66,63,.92); }
#visualSlide li .vtxt22 { background: rgba(0,105,97,.92); }
#visualSlide li .vtxt32 { background: rgba(0,145,135,.92); }

#visualSlide li .vtxt12,
#visualSlide li .vtxt22,
#visualSlide li .vtxt32 { width: 580px; height: 330px; }

#visualSlide li .vtxt12 > a,
#visualSlide li .vtxt22 > a,
#visualSlide li .vtxt32 > a {
  display: block; position: relative; width: 100%; height: 100%;
  box-sizing: border-box; padding: 45px; overflow: hidden;
}
#visualSlide li .edu-card-t1,
#visualSlide li .edu-card-t2 {
  display: block; color: #fff; font-weight: 700;
  font-size: 33px; line-height: 44px; letter-spacing: -1.2px;
}
/* 구분선 길이·위아래 간격은 원본 카드(580x330) 실측치에 맞췄다 — 선 84px,
   제목 아래 45px / 설명 위 55px. */
#visualSlide li .edu-card-line {
  display: block; width: 84px; height: 1px; margin: 45px 0 55px;
  background: rgba(255,255,255,.55);
}
#visualSlide li .edu-card-desc {
  display: block; color: rgba(255,255,255,.92);
  font-size: 16px; line-height: 24px; font-weight: 400; letter-spacing: -0.3px;
}
/* 픽토그램 -> 협회 영문 정식명칭(워터마크형). 2026-08-11 사용자 지적으로 교체 */
#visualSlide li .edu-card-ico {
  display: block; position: absolute; right: 45px; bottom: 34px;
  text-align: right; color: rgba(255,255,255,.42);
}
#visualSlide li .edu-card-ico .l1,
#visualSlide li .edu-card-ico .l2 {
  display: block; font-size: 11px; line-height: 17px; font-weight: 600; letter-spacing: .16em;
}

/* ── 모바일 : /center/m/index.php ─────────────────────────────────────────
   PC 와 클래스 이름을 나눈 이유 : 모바일 ul 도 id 가 #visualSlide 라서
   위 PC 규칙이 그대로 새어 들어온다. 이름을 분리해 간섭을 원천 차단했다.
   크기는 vw 로 잡아 기기 폭에 따라 같은 비율로 줄고 늘어난다(기준 640px). */
.hospitalinfo .main_visual li .edu-mh {
  display: block; position: relative; overflow: hidden;
}
.hospitalinfo .main_visual li .edu-mh-veil {
  display: block; position: absolute; left: 0; right: 0; top: 0; bottom: 0;
  background: linear-gradient(180deg,
              rgba(0,40,38,.58) 0%, rgba(0,45,42,.34) 26%,
              rgba(0,55,51,.12) 42%, rgba(0,66,63,0) 52%);
}
.hospitalinfo .main_visual li .edu-mh-head {
  display: block; position: absolute; left: 7.5%; right: 6%; top: 7%;
}
.hospitalinfo .main_visual li .edu-mh-bar {
  display: block; width: 7.5%; height: 4px; border-radius: 3px;
  background: var(--point); margin-bottom: 3.2%;
  box-shadow: 0 2px 8px rgba(0,40,38,.45);
}
.hospitalinfo .main_visual li .edu-mh-l1,
.hospitalinfo .main_visual li .edu-mh-l2 {
  display: block; color: #fff; white-space: nowrap; letter-spacing: -0.06em;
  text-shadow: 0 2px 12px rgba(0,38,36,.6), 0 1px 3px rgba(0,0,0,.4);
}
.hospitalinfo .main_visual li .edu-mh-l1 { font-size: 6.1vw; line-height: 1.42; font-weight: 800; }
.hospitalinfo .main_visual li .edu-mh-l2 { font-size: 5.5vw; line-height: 1.42; font-weight: 400; }

/* 카드가 히어로 아래쪽에서 차지하는 비율(약 50%)을 기존 합성 이미지 실측치에
   맞춘 값. 여백을 줄이면 카드가 얇아져 원본보다 빈약해 보인다. */
.hospitalinfo .main_visual li .edu-mc {
  display: block; position: absolute; left: 9.4%; right: 0; bottom: 0;
  box-sizing: border-box; padding: 9.5% 7% 11.7%;
}
.hospitalinfo .main_visual li .edu-mc1 { background: rgba(0,66,63,.92); }
.hospitalinfo .main_visual li .edu-mc2 { background: rgba(0,105,97,.92); }
.hospitalinfo .main_visual li .edu-mc3 { background: rgba(0,145,135,.92); }

.hospitalinfo .main_visual li .edu-mc-t1,
.hospitalinfo .main_visual li .edu-mc-t2 {
  display: block; color: #fff; font-weight: 700;
  font-size: 5.3vw; line-height: 1.35; letter-spacing: -0.045em;
}
.hospitalinfo .main_visual li .edu-mc-line {
  display: block; width: 14.5%; height: 1px; margin: 7.8% 0 9.5%;
  background: rgba(255,255,255,.55);
}
.hospitalinfo .main_visual li .edu-mc-desc {
  display: block; color: rgba(255,255,255,.92);
  font-size: 2.75vw; line-height: 1.5; font-weight: 400; letter-spacing: -0.02em;
}
.hospitalinfo .main_visual li .edu-mc-ico {
  display: block; position: absolute; right: 7%; bottom: 6%;
  text-align: right; color: rgba(255,255,255,.42);
}
.hospitalinfo .main_visual li .edu-mc-ico .l1,
.hospitalinfo .main_visual li .edu-mc-ico .l2 {
  display: block; font-size: clamp(9.5px, 2.7vw, 12px); line-height: 1.55; font-weight: 600; letter-spacing: .1em;
}

/* ── 3-6. 히어로 사진을 실제 교육 현장으로 교체 + 그늘막 (2026-08-11) ──
   main.css 의 li.v1/.v2/.v3 배경(main_visual1~3.jpg)을 여기서 덮는다(기존 CSS 무수정).
   밝은 교육장 사진 위에서 흰 글자가 묻히지 않도록 li::before 로 네이비 그늘막을 깐다.
   ★ li 자체의 opacity/display 는 bxSlider 소유 - 건드리지 않는다. */
#visualSlide li.v1 { background-image: url("/center/images/edu_hero1.jpg"); background-position: center center; background-size: cover; }
#visualSlide li.v2 { background-image: url("/center/images/edu_hero2.jpg"); background-position: center center; background-size: cover; }
#visualSlide li.v3 { background-image: url("/center/images/edu_hero3.jpg"); background-position: center center; background-size: cover; }
#visualSlide li.v1, #visualSlide li.v2, #visualSlide li.v3 { position: relative; }
#visualSlide li.v1::before,
#visualSlide li.v2::before,
#visualSlide li.v3::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; bottom: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(100deg, rgba(0,50,47,.80) 0%, rgba(0,66,63,.62) 45%, rgba(0,80,75,.34) 100%);
}

/* ── 3-7. 메인 퀵링크 아이콘 6종 교체 (2026-08-11) ──
   main.css 의 li.icon1~6 배경(main_ban1~6.png)을 새 SVG 선화로 덮는다(기존 CSS·마크업 무수정).
   SVG 라 어떤 배율에서도 또렷하고, 색은 네이비 선 + 민트 포인트로 사이트 톤과 맞춘다. */
.main_con1 ul li.icon1 a { background-image: url("/center/images/ic_job.svg"); }
.main_con1 ul li.icon2 a { background-image: url("/center/images/ic_apply.svg"); }
.main_con1 ul li.icon3 a { background-image: url("/center/images/ic_receipt.svg"); }
.main_con1 ul li.icon4 a { background-image: url("/center/images/ic_cert.svg"); }
.main_con1 ul li.icon5 a { background-image: url("/center/images/ic_faq.svg"); }
.main_con1 ul li.icon6 a { background-image: url("/center/images/ic_venue.svg"); }
.main_con1 ul li a { background-size: 56px 56px; background-position: center top; }
.main_con1 ul li a:hover { color: var(--point-700); }
/* 모바일 퀵링크: img 로 들어가므로 크기만 정돈 */
.hospitalinfo .main_con1 ul li img { width: 42px; height: 42px; }

/* ── 3-8. 푸터 전면 정리 (2026-08-11) ──
   foot_img1.jpg(글자 박힌 검은 상자)와 top.jpg(검은 버튼)를 HTML/CSS로 대체했다.
   이미지가 아니므로 문구·번호 수정이 코드 한 줄로 끝난다(위키 §2 원칙). */
#footer .foot .foot_logo img { opacity: .95; }
#footer .foot .box {
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.16);
  border-radius: 14px; padding: 18px 22px; text-align: left;
}
#footer .foot .box .t1 { font-size: 13px; font-weight: 700; color: #8ef0e6; letter-spacing: .2px; }
#footer .foot .box .t2 { margin-top: 4px; font-size: 12.5px; color: rgba(255,255,255,.6); }
#footer .foot .box .t3 { margin-top: 8px; font-size: 25px; font-weight: 800; letter-spacing: -.5px; line-height: 1.2; }
#footer .foot .box .t3 a { color: #fff; text-decoration: none; }
#footer .foot .box .t3 a:hover { color: #8ef0e6; }

/* 맨 위로 버튼 : 검은 사각형 -> 민트 원형 + CSS 화살표 */
#footer .top a {
  display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%;
  background: var(--point); box-shadow: 0 8px 20px rgba(0,66,63,.28);
  transition: background .18s, transform .18s;
}
#footer .top a:hover { background: var(--point-700); transform: translateY(-3px); }
#footer .top .top_ico {
  display: block; width: 13px; height: 13px; margin-top: 4px;
  border-left: 2.4px solid #fff; border-top: 2.4px solid #fff; transform: rotate(45deg);
}
/* 모바일 문의 카드도 같은 규칙을 쓰도록 폭만 정돈 */
.hospitalinfo #footer .foot .box, #footer.hospitalinfo .foot .box { margin: 14px 0; }

/* ── 3-9. 교육일정 3색 순환 통일 + 연도 이동 화살표 (2026-08-11) ──
   sub.css 의 .a1~.a9 는 3색 순환(초록/파랑/하늘)이었다. a1 계열만 민트로 바뀌어 있어
   나머지 두 계열이 옛 파랑으로 남아 톤이 깨졌다. 같은 초록 계열 3단계로 맞추되,
   ★배경만 비슷하게 두면 구분이 안 되므로 왼쪽 색막대로 회차를 구별한다. */
.board_riqi3 table tr td .a1, .board_riqi3 table tr td .a4, .board_riqi3 table tr td .a7 {
  background: #e3f6f3; color: #00857c; border-left: 3px solid #00a99d;
}
.board_riqi3 table tr td .a2, .board_riqi3 table tr td .a5, .board_riqi3 table tr td .a8 {
  background: #eaf5ec; color: #2f7d55; border-left: 3px solid #4aa877;
}
.board_riqi3 table tr td .a3, .board_riqi3 table tr td .a6, .board_riqi3 table tr td .a9 {
  background: #e6f1f2; color: #0a6b73; border-left: 3px solid #0a9b91;
}
.board_riqi3 table tr td div[class^="a"] { border-radius: 6px; text-align: left; padding-left: 10px; }

/* 연도 이동 화살표: riqi_left/right.jpg 이미지를 감추고 CSS 원형 버튼으로 */
.board_riqi3 .title .btn_left a img, .board_riqi3 .title .btn_right a img { display: none; }
.board_riqi3 .title .btn_left a, .board_riqi3 .title .btn_right a {
  display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
  border: 1px solid var(--line); background: #fff; transition: border-color .18s, background .18s;
}
.board_riqi3 .title .btn_left a:hover, .board_riqi3 .title .btn_right a:hover {
  border-color: var(--point); background: var(--point-soft);
}
.board_riqi3 .title .btn_left a:after, .board_riqi3 .title .btn_right a:after {
  content: ""; width: 8px; height: 8px;
  border-top: 2px solid var(--navy); border-right: 2px solid var(--navy);
}
.board_riqi3 .title .btn_left a:after { transform: rotate(-135deg); margin-left: 3px; }
.board_riqi3 .title .btn_right a:after { transform: rotate(45deg); margin-right: 3px; }

/* ── 3-10. FAQ(sub04_02) · 마이페이지 잔여 요소 (2026-08-11) ──
   1단계 스킨이 공통 요소만 덮어 FAQ 탭·아코디언과 마이페이지 일부가 옛 톤으로 남아 있었다.
   해당 페이지 고유 클래스를 실측(type_tab5 / sub_qnaa / viewcon / log_btn / fileTxt)해 채운다. */

/* FAQ 분류 탭 — sub.css 가 `.type_tab5 ul li.on a`(0,2,3)로 잡고 있어 같은 특이도로 맞춘다.
   레이아웃(60px·5분할 float)은 기존 것을 존중하고 색·테두리만 교체한다. */
.type_tab5 { border-color: var(--line); border-radius: 6px; overflow: hidden; }
.type_tab5 ul li { border-right-color: var(--line); }
.type_tab5 ul li a { font-size: 16px; color: var(--text-soft); transition: background .16s, color .16s; }
.type_tab5 ul li a:hover { background: var(--point-soft); color: var(--point-700); }
.type_tab5 ul li.on a { background: var(--point); color: #fff; font-weight: 600; }

/* FAQ 문답 아코디언 */
.sub_qnaa { border-top: 1px solid var(--line); }
.sub_qnaa > dl { border-bottom: 1px solid var(--line); margin: 0; }
.sub_qnaa > dl > dd { padding: 16px 44px 16px 4px; position: relative; font-size: 15px; color: var(--text); line-height: 1.7; }
.sub_qnaa > dl:not(.viewcon) > dd:after {
  content: ""; position: absolute; right: 14px; top: 22px; width: 8px; height: 8px;
  border-right: 2px solid var(--point); border-bottom: 2px solid var(--point); transform: rotate(45deg);
}
.sub_qnaa > dl:not(.viewcon):hover > dd { background: #f7fbfa; color: var(--point-700); }
.sub_qnaa > dl > dd > span {
  display: inline-block; margin-right: 8px; padding: 3px 10px; border-radius: 999px;
  background: var(--point-soft); color: var(--point-700); font-size: 12px; font-weight: 600;
}
.sub_qnaa > dl.viewcon > dd {
  background: #f7fbfa; border-left: 3px solid var(--point); font-size: 14.5px; color: var(--text-soft); line-height: 1.9;
}

/* 마이페이지 잔여 요소 */
.log_btn a, .log_btn input, .log_btn button {
  border-radius: 6px; background: var(--point); color: #fff; border: 1px solid var(--point);
}
.log_btn a:hover, .log_btn input:hover, .log_btn button:hover { background: var(--point-700); border-color: var(--point-700); }
.fileTxt { color: var(--text-mute); font-size: 13px; }

/* ── 3-11. 공지사항·교육자료실을 새 페이지들과 같은 포맷으로 (2026-08-11) ──
   sub02_03/04/05(법정교육·AI 교육·R.E.VIBE)는 표 머리를 연한 민트+네이비 글자로 쓰는데
   게시판(press_table)만 네이비 배경+흰 글자라 톤이 갈렸다. 게시판 쪽을 새 포맷에 맞춘다.
   페이지네이션의 이미지 화살표도 CSS 버튼으로 대체(글자 박힌 이미지 금지 원칙). */
.content .press_table thead th, .content .press_table th {
  background: var(--point-soft); color: var(--navy); font-weight: 600;
  border-bottom: 1px solid var(--line);
}
.content .press_table td { border-bottom: 1px solid var(--line); }
.content .press_table tbody tr:hover td { background: #f7fbfa; }
.content .press_table tbody tr:hover td a { color: var(--point-700); }

/* 페이지네이션 */
.content .page ul { display: inline-flex; align-items: center; gap: 4px; vertical-align: middle; }
.content .page ul li { list-style: none; }
.content .page ul li a, .content .page ul li strong {
  display: inline-grid; place-items: center; min-width: 32px; height: 32px; padding: 0 8px;
  border-radius: 6px; font-size: 13.5px; font-weight: 500; color: var(--text-soft); text-decoration: none;
}
.content .page ul li a:hover { background: var(--point-soft); color: var(--point-700); }
.content .page ul li strong { background: var(--point); color: #fff; font-weight: 700; }
.content .page .btn a img { display: none; }
.content .page .btn a {
  display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 6px;
  border: 1px solid var(--line); background: #fff; vertical-align: middle;
}
.content .page .btn a:hover { border-color: var(--point); background: var(--point-soft); }
.content .page .btn a:after {
  content: ""; width: 7px; height: 7px;
  border-top: 2px solid var(--navy); border-right: 2px solid var(--navy);
}
.content .page .btn:first-child a:after { transform: rotate(-135deg); margin-left: 3px; }
.content .page .btn:last-child a:after { transform: rotate(45deg); margin-right: 3px; }

/* ── 3-12. 좌측메뉴 두 줄 항목 균형 (2026-08-11) ──
   sub.css 가 `line-height:60px`(1줄 전제)를 쓰고 있어 라벨이 길어져 2줄이 되면 121px 로 튄다.
   줄간격을 정상화하고 세로 패딩으로 높이를 맞춘다. display 는 건드리지 않는다(레이아웃 보호). */
.sub_left > ul > li > a {
  line-height: 1.45; padding-top: 19px; padding-bottom: 19px;
  min-height: 60px; box-sizing: border-box;
}

/* ── 3-13. 교육 상세(sub03_01_view) 본문 카드 팔레트 정렬 (2026-08-11) ──
   교육과정 개요·시간표는 게시글 본문에 인라인 <style>(약 10.5KB)로 저장돼 있고
   Tailwind sky 계열(#0c4a6e·#0369a1·#0ea5e9·#38bdf8·#bae6fd)을 쓴다. DB 본문을 고치지 않고
   #content 스코프(1,2,0)로 인라인 규칙(0,1,0)을 이겨 색만 교체한다 — 모든 회차에 동시 적용.
   ★명도 대응 매핑: 밝기·대비는 유지하고 색상만 이동. 회색(#374151·#111827)은 본문 텍스트라 유지. */

/* 헤더 밴드 */
#content .card-header { background-image: linear-gradient(135deg, #00423f 0%, #00564f 40%, #111827 100%) !important; }
#content .card-year { background-image: linear-gradient(135deg, #c6ebe6, #ffffff) !important; }
#content .badge { background: rgba(0,50,47,.45) !important; border-color: rgba(221,247,241,.35) !important; color: #ddf7f1 !important; }
#content .badge-dot { background: #4fe0cc !important; }
#content .card-header, #content .card-subtitle { color: #ddf7f1 !important; }
#content .tier-tag { background: rgba(79,224,204,.25) !important; border-color: rgba(79,224,204,.5) !important; color: #ddf7f1 !important; }

/* 본문 강조 — 짙은 파랑 → 네이비 */
#content .info-value-left, #content .pr-amount, #content .col-hours,
#content .wrapper b, #content .wrapper td,
#content .board_view1 td, #content .board_view1 b { color: var(--navy) !important; }
/* 중간 파랑 → 민트 다크 */
#content .highlight-label, #content .wrapper th, #content .board_view1 th { color: var(--point-700) !important; }
#content .wrapper th { border-color: var(--point-soft) !important; }
#content .highlight-label { border-color: var(--point) !important; }
/* 하늘색 테두리·배경 */
#content .pr-card { border-color: var(--line) !important; }
#content .notice-box { background: #f0fbf9 !important; border-color: #c6ebe6 !important; color: var(--point-700) !important; }

/* ── 3-14. 공지사항 상세(sub04_01_view) 등 게시글 본문 카드 팔레트 확장 (2026-08-11) ──
   교육 상세와 같은 템플릿 계열이지만 클래스가 더 많다(ev-table·course-chip·step-num·btn-link 등).
   본문 인라인 style 에서 파랑을 쓰는 규칙을 전수 추출해 대응 매핑한다.
   #0c4a6e/#1e3a5f -> 네이비 계열 · #0369a1 -> --point-700 · #0ea5e9/#38bdf8/#0284c7 -> --point
   #bae6fd -> #c6ebe6 · #f0f9ff -> #f0fbf9 · #e0f2fe -> #ddf7f1 (명도 유지) */
#content .part-header,
#content .course-chip.active,
#content .schedule-label.first-half { background-image: linear-gradient(135deg, #00423f 0%, #00625b 100%) !important; }
#content .schedule-label.second-half { background-image: linear-gradient(135deg, #00423f 0%, #00857c 100%) !important; }
#content .card-header::before { background-image: linear-gradient(135deg, #4fe0cc, #00a99d) !important; }
#content .section-title::before { background-image: linear-gradient(180deg, #00a99d, #00423f) !important; }
#content .highlight-box { background: #f0fbf9 !important; }
#content .ev-table th { background: #f0fbf9 !important; color: var(--point-700) !important; }
#content .step-num,
#content .schedule-btn,
#content .btn-link { background-image: linear-gradient(135deg, #4fe0cc, #00857c) !important; }
#content .step-desc a { color: var(--point-700) !important; }
#content .example-box code { color: var(--navy) !important; }
#content .course-chip { background: #f0fbf9 !important; border-color: #c6ebe6 !important; color: var(--point-700) !important; }
#content .schedule-location { background: #f0fbf9 !important; border-color: #c6ebe6 !important; color: var(--point-700) !important; }

/* ── 3-15. 마이페이지 세부 화면 정돈 (2026-08-11) ──
   sub.css 실측: 시안 그라디언트 테두리(#00b5d0->#01ceaa), 검정 상단선(#333),
   회색 라벨열(#f5f5f5), 짙은 회색 버튼(#555), 옛 초록 탭(#1ec17e), 청록 강조(#009db4).
   기존 CSS 무수정 — 같은/한 단계 높은 특이도로 색만 교체한다. 폭·높이는 손대지 않는다. */

/* 강조 테두리 : 시안 그라디언트 -> 민트 계열 */
.my2page1_con1Txt { background: linear-gradient(var(--point), var(--navy)) !important; }

/* 섹션 상단선 : 검정 -> 네이비 */
.my2page1_con1 .con, .my2page2_view .title, .my2page2_view .list,
.order2_con1 .con { border-top-color: var(--navy) !important; }

/* 라벨 열·표 머리 : 회색 -> 연한 민트 */
.my2page1_con1 .con dl { background: var(--point-soft) !important; }
.my2page1_con1 .con dl dt { color: var(--navy) !important; font-weight: 600; }
.my2page2_view .list th { background: var(--point-soft) !important; color: var(--navy) !important; }
.my2page2_view .list td, .my2page2_view .list th { border-bottom-color: var(--line) !important; }
.my2page2_view .title .renshu span { color: var(--point-700) !important; }

/* 버튼 : 짙은 회색/검정 테두리 -> 민트 계열, 모서리만 6px */
.my2page1_con1 .con dl dd .btn1, .order2_con1 .con dl dd .btn1 {
  background: var(--point) !important; border-radius: 6px;
}
.my2page1_con1 .con dl dd .btn2, .order2_con1 .con dl dd .btn2 {
  border-color: var(--line) !important; color: var(--text-soft) !important; border-radius: 6px;
}
.my2page1_con1 .con dl dd .btn1:hover, .order2_con1 .con dl dd .btn1:hover { background: var(--point-700) !important; }
.my2page1_con1 .con dl dd .btn2:hover, .order2_con1 .con dl dd .btn2:hover { border-color: var(--point) !important; color: var(--point-700) !important; }

/* 탭 : 옛 초록 -> 민트 (type_tab5 와 동일 처리) */
.type_tab3 { border-color: var(--line); border-radius: 6px; overflow: hidden; }
.type_tab3 ul li { border-right-color: var(--line); }
.type_tab3 ul li a { font-size: 16px; color: var(--text-soft); }
.type_tab3 ul li a:hover { background: var(--point-soft); color: var(--point-700); }
.type_tab3 ul li.on a { background: var(--point); color: #fff; font-weight: 600; }

/* 목록형 버튼(교육현황 등) : 옛 초록 -> 민트 */
.board_list1 ul li .txt .btn1, .board_list2 ul li .txt .btn1 { background: var(--point) !important; border-radius: 6px; }
.board_list1 ul li .txt .btn2, .board_list2 ul li .txt .btn2 { border-radius: 6px; }

/* ── 3-16. 게시글 본문 카드 팔레트 3차 확장 + 저대비 교정 (2026-08-11) ──
   no=54 계열에서 새 클래스 다수 확인(flow-col-header·part-header 변형·price-*·feature-*·refund-table).
   ★저대비: .cert-num 이 rgba(14,165,233,.12) 로 대비 2.77 — 번호가 사실상 안 보인다.
   장식용 번호라도 읽히긴 해야 하므로 민트 저채도로 올려 대비를 확보한다. */

/* 개인/기업회원 흐름 헤더 · 파트 헤더 */
#content .flow-col-header.personal,
#content .part-header.blue { background-image: linear-gradient(135deg, #00423f 0%, #00625b 100%) !important; }
#content .flow-col-header.corporate,
#content .part-header.mid { background-image: linear-gradient(135deg, #00857c 0%, #00423f 100%) !important; }
#content .part-header.light { background-image: linear-gradient(135deg, #00857c 0%, #00a99d 100%) !important; }

/* 본문 강조·표 */
#content .info-value, #content .step-desc b { color: var(--navy) !important; }
#content .refund-table th { background: #f0fbf9 !important; color: var(--point-700) !important; }

/* 특징 박스 (Tailwind blue 계열) */
#content .feature-box { background: #f0fbf9 !important; border-color: #c6ebe6 !important; }
#content .feature-icon, #content .feature-text { color: var(--point-700) !important; }

/* 요금 카드 */
#content .price-card.featured { border-color: var(--point) !important; background: #f0fbf9 !important; }
#content .price-card.featured .price-amount { color: var(--navy) !important; }
#content .price-discount-badge,
#content .pr-discount-badge { background-image: linear-gradient(135deg, #00423f 0%, #00625b 100%) !important; }
#content .price-list li::before { color: var(--point) !important; }
#content .news-dot { background-image: linear-gradient(135deg, #4fe0cc, #00857c) !important; }

/* ★저대비 교정 : 12% 투명 하늘색 -> 읽히는 민트 (대비 약 2.8 -> 4.5 이상) */
#content .cert-num { color: rgba(0, 133, 124, .38) !important; }

/* ── 3-17. 게시글 커리큘럼 표 가독성 (2026-08-11) ──
   .cur-table 이 td 18px 인데 첫 열 폭이 60px 라 "1교시"가 두 글자에서 접히고 행 높이가 91px 로 늘어난다.
   글자를 한 단계 줄이고 교시·시간 열은 줄바꿈을 막는다(열 폭 지정은 건드리지 않는다). */
#content .cur-table td, #content .cur-table th { font-size: 14.5px !important; }
#content .cur-table td:first-child,
#content .cur-table td:last-child,
#content .cur-table th:first-child,
#content .cur-table th:last-child { white-space: nowrap !important; }
#content .cur-table td { line-height: 1.6 !important; }