/* Site nav — 셀 분할 바: 로고 | 메뉴 셀(수직 헤어라인 구획) | 액센트 CTA 셀.
   2단 구조: "사업분야" 셀이 8개 사업 링크의 풀폭 패널을 연다.
   데스크톱 ≥1024px 셀 바, 미만은 토글 드롭다운 + 사업분야 아코디언. */

.site-header__bar {
  display: flex;
  align-items: stretch;
  height: 100%;
  width: 100%;
  padding-inline: max(var(--space-4), env(safe-area-inset-left)) max(0px, env(safe-area-inset-right));
}

.c-logo {
  display: inline-flex;
  align-items: center;
  padding-inline: var(--space-2) var(--space-6);
  text-decoration: none;
}

.c-logo img {
  height: 19px;
  width: auto;
}

.c-nav {
  display: flex;
  align-items: stretch;
  margin-left: auto;
}

.c-nav__list {
  display: flex;
  align-items: stretch;
  list-style: none;
  margin: 0;
  padding: 0;
}

.c-nav__item {
  display: flex;
  align-items: stretch;
  border-left: 1px solid var(--color-border);
}

.c-nav__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding-inline: clamp(1rem, 1.8vw, 1.75rem);
  font-family: inherit;
  font-size: var(--font-size-sm);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--color-text);
  text-decoration: none;
  background: none;
  border: 0;
  cursor: pointer;
  transition: color 0.15s ease-out, background-color 0.15s ease-out;
}

.c-nav__link:hover {
  color: var(--color-primary-deep);
  background: var(--color-surface);
}

.c-nav__link.is-active {
  color: var(--color-primary-deep);
  box-shadow: inset 0 -2px 0 var(--color-primary);
}

.c-nav__chevron {
  transition: transform 0.2s ease-out;
}

.c-nav__group.is-open .c-nav__chevron {
  transform: rotate(180deg);
}

/* 사업분야 풀폭 패널 (데스크톱) — 헤더 바로 아래로 펼쳐진다 */
.c-nav__panel {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
  box-shadow: var(--shadow-md);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.2s ease-out, transform 0.22s cubic-bezier(0.2, 0, 0, 1),
    visibility 0s linear 0.22s;
}

.c-nav__group.is-open .c-nav__panel {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity 0.2s ease-out, transform 0.22s cubic-bezier(0.2, 0, 0, 1), visibility 0s;
}

.c-nav__panel-grid {
  list-style: none;
  margin: 0 auto;
  padding: var(--space-8) max(var(--space-6), env(safe-area-inset-left));
  max-width: var(--container-max);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-2) var(--space-6);
}

/* 사업분야 패널 — 9개 항목이라 3열×3행이 균형 (여정 패널은 기본 4열 유지) */
.c-nav__panel-grid--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.c-nav__sublink {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--space-4);
  border-radius: var(--radius-md);
  text-decoration: none;
  color: var(--color-text);
  transition: background-color 0.15s ease-out;
}

.c-nav__sublink:hover,
.c-nav__sublink.is-active {
  background: var(--color-primary-soft);
}

.c-nav__sublink strong {
  font-size: var(--font-size-base);
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--color-primary-deep);
}

.c-nav__sublink span {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

/* 우측 액센트 CTA 셀 */
.site-header__cta {
  display: inline-flex;
  align-items: center;
  padding-inline: clamp(1.25rem, 2.2vw, 2.25rem);
  border-left: 1px solid var(--color-border);
  /* 채움면은 --color-primary 가 아니라 --color-primary-fill — 14px/700 흰 글자 대비 5.31:1(hover 7.55:1).
     밝은 브랜드 그린(#3cc676)은 2.20:1 로 WCAG AA 미달이었다(2026-09-08, 21페이지 공용 헤더). 사유는 tokens.css 주석. */
  background: var(--color-primary-fill);
  color: var(--color-primary-contrast);
  font-size: var(--font-size-sm);
  font-weight: 700;
  letter-spacing: 0.02em;
  text-decoration: none;
  transition: background-color 0.15s ease-out;
}

.site-header__cta:hover {
  background: var(--color-primary-fill-hover);
}

/* 모바일 시트의 그룹 소제목 — 데스크톱 셀 바에서는 트리거 링크가 그 자리를 대신하므로 숨긴다.
   (모바일에서는 반대로 트리거를 숨긴다: 한쪽만 노출되므로 접근성 트리에도 하나만 남는다.) */
.c-nav__section {
  display: none;
}

/* 시트 백드롭 — 모바일에서만 존재한다. .site-header 가 backdrop-filter 로 fixed 자손의
   컨테이닝 블록이 되므로(홈은 그 필터를 끄기까지 한다) fixed 대신 리스트와 같은 absolute 를 쓴다.
   시트가 열린 동안은 문서 스크롤이 잠겨 있어 100dvh 높이가 화면을 정확히 덮는다. */
.c-nav__backdrop {
  display: none;
}

.c-nav__toggle {
  display: none;
  border: none;
  background: none;
  cursor: pointer;
  padding: var(--space-3);
  align-self: center;
}

.c-nav__toggle-bar {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--color-text);
  margin: 4px 0;
  transition: background-color 0.2s ease-out, transform 0.22s cubic-bezier(0.2, 0, 0, 1),
    opacity 0.15s ease-out;
}

@media (max-width: 1023px) {
  .c-nav__toggle {
    display: block;
  }

  /* 데스크톱은 CTA 셀이 오른쪽 끝까지 차는 풀블리드라 바의 우측 패딩이 0이다.
     모바일은 그 셀이 알약 버튼으로 바뀌므로 로고 쪽과 시각적으로 대칭인 여백을 준다
     (로고 24px = 바 16 + .c-logo 8 / 햄버거 24px = 바 12 + 버튼 패딩 12). */
  .site-header__bar {
    padding-right: max(var(--space-3), env(safe-area-inset-right));
  }

  /* 열림 = X. 바 중심은 위에서 5·11·17px 이므로 바깥 두 개를 6px 씩 중앙으로 모아 교차시킨다. */
  .c-nav.is-open .c-nav__toggle-bar:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
  }

  .c-nav.is-open .c-nav__toggle-bar:nth-child(2) {
    opacity: 0;
  }

  .c-nav.is-open .c-nav__toggle-bar:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
  }

  .c-nav__backdrop {
    display: block;
    position: absolute;
    top: var(--header-height);
    inset-inline: 0;
    height: 100dvh;
    background: rgba(12, 23, 18, 0.44);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.22s ease-out, visibility 0s linear 0.22s;
  }

  .c-nav.is-open .c-nav__backdrop {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.22s ease-out, visibility 0s;
  }

  .c-nav {
    margin-left: 0;
    order: 3; /* 모바일 바: 로고 | (여백) | CTA | 햄버거 */
  }

  .site-header__cta {
    order: 2;
    margin-left: auto;
    border-left: 0;
    border-radius: var(--radius-pill);
    align-self: center;
    padding: var(--space-3) var(--space-4); /* 세로 패딩 ↑ — 터치 타깃 44px 이상 확보 */
    margin-right: var(--space-2);
  }

  /* 트리거(햄버거, 우상단)에 앵커된 원점에서 머티리얼로 등장 —
     열림/닫힘이 같은 경로를 오간다(공간적 일관성).
     배경은 불투명 시트: 부모 .site-header 가 자체 backdrop-filter(layout.css)를 가져
     백드롭 루트가 되므로 이 패널에 backdrop-filter 를 걸어도 헤더 박스 안(패널 영역 밖)만
     샘플링돼 뒤 콘텐츠를 흐리지 못한다. 반투명(0.96)이던 시절 다크 .detail-hero 카피가
     메뉴 사이로 그대로 비쳤다(QA B-P2-1) — 토큰 배경으로 완전히 덮고 블러 의존을 없앴다.
     등장 모션(opacity·scale)은 그대로라 라이트 페이지 룩은 변하지 않는다. */
  .c-nav__list {
    position: absolute;
    top: var(--header-height);
    inset-inline: 0;
    flex-direction: column;
    background: var(--color-bg);
    border-bottom: 1px solid var(--color-border);
    max-height: calc(100dvh - var(--header-height));
    overflow-y: auto;
    /* 시트 끝에서 배경으로 스크롤이 이어지지 않게 한다. data-lenis-prevent(header.html)와 한 쌍 —
       Lenis 페이지(홈·브랜드 스토리)에서는 그 속성이 없으면 시트 안이 아예 스크롤되지 않았다. */
    overscroll-behavior: contain;
    z-index: 1; /* 백드롭(같은 컨테이닝 블록의 형제) 위 */
    transform-origin: top right;
    opacity: 0;
    visibility: hidden;
    /* 닫힌 시트는 탭을 받지 않는다 — opacity:0 은 페인트만 막고 히트 테스트는 막지 않는다.
       아래 .c-nav__panel 이 visibility 를 되살리는 구조라(항상 펼친 섹션형) 이 한 줄이 없으면
       보이지 않는 하위 링크가 헤더 아래 382×693 영역에서 콘텐츠 탭을 가로챈다(2026-09-07 실측:
       390×844 세로 샘플 19곳 중 12곳이 .c-nav__sublink 에 잡혔다). */
    pointer-events: none;
    transform: scale(0.98) translateY(-8px);
    transition: opacity 0.22s ease-out, transform 0.22s cubic-bezier(0.2, 0, 0, 1),
      visibility 0s linear 0.22s;
  }

  .c-nav.is-open .c-nav__list {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
    transition: opacity 0.22s ease-out, transform 0.22s cubic-bezier(0.2, 0, 0, 1),
      visibility 0s;
  }

  .c-nav__item {
    border-left: 0;
    border-top: 1px solid var(--color-border);
    flex-direction: column;
    align-items: stretch;
  }

  .c-nav__link {
    width: 100%;
    justify-content: space-between;
    padding: var(--space-4) var(--space-6);
    color: var(--color-text); /* 홈 투명 헤더 상태에서도 드롭다운(흰 배경) 안은 잉크 유지 */
  }

  /* 그룹 소제목 — 누를 것이 아니라 읽을 것이다. 아코디언이던 시절엔 이 자리가 링크이면서
     토글이라(탭해도 /about 으로 가지 않았다) 의미가 이중이었다. */
  .c-nav__section {
    display: block;
    padding: var(--space-4) var(--space-6) var(--space-2);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--color-text-muted);
  }

  /* 트리거(및 그 안의 셰브런)는 셀 바 전용 — 시트에서는 소제목이 대신한다. */
  .c-nav__trigger {
    display: none;
  }

  /* 하위 목록은 항상 펼쳐 둔다: 목적지 15개가 스크롤 한 번 안에 다 보이고 탭 수가 3 → 2로 준다. */
  .c-nav__panel {
    position: static;
    display: block;
    opacity: 1;
    /* visible 로 고정하지 않는다: 자손의 visible 은 조상(.c-nav__list 닫힘)의 hidden 을 되살려
       "보이지 않는데 눌리는" 레이어를 만든다. inherit 로 두면 시트 상태를 그대로 따라간다. */
    visibility: inherit;
    transform: none;
    transition: none;
    box-shadow: none;
    border-bottom: 0;
    background: none;
  }

  /* 2열 — 설명 문구를 감추므로 이름만 남아 한 줄에 두 개가 들어간다.
     왼쪽 패딩이 소제목보다 8px 더 커서 소속이 들여쓰기로 읽힌다. */
  .c-nav__panel-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 var(--space-2);
    padding: 0 var(--space-4) var(--space-3) var(--space-6);
    max-width: none;
  }

  .c-nav__sublink {
    flex-direction: row;
    align-items: center;
    gap: var(--space-3);
    min-height: 44px;
    padding: var(--space-3) var(--space-2);
  }

  /* 설명 문구는 셀 바 패널 전용 — 시트에서는 이름만 스캔한다. */
  .c-nav__sublink span {
    display: none;
  }

  /* 시트 안에서는 하위 항목과 최상위 항목(IR·뉴스룸·채용)이 같은 위계로 읽혀야 한다 —
     셀 바 패널의 강조 타이포(base·700·primary-deep)를 그대로 쓰면 하위가 더 커 보인다. */
  .c-nav__sublink strong {
    font-size: var(--font-size-sm);
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--color-text);
  }

  .c-nav__sublink.is-active strong {
    color: var(--color-primary-deep);
  }

  @media (prefers-reduced-motion: reduce) {
    .c-nav__list,
    .c-nav.is-open .c-nav__list {
      transform: none;
      transition: opacity 0.2s ease-out, visibility 0s;
    }

    .c-nav__toggle-bar {
      transition: none;
    }
  }

  /* 투명도 축소 선호 — 패널은 기본 규칙에서 이미 불투명·무블러이므로 같은 값으로 명시 */
  @media (prefers-reduced-transparency: reduce) {
    .c-nav__list {
      background: var(--color-bg);
      -webkit-backdrop-filter: none;
      backdrop-filter: none;
    }
  }
}

/* 사업분야 패널 — 별도 브랜드 항목의 마크 아이콘 */
.c-nav__sublink strong .u-brandmark {
  display: inline-block;
  vertical-align: -3px;
  margin-right: 2px;
}