@charset "UTF-8";
/* =====================================================================
   온시큐리티 공통 셸 (Shell)
   - 전 페이지 공통 헤더(서브 시안 기준) + 푸터(메인 시안 기준)
   - tokens.css 다음, 페이지별 css 이전에 로드한다.
   ===================================================================== */

/* 기본 리셋은 reset.css로 이동 */

/* ---------- 접근성 공통 ---------- */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: -9999px; top: 0; z-index: 999; background: var(--primary); color: #fff; padding: 10px 18px; }
.skip:focus { left: 0; }

/* ---------- 고정 헤더 보정 ---------- */
main { margin-top: var(--head-h); }

/* ===================== HEADER / GNB ===================== */
.header { position: fixed; top: 0; left: 0; width: 100%; height: var(--head-h); background: rgba(255,255,255,.96); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); z-index: 1000; transition: .25s; }
.header.is-scrolled { box-shadow: var(--shadow-head); } /* on-main.js가 스크롤 10px 이후 토글 */
.header-wrap { max-width: var(--container); margin: 0 auto; height: 100%; padding: 0 24px; display: flex; align-items: center; gap: 32px; }
.logo { position: relative; display: inline-flex; align-items: center; }
.logo-img { height: 30px; width: auto; display: block; transition: opacity .25s; }
/* 헤더가 항상 흰/밝은 배경 → 어두운 글자 로고 상시 노출, 흰 로고는 겹쳐 숨김 */
.logo-img--white { opacity: 0; position: absolute; left: 0; top: 50%; transform: translateY(-50%); }
.logo-img--dark { opacity: 1; }
.gnb { flex: 1; }
.gnb-depth1 { display: flex; gap: 4px; }
.gnb-item { position: relative; }
.gnb-depth1-link { display: flex; align-items: center; height: var(--head-h); padding: 0 15px; font-size: 16px; font-weight: 700; color: var(--ink); transition: color .2s; white-space: nowrap; }
@media (hover: hover) { .gnb-item:hover .gnb-depth1-link { color: var(--primary); } }
.gnb-depth1-link::after { content: ""; position: absolute; left: 15px; right: 15px; bottom: 20px; height: 2px; background: var(--primary); transform: scaleX(0); transition: transform .25s; }
@media (hover: hover) { .gnb-item:hover .gnb-depth1-link::after { transform: scaleX(1); } }
/* 현재 페이지 활성 표시 — 각 페이지가 자기 섹션 depth1에 aria-current(page|true), 정확히 일치하는 depth2/3 링크에 aria-current="page"를 부여 */
.gnb-depth1-link[aria-current] { color: var(--primary); }
.gnb-depth1-link[aria-current]::after { transform: scaleX(1); }

/* mega dropdown */
.gnb-depth2-wrap { position: absolute; top: var(--head-h); left: 0; transform: translateX(0) translateY(10px); min-width: 520px; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-deep); padding: 28px; opacity: 0; visibility: hidden; transition: .25s; z-index: 5; }
@media (hover: hover) { .gnb-item:hover .gnb-depth2-wrap { opacity: 1; visibility: visible; transform: translateX(0) translateY(0); } }
/* 우측 끝 항목의 드롭다운은 화면 밖으로 나가지 않게 오른쪽 기준 정렬 */
.gnb-item:last-child .gnb-depth2-wrap, .gnb-item:nth-last-child(2) .gnb-depth2-wrap { left: auto; right: 0; }
/* hover 불가 기기·키보드 포커스 폴백: 포커스가 항목 안에 있으면 드롭다운 유지 */
.gnb-item:focus-within .gnb-depth1-link { color: var(--primary); }
.gnb-item:focus-within .gnb-depth1-link::after { transform: scaleX(1); }
.gnb-item:focus-within .gnb-depth2-wrap { opacity: 1; visibility: visible; transform: translateX(0) translateY(0); }
.gnb-depth2-container { display: flex; gap: 28px; }
.gnb-depth2 { flex: 1; min-width: 220px; }
.gnb-depth2 > li + li { margin-top: 2px; }
.gnb-depth2-link { display: block; padding: 11px 14px; border-radius: 8px; font-size: 15px; font-weight: 600; color: var(--ink); transition: .2s; }
@media (hover: hover) { .gnb-depth2-link:hover { background: var(--bg); color: var(--primary); } }
.gnb-depth2-link[aria-current="page"] { background: var(--bg); color: var(--primary); }
.gnb-depth2-txt { display: block; padding: 6px 14px; font-size: 13px; font-weight: 800; color: var(--primary); text-transform: uppercase; letter-spacing: .4px; }
.gnb-depth3 { margin-top: 4px; }
.gnb-depth3-link { display: block; min-width: max-content; padding: 9px 14px 9px 24px; border-radius: 8px; font-size: 14px; color: var(--gray); transition: .2s; }
@media (hover: hover) { .gnb-depth3-link:hover { background: var(--bg); color: var(--primary); } }
.gnb-depth3-link[aria-current="page"] { background: var(--bg); color: var(--primary); font-weight: 700; }
.gnb-banner-box { width: 220px; padding: 22px; border-radius: 12px; background: linear-gradient(150deg, var(--navy), var(--primary)); color: #fff; display: flex; flex-direction: column; justify-content: center; }
.gnb-banner-title { font-size: 18px; font-weight: 800; line-height: 1.4; }
.gnb-banner-desc { margin-top: 12px; font-size: 13px; color: rgba(255,255,255,.82); line-height: 1.6; }

/* 아코디언 전용 CTA — 데스크톱에서는 우측 .util-area 버튼이 담당하므로 숨긴다.
   1024 이하 블록의 .gnb.open .gnb-cta에서만 노출된다 (display:none이라 숨은 동안
   탭 순서·접근성 트리에서도 빠진다) */
.gnb-cta { display: none; }

/* util */
.util-area { display: flex; align-items: center; gap: 16px; }
.util-link { font-size: 14px; font-weight: 600; color: var(--ink); }
.btn-quote { display: inline-flex; align-items: center; height: 40px; padding: 0 20px; background: var(--primary); color: #fff; border-radius: 40px; font-size: 14px; font-weight: 700; white-space: nowrap; transition: background .2s; }
@media (hover: hover) {
  .btn-quote:hover { background: var(--primary-light); animation: btn-quote-pulse 1.4s ease-out infinite; }
}
@keyframes btn-quote-pulse {
  0%   { box-shadow: 0 0 0 0 var(--primary-glow); }
  70%  { box-shadow: 0 0 0 12px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}
@media (prefers-reduced-motion: reduce) {
  .btn-quote:hover { animation: none; box-shadow: 0 0 0 4px var(--primary-glow); }
}
.btn-hamburger { display: none; flex-direction: column; gap: 5px; width: 28px; background: none; border: 0; cursor: pointer; }
.btn-hamburger span { display: block; height: 2px; background: var(--ink); border-radius: 2px; transition: .25s; }

/* ===================== FOOTER ===================== */
.footer { background: var(--surface-dark); color: var(--dark-ink); padding: 44px 0 34px; font-size: 13.5px; }
.footer__inner { max-width: var(--container); margin: 0 auto; padding: 0 28px; }
.footer__top { padding-bottom: 24px; border-bottom: 1px solid var(--dark-line); display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; }
/* align-items:center — 아래 .footer__cta pill이 글자 링크보다 키가 커서, 기본값(stretch)이면
   같은 줄의 다른 메뉴가 위로 밀려 올라간다 */
.footer__links ul { display: flex; flex-wrap: wrap; align-items: center; gap: 22px; list-style: none; margin: 0; padding: 0; }
.footer__links a { color: var(--dark-ink); text-decoration: none; }
.footer__links a.strong { color: #fff; font-weight: 700; }
@media (hover: hover) { .footer__links a:hover { color: var(--primary-soft); } }
/* 푸터 메뉴 8개 중 유일하게 '이동'이 아니라 '행동'인 링크 → 외곽선 pill로만 구분한다.
   헤더 CTA처럼 --primary로 채우면 어두운 푸터에서 색이 튀어 메뉴 줄의 균형이 이 하나로 쏠린다 */
.footer__links a.footer__cta { display: inline-flex; align-items: center; height: 30px; padding: 0 15px; border: 1px solid var(--dark-line-soft); border-radius: 30px; font-size: 13px; transition: border-color .2s, color .2s; }
@media (hover: hover) { .footer__links a.footer__cta:hover { border-color: var(--primary-soft); } }
.footer__mid { margin-top: 30px; display: flex; justify-content: space-between; align-items: flex-start; gap: 50px; flex-wrap: wrap; }
.footer__info { flex: 1 1 auto; min-width: 0; }
.footer__company { line-height: 1.9; color: var(--dark-ink-dim); font-size: 13px; }
/* 개인정보 처리방침 — .footer__top(space-between)의 두 번째 자식이라 메뉴 목록 우측 끝에 붙는다.
   메뉴 링크(.footer__links a.strong = #fff)와 성격이 다른 링크이므로 좌측 구분선에 더해
   글자색도 한 단계 어둡게(--dark-ink-strong) 낮춰 9번째 메뉴로 보이지 않게 한다 (2026-08-11) */
.footer__policy { color: var(--dark-ink-strong); font-weight: 700; font-size: 13px; padding-left: 22px; border-left: 1px solid var(--dark-line); text-decoration: none; white-space: nowrap; }
@media (hover: hover) { .footer__policy:hover { color: var(--primary-soft); } }
.footer__copy { margin-top: 30px; font-size: 12.5px; color: var(--dark-ink-faint); }

/* ===================== RESPONSIVE ===================== */
/* --bp-tablet(1024px)과 동일값 유지 — tokens.css 참조 */
@media (max-width: 1024px) {
  .header-wrap { gap: 14px; padding: 0 16px; }
}

/* --bp-tablet(1024px)과 동일값 유지 — tokens.css 참조.
   1024 이하에서는 1뎁스 8개 메가메뉴를 넣을 폭이 남지 않아 flex가 로고를
   찌그러뜨린다(실측: 860 이하에서 로고 판독 불가) → 햄버거로 전환한다.
   또한 hover 드롭다운을 쓸 수 없는 터치 전용 기기(hover: none & pointer: coarse)는
   폭과 무관하게 햄버거 메뉴로 전환한다 */
@media (max-width: 1024px), (hover: none) and (pointer: coarse) {
  .gnb, .util-area { display: none; }
  .btn-hamburger { display: flex; margin-left: auto; }
  /* .header의 backdrop-filter가 fixed 자손의 containing block이 되어
     top/bottom이 헤더 박스 기준으로 계산됨(높이 0 붕괴) → 헤더 기준
     absolute + 명시적 높이로 배치한다 */
  .gnb.open { display: block; position: absolute; top: var(--head-h); left: 0; right: 0; height: calc(100vh - var(--head-h)); background: #fff; overflow-y: auto; padding: 16px 24px; }
  .gnb.open .gnb-depth1 { flex-direction: column; }
  .gnb.open .gnb-depth1-link { height: auto; padding: 16px 0; border-bottom: 1px solid var(--line); }
  .gnb.open .gnb-depth2-wrap { position: static; transform: none; opacity: 1; visibility: visible; box-shadow: none; border: 0; min-width: 0; padding: 8px 0 16px; }
  .gnb.open .gnb-depth2-container { flex-direction: column; gap: 12px; }
  .gnb.open .gnb-banner-box { display: none; }
  /* 아코디언에서는 데스크톱 hover 장식을 끈다 — 드롭다운이 상시 펼침이라 hover의
     기능은 이미 없고, ::after 밑줄은 .gnb-item 기준 absolute라 펼쳐진 서브메뉴
     위로 떠버린다(aria-current 페이지에서는 상시 노출). 현재 위치는 색상으로만 표시 */
  .gnb.open .gnb-depth1-link::after { display: none; }
  .gnb.open .gnb-item:hover .gnb-depth1-link,
  .gnb.open .gnb-item:focus-within .gnb-depth1-link { color: var(--ink); }
  .gnb.open .gnb-depth1-link:hover,
  .gnb.open .gnb-depth1-link:focus-visible,
  .gnb.open .gnb-depth1-link[aria-current] { color: var(--primary); }
  /* 이 구간에서는 .util-area가 숨겨져 헤더 CTA가 없다 → 메뉴 목록 끝에서 문의 경로를 잇는다.
     마지막 1뎁스 링크의 border-bottom과 붙지 않도록 위쪽 여백을 두고, 목록 폭을 꽉 채워
     본문 링크가 아니라 버튼으로 읽히게 한다 */
  .gnb.open .gnb-cta { display: block; margin: 22px 0 8px; }
  .gnb.open .gnb-cta .btn-quote { display: flex; justify-content: center; width: 100%; height: 48px; font-size: 15px; }
}

/* --bp-mobile(768px)과 동일값 유지 — tokens.css 참조 */
@media (max-width: 768px) {
  .footer__top, .footer__mid { flex-direction: column; align-items: flex-start; }
  .footer__company br { display: none; }
  /* column 전환 시 처리방침 링크가 메뉴 목록 아래로 접히므로 좌측 구분선은 어색해진다 */
  .footer__policy { padding-left: 0; border-left: 0; }
}