/* ==============================================
   새솔경영자문센터 | Header / Navigation
   theme/saesol/css/header.css
   ============================================== */

/* ── 페이퍼로지 폰트 ── */
@import url('https://cdn.jsdelivr.net/gh/fonts-archive/Paperlogy/Paperlogy.css');

/* ── 공통 리셋 (헤더 범위) ── */
#ss-header,
#ss-header * {
  box-sizing: border-box;
}
#ss-header a  { text-decoration: none; color: inherit; }
#ss-header ul { list-style: none; margin: 0; padding: 0; }

/* ==============================================
   HEADER WRAP
   ============================================== */
#ss-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9000;

  /* 투명 배경 – 동영상이 그대로 보임 */
  background: transparent;
  transition: background .4s ease, box-shadow .4s ease;
}

/* 스크롤 후 반투명 처리 */
#ss-header.is-scrolled {
  background: rgba(10, 10, 10, .88);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 1px 0 rgba(255,255,255,.05);
}

/* ── 내부 컨테이너 (최대 1440px) ── */
.hd-wrap {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 48px;
  display: flex;
  align-items: flex-start;   /* 로고 상단 정렬 */
  justify-content: space-between;
}

/* ==============================================
   LOGO
   ============================================== */
.hd-logo {
  display: block;
  flex-shrink: 0;
  margin-top: 17px;          /* 시안 상단 거리 27px */
  line-height: 0;            /* img 하단 여백 제거 */
}
.hd-logo img {
  /* width: 263px; */
  height: 63px;
  object-fit: contain;
  object-position: left center;
  display: block;
}

/* ==============================================
   GNB (PC)
   ============================================== */
.hd-gnb {
  display: flex;
  align-items: center;
  height: 100px;   /* 로고 높이(75) + 상단(27) + 하단 패딩 */
  gap: 0;
}

.hd-gnb-item {
  position: relative;
}

.hd-gnb-link {
  display: block;
  padding: 8px 28px;
  font-family: 'Paperlogy', 'Noto Sans KR', sans-serif;
  font-size: 17px;
  font-weight: 500;
  color: rgba(255, 255, 255, .9);
  letter-spacing: .02em;
  white-space: nowrap;
  position: relative;
  transition: color .2s ease;
}

/* 하단 밑줄 – 호버/활성 */
.hd-gnb-link::after {
  content: '';
  position: absolute;
  bottom: 2px;
  left: 50%;
  transform: translateX(-50%) scaleX(0);
  width: calc(100% - 56px);   /* 양쪽 padding 28px 제외 */
  height: 1.5px;
  background: #fff;
  border-radius: 1px;
  transition: transform .25s ease;
  transform-origin: center;
}
.hd-gnb-link:hover,
.hd-gnb-link.is-active {
  color: #fff;
}
.hd-gnb-link:hover::after,
.hd-gnb-link.is-active::after {
  transform: translateX(-50%) scaleX(1);
}

/* ── 드롭다운 (서브메뉴) ── */
.hd-dropdown {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  min-width: 160px;
  background: rgba(12,12,12,.94);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 8px;
  padding: 8px 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity .22s ease, transform .22s ease, visibility .22s;
  box-shadow: 0 16px 40px rgba(0,0,0,.4);
  backdrop-filter: blur(12px);
}
/* 연결 브리지 */
.hd-dropdown::before {
  content: '';
  position: absolute;
  top: -8px; left: 0; right: 0;
  height: 8px;
}
.hd-gnb-item:hover .hd-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}
.hd-dropdown a {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px 20px;
  font-family: 'Paperlogy', 'Noto Sans KR', sans-serif;
  font-size: 14px;
  color: rgba(255,255,255,.55);
  letter-spacing: .01em;
  transition: color .18s, background .18s;
}
.hd-dropdown a::before {
  content: '';
  width: 4px; height: 4px;
  border-radius: 50%;
  background: #2C6E2C;
  flex-shrink: 0;
  opacity: 0;
  transition: opacity .18s;
}
.hd-dropdown a:hover {
  color: #fff;
  background: rgba(255,255,255,.05);
}
.hd-dropdown a:hover::before { opacity: 1; }

/* ==============================================
   HAMBURGER (모바일)
   ============================================== */
.hd-hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  width: 44px;
  height: 44px;
  padding: 8px;
  margin-top: -2px;
  cursor: pointer;
  flex-shrink: 0;
  align-self: flex-start;
}
.hd-hamburger span {
  display: block;
  height: 1.5px;
  background: rgba(255,255,255,.85);
  border-radius: 2px;
  transition: transform .28s ease, opacity .28s ease, width .28s ease;
  transform-origin: center;
}
.hd-hamburger span:nth-child(1) { width: 100%; }
.hd-hamburger span:nth-child(2) { width: 72%; }
.hd-hamburger span:nth-child(3) { width: 100%; }

/* 열린 상태 */
.hd-hamburger.is-open span:nth-child(1) {
  transform: rotate(45deg) translate(5.5px, 5.5px);
  width: 100%;
}
.hd-hamburger.is-open span:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}
.hd-hamburger.is-open span:nth-child(3) {
  transform: rotate(-45deg) translate(5.5px, -5.5px);
  width: 100%;
}

/* ==============================================
   MOBILE DRAWER
   ============================================== */
#ss-mobile-nav {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(320px, 84vw);
  background: rgba(10,10,10,.97);
  backdrop-filter: blur(20px);
  border-left: 1px solid rgba(255,255,255,.06);
  z-index: 8999;
  padding: 100px 0 48px;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform .35s cubic-bezier(.4,0,.2,1);
  overflow-y: auto;
}
#ss-mobile-nav.is-open {
  transform: translateX(0);
}

/* 배경 오버레이 */
#ss-nav-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);
  z-index: 8998;
  opacity: 0;
  pointer-events: none;
  transition: opacity .35s ease;
}
#ss-nav-overlay.is-open {
  opacity: 1;
  pointer-events: auto;
}

.mob-nav-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 32px;
  font-family: 'Paperlogy', 'Noto Sans KR', sans-serif;
  font-size: 18px;
  font-weight: 500;
  color: rgba(255,255,255,.75);
  border-bottom: 1px solid rgba(255,255,255,.05);
  letter-spacing: .01em;
  transition: color .2s, background .2s;
}
.mob-nav-link:hover {
  color: #fff;
  background: rgba(255,255,255,.04);
}
.mob-nav-link svg {
  width: 16px; height: 16px;
  opacity: .3;
}

/* 모바일 서브메뉴 아코디언 */
.mob-sub {
  display: none;
  flex-direction: column;
  background: rgba(255,255,255,.02);
}
.mob-sub.is-open { display: flex; }
.mob-sub a {
  padding: 14px 48px;
  font-family: 'Paperlogy', 'Noto Sans KR', sans-serif;
  font-size: 15px;
  color: rgba(255,255,255,.45);
  border-bottom: 1px solid rgba(255,255,255,.03);
  transition: color .2s;
}
.mob-sub a:hover { color: rgba(255,255,255,.8); }

/* 모바일 하단 CTA */
.mob-cta-wrap {
  margin-top: auto;
  padding: 24px 32px 0;
}
.mob-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px;
  background: #2C6E2C;
  color: #fff;
  border-radius: 8px;
  font-family: 'Paperlogy', 'Noto Sans KR', sans-serif;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: .01em;
  transition: background .2s;
}
.mob-cta:hover { background: #3A8C3A; }

/* ==============================================
   RESPONSIVE
   ============================================== */
@media (max-width: 900px) {
  .hd-gnb       { display: none; }
  .hd-hamburger { display: flex; }
  .hd-wrap      {padding: 15px 24px;}
.hd-logo {
  display: block;
  flex-shrink: 0;
  margin-top: 4px;          /* 시안 상단 거리 27px */
  line-height: 0;            /* img 하단 여백 제거 */
}
  
}

@media (max-width: 480px) {
  .hd-logo img {
    width: 144px;
    height: auto;
  }
}
}