@charset "utf-8";
/* ============================================================
   renewal.css — 허브브레인 홈페이지 현대화 / 반응형 오버레이
   기존 common.css / sub.css / main.css 뒤에 로드되어 덮어씁니다.
   원복이 필요하면 layoutPage.cshtml 에서 이 파일 링크만 제거하세요.
   ============================================================ */

/* ---------- 디자인 토큰 ---------- */
:root {
  --brand:        #df6714;   /* 기존 브랜드 주황 */
  --brand-dark:   #cd6e09;
  --brand-soft:   #fdf0e6;
  --ink:          #2b2b2b;
  --ink-soft:     #575757;
  --muted:        #8a8a8a;
  --line:         #e6e6e6;
  --bg:           #ffffff;
  --bg-soft:      #f7f8fa;
  --container:    1180px;
  --radius:       12px;
  --shadow:       0 6px 24px rgba(0,0,0,.07);
  --shadow-soft:  0 2px 10px rgba(0,0,0,.05);
  --header-h:     76px;
}

/* ---------- 베이스 ---------- */
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: "Pretendard Variable","Pretendard","맑은 고딕","Malgun Gothic",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size: 15px;
  line-height: 1.65;
  color: var(--ink-soft);
  background: var(--bg) !important;
  word-break: keep-all;
}
img { max-width: 100%; height: auto; }
* { box-sizing: border-box; }

a { color: var(--ink-soft); transition: color .15s ease; }
a:hover, a:active, a:visited { color: var(--brand); }

/* ---------- 폭 해제: 고정 980px → 유동 컨테이너 ---------- */
#wrapper {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
}
#header, #contents, #footer, .cont, .visual_main,
.visual_about, .visual_job, .visual_candidate,
.visual_client, .visual_custom, .visual_my, .visual_site {
  width: 100% !important;
}

/* ============================================================
   헤더 / 글로벌 네비게이션
   ============================================================ */
#header {
  position: sticky !important;
  top: 0;
  z-index: 1000;
  height: auto !important;
  min-height: var(--header-h);
  background: rgba(255,255,255,.92) !important;
  backdrop-filter: saturate(160%) blur(8px);
  border-bottom: 1px solid var(--line);
  box-shadow: var(--shadow-soft);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px 24px;
  /* 위: 상단 주황 유틸 바(절대배치, 약 24px) + 로고와의 여백 / 좌우: 콘텐츠 980 중앙 정렬 */
  padding: 40px max(24px, calc((100% - 980px) / 2)) 8px;
  max-width: 100%;
}

/* 로고 — 둘째 줄 좌측 */
#header .logo {
  position: static !important;
  left: auto; top: auto;
  order: 2;
  margin: 0;
  flex: 0 0 auto;
  line-height: 0;
}
#header .logo img { height: 38px; width: auto; }

/* ---- 텍스트 기반 로고 (흐린 이미지 대체) ---- */
.logo-text {
  display: inline-flex;
  flex-direction: column;
  line-height: 1;
  font-family: "Noto Serif KR", "Times New Roman", "Batang", Georgia, serif;
  text-decoration: none;
  white-space: nowrap;
}
.logo-text .logo-top {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: -.2px;
  color: #161616;
}
.logo-text .logo-main {
  font-size: 27px;
  font-weight: 900;          /* 가장 두꺼운 굵기 */
  letter-spacing: -1px;
  color: #111;               /* 거의 검정으로 진하게 */
  line-height: .95;
  margin: 1px 0;
}
.logo-text .logo-accent { color: var(--brand); }   /* B 주황 강조 */
.logo-text .logo-tag {
  font-size: 9px;
  font-weight: 400;
  letter-spacing: 3.2px;
  color: #8a8a8a;
}
/* 푸터: 흑백(그레이) 버전 */
.logo-text--mono .logo-main { color: #6e6e6e; }
.logo-text--mono .logo-accent { color: #9b9b9b; }
.logo-text--mono .logo-top { color: #6e6e6e; }
.logo-text--mono .logo-tag { color: #9b9b9b; }

/* 상단 유틸 바 — 원래처럼 헤더 맨 위 "전체폭 주황 바 + 흰 글자", 얇게, 우측 정렬.
   #header(sticky) 기준 절대배치 상단 띠로 띄우고, 안쪽 콘텐츠만 980 우측끝에 맞춘다. */
.infoMu {
  position: absolute !important;
  top: 0; left: 0; right: 0;
  margin: 0;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 0;
  background: var(--brand);
  padding: 4px max(24px, calc((100% - 980px) / 2));
  font-size: 12px;
  z-index: 2;
}
.infoMu li {
  float: none !important;
  background: none !important;
  padding: 0 !important;
  display: flex;
  align-items: center;
}
.infoMu li::after {
  content: "";
  width: 1px; height: 10px;
  background: rgba(255,255,255,.45);   /* 흰 구분선 */
  margin: 0 6px 0 12px;
}
.infoMu li:last-child::after { display: none; }
.infoMu li a {
  color: #fff !important;              /* 흰 글자 */
  padding: 3px 4px;
}
.infoMu li a:hover { color: #fff !important; opacity: .8; }
/* 회원가입: 평범한 흰 텍스트 / 전체메뉴: 얇은 흰 테두리 박스 (원래 느낌) */
.infoMu li.join a { background: none; }
.infoMu li.totalMu { background: none !important; }
.infoMu li.totalMu a {
  border: 1px solid rgba(255,255,255,.6);
  border-radius: 3px;
  padding: 1px 7px;
}

/* 메인 메뉴 (GNB) — 이미지 스프라이트 제거 → 텍스트 노출 */
.gnb {
  position: static !important;
  left: auto; top: auto;
  width: auto !important;
  height: auto !important;
  padding: 0 !important;
  overflow: visible !important;
  order: 3;                  /* 로고 우측 */
  flex: 1 1 auto;            /* 로고 제외 남은 공간을 모두 차지 */
  justify-content: center;   /* 남은 공간에서 가운데 정렬 */
  display: flex;
  align-items: center;
  gap: 4px;
}
.gnb > li,
.gnb01, .gnb02, .gnb03, .gnb04, .gnb05 {
  float: none !important;
  margin: 0 !important;
  padding: 0 !important;
  position: relative;
}
/* 최상위 메뉴 링크: 스프라이트 이미지 제거 후 텍스트 표시 */
.gnb > li > a,
.gnb .gnb01 > a, .gnb .gnb02 > a, .gnb .gnb03 > a,
.gnb .gnb04 > a, .gnb .gnb05 > a {
  display: block !important;
  background: none !important;
  width: auto !important;
  height: auto !important;
  text-indent: 0 !important;
  font-size: 18px;
  font-weight: 600;
  color: var(--ink) !important;
  padding: 20px 18px !important;
  white-space: nowrap;
  line-height: 1;
}
.gnb > li > a:hover,
.gnb > li:hover > a { color: var(--brand) !important; }
/* hover 시 밑줄 강조 */
.gnb > li > a::after {
  content: "";
  position: absolute;
  left: 16px; right: 16px; bottom: 16px;
  height: 2px;
  background: var(--brand);
  transform: scaleX(0);
  transition: transform .2s ease;
}
.gnb > li:hover > a::after { transform: scaleX(1); }
/* 현재 선택된 대메뉴 표시 (서브 페이지 진입 시 JS가 .current 부여) */
.gnb > li > a.current { color: var(--brand) !important; font-weight: 700; }
.gnb > li > a.current::after { transform: scaleX(1); }

/* 드롭다운 (서브 메뉴) — 데스크탑 hover.
   ※ 옛 menuinit.js 가 인라인 display:none/block 을 주입하므로 display 를 !important 로 고정해
   JS 간섭을 무력화하고, 표시 여부는 opacity/visibility(데스크탑)·정적배치(모바일)로만 제어한다. */
.bg_subMu {
  display: block !important;
  position: absolute !important;
  left: 50% !important;
  top: 100% !important;
  transform: translateX(-50%);
  width: max-content !important;
  min-width: 180px;
  height: auto !important;
  padding: 8px !important;
  margin: 0;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: var(--shadow);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .15s ease, transform .15s ease;
  z-index: 1001;
}
.gnb > li:hover .bg_subMu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.bg_subMu li {
  float: none !important;
  width: 100% !important;
  height: auto !important;
  padding: 0 !important;
  margin: 0 !important;
}
/* 드롭다운 내부 링크: 스프라이트 제거 후 텍스트 표시 */
.bg_subMu li a {
  display: block !important;
  background: none !important;
  width: auto !important;
  height: auto !important;
  text-indent: 0 !important;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-soft) !important;
  padding: 10px 14px !important;
  border-radius: 8px;
  white-space: nowrap;
}
.bg_subMu li a:hover {
  background: var(--brand-soft) !important;
  color: var(--brand-dark) !important;
}
/* 데스크탑에서 가렸던 반투명 바 제거 */
.bg_subMuBar { display: none !important; }

/* 햄버거 버튼 (모바일 전용, 기본 숨김) */
.nav-toggle {
  display: none;
  order: 4;
  width: 44px; height: 44px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
  padding: 0;
}
.nav-toggle span {
  display: block;
  width: 22px; height: 2px;
  background: var(--ink);
  border-radius: 2px;
  transition: transform .25s ease, opacity .2s ease;
}
#wrapper.nav-open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
#wrapper.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
#wrapper.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ============================================================
   콘텐츠 공통 컨테이너
   ============================================================ */
#contents {
  max-width: var(--container);
  margin: 0 auto !important;
  padding: 0 24px;
}

/* ============================================================
   메인 페이지
   ============================================================ */
/* 히어로 비주얼 (jqbanner = 980×309 고정 JS 슬라이더).
   내부 치수는 그대로 두고, 바깥만 가운데 정렬 + 좌우 크롭으로 반응형 처리.
   ※ 슬라이드 폭을 늘리면 JS 의 top 좌표(309px 단위) 계산이 깨지므로 건드리지 않음. */
.visual_main {
  height: 309px !important;                 /* 배너 사진 네이티브 높이 */
  background: url(../images/main/visual_main.jpg) no-repeat center top !important;
  background-size: auto 100% !important;     /* 높이 채우고 폭은 비율 유지(가운데 크롭) */
  max-width: 980px;                          /* 사진 폭에 맞춰 가운데 배치(좌우 흰여백 방지) */
  margin: 0 auto 24px;                       /* 메뉴와 붙도록 상단 여백 제거 */
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  display: flex;
  justify-content: center;
}
.visual_main #jqb_object { margin: 0 !important; flex: 0 0 auto; }

/* 메인 본문 레이아웃: 좌(For Candidate/Client) - 중(오픈포지션) - 우(퀵)
   ※ 가운데 오픈포지션은 470px 고정 JS 위젯이라 fr 로 짜내지 않고 flex 로 자연 배치 */
.cont {
  height: auto !important;
  max-width: 980px;                 /* 메인 배너(980px)와 폭을 맞춰 정렬 통일 */
  margin: 8px auto 56px !important;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
  align-items: stretch;
}
/* 좌·우 카드 컬럼은 고정 210px, 가운데(OPEN POSITION)는 남는 폭을 모두 차지
   → 210 + 210 + 528 + (16*2) = 980 으로 배너와 정확히 정렬. 가운데 내부폭 484px 라
   470px 채용정보 위젯이 여유 있게 들어간다. */
.cont .quick, .cont .quick2 {
  float: none !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  position: static !important;
  flex: 0 0 232px;
  display: grid;
  gap: 16px;
  align-content: start;
}
.cont .open {
  float: none !important;
  height: auto !important;
  margin: 0 !important;
  position: relative !important;
  flex: 1 1 auto;
  width: auto !important;
}

/* 퀵 배너: 이미지 → 텍스트 카드 */
.quick li a, .quick2 li a {
  display: block !important;
  background: var(--bg-soft) !important;
  width: auto !important;
  height: auto !important;
  text-indent: 0 !important;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px 22px !important;
  color: var(--ink) !important;
  font-size: 18px;
  font-weight: 700;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.quick li a:hover, .quick2 li a:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow);
  border-color: var(--brand);
}
.quick li a span, .quick2 li a span {
  display: block;
  margin-top: 8px;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.55;
  color: var(--muted);
}
/* Customer Center 연락처: 대표전화/E-mail 강조 + 줄 안 깨지게 */
.cc-info {
  display: block;
  margin-top: 6px;
  font-size: 11.5px;
  line-height: 1.75;
  color: var(--ink);          /* 실제 전화·이메일 값도 진하게 */
  font-weight: 500;
  white-space: nowrap;
}
.cc-info strong { color: var(--ink); font-weight: 700; }   /* 라벨: 허브브레인(주황)과 구분되는 진한 색 */
/* 박스 안 "허브브레인" 브랜드명 강조 */
.brandword { color: var(--brand); font-weight: 700; font-style: normal; }
/* 주요 액션 카드 강조 */
.quickMu_01 a, .quickMu_02 a { background: var(--brand-soft) !important; border-color: #f3d6bf !important; }

/* 각 퀵 카드에 어울리는 아이콘(인라인 SVG)을 우상단에 배치 */
.cont .quickMu_01 a { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23df6714' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21c0-4 4-6 8-6s8 2 8 6'/%3E%3C/svg%3E") no-repeat left 22px top 20px / 30px, var(--brand-soft) !important; }
.cont .quickMu_02 a { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23df6714' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='3' width='14' height='18' rx='1'/%3E%3Cpath d='M9 7h2M13 7h2M9 11h2M13 11h2M9 15h2M13 15h2'/%3E%3C/svg%3E") no-repeat left 22px top 20px / 30px, var(--brand-soft) !important; }
.cont .quickMu_03 a { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23df6714' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s7-6 7-11a7 7 0 1 0-14 0c0 5 7 11 7 11z'/%3E%3Ccircle cx='12' cy='10' r='2.5'/%3E%3C/svg%3E") no-repeat left 22px top 20px / 30px, var(--bg-soft) !important; }
.cont .quickMu_04 a { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23df6714' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 13v-1a8 8 0 0 1 16 0v1'/%3E%3Crect x='3' y='13' width='4' height='6' rx='1.5'/%3E%3Crect x='17' y='13' width='4' height='6' rx='1.5'/%3E%3Cpath d='M20 19a3 3 0 0 1-3 3h-3'/%3E%3C/svg%3E") no-repeat left 22px top 20px / 30px, var(--bg-soft) !important; }
.cont .quickMu_05 a { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23df6714' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='M3 7l9 6 9-6'/%3E%3C/svg%3E") no-repeat left 22px top 20px / 30px, var(--bg-soft) !important; }
/* 아이콘(좌상단) 자리 확보용 상단 여백 */
.quick li a, .quick2 li a { padding-top: 58px !important; }

/* 오픈 포지션 */
.open {
  background: #fff;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius);
  padding: 22px !important;
  box-shadow: var(--shadow-soft);
}
/* OPEN POSITION 타이틀 줄: 좌측 제목 + 우측 MORE 버튼 (공통 주황 밑줄) */
.open_head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 2px solid var(--brand);
  padding-bottom: 12px;
  margin-bottom: 10px;
}
.tlt_position {
  height: auto !important;
  background: none !important;
  text-indent: 0 !important;
  font-size: 18px;
  font-weight: 800;
  color: var(--ink);
  border-bottom: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}
.open_more {
  flex: 0 0 auto;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .5px;
  color: var(--brand) !important;
  border: 1px solid var(--brand);
  border-radius: 999px;
  padding: 3px 13px;
  line-height: 1.5;
  transition: background .15s ease, color .15s ease;
}
.open_more:hover { background: var(--brand); color: #fff !important; }
/* 채용정보 롤링 위젯 (srolling = 행 높이 25px 단위로 top 스크롤).
   반드시 position:relative + overflow:hidden 으로 복제 항목을 카드 안에 가둔다.
   행 높이도 정확히 25px 로 맞춰야 스크롤이 어긋나지 않는다(box-sizing:border-box 이므로 테두리는 높이에 포함). */
.openPosition {
  position: static !important;
  width: 100% !important;
  height: auto !important;          /* 롤링 제거 → 15개 정적 목록을 모두 표시 */
  left: auto !important; top: auto !important;
  overflow: visible !important;
}
.job_info {
  display: flex;
  gap: 10px;
  align-items: center;
  height: 25px;
  line-height: 25px;
  padding: 0 !important;
  border-bottom: 1px solid var(--line) !important;
}
.job_info .position {
  flex: 1 1 auto;
  width: auto !important;
  background: none !important;
  padding: 0 !important;
  font-weight: 600;
  font-size: 13px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.job_info .level { flex: 0 0 auto; width: auto !important; padding: 0 !important; color: var(--muted); font-size: 13px; }
/* (구) 하단 "전체보기" 버튼은 제거 — 타이틀 우측 MORE 버튼으로 대체 */

/* ============================================================
   서브 페이지
   ============================================================ */
/* 비주얼 배너: 각 섹션 고유의 브랜드 배너 이미지(텍스트 포함)를 복원하고 반응형 처리.
   배경 이미지는 sub.css 의 각 .visual_* 규칙(url)을 그대로 살리고, 위치/크기만 조정한다.
   text-indent 는 -9999px 유지(문구가 이미지에 포함되어 있으므로 숨김). */
.visual_about, .visual_job, .visual_candidate,
.visual_client, .visual_custom, .visual_my, .visual_site {
  height: 249px !important;                 /* 배너 네이티브 높이 */
  background-repeat: no-repeat !important;
  background-position: center top !important;
  background-size: auto 100% !important;     /* 높이 채우고 폭은 비율 유지(가운데 크롭) */
  text-indent: -9999px !important;
  max-width: 980px;                          /* 배너 폭에 맞춰 가운데 배치 */
  margin: 0 auto !important;
  overflow: hidden;
  border-radius: var(--radius);              /* 홈 배너와 동일한 둥근 모서리 + 그림자 */
  box-shadow: var(--shadow-soft);
}

/* 서브 본문: 좌측메뉴 + 우측콘텐츠 → 반응형 그리드 */
.cont:has(.leftArea) {
  display: grid !important;
  grid-template-columns: 200px 1fr;
  gap: 40px;
  max-width: 980px !important;               /* 서브 배너(980px)와 폭을 맞춰 정렬 통일 */
  margin: 40px auto 64px !important;
  align-items: start;
}
.leftArea {
  position: static !important;
  width: auto !important;
  left: auto !important; top: auto !important;
}
.leftMu {
  width: auto !important;
  border-top: 0 !important;
  position: static !important;
}
/* 좌측 서브메뉴 위 타이틀 제거 (배너에 이미 타이틀이 있어 중복) */
.leftMu h3[class^="menuTlt"] { display: none !important; }
.leftMu ul[class^="leftMu_"] {
  position: static !important;
  left: auto !important; top: auto !important;
}
.leftMu li {
  width: auto !important;
  height: auto !important;
}
/* 좌측 메뉴 링크: 스프라이트 제거 후 텍스트 */
.leftMu li a {
  display: block !important;
  background: none !important;
  width: auto !important;
  height: auto !important;
  text-indent: 0 !important;
  padding: 13px 14px !important;
  font-size: 15px;
  font-weight: 500;
  color: var(--ink-soft) !important;
  border: 0 !important;
  border-bottom: 1px solid var(--line) !important;
  border-radius: 8px;
}
.leftMu li a:hover { background: var(--bg-soft) !important; color: var(--brand) !important; }
.leftMu li a.current {
  background: var(--brand-soft) !important;
  color: var(--brand-dark) !important;
  font-weight: 700;
  border-bottom-color: transparent !important;
}

/* 우측 콘텐츠 영역 */
.rightArea {
  position: static !important;
  width: auto !important;
  height: auto !important;        /* sub.css 의 height:100% 해제 */
  left: auto !important; top: auto !important;
  margin-top: 0 !important;       /* sub.css 의 margin-top:47px / padding-top:28px 해제 */
  padding-top: 0 !important;      /* → 좌측 메뉴와 시작 y 좌표를 맞춤 */
  min-width: 0;
}
/* 페이지 제목 (이미지였던 것 텍스트화 대비) */
[class^="pageTlt"] {
  position: static !important;        /* sub.css 의 absolute(left:0;top:0) 해제 — 좌측 메뉴와 겹침 방지 */
  left: auto !important; top: auto !important;
  display: inline-block;
  background: none !important;
  text-indent: 0 !important;
  width: auto !important;
  height: auto !important;
  font-size: 26px;
  font-weight: 800;
  color: var(--ink);
  margin-bottom: 8px;
}
/* 위치 표시(breadcrumb) */
/* breadcrumb(위치정보)는 좌측 서브메뉴의 현재 선택 표시와 중복이므로 숨김 */
.localMu { display: none !important; }

/* ============================================================
   서브 본문 — "통이미지"로 가려둔 실제 텍스트를 노출하고 타이포 정리
   대상: .page_contents 안의 .page_contents_<섹션><번호> (정보 페이지)
   게시판/폼(.default_sub, table.board 등)은 건드리지 않는다.
   ============================================================ */

/* 본문 컨테이너 폭 해제 + 상단 회색 경계선 제거(타이틀 주황 밑줄과 중복) */
.page_contents { width: auto !important; max-width: 100%; border-top: 0 !important; padding-top: 0 !important; }

/* 통이미지 제거 → 실제 텍스트 노출 (About·HeadHunting·Candidate·Client 정보 페이지 공통) */
.page_contents > [class^="page_contents_"] {
  width: auto !important;
  height: auto !important;
  min-height: 0 !important;
  background: none !important;
  text-indent: 0 !important;
  font-size: 15px !important;       /* 일부 블록이 font-size:0 이었음 */
  line-height: 1.7;
}

/* 제목 / 문단 */
[class^="page_contents_"] h4 {
  font-size: 21px; font-weight: 800; color: var(--ink);
  margin: 4px 0 16px; line-height: 1.4;
}
[class^="page_contents_"] h5 {
  font-size: 17px; font-weight: 700; color: var(--ink);
  margin: 28px 0 12px; padding-bottom: 8px; border-bottom: 2px solid var(--brand);
}
[class^="page_contents_"] p { margin: 0 0 14px; }

/* 단계/절차 목록 (ol > li, 내부 dl·ul 포함) → 카드형 */
[class^="page_contents_"] ol { margin: 16px 0; padding: 0; }
[class^="page_contents_"] ol > li {
  list-style: none;
  margin-bottom: 10px; padding: 14px 18px;
  background: var(--bg-soft); border: 1px solid var(--line); border-radius: 10px;
  font-weight: 700; color: var(--ink);
}
[class^="page_contents_"] ol > li > span { font-weight: 400; color: var(--ink-soft); }
[class^="page_contents_"] ol > li > dl { margin-top: 6px; font-weight: 400; }
[class^="page_contents_"] ol > li > dl dt { font-weight: 700; color: var(--brand-dark); margin-top: 4px; }
[class^="page_contents_"] ol > li > dl dd { color: var(--ink-soft); }
[class^="page_contents_"] ul { margin: 8px 0; padding-left: 18px; }
[class^="page_contents_"] ul li { list-style: disc; margin: 4px 0; font-weight: 400; color: var(--ink-soft); }

/* 정의형 표 (회사정보 등: 콘텐츠 블록 바로 아래 dl) → 좌측 라벨 그리드 */
.page_contents > [class^="page_contents_"] > dl {
  display: grid; grid-template-columns: 140px 1fr;
  border-top: 2px solid var(--ink); margin-top: 24px;
}
.page_contents > [class^="page_contents_"] > dl > dt {
  background: var(--bg-soft); font-weight: 700; color: var(--ink);
  padding: 13px 16px; border-bottom: 1px solid var(--line);
}
.page_contents > [class^="page_contents_"] > dl > dd {
  padding: 13px 16px; border-bottom: 1px solid var(--line); margin: 0;
}

/* 콘텐츠 표 (채용 안내 표 등). 게시판(table.board)은 제외 */
.page_contents table.tablehidden { display: table !important; }
[class^="page_contents_"] table {
  width: 100% !important; border-collapse: collapse;
  margin-top: 20px; border-top: 2px solid var(--ink);
}
[class^="page_contents_"] caption {
  text-align: left; font-weight: 700; color: var(--ink); padding: 0 0 10px;
}
[class^="page_contents_"] th {
  width: 130px; text-align: left; vertical-align: top;
  background: var(--bg-soft); font-weight: 700; color: var(--ink);
  padding: 13px 16px; border-bottom: 1px solid var(--line);
}
[class^="page_contents_"] td {
  vertical-align: top; padding: 13px 16px; border-bottom: 1px solid var(--line);
}
@media (max-width: 600px) {
  [class^="page_contents_"] th, [class^="page_contents_"] td { display: block; width: 100%; border-bottom: 0; }
  [class^="page_contents_"] td { padding-top: 0; border-bottom: 1px solid var(--line); }
}

/* ※ 이전의 .default_sub { overflow-x: auto } 제거:
   overflow-x:auto 는 overflow-y 까지 auto 로 만들어 콘텐츠 페이지에 불필요한
   안쪽 세로 스크롤바를 만들었음. 게시판 표는 table-layout:fixed 라 폭에 맞게 줄어듦. */

/* ===== 페이징을 모던한 버튼형 페이지네이션으로 ===== */
.board_paging {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  list-style: none;
  width: auto !important;
  margin: 30px 0 8px;
  padding: 0 !important;
}
.board_paging li {
  float: none !important;
  background: none !important;     /* list_navi_line.gif 구분선 제거 */
  margin: 0;
}
.board_paging li a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 10px !important;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff !important;
  color: var(--ink-soft) !important;
  font-size: 14px;
  font-weight: 500;
  vertical-align: middle;
}
.board_paging li a:hover { border-color: var(--brand); color: var(--brand) !important; }
.board_paging li a strong { font-weight: 700; color: inherit; }
/* 현재 페이지(<a><strong>N</strong></a>) 강조 */
.board_paging li a:has(strong) {
  background: var(--brand) !important;
  border-color: var(--brand);
  color: #fff !important;
}
/* 화살표 버튼: 배경 이미지 제거 후 SVG 아이콘(정확히 가운데 정렬) */
.board_paging .first a, .board_paging .prev a,
.board_paging .next a, .board_paging .last a {
  width: auto !important;
  min-width: 36px;
  height: 36px !important;
  padding: 0 !important;
  font-size: 0 !important;                 /* 빈 텍스트/기호 숨김 */
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 18px 18px !important;
}
.board_paging .prev a  { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23777' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 18l-6-6 6-6'/%3E%3C/svg%3E") !important; }
.board_paging .next a  { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23777' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18l6-6-6-6'/%3E%3C/svg%3E") !important; }
.board_paging .first a { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23777' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 17l-5-5 5-5M11 17l-5-5 5-5'/%3E%3C/svg%3E") !important; }
.board_paging .last a  { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23777' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17l5-5-5-5M13 17l5-5-5-5'/%3E%3C/svg%3E") !important; }

/* 채용정보/게시판 리스트 글자 키우기 + 영역 초과 시 말줄임표(...) */
/* 표를 검색박스와 동일한 100% 폭으로. colgroup 의 px 폭을 %(합 100%)로 재정의하면
   table-layout:fixed 에서 표가 정확히 100% 를 채운다. */
.board { width: 100% !important; table-layout: fixed !important; }
.board:not(:has(.stateorder)) col:nth-child(1) { width: 8% !important; }
.board:not(:has(.stateorder)) col:nth-child(2) { width: 60% !important; }
.board:not(:has(.stateorder)) col:nth-child(3) { width: 20% !important; }
.board:not(:has(.stateorder)) col:nth-child(4) { width: 12% !important; }
.board:has(.stateorder) col:nth-child(1) { width: 50% !important; }
.board:has(.stateorder) col:nth-child(2) { width: 22% !important; }
.board:has(.stateorder) col:nth-child(3) { width: 16% !important; }
.board:has(.stateorder) col:nth-child(4) { width: 12% !important; }
.board thead th { font-size: 14px !important; }
.board tbody td { font-size: 14px !important; }
.board td.fixLength {
  overflow: hidden !important;
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
}

/* ===== 모바일(≤600px): 채용정보 리스트는 Position 컬럼만 / 페이징은 화살표만 ===== */
@media (max-width: 600px) {
  /* 채용정보 표(State 컬럼 보유로 식별)에서 Position 외 컬럼 숨김 */
  /* 채용정보(State 컬럼 보유): Position 컬럼만 (100%) */
  .board:has(.stateorder) thead th:nth-child(n+2),
  .board:has(.stateorder) tbody td:nth-child(n+2) { display: none !important; }
  .board:has(.stateorder) col:nth-child(1) { width: 100% !important; }
  .board:has(.stateorder) col:nth-child(n+2) { width: 0 !important; }
  .board:has(.stateorder) thead th:first-child,
  .board:has(.stateorder) tbody td:first-child { text-align: left !important; }
  /* 일반 게시판(State 없음): 번호 + 제목만 */
  .board:not(:has(.stateorder)) thead th:nth-child(n+3),
  .board:not(:has(.stateorder)) tbody td:nth-child(n+3) { display: none !important; }
  .board:not(:has(.stateorder)) col:nth-child(1) { width: 16% !important; }
  .board:not(:has(.stateorder)) col:nth-child(2) { width: 84% !important; }
  .board:not(:has(.stateorder)) col:nth-child(n+3) { width: 0 !important; }
}


/* ===== 검색바(채용정보/게시판)를 깔끔한 패널 + 모던 컨트롤로 ===== */
.default_sub .search {
  float: none !important;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px 16px !important;
  margin-bottom: 18px;
}
.default_sub .search select,
.default_sub .search input[type="text"] {
  height: 40px !important;
  border: 1px solid var(--line) !important;
  border-radius: 8px !important;
  background-color: #fff !important;
  font-size: 14px !important;
  color: var(--ink) !important;
  padding: 0 12px !important;
}
.default_sub .search select {
  width: auto !important;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  padding-right: 32px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 14px;
}
.default_sub .search input[type="text"] {
  flex: 1 1 150px;
  min-width: 120px;
  width: auto !important;
}
.default_sub .search select:focus,
.default_sub .search input[type="text"]:focus {
  outline: none;
  border-color: var(--brand) !important;
  box-shadow: 0 0 0 3px rgba(223,103,20,.12);
}
/* 검색 버튼: 이미지 → 주황 버튼 */
.default_sub .search a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding: 0 22px;
  background: var(--brand) !important;
  color: #fff !important;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
}
.default_sub .search a:hover { background: var(--brand-dark) !important; }
.default_sub .search a img { display: none; }
.default_sub .search a::after { content: "검색"; }

/* ===== 상세 페이지 하단 액션 버튼(인쇄/추천/온라인지원/문의/목록): 이미지 → 텍스트 버튼 =====
   해당 버튼 클래스가 들어있는 .btn 에만 적용 → 다른 페이지의 .btn(저장/취소 등)은 그대로 둠 */
.btn:has(:is(.print, .recomm, .online, .inquiry, .list)) {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  height: auto !important;
  padding-top: 24px !important;
}
/* 좌측 버튼군 없이 '목록' 하나만 있는 경우(게시판 글보기)엔 가운데 정렬 */
.btn:has(.list):not(:has(.btn_left)) { justify-content: center; }
.btn:has(:is(.print, .recomm, .online, .inquiry, .list)) ul {
  display: flex; flex-wrap: wrap; gap: 8px; float: none !important; margin: 0;
}
.btn:has(:is(.print, .recomm, .online, .inquiry, .list)) li {
  float: none !important; padding: 0 !important;
}
.btn :is(.print, .recomm, .online, .inquiry, .list) a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 42px;
  padding: 0 22px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff !important;
  color: var(--ink) !important;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
}
.btn :is(.print, .recomm, .inquiry, .list) a:hover { border-color: var(--brand); color: var(--brand) !important; }
.btn :is(.print, .recomm, .online, .inquiry, .list) a img { display: none !important; }
.btn .print a::after   { content: "인쇄하기"; }
.btn .recomm a::after  { content: "추천하기"; }
.btn .online a::after  { content: "온라인 지원"; }
.btn .inquiry a::after { content: "문의하기"; }
.btn .list a::after    { content: "목록"; }
/* 주요 액션(온라인 지원)은 주황 강조 */
.btn .online a { background: var(--brand) !important; border-color: var(--brand) !important; color: #fff !important; }
.btn .online a:hover { background: var(--brand-dark) !important; color: #fff !important; }

/* 버튼 앞 아이콘 (기능별 SVG) */
.btn :is(.print, .recomm, .online, .inquiry, .list) a::before {
  content: "";
  width: 16px;
  height: 16px;
  margin-right: 7px;
  flex: 0 0 auto;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
.btn .print a::before   { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23555' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9V2h12v7'/%3E%3Cpath d='M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2'/%3E%3Crect x='6' y='14' width='12' height='8'/%3E%3C/svg%3E"); }
.btn .recomm a::before  { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23555' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 10v12'/%3E%3Cpath d='M15 5.88L14 10h5.83a2 2 0 0 1 1.92 2.56l-2.33 8A2 2 0 0 1 17.5 22H4a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2.76a2 2 0 0 0 1.79-1.11L12 2a3.13 3.13 0 0 1 3 3.88z'/%3E%3C/svg%3E"); }
.btn .inquiry a::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23555' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z'/%3E%3C/svg%3E"); }
.btn .list a::before    { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23555' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='8' y1='6' x2='21' y2='6'/%3E%3Cline x1='8' y1='12' x2='21' y2='12'/%3E%3Cline x1='8' y1='18' x2='21' y2='18'/%3E%3Cline x1='3' y1='6' x2='3.01' y2='6'/%3E%3Cline x1='3' y1='12' x2='3.01' y2='12'/%3E%3Cline x1='3' y1='18' x2='3.01' y2='18'/%3E%3C/svg%3E"); }
/* 온라인 지원: 주황 버튼이라 아이콘은 흰색 */
.btn .online a::before  { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='22' y1='2' x2='11' y2='13'/%3E%3Cpolygon points='22 2 15 22 11 13 2 9 22 2'/%3E%3C/svg%3E"); }

/* ============================================================
   모던 모달 (jQuery UI 비종속, 커스텀 CSS/JS)
   ============================================================ */
body.modal-open { overflow: hidden; }
.modal-overlay {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(20,20,25,.5);
  backdrop-filter: blur(2px);
  z-index: 2000;
}
.modal-overlay.is-open { display: flex; }
.modal-box {
  width: 100%;
  max-width: 460px;
  max-height: 90vh;
  overflow-y: auto;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 24px 70px rgba(0,0,0,.32);
  animation: modalIn .2s ease;
}
@keyframes modalIn {
  from { opacity: 0; transform: translateY(12px) scale(.98); }
  to   { opacity: 1; transform: none; }
}
.modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 22px;
  border-bottom: 1px solid var(--line);
}
.modal-head h3 { font-size: 17px; font-weight: 800; color: var(--ink); margin: 0; }
.modal-close {
  width: 34px; height: 34px;
  border: 0;
  background: none;
  font-size: 24px;
  line-height: 1;
  color: var(--muted);
  cursor: pointer;
  border-radius: 8px;
}
.modal-close:hover { background: var(--bg-soft); color: var(--ink); }
.modal-body { padding: 20px 22px; }
.modal-desc { font-size: 13px; color: var(--muted); line-height: 1.6; margin: 0 0 18px; }
.modal-field { margin-bottom: 14px; }
.modal-field label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 6px;
}
.modal-field input[type="text"],
.modal-field input[type="password"] {
  width: 100%;
  height: 42px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: 14px;
  color: var(--ink);
  box-sizing: border-box;
}
.modal-field input[type="text"]:focus,
.modal-field input[type="password"]:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(223,103,20,.12);
}
.modal-links {
  margin: 4px 0 0;
  font-size: 13px;
  text-align: center;
  color: var(--muted);
}
.modal-links a { color: var(--ink-soft) !important; font-weight: 500; }
.modal-links a:hover { color: var(--brand) !important; }
.modal-links .modal-links-sep { margin: 0 8px; color: var(--line); }
/* 문의 모달: 넓게 + 문의내용/파일첨부 */
.modal-box-wide { max-width: 520px; }
.modal-field textarea {
  width: 100%;
  min-height: 120px;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: 14px;
  font-family: inherit;
  color: var(--ink);
  resize: vertical;
  box-sizing: border-box;
}
.modal-field textarea:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(223,103,20,.12);
}
.modal-field input[type="file"] {
  display: block;
  width: 100%;
  font-size: 13px;
  margin-bottom: 6px;
}

/* ===== 회원가입(약관 동의) 페이지: /Candidate/Sub02 ===== */
/* 소제목: 이미지 → 텍스트 */
.candi02_subTlt01, .candi02_subTlt02 {
  width: auto !important;
  height: auto !important;
  background: none !important;
  text-indent: 0 !important;
  font-size: 18px;
  font-weight: 800;
  color: var(--ink);
  margin: 28px 0 12px !important;
}
/* 약관/개인정보 박스: 공통 테두리/여백 */
.privacy_memberbox, .memberbox, .privacy_infobox {
  border: 1px solid var(--line) !important;
  border-radius: 10px;
  padding: 18px 20px !important;
}
/* 전문 박스(이용약관/개인정보)는 전체 내용을 감싸도록 높이 자동
   (table.css 의 height:100% 등 해제 → 내용 넘침/푸터 겹침 방지) */
.memberbox, .privacy_infobox { height: auto !important; }
/* 회원가입의 '동의' 스크롤 박스만 고정 높이(스크롤) */
.privacy_memberbox { height: 320px !important; }
/* 동의 체크박스 영역 */
.agree_memberbox {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 9px;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 13px 16px !important;
  margin-top: 10px;
  font-size: 14px;
  color: var(--ink);
}
.agree_memberbox input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--brand);
  border: 0 !important;
  margin: 0 !important;
  cursor: pointer;
}
/* 회원가입/취소 버튼: 이미지 → 텍스트 */
.btn_center {
  display: flex !important;
  justify-content: center;
  gap: 10px;
  width: auto !important;
  margin: 30px 0 0 !important;
}
.btn_center li { float: none !important; padding: 0 !important; }
.btn_center li a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  padding: 0 26px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--ink) !important;
  font-size: 15px;
  font-weight: 600;
}
.btn_center li a img { display: none !important; }
.btn_center .candi_join a { background: var(--brand) !important; border-color: var(--brand) !important; color: #fff !important; }
.btn_center .candi_join a:hover { background: var(--brand-dark) !important; }
.btn_center .cancel a:hover { border-color: var(--brand); color: var(--brand) !important; }
.btn_center .candi_join a::after { content: "회원가입하기"; }
.btn_center .cancel a::after { content: "취소"; }
/* 버튼 앞 아이콘 */
.btn_center .candi_join a::before,
.btn_center .cancel a::before {
  content: "";
  width: 16px;
  height: 16px;
  margin-right: 7px;
  flex: 0 0 auto;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
/* 회원가입하기(주황 버튼): 흰색 사용자추가 아이콘 */
.btn_center .candi_join a::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cline x1='19' y1='8' x2='19' y2='14'/%3E%3Cline x1='22' y1='11' x2='16' y2='11'/%3E%3C/svg%3E"); }
/* 취소(흰 버튼): 회색 X 아이콘 */
.btn_center .cancel a::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23555' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3C/svg%3E"); }

/* ===== 입력 폼(.write_form) 현대화: 이력서 등록/수정 등 ===== */
/* 소제목 이미지 → 텍스트 */
.candi02_01_subTlt01, .candi02_01_subTlt02, .candi02_01_subTlt03 {
  width: auto !important; height: auto !important;
  background: none !important; text-indent: 0 !important;
  font-size: 18px; font-weight: 800; color: var(--ink);
  margin: 30px 0 12px !important;
}
.write_form {
  width: 100% !important;
  border-collapse: collapse;
  border-top: 2px solid var(--ink) !important;
  font-size: 14px !important;
  margin-bottom: 8px;
}
.write_form td {
  padding: 11px 14px !important;
  border-bottom: 1px solid var(--line) !important;
  vertical-align: middle;
  line-height: 1.7 !important;
  color: var(--ink-soft) !important;
}
.write_form .item, .write_form .first_item,
.write_form .last_item, .write_form .import,
.write_form .first_import_item, .write_form .last_import_item {
  background: var(--bg-soft) !important;
  font-weight: 600;
  color: var(--ink) !important;
  white-space: nowrap;
}
/* 필수 항목 라벨에 주황 * 표시 */
.write_form .import::after,
.write_form .first_import_item::after,
.write_form .last_import_item::after { content: " *"; color: var(--brand); }
.write_form input[type="text"],
.write_form input[type="password"] {
  height: 38px !important;
  padding: 0 12px !important;
  border: 1px solid var(--line) !important;
  border-radius: 8px !important;
  font-size: 14px !important;
  color: var(--ink);
  max-width: 100%;
  box-sizing: border-box;
  vertical-align: middle;
}
.write_form input[type="text"]:focus,
.write_form input[type="password"]:focus {
  outline: none;
  border-color: var(--brand) !important;
  box-shadow: 0 0 0 3px rgba(223,103,20,.12);
}
.write_form select {
  height: 38px !important;
  width: auto !important;
  padding: 0 30px 0 12px !important;
  border: 1px solid var(--line) !important;
  border-radius: 8px !important;
  font-size: 14px !important;
  -webkit-appearance: none; appearance: none;
  background-color: #fff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 14px;
  vertical-align: middle;
  cursor: pointer;
}
.write_form input[type="radio"] {
  accent-color: var(--brand);
  width: 16px; height: 16px;
  margin: 0 4px 0 2px;
  border: 0 !important;
  vertical-align: middle;
  cursor: pointer;
}
.write_form label { margin-right: 12px; cursor: pointer; }
.write_form input[type="button"] {
  height: 38px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  vertical-align: middle;
}
.write_form input[type="button"]:hover { border-color: var(--brand); color: var(--brand); }
.write_form input[type="file"] { height: auto !important; padding: 8px 0; font-size: 13px; max-width: 100%; }
.write_form .filedelete a { color: var(--brand) !important; font-weight: 600; }
/* 인증번호(캡차) 숫자 강조 */
.authcode-num {
  display: inline-block;
  font-weight: 800;
  font-size: 16px;
  letter-spacing: 2px;
  color: var(--brand);
  background: var(--brand-soft);
  padding: 2px 10px;
  border-radius: 6px;
  vertical-align: middle;
}

/* 모바일: write_form 의 4열(라벨/입력/라벨/입력) 행을 세로 1열로 쌓기
   → 비밀번호/비밀번호확인 등이 좁게 겹치지 않고 한 항목씩 표시된다 */
@media (max-width: 600px) {
  .write_form, .write_form tbody, .write_form tr, .write_form td {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box;
  }
  .write_form colgroup { display: none !important; }
  .write_form tr {
    border-bottom: 1px solid var(--line) !important;
    padding: 4px 0;
  }
  .write_form td { border-bottom: 0 !important; padding: 6px 12px !important; }
  /* 라벨 셀: 입력칸 위 작은 제목처럼 표시 */
  .write_form .item, .write_form .first_item, .write_form .last_item,
  .write_form .import, .write_form .first_import_item, .write_form .last_import_item {
    background: transparent !important;
    color: var(--brand-dark) !important;
    font-weight: 700;
    padding-bottom: 2px !important;
  }
  /* 입력칸 풀폭(작은 숫자칸 제외) */
  .write_form input[type="text"]:not(.num_only),
  .write_form input[type="password"],
  .write_form select { width: 100% !important; }
  .write_form input.num_only { width: 60px !important; }
}

/* ===== ID/비밀번호 찾기: /Candidate/Sub04 ===== */
.findPasswordArea {
  max-width: 560px;
  width: auto !important;
  height: auto !important;
  background: none !important;   /* 원래 배경 이미지(글자 포함) 제거 */
  margin: 12px auto 0;
}
.idpw-title { font-size: 22px; font-weight: 800; color: var(--ink); margin: 6px 0 10px; letter-spacing: 1px; }
.idpw-desc { font-size: 14px; color: var(--ink-soft); line-height: 1.7; margin-bottom: 20px; }
.idpw-form {
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 24px;
}
.idpw-row { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.idpw-row label { flex: 0 0 84px; font-weight: 600; color: var(--ink); font-size: 14px; }
.idpw-row .req { color: var(--brand); }
.idpw-row input[type="text"],
.idpw-row input[type="password"] {
  flex: 1 1 auto;
  width: auto !important;       /* sub.css .login_input width:200px 해제 */
  height: 42px !important;      /* sub.css .login_input height:20px 해제 */
  margin: 0 !important;
  padding: 0 14px !important;
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: 14px;
  box-sizing: border-box;
}
.idpw-row input[type="text"]:focus,
.idpw-row input[type="password"]:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(223,103,20,.12); }
.idpw-authcode { flex: 1 1 auto; display: flex; align-items: center; gap: 10px; }
.idpw-authcode input { flex: 0 0 140px; }
.idpw-btns { margin-top: 18px; text-align: center; }
.idpw-note { font-size: 13px; color: var(--muted); margin-top: 16px; text-align: center; line-height: 1.6; }
@media (max-width: 520px) {
  .idpw-row { flex-wrap: wrap; }
  .idpw-row label { flex-basis: 100%; }
}
/* 하단 버튼 (텍스트 버튼) */
.btn:has(.btn-form) {
  display: flex;
  justify-content: center;
  height: auto !important;
  padding-top: 30px !important;
}
.btn:has(.btn-form) ul { display: flex; gap: 10px; float: none !important; margin: 0; }
.btn:has(.btn-form) li { float: none !important; padding: 0 !important; }
.btn-form {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 46px;
  padding: 0 30px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--ink) !important;
  font-size: 15px;
  font-weight: 600;
}
.btn-form:hover { border-color: var(--brand); color: var(--brand) !important; }
.btn-form-primary { background: var(--brand) !important; border-color: var(--brand) !important; color: #fff !important; }
.btn-form-primary:hover { background: var(--brand-dark) !important; color: #fff !important; }
/* 버튼 앞 아이콘 */
.btn-form::before {
  content: "";
  width: 16px;
  height: 16px;
  margin-right: 8px;
  flex: 0 0 auto;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
/* 가입하기/수정하기(주황 버튼): 흰색 체크 아이콘 */
.btn-form-primary::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E"); }
/* 취소(흰 버튼): 회색 X 아이콘 */
.btn-form:not(.btn-form-primary)::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23555' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3C/svg%3E"); }
/* 이력서 등록 버튼: 흰색 편집(연필) 아이콘 */
.btn-resume::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7'/%3E%3Cpath d='M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z'/%3E%3C/svg%3E") !important; }
.modal-foot {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 16px 22px 22px;
}
.btn-modal {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 42px;
  padding: 0 22px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink) !important;
}
.btn-modal:hover { border-color: var(--brand); color: var(--brand) !important; }
.btn-modal-primary { background: var(--brand) !important; border-color: var(--brand) !important; color: #fff !important; }
.btn-modal-primary:hover { background: var(--brand-dark) !important; color: #fff !important; }

/* ===== 사이트맵(전체메뉴) 페이지 — 중복 좌측메뉴 숨기고 전체폭 3단 그리드 ===== */
.cont:has(.content_sitemap) { grid-template-columns: 1fr !important; }
.cont:has(.content_sitemap) .leftArea { display: none !important; }
.content_sitemap {
  position: static !important;
  height: auto !important;
  margin-top: 8px !important;
  display: grid;
  grid-template-columns: repeat(3, 1fr);   /* 6개 → 3열 2행 */
  gap: 28px 32px;
}
.content_sitemap [class^="siteMu"] {
  position: static !important;             /* sub.css 의 absolute 고정좌표 해제 */
  left: auto !important; top: auto !important;
  width: auto !important;
}
.content_sitemap h4.tlt { height: auto !important; }
.content_sitemap ul { margin: 0; padding: 0; }
.content_sitemap li a { color: var(--ink-soft) !important; }
@media (max-width: 760px) { .content_sitemap { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px) { .content_sitemap { grid-template-columns: 1fr; } }

/* ===== About/Sub02 (CEO 인사말): 합본 이미지에서 CEO 사진·사인만 잘라 표시 ===== */
.page_contents_about02 .ceo-photo {
  float: right;
  width: 242px;
  height: 340px;
  margin: 2px 0 14px 28px;
  /* 사진은 합본 이미지의 우상단 모서리에 위치 → right top 기준으로 안정적으로 크롭 */
  background: url(../images/sub/contents_about_sub02.jpg) no-repeat right top;
  border-radius: 8px;
  box-shadow: var(--shadow-soft);
}
/* CEO 서명 블록: 텍스트 2줄(대표이사 사장 / 이메일) 우측에 사인 배치, 전체 우측 정렬 */
.page_contents_about02 .ceo-signoff {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 14px;
  clear: both;
  margin-top: 36px;          /* 윗줄 여백 더 넓게 */
  text-align: right;
}
.page_contents_about02 .ceo-signoff-text p { margin: 2px 0 !important; }
.page_contents_about02 .ceo-sign {
  flex: 0 0 auto;
  display: inline-block;
  width: 135px;
  height: 57px;
  /* 사인을 1.3배 확대 — 배경 크기/위치도 동일 비율(×1.3)로 확대 */
  background: url(../images/sub/contents_about_sub02.jpg) no-repeat -785px -746px;
  background-size: 939px auto;
}
@media (max-width: 600px) {
  .page_contents_about02 .ceo-photo { float: none; display: block; margin: 0 0 16px; }
}

/* ===== About/Sub03 (비전): 합본 이미지 하단의 "3개 원" 다이어그램만 잘라 반응형 표시 =====
   다이어그램은 합본(722px 폭)의 맨 아래에 있음 → bottom 기준 크롭 + aspect-ratio 로 크기 대응 */
.page_contents_about03 .vision-diagram {
  display: block;
  width: 100%;
  max-width: 660px;
  aspect-ratio: 722 / 262;
  margin: 28px auto 4px;
  background: url(../images/sub/contents_about_sub03.jpg) no-repeat center bottom;
  background-size: 100% auto;
}

/* ===== HeadHunting/Sub05 (아웃플레이스먼트): 합본 하단의 다이어그램만 잘라 반응형 표시 ===== */
.page_contents_client05 .outplacement-diagram {
  display: block;
  width: 100%;
  max-width: 700px;
  aspect-ratio: 722 / 480;
  margin: 24px auto 4px;
  background: url(../images/sub/contents_client_sub05.jpg) no-repeat center bottom;
  background-size: 100% auto;
}

/* ===== About/Sub05 (찾아 오시는 길): 주소/안내 표를 이미지 대신 실제 텍스트로 노출 ===== */
.page_contents_about05 .infoBox {
  width: 100% !important;
  height: auto !important;
  background: none !important;     /* contents_about_sub05.png 이미지 제거 */
  text-indent: 0 !important;       /* 숨겨졌던 텍스트 노출 */
  font-size: 14px !important;      /* font-size:0 → 정상 */
}
.page_contents_about05 .map { display: block; margin: 0 0 24px; overflow-x: auto; }
.page_contents_about05 .root_daum_roughmap { max-width: 100%; }

/* ============================================================
   푸터
   ============================================================ */
#footer {
  height: auto !important;
  position: static !important;
  border-top: 1px solid var(--line) !important;
  background: var(--bg-soft);
  margin-top: 40px;
  /* 배경은 전체 폭, 안쪽 콘텐츠는 980px 중앙 정렬 */
  padding: 28px max(24px, calc((100% - 980px) / 2));
  /* 좌측 로고 | 우측 칼럼(메뉴 위 / 주소 아래) */
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 36px;
  row-gap: 14px;
  align-items: start;
}
#footer > * { max-width: none; margin: 0; }
.logo_footer {
  position: static !important;
  grid-column: 1;
  grid-row: 1 / span 2;     /* 로고는 좌측에서 두 줄 높이를 차지 */
  align-self: start;
  margin: 0;
}
.logo_footer img { height: 44px; width: auto; }
.footerMu {
  position: static !important;
  left: auto !important; top: auto !important;
  grid-column: 2;           /* 우측 칼럼 윗줄 */
  grid-row: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 0;
  margin: 0;
}
.footerMu li {
  float: none !important;
  background: none !important;
  padding: 0 16px !important;
  border-right: 1px solid var(--line);
}
.footerMu li:last-child { border-right: 0; }
/* 푸터 메뉴 링크: 이미지 → 텍스트 */
.footerMu li a {
  display: inline-block !important;
  background: none !important;
  width: auto !important;
  height: auto !important;
  text-indent: 0 !important;
  font-size: 13px;
  color: var(--ink-soft) !important;
}
/* 주소: 이미지 배경 제거하고 실제 텍스트 노출, 로고/메뉴 아래 줄 전체폭 */
.copyright {
  position: static !important;
  left: auto !important; top: auto !important;
  grid-column: 2;           /* 우측 칼럼 아랫줄 (메뉴 아래, 로고 우측) */
  grid-row: 2;
  width: auto !important;
  height: auto !important;
  background: none !important;
  text-indent: 0 !important;
  font-size: 12.5px !important;
  font-style: normal;
  color: var(--muted);
  line-height: 1.7;
  margin-top: 4px;
}

/* ============================================================
   반응형 — 태블릿/모바일 (≤ 1024px): 햄버거 메뉴 + 세로 스택
   ※ 터치 기기에서 데스크탑 hover 드롭다운(절대위치)이 본문 위에 겹치는 문제를 막기 위해,
      콘텐츠가 세로로 쌓이는 1024px 부터 햄버거(아코디언) 메뉴로 전환한다.
   ============================================================ */
@media (max-width: 1024px) {
  :root { --header-h: 64px; }

  /* 모바일 헤더는 불투명하게(메뉴 펼침 시 본문이 비쳐 겹쳐 보이는 현상 방지) */
  #header { padding: 0 16px; gap: 0 12px; background: #fff !important; backdrop-filter: none !important; }
  /* 햄버거 버튼은 우측 끝으로 */
  .nav-toggle { margin-left: auto; }
  /* 펼친 메뉴 패널도 불투명 보장 */
  #wrapper.nav-open .gnb { background: #fff; }
  #header .logo img { height: 32px; }
  .nav-toggle { display: flex; }

  /* 상단 유틸 메뉴: 모바일에선 주황 바가 아니라 토글 패널 안으로 (절대배치/색 해제) */
  .infoMu {
    position: static !important;
    top: auto; left: auto; right: auto;
    order: 5;
    width: 100%;
    flex-wrap: wrap;
    gap: 4px;
    background: none;
    justify-content: flex-start;
    padding: 8px 4px 14px;
    border-top: 1px solid var(--line);
    margin: 4px 0 0;
    display: none;
  }
  #wrapper.nav-open .infoMu { display: flex; }
  .infoMu li a { color: var(--ink-soft) !important; }   /* 패널에선 어두운 글자 */
  .infoMu li::after { background: var(--line); }         /* 구분선 회색 */
  .infoMu li.totalMu a { border-color: var(--line); }    /* 전체메뉴 박스 회색 테두리 */

  /* GNB: 전체폭 세로 패널.
     ※ 기본(데스크탑) .gnb 의 width:auto !important / overflow:visible !important 를
        이기려면 모바일에서도 !important 가 필요하다(안 그러면 접히지 않고 삐져나옴). */
  .gnb {
    order: 6;
    width: 100% !important;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;   /* 데스크탑의 가운데정렬을 세로 메뉴에선 해제 */
    gap: 0;
    max-height: 0 !important;
    overflow: hidden !important;
    transition: max-height .3s ease;
  }
  #wrapper.nav-open .gnb { max-height: 80vh !important; overflow-y: auto !important; }

  .gnb > li { border-top: 1px solid var(--line); }
  .gnb > li > a { padding: 16px 6px !important; font-size: 16px; }
  .gnb > li > a::after { display: none; }

  /* 모바일에선 드롭다운을 항상 펼친 아코디언 형태로 */
  .bg_subMu {
    position: static !important;
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    width: 100% !important;
    min-width: 0;
    border: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: 0 0 10px !important;
    background: var(--bg-soft);
  }
  .bg_subMu li a { padding: 11px 22px !important; font-size: 14px; }

  /* 콘텐츠 */
  #contents { padding: 0 16px; }
  .visual_main { margin: 0 auto 16px; height: 200px !important; background-size: cover !important; }
  .cont { gap: 16px; margin-bottom: 40px !important; }
  .cont .quick, .cont .quick2, .cont .open { flex: 1 1 100%; max-width: 100%; }

  /* 푸터: 좁은 화면에선 세로로 쌓기 */
  #footer { display: flex; flex-direction: column; align-items: flex-start; row-gap: 12px; padding: 24px 16px; }
  .logo_footer { order: 1; }
  .footerMu { order: 2; }
  .copyright { order: 3; }

  /* 서브 페이지: 좌측메뉴를 상단 가로 스크롤로 */
  .cont:has(.leftArea) {
    grid-template-columns: 1fr;
    gap: 22px;
    margin: 24px auto 48px !important;
  }
  .visual_about, .visual_job, .visual_candidate,
  .visual_client, .visual_custom, .visual_my, .visual_site {
    height: 150px !important; background-size: cover !important;
  }
  .leftMu ul[class^="leftMu_"] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }
  .leftMu li a {
    border: 1px solid var(--line) !important;
    border-radius: 999px;
    padding: 8px 16px !important;
  }
  .page_contents dl { grid-template-columns: 1fr; }
  .page_contents dt { border-bottom: 0; }
}

@media (max-width: 480px) {
  body { font-size: 14px; }
  .visual_about, .visual_job, .visual_candidate,
  .visual_client, .visual_custom, .visual_my, .visual_site { height: 120px !important; }
  [class^="pageTlt"] { font-size: 22px; }
  .page_contents h4 { font-size: 18px; }
}

/* 앵커(#id) 점프 시 sticky 헤더에 가려지지 않도록 스크롤 여백 확보(사이트 공통) */
html { scroll-padding-top: calc(var(--header-h) + 8px); }

/* ============================================================
   FAQ (/Client/Sub07) — 이미지 타이틀 텍스트화 + 모던 질문목록/Q&A
   ============================================================ */
/* 상단 안내 문구: sub.css 의 text-indent:-9999px + 고정높이 40px 이미지로
   첫 줄이 잘려 깨져 보이던 것을 실제 텍스트로 노출 */
.subTlt_custom_sub07 {
  display: block !important;
  width: auto !important;
  height: auto !important;
  background: none !important;
  text-indent: 0 !important;
  font-size: 15px !important;
  line-height: 1.7 !important;
  color: #555 !important;
  margin: 4px 0 24px !important;
}

/* FAQ 영역 폭 반응형 (sub.css 의 width:722px 해제) */
.faqArea { width: auto !important; margin-top: 24px !important; }

/* 질문 목록(앵커 점프) — 카드형 */
.faqList {
  border: 1px solid var(--line) !important;
  border-radius: 10px;
  overflow: hidden;
  background: var(--brand-soft);
}
.faqList li {
  height: auto !important;
  padding: 12px 16px !important;
  border-bottom: 1px solid #f1e3d6 !important;
  color: var(--ink) !important;
  font-weight: 600;
  font-size: 14px;
  line-height: 1.5;
}
.faqList li:last-child { border-bottom: 0 !important; }
.faqList li a { color: var(--ink) !important; margin-left: 8px !important; text-decoration: none; }
.faqList li a:hover { color: var(--brand) !important; text-decoration: underline; }

/* 질문/답변 테이블 — 깔끔한 구분선 + 주황 번호 */
table.faq_form {
  margin-top: 36px !important;
  border-top: 2px solid var(--ink) !important;
  border-bottom: 1px solid var(--line) !important;
}
table.faq_form tbody td { padding: 14px 10px !important; line-height: 1.7 !important; }
table.faq_form tbody .ask,
table.faq_form tbody .line { border-top: 1px solid var(--line) !important; }
table.faq_form tbody .ask {
  background: transparent !important;
  color: var(--brand) !important;
  font-weight: 800; font-size: 16px;
  text-align: center !important; vertical-align: top;
}
table.faq_form tbody .line {
  background: transparent !important;
  color: var(--ink) !important;
  font-weight: 700; font-size: 15px;
}
table.faq_form tbody .answer { color: #575757 !important; }
table.faq_form tbody td a { color: var(--ink) !important; }
table.faq_form tbody .line a:hover { color: var(--brand) !important; }

/* ============================================================
   로그인 (/MyPage/Login) — 배경이미지 폼 → 텍스트 입력/아이콘 버튼
   ============================================================ */
/* sub.css 의 고정폭/배경이미지(bg_loginArea.jpg) 해제 → idpw-form 으로 표현 */
.loginArea {
  width: auto !important;
  height: auto !important;
  background: none !important;
  position: static !important;
  margin: 12px auto 40px !important;
  max-width: 560px;
}
.loginArea .idpw-form { margin-top: 4px; }

/* 하단 보조 링크(회원가입 / 비밀번호 찾기) */
.login-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 12px 24px;
  margin-top: 24px;
  padding: 0;
  list-style: none;
}
.login-links li {
  display: flex;
  align-items: center;
  gap: 10px;
  float: none !important;     /* sub.css .btn_group li float 해제 */
  margin: 0 !important;
}
.login-links li span { display: inline !important; font-size: 13px; color: var(--muted); }
.login-links .btn-form { height: 40px; padding: 0 20px; font-size: 14px; }

/* 버튼 아이콘 — 기본 X/체크 아이콘을 용도별 아이콘으로 교체 */
/* 로그인(주황): 로그인 화살표 아이콘 */
.btn-login::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4'/%3E%3Cpolyline points='10 17 15 12 10 7'/%3E%3Cline x1='15' y1='12' x2='3' y2='12'/%3E%3C/svg%3E") !important;
}
/* 회원가입(흰): 사용자+ 아이콘 */
.btn-join::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23555' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cline x1='19' y1='8' x2='19' y2='14'/%3E%3Cline x1='22' y1='11' x2='16' y2='11'/%3E%3C/svg%3E") !important;
}
/* 비밀번호 찾기(흰): 열쇠 아이콘 */
.btn-findpw::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23555' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='7.5' cy='15.5' r='5.5'/%3E%3Cpath d='m21 2-9.6 9.6'/%3E%3Cpath d='m15.5 7.5 3 3L22 7l-3-3'/%3E%3C/svg%3E") !important;
}

/* ============================================================
   회원탈퇴 (/MyPage/Delete) — 배경이미지 → 텍스트 안내 + 아이콘 버튼
   ============================================================ */
/* sub.css 의 display:none / 배경이미지(bg_secessionArea.jpg) 해제 */
.tlt_secession {
  display: block !important;
  font-size: 20px;
  font-weight: 800;
  color: var(--ink);
  margin: 6px 0 16px !important;
}
.secession_area {
  width: auto !important;
  height: auto !important;
  background: none !important;
  position: static !important;
}
.secession-notice {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--bg-soft);
  padding: 24px;
  margin-bottom: 24px;
}
.secession-notice > p { font-size: 15px; color: var(--ink); margin: 0 0 12px; }
.secession-notice ul { margin: 0 0 12px; padding-left: 20px; }
.secession-notice li { font-size: 14px; color: var(--ink-soft); line-height: 1.85; list-style: disc; }
.secession-confirm { color: var(--brand-dark) !important; font-weight: 600; margin-bottom: 0 !important; }
/* 버튼 영역: 절대배치 해제 → 가운데 정렬 */
.secession_area .my_btn {
  position: static !important;
  left: auto !important; top: auto !important;
  display: flex;
  justify-content: center;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.secession_area .my_btn li { float: none !important; margin: 0 !important; list-style: none; }
/* 위험(빨강) 버튼 변형 */
.btn-form-danger { background: #d64545 !important; border-color: #d64545 !important; color: #fff !important; }
.btn-form-danger:hover { background: #b83333 !important; border-color: #b83333 !important; color: #fff !important; }
/* 회원탈퇴(빨강): 흰색 휴지통 아이콘 */
.btn-secession::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='3 6 5 6 21 6'/%3E%3Cpath d='M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2'/%3E%3Cline x1='10' y1='11' x2='10' y2='17'/%3E%3Cline x1='14' y1='11' x2='14' y2='17'/%3E%3C/svg%3E") !important;
}

/* ============================================================
   초기화면 Notice 팝업 (Partial/Popup) — 배경이미지/이미지버튼 → 모던 카드
   pop.css 의 고정폭·배경이미지 박스를 깔끔한 카드로 덮어쓴다.
   ============================================================ */
#popup {
  width: 380px !important;
  max-width: 92vw;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 14px 44px rgba(0,0,0,.22);
  overflow: hidden;
  color: var(--ink-soft) !important;
  font-family: inherit !important;
  font-size: 14px !important;
  box-sizing: border-box;
}
/* 상단: 둥근 박스 이미지 → 주황 액센트 바 */
.popup_top {
  width: auto !important;
  height: 8px !important;
  background: var(--brand) !important;
}
.popup_bottom { display: none !important; }
/* 본문 영역 배경이미지 제거 + 여백 */
.popup_contents {
  width: auto !important;
  height: auto !important;
  padding: 22px 24px 24px !important;
  background: none !important;
  box-sizing: border-box;
}
.popup_cont { width: auto !important; height: auto !important; }
.popup_cont h2 { font-size: 18px; font-weight: 800; color: var(--ink); margin: 0 0 10px; line-height: 1.4; }
.popup_cont p { margin: 0; line-height: 1.7; color: var(--ink-soft); }
/* 하단 버튼 영역: 절대배치 해제 → 좌(체크)/우(버튼) 정렬 */
.popup_btn {
  width: auto !important;
  height: auto !important;
  position: static !important;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
.popup_btn_group {
  position: static !important;
  left: auto !important; top: auto !important;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none;
}
.popup_btn_group li { float: none !important; margin: 0 !important; list-style: none; }
.popup_check_today label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--muted);
  cursor: pointer;
}
.popup_check_today input[type="checkbox"] {
  accent-color: var(--brand);
  width: 15px; height: 15px;
  margin: 0;
  cursor: pointer;
}
.popup_actions { display: flex; gap: 8px; }
.popup-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 38px;
  padding: 0 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--ink) !important;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}
.popup-btn:hover { border-color: var(--brand); color: var(--brand) !important; }
.popup-btn-more { background: var(--brand) !important; border-color: var(--brand) !important; color: #fff !important; }
.popup-btn-more:hover { background: var(--brand-dark) !important; color: #fff !important; }