/* =========================================================
   헤더 — 메인 비주얼(.hero) 위에서는 투명, 그 외 페이지는 남색 배경
========================================================= */

.site-header {
  position: absolute;
  top: 0; left: 0;
  z-index: 200000;
  width: 100%;
  height: 135px;
  background: transparent;
  transition: height .3s ease, background-color .3s ease, box-shadow .3s ease;
}


.site-header.is-fixed {
  position: fixed;
  height: 90px;
  background: rgba(13, 71, 161, .88);
  box-shadow: 0 4px 20px rgba(0, 0, 0, .12);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
}

/* 메인 비주얼이 없는 페이지: 문서 흐름에 남는 sticky 헤더라 스크롤 시 본문이 밀리지 않음 */
body:not(:has(.hero)) .site-header,
body:not(:has(.hero)) .site-header.is-fixed {
  position: sticky;
  height: 90px;
  background: var(--navy);
}
body:not(:has(.hero)) .site-header.is-fixed { box-shadow: 0 4px 20px rgba(0, 0, 0, .12); }
body:not(:has(.hero)) .site-header .gnb-link::after { bottom: 20px; }

.header-inner {
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 1600px;
  height: 100%;
  margin: 0 auto;
  padding: 0 60px;
}

.header-logo { flex: 0 0 auto; color: #fff; }

.header-line {
  position: absolute; right: 0; bottom: 0; left: 0;
  height: 1px; background: rgba(255, 255, 255, .3);
}

/* PC 메뉴 */
.gnb { display: flex; flex: 1 1 auto; align-items: center; justify-content: center; height: 100%; }
.gnb-list { display: flex; align-items: center; height: 100%; margin: 0; padding: 0; list-style: none; }
.gnb-item { position: relative; display: flex; align-items: center; height: 100%; padding: 0 15px; }
.gnb-link {
  position: relative; display: flex; align-items: center; height: 100%;
  color: #fff; font-size: 17px; font-weight: 500; letter-spacing: -.6px; white-space: nowrap;
}
.gnb-link::after {
  content: ""; position: absolute; right: 0; bottom: 33px; left: 0;
  height: 2px; background: #fff; transform: scaleX(0); transition: transform .25s ease, bottom .3s ease;
}
.site-header.is-fixed .gnb-link::after { bottom: 20px; }
.gnb-item:hover .gnb-link::after,
.gnb-item:focus-within .gnb-link::after,
.gnb-link.is-current::after { transform: scaleX(1); }
.gnb-link.is-current { font-weight: 700; }

.gnb-sub {
  position: absolute; top: calc(50% + 24px); left: 50%; z-index: 300000;
  width: 200px; margin: 0; padding: 0; list-style: none;
  background: #fff; border: 1px solid #cacaca; box-shadow: 0 8px 24px rgba(0, 0, 0, .13);
  opacity: 0; visibility: hidden; transform: translate(-50%, 12px);
  transition: opacity .22s ease, visibility .22s ease, transform .22s ease;
}
.gnb-item:hover .gnb-sub,
.gnb-item:focus-within .gnb-sub { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.gnb-sub-item { border-bottom: 1px solid #ededed; }
.gnb-sub-item:last-child { border-bottom: 0; }
.gnb-sub-link {
  display: flex; align-items: center; min-height: 40px; padding: 9px 18px;
  color: #333; font-size: 14px; transition: color .2s, background-color .2s;
}
.gnb-sub-link:hover, .gnb-sub-link:focus { color: #fff; background: var(--blue); }

.header-member { flex: 0 0 auto; display: flex; justify-content: flex-end; }
.header-tel {
  display: inline-flex; align-items: center; height: 42px; padding: 0 20px;
  border-radius: 21px; background: var(--orange); color: #fff;
  font-size: 17px; font-weight: 700; white-space: nowrap;
}

/* 햄버거 */
.mobile-toggle {
  display: none; flex-direction: column; justify-content: center; gap: 5px;
  width: 42px; height: 42px; margin-left: auto; padding: 8px 6px;
  background: transparent; border: 0; cursor: pointer;
}
.mobile-toggle span { display: block; width: 100%; height: 2px; background: #fff; }

/* 모바일 메뉴 */
.mobile-menu {
  position: fixed; top: 0; right: 0; z-index: 500000;
  width: min(390px, 88vw); height: 100%; overflow-y: auto;
  background: #fff; box-shadow: -10px 0 40px rgba(0, 0, 0, .18);
  visibility: hidden; transform: translateX(105%);
  transition: transform .35s ease, visibility .35s ease;
}
.mobile-menu.is-open { visibility: visible; transform: translateX(0); }
.mobile-menu-head {
  display: flex; align-items: center; justify-content: space-between;
  min-height: 85px; padding: 18px 20px; background: var(--navy);
}
.mobile-close { position: relative; width: 42px; height: 42px; padding: 0; background: transparent; border: 0; cursor: pointer; }
.mobile-close span { position: absolute; top: 20px; left: 8px; width: 27px; height: 2px; background: #fff; }
.mobile-close span:first-child { transform: rotate(45deg); }
.mobile-close span:last-child { transform: rotate(-45deg); }

.mobile-nav-list { margin: 0; padding: 0; list-style: none; }
.mobile-nav-item { border-bottom: 1px solid #e7e7e7; }
.mobile-nav-link, .mobile-sub-toggle {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; min-height: 59px; padding: 15px 22px;
  color: #222; background: #fff; border: 0;
  font: inherit; font-size: 16px; font-weight: 600; letter-spacing: -.5px; text-align: left; cursor: pointer;
}
.mobile-sub-toggle i { position: relative; display: block; width: 14px; height: 14px; }
.mobile-sub-toggle i::before, .mobile-sub-toggle i::after {
  content: ""; position: absolute; top: 6px; left: 1px; width: 12px; height: 1px; background: #555;
  transition: transform .25s ease;
}
.mobile-sub-toggle i::after { transform: rotate(90deg); }
.mobile-nav-item.is-open .mobile-sub-toggle i::after { transform: rotate(0); }
.mobile-sub { display: none; margin: 0; padding: 8px 0; list-style: none; background: #f4f8fc; }
.mobile-nav-item.is-open .mobile-sub { display: block; }
.mobile-sub-link { display: block; padding: 12px 25px 12px 38px; color: #555; font-size: 14px; }
.mobile-sub-link:hover { color: #fff; background: var(--blue); }
.mobile-menu-call { padding: 20px; }
.mobile-menu-call a {
  display: flex; align-items: center; justify-content: center; min-height: 48px;
  border-radius: 24px; background: var(--orange); color: #fff; font-size: 16px; font-weight: 700;
}

.mobile-dim {
  position: fixed; inset: 0; z-index: 400000;
  background: rgba(0, 0, 0, .58); opacity: 0; visibility: hidden;
  transition: opacity .3s ease, visibility .3s ease;
}
.mobile-dim.is-open { opacity: 1; visibility: visible; }

/* 반응형 */
@media (max-width: 1500px) {
  .header-inner { padding: 0 30px; }
  .gnb-item { padding: 0 11px; }
  .gnb-link { font-size: 15px; }
}

@media (max-width: 1200px) {
  .site-header { height: 92px; }
  .site-header.is-fixed { height: 72px; }
  .header-inner { padding: 0 24px; }
  .gnb, .header-member { display: none; }
  .mobile-toggle { display: flex; }
}

@media (max-width: 767px) {
  .site-header,
  .site-header.is-fixed,
  body:not(:has(.hero)) .site-header,
  body:not(:has(.hero)) .site-header.is-fixed {
    position: sticky; height: 76px; background: #fff; box-shadow: none;
    backdrop-filter: none; -webkit-backdrop-filter: none;
  }
  .site-header.is-fixed,
  body:not(:has(.hero)) .site-header.is-fixed {
    background: rgba(255, 255, 255, .97); box-shadow: 0 3px 14px rgba(0, 0, 0, .1);
  }
  .header-inner { padding: 0 16px; }
  .header-logo { color: var(--navy); }
  .mobile-toggle span { background: #222; }
  .header-line { background: #e5e5e5; }
}