@charset "utf-8";
/* ═══════════════════════════════════════════
   hr.css — hr.php(인적자원) 전용 스타일
   공통 영역(reset/root/body/sub-nav/page-title/breadcrumb)은
   style.css + page-common.css 에 있으므로 여기서는 재정의하지 않습니다.
═══════════════════════════════════════════ */

/* ⚙ 이 페이지만 breadcrumb 여백이 공통값(page-common.css)과 달라서 오버라이드 */
.breadcrumb { padding-bottom: 70px; }
.breadcrumb-bar::after { margin-bottom: 60px; }

/* ══════════════════════════
   hr SECTION 
══════════════════════════ */
/* ── CARDS GRID ── */
.cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  padding: 0 48px 64px;
}

.card {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: var(--white);
  border: 1px solid var(--gray-200);
  padding: 32px 20px 28px;
  transition: box-shadow 0.25s, border-color 0.25s;
}

.card:hover {
  border-color: #e2e2e2;
  box-shadow: 0 6px 24px rgba(169,169,169,0.08);
}

.card-img {
  width: 120px;
  height: 120px;
  object-fit: contain;
  display: block;
  margin-bottom: 12px;
}

.card:hover .card-img {
  transform: scale(1.05);
  transition: transform 0.2s ease;
}

.icon-line {
  width: 1px;
  height: 20px;
  background: var(--gray-200);
  margin-bottom: 14px;
}

.card-label {
  background: #004e9e;
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.06em;
  padding: 6px 22px;
  border-radius: 20px;
  margin-bottom: 30px;
}

.card-subtitle {
  font-size: 18px;
  font-weight: 700;
  color: var(--red);
  text-align: left;
  width: 100%;
  margin-bottom: 14px;
  line-height: 1.5;
}

.card-body {
  list-style: none;
  font-size: 14px;
  color: var(--gray-700);
  line-height: 1.75;
  width: 100%;
  text-align: left;
  margin-bottom: 15px;
}

.card-body li {
  position: relative;
  padding-left: 12px;
  margin-bottom: 6px;
}

.card-body li::before {
  content: '·';
  position: absolute;
  left: 0;
  color: var(--red);
  font-weight: 900;
  font-size: 15px;
  line-height: 1.6;
}

.card-body li.no-dot {
  padding-left: 0;
}

.card-body li.no-dot::before {
  display: none;
}


/* 🎯 ══════════════════════════
   RESPONSIVE iPad (≤ 1024px)
   여기서 상하 간격 및 누적 여백을 꼼꼼히 줄였습니다.
══════════════════════════ */
@media (max-width: 1024px) {
  .sub-nav { top: 76px; }
  .sub-nav-inner {
    justify-content: flex-start;
    overflow-x: auto;
    padding: 0 16px; 
    scrollbar-width: none;
  }
  .sub-nav-inner::-webkit-scrollbar { display: none; }
  .sub-nav-inner a { padding: 0 20px; font-size: 14px; }
  .sub-nav-inner a::before { display: none; } 

  .breadcrumb-bar::after {
    margin: 0 auto 30px;
  }
  .chart { padding: 76px 0 0px;}
 
  /* ── iPad 격자 상하 간격 조절 ── */
  .cards { 
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;            /* 🎯 카드 간의 상하좌우 여백 축소 (24px -> 16px) */
    padding: 0 24px 32px; /* 🎯 전체 감싸는 판넬 하단 여백 축소 */
  }

  /* ── iPad 전용 카드 내부 여백 및 구성요소 긴 간격 좁히기 ── */
  .card {
    padding: 24px 16px 16px; /* 🎯 카드 박스 자체의 위아래 패딩 밀도를 좁힘 */
  }
  
  .card-img {
    width: 100px;         /* 🎯 화면 효율을 위해 아이콘 크기도 약간 최적화 */
    height: 100px;
    margin-bottom: 10px;  /* 🎯 아이콘 밑 공백 축소 */
  }

  .icon-line {
    height: 12px;         /* 🎯 중간 세로 구분선 길이 축소 */
    margin-bottom: 10px;  /* 🎯 구분선 밑 공백 축소 */
  }

  .card-label {
    margin-bottom: 16px;  /* 🎯 파란색 라벨 뱃지 하단 공백 절반으로 축소 (30px -> 16px) */
  }

  nav, .breadcrumb, .page-hero, .section-head { 
    padding-left: 24px; 
    padding-right: 24px; 
  }
  .banner { 
    margin: 0 24px; 
    margin-top: 28px; 
    padding: 40px 32px; 
  }

  /* Footer */
  footer { padding: 36px 24px 20px !important; width: 100% !important; box-sizing: border-box !important; }
  .footer-inner { width: 100% !important; max-width: 100% !important; padding: 0 28px; box-sizing: border-box !important; }
  .footer-top { flex-direction: column; gap: 20px; }
  .footer-bottom {padding-top: 6px;}
} 


/* ══════════════════════════════
    RESPONSIVE Mobile (≤ 768px)
══════════════════════════════ */
@media (max-width: 768px) {
  /* 1. 메뉴바 전체를 화면 폭에 100% 꽉 채우고 넘치는 요소 숨김 */
  body .sub-nav { 
    top: 52px !important; 
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
    padding: 0 !important;
    margin-bottom: 40px !important; /* 아래 콘텐츠와의 여백 살짝 최적화 */
  }
  
  /* 2. 🌟 중요: 가운데 정렬을 풀고 왼쪽(flex-start)부터 완전히 꽉 차게 정렬 */
  body .sub-nav-inner {
    display: flex !important;
    flex-wrap: nowrap !important;           /* 강제로 한 줄 정렬 */
    justify-content: flex-start !important; /* 🎯 양 끝 빨간 여백을 완전히 제거하는 핵심 코드 */
    overflow-x: auto !important;             /* 우측으로 넘치는 메뉴 가로 스크롤 활성화 */
    -webkit-overflow-scrolling: touch !important; /* 모바일 부드러운 스크롤 */
    padding: 0 4px !important;              /* 컨테이너 자체의 불필요한 내부 여백 제거 */
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 52px !important;
    scrollbar-width: none !important;        /* 스크롤바 숨기기 (파이어폭스) */
  }
  
  /* 크롬, 사파리 모바일 스크롤바 완전히 숨기기 */
  body .sub-nav-inner::-webkit-scrollbar { 
    display: none !important; 
  }
  
  /* 3. 메뉴 글자가 박스 폭에 의해 찌그러지거나 줄바꿈되는 현상 절대 방지 */
  body .sub-nav-inner li {
    flex-shrink: 0 !important;
    width: auto !important;
  }

  /* 모바일 화면 폭을 갉아먹는 기존 세로 구분선 세밀하게 지우기 */
  body .sub-nav-inner li + li::before {
    display: none !important;
  }

  /* 4. PC 버전의 넓은 비대칭 패딩(28px, 36px)을 지우고 촘촘한 여백으로 균등 초기화 */
  body .sub-nav-inner a { 
    display: block !important;
    padding: 0 16px !important;            /* 🎯 글자 간격을 촘촘하게 붙여 밸런스 유지 */
    font-size: 14px !important; 
    white-space: nowrap !important;        /* 단어 줄바꿈 금지 */
    line-height: 52px !important;
    height: 52px !important;
  }

  /* 모바일에서는 텍스트 왼쪽 상단의 흰색 점 요소를 강제로 제거 */
  body .sub-nav-inner a::before {
    display: none !important;
  }

  /* ── 이하 기존 타이틀 / 푸터 코드 그대로 유지 ── */
  .page-title-block { padding: 60px 0 0; }
  .page-title-block h1 { font-size: 24px; }
  .title h4 { font-size: 60px; }
  
  .breadcrumb {
    display: block; 
    text-align: center;
    font-size: 14px;
    padding-bottom: 60px; 
    line-height: 1.8;
    word-wrap: break-word; 
  }
  .breadcrumb a, 
  .breadcrumb span { display: inline; }

  footer { padding: 28px 16px 16px !important; }
  .footer-top { flex-direction: column; gap: 16px; }
  .footer-info { font-size: 16px; color: var(--text); line-height: 2; }
  .footer-bottom { flex-direction: column; align-items: flex-start; gap: 12px; }
  .footer-inner { padding: 0 14px; }
  .footer-family { margin-top: 20px; }
}

/* ══════════════════════════
   RESPONSIVE Small Mobile (≤ 560px)
══════════════════════════ */
@media (max-width: 560px) {
  .cards { grid-template-columns: 1fr; gap: 16px; }
}

/* ══════════════════════════
   RESPONSIVE Micro Mobile (≤ 390px)
══════════════════════════ */
@media (max-width: 390px) {
  .footer-links { gap: 10px; }
  .footer-links a { font-size: 11px; }
}