@charset "UTF-8";
/* ==========================================================================
   KREMA 협회(루트) 스킨 2026 (/css/skin-2026.css)
   --------------------------------------------------------------------------
   · 목적 : 메인 게이트웨이(/main.php)와 교육센터(/center/)에 이미 적용된
            R.E.VIBE 톤(네이비 + 민트)을 협회 루트(/pages/ · /m/pages/)에도
            얹는다. 로그인·회원가입이 협회 쪽에 있어 교육센터에서 넘어오면
            디자인이 끊기던 문제가 1차 대상.
   · 원칙 : style.css / sub.css / main.css / main2.css / dh.css 는 수정하지
            않는다. 이 파일은 그 뒤에 로드되어 "색·모서리·간격"만 덮는다.
   · 금지 : 전역(*) 리셋, 전역 box-sizing, 글자 크기 변경, 컬럼 폭(width)
            변경, .sub_left / .sub_content 의 display·width 지정
            (= header.php 가 $Left='off' 일 때 넣는 인라인 스타일을
              이겨서는 안 된다).
   · 색 교체 규율 : 테마색으로 쓰인 청록(#0d6253·#01ceaa)·그린(#1ec17e)·
            시안(#33becb·#00b5d0·#009db4)·라임(#90c31f·#8cc63f)·
            파랑(#1199cc·#042e6f)만 교체한다.
            본문 회색(#222·#333·#444·#666·#999)은 그대로 둔다.
   · 교육센터판(/center/css/skin-2026.css)과 토큰·명명 규칙은 같지만
            협회는 클래스 체계가 달라(.sub_title1 · .login_con · .log_box1 …)
            규칙을 새로 썼다. 복사본이 아니다.
   · !important 는 이 파일 전체에 0건이다(로드 순서와 같은 수준 특이도로
            이기게 설계했다).
   ========================================================================== */

: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);
}

/* --------------------------------------------------------------------------
   1. 타이포 — 크기는 건드리지 않고 서체·자간·렌더링만 교체
      (style.css 의 `*{font-family:...}` 는 특이도 0 이라 아래가 이긴다)
   -------------------------------------------------------------------------- */
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 {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: -0.2px;
}

/* --------------------------------------------------------------------------
   2. 헤더
      ⚠ #header / #header .head 에 배경을 주지 않는다.
        메인(index.php)은 main2.css 가 헤더를 비주얼 위에 투명하게 띄우고
        메뉴 글자를 흰색으로 쓴다. 여기서 배경·글자색을 덮으면 메인이 깨진다.
        그래서 "두 배경에서 모두 안전한" 밑줄 강조와 드롭다운 색만 손댄다.
   -------------------------------------------------------------------------- */
#header .menu > ul > li > a { position: relative; transition: color .18s; }
#header .menu > ul > li > a:after {
  content: '';
  position: absolute;
  left: 15px; right: 15px; 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:after { transform: scaleX(1); }

/* 드롭다운 — 기존 딥틸(#0d6253) → 네이비, 링크 호버 라임(#90c31f) → 민트 */
#header .menu > ul > li:hover > ul { background: var(--navy); }
#header .menu > ul > li:hover > ul > li > a:hover { color: #8ef0e6; }
#header .menu .nav_sub a:hover { color: #8ef0e6; }

/* 우측 유틸 링크 · 대형 CTA */
#header .btn ul li a { transition: color .16s; }
#header .btn ul li a:hover { color: var(--point); }
#header .btn ul li.ct a { color: var(--point-700); }
#header .btn1, #header .btn2 { background: var(--point); }
#header .btn1:hover, #header .btn2:hover { background: var(--point-700); }

/* style.css 에만 남아 있는 구형 대메뉴(.submenu_div) — 살아날 경우 대비 */
.submenu_div > .submenu > ul.submenu_ul > li > div > a:hover { color: var(--point-700); }

/* 고정 퀵바(assets/inc/Area.Quick.php) — 주황(#ed6c00) → 네이비 */
#quick { background: var(--navy); }

/* --------------------------------------------------------------------------
   3. 서브 상단 — breadcrumb · 페이지 제목
   -------------------------------------------------------------------------- */
.sub_home .tit, .sub_home .stit { color: var(--text-mute); }
.sub_home .stit { color: var(--point-700); }

/* 좌측 정렬 제목(.sub_title) : 얇은 밑선 + 민트 짧은 바
   height:100px / line-height:70px 는 그대로 두고 선만 얹는다. */
.sub_title {
  position: relative;
  color: var(--text);
  border-bottom: 1px solid var(--line);
}
.sub_title:after {
  content: '';
  position: absolute;
  left: 0; bottom: -1px;
  width: 42px; height: 3px;
  background: var(--point);
  border-radius: 2px;
}
.sub_title .down a { background: var(--point); border-radius: 6px; }
.sub_title .down a:hover { background: var(--point-700); }
.sub_title .down .bg1 { background: var(--navy); }
.sub_title .down .bg1:hover { background: var(--navy-600); }

/* 가운데 정렬 제목(.sub_title1) — 로그인·회원가입 계열이 쓴다.
   자식(.txt · p)이 있어 :after 바를 붙이면 문단 아래로 밀리므로 색만 바꾼다. */
.sub_title1 { color: var(--navy); font-weight: 700; letter-spacing: -0.8px; }
.sub_title1 .txt { color: var(--text); }
.sub_title1 .txt p { color: var(--text-mute); }
.sub_title1 p { color: var(--text-soft); }

.sub_tt { color: var(--point-700); }
.sub_tt span { color: var(--navy); }
.sub_copy { border-color: var(--line); border-radius: 10px; color: var(--text-mute); }
.sub_copy1 { background: #f5faf9; border-radius: 10px; color: var(--text-mute); }

/* --------------------------------------------------------------------------
   4. 좌측 메뉴(.sub_left)
      ⚠ display 속성은 절대 쓰지 않는다($Left='off' 인라인 스타일 보호).
      ⚠ background 는 shorthand 대신 background-color 만 덮는다
        (오른쪽 화살표 아이콘 left_menu_icon.png 을 지우지 않기 위해).
   -------------------------------------------------------------------------- */
.sub_left .title {
  background: linear-gradient(160deg, var(--navy) 0%, var(--navy-600) 100%);
  font-weight: 700;
  letter-spacing: -0.6px;
}
.sub_left > ul { border-color: var(--line); }
.sub_left > ul > li { border-top-color: var(--line); }
.sub_left > ul > li > a {
  color: var(--text-soft);
  border-left: 3px solid transparent;
  transition: background-color .16s, color .16s, border-color .16s;
}
.sub_left > ul > li > a:hover {
  background-color: #f5faf9;
  color: var(--point-700);
  border-left-color: var(--point-soft);
}
.sub_left > ul > li.on > a {
  background-color: var(--point-soft);
  color: var(--point-700);
  font-weight: 700;
  border-left-color: var(--point);
}
.sub_left > ul > li > ul { background-color: #f5faf9; }
.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-color: var(--point);
}

/* ==========================================================================
   5. ★ 로그인 — /pages/login.php
   --------------------------------------------------------------------------
   원본은 .login_con 에 login_bg.jpg(1200x620) 를 통째로 깔고, 그 위에
   입력칸·버튼을 절대좌표로 얹은 구조다. 이미지 안에 아래 글자가 박혀 있다.
     · 안내 문구 "로그인 하시고 / 협회의 다양한 서비스를 이용하세요."
     · 우측 시안(cyan) 패널의 라벨 3줄 + 버튼 3개
   그래서 이미지를 그대로 두면 시안색 패널이 민트 톤과 정면으로 부딪힌다.
   → 배경 이미지를 끄고, 같은 좌표에 CSS 로 패널·문구·버튼을 다시 그린다.
     PHP·마크업은 한 글자도 건드리지 않았다(폼 name/id/onclick 무변경).

   ⚠ 스코프 : #content 는 PC 서브 레이아웃에만 있는 래퍼다(header.php).
      모바일(/m/)에는 없으므로 아래 카드 규칙이 모바일로 새지 않는다.
      모바일 로그인은 §11 에서 따로 다룬다.
   ⚠ 좌표 : 우측 패널 25% = 1200px 기준 300px 로, 원본 이미지의 분할선
      (x=900)과 .btn_id{left:937px} 좌표에 맞춘 값이다.
   ========================================================================== */
#content .login_con {
  background-image: none;
  background-color: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: var(--shadow);
  overflow: hidden;
}
/* 우측 안내 패널 (원본 시안 패널 자리) */
#content .login_con:before {
  content: '';
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 25%;
  background: linear-gradient(160deg, var(--navy) 0%, var(--point-700) 100%);
}
/* 원본 이미지에 박혀 있던 안내 문구를 텍스트로 복원 */
#content .login_con:after {
  content: '로그인 하시고\00000A협회의 다양한 서비스를 이용하세요.';
  white-space: pre;
  position: absolute;
  top: 72px; left: 0; right: 25%;
  text-align: center;
  font-size: 24px;
  line-height: 38px;
  font-weight: 600;
  letter-spacing: -0.8px;
  color: var(--navy);
}

/* 입력칸 — 높이 52px · 좌표는 원본 그대로, 테두리·모서리·포커스만 교체 */
#content .login_con .id input,
#content .login_con .pw input {
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface);
  color: var(--text);
  transition: border-color .16s, box-shadow .16s;
}
#content .login_con .id input:focus,
#content .login_con .pw input:focus {
  border-color: var(--point);
  box-shadow: 0 0 0 3px rgba(0,169,157,.14);
  outline: none;
}

/* 로그인 버튼 — 민트 채움(원본은 청록 그라디언트) */
#content .login_con .login_btn input {
  background: var(--point);
  border-radius: 6px;
  font-weight: 600;
  letter-spacing: -0.3px;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(0,169,157,.26);
  transition: background-color .16s, box-shadow .16s;
}
#content .login_con .login_btn input:hover {
  background: var(--point-700);
  box-shadow: 0 4px 14px rgba(0,169,157,.34);
}

#content .login_con label { color: var(--text-soft); }

/* SNS 간편로그인 배너 — 이미지(네이버 초록 · 카카오 노랑 · 구글 4색)는
   브랜드색이라 그대로 두고 테두리만 정돈한다. */
#content .login_con .banner {
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(0,66,63,.10);
}
#content .login_con .banner img { display: block; }

/* 우측 패널의 라벨 3줄 — 원본 이미지 글자를 텍스트로 복원 */
#content .login_con .btn_id:before,
#content .login_con .btn_pw:before,
#content .login_con .btn_join:before {
  position: absolute;
  left: 0; top: -32px;
  white-space: nowrap;
  font-size: 15px;
  line-height: 20px;
  font-weight: 500;
  letter-spacing: -0.3px;
  color: rgba(255,255,255,.9);
}
#content .login_con .btn_id:before   { content: '아이디를 잊어 버리셨나요?'; }
#content .login_con .btn_pw:before   { content: '비밀번호를 잊어 버리셨나요?'; }
#content .login_con .btn_join:before { content: '아직 회원이 아니세요?'; }

/* 우측 패널의 버튼 3개 — 흰 바탕 + 테두리(보조 버튼) */
#content .login_con .btn_id a,
#content .login_con .btn_pw a,
#content .login_con .btn_join a {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--surface);
  border-radius: 6px;
  background: var(--surface);
  color: var(--navy);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.3px;
  transition: background-color .16s, color .16s;
}
#content .login_con .btn_id a:hover,
#content .login_con .btn_pw a:hover,
#content .login_con .btn_join a:hover {
  background: var(--point-soft);
  color: var(--point-700);
}

.login_txt { color: var(--text-mute); }
.login_txt p { color: var(--text-soft); }
.login_txt p span { color: var(--navy); font-weight: 600; }

/* --------------------------------------------------------------------------
   6. 회원가입 — /pages/join.php (.log_box1 > .join_con > .join1 / .join2)
      바깥 6px 그라디언트 테두리 구조는 유지하고 색·모서리만 바꾼다.
   -------------------------------------------------------------------------- */
.log_box1 {
  background: linear-gradient(135deg, var(--navy) 0%, var(--point) 100%);
  border-radius: 18px;
  box-shadow: var(--shadow);
}
.log_box1 .join_con { border-radius: 12px; }
.log_box1 .join_con .join1 .tit,
.log_box1 .join_con .join2 .tit dt,
.log_box1 .join_con .join2 .tit dd { color: var(--navy); font-weight: 600; }
.log_box1 .join_con .join2 {
  background: #f5faf9;
  border-left-color: var(--line);
}
.log_box1 .join_con .join1 .con dl dt,
.log_box1 .join_con .join2 .con dl dt { color: var(--text-soft); font-weight: 500; }
.log_box1 .join_con .join1 .con dl dd input,
.log_box1 .join_con .join2 .con dl dd input {
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--text);
  transition: border-color .16s, box-shadow .16s;
}
.log_box1 .join_con .join1 .con dl dd input:focus,
.log_box1 .join_con .join2 .con dl dd input:focus {
  border-color: var(--point);
  box-shadow: 0 0 0 3px rgba(0,169,157,.14);
  outline: none;
}
.log_box1 .join_con .btn {
  background: var(--point);
  border-radius: 6px;
  box-shadow: 0 2px 10px rgba(0,169,157,.26);
  transition: background-color .16s;
}
.log_box1 .join_con .btn:hover { background: var(--point-700); }

/* 아이디·비밀번호 찾기(log_id/log_pw) 계열이 쓰는 같은 계열 프레임 */
.log_box { background: linear-gradient(135deg, var(--navy) 0%, var(--point) 100%); border-radius: 14px; }
.log_box .log_id { border-radius: 10px; }

/* --------------------------------------------------------------------------
   7. 공통 폼 — 테두리·모서리·포커스만. 높이/폭은 기존 규칙 유지
   -------------------------------------------------------------------------- */
.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 {
  border: 1px solid var(--line);
  border-radius: 6px;
  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 {
  border-color: var(--point);
  box-shadow: 0 0 0 3px rgba(0,169,157,.14);
  outline: none;
}
.sub_content input[type=submit],
.sub_content input[type=button],
.sub_content button { border-radius: 6px; }

/* --------------------------------------------------------------------------
   8. 게시판 · 표
      ⚠ colgroup / width 지정은 건드리지 않는다. 색·선만 교체한다.
   -------------------------------------------------------------------------- */
.board_top .txt { color: var(--text); }
.board_top .txt span { color: var(--point-700); font-weight: 600; }
.board_top1 .txt span { color: var(--point-700); font-weight: 600; }

.board_top .board_search select,
.board_top .board_search input[type=text],
.board_top1 .search select,
.board_search1 select,
.board_search1 input[type=text] {
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--text);
  transition: border-color .16s, box-shadow .16s;
}
.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_top .board_search .btn,
.board_search1 .btn {
  background: var(--point);
  border-radius: 6px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color .16s;
}
.board_top .board_search .btn:hover,
.board_search1 .btn:hover { background: var(--point-700); }
.board_search1 { background: #f5faf9; border-radius: 12px; }

/* 목록 표(공지사항·협회소식 등) */
.press_table { border-top-color: var(--navy); }
.press_table th {
  background: var(--point-soft);
  color: var(--navy);
  font-weight: 600;
  border-bottom-color: var(--line);
}
.press_table td { border-bottom-color: var(--line); color: var(--text-soft); }
.press_table tr:hover td { background: #f7fbfa; }
.press_table td a { color: var(--text-soft); transition: color .16s; }
.press_table td.link a { color: var(--text); }
.press_table td.link a:hover { color: var(--point-700); text-decoration: underline; }
.press_table td h3 { color: var(--text); }
.press_table td .bg { border-color: var(--navy); color: var(--navy); border-radius: 6px; }
.press_table .dg { color: var(--text-mute); }
.press_table .wl { color: var(--point-700); }

/* 카드형 목록 */
.press_list ul li {
  border-color: #f2f7f6;
  background: #f5faf9;
  border-radius: 14px;
  transition: border-color .18s, box-shadow .18s;
}
.press_list ul li:hover {
  border-color: var(--point);
  background: var(--surface);
  box-shadow: var(--shadow-lg);
}
.press_list ul li a h3 { color: var(--text); }
.press_list ul li a .time span { color: var(--point-700); }

.board_list ul li .img { background: #f5faf9; }
.board_list ul li .txt { border-color: var(--line); }
.board_list ul li .txt p { color: var(--text); }
.board_list ul li .txt dl dt { color: var(--text-mute); }
.board_list ul li .txt dl dd { color: var(--point-700); }
.board_list ul li .txt dl dd a { border-bottom-color: var(--point); }

.board_list2 { border-top-color: var(--navy); }
.board_list2 ul li { border-bottom-color: var(--line); transition: background-color .16s; }
.board_list2 ul li .tt { color: var(--text); font-weight: 600; }

/* 상세 보기 */
.board_view { border-top-color: var(--navy); }
.board_view .title { background: var(--point-soft); border-bottom-color: var(--line); }
.board_view .title h3 { color: var(--navy); font-weight: 700; }
.board_view .title p { color: var(--text-mute); }
.board_view .con { border-bottom-color: var(--line); }
.board_view .db { color: var(--point-700); border-bottom-color: var(--line); }

/* 작성 폼 */
.board_write { border-top-color: var(--navy); }
.board_write dl { background: var(--point-soft); border-bottom-color: var(--line); }
.board_write dl dt { color: var(--navy); font-weight: 600; }
.board_write .input1,
.board_write .textarea1 {
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--text);
  transition: border-color .16s, box-shadow .16s;
}
.board_write .input1:focus,
.board_write .textarea1:focus {
  border-color: var(--point);
  box-shadow: 0 0 0 3px rgba(0,169,157,.14);
  outline: none;
}

/* 탭(개인/기업 회원가입 등) — PC·모바일 마크업이 같아 한 벌로 덮는다 */
.type_tab2 ul li,
.type_tab3 ul li {
  background: #f5faf9;
  border-top-color: #f5faf9;
  border-bottom-color: var(--navy);
}
.type_tab2 ul li a,
.type_tab3 ul li a { color: var(--text-mute); transition: color .16s; }
.type_tab2 ul li a:hover,
.type_tab3 ul li a:hover { color: var(--point-700); }
.type_tab2 ul li.on,
.type_tab3 ul li.on { border-color: var(--navy); }
.type_tab2 ul li.on a,
.type_tab3 ul li.on a { color: var(--navy); font-weight: 700; }

/* --------------------------------------------------------------------------
   9. 버튼 · 페이지네이션
      브리프 지시대로 알약이 아니라 radius 6px 로 통일한다.
   -------------------------------------------------------------------------- */
.write_btn dl dt {
  background: var(--point);
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0,169,157,.24);
  transition: background-color .16s;
}
.write_btn dl dt:hover { background: var(--point-700); }
.write_btn dl dd {
  border-color: var(--line);
  border-radius: 6px;
  background: var(--surface);
  transition: border-color .16s;
}
.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); }

.page ul li {
  background: var(--surface);
  border-color: var(--line);
  border-radius: 8px;
  transition: border-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: var(--surface);
  border-radius: 8px;
  font-weight: 700;
}

/* --------------------------------------------------------------------------
   10. 협회 소개 계열 · 푸터 · 사이트맵
   -------------------------------------------------------------------------- */
.s11_con .box { background: linear-gradient(135deg, var(--navy) 0%, var(--point) 100%); border-radius: 16px; }
.s11_con .box .title { border-radius: 11px; }
.s11_con .box .title h3 span { color: var(--navy); }
.s11_con .con h3 { color: var(--navy); }

#footer, #footer .foot { background: var(--navy); }
.foot .foot_copy .link { color: rgba(255,255,255,.30); }
.foot .foot_copy .link a { color: rgba(255,255,255,.82); transition: color .16s; }
.foot .foot_copy .link a:hover { color: #8ef0e6; }
/* 모바일 푸터는 .foot > .link 구조에 opacity:.5 가 걸려 있어 색을 덧씌우면 너무 흐려진다 — 호버만 */
.foot > .link a:hover { color: #8ef0e6; }
.foot .foot_copy { color: rgba(255,255,255,.55); }
.foot .foot_copy p { color: rgba(255,255,255,.5); }
.foot .family select {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 6px;
  color: rgba(255,255,255,.72);
}
/* 푸터 위 회원사 로고 롤 */
.main_con5 { background: #f4f8f7; }
.main_con5 .ft_roll .bx-default-pager .bx-pager-item a.active { background: var(--point); }

#sitemap .box { border-radius: 16px; }
#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); }

/* --------------------------------------------------------------------------
   11. 협회 메인 — /index.php (main2.css)
       ⚠ 헤더는 §2 에서 말한 이유로 손대지 않는다.
       ⚠ #visualSlide li 의 opacity/위치는 bxSlider 소유 — 건드리지 않는다.
       기존 딥그린(#004e41)은 새 네이비(#00423f)와 거의 같은 명도라
       "톤을 맞추는" 정도로만 교체한다.
   -------------------------------------------------------------------------- */
.main_roll ul li dl dd { border-radius: 14px; overflow: hidden; box-shadow: var(--shadow); }
.main_roll ul li dl dd .txt h3 { color: var(--text); }
.main_roll ul li dl dd .txt p { color: var(--text-mute); }
.main_roll .bx-default-pager .bx-pager-item a { border-color: var(--navy); }
.main_roll .bx-default-pager .bx-pager-item a.active { background: var(--navy); }
.main_con2 .con { border-color: var(--line); border-radius: 16px; }
.main_con2 .con:before { background: var(--line); }
.main_con2 .con .c1 .tit, .main_con2 .con .c2 .tit { color: var(--navy); }
.main_con2 .con .c1 .list ul li, .main_con2 .con .c2 .list ul li { border-top-color: var(--line); }
.main_con2 .con .c1 .list ul li h3, .main_con2 .con .c2 .list ul li h3 { color: var(--text); }
.main_con2 .con .c1 .list ul li a:hover h3,
.main_con2 .con .c2 .list ul li a:hover h3 { color: var(--point-700); }
.main_con3 { background-color: var(--navy); border-radius: 16px; }
.main_con4 ul li { border-left-color: var(--line); }
.main_con4 ul li a h3 { color: var(--navy); }
.main_con4 ul li a p { color: var(--text-mute); }

/* ==========================================================================
   ── 모바일 (/m/) ──
   --------------------------------------------------------------------------
   PC 와 마크업이 다르다. 아래 이름은 m/header.php · m/footer.php ·
   m/index.php · m/css/style.css · m/css/sub.css 를 직접 열어 확인한
   실제 클래스다(추측 아님).
     헤더  : #header.global > .logo / .btn / .Mmenu_Btn#Mmenu
     서랍  : nav.lnb > .lnbarea > .lnbmove > .title / .my / .mn
     래퍼  : 서브 = <div id="sub" class="hospitalinfo">
             메인 = <div id="main" class="hospitalinfo">
     제목바: .smenu > .tit / .stit > .tab
     로그인: .login_con(.txt .id .pw .login_btn .banner .link) / .login_txt
     가입  : .log_txt / .type_tab2 / .id_join1 / .log_btn / .log_btn1 / .log_btn2
     푸터  : #footer > .foot > .link / .foot_copy

   ⚠ 스코프 규칙 : 미디어쿼리가 아니라 래퍼 클래스로 구분한다.
      PC 는 viewport width=1200 고정폭이라 폭 기준(브레이크포인트)은 샌다.
      PC 와 이름이 겹치는 것(.login_con · .type_tab2 …)만 `.hospitalinfo`
      로 스코프하고, `.lnb` · `.smenu` · `.log_btn` 처럼 모바일에만 있는
      이름은 스코프 없이 둔다. 폼·페이지네이션·게시판 규칙은 위 공통
      구획이 이미 모바일에도 적용되므로 여기서 중복하지 않는다.
   ========================================================================== */

/* --- 헤더 · 서랍(LNB) : 모바일 전용 이름 --- */
#header.global .btn a {
  border-color: var(--line);
  border-radius: 6px;
  color: var(--point-700);
}
.lnb .lnbarea .lnbmove .title { background: var(--navy); }
.lnb .lnbarea .lnbmove .my { background: var(--navy); }
.lnb .lnbarea .lnbmove .my dl { border-color: rgba(255,255,255,.45); border-radius: 8px; overflow: hidden; }
.lnb .lnbarea .lnbmove .my dl dd a { border-left-color: rgba(255,255,255,.45); }
.lnb .lnbarea .lnbmove .mn > ul > li > a { color: var(--text); }
.lnb .lnbarea .lnbmove .mn > ul > li ul { background: #f5faf9; }
.lnb .lnbarea .lnbmove .mn > ul > li ul li a { color: var(--text-soft); }
.lnb .lnbarea .lnbmove .mn > ul > li ul li a:hover { color: var(--point-700); }

/* --- 페이지 제목 바(.smenu) : 모바일 전용 --- */
.smenu {
  background: linear-gradient(120deg, var(--navy) 0%, var(--point-700) 100%);
  border-top-color: var(--point);
}
.smenu .tit { font-weight: 700; letter-spacing: -0.6px; }
.smenu .stit .tab { color: var(--point-700); font-weight: 600; }
.smenu .stit > ul > li { border-color: var(--line); }
.smenu .stit > ul > li > a { color: var(--text-soft); }
.smenu .stit > ul > li.on { background: var(--point-soft); }
.smenu .stit > ul > li > ul { background: #f5faf9; }
.smenu .stit > ul > li > ul > li a { color: var(--text-mute); }
.smenu .stit > ul > li > ul > li.on a { color: var(--point-700); border-bottom-color: var(--point); }

/* --- 모바일 로그인 : 흐름 배치라 PC 카드 규칙(§5)과 완전히 별개 --- */
.hospitalinfo .login_con .txt { color: var(--navy); font-weight: 700; letter-spacing: -0.5px; }
.hospitalinfo .login_con .id input,
.hospitalinfo .login_con .pw input {
  border-color: var(--line);
  border-radius: 6px;
  transition: border-color .16s, box-shadow .16s;
}
.hospitalinfo .login_con .id input:focus,
.hospitalinfo .login_con .pw input:focus {
  border-color: var(--point);
  box-shadow: 0 0 0 3px rgba(0,169,157,.14);
  outline: none;
}
.hospitalinfo .login_con .login_btn input {
  background: var(--point);
  border-radius: 6px;
  font-weight: 600;
  box-shadow: 0 2px 10px rgba(0,169,157,.26);
}
.hospitalinfo .login_con label { color: var(--text-soft); }
.hospitalinfo .login_con .banner { border-radius: 10px; overflow: hidden; }
.hospitalinfo .login_con .banner img { display: block; }
.hospitalinfo .login_con .link { border: 1px solid var(--line); border-radius: 10px; }
.hospitalinfo .login_con .link ul li { border-left-color: var(--line); }
.hospitalinfo .login_con .link ul li a { color: var(--text-soft); line-height: 44px; font-weight: 500; }
.hospitalinfo .login_txt { background: #f5faf9; color: var(--text-mute); }
.hospitalinfo .login_txt .box { border-color: var(--line); border-radius: 8px; color: var(--text-soft); }
.hospitalinfo .login_txt .box h3 { color: var(--navy); }

/* --- 모바일 회원가입 · 아이디/비밀번호 찾기 --- */
.log_txt { color: var(--navy); font-weight: 700; letter-spacing: -0.5px; }
.log_txt p { color: var(--text-mute); font-weight: 400; }
.id_join1 dl dt { color: var(--navy); font-weight: 600; }
.id_join1 dl dd > input,
.id_join1 dl dd > select,
.id_join1 dl dd > textarea {
  border-color: var(--line);
  border-radius: 6px;
  transition: border-color .16s, box-shadow .16s;
}
.id_join1 dl dd > input:focus,
.id_join1 dl dd > select:focus,
.id_join1 dl dd > textarea:focus {
  border-color: var(--point);
  box-shadow: 0 0 0 3px rgba(0,169,157,.14);
  outline: none;
}
.log_btn a {
  background: var(--point);
  border-radius: 6px;
  box-shadow: 0 2px 10px rgba(0,169,157,.26);
}
.log_btn1 ul li { border-color: var(--line); border-radius: 6px; }
.log_btn1 ul li a { color: var(--text-soft); }
.log_btn1 ul li.on { background: var(--point); border-radius: 6px; }
.log_btn2 ul li { border-color: var(--line); border-radius: 6px; }
.log_btn2 ul li a { color: var(--text-soft); }
.log_btn2 ul li.on { background: var(--point); border-radius: 6px; }

/* --- 모바일 게시판 보조(.board_toptxt 는 모바일 전용 이름) --- */
.board_toptxt { color: var(--text); }
.board_toptxt span { color: var(--point-700); font-weight: 600; }
.hospitalinfo .board_write dl dt { color: var(--navy); }
.hospitalinfo .board_write dl dd > input,
.hospitalinfo .board_write dl dd > select,
.hospitalinfo .board_write dl dd > textarea {
  border-color: var(--line);
  border-radius: 6px;
}

/* --- 모바일 하단 다운로드 버튼(m/footer.php .end_down) --- */
.end_down a { border-radius: 6px; }