/* ==========================================================================
   sections/header.css — 헤더 · 로고 · 메뉴 · CTA · 모바일 드로어

   전 페이지 공통이라 항상 로드됩니다.
   디자인 값은 전부 tokens.css 의 --c4-* 를 참조합니다.

   전환선:
     1024  헤더 메뉴 → 드로어 (기준선)
      768  헤더 높이·좌우 여백 (기준선)
     1279  ★ 메뉴 항목 간격 32 → 16. 헤더 컨테이너 1280 에서 도출한 **국소값**이며
           전환 기준선 3개(768·1024·1360)에 끼워 넣는 값이 아닙니다.
           값 자체는 tokens.css 에 있습니다.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. 헤더 바
   -------------------------------------------------------------------------- */

.c4-site-header {
  position: sticky;
  top: var(--c4-admin-bar-h, 0px);
  z-index: 100;
  background: var(--c4-color-header-bg);
  -webkit-backdrop-filter: blur(var(--c4-header-blur));
  backdrop-filter: blur(var(--c4-header-blur));

  /* PC 초기 상태에는 하단선이 없습니다 — 스크롤해야 생깁니다(.is-scrolled).
     border 를 항상 두고 색만 바꾸면 레이아웃이 흔들리지 않습니다. */
  border-bottom: var(--c4-border-w) solid transparent;
}

/* backdrop-filter 를 못 쓰는 브라우저에서는 반투명이 그냥 비쳐 보이므로 불투명으로. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .c4-site-header {
    background: var(--c4-color-white);
  }
}

/* 스크롤하면 하단선. header.js 가 scrollY > 0 일 때 붙입니다. */
.c4-site-header.is-scrolled {
  border-bottom-color: var(--c4-color-border);
}

.c4-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--c4-gutter-pc-chrome);
  height: var(--c4-header-h);
  max-width: calc(var(--c4-container-chrome) + var(--c4-gutter-pc-chrome) * 2);
  margin-inline: auto;
  padding-inline: var(--c4-gutter-pc-chrome);
}

.c4-header__logo {
  flex: 0 0 auto;
}

/* --------------------------------------------------------------------------
   2. 로고 — 헤더·푸터 공용 슬롯 190 × 48

   ★ 확정값의 '이미지 로고 표시 규격' 여섯 줄을 그대로 겁니다.
     하나라도 빠지면 찌그러지거나 넘칩니다.
   ★ object-fit: cover 를 쓰지 마세요 — 로고를 잘라냅니다.
   ★ wp_get_attachment_image() 가 width/height 속성을 붙이므로 CSS 로 반드시 덮습니다.
   ★ SVG 는 내재 크기가 없을 수 있어 같은 규칙으로 함께 묶습니다(예외 처리 금지).
   ★ 헤더 높이는 로고 때문에 변하지 않습니다 — 슬롯 높이가 48 로 고정입니다.
   -------------------------------------------------------------------------- */

.c4-logo {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;   /* 좌측 정렬 — 가운데·우측 정렬 금지 */
  width: var(--c4-logo-w);
  height: var(--c4-logo-h);
}

.c4-logo__img {
  width: 100%;
  max-width: var(--c4-logo-w);
  height: auto;
  max-height: var(--c4-logo-h);
  object-fit: contain;
  object-position: left center;
}

.c4-logo__text {
  font-size: var(--c4-type-logo-size);
  font-weight: var(--c4-type-logo-weight);
  line-height: var(--c4-type-logo-lh);
  letter-spacing: var(--c4-type-logo-ls);   /* ★ 이 계열만 자간 0 */
  white-space: nowrap;
}

.c4-logo--header .c4-logo__text {
  color: var(--c4-color-text);
}

.c4-logo--footer .c4-logo__text {
  color: var(--c4-color-white);
}

/* --------------------------------------------------------------------------
   3. 메뉴 — 1차만 (depth 1)

   ★ 항목이 늘어도 CTA 와 겹치지 않게: 간격을 32 → 16 으로 줄이고,
     그래도 넘치면 nav 만 가로 스크롤합니다. CTA 는 flex-shrink:0 이라
     항상 온전히 클릭 가능합니다.
   -------------------------------------------------------------------------- */

.c4-header__nav {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  justify-content: center;
  overflow-x: auto;
  scrollbar-width: none;
}

.c4-header__nav::-webkit-scrollbar {
  display: none;
}

.c4-menu {
  display: flex;
  align-items: center;
  gap: var(--c4-header-menu-gap);
  list-style: none;
  margin: 0;
  padding: 0;
}

.c4-menu > li {
  flex: 0 0 auto;
}

.c4-menu a {
  display: block;
  font-size: var(--c4-type-menu-size);
  font-weight: var(--c4-type-menu-weight);
  line-height: var(--c4-type-menu-lh);
  color: var(--c4-color-text);
  white-space: nowrap;
}

.c4-menu a:hover,
.c4-menu a:focus-visible {
  color: var(--c4-color-text-sub);
}

/* 현재 항목.
   ★ .current_page_item 을 함께 적습니다 — 메뉴 미지정 시 fallback 인
     wp_page_menu() 가 .current-menu-item 이 아니라 이 클래스를 출력합니다. */
.c4-menu .current-menu-item > a,
.c4-menu .current-menu-parent > a,
.c4-menu .current-menu-ancestor > a,
.c4-menu .current_page_item > a,
.c4-menu .current_page_parent > a,
.c4-menu .current_page_ancestor > a,
/* ★ 8단계 추가 — 2차 카테고리를 보는데 그 자식이 메뉴에 없을 때.
   코어는 그때 `current-menu-parent` 가 아니라 **`current-category-parent`** 를 붙입니다.
   이 둘이 없으면 부모 항목이 강조되지 않아 "지금 어디인지"가 사라집니다.
   ★ 이 둘을 CSS 가 보게 되면서 단일 글에서 두 항목이 동시에 켜질 수 있게 됐으므로,
     `c4_narrow_menu_current()` 가 이 클래스도 함께 좁힙니다(inc/template-tags.php). */
.c4-menu .current-category-parent > a,
.c4-menu .current-category-ancestor > a {
  color: var(--c4-color-accent);
}

/* --------------------------------------------------------------------------
   4. 문의하기 CTA
   -------------------------------------------------------------------------- */

.c4-header__cta {
  flex: 0 0 auto;
}

.c4-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--c4-cta-gap);

  /* ★ width 가 아니라 min-width 입니다. 문구가 옵션이라 길어지면 늘어나야 합니다.
     시안 문구에서는 아이콘·간격·패딩까지 더해 120 보다 조금 넓게 렌더되는 것이 정상입니다. */
  min-width: var(--c4-cta-min-w);
  height: var(--c4-cta-h);
  padding: var(--c4-cta-pad-y) var(--c4-cta-pad-x);

  background: var(--c4-color-accent);
  border-radius: var(--c4-radius-button);
  color: var(--c4-color-white);
  font-size: var(--c4-type-cta-size);
  font-weight: var(--c4-type-cta-weight);
  line-height: var(--c4-type-cta-lh);
  white-space: nowrap;
}

.c4-cta .c4-icon {
  flex: 0 0 auto;
  width: auto;
  height: var(--c4-icon-cta);
  color: currentColor;   /* 아이콘이 글자색을 따라갑니다 */
}

/* --------------------------------------------------------------------------
   5. 햄버거 · 드로어 토글

   개폐는 checkbox + label 로 하고(CSS-only), JS 는 보조만 합니다.
   -------------------------------------------------------------------------- */

.c4-burger {
  flex: 0 0 auto;
  display: none;               /* 1024 이상에서는 숨김 */
  width: var(--c4-icon-burger);
  height: var(--c4-icon-burger);
  color: var(--c4-color-text);
  cursor: pointer;
}

.c4-burger .c4-icon {
  width: 100%;
  height: 100%;
}

.c4-burger__close {
  display: none;
}

/* 열림 상태: 아이콘이 X 가 아니라 가로선 1개로 바뀝니다(시안 그대로).
   checkbox 와 label 이 형제라 인접 선택자로 됩니다. */
.c4-drawer-toggle:checked ~ .c4-burger .c4-burger__open {
  display: none;
}

.c4-drawer-toggle:checked ~ .c4-burger .c4-burger__close {
  display: block;
}

/* sr-only 인 checkbox 가 포커스를 받으면 눈에 보이는 label 에 링을 그립니다. */
.c4-drawer-toggle:focus-visible ~ .c4-burger {
  outline: var(--c4-focus-w) solid var(--c4-color-focus);
  outline-offset: var(--c4-focus-offset);
}

/* --------------------------------------------------------------------------
   6. 드로어

   헤더 아래 전체를 덮는 불투명 패널.
   ★ 높이 기준은 --c4-header-h 입니다 — 드로어는 1024 미만에서 뜨는데 헤더 높이는
     768 에서 바뀌므로 숫자로 박으면 768~1023 구간에서 8px 어긋납니다.
   -------------------------------------------------------------------------- */

.c4-drawer {
  display: none;
  position: fixed;
  top: calc(var(--c4-admin-bar-h, 0px) + var(--c4-header-h));
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 95;
  background: var(--c4-color-white);
}

/* :has() 로 여는 이유: 토글은 헤더 안(시각·탭 순서를 맞추려고)에, 드로어는 헤더 밖
   (backdrop-filter 컨테이닝 블록 문제 회피)에 있어 형제 선택자가 닿지 않습니다. */
.c4-site:has(.c4-drawer-toggle:checked) .c4-drawer {
  display: block;
}

.c4-drawer__inner {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow-y: auto;
}

.c4-drawer__nav {
  padding: var(--c4-drawer-pad-top) var(--c4-drawer-pad-x) var(--c4-drawer-pad-bottom);
}

.c4-menu--drawer {
  flex-direction: column;
  align-items: flex-start;
  gap: var(--c4-drawer-link-gap);
}

.c4-menu--drawer a {
  font-size: var(--c4-type-menu-drawer-size);
  line-height: var(--c4-type-menu-drawer-lh);
  white-space: normal;
}

.c4-drawer__cta {
  margin-top: auto;
  padding: 0 var(--c4-drawer-cta-inset) var(--c4-drawer-cta-inset);
}

.c4-cta--drawer {
  display: flex;
  width: 100%;
}

/* 드로어가 열린 동안 배경 스크롤 잠금 — header.js 가 <html> 에 붙입니다.
   ★ body 가 아니라 html 에 겁니다(body 에 걸면 sticky 가 죽습니다). */
html.c4-scroll-lock {
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   7. 전환
   -------------------------------------------------------------------------- */

/* 1024 미만 — 메뉴·CTA 를 헤더에서 빼고 햄버거를 노출.
   ★ 태블릿 768–1023 구간에서도 헤더에 CTA 가 보이지 않는 것이 정상입니다. */
@media (max-width: 1023.98px) {
  .c4-header__nav,
  .c4-header__cta {
    display: none;
  }

  .c4-burger {
    display: block;
  }
}

/* 1024 이상 — 드로어는 존재하지 않습니다. */
@media (min-width: 1024px) {
  .c4-drawer,
  .c4-drawer-toggle {
    display: none;
  }
}

/* 768 미만 — 헤더 높이 72, 좌우 여백은 헤더·푸터 전용 토큰(20).
   로고만 안에서 4 들여써 기준선이 24 가 됩니다(햄버거는 20 에 맞습니다). */
@media (max-width: 767.98px) {
  .c4-site-header {
    background: var(--c4-color-white);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border-bottom-color: var(--c4-color-border);   /* 모바일은 하단선 상시 */
  }

  .c4-header__inner {
    padding-inline: var(--c4-gutter-mobile-chrome);
  }

  .c4-header__logo {
    margin-left: var(--c4-header-logo-indent);
  }
}

/* --------------------------------------------------------------------------
   8. :has() 미지원 폴백

   드로어 개폐가 :has() 하나에 걸려 있으므로, 그게 없으면 메뉴에 도달할 수 없게 됩니다.
   그런 브라우저에서는 햄버거를 감추고 메뉴를 헤더 안에 그대로 노출합니다
   (넘치면 nav 가 가로 스크롤되므로 좁은 화면에서도 쓸 수 있습니다).
   -------------------------------------------------------------------------- */

@supports not selector(:has(*)) {
  @media (max-width: 1023.98px) {
    .c4-burger,
    .c4-drawer-toggle,
    .c4-drawer {
      display: none;
    }

    .c4-header__nav {
      display: flex;
      justify-content: flex-end;
    }
  }
}