@charset "UTF-8";
/* =============================================================
   nav-sub.css
   헤더 네비게이션 서브메뉴(서비스) 전용.
   common.css 의 .header .nav 규칙을 건드리지 않고 덮어쓰기만 한다.
   색상·폰트 크기는 common.css / blog 카드에서 쓰던 값을 승계한다.
   ============================================================= */

.header .nav ul li.has-sub {
  position: relative;
}

/* .header .nav ul 의 flex/gap 규칙이 중첩 ul 에도 걸리므로 되돌린다 */
.header .nav ul li.has-sub .nav__sub {
  display: none;
  position: absolute;
  top: 100%;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  gap: 0;
  padding: 1.6rem 0;
  margin-top: 1.2rem;
  min-width: 22rem;
  background-color: rgba(17, 17, 17, 0.9);
  -webkit-backdrop-filter: blur(2rem);
          backdrop-filter: blur(2rem);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 20px;
}

/* 마우스가 메뉴와 패널 사이 여백을 지날 때 닫히지 않도록 */
.header .nav ul li.has-sub .nav__sub::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -1.2rem;
  height: 1.2rem;
}

.header .nav ul li.has-sub:hover .nav__sub,
.header .nav ul li.has-sub:focus-within .nav__sub {
  display: block;
}

.header .nav ul li.has-sub .nav__sub li {
  white-space: nowrap;
}

.header .nav ul li.has-sub .nav__sub li a {
  display: block;
  padding: 1.2rem 2.4rem;
}

/* =============================================================
   반응형 — 기존 breakpoint(1024px / 768px) 준수
   ============================================================= */
@media (max-width: 1024px) {
  .header .nav ul li.has-sub .nav__sub {
    min-width: 20rem;
  }
}

/* 모바일에서는 패널을 열지 않는다.
   '서비스' 항목 자체가 /service/takeover 로 이동한다. */
@media (max-width: 768px) {
  .header .nav ul li.has-sub .nav__sub {
    display: none !important;
  }
}

/* =============================================================
   모바일 헤더 오버플로 대응 (2026-08-11)
   '서비스' 항목이 늘어 6개가 되면서 375px 폭에서 로고와 메뉴가 겹친다.
   폰트·간격을 줄이고, 그래도 넘치는 만큼은 가로 스크롤로 흘려보낸다.
   common.css 는 건드리지 않고 여기서만 덮어쓴다.
   ============================================================= */
@media (max-width: 768px) {
  /* 로고는 절대 찌그러지지 않게 */
  .header .logo {
    -ms-flex-negative: 0;
        flex-shrink: 0;
  }

  /* nav 를 스크롤 컨테이너로. min-width:0 이 없으면 flex 아이템이 줄지 않는다 */
  .header .nav {
    min-width: 0;
    margin-left: 1.2rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    /* 스크롤바는 숨긴다 (헤더가 얇아서 노출되면 지저분하다) */
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .header .nav::-webkit-scrollbar {
    display: none;
  }

  .header .nav ul {
    -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
    gap: 1.2rem;
  }
  .header .nav ul li {
    -ms-flex-negative: 0;
        flex-shrink: 0;
  }
  .header .nav ul li a .ko {
    font-size: 1.4rem;
  }
  /* 마지막 항목이 화면 끝에 붙어 잘린 것처럼 보이지 않도록 여유 */
  .header .nav ul li:last-child {
    padding-right: 0.4rem;
  }
}