/* ==========================================================================
   GNB — Pill Nav (webpio)
   Adapted from RathonTech pill-nav reference.
   Uses px values (project base font = 16px, no 62.5% rebase).
   ========================================================================== */

:root {
  --wd-gnb-primary:         #2459E5;
  --wd-gnb-primary-light:   #EAF0FC;
  --wd-gnb-primary-hover:   #1A45C0;
  --wd-gnb-text:            #191919;
  --wd-gnb-text-muted:      #5A5757;
  --wd-gnb-text-inverse:    #FFFFFF;
  --wd-gnb-surface:         #FFFFFF;
  --wd-gnb-border:          #E8E8E8;
  --wd-gnb-height:          96px;
  --wd-gnb-height-mobile:   80px;
  --wd-gnb-pill-radius:     40px;
}

/* --- Trans-X hover effect --- */
.wd-gnb .wd-trans-x {
  position: relative;
  z-index: 1;
  overflow: hidden;
}
.wd-gnb .wd-trans-x__box { position: relative; overflow: hidden; }
.wd-gnb .wd-trans-x__box > span {
  display: block;
  position: relative;
  transition: transform 0.3s ease-in-out;
}
.wd-gnb .wd-trans-x__box > span::after {
  content: attr(data-trans);
  position: absolute;
  top: 100%;
  left: 0;
  color: var(--wd-gnb-primary);
}
.wd-gnb .wd-trans-x:hover .wd-trans-x__box > span,
.wd-gnb .wd-trans-x:focus .wd-trans-x__box > span {
  transform: translateY(-100%);
}

/* Main offset below fixed header */
.wd-main { padding-top: var(--wd-gnb-height); }
@media (max-width: 1080px) {
  .wd-main { padding-top: var(--wd-gnb-height-mobile); }
}

/* 메인페이지(front-page)에서만 헤더와 hero가 겹치도록 main padding 제거 */
body.home .wd-main { padding-top: 0; }

/* --- Header block --- */
.wd-gnb {
  z-index: 100;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  padding: 12px 20px;
  font-size: 15px;
  font-weight: 500;
  transition: transform 0.3s ease-in-out;
}
.wd-gnb__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1400px;
  height: 72px;
  margin: 0 auto;
  padding: 0 14px 0 28px;
  position: relative;
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border-radius: 999px;
  box-shadow: 0 4px 16px rgba(15, 18, 32, 0.06);
  transition: box-shadow 0.3s ease-in-out, background 0.3s ease-in-out;
}
.wd-gnb--rolled .wd-gnb__inner {
  background: rgba(255, 255, 255, 0.7);
  box-shadow: 0 10px 32px rgba(15, 18, 32, 0.1);
}

/* Logo — webpio wordmark (SVG) */
.wd-gnb__logo {
  margin: 0;
  line-height: 1;
}
.wd-gnb__logo a {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}
.wd-gnb__logo-img {
  display: block;
  height: 32px;
  width: auto;
}
@media (max-width: 640px) {
  .wd-gnb__logo-img { height: 26px; }
}

/* Pill navigation container — 외부 바가 pill 역할을 하므로 자체 배경/그림자 없음 */
.wd-gnb__nav-pill {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  height: 56px;
  padding: 0;
  background: transparent;
  border-radius: 0;
}
.wd-gnb__nav-pill nav { height: 100%; }
.wd-gnb__nav-pill nav > ul {
  display: flex;
  gap: 4px;
  height: 100%;
  list-style: none;
  padding: 0;
  margin: 0;
}
.wd-gnb__nav-pill nav > ul > li {
  position: relative;
  display: flex;
  justify-content: center;
  height: 100%;
}

/* 1st-level links */
.wd-gnb__link {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 0 24px;
  white-space: nowrap;
  border-radius: 999px;
  font-size: 17px;
  font-weight: 600;
  color: var(--wd-gnb-text);
  text-decoration: none;
  letter-spacing: -0.02em;
  transition: background 0.3s ease-in-out, color 0.3s ease-in-out;
}
.wd-gnb__link:hover,
.wd-gnb__link:focus {
  background: var(--wd-gnb-primary-light);
  color: var(--wd-gnb-primary);
}
.wd-gnb__link.is-active {
  background: var(--wd-gnb-primary-light);
  color: var(--wd-gnb-primary);
  font-weight: 700;
}

/* Right area */
.wd-gnb__right {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Contact button — black pill → primary on hover */
.wd-gnb__contact {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  padding: 0 24px;
  background: var(--wd-gnb-text);
  color: var(--wd-gnb-text-inverse);
  border-radius: 999px;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.02em;
  text-decoration: none;
  position: relative;
  z-index: 1;
  overflow: hidden;
  transition: background 0.3s ease-in-out;
}
.wd-gnb__contact::before {
  content: '';
  z-index: -1;
  position: absolute;
  inset: 0;
  background: linear-gradient(93.47deg, #2459E5 14.46%, #249BE5 88.73%);
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}
.wd-gnb__contact:hover::before { opacity: 1; }
.wd-gnb__contact:hover .wd-trans-x__box > span::after {
  color: var(--wd-gnb-text-inverse);
}

/* Hamburger (mobile) */
.wd-gnb__hamburger {
  position: relative;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}
.wd-gnb__hamburger span {
  display: block;
  width: 20px;
  height: 1.5px;
  background: var(--wd-gnb-text);
  transition: transform 0.3s ease;
}

/* --- Mobile panel — 풀스크린 오버레이 --- */
.wd-gnb__mobile {
  position: fixed;
  inset: 0;
  z-index: 110;
  background: #fff;
  display: flex;
  flex-direction: column;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity 0.32s ease, transform 0.32s ease, visibility 0.32s ease;
  overscroll-behavior: contain;
}
.wd-gnb__mobile.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* 상단 바 — 로고 + 닫기 */
.wd-gnb__mobile-bar {
  flex-shrink: 0;
  height: 56px;
  padding: 0 16px 0 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #F0F1F4;
}
.wd-gnb__mobile-logo img { height: 22px; display: block; }
.wd-gnb__mobile-close {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 0;
  color: #0E1116;
  cursor: pointer;
  padding: 0;
}
.wd-gnb__mobile-close svg { width: 22px; height: 22px; }

/* 메인 nav — 큰 링크 리스트 */
.wd-gnb__mobile-nav {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 24px 24px 0;
  overflow-y: auto;
}
.wd-gnb__mobile-nav a {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 22px 4px;
  border-bottom: 1px solid #F0F1F4;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: #0E1116;
  text-decoration: none;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.4s ease, transform 0.4s ease, color 0.2s ease;
}
.wd-gnb__mobile.is-open .wd-gnb__mobile-nav a {
  opacity: 1;
  transform: translateY(0);
  transition-delay: calc(0.08s + var(--i, 1) * 0.06s);
}
.wd-gnb__mobile-num {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px;
  font-weight: 600;
  color: #9AA3B2;
  letter-spacing: 0.04em;
}
.wd-gnb__mobile-label {
  flex: 1;
  font-size: 26px;
}
.wd-gnb__mobile-arrow {
  width: 20px;
  height: 20px;
  color: #C2C8D2;
  transition: transform 0.2s ease, color 0.2s ease;
}
.wd-gnb__mobile-nav a:active,
.wd-gnb__mobile-nav a:hover { color: var(--color-primary, #2459E5); }
.wd-gnb__mobile-nav a:active .wd-gnb__mobile-arrow,
.wd-gnb__mobile-nav a:hover .wd-gnb__mobile-arrow {
  color: var(--color-primary, #2459E5);
  transform: translateX(4px);
}

/* 하단 — 정보 카드 + CTA */
.wd-gnb__mobile-foot {
  flex-shrink: 0;
  padding: 20px 24px calc(24px + env(safe-area-inset-bottom));
  background: #FAFBFC;
  border-top: 1px solid #F0F1F4;
}
.wd-gnb__mobile-info {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin: 0 0 16px;
  padding: 0;
  list-style: none;
}
.wd-gnb__mobile-info li {
  padding: 12px 10px;
  background: #fff;
  border: 1px solid #ECEEF1;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: center;
}
.wd-gnb__mobile-info span {
  font-size: 11px;
  font-weight: 500;
  color: #6B7280;
  letter-spacing: -0.02em;
}
.wd-gnb__mobile-info strong {
  font-size: 14px;
  font-weight: 700;
  color: #0E1116;
  letter-spacing: -0.03em;
}
.wd-gnb__mobile-cta {
  display: inline-flex;
  width: 100%;
  height: 56px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: #0E1116;
  color: #fff !important;
  border-radius: 14px;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.03em;
  text-decoration: none;
  border: none;
  transition: background 0.2s ease;
}
.wd-gnb__mobile-cta:hover { background: #1A1F2E; }
.wd-gnb__mobile-cta svg { width: 18px; height: 18px; }

/* 햄버거 → X 토글 */
.wd-gnb.is-mobile-open .wd-gnb__hamburger span:first-child {
  transform: translateY(3.25px) rotate(45deg);
}
.wd-gnb.is-mobile-open .wd-gnb__hamburger span:last-child {
  transform: translateY(-3.25px) rotate(-45deg);
}

/* --- Responsive (Tablet / Mobile) --- */
@media (max-width: 1080px) {
  .wd-gnb__nav-pill { display: none; }
  .wd-gnb__hamburger { display: flex; }
  .wd-gnb__contact { display: none; }
  .wd-gnb__inner { height: 56px; padding: 0 16px 0 22px; }
}