/* Shared full-bleed header mode for pages whose hero begins at the viewport top. */

/* 흰 막은 헤더 두 줄(로고 + 메뉴)을 **정확히** 덮어야 한다. 더 길면 메뉴바 아래에
   흰 띠가 남아 서브 페이지와 메뉴바 높이가 달라 보인다(QA #1613 — 데스크톱에서 12px
   초과였다. 모바일은 56+52=108 로 정확했다).
   그래서 막 높이를 상수로 적지 않고 메뉴 줄의 위치·높이에서 계산한다 — 한 곳만 고치면
   세 변형(기본·배너·모바일)이 함께 따라온다.
   ⚠ --overlay-menu-height 는 card/common_style.css.php 의 `#menu_r2 { height }` 와 같은
     값이다. 사용자 정의 속성은 위로 상속되지 않아 body 에서 그 값을 읽을 수 없다. */
body.renewal-header-overlay {
  --overlay-menu-top: 64px;
  --overlay-menu-height: 52px;
}

body.renewal-header-overlay::before {
  content: "";
  position: absolute;
  z-index: 188;
  top: 0;
  right: 0;
  left: 0;
  height: calc(var(--overlay-menu-top) + var(--overlay-menu-height));
  background: rgba(255, 255, 255, .86);
  -webkit-backdrop-filter: saturate(1.04) blur(18px);
  backdrop-filter: saturate(1.04) blur(18px);
  pointer-events: none;
}

body.renewal-header-overlay #menu_r1,
body.renewal-header-overlay #menu_r2 {
  position: absolute !important;
  right: 0;
  left: 0;
  z-index: 190 !important;
}

body.renewal-header-overlay #menu_r1 {
  top: 0 !important;
  border-color: transparent !important;
}

body.renewal-header-overlay #menu_r2 {
  top: var(--overlay-menu-top) !important;
  z-index: 189 !important;
  border-color: transparent !important;
}

body.renewal-header-overlay.has-header-top-banner {
  --overlay-menu-top: 104px;
  /* 맨 위 띠 배너(#menu_r1 첫 칸 · 40)가 히어로를 덮지 않게 흐름 전체를 띠 높이만큼 내린다 — 헤더가 히어로를 덮는 폭은
     띠가 없을 때와 같다(사장님 09-29 «띠배너 때문에 메인 히어로 높이가 줄어든다 · PC·모바일 둘 다»). 폰도 띠는 40이라 같은 값. */
  padding-top: 40px;
}

body.renewal-header-overlay #menu_r1,
body.renewal-header-overlay #menu_r1 .top_r1_block_wrapper,
body.renewal-header-overlay #menu_r1 .top_r1_block,
body.renewal-header-overlay #menu_r2 .fixed_header_content_box {
  background: transparent !important;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  transition: background-color .28s ease, box-shadow .28s ease, border-color .28s ease;
}

body.renewal-header-overlay #menu_r1 .top_r1_block_wrapper,
body.renewal-header-overlay #menu_r2 .fixed_header_content_box {
  border-color: transparent !important;
}

body.renewal-header-overlay.renewal-menu-pinned #menu_r2 {
  position: fixed !important;
  top: 0;
  z-index: 191;
}

body.renewal-header-overlay.renewal-menu-pinned #menu_r2 .fixed_header_content_box {
  background: rgba(255, 255, 255, .96) !important;
  -webkit-backdrop-filter: saturate(1.04) blur(18px);
  backdrop-filter: saturate(1.04) blur(18px);
  box-shadow: 0 8px 24px rgba(36, 31, 26, .06);
}

@media (max-width: 767px) {
  body.renewal-header-overlay {
    --overlay-menu-top: 56px;
  }

  body.renewal-header-overlay::before {
    background: rgba(255, 255, 255, .78);
    -webkit-backdrop-filter: saturate(1.04) blur(16px);
    backdrop-filter: saturate(1.04) blur(16px);
  }

  body.renewal-header-overlay #menu_r1 .top_r1_block_wrapper,
  body.renewal-header-overlay #menu_r1 .top_r1_block,
  body.renewal-header-overlay #menu_r1 .head_logo_row_block,
  body.renewal-header-overlay #menu_r1 .head_logo_row_block h1,
  body.renewal-header-overlay #menu_r1 .head_logo_row_block a {
    height: 56px !important;
  }

  body.renewal-header-overlay #menu_r1 #main_logo_img {
    width: 132px !important;
    height: 56px !important;
  }

  body.renewal-header-overlay #menu_r1 .headerUtility {
    display: flex !important;
    height: 56px !important;
    margin-left: auto !important;
  }

  body.renewal-header-overlay #menu_r1 .headerUtilityItem {
    width: 44px !important;
    height: 44px !important;
  }

  body.renewal-header-overlay #menu_r1 .headerUtilityItem:nth-child(2),
  body.renewal-header-overlay #menu_r1 .headerUtilityItem:nth-child(3) {
    display: none !important;
  }

  body.renewal-header-overlay #menu_r1 .headerUtilityItem:nth-child(4) {
    order: 3;
  }

  body.renewal-header-overlay #menu_r1 .headerUtilityItem:nth-child(5) {
    order: 2;
  }

  body.renewal-header-overlay #menu_r1 .headerUtilityButton,
  body.renewal-header-overlay #menu_r1 .headerUtility .unifiedCartEntry {
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
  }

  body.renewal-header-overlay #menu_r1 .headerUtility #head_search {
    position: fixed !important;
    top: 56px !important;
    right: 12px !important;
    left: 12px !important;
    width: auto !important;
  }

  body.renewal-header-overlay #menu_r1 .headerUtility #head_mymenu {
    position: fixed !important;
    top: 56px !important;
    right: 12px !important;
    left: auto !important;
    width: min(220px, calc(100vw - 32px)) !important;
  }

  body.renewal-header-overlay #menu_r2 #top_r2_left {
    gap: 0;
  }

  body.renewal-header-overlay #menu_r2 .headerAllMenuButton {
    display: none !important;
  }

  body.renewal-header-overlay.has-header-top-banner {
    --overlay-menu-top: 96px;
  }

  body.renewal-header-overlay #menu_r1 .top_r1_block_wrapper,
  body.renewal-header-overlay #menu_r1 .top_r1_block,
  body.renewal-header-overlay #menu_r2 .fixed_header_content_box {
    background: transparent !important;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  body.renewal-header-overlay.renewal-menu-pinned #menu_r2 .fixed_header_content_box {
    background: rgba(255, 255, 255, .94) !important;
    -webkit-backdrop-filter: saturate(1.04) blur(16px);
    backdrop-filter: saturate(1.04) blur(16px);
  }

  body.renewal-header-overlay:has(#menu_r1.bojagiMobileCompactHeader)::before {
    height: 62px;
  }
}