/* 안녕소프트 공통 헤더 (GNB) — 2026-08-08
   전 페이지가 같은 메뉴를 쓰도록 하나로 통일한 헤더.
   기존에는 홈(세로 사이드바)/서비스/구축사례/업종별/상담이 각자 다른 메뉴를 갖고 있었다. */

:root{
  --gnb-h: 64px;
  --gnb-bg: #0C1116;   /* 히어로와 같은 먹색 — 상단이 한 덩어리로 읽히게 (경계선 제거) */
  --gnb-fg: #e8eef7;
  --gnb-fg-dim: #a9b8cc;
  --gnb-blue: #2145FF;
  --gnb-blue-lt: #6079FF;
}

.gnb{
  position: fixed; top:0; left:0; right:0; z-index: 12000;
  height: var(--gnb-h);
  background: var(--gnb-bg);
  box-shadow: 0 1px 0 rgba(255,255,255,.06), 0 6px 20px rgba(9,14,22,.18);
  font-family: 'Pretendard','Apple SD Gothic Neo','Noto Sans KR',system-ui,-apple-system,sans-serif;
}
.gnb *, .gnb *::before, .gnb *::after{ box-sizing: border-box; }

.gnb .gnb-inner{
  width: min(1240px, 94%); margin: 0 auto; height: 100%;
  display: flex; align-items: center; gap: 20px;
}

.gnb .gnb-logo{ display:flex; align-items:center; flex:0 0 auto; border:0; text-decoration:none; }
.gnb .gnb-logo img{ height: 30px; width:auto; max-width:none; display:block; border:0; }

.gnb .gnb-nav{ margin-left:auto; display:flex; align-items:center; gap: 4px; }

.gnb .gnb-nav .gnb-link{
  display:flex; align-items:center; gap:5px;
  padding: 9px 14px; border-radius: 9px;
  color: var(--gnb-fg); text-decoration:none; border:0;
  font-size: .95rem; font-weight: 600; letter-spacing:-.01em;
  white-space: nowrap; transition: background-color .15s ease, color .15s ease;
}
.gnb .gnb-link:hover{ background: rgba(255,255,255,.09); color:#fff; }
.gnb .gnb-link.is-active{ color:#fff; background: rgba(96,121,255,.18); }

/* 상담문의는 강조 */
.gnb .gnb-nav .gnb-cta{ background: var(--gnb-blue); color:#fff; margin-left:6px; }
.gnb .gnb-nav .gnb-cta:hover{ background:#3D5CFF; color:#fff; }
.gnb .gnb-cta.is-active{ background: #1B39D1; }  /* 흰 글씨 대비 4.5 확보 (#3D5CFF 는 3.99 로 미달) */

/* 솔루션 드롭다운 */
.gnb .gnb-item{ position: relative; }
.gnb .gnb-caret{ width:9px; height:9px; flex:0 0 auto; transition: transform .18s ease; }
.gnb .gnb-item.is-open .gnb-caret{ transform: rotate(180deg); }

.gnb .gnb-sub{
  position:absolute; top: 100%; left: 0;
  min-width: 208px; padding: 8px;
  background:#fff; border-radius: 14px;
  border: 1px solid #e4e8f0;
  box-shadow: 0 18px 44px rgba(16,24,40,.20);
  opacity:0; visibility:hidden; transform: translateY(-6px);
  transition: opacity .16s ease, transform .16s ease, visibility .16s;
}
.gnb .gnb-item.is-open .gnb-sub{ opacity:1; visibility:visible; transform:none; }
.gnb .gnb-nav .gnb-sub a{
  display:block; padding: 10px 12px; border-radius: 9px; border:0;
  color:#344054; text-decoration:none; font-size:.9rem; font-weight:600; white-space:nowrap;
}
.gnb .gnb-nav .gnb-sub a:hover{ background:#F0F2FF; color:#1F41EE; }
.gnb .gnb-nav .gnb-sub a.is-active{ background:#F0F2FF; color:#1F41EE; }

/* 햄버거 */
.gnb .gnb-toggle{
  display:none; margin-left:auto;
  width:44px; height:44px; padding:0;
  align-items:center; justify-content:center;
  background:transparent; border:1px solid rgba(255,255,255,.26); border-radius:10px; cursor:pointer;
}
.gnb .gnb-toggle span{ display:block; width:18px; height:2px; background:#fff; position:relative; }
.gnb-toggle span::before,
.gnb .gnb-toggle span::after{
  content:''; position:absolute; left:0; width:18px; height:2px; background:#fff;
  transition: transform .2s ease;
}
.gnb .gnb-toggle span::before{ top:-6px; }
.gnb .gnb-toggle span::after{ top:6px; }
.gnb.is-open .gnb-toggle span{ background:transparent; }
.gnb.is-open .gnb-toggle span::before{ transform: translateY(6px) rotate(45deg); }
.gnb.is-open .gnb-toggle span::after{ transform: translateY(-6px) rotate(-45deg); }

/* 본문이 고정 헤더에 가리지 않도록 */
body.has-gnb{ padding-top: var(--gnb-h); }
body.has-gnb [id]{ scroll-margin-top: calc(var(--gnb-h) + 8px); }

/* ===== 모바일 / 태블릿 ===== */
@media screen and (max-width: 1024px){
  :root{ --gnb-h: 56px; }
  .gnb .gnb-logo img{ height: 26px; width:auto; max-width:none; }
  .gnb .gnb-toggle{ display:flex; }

  .gnb .gnb-nav{
    position: fixed; top: var(--gnb-h); left:0; right:0;
    margin:0; display:block;
    background: var(--gnb-bg);
    max-height: 0; overflow: hidden;
    visibility:hidden; pointer-events:none;
    transition: max-height .26s ease, visibility 0s linear .26s;
    box-shadow: 0 16px 30px rgba(9,14,22,.35);
  }
  .gnb.is-open .gnb-nav{
    max-height: calc(100vh - var(--gnb-h)); overflow-y:auto;
    max-height: calc(100dvh - var(--gnb-h));
    visibility:visible; pointer-events:auto;
    transition-delay:0s;
  }

  body.gnb-menu-open{ overflow:hidden; }
  /* 열린 메뉴 뒤 본문을 가라앉힌다. 탭하면 바깥클릭 핸들러가 메뉴를 닫는다 */
  body.gnb-menu-open::after{
    content:""; position:fixed; inset:0; z-index:11000;
    background:rgba(9,13,20,.55);
  }

  .gnb .gnb-nav .gnb-link{
    width:100%; border-radius:0; padding: 15px 5%;
    border-top: 1px solid rgba(255,255,255,.08);
    font-size: 1rem;
  }
  .gnb .gnb-nav .gnb-cta{ margin:0; background: var(--gnb-blue); }
  .gnb .gnb-caret{ margin-left:auto; }

  /* 모바일에서는 드롭다운을 펼침 목록으로 */
  .gnb .gnb-sub{
    position: static; opacity:1; visibility:visible; transform:none;
    min-width:0; padding:0; border:0; border-radius:0; box-shadow:none;
    background: rgba(0,0,0,.18);
    max-height:0; overflow:hidden; transition: max-height .22s ease;
  }
  .gnb .gnb-item.is-open .gnb-sub{ max-height: 520px; }
  .gnb .gnb-nav .gnb-sub a{
    padding: 13px 5% 13px calc(5% + 16px); border-radius:0;
    color: var(--gnb-fg-dim); font-size:.94rem;
    border-top: 1px solid rgba(255,255,255,.06);
  }
  .gnb .gnb-sub a:hover, .gnb .gnb-nav .gnb-sub a.is-active{ background: rgba(255,255,255,.06); color:#fff; }
}

/* ===== 본문 정렬 (사이드바 제거 후) =====
   세로 사이드바가 있을 땐 본문이 그 옆에 밀려 자연스레 자리를 잡았지만,
   사이드바를 걷어내니 본문이 화면 끝까지 퍼진다.
   헤더와 같은 컨테이너 폭으로 맞춰 세로선을 일치시킨다. */
body.has-gnb #wrapper > .wrapper > .inner{
  width: min(1240px, 94%) !important;
  max-width: none !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
body.has-gnb #footer > .inner{
  width: min(1240px, 94%);
  max-width: none;
  margin-left: auto;
  margin-right: auto;
}

/* 첫 화면은 고정 헤더 높이를 뺀 만큼만 차지하게 (스크롤 튐 방지) */
body.has-gnb #intro.fullscreen{
  min-height: calc(100vh - var(--gnb-h));
}

@media screen and (max-width: 736px){
  body.has-gnb #wrapper > .wrapper > .inner{
    width: 90% !important;
  }
  body.has-gnb #footer > .inner{ width: 90%; }
}


/* 본문 바로가기 — 키보드 사용자가 GNB 를 전부 지나지 않아도 되게 한다.
   display:none 으로 숨기면 키보드로도 잡히지 않으므로 화면 밖으로 밀어둔다. */
.skip-link{
  position:fixed; left:-9999px; top:0; z-index:13000;
  background:#0C1116; color:#fff; padding:12px 18px;
  border-radius:0 0 10px 0; font-weight:700; font-size:.92rem;
  text-decoration:none;
}
.skip-link:focus{ left:0; outline:3px solid #9FAFFF; outline-offset:2px; }

/* 새 로고 (2026-08-14) — 마크는 SVG, 이름은 글자.
   먹색 헤더 위라 흰색으로 둔다. #2145FF 는 먹색 위에서 대비 3.0 밖에 안 나온다. */
.gnb .gnb-logo{ gap:9px; color:#fff; }
.gnb .gnb-logo .brand-mark{ width:33px; height:21px; flex:0 0 auto; display:block;
  /* 2026-08-14 최재원 지시: 마크는 브랜드 파랑. 글자는 흰색 유지 */
  color:#2145FF; }
.gnb .gnb-logo .brand-word{
  font-size:19px; font-weight:800; letter-spacing:-.03em; line-height:1; color:#fff; white-space:nowrap;
}
@media (max-width:900px){
  .gnb .gnb-logo{ gap:8px; }
  .gnb .gnb-logo .brand-mark{ width:28px; height:18px; }
  .gnb .gnb-logo .brand-word{ font-size:17px; }
}