/* ============================================================
   DJ Bank — 공용 GNB + 하단 Floating CTA
   기존 랜딩(deposit/loan)의 헤더 톤을 그대로 계승:
   68px(모바일 60px) 글래스 헤더, #0046ff 브랜드 블루, pill 버튼.
   기존 페이지의 .site-header 규칙과 충돌하지 않도록 .dj-gnb 네임스페이스 사용.
   ============================================================ */

.dj-gnb {
  --gnb-blue: #0046ff;
  --gnb-ink: #1f2023;
  --gnb-ink-2: #5b6270;
  --gnb-h: 68px;
  position: sticky;
  top: 0;
  z-index: 1000;
  height: var(--gnb-h);
  margin-bottom: calc(var(--gnb-h) * -1);
  background: rgba(255, 255, 255, 0.72);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont,
    "Apple SD Gothic Neo", "Malgun Gothic", "Segoe UI", sans-serif;
}
.dj-gnb.is-scrolled {
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 1px 0 rgba(20, 33, 61, 0.08);
}

.dj-gnb-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  max-width: 1496px;
  height: var(--gnb-h);
  margin: 0 auto;
  padding: 0 32px;
}

/* ---------- 로고 ---------- */
.dj-gnb-logo { display: inline-flex; align-items: center; flex-shrink: 0; }
.dj-gnb-logo img { height: 26px; width: auto; display: block; }

/* ---------- 데스크톱 메뉴 ---------- */
.dj-gnb-nav { display: none; align-items: center; gap: 4px; margin-left: auto; }
@media (min-width: 961px) { .dj-gnb-nav { display: flex; } }

.dj-gnb-item { position: relative; }
.dj-gnb-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 40px;
  padding: 0 14px;
  border: 0;
  background: none;
  border-radius: 10px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--gnb-ink);
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.15s ease, background-color 0.15s ease;
  text-decoration: none;
}
.dj-gnb-link:hover { color: var(--gnb-blue); background: rgba(0, 70, 255, 0.06); }
.dj-gnb-link[aria-current="page"] { color: var(--gnb-blue); }
.dj-gnb-link .chev {
  width: 14px; height: 14px; flex-shrink: 0;
  transition: transform 0.2s ease;
  color: var(--gnb-ink-2);
}
.dj-gnb-item.open > .dj-gnb-link .chev { transform: rotate(180deg); }
.dj-gnb-item.open > .dj-gnb-link { color: var(--gnb-blue); }

/* ---------- 드롭다운 ---------- */
.dj-gnb-menu {
  position: absolute;
  top: calc(100% - 4px);
  left: 0;
  min-width: 248px;
  background: #fff;
  border: 1px solid #e4e9f2;
  border-radius: 14px;
  box-shadow: 0 16px 36px rgba(16, 34, 92, 0.14);
  padding: 8px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
}
.dj-gnb-item.open .dj-gnb-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.dj-gnb-menu a {
  display: block;
  padding: 11px 14px;
  border-radius: 9px;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--gnb-ink);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.dj-gnb-menu a:hover { background: #f2f6ff; color: var(--gnb-blue); }
.dj-gnb-menu a .sub {
  display: block; margin-top: 3px;
  font-size: 12.5px; font-weight: 500; color: var(--gnb-ink-2);
}
.dj-gnb-menu a:hover .sub { color: var(--gnb-blue); opacity: 0.75; }

/* ---------- 모바일 햄버거 ---------- */
.dj-gnb-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px; height: 42px;
  margin-left: auto;
  border: 0;
  background: none;
  border-radius: 10px;
  cursor: pointer;
  color: var(--gnb-ink);
}
.dj-gnb-toggle:hover { background: rgba(0, 70, 255, 0.06); }
@media (min-width: 961px) { .dj-gnb-toggle { display: none; } }
.dj-gnb-toggle span {
  position: relative;
  display: block; width: 20px; height: 2px;
  background: currentColor; border-radius: 2px;
  transition: transform 0.25s ease, background-color 0.2s ease;
}
.dj-gnb-toggle span::before,
.dj-gnb-toggle span::after {
  content: ""; position: absolute; left: 0;
  width: 20px; height: 2px; background: currentColor; border-radius: 2px;
  transition: transform 0.25s ease, top 0.2s ease;
}
.dj-gnb-toggle span::before { top: -6px; }
.dj-gnb-toggle span::after { top: 6px; }
.dj-gnb.menu-open .dj-gnb-toggle span { background: transparent; }
.dj-gnb.menu-open .dj-gnb-toggle span::before { top: 0; transform: rotate(45deg); }
.dj-gnb.menu-open .dj-gnb-toggle span::after { top: 0; transform: rotate(-45deg); }

/* ---------- 모바일 패널 ---------- */
/* sticky 헤더의 자식으로 absolute 배치 — 기존 랜딩이 html에 CSS zoom을 걸고 있어
   position:fixed로 두면 뷰포트 기준 좌표가 zoom 좌표계와 어긋나 헤더에서 떨어진다. */
.dj-gnb-panel {
  position: absolute;
  top: 100%;
  left: 0; right: 0;
  max-height: calc(100dvh - var(--gnb-h));
  overflow-y: auto;
  background: #fff;
  border-top: 1px solid #e4e9f2;
  box-shadow: 0 20px 40px rgba(16, 34, 92, 0.12);
  padding: 12px 20px 28px;
  transform: translateY(-8px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s;
}
.dj-gnb.menu-open .dj-gnb-panel { opacity: 1; visibility: visible; transform: translateY(0); }
@media (min-width: 961px) { .dj-gnb-panel { display: none; } }

.dj-gnb-panel .grp { border-bottom: 1px solid #eef2f9; padding: 6px 0; }
.dj-gnb-panel .grp:last-of-type { border-bottom: 0; }
.dj-gnb-panel .grp-t {
  display: block; padding: 12px 4px 6px;
  font-size: 13px; font-weight: 700; color: var(--gnb-ink-2);
  letter-spacing: -0.01em;
}
.dj-gnb-panel a {
  display: block; padding: 13px 4px;
  font-size: 16px; font-weight: 600; color: var(--gnb-ink);
  text-decoration: none; letter-spacing: -0.01em;
}
.dj-gnb-panel a:active { color: var(--gnb-blue); }
.dj-gnb-panel .grp a { padding-left: 12px; font-size: 15.5px; }
.dj-gnb-panel .grp a::before { content: "· "; color: var(--gnb-ink-2); }

.dj-gnb-backdrop {
  position: fixed; inset: 0;
  background: rgba(10, 18, 40, 0.35);
  opacity: 0; visibility: hidden;
  transition: opacity 0.22s ease, visibility 0.22s;
  z-index: 999;
}
.dj-gnb.menu-open ~ .dj-gnb-backdrop,
body.dj-menu-open .dj-gnb-backdrop { opacity: 1; visibility: visible; }
@media (min-width: 961px) { .dj-gnb-backdrop { display: none; } }

/* ---------- 하단 Floating CTA ---------- */
@property --dj-glow-angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}
@keyframes djGlowSpin { to { --dj-glow-angle: 360deg; } }

/* 등장은 살짝 튀어오르며 천천히, 퇴장은 짧고 빠르게 — 비대칭 트랜지션 */
.dj-float-cta {
  position: fixed;
  left: 50%;
  bottom: 24px;
  z-index: 990;
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, 22px) scale(0.94);
  filter: blur(3px);
  transition:
    opacity 0.16s ease-in,
    transform 0.2s cubic-bezier(0.4, 0, 1, 1),
    filter 0.16s ease-in,
    visibility 0.2s;
  font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont,
    "Apple SD Gothic Neo", "Malgun Gothic", "Segoe UI", sans-serif;
}
.dj-float-cta.show {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0) scale(1);
  filter: blur(0);
  transition:
    opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.5s cubic-bezier(0.34, 1.45, 0.5, 1),
    filter 0.3s ease-out,
    visibility 0.3s;
}

.dj-float-cta a {
  position: relative;
  z-index: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 56px;
  padding: 0 30px;
  border-radius: 999px;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #fff;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 10px 30px rgba(16, 22, 40, 0.28);
  transition: transform 0.16s cubic-bezier(0.23, 1, 0.32, 1);
}
/* 히어로 CTA(.first a.btn)와 동일 스펙: 검정 필 + 상시 회전 글로우 링, 호버 시 브랜드 블루 */
.dj-float-cta a::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  border-radius: 999px; background: #1f2023;
  transition: background-color 0.2s ease;
}
.dj-float-cta a:hover::after { background: #0046ff; }
.dj-float-cta a::before {
  content: ""; position: absolute; inset: -1.5px; z-index: -2;
  border-radius: 999px;
  background: conic-gradient(from var(--dj-glow-angle),
    #1c66ff 0%, #ffffff 30%, rgba(255, 255, 255, 0.25) 55%, #1c66ff 100%);
  animation: djGlowSpin 3.2s linear infinite;
  filter: drop-shadow(0 0 10px rgba(28, 102, 255, 0.45)) drop-shadow(0 0 14px rgba(255, 255, 255, 0.25));
}
.dj-float-cta a:active { transform: scale(0.97); }

@media (max-width: 760px) {
  .dj-gnb { --gnb-h: 60px; }
  .dj-gnb-inner { padding: 0 20px; }
  /* 모바일은 좌우 꽉 찬 바 — translate(-50%)를 쓰지 않으므로 transform을 따로 정의 */
  .dj-float-cta { left: 16px; right: 16px; bottom: 16px; transform: translateY(22px) scale(0.97); }
  .dj-float-cta.show { transform: translateY(0) scale(1); }
  .dj-float-cta a { width: 100%; height: 54px; font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .dj-float-cta a::before { animation: none; }
  .dj-gnb-menu, .dj-gnb-panel { transition: none; }
  .dj-float-cta,
  .dj-float-cta.show { transition: opacity 0.15s linear, visibility 0.15s; filter: none; }
  .dj-float-cta { transform: translate(-50%, 0); }
  .dj-float-cta.show { transform: translate(-50%, 0); }
}

/* GNB-GATE ▼ 노출 카테고리 제한 — 대출(매담대)·DJ Bank 이야기 만 보인다 (2026-09-18 채린)
   나머지(예금·고객후기·법인 금융 가이드)는 마크업은 그대로 두고 표시만 가린다. 데스크톱 nav 와 폰 드로어 모두.
   항목을 더 열려면 아래 :not() 목록에 data-gnb 값을 추가, 전부 되살리려면 이 블록만 지운다.
   (09-17 판은 메뉴·햄버거를 통째로 숨겼었다 — 지금은 보이는 항목이 있으니 햄버거도 다시 보인다) */
.dj-gnb-nav > .dj-gnb-item:not([data-gnb="deposit"]):not([data-gnb="loan"]):not([data-gnb="bizlog"]),
.dj-gnb-panel > [data-gnb]:not([data-gnb="deposit"]):not([data-gnb="loan"]):not([data-gnb="bizlog"]) {
  display: none !important;
}
/* GNB-GATE ▲ */