/* 퍼스트그룹 — 보안·경호 기업 테마
   맨 마지막에 로드된다. 디자인 토큰을 재정의하므로 메뉴·페이지·메인 전체에 일관 적용된다.
   방향: 권위 있는 딥네이비 + 강철 그레이, 인증·수상을 상징하는 브론즈 액센트,
        각진 모서리(정밀·보안), 대문자 레터스페이싱 라벨. */

:root {
  --c-bg:        #ffffff;
  --c-fg:        #0e1420;   /* 차가운 먹색 */
  --c-muted:     #59626f;
  --c-line:      #d9dee6;
  --c-line-2:    #f3f5f8;
  --c-primary:   #2a166f;   /* 딥네이비 — 신뢰·권위 */
  --c-primary-2: #3d2996;
  --c-accent:    #b0863a;   /* 브론즈 — 인증·수상 */
  --c-card:      #ffffff;
  --c-tag:       #eceff4;
  --c-danger:    #b3252f;

  --radius:      3px;       /* 각진 모서리 */
  --radius-sm:   2px;
  --shadow-sm:   0 1px 2px rgba(14,20,32,.07);
  --shadow-md:   0 14px 36px rgba(14,20,32,.13);
  --header-h:    96px;
  --max-w:       1400px;

  --c-ink:       #100a28;   /* 헤더·푸터 바탕 */
  --c-ink-2:     #221459;
}

/* 한글 가독성 우선 폰트 스택 */
body {
  font-family: "Pretendard", "Poppins", system-ui, -apple-system, "Segoe UI",
               "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  background: #ffffff;
  letter-spacing: -.005em;
}
h1, h2, h3, h4 { letter-spacing: -.02em; font-weight: 700; }

/* ── 헤더: 밝은 바 (브랜드 로고가 네이비 온 화이트) ──────── */
.site-header {
  background: #fff;
  border-bottom: 1px solid var(--c-line);
  box-shadow: 0 1px 0 rgba(14,20,32,.04);
  backdrop-filter: none;
}
.logo { display: flex; align-items: center; }
.logo img { height: 52px; width: auto; }

.primary-nav { display: flex; gap: 50px; }
.primary-nav .nav-item > a,
.primary-nav a { color: var(--c-fg); font-weight: 600; letter-spacing: -.01em; }
/* 폰트 크기는 대메뉴에만 — 드롭다운 하위메뉴는 아래에서 따로 지정 */
.primary-nav .nav-item > a { font-size: 17px; }
.primary-nav .nav-item > a:hover,
.primary-nav a:hover { color: var(--c-primary); }
.primary-nav .nav-item > a { position: relative; }
.primary-nav .nav-item.is-current > a { color: var(--c-primary); }
.primary-nav .nav-item.is-current > a::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: 3px; background: var(--c-accent);
}
.nav-toggle span { background: var(--c-fg); }

/* ── 대메뉴·언어버튼 세로 정렬 ────────────────────────────
   로고 PNG(750x156)를 행별로 분석하면 'FIRST GROUP' 워드마크는 y 91~144,
   중심 117.5 = 이미지 높이의 75.3%. 52px 로 표시되므로 워드마크 중심은
   헤더 상단에서 22 + 52*0.753 = 61px, 즉 헤더 중앙(48px)보다 13px 아래다.
   위쪽 작은 국문 라인까지 포함한 이미지 중앙에 맞추면 대메뉴가 워드마크보다
   떠 보여서, 워드마크 중심선에 맞춘다. */
:root { --nav-drop: 13px; }
/* 링크 박스는 헤더 전체 높이를 유지(호버 영역·현재메뉴 밑줄 위치 그대로)하고
   가운데 정렬된 글자만 아래로 내린다. padding-top 의 절반만큼 내려간다. */
.primary-nav .nav-item > a {
  box-sizing: border-box;
  padding-top: calc(var(--nav-drop) * 2);
}
.header-actions { transform: translateY(var(--nav-drop)); }

.nav-sub { border-color: var(--c-line); border-radius: var(--radius); }
.nav-sub a { color: var(--c-fg); font-size: 15px; font-weight: 500; }
.nav-sub a:hover { background: var(--c-tag); color: var(--c-primary); }

/* 언어 선택은 알약 버튼. 각진 다른 UI 와 달라 보이되 헤더에서 눈에 띈다.
   알약은 좌우 여백이 넉넉해야 형태가 살아서 padding 도 함께 올린다. */
.lang-btn { border-radius: 999px; padding: 7px 14px 7px 13px; }
.lang-switcher li a { border-radius: 999px; }
.lang-btn:hover,
.lang-switcher:hover .lang-btn,
.lang-switcher:focus-within .lang-btn { border-color: var(--c-accent); box-shadow: none; }
.lang-btn .lang-ico { color: var(--c-accent); }
/* 알약 버튼·알약 항목과 짝이 맞게 패널도 둥글게 (테마 기본 3px 는 안쪽 알약과 따로 논다) */
.lang-switcher ul { border-radius: 16px; }

/* ── 페이지 상단 띠 (구 사이트 브레드크럼 배경 이미지 계승) ─── */
.page-head {
  position: relative;
  background: var(--c-ink) center / cover no-repeat;
  border-bottom: 0; color: #fff;
}
/* 대메뉴별 배경 — 구 사이트 bg-breadcrumbs-N.jpg 매핑 그대로 */
.page-head[data-menu="company"]   { background-image: url("/assets/pages/crumb/bg-2.jpg"); }
.page-head[data-menu="business"]  { background-image: url("/assets/pages/crumb/bg-3.jpg"); }
.page-head[data-menu="career"]    { background-image: url("/assets/pages/crumb/bg-4.jpg"); }
.page-head[data-menu="community"] { background-image: url("/assets/pages/crumb/bg-5.jpg"); }

/* 오버레이 없음 — 배경 이미지를 그대로 보여준다.
   대신 글자에는 그림자를 넉넉히 줘서 밝은 부분 위에서도 읽히게 한다. */
/* 배경(1920x560)이 충분히 보이도록 띠를 키운다.
   제목 블록은 배너 가운데 정렬, 위치 표시줄은 하단에 가로 전체 폭. */
.page-head { min-height: 340px; display: flex; flex-direction: column; justify-content: flex-end; align-items: stretch; }
.page-head-inner {
  position: relative; z-index: 1; width: 100%;
  flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center;
  text-align: center; padding-top: 92px; padding-bottom: 78px;
}
.page-head .page-title {
  color: #fff; font-size: clamp(30px, 4vw, 44px); font-weight: 800;
  letter-spacing: -.02em; margin: 0;
  /* 오버레이를 쓰지 않으므로 그림자로만 가독성을 확보한다 */
  text-shadow: 0 2px 6px rgba(0,0,0,.85), 0 0 22px rgba(0,0,0,.65);
}
/* 브레드크럼은 오버레이 없는 배경 위에 놓이므로 그림자로 가독성을 확보한다 */
.page-head .page-crumbs {
  text-shadow: 0 1px 5px rgba(0,0,0,.85), 0 0 16px rgba(0,0,0,.6);
}

/* ── 본문 ───────────────────────────────────────────────── */
.post-body .pg-h { color: var(--c-primary); }
.post-body .pg-card { border-color: var(--c-line); }
.post-body .pg-tab[aria-selected="true"] { color: var(--c-primary); border-bottom-color: var(--c-accent); }
.post-body th { background: var(--c-ink); color: #fff; border-color: var(--c-ink); font-weight: 600; }

/* ── 메인 ───────────────────────────────────────────────── */
/* 원본 히어로 이미지가 이미 어둡다. 오버레이는 글자 가독성 확보용으로만 얕게. */
.hm-slide::before {
  background: linear-gradient(100deg, rgba(8,12,22,.58) 0%, rgba(8,12,22,.30) 44%, rgba(8,12,22,.04) 100%);
}
.hm-eyebrow { color: #e0b866; text-shadow: 0 1px 10px rgba(0,0,0,.55); }
.hm-title { font-weight: 800; text-shadow: 0 2px 18px rgba(0,0,0,.55); }
.hm-lead { text-shadow: 0 1px 12px rgba(0,0,0,.55); }
/* 히어로 제목 아래 액센트 룰 */
.hm-title::after {
  content: ""; display: block; width: 56px; height: 3px;
  background: var(--c-accent); margin: 18px 0 0;
}
.hm-btn { border-radius: var(--radius); }
.hm-btn-primary { background: var(--c-accent); color: #0e1420; }
.hm-btn-primary:hover { background: #c69742; color: #0e1420; }
.hm-dot.is-active { background: var(--c-accent); }

.hm-sec-eyebrow { color: var(--c-accent); }
.hm-sec-title { position: relative; }

.hm-biz { background: var(--c-line-2); }
/* 상단 브론즈 선은 항상 보이게 — 예전엔 transparent 라 호버할 때만 나타났다.
   견적·상담 카드(.hm-est-card)와 같은 6px. */
.hm-biz-card { border-radius: 0; border-top: 6px solid var(--c-accent); }
.hm-biz-card:hover { border-color: var(--c-primary); border-top-color: var(--c-accent); }
/* 카드 번호는 워터마크 — 옅은 네이비 */
.hm-biz-num { color: rgba(16,35,63,.08); }
.hm-biz-go { color: var(--c-primary); }

.hm-news-card { border-radius: var(--radius); }
.hm-news-head { border-bottom-color: var(--c-primary); }

/* 견적·상담: 사업안내와 같은 회색(--c-line-2).
   밝은 구간(회사소개~주요고객사) 한가운데 다크 블록이 혼자 뜨는 걸 없애고,
   하단부 다크 포인트는 바로 아래 오시는길 패널 하나만 남긴다. */
.hm-estimate { background: var(--c-line-2); }
.hm-est-card {
  background: #fff; border-color: var(--c-line);
  border-radius: var(--radius); border-top: 6px solid var(--c-accent);
}
/* 호버 — 카드 전체를 브랜드 네이비로 반전. 상단 금색 선은 그대로 살린다. */
.hm-est-card:hover {
  background: var(--c-primary); border-color: var(--c-primary);
  border-top-color: var(--c-accent);
  box-shadow: var(--shadow-md);
}
.hm-est-card:hover h3 { color: #fff; }
.hm-est-card:hover .hm-est-desc { color: rgba(255,255,255,.78); }
.hm-est-card:hover .hm-est-ico {
  background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.3); color: #e0b866;
}
/* 밝은 배경 위 브론즈는 대비 3.3:1 로 AA 미달 → 한 단계 어두운 브론즈 사용
   (#8a6725: 흰 카드 5.2:1, 섹션 배경 4.8:1) */
.hm-estimate .hm-sec-eyebrow { color: #8a6725; }
.hm-est-ico {
  background: rgba(16,35,63,.05);
  border-color: rgba(16,35,63,.12);
  color: #8a6725;
}

.hm-contact-list > div,
.hm-contact-list > div:first-child { border-color: var(--c-line); }
.hm-contact-list dt { color: var(--c-primary); }

/* ── 푸터: 짙은 바 ──────────────────────────────────────── */
.site-footer {
  background: var(--c-ink); color: rgba(255,255,255,.62);
  border-top: 3px solid var(--c-accent); margin-top: 0;
  text-align: left; padding: 40px 0;
}
.site-footer a { color: rgba(255,255,255,.82); }
.site-footer a:hover { color: #fff; }


/* ── 푸터 로고 (화이트 녹아웃) ─────────────────────────── */
/* 로고 좌 / 회사정보 우 */
.foot-top { display: flex; align-items: flex-start; gap: clamp(36px, 5vw, 72px); }
.footer-logo { flex: 0 0 auto; display: inline-block; margin: 2px 0 0; line-height: 0; }
.foot-info { flex: 1 1 auto; min-width: 0; }
.footer-logo img { height: 52px; width: auto; display: block; }
.footer-logo:hover { opacity: .85; }

/* ── 푸터 회사정보 ─────────────────────────────────────── */
.site-footer { padding: 52px 0 34px; font-size: 14px; }
.foot-info { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.foot-info li { display: flex; align-items: flex-start; gap: 14px; }
.foot-ico {
  flex: 0 0 auto; width: 26px; height: 26px; margin-top: 1px;
  display: flex; align-items: center; justify-content: center;
  color: var(--c-accent);
}
.foot-ico svg { width: 19px; height: 19px; }
.foot-text { min-width: 0; color: rgba(255,255,255,.72); line-height: 1.85; }
.foot-line { display: block; word-break: keep-all; }
.foot-sep { font-style: normal; color: rgba(255,255,255,.26); margin: 0 9px; }
.foot-tel { color: #fff; font-weight: 700; }
.foot-tel a { color: #fff; }
.foot-text a { color: rgba(255,255,255,.82); }
.foot-text a:hover { color: #fff; }

.foot-bottom {
  margin-top: 30px; padding-top: 22px;
  border-top: 1px solid rgba(255,255,255,.12);
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: 8px 24px;
}
.foot-bottom p { margin: 0; }
.foot-copy { color: rgba(255,255,255,.52); font-size: 13px; letter-spacing: .01em; }
.site-footer .footer-links { font-size: 13px; }
.site-footer .footer-links a { color: rgba(255,255,255,.66); }
.site-footer .footer-links a:hover { color: #fff; }

/* ── 게시판/공용 버튼 각지게 ────────────────────────────── */
.btn, .btn-primary, .card, .panel, input, select, textarea { border-radius: var(--radius) !important; }

/* 히어로 슬라이드 도트 — 시각 크기는 유지하고 터치 영역만 넓힌다 */
.hm-dot {
  box-sizing: content-box;
  padding: 9px 7px;
  background-clip: content-box;
}

@media (max-width: 768px) {
  :root { --header-h: 72px; }
  .logo img { height: 36px; }
  .footer-logo img { height: 40px; }
  .foot-top { display: block; }
  .site-footer .footer-logo { margin: 0 0 18px; padding: 0; }
  .site-footer { padding: 40px 0 26px; font-size: 13px; }
  .foot-info { gap: 14px; }
  .foot-info li { gap: 11px; }
  .foot-ico { width: 22px; height: 22px; }
  .foot-ico svg { width: 17px; height: 17px; }
  /* 좁은 화면에선 구분자 대신 줄바꿈이 훨씬 읽기 쉽다 */
  .foot-line > span { display: block; }
  .foot-sep { display: none; }
  .foot-tel { display: block; }
  .foot-tel + .foot-sep + span { display: block; }
  .site-footer .foot-text a { display: inline-block; padding: 5px 0; }
  .foot-bottom { margin-top: 24px; padding-top: 18px; flex-direction: column; align-items: flex-start; gap: 2px; }

  /* 대메뉴가 세로로 펼쳐지므로 워드마크 정렬 오프셋은 되돌린다 */
  .primary-nav .nav-item > a { padding-top: 0; }
  .header-actions { transform: none; }

  /* 팝업(z-index 9998)이 열린 햄버거 메뉴를 덮지 않도록 헤더·네비를 위로 올린다 */
  .site-header { z-index: 10000; }
  .primary-nav { z-index: 10000; }
  .page-head { min-height: 210px; }
  .page-head-inner { padding-top: 44px; padding-bottom: 32px; }

  /* ── 터치 영역 확보(권장 최소 40px) ── */
  .lang-btn { min-height: 40px; padding: 9px 15px 9px 14px; }
  .nav-toggle { min-width: 44px; min-height: 44px; }
  .page-head .crumbs a { display: inline-block; padding: 5px 2px; }
  .hm-link { display: inline-block; padding: 8px 0; }
  .hm-news-list li { padding: 6px 0; }
  .hm-news-list a { display: block; padding: 9px 0; }
  .hm-news-list time { padding: 9px 0; }
  .site-footer a { display: inline-block; padding: 7px 4px; }
  .jpopup-close { min-height: 44px; padding: 0 14px; }
  .hm-contact-list dd a { display: inline-block; padding: 8px 0; }
  .hm-dot { padding: 15px 7px; }
  .primary-nav { background: #fff; }
  .primary-nav .nav-item > a { color: var(--c-fg); border-bottom-color: var(--c-line-2); }
  /* 모바일 하위메뉴 — 캐시된 옛 규칙이 남아 있어도 이기도록 높은 특정도로 명시.
     (예전 어두운 헤더 시절의 흰 글자색이 남으면 밝은 배경에서 글자가 보이지 않는다) */
  .primary-nav .nav-item .nav-sub {
    width: 100%; min-width: 0; max-width: none;
    background: var(--c-line-2);
    border: 0; box-shadow: none; padding: 0;
  }
  .primary-nav .nav-item .nav-sub ul { margin: 0; padding: 4px 0 8px; list-style: none; }
  .primary-nav .nav-item .nav-sub li { margin: 0; }
  .primary-nav .nav-item .nav-sub a {
    display: block; width: auto;
    padding: 13px 20px 13px 34px;
    color: var(--c-fg); font-size: 15px; font-weight: 500;
    white-space: normal;
    border-bottom: 1px solid rgba(14,20,32,.06);
    background: transparent;
  }
  .primary-nav .nav-item .nav-sub li:last-child a { border-bottom: 0; }
  .primary-nav .nav-item .nav-sub a:active,
  .primary-nav .nav-item .nav-sub a:hover { background: var(--c-tag); color: var(--c-primary); }
  .hm-title::after { margin-top: 14px; }
}

/* 메뉴에 속하지 않는 페이지(개인정보처리방침·이용약관)의 배너.
   하위 메뉴 표시줄이 없으므로 아래쪽 여백을 대신 채운다. */
.page-head-plain { min-height: 260px; }
.page-head-plain .page-head-inner { padding-bottom: 46px; }
@media (max-width: 768px) {
  .page-head-plain { min-height: 190px; }
  .page-head-plain .page-head-inner { padding-bottom: 30px; }
}

/* ─────────────────────────────────────────────────────────
   일본어 · 중국어 줄바꿈 보정
   word-break: keep-all 은 "어절 안에서는 줄을 바꾸지 말라" 는 뜻이라
   띄어쓰기가 있는 한국어에는 맞지만, 띄어쓰기가 없는 일본어 · 중국어에서는
   문장 전체가 하나의 어절로 취급돼 줄이 안 바뀌고 여백 밖으로 넘친다.
   두 언어에서만 기본 줄바꿈으로 되돌린다.
   ───────────────────────────────────────────────────────── */
html[lang="ja"] body,
html[lang="zh"] body { overflow-wrap: break-word; }
html[lang="ja"] *,
html[lang="zh"] * { word-break: normal !important; }